/*
Theme Name: feteOps
Theme URI: https://feteops.com/
Author: built for feteOps
Description: Scroll-driven single page site for feteOps. Plain CSS and vanilla JavaScript, no build step. The hero animation is driven by anime.js, vendored in assets/vendor.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: All rights reserved
Text Domain: feteops
*/

:root{
  --canvas:#0E1310;
  --canvas-deep:#080B09;
  --panel:#161D18;
  --panel-2:#1B231D;
  --accent:#E8C34A;
  --accent-hover:#F2D268;
  --accent-muted:rgba(232,195,74,.20);
  --sage:#8FC97F;
  --forest:#4A7C2F;
  /* the four exact stroke colours sampled from the logo artwork */
  --logo-pale:#FFE699;
  --logo-sage:#A9D18E;
  --logo-yellow:#FFD966;
  --logo-green:#548235;
  --text-primary:#F4F6F3;
  --text-secondary:#A2AEA4;
  --line:rgba(143,201,127,.18);
  --line-strong:rgba(143,201,127,.34);
  --display:'Jost',ui-sans-serif,system-ui,sans-serif;
  --body:'Karla',ui-sans-serif,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --e1:cubic-bezier(.22,.61,.36,1);
  --e2:cubic-bezier(.16,1,.3,1);
  --tshadow:0 1px 2px rgba(5,8,6,.95),0 3px 12px rgba(5,8,6,.78),0 10px 44px rgba(5,8,6,.8);
  --wrap:1180px;
}
*{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{font-family:var(--display);font-weight:400;letter-spacing:-.015em;line-height:1.1;margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sage)}
/* uncapped so the paragraph reaches the same right edge as the content below it */
.lede{color:var(--text-secondary)}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#10140F;padding:.7rem 1.1rem;z-index:200;border-radius:0 0 8px 0;font-weight:500}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- the fixed environment layer ---------- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env .glow{position:absolute;inset:-20%;background:
  radial-gradient(ellipse 50% 40% at 22% 18%,rgba(74,124,47,.16),transparent 60%),
  radial-gradient(ellipse 44% 38% at 82% 72%,rgba(232,195,74,.07),transparent 62%);
  animation:drift 78s var(--e1) -14s infinite alternate}
@keyframes drift{from{transform:translate3d(-1.5%,-1%,0) scale(1)}to{transform:translate3d(1.5%,1.5%,0) scale(1.06)}}
.dust{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--sage);opacity:.16;
  animation:float 26s linear infinite}
@keyframes float{0%{transform:translateY(12vh) translateX(0);opacity:0}
  12%{opacity:.2}88%{opacity:.16}100%{transform:translateY(-104vh) translateX(22px);opacity:0}}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;
  padding:.85rem 0;transition:background .5s var(--e1),border-color .5s var(--e1);
  border-bottom:1px solid transparent}
/* No backdrop-filter here. A blurred backdrop re-blurs this whole strip on every
   scroll frame, and measured as the single largest cause of dropped frames on the
   page. A near-opaque background reads the same and costs nothing. */
.nav.solid{background:rgba(11,15,12,.94);border-bottom-color:var(--line)}
.nav .row{display:flex;align-items:center;gap:2rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:0 0 auto}
.brand svg{width:36px;height:24px;flex:0 0 auto}  /* 226:148, the logo aspect */
/* the artwork is Century Gothic: lighter and wider than Jost sits by default */
.brand b{font-family:var(--display);font-weight:200;font-size:1.32rem;letter-spacing:.015em;line-height:1}
/* the wordmark's two halves, sampled from the artwork: fete #FFD966, Ops #A9D18E.
   Used by the nav, the footer and the hero headline so all three agree. */
.wf{color:var(--logo-yellow)}
.wo{color:var(--logo-sage)}
/* the strapline sits under the wordmark exactly as it does in the logo. In the
   artwork 'celebrate' is black, which is invisible here, so it takes the page's
   neutral text colour while 'accelerate' and the divider keep the logo green. */
