/* AGL - Tier 3 organisms: site chrome (header + footer). Cascade 3 of 5. */

/* --- Header: solid noir bar + GSAP slide; static dismissible eyebrow ------- */
:root{ --hdr-ease: cubic-bezier(.16,1,.3,1); --hdr-slow:.55s; }

/* Eyebrow is a STATIC bar above the header. It does NOT animate during scroll (no height
   transition on scroll = no reflow = no jitter). It scrolls away with the page; the × runs
   a one-time smooth collapse (height+opacity) then removes it. Lives OUTSIDE .agl-shell so
   the sticky header slides independently. */
.agl-eyebrow{background:var(--agl-noir-900);border-bottom:1px solid var(--agl-hairline-soft);height:38px;overflow:hidden;transition:height var(--hdr-slow) var(--hdr-ease),opacity .34s var(--hdr-ease)}
.agl-eyebrow.is-closing{height:0;opacity:0;border-bottom-color:transparent}
.agl-eyebrow.is-dismissed{display:none}
.agl-eyebrow-in{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 var(--agl-inline);height:38px}
.agl-eyebrow-link{display:inline-flex;align-items:center;gap:7px;font-family:var(--agl-body);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-variation-settings:"wdth" 112;color:var(--agl-stone-300);text-decoration:none;transition:color var(--agl-t-base) var(--agl-ease)}
.agl-eyebrow-link:hover{color:var(--agl-ivory)}
.agl-eyebrow-login:hover{color:var(--agl-gold)}
.agl-eyebrow-lock{margin-left:1px;opacity:.85;flex:0 0 auto}
.agl-eyebrow-sep{width:1px;height:13px;background:var(--agl-hairline);flex:0 0 auto}
.agl-eyebrow-close{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:6px;padding:0;border:0;background:none;color:var(--agl-stone-500);cursor:pointer;transition:color var(--agl-t-base) var(--agl-ease);flex:0 0 auto}
.agl-eyebrow-close:hover{color:var(--agl-ivory)}
.agl-eyebrow-close svg{width:11px;height:11px;display:block}
@media(max-width:640px){
	.agl-eyebrow-in{justify-content:center;gap:14px}
	.agl-eyebrow-link{font-size:11px;letter-spacing:.1em}
}

/* The sticky, sliding part — header only. GSAP drives yPercent on .agl-shell. */
.agl-shell{position:sticky;top:0;z-index:60;will-change:transform}
@media (prefers-reduced-motion:reduce){.agl-shell{transition:none!important}}

/* SOLID noir bar — no backdrop blur (which muddied to grey over light sections).
   Confident, on-brand, legible over any content. Subtle compaction when scrolled. */
.agl-head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px var(--agl-inline);background:var(--agl-noir-950);border-bottom:1px solid var(--agl-hairline-soft);transition:padding var(--hdr-slow) var(--hdr-ease)}
.agl-head.is-scrolled{padding-top:13px;padding-bottom:13px}

/* === PREMIUM TOUCHES ====================================================== */
/* Gold thread — its OWN element under the menu, GPU scaleX from centre (no header reflow). */
.agl-headline{position:absolute;left:0;right:0;bottom:0;height:1.5px;overflow:hidden;pointer-events:none;z-index:2}
.agl-headline i{display:block;height:100%;background:var(--agl-gold);transform:scaleX(0);transform-origin:center;will-change:transform;transition:transform 1.1s var(--hdr-ease)}
.agl-shell.in-content .agl-headline i{transform:scaleX(1)}

/* Nav links — gold underline drawn in from the left on hover (ink stroke). */
.agl-nav a{position:relative}
.agl-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--agl-gold);transition:right .4s var(--hdr-ease)}
.agl-nav a:hover::after{right:0}

/* Partner Login — lock unlatches on hover (shackle lifts/rotates), letters breathe. */
.agl-eyebrow-login{transition:color var(--agl-t-base) var(--agl-ease),letter-spacing .5s var(--hdr-ease)}
.agl-eyebrow-login:hover{letter-spacing:.18em}
.agl-eyebrow-lock .shackle{transform-origin:75% 60%;transition:transform .45s var(--hdr-ease)}
.agl-eyebrow-login:hover .agl-eyebrow-lock .shackle{transform:translateY(-1.5px) rotate(-22deg)}

/* Book a tour — single slow gold shimmer sweep on hover. */
.agl-head .cta{position:relative;overflow:hidden}
.agl-head .cta::before{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;background:linear-gradient(105deg,transparent,rgba(200,183,138,.32),transparent);transform:skewX(-18deg);transition:left .9s var(--hdr-ease);pointer-events:none}
.agl-head .cta:hover::before{left:130%}

@media (prefers-reduced-motion:reduce){.agl-headline i,.agl-nav a::after,.agl-eyebrow-login,.agl-eyebrow-lock .shackle,.agl-head .cta::before{transition:none!important}}
.agl-head .brand img{height:44px;width:auto;display:block}
.agl-nav{display:flex;align-items:center;gap:34px}
.agl-nav ul{display:flex;gap:34px;list-style:none;margin:0;padding:0}
.agl-nav a{font-size:12px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--agl-stone-300);font-variation-settings:"wdth" 112;transition:color var(--agl-t-base) var(--agl-ease)}
.agl-nav a:hover,.agl-nav .current-menu-item a{color:var(--agl-ivory)}
.agl-head .cta{white-space:nowrap}
.agl-burger{display:none;width:44px;height:44px;border:1px solid var(--agl-hairline);background:none;color:var(--agl-ivory);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.agl-burger span{display:block;width:18px;height:1px;background:currentColor;transition:transform var(--agl-t-base) var(--agl-ease),opacity var(--agl-t-base) var(--agl-ease)}
.agl-menu{position:fixed;inset:0;z-index:59;background:var(--agl-noir-950);display:none;flex-direction:column;justify-content:center;padding:96px var(--agl-pad-x) 48px}
.agl-menu.open{display:flex}
.agl-menu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.agl-menu a{display:block;padding:14px 0;font-family:var(--agl-display);font-size:clamp(26px,7vw,34px);font-weight:500;color:var(--agl-ivory);text-decoration:none;border-bottom:1px solid var(--agl-hairline-soft)}
.agl-menu .menu-cta{margin-top:28px}
body.menu-open{overflow:hidden}
@media (max-width:920px){
  .agl-nav{display:none}
  .agl-head__cta{display:none}
  .agl-burger{display:flex}
  .agl-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .agl-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .agl-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}

/* --- Footer ----------------------------------------------------------------- */
.agl-foot{background:var(--agl-noir-950);color:var(--agl-stone-300);border-top:1px solid var(--agl-hairline-soft)}
.agl-foot .fmain{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.5fr;gap:48px;padding:72px var(--agl-inline) 56px;align-items:start}
.agl-foot .flogo img{height:52px;width:auto}
.agl-foot .ftag{margin-top:16px;font-weight:300;color:var(--agl-stone-500);max-width:24ch}
.agl-foot h3{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--agl-gold);font-variation-settings:"wdth" 112;font-weight:500;margin:0 0 18px}
.agl-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.agl-foot ul a{text-decoration:none;color:var(--agl-stone-300);font-size:14px;transition:color var(--agl-t-base) var(--agl-ease)}
.agl-foot ul a:hover{color:var(--agl-ivory)}
.agl-foot .fsoc{display:flex;gap:14px;margin-top:18px}
.agl-foot .fsoc a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--agl-hairline);color:var(--agl-stone-500);transition:color var(--agl-t-base) var(--agl-ease),border-color var(--agl-t-base) var(--agl-ease)}
.agl-foot .fsoc a:hover{color:var(--agl-gold);border-color:var(--agl-gold-deep)}
.agl-foot .fsoc svg{width:15px;height:15px;display:block}
.agl-foot .fbase{display:flex;justify-content:space-between;align-items:center;gap:18px 32px;padding:22px var(--agl-inline);border-top:1px solid var(--agl-hairline-soft);font-size:12.5px;color:var(--agl-stone-500);flex-wrap:wrap}
.agl-foot .fbase a{color:inherit;text-decoration:none;transition:color var(--agl-t-base) var(--agl-ease)}
.agl-foot .fbase a:hover{color:var(--agl-gold)}
@media (max-width:1180px){.agl-foot .fmain{grid-template-columns:1.4fr 1fr 1fr;gap:40px}.agl-foot .fnews{grid-column:1 / -1}}
@media (max-width:760px){.agl-foot .fmain{grid-template-columns:1fr 1fr;padding:56px 24px 40px;gap:34px}.agl-foot .fbrand{grid-column:1 / -1}.agl-foot .fbase{padding:18px 24px;justify-content:flex-start}}
@media (max-width:480px){.agl-foot .fmain{grid-template-columns:1fr}}

