/* Leon, the site's typeface (fonts/). Regular also answers for light (300), so body text never drops to Thin. */
@font-face { font-family: "Leon"; src: url("fonts/Leon-Thin.otf") format("opentype"); font-weight: 100 299; font-display: swap; }
@font-face { font-family: "Leon"; src: url("fonts/Leon-Regular.otf") format("opentype"); font-weight: 300 500; font-display: swap; }
@font-face { font-family: "Leon"; src: url("fonts/Leon-Bold.otf") format("opentype"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Leon"; src: url("fonts/Leon-Heavy.otf") format("opentype"); font-weight: 800 900; font-display: swap; }
/* the site's hand: Eliana (Lia Fonts, web licence), the same hand the pen writes the headline in */
@font-face { font-family: "Eliana"; src: url("fonts/LiaEliana-Regular.woff") format("woff"); font-display: swap; }

:root {
  --bg: #06090e;         /* near-black, where the blue light falls (section by section, below) */
  --text: #ffffff;
  --accent: #00b6bb;
  --ink: #eef3f4;       /* cool white ink for the handwriting */
  --font-display: "Leon", system-ui, sans-serif;
  --font-body: "Leon", system-ui, sans-serif;
  --font-logo: "Mrs Saint Delafield", cursive;
  /* 1 design px of the 1920×1080 Figma frame, scaled to the viewport */
  --u: min(calc(100vw / 1920), calc(100vh / 1080));
  --gutter: calc(97 * var(--u));
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 100vh;
  /* a vignette that pushes the edges into darkness */
  background: radial-gradient(ellipse 120% 100% at 50% 50%, transparent 50%, rgba(0, 0, 0, .3) 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: calc(47 * var(--u)) var(--gutter) 0 calc(99 * var(--u));
  height: calc(175 * var(--u));
  z-index: 20;
  transition: transform .7s var(--ease-out), background-color .5s;
}
/* Out of the way while reading down, back as soon as you scroll up */
.site-header.is-hidden { transform: translateY(-130%); } /* past the logo's tail too */
.site-header.is-solid {
  background: linear-gradient(to bottom, rgba(6, 9, 14, .94) 35%, rgba(6, 9, 14, 0));
}

.logo { display: block; line-height: 0; }
.logo img { display: block; height: calc(112 * var(--u)); width: auto; }

.nav {
  position: absolute;
  inset-inline: 0;
  margin-inline: auto;
  width: fit-content;
  display: flex;
  gap: calc(82 * var(--u));
  font-size: calc(19 * var(--u));
}

.nav a { opacity: .8; transition: opacity .3s; }
.nav a:hover { opacity: 1; }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--u));
  border-radius: 999px;
  border: 1px solid rgba(238, 243, 244, .55);
  color: #eef3f4;
  font-weight: 400;
  letter-spacing: .03em;
  overflow: hidden;
  isolation: isolate;
  transition: color .5s var(--ease-out), border-color .5s var(--ease-out);
}
.btn::before {                               /* the fill, rising from below on hover */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform .7s var(--ease-out);
}
.btn:hover::before,
.btn:focus-visible::before { transform: translateY(0); }
.btn:hover,
.btn:focus-visible { color: #061214; border-color: var(--accent); }
.btn--header {
  width: calc(198 * var(--u));
  height: max(44px, calc(53 * var(--u)));   /* never under a comfortable target */
  font-size: calc(18 * var(--u));
}


/* Nav links get an ink line that is drawn right-to-left on hover, like the headline */
.nav a {
  position: relative;
  padding-block: calc(6 * var(--u));
}
.nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .6s var(--ease-out);
}
.nav a:hover::after { transform: scaleX(1); }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 6px;
}

.hero__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  will-change: transform, opacity;
}

.hero__stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: calc(30 * var(--u));
  text-align: center;
}


.hero__sub {
  margin: calc(150 * var(--u)) 0 0;   /* clearly more than the headline's own line gap, so it reads as a separate block */
  font-size: calc(22 * var(--u));
  font-weight: 400;
  line-height: 1.46;
  color: rgba(255, 255, 255, .86);
}



/* The prompt to scroll: shown until the pen starts writing, and again once the headline is finished */
.hero__prompt { transition: opacity .8s var(--ease-out); }
.js-hero .hero.is-started .hero__prompt { opacity: 0; }
.js-hero .hero.is-written .hero__prompt { opacity: 1; }
.scroll-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(150 * var(--u));
  margin: 0;
  text-align: center;
  font-size: calc(13 * var(--u));
  letter-spacing: .3em;
  color: rgba(238, 243, 244, .55);
}
/* the headline writes itself as the page opens: there is no "scroll to write" any more */
.scroll-hint { display: none; }

.headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(72 * var(--u));         /* Leon runs wide; this keeps the longest line clear of the edges */
  line-height: calc(94.5 * var(--u));
  letter-spacing: 0;
  text-align: center;
}

.headline__line {
  display: block;
  width: fit-content;
  margin-inline: auto;
  white-space: nowrap;
}

/* Zero-size marker whose bottom edge sits on the text baseline */
.hl-base {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: baseline;
}

/* The opening film, full screen. The notebook page: dark paper, ruled, with the teal margin line on the
   right as in a Hebrew notebook, and the spine's shadow along that edge. main.js mirrors this drawing on
   the canvas it crumples (keep PAGE_RULE / PAGE_MARGIN there in step). */
.notebook-page {
  position: absolute;
  inset: 0;
  z-index: 2;
  --page-rule: calc(64 * var(--u));
  background:
    linear-gradient(to left, rgba(0, 0, 0, .55), transparent calc(90 * var(--u))),
    linear-gradient(to left, transparent calc(150 * var(--u) - 1px), rgba(0, 182, 187, .55) calc(150 * var(--u) - 1px) calc(150 * var(--u)), transparent calc(150 * var(--u)) calc(156 * var(--u) - 1px), rgba(0, 182, 187, .28) calc(156 * var(--u) - 1px) calc(156 * var(--u)), transparent calc(156 * var(--u))),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--page-rule) - 1px), rgba(255, 255, 255, .075) calc(var(--page-rule) - 1px) var(--page-rule)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    linear-gradient(160deg, #19202b, #121924 60%, #0f1520);   /* a dark blue page, in tone with the site under it */
}
.draft-line { display: none; }   /* only the text it holds is used, to build the handwriting */
.draft-svg {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.draft-strike { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 1000 2000; stroke-dashoffset: 1001; }
.crumple { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; visibility: hidden; }
/* The notebook's cover: black leather, the mark pressed into it, an elastic band; it opens on its spine,
   the right edge, as a Hebrew notebook does */
.notebook-cover {
  position: absolute;
  inset: 0;
  z-index: 6;
  transform-origin: 100% 50%;
  transform-style: preserve-3d;
  border-radius: calc(28 * var(--u)) 0 0 calc(28 * var(--u));   /* rounded on the opening edge; square on the spine */
}
.notebook-cover__front,
.notebook-cover__back {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  backface-visibility: hidden;
}
/* inside the cover: dark endpaper, a fine teal rule in from the edge, and the leather turned over its rim */
.notebook-cover__back {
  transform: rotateY(180deg);
  border-radius: 0 calc(28 * var(--u)) calc(28 * var(--u)) 0;
  background:
    radial-gradient(ellipse 60% 50% at 60% 35%, rgba(255, 255, 255, .06), transparent 65%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    linear-gradient(160deg, #26353a, #1c282c 60%, #152024);
  box-shadow:
    inset 0 0 0 calc(14 * var(--u)) #0c0d0f,                                  /* the leather folded over the edge */
    inset 0 0 0 calc(40 * var(--u)) rgba(0, 0, 0, 0),
    inset 0 0 calc(120 * var(--u)) rgba(0, 0, 0, .55);
  outline: 1px solid rgba(0, 182, 187, .45);
  outline-offset: calc(-40 * var(--u));
}
.notebook-cover__backshade { position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: .55; }
.notebook-shadow {                           /* the cover's shadow on the page, darkest by the spine */
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, .85), rgba(0, 0, 0, .45) 35%, transparent 75%);
}
html:not(.js-hero) .notebook-shadow { display: none; }
.notebook-cover__front {
  background:
    /* the lamp's sheen on the leather, and a soft gloss across it */
    radial-gradient(ellipse 60% 50% at 38% 30%, rgba(255, 255, 255, .075), transparent 65%),
    linear-gradient(118deg, transparent 32%, rgba(255, 255, 255, .03) 46%, transparent 60%),
    /* pebbled leather: noise lit from the top left, so each grain has a light and a dark side */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='l'><feTurbulence type='fractalNoise' baseFrequency='.22' numOctaves='2' seed='4' stitchTiles='stitch'/><feDiffuseLighting lighting-color='white' surfaceScale='1.6'><feDistantLight azimuth='225' elevation='48'/></feDiffuseLighting><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .11 0 0 0 -.045'/></filter><rect width='100%' height='100%' filter='url(%23l)'/></svg>"),
    /* the spine: a crease and a slight rise along the right edge */
    linear-gradient(to left, rgba(255, 255, 255, .06), rgba(0, 0, 0, .35) calc(14 * var(--u)), transparent calc(15 * var(--u)), rgba(255, 255, 255, .025) calc(40 * var(--u)), transparent calc(70 * var(--u))),
    linear-gradient(140deg, #17181b, #0e0f11 55%, #0a0a0c);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),            /* the top edge catches the lamp */
    inset 0 0 0 1px rgba(255, 255, 255, .07),          /* a fine rim of light all round the cut leather */
    inset 0 0 calc(140 * var(--u)) rgba(0, 0, 0, .6);
}
/* stitched all round, a little in from the edge */
.notebook-cover__stitch {
  position: absolute;
  inset: calc(26 * var(--u)) calc(30 * var(--u)) calc(26 * var(--u)) calc(26 * var(--u));
  border: 1px dashed rgba(255, 255, 255, .1);
  border-right: 0;
  border-radius: calc(16 * var(--u)) 0 0 calc(16 * var(--u));
  pointer-events: none;
}
/* the mark stamped in silver foil: metal that catches the light, pressed a hair into the leather */
.notebook-cover__foil {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(300 * var(--u));
  aspect-ratio: 1344 / 951;
  transform: translate(-50%, -50%);
  background: linear-gradient(118deg, #4d5357 0%, #a9b1b4 30%, #f1f6f7 46%, #9fe3e5 50%, #f1f6f7 54%, #8c9497 72%, #43484b 100%);
  -webkit-mask: url("images/logo-mark.png") center / contain no-repeat;
  mask: url("images/logo-mark.png") center / contain no-repeat;
  background-size: 300% 100%;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .9));
  opacity: .85;
  animation: foil 7s ease-in-out infinite;    /* the lamp's light slides across the metal, slowly */
}
@keyframes foil {
  0%, 100% { background-position: 100% 0; }
  50% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) { .notebook-cover__foil { animation: none; background-position: 50% 0; } }
.notebook-cover__band {                     /* the elastic that keeps it closed, with a sheen along it */
  position: absolute;
  top: calc(-6 * var(--u));
  bottom: calc(-6 * var(--u));
  left: calc(170 * var(--u));
  width: calc(18 * var(--u));
  background: linear-gradient(to right, #030304, #1f2226 35%, #2c3035 50%, #121417 70%, #030304);
  box-shadow: calc(4 * var(--u)) 0 calc(14 * var(--u)) rgba(0, 0, 0, .75), calc(-2 * var(--u)) 0 calc(8 * var(--u)) rgba(0, 0, 0, .6);
}
/* darkens the cover as it turns away from the lamp (main.js) */
.notebook-cover__shade { position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: 0; pointer-events: none; }
.hero__prompt { position: absolute; inset: 0; z-index: 9; pointer-events: none; }   /* the scroll prompt shows on the cover too, over the film bars */

/* The camera the scene is shot through (main.js sets its transform; none once the headline is written) */
.hero__camera { position: absolute; inset: 0; transform-origin: 0 0; }
/* hidden until the camera has framed its first shot, so the page never shows unframed for a moment */
.js-hero .hero__camera:not(.is-framed) { opacity: 0; }
.js-hero .hero__camera { transition: opacity .6s ease; }
.js-hero .hero__camera {
  will-change: transform;
  border-radius: calc(28 * var(--u)) 0 0 calc(28 * var(--u));
  /* seen from a distance, the notebook is an object on the desk: its shadow, and the edges of the
     pages under the cover (off screen once the camera is close) */
  /* the block of pages under the cover: thin cream-grey edges stacked under it, then the shadow */
  box-shadow:
    0 calc(3 * var(--u)) 0 calc(-1 * var(--u)) #45474b,
    0 calc(6 * var(--u)) 0 calc(-2 * var(--u)) #2e3034,
    0 calc(9 * var(--u)) 0 calc(-3 * var(--u)) #3d3f43,
    0 calc(12 * var(--u)) 0 calc(-4 * var(--u)) #26282b,
    0 calc(16 * var(--u)) 0 calc(-5 * var(--u)) #0d0e10,
    0 calc(80 * var(--u)) calc(160 * var(--u)) rgba(0, 0, 0, .92);
}

/* The lamp: a huge square, dark but for a soft pool of light at its centre. main.js moves the pool after
   the pen and sets how dark the rest of the frame falls */
.hero__light {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 7;
  width: 400vmax;
  height: 400vmax;
  margin: -200vmax 0 0 -200vmax;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle closest-side, rgba(3, 4, 5, 0) 0%, rgba(3, 4, 5, .04) 3%, rgba(3, 4, 5, .26) 6%, rgba(3, 4, 5, .6) 10%, rgba(3, 4, 5, .85) 15%, rgba(3, 4, 5, .96) 22%, rgba(3, 4, 5, .98) 100%);
  will-change: transform, opacity;
}

/* The film's frame: cinema bars, the scene and a running timecode (main.js) */
.film { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.film__bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 10.5vh;
  background: #030304;
  will-change: transform;
}
.film__bar--top { top: 0; transform-origin: 50% 0; box-shadow: 0 1px 0 rgba(255, 255, 255, .035); }
.film__bar--bottom {
  bottom: 0;
  transform-origin: 50% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  direction: ltr;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .035);
}
.film__scene,
.film__tc {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  margin: 0;
  font-size: calc(12 * var(--u));
  letter-spacing: .38em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: rgba(238, 243, 244, .45);
}
.film__num { color: rgba(238, 243, 244, .8); }
.film__scene i { width: calc(44 * var(--u)); height: 1px; background: rgba(0, 182, 187, .6); }
.film__rec {                                 /* the camera's running light */
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  border-radius: 50%;
  background: var(--accent);
  animation: rec 1.4s steps(1) infinite;
}
@keyframes rec { 50% { opacity: .15; } }
.film__sep { width: calc(28 * var(--u)); height: 1px; background: rgba(238, 243, 244, .2); }
.film__sound {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: calc(10 * var(--u)) 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  pointer-events: auto;
  transition: color .4s;
}
.film__sound:hover, .film__sound[aria-pressed="true"] { color: rgba(238, 243, 244, .85); }
.film__skip {
  padding: calc(10 * var(--u)) 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  pointer-events: auto;
  transition: color .4s;
}
.film__skip:hover { color: rgba(238, 243, 244, .85); }
.film__skip span { display: inline-block; transition: transform .4s var(--ease-out); }
.film__skip:hover span { transform: translateX(calc(4 * var(--u))); }
.film__eq { display: flex; align-items: flex-end; gap: calc(3 * var(--u)); height: calc(12 * var(--u)); }
.film__eq i { width: calc(2 * var(--u)); height: 30%; background: var(--accent); transform-origin: bottom; }
.film__sound[aria-pressed="true"] .film__eq i { animation: eq .9s ease-in-out infinite alternate; }
.film__sound[aria-pressed="true"] .film__eq i:nth-child(2) { animation-duration: .6s; }
.film__sound[aria-pressed="true"] .film__eq i:nth-child(3) { animation-duration: .75s; }
@keyframes eq { from { height: 25%; } to { height: 100%; } }
/* The narration: thin, airy lines in the lower third, each word rising out of a soft blur */
.film__captions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(10.5vh + 120 * var(--u));
  display: grid;
  justify-items: center;
}
.film__caption {
  grid-area: 1 / 1;
  margin: 0;
  font-size: calc(30 * var(--u));
  font-weight: 200;
  letter-spacing: .03em;
  color: rgba(238, 243, 244, .88);
  text-shadow: 0 0 calc(30 * var(--u)) rgba(0, 0, 0, .9);
}
.film__caption .w { display: inline-block; opacity: 0; will-change: transform, opacity, filter; }

