/* ============================================================================
   Lulu — design system
   Kids party venue, Kirkland WA. Single stylesheet for the public site.

   Everything is prefixed `ll-` / `--ll-`. No frameworks, no libraries.
   The class contract other templates build against is documented in
   docs/superpowers/ll-design-system.md — keep the two in step.

   Order:
     01 tokens · 02 reset · 03 layout + bands · 04 scallops & textures
     05 type · 06 buttons & pills · 07 cards & circle cards · 08 lists
     09 slider · 10 lightbox · 11 accordion · 12 calendar & forms
     13 header + drawer · 14 footer · 15 editorial (blog/post/page/modal)
     16 reveal + utilities · 17 responsive · 18 reduced motion
   ========================================================================= */

/* ── 01 · Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Brand colours */
  --ll-orange: #F5793B;
  --ll-orange-2: #FE9C5B;
  --ll-blue: #2E7999;
  --ll-blue-pill: #50C4E0;
  --ll-sky: #A8DCEA;
  --ll-sky-soft: #BBEAF7;
  --ll-sky-mist: #CBEAF2;
  --ll-sky-ice: #CBF3FE;
  --ll-cream: #F9EFE4;
  --ll-sand: #F4E2CD;
  --ll-card: #FEF3EC;
  --ll-card-2: #F9F0E5;
  --ll-ink: #2F261A;
  --ll-white: #fff;
  --ll-field: #F1F1F1;
  --ll-ink-soft: #6B6158;
  --ll-line: rgba(47, 38, 26, .12);

  /* Fonts */
  --font-display: 'Lora', Georgia, serif;
  --font-ui: 'Inter', system-ui, sans-serif;
  --font-brand: 'Vollkorn', Georgia, serif;

  /* Type scale */
  --fs-hero: clamp(40px, 5vw, 72px);
  --fs-h2: clamp(30px, 3.4vw, 48px);
  --fs-h3: clamp(22px, 2.3vw, 32px);
  --fs-tilt: clamp(36px, 5.5vw, 80px);
  --fs-feature: 24px;
  --fs-body: 18px;
  --fs-ui: 16px;
  --fs-btn: 18px;

  /* Radii */
  --r-card: 24px;
  --r-card-lg: 32px;
  --r-pill: 999px;

  /* Layout */
  --container: 1200px;
  --gutter: 24px;
  --section-y: clamp(56px, 8vw, 112px);

  /* Scalloped band edges. Light bands use the big, deep dome from Union.png
     (period 176, depth 76 ≈ ratio 2.3); orange bands override to the smaller
     Union2.png dome below (90 × 40). */
  --ll-scallop-w: 176px;
  --ll-scallop-h: 76px;

  /* Motion */
  --tx-base: .25s ease;
  --tx-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* Icon glyphs (data-URI SVG) shared by buttons, pills, lists and nav.
     `-arrow`, `-check` and `-chevron` are black on purpose: they are applied as
     CSS masks, so the colour comes from the element's `background`. The `-white`
     / `-orange` variants are real images for the few places a mask can't reach
     (a glyph drawn INSIDE a filled disc). */
  --ll-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --ll-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6'/%3E%3C/svg%3E");
  --ll-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --ll-icon-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6'/%3E%3C/svg%3E");

  /* Shadows (derived — not part of the documented token list) */
  --ll-shadow-soft: 0 10px 30px -14px rgba(47, 38, 26, .28);
  --ll-shadow-pop: 0 18px 44px -18px rgba(47, 38, 26, .38);
  --ll-shadow-island: 0 8px 28px -12px rgba(47, 38, 26, .26);

  /* The hero's photo-wall beige from the design: darker than cream so the
     scalloped edge between the hero and the section below actually reads. */
  --ll-wall: #D5CABE;

  /* Default band colour, so a scallop outside any band still paints. */
  --ll-sec-bg: var(--ll-cream);
}

/* ── 02 · Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 110px;         /* sticky header height + breathing room */
}

body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ll-ink);
  background: var(--ll-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Scallops and bleed sliders overhang the viewport. `clip` contains them
     WITHOUT turning <body> into a scroll container — plain `overflow-x:hidden`
     would do that and break the sticky header. `hidden` stays as the fallback
     for engines that don't know `clip`. */
  overflow-x: hidden;
  overflow-x: clip;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font: inherit; color: inherit; background: none; border: 0; }
input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }

:focus-visible {
  outline: 3px solid var(--ll-orange);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--ll-sky-soft); color: var(--ll-ink); }

.ll-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--ll-orange); color: var(--ll-white);
  font-family: var(--font-ui); font-weight: 600;
  padding: 12px 20px; border-radius: 0 0 var(--r-pill) 0;
}
.ll-skip-link:focus { left: 0; }

/* ── 03 · Layout + colour bands ──────────────────────────────────────────── */
.ll-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.ll-section {
  padding-block: var(--section-y);
  position: relative;
  overflow: visible;                 /* scallop pseudo-elements sit outside */
}

/* Every band sets its background AND publishes the colour a scallop tiles with. */
.ll-band--cream    { --ll-sec-bg: var(--ll-cream);    background: var(--ll-cream); }
.ll-band--sand     { --ll-sec-bg: var(--ll-sand);     background: var(--ll-sand); }
.ll-band--sky      { --ll-sec-bg: var(--ll-sky);      background: var(--ll-sky); }
.ll-band--sky-soft { --ll-sec-bg: var(--ll-sky-soft); background: var(--ll-sky-soft); }
.ll-band--sky-ice  { --ll-sec-bg: var(--ll-sky-ice);  background: var(--ll-sky-ice); }
.ll-band--white    { --ll-sec-bg: var(--ll-white);    background: var(--ll-white); }
.ll-band--wall     { --ll-sec-bg: var(--ll-wall);     background: var(--ll-wall); }
/* Orange is a vertical gradient; the scallop tiles with the TOP colour so a
   `.ll-scallop-top` on an orange band still matches its own first pixel row. */
.ll-band--orange {
  --ll-sec-bg: var(--ll-orange);
  /* Orange bands use the smaller, tighter scallop from Union2.png. */
  --ll-scallop-w: 90px;
  --ll-scallop-h: 40px;
  background: linear-gradient(180deg, var(--ll-orange) 0%, var(--ll-orange-2) 100%);
  color: var(--ll-white);
}
.ll-band--orange h1,
.ll-band--orange h2,
.ll-band--orange h3,
.ll-band--orange h4,
.ll-band--orange .ll-eyebrow,
.ll-band--orange .ll-lead { color: var(--ll-white); }
/* …but a card is its own surface: on an orange band its text stays dark
   (Figma slice-04 — the workshop cards keep ink titles on the orange field). */
