/* ==========================================================================
   CASIVA — Main Stylesheet
   Brand tokens → Reset → Base → Layout → Components → Pages
   ========================================================================== */

/* --------------------------------------------------------------------------
   Brand Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colors */
  --navy:   #081C46;
  --blue:   #5280BA;
  --gold:   #C9A96A;
  --slate:  #2B3A55;
  --mist:   #EEF2F7;
  --white:  #ffffff;
  --black:  #000000;
  --text:   #1a2238;
  --muted:  #6b7a99;

  /* Typography */
  --font-heading: 'Jost', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-accent:  'Fraunces', serif;

  /* Spacing scale */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  7rem;

  /* Layout */
  --max-width: 1200px;
  --nav-height: 72px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html.casiva-no-smooth-scroll,
html.casiva-no-smooth-scroll body {
  scroll-behavior: auto !important;
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--text);
  line-height: 1.65;
  background: var(--white);
  overflow-x: hidden;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul { list-style: none; }

button {
  cursor: pointer;
  font: inherit;
  border: none;
  background: none;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.2;
  color: var(--navy);
  letter-spacing: 0.02em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.6rem); }
h4 { font-size: 1.1rem; font-weight: 500; }

p { max-width: 68ch; }

.eyebrow {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.5rem;
  max-width: none; /* override p { max-width: 68ch } so text-align:center works in centered layouts */
}

.eyebrow--gold { color: var(--gold); }

.divider {
  width: 60px;
  height: 3px;
  background: var(--gold);
  border: none;
  margin: 1rem 0 1.75rem;
}

.section-intro {
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--slate);
  max-width: 60ch;
  margin-bottom: var(--space-lg);
}
/* When the intro paragraph is immediately followed by another paragraph
   (continuing prose rather than a grid or button block), drop the big
   gap so the two paragraphs read as one body of copy. */
.section-intro:has(+ p) { margin-bottom: 1rem; }

/* Value Props intro reads as a full-width statement under the heading
   rather than a narrow lede, so let it fill the container. */
#value-props .section-intro { max-width: none; }

/* Two-column intro under the Value Props heading on desktop; the paragraphs
   stack on narrow viewports. Inherits the .section-intro type treatment. */