/* An anamorphic light streak across the frame as the bars open */
.film__flare {
  position: absolute;
  left: -20%;
  right: -20%;
  top: 50%;
  height: calc(2 * var(--u));
  margin-top: -1px;
  opacity: 0;
  transform: scaleX(0);
  background: linear-gradient(90deg, transparent, rgba(0, 182, 187, .25) 25%, rgba(200, 250, 252, .95) 50%, rgba(0, 182, 187, .25) 75%, transparent);
  mix-blend-mode: screen;
}
.film__flare::after {
  content: "";
  position: absolute;
  left: 30%;
  right: 30%;
  top: 50%;
  height: calc(90 * var(--u));
  transform: translateY(-50%);
  background: radial-gradient(ellipse closest-side, rgba(255, 244, 228, .16), transparent);
}
html:not(.js-hero) .hero__light,
html:not(.js-hero) .film { display: none; }
/* Without the animated hero there is no draft: just the page with the finished headline */
html:not(.js-hero) .notebook-page,
html:not(.js-hero) .notebook-cover,
html:not(.js-hero) .draft-svg,
html:not(.js-hero) .crumple { display: none; }

.hl-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

.hl-stroke {
  /* Thick pen stroke along the letter's centre line, clipped to the real letter shape */
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000 2000; /* matches pathLength; gap longer than the path so undrawn strokes leave no trace */
  stroke-dashoffset: 1001;
}

/* Full letter shape, faded in at the end of each letter to fill anything the pen line missed */
.hl-fill {
  fill: var(--ink);
  opacity: 0;
}


.pen-slot {
  display: inline-block;
  position: relative;
  width: calc(168 * var(--u));
  height: calc(61 * var(--u));
  margin-inline: calc(23 * var(--u));
  vertical-align: baseline;
  color: var(--ink); /* the little ink trail the quill leaves as it lands */
}

.pen-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pen-trail {
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.pen-photo {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.pen-photo img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  will-change: transform;
}
/* a black quill on a black page: its brass toned down to silver-champagne, as the seal's foil, and a
   hairline of cool light along its edge keeps its outline */
.pen-photo__pen { filter: saturate(.32) brightness(1.06) contrast(1.06) drop-shadow(0 0 .8px rgba(232, 234, 240, .38)); }
.pen-photo__shadow { filter: brightness(0) blur(5px); opacity: .5; }
/* one slow sweep of light along the quill as it comes to rest, clipped to its shape */
.pen-photo__shine {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 250, 240, .42) 50%, transparent 60%) 130% 0 / 260% 100% no-repeat;
  -webkit-mask: url(images/quill.webp) 0 0 / 100% 100% no-repeat;
          mask: url(images/quill.webp) 0 0 / 100% 100% no-repeat;
  mix-blend-mode: screen;
  will-change: transform;
}
.pen-photo__shine.is-on { animation: pen-shine 2.4s cubic-bezier(.45, 0, .2, 1) .3s both; }
@keyframes pen-shine {
  0%   { opacity: 0; background-position: 130% 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; background-position: -30% 0; }
}

.pen-hand { filter: saturate(.32) brightness(1.06) contrast(1.06) drop-shadow(0 6px 10px rgba(0, 0, 0, .4)); }

/* Animated mode: the flying pen replaces the static one */
.js-hero .pen-photo.is-ready { display: block; }
.js-hero .pen-hand { visibility: hidden; }
/* The handwriting is the headline; the typeset text stays for SEO / screen readers only */
.js-hero .hl-seg,
.hand-ready .hl-seg { color: transparent; }
/* Without the animation (narrow screens, reduced motion) show the finished handwriting */
.hand-ready:not(.js-hero) .hl-fill { opacity: 1; }
.hand-ready:not(.js-hero) .hl-stroke { stroke-dashoffset: 0; }
/* a stroke not yet written is hidden outright: its round cap would still show as a dot at its start */
.js-hero .hl-stroke { visibility: hidden; }
.js-hero .pen-trail { stroke-dasharray: 1000 2000; stroke-dashoffset: 1001; opacity: 0; }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: calc(48 * var(--u));
  width: calc(4 * var(--u));
  height: calc(84 * var(--u));
  transform: translateX(-50%);
  border-radius: 3px;
  background: linear-gradient(to bottom, var(--accent), rgba(0, 182, 187, 0));
  overflow: hidden;
}

/* A soft light that runs down the scroll line */
.scroll-cue::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 40%;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .8), transparent);
  animation: cue-light 2.6s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes cue-light {
  0% { transform: translateY(-100%); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(260%); opacity: 0; }
}

/* Fine film grain over everything, for a printed, tactile feel */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .05;
  inset: -50%;
  animation: grain 1s steps(6) infinite;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Real film grain moves: the noise jumps a little every frame */
@keyframes grain {
  0%   { transform: translate(0, 0); }
  17%  { transform: translate(-3%, 2%); }
  33%  { transform: translate(2%, -4%); }
  50%  { transform: translate(-4%, -1%); }
  67%  { transform: translate(4%, 3%); }
  83%  { transform: translate(-1%, 4%); }
}

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .scroll-cue::after { animation: none; opacity: 0; }
}

/* The lamp's warm light behind the headline, still: a real lamp doesn't breathe */
.hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70vw;
  height: 70vh;
  translate: -50% -50%;
  background: radial-gradient(ellipse at center, rgba(255, 238, 214, .06), rgba(255, 228, 196, .02) 40%, transparent 70%);
  pointer-events: none;
}
@keyframes breathe {
  0%, 100% { opacity: .75; scale: 1; }
  50% { opacity: 1; scale: 1.08; }
}

/* ---------- Living ink background ---------- */
.ink-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}
main, .site-footer { position: relative; z-index: 1; }

/* ---------- Shared ---------- */
main > section { position: relative; }

.display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(48 * var(--u));
  line-height: 1.18;
  letter-spacing: .01em;
  color: var(--text);
}
.display--md { font-size: calc(42 * var(--u)); }
.display--lg { font-size: calc(62 * var(--u)); line-height: 1.12; }
.display--xl { font-size: calc(74 * var(--u)); line-height: 1.1; }

.eyebrow {                                 /* every section is introduced the same way: number, hairline, name */
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  margin: 0 0 calc(30 * var(--u));
  font-size: calc(15 * var(--u));
  letter-spacing: .14em;
  color: rgba(238, 243, 244, .62);
}
.eyebrow__num { color: var(--accent); letter-spacing: .2em; direction: ltr; }
.eyebrow__rule { flex: none; width: calc(56 * var(--u)); height: 1px; background: rgba(0, 182, 187, .6); }
.voices__intro .eyebrow,
.work__intro .eyebrow,
.site-footer .eyebrow { justify-content: center; }

.btn--accent {
  height: max(44px, calc(52 * var(--u)));
  padding: 0 calc(44 * var(--u));
  border-color: rgba(0, 182, 187, .8);
  font-size: calc(17 * var(--u));
}

/* ---------- 2 · The first second ---------- */
.moment {
  height: 100vh;
  display: grid;
  place-items: center;
  padding: 0 var(--gutter);
  text-align: center;
}
.moment__stage { display: grid; }
.moment__stage { gap: 1.2em; }
.moment.has-motion .moment__stage { gap: 0; }
.moment__line {
  font-size: calc(60 * var(--u));
  line-height: 1.18;
}
.moment__line .word { display: inline-block; }
/* with the animation running, both statements share one spot and one shows at a time; without it
   (reduced motion, or a script that failed) they simply stand one under the other */
.moment.has-motion .moment__line { grid-area: 1 / 1; }

