:root {
  --el-bg: #FBF6FB;
  --el-surface: #FFFFFF;
  --el-fg: #3B3454;
  --el-muted: #8A83A0;
  --el-on-surface: #16161a;
  --el-on-surface-muted: #5b5b62;
  --el-ink: #111827;
  --el-accent: #6366f1;
  --el-accent-text: #6366f1;
  --el-accent-on-light: #5e61e5;
  --el-on-accent: #ffffff;
  --el-border: rgba(59,52,84,0.10);
  --el-overlay-dark: rgba(59,52,84,0.42);
  --el-alt-bg: #F1EAF8;
  --el-alt-fg: #3B3454;
  --el-display: 'Varela Round', "Varela Round Fallback", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --el-body: 'Nunito Sans', "Nunito Sans Fallback", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --el-eyebrow: 'Nunito Sans', "Nunito Sans Fallback", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --el-display-tracking: -0.01em;
  --el-display-leading: 1.0;
  --el-eyebrow-tracking: 0.12em;
  --el-easing: cubic-bezier(0.34, 1.4, 0.64, 1);
  --el-entry-ms: 560ms;
  --el-radius: 2px;
  --el-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 16px 40px -16px rgba(0,0,0,0.10);
  /* Reading measure — a ~65ch line is the editorial sweet spot: long enough
     to avoid choppy ragging, short enough that the eye tracks line-to-line
     without losing its place. Primitives that render running prose opt into
     it via var(--el-measure) so body copy never sprawls the full column. */
  --el-measure: 66ch;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--el-bg);
  color: var(--el-fg);
  font-family: var(--el-body);
  font-size: clamp(1.0rem, 1vw + 0.6rem, 1.15rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Let variable body faces (Fraunces/Newsreader/Source Serif carry opsz) pick
     their reading optical size, and let the browser avoid orphans/rivers in
     running copy. text-wrap:pretty degrades silently where unsupported. */
  font-optical-sizing: auto;
  text-wrap: pretty;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
/* A restrained accent selection — the one place brand color earns a cameo in
   otherwise-neutral copy. Kept low-key so it reads considered, not loud. */
::selection { background: color-mix(in srgb, var(--el-accent) 22%, transparent); color: var(--el-fg); }

.el-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
}

.el-display {
  font-family: var(--el-display);
  font-weight: 400;
  letter-spacing: var(--el-display-tracking);
  line-height: var(--el-display-leading, 1.0);
  /* Never fake an italic or bold the face doesn't ship: the browser
     slants the glyphs and they run into each other. Pin 2026-09-14. */
  font-synthesis: none;
  /* A more confident preferred size (7.4vw vs the old 6.5vw) reaches each
     language's own display_max sooner, so the hero headline lands as a real
     display moment on tablet/desktop rather than a merely-large heading.
     The clamp max still caps it, so restrained languages stay restrained. */
  font-size: clamp(2.4rem, 7.4vw, 5.0rem);
  /* Balanced ragging is the quiet tell of art-directed type — even line
     lengths instead of one long line + one orphaned word. */
  text-wrap: balance;
  font-optical-sizing: auto;
  margin: 0;
  color: inherit;
}
.el-display-md {
  font-size: clamp(2rem, 4.7vw, 3.85rem);
  line-height: 1.05;
  text-wrap: balance;
}
.el-eyebrow {
  font-family: var(--el-eyebrow);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--el-eyebrow-tracking);
  text-transform: uppercase;
  line-height: 1;
  color: var(--el-muted);
  margin: 0 0 1.15rem 0;
}
.el-eyebrow-inverted { color: rgba(250, 250, 247, 0.7); }

.el-btn-ink {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  background: var(--el-ink);
  color: var(--el-on-ink, var(--el-bg));
  font-family: var(--el-body);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border-radius: var(--el-radius);
  transition: transform var(--el-entry-ms) var(--el-easing), opacity var(--el-entry-ms) var(--el-easing);
  border: 1px solid transparent;
  cursor: pointer;
}
.el-btn-ink:hover { transform: translateY(-1px); opacity: 0.94; }
.el-btn-on-dark { background: var(--el-bg); color: var(--el-fg); }

/* SITE chrome (header + footer) */
.el-site-header {
  position: sticky; top: 0; z-index: 50;
  /* Theme-aware: the header takes the language's OWN background (translucent for
     the blur), so a dark language gets a dark header — not the old FIXED cream,
     which shipped a light header on every dark-tone page. Brand/nav text below
     use --el-fg/--el-muted from the SAME palette, so they always contrast (the
     prior bug was theming ONLY the text while the bg stayed cream). Fallback to
     an opaque --el-bg where color-mix is unsupported. Pin 2026-08-26. */
  background: var(--el-bg);
  background: color-mix(in srgb, var(--el-bg) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--el-border);
}
.el-site-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem clamp(1.25rem, 3vw, 2.5rem);
}
@media (min-width: 900px) {
  .el-site-header.el-mh-centered .el-site-header-inner {
    flex-direction: column; justify-content: center; gap: .55rem; text-align: center;
  }
  .el-site-header.el-mh-centered .el-site-brand { font-size: 1.35rem; }
}
.el-site-brand {
  font-family: var(--el-display);
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  /* Theme-aware: matches the header's theme-aware background above. bg + fg come
     from the SAME palette so they always contrast — light header/dark text on a
     light tone, dark header/light text on a dark tone. Pin 2026-08-26. */
  color: var(--el-fg);
}
.el-site-nav { display: flex; gap: clamp(1rem, 2.5vw, 2rem); }
.el-site-nav a {
  font-family: var(--el-body);
  font-size: 0.92rem;
  color: var(--el-muted);
  transition: color 200ms var(--el-easing);
}
.el-site-nav a:hover { color: var(--el-fg); }
/* ── Rich nav dropdown / mega-menu ──────────────────────────────────────
   A nav item with children renders a hover/focus dropdown panel (label +
   description per item). Fixed light panel + dark text so it's readable
   under any theme, matching the fixed cream header. */
.el-nav-item { position: relative; display: inline-flex; align-items: center; }
.el-nav-trigger { display: inline-flex; align-items: center; gap: 0.32rem; background: none;
  border: 0; cursor: pointer; padding: 0; font: inherit; color: #52504b; }
.el-nav-trigger:hover { color: #1a1a1a; }
.el-nav-caret { transition: transform 200ms var(--el-easing); opacity: 0.7; }
.el-nav-has-menu:hover .el-nav-caret, .el-nav-has-menu:focus-within .el-nav-caret { transform: rotate(180deg); }
.el-nav-menu {
  position: absolute; top: calc(100% + 0.65rem); left: 0;
  min-width: 260px; padding: 0.6rem;
  background: #ffffff; border: 1px solid rgba(20,20,20,0.08);
  border-radius: 16px; box-shadow: 0 24px 56px rgba(20,20,20,0.15);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 180ms var(--el-easing), transform 180ms var(--el-easing), visibility 180ms;
  z-index: 60;
}
.el-nav-has-menu:hover .el-nav-menu, .el-nav-has-menu:focus-within .el-nav-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* hover bridge across the gap so the menu doesn't flicker closed */
.el-nav-menu::before { content: ""; position: absolute; top: -0.65rem; left: 0; right: 0; height: 0.65rem; }
.el-nav-menu-grid { display: grid; gap: 0.12rem; }
.el-nav-menu-grid-2 { grid-template-columns: 1fr 1fr; min-width: 480px; column-gap: 1.5rem; }
.el-nav-menu-item { display: flex; flex-direction: column; gap: 0.12rem; padding: 0.65rem 0.8rem;
  border-radius: 11px; text-decoration: none; transition: background 140ms var(--el-easing); }
.el-nav-menu-item:hover { background: rgba(20,20,20,0.045); }
.el-nav-menu-label { font-family: var(--el-display); font-size: 0.95rem; font-weight: 600; color: #1a1a1a; }
.el-nav-menu-desc { font-family: var(--el-body); font-size: 0.82rem; line-height: 1.4; color: #6b6b66; }
@media (max-width: 600px) { .el-site-nav { display: none; } }

.el-site-footer {
  background: var(--el-alt-bg);
  color: var(--el-alt-fg);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  margin-top: clamp(2rem, 4vw, 4rem);
}
.el-site-footer-inner {
  display: flex; flex-direction: column; gap: 0.5rem;
  align-items: center; text-align: center;
}
.el-footer-brand { font-family: var(--el-display); font-size: 1.5rem; margin: 0; }
/* The footer's own text colour: a fixed near-white vanished on light footers
   (1.12:1 on a lavender footer). Pin 2026-09-14. */
.el-footer-meta { font-family: var(--el-eyebrow); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--el-alt-fg); opacity: 0.72; margin: 0; }

/* HERO — fullbleed atmospheric */
.el-hero {
  position: relative;
  width: 100%;
  min-height: 92vh;
  display: grid;
  overflow: hidden;
  background: var(--el-fg);
}
.el-hero-image {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  will-change: transform;
  
}
/* ── Image-fallback policy (2026-06-08) ─────────────────────────────
   Default: COLLAPSE.  No background, no border, no radial dots, no
   min-height.  Content-card primitives (product_card, dual_card,
   showcase, metric_img, step_overlay, callout, cta_image, splitm,
   vid_thumb, offset_img, etc.) that emit the fallback class for a
   missing image now render NOTHING — no blurry peach placeholder
   blob, no fake border, no ghost.  The card just shrinks to its
   text content.

   Only hero contexts keep a visible fallback gradient (otherwise the
   hero would be blank).  Those specifically target classes:
     .el-hero-image, .el-hero-split-img, .el-hero-inset-thumb,
     .el-video, .el-phonebig-img, .el-device-img
   — see the override block below. */
.el-hero-image-fallback {
  background: transparent;
  border: 0;
  display: none;
}
/* Hero-context fallbacks: REVERT default (display:none) → block,
   render a tonal gradient so the hero isn't blank when the Designer
   LLM omits hero_image_url.  Uses accent tint so it reads as a brand
   surface rather than a stock placeholder. */
.el-hero-image.el-hero-image-fallback,
.el-hero-split-img.el-hero-image-fallback,
.el-hero-inset-thumb.el-hero-image-fallback,
.el-video.el-hero-image-fallback,
.el-phonebig-img.el-hero-image-fallback,
.el-device-img.el-hero-image-fallback {
  display: block;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--el-accent) 18%, var(--el-bg)) 0%,
      var(--el-bg) 60%,
      color-mix(in srgb, var(--el-fg) 18%, var(--el-bg)) 100%);
}
/* Hero scrim — gradient overlay that guarantees the off-white hero
   text remains legible on top of the bg image regardless of what the
   photo's mid-tones happen to look like.  Pin: 2026-05-12 user
   reported white labels on a light beige brushes photo — the prior
   ``5% black at 40%`` midpoint left text floating on whatever the
   image showed.  Lifted to 25-35-50% so even a fully-white image still
   has ~3:1 contrast for the cream text. */
.el-hero-scrim {
  /* Bottom-weighted gradient: hero content is ``align-self:end`` (anchored to
     the bottom), so the scrim must be DARKEST where the text sits.  The prior
     0.45/0.30/0.65 curve had a weak 0.30 midpoint and only 0.65 at the bottom
     — over a bright photo (a sunlit coastline, a white sky) the cream text
     dropped to ~2.5:1 and read as washed-out.  Lifted so bottom-anchored cream
     text (#FAFAF7) clears 3:1 (large hero display) even on a near-white image,
     while the top stays light enough that the photo still reads.
     Pin 2026-08-25 (rendered-batch: restaurant/tutor hero headlines unreadable
     on bright hero photos). */
  position: absolute; inset: 0; background: linear-gradient(
    180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.42) 50%, rgba(0,0,0,0.82) 100%
  );
}
.el-hero-scrim-light .el-hero-scrim {
  /* Light scrim variant — used when the design intentionally wants
     dark text on a washed-out image.  Made denser so the dark text
     stays legible (was nearly invisible at 25%). */
  background: linear-gradient(180deg, rgba(250,250,247,0.55), rgba(250,250,247,0.78));
}
.el-hero-content {
  position: relative; z-index: 2;
  align-self: end;
  padding: clamp(2rem, 6vw, 5rem) clamp(1.25rem, 5vw, 3.5rem);
  color: #FAFAF7;
  max-width: 980px;
}
.el-hero-content .el-eyebrow { color: rgba(250,250,247,0.75); }
.el-hero-subhead {
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  color: rgba(250,250,247,0.88);
  max-width: 52ch;
  margin: 1.35rem 0 1.9rem 0;
  line-height: 1.55;
  text-wrap: balance;
}

