/* ═══════════════════════════════════════════════════════════════
   BELLO VISION — Coastal · Elevated · Dark Tones × Coastal Miami
   Type: Bodoni Moda (display) · Italiana (deco caps) · Cormorant (body)
   ═══════════════════════════════════════════════════════════════ */

/* Brand fonts (Bello Vision Brand Book 2026): one weight each, no bold or italic */
@font-face{font-family:'Vision Font';src:url('/assets/fonts/VisionFontHeader.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Bellobody';src:url('/assets/fonts/BelloSubHeader.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'BVBODYTEXT';src:url('/assets/fonts/BVBODYTEXT.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}

:root{
  /* Palette: exactly the four colours of the Bello Vision Brand Book 2026. No black, no pure white, no in-between shades.
     The older names stay as aliases so every rule keeps working: ink = navy (dark sections, and text on light). */
  --navy:#505d6d;       /* grey blue: text on light, dark sections */
  --cream:#f9fbf8;      /* light green: page background, text on navy */
  --sand-bb:#ebe3d3;    /* light orange: panels and light sections */
  --sky:#cedbe8;        /* light blue: highlights, tags, divider lines */
  --ink:var(--navy);
  --ink-2:var(--navy);
  --cream-2:var(--sand-bb);
  --paper:var(--sand-bb);
  --sand:var(--sand-bb);
  --sky-2:var(--sky);
  --ocean:var(--navy);
  --ocean-2:var(--navy);
  --aqua:var(--sky);
  --coral:var(--sky);
  --muted:var(--navy);
  --muted-inv:var(--cream);

  /* Type: Vision Font (headers, capitals only), Bellobody (subheads, labels), BVBODYTEXT (body) */
  --font-display:"Vision Font", Georgia, serif;
  --font-deco:"Bellobody", Georgia, serif;
  --font-body:"BVBODYTEXT", Arial, Helvetica, sans-serif;

  --gutter:clamp(20px, 4vw, 64px);
  --ease:cubic-bezier(.77,0,.18,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
/* Backup: the previous type (Bodoni Moda / Italiana / Cormorant, with its italics). To bring it back, add class="type-classic"
   to <html> in index.html and in build.js, and restore the Google Fonts <link> kept in README.md. */
html.type-classic{
  --font-display:"Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --font-deco:"Italiana", "Cinzel", "Didot", serif;
  --font-body:"Cormorant Garamond", "EB Garamond", Garamond, Georgia, serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.menu-open{overflow:hidden}

body{
  font-family:var(--font-body);
  font-weight:400;
  font-size:clamp(17px, 1.15vw, 20px);
  line-height:1.55;
  color:var(--cream);
  background:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:100%;width:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
em{font-style:italic}
::selection{background:var(--ink);color:var(--cream)}

/* Theme surfaces */
.theme-ink{background:var(--ink);color:var(--cream)}
.theme-cream{background:var(--paper);color:var(--ink)}
.theme-sky{background:var(--sky);color:var(--ink)}

/* ───────── Utilities ───────── */
.section-head{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:0 var(--gutter);
  position:relative;
}

.line-mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.line-mask>span{display:block;transform:translateY(110%);}
.is-ready .hero .line-mask>span{transition:transform 1.4s var(--ease)}
.services__h .line-mask>span,.join__h .line-mask>span,.process__h .line-mask>span,.news__h .line-mask>span,.rise .line-mask>span,.wk-hero__h .line-mask>span{transform:none;transition:none}

/* entrances run as animations, not transitions: an element's own hover transition can then never cancel its slide-in */
.reveal{opacity:0;transform:var(--rv,translateY(34px))}
.reveal.in{opacity:1;transform:none;animation:rvIn 1.2s var(--ease-out) var(--d,0s) backwards}
@keyframes rvIn{from{opacity:0;transform:var(--rv,translateY(34px))}}
.reveal.drift.in{animation:rvIn 1.2s var(--ease-out) var(--d,0s) backwards,drift var(--dur,9s) ease-in-out var(--dl,0s) infinite alternate}

.img-wrap{overflow:hidden;position:relative;background:var(--sand)}
.img-wrap img{transform:scale(1.12);transition:transform 1.6s var(--ease-out)}
.img-wrap.in img,.reveal.in .img-wrap img{transform:scale(1)}

.arrow{display:inline-block;width:.9em;height:.9em;position:relative;margin-left:.5em;vertical-align:middle}
.arrow::before{content:"";position:absolute;inset:0;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg) scale(.6);transform-origin:center;transition:transform .5s var(--ease)}
.arrow::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:currentColor;transform:translateY(-50%) scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
a:hover .arrow::after,button:hover .arrow::after{transform:translateY(-50%) scaleX(1)}
a:hover .arrow::before,button:hover .arrow::before{transform:translate(20%,0) rotate(45deg) scale(.6)}

.link-line{display:inline-flex;align-items:center;letter-spacing:.04em;font-size:1rem;position:relative;padding-bottom:4px}
.link-line::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(1);transform-origin:right;transition:transform .6s var(--ease)}
.link-line:hover::after{transform:scaleX(0)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--font-body);font-size:1.02rem;letter-spacing:.02em;
  padding:.8em 1.7em;border-radius:999px;position:relative;overflow:hidden;isolation:isolate;
  border:1px solid transparent;cursor:pointer;background:none;color:inherit;
  transition:color .5s var(--ease),border-color .5s var(--ease);
}
.btn span{position:relative;z-index:1}
.btn--cream{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn--cream::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .6s var(--ease);z-index:0;border-radius:inherit}
.btn--cream:hover{color:var(--cream)}
.btn--cream:hover::before{transform:translateY(0)}
.theme-cream .btn--cream,.theme-sky .btn--cream{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.theme-cream .btn--cream::before,.theme-sky .btn--cream::before{background:var(--cream)}
.theme-cream .btn--cream:hover,.theme-sky .btn--cream:hover{color:var(--ink)}
.btn--ghost{border-color:rgba(249,251,248,.35)}
.btn--ghost:hover{border-color:var(--cream)}
.btn--wide{width:100%;justify-content:center;margin-top:8px}

/* ───────── Cursor + grain ───────── */

.grain{position:fixed;inset:0;z-index:800;pointer-events:none;opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 .45 .85 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:280px 280px;mix-blend-mode:multiply}
body[data-theme="dark"] .grain{mix-blend-mode:screen;opacity:.09}

/* ───────── Nav ───────── */
.nav{
  position:fixed;left:0;right:0;top:0;z-index:700;isolation:isolate;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:22px var(--gutter);
  color:var(--cream);
  transition:padding .5s var(--ease),color .5s var(--ease);
}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(80,93,109,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;transition:opacity .5s var(--ease)}
.nav.scrolled{padding-top:14px;padding-bottom:14px}
.nav.scrolled::before{opacity:1}
/* over the hero films the scrolled nav is a soft fade rather than a solid bar; the bar returns once past the hero */
.nav::after{content:"";position:absolute;inset:0 0 -32px 0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);
  background:linear-gradient(rgba(80,93,109,.58),rgba(80,93,109,.24) 62%,rgba(80,93,109,0));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(#000 50%,transparent);mask-image:linear-gradient(#000 50%,transparent)}
.nav.scrolled.over-hero::before{opacity:0}
.nav.scrolled.over-hero::after{opacity:1}
body[data-theme="light"] .nav::before{background:rgba(235,227,211,.9)}
.nav__brand{display:flex;align-items:baseline;gap:14px}
/* the lockup: palm logo and wordmark on one line, the real logo files in the nav's colour (cream on dark, navy on light) */
.nav__brand{align-items:center;gap:12px}
.nav__palm{display:block;height:38px;aspect-ratio:459/700;background:currentColor;flex:none;
  -webkit-mask:url(/assets/opt/palm-logo-cream.webp?v=1) center/contain no-repeat;mask:url(/assets/opt/palm-logo-cream.webp?v=1) center/contain no-repeat;transition:opacity .4s}
.nav__logo{display:block;height:17px;width:auto;flex:none}
html.has-intro-page:not(.palm-landed) .nav__palm{opacity:0;transition:none}   /* the hero's palm morph lands here */
.nav__mono{font-family:var(--font-deco);font-size:1.1rem;letter-spacing:.06em;opacity:.84}
.nav__links{display:flex;gap:2.2em;justify-self:center}
.nav__links a{font-size:1.05rem;letter-spacing:.02em;position:relative;padding:4px 0}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__cta{justify-self:end}
body[data-theme="light"] .nav{color:var(--ink)}
body[data-theme="light"] .nav__cta.btn--cream{background:var(--ink);color:var(--cream);border-color:var(--ink)}
body[data-theme="light"] .nav__cta.btn--cream::before{background:var(--cream)}
body[data-theme="light"] .nav__cta.btn--cream:hover{color:var(--ink)}
body[data-theme="light"] .nav__burger i{background:var(--ink)}
.nav__burger{display:none;justify-self:end;background:none;border:0;width:44px;height:44px;position:relative;cursor:pointer}
.nav__burger i{position:absolute;left:10px;right:10px;height:1px;background:var(--cream);transition:background .5s;top:19px;transition:transform .5s var(--ease)}
.nav__burger i+i{top:26px}
.nav__burger.open i:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav__burger.open i+i{transform:translateY(-3.5px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:650;pointer-events:none;color:var(--ink)}
.menu__bg{position:absolute;inset:0;background:var(--sky);transform:translateY(-100%);transition:transform .9s var(--ease)}
.menu__inner{position:absolute;left:var(--gutter);right:var(--gutter);top:22vh;display:flex;flex-direction:column;gap:.1em}
.menu__inner a{font-family:var(--font-display);font-size:clamp(35.2px,8vw,67.2px);line-height:1.05;display:flex;align-items:baseline;gap:.4em;opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.menu__inner a em{font-family:var(--font-body);font-style:normal;font-size:.9rem;letter-spacing:.04em;opacity:.8}
.menu__foot{position:absolute;left:var(--gutter);right:var(--gutter);bottom:36px;display:flex;justify-content:space-between;letter-spacing:.04em;font-size:1rem;opacity:0;transition:opacity .6s .5s}
.menu.open{pointer-events:auto}
.menu.open .menu__bg{transform:none}
.menu.open .menu__inner a{opacity:1;transform:none}
.menu.open .menu__inner a:nth-child(1){transition-delay:.35s}
.menu.open .menu__inner a:nth-child(2){transition-delay:.42s}
.menu.open .menu__inner a:nth-child(3){transition-delay:.49s}
.menu.open .menu__inner a:nth-child(4){transition-delay:.56s}
.menu.open .menu__inner a:nth-child(5){transition-delay:.63s}
.menu.open .menu__foot{opacity:.8}

/* ───────── Hero ───────── */
/* the hero is a tall scroll track; its stage sticks while the intro plays (no overflow:hidden here or sticky breaks) */
.hero{position:relative;background:var(--ink)}
.hero.has-intro{height:290vh;height:290svh}   /* scroll drives only the proposal morph now, at its original length */
.intro-m .hero.has-intro{height:175vh;height:175svh}   /* phones: one swipe up carries the palm onto the logo */
.intro-m .intro__src{background:none}   /* phones never show the leaves */
.intro-m .intro.on-beach .intro__loop{animation:mBeachIn 1.4s cubic-bezier(.22,.61,.36,1)}   /* the beach comes up out of black */
@keyframes mBeachIn{from{opacity:0}}
.hero__stage{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr;padding:0 var(--gutter);overflow:hidden;isolation:isolate}
.has-intro .hero__stage{position:sticky;top:0;height:100vh;height:100svh}
.has-intro .hero__grain{z-index:5}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__media img,.hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero__media video{opacity:0;transition:opacity 1.8s ease}
.hero__media.has-video video{opacity:1}
.hero__media.has-video img{animation:none}
.hero__media img{transform:scale(1.04);animation:kenburns 18s var(--ease-out) forwards}
@keyframes kenburns{to{transform:scale(1)}}
.hero__veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 120% 95% at 50% 42%, rgba(7,7,7,0) 55%, rgba(7,7,7,.26) 100%),
    linear-gradient(to right, rgba(7,7,7,.32), rgba(7,7,7,0) 55%),
    linear-gradient(to bottom, rgba(7,7,7,.42) 0%, rgba(7,7,7,.04) 22%, rgba(7,7,7,.12) 46%, rgba(7,7,7,.7) 74%, rgba(7,7,7,.97) 100%)}

/* projector feel: a warm sun-faded wash that breathes a touch, like exposure drifting on 16mm */
.hero__film{position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(ellipse 80% 60% at 78% 12%, rgba(255,214,160,.34), rgba(255,214,160,0) 70%), rgba(236,218,190,.09);
  animation:heroFlicker 4.8s steps(12) infinite}
@keyframes heroFlicker{0%,100%{opacity:1}9%{opacity:.86}18%{opacity:.97}33%{opacity:.9}47%{opacity:1}61%{opacity:.88}74%{opacity:.96}88%{opacity:.91}}
/* film grain on the hero: one shared texture over all three scenes (foliage, beach, sailboat), a light 6-frame flicker;
   overlay keeps bright skies from washing out. With the intro it sits above it, so every scene and handoff carries the same grain */
.hero__grain{position:absolute;inset:-4%;z-index:-1;pointer-events:none;opacity:.2;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 .4 .8 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:300px 300px;animation:heroGrain .9s steps(6) infinite}
@keyframes heroGrain{0%{transform:translate(0,0)}17%{transform:translate(-2%,1%)}34%{transform:translate(1%,-2%)}51%{transform:translate(-1%,2%)}68%{transform:translate(2%,-1%)}85%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}}
@keyframes bar{0%,100%{height:4px}50%{height:14px}}
/* phones: the grain sits still. Jumping in steps over the moving video it read as detached from the picture */
@media (prefers-reduced-motion:reduce),(max-width:900px),(hover:none){.hero__grain{animation:none;inset:0}}
@media (prefers-reduced-motion:reduce){.hero__film{animation:none}}
.hero__body{align-self:end;padding-bottom:8vh}
.hero__title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(61.6px,10.8vw,168px);
  line-height:.88;letter-spacing:-.025em;
  margin-left:-.04em;
}
.hero__title-italic{font-style:italic;font-weight:400;margin-right:.08em}
.hero__period{color:var(--coral)}
.hero__row{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-top:4vh}
.hero__sub{font-size:clamp(17px,1.25vw,22px);line-height:1.45;font-weight:400;max-width:38ch;opacity:0;transform:translateY(16px);transition:opacity 1.2s var(--ease-out) .9s,transform 1.2s var(--ease-out) .9s}
.hero__row .btn{opacity:0;transform:translateY(16px);transition:opacity 1.2s var(--ease-out) 1.05s,transform 1.2s var(--ease-out) 1.05s,color .5s var(--ease)}
.is-ready .hero:not(.has-intro) .hero__sub,.is-ready .hero:not(.has-intro) .hero__row .btn,.is-ready .hero.revealed .hero__sub,.is-ready .hero.revealed .hero__row .btn{opacity:.92;transform:none}
.is-ready .hero:not(.has-intro) .hero__title .line-mask:nth-child(1)>span,.is-ready .hero.revealed .hero__title .line-mask:nth-child(1)>span{transform:none;transition-delay:.4s}
.is-ready .hero:not(.has-intro) .hero__title .line-mask:nth-child(2)>span,.is-ready .hero.revealed .hero__title .line-mask:nth-child(2)>span{transform:none;transition-delay:.52s}
.hero.revealed .hero__sub{transition-delay:.7s}.hero.revealed .hero__row .btn{transition-delay:.85s}

/* ── Intro: fronds part onto the beach palm, which becomes the palm logo (the proposal cover film) ── */
.hero:not(.has-intro) .intro,.hero:not(.has-intro) .intro__morph{display:none}
.intro{position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--ink)}
.intro__film{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;background:var(--ink)}
/* the film's centre shade is painted by script.js into both canvases, so the foliage-to-beach cut renders identically */
.intro__fm{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:fill;max-width:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%)}
/* the loop is painted into .intro__loop (same colour path as the foliage canvas, so the cut is exact); the videos decode underneath */
.intro__loop{background:var(--ink);-webkit-mask-image:none;mask-image:none;visibility:hidden}
.intro.on-beach .intro__loop{visibility:visible}   /* shown from the cut on (until then it only warms up behind the foliage, and never counts as a layout shift) */
video.intro__fm{opacity:0;-webkit-mask-image:none;mask-image:none;width:2px!important;height:2px!important}   /* decode only (the canvas paints them at full size); a 2px box so the browser never counts them as the page's main content */
.intro.wide .sq,.intro:not(.wide) .wd{display:none}
/* idle and opening videos decode under the canvas (script.js paints them into it) */
.intro__idle,.intro__open{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}   /* never shown directly: prepare() seeks the opening to its last (palm) frame while measuring colour */
/* foliage opening: scroll-scrubbed frames drawn by script.js; the first frame is the background until it decodes */
.intro__seq{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s ease}
/* the poster holds the first screen until the calibrated foliage fades in over it (hidden once the beach takes over) */
.intro__src{position:absolute;inset:0;background:#0b1208 url(/assets/foliage-poster-sm.jpg?v=5) 50% 50%/cover no-repeat}
@media (min-aspect-ratio:19/25){.intro__src{background-image:url(/assets/foliage-poster.jpg?v=4)}}
/* the poster carries the same treatment the canvas paints over the video (edge fades, soft centre shade), so the hand-over is invisible */
.intro__src::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 50% 52%,rgba(80,93,109,.4) 0,rgba(80,93,109,.18) 45%,rgba(80,93,109,0) 75%),
    linear-gradient(#070707,rgba(7,7,7,0) 7%,rgba(7,7,7,0) 93%,#070707)}

/* "Enter the Vision": an invitation over the living foliage */
.intro__invite{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--cream);padding:0 var(--gutter)}
.intro__invite::before{content:"";position:absolute;left:50%;top:50%;width:min(94vw,900px);height:min(58vh,460px);transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(7,7,7,.55),rgba(7,7,7,.22) 60%,rgba(7,7,7,0));opacity:0;transition:opacity 1.6s var(--ease-out)}
.intro__eyebrow{font-family:var(--font-deco);font-size:clamp(12px,.95vw,15px);letter-spacing:.42em;text-transform:uppercase;color:rgba(249,251,248,.92);text-shadow:0 1px 16px rgba(7,7,7,.6);margin:0 0 clamp(18px,2.4vh,26px) .42em}
.intro__title{font-family:var(--font-display);font-weight:400;font-size:clamp(44px,6.2vw,100px);line-height:1;letter-spacing:-.015em;text-shadow:0 2px 30px rgba(7,7,7,.35)}
.intro__title em{font-style:italic}
.intro__enter{pointer-events:auto;margin-top:clamp(30px,4.6vh,48px);display:inline-flex;align-items:center;gap:16px;background:none;border:0;padding:12px 2px;color:inherit;cursor:pointer;position:relative;
  font-family:var(--font-deco);font-size:clamp(13px,.95vw,15px);letter-spacing:.36em;text-transform:uppercase;text-shadow:0 1px 14px rgba(7,7,7,.55)}
