/* ===========================================================================
   SwyftCo — site stylesheet
   One file, no framework, no build step.

   Layout order:
     1. Tokens      — colours, type scale, spacing. Change the brand here.
     2. Reset
     3. Base        — element defaults
     4. Layout      — shell, header, footer
     5. Components  — hero, cards, accordion, legal page
     6. Utilities

   Colours are defined once as custom properties on :root and remapped for
   dark mode in a single block. Never hard-code a hex value below the Tokens
   section — add a token instead, or dark mode will not follow it.
   =========================================================================== */

@layer tokens, reset, base, layout, components, utilities;

/* ---------------------------------------------------------------- 1. TOKENS */
@layer tokens {
  :root {
    /* Brand identity */
    --green:        #1acc8d;   /* accent: on dark grounds, borders, icons */
    --green-ink:    #07714c;   /* accessible green for text on light (4.9:1) */
    --green-bright: #4be8b0;   /* hover on dark grounds */

    --navy-900: #01022e;
    --navy-800: #010351;
    --navy-700: #010483;
    --navy-600: #0a13a8;

    /* Semantic surface tokens — light mode */
    --bg:          #ffffff;
    --bg-subtle:   #f5f6fb;
    --surface:     #ffffff;
    --text:        #1c1f2b;
    --text-muted:  #5a6072;
    --heading:     var(--navy-700);
    --border:      #e3e5f0;
    --accent:      var(--green-ink);

    --hero-bg:     linear-gradient(155deg, var(--navy-800) 0%, var(--navy-900) 100%);
    --hero-text:   #ffffff;
    --hero-muted:  #b9bfd8;

    /* Fluid type scale */
    --step--1: clamp(0.83rem, 0.79rem + 0.19vw, 0.94rem);
    --step-0:  clamp(1rem,    0.95rem + 0.24vw, 1.13rem);
    --step-1:  clamp(1.2rem,  1.12rem + 0.4vw,  1.44rem);
    --step-2:  clamp(1.44rem, 1.31rem + 0.65vw, 1.83rem);
    --step-3:  clamp(1.73rem, 1.53rem + 1vw,    2.33rem);
    --step-4:  clamp(2.07rem, 1.77rem + 1.5vw,  2.96rem);
    --step-5:  clamp(2.49rem, 2.03rem + 2.3vw,  3.75rem);

    /* Spacing */
    --space-2xs: 0.375rem;
    --space-xs:  0.625rem;
    --space-s:   1rem;
    --space-m:   1.5rem;
    --space-l:   2.25rem;
    --space-xl:  3.5rem;
    --space-2xl: 5.5rem;

    --measure: 68ch;
    --radius:  14px;
    --radius-s: 8px;
    --shadow:  0 1px 2px rgb(1 3 81 / 6%), 0 8px 24px -12px rgb(1 3 81 / 18%);
    --ring:    0 0 0 3px color-mix(in srgb, var(--green) 45%, transparent);

    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, "Noto Sans", sans-serif;

    color-scheme: light dark;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg:         #0c0e1a;
      --bg-subtle:  #101326;
      --surface:    #14172a;
      --text:       #e6e8f2;
      --text-muted: #a2a8c0;
      --heading:    #eaecf7;
      --border:     #262a44;
      --accent:     var(--green);
      --shadow:     0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px -12px rgb(0 0 0 / 60%);
    }
  }
}