/* ============================================================================
   SECTION LIBRARY — Stage 1: Primitives                          (drop 10.0)
   Canonical, page-agnostic building blocks. A page is composed of these; new
   page-specific CSS should be rare. Naming: BEM-ish .block / __element / --modifier.
   ============================================================================ */

/* --- .section : the Container Law primitive --------------------------------
   THE fix for the recurring --agl-inline bug. --agl-inline resolves to
   max(pad-x, (100% - page-max)/2) — the centering gutter. That value is only
   correct as padding on a FULL-WIDTH element (100% = viewport). Used on a
   constrained element it injects a huge phantom gutter and crushes content
   (the panels hero bug). So: the gutter lives HERE, on the full-bleed section,
   once. Inner content centers via .section__inner. Never combine the two on
   one element. (Codified in DECISIONS.md Container Law.) */
.section{padding-inline:var(--agl-inline);padding-block:clamp(64px,9vw,128px)}
.section__inner{max-width:var(--agl-page-max);margin-inline:auto}

/* Ground modifiers — alternating dark/ivory rhythm without re-declaring colors. */
.section--noir{background:var(--agl-noir-950);color:var(--agl-ivory)}
.section--noir-raised{background:var(--agl-noir-900);color:var(--agl-ivory)}
.section--day{background:var(--agl-day-50);color:var(--agl-ink)}

/* Full-bleed media bands opt out of block padding (image goes edge to edge). */
.section--bleed{padding-inline:0;padding-block:0}

/* Tighter / looser vertical rhythm when a section needs it. */
.section--tight{padding-block:clamp(40px,5vw,72px)}
.section--flush-top{padding-top:0}

/* --- .s-head : the universal headline rhythm -------------------------------
   eyebrow → headline → optional supporting line. The headline is Cormorant 400
   with ONE gold-italic <em> on the meaningful word — the brand signature.
   Pairs with the existing global .eyebrow (kept as-is). */
.s-head{}                                  /* wrapper hook (optional) */
.s-head__title{font-family:var(--agl-display);font-weight:400;line-height:1.08;font-size:clamp(30px,3.6vw,52px);margin:14px 0 0}
.s-head__title em{font-style:italic;color:var(--agl-gold)}
.section--day .s-head__title{color:var(--agl-ink)}
.section--day .s-head__title em{color:var(--agl-gold-deep)}
/* On noir grounds Cormorant needs weight 500 to hold (per --agl-display-min-weight-dark). */
.section--noir .s-head__title,.section--noir-raised .s-head__title{font-weight:500}

.s-sub{font-family:var(--agl-body);font-size:clamp(15px,1.2vw,17px);line-height:1.7;margin:18px 0 0;max-width:52ch;color:var(--agl-stone-300)}
.section--day .s-sub{color:var(--agl-ink-2)}

/* Headline size variants (heroes/CTAs want bigger; meta sections smaller). */
.s-head__title--xl{font-size:clamp(40px,5vw,76px)}
.s-head__title--sm{font-size:clamp(24px,2.6vw,38px)}

/* ============================================================================
   SECTION LIBRARY — Stage 2: Core trio (hero / split / stat)     (drop 10.1)
   Faithful ports of the gold sources: pil2-hero, pil-spot, pil2-perf.
   ============================================================================ */

/* --- .s-hero : image hero (GOLD: pil2-hero) --------------------------------
   88svh full presence; scrim baked into __bg::after (no separate scrim div);
   two-axis gradient (left for text, bottom for grounding). Full-bleed: the
   text uses padding-inline:var(--agl-inline) on the full-width __in (correct
   use of the token — 100% = viewport here). */
.s-hero{position:relative;min-height:88svh;display:flex;align-items:flex-end;background:var(--agl-noir-950);color:var(--agl-ivory);overflow:hidden}
.s-hero__bg{position:absolute;inset:0}
.s-hero__bg img{width:100%;height:100%;object-fit:cover;display:block}
.s-hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(92deg,rgba(11,11,10,.72) 0%,rgba(11,11,10,.42) 42%,rgba(11,11,10,.08) 75%),linear-gradient(180deg,rgba(11,11,10,.32) 0%,rgba(11,11,10,0) 30%,rgba(11,11,10,.55) 78%,rgba(11,11,10,.9) 100%)}
.s-hero__in{position:relative;width:100%;padding:0 var(--agl-inline) 88px;max-width:none}
.s-hero__title{font-family:var(--agl-display);font-weight:500;font-size:clamp(46px,5.4vw,76px);line-height:1.04;margin:24px 0 22px;max-width:none}
.s-hero__title em{font-style:italic;color:var(--agl-gold)}
.s-hero__lede{color:var(--agl-stone-300);font-weight:300;max-width:46ch;margin:0 0 30px}
.s-hero__cta{display:flex;gap:16px;flex-wrap:wrap}
/* lighter-scrim modifier (e.g. when the stone must shine, left+bottom only) */
.s-hero--airy .s-hero__bg::after{background:linear-gradient(92deg,rgba(11,11,10,.66) 0%,rgba(11,11,10,.3) 30%,rgba(11,11,10,0) 52%),linear-gradient(180deg,rgba(11,11,10,0) 60%,rgba(11,11,10,.46) 100%)}

/* --- .s-split : image + text split (GOLD: pil-spot) ------------------------
   default 1.25fr:1fr (image-weighted). Modifiers: --even (50/50), --rev
   (image right). Body padding stays internal (not --agl-inline misuse). */
.s-split{display:grid;grid-template-columns:1.25fr 1fr;background:var(--agl-noir-950);color:var(--agl-ivory)}
.s-split__media{min-height:480px;position:relative;overflow:hidden}
.s-split__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s-split__body{display:flex;flex-direction:column;justify-content:center;padding:80px clamp(40px,5vw,96px)}
.s-split__title{font-family:var(--agl-display);font-weight:400;font-size:clamp(28px,3vw,44px);margin:14px 0 12px}
.s-split__title em{font-style:italic;color:var(--agl-gold)}
.s-split__body p{color:var(--agl-stone-300);font-weight:300;max-width:46ch;margin:0 0 24px}
.s-split--even{grid-template-columns:1fr 1fr}
.s-split--rev .s-split__media{order:2}
.s-split--rev .s-split__body{order:1}
@media(max-width:900px){
	.s-split{grid-template-columns:1fr}
	.s-split__media{min-height:320px;order:0!important}
	.s-split__body{padding:48px 24px;order:0!important}
}

/* --- .s-stat : stat band (GOLD: pil2-perf .pil2-nums) ----------------------
   bordered 4-up numeral cells with index + label + description, optional chip
   row. --compact drops borders/descriptions for the minimal look (panels). */
.s-stat{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--agl-hairline-day);margin-block:46px}
.s-stat__cell{padding:44px 34px;border-right:1px solid var(--agl-hairline-day)}
.s-stat__cell:last-child{border-right:0}
.s-stat__top{display:flex;justify-content:space-between;align-items:flex-start}
.s-stat__n{display:block;font-family:var(--agl-display);font-weight:320;font-size:clamp(44px,4.2vw,62px);line-height:1;color:var(--agl-ink);margin-bottom:13px;white-space:nowrap}
.s-stat__n small{font-size:.42em;font-weight:400;color:var(--agl-ink-2)}
.s-stat__idx{font-family:var(--agl-body);font-size:11px;letter-spacing:.18em;color:var(--agl-ink-3)}
.s-stat__l{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-variation-settings:"wdth" 112;font-weight:500;color:var(--agl-ink-2)}
.s-stat__cell p{font-size:13.5px;line-height:1.65;color:var(--agl-ink-2);margin:14px 0 0;max-width:28ch}
/* on noir grounds, flip the inks/hairlines */
.section--noir .s-stat,.section--noir-raised .s-stat{border-color:var(--agl-hairline)}
.section--noir .s-stat__cell,.section--noir-raised .s-stat__cell{border-color:var(--agl-hairline)}
.section--noir .s-stat__n,.section--noir-raised .s-stat__n{color:var(--agl-ivory)}
.section--noir .s-stat__l,.section--noir-raised .s-stat__l,.section--noir .s-stat__cell p,.section--noir-raised .s-stat__cell p{color:var(--agl-stone-300)}
/* --compact: minimal — no borders, no descriptions (panels look) */
.s-stat--compact{border:0;margin-top:30px;margin-bottom:0}
.s-stat--compact .s-stat__cell{border:0;padding:20px 16px 0 0}
.s-stat--compact .s-stat__cell p,.s-stat--compact .s-stat__idx{display:none}
/* --compact is the minimal/dark-ground use (e.g. inside a noir .s-split body):
   carry ivory text itself so it does not depend on a .section--noir ancestor. */
