:root{
  --navy:#06263F; --navy-deep:#041A2C; --navy-mid:#0E3A5C;
  --accent:#EF7622; --accent-lt:#FA9C2B;
  --light:#F1F5F9; --paper:#F8FAFC; --white:#fff;
  --ink:#10202E; --ink-soft:#35495C; --muted:#6E8093; --rule:#D6E0EA;
  /* Type (8 Oct 2026, his pick "D"): Cabinet Grotesk for everything, Boska italic for the
     accent phrase. Cormorant stays only in the wordmark, to match the logo. */
  --display:"Cabinet Grotesk",system-ui,"Segoe UI",sans-serif;
  --italic:"Boska",Georgia,serif;
  --brand:"Cormorant Garamond",Georgia,serif;
  --serif:var(--display);
  --sans:var(--display);
  --ease:cubic-bezier(.22,.8,.24,1);
  --gutter:clamp(16px,5vw,64px);
  --head-h:72px;
}
@font-face{font-family:"Cabinet Grotesk"; src:url(fonts/CabinetGrotesk-Regular.woff2) format("woff2"); font-weight:400; font-display:swap;}
@font-face{font-family:"Cabinet Grotesk"; src:url(fonts/CabinetGrotesk-Medium.woff2) format("woff2"); font-weight:500; font-display:swap;}
@font-face{font-family:"Cabinet Grotesk"; src:url(fonts/CabinetGrotesk-Bold.woff2) format("woff2"); font-weight:700; font-display:swap;}
@font-face{font-family:"Cabinet Grotesk"; src:url(fonts/CabinetGrotesk-Extrabold.woff2) format("woff2"); font-weight:800; font-display:swap;}
@font-face{font-family:"Boska"; src:url(fonts/Boska-LightItalic.woff2) format("woff2"); font-weight:300; font-style:italic; font-display:swap;}
@font-face{font-family:"Boska"; src:url(fonts/Boska-Italic.woff2) format("woff2"); font-weight:400; font-style:italic; font-display:swap;}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:var(--head-h);}
body{background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px;
     line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
img{display:block; max-width:100%;}
a{color:inherit;}
button{font:inherit; cursor:pointer;}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
.skip{position:absolute; left:-999px; top:8px; z-index:100; background:var(--accent); color:#fff;
      padding:8px 14px; border-radius:4px;}
.skip:focus{left:8px;}
:focus-visible{outline:2px solid var(--accent-lt); outline-offset:3px;}

.wrap{max-width:1200px; margin:0 auto; padding:0 var(--gutter);}
.section{padding:clamp(72px,11vw,140px) 0; position:relative;}
.paper{background:var(--paper);}
.navy{background:var(--navy); color:var(--light);}

/* ---------- type ---------- */
.eyebrow{font-size:13px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
         color:var(--accent); margin-bottom:18px;}
.eyebrow.on-dark{color:var(--accent-lt);}
h1,h2,h3{font-family:var(--display); font-weight:800; line-height:1.02; letter-spacing:-.035em;}
h2{font-size:clamp(34px,4.8vw,60px); color:var(--navy); max-width:20ch;}
/* the accent phrase: thin Boska italic against the heavy grotesk (big/small, bold/thin) */
h2 em, h1 em, h3 em, .closer em, blockquote em, .field-close em{font-family:var(--italic); font-style:italic;
  font-weight:300; letter-spacing:-.01em; color:var(--accent);}
h2.on-dark{color:var(--light);}
.navy h2 em{color:var(--accent-lt);}
h3{font-size:26px; color:var(--navy); font-weight:700; letter-spacing:-.02em; line-height:1.12;}
.lead{font-size:clamp(19px,1.7vw,22px); line-height:1.5; color:var(--ink); margin-top:22px; max-width:34ch;}
.lead.on-dark{color:rgba(241,245,249,.86);}
.lead.narrow{max-width:58ch;}
p{color:var(--ink-soft);}
.navy p{color:rgba(241,245,249,.78);}
.sublabel{display:block; font-size:12px; letter-spacing:.2em; text-transform:uppercase;
          color:var(--accent); font-weight:700; margin-bottom:14px;}
.navy .sublabel{color:var(--accent-lt);}
.icon{width:30px; height:30px; stroke:var(--accent); stroke-width:1.6; fill:none;
      stroke-linecap:round; stroke-linejoin:round; flex:none;}
.navy .icon{stroke:var(--accent-lt);}

/* ---------- buttons: the arrow slides on hover ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; background:var(--accent); color:#fff;
     text-decoration:none; font-weight:600; font-size:16px; letter-spacing:.02em;
     padding:15px 28px; border-radius:999px; border:1px solid var(--accent);
     box-shadow:0 8px 22px -12px rgba(239,118,34,.7);
     transition:background .3s var(--ease), color .3s, border-color .3s, transform .3s var(--ease), box-shadow .3s var(--ease);}
.btn .ico{width:18px; height:18px; stroke:currentColor; stroke-width:2; fill:none;
          stroke-linecap:round; stroke-linejoin:round; transition:transform .35s var(--ease);}
.btn:hover{background:#d9661a; border-color:#d9661a; transform:translateY(-2px);
           box-shadow:0 14px 28px -14px rgba(239,118,34,.8);}
.btn:hover .ico{transform:translateX(5px);}
.btn:active{transform:translateY(0);}
.btn-ghost{background:transparent; border-color:rgba(241,245,249,.45); color:var(--light); box-shadow:none;}
.btn-ghost:hover{background:rgba(241,245,249,.08); border-color:var(--light); box-shadow:none;}
.btn-outline{background:transparent; border-color:var(--navy); color:var(--navy); box-shadow:none;}
.btn-outline:hover{background:var(--navy); border-color:var(--navy); color:#fff; box-shadow:none;}
.btn-sm{padding:9px 18px; font-size:14px; box-shadow:none;}
.btn-wide{width:100%; justify-content:center; padding:17px;}

/* ---------- header ---------- */
.site-head{position:fixed; inset:0 0 auto 0; height:var(--head-h); z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:0 var(--gutter); color:var(--light);
  transition:background .4s var(--ease), box-shadow .4s, transform .45s var(--ease);}
.site-head.solid{background:rgba(6,38,63,.94); backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(241,245,249,.08);}
.site-head.hide{transform:translateY(-100%);}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
.brand img{width:34px; height:auto;}
.brand-word{font-family:var(--brand); font-weight:300; font-size:21px; letter-spacing:.14em; white-space:nowrap;}
.brand-word i{font-style:italic; color:var(--accent-lt);}
.brand-word.big{font-size:28px; color:var(--light);}
/* the menu: plain words that roll up into orange on hover; the brand's arrow flies under the link
   you point at and rests under the section you are reading (main.js moves it) */
.nav{display:flex; align-items:center; gap:clamp(18px,2.4vw,38px);}
.nav-links{position:relative; display:flex; align-items:center; gap:clamp(18px,2.2vw,34px);}
.roll{display:inline-block; overflow:hidden; height:1.3em; line-height:1.3em; vertical-align:top;}
.roll i{display:block; font-style:normal; text-shadow:0 1.3em 0 var(--accent-lt);
  transition:transform .5s cubic-bezier(.7,0,.2,1);}
.nav-links a{position:relative; text-decoration:none; font-size:15px; font-weight:500; letter-spacing:.005em;
  padding:8px 0; color:rgba(241,245,249,.82); white-space:nowrap; transition:color .25s;}
.nav-links a:hover .roll i, .nav-cta:hover .roll i{transform:translateY(-1.3em);}
.nav-links a.on{color:#fff;}
/* the arrow: an orange shaft with a head, the same arrow that runs through the F */
.nav-arrow{position:absolute; left:0; bottom:-3px; height:2px; width:0; opacity:0; background:var(--accent);
  border-radius:2px; transition:transform .55s cubic-bezier(.7,0,.2,1), width .55s cubic-bezier(.7,0,.2,1), opacity .3s;}
.nav-arrow::after{content:""; position:absolute; right:-2px; top:50%; width:8px; height:8px;
  border-top:2px solid var(--accent); border-right:2px solid var(--accent); transform:translateY(-50%) rotate(45deg);}
/* "Talk to us": white pill, an orange chip carrying the arrow that turns on hover */
.nav-cta{display:inline-flex; align-items:center; gap:12px; padding:6px 6px 6px 20px; border-radius:999px;
  background:var(--light); color:var(--navy); text-decoration:none; font-size:15px; font-weight:700;
  transition:background .3s var(--ease), transform .3s var(--ease);}
.nav-cta .roll i{text-shadow:0 1.3em 0 var(--accent);}
.nav-cta .chip{width:34px; height:34px; border-radius:50%; background:var(--accent); display:grid; place-items:center;
  transition:transform .45s var(--ease);}
.nav-cta .chip .ico{width:16px; height:16px; stroke:#fff; stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round;
  transform:rotate(-45deg); transition:transform .45s var(--ease);}
.nav-cta:hover{transform:translateY(-1px);}
.nav-cta:hover .chip .ico{transform:rotate(0);}
.menu-btn{display:none; background:none; border:0; width:44px; height:44px; position:relative;}
.menu-btn span:not(.sr){position:absolute; left:10px; right:10px; height:2px; background:var(--light);
  transition:transform .35s var(--ease), top .35s var(--ease);}
.menu-btn span:nth-child(1){top:17px;} .menu-btn span:nth-child(2){top:25px;}
.menu-btn[aria-expanded="true"] span:nth-child(1){top:21px; transform:rotate(45deg);}
.menu-btn[aria-expanded="true"] span:nth-child(2){top:21px; transform:rotate(-45deg);}

/* the rendered 3D arrow that crosses the screen when you jump to a section */
.arrow-fly{position:fixed; left:0; top:46%; z-index:60; pointer-events:none; display:flex; align-items:center;
  width:min(46vw, 560px); transform:translateX(-120%); opacity:0;}
.arrow-fly img{width:100%; height:auto; filter:drop-shadow(0 10px 18px rgba(6,38,63,.35));}
.arrow-fly .trail{position:absolute; right:92%; top:50%; height:3px; width:60vw; transform:translateY(-50%);
  background:linear-gradient(90deg, transparent, rgba(250,156,43,.65)); border-radius:3px;}
.arrow-fly.fly{animation:arrowFly 1s cubic-bezier(.55,.05,.35,1) forwards;}
@keyframes arrowFly{0%{opacity:1; transform:translateX(-120%);} 88%{opacity:1;} 100%{opacity:0; transform:translateX(110vw);}}

/* 3D icons (short rendered clips that turn into place) */
/* the rendered icon fills about half its square, so the clip is shown large and pulled in by negative margins */
.icon3d{display:block; width:124px; height:124px; object-fit:cover; margin:-30px 0 -22px -30px; background:transparent;}
.icon3d-sm{width:72px; height:72px; margin:-14px -6px -14px -12px;}

/* advert vs search 3D scene */
.vs-scene{position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#EDF1F6; margin-bottom:20px;}
.vs-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .45s var(--ease);}
.vs-video.on{opacity:1;}

/* ---------- hero ---------- */
/* Three photo panels fill the screen. They drop in one by one (.in on the hero, set by main.js once
   the photos load), then the words slide up line by line, then the buttons pop. */
/* Leaving the hero: the hero and "What we do" are both sticky in .reveal, which is one screen
   taller than "What we do". For that first screen of scrolling the browser holds both still, while
   the three columns swipe up at staggered speeds and uncover the page beneath; after that the page
   scrolls on normally. The swipe runs on the scroll timeline where supported (smooth, off the main
   thread), else main.js drives the same values. */
.reveal{position:relative;}
.reveal-room{height:70svh;}           /* the screen of scroll the swipe uses (padding would not count) */
.hero{position:sticky; top:0; z-index:3; height:100svh; min-height:600px; background:var(--navy-deep);
  display:flex; align-items:flex-end; color:var(--light);}
.reveal > #what{position:sticky; top:0; z-index:1; margin-top:-100svh; scroll-margin-top:-70svh;}
.hero.lifting{background:transparent;}
.hero.gone{visibility:hidden;}
.panels{position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr);}
.col{position:relative; overflow:hidden; background:var(--navy-deep); will-change:transform;}
@supports (animation-timeline: scroll()){
  .js-tl .hero{animation:heroLift linear both; animation-timeline:scroll(root); animation-range:0 44svh;}
  .js-tl .col{animation:colLift both; animation-timing-function:cubic-bezier(.45,0,.55,1); animation-timeline:scroll(root);}
  .js-tl .col:nth-child(1){animation-range:0 30svh;}
  .js-tl .col:nth-child(2){animation-range:3svh 37svh;}
  .js-tl .col:nth-child(3){animation-range:6svh 44svh;}
  .js-tl .hero-copy{animation:copyLift linear both; animation-timeline:scroll(root); animation-range:0 22svh;}
}
@keyframes colLift{to{transform:translateY(-106%);}}
@keyframes copyLift{to{opacity:0; transform:translateY(-140px);}}
@keyframes heroLift{0%{background-color:var(--navy-deep);} 0.5%{background-color:transparent;}
  99%{visibility:visible;} 100%{background-color:transparent; visibility:hidden;}}
.col + .col{box-shadow:inset 3px 0 0 var(--navy-deep);}
.panel{position:absolute; inset:0; overflow:hidden; transform:translateY(-104%);
  transition:transform 1.05s cubic-bezier(.7,0,.2,1);}
.col:nth-child(2) .panel{transition-delay:.14s;}
.col:nth-child(3) .panel{transition-delay:.28s;}
.hero.in .panel{transform:none;}
/* the photos in a column take turns: the next one wipes up from the bottom over the last */
.panel img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.12);
  clip-path:inset(100% 0 0 0); transition:transform 7s linear;}