/* ----------------------------------------------------------------- 2. RESET */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  img, svg, video { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  p, h1, h2, h3, h4 { overflow-wrap: break-word; }
  :target { scroll-margin-top: 6rem; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ------------------------------------------------------------------ 3. BASE */
@layer base {
  html { scroll-behavior: smooth; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--step-0);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4 {
    color: var(--heading);
    line-height: 1.15;
    text-wrap: balance;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  h1 { font-size: var(--step-5); }
  h2 { font-size: var(--step-4); }
  h3 { font-size: var(--step-2); }
  h4 { font-size: var(--step-1); letter-spacing: -0.01em; }

  p { text-wrap: pretty; }

  a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
  a:hover { text-decoration-thickness: 2px; }

  :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-s); }

  ::selection { background: var(--green); color: var(--navy-900); }
}

/* ---------------------------------------------------------------- 4. LAYOUT */
@layer layout {
  .shell {
    width: min(100% - 2.5rem, 1140px);
    margin-inline: auto;
  }

  .section { padding-block: var(--space-2xl); }
  .section--tint { background: var(--bg-subtle); }

  .section__lead {
    margin-bottom: var(--space-xl);
  }
  .section__lead h2 { max-width: 30ch; }
  .section__lead p { max-width: var(--measure); }
  .section__eyebrow {
    display: block;
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--space-2xs);
  }

  /* --- Header --- */
  .header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s, background 0.2s;
  }
  .header[data-scrolled] { border-bottom-color: var(--border); }

  .header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    padding-block: var(--space-s);
  }

  .logo {
    font-size: var(--step-1);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--heading);
    text-decoration: none;
  }
  .logo b { color: var(--accent); font-weight: 700; }

  .nav { display: flex; align-items: center; gap: var(--space-m); }
  .nav a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--step--1);
    font-weight: 500;
    transition: color 0.15s;
  }
  .nav a:hover, .nav a[aria-current="page"] { color: var(--accent); }

  .nav-toggle { display: none; }

  @media (max-width: 44rem) {
    .nav-toggle {
      display: grid;
      place-items: center;
      width: 2.5rem; height: 2.5rem;
      background: none;
      border: 1px solid var(--border);
      border-radius: var(--radius-s);
      cursor: pointer;
    }
    .nav {
      position: absolute;
      inset-inline: 0;
      top: 100%;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      background: var(--bg);
      border-block: 1px solid var(--border);
      padding: var(--space-xs);
    }
    .nav[hidden] { display: none; }
    .nav a { padding: var(--space-xs) var(--space-s); font-size: var(--step-0); }
  }

  /* --- Footer --- */
  .footer {
    background: var(--navy-900);
    color: #c7cbe0;
    padding-block: var(--space-xl) var(--space-m);
    font-size: var(--step--1);
  }
  .footer h2, .footer h3 { color: #fff; }
  .footer__grid {
    display: grid;
    gap: var(--space-l);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    padding-bottom: var(--space-l);
  }
  .footer__brand p { margin-top: var(--space-2xs); color: #9aa0bd; max-width: 30ch; }
  .footer h3 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--space-xs); }
  .footer ul { list-style: none; padding: 0; display: grid; gap: var(--space-2xs); }
  /* A linked column heading keeps the heading colour, not the link colour. */
  .footer h3 a { color: inherit; text-decoration: none; }
  .footer h3 a:hover { color: var(--green-bright); }
  .footer a { color: #c7cbe0; text-decoration: none; }
  .footer a:hover { color: var(--green-bright); text-decoration: underline; }
  .footer__base {
    border-top: 1px solid #1b1f3d;
    padding-top: var(--space-m);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-m);
    justify-content: space-between;
    color: #868cab;
  }
}