.s-stat--compact .s-stat__n{color:var(--agl-ivory)}
.s-stat--compact .s-stat__n small,.s-stat--compact .s-stat__l{color:var(--agl-stone-300)}
@media(max-width:760px){
	.s-stat{grid-template-columns:1fr 1fr}
	.s-stat__cell:nth-child(odd){padding-left:0}
}

/* ============================================================================
   SECTION LIBRARY — Stage 3: Image bands                         (drop 10.2)
   Ports of: panels-interlude, panels-mosaic, h-thresh, h-ix.
   ============================================================================ */

/* --- .s-interlude : full-bleed cinematic band (GOLD: panels-interlude) ------
   21:9 letterbox, caption lower-left at the page gutter. Caption uses the
   full-width pattern (max-width:none + --agl-inline padding) — correct here. */
.s-interlude{position:relative;width:100%;aspect-ratio:21/9;max-height:72vh;min-height:480px;overflow:hidden;background:#000;display:flex;align-items:flex-end}
.s-interlude__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center}
.s-interlude__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,10,.32) 0%,rgba(11,11,10,0) 30%,rgba(11,11,10,0) 60%,rgba(11,11,10,.72) 100%);z-index:1}
.s-interlude__cap{position:relative;z-index:2;width:100%;padding:0 var(--agl-inline) 64px}
.s-interlude__cap .eyebrow{color:var(--agl-gold)}
.s-interlude__cap p{font-family:var(--agl-display);font-weight:400;font-size:clamp(30px,3.6vw,52px);line-height:1.08;margin:14px 0 0;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.55)}
.s-interlude__cap p em{font-style:italic;color:var(--agl-gold)}
@media(max-width:900px){
	.s-interlude{aspect-ratio:auto;height:64vh;min-height:420px}
	.s-interlude__img{object-position:64% center}
}

/* --- .s-mosaic : application tiles (GOLD: panels-mosaic) -------------------
   4-up grid, --lg tile spans 2x2. Caption + gradient + hover-zoom baked in.
   Lives inside a .section (which provides the gutter); centers via max-width. */
.s-mosaic{max-width:var(--agl-page-max);margin-inline:auto;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:16px}
.s-mosaic__tile{position:relative;margin:0;overflow:hidden}
.s-mosaic__tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--agl-ease)}
.s-mosaic__tile:hover img{transform:scale(1.05)}
.s-mosaic__tile figcaption{position:absolute;left:16px;bottom:14px;z-index:2;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#fff;font-variation-settings:"wdth" 112;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.s-mosaic__tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(11,11,10,.6));z-index:1}
.s-mosaic__tile--lg{grid-column:span 2;grid-row:span 2}
@media(max-width:760px){
	.s-mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
	.s-mosaic__tile--lg{grid-column:span 2;grid-row:span 1}
}

/* --- .s-thresh : threshold ticker (GOLD: h-thresh) -------------------------
   slim "facts at the join" band. Lives inside a .section--noir-raised for the
   gutter, OR standalone with padding-inline:var(--agl-inline). */
.s-thresh{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:24px;padding-inline:var(--agl-inline);background:var(--agl-noir-900);border-top:1px solid var(--agl-hairline-soft);color:var(--agl-stone-300);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-variation-settings:"wdth" 112}
.s-thresh b{color:var(--agl-gold);font-weight:500}
@media(max-width:760px){
	.s-thresh{flex-direction:column;gap:10px;text-align:center}
	.s-thresh b{display:none}
}

/* --- .s-index-split : numbered-list split (GOLD: h-ix) --------------------
   left = eyebrow/headline/sub + numbered accordion; right = swapping image
   stage. Active row gets gold left-border + white card + revealed sublabel.
   JS toggles .on on rows + matching stage img (see s-index-split init). */
.s-index-split{background:var(--agl-day-50);color:var(--agl-ink);padding:0}
.s-index-split__main{display:grid;grid-template-columns:minmax(400px,580px) 1fr;align-items:stretch}
.s-index-split__col{display:flex;flex-direction:column;justify-content:center;padding:112px 56px 112px var(--agl-inline)}
.s-index-split__hd h2{font-family:var(--agl-display);font-weight:500;font-size:clamp(28px,3vw,40px);line-height:1.12;margin:14px 0 10px}
.s-index-split__hd h2 em{font-style:italic;color:var(--agl-gold-deep)}
.s-index-split__hd p{color:var(--agl-ink-2);font-weight:320}
.s-index-split__list{margin-top:36px;border-top:1px solid var(--agl-hairline-day)}
.s-index-split__row{display:block;text-decoration:none;color:inherit;padding:27px 24px 27px 18px;border-bottom:1px solid var(--agl-hairline-day);border-left:2px solid transparent;transition:border-left-color var(--agl-t-base) var(--agl-ease),opacity var(--agl-t-base) var(--agl-ease),background var(--agl-t-base) var(--agl-ease)}
.s-index-split__row .no{font-size:10px;letter-spacing:.24em;color:var(--agl-gold-ink);font-variation-settings:"wdth" 112;font-weight:500;margin-right:14px;vertical-align:super}
.s-index-split__row .nm{font-family:var(--agl-display);font-weight:500;font-size:clamp(24px,2.2vw,32px);line-height:1.12;color:var(--agl-ink-2);transition:color var(--agl-t-base) var(--agl-ease)}
.s-index-split__row .sub{display:block;overflow:hidden;max-height:0;opacity:0;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--agl-ink-3);margin:0 0 0 30px;font-variation-settings:"wdth" 112;transition:max-height .6s var(--agl-ease),opacity .6s var(--agl-ease),margin-top .6s var(--agl-ease)}
.s-index-split__row.on{border-left-color:var(--agl-gold-deep);background:#fff}
.s-index-split__row.on .nm{color:var(--agl-ink)}
.s-index-split__row.on .sub{max-height:40px;opacity:1;margin-top:8px}
.s-index-split__list:hover .s-index-split__row:not(.on){opacity:.5}
.s-index-split__stage{position:relative;overflow:hidden;min-height:860px;max-height:1040px}
.s-index-split__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--agl-ease)}
.s-index-split__stage img.on{opacity:1}
@media(max-width:980px){.s-index-split__main{grid-template-columns:minmax(340px,46%) 1fr}}
@media(max-width:760px){
	.s-index-split__main{grid-template-columns:1fr}
	.s-index-split__stage{min-height:0;height:40svh;order:-1}
	.s-index-split__col{padding:32px 24px 48px}
}

/* ============================================================================
   SECTION LIBRARY — Stage 4: Rich sections                       (drop 10.3)
   Ports of: an2-band, pil-grid, h-ed (.edcard), pil2-proj, panels-table, v-cta.
   ============================================================================ */

/* --- .s-scene : annotated hotspot scene (GOLD: an2-band) -------------------
   16:9 scene + positioned hotspot ticks (gold disc + rotating X) → anchored
   callouts + leader line. JS: assets/js/scene.js (generalized from panels.js).
   Product credit row (.s-scene__credit) is OPTIONAL — omit when no product. */