.ll-band--orange .ll-card,
.ll-band--orange .ll-card .ll-lead,
.ll-band--orange .ll-card .ll-card__title,
.ll-band--orange .ll-card .ll-card__text { color: var(--ll-ink); }
.ll-band--orange .ll-card h1,
.ll-band--orange .ll-card h2,
.ll-band--orange .ll-card h3,
.ll-band--orange .ll-card h4 { color: var(--ll-blue); }
.ll-band--orange .ll-card .ll-card__title { color: var(--ll-ink); }
.ll-band--orange .ll-card .ll-eyebrow--orange { color: var(--ll-orange); }
.ll-band--orange .ll-card .ll-eyebrow--blue { color: var(--ll-blue); }

.ll-band--sky, .ll-band--sky-soft, .ll-band--sky-ice { position: relative; }

/* ── 04 · Scalloped edges + textures ─────────────────────────────────────── */
/* A "bunting" strip of semicircles in the band's own colour, drawn OUTSIDE the
   section so the neighbouring band shows through the gaps. z-index 2 keeps it
   above the neighbour's own content; pointer-events:none keeps it inert. */
.ll-scallop-top,
.ll-scallop-bottom { position: relative; overflow: visible; }

.ll-scallop-top::before,
.ll-scallop-bottom::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: var(--ll-scallop-h);
  z-index: 2;
  pointer-events: none;
  background-repeat: repeat-x;
  background-size: var(--ll-scallop-w) var(--ll-scallop-h);
}

/* Top edge: domes bulging UP into the section above. The ellipse sits on the
   bottom edge of each tile with radii (w/2, h), so one dome exactly fills one
   tile and the notches between them show the neighbouring band. */
.ll-scallop-top::before {
  top: calc(-1 * var(--ll-scallop-h));
  background-image: radial-gradient(
    ellipse calc(var(--ll-scallop-w) / 2) var(--ll-scallop-h) at 50% 100%,
    var(--ll-sec-bg) 0 99.5%, transparent 100%);
  background-position: 0 0;
}

/* Bottom edge: domes bulging DOWN into the section below. */
.ll-scallop-bottom::after {
  bottom: calc(-1 * var(--ll-scallop-h));
  background-image: radial-gradient(
    ellipse calc(var(--ll-scallop-w) / 2) var(--ll-scallop-h) at 50% 0%,
    var(--ll-sec-bg) 0 99.5%, transparent 100%);
  background-position: 0 0;
}

/* An orange band fades top→bottom, so its bottom scallop must tile with the
   BOTTOM colour or a seam shows where the strip meets the band. */
.ll-band--orange.ll-scallop-bottom::after {
  background-image: radial-gradient(
    ellipse calc(var(--ll-scallop-w) / 2) var(--ll-scallop-h) at 50% 0%,
    var(--ll-orange-2) 0 99.5%, transparent 100%);
}
/* A section whose background is a PHOTO (the hero) carries no .ll-band-- class,
   so it inherits the :root default. Give it a tile colour with an inline
   `style="--ll-sec-bg:#F9EFE4"` (or any wrapper rule) before adding a scallop. */

/* Thin dashed wavy rule (Figma: under the "Comfortable cozy venue" headline).
   Low amplitude on a wide tile so it reads as a soft ripple, not a zigzag. */
.ll-wave-divider {
  height: 14px;
  opacity: .6;
  background-repeat: repeat-x;
  background-position: 0 50%;
  background-size: 64px 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='14' viewBox='0 0 64 14'%3E%3Cpath d='M0 7c5.3-3.4 10.7-3.4 16 0s10.7 3.4 16 0 10.7-3.4 16 0 10.7 3.4 16 0' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-dasharray='6 5'/%3E%3C/svg%3E");
}
.ll-wave-divider--ink {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='14' viewBox='0 0 64 14'%3E%3Cpath d='M0 7c5.3-3.4 10.7-3.4 16 0s10.7 3.4 16 0 10.7-3.4 16 0 10.7 3.4 16 0' fill='none' stroke='%232F261A' stroke-width='1.6' stroke-linecap='round' stroke-dasharray='6 5'/%3E%3C/svg%3E");
}

