/* ============================================================
   BRAND FONTS
   Effra (sans) + Martina Plantijn (serif), the pairing used on
   kastner-los-angeles.agency. local() is listed first: anyone
   who already has the fonts installed uses them without loading
   the files below.
   ============================================================ */
@font-face{
  font-family: 'Effra';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: local('Effra Light'), url('fonts/Effra-Light.woff2') format('woff2');
}
@font-face{
  font-family: 'Effra';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: local('Effra Regular'), local('Effra'), url('fonts/Effra-Regular.woff2') format('woff2');
}
@font-face{
  font-family: 'Martina Plantijn';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: local('Martina Plantijn Light'), url('fonts/MartinaPlantijn-Light.woff2') format('woff2');
}
@font-face{
  font-family: 'Martina Plantijn';
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  src: local('Martina Plantijn Light Italic'), url('fonts/MartinaPlantijn-LightItalic.woff2') format('woff2');
}
@font-face{
  font-family: 'Martina Plantijn';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: local('Martina Plantijn Medium'), url('fonts/MartinaPlantijn-Bold.woff2') format('woff2');
}
@font-face{
  font-family: 'Martina Plantijn';
  font-weight: 600;
  font-style: italic;
  font-display: swap;
  src: local('Martina Plantijn Medium Italic'), url('fonts/MartinaPlantijn-BoldItalic.woff2') format('woff2');
}


/* ============================================================
   TOKENS — Kastner Los Angeles
   Taken from kastner.agency. Coaqua's own colours live only inside
   its artwork (film, animation, polaroids), never in the page chrome.
   ============================================================ */
:root{
  --navy:#001836;
  --navy-deep:#00122b;
  --blue:#003b70;
  --mist:#9395ab;
  --paper:#e9eaee;
  --pink:#f30070;
  --talk:var(--pink); /* color único de todos los "Let’s talk" */
  --white:#fff;

  --sans:'Effra',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Martina Plantijn',Georgia,'Times New Roman',serif;

  --gutter:clamp(20px,6vw,96px);
  --section:clamp(96px,13vw,184px);
  --measure:1080px;
  --bar:clamp(52px,8vh,72px);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-draw:cubic-bezier(.65,0,.35,1);
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--navy)}
body{
  margin:0;
  background:var(--navy);
  color:var(--white);
  font-family:var(--sans);
  font-weight:300;
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
body.is-sealed{overflow:hidden}
.env-fallback body.is-sealed{overflow:visible}
img,video,canvas,svg{display:block;max-width:100%}
h1,h2,p,figure,ul{margin:0}
ul{padding:0;list-style:none}
em{font-style:italic}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

::selection{background:var(--pink);color:var(--white)}
:focus-visible{outline:1px solid var(--pink);outline-offset:5px;border-radius:3px}
html{scrollbar-color:var(--blue) var(--navy-deep)}

.skip{
  position:fixed;left:var(--gutter);top:12px;z-index:100;
  padding:9px 16px;border-radius:999px;
  background:var(--white);color:var(--navy);
  font-size:.8125rem;text-decoration:none;
  transform:translateY(-200%);
}
.skip:focus{transform:none}

/* shared display voice: Martina Plantijn Light, set fine */

/* ============================================================
   ACCENTS — pink italic, nothing drawn around them
   ============================================================ */
.ink{white-space:nowrap}
.ink--pink{color:var(--pink);font-style:italic}
.hello__body .ink--pink{margin-left:.08em}   /* an italic word after upright text reads tight: a touch more room before it */

/* ============================================================
   THE ENVELOPE (intro gate)
   Scroll or click anywhere: the letter opens in a circle that grows
   from the pointer.
   ============================================================ */
.envelope{display:none}
.js .envelope{
  position:fixed;inset:0;z-index:60;
  display:grid;place-items:center;
  padding:var(--gutter);
  background:var(--paper);
  color:var(--navy);
  text-align:center;
  cursor:pointer;
  outline:none;
}
.js.env-done .envelope,.js.env-fallback .envelope{display:none}
.envelope__inner{display:grid;gap:clamp(12px,1.4vw,18px);transform:translateY(-3vh)}
.envelope__hey{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.5rem,5.6vw,4.5rem);
  line-height:1;letter-spacing:-.02em;
}
.envelope__hey strong{font-weight:600;color:var(--pink)}
.envelope__hello{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(1.275rem,1.8vw,1.575rem);
  color:var(--blue);
}
/* MeKoko: one drawing in parts (legs, arms, body), so he can dodge the
   pointer. The pupils are clipped to the eye shapes, so they never leave
   them, and limbs tucked "behind" the body are clipped by its outline. */