.s-scene{background:var(--agl-noir-950);color:var(--agl-ivory);padding-inline:var(--agl-inline);padding-top:104px;padding-bottom:115px}
.s-scene__head{margin-bottom:50px;max-width:var(--agl-page-max);margin-inline:auto}
.s-scene__head h2{font-family:var(--agl-display);font-weight:400;font-size:clamp(34px,3.4vw,50px);margin:20px 0 14px}
.s-scene__head h2 em{font-style:italic;color:var(--agl-gold)}
.s-scene__sub{font-family:var(--agl-display);font-style:italic;color:var(--agl-stone-300);font-size:17px;margin:0;max-width:52ch}
.s-scene__frame{position:relative;overflow:hidden;aspect-ratio:16/9;max-width:var(--agl-page-max);margin-inline:auto}
.s-scene__frame>img{width:100%;height:100%;object-fit:cover;display:block}
.s-scene__frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,9,.1),transparent 28%,transparent 72%,rgba(10,10,9,.28));pointer-events:none}
.s-scene__tick{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;background:none;border:0;cursor:pointer;padding:0;z-index:3;opacity:0;transform:translateY(10px) scale(.85);transition:opacity .6s var(--agl-ease),transform .6s var(--agl-ease)}
.s-scene__frame.show .s-scene__tick{opacity:1;transform:none}
.s-scene__frame.show .s-scene__tick:nth-of-type(1){transition-delay:.15s}
.s-scene__frame.show .s-scene__tick:nth-of-type(2){transition-delay:.4s}
.s-scene__frame.show .s-scene__tick:nth-of-type(3){transition-delay:.65s}
.s-scene__frame.show .s-scene__tick:nth-of-type(4){transition-delay:.9s}
.s-scene__disc{position:absolute;inset:7px;border-radius:50%;background:rgba(12,12,11,.55);border:1px solid rgba(200,183,138,.75);box-shadow:0 0 0 1px rgba(11,11,10,.4);transition:transform .35s var(--agl-ease),border-color .3s,background .3s,box-shadow .3s}
@supports (backdrop-filter: blur(1px)){.s-scene__disc{backdrop-filter:blur(5px)}}
.s-scene__tick:hover .s-scene__disc,.s-scene__tick:focus-visible .s-scene__disc{transform:scale(1.15);border-color:var(--agl-gold)}
.s-scene__tick.on .s-scene__disc{background:rgba(12,12,11,.78);border-color:var(--agl-gold);border-width:1.5px;box-shadow:0 0 0 1.5px rgba(11,11,10,.55)}
.s-scene__mark{position:absolute;left:50%;top:50%;width:13px;height:13px;transform:translate(-50%,-50%);transition:transform .35s var(--agl-ease)}
.s-scene__mark::before,.s-scene__mark::after{content:"";position:absolute;left:50%;top:50%;background:var(--agl-gold)}
.s-scene__mark::before{width:13px;height:1.5px;transform:translate(-50%,-50%)}
.s-scene__mark::after{width:1.5px;height:13px;transform:translate(-50%,-50%)}
.s-scene__tick.on .s-scene__mark{transform:translate(-50%,-50%) rotate(45deg)}
.s-scene__tick:focus-visible{outline:none}
.s-scene__lead{position:absolute;height:1px;background:var(--agl-gold);transform-origin:0 50%;z-index:3;opacity:0;transition:opacity .35s}
.s-scene__lead.on{opacity:.8}
.s-scene__call{position:absolute;z-index:4;width:min(320px,70vw);background:rgba(12,12,11,.92);border:1px solid rgba(200,183,138,.45);padding:24px 26px;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .4s,transform .4s var(--agl-ease)}
@supports (backdrop-filter: blur(1px)){.s-scene__call{backdrop-filter:blur(6px)}}
.s-scene__call.on{opacity:1;transform:translateY(0);pointer-events:auto}
.s-scene__call .k{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--agl-gold);font-variation-settings:"wdth" 112;font-weight:500}
.s-scene__call h4{font-family:var(--agl-display);font-weight:450;font-size:20px;margin:9px 0 8px}
.s-scene__call p{font-size:13.5px;line-height:1.6;color:var(--agl-stone-300);margin:0}
.s-scene__credit{display:flex;justify-content:space-between;align-items:center;margin-top:20px;max-width:var(--agl-page-max);margin-inline:auto;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--agl-stone-300);font-variation-settings:"wdth" 112}
.s-scene__credit a{color:var(--agl-gold);text-decoration:none}
.s-scene__credit a:hover{text-decoration:underline}
@media(max-width:760px){.s-scene__call{left:24px!important;right:24px;width:auto;top:auto!important;bottom:18px}}

/* --- .s-matgrid : material grid + filter chips (GOLD: pil-grid) ------------- */
.s-matgrid{background:var(--agl-day-50);color:var(--agl-ink);padding:96px var(--agl-inline) 112px}
.s-matgrid__head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:44px;max-width:var(--agl-page-max);margin-inline:auto}
.s-matgrid__head h2{font-family:var(--agl-display);font-weight:500;font-size:clamp(28px,3vw,40px);margin:14px 0 0}
.s-matgrid__head h2 em{font-style:italic;color:var(--agl-gold-ink)}
.s-matgrid__chips{display:flex;gap:10px;flex-wrap:wrap}
.s-matgrid__chip{font-family:var(--agl-body);font-variation-settings:"wdth" 112;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;padding:10px 18px;background:transparent;border:1px solid var(--agl-hairline-day);color:var(--agl-ink-2);cursor:pointer;transition:border-color var(--agl-t-base) var(--agl-ease),color var(--agl-t-base) var(--agl-ease),background var(--agl-t-base) var(--agl-ease)}
.s-matgrid__chip:hover{border-color:rgba(22,20,15,.45)}
.s-matgrid__chip.on{background:var(--agl-ink);color:var(--agl-day-50);border-color:var(--agl-ink)}
.s-matgrid__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:var(--agl-page-max);margin-inline:auto}
.s-matgrid__card{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--agl-hairline-day-soft);transition:border-color var(--agl-t-base) var(--agl-ease),transform var(--agl-t-base) var(--agl-ease),box-shadow var(--agl-t-base) var(--agl-ease)}
.s-matgrid__card:hover{border-color:rgba(22,20,15,.3);transform:translateY(-2px);box-shadow:0 18px 50px rgba(22,20,15,.08)}
.s-matgrid__card.hid{display:none}
.s-matgrid__cardimg{display:block;position:relative;aspect-ratio:4/3;overflow:hidden}
.s-matgrid__cardimg::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(22,20,15,.08);pointer-events:none}
.s-matgrid__cardimg img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--agl-ease)}
.s-matgrid__card:hover .s-matgrid__cardimg img{transform:scale(1.03)}
.s-matgrid__cardbody{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:18px 20px 20px}
.s-matgrid__cardname{font-family:var(--agl-display);font-weight:500;font-size:21px}
.s-matgrid__cardfam{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--agl-gold-ink);font-variation-settings:"wdth" 112;font-weight:500}
@media(max-width:1100px){.s-matgrid__cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.s-matgrid__cards{grid-template-columns:1fr}}

/* --- .s-editorial : 3-up editorial rail (GOLD: h-ed .edcard) --------------- */
.s-editorial{background:var(--agl-noir-900);color:var(--agl-ivory);padding:92px var(--agl-inline);border-top:1px solid var(--agl-hairline-soft)}
.s-editorial__head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:36px;max-width:var(--agl-page-max);margin-inline:auto}
.s-editorial__head h2{font-family:var(--agl-display);font-weight:500;font-size:clamp(28px,3.2vw,40px);margin-top:14px}
.s-editorial__head h2 em{font-style:italic;color:var(--agl-gold)}
.s-editorial__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:var(--agl-page-max);margin-inline:auto}
.s-editorial__card{display:block;text-decoration:none;color:inherit;background:var(--agl-noir-850);border:1px solid var(--agl-hairline);transition:border-color var(--agl-t-base) var(--agl-ease),opacity var(--agl-t-base) var(--agl-ease)}
.s-editorial__card .ei{display:block;aspect-ratio:4/2.9;overflow:hidden}
.s-editorial__card .ei img{width:100%;height:100%;object-fit:cover;display:block}
.s-editorial__card .eb{display:block;padding:20px 22px 24px}
.s-editorial__card .no{font-size:10px;letter-spacing:.26em;color:var(--agl-gold);text-transform:uppercase;font-variation-settings:"wdth" 112;font-weight:500}
.s-editorial__card .et{display:block;font-family:var(--agl-display);font-weight:600;font-size:21px;line-height:1.2;margin-top:10px}
.s-editorial__card .em{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--agl-stone-500);margin-top:12px;font-variation-settings:"wdth" 112}
.s-editorial__card:hover{border-color:rgba(244,242,237,.25)}
.s-editorial__grid:hover .s-editorial__card:not(:hover){opacity:.45}
@media(max-width:860px){.s-editorial__grid{grid-template-columns:1fr}}

