/* =========================================================
   SIDMIC SECURITY CONSULTING SERVICES — STYLESHEET
   Structure: 1) Tokens 2) Reset 3) Base type 4) Layout utils
   5) Header 6) Hero 7) Trust 8) Services 9) Remote Teams
   10) Why Sidmic 11) Industries 12) Process 13) About
   14) CTA 15) Contact 16) Footer 17) Responsive
   ========================================================= */

/* ---------- 1) DESIGN TOKENS ---------- */
:root {
  /* Color — a richer, slightly blue-teal-leaning dark palette instead of flat near-black */
  --ink-950: #0a0f1c;      /* page background base */
  --ink-900: #101a2c;      /* panel background */
  --ink-850: #13213a;      /* tile background (top of gradient) */
  --ink-800: #182a45;      /* tile background (bottom of gradient) */
  --ink-700: #24365a;      /* borders / dividers */
  --ink-650: #2c4269;      /* stronger border / hover border */
  --steel-500: #5588c7;    /* primary brand blue (from logo) */
  --steel-400: #7aa6dd;    /* lighter steel for links/hover */
  --steel-300: #a9c6ea;
  --teal-400: #3fc9b8;     /* live/scanning accent */
  --amber-400: #e0ac5f;    /* single warm accent — used sparingly */
  --amber-300: #f0c689;
  --paper-100: #f1f4fa;    /* primary text on dark */
  --paper-300: #c7d0e2;    /* secondary text */
  --paper-500: #8d98b4;    /* muted text */

  /* Glow / shadow */
  --glow-blue: rgba(85, 136, 199, 0.28);
  --glow-teal: rgba(63, 201, 184, 0.22);
  --shadow-tile: 0 18px 40px -22px rgba(0, 0, 0, 0.65);

  /* Type */
  --font-display: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;

  /* Layout */
  --max-width: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 8px;
}

/* ---------- 2) RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  color: var(--paper-100);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background-color: var(--ink-950);
  background-image:
    radial-gradient(1100px 620px at 88% -8%, rgba(85, 136, 199, 0.16), transparent 60%),
    radial-gradient(900px 560px at -10% 18%, rgba(63, 201, 184, 0.10), transparent 55%),
    radial-gradient(1200px 800px at 50% 115%, rgba(85, 136, 199, 0.08), transparent 60%),
    linear-gradient(180deg, #0b1120 0%, #0a0f1c 40%, #0a0e19 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; line-height: 1.15; font-weight: 600; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--steel-400); outline-offset: 3px; }

/* ---------- 3) BASE TYPE ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--steel-300);
  margin-bottom: 0.9rem;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--steel-400);
}
h2.section-title {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  max-width: 40ch;
}
.section-lede {
  color: var(--paper-300);
  max-width: 62ch;
  font-size: 1.05rem;
  margin-top: 1rem;
}

/* ---------- 4) LAYOUT UTILITIES ---------- */
.wrap {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section-head { margin-bottom: 2.75rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.98rem;
  border: 1px solid transparent;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--paper-100), var(--steel-300));
  color: var(--ink-950);
  box-shadow: 0 10px 26px -12px var(--glow-blue);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -14px var(--glow-blue); }
.btn-outline {
  border-color: var(--ink-700);
  color: var(--paper-100);
  background: rgba(255, 255, 255, 0.02);
}
.btn-outline:hover { border-color: var(--steel-400); color: var(--steel-300); transform: translateY(-2px); }
.btn-block { width: 100%; }

