/* scaled: px->rem (v12) */
/* ==========================================================================
   theme-shop.css — aligns the marketing site with shop.elecfron.com's design system
   (shadcn-style tokens read from the shop's stylesheet: slate ground, white cards with
   1px borders and shadow-sm, blue-600 actions, orange accent, 0.5rem radii, blurred white
   header, EFL-blue footer, Inter). Loaded after site.css; overrides only.
   ========================================================================== */

:root {
  /* shop tokens (HSL from the shop's :root, converted) */
  --bg: #f8fafc;              /* --background 210 40% 98% */
  --surface: #ffffff;         /* --card */
  --surface-2: #f1f5f9;       /* --muted 210 40% 96.1% */
  --surface-3: #e2e8f0;
  --text: #0f172a;            /* --foreground 222 47% 11.2% */
  --text-2: #334155;
  --muted: #64748b;           /* --muted-foreground 215 16% 47% */
  --line: #d3dce8;            /* --border 214 32% 85% */
  --line-strong: #c3cfdf;

  --brand: #2563eb;           /* --primary 221 83% 53% */
  --brand-bright: #0e6bb4;
  --brand-deep: #003a66;      /* EFL deep blue (old site #003366 family) */
  --brand-ink: #0b2545;       /* old site navy #112244 */
  --brand-soft: #eff6ff;      /* blue-50 */
  --brand-glow: rgba(0, 85, 143, 0.3);
  --efl-blue: #00558f;        /* --footer-background 205 100% 28% — the EFL logo blue (old site #00528e) */
  --efl-navy: #061c34;        /* hero ground */
  --efl-sky: #3fa8f2;         /* old site light blue */
  --efl-red: #e40520;         /* the logo's red: eyebrow dash only */
  --accent: #f59e0b;          /* shop amber */
  --accent-on-dark: #fbbf24;  /* amber-400 for text on the blue heroes */
  --accent-soft: #fff7e6;
  --ok: #00bb7f;

  --radius-s: 0.375rem;            /* rounded-md */
  --radius: 0.5rem;              /* rounded-lg */
  --radius-l: 0.75rem;           /* rounded-xl */
  --shadow-s: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-m: 0 1px 0.1875rem 0 rgba(15, 23, 42, 0.10), 0 1px 2px -1px rgba(15, 23, 42, 0.10);
  --shadow-l: 0 0.625rem 1.5625rem -8px rgba(15, 23, 42, 0.18), 0 0.25rem 0.625rem -6px rgba(15, 23, 42, 0.10);
  --container: 87.5rem;        /* the shop's max-w-[87.5rem] */
}

/* ---------- type ---------- */
h1 { font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.eyebrow { color: var(--brand); font-size: 0.74rem; }
.eyebrow::before { background: var(--efl-red); }
.lead { color: var(--text-2); }

/* ---------- header (shop: sticky, bg-card/95, backdrop-blur-md, border-b, shadow-sm) ---------- */
.site-header { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(0.75rem); -webkit-backdrop-filter: blur(0.75rem); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-s); }
.nav-link { color: #020617; font-size: 0.92rem; border-radius: var(--radius-s); }
.nav-link:hover, .nav-item.open > .nav-link, .nav-item:focus-within > .nav-link { color: var(--brand); background: var(--surface-2); }
.dropdown { border-radius: var(--radius); box-shadow: var(--shadow-l); border-color: var(--line); }
.dropdown a { border-radius: var(--radius-s); }
.dropdown a:hover { background: var(--surface-2); color: var(--brand); }
.brand-text small { color: var(--muted); }

/* ---------- buttons (shop: .btn h-9/h-10, rounded-md, shadow-sm; outline = white + border) ---------- */
.btn { border-radius: var(--radius); padding: 0.7rem 1.15rem; font-size: 0.93rem; box-shadow: var(--shadow-s); }
.btn-sm { padding: 0.5rem 0.9rem; font-size: 0.85rem; }
.btn-lg { padding: 0.9rem 1.5rem; font-size: 1rem; }
.btn-primary { background: var(--brand); box-shadow: var(--shadow-m); }
.btn-primary:hover { background: #003a66; }
.btn-secondary { background: #fff; color: var(--text); border-color: var(--line); }
.btn-secondary:hover { border-color: rgba(0, 85, 143, 0.45); color: var(--brand); }
.btn-ghost { background: #fff; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: rgba(0, 85, 143, 0.45); color: var(--brand); }
.btn-light { background: #fff; color: var(--brand-deep) !important; }
.btn-light:hover { background: var(--brand-soft); }
.btn-outline-light { box-shadow: none; }
.btn-shop { background: var(--brand); }
.header-cta .btn-ghost { box-shadow: none; }
.filter-btn { border-radius: var(--radius-s); }
.filter-btn[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); }

/* ---------- cards (shop: bg-card, border border-border, rounded-lg, shadow-sm; hover border-primary/40 + shadow) ---------- */
.card { border-radius: var(--radius); border-color: var(--line); box-shadow: var(--shadow-s); }
a.card:hover, .card.hoverable:hover { transform: translateY(-2px); border-color: rgba(0, 85, 143, 0.45); box-shadow: var(--shadow-l); }
.feature .icon, .pillar .icon { background: var(--brand-soft); color: var(--brand); border-radius: var(--radius); }
.pillar .proof, .feature .proof { color: var(--brand); }
.chip { background: var(--brand-soft); color: var(--brand); }
.chip.neutral { background: var(--surface-2); color: var(--text-2); }
.section-alt { background: var(--surface-2); border-block: 1px solid var(--line); }
.door { background: #fff; }
.door::after { background: radial-gradient(circle, rgba(37, 99, 235, 0.16), transparent 70%); }
.door .kicker, .way .kicker, .audience-panel .kicker { color: var(--brand); }
.range-tile .thumb, .shop-panel .highlights .thumb, .product-card .media { border-radius: var(--radius-s); border-color: var(--line); }
.vendor-tile .accred { color: var(--muted); }
.offer-card .media, .post-card .media { border-bottom: 1px solid var(--line); }
.shop-panel { border-radius: var(--radius-l); }
.cta-band { border-radius: var(--radius-l); background: linear-gradient(135deg, var(--brand-deep), var(--brand)); }
.stat-tile { border-radius: var(--radius); background: linear-gradient(150deg, var(--brand-deep), var(--brand)); }
.big-stat { background: var(--brand-soft); }
.big-stat strong { color: var(--brand); }
.journey, .explorer-detail, .compare-wrap, details.acc, .map-card { border-radius: var(--radius); border-color: var(--line); }
.journey-step[aria-selected="true"] .dot { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 0.3125rem var(--brand-soft); }
.journey-step[aria-selected="true"] .label, .journey-step[aria-selected="true"] .num { color: var(--brand); }
.layer { border-radius: var(--radius); }
.layer[aria-selected="true"] { background: var(--brand); border-color: var(--brand); }
.compare .hl { background: var(--brand-soft); }
.compare thead th.hl { color: var(--brand); }
.tl-item::before { background: var(--accent); }
.tl-year { color: var(--brand); }
.notice { background: var(--accent-soft); border-color: rgba(245, 158, 11, 0.45); }
.field input, .field textarea, .field select { border-radius: var(--radius-s); border-color: var(--line); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--brand); outline: 0.1875rem solid var(--brand-glow); }
.search-box input, .shop-search input { border-radius: var(--radius); }
.hero .shop-search input { border-radius: var(--radius); }
.tab-btn[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }

/* ---------- vendor logo strip: the shop's brand tiles (h-20 white, border, rounded-md, shadow-sm) ---------- */
.logo-strip { background: var(--bg); border-bottom: 1px solid var(--line); }
.logo-strip .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr)); gap: 0.75rem; padding-block: 1.25rem; }
.logo-strip .label { grid-column: 1 / -1; text-align: left; margin-bottom: 0.1rem; }
.logo-strip a { height: 5rem; padding: 0.5rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-s); box-shadow: var(--shadow-s); filter: none; opacity: 0.9; transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s; }
.logo-strip a:hover { opacity: 1; border-color: rgba(0, 85, 143, 0.45); box-shadow: var(--shadow-m); }
.logo-strip img { max-height: 2.75rem; max-width: 7.5rem; }

