/* ==========================================================================
   LMCIT — landing page
   Archivo (variable 400..700) self-hosted, one family throughout.
   Colour in OKLCH; neutrals tinted toward hue 60 so nothing reads dead grey.
   ========================================================================== */

/* ---- Fonts --------------------------------------------------------------
   One variable file per subset covers weights 400-700, replacing what was
   nine @font-face rules across three static weights. Body copy uses the same
   family; it previously fell back to a system stack and so rendered
   differently on every OS.                                                  */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('archivo-latin-ext.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: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('archivo-latin.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;
}

/* ---- Tokens ------------------------------------------------------------- */
:root {
  --bg:        oklch(0.985 0.004 60);
  --ink:       oklch(0.2 0.01 60);
  --ink-soft:  oklch(0.38 0.008 60);
  --ink-mute:  oklch(0.5 0.008 60);
  --line:      oklch(0.2 0.01 60 / 0.1);
  /* Navy is the brand's, taken from the logo sheet's reverse header
     (#0e1d33). It replaces the warm near-black the page used before the
     logo existed, so the mark sits on its own colour rather than fighting
     a warm ground. --navy-deep is the same hue pushed darker, for scrims
     over the hero photo where text has to stay legible. */
  --navy:      oklch(0.230 0.048 258);
  --navy-deep: oklch(0.190 0.045 258);
  --dark:      var(--navy-deep);
  --on-dark:   oklch(0.99 0.005 60);

  /* The logo's coral, for the mark and decorative fills ONLY. At L 0.645 it
     gives white text just 3.55:1, so it must never carry UI text. */
  --brand-coral: #e0603f;

  /* Accent lightness is pinned at 0.55: white text on it clears 4.5:1
     (measures 5.06:1). Raising it much past 0.57 fails WCAG AA. */
  --accent:       oklch(0.55 0.16 36);
  --accent-hover: oklch(0.50 0.16 34);
  --accent-ink:   oklch(0.52 0.15 35);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Header measure. Wider than the body content so the masthead and headline
     still feel expansive, but no longer tracking the full viewport: at 1920
     the header was 1690px against 1140px of content below it. */
  --maxw-hero: 1440px;

  /* Maximum measure for page content. Sections stay full-bleed (backgrounds
     and rules still run edge to edge) while their contents are centred and
     capped here. Without it, content tracked the viewport: 1690px wide at
     1920, 2253px at 2560, against text capped near 560px, which left every
     services row with several hundred pixels of dead space to its right.
     Tune this one value to make the page wider or narrower. */
  --maxw: 1140px;

  /* 13 / 16 / 20 — three steps, ~1.25 apart. The original had seven sizes
     between 12px and 19px, which reads as no hierarchy at all. */
  --t-micro: 13px;
  --t-body:  16px;
  --t-lead:  20px;
}

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

/* Nav and footer links are all in-page anchors, which otherwise teleport.
   Native smooth scrolling handles every one of them (nav, footer, the two
   CTAs, the skip link) with no JS and no scroll hijacking. scroll-padding
   keeps the target heading off the very top edge on arrival; the nav is not
   sticky, so it needs only a little breathing room rather than a full
   header offset. Disabled under reduced-motion at the end of this file. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 28px;
}

body {
  margin: 0;
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: var(--t-body);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
input, textarea, button, select { font-family: inherit; font-size: inherit; }
::selection { background: oklch(0.6 0.15 36 / 0.2); }

h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; margin: 0; }

.on-dark h1, .on-dark h2 {
  font-weight: 500;
  letter-spacing: -0.008em;
}

/* ---- Measure -------------------------------------------------------------
   Centres the content of everything BELOW the hero. Below --maxw the 6vw
   gutter wins; above it the surplus is split evenly as padding, so sections
   keep their full-bleed backgrounds and hairline rules.

   The hero is deliberately excluded: it keeps the full 6vw gutter at every
   width so the masthead and headline stay wide against the artwork.         */
.sec, .cta, .contact-sec, .foot {
  padding-inline: max(6vw, (100% - var(--maxw)) / 2);
}
:target, #main, #paths, #services, #about, #contact { scroll-margin-top: 12px; }
.hero {
  padding-inline: max(6vw, (100% - var(--maxw-hero)) / 2);
}

