/* Whetstone Web Design
   Palette sampled from logo.png. Accent appears in rare doses only. */

:root{
  --canvas:#0A0F1A;
  --panel:#111A2B;
  --panel-2:#0E1524;
  --accent:#3491E2;
  --accent-hover:#69B5F3;
  --accent-muted:#1F4B81;
  --text-primary:#E1E9F5;
  --text-secondary:#8FA3BF;
  --line:#1A2438;

  /* Four layers rather than three: Special Elite's strokes are thinner than the
     previous display face, so the tight edge layer is doubled to keep the glyph
     outlines separated from the footage. */
  --tshadow:0 0 1px rgba(5,5,10,.9),0 1px 3px rgba(5,5,10,.96),0 3px 14px rgba(5,5,10,.82),0 10px 46px rgba(5,5,10,.82);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --logo-big:clamp(230px,30vw,400px);
  --logo-mid:clamp(190px,21vw,300px);
  --logo-small:clamp(130px,14vw,180px);

  /* Special Elite ships one weight only (400). Never ask for bold on it, the browser
     fakes it and the worn edges smear. Big headlines only; it turns to mush small.
     Thinner strokes than the previous face, so the hero text-shadow was deepened
     to compensate over video. */
  --display:'Special Elite',Georgia,serif;
  --body:'Manrope',system-ui,sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,monospace;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:hidden;overflow-x:clip}
body{
  min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased;
  font-family:var(--body);color:var(--text-primary);background:var(--canvas);
}
img,picture,video,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
h1,h2{text-wrap:balance;line-height:1.07;font-family:var(--display);font-weight:400;letter-spacing:.002em}
/* small headings stay on the body face; Rubik Dirt is unreadable at this size */
h3{text-wrap:balance;line-height:1.15;font-family:var(--body);font-weight:700;letter-spacing:-.01em}
p{overflow-wrap:break-word}
a{color:inherit}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.skip{
  position:absolute;left:8px;top:-60px;z-index:200;background:var(--accent);color:#04101F;
  padding:.7rem 1.1rem;border-radius:8px;font-weight:600;text-decoration:none;
  transition:top .25s var(--ease);
}
.skip:focus{top:8px}

/* ---------- fixed environment layer ---------- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--canvas)}
.env-glow{
  position:absolute;inset:-20%;
  background:radial-gradient(ellipse 60% 45% at 50% 78%,rgba(52,145,226,.13) 0%,rgba(52,145,226,0) 70%);
  animation:envdrift 74s var(--ease) -18s infinite alternate;
}
.grit{
  position:absolute;inset:0;opacity:.05;
  background-image:radial-gradient(circle at 20% 30%,#A4D5FF 0 1px,transparent 1px),
                   radial-gradient(circle at 70% 65%,#A4D5FF 0 1px,transparent 1px),
                   radial-gradient(circle at 45% 85%,#A4D5FF 0 1px,transparent 1px);
  background-size:220px 220px,300px 300px,260px 260px;
  animation:gritdrift 96s linear -30s infinite;
}
@keyframes envdrift{from{transform:translate3d(-2%,1%,0) scale(1)}to{transform:translate3d(2%,-1%,0) scale(1.08)}}
@keyframes gritdrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-220px,0)}}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem clamp(1rem,4vw,2.5rem);
  background:linear-gradient(to bottom,rgba(10,15,26,.92),rgba(10,15,26,0));
  transition:background .4s var(--ease),backdrop-filter .4s var(--ease);
}
.nav.solid{background:rgba(10,15,26,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
/* Three sizes. Largest at scroll zero, easing down to --logo-mid across the first
   screen of scroll (JS writes --lz from 0 to 1), then --logo-small once the nav
   goes solid over real content. */
.nav-mark img{
  width:calc(var(--logo-big) + (var(--logo-mid) - var(--logo-big)) * var(--lz,0));
  height:auto;transition:width .16s linear;
}
.nav.solid .nav-mark img{width:var(--logo-small);transition:width .5s var(--ease)}
.nav-links{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.2rem)}
.nav-links a{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;color:var(--text-secondary);transition:color .3s var(--ease);
}
.nav-links a:hover{color:var(--text-primary)}
.nav-cta{
  color:var(--text-primary)!important;border:1px solid var(--accent-muted);
  padding:.5rem .95rem;border-radius:999px;
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease)!important;
}
.nav-cta:hover{border-color:var(--accent);background:rgba(52,145,226,.14)}
@media (max-width:720px){
  .nav-links a:not(.nav-cta){display:none}
  .nav{padding:.7rem 1rem}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.85rem 1.6rem;border-radius:999px;text-decoration:none;
  background:var(--accent);color:#04101F;font-weight:600;letter-spacing:.01em;
  border:none;cursor:pointer;text-shadow:none;
  box-shadow:0 0 0 0 rgba(52,145,226,.5);
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .45s var(--ease);
}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 10px 34px -8px rgba(52,145,226,.55)}
.btn:active{transform:translateY(0)}
.btn-big{padding:1rem 2.1rem;font-size:1.05rem}
@media (pointer:coarse){.btn{min-height:44px}}