.panel img.on{clip-path:inset(0 0 0 0); transform:scale(1.02);
  transition:clip-path 1.1s cubic-bezier(.7,0,.2,1), transform 7s linear;}
.panel img.top{z-index:1;}
.col + .col .panel{left:3px;}
/* navy veil: dark at the foot where the words sit, so they always read */
.col::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(180deg, rgba(4,26,44,.35) 0%, rgba(4,26,44,.12) 26%, rgba(4,26,44,.55) 50%, rgba(4,26,44,.9) 70%, rgba(4,26,44,.97) 100%);}
.hero-copy{position:relative; z-index:3; width:100%; padding-bottom:clamp(80px,11vh,120px);}
.hero h1{font-size:clamp(36px,4.5vw,68px); color:#fff; margin-top:6px;}
@media (min-width:1000px){ .hero h1 .line{white-space:nowrap;} }   /* two clean lines on wide screens */
.hero h1 .line{display:block; overflow:hidden; padding-bottom:.06em;}
.hero h1 .line > span{display:inline-block; transform:translateY(105%); transition:transform 1s var(--ease);}
.hero h1 .line:nth-child(1) > span{transition-delay:1.15s;}
.hero h1 .line:nth-child(2) > span{transition-delay:1.27s;}
.hero.in h1 .line > span{transform:none;}
.hero h1 em{color:var(--accent-lt);}
.hero .eyebrow{overflow:hidden; margin-bottom:10px;}
.hero .eyebrow span{display:inline-block; transform:translateY(110%); transition:transform .8s var(--ease) 1s;}
.hero.in .eyebrow span{transform:none;}
.hero-sub{font-size:clamp(17px,1.4vw,20px); line-height:1.55; color:rgba(241,245,249,.82); max-width:56ch; margin-top:22px;
  opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease) 1.45s, transform .9s var(--ease) 1.45s;}
