/* AYCAS Studios — public design system. Spec: docs/superpowers/specs/2026-07-05-aycasstudios-redesign-design.md */
/* NOTE: body font (DM Sans) is capped at weight 500 — never style bold above 500. Display font covers 600–700. */
@import url(fonts/fonts.css);
:root{
  --bg-0:#0A0B0A; --bg-ink:#0D1614;
  --teal-core:#3e9a8f; --teal-deep:#1d5c57; --teal-lift:#56c4b6; --teal-glow:#8de0d4; --on-teal:#06211d;
  --text-hi:#F4F7F6; --text-soft:rgba(244,247,246,.72); --text-mid:rgba(244,247,246,.6); --text-mut:rgba(244,247,246,.48);
  --hairline:rgba(244,247,246,.12); --hairline-strong:rgba(244,247,246,.3);
  --font-display:'Zalando Sans SemiExpanded','DM Sans',sans-serif;
  --font-body:'DM Sans','Helvetica Neue',Arial,sans-serif;
  --font-accent:'Bitcount Grid Single',monospace;
  --t-display-xl:clamp(4rem,14vw,10rem); --t-display-lg:clamp(2.5rem,7vw,5rem);
  --t-display-md:clamp(1.75rem,4vw,3rem); --t-base:clamp(.9375rem,.9rem + .28vw,1.05rem);
  --leading-display:.88; --leading-body:1.7; --gutter:clamp(20px,4vw,64px);
  --statusbar-h:47px; /* single source of truth — statusbar height + hero 100svh offset */
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--bg-0);color:var(--text-hi);font-family:var(--font-body);font-size:var(--t-base);line-height:var(--leading-body)}
b,strong{font-weight:500}
.display{font-family:var(--font-display);line-height:var(--leading-display);font-weight:700;text-transform:uppercase;letter-spacing:-.01em}
.accent{font-family:var(--font-accent);letter-spacing:.06em;font-size:.72rem}
.gloss{color:var(--text-mut)}
.ink{background:var(--bg-ink)}
.hairline-t{border-top:1px solid var(--hairline)}
.section{padding:clamp(3rem,8vw,7rem) var(--gutter)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2rem}
a{color:inherit}
.btn{display:inline-block;background:var(--teal-core);color:var(--on-teal);font-weight:500;font-size:.8rem;letter-spacing:.08em;padding:.7em 1.5em;border-radius:999px;text-decoration:none;text-transform:uppercase}
.btn--ghost{background:transparent;color:var(--teal-lift);border:1px solid var(--teal-deep)}
.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:var(--gutter);top:8px;z-index:100;background:var(--teal-core);color:var(--on-teal);padding:.5em 1em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--teal-lift);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* == mark == */
/* "Module A" open lattice — the locked brand mark (12 staggered cells, teal core; canonical file: assets/svg/mark.svg).
   Inlined as <svg class="mark"> wherever the core needs to pulse; never shown on the teal menu overlay. */
