/* Luna Cyber marketing site: shared stylesheet.

   The colour tokens below are the Luna Cyber brand tokens, not site-local
   inventions: Ink #161B24, Brand blue #2F6FD0, Brand blue dark #174EA6,
   Muted #475569, Paper #F8F8F7, Border #E8EAED, Navy #0D1118, plus the five
   reserved severity signals. Keep them in step with the brand token list so
   a report and this site read as one family; the neutrals used to carry a
   green cast, which made every document built to brand look unrelated to
   the site. Brand blue stays reserved for actions and emphasis, never
   decoration, and amber/red only ever mean severity.

   Type: a serif display face for authority/trust (a security consultancy is
   selling judgement, not just software) with Manrope for body copy. Source
   Serif 4 for display headings (Fraunces' large-optical-size letterforms,
   notably the "F", read as too stylised for this brand). Note this pairing
   is the web voice; the document brand typeface is Poppins, with Aptos or
   Calibri substituted in client-bound Word files. */

/* Self-hosted webfonts, so the site makes no third-party requests at all
   and the CSP can stay strict. These are VARIABLE fonts: one file per family
   per subset covers weights 400-700, rather than one file per weight (the
   Google CDN serves the identical variable file for each weight, so asking
   per-weight downloads the same bytes four times over).

   unicode-range means latin-ext is only fetched if a page actually uses
   those glyphs. Both families are SIL Open Font License 1.1 -- see
   fonts/OFL.txt. Regenerate from the Google Fonts css2 API if the weight
   range changes; keep the local url() paths. */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/manrope-latin-ext-var.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/manrope-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/source-serif-4-latin-ext-var.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/source-serif-4-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #f8f8f7;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --ink: #161b24;
  --ink-soft: #475569;
  --ink-faint: #5a6472;
  --line: #e8eaed;
  --line-strong: #b9c2d0;

  --brand: #2f6fd0;
  --brand-strong: #174ea6;
  --brand-soft: #e7eefb;
  --brand-contrast: #ffffff;

  --navy: #0d1118;
  --navy-soft: #eef1f6;

  --note: #475569;
  --note-soft: #f7f9fc;

  /* Severity signal colours. Reserved: these carry meaning and are never used
     decoratively, so a severity word on the site reads the same as a severity
     cell in a report. Each passes AA on white and as white-on-fill. */
  --sev-critical: #b3261e;
  --sev-high: #c2410c;
  --sev-medium: #a16207;
  --sev-low: #1f7a5a;
  --sev-info: #475569;

  --radius: 20px;
  --maxw: 72rem;
  --display: "Source Serif 4", Georgia, serif;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --shadow-soft: 0 1px 2px rgba(22, 27, 36, 0.04), 0 12px 28px -14px rgba(22, 27, 36, 0.14);
  --shadow-lift: 0 2px 4px rgba(22, 27, 36, 0.05), 0 24px 48px -18px rgba(22, 27, 36, 0.22);
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1118;
    --surface: #141d2b;
    --surface-2: #1b2431;
    --ink: #ffffff;
    --ink-soft: #cbd5e1;
    --ink-faint: #9aa7b8;
    --line: #24303f;
    --line-strong: #354354;

    --brand: #60a5fa;
    --brand-strong: #60a5fa;
    --brand-soft: #17253f;
    --brand-contrast: #05101f;

    --navy: #cbd5e1;
    --navy-soft: #141d2b;

    --note: #cbd5e1;
    --note-soft: #1b2431;

    /* Lightened for contrast against the dark surfaces; same five levels. */
    --sev-critical: #f28b82;
    --sev-high: #fbaa74;
    --sev-medium: #e3bb61;
    --sev-low: #6ee7b7;
    --sev-info: #cbd5e1;

    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.2), 0 12px 28px -14px rgba(0, 0, 0, 0.45);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.25), 0 24px 48px -18px rgba(0, 0, 0, 0.55);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
p { margin: 0.7em 0; }
a { color: var(--brand-strong); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.6rem; }
img, svg { max-width: 100%; }