.hero.in .hero-sub{opacity:1; transform:none;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px;}
.hero-actions .btn{opacity:0; transform:scale(.7); transition:opacity .35s ease, transform .6s cubic-bezier(.34,1.56,.64,1),
  background .3s var(--ease), color .3s, border-color .3s, box-shadow .3s var(--ease);}
.hero.in .hero-actions .btn{opacity:1; transform:none;}
.hero.in .hero-actions .btn:nth-child(1){transition-delay:1.75s, 1.75s, 0s, 0s, 0s, 0s;}
.hero.in .hero-actions .btn:nth-child(2){transition-delay:1.87s, 1.87s, 0s, 0s, 0s, 0s;}
.hero.in .hero-actions .btn:hover{transform:translateY(-2px);}
.hero .btn-ghost{background:rgba(241,245,249,.06); border-color:rgba(241,245,249,.5); color:var(--light);
  backdrop-filter:blur(6px);}
@media (max-width:700px){
  .col::after{background:linear-gradient(180deg, rgba(4,26,44,.3) 0%, rgba(4,26,44,.2) 18%,
    rgba(4,26,44,.8) 38%, rgba(4,26,44,.95) 60%, rgba(4,26,44,.98) 100%);}
  .hero-copy{padding-bottom:110px;}
}
@media (prefers-reduced-motion: reduce){
  .panel, .panel img, .hero h1 .line > span, .hero .eyebrow span, .hero-sub, .hero-actions .btn{
    transition:none !important; transform:none !important; opacity:1 !important;}
}
.white{background:var(--white);}
.aim{display:flex; align-items:center; justify-content:center; gap:16px; font-size:13px;
  letter-spacing:.36em; text-transform:uppercase; color:var(--accent-lt); font-weight:600;}
.aim span{height:1px; width:44px; background:rgba(241,245,249,.4);}
.aim.small{justify-content:flex-start; margin-top:8px; font-size:11px;}
.aim.small span{width:24px;}

/* ---------- reveal on scroll ---------- */
[data-reveal]{opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);}
[data-reveal].in{opacity:1; transform:none;}
.photo{position:relative; overflow:hidden; background:var(--navy);}
.photo img{width:100%; height:100%; object-fit:cover;
  filter:grayscale(.7) contrast(1.05) saturate(.85); transform:scale(1.08);
  transition:transform 1.6s var(--ease), filter .8s;}
.photo.in img{transform:scale(1);}
.photo:hover img{filter:grayscale(.15) contrast(1.03);}
/* a photo slides up into its frame when you reach it, settling from a slight zoom */
.photo.wipe{opacity:1; transform:none; background:transparent;}
.photo.wipe img{transform:translateY(101%) scale(1.18);
  transition:transform 1.25s cubic-bezier(.7,0,.2,1), filter .8s;}
.photo.wipe.in img{transform:translateY(0) scale(1);}
/* the "What you can count on" cards slide up one after another */
.pillar[data-reveal]{transform:translateY(110px); transition:opacity .7s ease, transform 1s cubic-bezier(.2,.8,.2,1),
  border-color .3s, box-shadow .3s;}
.pillar[data-reveal]:nth-child(2){transition-delay:.12s;}
.pillar[data-reveal]:nth-child(3){transition-delay:.24s;}
.pillar[data-reveal]:nth-child(4){transition-delay:.36s;}
.pillar[data-reveal].in{transform:none;}
.pillar[data-reveal].in:hover{transform:translateY(-6px); transition-delay:0s;}