.value-intro-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md) var(--space-lg); /* row gap (stacked) / column gutter */
  margin-bottom: var(--space-lg);
}
.value-intro-cols p {
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--slate);
}
@media (max-width: 768px) {
  .value-intro-cols { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.container--narrow {
  max-width: 760px;
}

.section {
  padding-block: var(--space-xl);
}

.section--dark  { background: var(--navy);  color: var(--white); }
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4  { color: var(--white); }
.section--dark .section-intro { color: rgba(255,255,255,0.72); }

.section--mist  { background: var(--mist); }
.section--light { background: var(--white); }

/* Two same-colored sections in a row would otherwise stack their block
   padding into one oversized gap (the seam is invisible because the
   backgrounds match). Drop the second section's top padding so the break
   reads as a single section gap. */
.section--mist + .section--mist { padding-block-start: 0; }
.section--navy  { background: var(--navy); color: var(--white); }
.section--navy h1,
.section--navy h2  { color: var(--white); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.85em 2.2em;
  border-radius: 2px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.btn--outline {
  border: 1.5px solid rgba(255,255,255,0.5);
  color: var(--white);
}
.btn--outline:hover {
  border-color: var(--white);
  background: rgba(255,255,255,0.08);
}

/* On light sections the white-on-white outline is invisible; flip it to
   a navy outline + navy label so it reads on mist/light backgrounds. */
.section--mist .btn--outline,
.section--light .btn--outline {
  border-color: rgba(8, 28, 70, 0.35);
  color: var(--navy);
}
.section--mist .btn--outline:hover,
.section--light .btn--outline:hover {
  border-color: var(--navy);
  background: rgba(8, 28, 70, 0.05);
}

.btn--gold {
  background: var(--gold);
  color: var(--navy);
  border: 1.5px solid var(--gold);
}
.btn--gold:hover {
  background: transparent;
  color: var(--gold);
}

.btn--gold-outline {
  background: transparent;
  color: var(--gold);
  border: 1.5px solid var(--gold);
}
.btn--gold-outline:hover {
  background: var(--gold);
  color: var(--navy);
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
#main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  opacity: 1;
  pointer-events: auto;
  background: rgba(8, 28, 70, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  height: var(--nav-height);
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.nav-logo img { height: 24px; width: auto; }

/* Hamburger — the only nav control at every viewport size */
.nav-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  margin-left: auto;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.25s var(--ease-out), opacity 0.2s;
  transform-origin: center;
}

/* X state */
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Slide-out drawer — anchored to the right edge below the nav bar. Always
   in the layout (display: flex) but translated off-screen until the
   hamburger toggles .is-open, which slides it in via transform. Same
   behavior on desktop and mobile. */
.mobile-menu {
  position: fixed;
  top: var(--nav-height);
  right: 0;
  bottom: 0;
  width: clamp(280px, 32vw, 420px);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md) clamp(1.5rem, 3vw, 2.5rem) var(--space-lg);
  background: rgba(8, 28, 70, 0.98);
  border-left: 1px solid rgba(255,255,255,0.08);
  transform: translateX(100%);
  transition: transform 0.35s var(--ease-out);
  z-index: 99;
  overflow-y: auto;
}

.mobile-menu.is-open { transform: translateX(0); }

/* Backdrop that dims the rest of the page while the drawer is open.
   Sits behind the drawer (z 98) but in front of all page content. The
   nav (z 100) and drawer (z 99) both render above it, so they stay
   crisp while the page behind goes dim. Clicking the backdrop closes
   the drawer (wired up in main.js). */
.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out);
  z-index: 98;
}
.mobile-menu-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-nav-links li a {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: color 0.2s;
}

.mobile-nav-links li:last-child a { border-bottom: none; }

.mobile-nav-links a:hover,
.mobile-nav-links a[aria-current="page"] { color: var(--white); }

.mobile-nav-cta { align-self: flex-start; margin-top: var(--space-sm); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
#site-footer {
  background: var(--navy);
  color: rgba(255,255,255,0.7);
  position: relative;
}

.footer-inner {
  padding: var(--space-lg) clamp(1.25rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.footer-brand img { height: 22px; width: auto; margin-bottom: 0.5rem; }

.footer-tagline {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.45);
  max-width: none;
}

.footer-right {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
}

.footer-nav {
  display: flex;
  gap: var(--space-md);
}

.footer-nav a {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  transition: color 0.2s;
}

.footer-nav a:hover { color: var(--white); }

.footer-copy {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.04em;
  max-width: none;
  text-align: right;
}

/* Always-visible legal link bar (Privacy / Terms). Sits below the main
   footer row, which is hidden on mobile, so legal links stay reachable. */
.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.1rem clamp(1.25rem, 4vw, 3rem);
  display: flex;
  justify-content: center;
}

.footer-legal__links {
  display: flex;
  gap: var(--space-md);
}

.footer-legal__links a {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.2s;
}

.footer-legal__links a:hover { color: var(--white); }

.footer-bar {
  height: 5px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--blue) 55%, var(--gold) 100%);
}

/* --------------------------------------------------------------------------
   Legal / long-form content pages (Privacy Policy, Terms of Service)
   -------------------------------------------------------------------------- */
.legal-content {
  max-width: 760px;
  margin-inline: auto;
}

.legal-updated {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-md);
}

.legal-content h2 {
  font-size: 1.25rem;
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
  color: var(--navy);
}

.legal-content p,
.legal-content li {
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  color: var(--text);
}

.legal-content p { margin-bottom: var(--space-sm); }

.legal-content ul {
  margin: 0 0 var(--space-sm);
  padding-left: 1.25rem;
  list-style: disc;
}

.legal-content li { margin-bottom: 0.4rem; }

.legal-content a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-content a:hover { color: var(--navy); }

/* --------------------------------------------------------------------------
   Hero Sequence
   -------------------------------------------------------------------------- */
/* Homepage body background matches the post-hero section so there's no flash */
body.page-home { background: var(--navy); }

/* On the homepage the hero canvas covers the full viewport — including
   the area where the nav bar would normally sit. The nav stays in place
   so the hamburger remains accessible (and can open the slide-out
   drawer), but its background, blur, border, and logo are dropped so
   only the hamburger floats over the hero animation.

   When the hero finishes (scroll past the pinned section or the user
   clicks Skip), home-gsap.js adds .hero-passed to <body>, and the nav
   reverts to its default opaque/blurred appearance with the logo
   visible again. */
