/* Website Wizz Pro — dark editorial gallery.
   Ink / bone / stone, one gold accent. Cormorant Garamond (display, italic),
   Jost (body), Space Mono (labels). */

:root{
  --ink:#0a0a09;
  --bone:#f0ead9;
  --stone:#8a8375;
  --gold:#b49b68;
  --bronze:#87672f;                 /* gold that holds contrast on cream */
  --line:rgba(240,234,217,.14);
  --line-ink:rgba(10,10,9,.16);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --pad:clamp(1.25rem,5vw,6rem);
  --maxw:80rem;
  --dock:0px;
}

/* ── base ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--sans);font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);line-height:1.65;
  overflow-x:hidden;padding-bottom:var(--dock);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.svc :focus-visible{outline-color:var(--bronze)}
section[id]{scroll-margin-top:4.5rem}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:-999px;top:.75rem;z-index:300;background:var(--gold);color:var(--ink);font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;padding:.7rem 1.1rem;border-radius:4px}
.skip:focus{left:.75rem}

.micro{display:block;font-family:var(--mono);font-weight:400;font-size:.6875rem;letter-spacing:.25em;text-transform:uppercase;color:var(--stone)}
.dot{color:var(--gold)}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}

/* ── preloader ──────────────────────────────────────────── */
/* White, not ink. The bloom opens on a bright field and the site drops to
   black behind it — the contrast is the whole point of the entrance. */
.pre{
  position:fixed;inset:0;z-index:200;background:#faf8f4;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.3rem;
  animation:preAway .7s ease 2.2s forwards;  /* safety net if JS never arrives */
}
#bloom{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Pushed below the bloom. Sitting them on top of it buried the flower and
   made both hard to read — same mistake as the hero headline over the W. */