.intro__enter span{padding-left:.36em}
.intro__enter::after{content:"";position:absolute;left:2px;right:2px;bottom:5px;height:1px;background:currentColor;opacity:.45;transform:scaleX(.55);transform-origin:left;transition:transform .8s var(--ease),opacity .8s var(--ease)}
.intro__enter svg{width:26px;height:12px;fill:none;stroke:currentColor;stroke-width:1;transition:transform .8s var(--ease)}
.intro__enter:hover::after,.intro__enter:focus-visible::after{transform:scaleX(1);opacity:.85}
.intro__enter:hover svg,.intro__enter:focus-visible svg{transform:translateX(6px)}
.intro__enter:focus-visible{outline:1px solid rgba(249,251,248,.55);outline-offset:8px}
.intro__enter[disabled]{cursor:default}
/* entrance: a slow, staggered rise once the media is ready; exit: a soft fade upward */
.intro__invite>*{opacity:0;transform:translateY(14px);transition:opacity 1.5s var(--ease-out),transform 1.5s var(--ease-out)}
.is-ready .intro__invite.on>*{opacity:1;transform:none}
.is-ready .intro__invite.on::before{opacity:1}
.intro__invite.on .intro__eyebrow{transition-delay:.2s}
.intro__invite.on .intro__title{transition-delay:.42s}
.intro__invite.on .intro__enter{transition-delay:.85s}
.intro__invite.out>*,.intro__invite.out::before{opacity:0;transform:translateY(-10px);transition:opacity .75s var(--ease),transform .9s var(--ease);transition-delay:0s}
.intro__invite.out{pointer-events:none}
/* a first visit: the invitation rises on the same CSS clock as the foliage's lead-in, so it never waits on the scripts or the clips
   (Enter answers once script.js adds .on); leaving, the whole block fades up */