.wordmark{display:flex;flex-direction:column;gap:.16rem;line-height:1}
.tag{font-family:var(--display);font-size:.62rem;letter-spacing:.1em;line-height:1;
  color:var(--text-secondary);white-space:nowrap}
.tag .ac{color:var(--sage)}
.tag .di{color:var(--sage);opacity:.6;margin:0 .42em}
.navlinks{margin-left:auto;display:flex;gap:1.9rem;align-items:center}
.navlinks .menu-items{display:flex;align-items:center;gap:1.9rem;list-style:none;margin:0;padding:0}
.navlinks a{font-size:.9rem;color:var(--text-secondary);text-decoration:none;position:relative;transition:color .35s var(--e1)}
.navlinks a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--sage);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--e2)}
.navlinks a:not(.btn):hover{color:var(--text-primary)}
.navlinks a:not(.btn):hover::after{transform:scaleX(1)}
/* the button must beat `.navlinks a` on specificity or its label inherits the muted link colour */
.navlinks a.btn{font-size:.94rem;white-space:nowrap}
.navlinks a.btn-primary{color:#12160F}
.navlinks a.btn-ghost{color:var(--text-primary)}
.btn .short{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--display);font-weight:500;font-size:.94rem;letter-spacing:.01em;
  padding:.72rem 1.35rem;border-radius:999px;text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .4s var(--e2),background .4s var(--e1),box-shadow .4s var(--e1),color .4s var(--e1)}
.btn-primary{background:var(--accent);color:#12160F;box-shadow:0 0 0 0 var(--accent-muted)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 10px 30px -10px rgba(232,195,74,.5)}
.btn-ghost{border-color:var(--line-strong);color:var(--text-primary)}
.btn-ghost:hover{border-color:var(--sage);transform:translateY(-2px);background:rgba(143,201,127,.07)}
.btn:active{transform:translateY(0)}
@media (pointer:coarse){.btn{min-height:44px}}

/* ---------- hero ---------- */
.hero{position:relative;height:240vh;z-index:1}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(1.2rem,4vh,2.6rem)}
.stage .shot{position:absolute;inset:0;background:url('assets/hero.jpg') center/cover no-repeat;
  transform:scale(1.06);will-change:transform}
.stage .scrim{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(ellipse 120% 92% at 50% 42%,rgba(10,14,11,0) 30%,rgba(10,14,11,.72) 100%),
  linear-gradient(to bottom,rgba(10,14,11,.66) 0%,rgba(10,14,11,.18) 34%,rgba(10,14,11,.9) 100%)}
/* The assembling mark. anime.js flies these into register.
   Deliberately plain elements with borders, not SVG strokes and not a drop-shadow
   filter: both of those re-rasterize on every scroll frame. Everything animated
   here is transform and opacity only, so the compositor does the work. */
/* sized to the logo's own 226:148 proportion, so the assembled state IS the mark.
   container-type lets the card strokes scale with the mark instead of staying a
   fixed pixel weight that reads too thin large and too heavy small. */
.glyph{position:relative;z-index:2;flex:0 0 auto;
  width:min(46vh,360px);aspect-ratio:226/148;will-change:transform;
  container-type:size}
/* Barely-there separation behind the mark. The hero image is a clean gradient now,
   so a heavy dark core reads as a visible disc rather than as depth. */
.gglow{position:absolute;inset:-24%;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle at 50% 48%,
    rgba(8,12,9,.26) 0%,rgba(8,12,9,.12) 42%,rgba(143,201,127,.09) 62%,transparent 76%)}
/* Four boxes, every one 134x95 with an 18 radius in the artwork's units.
   134/226 = 59.3% wide, 95/148 = 64.2% tall, 18/134 = 13.4% radius.
   Resting positions are the artwork's own coordinates as percentages, so when
   anime.js zeroes the offsets the result is the logo, not an approximation. */
