/* ─────────────────────────────────────────────────────────────────
   ktsglobal.services — design system
   Three-color palette. No gradients. No shadows. Hairlines only.
   ───────────────────────────────────────────────────────────────── */

:root {
  --apex-black: #0a0a0a;
  --sovereign-champagne: #c8b57a;
  --kqas-green: #4FC8A0;
  --ink: rgba(255,255,255,0.92);
  --ink-muted: rgba(255,255,255,0.55);
  --ink-faint: rgba(255,255,255,0.32);
  --hairline: rgba(200,181,122,0.18);
  --hairline-strong: rgba(200,181,122,0.32);

  --display: 'Cormorant Garamond', 'Times New Roman', serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --editorial: 'Cabinet Grotesk', 'Geist', 'Inter', sans-serif;
  --mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
  --arabic: 'Scheherazade New', 'Noto Naskh Arabic', serif;

  --max: 1200px;
  --gutter: 96px;
  --rhythm: 160px;
  --rhythm-sm: 96px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* reset */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }

html {
  background: var(--apex-black);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: var(--apex-black);
  color: var(--ink);
  font-feature-settings: "ss01", "ss02", "kern", "liga";
}

::selection { background: var(--sovereign-champagne); color: var(--apex-black); }

/* skip link */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--sovereign-champagne);
  color: var(--apex-black);
  padding: 12px 20px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  z-index: 100;
}
.skip:focus { left: 16px; top: 16px; }

/* visually hidden */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* focus */
:focus-visible {
  outline: 1px solid var(--sovereign-champagne);
  outline-offset: 4px;
}

/* layout primitives */
.shell {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section { padding: var(--rhythm) 0; }
.section--tight { padding: var(--rhythm-sm) 0; }
.section--first { padding-top: var(--rhythm-sm); }

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

/* ───── header ───── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10,10,10,0.86);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 22px;
  padding-bottom: 22px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: var(--ink);
  transition: opacity 200ms ease;
}
.brand:hover { opacity: 0.92; }
.brand__mark {
  /* mono fonts have a markedly smaller cap-height than serif display fonts
     at the same nominal size, so the mark is sized up to match the serif
     cap-height optically (≈14px caps from a 20px serif ⇒ ≈18px mono) */
  font-family: var(--mono);
  font-size: 18px;
  letter-spacing: 0.10em;
  color: var(--sovereign-champagne);
  text-transform: uppercase;
  /* small downward nudge so the mono baseline meets the serif cap-line */
  position: relative;
  top: 1px;
}
.brand__name { font-style: normal; }

.nav { display: flex; align-items: center; gap: 28px; }
.nav__link {
  font-family: var(--editorial), var(--body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  transition: color 200ms ease;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--ink); }

.kqas-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.kqas-tag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--kqas-green);
  display: inline-block;
  animation: kqas-pulse 2.4s var(--ease) infinite;
}
.kqas-tag[data-warn="true"] .dot { background: var(--sovereign-champagne); }
.kqas-tag[data-warn="true"] { color: var(--sovereign-champagne); }

@keyframes kqas-pulse {
  0%   { transform: scale(1.0); opacity: 0.7; }
  50%  { transform: scale(1.04); opacity: 1.0; }
  100% { transform: scale(1.0); opacity: 0.7; }
}

/* mobile nav */
.nav-toggle { display: none; }

@media (max-width: 900px) {
  :root { --gutter: 28px; --rhythm: 96px; --rhythm-sm: 64px; }
  .nav { display: none; gap: 18px; }
  .nav.is-open {
    display: flex;
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    background: var(--apex-black);
    border-bottom: 1px solid var(--hairline);
    padding: 24px var(--gutter);
  }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
  .site-header__inner { padding-top: 18px; padding-bottom: 18px; }
  .kqas-tag { display: none; }
  .site-header .kqas-tag.kqas-tag--mobile { display: inline-flex; font-size: 10px; }
}

/* ───── hero ───── */
.hero { padding-top: calc(var(--rhythm-sm) + 32px); padding-bottom: var(--rhythm-sm); }

