:root {
  --ink: #1b1f2a;
  --ink-soft: #4b5563;
  --paper: #f7f7f5;
  --panel: #ffffff;
  --primary: #1f3a5f;
  --primary-dark: #142a44;
  --accent: #c46a2c;
  --accent-dark: #9c5220;
  --accent-darker: #7d4119;
  --line: #e2e0da;
  --radius: 10px;

  /* Brand exploration — wordmark/hero treatment, not yet applied site-wide */
  --wm-navy: #0a2436;
  --wm-teal-deep: #123a5c;
  --wm-teal: #1c6ea3;
  --wm-cyan: #2ba7c4;
  --wm-mint: #8be9d4;

  /* Solid color for both the wordmark text and the spiral mark —
     indirected through its own token (rather than referencing --wm-*
     directly) so dark mode can swap in a different brand tone without
     touching --wm-navy itself, which the hero's own always-dark
     background depends on. Light mode matches the darkest end of the
     hero gradient; dark mode uses teal instead since navy would be
     nearly invisible against a dark header. */
  --wordmark-color: var(--wm-navy);
}

* { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

:focus-visible {
  outline: 3px solid var(--accent-dark);
  outline-offset: 2px;
}

/* Section headings receive scripted focus() after an in-page jump, purely
   so screen readers announce the new location — no visible ring needed. */
#services:focus, #case-study:focus, #why:focus, #about:focus, #contact:focus {
  outline: none;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--primary-dark);
  color: #fff;
  padding: 12px 20px;
  z-index: 100;
  border-radius: 0 0 6px 0;
}
.skip-link:focus {
  left: 0;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  margin: 0 0 0.5em;
  color: var(--primary-dark);
}

a { color: var(--primary); }

.wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  background: rgba(247, 247, 245, 0.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  z-index: 20;
}

/* Keep anchor-jump targets clear of the fixed header */
#services, #case-study, #why, #about, #contact {
  scroll-margin-top: 70px;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
}
.logo-text {
  font-family: 'Righteous', Georgia, "Times New Roman", serif;
  font-size: 1.68rem;
  letter-spacing: 0.01em;
  color: var(--wordmark-color);
}
.logo-mark { flex-shrink: 0; position: relative; top: 1px; left: -2px; }
.site-header nav a {
  color: var(--ink-soft);
  text-decoration: none;
  margin-left: 20px;
  font-size: 0.92rem;
}
.site-header nav a:hover { color: var(--ink); }
.nav-cta {
  background: var(--wm-teal-deep);
  color: #fff !important;
  padding: 8px 16px;
  border-radius: 999px;
}
.nav-cta:hover { background: var(--wm-teal); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}
.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}
.nav-toggle-icon {
  position: relative;
}
.nav-toggle-icon::before { position: absolute; top: -6px; }
.nav-toggle-icon::after { position: absolute; top: 6px; }

/* Buttons */
.btn-primary {
  display: inline-block;
  background: var(--accent-dark);
  color: #fff;
  padding: 12px 26px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn-primary:hover { background: var(--accent-darker); }
.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--primary-dark);
  padding: 11px 25px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.95rem;
  border: 1px solid var(--primary-dark);
}
.btn-secondary:hover { background: rgba(20,42,68,0.06); }