/* ---------- what we do ---------- */
/* the left column stretches to the right one; the photo grows to fill it, so both end on one line */
.what-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(32px,6vw,90px); align-items:stretch;}
.what-grid > div:first-child{display:flex; flex-direction:column;}
.what-grid .photo{flex:1 1 auto; min-height:300px; margin-top:40px;}
.what-grid .photo img{position:absolute; inset:0;}
.what-text{padding-top:12px;}
.search-portrait .search-headline{top:15%;font-size:clamp(60px,8.8vw,130px)!important;line-height:.96!important;letter-spacing:-.055em;}
.search-headline span{display:block;}
.search-portrait .search-headline{top:-4%;font-size:clamp(58px,7.5vw,110px)!important;}
.search-portrait .search-person{bottom:-100px;}
#what .what-grid{display:block;}
#what .what-grid>.what-text{display:grid;grid-template-columns:1fr 1fr;column-gap:60px;margin-top:24px;}
#what .what-grid>.what-text>.versus{grid-column:1/-1;}
#what .what-grid>.what-text>p{max-width:none;}
#what .what-grid>div:first-child>.lead{max-width:none;width:100%;}
.trio-col.label-out figcaption{opacity:0;transform:translateY(14px);}
@media(max-width:700px){.search-portrait .search-headline{top:1%;font-size:clamp(38px,8.7vw,62px)!important;}.search-portrait .search-person{bottom:-25px;}#what .what-grid>.what-text{display:block;}}
.search-portrait .search-person{width:min(110%,1050px);height:92%;}
.contact-depth-type .talk-left,.contact-depth-type .talk-right{display:block;opacity:0;transition:transform 1.25s cubic-bezier(.16,1,.3,1),opacity .6s ease;}
.talk-left{transform:translateX(-130px);}.talk-right{transform:translateX(130px);transition-delay:.12s!important;}
.talk-in .talk-left,.talk-in .talk-right{transform:none;opacity:1;}
.outcomes.editorial-outcomes{display:block;margin-top:90px;}
.editorial-outcomes>h3{font-size:clamp(44px,6.4vw,92px);line-height:1.02;letter-spacing:-.045em;color:var(--navy);margin-bottom:35px;max-width:22ch;}
.handover-film{width:100%;aspect-ratio:1.9;overflow:hidden;background:var(--navy);}
.handover-film video{display:block;width:100%;height:100%;object-fit:cover;}
.outcome-editorial{display:grid;grid-template-columns:1fr 1fr;gap:38px 65px;padding-top:45px;}
.outcome-editorial article{border:0;padding:0;background:none;}
.outcome-editorial h4{font-size:clamp(25px,2.2vw,32px);line-height:1.14;color:var(--navy);margin:0 0 13px;max-width:25ch;}
.outcome-editorial p{font-size:17px;line-height:1.55;max-width:46ch;}
@media(max-width:700px){.search-portrait .search-headline{font-size:clamp(40px,8.7vw,62px)!important;top:24%;}.search-portrait .search-person{height:80%;width:120%;}.outcome-editorial{grid-template-columns:1fr;gap:28px;}.editorial-outcomes>h3{font-size:44px;}.handover-film{aspect-ratio:1.4;}}
@media(prefers-reduced-motion:reduce){.contact-depth-type .talk-left,.contact-depth-type .talk-right{opacity:1;transform:none;transition:none;}}
.search-portrait{position:relative;isolation:isolate;height:clamp(570px,76svh,840px);background:white;margin-bottom:48px;}
.search-edge{position:absolute;top:22px;left:0;z-index:3;}
.search-headline{position:absolute;top:15%;left:0;width:100%;max-width:none!important;text-align:center;font-size:clamp(40px,5.8vw,88px)!important;line-height:1.02!important;letter-spacing:-.045em;z-index:1;color:var(--navy);transition:color .25s ease;}
.search-portrait:hover .search-headline{color:var(--accent);}
.search-person{position:absolute;z-index:2;bottom:0;left:50%;transform:translateX(-50%);height:90%;width:min(100%,920px);object-fit:contain;object-position:center bottom;pointer-events:none;border:0;box-shadow:none;}
.search-portrait::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:75px;z-index:3;background:linear-gradient(transparent,white);pointer-events:none;}
.outcomes{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:clamp(25px,5vw,70px);margin-top:85px;}
.outcome-art{position:relative;isolation:isolate;min-height:530px;}
.outcome-question{position:absolute;z-index:0;left:28%;top:-12%;font-family:var(--serif);font-size:470px;line-height:1;color:rgba(239,118,34,.16);}
.outcome-art h3{position:relative;z-index:1;font-size:clamp(32px,3.8vw,56px);line-height:1.06;letter-spacing:-.025em;color:var(--navy);padding-top:28px;}
.outcome-art img{position:absolute;z-index:2;bottom:0;width:100%;height:66%;object-fit:contain;pointer-events:none;}
.outcome-list{padding:0;list-style:none;}
.outcome-list li{display:flex;gap:22px;padding:20px 0;border-bottom:1px solid var(--rule);}
.outcome-list li>span{font-size:14px;color:var(--accent);padding-top:4px;}
.outcome-list h4{font-size:22px;line-height:1.2;margin-bottom:7px;color:var(--navy);}
.outcome-list p{font-size:16px;line-height:1.5;color:var(--ink-soft);margin:0;}
.contact-portrait{position:relative;isolation:isolate;height:760px;margin:32px 0 28px;background:transparent;}
.contact-depth-type{position:absolute;z-index:1;left:0;top:4%;font-family:var(--sans);font-weight:800;letter-spacing:-.055em;font-size:clamp(76px,10vw,145px);line-height:.85;color:var(--navy);}
.contact-depth-type em{color:var(--accent);font-family:var(--serif);font-weight:400;}
.contact-portrait img{position:absolute;inset:0;z-index:2;height:100%;width:100%;object-fit:contain;object-position:center bottom;pointer-events:none;}
@media(max-width:700px){.search-portrait{height:580px;}.search-headline{top:12%;font-size:42px!important;}.search-person{height:78%;width:120%;max-width:none;}.outcomes{grid-template-columns:1fr;gap:12px;}.outcome-art{min-height:430px;}.outcome-question{font-size:380px;}.contact-portrait{height:640px;}.contact-depth-type{font-size:112px;}}
.what-text > p{font-size:18px; margin-bottom:18px; max-width:52ch;}

.versus-q{font-family:var(--serif); font-size:23px; line-height:1.25; color:var(--navy); margin-bottom:16px;}
.versus{margin-top:34px; background:var(--white); border:1px solid var(--rule); border-top:3px solid var(--navy); padding:26px;}
.switch{position:relative; display:inline-grid; grid-template-columns:1fr 1fr; background:var(--light);
  border-radius:40px; padding:4px; margin-bottom:22px;}
.switch button{position:relative; z-index:1; border:0; background:none; padding:9px 22px; font-weight:600;
  font-size:15px; color:var(--muted); border-radius:40px; transition:color .35s;}
.switch button[aria-selected="true"]{color:#fff;}
.switch-pill{position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px);
  background:var(--navy); border-radius:40px; transition:transform .45s var(--ease), background .45s;}
.switch[data-mode="search"] .switch-pill{transform:translateX(100%); background:var(--accent);}
.versus-panel{display:grid;}
.vs{grid-area:1/1; transition:opacity .45s var(--ease), transform .45s var(--ease);}
.versus-panel[data-mode="search"] .vs-advert, .versus-panel[data-mode="advert"] .vs-search{opacity:0; transform:translateY(10px); pointer-events:none; visibility:hidden;}
.vs h3{font-size:28px; margin-bottom:12px;}
.vs-search h3 span{color:var(--accent);}
.vs-advert h3 span{color:var(--muted);}
.vs ul{list-style:none;}
.vs li{position:relative; padding:7px 0 7px 26px; border-top:1px solid var(--rule); color:var(--ink-soft);}
.vs li::before{content:""; position:absolute; left:2px; top:17px; width:12px; height:2px; background:var(--accent);}
.vs-advert li::before{background:var(--muted);}
.versus-note{margin-top:16px; font-family:var(--italic); font-weight:300; font-size:24px; color:var(--navy); font-style:italic;}

.pillars-title{font-size:clamp(28px,3vw,38px); margin-top:clamp(64px,9vw,110px);}
.pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:28px;}
.pillar{background:var(--white); border:1px solid var(--rule); padding:30px 28px; position:relative; overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), opacity .9s var(--ease);}
.pillar::after{content:""; position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease);}
.pillar:hover{transform:translateY(-6px); box-shadow:0 18px 40px -20px rgba(6,38,63,.35);}
.pillar:hover::after{transform:scaleX(1);}
.pillar h3{margin:16px 0 8px; font-size:25px; line-height:1.15;}
.pillar p{font-size:16px;}

/* ---------- fields ---------- */
.fields-head{display:grid; grid-template-columns:1fr minmax(0, 1fr); gap:clamp(24px,4vw,64px); align-items:center;}
/* three photos, one per field: they slide up together when reached, then each column takes turns
   through its own photos (the new one wipes up over the old, like the hero) */
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; align-self:stretch; min-height:420px;}
.trio-col{position:relative; margin:0; overflow:hidden; border-radius:4px; background:var(--navy-deep);}
.trio-panel{position:absolute; inset:0; overflow:hidden; transform:translateY(105%);
  transition:transform 1.1s cubic-bezier(.7,0,.2,1);}
.trio.in .trio-panel{transform:none;}
.cycle img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.1);
  clip-path:inset(100% 0 0 0); transition:transform 7s linear;}
.cycle img.on{clip-path:inset(0 0 0 0); transform:scale(1.02);
  transition:clip-path 1.1s cubic-bezier(.7,0,.2,1), transform 7s linear;}
.cycle img.top{z-index:1;}
.trio-col::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(4,26,44,0) 55%, rgba(4,26,44,.85) 100%);}
.trio-col figcaption{position:absolute; left:14px; right:14px; bottom:14px; z-index:3; color:#fff;
  font-size:14px; font-weight:700; letter-spacing:.01em; line-height:1.25;
  opacity:0; transform:translateY(12px); transition:opacity .6s ease 1s, transform .6s var(--ease) 1s;}
.trio.in figcaption{opacity:1; transform:none;}
.tabs{position:relative; display:grid; grid-template-columns:repeat(4,1fr); margin-top:56px;
  border-bottom:1px solid rgba(241,245,249,.18);}
