/* Homepage styles that load before site.css (moved out of index.html, same order) */

/* ---- block 1 ---- */
:root{color-scheme:light}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* ---- brandreel-video-css ---- */
/* brand video section: full-width video, poster reserves the space (no layout shift) */
.brandreel.brandreel--video{min-height:0;height:auto;display:block;gap:0}   /* beats site.css .brandreel (loaded later) */
.brandreel-video{display:block;width:100%;height:auto;aspect-ratio:1280/714;background:var(--aw-ink);object-fit:cover}

/* ---- hero-fluid-css ---- */
#top .hero-glowimg{display:none}   /* the bubbles replace the glow image */
/* ===== Hero fluid background (WebGL gooey gradient) ===== */
.hero-fluid{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s var(--aw-ease-out)}
.hero.hero--live .hero-fluid{opacity:1}
.hero-hint{position:absolute;right:var(--gutter);bottom:clamp(20px,3vw,36px);z-index:3;font-family:var(--display);font-size:11px;font-weight:var(--aw-weight-bold);letter-spacing:var(--aw-tracking-overline);text-transform:uppercase;color:rgba(244,241,232,.45);pointer-events:none;opacity:0;transition:opacity .8s var(--ease)}
.hero.hero--live .hero-hint{opacity:1}
.hero.hero--touched .hero-hint{opacity:0}
@media(hover:none){.hero-hint{display:none}}

/* ---- hero-reveal-css ---- */
/* "What's a SIGNAL scan?" opens inside the one-screen hero: trade the hero's top/bottom padding for the
   explanation so it lands on screen instead of pushing the hero taller (align-content:center re-balances the rest). */
.hero{transition:padding-block .42s cubic-bezier(.65,0,.35,1)}
.hero:has(> .wrap > details.reveal[open]:not(.is-closing)){padding-block:clamp(20px,3vh,40px) clamp(32px,6vh,72px)}
/* .is-closing is set by #hero-reveal-js while the explanation eases shut, so the hero and the icon move with it */
.hero details.reveal.is-closing summary:after{transform:none}
@media (prefers-reduced-motion:reduce){.hero{transition:none}}
/* Readability of the opened explanation: it sits over the moving blue background, so give it a dark frosted panel
   and the same cream text as .hero-sub (was 8% white + #cfcabb, ~3:1 contrast on the bright blue; now ~12:1).
   One class more specific than site.css's .hero .reveal-body, which loads after this block. */
.hero details.reveal .reveal-body{background:rgba(20,19,15,.78);-webkit-backdrop-filter:blur(14px) saturate(115%);backdrop-filter:blur(14px) saturate(115%);box-shadow:inset 0 0 0 1px rgba(244,241,232,.08);padding:20px 26px}
.hero details.reveal .reveal-body p{color:var(--aw-cream);font-size:16.5px;line-height:1.65;letter-spacing:.005em}

/* ---- scroll-lock-css ---- */
/* The pop-ups lock scrolling (body.modal-open / body.ss-open, html.lenis-stopped), which removes the scrollbar and
   made the whole page jump sideways by its width. Keep that space reserved so nothing moves. */
html{scrollbar-gutter:stable}

/* ---- mobile-layout-css ---- */
/* Phones / stacked layout only (the 860px breakpoint where site.css stacks the Services split). */
@media (max-width:860px){
  /* Services: the illustration sits between the intro line and the service buttons, not above the eyebrow.
     .side-text is flattened so its children and .side-media share one column that can be re-ordered. */
  #services .side--split{row-gap:0}
  #services .side--split > .side-text{display:contents}
  #services .side--split > .side-text > *{order:1}
  #services .side--split > .side-media{order:2;margin-top:12px;align-self:start;height:220px}
  #services .side--split > .side-text > .svc-list{order:3}
  /* Common questions: a little less space above the section (was clamp(120px,18vh,220px), ~152px on a phone). */
  #questions .faqscroll-sticky{padding-top:clamp(80px,11vh,120px)}
}

/* ---- legal-links-css ---- */
.fbot a,.fbot-link{color:inherit;text-decoration:underline;text-underline-offset:3px}.fbot a:hover,.fbot-link:hover{color:var(--aw-cream)}.fbot-link{font:inherit;background:none;border:0;padding:0;cursor:pointer}.form-disclaimer a{color:inherit;text-decoration:underline;text-underline-offset:2px}