/* ============================================================================
   SCHONING.COM — site-level styles. Built on the Franz Schoning design system.
   Visual enhancement only; no content changes.
   ============================================================================ */

html { scroll-padding-top: 96px; }
html, body { margin: 0; }
body {
  background: var(--fs-mist);
  color: var(--fs-fg);
  font-family: var(--fs-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--fs-gold-tint); color: var(--fs-ink); }

/* ---- shared layout ---- */
.wrap { max-width: var(--fs-container); margin: 0 auto; padding-left: var(--fs-gutter); padding-right: var(--fs-gutter); }
.section { padding: var(--fs-space-9) var(--fs-gutter); }

/* ---- eyebrow / data-tag primitives (formerly React components) ---- */
.eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--fs-font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-gold-deep); }
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--fs-gold); flex: none; }
.eyebrow.on-dark { color: var(--fs-gold); }
.eyebrow.center { justify-content: center; }
.data-tag { font-family: var(--fs-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: var(--fs-indigo-200); }

/* ---- icon sizing (lucide replaces <i data-lucide> with svg, keeping the class) ---- */
.ic { flex: none; }
.ic-14 { width: 14px; height: 14px; }
.ic-16 { width: 16px; height: 16px; stroke-width: 2.25; }
.ic-20 { width: 20px; height: 20px; }
.ic-22 { width: 22px; height: 22px; stroke-width: 1.75; }

/* ---- header ---- */
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(253,253,254,0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: background var(--fs-dur) var(--fs-ease), border-color var(--fs-dur) var(--fs-ease); }
.site-header.scrolled { background: rgba(253,253,254,0.90); border-bottom-color: var(--fs-border); }
.site-header .wrap { height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-links-desktop { display: flex; align-items: center; gap: 36px; }
.nav-toggle-btn { background: transparent; border: 1px solid var(--fs-border-strong); border-radius: var(--fs-radius-sm); width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--fs-ink); }
.nav-sheet { display: none; border-top: 1px solid var(--fs-border); background: var(--fs-surface); padding: 8px var(--fs-gutter) 20px; }
.nav-sheet.open { display: block; }
.nav-sheet a.sheet-link { display: block; padding: 14px 0; border-bottom: 1px solid var(--fs-border); font-family: var(--fs-font-body); font-weight: 600; font-size: 15px; color: var(--fs-ink); text-decoration: none; }

/* ============================================================================
   DARK CANVAS ENHANCEMENTS — brushed-metal + deeper architectural blueprint
   ============================================================================ */

/* Royal-indigo hero with layered brushed-metal sheen + fine blueprint grid */
.site-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--fs-indigo-base);
  background-image:
    /* violet moonlight */
    radial-gradient(130% 120% at 80% -25%, rgba(124,110,190,0.55) 0%, transparent 50%),
    /* deep falloff bottom-left */
    radial-gradient(120% 120% at 0% 120%, rgba(18,15,38,0.85) 0%, transparent 52%),
    /* fine 32px blueprint grid */
    linear-gradient(var(--fs-grid-line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--fs-grid-line-dark) 1px, transparent 1px),
    /* coarse 192px major grid */
    linear-gradient(rgba(156,146,200,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(156,146,200,0.07) 1px, transparent 1px);
  background-size:
    100% 100%, 100% 100%,
    var(--fs-grid-size) var(--fs-grid-size),
    var(--fs-grid-size) var(--fs-grid-size),
    192px 192px, 192px 192px;
}
/* brushed-metal vertical striations, very faint, scanning across the hero */
.site-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.000) 0px,
    rgba(255,255,255,0.018) 1px,
    rgba(255,255,255,0.000) 2px,
    rgba(255,255,255,0.000) 5px
  );
  mix-blend-mode: screen;
  opacity: 0.6;
  pointer-events: none;
}
/* a single diagonal gold light-rake, like light catching brushed metal */
.site-hero::after {
  content: "";
  position: absolute; top: -40%; right: -10%;
  width: 60%; height: 180%;
  background: linear-gradient(105deg, transparent 0%, rgba(212,175,55,0.10) 45%, rgba(212,175,55,0.16) 50%, transparent 62%);
  transform: rotate(8deg);
  pointer-events: none;
}

/* Final CTA — deepest indigo, gold-framed */
.site-deep {
  position: relative;
  overflow: hidden;
  background-color: var(--fs-indigo-dark);
  background-image:
    radial-gradient(120% 130% at 50% -30%, rgba(124,110,190,0.32) 0%, transparent 55%),
    linear-gradient(var(--fs-grid-line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--fs-grid-line-dark) 1px, transparent 1px);
  background-size: 100% 100%, var(--fs-grid-size) var(--fs-grid-size), var(--fs-grid-size) var(--fs-grid-size);
}