/* --- .s-projects : feature project rail (GOLD: pil2-proj) ------------------ */
.s-projects{background:var(--agl-day-50);color:var(--agl-ink);padding:115px var(--agl-inline)}
.s-projects__head{max-width:var(--agl-page-max);margin-inline:auto}
.s-projects__head h2{font-family:var(--agl-display);font-weight:400;font-size:clamp(34px,3.4vw,50px);color:var(--agl-ink);margin:20px 0 52px}
.s-projects__head h2 em{font-style:italic;color:var(--agl-gold-ink)}
.s-projects__card{display:grid;grid-template-columns:1.3fr 1fr;background:#fff;box-shadow:0 1px 0 rgba(22,20,15,.07),0 24px 60px -30px rgba(22,20,15,.18);max-width:var(--agl-page-max);margin-inline:auto}
.s-projects__img{min-height:420px;overflow:hidden}
.s-projects__img img{width:100%;height:100%;object-fit:cover;display:block}
.s-projects__body{padding:56px 52px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.s-projects__body h3{font-family:var(--agl-display);font-weight:440;font-size:30px;color:var(--agl-ink);margin:16px 0 14px}
.s-projects__body p{font-size:15.5px;line-height:1.75;color:var(--agl-ink-2);margin:0 0 30px}
@media(max-width:860px){.s-projects__card{grid-template-columns:1fr}.s-projects__img{min-height:280px}}

/* --- .s-compare : comparison table (GOLD: panels-table) ------------------- */
.s-compare{max-width:var(--agl-page-max);margin-inline:auto;width:100%;border-collapse:collapse;font-family:var(--agl-body)}
.s-compare th,.s-compare td{text-align:left;padding:18px 20px;border-bottom:1px solid rgba(14,14,16,.12);vertical-align:top;font-size:15px;line-height:1.6}
.s-compare thead th{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#6a6258;font-weight:500;font-variation-settings:"wdth" 112}
.s-compare tbody th{font-family:var(--agl-display);font-weight:500;font-size:17px;color:var(--agl-ink);width:18%}
.s-compare td:last-child{color:var(--agl-ink);font-weight:500}
.s-compare td:nth-child(2){color:#8a8278}

/* --- .s-cta : closing conversion band (GOLD: v-cta) ----------------------- */
.s-cta{background:radial-gradient(900px 380px at 50% -16%, rgba(200,183,138,.06), transparent 62%),linear-gradient(160deg,#100f0d,#0b0b0a 60%);padding:104px var(--agl-inline);text-align:center;color:var(--agl-ivory)}
.s-cta__mark{display:flex;justify-content:center;margin-bottom:26px}
.s-cta__mark img{height:48px;width:auto;display:block}
.s-cta .eyebrow{justify-content:center}
.s-cta .eyebrow::after{content:"";height:1px;width:40px;background:var(--agl-gold-deep);opacity:.6}
.s-cta h2{font-family:var(--agl-display);font-weight:500;font-size:clamp(32px,4vw,50px);line-height:1.08;margin:20px 0 16px}
.s-cta h2 em{font-style:italic;color:var(--agl-gold)}
.s-cta p{color:var(--agl-stone-300);font-weight:300;max-width:52ch;margin:0 auto}
.s-cta .agl-btn{margin-top:34px}
.s-cta__alt{margin-top:22px;font-size:12.5px;color:var(--agl-stone-500)}
.s-cta__alt a{color:var(--agl-stone-300);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(244,242,237,.3);transition:color var(--agl-t-base) var(--agl-ease)}
.s-cta__alt a:hover{color:var(--agl-gold)}

/* ============================================================================
   NAV — Collections mega-panel. "Collections" stays a real menu item; this panel
   drops under the header on hover (nav.js wires it by href). LEFT = four equal
   collection tiles; RIGHT = three filter-link columns (By Look/Finish/Colour)
   deep-linking into /collections/?axis=term. Reuses the nav gold-hairline idiom.
   ============================================================================ */
.has-nav-panel > a{display:inline-flex;align-items:center;gap:7px}
.has-nav-panel > a::before{content:"";position:absolute;left:0;right:0;bottom:-22px;height:26px;display:none}      /* hover bridge to the panel */
.has-nav-panel.is-open > a::before{display:block}

.nav-panel{position:absolute;left:0;right:0;top:100%;z-index:60;background:var(--agl-noir-950);border-bottom:1px solid var(--agl-hairline);box-shadow:0 30px 60px rgba(0,0,0,.5);opacity:0;transform:translateY(-10px);transition:opacity .34s var(--agl-ease,cubic-bezier(.22,.61,.36,1)),transform .34s var(--agl-ease,cubic-bezier(.22,.61,.36,1))}
.nav-panel.is-open{opacity:1;transform:translateY(0)}
.nav-panel::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--agl-gold) 18%,var(--agl-gold) 82%,transparent);opacity:.5}

.nav-panel__in{padding:38px var(--agl-inline) 42px;display:grid;grid-template-columns:1.35fr 1fr;gap:72px;align-items:start}

/* LEFT */
.nav-panel__eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--agl-ivory,#f4f2ed);margin-bottom:22px}
.nav-panel__eyebrow--gold{color:var(--agl-gold)}
.nav-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.nav-tile{display:block;text-decoration:none;color:inherit}
.nav-tile__win{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#0d0d0c;border:1px solid var(--agl-hairline)}
.nav-tile__win img{width:100%;height:100%;object-fit:cover;display:block;opacity:.82;transition:transform .8s var(--agl-ease,cubic-bezier(.22,.61,.36,1)),opacity .5s var(--agl-ease,cubic-bezier(.22,.61,.36,1))}
.nav-tile:hover .nav-tile__win img{transform:scale(1.06);opacity:1}
.nav-tile__win::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(11,11,10,.5))}
.nav-tile__name{display:block;font-family:var(--agl-display,'Cormorant Garamond',serif);font-size:19px;color:var(--agl-ivory,#f4f2ed);margin:11px 0 3px;line-height:1.1}
.nav-tile__desc{display:block;font-size:11.5px;line-height:1.5;color:var(--agl-stone-300);font-weight:300}

/* RIGHT — Look + Colour as side-by-side 2x4 grids; Finish as tag chips beneath. */




.nav-grp__all{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--agl-gold);text-decoration:none;white-space:nowrap}
.nav-grp__all:hover{opacity:.7}
/* 2 columns x up to 4 rows, column-first so 8 items read as two stacks of four */





/* By Finish — bordered tag chips (the .agl-tag idiom), same eyebrow size as the others. */





.nav-panel__all{margin-top:2px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--agl-gold);text-decoration:none;align-self:start}
.nav-panel__all:hover{opacity:.75}

/* the panel is a desktop hover affordance; on mobile the burger menu handles nav. */
@media(max-width:1024px){.nav-panel{display:none!important}}

/* info icon + tooltip on the filter headings */

.nav-info{position:relative;display:inline-flex;align-items:center;color:var(--agl-gold-ink,#756844);cursor:help;line-height:0}
.nav-info:hover,.nav-info:focus{color:var(--agl-gold);outline:none}
.nav-tip{position:absolute;right:calc(100% + 9px);top:50%;transform:translateY(-50%) translateX(4px);width:152px;background:var(--agl-noir-900,#121110);border:1px solid var(--agl-hairline);color:var(--agl-stone-300);font-family:var(--agl-body,'Archivo',sans-serif);font-size:11px;line-height:1.45;letter-spacing:.01em;text-transform:none;text-align:left;padding:10px 12px;opacity:0;visibility:hidden;transition:opacity .24s var(--agl-ease,cubic-bezier(.22,.61,.36,1)),transform .24s var(--agl-ease,cubic-bezier(.22,.61,.36,1)),visibility 0s linear .24s;z-index:5;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.nav-tip::after{content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);border:5px solid transparent;border-left-color:var(--agl-noir-900,#121110)}
.nav-info:hover .nav-tip,.nav-info:focus .nav-tip{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0);transition:opacity .24s var(--agl-ease,cubic-bezier(.22,.61,.36,1)),transform .24s var(--agl-ease,cubic-bezier(.22,.61,.36,1))}

/* logomark watermark — darker than the panel bg, filling the empty lower-right space.
   The right column is shorter than the tall tile stack on the left, so we let it grow
   and drop the mark into the space below "View all collections". */

/* tagline text watermark — near-black (just above the panel bg), heading font, lower-right */



/* ── Right side: clean, responsive filter axes (chip rows) ─────────────────── */
.nav-panel__right{display:flex;flex-direction:column;gap:30px;align-self:start}
.nav-axis{display:flex;flex-direction:column;gap:14px}
.nav-axis__head{display:inline-flex;align-items:center;gap:6px}
.nav-axis__label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--agl-gold-ink,#756844)}
.nav-axis__chips{display:flex;flex-wrap:wrap;gap:8px}
.nav-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;font-size:12px;letter-spacing:.02em;color:var(--agl-stone-300);text-decoration:none;border:1px solid var(--agl-hairline);border-radius:var(--agl-edge,0);white-space:nowrap;transition:border-color var(--agl-t-base,.32s) var(--agl-ease,cubic-bezier(.22,.61,.36,1)),color var(--agl-t-base,.32s) var(--agl-ease,cubic-bezier(.22,.61,.36,1)),background var(--agl-t-base,.32s) var(--agl-ease,cubic-bezier(.22,.61,.36,1))}
.nav-chip:hover{border-color:var(--agl-gold);color:var(--agl-ivory);background:rgba(200,183,138,.06)}
.nav-chip__sw{width:11px;height:11px;border-radius:50%;border:1px solid rgba(244,242,237,.28);flex:0 0 auto}
.nav-panel__all{margin-top:4px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--agl-gold);text-decoration:none;align-self:start;transition:color var(--agl-t-base,.32s) var(--agl-ease)}
.nav-panel__all:hover{color:var(--agl-ivory)}

/* responsive: on narrower panels, the right side can drop under the tiles */
/* below ~1200px the two columns get tight; stack them (panel is hidden <=1024 via mobile rule) */
@media (max-width:1200px){
  .nav-panel__in{grid-template-columns:1fr;gap:34px}
  .nav-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* footer brand column + CTA */
.agl-foot .fbrand{max-width:30ch}
.agl-foot .fbrand__tagline{margin-top:14px;font-family:var(--agl-display,'Cormorant Garamond',serif);font-weight:400;font-size:24px;line-height:1.3;letter-spacing:.005em;color:var(--agl-stone-300);max-width:18ch}
.agl-foot .fcta{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:12px 22px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--agl-noir-950);background:var(--agl-gold);border:1px solid var(--agl-gold);text-decoration:none;border-radius:var(--agl-edge,0);transition:background var(--agl-t-base) var(--agl-ease),color var(--agl-t-base) var(--agl-ease)}
.agl-foot .fcta:hover{background:transparent;color:var(--agl-gold)}
.agl-foot .fcta .arr{transition:transform var(--agl-t-base) var(--agl-ease)}
.agl-foot .fcta:hover .arr{transform:translateX(3px)}
/* footer newsletter form */
.agl-foot .fnews__form{margin-top:18px}
.agl-foot .fnews__row{display:flex;align-items:stretch;border:1px solid var(--agl-hairline);border-radius:var(--agl-edge,0);background:rgba(244,242,237,.02);transition:border-color var(--agl-t-base) var(--agl-ease)}
.agl-foot .fnews__row:focus-within{border-color:var(--agl-gold-deep)}
.agl-foot .fnews__row input{flex:1 1 auto;min-width:0;background:transparent;border:0;outline:0;color:var(--agl-ivory);font-family:var(--agl-body);font-size:14px;padding:12px 14px}
.agl-foot .fnews__row input::placeholder{color:var(--agl-stone-500)}
.agl-foot .fnews__row button{flex:0 0 auto;background:transparent;border:0;border-left:1px solid var(--agl-hairline);color:var(--agl-gold);cursor:pointer;padding:0 16px;font-size:16px;transition:background var(--agl-t-base) var(--agl-ease),color var(--agl-t-base) var(--agl-ease)}
.agl-foot .fnews__row button:hover{background:var(--agl-gold);color:var(--agl-noir-950)}
.agl-foot .fnews__note{margin-top:10px;font-size:11.5px;line-height:1.5;color:var(--agl-stone-500)}
.agl-foot .fnews__note a{color:var(--agl-stone-300);text-decoration:underline;text-underline-offset:2px}
.agl-foot .fnews__note a:hover{color:var(--agl-gold)}
/* footer base bar — three groups */
.agl-foot .fbase__contact{display:flex;flex-wrap:wrap;gap:6px 18px}
.agl-foot .fbase__legal{display:flex;flex-wrap:wrap;gap:6px 18px}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ── Legal / policy pages (Privacy, Terms, Accessibility) ─────────────────── */
.legal{background:var(--agl-noir-950);color:var(--agl-stone-300);padding:clamp(64px,9vw,128px) var(--agl-inline) clamp(72px,10vw,140px)}
.legal__in{max-width:760px;margin:0 auto}
.legal__head{border-bottom:1px solid var(--agl-hairline);padding-bottom:34px;margin-bottom:44px}
.legal__eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--agl-gold);margin-bottom:18px}
.legal__title{font-family:var(--agl-display,'Cormorant Garamond',serif);font-weight:500;font-size:clamp(38px,6vw,60px);line-height:1.06;color:var(--agl-ivory);letter-spacing:.005em}
.legal__updated{margin-top:16px;font-size:12.5px;letter-spacing:.04em;color:var(--agl-stone-500)}
.legal__body{font-size:15.5px;line-height:1.75;color:var(--agl-stone-300)}
.legal__body h2{font-family:var(--agl-display,'Cormorant Garamond',serif);font-weight:500;font-size:26px;line-height:1.2;color:var(--agl-ivory);margin:48px 0 16px;letter-spacing:.005em}
.legal__body h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--agl-gold-ink,#756844);margin:32px 0 12px;font-weight:600}
.legal__body p{margin:0 0 18px}
.legal__body ul,.legal__body ol{margin:0 0 18px;padding-left:22px}
.legal__body li{margin:0 0 10px}
.legal__body a{color:var(--agl-ivory);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--agl-gold-deep);transition:color var(--agl-t-base) var(--agl-ease)}
.legal__body a:hover{color:var(--agl-gold)}
.legal__body strong{color:var(--agl-ivory);font-weight:600}
.legal__body hr{border:0;border-top:1px solid var(--agl-hairline);margin:40px 0}
.legal__body :first-child{margin-top:0}
.legal__body table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:14px}
.legal__body th,.legal__body td{text-align:left;padding:10px 14px;border:1px solid var(--agl-hairline);vertical-align:top}
.legal__body th{color:var(--agl-ivory);font-weight:600;background:rgba(244,242,237,.03)}

