/*!
 * site.css — distro.pk public marketing site.
 *
 * Lives in the app's /assets/ directory: that path is already the public static
 * dir and already excluded from the marketing rewrite in .htaccess, so it needs
 * no routing of its own. Nothing here is used by the app itself.
 *
 * THEMING. Every surface colour goes through a token — never write a literal
 * #fff for a background, or it will stay white in dark mode. The dark values
 * appear TWICE by necessity: once under prefers-color-scheme for visitors who
 * have made no explicit choice, and once under [data-theme="dark"] for the
 * toggle. CSS cannot share one block between a media query and a plain
 * selector, so the two lists must be kept in step.
 */

*, *::before, *::after { box-sizing: border-box; }

/* ── Tokens: light ──────────────────────────────────────────────────── */
:root {
  --indigo:#4f46e5; --indigo-600:#4338ca; --cyan:#06b6d4;
  --grad:linear-gradient(135deg,#4f46e5 0%,#6366f1 45%,#06b6d4 100%);

  --bg:#ffffff;          /* page */
  --surface:#ffffff;     /* cards, buttons, dropdown */
  --surface-2:#ffffff;   /* inputs */
  --header:rgba(255,255,255,.72);
  --soft:#f7f9fc;        /* alt sections */
  --tint:#eef2ff;        /* indigo chip */
  --tint-line:rgba(79,70,229,.12);

  --ink:#0b1220; --body:#3b475c; --muted:#64748b; --faint:#94a3b8;
  --line:#e6eaf0; --line-soft:#eef1f6;
  --dot:rgba(11,18,32,.055);
  --glow-1:rgba(79,70,229,.13); --glow-2:rgba(6,182,212,.12);

  --sh-sm:0 1px 2px rgba(11,18,32,.04), 0 1px 3px rgba(11,18,32,.03);
  --sh:0 1px 2px rgba(11,18,32,.04), 0 8px 20px -6px rgba(11,18,32,.08);
  --sh-lg:0 2px 4px rgba(11,18,32,.04), 0 18px 40px -12px rgba(11,18,32,.14);
  --sh-brand:0 8px 24px -8px rgba(79,70,229,.5);

  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px;
  --ease:cubic-bezier(.22,.61,.36,1);

  color-scheme: light;
}

/* ── Tokens: dark, when the visitor has expressed no preference ─────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --indigo:#818cf8; --indigo-600:#a5b4fc; --cyan:#22d3ee;
    --grad:linear-gradient(135deg,#4f46e5 0%,#6366f1 45%,#06b6d4 100%);

    --bg:#0b1220;
    --surface:#111a2b;
    --surface-2:#16223a;
    --header:rgba(11,18,32,.72);
    --soft:#0e1626;
    --tint:rgba(99,102,241,.15);
    --tint-line:rgba(129,140,248,.22);

    --ink:#eef2f8; --body:#c3cddc; --muted:#93a1b5; --faint:#6f7f96;
    --line:#22304a; --line-soft:#1a2438;
    --dot:rgba(255,255,255,.06);
    --glow-1:rgba(99,102,241,.20); --glow-2:rgba(6,182,212,.16);

    --sh-sm:0 1px 2px rgba(0,0,0,.4);
    --sh:0 2px 6px rgba(0,0,0,.4), 0 10px 24px -8px rgba(0,0,0,.5);
    --sh-lg:0 4px 10px rgba(0,0,0,.45), 0 24px 48px -14px rgba(0,0,0,.65);
    --sh-brand:0 8px 26px -10px rgba(79,70,229,.75);

    color-scheme: dark;
  }
}

/* ── Tokens: dark, chosen explicitly. Keep in step with the block above ─ */
:root[data-theme="dark"] {
  --indigo:#818cf8; --indigo-600:#a5b4fc; --cyan:#22d3ee;
  --grad:linear-gradient(135deg,#4f46e5 0%,#6366f1 45%,#06b6d4 100%);

  --bg:#0b1220;
  --surface:#111a2b;
  --surface-2:#16223a;
  --header:rgba(11,18,32,.72);
  --soft:#0e1626;
  --tint:rgba(99,102,241,.15);
  --tint-line:rgba(129,140,248,.22);

  --ink:#eef2f8; --body:#c3cddc; --muted:#93a1b5; --faint:#6f7f96;
  --line:#22304a; --line-soft:#1a2438;
  --dot:rgba(255,255,255,.06);
  --glow-1:rgba(99,102,241,.20); --glow-2:rgba(6,182,212,.16);

  --sh-sm:0 1px 2px rgba(0,0,0,.4);
  --sh:0 2px 6px rgba(0,0,0,.4), 0 10px 24px -8px rgba(0,0,0,.5);
  --sh-lg:0 4px 10px rgba(0,0,0,.45), 0 24px 48px -14px rgba(0,0,0,.65);
  --sh-brand:0 8px 26px -10px rgba(79,70,229,.75);

  color-scheme: dark;
}

html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--bg); }
body {
  margin:0; background:var(--bg); color:var(--ink); line-height:1.65;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
img,svg { max-width:100%; display:block; }
img { height:auto; }
a { color:var(--indigo); text-decoration:none; transition:color .15s var(--ease); }
a:hover { text-decoration:underline; }
:focus-visible { outline:2px solid var(--indigo); outline-offset:3px; border-radius:6px; }
::selection { background:rgba(99,102,241,.28); }

.wrap { max-width:1140px; margin:0 auto; padding:0 24px; }
.narrow { max-width:768px; }

/* ── Theme-aware logo ───────────────────────────────────────────────── */
.logo { display:block; }
.logo img { height:var(--logo-h,34px); width:auto; }
.logo-dark { display:none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display:none; }
  :root:not([data-theme="light"]) .logo-dark  { display:block; }
}
:root[data-theme="dark"] .logo-light { display:none; }
:root[data-theme="dark"] .logo-dark  { display:block; }
:root[data-theme="light"] .logo-light { display:block; }
:root[data-theme="light"] .logo-dark  { display:none; }