.has-lead .intro__invite>*{animation:inviteIn 1.5s var(--ease-out) both}
.has-lead .intro__eyebrow{animation-delay:1.7s}.has-lead .intro__title{animation-delay:1.92s}.has-lead .intro__enter{animation-delay:2.35s}
.has-lead .intro__invite::before{animation:inviteBg 1.6s var(--ease-out) 1.5s both}
.has-lead .intro__invite{transition:opacity .75s var(--ease),transform .9s var(--ease)}
.has-lead .intro__invite.out{opacity:0;transform:translateY(-10px)}
@keyframes inviteIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes inviteBg{from{opacity:0}to{opacity:1}}
.intro__invite:not(.on) .intro__enter{pointer-events:none}
.intro__skip{position:absolute;z-index:3;right:var(--gutter);bottom:max(4.2vh,22px);pointer-events:auto;background:none;border:0;padding:10px 0;color:var(--cream);cursor:pointer;
  font-family:var(--font-deco);font-size:12px;letter-spacing:.32em;text-transform:uppercase;text-shadow:0 1px 12px rgba(7,7,7,.6);opacity:0;visibility:hidden;transition:opacity 1s var(--ease-out),visibility 0s 1s}
.is-ready .intro__skip.on{opacity:.72;visibility:visible;transition:opacity 1s var(--ease-out) 1.4s,visibility 0s}
.intro__skip:hover,.intro__skip:focus-visible{opacity:.95!important}
.intro__skip:focus-visible{outline:1px solid rgba(249,251,248,.55);outline-offset:6px}
/* the opening: the foliage comes up out of black and settles into focus, then "Enter the Vision" rises over it */
.has-lead .intro__src,.has-lead .intro__seq{animation:leadIn 2.4s cubic-bezier(.22,.61,.36,1) both}
@keyframes leadIn{0%{transform:scale(1.14);filter:brightness(0) blur(22px)}35%{filter:brightness(.45) blur(12px)}100%{transform:none;filter:none}}
/* "Scroll to begin": the letters surface one by one out of a soft blur once the beach is alive */
.intro__scroll{visibility:hidden;transition:visibility 0s 1.4s;position:absolute;z-index:3;left:50%;bottom:max(6vh,30px);transform:translateX(-50%);margin:0;white-space:nowrap;color:var(--cream);pointer-events:none;
  font-family:var(--font-display);font-style:italic;font-weight:400;font-size:clamp(22px,2vw,32px);letter-spacing:.04em;text-shadow:0 0 22px rgba(7,7,7,.55),0 1px 3px rgba(7,7,7,.4)}
.intro__scroll .ch{display:inline-block;white-space:pre;opacity:0;filter:blur(8px);transform:translateY(.35em);transition:opacity .9s var(--ease-out),filter .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc(var(--i) * 55ms)}
.intro__scroll.on .ch{opacity:1;filter:blur(0);transform:none}
.intro__scroll:not(.on) .ch{transition-duration:.5s;transition-delay:0s}
/* skip: the whole intro dissolves onto the sailboat */
.intro.is-skipping{opacity:0;transition:opacity .9s var(--ease)}
.intro.is-skipping~.intro__morph{opacity:0!important}
@media (prefers-reduced-motion:reduce){.intro__scroll .ch{transition:opacity .6s ease;filter:none;transform:none}}
.intro__morph{position:absolute;z-index:7;left:0;top:0;width:0;height:auto;opacity:0;pointer-events:none;image-rendering:auto;backface-visibility:hidden}



/* ───────── Marquee ───────── */
.marquee{background:var(--ink);color:var(--cream);overflow:hidden;padding:22px 0}
.marquee__track{display:flex;align-items:center;gap:56px;white-space:nowrap;width:max-content;animation:marquee 34s linear infinite;}
.marquee__track span{font-family:var(--font-deco);font-size:clamp(19.36px,2.08vw,30.4px);letter-spacing:.1em;text-transform:uppercase}
.marquee__track i{font-style:normal;color:var(--coral);font-size:.9rem}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ───────── Studio (split words + arch photos + stats) ───────── */
.studio{padding:10.5vh 0 10.5vh;overflow-x:clip}
.studio__comp{
  display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto auto auto;
  gap:24px var(--gutter);padding:2vh var(--gutter) 0;align-items:center;position:relative;
}
.studio__word{font-family:var(--font-deco);font-weight:400;text-transform:uppercase;letter-spacing:.06em;line-height:.9;font-size:clamp(40px,6.1vw,100px);white-space:nowrap;position:relative;z-index:2}
.studio__word--a{grid-column:1/10;grid-row:1;align-self:end}
.studio__word--b{grid-column:5/13;grid-row:3;text-align:right;align-self:start;margin-top:-9vh}
.studio__fig{overflow:hidden;background:var(--sand);margin:0}
.studio__fig img{transform:scale(1.08);transition:transform 1.6s var(--ease-out)}
.studio__fig.in img{transform:scale(1)}
.studio__fig--arch{grid-column:8/11;grid-row:1/3;aspect-ratio:3/4.4;border-radius:999px 999px 0 0}
/* a printed photo tucked over the arch's corner */
.studio__print{grid-column:10/13;grid-row:1/2;align-self:start;margin:14vh 0 0;position:relative;z-index:1;aspect-ratio:4/3;width:88%;justify-self:end;
  border:clamp(6px,.7vw,11px) solid var(--cream);box-shadow:0 30px 50px -28px rgba(80,93,109,.45);overflow:hidden;background:var(--sand)}
/* hairline ring around the circle (the oval of the palm emblem), drawn as a gap + line outside the clip */
.studio__fig--round{grid-column:1/4;grid-row:2/4;aspect-ratio:1;border-radius:50%;align-self:start;margin-top:2vh;
  box-shadow:0 0 0 14px var(--paper),0 0 0 15px rgba(80,93,109,.32)}
.studio__text{grid-column:4/8;grid-row:2;align-self:center;padding-left:clamp(0px,2vw,36px);display:flex;flex-direction:column;align-items:flex-start;gap:3vh}
.studio__statement{font-size:clamp(20px,1.75vw,30px);line-height:1.35;font-weight:400;max-width:26ch}
.studio__statement em{font-family:var(--font-display);font-style:italic;font-weight:400}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);margin:9vh var(--gutter) 0}
.stats li{display:flex;flex-direction:column;gap:6px}
.stats strong{font-family:var(--font-display);font-weight:400;font-size:clamp(35.2px,3.68vw,60.8px);line-height:.95;letter-spacing:-.03em}
.stats li>span{font-size:1.05rem;opacity:.84}

/* ───────── Postcards (pinned horizontal) ───────── */
.postcards{position:relative}
.postcards__pin{height:100vh;overflow:hidden;position:relative;display:flex;align-items:center}
.postcards__track{display:flex;align-items:center;gap:clamp(24px,4vw,64px);padding:0 var(--gutter);height:74vh}
.postcard{position:relative;flex:0 0 auto;height:100%;aspect-ratio:3/4;overflow:hidden;background:var(--sand)}
.postcard--tall{height:100%;aspect-ratio:2.6/4;margin-top:-6vh}
.postcard--wide{aspect-ratio:16/10}
.postcard--intro{aspect-ratio:auto;width:min(480px,80vw);background:none;display:flex;flex-direction:column;justify-content:center;gap:28px;padding-right:2vw}
.postcard__h{font-family:var(--font-display);font-weight:400;font-size:clamp(38.72px,4.32vw,67.2px);line-height:.98;letter-spacing:-.02em}
.postcard--intro p{font-size:clamp(18px,1.35vw,22px);font-weight:400;max-width:34ch;line-height:1.45}
.postcard__img{position:absolute;inset:0}
.postcard__img{overflow:hidden}
.postcard__img img{transform:scale(1.05)}   /* just enough room for the sideways parallax; any more crops the photo's top and bottom */
.postcard__img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,7,7,.5),rgba(7,7,7,.16) 60%,rgba(7,7,7,.24))}
.postcard__text{position:absolute;left:8%;bottom:9%;color:var(--cream);z-index:1;text-shadow:0 1px 2px rgba(7,7,7,.3),0 2px 28px rgba(7,7,7,.4)}
.postcard__text--serif{font-family:var(--font-display);font-size:clamp(35.2px,4.32vw,67.2px);line-height:1;letter-spacing:.06em;text-transform:uppercase}
.postcard__text--deco{font-family:var(--font-deco);font-size:clamp(29.92px,3.36vw,51.2px);line-height:1.02;letter-spacing:.06em;text-transform:uppercase}
.postcard__text--top{top:8%;bottom:auto}
.postcard__text--right{left:auto;right:8%;text-align:right;top:10%;bottom:auto}
.postcard__text--center{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);letter-spacing:.14em;font-size:clamp(29.92px,4.64vw,73.6px)}
/* ───────── Services ───────── */
.services{padding:10.5vh 0 12vh;position:relative;overflow:hidden}
.services__h{font-family:var(--font-display);font-weight:400;font-size:clamp(33.44px,5.92vw,99.2px);line-height:.96;letter-spacing:-.025em;padding:0 var(--gutter) 8vh;width:100%}
.services__h-r{text-align:right;padding-left:8vw}
.services__h em{font-style:italic}
.services__list{margin:0 var(--gutter)}
.service{
  cursor:default;
  display:grid;grid-template-columns:1fr 1.2fr 48px;align-items:center;gap:24px;
  padding:30px 0;position:relative;
  transition:padding .6s var(--ease);
}
.service::before{content:"";position:absolute;left:0;right:0;top:0;height:0;background:var(--cream);z-index:-1;transition:height .5s var(--ease)}
.service__name{font-family:var(--font-deco);font-weight:400;font-size:clamp(26.4px,3.04vw,48px);letter-spacing:.06em;text-transform:uppercase;line-height:1;transition:transform .6s var(--ease),color .5s}
.service__d{font-weight:400;font-size:clamp(16px,1.15vw,19px);opacity:.86;max-width:44ch}
.service__arrow{width:40px;height:40px;border:1px solid rgba(249,251,248,.3);border-radius:50%;position:relative;transition:transform .6s var(--ease),background .5s}
.service__arrow::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:translate(-60%,-40%) rotate(45deg)}
.service:hover .service__name{transform:translateX(14px)}
.service:hover .service__arrow{transform:rotate(45deg);background:var(--cream);color:var(--ink)}