.mekoko{
  position:relative;justify-self:center;
  width:min(clamp(150px,40vw,210px),24vh);aspect-ratio:434/530;
  margin-top:clamp(28px,6vh,72px);
}
.mekoko__art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mk-l{fill:none;stroke:#26346f;stroke-linecap:round;stroke-linejoin:round}
.mk-l--b{stroke:#25356f}
.mk-f{fill:#26346f}
.mk-f--b{fill:#25356f}
.mk-fill,.mk-arm{fill:var(--paper)}   /* the body is solid: limbs pass behind it, invisibly */
.mekoko__pupil{fill:#25326f}
.envelope__hint{
  position:absolute;left:0;right:0;bottom:clamp(28px,7vh,72px);
  display:flex;flex-direction:column;align-items:center;gap:14px;
  font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);
}
.envelope__hint span{width:1px;height:36px;background:currentColor;transform-origin:top;animation:drip 2s var(--ease-out) infinite}
/* phones: no hint on the cover, a swipe or tap opens it */
@media (pointer:coarse),(max-width:900px){.envelope__hint{display:none}}
/* a few bubbles rise from every click or tap (script.js) */
.bubble{
  position:fixed;left:0;top:0;z-index:70;pointer-events:none;
  border:2px solid #fff;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#fff 0 14%,transparent 16%);
  mix-blend-mode:difference;   /* inverts what's behind: light on the navy, dark on the light pages */
  will-change:transform,opacity;
}
.iris{
  position:fixed;z-index:61;pointer-events:none;
  border:1px solid var(--pink);border-radius:50%;
}

/* Mini bar: appears once the first page has scrolled away */
.bar{
  position:fixed;left:0;right:0;top:0;z-index:50;
  height:var(--bar);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gutter);
  background:var(--navy);
  border-bottom:1px solid rgba(233,234,238,.08);
}
.is-sealed .bar{display:none}
.bar__logo{
  display:block;height:44%;aspect-ratio:216/64.05;background:var(--white);
  -webkit-mask:url("images/kastner-LA.svg") no-repeat center/contain;
          mask:url("images/kastner-LA.svg") no-repeat center/contain;
}
.bar__talk{
  font-family:var(--serif);font-weight:300;font-size:clamp(.9375rem,1.1vw,1.0625rem);
  text-decoration:none;padding:6px 0;
  background:linear-gradient(var(--pink),var(--pink)) left 100%/0 1px no-repeat;
  transition:background-size .5s var(--ease-out);
}
.bar__talk,.bar__talk em{color:var(--white)}
.bar__talk:hover{background-size:100% 1px}

/* ============================================================
   HELLO
   ============================================================ */
.hello{
  min-height:100svh;
  display:grid;align-items:center;
  padding:var(--section) var(--gutter);
}
.hello__inner{max-width:var(--measure);margin:0 auto;width:100%}
.hello__lead{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.125rem,4.4vw,3.75rem);
  line-height:1.08;letter-spacing:-.02em;
  max-width:14ch;
}
.hello__body{
  margin-top:clamp(22px,2.6vw,36px);
  margin-left:clamp(0px,22vw,300px);
  max-width:30ch;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.1875rem,1.8vw,1.5625rem);
  line-height:1.38;
  color:var(--paper);
  text-wrap:pretty;
}

/* ============================================================
   FILM
   ============================================================ */
.film{padding:calc(var(--section) * .4) var(--gutter) calc(var(--section) * .6)}
.film__frame{
  position:relative;max-width:1080px;margin:0 auto;
  aspect-ratio:16/9;border-radius:12px;overflow:hidden;
  background:var(--navy-deep);
  box-shadow:0 30px 70px -36px rgba(0,0,0,.7);
}
.film__frame video{width:100%;height:100%;object-fit:cover}
.sound{
  position:absolute;right:clamp(10px,1.4vw,18px);bottom:clamp(10px,1.4vw,18px);
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px 8px 11px;border-radius:999px;
  background:rgba(0,24,54,.78);color:var(--white);
  font-size:.75rem;letter-spacing:.08em;
  transition:background-color .3s ease;
}
.sound:hover{background:var(--navy)}
.sound img{width:15px;height:15px}
.sound__on{display:none}
.sound.is-on .sound__off{display:none}
.sound.is-on .sound__on{display:block}

/* ============================================================
   CREDO
   ============================================================ */
.credo{
  max-width:var(--measure);margin:0 auto;
  padding:calc(var(--section) * .6) var(--gutter) var(--section);
}
.credo__line{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.875rem,3.6vw,3.125rem);
  line-height:1.2;letter-spacing:-.015em;
  max-width:19ch;
  text-wrap:balance;
}
.credo__note{
  margin-top:clamp(36px,5vw,72px);
  margin-left:auto;
  max-width:38ch;
  font-size:clamp(.9375rem,1.1vw,1.0625rem);
  line-height:1.7;
  color:var(--paper);
}

/* ============================================================
   REEL — scroll-scrubbed animation on its own lime stage
   (the frames' own colour, so the artwork has no edges)
   ============================================================ */