/* Dotted confetti wash — eight tiled radial gradients over the band colour. */
.ll-confetti {
  background-color: var(--ll-sec-bg);
  background-repeat: repeat;
  background-image:
    radial-gradient(circle, #F6A8C0 6px, transparent 7px),
    radial-gradient(circle, #7FC4E8 6px, transparent 7px),
    radial-gradient(circle, #A8D28A 6px, transparent 7px),
    radial-gradient(circle, #B79AD8 6px, transparent 7px),
    radial-gradient(circle, #F6CE5B 6px, transparent 7px),
    radial-gradient(circle, #F5793B 6px, transparent 7px),
    radial-gradient(circle, #6FD2C6 6px, transparent 7px),
    radial-gradient(circle, #F08A6A 6px, transparent 7px);
  background-size:
    260px 240px, 300px 210px, 240px 280px, 330px 250px,
    210px 300px, 290px 230px, 350px 270px, 270px 320px;
  background-position:
    12px 30px, 140px 110px, 60px 190px, 220px 20px,
    170px 240px, 30px 260px, 250px 150px, 110px 70px;
}
/* Admin can drop in a bespoke confetti artwork instead of the CSS dots. */
.ll-confetti--image {
  background-image: var(--ll-confetti-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Vertical party stripes (the venue wallpaper in slices 02 / 08). */
.ll-stripes {
  background-image: repeating-linear-gradient(90deg, #BBEAF7 0 40px, #fff 40px 80px);
}

/* ── 05 · Typography ─────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ll-blue);
  line-height: 1.1;
  text-wrap: balance;
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-feature); }

p { text-wrap: pretty; }

.ll-eyebrow {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  margin: 0 0 10px;
  display: block;
}
.ll-eyebrow--orange { color: var(--ll-orange); }
.ll-eyebrow--blue   { color: var(--ll-blue); }

.ll-lead {
  font-family: var(--font-ui);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ll-ink);
  max-width: 62ch;
}

/* Long-form copy (blog posts, legal pages, admin HTML fields).
   `.ll-page__inner` is paired in because templates/pages/default.php drops raw
   CMS HTML straight into it without a .ll-prose wrapper. */
:is(.ll-prose, .ll-page__inner) { font-size: 18px; line-height: 1.75; color: var(--ll-ink); }
:is(.ll-prose, .ll-page__inner) > * + * { margin-top: 1.1em; }
:is(.ll-prose, .ll-page__inner) h2 { font-family: var(--font-display); font-size: 32px; color: var(--ll-blue); margin-top: 1.6em; }
:is(.ll-prose, .ll-page__inner) h3 { font-family: var(--font-display); font-size: 24px; color: var(--ll-blue); margin-top: 1.4em; }
:is(.ll-prose, .ll-page__inner) h4 { font-family: var(--font-ui); font-weight: 600; font-size: 20px; color: var(--ll-blue); margin-top: 1.2em; }
:is(.ll-prose, .ll-page__inner) a {
  color: var(--ll-orange);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
:is(.ll-prose, .ll-page__inner) a:hover { color: var(--ll-blue); }
:is(.ll-prose, .ll-page__inner) strong { font-weight: 600; }
:is(.ll-prose, .ll-page__inner) img { border-radius: var(--r-card); margin-block: 1.4em; }
:is(.ll-prose, .ll-page__inner) figure { margin-block: 1.4em; }
:is(.ll-prose, .ll-page__inner) figcaption { font-size: 15px; color: var(--ll-ink-soft); margin-top: 8px; }
:is(.ll-prose, .ll-page__inner) :is(ul, ol) { padding-left: 1.4em; }
:is(.ll-prose, .ll-page__inner) ul { list-style: disc; }
:is(.ll-prose, .ll-page__inner) ol { list-style: decimal; }
:is(.ll-prose, .ll-page__inner) li { margin-top: .4em; }
:is(.ll-prose, .ll-page__inner) li::marker { color: var(--ll-orange); }
:is(.ll-prose, .ll-page__inner) blockquote {
  border-left: 4px solid var(--ll-orange);
  padding: 6px 0 6px 20px;
  color: var(--ll-ink-soft);
  font-style: italic;
}
:is(.ll-prose, .ll-page__inner) hr { border: 0; border-top: 1px solid var(--ll-line); margin-block: 2em; }
:is(.ll-prose, .ll-page__inner) table { width: 100%; font-size: 16px; }
:is(.ll-prose, .ll-page__inner) :is(th, td) { padding: 12px 14px; border-bottom: 1px solid var(--ll-line); text-align: left; }
:is(.ll-prose, .ll-page__inner) th { font-family: var(--font-ui); font-weight: 600; color: var(--ll-blue); }
:is(.ll-prose, .ll-page__inner) code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em; background: var(--ll-card); padding: 2px 6px; border-radius: 6px;
}
:is(.ll-prose, .ll-page__inner) pre { background: var(--ll-card); padding: 18px; border-radius: 16px; overflow-x: auto; }
:is(.ll-prose, .ll-page__inner) pre code { background: none; padding: 0; }

/* ── 06 · Buttons and pills ──────────────────────────────────────────────── */
.ll-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 56px;
  padding: 18px 40px;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-btn);
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  transition: transform var(--tx-base), box-shadow var(--tx-base), background-color var(--tx-base), color var(--tx-base);
}
.ll-btn:hover { transform: translateY(-2px); }

.ll-btn--primary {
  background: var(--ll-orange);
  color: var(--ll-white);
  box-shadow: 0 6px 18px -8px rgba(245, 121, 59, .8);
}
.ll-btn--primary:hover {
  background: var(--ll-orange-2);
  box-shadow: 0 12px 26px -10px rgba(245, 121, 59, .85);
}

.ll-btn--white {
  background: var(--ll-white);
  color: var(--ll-ink);
  box-shadow: var(--ll-shadow-soft);
}
.ll-btn--white:hover { box-shadow: var(--ll-shadow-pop); }

/* Arrow variant: the label sits left, an orange disc with a white arrow right.
   Padding tightens on the arrow side so the disc doesn't float in dead space. */
.ll-btn--arrow { padding-right: 12px; }
.ll-btn__arrow {
  flex: 0 0 40px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ll-orange);
  display: inline-grid;
  place-items: center;
  transition: transform var(--tx-base), background-color var(--tx-base);
}
.ll-btn__arrow::after {
  content: '';
  width: 18px; height: 18px;
  background: var(--ll-white);
  -webkit-mask: var(--ll-icon-arrow) center / 18px 18px no-repeat;
          mask: var(--ll-icon-arrow) center / 18px 18px no-repeat;
}
.ll-btn--arrow:hover .ll-btn__arrow { transform: translateX(3px); }
/* An orange disc is invisible on the orange primary button, so there it drops to
   a bare white arrow (Figma: the CONTINUE button in slice-05). */
.ll-btn--primary .ll-btn__arrow { background: transparent; }
.ll-btn--primary .ll-btn__arrow::after { background: var(--ll-white); }

.ll-btn--sm {
  font-size: var(--fs-ui);
  padding: 14px 28px;
  min-height: 48px;
}
.ll-btn--sm.ll-btn--arrow { padding-right: 8px; }
.ll-btn--sm .ll-btn__arrow { flex-basis: 34px; width: 34px; height: 34px; }
.ll-btn--sm .ll-btn__arrow::after { width: 15px; height: 15px; -webkit-mask-size: 15px 15px; mask-size: 15px 15px; }

.ll-btn--block { width: 100%; }

/* Legacy aliases still referenced by journal/page templates. */
.ll-btn--ghost {
  background: transparent;
  color: var(--ll-blue);
  box-shadow: inset 0 0 0 2px var(--ll-blue);
}
.ll-btn--ghost:hover { background: var(--ll-blue); color: var(--ll-white); }
.ll-btn--lg { padding: 20px 46px; min-height: 62px; }

/* White pill label with an orange arrow disc — the caption on a circle card. */
.ll-pill-label {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: var(--ll-white);
  color: var(--ll-blue);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-ui);
  line-height: 1.25;
  letter-spacing: .04em;
  padding: 8px 8px 8px 32px;             /* Figma: 64px pill, 48px disc */
  border-radius: var(--r-pill);
  box-shadow: var(--ll-shadow-soft);
  transition: transform var(--tx-base), box-shadow var(--tx-base);
}
.ll-pill-label__arrow {
  flex: 0 0 48px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--ll-orange);
  display: inline-grid;
  place-items: center;
  transition: transform var(--tx-base);
}
.ll-pill-label__arrow::after {
  content: '';
  width: 20px; height: 20px;
  background: var(--ll-white);
  -webkit-mask: var(--ll-icon-arrow) center / 20px 20px no-repeat;
          mask: var(--ll-icon-arrow) center / 20px 20px no-repeat;
}

/* Tilted hand-lettered pill: "in Seattle", "cozy venue". */
.ll-tilt-pill {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: var(--fs-tilt);
  line-height: 1.15;
  color: var(--ll-white);
  padding: .1em .6em;
  border-radius: 32px;
  transform: rotate(-6deg);
  filter: drop-shadow(0 12px 24px rgba(47, 38, 26, .22));
}
.ll-tilt-pill--blue   { background: var(--ll-blue-pill); }
.ll-tilt-pill--orange { background: var(--ll-orange); }

/* ── 07 · Cards ──────────────────────────────────────────────────────────── */
.ll-card {
  background: var(--ll-white);
  border-radius: var(--r-card);
  padding: 32px;
  position: relative;
}
.ll-card--tint { background: var(--ll-card); }
.ll-card--sky  { background: var(--ll-sky); }
.ll-card--lg   { border-radius: var(--r-card-lg); padding: 48px; }
.ll-card--shadow { box-shadow: var(--ll-shadow-soft); }

.ll-card.ll-card--media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ll-card--media .ll-card__media {
  display: block;
  height: 240px;
  flex: 0 0 240px;
  overflow: hidden;
  background: var(--ll-sky-soft);
}
.ll-card--media .ll-card__media img,
.ll-card--media .ll-card__media video {
  width: 100%; height: 100%; object-fit: cover;
}
.ll-card--media .ll-card__body { padding: 28px 28px 32px; flex: 1 1 auto; }
.ll-card__title { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--ll-ink); margin: 0 0 12px; }
.ll-card__text  { font-size: var(--fs-ui); line-height: 1.6; color: var(--ll-ink); margin: 0; }

a.ll-card { transition: transform var(--tx-base), box-shadow var(--tx-base); }
a.ll-card:hover { transform: translateY(-4px); box-shadow: var(--ll-shadow-pop); }

/* Circular photo card with a pill caption straddling its lower-left edge. */
.ll-circle-card {
  display: block;
  position: relative;
  width: 100%;
  max-width: var(--ll-circle-size, 340px);
  margin-inline: auto;
}
.ll-circle-card--s { --ll-circle-size: 280px; }
.ll-circle-card--m { --ll-circle-size: 340px; }
.ll-circle-card--l { --ll-circle-size: 400px; }

.ll-circle-card__media {
  /* explicit `display` so the element works as a <span> inside an <a> too —
     an inline box ignores aspect-ratio and clips nothing */
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ll-sky-soft);
}
.ll-circle-card__media img,
.ll-circle-card__media video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--tx-base);
}
.ll-circle-card .ll-pill-label {
  position: absolute;
  bottom: 8%;
  left: -6%;
  max-width: 88%;
  z-index: 2;
}
.ll-circle-card:hover .ll-circle-card__media img { transform: scale(1.05); }
.ll-circle-card:hover .ll-pill-label { transform: translateY(-2px); box-shadow: var(--ll-shadow-pop); }
.ll-circle-card:hover .ll-pill-label__arrow { transform: translateX(3px); }

/* ── 08 · Lists: checks and features ─────────────────────────────────────── */
.ll-check-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 32px;
  --ll-check: var(--ll-orange);
}
.ll-check-list--blue { --ll-check: var(--ll-blue); }
.ll-check-list li {
  position: relative;
  padding-left: 36px;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  line-height: 1.5;
  color: var(--ll-ink);
}
.ll-check-list li::before {
  content: '';
  position: absolute;
  left: 0; top: .05em;
  width: 22px; height: 22px;
  background: var(--ll-check);
  -webkit-mask: var(--ll-icon-check) center / 22px 22px no-repeat;
          mask: var(--ll-icon-check) center / 22px 22px no-repeat;
}
/* Optional inline glyph before an item (packages features, ll_icon()). Hidden
   wherever the orange check mark IS the design; the phone tile layout in
   ll-packages.css shows it instead of the check. */
.ll-check-list__icon { display: none; }

/* Feature: a filled orange check disc over an italic title + plain sub.
   The disc is decorative and drawn by ::before — the markup carries no icon. */
.ll-feature { display: block; }
.ll-feature::before {
  content: '';
  display: block;
  width: 28px; height: 28px;
  margin-bottom: 16px;
  border-radius: 50%;
  background:
    var(--ll-icon-check-white) center / 15px 15px no-repeat,
    var(--ll-orange);
}
.ll-feature__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: var(--fs-feature);
  line-height: 1.2;
  color: var(--ll-blue);
  margin: 0 0 6px;
}
.ll-feature__sub {
  font-family: var(--font-ui);
  font-size: 18px;
  line-height: 1.4;
  color: var(--ll-ink);
  margin: 0;
}

