/* ============================================================
   LUNEX Pflegedienst – design system
   ------------------------------------------------------------
   Single source of truth. Everything (type, spacing, widths,
   radii, color) is a token in :root. Components and pages
   reference tokens only – no magic numbers downstream.
   Brand colors + gradient stops verified against
   "LUNEX Brand Guidelines 2026" (p. 9).
   ============================================================ */

/* ── Webfont ─────────────────────────────────────────────────
   INTERIM FACE. The brand typeface is *Indivisible* (Eric Olson,
   Process Type Foundry) per Brand Guidelines 2026 p. 8. It is a
   commercial face and needs a web licence, so Inter stands in for
   now – also a neo-grotesque, so the swap later is near-invisible.

   TO SWAP TO INDIVISIBLE: drop its woff2 files into site/fonts/,
   change the two src: urls and the font-family name below, and
   update --font-sans. Nothing else in the codebase names a font.

   Self-hosted on purpose: no request to fonts.googleapis.com, which
   keeps the Datenschutzerklärung honest (no third-party transfer).
   One variable file per subset covers weights 100–900.
   latin-ext is REQUIRED – "Šćekić" / "Kojadinović" in the Impressum
   live outside the latin subset.
   ============================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-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;
}

:root {
  /* ── Color ─────────────────────────────────────────────── */
  --teal:       #25BCBD;   /* RGB 37,188,189 – primary  */
  --teal-deep:  #075159;   /* RGB 7,81,89    – dark teal */
  --lime:       #D7DF23;   /* RGB 215,223,35 – accent   */
  --teal-soft:  #E7F7F7;   /* fill tint                 */
  --teal-tint:  #F2FBFB;   /* section background         */

  --ink:    #0E1A1C;
  --ink-2:  #3D4D4F;
  --ink-3:  #7B8A8C;
  --bg:     #FFFFFF;
  --line:   #E2EBEB;
  --line-2: #EEF4F4;
  --on-dark:      rgba(255,255,255,.92);
  --on-dark-soft: rgba(255,255,255,.80);

  --grad:      linear-gradient(100deg, var(--teal-deep) 0%, var(--teal) 65%, var(--lime) 100%);
  --grad-soft: linear-gradient(160deg, var(--teal-deep) 0%, var(--teal) 100%);

  /* ── Typography ────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-2xs:  12px;   /* micro labels, fine print        */
  --fs-xs:   13px;   /* eyebrows                         */
  --fs-sm:   14px;   /* nav, small body, card body       */
  --fs-md:   15px;   /* buttons                          */
  --fs-base: 16px;   /* body                             */
  --fs-lg:   18px;   /* lead, contact values, intros     */
  --fs-h3:   18px;   /* card / step / accordion titles   */
  --fs-xl:   20px;   /* callout / vision emphasis        */
  --fs-h2:   clamp(28px, 3.4vw, 40px);
  --fs-h1:   clamp(36px, 5vw, 62px);

  /* Brand Guidelines p. 8 name the weights Thin / Light / Regular / Bold / Black.
     500 + 600 are used heavily here (nav, buttons, eyebrows). If the licensed
     Indivisible cut ships without them, remap those two tokens rather than
     letting the browser snap them. */
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;
  --fw-bold: 700; --fw-black: 900;
  --lh-tight: 1.1;
  --lh-snug:  1.4;
  --lh-base:  1.6;
  --tracking-tight: -0.02em;
  --tracking-label: 0.14em;

  /* ── Spacing scale (4px base) ──────────────────────────── */
  --sp-3xs: 4px;
  --sp-2xs: 8px;
  --sp-xs:  12px;
  --sp-sm:  16px;
  --sp-md:  20px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-2xl: 40px;
  --sp-3xl: 48px;
  --sp-4xl: 64px;
  --sp-5xl: 80px;
  --sp-6xl: 96px;

  /* ── Layout ────────────────────────────────────────────── */
  /* ONE page width for the whole site, chrome included. Sections with a
     coloured ground still bleed edge-to-edge – it's the .wrap inside them
     that is constrained, never the section itself. */
  --container:        1180px;   /* every page + header + footer  */
  --container-prose:   820px;   /* long-form legal text only     */
  --container-text:    680px;   /* section intros / centred CTA  */
  --gutter:           var(--sp-lg);              /* page side padding */
  --section-y:        clamp(56px, 7vw, 88px);    /* vertical section rhythm */
  --stack-gap:        var(--sp-3xl);             /* gap between two-col blocks */

  /* ── Brand shape language (Brand Guidelines p.10/11/13) ── */
  --curve-h:      clamp(22px, 3.4vw, 54px); /* depth of the band curve */
  --curve-spread: 68%;                      /* see the curve block below */
  --mark-stroke:  clamp(6px, 1.1vw, 14px);  /* outline weight of marks */

  /* ── Radii / elevation ─────────────────────────────────── */
  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;
  --shadow:    0 1px 0 var(--line-2), 0 24px 60px -34px rgba(7,81,89,.28);

  --bottomnav-h: 68px;
}