/* corner crop ticks — forensic alignment marks */
.crop-ticks { position: absolute; inset: 22px; pointer-events: none; }
.crop-ticks span {
  position: absolute; width: 14px; height: 14px;
  border-color: rgba(212,175,55,0.55); border-style: solid; border-width: 0;
}
.crop-ticks span:nth-child(1) { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.crop-ticks span:nth-child(2) { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.crop-ticks span:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.crop-ticks span:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }

/* ---- logo lockup ---- */
.logo-lockup { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.logo-lockup .mark { height: 42px; width: 42px; display: block; flex: none; }
.logo-word {
  font-family: var(--fs-font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fs-gold);
  line-height: 1.05;
  white-space: nowrap;
}
.logo-byline {
  font-family: var(--fs-font-body);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fs-fg-soft);
  margin-top: 4px;
  white-space: nowrap;
}
.logo-lockup.on-dark .logo-byline { color: var(--fs-indigo-300); }

/* nav link */
.nav-link {
  font-family: var(--fs-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--fs-fg-muted);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color var(--fs-dur-fast) var(--fs-ease), border-color var(--fs-dur-fast) var(--fs-ease);
  cursor: pointer;
}
.nav-link:hover { color: var(--fs-ink); }
.nav-link.active { color: var(--fs-ink); border-bottom-color: var(--fs-gold); }

/* findings register rows */
.findings-list li { display: flex; gap: 16px; align-items: flex-start; padding: 17px 24px; border-bottom: 1px solid var(--fs-border); }
.findings-list li:last-child { border-bottom: none; }
.findings-list li svg { color: var(--fs-red); margin-top: 1px; }
.findings-list li span { font-family: var(--fs-font-body); font-size: 15px; line-height: 1.5; color: var(--fs-fg); }

/* service cards */
.svc-card { display: flex; flex-direction: column; padding: 0; width: 100%; }
.svc-head { padding: 26px 28px 22px; border-bottom: 1px solid var(--fs-border); }
.svc-head-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.svc-chip { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--card-accent, var(--fs-gold)); border-radius: var(--fs-radius-sm); color: var(--card-accent, var(--fs-gold)); background: var(--card-accent-tint, var(--fs-gold-tint)); }
.svc-numeral { font-family: var(--fs-font-display); font-weight: 700; font-size: 22px; color: var(--card-accent, var(--fs-gold)); letter-spacing: 0.06em; }
.svc-head h3 { font-family: var(--fs-font-display); font-weight: 700; font-size: var(--fs-step-h4); line-height: 1.3; color: var(--fs-ink); margin: 0 0 10px; }
.svc-head p { font-family: var(--fs-font-body); font-style: italic; font-size: 14px; line-height: 1.55; color: var(--fs-fg-soft); margin: 0; }
.svc-item p { font-family: var(--fs-font-body); font-size: 14px; line-height: 1.6; color: var(--fs-fg-muted); margin: 0; }

/* methodology columns */
.method-col { background: var(--fs-surface); padding: 34px 32px 36px; box-shadow: var(--fs-shadow-sm); }
.method-col-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; }
.method-num { font-family: var(--fs-font-display); font-weight: 700; font-size: 48px; line-height: 1; color: var(--fs-gold); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.method-range { font-family: var(--fs-font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fs-fg-soft); border: 1px solid var(--fs-border-strong); padding: 5px 10px; border-radius: var(--fs-radius-sm); white-space: nowrap; }
.method-col > p { font-family: var(--fs-font-body); font-size: 15px; line-height: 1.65; color: var(--fs-fg-muted); margin: 0; }

/* service card list */
.svc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--fs-space-5); }
.svc-item { position: relative; padding-left: 26px; }
.svc-item::before {
  content: "";
  position: absolute; left: 0; top: 7px;
  width: 9px; height: 9px;
  border: 1.5px solid var(--card-accent, var(--fs-gold));
  transform: rotate(45deg);
  background: var(--card-accent-tint, var(--fs-gold-tint));
}
.svc-term { font-weight: 700; color: var(--fs-ink); }

/* ---- section typography ---- */
.h-hero { font-family: var(--fs-font-display); font-weight: 700; font-size: var(--fs-step-hero); line-height: 1.12; letter-spacing: -0.015em; color: var(--fs-pearl); margin: 26px 0 0; text-wrap: balance; font-variant-caps: small-caps; }
.h-xl { font-family: var(--fs-font-display); font-weight: 700; font-size: var(--fs-step-h1); line-height: 1.16; letter-spacing: -0.015em; margin: 20px 0 0; text-wrap: balance; }
.h-lg { font-family: var(--fs-font-display); font-weight: 700; font-size: var(--fs-step-h2); line-height: 1.18; letter-spacing: -0.01em; margin: 18px 0 0; }
.h-md { font-family: var(--fs-font-display); font-weight: 700; font-size: var(--fs-step-h3); line-height: 1.25; color: var(--fs-ink); margin: 0 0 14px; }
.lede { font-family: var(--fs-font-body); font-size: var(--fs-step-body-lg); line-height: 1.75; text-wrap: pretty; }

/* mobile */
@media (max-width: 1024px) {
  .section { padding: var(--fs-space-8) var(--fs-gutter); }
  .nav-links-desktop { display: none !important; }
}
@media (min-width: 1025px) {
  .nav-toggle { display: none !important; }
}

/* stack two-column grids on narrow screens */
@media (max-width: 880px) {
  .grid-2up { grid-template-columns: 1fr !important; gap: 40px !important; }
  .grid-3up { grid-template-columns: 1fr !important; gap: 20px !important; }
  .method-grid { grid-template-columns: 1fr !important; }
  .method-grid > * { border-right: none !important; border-bottom: 1px solid var(--fs-border); }
}