.reel{position:relative;background:#e2e829;height:320vh}
.reel__stage{
  position:sticky;top:0;height:100vh;height:100svh;
  overflow:hidden;background:#e2e829;
}
.reel__canvas{position:absolute;inset:0;width:100%;height:100%}
.reel__still{position:absolute;left:0;top:50%;width:100%;transform:translateY(-50%)}
.reel__cue{
  position:absolute;left:0;right:0;bottom:clamp(20px,5vh,48px);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;color:#071d49;
  transition:opacity .5s ease;
}
.reel__cue span{width:1px;height:28px;background:currentColor;transform-origin:top;animation:drip 2s var(--ease-out) infinite}
.reel.is-moving .reel__cue{opacity:0}
@keyframes drip{0%{transform:scaleY(0)}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* ============================================================
   MADE BY HAND
   ============================================================ */
.hand{
  max-width:1400px;margin:0 auto;
  padding:var(--section) var(--gutter);
  display:grid;gap:clamp(32px,5vw,72px);
  grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  align-items:center;
}
.hand__title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.75rem,2.9vw,2.625rem);
  line-height:1.12;letter-spacing:-.015em;
}
.hand__title em{color:var(--pink)}
.hand__body{
  margin-top:clamp(16px,1.8vw,24px);max-width:34ch;
  font-size:clamp(.9375rem,1.1vw,1.0625rem);line-height:1.7;color:var(--paper);
}
.hand__frame{
  aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--navy-deep);
  box-shadow:0 30px 70px -36px rgba(0,0,0,.7);
  rotate:1.4deg;
}
.hand__frame video{width:100%;height:100%;object-fit:cover}
/* two frames stacked, tilted opposite ways, never covering each other:
   the drawing, then the can from wireframe to render */
.hand__stack{
  display:grid;gap:clamp(10px,1.6vh,18px);
  width:min(100%,calc((100svh - var(--bar) - 18vh) * 16 / 18));
  justify-self:center;
}
.hand__stack .hand__frame{rotate:1.8deg}
.hand__stack .hand__frame--can{rotate:-1.8deg}

/* ============================================================
   THE REEL — Kastner Los Angeles
   ============================================================ */
.showreel{max-width:1280px;margin:0 auto;padding:var(--section) var(--gutter) calc(var(--section) * .7)}
.showreel__title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.75rem,2.9vw,2.625rem);line-height:1.12;letter-spacing:-.015em;
  margin-bottom:clamp(28px,3.6vw,52px);
}
.showreel__title em{color:var(--pink)}
.showreel__frame{
  position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--navy-deep);
  box-shadow:0 30px 70px -36px rgba(0,0,0,.7);
}
.showreel__frame video{width:100%;height:100%;object-fit:cover}

/* ============================================================
   WHERE WE ARE — Los Angeles first, the network behind it
   ============================================================ */
.offices{padding:calc(var(--section) * .5) 0 var(--section);overflow:hidden}
.offices__home{
  max-width:1180px;margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,5vw,80px);align-items:center;
}
.postcard{position:relative;margin:0}
.postcard img{width:100%;height:auto;border-radius:3px}
.postcard--home{rotate:-1.6deg;filter:drop-shadow(0 26px 34px rgba(0,6,18,.55))}
.offices__title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.875rem,3.2vw,2.875rem);line-height:1.08;letter-spacing:-.015em;
}
.offices__title em{color:var(--pink);white-space:nowrap}
.offices__address{margin-top:clamp(18px,2vw,26px);font-family:var(--serif);font-weight:300;font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.45}
.offices__address a{text-decoration:none;background:linear-gradient(var(--pink),var(--pink)) left 100%/0 1px no-repeat;transition:background-size .5s var(--ease-out)}
.offices__address a:hover{background-size:100% 1px}
.offices__body{margin-top:14px;max-width:30ch;font-size:clamp(.9375rem,1.1vw,1.0625rem);line-height:1.7;color:var(--paper)}

.network{margin-top:clamp(88px,11vw,160px)}
.network__title{
  max-width:1180px;margin:0 auto;padding:0 var(--gutter);
  font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.125rem,1.5vw,1.375rem);color:var(--paper);
}
.network__strip{
  margin-top:clamp(28px,3.4vw,44px);
  display:flex;gap:clamp(14px,1.6vw,24px);
  padding:24px var(--gutter) 40px;
  width:max-content;
  translate:calc(var(--drift,0) * -1px) 0;
}
.network__strip .postcard{
  flex:0 0 auto;width:clamp(200px,19vw,290px);
  rotate:var(--r);
  filter:drop-shadow(0 16px 20px rgba(0,6,18,.5));
  transition:rotate .5s var(--ease-out),translate .5s var(--ease-out);
}
.network__strip .postcard:hover{rotate:0deg;translate:0 -6px}
/* desktop: the cards swell under the pointer like the Dock (script.js sets scale, translate and rotate) */
.network__strip{position:relative}
.network__strip .postcard{transform-origin:50% 100%}
.network__strip.is-dock .postcard{transition:none;will-change:scale,translate}