@media (max-width: 880px) { :root { --gutter: var(--sp-md); } }
@media (max-width: 480px) { :root { --gutter: var(--sp-sm); } }

/* ── Base ────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--teal); color: #fff; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin: 0 0 .4em; font-weight: var(--fw-bold); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { margin: 0 0 1em; }

/* ── Layout primitives ───────────────────────────────────── */
.wrap          { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--prose   { max-width: var(--container-prose); }
.wrap--text    { max-width: var(--container-text); }

/* explicit ground (not just the body showing through) so that
   .section--curve-* can paint its arc in `background-color: inherit` */
.section          { padding: var(--section-y) 0; background: var(--bg); }
.section--soft    { background: var(--teal-tint); }
.section__head    { max-width: var(--container-text); margin-bottom: var(--sp-2xl); }
/* Subpages lead with an h1 for a valid document outline, but it must LOOK like
   the h2 it replaced – bare h1 is --fs-h1 (clamp 36→62px), which is hero scale. */
.section__head h1,
.section__head h2 { font-size: var(--fs-h2); }
.section__head p  { color: var(--ink-2); font-size: var(--fs-lg); }
.section--center .section__head { margin-inline: auto; }
.section--center .section__head,
.text-center { text-align: center; }
.text-center .eyebrow { justify-content: center; }

/* two equal columns, centered, collapses on tablet */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--stack-gap); align-items: center; }
@media (max-width: 760px) { .split-2 { grid-template-columns: 1fr; gap: var(--sp-xl); } }

/* ── Spacing / text utilities ────────────────────────────── */
.mt-lg  { margin-top: var(--sp-lg); }
.mt-2xl { margin-top: var(--sp-2xl); }
.mb-0   { margin-bottom: 0; }
.muted  { color: var(--ink-2); }
.subtle { color: var(--ink-3); font-weight: var(--fw-semibold); font-size: var(--fs-md); }

/* ── Type accents ────────────────────────────────────────── */
.display { font-weight: var(--fw-light); letter-spacing: -0.025em; }
.display strong { font-weight: var(--fw-bold); }
.accent  { color: var(--teal); }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-xs);
  color: var(--teal-deep); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label); text-transform: uppercase; margin-bottom: var(--sp-md);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--lime); }
.lbl {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--ink-3); font-weight: var(--fw-bold);
}
.link-inline { color: var(--teal-deep); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.link-inline:hover { color: var(--teal); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-xs);
  padding: var(--sp-xs) var(--sp-lg); border-radius: 12px;
  font-weight: var(--fw-semibold); font-size: var(--fs-md);
  border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.btn svg { width: 18px; height: 18px; }
.btn--block { width: 100%; }
.btn-primary { background: var(--teal); color: #fff; box-shadow: 0 8px 22px -10px rgba(37,188,189,.7); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -10px rgba(37,188,189,.8); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal-deep); }
.btn-lime { background: var(--lime); color: var(--teal-deep); }

/* row of call-to-action buttons */
.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-xs); }
.cta-row--center { justify-content: center; }