/* ---------- hero: slate-950 to shop navy, blue-600 light, orange accent ---------- */
.hero { background: radial-gradient(68.75rem 35rem at 82% -10%, rgba(63, 168, 242, 0.32), transparent 60%), radial-gradient(43.75rem 26.25rem at -5% 105%, rgba(245, 158, 11, 0.14), transparent 60%), linear-gradient(135deg, var(--efl-navy) 0%, var(--brand-deep) 45%, var(--efl-blue) 100%); }
.hero h1 em { color: var(--accent); }
.hero .eyebrow { color: var(--accent-on-dark); }
.hero .eyebrow::before { background: var(--accent-on-dark); }
.hero .eyebrow::before { background: var(--accent); }
.hero .btn-light { color: var(--brand-deep) !important; }
.proof-row { border-top-color: rgba(255, 255, 255, 0.16); }
.proof-row strong { color: #fff; }
.bento-tile { border-radius: var(--radius-l); border: 1px solid rgba(255, 255, 255, 0.08); }
.bento-tile .tag { color: var(--brand-ink); }
.bento-tile .tag svg { color: var(--brand); }
.bento-tile.lg .tag small { color: var(--muted); }
.bento-tile.stat { background: linear-gradient(150deg, var(--brand-deep), var(--efl-blue) 55%, var(--brand)); }
.bento-tile.stat strong { color: var(--accent-on-dark); }
.page-hero { background: linear-gradient(135deg, var(--efl-navy) 0%, var(--brand-deep) 45%, var(--efl-blue) 100%); }
.page-hero .eyebrow { color: var(--accent-on-dark); }
.page-hero .eyebrow::before { background: var(--accent-on-dark); }
.page-hero.light { background: #fff; border-bottom: 1px solid var(--line); }
.page-hero.light .eyebrow { color: var(--brand); }
.badge { border-radius: 62.4375rem; }
.hero-caption a, .hero-caption .num { color: #fff; }

/* ---------- footer: the shop's EFL blue with light text ---------- */
.site-footer { background: var(--efl-blue); color: #e8f1fa; }
.footer-brand p, .footer-bottom { color: #d6e6f5; }
.site-footer h4 { color: #fff; }
.site-footer a { color: #e8f1fa; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.1875rem; }
.footer-contact svg { color: var(--accent-on-dark); }
.social a { background: rgba(255, 255, 255, 0.12); }
.social a:hover { background: rgba(255, 255, 255, 0.22); }
.footer-bottom { border-top-color: rgba(255, 255, 255, 0.18); }
.footer-brand img { background: #fff; }

/* ---------- hero fills the first viewport ---------- */
.hero { min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; }
.hero > .container { flex: 1; display: grid; align-items: center; }
.hero .hero-grid { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.hero-home > .container { grid-template-rows: 1fr auto; }
.hero-home .hero-grid { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.hero-paths .path .k { color: var(--accent-on-dark); }
.hero-paths .path:hover { border-color: rgba(251, 191, 36, 0.55); }
.hero-logos a { border-radius: var(--radius-s); box-shadow: var(--shadow-s); }
@media (max-width: 899px) { .hero { min-height: 0; } }

/* ---------- hero headline: staggered word reveal (progressive; plain text without JS) ---------- */
.hero h1 .w { display: inline-block; opacity: 0; transform: translateY(0.35em); animation: word-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; animation-delay: calc(var(--i) * 70ms); }
.hero h1 em .w { color: inherit; }
@keyframes word-in { to { opacity: 1; transform: none; } }
.hero .lead, .hero .hero-actions, .hero .shop-search, .hero .proof-row, .hero .audience-panels, .hero .hero-paths, .hero-logos { animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero .lead { animation-delay: 0.45s; } .hero .hero-actions, .hero .shop-search { animation-delay: 0.6s; } .hero .hero-paths { animation-delay: 0.7s; } .hero .proof-row { animation-delay: 0.8s; } .hero .audience-panels { animation-delay: 0.5s; } .hero-logos { animation-delay: 0.9s; }
@media (prefers-reduced-motion: reduce) {
  .hero h1 .w, .hero .lead, .hero .hero-actions, .hero .shop-search, .hero .proof-row, .hero .audience-panels, .hero .hero-paths, .hero-logos { animation: none; opacity: 1; transform: none; }
}

/* ---------- finishing touches ---------- */
.section-head h2 { text-wrap: balance; }
.grid { gap: 1rem; }
.card-body { padding: 1.15rem; }
.feature, .pillar, .door, .way { padding: 1.5rem; }
.person .avatar { background: var(--brand-soft); color: var(--brand); }
.ways .way { background: linear-gradient(180deg, #fff, #fbfcfe); }
.hero-actions .btn, .btn-row .btn { box-shadow: var(--shadow-m); }
details.acc summary::after { color: var(--brand); }
.dead-link { color: var(--muted); text-decoration: line-through; }

/* ==========================================================================
   Light heroes (Greg, 2026-09-02): the old site's heroes were light and so are the shop's pages.
   Every hero and page hero sits on a white-to-sky ground with EFL blue type. Appended last so it wins.
   ========================================================================== */
.hero, .page-hero { color: var(--text); background: radial-gradient(60rem 32rem at 88% -12%, rgba(63, 168, 242, 0.22), transparent 62%), radial-gradient(40rem 24rem at -8% 108%, rgba(245, 158, 11, 0.10), transparent 60%), linear-gradient(180deg, #ffffff 0%, #f4f8fd 60%, #eaf2fb 100%); }
.hero::after { background-image: linear-gradient(rgba(0, 85, 143, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 85, 143, 0.055) 1px, transparent 1px); }
.hero.has-3d::after { display: block; }
.page-hero::after { background: radial-gradient(43.75rem 18.75rem at 90% 10%, rgba(63, 168, 242, 0.16), transparent 60%); }
/* the fibre strands, now in CSS: four faint diagonal lines that fade towards the edges */
.hero::before { content: ""; position: absolute; inset: -15% -10%; pointer-events: none; z-index: 0;
  background:
    linear-gradient(112deg, transparent 0 46.5%, rgba(63, 168, 242, 0.28) 46.5% calc(46.5% + 1px), transparent calc(46.5% + 1px) 100%),
    linear-gradient(108deg, transparent 0 58%, rgba(0, 85, 143, 0.16) 58% calc(58% + 1px), transparent calc(58% + 1px) 100%),
    linear-gradient(116deg, transparent 0 67%, rgba(63, 168, 242, 0.22) 67% calc(67% + 1px), transparent calc(67% + 1px) 100%),
    linear-gradient(104deg, transparent 0 78%, rgba(245, 158, 11, 0.16) 78% calc(78% + 1px), transparent calc(78% + 1px) 100%);
  -webkit-mask-image: radial-gradient(75% 85% at 58% 50%, #000 25%, transparent 100%); mask-image: radial-gradient(75% 85% at 58% 50%, #000 25%, transparent 100%); }
.hero-3d { display: none; }
.hero h1, .page-hero h1 { color: var(--brand-ink); }
.hero h1 em { color: var(--efl-blue); }
.hero .lead, .page-hero .lead { color: var(--text-2); }
.hero .eyebrow, .page-hero .eyebrow { color: var(--efl-blue); }
.hero .eyebrow::before, .page-hero .eyebrow::before { background: var(--efl-red); }
.breadcrumb, .breadcrumb a, .hero .breadcrumb, .hero .breadcrumb a { color: var(--muted); }
.breadcrumb a:hover, .hero .breadcrumb a:hover { color: var(--brand); }
.hero .shop-search input { background: #fff; border-color: var(--line-strong); color: var(--text); box-shadow: var(--shadow-s); }
.hero .shop-search input::placeholder { color: var(--muted); }
.btn-light { background: var(--brand); color: #fff !important; box-shadow: var(--shadow-m); }
.btn-light:hover { background: #003a66; }
.btn-outline-light { background: #fff; color: var(--text) !important; border-color: var(--line-strong); box-shadow: var(--shadow-s); }
.btn-outline-light:hover { background: #fff; border-color: rgba(0, 85, 143, 0.45); color: var(--brand) !important; }
.hero-paths .path { background: #fff; border-color: var(--line); color: var(--text); box-shadow: var(--shadow-s); }
.hero-paths .path .k { color: var(--efl-blue); }
.hero-paths .path:hover { background: var(--brand-soft); border-color: rgba(0, 85, 143, 0.45); color: var(--brand); }
.proof-row { border-top-color: var(--line); }
.proof-row strong { color: var(--brand-ink); }
.proof-row span { color: var(--muted); }
.hero-logos { border-top-color: var(--line); }
.hero-logos .label { color: var(--muted); }
.hero-logos a { border: 1px solid var(--line); opacity: 1; }
.hero-logos a:hover { border-color: rgba(0, 85, 143, 0.45); box-shadow: var(--shadow-m); }
.bento-tile { border-color: var(--line); box-shadow: var(--shadow-m); }
.bento-tile:hover { box-shadow: var(--shadow-l); }
.bento-tile.stat { border-color: transparent; }
.hero-caption a { background: #fff; border-color: var(--line); color: var(--text); box-shadow: var(--shadow-s); }
.hero-caption a:hover { border-color: rgba(0, 85, 143, 0.45); }
.hero-caption .num { color: var(--efl-blue); }
.hero-caption .sub { color: var(--muted); }
@media (max-width: 899px) { .hero::before { display: none; } }


/* ==========================================================================
   v17: performance + polish. Blobs: no blur filter (the radial gradient is already soft), transform-only motion.
   Pulses: small SMIL circles riding the strands, so only a few pixels repaint per frame. Inline search button.
   Light 'stat' tile for the light hero.
   ========================================================================== */
/* search: one field with the button inside it */
.shop-search { position: relative; max-width: 35rem; display: block; }
.shop-search input, .hero .shop-search input { width: 100%; height: 3.4rem; padding: 0 8.25rem 0 1.15rem; border-radius: var(--radius); }
.shop-search .btn { position: absolute; right: 0.35rem; top: 0.35rem; bottom: 0.35rem; padding: 0 1.05rem; border-radius: calc(var(--radius) - 2px); box-shadow: none; display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; }
.shop-search .btn svg { width: 1rem; height: 1rem; }
@media (max-width: 560px) { .shop-search { flex-wrap: nowrap; } .shop-search input { flex: none; padding-right: 7.25rem; } .shop-search .btn { width: auto; } }
/* the text tile in the bento: light, so it belongs with the white product tiles */
.bento-tile.stat { background: linear-gradient(150deg, #eef5fd 0%, #dbeafe 100%); border: 1px solid rgba(0, 85, 143, 0.25); color: var(--text-2); }
.bento-tile.stat strong { color: var(--efl-blue); font-size: 1.9rem; }
.bento-tile.stat span { color: var(--text-2); }
.bento-tile.stat .arrow { color: var(--brand); }
.bento-tile.stat:hover { border-color: rgba(37, 99, 235, 0.45); }

/* ==========================================================================
   v18: classic home (the old site's anatomy in the new engine)
   ========================================================================== */
.hero-classic { min-height: 0; }
.hero-classic .hero-grid { padding-block: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 900px) { .hero-classic .hero-grid { grid-template-columns: 1.1fr 0.9fr; } }
.hero-classic h1 { font-size: clamp(2.5rem, 5.4vw, 4.4rem); margin-bottom: 0.4rem; }
.hero-classic .strap { display: flex; flex-wrap: wrap; gap: 0.35rem 0; margin: 0 0 1.1rem; font-size: clamp(1.02rem, 1.5vw, 1.25rem); font-weight: 600; color: var(--efl-blue); letter-spacing: -0.01em; }
.hero-classic .strap span + span::before { content: "|"; margin: 0 0.85rem; color: var(--line-strong); font-weight: 400; }
.hero-classic .hero-visual { min-height: 0; display: flex; justify-content: flex-end; }
.hero-classic .hero-figure { width: 100%; max-width: 38rem; height: auto; mix-blend-mode: multiply; object-fit: contain; animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both; }
.sp-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); gap: 1rem; }
.sp-step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.1rem 1.15rem; box-shadow: var(--shadow-s); display: grid; gap: 0.5rem; align-content: start; color: var(--text); transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.sp-step:hover { transform: translateY(-2px); border-color: rgba(0, 85, 143, 0.45); box-shadow: var(--shadow-l); color: var(--text); }
.sp-step .n { position: absolute; right: 1rem; top: 0.9rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--efl-blue); }
.sp-step .icon { width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; }
.sp-step .icon svg { width: 1.2rem; height: 1.2rem; }
.sp-step h3 { font-size: 1rem; margin: 0; }
.sp-step p { margin: 0; font-size: 0.88rem; color: var(--muted); line-height: 1.45; }
.classic-band .card-body { padding: 1.5rem; }
@media (max-width: 899px) { .hero-classic .hero-visual { justify-content: center; } .hero-classic .hero-figure { max-width: 22rem; margin-top: 1rem; } }
@media (prefers-reduced-motion: reduce) { .hero-classic .hero-figure { animation: none; } }


/* v20: classic hero carries the vendor logo row along its bottom edge */
.hero-classic > .container { grid-template-rows: 1fr auto; }
.hero-classic .hero-logos { border-top-color: rgba(0, 85, 143, 0.14); padding-bottom: 1.5rem; }

/* ==========================================================================
   v21: the hero graphic behind every hero and page hero, as its own layer with a slow drift
   (transform only, compositor-composited). White fade on the left keeps the copy legible.
   ========================================================================== */
.hero, .page-hero, .page-hero.light, .hero-classic.hero-image { background: #f3f4f6; position: relative; overflow: hidden; }
.hero-img { position: absolute; inset: -4%; z-index: 0; background: var(--hero-img) right center / cover no-repeat; }
.hero-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0.64) 0%, rgba(255, 255, 255, 0.4) 42%, rgba(255, 255, 255, 0) 62%); }
.hero::before, .hero::after, .page-hero::after { content: none; }
.hero-bg { display: none; }
.hero .container, .page-hero .container { position: relative; z-index: 1; }
.hero { min-height: 38rem; }
.hero .hero-grid { grid-template-columns: minmax(0, 1fr); }
.hero .hero-grid > div { max-width: 40rem; }
.page-hero { min-height: 21rem; display: flex; flex-direction: column; justify-content: center; }
.page-hero.light h1, .page-hero.light .lead { color: inherit; }
.page-hero.light h1 { color: var(--brand-deep); }
@media (max-width: 899px) {
  .hero-img { animation: none; inset: 0; }
  .hero-img::after { background: rgba(255, 255, 255, 0.86); }
  .hero { min-height: 0; }
  .page-hero { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .hero-img { animation: none; } }

/* v22: primary buttons inside heroes (search, hero CTAs) read white on blue, like the Shop online button */
.hero .btn-light, .page-hero .btn-light, .shop-search .btn, .cta-band .btn-light { color: #fff !important; }
.hero .btn-light:hover, .shop-search .btn:hover { color: #fff !important; }
/* the CTA band is already blue: its primary button stays white with navy text */
.cta-band .btn-light { background: #fff; color: var(--brand-deep) !important; }
.cta-band .btn-light:hover { background: var(--brand-soft); color: var(--brand-deep) !important; }

/* v23: static contact cards in place of forms */
.contact-static .btn-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.75rem; }
.contact-static .btn svg { width: 1rem; height: 1rem; }
/* sales and technical support side by side with equal weight */
.contact-lines { display: grid; gap: 1.25rem; margin-top: 1rem; }
.contact-line h3 { font-size: 1rem; margin: 0; }
.contact-line .btn-row { margin-top: 0.5rem; }

/* v24: hero graphic softer, shifted right, with a more visible (still gentle) drift. Opacity and transform only: compositor-cheap. */
.hero-img { inset: -5% -9% -5% 0; opacity: 0.6; }
.hero-img::after { background: linear-gradient(90deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.52) 40%, rgba(255, 255, 255, 0.14) 70%, rgba(255, 255, 255, 0) 100%); }
@media (max-width: 899px) { .hero-img { inset: 0; opacity: 0.5; } }

/* v25: a little further right */
.hero-img { inset: -5% -16% -5% 0; transform-origin: 74% 50%; }
@media (max-width: 899px) { .hero-img { inset: 0; } }


/* ==========================================================================
   v30: light through the lattice. The sweep layer sits inside the image layer and is masked by the image itself:
   a solid layer XOR the graphic's luminance leaves only the head's lines, so the passing band of light shows
   only where there are lines. Transform-only motion; the head never moves.
   ========================================================================== */
.hero-img { overflow: hidden; }
.hero-sweep { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 0 0), var(--hero-img); -webkit-mask-size: cover, cover; -webkit-mask-position: right center, right center; -webkit-mask-repeat: no-repeat, no-repeat; -webkit-mask-composite: xor;
  mask-image: linear-gradient(#000 0 0), var(--hero-img); mask-size: cover, cover; mask-position: right center, right center; mask-repeat: no-repeat, no-repeat; mask-mode: alpha, luminance; mask-composite: exclude; }
.hero-sweep i { position: absolute; top: -20%; bottom: -20%; left: -60%; width: 34%; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(236, 250, 255, 0.55) 35%, rgba(255, 255, 255, 0.95) 50%, rgba(236, 250, 255, 0.55) 65%, rgba(255, 255, 255, 0) 100%); transform: skewX(-16deg) translate3d(0, 0, 0); will-change: transform; animation: lattice-sweep 21s ease-in-out infinite; }
@keyframes lattice-sweep { 0% { transform: skewX(-16deg) translate3d(0, 0, 0); } 55% { transform: skewX(-16deg) translate3d(480%, 0, 0); } 100% { transform: skewX(-16deg) translate3d(480%, 0, 0); } }
.hero-img::after { z-index: 2; }
@media (max-width: 899px) { .hero-sweep { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-sweep { display: none; } }


/* ==========================================================================
   v32/v34: header: magnifier opens the search dialog; one filled button; 'Open an account' as a text link
   ========================================================================== */
.header-tools { display: flex; align-items: center; gap: 0.5rem; margin-left: 0.5rem; }
.search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-s); border: 1px solid transparent; background: transparent; color: var(--text); cursor: pointer; transition: background 0.15s, color 0.15s; }
.search-toggle svg { width: 1.15rem; height: 1.15rem; }
.search-toggle:hover, .search-toggle[aria-expanded="true"] { background: var(--surface-2); color: var(--brand); }
.header-cta { margin-left: 0.25rem; }
.link-account { font-size: 0.9rem; font-weight: 600; color: var(--text); padding: 0.45rem 0.6rem; border-radius: var(--radius-s); white-space: nowrap; }
.link-account:hover { color: var(--brand); background: var(--surface-2); }
.brand-text { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1259px) { .link-account { display: none; } }
@media (max-width: 1023px) {
  .search-toggle { display: none; }
  .header-tools { display: block; margin: 0; }
  .search-toggle-m { display: inline-flex; margin-left: auto; }
  .nav-toggle { margin-left: 0.25rem; }
  .header-cta { display: grid; gap: 0.6rem; margin: 1rem 0 0; }
  .link-account { display: block; text-align: center; border: 1px solid var(--line); background: #fff; padding: 0.7rem 1rem; }
}

/* ==========================================================================
   v36a: search flyout under the header bar
   ========================================================================== */
.search-toggle-m { display: none; }
.search-panel { position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 99; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 1.5rem 3rem -1.5rem rgba(11, 37, 69, 0.35); padding: 1rem 0 1.1rem; animation: drop-in 0.22s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.search-panel[hidden] { display: none; }
.search-backdrop { position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: 98; background: rgba(11, 37, 69, 0.28); animation: fade-in 0.18s ease both; }
.search-backdrop[hidden] { display: none; }
.search-panel__row { display: flex; align-items: center; gap: 0.6rem; }
.search-panel .shop-search { flex: 1; max-width: none; }
.search-panel .shop-search input { height: 3.4rem; font-size: 1.05rem; padding-right: 8.5rem; }
.search-panel__close { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.search-panel__close:hover { color: var(--text); border-color: var(--line-strong); }
.search-panel__close svg { width: 1rem; height: 1rem; }
.search-toggle[aria-expanded="true"] { background: var(--surface-2); color: var(--brand); }
@keyframes drop-in { from { opacity: 0; transform: translateY(-0.5rem); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .search-panel, .search-backdrop { animation: none; } }

/* ==========================================================================
   v36b: mobile design layer (phones and small tablets)
   ========================================================================== */
.nav-toggle .ico-close { display: none; }
.nav-toggle[aria-expanded="true"] .ico-menu { display: none; }
.nav-toggle[aria-expanded="true"] .ico-close { display: block; }
.mobile-bar { display: none; }
@media (max-width: 1023px) {
  :root { --header-h: 3.75rem; }
  .brand img { height: 2.25rem; }
  .search-toggle-m { display: inline-flex; margin-left: auto; }
  .nav-toggle { margin-left: 0.25rem; }
  .nav-toggle, .search-toggle-m { width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); background: #fff; border-radius: var(--radius-s); }
  /* the menu is a full-height sheet: links scroll, the shop actions stay pinned at the bottom */
  .nav.open { display: flex; flex-direction: column; padding: 0; }
  .nav > ul { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0.25rem var(--gutter) 1rem; }
  .nav-item { border-bottom: 1px solid var(--line); }
  .nav-link { padding: 1.05rem 0.25rem; font-size: 1.08rem; font-weight: 600; }
  .dropdown a { padding: 0.65rem 0.25rem; font-size: 0.98rem; }
  .nav .header-tools { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; padding: 0.9rem var(--gutter) calc(0.9rem + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -0.75rem 1.5rem -1rem rgba(11, 37, 69, 0.25); margin: 0; }
  .nav .header-cta { display: contents; }
  .nav .link-account { display: inline-flex; align-items: center; justify-content: center; text-align: center; border: 1px solid var(--line); background: #fff; padding: 0.8rem 1rem; margin: 0; border-radius: var(--radius); font-size: 0.95rem; }
  .nav .header-cta .btn { justify-content: center; padding: 0.8rem 1rem; font-size: 0.95rem; }
  /* search flyout on phones */
  .search-panel { padding: 0.75rem 0 0.9rem; }
  .search-panel .shop-search input { height: 3.1rem; font-size: 1rem; padding-right: 7.25rem; }
}
@media (max-width: 899px) {
  /* home hero: the graphic becomes a band above the copy instead of a washed-out backdrop */
  .hero-classic { padding-top: 0; }
  .hero-classic .hero-img { position: relative; inset: auto; height: 12.5rem; opacity: 1; background-position: 82% center; }
  .hero-classic .hero-img::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 45%, #f3f4f6 100%); }
  .hero-classic .hero-grid { padding-top: 1.25rem; }
  .hero-classic h1 { font-size: clamp(2rem, 9.5vw, 2.6rem); }
  .hero-classic .strap { display: grid; gap: 0.2rem; font-size: 1rem; }
  .hero-classic .strap span + span::before { content: none; }
  .hero-classic .strap span::before { content: ""; display: inline-block; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--efl-red); margin-right: 0.55rem; vertical-align: 0.1rem; }
  .hero-classic .hero-logos { padding-top: 0.9rem; padding-bottom: 1rem; }
  /* inner-page heroes: compact */
  .page-hero .container { padding-block: 1.75rem 1.5rem; }
  .page-hero h1 { font-size: clamp(1.7rem, 7.5vw, 2.2rem); }
  .page-hero .lead { font-size: 1rem; }
  .breadcrumb { font-size: 0.78rem; }
  /* sections */
  .section { padding-block: 2.25rem; }
  .section-tight { padding-block: 1.75rem; }
  .section-head { margin-bottom: 1.1rem; }
  .grid { gap: 0.85rem; }
  /* the service-provider strip and the showcase captions */
  .sp-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 0.75rem; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 0.5rem; }
  .sp-strip::-webkit-scrollbar { display: none; }
  .sp-step { flex: 0 0 76%; scroll-snap-align: start; }
  .showcase .section-head { margin-bottom: 0.75rem; }
  /* footer: two columns of links from 480px, tighter */
  .footer-top { gap: 1.5rem 1.25rem; padding-block: 2rem; }
  .site-footer h4 { margin-bottom: 0.6rem; }
}
@media (min-width: 480px) and (max-width: 639px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand, .footer-contact-col { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  /* feature cards become icon-left rows: half the height, easier to scan */
  .card.feature { display: grid; grid-template-columns: 2.5rem 1fr; column-gap: 0.9rem; row-gap: 0.2rem; padding: 1rem 1.05rem; align-items: start; }
  .card.feature .icon { width: 2.5rem; height: 2.5rem; margin: 0; grid-row: 1 / span 3; }
  .card.feature .icon svg { width: 1.3rem; height: 1.3rem; }
  .card.feature h3 { grid-column: 2; font-size: 1.02rem; margin: 0.15rem 0 0.1rem; }
  .card.feature p { grid-column: 2; font-size: 0.92rem; }
  .card.feature .proof { grid-column: 2; margin-top: 0.5rem !important; padding-top: 0.5rem !important; }
  /* bottom action bar */
  body { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
  .mobile-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(0.5rem); backdrop-filter: blur(0.5rem); border-top: 1px solid var(--line); }
  .mobile-bar .btn { justify-content: center; padding: 0.75rem 0.5rem; font-size: 0.92rem; box-shadow: none; }
  .mobile-bar .btn .ico { width: 1rem; height: 1rem; }
  body.nav-open .mobile-bar, body.search-open .mobile-bar { display: none; }
  .site-footer { padding-bottom: 0.5rem; }
  .cta-band { padding: 1.5rem 1.25rem; border-radius: var(--radius); }
  .cta-band h2 { font-size: 1.35rem; }
}

/* ==========================================================================
   v37: audience path cards in the hero
   ========================================================================== */
.hero-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1.5rem; }
.hero-paths .path { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.85rem; padding: 0.9rem 1rem; border-radius: var(--radius-l); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-s); color: var(--text); white-space: normal; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.hero-paths .path:hover { transform: translateY(-2px); border-color: rgba(0, 85, 143, 0.45); box-shadow: var(--shadow-l); background: #fff; color: var(--text); }
.hero-paths .path svg { margin-left: 0; }
.hero-paths .path-ico { width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex: 0 0 auto; }
.hero-paths .path-ico svg { width: 1.25rem; height: 1.25rem; }
.hero-paths .path-body { display: grid; gap: 0.12rem; min-width: 0; }
.hero-paths .path .k { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--efl-blue); }
.hero-paths .path strong { font-size: 1rem; line-height: 1.2; color: var(--brand-ink); }
.hero-paths .path small { font-size: 0.82rem; color: var(--muted); line-height: 1.3; }
.hero-paths .path-arrow { width: 1.1rem; height: 1.1rem; color: var(--brand); transition: transform 0.15s ease; }
.hero-paths .path:hover .path-arrow { transform: translateX(3px); }
@media (max-width: 560px) { .hero-paths { grid-template-columns: 1fr; gap: 0.6rem; } .hero-paths .path { padding: 0.8rem 0.9rem; } }

/* ==========================================================================
   v38: fixed column counts. The auto-fit grids let a "three-column" grid become four or five columns on wide
   screens, so six cards landed as four plus two. Each grid class now means what it says, stepping down on
   smaller screens.
   ========================================================================== */
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vendor-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1199px) and (min-width: 900px) { .sp-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1099px) { .grid-4, .vendor-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .grid-2, .grid-3, .grid-4, .vendor-row { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   v39: designer pass
   ========================================================================== */
/* trust bar under the home hero, with the live dispatch clock */
.trust-bar { background: #fff; border-bottom: 1px solid var(--line); }
.trust-bar ul { list-style: none; margin: 0; padding: 0.9rem 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.trust-bar li { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.trust-bar .t-ico { flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 0.625rem; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; }
.trust-bar .t-ico svg { width: 1.1rem; height: 1.1rem; }
.trust-bar .t-body { display: grid; gap: 0.05rem; min-width: 0; }
.trust-bar strong { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -0.01em; color: var(--brand-ink); font-variant-numeric: tabular-nums; }
.trust-bar span span { font-size: 0.8rem; color: var(--muted); line-height: 1.3; }
.trust-bar .dispatch .t-ico { background: #fff7e6; color: #b45309; }
.trust-bar .dispatch strong { color: #b45309; }
@media (max-width: 1099px) { .trust-bar ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .trust-bar ul { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; padding: 0.75rem 0; } .trust-bar li:not(.dispatch) { display: none; } }
/* endings: the phone line */
.cta-band .cta-phone { grid-column: 1 / -1; margin: 0.25rem 0 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); }
.cta-band .cta-phone a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 0.15rem; }
/* vendor pages borrow the vendor's colour */
.vendor-page .page-hero { background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--vendor) 9%, #ffffff) 100%); }
.vendor-page .page-hero .eyebrow { color: var(--vendor); }
.vendor-page .page-hero .eyebrow::before, .vendor-page .eyebrow::before { background: var(--vendor); }
.vendor-page .eyebrow { color: var(--vendor); }
.vendor-page .feature .icon, .vendor-page .pillar .icon { background: color-mix(in srgb, var(--vendor) 12%, #ffffff); color: var(--vendor); }
.vendor-page a.card:hover, .vendor-page .card.hoverable:hover { border-color: color-mix(in srgb, var(--vendor) 50%, transparent); }
.vendor-page .shop-panel .btn-primary, .vendor-page .btn-light { background: var(--vendor); }
.vendor-page .shop-panel .btn-primary:hover, .vendor-page .btn-light:hover { background: color-mix(in srgb, var(--vendor) 85%, #000); }
.vendor-page .hero-logo { background: #fff; padding: 0.5rem 0.75rem; border-radius: var(--radius-s); border: 1px solid var(--line); height: 3.5rem; width: auto; margin-bottom: 1rem; }
/* photo strips (render only when photos exist) */
.photo-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.photo-strip figure { margin: 0; border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.photo-strip img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.photo-strip figcaption { padding: 0.6rem 0.9rem; font-size: 0.82rem; color: var(--muted); }
@media (max-width: 899px) { .photo-strip { grid-template-columns: minmax(0, 1fr); } }
/* mobile first screen: a tighter band and the logos after a scroll */
@media (max-width: 899px) { .hero-classic .hero-img { height: 9rem; } .hero-classic .hero-grid { padding-top: 1rem; padding-bottom: 1rem; } .hero-classic .lead { font-size: 0.98rem; margin-bottom: 0.25rem; } .hero-classic .hero-logos { padding-top: 1rem; } }

/* v40: mobile header must not blur. A backdrop-filter makes the header the containing block for the fixed menu panel,
   which puts the menu off-screen; the base stylesheet already disabled it on phones and the theme rule re-enabled it. */
@media (max-width: 1023px) { .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; } .nav.open { display: flex; } }

/* ==========================================================================
   v41: explicit search-toggle visibility, logo marquee
   ========================================================================== */
@media (min-width: 1024px) { .search-toggle-m { display: none !important; } }
@media (max-width: 1023px) { .nav .search-toggle { display: none !important; } .search-toggle-m { display: inline-flex !important; } }
/* vendor logos roll right to left; two copies of the row make the loop seamless */
.hero-logos--marquee { flex-wrap: nowrap; overflow: visible; }
.hero-logos--marquee .label { flex: 0 0 auto; margin-right: 1rem; }
.logo-marquee { flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.logo-track { display: flex; width: max-content; will-change: transform; animation: logo-roll 44s linear infinite; }
.logo-marquee:hover .logo-track, .logo-marquee:focus-within .logo-track { animation-play-state: paused; }
.logo-track a { flex: 0 0 auto; width: 9.375rem; max-width: none; margin-right: 0.6rem; }
@keyframes logo-roll { to { transform: translate3d(-50%, 0, 0); } }
@media (max-width: 899px) { .hero-logos--marquee { flex-wrap: wrap; overflow: hidden; margin-inline: 0; padding-inline: 0; } .hero-logos--marquee .label { flex: 0 0 100%; margin: 0 0 0.5rem; } .logo-track { animation-duration: 30s; } .logo-track a { width: 7rem; } }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } }

/* v42: vendor logos trimmed to their ink at build time; size them for equal visual weight in the tiles */
.hero-logos img { max-height: 2.35rem; max-width: 7.25rem; }
.logo-track a { width: 9.75rem; height: 3.6rem; padding: 0.45rem 0.9rem; }
@media (max-width: 899px) { .logo-track a { width: 7.5rem; height: 3.1rem; } .hero-logos img { max-height: 2rem; max-width: 5.75rem; } }

/* v43: a touch more air between the logo mark and the brand text */
.brand { gap: 1.1rem; }

/* ==========================================================================
   v44: page transitions and reveal choreography
   Cross-document view transitions (Chrome/Edge 126+, Safari 18.2+; others simply navigate): the header and the
   phone action bar stay put while the page content fades and slides. Sections and cards rise in as they enter the
   viewport (classes added by script only, so nothing is hidden without JavaScript).
   ========================================================================== */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
.mobile-bar { view-transition-name: mobile-bar; }
::view-transition-old(root) { animation: vt-out 160ms ease-out both; }
::view-transition-new(root) { animation: vt-in 340ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
::view-transition-old(site-header), ::view-transition-new(site-header), ::view-transition-old(mobile-bar), ::view-transition-new(mobile-bar) { animation: none; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-0.4rem); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(0.9rem); } }
.rv { opacity: 0; transform: translateY(0.9rem); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 70ms); will-change: opacity, transform; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .rv { opacity: 1; transform: none; transition: none; }
}

/* v45: air between the two lines of the brand text */
.brand-text { line-height: 1.2; }
.brand-text small { margin-top: 0.22rem; }

/* v46/v47: hero shader (landing page): threads of light and ember fly-aways over the graphic, at full strength,
   masked out under the copy on the left */
.hero-classic > .hero-shader { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.6) 36%, #000 56%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.6) 36%, #000 56%); }
@media (max-width: 899px) { .hero-classic > .hero-shader { display: none; } }

/* v48: the strapline words take the head graphic's colours and drift slowly between them, each word a third of a cycle apart */
.hero-classic .strap span { color: #e9457a; animation: strap-hue 13s ease-in-out infinite; }
.hero-classic .strap span:nth-child(2) { animation-duration: 17s; animation-delay: -5.3s; }
.hero-classic .strap span:nth-child(3) { animation-duration: 11s; animation-delay: -8.1s; }
@keyframes strap-hue { 0%, 26% { color: #e9457a; text-shadow: 0 0 0 rgba(233, 69, 122, 0); } 30% { text-shadow: 0 0 0.6rem rgba(139, 79, 179, 0.45); } 34%, 59% { color: #8b4fb3; text-shadow: 0 0 0 rgba(139, 79, 179, 0); } 63% { text-shadow: 0 0 0.6rem rgba(47, 191, 216, 0.45); } 67%, 92% { color: #2fbfd8; text-shadow: 0 0 0 rgba(47, 191, 216, 0); } 96% { text-shadow: 0 0 0.6rem rgba(233, 69, 122, 0.45); } 100% { color: #e9457a; } }
@media (prefers-reduced-motion: reduce) { .hero-classic .strap span { animation: none; } .hero-classic .strap span:nth-child(2) { color: #8b4fb3; } .hero-classic .strap span:nth-child(3) { color: #2fbfd8; } }

/* v49: teletype strapline: a blinking caret on the slot being typed; the line keeps its height while words change */
.hero-classic .strap { min-height: 1.6em; }
.hero-classic .strap span.typing .tt::after { content: ""; display: inline-block; width: 2px; height: 0.95em; margin-left: 0.12em; vertical-align: -0.1em; background: currentColor; animation: caret 0.8s steps(2, start) infinite; }
@keyframes caret { to { visibility: hidden; } }

/* v50: fixed slot widths so the strapline never shifts while words type; each word pulses on its own clock */
.hero-classic .strap span { display: inline-flex; align-items: baseline; white-space: nowrap; }
.hero-classic .strap .tt { display: inline-block; text-align: left; }

/* v51: one line, never wrapping; each word on its own clock AND its own colour order, so they never move together */
.hero-classic .strap { flex-wrap: nowrap; white-space: nowrap; width: max-content; max-width: none; font-size: clamp(1rem, 1.3vw, 1.15rem); }
.hero-classic .strap > span { animation: strap-a 13.7s ease-in-out infinite; }
.hero-classic .strap > span:nth-child(2) { animation: strap-b 19.1s ease-in-out infinite; animation-delay: -6.2s; }
.hero-classic .strap > span:nth-child(3) { animation: strap-c 9.7s ease-in-out infinite; animation-delay: -3.9s; }
@keyframes strap-a { 0%, 26% { color: #e9457a; text-shadow: 0 0 0 rgba(233, 69, 122, 0); } 30% { text-shadow: 0 0 0.6rem rgba(139, 79, 179, 0.45); } 34%, 59% { color: #8b4fb3; text-shadow: 0 0 0 rgba(139, 79, 179, 0); } 63% { text-shadow: 0 0 0.6rem rgba(47, 191, 216, 0.45); } 67%, 92% { color: #2fbfd8; text-shadow: 0 0 0 rgba(47, 191, 216, 0); } 96% { text-shadow: 0 0 0.6rem rgba(233, 69, 122, 0.45); } 100% { color: #e9457a; } }
@keyframes strap-b { 0%, 26% { color: #8b4fb3; text-shadow: 0 0 0 rgba(139, 79, 179, 0); } 30% { text-shadow: 0 0 0.6rem rgba(47, 191, 216, 0.45); } 34%, 59% { color: #2fbfd8; text-shadow: 0 0 0 rgba(47, 191, 216, 0); } 63% { text-shadow: 0 0 0.6rem rgba(233, 69, 122, 0.45); } 67%, 92% { color: #e9457a; text-shadow: 0 0 0 rgba(233, 69, 122, 0); } 96% { text-shadow: 0 0 0.6rem rgba(139, 79, 179, 0.45); } 100% { color: #8b4fb3; } }
@keyframes strap-c { 0%, 26% { color: #2fbfd8; text-shadow: 0 0 0 rgba(47, 191, 216, 0); } 30% { text-shadow: 0 0 0.6rem rgba(233, 69, 122, 0.45); } 34%, 59% { color: #e9457a; text-shadow: 0 0 0 rgba(233, 69, 122, 0); } 63% { text-shadow: 0 0 0.6rem rgba(139, 79, 179, 0.45); } 67%, 92% { color: #8b4fb3; text-shadow: 0 0 0 rgba(139, 79, 179, 0); } 96% { text-shadow: 0 0 0.6rem rgba(47, 191, 216, 0.45); } 100% { color: #2fbfd8; } }
@media (max-width: 899px) { .hero-classic .strap { white-space: normal; width: auto; max-width: 100%; } }
@media (prefers-reduced-motion: reduce) { .hero-classic .strap span, .hero-classic .strap span:nth-child(2), .hero-classic .strap span:nth-child(3) { animation: none; } }

/* v52: the colour animation belongs to the three words only; the inner teletype span was matching the same rule and
   overriding them with one shared animation, which is why all three pulsed the same colour together */
.hero-classic .strap .tt { animation: none !important; color: inherit; text-shadow: inherit; }

/* v53: the logo marquee stops and fades at the container's right edge, like everything else on the page */
.hero-logos--marquee { overflow: hidden; }
.hero-logos--marquee .logo-marquee { flex: 1 1 0%; min-width: 0; max-width: 100%; width: auto; }

/* v54: colour changes once per word, when it is typed, and never mid-display; no glow */
.hero-classic .strap > span, .hero-classic .strap > span:nth-child(2), .hero-classic .strap > span:nth-child(3) { animation: none !important; text-shadow: none !important; transition: color 0.45s ease; }
.hero-classic .strap > span:nth-child(1) { color: #e9457a; }
.hero-classic .strap > span:nth-child(2) { color: #8b4fb3; }
.hero-classic .strap > span:nth-child(3) { color: #2fbfd8; }
.hero-classic .strap .tt { text-shadow: none !important; }

/* ==========================================================================
   v55: pillars and editorial list. No boxes, no icon squares: typography, hairlines, numerals, one proof chip.
   ========================================================================== */
.pillars-section .section-head { margin-bottom: 1.5rem; }
.pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 3rem; }
.pillar-item { position: relative; padding-top: 1.35rem; }
.pillar-item::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--hue) 0%, color-mix(in srgb, var(--hue) 35%, transparent) 55%, transparent 100%); }
.pillar-num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--efl-blue); }
.pillar-item h3 { font-size: 1.45rem; letter-spacing: -0.015em; margin: 0.55rem 0 0.5rem; color: var(--brand-ink); }
.pillar-item p { margin: 0 0 0.9rem; color: var(--text-2); font-size: 0.98rem; line-height: 1.55; }
.pillar-item a { font-weight: 600; color: var(--brand); }
.pillar-item a span { display: inline-block; transition: transform 0.15s ease; }
.pillar-item a:hover span { transform: translateX(3px); }
.apart { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4rem; }
.apart-row { position: relative; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; column-gap: 1rem; align-items: start; padding: 1.35rem 0 1.4rem; border-top: 1px solid var(--line); }
.apart-row:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
.apart-row::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: linear-gradient(90deg, #e9457a, #8b4fb3, #2fbfd8); transition: width 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.apart-row:hover::before { width: 100%; }
.apart-num { font-family: var(--font-display); font-weight: 800; font-size: 1.55rem; line-height: 1; letter-spacing: -0.02em; color: var(--efl-blue); padding-top: 0.1rem; font-variant-numeric: tabular-nums; }
.apart-body h3 { font-size: 1.12rem; margin: 0 0 0.3rem; color: var(--brand-ink); }
.apart-body p { margin: 0; color: var(--text-2); font-size: 0.95rem; line-height: 1.55; }
.apart-proof { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--efl-blue); background: var(--brand-soft); border: 1px solid rgba(0, 85, 143, 0.2); padding: 0.35rem 0.6rem; border-radius: 999px; white-space: nowrap; margin-top: 0.2rem; }
@media (max-width: 1099px) { .apart { grid-template-columns: minmax(0, 1fr); } .apart-row:nth-last-child(-n+2) { border-bottom: 0; } .apart-row:last-child { border-bottom: 1px solid var(--line); } }
@media (max-width: 899px) { .pillars { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; } }
@media (max-width: 640px) { .apart-row { grid-template-columns: 2.5rem minmax(0, 1fr); } .apart-proof { grid-column: 2; justify-self: start; margin-top: 0.6rem; } .apart-num { font-size: 1.3rem; } }

/* ==========================================================================
   v56: editorial news, the hero treatment on every page, palette hairlines on feature cards site-wide
   ========================================================================== */
/* shader canvas placement for every hero */
.hero > .hero-shader, .page-hero > .hero-shader { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.6) 36%, #000 56%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.6) 36%, #000 56%); }
@media (max-width: 899px) { .hero > .hero-shader, .page-hero > .hero-shader { display: none; } }
/* editorial news */
.news-editorial { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2.5rem 3.5rem; align-items: start; }
.news-kicker, .news-meta { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--efl-blue); }
.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li a { position: relative; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; column-gap: 0.9rem; align-items: start; padding: 1.1rem 0; border-top: 1px solid var(--line); color: var(--text); }
.news-list li:last-child a { border-bottom: 1px solid var(--line); }
.news-list li a::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: linear-gradient(90deg, #e9457a, #8b4fb3, #2fbfd8); transition: width 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.news-list li a:hover::before { width: 100%; }
.news-num { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; line-height: 1.1; color: var(--efl-blue); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.news-body { display: grid; gap: 0.25rem; }
.news-body strong { font-size: 1rem; line-height: 1.3; color: var(--brand-ink); }
.news-arrow { color: var(--brand); font-weight: 600; transition: transform 0.15s ease; padding-top: 0.1rem; }
.news-list li a:hover .news-arrow { transform: translateX(3px); }
@media (max-width: 899px) { .news-editorial { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } }
/* feature and pillar cards everywhere: palette hairline, inline icon, no icon square */
.card.feature, .card.pillar { position: relative; overflow: hidden; --hue: #e9457a; }
.card.feature::before, .card.pillar::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--hue) 0%, color-mix(in srgb, var(--hue) 35%, transparent) 60%, transparent 100%); }
.grid > .card.feature:nth-child(3n+2), .grid > .card.pillar:nth-child(3n+2) { --hue: #8b4fb3; }
.grid > .card.feature:nth-child(3n+3), .grid > .card.pillar:nth-child(3n+3) { --hue: #2fbfd8; }
.grid-4 > .card.feature:nth-child(4n+4), .grid-4 > .card.pillar:nth-child(4n+4) { --hue: var(--efl-blue); }
.vendor-page .card.feature, .vendor-page .card.pillar { --hue: var(--vendor) !important; }
.card.feature .icon, .card.pillar .icon { width: auto; height: auto; background: transparent !important; color: var(--efl-blue); margin-bottom: 0.55rem; display: inline-flex; border-radius: 0; }
.card.feature .icon svg, .card.pillar .icon svg { width: 1.35rem; height: 1.35rem; }
.vendor-page .card.feature .icon, .vendor-page .card.pillar .icon { color: var(--vendor); }
.card.feature h3, .card.pillar h3 { letter-spacing: -0.01em; }
@media (max-width: 640px) { .card.feature .icon, .card.pillar .icon { grid-row: 1; margin: 0.15rem 0 0; } }

/* ==========================================================================
   v57: buttons, links and hover states on the EFL palette. The brand token moves from the shop's blue-600 to
   EFL blue, so every button, link, eyebrow, focus ring and hover border follows; vendor pages set the same
   tokens to the vendor's colour so everything on them follows that instead.
   ========================================================================== */
:root { --brand: #00558f; --brand-bright: #0e6bb4; --brand-deep: #003a66; --brand-soft: #e8f1fa; --brand-glow: rgba(0, 85, 143, 0.28); }
.btn-primary { background: var(--brand); border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.btn-light:hover { background: var(--brand-deep); }
.btn-secondary, .btn-ghost { background: #fff; color: var(--text); border-color: var(--line-strong); }
.btn-secondary:hover, .btn-ghost:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.btn-outline-light:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand) !important; }
a.card:hover, .card.hoverable:hover, .showcase-grid .showcase-item:hover, .sp-step:hover, .hero-logos a:hover, .logo-strip a:hover { border-color: rgba(0, 85, 143, 0.45); }
.hero-paths .path:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.hero-paths .path:hover strong { color: var(--brand); }
.filter-btn[aria-pressed="true"], .chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
:focus-visible { outline-color: var(--brand-bright); }
.showcase-dots button[aria-selected="true"], .apart-num, .news-num, .pillar-num, .apart-proof, .news-kicker, .news-meta { color: var(--efl-blue); }
.showcase-dots button[aria-selected="true"] { background: var(--efl-blue); }
.bento-tile.stat { background: linear-gradient(150deg, var(--brand-deep), var(--efl-blue) 55%, var(--brand-bright)); }
.cta-band { background: linear-gradient(135deg, var(--brand-deep), var(--efl-blue) 60%, var(--brand-bright)); }
.mobile-bar .btn-primary { background: var(--brand); }
/* vendor pages: the same tokens, in the vendor's colour */
.vendor-page { --brand: var(--vendor); --brand-bright: color-mix(in srgb, var(--vendor) 80%, #fff); --brand-deep: color-mix(in srgb, var(--vendor) 78%, #000); --brand-soft: color-mix(in srgb, var(--vendor) 10%, #fff); }
.vendor-page a.card:hover, .vendor-page .card.hoverable:hover { border-color: color-mix(in srgb, var(--vendor) 50%, transparent); }
.vendor-page .btn-primary, .vendor-page .btn-light, .vendor-page .shop-panel .btn-primary { background: var(--vendor); border-color: var(--vendor); }
.vendor-page .btn-primary:hover, .vendor-page .btn-light:hover, .vendor-page .shop-panel .btn-primary:hover { background: color-mix(in srgb, var(--vendor) 78%, #000); border-color: color-mix(in srgb, var(--vendor) 78%, #000); }
.vendor-page .cta-band { background: linear-gradient(135deg, color-mix(in srgb, var(--vendor) 70%, #000), var(--vendor) 60%, color-mix(in srgb, var(--vendor) 80%, #fff)); }

/* ==========================================================================
   v58: equal hero heights on every page; buttons and hover states in the head graphic's colours
   (vendor pages keep the vendor colour); tighter teletype spacing.
   ========================================================================== */
:root { --hero-h: 40rem; }
.hero, .page-hero { min-height: var(--hero-h); }
.page-hero .container { padding-block: clamp(2rem, 4vw, 3.5rem); }
@media (max-width: 899px) { .hero, .page-hero { min-height: 0; } }
/* primary buttons: a rose-violet gradient that slides to violet-cyan on hover */
.btn-primary, .btn-light, .mobile-bar .btn-primary, .search-panel .shop-search .btn {
  background-color: #8b4fb3; background-image: linear-gradient(120deg, #e9457a 0%, #8b4fb3 50%, #2fbfd8 100%); background-size: 220% 100%; background-position: 0% 50%;
  border-color: transparent; color: #fff !important; transition: background-position 0.5s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.btn-primary:hover, .btn-light:hover, .mobile-bar .btn-primary:hover, .search-panel .shop-search .btn:hover {
  background-color: #8b4fb3; background-image: linear-gradient(120deg, #e9457a 0%, #8b4fb3 50%, #2fbfd8 100%); background-size: 220% 100%; background-position: 100% 50%; border-color: transparent; }
/* secondary buttons: white with a violet edge that fills faintly on hover */
.btn-secondary, .btn-ghost, .btn-outline-light { background: #fff; border-color: rgba(139, 79, 179, 0.42); color: var(--brand-ink) !important; }
.btn-secondary:hover, .btn-ghost:hover, .btn-outline-light:hover { background: #faf6fd; border-color: #8b4fb3; color: #8b4fb3 !important; }
/* hover borders, focus, small interactions */
a.card:hover, .card.hoverable:hover, .showcase-grid .showcase-item:hover, .sp-step:hover, .hero-logos a:hover, .logo-strip a:hover, .banner:hover { border-color: rgba(139, 79, 179, 0.5); }
.hero-paths .path:hover { background: #faf6fd; border-color: #8b4fb3; color: var(--brand-ink); }
.hero-paths .path:hover .path-arrow, .pillar-item a:hover, .news-lead:hover .more, .news-list li a:hover .news-arrow { color: #8b4fb3; }
.search-toggle:hover, .search-toggle[aria-expanded="true"], .link-account:hover, .nav-link:hover, .nav-item.open > .nav-link { color: #8b4fb3; }
.dropdown a:hover { color: #8b4fb3; }
.filter-btn[aria-pressed="true"] { background-image: linear-gradient(120deg, #e9457a, #8b4fb3 55%, #2fbfd8); background-color: #8b4fb3; border-color: transparent; color: #fff; }
.showcase-dots button[aria-selected="true"] { background: linear-gradient(90deg, #e9457a, #2fbfd8); }
:focus-visible { outline-color: #8b4fb3; }
.banner-nav button:hover { border-color: #8b4fb3; color: #8b4fb3; }
/* vendor pages keep the vendor colour on buttons and hovers */
.vendor-page .btn-primary, .vendor-page .btn-light, .vendor-page .btn-primary:hover, .vendor-page .btn-light:hover { background-image: none; }
.vendor-page .btn-primary, .vendor-page .btn-light { background-color: var(--vendor); }
.vendor-page .btn-primary:hover, .vendor-page .btn-light:hover { background-color: color-mix(in srgb, var(--vendor) 78%, #000); }
.vendor-page .btn-secondary, .vendor-page .btn-ghost, .vendor-page .btn-outline-light { border-color: color-mix(in srgb, var(--vendor) 45%, transparent); }
.vendor-page .btn-secondary:hover, .vendor-page .btn-ghost:hover, .vendor-page .btn-outline-light:hover { border-color: var(--vendor); color: var(--vendor) !important; background: color-mix(in srgb, var(--vendor) 8%, #fff); }
.vendor-page a.card:hover, .vendor-page .card.hoverable:hover { border-color: color-mix(in srgb, var(--vendor) 50%, transparent); }
.vendor-page :focus-visible { outline-color: var(--vendor); }
/* teletype: tighter separators */
.hero-classic .strap > span + span::before { margin: 0 0.5rem; }

/* ==========================================================================
   v59: closing band, light and thematic. A white card with the head graphic faint on its right, a rose-violet-cyan
   hairline along the top, ink headline, gradient primary button. Vendor pages carry the vendor's colour instead.
   ========================================================================== */
.cta-band { position: relative; overflow: hidden; background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-m); padding: clamp(2rem, 5vw, 3.25rem); }
.cta-band::before { content: ""; position: absolute; inset: -6% -10% -6% 0; background: var(--hero-img) right center / cover no-repeat; opacity: 0.26; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 38%, #000 78%); mask-image: linear-gradient(90deg, transparent 38%, #000 78%); }
.cta-band::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #e9457a, #8b4fb3, #2fbfd8); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--brand-ink); font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.02em; margin: 0 0 0.5rem; }
.cta-band p { color: var(--text-2); margin: 0; max-width: 44rem; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cta-band .btn-light, .cta-band .btn-light:hover { color: #fff !important; }
.cta-band .btn-light { background-color: #8b4fb3; background-image: linear-gradient(120deg, #e9457a 0%, #8b4fb3 50%, #2fbfd8 100%); background-size: 220% 100%; background-position: 0% 50%; border-color: transparent; }
.cta-band .btn-light:hover { background-image: linear-gradient(120deg, #e9457a 0%, #8b4fb3 50%, #2fbfd8 100%); background-position: 100% 50%; }
.cta-band .btn-outline-light { background: #fff; border-color: rgba(139, 79, 179, 0.42); color: var(--brand-ink) !important; }
.cta-band .btn-outline-light:hover { background: #faf6fd; border-color: #8b4fb3; color: #8b4fb3 !important; }
.cta-band .cta-phone { color: var(--muted); font-size: 0.9rem; }
.cta-band .cta-phone a { color: var(--brand-ink); font-weight: 700; text-decoration: none; border-bottom: 2px solid #8b4fb3; padding-bottom: 1px; }
.cta-band .cta-phone a:hover { color: #8b4fb3; }
.vendor-page .cta-band { background: #fff; }
.vendor-page .cta-band::after { background: var(--vendor); }
.vendor-page .cta-band .btn-light, .vendor-page .cta-band .btn-light:hover { background-image: none; }
.vendor-page .cta-band .btn-light { background-color: var(--vendor); }
.vendor-page .cta-band .btn-light:hover { background-color: color-mix(in srgb, var(--vendor) 78%, #000); }
.vendor-page .cta-band .cta-phone a { border-bottom-color: var(--vendor); }
@media (max-width: 899px) { .cta-band::before { opacity: 0.16; -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 80%); mask-image: linear-gradient(90deg, transparent 20%, #000 80%); } }

/* ==========================================================================
   v60: headline shimmer. On the landing page the "Convergence at work" headline carries a band of the head's
   colours that sweeps left to right on the same 21-second clock as the light through the lattice, so the
   title and the graphic shimmer together. Ink the rest of the time.
   ========================================================================== */
.hero-classic h1 { background-image: linear-gradient(105deg, var(--brand-deep) 0%, var(--brand-deep) 42%, #e9457a 47%, #8b4fb3 51%, #2fbfd8 55%, var(--brand-deep) 60%, var(--brand-deep) 100%); background-size: 320% 100%; background-position: 100% 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: title-shimmer 21s ease-in-out infinite; }
.hero-classic h1 .w { color: inherit; -webkit-text-fill-color: inherit; }
@keyframes title-shimmer { 0% { background-position: 100% 0; } 55% { background-position: 0% 0; } 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .hero-classic h1 { animation: none; background: none; color: var(--brand-deep); -webkit-text-fill-color: var(--brand-deep); } }
@media (max-width: 899px) { .hero-classic h1 { animation: none; background: none; color: var(--brand-deep); -webkit-text-fill-color: var(--brand-deep); } }

/* ==========================================================================
   v61: marketing round 1. Logo lockup in the header, account button, Read more button,
   closing band buttons aligned to the last line with the image centred on the face.
   ========================================================================== */
.brand--lockup img { height: 2.9rem; width: auto; display: block; }
@media (max-width: 1023px) { .brand--lockup img { height: 2.1rem; } }
@media (min-width: 1024px) and (max-width: 1199px) { .btn-account { display: none; } }
.cta-band { align-items: end; }
.cta-band .actions { grid-row: 1 / span 2; align-self: end; }
.cta-band .cta-phone { grid-column: 1; margin-top: 0.75rem; }
.cta-band::before { background-position: right 42%; opacity: 0.3; }
@media (max-width: 799px) { .cta-band .actions { grid-row: auto; } .cta-band .cta-phone { grid-column: 1 / -1; } }

/* v62: the Open Account button in the site's blue, beside the gradient Shop online button */
.btn-account, .nav .btn-account { background: var(--efl-blue) !important; border-color: var(--efl-blue) !important; color: #fff !important; background-image: none !important; }
.btn-account:hover, .nav .btn-account:hover { background: var(--brand-deep) !important; border-color: var(--brand-deep) !important; color: #fff !important; }

/* v63: closing band per the PDF: buttons sit on the line of the phone number; the graphic shows the head from crown to mouth, centred on the face */
@media (min-width: 800px) {
  .cta-band { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text actions" "phone actions"; align-items: end; row-gap: 0.75rem; }
  .cta-band > div:first-child { grid-area: text; align-self: start; }
  .cta-band .actions { grid-area: actions; align-self: end; margin-bottom: 0.1rem; }
  .cta-band .cta-phone { grid-area: phone; margin: 0; align-self: end; }
}
.cta-band::before { background-size: auto 150%; background-position: right 12%; opacity: 0.32; -webkit-mask-image: linear-gradient(90deg, transparent 42%, #000 74%); mask-image: linear-gradient(90deg, transparent 42%, #000 74%); }

/* v64: footer hours readable on the blue */
.site-footer .muted, .site-footer small.muted { color: #cfe3f5; }

/* v65: the swoosh of the lockup was hanging past the container edge; nudge the logo in so the mark lines up with the copy below */
.brand--lockup { padding-left: 1.4rem; }
@media (max-width: 1023px) { .brand--lockup { padding-left: 0.5rem; } }

/* v66: logo split into mark and wordmark so the text can be larger than the one-piece lockup allowed */
.brand--lockup { display: inline-flex; align-items: center; gap: 0.55rem; padding-left: 1.1rem; }
.brand--lockup img { height: auto; }
.brand--lockup .mark { height: 3.2rem; width: auto; }
.brand--lockup .wordmark { height: 2.3rem; width: auto; margin-top: 0.1rem; }
@media (min-width: 1024px) and (max-width: 1359px) { .brand--lockup .mark { height: 2.6rem; } .brand--lockup .wordmark { height: 1.8rem; } }
@media (max-width: 1023px) { .brand--lockup { padding-left: 0.4rem; gap: 0.4rem; } .brand--lockup .mark { height: 2.3rem; } .brand--lockup .wordmark { height: 1.55rem; } }
@media (max-width: 420px) { .brand--lockup .wordmark { display: none; } }

/* ==========================================================================
   v67: marketing round 2. The logo loses its strapline and comes down in size,
   the hero ends on one button, and the head in the closing band rises to the mouth.
   ========================================================================== */
.brand--lockup { gap: 0.5rem; padding-left: 1rem; }
.brand--lockup .mark { height: 2.2rem; }
.brand--lockup .wordmark { height: 1rem; margin-top: 0.15rem; }
@media (min-width: 1024px) and (max-width: 1359px) { .brand--lockup .mark { height: 1.95rem; } .brand--lockup .wordmark { height: 0.88rem; } }
@media (max-width: 1023px) { .brand--lockup { padding-left: 0.4rem; gap: 0.4rem; } .brand--lockup .mark { height: 1.85rem; } .brand--lockup .wordmark { height: 0.82rem; } }
@media (max-width: 420px) { .brand--lockup .wordmark { display: none; } }

.hero-classic .hero-actions { margin-top: 1.5rem; }
.apart-body p a { color: var(--brand); text-decoration: underline; text-underline-offset: 0.15em; }
.apart-body p a:hover { color: #8b4fb3; }

.cta-band::before { background-position: right 30%; }

/* v68: phones. The head sits to the right of the headline instead of in a band above it: the box is cropped to the
   head (it fills the right ~40% of the 2560x1120 graphic, full height, so at auto 100% sizing a 0.92:1 box anchored
   right holds it whole). The strapline gets a dot per word in that word's colour; the old dot rule lost on
   specificity to "span + span::before { content: none }", which left the dot on the first word only. */
@media (max-width: 899px) {
  .hero-classic .hero-img { position: absolute; inset: 0 0 auto auto; width: min(11.5rem, 44vw); height: auto; aspect-ratio: 0.92; opacity: 1; background-size: auto 100%; background-position: right top; }
  .hero-classic .hero-img::after { background: linear-gradient(180deg, rgba(243, 244, 246, 0) 72%, #f3f4f6 100%); }
  .hero-classic .hero-grid { padding-top: 1.75rem; }
  .hero-classic h1 { font-size: clamp(1.85rem, 8.4vw, 2.6rem); max-width: calc(100% - min(11.5rem, 44vw) + 1.5rem); }
  .hero-classic .strap span::before, .hero-classic .strap span + span::before { content: ""; display: inline-block; flex: none; align-self: center; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; margin: 0 0.55rem 0 0; }
}

/* v69: phones. The graphic's white ground showed as a pale box on the grey hero: multiply drops the white into the
   page colour and a soft elliptical mask feathers the edges. The separator rule's "color: var(--line-strong)" was
   still on the 2nd/3rd dots, so currentColor painted them grey; they take the word's colour again. */
@media (max-width: 899px) {
  .hero-classic .hero-img { mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(ellipse 95% 85% at 62% 45%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 95% 85% at 62% 45%, #000 55%, transparent 100%); }
  .hero-classic .hero-img::after { content: none; }
  .hero-classic .strap span::before, .hero-classic .strap span + span::before { color: inherit; }
}

/* v70: phones get the embers on the home hero, in a band the height of the head box beside the headline, drifting in
   from the left towards the head; hero-shader.js reads the head's position from .hero-img and runs fewer embers here */
@media (max-width: 899px) {
  .hero-classic > .hero-shader { display: block; inset: 0 0 auto 0; height: min(12.5rem, 47.8vw); -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0.6) 40%, #000 60%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0.6) 40%, #000 60%); }
}

/* v71: 1024-1279px (e.g. a 1080 monitor in portrait): the full menu, the wordmark and the Shop button left no gap between
   the logo and "Products". Slightly smaller wordmark and tighter menu padding win back ~60px of breathing room. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .brand--lockup .mark { height: 1.8rem; }
  .brand--lockup .wordmark { height: 0.76rem; }
  .header-inner { gap: 1.75rem; }
  .nav { gap: 0.35rem; }
  .nav-link { padding-inline: 0.55rem; }
}

/* v72: the vendor strip lost its label and runs the full container width; the track holds four copies now, so the
   roll doubles in length and the duration doubles to keep the same speed */
.hero-logos--marquee .logo-marquee { flex: 1 1 100%; }
.logo-track { animation-duration: 88s; }
@media (max-width: 899px) { .logo-track { animation-duration: 60s; } }


/* v74: blog section after the marketing mock-up. Lead story = square image left (the shop's thumbnail is 160px, so it is
   held at 12rem, ~1.2x, to stay sharp), text right with a solid EFL-blue Read more button and the archive note under it;
   the next four posts sit below in two columns (02-03 left, 04-05 right). */
.news-feature { display: grid; grid-template-columns: 12rem minmax(0, 38rem); gap: 1.5rem 4rem; align-items: start; }
.news-feature .media { display: block; width: 12rem; aspect-ratio: 1; border-radius: var(--radius-l); overflow: hidden; background: #0b1b3a; box-shadow: var(--shadow-s); }
.news-feature .media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.news-feature .media:hover img { transform: scale(1.03); }
.news-feature .body { padding-top: 0.2rem; }
.news-feature h3 { font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.2; letter-spacing: -0.015em; margin: 0.55rem 0 0.6rem; }
.news-feature h3 a { color: var(--brand-ink); }
.news-feature h3 a:hover { color: #8b4fb3; }
.news-feature p { margin: 0 0 1.1rem; color: var(--text-2); }
.news-read { display: inline-flex; align-items: center; justify-content: center; min-width: 8.5rem; padding: 0.85rem 1.75rem; border-radius: var(--radius); background: var(--efl-blue); color: #fff !important; font-weight: 700; border: 0; box-shadow: var(--shadow-s); transition: background 0.2s ease, transform 0.15s ease; }
.news-read:hover { background: var(--brand-deep); transform: translateY(-1px); }
.news-feature .news-note { margin: 1rem 0 0; font-size: 0.85rem; color: var(--muted); }
.news-list--cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); grid-auto-flow: column; column-gap: 2.5rem; margin-top: 2.75rem; }
.news-list--cols li:nth-child(2n) a { border-bottom: 1px solid var(--line); }
@media (max-width: 899px) {
  .news-feature { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .news-feature .media { width: 10rem; }
  .news-list--cols { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; margin-top: 2rem; }
  .news-list--cols li:nth-child(2n) a { border-bottom: 0; }
  .news-list--cols li:last-child a { border-bottom: 1px solid var(--line); }
}

/* v75: new carousel artwork from marketing, one pair per vendor: 1600x600 (8:3) desktop and 800x600 (4:3) mobile,
   swapped by <picture> at 767px. Each slide is shown at its artwork's exact shape, so nothing is cropped. */
.showcase-item picture { display: block; }
.showcase-item img { aspect-ratio: 8 / 3; object-fit: cover; }
@media (max-width: 899px) { .showcase-item img { aspect-ratio: 8 / 3; } }
@media (max-width: 767px) { .showcase-item img { aspect-ratio: 4 / 3; } }

/* v76: WEEE statement. The producer registration number in the footer opens the statement in a native <dialog>.
   The dialog is fixed and centred in the viewport and the page behind is NOT scroll-locked, so it opens wherever the
   reader has scrolled to and stays in view if they keep scrolling; a statement taller than the screen scrolls inside. */
.weee-link { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: #fff; cursor: pointer; text-decoration: underline dotted rgba(255, 255, 255, 0.6); text-underline-offset: 0.2rem; transition: text-decoration-color 0.15s ease; }
.weee-link:hover, .weee-link:focus-visible { text-decoration: underline solid #fff; }
.weee-link:focus-visible { outline: 2px solid #fff; outline-offset: 0.2rem; border-radius: 0.2rem; }
.weee-dialog { position: fixed; inset: 0; margin: auto; padding: 0; border: 0; width: min(46rem, calc(100% - 2rem)); max-width: none; max-height: min(88vh, 56rem); max-height: min(88dvh, 56rem); overflow: hidden; background: var(--surface); color: var(--text); border-radius: 1rem; box-shadow: 0 1.75rem 4rem -1rem rgba(6, 28, 52, 0.5), 0 0 0 1px rgba(15, 23, 42, 0.06); }
.weee-dialog::backdrop { background: rgba(6, 28, 52, 0.55); backdrop-filter: blur(0.2rem); -webkit-backdrop-filter: blur(0.2rem); }
.weee-dialog[open] { animation: weee-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.weee-dialog[open]::backdrop { animation: fade-in 0.2s ease both; }
@keyframes weee-in { from { opacity: 0; transform: translateY(0.75rem) scale(0.98); } to { opacity: 1; transform: none; } }
.weee-modal { display: flex; flex-direction: column; max-height: min(88vh, 56rem); max-height: min(88dvh, 56rem); }
.weee-head { position: relative; flex: 0 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1.5rem 1.5rem 1.25rem; background: linear-gradient(135deg, var(--efl-navy), var(--brand-deep) 55%, var(--efl-blue)); color: #fff; }
.weee-head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0.25rem; background: linear-gradient(90deg, #e9457a, #8b4fb3, #2fbfd8); }
.weee-head__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-l); background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); color: #fff; }
.weee-head__icon svg { width: 1.4rem; height: 1.4rem; }
.weee-head h2 { margin: 0; font-size: clamp(1.2rem, 2.4vw, 1.5rem); line-height: 1.2; letter-spacing: -0.015em; color: #fff; }
.weee-close { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.weee-close:hover { background: rgba(255, 255, 255, 0.2); border-color: #fff; }
.weee-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.weee-close svg { width: 1rem; height: 1rem; }
.weee-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.5rem; font-size: 0.95rem; line-height: 1.65; color: var(--text-2); outline: 0; }
.weee-body p { margin: 0 0 0.9rem; }
.weee-intro { margin: 0 0 1.25rem !important; padding: 1rem 1.15rem; border-left: 0.25rem solid var(--efl-blue); border-radius: 0 var(--radius) var(--radius) 0; background: var(--brand-soft); font-size: 1rem; color: var(--brand-ink); }
.weee-cards { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.weee-cards li { position: relative; padding: 1.1rem 1.1rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-s); overflow: hidden; }
.weee-cards li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0.1875rem; background: #e9457a; }
.weee-cards li:nth-child(2)::before { background: #2fbfd8; }
.weee-num { display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.9rem; padding: 0 0.4rem; margin-bottom: 0.6rem; border-radius: var(--radius-s); background: var(--surface-2); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; font-weight: 700; color: var(--brand-ink); }
.weee-cards p { margin: 0; font-size: 0.9rem; line-height: 1.6; }
.weee-callout { margin-bottom: 1.25rem; padding: 1.1rem 1.15rem; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface-2); }
.weee-callout p { margin-bottom: 0.75rem; }
.weee-callout a { color: var(--efl-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 0.15rem; }
.weee-callout > p strong { color: var(--text); }
.weee-exclusions { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.weee-exclusions li { padding: 0.15rem 0 0.15rem 1rem; border-left: 0.1875rem solid var(--line-strong); }
.weee-callout ul { list-style: none; margin: 0; padding: 0; }
.weee-callout li { position: relative; padding-left: 1.1rem; }
.weee-callout li::before { content: ""; position: absolute; left: 0.15rem; top: 0.65em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #8b4fb3; }
.weee-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 1rem; padding: 0.9rem 1.5rem; border-top: 1px solid var(--line); background: var(--bg); font-size: 0.82rem; color: var(--muted); }
@media (max-width: 640px) {
  .weee-dialog { width: calc(100% - 1rem); max-height: 92vh; max-height: 92dvh; border-radius: 0.875rem; }
  .weee-modal { max-height: 92vh; max-height: 92dvh; }
  .weee-head { grid-template-columns: minmax(0, 1fr) auto; padding: 1.25rem 1.1rem 1.1rem; }
  .weee-head__icon { display: none; }
  .weee-body { padding: 1.15rem 1.1rem; }
  .weee-cards { grid-template-columns: minmax(0, 1fr); }
  .weee-foot { padding: 0.8rem 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { .weee-dialog[open], .weee-dialog[open]::backdrop { animation: none; } }