/* ============================================================
   THE INVITATION — polaroids laid on the table one by one
   ============================================================ */
.invite{position:relative;height:420vh}
.invite__stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:grid;grid-template-rows:auto 1fr;
  padding:clamp(64px,11vh,120px) var(--gutter) clamp(24px,5vh,56px);
}
.invite__title{
  text-align:center;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.5rem,2.6vw,2.375rem);
  line-height:1.1;letter-spacing:-.015em;
}
.invite__title{font-style:italic}
.invite__title em{color:var(--pink);font-weight:600}
.table{position:relative}
.polaroid{
  --p:1;
  position:absolute;left:50%;top:50%;
  width:min(23vw,54vh);
  min-width:150px;
  container-type:inline-size;
  translate:calc(-50% + var(--x)) calc(-50% + var(--y) + (1 - var(--p)) * 110vh);
  rotate:calc(var(--r) + (1 - var(--p)) * 18deg);
  scale:calc(1 + (1 - var(--p)) * .16);
  filter:drop-shadow(0 calc(8px + (1 - var(--p)) * 36px) calc(16px + (1 - var(--p)) * 28px) rgba(0,8,22,.55));
  will-change:translate,rotate,scale;
}
.polaroid img{width:100%;height:auto}
.polaroid figcaption{
  position:absolute;left:0;right:0;bottom:0;height:10%;   /* the white strip under the photo: 90–100% of the card */
  display:grid;place-items:center;
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:6.2cqw;line-height:1;color:var(--navy);
  white-space:nowrap;
}

/* ============================================================
   THE ROOM — the real office behind polaroid four
   ============================================================ */
.room{padding:calc(var(--section) * .5) var(--gutter) var(--section);max-width:1280px;margin:0 auto}
.room__window{
  position:relative;aspect-ratio:21/9;border-radius:12px;overflow:hidden;background:var(--navy-deep);
  container-type:inline-size;
}
.room__photo{
  position:absolute;top:0;left:0;height:100%;width:auto;max-width:none;
  min-width:128%;object-fit:cover;
  translate:calc(var(--pan,0) * -1 * (100% - 100cqw)) 0;
}
.room__note{
  margin-top:clamp(18px,2vw,28px);
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.25rem,1.9vw,1.75rem);letter-spacing:-.01em;
  text-align:right;
}
.room__note{font-style:italic}
.room__note em{color:var(--pink);font-weight:600}

/* ============================================================
   BEYOND THE CAN — Kastner paper
   ============================================================ */
.beyond{
  background:var(--paper);color:var(--navy);
  padding:var(--section) var(--gutter);
}
.beyond__line{
  max-width:var(--measure);margin:0 auto;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.875rem,3.6vw,3.125rem);
  line-height:1.16;letter-spacing:-.015em;
  max-width:min(var(--measure),22ch);
  margin-left:max(0px,calc((100% - var(--measure)) / 2));
  text-wrap:balance;
}
.beyond__line em{color:var(--blue)}
.beyond__turn{
  max-width:var(--measure);margin:clamp(24px,3vw,44px) auto 0;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.1875rem,1.8vw,1.5625rem);
  line-height:1.3;
  padding-left:clamp(0px,22vw,300px);
}
.beyond__turn .ink{font-weight:300}

/* ============================================================
   LET'S TALK — after the Kastner footer
   ============================================================ */
.talk{position:relative;background:var(--navy);margin-top:-1px}
.talk__inner{
  min-height:min(100svh,880px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:clamp(96px,12vw,160px) var(--gutter) clamp(72px,9vw,128px);
}
.talk__logo{
  width:clamp(140px,13.5vw,196px);aspect-ratio:216/64.05;background:var(--white);
  -webkit-mask:url("images/kastner-LA.svg") no-repeat center/contain;
          mask:url("images/kastner-LA.svg") no-repeat center/contain;
}
.talk__title{
  margin-top:clamp(40px,5.4vw,72px);
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(2.5rem,4.4vw,3.75rem);line-height:1;letter-spacing:-.01em;
}
.talk__title,.talk__title em{color:var(--talk)}
.talk__open{position:relative;font:inherit;letter-spacing:inherit;cursor:pointer;padding:0 .08em .06em}
.talk__hint{
  margin-top:clamp(18px,2vw,26px);
  font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(233,234,238,.62);
}
.talk__social{margin-top:clamp(36px,4.4vw,60px);display:flex;gap:10px}
.talk__social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;transition:background-color .3s ease}
.talk__social a:hover{background:rgba(233,234,238,.08)}
.ico{width:21px;height:21px;background:var(--white)}
.ico--ig{-webkit-mask:url("images/icons/icon-instagram-white.svg") center/contain no-repeat;mask:url("images/icons/icon-instagram-white.svg") center/contain no-repeat}
.ico--in{-webkit-mask:url("images/icons/icon-linkedin-white.svg") center/contain no-repeat;mask:url("images/icons/icon-linkedin-white.svg") center/contain no-repeat}
.talk__meta{margin-top:18px;display:flex;flex-wrap:wrap;justify-content:center;row-gap:8px;font-size:.875rem;font-weight:400}
.talk__meta li + li::before{content:"";display:inline-block;width:1px;height:15px;margin:0 clamp(18px,2.6vw,38px);background:var(--white);vertical-align:-3px}
.talk__meta a{text-decoration:none;text-underline-offset:4px;text-decoration-thickness:1px}
.talk__meta a:hover{text-decoration:underline;text-decoration-color:var(--pink)}
.talk__sign{margin-top:clamp(24px,2.6vw,36px);font-family:var(--serif);font-style:italic;font-weight:300;font-size:.9375rem;color:var(--mist)}

