/* ============================================================================
   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); }

/* ---- reveal (entrance motion disabled: this preview freezes the animation
   clock, so an opacity:0 base would never fade in. Kept as a no-op hook.) ---- */
.reveal { opacity: 1; transform: none; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
}

/* ============================================================================
   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); }

/* 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); }

/* 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); }
}