/* HERO — split two-image */
.el-hero-split { position: relative; min-height: 88vh; overflow: hidden; }
.el-hero-split-grid { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.el-hero-split-img { width: 100%; height: 100%; object-fit: cover; }
/* Image-media fallback ground (2026-09-07): full-bleed photo wrappers get a
   warm-dark base so overlaid LIGHT text stays legible WHILE the lazy image is
   still loading (fast scroll) or if it fails — kills the "invisible text on a
   blank cream panel" flash seen on hero-split / dual-cards / step-overlay. */
.el-hero-split-grid, .el-hero-split-half, .el-dual-card-media,
.el-step-overlay-photo, .el-hero-wordmark { background-color: #2b2622; }
.el-hero-split-overlay {
  position: relative; z-index: 2;
  display: grid; place-items: center; text-align: center;
  min-height: 88vh;
  color: #FAFAF7;
  padding: clamp(2rem, 5vw, 4rem);
  background: linear-gradient(180deg, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.62) 100%);
}
/* LEGIBILITY: the overlay sets a light colour, but headline/body classes
   (.el-display etc.) paint their own DARK --el-fg, which is illegible over the
   hero photo. Force every text node in the overlay to the light scrim colour +
   add a soft text-shadow so it holds on bright patches of the image.
   Pin 2026-09-07 (cold-brew hero headline invisible over the coffee photo). */
.el-hero-split-overlay :is(h1, h2, h3, p, span, a, li, .el-display, .el-eyebrow,
  [class*="headline"], [class*="-sub"], [class*="eyebrow"], [class*="lede"]) {
  color: #FAFAF7;
  -webkit-text-fill-color: #FAFAF7;
  text-shadow: 0 1px 24px rgba(0,0,0,0.35);
}
@media (max-width: 720px) {
  .el-hero-split-grid { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
}

/* PRESS strip */
.el-press { padding: clamp(2.5rem, 6vw, 4.5rem) 0; border-top: 1px solid var(--el-border); border-bottom: 1px solid var(--el-border); }
.el-press-eyebrow { text-align: center; }
.el-press-list {
  list-style: none; padding: 0; margin: 1.5rem 0 0 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  opacity: 0.75;
}
.el-press-item img { max-height: 28px; width: auto; filter: grayscale(1) contrast(0.85); }
.el-press-wordmark {
  font-family: var(--el-eyebrow); font-size: 0.95rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--el-fg);
}

/* MANIFESTO essay */
.el-manifesto { padding: clamp(4rem, 10vw, 8rem) 0; }
.el-manifesto-inner { max-width: 780px; }
.el-essay { margin-top: 2rem; max-width: var(--el-measure); }
.el-essay-body { margin: 0 0 1.25rem 0; font-size: clamp(1.05rem, 1.2vw, 1.2rem); line-height: 1.65; color: var(--el-fg); }
.el-essay-attribution { margin-top: 1.5rem; color: var(--el-muted); font-style: italic; }

/* MAKER portrait */
.el-maker { padding: clamp(4rem, 10vw, 8rem) 0; }
.el-maker-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.el-maker-figure { margin: 0; }
.el-maker-portrait { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--el-radius); box-shadow: var(--el-shadow); }
.el-maker-caption { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.15rem; }
.el-maker-name { font-family: var(--el-display); font-size: 1.15rem; }
.el-maker-role { font-family: var(--el-eyebrow); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--el-muted); }
@media (max-width: 820px) { .el-maker-grid { grid-template-columns: 1fr; } }
/* Maker — text-only essay layout when no portrait is available */
.el-maker-textonly .el-container.el-maker-text-wide {
  max-width: 760px; padding: 0 clamp(1.25rem, 5vw, 2rem);
}
.el-maker-byline {
  margin: 0.75rem 0 1.5rem 0; color: var(--el-muted);
  font-family: var(--el-eyebrow); font-size: 0.78rem; letter-spacing: 0.18em;
  text-transform: uppercase;
}
.el-maker-byline .el-maker-name { color: var(--el-fg); font-family: var(--el-display); font-size: 0.95rem; text-transform: none; letter-spacing: 0; }

/* PROCESS numbered */
.el-process { padding: clamp(4rem, 10vw, 8rem) 0; }
.el-process-list { list-style: none; counter-reset: step; padding: 0; margin: 2rem 0 0 0; display: grid; gap: clamp(2rem, 5vw, 4rem); }
.el-process-step { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.el-process-step:nth-child(even) { direction: rtl; }
.el-process-step:nth-child(even) > * { direction: ltr; }
.el-process-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--el-radius); }
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  .el-process-stack .el-process-list { gap: clamp(1.5rem, 3vw, 2.5rem); }
  .el-process-stack .el-process-step { position: sticky; background: var(--el-surface, #fff);
    border: 1px solid var(--el-border); border-radius: max(var(--el-radius), 16px);
    padding: clamp(1.25rem, 2.5vw, 2.25rem); box-shadow: 0 -12px 40px -24px rgba(0,0,0,0.35); }
  .el-process-stack .el-process-step:nth-child(1) { top: 104px; }
  .el-process-stack .el-process-step:nth-child(2) { top: 120px; }
  .el-process-stack .el-process-step:nth-child(3) { top: 136px; }
  .el-process-stack .el-process-step:nth-child(4) { top: 152px; }
  .el-process-stack .el-process-step:nth-child(5) { top: 168px; }
  .el-process-stack .el-process-img { max-height: 46vh; }
}
/* Missing-photo fallback: a curator that returns 2 photos for a 4-step process
   leaves the other steps with ``el-process-num-panel``.  Without its own style
   it inherited only .el-process-img sizing → an EMPTY 4:3 box with a tiny
   unstyled numeral, reading as a broken/empty cell (tutor "Get Started" steps
   03/04).  Style it as a deliberate editorial numeral panel — tinted surface,
   large ghosted numeral — so the gaps look intentional.  Pin 2026-08-25. */
.el-process-num-panel {
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--el-fg) 6%, var(--el-bg));
  border: 1px solid color-mix(in srgb, var(--el-fg) 10%, transparent);
  color: color-mix(in srgb, var(--el-fg) 20%, transparent);
  font-family: var(--el-display); font-weight: 600;
  font-size: clamp(3rem, 8vw, 6rem); letter-spacing: -0.02em; line-height: 1;
}
.el-process-num { font-family: var(--el-eyebrow); font-size: 0.8rem; letter-spacing: 0.18em; color: var(--el-accent-text); display: block; margin-bottom: 0.5rem; }
.el-process-step-title { font-family: var(--el-display); font-size: clamp(1.35rem, 2.4vw, 2rem); margin: 0 0 0.75rem 0; font-weight: 400; }
.el-process-step-body { font-size: 1rem; line-height: 1.6; color: var(--el-fg); max-width: 48ch; }
@media (max-width: 820px) {
  .el-process-step, .el-process-step:nth-child(even) { grid-template-columns: 1fr; direction: ltr; }
}
/* Process — text-only step layout when no step images are available */
.el-process-step-textonly {
  align-items: start;
}
.el-process-num-mega {
  font-family: var(--el-display);
  font-size: clamp(4rem, 10vw, 8rem);
  line-height: 0.9;
  color: var(--el-accent-text);
  opacity: 0.85;
}

/* SPECS dotted */
.el-specs { padding: clamp(4rem, 10vw, 8rem) 0; }
.el-specs-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.el-specs-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--el-radius); }
.el-specs-list { list-style: none; padding: 0; margin: 1.5rem 0 0 0; }
.el-specs-row { display: flex; align-items: baseline; padding: 0.95rem 0; border-bottom: 1px solid var(--el-border); gap: 0.75rem; }
.el-specs-label { font-family: var(--el-eyebrow); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--el-muted); flex: 0 0 auto; }
.el-specs-dots { flex: 1 1 auto; border-bottom: 1px dotted rgba(26,26,26,0.25); transform: translateY(-0.35em); margin: 0 0.5rem; }
.el-specs-value { font-family: var(--el-display); font-size: 1.1rem; color: var(--el-fg); flex: 0 1 auto; min-width: 0; text-align: right; overflow-wrap: anywhere; }
@media (max-width: 820px) { .el-specs-grid { grid-template-columns: 1fr; } }
/* A long value ("Just yourself — mats provided") pushed a 390px page 6px sideways;
   on phones the label sits above its value. Pin 2026-09-15. */
@media (max-width: 560px) {
  .el-specs-row { flex-wrap: wrap; row-gap: 0.25rem; }
  .el-specs-dots { display: none; }
  .el-specs-label { flex: 1 1 100%; }
  .el-specs-value { flex: 1 1 100%; text-align: left; }
}
/* Specs — text-only layout when no detail photo is available */
.el-specs-textonly .el-specs-text-full { max-width: 840px; margin: 0 auto; }
.el-specs-list-wide .el-specs-row { padding: 1.05rem 0; }
.el-specs-list-wide .el-specs-label { flex: 0 0 38%; }
.el-specs-list-wide .el-specs-value { flex: 0 0 38%; text-align: right; }

/* PHOTO mosaic */
.el-mosaic { padding: clamp(4rem, 10vw, 8rem) 0; }
.el-mosaic-head { margin-bottom: 2.5rem; max-width: 720px; }
.el-mosaic-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(140px, 14vw, 220px);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.el-mosaic-tile { margin: 0; position: relative; overflow: hidden; border-radius: var(--el-radius); }
.el-mosaic-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--el-easing); }
.el-mosaic-tile:hover img { transform: scale(1.03); }
/* Lightbox overlay (click-to-zoom gallery photos) — see the compiler's script. */
.el-lightbox { position: fixed; inset: 0; z-index: 9999; display: none;
  align-items: center; justify-content: center; padding: 3vmin;
  background: rgba(8,8,10,0.92); cursor: zoom-out;
  opacity: 0; transition: opacity 220ms var(--el-easing); }
.el-lightbox.open { display: flex; opacity: 1; }
.el-lightbox-img { max-width: 94vw; max-height: 92vh; object-fit: contain;
  border-radius: 6px; box-shadow: 0 24px 80px rgba(0,0,0,0.55); }
@media (prefers-reduced-motion: reduce) { .el-lightbox { transition: none; } }
.el-mosaic-tile-0 { grid-column: span 4; grid-row: span 2; }
.el-mosaic-tile-1 { grid-column: span 2; grid-row: span 1; }
.el-mosaic-tile-2 { grid-column: span 2; grid-row: span 1; }
.el-mosaic-tile-3 { grid-column: span 3; grid-row: span 1; }
.el-mosaic-tile-4 { grid-column: span 3; grid-row: span 1; }
.el-mosaic-tile-5 { grid-column: span 6; grid-row: span 1; }
/* BENTO form of the capabilities block: a lead card over two rows, the rest
   around it; columns follow the card count so no row is left half full. */
.el-bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.75rem, 1.4vw, 1.25rem);
  margin-top: 2.5rem; grid-auto-flow: dense; }