/* Each card is filled and FULLY opaque so it hides the cards behind it, exactly
   as the artwork does. Anything translucent lets the strokes underneath ghost
   through and the mark stops reading as a stack. Flat colour, not a gradient:
   a gradient here measured 26 to 43 dropped frames per scroll against 0.
   Stroke weight is off the artwork: 2.7% of a card's width on the three light
   cards, 3.9% on the dark green. A card is 59.3% of the mark, so as a share of
   the mark that is 1.85% and 2.4%. cqw keeps the ratio at any size. */
.gp{position:absolute;display:block;width:59.3%;height:64.2%;
  border:1.85cqw solid;border-radius:13.4%/18.9%;
  background:#0F1410;
  will-change:transform,opacity;backface-visibility:hidden}
#g1{left:0.9%;  top:1.4%;  border-color:var(--logo-pale)}
#g2{left:19.0%; top:1.4%;  border-color:var(--logo-sage)}
#g3{left:38.5%; top:1.4%;  border-color:var(--logo-yellow)}
#g4{left:17.7%; top:31.8%; border-color:var(--logo-green);border-width:2.4cqw}
@supports not (border-width:1cqw){
  .gp{border-width:6px} #g4{border-width:8px}
}

.beats{position:relative;z-index:3;width:min(100% - 2.5rem,var(--wrap));
  min-height:clamp(180px,25vh,280px)}
.beat{position:absolute;left:0;right:0;top:0;text-align:center;
  text-shadow:var(--tshadow);opacity:0;will-change:opacity,transform}
.beat .btn{text-shadow:none}
.beat h2{font-size:clamp(1.85rem,5vw,3.6rem);font-weight:300;letter-spacing:-.03em;
  max-width:20ch;margin-inline:auto;text-wrap:balance}
.trip{display:flex;gap:clamp(1rem,3.4vw,2.4rem);justify-content:center;flex-wrap:wrap;
  font-family:var(--display);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(1.1rem,3vw,2.05rem);color:var(--text-primary)}
.trip span{position:relative}
.trip span+span::before{content:"";position:absolute;left:calc(-1 * clamp(.5rem,1.7vw,1.2rem));top:.62em;
  width:4px;height:4px;border-radius:1px;background:var(--sage);opacity:.65}
.beat.settle{opacity:1}
.settle h2{font-size:clamp(2.4rem,6.6vw,4.7rem);font-weight:450;letter-spacing:-.018em;opacity:0}
.settle .sub{margin:1rem auto 0;max-width:46ch;color:#D6DED7;font-size:clamp(1rem,2.1vw,1.14rem);opacity:0}
.settle .cta{margin-top:1.8rem;display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;opacity:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cue{position:absolute;bottom:2.1rem;left:50%;transform:translateX(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary);
  transition:opacity .6s var(--e1)}
.cue span{display:block;width:1px;height:34px;background:linear-gradient(to bottom,var(--sage),transparent);
  animation:cue 2.6s var(--e1) infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);opacity:.35;transform-origin:top}50%{transform:scaleY(1);opacity:1;transform-origin:top}}

/* ---------- shared section furniture ---------- */
main{position:relative;z-index:2;background:var(--canvas)}
section{padding:clamp(2.25rem,5vh,3.75rem) 0;position:relative;scroll-margin-top:84px}
/* Every section title runs on ONE rule keyed off the section, not off a wrapper
   class. Two sections did not use .sechead and were silently falling back to the
   browser default h2, which is why they did not match the others. */
main section h2{font-size:clamp(1.85rem,4.4vw,3.05rem);font-weight:300;letter-spacing:-.03em;
  margin:.9rem 0 1.1rem;text-wrap:balance}
/* No cap here. The heading fills its column and lines up with the content and the
   rule beneath it. The readable measure belongs on the paragraph, and .lede carries
   it on the text element itself where a ch unit resolves against the right font. */
.sechead{max-width:none}
.rule{height:1px;background:linear-gradient(to right,var(--line-strong),transparent);margin:0 0 3rem}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .95s var(--e2),transform .95s var(--e2)}
.reveal.in{opacity:1;transform:none}
.stag>*{opacity:0;transform:translateY(24px);transition:opacity .85s var(--e2),transform .85s var(--e2)}
.stag.in>*{opacity:1;transform:none}
.stag.in>*:nth-child(1){transition-delay:0ms}
.stag.in>*:nth-child(2){transition-delay:90ms}
.stag.in>*:nth-child(3){transition-delay:180ms}
.stag.in>*:nth-child(4){transition-delay:270ms}
.stag.in>*:nth-child(5){transition-delay:360ms}
.stag.done>*:nth-child(n){transition-delay:0s!important}

