/* ===========================================================
   KHEA COLLECTIVE
   Palette from the brand mockup. Structure and motion after
   daqconsulting.com: full-bleed textured hero, two-weight
   headlines, numbered sections, mono labels, faint column grid.
   Nothing here is a flat colour — every surface carries a
   baked fractal texture and a fine grain.
   =========================================================== */

:root{
  /* ---- palette (from the KHEA mockup) ---- */
  --paper:      #DEDAD2;
  --paper-2:    #CBC5B7;
  --ink:        #18170F;
  --ink-soft:   #4F4A3F;
  --accent:     #FF5A1F;
  --accent-ink: #8F2905;   /* deep rust: 6.06:1 on paper, 4.91:1 on paper-2 */
  --line:       #A39C8C;
  --dark:       #141310;
  --dark-2:     #201E17;
  --dark-ink:   #EEEAE0;
  --dark-soft:  #A9A294;
  --dark-line:  #3A362C;

  /* ---- type ---- */
  --sans: 'Archivo','Helvetica Neue',Arial,sans-serif;
  --body: 'IBM Plex Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono: 'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-hero: clamp(2.35rem,6.8vw,5.8rem);
  --t-h2:   clamp(2rem,5.2vw,4.4rem);
  --t-h3:   clamp(1.25rem,2.1vw,1.7rem);
  --t-lead: clamp(1.05rem,1.35vw,1.28rem);
  --t-body: 1rem;
  --t-sm:   .875rem;
  --t-mono: .75rem;

  --gutter:  clamp(1.25rem,5vw,4.5rem);
  --measure: 60ch;
  --pad-sec: clamp(5rem,10vw,9.5rem);
  --ease:    cubic-bezier(.16,1,.3,1);

  /* ---- baked textures: no runtime filters, paint once ---- */
  --tex-marble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.009 .014' numOctaves='4' seed='11'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='800' height='800' filter='url(%23m)'/%3E%3C/svg%3E");
  --tex-fibre:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62 .9' numOctaves='3' seed='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23f)'/%3E%3C/svg%3E");
  --tex-grain:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--t-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{ margin:0; }
ul,ol{ list-style:none; padding:0; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; }
::selection{ background:var(--accent); color:var(--ink); }

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

.sr-only{
  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:absolute; left:var(--gutter); top:-100px; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:.75rem 1.1rem; font-family:var(--mono); font-size:var(--t-sm);
  text-decoration:none; transition:top .2s var(--ease);
}
.skip:focus{ top:1rem; }

/* film grain over the whole page */
.grain{
  position:fixed; inset:0; z-index:300; pointer-events:none;
  opacity:.06; mix-blend-mode:overlay;
  background-image:var(--tex-grain);
}

/* ------------------------------------------- primitives */
.wrap{ width:100%; max-width:84rem; margin-inline:auto; padding-inline:var(--gutter); }

/* every section: column grid + marble, so no surface is flat */
.sec{ position:relative; padding-block:var(--pad-sec); overflow:hidden; }
.sec > .wrap{ position:relative; z-index:2; }
.sec::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:repeating-linear-gradient(90deg,
    transparent 0 calc(16.6667% - 1px), currentColor calc(16.6667% - 1px), currentColor 16.6667%);
  opacity:.075;
}
.sec::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:var(--tex-marble);
  background-size:860px 860px;
  opacity:.42; mix-blend-mode:soft-light;
}
.sec--paper{ background:var(--paper); color:var(--ink); }
.sec--paper2{ background:var(--paper-2); color:var(--ink); }
.sec--dark{ background:var(--dark); color:var(--dark-ink); }
.sec--dark2{ background:var(--dark-2); color:var(--dark-ink); }
.sec--paper::after,.sec--paper2::after{ opacity:.5; background-image:var(--tex-fibre); background-size:300px 300px; }

/* ------------------------------------------------- type */
.eyebrow{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--mono); font-size:var(--t-mono);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:1.35rem;
}
.sec--dark .eyebrow,.sec--dark2 .eyebrow{ color:var(--dark-soft); }
.eyebrow b{ color:var(--accent-ink); font-weight:500; }   /* 6.06:1 on paper */
.hero .eyebrow b,
.sec--dark .eyebrow b,
.sec--dark2 .eyebrow b{ color:var(--accent); }  /* 5.96:1 on dark */
.eyebrow::after{ content:''; flex:1; height:1px; background:currentColor; opacity:.28; max-width:8rem; }

.sec__h{
  font-family:var(--sans); text-transform:uppercase;
  font-size:var(--t-h2);
  font-variation-settings:'wdth' 108,'wght' 800;
  line-height:.92; letter-spacing:-.025em;
  text-wrap:balance;
}
.sec__lead{
  margin-top:1.5rem; max-width:var(--measure);
  font-size:var(--t-lead); color:var(--ink-soft);
}
.sec--dark .sec__lead,.sec--dark2 .sec__lead{ color:var(--dark-soft); }

/* -------------------------------------------------- nav */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(20,19,16,0);
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease), transform .4s var(--ease);
}
.nav.is-solid{
  background:rgba(20,19,16,.9);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--dark-line);
}
.nav.is-away{ transform:translateY(-102%); }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:4.5rem; }

/* the real K mark, masked so it takes the surrounding colour */
.mark{ display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--dark-ink); }
.mark__k{
  width:1.45rem; height:2.08rem; flex:none;
  background-color:currentColor;
  -webkit-mask:url(../assets/khea-mark.png) no-repeat center / contain;
  mask:url(../assets/khea-mark.png) no-repeat center / contain;
}
.mark__w{
  font-family:var(--sans); text-transform:uppercase;
  font-size:clamp(.92rem,1.3vw,1.05rem);
  font-variation-settings:'wdth' 78,'wght' 760;
  letter-spacing:.08em; line-height:1;
}

.nav__links{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2rem); }
.nav__links a:not(.btn){
  font-family:var(--mono); font-size:var(--t-mono);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--dark-soft); text-decoration:none;
  padding-block:.4rem; position:relative;
  transition:color .22s var(--ease);
}
.nav__links a:not(.btn)::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .32s var(--ease);
}
.nav__links a:not(.btn):hover{ color:var(--dark-ink); }
.nav__links a:not(.btn):hover::after{ transform:scaleX(1); }

.burger{ display:none; background:none; border:1px solid var(--dark-line); width:2.75rem; height:2.75rem; cursor:pointer; padding:.75rem; }
.burger span{ display:block; height:1px; background:var(--dark-ink); transition:transform .3s var(--ease), opacity .2s linear; }
.burger span+span{ margin-top:.42rem; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3px) rotate(-45deg); }

/* ---------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  cursor:pointer; text-decoration:none; text-align:center;
  background:transparent;          /* <button> otherwise inherits the UA grey */
  padding:1rem 1.6rem; border:1px solid currentColor; border-radius:0;
  font-family:var(--mono); font-size:var(--t-sm);
  letter-spacing:.08em; text-transform:uppercase;
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
/* the fill sweeps in from the bottom rather than just changing colour */
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .42s var(--ease);
}
.btn:hover::before{ transform:scaleY(1); }
.btn .arw{ transition:transform .32s var(--ease); }
.btn:hover .arw{ transform:translate3d(3px,-3px,0); }