/* ---------- 5) HEADER ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 15, 28, 0.82);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--ink-700);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--paper-100);
}
.brand img { width: 38px; height: 38px; border-radius: 6px; }
.main-nav ul { display: flex; align-items: center; gap: 2rem; }
.main-nav a {
  font-size: 0.95rem;
  color: var(--paper-300);
  transition: color 160ms ease;
}
.main-nav a:hover { color: var(--paper-100); }
.header-cta { display: flex; align-items: center; gap: 1rem; }
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  padding: 0.5rem 0.65rem;
  color: var(--paper-100);
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: currentColor; margin: 4px 0; }

/* ---------- 6) HERO ---------- */
.hero {
  padding-top: clamp(3.5rem, 9vw, 6rem);
  position: relative;
  overflow: hidden;
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero-eyebrow {
  color: var(--steel-300);
  font-size: 0.88rem;
  margin-bottom: 1.2rem;
  display: block;
}
.hero h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.5rem);
  letter-spacing: -0.01em;
  max-width: 16ch;
}
.hero h1 em {
  font-style: normal;
  color: var(--steel-300);
}
.hero-sub {
  margin-top: 1.5rem;
  color: var(--paper-300);
  font-size: 1.08rem;
  max-width: 52ch;
}
.hero-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2.2rem;
  flex-wrap: wrap;
}
.hero-meta {
  margin-top: 2.75rem;
  display: flex;
  gap: 2.2rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--ink-700);
  padding-top: 1.6rem;
}
.hero-meta div { font-size: 0.9rem; color: var(--paper-500); }
.hero-meta strong { display: block; color: var(--paper-100); font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }

.hero-visual { position: relative; padding-bottom: 2.2rem; }
.hero-visual svg { width: 100%; height: auto; overflow: visible; }

/* ---- live scanning animation ---- */
.scan-ambient { animation: scanAmbient 4s ease-in-out infinite; transform-origin: 230px 230px; }
@keyframes scanAmbient {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.scan-pulse-ring { transform-origin: 230px 230px; opacity: 0; }
.scan-pulse-ring--1 { animation: scanPulse 3.2s cubic-bezier(.2,.6,.3,1) infinite; }
.scan-pulse-ring--2 { animation: scanPulse 3.2s cubic-bezier(.2,.6,.3,1) infinite; animation-delay: 1.6s; }
@keyframes scanPulse {
  0%   { transform: scale(0.78); opacity: 0.9; }
  80%  { transform: scale(1.06); opacity: 0; }
  100% { transform: scale(1.06); opacity: 0; }
}

.scan-sweep { animation: scanRotate 4.6s linear infinite; }
@keyframes scanRotate { to { transform: rotate(360deg); } }

.scan-node { animation: scanNode 2.8s ease-in-out infinite; transform-origin: center; }
@keyframes scanNode {
  0%, 100% { opacity: 0.55; r: 3px; }
  50%      { opacity: 1; }
}

.scan-line-inner { animation: scanInner 2.6s ease-in-out infinite; }
@keyframes scanInner {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.8; }
  100% { transform: translateY(210px); opacity: 0; }
}

.scan-check { filter: drop-shadow(0 0 6px rgba(63, 201, 184, 0.55)); }

.scan-status {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--paper-500);
  background: rgba(16, 26, 44, 0.7);
  border: 1px solid var(--ink-700);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.scan-status i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal-400);
  box-shadow: 0 0 0 0 rgba(63, 201, 184, 0.6);
  animation: statusBlip 1.8s ease-in-out infinite;
}
@keyframes statusBlip {
  0%   { box-shadow: 0 0 0 0 rgba(63, 201, 184, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(63, 201, 184, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 201, 184, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .scan-sweep, .scan-pulse-ring, .scan-node, .scan-line-inner, .scan-ambient, .scan-status i { animation: none; }
}

/* ---------- 7) TRUST / VALUE STRIP ---------- */
.trust {
  border-top: 1px solid var(--ink-700);
  border-bottom: 1px solid var(--ink-700);
  background: var(--ink-900);
}
.trust .wrap {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}
.trust-item {
  padding: 1.8rem 1.6rem;
  text-align: left;
  border-top: none;
  background: linear-gradient(165deg, var(--ink-850) 0%, var(--ink-900) 100%);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  box-shadow: var(--shadow-tile);
  position: relative;
  overflow: hidden;
}
.trust-item::before {
  content: "";
  position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--steel-500), var(--teal-400));
}
.trust-item h3 {
  font-size: 1rem;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--paper-100);
  margin-bottom: 0.5rem;
}
.trust-item p { color: var(--paper-500); font-size: 0.9rem; }