/* full-bleed cinematic hero — image is the page */
.hero--full {
  position: relative;
  width: 100%;
  min-height: min(86vh, 920px);
  padding: 0;
  overflow: hidden;
  background: var(--apex-black);
  border-bottom: 1px solid var(--hairline);
  isolation: isolate;
}
.hero__bg,
.hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* anchor the illuminated portal slightly right-of-centre so the left scrim
     darkens the empty hall, not the focal light source */
  object-position: 62% center;
  z-index: 0;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* vertical bottom fade into the next section + left scrim for type legibility */
  background:
    linear-gradient(90deg,
      rgba(10,10,10,0.92) 0%,
      rgba(10,10,10,0.78) 28%,
      rgba(10,10,10,0.42) 52%,
      rgba(10,10,10,0.10) 78%,
      rgba(10,10,10,0.00) 100%),
    linear-gradient(180deg,
      rgba(10,10,10,0.00) 60%,
      rgba(10,10,10,0.60) 92%,
      rgba(10,10,10,1.00) 100%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  min-height: min(86vh, 920px);
  display: flex;
  align-items: center;
  padding-top: calc(var(--rhythm-sm) + 32px);
  padding-bottom: var(--rhythm-sm);
}
.hero__copy {
  min-width: 0;
  max-width: 58ch;
}

@media (max-width: 960px) {
  .hero--full { min-height: min(78vh, 720px); }
  .hero__inner { min-height: min(78vh, 720px); }
  .hero__bg img { object-position: 70% center; }
  /* on narrow viewports the focal portal can sit further off-frame;
     deepen the scrim slightly so type stays crisp */
  .hero__scrim {
    background:
      linear-gradient(90deg,
        rgba(10,10,10,0.94) 0%,
        rgba(10,10,10,0.86) 38%,
        rgba(10,10,10,0.62) 70%,
        rgba(10,10,10,0.30) 100%),
      linear-gradient(180deg,
        rgba(10,10,10,0.00) 55%,
        rgba(10,10,10,0.70) 92%,
        rgba(10,10,10,1.00) 100%);
  }
}

/* ── /retainer hero — abstract cadence (row of light bars in void) ── */
/* the source has a bright bar on the far-left; shift the image right so
   the typography column lands on the darker recess between bars */
.hero--cadence .hero__bg img { object-position: 78% center; }
.hero--cadence .hero__scrim {
  /* slightly heavier left scrim — the cadence bars are luminous and need
     a touch more weight on the type side than the homepage portal does */
  background:
    linear-gradient(90deg,
      rgba(10,10,10,0.94) 0%,
      rgba(10,10,10,0.82) 30%,
      rgba(10,10,10,0.48) 55%,
      rgba(10,10,10,0.12) 82%,
      rgba(10,10,10,0.00) 100%),
    linear-gradient(180deg,
      rgba(10,10,10,0.00) 60%,
      rgba(10,10,10,0.60) 92%,
      rgba(10,10,10,1.00) 100%);
}
@media (max-width: 960px) {
  .hero--cadence .hero__bg img { object-position: 82% center; }
}

/* ── /sovereignty hero — single suspended aperture (light in void) ── */
/* a tall luminous rectangle sits slightly right-of-centre in the source,
   with the entire left of the frame in pure black. Type goes on the left,
   aperture floats on the right. No tuning to push the focal element away
   from type — the composition is already balanced for it. */
.hero--surface .hero__bg img { object-position: center center; }
.hero--surface .hero__scrim {
  /* gentle horizontal left scrim — left of the source is already pure black,
     so we only need a soft assurance behind type. Light bottom fade. */
  background:
    linear-gradient(90deg,
      rgba(10,10,10,0.62) 0%,
      rgba(10,10,10,0.42) 25%,
      rgba(10,10,10,0.18) 50%,
      rgba(10,10,10,0.00) 75%),
    linear-gradient(180deg,
      rgba(10,10,10,0.00) 65%,
      rgba(10,10,10,0.50) 92%,
      rgba(10,10,10,1.00) 100%);
}
@media (max-width: 960px) {
  /* on narrow viewports shift the aperture further right so the stacked
     typography column has full width of pure black to the left of it */
  .hero--surface .hero__bg img { object-position: 74% center; }
  .hero--surface .hero__scrim {
    background:
      linear-gradient(90deg,
        rgba(10,10,10,0.78) 0%,
        rgba(10,10,10,0.58) 35%,
        rgba(10,10,10,0.30) 65%,
        rgba(10,10,10,0.10) 100%),
      linear-gradient(180deg,
        rgba(10,10,10,0.00) 60%,
        rgba(10,10,10,0.62) 92%,
        rgba(10,10,10,1.00) 100%);
  }
}