/* Nav */
.site-nav {
  position: sticky; top: 1rem; z-index: 20;
  max-width: calc(var(--maxw) - 1.6rem); margin: 1rem auto 0;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
}
.site-nav .wrap { display: flex; align-items: center; gap: 2rem; padding: 0.7rem 0.9rem 0.7rem 1.4rem; max-width: none; }
.site-nav .brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 1.05rem; margin-right: auto; text-decoration: none; color: var(--ink); }
.site-nav .brand svg { color: var(--brand); width: 26px; height: 26px; flex-shrink: 0; }
.site-nav .brand .brand-text span { color: var(--brand-strong); }
.site-nav-links { display: flex; gap: 1.6rem; align-items: center; }
.site-nav-links a { text-decoration: none; color: var(--ink-soft); font-weight: 500; font-size: 0.95rem; }
.site-nav-links a:hover, .site-nav-links a[aria-current="page"] { color: var(--ink); }
.site-nav .cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--brand); color: var(--brand-contrast);
  padding: 0.55rem 1.1rem; border-radius: 999px; font-weight: 600; font-size: 0.92rem;
  text-decoration: none; white-space: nowrap;
  transition: background-color 0.3s var(--ease), transform 0.4s var(--ease);
}
.site-nav .cta:hover { background: var(--brand-strong); transform: translateY(-1px); }

/* Hero */
.hero { padding: 6.5rem 0 5rem; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1fr; }
.hero.has-visual .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 3rem; align-items: start; }
.hero-visual { margin-top: 0.4rem; }
/* Below the two-column breakpoint the visual moves under the copy rather
   than disappearing, it was the only image on the page for phone visitors. */
@media (max-width: 64rem) {
  .hero.has-visual .wrap { grid-template-columns: 1fr; gap: 2.4rem; }
  .hero-visual { max-width: 24rem; margin-top: 0; }
}

/* Hero visual: brand illustration (Southern Cross + fern + circuit motif) */
.hero-visual {
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
  border: 1px solid var(--line); border-radius: calc(var(--radius) + 8px);
  padding: 0.6rem; box-shadow: var(--shadow-lift);
}
.hero-visual-inner {
  border-radius: calc(var(--radius) + 2px); overflow: hidden;
  aspect-ratio: 600 / 460; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.hero-visual-inner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero .eyebrow.tagline { letter-spacing: 0.24em; padding-right: 0.55rem; }
.hero .eyebrow {
  display: inline-block; width: fit-content; color: var(--brand-strong); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; font-size: 0.74rem; margin-bottom: 1.2rem;
  background: var(--brand-soft); padding: 0.35rem 0.8rem; border-radius: 999px;
}
.hero h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1.08; max-width: 40rem; }
.hero .lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 38rem; margin-top: 1.1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }

.btn {
  display: inline-flex; align-items: center; gap: 0.6rem; white-space: nowrap;
  padding: 0.85rem 0.85rem 0.85rem 1.5rem; border-radius: 999px; font-weight: 600; font-size: 1rem;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform 0.4s var(--ease), background-color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn-primary {
  background: var(--brand); color: var(--brand-contrast);
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover { background: var(--brand-strong); box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.btn-primary svg {
  background: color-mix(in srgb, var(--brand-contrast) 18%, transparent);
  width: 30px; height: 30px; border-radius: 999px; padding: 7px;
  transition: transform 0.4s var(--ease);
}
.btn-primary:hover svg { transform: translate(2px, -1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); padding: 0.85rem 1.5rem; }
.btn-ghost:hover { border-color: var(--ink-faint); transform: translateY(-1px); }

/* Sections */
section { padding: 5.5rem 0; }
section.tight { padding: 3rem 0; }
.section-head { max-width: 40rem; margin-bottom: 2.6rem; }
.section-head .eyebrow {
  display: inline-block; color: var(--brand-strong); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; font-size: 0.72rem; margin-bottom: 0.9rem;
  background: var(--brand-soft); padding: 0.3rem 0.75rem; border-radius: 999px;
}
.section-head h2 { font-size: clamp(1.5rem, 2.7vw, 2rem); }
.section-head p { color: var(--ink-soft); font-size: 1.08rem; }

.band { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-navy { background: var(--navy-soft); }

/* Flow */
.flow-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.2rem; }
.flow-step {
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
  border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); padding: 0.5rem;
}
.flow-step > * { padding-left: 1.2rem; padding-right: 1.2rem; }
.flow-step .num {
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-strong); background: var(--brand-soft);
  width: fit-content; padding: 0.3rem 0.65rem; border-radius: 999px; margin: 1.2rem 0 1rem;
}
.flow-step h3 { font-size: 1.15rem; margin: 0 1.2rem 0.4rem; }
.flow-step p { color: var(--ink-soft); font-size: 0.96rem; margin: 0 1.2rem 1.2rem; }

/* Cards */
.cards-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem; margin-top: 1rem; }
.offer-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px);
  padding: 2.1rem; text-decoration: none; color: inherit;
  box-shadow: var(--shadow-soft);
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.offer-card:hover { border-color: var(--brand); transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-strong); background: var(--brand-soft); padding: 0.3rem 0.65rem; border-radius: 999px; width: fit-content; }
.offer-card .tag { margin-bottom: 1rem; }
.offer-card.featured { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow-lift); }
.offer-card h3 { font-size: 1.35rem; margin-bottom: 0.5rem; }
.offer-card p { color: var(--ink-soft); font-size: 0.98rem; }
.offer-card .arrow {
  margin-top: auto; padding-top: 1.2rem; font-weight: 600; color: var(--brand-strong); font-size: 0.94rem;
  transition: transform 0.4s var(--ease);
}
.offer-card:hover .arrow { transform: translateX(3px); }