.el-bento-cell { display: flex; flex-direction: column; overflow: hidden; border-radius: max(var(--el-radius), 14px);
  background: var(--el-surface, #fff); border: 1px solid var(--el-border); }
.el-bento-copy { padding: clamp(1.25rem, 2.2vw, 1.9rem); display: flex; flex-direction: column; gap: 0.6rem; }
.el-bento-title { font-family: var(--el-display); font-size: clamp(1.2rem, 1.8vw, 1.55rem); line-height: 1.2;
  margin: 0; color: var(--el-fg); text-wrap: balance; }
.el-bento-body { margin: 0; color: var(--el-muted); font-size: 1rem; line-height: 1.55; max-width: 60ch; }
.el-bento-media { margin: 0; flex: 1 1 auto; min-height: 180px; }
.el-bento-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.el-bento-cell-1 { background: color-mix(in srgb, var(--el-accent) 10%, var(--el-surface, #fff)); }
.el-bento-grid-3 .el-bento-cell-0, .el-bento-grid-4 .el-bento-cell-0, .el-bento-grid-5 .el-bento-cell-0,
.el-bento-grid-6 .el-bento-cell-0 { grid-column: span 2; grid-row: span 2; }
.el-bento-grid-3 .el-bento-cell-1, .el-bento-grid-3 .el-bento-cell-2,
.el-bento-grid-4 .el-bento-cell-1, .el-bento-grid-5 .el-bento-cell-1, .el-bento-grid-6 .el-bento-cell-1 { grid-column: span 2; }
.el-bento-grid-5 .el-bento-cell-4 { grid-column: 1 / -1; flex-direction: row; }
.el-bento-grid-6 .el-bento-cell-4, .el-bento-grid-6 .el-bento-cell-5 { grid-column: span 2; }
.el-bento-grid-5 .el-bento-cell-4 .el-bento-media { flex: 0 0 45%; position: relative; min-height: 220px; }
.el-bento-grid-5 .el-bento-cell-4 .el-bento-media img { position: absolute; inset: 0; }
.el-bento-grid-5 .el-bento-cell-4 .el-bento-copy { justify-content: center; }
/* No photos: the lead card was a large empty block (live build 2026-09-27);
   every card takes half the row and an odd last card the whole row. */
.el-bento-grid-plain .el-bento-cell { grid-column: span 2; grid-row: auto; }
.el-bento-grid-plain .el-bento-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 820px) {
  .el-bento-grid { grid-template-columns: 1fr 1fr; }
  .el-bento-grid .el-bento-cell { grid-column: span 1; grid-row: auto; }
  .el-bento-grid .el-bento-cell-0, .el-bento-grid .el-bento-cell--media,
  .el-bento-grid .el-bento-cell:last-child:nth-child(even) { grid-column: 1 / -1; }
  .el-bento-grid-5 .el-bento-cell-4 { flex-direction: column; }
  .el-bento-grid-5 .el-bento-cell-4 .el-bento-media { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
}
@media (max-width: 480px) { .el-bento-grid { grid-template-columns: 1fr; } .el-bento-grid .el-bento-cell { grid-column: 1 / -1; } }

/* Layout families. row: an even run of portrait photos. stagger: the same
   run with every other photo dropped, like a magazine spread. lead: one wide
   cinematic photo over a row of the rest. Columns match the photo count so
   no row is left half full. */
.el-mosaic.el-mosaic-row .el-mosaic-grid, .el-mosaic.el-mosaic-stagger .el-mosaic-grid, .el-mosaic.el-mosaic-lead .el-mosaic-grid {
  grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; }
.el-mosaic.el-mosaic-row .el-mosaic-grid-4, .el-mosaic.el-mosaic-stagger .el-mosaic-grid-4,
.el-mosaic.el-mosaic-lead .el-mosaic-grid-5 { grid-template-columns: repeat(4, 1fr); }
.el-mosaic.el-mosaic-row .el-mosaic-grid-5, .el-mosaic.el-mosaic-stagger .el-mosaic-grid-5,
.el-mosaic.el-mosaic-lead .el-mosaic-grid-6 { grid-template-columns: repeat(5, 1fr); }
.el-mosaic.el-mosaic-lead .el-mosaic-grid-3 { grid-template-columns: repeat(2, 1fr); }
.el-mosaic.el-mosaic-row .el-mosaic-tile, .el-mosaic.el-mosaic-stagger .el-mosaic-tile, .el-mosaic.el-mosaic-lead .el-mosaic-tile {
  grid-column: auto; grid-row: auto; aspect-ratio: 4 / 5; }
.el-mosaic.el-mosaic-stagger .el-mosaic-tile:nth-child(even) { transform: translateY(clamp(1.5rem, 4vw, 3.5rem)); }
.el-mosaic.el-mosaic-stagger .el-mosaic-grid { padding-bottom: clamp(1.5rem, 4vw, 3.5rem); }
.el-mosaic.el-mosaic-lead .el-mosaic-tile-0 { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
/* accordion: photos as tall strips; the one under the pointer (or keyboard
   focus) opens wide. */
.el-mosaic.el-mosaic-accordion .el-mosaic-grid { display: flex; gap: clamp(0.5rem, 1vw, 0.9rem);
  height: clamp(320px, 42vw, 540px); grid-auto-rows: auto; }
.el-mosaic.el-mosaic-accordion .el-mosaic-tile { flex: 1 1 0; min-width: 0; grid-column: auto; grid-row: auto;
  transition: flex-grow 520ms var(--el-easing); outline-offset: 3px; }
.el-mosaic.el-mosaic-accordion .el-mosaic-tile:first-child,
.el-mosaic.el-mosaic-accordion .el-mosaic-tile:hover, .el-mosaic.el-mosaic-accordion .el-mosaic-tile:focus-within { flex-grow: 3.2; }
.el-mosaic.el-mosaic-accordion .el-mosaic-grid:hover .el-mosaic-tile:first-child:not(:hover) { flex-grow: 1; }
@media (prefers-reduced-motion: reduce) { .el-mosaic.el-mosaic-accordion .el-mosaic-tile { transition: none; } }
.el-mosaic.el-mosaic-lead .el-mosaic-grid-3 .el-mosaic-tile:not(.el-mosaic-tile-0) { aspect-ratio: 4 / 3; }
.el-mosaic-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.75rem 1rem;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.55)); color: #FAFAF7;
  font-family: var(--el-eyebrow); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; }
@media (max-width: 820px) {
  .el-mosaic-grid { grid-template-columns: repeat(2, 1fr); }
  .el-mosaic-tile-0, .el-mosaic-tile-1, .el-mosaic-tile-2,
  .el-mosaic-tile-3, .el-mosaic-tile-4, .el-mosaic-tile-5 {
    grid-column: span 2; grid-row: span 1;
  }
  .el-mosaic.el-mosaic-row .el-mosaic-grid[class*="el-mosaic-grid-"], .el-mosaic.el-mosaic-stagger .el-mosaic-grid[class*="el-mosaic-grid-"],
  .el-mosaic.el-mosaic-lead .el-mosaic-grid[class*="el-mosaic-grid-"] { grid-template-columns: repeat(2, 1fr); }
  .el-mosaic.el-mosaic-row .el-mosaic-tile, .el-mosaic.el-mosaic-stagger .el-mosaic-tile, .el-mosaic.el-mosaic-lead .el-mosaic-tile {
    grid-column: auto; aspect-ratio: 4 / 5; }
  .el-mosaic.el-mosaic-lead .el-mosaic-tile-0 { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  /* A lone last photo takes the full width rather than half a row. */
  .el-mosaic.el-mosaic-row .el-mosaic-tile:last-child:nth-child(odd),
  .el-mosaic.el-mosaic-stagger .el-mosaic-tile:last-child:nth-child(odd),
  .el-mosaic.el-mosaic-lead .el-mosaic-tile:last-child:nth-child(even) { grid-column: 1 / -1; aspect-ratio: 16 / 9; transform: none; }
  .el-mosaic.el-mosaic-stagger .el-mosaic-tile:nth-child(even) { transform: translateY(1.5rem); }
  .el-mosaic.el-mosaic-accordion .el-mosaic-grid { display: grid; height: auto; grid-template-columns: repeat(2, 1fr); }
  .el-mosaic.el-mosaic-accordion .el-mosaic-tile { aspect-ratio: 4 / 5; }
  .el-mosaic.el-mosaic-accordion .el-mosaic-tile:first-child,
  .el-mosaic.el-mosaic-accordion .el-mosaic-tile:last-child:nth-child(even) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}

/* INGREDIENT callouts */
.el-callouts { padding: clamp(4rem, 10vw, 8rem) 0; }
.el-callout-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: 2.5rem; }
.el-callout-card { display: flex; flex-direction: column; gap: 0.75rem; }
.el-callout-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--el-radius); }
.el-callout-title { font-family: var(--el-display); font-size: 1.2rem; font-weight: 400; margin: 0; }
.el-callout-body { font-size: 1rem; color: var(--el-muted); margin: 0; line-height: 1.55; }

/* TESTIMONIALS carousel */
.el-testimonials { padding: clamp(4rem, 10vw, 7rem) 0; }
.el-test-scroller {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(420px, 80vw);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  overflow-x: auto; padding: 2rem clamp(1.25rem, 5vw, 3rem); scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.el-test-card { scroll-snap-align: start; background: var(--el-surface); color: var(--el-on-surface); border: 1px solid var(--el-border); border-radius: var(--el-radius); padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: 1.25rem; }
.el-test-quote { font-family: var(--el-display); font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.45; margin: 0; color: var(--el-on-surface); }
.el-test-meta { display: flex; align-items: center; gap: 0.85rem; }
.el-test-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.el-test-byline { display: flex; flex-direction: column; gap: 0.1rem; }
.el-test-name { font-family: var(--el-display); font-size: 0.95rem; }
.el-test-role { font-family: var(--el-eyebrow); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--el-on-surface); opacity: 0.68; }

/* TESTIMONIALS grid */
.el-testimonials-grid { padding: clamp(4rem, 10vw, 7rem) 0; }
.el-test-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: 2.5rem; }
.el-test-grid-card { background: var(--el-surface); color: var(--el-on-surface); border: 1px solid var(--el-border); padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: 1.25rem; margin: 0; border-radius: var(--el-radius); }

/* PULLOUT quote */
.el-pullout { padding: clamp(4rem, 10vw, 8rem) 0; text-align: center; }
.el-pullout-quote { max-width: 22ch; margin: 0 auto; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.05; color: var(--el-fg); }
.el-pullout-quote::before { content: "“"; color: var(--el-accent-text); margin-right: 0.05em; }
.el-pullout-quote::after { content: "”"; color: var(--el-accent-text); margin-left: 0.05em; }
.el-pullout-attribution { display: block; margin-top: 1.75rem; font-family: var(--el-eyebrow); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--el-muted); font-style: normal; }

/* CTA atmospheric */
.el-cta { position: relative; min-height: 70vh; display: grid; overflow: hidden; background: var(--el-alt-bg); color: var(--el-alt-fg); }
.el-cta-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.el-cta-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.40), rgba(0,0,0,0.75)); }
.el-cta-content { position: relative; z-index: 2; align-self: center; padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 5vw, 3.5rem); max-width: 760px; margin: 0 auto; text-align: center; color: var(--el-alt-fg); }
/* The scrim above is always dark, so the headline is always light; --el-alt-fg
   is dark on light themes and shipped near-black text over it (winery, bakery).
   Pin 2026-09-15. */
.el-cta .el-cta-headline { color: #FAFAF7; -webkit-text-fill-color: #FAFAF7; text-shadow: 0 1px 24px rgba(0,0,0,0.35); }
.el-cta-subhead { font-size: clamp(1rem, 1.3vw, 1.2rem); color: rgba(250,250,247,0.85); margin: 1rem 0 2rem 0; }
.el-cta-form { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
/* A closing section with no subhead: the form's labels sat on the headline
   (the subhead's margin was the only gap). Pin 2026-09-28. */
.el-cta h2 + .el-cta-form, .el-cta-min h2 + .el-cta-form { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
/* Hidden from sight, not pushed off the left edge: that offset in a right-to-left
   page is 10,000px of sideways scroll (a Hebrew replay measured 10,369px wide
   at phone width). Pin 2026-09-18. */
.el-cta-label { position: absolute; 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; }
.el-cta-row { display: flex; flex-wrap: wrap; gap: 0.5rem; width: 100%; max-width: 480px; justify-content: center; }
.el-cta-input { flex: 1 1 240px; padding: 0.95rem 1.1rem; background: rgba(250,250,247,0.92); color: #1a1a1a; border: 1px solid rgba(250,250,247,0.1); border-radius: var(--el-radius); font: inherit; }
.el-cta-input:focus { outline: 2px solid var(--el-accent); outline-offset: 2px; }
/* Booking / appointment form (form_kind=booking) — a real multi-field request. */
.el-book-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 0.75rem; width: 100%; max-width: 560px; margin: 0 auto; text-align: left; }
.el-book-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.el-book-field-wide { grid-column: 1 / -1; }
.el-book-grid textarea.el-cta-input { resize: vertical; min-height: 5.5rem; font: inherit; }
/* A multi-field form shows its labels: position:static alone left the hidden
   rule's 1px box and clip in place, so every contact and booking form shipped
   blank boxes with no visible label. Pin 2026-09-24. */
.el-book-grid .el-cta-label { position: static; left: auto; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; font-size: 0.78rem; letter-spacing: 0.02em; opacity: 0.9; text-transform: none; }
.el-book-grid .el-cta-input { flex: none; width: 100%; }
.el-book-submit { margin-top: 0.9rem; }
.el-form-success { margin-top: 0.75rem; font-weight: 500; }
@media (max-width: 520px) { .el-book-grid { grid-template-columns: 1fr; } }

/* HERO — typography only (apple_minimal) */
.el-hero-typo { padding: clamp(6rem, 14vw, 12rem) 0 clamp(4rem, 10vw, 8rem); }
.el-hero-typo-inner { max-width: 1080px; text-align: center; }
.el-hero-typo-headline { max-width: 16ch; margin: 0 auto; line-height: 1.04; }
.el-hero-typo-subhead { font-size: clamp(1.15rem, 1.5vw, 1.4rem); color: var(--el-muted); margin: 1.5rem auto 2rem; max-width: 48ch; }

/* HERO — minimal with form */
.el-hero-form { padding: clamp(5rem, 12vw, 10rem) 0 clamp(4rem, 10vw, 7rem); }
.el-hero-form-inner { max-width: 880px; }
.el-hero-form-subhead { font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: var(--el-muted); margin: 1rem 0 2rem; max-width: 56ch; }
.el-hero-form-row { display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 520px; }
.el-hero-form-row .el-cta-input { flex: 1 1 240px; }

/* HERO — dark cinematic */
.el-hero-dark { background: var(--el-bg); min-height: 95vh; }
.el-hero-dark video.el-hero-image { object-fit: cover; }
.el-hero-scrim-deep {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.30) 40%, rgba(0,0,0,0.85) 100%);
}
.el-eyebrow-on-dark { color: rgba(245, 240, 232, 0.75); }
.el-btn-neon {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  background: var(--el-ink);
  color: var(--el-on-ink, var(--el-bg));
  font-family: var(--el-body);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 0 24px var(--el-accent);
  transition: transform var(--el-entry-ms) var(--el-easing), box-shadow var(--el-entry-ms) var(--el-easing);
  cursor: pointer;
}
.el-btn-neon:hover { transform: translateY(-1px); box-shadow: 0 0 40px var(--el-accent); }

/* STATS mega numbers */
.el-stats { padding: clamp(4rem, 10vw, 8rem) 0; }
.el-stats-head { margin-bottom: 2.5rem; max-width: 720px; }
.el-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.el-stat { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.5rem 0; border-top: 1px solid var(--el-border); }
.el-stat-value { font-family: var(--el-display); font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; letter-spacing: -0.03em; color: var(--el-fg); }
.el-stat-suffix { font-size: 0.5em; color: var(--el-muted); margin-left: 0.1em; }
.el-stat-label { font-family: var(--el-eyebrow); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--el-muted); }

/* COMPARISON table */
.el-cmp { padding: clamp(4rem, 10vw, 8rem) 0; }
.el-cmp-wrap { overflow-x: auto; margin-top: 2rem; }
.el-cmp-table { width: 100%; border-collapse: collapse; font-family: var(--el-body); }
.el-cmp-table th, .el-cmp-table td { padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid var(--el-border); }
.el-cmp-col { font-family: var(--el-eyebrow); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--el-muted); font-weight: 500; }
.el-cmp-col-hi { color: var(--el-ink); }
.el-cmp-col-sub { display: block; margin-top: 0.3rem; font-family: var(--el-body); font-size: 0.8rem; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--el-muted); }
.el-cmp-row-label { font-family: var(--el-display); font-weight: 400; font-size: 1rem; color: var(--el-fg); }
.el-cmp-cell { font-size: 0.95rem; color: var(--el-fg); }

/* Internal-page header (About / Services / Contact / Work) */
.el-page-header { padding: clamp(4.5rem, 11vw, 8.5rem) 0 clamp(2.5rem, 6vw, 4.5rem); border-bottom: 1px solid var(--el-border); }
/* No max-width on the inner container: it must share the left edge of every section below. */
.el-page-header-title { font-size: clamp(2.5rem, 6vw, 4.75rem); line-height: var(--el-display-leading, 1.04); max-width: 18ch; margin: 0; text-wrap: balance; }
.el-page-header-lede { font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: var(--el-muted); max-width: 58ch; margin: 1.25rem 0 0; line-height: 1.55; }

/* Contact form split */
.el-contact { padding: clamp(3.5rem, 9vw, 7rem) 0; }
.el-contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.el-contact-lede { color: var(--el-muted); margin: 1rem 0 0; max-width: 46ch; line-height: 1.6; }
.el-contact-steps { list-style: none; counter-reset: el-step; padding: 0; margin: 2.25rem 0 0; display: grid; gap: 1.25rem; }
.el-contact-steps li { counter-increment: el-step; display: grid; grid-template-columns: 2.25rem 1fr; column-gap: 0.75rem; }
.el-contact-steps li::before { content: counter(el-step, decimal-leading-zero); grid-row: span 2; font-family: var(--el-eyebrow); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--el-accent-text); padding-top: 0.2rem; }
.el-contact-step-title { font-weight: 600; color: var(--el-fg); }
.el-contact-step-body { color: var(--el-muted); font-size: 1rem; line-height: 1.55; }
.el-contact-form { align-items: stretch; background: var(--el-surface); color: var(--el-on-surface); border: 1px solid var(--el-border); border-radius: var(--el-radius); padding: clamp(1.5rem, 3.5vw, 2.5rem); }
.el-contact-fields { max-width: none; }
.el-contact-form .el-cta-input { background: transparent; color: inherit; border: 1px solid var(--el-border); border-radius: min(var(--el-radius), 10px); }
.el-contact-wide { grid-column: 1 / -1; }
.el-contact-message { resize: vertical; min-height: 8rem; }
.el-contact-form .el-contact-hp { position: absolute; 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; opacity: 0; }
.el-contact-form .el-book-submit { align-self: flex-start; }
@media (max-width: 860px) { .el-contact-grid { grid-template-columns: 1fr; } }