.btn--fill{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.btn--fill::before{ background:var(--ink); }
.btn--fill:hover{ border-color:var(--ink); color:var(--paper); }

.btn--line{ color:var(--ink); }
.btn--line::before{ background:var(--ink); }
.btn--line:hover{ color:var(--paper); }

.btn--lineLight{ color:var(--dark-ink); border-color:var(--dark-line); }
.btn--lineLight::before{ background:var(--dark-ink); }
.btn--lineLight:hover{ color:var(--dark); border-color:var(--dark-ink); }

.btn--sm{ padding:.62rem 1rem; font-size:var(--t-mono); }
.btn--full{ width:100%; }

/* ==================================================== HERO */
.hero{
  position:relative; overflow:hidden;
  background:var(--dark); color:var(--dark-ink);
  min-height:100svh; display:flex; align-items:center;
  padding-top:7rem; padding-bottom:4rem;
}
.hero::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:repeating-linear-gradient(90deg,
    transparent 0 calc(16.6667% - 1px), var(--dark-ink) calc(16.6667% - 1px), var(--dark-ink) 16.6667%);
  opacity:.06;
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:var(--tex-marble); background-size:900px 900px;
  opacity:.5; mix-blend-mode:soft-light;
}
/* a scrim so the headline sits on clean ground while the right
   side keeps its texture — the type stops fighting the marble */
.hero__scrim{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(104deg, rgba(20,19,16,.88) 0%, rgba(20,19,16,.55) 44%, rgba(20,19,16,0) 80%),
    linear-gradient(180deg, rgba(20,19,16,.35) 0%, rgba(20,19,16,0) 40%, rgba(20,19,16,.5) 100%);
}
.hero__inner{ position:relative; z-index:4; width:100%; }

/* ---------------------------------------- ember field
   Heat, not flames: warm plumes rise, drift sideways and fade.
   Plain radial gradients moved with transform and opacity only,
   so it is GPU-composited and costs nothing on a phone. Negative
   delays start each plume mid-cycle so the hero is never cold. */
.embers{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.ember{
  position:absolute; left:var(--x); bottom:-16%;
  width:var(--w); aspect-ratio:1; margin-left:calc(var(--w) * -.5);
  border-radius:50%; opacity:0; will-change:transform,opacity;
  background:radial-gradient(circle closest-side,
    rgba(255,124,64,.40) 0%, rgba(255,90,31,.24) 40%, rgba(255,90,31,0) 72%);
  animation:emberRise var(--dur) linear var(--delay) infinite;
}
@keyframes emberRise{
  0%  { transform:translate3d(0,0,0) scale(.78); opacity:0; }
  14% { opacity:1; }
  62% { opacity:.55; }
  100%{ transform:translate3d(var(--dx),-132%,0) scale(1.42); opacity:0; }
}
/* the bed of coals: never leaves, just breathes */
.ember--base{
  left:36%; bottom:-32%; width:84vw; margin-left:-42vw;
  opacity:1;
  background:radial-gradient(circle closest-side,
    rgba(255,90,31,.30) 0%, rgba(206,58,12,.17) 44%, rgba(255,90,31,0) 74%);
  animation:emberBreathe 13s ease-in-out infinite alternate;
}
@keyframes emberBreathe{
  from{ opacity:.68; transform:scale(1); }
  to  { opacity:1;   transform:scale(1.07); }
}

.hero .eyebrow{ color:var(--dark-soft); animation:rise .7s var(--ease) .1s both; }

/* two-weight headline, each line masked and lifted in turn */
.hero__h{
  font-family:var(--sans); text-transform:uppercase;
  font-size:var(--t-hero); line-height:.93;
  letter-spacing:-.03em; margin-bottom:2rem;
}
.ln{ display:block; overflow:hidden; padding-bottom:.09em; margin-bottom:-.09em; }
.ln > i{ display:block; font-style:normal; animation:lineUp 1s var(--ease) both; }
.ln--light > i{ font-variation-settings:'wdth' 104,'wght' 330; color:var(--dark-ink); }
.ln--heavy > i{
  font-variation-settings:'wdth' 108,'wght' 850;
  color:var(--accent);
  text-shadow:0 0 72px rgba(255,90,31,.34);
}
.ln:nth-of-type(1) > i{ animation-delay:.22s; }
.ln:nth-of-type(2) > i{ animation-delay:.34s; }
@keyframes lineUp{ from{ transform:translate3d(0,108%,0); } to{ transform:none; } }

.hero__lead{
  max-width:52ch; font-size:var(--t-lead); color:var(--dark-soft);
  animation:rise .8s var(--ease) .55s both;
}
.hero__acts{
  display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.25rem;
  animation:rise .8s var(--ease) .68s both;
}
@keyframes rise{ from{ opacity:0; transform:translate3d(0,16px,0); } to{ opacity:1; transform:none; } }

.hero__cue{
  display:flex; align-items:center; gap:.7rem; margin-top:clamp(2.5rem,5vw,4rem);
  font-family:var(--mono); font-size:var(--t-mono);
  letter-spacing:.14em; text-transform:uppercase; color:var(--dark-soft);
  animation:rise .8s var(--ease) .82s both;
}
.hero__cue i{ display:block; width:2.5rem; height:1px; background:var(--accent); transform-origin:left; animation:cue 2.6s var(--ease) infinite; }
@keyframes cue{ 0%,100%{ transform:scaleX(.35); } 50%{ transform:scaleX(1); } }

/* --------------------------------------- manifesto band */
.manifesto{
  background:var(--accent); color:var(--ink);
  padding-block:clamp(1.6rem,3vw,2.6rem);
  overflow:hidden; position:relative;
}
.manifesto::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--tex-fibre); background-size:300px 300px;
  opacity:.4; mix-blend-mode:soft-light;
}
.manifesto__track{ position:relative; z-index:1; display:flex; width:max-content; animation:march 40s linear infinite; }
.manifesto__track span{
  font-family:var(--sans); text-transform:uppercase; white-space:nowrap;
  font-size:clamp(1.4rem,3.4vw,2.9rem);
  font-variation-settings:'wdth' 112,'wght' 800;
  letter-spacing:-.02em; padding-right:2rem;
}
.manifesto__track span::after{ content:'/'; padding-left:2rem; opacity:.5; }
@keyframes march{ to{ transform:translate3d(-50%,0,0); } }
.manifesto:hover .manifesto__track{ animation-play-state:paused; }