/* ---- Focus --------------------------------------------------------------
   The original had no focus styling of any kind; the underline-only inputs
   gave keyboard users nothing to see.                                       */
:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :where(a, button):focus-visible { outline-color: oklch(0.92 0.05 60); }

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 50;
  background: var(--navy); color: var(--on-dark);
  padding: 10px 18px; border-radius: 3px; font-weight: 600;
  transition: top 140ms var(--ease);
}
.skip:focus { top: 8px; }

.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Hero ---------------------------------------------------------------
   The art is near-white orange on its right side and the nav spans the full
   width, so the nav band needs its own scrim on top of the left-weighted
   one, or the links sit on flame at roughly 3:1.                            */
.hero {
  position: relative; overflow: hidden;
  padding-block: 22px 0;
  border-bottom: 1px solid var(--line);
  background: var(--dark) url('hero.webp') center 30% / cover no-repeat;
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, oklch(0.19 0.045 258 / 0.88) 0%, oklch(0.19 0.045 258 / 0.38) 140px, transparent 260px),
    linear-gradient(94deg,  oklch(0.19 0.045 258 / 0.94) 0%, oklch(0.19 0.045 258 / 0.80) 42%, oklch(0.19 0.045 258 / 0.44) 68%, oklch(0.19 0.045 258 / 0.26) 100%),
    linear-gradient(0deg,   oklch(0.19 0.045 258 / 0.78) 0%, transparent 34%);
}
.hero-inner { position: relative; z-index: 1; }

.nav {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid oklch(1 0 0 / 0.16);
  margin-bottom: clamp(32px, 4.4vw, 48px);
}
/* The logo is an image, not type: the wordmark is a rounded geometric face
   that Archivo cannot stand in for. Height-constrained so the intrinsic
   aspect ratio drives the width and nothing reflows on load. */
.logo { display: inline-flex; align-items: center; }
.logo img { display: block; height: 25px; width: auto; }
@media (min-width: 780px) { .logo img { height: 28px; } }

.foot-logo img { display: block; height: 23px; width: auto; margin-bottom: 12px; }

.nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 28px; }
.nav-links a { font-weight: 500; color: oklch(0.93 0.012 60); }
.nav-links a:hover { color: var(--on-dark); }
/* The phone sits in the nav as a plain link. The pill is reserved for the
   form, so the enquiry path stays the visually dominant one. */
.nav-tel {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 500; color: oklch(0.88 0.012 60);
  transition: color 160ms var(--ease);
}
.nav-tel:hover { color: var(--on-dark); }

.nav-call {
  display: inline-flex; align-items: center;
  font-weight: 600; color: var(--on-dark);
  background: oklch(1 0 0 / 0.1);
  border: 1px solid oklch(1 0 0 / 0.34); border-radius: 999px;
  padding: 8px 18px;
  transition: background-color 160ms var(--ease);
}
.nav-call:hover { background: oklch(1 0 0 / 0.2); }

/* The 60% cap used to apply at every width. On a 375px phone that left the
   headline in a ~198px column at 38px type: about five characters a line. */
.hero-copy { max-width: 100%; padding-bottom: 42px; }
.hero-copy h1 {
  font-size: clamp(29px, 3.7vw, 46px);
  line-height: 1.18;
  margin: 0 0 18px;
  color: var(--on-dark);
  max-width: 21ch;
}
.hero-sub {
  font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6;
  color: oklch(0.9 0.012 60);
  margin: 0 0 28px; max-width: 46ch;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }

@media (min-width: 900px) { .hero-copy { max-width: min(60%, 640px); } }

.cred {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 20px 0 24px;
  border-top: 1px solid oklch(1 0 0 / 0.22);
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.4px;
  color: oklch(0.96 0.012 60);
}
.cred span {
  padding: 8px 15px; border-radius: 999px;
  background: oklch(0.24 0.04 258 / 0.62);
  border: 1px solid oklch(1 0 0 / 0.2);
}

/* ---- Buttons ------------------------------------------------------------
   One primary treatment everywhere. The original used a bare text link in
   the hero and a filled button in the banner, making the most important
   call to action the weakest looking one.                                   */