/* ── 09 · Horizontal slider ──────────────────────────────────────────────── */
.ll-slider {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: 4px;                /* room for card hover lift */
}
.ll-slider::-webkit-scrollbar { display: none; }
.ll-slider__item {
  scroll-snap-align: start;
  flex: 0 0 var(--ll-slide-w, 320px);
  min-width: 0;
}
/* Bleed the track to the viewport edges while its first item still lines up
   with the container. Used for the reviews rail in slice-01. */
.ll-slider--bleed {
  margin-inline: calc(-50vw + 50%);
  padding-inline: max(var(--gutter), calc(50vw - var(--container) / 2 + var(--gutter)));
}
.ll-slider__wrap { position: relative; }
.ll-slider__arrow {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ll-white);
  box-shadow: var(--ll-shadow-soft);
  display: grid;
  place-items: center;
  z-index: 3;
  transition: transform var(--tx-base), box-shadow var(--tx-base);
}
.ll-slider__arrow::after {
  content: '';
  width: 22px; height: 22px;
  background: var(--ll-ink);
  -webkit-mask: var(--ll-icon-arrow) center / 22px 22px no-repeat;
          mask: var(--ll-icon-arrow) center / 22px 22px no-repeat;
}
.ll-slider__arrow--next { right: 8px; left: auto; }
.ll-slider__arrow--prev { right: auto; left: 8px; }
.ll-slider__arrow--prev::after { transform: scaleX(-1); }
.ll-slider__arrow:hover { transform: translateY(-50%) scale(1.06); box-shadow: var(--ll-shadow-pop); }
.ll-slider__arrow[hidden] { display: none; }