.tabs button{display:flex; align-items:center; gap:14px; background:none; border:0; color:rgba(241,245,249,.6);
  text-align:left; padding:20px 18px 22px 0; transition:color .3s;}
.tabs button:hover{color:var(--light);}
.tabs button[aria-selected="true"]{color:var(--light);}
.tabs .icon3d{opacity:.55; transition:opacity .3s;}
.tabs button[aria-selected="true"] .icon3d, .tabs button:hover .icon3d{opacity:1;}
.tabs .n{font-family:var(--serif); font-size:30px; color:var(--accent-lt); line-height:1;}
.tabs .t{font-family:var(--serif); font-size:23px; line-height:1.15;}
.tabs button:not(:has(.icon3d)){padding-left:4px;}
.tabs button:not(:has(.icon3d)) .t{font-family:var(--sans); font-size:15px; line-height:1.25;}
.tab-arrow{position:absolute; bottom:-2px; left:0; height:3px; background:var(--accent);
  transition:transform .6s var(--ease), width .6s var(--ease);}
.tab-arrow::after{content:""; position:absolute; right:-12px; top:-5.5px; border:7px solid transparent;
  border-left:12px solid var(--accent);}

.field{display:grid; grid-template-columns:.9fr 1.3fr; gap:clamp(28px,4vw,56px); padding-top:44px;}
.field[hidden]{display:none;}
.field-photo{position:relative; overflow:hidden; min-height:420px; background:var(--navy-deep);}
.field-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(.75) contrast(1.05) brightness(.9);}
.field-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(6,38,63,.55));}
.field.show .field-photo{animation:wipeIn 1s var(--ease) both;}
.field.show .field-body > *{animation:rise .8s var(--ease) both;}
.field.show .field-body > :nth-child(2){animation-delay:.1s;}
.field.show .field-body > :nth-child(3){animation-delay:.2s;}
@keyframes wipeIn{from{clip-path:inset(0 100% 0 0);} to{clip-path:inset(0 0 0 0);}}
@keyframes rise{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;}}
.field-intro{font-size:19px; color:rgba(241,245,249,.9); max-width:60ch;}
.field-cols{display:grid; grid-template-columns:1fr 1fr; gap:36px; margin-top:30px;}
.roles{list-style:none;}
.roles li{padding:9px 0; border-bottom:1px solid rgba(241,245,249,.13); font-size:16px; color:rgba(241,245,249,.82);
  transition:color .25s, padding-left .35s var(--ease);}
.roles li:hover{color:var(--light); padding-left:8px;}
details{border-bottom:1px solid rgba(241,245,249,.13);}
summary{list-style:none; cursor:pointer; font-family:var(--serif); font-size:21px; color:var(--light);
  padding:12px 30px 12px 0; position:relative; line-height:1.2;}
summary::-webkit-details-marker{display:none;}
summary::after{content:""; position:absolute; right:4px; top:20px; width:9px; height:9px;
  border-right:2px solid var(--accent-lt); border-bottom:2px solid var(--accent-lt);
  transform:rotate(45deg); transition:transform .35s var(--ease);}
details[open] summary::after{transform:rotate(225deg); top:24px;}
details p{font-size:16px; padding:0 0 16px;}
details[open] p{animation:rise .5s var(--ease) both;}
.field-close{margin-top:30px; padding-top:18px; border-top:2px solid var(--accent); font-family:var(--serif);
  font-size:23px; line-height:1.35; color:var(--light) !important; max-width:46ch;}
blockquote{margin-top:30px; padding-top:20px; border-top:2px solid var(--accent); font-family:var(--serif);
  font-size:24px; line-height:1.35; color:var(--light); max-width:46ch;}
.navy blockquote em, .closer.on-dark em{color:var(--accent-lt);}
.closer{font-family:var(--serif); font-size:clamp(22px,2.4vw,30px); line-height:1.35; margin-top:72px; max-width:44ch;}
.closer.on-dark{color:var(--light);}

/* ---------- method ---------- */
.method-head{display:grid; grid-template-columns:1fr minmax(0, 1fr); gap:clamp(24px,4vw,64px); align-items:center;}
/* the stairs clip must look like part of the page, not a pasted box: multiply drops its own
   near-white backdrop into the page colour, and all four edges fade so the shadow trails off */
/* the mask isolates the clip, so it blends with its own page-coloured backing, not the page itself */
.stairs{position:relative; aspect-ratio:960/750; background:var(--paper);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 12%, #000 74%, transparent 98%),
                     linear-gradient(180deg, transparent 0%, #000 7%, #000 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg, transparent 0%, #000 12%, #000 74%, transparent 98%),
                     linear-gradient(180deg, transparent 0%, #000 7%, #000 100%);
          mask-composite:intersect;}
.stairs-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply;
  filter:brightness(1.035);}   /* its backdrop (#f6fafb) becomes pure white, which multiply makes invisible */
.steps{position:relative; margin-top:64px;}
.steps ol{list-style:none; display:grid; grid-template-columns:repeat(6,1fr); gap:22px;}
.track{position:absolute; left:0; right:0; top:19px; height:2px; background:var(--rule);}
.track-fill{position:absolute; inset:0; background:var(--accent); transform:scaleX(0); transform-origin:left;}
.track-arrow{position:absolute; top:-6px; left:0; border:7px solid transparent; border-left:13px solid var(--accent);
  opacity:0;}
.steps.run .track-fill{transition:transform 2.6s cubic-bezier(.5,0,.2,1); transform:scaleX(1);}
.steps.run .track-arrow{animation:trackArrow 2.6s cubic-bezier(.5,0,.2,1) forwards;}
@keyframes trackArrow{0%{left:0; opacity:1;} 100%{left:calc(100% - 13px); opacity:1;}}
.step{position:relative;}
.step .num{position:relative; z-index:1; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--paper); border:2px solid var(--rule); color:var(--muted); font-weight:700; font-size:16px;
  transition:background .4s, border-color .4s, color .4s, transform .4s var(--ease);}
