/* ══════════════════════════════════════════════════════════════════
   EXPLORE LAYER  ·  additive only, loaded AFTER styles.css.
   1) A set of saturated, alive, flowing colour STRINGS on the page
      background (sharp, barely-grainy), fading in and out like an artifact.
   2) The hero green box redesigned as a wonderful.ai-style washed, grainy,
      motion-blurred colour card, in Seal's palette.
   Changes no text, grid, component, or animation.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --xw-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Responsive <picture> wrappers should not add a box of their own; the <img>
   inside keeps the exact layout the page had before images were wrapped. */
picture{display:contents}


/* ══════════ 2 · HERO BOX AS A WONDERFUL-STYLE CARD ══════════
   deep Seal-green base; an injected washed / motion-blurred / grainy colour
   layer (.xw-card) sits behind the box's existing content (z-index 3). */
/* deep-green base so any gap between fields still reads as Seal green */
/* banner panel ("Hello. What would you like to stop losing today?") uses the ChatGPT image */
.banner-box{background:#0a160f url('assets/img/hero-bg.79997105.webp') 50% 42% / cover no-repeat !important}
.banner-box::before{opacity:1 !important;
  background:linear-gradient(180deg,rgba(8,14,10,.34) 0%,rgba(8,14,10,.05) 38%,rgba(8,14,10,.5) 100%) !important}

/* layer stack inside the box, all behind the existing content (z-index 3):
   fields (organic colour) -> lighting -> grain */
.xw-card{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.xw-card>div{position:absolute;inset:0}

/* 1 · organic colour fields: 6 large irregular masses in Seal-green tints,
   warped by SVG turbulence (so edges are organic, not circular) then blurred
   into one diffused, photographic wash. Oversized so masses run off-edge. */
.xw-card__fields{
  inset:-45% !important;
  background:
    radial-gradient(58% 46% at 20% 24%, rgba(164,214,20,.55), transparent 62%),
    radial-gradient(50% 62% at 72% 16%, rgba(91,143,69,.62), transparent 64%),
    radial-gradient(72% 54% at 86% 66%, rgba(47,100,94,.58), transparent 66%),
    radial-gradient(64% 66% at 28% 86%, rgba(18,36,26,.82), transparent 66%),
    radial-gradient(44% 38% at 54% 46%, rgba(143,168,162,.38), transparent 62%),
    radial-gradient(90% 84% at 62% 38%, rgba(34,52,34,.45), transparent 76%),
    linear-gradient(158deg,#1a3220 0%,#2e423e 42%,#3f6b1e 70%,#11221a 100%);
  filter:url(#xwWarp) blur(30px) saturate(124%);
}
/* 2 · lighting: soft luminous highlight + a quiet darker corner, blurred,
   so light seems to move through translucent material */
.xw-card__light{
  inset:-20% !important;
  background:
    radial-gradient(40% 34% at 30% 22%, rgba(232,247,182,.5), transparent 66%),
    radial-gradient(30% 26% at 66% 54%, rgba(190,222,120,.3), transparent 64%),
    radial-gradient(62% 54% at 85% 88%, rgba(5,16,11,.55), transparent 72%);
  filter:blur(26px);mix-blend-mode:soft-light;
}
/* 3 · fine film grain, above colour and below content */
.xw-card__grain{
  background:var(--xw-grain);background-size:150px;opacity:.5;mix-blend-mode:overlay;
}

/* ══════════ 3 · NEW HERO ══════════
   Full-bleed washed / grainy / organic field in LIGHT Seal-green tints
   (dark text stays readable), title bottom-left with the rotating word,
   sub-text bottom-right, and use-case / channel chips that pop in and out. */
/* ── CINEMATIC HERO ── the abstract green photograph, full first view.
   The image carries the whole atmosphere (blur, grain, light, shadow); we
   only add a subtle local scrim so the corner text stays readable. */
#hero.xw-hero{
  position:relative;isolation:isolate;overflow:hidden;
  margin-top:calc(-1 * var(--nav-h));min-height:100vh;   /* slide up under the nav so it overlays the image */
  display:flex;align-items:flex-end;
  background:#0a160f url('assets/img/hero-bg.79997105.webp') 60% 42% / cover no-repeat;   /* poster / fallback */
}
/* the video plays over the poster image, covering the whole first view */
.xw-hero-video{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:60% 42%;pointer-events:none;
}
/* subtle localized contrast at the bottom edge (title left, sub right) - not a full overlay */
.xw-hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(74deg, rgba(4,10,7,.5) 0%, rgba(4,10,7,.14) 30%, transparent 52%),
    linear-gradient(0deg, rgba(4,10,7,.52) 0%, rgba(4,10,7,.1) 24%, transparent 40%);
}
/* a whisper of extra grain to tie the image to the site's texture */
.xw-hero-grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--xw-grain);background-size:150px;opacity:.28;mix-blend-mode:overlay;
}
/* content: title bottom-left, aside bottom-right (absolute, anchored near edges) */
.xw-hero-in{position:absolute;inset:0;z-index:3;pointer-events:none}
.xw-hero-in>*{pointer-events:auto}
.xw-hero-title{
  position:absolute;left:var(--gut);bottom:clamp(2.5rem,7vh,5.5rem);margin:0;
  max-width:min(90vw,820px);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:200;letter-spacing:-.02em;line-height:1.08;
  font-size:clamp(1.9rem,3.8vw,3.5rem);white-space:nowrap;
  color:#f4f7f1;text-shadow:0 2px 30px rgba(6,16,10,.45);
}
.xw-hero-title .swap,.xw-hero-title .swap i{color:var(--lime)}   /* accent the rotating word */
.xw-hero-aside{
  position:absolute;right:var(--gut);bottom:clamp(3rem,7.6vh,6rem);
  max-width:min(36vw,360px);
}
.xw-hero-aside .sub{margin:0;color:rgba(244,247,241,.84);font-size:clamp(.95rem,1.2vw,1.08rem);line-height:1.62;text-shadow:0 1px 20px rgba(6,16,10,.4)}
/* the base sheet forces #hero h1 to nowrap + max-width:none + its own colour; override */
#hero.xw-hero .xw-hero-title{max-width:min(92vw,820px);white-space:nowrap;color:#f4f7f1}
#hero.xw-hero .xw-hero-aside .sub{margin-top:0;max-width:none;color:rgba(244,247,241,.86)}