/* ── Top header (injected by lunex.js) ───────────────────── */
.lx-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-2);
}
.lx-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-md); padding: var(--sp-sm) var(--gutter); max-width: var(--container); margin: 0 auto;
}
.lx-logo img { height: 40px; }
.lx-nav { display: flex; align-items: center; gap: var(--sp-2xs); }
.lx-nav a {
  padding: var(--sp-2xs) var(--sp-sm); border-radius: 9px;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-2);
  transition: background .15s, color .15s;
}
.lx-nav a:hover,
.lx-nav a.is-active { background: var(--teal-soft); color: var(--teal-deep); }
.lx-header__right { display: flex; align-items: center; gap: var(--sp-xs); }
.lx-header .btn { padding: var(--sp-2xs) var(--sp-md); }
@media (max-width: 860px) { .lx-nav, .lx-header__right { display: none; } }

/* ── Fixed bottom nav (Kremer-style – mobile only) ───────── */
.lx-bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: none;  /* shown on mobile below */
  height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  align-items: stretch;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 30px -20px rgba(7,81,89,.4);
}
.lx-bottomnav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3xs); font-size: 11px; font-weight: var(--fw-semibold); color: var(--ink-3); position: relative;
}
/* Every item gets the SAME 34px icon slot so all five labels sit on one line:
   a plain 22px icon with 6px margins, and the Kontakt bubble as a 34px circle.
   (It used to be a 56px circle pulled 22px above the bar with the label pushed
   down 34px to compensate — that is what threw the alignment off.) */
.lx-bottomnav a > svg { width: 22px; height: 22px; margin: 6px 0; }
.lx-bottomnav a.is-active { color: var(--teal-deep); }
.lx-bottomnav a.is-active > svg { color: var(--teal); }
/* Caption-less bubble. It has no label to sit above, so it just centres in the
   bar; at 44px its optical centre lands on the same line as the other items'
   icon+label block, which is what keeps the row looking even. */
.lx-bottomnav a.lx-bn-center .lx-bn-bubble {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--grad-soft); display: grid; place-items: center;
}
.lx-bottomnav a.lx-bn-center .lx-bn-bubble svg { color: #fff; width: 24px; height: 24px; }
@media (max-width: 860px) {
  .lx-bottomnav { display: flex; }
  body { padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px)); }
}

/* ── Burger + mobile dropdown (≤860px) ───────────────────────
   Below 860px .lx-nav and the header CTA are hidden, so the burger is the only
   way to reach the full nav from the top of the page (the fixed bottom nav
   carries just the 5 primary items). */
.lx-burger {
  display: none; width: 44px; height: 44px; padding: 0; gap: 5px;
  flex-direction: column; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 10px; cursor: pointer;
}
.lx-burger span {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--teal-deep); transition: transform .2s ease, opacity .2s ease;
}
/* 2px bar + 5px gap = 7px centre-to-centre, so 7px collapses them into an X */
.lx-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lx-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.lx-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.lx-mobilemenu { display: none; }
.lx-mobilemenu__inner {
  display: grid; gap: var(--sp-3xs);
  padding: var(--sp-sm) var(--gutter) var(--sp-lg);
}
.lx-mobilemenu a {
  padding: var(--sp-xs) var(--sp-sm); border-radius: 10px;
  font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--ink-2);
}
.lx-mobilemenu a.is-active { background: var(--teal-soft); color: var(--teal-deep); }
.lx-mobilemenu .btn { margin-top: var(--sp-2xs); color: #fff; }

@media (max-width: 860px) {
  .lx-burger { display: inline-flex; }
  .lx-mobilemenu.is-open {
    display: block;
    border-top: 1px solid var(--line-2);
    background: rgba(255,255,255,.98);
  }
}

/* ── Hero ────────────────────────────────────────────────── */
.lx-hero { position: relative; overflow: hidden; background: var(--teal-tint); }
.lx-hero::before {
  content: ""; position: absolute; top: -30%; right: -10%;
  width: 60vw; height: 60vw; max-width: 760px; max-height: 760px; border-radius: 50%;
  background: radial-gradient(circle, var(--teal-soft) 0%, transparent 62%);
  pointer-events: none;
}
.lx-hero__inner {
  position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--stack-gap);
  align-items: center; padding: var(--section-y) var(--gutter); max-width: var(--container); margin: 0 auto;
}
.lx-hero .lead { font-size: var(--fs-lg); color: var(--ink-2); max-width: 520px; }
/* No display:grid here. A grid item's automatic minimum size is its content,
   which overrides aspect-ratio – the photo then forced its own native ratio
   at mobile widths instead of cropping to 16/10. */