/* ── /operations hero — stepped ziggurat (tiered cubes in void) ── */
/* four glowing cuboid tiers stack into a pyramidal form, sitting slightly
   right-of-centre against pure black. The left third of the frame is already
   void, so the scrim is light: a gentle horizontal left wash to anchor type,
   plus a soft vertical bottom fade to seal the section edge. */
.hero--ziggurat .hero__bg img { object-position: calc(50% + 90px) center; }
.hero--ziggurat .hero__scrim {
  background:
    linear-gradient(90deg,
      rgba(10,10,10,0.62) 0%,
      rgba(10,10,10,0.42) 25%,
      rgba(10,10,10,0.18) 50%,
      rgba(10,10,10,0.00) 75%),
    linear-gradient(180deg,
      rgba(10,10,10,0.00) 65%,
      rgba(10,10,10,0.50) 92%,
      rgba(10,10,10,1.00) 100%);
}
@media (max-width: 960px) {
  /* on narrow viewports shift the ziggurat further right so the stacked
     typography column has full width of pure black to its left */
  .hero--ziggurat .hero__bg img { object-position: 74% center; }
  .hero--ziggurat .hero__scrim {
    background:
      linear-gradient(90deg,
        rgba(10,10,10,0.78) 0%,
        rgba(10,10,10,0.58) 35%,
        rgba(10,10,10,0.30) 65%,
        rgba(10,10,10,0.10) 100%),
      linear-gradient(180deg,
        rgba(10,10,10,0.00) 60%,
        rgba(10,10,10,0.62) 92%,
        rgba(10,10,10,1.00) 100%);
  }
}

/* ── /consultation hero — live signal trace on grid ── */
/* a horizontal oscilloscope-style trace runs across the right half of the
   frame with a subtle disturbance peak. The trace begins around mid-frame
   and could conflict with type, so the image is nudged right and the
   horizontal left scrim is firm to keep the type column on clean black.
   The trace itself sits below the type column's natural vertical centre
   on most viewports, so contrast is preserved. */
.hero--trace .hero__bg img { object-position: calc(50% + 100px) center; }
.hero--trace .hero__scrim {
  background:
    linear-gradient(90deg,
      rgba(10,10,10,0.82) 0%,
      rgba(10,10,10,0.60) 28%,
      rgba(10,10,10,0.30) 52%,
      rgba(10,10,10,0.08) 78%),
    linear-gradient(180deg,
      rgba(10,10,10,0.00) 65%,
      rgba(10,10,10,0.50) 92%,
      rgba(10,10,10,1.00) 100%);
}
@media (max-width: 960px) {
  /* on narrow viewports push the trace further right so the stacked type
     column has full width of pure black to its left */
  .hero--trace .hero__bg img { object-position: 82% center; }
  .hero--trace .hero__scrim {
    background:
      linear-gradient(90deg,
        rgba(10,10,10,0.90) 0%,
        rgba(10,10,10,0.70) 35%,
        rgba(10,10,10,0.40) 65%,
        rgba(10,10,10,0.12) 100%),
      linear-gradient(180deg,
        rgba(10,10,10,0.00) 60%,
        rgba(10,10,10,0.62) 92%,
        rgba(10,10,10,1.00) 100%);
  }
}

/* ── /intelligence hero — radar concentric rings ── */
/* a central cream pinpoint emits seven concentric rings of cream light
   that radiate outward, the figure positioned right-of-centre. The
   outermost rings reach further across the frame than other heroes, so
   the horizontal left scrim is firmer to preserve type contrast. */
.hero--radar .hero__bg img { object-position: calc(50% + 60px) center; }
.hero--radar .hero__scrim {
  background:
    linear-gradient(90deg,
      rgba(10,10,10,0.78) 0%,
      rgba(10,10,10,0.55) 25%,
      rgba(10,10,10,0.28) 50%,
      rgba(10,10,10,0.05) 75%),
    linear-gradient(180deg,
      rgba(10,10,10,0.00) 65%,
      rgba(10,10,10,0.50) 92%,
      rgba(10,10,10,1.00) 100%);
}
@media (max-width: 960px) {
  /* on narrow viewports push the radar further right so the stacked type
     column has full width of pure black to its left */
  .hero--radar .hero__bg img { object-position: 78% center; }
  .hero--radar .hero__scrim {
    background:
      linear-gradient(90deg,
        rgba(10,10,10,0.88) 0%,
        rgba(10,10,10,0.68) 35%,
        rgba(10,10,10,0.38) 65%,
        rgba(10,10,10,0.12) 100%),
      linear-gradient(180deg,
        rgba(10,10,10,0.00) 60%,
        rgba(10,10,10,0.62) 92%,
        rgba(10,10,10,1.00) 100%);
  }
}