/* -------------------------------------------- the scope */
.scope{
  margin-top:clamp(2.5rem,5vw,4rem);
  background:rgba(20,19,16,.42);
  border:1px solid var(--dark-line);
  padding:clamp(1rem,2.2vw,1.6rem);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.sec--paper .scope,.sec--paper2 .scope{ background:rgba(255,255,255,.34); border-color:var(--line); }
.scope__head{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.4rem;
  font-family:var(--mono); font-size:var(--t-mono);
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:1.2rem;
}
.sec--dark .scope__head,.sec--dark2 .scope__head{ color:var(--dark-soft); }
.scope__key{ display:inline-flex; align-items:center; gap:.5rem; }
.scope__key i{ width:1.4rem; height:2px; }
.scope__key--them i{ background:var(--line); }
.scope__key--us i{ background:var(--accent); }
.scope__y{ margin-left:auto; opacity:.75; }

.scope__plot{ position:relative; }
.scope__svg{ width:100%; height:clamp(170px,24vw,300px); overflow:visible; }
.scope__grid line{ stroke:currentColor; stroke-width:1; opacity:.16; }
.scope__mark{ stroke:currentColor; stroke-width:1; stroke-dasharray:3 5; opacity:.3; }
.scope__mark-label{
  position:absolute; top:-.3rem; left:10.83%; transform:translateX(.45rem);
  font-family:var(--mono); font-size:var(--t-mono); opacity:.6;
}
.scope__them,.scope__us{ fill:none; stroke-linecap:round; }
.scope__them{
  stroke:currentColor; opacity:.42; stroke-width:1.75;
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:draw 1.2s ease-out .4s forwards;
}
.scope__us{
  stroke:var(--accent); stroke-width:3;
  stroke-dasharray:1; stroke-dashoffset:1;
  filter:drop-shadow(0 0 14px rgba(255,90,31,.45));
  animation:draw 1.6s ease-out .65s forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
.scope__area{ opacity:0; animation:fadeIn .9s ease-out 1.5s forwards; }
.scope__dot{ fill:var(--accent); opacity:0; animation:fadeIn .4s ease-out 2.15s forwards; }
@keyframes fadeIn{ to{ opacity:1; } }

.scope__scrub{ position:absolute; top:0; bottom:0; width:1px; background:currentColor; opacity:.5; pointer-events:none; }
.scope__scrub[hidden]{ display:none; }
.scope__scrub b{
  position:absolute; top:0; left:.5rem;
  background:var(--accent); color:var(--ink);
  font-family:var(--mono); font-size:var(--t-mono); font-weight:500;
  padding:.2rem .45rem; white-space:nowrap; opacity:1;
}
.scope__x{
  display:flex; justify-content:space-between;
  margin-top:.7rem; padding-top:.7rem;
  border-top:1px solid currentColor;
  font-family:var(--mono); font-size:var(--t-mono); opacity:.6;
}
.scope__cap{ margin-top:1rem; max-width:56ch; font-size:var(--t-sm); opacity:.66; }

/* ================================================= STANCE */
.stance__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(2rem,6vw,5rem); align-items:start; }
.stance__body p{ font-size:var(--t-lead); max-width:var(--measure); color:var(--ink-soft); }
.stance__list{ margin-top:clamp(2rem,4vw,3rem); }
.stance__list > div{ padding-block:clamp(1.1rem,2.2vw,1.5rem); border-top:1px solid var(--line); }
.stance__list dt{
  font-family:var(--sans); text-transform:uppercase; font-size:1rem;
  font-variation-settings:'wdth' 96,'wght' 700; letter-spacing:.01em; margin-bottom:.35rem;
}
.stance__list dd{ color:var(--ink-soft); max-width:var(--measure); }

/* ==================================== CAPABILITY LIST */
.caps{ margin-top:clamp(2.5rem,5vw,4rem); border-top:1px solid var(--dark-line); }
.cap{ border-bottom:1px solid var(--dark-line); }
.cap__bar{
  width:100%; display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:clamp(1rem,3vw,2.5rem);
  background:none; border:0; cursor:pointer; text-align:left;
  padding:clamp(1.3rem,2.6vw,1.9rem) 0; color:inherit;
  transition:color .25s var(--ease);
}
.cap__bar:hover{ color:var(--accent); }
.cap__n{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.1em; opacity:.6; }
.cap__name{
  font-family:var(--sans); text-transform:uppercase;
  font-size:clamp(1.3rem,3vw,2.4rem);
  font-variation-settings:'wdth' 108,'wght' 760;
  letter-spacing:-.022em; line-height:1;
}
.cap__x{ position:relative; width:1.1rem; height:1.1rem; flex:none; }
.cap__x::before,.cap__x::after{
  content:''; position:absolute; top:50%; left:0; width:100%; height:1.5px;
  background:currentColor; transition:transform .38s var(--ease), opacity .25s var(--ease);
}
.cap__x::after{ transform:rotate(90deg); }
.cap.is-open .cap__bar{ color:var(--accent); }
.cap.is-open .cap__x::after{ transform:rotate(0); opacity:0; }
.cap__wrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
.cap.is-open .cap__wrap{ grid-template-rows:1fr; }
.cap__body{ overflow:hidden; }
.cap__body > div{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(1rem,4vw,3rem);
  padding:0 0 clamp(1.5rem,3vw,2.25rem) clamp(0rem,6vw,4.5rem);
}
.cap__body p{ color:var(--dark-soft); max-width:var(--measure); }
.cap__tags{ display:flex; flex-wrap:wrap; gap:.45rem; align-content:start; }
.cap__tags li{
  font-family:var(--mono); font-size:var(--t-mono);
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--dark-soft); border:1px solid var(--dark-line);
  padding:.3rem .6rem;
}

/* =================================================== WORK */
.work__top{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:1rem 2rem; margin-bottom:clamp(2.25rem,4.5vw,3.5rem); }
.work__note{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.06em; max-width:34ch; opacity:.66; }
.grid-reels{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.7rem,1.5vw,1.2rem); }
.grid-stills{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.7rem,1.5vw,1.2rem); margin-top:clamp(.7rem,1.5vw,1.2rem); }
.tile--wide{ grid-column:span 2; }
.tile__cap{ margin-top:.8rem; font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.05em; line-height:1.55; opacity:.62; }
.tile__cap b{ display:block; text-transform:uppercase; letter-spacing:.09em; opacity:1; font-weight:500; }

