/* THEOLY V2 — homepage
   Every section is readable as plain HTML; js/motion.js and js/home.js layer
   the motion and interaction on top. */

/* =========================================================
   HERO — words on the page, light moving across it
   ========================================================= */
.hero{position:relative;overflow:hidden;isolation:isolate;min-height:100svh;display:flex;align-items:center;
  padding:calc(72px + clamp(2rem,6vh,4rem)) max(var(--gutter),calc((100% - 1280px) / 2)) clamp(4rem,9vh,6rem)}
.hero-copy{position:relative;z-index:1;max-width:820px}
/* the light: full-bleed, fading out behind the words */
.hero-bg{position:absolute;inset:0;z-index:-2;background:none}
.hero-bg::before,.hero-bg::after{display:none}
.hero-bg img,.hero-bg video{mix-blend-mode:multiply;transform-origin:70% 50%;animation:light-drift 28s ease-in-out infinite alternate;
  -webkit-mask-image:linear-gradient(100deg,transparent 18%,rgba(0,0,0,.55) 45%,#000 70%);mask-image:linear-gradient(100deg,transparent 18%,rgba(0,0,0,.55) 45%,#000 70%)}
.hero-bg.is-loaded img,.hero-bg.is-loaded video{opacity:.9}
@keyframes light-drift{from{transform:scale(1.06) translate(0,0)}to{transform:scale(1.14) translate(-2%,1.5%)}}
@media(max-width:760px){
  .hero-bg img,.hero-bg video{-webkit-mask-image:linear-gradient(180deg,transparent 30%,#000 85%);mask-image:linear-gradient(180deg,transparent 30%,#000 85%)}
}
.hero-glow{position:absolute;left:-10%;top:10%;width:min(900px,120vw);aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(232,196,140,.34),rgba(232,196,140,.08) 45%,transparent 68%);animation:drift 16s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(12%,6%)}}
.hero h1{margin-top:1.8rem;font-size:clamp(2.7rem,6.4vw,6.2rem);line-height:.98;letter-spacing:-.02em}
.hero h1 .line{display:block}
.hero .note{margin-top:1.6rem}
.hero-actions{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:2.4rem}
.hero .join{flex:1 1 320px;margin:0}
.hero-clock{margin-top:2.6rem;display:flex;align-items:center;gap:.8rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;color:var(--ink-2)}
.hero-clock .dot{width:8px;height:8px;border-radius:50%;background:var(--bronze);box-shadow:0 0 0 0 rgba(133,107,66,.5);animation:ping 2.2s ease-out infinite}
@keyframes ping{to{box-shadow:0 0 0 10px rgba(133,107,66,0)}}
.hero-clock b{font-weight:500;color:var(--ink)}


/* =========================================================
   TICKER — where her day happens
   ========================================================= */
.ticker{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);overflow:hidden;padding:1.1rem 0;background:var(--paper)}
.ticker-track{display:flex;width:max-content;animation:tick 48s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.motion .ticker-track{animation:none}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker-group{display:flex;align-items:center;flex-shrink:0}
.tick{display:flex;align-items:baseline;gap:.7rem;padding:0 1.6rem;white-space:nowrap}
.tick time{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;color:var(--muted)}
.tick span{font-style:italic;font-size:clamp(1.3rem,2.4vw,1.9rem)}
.tick-sep{width:28px;height:20px;flex-shrink:0}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* =========================================================
   MANIFESTO — words fill in as you read
   ========================================================= */
.manifesto{padding:clamp(6rem,14vw,11rem) 0}
.manifesto-text{font-size:clamp(1.9rem,4.4vw,3.9rem);line-height:1.18;letter-spacing:-.012em;max-width:22ch}
.manifesto-text .em{white-space:nowrap}
.chip-ico{display:inline-flex;align-items:center;justify-content:center;vertical-align:-.1em;width:1.9em;height:.9em;border:1.5px solid currentColor;border-radius:999px;margin:0 .08em;color:var(--bronze)}
.chip-ico svg{width:72%;height:auto}
.chip-ico .ico{stroke-width:2}
.manifesto-foot{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap;margin-top:clamp(2.5rem,5vw,4rem)}

/* =========================================================
   HER DAY — pinned scroll story (JS adds .day--story)
   ========================================================= */
.day{position:relative;background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.day-stage{position:relative;padding:clamp(5rem,10vw,8rem) var(--gutter)}
.day-head{max-width:var(--maxw);margin:0 auto 3rem}
.day-head .h-1{margin-top:1.4rem;max-width:20ch}
.day-sky{display:none}
.day-beats{list-style:none;max-width:var(--maxw);margin:0 auto;border-top:1px solid var(--rule)}
.beat{display:grid;grid-template-columns:7rem 10rem 1fr;gap:1.5rem;align-items:baseline;padding:1.4rem 0;border-bottom:1px solid var(--rule)}
.beat-ph{display:none}
.beat-txt{display:contents}
.beat time{font-size:2rem;line-height:1;font-variant-numeric:tabular-nums}
.beat .label{color:var(--ink-2)}
.beat p{font-size:1.2rem;font-style:italic;color:var(--ink-2)}
.beat--end{grid-template-columns:1fr;gap:.6rem}
.beat--end p{font-style:normal;color:var(--ink)}
.beat .slot-wrap{display:none}
.day-line{display:none}
@media(max-width:640px){.beat{grid-template-columns:5rem 1fr}.beat p{grid-column:1/-1}}

.day--story{height:600vh;background:none;border:0}
.day--story .day-stage{position:sticky;top:0;height:100vh;height:100svh;padding:0;overflow:hidden;background:var(--sky,#F7F3EC);color:var(--fg,#232321);transition:color .6s ease;display:flex;flex-direction:column}
.day--story .day-head{position:relative;z-index:2;width:100%;max-width:none;padding:calc(72px + 1.6rem) var(--gutter) 0;margin:0}
.day--story .day-head .mark{color:inherit;opacity:.8}
.day--story .day-head .h-1{display:none}
.day--story .day-sky{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.day-sky .arc{fill:none;stroke:currentColor;stroke-opacity:.22;stroke-width:1.2;stroke-dasharray:3 9;vector-effect:non-scaling-stroke}
/* layers: dotted path (0) · photo (1) · sun (2) · words (3) */
.day--story .day-sky{z-index:0}
.day--story .day-sun{z-index:2}
.day--story .day-beats{position:relative;flex:1;border:0;max-width:none;margin:0}
.day--story .beat-txt{position:relative;z-index:3}
.day--story .beat{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center;
  padding:0 max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)));border:0;pointer-events:none}
.day--story .beat-txt{display:flex;flex-direction:column;align-items:flex-start;opacity:0;transform:translateY(24px);transition:opacity .25s ease,transform .5s var(--ease)}
.day--story .beat time{font-size:clamp(4.4rem,11vw,10rem);letter-spacing:-.03em;line-height:.9}
.day--story .beat .label{margin-top:1.3rem;color:inherit;opacity:.75}
.day--story .beat p{margin-top:1.2rem;font-size:clamp(1.25rem,2.2vw,1.85rem);line-height:1.32;color:inherit;max-width:22ch}
.day--story .beat-ph{position:relative;z-index:1;background:none;display:block;order:-1;aspect-ratio:4/5;width:min(100%,430px);justify-self:start;clip-path:inset(100% 0 0 0);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  mask-composite:intersect;transform:scale(1.08);transition:clip-path .6s var(--ease),transform .9s var(--ease)}
.day--story .beat.on{pointer-events:auto}
.day--story .beat.on .beat-txt{opacity:1;transform:none;transition:opacity .6s ease .18s,transform .9s var(--ease) .12s}
.day--story .beat.on .beat-ph{clip-path:inset(0 0 0 0);transform:none;transition:clip-path 1s var(--ease) .05s,transform 1.4s var(--ease)}
.day--story .beat--end{grid-template-columns:minmax(0,1fr);text-align:center}
.day--story .beat--end .beat-txt{align-items:center}
.day--story .beat--end time{font-size:clamp(2.8rem,7.5vw,5.6rem)}
.day--story .beat--end p{max-width:none}
.day--story .beat--end .slot-wrap{display:block;margin:2rem auto 0;width:min(180px,40vw)}
.beat--end .slot{stroke:#C9AA78}
.beat--end .q{fill:#C9AA78}
.day--story .day-line{display:block;position:relative;z-index:2;padding:0 var(--gutter) 2.2rem}
.day-line .track{position:relative;max-width:var(--maxw);margin:0 auto;height:9px}
.day-line .track::before,.day-line .fill{content:"";position:absolute;left:0;top:4px;height:1px;background:currentColor}
.day-line .track::before{right:0;opacity:.25}
.day-line .fill{width:var(--p,0%);transition:width .7s var(--ease)}
.day-line ol{list-style:none;position:relative;max-width:var(--maxw);height:1.3em;margin:.8rem auto 0}
.day-line li{position:absolute;left:calc(var(--i) * 20%);transform:translateX(-50%);font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;opacity:.45;transition:opacity .4s}
.day-line li:first-child{transform:none}
.day-line li:last-child{transform:translateX(-100%)}
.day-line li::before{content:"";position:absolute;top:calc(-.8rem - 9px);left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:currentColor;transform:scale(.6);transition:transform .4s var(--ease)}
.day-line li:first-child::before{left:0;margin-left:0}
.day-line li:last-child::before{left:auto;right:0;margin-left:0}
.day-line li.on{opacity:1}
.day-line li.now::before{transform:scale(1)}
@media(max-width:820px){
  .day--story .beat{grid-template-columns:minmax(0,1fr);align-content:center;gap:1.4rem}
  .day--story .beat-ph{order:-1;justify-self:start;width:min(56%,240px)}
  .day--story .beat time{font-size:clamp(3.6rem,17vw,5.5rem)}
  .day-line li{font-size:.6rem;letter-spacing:.04em}
}

/* =========================================================
   HER BAG — tap what's inside
   ========================================================= */
.bag{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
.bag-copy .h-1{margin-top:1.6rem}
.bag-copy p.lead{margin-top:1.4rem}
.bag-read{margin-top:2.2rem;border-top:1px solid var(--ink);padding-top:1.2rem;min-height:7.5rem}
.bag-read .label{display:block}
.bag-read p{margin-top:.6rem;font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.3}
.bag-read .btn{margin-top:1.2rem}
.tally{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin-top:1.6rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em}
.tally span{color:var(--muted)}
.tally span.yes{color:var(--ink)}
.tally span.yes::before{content:"\2713  "}
.tally span.no{color:var(--bronze-text)}
.tally span.no::before{content:"\2715  "}

.tote{position:relative;padding:clamp(4.5rem,7vw,6rem) clamp(1.2rem,3vw,2.2rem) clamp(1.4rem,3vw,2.2rem);border:2px solid var(--ink);border-radius:4px 4px 26px 26px;background:var(--paper)}
.tote::before,.tote::after{content:"";position:absolute;top:-58px;width:22%;height:70px;border:2px solid var(--ink);border-bottom:0;border-radius:60px 60px 0 0}
.tote::before{left:20%}.tote::after{right:20%}
.tote-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.6rem,1.5vw,1rem)}
.item{position:relative;aspect-ratio:1;border:1px solid var(--rule);background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;
  transition:transform .45s var(--ease),border-color .3s,background .3s,box-shadow .45s var(--ease)}
.item svg{height:44%;width:auto;transition:transform .45s var(--ease)}
.item .note{font-size:clamp(.95rem,1.6vw,1.2rem);transform:none}
.item:hover,.item:focus-visible{transform:translateY(-6px) rotate(-1.5deg);border-color:var(--ink);box-shadow:0 14px 30px rgba(35,35,33,.12)}
.item:hover svg{transform:scale(1.06)}
.item[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.item--q{border:2px dashed var(--bronze);color:var(--bronze);grid-column:span 2;aspect-ratio:auto}
.item--q .q{font-size:clamp(2.4rem,5vw,3.4rem);line-height:1}
.item--q[aria-pressed="true"]{background:var(--bronze);color:var(--paper);border-style:solid}
@media(max-width:900px){.bag{grid-template-columns:minmax(0,1fr)}.tote{margin-top:3rem}}
@media(max-width:480px){.tote-grid{grid-template-columns:repeat(3,1fr)}.item--q{grid-column:span 3;min-height:96px}}

/* =========================================================
   THE BASICS — what fades by 4pm
   ========================================================= */
.fade-rows{margin-top:clamp(3rem,6vw,4.5rem);border-top:1px solid var(--ink)}
.fade-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:2rem;align-items:center;padding:clamp(1.4rem,3vw,2rem) 0;border-bottom:1px solid var(--ink)}
.fade-row .k{font-size:clamp(2.2rem,5vw,4rem);line-height:1}
.fade-row .v{display:block;font-style:italic;color:var(--ink-2);margin-top:.5rem;font-size:clamp(1rem,1.5vw,1.2rem)}
.meter{position:relative;height:44px;border:1px solid var(--ink);overflow:hidden}
.meter i{position:absolute;inset:0;background:linear-gradient(90deg,var(--ink),var(--bronze) 60%,#C9AA78);transform-origin:left;transform:scaleX(1);transition:transform 2.4s cubic-bezier(.45,0,.2,1)}
.fade-row.in .meter i{transform:scaleX(var(--left,.3))}
.meter-axis{display:flex;justify-content:space-between;margin-top:.5rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--muted)}
.fade-foot{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:end;margin-top:2.4rem}
.fade-foot small{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--muted)}
@media(max-width:700px){.fade-row{grid-template-columns:minmax(0,1fr);gap:1.2rem}}

/* =========================================================
   THE SHELF — every format has a catch
   ========================================================= */
.shelf{margin-top:clamp(3.5rem,7vw,5rem)}
.shelf-row{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;gap:1rem;border-bottom:2px solid var(--ink);padding:0 clamp(0rem,2vw,1.5rem)}
.form{position:relative;background:none;border:0;cursor:pointer;display:flex;justify-content:center;padding-top:5.5rem}
.form svg{height:clamp(90px,14vw,190px);width:auto;transition:transform .5s var(--ease)}
.form:hover svg,.form:focus-visible svg,.form[aria-expanded="true"] svg{transform:translateY(-10px) rotate(-3deg)}
.form .tip{position:absolute;top:0;left:50%;transform:translate(-50%,8px);opacity:0;pointer-events:none;white-space:nowrap;background:var(--ink);color:var(--paper);font-family:var(--hand);font-size:1.15rem;padding:.4rem .8rem;transition:opacity .3s,transform .4s var(--ease)}
.form .tip::after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:var(--ink)}
.form:hover .tip,.form:focus-visible .tip,.form[aria-expanded="true"] .tip{opacity:1;transform:translate(-50%,0)}
.form--ours .tip{background:var(--bronze)}
.form--ours .tip::after{border-top-color:var(--bronze)}
.shelf-labels{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;padding:1rem clamp(0rem,2vw,1.5rem) 0;text-align:center}
.shelf-labels .label{color:var(--ink)}
.shelf-labels .label--ours{color:var(--bronze-text)}
.shelf + p{margin-top:2.8rem}
@media(max-width:600px){.form .tip{font-size:1rem}.form:nth-child(1) .tip{left:0;transform:translate(0,8px)}.form:nth-child(1):hover .tip,.form:nth-child(1)[aria-expanded="true"] .tip{transform:none}.form:nth-child(5) .tip{left:auto;right:0;transform:translate(0,8px)}.form:nth-child(5):hover .tip,.form:nth-child(5)[aria-expanded="true"] .tip{transform:none}.form .tip::after{display:none}}

/* =========================================================
   THE ENGINE — see / feel / flaunt
   ========================================================= */
.engine{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ink);border:1px solid var(--ink);margin-top:clamp(3rem,6vw,4.5rem)}
.engine > div{background:var(--paper);padding:clamp(1.6rem,3vw,2.4rem);min-height:clamp(240px,26vw,320px);display:flex;flex-direction:column;transition:background .5s var(--ease),color .5s var(--ease)}
.engine > div:hover{background:var(--ink);color:var(--paper)}
.engine > div:hover .label{color:rgba(247,243,236,.7)}
.engine svg{height:38px;width:auto;margin-bottom:auto}
.engine .label{display:block;margin:2rem 0 .7rem;color:var(--ink-2)}
.engine p{font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.3}
@media(max-width:760px){.engine{grid-template-columns:minmax(0,1fr)}.engine > div{min-height:0}}

/* =========================================================
   THE RULES — stacking cards
   ========================================================= */
.rules-stack{margin-top:clamp(3rem,6vw,4.5rem);display:grid;gap:clamp(1.2rem,3vw,2rem)}
.rule-card{position:sticky;top:calc(96px + var(--i) * 22px);display:grid;grid-template-columns:minmax(0,1fr);min-height:min(52vh,440px);background:var(--paper);border:1px solid var(--ink);transform-origin:center top;will-change:transform}
.rule-txt{padding:clamp(1.6rem,4vw,3rem);display:flex;flex-direction:column}
.rule-txt .n{font-family:var(--mono);font-size:.8rem;letter-spacing:.2em;color:var(--muted)}
.rule-txt h3{font-weight:400;font-size:clamp(2.4rem,6vw,5rem);line-height:1;margin-top:auto;max-width:14ch}
.rule-txt p{margin-top:1rem;color:var(--ink-2);max-width:34ch}
.rule-txt svg{width:48px;height:48px;margin-top:1.6rem}
.rules-foot{margin-top:2.8rem}
.rules-stack{counter-reset:rule}
.rule-card{counter-increment:rule}
.rule-card::after{content:"0" counter(rule);position:absolute;right:clamp(1.2rem,4vw,3rem);bottom:clamp(.6rem,2vw,1.4rem);font-family:var(--serif);font-size:clamp(6rem,16vw,14rem);line-height:.8;letter-spacing:-.04em;color:var(--bronze);opacity:.9;pointer-events:none}
@media(max-width:760px){.rule-card{min-height:0}.rule-card::after{font-size:4.6rem;right:1.2rem;bottom:1.1rem}}

/* =========================================================
   HER TEN SECONDS — hold to try
   ========================================================= */
.ten{position:relative;overflow:hidden;text-align:center;background:var(--tenbg,#F7F3EC);transition:background .4s linear}
.ten .h-1{margin:1.6rem auto 0;max-width:18ch}
.ten-sub{margin:1.1rem auto 0;color:var(--ink-2);max-width:40ch}
.hold{position:relative;width:clamp(200px,28vw,260px);aspect-ratio:1;margin:clamp(2.5rem,5vw,3.5rem) auto 0;border-radius:50%;border:0;background:var(--ink);color:var(--paper);cursor:pointer;
  -webkit-user-select:none;user-select:none;touch-action:none;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.hold:hover{transform:scale(1.03);box-shadow:0 24px 60px rgba(35,35,33,.25)}
.hold.holding{transform:scale(.97)}
.hold svg{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);max-width:none;transform:rotate(-90deg);pointer-events:none}
.hold .ring-bg{fill:none;stroke:var(--rule);stroke-width:1.5}
.hold .ring{fill:none;stroke:var(--bronze);stroke-width:3;stroke-linecap:round}
.hold .count{display:block;font-size:clamp(3.6rem,7vw,5rem);line-height:1;font-variant-numeric:tabular-nums}
.hold .hint{display:block;margin-top:.5rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.ten-status{margin-top:1.8rem;min-height:2.6em;font-size:clamp(1.2rem,2vw,1.5rem);font-style:italic}
.ten-done{display:none;margin-top:.6rem}
.ten.complete .ten-done{display:block;animation:dlg-in .7s var(--ease)}
.ten.complete .hold{background:var(--bronze)}

/* =========================================================
   UNDER WRAPS — spotlight on a covered object
   ========================================================= */
.wraps{background:var(--night);color:var(--paper);position:relative;overflow:hidden}
.wraps .mark{color:rgba(247,243,236,.75)}
.wraps .em{color:#C9AA78}
.wraps-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,5rem);align-items:center}
.wraps .h-1{margin-top:1.6rem}
.wraps .body{margin-top:1.6rem;font-size:clamp(1.1rem,1.6vw,1.25rem);color:rgba(247,243,236,.78);max-width:36ch}
.wraps .btn{margin-top:2.2rem;background:var(--paper);color:var(--ink);border-color:var(--paper)}
.wraps .btn:hover{background:#C9AA78;border-color:#C9AA78}
.wraps .note{color:rgba(247,243,236,.85);margin-top:2rem;font-size:1.35rem}
.stage{position:relative;aspect-ratio:4/5;width:min(100%,480px);justify-self:center;cursor:crosshair;--mx:50%;--my:42%;--r:150px}
.stage .ph{position:absolute;inset:0}
.stage .dim{filter:brightness(.32) saturate(.7)}
.stage .lit{-webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 35%,transparent 72%);mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 35%,transparent 72%)}
.stage .drape{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
.stage.has-photo .drape{display:none}
.drape .plinth{fill:#3A3835}
.drape .pool{fill:rgba(247,243,236,.10)}
.drape .vslot{fill:rgba(247,243,236,.04);stroke:#C9AA78;stroke-width:2;stroke-dasharray:10 8;stroke-linecap:round;animation:dash 2.4s linear infinite}
.drape .vq{fill:#C9AA78;font-family:var(--serif);font-size:72px}
.stage-tag{position:absolute;left:0;right:0;bottom:-2.6rem;text-align:center;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,243,236,.6)}
@media(max-width:860px){.wraps-grid{grid-template-columns:minmax(0,1fr)}.stage{width:min(100%,340px);margin-bottom:2.5rem}}

/* =========================================================
   WHO WE BUILD FOR — horizontal gallery (pinned on desktop)
   ========================================================= */
.her{overflow:hidden}
.her-track{display:flex;gap:clamp(1rem,2vw,1.6rem);padding:0 var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.her-track::-webkit-scrollbar{display:none}
.her-track::after{content:"";flex:0 0 1px}
.motion-pending [data-hero],.motion-pending [data-hero-title],.motion-pending [data-hero-media]{opacity:0}
.her.pinned{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:calc(72px + 2rem)}
.her.pinned .her-track{overflow:visible;scroll-snap-type:none}
.her-intro{flex:0 0 min(440px,84vw);scroll-snap-align:start;display:flex;flex-direction:column;justify-content:center;padding-right:2rem}
.her-intro .h-1{margin-top:1.6rem}
.her-intro p{margin-top:1.4rem;color:var(--ink-2);max-width:34ch}
.her-intro .hint{margin-top:2rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pcard{flex:0 0 min(380px,82vw);scroll-snap-align:start;background:var(--paper);border:1px solid var(--ink);display:flex;flex-direction:column}
.pcard-body{padding:1.6rem 1.5rem 1.7rem;display:flex;flex-direction:column;flex:1}
.pcard-top{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:flex-start;padding-bottom:1.2rem;border-bottom:1px solid var(--ink)}
.pcard .hrs{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column}
.pcard .hrs b{font-family:var(--serif);font-weight:400;font-size:clamp(4rem,7vw,5.2rem);line-height:.9;letter-spacing:-.03em;color:var(--bronze);margin-bottom:.4rem}
.pcard h3{font-weight:400;font-size:1.9rem;line-height:1.1;margin-top:1rem}
.pcard .role{color:var(--ink-2);margin-top:.3rem;font-size:1rem;line-height:1.4}
.pcard .route{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem .8rem;margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--rule);font-family:var(--mono);font-size:.72rem;color:var(--ink-2)}
.pcard .route b{font-weight:500;color:var(--ink)}
.pcard .moment{font-style:italic;font-size:1.04rem;line-height:1.5;margin-top:1rem}
.pcard blockquote{margin-top:auto;padding-top:1.2rem;font-family:var(--hand);font-size:1.4rem;line-height:1.25;color:var(--bronze)}
.her-foot{margin-top:1.4rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted)}
.her-nav{display:flex;gap:.6rem;margin-top:1.4rem}
.her-nav button{width:48px;height:48px;border:1px solid var(--ink);background:transparent;cursor:pointer;font-size:1.1rem;transition:background .3s,color .3s}
.her-nav button:hover{background:var(--ink);color:var(--paper)}
.her.pinned .her-nav{display:none}

/* =========================================================
   BUILD WITH US — rows with a cursor-following photo
   ========================================================= */
.rows{margin-top:clamp(3rem,6vw,4.5rem);border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:10rem minmax(0,1fr) auto;gap:2rem;align-items:center;padding:clamp(1.4rem,3vw,2.2rem) 0;border-bottom:1px solid var(--ink);text-decoration:none;position:relative}
.row .label{color:var(--ink-2)}
.row h3{font-weight:400;font-size:clamp(1.7rem,3.8vw,3.2rem);line-height:1.05;transition:transform .5s var(--ease)}
.row h3 small{display:block;font-size:clamp(1rem,1.4vw,1.15rem);font-style:italic;color:var(--ink-2);margin-top:.5rem}
.row .go{width:56px;height:56px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:1.2rem;transition:background .35s,color .35s,transform .5s var(--ease)}
.row:hover h3{transform:translateX(12px)}
.row:hover .go{background:var(--ink);color:var(--paper);transform:rotate(-45deg)}
@media(max-width:700px){.row{grid-template-columns:minmax(0,1fr) auto;gap:1rem}.row .label{grid-column:1/-1}}
.build-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.4rem;margin-top:2.6rem}

/* =========================================================
   CLOSING — full-bleed sign-off
   ========================================================= */
.closing{position:relative;min-height:90vh;display:grid;place-items:center;text-align:center;overflow:hidden;color:var(--paper);background:radial-gradient(ellipse 60% 50% at 50% 55%,rgba(201,170,120,.22),transparent 70%),var(--night)}
.closing-in{position:relative;z-index:3;padding:6rem var(--gutter)}
.closing .h-display{font-style:italic;font-size:clamp(2.8rem,8vw,7.5rem);line-height:1}
.closing .label{display:block;margin-top:1.6rem;color:rgba(247,243,236,.8)}
.closing .btn{margin-top:2.4rem;background:var(--paper);color:var(--ink);border-color:var(--paper)}
.closing .btn:hover{background:#C9AA78;border-color:#C9AA78}

.sec-head .h-1{margin-top:1.6rem;max-width:22ch;text-wrap:balance}