/* ── 10 · Lightbox (native <dialog>) ─────────────────────────────────────── */
.ll-lightbox {
  border: 0;
  padding: 0;
  margin: 0;
  inset: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--ll-white);
}
.ll-lightbox::backdrop { background: rgba(47, 38, 26, .85); }
.ll-lightbox__inner {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: center;
  justify-items: center;
  gap: 16px;
  padding: 64px 24px 32px;
}
.ll-lightbox__img {
  max-width: 90vw;
  max-height: 90vh;
  width: auto; height: auto;
  border-radius: 16px;
  object-fit: contain;
  margin: auto;
}
.ll-lightbox__caption {
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  text-align: center;
  color: var(--ll-white);
  max-width: 60ch;
}
.ll-lightbox__btn {
  position: absolute;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--ll-white);
  display: grid; place-items: center;
  box-shadow: var(--ll-shadow-soft);
  transition: transform var(--tx-base);
}
.ll-lightbox__btn:hover { transform: scale(1.07); }
.ll-lightbox__btn::after {
  content: '';
  width: 22px; height: 22px;
  background: var(--ll-ink);
  -webkit-mask: var(--ll-icon-arrow) center / 22px 22px no-repeat;
          mask: var(--ll-icon-arrow) center / 22px 22px no-repeat;
}
.ll-lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.ll-lightbox__prev::after { transform: scaleX(-1); }
.ll-lightbox__prev:hover { transform: translateY(-50%) scale(1.07); }
.ll-lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }
.ll-lightbox__next:hover { transform: translateY(-50%) scale(1.07); }
/* The close button carries its own "×" glyph as text, so it opts out of the
   shared arrow ::after. */
.ll-lightbox__close {
  top: 16px; right: 16px;
  color: var(--ll-ink);
  font-size: 30px;
  line-height: 1;
}
.ll-lightbox__close::after { content: none; }

/* ── 11 · Accordion ──────────────────────────────────────────────────────── */
.ll-accordion { display: grid; gap: 16px; }
.ll-accordion__item { overflow: hidden; padding: 0; }
.ll-accordion__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  color: var(--ll-blue);
  padding: 26px 32px;
}
.ll-accordion__q::after {
  content: '';
  flex: 0 0 24px;
  width: 24px; height: 24px;
  background: var(--ll-orange);
  -webkit-mask: var(--ll-icon-chevron) center / 24px 24px no-repeat;
          mask: var(--ll-icon-chevron) center / 24px 24px no-repeat;
  transition: transform var(--tx-base);
}
.ll-accordion__q[aria-expanded="true"]::after { transform: rotate(180deg); }
.ll-accordion__a {
  padding: 0 32px 28px;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  line-height: 1.7;
  color: var(--ll-ink);
}
.ll-accordion__a[hidden] { display: none; }

/* ── 12 · Calendar, selects, forms, steps ────────────────────────────────── */
.ll-calendar { font-family: var(--font-ui); }
.ll-calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.ll-calendar__month {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 20px;
  color: var(--ll-ink);
}
.ll-calendar__nav { display: flex; gap: 8px; }
.ll-calendar__nav button {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ll-ink);
  transition: background-color var(--tx-base);
}
.ll-calendar__nav button:hover { background: var(--ll-field); }
.ll-calendar__nav button::after {
  content: '';
  width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: var(--ll-icon-chevron) center / 16px 16px no-repeat;
          mask: var(--ll-icon-chevron) center / 16px 16px no-repeat;
  transform: rotate(90deg);          /* chevron-down → chevron-left */
}
.ll-calendar__nav .ll-calendar__prev::after { transform: rotate(90deg); }
.ll-calendar__nav .ll-calendar__next::after { transform: rotate(-90deg); }
.ll-calendar__nav button:disabled { opacity: .35; cursor: not-allowed; }
.ll-calendar__weekdays,
.ll-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  justify-items: center;
}
.ll-calendar__weekdays {
  font-size: 14px;
  font-weight: 500;
  color: var(--ll-ink-soft);
  margin-bottom: 8px;
}
.ll-calendar__day {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--ll-ink);
  transition: background-color var(--tx-base), color var(--tx-base);
}
.ll-calendar__day:not(.is-disabled):not(.is-selected):hover { background: var(--ll-field); }
.ll-calendar__day.is-selected { background: var(--ll-orange); color: var(--ll-white); }
.ll-calendar__day.is-disabled { color: var(--ll-ink-soft); opacity: .5; text-decoration: line-through; cursor: not-allowed; }
.ll-calendar__day.is-today   { box-shadow: inset 0 0 0 1px var(--ll-orange); }
.ll-calendar__day.is-outside { opacity: .35; }

.ll-form { display: grid; gap: 22px; --ll-form-surface: var(--ll-white); }
.ll-form__row--2 { grid-template-columns: 1fr; }
.ll-form label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .01em;
  color: var(--ll-blue);
  display: block;
  margin-bottom: 8px;
}
/* A row is one caption + one control, and the caption sits ON the control's top
   border, notched into it: absolutely placed on the row's top edge, half above
   and half below the 1px line. Its background is split on that same line — the
   upper half in the surface the form sits on (--ll-form-surface), the lower half
   in the field grey — so the caption cuts a clean notch out of the border instead
   of floating as a white tab over the grey fill. */
.ll-form__row { position: relative; display: grid; gap: 0; }
.ll-form__row > label {
  position: absolute;
  top: 0;
  left: 18px;
  z-index: 1;
  transform: translateY(-50%);
  margin: 0;
  padding: 0 8px;
  max-width: calc(100% - 36px);
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--ll-form-surface) 50%, var(--ll-field) 50%);
  transition: color var(--tx-base);
}
.ll-form__row:focus-within > label { color: var(--ll-orange); }
.ll-form input[type="text"],
.ll-form input[type="email"],
.ll-form input[type="tel"],
.ll-form input[type="date"],
.ll-form input[type="number"],
.ll-form input[type="url"],
.ll-form select,
.ll-form textarea {
  width: 100%;
  min-height: 56px;
  padding: 16px 20px;
  /* background-COLOR, not the shorthand: .ll-select paints a chevron into
     background-image and a shorthand here would wipe it out */
  background-color: var(--ll-field);
  border: 1px solid rgba(47, 38, 26, .10);
  border-radius: 16px;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  color: var(--ll-ink);
  transition: border-color var(--tx-base), box-shadow var(--tx-base);
}
.ll-form textarea { min-height: 140px; resize: vertical; }
.ll-form input::placeholder,
.ll-form textarea::placeholder { color: var(--ll-ink-soft); opacity: .8; }
.ll-form input:focus,
.ll-form select:focus,
.ll-form textarea:focus {
  outline: none;
  border-color: var(--ll-orange);
  /* An inset ring, not an outer glow: an outer ring would be cut by the notched
     caption sitting on the border. */
  box-shadow: inset 0 0 0 1px var(--ll-orange);
}
.ll-form__msg {
  padding: 14px 18px;
  border-radius: 16px;
  font-size: var(--fs-ui);
  font-family: var(--font-ui);
}
.ll-form__msg--ok  { background: rgba(168, 220, 234, .38); color: var(--ll-blue); }
.ll-form__msg--err { background: rgba(245, 121, 59, .16); color: #A3401A; }
.ll-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ll-ink-soft);
}
.ll-form__consent input[type="checkbox"] {
  flex: 0 0 20px;
  width: 20px; height: 20px;
  margin-top: 2px;
  accent-color: var(--ll-orange);
}
.ll-form__consent label { margin: 0; font-size: inherit; color: inherit; }
/* Honeypot: off-screen, never announced, never focusable by tab order. */
.ll-form__hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Grey pill select with its own chevron. Declared AFTER the generic .ll-form
   field rules so it wins on equal specificity. */