/* use-case / channel chips that pop */
.xw-hero-chips{position:absolute;inset:0;z-index:4;pointer-events:none}
.xw-chip{
  position:absolute;display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
  background:rgba(255,255,255,.62);border:1px solid rgba(30,43,39,.14);border-radius:9px;
  padding:.4rem .68rem;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  box-shadow:0 8px 26px -18px rgba(20,40,28,.5);
  opacity:0;transform:translateY(10px) scale(.8);filter:blur(7px);
  transition:opacity .62s ease,transform .62s cubic-bezier(.2,.8,.2,1),filter .62s ease;
}
.xw-chip i{width:8px;height:8px;border-radius:2px;background:var(--lime);flex:none}
.xw-chip i.c{background:#3f8f86}          /* channels read cooler than use-cases */
.xw-chip.on{opacity:1;transform:none;filter:none}

@media (max-width:820px){
  #hero.xw-hero{min-height:auto;display:block}
  /* keep the content layer positioned (relative + z-index) so it stays ABOVE
     the washed field; going static would drop z-index and the field would
     paint over the text */
  .xw-hero-in{position:relative;z-index:3;inset:auto;padding:calc(var(--nav-h) + clamp(1.5rem,7vh,3.5rem)) var(--gut) clamp(2.5rem,8vh,3.5rem)}
  .xw-hero-title,.xw-hero-aside{position:static;left:auto;right:auto;bottom:auto;max-width:none}
  .xw-hero-title{margin-bottom:1.4rem;white-space:normal}
  #hero.xw-hero .xw-hero-title{white-space:normal;max-width:none}
  .xw-chip{display:none}                   /* keep mobile clean; chips are a desktop flourish */
}
#hero.xw-hero .xw-hero-title{max-width:min(58vw,680px)}
@media (max-width:820px){ #hero.xw-hero .xw-hero-title{max-width:none} }
@media (prefers-reduced-motion:reduce){
  .xw-chip{transition:none}
}

/* ══════════ 5 · WASHED STAGE BEHIND KEY COMPONENTS ══════════
   Each named widget (puzzle, radar, iceberg, guardrails) gets a washed,
   grainy, organic colour panel behind it - a different colour each time,
   like the wonderful cards. Injected at z-index:-1 so it sits behind the
   widget's own art and never covers it. */
.xw-host{position:relative;isolation:isolate}
.xw-sfield{position:absolute;inset:-7% -5%;z-index:-1;pointer-events:none;border-radius:22px;overflow:hidden}
.xw-sfield--sec{inset:3% 2.5%}   /* a washed panel behind a whole section (an opaque card sits on it) */
.xw-sfield .f{position:absolute;inset:-30%;filter:url(#xwWarp) blur(30px) saturate(124%)}
.xw-sfield .g{position:absolute;inset:0;background:var(--xw-grain);background-size:150px;opacity:.5;mix-blend-mode:overlay}
/* photo stages: crisp image, no warp/blur (puzzle -> 5.png, radar -> 7.png) */
.sf-puzzle .f{inset:0;filter:none;background:#0b1120 url('assets/img/puzzle-bg.cd26e2f5.webp') center/cover no-repeat}
.sf-radar .f{inset:0;filter:none;background:#0e1a20 url('assets/img/radar-bg.7e600dd5.webp') center/cover no-repeat}
.sf-puzzle .g,.sf-radar .g{opacity:.28}
/* puzzle pieces: outline only (no green fill) so they sit on the new background */
#whole .pz-solid,#whole .pz-ghost{fill:none!important}
#whole .pz-solid{stroke:#ffffff!important;stroke-opacity:.95}
#whole .pz-ghost{stroke:rgba(255,255,255,.5)!important}
#whole .pz-w,#whole .pz-w--l,#whole .pz-w--r{stroke:rgba(255,255,255,.32)!important}
#whole .pz-node{fill:rgba(255,255,255,.7)!important}
.sf-teal .f{background:
  radial-gradient(58% 52% at 26% 28%, rgba(150,214,210,.9), transparent 64%),
  radial-gradient(56% 56% at 78% 34%, rgba(96,168,158,.8), transparent 66%),
  radial-gradient(60% 60% at 60% 92%, rgba(24,58,52,.7), transparent 68%),
  linear-gradient(150deg,#cde7e2,#93c6bf 54%,#3f6f68)}
.sf-lime .f{background:
  radial-gradient(58% 52% at 28% 26%, rgba(206,236,124,.9), transparent 64%),
  radial-gradient(56% 56% at 80% 36%, rgba(126,178,52,.82), transparent 66%),
  radial-gradient(60% 60% at 58% 92%, rgba(30,52,22,.7), transparent 68%),
  linear-gradient(150deg,#e2eec2,#a9d264 54%,#3f6b1e)}
.sf-amber .f{background:
  radial-gradient(58% 52% at 26% 26%, rgba(246,206,140,.9), transparent 64%),
  radial-gradient(56% 56% at 80% 36%, rgba(226,150,66,.8), transparent 66%),
  radial-gradient(60% 60% at 58% 92%, rgba(58,40,20,.66), transparent 68%),
  linear-gradient(150deg,#f2ddb6,#e2b06a 54%,#8a5a24)}
.sf-blue .f{background:
  radial-gradient(58% 52% at 26% 28%, rgba(160,206,224,.9), transparent 64%),
  radial-gradient(56% 56% at 78% 34%, rgba(96,146,196,.8), transparent 66%),
  radial-gradient(60% 60% at 60% 92%, rgba(22,44,58,.7), transparent 68%),
  linear-gradient(150deg,#cfe2ee,#8fbadd 54%,#3f5f7a)}

/* ══════════ 4 · SECTION MOVES ══════════
   Day One now holds the Opportunity bento (a full-width multi-cell grid),
   so stack the Day One grid to one column and let the bento span. */
#dayone .day-grid{grid-template-columns:1fr!important;gap:clamp(1.75rem,3vw,2.5rem)}
#dayone .bento{width:100%}

/* ══════════ 6 · PILLARS SECTION (Predict / Investigate / Prevent) ══════════ */
.xw-pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:clamp(1.75rem,3vw,2.75rem)}
.xw-pcard{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(380px,46vw,560px);border-radius:20px;overflow:hidden;isolation:isolate;
  padding:clamp(1.4rem,2vw,2rem);color:#fff;text-decoration:none;
  background:#12201b var(--bg) center/cover no-repeat;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s;
}
.xw-pcard:hover{transform:translateY(-6px);box-shadow:0 34px 66px -32px rgba(16,32,26,.55)}
.xw-pcard::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(10,16,12,.30) 0%, rgba(10,16,12,0) 28%, rgba(10,16,12,.30) 60%, rgba(10,16,12,.80) 100%)}
.xw-pc-name{
  position:absolute;top:46%;left:0;right:0;z-index:1;transform:translateY(-50%);
  text-align:center;font-weight:300;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(1.35rem,2.1vw,1.85rem);text-shadow:0 2px 26px rgba(6,16,10,.55);
}
.xw-pc-name b{font-weight:500}
.xw-pc-foot{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}
.xw-pc-desc{max-width:30ch;color:rgba(255,255,255,.9);font-size:.94rem;line-height:1.5;text-shadow:0 1px 16px rgba(6,16,10,.55)}
.xw-pcard .pill{display:inline-flex;align-items:center;gap:.38rem;background:rgba(255,255,255,.92);color:#101613;
  font-size:.72rem;font-weight:500;letter-spacing:.01em;padding:.32rem .78rem;border-radius:999px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:background .25s,transform .25s}
.xw-pcard .pill svg{width:11px;height:11px}
.xw-pcard:hover .pill{background:#fff}
@media (max-width:900px){.xw-pcards{grid-template-columns:1fr;gap:1rem}}

/* ══════════ 7 · NAV OVER THE HERO ══════════
   Transparent with light text while the hero fills the view; JS removes
   .xw-navdark once the hero scrolls past, returning to the normal light nav. */
#nav{transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease}
#nav .brand,#nav .navtrig,#nav .nav-links a{transition:color .3s ease,background .18s ease}
#nav.xw-navdark{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
#nav.xw-navdark .brand{color:#fff}
#nav.xw-navdark .brand svg path{stroke:#fff}
#nav.xw-navdark .nav-links a,#nav.xw-navdark .navtrig{color:rgba(255,255,255,.9)}
#nav.xw-navdark .nav-links a:hover,#nav.xw-navdark .navtrig:hover{color:#fff;background:rgba(255,255,255,.14)}
/* an open tab (its dropdown showing) keeps the regular translucent hover highlight over the
   hero, not the solid white panel the base sheet gives every open trigger */
#nav.xw-navdark .navitem.open .navtrig{color:#fff;background:rgba(255,255,255,.14)}
#nav.xw-navdark .nav-lang{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.28)}
#nav.xw-navdark #burger span,#nav.xw-navdark #burger span::before,#nav.xw-navdark #burger span::after{background:#fff}
/* Blog "SOON" badge - visible over the hero */
#nav.xw-navdark .nav-soon{color:rgba(255,255,255,.9)}
#nav.xw-navdark .nav-soon span{color:rgba(255,255,255,.92);border-color:rgba(255,255,255,.5)}
/* also lift the SOON badge contrast in the normal (light) nav */
.nav-soon span{color:var(--ink-2);border-color:var(--ink-3)}
/* CTA becomes an outlined "Book a demo" pill over the hero, then returns to the green pill */
#nav.xw-navdark .afbtn{--af-bg:transparent;--af-fg:#fff;--af-fill:#fff;--af-fillfg:#13210d;border-color:rgba(255,255,255,.6)}

/* ══════════ 8 · DAY ONE photo tile (replaces the stat/quote row) ══════════ */
#dayone .cell--photo{grid-column:1 / -1;padding:0;min-height:clamp(260px,30vw,420px)}
#dayone .cell--photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ══════════ 9 · THIS BATCH ══════════ */
/* dropdown visuals -> photos (Product / Company) */
.dd-vis{background:#12201b url('assets/img/dd-product.85ab79b2.webp') center/cover no-repeat !important}
.dd-vis--alt{background:#12201b url('assets/img/dd-company.e3f7e19d.webp') center/cover no-repeat !important}

/* reduce titles by ~20% site-wide */
h2{font-size:clamp(1.36rem,2.88vw,2rem)}
#cta h2{font-size:clamp(1.52rem,3.7vw,2.56rem)}
#hero.xw-hero .xw-hero-title,.xw-hero-title{font-size:clamp(1.55rem,3.05vw,2.8rem)}

/* puzzle: space the title away from the (purple) stage + keep heads top-aligned */
#whole .sec-head{margin-bottom:clamp(2.5rem,5vw,4rem);align-items:start}
#whole .pz-stage{margin-top:clamp(1rem,2.5vw,2rem)}

/* CTA art -> seal photo */
.art-duo--photo{display:block;aspect-ratio:16/10;border-radius:14px;overflow:hidden}
.art-duo--photo img{width:100%;height:100%;object-fit:cover;display:block}

/* About us: title + photo in one view */
.xw-about{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,3vw,2.5rem);align-items:center}
@media (min-width:900px){.xw-about{grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem)}}
.xw-about-copy .lede{color:var(--ink-2);font-size:clamp(.95rem,1.2vw,1.0625rem);line-height:1.65;margin-top:1rem;max-width:44ch}
.xw-about-photo{border-radius:16px;overflow:hidden}
.xw-about-photo img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}

/* ══════════ 10 · THIS BATCH ══════════ */

/* --- (a) About us as its own page (about.html) --- */
#about-hero{padding-top:calc(var(--nav-h) + clamp(1.5rem,5vh,4rem))}
.xw-about--page{align-items:center}
@media (min-width:900px){
  .xw-about--page{min-height:calc(100vh - var(--nav-h) - clamp(6rem,14vh,11rem))}
}
.xw-about-title{
  font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:300;
  letter-spacing:-.02em;line-height:1.12;margin:.4rem 0 0;
}

/* --- (b) remove the decorative background arcs / circles site-wide --- */
.art-arcs,svg.c-arcs{display:none !important}

/* --- (c) OVER THE HERO ONLY: nav links slide to the right, next to the CTA, and go
       a touch bolder so the "Book a demo" pill does not read larger. The slide is a
       transform (set by JS so it abuts the CTA exactly) that eases smoothly; once the
       hero scrolls past it returns to 0 and the links sit centred at normal weight. --- */
.nav-links{transition:transform .7s cubic-bezier(.16,1,.3,1)}
#nav.xw-navdark .nav-links a,#nav.xw-navdark .navtrig{font-weight:500}
/* the left-aligned triggers over the hero open their menus outward to the right so they
   never run off the left edge */
#nav.xw-navdark .navitem .dropdown{left:0;right:auto;transform-origin:top left}

/* --- (d) storm sentence in the hero title's font (thin Inter), lime accent kept --- */
#storm .storm-h{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:200;letter-spacing:-.02em;line-height:1.16;
}

/* --- (e) pillars now live inside #agents, between the iso key and the agent cards --- */
.xw-pcards--agents{margin-top:clamp(2rem,4vw,3.25rem);margin-bottom:clamp(2.75rem,5.5vw,4.5rem)}

/* --- (f) The missing half: the coloured stage spans the section's full VISIBLE
       width (the .pz was moved out of .wrap in the markup, so this is 100% of the
       section, not 100vw, which avoids the scrollbar clipping the right corner).
       Shorter, rounded on both sides equally, muted; the puzzle + its stat cards
       live in a centred, scaled-down composition box so they stay aligned to each
       other while the band around them goes wide. --- */
#whole{overflow-x:clip}
#whole .pz{width:100%;margin:clamp(1.25rem,2.6vw,2.25rem) 0 0}
#whole .pz-stage{
  width:auto;                                  /* base .pz-stage is width:100%; let the
                                                  side margins actually inset it instead */
  margin-inline:clamp(14px,2.4vw,44px);
  border-radius:28px;overflow:hidden;
}
@media (min-width:900px){
  #whole .pz-stage{aspect-ratio:auto;height:clamp(540px,42vw,580px)}
  /* render the composition (art + wires + 4 cards) at its native design size, then
     scale the whole thing down uniformly. The cards therefore keep the exact
     proportions they were designed with, so nothing overflows and every card is
     the same size and aligned, just smaller. */
  #whole .pz-inner{
    position:absolute;top:50%;left:50%;width:1200px;height:640px;
    transform:translate(-50%,-50%) scale(.8);transform-origin:center;
  }
  #whole .pz-inner .pz-art{position:absolute;inset:0;width:100%;height:100%}
}
/* mute the nebula so it reads as a quiet backdrop, not a loud poster */
#whole .sf-puzzle .f{
  background:
    linear-gradient(180deg,rgba(9,14,26,.5),rgba(9,14,26,.6)),
    #0b1120 url('assets/img/puzzle-bg.cd26e2f5.webp') center/cover no-repeat;
}
#whole .sf-puzzle .g{opacity:.2}
/* the connecting dotted wires were too faint over the photo: make them read */
#whole .pz-w,#whole .pz-w--l,#whole .pz-w--r{
  stroke:rgba(255,255,255,.72)!important;stroke-width:2!important;
  stroke-dasharray:2 4.5!important;
}
#whole .pz-node{fill:#ffffff!important}

/* ══════════ 11 · THIS BATCH ══════════ */

/* --- (a) the technical/mono label font (the one "TOTAL LOSS MODELED" uses) ->
       the same Inter as the hero title, everywhere it appears site-wide --- */
:root{--mono:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',ui-sans-serif,sans-serif}

/* --- (b) remove every eyebrow; with them gone the section ledes line up with the
       title instead of the old eyebrow label --- */
.eyebrow{display:none!important}

/* --- (c) two "seal" wordmarks in the nav: the dark one (seal-dark.svg) shows on the
       light nav and the inner pages; over the hero it crossfades to the light/cream
       wordmark. They are stacked so the swap eases with the rest of the transition. --- */
.brand{position:relative;display:inline-flex;align-items:center}
.brand-logo{height:18px;width:auto;display:block;flex:none;transition:opacity .6s cubic-bezier(.4,0,.2,1)}
.brand-logo--light{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0;pointer-events:none}
#nav.xw-navdark .brand-logo--dark{opacity:0}
#nav.xw-navdark .brand-logo--light{opacity:1}

/* --- (d) the "Book a demo" / pill CTAs are white on light grounds (dark text, a dark
       arrow disc, and a dark fill on hover). The over-hero nav CTA and the #cta button
       keep their own outlined-white-over-dark treatment below. --- */
.afbtn{--af-bg:#fff;--af-fg:#1d1e20;--af-fill:#1d1e20;--af-fillfg:#fff;border-color:rgba(15,16,18,.16)}

/* --- (e) the "seal" wordmark on each pillar, above the product word --- */
.xw-pc-name{display:flex;flex-direction:column;align-items:center;gap:.55rem}
.xw-pc-logo{height:clamp(20px,2.3vw,30px);width:auto;filter:drop-shadow(0 2px 14px rgba(6,16,10,.6))}
.xw-pc-word{font-weight:300}

/* --- (f) Day One: the shopper photo moves up into the blank area to the right of
       the title (smaller), above the logos radar; the bento spans full width below --- */
#dayone .day-grid{grid-template-columns:1fr!important;gap:clamp(1.75rem,3vw,2.5rem)}
@media (min-width:900px){
  #dayone .day-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)!important;
    align-items:start;gap:clamp(1.75rem,3.5vw,3rem) clamp(2rem,4vw,4rem)}
  #dayone .day-copy{grid-column:1;align-self:center}
  #dayone .day-photo{grid-column:2}
  #dayone .bento{grid-column:1 / -1}
}
#dayone .day-photo{border-radius:16px;overflow:hidden}
#dayone .day-photo img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:5/4}

/* --- (g) CTA: dark-green wash background (12.png), light copy, and (seal photo now
       removed) a single centred column with the SAME outlined "Book a demo" pill the
       hero uses. --- */
/* the CTA and the footer share ONE wash (end-of-site.png): green at the CTA, fading
   to black down through the footer. Both go transparent so the wrapper shows through. */
.site-end{position:relative;background:#0e1813}
/* the radar image sits SHARP on the CTA: that section is short, so "cover" downscales
   the image (crisp) instead of upscaling it across the tall footer (which read soft).
   It then fades into the dark footer below for one continuous end-of-site. */
#cta.cta--bg{
  background:
    linear-gradient(to bottom, transparent 0%, transparent 56%, #0e1813 100%),
    #0e1813 url('assets/img/radar-bg-hero.460b9e80.webp') center / cover no-repeat;
  border-top-color:transparent;
}
.site-end footer{background:transparent}
#cta.cta--bg h2{color:#f4f7f1}
#cta.cta--bg .cta-copy p{color:rgba(244,247,241,.88);max-width:52ch}
#cta.cta--bg .cta-grid{grid-template-columns:1fr}
/* the CTA button matches the hero: outlined white pill that fills white on hover */
#cta.cta--bg .afbtn{--af-bg:transparent;--af-fg:#fff;--af-fill:#fff;--af-fillfg:#13210d;border-color:rgba(255,255,255,.6)}

/* ══════════ 12 · THIS BATCH ══════════ */

/* --- (a) the agentic-layer labels all the same length --- */
#agents .iso-lab{width:12rem;max-width:12rem}
#agents .iso-lab b{width:100%;box-sizing:border-box}

/* --- (b) a smoother, more cinematic nav transition from the hero into the page:
       the ground, border, blur, text colour and the CTA morph all crossfade over the
       same slow curve (the link slide is driven by JS, see explore.js) --- */
#nav{transition:background .7s cubic-bezier(.4,0,.2,1),border-color .7s cubic-bezier(.4,0,.2,1),backdrop-filter .7s cubic-bezier(.4,0,.2,1)}
#nav .brand,#nav .navtrig,#nav .nav-links a,#nav .nav-soon,#nav .nav-soon span{transition:color .6s cubic-bezier(.4,0,.2,1),background .25s ease,border-color .6s cubic-bezier(.4,0,.2,1)}
.afbtn{transition:background-color .6s cubic-bezier(.4,0,.2,1),border-color .6s cubic-bezier(.4,0,.2,1),color .6s cubic-bezier(.4,0,.2,1)}

/* --- (c) Careers hero: a 2-line title with the sub paragraph to its right, then a
       big dramatic photo across the middle (wonderful-style) --- */
#careers-hero{padding-top:calc(var(--nav-h) + clamp(1.5rem,4vh,3.5rem))}
.careers-hero-head{display:grid;grid-template-columns:1fr;gap:1.1rem;margin-bottom:clamp(1.75rem,3.5vw,3rem)}
@media (min-width:900px){
  .careers-hero-head{grid-template-columns:1.4fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
}
/* the title matches the main-page hero headline: thin Inter, tight tracking */
.careers-hero-title{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:clamp(1.75rem,3.6vw,3.1rem);font-weight:200;letter-spacing:-.02em;line-height:1.1;margin:0;color:var(--ink)}
.careers-hero-sub{color:var(--ink-2);font-size:clamp(1rem,1.35vw,1.18rem);line-height:1.62;max-width:46ch}
@media (min-width:900px){.careers-hero-sub{padding-top:.5rem}}
.careers-hero-photo{border-radius:20px;overflow:hidden}
.careers-hero-photo img{width:100%;height:clamp(320px,52vw,720px);object-fit:cover;display:block}

/* --- (d) Radar (visibility) hero: dark abstract background, a much smaller centred
       title, and the live radar sitting below it --- */
/* the abstract image sits at the top behind the title, then dissolves slowly into the
   bright page background before the radar; a light veil keeps the dark title readable
   over it, and everything below reads on white as usual */
/* the radar.png sky fills only the hero-main panel, sized to about one viewport, so
   "cover" DOWNSCALES the image (staying sharp) instead of upscaling it across a tall
   section (which read blurry). The title is centered in the middle. The live radar
   widget sits in its own section below, on the page background. */
/* the Seal Radar hero as a cinematic editorial composition: quiet negative space and the
   headline on the left, a monumental vertical radar photograph cropped off the right edge.
   The washed sky is kept as the atmospheric foundation. */
#vhero{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  display:flex;align-items:center;
  background:
    /* a soft, localized readability wash under the headline only; it fades out long before the photo */
    linear-gradient(103deg, rgba(17,28,50,.40) 0%, rgba(17,28,50,.16) 24%, rgba(17,28,50,0) 46%),
    #7ba7d6 url('assets/img/radar-1.89a5a8ea.webp') center / cover no-repeat;
  border-top-color:transparent;
  padding:calc(var(--nav-h) + clamp(1rem,4vh,3rem)) 0 clamp(2rem,5vh,4rem);
}
#vhero .wrap{position:relative;z-index:2;width:100%}
#vhero .vhero-head{max-width:min(40ch,42vw);text-align:left;margin:0}
#vhero .vhero-head h1{font-size:clamp(1.75rem,3.4vw,2.95rem);color:#fff;margin:0;max-width:none;line-height:1.12;letter-spacing:-.02em}
#vhero .vhero-head .lede{margin:1.35rem 0 0;color:rgba(255,255,255,.9);max-width:40ch}
#vhero .vhero-head .hw{color:#fff}
/* the radar photograph: a vertical frame on the right, extended past the edge so it reads
   monumental and cropped, slightly darker than the wash, its outer edge dissolving into haze */
.vhero-radar{
  position:absolute;z-index:1;pointer-events:none;
  right:clamp(-7vw,-3.5vw,-2rem);top:50%;transform:translateY(-50%);
  width:clamp(360px,48vw,780px);height:clamp(440px,64vh,860px);
  object-fit:cover;object-position:52% 58%;
  border-radius:30px;
  filter:brightness(.9) saturate(1.05) contrast(1.03);
}
@media (max-width:900px){
  #vhero{display:block;text-align:center}
  #vhero .vhero-head{max-width:none;text-align:center;margin:0 auto}
  #vhero .vhero-head .lede{margin-inline:auto}
  .vhero-radar{position:relative;right:auto;top:auto;transform:none;margin:clamp(1.75rem,6vw,3rem) auto 0;
    width:min(88vw,440px);height:clamp(300px,58vw,420px);border-radius:22px;
    -webkit-mask-image:none;mask-image:none}
}

/* --- (e) FAQ: the warehouse photo fills the blank space under the title, stretched
       down to the height of the question list beside it --- */
.faq{align-items:stretch}
.faq-side{display:flex;flex-direction:column;min-height:0}
.faq-art{flex:1 1 auto;margin-top:clamp(2.25rem,4vw,3.5rem);min-height:clamp(280px,32vw,560px);
  border-radius:18px;overflow:hidden}
.faq-art img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}

/* --- (f) the handwriting flourish must not inflate a heading line (it was 43px in a
       34px line, which pushed the line under it down). Cap it to the line box; the
       cursive's loops still overflow visibly without affecting layout. --- */
.hw-svg{height:1.02em;width:auto;vertical-align:-.12em}

/* --- (g) remove the hexagon avatars from the "Ask Seal" assistant (header + each
       assistant message) --- */
#ask .chat-av,#ask .msg-av{display:none!important}

/* --- (h) the storm section carries the stormy wash (storm.png) instead of the flat
       radial-gradient; it is dark, so the white + lime writing still reads --- */
#storm .storm-bg{background:#0c1420 url('assets/img/storm.74c9d358.webp') center / cover no-repeat}
#storm .storm-bg::after{opacity:.22}

/* --- (i) the opportunity heading: keep the first two sentences on one line --- */
#opportunity h2{max-width:none}

/* --- (j) the iceberg and the guardrails "policy limits" visual are now photos,
       with the same rounded corners as the components they replace --- */
.berg-img{display:block;width:100%;max-width:72rem;margin-inline:auto;border-radius:20px}
.sol .sol-img{width:100%;height:100%;min-height:190px;object-fit:cover;display:block;border-radius:12px}

/* --- (k) footer aligned across every page. The "Book a call" lead block is gone, so
       the four link columns fill the row evenly. Every footer sits on the same
       near-black as the homepage end-of-site. The big SEAL wordmark reads as a soft
       filled watermark (matching the reference) instead of the faint outline that
       never showed, and it no longer waits on a reveal that did not fire at page end. --- */
footer{background:#0e1813}
.site-end footer{background:transparent}   /* homepage: the .site-end wash shows through */
@media(min-width:760px){.f-grid{grid-template-columns:repeat(4,1fr)}}
.f-mark{-webkit-text-stroke:0;color:rgba(255,255,255,.06);opacity:1;transform:none}

/* --- (l) Seal Score (risk): the highlighted "product" row carries the predict wash
       instead of the flat light-green fill; the live catalog list is now the catalog
       photo (the same products, in a merchandiser's hands) --- */
.zoom-row--4{
  background:
    linear-gradient(90deg, rgba(22,9,26,.72) 0%, rgba(22,9,26,.42) 44%, rgba(22,9,26,.06) 82%),
    #b5502f url('assets/img/card-predict.ce183874.webp') center / cover no-repeat;
  border-color:rgba(255,255,255,.22);
}
.zoom-row--4 .zk{color:rgba(255,255,255,.74)}
.zoom-row--4 .zv{color:#fff}
.zoom-row--4 em{color:rgba(255,255,255,.86)}
.clist-img{margin-top:clamp(1.5rem,3vw,2.5rem);border-radius:14px;overflow:hidden}
.clist-img img{width:100%;height:auto;display:block;border-radius:inherit}

/* --- (m) once the glass breaks, the payoff splits in two: the copy + the three metrics
       on the left, the locked-cabinet photo on the right with soft rounded corners --- */
@media(min-width:860px){
  #glass .gl-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,4.5rem);align-items:center}
  #glass .gl-h{font-size:clamp(1.6rem,3.1vw,2.9rem)}
  #glass .gl-stats{max-width:none;gap:clamp(.9rem,1.8vw,1.7rem)}
}
#glass .gl-photo{border-radius:18px;overflow:hidden}
#glass .gl-photo img{width:100%;height:clamp(320px,46vh,560px);object-fit:cover;display:block;border-radius:inherit}

/* --- (n) the "operating system" section: the loss verticals are a premium auto-cycling
       accordion on the left; the OS photo fills the right column to the SAME height --- */
.os-layout{margin:clamp(2rem,4vw,3.5rem) 0 0;display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media(min-width:900px){.os-layout{grid-template-columns:1.12fr .88fr}}
.os-aside{border-radius:16px;overflow:hidden;min-height:clamp(340px,40vw,460px)}
.os-aside .iso-os{display:block;width:100%;height:100%;object-fit:cover;border-radius:16px}
/* extra breathing room before the three pillars so they do not come so early */
#agents .xw-pcards--agents{margin-top:clamp(3.5rem,8vw,7rem)}

/* --- (o) every title and the top-nav take the hero's thin Inter styling (the site's
       display font is Chillax; the hero headline is Inter 200 with tight tracking, and
       the request is to make all headings and the nav read the same way) --- */
h1, h2, h3, h4,
.gl-h, .storm-h, .iso h2, .xw-pc-word,
.navtrig, .nav-soon, #mnav a{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:200;
  letter-spacing:-.02em;
}
/* the dropdown menu items keep the Chillax display font */
.dd-links a b, .dd-links a em{font-family:var(--font)}
/* the hero headline keeps its own Inter rule; nothing to change there */

/* --- (p) the "ask us your worst SKU" CTA art is now the warm 3.png wash (same rounded
       rectangle the decorative orbs/lines occupied) --- */
.art-duo--img{display:block;overflow:hidden}
.art-duo--img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}


/* --- (r) a smaller navbar site-wide: shorter bar, smaller logo, links, CTA and the
       hover dropdown menus --- */
:root{--nav-h:52px}
.brand-logo{height:15px}
.nav-links a,.navtrig{font-size:.72rem;padding:.38rem .55rem}
.nav-links .caret{width:8px;height:8px}
.nav-soon span{font-size:.46rem;padding:.03rem .22rem}
.nav-cta .afbtn{font-size:.72rem;--af-px:.85rem;--af-circle:1.2rem;--af-gap:.4rem;padding-top:.4rem;padding-bottom:.4rem}
.dropdown{width:min(560px,90vw);grid-template-columns:230px 1fr}
.dd-vis{padding:1.1rem}
.dd-vis b{font-size:.82rem}
.dd-vis span{font-size:.7rem}
.dd-links{padding:.7rem}
.dd-links a{padding:.4rem .6rem}
.dd-links b{font-size:.72rem}
.dd-links em{font-size:.7rem}
/* shrink the entire hover dropdown a further 20% */
.dropdown{transform-origin:top center;transform:translateY(-6px) scale(.8)}
.navitem.open .dropdown{transform:scale(.8)}

/* --- (s) verticals: a quiet auto-cycling accordion. The active vertical expands to reveal
       its line of detail, marked by a lime bar; hovering holds one open. --- */
.vstack{display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.vrow{position:relative;padding:clamp(.8rem,1.35vw,1.15rem) 0 clamp(.8rem,1.35vw,1.15rem) 1.25rem;
  border-top:1px solid var(--line);cursor:default}
.vrow:first-child{border-top:0}
.vrow::before{content:"";position:absolute;left:0;top:clamp(.9rem,1.5vw,1.25rem);width:2px;height:0;
  background:var(--lime);border-radius:2px;transition:height .45s cubic-bezier(.4,0,.2,1)}
.vrow.is-on::before{height:1.1em}
.vrow-t{display:block;font-size:clamp(1.05rem,1.5vw,1.32rem);letter-spacing:-.02em;
  color:var(--ink-3);transition:color .4s ease}
.vrow.is-on .vrow-t{color:var(--ink)}
/* the active description reserves a FIXED height (not content-based) so every open row is
   the same height; the accordion's total height never changes and the photo never jumps */
.vrow-d{display:block;height:0;opacity:0;overflow:hidden;color:var(--ink-2);
  font-size:.82rem;line-height:1.5;
  transition:height .5s cubic-bezier(.4,0,.2,1),opacity .4s ease,margin-top .45s}
.vrow.is-on .vrow-d{height:3em;opacity:1;margin-top:.42rem}

/* --- (t) Seal Score hero on the 7.png wash: white headline on the deep-blue left, the
       signals restyled as a sleek hairline list (no green pill), the gauge kept legible --- */
#prhero .pr-pin{
  background:
    linear-gradient(180deg, rgba(12,20,36,.22) 0%, rgba(12,20,36,0) 32%, rgba(12,20,36,.26) 100%),
    #22314a url('assets/img/16.bc3ebec6.webp') center / cover no-repeat;
}
#prhead .pr-copy h1{color:#fff}
#prhead .pr-copy .lede{color:rgba(255,255,255,.86)}
/* sleek signal list: no fill, no border pill, just a thin hairline; muted until the gauge reaches it */
#prhero .gg-sig{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.14);
  border-radius:0;padding:.62rem .1rem;opacity:.6;transition:opacity .4s ease,color .4s ease}
#prhero .gg-sig:last-child{border-bottom:0}
#prhero .gg-sig i{width:5px;height:5px;background:rgba(255,255,255,.5);box-shadow:none;transition:background .4s,box-shadow .4s}
#prhero .gg-sig b{color:rgba(255,255,255,.72)}
#prhero .gg-sig em{color:#fff;margin-left:auto}
#prhero .gg-sig.on{opacity:1;background:transparent;border-color:rgba(255,255,255,.24)}
#prhero .gg-sig.on i{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.16)}
#prhero .gg-sig.on b{color:#fff}
/* the gauge low end reads as a calm slate rather than green (the JS uses the slate state
   colors); the gauge text is darkened and given a soft light halo so it reads on the wash */
#prhero .gg-state{color:#fff}
#prhero .gg-fill{stroke:#3F6084}
#prhero .gg-read b{color:#fff}
#prhero .gg-k,#prhero .gg-sku{color:#fff}
#prhero .gg-read b,#prhero .gg-k,#prhero .gg-sku,#prhero .gg-state{
  text-shadow:0 2px 26px rgba(6,12,22,.4);
}
#prhero .gg-bl{fill:#fff;font-weight:600;
  filter:drop-shadow(0 1px 2px rgba(6,12,22,.6)) drop-shadow(0 0 7px rgba(6,12,22,.5))}
#prhero .gg-needle line{stroke:#fff}

/* --- (u) two decorative fills become photos: the "claim your loss assessment" plate takes
       the storm image, and the orbs/lines art-duo blocks take the hero poster (the risk CTA
       art-duo already uses its own .art-duo--img photo, so it is excluded) --- */
.c-plate{background:#0c1420 url('assets/img/storm.74c9d358.webp') center / cover no-repeat !important}
.art-duo:not(.art-duo--img){background:#12221a url('assets/img/hero-bg.79997105.webp') center / cover no-repeat}
.art-duo:not(.art-duo--img) > *{display:none}

/* ═══════════════ (w) CONTACT · 2-col split: form left, dusk photo + copy right ═══════════════ */
#c-split{display:grid;grid-template-columns:1fr;min-height:100svh;background:var(--bg)}
@media (min-width:900px){ #c-split{grid-template-columns:1.02fr 1fr} }

.c-panel{display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + clamp(2.4rem,6vh,4.6rem)) clamp(1.4rem,4.5vw,4.6rem) clamp(2.6rem,6vh,4.6rem)}

/* left · the form on the page background */
.c-panel--form{background:var(--bg)}
.c-form-wrap{width:100%;max-width:33rem;margin-inline:auto}
.c-form-title{font-family:'Inter',var(--mono),system-ui,sans-serif;font-weight:200;
  letter-spacing:-.02em;font-size:clamp(1.6rem,2.6vw,2.15rem);line-height:1.05;color:var(--ink);margin:0}
.c-form-note{color:var(--ink-2);font-size:.9rem;line-height:1.6;margin:.75rem 0 1.9rem;max-width:36ch}
.c-form2{display:flex;flex-direction:column;gap:1.1rem}
.c-two{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.c-field{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2)}
.c-field b{color:#b3543c;font-weight:400;margin-left:.15em}
.c-field input,.c-field select{display:block;width:100%;margin-top:.5rem;box-sizing:border-box;
  padding:.72rem .85rem;border:1px solid var(--line);border-radius:9px;background:#fff;
  font-family:'Inter',var(--mono),system-ui,sans-serif;font-size:.9rem;letter-spacing:normal;
  text-transform:none;color:var(--ink);-webkit-appearance:none;appearance:none;
  transition:border-color .18s,box-shadow .18s}
.c-field input::placeholder{color:#9a9a9a}
.c-field input:focus,.c-field select:focus{outline:none;border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(33,33,33,.08)}
.c-field select{cursor:pointer;padding-right:2.2rem;color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' stroke='%23535353' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center}
.c-field.is-bad input,.c-field.is-bad select{border-color:#c0563c;box-shadow:0 0 0 3px rgba(192,86,60,.1)}
.c-send{align-self:flex-start;margin-top:.55rem;padding:.8rem 1.9rem;border:0;border-radius:999px;
  background:var(--ink);color:#fff;font-family:'Inter',var(--mono),system-ui,sans-serif;
  font-size:.9rem;font-weight:500;letter-spacing:.01em;cursor:pointer;transition:transform .15s,background .2s}
.c-send:hover{background:#000;transform:translateY(-1px)}
.c-ok{margin:.2rem 0 0;font-size:.82rem;color:#4a6b3a;font-family:var(--mono)}

/* right · the dusk photo with headline + contact info */
.c-panel--media{position:relative;color:#fff;overflow:hidden;
  background:#0c1420 url('assets/img/contact.ab965c83.webp') center / cover no-repeat}
.c-panel--media::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,14,26,.42) 0%,rgba(8,14,26,.12) 42%,rgba(8,14,26,.30) 100%)}
.c-media-wrap{position:relative;z-index:1;max-width:30rem;margin-inline:auto;width:100%}
.c-media-title{font-family:'Inter',var(--mono),system-ui,sans-serif;font-weight:200;
  letter-spacing:-.025em;font-size:clamp(2rem,3.4vw,3.15rem);line-height:1.06;color:#fff;margin:0;
  text-shadow:0 2px 30px rgba(6,12,22,.35)}
.c-media-sub{margin:1.25rem 0 0;font-size:1.02rem;line-height:1.6;color:rgba(255,255,255,.88);
  max-width:34ch;text-shadow:0 1px 20px rgba(6,12,22,.35)}
.c-media-info{margin-top:clamp(2.2rem,5vh,3.4rem);display:grid;gap:.45rem;
  font-family:var(--mono);font-size:.82rem;color:rgba(255,255,255,.84);
  text-shadow:0 1px 16px rgba(6,12,22,.4)}
.c-media-info a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

@media (max-width:899px){
  .c-panel{padding-left:clamp(1.2rem,6vw,2rem);padding-right:clamp(1.2rem,6vw,2rem)}
  .c-panel--form{order:1;padding-top:calc(var(--nav-h) + 2rem)}
  .c-panel--media{order:2;min-height:60vh}
}

/* (x) the white nav logo (over the main hero) reads smaller than the dark one at the
   shared 15px, so give just that one a little more height; it is centred via translateY
   so it grows evenly and stays vertically aligned */
.brand-logo--light{height:19px;width:auto;max-width:none}

/* (y) the cost-of-the-cabinet glass shatter animation removed: the section becomes a plain
   static content block for everyone (this is exactly its own reduced-motion fallback) */
#glass{height:auto}
#glass .gl-pin{position:static;height:auto;padding-block:clamp(4rem,10vw,8rem)}
#glass .gl-stage{position:relative;inset:auto;background:none}
#glass .gl-under{position:relative;inset:auto}
#glass .gl-pane,#glass .gl-shadows{display:none}
#glass .gl-lede,#glass .gl-stat{opacity:1;transform:none}

/* (z) Seal Score split: a centered text hero (#prhead) over the 16.png wash, with the gauge
   moved into its own pinned section below (#prhero), gauge centered and signals beneath it */
#prhead{position:relative;overflow:hidden;min-height:100svh;display:flex;align-items:center;
  text-align:center;
  padding:calc(var(--nav-h) + clamp(2rem,7vh,4.5rem)) var(--gut) clamp(2rem,7vh,4.5rem);
  background:
    linear-gradient(180deg, rgba(12,20,36,.34) 0%, rgba(12,20,36,.08) 34%, rgba(12,20,36,.30) 100%),
    #22314a url('assets/img/16.bc3ebec6.webp') center / cover no-repeat;}
#prhead .wrap{width:100%}
#prhead .pr-copy{max-width:54rem;margin-inline:auto;display:flex;flex-direction:column;align-items:center}
#prhead .eyebrow{justify-content:center}
#prhead .pr-copy h1{margin:0;max-width:none}
#prhead .pr-copy .lede{margin:1.4rem auto 0;max-width:56ch}

/* gauge section: a centered vertical stack (gauge, then the signals row) */
#prhero .pr-pin{align-items:center}
#prhero .pr-stack{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(1.25rem,3.5vh,2.5rem);width:100%;text-align:center}
#prhero .gg{margin-inline:auto}
/* signals become a centered, wrapping row of compact chips under the gauge */
#prhero .pr-sigs{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem .7rem;
  max-width:64rem;margin:0 auto}
#prhero .gg-sig{display:inline-flex;align-items:center;width:auto;
  border:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16);
  border-radius:999px;background:rgba(255,255,255,.05);padding:.4rem .85rem;gap:.5rem;opacity:.75}
#prhero .gg-sig:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
#prhero .gg-sig em{margin-left:.1rem}
#prhero .gg-sig.on{opacity:1;background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.38)}

/* (aa) cinematic crossfade: the title and the gauge stack fill the same centred frame in the
   pinned section; the JS fades the title out and the gauge in, then sweeps the needle up */
#prhero .pr-pin{display:block;padding:0}
#prhero .pr-title,#prhero .pr-stack{position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:calc(var(--nav-h) + clamp(1.5rem,5vh,3rem)) var(--gut) clamp(1.5rem,5vh,3rem);
  will-change:opacity}
#prhero .pr-title{opacity:var(--tOp,1);gap:1.25rem}
#prhero .pr-stack{opacity:var(--gOp,0)}
#prhero .pr-title h1{margin:0;max-width:20ch;color:#fff;
  font-size:clamp(2rem,4.6vw,3.6rem);letter-spacing:-.03em;line-height:1.07;text-wrap:balance;
  text-shadow:0 2px 30px rgba(6,12,22,.42)}
#prhero .pr-title .lede{margin:0 auto;max-width:52ch;color:rgba(255,255,255,.88);
  text-shadow:0 1px 20px rgba(6,12,22,.4)}

@media (max-width:999px){
  /* no scrub on mobile: title then gauge, stacked, both visible */
  #prhero .pr-title,#prhero .pr-stack{position:relative;inset:auto;opacity:1 !important;padding:0}
  #prhero .pr-title{margin-bottom:clamp(2rem,8vw,3rem)}
}

/* (ab) Guardrails hero on the coastal-guardrail photo; the green lane art removed, white
   editorial copy on the left over a soft readability veil (mirrors the radar hero treatment) */
#chero{position:relative;overflow:hidden;min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--nav-h) + clamp(2rem,6vh,4rem)) 0 clamp(2rem,6vh,4rem);
  background:
    linear-gradient(100deg, rgba(10,16,30,.58) 0%, rgba(10,16,30,.24) 32%, rgba(10,16,30,0) 58%),
    #10161e url('assets/img/Guardrails.97c221d3.webp') center / cover no-repeat;}
#chero .wrap{position:relative;z-index:2;width:100%}
#chero .sec-head{max-width:min(54rem,92vw);margin-inline:auto;text-align:center;align-items:center}
#chero h1{color:#fff;font-size:clamp(2rem,4.6vw,3.6rem);letter-spacing:-.03em;line-height:1.07;
  max-width:24ch;margin-inline:auto;text-wrap:balance}
#chero .lede{color:rgba(255,255,255,.88);max-width:52ch;margin-inline:auto}
#chero .hw{color:#fff}
@media (max-width:900px){ #chero{min-height:auto} #chero .sec-head{max-width:none} }

/* (ac) About hero recomposed like the reference: big headline top-left, a short note top-right,
   the about.png photo full-width below */
#about-hero{padding-top:calc(var(--nav-h) + clamp(1.5rem,5vh,3.5rem))}
#about-hero .ab-hero{display:block}
#about-hero .ab-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:clamp(1.5rem,6vw,5rem);flex-wrap:wrap;margin-bottom:clamp(1.5rem,3.4vw,2.75rem)}
#about-hero .ab-head .xw-about-title{margin:0;flex:1 1 20ch;color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:200;letter-spacing:-.02em;line-height:1.08;font-size:clamp(1.9rem,3.8vw,3.5rem)}
#about-hero .ab-head .lede{flex:0 1 32ch;margin:.5rem 0 0;color:var(--ink-2);
  font-size:clamp(.9rem,1.05vw,1rem);line-height:1.62;text-align:left;max-width:34ch}
#about-hero .ab-photo{border-radius:16px;overflow:hidden}
#about-hero .ab-photo img{width:100%;height:auto;display:block;aspect-ratio:1671/941;object-fit:cover}
@media (max-width:760px){
  #about-hero .ab-head{flex-direction:column;gap:.9rem}
  #about-hero .ab-head .lede{flex:none;max-width:none}
}

/* (ad) About story: heading on the left, body (and the about2 photo) on the right, two blocks
   split by a hairline, the editorial two-column layout from the reference */
#about-story{padding-top:clamp(2.5rem,6vh,4.5rem);padding-bottom:clamp(3rem,8vh,6rem)}
#about-story .ab-row{display:grid;grid-template-columns:1fr;gap:clamp(1rem,3vw,1.75rem);
  padding:clamp(2.5rem,6vw,4.5rem) 0;border-top:1px solid var(--line)}
#about-story .ab-row:first-child{border-top:0;padding-top:0}
@media (min-width:860px){
  #about-story .ab-row{grid-template-columns:1fr 1fr;gap:clamp(2.5rem,7vw,7rem);align-items:start}
}
#about-story .ab-row-h{margin:0;color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:300;letter-spacing:-.02em;line-height:1.1;font-size:clamp(1.6rem,3.1vw,2.6rem)}
#about-story .ab-row-body{max-width:46ch}
#about-story .ab-row-body p{margin:0 0 1.05rem;color:var(--ink-2);
  font-size:clamp(.95rem,1.05vw,1.05rem);line-height:1.66}
#about-story .ab-row-body p:last-of-type{margin-bottom:0}
#about-story .ab-row-photo{margin-top:clamp(1.75rem,3.4vw,2.5rem);border-radius:16px;overflow:hidden}
#about-story .ab-row-photo img{width:100%;height:auto;display:block;aspect-ratio:1678/937;object-fit:cover}

/* (ae) Careers · a big centered two-tone "who we hire" statement, like the reference: the
   core claim in ink, the qualifier in a muted grey */
/* the statement pins (locks) centred while it fills, then releases once it is full */
#careers-statement{position:relative;height:200vh;text-align:center;padding:0}
#careers-statement .cx-pin{position:sticky;top:0;height:100vh;height:100svh;
  display:grid;place-items:center;padding:calc(var(--nav-h) + 1rem) 0 1rem}
@media (max-width:760px){
  #careers-statement{height:auto;padding-block:clamp(3.5rem,10vh,6rem)}
  #careers-statement .cx-pin{position:static;height:auto;padding:0;display:block}
}
.cx-statement{margin:0 auto;max-width:min(52rem,90vw);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:200;letter-spacing:-.02em;line-height:1.3;
  font-size:clamp(1.45rem,3vw,2.5rem)}
.cx-statement .cw{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:200}
/* each word starts grey and fills toward ink as --p (scroll progress) advances the fill
   front past its index; the plain grey above is the fallback where color-mix is unsupported */
.cx-statement .cw{color:#a6a6a6;
  --lit:clamp(0, calc(var(--p,0) * var(--n) - var(--i)), 1);
  color:color-mix(in srgb, var(--ink) calc(var(--lit) * 100%), #a6a6a6)}
html.no-js .cx-statement .cw{color:var(--ink)}
@media (prefers-reduced-motion:reduce){ .cx-statement{--p:1} }

/* ═══════════════ (af) FX · a cinematic, site-wide layer ═══════════════ */
/* page ENTER: the whole view rises and fades in on load */
@media (prefers-reduced-motion:no-preference){
  .js main{animation:fx-enter .75s cubic-bezier(.22,1,.36,1) both}
}
@keyframes fx-enter{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
/* page EXIT: it lifts away just before the next page loads */
html.fx-leaving main{animation:fx-leave .46s cubic-bezier(.7,0,.84,0) both;pointer-events:none}
@keyframes fx-leave{to{opacity:0;transform:translateY(-22px) scale(.992)}}

/* magnetic pull on the large CTAs */
.afbtn.fx-mag{transform:translate(var(--mx,0),var(--my,0));
  transition:transform .35s cubic-bezier(.2,.8,.2,1),background-color .6s,border-color .6s,color .6s}

/* a light sweep across any CTA on hover */
.afbtn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.4) 50%,transparent 68%);
  transform:translateX(-125%);transition:transform .75s cubic-bezier(.4,0,.2,1);mix-blend-mode:overlay}
.afbtn:hover::after{transform:translateX(125%)}

/* soft cursor glow that trails the pointer (desktop) */
.fx-glow{position:fixed;left:0;top:0;width:360px;height:360px;border-radius:50%;
  z-index:60;pointer-events:none;opacity:0;transition:opacity .6s ease;
  background:radial-gradient(circle, rgba(150,205,60,.16), rgba(150,205,60,0) 62%);
  mix-blend-mode:screen;will-change:transform}
.fx-glow.on{opacity:1}