/* ============================================================
   Knechtel IP — Design System
   Navy #13294B · Slate #4A6785 · Teal #178C8C
   Off-white #FAFAF8 · Charcoal #222
   Headlines: Cormorant Garamond · Body: Inter
   ============================================================ */

:root {
  --navy: #1A3A5C;
  --navy-deep: #12294A;
  --slate: #4A6785;
  --slate-soft: #6B829C;
  /* Brand accent = the crimson from the KLG logo (var names kept as --teal for continuity) */
  --teal: #C0202F;
  --teal-deep: #9E1A26;
  --red: #C0202F;
  --red-soft: #E79AA2;
  --bg: #FAFAF8;
  --bg-alt: #F2F1EC;
  --bg-navy: #13294B;
  --ink: #222222;
  --ink-soft: #41464F;
  --line: #E2E0D8;
  --line-navy: rgba(255,255,255,0.14);
  --white: #FFFFFF;

  --maxw: 1180px;
  --gut: clamp(22px, 5vw, 64px);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--teal-deep); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--navy); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--serif); color: var(--navy); font-weight: 600; line-height: 1.12; margin: 0 0 .5em; letter-spacing: .2px; }
h1 { font-size: clamp(2.5rem, 5.2vw, 4.1rem); font-weight: 600; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
h3 { font-size: clamp(1.35rem, 2.1vw, 1.7rem); }
h4 { font-size: 1.2rem; }

p { margin: 0 0 1.1em; max-width: 68ch; }

.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--teal);
  margin: 0 0 1.2rem;
}
.eyebrow.light { color: var(--red-soft); }