/* ───────── Case studies · sticky stacked cards ───────── */
.cases{padding:10.5vh 0 10.5vh}
.cases__h{font-family:var(--font-display);font-weight:400;font-size:clamp(35.2px,4.8vw,76.8px);line-height:1;letter-spacing:-.02em;padding:0 var(--gutter) 6vh}
.cases__h em{font-style:italic}
.stack{padding:0 var(--gutter);display:flex;flex-direction:column;gap:6vh}
.card{
  position:sticky;top:11vh;
  display:grid;grid-template-columns:1fr 1.1fr;min-height:76vh;
  border-radius:6px;overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(80,93,109,.45);
  transform-origin:center top;
}
.card:nth-child(2){top:calc(11vh + 14px)}
.card:nth-child(3){top:calc(11vh + 28px)}
.card--ink{background:var(--ink);color:var(--cream)}
.card--ocean{background:var(--ocean);color:var(--cream)}
.card--paper{background:var(--cream);color:var(--ink)}
.card__body{display:flex;flex-direction:column;justify-content:center;gap:22px;padding:clamp(28px,4.5vw,72px)}
.card__kicker{font-size:1.1rem;opacity:.86}
.card__body h3{font-family:var(--font-display);font-weight:400;font-size:clamp(26.4px,2.88vw,46.4px);line-height:1.02;letter-spacing:-.02em;max-width:14ch}
.card__text{font-weight:400;font-size:clamp(17px,1.2vw,20px);max-width:44ch;opacity:.9}
.card__stats{display:grid;grid-template-columns:repeat(3,auto);gap:18px 36px;margin:6px 0 10px}
.card__stats strong{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(26.4px,2.4vw,40px);line-height:1;letter-spacing:-.02em;white-space:nowrap}
.card__stats span{display:block;font-size:1rem;opacity:.86;margin-top:8px;max-width:14ch;line-height:1.3}
.card--paper .btn--cream{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.card--paper .btn--cream::before{background:var(--cream)}
.card--paper .btn--cream:hover{color:var(--ink)}
.card .btn{align-self:flex-start}
.card__img{position:relative;min-height:46vh}
.card__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ───────── News · blog cards ───────── */
.news{padding:10.5vh var(--gutter) 10.5vh}
.news__head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:6vh}
.news__head h2{font-family:var(--font-display);font-weight:400;font-size:clamp(35.2px,4.8vw,76.8px);line-height:1;letter-spacing:-.02em}
.news__head h2 em{font-style:italic}
.news__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.5vw,40px)}
.post{display:flex;flex-direction:column;gap:14px;background:var(--ink-2);border-radius:6px;overflow:hidden;padding-bottom:28px;transition:transform .6s var(--ease),background .5s}
.post:hover{transform:translateY(-6px);background:var(--navy)}
.post__img{aspect-ratio:4/3;background:var(--ocean)}
.post__meta{padding:14px 24px 0;font-size:1rem;opacity:.82}
.post h3{padding:0 24px;font-family:var(--font-display);font-weight:400;font-size:clamp(22px,1.9vw,30px);line-height:1.1;letter-spacing:-.01em}
.post>p:last-child{padding:0 24px;font-weight:400;opacity:.86;font-size:1rem}

/* ───────── Quote ───────── */
.quote{position:relative;min-height:72vh;display:grid;place-items:center;overflow:hidden;isolation:isolate;padding:13.5vh var(--gutter)}
.quote__img{position:absolute;inset:-12% 0;z-index:-1}
.quote__img::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(7,7,7,.75),rgba(7,7,7,.55) 50%,rgba(7,7,7,.85))}
.quote__img img{filter:saturate(.8)}
.quote__body{max-width:62ch;text-align:center;display:flex;flex-direction:column;align-items:center;gap:28px}
.quote blockquote{font-family:var(--font-display);font-weight:400;font-size:clamp(24.64px,2.88vw,46.4px);line-height:1.12;letter-spacing:-.01em}
.quote blockquote .w{display:inline-block;opacity:.18;transition:opacity .3s}
.quote blockquote .w.on{opacity:1}
.quote cite{font-style:italic;font-size:1.1rem;opacity:.8}

/* ───────── Process ───────── */
.process{padding:10.5vh 0 0;position:relative;overflow:hidden}
.process__h{font-family:var(--font-display);font-weight:400;font-size:clamp(31.68px,3.84vw,62.4px);line-height:1;letter-spacing:-.02em;padding:1vh var(--gutter) 6vh;max-width:26ch}
.process__h em{font-style:italic}
.process__list{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:0 var(--gutter)}
.step{padding:28px 20px 40px 0;display:flex;flex-direction:column;gap:14px}
.step+.step{padding-left:20px}
.step__n{font-family:var(--font-display);font-size:1.4rem;opacity:.78}
.step h3{font-family:var(--font-deco);font-weight:400;font-size:clamp(24.64px,2.08vw,32px);letter-spacing:.06em;text-transform:uppercase}
.step p{font-weight:400;opacity:.86;font-size:1rem;line-height:1.45}


/* ───────── Join ───────── */
.join{position:relative;min-height:88vh;overflow:hidden;isolation:isolate;display:flex;align-items:center;padding:12vh var(--gutter)}
.join__img{position:absolute;inset:-10% 0;z-index:-1}
.join__img::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(7,7,7,.9),rgba(7,7,7,.55) 55%,rgba(7,7,7,.75))}
.join__inner{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,8vw,140px);width:100%;align-items:center}
.join__h{font-family:var(--font-display);font-weight:400;font-size:clamp(56.32px,8.8vw,144px);line-height:.88;letter-spacing:-.025em;margin:2vh 0 4vh}
.join__left p{font-size:clamp(18px,1.4vw,23px);font-weight:400;max-width:40ch;line-height:1.45;opacity:.9}
.join__contact{display:flex;flex-direction:column;gap:4px;margin-top:5vh;font-size:1.1rem;opacity:.9}
.join__form{display:flex;flex-direction:column;gap:12px}
.field{position:relative;border-bottom:1px solid rgba(249,251,248,.3);padding-top:18px}
.field input,.field textarea{width:100%;background:none;border:0;color:var(--cream);font-family:var(--font-body);font-size:1.15rem;padding:10px 0 14px;outline:none;resize:none}
.field label{position:absolute;left:0;top:24px;letter-spacing:.04em;font-size:1rem;opacity:.8;pointer-events:none;transition:transform .4s var(--ease),opacity .4s}
.field input:focus+label,.field input:not(:placeholder-shown)+label,.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{transform:translateY(-22px);opacity:.9}
.field::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--cream);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.field:focus-within::after{transform:scaleX(1)}
.join__note{font-size:.95rem;opacity:.8;min-height:1.4em;margin-top:6px}

/* ───────── Footer ───────── */
.footer{padding:9vh var(--gutter) 32px;overflow:hidden;position:relative}
.footer__top{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);padding-top:32px}
.footer__col{display:flex;flex-direction:column;gap:8px;font-size:1rem}
.footer__col .footer__col a{opacity:.85;width:max-content;position:relative}
.footer__col a::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.footer__col a:hover::after{transform:scaleX(1);transform-origin:left}
.footer__col span:not(.label){opacity:.82}
.footer__wordmark{margin:10vh 0 6vh;font-family:var(--font-deco);text-transform:uppercase;letter-spacing:.08em;line-height:.85;font-size:clamp(64px,13.4vw,232px);white-space:nowrap;display:flex;justify-content:center}
.footer__logo{display:block;width:100%;height:auto;overflow:visible}
.footer__wordmark .ch{transform-box:fill-box}
.footer__bottom{display:flex;justify-content:space-between;gap:16px;letter-spacing:.04em;font-size:1rem;opacity:.82;padding-top:18px}
.footer__bottom a:hover{opacity:1}