/* ── Type ───────────────────────────────────────────────────────────── */
h1,h2,h3,h4 { margin:0; letter-spacing:-.03em; }
h1 { font-size:clamp(36px,5.4vw,60px); line-height:1.05; font-weight:800; }
h2 { font-size:clamp(28px,3.6vw,42px); line-height:1.12; font-weight:780; letter-spacing:-.028em; }
h3 { font-size:19px; line-height:1.35; font-weight:680; letter-spacing:-.015em; }
p { margin:0 0 16px; }
.grad {
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; padding-bottom:.06em;
}
:root[data-theme="dark"] .grad,
.stat .n.grad { filter:saturate(1.15) brightness(1.12); }
.lede { font-size:clamp(17.5px,2vw,21px); color:var(--muted); line-height:1.55; }
.sub { color:var(--muted); font-size:17px; max-width:640px; }
.center { text-align:center; }
.center .sub, .center .lede { margin-left:auto; margin-right:auto; }

.eyebrow {
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:650; letter-spacing:.07em; text-transform:uppercase;
  color:var(--indigo); background:var(--tint); border:1px solid var(--tint-line);
  border-radius:100px; padding:6px 14px; margin-bottom:22px;
}
.eyebrow::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--grad); flex:none; }

/* ── Buttons ────────────────────────────────────────────────────────── */
/* line-height stays near 1 — the label is already flex-centred, so anything
   larger just pads the button vertically and makes it look unbalanced. Every
   variant carries a 1.5px border (transparent on the filled one) so buttons
   and the theme toggle come out the same height in the header row. */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1.5px solid transparent; border-radius:var(--r-sm); padding:11px 22px;
  font:inherit; font-size:15.5px; font-weight:620; line-height:1.2;
  cursor:pointer; text-align:center; white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease),
             opacity .15s var(--ease), border-color .15s var(--ease);
}
.btn:hover { text-decoration:none; transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn-primary { background:var(--grad); color:#fff; box-shadow:var(--sh-brand); }
.btn-primary:hover { color:#fff; box-shadow:0 12px 28px -8px rgba(79,70,229,.65); }
.btn-ghost { background:var(--surface); color:var(--ink); border-color:var(--line); box-shadow:var(--sh-sm); }
.btn-ghost:hover { color:var(--ink); border-color:var(--muted); box-shadow:var(--sh); }
.btn-white { background:#fff; color:#4338ca; box-shadow:0 6px 18px -6px rgba(0,0,0,.3); }
.btn-white:hover { color:#4f46e5; }
.btn-row { display:flex; gap:12px; flex-wrap:wrap; }
.center .btn-row { justify-content:center; }

/* ── Header ─────────────────────────────────────────────────────────── */
.site-header {
  position:sticky; top:0; z-index:60; background:var(--header);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line-soft);
}
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; height:72px; }
.brand:hover { text-decoration:none; }
.site-nav { display:flex; align-items:center; gap:4px; }
.site-nav a {
  color:var(--muted); font-size:15px; font-weight:520;
  padding:8px 14px; border-radius:var(--r-sm); transition:color .15s, background .15s;
}
.site-nav a:hover { color:var(--ink); background:var(--soft); text-decoration:none; }
.site-nav a.is-active { color:var(--ink); font-weight:620; background:var(--soft); }
.header-cta { display:flex; align-items:center; gap:10px; }
.header-cta .btn { padding:9px 16px; font-size:14.5px; }

.theme-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0; flex:none; cursor:pointer;
  background:var(--surface); color:var(--muted);
  border:1.5px solid var(--line); border-radius:var(--r-sm);
  transition:color .15s, border-color .15s, background .15s;
}
.theme-btn:hover { color:var(--ink); border-color:var(--muted); }
.theme-btn .theme-moon { display:none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .theme-sun  { display:none; }
  :root:not([data-theme="light"]) .theme-btn .theme-moon { display:inline-flex; }
}
:root[data-theme="dark"] .theme-btn .theme-sun  { display:none; }
:root[data-theme="dark"] .theme-btn .theme-moon { display:inline-flex; }
:root[data-theme="light"] .theme-btn .theme-sun  { display:inline-flex; }
:root[data-theme="light"] .theme-btn .theme-moon { display:none; }

.nav-toggle { display:none; }
.nav-btn {
  display:none; background:var(--surface); border:1.5px solid var(--line);
  border-radius:var(--r-sm); padding:9px 11px; cursor:pointer; line-height:0;
}
.nav-btn span { display:block; width:17px; height:2px; background:var(--ink); border-radius:2px; }
.nav-btn span + span { margin-top:4px; }

/* ── Sections ───────────────────────────────────────────────────────── */
section { padding:88px 0; }
.alt { background:var(--soft); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.section-head { margin-bottom:52px; }

.hero { position:relative; padding:104px 0 88px; overflow:hidden; }
.hero::before {
  content:""; position:absolute; inset:-30% 0 auto; height:640px; z-index:-1;
  background:
    radial-gradient(46% 52% at 50% 0%, var(--glow-1) 0%, transparent 70%),
    radial-gradient(38% 44% at 78% 12%, var(--glow-2) 0%, transparent 70%);
  pointer-events:none;
}
.hero::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(60% 55% at 50% 22%, #000 0%, transparent 78%);
  mask-image:radial-gradient(60% 55% at 50% 22%, #000 0%, transparent 78%);
}
.page-hero {
  position:relative; padding:80px 0 64px; overflow:hidden;
  border-bottom:1px solid var(--line-soft); background:var(--soft);
}
.page-hero::before {
  content:""; position:absolute; inset:-40% 0 auto; height:480px; z-index:0;
  background:radial-gradient(42% 50% at 50% 0%, var(--glow-1) 0%, transparent 70%);
  pointer-events:none;
}
.page-hero > * { position:relative; z-index:1; }

/* ── Grids & cards ──────────────────────────────────────────────────── */
.grid { display:grid; gap:22px; }
.g2 { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.g3 { grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); }

.card {
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:30px; box-shadow:var(--sh-sm);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card:hover { transform:translateY(-3px); box-shadow:var(--sh-lg); border-color:var(--muted); }
.card h3 { margin-bottom:9px; }
.card p { color:var(--muted); font-size:15.5px; }
.card p:last-child { margin-bottom:0; }
.card.flat:hover { transform:none; box-shadow:var(--sh-sm); border-color:var(--line); }

.ico {
  width:46px; height:46px; border-radius:13px; background:var(--grad); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:18px; box-shadow:var(--sh-brand); flex:none;
}
.ico-svg { width:22px; height:22px; }
.ico-num {
  width:38px; height:38px; border-radius:11px; background:var(--tint); color:var(--indigo);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:750; margin-bottom:16px; flex:none;
  border:1px solid var(--tint-line);
}

.split { display:grid; gap:60px; grid-template-columns:1fr 1fr; align-items:center; }
.split.wide-left { grid-template-columns:1.08fr .92fr; }

.checks { list-style:none; padding:0; margin:24px 0 0; }
.checks li { position:relative; padding-left:32px; margin-bottom:13px; color:var(--muted); font-size:16px; }
.checks li::before {
  content:""; position:absolute; left:0; top:4px; width:19px; height:19px; border-radius:50%;
  background:var(--tint); border:1px solid var(--tint-line);
}
.checks li::after {
  content:""; position:absolute; left:5.5px; top:9.5px; width:8px; height:4.5px;
  border-left:1.9px solid var(--indigo); border-bottom:1.9px solid var(--indigo);
  transform:rotate(-45deg);
}
.checks strong { color:var(--ink); font-weight:650; }

.stats { display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); text-align:center; }
.stat .n { font-size:34px; font-weight:800; letter-spacing:-.03em; line-height:1.1; }
.stat .l { color:var(--muted); font-size:14px; margin-top:2px; }

/* ── Feature rows ───────────────────────────────────────────────────── */
.frow { display:grid; gap:56px; grid-template-columns:1fr 1fr; align-items:center; padding:64px 0; }
.frow + .frow { border-top:1px solid var(--line-soft); }
.frow:nth-child(even) .frow-text { order:2; }
.frow h3 { font-size:clamp(23px,2.7vw,30px); letter-spacing:-.028em; margin-bottom:13px; }
.frow .sub { font-size:16.5px; }

/* ── Panels — always the brand gradient, in both themes ─────────────── */
.panel {
  position:relative; overflow:hidden; background:var(--grad);
  border-radius:var(--r-xl); padding:56px 48px; color:#fff;
  box-shadow:0 24px 60px -22px rgba(79,70,229,.55);
}
.panel::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 90% at 88% 8%, rgba(255,255,255,.20) 0%, transparent 62%);
}
.panel > * { position:relative; }
.panel h2 { color:#fff; margin-bottom:12px; }
.panel p { color:rgba(255,255,255,.9); }
.panel .hint { color:rgba(255,255,255,.78); font-size:13.5px; margin:20px 0 0; }

/* ── Tenant login form (sits on the gradient panel, stays light) ────── */
/* The field and its button form one compound control, so both get an EXPLICIT
   height. Left to font metrics they disagree: the input inherits the body
   line-height (1.65) while .btn sets 1.2, which computed to ~52px against
   ~44px. align-items:stretch hid that only while both sat on one flex line —
   the moment the button wrapped, the mismatch showed. */
.login-form {
  --ctl-h:52px;
  display:flex; gap:10px; flex-wrap:wrap; align-items:stretch;
}
.center .login-form { justify-content:center; }
.field {
  height:var(--ctl-h);
  display:flex; align-items:stretch; background:#fff; border-radius:var(--r-sm);
  overflow:hidden; max-width:100%; box-shadow:0 6px 18px -6px rgba(0,0,0,.3);
}
.field input {
  border:none; outline:none; padding:0 0 0 16px; font:inherit; font-size:16px;
  line-height:1; width:200px; min-width:0; color:#0b1220; background:#fff;
}
.field .suffix {
  display:flex; align-items:center; padding:0 16px 0 4px;
  color:#64748b; font-size:16px; white-space:nowrap; background:#fff;
}
.login-form .btn { height:var(--ctl-h); padding:0 26px; }
.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;
}

/* ── Lead / enquiry form ────────────────────────────────────────────── */
.lead-grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.lead-field { display:block; margin-bottom:16px; }
.lead-field > span {
  display:block; font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:6px;
}
.lead-field > span em { color:var(--indigo); font-style:normal; }
.lead-field input,
.lead-field textarea {
  width:100%; font:inherit; font-size:15.5px; color:var(--ink);
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:11px 14px; transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.lead-field input:focus,
.lead-field textarea:focus {
  outline:none; border-color:var(--indigo); box-shadow:0 0 0 3px rgba(99,102,241,.16);
}
.lead-field textarea { resize:vertical; min-height:84px; }
.lead-actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:6px; }
.lead-note { color:var(--muted); font-size:14px; }
.lead-err {
  background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); color:#b91c1c;
  border-radius:var(--r-sm); padding:11px 14px; font-size:15px; margin-bottom:18px;
}
/* Honeypot: off-screen rather than display:none — some bots skip hidden inputs
   but happily fill a field they can "see" in the DOM. */
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ── Pricing ────────────────────────────────────────────────────────── */
.pricing-grid { align-items:start; }
.plan { display:flex; flex-direction:column; position:relative; }
.plan-featured { border-color:var(--indigo); box-shadow:0 12px 34px -14px rgba(79,70,229,.45); }
.plan-badge {
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--grad); color:#fff; font-size:11.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; padding:5px 13px; border-radius:100px;
  white-space:nowrap;
}
.plan-blurb { color:var(--muted); font-size:15px; margin:0 0 18px; }
.plan-price { display:flex; align-items:baseline; gap:6px; margin-bottom:6px; }
.plan-amount { font-size:32px; font-weight:800; letter-spacing:-.03em; color:var(--ink); }
.plan-amount-ask { font-size:26px; }
.plan-period { color:var(--muted); font-size:15px; }
.plan-bestfor {
  color:var(--faint); font-size:13.5px; margin:0 0 20px;
  padding-bottom:20px; border-bottom:1px solid var(--line);
}
.plan-features { margin:0 0 24px; flex:1; }
.plan-features li { font-size:15px; margin-bottom:11px; }
.plan-cta { width:100%; margin-top:auto; }