/* ---------- section: the execution gap ---------- */
.gap-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.gapfig{position:relative;padding:2.4rem 2rem;border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(160deg,rgba(143,201,127,.05),rgba(232,195,74,.03));overflow:hidden}
.gapfig .big{font-family:var(--display);font-size:clamp(4.2rem,12vw,7rem);font-weight:500;
  line-height:.9;letter-spacing:-.05em;color:var(--accent);display:block}
.gapfig p{margin-top:1rem;color:var(--text-secondary);font-size:.98rem}
.gapfig::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 60% at 78% 12%,rgba(232,195,74,.14),transparent 70%);
  opacity:.7;animation:pulse 7s var(--e1) -2s infinite alternate}
@keyframes pulse{from{opacity:.35}to{opacity:.9}}
.stats{display:flex;gap:2.4rem;flex-wrap:wrap;margin-top:2.2rem}
.stat b{font-family:var(--display);font-size:1.7rem;font-weight:500;color:var(--text-primary);display:block;letter-spacing:-.02em}
.stat span{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}

/* ---------- section: three capabilities ---------- */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:1rem}
.cap{position:relative;padding:2rem 1.7rem 1.9rem;border:1px solid var(--line);border-radius:20px;
  background:var(--panel);overflow:hidden;transition:border-color .55s var(--e1),transform .55s var(--e2),background .55s var(--e1)}
.cap:hover{border-color:var(--line-strong);transform:translateY(-5px);background:var(--panel-2)}
.cap .motif{position:absolute;right:-26px;top:-26px;width:150px;height:98px;opacity:.2;
  transition:opacity .6s var(--e1),transform .8s var(--e2)}
.cap:hover .motif{opacity:.42;transform:rotate(-7deg) scale(1.06)}
.cap .num{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--sage)}
.cap h3{font-size:1.5rem;font-weight:500;margin:.85rem 0 .55rem}
.cap .role{color:var(--text-secondary);font-size:.97rem;min-height:3.1em}
.cap ul{list-style:none;margin:1.35rem 0 0;padding:0;border-top:1px solid var(--line);padding-top:1.1rem}
.cap li{font-size:.92rem;color:var(--text-secondary);padding:.36rem 0 .36rem 1.1rem;position:relative}
.cap li::before{content:"";position:absolute;left:0;top:.95em;width:5px;height:5px;border-radius:1.5px;
  border:1px solid var(--sage);opacity:.75}
.capnote{margin-top:2.6rem;text-align:center;font-family:var(--display);font-size:clamp(1.15rem,2.6vw,1.5rem);
  font-weight:300;color:var(--text-primary);letter-spacing:-.02em}

/* ---------- section: engagement model + interactive moment ---------- */
.model{background:linear-gradient(to bottom,transparent,rgba(74,124,47,.05),transparent)}
.model-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,4.5rem);align-items:center}
.aligner{position:relative;aspect-ratio:1;max-width:400px;width:100%;margin-inline:auto;
  display:grid;place-items:center;touch-action:none;cursor:grab;
  border:1px solid var(--line);border-radius:24px;background:rgba(8,11,9,.5);overflow:hidden}
.aligner:active{cursor:grabbing}
.aligner svg{width:88%;height:88%;overflow:visible}
.aligner .pnl{transition:none}
.aligner .hint{position:absolute;bottom:1rem;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-secondary);transition:opacity .5s var(--e1)}
.aligner .ringwrap{position:absolute;top:1rem;right:1rem;width:26px;height:26px}
.aligner .ringwrap circle{fill:none;stroke-width:2.5}
.steps{list-style:none;margin:0;padding:0;position:relative}
.steps li{position:relative;padding:0 0 2.1rem 3.3rem}
.steps li:last-child{padding-bottom:0}
.steps .dot{position:absolute;left:0;top:.15rem;width:30px;height:30px;border-radius:9px;
  border:1px solid var(--line-strong);display:grid;place-items:center;
  font-family:var(--mono);font-size:.78rem;color:var(--text-secondary);
  transition:border-color .6s var(--e1),color .6s var(--e1),background .6s var(--e1),box-shadow .6s var(--e1)}