/* ---------- 3 · Your story: sticky scroll reveal ---------- */
.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(110 * var(--u)) 0;             /* no column gap: the rules run straight across */
  padding: calc(200 * var(--u)) var(--gutter) calc(160 * var(--u));
}
.story__intro {
  grid-column: 1 / -1;
  min-height: 78vh;
  display: flex;
  align-items: center;
}
.story__heading {
  font-size: calc(132 * var(--u));
  line-height: 1.04;
}
.story__stage {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.story__head,
.story__window { grid-column: 1; }  /* RTL: column 1 is on the right */
.story__head { padding-inline-start: calc(40 * var(--u)); margin-bottom: calc(var(--rule) * 2); }
/* Pinned (desktop): the stage fills the screen, the heading holds at the top, the benefits glide up
   under it and fade out as they pass beneath it; the pile stays centred */
.story__stage.is-pinned { height: 100vh; overflow: hidden; }
.story__stage.is-pinned .story__head { grid-row: 1; align-self: start; position: relative; z-index: 1; padding-top: 11vh; margin: 0; }
.story__stage.is-pinned .story__window {
  grid-row: 1;
  height: 100vh;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 27vh, #000 36vh, #000 90%, transparent);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 27vh, #000 36vh, #000 90%, transparent);
}
.story__stage.is-pinned .story__visual { grid-row: 1; }
.story__stage.is-pinned .story__list { padding-top: calc(var(--rule) * 11); padding-bottom: calc(var(--rule) * 4); will-change: transform; }  /* whole rules, so the text stays on the lines */
.story__stage.is-pinned .story__visual { display: flex; flex-direction: column; justify-content: center; height: 100vh; }
.story__stage.is-pinned .story__stack { position: relative; top: 0; }

/* A notebook: hairline rules, a teal margin line, and all text sitting on the rules */
.story { --rule: calc(38 * var(--u)); }
.story__list {                             /* only where there is writing */
  background-image: repeating-linear-gradient(to bottom,
    transparent 0 calc(var(--rule) - 1px),
    rgba(255, 255, 255, .1) calc(var(--rule) - 1px) var(--rule));
}
.story__list { position: relative; padding-inline-start: calc(40 * var(--u)); }
.story__list::before {                    /* the margin line, on the right as in a Hebrew notebook */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(12 * var(--u));
  width: 1px;
  background: rgba(0, 182, 187, .5);
}
.benefit {
  min-height: calc(var(--rule) * 10);
  padding-top: calc(var(--rule) * 2);
  max-width: calc(720 * var(--u));
  transition: opacity .7s var(--ease-out);
}
.benefit__num {
  display: block;
  font: 500 calc(15 * var(--u)) / var(--rule) var(--font-body);
  letter-spacing: .1em;
  color: var(--accent);
}
.benefit__title {
  margin: 0;
  font: 400 calc(32 * var(--u)) / var(--rule) var(--font-display);
  padding-top: var(--rule);         /* a blank rule above it; its lines sit one rule apart, as the text below does */
}
.benefit__desc {
  margin: 0;
  font-size: calc(22 * var(--u));
  line-height: var(--rule);
  color: rgba(238, 243, 244, .9);
}
/* Settle each line of text onto its rule, the way you write in a notebook: each offset brings the
   baseline (measured in Leon at the design size) down onto the rule at the bottom of its line */
.benefit__num, .benefit__title, .benefit__desc { position: relative; }
.benefit__num { top: calc(12 * var(--u)); }
.benefit__title { top: calc(5 * var(--u)); }
.benefit__desc { top: calc(10 * var(--u)); }

/* With motion, only the benefit in view is fully lit */
.has-motion .benefit { opacity: .25; }
.has-motion .benefit.is-active { opacity: 1; }

.story__sign {                            /* signed on the right, a little in from the edge, in the headline's ink */
  display: block;
  width: fit-content;
  margin: calc(var(--rule) * 2) calc(60 * var(--u)) 0 0;
  font: calc(60 * var(--u)) / 1 "Eliana", cursive;
  color: var(--ink);
}

.story__visual { grid-column: 2; position: relative; padding-inline-start: calc(110 * var(--u)); }
.story__stack {
  position: sticky;
  top: calc(50vh - 220 * var(--u));
  width: 100%;
  max-width: calc(580 * var(--u));
  aspect-ratio: 4 / 3;
  margin-inline: auto;
}
/* Pictures pile up like loose pages, each a little askew.
   Each card holds a .paper that tilts toward the cursor in 3D, and the scene inside is a small
   diorama: note, screen and messages float at different depths above the page (depths in site.js). */
.paper-card {
  position: absolute;
  inset: 0;
  margin: 0;
  will-change: transform;
}
.paper {
  filter: saturate(.8) brightness(.86) contrast(1.05);       /* graded to the film */
  position: absolute;
  inset: 0;
  border-radius: calc(10 * var(--u));
  background: #111 var(--shot) right top / cover no-repeat;   /* the real page */
  box-shadow:
    0 70px 120px -40px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(255, 255, 255, .08);
  transform-style: preserve-3d;
  will-change: transform;
}
/* Light from where the cursor is: a soft glow that follows it across the page */
.paper__glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transform: translateZ(1px);
  background:
    radial-gradient(ellipse 70% 60% at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, .1), transparent 70%),
    linear-gradient(115deg, transparent calc(var(--gx, 30%) - 22%), rgba(235, 252, 255, .05) var(--gx, 30%), transparent calc(var(--gx, 30%) + 22%));
}
.paper-card:nth-child(1) { rotate: -4deg; }
.paper-card:nth-child(2) { rotate: 3deg; }
.paper-card:nth-child(3) { rotate: -1.5deg; }
/* The quote under the pile, large and clear, and whose page it is */
.story__caption {
  width: 100%;
  max-width: calc(580 * var(--u));
  margin: calc(64 * var(--u)) auto 0;
}
.story__quote {
  margin: 0;
  font: 400 calc(38 * var(--u)) / 1.25 var(--font-display);
  color: #eef3f4;
}
.story__who {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  margin-top: calc(18 * var(--u));
  font-size: calc(16 * var(--u));
  letter-spacing: .03em;
  color: rgba(238, 243, 244, .62);
}
.story__caption-num { color: var(--accent); letter-spacing: .2em; direction: ltr; }
.story__caption-rule { flex: none; width: calc(48 * var(--u)); height: 1px; background: rgba(0, 182, 187, .6); }

/* ---- On one card: the phone version of the page ---- */
.paper-card { font-size: calc(15 * var(--u)); }  /* everything inside is sized in em */
.scene { position: absolute; inset: 0; transform-style: preserve-3d; }
.layer { will-change: transform, opacity; }

.phone {
  position: absolute;
  left: 7%;
  top: 14%;
  width: 26%;
  aspect-ratio: 9 / 18;
  padding: .45em;
  border-radius: 1.9em;
  background: linear-gradient(150deg, #2a2a2e, #0d0d0f 55%, #1c1c20);
  box-shadow: 0 40px 70px -24px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .12);
  rotate: -4deg;
}
.phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 1.5em;
}

/* ---------- 4 · Projects ---------- */
.work {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(210 * var(--u)) var(--gutter) 0;
  text-align: center;
  overflow: hidden;
}
.work__project {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(18 * var(--u));
  margin-top: calc(64 * var(--u));
}
.work__name { margin: 0; font: 400 calc(32 * var(--u)) var(--font-display); }
.work__desc { margin: 0; font-size: calc(18 * var(--u)); line-height: 1.7; color: rgba(238, 243, 244, .78); }
.work__link { margin-top: calc(10 * var(--u)); }
.work__cards {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  margin-top: auto;
  padding-top: calc(200 * var(--u));      /* room for a card to be pulled up */
  margin-bottom: calc(-40 * var(--u));    /* only the very bottom runs off the edge, like loose photos */
  /* and fades into the page there, so the fan doesn't end on a hard cut */
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 94%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 94%);
}
/* Tall rounded cards, fanned and overlapping like a hand of cards */
.work-card {
  position: relative;
  display: block;
  flex: none;
  width: calc(250 * var(--u));
  height: calc(374 * var(--u));           /* the 338 × 506 reference, about 2 : 3 */
  margin-inline: calc(-22 * var(--u));    /* cards overlap, held close together */
  padding: calc(7 * var(--u));
  background: #eef2f3;
  border-radius: calc(34 * var(--u));
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9), 0 2px 4px rgba(0, 0, 0, .3);
  will-change: transform;
  transition: box-shadow .6s var(--ease-out);
}
.work-card:hover,
.work-card:focus-visible { box-shadow: 0 60px 90px -30px rgba(0, 0, 0, .95); outline: none; }   /* focus pulls the card out of the row (site.js): no frame needed */
/* Reserved spots: dark card, teal handwriting */
.work-card--soon { background: linear-gradient(160deg, #1c1c1f, #121214); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(0, 182, 187, .35); }
.work-card__soon {
  display: grid;
  place-items: center;
  height: 100%;
  border: 1px dashed rgba(0, 182, 187, .35);
  border-radius: calc(27 * var(--u));
  padding: calc(16 * var(--u));
  font: calc(30 * var(--u)) "Eliana", cursive;
  color: var(--accent);
  text-align: center;
}
.work-card img {
  filter: saturate(.75) brightness(.82) contrast(1.06);   /* graded to the film; full colour when picked */
  transition: filter .7s var(--ease-out);
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: calc(27 * var(--u));
}

/* Full-screen player */
.player {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(5, 6, 7, .86);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.player[hidden] { display: none; }
.player__frame {
  position: relative;
  height: 86vh;
  aspect-ratio: 9 / 16;
  max-width: 92vw;
  border-radius: calc(22 * var(--u));
  overflow: hidden;
  background: #000;
  box-shadow: 0 80px 140px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08);
  cursor: pointer;
}
.player__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.player__bar { position: absolute; inset: auto 0 0; height: 3px; background: rgba(255, 255, 255, .12); }
.player__bar i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.player__close {
  position: absolute;
  top: calc(40 * var(--u));
  left: var(--gutter);
  padding: .6em 0;
  border: 0;
  background: none;
  font: 400 calc(16 * var(--u)) var(--font-body);
  letter-spacing: .12em;
  color: rgba(238, 243, 244, .8);
  cursor: pointer;
}
.player__close:hover { color: var(--accent); }

@media (max-width: 767px) {
  .voices__row { grid-template-columns: repeat(2, 1fr); }
  .voice__video { filter: none; }
}

/* ---------- 5 · About ---------- */
.about {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(120 * var(--u));
  padding: calc(120 * var(--u)) var(--gutter) calc(220 * var(--u));
}
.about__top {
  display: flex;
  align-items: center;
  gap: calc(64 * var(--u));
}
.about__text { max-width: calc(760 * var(--u)); }
.about__top .display { text-align: right; }
.about__body {
  margin: calc(28 * var(--u)) 0 0;
  font-size: calc(22 * var(--u));
  font-weight: 300;
  line-height: 1.75;
  color: rgba(238, 243, 244, .9);
}
.about__sign {                             /* signed by hand, in the same ink as the headline */
  margin: calc(26 * var(--u)) 0 0;
  font: calc(64 * var(--u)) / 1 "Eliana", cursive;
  color: var(--accent);
  text-align: right;
}
.about__media {
  position: relative;
  flex: none;
  width: calc(460 * var(--u));
  aspect-ratio: 3 / 4;
  margin: 0;
}
.about__media::before {                    /* a teal hairline frame, offset down and to the left */
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(calc(-22 * var(--u)), calc(22 * var(--u)));
  border: 1px solid rgba(0, 182, 187, .45);
  pointer-events: none;
}
.about__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #19191b;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .9);
}
.about__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: saturate(.86) contrast(1.05) brightness(.97);   /* a quieter, warmer grade for the dark page */
}
.about__photo::after {                     /* a soft fall-off into the page at the bottom */
  content: "";
  position: absolute;
  inset: 55% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(11, 11, 12, .35));
  pointer-events: none;
}
.about__big { text-align: center; }