body.page-home:not(.hero-passed) #main-nav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
}
body.page-home:not(.hero-passed) .nav-logo { display: none; }

#main-nav { transition: background 0.35s ease, border-color 0.35s ease; }

#hero-sequence {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--black);
}

body.hero-fallback #hero-sequence,
body.hero-reduced-motion #hero-sequence,
body.hero-mobile-bypass #hero-sequence,
body.hero-intro-stored #hero-sequence {
  display: none;
}

/* Video layers */
.hero-video-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-video-layer video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#video-rubiks-wrap { z-index: 1; opacity: 0; }


/* Tile-grid scatter dissolve — container is just a positioning frame
   for the absolute-positioned tile divs that home-gsap.js generates
   and animates. Below text-overlay (25). */
#rubiks-tiles {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.rubiks-tile {
  position: absolute;
  opacity: 0;
  background-repeat: no-repeat;
  will-change: transform, opacity;
}

/* House SVG layer — sits above black-overlay (20), below text-overlay (25) */
#house-layer {
  position: absolute;
  inset: 0;
  z-index: 22;
  opacity: 0;
}

#house-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Individual SVG elements start hidden — GSAP reveals them in sequence */
#house-outline,
#house-chevron,
#window-divider,
#window-tl,
#window-tr,
#window-bl,
#window-br { opacity: 0; }

#house-outline { stroke: var(--gold); }

/* Black overlay */
#black-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: var(--black);
}

/* Text beats overlay */
#text-overlay {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.text-beat {
  position: absolute;
  opacity: 0;
  text-align: center;
  padding: 0 clamp(1.5rem, 8vw, 6rem);
  width: 100%;
  will-change: transform, opacity;
}

/* ----- Scrolling beats (1–5) -------------------------------------------
   Caret + text anchored to one side of the viewport. GSAP scrubs the
   whole beat's `y` from below the fold up past the top, giving the
   impression that the page is scrolling while the Rubik's cube plays in
   the center. No box, no border — just text with a soft drop-shadow for
   legibility over the busy cube frames. `yPercent: -50` (applied by JS)
   keeps the beat's vertical midline glued to the viewport center; the
   scrolling motion is layered on top via GSAP's `y`. */
.beat {
  position: absolute;
  top: 50%;
  opacity: 0;
  max-width: 36vw;
  pointer-events: none;
  will-change: transform, opacity;
}
.beat--left  { left:  clamp(1.5rem, 6vw, 5rem); text-align: left;  }
.beat--right { right: clamp(1.5rem, 6vw, 5rem); text-align: right; }

.beat__caret {
  display: block;
  width: clamp(48px, 5.2vw, 72px);
  margin-bottom: clamp(0.75rem, 1.6vw, 1.5rem);
}
.beat--right .beat__caret { margin-left: auto; }
.beat__caret svg     { display: block; width: 100%; height: auto; }
.beat__caret polygon { fill: var(--blue); }

.beat__text {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.6vw, 2.75rem);
  font-weight: 400;
  color: var(--white);
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-shadow:
    0 2px 14px rgba(0, 0, 0, 0.75),
    0 0 28px rgba(0, 0, 0, 0.55);
}
.beat__text--accent { color: var(--gold); font-style: normal; font-weight: 700; }

/* Logo beat is a flex column so both the SVG and the subtitle align to
   the same vertical axis (viewport center). Without this, the SVG was
   centered via margin-auto inside a 100%-width block but the subtitle
   <p> ended up offset because the parent .text-beat block's text-align
   centering doesn't apply uniformly to block children. */
.text-beat--logo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.text-beat--logo svg {
  display: block;
  width: clamp(240px, 40vw, 560px);
  height: auto;
}

/* Subtitle that appears under the logo, letter by letter. Each character
   is wrapped in a .char span by home-gsap.js; the spans start at
   opacity 0 and GSAP staggers them in. The parent <p> stays at
   opacity 1 — fade-out is driven by the logo beat's parent opacity
   tween so both leave together. The trailing 0.4em padding-left
   compensates for the trailing letter-spacing on the final character so
   the visible glyphs sit visually centered under the logo. */
.text-beat--subtagline {
  margin: clamp(1.25rem, 2.5vh, 2.5rem) 0 0 0;
  padding-left: 0.4em;
  font-family: var(--font-heading);
  font-size: clamp(0.9rem, 1.7vw, 1.25rem);
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--blue);
}
.text-beat--subtagline .char {
  display: inline-block;
  opacity: 0;
}