/* ---------- 8) SERVICES ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.service-card {
  background: linear-gradient(165deg, var(--ink-850) 0%, var(--ink-900) 100%);
  border: 1px solid var(--ink-700);
  border-left: 3px solid var(--steel-500);
  border-radius: var(--radius);
  padding: 1.9rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  box-shadow: var(--shadow-tile);
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.service-card:hover {
  border-left-color: var(--amber-400);
  border-color: var(--ink-650);
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--glow-blue);
}
.service-card h3 { font-size: 1.12rem; font-weight: 600; }
.service-card p { color: var(--paper-300); font-size: 0.96rem; flex-grow: 1; }
.service-card .card-link {
  font-size: 0.9rem;
  color: var(--steel-300);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ---------- 9) REMOTE TEAMS ---------- */
.remote-section {
  background:
    radial-gradient(800px 420px at 85% 0%, rgba(63, 201, 184, 0.08), transparent 60%),
    var(--ink-900);
  border-top: 1px solid var(--ink-700);
  border-bottom: 1px solid var(--ink-700);
}
.remote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.remote-copy p.section-lede { margin-bottom: 1.6rem; }
.capability-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.6rem 0 2rem;
}
.capability-tags li {
  border: 1px solid var(--ink-700);
  background: var(--ink-900);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.87rem;
  color: var(--paper-300);
  transition: border-color 160ms ease, color 160ms ease;
}
.capability-tags li:hover { border-color: var(--teal-400); color: var(--paper-100); }
.savings-card {
  background: linear-gradient(165deg, var(--ink-850) 0%, var(--ink-900) 100%);
  border: 1px solid var(--ink-650);
  border-radius: var(--radius);
  padding: 2.2rem;
  box-shadow: var(--shadow-tile), 0 0 0 1px var(--glow-blue);
  position: relative;
  overflow: hidden;
}
.savings-card::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(360px 220px at 90% -10%, var(--glow-teal), transparent 60%);
  pointer-events: none;
}
.savings-figure {
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--steel-300);
  line-height: 1;
}
.savings-card p.savings-note {
  color: var(--paper-500);
  font-size: 0.85rem;
  margin-top: 0.9rem;
}
.savings-list { margin-top: 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; }
.savings-list li {
  font-size: 0.93rem;
  color: var(--paper-300);
  padding-left: 1.1rem;
  position: relative;
}
.savings-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--steel-500);
}

/* ---------- 10) WHY SIDMIC ---------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.why-item {
  padding: 1.8rem 1.7rem;
  border-top: none;
  background: linear-gradient(165deg, var(--ink-850) 0%, var(--ink-900) 100%);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  box-shadow: var(--shadow-tile);
  transition: transform 160ms ease, border-color 160ms ease;
}
.why-item:hover { transform: translateY(-3px); border-color: var(--ink-650); }
.why-item h3 { font-size: 1.05rem; margin-bottom: 0.6rem; }
.why-item p { color: var(--paper-300); font-size: 0.93rem; }

/* ---------- 11) INDUSTRIES ---------- */
.industries-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem;
}
.industries-list li {
  background: linear-gradient(165deg, var(--ink-850) 0%, var(--ink-900) 100%);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem;
  font-size: 0.98rem;
  color: var(--paper-300);
  font-family: var(--font-display);
  font-weight: 500;
  box-shadow: var(--shadow-tile);
  transition: transform 160ms ease, border-color 160ms ease, color 160ms ease;
}
.industries-list li:hover { transform: translateY(-3px); border-color: var(--teal-400); color: var(--paper-100); }

/* ---------- 12) PROCESS ---------- */
.process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}
.process-step {
  border-top: 2px solid var(--steel-500);
  padding: 1.4rem 1.5rem 1.7rem;
  background: linear-gradient(165deg, var(--ink-850) 0%, var(--ink-900) 100%);
  border-left: 1px solid var(--ink-700);
  border-right: 1px solid var(--ink-700);
  border-bottom: 1px solid var(--ink-700);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-tile);
}
.process-step .step-index {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--paper-500);
  display: block;
  margin-bottom: 0.8rem;
}
.process-step h3 { font-size: 1.1rem; margin-bottom: 0.6rem; }
.process-step p { color: var(--paper-300); font-size: 0.92rem; }