/* footer visualizer launcher — ghost sibling of .fcta */
.agl-foot .fviz{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:11px 22px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--agl-gold);background:transparent;border:1px solid var(--agl-hairline-gold,rgba(200,183,138,.35));text-decoration:none;border-radius:var(--agl-edge,0);cursor:pointer;font-family:var(--agl-body);transition:background var(--agl-t-base) var(--agl-ease),color var(--agl-t-base) var(--agl-ease),border-color var(--agl-t-base) var(--agl-ease)}
.agl-foot .fviz:hover{background:var(--agl-gold);color:var(--agl-noir-950);border-color:var(--agl-gold)}
.agl-foot .fviz .arr{transition:transform var(--agl-t-base) var(--agl-ease)}
.agl-foot .fviz:hover .arr{transform:translateX(3px)}

/* header CTA group — keeps Visualizer + Book a tour together (tight gap), so the
   header's space-between doesn't spread them apart on wide screens */
.agl-head__cta{display:flex;align-items:stretch;gap:12px;flex:0 0 auto}
/* both header buttons share identical height: same base padding, and stretch to match */
.agl-head__cta .agl-btn{align-items:center}

/* Mobile Collections accordion — touch counterpart to the desktop hover mega-panel.
   Lives inside .agl-menu; inherits its noir + display-font aesthetic. */
.agl-macc{border-bottom:1px solid var(--agl-hairline-soft)}
.agl-macc__toggle{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:14px 0;background:none;border:none;cursor:pointer;color:var(--agl-ivory);
  font-family:var(--agl-display);font-size:clamp(26px,7vw,34px);font-weight:500;text-align:left}
.agl-macc__chev{width:12px;height:12px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform var(--agl-t-base) var(--agl-ease);
  margin-left:16px;flex:0 0 auto;opacity:.7}
.agl-macc__toggle[aria-expanded="true"] .agl-macc__chev{transform:rotate(-135deg)}
.agl-macc__panel{display:flex;flex-direction:column;gap:0;padding:0 0 8px 0}
.agl-macc__panel[hidden]{display:none}
.agl-macc__panel a{display:block;padding:11px 0 11px 18px;font-family:var(--agl-body);
  font-size:18px;font-weight:400;color:var(--agl-ivory);text-decoration:none;opacity:.82;
  border-bottom:none;letter-spacing:.01em}
.agl-macc__panel a:active,.agl-macc__panel a:hover{opacity:1}
.agl-macc__all{margin-top:4px;font-size:15px!important;opacity:.6!important;
  text-transform:uppercase;letter-spacing:.12em}
.agl-macc__all .arr{margin-left:6px}

/* === MOBILE HEADER FIX (cascade-safe, end of file) =========================
   The base .agl-head__cta{display:flex} rule lives later in this file than the
   920px breakpoint, so it was overriding the mobile hide. Placing this block at
   the END guarantees it wins. Hides the desktop CTA cluster on mobile (the
   Visualizer + Book-a-tour buttons remain reachable inside the burger menu) and
   ensures the burger shows. */
@media (max-width:920px){
  .agl-nav{display:none !important}
  .agl-head__cta{display:none !important}
  .agl-burger{display:flex !important}
}

/* === MOBILE MENU LAYOUT FIX (cascade-safe, end of file) =====================
   The base .agl-menu uses justify-content:center, which vertically centers the
   items. With the Collections accordion added, the list is now taller than the
   viewport, so centering pushed the TOP items (Materials) up behind the header,
   off-screen. Switch to top-aligned + scrollable so all items are reachable. */