/* ================= HERO =================
   950vh. The footage is a 12s blend-interpolated master (287 frames), so the same
   journey is spread over roughly twice the scroll and the motion reads at about
   half speed. Frame density holds at ~24px of scroll per frame, matching the old
   520vh/145-frame build. Six beats rather than four, so no beat overstays its
   welcome across the longer travel. Validated by the flick test. */
.hero{position:relative;height:950vh;z-index:1}
.pin{position:sticky;top:0;height:100vh;overflow:hidden}
.stage{position:relative;width:100%;height:100%;background:var(--canvas)}

.poster,#hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.poster{background-size:cover;background-position:center;transition:opacity .8s var(--ease)}
#hero-video{
  opacity:0;transition:opacity .8s var(--ease);
  will-change:transform;transform:translateZ(0);
}
.stage.video-ready #hero-video{opacity:1}
.stage.video-ready .poster{opacity:0}
.stage.video-failed #hero-video{display:none}

.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 62%,rgba(6,10,20,0) 30%,rgba(6,10,20,.66) 100%);
}

.ring{
  position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;
  color:var(--accent);transform:rotate(-90deg);opacity:.85;
  transition:opacity .5s var(--ease);
}
.stage.video-ready .ring{opacity:0}

/* ---------- caption bands ---------- */
.bands{position:absolute;inset:0}
/* Centred over the frame. The eye is already on the sparks, so the words belong
   there too rather than tucked in a corner under the logo. The scrim below is
   what buys the legibility back. */
.band{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:clamp(120px,14vh,170px) clamp(1.25rem,6vw,5rem) clamp(70px,10vh,120px);
  opacity:0;pointer-events:none;text-shadow:var(--tshadow);
}
.band::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
  /* Wide and slow to fall off, so it still protects the OUTER words. The previous
     shape died to zero before the headline ended, leaving the first and last words
     riding on raw footage that measures 230/255 at its brightest. Holds ~0.54 alpha
     out at the text's edge, which puts the worst pixel around 107 against a 122 cap. */
  background:radial-gradient(ellipse 100% 54% at 50% 50%,
    rgba(4,8,16,.74) 0%, rgba(4,8,16,.70) 50%, rgba(4,8,16,.40) 75%, rgba(4,8,16,0) 100%);
}
.band > *{position:relative}
.band .btn{text-shadow:none;pointer-events:auto}
.band a{pointer-events:auto}

/* The px cap matters as much as the ch cap: it keeps every line inside the part
   of the scrim that is still doing work. Do not widen it without re-auditing. */
.band h1,.band .hero-line{
  font-family:var(--display);font-weight:400;line-height:1.07;text-wrap:balance;
  font-size:clamp(3rem,9vw,7.6rem);max-width:min(13ch,980px);
}
.band h2{font-size:clamp(2.6rem,7.2vw,6rem);max-width:min(13ch,980px)}
/* the middle beats now use the display face too, at headline scale */
.band .lead{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,5.6vw,4.6rem);max-width:min(15ch,980px);line-height:1.08;
}
.band .kicker{margin-bottom:.9rem}
/* the settle is three arrivals in one band, all driven off this band's --k */
.band-settle{
  align-items:center;
  --ks:clamp(0,(var(--k,0) - 0.50)*3,1);
  --kb:clamp(0,(var(--k,0) - 0.68)*4,1);
}
.settle-sub{
  margin-top:1.2rem;max-width:34ch;color:var(--text-primary);
  font-size:clamp(1rem,1.5vw,1.25rem);opacity:var(--ks,0);
}
.settle-cta{margin-top:1.8rem;opacity:var(--kb,0)}

.kicker{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);
}

/* split-text spans */
.split .w{display:inline-block;white-space:pre}
.split .c{display:inline-block;will-change:transform,opacity}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* entrances, all transform + opacity only, scrubbed off --k */
[data-entrance="drift"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -26px));
}
[data-entrance="grid"] .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc)) * var(--jx,0px)));
}
[data-entrance="punch"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks2:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(0.62 + (0.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks2)));
}
[data-entrance="punch"] .w.em{--ov:.24;--sd:.16;--ss:2.6}
[data-entrance="rise"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.9,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 30px));
}
/* approach-from-depth: echoes the camera pushing in toward the bench */
[data-entrance="approach"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.7,1);
  opacity:var(--kc);
  transform:scale(calc(0.80 + 0.20 * var(--kc)));
}