/* Trust row */
.trust-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.8rem; }
.trust-pill { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; font-size: 0.92rem; padding: 0.5rem 0.95rem; border-radius: 999px; }
.trust-pill svg { width: 16px; height: 16px; }

/* Feature list */
.check-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.7rem; }
.check-list li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--ink-soft); }
.check-list li svg { flex-shrink: 0; margin-top: 0.2em; color: var(--brand-strong); width: 18px; height: 18px; }
.check-list li strong { color: var(--ink); }

/* Service detail blocks */
.service-block { padding: 3.4rem 0; border-top: 1px solid var(--line); }
.service-block:first-of-type { border-top: none; }
.service-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.9rem; margin-bottom: 1.2rem; }
/* Sits on one baseline with the tag (0.72rem) and the price (1.1rem), so the
   heading is held closer to them than the section-head scale would put it. */
.service-head h2 { font-size: clamp(1.35rem, 2.3vw, 1.75rem); }
.service-price { font-family: var(--display); font-weight: 600; color: var(--brand-strong); font-size: 1.1rem; }
.service-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; margin-top: 1.6rem; }
@media (max-width: 52rem) { .service-grid { grid-template-columns: 1fr; } }
.service-aside { background: var(--surface-2); border-radius: calc(var(--radius) + 4px); padding: 1.6rem 1.7rem; align-self: start; box-shadow: var(--shadow-soft); }
.service-aside h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin-bottom: 0.7rem; }

/* Illustrative example callout */
.example-box {
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  padding: 1.4rem 1.6rem; margin: 1.6rem 0; background: var(--surface);
}
.example-box .example-label {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 0.8rem;
}
.example-box .example-label svg { width: 14px; height: 14px; }
.example-box .finding { color: var(--sev-high); font-weight: 600; font-size: 0.95rem; }
.example-box .outcome { color: var(--brand-strong); font-weight: 600; font-size: 0.95rem; margin-top: 0.3rem; }
.example-box p.detail { color: var(--ink-soft); font-size: 0.94rem; margin-top: 0.5rem; }

/* FAQ */
.faq-item { border-bottom: 1px solid var(--line); padding: 1.4rem 0; }
.faq-item h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.faq-item p { color: var(--ink-soft); font-size: 0.98rem; margin: 0; }

/* Contact */
.contact-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px);
  padding: 2.6rem; max-width: 34rem; box-shadow: var(--shadow-lift);
}
.contact-panel h2 { font-size: 1.6rem; margin-bottom: 0.6rem; }
.contact-detail { display: flex; gap: 0.7rem; align-items: flex-start; margin-top: 1.4rem; }
.contact-detail svg { color: var(--brand-strong); width: 20px; height: 20px; flex-shrink: 0; margin-top: 0.15em; }
.contact-detail strong { display: block; color: var(--ink); }
.contact-detail span { color: var(--ink-soft); font-size: 0.94rem; }
.brief-list { list-style: none; padding: 0; margin: 0.8rem 0 0; font-size: 0.92rem; color: var(--ink-soft); }
.brief-list li { padding: 0.3rem 0; }
.brief-list li::before { content: "-"; margin-right: 0.5rem; color: var(--ink-faint); }

/* Small layout utilities. These exist so no page needs a style="" attribute:
   that is what lets the CSP ship style-src 'self' with no 'unsafe-inline'. */
.hero-tight { padding-bottom: 2.5rem; }
.hero-tighter { padding-bottom: 2rem; }
.flush { margin-bottom: 0; }
.stack-sm { margin-top: 0.8rem; }
.stack-md { margin-top: 1.4rem; }
.stack-lg { margin-top: 1.6rem; }
.text-soft { color: var(--ink-soft); }
.field-label {
  margin-top: 1.6rem; font-size: 0.85rem; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
}