/* ───────── Responsive ───────── */
@media (max-width:1100px){
  .stats{grid-template-columns:1fr 1fr;gap:28px var(--gutter)}
  .news__cards{grid-template-columns:1fr 1fr}
  .card{grid-template-columns:1fr;min-height:0;position:relative;top:0!important}
  .process__list{grid-template-columns:repeat(2,1fr)}
  .step{padding-left:0!important}
  .join__inner{grid-template-columns:1fr;gap:8vh}
  .footer__top{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav{grid-template-columns:1fr auto}
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:block}
  .hero__title{font-size:clamp(56.32px,15.2vw,96px)}
  .hero__row{flex-direction:column;align-items:flex-start;gap:22px}
  .studio__comp{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
  .studio__word{font-size:clamp(34px,9.6vw,52px);white-space:normal}
  .studio__word--a{align-self:flex-start}
  .studio__word--b{align-self:flex-end;text-align:right;margin-top:0}
  .studio__fig--arch{width:62%;align-self:flex-end}
  .studio__print{display:none}
  .studio__fig--round{width:52%;margin:4vh 0 0 14px}
  .studio__text{padding-left:0;margin-top:2vh;align-self:flex-start}
  .stats{grid-template-columns:1fr 1fr}
  .postcards__track{height:64vh}
  .postcard--intro{width:80vw}
  .services__h-r{text-align:left;padding-left:0}
  .service{grid-template-columns:1fr 40px;grid-template-rows:auto auto;gap:10px 16px}
  .service__name{grid-column:1;grid-row:1;font-size:clamp(26px,7.5vw,34px)}
  .service__d{grid-column:1;grid-row:2}
  .service__arrow{grid-column:2;grid-row:1/3;align-self:center}
  .service:hover .service__name{transform:none}
  .news__cards{grid-template-columns:1fr}
  .news__head{flex-direction:column;align-items:flex-start}
  .card__stats{grid-template-columns:1fr 1fr}
  .card__img{min-height:36vh;order:-1}
  .process__list{grid-template-columns:1fr}
  .footer{padding-top:8vh}
  .footer__top{grid-template-columns:1fr;padding-top:0}
  .footer__wordmark{font-size:11.2vw;letter-spacing:.04em;margin:8vh 0 5vh}
  .footer__bottom{flex-direction:column;gap:8px}
  .grain{opacity:.08}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .line-mask>span{transform:none}
  .reveal{opacity:1;transform:none}
}

/* ═══════════════ SEAT · reservation ticket ═══════════════ */
.seat{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,110px);align-items:center;padding:12vh var(--gutter);overflow:hidden}
.seat__h{font-family:var(--font-display);font-weight:400;font-size:clamp(42.24px,5.6vw,89.6px);line-height:.95;letter-spacing:-.02em}
.seat__h em{font-style:italic}
.seat__p{font-size:clamp(18px,1.4vw,22px);line-height:1.5;max-width:36ch;margin:3.5vh 0 5vh}
.seat__label{display:block;font-size:1rem;margin-bottom:10px;opacity:.8}
.seat__row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.seat__in{flex:1 1 220px;min-width:0;font:inherit;font-family:var(--font-display);font-size:clamp(22px,2vw,30px);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);padding:8px 0;outline:none;border-radius:0}
.seat__in::placeholder{color:rgba(80,93,109,.42)}
.seat__in:focus{border-bottom-width:2px;padding-bottom:7px}
.ticket{perspective:1400px}
.ticket__card{position:relative;display:grid;grid-template-columns:clamp(84px,9vw,128px) 1fr;background:var(--cream);color:var(--ink);border-radius:18px;box-shadow:0 40px 70px -36px rgba(80,93,109,.45),0 2px 0 rgba(80,93,109,.04);transform-style:preserve-3d;will-change:transform}
/* punched notches where the stub tears off */
.ticket__card::before,.ticket__card::after{content:"";position:absolute;left:clamp(84px,9vw,128px);width:28px;height:28px;border-radius:50%;background:var(--sky);transform:translateX(-50%)}
.ticket__card::before{top:-14px}
.ticket__card::after{bottom:-14px}
.ticket__stub{display:grid;place-items:center;background:var(--paper);border-radius:18px 0 0 18px;border-right:1px dashed rgba(80,93,109,.28)}
.ticket__emblem{width:56%;aspect-ratio:652/1030;background:var(--ocean);-webkit-mask:url(/brand/emblem-palm.webp) center/contain no-repeat;mask:url(/brand/emblem-palm.webp) center/contain no-repeat}
.ticket__main{padding:clamp(26px,3.2vw,48px) clamp(24px,3.2vw,52px)}
.ticket__club{font-size:1rem;opacity:.84;padding-bottom:16px;margin-bottom:22px;border-bottom:1px solid var(--sky)}
.ticket__k{font-size:1rem;opacity:.84}
.ticket__name{font-family:var(--font-display);font-size:clamp(29.92px,3.2vw,51.2px);line-height:1.02;letter-spacing:-.015em;margin:6px 0 26px;min-height:1.05em;overflow-wrap:anywhere}
.ticket__name.is-empty{opacity:.35;font-style:italic}
.ticket__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}
.ticket__grid dt{font-size:1rem;opacity:.82}
.ticket__grid dd{margin:2px 0 0;font-family:var(--font-display);font-size:clamp(18px,1.5vw,23px);line-height:1.2}
.ticket__stamp{position:absolute;right:clamp(18px,3vw,40px);top:clamp(18px,3vw,36px);width:clamp(96px,9vw,128px);aspect-ratio:1;border:2px solid var(--ocean);border-radius:50%;display:grid;place-items:center;color:var(--ocean);
  opacity:0;transform:scale(2.2) rotate(-28deg);pointer-events:none}
.ticket__stamp span{position:absolute;inset:16%;background:var(--ocean);opacity:.22;-webkit-mask:url(/brand/emblem-palm.webp) center/contain no-repeat;mask:url(/brand/emblem-palm.webp) center/contain no-repeat}
.ticket__stamp b{position:relative;font-family:var(--font-deco);font-weight:400;text-transform:uppercase;letter-spacing:.12em;font-size:clamp(15px,1.3vw,19px);background:var(--cream);padding:2px 6px}
.ticket.is-claimed .ticket__stamp{opacity:.92;transform:scale(1) rotate(-14deg);transition:transform .45s cubic-bezier(.2,1.6,.4,1),opacity .2s}

/* ═══════════════ FEED · split grid ═══════════════ */
.feed{display:grid;grid-template-columns:1fr minmax(320px,560px);gap:clamp(40px,7vw,130px);align-items:center;padding:12vh var(--gutter)}
.feed__h{font-family:var(--font-display);font-weight:400;font-size:clamp(38.72px,4.96vw,80px);line-height:.96;letter-spacing:-.02em}
.feed__h em{font-style:italic}
.feed__p{font-size:clamp(18px,1.4vw,22px);line-height:1.5;max-width:38ch;margin:3.5vh 0 5vh}
.feed__phone{background:var(--cream);border-radius:22px;padding:18px 14px 14px;box-shadow:0 40px 80px -40px rgba(80,93,109,.4)}
.feed__bar{display:flex;align-items:center;gap:14px;padding:0 6px 16px}
.feed__bar b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.25rem;line-height:1.1}
.feed__bar span{font-size:1rem;opacity:.84}
.feed__avatar{width:54px;height:54px;border-radius:50%;background:var(--sky);display:grid;place-items:center;flex:none}
.feed__avatar i{width:44%;aspect-ratio:652/1030;background:var(--cream);-webkit-mask:url(/brand/emblem-palm.webp) center/contain no-repeat;mask:url(/brand/emblem-palm.webp) center/contain no-repeat}
.feed__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;perspective:1200px}
.tile{aspect-ratio:1;background:var(--img) center/cover no-repeat;background-color:var(--sand);transition:filter .5s var(--ease-out)}
.tile--split{background-size:300% 100%;background-position:var(--x) 50%}
html.has-intro-page:not(.intro-done) .tile{background-image:none}   /* the feed's photos wait until the intro is over */
.tile:hover{filter:brightness(1.06) saturate(1.05)}

@media (max-width:900px){
  .seat,.feed{grid-template-columns:1fr}
  .seat{padding:9vh var(--gutter)}
  .feed{padding:9vh var(--gutter)}
}

/* ═══════════════ BOOK · scroll to turn the page ═══════════════ */
.book{position:relative}
.book__pin{height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.6vh,28px);overflow:hidden;padding:92px 0 3vh}
.book__head,.book__bar{width:min(1440px,94vw,calc((100vh - 200px) * 2.1))}
.book__head{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.book__h{font-family:var(--font-display);font-weight:400;font-size:clamp(28px,3vw,46px);line-height:1;letter-spacing:-.015em}
.book__h em{font-style:italic}
.book__hint{font-size:1.05rem;transition:opacity .5s}
.book.is-turning .book__hint{opacity:0}
.book__book{position:relative;width:min(1440px,94vw,calc((100vh - 200px) * 2.1));aspect-ratio:2.1;perspective:5200px}
.book__book::before{content:"";position:absolute;left:3%;right:3%;bottom:-4%;height:12%;background:radial-gradient(closest-side,rgba(80,93,109,.32),transparent);filter:blur(8px);pointer-events:none}
.book__bar{height:2px;background:rgba(80,93,109,.12);overflow:hidden}
.book__bar i{display:block;height:100%;background:var(--ink);transform:scaleX(0);transform-origin:left}
.book__base{position:absolute;top:0;width:50%;height:100%}
.book__base--left{left:0;background:var(--paper);border-radius:6px 0 0 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  box-shadow:inset -26px 0 30px -24px rgba(80,93,109,.35)}
.book__base--left p{font-family:var(--font-display);font-style:italic;font-size:clamp(18px,1.6vw,26px);opacity:.75}
.end__emblem{width:16%;aspect-ratio:652/1030;background:var(--ocean);opacity:.55;-webkit-mask:url(/brand/emblem-palm.webp) center/contain no-repeat;mask:url(/brand/emblem-palm.webp) center/contain no-repeat}
.book__base--right{left:50%;border-radius:0 6px 6px 0}
.leaf{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:0% 50%;transform-style:preserve-3d;--shade:0}
.page{position:absolute;inset:0;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:var(--cream);color:var(--ink)}
.page--front,.book__base--right{border-radius:0 6px 6px 0;box-shadow:inset 26px 0 30px -24px rgba(80,93,109,.32)}
.page--back{transform:rotateY(180deg);border-radius:6px 0 0 6px}
/* turning light: a sheen rolls across the page (--sheen) and it throws a soft shadow on the page beneath (--cast) */
.leaf{--sheen:0;--cast:0}
.book__base{--cast:0}
.page::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:var(--sheen);
  background:linear-gradient(to left,rgba(80,93,109,.28),rgba(80,93,109,.04) 38%,rgba(249,251,248,.16) 62%,rgba(80,93,109,.1))}
.page--back::after{background:linear-gradient(to right,rgba(80,93,109,.28),rgba(80,93,109,.04) 38%,rgba(249,251,248,.16) 62%,rgba(80,93,109,.1))}
.page__cast{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:var(--cast);
  background:linear-gradient(to right,rgba(80,93,109,.42),rgba(80,93,109,.12) 45%,transparent 80%)}
.page--back .page__cast,.book__base--left .page__cast{background:linear-gradient(to left,rgba(80,93,109,.42),rgba(80,93,109,.12) 45%,transparent 80%)}