/* ---------- 13) ABOUT ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.about-copy p { color: var(--paper-300); margin-top: 1.1rem; }
.about-panel {
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  padding: 2rem;
}
.about-panel ul { display: flex; flex-direction: column; gap: 1rem; }
.about-panel li {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  color: var(--paper-300);
  border-bottom: 1px solid var(--ink-700);
  padding-bottom: 1rem;
}
.about-panel li:last-child { border-bottom: none; padding-bottom: 0; }
.about-panel li strong { color: var(--paper-100); font-family: var(--font-display); font-weight: 600; }

/* ---------- 14) CTA BAND ---------- */
.cta-band {
  background: linear-gradient(135deg, var(--ink-900), var(--ink-800));
  border-top: 1px solid var(--ink-700);
  border-bottom: 1px solid var(--ink-700);
  text-align: center;
}
.cta-band h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); max-width: 26ch; margin-inline: auto; }
.cta-band p { color: var(--paper-300); margin: 1.1rem auto 2rem; max-width: 46ch; }

/* ---------- 15) CONTACT ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
.contact-info h3 { font-size: 1.2rem; margin-bottom: 1rem; }
.contact-info p { color: var(--paper-300); margin-bottom: 1.6rem; }
.contact-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.contact-list li { font-size: 0.95rem; color: var(--paper-300); }
.contact-list li strong { display: block; color: var(--paper-100); font-size: 0.85rem; font-weight: 600; margin-bottom: 0.2rem; }
.contact-list li a { color: var(--teal-400); font-weight: 500; transition: color 150ms ease; }
.contact-list li a:hover { color: var(--paper-100); }

.contact-form {
  background: linear-gradient(165deg, var(--ink-850) 0%, var(--ink-900) 100%);
  border: 1px solid var(--ink-700);
  padding: 2.2rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-tile);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.field label { font-size: 0.85rem; color: var(--paper-300); }
.field input, .field select, .field textarea {
  background: rgba(10, 15, 28, 0.55);
  border: 1px solid var(--ink-700);
  color: var(--paper-100);
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--teal-400);
  outline: none;
  box-shadow: 0 0 0 3px var(--glow-teal);
}
.field textarea { resize: vertical; min-height: 110px; }
.form-status { margin-top: 1rem; font-size: 0.9rem; color: var(--steel-300); min-height: 1.2em; }

/* ---------- 16) FOOTER ---------- */
.site-footer {
  background: var(--ink-900);
  border-top: 1px solid var(--ink-700);
  padding: 4rem 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}
.footer-brand .brand { margin-bottom: 1rem; }
.footer-brand p { color: var(--paper-500); font-size: 0.92rem; max-width: 40ch; margin-bottom: 0.9rem; }
.footer-email {
  display: inline-flex;
  color: var(--teal-400);
  font-weight: 600;
  font-size: 0.92rem;
  transition: color 150ms ease;
}
.footer-email:hover { color: var(--paper-100); }
.footer-col h4 { font-size: 0.92rem; margin-bottom: 1.1rem; color: var(--paper-100); }
.footer-col ul { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-col a { color: var(--paper-500); font-size: 0.9rem; transition: color 160ms ease; }
.footer-col a:hover { color: var(--paper-100); }
.footer-bottom {
  border-top: 1px solid var(--ink-700);
  padding-top: 1.6rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--paper-500);
}
.footer-bottom a { color: var(--paper-500); }
.footer-bottom a:hover { color: var(--paper-100); }

/* ---------- 17) RESPONSIVE ---------- */
@media (max-width: 980px) {
  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .header-cta .btn-outline { display: none; }

  .hero .wrap { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 340px; margin: 0 auto; }

  .trust .wrap { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .remote-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .industries-list { grid-template-columns: repeat(2, 1fr); }
  .process-row { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .trust .wrap { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .industries-list { grid-template-columns: 1fr; }
  .process-row { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-meta { gap: 1.4rem; }
}

/* Mobile nav (open state, toggled via JS) */
.main-nav.is-open {
  display: block;
  position: absolute;
  top: 76px;
  left: 0;
  right: 0;
  background: var(--ink-900);
  border-bottom: 1px solid var(--ink-700);
  padding: 1rem var(--gutter) 1.5rem;
}
.main-nav.is-open ul { flex-direction: column; align-items: flex-start; gap: 1.2rem; }