/* ── /stewardship hero — sovereign seal on vertical thread ── */
/* a single circular seal floats slightly right-of-centre, threaded by a
   fine vertical light line that runs the full height of the frame. The
   left third is pure black, type goes there. Gentle horizontal left scrim
   for type anchoring; soft vertical bottom fade to seal the section edge. */
.hero--seal .hero__bg img { object-position: calc(50% + 30px) center; }
.hero--seal .hero__scrim {
  background:
    linear-gradient(90deg,
      rgba(10,10,10,0.62) 0%,
      rgba(10,10,10,0.42) 25%,
      rgba(10,10,10,0.18) 50%,
      rgba(10,10,10,0.00) 75%),
    linear-gradient(180deg,
      rgba(10,10,10,0.00) 65%,
      rgba(10,10,10,0.50) 92%,
      rgba(10,10,10,1.00) 100%);
}
@media (max-width: 960px) {
  /* on narrow viewports push the seal further right so the stacked type
     column has full width of pure black to its left */
  .hero--seal .hero__bg img { object-position: 74% center; }
  .hero--seal .hero__scrim {
    background:
      linear-gradient(90deg,
        rgba(10,10,10,0.78) 0%,
        rgba(10,10,10,0.58) 35%,
        rgba(10,10,10,0.30) 65%,
        rgba(10,10,10,0.10) 100%),
      linear-gradient(180deg,
        rgba(10,10,10,0.00) 60%,
        rgba(10,10,10,0.62) 92%,
        rgba(10,10,10,1.00) 100%);
  }
}

.hero__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sovereign-champagne);
  margin-bottom: 36px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 32px; height: 1px;
  background: var(--sovereign-champagne);
}

.display {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.012em;
  line-height: 1.05;
  color: var(--ink);
}

.display--xl { font-size: clamp(40px, 6.4vw, 76px); }
.display--lg { font-size: clamp(34px, 4.8vw, 58px); }
.display--md { font-size: clamp(28px, 3.6vw, 42px); }

.display em, .editorial-italic {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  color: var(--ink);
}

.lede {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--ink-muted);
  max-width: 56ch;
  margin-top: 32px;
}

.hero__cta { margin-top: 52px; }

/* champagne underline link (the only "button") */
.quiet-link {
  font-family: var(--editorial), var(--body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  border-bottom: 1px solid var(--sovereign-champagne);
  padding-bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: opacity 200ms ease;
}
.quiet-link:hover { opacity: 0.92; }
.quiet-link::after {
  content: "→";
  color: var(--sovereign-champagne);
  font-family: var(--mono);
}

/* ───── section openers ───── */
.opener { margin-bottom: 64px; max-width: 880px; }
.opener__tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sovereign-champagne);
  margin-bottom: 28px;
  display: block;
}

/* ───── service tiles ───── */
.tiles {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
}
.tile {
  grid-column: span 6;
  border-bottom: 1px solid var(--hairline);
  padding: 56px 48px 56px 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: opacity 200ms ease;
}
.tile + .tile { padding-left: 48px; border-left: 1px solid var(--hairline); }
.tile:nth-child(2n+1) { padding-left: 0; }
.tile:nth-child(2n)   { padding-left: 48px; border-left: 1px solid var(--hairline); }

.tile__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--sovereign-champagne);
  text-transform: uppercase;
}
.tile__title {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
}
.tile__body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-muted);
  max-width: 50ch;
}
.tile__more {
  margin-top: 8px;
  font-family: var(--editorial), var(--body);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sovereign-champagne);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 3px;
  align-self: flex-start;
  transition: opacity 200ms ease, border-color 200ms ease;
}
.tile a.tile__more:hover { opacity: 0.92; border-color: var(--sovereign-champagne); }

@media (max-width: 800px) {
  .tile, .tile:nth-child(2n+1), .tile:nth-child(2n) {
    grid-column: span 12;
    padding: 40px 0;
    border-left: 0;
  }
}

/* ───── numbers grid ───── */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.metric {
  padding: 56px 24px;
  border-right: 1px solid var(--hairline);
  text-align: left;
}
.metric:last-child { border-right: 0; }
.metric__value {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
}
.metric__value--green { color: var(--kqas-green); }
.metric__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 18px;
  display: block;
}