.btn {
  display: inline-block; padding: 14px 30px;
  border: 1px solid transparent; border-radius: 3px;
  background: var(--accent); color: oklch(0.99 0.004 60);
  font-weight: 600; cursor: pointer; text-align: center;
  transition: background-color 160ms var(--ease), transform 160ms var(--ease);
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.btn--submit { align-self: flex-start; }

/* Secondary phone link. Deliberately not a button: the form and email are
   the paths being pushed, with the number available rather than competing. */
.call-link {
  color: oklch(0.86 0.012 60);
  border-bottom: 1px solid oklch(1 0 0 / 0.3);
  padding-bottom: 2px;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.call-link:hover { color: var(--on-dark); border-bottom-color: oklch(1 0 0 / 0.7); }
.call-link--dark { color: oklch(0.84 0.012 60); }

/* Same intent on light ground: present, not shouting. */
.tel-quiet {
  color: oklch(0.42 0.008 60);
  border-bottom: 1px solid oklch(0.2 0.01 60 / 0.22);
  padding-bottom: 2px;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.tel-quiet:hover { color: var(--ink); border-bottom-color: oklch(0.2 0.01 60 / 0.5); }

/* ---- Sections ------------------------------------------------------------ */
.sec { padding-block: clamp(42px, 4.6vw, 68px); border-bottom: 1px solid var(--line); }
.sec--tight { padding-block: clamp(26px, 3vw, 38px); }
.sec-intro { font-size: var(--t-body); line-height: 1.65; color: oklch(0.4 0.008 60); margin: 0 0 28px; max-width: 56ch; }

.h2 { font-size: clamp(27px, 3vw, 36px); margin: 0 0 14px; }

.eyebrow {
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.9px; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: 16px;
}

/* ---- Two paths -----------------------------------------------------------
   The divider and its 50px indents were inline styles, so they survived the
   single-column collapse: a rule hanging off the first block with mismatched
   padding below it. They now exist only in two-column mode.                 */
.paths { display: grid; grid-template-columns: 1fr; gap: 34px; }
.path h2 { font-size: clamp(22px, 2.3vw, 27px); margin: 0 0 14px; }
.path p { line-height: 1.65; color: var(--ink-soft); margin: 0; max-width: 60ch; }

@media (min-width: 780px) {
  .paths { grid-template-columns: 1fr 1fr; gap: 0; }
  .path--a { padding-right: clamp(28px, 4vw, 50px); border-right: 1px solid oklch(0.2 0.01 60 / 0.12); }
  .path--b { padding-left: clamp(28px, 4vw, 50px); }
}

/* ---- Services ------------------------------------------------------------ */
.svc {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px;
  padding: 20px 0; border-top: 1px solid var(--line);
  transition: background-color 160ms var(--ease);
}
.svc:hover { background: oklch(0.55 0.05 45 / 0.045); }
.svc-end { border-top: 1px solid var(--line); }
.svc-ico {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 8px;
  background: oklch(0.93 0.035 45); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
}
.svc-num {
  font-size: var(--t-micro); font-weight: 600; color: var(--ink-mute);
  width: 28px; flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.svc-title { font-size: var(--t-lead); flex: 1 1 190px; min-width: 190px; letter-spacing: -0.01em; }
.svc-desc { line-height: 1.6; color: oklch(0.4 0.008 60); flex: 2 1 260px; min-width: 220px; max-width: 62ch; margin: 0; }

/* ---- About / proof ------------------------------------------------------- */
.statement {
  font-weight: 600; font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.4; letter-spacing: -0.02em;
  margin: 0 0 34px; max-width: 30ch;
}
.proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px 40px; }
.proof h3 { font-size: var(--t-lead); margin: 0 0 8px; letter-spacing: -0.01em; }
.proof p { line-height: 1.6; color: oklch(0.4 0.008 60); margin: 0; max-width: 46ch; }

/* ---- Areas --------------------------------------------------------------- */
.areas { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 14px 26px; }
.areas h2 { font-size: var(--t-body); font-weight: 500; color: oklch(0.45 0.008 60); letter-spacing: 0; }
.areas ul { display: flex; gap: 8px 10px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
/* Separator via ::before so screen readers don't announce "slash" between
   every service area, as the literal "/" text nodes did. */
.areas li + li::before { content: "/"; color: oklch(0.66 0.008 60); margin-right: 10px; }

/* ---- CTA banner ---------------------------------------------------------- */
.cta {
  position: relative; overflow: hidden;
  padding-block: clamp(52px, 6vw, 74px); text-align: center;
  background: var(--dark) url('hero.webp') center 60% / cover no-repeat;
  color: oklch(0.97 0.004 60);
}
.cta-scrim { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: oklch(0.19 0.045 258 / 0.78); }
.cta-inner { position: relative; z-index: 1; }
.cta h2 { font-size: clamp(25px, 2.9vw, 34px); line-height: 1.2; margin: 0 0 12px; }
.cta p { line-height: 1.6; color: oklch(0.88 0.012 60); margin: 0 auto 24px; max-width: 46ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px 18px; justify-content: center; }

/* ---- Contact ------------------------------------------------------------- */
.contact-sec {
  padding-block: clamp(52px, 6vw, 76px);
  background: linear-gradient(200deg, var(--bg) 60%, oklch(0.95 0.025 50) 100%);
}
.contact { display: grid; grid-template-columns: 1fr; gap: 38px; }
@media (min-width: 860px) { .contact { grid-template-columns: 1fr 1fr; gap: 64px; } }

.contact-lede { line-height: 1.65; color: var(--ink-soft); margin: 0 0 22px; max-width: 44ch; }
.contact-dl { margin: 0; line-height: 1.7; }
.contact-dl dd { margin: 0 0 12px; }
.contact-dl dd:last-child { margin-bottom: 0; }
.ul { font-weight: 600; border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
.muted { color: oklch(0.42 0.008 60); }

/* Solid card rather than the original blurred glass panel. */
.contact-card {
  display: flex; flex-direction: column; gap: 20px;
  padding: clamp(24px, 3vw, 34px);
  border-radius: 10px;
  background: oklch(1 0 0 / 0.92);
  border: 1px solid var(--line);
  box-shadow: 0 8px 28px oklch(0.3 0.01 60 / 0.07);
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-weight: 600; color: oklch(0.3 0.008 60); }
.field .opt { font-weight: 400; color: var(--ink-mute); }
.field input, .field textarea {
  background: transparent; border: none;
  border-bottom: 1px solid oklch(0.2 0.01 60 / 0.28);
  color: inherit; padding: 9px 2px; width: 100%;
  transition: border-color 160ms var(--ease);
}
.field textarea { resize: vertical; }
.field input:hover, .field textarea:hover { border-bottom-color: oklch(0.2 0.01 60 / 0.5); }
.field input:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--accent);
  border-bottom-width: 2px; padding-bottom: 8px;
}
.field input:focus-visible, .field textarea:focus-visible { outline: none; }
/* Every field has a real persistent label; placeholders are hints only. */
::placeholder { color: oklch(0.5 0.006 60); opacity: 1; }

.form-note { font-size: var(--t-micro); line-height: 1.55; color: oklch(0.45 0.008 60); margin: 0; }
.form-status { line-height: 1.55; margin: 0; padding: 12px 14px; border-radius: 6px; }
.form-status[data-tone="ok"]  { background: oklch(0.94 0.05 150); color: oklch(0.36 0.09 150); }
.form-status[data-tone="err"] { background: oklch(0.94 0.05 28);  color: oklch(0.42 0.14 28); }
.hp { position: absolute; left: -9999px; }

/* ---- Footer -------------------------------------------------------------- */
.foot { padding-block: 32px; border-top: 1px solid var(--line); color: oklch(0.42 0.008 60); }
.foot-grid { display: flex; flex-wrap: wrap; gap: 26px 48px; justify-content: space-between; }
.foot a:hover { color: var(--ink); }
.foot p { margin: 0; line-height: 1.65; }
.foot-logo { display: flex; align-items: center; gap: 10px; font-weight: 600; color: oklch(0.25 0.01 60); margin-bottom: 10px; }
.foot-h { font-weight: 600; color: oklch(0.25 0.01 60); margin-bottom: 8px !important; }
.foot-contact { line-height: 1.9; }
.foot-links { display: flex; flex-direction: column; gap: 6px; line-height: 1.7; }
.foot-base {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid oklch(0.2 0.01 60 / 0.08);
  font-size: var(--t-micro); color: var(--ink-mute);
}

/* ==========================================================================
   MOBILE
   Below 700px the page is laid out for a phone rather than reflowed from the
   desktop grid. Three things were actually broken, not merely narrow:
   the nav wrapped to three rows, service descriptions wrapped underneath the
   icon instead of aligning with their heading, and every text link was a
   19px tap target (WCAG 2.5.8 asks 24px, iOS asks 44px).
   ========================================================================== */
@media (max-width: 700px) {

  /* --- Nav: one row --------------------------------------------------
     The section links are dropped here, not hidden behind a hamburger. On a
     four-section landing page scrolling IS the navigation, and a disclosure
     menu would add JS, a focus trap and an escape handler to reveal three
     links. All three remain in the footer, so nothing becomes unreachable. */
  .nav { flex-wrap: nowrap; gap: 12px; }
  .nav-links { gap: 8px; flex: 0 0 auto; }
  .nav-links a[href^="#services"],
  .nav-links a[href^="#paths"],
  .nav-links a[href^="#about"] { display: none; }

  /* Phone collapses to its icon: the full number is one tap away in the
     sticky bar, the contact block and the footer. */
  .nav-tel {
    width: 44px; height: 44px; justify-content: center; gap: 0;
    border: 1px solid oklch(1 0 0 / 0.28); border-radius: 999px;
    font-size: 0;                      /* hides the digits, keeps the a11y name */
  }
  .nav-tel svg { width: 17px; height: 17px; }
  .nav-call { padding: 11px 16px; }

  /* --- Tap targets ---------------------------------------------------- */
  .nav-links a, .foot-links a, .foot-contact a, .contact-dl a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .foot-links { gap: 0; }
  .field input, .field textarea { padding: 12px 2px; }

  /* --- Credibility strip ----------------------------------------------
     Three pills stacked to three rows and 125px of dead height. It now
     scrolls horizontally, bleeding to the screen edge so the cut-off pill
     reads as swipeable rather than clipped. */
  .cred {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    margin-inline: -6vw; padding-inline: 6vw;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .cred::-webkit-scrollbar { display: none; }
  .cred span { flex: 0 0 auto; scroll-snap-align: start; }

  /* --- Services: align the description with its heading ---------------- */
  .svc {
    display: grid; grid-template-columns: 40px 1fr;
    column-gap: 14px; row-gap: 2px; align-items: start;
    padding: 18px 0;
  }
  .svc-ico  { grid-column: 1; grid-row: 1 / span 3; }
  .svc-num  { grid-column: 2; grid-row: 1; width: auto; }
  .svc-title{ grid-column: 2; grid-row: 2; min-width: 0; }
  .svc-desc { grid-column: 2; grid-row: 3; min-width: 0; margin-top: 4px; }
  .svc:hover { background: none; }        /* no hover state on touch */

  /* --- Misc phone tuning ------------------------------------------------ */
  .hero-actions { gap: 12px; }
  .hero-actions .btn { width: 100%; }
  .areas { gap: 8px; }
  .foot-grid { gap: 22px; }

  /* Room for the sticky bar so it never covers the last footer line. */
  .foot { padding-bottom: 88px; }
}

/* --- Sticky action bar, phones only -------------------------------------
   Appears once the hero's own buttons have scrolled away, so the two are
   never on screen together. Purely additive: if the observer never runs the
   bar simply stays hidden and the page behaves as it does now. */
.mcta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: none; gap: 10px; padding: 10px 6vw calc(10px + env(safe-area-inset-bottom));
  background: oklch(0.19 0.045 258 / 0.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid oklch(1 0 0 / 0.14);
  transform: translateY(110%);
  transition: transform 240ms var(--ease);
}
.mcta.is-on { transform: none; }
.mcta a { flex: 1 1 0; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
.mcta .btn { padding: 12px 18px; }
.mcta-call {
  border: 1px solid oklch(1 0 0 / 0.4); border-radius: 3px;
  color: var(--on-dark); font-weight: 600;
}
@media (max-width: 700px) { .mcta { display: flex; } }

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