.lx-hero__media {
  aspect-ratio: 4/5; border-radius: var(--radius-lg); background: var(--grad-soft);
  box-shadow: var(--shadow); overflow: hidden;
}
/* object-position is biased upward: the faces sit in the top third of the
   source, so a centred crop would behead everyone on the wider mobile box. */
.lx-hero__media picture,
.lx-hero__media img { display: block; width: 100%; height: 100%; }
.lx-hero__media img { object-fit: cover; object-position: center 22%; }
.lx-hero__cta { margin-top: var(--sp-lg); }   /* layout via .cta-row utility */
@media (max-width: 860px) {
  .lx-hero__inner { grid-template-columns: 1fr; }
  .lx-hero__media { aspect-ratio: 16/10; }
}

/* ── Card / feature grid ─────────────────────────────────── */
.lx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-md); }
.lx-card {
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: var(--sp-lg); box-shadow: var(--shadow);
}
.lx-card__icon {
  width: 46px; height: 46px; border-radius: 12px; background: var(--teal-soft);
  color: var(--teal-deep); display: grid; place-items: center; margin-bottom: var(--sp-sm);
}
.lx-card__icon svg { width: 24px; height: 24px; }
.lx-card h3 { font-size: var(--fs-h3); }
.lx-card p  { color: var(--ink-2); font-size: var(--fs-sm); margin: 0; }

/* ── Accordion (Kremer-style) ────────────────────────────── */
.lx-acc { display: grid; gap: var(--sp-xs); }
.lx-acc__item { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.lx-acc__head {
  width: 100%; display: flex; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-md) var(--sp-lg);
  background: none; border: 0; text-align: left; cursor: pointer; font: inherit;
}
.lx-acc__head .lx-card__icon { margin: 0; flex: 0 0 auto; }
.lx-acc__head h3 { flex: 1; min-width: 0; font-size: var(--fs-h3); margin: 0; overflow-wrap: break-word; hyphens: auto; }
.lx-acc__plus { color: var(--teal); font-size: 26px; line-height: 1; transition: transform .2s ease; }
.lx-acc__item.is-open .lx-acc__plus { transform: rotate(45deg); }
/* Open/closed is animated with grid-template-rows, NOT a JS-measured max-height.
   The old approach froze a pixel height at click time, so an open item lost any
   text that reflowed taller afterwards – rotating a phone could hide ~150px of
   copy behind overflow:hidden with no way to reach it. This reflows on its own. */
/* minmax(0, …) is required, not a bare 0fr: `0fr` means `minmax(auto, 0fr)`, so
   the row keeps the content's min-content height – the paragraph's 20px bottom
   padding survived and a collapsed item stayed 20px tall. */
.lx-acc__body { display: grid; grid-template-rows: minmax(0, 0fr); transition: grid-template-rows .28s ease; }
.lx-acc__item.is-open .lx-acc__body { grid-template-rows: minmax(0, 1fr); }
.lx-acc__body p {
  color: var(--ink-2); font-size: var(--fs-base);
  padding: 0 var(--sp-lg) var(--sp-md) 84px; margin: 0; max-width: 82ch;
  min-height: 0; overflow: hidden;   /* required for the 0fr row to collapse */
}
@media (max-width: 520px) { .lx-acc__body p { padding-left: var(--sp-lg); } }

/* ── "Warum Lunex" checklist ─────────────────────────────── */
.lx-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-sm); }
.lx-checks li { display: flex; gap: var(--sp-xs); align-items: flex-start; font-size: var(--fs-base); color: var(--ink-2); }
.lx-checks svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--teal); margin-top: 1px; }

/* ── Steps ───────────────────────────────────────────────── */
.lx-steps { counter-reset: step; display: grid; gap: var(--sp-lg); }
.lx-step { display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-md); align-items: start; }
.lx-step__num {
  counter-increment: step; width: 56px; height: 56px; border-radius: 50%;
  background: var(--grad-soft); color: #fff; display: grid; place-items: center;
  font-size: var(--fs-xl); font-weight: var(--fw-bold);
}
.lx-step__num::before { content: counter(step); }
.lx-step h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-3xs); }
/* measure guard: the container is 1180 now, but a step description set that
   wide is unreadable. ch keeps it tied to the font, not to a pixel guess. */