.pre__mark,.pre__line{position:relative;z-index:1;margin-top:auto}
.pre__mark{margin-top:52vh}
.pre__line{margin-top:0}
.pre__mark{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(3rem,10vw,5.5rem);line-height:1;color:#14130f;
  opacity:0;animation:preMark 1.6s ease 2.6s forwards;
}
.pre__w{color:#9a7b2e}
@keyframes preMark{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pre__line{
  margin:0;font-family:var(--mono);font-size:.6875rem;letter-spacing:.25em;
  text-transform:uppercase;color:#8a8578;opacity:0;animation:preMark 1.4s ease 3.1s forwards;
}
/* Fixed width, no width animation. Animating the width made the dots grow and
   shrink, and since the line is centred the whole sentence shuffled sideways
   every 1.1s — it read as the text shaking. The reserved space keeps the
   sentence anchored; only the dots' own opacity moves now. */
.pre__dots{
  display:inline-block;overflow:hidden;vertical-align:bottom;white-space:nowrap;
  width:2.8em;text-align:left;
}
.pre__dots{animation:dotsFade 1.4s ease-in-out infinite}
@keyframes dotsFade{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes preAway{to{opacity:0;visibility:hidden}}
/* Frame capture: the safety-net fade would blank the preloader mid-run. */
html.capturing .pre{animation:none !important}
/* Mid-shatter: the plate's white and its text live on the canvas snapshot now,
   so the real element must go transparent and the DOM wordmark must vanish,
   or they'd sit on top of the falling shards. */
.pre--breaking{background:transparent !important}
.pre--breaking .pre__mark,.pre--breaking .pre__line{opacity:0 !important;transition:opacity .18s linear}



/* ── nav ────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem var(--pad);
  color:var(--bone);pointer-events:none;
}
/* The bar used to be mix-blend-mode:difference with nothing behind it, so the
   services ticker scrolling underneath inverted straight through the logo and
   the burger — two lines of type occupying the same pixels. A soft plate that
   fades to nothing separates the bar from whatever passes below it, and reads
   as deliberate rather than as a fix. */
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(10,10,9,.82) 0%, rgba(10,10,9,.55) 55%, rgba(10,10,9,0) 100%);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.nav a,.nav button{pointer-events:auto}
.nav__mark{display:flex;align-items:baseline;gap:.65rem}
.nav__w{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.8rem;line-height:1}
.nav__name{font-family:var(--mono);font-size:.6875rem;letter-spacing:.28em;text-transform:uppercase}
@media (max-width:460px){.nav__name{display:none}}
.nav__burger{
  appearance:none;-webkit-appearance:none;background:none;border:0;cursor:pointer;
  width:44px;height:44px;position:relative;color:inherit;
}
.nav__burger i{position:absolute;left:10px;right:10px;height:1.5px;background:currentColor;transition:transform .35s cubic-bezier(.22,1,.36,1),top .35s cubic-bezier(.22,1,.36,1)}
.nav__burger i:first-of-type{top:18px}
.nav__burger i:last-of-type{top:25px}
.nav__burger.is-open i:first-of-type{top:21px;transform:rotate(45deg)}
.nav__burger.is-open i:last-of-type{top:21px;transform:rotate(-45deg)}

/* ── menu overlay ───────────────────────────────────────── */
.menu{position:fixed;inset:0;z-index:110;background:var(--ink);display:flex;flex-direction:column;justify-content:safe center;padding:6rem var(--pad) 2.5rem;overflow-y:auto}
.menu[hidden]{display:none}
body.menu-open{overflow:hidden}
.menu__list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.menu__list a{
  display:flex;align-items:baseline;gap:1.2rem;
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(2.4rem,9vw,5.2rem);line-height:1.12;color:var(--bone);
  transition:color .3s,padding-left .3s cubic-bezier(.22,1,.36,1);
}
.menu__list a:hover{color:var(--gold);padding-left:.4em}
.menu__n{font-family:var(--mono);font-style:normal;font-size:.6875rem;letter-spacing:.25em;color:var(--stone)}
.menu__foot{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-top:3rem;border-top:1px solid var(--line);padding-top:1.4rem}
.menu__tel{font-family:var(--serif);font-style:italic;font-size:1.5rem;color:var(--bone)}
.menu__tel:hover{color:var(--gold)}
.menu__meta{font-family:var(--mono);font-size:.6875rem;letter-spacing:.25em;text-transform:uppercase;color:var(--stone)}

/* ── hero — pinned 3-act stage ──────────────────────────── */
/* 560vh, not 400: the pin now carries three headline beats, the shatter, the
   MacBook reveal and the keyboard wave. Cramming those into 400 made every
   beat feel rushed. */
.hero{position:relative;height:560vh}
.hero__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;pointer-events:none}
.hero__stage a{pointer-events:auto}
.hero__canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%}
.hero__fallback{position:absolute;inset:0;z-index:1;background:radial-gradient(62% 54% at 50% 42%,#171410 0%,var(--ink) 72%)}
/* Copy lives in the lower band, the W owns the upper one. Centring both put
   the headline straight through the middle of the logo and neither could be
   read. Splitting them vertically is what buys the contrast. */
/* Bottom padding has to clear the fixed mobile dock (~4.5rem tall + safe
   area) or the last headline line sits behind the Call/Book buttons. */
.act{
  position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;
  padding:0 var(--pad) calc(7rem + env(safe-area-inset-bottom));
}
@media (min-width:900px){ .act{padding-bottom:14svh} }  /* no dock on desktop */
.act--1{justify-content:center}
.act--2{justify-content:flex-start}
.act--3{justify-content:flex-end}
.act--2,.act--3{opacity:0;visibility:hidden}
.act__h{
  margin:0;display:flex;flex-direction:column;
  font-family:var(--serif);font-style:italic;font-weight:400;
  /* smaller than before: the air around the words is doing the work now */
  font-size:min(clamp(2.2rem,7.6vw,4.9rem),11svh);line-height:1.08;letter-spacing:-.01em;color:var(--bone);
  max-width:26ch;                 /* two lines, not four ragged ones */
  text-shadow:0 2px 18px rgba(10,10,9,.72);
}
.act--1 .act__h{text-align:center}
.act__h--l{font-size:min(clamp(2rem,6.6vw,4.2rem),9.5svh)}
.act__line{display:block;position:relative}
.act__line--r{align-self:flex-end;font-style:normal}
.act__dim{color:var(--stone)}
/* Reflection removed: at any opacity it read as a smudge, not a mirror. */
.act__line--mirror::after{content:none}
.hero__cue,.hero__done{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(1.5rem + var(--dock) + env(safe-area-inset-bottom));z-index:4;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.25em;text-transform:uppercase;white-space:nowrap;
}
.hero__cue{color:var(--stone);animation:cue 2.6s ease-in-out infinite}
.hero__done{color:var(--gold);opacity:0}
@keyframes cue{50%{transform:translate(-50%,6px)}}
@media (max-height:520px){.hero__cue,.hero__done{display:none}}

/* ── ticker ─────────────────────────────────────────────── */
.ticker{overflow:hidden;border-block:1px solid var(--line);padding:1rem 0}
.ticker__row{display:flex;width:max-content;animation:slide 46s linear infinite}
.ticker__group{white-space:nowrap;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.05rem,1rem + .6vw,1.5rem);color:var(--stone)}
.ticker__group i{font-style:normal;color:var(--gold);font-size:.55em;margin:0 1.4rem;vertical-align:middle;opacity:.85}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── chapters ───────────────────────────────────────────── */
.chapter{max-width:var(--maxw);margin-inline:auto;padding:clamp(5.5rem,12vw,10rem) var(--pad)}
.chapter__lede{
  font-family:var(--serif);font-weight:300;font-style:normal;
  font-size:clamp(1.9rem,5.4vw,3.6rem);line-height:1.15;color:var(--bone);
  max-width:24ch;margin:1.2rem 0 0;
}
.chapter__lede em,.chapter__h em{font-style:italic;color:var(--gold)}
.chapter__h{
  margin:1.1rem 0 0;font-family:var(--serif);font-weight:400;
  font-size:clamp(2.2rem,6.5vw,4.6rem);line-height:1.05;letter-spacing:-.01em;
}
.steps{list-style:none;margin:clamp(3rem,7vw,5rem) 0 0;padding:0;display:grid;gap:2.2rem}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,1fr);gap:2.5rem}}
.step{border-top:1px solid var(--line);padding-top:1.4rem}
.step .micro{color:var(--gold)}
.step__h{margin:.7rem 0 .45rem;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1.1}
.step p{margin:0;font-size:.95rem;color:rgba(240,234,217,.68);max-width:34ch}