.mark{display:block}
.mark__cell{fill:#1c1f1e;stroke:rgba(86,196,182,.35);stroke-width:.6}
.mark__core{fill:var(--teal-core);animation:sb-pulse 3s ease-in-out infinite}

/* == shell == */
.statusbar{position:sticky;top:0;z-index:50;display:flex;gap:1.5rem;align-items:center;justify-content:space-between;height:var(--statusbar-h);padding:0 var(--gutter);background:color-mix(in srgb,var(--bg-0) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--hairline)}
.statusbar>*{white-space:nowrap;flex:0 0 auto} /* one line always — --statusbar-h is load-bearing for the hero */
#sb-section{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis} /* dynamic label ("[ 03 / 06 ] SELECTED WORK") truncates before anything overflows */
.statusbar__live{color:var(--teal-lift)}
@media (max-width:760px){.statusbar__id{display:none}} /* id + section + live can't share one line below ~720px */
@media (max-width:600px){.statusbar__live-label{display:none}.statusbar{gap:.5rem}} /* keep the pulsing dot + clock */
.statusbar .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--teal-lift);margin-right:6px;animation:sb-pulse 3s ease-in-out infinite}
@keyframes sb-pulse{0%,100%{opacity:.35}50%{opacity:1}}
.statusbar__progress{position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--teal-lift)}
/* tap targets: padding grows the hit area to ~44px, negative margin keeps the visual layout identical (a11y sweep 2026-07-06) */
.menu-btn{background:none;border:0;color:var(--text-hi);font:inherit;font-size:.78rem;letter-spacing:.14em;cursor:pointer;padding:.85em .9em;margin:-.85em -.9em}
.menu{position:fixed;inset:0;z-index:90;background:var(--teal-deep);color:var(--text-hi);padding:1.2rem var(--gutter);display:flex;flex-direction:column;transform:translateY(-102%);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.menu.is-open{transform:none}
.menu:not(.is-open){pointer-events:none}
.menu__top{display:flex;justify-content:space-between;align-items:center}
.menu__top .menu-btn{color:var(--teal-glow)}
.menu__list{list-style:none;margin:auto 0;padding:0}
.menu__list li{padding:.35em 0}
.menu__list .gloss{color:rgba(244,247,246,.72);font-size:.8rem;margin-right:1em} /* .55 read 3.37:1 on teal-deep; .72 = 4.59:1 (WCAG AA small text, a11y sweep 2026-07-06) */
.menu__list a{font-size:var(--t-display-lg);text-decoration:none}
.menu__cta{color:var(--teal-glow);border-bottom:3px solid var(--teal-glow)}
.footer{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:baseline;color:var(--text-mid)}
.footer a{color:var(--text-mid)}
.footer nav a{display:inline-block;padding:.8em .25em;margin:-.8em -.25em} /* 20px text → ~44px tap target, visually unchanged (a11y sweep 2026-07-06) */
.footer__stamp{display:inline-flex;align-items:center;gap:.55rem}
.footer__mark{height:18px;width:auto;display:block}
.menu__foot a{display:inline-block;padding:1.3em .6em;margin:-1.3em -.6em} /* 14px accent link → ~44px tap target */
.menu[hidden]{display:none} /* must stay after the .menu base rule — see f575430 */

/* == motion == */
.reveal{overflow:hidden}
.reveal>*{will-change:transform}
.page-wipe{position:fixed;inset:0;z-index:200;background:var(--bg-ink);transform:translateY(102%);transition:transform .48s cubic-bezier(.22,1,.36,1);pointer-events:none}
.page-wipe.is-in{transform:none}

/* == cursor == */
.cursor-ring{position:fixed;left:-34px;top:-34px;width:68px;height:68px;border:1px solid var(--teal-lift);border-radius:50%;pointer-events:none;z-index:150;display:flex;align-items:center;justify-content:center;scale:.5;transition:scale .16s cubic-bezier(.22,1,.36,1);mix-blend-mode:difference}
.cursor-ring.is-active{scale:1}
.cursor-ring__label{font-family:var(--font-accent);font-size:11px;color:var(--teal-lift)}
.cursor-ring.is-idle{opacity:0}

/* == heroband == */
.heroband{position:relative;min-height:calc(100svh - var(--statusbar-h));display:flex;flex-direction:column;justify-content:space-between;gap:1.1rem;padding:1.1rem var(--gutter) 1.2rem;overflow:hidden}
/* ambient stone-field backdrop — poster (webp) paints instantly, the loop is src-assigned by main.js
   only after window load (full tier; reduced tier stays poster-only). The plate is near-black across
   the top ~45% so the masthead needs no extra veil; the bottom-up scrim keeps the carousel thumbs
   and footer strip crisp over the brighter stone field. */
.heroband__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.heroband__bg video{width:100%;height:100%;object-fit:cover;opacity:.5}
.heroband__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,11,10,.75),transparent 45%)}
.heroband>:not(.heroband__bg){position:relative;z-index:1} /* every band row paints above the backdrop */
/* row 1 — masthead: giant words PINNED INSIDE the viewport — AYCAS flush left, STUDIOS flush
   right, mark centred in the remaining space via auto margins. Brand words must never crop:
   "STUDIOS" losing its S reads as a typo (Gus caught it live, 2026-07-06). Edge-kiss, not bleed. */