.lead { font-size: 1.22rem; line-height: 1.6; color: var(--ink-soft); max-width: 60ch; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
section { padding: clamp(56px, 8vw, 110px) 0; }
.narrow { max-width: 820px; }

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .98rem;
  letter-spacing: .015em;
  padding: 15px 30px;
  border-radius: 40px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background .24s ease, color .24s ease, transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
/* Shared arrow on body CTAs (the nav pill supplies its own) */
.btn-primary:not(.nav-cta)::after,
.btn-light::after,
.btn-outline-light::after,
.btn-ghost::after { content: "\2192"; font-size: 1.02em; transition: transform .25s ease; }
.btn:hover::after { transform: translateX(3px); }

/* Primary (light backgrounds): navy → crimson on hover, consistent with the nav pill */
.btn-primary { background: var(--navy); color: #fff; box-shadow: 0 7px 20px -9px rgba(19,41,75,.65); }
.btn-primary:not(.nav-cta):hover { background: #A4142A; color: #fff; transform: translateY(-1px); box-shadow: 0 12px 26px -9px rgba(164,20,42,.6); }

.btn-ghost { background: transparent; color: var(--navy); border-color: var(--slate); }
.btn-ghost:hover { background: var(--navy); color: var(--white); border-color: var(--navy); transform: translateY(-1px); }

/* On dark/navy sections: crisp white pill → crimson on hover */
.btn-light { background: #fff; color: var(--navy); box-shadow: 0 9px 24px -11px rgba(0,0,0,.5); }
.btn-light:hover { background: #A4142A; color: #fff; transform: translateY(-1px); box-shadow: 0 13px 28px -11px rgba(164,20,42,.55); }

.btn-outline-light { background: rgba(255,255,255,.05); color: #fff; border-color: rgba(255,255,255,.5); }
.btn-outline-light:hover { background: #fff; color: var(--navy); border-color: #fff; transform: translateY(-1px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,250,248,.92);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { display: flex; flex-direction: column; line-height: 1; }
.brand .name { font-family: var(--serif); font-size: 1.55rem; font-weight: 600; color: var(--navy); letter-spacing: .5px; }
.brand .sub { font-family: var(--sans); font-size: .60rem; letter-spacing: .28em; text-transform: uppercase; color: var(--slate); margin-top: 5px; }
/* The navigation uses the FULL width of the page, not the 1180px text column:
   the menu grows every time a page is added, and inside the narrow column the
   tabs ran out of room and wrapped onto a second line on top of each other. */
.site-header > .wrap.nav { max-width: none; }
.nav-links { display: flex; align-items: center; flex-wrap: nowrap;
  gap: clamp(16px, 1.7vw, 30px); list-style: none; margin: 0; padding: 0; }
/* legible, and never broken mid-tab */
.nav-links a { font-size: clamp(.95rem, 1.02vw, 1.06rem); font-weight: 500;
  color: var(--ink-soft); letter-spacing: .01em; white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { color: var(--navy); }
.nav-cta {
  display: inline-flex !important; align-items: center; gap: 8px;
  background: var(--navy); color: #fff !important; border: 0;
  padding: 11px 22px !important; font-size: .88rem !important; font-weight: 600;
  /* (!) line-height:1 on a pill means the line box is exactly the cap height,
     so the tail of the "n" in Consultation sat on the lower edge and the arrow
     rode high against the text. The pill's height comes from its padding, so
     the line box can afford to be generous. */
  letter-spacing: .015em; border-radius: 40px; line-height: 1.25;
  box-shadow: 0 5px 16px -7px rgba(19,41,75,.55);
  transition: background .22s ease, transform .22s ease, box-shadow .22s ease;
}
.nav-cta::after { content: "\2192"; font-size: 1.02em; transition: transform .25s ease; }
.nav-cta:hover {
  background: #A4142A !important; color: #fff !important; transform: translateY(-1px);
  box-shadow: 0 9px 22px -8px rgba(164,20,42,.6);
}
.nav-cta:hover::after { transform: translateX(3px); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--navy); margin: 5px 0; transition: .25s; }

/* ---------- KLG Logo (recreated mark) ---------- */
.logo { display: inline-flex; align-items: center; gap: 13px; line-height: 1; }
.logo-mark {
  font-family: var(--serif); font-weight: 600; color: var(--navy);
  font-size: 2.35rem; letter-spacing: -1px;
  /* (!) line-height:.9 gave a 37.6px serif a 33.8px line box, so the descender
     of the "g" in k'lg had nowhere to sit and the wordmark rendered with its
     tail sliced off. The client saw it on a phone. The mark still has to sit
     tight against the words beneath it, so the space is taken back with a
     negative bottom margin rather than by starving the line box. */
  line-height: 1.1; margin-bottom: -.18em;
  position: relative; display: inline-block;
}
.logo-mark .ap {
  color: var(--red); font-style: normal; font-weight: 700;
  position: relative; left: -2px; top: -2px; font-size: .8em;
}
.logo-bar { width: 2px; align-self: stretch; min-height: 38px; background: var(--red); margin: 2px 0; }
.logo-words {
  font-family: var(--sans); color: var(--navy); font-weight: 600;
  font-size: .60rem; letter-spacing: .12em; line-height: 1.28; text-transform: uppercase;
}
.logo:hover .logo-mark, .logo:hover .logo-words { color: var(--navy); }
/* dark backgrounds */
.logo.on-dark .logo-mark, .logo.on-dark .logo-words { color: #fff; }
/* compact / footer sizing */
.logo.lg .logo-mark { font-size: 2.9rem; }
.logo.lg .logo-words { font-size: .72rem; }
/* (!) This used to be `display: none` on both, which meant that on every phone
   the firm's name vanished and the header showed nothing but the "k'lg" mark.
   The client reported it, reasonably, as a truncated logo — from where he sat
   his name had been cut off his own website. There is ample room: the mark is
   47px wide inside a 405px header. So the name stays and is simply set smaller
   and tighter, and the rule keeps the whole lockup from crowding the menu. */
@media (max-width: 420px) {
  .logo { gap: 9px; }
  .logo-mark { font-size: 2rem; }
  .logo-bar { min-height: 30px; }
  .logo-words { font-size: .52rem; letter-spacing: .08em; line-height: 1.24; }
}
@media (max-width: 340px) {
  .logo-words { font-size: .47rem; letter-spacing: .05em; }
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 55%, #16335c 100%);
  color: #EAF0F6;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 420px at 88% -10%, rgba(192,32,47,.16), transparent 60%),
    radial-gradient(620px 380px at 8% 110%, rgba(74,103,133,.30), transparent 60%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 2; padding-top: clamp(70px, 10vw, 130px); padding-bottom: clamp(70px, 10vw, 130px); }
.hero h1 { color: #fff; max-width: 16ch;
  background: linear-gradient(105deg, #ffffff 0%, #ffffff 38%, #BFD8F2 47%, #ffffff 56%, #ffffff 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; animation: shimmer 8s ease-in-out infinite; }
.hero .lead { color: #C6D2E0; max-width: 54ch; margin-top: 1.4rem; }
.hero-actions { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 16px; }
.hero-meta { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 36px; border-top: 1px solid var(--line-navy); padding-top: 1.8rem; }
.hero-meta div { max-width: 200px; }
.hero-meta .n { font-family: var(--serif); font-size: 2.3rem; color: #fff; line-height: 1; }
.hero-meta .l { font-size: .82rem; color: #9FB1C6; letter-spacing: .02em; margin-top: 6px; }

/* ---------- Section helpers ---------- */
.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
#bgfx { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.aurora {
  position: fixed; inset: -25%; z-index: -2; pointer-events: none; filter: blur(34px);
  background:
    radial-gradient(34% 34% at 18% 28%, rgba(40,84,138,.22), transparent 70%),
    radial-gradient(30% 30% at 82% 22%, rgba(164,20,42,.15), transparent 70%),
    radial-gradient(40% 40% at 62% 84%, rgba(74,103,133,.20), transparent 70%);
  animation: auroraMove 24s ease-in-out infinite alternate;
}
.bg-alt { background: rgba(242,241,236,.78); }
.bg-navy { background: var(--navy); color: #DCE5EF; }
.bg-navy h1, .bg-navy h2, .bg-navy h3 { color: #fff; }
.bg-navy p { color: #B9C6D6; }
.bg-navy a { color: var(--red-soft); }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 34px 32px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(15,39,68,.35); border-color: #D2CFC4; }
.card h3 { font-size: 1.4rem; margin-bottom: .35em; }
.card p { font-size: .98rem; color: var(--ink-soft); margin-bottom: 0; }
.card .ic { display: block; margin-bottom: 22px; }
.ic svg { width: 38px; height: 38px; fill: none; stroke: var(--navy); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ic svg .acc { stroke: var(--red); }
.ic svg .accf { fill: var(--red); stroke: none; }
.card:hover .ic svg { stroke: var(--navy); }
/* icon chip used on feature rows / industries */
.ic-chip { display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; border:1px solid var(--line); border-radius:50%; background:#fff; margin-bottom:20px; }
.ic-chip svg { width:26px; height:26px; fill:none; stroke:var(--navy); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.ic-chip svg .acc { stroke: var(--red); }
.ic-chip svg .accf { fill: var(--red); stroke:none; }
.bg-navy .ic-chip { background: transparent; border-color: var(--line-navy); }
.bg-navy .ic-chip svg { stroke: #cdd9e7; }
.bg-navy .ic-chip svg .acc { stroke: var(--red-soft); }
.card .more { display: inline-block; margin-top: 18px; font-weight: 600; font-size: .9rem; letter-spacing: .03em; }
.card .more::after { content: " →"; }

.tag-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.tag {
  font-size: .82rem; font-weight: 500; color: var(--slate);
  background: var(--bg-alt); border: 1px solid var(--line);
  padding: 7px 15px; border-radius: 40px;
}
.bg-alt .tag { background: #fff; }

/* feature list */
.flist { list-style: none; margin: 0; padding: 0; }
.flist li { position: relative; padding: 12px 0 12px 30px; border-bottom: 1px solid var(--line); }
.flist li:last-child { border-bottom: 0; }
.flist li::before { content: ""; position: absolute; left: 0; top: 19px; width: 9px; height: 9px; background: var(--teal); border-radius: 2px; transform: rotate(45deg); }
.bg-navy .flist li { border-color: var(--line-navy); }

/* two-col split */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.split.rev > :first-child { order: 2; }

.stat-band { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; text-align: center; }
.stat-band .n { font-family: var(--serif); font-size: clamp(2.2rem,4vw,3rem); color: var(--teal); line-height: 1; }
.bg-navy .stat-band .n { color: var(--red-soft); }
.stat-band .l { font-size: .9rem; color: var(--ink-soft); margin-top: 10px; }
.bg-navy .stat-band .l { color: #AFC0D2; }

/* pillars */
.pillar { border-top: 3px solid var(--teal); background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--teal); padding: 32px 30px; border-radius: 0 0 4px 4px; }
.pillar .num { font-family: var(--serif); font-size: 1rem; color: var(--slate); letter-spacing: .1em; }

/* portrait block */
.portrait {
  background: linear-gradient(160deg, #1a3a66, #13294B);
  border-radius: 6px; aspect-ratio: 4/5; width: 100%;
  display: flex; align-items: flex-end; padding: 28px; color: #cdd9e7;
  border: 1px solid var(--line-navy);
}

/* CTA band */
.cta-band { background: linear-gradient(160deg, var(--navy-deep), #16335c); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #C0CDDC; margin-left: auto; margin-right: auto; }

/* ---------- Forms ---------- */
.form { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: clamp(28px,4vw,44px); }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: .84rem; font-weight: 600; color: var(--navy); letter-spacing: .03em; margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--ink);
  padding: 13px 15px; border: 1px solid var(--line); border-radius: 3px; background: var(--bg);
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(23,140,140,.12); background: #fff;
}
.field textarea { min-height: 130px; resize: vertical; }
.form-note { font-size: .85rem; color: var(--slate); margin-top: 4px; }
.form-status { margin-top: 16px; font-size: .95rem; font-weight: 500; display: none; }
.form-status.ok { display: block; color: var(--teal-deep); }
.form-status.err { display: block; color: #b3402e; }

/* ---------- Article list ---------- */
.article { display: block; padding: 30px 0; border-bottom: 1px solid var(--line); }
.article:hover h3 { color: var(--teal-deep); }
.article .meta { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); margin-bottom: 10px; }
.article h3 { margin-bottom: .3em; }
.article p { color: var(--ink-soft); margin-bottom: 0; }

/* page hero (interior) */
.page-hero { background: linear-gradient(160deg, var(--navy-deep), var(--navy)); color: #fff; padding: clamp(64px,9vw,120px) 0 clamp(48px,6vw,80px); }
.page-hero .eyebrow { color: var(--red-soft); }
.page-hero h1 { color: #fff; max-width: 18ch; }
.page-hero h2.page-hero-sub { color: #C6D2E0; font-weight: 500; font-size: clamp(1.2rem, 2vw, 1.5rem); max-width: 50ch; margin: -.3em 0 1em; }
.page-hero p { color: #C6D2E0; max-width: 58ch; font-size: 1.15rem; }
.crumb { font-size: .82rem; color: #8FA2B8; margin-bottom: 1.4rem; letter-spacing: .03em; }
.crumb a { color: #8FA2B8; }
.crumb a:hover { color: #fff; }

/* prose */
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; color: var(--navy); }
.prose ul { padding-left: 0; list-style: none; }
.prose ul li { position: relative; padding: 6px 0 6px 26px; max-width: 68ch; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 8px; height: 8px; background: var(--teal); border-radius: 2px; transform: rotate(45deg); }

.callout { border-left: 3px solid var(--teal); background: var(--bg-alt); padding: 22px 26px; margin: 28px 0; border-radius: 0 4px 4px 0; }
.callout p { margin: 0; font-size: 1.05rem; color: var(--navy); font-style: italic; font-family: var(--serif); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); color: #A9B7C8; padding: 66px 0 30px; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 36px; }
.site-footer h4 { color: #fff; font-family: var(--sans); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px; font-weight: 600; }
.site-footer .name { font-family: var(--serif); font-size: 1.5rem; color: #fff; margin-bottom: 8px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: #A9B7C8; }
.site-footer a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid var(--line-navy); margin-top: 46px; padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .82rem; color: #7D8DA0; }
.disclaimer { max-width: 760px; font-size: .78rem; color: #7D8DA0; line-height: 1.6; margin-top: 8px; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(26px) scale(.984); transition: opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }

/* scroll progress bar */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100;
  background: linear-gradient(90deg, var(--red), #e0606b); transition: width .1s linear; }

/* ---------- Hero depth ---------- */
.hero { overflow: hidden; }
.hero-media {
  position: absolute; inset: -5%; z-index: 0;
  background-image: url('img-device-mfg.jpg');
  background-size: cover; background-position: center;
  opacity: .18; filter: saturate(1.1);
  animation: kenburns 30s ease-in-out infinite alternate;
}
.hero::after { z-index: 1; }
.hero .wrap { z-index: 3; }
.hero-grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 10%, #000 30%, transparent 75%);
  mask-image: radial-gradient(120% 90% at 70% 10%, #000 30%, transparent 75%);
  animation: griddrift 22s linear infinite;
}
.hero-molecule { position: absolute; z-index: 2; right: -40px; top: 70px; width: min(540px, 52vw);
  opacity: .55; pointer-events: none; animation: floaty 10s ease-in-out infinite; }
.hero-molecule .node { fill: var(--red-soft); }
.hero-molecule .node.t { fill: #8FB6E6; }
.hero-molecule line { stroke: rgba(160,190,225,.45); stroke-width: 1.2; }
.hero-molecule .ring { fill: none; stroke: rgba(231,154,162,.5); stroke-width: 1.2; }

/* ---------- Floating motif (interior heros) ---------- */
.page-hero { overflow: hidden; }
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero-glow { position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: radial-gradient(540px 300px at 88% 12%, rgba(192,32,47,.22), transparent 62%),
              radial-gradient(640px 360px at 6% 108%, rgba(74,103,133,.34), transparent 60%);
  animation: glowpan 16s ease-in-out infinite alternate; }

/* ---------- Image bands (parallax) ---------- */
.img-band { position: relative; overflow: hidden; background: var(--navy-deep); color: #fff; }
.img-band .band-media { position: absolute; inset: -8% 0; z-index: 0;
  background-size: cover; background-position: center; transform: scale(1.06); will-change: transform; }
.img-band::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(15,39,68,.94) 0%, rgba(16,42,76,.80) 42%, rgba(16,42,76,.46) 100%); }
/* (!!) padding-block, NOT the padding shorthand. `padding: <v> 0` also sets the
   horizontal padding to zero, which silently discards the `0 var(--gut)` side
   gutter every .wrap on the site relies on. On desktop that is invisible — the
   wrap is capped by max-width and centred, so there is whitespace beside it
   either way. On a phone the wrap fills the screen, and the gutter is the only
   thing holding the text off the glass: this band ran its heading, its
   paragraph and its statistics flush into both edges. Set the axis you mean. */
.img-band .wrap { position: relative; z-index: 2; padding-block: clamp(72px,10vw,128px); }
.img-band h2 { color: #fff; }
.img-band p { color: #D6E0EC; }
.img-band .eyebrow { color: var(--red-soft); }
.img-band .stat-band { margin-top: 40px; }
.img-band .stat-band .n { color: #fff; }
.img-band .stat-band .l { color: #B7C6D8; }
.band-tall .wrap { padding-block: clamp(96px,13vw,170px); }   /* same reason as above */

/* card hover sheen */
.card { position: relative; overflow: hidden; }
.card::before { content: ""; position: absolute; top: 0; left: -120%; width: 70%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); transition: left .7s ease; pointer-events: none; }
.card:hover::before { left: 130%; }

/* portrait photo */
.portrait-photo { width: 100%; border-radius: 6px; aspect-ratio: 4/5; object-fit: cover; object-position: center top;
  border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(15,39,68,.5); }
.portrait-frame { position: relative; }
.portrait-frame::after { content: ""; position: absolute; left: -14px; bottom: -14px; width: 64%; height: 64%;
  border-left: 2px solid var(--red); border-bottom: 2px solid var(--red); border-radius: 0 0 0 6px; z-index: -1; }

/* count-up holds layout */
.hero-meta .n[data-count] { font-variant-numeric: tabular-nums; }

/* ---------- Keyframes ---------- */
@keyframes kenburns { from { transform: scale(1) translate(0,0); } to { transform: scale(1.14) translate(-1.5%, -1.5%); } }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-18px) rotate(1.5deg); } }
@keyframes griddrift { from { background-position: 0 0, 0 0; } to { background-position: 64px 64px, 64px 64px; } }
@keyframes glowpan { from { transform: translate3d(-2%, -1%, 0); } to { transform: translate3d(2%, 1%, 0); } }
@keyframes auroraMove {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.05) rotate(0deg); }
  50%  { transform: translate3d(3%, 2%, 0) scale(1.13) rotate(4deg); }
  100% { transform: translate3d(-2%, 3%, 0) scale(1.06) rotate(-3deg); }
}
@keyframes shimmer { 0% { background-position: 140% 0; } 60%, 100% { background-position: -40% 0; } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-media, .hero-molecule, .hero-grid, .page-hero-glow, .card::before, .aurora { animation: none !important; }
  .hero h1 { animation: none !important; -webkit-text-fill-color: #fff !important; }
  .scroll-progress { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .grid-3 { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .split, .split.rev > :first-child { grid-template-columns: 1fr; order: 0; }
  .stat-band { grid-template-columns: repeat(2,1fr); gap: 26px; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .nav-links {
    position: absolute; top: 76px; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 8px var(--gut) 22px; display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links li a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); width: 100%; }
  .nav-links .nav-cta { display: inline-block; margin-top: 14px; }
  .nav-toggle { display: block; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .stat-band { grid-template-columns: 1fr 1fr; }
  .hero-meta { gap: 24px; }
}

/* ---- Portfolio Value Framework dialog (services hero button) ---------------
   Same palette and type as the cards: navy heading in Cormorant, crimson rule,
   white panel on the off-white ground. Scrolls on short screens, and honours
   reduced-motion like the rest of the page. */
.fw-modal[hidden] { display: none; }
.fw-modal {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.fw-backdrop {
  position: absolute; inset: 0;
  background: rgba(18, 41, 74, 0.62);
  backdrop-filter: blur(2px);
}
.fw-panel {
  position: relative;
  width: min(760px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--white);
  border-radius: 12px;
  padding: 40px 44px 36px;
  box-shadow: 0 24px 60px rgba(18, 41, 74, 0.28);
  animation: fwIn .22s ease-out;
}
@keyframes fwIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fw-panel { animation: none; } }
.fw-panel h2 {
  margin: 4px 0 6px;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  color: var(--navy);
}
.fw-panel h2::after {
  content: ""; display: block; width: 46px; height: 2px;
  background: var(--red); margin: 14px 0 0;
}
.fw-lead { margin: 18px 0 20px; color: var(--ink-soft); }
.fw-list { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 12px 22px; }
.fw-list dt { font-weight: 600; color: var(--navy); }
.fw-list dd { margin: 0; color: var(--ink-soft); }
.fw-cta { margin-top: 28px; }
.fw-close {
  position: absolute; top: 12px; right: 14px;
  width: 38px; height: 38px; line-height: 1;
  font-size: 1.6rem; color: var(--slate);
  background: none; border: 0; border-radius: 50%; cursor: pointer;
}
.fw-close:hover { background: var(--bg); color: var(--navy); }
@media (max-width: 620px) {
  .fw-panel { padding: 32px 22px 28px; }
  .fw-list { grid-template-columns: 1fr; gap: 4px; }
  .fw-list dd { margin-bottom: 12px; }
}