/* ==========================================================================
   AdiBeam Solutions — Global Stylesheet
   Brand: #E03434 (logo red) on warm charcoal
   ========================================================================== */

:root {
  --brand: #E03434;
  --brand-dark: #B92626;
  --brand-light: #FF5A5A;
  --brand-tint: #FDECEC;

  --ink: #1A0F0E;
  --ink-2: #2E1F1D;
  --body: #4A3A38;
  --muted: #7A6A68;

  --line: #EAE2E1;
  --surface: #FFFFFF;
  --surface-2: #FBF8F8;
  --surface-3: #F4EFEF;

  --dark: #14100F;
  --dark-2: #1F1817;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 8px rgba(26, 15, 14, .06);
  --shadow: 0 12px 32px rgba(26, 15, 14, .10);
  --shadow-lg: 0 28px 64px rgba(26, 15, 14, .16);

  --maxw: 1340px;
  --header-h: 76px;

  /* Hero copy must stay inside the empty left zone of every banner photograph.
     Each image is composed with its subject in the right half, so the text
     column is capped below half the container width — that way, on any screen
     wider than --maxw, the copy ends before the 50% mark no matter how wide
     the viewport gets. See .hero__inner. */
  --hero-col: 600px;

  --font-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.18;
  letter-spacing: -0.022em;
  margin: 0 0 .6em;
  font-weight: 800;
}
h1 { font-size: clamp(2.3rem, 5.2vw, 3.7rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.28rem; font-weight: 750; }
p  { margin: 0 0 1.1em; }
ul { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .45em; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.section { padding: 92px 0; }
.section--tight { padding: 64px 0; }
.section--alt { background: var(--surface-2); }
.section--dark { background: var(--dark); color: #CFC4C2; }
.section--dark h2, .section--dark h3 { color: #fff; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .78rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--brand);
  margin-bottom: 16px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--brand); border-radius: 2px; }
.section--dark .eyebrow { color: var(--brand-light); }
.section--dark .eyebrow::before { background: var(--brand-light); }

.section-head { max-width: 720px; margin-bottom: 54px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.lead { font-size: 1.12rem; color: var(--muted); margin-bottom: 0; }
.section--dark .lead { color: #A99C9A; }

.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 700; font-size: .97rem;
  padding: 15px 30px; border-radius: 100px;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  text-align: center; line-height: 1;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--brand); color: #fff; box-shadow: 0 10px 26px rgba(224, 52, 52, .32); }
.btn--primary:hover { background: var(--brand-dark); color: #fff; box-shadow: 0 16px 34px rgba(224, 52, 52, .40); }
.btn--ghost { border-color: rgba(255,255,255,.42); color: #fff; background: rgba(255,255,255,.06); backdrop-filter: blur(6px); }
.btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--outline { border-color: var(--line); color: var(--ink); background: #fff; }
.btn--outline:hover { border-color: var(--brand); color: var(--brand); }
.btn--sm { padding: 11px 22px; font-size: .9rem; }
.btn--wa { background: #25D366; color: #fff; box-shadow: 0 10px 26px rgba(37,211,102,.30); }
.btn--wa:hover { background: #1EBE5A; color: #fff; box-shadow: 0 16px 34px rgba(37,211,102,.38); }

.arrow-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 700; font-size: .94rem;
  color: var(--brand);
}
.arrow-link span { transition: transform .18s ease; }
.arrow-link:hover span { transform: translateX(4px); }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.90);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand img { height: 42px; width: auto; }
.brand__text { font-family: var(--font-display); font-weight: 800; font-size: 1.32rem; color: var(--ink); letter-spacing: -.02em; }

.nav { display: flex; align-items: center; gap: 14px; }
.nav a {
  font-family: var(--font-display); font-weight: 600; font-size: .96rem;
  color: var(--ink-2); padding: 9px 16px; border-radius: 8px;
  white-space: nowrap;
  transition: color .16s ease, background .16s ease;
}
.nav a:hover { color: var(--brand); background: var(--brand-tint); }
.nav a.is-active { color: var(--brand); }
.nav a.is-active::after {
  content: ""; display: block; height: 2px; background: var(--brand);
  border-radius: 2px; margin-top: 5px;
}
.header__cta { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line);
  background: #fff; border-radius: 10px; cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); position: relative; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 640px;
  display: flex; align-items: center;
  background-color: var(--dark);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* The hero photographs already carry the dark-left / crimson-right treatment,
     so this overlay only needs to guarantee text contrast on the left third. */
  background:
    linear-gradient(96deg, rgba(14,10,10,.90) 0%, rgba(15,10,10,.78) 32%, rgba(16,11,11,.44) 52%, rgba(18,12,12,.12) 76%, rgba(18,12,12,.02) 100%),
    radial-gradient(900px 480px at 84% 20%, rgba(224,52,52,.14), transparent 64%);
}
.hero--inner { min-height: 440px; }
.hero__inner {
  position: relative; z-index: 2; padding: 108px 0 96px;
  max-width: min(var(--hero-col), 100%);
}
.hero--inner .hero__inner { padding: 84px 0 72px; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20);
  color: #fff; font-size: .8rem; font-weight: 600; letter-spacing: .05em;
  padding: 8px 16px; border-radius: 100px; margin-bottom: 26px;
  backdrop-filter: blur(8px);
}
.hero__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-light); box-shadow: 0 0 0 4px rgba(255,90,90,.22); }
/* Slightly tighter than the global h1 scale — the hero column is narrower
   than a full-width heading, so the top of the clamp would over-wrap. */
.hero h1 { color: #fff; margin-bottom: 22px; font-size: clamp(2.1rem, 4.3vw, 3.2rem); }
.hero h1 em { font-style: normal; color: var(--brand-light); }
.hero__sub { font-size: 1.16rem; color: #CDC0BE; margin-bottom: 34px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__stats { display: flex; flex-wrap: wrap; gap: 30px 34px; margin-top: 48px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.16); }
.hero__stat b { display: block; font-family: var(--font-display); font-size: 1.95rem; font-weight: 800; color: #fff; line-height: 1; }
.hero__stat span { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #A29492; margin-top: 8px; }
.hero__crumb { position: relative; z-index: 2; font-size: .86rem; color: #A29492; margin-bottom: 18px; }
.hero__crumb a { color: #CDC0BE; }
.hero__crumb a:hover { color: #fff; }

/* Logo-strip / trust bar */
.trustbar { background: var(--dark-2); padding: 22px 0; }
.trustbar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 34px; }
.trustbar span { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: #8B7D7B; font-weight: 600; }
.trustbar b { font-family: var(--font-display); color: #fff; font-weight: 700; font-size: .96rem; }

/* ---------- Cards ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px 28px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #DCCFCE; }
.card p:last-child { margin-bottom: 0; }
.card__icon {
  width: 50px; height: 50px; border-radius: 13px;
  background: var(--brand-tint); color: var(--brand);
  display: grid; place-items: center; margin-bottom: 20px;
  font-size: 1.35rem;
}
.card__num {
  font-family: var(--font-display); font-size: .82rem; font-weight: 800;
  letter-spacing: .1em; color: var(--brand); margin-bottom: 12px;
}
.card--dark { background: var(--dark-2); border-color: rgba(255,255,255,.10); color: #B9ABA9; }
.card--dark:hover { border-color: rgba(224,52,52,.45); }
.card--dark .card__icon { background: rgba(224,52,52,.16); color: var(--brand-light); }

/* Industry cards: photograph across the top, content below. The image bleeds
   to the card edges, so the card itself drops its padding and the inner block
   supplies it instead. */
.card--photo { padding: 0; overflow: hidden; }
.card--photo .card__media { aspect-ratio: 16 / 9; background: var(--surface-3); overflow: hidden; }
.card--photo .card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.card--photo:hover .card__media img { transform: scale(1.045); }
.card--photo .card__body { padding: 26px 28px 30px; }
.card--photo .card__body h3 { margin-bottom: .45em; }
.card--photo .card__body p:last-child { margin-bottom: 0; }

.pill-list { list-style: none; padding: 0; margin: 18px 0 0; }
.pill-list li { position: relative; padding-left: 26px; margin-bottom: 11px; font-size: .96rem; }
.pill-list li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); opacity: .85;
}

/* Split feature */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.split__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--surface-3); aspect-ratio: 4/3; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }

/* Platform cards */
.platform { border-top: 4px solid var(--brand); }
.platform__tag {
  display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--brand); background: var(--brand-tint);
  padding: 6px 12px; border-radius: 100px; margin-bottom: 14px;
}

/* Stats band */
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.stat { text-align: center; padding: 26px 12px; border-radius: var(--radius); background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); }
.stat b { display: block; font-family: var(--font-display); font-size: 1.85rem; font-weight: 800; color: var(--brand-light); line-height: 1; }
.stat span { display: block; font-size: .8rem; color: #A99C9A; margin-top: 10px; line-height: 1.45; }
.stat cite {
  display: block; font-style: normal; font-size: .68rem; letter-spacing: .04em;
  color: #7C6F6D; margin-top: 9px; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* The source label on each tile is a link to the study. Quiet until hovered,
   but always underlined so it reads as clickable rather than as fine print. */
.stat cite a { color: inherit; text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(255,255,255,.28); }
.stat cite a:hover { color: #fff; text-decoration-color: var(--brand-light); }
.section--alt .stat cite a { text-decoration-color: var(--line); }
.section--alt .stat cite a:hover { color: var(--brand); text-decoration-color: var(--brand); }

.sources-note {
  margin: 26px auto 0; max-width: 640px; text-align: center;
  font-size: .82rem; line-height: 1.6; color: #8B7D7B;
}
.section--alt .sources-note { color: var(--muted); }

.section--alt .stat { background: #fff; border-color: var(--line); }
.section--alt .stat b { color: var(--brand); }
.section--alt .stat span { color: var(--body); }
.section--alt .stat cite { color: var(--muted); border-top-color: var(--line); }

.hero__note {
  font-size: .76rem; color: #9C8F8D; margin: 16px 0 0; line-height: 1.6; max-width: 560px;
}
.hero__note a { color: #C5B8B6; text-decoration: underline; text-underline-offset: 2px; }
.hero__note a:hover { color: #fff; }
.hero__stat sup { font-size: .62em; color: var(--brand-light); }

/* Steps */
.steps { counter-reset: step; display: grid; gap: 22px; grid-template-columns: repeat(4, 1fr); }
.step { position: relative; padding-top: 26px; border-top: 2px solid var(--line); }
.step__n { font-family: var(--font-display); font-size: .82rem; font-weight: 800; color: var(--brand); letter-spacing: .12em; margin-bottom: 10px; }
.step h3 { margin-bottom: .5em; }
.step p { font-size: .96rem; margin-bottom: 0; }

/* Testimonials */
.quote { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px 30px; }
.quote__mark { font-family: Georgia, serif; font-size: 3.2rem; line-height: .6; color: var(--brand); opacity: .28; display: block; margin-bottom: 14px; }
.quote p { font-size: 1.02rem; color: var(--ink-2); }
.quote footer { display: flex; align-items: center; gap: 13px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.quote__av { width: 42px; height: 42px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: .92rem; flex: none; }
.quote__who b { display: block; font-family: var(--font-display); color: var(--ink); font-size: .95rem; }
.quote__who span { font-size: .84rem; color: var(--muted); }

/* Accordion */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 4px; text-align: left;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink);
}
.acc__q:hover { color: var(--brand); }
.acc__q .ic { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; position: relative; transition: transform .25s ease, border-color .2s ease; }
.acc__q .ic::before, .acc__q .ic::after { content: ""; position: absolute; background: var(--brand); border-radius: 2px; }
.acc__q .ic::before { width: 11px; height: 1.8px; }
.acc__q .ic::after { width: 1.8px; height: 11px; transition: opacity .2s ease; }
.acc__q[aria-expanded="true"] .ic { border-color: var(--brand); transform: rotate(180deg); }
.acc__q[aria-expanded="true"] .ic::after { opacity: 0; }
.acc__a { display: none; padding: 0 40px 26px 4px; }
.acc__a p { margin-bottom: 0; color: var(--body); }
.acc__item.is-open .acc__a { display: block; }

/* CTA band */
.cta {
  background: linear-gradient(120deg, var(--dark) 0%, #2A1413 58%, var(--brand-dark) 130%);
  color: #CFC4C2; border-radius: 0;
}
.cta__inner { text-align: center; max-width: 720px; margin-inline: auto; }
.cta h2 { color: #fff; }
.cta .lead { color: #B9ABA9; margin-bottom: 30px; }
.cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--font-display); font-weight: 650; font-size: .88rem; color: var(--ink); }
.field label .req { color: var(--brand); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: .98rem; color: var(--ink);
  padding: 13px 15px; border: 1.5px solid var(--line); border-radius: 11px;
  background: #fff; transition: border-color .16s ease, box-shadow .16s ease;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(224,52,52,.13);
}
.form__note { font-size: .9rem; color: var(--muted); grid-column: 1 / -1; margin: 0; }
.form__note.is-ok    { color: #1B7F3B; font-weight: 600; }
.form__note.is-error { color: var(--brand-dark); font-weight: 600; }
#contact-submit[disabled] { opacity: .65; cursor: default; transform: none; box-shadow: none; }

/* Honeypot — off-screen rather than display:none, which some bots detect. */
.hp {
  position: absolute !important; left: -9999px !important; top: auto !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* reCAPTCHA v3 badge: hidden per Google's terms only because the required
   attribution text is shown next to the submit button instead. */
.grecaptcha-badge { visibility: hidden; }
.recaptcha-note { font-size: .78rem; color: var(--muted); grid-column: 1 / -1; margin: -4px 0 0; }
.recaptcha-note a { color: var(--muted); text-decoration: underline; }

.contact-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; }
.contact-card h3 { font-size: 1.02rem; margin-bottom: .35em; }
.contact-card p { margin-bottom: 0; font-size: .96rem; }
.contact-card a { font-weight: 600; }

/* ---------- Footer ---------- */
.footer { background: var(--dark); color: #9E908E; padding: 72px 0 0; font-size: .94rem; }
.footer h4 { font-family: var(--font-display); color: #fff; font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 18px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 44px; padding-bottom: 52px; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 11px; }
.footer a { color: #9E908E; }
.footer a:hover { color: #fff; }
.footer__brand img { height: 46px; margin-bottom: 18px; background: #fff; border-radius: 10px; padding: 4px; }
.footer__brand p { max-width: 330px; font-size: .93rem; line-height: 1.65; }
.footer__social { display: flex; gap: 10px; margin-top: 20px; }
.footer__social a {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16);
  display: grid; place-items: center; font-size: .8rem; font-weight: 700;
}
.footer__social a:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.footer__bar {
  border-top: 1px solid rgba(255,255,255,.10); padding: 24px 0;
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; align-items: center;
  font-size: .86rem;
}
.footer__bar nav { display: flex; gap: 22px; flex-wrap: wrap; }

/* Cookie bar */
.cookie {
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 200;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 18px 22px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; justify-content: space-between;
  max-width: 940px; margin-inline: auto; font-size: .9rem;
}
.cookie p { margin: 0; flex: 1 1 380px; }
.cookie div { display: flex; gap: 10px; }
.cookie[hidden] { display: none; }

/* Floating WhatsApp */
.wa-float {
  position: fixed; right: 20px; bottom: 96px; z-index: 150;
  width: 54px; height: 54px; border-radius: 50%; background: #25D366; color: #fff;
  display: grid; place-items: center; box-shadow: 0 10px 26px rgba(37,211,102,.4);
  transition: transform .18s ease;
}
.wa-float:hover { transform: scale(1.07); color: #fff; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr; gap: 38px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 900px) {
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 12px 20px 22px; box-shadow: var(--shadow);
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav { gap: 0; }
  .nav a { padding: 14px 8px; border-radius: 0; border-bottom: 1px solid var(--line); }
  .nav a.is-active::after { display: none; }
  .nav-toggle { display: flex; }
  .header__cta .btn { display: none; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .section { padding: 66px 0; }
  .grid-2, .grid-3, .grid-4, .steps, .stats { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .hero { min-height: 560px; }
  .hero__inner { padding: 78px 0 66px; }
  .hero__stats { gap: 28px; }
  .hero__stat b { font-size: 1.7rem; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bar { flex-direction: column; align-items: flex-start; }
  .wa-float { bottom: 20px; right: 16px; }
}

/* Signpost cards on the home page — whole card is the link. */
.card--link { text-decoration: none; color: inherit; }
.card--link h3 { transition: color .16s ease; }
.card--link:hover { color: inherit; }
.card--link:hover h3 { color: var(--brand); }
.card--link p { color: var(--body); flex: 1; }
.card--link .arrow-link { margin-top: 14px; }
.card--link:hover .arrow-link span { transform: translateX(4px); }

/* ---------- Legal pages ---------- */
.legal { max-width: 840px; margin-inline: auto; }
.legal__intro { font-size: 1.08rem; color: var(--ink-2); margin-bottom: 34px; }
.legal__intro p:last-child { margin-bottom: 0; }

.legal__toc {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px 28px; margin-bottom: 48px;
}
.legal__toc h2 {
  font-size: .8rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
}
.legal__toc ol { margin: 0; padding-left: 1.3em; columns: 2; column-gap: 34px; }
.legal__toc li { margin-bottom: 8px; font-size: .95rem; break-inside: avoid; }
.legal__toc a { color: var(--ink-2); }
.legal__toc a:hover { color: var(--brand); }

.legal__sec { margin-bottom: 44px; }
.legal__sec h2 {
  font-size: 1.5rem; padding-top: 8px; margin-bottom: .7em;
  border-top: 2px solid var(--line);
}
.legal__sec h3 {
  font-size: 1.05rem; margin-top: 1.6em; margin-bottom: .5em; color: var(--ink-2);
}
.legal__sec p, .legal__sec li { color: var(--body); }
.legal__sec ul { padding-left: 1.2em; }
.legal__sec code {
  background: var(--surface-3); padding: 2px 6px; border-radius: 5px;
  font-size: .9em; color: var(--ink);
}

.legal__table-wrap { overflow-x: auto; margin: 0 0 48px; }
.legal__table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 640px; }
.legal__table caption {
  text-align: left; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 12px;
}
.legal__table th, .legal__table td {
  text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.legal__table thead th {
  background: var(--surface-2); font-family: var(--font-display);
  font-size: .82rem; letter-spacing: .04em; color: var(--ink);
}
.legal__table td code { font-size: .85em; }

@media (max-width: 720px) {
  .legal__toc ol { columns: 1; }
  .legal__sec h2 { font-size: 1.28rem; }
}