.ll-select { position: relative; display: block; }
.ll-select select,
select.ll-select,
.ll-form .ll-select select,
.ll-form select.ll-select {
  width: 100%;
  min-height: 64px;
  padding: 0 56px 0 24px;
  background-color: var(--ll-field);
  border: 1px solid transparent;
  border-radius: 16px;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  color: var(--ll-ink);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F261A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 22px center;
  background-size: 20px 20px;
  cursor: pointer;
}

/* Multi-step wrapper: only the active step is in the flow. */
.ll-steps > [data-step] { display: none; }
.ll-steps > [data-step].is-active { display: block; }

/* ── 13 · Header + drawer ────────────────────────────────────────────────── */
.ll-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-block: 16px;
  background: transparent;           /* the island floats over the hero */
  transition: padding var(--tx-base);
}
.ll-header__island {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 84px;
  padding: 0 12px 0 20px;
  background: var(--ll-white);
  border-radius: var(--r-pill);
  box-shadow: var(--ll-shadow-island);
  transition: height var(--tx-base), box-shadow var(--tx-base);
}
/* The header is sticky and in flow, so its OUTER height must not change when the
   island shrinks — otherwise every toggle near the top shifts the page by the
   difference and the header visibly jumps. 24 + 68 + 24 = 16 + 84 + 16 = 116. */
.ll-header.is-scrolled { padding-block: 24px; }
.ll-header.is-scrolled .ll-header__island { height: 68px; box-shadow: var(--ll-shadow-pop); }

.ll-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.ll-logo__mark { width: 56px; height: auto; transition: width var(--tx-base); }
.ll-header.is-scrolled .ll-logo__mark { width: 46px; }
.ll-logo__word {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.01em;
  transition: font-size var(--tx-base);
}
.ll-header.is-scrolled .ll-logo__word { font-size: 33px; }
.ll-logo__a { color: var(--ll-blue); }
.ll-logo__b { color: var(--ll-orange); }

.ll-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-inline: auto;
  min-width: 0;
}
.ll-nav a {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-ui);
  color: var(--ll-ink);
  white-space: nowrap;
  transition: color var(--tx-base);
}
.ll-nav a:hover { color: var(--ll-orange); }

.ll-header__cta { flex: 0 0 auto; margin-left: auto; }
.ll-nav + .ll-header__cta { margin-left: 0; }

.ll-burger {
  display: none;
  width: 48px; height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: var(--ll-card);
}
.ll-burger span,
.ll-burger span::before,
.ll-burger span::after {
  content: '';
  display: block;
  width: 22px; height: 2.5px;
  border-radius: 2px;
  background: var(--ll-ink);
  transition: transform var(--tx-base), opacity var(--tx-base);
}
.ll-burger span { position: relative; }
.ll-burger span::before { position: absolute; top: -7px; }
.ll-burger span::after  { position: absolute; top: 7px; }
.ll-burger[aria-expanded="true"] span { background: transparent; }
.ll-burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.ll-burger[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

/* Right-hand sheet */
.ll-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(47, 38, 26, .5);
  opacity: 0;
  visibility: hidden;
  /* `visibility` is delayed by the fade on CLOSE and flips instantly on OPEN —
     otherwise the sheet is still `hidden` when ll-ui.js moves focus into it and
     the focus call is silently dropped. */
  transition: opacity var(--tx-base), visibility 0s linear var(--tx-base);
}
.ll-drawer[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--tx-base), visibility 0s linear 0s;
}
.ll-drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(380px, 88vw);
  background: var(--ll-white);
  padding: 28px 28px 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .32s var(--tx-base);
}
.ll-drawer[aria-hidden="false"] .ll-drawer__panel { transform: none; }
.ll-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ll-drawer__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--ll-blue);
}
.ll-drawer__close {
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: var(--ll-card);
  color: var(--ll-ink);
  font-size: 26px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.ll-drawer__nav { display: flex; flex-direction: column; gap: 4px; }
.ll-drawer__nav a {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 24px;
  color: var(--ll-ink);
  padding: 10px 0;
  transition: color var(--tx-base);
}
.ll-drawer__nav a:hover { color: var(--ll-orange); }
.ll-drawer__cta { width: 100%; }
.ll-drawer__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--ll-blue);
}
.ll-drawer__phone:hover { color: var(--ll-orange); }
.ll-drawer__social { display: flex; gap: 12px; margin-top: auto; }

/* Round social buttons — shared by the drawer and the footer. */
.ll-social,
.ll-drawer__social a,
.ll-footer__social a {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: var(--ll-blue);
  background: rgba(255, 255, 255, .55);
  transition: background-color var(--tx-base), color var(--tx-base), transform var(--tx-base);
}
.ll-social:hover,
.ll-drawer__social a:hover,
.ll-footer__social a:hover {
  background: var(--ll-orange);
  color: var(--ll-white);
  transform: translateY(-2px);
}

/* ── 14 · Footer ─────────────────────────────────────────────────────────── */
.ll-footer {
  position: relative;
  padding-block: clamp(56px, 7vw, 88px) 32px;
  font-family: var(--font-ui);
  color: var(--ll-ink);
  /* No top margin: the scalloped edge is painted OUTSIDE the footer box and has
     to land ON the band above. Reserving space for it instead left a strip of
     page background showing between the two colours on every inner page. */
  margin-top: 0;
}

/* So the domes never cut across whatever ends the page, the last band keeps a
   scallop's worth of clear space under its content. `:where()` keeps this at
   the specificity of a single class, so any section that needs different
   bottom spacing (the founder photo, the blog CTA) still wins. */
