/* Tankeshwari website v3 — Zochem structural pattern; all colours/type from design-system tokens */
body{margin:0;font-family:var(--font-body);color:var(--color-text);background:#fff}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
a{color:var(--cyan-600)}a:hover{color:#007bb0}
/* ---- NAV ---- */
.nav3{position:fixed;top:0;left:0;right:0;z-index:40;background:transparent;color:#fff;transition:background 300ms var(--ease-standard),box-shadow 300ms var(--ease-standard),color 300ms var(--ease-standard)}
.nav3.scrolled{background:rgba(255,255,255,0.85);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 2px 4px rgba(13,48,73,0.05),0 4px 8px rgba(13,48,73,0.06),0 8px 16px rgba(13,48,73,0.05);color:#0D3049}
@media (max-width:767px){.nav3.scrolled{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}
.nav3 .bar{display:flex;align-items:center;justify-content:space-between;gap:40px;max-width:1440px;margin:0 auto;padding:26px 40px;transition:padding 300ms var(--ease-standard)}
.nav3.scrolled .bar{padding-top:12px;padding-bottom:12px}
.nav3 .logo{display:block;text-decoration:none;line-height:0}
.nav3 .logo img{height:104px;width:auto;display:block;filter:invert(1) brightness(2.2) drop-shadow(0 0 22px rgba(7,23,34,0.75));transition:height 300ms var(--ease-standard),filter 300ms var(--ease-standard)}
.nav3 .logo:hover img{filter:invert(1) brightness(2.2) drop-shadow(0 0 26px rgba(0,158,224,0.85))}
/* on the white glass bar the mark keeps its own tones — inverting there would erase it */
.nav3.scrolled .logo img{height:66px;filter:drop-shadow(0 1px 3px rgba(13,48,73,0.3))}
.nav3.scrolled .logo:hover img{filter:drop-shadow(0 0 12px rgba(0,158,224,0.5))}
/* Scroll progress — the one persistent piece of chrome that reports position on a transparent nav */
.scroll-prog{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(var(--p,0));transform-origin:left;background:#009EE0;z-index:60;pointer-events:none}
@media (prefers-reduced-motion:reduce){.scroll-prog{display:none}}
.nav3 .menu{display:grid;grid-template-columns:repeat(3,minmax(150px,190px));column-gap:44px;align-items:end}
.nav3 .menu > div{position:relative}
.nav3 .menu a.mi{display:flex;justify-content:space-between;align-items:center;gap:10px;position:relative;padding:12px 2px 10px;font-size:15px;font-weight:600;color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.55)}
.nav3.scrolled .menu a.mi{border-bottom-color:rgba(13,48,73,0.22)}
.nav3 .menu a.mi .chev{flex:0 0 auto;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:0.8}
.nav3 .menu a.mi::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#009EE0;transform:scaleX(0);transform-origin:left;transition:transform 180ms var(--ease-standard)}
.nav3 .menu a.mi:hover::after,.nav3 .menu a.mi.active::after{transform:scaleX(1)}
.nav3 .cta{margin-left:8px}
.nav3 .dd{position:absolute;top:100%;left:0;transform:translateY(6px);color:#0D3049;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:0 2px 4px rgba(13,48,73,0.04),0 4px 8px rgba(13,48,73,0.05),0 8px 16px rgba(13,48,73,0.06),0 16px 32px rgba(13,48,73,0.06);padding:22px 26px;display:none;grid-template-columns:repeat(3,minmax(170px,1fr));gap:26px;width:max-content;max-width:min(90vw,760px)}
.nav3 .menu > div:hover .dd,.nav3 .dd:hover{display:grid}
.nav3 .dd h6{font-family:var(--font-heading);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--metal-700);margin:0 0 10px}
.nav3 .dd ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.nav3 .dd a{font-size:13.5px;color:#0D3049;text-decoration:none}
.nav3 .dd a:hover{color:var(--cyan-600)}
.nav3 .dd .all{grid-column:1/-1;border-top:1px solid var(--color-border);padding-top:12px;font-weight:600;font-size:13.5px}
/* Hamburger + mobile menu */
.nav3 .burger{display:none;background:none;border:none;cursor:pointer;padding:8px;color:inherit;margin-left:auto}
.nav3 .burger span{display:block;width:24px;height:2px;background:currentColor;margin:5px 0}
.nav3 .mobile{display:none;background:#fff;color:#0D3049;border-top:1px solid var(--color-border);padding:12px 24px 24px}
.nav3 .mobile a{display:block;padding:12px 0;font-size:16px;font-weight:600;color:#0D3049;text-decoration:none;border-bottom:1px solid var(--color-border)}
.nav3.open .mobile{display:block}
@media (max-width:1400px){.nav3 .menu{column-gap:36px}.nav3 .logo img{height:88px}}
@media (max-width:1140px){.nav3 .menu{display:none}.nav3 .burger{display:block}.nav3 .cta{display:none}.nav3 .bar{padding:16px 24px}.nav3 .logo img{height:66px}}
/* ---- Band rhythm ---- */
.band{padding:88px 0;background:#fff}
.band--grey{background:var(--band-grey)}
.band--navy{background:var(--navy-900);color:#fff}
.band--photo{position:relative;background:var(--navy-900) center/cover no-repeat;color:#fff}
.band--photo::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(13,48,73,0.72),rgba(13,48,73,0.55))}
.band--photo > *{position:relative}
/* Hero — full-bleed looping background video at near-full brightness with a solid cyan tagline panel */
.hero3{min-height:100vh;display:flex;align-items:stretch;padding:0;box-sizing:border-box;overflow:hidden;background-image:none}
.hero3::before{display:none}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--navy-900)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block}
.hero3 > .wrap{z-index:3}
.hero-demo{position:absolute;left:24px;bottom:24px;z-index:4;display:flex;align-items:center;gap:8px;padding:7px 13px;background:rgba(7,23,34,0.72);border:1px solid rgba(183,184,185,0.5);font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--metal-300)}
.hero-demo::before{content:"";width:6px;height:6px;background:var(--cyan-500);flex:0 0 auto}
/* lower-half composition: outlined expand control at left, cyan panel bleeding off the right edge */
.hero3 .wrap{width:100%;max-width:none;padding:0;display:grid;grid-template-columns:1fr minmax(0,66vw);align-items:center;align-content:end;padding-bottom:11vh}
.hero-panel{grid-row:1;grid-column:2;background:#009EE0;padding:58px 72px 58px 96px;color:#fff}
.hero-panel h1{font-family:var(--font-heading);font-weight:400;font-size:clamp(24px,2.5vw,38px);line-height:1.45;color:#fff;margin:0}
.hero-expand{grid-row:1;grid-column:1;justify-self:start;align-self:center;margin:88px 0 0 5vw;width:104px;height:104px;border:1.5px solid rgba(255,255,255,0.9);display:flex;align-items:center;justify-content:center;color:#fff;font-size:44px;line-height:1;text-decoration:none;transition:background var(--motion-duration-base) var(--ease-standard)}
.hero-expand:hover{background:rgba(255,255,255,0.15);color:#fff}
.hero-scroll{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;z-index:4;width:74px;height:9px;border-radius:var(--radius-pill);background:rgba(255,255,255,0.82)}
@media (max-width:900px){.hero3 .wrap{grid-template-columns:1fr;padding-bottom:14vh}.hero-panel{grid-row:1;grid-column:1;padding:34px 28px 34px 34px}.hero-expand{grid-column:1;grid-row:2;margin:24px 0 0 24px;width:72px;height:72px;font-size:32px}}
/* Enquiry-band heading highlight. The interactive target is an inner span, NOT the .reveal element:
   tokens/motion.css owns transform/transition/transition-delay on .js-ready .reveal.in-view at (0,3,0)
   and would outrank anything scoped here, so the entrance and the hover state are kept on separate
   elements instead of fighting in the cascade. The h2 still reveals normally.
   BRAND EXCEPTION — the highlight uses #FBBE48, listed as a prohibited Shakambari secondary in
   tokens/colors.css. Operator-approved for THIS ELEMENT ONLY, hover/focus/tap state only. Scoped as a
   local custom property rather than a global --yellow token so it cannot be reused by accident. */
/* entrance sits one stagger step behind the parent wrapper's reveal. Safe on the h2: the hover
   transition lives on the inner span, so this delay cannot leak into hover in/out timing. */
.js-ready .attn-head.reveal{transition-delay:var(--motion-stagger)}
.attn-line{--attn:251,190,72;display:inline-block;position:relative;color:#fff;cursor:default;transform-origin:left center;transition:color var(--motion-duration-base) var(--ease-standard),text-shadow var(--motion-duration-base) var(--ease-standard),transform var(--motion-duration-slow) var(--ease-out-expo)}
.attn-line::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:rgb(var(--attn));transform:scaleX(0);transform-origin:left center;transition:transform var(--motion-duration-slow) var(--ease-out-expo)}
.attn-line:hover,.attn-line:focus-visible,.attn-line.is-lit{color:rgb(var(--attn));text-shadow:0 0 18px rgba(var(--attn),0.4);transform:scale(1.05)}
.attn-line:hover::after,.attn-line:focus-visible::after,.attn-line.is-lit::after{transform:scaleX(1)}
.attn-line:focus-visible{outline:none}
/* reduced motion: keep the colour change, drop the movement — swap and underline land instantly */
@media (prefers-reduced-motion:reduce){.attn-line,.attn-line::after{transition:none}.attn-line:hover,.attn-line:focus-visible,.attn-line.is-lit{transform:none}}
/* Title band (inner pages — padded to clear the fixed nav) */
.tband{padding:190px 0 56px}
.tband h1{font-family:var(--font-heading);font-weight:800;font-size:clamp(30px,3.6vw,44px);color:#fff;margin:10px 0 8px}
.tband p{font-size:16px;color:rgba(255,255,255,0.85);max-width:640px;margin:0;line-height:1.55}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,0.7)}
.crumbs a{color:rgba(255,255,255,0.7);text-decoration:none}
.crumbs a:hover{color:#fff}
.crumbs b{color:#fff;font-weight:600}
/* Section headings */
.sec-h{font-family:var(--font-heading);font-weight:800;font-size:clamp(24px,3vw,32px);color:var(--navy-900);margin:0 0 12px}
.sec-sub{font-size:16px;color:var(--color-text-muted);max-width:640px;margin:0 0 40px;line-height:1.6}
.eyebrow{font-family:var(--font-mono);font-size:12.5px;letter-spacing:0.07em;text-transform:uppercase;color:var(--cyan-600);margin:0 0 12px}
/* Grids & cards */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1000px){.grid-4{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}}
.card3{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:26px;display:flex;flex-direction:column;gap:10px;transition:transform var(--motion-duration-moderate) var(--ease-standard),box-shadow var(--motion-duration-moderate) var(--ease-standard)}
.card3:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
@media (prefers-reduced-motion: reduce){.card3:hover{transform:none}}
/* Product image slot: full-bleed across the card top (negative margins cancel the 26px padding),
   fixed 4:3 so the three read as a matched set regardless of source aspect. Text stays below on
   white — no scrim needed, and the existing dark-on-white contrast is untouched. A navy tint sits
   under the image so the two square sources letterbox into brand colour rather than white. */
.card3-img{display:block;margin:-26px -26px 4px;aspect-ratio:4/3;overflow:hidden;background:var(--navy-900);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.card3-img img{width:100%;height:100%;object-fit:cover;display:block}
/* Application tiles: same slot, shallower 16:9 — these are 4-up, so a 4:3 crop would push the
   text below the fold of the card. Sources vary wildly in aspect (1400x1568 to 1000x563), so
   object-fit:cover + a fixed ratio is what makes the eight read as a matched grid. */
.card3-img--app{aspect-ratio:16/9;margin-bottom:14px}
.card3 .fam{font-size:11.5px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--cyan-600)}
.card3 h3{font-family:var(--font-heading);font-size:19px;color:var(--navy-900);margin:0}
.card3 p{font-size:13.5px;color:var(--color-text-muted);line-height:1.55;margin:0}
.card3 .go{margin-top:auto;padding-top:10px;font-size:14px;font-weight:700;color:var(--cyan-600);text-decoration:none}
.card3 .go:hover{color:#007bb0}
.ph-flag{font-family:var(--font-mono);font-size:12px;color:var(--metal-700);background:var(--n-100);border-radius:var(--radius-sm);padding:2px 8px;display:inline-block}
/* Positioning strip stats */
.pos-stats{display:flex;gap:0;border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background:#fff}
.pos-stats .s{flex:1;padding:32px 20px;text-align:center}
.pos-stats .s + .s{border-left:1px solid var(--color-border)}
.pos-stats .v{font-family:var(--font-heading);font-weight:800;font-size:34px;color:var(--navy-900);font-variant-numeric:tabular-nums}
.pos-stats .l{font-size:12.5px;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.05em;margin-top:6px}
@media (max-width:700px){.pos-stats{flex-wrap:wrap}.pos-stats .s{flex:1 1 50%}.pos-stats .s:nth-child(3){border-left:none}}
/* Spec table (per-grade) */
.spec3{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);background:#fff}
.spec3 .head{background:var(--navy-900);color:#fff;padding:16px 20px;font-family:var(--font-heading);font-weight:700;font-size:16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.spec3 table{width:100%;border-collapse:collapse}
.spec3 th{width:42%;text-align:left;padding:13px 20px;font-family:var(--font-body);font-size:13.5px;font-weight:600;color:var(--metal-700);border-bottom:1px solid var(--color-border);vertical-align:top}
.spec3 td{padding:13px 20px;font-family:var(--font-mono);font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--navy-900);border-bottom:1px solid var(--color-border)}
.spec3 tbody tr:nth-child(even){background:var(--n-50)}
.spec3 tbody tr:hover{background:rgba(183,184,185,0.08);transition:background var(--motion-duration-instant) var(--ease-standard)}
.spec3 .foot{padding:14px 20px;display:flex;gap:12px;flex-wrap:wrap}
.safety{font-family:var(--font-mono);font-size:12.5px;color:var(--metal-700);background:var(--n-50);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:14px 18px;line-height:1.6;margin-top:24px}
/* App page recommendation rows */
.rec{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 20px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:#fff;flex-wrap:wrap}
.rec + .rec{margin-top:10px}
.rec .u{font-size:14.5px;color:var(--navy-900);font-weight:600}
.rec .g{font-family:var(--font-mono);font-size:13px;color:var(--cyan-600);font-weight:600}
.rec .g.ph{color:var(--metal-700)}
/* Timeline */
.timeline{border-left:2px solid var(--color-border-strong);margin-left:8px}
.timeline .tl{padding:0 0 34px 26px;position:relative}
.timeline .tl::before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--cyan-500);border:2px solid #fff;box-shadow:var(--shadow-sm)}
.timeline .yr{font-family:var(--font-mono);font-size:13px;color:var(--cyan-600);margin-bottom:4px}
.timeline h4{font-family:var(--font-heading);font-size:17px;color:var(--navy-900);margin:0 0 6px}
.timeline p{font-size:14.5px;color:var(--color-text-muted);margin:0;line-height:1.6;max-width:620px}
/* Photo placeholder slots */
.photo-slot{border:1px dashed var(--color-border-strong);border-radius:var(--radius-lg);background:var(--n-50);min-height:200px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;color:var(--metal-700);text-align:center;padding:16px}
/* Badges */
.badge{display:flex;flex-direction:column;align-items:center;gap:8px;border:1px dashed var(--color-border-strong);border-radius:var(--radius-lg);padding:26px 14px;text-align:center;background:#fff}
.badge .ph{width:54px;height:54px;border-radius:50%;background:var(--n-100);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:10px;color:var(--metal-700)}
.badge p{margin:0;font-size:13px;font-weight:600;color:var(--navy-900)}
.badge span{font-size:11px;color:var(--color-text-muted)}
/* Forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid .full{grid-column:1/-1}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--navy-900);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;box-sizing:border-box;font-family:var(--font-body);font-size:14px;padding:11px 13px;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:#fff;color:var(--color-text)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--color-text-muted);line-height:1.5}
/* Inline field error state */
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--error-600) !important;background:var(--error-100)}
.field input[aria-invalid="true"]:focus{box-shadow:inset 0 1px 3px rgba(158,42,43,0.15),0 0 0 1px var(--error-600)}
.field-err{margin:5px 0 0;font-size:12px;font-weight:600;line-height:1.45;color:var(--error-600)}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
.form-card{background:var(--band-grey);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-sm)}
.form-card h3{font-family:var(--font-heading);font-size:19px;color:var(--navy-900);margin:0 0 4px}
.form-card > p{font-size:13.5px;color:var(--color-text-muted);margin:0 0 20px}
/* Footer */
footer{background:var(--navy-900);color:var(--metal-300)}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 40px;padding:56px 0 8px;font-size:16.5px}
.foot-top a{color:var(--metal-300);text-decoration:none;transition:color var(--motion-duration-base) var(--ease-standard)}
.foot-top a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,0.12);padding:20px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px}
/* Oversized wordmark anchor — sits between the column grid and the bottom bar. Static by design:
   no hover. Entrance is its OWN single-trigger IntersectionObserver in site.js (opacity 0->1 plus
   a 20px rise, --ease-out-expo, 700ms on both legs, one --motion-stagger step in) rather than the
   shared .reveal system, whose catch-up sweeps fired it before it was scrolled into view.
   text-transform handles the caps so the source text stays
   readable/editable. Size is measured and fitted in site.js — never wraps, never clips. */
/* Oversized, FULL-BLEED, uncropped: escapes .wrap's 1200px cap to span the viewport edge to edge
   (20px breathing padding each side), and the box grows to the full letterforms (line-height 1.06
   plus a 0.1em tail so nothing is clipped). 100vw/calc(50% - 50vw) is only the pre-JS fallback —
   100vw includes the scrollbar and would overflow, so site.js re-measures against
   documentElement.clientWidth. site.js also measures the rendered word and
   solves for the size that spans the container exactly, because a calc() estimate of glyph advance
   either left a gap or let overflow:hidden slice the last letter. */
.foot-mark{margin:0;padding:0;font-family:var(--font-heading);font-weight:700;font-size:min(calc((100vw - 68px) / 7.35),166px)/*JS-fitted*/;line-height:1;letter-spacing:-0.03em;white-space:nowrap;text-align:left;color:var(--metal-300);line-height:1.06;padding:0 20px 0.1em;box-sizing:border-box;width:100vw;margin:20px 0 64px calc(50% - 50vw);display:flex;align-items:baseline;gap:0.14em}
/* Icon mark paired ahead of the wordmark — sized in em so it scales in lockstep with the JS-fitted
   font-size (see site.js rowW()); ~0.68em keeps it close to the letterforms' cap-height without
   outweighing them. Kept in its own supplied grey — reads cleanly against navy at this scale. */
.foot-mark-icon{flex:0 0 auto;width:0.72em;height:auto;opacity:0.9;align-self:baseline}
/* hidden state applies only once JS has flagged it, so no-JS never leaves it invisible */
.foot-mark.will-reveal{opacity:0;transform:translateY(20px);transition:opacity var(--motion-duration-slower) var(--ease-out-expo),transform var(--motion-duration-slower) var(--ease-out-expo);transition-delay:var(--motion-stagger)}
.foot-mark.will-reveal.is-in{opacity:1;transform:none}
/* White-stroke crossfade. A gradient background-image cannot transition (it snaps), so the white
   state is a THIRD stacked layer rather than a recolour: .foot-mark-w carries the identical glyph
   and stroke, painted solid white, and only its opacity animates. Paint order inside .foot-mark-t
   is ::before (gradient stroke) -> child span (white stroke) -> ::after (navy mask), so the mask
   still hollows out both stroke layers and the letters stay outlines throughout. */
.foot-mark-w{position:absolute;left:0;top:0;white-space:nowrap;pointer-events:none;opacity:var(--white,0)}
.foot-mark-w::before{content:attr(data-text);-webkit-text-stroke:3px transparent;background-image:linear-gradient(#fff,#fff);background-size:100% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
/* Sheen sweep — the .t-btn--sheen streak (105deg, transparent 40% / white 50% / transparent 60%)
   adapted to text. The button translates the band with transform; that is not available here
   because transform on this layer would drag the glyphs with it, so the band is the layer's
   BACKGROUND and background-position animates instead — a position animation, not a colour
   interpolation, so it moves smoothly rather than snapping. Sits BELOW the ::after navy mask (same
   z-index as the gradient stroke layer) so the mask carves it to the identical ~1.5px outer ring —
   at z-index 2 it painted the full 3px stroke, half of which sits inside the glyph edge, brightening
   the letter interiors. Runs once on reveal; --ease-standard per the button precedent.
   SEQUENCING: --white ramps in only over the last quarter of scroll progress, after the band has
   passed. Run together, a 60%-white band over an already-white stroke is invisible at any speed. */
/* --sweep is scroll progress 0..1, written per frame by site.js; 220% -> -120% is the same travel
   the timed keyframe used, now driven by scroll position instead of elapsed time. */
.foot-mark-s{position:absolute;left:0;top:0;z-index:0;white-space:nowrap;pointer-events:none;opacity:0}
.foot-mark-s::before{content:attr(data-text);-webkit-text-stroke:3px transparent;background-image:linear-gradient(105deg,transparent 40%,rgba(255,255,255,0.6) 50%,transparent 60%);background-size:200% 100%;background-position:calc(220% - var(--sweep,0) * 340%) 0;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent}
.foot-mark.is-in .foot-mark-s{opacity:1}
@media (prefers-reduced-motion:reduce){.foot-mark-s{display:none}.foot-mark-w{opacity:1}}
@media (prefers-reduced-motion:reduce){.foot-mark-w{transition:none}}
@media (prefers-reduced-motion:reduce){.foot-mark.will-reveal{opacity:1;transform:none;transition:none}}
/* Outline treatment — two absolutely-positioned pseudo layers over an invisible real text node.
   PAINT ORDER IS THE WHOLE TRICK: background-clip:text paints in the element's BACKGROUND layer,
   so a z-index:-1 pseudo paints ABOVE it and can never mask it (that bug shipped once already).
   Instead: ::before is a gradient glyph expanded by a 3px stroke (z-index 0), ::after is the same
   glyph at normal size filled with the mask colour (z-index 1, later in paint order, so it really
   does cover). What survives between them is a ~1.5px gradient ring — a true outline.
   ::after is filled with the footer's own navy, so the letters read as cut out of the background.
   Entrance is the shared .reveal system on the parent (fade + rise, fires once) — no fill change.
   Ramp constraints: the dark end must clear the #0D3049 ground (steel #4A6478 ≈ 2.1:1; a navy tone
   sits at 1.16:1 and is invisible), no opacity may sit on an ancestor (it composites every stroke
   colour toward the backdrop), and background-size ≈ one glyph so each letter gets its own ramp. */
.foot-mark-t{position:relative;display:block;color:transparent;-webkit-text-stroke:1.5px var(--cyan-500)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.foot-mark-t{-webkit-text-stroke:0}
.foot-mark-t::before,.foot-mark-t::after{content:attr(data-text);position:absolute;left:0;top:0;white-space:nowrap;pointer-events:none;-webkit-background-clip:text;background-clip:text;color:transparent}
.foot-mark-t::before{z-index:0;-webkit-text-stroke:3px transparent;background-image:linear-gradient(135deg,#4A6478 0%,#5E8095 34%,var(--cyan-500) 100%);background-size:1.05em 100%;background-repeat:repeat}
.foot-mark-t::after{z-index:1;background-image:linear-gradient(var(--navy-900),var(--navy-900))}
}
@media (max-width:900px){.foot-mark{letter-spacing:-0.02em;margin-bottom:56px;padding-left:16px;padding-right:16px}}
/* WhatsApp fab */
.wa-fab{position:fixed;right:24px;bottom:24px;z-index:30;display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:var(--radius-pill);background:var(--navy-900);color:#fff;font-weight:700;font-size:14px;text-decoration:none;box-shadow:var(--shadow-lg);transition:transform var(--motion-duration-base) var(--ease-standard),box-shadow var(--motion-duration-base) var(--ease-standard)}
.wa-fab:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);color:#fff}
.wa-fab .dot{width:9px;height:9px;border-radius:50%;background:#25D366}
@media (prefers-reduced-motion: reduce){.wa-fab:hover{transform:none}}
.coming-soon{display:inline-block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.05em;text-transform:uppercase;color:var(--metal-500,#868789);border:1px solid rgba(255,255,255,0.25);border-radius:var(--radius-pill);padding:2px 8px;margin-left:6px}

/* Footer scroll-reveal. Joins the shared .reveal system in tokens/motion.css — no new observer,
   easing or timing values. The container reveals on the long end of the scale (inherited .reveal:
   500ms opacity / 700ms transform), sub-groups on the short end, stepped by --motion-stagger.
   Stagger order is set by delay, not DOM order, so the visual layout is untouched:
   1 nav columns, 2 logo/brand, 3 bottom bar. (No newsletter form exists in this footer.)
   Specificity matches .js-ready .reveal (0,2,0) and these rules load later, so they win the delay. */
.js-ready .foot-r1,.js-ready .foot-r2,.js-ready .foot-r3{transition:opacity var(--motion-duration-moderate) var(--ease-out-expo),transform var(--motion-duration-slow) var(--ease-out-expo)}
.js-ready .foot-r1{transition-delay:0s}
.js-ready .foot-r2{transition-delay:var(--motion-stagger)}
.js-ready .foot-r3{transition-delay:calc(var(--motion-stagger) * 2)}

/* Heading hover highlight, site-wide. Colour + 105% scale from the left, no underline (a full-width
   rule under a block heading reads as a divider). Default colour is untouched, so touch devices that
   never hover lose nothing and the scroll-reveal state stands on its own.
   Specificity note: tokens/motion.css owns transform + transition on .js-ready .reveal.in-view at
   (0,3,0), so the rules for revealed headings are written at (0,4,0)/(0,5,0) to outrank it rather
   than silently lose. Font, weight, size and spacing are untouched. */
.h-attn{cursor:default;transform-origin:left center;transition:color var(--motion-duration-base) var(--ease-standard),transform var(--motion-duration-slow) var(--ease-out-expo)}
.h-attn:hover,.h-attn:focus-visible,.h-attn.is-lit{color:var(--cyan-500);transform:scale(1.05)}
.js-ready .h-attn.reveal.in-view{transition:opacity var(--motion-duration-slow) var(--ease-out-expo),color var(--motion-duration-base) var(--ease-standard),transform var(--motion-duration-slow) var(--ease-out-expo)}
.js-ready .h-attn.reveal.in-view:hover,.js-ready .h-attn.reveal.in-view:focus-visible,.js-ready .h-attn.reveal.in-view.is-lit{color:var(--cyan-500);transform:scale(1.05)}
.h-attn:focus-visible{outline:none}
/* white-on-navy headings keep their own default; only the hover colour differs */
.band--navy .h-attn:hover,.band--navy .h-attn:focus-visible,.js-ready .band--navy .h-attn.reveal.in-view:hover{color:var(--cyan-400)}
/* reduced motion: colour still changes, instantly; no movement */
@media (prefers-reduced-motion:reduce){.h-attn,.js-ready .h-attn.reveal.in-view{transition:none}.h-attn:hover,.h-attn:focus-visible,.h-attn.is-lit,.js-ready .h-attn.reveal.in-view:hover,.js-ready .h-attn.reveal.in-view:focus-visible{transform:none}}

/* Application-page motion placeholders. Canvas is injected by appmotion.js; the figure owns the
   box so there is no layout shift before it mounts. Caption sits inside on the navy ground. */
.appfilm{position:relative;margin:0;width:100%;aspect-ratio:21/9;max-height:420px;overflow:hidden;background:var(--navy-900)}
.appfilm canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.appfilm figcaption{position:absolute;left:24px;bottom:16px;z-index:1;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--metal-300);opacity:.62}
@media (max-width:700px){.appfilm{aspect-ratio:16/9}.appfilm figcaption{left:16px;font-size:9.5px}}

/* ---- Hierarchy & motion pass ---- */
.hero-media{will-change:transform}
.hero-panel,.hero-expand{opacity:0;transform:translateY(26px);transition:opacity 760ms var(--ease-out-expo),transform 760ms var(--ease-out-expo)}
.hero-expand{transition-delay:160ms}
.js-ready .hero-panel.is-in,.js-ready .hero-expand.is-in,.hero-panel.is-in,.hero-expand.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.hero-media{transform:none!important}.hero-panel,.hero-expand{opacity:1;transform:none;transition:none}}
/* Stats read as one instrument panel: the rule under the strip draws in as the numbers count up */
.pos-stats{position:relative}
.pos-stats::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#009EE0;transform:scaleX(0);transform-origin:left;transition:transform 900ms var(--ease-out-expo)}
.pos-stats.is-counted::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.pos-stats::after{transition:none}}