.lx-step p  { color: var(--ink-2); margin: 0; max-width: 64ch; }

/* ── Callout band ────────────────────────────────────────── */
.callout {
  margin-top: var(--sp-2xl); padding: var(--sp-xl);
  background: var(--teal-tint); border-radius: var(--radius);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-sm);
}
.callout strong { font-size: var(--fs-xl); }

/* ── Vision / quote block ────────────────────────────────── */
.lx-vision { background: var(--grad-soft); color: #fff; border-radius: var(--radius-lg); padding: var(--sp-3xl); box-shadow: var(--shadow); }
.lx-vision h2 { color: #fff; }
/* No measure cap here on purpose (client choice): the paragraphs run the full
   width of the card rather than being held to a ~68ch reading measure. */
.lx-vision p  { color: var(--on-dark); }
.lx-vision strong { color: var(--lime); }

/* ── Contact ─────────────────────────────────────────────── */
.lx-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2xl); }
@media (max-width: 760px) { .lx-contact-grid { grid-template-columns: 1fr; } }
.lx-contact-item { display: grid; grid-template-columns: 40px 1fr; gap: var(--sp-sm); margin-bottom: var(--sp-lg); }
.lx-contact-item .lx-card__icon { width: 40px; height: 40px; margin: 0; }
.lx-contact-item .val { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }

/* ── Form ────────────────────────────────────────────────── */
.lx-form h3 { margin-bottom: var(--sp-md); }
.field { display: block; margin-bottom: var(--sp-sm); }
.field .lbl { display: block; margin-bottom: var(--sp-2xs); }
.input {
  width: 100%; padding: var(--sp-xs) var(--sp-sm); font: inherit;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink);
}
.input:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.input--area { resize: vertical; }
/* Scoped to .lx-form on purpose: `.lx-card p { margin: 0 }` is more specific than
   a bare `.form-note`, so a plain rule here is silently ignored and the note sits
   flush against the submit button. */
.lx-form .form-note { font-size: var(--fs-2xs); color: var(--ink-3); margin: var(--sp-md) 0 0; }

/* ── Footer (injected) ───────────────────────────────────── */
.lx-footer { background: var(--teal-deep); color: var(--on-dark-soft); padding: var(--sp-3xl) 0 var(--sp-xl); }
.lx-footer a { color: var(--on-dark-soft); }
.lx-footer a:hover { color: var(--lime); }
/* Grid, not flex+space-between: as flex items the columns shrank to their own
   content (280 / 102 / 183 of 1132) and clumped with big gaps between them.
   The brand column gets 2fr because it carries the logo and a sentence. */
.lx-footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-2xl); }
@media (max-width: 760px) { .lx-footer__top { grid-template-columns: 1fr; gap: var(--sp-xl); } }
.lx-footer__col--brand img { height: 40px; margin-bottom: var(--sp-sm); }
.lx-footer__col--brand p   { font-size: var(--fs-sm); margin: 0; }
.lx-footer__col h4 { color: #fff; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--sp-sm); }
.lx-footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2xs); font-size: var(--fs-sm); }
.lx-footer__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-xs);
  margin-top: var(--sp-2xl); padding-top: var(--sp-md); border-top: 1px solid rgba(255,255,255,.16);
  font-size: var(--fs-2xs);
}
.lx-footer__bar a { margin-left: var(--sp-sm); }

.lx-bar { height: 5px; background: var(--grad); }

/* ════════════════════════════════════════════════════════════
   BRAND SHAPE LANGUAGE  —  keep this block LAST
   ------------------------------------------------------------
   The guidelines never butt two colour bands together on a
   straight line: the boundary is always a shallow arc taken from
   the logo bowl (p.10, p.11, p.13), and deep teal / lime are used
   as full section grounds rather than accents.

   This is the theme layer, so it must stay at the end of the
   file. Component rules like `.lx-checks li { color: var(--ink-2) }`
   have the same specificity as the surface overrides here, so
   source order is what makes a dark ground actually win.
   ════════════════════════════════════════════════════════════ */