.text-beat--tagline {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5.5vw, 4rem);
  font-weight: 300;
  color: var(--white);
  letter-spacing: 0.08em;
  line-height: 1.15;
}

/* Loader — sits inside #hero-sequence so it covers only the working
   canvas (nav layer above remains untouched). home-gsap.js fades it
   out once critical assets are ready. Champagne Gold progress bar on
   black, centered horizontally and vertically within the hero. */
#page-loader {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.55s ease-out;
}
#page-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.page-loader__track {
  width: clamp(180px, 28vw, 320px);
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.page-loader__bar {
  width: 0%;
  height: 100%;
  background: var(--gold);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Lock body scroll while loader is visible (modern :has support). */
body:has(#page-loader:not(.is-hidden)) { overflow: hidden; }

/* Hero logo (Phase A) */
#hero-logo {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  padding: var(--nav-height) clamp(2rem, 10vw, 8rem) 0;
  /* Promote to a GPU compositing layer so the opacity fade-in doesn't
     re-rasterize the complex SVG each frame. Safari/Firefox otherwise
     repaint the SVG paths on every tween tick, which janks the fade. */
  will-change: transform, opacity;
}

#hero-logo svg {
  width: clamp(220px, 38vw, 520px);
  height: auto;
  overflow: visible; /* lets #logo-caret animate outside SVG bounds */
}


/* Logo color overrides for dark background */
#hero-logo .logo-body,
.text-beat--logo .logo-body { fill: #ffffff; }

#hero-logo .logo-accent,
.text-beat--logo .logo-accent { fill: #5280ba; }

/* Skip button */
#hero-skip {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  z-index: 40;
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  padding: 0.5em 1em;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 2px;
  transition: color 0.2s, border-color 0.2s;
}

#hero-skip:hover {
  color: rgba(255,255,255,0.8);
  border-color: rgba(255,255,255,0.5);
}

/* Replay Intro — sits bottom-right of the platform banner (the homepage
   "header" once the intro is dismissed). Styled to match #hero-skip on the
   dark banner, with a leading refresh icon. */
#replay-intro {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  background: transparent;
  cursor: pointer;
  padding: 0.5em 1em;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 2px;
  transition: color 0.2s, border-color 0.2s;
}

#replay-intro:hover {
  color: rgba(255,255,255,0.8);
  border-color: rgba(255,255,255,0.5);
}

#replay-intro .ti { font-size: 0.95rem; }

/* The intro never plays on mobile or for reduced-motion users (home-gsap.js
   bypasses it), so the replay control would be a dead button there — hide it. */
@media (max-width: 768px) {
  #replay-intro { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #replay-intro { display: none; }
}

/* --------------------------------------------------------------------------
   Homepage — Pillar Section
   -------------------------------------------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.pillar {
  padding: var(--space-md);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  position: relative;
}

.pillar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gold);
}

.pillar-label {
  font-family: var(--font-heading);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blue);
  display: block;
  margin-bottom: 0.5rem;
}

.pillar h3 { color: var(--white); margin-bottom: 0.75rem; }
.pillar p  { color: rgba(255,255,255,0.65); font-size: 0.9rem; }
.pillar p + p { margin-top: 0.85rem; }

/* Platform Overview sits on the mist background, so its pillars switch
   to a white card on light, with navy heading and slate body to match
   the Value Props grid further down. The gold top bar stays as the
   shared accent. */
#platform-overview .pillar {
  background: var(--white);
  border-color: rgba(8, 28, 70, 0.08);
  box-shadow: 0 2px 12px rgba(8, 28, 70, 0.06);
}
#platform-overview .pillar h3 { color: var(--navy); }
#platform-overview .pillar p  { color: var(--slate); }

/* Platform Overview hero: the cubes-and-lines artwork is a full-bleed,
   full-width background behind the lead only (heading, intro, CTA). The
   section's top padding is dropped so the hero sits flush, and the hero has
   no bottom gap — the artwork runs straight down to the Available Solutions
   list below it. A light mist scrim keeps the navy/slate text legible over
   the blue line art. */
#platform-overview { padding-top: 0; }