.frame{ position:relative; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(238,234,224,.14); }
.frame--9x16{ aspect-ratio:9/16; }
.frame--4x5 { aspect-ratio:4/5; }
.frame--16x9{ aspect-ratio:16/9; }
.frame img,.frame video{ width:100%; height:100%; object-fit:cover; }
/* every placeholder carries the page grain so none of them read as flat */
.frame::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:var(--tex-marble); background-size:520px 520px;
  opacity:.55; mix-blend-mode:soft-light;
}
.grade-a{ background:radial-gradient(120% 80% at 24% 14%,#F0803A 0,transparent 56%),radial-gradient(115% 95% at 84% 90%,#1B1509 0,transparent 64%),linear-gradient(196deg,#5A3216 0,#17120B 100%); }
.grade-b{ background:radial-gradient(110% 75% at 74% 18%,#E8B45C 0,transparent 55%),radial-gradient(120% 90% at 16% 88%,#241B0E 0,transparent 66%),linear-gradient(168deg,#6B4C1E 0,#1A140C 100%); }
.grade-c{ background:radial-gradient(130% 85% at 30% 22%,#9AA271 0,transparent 58%),radial-gradient(100% 90% at 88% 96%,#161A10 0,transparent 62%),linear-gradient(206deg,#3E4527 0,#14170E 100%); }
.grade-d{ background:radial-gradient(120% 80% at 70% 16%,#93A3AB 0,transparent 54%),radial-gradient(110% 95% at 20% 92%,#12161A 0,transparent 62%),linear-gradient(184deg,#2F3A40 0,#12161A 100%); }
.grade-e{ background:radial-gradient(100% 90% at 18% 20%,#FF5A1F 0,transparent 48%),radial-gradient(120% 90% at 86% 88%,#17130E 0,transparent 64%),linear-gradient(200deg,#5C2A11 0,#14110C 100%); }
.grade-f{ background:radial-gradient(120% 85% at 74% 20%,#C89C82 0,transparent 55%),radial-gradient(110% 90% at 18% 90%,#1D1611 0,transparent 64%),linear-gradient(190deg,#4B342A 0,#16110D 100%); }

.play{
  position:absolute; inset:0; margin:auto; z-index:2;
  width:3.2rem; height:3.2rem; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(20,19,16,.4); border:1px solid rgba(238,234,224,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:transform .32s var(--ease), background .32s var(--ease), border-color .32s var(--ease);
}
.play::before{ content:''; margin-left:3px; border-left:10px solid #fff; border-top:6.5px solid transparent; border-bottom:6.5px solid transparent; }
.tile:hover .play,.tile:focus-within .play{ transform:scale(1.14); background:var(--accent); border-color:var(--accent); }

body.reveal [data-reveal] .frame{ clip-path:inset(0 100% 0 0); }
body.reveal [data-reveal] .tile__cap{ opacity:0; }
body.reveal [data-reveal] .frame,
body.reveal [data-reveal] .tile__cap{ transition:clip-path .95s var(--ease), opacity .7s var(--ease) .15s; }
body.reveal [data-reveal].is-in .frame{ clip-path:inset(0 0 0 0); }
body.reveal [data-reveal].is-in .tile__cap{ opacity:.62; }

.link-big{
  display:inline-flex; align-items:center; gap:.6rem;
  margin-top:clamp(2.5rem,5vw,4rem);
  font-family:var(--sans); text-transform:uppercase;
  font-size:clamp(1rem,1.7vw,1.3rem);
  font-variation-settings:'wdth' 100,'wght' 700; letter-spacing:.01em;
  text-decoration:none; border-bottom:2px solid var(--accent); padding-bottom:.3rem;
  transition:color .24s var(--ease);
}
.link-big:hover{ color:var(--accent); }
.link-big .arw{ transition:transform .3s var(--ease); }
.link-big:hover .arw{ transform:translate3d(3px,-3px,0); }

/* ================================================ PROCESS */
.proc__list{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.75rem,3vw,2.5rem); margin-top:clamp(2.5rem,5vw,4rem); }
.proc__step{ position:relative; padding-top:clamp(1.3rem,2.4vw,1.9rem); border-top:1px solid var(--line); }
.sec--dark .proc__step,.sec--dark2 .proc__step{ border-top-color:var(--dark-line); }
.proc__step::before{ content:''; position:absolute; top:-3px; left:0; width:.45rem; height:.45rem; background:var(--accent); }
.proc__when{ display:block; margin-bottom:.6rem; font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink); }
.sec--dark .proc__when,.sec--dark2 .proc__when{ color:var(--accent); }
.proc__step h3{ font-family:var(--sans); text-transform:uppercase; font-size:1.1rem; font-variation-settings:'wdth' 100,'wght' 720; letter-spacing:-.01em; line-height:1.1; margin-bottom:.55rem; }
.proc__step p{ color:var(--ink-soft); font-size:.95rem; line-height:1.58; }
.sec--dark .proc__step p,.sec--dark2 .proc__step p{ color:var(--dark-soft); }

/* ================================================ PRICING
   Structure borrowed from the shadcn pricing-section-3 layout:
   inset gradient panel, gapped cards, the lead plan scaled and
   ringed, price above the plan name, circled ticks. Rebuilt in
   plain CSS and this brand's palette rather than neutral-50. */
.price__top{ margin-bottom:clamp(2rem,4vw,3rem); }

.price__panel{
  padding:clamp(.6rem,1.2vw,1rem); border-radius:8px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(203,197,183,.5) 100%);
}
.price__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.75rem,1.4vw,1rem); align-items:stretch;
}

.plan{
  display:flex; flex-direction:column;
  padding:clamp(1.3rem,2.2vw,1.85rem); border-radius:5px;
}
.plan--lead{
  position:relative; z-index:2;
  color:var(--dark-ink);
  background:linear-gradient(to top, var(--dark) 0%, var(--dark-2) 100%);
  box-shadow:0 0 0 2px var(--ink), 0 26px 60px -26px rgba(24,23,15,.65);
  transform:scale(1.045);
}
.plan--lead::after{
  content:''; position:absolute; inset:0; border-radius:5px; pointer-events:none;
  background-image:var(--tex-marble); background-size:600px 600px;
  opacity:.4; mix-blend-mode:soft-light;
}
.plan > *{ position:relative; z-index:1; }

.plan__flag{
  align-self:start; margin-bottom:1rem;
  background:var(--dark-line); color:var(--dark-ink);
  font-family:var(--mono); font-size:var(--t-mono);
  letter-spacing:.12em; text-transform:uppercase;
  padding:.28rem .7rem; border-radius:999px;
}
.plan__fig{ display:flex; flex-direction:column; gap:.3rem; margin-bottom:1.1rem; }
.plan__num{
  font-family:var(--sans); font-size:clamp(2.3rem,4.4vw,3.1rem);
  font-variation-settings:'wdth' 98,'wght' 700;
  letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums;
}
.plan__per{
  font-family:var(--mono); font-size:var(--t-mono);
  letter-spacing:.06em; color:var(--ink-soft);
}
.plan--lead .plan__per{ color:var(--dark-soft); }
.plan__name{
  font-family:var(--sans); text-transform:uppercase;
  font-size:clamp(1.6rem,3vw,2.1rem);
  font-variation-settings:'wdth' 112,'wght' 800;
  letter-spacing:-.03em; line-height:.95; margin-bottom:.6rem;
}
.plan__for{
  font-size:.96rem; line-height:1.5; color:var(--ink-soft);
  padding-bottom:1.25rem; border-bottom:1px solid var(--line);
}
.plan--lead .plan__for{ color:var(--dark-soft); border-bottom-color:var(--dark-line); }

.plan__inc{ padding-top:1.25rem; flex:1; }
.plan__inc h4{
  font-family:var(--mono); font-size:var(--t-mono);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); margin-bottom:1rem; font-weight:500;
}
.plan--lead .plan__inc h4{ color:var(--dark-ink); }
.plan__kit{ display:grid; gap:.7rem; margin-bottom:1.75rem; }
.plan__kit li{
  display:flex; align-items:flex-start; gap:.7rem;
  font-size:.94rem; line-height:1.4; color:var(--ink-soft);
}
.plan--lead .plan__kit li{ color:var(--dark-soft); }
.tick{
  flex:none; width:1.35rem; height:1.35rem; margin-top:.05rem;
  display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--ink); color:var(--ink); background:rgba(255,255,255,.5);
}
.plan--lead .tick{ border-color:var(--dark-line); color:var(--dark-ink); background:rgba(238,234,224,.09); }
.tick svg{ width:.72rem; height:.72rem; }

.plan__cta{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  margin-top:auto; padding:1rem 1.25rem; border-radius:4px;
  text-decoration:none; text-align:center;
  font-family:var(--mono); font-size:var(--t-sm);
  letter-spacing:.08em; text-transform:uppercase;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), filter .28s var(--ease);
}
.plan__cta .arw{ transition:transform .3s var(--ease); }
.plan__cta:hover{ transform:translateY(-2px); }
.plan__cta:hover .arw{ transform:translate3d(3px,-3px,0); }
.plan__cta--dark{
  background:linear-gradient(to top, var(--ink) 0%, #3B362A 100%);
  color:var(--paper); border:1px solid #4A4436;
  box-shadow:0 10px 26px -12px rgba(24,23,15,.75);
}
.plan__cta--dark:hover{ box-shadow:0 16px 30px -12px rgba(24,23,15,.85); }
.plan__cta--flame{
  background:linear-gradient(to top, #E24A10 0%, #FF7A3D 100%);
  color:var(--ink); border:1px solid #FF8A50;
  box-shadow:0 10px 30px -10px rgba(255,90,31,.6);
}
.plan__cta--flame:hover{ box-shadow:0 18px 38px -10px rgba(255,90,31,.75); }

.price__fine{
  margin-top:clamp(2rem,4vw,3rem); max-width:var(--measure);
  font-size:var(--t-sm); color:var(--ink-soft);
}

/* word-by-word cut reveal, same language as the hero lines */
.cut{ display:inline-flex; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.cut > i{ display:inline-block; font-style:normal; transform:translateY(105%); }
.is-cut .cut > i{ animation:cutUp .8s var(--ease) both; animation-delay:var(--d); }
@keyframes cutUp{ from{ transform:translateY(105%); } to{ transform:none; } }

/* staggered blur-and-lift, the TimelineContent effect in plain CSS */
[data-stagger]{ opacity:0; filter:blur(10px); transform:translateY(-18px); }
.is-timeline [data-stagger]{
  animation:timelineIn .6s var(--ease) both;
  animation-delay:calc(var(--i) * .13s + .1s);
}
.is-timeline .plan--lead{ animation-name:timelineInLead; }
@keyframes timelineIn{
  from{ opacity:0; filter:blur(10px); transform:translateY(-18px); }
  to  { opacity:1; filter:blur(0);    transform:none; }
}
@keyframes timelineInLead{
  from{ opacity:0; filter:blur(10px); transform:translateY(-18px) scale(1.045); }
  to  { opacity:1; filter:blur(0);    transform:scale(1.045); }
}

/* ============================ TESTIMONIALS (opt-in) */
/* kept for the real testimonials documented in assets/README.md */
.proof__quotes{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,5vw,4rem); margin-top:clamp(3rem,6vw,5rem); }
.quote{ border-top:2px solid var(--accent); padding-top:clamp(1.25rem,2.4vw,1.75rem); }
.quote blockquote p{ font-size:clamp(1.2rem,2.1vw,1.55rem); line-height:1.42; letter-spacing:-.012em; text-wrap:pretty; }
.quote figcaption{ margin-top:1rem; font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.06em; color:var(--dark-soft); }

/* ==================================================== FAQ */
.faq__grid{ display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.6fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; }
/* the column is narrow and "QUESTIONS" cannot break, so this heading
   runs at its own smaller scale instead of the section default */
.faq__grid .sec__h{ font-size:clamp(1.7rem,3.3vw,2.9rem); }
.qa{ border-bottom:1px solid var(--dark-line); }
.qa:first-child{ border-top:1px solid var(--dark-line); }
.qa__q{
  position:relative; width:100%; text-align:left; cursor:pointer;
  background:none; border:0; color:inherit;
  padding:clamp(1.1rem,2.2vw,1.45rem) 2.5rem clamp(1.1rem,2.2vw,1.45rem) 0;
  font-family:var(--sans); text-transform:uppercase;
  font-size:clamp(.95rem,1.4vw,1.1rem);
  font-variation-settings:'wdth' 96,'wght' 640; letter-spacing:.005em; line-height:1.3;
  transition:color .22s var(--ease);
}
.qa__q:hover,.qa.is-open .qa__q{ color:var(--accent); }
.qa__q::before,.qa__q::after{ content:''; position:absolute; right:.3rem; top:50%; width:.9rem; height:1.5px; background:currentColor; transition:transform .38s var(--ease), opacity .25s var(--ease); }
.qa__q::after{ transform:rotate(90deg); }
.qa.is-open .qa__q::after{ transform:rotate(0); opacity:0; }
.qa__wrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); }
.qa.is-open .qa__wrap{ grid-template-rows:1fr; }
.qa__a{ overflow:hidden; }
.qa__a p{ padding-bottom:clamp(1.2rem,2.4vw,1.7rem); max-width:var(--measure); color:var(--dark-soft); }

/* ============================================ START / FORM */
.start__grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.05fr); gap:clamp(2.5rem,6vw,5rem); align-items:start; }
.start__sub{ margin-top:1.35rem; font-size:var(--t-lead); color:var(--dark-soft); max-width:44ch; }
.start__meta{ margin-top:clamp(2rem,4vw,3rem); display:grid; }
.start__meta li{ display:grid; gap:.1rem; padding-block:.85rem; border-top:1px solid var(--dark-line); font-size:.97rem; }
.start__meta span{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--dark-soft); }
.start__meta a{ text-underline-offset:3px; text-decoration-color:var(--accent); }

.form{ display:grid; gap:1rem; background:var(--paper); color:var(--ink); padding:clamp(1.4rem,3vw,2.2rem); position:relative; }
.form::after{ content:''; position:absolute; inset:0; pointer-events:none; background-image:var(--tex-fibre); background-size:300px 300px; opacity:.5; mix-blend-mode:soft-light; }
.form > *{ position:relative; z-index:1; }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.f{ display:grid; gap:.35rem; }
.f label{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.09em; text-transform:uppercase; }
.f__opt{ color:var(--ink-soft); letter-spacing:.06em; }
.f input,.f select,.f textarea{
  width:100%; padding:.8rem .9rem;
  background:rgba(255,255,255,.62); border:1px solid var(--line); border-radius:0;
  font-family:var(--body); font-size:.97rem;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.f textarea{ resize:vertical; min-height:7rem; line-height:1.5; }
.f select{
  appearance:none; -webkit-appearance:none; padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2318170F' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .95rem center;
}
.f input:focus,.f select:focus,.f textarea:focus{ outline:none; border-color:var(--ink); background:#fff; box-shadow:0 0 0 3px rgba(255,90,31,.26); }
.f__err{ font-family:var(--mono); font-size:var(--t-mono); color:var(--accent-ink); }
.f__err:empty{ display:none; }
.f.has-err input,.f.has-err select,.f.has-err textarea{ border-color:var(--accent-ink); }
.hp{ position:absolute; left:-9999px; }
.form__note{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.05em; color:var(--ink-soft); text-align:center; }
/* surfaced only if the server rejects a submission */
.form__alert{
  font-family:var(--mono); font-size:var(--t-sm); line-height:1.5;
  color:var(--accent-ink); background:rgba(255,90,31,.1);
  border:1px solid var(--accent-ink); padding:.85rem 1rem;
}
.form__alert[hidden]{ display:none; }

/* ================================================= FOOTER */
.foot{ background:var(--dark-2); color:var(--dark-ink); padding-block:clamp(3rem,6vw,4.5rem); border-top:1px solid var(--dark-line); position:relative; overflow:hidden; }
.foot::after{ content:''; position:absolute; inset:0; pointer-events:none; background-image:var(--tex-marble); background-size:700px 700px; opacity:.4; mix-blend-mode:soft-light; }
.foot__grid{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr); gap:1rem clamp(1.5rem,4vw,3.5rem); }
.mark--foot{ grid-column:1; grid-row:1; }
.mark--foot .mark__k{ width:1.8rem; height:2.58rem; }
.mark--foot .mark__w{ font-size:1.15rem; }
.foot__where{ grid-column:1; grid-row:2; color:var(--dark-soft); font-size:var(--t-sm); max-width:34ch; }
.foot__nav{ grid-column:2; grid-row:1/span 2; }
.foot__social{ grid-column:3; grid-row:1/span 2; }
.foot__nav,.foot__social{ display:grid; align-content:start; gap:.55rem; }
.foot__nav a,.foot__social a{
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.09em; text-transform:uppercase;
  color:var(--dark-soft); text-decoration:none; width:fit-content; transition:color .2s var(--ease);
}
.foot__nav a:hover,.foot__social a:hover{ color:var(--accent); }
.foot__legal{ grid-column:1/-1; grid-row:3; margin-top:clamp(2rem,4vw,3rem); padding-top:1.4rem; border-top:1px solid var(--dark-line); font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.06em; color:var(--dark-soft); }

/* ================================================== MODAL */
.modal{ position:fixed; inset:0; z-index:400; display:grid; place-items:center; padding:var(--gutter); }
.modal[hidden]{ display:none; }
.modal__back{ position:absolute; inset:0; background:rgba(12,11,9,.9); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); animation:backIn .3s ease both; }
@keyframes backIn{ from{ opacity:0; } to{ opacity:1; } }
.modal__box{ position:relative; width:min(62rem,100%); animation:modalIn .42s var(--ease) both; }
@keyframes modalIn{ from{ opacity:0; transform:scale(.975) translate3d(0,12px,0); } to{ opacity:1; transform:none; } }
.modal__x{ position:absolute; top:-2.5rem; right:-.35rem; background:none; border:0; cursor:pointer; color:var(--dark-ink); font-size:1.9rem; line-height:1; padding:.15rem .5rem; }
.modal__stage video{ width:100%; }
.modal__ph{ display:grid; place-items:center; text-align:center; }
.modal__ph p{ position:relative; z-index:3; padding:1.5rem; color:#fff; font-family:var(--sans); text-transform:uppercase; font-size:clamp(1rem,2vw,1.35rem); font-variation-settings:'wdth' 104,'wght' 700; line-height:1.3; }
.modal__ph span{ display:block; margin-top:.7rem; font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.06em; text-transform:none; color:rgba(255,255,255,.82); }
.modal__ph span b{ font-weight:500; }
body.locked{ overflow:hidden; }

/* ========================== PORTFOLIO / CONFIRMATION PAGES */
.phead{ padding-top:clamp(7rem,12vw,10rem); padding-bottom:clamp(2rem,4vw,3.5rem); }
.phead__h{ font-family:var(--sans); text-transform:uppercase; font-size:clamp(2.6rem,8vw,7rem); font-variation-settings:'wdth' 112,'wght' 820; line-height:.9; letter-spacing:-.035em; }
.phead__sub{ margin-top:clamp(1.25rem,2.5vw,2rem); font-size:var(--t-lead); color:var(--dark-soft); max-width:52ch; }
.done{ min-height:100svh; display:grid; align-content:center; padding-block:clamp(3rem,10vw,7rem); }
.done__h{ font-family:var(--sans); text-transform:uppercase; font-size:clamp(2.2rem,7vw,5.5rem); font-variation-settings:'wdth' 110,'wght' 820; line-height:.9; letter-spacing:-.035em; }
.done__sub{ margin-top:1.5rem; font-size:var(--t-lead); color:var(--dark-soft); max-width:56ch; }
.done__sub a{ text-underline-offset:3px; text-decoration-color:var(--accent); }
.done .btn{ margin-top:clamp(2rem,4vw,3rem); width:fit-content; }


/* ================================================ ANATOMY
   A thirty-second ad drawn to scale: the hook is a tenth of the
   runtime and carries all of the risk, which is the whole point. */
.anat__bar{ display:flex; gap:2px; margin-top:clamp(2.5rem,5vw,3.5rem); height:3.6rem; }
.anat__seg{
  flex:var(--w); display:flex; align-items:center; gap:.55rem;
  padding:0 .8rem; overflow:hidden; white-space:nowrap;
  background:rgba(24,23,15,.07); border-top:2px solid var(--line);
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft);
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.anat__seg b{ font-weight:500; }
.anat__seg i{ font-style:normal; opacity:.6; }
.anat__seg--hook{ background:rgba(255,90,31,.15); border-top-color:var(--accent); color:#732003; }
.anat__seg.is-lit{ background:rgba(255,90,31,.22); border-top-color:var(--accent); color:#732003; }

.anat__list{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,2.5rem); margin-top:clamp(1.5rem,3vw,2.25rem);
}
.anat__step{ border-top:1px solid var(--line); padding-top:clamp(1.1rem,2.2vw,1.5rem); }
.anat__time{
  display:block; margin-bottom:.55rem;
  font-family:var(--mono); font-size:var(--t-mono);
  letter-spacing:.12em; color:var(--accent-ink);
}
.anat__step h3{
  font-family:var(--sans); text-transform:uppercase; font-size:1.1rem;
  font-variation-settings:'wdth' 100,'wght' 720; letter-spacing:-.01em;
  line-height:1.1; margin-bottom:.55rem;
}
.anat__step p{ color:var(--ink-soft); font-size:.95rem; line-height:1.58; }

/* =================================================== THE MATH */
.calc{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,2.5rem); margin-top:clamp(2.5rem,5vw,3.5rem);
  align-items:start;
}
.calc__inputs{ display:grid; gap:clamp(1.5rem,3vw,2.1rem); }
.calc__f{ display:grid; gap:.5rem; }
.calc__f label{
  font-family:var(--mono); font-size:var(--t-mono);
  letter-spacing:.09em; text-transform:uppercase; color:var(--dark-soft);
}
.calc__field{
  display:flex; align-items:center; gap:.45rem;
  border:1px solid var(--dark-line); background:rgba(238,234,224,.045);
  padding:0 .95rem; transition:border-color .2s var(--ease), background .2s var(--ease);
}
.calc__field:focus-within{ border-color:var(--accent); background:rgba(238,234,224,.07); }
.calc__field span{ font-family:var(--sans); font-size:1.25rem; color:var(--dark-soft); }
.calc__field input{
  width:100%; min-width:0; background:none; border:0; padding:.75rem 0;
  font-family:var(--sans); font-size:1.3rem;
  font-variation-settings:'wdth' 96,'wght' 640;
  color:var(--dark-ink); font-variant-numeric:tabular-nums;
}
.calc__field input:focus{ outline:none; }
.calc__field input::-webkit-outer-spin-button,
.calc__field input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.calc__field input[type=number]{ -moz-appearance:textfield; appearance:textfield; }

.calc__range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:2.75rem; margin:-.55rem 0 -.7rem;
  background:transparent; cursor:pointer;   /* 44px hit area, 2px track */
}
.calc__range::-webkit-slider-runnable-track{ height:2px; background:var(--dark-line); }
.calc__range::-moz-range-track{ height:2px; background:var(--dark-line); }
.calc__range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:1rem; height:1rem; border-radius:50%; margin-top:-.44rem;
  background:var(--accent); cursor:pointer; border:0;
}
.calc__range::-moz-range-thumb{
  width:1rem; height:1rem; border-radius:50%;
  background:var(--accent); cursor:pointer; border:0;
}
.calc__range:focus-visible{ outline:2px solid var(--accent); outline-offset:8px; }

.calc__f select{
  width:100%; padding:.85rem .95rem; border-radius:0;
  background:rgba(238,234,224,.045); border:1px solid var(--dark-line);
  color:var(--dark-ink); font-family:var(--body); font-size:1rem;
  appearance:none; -webkit-appearance:none; padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23A9A294' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .95rem center;
  transition:border-color .2s var(--ease);
}
.calc__f select:focus{ outline:none; border-color:var(--accent); }

.calc__out{
  background:rgba(238,234,224,.05); border:1px solid var(--dark-line);
  padding:clamp(1.5rem,3vw,2.25rem); position:relative; overflow:hidden;
}
.calc__out::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:var(--tex-marble); background-size:600px 600px;
  opacity:.4; mix-blend-mode:soft-light;
}
.calc__out > *{ position:relative; z-index:1; }
.calc__lbl{
  font-family:var(--mono); font-size:var(--t-mono);
  letter-spacing:.12em; text-transform:uppercase; color:var(--dark-soft);
}
.calc__big{
  margin-top:.5rem; color:var(--accent);
  font-family:var(--sans); font-size:clamp(3.4rem,8.5vw,6rem);
  font-variation-settings:'wdth' 112,'wght' 820;
  letter-spacing:-.045em; line-height:.88; font-variant-numeric:tabular-nums;
}
.calc__big small{
  font-size:.26em; letter-spacing:.02em;
  font-variation-settings:'wdth' 96,'wght' 620;
}
.calc__say{
  margin-top:1.1rem; padding-top:1.1rem;
  border-top:1px solid var(--dark-line);
  color:var(--dark-ink); font-size:1.05rem; line-height:1.5; text-wrap:pretty;
}
.calc__rows{ margin-top:1.4rem; display:grid; gap:.1rem; }
.calc__rows > div{
  display:flex; justify-content:space-between; gap:1rem;
  padding-block:.6rem; border-top:1px solid var(--dark-line);
}
.calc__rows dt{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.06em; color:var(--dark-soft); }
.calc__rows dd{ margin:0; font-family:var(--sans); font-variation-settings:'wdth' 96,'wght' 640; font-variant-numeric:tabular-nums; }
.calc__note{
  margin-top:clamp(1.75rem,3.5vw,2.5rem); max-width:var(--measure);
  font-size:var(--t-sm); color:var(--dark-soft);
}



/* =============================================== SOCIAL
   Icon plus label in the footer, icon-only buttons beside the
   contact details. Every icon is inline SVG drawn on currentColor,
   so it recolours with its surroundings like everything else. */
.soc{ display:inline-flex; align-items:center; gap:.7rem; }
.soc__i{
  flex:none; width:1.9rem; height:1.9rem;
  display:grid; place-items:center;
  border:1px solid var(--dark-line); border-radius:50%;
  transition:background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.soc__i svg{ width:.95rem; height:.95rem; display:block; }
.soc:hover .soc__i{ background:var(--accent); border-color:var(--accent); color:var(--ink); }

.socrow{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin-top:clamp(1.5rem,3vw,2rem);
  padding-top:clamp(1.25rem,2.5vw,1.6rem);
  border-top:1px solid var(--dark-line);
}
.socbtn{
  width:2.9rem; height:2.9rem;
  display:grid; place-items:center;
  border:1px solid var(--dark-line); border-radius:50%;
  color:var(--dark-soft); text-decoration:none;
  transition:background-color .25s var(--ease), border-color .25s var(--ease),
             color .25s var(--ease), transform .25s var(--ease);
}
.socbtn svg{ width:1.15rem; height:1.15rem; display:block; }
.socbtn:hover{
  background:var(--accent); border-color:var(--accent);
  color:var(--ink); transform:translateY(-2px);
}
@media (pointer: coarse){ .socbtn{ width:44px; height:44px; } }

/* =================================================== CURSOR
   An outlined ring that trails the pointer. mix-blend-mode
   difference means it inverts whatever is under it, so it is
   cream on the dark sections and near-black on the paper ones
   and never disappears. Only ever switched on for a fine
   pointer with motion allowed; touch keeps the native cursor. */
.cursor{
  position:fixed; top:0; left:0; z-index:500;
  pointer-events:none; opacity:0;
  mix-blend-mode:difference; will-change:transform;
  transition:opacity .25s ease;
}
.cursor.is-on{ opacity:1; }
.cursor.is-text{ opacity:0; }
.cursor__ring{
  position:absolute; top:0; left:0;
  display:grid; place-items:center;
  width:32px; height:32px;
  transform:translate(-50%,-50%);
  border:1.5px solid #fff; border-radius:50%;
  background:transparent;
  transition:width .32s var(--ease), height .32s var(--ease),
             background-color .32s var(--ease), border-color .32s var(--ease),
             transform .2s var(--ease);
}
.cursor__ring b{
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
  opacity:0; transition:opacity .2s var(--ease);
}
.cursor.is-link .cursor__ring{ width:56px; height:56px; background:rgba(255,255,255,.17); }
/* over media the ring stops inverting and becomes a solid orange disc */
.cursor.is-media{ mix-blend-mode:normal; }
.cursor.is-media .cursor__ring{
  width:76px; height:76px;
  background:var(--accent); border-color:var(--accent);
}
.cursor.is-media .cursor__ring b{ opacity:1; }
.cursor.is-down .cursor__ring{ transform:translate(-50%,-50%) scale(.86); }

/* the native cursor only steps aside once the ring is actually running */
@media (pointer:fine){
  body.has-cursor,
  body.has-cursor a,
  body.has-cursor button,
  body.has-cursor select,
  body.has-cursor label,
  body.has-cursor .qa__q,
  body.has-cursor .cap__bar{ cursor:none; }
  body.has-cursor input[type="text"],
  body.has-cursor input[type="email"],
  body.has-cursor input[type="tel"],
  body.has-cursor input[type="number"],
  body.has-cursor textarea{ cursor:auto; }
}

/* a work tile is a real button now, so strip the browser chrome */
button.frame{
  display:block; width:100%; padding:0; border:0;
  appearance:none; -webkit-appearance:none;
  font:inherit; color:inherit; cursor:pointer;
}


/* ============================================ BOOT SEQUENCE
   The mark assembles centred, furls its wordmark away, travels
   to the header alone and only then lets the horizontal wordmark
   wipe in. Nothing rotates and nothing ever crosses anything
   else: every move is a mask wipe or a transform, the same
   language as the hero lines. It is a FLIP, so the lockup is
   parked exactly on the real nav mark and transformed away from
   it; animating back to identity lands it pixel-perfect.
   Inserted by script only, so no-JS visitors never see it. */
.boot{
  position:fixed; inset:0; z-index:600; overflow:hidden;
  --boot-ease:cubic-bezier(.45,.02,.18,1);
  background:rgba(20,19,16,.82);
  backdrop-filter:blur(22px) saturate(120%);
  -webkit-backdrop-filter:blur(22px) saturate(120%);
  transition:opacity .6s var(--boot-ease), background-color .6s var(--boot-ease);
}
.boot[hidden]{ display:none; }

.boot__mark{
  position:fixed; left:0; top:0;
  transform-origin:50% 50%;
  will-change:transform;
  transform:translate(var(--mx,0px), var(--my,0px)) scale(var(--ms,6));
}

/* 1. the K wipes up into view */
.boot__mark .mark__k{ clip-path:inset(100% 0 0 0); }
.boot.is-in .boot__mark .mark__k{
  clip-path:inset(0 0 0 0);
  transition:clip-path .8s var(--boot-ease);
}

/* 2. the wordmark runs up the spine, statically rotated, revealed
      along its own reading direction rather than spun into place */
.boot__vert{
  position:absolute; left:0; top:0;
  white-space:nowrap; transform-origin:50% 50%;
  font-family:var(--sans); text-transform:uppercase;
  font-variation-settings:'wdth' 78,'wght' 760;
  letter-spacing:.08em; line-height:1;
  transform:translate(var(--wx,0px), var(--wy,0px)) rotate(-90deg) scale(var(--ws,.4));
  clip-path:inset(0 100% 0 0);
}
.boot.is-vert .boot__vert{
  clip-path:inset(0 -4% 0 0);
  transition:clip-path .6s var(--boot-ease);
}
/* 3. it furls back the way it came, fully gone before anything moves */
.boot.is-furl .boot__vert{
  clip-path:inset(0 100% 0 0);
  transition:clip-path .45s var(--boot-ease);
}

/* 4. the K travels to the header on its own */
.boot.is-home .boot__mark{
  transform:none;
  transition:transform .85s var(--boot-ease);
}

/* 5. only once it has landed does the horizontal wordmark wipe in */
.boot__mark .mark__w{ clip-path:inset(0 100% 0 0); }
.boot.is-word .boot__mark .mark__w{
  clip-path:inset(0 -4% 0 0);
  transition:clip-path .6s var(--boot-ease);
}

/* 6. the blur lifts off the site */
.boot.is-out{
  opacity:0; pointer-events:none;
  background-color:rgba(20,19,16,0);
  backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px);
}

/* a skip shortens every remaining step rather than cutting hard */
.boot.is-fast .boot__mark,
.boot.is-fast .boot__mark .mark__k,
.boot.is-fast .boot__mark .mark__w,
.boot.is-fast .boot__vert{ transition-duration:.26s !important; }

body.booting{ overflow:hidden; }

/* ============================================= RESPONSIVE */
section[id],div[id]{ scroll-margin-top:5.5rem; }

@media (max-width:1024px){
  .stance__grid,.price__top,.faq__grid,.start__grid{ grid-template-columns:minmax(0,1fr); }
  .cap__body > div{ grid-template-columns:minmax(0,1fr); padding-left:0; }
  .price__grid{ grid-template-columns:minmax(0,1fr); gap:1rem; }
  .plan--lead{ transform:none; }
  .is-timeline .plan--lead{ animation-name:timelineIn; }
  .proc__list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .anat__list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .calc{ grid-template-columns:minmax(0,1fr); }
  .grid-stills{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tile--wide{ grid-column:span 2; }
  .sec::before,.hero::before{ background-image:repeating-linear-gradient(90deg,
    transparent 0 calc(25% - 1px), currentColor calc(25% - 1px), currentColor 25%); }
  .hero::before{ background-image:repeating-linear-gradient(90deg,
    transparent 0 calc(25% - 1px), var(--dark-ink) calc(25% - 1px), var(--dark-ink) 25%); }
}

@media (max-width:860px){
  .burger{ display:block; }
  .mark{ padding-block:.35rem; }   /* 44px touch target */
  .nav__links{
    position:fixed; left:0; right:0; top:4.5rem;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--dark); border-bottom:1px solid var(--dark-line);
    padding:.5rem var(--gutter) 1.75rem;
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translate3d(0,-10px,0);
    transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  }
  .nav__links.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:none; }
  .nav__links a:not(.btn){ padding:1rem 0; border-bottom:1px solid var(--dark-line); font-size:var(--t-sm); color:var(--dark-ink); }
  .nav__links a:not(.btn)::after{ display:none; }
  .nav__links .btn{ margin-top:1.2rem; }
  .proof__quotes{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width:640px){
  .grid-reels{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-stills{ grid-template-columns:minmax(0,1fr); }
  .tile--wide{ grid-column:span 1; }
  .proc__list{ grid-template-columns:minmax(0,1fr); }
  .anat__list{ grid-template-columns:minmax(0,1fr); }
  .anat__bar{ height:2.6rem; }
  .anat__seg{ padding:0 .45rem; gap:.3rem; }
  .anat__seg i{ display:none; }
  .f-row{ grid-template-columns:minmax(0,1fr); }
  .hero__acts .btn{ flex:1 1 auto; }
  .ember--far{ display:none; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
  .mark--foot,.foot__where{ grid-column:1/-1; }
  .foot__nav{ grid-column:1; grid-row:3; }
  .foot__social{ grid-column:2; grid-row:3; }
  .foot__legal{ grid-row:4; }
  .cap__bar{ gap:.9rem; }
  .modal__x{ top:-2.4rem; right:0; }

}


/* ============================== TOUCH TARGETS
   Keyed off pointer type, not width, so a tablet gets these too.
   Everything tappable clears 44px without changing how it looks. */
@media (pointer: coarse){
  .foot__nav a,
  .foot__social a{ min-height:44px; display:flex; align-items:center; }
  .foot__nav,
  .foot__social{ gap:0; }
  .start__meta li a{ min-height:44px; display:inline-flex; align-items:center; }
  .link-big{ min-height:44px; align-items:center; }
  .nav__links a:not(.btn){ min-height:44px; display:flex; align-items:center; }
}

/* ========================================== REDUCED MOTION */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  body.reveal [data-reveal] .frame{ clip-path:none; }
  body.reveal [data-reveal] .tile__cap{ opacity:.62; }
  .ember{ animation:none !important; opacity:.5; transform:none; }
  [data-stagger]{ opacity:1 !important; filter:none !important; transform:none !important; }
  .plan--lead{ transform:scale(1.045) !important; }
  .cut > i{ transform:none !important; }
  .ember--base{ opacity:.85; }
}