/* cover */
.page--cover{background:radial-gradient(120% 90% at 30% 20%,var(--navy),var(--navy) 70%);color:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(10px,1.6vh,18px);padding:8%}
.cover__frame{position:absolute;inset:5%;border:1px solid rgba(249,251,248,.32);border-radius:3px;pointer-events:none}
.cover__emblem{width:34%;aspect-ratio:652/1030;background:linear-gradient(160deg,#f9fbf8,#ebe3d3 60%,#cedbe8);-webkit-mask:url(/brand/emblem-palm.webp) center/contain no-repeat;mask:url(/brand/emblem-palm.webp) center/contain no-repeat;margin-bottom:6px}
.cover__t{font-family:var(--font-deco);text-transform:uppercase;letter-spacing:.12em;font-size:clamp(20px,2.3vw,36px);line-height:1.1}
.cover__s{font-family:var(--font-display);font-style:italic;font-size:clamp(16px,1.25vw,20px);max-width:24ch;opacity:.85}
.cover__m{font-size:1rem;opacity:.7;margin-top:8px}

/* chapter pages */
.page--text{display:flex;flex-direction:column;padding:8% 9% 7% 11%;gap:clamp(8px,1.4vh,14px)}
.page__ch{font-family:var(--font-display);font-style:italic;font-size:clamp(16px,1.25vw,20px);opacity:.8}
.page__title{font-family:var(--font-deco);font-weight:400;text-transform:uppercase;letter-spacing:.06em;line-height:.95;font-size:clamp(34px,4.2vw,68px);margin:auto 0 0}
.page__svc{font-family:var(--font-display);font-size:clamp(20px,1.8vw,30px);line-height:1.1}
.page__lead{font-size:clamp(16px,1.15vw,19px);line-height:1.45;max-width:34ch}
.page__list{border-top:1px solid var(--sky);margin-top:clamp(4px,1vh,10px)}
.page__list li{font-size:clamp(15px,1.05vw,17px);padding:clamp(6px,.9vh,10px) 0;border-bottom:1px solid var(--sky)}
.page__no{position:absolute;right:7%;bottom:4.5%;font-family:var(--font-display);font-style:italic;font-size:1rem;opacity:.6}
.page__no--l{right:auto;left:7%;color:var(--cream);opacity:.85;z-index:1}

/* photo pages */
.page--photo img{position:absolute;inset:0}
.page--photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(7,7,7,.62),rgba(7,7,7,.06) 55%),linear-gradient(to left,rgba(7,7,7,.28),transparent 9%)}
.page__cap{position:absolute;left:8%;right:10%;bottom:11%;z-index:1;color:var(--cream);font-family:var(--font-display);font-size:clamp(20px,2vw,32px);line-height:1.15;text-wrap:balance;text-shadow:0 2px 24px rgba(7,7,7,.35)}

/* the last page */
.page--end{background:var(--cream);color:var(--ink);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:clamp(12px,2vh,22px);padding:8% 9% 8% 11%}
.end__h{font-family:var(--font-display);font-weight:400;font-size:clamp(40px,4.6vw,76px);line-height:.95;letter-spacing:-.02em}
.end__h em{font-style:italic}
.end__p{font-size:clamp(16px,1.2vw,20px);line-height:1.45;max-width:30ch}

/* phones: one full page at a time. The spine sits on the left gutter, the facing page is clipped away, and a turning
   page lifts off to the left to show the next one */
@media (max-width:760px){
  .book__head,.book__bar{width:calc(100vw - 2 * var(--gutter))}
  /* phones: the whole spread, both pages, laid out at 600x470 and scaled to the screen width (--bs set by script.js) */
  .book__book{width:600px;height:470px;aspect-ratio:auto;flex:none;transform:scale(var(--bs,.58));transform-origin:50% 0;margin-bottom:calc(470px * (var(--bs,.58) - 1))}
  .book__head{flex-direction:column;gap:6px}
  .page__cap{left:auto;right:8%;max-width:60%;font-size:20px;text-align:right}
}

/* postcards: tighter on narrow screens so the intro doesn't float in empty space */
@media (max-width:900px){
  .postcards__track{height:70vh;gap:18px}
  .postcard--intro{width:64vw;justify-content:flex-end;padding-bottom:3vh;gap:18px}
}

/* the book opens like an album on desktop: wider pages, roomier type */
@media (min-width:761px){
  .page--text{padding:6% 9% 6% 10%}
  .page__title{font-size:clamp(34px,3.6vw,64px)}
  .page__lead{max-width:40ch}
  .cover__emblem{width:24%}
}
.page__more{display:inline-flex;align-items:center;font-size:1rem;margin-top:auto;padding-top:6px;border-bottom:1px solid currentColor;align-self:flex-start;line-height:1.6}
.page__list + .page__more{margin-top:clamp(8px,1.6vh,16px)}

/* homepage services: the whole row opens that service's page */
.service{cursor:pointer}
.service__a{position:absolute;inset:0;z-index:2}
.service__a:focus-visible{outline:1px solid var(--cream);outline-offset:-1px}

/* ═══════════════ PHONES: fewer tall stacks, more side-by-side ═══════════════ */
@media (max-width:760px){
  /* postcards: smaller cards, more of the row in view */
  .postcards__track{height:64vh;gap:14px}
  .postcard{aspect-ratio:9/15}
  .postcard--tall{aspect-ratio:9/16;margin-top:0}
  .postcard--wide{aspect-ratio:4/5}
  .postcard--intro{width:60vw}
  .postcard__text--serif{font-size:30px}
  .postcard__text--deco{font-size:26px}

  /* studio: circle and arch side by side */
  .studio__comp{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;align-items:end}
  .studio__word--a{grid-column:1 / -1;grid-row:auto}
  .studio__fig--round{grid-column:1;grid-row:2;width:auto;margin:0 0 0 14px;align-self:center}
  .studio__fig--arch{grid-column:2;grid-row:2;width:auto}
  .studio__text{grid-column:1 / -1;grid-row:3;margin-top:6px}
  .studio__word--b{grid-column:1 / -1;grid-row:4;justify-self:end;margin-top:0}

  /* case studies keep stacking on top of one another */
  .card{position:sticky!important;top:calc(78px + var(--i,0) * 12px)!important;min-height:0}
  .card:nth-child(2){--i:1}
  .card:nth-child(3){--i:2}
  .card__img{min-height:24vh}
  .card__body{padding:20px 20px 22px;gap:12px}
  .card__body h3{font-size:26px}
  .card__text{display:none}
  .card__stats{grid-template-columns:repeat(3,1fr);gap:10px}
  .card__stats strong{font-size:24px}
  .card__stats span{font-size:.9rem;margin-top:4px}

  /* process: one row, scrolled sideways as you scroll down (pinned in script.js) */
  .process__list{display:flex;width:max-content;margin:0;padding:0 var(--gutter);gap:14px}
  .step{width:74vw;flex:none;padding:22px 20px 26px!important;border:1px solid var(--sky);border-radius:6px;background:rgba(249,251,248,.45)}

  /* news: swipe sideways instead of a long column */
  .news__cards,.newsgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);gap:14px;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 6px;scrollbar-width:none}
  .news__cards::-webkit-scrollbar,.newsgrid::-webkit-scrollbar{display:none}
  .news__cards .post,.newsgrid .post{flex:0 0 78vw;scroll-snap-align:start}

  /* footer: two columns */
  .footer__top{grid-template-columns:1fr 1fr!important}
}

/* the inside of the cover: black board, Chapter I's line */
.page--inside{background:radial-gradient(120% 90% at 70% 20%,var(--navy),var(--navy) 70%);color:var(--cream);display:flex;flex-direction:column;justify-content:flex-end;gap:18px;padding:9% 11% 10% 9%}
.inside__emblem{width:12%;aspect-ratio:652/1030;background:var(--cream);opacity:.55;-webkit-mask:url(/brand/emblem-palm.webp) center/contain no-repeat;mask:url(/brand/emblem-palm.webp) center/contain no-repeat;margin-bottom:auto}
.inside__cap{font-family:var(--font-display);font-size:clamp(22px,2.2vw,36px);line-height:1.15;max-width:18ch;text-wrap:balance}

/* phones: postcards are not pinned, so the section is only as tall as the row */
@media (max-width:760px){
  .postcards__pin{height:auto;padding:7vh 0 8vh;display:block}
  .postcards__track{height:44vh}
  .postcard--intro{width:58vw;justify-content:center;padding-bottom:0}
}

/* ═══════════════ SOCIAL PROOF (replaces the "Have you heard the news" postcards) ═══════════════ */
.postcard--proof{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,2.4vw,36px);color:var(--cream)}
.postcard--ink{background:var(--ink)}
.postcard--ocean{background:var(--ocean)}
.postcard--sky{background:var(--sky);color:var(--ink)}
.postcard--paper{background:var(--cream);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(80,93,109,.1)}
.postcard__palm{width:18%;aspect-ratio:652/1030;background:currentColor;opacity:.7;-webkit-mask:url(/brand/emblem-palm.webp) center/contain no-repeat;mask:url(/brand/emblem-palm.webp) center/contain no-repeat}
.postcard__name{position:relative;z-index:1;display:flex;flex-direction:column;gap:.3em}
.postcard__name b{font-family:var(--font-display);font-weight:400;font-size:clamp(34px,3.4vw,56px);line-height:.98;letter-spacing:-.015em}
.postcard__name i{font-family:var(--font-display);font-style:normal;font-size:clamp(24px,2vw,32px);line-height:1;opacity:.75}
.postcard__name span{font-family:var(--font-deco);text-transform:uppercase;letter-spacing:.06em;font-size:clamp(20px,1.7vw,28px);line-height:1.1}
/* with a photo: the name becomes a caption over the bottom of the picture */
.postcard--proof .postcard__img ~ .postcard__palm{display:none}
.postcard--proof .postcard__img ~ .postcard__name{margin-top:auto;color:var(--cream);text-shadow:0 1px 2px rgba(7,7,7,.3),0 2px 28px rgba(7,7,7,.4)}
.postcard--end{aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:28px;padding:clamp(22px,2.4vw,36px);background:var(--sky)}
.postcard--end .postcard__name b{font-size:clamp(30px,3vw,48px)}
.postcards .postcard__h em{font-style:italic}