.platform-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(420px, 56vh, 620px);
  background-color: var(--navy);
  background-image: url("/assets/media/square-lines-bg.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding-block: var(--space-lg);
  /* Full-viewport-width hairline at the base of the dark hero. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.platform-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* Hero content occupies the left half; the right half is left open for the
   busier side of the artwork. */
.platform-banner__lead {
  max-width: 50%;
}
.platform-banner__lead .btn { margin-top: 2rem; }
/* Lead copy is a set of short, deliberately separate statements — give each
   paragraph breathing room so they don't read as one cramped block. */
.platform-banner__lead p + p { margin-top: 0.9rem; }

/* The square-lines artwork carries its own dark field, so the hero content
   sits on dark — render it white. (Available Solutions below stays on mist.) */
.platform-banner__lead .eyebrow { color: var(--white); }
.platform-banner__lead h2       { color: var(--white); }
.platform-banner__lead p        { color: rgba(255, 255, 255, 0.82); }

/* Outline CTA: the .section--mist rule turns it navy; on the dark hero put
   the white-on-dark treatment back. */
.platform-banner .btn--outline {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--white);
}
.platform-banner .btn--outline:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.12);
}

/* On narrow viewports the left-half constraint would crush the copy, so let
   the lead span the full width. */
@media (max-width: 900px) {
  .platform-banner__lead { max-width: 100%; }
}

/* Available Solutions sits directly beneath the hero; the full-width hero
   border replaces the band's own container-width hairline. */
#platform-overview .solutions-band {
  margin-top: 0;
  border-top: none;
}

/* When the pinned hero is skipped or bypassed (mobile / reduced-motion /
   fallback), #platform-overview becomes the first section sitting under the
   fixed nav. Add top clearance so the floating header doesn't cover the
   eyebrow and heading. The artwork still fills this padding. The normal
   desktop scroll keeps the tighter symmetric padding above. */
body.hero-hidden .platform-banner {
  padding-top: calc(var(--nav-height) + var(--space-lg));
}

/* --------------------------------------------------------------------------
   Homepage — Solution Cards (flip)   [client revisions 2026-06-16]
   Four equal-height category cards on the mist band below the hero. The front
   shows the category + a short sentence; clicking flips the card in 3D to the
   back, which lists that category's solutions. The front stays clean white;
   the navy back carries the hero artwork (assets/media/square-lines-bg.svg),
   re-cropped and scaled (a small card-sized slice vs the hero's wide banner)
   so it reads as part of the hero family without duplicating that exact frame.
   (The artwork is navy-baked, so it can't sit faintly on a white card without
   greying it — hence it lives on the back only.)

   Equal height without fixed sizing: each card stretches to the grid row
   (align-items: stretch), and the inner stacks both faces in one grid cell
   (grid-area 1/1) so the card's intrinsic height is the taller face. Flip +
   a11y wiring live in main.js (data-flip-card).
   -------------------------------------------------------------------------- */
.solutions-cards { margin-top: var(--space-xl); }

.solutions-cards__head {
  max-width: 56ch;
  margin-bottom: var(--space-lg);
}
.solutions-cards__title {
  color: var(--navy);
  margin-bottom: 0; /* divider supplies the gap, matching the other section heads */
}
.solutions-cards__sub {
  color: var(--slate);
  font-size: 1.05rem;
  font-weight: 300;
}

.solution-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  align-items: stretch; /* all cards share the tallest card's height */
}

/* Static card: category + solutions list over the square-lines artwork, capped
   with a Learn more link. (No longer a flip card — the former "back" face is
   now the permanent face.) The artwork is already navy + blue line art; a light
   navy veil only keeps the white list legible. */
.solution-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 250px;
  padding: 1.75rem 1.5rem;
  border-top: 3px solid var(--gold);
  border-radius: 6px;
  overflow: hidden;
  background-color: var(--navy);
  background-image:
    linear-gradient(rgba(8, 28, 70, 0.42), rgba(8, 28, 70, 0.66)),
    url("/assets/media/square-lines-bg.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: center, right center;
  background-size: cover, cover;
  box-shadow: 0 2px 12px rgba(8, 28, 70, 0.06);
  transition: box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.solution-card:hover {
  box-shadow: 0 10px 28px rgba(8, 28, 70, 0.14);
  transform: translateY(-3px);
}

.solution-card__head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.25rem;
}
.solution-card__icon {
  font-size: 1.15rem;
  line-height: 1;
  color: var(--gold);
}
.solution-card__icon i { display: block; }
.solution-card__title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--white);
}