@media (max-width: 700px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric { border-right: 0; }
  .metric:nth-child(odd) { border-right: 1px solid var(--hairline); }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); }
}

/* ───── editorial blocks ───── */
.editorial {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
}
.editorial--reverse { grid-template-columns: 7fr 5fr; }
.editorial p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
}
.editorial p + p { margin-top: 18px; }
.editorial .muted { color: var(--ink-muted); }

@media (max-width: 800px) {
  .editorial, .editorial--reverse { grid-template-columns: 1fr; gap: 32px; }
}

/* ───── prose for service pages ───── */
.prose {
  max-width: 64ch;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
}
.prose p + p { margin-top: 18px; }
.prose h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 36px);
  margin-top: 64px;
  margin-bottom: 24px;
  color: var(--ink);
  line-height: 1.2;
}
.prose h3 {
  font-family: var(--editorial), var(--body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sovereign-champagne);
  margin-top: 48px;
  margin-bottom: 16px;
}

/* ───── cadence / mandate blocks ───── */
.block {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 40px 0;
  margin: 48px 0;
}
.block__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sovereign-champagne);
  margin-bottom: 24px;
  display: block;
}
.cadence {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.cadence__row { display: block; }
.cadence__when {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: block;
  margin-bottom: 10px;
}
.cadence__what {
  font-family: var(--display);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink);
}
@media (max-width: 800px) {
  .cadence { grid-template-columns: 1fr; gap: 28px; }
}

/* ───── live KQAS metric tile (mid-page) ───── */
.kqas-tile {
  border: 1px solid var(--hairline);
  padding: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.kqas-tile__cell {
  border-right: 1px solid var(--hairline);
  padding: 0 32px;
}
.kqas-tile__cell:first-child { padding-left: 0; }
.kqas-tile__cell:last-child  { border-right: 0; padding-right: 0; }
.kqas-tile__value {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 16px;
}
.kqas-tile__value--green { color: var(--kqas-green); }
.kqas-tile__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

@media (max-width: 700px) {
  .kqas-tile { grid-template-columns: repeat(2, 1fr); padding: 24px; row-gap: 28px; }
  .kqas-tile__cell { border-right: 0; padding: 16px; }
  .kqas-tile__cell:nth-child(odd) { border-right: 1px solid var(--hairline); }
}

/* ───── form ───── */
.form { max-width: 640px; }
.form__row { margin-bottom: 32px; }
.form__label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sovereign-champagne);
  margin-bottom: 12px;
}
.form__input,
.form__textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline-strong);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  padding: 12px 0;
  transition: border-color 200ms ease;
}
.form__input:focus,
.form__textarea:focus {
  outline: 0;
  border-bottom-color: var(--sovereign-champagne);
}
.form__textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.form__submit {
  font-family: var(--editorial), var(--body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  border-bottom: 1px solid var(--sovereign-champagne);
  padding-bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: opacity 200ms ease;
}
.form__submit:hover { opacity: 0.92; }
.form__submit::after {
  content: "→";
  color: var(--sovereign-champagne);
  font-family: var(--mono);
}
.form__note {
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-muted);
  margin-top: 24px;
  max-width: 56ch;
}
.form__direct {
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-muted);
  margin-top: 14px;
  max-width: 56ch;
}
.form__status {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--kqas-green);
  margin-top: 24px;
  min-height: 18px;
}

/* ───── footer ───── */
.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 80px 0 48px;
  margin-top: var(--rhythm-sm);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
}
.site-footer__sig {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.site-footer__sig em { font-style: italic; }
.site-footer__addr {
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-muted);
  margin-top: 18px;
}
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.site-footer__col-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sovereign-champagne);
  margin-bottom: 18px;
}
.site-footer__list a {
  display: block;
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-muted);
  transition: color 200ms ease;
}
.site-footer__list a:hover { color: var(--ink); }

.site-footer__base {
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.site-footer__legal {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

@media (max-width: 800px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__cols { grid-template-columns: repeat(2, 1fr); }
}

/* ───── reveal (single per viewport) ───── */
.reveal {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ───── reduced motion ───── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .kqas-tag .dot { animation: none; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ───── RTL ───── */
[dir="rtl"] {
  font-family: var(--arabic);
}
[dir="rtl"] .quiet-link::after,
[dir="rtl"] .form__submit::after,
[dir="rtl"] .tile__more {
  transform: scaleX(-1);
}