.steps li.lit .dot{border-color:var(--accent);color:#12160F;background:var(--accent);
  box-shadow:0 0 26px -6px rgba(232,195,74,.6)}
.steps .line{position:absolute;left:15px;top:34px;bottom:6px;width:1px;background:var(--line);overflow:hidden}
.steps .line i{position:absolute;inset:0;background:linear-gradient(to bottom,var(--sage),transparent);
  transform:scaleY(0);transform-origin:top;transition:transform .8s var(--e2)}
.steps li.lit .line i{transform:scaleY(1)}
.steps h3{font-size:1.22rem;font-weight:500;margin-bottom:.35rem;transition:color .6s var(--e1);color:var(--text-secondary)}
.steps li.lit h3{color:var(--text-primary)}
.steps p{color:var(--text-secondary);font-size:.95rem}
.steps .tags{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--forest);margin-top:.5rem;
  transition:color .6s var(--e1)}
.steps li.lit .tags{color:var(--sage)}

/* ---------- section: who ---------- */
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.who>div{padding:2.2rem 1.8rem;border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  transition:background .55s var(--e1)}
.who>div:last-child{border-right:none}
.who>div:hover{background:rgba(143,201,127,.045)}
.who h3{font-size:1.3rem;font-weight:500;margin-bottom:.5rem}
.who .say{color:var(--sage);font-size:.95rem;margin-bottom:1rem}
.who p{color:var(--text-secondary);font-size:.93rem}

/* ---------- section: why ---------- */
/* five reasons read as one strip. Borders, not a background-gap fill, so a short
   final row can never paint an empty slab. */
.why-wrap{display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.why-wrap>div{padding:1.9rem 1.35rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background .55s var(--e1)}
.why-wrap>div:hover{background:var(--panel)}
.why-wrap h3{font-family:var(--display);font-size:1.05rem;font-weight:500;margin-bottom:.5rem;color:var(--text-primary);text-wrap:balance}
.why-wrap p{color:var(--text-secondary);font-size:.9rem}
.why-wrap .ix{font-family:var(--mono);font-size:.68rem;color:var(--accent);letter-spacing:.14em;display:block;margin-bottom:.9rem}
@media (max-width:1080px){
  .why-wrap{grid-template-columns:repeat(2,1fr)}
  .why-wrap>div:nth-child(5){grid-column:1 / -1}
}
@media (max-width:640px){
  .why-wrap{grid-template-columns:1fr}
  .why-wrap>div:nth-child(5){grid-column:auto}
}

/* ---------- faq ---------- */
/* the question list is deliberately narrower than the page, so its heading is
   capped to the same width rather than overhanging it */
.faq,#faq .sechead{max-width:100%}
.q{border-bottom:1px solid var(--line)}
.q button{width:100%;background:none;border:0;color:inherit;text-align:left;cursor:pointer;
  font-family:var(--display);font-size:clamp(1.02rem,2.3vw,1.24rem);font-weight:400;letter-spacing:-.01em;
  padding:1.4rem 3rem 1.4rem 0;position:relative;transition:color .4s var(--e1)}
.q button:hover{color:var(--sage)}
.q button::after{content:"";position:absolute;right:.4rem;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--sage);border-bottom:1.5px solid var(--sage);
  transform:translateY(-70%) rotate(45deg);transition:transform .5s var(--e2)}
.q.open button::after{transform:translateY(-25%) rotate(-135deg)}
.q .a{max-height:0;overflow:hidden;transition:max-height .65s var(--e2),opacity .5s var(--e1);opacity:0}
.q.open .a{opacity:1}
.q .a p{padding:0 2rem 1.6rem 0;color:var(--text-secondary);max-width:64ch}