/* Closing band linking to Contact */
.el-cta-band { padding: clamp(3.5rem, 8vw, 6rem) 0; border-top: 1px solid var(--el-border); }
.el-cta-band-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.el-cta-band-copy { max-width: 40rem; }
.el-cta-band-sub { color: var(--el-muted); margin: 0.75rem 0 0; max-width: 52ch; line-height: 1.55; }

/* Internal-page header with a photograph */
.el-page-header--media { padding-bottom: clamp(3rem, 7vw, 5.5rem); }
/* Centred, not bottom-aligned: a short heading and one-line lede pinned to the
   bottom of a tall 4:5 photo left a large empty block above them (real build
   contact page, 2026-09-17). Pin 2026-09-17. */
.el-page-header-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.el-page-header-media { margin: 0; border-radius: min(var(--el-radius), 14px); overflow: hidden; aspect-ratio: 4 / 5; max-height: 34rem; }
.el-page-header-frame { height: 112%; margin-top: -6%; }
.el-page-header-img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); animation: el-page-header-settle 1400ms var(--el-easing, cubic-bezier(0.16, 1, 0.3, 1)) both; }
@keyframes el-page-header-settle { from { transform: scale(1.14); filter: saturate(0.85); } to { transform: scale(1.06); filter: saturate(1); } }
@media (max-width: 860px) { .el-page-header-grid { grid-template-columns: 1fr; } .el-page-header-media { aspect-ratio: 16 / 10; } }

/* Hover and focus states on internal-page sections */
.el-numbered-row { transition: background-color 400ms ease, padding 400ms var(--el-easing, ease); }
.el-numbered-row:hover { background: color-mix(in srgb, var(--el-accent) 6%, transparent); padding-left: 0.75rem; }
.el-test-grid-card { transition: transform 500ms var(--el-easing, ease), box-shadow 500ms ease; }
.el-test-grid-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(15, 23, 42, 0.10); }
.el-faq-item summary { transition: color 300ms ease; cursor: pointer; }
.el-faq-item summary:hover { color: var(--el-accent-text); }
.el-contact-steps li { transition: transform 400ms var(--el-easing, ease); }
.el-contact-steps li:hover { transform: translateX(4px); }
.el-contact-form { transition: box-shadow 500ms ease; }
.el-contact-form:focus-within { box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10); }
.el-contact-form .el-cta-input { transition: border-color 250ms ease, box-shadow 250ms ease; }
.el-contact-form .el-cta-input:focus { border-color: var(--el-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--el-accent) 18%, transparent); outline: none; }
.el-offset-img { transition: transform 700ms var(--el-easing, ease); }

/* Testimonial carousel controls */
.el-carousel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.el-carousel-controls { display: flex; gap: 0.6rem; }
.el-carousel-controls[hidden] { display: none; }
.el-carousel-btn { width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid var(--el-border); background: transparent; color: var(--el-fg); display: inline-grid; place-items: center; cursor: pointer; transition: background-color 300ms ease, color 300ms ease, transform 300ms var(--el-easing, ease); }
.el-carousel-btn:hover { background: var(--el-fg); color: var(--el-surface, #fff); transform: translateY(-1px); }
.el-carousel-btn:focus-visible, .el-carousel-dot:focus-visible { outline: 2px solid var(--el-accent); outline-offset: 3px; }
.el-test-scroller { position: relative; scroll-behavior: smooth; scrollbar-width: none; grid-auto-columns: min(540px, 82vw); scroll-padding-inline: clamp(1.25rem, 5vw, 3rem); }
.el-test-scroller::-webkit-scrollbar { display: none; }
.el-carousel-dots { display: flex; gap: 0; justify-content: center; }
/* The dot stays 0.55rem to the eye; its tap area is 26px (WCAG 2.2 asks 24; sub-pixel
   layout measured 23.98, so leave margin):
   a 9px dot was the only undersized control on 34 of 72 phone-width pages.
   Padding makes the hit area, background-clip keeps the drawn dot small. Pin 2026-09-18. */
.el-carousel-dot { box-sizing: content-box; width: 0.55rem; height: 0.55rem; padding: calc((26px - 0.55rem) / 2); background-clip: content-box; border-radius: 999px; border: 0; background-color: var(--el-border); cursor: pointer; transition: width 300ms var(--el-easing, ease), background-color 300ms ease; }
.el-carousel-dot[aria-current="true"] { width: 1.6rem; background-color: var(--el-accent); }
.el-test-card { transition: transform 500ms var(--el-easing, ease), box-shadow 500ms ease; }
.el-test-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(15, 23, 42, 0.10); }

/* Client-name marquee */
.el-marquee { display: flex; overflow: hidden; gap: clamp(2.5rem, 6vw, 5rem); margin-top: 1.5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.el-marquee-track { flex: none; min-width: 100%; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-around; gap: clamp(2.5rem, 6vw, 5rem); margin: 0; padding: 0; animation: el-marquee 40s linear infinite; }
.el-marquee:hover .el-marquee-track { animation-play-state: paused; }
@keyframes el-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% - clamp(2.5rem, 6vw, 5rem))); } }

/* Capability tabs */
.el-tabs { padding: clamp(4rem, 10vw, 7rem) 0; }
.el-tabs-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 4rem); margin-top: clamp(2rem, 4vw, 3rem); align-items: start; }
.el-tabs-list { display: flex; flex-direction: column; border-left: 1px solid var(--el-border); }
.el-tab { position: relative; display: flex; gap: 0.9rem; align-items: baseline; text-align: left; background: none; border: 0; padding: 1rem 1.25rem; font: inherit; color: var(--el-muted); cursor: pointer; transition: color 300ms ease, background-color 300ms ease; }
.el-tab::before { content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--el-accent); transform: scaleY(0); transform-origin: top; transition: transform 400ms var(--el-easing, ease); }
.el-tab:hover { color: var(--el-fg); background: color-mix(in srgb, var(--el-accent) 5%, transparent); }
.el-tab[aria-selected="true"] { color: var(--el-fg); }
.el-tab[aria-selected="true"]::before { transform: scaleY(1); }
.el-tab:focus-visible { outline: 2px solid var(--el-accent); outline-offset: -2px; }
.el-tab-num { font-family: var(--el-eyebrow); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--el-accent-text); }
.el-tab-label { font-size: 1.02rem; font-weight: 500; }
.el-tabs-panels { display: grid; gap: 2.5rem; }
.el-tabpanel { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.el-tabpanel--media { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; }
.el-tabpanel[hidden] { display: none; }
[data-tabs-ready] .el-tabpanel:not([hidden]) { animation: el-tab-in 520ms var(--el-easing, cubic-bezier(0.16, 1, 0.3, 1)) both; }
@keyframes el-tab-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.el-tabpanel-title { font-family: var(--el-display); font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.15; margin: 0 0 0.85rem; }
.el-tabpanel-body { color: var(--el-muted); line-height: 1.65; margin: 0; max-width: 52ch; }
.el-tabpanel-media { margin: 0; border-radius: min(var(--el-radius), 12px); overflow: hidden; aspect-ratio: 4 / 3; }
.el-tabpanel-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) {
  .el-tabs-layout, .el-tabpanel--media { grid-template-columns: 1fr; }
  .el-tabs-list { flex-direction: row; overflow-x: auto; border-left: 0; border-bottom: 1px solid var(--el-border); }
  .el-tab { flex: none; }
  .el-tab::before { left: 0; right: 0; top: auto; bottom: -1px; width: auto; height: 2px; transform: scaleX(0); }
  .el-tab[aria-selected="true"]::before { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .el-tab, .el-tab::before { transition: none; }
  [data-tabs-ready] .el-tabpanel:not([hidden]) { animation: none; }
}

/* Contact photo */
.el-contact-photo { margin: 2.25rem 0 0; border-radius: min(var(--el-radius), 12px); overflow: hidden; aspect-ratio: 16 / 10; }
.el-contact-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 900ms var(--el-easing, ease); }
.el-contact-photo:hover img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .el-test-scroller { scroll-behavior: auto; }
  .el-carousel-btn, .el-carousel-dot, .el-test-card, .el-contact-photo img { transition: none; }
  .el-marquee { flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; }
  .el-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; }
  .el-marquee-track[aria-hidden="true"] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .el-page-header-img { animation: none; }
  .el-numbered-row, .el-test-grid-card, .el-contact-steps li, .el-offset-img { transition: none; }
  .el-numbered-row:hover, .el-test-grid-card:hover, .el-contact-steps li:hover { transform: none; padding-left: 0; }
}