/* ── Contact ────────────────────────────────────────────────────────── */
.contact-grid { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.contact-card {
  border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; background:var(--surface);
  box-shadow:var(--sh-sm); transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.contact-card:hover { transform:translateY(-3px); box-shadow:var(--sh-lg); }
.contact-card .ico { width:40px; height:40px; border-radius:11px; margin-bottom:16px; }
.contact-card .ico-svg { width:19px; height:19px; }
.contact-card .k {
  font-size:12.5px; text-transform:uppercase; letter-spacing:.055em;
  color:var(--faint); font-weight:650; margin-bottom:5px;
}
.contact-card .v { font-size:17.5px; font-weight:650; word-break:break-word; letter-spacing:-.01em; }

/* ── Legal pages ────────────────────────────────────────────────────── */
.legal h2 { font-size:21px; margin:42px 0 12px; font-weight:700; letter-spacing:-.02em; }
.legal p, .legal li { color:var(--body); font-size:16.5px; }
.legal ul { padding-left:22px; }
.legal li { margin-bottom:9px; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-footer { border-top:1px solid var(--line-soft); padding:64px 0 36px; background:var(--soft); }
.foot-grid { display:grid; gap:40px; grid-template-columns:1.5fr 1fr 1fr 1fr; margin-bottom:44px; }
.foot-brand .logo { margin-bottom:16px; }
.foot-brand p { color:var(--muted); font-size:14.5px; max-width:290px; margin:0; }
.foot-col h4 {
  font-size:12.5px; text-transform:uppercase; letter-spacing:.055em;
  color:var(--faint); font-weight:650; margin:0 0 15px;
}
.foot-col a { display:block; color:var(--body); font-size:15px; margin-bottom:11px; }
.foot-col a:hover { color:var(--indigo); text-decoration:none; }
.foot-base {
  border-top:1px solid var(--line); padding-top:26px; display:flex;
  justify-content:space-between; gap:16px; flex-wrap:wrap;
  color:var(--muted); font-size:14px;
}

/* ── Entrance, hero only ────────────────────────────────────────────── */
@keyframes riseIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.hero > .wrap > * { animation:riseIn .6s var(--ease) both; }
.hero > .wrap > *:nth-child(2) { animation-delay:.06s; }
.hero > .wrap > *:nth-child(3) { animation-delay:.12s; }
.hero > .wrap > *:nth-child(4) { animation-delay:.18s; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width:900px) { .foot-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:880px) {
  .split, .split.wide-left, .frow { grid-template-columns:1fr; gap:34px; }
  .frow:nth-child(even) .frow-text { order:0; }
  .frow { padding:44px 0; }
  section { padding:64px 0; }
  .hero { padding:64px 0 56px; }
  .page-hero { padding:52px 0 44px; }
  .panel { padding:36px 24px; border-radius:var(--r-lg); }
  .field input { width:160px; }

  .nav-btn { display:block; }
  .site-nav {
    position:absolute; top:72px; left:0; right:0; display:none;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface); border-bottom:1px solid var(--line);
    padding:10px 24px 20px; box-shadow:var(--sh-lg);
  }
  .nav-toggle:checked ~ .site-nav { display:flex; }
  .site-nav a { padding:13px 0; border-radius:0; border-bottom:1px solid var(--line-soft); font-size:16px; }
  .site-nav a:hover, .site-nav a.is-active { background:transparent; }
  .site-nav a:last-child { border-bottom:none; }
  .header-cta .btn-ghost { display:none; }
}
@media (max-width:520px) {
  .foot-grid { grid-template-columns:1fr; gap:30px; }
  .btn { width:100%; }
  .btn-row { width:100%; }
  .header-cta .btn { width:auto; }
  .header-cta .btn-primary { display:none; }
  /* Stacked, the field must match the full-width button beneath it */
  .field { width:100%; }
  .field input { flex:1; width:auto; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .card:hover, .contact-card:hover, .btn:hover { transform:none; }
}