.solution-card__list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0.5rem 0 0;
  padding: 0;
}
.solution-card__list-item {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.86);
}
.solution-card__list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--gold);
  border-radius: 50%;
}

.solution-card__link {
  margin-top: auto;
  padding-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  transition: color 0.2s var(--ease-out);
}
.solution-card__link:hover { color: var(--white); }

@media (max-width: 900px) {
  .solution-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .solution-cards { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Homepage — Value Grid
   -------------------------------------------------------------------------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
}

.value-item {
  padding: var(--space-md);
  background: var(--white);
  border-radius: 4px;
  border-left: 3px solid var(--gold);
  box-shadow: 0 2px 12px rgba(8,28,70,0.06);
}

.value-item h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 0.5rem;
  letter-spacing: 0.04em;
}

.value-item p { font-size: 0.9rem; color: var(--slate); }

/* --------------------------------------------------------------------------
   Interior Pages
   -------------------------------------------------------------------------- */
.page-hero {
  padding-block: var(--space-xl);
  padding-top: calc(var(--nav-height) + var(--space-xl));
}

/* Interior page heroes echo the homepage Platform Overview hero: the navy
   square-lines artwork field with white copy and a gold eyebrow accent. */
.page-hero--artwork {
  background-color: var(--navy);
  background-image: url("/assets/media/square-lines-bg.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: var(--white);
  /* Full-width hairline at the base, matching the homepage hero. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.page-hero--artwork h1       { color: var(--white); }
.page-hero--artwork .eyebrow { color: var(--gold); }

/* Short standfirst line sitting between the divider and the muted body
   copy. Heading font + medium weight so it reads as a deck, not body. */
.page-hero__lead {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 500;
  color: var(--white);
  margin-top: 1rem;
}

.page-hero__intro {
  font-size: 1.15rem;
  font-weight: 300;
  color: rgba(255,255,255,0.72);
  max-width: 56ch;
  margin-top: 1rem;
}

/* Interior pages get the nav fully visible immediately */

.placeholder-note {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--space-lg);
  text-align: center;
  border: 1px dashed rgba(8,28,70,0.15);
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Split Feature (image + text, used on platform/homepage)
   -------------------------------------------------------------------------- */
.split-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin-bottom: var(--space-lg);
}

.split-feature--reverse .split-feature__text { order: 2; }
.split-feature--reverse .split-feature__media { order: 1; }

.split-feature__text p + p { margin-top: 1rem; }

.solutions-band {
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(8, 28, 70, 0.08);
}
.solutions-band__label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.25rem;
}
.solutions-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.solutions-list--band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem 1.75rem;
}
.solutions-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.95rem;
  line-height: 1.4;
}
.solutions-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--gold);
  border-radius: 50%;
}

.split-feature__media img {
  width: 100%;
  height: auto;
}

.rounded-img {
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Pillar enhancements (icons)
   -------------------------------------------------------------------------- */
.pillar-icon {
  font-size: 2rem;
  color: var(--gold);
  margin-bottom: 0.75rem;
  display: block;
}

/* --------------------------------------------------------------------------
   Slate sections (also used by stats strip)
   -------------------------------------------------------------------------- */
.section--slate { background: var(--slate); color: var(--white); }
.section--slate h1,
.section--slate h2,
.section--slate h3,
.section--slate h4         { color: var(--white); }
.section--slate .eyebrow   { color: var(--gold); }
.section--slate .section-intro { color: rgba(255,255,255,0.72); }

/* --------------------------------------------------------------------------
   Value item icon
   -------------------------------------------------------------------------- */
.value-icon {
  font-size: 1.6rem;
  color: var(--blue);
  margin-bottom: 0.6rem;
  display: block;
}

/* --------------------------------------------------------------------------
   CTA block
   -------------------------------------------------------------------------- */
.cta-block {
  text-align: center;
}

.cta-block h2 { color: var(--white); margin-bottom: 1rem; }
.cta-block .section-intro { margin-inline: auto; }

/* The white heading above is tuned for dark CTA backgrounds (slate,
   cta-canvas). On a light mist CTA — e.g. the platform page — it would be
   invisible, so restore dark text there. */
.section--mist .cta-block h2 { color: var(--navy); }

.cta-icon {
  font-size: 2.5rem;
  color: var(--gold);
  margin-bottom: 1rem;
  display: block;
}

/* --------------------------------------------------------------------------
   CTA canvas — video-backed section with WebGL glitch on hover
   -------------------------------------------------------------------------- */
.section--cta-canvas {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--black);
  color: var(--white);
  /* Symmetric vertical padding so the first line ("Ready For") and the
     button ("Get Connected") sit an equal distance from the section edges. */
  padding-top:    clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section--cta-canvas h1,
.section--cta-canvas h2,
.section--cta-canvas h3,
.section--cta-canvas h4 { color: var(--white); }
.section--cta-canvas .eyebrow      { color: var(--gold); }
.section--cta-canvas .section-intro { color: rgba(255,255,255,0.78); }

/* Full-section background video (replaces the former glitch bubble). The
   <video> covers the entire CTA section; a dark gradient overlay sits above
   it to keep the heading, copy, and button legible over the moving cubes. */
.cta-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.cta-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.64) 100%);
}