/* ---------- cta + form ---------- */
.book{position:relative;overflow:hidden;background:var(--canvas-deep);border-top:1px solid var(--line)}
.book .bg{position:absolute;inset:0;background:url('assets/water.jpg') center/cover no-repeat;opacity:.22}
.book .bgscrim{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(8,11,9,.86),rgba(8,11,9,.96))}
.book .wrap{position:relative;z-index:2}
.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,4.5rem);align-items:start}
.next{list-style:none;counter-reset:n;margin:2.2rem 0 0;padding:0;max-width:46ch}
.next li{counter-increment:n;position:relative;padding:0 0 1.25rem 2.6rem;color:var(--text-secondary);font-size:.95rem}
.next li:last-child{padding-bottom:0}
.next li::before{content:counter(n);position:absolute;left:0;top:-.1rem;width:26px;height:26px;border-radius:8px;
  border:1px solid var(--line-strong);display:grid;place-items:center;
  font-family:var(--mono);font-size:.72rem;color:var(--sage)}
.next b{color:var(--text-primary);font-weight:500}
#bookform {display:grid;gap:1rem}
.field label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary);margin-bottom:.45rem}
.field input,.field textarea{width:100%;background:rgba(22,29,24,.8);border:1px solid var(--line-strong);
  border-radius:11px;padding:.82rem .95rem;color:var(--text-primary);font-family:var(--body);font-size:1rem;
  transition:border-color .4s var(--e1),background .4s var(--e1)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:rgba(27,35,29,.95)}
.field textarea{min-height:118px;resize:vertical}
#bookform .btn{justify-self:start;margin-top:.4rem}
.thanks{display:none;padding:1.15rem 1.2rem;border:1px solid var(--sage);border-radius:12px;
  background:rgba(143,201,127,.09);color:var(--text-primary);font-size:.96rem}
.thanks.show{display:block;animation:pop .6s var(--e2)}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:3.2rem 0 2.4rem;background:var(--canvas-deep);position:relative;z-index:2}
.foot{display:flex;gap:2.5rem;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
.foot .col h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);font-weight:400;margin-bottom:.85rem}
.foot .col a,.foot .col p{display:block;color:var(--text-secondary);font-size:.93rem;text-decoration:none;
  padding:.2rem 0;transition:color .35s var(--e1)}
.foot .col a:hover{color:var(--sage)}
.foot .footer-widget{min-width:150px}
.foot .footer-widget ul,.foot .footer-menu{list-style:none;margin:0;padding:0}
.foot .footer-widget li,.foot .footer-menu li{margin:0;padding:0}
.foot .footer-widget .widget-title{margin-top:0}
.foot .footer-widget p:first-child{margin-top:0}
.legal{margin-top:2.8rem;padding-top:1.5rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.82rem;color:var(--text-secondary)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .gap-wrap,.model-grid,.book-grid{grid-template-columns:1fr}
  .caps{grid-template-columns:1fr}
  .who{grid-template-columns:1fr}
  .who>div{border-right:none}
  .navlinks a:not(.btn){display:none}
}
@media (max-width:720px){
  body{font-size:16px}
  .nav{padding:.6rem 0}
  .navlinks a.btn{font-size:.84rem;padding:.6rem 1rem}
  .btn .full{display:none}
  .btn .short{display:inline}
  .brand b{font-size:1.12rem}
  .tag{font-size:.55rem;letter-spacing:.07em}
  section{scroll-margin-top:66px}
  /* Phones get the scroll journey too. This block used to collapse the hero to a
     single static screen, which made sense when the hero was a heavy scrubbing
     video. It is four CSS transforms now: measured on an emulated phone at 6x CPU
     throttle it costs 11 dropped frames against the static version's 8, and 0 at
     4x. Only reduced motion and genuinely short screens still get the still. */
  .hero{height:220vh}
  .glyph{width:min(38vh,240px)}
  .beats{min-height:clamp(150px,24vh,220px)}
  .cue{display:none}
}
@media (max-width:460px){.tag{display:none}}
/* A phone held sideways has no vertical room for the journey, so it gets the
   finished composition on one screen. Must match the SHORT query in main.js. */
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px){
  .hero{height:auto}
  .stage{position:relative;height:auto;min-height:100svh;padding:5rem 0 3rem;justify-content:center}
  .stage .shot{transform:none}
  .glyph{width:min(30vh,180px)}
  .beats{min-height:0}
  .beat{position:relative}
  .beat.a{display:none}
  .beat.settle{opacity:1}
}
@media (max-height:560px){.cue{display:none}}