.cue{
  position:absolute;left:50%;bottom:2.2rem;width:22px;height:34px;margin-left:-11px;
  border:1px solid rgba(143,163,191,.5);border-radius:12px;opacity:var(--cue,1);
  transition:opacity .6s var(--ease);
}
.cue span{
  position:absolute;left:50%;top:7px;width:2px;height:7px;margin-left:-1px;border-radius:2px;
  background:var(--accent);animation:cuedrop 2.1s var(--ease) -0.4s infinite;
}
@keyframes cuedrop{0%{transform:translateY(0);opacity:0}30%{opacity:1}70%{transform:translateY(11px);opacity:0}100%{opacity:0}}

/* ---------- static hero (the five gates) ---------- */
.static-hero{display:none;position:relative;z-index:1}
.static-hero .static-inner{
  position:relative;z-index:2;
  padding:clamp(7rem,18vw,10rem) clamp(1.25rem,7vw,5rem) clamp(3.5rem,10vw,6rem);
  max-width:900px;
}
.static-hero{
  background-image:linear-gradient(to bottom,rgba(10,15,26,.55),rgba(10,15,26,.9)),url('../video/hero-ending.jpg');
  background-size:cover;background-position:center;
}
.static-hero h1{font-size:clamp(2.5rem,10vw,4.6rem);max-width:14ch;margin:.7rem 0 1rem;text-shadow:var(--tshadow)}
.static-hero .lead{max-width:34ch;color:var(--text-primary);margin-bottom:2rem;font-size:1.05rem}

@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{display:none}
  .static-hero{display:block}
}

/* short desktop windows: keep the scrub, drop the small overlays */
@media (max-height:560px){.cue{display:none}}

/* ================= SECTIONS ================= */
.sec{position:relative;z-index:1;padding:clamp(4.5rem,11vw,9rem) 0}
.wrap{width:min(1200px,92vw);margin:0 auto}
.wrap-narrow{width:min(760px,92vw)}
.sec h2{font-size:clamp(2rem,4.6vw,3.4rem);max-width:20ch;margin:.6rem 0 0}
.sec h2.big{font-size:clamp(2.4rem,6vw,4.4rem);max-width:16ch}
.lede{margin-top:1rem;color:var(--text-secondary);max-width:52ch;font-size:1.05rem}

/* the signature element: the hone line */
.hone{position:absolute;top:0;left:0;width:100%;height:2px;overflow:visible}
.hone line{
  stroke:var(--accent-muted);stroke-width:2;
  stroke-dasharray:1200;stroke-dashoffset:1200;
  transition:stroke-dashoffset 1.5s var(--ease-out),stroke .6s var(--ease);
}
.sec.in .hone line{stroke-dashoffset:0}
.hone-final line{stroke-width:2}
.sec.in .hone-final line{stroke:var(--accent);filter:drop-shadow(0 0 7px rgba(52,145,226,.75))}

/* section entrance choreography */
.sec .wrap > *{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.sec.in .wrap > *{opacity:1;transform:none}
.sec.in .wrap > *:nth-child(1){transition-delay:.05s}
.sec.in .wrap > *:nth-child(2){transition-delay:.14s}
.sec.in .wrap > *:nth-child(3){transition-delay:.23s}
.sec.in .wrap > *:nth-child(4){transition-delay:.32s}
/* retire the stagger so later hovers do not inherit the delay */
.sec.done .wrap > *:nth-child(1),
.sec.done .wrap > *:nth-child(2),
.sec.done .wrap > *:nth-child(3),
.sec.done .wrap > *:nth-child(4){transition-delay:0s}

/* ---------- work grid ---------- */
.grid-work{list-style:none;padding:0;margin:2.6rem 0 0;display:grid;gap:clamp(1rem,2vw,1.6rem);grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid-work{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid-work{grid-template-columns:1fr}}
.work-card .shot{
  position:relative;overflow:hidden;border-radius:10px;border:1px solid var(--line);
  background:var(--panel-2);aspect-ratio:16/10;
  transition:border-color .45s var(--ease),transform .45s var(--ease);
}
.work-card .shot img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .7s var(--ease)}
.work-card:hover .shot{border-color:var(--accent-muted);transform:translateY(-4px)}
.work-card:hover .shot img{transform:scale(1.035)}
.work-name{margin-top:.7rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;color:var(--text-secondary)}

/* ---------- the name ---------- */
.sec-name{text-align:left}
.say{margin-top:1.6rem;font-size:clamp(1.1rem,2vw,1.4rem);line-height:1.55;max-width:44ch;color:var(--text-primary)}

/* ---------- services ---------- */
.cards{margin-top:2.8rem;display:grid;gap:clamp(1rem,2vw,1.6rem);grid-template-columns:repeat(3,1fr)}
@media (max-width:880px){.cards{grid-template-columns:1fr}}
.card{
  position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--panel);padding:0 0 1.6rem;
  transition:border-color .45s var(--ease),transform .45s var(--ease);
}
.card:hover{border-color:var(--accent-muted);transform:translateY(-4px)}
.card-art{aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--line)}
.card-art img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover .card-art img{transform:scale(1.05)}
.card .num{font-family:var(--mono);font-size:.75rem;color:var(--accent);letter-spacing:.14em;margin:1.3rem 1.5rem 0}
.card h3{font-size:1.65rem;margin:.35rem 1.5rem .6rem}
.card p{margin:0 1.5rem;color:var(--text-secondary);font-size:.97rem;max-width:38ch}