.cta-canvas-content {
  position: relative;
  z-index: 2;
}
.cta-canvas-content h2 {
  /* Stacked heading: small lead ("Ready For") over large strong ("A Change?").
     fit-content keeps the heading box to the actual text width so it stays
     centered cleanly. */
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.cta-canvas-content .cta-heading__lead {
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  font-weight: 300;
  letter-spacing: 0.32em;
  margin: 0.45em 0;
  color: rgba(255, 255, 255, 0.9);
}
.cta-canvas-content .cta-heading__lead--inline {
  margin: 0;
}
.cta-canvas-content .cta-heading__strong {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5.1vw, 3.8rem);
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* "── the ──" line: a flex row centering the word between two gold rules. */
.cta-canvas-content .cta-heading__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  width: 100%;
  margin: 0.35em 0;
}
.cta-canvas-content .cta-heading__rule {
  flex: 1 1 0;
  max-width: 5rem;
  height: 1px;
  background: var(--gold);
}
.cta-canvas-content h2,
.cta-canvas-content .section-intro {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}
.cta-canvas-content .section-intro {
  margin-bottom: 1.75rem;
}

@media (prefers-reduced-motion: reduce) {
  /* Don't autoplay motion for these users — hide the looping video and fall
     back to a static poster frame as the section background. */
  .cta-bg-video { display: none; }
  .section--cta-canvas {
    background-image: url("/assets/media/casiva-cta-cubes-poster.jpg");
    background-size: cover;
    background-position: center;
  }
}

/* --------------------------------------------------------------------------
   Two-col list (used on platform page)
   -------------------------------------------------------------------------- */
.two-col-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-md);
}

.list-group-label {
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.6rem;
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--slate);
  line-height: 1.4;
}

.check-list li .ti {
  color: var(--gold);
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 0.1em;
}

.check-list--navy li { color: var(--navy); }

/* --------------------------------------------------------------------------
   Revenue grid (platform page)
   -------------------------------------------------------------------------- */
.revenue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.revenue-card {
  padding: var(--space-md);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
}

.revenue-icon {
  font-size: 1.8rem;
  color: var(--gold);
  margin-bottom: 0.75rem;
  display: block;
}

.revenue-card h4 { color: var(--white); margin-bottom: 0.5rem; }
.revenue-card p  { color: rgba(255,255,255,0.65); font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   Services grid
   -------------------------------------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

.service-card {
  background: var(--white);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(8,28,70,0.08);
  display: flex;
  flex-direction: column;
}

/* AI Operating Layer — full-width banner */
.service-banner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  background: var(--white);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(8,28,70,0.08);
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
}

.service-banner__img {
  min-height: 100%;
}

.service-banner__img img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

.service-banner__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
}

.service-banner__body h3 { margin-bottom: 0.75rem; }
.service-banner__body p  { color: var(--slate); font-size: 0.95rem; margin-bottom: 1rem; }

.feature-list--banner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem 1.5rem;
  margin-top: 0;
}

.service-card--featured {
  border: 2px solid var(--blue);
}

.service-card__img img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.service-card__body {
  padding: var(--space-md);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.service-icon {
  font-size: 2rem;
  color: var(--blue);
  margin-bottom: 0.75rem;
  display: block;
}

.service-card h3 { margin-bottom: 0.75rem; }
.service-card p  { color: var(--slate); font-size: 0.92rem; margin-bottom: 1rem; }

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: auto;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--slate);
}

.feature-list li .ti {
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 0.15em;
}