/* ── Coloured surfaces ─────────────────────────────────────── */
.section--deep { background: var(--teal-deep); color: var(--on-dark); }
.section--teal { background: var(--teal);      color: #fff; }
.section--lime { background: var(--lime);      color: var(--teal-deep); }

.section--deep h1, .section--deep h2, .section--deep h3, .section--deep h4,
.section--teal h1, .section--teal h2, .section--teal h3, .section--teal h4 { color: #fff; }
.section--lime h1, .section--lime h2, .section--lime h3, .section--lime h4 { color: var(--teal-deep); }

.section--deep p, .section--deep li, .section--deep .muted,
.section--deep .section__head p, .section--deep .lx-checks li { color: var(--on-dark); }
.section--teal p, .section--teal li, .section--teal .muted,
.section--teal .section__head p, .section--teal .lx-checks li { color: #fff; }
.section--lime p, .section--lime li, .section--lime .muted,
.section--lime .section__head p, .section--lime .lx-checks li { color: var(--teal-deep); }

/* Eyebrow reads as the lime accent on dark grounds */
.section--deep .eyebrow, .section--teal .eyebrow { color: var(--lime); }
.section--lime .eyebrow { color: var(--teal-deep); }
.section--lime .eyebrow::before { background: var(--teal-deep); }

.section--deep .lx-checks svg { color: var(--lime); }
.section--teal .lx-checks svg { color: #fff; }
.section--lime .lx-checks svg { color: var(--teal-deep); }

.section--deep .btn-ghost, .section--teal .btn-ghost {
  color: #fff; border-color: rgba(255,255,255,.45);
}
.section--deep .btn-ghost:hover, .section--teal .btn-ghost:hover {
  border-color: var(--lime); color: var(--lime);
}
.section--lime .btn-ghost { color: var(--teal-deep); border-color: rgba(7,81,89,.35); }

/* ── Curved band boundary ────────────────────────────────────
   The curve BELONGS TO the section it bulges out of and is painted
   in that section's own background colour:
     .section--curve-bottom   bulges down into whatever follows
     .section--curve-top      bulges up into whatever precedes
   Both can sit on one section.

   Geometry: clip-path ellipse, horizontal radius --curve-spread of
   the width, vertical radius the full height. Spread is the whole
   trick. At 50% the ellipse meets the edges with a VERTICAL tangent
   and the band reads as a pill; above ~65% the arc stays thick at
   the edges and only swells in the middle, which is the brand's
   gentle wave. clip-path (not border-radius) keeps the edge crisp
   and keeps the shape inside the box, so no horizontal overflow.

   Requires a SOLID background on the section – background-color is
   inherited by the pseudo, and a gradient would not line up. */
.section--curve-bottom,
.section--curve-top { position: relative; z-index: 1; }

.section--curve-bottom::after,
.section--curve-top::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: var(--curve-h);
  background-color: inherit;
  pointer-events: none;
}
.section--curve-bottom::after {
  top: 100%;
  clip-path: ellipse(var(--curve-spread) 100% at 50% 0%);
}
.section--curve-top::before {
  bottom: 100%;
  clip-path: ellipse(var(--curve-spread) 100% at 50% 100%);
}

/* ── Logo-derived decorative marks (p.10) ────────────────────
   The dot and the bowl blown up as outlines over photography or
   flat ground. Purely decorative – mark them aria-hidden="true".
   Parent needs position:relative; size with --mark-size. */
.lx-mark {
  position: absolute;
  width: var(--mark-size, 180px);
  height: var(--mark-size, 180px);
  pointer-events: none;
  color: var(--lime);
}
.lx-mark--circle { border: var(--mark-stroke) solid currentColor; border-radius: 50%; }
.lx-mark--bowl {
  height: calc(var(--mark-size, 180px) * .5);
  border: 0 solid currentColor;
  border-bottom-width: var(--mark-stroke);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.lx-mark--teal  { color: var(--teal); }
.lx-mark--deep  { color: var(--teal-deep); }
.lx-mark--white { color: #fff; }