.hb-mast{display:flex;align-items:center;justify-content:space-between;margin-inline:calc(-1*var(--gutter));padding-inline:.4vw}
.hb-mast__h{display:contents}
.hb-mast__word{flex:none;font-size:clamp(3rem,9.6vw,11rem);line-height:.92;white-space:nowrap;pointer-events:none;position:relative;z-index:2} /* words lag the scroll and slide over lower rows — they must never block clicks */
.hb-mast__word--r{order:2}
.hb-mast__mark{order:1;display:flex;flex-direction:column;align-items:center;gap:.35rem;margin:0 auto;text-align:center}
.hb-mast__a{height:clamp(40px,4.5vw,64px);width:auto}
.hb-mast__mark .gloss{font-size:.78rem;white-space:nowrap}
/* row 2 — capability columns */
.hb-cap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2rem}
.hb-cap__list{list-style:none;margin:0;padding:0;font-size:.82rem;line-height:1.6;color:var(--text-hi)}
.hb-cap__list li{padding:.22em 0}
.hb-cap__list--r{text-align:right}
.hb-cap__list--r li{border-bottom:1px solid var(--hairline);min-width:15em}
.hb-cap__cta{justify-self:end;margin-right:clamp(0rem,6vw,5rem)}
/* row 3 — inline nav + glosses */
.hb-navrow{border-top:1px solid var(--hairline);padding-top:.75rem;display:flex;flex-direction:column;gap:.55rem}
.hb-nav{display:flex;gap:2.4rem}
.hb-nav a{font-size:.8rem;letter-spacing:.18em;text-decoration:none;padding:.5em 0;margin:-.5em 0} /* tap target */
.hb-nav a:hover,.hb-nav a:focus-visible{color:var(--teal-lift)}
.hb-glosses{display:flex;justify-content:space-between;gap:1rem;font-size:.78rem;color:var(--text-mut)}
/* row 4 — work carousel */
.hb-car{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.hb-car__head{display:flex;align-items:center;gap:1.3rem;color:var(--teal-lift)}
.hb-car__counter{font-size:.8rem}
.hb-car__arrow{background:none;border:0;color:var(--text-hi);font:inherit;font-size:1.05rem;line-height:1;cursor:pointer;padding:.5em .7em;margin:-.5em -.7em} /* tap target */
.hb-car__arrow:hover{color:var(--teal-lift)}
.hb-car__label{margin:0;font-size:.9rem;color:var(--text-soft)}
.hb-car__wave{display:flex;align-items:center;gap:4px;height:48px}
.hb-car__wave span{width:2px;height:8px;background:rgba(244,247,246,.19)} /* --text-mut at ~40% */
.hb-car__wave span.is-hot{background:var(--teal-lift)}
.hb-car__thumbs{display:flex;gap:.55rem;justify-content:center}
.hb-thumb{display:block;border:1px solid transparent;opacity:.45;transition:opacity .18s,border-color .18s}
.hb-thumb:hover{opacity:.8}
.hb-thumb.is-active{opacity:1;border-color:var(--teal-lift)}
.hb-thumb img{display:block;width:120px;height:74px;object-fit:cover}
/* row 5 — band footer strip */
.hb-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem}
.hb-foot__line{margin:0;font-size:.82rem;color:var(--text-soft);line-height:1.5}
.hb-foot__contact{margin:0;display:flex;flex-direction:column;gap:.1em;font-size:.78rem;text-align:center}
.hb-foot__contact a{text-decoration:none;color:var(--text-soft);padding:.3em 0}
.hb-foot__contact a:hover,.hb-foot__contact a:focus-visible{color:var(--teal-lift)}
@media (max-width:900px){
  .hb-cap{grid-template-columns:1fr 1fr;gap:1rem 2rem}
  .hb-cap__list--l{grid-column:1;grid-row:1}
  .hb-cap__list--r{grid-column:2;grid-row:1;min-width:0}
  .hb-cap__list--r li{min-width:0}
  .hb-cap__cta{grid-column:1/-1;grid-row:2;justify-self:start;margin:0}
  .hb-nav{flex-wrap:wrap;gap:1rem 2rem}
  .hb-thumb img{width:88px;height:54px}
  .hb-foot{flex-direction:column;align-items:flex-start;gap:.7rem}
  .hb-foot__contact{text-align:left}
}
@media (max-width:560px){
  .hb-cap{grid-template-columns:1fr}
  .hb-cap__list--r,.hb-glosses{display:none}
  .hb-thumb img{width:clamp(56px,16vw,88px);height:auto;aspect-ratio:120/74}
}
html[data-tier="full"] .reveal>*{transform:translateY(110%)} /* FOUC guard — scroll.js clears + animates; failure path unhides */

/* == who (monolith's home since the hero rebuild — hero3d.js targets #hero-scene here) == */
/* full-bleed WebGL layer: hero3d.js sizes its canvas to the whole section and offsets the
   camera composition so the monolith still sits where the .who__scene anchor box is — the
   scroll-out explosion can then cross the entire band instead of clipping at the box edge.
   The anchor keeps the grid layout (and the reduced-tier SVG fallback) exactly as before. */