/* FAQ accordion */
.el-faq { padding: clamp(4rem, 10vw, 8rem) 0; }
.el-faq-list { margin-top: 2rem; max-width: 760px; }
.el-faq-item { border-bottom: 1px solid var(--el-border); padding: 1rem 0; }
.el-faq-item[open] .el-faq-q::after { transform: rotate(45deg); }
.el-faq-q { font-family: var(--el-display); font-size: clamp(1.05rem, 1.6vw, 1.25rem); cursor: pointer; padding: 0.5rem 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.el-faq-q::-webkit-details-marker { display: none; }
.el-faq-q::after { content: "+"; color: var(--el-accent-text); font-family: var(--el-body); font-size: 1.3rem; transition: transform 300ms var(--el-easing); }
.el-faq-a { padding: 0.75rem 0 0.5rem; font-size: 1rem; line-height: 1.6; color: var(--el-muted); max-width: 64ch; }

/* PRICING TIERS */
.el-pricing { padding: clamp(4rem, 10vw, 8rem) 0; }
.el-pricing-subhead { font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: var(--el-muted); margin: 1rem 0 0; max-width: 56ch; }
.el-pricing-grid { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; align-items: stretch; }
.el-price-card { position: relative; border: 1px solid var(--el-border); border-radius: 16px; padding: 2rem 1.75rem; background: var(--el-surface); color: var(--el-on-surface); display: flex; flex-direction: column; }
.el-price-featured { border: 2px solid var(--el-accent); }
.el-price-badge { position: absolute; top: -0.75rem; left: 1.75rem; background: var(--el-accent); color: var(--el-on-accent, #fff); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.25rem 0.6rem; border-radius: 999px; }
.el-price-name { font-family: var(--el-display); font-size: 1.15rem; font-weight: 700; }
.el-price-amount { font-family: var(--el-display); font-size: clamp(2rem, 3.5vw, 2.75rem); font-weight: 800; margin: 0.5rem 0 1.25rem; }
.el-price-period { font-size: 0.95rem; font-weight: 500; color: var(--el-on-surface-muted); margin-left: 0.25rem; }
.el-price-feats { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.el-price-feat { font-size: 0.95rem; line-height: 1.5; color: var(--el-on-surface-muted); padding-left: 1.5rem; position: relative; }
.el-price-feat::before { content: "\2713"; position: absolute; left: 0; color: var(--el-accent-text); font-weight: 700; }
.el-price-cta { display: block; text-align: center; padding: 0.8rem 1rem; border-radius: 10px; background: var(--el-fg); color: var(--el-bg); font-weight: 600; text-decoration: none; transition: opacity 200ms var(--el-easing); }
.el-price-cta:hover { opacity: 0.85; }
.el-price-featured .el-price-cta { background: var(--el-accent); color: var(--el-on-accent, #fff); }

/* MINIMAL CTA */
.el-cta-min { padding: clamp(4rem, 10vw, 8rem) 0; background: var(--el-surface); color: var(--el-on-surface); }
.el-cta-min-inner { max-width: 720px; text-align: center; }
.el-cta-min-subhead { font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: var(--el-muted); margin: 1rem auto 2rem; max-width: 52ch; }
.el-cta-min .el-cta-row { justify-content: center; margin: 0 auto; }
/* Self-consistent LIGHT input (white field + fixed dark text) — readable in any
   palette. var(--el-bg)/var(--el-fg) was a theme pair that broke on palettes
   where both resolve near-white (live: demo_landing 1.12:1). Matches the
   .el-cta-input base fix. */
.el-cta-input-light { background: #ffffff; color: #1a1a1a; border: 1px solid var(--el-border); }
.el-cta-min .el-book-grid .el-cta-input { background: #ffffff; color: #1a1a1a; border: 1px solid var(--el-border); }
.el-cta-min .el-book-submit { margin-top: 0.9rem; }

/* VIDEO loop block */
.el-video-block { padding: clamp(4rem, 10vw, 6rem) 0; text-align: center; }
.el-video { width: 100%; max-width: 1240px; margin: 0 auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--el-radius); }
.el-video-caption { margin-top: 1rem; font-family: var(--el-eyebrow); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--el-muted); }

/* ───────────── NEW ARCHETYPE PRIMITIVES (Aurora/Arc/Levels/Mill/Goldsand) ─────────────  */

/* HERO — stats overlay (Aurora) */
.el-hero-stats-overlay { min-height: 95vh; }
.el-hero-content-tl { align-self: start; padding-top: clamp(6rem, 12vw, 9rem); }
.el-hero-content-bl { align-self: end; }
.el-hero-headline-sans { font-family: var(--el-body); font-weight: 800; letter-spacing: -0.035em; line-height: 0.95; font-size: clamp(2.75rem, 7vw, 5.5rem); }
.el-hero-subhead-inverted { color: rgba(255,255,255,0.85); font-size: 1.05rem; line-height: 1.55; max-width: 56ch; margin-top: 1rem; }
.el-hero-stats-strip {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem; padding: 1.25rem clamp(1.25rem, 5vw, 3.5rem);
  background: rgba(0,0,0,0.50);
  font-family: var(--el-eyebrow);
  color: #FFFFFF;
  z-index: 3;
}
.el-hero-stat { display: flex; flex-direction: column; gap: 0.15rem; }
.el-hero-stat-value { font-size: 0.7rem; opacity: 0.65; letter-spacing: 0.18em; text-transform: uppercase; }
.el-hero-stat-label { font-size: 0.62rem; opacity: 0.50; letter-spacing: 0.18em; text-transform: uppercase; }
@media (max-width: 820px) { .el-hero-stats-strip { grid-template-columns: repeat(2, 1fr); } }
.el-hero-inset {
  position: absolute; right: clamp(1rem, 3vw, 2.5rem); bottom: clamp(5rem, 10vw, 7rem);
  display: flex; align-items: center; gap: 1rem;
  padding: 0.75rem 1rem 0.75rem 0.75rem; max-width: 320px;
  background: rgba(255,255,255,0.96); border-radius: 8px;
  text-decoration: none; color: var(--el-fg);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35); z-index: 4;
  transition: transform 250ms ease;
}
.el-hero-inset:hover { transform: translateY(-2px); }
.el-hero-inset-thumb { width: 96px; height: 60px; object-fit: cover; border-radius: 4px; flex: 0 0 auto; }
.el-hero-inset-text { display: flex; flex-direction: column; gap: 0.2rem; flex: 1 1 auto; }
.el-hero-inset-eyebrow { font-family: var(--el-eyebrow); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--el-muted); }
.el-hero-inset-label { font-family: var(--el-display); font-size: 1rem; line-height: 1.2; }
.el-hero-inset-arrow {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--el-accent); color: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; font-size: 1.1rem;
}

/* HERO — split centered text (Mill) */
.el-hero-split-centered { position: relative; min-height: 88vh; overflow: hidden; }
.el-hero-split-row { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.el-hero-split-half { overflow: hidden; position: relative; }
.el-hero-split-half .el-hero-split-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.el-hero-split-centered-overlay {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; min-height: 88vh;
  padding: 4rem clamp(1.25rem, 5vw, 3rem);
  color: #FFFFFF;
  /* The centred copy sits in the MIDDLE of two unrelated photos, where the old
     gradient was lightest (5%): a real build's subheading ran over a laptop's
     on-screen lettering and a white building, hard to read. Darken where the
     text is, keep the photos' edges bright. Pin 2026-09-17. */
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.38) 55%, rgba(0,0,0,0.12) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.10) 50%, rgba(0,0,0,0.35) 100%);
}
.el-hero-split-centered-headline { color: #FFFFFF; font-style: italic; font-synthesis: none; max-width: 16ch;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35); }
.el-hero-split-centered-sub { color: rgba(255,255,255,0.95); margin-top: 0.5rem; max-width: 48ch; font-size: 1rem; line-height: 1.5;
  text-shadow: 0 1px 12px rgba(0,0,0,0.55); }
.el-hero-split-centered-ctas { display: flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; justify-content: center; }
.el-btn-pill { border-radius: 999px; padding: 0.85rem 1.65rem; }
.el-btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.85rem 1.65rem; border-radius: 999px;
  background: transparent; color: #FFFFFF; border: 1px solid rgba(255,255,255,0.85);
  text-decoration: none; font-family: var(--el-eyebrow);
  font-size: 0.85rem; letter-spacing: 0.04em;
}

/* HERO — segmenter dual CTA (Arc) */
.el-hero-segmenter-headline { color: #FFFFFF; font-weight: 600; font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.05; max-width: 18ch; }
.el-hero-segmenter-row { display: flex; gap: 0.85rem; margin-top: 1.5rem; flex-wrap: wrap; }
.el-segmenter-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.96); color: #111111;
  padding: 1.1rem 2.25rem; min-width: 200px;
  font-family: var(--el-eyebrow); font-size: 0.8rem; letter-spacing: 0.16em;
  text-transform: uppercase; text-decoration: none;
  transition: background 200ms ease, transform 150ms ease;
}
.el-segmenter-btn:hover { background: #FFFFFF; transform: translateY(-1px); }

/* HERO — pill intro form (Goldsand) */
.el-hero-pill-intro { background: var(--el-bg); padding: clamp(5rem, 14vw, 12rem) 0 clamp(3rem, 8vw, 6rem); min-height: auto; display: block; }
.el-pill-intro-content { text-align: center; max-width: 920px; }
.el-pill-intro-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.85rem; border-radius: 999px;
  background: var(--el-surface); border: 1px solid var(--el-border);
  font-family: var(--el-eyebrow); font-size: 0.75rem; letter-spacing: 0.10em;
  text-transform: none; color: var(--el-muted);
}
.el-pill-intro-badge::before {
  content: ""; display: inline-block; width: 14px; height: 14px;
  border-radius: 50%; background: var(--el-accent); opacity: 0.85;
}
.el-pill-intro-headline {
  font-family: var(--el-display); font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.05; letter-spacing: -0.02em; max-width: 18ch;
  margin: 1rem auto 1rem;
}
.el-pill-intro-sub { font-size: 1rem; line-height: 1.55; max-width: 44ch; margin: 0 auto 1.5rem; color: var(--el-muted); }
.el-pill-intro-form { max-width: 460px; margin: 0 auto; }
.el-pill-intro-row {
  display: flex; align-items: center; padding: 0.4rem 0.4rem 0.4rem 1rem;
  border: 1px solid var(--el-border); border-radius: 999px;
  background: var(--el-surface);
}
.el-pill-intro-input {
  flex: 1 1 auto; border: none; background: transparent;
  padding: 0.65rem 0.5rem; font-size: 0.95rem;
}
.el-pill-intro-input:focus { outline: none; }
.el-pill-intro-btn { border-radius: 999px; padding: 0.7rem 1.25rem; font-size: 0.85rem; white-space: nowrap; }
.el-pill-intro-disclosure { margin-top: 0.85rem; font-size: 0.78rem; color: var(--el-muted); }

/* CREDENTIALS — 3-column text (Levels) */
.el-credentials { background: var(--el-surface); color: var(--el-on-surface); padding: clamp(2rem, 5vw, 3.5rem) 0; border-top: 1px solid var(--el-border); border-bottom: 1px solid var(--el-border); }
.el-cred-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
.el-cred-cell { border-left: 1px solid var(--el-border); padding-left: 1.25rem; }
.el-cred-cell:first-child { border-left: none; padding-left: 0; }
.el-cred-title { font-family: var(--el-body); font-size: 1.05rem; font-weight: 600; margin: 0 0 0.5rem 0; color: var(--el-on-surface); }
.el-cred-body { font-size: 1rem; line-height: 1.5; color: var(--el-on-surface-muted); margin: 0; }
@media (max-width: 820px) { .el-cred-grid { grid-template-columns: 1fr; } .el-cred-cell, .el-cred-cell:first-child { border-left: none; padding-left: 0; } }

/* PRODUCT card visualization (Levels) */
.el-product-card { padding: clamp(4rem, 10vw, 7rem) 0; }
.el-product-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.el-product-card-text { max-width: 52ch; }
.el-product-card-body { margin-top: 1rem; font-size: 1rem; line-height: 1.6; color: var(--el-fg); }
.el-product-card-cta { display: inline-block; margin-top: 1.25rem; font-family: var(--el-eyebrow); font-size: 0.85rem; letter-spacing: 0.08em; color: var(--el-accent-text); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 0.15rem; }
.el-product-card-vis {
  position: relative;
  background: var(--el-surface); border: 1px solid var(--el-border);
  border-radius: 18px; padding: 1.75rem;
  box-shadow: 0 12px 40px rgba(0,0,0,0.06);
}
.el-product-card-img { width: 100%; height: auto; border-radius: 12px; display: block; }
.el-product-card-caption { margin-top: 1rem; font-family: var(--el-eyebrow); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--el-muted); text-align: center; }
.el-product-card-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; justify-content: center; }
.el-product-card-tag { padding: 0.45rem 0.95rem; border-radius: 999px; background: var(--el-bg); border: 1px solid var(--el-border); font-size: 0.85rem; color: var(--el-fg); }
.el-product-card-tag-active { background: var(--el-fg); color: var(--el-bg); border-color: var(--el-fg); }
@media (max-width: 820px) { .el-product-card-grid { grid-template-columns: 1fr; } }

/* PROCESS — numbered overlay photos (Mill) */
.el-step-overlay { padding: clamp(2rem, 6vw, 4rem) 0; }
.el-step-overlay-headline { text-align: center; max-width: 22ch; margin: 0 auto 2.5rem; }
.el-step-overlay-eyebrow { text-align: center; }
.el-step-overlay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.el-step-overlay-card { background: var(--el-bg); padding: 0; display: flex; flex-direction: column; }
.el-step-overlay-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.el-step-overlay-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.el-step-overlay-num {
  position: absolute; top: 1.5rem; left: 1.75rem; z-index: 3;
  font-family: var(--el-display); font-size: clamp(2.25rem, 4vw, 3rem);
  color: #FFFFFF; line-height: 1;
}
.el-step-overlay-title {
  position: absolute; left: 1.75rem; right: 1.75rem; bottom: 1.5rem; z-index: 3;
  color: #FFFFFF; font-family: var(--el-display); font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  margin: 0; line-height: 1.1; max-width: 18ch;
}
.el-step-overlay-body { padding: 1.25rem 1.75rem 1.75rem; font-size: 1rem; line-height: 1.55; color: var(--el-muted); max-width: 44ch; }
@media (max-width: 820px) { .el-step-overlay-grid { grid-template-columns: 1fr; } }

/* MANIFESTO — oversized display (Goldsand) */
.el-oversized { padding: clamp(4rem, 12vw, 9rem) 0; }
.el-oversized-content { max-width: 1120px; text-align: center; }
.el-oversized-statement {
  font-family: var(--el-display);
  font-size: clamp(2rem, 5.5vw, 4.25rem);
  line-height: 1.05; letter-spacing: -0.02em;
  margin: 0; color: var(--el-fg);
}
.el-oversized-cite { margin-top: 2rem; font-family: var(--el-eyebrow); font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--el-muted); }

/* OFFSET image stack + text (Aurora) */
.el-offset-stack { padding: clamp(4rem, 10vw, 7rem) 0; }
.el-offset-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(3rem, 6vw, 5rem); align-items: center; }
.el-offset-images { position: relative; display: grid; gap: clamp(1rem, 3vw, 1.75rem); }
.el-offset-img { width: 100%; display: block; border-radius: 4px; aspect-ratio: 4 / 5; object-fit: cover; }
.el-offset-img-top { max-width: 80%; }
.el-offset-img-bot { max-width: 60%; margin-left: auto; }
.el-offset-headline { font-weight: 600; letter-spacing: -0.02em; margin: 0 0 1.25rem 0; }
.el-offset-body { font-size: 1.05rem; line-height: 1.65; max-width: 56ch; margin: 0 0 1rem 0; }
@media (max-width: 820px) { .el-offset-grid { grid-template-columns: 1fr; } .el-offset-img-top, .el-offset-img-bot { max-width: 100%; margin-left: 0; } }
@media (min-width: 821px) {
  .el-offset-pinned .el-offset-grid { align-items: start; }
  .el-offset-pinned .el-offset-images { position: sticky; top: 110px; }
  .el-offset-pinned .el-offset-img-top { max-width: 100%; max-height: min(55vh, 440px); aspect-ratio: 4 / 3; }
  .el-offset-pinned .el-offset-img-bot { display: none; }
  .el-offset-pinned .el-offset-body { margin-bottom: 1.4rem; }
}

/* ───────────── TRANCHE 2 PRIMITIVES (Public/GIOLABS/Rhetorich/HappyRobot/Inertia) ───────────── */

/* HERO — wordmark overlay (GIOLABS) */
.el-hero-wordmark { position: relative; min-height: 95vh; overflow: hidden; }
.el-hero-wordmark .el-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.el-wordmark-scrim { background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.04) 35%, rgba(0,0,0,0.18) 100%); }
.el-wordmark-top {
  position: absolute; top: clamp(1.25rem, 3vw, 2rem); left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(1.5rem, 4vw, 3rem); z-index: 4; color: #FFFFFF;
}
.el-wordmark-caption { font-size: 1rem; line-height: 1.45; max-width: 24ch; margin: 0; color: #FFFFFF; }
.el-wordmark-cta {
  padding: 0.8rem 1.3rem; background: rgba(255,255,255,0.95); color: #111111;
  text-decoration: none; font-family: var(--el-eyebrow); font-size: 0.85rem;
  letter-spacing: 0.05em; border-radius: 6px;
}
.el-wordmark {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); text-align: center;
  font-family: var(--el-display); color: #FFFFFF;
  font-size: clamp(4rem, 22vw, 22rem); font-weight: 900;
  letter-spacing: -0.045em; line-height: 0.85;
  /* Room below the baseline: at line-height .85 with overflow hidden the
     tails of g, j, p, q, y were cut ("Hanava Rvokan", 2026-09-27). */
  padding: 0.04em 0 0.2em;
  white-space: nowrap; overflow: hidden; margin: 0;
  text-shadow: 0 4px 60px rgba(0,0,0,0.30);
  mix-blend-mode: screen;
  z-index: 3;
}

/* INLINE product list — slashed (Public) */
.el-slashed { padding: clamp(3rem, 8vw, 5rem) 0; }
.el-slashed-flow {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(0.5rem, 1.5vw, 0.85rem) clamp(0.4rem, 1vw, 0.7rem);
  text-align: center;
}
.el-slashed-item {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--el-display); font-size: clamp(1.25rem, 2.5vw, 2rem);
  color: var(--el-fg);
}
.el-slashed-badge {
  display: inline-block; padding: 0.18rem 0.55rem;
  background: var(--el-fg); color: var(--el-bg);
  border-radius: 4px; font-family: var(--el-eyebrow); font-size: 0.65rem;
  letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle;
}
.el-slashed-divider { color: var(--el-muted); opacity: 0.6; font-family: var(--el-display); font-size: clamp(1.25rem, 2.5vw, 2rem); }