/* ── services — cream sheets ────────────────────────────── */
.services{position:relative}
.svc{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  background:var(--bone);color:var(--ink);
  border-radius:clamp(18px,3vw,32px) clamp(18px,3vw,32px) 0 0;
  box-shadow:0 -24px 60px rgba(0,0,0,.4);
  transform-origin:center center;
}
.svc:nth-of-type(1){z-index:1}
.svc:nth-of-type(2){z-index:2}
.svc:nth-of-type(3){z-index:3}
.svc .micro{color:rgba(10,10,9,.62)}
.svc__in{
  flex:1;width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:clamp(3.5rem,8vw,6rem) var(--pad) clamp(2rem,5vw,3.5rem);
  display:grid;gap:1.4rem;align-content:start;
}
@media (min-width:900px){
  .svc__in{
    grid-template-columns:1.1fr .9fr;column-gap:clamp(2.5rem,6vw,5rem);
    grid-template-areas:"eyebrow eyebrow" "h h" "p list" "price list" "shot shot";
  }
  .svc__eyebrow{grid-area:eyebrow}.svc__h{grid-area:h}.svc__p{grid-area:p}
  .svc__list{grid-area:list}.svc__price{grid-area:price;align-self:end}.svc__shot{grid-area:shot}
}
.svc__h{margin:0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(3.2rem,11vw,7.5rem);line-height:.95;letter-spacing:-.015em}
.svc__h .dot{color:var(--bronze)}
.svc__p{margin:0;max-width:44ch;font-size:clamp(1rem,.95rem + .3vw,1.15rem);color:rgba(10,10,9,.78)}
.svc__list{list-style:none;margin:0;padding:0}
.svc__list li{border-top:1px solid var(--line-ink);padding:.65rem 0;font-size:.95rem;color:rgba(10,10,9,.8)}
.svc__list li:last-child{border-bottom:1px solid var(--line-ink)}
.svc__price{margin:.4rem 0 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(10,10,9,.62)}
.svc__price span{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.9rem,3.5vw,2.6rem);letter-spacing:0;text-transform:none;color:var(--ink);margin-right:.1em}
.svc__price i{font-style:normal;color:var(--bronze);margin:0 .5em}
.svc__shot{margin:1.4rem 0 0;max-width:46rem;border:1px solid var(--line-ink);border-radius:10px;overflow:hidden}
.svc__shot img{display:block;width:100%;height:auto;max-height:52svh;object-fit:cover}
.svc__bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border-top:1px solid var(--line-ink);
  padding:1.1rem var(--pad) calc(1.1rem + env(safe-area-inset-bottom));
}
.svc__tag{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:rgba(10,10,9,.65)}
@media (max-width:680px){.svc__tag{display:none}}
.svc__go{font-family:var(--mono);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--bronze);padding-bottom:2px;white-space:nowrap}
.svc__go i{font-style:normal;display:inline-block;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.svc__go:hover{color:var(--bronze)}
.svc__go:hover i{transform:translateX(4px)}

/* ── the work ───────────────────────────────────────────── */
.work{display:grid;gap:2rem;align-items:center;margin-top:clamp(2.5rem,6vw,4rem)}
@media (min-width:960px){.work{grid-template-columns:1.1fr .9fr;gap:3.5rem}}
.work__frame{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0f0e0c;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.work:hover .work__frame{transform:translateY(-6px)}
.work__url{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;padding:.7rem 1rem;border-bottom:1px solid var(--line);color:var(--stone)}
.work__dots{width:2.2rem;height:.45rem;flex:none;background:radial-gradient(circle,currentColor 45%,transparent 46%) 0 50%/.45rem .45rem repeat-x;opacity:.5}
.work__shot{position:relative;aspect-ratio:1000/640;background:#11151a}
.work__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.work__overlay{
  position:absolute;inset:0;display:grid;gap:.7rem;justify-items:center;align-content:center;
  padding:clamp(1rem,3.5vw,2.25rem);text-align:center;
  background:linear-gradient(180deg,rgba(6,8,10,.35),rgba(6,8,10,.75));
}
.work__logo{width:clamp(6.5rem,24%,10rem);height:auto}
.work__badge{background:#fff;color:#111;font-weight:400;font-size:clamp(.58rem,.5rem + .3vw,.72rem);border-radius:100px;padding:.35rem .8rem}
.work__head{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.3rem,.9rem + 2vw,2.3rem);line-height:1.05;color:#fff}
.work__btn{background:#fff;color:#111;font-weight:500;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;padding:.5rem 1.1rem;border-radius:4px}
.work__copy h3{margin:0 0 .9rem;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);line-height:1.1}
.work__copy p{color:rgba(240,234,217,.68);font-size:.97rem;max-width:48ch}
.work__link{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid currentColor;padding-bottom:3px}

/* ── faq ────────────────────────────────────────────────── */
.faq{margin-top:clamp(2.2rem,5vw,3.5rem);border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:1.1rem;padding:1.5rem 0}
.qa summary::-webkit-details-marker{display:none}
.qa__n{flex:none;font-family:var(--mono);font-size:.6875rem;letter-spacing:.2em;color:var(--gold)}
.qa__q{flex:1;font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,1.1rem + 1.4vw,2rem);line-height:1.1;color:var(--bone);transition:color .3s}
.qa summary:hover .qa__q{color:var(--gold)}
.qa summary i{
  flex:none;align-self:center;width:1.6rem;height:1.6rem;position:relative;
  border:1px solid var(--line);border-radius:50%;
  transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .3s;
}
.qa summary i::before,.qa summary i::after{content:'';position:absolute;left:28%;right:28%;top:50%;height:1px;background:var(--bone);transform:translateY(-.5px)}
.qa summary i::after{transform:translateY(-.5px) rotate(90deg)}
.qa[open] summary i{transform:rotate(135deg);border-color:var(--gold)}
.qa__a{padding:0 0 1.6rem;max-width:60ch}
.qa__a p{margin:0;color:rgba(240,234,217,.7);font-size:.97rem}
.qa[open] .qa__a{animation:qa .5s cubic-bezier(.22,1,.36,1)}
@keyframes qa{from{opacity:0;transform:translateY(-6px)}}

/* ── close ──────────────────────────────────────────────── */
.close{text-align:center;padding:clamp(6rem,14vw,11rem) var(--pad)}
.close__h{margin:1.2rem auto .8rem;max-width:18ch;font-family:var(--serif);font-weight:300;font-size:clamp(2.3rem,7.5vw,5.6rem);line-height:1.05}
.close__h span{display:block}
.close__h em{font-style:italic;color:var(--gold)}
.close__p{max-width:36ch;margin:0 auto;color:rgba(240,234,217,.7)}
.close__cta{display:flex;flex-direction:column;align-items:center;gap:1.4rem;margin-top:2.6rem}
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  background:var(--bone);color:var(--ink);font-weight:400;font-size:1rem;letter-spacing:.02em;
  padding:1rem 2rem;border-radius:100px;
  transition:transform .3s cubic-bezier(.22,1,.36,1),background .3s;
}
.btn:hover{transform:translateY(-2px);background:#fff}
.btn i{font-style:normal;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.btn:hover i{transform:translateX(4px)}
.close__tel{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;color:var(--stone)}
.close__tel strong{font-weight:400;color:var(--bone);border-bottom:1px solid var(--gold);padding-bottom:2px;margin-left:.4em}
.close__tel:hover strong{color:var(--gold)}

/* ── footer ─────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line)}
.foot__marquee{overflow:hidden;padding-top:clamp(2rem,6vw,3.5rem)}
.foot__row{display:flex;width:max-content;animation:slide 40s linear infinite}
.foot__row span{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(3.6rem,12vw,9rem);line-height:1;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(240,234,217,.28);
  margin-right:clamp(2.5rem,6vw,5rem);opacity:.6;
}
.foot__grid{max-width:var(--maxw);margin-inline:auto;padding:clamp(2.5rem,6vw,4rem) var(--pad);display:grid;gap:1.6rem}
@media (min-width:820px){
  .foot__grid{grid-template-columns:1.2fr 1fr 1fr;align-items:start}
  .foot__tel{justify-self:center}
  .foot__nav{justify-self:end}
}
.foot__line{margin:0;max-width:30ch;font-size:.95rem;color:rgba(240,234,217,.62)}
.foot__tel{font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,3vw,2.2rem);color:var(--bone)}
.foot__tel:hover{color:var(--gold)}
.foot__nav{display:flex;flex-wrap:wrap;gap:1.2rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}
.foot__nav a:hover{color:var(--gold)}
.foot__base{max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad) 2rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.foot__top:hover{color:var(--gold)}

/* ── mobile dock ────────────────────────────────────────── */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;gap:.55rem;
  padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(10,10,9,.92);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
}
.dock a{flex:1;text-align:center;font-weight:400;font-size:.95rem;padding:.85rem 1rem;border-radius:100px}
.dock__call{border:1px solid var(--line);color:var(--bone)}
.dock__book{background:var(--bone);color:var(--ink)}
body.menu-open .dock{display:none}
@media (min-width:900px){.dock{display:none}}
@media (max-width:899.98px){body{--dock:4.9rem}}

/* ── reduced motion — no pin, no marquee, all visible ───── */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .ticker__row,.foot__row,.hero__cue,.pre__dots{animation:none}
  .pre{animation-delay:2.5s;animation-duration:.001s}
  .hero{height:auto}
  .hero__stage{position:relative;height:auto;min-height:0}
  .hero__canvas{display:none}
  .act{position:relative;inset:auto;opacity:1;visibility:visible;padding:16vh var(--pad)}
  .hero__cue{display:none}
  .hero__done{position:static;transform:none;opacity:1;display:block;text-align:center;padding:0 0 3rem}
  .qa[open] .qa__a{animation:none}
}

/* ── QUESTIONNAIRE ─────────────────────────────────────────
   Asks the handful of things worth knowing before a call. Every extra field
   costs completions, so each one here has to earn a sentence Tyler would
   otherwise spend the first five minutes of the call asking for. */
.q{margin-top:clamp(2.6rem,6vw,4.4rem);width:100%;max-width:56rem;text-align:left}
.q__intro{color:var(--stone);font-size:clamp(.95rem,2.3vw,1.05rem);
  line-height:1.6;margin-bottom:1.8rem;max-width:44ch}
.q__grid{display:grid;gap:1rem 1.2rem;grid-template-columns:1fr}
@media(min-width:640px){.q__grid{grid-template-columns:1fr 1fr}
  .q__f--wide{grid-column:1/-1}}
.q__f{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.q__f>span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--stone)}
.q__f>span em{font-style:normal;opacity:.6;letter-spacing:.06em}
.q__f input,.q__f select,.q__f textarea{
  width:100%;padding:.95rem 1rem;border-radius:.6rem;
  border:1px solid rgba(240,234,217,.16);background:rgba(255,255,255,.035);
  color:var(--bone);font:inherit;font-size:1rem;
  /* 16px minimum or iOS zooms the whole page on focus. */
  transition:border-color .35s ease,background .35s ease;
}
.q__f textarea{resize:vertical;min-height:7rem;line-height:1.55}
.q__f input:focus,.q__f select:focus,.q__f textarea:focus{
  outline:none;border-color:rgba(180,155,104,.7);background:rgba(255,255,255,.06)}
.q__f select{appearance:none;cursor:pointer}
.q__f option{background:#14120f;color:var(--bone)}

.q__set{border:0;padding:0;margin:.6rem 0 1.6rem}
.q__set legend{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--stone);margin-bottom:.9rem;padding:0}
.q__chips{display:flex;flex-wrap:wrap;gap:.6rem}
.q__chips label{cursor:pointer}
.q__chips input{position:absolute;opacity:0;pointer-events:none}
.q__chips span{display:inline-block;padding:.6rem 1.05rem;border-radius:100px;
  border:1px solid rgba(240,234,217,.18);font-size:.92rem;color:var(--stone);
  transition:border-color .3s ease,color .3s ease,background .3s ease}
.q__chips input:checked+span{border-color:rgba(180,155,104,.85);
  color:var(--bone);background:rgba(180,155,104,.12)}
.q__chips input:focus-visible+span{outline:2px solid rgba(180,155,104,.9);
  outline-offset:2px}

.q__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.q__send{margin-top:1.6rem}
/* Sits under the send button, where someone decides whether to trust the form.
   A privacy link buried in the footer is not where that decision gets made. */
.q__legal{margin:.9rem 0 0;font-size:.8rem;line-height:1.5;color:var(--stone);max-width:46ch}
.q__legal a{color:var(--bronze);text-decoration:underline;text-underline-offset:2px}
.foot__legal a{text-decoration:underline;text-underline-offset:2px}
.q__note{margin-top:1rem;font-size:.95rem;color:var(--stone);min-height:1.4em}
.q__note[data-ok="1"]{color:var(--gold,#b49b68)}
.q__note[data-ok="0"]{color:#e0806a}