.step.lit .num{background:var(--navy); border-color:var(--navy); color:#fff; transform:scale(1.08);}
.step:nth-child(even).lit .num{background:var(--accent); border-color:var(--accent);}
.step .icon{display:block; margin:22px 0 10px; width:28px; height:28px;}
.step h3{font-size:22px; line-height:1.15; margin-bottom:8px;}
.step p{font-size:15.5px; line-height:1.5;}
.step > :not(.num){opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.step.lit > :not(.num){opacity:1; transform:none;}

.deliv{margin-top:72px; background:var(--white); border:1px solid var(--rule); border-left:4px solid var(--navy); padding:30px 32px;}
.deliv ul{list-style:none; display:grid; grid-template-columns:repeat(5,1fr); gap:22px;}
.deliv li{border-top:2px solid var(--accent); padding-top:12px; font-size:16px; color:var(--ink-soft); line-height:1.4;}
.promises{display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:64px;}
.deliv.delivery-scene{position:relative;isolation:isolate;overflow:hidden;min-height:570px;padding:clamp(28px,6vw,72px);border:0;border-radius:22px;background:var(--navy);color:#fff;box-shadow:0 30px 65px rgba(6,38,63,.18);}
.delivery-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.68;z-index:-3;}
.delivery-mist{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(6,38,63,.95),rgba(6,38,63,.74) 48%,rgba(6,38,63,.12)),linear-gradient(0deg,rgba(6,38,63,.68),transparent 50%);}
.delivery-scene::after{content:'';position:absolute;right:-12%;bottom:-30%;width:65%;height:65%;border-radius:50%;background:rgba(241,245,249,.13);filter:blur(55px);z-index:-1;pointer-events:none;}
.delivery-copy{max-width:720px;position:relative;}
.delivery-copy h3{font-size:clamp(32px,4vw,56px);line-height:1.1;color:white;margin:16px 0 28px;}
.delivery-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px;}
.delivery-tabs button,.delivery-play{font:inherit;color:white;border:1px solid rgba(255,255,255,.4);background:rgba(6,38,63,.4);border-radius:999px;padding:12px 20px;cursor:pointer;}
.delivery-tabs button[aria-selected=true]{background:var(--accent);border-color:var(--accent);color:var(--navy);}
.delivery-tabs button:focus-visible,.delivery-play:focus-visible{outline:3px solid white;outline-offset:4px;}
#delivery-panel{min-height:115px;max-width:53ch;}
#delivery-panel h4{font-size:22px;line-height:1.3;margin-bottom:10px;}
#delivery-panel p{color:rgba(255,255,255,.88);font-size:17px;}
.delivery-play{margin-top:22px;font-size:14px;padding:9px 16px;}
.deliv.gift-delivery{padding:clamp(26px,5vw,65px);border:0;border-radius:18px;background:linear-gradient(135deg,#f2f3f5,#dce2e8);overflow:hidden;box-shadow:0 25px 60px rgba(6,38,63,.12);}
.gift-delivery h3{position:relative;z-index:2;font-size:clamp(32px,4.4vw,62px);line-height:1.06;color:var(--navy);max-width:24ch;margin-bottom:24px;}
.gift-stage{position:relative;min-height:660px;}
.gift-film{position:absolute;width:78%;height:100%;inset:0 auto auto -14%;object-fit:contain;mix-blend-mode:multiply;pointer-events:none;}
.gift-benefits{position:relative;margin-left:46%;padding-top:24px;display:grid;gap:13px;}
.gift-capsule{display:flex;align-items:center;gap:16px;padding:19px 24px;border:1px solid rgba(255,255,255,.75);border-radius:45px;background:rgba(255,255,255,.84);box-shadow:0 10px 25px rgba(6,38,63,.09);opacity:0;transform:translate(-110px,145px) scale(.75);transition:opacity .65s ease,transform 1.2s cubic-bezier(.16,1,.3,1);}
.gift-capsule>span{flex:none;color:var(--accent);font-size:14px;font-weight:700;}
.gift-capsule strong{display:block;font-size:18px;color:var(--navy);margin-bottom:5px;}
.gift-capsule p{font-size:14px;line-height:1.45;color:var(--ink-soft);margin:0;}
.gift-open .gift-capsule{opacity:1;transform:none;}
.gift-open .gift-capsule>div{animation:giftFloat 5s ease-in-out 1.4s infinite alternate;}
@keyframes giftFloat{from{transform:translateY(0);}to{transform:translateY(-3px);}}
.gift-capsule:nth-child(2){transition-delay:.18s;}.gift-capsule:nth-child(3){transition-delay:.36s;}.gift-capsule:nth-child(4){transition-delay:.54s;}.gift-capsule:nth-child(5){transition-delay:.72s;}
.portrait-depth{position:relative;isolation:isolate;overflow:hidden;border-radius:10px;}
.portrait-depth>img:first-child{position:relative;z-index:0;filter:blur(20px) saturate(.6);width:100%;opacity:.24;}
.portrait-depth{background:var(--navy);}
.portrait-depth .portrait-type{position:absolute;z-index:1;top:4%;left:5%;font-family:var(--sans);font-size:clamp(38px,5vw,76px);font-weight:800;line-height:.95;color:#fff;letter-spacing:-.045em;text-shadow:0 2px 20px rgba(6,38,63,.25);}
.portrait-type em{font-family:var(--serif);font-weight:400;}
.portrait-depth img.portrait-cutout{position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:none;border-radius:0;box-shadow:none;}
@media(max-width:700px){.gift-stage{min-height:900px;}.gift-film{width:100%;height:360px;left:0;top:-20px;}.gift-benefits{margin-left:0;padding-top:330px;}.gift-capsule{padding:16px 20px;border-radius:28px;}.gift-capsule strong{font-size:16px;}.gift-delivery h3{font-size:34px;}}
@media(prefers-reduced-motion:reduce){.gift-capsule{opacity:1;transform:none;transition:none;}}
.gift-stage{min-height:650px;perspective:1000px;}
.gift-film{width:75%;height:100%;left:12.5%;mix-blend-mode:multiply;}
.gift-benefits{position:absolute;inset:0;margin:0;padding:0;display:block;pointer-events:none;}
.gift-capsule{position:absolute;width:235px;min-height:88px;border-radius:28px;font:inherit;cursor:pointer;pointer-events:none;user-select:none;transform:translate(var(--origin-x,0px),var(--origin-y,150px)) scale(.4);opacity:0;}
.gift-capsule:nth-child(1){left:2%;top:13%;--origin-x:270px;--origin-y:250px;}
.gift-capsule:nth-child(2){right:2%;top:9%;--origin-x:-270px;--origin-y:270px;}
.gift-capsule:nth-child(3){left:0;top:48%;--origin-x:280px;--origin-y:60px;}
.gift-capsule:nth-child(4){right:0;top:45%;--origin-x:-280px;--origin-y:60px;}
.gift-capsule:nth-child(5){left:calc(50% - 117px);top:81%;--origin-y:-200px;}
.gift-open .gift-capsule{pointer-events:auto;transform:rotateY(-6deg) rotateX(4deg);}
.gift-open .gift-capsule:nth-child(even){transform:rotateY(6deg) rotateX(4deg);}
.gift-capsule.selected{background:var(--navy);border-color:var(--accent);box-shadow:0 18px 32px rgba(6,38,63,.24);}
.gift-capsule.selected strong{color:white;}
.gift-capsule:focus-visible{outline:3px solid var(--accent);outline-offset:4px;}
.gift-bubble{position:absolute;z-index:5;width:min(290px,calc(100% - 20px));padding:20px;border-radius:18px;background:white;color:var(--navy);box-shadow:0 18px 40px rgba(6,38,63,.2);}
.gift-bubble::before{content:'';position:absolute;top:-8px;left:24px;width:17px;height:17px;background:white;transform:rotate(45deg);}
.gift-bubble p{margin:0;font-size:16px;line-height:1.5;}
.gift-bubble.appear{animation:bubbleDraw .35s cubic-bezier(.16,1,.3,1) both;transform-origin:25px 0;}
@keyframes bubbleDraw{from{opacity:0;transform:scale(.65) translateY(-5px);clip-path:inset(0 100% 100% 0 round 18px);}to{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 18px);}}
@media(max-width:700px){.gift-stage{min-height:820px;}.gift-film{top:100px;left:-10%;width:120%;height:430px;}.gift-capsule{width:46%;min-height:94px;padding:13px 12px;gap:7px;}.gift-capsule strong{font-size:14px;}.gift-capsule:nth-child(1){left:0;top:0;}.gift-capsule:nth-child(2){right:0;top:0;}.gift-capsule:nth-child(3){left:0;top:58%;}.gift-capsule:nth-child(4){right:0;top:58%;}.gift-capsule:nth-child(5){left:27%;top:78%;}}
.photo:has(.photo-companion){overflow:visible;margin-bottom:60px;}
.photo img:first-child{border-radius:10px;box-shadow:0 18px 40px rgba(6,38,63,.14);}
.photo img.photo-companion{position:absolute;width:42%;height:43%;right:-4%;bottom:-12%;object-fit:cover;border:7px solid var(--paper);border-radius:12px;box-shadow:0 20px 40px rgba(6,38,63,.22);}
.hero .panel::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(6,38,63,.56),transparent 55%),linear-gradient(90deg,rgba(6,38,63,.14),transparent);}
.hero-copy{filter:drop-shadow(0 5px 15px rgba(0,0,0,.3));}
@media(max-width:600px){.delivery-scene .delivery-mist{background:rgba(6,38,63,.8);}.photo img.photo-companion{right:0;} .delivery-tabs button{padding:10px 14px;font-size:14px;}}
.promises > div{border-left:2px solid var(--accent); padding-left:22px;}
.promises h3{font-size:28px; margin-bottom:8px;}