/* VERTICAL inner pages: menu, rooms, schedule (2026-09-28) */
.el-menu, .el-rooms, .el-sched { padding: clamp(4rem, 9vw, 6.5rem) 0; }
.el-vertical-head { max-width: 44rem; margin: 0 0 clamp(2rem, 4vw, 3rem); }
.el-vertical-intro { color: var(--el-muted); line-height: 1.65; margin: 0.75rem 0 0; }
.el-menu-list { list-style: none; padding: 0; margin: 0; columns: 2 22rem; column-gap: clamp(2rem, 6vw, 5rem); }
.el-menu-item { break-inside: avoid; padding: 0 0 1.4rem; }
.el-menu-line { display: flex; align-items: baseline; gap: 0.6rem; }
.el-menu-name { font-family: var(--el-display); font-size: 1.2rem; line-height: 1.3; }
.el-menu-dots { flex: 1; border-bottom: 1px dotted color-mix(in srgb, var(--el-fg) 45%, transparent); transform: translateY(-0.3rem); min-width: 1.5rem; }
.el-menu-price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.el-menu-desc { margin: 0.3rem 0 0; color: var(--el-muted); line-height: 1.6; font-size: 1rem; max-width: 36rem; }
.el-rooms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.el-room { display: flex; flex-direction: column; border: 1px solid var(--el-border); border-radius: var(--el-radius, 14px); overflow: hidden; background: var(--el-surface, transparent); color: var(--el-on-surface, var(--el-fg)); }
.el-room-photo { aspect-ratio: 4 / 3; overflow: hidden; }
.el-room-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.el-room-body { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.25rem 1.35rem 1.4rem; flex: 1; }
.el-room-name { font-family: var(--el-display); font-size: 1.35rem; margin: 0; }
.el-room-desc { margin: 0; color: var(--el-on-surface-muted, var(--el-muted)); line-height: 1.6; }
.el-room-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding-top: 0.5rem; }
.el-room-rate { font-variant-numeric: tabular-nums; font-weight: 600; }
.el-room-ask { color: inherit; font-weight: 600; text-underline-offset: 3px; padding: 0.6rem 0; }
.el-sched-list { list-style: none; padding: 0; margin: 0; max-width: 52rem; }
.el-sched-row { display: grid; grid-template-columns: 7.5rem 1.2rem 1fr; gap: 1rem; align-items: start; padding: 0 0 1.75rem; position: relative; }
.el-sched-row::before { content: ""; position: absolute; left: calc(7.5rem + 1rem + 0.55rem); top: 1.1rem; bottom: 0; width: 1px; background: var(--el-border); }
.el-sched-row:last-child::before { display: none; }
.el-sched-when { font-family: var(--el-eyebrow, inherit); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--el-muted); padding-top: 0.2rem; }
.el-sched-dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--el-accent); margin-top: 0.3rem; }
.el-sched-title { font-family: var(--el-display); font-size: 1.3rem; margin: 0; }
.el-sched-desc { margin: 0.35rem 0 0; color: var(--el-muted); line-height: 1.6; }
@media (max-width: 640px) {
  .el-sched-row { grid-template-columns: 1fr; gap: 0.3rem; padding-bottom: 1.4rem; }
  .el-sched-dot, .el-sched-row::before { display: none; }
}

/* NUMBERED feature lines (HappyRobot) */
.el-numbered { padding: clamp(4rem, 10vw, 7rem) 0; }
.el-numbered-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.el-numbered-side { max-width: 44ch; }
.el-numbered-headline em, .el-numbered-headline i { font-style: italic; color: var(--el-muted); font-weight: 400; }
.el-numbered-side-body { margin: 1rem 0 1.5rem 0; font-size: 1rem; line-height: 1.65; color: var(--el-muted); }
.el-numbered-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--el-border); }
.el-numbered-row {
  display: grid; grid-template-columns: auto 1.1fr 1.6fr auto;
  gap: 1.25rem; align-items: center;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--el-border);
  font-size: 0.95rem;
}
.el-numbered-num { font-family: var(--el-eyebrow); font-size: 0.75rem; letter-spacing: 0.14em; color: var(--el-muted); }
.el-numbered-title { font-family: var(--el-body); font-weight: 500; color: var(--el-fg); }
.el-numbered-body { color: var(--el-muted); line-height: 1.5; }
@media (max-width: 820px) {
  .el-numbered-grid { grid-template-columns: 1fr; }
  .el-numbered-row { grid-template-columns: auto 1fr; gap: 0.75rem; padding: 1rem 0; }
  .el-numbered-body { grid-column: 1 / -1; margin-top: 0.25rem; }
}

/* PILLARS grid 5-card (GIOLABS) */
.el-pillars {
  padding: clamp(3rem, 7vw, 5rem) 0;
  background: var(--el-accent);
  color: var(--el-on-accent);
}
.el-pillars-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; align-items: stretch; }
@media (min-width: 821px) { .el-pillar-card--wide { grid-column: span 2; } }
.el-pillars-intro {
  grid-row: span 2; padding: 1.25rem;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.el-pillars-headline { color: var(--el-on-accent); max-width: 14ch; margin: 0 0 1rem 0; }
.el-pillar-intro { color: var(--el-on-accent); opacity: 0.92; max-width: 36ch; font-size: 0.92rem; line-height: 1.55; }
.el-eyebrow-on-color { color: var(--el-on-accent); opacity: 0.85; }
/* The section paints the ACCENT, so its own type must take the contrast colour.
   Style packs and presets later paint `.el-eyebrow` in the raw accent and set
   a display-heading colour at the same specificity, and being later they won:
   28 of 150 real-writer replays shipped an invisible "Why us" (red on red,
   violet on violet) or a dark heading on navy. Scoped to the section so they
   outrank a generic rule. Pin 2026-09-17. */
.el-pillars .el-pillars-headline,
.el-pillars .el-pillar-intro { color: var(--el-on-accent); }
/* Twelve style packs force `body.lang-* [class*="eyebrow"] { color: var(--accent)
   !important }`, and "el-eyebrow-on-color" matches that selector: on an accent
   section it painted the eyebrow in the section's own colour. An eyebrow whose
   class says what it sits on keeps its contrast colour — !important with higher
   specificity, so it wins whatever order the pack CSS lands in. Pin 2026-09-17. */
body .el-pillars .el-eyebrow.el-eyebrow-on-color {
  color: var(--el-on-accent) !important;
  /* Some packs also give eyebrows their OWN pill (neumorphism: #e0e5ec behind
     accent text). The contrast colour is chosen for the SECTION, so the pill
     goes: white text on that light pill was the one failure left. */
  background: transparent !important;
  box-shadow: none !important;
}
.el-pillar-card {
  /* Pin: 2026-05-14 user audit — Sara & Adam wedding pillars had huge
     blank gaps because cards were min-height:240 + space-between, which
     pushed short bodies to the bottom of an oversized card.  Switch to
     content-driven height with a minimum that still keeps the grid
     visually solid (~140px) but lets short content stack naturally
     at the top. */
  display: flex; flex-direction: column; justify-content: flex-start;
  gap: 1rem;
  background: #FFFFFF; color: var(--el-fg);
  padding: 1.75rem 1.5rem;
  border: 1px solid rgba(255,255,255,0.50);
  min-height: 140px;
  text-decoration: none;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.el-pillar-card[href]:hover { transform: translateY(-2px); box-shadow: 0 16px 48px rgba(0,0,0,0.16); }
.el-pillar-title {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  font-family: var(--el-body); font-size: 1.25rem; font-weight: 700;
  color: var(--el-accent-on-light); margin: 0 0 1rem 0;
}
.el-pillar-arrow { font-size: 0.95rem; color: currentColor; }
.el-pillar-body { color: var(--el-muted); font-size: 1rem; line-height: 1.55; margin: 0; }

/* TEAM grid: portraits when everyone has one, initials otherwise. Pin 2026-09-14. */
.el-team { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.el-team-head { max-width: 40rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.el-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: clamp(1rem, 2.4vw, 1.75rem); }
.el-team-card { display: flex; flex-direction: column; gap: 0.9rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(127,127,127,0.25); }
.el-team-photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; background: var(--el-surface); }
.el-team-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.35); transition: filter 400ms ease, transform 600ms ease; }
.el-team-card:hover .el-team-photo img { filter: none; transform: scale(1.03); }
.el-test-initials { width: 2.75rem; height: 2.75rem; font-size: 0.85rem; flex: 0 0 auto; }
.el-visit { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.el-visit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: 2rem; }
.el-visit-label { font-family: var(--el-eyebrow); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--el-muted); margin: 0 0 0.5rem; }
.el-visit-value { color: var(--el-fg); font-size: 1.05rem; line-height: 1.5; text-decoration: underline; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
/* A phone number or map link is a tap target: 44px tall (2026-09-25). */
a.el-visit-value { display: inline-flex; align-items: center; min-height: 44px; }
.el-visit-hours { list-style: none; margin: 0; padding: 0; color: var(--el-fg); line-height: 1.7; }
.el-team-initials { width: 3.5rem; height: 3.5rem; border-radius: 999px; display: grid; place-items: center; border: 2px solid var(--el-accent); color: var(--el-fg); font-weight: 700; letter-spacing: 0.04em; }
.el-team-name { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--el-fg); }
.el-team-role { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--el-muted); }
.el-team-bio { margin: 0.5rem 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--el-muted); }

/* Hover motion on repeated items (cards, steps, stats, tabs, FAQ rows): the
   page responds under the pointer the way reference sites do. Transform and
   shadow only, and none under reduced motion. Pin 2026-09-14. */
.el-stat, .el-process-step, .el-faq-item, .el-mosaic-tile, .el-team-card, .el-tab {
  transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease, color 220ms ease;
}
.el-stat:hover, .el-process-step:hover, .el-team-card:hover { transform: translateY(-3px); }
.el-faq-item:hover { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) {
  .el-stat, .el-process-step, .el-faq-item, .el-mosaic-tile, .el-team-card, .el-tab,
  .el-team-photo img { transition: none; }
  .el-stat:hover, .el-process-step:hover, .el-team-card:hover, .el-faq-item:hover { transform: none; }
}
@media (max-width: 820px) {
  .el-pillars-grid { grid-template-columns: 1fr; }
  .el-pillars-intro { grid-row: auto; }
}

/* HERO — code blocks color (Inertia) */
.el-hero-code-color {
  background: var(--el-accent);
  padding: clamp(3rem, 8vw, 6rem) 0 0;
  min-height: auto; display: block;
}
.el-code-hero-content { text-align: center; max-width: 1240px; }
.el-code-pills {
  display: inline-flex; flex-wrap: wrap; justify-content: center;
  gap: 0.4rem; margin-bottom: 1.5rem;
}
.el-code-pill {
  padding: 0.4rem 0.85rem; background: rgba(255,255,255,0.18);
  color: #FFFFFF; border-radius: 999px;
  font-family: var(--el-eyebrow); font-size: 0.7rem; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.el-code-hero-headline { color: #FFFFFF; font-weight: 700; letter-spacing: -0.02em; max-width: 20ch; margin: 0 auto 1.25rem; }
.el-code-hero-sub { color: rgba(255,255,255,0.85); margin: 0 auto 1.75rem; max-width: 56ch; line-height: 1.55; }
.el-code-hero-ctas { display: inline-flex; gap: 0.75rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); flex-wrap: wrap; justify-content: center; }
.el-code-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: #FFFFFF; border-radius: 12px;
  margin: 0 clamp(1rem, 3vw, 2rem); overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  text-align: left;
}
.el-code-block { margin: 0; padding: 0; min-width: 0; }
.el-code-filename {
  padding: 0.85rem 1.25rem; background: #F5F5F7;
  border-bottom: 1px solid var(--el-border);
  font-family: var(--el-eyebrow); font-size: 0.78rem; color: var(--el-muted);
}
.el-code-pre { margin: 0; padding: 1.25rem; background: #FFFFFF; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.82rem; line-height: 1.55; overflow-x: auto; }
.el-code-line { display: grid; grid-template-columns: 24px 1fr; gap: 1rem; }
.el-code-ln { color: var(--el-muted); opacity: 0.55; text-align: right; user-select: none; }
.el-code-text { color: var(--el-fg); white-space: pre; }
@media (max-width: 820px) { .el-code-grid { grid-template-columns: 1fr; } }

/* IMAGE with metric overlays (Rhetorich) */
.el-metric-overlay { padding: clamp(3rem, 8vw, 5rem) 0; }
.el-metric-head { text-align: center; max-width: 720px; margin: 0 auto 2rem; }
.el-metric-frame { position: relative; max-width: 1080px; margin: 0 auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; }
.el-metric-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.el-metric-badge {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.6rem 0.95rem;
  background: rgba(255,255,255,0.97);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.20);
  font-family: var(--el-body); font-size: 0.92rem;
  z-index: 3;
}
.el-metric-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--el-accent); }
.el-metric-label { color: var(--el-fg); }
.el-metric-value { font-weight: 700; color: var(--el-fg); }
@media (max-width: 820px) { .el-metric-badge { font-size: 0.78rem; padding: 0.45rem 0.7rem; } }