/* inline email links inside body copy */
.mail,.lede a{
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid rgba(52,145,226,.4);
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.mail:hover,.lede a:hover{color:var(--accent-hover);border-bottom-color:var(--accent-hover)}

/* ---------- story ---------- */
.story-body{margin-top:2rem}
.story-body p{margin-bottom:1.3rem;color:var(--text-secondary);max-width:66ch;font-size:1.02rem}
.story-body .pull{
  color:var(--text-primary);font-size:1.1rem;
  border-left:2px solid var(--accent);padding-left:1.4rem;
}
/* signature-light.png is the original alpha shape with the ink recoloured bright,
   so no blend-mode trick is needed. The glow is what makes it read as ink on dark. */
.sign{display:flex;align-items:center;gap:1.4rem;margin-top:2.6rem;flex-wrap:wrap}
.sign img{
  width:clamp(220px,26vw,300px);height:auto;
  filter:drop-shadow(0 0 16px rgba(52,145,226,.6)) drop-shadow(0 0 44px rgba(52,145,226,.28));
}
.sign span{
  font-family:var(--mono);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary);
}

/* ---------- questions ---------- */
.qa{margin-top:2.4rem}
.qa-item{border-top:1px solid var(--line);padding:1.5rem 0}
.qa-item:last-child{border-bottom:1px solid var(--line)}
.qa dt{font-family:var(--body);font-size:1.3rem;font-weight:700;margin-bottom:.55rem;letter-spacing:-.01em}
.qa dd{margin:0;color:var(--text-secondary);max-width:62ch}

/* ---------- form ---------- */
.form{margin-top:2.4rem;display:grid;gap:1.3rem}
.field{display:grid;gap:.5rem}
.field label{font-family:var(--mono);font-size:.76rem;letter-spacing:.05em;color:var(--text-secondary)}
.field input,.field textarea{
  background:var(--panel-2);border:1px solid var(--accent-muted);border-radius:10px;
  padding:.85rem 1rem;color:var(--text-primary);width:100%;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.field input:hover,.field textarea:hover{border-color:var(--accent)}
.field textarea{resize:vertical;min-height:120px}
.form-err{color:#FF9AA2;font-size:.9rem}
.form-ok{
  margin-top:1.6rem;font-family:var(--body);font-weight:700;
  font-size:clamp(1.2rem,2.4vw,1.7rem);color:var(--text-primary);
}
.origin{
  color:var(--text-primary)!important;font-size:1.12rem;
  border-left:2px solid var(--accent);padding-left:1.4rem;margin-bottom:1.8rem;
}
.or{margin-top:1.6rem;color:var(--text-secondary)}
.or a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.or a:hover{border-bottom-color:var(--accent)}

/* ---------- footer ---------- */
.foot{position:relative;z-index:1;border-top:1px solid var(--line);padding:3.2rem 0 4rem;background:var(--panel-2)}
.foot-inner{display:flex;flex-wrap:wrap;gap:2rem 3rem;align-items:flex-start}
.foot-mark{width:180px;height:auto}
.foot-col p{color:var(--text-secondary);font-size:.92rem;margin-bottom:.5rem}
.foot-col a{color:var(--accent);text-decoration:none}
.foot-fine{margin-left:auto}

/* ================= reduced motion ================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0s!important;
  }
  .sec .wrap > *{opacity:1;transform:none}
  .hone line{stroke-dashoffset:0}
  .settle-sub,.settle-cta{opacity:1}
  .env-glow,.grit,.cue span{animation:none}
}

/* pause every animation on hidden tabs, pseudo-elements included */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}