/* Hero */
.hero {
  position: relative;
  padding: 64px 0 56px;
  background: linear-gradient(180deg, var(--wm-navy) 0%, var(--wm-teal-deep) 25%, var(--wm-teal) 50%, var(--wm-cyan) 75%, var(--wm-mint) 100%);
  color: #fff;
  overflow: hidden;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: rgba(8,10,16,0.5);
}
.hero-bound {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
.hero-graphic {
  position: absolute;
  width: 400px;
  height: 400px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  /* Same design as before (25% larger, centered, opacity stepped
     down twice now: 25% then another 20%) — stepped via media
     queries rather than a single calc() ramp: dividing one length by
     another inside calc() isn't reliably supported (Firefox drops
     the whole declaration and falls back to opacity 1, even though
     Chrome evaluates it fine), so this uses only plain,
     universally-supported breakpoint values instead. */
  opacity: 0.6;
}
@media (max-width: 1400px) { .hero-graphic { opacity: 0.51; } }
@media (max-width: 1200px) { .hero-graphic { opacity: 0.42; } }
@media (max-width: 1000px) { .hero-graphic { opacity: 0.34; } }
@media (max-width: 800px)  { .hero-graphic { opacity: 0.25; } }
@media (max-width: 600px)  { .hero-graphic { opacity: 0.18; } }
@media (max-width: 450px)  { .hero-graphic { opacity: 0.15; } }
.hero .wrap { position: relative; z-index: 1; }
.hero h1 {
  max-width: 580px;
  color: #fff;
  font-size: 2.4rem;
  line-height: 1.25;
  margin-bottom: 0.5em;
}
.hero-lede {
  max-width: 560px;
  color: #ffffff;
  font-size: 1.05rem;
  margin-bottom: 30px;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .btn-primary {
  background: var(--wm-navy);
}
.hero .btn-primary:hover { background: var(--wm-teal-deep); }
.hero .btn-secondary {
  color: #fff;
  border: 1px solid rgba(255,255,255,0.7);
}
.hero .btn-secondary:hover { background: rgba(255,255,255,0.12); }

/* Sections */
.section {
  padding: 48px 0;
  border-top: 1px solid var(--line);
}
.section h2 {
  font-size: 1.7rem;
}
.section-lede {
  color: var(--ink-soft);
  margin-top: -0.4em;
  margin-bottom: 1.4em;
}

/* Card grid, reused for services / how-it-worked / why-us */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 20px;
}
.why-us .card-grid,
.how-it-worked-heading + .card-grid {
  grid-template-columns: repeat(2, 1fr);
}
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.card h3, .card h4 {
  font-size: 1.05rem;
  margin-bottom: 0.5em;
  color: var(--primary-dark);
}
.card p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

/* Case study */
.case-study-link {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  border: 1px solid var(--line);
  margin: 20px 0 28px;
  position: relative;
}
.case-study-link img {
  display: block;
  width: 100%;
  height: auto;
}
.case-study-link-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(0deg, rgba(10,20,30,0.88) 0%, rgba(10,20,30,0) 100%);
  color: #fff;
  padding: 32px 22px 14px;
  font-size: 0.95rem;
  font-weight: 600;
}
.case-study-link:hover .case-study-link-label,
.case-study-link:focus-visible .case-study-link-label {
  text-decoration: underline;
}
.case-study-summary {
  font-size: 1.1rem;
  color: var(--ink);
}
.how-it-worked-heading {
  margin-top: 32px;
  font-size: 1.15rem;
  color: var(--accent-dark);
}
.case-study-result {
  margin-top: 24px;
  padding: 18px 22px;
  background: var(--panel);
  border-left: 4px solid var(--accent-dark);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.case-study-result strong { color: var(--primary-dark); }

/* About */
.about-layout {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}
.about-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.about-text { flex: 1; min-width: 0; }
.about p { max-width: 720px; }

/* Contact */
.contact-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 1.15rem;
  margin-top: 20px;
}
.contact-links a {
  text-decoration: underline;
}

/* Footer */
.site-footer {
  padding: 28px 0 48px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.85rem;
}
.disclaimer { font-weight: 600; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Mobile */
@media (max-width: 800px) {
  .card-grid,
  .why-us .card-grid,
  .how-it-worked-heading + .card-grid {
    grid-template-columns: 1fr;
  }
  .hero { padding: 40px 0 36px; }
  .hero h1 { font-size: 1.7rem; max-width: 85%; }
  .hero-lede { font-size: 0.98rem; }
  .about-layout { flex-direction: column; align-items: flex-start; gap: 16px; }

  .site-header .wrap { position: relative; flex-wrap: wrap; }
  .nav-toggle { display: block; }
  .site-header nav {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 4px 24px 18px;
    box-shadow: 0 8px 12px -8px rgba(0,0,0,0.15);
  }
  .site-header nav.open { display: flex; }
  .site-header nav a {
    margin-left: 0;
    width: 100%;
    padding: 12px 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--line);
  }
  .site-header nav .nav-cta {
    width: auto;
    margin-top: 10px;
    padding: 8px 16px;
    border-bottom: none !important;
  }
}

/* Dark mode — isolated entirely to this block so light mode is never
   touched. Every rule below only takes effect when the system/browser
   is in dark mode. Placed last in the file so it reliably wins the
   cascade over the equal-specificity light-mode rules above it —
   media-query scoping alone doesn't affect source-order precedence. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e7e9ec;
    --ink-soft: #a7adb8;
    --paper: #12151b;
    --panel: #1b1f27;
    --primary: #6fb8e0;
    --primary-dark: #eef2f5;
    --accent-dark: #b35f26;
    --accent-darker: #8a481c;
    --line: #5c6a80;

    /* Navy (the light-mode wordmark color) is nearly invisible against
       a dark header — swap to a brighter tone instead. Using wm-cyan
       rather than the nav-cta button's own wm-teal: thin anti-aliased
       text reads duller than a solid filled shape at the same hex
       value, so text needs to go a shade brighter to look equivalent. */
    --wordmark-color: var(--wm-cyan);
  }
  .site-header {
    background: rgba(18, 21, 27, 0.92);
  }
  .skip-link {
    background: var(--wm-navy);
  }
  .nav-cta {
    background: var(--wm-teal);
  }
  .nav-cta:hover {
    background: var(--wm-cyan);
  }
}