.who{position:relative}
.who .hero3d-layer{position:absolute;inset:0;z-index:0;pointer-events:none}
.who .hero3d-layer canvas{display:block;width:100%;height:100%}
.who .who__grid{position:relative;z-index:1}
.who__grid{display:grid;grid-template-columns:55fr 45fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.who__statement{font-size:var(--t-display-md);text-transform:none;letter-spacing:0;line-height:1.15;max-width:22ch;margin:0}
.who__scene{width:min(100%,480px);aspect-ratio:1;justify-self:center;pointer-events:none}
.hero__fallback{width:100%;height:100%;display:block}
@media (max-width:760px){.who__grid{grid-template-columns:1fr}.who__scene{width:min(70vw,320px);margin:0 auto}}

/* == field [ 02 ] — keyword star-field with dot-matrix letters (decorative, aria-hidden) == */
/* Scatter positions live on each element as --x/--y (desktop) and --xm/--ym (mobile override);
   hand-tuned at 1440x900 and 390x844. Parallax bands are translated by field.js (full tier). */
.field{position:relative;min-height:130vh;overflow:hidden;background:var(--bg-0)}
.field__band{position:absolute;inset:0;will-change:transform}
.field__kw,.field__gloss{position:absolute;left:var(--x);top:var(--y);white-space:nowrap}
.field__kw--lg{font-size:var(--t-display-md);color:var(--text-mid)}
.field__kw--md{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:.95rem;letter-spacing:.05em;color:var(--text-mut)}
.field__kw--sm{font-family:var(--font-accent);letter-spacing:.06em;font-size:.72rem;color:var(--text-mut)}
.field__gloss{font-size:.78rem;color:var(--text-mut)}
.field__status{position:absolute;left:var(--gutter);bottom:2.4rem;display:flex;flex-direction:column;gap:.5rem;color:var(--teal-lift)}
.field__caret{animation:field-blink 1.1s steps(2,jump-none) infinite}
@keyframes field-blink{from{opacity:1}to{opacity:0}}
.field__down{position:absolute;left:50%;bottom:2.2rem;translate:-50%;display:flex;flex-direction:column;align-items:center;gap:.6rem;color:var(--text-mut);letter-spacing:.22em}
.field__chev{display:grid;grid-template-columns:repeat(5,10px);grid-template-rows:repeat(3,8px)}
.field__chev i{width:4px;height:4px;border-radius:50%;background:var(--teal-lift);margin:auto}
@media (max-width:760px){
  .field__kw--desk{display:none} /* declutter: mobile keeps ~60% of the scatter */
  .field__kw,.field__gloss{left:var(--xm,var(--x));top:var(--ym,var(--y))}
  .field__down{left:auto;right:var(--gutter);translate:none} /* status lines own the lower-left on narrow */
}

/* == marquee == */
.marquee{overflow:hidden;border-bottom:1px solid var(--hairline);padding:.55rem 0;white-space:nowrap}
.marquee__track{display:inline-block;font-size:.8rem;letter-spacing:.12em;color:var(--text-mid);animation:marquee 24s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
[data-tier="reduced"] .marquee__track{animation:none}

/* == grain == */
.grain{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
[data-tier="reduced"] .grain{display:none}

/* == boot == */
.boot{position:fixed;inset:0;z-index:300;background:var(--bg-0);display:flex;flex-direction:column;gap:1.2rem;align-items:center;justify-content:center;color:var(--teal-lift)}
.boot.is-done{opacity:0;transition:opacity .5s}
.boot__line{display:flex;gap:.5em;align-items:center}
.boot__caret{width:.6em;height:1.1em;background:var(--teal-lift);animation:sb-pulse 1s steps(2) infinite}
/* mark assembly: boot.js staggers the 12 cells in (core last, brief bright flash) alongside the counter */
.boot__mark{height:64px;width:auto}
.boot__mark rect{opacity:0;transition:opacity .3s ease,fill .2s ease}
.boot__mark rect.is-in{opacity:1}
.boot__mark .mark__core{animation:none} /* the ambient pulse would fight the assembly's opacity transition */
.boot__mark .mark__core.is-flash{fill:var(--teal-glow)}

/* == archive == */
.archive{list-style:none;margin:0 calc(-1 * var(--gutter));padding:0}
.archive__row{display:flex;align-items:baseline;gap:1rem;padding:1rem var(--gutter);border-top:1px solid var(--hairline);text-decoration:none;transition:background .18s}
.archive li:last-child .archive__row{border-bottom:1px solid var(--hairline)}
.archive__row:hover,.archive__row:focus-visible{background:var(--bg-ink)}
.archive__name{font-size:clamp(1.25rem,2.6vw,1.9rem)}
.archive__status{margin-left:auto;color:var(--teal-lift)}
.archive__row--more .archive__more{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.archive-thumb{position:fixed;z-index:60;width:220px;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--teal-deep);border-radius:6px;pointer-events:none;opacity:0;transition:opacity .18s}
.archive-thumb.is-on{opacity:1}
@media (max-width:640px){.archive__row .gloss:not(.archive__more){display:none}.archive__row{gap:.6rem}}

/* == rail == */
.rail{position:relative;min-height:120vh;overflow:hidden;padding:14vh 0}
.rail__bg{position:absolute;left:0;top:0;width:100%;height:112%;object-fit:cover;opacity:.55;pointer-events:none} /* brand render as atmosphere — oversized so the -6% drift never reveals a gap */
.rail__veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,var(--bg-ink) 0%,rgba(13,22,20,.12) 12%,rgba(13,22,20,.12) 88%,var(--bg-ink) 100%)}
.rail__ghost{position:absolute;top:50%;translate:0 -50%;font-size:var(--t-display-xl);color:transparent;-webkit-text-stroke:1px var(--hairline-strong);pointer-events:none}
.rail__ghost--l{left:-.06em}
.rail__ghost--r{right:-.06em}
.rail__mark{position:absolute;left:50%;top:50%;translate:-50% -50%;text-align:center;z-index:1}
.rail__mark-a{height:2rem;width:auto;margin-inline:auto}
.rail__mark .gloss{display:block;font-size:.8rem;margin-top:.3rem}
[data-tier="reduced"] .rail{min-height:56vh;padding:4rem 0}

/* == phases == */
.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.phase__rule{display:block;height:2px;background:var(--teal-core);margin-bottom:.8rem}
.phase__tag{color:var(--teal-lift);display:block;margin-bottom:.5rem}
.phase h2{font-size:1.15rem;margin:0 0 .5rem}
.phase p{font-size:.85rem;color:var(--text-mid);margin:0;line-height:1.65}
@media (max-width:900px){.phases{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.phases{grid-template-columns:1fr}}

/* == phoneset == */
.phoneset__grid{display:grid;grid-template-columns:auto 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.phone{position:relative;width:min(300px,74vw);aspect-ratio:340/700;flex:none}
.phone__viewport{position:absolute;inset:3.5% 4.5%;border-radius:9.5%/4.6%;overflow:hidden;background:var(--bg-ink)}
.phone__screens{height:300%;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.phone__screen{height:calc(100%/3);padding:2.2rem 1.1rem 1.1rem;display:flex;flex-direction:column;gap:.7rem;box-sizing:border-box}
.phone__screen-head{display:flex;justify-content:space-between;align-items:baseline}
.phone__screen-head .display{font-size:1.05rem}
.phone__screen-head .accent{color:var(--teal-lift)}
.phone__meta{font-size:.78rem;color:var(--text-mid);margin:0}
.phone__stat{background:rgba(86,196,182,.1);border:1px solid rgba(86,196,182,.3);border-radius:10px;padding:.8rem;font-size:.78rem}
.phone__stat strong{display:block;font-size:1.5rem;color:var(--teal-lift);font-weight:700}
.phone__shell{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.phone__pager{position:absolute;left:50%;bottom:-1.8rem;translate:-50%;display:flex;gap:.45rem}
.phone__pager span{width:7px;height:7px;border-radius:50%;background:var(--hairline-strong)}
.phone__pager span.is-on{background:var(--teal-lift)}
.phoneset__title em{font-style:normal;color:var(--teal-lift)}
.phoneset__copy p{max-width:38ch;color:var(--text-soft)}
[data-tier="reduced"] .phone__screens{transition:none}
@media (max-width:820px){.phoneset__grid{grid-template-columns:1fr;justify-items:center;text-align:center}.phoneset__copy p{margin-inline:auto}}
/* short viewports (landscape tablet / small laptop): full-size phone makes the pinned section 843px tall
   — pager dots sat below a 768px fold during the pin. Shrink the set-piece so it fits (a11y sweep 2026-07-06) */
@media (min-width:821px) and (max-height:850px){.phone{width:min(240px,74vw)}}

/* == start == */
.start__title{font-size:var(--t-display-lg);margin:0 0 1rem}
.start__copy{max-width:44ch;color:var(--text-soft)}
.start__actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.5rem}

/* == work == */
.work__title{font-size:var(--t-display-lg);margin:.2em 0 .4em}
.work-hero{position:relative;overflow:hidden;min-height:92svh;display:flex;flex-direction:column;justify-content:center}
.work-hero__bg{position:absolute;left:0;top:0;width:100%;height:112%;object-fit:cover;background:var(--bg-ink);pointer-events:none} /* full-bleed atmosphere — oversized so the -6% drift never reveals a gap */
.work-hero__scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,11,10,0) 55%,var(--bg-0) 100%),linear-gradient(90deg,rgba(10,11,10,.88) 0%,rgba(10,11,10,.55) 45%,rgba(10,11,10,.15) 100%)} /* left scrim for copy legibility + bottom fade into the archive */
/* one-shot entry burst stacked over the loop; fades out on ended. The 1→1.28 scale ramp
   normally runs through GSAP (main.js) because drift.js's tween owns the element's
   transform and writes inline scale:none — this CSS pair is the no-vendor fallback only.
   Fade is 900ms: v2 ends near-empty, so the long crossfade reads as the cube re-forming
   in the ambience rather than a hard pop. */
.work-hero__bg--burst{scale:1;transform-origin:center 40%;transition:opacity .9s ease,scale 5s cubic-bezier(.22,.61,.36,1)}
.work-hero__bg--burst.is-bursting{scale:1.28} /* debris pushes out past the viewer over the burst's 5s */
.work-hero__bg--burst.is-done{opacity:0} /* scale never resets mid-fade — the GSAP tween ends at 1.28 and stays */
.work-hero__text{position:relative;z-index:1;max-width:46rem}
.archive__status--dim{color:var(--text-mut)}
.work__inflight{margin:2.5rem 0 .5rem}

/* == about == */
.about-divider{position:relative;overflow:hidden;max-height:42vh;background:var(--bg-ink)}
.about-divider img{display:block;width:100%;max-height:50vh;object-fit:cover} /* taller than the 42vh band so the -6% drift never reveals a gap */
.about-divider::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bg-0) 0%,rgba(13,22,20,.12) 30%,rgba(13,22,20,.12) 70%,var(--bg-0) 100%);pointer-events:none}
.clusters{display:grid;grid-template-columns:repeat(2,1fr);gap:2.2rem clamp(1.4rem,3vw,3rem);margin-bottom:2.5rem}
@media (max-width:640px){.clusters{grid-template-columns:1fr}}
.cluster__specs{list-style:none;margin:.8rem 0 0;padding:0;font-size:.78rem;color:var(--text-mut)}
.cluster__specs li{padding:.3em 0;border-top:1px solid var(--hairline)}
.terms{margin:2rem 0 0}
.terms>div{display:grid;grid-template-columns:minmax(10em,16em) 1fr;gap:.4rem 1rem;padding:.9rem 0;border-top:1px solid var(--hairline)}
.terms>div:last-child{border-bottom:1px solid var(--hairline)}
.terms dt{align-self:baseline}
.terms dd{margin:0;color:var(--text-soft);font-size:.9rem;max-width:60ch}
@media (max-width:560px){.terms>div{grid-template-columns:1fr}}