@media (max-width:920px){
  .agl-menu{
    justify-content:flex-start !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    padding-top:104px !important;
    padding-bottom:64px !important;
  }
}

/* === MOBILE PILLAR HERO SCRIM FIX (cascade-safe, end of file) ===============
   On mobile, the s-hero pillar heroes (Nano, Natural Textured, Panels) place the
   title/lede over the brightest centre of the photo. The desktop scrim — and
   especially the .s-hero--airy modifier — is too light there, so white text
   loses contrast on the bright images (only Sintered, which uses a different
   dark-image hero, read cleanly). This applies a stronger bottom-weighted scrim
   on mobile so all pillar heroes match Sintered's legibility. Desktop untouched. */
@media (max-width:920px){
  .s-hero__bg::after,
  .s-hero--airy .s-hero__bg::after{
    background:linear-gradient(180deg,
      rgba(11,11,10,.34) 0%,
      rgba(11,11,10,.20) 30%,
      rgba(11,11,10,.52) 62%,
      rgba(11,11,10,.88) 100%) !important;
  }
}

/* ============================================================================
   MOBILE RESPONSIVENESS PASS v5 (cascade-safe, end of file)
   Global component fixes for ≤920px: stacked heroes, card-stack tables,
   tightened heading line-height, even tile grids. Desktop untouched.
   ========================================================================== */
@media (max-width:920px){

  /* --- 1. HERO: STACK (clean image on top, text in solid noir panel below) ---
     The s-hero overlays text on the photo; on bright images it's unreadable.
     On mobile we un-overlay: image becomes a fixed-height block, the inner
     content drops into a solid noir panel beneath it. */
  .s-hero{
    display:block !important;
    min-height:0 !important;
  }
  .s-hero__bg{
    position:relative !important;
    height:54vw !important;        /* clean image band, ~16:9-ish */
    min-height:240px;
    max-height:360px;
  }
  .s-hero__bg img{
    height:100% !important;
    object-fit:cover;
  }
  .s-hero__bg::after{ display:none !important; }   /* no scrim needed now */
  .s-hero__in{
    position:relative !important;
    background:var(--agl-noir-950);
    color:var(--agl-ivory);
    padding:36px var(--agl-inline) 44px !important;
  }
  .s-hero__title{
    font-size:clamp(30px,8vw,40px) !important;
    line-height:1.1 !important;
    margin:14px 0 16px !important;
  }
  .s-hero__lede{
    font-size:15px !important;
    line-height:1.65 !important;
    margin:0 0 24px !important;
    max-width:none !important;
  }
  .s-hero__cta{ flex-direction:column; gap:12px; }
  .s-hero__cta .agl-btn{ width:100%; justify-content:center; }

  /* --- 2. COMPARISON TABLE: CARD-STACK (no horizontal overflow) ---
     Each row becomes a stacked card: row label on top, then the two values
     each on their own line, prefixed by a small column label. */
  .s-compare{ display:block !important; width:100% !important; }
  .s-compare thead{ display:none !important; }       /* hide the header row */
  .s-compare tbody,.s-compare tr{ display:block !important; width:100%; }
  .s-compare tr{
    border:1px solid rgba(14,14,16,.14);
    border-radius:0;
    padding:16px 18px;
    margin-bottom:14px;
  }
  .s-compare tbody th{
    display:block !important;
    width:auto !important;
    font-family:var(--agl-display);
    font-size:19px !important;
    color:var(--agl-ink) !important;
    padding:0 0 12px !important;
    border:0 !important;
  }
  .s-compare td{
    display:block !important;
    padding:8px 0 0 0 !important;
    border:0 !important;
    font-size:15px !important;
    line-height:1.55;
  }
  .s-compare td:nth-child(2)::before{
    content:"Stone — ";
    font-size:11px; letter-spacing:.14em; text-transform:uppercase;
    color:#9a9288; font-weight:500;
  }
  .s-compare td:last-child::before{
    content:"AGL — ";
    font-size:11px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--agl-gold-ink); font-weight:600;
  }

  /* --- 3. HEADING LINE-HEIGHT: tighten big display headings on mobile --- */
  .s-head__title,
  .s-hero__title,
  .pil2-perf h2,
  .pil-head h1{
    line-height:1.12 !important;
  }

  /* --- 4. TILES: even 2-col grid with consistent borders (pil2-nums) ---
     .pil2-nums stayed at 4 columns on mobile (uneven, cramped). Make it a
     clean 2-col grid with matched borders so all four tiles align. */
  .pil2-nums{
    grid-template-columns:1fr 1fr !important;
    border:1px solid var(--agl-hairline-day) !important;
  }
  .pil2-num{
    padding:26px 22px !important;
    border-right:1px solid var(--agl-hairline-day) !important;
    border-bottom:1px solid var(--agl-hairline-day) !important;
  }
  .pil2-num:nth-child(2n){ border-right:0 !important; }
  .pil2-num:nth-last-child(-n+2){ border-bottom:0 !important; }
}

/* very small phones — single column tiles for breathing room */
@media (max-width:480px){
  .pil2-nums{ grid-template-columns:1fr !important; }
  .pil2-num{ border-right:0 !important; }
  .pil2-num:last-child{ border-bottom:0 !important; }
}

/* ============================================================================
   MOBILE INTERLUDE/FEATURE STACK v6 (cascade-safe, end of file)
   Same stack treatment as the heroes, applied to the content sections that
   overlay text on bright images: .s-interlude (Nano/Natural/Panels-LIB),
   .panels-interlude (Panels page), and .pp-grow (Partners). On mobile each
   becomes: clean image band on top, text in a solid noir panel below.
   ========================================================================== */
@media (max-width:920px){

  /* --- .s-interlude (library: Nano, Natural Textured, Panels-LIB) --- */
  .s-interlude{
    display:block !important;
    aspect-ratio:auto !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
  }
  .s-interlude__img{
    position:relative !important;
    height:52vw !important;
    min-height:220px;
    max-height:340px;
  }
  .s-interlude__scrim{ display:none !important; }
  .s-interlude__cap{
    background:var(--agl-noir-950);
    padding:30px var(--agl-inline) 36px !important;
  }
  .s-interlude__cap p{
    font-size:clamp(24px,6.5vw,32px) !important;
    text-shadow:none !important;
  }

  /* --- .panels-interlude (Panels page variant) --- */
  .panels-interlude{
    display:block !important;
    aspect-ratio:auto !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
  }
  .panels-interlude-img{
    position:relative !important;
    height:52vw !important;
    min-height:220px;
    max-height:340px;
  }
  .panels-interlude-scrim{ display:none !important; }
  .panels-interlude-cap{
    background:var(--agl-noir-950);
    padding:30px var(--agl-inline) 36px !important;
  }
  .panels-interlude-cap p{ text-shadow:none !important; }

  /* --- .pp-grow (Partners: uses background-image, not <img>) ---
     Can't un-overlay a background-image cleanly, so give it a strong solid
     ground: deepen the scrim to near-opaque so text reads, and let the
     section size to content. */
  .pp-grow{ min-height:0 !important; }
  .pp-grow-media{ min-height:200px; }
  .pp-grow-scrim{
    background:linear-gradient(180deg,
      rgba(11,11,10,.55) 0%,
      rgba(11,11,10,.82) 55%,
      rgba(11,11,10,.92) 100%) !important;
  }
  .pp-grow-in{ position:relative; z-index:2; }
}

/* ============================================================================
   MOBILE — targeted final fixes (cascade-safe, end of file)
   ONLY two things: (1) the remaining Nano bare section headings whose
   line-height was still loose, (2) the Partners hero scrim for legibility.
   ========================================================================== */
@media (max-width:920px){
  /* (1) Nano page — remaining bare headings with loose line-height */
  .nano-lumen h2,
  .s-projects h2,
  .s-cta h2{
    line-height:1.1 !important;
  }

  /* (2) Partners hero — deepen scrim so the heading/lede read over the image */
  .pp-hero-scrim{
    background:linear-gradient(180deg,
      rgba(11,11,10,.50) 0%,
      rgba(11,11,10,.78) 52%,
      rgba(11,11,10,.92) 100%) !important;
  }
}

/* ============================================================================
   MOBILE NAV UPGRADE (cascade-safe, end of file)
   - Refined, smaller menu typography
   - Fix "Book a tour" white-on-white (the .agl-menu a color was overriding the
     primary button's dark text)
   - Style the Materials accordion (relocated under the Materials item)
   ========================================================================== */