/* DUAL split image cards (GIOLABS / Mill-style category pair) */
.el-dual-cards { background: var(--el-bg); }
.el-dual-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.el-dual-card { position: relative; min-height: 540px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.el-dual-card-media { position: absolute; inset: 0; }
.el-dual-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.el-dual-card-scrim {
  position: absolute; inset: 0;
  /* Bottom-anchored dark gradient guarantees legible white text even over a
     LIGHT image (a 0.55 max was marginal on bright/washed photos). */
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.40) 48%, rgba(0,0,0,0.82) 100%);
}
.el-dual-card-text { position: relative; z-index: 2; padding: 2rem clamp(1.5rem, 4vw, 2.5rem); color: #FFFFFF; max-width: 560px; }
.el-dual-card-headline { color: #FFFFFF; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.1; margin: 0 0 1rem 0; }
.el-dual-card-body { color: rgba(255,255,255,0.88); font-size: 1rem; line-height: 1.55; margin: 0 0 1.5rem 0; }
.el-dual-card-ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.el-dual-card-primary { background: rgba(255,255,255,0.96); color: var(--el-fg); }
.el-dual-card-secondary { color: #FFFFFF; text-decoration: none; font-family: var(--el-eyebrow); font-size: 0.85rem; letter-spacing: 0.05em; padding: 0.45rem 0; border-bottom: 1px solid rgba(255,255,255,0.55); }
@media (max-width: 820px) { .el-dual-cards-grid { grid-template-columns: 1fr; } .el-dual-card { min-height: 420px; } }
/* ── LEGIBILITY GUARD: full-bleed image cards must NEVER receive a design-
   language frosted-glass CARD treatment.  Style packs (gradient-glass,
   nocturne, typographic-brutalism, …) target the broad ``[class*="card"]``
   selector — which ALSO matches ``el-dual-card``, ``el-dual-card-media``,
   ``el-dual-card-scrim``, ``el-dual-card-text`` (all contain "card").  That
   paints the card + the SCRIM translucent-white and blurs the page mesh
   through it → white headline/body render on a near-white panel and vanish
   (confirmed live on a Brewhaus coffee page: white-on-white, pastel smear).
   These rules restore the image-card's own styling.  Specificity is
   deliberately 0,3,1 (``body[class*="lang-"]`` + two primitive classes) so it
   BEATS any ``body.lang-x [class*="card"]`` pack rule (0,2,1) regardless of
   source order. */
body[class*="lang-"] .el-dual-cards .el-dual-card,
body[class*="lang-"] .el-dual-cards .el-dual-card-media,
body[class*="lang-"] .el-dual-cards .el-dual-card-img,
body[class*="lang-"] .el-dual-cards .el-dual-card-text,
body[class*="lang-"] .el-dual-cards .el-dual-card-headline,
body[class*="lang-"] .el-dual-cards .el-dual-card-body {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
body[class*="lang-"] .el-dual-cards .el-dual-card-headline,
body[class*="lang-"] .el-dual-cards .el-dual-card-body { color: #FFFFFF !important; }
body[class*="lang-"] .el-dual-cards .el-dual-card-scrim {
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.40) 48%, rgba(0,0,0,0.82) 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* USE-CASE metrics row (HappyRobot) */
.el-usecases { padding: clamp(3rem, 7vw, 5rem) 0; }
.el-usecases-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(0.5rem, 1.5vw, 1rem); margin-top: 1.25rem; }
.el-usecase-card {
  background: color-mix(in srgb, var(--el-accent) 6%, var(--el-surface));
  padding: 1.5rem 1.25rem;
  border-radius: 4px;
  display: flex; flex-direction: column; gap: 0.75rem;
  min-height: 240px;
}
.el-usecase-title { font-family: var(--el-display); font-size: 1.1rem; font-weight: 500; margin: 0; color: var(--el-fg); }
.el-usecase-body { font-size: 1rem; line-height: 1.5; color: var(--el-muted); margin: 0; flex: 1 1 auto; }
.el-usecase-metrics { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--el-border); padding-top: 0.85rem; }
.el-usecase-metric { font-size: 0.78rem; line-height: 1.45; color: var(--el-fg); padding: 0.15rem 0; }
@media (max-width: 1100px) { .el-usecases-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .el-usecases-grid { grid-template-columns: 1fr 1fr; } }

/* SHOWCASE 3-card dark (Public) */
.el-showcase {
  background: #0E0E10; color: #F5F5F7;
  padding: clamp(4rem, 10vw, 6rem) 0;
}
.el-showcase-headline { color: #F5F5F7; text-align: center; max-width: 22ch; margin: 0 auto 2.5rem; font-weight: 400; }
.el-showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); }
/* Adaptive column count — the grid never leaves empty trailing columns when
   the showcase has fewer than 3 real cards (pin 2026-09-06, no lonely tile). */
.el-showcase-grid-1 { grid-template-columns: minmax(0, 680px); justify-content: center; }
.el-showcase-grid-1 .el-showcase-card { min-height: clamp(320px, 40vw, 460px); }
.el-showcase-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-inline: auto; }
.el-showcase-grid-3 { grid-template-columns: repeat(3, 1fr); }
.el-showcase-card {
  background: #18181B;
  border: 1px solid rgba(245,245,247,0.08);
  border-radius: 8px;
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: 0.85rem;
  min-height: 280px;
}
.el-showcase-label { font-family: var(--el-eyebrow); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,245,247,0.55); margin: 0; }
.el-showcase-img { width: 100%; flex: 1 1 auto; object-fit: cover; border-radius: 4px; }
.el-showcase-caption { font-size: 0.78rem; color: rgba(245,245,247,0.50); margin: 0; }
@media (max-width: 900px) { .el-showcase-grid { grid-template-columns: 1fr; } }

/* HERO — centered dark dual CTA (Rhetorich) */
.el-hero-centered-dark {
  background: color-mix(in srgb, var(--el-accent) 60%, #001a14);
  color: #FFFFFF;
  padding: clamp(4rem, 10vw, 6rem) 0;
  min-height: auto; display: block;
  position: relative; overflow: hidden;
}
.el-dark-hero-content { text-align: center; max-width: 880px; }
.el-dark-hero-headline { color: #FFFFFF; font-style: italic; font-synthesis: none; max-width: 16ch; margin: 0 auto 1.25rem; }
.el-dark-hero-sub { color: rgba(255,255,255,0.85); margin: 0 auto 1.75rem; max-width: 60ch; font-size: 1rem; line-height: 1.55; }
.el-dark-hero-ctas { display: inline-flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
.el-dark-hero-primary {
  background: color-mix(in srgb, var(--el-accent) 40%, #FFFFFF);
  color: #001a14; border-radius: 6px; padding: 0.95rem 1.5rem;
}
.el-dark-hero-secondary {
  border-color: rgba(255,255,255,0.55); color: #FFFFFF;
}
.el-dark-hero-image {
  display: block; margin: clamp(2rem, 5vw, 3.5rem) auto 0;
  max-width: 100%; opacity: 0.85;
}
.el-hero-centered-dark.el-dark-hero--media {
  min-height: min(92vh, 860px); display: flex; align-items: center;
  padding: clamp(6rem, 14vw, 10rem) 0;
}
.el-dark-hero-media { position: absolute; inset: 0; z-index: 0; }
.el-dark-hero--media .el-dark-hero-image {
  position: absolute; inset: 0; width: 100%; height: 100%;
  max-width: none; margin: 0; object-fit: cover; opacity: 1;
}
.el-dark-hero--media .el-dark-hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--el-accent) 55%, #001a14) 0%, transparent 65%),
    linear-gradient(0deg, rgba(0,0,0,0.66), rgba(0,0,0,0.40));
}
.el-dark-hero--media .el-dark-hero-content { position: relative; z-index: 2; margin-left: auto; margin-right: auto; }

/* ───────────── TRANCHE 3 PRIMITIVES (Casa Branda/Sprout/Voy/Current/UGLYCASH) ───────────── */

/* HERO — centered icon (Sprout) */
.el-hero-icon-centered { background: var(--el-bg); padding: clamp(5rem, 12vw, 9rem) 0 clamp(3rem, 8vw, 6rem); min-height: auto; display: block; }
.el-icon-hero-content { text-align: center; max-width: 720px; }
.el-icon-hero-mark { margin: 0 auto 1.5rem; display: inline-flex; align-items: center; justify-content: center; }
.el-icon-hero-img { width: clamp(48px, 6vw, 72px); height: auto; }
.el-icon-hero-glyph { font-size: clamp(2.5rem, 5vw, 4rem); color: var(--el-accent-text); }
.el-icon-hero-headline { font-weight: 700; letter-spacing: -0.02em; margin: 0 auto 1.25rem; max-width: 20ch; }
.el-icon-hero-sub { font-size: 1rem; line-height: 1.55; color: var(--el-muted); margin: 0 auto 1.75rem; max-width: 56ch; }
.el-icon-hero-cta { padding: 1rem 2rem; }

/* HERO — italic accent (Current) */
.el-hero-italic-accent { background: var(--el-bg); padding: clamp(5rem, 14vw, 11rem) 0 clamp(3rem, 8vw, 5rem); min-height: auto; display: block; }
.el-italic-hero-content { text-align: center; max-width: 920px; }
.el-italic-hero-headline { font-weight: 700; letter-spacing: -0.02em; line-height: 0.95; margin: 0 0 1.5rem; font-size: clamp(3.5rem, 12vw, 9rem); }
.el-italic-top { display: block; }
.el-italic-accent { display: block; font-style: italic; font-synthesis: none; color: var(--el-accent-text); font-weight: 500; }
.el-italic-hero-sub { font-size: 1rem; line-height: 1.55; color: var(--el-muted); margin: 0 auto 1.75rem; max-width: 56ch; }
.el-italic-hero-cta { padding: 1rem 1.75rem; background: var(--el-fg); color: var(--el-bg); }

/* HERO — giant sans shouting (UGLYCASH) */
.el-hero-shouting { background: var(--el-bg); padding: clamp(3rem, 8vw, 5rem) 0 clamp(2rem, 5vw, 4rem); min-height: auto; display: block; }
.el-shout-content { text-align: center; }
.el-shout-headline {
  font-family: var(--el-body), var(--el-display);
  font-weight: 900; letter-spacing: -0.04em;
  text-transform: uppercase; line-height: 0.92;
  font-size: clamp(3rem, 10vw, 8rem);
  margin: 0 auto 2.5rem; max-width: 18ch;
  color: var(--el-fg);
}
.el-shout-mockup { display: block; margin: 0 auto clamp(1.25rem, 3vw, 2rem); max-width: 360px; width: 100%; height: auto; }
.el-shout-sub { margin: 0 auto; max-width: 56ch; color: var(--el-muted); font-size: 1rem; line-height: 1.55; }

/* FEATURE grid 4-col icons (Sprout) */
.el-feat4 { padding: clamp(2rem, 6vw, 4rem) 0; }
/* As many columns as cards, up to four: three cards left the fourth column
   empty (2026-09-27). */
.el-feat4-grid { display: grid; grid-template-columns: repeat(var(--el-cols, 4), 1fr); gap: clamp(0.5rem, 1.5vw, 1rem); }
.el-feat4-card {
  position: relative;
  background: var(--el-surface);
  border: 1px solid var(--el-border);
  border-radius: 8px;
  padding: 1.5rem 1.25rem;
  display: flex; flex-direction: column; gap: 0.6rem;
  min-height: 180px;
}
.el-feat4-icon { font-size: 1.6rem; color: var(--el-accent-text); line-height: 1; }
.el-feat4-title { font-family: var(--el-body); font-size: 1rem; font-weight: 700; margin: 0; color: var(--el-fg); }
.el-feat4-body { font-size: 1rem; line-height: 1.5; color: var(--el-muted); margin: 0; }
.el-feat4-note {
  position: absolute; top: -0.95rem; right: -0.5rem;
  max-width: 14ch; padding: 0.25rem 0.5rem;
  font-family: 'Caveat', 'Bradley Hand', cursive;
  font-size: 0.92rem;
  color: var(--el-muted);
  transform: rotate(-4deg);
}
.el-feat4-note-arrow { display: inline-block; margin-right: 0.2rem; }
@media (max-width: 1100px) { .el-feat4-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .el-feat4-grid { grid-template-columns: 1fr; } }

/* TRUST bar 4-cell icons (Voy) */
.el-trust4 { padding: clamp(1.25rem, 3vw, 1.75rem) 0; background: var(--el-surface); border-top: 1px solid var(--el-border); border-bottom: 1px solid var(--el-border); }
.el-trust4-grid { display: grid; grid-template-columns: repeat(var(--el-cols, 4), 1fr); gap: clamp(1rem, 3vw, 2rem); align-items: center; }
.el-trust4-cell { display: flex; align-items: center; gap: 0.65rem; font-size: 0.9rem; color: var(--el-fg); padding-left: clamp(0.5rem, 1.5vw, 1rem); border-left: 1px solid var(--el-border); }
.el-trust4-cell:first-child { border-left: none; padding-left: 0; }
.el-trust4-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; background: color-mix(in srgb, var(--el-accent) 18%, transparent);
  color: var(--el-accent-text); border-radius: 50%; font-size: 0.7rem; flex: 0 0 22px;
}
.el-trust4-label { line-height: 1.3; }
@media (max-width: 820px) {
  .el-trust4-grid { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
  .el-trust4-cell { border-left: none; padding-left: 0; }
}

/* PHONE mockup centered big (UGLYCASH/Goldsand) */
.el-phonebig { padding: clamp(3rem, 8vw, 6rem) 0; }
.el-phonebig-head { text-align: center; max-width: 720px; margin: 0 auto 2rem; }
.el-phonebig-headline { margin: 0 0 0.75rem 0; }
.el-phonebig-sub { color: var(--el-muted); font-size: 1rem; line-height: 1.55; margin: 0; }
.el-phonebig-frame { display: flex; justify-content: center; }
.el-phonebig-img { max-width: 380px; width: 100%; height: auto; display: block; border-radius: 36px; }
.el-phonebig-caption { margin-top: 1rem; font-family: var(--el-body); font-size: 0.95rem; text-align: center; color: var(--el-fg); }

/* DEVICE showcase 3-row (Current) */
.el-devices { padding: clamp(2rem, 6vw, 4rem) 0; background: var(--el-bg); }
.el-devices-head { text-align: center; max-width: 720px; margin: 0 auto 2.5rem; }
.el-devices-grid { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: clamp(0.75rem, 2vw, 1.5rem); align-items: end; max-width: 1200px; margin: 0 auto; }
.el-device-img { width: 100%; height: auto; display: block; }
.el-device-phone { max-width: 220px; justify-self: end; transform: translateY(-12px); }
.el-device-laptop { max-width: 100%; }
.el-device-tablet { max-width: 240px; justify-self: start; transform: translateY(-6px); }
@media (max-width: 820px) { .el-devices-grid { grid-template-columns: 1fr; gap: 1.5rem; } .el-device-phone, .el-device-tablet { justify-self: center; transform: none; max-width: 280px; } }

/* SPLIT cards with mockup inset (Voy) */
.el-splitm { padding: clamp(2rem, 5vw, 4rem) 0; }
.el-splitm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); }
.el-splitm-card {
  position: relative;
  background: var(--el-splitm-accent, var(--el-surface));
  border-radius: 16px;
  padding: 1.75rem 1.5rem 0;
  text-decoration: none; color: var(--el-fg);
  display: flex; flex-direction: column; gap: 1rem;
  min-height: 340px;
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.el-splitm-card[href]:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,0.10); }
.el-splitm-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.el-splitm-text { flex: 1 1 auto; }
.el-splitm-title { font-family: var(--el-body); font-size: 1.45rem; font-weight: 700; margin: 0 0 0.4rem 0; color: var(--el-fg); }
.el-splitm-body { font-size: 1rem; line-height: 1.5; color: var(--el-fg); opacity: 0.8; margin: 0; }
.el-splitm-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.85); color: var(--el-fg);
  flex: 0 0 40px; font-size: 1rem;
}
.el-splitm-mockup-frame { margin-top: auto; padding: 1rem 0 0; }
.el-splitm-mockup { width: 100%; height: 180px; object-fit: cover; object-position: top; border-radius: 12px; display: block; }
@media (max-width: 820px) { .el-splitm-grid { grid-template-columns: 1fr; } }