/* == deepdive — exploded product anatomy (spec §7.14 evolution) == */
/* Default CSS is the SETTLED composition: full-bleed tilted plane, fragments parked,
   final numbers in markup — baseline/reduced read complete with zero JS. Full tier:
   deepdive.js pins the section and choreographs scene entrances/exits.
   Everything full-bleed by design — no bordered figure boxes. overflow:clip on the
   section AND each scene: the plane deliberately bleeds past the edges (a11y sweep
   2026-07-06 lesson — transformed boxes must never widen scrollWidth). */
.deepdive{position:relative;padding:4rem 0 0;overflow:clip}
.deepdive__head{padding:0 var(--gutter);position:relative;z-index:6}
.deepdive__counter{color:var(--teal-lift)}
.dd-scene{position:relative;min-height:94vh;perspective:1100px;overflow:clip}
.dd-plane{position:absolute;left:-8%;top:4%;width:116%;pointer-events:none;transform:rotateX(35deg) rotateZ(-4deg)}
.dd-plane img{display:block;width:100%;height:auto;filter:saturate(.75) brightness(.82)}
.dd-plane::after{content:"";position:absolute;inset:0;background:linear-gradient(165deg,rgba(13,22,20,.72),rgba(13,22,20,.5) 50%,rgba(29,92,87,.55))} /* teal-ink wash + dim — the plane is context, the lifted fragments carry the light */
.dd-scene__caption{position:absolute;left:50%;bottom:1.8rem;transform:translateX(-50%);margin:0;width:max-content;max-width:min(88vw,62ch);text-align:center;text-wrap:balance;font-size:.88rem;color:var(--text-soft);text-shadow:0 1px 10px rgba(4,10,9,.8);z-index:5}
.dd-scene__index{position:absolute;left:var(--gutter);top:1.2rem;z-index:5} /* reduced-tier pager — hidden on full where the live counter ticks */
/* lifted fragments — handcrafted ChurchOS UI in its own light-card language (white
   cards, deep-green actions, amber warnings; DM Sans approximates its face — harmonized,
   not site-ified). Two depths: --a nearer (larger, slower float), --b farther. */