.pull-quote {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--blue);
  border-left: 3px solid var(--gold);
  padding-left: 1rem;
  margin-top: 1.25rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Comparison grid (services page)
   -------------------------------------------------------------------------- */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.compare-card {
  padding: var(--space-md);
  border-radius: 4px;
  border: 1px solid #dde3ed;
  background: var(--white);
}

.compare-card--featured {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.compare-card--featured h4 { color: var(--white); }
.compare-card--featured p  { color: rgba(255,255,255,0.72); font-size: 0.88rem; }

.compare-icon {
  font-size: 1.6rem;
  margin-bottom: 0.6rem;
  display: block;
}

.compare-icon--no  { color: var(--muted); }
.compare-icon--yes { color: var(--gold); }

.compare-card--alt h4 { color: var(--slate); }
.compare-card--alt p  { color: var(--muted); font-size: 0.88rem; }

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */
.contact-layout {
  /* Single, horizontally centered form column (info column removed). */
  max-width: 640px;
  margin-inline: auto;
}

/* Form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: var(--space-md);
}

.form-row--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Honeypot — pushed off-screen so real users never see it, but bots that
   blindly fill every field still populate it (mail.php rejects those). */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-group label {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}

.form-group input,
.form-group select,
.form-group textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--text);
  background: var(--white);
  border: 1.5px solid #d0d9e8;
  border-radius: 3px;
  padding: 0.7em 0.9em;
  width: 100%;
  transition: border-color 0.2s;
  appearance: none;
  -webkit-appearance: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--blue);
}

.form-group textarea { resize: vertical; min-height: 120px; }

/* Contact sidebar */
.contact-info__img { margin-bottom: var(--space-md); }
.contact-info__img img { width: 100%; border-radius: 6px; }

.contact-info__details { margin-bottom: var(--space-md); }
.contact-info__details h3 { margin-bottom: 1rem; }

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.contact-list .ti {
  font-size: 1.3rem;
  color: var(--blue);
  flex-shrink: 0;
  margin-top: 0.1em;
}

.contact-list__label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.2rem;
}

.contact-list a {
  color: var(--navy);
  font-weight: 400;
  transition: color 0.2s;
}
.contact-list a:hover { color: var(--blue); }

.contact-info__reasons h4 { margin-bottom: 0.75rem; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .split-feature,
  .split-feature--reverse .split-feature__text,
  .split-feature--reverse .split-feature__media {
    grid-template-columns: 1fr;
    order: unset;
  }

  .split-feature--reverse .split-feature__text { order: 1; }
  .split-feature--reverse .split-feature__media { order: 2; }

  .services-grid { grid-template-columns: 1fr; }

  .service-banner { grid-template-columns: 1fr; }
  .feature-list--banner { grid-template-columns: 1fr; }

  .two-col-list { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .solutions-list--band { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .solutions-list--band { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 380px) {
  .solutions-list--band { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  /* Footer: stack everything into one centered column. The old layout hid
     .footer-right entirely on mobile — which dropped the Home/Contact nav AND
     the copyright, leaving just a left-stranded logo with huge padding. Re-show
     them, center the column, and tighten the block padding. Privacy/Terms keep
     their own bar (.footer-legal) below. */
  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-sm);
    padding-block: var(--space-md);
  }
  /* The logo is a block element (global img reset), so text-align can't center
     it — it would sit at the left edge of the brand group while the wider
     tagline text centers, making the wordmark look off-center. Center both as a
     flex column. */
  .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer-right {
    margin-left: 0;
    align-items: center;
    gap: 0.85rem;
  }
  .footer-nav { justify-content: center; }
  .footer-copy { text-align: center; }

  #hero-skip { display: none; }

  .form-row--2col { grid-template-columns: 1fr; }

  /* Mobile vertical rhythm. The desktop spacing scale (--space-xl = 7rem) is
     tuned for wide viewports; left unchanged it stacks into far too much empty
     space on phones. Most visible on the Platform Overview / "One System to
     Scale Your Agency" band, where a 7rem section pad + 7rem gap above the
     heading + 4rem gap above the cards pile up. Tighten the big vertical gaps
     site-wide here. */
  .section { padding-block: var(--space-lg); }              /* 7rem → 4rem */
  .solutions-cards { margin-top: var(--space-lg); }         /* 7rem → 4rem */
  .solutions-cards__head { margin-bottom: var(--space-md); } /* 4rem → 2rem */
}