/* ---------- Footer ---------- */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(44 * var(--u));
  padding: calc(170 * var(--u)) var(--gutter) calc(56 * var(--u));
  border-top: 1px solid rgba(255, 255, 255, .08);
  text-align: center;
}
.site-footer__lead {
  margin: calc(-16 * var(--u)) 0 0;
  font-size: calc(20 * var(--u));
  font-weight: 300;
  color: rgba(238, 243, 244, .82);
}
.site-footer__note {
  margin: calc(-22 * var(--u)) 0 0;
  font-size: calc(15 * var(--u));
  color: rgba(238, 243, 244, .55);
}
@media (max-width: 767px) { .site-footer__note { margin-top: -12px; font-size: 13px; } }
.site-footer__meta {
  display: flex;
  gap: calc(24 * var(--u));
  margin: calc(70 * var(--u)) 0 0;
  font-size: calc(14 * var(--u));
  color: rgba(255, 255, 255, .4);
}

.site-footer { overflow: hidden; }
.site-footer__sign {                         /* the logo mark, quietly closing the page */
  display: block;
  width: calc(300 * var(--u));
  height: auto;
  margin: calc(80 * var(--u)) 0 calc(20 * var(--u));
  opacity: .3;
  pointer-events: none;
  user-select: none;
}

/* ---------- Narrow screens: stack the two-column sections ---------- */
@media (max-width: 767px) {
  :root { --u: calc(100vw / 760); }
  .story, .story__stage { grid-template-columns: 1fr; }
  .story__list, .story__visual, .story__head, .story__window { grid-column: 1; }
  .story__visual { grid-row: 1; }
  .about__top { flex-direction: column; }
  .about__top .display { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
}

/* ---------- Finishing touches: intro, edge labels, cursor ---------- */

/* Intro: two black panels that part at a teal seam. Hidden when it already played this visit, or without motion. */
.intro {
  position: fixed;
  inset: 0;
  z-index: 45;                               /* under the film grain, over everything else */
  pointer-events: none;
  animation: intro-failsafe 0s 8s forwards;  /* never left covering the page if a script fails */
}
@keyframes intro-failsafe { to { visibility: hidden; } }
.no-intro .intro { display: none; }
.intro__panel {
  position: absolute;
  inset-inline: 0;
  height: 50.5%;                             /* a hair of overlap, so no light shows through before they part */
  background:
    radial-gradient(ellipse 60% 80% at 50% 100%, rgba(255, 238, 214, .04), transparent 70%),
    var(--bg);
}
.intro__panel--top { top: 0; }
.intro__panel--bottom { bottom: 0; }
.intro__panel { background: #030304; }       /* the room before the lamp is on */
.intro__seam {
  position: absolute;
  top: 50%;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, #bff6f7 50%, var(--accent) 70%, transparent);
  transform: scaleX(0);
  opacity: 0;
}
.intro__mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.intro__logo {
  position: relative;
  display: block;
  width: calc(400 * var(--u));
  clip-path: inset(-10% 100% -10% 0);        /* revealed left to right, like a signature */
}
.intro__logo img { display: block; width: 100%; height: auto; }
.intro__shine {                              /* a band of light that glides across the logo, masked to its strokes */
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .95) 48%, rgba(127, 230, 233, .9) 50%, rgba(255, 255, 255, .95) 52%, transparent 60%) 100% 0 / 300% 100%;
  -webkit-mask: url("images/logo-full.png") center / 100% 100% no-repeat;
  mask: url("images/logo-full.png") center / 100% 100% no-repeat;
}
.intro__meta {
  position: absolute;
  bottom: calc(56 * var(--u));
  margin: 0;
  font-size: calc(12 * var(--u));
  letter-spacing: .38em;
  text-transform: uppercase;
  color: rgba(238, 243, 244, .45);
  direction: ltr;
}
.intro__meta--start { left: var(--gutter); }
.intro__meta--end { right: var(--gutter); }
.intro__count {
  position: absolute;
  right: var(--gutter);
  bottom: calc(88 * var(--u));
  font: 200 calc(140 * var(--u)) / 1 var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: rgba(238, 243, 244, .9);
  direction: ltr;
}
.intro__bar {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, .06);
}
.intro__bar i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 182, 187, .4), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
}

/* Edge labels: small, spaced capitals set vertically in the side margins */
.edge {
  position: fixed;
  top: 50%;
  z-index: 19;
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
  writing-mode: vertical-rl;
  direction: ltr;
  font-size: calc(12 * var(--u));
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, .42);
  pointer-events: none;
}
.edge--left { left: calc(34 * var(--u)); transform: translateY(-50%) rotate(180deg); }
.edge--right { right: calc(34 * var(--u)); transform: translateY(-50%); }
.edge--left i { width: 1px; height: calc(46 * var(--u)); background: rgba(0, 182, 187, .5); }
.edge__num { color: var(--accent); }
.edge__track { position: relative; width: 1px; height: calc(120 * var(--u)); background: rgba(255, 255, 255, .12); overflow: hidden; }
.edge__fill { position: absolute; inset: 0; background: var(--accent); transform: scaleY(0); transform-origin: top; }
/* leaving with the film: faded through filter, so it never fights the opacity the entrance animates */
.edge { transition: filter .8s var(--ease-out), visibility 0s; }
.film-over .edge { filter: opacity(0); visibility: hidden; transition: filter .8s var(--ease-out), visibility 0s .8s; }

/* Custom cursor (fine pointers only): an ivory dot that opens into a ring over links,
   and into a disc that reads "צפייה" over the projects */
.has-cursor, .has-cursor * { cursor: none !important; }
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.cursor.is-on { opacity: 1; }
.cursor__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid transparent;
  transform: scale(.11);
  transition: transform .55s var(--ease-out), background-color .4s, border-color .4s;
}
.cursor.is-link .cursor__disc { transform: scale(.7); background: transparent; border-color: rgba(245, 240, 230, .6); }
.cursor.is-view .cursor__disc { transform: scale(1.5); background: var(--ink); }
.cursor__label {
  position: relative;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--bg);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .3s, transform .5s var(--ease-out);
}
.cursor.is-view .cursor__label { opacity: 1; transform: scale(1); }

@media (max-width: 767px) {
  .edge { display: none; }
}

.work-card:hover img, .work-card:focus-visible img { filter: none; }

/* ---------- Phones: the short, portrait film and a compact header ---------- */
.menu-btn { display: none; }
@media (max-width: 767px) {
  .site-header { height: 72px; padding: 14px 16px 0; }
  .logo img { height: 46px; }
  .btn--header { width: auto; height: 36px; padding: 0 16px; font-size: 13px; }
  .menu-btn {
    display: inline-flex;
    padding: 8px 4px;
    border: 0;
    background: none;
    color: #eef3f4;
    font: inherit;
    font-size: 14px;
    letter-spacing: .04em;
    cursor: pointer;
    position: relative;
    z-index: 2;
  }
  .nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    width: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    font-size: 26px;
    background: rgba(5, 6, 7, .97);
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s var(--ease-out);
  }
  .menu-open .nav { opacity: 1; pointer-events: auto; }
  .menu-open .site-header { transform: none; }

  /* the headline: each run of words its own line, the resting quill after the last */
  .headline { display: flex; flex-direction: column; align-items: center; font-size: calc(80 * var(--u)); line-height: calc(104 * var(--u)); }   /* the handwriting is the screen's largest words */
  .headline__line { display: contents; }
  .hl-row { display: block; white-space: nowrap; }
  .pen-slot { order: 99; margin-top: calc(24 * var(--u)); }
  .hero__sub { margin-top: calc(96 * var(--u)); padding-inline: 20px; font-size: 16px; line-height: 1.6; }
  .hero__sub br { display: none; }
  .scroll-hint { bottom: 110px; font-size: 12px; }

  /* the film's frame: no top bar (the header is there), a slim bottom one */
  .film__bar--top { display: none; }
  .film__bar { height: 52px; }
  .film__bar--bottom { padding: 0 16px; }
  .film__scene, .film__tc { gap: 10px; font-size: 9px; letter-spacing: .2em; }
  .film__scene i, .film__sep, .film__name { display: none; }
  .film__captions { bottom: 150px; padding-inline: 24px; }
  .film__caption { font-size: 16px; text-align: center; }
}

/* ---------- Phones: readable type, thumb-sized targets, nothing off the edge ----------
   body copy 16px and up, small labels 12px and up, every tap target at least 44px */