/* phones: the row is swiped by hand, never moved by the page scroll */
@media (max-width:760px){
  .postcards__pin{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .postcards__pin::-webkit-scrollbar{display:none}
  .postcards__track{width:max-content;height:auto;align-items:stretch}
  .postcard{height:58vh;max-height:520px;scroll-snap-align:start}
  .postcard--intro{height:auto;width:72vw}
  .postcard__h{font-size:34px}
  .postcard__name b{font-size:32px}
  .postcard__name span{font-size:20px}
}

/* process on phones: the steps are swiped by hand; the wave draws once it is on screen */
@media (max-width:760px){
  .process__list{overflow-x:auto;width:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;padding-bottom:4px}
  .process__list::-webkit-scrollbar{display:none}
  .step{scroll-snap-align:start}
  .process__wave{height:90px}
}

/* case studies heading carries a link to the full Work page */
.cases__h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 32px}
.cases__all{font-family:var(--font-body);font-size:1.1rem;letter-spacing:0;display:inline-flex;align-items:center;gap:.4em}
.card__img.typecover{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:clamp(20px,2.4vw,36px);color:var(--cream);background:var(--ink)}
.card__img.typecover--ocean{background:var(--ocean)}
.card__img.typecover--paper{background:var(--sky);color:var(--ink)}
.card__img .typecover__palm{position:absolute;top:clamp(20px,2.4vw,36px);left:clamp(20px,2.4vw,36px);width:clamp(28px,3vw,44px);aspect-ratio:652/1030;background:currentColor;opacity:.7;-webkit-mask:url(/brand/emblem-palm.webp) center/contain no-repeat;mask:url(/brand/emblem-palm.webp) center/contain no-repeat}
.card__img.typecover b{font-family:var(--font-deco);font-weight:400;text-transform:uppercase;letter-spacing:.05em;font-size:clamp(30px,3.6vw,60px);line-height:1}
.card__img.typecover i{font-family:var(--font-display);font-size:clamp(17px,1.3vw,21px);opacity:.8}
@media (max-width:760px){
  /* phones: more of the next card peeks in, so the row reads as swipeable */
  .postcard{height:52vh}
  .postcard--intro{width:64vw;justify-content:flex-end;padding-bottom:2vh}
  /* phones: show about three swells instead of seven squeezed ones */
  .process__wave{width:240vw;max-width:none}
}

/* ═══════════════ Readability + client photos (Oct 2026 follow-up) ═══════════════ */
/* Bodoni at display sizes switches to its finest hairlines ("#" and "$" nearly vanish). Pin a sturdier optical size
   and weight wherever numbers and card headlines carry the message */