/* ------------------------------------------------------------ 5. COMPONENTS */
@layer components {
  /* --- Hero --- */
  .hero {
    background: var(--hero-bg);
    color: var(--hero-text);
    padding-block: calc(var(--space-2xl) + 1rem) var(--space-2xl);
    position: relative;
    overflow: hidden;
  }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(50rem 26rem at 82% -10%, rgb(26 204 141 / 20%), transparent 65%);
    pointer-events: none;
  }
  .hero__inner { position: relative; z-index: 1; }
  .hero h1 { color: #fff; max-width: 22ch; }
  .hero p {
    color: var(--hero-muted);
    font-size: var(--step-1);
    margin-top: var(--space-s);
    max-width: 44ch;
    text-wrap: pretty;
  }
  .hero__actions { margin-top: var(--space-l); display: flex; flex-wrap: wrap; gap: var(--space-xs); }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.7em 1.4em;
    border-radius: 100px;
    font-weight: 600;
    font-size: var(--step--1);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .btn--primary { background: var(--green); color: var(--navy-900); }
  .btn--primary:hover { background: var(--green-bright); }
  .btn--ghost { border-color: rgb(255 255 255 / 30%); color: #fff; }
  .btn--ghost:hover { border-color: var(--green); color: var(--green-bright); }

  /* --- Capability cards --- */
  .cards {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  }
  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-m);
    box-shadow: var(--shadow);
  }
  .card--lead { border-color: color-mix(in srgb, var(--green) 55%, var(--border)); }
  /* The headline speciality takes two columns on wide screens: it earns the
     emphasis, and it stops seven cards from orphaning one on the last row. */
  @media (min-width: 62rem) {
    .card--lead { grid-column: span 2; }
  }
  .card__icon {
    width: 2.75rem; height: 2.75rem;
    display: grid; place-items: center;
    border-radius: var(--radius-s);
    background: color-mix(in srgb, var(--green) 14%, transparent);
    color: var(--accent);
    margin-bottom: var(--space-s);
  }
  .card__icon svg { width: 1.5rem; height: 1.5rem; }
  .card h3 { font-size: var(--step-1); margin-bottom: var(--space-2xs); }
  .card p { color: var(--text-muted); font-size: var(--step--1); }

  .prose { max-width: var(--measure); display: grid; gap: var(--space-s); }
  .prose p { color: var(--text-muted); }
  .prose strong { color: var(--text); font-weight: 600; }

  /* --- FAQ: native <details>, no JavaScript --- */
  .faq { display: grid; gap: var(--space-xs); max-width: var(--measure); }
  .faq details {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    overflow: hidden;
  }
  .faq details[open] { border-color: color-mix(in srgb, var(--green) 45%, var(--border)); }
  .faq summary {
    cursor: pointer;
    list-style: none;
    padding: var(--space-s) var(--space-m) var(--space-s) var(--space-s);
    font-weight: 600;
    color: var(--heading);
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: "";
    margin-inline-start: auto;
    flex: none;
    width: 0.6rem; height: 0.6rem;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    rotate: 45deg;
    translate: 0 0.3rem;
    transition: rotate 0.2s;
  }
  .faq details[open] summary::after { rotate: -135deg; translate: 0 0.55rem; }
  .faq summary:hover { color: var(--accent); }
  .faq__body { padding: 0 var(--space-s) var(--space-s); color: var(--text-muted); font-size: var(--step--1); }

  /* --- Contact --- */
  .contact-list { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); list-style: none; padding: 0; }
  .contact-list div { display: flex; gap: var(--space-xs); align-items: flex-start; }
  .contact-list svg { width: 1.25rem; height: 1.25rem; color: var(--accent); flex: none; margin-top: 0.25rem; }
  .contact-list dt { font-weight: 600; color: var(--heading); }
  .contact-list dd { margin: 0; color: var(--text-muted); }

  /* --- Legal page --- */
  .legal-layout {
    display: grid;
    gap: var(--space-xl);
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 60rem) {
    .legal-layout { grid-template-columns: 16rem minmax(0, 1fr); }
    .legal-toc { position: sticky; top: 6rem; }
  }
  .legal-toc {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-top: 3px solid var(--green);
    border-radius: var(--radius-s);
    padding: var(--space-m);
  }
  .legal-toc h2 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--space-xs); }
  .legal-toc ul { list-style: none; padding: 0; display: grid; gap: var(--space-2xs); }
  .legal-toc a { text-decoration: none; font-size: var(--step--1); }
  .legal-toc a:hover { text-decoration: underline; }

  .legal-body { max-width: var(--measure); }
  .legal-body article + article { margin-top: var(--space-xl); }
  .legal-body h2 {
    font-size: var(--step-3);
    padding-bottom: var(--space-2xs);
    border-bottom: 2px solid var(--green);
    margin-bottom: var(--space-s);
  }
  .legal-body h3 { font-size: var(--step-0); margin-top: var(--space-m); margin-bottom: var(--space-2xs); }
  .legal-body p, .legal-body li { color: var(--text-muted); font-size: var(--step--1); }
  .legal-body p + p { margin-top: var(--space-xs); }
  .legal-body ul { padding-inline-start: 1.2rem; display: grid; gap: var(--space-2xs); margin-block: var(--space-xs); }
  .legal-body strong { color: var(--text); }
  .legal-updated { font-size: var(--step--1); color: var(--text-muted); margin-bottom: var(--space-l); }

  .page-head { padding-block: var(--space-xl) 0; }
  .breadcrumb { font-size: var(--step--1); color: var(--text-muted); display: flex; gap: 0.5em; list-style: none; padding: 0; margin-bottom: var(--space-xs); }
  .breadcrumb a { text-decoration: none; }
  .breadcrumb li + li::before { content: "/"; margin-inline-end: 0.5em; color: var(--border); }
}

/* ------------------------------------------------------------- 6. UTILITIES */
@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .skip-link {
    position: absolute;
    top: 0; left: 0;
    padding: var(--space-xs) var(--space-s);
    background: var(--green);
    color: var(--navy-900);
    font-weight: 600;
    translate: 0 -110%;
    z-index: 100;
  }
  .skip-link:focus { translate: 0 0; }
}