@media (max-width:920px){

  /* --- refined menu typography (was clamp(26px,7vw,34px) — too big) --- */
  .agl-menu nav a{
    font-size:20px !important;
    font-weight:500 !important;
    letter-spacing:.01em;
    padding:15px 0 !important;
    color:var(--agl-ivory);
  }
  .agl-menu nav{ width:100%; }
  .agl-menu nav ul{ width:100%; }

  /* --- BUTTON CONTRAST FIX: the menu's `a{color:ivory}` was bleeding onto the
     ivory-background "Book a tour" button → invisible. Restore proper colors. --- */
  /* both menu buttons share identical type; only colour differs by variant.
     NOTE: .agl-menu a{display:block} kills the button's flex centering, so we
     restore inline-flex + center here (the <a> Book-a-tour was left-aligning). */
  .agl-menu .menu-cta,
  .agl-menu .menu-cta-viz{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100%;
    font-family:var(--agl-body) !important;
    font-size:12px !important;
    font-weight:500 !important;
    letter-spacing:.18em !important;
    text-transform:uppercase;
    padding:16px 28px !important;
    text-align:center;
  }
  .agl-menu .menu-cta-viz{ margin-top:18px; }   /* Visualizer first */
  .agl-menu .menu-cta{ margin-top:12px; }        /* Book a tour below */
  .agl-menu .menu-cta.agl-btn--primary{
    color:#161410 !important;
    background:var(--agl-ivory) !important;
  }
  .agl-menu .menu-cta.agl-btn--primary .arr{ color:#161410 !important; }
  .agl-menu .menu-cta-viz.agl-btn--ghost{
    color:var(--agl-ivory) !important;
    background:transparent !important;
  }

  /* --- Materials accordion (relocated under the Materials link) --- */
  .agl-menu .agl-mhas-acc > a{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
  }
  .agl-macc__chev{
    width:8px;height:8px;
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:rotate(45deg);
    transition:transform .25s ease;
    opacity:.6;
    margin-left:12px;
    flex:0 0 auto;
  }
  .agl-menu .agl-mhas-acc > a[aria-expanded="true"] .agl-macc__chev{
    transform:rotate(-135deg);
  }
  .agl-macc__panel{
    display:flex;flex-direction:column;
    padding:4px 0 10px 14px;
  }
  .agl-macc__panel[hidden]{ display:none; }
  .agl-macc__panel a{
    font-family:var(--agl-display) !important;   /* match the serif nav, not sans */
    font-size:16px !important;
    font-weight:400 !important;
    color:var(--agl-ivory) !important;
    opacity:.72;
    padding:11px 0 !important;
    border-bottom:none !important;
    letter-spacing:.01em;
  }
  .agl-macc__panel a:active{ opacity:1; }
  .agl-macc__all{
    font-family:var(--agl-body) !important;
    margin-top:8px;
    font-size:11px !important;
    letter-spacing:.16em;
    text-transform:uppercase;
    opacity:.55 !important;
  }
}

/* ============================================================================
   MISC TWEAKS (cascade-safe, end of file)
   ========================================================================== */

/* (1) Partners hero — hide the lede paragraph on mobile (too much copy there) */
@media (max-width:920px){
  .pp-hero-in .pp-lead{ display:none !important; }
}

/* (2) Hide the reCAPTCHA v3 badge site-wide (visibility, NOT display — keeps
   spam-checking active per Google's guidance) */
.grecaptcha-badge{ visibility:hidden !important; }


/* ============================================================================
   CONTACT PAGE — two-column: intro + NAP (left) | form (right)
   ========================================================================== */
.ct-section{
  background:var(--agl-noir-900);
  border-top:1px solid var(--agl-hairline-soft);
  padding:120px 0;
}
.ct-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  /* match header/footer width: --agl-inline already centers content within
     page-max on wide screens, so the contact section lines up with the rest
     of the site instead of floating as a narrow 1440px centered band */
  padding-inline:var(--agl-inline);
  align-items:start;
}
.ct-title{
  font-family:var(--agl-display);
  font-weight:400;
  font-size:clamp(32px,3.4vw,50px);
  line-height:1.08;
  color:var(--agl-ivory);          /* was inheriting dark — fixed */
  margin:.1em 0 0;
}
.ct-lede{
  font-family:var(--agl-body);
  color:var(--agl-stone-300);
  font-size:17px;
  line-height:1.8;
  margin:20px 0 44px;
  max-width:44ch;
}

/* NAP */
.ct-nap{ border-top:1px solid var(--agl-hairline-soft); }
.ct-nap__row{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:20px;
  padding:18px 0;
  border-bottom:1px solid var(--agl-hairline-soft);
}
.ct-nap__k{
  font-family:var(--agl-body);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--agl-gold);
  font-variation-settings:"wdth" 112;
  padding-top:3px;
}
.ct-nap__v{
  font-family:var(--agl-body);
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  color:var(--agl-stone-300);
}
.ct-nap__v a{ color:var(--agl-ivory); text-decoration:none; transition:color .25s var(--agl-ease); }
.ct-nap__v a:hover{ color:var(--agl-gold); }

/* form column — give it a touch of separation */
.ct-formcol{ padding-top:4px; }

@media (max-width:920px){
  .ct-section{ padding:72px 0; }
  .ct-grid{ grid-template-columns:1fr; gap:48px; }
  .ct-nap__row{ grid-template-columns:78px 1fr; gap:14px; padding:15px 0; }
  .ct-nap__v{ font-size:15px; }
}


/* ============================================================================
   CONTACT FORM — let the WPForms 2-column Layout field render naturally (the
   form column is now wide enough, matching the Partners form). Just ensure
   inputs fill their column and the submit button doesn't wrap.
   ========================================================================== */
.ct-form .wpforms-field input,
.ct-form .wpforms-field textarea,
.ct-form .wpforms-field select{
  width:100% !important;
  max-width:100% !important;
}
.ct-form .wpforms-submit{
  width:auto !important;
  white-space:nowrap !important;
}

/* ============================================================================
   CONTACT — image above the form (balances the right column against the taller
   left info column; mirrors the Partners form+image pairing)
   ========================================================================== */
.ct-formimg{
  margin:0 0 32px;
  overflow:hidden;
}
.ct-formimg img{
  display:block;
  width:100%;
  height:280px;
  object-fit:cover;
}
@media (max-width:920px){
  .ct-formimg{ margin-bottom:24px; }
  .ct-formimg img{ height:200px; }
}

/* Mobile menu — the standalone Contact link matches the other top-level nav items */
@media (max-width:920px){
  .agl-menu__contact{
    display:block;
    font-family:var(--agl-display);
    font-size:20px !important;
    font-weight:500 !important;
    color:var(--agl-ivory);
    text-decoration:none;
    padding:15px 0 !important;
    border-bottom:1px solid var(--agl-hairline-soft);
    letter-spacing:.01em;
  }
}

/* Eyebrow Contact link — desktop only (mobile gets Contact in the burger menu instead) */
@media (max-width:920px){
  .agl-eyebrow-contact,
  .agl-eyebrow-sep--contact{ display:none !important; }
}

/* ============================================================================
   HOMEPAGE VIDEO HERO — MOBILE STACK (cascade-safe, end of file)
   On mobile: keep the tall, grand video as a block on top (no text over it),
   then drop the eyebrow/headline/lede/CTAs into a solid noir panel beneath —
   the same stacked treatment as the Nano hero, but the video stays full-height.
   ========================================================================== */
@media (max-width:920px){
  body.home section.v-hero--video{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    min-height:0 !important;
    padding-inline:0 !important;
  }
  /* the video keeps its grand height as the top block */
  body.home .v-hero--video .herovid{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:62svh !important;       /* tall + grand, as requested */
    min-height:420px;
    flex:0 0 auto;
  }
  /* hide the overlay scrim (the inline-styled div) — no text over the video now.
     It's the direct child div between the video and .hero-content. */
  body.home .v-hero--video > div[style*="position:absolute"]{
    display:none !important;
  }
  /* text content drops into a solid noir panel below the video */
  body.home .v-hero--video .hero-content{
    position:relative !important;
    background:var(--agl-noir-950);
    padding:36px var(--agl-inline) 44px !important;
    flex:1 1 auto;
  }
  body.home .v-hero--video .hero-content h1{
    font-size:clamp(34px,9vw,46px) !important;
    line-height:1.06 !important;
    margin:14px 0 0 !important;
    max-width:none !important;
  }
  body.home .v-hero--video .vlead{
    font-size:15px !important;
    line-height:1.65 !important;
    max-width:none !important;
  }
  body.home .v-hero--video .ctas{
    flex-direction:column;
    gap:12px;
    margin-top:28px;
  }
  body.home .v-hero--video .ctas .agl-btn{
    width:100%;
    justify-content:center;
  }
  body.home .v-hero--video .hero-rule{ margin:20px 0 24px; }
}