@supports (height: 100svh) {
  .hero, .moment { height: 100svh; }
}
@media (max-width: 767px) {
  :root { --gutter: 20px; }

  /* type */
  .display { font-size: 28px; line-height: 1.2; }
  .display--md { font-size: 26px; }
  .display--lg { font-size: 30px; }
  .display--xl { font-size: 32px; }
  .story__heading { font-size: 42px; line-height: 1.1; }
  .moment__line { font-size: 25px; line-height: 1.3; }
  .eyebrow { gap: 12px; margin-bottom: 18px; font-size: 12px; }
  .eyebrow__rule { width: 36px; }
  .hero__sub { font-size: 16px; line-height: 1.6; }
  .benefit__num { font-size: 13px; top: 0; }
  .benefit__title { font-size: 21px; line-height: 1.35; top: 0; }
  .benefit__desc { font-size: 16px; line-height: 1.65; top: 0; }
  .story__quote { font-size: 20px; }
  .story__who, .story__caption-num, .story__caption-text { font-size: 13px; }
  .voices__lead { font-size: 16px; }
  .voice__num, .voice__time { font-size: 12px; }
  .about__body { font-size: 16px; line-height: 1.7; }
  .site-footer__meta { font-size: 13px; }
  .work__name { font-size: 22px; }
  .work__desc { font-size: 16px; line-height: 1.6; }

  /* targets */
  .btn--header { height: 44px; padding: 0 18px; font-size: 14px; }
  .btn--accent { height: 48px; padding: 0 28px; font-size: 15px; }
  .menu-btn { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .nav a { padding: 12px 20px; }
  .film__skip, .film__sound { min-height: 44px; padding: 0 6px; }
  .film__scene, .film__tc { font-size: 11px; }
  .film__time, .film__rec { display: none; }

  /* projects: a row of cards you swipe, one centred at a time; nothing runs off the page */
  .work { min-height: 0; padding: 90px var(--gutter) 70px; }
  .work__cards {
    justify-content: flex-start;
    align-items: stretch;
    gap: 14px;
    width: calc(100% + 2 * var(--gutter));
    margin: 36px calc(-1 * var(--gutter)) 0;
    padding: 10px 18vw 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    direction: ltr;                 /* Safari starts a right-to-left scroll row at its far end: start at the first card */
    -webkit-overflow-scrolling: touch;
  }
  .work__cards::-webkit-scrollbar { display: none; }
  .work-card {
    width: 64vw;
    height: 96vw;
    margin: 0;
    scroll-snap-align: center;
    transform: none !important;     /* no fan and no pull on touch: the swipe is the interaction */
  }
}

/* Phones, the story section: no picture stack; each benefit stands apart under a clear, larger title;
   and the gap before the section closes up */
@media (max-width: 767px) {
  .story { padding: 40px var(--gutter) 80px; gap: 40px 0; }
  .story__intro { min-height: 0; }
  .story__visual { display: none; }
  .story__list { background-image: none; padding-inline-start: 0; }
  .story__list::before { display: none; }
  .has-motion .benefit { opacity: 1; }
  .benefit { min-height: 0; padding: 32px 0 0; margin-top: 32px; border-top: 1px solid rgba(0, 182, 187, .35); }
  .benefit:first-child { margin-top: 8px; }
  .benefit__num { display: block; margin-bottom: 10px; font-size: 14px; color: var(--accent); }
  .benefit__title { margin: 0 0 14px; font-size: 27px; line-height: 1.3; }
  .story__sign { margin-top: 40px; font-size: 38px; }
}

/* nothing may widen the page sideways: clipped, without
   turning the page into a scroll box, so pinning and smooth scrolling are unaffected */
html, body { overflow-x: clip; }

/* ---------- Floating WhatsApp: black and teal, in the site's own language (not the green bubble) ---------- */
.wa-float {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 40;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(0, 182, 187, .55);
  background: #0b1320;
  color: var(--accent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
  opacity: 0;
  transform: translateY(14px) scale(.92);
  pointer-events: none;
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), background-color .4s, color .4s;
}
.wa-float svg { width: 24px; height: 24px; fill: currentColor; }
.wa-float.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.wa-float:hover, .wa-float:focus-visible { background: var(--accent); color: #061214; }
@media (max-width: 767px) {
  .wa-float { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } }

/* ---------- Accessibility ---------- */
/* the skip link: out of sight until it is reached with the keyboard */
.skip-link {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--accent);
  color: #061214;
  font-size: 15px;
  transform: translateY(-200%);
  transition: transform .3s var(--ease-out);
}
.skip-link:focus-visible { transform: none; }
/* the phone menu, while closed, is out of the keyboard's way too (not only invisible) */
@media (max-width: 767px) {
  .nav { visibility: hidden; transition: opacity .5s var(--ease-out), visibility 0s .5s; }
  .menu-open .nav { visibility: visible; transition: opacity .5s var(--ease-out), visibility 0s; }
}

/* the scene's title card, low on the left as in the film's bar */
.scene-card {
  position: fixed;
  left: var(--gutter);
  bottom: calc(48 * var(--u));
  z-index: 31;
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  margin: 0;
  direction: ltr;
  font-size: calc(12 * var(--u));
  letter-spacing: .38em;
  text-transform: uppercase;
  color: rgba(238, 243, 244, .5);
  pointer-events: none;
  opacity: 0;
}
.scene-card__num { color: rgba(238, 243, 244, .85); }
.scene-card i { width: calc(44 * var(--u)); height: 1px; background: rgba(0, 182, 187, .6); }
@media (max-width: 767px) { .scene-card { display: none; } }

/* ---------- The story's scenes: pages from the notebook ----------
   dark paper under the lamp, ruled, the teal margin line on the right; sized in em like the cards */
.paper--note {
  filter: none;
  background:
    radial-gradient(ellipse 70% 60% at 62% 38%, rgba(255, 255, 255, .07), transparent 70%),
    linear-gradient(to left, transparent calc(3.2em - 1px), rgba(0, 182, 187, .55) calc(3.2em - 1px) 3.2em, transparent 3.2em calc(3.5em - 1px), rgba(0, 182, 187, .25) calc(3.5em - 1px) 3.5em, transparent 3.5em),
    repeating-linear-gradient(to bottom, transparent 0 calc(2.6em - 1px), rgba(255, 255, 255, .065) calc(2.6em - 1px) 2.6em),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    linear-gradient(160deg, #1d2024, #15171a 60%, #101215);
  box-shadow: 0 70px 120px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.paper--note { --e: calc(15 * var(--u)); }   /* one unit for every position on the page */
.note-draft {
  position: absolute;
  top: calc(2.6 * var(--e));
  right: calc(4.4 * var(--e));
  left: calc(2 * var(--e));
  margin: 0;
  font: 1.75em / 1.5 "Eliana", cursive;
  color: rgba(238, 243, 244, .42);
}
.note-draft span { position: relative; display: inline-block; }
.note-strike {
  position: absolute;
  left: -3%;
  top: 38%;
  width: 106%;
  height: .55em;
  overflow: visible;
}
.note-strike path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
}
.note-found {
  position: absolute;
  top: calc(7.4 * var(--e));
  right: calc(4.4 * var(--e));
  margin: 0;
  font: 3.3em / 1.12 "Eliana", cursive;
  color: var(--ink);
}
.note-label {
  position: absolute;
  right: calc(4.4 * var(--e));
  bottom: calc(2.4 * var(--e));
  display: flex;
  align-items: center;
  gap: .9em;
  margin: 0;
  font-size: .85em;
  letter-spacing: .28em;
  color: rgba(0, 182, 187, .9);
}
.note-label i { width: 2.6em; height: 1px; background: rgba(0, 182, 187, .6); }

/* the conversations: a dark screen under the lamp, glass bubbles, the reply in teal (sized in em) */
.paper--chat {
  filter: none;
  background:
    radial-gradient(ellipse 70% 60% at 60% 30%, rgba(255, 255, 255, .06), transparent 70%),
    linear-gradient(165deg, #191c20, #121417 55%, #0d0f11);
  box-shadow: 0 70px 120px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.paper--chat .scene {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .75em;
  padding: 1.8em 2.2em 2em;
}
.chat-head {
  position: absolute;
  top: 1.4em;
  right: 2.2em;
  left: 2.2em;
  display: flex;
  align-items: center;
  gap: .8em;
  margin: 0;
  padding-bottom: 1em;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-size: 1.05em;
  color: rgba(238, 243, 244, .9);
}
.chat-head small { display: block; margin-top: .15em; font-size: .72em; color: rgba(238, 243, 244, .45); }
.chat-avatar {
  display: grid;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  border: 1px solid rgba(0, 182, 187, .5);
  font-size: .95em;
  color: var(--accent);
}
.chat-msg {
  max-width: 72%;
  margin: 0;
  padding: .75em 1.05em;
  border-radius: 1.2em;
  font-size: 1.05em;
  line-height: 1.45;
}
.chat-msg--in {
  align-self: flex-start;            /* right, in a right-to-left thread */
  border-bottom-right-radius: .35em;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  color: rgba(238, 243, 244, .92);
}
.chat-msg--out {
  align-self: flex-end;              /* left */
  border-bottom-left-radius: .35em;
  background: linear-gradient(150deg, rgba(0, 182, 187, .9), rgba(0, 130, 134, .9));
  color: #f4fbfb;
}
.chat-link {
  display: flex;
  align-items: center;
  gap: .7em;
  margin: -.2em -.35em .6em;
  padding: .45em;
  border-radius: .8em;
  background: rgba(0, 0, 0, .22);
  font-size: .9em;
}
.chat-link img { width: 2.8em; height: 3.8em; object-fit: cover; object-position: top; border-radius: .4em; }
.chat-link small { display: block; margin-top: .2em; font-size: .78em; opacity: .75; }
.chat-typing { display: flex; gap: .35em; padding: .95em 1.1em; }
.chat-typing i { width: .45em; height: .45em; border-radius: 50%; background: rgba(255, 255, 255, .85); animation: typing 1.2s ease-in-out infinite; }
.chat-typing i:nth-child(2) { animation-delay: .15s; }
.chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-.2em); } }
@media (prefers-reduced-motion: reduce) { .chat-typing i { animation: none; } }

/* ---------- Minimum sizes on large screens ----------
   the design scales with the window; on a laptop that took small labels under 12px. They keep their
   proportions on big screens and never drop below a readable size; the top links get a taller hit area */
@media (min-width: 768px) {
  .eyebrow, .benefit__num, .story__who, .story__caption-num, .story__caption-text, .site-footer__meta { font-size: max(12px, calc(15 * var(--u))); }
  .edge, .film__scene, .film__tc, .scene-card, .scroll-hint { font-size: max(11px, calc(12 * var(--u))); }
  .nav a { padding-block: max(12px, calc(6 * var(--u))); }
  /* reading text never below 16px, titles and controls in proportion; the notebook rules widen with them */
  .nav { font-size: max(14px, calc(19 * var(--u))); }
  .btn--header, .btn--accent { font-size: max(14px, calc(18 * var(--u))); }
  .hero__sub, .benefit__desc, .about__body { font-size: max(16px, calc(22 * var(--u))); }
  .work__desc, .site-footer__lead { font-size: max(16px, calc(20 * var(--u))); }
  .benefit__title, .work__name { font-size: max(21px, calc(32 * var(--u))); }
  .story { --rule: max(27px, calc(38 * var(--u))); }
}

/* ---------- The ground the whole page sits on: quiet, deep, tactile ----------
   a deep midnight blue: a cold light from the upper corner, a fainter one rising from the lower one, and a
   fine even paper grain
   across it (the notebook, everywhere). The ink light only breathes through it, no longer streaks */
body {
  background-color: #06090e;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>"),
    radial-gradient(ellipse 70% 55% at 82% -8%, rgba(56, 118, 196, .16), transparent 70%),
    radial-gradient(ellipse 120% 70% at 50% 0%, #0c1320, transparent 70%),
    linear-gradient(#0a0f17, #05080c 55%);
  background-attachment: fixed;
}
.ink-bg { opacity: .3; mix-blend-mode: screen; }

/* the guide's words under the story heading */
.story__intro { flex-direction: column; justify-content: center; align-items: flex-start; gap: calc(40 * var(--u)); }
.story__guide {
  max-width: calc(820 * var(--u));
  margin: 0;
  font-size: max(16px, calc(26 * var(--u)));
  font-weight: 300;
  line-height: 1.6;
  color: rgba(238, 243, 244, .82);
}
.btn--wide { width: auto; padding-inline: calc(40 * var(--u)); }
@media (max-width: 767px) {
  .story__guide { font-size: 17px; }
  .btn--wide { padding-inline: 24px; }
}

/* ---------- The story's close-ups: a tight crop of a real client page, like a detail in a magazine ---------- */
.paper--closeup {
  background: #f4ece6 var(--shot) var(--crop-pos) / var(--crop-size) no-repeat;
  filter: saturate(.9) brightness(.93);
  box-shadow: 0 70px 120px -40px rgba(0, 0, 0, .95);
}
.paper-card:has(.paper--closeup) { rotate: -1.5deg; }

/* ---------- The story's heading: one giant line that travels across the screen with the scroll (site.js) ---------- */
.drift-title {
  display: inline-block;
  white-space: nowrap;
  font-size: calc(220 * var(--u));
  line-height: 1.05;
  letter-spacing: -.005em;
  will-change: transform;
}
/* without motion it stays put, so it wraps to fit instead */
.story__intro { min-width: 0; }   /* the line may run past the screen without widening the grid */
html:not(.js-hero) .drift-title { display: block; white-space: normal; font-size: calc(132 * var(--u)); }
@media (max-width: 767px) {
  .drift-title { font-size: 56px; }
  html:not(.js-hero) .drift-title { font-size: 42px; }
}

/* paragraphs never end on a lone word */
.hero__sub, .story__guide, .benefit__desc, .about__body, .work__desc, .site-footer__lead { text-wrap: pretty; }

/* the held story already ends on a screen's worth of quiet page: no extra padding under it */
.story:has(.story__stage.is-pinned) { padding-bottom: 0; }

/* ---------- Tighter rhythm between sections ---------- */
/* the held statements end centred on a full screen: the projects come up into its empty lower part */
.js-hero .work { margin-top: -8vh; }
.work { min-height: 0; padding-top: calc(90 * var(--u)); }
/* the story's heading is held centred on its own: it doesn't need most of a screen around it */
.story { row-gap: calc(40 * var(--u)); }
.story__intro { min-height: 60vh; }
.about { padding-bottom: calc(110 * var(--u)); }

/* ---------- The process: large numerals with a hairline slash, the steps set down the diagonal it draws ---------- */
.process { position: relative; padding: calc(270 * var(--u)) var(--gutter) calc(190 * var(--u)); }   /* clear air after the projects' cards */
.process__intro { max-width: calc(900 * var(--u)); margin: 0 auto calc(150 * var(--u)); text-align: center; }
.process__lead {
  max-width: calc(720 * var(--u));
  margin: calc(30 * var(--u)) auto 0;
  font-size: max(16px, calc(22 * var(--u)));
  font-weight: 300;
  line-height: 1.7;
  color: rgba(238, 243, 244, .78);
  text-wrap: pretty;
}
.process__steps {
  display: grid;
  gap: calc(150 * var(--u));
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
/* RTL: the numeral is in the first column, on the right; each step steps in a little further along the diagonal */
.step { display: grid; grid-template-columns: calc(310 * var(--u)) minmax(0, calc(640 * var(--u))); align-items: start; column-gap: calc(50 * var(--u)); margin-inline-start: calc(var(--i, 0) * 46 * var(--u)); }
.step:nth-child(2) { --i: 1; }
.step:nth-child(3) { --i: 2; }
.step:nth-child(4) { --i: 3; }
.step:nth-child(5) { --i: 4; }
.step__num { position: relative; justify-self: start; display: block; width: max-content; }
.step__digits {
  display: block;
  direction: ltr;
  font: 200 calc(190 * var(--u)) / .9 var(--font-display);
  letter-spacing: -.02em;
  color: var(--text);
}
/* the slash: a hairline leaning away from the numeral, toward the words */
.step__slash {
  position: absolute;
  left: calc(-22 * var(--u));
  bottom: calc(-46 * var(--u));
  width: 1px;
  height: calc(250 * var(--u));
  background: linear-gradient(to top, transparent, rgba(238, 243, 244, .38) 25%, rgba(238, 243, 244, .38) 70%, transparent);
  rotate: -28deg;
  transform-origin: 50% 100%;
}
.step__body { max-width: calc(640 * var(--u)); padding-top: calc(72 * var(--u)); }
.step__title { margin: 0; font: 400 max(22px, calc(44 * var(--u))) / 1.2 var(--font-display); }
.step__text {
  margin: calc(22 * var(--u)) 0 0;
  font-size: max(16px, calc(21 * var(--u)));
  font-weight: 300;
  line-height: 1.75;
  color: rgba(238, 243, 244, .74);
  text-wrap: pretty;
}
@media (max-width: 767px) {
  .process { padding: 96px 20px 110px; }
  .process__intro { margin-bottom: 72px; }
  .process__lead { font-size: 16px; }
  .process__steps { gap: 64px; }
  /* the numeral above, the words below it at full width */
  .step { grid-template-columns: 1fr; margin-inline-start: 0; }
  .step__digits { font-size: 64px; }
  .step__slash { left: -18px; bottom: -10px; height: 80px; }
  .step__body { padding-top: 18px; }
  .step__title { font-size: 22px; }
  .step__text { margin-top: 10px; font-size: 16px; line-height: 1.7; }
}

/* ---------- Black and blue: each section on black, with its own pool of blue light ----------
   every pool is centred well inside its section and fades out before the section's edges, so one section
   meets the next on black, with no seam */
/* the statements: a light rising from below the frame, as at the foot of a stage */
.moment { background: radial-gradient(ellipse 62% 40% at 50% 60%, rgba(38, 104, 200, .34), rgba(22, 64, 140, .12) 45%, transparent 72%); }
/* the projects: the cards stand in a low blue light */
.work { background: radial-gradient(ellipse 48% 36% at 50% 62%, rgba(40, 108, 204, .28), transparent 72%); }
/* the process: a cold light in the upper corner, by the circle */
.process { background: radial-gradient(ellipse 42% 22% at 70% 18%, rgba(58, 124, 206, .26), transparent 72%), radial-gradient(ellipse 36% 20% at 18% 74%, rgba(30, 86, 170, .16), transparent 72%); }
/* the story: behind the giant line, and later behind the pile of pages */
.story { background: radial-gradient(ellipse 55% 22% at 60% 14%, rgba(58, 124, 206, .26), transparent 72%), radial-gradient(ellipse 34% 18% at 26% 70%, rgba(40, 104, 196, .2), transparent 72%); }
/* about: a light beside the portrait */
.about { background: radial-gradient(ellipse 36% 34% at 24% 40%, rgba(44, 110, 204, .22), transparent 72%); }
/* the end of the page: the strongest blue, rising from the bottom */
.site-footer { background: radial-gradient(ellipse 70% 80% at 50% 100%, rgba(52, 120, 210, .38), rgba(30, 80, 160, .12) 45%, transparent 75%); }

/* ---------- Hairlines: open lines across a section, a cross where two meet ----------
   all in a cool, faint blue; every line fades out at its ends so nothing stops on a hard edge.
   Positions are set on each element: --y for a line across, --x / --y1 / --y2 for a line down */
.lines { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ln, .ln-x { position: absolute; display: block; }
.ln--h {
  left: 0; right: 0; top: var(--y); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(150, 190, 240, .2) 16%, rgba(150, 190, 240, .2) 84%, transparent);
  transform-origin: 100% 50%;          /* drawn from the right, as the page reads */
}
.ln--v {
  left: var(--x); top: var(--y1); height: calc(var(--y2) - var(--y1)); width: 1px;
  background: linear-gradient(transparent, rgba(150, 190, 240, .22) 18%, rgba(150, 190, 240, .22) 82%, transparent);
  transform-origin: 50% 0;
}
/* a small cross where two lines meet */
.ln-x { left: var(--x); top: var(--y); width: 13px; height: 13px; translate: -50% -50%; }
.ln-x::before, .ln-x::after { content: ""; position: absolute; background: rgba(214, 230, 255, .75); }
.ln-x::before { left: 6px; top: 0; width: 1px; height: 100%; }
.ln-x::after { top: 6px; left: 0; height: 1px; width: 100%; }
.moment { position: relative; }
.moment__stage { position: relative; z-index: 1; }

/* the circle behind the process heading: drawn on the right, fading away below */
.process__intro { position: relative; }
.halo {
  position: absolute;
  top: calc(-150 * var(--u));
  left: calc(50% - 40 * var(--u));
  width: calc(620 * var(--u));
  aspect-ratio: 1;
  border: 1px solid rgba(150, 190, 240, .16);
  border-radius: 50%;
  -webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent 72%);
  mask-image: linear-gradient(to bottom, #000 20%, transparent 72%);
  pointer-events: none;
  z-index: -1;
}

/* the closing call */
.site-footer__call { position: relative; display: flex; flex-direction: column; align-items: center; gap: max(32px, calc(64 * var(--u))); padding: calc(40 * var(--u)) 0; }   /* the heading, then straight to the button */
.site-footer__call > :not(.lines):not(.stars) { position: relative; z-index: 1; }
.lines--call { inset: 0 auto 0 calc(50% - 50vw); width: 100vw; }
.stars {
  position: absolute;
  inset: -30% -40%;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 22%, rgba(214, 230, 255, .55) 0 1px, transparent 1.6px),
    radial-gradient(circle at 21% 78%, rgba(214, 230, 255, .35) 0 1px, transparent 1.6px),
    radial-gradient(circle at 37% 8%, rgba(214, 230, 255, .45) 0 1px, transparent 1.6px),
    radial-gradient(circle at 64% 92%, rgba(214, 230, 255, .4) 0 1px, transparent 1.6px),
    radial-gradient(circle at 79% 14%, rgba(214, 230, 255, .5) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 93% 61%, rgba(214, 230, 255, .35) 0 1px, transparent 1.6px);
}
@media (max-width: 767px) {
  .site-footer__call { gap: 32px; padding: 24px 0; }
  .halo { width: 300px; top: -70px; left: calc(50% - 40px); }
  .stars { inset: -20% -6%; }
}

/* ---------- No opening film: the page starts on the notebook, the pen writing the headline ----------
   the film's frame (bars, narration, timecode, skip) and its chapter rails are not shown */
.no-film .film, .no-film .edge, .no-film .scene-card { display: none; }

/* ---------- The benefits, editorial: no notebook rules and no numbers; one large statement at a time,
   beside one large flat picture that is uncovered as its benefit comes into focus (site.js) ---------- */
.story__list { background-image: none; }
.benefit__num, .story__sign { display: none; }
.benefit__title { padding-top: 0; top: 0; font: 400 max(26px, calc(54 * var(--u))) / 1.14 var(--font-display); letter-spacing: -.005em; }
.benefit__desc { top: 0; max-width: calc(560 * var(--u)); margin-top: calc(26 * var(--u)); font-size: max(16px, calc(21 * var(--u))); line-height: 1.75; color: rgba(238, 243, 244, .74); }
.has-motion .benefit { opacity: .16; }
.has-motion .benefit.is-active { opacity: 1; }
/* the pictures: straight, flat and stacked exactly, like photographs in a magazine */
.story .paper-card { rotate: none; }
.story .paper { border-radius: 3px; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06); }
.paper__glare { display: none; }
@media (min-width: 768px) {
  /* a hairline down the side of the words, as elsewhere on the page; a point on it marks the benefit in focus */
  .story__list { padding-inline-start: calc(64 * var(--u)); }
  .story__list::before {
    right: 0;
    background: linear-gradient(transparent, rgba(150, 190, 240, .24) 12%, rgba(150, 190, 240, .24) 88%, transparent);
  }
  /* each benefit as tall as its words plus a pause: its heading stays clear of the fade at the top while it's in focus */
  .benefit { position: relative; min-height: 0; padding: 0 0 13vh; max-width: calc(680 * var(--u)); }
  .benefit::before {
    content: "";
    position: absolute;
    right: calc(-64 * var(--u) - 3.5px);
    top: calc(26 * var(--u));
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(214, 230, 255, .9);
    box-shadow: 0 0 0 5px rgba(150, 190, 240, .1);
    opacity: 0;
    transition: opacity .6s var(--ease-out);
  }
  .benefit.is-active::before { opacity: 1; }
  .story__stage.is-pinned .story__list { padding-top: 40vh; padding-bottom: 26vh; }
}
@media (max-width: 767px) {
  .benefit { border-top-color: rgba(150, 190, 240, .22); }
  .benefit__title { margin-bottom: 0; }
  .has-motion .benefit { opacity: 1; }   /* on a phone every benefit stays readable as it passes */
}

/* ---------- A foil-stamped seal beside the projects heading: hairline rings and wide-set words in a silver
   foil (an SVG gradient), the monogram at its centre ---------- */
.work { position: relative; }
.postmark {
  position: absolute;
  z-index: 1;
  top: calc(84 * var(--u));
  left: calc(6% + 155 * var(--u));
  width: calc(145 * var(--u));
  rotate: -6deg;
  pointer-events: none;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6));   /* pressed a hair into the page */
}
.postmark svg { display: block; width: 100%; height: auto; overflow: visible; }
.postmark__art { --foil: url(#pm-foil); }
.postmark__line { fill: none; stroke: url(#pm-foil); stroke-width: .8; }
.postmark__line--faint { stroke-width: .5; opacity: .6; }
.postmark__beads { fill: none; stroke: url(#pm-foil); stroke-width: 1.4; stroke-dasharray: .01 3.4; stroke-linecap: round; }
.postmark__gem { fill: url(#pm-foil); }
.postmark__text { fill: url(#pm-foil); font: 400 11.5px var(--font-body); letter-spacing: .32em; }
.postmark__mono { fill: url(#pm-foil); font: 44px "Mrs Saint Delafield", cursive; }
/* the passing light: the same shapes again, filled with a narrow highlight that crosses once */
.postmark__art--shine * { stroke: url(#pm-shine) !important; fill: url(#pm-shine); }
.postmark__art--shine .postmark__line, .postmark__art--shine .postmark__beads { fill: none; }
.postmark__art--shine text, .postmark__art--shine .postmark__gem { stroke: none !important; }
@media (max-width: 767px) {
  /* on a phone it takes its own place above the heading, on the left, so it covers no words */
  .postmark { position: relative; top: auto; left: auto; align-self: flex-end; width: 78px; margin: 0 0 6px 0; }
}

/* the round seal: printed straight onto the page in a pale blue ink, over the corner of the photo */
.seal {
  position: absolute;
  z-index: 2;
  top: calc(-58 * var(--u));
  left: calc(-128 * var(--u));
  width: calc(150 * var(--u));
  aspect-ratio: 1;
  rotate: -8deg;
  color: rgba(214, 230, 255, .62);
  pointer-events: none;
}
.seal svg { display: block; width: 100%; height: 100%; overflow: visible; }
.seal__ring { transform-origin: 100px 100px; }
.seal__line { fill: none; stroke: currentColor; stroke-width: 1.2; }
.seal__line--dots { stroke-width: 1.6; stroke-dasharray: .1 4.6; stroke-linecap: round; opacity: .8; }
.seal__text { fill: currentColor; font: 500 15px var(--font-body); letter-spacing: .08em; }
.seal__dot { fill: var(--accent); }
.seal__mark { fill: currentColor; font: 52px "Mrs Saint Delafield", cursive; }
@media (max-width: 767px) {
  .seal { width: 84px; top: -34px; left: -14px; }
}

/* the words of the prompt invite the writing; once the headline is written only the scroll line comes back */
.js-hero .hero.is-written .scroll-hint { opacity: 0; }

/* about: a few short paragraphs, set larger than body text and close, read as one statement */
.about__body { font-size: max(18px, calc(27 * var(--u))); line-height: 1.55; margin-top: calc(16 * var(--u)); color: rgba(238, 243, 244, .86); }
.about__top .display + .about__body { margin-top: calc(36 * var(--u)); }
@media (max-width: 767px) { .about__body { font-size: 18px; } }

/* ---------- What changes: a mosaic of words and real pages in two columns (site.js slides them past each
   other); one tile is the frame's full height, so each benefit fills the frame as a pair ---------- */
.benefits { grid-column: 1 / -1; }
.benefits__head .display { margin: 0; }
.benefits__frame { --tile: min(64vh, calc(620 * var(--u))); }
.tile { margin: 0; }
.tile--text { display: flex; flex-direction: column; justify-content: center; background: #0c1420; }
.tile__title { margin: 0; font: 400 max(24px, calc(44 * var(--u))) / 1.16 var(--font-display); letter-spacing: -.005em; color: var(--text); }
.tile__desc { margin: calc(22 * var(--u)) 0 0; font-size: max(16px, calc(19 * var(--u))); line-height: 1.75; color: rgba(238, 243, 244, .74); text-wrap: pretty; }
.tile--image { position: relative; overflow: hidden; background: #0c1420; }
.tile--image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; filter: saturate(.92) brightness(.95); }
/* a photo of a page in use: framed on the device, and left in its own light */
.tile--photo img { object-position: 50% 60%; filter: none; }
.tile__caption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  padding: calc(120 * var(--u)) calc(34 * var(--u)) calc(30 * var(--u));
  background: linear-gradient(to top, rgba(6, 9, 14, .97) 0, rgba(6, 9, 14, .9) 45%, rgba(6, 9, 14, 0));
}
.tile__quote { font: 400 max(18px, calc(28 * var(--u))) / 1.2 var(--font-display); color: #fff; }
.tile__who { font-size: max(12px, calc(14 * var(--u))); letter-spacing: .03em; color: rgba(238, 243, 244, .72); }

@media (min-width: 768px) {
  /* held on screen: the heading above, the frame below it showing exactly one pair */
  .benefits { height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 5vh; }
  .benefits__head { width: min(100%, calc(1180 * var(--u))); margin: 0 auto; }
  .benefits__frame {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: min(100%, calc(1180 * var(--u)));
    height: var(--tile);
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(150, 190, 240, .14), 0 60px 120px -50px rgba(0, 0, 0, .9);
  }
  /* the three benefits read down the page like a magazine feature, nothing held on screen: each pair on its
     own row, the picture and the words trading sides and sizes from one to the next (a wide print, a tall
     one, a smaller one set lower), the pictures drifting slowly inside their frames as the page moves */
  .benefits { position: relative; height: auto; display: block; padding-bottom: calc(80 * var(--u)); }
  .benefits__head { position: static; width: auto; max-width: calc(1180 * var(--u)); margin: 0 auto calc(120 * var(--u)); }
  .benefits__frame {
    position: static;
    width: min(100%, calc(1180 * var(--u)));
    height: auto;
    margin: 0 auto;
    box-shadow: none;
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: calc(28 * var(--u));
    row-gap: calc(190 * var(--u));
  }
  .benefits__col { display: contents; }
  .tile { height: auto; min-height: 0; }
  .tile--text { padding: 0; background: none; justify-content: center; }
  .tile--text .tile__title { font-size: max(26px, calc(46 * var(--u))); line-height: 1.12; }
  .tile--text .tile__desc { max-width: calc(440 * var(--u)); margin-top: calc(24 * var(--u)); }
  .tile--text[data-n]::before { content: none; }
  .tile--image { overflow: hidden; border-radius: 2px; }
  .tile--image img { height: 118%; margin-top: -9%; will-change: transform; filter: none; }
  /* 1 · words right, a wide print to the left */
  .tile[style*="--o: 0"] { grid-row: 1; grid-column: 1 / span 4; }
  .tile[style*="--o: 1"] { grid-row: 1; grid-column: 6 / span 7; aspect-ratio: 4 / 3; }
  /* 2 · a tall print on the right, the words beside it on the left */
  .tile[style*="--o: 3"] { grid-row: 2; grid-column: 2 / span 5; aspect-ratio: 4 / 5; }
  .tile[style*="--o: 2"] { grid-row: 2; grid-column: 8 / span 4; }
  /* 3 · words right again, a smaller print set lower to the left */
  .tile[style*="--o: 4"] { grid-row: 3; grid-column: 1 / span 4; }
  .tile[style*="--o: 5"] { grid-row: 3; grid-column: 7 / span 5; aspect-ratio: 4 / 5; margin-top: calc(120 * var(--u)); }
  .benefits__progress { display: none; }
  .story { padding-bottom: 0; }
}
@media (max-width: 767px) {
  /* one column: each benefit's words, then its page */
  .benefits__head { margin-bottom: 8px; }
  .benefits__frame { display: flex; flex-direction: column; }
  .benefits__col { display: contents; }
  .tile { order: var(--o); }
  .tile--text { background: none; padding: 34px 0 18px; }
  .tile--image { aspect-ratio: 4 / 3; max-height: 40vh; border-radius: 4px; box-shadow: 0 0 0 1px rgba(150, 190, 240, .14); }   /* a picture beside the words, not a screen of its own */
  .tile__title { font-size: 26px; }
  .tile__caption { padding: 90px 18px 18px; }
}

/* ---------- Phones: one type scale and one rhythm ----------
   body 16 · card titles 20 · step and project titles 20 · section headings 24–28 · statements 22–28,
   every heading balanced over its lines, and the line breaks set for a wide screen let go, so no line
   ends on a single word. Sections breathe the same 72px apart. */
@media (max-width: 767px) {
  h1, h2, h3, h4, .display, .moment__line { text-wrap: balance; }
  .moment__line br, .site-footer__lead br { display: none; }
  .display--md { font-size: 24px; line-height: 1.25; }
  .display--lg { font-size: 28px; line-height: 1.2; }
  .display--xl { font-size: 26px; line-height: 1.3; }
  .moment__line { font-size: 22px; line-height: 1.4; }
  .drift-title { font-size: 44px; }
  .work__name { font-size: 20px; }
  .step__title { font-size: 20px; line-height: 1.3; }
  .tile__title { font-size: 20px; line-height: 1.3; }
  .tile__desc { line-height: 1.7; }
  .about__body { font-size: 17px; line-height: 1.65; }
  .about { padding-top: 72px; padding-bottom: 72px; }
  .site-footer { padding-top: 72px; }
}

/* Phones with "reduce motion" on: the two statements are simply read one after the other, not held on a
   full screen each, so no screen-high gap opens around them */
@media (max-width: 767px) {
  html:not(.js-hero) .moment, .moment:not(.has-motion) { height: auto; padding-top: 96px; padding-bottom: 96px; }
  html:not(.js-hero) .work { margin-top: 0; }
}
/* without the motion the title isn't held on screen, so it needs no screen of room around it */
html:not(.js-hero) .story__intro { min-height: 0; }

/* ---------- Phones: grouping and alignment ----------
   proximity: the space between two benefits is clearly larger than the space inside one, so each reads as
   one group (its title, its words, its picture); a heading aligns with the text it introduces; a button
   stands a step away from the line above it; paragraphs are separated by most of a line */
@media (max-width: 767px) {
  .tile--text { padding: 56px 0 16px; }
  .tile--text:first-child, .tile[style*="--o: 0"] { padding-top: 20px; }
  /* the benefits start a new part: a clear break after the story's opening words, and their heading
     held close to the benefits it introduces */
  .benefits { margin-top: 56px; }
  .story__intro { min-height: 0; }   /* held centred by its pin; no screen of room needed around it */
  .story .story__guide { display: none; }   /* on a phone the title stands alone (a trial) */
  /* the hairlines down the page have no free margin to run in on a phone: they would cut through the words */
  .lines .ln--v, .lines .ln-x, .moment .lines { display: none; }
  .benefits__head { margin-bottom: 0; }
  .about__top .display { text-align: start; }
  .about__body { margin-top: 14px; }
  .about__top .display + .about__body { margin-top: 20px; }
  .work__link { margin-top: 22px; }
  .btn--accent, .btn--wide { font-size: 15px; }
  .site-header.is-solid { background: linear-gradient(to bottom, rgba(6, 9, 14, .96) 72%, rgba(6, 9, 14, 0)); }
}

/* Phones get the short version of the longer texts (each written twice in the page: .is-long / .is-short) */
.is-short { display: none; }
@media (max-width: 767px) {
  .is-long { display: none; }
  .is-short { display: block; }
}

/* Phones: each benefit gets its number, set like the process steps' numerals but smaller, so the three
   read as a sequence of separate points */
@media (max-width: 767px) {
  .tile--text[data-n]::before {
    content: attr(data-n);
    display: block;
    margin-bottom: 10px;
    direction: ltr;
    text-align: right;
    font: 200 44px / 1 var(--font-display);
    letter-spacing: -.02em;
    color: rgba(238, 243, 244, .5);
  }
}

/* ---------- Phones, editorial pass ----------
   one alignment line down the page (the right edge, as Hebrew reads), headings set large and tight, a small
   label opening each part, pictures running to the screen's edges. The opening and the closing call stay
   centred: they are the two moments that stand alone */
@media (max-width: 767px) {
  [data-label]::before {
    content: attr(data-label);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font: 400 12px / 1 var(--font-body);
    letter-spacing: .22em;
    color: rgba(150, 190, 240, .75);
  }
  [data-label]::before { align-self: flex-start; }
  .site-footer__call[data-label]::before { align-self: center; justify-content: center; margin-bottom: 0; }

  .display--lg { font-size: 40px; line-height: 1.06; letter-spacing: -.01em; }
  .display--md { font-size: 32px; line-height: 1.1; letter-spacing: -.01em; }
  .work .display, .process__intro, .process__intro .display, .about__top .display { text-align: start; }
  .work__intro, .work__project { align-self: stretch; align-items: flex-start; text-align: start; }
  .work__intro .display { margin: 0; }
  .work__project { margin-top: 36px; }
  .process__lead { margin-inline: 0; }

  .moment__line { font-size: 27px; line-height: 1.28; letter-spacing: -.005em; }
  .about__big { font-size: 27px; line-height: 1.25; }
  .tile__title { font-size: 24px; line-height: 1.2; }
  .step__title { font-size: 22px; line-height: 1.25; }

  /* the benefit pictures run edge to edge, as photographs in a magazine */
  .tile--image { margin-inline: 0; border-radius: 3px; box-shadow: none; max-height: none; aspect-ratio: 16 / 10; }   /* within the text's margins, a wide frame: a picture beside the words, not a screen of its own */
}

/* ---------- Clients, in their own words ----------
   large quotes down the page, each a step further in than the last, its name under a hairline */
.voices { position: relative; padding: calc(170 * var(--u)) var(--gutter) calc(60 * var(--u)); }
.voices__head { max-width: calc(1180 * var(--u)); margin: 0 auto calc(110 * var(--u)); }
.voices__head .display { margin: 0; }
.voices__list { display: flex; flex-direction: column; gap: calc(110 * var(--u)); max-width: calc(1180 * var(--u)); margin: 0 auto; }
.voice { margin: 0; max-width: calc(940 * var(--u)); }
.voice:nth-child(2) { margin-inline-start: calc(160 * var(--u)); }
.voice:nth-child(3) { margin-inline-start: calc(60 * var(--u)); }
.voice:nth-child(4) { margin-inline-start: calc(220 * var(--u)); }
.voice__quote { margin: 0; font: 300 max(24px, calc(54 * var(--u))) / 1.25 var(--font-display); letter-spacing: -.005em; color: var(--text); text-wrap: balance; }
.voice__who { display: flex; align-items: center; gap: 14px; margin-top: calc(28 * var(--u)); font-size: max(14px, calc(17 * var(--u))); letter-spacing: .06em; color: rgba(238, 243, 244, .62); }
.voice__who::before { content: ""; width: calc(56 * var(--u)); min-width: 28px; height: 1px; background: rgba(150, 190, 240, .45); }
@media (max-width: 767px) {
  .voices { padding: 88px 20px 24px; }
  .voices__head { margin-bottom: 40px; }
  .voices__list { gap: 48px; }
  .voice, .voice:nth-child(n) { margin-inline-start: 0; max-width: none; }
  .voice__quote { font-size: 23px; line-height: 1.35; }
  .voice__who { margin-top: 16px; font-size: 14px; }
}

/* ---------- Phones: the opening line ----------
   the site's one idea, set as large as the screen allows, right-aligned and tight, above the handwriting;
   it says what the subtitle said, so the subtitle steps aside, and the story further down no longer
   repeats it */
.hero__big { display: none; }
@media (max-width: 767px) {
  .hero__big {
    display: block;
    align-self: stretch;
    margin: 0 0 40px;
    padding-inline: 20px;
    text-align: start;
    font: 400 52px / .98 var(--font-display);
    letter-spacing: -.02em;
    color: var(--text);
  }
  .story__intro { display: none; }
  .benefits { margin-top: 0; }
  /* no pen on a phone: the opening line and the words under it, in the site's one typeface; the written
     headline stays in the page for search and screen readers only */
  .hero .headline { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hero .hl-svg, .hero .pen-photo, .hero .scroll-hint { display: none; }
  .hero__big { margin-bottom: 28px; }
  .hero__sub { margin-top: 0; align-self: stretch; padding-inline: 20px; text-align: start; font-size: 17px; line-height: 1.6; color: rgba(238, 243, 244, .78); }
  .hero__sub br { display: none; }
}

/* Section labels on larger screens too: the same small word opening each part */
@media (min-width: 768px) {
  [data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: calc(26 * var(--u));
    font: 400 max(12px, calc(15 * var(--u))) / 1 var(--font-body);
    letter-spacing: .24em;
    color: rgba(150, 190, 240, .75);
  }
}

/* Phones: the opening line in the site's hand (the same hand the pen writes on a larger screen), white,
   written in from the right as the page opens */
@media (max-width: 767px) {
  .hero__big {
    font: 400 10.4vw / 1.32 "Eliana", cursive;   /* room for the long tails of ן and ך */
    letter-spacing: 0;
    clip-path: inset(-10% -6% -10% -6%);
    animation: hand-in 1.9s cubic-bezier(.45, 0, .2, 1) .3s both;
  }
  @keyframes hand-in { from { clip-path: inset(-10% -6% -10% 106%); } }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { .hero__big { animation: none; } }

/* ---------- The room's light: two soft pools of blue drifting very slowly behind the page (kept small and
   few so they cost almost nothing to draw; still on phones) ---------- */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.ambient i {
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 112, 210, .14), transparent 66%);
}
.ambient i:nth-child(1) { top: -14vmax; left: -10vmax; animation: drift-a 40s ease-in-out infinite alternate; }
.ambient i:nth-child(2) { bottom: -16vmax; right: -12vmax; animation: drift-b 48s ease-in-out infinite alternate; }
.ambient i:nth-child(3) { display: none; }
@keyframes drift-a { to { transform: translate3d(30vw, 26vh, 0); } }
@keyframes drift-b { to { transform: translate3d(-28vw, -30vh, 0); } }
@media (max-width: 767px), (prefers-reduced-motion: reduce) { .ambient i { animation: none; } }

/* ---------- The pages on a tilted table ----------
   real pages laid on a plane tipped away from you, three rows sliding past each other with the scroll,
   fading out at the top and bottom of the band */
.wall {
  position: relative;
  height: 105vh;
  overflow: hidden;
  perspective: 1700px;
}
.wall::before, .wall::after { content: ""; position: absolute; left: 0; right: 0; height: 24%; z-index: 1; pointer-events: none; }
.wall::before { top: 0; background: linear-gradient(#06090e, transparent); }
.wall::after { bottom: 0; background: linear-gradient(transparent, #06090e); }
.wall__plane {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 2.2vw;
  transform: translate(-50%, -50%) rotateX(50deg) rotateZ(-16deg);
  transform-style: preserve-3d;
}
.wall__row { display: flex; gap: 2.2vw; will-change: transform; }
.wall__row img {
  display: block;
  width: 30vw;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 0;
  border-radius: .5vw;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(150, 190, 240, .1);
  filter: brightness(.82) saturate(.9);
}
@media (max-width: 767px) {
  .wall { height: 62vh; perspective: 900px; }
  .wall__plane, .wall__row { gap: 14px; }
  .wall__row img { width: 64vw; border-radius: 6px; }
}

/* the statements' sky: a few faint stars kept to the edges of the screen, away from the words, two sets
   fading in and out of step so the sky seems to breathe */
.stars--moment {
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 7% 18%, rgba(214, 230, 255, .6) 0 1px, transparent 1.6px),
    radial-gradient(circle at 14% 71%, rgba(214, 230, 255, .4) 0 1px, transparent 1.6px),
    radial-gradient(circle at 29% 9%, rgba(214, 230, 255, .45) 0 1px, transparent 1.6px),
    radial-gradient(circle at 71% 88%, rgba(214, 230, 255, .4) 0 1px, transparent 1.6px),
    radial-gradient(circle at 86% 12%, rgba(214, 230, 255, .55) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 94% 64%, rgba(214, 230, 255, .35) 0 1px, transparent 1.6px);
  animation: sky 7s ease-in-out infinite alternate;
}
.stars--late {
  background:
    radial-gradient(circle at 4% 46%, rgba(214, 230, 255, .45) 0 1px, transparent 1.6px),
    radial-gradient(circle at 22% 90%, rgba(214, 230, 255, .35) 0 1px, transparent 1.6px),
    radial-gradient(circle at 58% 6%, rgba(214, 230, 255, .4) 0 1px, transparent 1.6px),
    radial-gradient(circle at 79% 36%, rgba(214, 230, 255, .3) 0 1px, transparent 1.6px),
    radial-gradient(circle at 97% 84%, rgba(214, 230, 255, .5) 0 1.2px, transparent 1.8px);
  animation-delay: -3.5s;
}
@keyframes sky { from { opacity: .25; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .stars--moment { animation: none; } }

/* ---------- The benefits as a page of their own ----------
   an ivory ground breaks the dark run of the page like a printed insert; on it the words are ink, and one
   word, "יתרונות", runs across the full width, light and tight */
.benefits { position: relative; isolation: isolate; --ink-text: #15181d; }
.benefits::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background: #ece6dc;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
}
.benefits .display, .benefits .tile__title { color: var(--ink-text); }
.benefits .tile__desc { color: rgba(21, 24, 29, .72); }
.benefits .tile--text[data-n]::before { color: rgba(21, 24, 29, .38); }
.benefits .tile--image { box-shadow: 0 30px 60px -34px rgba(21, 24, 29, .45); }
.benefits__big {
  margin: 0;
  padding-top: calc(150 * var(--u));
  text-align: center;
  white-space: nowrap;
  font: 300 21vw / .82 var(--font-display);
  letter-spacing: -.03em;
  color: var(--ink-text);
  overflow: hidden;
}
.benefits__big .char { display: inline-block; will-change: transform; }
@media (min-width: 768px) {
  .benefits { padding-top: 0; padding-bottom: calc(180 * var(--u)); }
  .benefits__head { margin-top: calc(70 * var(--u)); text-align: center; max-width: none; }
  .benefits__head .display { margin: 0 auto; }
}
@media (max-width: 767px) {
  .benefits { margin-top: 64px; padding: 0 0 72px; }
  .benefits__big { padding-top: 72px; font-size: 23vw; }
  .benefits__head { margin-top: 24px; }
  .benefits .tile--image { box-shadow: none; }
}

/* ---------- One world: a story being written ----------
   The page keeps to the desk, the pen and the paper: no cinema bars, scene titles, timecode or stars.
   The skip and sound controls stay where they were. */
.film__bar { background: none; box-shadow: none; }
.film__scene, .film__rec, .film__time, .film__sep, .scene-card, .stars { display: none !important; }

/* The light as the plot: the room starts dark under one lamp, and as the story is told a soft paper light
   rises from below and the cold blue gives way to it (--dawn, 0 to 1 down the page, site.js) */
.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 95% 62% at 50% 112%, rgba(238, 226, 204, .15), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255, 246, 228, .06), transparent 70%);
  opacity: var(--dawn, 0);
}
.ambient i { opacity: calc(1 - var(--dawn, 0) * .5); }

/* Two voices: the hand is theirs, the type is mine. Clients' words are set in the same hand the pen writes */
.voice__quote { font: max(19px, calc(36 * var(--u))) / 1.45 "Eliana", cursive; letter-spacing: 0; }   /* under its heading (42u) */
@media (max-width: 767px) { .voice__quote { font-size: 25px; } }   /* the heading is 32px here */

/* the pages on the table fade into whatever light the room has reached, instead of into a fixed colour band */
.wall::before, .wall::after { display: none; }
.wall {
  -webkit-mask: linear-gradient(transparent, #000 24%, #000 76%, transparent);
          mask: linear-gradient(transparent, #000 24%, #000 76%, transparent);
}

/* the ivory insert reads as a sheet laid on the dark desk: its paper darkens a touch toward its top and
   bottom edges, so the change to the dark page is the edge of a page, not a cut */
.benefits::before {
  background-image:
    linear-gradient(to bottom, rgba(60, 48, 30, .10), rgba(60, 48, 30, 0) 90px, rgba(60, 48, 30, 0) calc(100% - 140px), rgba(60, 48, 30, .14)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  box-shadow: 0 0 0 1px rgba(236, 230, 220, .08);
}

/* Phones: the projects lead straight into the pages on the table, without an empty screen between */
@media (max-width: 767px) {
  .work { padding-bottom: 16px; }
  .wall {
    height: 54vh;
    -webkit-mask: linear-gradient(transparent, #000 12%, #000 82%, transparent);
            mask: linear-gradient(transparent, #000 12%, #000 82%, transparent);
  }
}

/* The projects come straight after the opening, which is no longer held on screen: they start below it
   with a full breath of space, not pulled up into it */
@media (min-width: 768px) {
  .js-hero .work, .work { margin-top: 0; padding-top: max(120px, calc(220 * var(--u))); }
}

/* ---------- Pacing ----------
   no empty screen before the story's giant line: it comes in as the statements leave */
@media (min-width: 768px) {
  .story__intro { min-height: 0; }
}

/* ---------- The ending is the climax ----------
   the call is the largest line after the opening, on a screen of its own with room around it, and its
   button is the clear next step */
.site-footer__call .display { font-size: calc(104 * var(--u)); line-height: 1.05; letter-spacing: -.015em; }
.site-footer__call .btn { font-size: max(16px, calc(20 * var(--u))); height: max(52px, calc(72 * var(--u))); padding-inline: max(32px, calc(60 * var(--u))); }
@media (min-width: 768px) {
  .site-footer__call { min-height: 86vh; justify-content: center; }
}
@media (max-width: 767px) {
  .site-footer__call .display { font-size: 44px; }
  .site-footer__call { min-height: 70vh; justify-content: center; }
}
/* the call, tightened: its label sits close above it, the button a clear step below, and the screen
   around them is generous without leaving an empty band under the button */
@media (min-width: 768px) {
  .site-footer__call { min-height: 0; gap: max(20px, calc(36 * var(--u))); padding: calc(150 * var(--u)) 0 calc(170 * var(--u)); }
  .site-footer__call[data-label]::before { margin-bottom: 0; }
  .site-footer__call .btn { margin-top: calc(28 * var(--u)); }
}

/* ---------- Phones: one vertical rhythm ----------
   every part opens and closes with the same breath (96px), so the page reads as chapters, not a run-on;
   the pages on the table sit between the projects and the statements with room on both sides */
@media (max-width: 767px) {
  .work { padding-top: 96px; padding-bottom: 56px; }
  .wall {
    height: 50vh;
    -webkit-mask: linear-gradient(transparent, #000 18%, #000 66%, transparent 92%);
            mask: linear-gradient(transparent, #000 18%, #000 66%, transparent 92%);
  }
  html .moment.has-motion { height: 100svh; min-height: 0; padding: 0 var(--gutter); }   /* held full screen, the words in its middle */
  .benefits { margin-top: 96px; }
  .process { padding-top: 96px; padding-bottom: 96px; }
  .voices { padding-top: 96px; padding-bottom: 96px; }
  .voices__list { gap: 56px; }
  .about { padding-top: 96px; padding-bottom: 96px; }
}