.dd-frag{position:absolute;z-index:4;filter:drop-shadow(0 26px 38px rgba(4,10,9,.6))}
.dd-frag--a{left:clamp(1.2rem,11vw,15rem);top:17%}
.dd-frag--b{right:clamp(1.2rem,9vw,13rem);top:56%}
.cos-card{display:block;background:#fdfdfa;color:#242d27;border-radius:10px;padding:1.05rem 1.25rem;line-height:1.4;font-size:.92rem}
.cos-label{display:block;font-size:.72rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:#57615a;margin-bottom:.2rem}
.cos-num{display:block;font-size:clamp(2.1rem,4.5vw,3rem);font-weight:500;letter-spacing:-.02em;line-height:1.1;color:#1a221d;font-variant-numeric:tabular-nums}
.cos-num--sm{display:inline;font-size:1.25rem}
.cos-sub{display:block;font-size:.82rem;color:#57615a;margin-top:.15rem}
.cos-src{display:flex;align-items:center;gap:.45rem;font-size:.76rem;color:#57615a;margin-top:.6rem}
.cos-dot{width:8px;height:8px;border-radius:50%;background:#2c6e49;flex:0 0 auto}
.cos-fresh{color:#2b6cb0}
.cos-stat{min-width:min(300px,64vw)}
.cos-row{display:flex;align-items:center;gap:.7rem;max-width:min(430px,74vw)}
.cos-pill{display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;padding:.15em .8em;font-size:.76rem;flex:0 0 auto}
.cos-pill--warn{background:#f4ecd6;color:#7a5d13}
.cos-dot--warn{background:#c9a227;width:7px;height:7px}
.cos-row__text{font-size:.85rem}
.cos-person{display:flex;gap:.85rem;max-width:min(400px,72vw)}
.cos-avatar{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:#e3ede6;color:#2c6e49;display:grid;place-items:center;font-size:.85rem;font-weight:500;letter-spacing:.04em}
.cos-name{font-weight:500;font-size:1.05rem;margin-right:.5rem}
.cos-tag{display:inline-block;background:#2c6e49;color:#fff;border-radius:999px;padding:.05em .7em;font-size:.7rem;vertical-align:middle}
.cos-note{display:block;font-size:.82rem;color:#3c463f;margin-top:.3rem}
.cos-dup{display:flex;align-items:center;gap:1.1rem}
.cos-dup__meta{display:flex;align-items:baseline;gap:.5rem}
.cos-dup .cos-sub{margin-top:0}
.cos-btn{background:#2c6e49;color:#fff;border-radius:8px;padding:.5em 1.1em;font-size:.8rem;font-weight:500;white-space:nowrap}
.cos-method{min-width:min(340px,70vw)}
.cos-method__name{font-weight:500;margin-right:auto}
.cos-pct{font-size:.8rem;color:#57615a;font-variant-numeric:tabular-nums}
/* full tier: scenes stack in one pinned viewport; deepdive.js owns visibility + motion.
   Scenes past the first are pre-hidden so nothing flashes before gsap takes over;
   .deepdive--static reverts to the stacked composition if vendors never load. */
html[data-tier="full"] .deepdive:not(.deepdive--static){height:100vh;padding:0}
html[data-tier="full"] .deepdive:not(.deepdive--static) .deepdive__head{position:absolute;top:calc(var(--statusbar-h) + 1.2rem);left:0;right:0;margin-bottom:0} /* pinned at 'top top' = under the sticky statusbar — offset or the head hides behind it */
html[data-tier="full"] .deepdive:not(.deepdive--static) .deepdive__scenes{position:absolute;inset:0}
html[data-tier="full"] .deepdive:not(.deepdive--static) .dd-scene{position:absolute;inset:0;min-height:0}
html[data-tier="full"] .deepdive:not(.deepdive--static) .dd-scene:not(:first-child){visibility:hidden}
html[data-tier="full"] .dd-scene__index{display:none}
[data-tier="reduced"] .deepdive__counter{display:none} /* per-scene indexes are the pager on reduced; a frozen head counter would lie */
@media (max-width:640px){.dd-frag--a{left:1rem;top:12%}.dd-frag--b{right:1rem;top:58%}.dd-scene{min-height:80vh}}

/* == forms == */
/* Legacy palette shims — the enquiry page's inline handler (shipped byte-identical from the
   old site) paints its status banner with these vars. Mapped onto the dark language. */
body[data-page="enquire"]{--rust:#e2725b;--moss:var(--teal-core);--bone-light:var(--bg-ink);--ink:var(--text-hi)}
.enquiry{display:grid;gap:2.4rem;max-width:820px}
#formMsg{max-width:820px} /* injected banner sits directly above the form */
.fld-group>label{display:block;font-family:var(--font-accent);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mut);margin-bottom:.7rem}
.fld-group .req{color:var(--teal-lift);font-size:.6rem;vertical-align:middle}
.fld-note{font-family:var(--font-body);font-size:.78rem;letter-spacing:0;text-transform:none;color:var(--text-mut)}
.enquiry input[type="text"],.enquiry input[type="email"],.enquiry textarea{width:100%;background:var(--bg-ink);border:1px solid var(--hairline);border-radius:4px;color:var(--text-hi);font:inherit;font-size:.95rem;padding:.8em 1em;caret-color:var(--teal-lift)}
.enquiry textarea{resize:vertical;min-height:9em}
.enquiry input::placeholder,.enquiry textarea::placeholder{color:var(--text-mut);opacity:1}
.enquiry input:focus,.enquiry textarea:focus{outline:2px solid var(--teal-lift);outline-offset:2px;border-color:var(--teal-deep)}
.enquiry input:-webkit-autofill,.enquiry input:-webkit-autofill:hover,.enquiry input:-webkit-autofill:focus,.enquiry textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--bg-ink) inset;-webkit-text-fill-color:var(--text-hi);caret-color:var(--text-hi)}
.radio-chips{display:flex;flex-wrap:wrap;gap:.6rem}
.radio-chips label{display:inline-flex;align-items:center;gap:.55em;border:1px solid var(--hairline);border-radius:999px;padding:.5em 1.1em;font-size:.85rem;color:var(--text-soft);cursor:pointer;transition:border-color .18s,color .18s,background .18s}
.radio-chips label:hover{border-color:var(--hairline-strong);color:var(--text-hi)}
.radio-chips label:has(input:checked){border-color:var(--teal-lift);background:rgba(86,196,182,.08);color:var(--text-hi)}
.radio-chips label:has(input:focus-visible){outline:2px solid var(--teal-lift);outline-offset:2px}
.radio-chips input[type="radio"]{accent-color:var(--teal-core);margin:0;flex:none}
.fld-callout{background:var(--bg-ink);border-left:3px solid var(--teal-core);border-radius:4px;padding:1.2rem 1.4rem;font-size:.9rem;color:var(--text-soft);line-height:1.7}
.fld-callout strong{color:var(--text-hi)}
button.btn{border:0;cursor:pointer;font-family:inherit}
.fld-submit{width:100%;padding:1em;font-size:.85rem}
.fld-privacy{text-align:center;margin:0}
.fld-privacy a{color:var(--teal-lift)}
.enquiry__skip{margin-top:2.5rem}
.enquiry__skip a{color:var(--teal-lift)}
/* contact channels — archive rows carrying the value in the status slot */
.channels .archive__row{flex-wrap:wrap;row-gap:.1rem}
.channels .archive__name{font-size:clamp(1.05rem,2.4vw,1.7rem)}

/* == utility == */
/* Quiet preset for utility/legal pages (data-page="utility"): prose capped at 720px,
   display headings at display-md and below, no set-pieces/marquees/reveals.
   The five downloadable documents carry their own inline doc theme on top of this. */
.util{max-width:720px}
.util h1{font-family:var(--font-display);font-weight:700;font-size:var(--t-display-md);line-height:1.08;letter-spacing:-.01em;color:var(--text-hi);margin:.3em 0 .5em}
.util h2{font-family:var(--font-display);font-weight:600;font-size:1.25rem;line-height:1.25;color:var(--text-hi);margin:2.2em 0 .8em;padding-bottom:.4em;border-bottom:1px solid var(--hairline)}
.util h2:first-child{margin-top:0}
.util h3{font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--text-hi);margin:1.6em 0 .4em}
.util p,.util li{color:var(--text-soft)}
.util .lead{font-size:1.02rem;color:var(--text-hi)}
.util a{color:var(--teal-lift);text-decoration:underline;text-underline-offset:.18em}
.util ul,.util ol{padding-left:1.3em;margin:0 0 1em}
.util li{margin-bottom:.4em}
.util table{width:100%;border-collapse:collapse;margin:1rem 0 1.6rem;font-size:.9rem}
.util th{font-family:var(--font-accent);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:400;color:var(--teal-lift);text-align:left;padding:.6rem .8rem .6rem 0;border-bottom:1px solid var(--hairline-strong)}
.util td{padding:.55rem .8rem .55rem 0;border-bottom:1px solid var(--hairline);vertical-align:top;color:var(--text-soft)}
.util .parties{background:var(--bg-ink);border-left:3px solid var(--teal-core);border-radius:4px;padding:1.1rem 1.3rem;margin:1rem 0 2rem}
.util .parties p{margin:.3rem 0}
.util .stamp{font-family:var(--font-accent);font-size:.72rem;letter-spacing:.06em;color:var(--text-mut);margin-top:3rem}
/* resource rows — the download pack as one quiet column */
.res-list{margin:2rem 0 0}
.res{display:block;border-top:1px solid var(--hairline);padding:1.3rem 0;color:inherit}
.res-list .res:last-child{border-bottom:1px solid var(--hairline)}
.util a.res{text-decoration:none;color:inherit}
a.res:hover h3,a.res:focus-visible h3{color:var(--teal-lift)}
.res .tag{font-family:var(--font-accent);font-size:.72rem;letter-spacing:.06em;color:var(--teal-lift)}
.res.soon .tag{color:var(--text-mut)}
.res h3{margin:.35em 0 .3em}
.res p{margin:0;font-size:.9rem;color:var(--text-mid);max-width:56ch}
.res .download{display:inline-block;margin-top:.55em;font-family:var(--font-accent);font-size:.72rem;letter-spacing:.06em;color:var(--teal-lift)}
.res.soon .download{color:var(--text-mut)}

/* == wipe shards == */
/* Small cube fragments riding the page-wipe's leading edge (transitions.js,
   full tier only). Per-shard travel/size/spin arrive as inline custom props. */
.wipe-shard{position:fixed;left:var(--sx);top:100%;width:var(--ss);height:var(--ss);background:var(--sc);z-index:201;pointer-events:none;opacity:0;animation:wipe-shard var(--sdur) cubic-bezier(.22,1,.36,1) var(--sdel) forwards}
@keyframes wipe-shard{0%{transform:translateY(0) rotate(0deg);opacity:0}12%{opacity:.9}100%{transform:translateY(var(--sy)) rotate(var(--srot));opacity:0}}
/* == scrollbar == */
html{scrollbar-color:#2a2f2e var(--bg-0);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg-0)}
::-webkit-scrollbar-thumb{background:#2a2f2e;border-radius:6px;border:2px solid var(--bg-0)}
::-webkit-scrollbar-thumb:hover{background:#3e9a8f}