/* ==========================================================================
   Fides Global — stylesheet
   Colour system: Deep Navy / Azure Blue / Sky Blue (approved palette)
   ========================================================================== */

:root {
  --navy: #071b36;
  --navy-deep: #0b1f3b;
  --navy2: #0b2548;
  --blue: #2563eb;
  --blue2: #1478ff;
  --sky: #60a5fa;
  --ink: #0b203c;
  --muted: #64748b;
  --line: #dce7f3;
  --pale: #f3f7fc;
  --off: #f8fafc;
  --white: #fff;

  --header-h: 84px;
  --content-max: 1440px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Montserrat, Arial, sans-serif;
  color: var(--ink);
  background: var(--off);
}
section[id] { scroll-margin-top: var(--header-h); }

.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--navy);
  color: #fff;
  padding: 12px 18px;
  border-radius: 6px;
  z-index: 100;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

a { color: inherit; }
:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 3px;
  border-radius: 2px;
}

.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .24em; color: var(--blue); margin: 0 0 28px; }
.eyebrow.light { color: #7fb3ff; }

/* ==========================================================================
   Header / navigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(6, 22, 46, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.header-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  height: var(--header-h);
  padding: 0 7vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
/* The source mark PNG carries ~12% transparent padding around the glyph
   (preserved from the master artwork, not trimmed further here), so the
   display box is sized up slightly to keep the visible ribbon reading at
   true icon weight next to the wordmark. */
.brand-mark { width: 42px; height: 42px; object-fit: contain; display: block; }
.brand-text { display: flex; flex-direction: column; justify-content: center; line-height: 1; color: #fff; }
.brand-text strong { font-size: 17px; font-weight: 800; letter-spacing: .04em; }
.brand-text em { font-style: normal; font-size: 9.5px; font-weight: 600; letter-spacing: .28em; color: #a9c2e8; margin-top: 4px; }

.nav {
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav a {
  color: #e6edf7;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
}
.nav a:hover { color: #fff; }
.nav-cta {
  background: var(--blue);
  color: #fff !important;
  padding: 10px 20px;
  border-radius: 30px;
  font-weight: 600 !important;
}
.nav-cta:hover { background: var(--blue2); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  margin: 0 auto;
  transition: transform .2s ease, opacity .2s ease;
}
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #071b36 0%, #0b2548 55%, #0c2c5c 100%);
  padding: 90px 7vw 0;
}
.hero-inner {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-bottom: 86px;
}
/* Atmospheric light motif: a broad, soft illumination emerging from the
   upper-right of the hero, as if lit from behind the navy surface rather
   than a drawn graphic. Kept inside hero-inner's own box (z-index -1) so it
   never bleeds into the photo strip below. */
.hero-inner::before {
  content: "";
  position: absolute;
  inset: -14% -8% 0 10%;
  z-index: -1;
  background:
    radial-gradient(62% 72% at 78% 14%, rgba(96, 165, 250, .30), rgba(96, 165, 250, 0) 68%),
    radial-gradient(52% 88% at 90% 52%, rgba(37, 99, 235, .18), rgba(37, 99, 235, 0) 72%),
    linear-gradient(118deg, rgba(255, 255, 255, 0) 36%, rgba(140, 198, 255, .07) 54%, rgba(255, 255, 255, 0) 70%);
}
.hero h1 {
  margin: 0;
  color: #fff;
  font-weight: 600;
  font-size: 84px;
  line-height: 1.04;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.hero h1 .accent { color: var(--sky); }
.hero-sub {
  margin: 26px 0 0;
  max-width: 480px;
  font-size: 19px;
  line-height: 1.7;
  color: #c9d7e7;
}
.hero-ctas { display: flex; gap: 16px; margin-top: 44px; flex-wrap: wrap; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue2); }
.btn-outline { border-color: rgba(255, 255, 255, .35); color: #fff; }
.btn-outline:hover { border-color: #fff; }

.hero-strip {
  display: grid;
  grid-template-columns: 683fr 370fr 481fr;
  max-width: var(--content-max);
  margin: 0 auto;
}
.hero-strip figure { margin: 0; overflow: hidden; height: 300px; }
.hero-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   Intro
   ========================================================================== */

.intro {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 110px 7vw 90px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 10vw;
  align-items: start;
}
.intro h2, .model h2, .contact h2 {
  font-size: 56px;
  line-height: 1.07;
  font-weight: 400;
  letter-spacing: -.045em;
  margin: 0;
}
.intro > div:last-child { padding-top: 38px; }
.intro p:not(.eyebrow) { font-size: 18px; line-height: 1.9; color: var(--muted); margin: 0 0 22px; }
.intro .location { font-size: 14px !important; font-weight: 600; color: var(--ink) !important; }

/* ==========================================================================
   Services — three full-bleed territories, not cards. The section breaks
   out of the page's content-max container entirely (edge-to-edge) so the
   three capabilities read as one continuous architectural band rather than
   three boxes sitting on the page. Tone deepens left-to-right (white → azure
   → navy) so the strip itself carries a light-to-dark narrative.
   ========================================================================== */

.services {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.pillar {
  position: relative;
  overflow: hidden;
  min-height: 610px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 64px 7vw 56px 3.2vw;
}
@media (min-width: 1680px) { .pillar { padding-left: 56px; padding-right: 56px; } }

.pillar-grow { background: linear-gradient(180deg, #ffffff 0%, #eef5ff 100%); color: var(--ink); }
.pillar-automate { background: linear-gradient(180deg, #4d86f5 0%, #15337e 100%); color: #fff; }
.pillar-operate { background: linear-gradient(180deg, #132a52 0%, #04070f 100%); color: #fff; }

.pillar-motif {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: transform .45s ease;
}
.pillar:hover .pillar-motif { transform: translate(5px, -5px); }

/* GROW — a single wedge of light rising toward the top-right corner. */
.pillar-grow .pillar-motif {
  background: linear-gradient(135deg, rgba(37, 99, 235, .07), rgba(96, 165, 250, .18));
  clip-path: polygon(26% 100%, 100% 0%, 100% 70%);
}
/* AUTOMATE — the bolt geometry traced large, as a translucent field rather
   than a small pictogram. Coordinates mirror the small icon's path so the
   two read as the same mark at different scales. */
.pillar-automate .pillar-motif {
  background: linear-gradient(160deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .04));
  clip-path: polygon(54.7% 4%, 18% 54.7%, 40% 54.7%, 32% 97%, 84% 36%, 51% 36%);
}
/* OPERATE — partial orbit rings bleeding off the upper-right corner. */
.pillar-operate .pillar-motif {
  background:
    repeating-radial-gradient(circle at 82% 16%,
      transparent 0 64px,
      rgba(96, 165, 250, .16) 65px 67px,
      transparent 68px 118px,
      rgba(37, 99, 235, .14) 119px 121px,
      transparent 122px 999px);
}

.pillar-content { position: relative; z-index: 1; max-width: 380px; }
.pillar h3 {
  font-size: clamp(36px, 3.9vw, 60px);
  line-height: .95;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 22px;
  white-space: nowrap;
}
.pillar-content p { font-size: 16px; line-height: 1.7; margin: 0 0 26px; max-width: 300px; }
.pillar-grow .pillar-content p { color: var(--muted); }
.pillar-automate .pillar-content p,
.pillar-operate .pillar-content p { color: rgba(255, 255, 255, .8); }

.pillar ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.pillar li { font-size: 14px; line-height: 1.4; letter-spacing: .01em; padding-left: 15px; position: relative; }
.pillar li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}
.pillar-grow li { color: #42566f; }
.pillar-automate li, .pillar-operate li { color: rgba(255, 255, 255, .76); }

/* ==========================================================================
   Statement
   ========================================================================== */

.statement {
  background: linear-gradient(115deg, #061a34 0%, #0b2d5b 100%);
  color: #fff;
  padding: 120px 7vw;
}
.statement > * { max-width: var(--content-max); margin-left: auto; margin-right: auto; }
.statement {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 9vw;
  align-items: center;
}
.statement-copy h2 { font-size: 54px; line-height: 1.08; font-weight: 400; letter-spacing: -.045em; margin: 0; }
.statement-copy h2 span { color: #64a6ff; }
.statement-copy > p:last-child { font-size: 17px; line-height: 1.85; color: #c9d7e7; margin: 34px 0 0; max-width: 680px; }

.principles { display: grid; gap: 0; border-left: 1px solid rgba(255, 255, 255, .16); }
.principles > div { padding: 25px 0 25px 34px; border-bottom: 1px solid rgba(255, 255, 255, .14); position: relative; }
.principles > div:last-child { border-bottom: 0; }
.principles h4 { font-size: 21px; margin: 0 0 9px; }
.principles p { margin: 0; color: #aebfd3; line-height: 1.65; font-size: 14px; }
.mini-icon-svg {
  position: absolute;
  right: 0;
  top: 22px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 50%;
  border: 1px solid rgba(96, 165, 250, .4);
}

/* ==========================================================================
   Our Model — one large orbital system occupying most of the section rather
   than a diagram boxed into a right-hand column. The circle is oversized
   and deliberately cropped by the section's own edge; the four stage nodes
   trace its visible left arc, bridging the typography and the graphic into
   a single composition instead of two columns.
   ========================================================================== */

.model {
  position: relative;
  overflow: hidden;
  min-height: 840px;
  background: linear-gradient(180deg, #f9fbfd 0%, #eef4fb 100%);
}

.model-copy {
  position: relative;
  z-index: 2;
  max-width: 440px;
  padding: 130px 0 0 7vw;
}
.model-copy p { max-width: 380px; color: var(--muted); line-height: 1.8; margin-top: 30px; }

.orbit-stage { position: absolute; inset: 0; z-index: 1; }

/* The orbit itself: oversized, bled off the right edge of the viewport.
   `.model`'s own overflow:hidden contains the bleed so it can never cause
   page-level horizontal scroll. */
.orbit {
  position: absolute;
  right: -16%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(560px, 46vw, 820px);
  height: clamp(560px, 46vw, 820px);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 36%, #123a74 0%, #0b2548 46%, #060f22 100%);
  box-shadow: 0 60px 140px rgba(6, 20, 40, .28);
}
.orbit-ring { position: absolute; border-radius: 50%; pointer-events: none; }
.orbit-ring--outer { inset: 6%; border: 1px solid rgba(96, 165, 250, .14); }
.orbit-ring--inner { inset: 19%; border: 1px solid rgba(96, 165, 250, .24); }

.orbit-core {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 21%;
  height: 21%;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #1a4fc4, #061329 74%);
  box-shadow: 0 0 0 14px rgba(37, 99, 235, .07), 0 24px 56px rgba(4, 12, 26, .5);
  display: grid;
  place-items: center;
}
.orbit-core img { width: 42%; height: 42%; object-fit: contain; filter: brightness(1.2); }

/* The four stages are anchored to four points along the orbit's visible
   left arc (computed from the circle's actual centre/radius, not a column
   of text beside it) — each node's dot sits ON the circumference, with its
   label extending outward into the open space. Understand/Improve sit
   nearer the circle's vertical centre; Design/Deliver sit out at the
   circle's true leftmost point — together tracing a gentle arc that
   mirrors the orbit itself, reading top-to-bottom as one continuous path. */
.orbit-nodes {
  position: absolute;
  inset: 0;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 0;
}
.node {
  position: absolute;
  width: 270px;
  text-align: right;
  padding-right: 40px;
  transform: translate(-100%, -50%);
}
.n1 { left: 80%; top: 18%; }
.n2 { left: 71%; top: 40%; }
.n3 { left: 71%; top: 60%; }
.n4 { left: 80%; top: 82%; }

.node-dot {
  position: absolute;
  right: 0; top: 7px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, .5), 0 0 0 7px rgba(37, 99, 235, .10);
}
.node::after {
  content: "";
  position: absolute;
  right: -2px; top: 11px;
  width: 20px; height: 1px;
  background: linear-gradient(90deg, rgba(37, 99, 235, .6), rgba(37, 99, 235, 0));
}
.node h3 { font-size: 21px; margin: 0 0 7px; color: var(--ink); }
.node p { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0 0 0 auto; max-width: 225px; }

/* Small-screen fallback: a compact seal + vertical flow, replacing the
   oversized orbit entirely rather than shrinking it illegibly. */
.orbit-seal { display: none; }
.cycle-list {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cycle-list li {
  position: relative;
  padding: 0 0 32px 30px;
  border-left: 2px solid var(--line);
}
.cycle-list li:last-child { padding-bottom: 0; }
.cycle-list li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 5px #e7f1ff;
}
.cycle-list h3 { font-size: 18px; margin: 0 0 6px; }
.cycle-list p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; }

/* ==========================================================================
   Insights
   ========================================================================== */

.insights {
  position: relative;
  overflow: hidden;
  padding: 115px 7vw;
  background: linear-gradient(175deg, #ffffff 0%, #f9fbfe 55%, #f4f8fd 100%);
}
/* Very restrained echo of the hero's light motif — just enough to keep this
   section from going visually flat after the Model section's depth. */
.insights::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(42% 60% at 92% 0%, rgba(37, 99, 235, .05), transparent 65%);
}
.insights > * { position: relative; z-index: 1; max-width: var(--content-max); margin-left: auto; margin-right: auto; }
.insights-head { display: grid; grid-template-columns: 1fr .8fr; gap: 10vw; align-items: end; margin-bottom: 55px; padding-bottom: 42px; border-bottom: 1px solid var(--line); }
.insights h2 { font-size: 50px; line-height: 1.08; font-weight: 400; letter-spacing: -.04em; margin: 0; }
.insights-head p { color: var(--muted); line-height: 1.8; }

/* Editorial hierarchy: one dominant lead piece beside two subordinate
   items, rather than three equal cards. The arc motif is Insights' own
   signature — distinct from Services' clipped wedges and the Model's
   filled orbit — a thin cropped ring suggesting perspective/viewpoint. */
.insight-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3vw; align-items: stretch; }

.insight-featured {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 56px 52px;
  min-height: 440px;
  background: linear-gradient(160deg, #f8fbff 0%, #eef5ff 100%);
  border: 1px solid #e3eaf2;
  transition: box-shadow .35s ease;
}
.insight-featured:hover { box-shadow: 0 26px 60px rgba(19, 52, 90, .1); }
.insight-arc {
  position: absolute;
  top: -230px; right: -230px;
  width: 480px; height: 480px;
  border-radius: 50%;
  border: 1px solid rgba(37, 99, 235, .16);
  transition: transform .45s ease;
}
.insight-arc::before {
  content: "";
  position: absolute;
  inset: 36px;
  border-radius: 50%;
  border: 1px solid rgba(96, 165, 250, .22);
}
.insight-featured:hover .insight-arc { transform: translate(-5px, 5px); }
.insight-featured span { position: relative; font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--blue); }
.insight-featured h3 {
  position: relative;
  font-size: clamp(30px, 2.9vw, 42px);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 18px 0 16px;
  max-width: 460px;
}
.insight-featured p { position: relative; font-size: 16px; line-height: 1.75; color: var(--muted); max-width: 420px; margin: 0; }

.insight-secondary { display: flex; flex-direction: column; }
.insight-secondary article { padding: 32px 0; border-bottom: 1px solid var(--line); }
.insight-secondary article:first-child { padding-top: 0; }
.insight-secondary article:last-child { border-bottom: 0; padding-bottom: 0; }
.insight-secondary span { font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--blue); }
.insight-secondary h3 { font-size: 20px; line-height: 1.35; margin: 12px 0 10px; letter-spacing: -.01em; }
.insight-secondary p { font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0; }

/* ==========================================================================
   Contact
   ========================================================================== */

.contact {
  padding: 110px 7vw;
  background: #eaf2fb;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 10vw;
  align-items: end;
}
.contact > * { max-width: calc(var(--content-max) / 2); }
.contact-copy p { font-size: 16px; line-height: 1.8; color: var(--muted); }
.contact a { display: inline-block; margin: 24px 0 18px; font-size: 18px; color: var(--blue); text-decoration: none; font-weight: 600; }
.contact .small { font-size: 12px; }
.contact h2 { font-size: 52px; }

/* ==========================================================================
   Footer
   ========================================================================== */

footer {
  background: #06172e;
  color: #fff;
  padding: 32px 7vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.footer-brand { position: relative; display: flex; align-items: center; gap: 11px; text-decoration: none; color: #fff; }
/* The mark's darker navy half sits very close in value to the footer
   background, so a soft, tightly-localised glow behind it restores
   separation without touching the artwork or boxing it in. */
.footer-brand::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  width: 56px;
  height: 56px;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(37, 99, 235, .35), rgba(37, 99, 235, 0) 72%);
  filter: blur(7px);
  z-index: 0;
}
.footer-brand img { position: relative; z-index: 1; width: 30px; height: 30px; object-fit: contain; }
.footer-brand span { position: relative; z-index: 1; font-size: 16px; font-weight: 700; letter-spacing: .2em; }
.footer-copyright { font-size: 10px; letter-spacing: .14em; color: #9fb0c5; margin: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .hero h1 { font-size: 68px; }
}

/* The orbit's stage nodes are positioned to sit on the circumference of the
   desktop-sized orbit; below this width the circle's minimum size (it
   doesn't shrink below 560px) stops scaling proportionally with the
   section and starts overlapping the stage text. Rather than renumber the
   whole arc for every intermediate width, the section switches to its
   compact mobile/tablet treatment earlier — the same fallback principle
   already used below 900px, just triggered sooner for this one section. */
@media (max-width: 1150px) {
  .model { min-height: auto; overflow: visible; }
  .model-copy { position: static; max-width: none; padding: 70px 7vw 0; z-index: auto; }
  .orbit-stage { display: none; }
  .orbit-seal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px; height: 112px;
    margin: 48px 7vw 36px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #123a74, #061329 76%);
    box-shadow: 0 0 0 10px rgba(37, 99, 235, .07), 0 20px 44px rgba(4, 12, 26, .32);
  }
  .orbit-seal img { width: 42px; height: 42px; object-fit: contain; filter: brightness(1.2); }
  .cycle-list { display: block; padding: 0 7vw 70px; }
}

@media (max-width: 860px) {
  .nav { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: #071733; padding: 8px 7vw 20px; border-bottom: 1px solid rgba(255,255,255,.08); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
  .site-header.nav-open .nav { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav a { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav-cta { margin-top: 14px; text-align: center; }
  .nav-toggle { display: flex; }
}

@media (max-width: 900px) {
  .intro, .statement, .contact, .insights-head { grid-template-columns: 1fr; }
  .contact > * { max-width: none; }

  .intro h2, .statement-copy h2, .contact h2 { font-size: 43px; }

  /* Services: three full-width stacked territories instead of three
     side-by-side columns — each still a strong visual moment, not a
     shrunken version of the desktop band. */
  .services { grid-template-columns: 1fr; }
  .pillar { min-height: 420px; padding: 48px 7vw 40px; }

  .insights h2 { font-size: 43px; }
  .insight-grid { grid-template-columns: 1fr; gap: 0; }
  .insight-featured { margin-bottom: 8px; }

  footer { flex-wrap: wrap; text-align: left; }
}

@media (max-width: 640px) {
  :root { --header-h: 72px; }
  .header-inner { padding: 0 6vw; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-text strong { font-size: 14px; }

  .hero { padding-top: 60px; }
  .hero-inner { padding-bottom: 50px; }
  /* Narrower, closer-in illumination on mobile — the broad upper-right
     bloom reads as a wash rather than a distinct effect once the headline
     wraps across most of the viewport width, so it's tightened and dimmed
     rather than simply inherited at full size. */
  .hero-inner::before {
    inset: -10% -20% 0 0;
    background:
      radial-gradient(70% 45% at 88% 4%, rgba(96, 165, 250, .20), rgba(96, 165, 250, 0) 60%),
      radial-gradient(55% 50% at 100% 30%, rgba(37, 99, 235, .12), rgba(37, 99, 235, 0) 65%);
  }
  .hero h1 { font-size: 46px; }
  .hero-sub { font-size: 16px; }
  .btn { padding: 14px 22px; font-size: 14px; }

  .hero-strip { grid-template-columns: 1fr; }
  .hero-strip figure { height: 190px; }

  .intro { padding: 64px 7vw 56px; }
  .pillar { min-height: 380px; padding: 40px 7vw 36px; }
  .pillar h3 { font-size: 48px; }
  .statement { padding: 70px 7vw; }
  .model-copy { padding-top: 56px; }
  .insights { padding: 64px 7vw; }
  .contact { padding: 64px 7vw; }

  .intro h2, .statement-copy h2, .model h2, .contact h2 { font-size: 32px; }
  .insights h2, .insights-head h2 { font-size: 30px; }
  .insight-featured h3 { font-size: 26px; }
  .insight-featured { padding: 40px 32px; min-height: 320px; }

  .footer-brand::before { width: 46px; height: 46px; left: -13px; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: 38px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
  footer { flex-direction: column; align-items: flex-start; }
}