/* ---------- timeline ---------- */
/* "How long it takes": a photo behind the navy, faded but clearly there */
#timeline{position:relative; overflow:hidden; isolation:isolate;}
#timeline::before{content:""; position:absolute; inset:0; z-index:-2;
  background:url(img/timeline-bg.jpg) center 40%/cover no-repeat; filter:grayscale(.35);}
#timeline::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(6,38,63,.80) 0%, rgba(6,38,63,.66) 45%, rgba(6,38,63,.86) 70%, rgba(6,38,63,.94) 100%),
             linear-gradient(180deg, rgba(6,38,63,.55) 0%, rgba(6,38,63,0) 25%, rgba(6,38,63,0) 75%, rgba(6,38,63,.6) 100%);}
.time-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(32px,6vw,96px); align-items:start;}
.time-grid h2{max-width:14ch;}
.weeks{position:relative; padding-left:34px;}
.weeks-line{position:absolute; left:6px; top:8px; bottom:8px; width:2px; background:rgba(241,245,249,.16);}
.weeks-line span{position:absolute; inset:0; background:var(--accent-lt); transform-origin:top; transform:scaleY(var(--p,0));}
.week{position:relative; padding:0 0 38px;}
.week:last-child{padding-bottom:0;}
.week::before{content:""; position:absolute; left:-34px; top:6px; width:14px; height:14px; border-radius:50%;
  background:var(--navy); border:2px solid var(--accent-lt);}
.wk{display:block; font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-lt); margin-bottom:6px;}
.week p{font-size:19px; color:rgba(241,245,249,.9); max-width:44ch;}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(32px,6vw,90px); align-items:start;}
.photo.tall{aspect-ratio:4/3; margin-top:36px;}
.phone-line{margin-top:22px; font-size:17px;}
.phone-line a{font-family:var(--serif); font-size:26px; color:var(--navy); text-decoration:none; margin-left:6px;
  border-bottom:1px solid var(--accent); transition:color .3s;}
.phone-line a:hover{color:var(--accent);}
.brief{background:var(--white); border:1px solid var(--rule); border-top:4px solid var(--accent); padding:clamp(22px,3vw,40px); position:relative;}
.hp{position:absolute; left:-9999px;}
fieldset{border:0; margin-bottom:22px;}
legend{font-family:var(--serif); font-size:24px; color:var(--navy); margin-bottom:12px;}
.chips{display:flex; flex-wrap:wrap; gap:10px;}
.chips label{position:relative;}
.chips input{position:absolute; opacity:0; inset:0; cursor:pointer;}
.chips span{display:block; padding:10px 16px; border:1px solid var(--rule); border-radius:40px; font-size:15px;
  color:var(--ink-soft); transition:all .3s var(--ease);}