/* ---------- reduced motion, honored completely ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .reveal,.stag>*{opacity:1!important;transform:none!important}
  .beats{min-height:0}
  .beat{position:relative}
  .beat.a{display:none}
  .beat.settle{opacity:1}
  .settle h2,.settle .sub,.settle .cta{opacity:1!important;transform:none!important}
  .hero{height:auto}
  .stage{position:relative;height:auto;min-height:100svh;padding:6.5rem 0 4rem;justify-content:center}
  .stage .shot{transform:none}
  .glyph{width:min(28vh,220px);height:min(28vh,220px);transform:none!important}
  .gp{transform:none!important;opacity:1!important}
  .cue{display:none}
  .dust,.env .glow{display:none}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- reusable WordPress templates ---------- */
.site-header{background:rgba(11,15,12,.94);border-bottom-color:var(--line)}
.home .site-header{background:transparent;border-bottom-color:transparent}
.home .site-header.solid{background:rgba(11,15,12,.94);border-bottom-color:var(--line)}
.menu-toggle{display:none;margin-left:auto;width:44px;height:44px;padding:10px;background:transparent;border:1px solid var(--line-strong);border-radius:10px;color:var(--text-primary)}
.menu-toggle span:not(.sr){display:block;height:1px;margin:5px 0;background:currentColor}
.standard-page,.error-page{position:relative;z-index:2;min-height:calc(100vh - 270px);padding-top:clamp(8rem,14vw,11rem);padding-bottom:clamp(4rem,8vw,7rem)}
.content-card{max-width:900px;padding:clamp(1.5rem,4vw,3rem);border:1px solid var(--line);border-radius:22px;background:var(--panel)}
.content-card h1,.error-page h1{font-size:clamp(2.25rem,6vw,4.8rem);margin-bottom:1.4rem}
.content-card h2,.content-card h3{margin:2rem 0 .75rem}
.content-card p,.content-card li,.error-page p{color:var(--text-secondary)}
.content-card p+p{margin-top:1rem}
.error-page{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;max-width:850px}
.error-page .error-mark{position:absolute;right:0;top:50%;transform:translateY(-45%);font-family:var(--display);font-size:clamp(9rem,28vw,22rem);font-weight:600;line-height:1;color:rgba(143,201,127,.045);pointer-events:none}
.error-page h1{max-width:12ch;margin:.8rem 0 1rem}
.error-page p{max-width:55ch;margin-bottom:1.8rem}
.site-footer .col:first-child p{margin-top:.9rem;max-width:34ch}
.admin-bar .site-header{top:32px}

@media (max-width:782px){.admin-bar .site-header{top:46px}}
@media (max-width:1024px){
  .menu-toggle{display:block}
  .navlinks{display:none;position:absolute;left:1.25rem;right:1.25rem;top:calc(100% + .35rem);padding:1rem;background:#0B0F0C;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 45px rgba(0,0,0,.35)}
  .navlinks.open{display:grid;gap:.35rem}
  .navlinks.open .menu-items{display:grid;gap:.35rem}
  .navlinks.open a:not(.btn){display:block;padding:.65rem .5rem}
  .navlinks.open .btn{margin-top:.35rem}
}

@media (max-width: 600px) {
    .navlinks.open .btn {
        width: 100% !important;
    }
}
@media (max-width: 1024px) {
    .navlinks.open .btn {
        width: 40%;
    }
}