/* FACT card horizontal scroll (Casa Branda) */
.el-facts { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 6vw, 4rem); background: var(--el-bg); }
.el-facts-eyebrow { margin: 0 0 1rem 0; }
.el-facts-headline { margin: 0 0 1.75rem 0; text-wrap: balance; }
.el-facts-scroll {
  display: flex; gap: 0.85rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  /* start where the content column starts (1240px container + its padding) */
  padding: 0 max(clamp(1.25rem, 3vw, 2.5rem), calc((100% - 1240px) / 2 + clamp(1.25rem, 3vw, 2.5rem)));
  scrollbar-width: thin;
}
.el-facts-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.el-facts-grid .el-fact-card { flex: none; }
.el-fact-card {
  flex: 0 0 280px;
  background: var(--el-surface);
  border: 1px solid var(--el-border);
  border-radius: 8px;
  padding: 1.25rem 1.1rem;
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.el-fact-title { font-family: var(--el-body); font-size: 0.9rem; font-weight: 700; margin: 0; color: var(--el-fg); }
.el-fact-body { font-size: 1rem; line-height: 1.55; color: var(--el-muted); margin: 0; }

/* VIDEO with face-cam overlay (Sprout) */
.el-vid-facecam { padding: clamp(2rem, 5vw, 4rem) 0; }
.el-vid-head { text-align: center; max-width: 720px; margin: 0 auto 2rem; }
.el-vid-frame {
  position: relative; display: block;
  max-width: 1080px; margin: 0 auto;
  aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 10px; background: #18181B;
  text-decoration: none;
}
.el-vid-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.el-vid-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--el-accent);
  display: inline-flex; align-items: center; justify-content: center;
  color: #FFFFFF; font-size: 1.6rem; padding-left: 0.4rem;
  z-index: 3;
}
.el-vid-facecam {
  position: absolute; right: clamp(0.75rem, 2.5vw, 1.75rem); bottom: clamp(0.75rem, 2.5vw, 1.75rem);
  width: 96px; height: 96px; border-radius: 50%;
  object-fit: cover; border: 4px solid #FFFFFF;
  box-shadow: 0 8px 24px rgba(0,0,0,0.30);
  z-index: 4;
}

/* ────────────────────────────────────────────────────────────────
   Reveal-on-scroll system (Framer-Motion-style)
   - Sections start hidden (.el-reveal default state)
   - IntersectionObserver in script.js flips .el-revealed on enter
   - Stagger applied via CSS custom property --el-stagger-i set per child
   - Respects prefers-reduced-motion automatically
   ──────────────────────────────────────────────────────────────── */

/* Hero content reveals immediately on load (above the fold) */
@media (prefers-reduced-motion: no-preference) {
  .el-hero-content, .el-hero-typo-inner, .el-hero-form-inner {
    animation: el-hero-rise 1200ms var(--el-easing) both;
  }
  .el-hero-content .el-eyebrow { animation-delay: 0ms; }
  .el-hero-content .el-display { animation: el-hero-rise 1100ms 80ms var(--el-easing) both; }
  .el-hero-content .el-hero-subhead { animation: el-hero-rise 1000ms 240ms var(--el-easing) both; }
  .el-hero-content .el-btn-ink { animation: el-hero-rise 900ms 380ms var(--el-easing) both; }
  @keyframes el-hero-rise {
    from { opacity: 0; transform: translateY(28px); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
  }

  /* Default state for every revealable element */
  [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
    transition-delay: calc(var(--el-stagger-i, 0) * 80ms);
  }
  [data-reveal].el-revealed {
    opacity: 1;
    transform: translateY(0);
  }

  /* Image hover — soft scale + brightness lift */
  .el-mosaic-tile img,
  .el-process-img,
  .el-callout-img,
  .el-specs-img,
  .el-maker-portrait {
    transition: transform 700ms var(--el-easing), filter 700ms var(--el-easing);
  }
  .el-mosaic-tile:hover img { transform: scale(1.04); }
  .el-callout-card-photo:hover .el-callout-img { transform: scale(1.03); filter: brightness(1.04); }

  /* Subtle hero parallax — translate the image as the page scrolls.
     Driven from script.js with a CSS variable --el-parallax-y */
  .el-hero-image {
    transform: translate3d(0, var(--el-parallax-y, 0px), 0) scale(1.04);
    transition: transform 60ms linear;
  }

  /* Stats — number counters animate from script.js */
  .el-stat-value[data-animate] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 700ms var(--el-easing), transform 700ms var(--el-easing);
  }
  .el-stat-value.el-counter-done {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ────────────────────────────────────────────────────────────────
   Refined form + CTA micro-interactions
   ──────────────────────────────────────────────────────────────── */

/* Inputs: focus ring + subtle lift */
.el-cta-input {
  background: rgba(250, 250, 247, 0.96);
  border: 1px solid rgba(26, 26, 26, 0.10);
  /* FIXED dark — the input bg is a FIXED light cream regardless of theme, so its
     text must be dark too. var(--el-fg) flips near-white under dark palettes →
     invisible text on the cream input (live: demo_landing contrast 1.07:1). The
     .el-cta-row .el-cta-input variant below overrides to color:inherit for the
     transparent-on-dark-band case. Matches the .el-site-brand header fix. */
  color: #1a1a1a;
  font: inherit;
  font-size: 1rem;
  border-radius: 999px;
  padding: 1rem 1.35rem;
  transition: border-color 250ms var(--el-easing),
              box-shadow 250ms var(--el-easing),
              background 250ms var(--el-easing);
  outline: none;
}
.el-cta-input::placeholder { color: rgba(26, 26, 26, 0.40); }
.el-cta-input:hover { border-color: rgba(26, 26, 26, 0.22); }
.el-cta-input:focus {
  border-color: var(--el-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--el-accent) 20%, transparent),
              0 8px 24px -12px rgba(0, 0, 0, 0.18);
  background: #FFFFFF;
}
.el-cta-input-light { background: #ffffff; color: #1a1a1a; }

/* Pill CTAs — refined hover + active states */
.el-btn-ink {
  position: relative;
  border-radius: 999px;
  padding: 1rem 1.6rem;
  letter-spacing: 0;
  transition:
    transform 250ms var(--el-easing),
    box-shadow 250ms var(--el-easing),
    background 250ms var(--el-easing),
    color 250ms var(--el-easing);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06),
              0 6px 18px -6px rgba(0, 0, 0, 0.18);
}
.el-btn-ink:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08),
              0 14px 28px -10px rgba(0, 0, 0, 0.22);
}
.el-btn-ink:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.el-btn-ink[data-busy="true"] {
  pointer-events: none; opacity: 0.7;
}
.el-btn-ink[data-busy="true"]::after {
  content: ""; display: inline-block; width: 14px; height: 14px;
  margin-left: 0.6rem; border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  animation: el-spinner 750ms linear infinite;
  vertical-align: -2px;
}
@keyframes el-spinner { to { transform: rotate(360deg); } }

/* CTA form layout polish */
.el-cta-form { max-width: 520px; margin: 0 auto; }
.el-cta-row {
  display: flex; gap: 0.5rem; align-items: center;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.35rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.el-cta-row .el-cta-input {
  flex: 1 1 auto; min-width: 0;
  background: transparent; border-color: transparent;
  box-shadow: none;
  color: inherit;
  padding: 0.85rem 1.1rem;
}
/* Placeholder follows the input's INHERITED (band-correct) text colour, faded —
   not a hardcoded light cream. The cream assumed a dark CTA band; when the
   palette renders the band light (#fdf5ff), cream-on-white is invisible
   (rendered_contrast: 1.06:1). ``color: inherit`` forces the placeholder to
   track the band's own readable text colour on BOTH dark and light bands. */
.el-cta-row .el-cta-input::placeholder { color: inherit; opacity: 0.55; }
.el-cta-row .el-cta-input:focus { background: transparent; box-shadow: none; }
.el-cta-row .el-btn-ink { padding: 0.85rem 1.4rem; }

/* Light-variant CTA row for non-dark sections */
.el-cta-min .el-cta-row {
  background: var(--el-surface);
  border-color: var(--el-border);
}
.el-cta-min .el-cta-row .el-cta-input::placeholder { color: rgba(26, 26, 26, 0.40); }

/* Success/error toast hooks (script.js sets these states) */
.el-cta-form[data-state="success"] .el-cta-row { display: none; }
.el-cta-form[data-state="success"]::after {
  content: attr(data-success-message);
  display: block; text-align: center;
  font-family: var(--el-display); font-size: 1.2rem;
  padding: 1rem; color: var(--el-alt-fg);
}
.el-cta-form[data-state="success"]:not([data-success-message])::after {
  content: "Thank you. We'll be in touch.";
}

/* Typographic callout variant (no photo) — looks intentional */
.el-callout-card-typo {
  background: var(--el-surface);
  padding: 2rem 1.75rem;
  border-radius: 12px;
  border: 1px solid var(--el-border);
  display: flex; flex-direction: column; gap: 0.85rem;
  position: relative;
  overflow: hidden;
}
.el-callout-card-typo::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 0% 0%,
                              color-mix(in srgb, var(--el-accent) 8%, transparent),
                              transparent 60%);
  pointer-events: none;
}
.el-callout-num {
  font-family: var(--el-eyebrow);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--el-accent-text);
  position: relative;
}
.el-callout-card-typo .el-callout-title { position: relative; }
.el-callout-card-typo .el-callout-body { position: relative; }

/* Photo callouts get rounded media + soft shadow on hover */
.el-callout-card-photo {
  display: flex; flex-direction: column; gap: 0.85rem;
  transition: transform 300ms var(--el-easing);
}
.el-callout-card-photo:hover { transform: translateY(-3px); }
.el-callout-card-photo .el-callout-img {
  border-radius: 8px; aspect-ratio: 4/3; object-fit: cover;
}

/* Mosaic grid — adaptive density */
/* 1 real photo → a single full-bleed band (never a lone tile in a sparse grid). */
.el-mosaic-grid-1 { grid-template-columns: 1fr; grid-auto-rows: clamp(260px, 34vw, 460px); }
.el-mosaic-grid-1 .el-mosaic-tile-0 { grid-column: span 1; grid-row: span 1; }
/* 2 real photos → a clean asymmetric 2-up (feature + companion). */
.el-mosaic-grid-2 { grid-template-columns: repeat(5, 1fr); grid-auto-rows: clamp(200px, 24vw, 340px); }
.el-mosaic-grid-2 .el-mosaic-tile-0 { grid-column: span 3; grid-row: span 1; }
.el-mosaic-grid-2 .el-mosaic-tile-1 { grid-column: span 2; grid-row: span 1; }

.el-mosaic-grid-3 { grid-template-columns: repeat(3, 1fr); }
.el-mosaic-grid-3 .el-mosaic-tile-0 { grid-column: span 2; grid-row: span 2; }
.el-mosaic-grid-3 .el-mosaic-tile-1,
.el-mosaic-grid-3 .el-mosaic-tile-2 { grid-column: span 1; grid-row: span 1; }

/* 4 photos → a feature spanning three rows beside three stacked companions.
   With a two-row feature the fourth photo wrapped under it and left an empty
   cell beside it (the grid filled 78%). Pin 2026-09-14. */
.el-mosaic-grid-4 { grid-template-columns: repeat(4, 1fr); }
.el-mosaic-grid-4 .el-mosaic-tile-0 { grid-column: span 2; grid-row: span 3; }
.el-mosaic-grid-4 .el-mosaic-tile-1,
.el-mosaic-grid-4 .el-mosaic-tile-2,
.el-mosaic-grid-4 .el-mosaic-tile-3 { grid-column: span 2; grid-row: span 1; }

.el-mosaic-grid-5 { grid-template-columns: repeat(6, 1fr); }
.el-mosaic-grid-5 .el-mosaic-tile-0 { grid-column: span 4; grid-row: span 2; }
.el-mosaic-grid-5 .el-mosaic-tile-1,
.el-mosaic-grid-5 .el-mosaic-tile-2 { grid-column: span 2; grid-row: span 1; }
.el-mosaic-grid-5 .el-mosaic-tile-3,
.el-mosaic-grid-5 .el-mosaic-tile-4 { grid-column: span 3; grid-row: span 1; }

@media (max-width: 820px) {
  .el-mosaic-grid-3, .el-mosaic-grid-4, .el-mosaic-grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }
  .el-mosaic-grid-3 .el-mosaic-tile-0,
  .el-mosaic-grid-4 .el-mosaic-tile-0,
  .el-mosaic-grid-5 .el-mosaic-tile-0 { grid-column: span 2; }
  .el-mosaic-grid-4 .el-mosaic-tile-0 { grid-row: span 2; }
  /* 2-up collapses to a single stacked column on narrow screens. */
  .el-mosaic-grid-2 { grid-template-columns: 1fr; }
  .el-mosaic-grid-2 .el-mosaic-tile-0,
  .el-mosaic-grid-2 .el-mosaic-tile-1 { grid-column: span 1; }
}

/* Language-specific variant tweaks */
:root{--el-brand-primary:#111827;--el-on-ink:#ffffff;--el-brand-accent:#6366f1;}