.chips label:hover span{border-color:var(--navy);}
.chips input:checked + span{background:var(--navy); border-color:var(--navy); color:#fff;}
.chips input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.fld{display:block; margin-bottom:16px;}
.fld > span{display:block; font-size:14px; font-weight:600; color:var(--ink); margin-bottom:6px;}
.fld small{font-weight:400; color:var(--muted);}
.fld input, .fld textarea{width:100%; font:inherit; font-size:16px; color:var(--ink); background:var(--paper);
  border:1px solid var(--rule); border-radius:2px; padding:12px 14px; transition:border-color .3s, box-shadow .3s;}
.fld input:focus, .fld textarea:focus{outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(239,118,34,.18);}
.fld textarea{resize:vertical;}
.form-note{font-size:14px; color:var(--muted); margin-top:12px; text-align:center;}
.sent{position:absolute; inset:0; background:var(--white); display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:32px; gap:10px; animation:rise .7s var(--ease) both;}
.sent[hidden]{display:none;}
.sent h3{font-size:32px;}

/* ---------- footer ---------- */
.site-foot{background:var(--navy-deep); color:var(--light); padding:64px 0 40px;}
.foot-grid{display:grid; grid-template-columns:auto 1fr; gap:24px 48px; align-items:center;}
.foot-brand{display:flex; align-items:center; gap:18px;}
.foot-nav{display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:flex-end;}
.foot-nav a{text-decoration:none; color:rgba(241,245,249,.75); font-size:15px; transition:color .25s;}
.foot-nav a:hover{color:var(--accent-lt);}
.foot-contact{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px 32px; font-family:var(--serif); font-size:22px;}
.foot-contact a{color:var(--light); text-decoration:none; border-bottom:1px solid rgba(250,156,43,.5); transition:color .25s;}
.foot-contact a:hover{color:var(--accent-lt);}
.phone-line + .phone-line{margin-top:6px;}
.foot-small{grid-column:1/-1; border-top:1px solid rgba(241,245,249,.12); padding-top:22px; font-size:13px;
  color:rgba(241,245,249,.5); line-height:1.7;}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .pillars{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:1000px){
  .steps ol{grid-template-columns:repeat(3,1fr); row-gap:40px;}
  .track{display:none;}
  .deliv ul{grid-template-columns:repeat(2,1fr);}
  .field{grid-template-columns:1fr;}
  .fields-head, .method-head{grid-template-columns:1fr;}
  .stairs{width:min(100%, 560px); margin:8px auto 0;}
  .trio{min-height:0; aspect-ratio:3/2.2; gap:6px;}
  .trio-col figcaption{font-size:12px; left:8px; right:8px; bottom:8px;}
  .field-photo{min-height:300px;}
}
@media (max-width:860px){
  :root{--head-h:64px;}
  .menu-btn{display:block;}
  .nav{position:fixed; inset:var(--head-h) 0 auto 0; flex-direction:column; align-items:flex-start; gap:4px;
    background:var(--navy); padding:12px var(--gutter) 28px; border-top:1px solid rgba(241,245,249,.1);
    transform:translateY(-12px); opacity:0; visibility:hidden; transition:all .35s var(--ease);}
  .nav.open{transform:none; opacity:1; visibility:visible;}
  .nav-links{flex-direction:column; align-items:stretch; width:100%; gap:0;}
  .nav-arrow{display:none;}
  .nav-links a{font-size:24px; font-weight:700; letter-spacing:-.02em; padding:14px 0;
    border-bottom:1px solid rgba(241,245,249,.08);}
  .nav-cta{margin-top:18px;}
  .what-grid, .time-grid, .contact-grid{grid-template-columns:1fr;}
  .what-grid .photo{flex:none; aspect-ratio:4/3; min-height:0;}
  .pillars, .promises{grid-template-columns:1fr;}
  .tabs{grid-template-columns:1fr; border-bottom:0;}
  .tabs button{border-bottom:1px solid rgba(241,245,249,.14); padding:16px 0;}
  .tab-arrow{display:none;}
  .tabs button[aria-selected="true"]{box-shadow:inset 3px 0 0 var(--accent); padding-left:14px;}
  .field-cols{grid-template-columns:1fr;}
  .br-wide{display:none;}
  .foot-grid{grid-template-columns:1fr;}
  .foot-nav{justify-content:flex-start;}
}
@media (max-width:560px){
  body{font-size:16px;}
  /* phones: the logo sits at the top and the words flow underneath it */
  .pillars{grid-template-columns:1fr;}
  .brand-word{font-size:17px; letter-spacing:.1em;}
  .steps ol{grid-template-columns:1fr 1fr;}
  .deliv ul, .row2{grid-template-columns:1fr;}
  .hero-actions .btn{width:100%; justify-content:center;}
  .versus{padding:20px;}
}

/* people who ask for less motion get the still page */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{animation:none !important; transition:none !important;}
  [data-reveal], .step > :not(.num){opacity:1 !important; transform:none !important;}
  .arrow-fly{display:none;}
  .reveal-room{display:none;}
  .hero, .reveal > #what{position:relative; margin-top:0;}
  .photo.wipe img{clip-path:none;}
  .photo img{transform:none;}
  .track-fill{transform:scaleX(1);}
}
#what .search-portrait{height:clamp(620px,78svh,800px);overflow:hidden;margin-bottom:36px;padding-top:70px;}
#what .search-edge{top:8px;left:0;z-index:4;margin:0;}
#what .search-headline{top:80px;font-size:clamp(58px,7.2vw,104px)!important;line-height:.96!important;margin:0;z-index:1;}
#what .search-person{bottom:0;height:auto;width:min(78%,850px);max-height:calc(100% - 210px);object-fit:contain;transform:translateX(-50%);z-index:2;}
#what .search-portrait::after{height:42px;bottom:0;}
.portrait-motion #what .search-person{opacity:0;transform:translate(-50%,65%);transition:transform 1.5s cubic-bezier(.16,1,.3,1),opacity .8s ease;will-change:transform;}
.portrait-motion #what .portrait-in .search-person{opacity:1;transform:translate(-50%,0);}
@media(prefers-reduced-motion:reduce){.portrait-motion #what .search-person{opacity:1;transform:translate(-50%,0);transition:none;}}
.trio.in .trio-col.label-out figcaption{opacity:0;transform:translateY(14px);transition-delay:0s;}
@media(max-width:700px){#what .search-portrait{height:560px;}#what .search-headline{top:70px;font-size:clamp(35px,8vw,56px)!important;}#what .search-person{width:115%;max-width:none;max-height:350px;bottom:0;}}
#what .what-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,6vw,90px);align-items:start;}
#what .what-grid>.what-text{display:block;margin-top:0;padding-top:0;}
#what .what-grid>.what-text>p{max-width:52ch;}
#what .what-grid>div:first-child>.lead{max-width:46ch;}
#what .what-grid .versus{width:100%;max-width:560px;}
#what .versus{position:relative;overflow:visible;}
.miniature-seat{position:absolute;right:18px;bottom:-67px;width:100px;height:150px;z-index:5;pointer-events:none;opacity:0;transform:translateY(-140px);}
.miniature-seat img{display:block;width:100%;height:100%;}
.pillar:has(.miniature-seat){overflow:visible;}
.pillar .miniature-seat{top:-83px;bottom:auto;right:12px;}
.miniature-landed .miniature-seat{opacity:1;animation:miniatureDrop .8s cubic-bezier(.32,0,.7,1) both;}
.miniature-impact{animation:tileWeight .48s ease-out;}
@keyframes miniatureDrop{0%{opacity:0;transform:translateY(-140px);}15%{opacity:1;}78%{transform:translateY(3px);}90%{transform:translateY(-3px);}100%{opacity:1;transform:translateY(0);}}
@keyframes tileWeight{0%{transform:translateY(0);}25%{transform:translateY(5px) rotate(.25deg);}55%{transform:translateY(-2px) rotate(-.12deg);}80%{transform:translateY(1px);}100%{transform:none;}}
@media(prefers-reduced-motion:reduce){.miniature-seat{opacity:1;transform:none;}}
#what .search-portrait{height:700px;}
#what .search-headline{top:66px;font-size:clamp(48px,6.1vw,88px)!important;line-height:.98!important;}
#what .search-person{height:410px;max-height:none;width:615px;max-width:75%;bottom:0;object-fit:contain;z-index:3;}
.search-side{position:absolute;height:350px;width:340px;max-width:34%;object-fit:contain;object-position:center bottom;bottom:8px;z-index:2;pointer-events:none;transform-origin:center bottom;}
.search-side-left{left:10%;transform:rotate(-12deg);}
.search-side-right{right:10%;transform:rotate(12deg);}
.portrait-motion .search-side{opacity:0;transition:transform 1.5s cubic-bezier(.16,1,.3,1),opacity .9s ease;}
.portrait-motion .search-side-left{transform:translate(80px,80%) rotate(-2deg);transition-delay:.15s;}
.portrait-motion .search-side-right{transform:translate(-80px,80%) rotate(2deg);transition-delay:.3s;}
.portrait-motion .portrait-in .search-side-left{transform:rotate(-12deg);opacity:1;}
.portrait-motion .portrait-in .search-side-right{transform:rotate(12deg);opacity:1;}
@media(max-width:700px){#what .what-grid{grid-template-columns:1fr;gap:25px;}#what .search-portrait{height:520px;}#what .search-headline{top:70px;font-size:clamp(30px,6.8vw,48px)!important;}#what .search-person{height:285px;width:428px;max-width:88%;}.search-side{height:235px;width:210px;max-width:42%;}.search-side-left{left:0;}.search-side-right{right:0;}}
@media(prefers-reduced-motion:reduce){.portrait-motion .search-side{opacity:1;transition:none;}.portrait-motion .search-side-left{transform:rotate(-12deg);}.portrait-motion .search-side-right{transform:rotate(12deg);}}
#what .search-portrait{margin-bottom:clamp(64px,7vw,100px);}
#what .what-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:start;}
#what .what-grid>div:first-child{grid-column:1;grid-row:1;}
#what .what-grid>.what-text{display:contents;}
#what .what-grid>.what-text>p{grid-column:1;margin:0;}
#what .what-grid>.what-text>p:first-child{grid-row:2;}
#what .what-grid>.what-text>p:nth-child(2){grid-row:3;}
#what .what-grid>.what-text>.search-update{grid-row:4;}
#what .what-grid>.what-text>.versus{grid-column:2;grid-row:1/5;margin-top:0;align-self:start;}
#what .what-grid{row-gap:18px;}
#what .what-grid>div:first-child>.lead,#what .what-grid>.what-text>p{font-family:var(--sans);font-size:18px;font-weight:500;line-height:1.55;max-width:none;color:var(--ink-soft);margin:0;}
@media(max-width:700px){#what .what-grid{display:block;}#what .what-grid>div:first-child>.lead,#what .what-grid>.what-text>p{margin-bottom:18px;}#what .what-grid>.what-text>.versus{margin-top:26px;}}