:where(main) > :where(section):last-of-type {
  padding-bottom: calc(var(--section-y) + var(--ll-scallop-h));
}
.ll-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 44px;
}
.ll-footer__brand { margin-bottom: 22px; }
.ll-footer__brand .ll-logo__word { font-size: 34px; }
.ll-footer__tagline {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-ui);
  line-height: 1.5;
  color: var(--ll-ink);
  margin: 0 0 16px;
  max-width: 30ch;
}
.ll-footer__text {
  font-size: var(--fs-ui);
  line-height: 1.7;
  color: var(--ll-ink);
  margin: 0 0 22px;
  max-width: 34ch;
}
.ll-footer__social { display: flex; gap: 12px; }
.ll-footer__col h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--ll-blue);
  margin: 0 0 20px;
}
.ll-footer__col ul { display: flex; flex-direction: column; gap: 14px; }
.ll-footer__col a { font-size: var(--fs-ui); color: var(--ll-ink); transition: color var(--tx-base); }
.ll-footer__col a:hover { color: var(--ll-orange); }

.ll-footer__contact { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }
.ll-footer__contact-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: var(--fs-ui);
  line-height: 1.5;
  color: var(--ll-ink);
}
.ll-footer__contact-row a { color: inherit; transition: color var(--tx-base); }
.ll-footer__contact-row a:hover { color: var(--ll-orange); }
.ll-footer__contact-row--mail a { text-decoration: underline; text-underline-offset: 3px; }
.ll-footer__ico {
  flex: 0 0 24px;
  width: 24px; height: 24px;
  color: var(--ll-orange);
}
.ll-footer__ico svg { width: 100%; height: 100%; }

.ll-footer__cta { align-self: start; }

.ll-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid rgba(47, 38, 26, .14);
  font-size: 15px;
  color: var(--ll-ink-soft);
}
.ll-footer__legal { display: flex; flex-wrap: wrap; gap: 24px; }
.ll-footer__legal a { transition: color var(--tx-base); }
.ll-footer__legal a:hover { color: var(--ll-orange); }

/* ── 15 · Editorial: blog list, post, CMS page, modal, promo ─────────────── */
.ll-blog { background: var(--ll-cream); padding-block: var(--section-y); }
.ll-blog__head { text-align: center; margin-bottom: 44px; }
.ll-blog__head h1 { margin-bottom: 14px; }
.ll-bloglist { display: grid; grid-template-columns: 1fr; gap: 24px; }
.ll-blogcard {
  background: var(--ll-white);
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--ll-shadow-soft);
  transition: transform var(--tx-base), box-shadow var(--tx-base);
}
.ll-blogcard:hover { transform: translateY(-4px); box-shadow: var(--ll-shadow-pop); }
.ll-blogcard__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ll-card); }
.ll-blogcard__media img { width: 100%; height: 100%; object-fit: cover; }
.ll-blogcard__body { padding: 24px 24px 28px; }
.ll-blogcard__cat {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ll-blue);
  background: var(--ll-sky-soft);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  margin-bottom: 12px;
}
.ll-blogcard h3 { font-size: 22px; color: var(--ll-blue); margin: 0 0 10px; }
.ll-blogcard__excerpt { font-size: var(--fs-ui); line-height: 1.6; color: var(--ll-ink); margin: 0; }
.ll-blogcard__meta { font-size: 13px; color: var(--ll-ink-soft); margin-top: 14px; }

.ll-post { background: var(--ll-cream); padding-block: var(--section-y); }
.ll-post__article { max-width: 760px; margin-inline: auto; }
.ll-post__hero {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-card);
  overflow: hidden;
  margin-bottom: 30px;
  box-shadow: var(--ll-shadow-soft);
}
.ll-post__hero img { width: 100%; height: 100%; object-fit: cover; }
.ll-post__title { font-size: var(--fs-h2); margin-bottom: 14px; }
.ll-post__meta { font-size: 15px; color: var(--ll-ink-soft); margin-bottom: 30px; }
.ll-post__body {
  background: var(--ll-white);
  padding: clamp(24px, 4vw, 48px);
  border-radius: var(--r-card-lg);
  box-shadow: var(--ll-shadow-soft);
}

.ll-page { background: var(--ll-cream); padding-block: var(--section-y); }
.ll-page__inner {
  max-width: 820px;
  margin-inline: auto;
  background: var(--ll-white);
  padding: clamp(28px, 4vw, 52px);
  border-radius: var(--r-card-lg);
  box-shadow: var(--ll-shadow-soft);
}
.ll-page__inner h1 { font-size: var(--fs-h2); margin-bottom: 24px; }

/* Modal shell used by the promo popup (templates/partials/popup.php). */
.ll-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ll-modal[aria-hidden="false"] { display: flex; }
.ll-modal__backdrop { position: absolute; inset: 0; background: rgba(47, 38, 26, .6); }
.ll-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--ll-white);
  border-radius: var(--r-card-lg);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  overflow: auto;
  box-shadow: var(--ll-shadow-pop);
}
.ll-modal__close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  min-width: 44px; min-height: 44px;
  border-radius: 50%;
  background: var(--ll-white);
  color: var(--ll-ink);
  font-size: 26px;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: var(--ll-shadow-soft);
}
.ll-modal__title { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--ll-blue); margin: 0 0 10px; }

.ll-promo { z-index: 10050; }
.ll-promo__panel { padding: 0; overflow: hidden; text-align: center; }
.ll-promo__img { margin: 0; line-height: 0; }
.ll-promo__img img { width: 100%; height: 180px; object-fit: cover; }
.ll-promo__body-wrap { padding: 28px 28px 32px; }
.ll-promo__badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 16px;
  border-radius: var(--r-pill);
  background: var(--ll-orange);
  color: var(--ll-white);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ll-promo__body { color: var(--ll-ink); line-height: 1.6; margin: 0 0 22px; font-size: var(--fs-ui); }
.ll-promo__cta { width: 100%; }
.ll-promo__dismiss {
  display: block;
  width: 100%;
  margin-top: 12px;
  min-height: 48px;
  padding: 12px 8px;
  color: var(--ll-ink-soft);
  font-size: 15px;
  text-decoration: underline;
}

/* ── 16 · Reveal + utilities ─────────────────────────────────────────────── */
/* animations.js adds .js-reveal to <html> only when IntersectionObserver runs,
   so without JS everything stays visible. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s, transform .7s;
}
.js-reveal .reveal.revealed { opacity: 1; transform: none; }
.reveal--d1 { transition-delay: .1s; }
.reveal--d2 { transition-delay: .2s; }
.reveal--d3 { transition-delay: .3s; }
.reveal--d4 { transition-delay: .4s; }

.ll-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.ll-text-center { text-align: center; }
.ll-text-center .ll-lead { margin-inline: auto; }

.ll-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--ll-grid-min, 280px), 100%), 1fr));
  gap: 24px;
}

.ll-stack   { display: grid; gap: 16px; }
.ll-stack--lg { gap: 32px; }
.ll-mt-0 { margin-top: 0; }

/* ── 17 · Responsive ─────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .ll-form__row--2 { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .ll-check-list { grid-template-columns: 1fr 1fr; }
  .ll-bloglist   { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .ll-footer__grid { grid-template-columns: 1.3fr 1fr 1.2fr; gap: 48px; }
}

@media (min-width: 1024px) {
  .ll-bloglist { grid-template-columns: repeat(3, 1fr); }
}

/* Nav collapses to the burger. */
@media (max-width: 1200px) {
  .ll-nav { gap: 20px; }
  .ll-nav a { font-size: 15px; }
  .ll-header__island { gap: 16px; }
}