.card__stats strong,.results li strong,.witem__stat strong,.rundown__v,.stats strong{font-variation-settings:"opsz" 14;font-weight:500;letter-spacing:-.01em}
.card__body h3,.witem h3{font-variation-settings:"opsz" 28;font-weight:500}
.card__stats span{opacity:.92;font-size:1.05rem}
.card__text{opacity:.95}
/* dark cards sit inside a light section: their button must stay cream, not ink on ink */
.card--ink .btn--cream,.card--ocean .btn--cream{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.card--ink .btn--cream::before,.card--ocean .btn--cream::before{background:var(--paper)}
.card--ink .btn--cream:hover,.card--ocean .btn--cream:hover{color:var(--ink)}

/* client photos: shown whole as a bordered print on a paper mat with a light film grade, never cropped or blown up */
.print{background:radial-gradient(120% 90% at 50% 40%,var(--sand-bb),var(--paper) 70%);overflow:hidden}
.print__in{position:absolute;inset:clamp(22px,7%,64px);display:flex;align-items:center;justify-content:center}
.print img{position:static!important;width:auto!important;height:auto!important;max-width:100%;max-height:100%;object-fit:contain!important;
  border:clamp(6px,.7vw,12px) solid var(--cream);box-shadow:0 22px 50px -24px rgba(80,93,109,.5),0 2px 6px rgba(80,93,109,.12);
  filter:saturate(.78) contrast(.96) sepia(.08);transform:rotate(-1.2deg)!important;transition:transform .8s var(--ease-out)}
.card:nth-child(2) .print img{transform:rotate(1.4deg)!important}
@media (max-width:760px){ .print__in{inset:16px} }


/* ═══════════════ MOTION LANGUAGE · shared across pages ═══════════════
   Ambient: .drift (slow float/tilt, per-element --dur --dx --dy --dr --dl) and .glisten (a sheen that crosses now and then, --gl --gd).
   Both animate the independent translate/rotate properties, so they sit on top of GSAP's transforms without fighting them.
   Entrances: .reveal (rise), .reveal--side, .reveal--tilt, .reveal--mask; --d staggers. Hover: .ripple-line (script.js) for rows and figures. */
.drift{animation:drift var(--dur,9s) ease-in-out var(--dl,0s) infinite alternate}
@keyframes drift{from{translate:0 0;rotate:0deg}to{translate:var(--dx,0px) var(--dy,-7px);rotate:var(--dr,.5deg)}}
.glisten{position:relative;overflow:hidden}
.glisten::after{content:"";position:absolute;inset:-10%;pointer-events:none;z-index:2;background:linear-gradient(105deg,transparent 38%,rgba(249,251,248,.28) 50%,transparent 62%);translate:-130% 0;animation:glisten var(--gl,12s) cubic-bezier(.45,0,.2,1) var(--gd,2s) infinite}
@keyframes glisten{0%,86%{translate:-130% 0}100%{translate:130% 0}}
.reveal--side{--rv:translateX(-46px)}
.reveal--tilt{--rv:translateY(46px) rotate(-2deg);transform-origin:0 100%}
.reveal--mask{opacity:1;transform:none;clip-path:inset(0 0 100% 0)}
.reveal--mask.in{clip-path:inset(0);animation:rvMask 1.4s var(--ease-out) var(--d,0s) backwards}
@keyframes rvMask{from{clip-path:inset(0 0 100% 0)}}
.ripple-line{position:absolute;left:0;bottom:-11px;width:100%;height:22px;overflow:visible;pointer-events:none}
.ripple-line path{fill:none;stroke:currentColor;stroke-width:1;opacity:.35;vector-effect:non-scaling-stroke;transition:opacity .5s}

/* nav: a small wave runs under the link and the letters lift in turn (the proposal sites' menu ripple) */
.nav__links a .ch,.menu__inner a .ch{display:inline-block;white-space:pre}
.nav__links a.rippling .ch,.menu__inner a.rippling .ch{animation:letterWave .62s cubic-bezier(.3,.6,.3,1) both;animation-delay:calc(var(--i) * 32ms)}
@keyframes letterWave{0%{transform:translateY(0)}35%{transform:translateY(-4px)}70%{transform:translateY(1px)}100%{transform:translateY(0)}}
.nav__links a::after{height:6px;bottom:-4px;background:none;transform:none;clip-path:inset(0 100% 0 0);transition:clip-path .55s var(--ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6'%3E%3Cpath d='M0 3 Q6 0 12 3 T24 3' fill='none' stroke='black' stroke-width='1.1'/%3E%3C/svg%3E") 0 0/24px 6px repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6'%3E%3Cpath d='M0 3 Q6 0 12 3 T24 3' fill='none' stroke='black' stroke-width='1.1'/%3E%3C/svg%3E") 0 0/24px 6px repeat-x;
  background-color:currentColor}
.nav__links a:hover::after,.nav__links a.is-active::after{clip-path:inset(0);transform:none;animation:waveRun 1.2s linear infinite}
@keyframes waveRun{to{-webkit-mask-position:24px 0;mask-position:24px 0}}

/* page change: one wave covers the page and lifts off the next (script.js draws it) */
.tide{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:9000;pointer-events:none;display:none}
.tide.on{display:block;pointer-events:auto}
.tide__body{fill:var(--ocean)}
.tide__sheen{fill:url(#tideSheen)}
.tide__foam,.tide__tail{fill:none;stroke:var(--cream);stroke-width:2.4;stroke-linecap:round}
.tide__foam2{fill:none;stroke:var(--sky);stroke-width:1.2}
html.tide-cover::before{content:"";position:fixed;inset:0;z-index:9001;background:var(--ocean);animation:tideFailsafe 0s 2.6s forwards}
@keyframes tideFailsafe{to{visibility:hidden}}
.hero__anchor{position:absolute;left:0;bottom:0;width:1px;height:100vh;height:100svh;pointer-events:none;scroll-margin-top:0}

/* brand intro: digits roll up on reels; on hover the figure lifts onto a light-blue panel */
.odo{display:inline-block;height:1em;line-height:1;overflow:hidden;vertical-align:top}
.odo__reel{display:flex;flex-direction:column;transition:transform 1.9s cubic-bezier(.16,1,.3,1)}
.odo__reel>span{display:block;height:1em;line-height:1}
.odo__reel:not(.is-rolled){transition-duration:0s}
.odo__sep{display:inline-block;line-height:1;vertical-align:top}
.stats strong{line-height:1}
.stat{position:relative;padding:18px 18px 22px;margin:-18px -18px 0;cursor:default;transition:translate .6s var(--ease-out),background-color .5s}
.stat::before{content:"";position:absolute;inset:0;background:var(--sky);opacity:0;transform:scaleY(.6);transform-origin:bottom;transition:opacity .45s,transform .6s var(--ease-out);z-index:-1}
.stats{isolation:isolate}
.stat:hover{translate:0 -8px}
.stat:hover::before{opacity:1;transform:none}
.stat strong{display:inline-flex;transition:letter-spacing .6s var(--ease-out)}
.stat:hover strong{letter-spacing:.02em}
.studio__fig img,.studio__print img{transition:transform 1.6s var(--ease-out),scale 1.1s var(--ease-out),filter .8s}
.studio__fig:hover img,.studio__print:hover img{scale:1.06;filter:saturate(1.08) brightness(1.03)}
.studio__print{transition:rotate .8s var(--ease-out)}

/* services: the ripple runs along the row from where the cursor touched it; a few rows catch the light now and then */
.service{border-bottom:0}
.service__ripple{color:var(--cream);bottom:-11px}
.service::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s;
  background:radial-gradient(420px 120px at var(--mx,50%) 100%,rgba(206,219,232,.14),transparent 70%)}
.service:hover::after{opacity:1}
.service:hover .service__ripple path{opacity:.75}
.service--glint .service__name{background:linear-gradient(105deg,currentColor 40%,var(--sky) 50%,currentColor 60%) 0 0/250% 100% no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:glint 13s ease-in-out var(--gd,2s) infinite;background-position:100% 0;background-color:transparent}
.service--glint .service__name{background-image:linear-gradient(105deg,var(--cream) 40%,var(--cream) 50%,var(--cream) 60%)}
@keyframes glint{0%,84%{background-position:100% 0}100%{background-position:0 0}}
.service__arrow{animation:none}
.service:hover .service__arrow{animation:arrowBob 1.1s var(--ease-out)}
@keyframes arrowBob{40%{translate:3px -3px}}

/* Every wave has a shape */
.process__h .line-mask{display:block}
.step{position:relative;transition:translate .6s var(--ease-out)}
.step__n{display:inline-block;transition:color .5s,scale .6s var(--ease-out);transform-origin:0 70%}
.step h3{transition:letter-spacing .7s var(--ease-out)}
.step::after{content:"";position:absolute;left:0;right:20px;bottom:18px;height:6px;background-color:currentColor;opacity:.5;clip-path:inset(0 100% 0 0);transition:clip-path .7s var(--ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6'%3E%3Cpath d='M0 3 Q6 0 12 3 T24 3' fill='none' stroke='black' stroke-width='1.1'/%3E%3C/svg%3E") 0 0/24px 6px repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6'%3E%3Cpath d='M0 3 Q6 0 12 3 T24 3' fill='none' stroke='black' stroke-width='1.1'/%3E%3C/svg%3E") 0 0/24px 6px repeat-x}
.step:hover{translate:0 -6px}
.step:hover .step__n{scale:1.35;color:var(--ocean)}
.step:hover h3{letter-spacing:.1em}
.step:hover::after{clip-path:inset(0);animation:waveRun 1.2s linear infinite}
.step .step__n{animation:drift 7s ease-in-out infinite alternate;--dy:-4px;--dr:0deg}
.step:nth-child(2) .step__n{animation-delay:-2s}.step:nth-child(3) .step__n{animation-delay:-4s}.step:nth-child(4) .step__n{animation-delay:-1s}.step:nth-child(5) .step__n{animation-delay:-5s}

/* press + blog: one editorial area; Press and Blog are labelled so coverage never reads as our own article */
.editorial .news__head{align-items:end}
.news__h{font-family:var(--font-display);font-weight:400;font-size:clamp(35.2px,4.8vw,76.8px);line-height:1;letter-spacing:-.02em}
.news__h em{font-style:italic}
.news__key{font-size:1.05rem;opacity:.82;margin-left:auto;margin-right:3vw;display:flex;flex-direction:column;gap:8px}
.editorial .post{background:var(--cream);color:var(--ink);transition:transform .7s var(--ease-out),box-shadow .7s var(--ease-out),opacity 1.2s var(--ease-out),rotate .7s var(--ease-out)}
.editorial .post:hover{transform:translateY(-10px);rotate:-.6deg;background:var(--cream);box-shadow:0 30px 60px -30px rgba(80,93,109,.35)}
.editorial .post.reveal--tilt.in:hover{transform:translateY(-10px)}
.editorial .post__img img{transition:transform 1.6s var(--ease-out),scale 1s var(--ease-out)}
.editorial .post:hover .post__img img{scale:1.06}
.editorial .post__img{position:relative}
.editorial .post__img::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(249,251,248,.32) 50%,transparent 62%);translate:-130% 0;pointer-events:none}
.editorial .post:hover .post__img::after{transition:translate 1.1s var(--ease);translate:130% 0}
.post__outlet{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-display);font-size:clamp(24px,2.4vw,40px);background:var(--ink);color:var(--cream)}
.post__outlet img{max-width:60%;max-height:40%;object-fit:contain;filter:invert(1)}
.post__more{padding:0 24px;font-size:1rem;display:flex;align-items:center;gap:10px}
@media (max-width:760px){ .editorial .news__head{align-items:flex-start} .news__key{margin:0} }
@media (prefers-reduced-motion:reduce){
  .drift,.step .step__n,.service--glint .service__name{animation:none}
  .glisten::after{display:none}
  .reveal--side,.reveal--tilt{--rv:none}
  .reveal--mask{clip-path:none}
}


/* ═══════════════ BRAND TYPE · the brand fonts have one weight and no italic: never fake either ═══════════════ */
html:not(.type-classic) *{font-style:normal!important}
html:not(.type-classic) :is(h1,h2,h3,h4,h5,h6,b,strong,th){font-weight:400}

/* Ride the Wave: solid cream letters; every few seconds each letter lights up in turn, left to right, with a glow that
   follows its own shape (no band, no box). The line masks let the glow breathe only once the reveal has finished */
.hero__title .lt{display:inline-block;animation:letterLight 4.2s ease-in-out infinite;animation-delay:calc(1.4s + var(--li) * 70ms)}
@keyframes letterLight{
  0%,100%{color:var(--cream);text-shadow:0 0 0 rgba(255,255,255,0)}
  4%{color:#fff;text-shadow:0 0 10px rgba(255,255,255,.95),0 0 26px rgba(255,255,255,.55),0 0 52px rgba(249,251,248,.3)}
  11%,99%{color:var(--cream);text-shadow:0 0 0 rgba(255,255,255,0)}}
.hero.revealed .hero__title .line-mask,.hero:not(.has-intro) .hero__title .line-mask{animation:maskBreathe 0s 1.6s forwards}
@keyframes maskBreathe{to{overflow:visible}}
@media (prefers-reduced-motion:reduce){.hero__title .lt{animation:none}}

/* Every wave has a shape: a wave rides in across the screen from left to right, anchored to the scroll; its crest curls and foams as it travels */
.process{padding-bottom:0}
.process__swell{display:block;width:100%;height:clamp(150px,17vw,280px);margin-top:4vh;overflow:visible}
.process__swell .sw-back{fill:var(--sky);opacity:.45}
.process__swell .sw-fill{fill:var(--sky)}
.process__swell .sw-line{fill:none;stroke:var(--navy);stroke-width:1.2;vector-effect:non-scaling-stroke}
.process__swell .sw-foam{fill:none;stroke:var(--cream);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}

/* the opening is full screen: no menu (or quiz pill) until Ride the Wave arrives */
html.has-intro-page:not(.hero-revealed) .nav,html.has-intro-page:not(.hero-revealed) .bvq-pill{opacity:0;visibility:hidden;pointer-events:none}
html.has-intro-page .nav{transition:opacity .8s var(--ease-out),visibility 0s,padding .5s var(--ease)}
html.has-intro-page:not(.hero-revealed) .nav{transition:opacity .4s,visibility 0s .4s}
/* the palm flies up under the menu bar on its way to the corner: no frosted (blurring) layer until it has landed */
html.has-intro-page:not(.palm-landed) .nav::before,html.has-intro-page:not(.palm-landed) .nav::after{opacity:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ═══ Idle life: headings whose letters light up in turn every few seconds, even when nobody is scrolling ═══
   data-glimmer="glow": light text on dark (a soft glow that follows each letter) · "tint": navy text on light (a light-blue flash) */
[data-glimmer] .lt{display:inline-block;animation:var(--gname,letterLight) var(--gcyc,6s) ease-in-out infinite;animation-delay:calc(var(--gstart,1.6s) + var(--li) * 65ms)}
[data-glimmer="tint"]{--gname:letterTint}
@keyframes letterTint{0%,100%{color:var(--navy)}4%{color:var(--sky)}10%,99%{color:var(--navy)}}
[data-glimmer="glow"] .lt{--gname:letterSoft}
@keyframes letterSoft{0%,100%{text-shadow:0 0 0 rgba(255,255,255,0)}4%{color:#fff;text-shadow:0 0 9px rgba(255,255,255,.85),0 0 22px rgba(255,255,255,.4)}10%,99%{text-shadow:0 0 0 rgba(255,255,255,0)}}
@media (prefers-reduced-motion:reduce){[data-glimmer] .lt{animation:none}}

/* Every wave has a shape: a sailboat crossing the water at the foot of the section as you scroll */
.process__sea{display:block;width:100%;height:clamp(120px,12vw,190px);margin-top:4vh;overflow:visible}
.sea__water{fill:var(--sky)}
.sea__line{fill:none;stroke:var(--navy);stroke-width:1.1;vector-effect:non-scaling-stroke}
.sea__wake{fill:none;stroke:var(--cream);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.boat__hull{fill:var(--navy)}
.boat__mast{fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round}
.boat__main{fill:var(--cream);stroke:var(--navy);stroke-width:1.2;stroke-linejoin:round}
.boat__jib{fill:var(--sand-bb);stroke:var(--navy);stroke-width:1.2;stroke-linejoin:round}
.boat__flag{fill:var(--navy)}

.lw{display:inline-block;white-space:nowrap}

/* photo cards shaped to their photo, so a square or wide shot shows whole instead of being cropped to a portrait */
.postcard--square{aspect-ratio:1}
.postcard--land{aspect-ratio:3/2}
@media (max-width:760px){
  .postcard--square,.postcard--land{height:auto;align-self:center;width:min(84vw,64vh)}
  .postcard--square{aspect-ratio:1}
  .postcard--land{aspect-ratio:3/2;width:min(88vw,90vh)}
}
.postcard--p45{aspect-ratio:4/5}
@media (max-width:760px){ .postcard--p45{aspect-ratio:4/5} }
/* video guard: no long-press save sheet or selection on the films (script.js blocks the right-click menu) */
video,canvas,.intro,.hero__media,.dcard__vid{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* "Scroll to begin" takes part in the page only while it shows (its letters still fade out before it goes) */
.intro__scroll.on{visibility:visible;transition:none}