/* Respect a reduced-motion preference: the cards, buttons and nav all animate
   transform on hover, which can be uncomfortable or trigger symptoms. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .offer-card:hover, .btn:hover, .site-nav .cta:hover,
  .btn-primary:hover svg, .offer-card:hover .arrow { transform: none; }
}

/* Legal pages (privacy statement) */
.legal { max-width: 44rem; }
.legal h2 { font-size: 1.35rem; margin: 2.6rem 0 0.6rem; }
.legal h3 { font-size: 1.02rem; margin: 1.6rem 0 0.4rem; }
.legal p, .legal li { color: var(--ink-soft); }
.legal ul { padding-left: 1.1rem; margin: 0.6rem 0; }
.legal li { padding: 0.2rem 0; }
.legal li strong, .legal p strong { color: var(--ink); }
.legal .updated { color: var(--ink-faint); font-size: 0.9rem; }
.legal a { color: var(--brand-strong); }

/* Editorial callout for facts that must be confirmed before this page is
   published. Deliberately neutral rather than amber: amber and red are
   reserved as severity signals, and lose that meaning if they also mark
   drafting notes. Delete each one as it's resolved, see README. */
.confirm {
  background: var(--note-soft); border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 1rem 1.2rem; margin: 1rem 0;
}
.confirm p { color: var(--note); font-size: 0.92rem; margin: 0; }
.confirm strong { color: var(--brand-strong); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; display: block; margin-bottom: 0.3rem; }

/* Footer */
footer.site-footer { border-top: 1px solid var(--line); padding: 3rem 0; margin-top: 2rem; }
footer.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; }
footer.site-footer .brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; }
footer.site-footer .brand svg { color: var(--brand); width: 22px; height: 22px; }
footer.site-footer p { color: var(--ink-faint); font-size: 0.88rem; margin: 0.5rem 0 0; max-width: 24rem; }
footer.site-footer nav { display: flex; gap: 1.4rem; }
footer.site-footer nav a { color: var(--ink-soft); text-decoration: none; font-size: 0.92rem; }

/* Microsoft Partner badge. The Microsoft logo may not be recoloured, and its
   grey wordmark has nowhere near enough contrast on the dark navy ground, so
   the badge always sits on a white plate in both themes. Sized well above the
   point where the four-square mark stops resolving. */
.partner-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: #ffffff; border: 1px solid var(--line);
  border-radius: 10px; padding: 0.7rem 0.9rem;
}
.partner-badge img { display: block; width: 150px; height: auto; }
.partner-badge-lg img { width: 190px; }

/* In the footer the badge rides on the same line as the wordmark, so it adds
   no height to the footer at all. Small, but still well clear of the point
   where the four-square mark stops resolving. */
.footer-id { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; }
footer.site-footer .partner-badge { padding: 0.28rem 0.42rem; border-radius: 7px; }
footer.site-footer .partner-badge img { width: 92px; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
#main:focus { outline: none; }

/* Skip link: the nav is sticky and the pages are long, so keyboard users
   need a way past it. */
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 40;
  background: var(--brand); color: var(--brand-contrast);
  padding: 0.7rem 1.2rem; border-radius: 999px; font-weight: 600; text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* Figures: shared frame for the explanatory diagrams. The SVGs carry their
   own light/dark palettes, so they need a transparent, unstyled surround. */
.figure { margin: 2.2rem 0 0; }
.figure img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius) + 4px); border: 1px solid var(--line); box-shadow: var(--shadow-soft); background: var(--surface); }
.figure figcaption { color: var(--ink-faint); font-size: 0.86rem; margin-top: 0.8rem; max-width: 46rem; }
.figure-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.figure-split .figure { margin-top: 0; }
@media (max-width: 60rem) { .figure-split { grid-template-columns: 1fr; gap: 2rem; } }
.service-figure { margin: 1.8rem 0 0; }
.service-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); }
.service-figure figcaption { color: var(--ink-faint); font-size: 0.85rem; margin-top: 0.7rem; }

@media (max-width: 44rem) {
  .flow-steps { grid-template-columns: 1fr; }
  /* Wrap the nav onto a second row rather than hiding the links. */
  .site-nav { border-radius: calc(var(--radius) + 6px); }
  .site-nav .wrap { flex-wrap: wrap; gap: 0.5rem 1rem; padding: 0.7rem 0.9rem 0.6rem 1.1rem; }
  .site-nav-links {
    order: 3; width: 100%; justify-content: space-between; gap: 0.6rem;
    border-top: 1px solid var(--line); padding-top: 0.6rem;
  }
  .site-nav-links a { font-size: 0.9rem; }
  .hero { padding: 4rem 0 3.5rem; }
  section { padding: 3.5rem 0; }
  .contact-panel { padding: 1.8rem; }
}