.ll-header__phone { display: none; }
@media (max-width: 1024px) {
  .ll-nav { display: none; }
  .ll-burger { display: flex; }
  .ll-header__island { justify-content: space-between; gap: 12px; padding-right: 10px; }
  .ll-header__phone {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--ll-orange); color: var(--ll-white);
    flex: 0 0 auto; margin-left: auto;
  }
  .ll-header__phone:hover { background: var(--ll-orange-2); }
  .ll-header__cta { margin-left: 8px; }
}

@media (max-width: 768px) {
  :root {
    --ll-scallop-w: 108px;
    --ll-scallop-h: 48px;
  }
  .ll-band--orange {
    --ll-scallop-w: 60px;
    --ll-scallop-h: 28px;
  }
  .ll-header__island { height: 68px; padding-left: 14px; }
  .ll-header.is-scrolled .ll-header__island { height: 60px; }
  .ll-header.is-scrolled { padding-block: 20px; }        /* 20 + 60 + 20 = 100 */
  .ll-header.is-scrolled { padding-block: 20px; }        /* 20 + 60 + 20 = 100 */
  .ll-logo__mark { width: 44px; }
  .ll-header.is-scrolled .ll-logo__mark { width: 40px; }
  .ll-logo__word { font-size: 30px; }
  .ll-header.is-scrolled .ll-logo__word { font-size: 27px; }

  .ll-card    { padding: 24px; }
  .ll-card--lg { padding: 32px; }
  .ll-card--media .ll-card__media { height: 200px; flex-basis: 200px; }
  .ll-card--media .ll-card__body { padding: 22px 22px 26px; }

  .ll-accordion__q { font-size: 19px; padding: 20px 22px; }
  .ll-accordion__a { padding: 0 22px 22px; }

  .ll-slider__arrow { display: none; }
  .ll-slider { gap: 16px; }

  .ll-lightbox__inner { padding: 60px 12px 24px; }
  .ll-lightbox__btn { width: 46px; height: 46px; }
  .ll-lightbox__prev { left: 8px; }
  .ll-lightbox__next { right: 8px; }

  .ll-circle-card { --ll-circle-size: 260px; }
  .ll-circle-card .ll-pill-label { left: -3%; bottom: 6%; }

  .ll-footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  :root {
    --gutter: 16px;
    --fs-body: 16px;
  }
  .ll-btn { padding: 16px 26px; font-size: var(--fs-ui); min-height: 52px; }
  .ll-btn--arrow { padding-right: 10px; }
  .ll-btn--sm { padding: 12px 20px; font-size: 15px; min-height: 46px; }

  .ll-header__island { height: 62px; gap: 8px; padding: 0 8px 0 12px; }
  .ll-header.is-scrolled .ll-header__island { height: 56px; }
  .ll-header.is-scrolled { padding-block: 19px; }        /* 19 + 56 + 19 = 94 */
  .ll-header.is-scrolled { padding-block: 19px; }        /* 19 + 56 + 19 = 94 */
  .ll-logo__mark { width: 38px; }
  .ll-header.is-scrolled .ll-logo__mark { width: 34px; }
  .ll-logo__word { font-size: 25px; }
  .ll-header.is-scrolled .ll-logo__word { font-size: 23px; }
  .ll-burger { width: 42px; height: 42px; flex-basis: 42px; }

  .ll-pill-label { font-size: 15px; padding-left: 16px; gap: 10px; }
  .ll-pill-label__arrow { flex-basis: 38px; width: 38px; height: 38px; }
  .ll-pill-label__arrow::after { width: 17px; height: 17px; -webkit-mask-size: 17px 17px; mask-size: 17px 17px; }

  .ll-circle-card { --ll-circle-size: 100%; }
  .ll-card { padding: 20px; }
  .ll-card--lg { padding: 24px; }
  .ll-drawer__panel { padding: 20px 20px 32px; width: min(320px, 92vw); }
  .ll-drawer__nav a { font-size: 20px; }

  .ll-footer__cta { width: 100%; }
  .ll-calendar__day { width: 36px; height: 36px; font-size: 15px; }
  .ll-select select, select.ll-select { min-height: 56px; padding-inline: 18px 48px; }
}

/* ── 18 · Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js-reveal .reveal { opacity: 1 !important; transform: none !important; }
  .ll-slider { scroll-behavior: auto; }
}

/* ── Mobile header island: logo + phone + CTA + burger must fit 375px ─────── */
/* Adding the tel: disc pushed the burger off-screen at 390px, so the smallest
   breakpoint trims the gaps, the island padding and the CTA's side padding. */
@media (max-width: 480px) {
  .ll-header__island { gap: 6px; padding: 0 6px 0 10px; }
  .ll-header__phone { width: 42px; height: 42px; }
  .ll-header__cta { padding-inline: 14px; margin-left: 4px; }
}

/* The burger must survive a wider fallback wordmark while the webfont is still
   loading (font-display:swap), so the logo and the CTA are allowed to shrink
   while the phone disc and the burger keep their fixed tap targets. */
@media (max-width: 1024px) {
  .ll-logo { min-width: 0; }
  .ll-logo__word { min-width: 0; overflow: hidden; }
  .ll-header__cta {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
  }
}

/* The pill above is allowed to shrink (and clip) so the burger always fits, so
   on a phone the label has to earn its room instead of losing letters: tighter
   tracking and side padding buy it back at 360-430px, and under 380px the logo
   and the island gaps give up a few more pixels as well. */
@media (max-width: 480px) {
  .ll-header__cta { padding-inline: 12px; letter-spacing: .06em; }
}

/* Under 360px (iPhone SE 1st gen and the like) the tracking alone is not enough
   and the pill still lost letters, so the logo and the island gaps chip in too. */
@media (max-width: 359.98px) {
  .ll-header__island { gap: 4px; padding: 0 6px 0 8px; }
  .ll-logo__mark { width: 34px; }
  .ll-logo__word { font-size: 21px; }
  .ll-header__cta { font-size: 13px; padding-inline: 10px; margin-left: 0; letter-spacing: .04em; }
}