/* ============================================================
   BOOK A CONVERSATION — dialog
   ============================================================ */
.book{
  width:min(560px,calc(100% - 32px));max-height:calc(100% - 32px);
  padding:0;border:0;border-radius:14px;
  background:var(--paper);color:var(--navy);
  box-shadow:0 40px 90px -30px rgba(0,6,18,.75);
}
.book::backdrop{background:rgba(0,12,28,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.book[open]{animation:book-in .5s var(--ease-out)}
.book[open]::backdrop{animation:fade-in .4s ease}
@keyframes book-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.book__card{position:relative;padding:clamp(28px,4vw,44px)}
.book__close{
  position:absolute;right:14px;top:14px;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;transition:background-color .3s ease;
}
.book__close:hover{background:rgba(0,24,54,.07)}
.book__close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.book__title{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(2rem,3.4vw,2.5rem);line-height:1;letter-spacing:-.01em;
}
.book__title,.book__title em{color:var(--talk)}
.book__lede{margin-top:12px;max-width:40ch;font-size:.9375rem;line-height:1.6;color:var(--blue)}
.book__options{margin-top:clamp(22px,3vw,32px);border-top:1px solid rgba(0,24,54,.14)}
.book__options li{border-bottom:1px solid rgba(0,24,54,.14)}
.book__option{
  position:relative;display:grid;grid-template-columns:1fr auto;column-gap:16px;row-gap:2px;
  padding:18px 4px;text-decoration:none;
}
a.book__option{transition:padding .4s var(--ease-out)}
a.book__option:hover{padding-left:12px}
.book__name{font-family:var(--serif);font-weight:300;font-size:1.3125rem;line-height:1.25}
.book__desc{grid-column:1;font-size:.875rem;color:var(--blue)}
.book__arrow{
  grid-column:2;grid-row:1 / span 2;align-self:center;width:20px;height:15px;
  fill:none;stroke:var(--pink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .4s var(--ease-out);
}
a.book__option:hover .book__arrow{transform:translateX(4px)}
.book__cals{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.book__cals a{
  display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;
  border:1px solid rgba(0,24,54,.22);font-size:.875rem;text-decoration:none;
  transition:border-color .3s ease,background-color .3s ease,color .3s ease;
}
.book__cals a:hover{border-color:var(--pink);background:var(--pink);color:var(--white)}
.book :focus-visible{outline-color:var(--pink)}

/* ============================================================
   PAGES — the letter reads like a presentation: every section is
   one full screen; scroll, swipe, keys or a click move a whole page.
   ============================================================ */
html{scroll-behavior:auto}
body{overscroll-behavior:none}
html:has(dialog[open]){overflow:hidden}   /* the page stays put behind the "Let’s talk" card */
.page{position:relative;box-sizing:border-box}
.page[data-mode="slide"]{height:100vh;height:100svh;overflow:hidden}
.page.is-tall{height:auto;min-height:100svh;overflow:visible}

.hello{min-height:0;padding:calc(var(--bar) + 4vh) var(--gutter) 6vh}
.hello__lead{font-weight:600;letter-spacing:-.025em}

.film{display:flex;flex-direction:column;justify-content:center;padding:calc(var(--bar) + 4vh) var(--gutter) 6vh}
.film__frame{width:min(100%,1080px,calc((100svh - var(--bar) - 10vh) * 16 / 9));margin:0 auto}

.credo{display:flex;flex-direction:column;justify-content:center;padding:calc(var(--bar) + 4vh) var(--gutter) 6vh}
.credo__note{margin-top:clamp(28px,5vh,64px)}

.hand{padding:calc(var(--bar) + 4vh) var(--gutter) 6vh;align-content:center}

.beyond{display:flex;flex-direction:column;justify-content:center;padding:calc(var(--bar) + 4vh) var(--gutter) 6vh}

.showreel{display:flex;flex-direction:column;justify-content:center;padding:calc(var(--bar) + 4vh) var(--gutter) 6vh;max-width:none}
.showreel__title{max-width:1280px;width:100%;margin:0 auto clamp(20px,3.4vh,44px)}
.showreel__frame{width:min(100%,1280px,calc((100svh - var(--bar) - 10vh - 5rem) * 16 / 9));margin:0 auto}

.offices{display:flex;flex-direction:column;justify-content:center;padding:calc(var(--bar) + 3vh) 0 4vh}
.postcard--home{width:min(100%,calc(46svh * 1181 / 738))}
.network{margin-top:clamp(28px,6vh,72px)}
.network__strip{margin-top:clamp(14px,2.4vh,28px);padding-top:14px;padding-bottom:20px}
.network__strip .postcard{width:min(clamp(170px,16vw,250px),calc(20svh * 1181 / 738))}

.room{display:flex;flex-direction:column;justify-content:center;padding:calc(var(--bar) + 4vh) var(--gutter) 6vh;max-width:none}
.room__window{width:min(100%,1280px,calc(62svh * 21 / 9));margin:0 auto}
.room__note{width:min(100%,1280px,calc(62svh * 21 / 9));margin:clamp(18px,3vh,32px) auto 0;font-size:clamp(1.75rem,3.2vw,3rem)}

.talk__inner{min-height:0;height:100%}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .offices__home{grid-template-columns:1fr}
  .hand{grid-template-columns:1fr}
  .hand__frame{rotate:.8deg}
  .room__window{aspect-ratio:4/3}
}
@media (max-width:720px),(orientation:portrait) and (max-width:1100px){
  .invite{height:460vh}
  .polaroid{width:min(60vw,46vh,340px)}
  .polaroid:nth-child(1){--x:-12% !important;--y:-14% !important}
  .polaroid:nth-child(2){--x:10% !important;--y:-6% !important}
  .polaroid:nth-child(3){--x:-8% !important;--y:3% !important}
  .polaroid:nth-child(4){--x:8% !important;--y:10% !important}
}
@media (max-width:720px){
  .hello__body,.beyond__turn{margin-left:0;padding-left:0}
  .film__frame{aspect-ratio:1/1}
  .credo__note{margin-left:0}
  .room__window{aspect-ratio:4/5}
  .room__note{text-align:left}
  .talk__meta{flex-direction:column;align-items:center}
  .talk__meta li + li::before{display:none}
  .talk__meta a{display:inline-block;max-width:28ch}
  .network__strip{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;translate:none;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .network__strip::-webkit-scrollbar{display:none}
  .network__strip .postcard{width:66vw;scroll-snap-align:center}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .envelope__hint span,.reel__cue span{animation:none}
  .polaroid{--p:1 !important}
  .invite{height:auto}
  .invite__stage{position:relative;height:auto;min-height:100svh}
  .table{min-height:70vh}
}

.beyond__text{display:block;max-width:34ch;text-wrap:pretty}

/* ============================================================
   DESIGN GUIDE — October 2026
   One look in every proportion: the copy hangs on the columns of an
   invisible grid of the screen (12 columns when wide, 8 when tall). Type is all Martina Plantijn, set larger; the
   header is always on.
   ============================================================ */
:root{
  --bar:clamp(56px,10svh,88px);

  --t-h1:min(3.75vw,6.6svh);      /* the big lines */
  --t-h2:min(3.3vw,5.8svh);       /* section titles */
  --t-h3:min(2.6vw,4.6svh);       /* titles over a video */
  --t-credo:min(4vw,7svh);
  --t-body:min(1.6vw,2.8svh);
  --t-small:min(1.2vw,2.1svh);
  --t-talk:clamp(1rem,min(1.5vw,2.6svh),1.375rem);
}
@media (orientation:portrait){
  :root{
    --t-h1:min(7.6vw,4.4svh);
    --t-h2:min(7.6vw,4.4svh);
    --t-h3:min(8.4vw,4.8svh);
    --t-credo:min(7.4vw,4.3svh);
    --t-body:min(3.9vw,2.3svh);
    --t-small:min(3.6vw,2.1svh);
    --t-talk:clamp(1rem,4.4vw,1.25rem);
  }
}

/* the header: always on, the envelope included */
.bar{transform:none;z-index:62}
.is-sealed .bar{display:flex}
.bar__logo{height:40%}
.bar__talk{font-size:var(--t-talk)}
.js .envelope{padding:var(--bar) var(--gutter) 0}
.envelope__inner{transform:none}

/* responsive line breaks: .br-h only when wide, .br-v only when tall */
.br-v{display:none}
@media (orientation:portrait){.br-h{display:none}.br-v{display:inline}}

/* every slide is centred on the screen below the header */
.hello,.beyond,.credo,.showreel,.film,.hand{
  display:grid;align-content:center;max-width:none;margin:0;
  padding:var(--bar) 0 0;
}

/* HELLO */
.hello__inner{max-width:none;margin:0;width:100%}
.hello__lead{
  margin-left:16.667%;max-width:none;
  font-weight:300;font-size:var(--t-h1);line-height:1.15;letter-spacing:-.01em;
  text-indent:-.42em;              /* the opening quote hangs in the margin */
}
.hello__body{
  margin:clamp(28px,9svh,120px) 0 0 41.667%;max-width:none;
  font-family:var(--serif);font-size:var(--t-body);line-height:1.35;color:var(--paper);
}

/* BEYOND THE CAN */
.beyond__line{
  margin:0 0 0 16.667%;max-width:none;
  font-size:var(--t-h2);line-height:1.2;letter-spacing:-.01em;text-wrap:initial;
}
.beyond__line em{color:var(--pink)}
.beyond__turn{
  margin:clamp(24px,6svh,80px) 0 0 46.5%;padding:0;max-width:none;
  font-size:var(--t-body);line-height:1.35;
}
.beyond__text{max-width:none}

/* THE REEL */
.showreel{justify-items:center}
.showreel__title{
  width:auto;max-width:none;margin:0 0 clamp(16px,4svh,48px);
  font-size:var(--t-h3);text-align:center;
}
.showreel__frame{
  width:min(66.667%,calc((100svh - var(--bar) - var(--t-h3) * 1.3 - 16svh) * 16 / 9));
  margin:0;border-radius:14px;
}

/* CREDO */
.credo__line{
  margin-left:25%;max-width:none;
  font-size:var(--t-credo);line-height:1.15;letter-spacing:-.01em;text-wrap:initial;
}
.credo__note{
  margin:clamp(24px,6svh,72px) 0 0 50%;max-width:none;
  font-family:var(--serif);font-size:var(--t-body);line-height:1.3;color:var(--paper);
}

/* FILM */
.film{justify-items:center}
.film__frame{
  width:min(83.333%,calc((100svh - var(--bar) - 9svh) * 16 / 9));max-width:none;
  margin:0;border-radius:14px;
}

/* MADE WITH LOVE */
.hand{
  grid-template-columns:8.333% minmax(0,36%) 4.167% minmax(0,37.5%) 1fr;
  gap:0;align-items:center;
}
.hand__copy{grid-column:2}
.hand__stack{grid-column:4;width:min(100%,calc((100svh - var(--bar) - 12svh) / 2 * 16 / 9))}
.hand__title{font-size:var(--t-h2);line-height:1.15;letter-spacing:-.01em}
.hand__body{
  margin-top:clamp(24px,7svh,80px);max-width:none;
  font-family:var(--serif);font-size:var(--t-body);line-height:1.35;color:var(--paper);
}
.hand__stack{gap:clamp(4px,1svh,12px)}

/* WHERE WE ARE */
.offices__home{
  max-width:none;padding:0;gap:0;
  grid-template-columns:14.3% minmax(0,40%) 12.5% minmax(0,25%) 1fr;
}
.postcard--home{grid-column:2;width:100%;max-width:calc(46svh * 1181 / 738);justify-self:center}
.offices__copy{grid-column:4}
.offices__title{font-size:var(--t-h2);line-height:1.12}
.offices__address{font-size:var(--t-body);line-height:1.3}
.offices__body{
  max-width:none;font-family:var(--serif);font-size:var(--t-small);line-height:1.45;color:var(--paper);
  text-align:left;text-wrap:pretty;hyphens:manual;
}
.network__title{max-width:none;margin:0;padding:0 0 0 14.3%;width:54.3%;text-align:center;font-size:var(--t-body)}

/* polaroids and the room sit below the taller header */
.invite__stage{padding-top:calc(var(--bar) + clamp(16px,4svh,48px))}

/* ---------- tall screens (phones, tablets upright) ---------- */
@media (orientation:portrait){
  .hello__lead{margin:0 8% 0 12.5%}
  .hello__body{margin:clamp(18px,3svh,36px) 8% 0 12.5%}

  .beyond__line{margin:0 8% 0 12.5%}
  .beyond__line em{display:block}
  .beyond__turn{margin:clamp(18px,3svh,36px) 8% 0 12.5%}

  .showreel{justify-items:stretch}
  .showreel__title{margin:0 8.5% clamp(28px,6svh,72px) 6%;text-align:left}
  .showreel__title em{display:block;text-align:right}
  .showreel__frame{width:85.5%;justify-self:center}

  .credo__line{margin:0 8% 0 12.5%}
  .credo__note{margin:clamp(40px,8svh,96px) 8% 0 12.5%}

  .film__frame{width:min(75%,calc((100svh - var(--bar) - 16svh) * 4 / 5));aspect-ratio:4/5}
  .film .sound{left:50%;right:auto;translate:-50% 0;bottom:clamp(12px,2.4svh,24px)}

  .hand{grid-template-columns:1fr;align-content:center}
  .hand__copy,.hand__stack{grid-column:1}
  .hand__copy{margin:0 8% 0 12.5%}
  .hand__title{font-size:var(--t-h2)}
  .hand__body{margin-top:clamp(16px,3svh,36px)}
  .hand__stack{width:86%;justify-self:center;margin-top:clamp(24px,4svh,48px);gap:clamp(8px,1.4svh,16px)}

  .offices__home{grid-template-columns:1fr;padding:0 8% 0 12.5%;gap:clamp(20px,3svh,40px)}
  .postcard--home,.offices__copy{grid-column:1}
  .postcard--home{max-width:none}
  .network__title{padding:0 8% 0 12.5%;width:auto;text-align:left}
}

/* MeKoko's eyes on phones: on iPhone a tap on him asks to follow the tilt */
.mekoko__ask{
  position:absolute;left:50%;top:100%;translate:-50% 0;margin-top:10px;
  display:none;white-space:nowrap;
  font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);opacity:.75;
}
.mekoko.can-ask{cursor:pointer}
.mekoko.can-ask .mekoko__ask{display:block}
.mekoko.is-awake .mekoko__ask{display:none}

/* type set to the layouts: the design's line breaks, never re-wrapped */
[data-fit]{white-space:nowrap;line-height:1.18}
.hello__body[data-fit],.beyond__turn[data-fit],.credo__note[data-fit],.hand__body[data-fit],.offices__address[data-fit],.envelope__hello[data-fit]{line-height:1.32}
.envelope__hey[data-fit]{line-height:1}
.hello__lead{margin-left:18.75%}
.credo__note{margin-left:50.25%}
.hand__copy{padding-left:.35%}
.hello__body{margin-top:10.5svh}
.beyond__turn{margin-top:7svh}
.credo__note{margin-top:8.3svh}
.hand__body{margin-top:9svh}
.showreel__title{margin-bottom:5.7svh}
.bar__logo{height:40%}

/* the envelope: MeKoko sized to the layouts */
.mekoko{width:min(12.5vw,23.7svh);margin-top:14svh}
@media (orientation:portrait){
  .hello__lead{margin-left:12.9%}
  .hello__body{margin-top:3svh;margin-left:12.7%}
  .beyond__line,.beyond__turn,.credo__line,.hand__copy{margin-left:12.7%}
  .credo__note{margin-left:13.2%;margin-top:7.75svh}
  .beyond__turn{margin-top:2.75svh}
  .hand__copy{padding-left:0}
  .hand__body{margin-top:3.75svh}
  .hand__stack{margin-top:3.75svh}
  .showreel__title{margin-bottom:6svh}
  .mekoko{width:min(36vw,17.8svh);margin-top:13svh}
  .bar__logo{height:34%}
}
span.br-v{display:none}
@media (orientation:portrait){span.br-h{display:none}span.br-v{display:inline}}

/* every slide spans the whole screen width, so positions are shares of the screen */
.hello,.beyond,.credo,.showreel,.film{grid-template-columns:minmax(0,1fr)}
@media (orientation:portrait){.hand{grid-template-columns:minmax(0,1fr)}}
/* the design's line breaks only: nothing inside a set block may re-wrap */
[data-fit],[data-fit] *{white-space:nowrap !important;text-wrap-mode:nowrap !important}

/* WHERE WE ARE on a tall screen: one slide, the cards run left on the next step */
@media (orientation:portrait){
  .offices{padding:var(--bar) 0 0;justify-content:center}
  .offices__home{gap:clamp(12px,2.4svh,28px)}
  .postcard--home{width:min(100%,38svh)}
  .offices__address{margin-top:1.4svh}
  .offices__body{margin-top:1.2svh}
  .network{margin-top:clamp(14px,3svh,36px)}
  .network__title{font-size:var(--t-small)}
  .network__strip{
    margin-top:clamp(6px,1.4svh,16px);padding:10px 8% 14px 12.5%;
    width:max-content;overflow:visible;scroll-snap-type:none;
    translate:calc(var(--run,0px) * -1) 0;
    transition:translate 1.4s var(--ease-out);
  }
  .network__strip .postcard{width:min(56vw,25svh)}
}
/* the film on a tall screen: as big as the screen allows, a thin edge around it */
@media (orientation:portrait){
  .film__frame{width:min(92%,calc((100svh - var(--bar) - 6svh) * 4 / 5))}
}
/* the cards drift slowly while the page is in view, and snap home out of view */
@media (orientation:portrait){
  .network__strip{transition:none}
  .network__strip.is-running{transition:translate 12s cubic-bezier(.45,.05,.55,.95) .6s}
}