/* ============================================================
   Site stylesheet — structure only. Every color, font, radius, shadow and
   spacing value is a theme token: the active Brand & Theme preset (plus admin
   overrides) is emitted inline as :root{…} + @font-face by the layout
   (src/Theme.php; token list in src/themes/tokens.php). Every color token also
   has a derived "--name-rgb" triplet for rgba() compositions.
   Preset-specific structural treatments live in assets/css/themes/<preset>.css.
   History (Phase 1 migration):
   · Google Fonts @import replaced by self-hosted variable fonts
   · <image-slot> rules replaced by .media / .ph (real <img> rendering)
   · .reveal initial-hidden state gated on .js (no-JS fallback)
   · slider timing driven by --slide-dur (JS reads the same value)
   · B2B page styles folded in from b2b.html (bottom of file)
   ============================================================ */

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px); }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:var(--fs-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ---------- type ---------- */
h1,h2,h3,h4{ font-family:var(--display); font-weight:var(--fw-heading); margin:0; line-height:1.05; letter-spacing:var(--tracking-heading); }
h1{ font-size:var(--fs-h1); line-height:1.04; letter-spacing:var(--tracking-h1); }
h2{ font-size:var(--fs-h2); line-height:1.08; }
h3{ font-size:var(--fs-h3); font-weight:var(--fw-h3); letter-spacing:-.01em; }
p{ margin:0; }
.lead{ font-size:var(--fs-lead); line-height:1.55; color:var(--muted); }
.muted{ color:var(--muted); }
.accent{ color:var(--accent); }
.balance{ text-wrap:balance; }
.pretty{ text-wrap:pretty; }

.eyebrow{
  font-family:var(--label); font-size:var(--eyebrow-size); font-weight:var(--eyebrow-weight);
  letter-spacing:var(--eyebrow-tracking); text-transform:var(--eyebrow-transform); color:var(--accent);
  margin:0; display:inline-flex; align-items:center; gap:var(--eyebrow-gap);
}
.eyebrow::before{ content:""; width:var(--eyebrow-dash-w); height:var(--eyebrow-dash-h); background:var(--eyebrow-dash-color); }
.eyebrow.nobar::before{ display:none; }
.eyebrow.muted{ color:var(--faint); }
.eyebrow.light{ color:var(--accent-bright); }

/* ---------- layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad-x); }
section{ position:relative; }
.section{ padding-block:var(--section-y); }
.section.tight{ padding-block:var(--section-y-tight); }
.section.alt{ background:var(--bg-alt); --accent:var(--accent-on-alt); --faint:var(--faint-on-alt); }
.dark{ background:var(--panel); color:var(--text-on-dark); }
.dark .lead, .dark .muted{ color:var(--muted-on-dark); }
.dark h1,.dark h2,.dark h3{ color:var(--text-on-dark); }
.grid{ display:grid; gap:var(--grid-gap); }
.split{ grid-template-columns:1fr 1fr; align-items:center; }
@media (max-width:880px){ .split{ grid-template-columns:1fr; } }

.stack-sm > * + *{ margin-top:14px; }
.stack   > * + *{ margin-top:22px; }
.stack-lg> * + *{ margin-top:34px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family:var(--body); font-weight:var(--fw-body-strong); font-size:16px; letter-spacing:.01em;
  padding:15px 28px; border-radius:var(--radius-pill); border:1.6px solid transparent;
  transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn .arw{ transition:transform .2s ease; }
.btn:hover .arw{ transform:translateX(4px); }
.btn-primary{ background:var(--btn-bg); color:var(--btn-text); border-color:var(--btn-bg); }
.btn-primary:hover{ background:var(--btn-bg-hover); border-color:var(--btn-bg-hover); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.dark .btn-ghost{ color:var(--text-on-dark); border-color:var(--line-on-dark-2); }
.dark .btn-ghost:hover{ border-color:var(--text-on-dark); }
.btn-light{ background:var(--surface); color:var(--ink); border-color:var(--surface); }
.btn-light:hover{ transform:translateY(-2px); background:var(--bg-alt); border-color:var(--bg-alt); }

/* ---------- nav (dark header) ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:100;
  display:flex; align-items:center;
  background:rgba(var(--nav-bg-rgb),var(--nav-op,.72)); -webkit-backdrop-filter:blur(var(--nav-blur,16px)); backdrop-filter:blur(var(--nav-blur,16px));
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 2px 0 var(--nav-rule);
  transition:background .3s ease, border-color .3s ease, transform .32s cubic-bezier(.16,.84,.34,1), height .25s ease, box-shadow .3s ease;
}
.nav.scrolled{ background:rgba(var(--nav-bg-scrolled-rgb),var(--nav-op-scrolled,.94)); border-bottom-color:rgba(255,255,255,.12); }
.nav-inner{ max-width:var(--maxw); width:100%; margin:0 auto; padding-inline:var(--pad-x);
  display:flex; align-items:center; justify-content:space-between; gap:24px; }
/* Logos are sized by HEIGHT only (theme tokens per breakpoint) and never
   shrink: the global img{max-width:100%} would otherwise clamp the width of a
   squeezed flex item while the height stays fixed — a distorted logo. */
.nav-brand{ display:flex; align-items:center; flex-shrink:0; }
.nav-logo{ display:block; height:var(--logo-h); width:auto; max-width:none; object-fit:contain; flex-shrink:0; }
.nav-links{ display:flex; align-items:center; gap:var(--nav-gap,4px); list-style:none; margin:0; padding:0; }
.nav-links a{
  font-size:var(--nav-fs,15px); font-weight:var(--nav-fw,500); letter-spacing:var(--nav-tracking,normal); color:var(--nav-link); padding:9px 16px; border-radius:var(--radius-pill);
  transition:background .18s ease, color .18s ease; position:relative;
}
.nav-links a:hover{ background:rgba(255,255,255,.08); color:var(--nav-link-hover,var(--on-dark-strong)); }
.nav-links a.active{ color:var(--nav-active-text); background:rgba(var(--nav-active-rgb),.9); }
.nav-cta{ display:flex; align-items:center; gap:12px; min-width:0; }
.nav-cta .btn{ padding:11px 22px; font-size:15px; }
.nav-cta .btn-ghost{ color:var(--on-dark-soft); border-color:rgba(255,255,255,.24); }
.nav-cta .btn-ghost:hover{ color:var(--on-dark-strong); border-color:var(--on-dark-strong); background:transparent; }
/* hamburger: 44×44 tap target; the three bars morph into an X when open */
.nav-toggle{ display:none; width:44px; height:44px; margin-right:-10px; padding:0; background:none; border:0; cursor:pointer;
  flex-shrink:0; align-items:center; justify-content:center; flex-direction:column; border-radius:var(--radius-sm); }
.nav-toggle span{ display:block; width:24px; height:2px; margin:2.5px 0; background:var(--text-on-dark); border-radius:1px;
  transition:transform .28s cubic-bezier(.16,.84,.34,1), opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav-toggle:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:2px; }

/* ---------- mobile / tablet menu: frosted-glass overlay below the header ----------
   Tint + opacity + blur + hairline are theme tokens (--menu-glass, --menu-glass-op,
   --menu-blur, --menu-line). The tint opacity is chosen so text keeps WCAG AA even
   over a pure-white backdrop (tests/contrast_check.php composites the worst case). */
.nav-panel{ display:none; }
.nav-panel--always{ display:block; }
@media (max-width:940px){
  .nav-logo{ height:var(--logo-h-md); }
  .nav-links, .nav-cta .btn-ghost{ display:none; }
  .nav-toggle{ display:flex; }
  /* tablet: the header CTA gets compact instead of crowding the logo */
  .nav-cta .btn{ padding:9px 16px; font-size:14px; }
  .nav-panel{ display:block; }
}
  .nav-panel{
    position:fixed; z-index:99; left:0; right:0; top:var(--nav-h);
    height:calc(100vh - var(--nav-h)); height:calc(100dvh - var(--nav-h));
    overflow-y:auto; overscroll-behavior:contain;
    background:rgba(var(--menu-glass-rgb), var(--menu-glass-op));
    -webkit-backdrop-filter:blur(var(--menu-blur)) saturate(140%); backdrop-filter:blur(var(--menu-blur)) saturate(140%);
    border-top:1px solid var(--menu-line);
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .22s ease, transform .26s cubic-bezier(.16,.84,.34,1), visibility 0s linear .26s;
  }
  .nav-panel.is-open{ opacity:1; visibility:visible; transform:none; transition:opacity .22s ease, transform .26s cubic-bezier(.16,.84,.34,1), visibility 0s; }
  /* while open the header bar joins the panel's tint (one continuous surface) */
  .nav.menu-open{ background:rgba(var(--menu-glass-rgb), var(--menu-glass-op)); border-bottom-color:var(--menu-line); }
  html.menu-lock, html.menu-lock body{ overflow:hidden; }

  .nav-panel__inner{ max-width:var(--maxw); min-height:100%; margin:0 auto; padding:10px var(--pad-x) 28px;
    display:flex; flex-direction:column; }
  .nav-panel__links{ list-style:none; margin:0; padding:0; }
  .nav-panel__links li{ border-bottom:1px solid var(--menu-line); }
  .nav-panel__links a{
    display:flex; align-items:center; gap:12px; min-height:56px; padding:6px 0;
    font-family:var(--display); font-weight:600; font-size:var(--nav-panel-fs,22px); line-height:1.2; letter-spacing:-.01em;
    color:var(--nav-link); transition:color .18s ease;
  }
  .nav-panel__links a:hover, .nav-panel__links a:focus-visible{ color:var(--on-dark-strong); }
  .nav-panel__links a:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:2px; border-radius:2px; }
  /* active page: corporate kicker style — accent dash + accent label, no pill */
  .nav-panel__links a[aria-current="page"]{ color:var(--accent-bright); }
  .nav-panel__links a[aria-current="page"]::before{ content:""; width:22px; height:2px; background:var(--accent-bright); flex-shrink:0; }

  .nav-panel__cta{ margin-top:auto; padding-top:28px; display:flex; flex-direction:column; gap:12px; }
  .nav-panel__cta .btn{ width:100%; justify-content:center; min-height:50px; }
  .nav-panel__cta .btn-ghost{ color:var(--text-on-dark); border-color:var(--line-on-dark-2); }
  .nav-panel__cta .btn-ghost:hover{ border-color:var(--text-on-dark); }
/* no backdrop-filter support: a near-opaque solid surface instead of glass */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .nav-panel, .nav.menu-open{ background:rgba(var(--menu-glass-rgb), .97); }
}
@media (max-width:480px){
  /* phones: the header CTA gives way to the logo — it lives in the menu panel */
  .nav-logo{ height:var(--logo-h-sm); }
  .nav-cta .btn-primary{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .nav-toggle span, .nav-panel, .nav-panel.is-open{ transition:none; }
  .nav-panel{ transform:none; }
}

/* ============================================================
   HEADER MENU OPTIONS (editor → Menu; src/MenuOptions.php).
   Classes are emitted only for non-default choices, so an
   untouched menu renders exactly as before.
   ============================================================ */
/* labels never wrap onto two lines */
.nav-links > li > a{ white-space:nowrap; }
/* dropdown sub-menus (desktop) */
.nav-links .has-sub{ position:relative; }
.nav-links .has-sub > a{ display:inline-flex; align-items:center; gap:6px; }
.nav-chev{ width:12px; height:12px; transition:transform .2s ease; }
.nav-links .has-sub:hover .nav-chev, .nav-links .has-sub:focus-within .nav-chev{ transform:rotate(180deg); }
.nav-sub{ position:absolute; top:calc(100% + 8px); left:0; z-index:5; min-width:220px; margin:0; padding:8px; list-style:none;
  background:rgba(var(--nav-bg-scrolled-rgb), .97); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-md);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.5); opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s ease, transform .2s ease, visibility 0s linear .2s; }
.nav-sub::before{ content:""; position:absolute; left:0; right:0; top:-10px; height:10px; }   /* hover bridge */
.nav-links .has-sub:hover > .nav-sub, .nav-links .has-sub:focus-within > .nav-sub{ opacity:1; visibility:visible; transform:none; transition:opacity .18s ease, transform .2s ease, visibility 0s; }
.nav-links .nav-sub a{ display:block; padding:10px 14px; border-radius:var(--radius-sm); white-space:nowrap; font-size:calc(var(--nav-fs,15px) - .5px); }
.nav-links .nav-sub a.active{ background:rgba(255,255,255,.08); color:var(--nav-link-hover,var(--on-dark-strong)); }
.nav-panel__sub{ list-style:none; margin:-4px 0 10px; padding:0 0 0 18px; }
.nav-panel__links .nav-panel__sub li{ border:0; }
.nav-panel__links .nav-panel__sub a{ min-height:42px; font-size:calc(var(--nav-panel-fs,22px) * .76); font-weight:500; }

/* link styles */
.nav--links-underline .nav-links a, .nav--links-text .nav-links a{ border-radius:0; padding-inline:4px; margin-inline:8px; }
.nav--links-underline .nav-links a:hover, .nav--links-text .nav-links a:hover,
.nav--links-underline .nav-links a.active, .nav--links-text .nav-links a.active{ background:transparent; }
.nav--links-underline .nav-links > li > a::after{ content:""; position:absolute; left:4px; right:4px; bottom:2px; height:2px; border-radius:2px;
  background:var(--nav-active); transform:scaleX(0); transform-origin:left; transition:transform .25s cubic-bezier(.16,.84,.34,1); }
.nav--links-underline .nav-links > li > a:hover::after, .nav--links-underline .nav-links > li > a.active::after{ transform:scaleX(1); }
.nav--links-underline .nav-links a.active, .nav--links-text .nav-links a.active{ color:var(--nav-link-hover,var(--on-dark-strong)); }
.nav--links-text .nav-links a.active{ color:var(--nav-active); }
.nav--links-underline .nav-sub a, .nav--links-text .nav-sub a{ margin:0; padding:10px 14px; border-radius:var(--radius-sm); }
.nav--upper .nav-links a, .nav--upper .nav-cta .btn{ text-transform:uppercase; }
.nav--full .nav-inner{ max-width:none; }

/* menu styles (desktop) */
@media (min-width:941px){
  /* side columns never shrink below their content, so links and buttons can't overlap */
  .nav--centered .nav-inner, .nav--logo-center .nav-inner{ display:grid; grid-template-columns:minmax(max-content, 1fr) auto minmax(max-content, 1fr); }
  .nav--centered .nav-brand{ justify-self:start; }
  .nav--centered .nav-links{ justify-self:center; }
  .nav--centered .nav-cta, .nav--logo-center .nav-cta{ justify-self:end; }
  .nav--logo-center .nav-links{ order:-1; justify-self:start; }
  .nav--logo-center .nav-links > li:first-child > a{ margin-left:-16px; }
  .nav--logo-center.nav--links-underline .nav-links > li:first-child > a,
  .nav--logo-center.nav--links-text .nav-links > li:first-child > a{ margin-left:-4px; }
  .nav--logo-center .nav-brand{ justify-self:center; }
  .nav--minimal .nav-links{ display:none; }
  .nav--minimal .nav-toggle{ display:flex; }
  .nav-panel--always .nav-panel__inner{ max-width:720px; }
}

/* sticky behaviour */
.nav--static{ position:absolute; }
.nav--smart.nav--hidden:not(.menu-open){ transform:translateY(-100%); }
.nav--smart.nav--hidden:not(.menu-open) .nav-sub{ display:none; }
.nav--transparent:not(.scrolled):not(.menu-open){ background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom-color:transparent; }
.nav--shrink.scrolled:not(.menu-open){ height:calc(var(--nav-h) * .8); }
.nav--shrink .nav-logo{ transition:transform .25s ease; transform-origin:left center; }
.nav--shrink.scrolled:not(.menu-open) .nav-logo{ transform:scale(.84); }
.nav--logo-center.nav--shrink .nav-logo{ transform-origin:center; }
.nav--no-border, .nav--no-border.scrolled{ border-bottom-color:transparent; }
.nav--shadow-soft.scrolled{ box-shadow:inset 0 2px 0 var(--nav-rule), 0 8px 26px -10px rgba(0,0,0,.35); }
.nav--shadow-strong.scrolled{ box-shadow:inset 0 2px 0 var(--nav-rule), 0 14px 40px -8px rgba(0,0,0,.6); }

/* mobile menu styles */
.nav-panel--drawer{ left:auto; width:min(400px, 88vw); border-top:0; border-left:1px solid var(--menu-line); transform:translateX(100%); }
.nav-panel--drawer.is-open{ transform:none; box-shadow:0 0 0 100vmax rgba(0,0,0,.45); }
.nav-panel--fullscreen .nav-panel__inner{ justify-content:center; text-align:center; max-width:640px; }
.nav-panel--fullscreen .nav-panel__links li{ border-bottom:0; }
.nav-panel--fullscreen .nav-panel__links a{ justify-content:center; font-size:var(--nav-panel-fs,32px); min-height:64px; }
.nav-panel--fullscreen .nav-panel__links a[aria-current="page"]::before{ display:none; }
.nav-panel--fullscreen .nav-panel__sub{ padding-left:0; margin-top:-6px; }
.nav-panel--fullscreen .nav-panel__sub a{ font-size:calc(var(--nav-panel-fs,32px) * .6); min-height:42px; font-weight:500; }
.nav-panel--fullscreen .nav-panel__cta{ margin-top:32px; flex-direction:row; flex-wrap:wrap; justify-content:center; }
.nav-panel--fullscreen .nav-panel__cta .btn{ width:auto; }
@media (prefers-reduced-motion:reduce){
  .nav{ transition:none; }
  .nav-panel--drawer{ transform:none; }
}

/* ---------- hero CTA row (shared by sliders) ---------- */
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:40px; }

/* ---------- hero slider ---------- */
.hero-slider{ position:relative; min-height:clamp(600px, 94vh, 940px); overflow:hidden; background:var(--bg-deepest); }
.hero-slides{ position:absolute; inset:0; }
.hero-slide{ position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity 1s ease, visibility 1s ease; }
.hero-slide.active{ opacity:1; visibility:visible; z-index:1; }
.hero-slide .slide-bg{ position:absolute; inset:0; width:100%; height:100%;
  border-radius:0; background:var(--panel); z-index:0; }
/* subtle ken-burns on the active slide's image */
@media (prefers-reduced-motion:no-preference){
  .hero-slide.active .slide-bg{ animation:kenburns 10s cubic-bezier(.33,0,.4,1) both; }
}
@keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.06); } }
.slide-scrim{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(var(--scrim-rgb),calc(.62*var(--scrim-op))) 0%, rgba(var(--scrim-rgb),calc(.34*var(--scrim-op))) 34%, rgba(var(--scrim-rgb),calc(.52*var(--scrim-op))) 70%, rgba(var(--scrim-rgb),calc(.9*var(--scrim-op))) 100%),
             radial-gradient(120% 90% at 18% 82%, rgba(var(--scrim-tint-rgb),calc(.30*var(--scrim-op))) 0%, rgba(var(--scrim-tint-rgb),0) 46%); }
.hero-slide .wrap{ position:relative; z-index:3; height:100%; display:flex; flex-direction:column;
  justify-content:flex-end; padding-bottom:clamp(96px, 12vh, 168px); padding-top:calc(var(--nav-h) + 40px);
  pointer-events:none; }
.hero-slide .wrap a, .hero-slide .wrap button{ pointer-events:auto; }
.hero-slide .slide-inner{ max-width:900px; }
.hero-slide h1{ color:var(--on-dark-strong); max-width:16ch; margin-top:20px; }
.hero-slide h1 .accent, .hero-slide .accent{ color:var(--accent-bright); }
.hero-slide .lead{ color:var(--lead-on-dark); max-width:56ch; margin-top:22px; font-size:clamp(18px,1.5vw,22px); }
.hero-slide .hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.hero-slide .btn-ghost{ color:var(--on-dark-strong); border-color:rgba(255,255,255,.32); }
.hero-slide .btn-ghost:hover{ color:var(--on-dark-strong); border-color:var(--on-dark-strong); }
/* controls */
.slider-ui{ position:absolute; left:0; right:0; bottom:0; z-index:5; }
.slider-bar{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x) clamp(30px,5vh,48px);
  display:flex; align-items:center; justify-content:space-between; gap:24px; }
.slider-dots{ display:flex; gap:14px; align-items:center; }
.slider-dots button{ position:relative; height:3px; width:56px; border:0; padding:0; cursor:pointer;
  background:rgba(255,255,255,.24); border-radius:2px; overflow:hidden; transition:background .25s ease; }
.slider-dots button:hover{ background:rgba(255,255,255,.4); }
.slider-dots button .fill{ position:absolute; inset:0; background:var(--accent-fill); border-radius:2px; transform:scaleX(0); transform-origin:left center; }
.slider-dots button.active .fill{ background:var(--accent-bright); }
.slider-dots button.active.run .fill{ animation:mo-fill var(--slide-dur) linear forwards; }
.is-paused .slider-dots button.active.run .fill{ animation-play-state:paused; }
@keyframes mo-fill{ to{ transform:scaleX(1); } }
.slider-arrows{ display:flex; gap:10px; }
.slider-arrows button{ width:52px; height:52px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.28); color:var(--on-dark-strong);
  font-size:19px; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, border-color .2s ease, transform .2s ease, color .2s ease; }
.slider-arrows button:hover{ background:var(--accent-fill); border-color:var(--accent-fill); color:var(--on-accent); transform:translateY(-2px); }
.slide-count{ position:absolute; right:var(--pad-x); top:calc(var(--nav-h) + 44px); z-index:5;
  font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:.14em; color:rgba(255,255,255,.7); }
.slide-count b{ color:var(--on-dark-strong); font-size:20px; }
@media (max-width:620px){
  .slider-arrows{ display:none; }
  .slider-dots button{ width:38px; }
  .slide-count{ display:none; }
}

/* who-we-are — image-led layout */
.whoweare{ grid-template-columns:1.5fr 1fr; align-items:center;
  gap:clamp(32px,5vw,72px); }
.whoweare .wwa-media .media{ width:100%; }
.whoweare .wwa-title{ font-size:clamp(23px, 2.6vw, 34px); font-weight:600; letter-spacing:-.015em;
  line-height:1.14; }
@media (max-width:880px){
  .whoweare{ grid-template-columns:1fr; }
  .whoweare .wwa-media{ order:-1; }
}

/* breadcrumbs (page heads) */
.pagehead-inner{ position:relative; z-index:2; }
.crumbs{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint-on-dark); margin-bottom:22px; }
.crumbs a:hover{ color:var(--text-on-dark); }

/* page hero with background slider (interior pages) */
.pagehead-slider{ position:relative; overflow:hidden; background:var(--bg-deepest);
  min-height:clamp(440px, 62vh, 660px); display:flex; }
.pagehead-slider .hero-slides{ position:absolute; inset:0; }
.pagehead-slider .pagehead-inner{ position:relative; z-index:3; width:100%; align-self:flex-end;
  max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad-x);
  padding-top:calc(var(--nav-h) + 40px); padding-bottom:clamp(56px, 8vh, 104px);
  pointer-events:none; }
.pagehead-slider .pagehead-inner a, .pagehead-slider .pagehead-inner button{ pointer-events:auto; }
.pagehead-slider h1{ color:var(--on-dark-strong); max-width:18ch; }
.pagehead-slider .lead{ color:var(--lead-on-dark); max-width:64ch; margin-top:22px; }
.pagehead-slider .crumbs{ color:rgba(255,255,255,.6); }
.pagehead-slider .slider-ui{ position:absolute; }
.pagehead-slider .slider-bar{ padding-bottom:clamp(22px,4vh,34px); }
/* on-image chips + ghost buttons */
.pagehead-slider .chip{ background:transparent; border-color:var(--line-on-dark-2); color:var(--on-dark-soft); }
.pagehead-slider .btn-ghost{ color:var(--warm-white); }

/* ---------- media slots (replaces the design tool's <image-slot>) ---------- */
.media{ display:block; position:relative; overflow:hidden; background:var(--media-bg); border-radius:var(--radius); }
.media img, .media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* image settings of a slot (src/ImageFx.php; nothing set = none of this applies).
   Crop: the box takes the rectangle's shape (aspect-ratio, so nothing shifts while loading)
   and the picture is placed so that rectangle fills it. Per device: tablet ≤ 940px, mobile ≤ 720px. */
.media.crop-d{ aspect-ratio:var(--car-d) !important; }
.media.crop-d > :is(img, video){ max-width:none; inset:auto; left:calc(var(--cx-d) / var(--cw-d) * -100%); top:calc(var(--cy-d) / var(--ch-d) * -100%);
  width:calc(10000% / var(--cw-d)); height:calc(10000% / var(--ch-d)); object-fit:cover; }
@media (max-width:940px){
  .media.mfx-t > :is(img, video){ object-position:var(--fp-t) !important; transform:scale(var(--fz-t)) !important; transform-origin:var(--fp-t) !important; }
  .media.crop-t{ aspect-ratio:var(--car-t) !important; }
  .media.crop-t > :is(img, video){ max-width:none; inset:auto; left:calc(var(--cx-t) / var(--cw-t) * -100%); top:calc(var(--cy-t) / var(--ch-t) * -100%);
    width:calc(10000% / var(--cw-t)); height:calc(10000% / var(--ch-t)); object-fit:cover; }
}
@media (max-width:720px){
  .media.mfx-m > :is(img, video){ object-position:var(--fp-m) !important; transform:scale(var(--fz-m)) !important; transform-origin:var(--fp-m) !important; }
  .media.crop-m{ aspect-ratio:var(--car-m) !important; }
  .media.crop-m > :is(img, video){ max-width:none; inset:auto; left:calc(var(--cx-m) / var(--cw-m) * -100%); top:calc(var(--cy-m) / var(--ch-m) * -100%);
    width:calc(10000% / var(--cw-m)); height:calc(10000% / var(--ch-m)); object-fit:cover; }
}
/* overlay layer above the picture (a theme colour or a custom one) */
.media__ov{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:var(--ov-o, .5); }
.media__ov--solid{ background:var(--ov-c); }
.media__ov--top{ background:linear-gradient(to bottom, var(--ov-c), transparent 85%); }
.media__ov--bottom{ background:linear-gradient(to top, var(--ov-c), transparent 85%); }
.media__ov--left{ background:linear-gradient(to right, var(--ov-c), transparent 85%); }
.media__ov--right{ background:linear-gradient(to left, var(--ov-c), transparent 85%); }
.media__ov--radial{ background:radial-gradient(ellipse at center, transparent 30%, var(--ov-c) 100%); }
.media__ov--gradient{ background:var(--ov-g); }
.dark .media, .media.on-dark{ background:var(--media-bg-dark); }
/* intentional placeholder for slots awaiting imagery — no editor UI, just a quiet gradient */
.media.ph{ background:linear-gradient(135deg,var(--media-bg) 0%,var(--media-ph-mid) 55%,var(--media-ph-end) 100%); }
.dark .media.ph, .media.on-dark.ph{ background:linear-gradient(135deg,var(--media-bg-dark) 0%,var(--media-ph-dark-mid) 60%,var(--media-ph-dark-end) 100%); }
.slide-bg.media{ border-radius:0; }
/* page-head background placeholder: the brand's own dark glow gradient */
.slide-bg.ph{ background:
  radial-gradient(circle at 74% 82%, rgba(var(--scrim-tint-rgb),.34) 0%, rgba(var(--scrim-tint-rgb),0) 42%),
  radial-gradient(circle at 50% 34%, var(--glow-core) 0%, var(--panel) 55%, var(--bg-deepest) 100%); }
.r-20{ border-radius:var(--radius-lg); }
/* let aspect-ratio drive height */
.ratio-4-3, .ratio-3-2, .ratio-1-1, .ratio-3-4, .ratio-16-9{ height:auto; width:100%; }
.ratio-4-3{ aspect-ratio:4/3; }
.ratio-3-2{ aspect-ratio:3/2; }
.ratio-1-1{ aspect-ratio:1/1; }
.ratio-3-4{ aspect-ratio:3/4; }
.ratio-16-9{ aspect-ratio:16/9; }

/* ---------- cards ---------- */
.card{ background:var(--surface); border:var(--border-w) solid var(--line); border-radius:var(--radius);
  padding:clamp(26px,3vw,38px); box-shadow:var(--shadow-sm); }
.card-ink{ background:var(--ink); color:var(--on-dark-strong); border:none; }
.card-ink h3{ color:var(--on-dark-strong); }
.card-ink .muted{ color:var(--muted-on-dark); }
/* ink-card innards */
.card-ink .ink-kicker{ color:var(--muted-on-dark); }
.card-ink .ink-row{ color:var(--text-on-dark); }
.card-ink .ink-div{ height:1px; background:var(--line-on-dark); }

.chips{ display:flex; flex-wrap:wrap; gap:12px; }
.chip{ font-size:15px; font-weight:500; color:var(--ink); background:var(--surface);
  border:var(--border-w) solid var(--line); border-radius:var(--radius-pill); padding:9px 20px; }
.dark .chip{ background:transparent; border-color:var(--line-on-dark-2); color:var(--on-dark-soft); }
.chip.on{ border-color:var(--accent); color:var(--accent); }

/* stat row */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); border-top:2px solid var(--line); }
@media (max-width:820px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stat{ padding:36px 32px 6px 0; border-right:1px solid var(--line); }
.stat:last-child{ border-right:none; }
@media (max-width:820px){ .stat{ padding:30px 24px 6px; border-right:1px solid var(--line);
  border-bottom:1px solid var(--line); } .stat:nth-child(2n){ border-right:none; } }
.stat .num{ font-family:var(--display); font-weight:var(--fw-heading); font-size:clamp(46px,5.4vw,80px);
  color:var(--accent); line-height:1; letter-spacing:-.03em; }
.stat .num small{ font-size:.5em; font-weight:600; }
.stat .lbl{ margin-top:14px; color:var(--muted); font-size:16px; line-height:1.45; max-width:24ch; }
.dark .stats{ border-top-color:var(--line-on-dark); }
.dark .stat{ border-right-color:var(--line-on-dark); }
.dark .stat .lbl{ color:var(--muted-on-dark); }

/* ---------- product portfolio (portfolio_grid): one content, five layouts ----------
   grid · bento · split list · carousel · expanding panels; light / sand / dark.
   --pf-* hold the scheme's colours (theme tokens only); an image tile switches
   them to the on-dark set. Items reveal one after another (pf-in). */
.pf{ --pf-line:var(--line); --pf-line-2:var(--line); --pf-ink:var(--ink); --pf-text:var(--muted); --pf-acc:var(--accent); --pf-card:var(--surface); --pf-soft:var(--surface); --pf-hover:var(--surface);
  --pf-hl-bg:var(--ink); --pf-hl-hover:var(--cta-cell-hover); --pf-hl-ink:var(--on-dark-strong); --pf-hl-text:var(--muted-on-dark); --pf-hl-acc:var(--accent-bright); }
.pf.dark{ --pf-line:var(--line-on-dark); --pf-line-2:var(--line-on-dark); --pf-ink:var(--on-dark-strong); --pf-text:var(--muted-on-dark); --pf-acc:var(--accent-bright); --pf-card:transparent; --pf-soft:transparent; --pf-hover:transparent;
  --pf-hl-bg:var(--accent-fill); --pf-hl-hover:var(--accent-fill); --pf-hl-ink:var(--on-accent); --pf-hl-text:var(--on-accent); --pf-hl-acc:var(--on-accent); }
@supports (color:color-mix(in srgb, red 50%, transparent)){
  .pf{ --pf-line:color-mix(in srgb, var(--ink) 14%, transparent); --pf-line-2:color-mix(in srgb, var(--ink) 30%, transparent);
    --pf-soft:color-mix(in srgb, var(--accent) 8%, var(--surface)); --pf-hover:color-mix(in srgb, var(--accent) 6%, transparent); }
  .pf.dark{ --pf-line:color-mix(in srgb, var(--on-dark-strong) 18%, transparent); --pf-line-2:color-mix(in srgb, var(--on-dark-strong) 34%, transparent);
    --pf-card:color-mix(in srgb, var(--on-dark-strong) 4%, transparent); --pf-soft:color-mix(in srgb, var(--on-dark-strong) 6%, transparent); --pf-hover:color-mix(in srgb, var(--on-dark-strong) 5%, transparent); }
}
/* on a photo: light text (tiles, cards, open panels) */
.pf-tile.has-img, .pf-card.has-img, .pf-panel.has-img.is-open{ --pf-ink:var(--on-dark-strong); --pf-text:var(--text-on-dark); --pf-acc:var(--accent-bright); --pf-line:var(--line-on-dark); }
.pf-head{ display:flex; flex-direction:column; gap:16px; max-width:760px; margin-bottom:clamp(36px, 4.5vw, 60px); }
.pf .pf-h{ margin:0; max-width:20ch; color:var(--pf-ink); }
.pf-h .accent{ display:block; color:var(--pf-acc); }
.pf.dark .eyebrow{ color:var(--accent-bright); }
.pf .pf-intro{ margin:0; max-width:62ch; color:var(--pf-text); }
.pf-num{ font-family:var(--display); font-weight:var(--fw-heading); font-size:15px; line-height:1; letter-spacing:.06em; color:var(--pf-acc); }
.pf .pf-t{ margin:0; font-size:clamp(20px, 1.7vw, 23px); line-height:1.15; letter-spacing:-.01em; color:var(--pf-ink); transition:color .25s ease; }
.pf .pf-d{ margin:0; font-size:15px; line-height:1.55; color:var(--pf-text); }
.pf-tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.pf-tags li{ padding:4px 10px; border:1px solid var(--pf-line-2); border-radius:var(--radius-pill); font-family:var(--label); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--pf-ink); }
.pf-stretch{ position:absolute; inset:0; z-index:2; border-radius:inherit; }
.pf-stretch:focus-visible, .pf-more:focus-visible, .pf-go:focus-visible{ outline:2px solid var(--pf-acc); outline-offset:-3px; }
.pf-more{ position:relative; z-index:3; display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--pf-acc); text-decoration:none; }
.pf-more .arw, .pf-go .arw, .pf .btn .arw{ transition:transform .25s ease; }
.pf-more:hover .arw, .pf-go:hover .arw, .pf .btn:hover .arw{ transform:translateX(4px); }
/* no image: a themed panel with the large number (never an empty box) */
.pf-fb{ position:relative; display:grid; place-items:center; overflow:hidden; background-color:var(--pf-soft);
  background-image:repeating-linear-gradient(135deg, var(--pf-line) 0 1px, transparent 1px 16px); }
.pf-fb span{ font-family:var(--display); font-weight:800; font-size:clamp(72px, 9vw, 150px); line-height:1; letter-spacing:-.04em; color:var(--pf-acc); opacity:.24; }
.pf .pf-hl__t{ margin:0; font-size:clamp(20px, 1.8vw, 24px); line-height:1.15; letter-spacing:-.01em; color:var(--pf-hl-ink); }
.pf .pf-hl__d{ margin:0; font-size:15px; line-height:1.55; color:var(--pf-hl-text); }
/* hover transitions (entrances: the global motion system) */
.pf .pf-item.reveal{
  transition:background-color .3s ease, transform .4s cubic-bezier(.16,.84,.34,1), box-shadow .4s ease, flex-grow .55s cubic-bezier(.16,.84,.34,1), border-color .3s ease; }

/* A · grid: hairline cells; number rule grows, brand tags fade in on hover; last cell = highlight (dark) */
.pf-grid{ display:grid; grid-template-columns:repeat(var(--pf-cols, 4), minmax(0, 1fr)); border-top:1px solid var(--pf-line); border-left:1px solid var(--pf-line); }
.pf-cell{ position:relative; display:flex; flex-direction:column; gap:12px; min-height:240px; padding:30px 28px 30px; color:inherit; text-decoration:none;
  box-shadow:inset -1px -1px 0 var(--pf-line); }
.pf-cell:hover{ background-color:var(--pf-hover); }
.pf-cell:hover .pf-t{ color:var(--pf-acc); }
.pf-rule{ display:block; width:28px; height:2px; margin:2px 0 8px; background:var(--pf-acc); transition:width .5s cubic-bezier(.16,.84,.34,1); }
.pf-cell:hover .pf-rule, .pf-cell:focus-visible .pf-rule, .pf-cell:focus-within .pf-rule{ width:100%; }
.pf-cell .pf-tags{ margin-top:auto; padding-top:8px; opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s ease; }
.pf-cell:hover .pf-tags, .pf-cell:focus-within .pf-tags, .pf-cell:focus-visible .pf-tags, .cms-editing .pf-cell .pf-tags{ opacity:1; transform:none; }
@media (hover:none){ .pf-cell .pf-tags{ opacity:1; transform:none; } }
.pf-cell:focus-visible{ outline:2px solid var(--pf-acc); outline-offset:-3px; }
.pf-cell--hl{ background-color:var(--pf-hl-bg); box-shadow:none; }
.pf-cell--hl:hover{ background-color:var(--pf-hl-hover); }
.pf-cell--hl .pf-num{ color:var(--pf-hl-acc); }
.pf-cell--hl .pf-rule{ background:var(--pf-hl-acc); }
.pf-go{ display:inline-flex; align-items:center; gap:9px; margin-top:auto; font-size:14px; font-weight:600; letter-spacing:.02em; color:var(--pf-hl-ink); text-decoration:none; }
.pf-go::after{ content:""; position:absolute; inset:0; }

/* B · bento: hero 2×2 + 1×1 / 2×1 tiles (spans set by the template); highlight = accent tile */
.pf-bento{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); grid-auto-rows:minmax(260px, auto); gap:clamp(10px, 1.2vw, 16px); }
.pf-tile{ position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; justify-content:flex-end; grid-column:span var(--span, 1);
  border:1px solid var(--pf-line); border-radius:var(--radius-lg); background:var(--pf-card); }
.pf-tile--hero{ grid-row:span 2; }
.pf-tile__media{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; border-radius:0; transition:transform 1.4s cubic-bezier(.16,.84,.34,1); }
.pf-tile .pf-fb{ place-items:start end; padding:16px 22px; }
.pf-tile .pf-fb span{ font-size:clamp(44px, 4vw, 68px); }
.pf-tile--hero .pf-fb span{ font-size:clamp(110px, 13vw, 210px); }
.pf-tile.has-img:not(.pf-tile--hero)::after{ background:linear-gradient(180deg, rgba(var(--scrim-rgb), .3), rgba(var(--scrim-rgb), .66) 45%, rgba(var(--scrim-rgb), .9)); }
.pf-tile.has-img{ border-color:transparent; }
.pf-tile.has-img::after, .pf-card.has-img::after, .pf-panel.has-img.is-open::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(var(--scrim-rgb), .04) 25%, rgba(var(--scrim-rgb), .55) 60%, rgba(var(--scrim-rgb), .88)); }
.pf-tile__body{ position:relative; display:flex; flex-direction:column; gap:8px; padding:clamp(18px, 2vw, 26px); }
.pf-tile--hero .pf-tile__body{ gap:12px; padding:clamp(24px, 3vw, 40px); }
.pf-tile--hero .pf-t{ font-size:clamp(28px, 2.8vw, 40px); }
.pf-tile--hero .pf-d{ max-width:46ch; font-size:16px; }
.pf-tile .pf-tags{ margin-top:4px; }
.pf-tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.pf-tile:hover .pf-tile__media{ transform:scale(1.05); }
.pf-tile--hl{ flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 28px; padding:clamp(22px, 2.6vw, 34px);
  border-color:transparent; background:var(--accent-fill); --pf-hl-ink:var(--on-accent); --pf-hl-text:var(--on-accent); }
.pf-tile--hl .pf-tile__body{ padding:0; }
.pf-tile--hl .pf-hl__d{ opacity:.88; }

/* C · split list: big numbered titles (tabs) beside a sticky panel that crossfades */
.pf-split{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); gap:clamp(32px, 5vw, 80px); align-items:start; }
.pf-list{ border-top:1px solid var(--pf-line); }
.pf-li{ border-bottom:1px solid var(--pf-line); }
.pf-li__tab{ display:flex; align-items:baseline; gap:clamp(14px, 2vw, 26px); padding:clamp(16px, 1.8vw, 24px) 6px; cursor:pointer; outline:none; border-radius:4px; }
.pf-li__tab:focus-visible{ outline:2px solid var(--pf-acc); outline-offset:2px; }
.pf-li .pf-num{ flex:0 0 2.4em; font-size:14px; }
.pf-li__t{ flex:1; font-family:var(--display); font-weight:var(--fw-heading); font-size:clamp(24px, 2.8vw, 42px); line-height:1.08; letter-spacing:-.02em;
  color:var(--pf-text); transition:color .3s ease, transform .45s cubic-bezier(.16,.84,.34,1); }
.pf-li.is-active .pf-li__t, .pf-li__tab:hover .pf-li__t{ color:var(--pf-ink); transform:translateX(6px); }
.pf-li__arw{ font-size:22px; color:var(--pf-acc); opacity:0; transform:translateX(-8px); transition:opacity .3s ease, transform .3s ease; }
.pf-li.is-active .pf-li__arw{ opacity:1; transform:none; }
.pf-li__inline{ display:none; }
.pf-split__panel{ position:sticky; top:calc(var(--nav-h) + 24px); display:grid; }
.pf-pane{ grid-area:1 / 1; opacity:0; visibility:hidden; transition:opacity .45s ease, visibility 0s linear .45s; }
.pf-pane.is-active{ opacity:1; visibility:visible; transition:opacity .45s ease, visibility 0s; }
.pf-pane__media{ width:100%; aspect-ratio:4 / 3; border-radius:var(--radius-lg); }
.pf-pane__body{ display:flex; flex-direction:column; gap:12px; padding:20px 2px 0; }
.pf-pane .pf-d{ font-size:16.5px; max-width:52ch; }
.pf-cta-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 32px; margin-top:clamp(28px, 3.4vw, 44px);
  padding:clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 34px); border-radius:var(--radius-lg); background:var(--pf-hl-bg); }
.pf-cta-row__copy{ display:flex; flex-direction:column; gap:6px; }
.pf.dark .pf-cta-row .btn-primary{ background:var(--surface); border-color:var(--surface); color:var(--ink); }

/* D · carousel: tall cards, scroll-snap + drag, hero-style arrows, thin progress */
.pf-car__track{ display:grid; grid-auto-flow:column; grid-auto-columns:clamp(240px, 24vw, 320px); gap:clamp(12px, 1.4vw, 18px); overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; cursor:grab; outline:none; border-radius:var(--radius-lg); }
.pf-car__track::-webkit-scrollbar{ display:none; }
.pf-car__track:focus-visible{ outline:2px solid var(--pf-acc); outline-offset:4px; }
.pf-car__track.is-drag{ scroll-snap-type:none; scroll-behavior:auto; cursor:grabbing; user-select:none; }
.pf-car img{ -webkit-user-drag:none; user-select:none; }
.pf-card{ position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; justify-content:flex-end; aspect-ratio:3 / 4.3; scroll-snap-align:start;
  border:1px solid var(--pf-line); border-radius:var(--radius-lg); background:var(--pf-card); }
.pf-card__media{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; border-radius:0; transition:transform 1.4s cubic-bezier(.16,.84,.34,1); }
.pf-card:hover .pf-card__media{ transform:scale(1.05); }
.pf-card .pf-fb{ place-items:start start; padding:18px 22px; }
.pf-card.has-img{ border-color:transparent; }
.pf-card__body{ position:relative; display:flex; flex-direction:column; gap:8px; padding:22px; }
.pf-card--hl{ justify-content:center; border-color:transparent; background:var(--accent-fill); --pf-hl-ink:var(--on-accent); --pf-hl-text:var(--on-accent); }
.pf-card--hl .pf-card__body{ gap:14px; }
.pf-card--hl .pf-hl__t{ font-size:clamp(26px, 2.4vw, 32px); }
.pf-card--hl .btn{ align-self:flex-start; margin-top:6px; }
.pf-car__bar{ display:flex; align-items:center; gap:24px; margin-top:22px; }
.pf-progress{ flex:1; height:2px; overflow:hidden; border-radius:2px; background:var(--pf-line); }
.pf-progress i{ display:block; width:30%; height:100%; background:var(--pf-acc); transition:width .25s ease; }
.pf-arrows{ display:flex; gap:10px; }
.pf-arrows button{ display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; cursor:pointer; font-size:19px;
  background:transparent; border:1.5px solid var(--pf-line-2); color:var(--pf-ink); transition:background .2s ease, border-color .2s ease, transform .2s ease, color .2s ease, opacity .2s ease; }
.pf-arrows button:hover:not(:disabled){ background:var(--accent-fill); border-color:var(--accent-fill); color:var(--on-accent); transform:translateY(-2px); }
.pf-arrows button:focus-visible{ outline:2px solid var(--pf-acc); outline-offset:3px; }
.pf-arrows button:disabled{ opacity:.35; cursor:default; }

/* E · expanding panels: narrow panels (number + rotated title); the active one opens */
.pf-ex{ display:flex; gap:clamp(8px, 1vw, 12px); height:clamp(440px, 44vw, 560px); }
.pf-panel{ position:relative; overflow:hidden; isolation:isolate; flex:1 1 0; min-width:0; border:1px solid var(--pf-line); border-radius:var(--radius-lg); background:var(--pf-card);
  transition:flex-grow .55s cubic-bezier(.16,.84,.34,1); }
.pf-panel.is-open{ flex-grow:6; }
.pf-panel.has-img.is-open{ border-color:transparent; }
.pf-panel__tab{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:22px 0; cursor:pointer; outline:none; border-radius:inherit; }
.pf-panel__tab:focus-visible{ outline:2px solid var(--pf-acc); outline-offset:-4px; }
.pf-panel__label{ writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; font-family:var(--display); font-weight:600; font-size:18px; letter-spacing:-.005em; color:var(--pf-ink); }
.pf-panel__chev{ display:none; }
.pf-panel.is-open .pf-panel__tab{ inset:0 auto auto 0; padding:22px 24px; }
.pf-panel.is-open .pf-panel__label{ display:none; }
.pf-panel__media{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; border-radius:0; opacity:0; transition:opacity .5s ease, transform 1.4s cubic-bezier(.16,.84,.34,1); }
.pf-panel.is-open .pf-panel__media{ opacity:1; }
.pf-panel.has-img.is-open::after{ background:linear-gradient(180deg, rgba(var(--scrim-rgb), .45), rgba(var(--scrim-rgb), .05) 22%, rgba(var(--scrim-rgb), .1) 45%, rgba(var(--scrim-rgb), .88)); }
.pf-panel.is-open:hover .pf-panel__media{ transform:scale(1.04); }
.pf-panel__body{ position:absolute; left:0; bottom:0; z-index:2; display:flex; flex-direction:column; gap:10px; width:clamp(280px, 40vw, 560px); max-width:100%;
  padding:clamp(22px, 2.4vw, 32px); opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .3s ease, transform .45s ease; }
.pf-panel.is-open .pf-panel__body{ opacity:1; transform:none; pointer-events:auto; transition-delay:.18s; }
.pf-panel .pf-t{ font-size:clamp(24px, 2.4vw, 34px); }

/* responsive */
@media (max-width:940px){
  .pf-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pf-bento{ grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-flow:dense; }
  .pf-tile{ grid-column:span 1; }
  .pf-tile--hero, .pf-tile--wide, .pf-tile--hl{ grid-column:span 2; }
  .pf-tile--hero{ grid-row:span 1; min-height:380px; }
  .pf-split{ grid-template-columns:minmax(0, 1fr); }
  .pf-split__panel{ display:none; }
  .pf-li__inline{ display:grid; gap:12px; padding:0 6px 22px; }
  .pf-li__media{ width:100%; aspect-ratio:16 / 9; border-radius:var(--radius-md); }
  .pf-li__arw{ display:none; }
  .pf-li.is-active .pf-li__t, .pf-li__tab:hover .pf-li__t{ transform:none; }
  .pf-li__t{ color:var(--pf-ink); }
}
@media (max-width:760px){
  .pf-ex{ flex-direction:column; height:auto; gap:8px; }
  .pf-panel{ flex:none; }
  .pf-panel.has-img.is-open{ --pf-ink:inherit; --pf-text:inherit; --pf-acc:inherit; --pf-line:inherit; border-color:var(--pf-line); }
  .pf-panel.has-img.is-open::after{ display:none; }
  .pf-panel__tab, .pf-panel.is-open .pf-panel__tab{ position:relative; inset:auto; flex-direction:row; justify-content:flex-start; align-items:center; gap:14px; padding:18px 20px; }
  .pf-panel__label, .pf-panel.is-open .pf-panel__label{ display:block; flex:1; writing-mode:horizontal-tb; transform:none; white-space:normal; }
  .pf-panel__chev{ display:block; width:9px; height:9px; margin-right:4px; border-right:2px solid var(--pf-acc); border-bottom:2px solid var(--pf-acc); transform:rotate(45deg); transition:transform .3s ease; }
  .pf-panel.is-open .pf-panel__chev{ transform:rotate(-135deg); }
  .pf-panel:not(.is-open) .pf-panel__media, .pf-panel:not(.is-open) .pf-panel__body{ display:none; }
  .pf-panel__media, .pf-panel.is-open .pf-panel__media{ position:relative; inset:auto; z-index:0; height:200px; margin:0 20px; width:auto; border-radius:var(--radius-md); opacity:1; }
  .pf-panel__body, .pf-panel.is-open .pf-panel__body{ position:static; width:auto; padding:16px 20px 22px; opacity:1; transform:none; }
  .pf-panel__body .pf-t{ display:none; }
}
@media (max-width:600px){
  .pf-grid, .pf-bento{ grid-template-columns:minmax(0, 1fr); }
  .pf-tile, .pf-tile--hero, .pf-tile--wide, .pf-tile--hl{ grid-column:span 1; }
  .pf-tile--hero{ min-height:340px; }
  .pf-car__track{ grid-auto-columns:78vw; }
  .pf-arrows{ display:none; }
  .pf-cell{ min-height:0; }
  .pf-cell .pf-tags{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .pf *, .pf *::before, .pf *::after{ transition:none !important; animation:none !important; }
  .pf-car__track{ scroll-behavior:auto; }
  .pf-tile:hover, .pf-tile:hover .pf-tile__media, .pf-card:hover .pf-card__media, .pf-panel.is-open:hover .pf-panel__media{ transform:none; }
}

/* category detail cards (product shots) */
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cat-grid.four{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .cat-grid, .cat-grid.four{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .cat-grid, .cat-grid.four{ grid-template-columns:1fr; } }
.cat-card figcaption{ display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  margin-top:18px; padding-top:16px; border-top:2px solid var(--line); }
.cat-card h3{ font-size:22px; }
.cat-tag{ font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); white-space:nowrap; }

/* numbered feature list */
.feat{ display:flex; gap:32px; align-items:baseline; padding:26px 0; border-top:1px solid var(--line); }
.feat:last-child{ border-bottom:1px solid var(--line); }
.feat .n{ font-family:var(--display); font-weight:var(--fw-heading); font-size:36px; color:var(--faint);
  min-width:70px; letter-spacing:-.02em; }
.feat.on .n{ color:var(--accent); }
.feat.on{ border-bottom:2px solid var(--accent-line); }
.feat h3{ font-size:24px; }
.feat p{ margin-top:8px; color:var(--muted); }

/* ---------- why partner (feature_list): five layouts ----------
   numbered grid · sticky list · dark feature band · proof cards · tabs panel; light / sand / dark.
   --wp-* hold the scheme's colours (theme tokens only). Without a layout the original
   .feat design above renders unchanged. */
.wp{ --wp-line:var(--line); --wp-ink:var(--ink); --wp-text:var(--muted); --wp-mute:var(--faint); --wp-acc:var(--accent); --wp-card:var(--surface); --wp-soft:var(--surface); }
.wp.dark, .wp-band.dark{ --wp-line:var(--line-on-dark); --wp-ink:var(--on-dark-strong); --wp-text:var(--muted-on-dark); --wp-mute:var(--muted-on-dark); --wp-acc:var(--accent-bright); --wp-card:transparent; --wp-soft:transparent; }
@supports (color:color-mix(in srgb, red 50%, transparent)){
  .wp{ --wp-line:color-mix(in srgb, var(--ink) 14%, transparent); --wp-soft:color-mix(in srgb, var(--accent) 8%, var(--surface)); --wp-mute:color-mix(in srgb, var(--ink) 52%, transparent); }
  .wp.dark, .wp-band.dark{ --wp-line:color-mix(in srgb, var(--on-dark-strong) 18%, transparent); --wp-card:color-mix(in srgb, var(--on-dark-strong) 4%, transparent);
    --wp-soft:color-mix(in srgb, var(--on-dark-strong) 6%, transparent); --wp-mute:color-mix(in srgb, var(--on-dark-strong) 45%, transparent); }
}
.wp.dark .eyebrow, .wp-band.dark .eyebrow{ color:var(--accent-bright); }
.wp-head{ display:flex; flex-direction:column; gap:16px; max-width:760px; margin-bottom:clamp(36px, 4.5vw, 60px); }
.wp .wp-h{ margin:0; max-width:22ch; color:var(--wp-ink); }
.wp .wp-lead{ margin:0; max-width:60ch; color:var(--wp-text); }
.wp-head__cta{ margin-top:8px; }
.wp-num{ font-family:var(--label); font-size:12.5px; letter-spacing:.12em; color:var(--wp-acc); }
.wp .wp-t{ margin:0; font-size:clamp(19px, 1.6vw, 22px); line-height:1.2; letter-spacing:-.01em; color:var(--wp-ink); transition:color .3s ease; }
.wp .wp-d{ margin:0; font-size:15.5px; line-height:1.6; color:var(--wp-text); }
.wp-ico{ display:inline-flex; color:var(--wp-acc); }
.wp-ico svg{ width:26px; height:26px; }
.wp-stat{ margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.wp-stat .wp-sv{ font-family:var(--display); font-weight:var(--fw-heading); font-size:20px; color:var(--wp-acc); }
.wp-sl{ font-family:var(--label); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--wp-text); }
.wp .is-hl .wp-t{ color:var(--wp-acc); }
/* themed fallback (no image): tinted pattern, icon and the large number */
.wp-fb{ position:relative; display:grid; place-items:center; overflow:hidden; background-color:var(--wp-soft);
  background-image:repeating-linear-gradient(135deg, var(--wp-line) 0 1px, transparent 1px 16px); }
.wp-fb__n{ font-family:var(--display); font-weight:800; font-size:clamp(80px, 10vw, 160px); line-height:1; letter-spacing:-.04em; color:var(--wp-acc); opacity:.24; }
.wp-fb__ico{ position:absolute; top:18px; left:20px; display:flex; color:var(--wp-acc); }
.wp-fb__ico svg{ width:30px; height:30px; }
/* hover transitions (entrances: the global motion system) */
.wp .wp-item.reveal{ transition:transform .4s cubic-bezier(.16,.84,.34,1), border-color .3s ease, box-shadow .4s ease, background-color .3s ease, color .3s ease; }

/* A · numbered grid */
.wp-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(12px, 1.4vw, 18px); }
.wp-card{ position:relative; display:flex; flex-direction:column; gap:12px; padding:clamp(22px, 2.4vw, 30px); border:1px solid var(--wp-line); border-radius:var(--radius-lg); background:var(--wp-card); }
.wp-card__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; min-height:26px; }
.wp-rule{ display:block; width:28px; height:2px; margin:2px 0 6px; background:var(--wp-acc); transition:width .5s cubic-bezier(.16,.84,.34,1); }
.wp-card:hover{ transform:translateY(-4px); border-color:var(--wp-acc); box-shadow:var(--shadow-md); }
.wp-card:hover .wp-rule{ width:72px; }
.wp-card .wp-stat{ margin-top:auto; padding-top:6px; }

/* B · sticky list */
.wp-sticky{ display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(32px, 6vw, 96px); align-items:start; }
.wp-sticky__intro{ position:sticky; top:calc(var(--nav-h) + 32px); }
.wp-sticky__intro .wp-head{ margin-bottom:0; }
.wp-head--big .wp-h{ font-size:clamp(32px, 3.6vw, 52px); line-height:1.08; }
.wp-rows{ list-style:none; margin:0; padding:0; border-top:1px solid var(--wp-line); }
.wp-row{ display:grid; grid-template-columns:3.2em minmax(0, 1fr) auto; gap:12px 18px; padding:clamp(22px, 2.4vw, 32px) 0; border-bottom:1px solid var(--wp-line); }
.wp-row .wp-num{ padding-top:5px; color:var(--wp-mute); transition:color .35s ease; }
.wp-row__body{ display:flex; flex-direction:column; gap:8px; }
.wp-row .wp-t{ font-size:clamp(20px, 1.9vw, 26px); color:var(--wp-mute); }
.wp-row .wp-d{ color:var(--wp-mute); transition:color .35s ease; }
.wp-row .wp-ico{ opacity:.5; transition:opacity .35s ease; }
.wp-row.is-current .wp-num{ color:var(--wp-acc); }
.wp-row.is-current .wp-t{ color:var(--wp-ink); }
.wp-row.is-current .wp-d{ color:var(--wp-text); }
.wp-row.is-current .wp-ico{ opacity:1; }
html:not(.js) .wp-row .wp-t, .cms-editing .wp-row .wp-t{ color:var(--wp-ink); }
html:not(.js) .wp-row .wp-d, html:not(.js) .wp-row .wp-num, .cms-editing .wp-row .wp-d{ color:var(--wp-text); }

/* C · dark feature band */
.wp-band{ position:relative; isolation:isolate; overflow:hidden; }
.wp-band--panel{ padding:clamp(36px, 5vw, 80px) clamp(24px, 4.5vw, 72px); border-radius:var(--radius-lg); background:var(--panel); color:var(--text-on-dark); }
.wp-band__glow{ position:absolute; z-index:-1; top:-18%; left:-8%; width:min(760px, 80%); aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(var(--accent-bright-rgb), .2), rgba(var(--accent-bright-rgb), .06) 60%, transparent); filter:blur(10px); }
.wp-head--statement{ max-width:900px; }
.wp-head--statement .wp-h{ max-width:24ch; font-size:clamp(34px, 4.2vw, 62px); line-height:1.05; letter-spacing:-.025em; }
.wp-blist{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(24px, 3vw, 40px) clamp(28px, 4vw, 64px); }
.wp-bi{ display:grid; grid-template-columns:48px minmax(0, 1fr); gap:18px; align-items:start; }
.wp-circle{ display:grid; place-items:center; width:48px; height:48px; border:1.5px solid var(--wp-acc); border-radius:50%; color:var(--wp-acc); }
.wp-circle svg{ width:22px; height:22px; }
.wp-circle span{ font-family:var(--label); font-size:13px; letter-spacing:.06em; }
.wp-bi__body{ display:flex; flex-direction:column; gap:8px; padding-top:4px; }
.wp-band .wp-head__cta .btn{ background:var(--accent-fill); border-color:var(--accent-fill); color:var(--on-accent); }

/* D · proof cards */
.wp-proof{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(12px, 1.4vw, 18px); }
.wp-pc{ display:flex; flex-direction:column; gap:10px; padding:clamp(24px, 2.6vw, 34px); border:1px solid var(--wp-line); border-radius:var(--radius-lg); background:var(--wp-card); }
.wp-pc__fig{ line-height:1; margin-bottom:4px; }
.wp-pc .wp-sv{ font-family:var(--display); font-weight:800; font-size:clamp(46px, 5vw, 76px); line-height:1; letter-spacing:-.03em; color:var(--wp-acc); }
.wp-pc__n{ font-family:var(--display); font-weight:800; font-size:clamp(46px, 5vw, 76px); line-height:1; letter-spacing:-.03em; color:var(--wp-acc); opacity:.85; }
.wp-pc .wp-sl{ margin-bottom:8px; }
.wp-pc:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }

/* E · tabs panel */
.wp-tabs{ display:grid; grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr); gap:clamp(28px, 4.5vw, 72px); align-items:start; }
.wp-tabs__list{ border-top:1px solid var(--wp-line); }
.wp-tabw{ border-bottom:1px solid var(--wp-line); }
.wp-tab{ position:relative; display:flex; align-items:baseline; gap:16px; padding:clamp(16px, 1.8vw, 22px) 6px; cursor:pointer; outline:none; border-radius:4px; }
.wp-tab:focus-visible{ outline:2px solid var(--wp-acc); outline-offset:2px; }
.wp-tab .wp-num{ flex:0 0 2.4em; color:var(--wp-mute); transition:color .3s ease; }
.wp-tab__t{ flex:1; font-family:var(--display); font-weight:var(--fw-heading); font-size:clamp(19px, 1.8vw, 24px); line-height:1.2; color:var(--wp-mute); transition:color .3s ease; }
.wp-tabw.is-active .wp-tab__t, .wp-tab:hover .wp-tab__t{ color:var(--wp-ink); }
.wp-tabw.is-active .wp-num{ color:var(--wp-acc); }
.wp-tab__chev{ display:none; }
.wp-tab__bar{ position:absolute; left:0; right:0; bottom:-1px; height:2px; overflow:hidden; opacity:0; }
.wp-tab__bar i{ display:block; width:0; height:100%; background:var(--wp-acc); }
.wp-tabs.is-auto .wp-tabw.is-active .wp-tab__bar{ opacity:1; }
.wp-tabs.is-auto .wp-tabw.is-active .wp-tab__bar i{ animation:wp-prog var(--wp-interval, 6s) linear forwards; }
@keyframes wp-prog{ to{ width:100%; } }
.wp-tab__inline{ display:none; }
.wp-tabs__panel{ position:sticky; top:calc(var(--nav-h) + 24px); display:grid; }
.wp-pane{ grid-area:1 / 1; opacity:0; visibility:hidden; transition:opacity .45s ease, visibility 0s linear .45s; }
.wp-pane.is-active{ opacity:1; visibility:visible; transition:opacity .45s ease, visibility 0s; }
.wp-pane__media{ width:100%; aspect-ratio:16 / 10; border-radius:var(--radius-lg); }
.wp-pane__body{ display:flex; flex-direction:column; gap:10px; padding:22px 2px 0; }
.wp-pane .wp-t{ font-size:clamp(24px, 2.4vw, 32px); }
.wp-pane .wp-stat .wp-sv{ font-size:28px; }

/* responsive */
@media (max-width:940px){
  .wp-grid, .wp-proof{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .wp-sticky{ grid-template-columns:minmax(0, 1fr); }
  .wp-sticky__intro{ position:static; }
  .wp-blist{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:760px){
  .wp-tabs{ grid-template-columns:minmax(0, 1fr); }
  .wp-tabs__panel{ display:none; }
  .wp-tab{ align-items:center; }
  .wp-tab__chev{ display:block; width:9px; height:9px; margin-right:4px; border-right:2px solid var(--wp-acc); border-bottom:2px solid var(--wp-acc); transform:rotate(45deg); transition:transform .3s ease; }
  .wp-tabw.is-active .wp-tab__chev{ transform:rotate(-135deg); }
  .wp-tabw.is-active .wp-tab__inline{ display:grid; gap:12px; padding:0 6px 22px; }
  .wp-tab__media{ width:100%; aspect-ratio:16 / 9; border-radius:var(--radius-md); }
  .wp-tab__bar{ display:none; }
}
@media (max-width:600px){
  .wp-grid, .wp-proof{ grid-template-columns:minmax(0, 1fr); }
  .wp-row{ grid-template-columns:2.6em minmax(0, 1fr); }
  .wp-row__ico{ display:none; }
  .wp-bi{ grid-template-columns:40px minmax(0, 1fr); gap:14px; }
  .wp-circle{ width:40px; height:40px; }
}
@media (prefers-reduced-motion:reduce){
  .wp *, .wp *::before, .wp *::after{ transition:none !important; animation:none !important; }
  .wp-card:hover, .wp-pc:hover{ transform:none; }
}

/* value grid (sourcing 2x2) */
.val-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:560px){ .val-grid{ grid-template-columns:1fr; } }
.val{ border-top:var(--rule-w) solid var(--accent-line); padding:26px 26px; background:var(--surface); border-radius:0 0 var(--radius-md) var(--radius-md);
  box-shadow:var(--shadow-sm); }
.val h3{ font-size:22px; } .val p{ margin-top:10px; font-size:15px; color:var(--muted); }

/* mission cards */
.mission{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:820px){ .mission{ grid-template-columns:1fr; } }
.mcard{ display:flex; flex-direction:column; border:var(--border-w) solid var(--line); border-radius:var(--radius-lg);
  padding:40px 34px; background:var(--surface); min-height:340px; }
.mcard .mnum{ font-family:var(--display); font-weight:var(--fw-heading); font-size:72px; color:var(--accent); line-height:1; }
.mcard .bar{ width:52px; height:var(--rule-w); background:var(--accent-line); margin-top:22px; }
.mcard .mbody{ margin-top:auto; } .mcard .mbody p{ margin-top:14px; color:var(--muted); }
.mcard.ink{ background:var(--ink); border:none; }
.mcard.ink .mnum{ color:var(--accent-bright); } .mcard.ink .bar{ background:var(--accent-bright); }
.mcard.ink h3{ color:var(--on-dark-strong); } .mcard.ink .mbody p{ color:var(--muted-on-dark); }

/* ---- Mission, Vision & Values (mission_cards, src/MissionOptions.php): five designs ---- */
.mv-head{ max-width:760px; display:flex; flex-direction:column; gap:14px; }
.mv-head .mv-h{ margin:0; }
.mv-head--center{ margin-inline:auto; align-items:center; text-align:center; }
.mv .ico{ width:100%; height:100%; display:block; }
.mv-ico{ display:inline-grid; flex:0 0 auto; width:20px; height:20px; color:var(--accent); }
.mv-tagline{ margin:clamp(32px,4vw,52px) 0 0; font-family:var(--display); font-weight:var(--fw-heading); font-size:clamp(20px,2vw,28px); line-height:1.3; letter-spacing:-.01em; color:var(--ink); }
.mv-tagline--center, .mv--glass .mv-tagline{ text-align:center; }
.dark .mv-tagline{ color:var(--on-dark-strong); }
.mv-tagline--accent{ color:var(--accent-bright) !important; }

/* A · numbered cards: the original look (outlined numerals with the corporate theme, the last card dark) */
.mv-num{ margin-top:clamp(40px,5vw,64px); }
.mv-num--1{ grid-template-columns:minmax(0,1fr); } .mv-num--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.mv-num .mbody .mv-num__t{ margin-top:14px; color:var(--muted); }
.mv-nvals{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:14.5px; line-height:1.5; }
.mv-nval__l{ font-weight:700; color:var(--ink); } .mv-nval__l::after{ content:": "; }
.mv-nval__t{ color:var(--muted); }
.mcard.ink .mv-num__t, .mcard.ink .mv-nval__t{ color:var(--muted-on-dark) !important; }
.mcard.ink .mv-nval__l{ color:var(--accent-bright); }
@media (max-width:820px){ .mv-num--2{ grid-template-columns:minmax(0,1fr); } }

/* B · glass on dark: a dark textured (or picture) backdrop of its own, frosted cards, ring icons, a gold top bar */
.mv--glass{ isolation:isolate; overflow:hidden; color:var(--text-on-dark); }
.mv-glass__bg{ position:absolute; inset:0; z-index:-1; background:var(--panel); }
.mv-glass__tex{ position:absolute; inset:0;
  background:radial-gradient(70% 60% at 12% 0%, rgba(var(--accent-bright-rgb),.16), transparent 60%), radial-gradient(60% 70% at 100% 100%, rgba(var(--accent-bright-rgb),.09), transparent 62%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 1px, transparent 1px 16px), linear-gradient(180deg, var(--panel), var(--scrim)); }
.mv-glass__bg .media, .mv-glass__img{ position:absolute; inset:0; width:100%; height:100%; border-radius:0; }
/* a picture never gets lighter than 75 % behind the cards (WCAG AA for their text on any picture) */
.mv-glass__bg.has-img::after{ content:""; position:absolute; inset:0; pointer-events:none; background:rgba(var(--scrim-rgb), max(.75, var(--mv-ov, .6))); }
.mv--glass .mv-head .mv-h{ color:var(--on-dark-strong); }
.mv--glass .eyebrow{ color:var(--accent-bright); }   /* the kicker in the bright accent on the dark backdrop (AA) */
.mv-glass{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,26px); margin-top:clamp(36px,4.5vw,60px); align-items:stretch; }
.mv-glass--1{ grid-template-columns:minmax(0,640px); justify-content:center; } .mv-glass--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.mv-gcard{ position:relative; overflow:hidden; padding:clamp(28px,2.8vw,40px) clamp(24px,2.4vw,34px); border-radius:var(--radius-lg); background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13); box-shadow:0 30px 60px -36px rgba(0,0,0,.6); -webkit-backdrop-filter:blur(14px) saturate(1.15); backdrop-filter:blur(14px) saturate(1.15); }
.mv-gcard::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--accent-bright); }
.mv-ring{ display:grid; place-items:center; width:58px; height:58px; padding:15px; border-radius:50%; border:1.5px solid var(--accent-bright); color:var(--accent-bright);
  box-shadow:0 0 0 7px rgba(var(--accent-bright-rgb),.08); }
.mv-gcard__h{ margin:22px 0 0; font-size:clamp(22px,2vw,28px); color:var(--on-dark-strong); }
.mv-gcard__h .accent{ color:var(--accent-bright); }
.mv-gcard__t{ margin-top:12px; color:var(--muted-on-dark); line-height:1.65; }
.mv-gvals{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.mv-gval{ font-size:14.5px; line-height:1.55; color:var(--muted-on-dark); }
.mv-vlabel{ display:block; margin-bottom:2px; font-weight:700; letter-spacing:.02em; color:var(--accent-bright); }
@media (max-width:980px){ .mv-glass, .mv-glass--2{ grid-template-columns:minmax(0,1fr); } }

/* C · split statement: Mission and Vision as large statements, Values as a list, the tagline as a pull quote */
.mv-split{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr); gap:clamp(40px,6vw,96px); align-items:start; margin-top:clamp(36px,4vw,56px); }
.mv-split--solo{ grid-template-columns:minmax(0,1fr); }
.mv-stmt + .mv-stmt{ margin-top:clamp(32px,4vw,56px); padding-top:clamp(32px,4vw,56px); border-top:var(--border-w) solid var(--line); }
.mv-stmt__l{ display:flex; align-items:center; gap:10px; margin:0; font-family:var(--label); font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.mv-stmt__t{ margin-top:14px; font-family:var(--display); font-weight:var(--fw-heading); font-size:clamp(20px,1.9vw,27px); line-height:1.36; letter-spacing:-.01em; color:var(--ink); text-wrap:pretty; }
.mv-split__side{ position:sticky; top:calc(var(--nav-h) + 32px); }
.mv-split__intro{ margin-top:12px; color:var(--muted); }
.mv-vrows{ list-style:none; margin:16px 0 0; padding:0; }
.mv-vrow{ display:grid; gap:4px; padding:16px 0; border-bottom:1px solid var(--line); }
.mv-vrow:first-child{ border-top:1px solid var(--line); }
.mv-vrow__l{ font-size:16.5px; font-weight:700; color:var(--ink); }
.mv-vrow__t{ font-size:14.5px; line-height:1.55; color:var(--muted); }
.mv-quote{ margin:clamp(40px,5vw,72px) 0 0; padding:clamp(22px,2.6vw,32px) 0 0; border-top:var(--rule-w) solid var(--accent-line); }
.mv-quote p{ margin:0; font-family:var(--display); font-weight:var(--fw-heading); font-size:clamp(26px,3.4vw,46px); line-height:1.12; letter-spacing:-.02em; color:var(--ink); }
.mv-quote p::before{ content:"“"; color:var(--accent); } .mv-quote p::after{ content:"”"; color:var(--accent); }
@media (max-width:880px){ .mv-split{ grid-template-columns:minmax(0,1fr); } .mv-split__side{ position:static; } }

/* D · interactive tabs (an accordion on phones; site.js initMissionTabs). Without script every panel shows. */
.mv-tabs{ margin-top:clamp(32px,4vw,48px); }
.mv-tabs__list{ display:flex; flex-wrap:wrap; gap:6px; padding:6px; width:max-content; max-width:100%; border-radius:999px; background:var(--bg-alt); }
.mv-tabs__list[hidden]{ display:none; }
.mv-tab{ display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border:0; border-radius:999px; background:transparent; font:600 15px/1 var(--body); color:var(--muted); cursor:pointer;
  transition:background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.mv-tab .mv-ico{ width:18px; height:18px; }
.mv-tab[aria-selected="true"]{ background:var(--surface); color:var(--ink); box-shadow:0 8px 18px -12px rgba(var(--scrim-rgb),.55); }
.mv-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.mv-panels{ margin-top:clamp(24px,3vw,36px); }
.mv-panel + .mv-panel{ margin-top:clamp(28px,3vw,40px); }
.mv-panel__h{ display:flex; align-items:center; gap:10px; margin:0; font-size:clamp(20px,2vw,26px); }
.mv-panel__h .mv-ico{ width:22px; height:22px; }
.mv-panel__t{ margin-top:12px; max-width:64ch; font-size:clamp(17px,1.4vw,20px); line-height:1.6; color:var(--muted); }
.mv-tabs.is-tabs .mv-panel:not(.is-active){ display:none; }
.mv-tabs.is-tabs .mv-panel + .mv-panel{ margin-top:0; }
.mv-tabs.is-tabs .mv-panel__h{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.mv-tabs.is-acc .mv-panel{ border-bottom:var(--border-w) solid var(--line); }
.mv-tabs.is-acc .mv-panel + .mv-panel{ margin-top:0; }
.mv-tabs.is-acc .mv-panel:first-child{ border-top:var(--border-w) solid var(--line); }
/* accordion: the heading stays as it is; a button labelled by it covers the row */
.mv-acc{ display:none; }
.mv-tabs.is-acc .mv-panel__h{ position:relative; padding:18px 36px 18px 0; }
.mv-tabs.is-acc .mv-acc{ display:block; position:absolute; inset:0; width:100%; padding:0; border:0; background:none; cursor:pointer; }
.mv-acc::after{ content:""; position:absolute; right:6px; top:50%; width:9px; height:9px; margin-top:-7px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); rotate:45deg; transition:rotate .25s ease, margin-top .25s ease; }
.mv-acc[aria-expanded="true"]::after{ rotate:225deg; margin-top:-2px; }
.mv-acc:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.cms-editing .mv-acc{ display:none !important; }
.mv-tabs.is-acc .mv-panel:not(.is-open) .mv-panel__body{ display:none; }
.mv-tabs.is-acc .mv-panel__body{ padding-bottom:20px; }
.mv-chips{ list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px; }
.mv-chip{ position:relative; padding:18px; border:var(--border-w) solid var(--line); border-radius:var(--radius-md); background:var(--surface); }
.mv-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.mv-chip__l{ display:block; font-weight:700; color:var(--ink); }
.mv-chip__t{ display:block; margin-top:8px; font-size:14px; line-height:1.5; color:var(--muted); }
/* the value's text shows on hover or keyboard focus where there is a pointer; always on touch screens */
@media (hover:hover){
  .mv-chip__t{ max-height:0; margin-top:0; opacity:0; overflow:hidden; transition:max-height .35s var(--mo-ease), margin-top .3s ease, opacity .3s ease; }
  .mv-chip:is(:hover, :focus-visible, :focus-within) .mv-chip__t{ max-height:14em; margin-top:8px; opacity:1; }
  .mv-chip:is(:hover, :focus-visible){ border-color:var(--accent); }
}
@media (prefers-reduced-motion:no-preference){
  html:not([data-motion="off"]) .mv-tabs:is(.is-tabs, .is-acc) .mv-panel:is(.is-active, .is-open) .mv-panel__body{ animation:mv-in .45s var(--mo-ease) both; }
}
@keyframes mv-in{ from{ opacity:0; translate:0 10px; } }
html[data-motion="off"] .mv-chip__t, html[data-motion="off"] .mv-tab, html[data-motion="off"] .mv-acc::after{ transition:none; }
@media (prefers-reduced-motion:reduce){ .mv-chip__t, .mv-tab, .mv-acc::after{ transition:none; } }
/* editing: every panel and every value text in view */
.cms-editing .mv-tabs .mv-panel{ display:block !important; }
.cms-editing .mv-tabs .mv-panel__body{ display:block !important; }
.cms-editing .mv-chip__t{ max-height:none !important; margin-top:8px !important; opacity:1 !important; }

/* E · values grid: Mission and Vision in a sand band, the values in a grid with icons, the tagline centred */
.mv-band{ --accent:var(--accent-on-alt); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,4vw,64px); margin-top:clamp(32px,4vw,52px);
  padding:clamp(28px,4vw,56px); border-radius:var(--radius-lg); background:var(--bg-alt); }
.mv-band--1{ grid-template-columns:minmax(0,1fr); }
.mv-band__h{ display:flex; align-items:center; gap:10px; margin:0; font-size:clamp(20px,1.9vw,26px); }
.mv-band__t{ margin-top:12px; color:var(--muted); line-height:1.65; }
.mv-vgrid-head{ margin-top:clamp(40px,5vw,64px); text-align:center; }
.mv-vgrid-head__h{ display:inline-flex; align-items:center; gap:10px; margin:0; font-size:clamp(20px,1.9vw,26px); }
.mv-vgrid-head__t{ max-width:60ch; margin:10px auto 0; color:var(--muted); }
.mv-vgrid{ list-style:none; margin:clamp(20px,2.4vw,28px) 0 0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(12px,1.4vw,18px); }
.mv-vgrid--1, .mv-vgrid--2, .mv-vgrid--3, .mv-vgrid--4{ grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); }
.mv-vcell{ display:flex; flex-direction:column; padding:clamp(18px,1.8vw,24px); border:var(--border-w) solid var(--line); border-radius:var(--radius-md); background:var(--surface); }
.mv-vcell__ico{ display:grid; place-items:center; width:46px; height:46px; padding:12px; border-radius:50%; background:rgba(var(--accent-rgb),.1); color:var(--accent); }
.mv-vcell__l{ margin-top:14px; font-size:16.5px; font-weight:700; color:var(--ink); }
.mv-vcell__t{ margin-top:6px; font-size:14px; line-height:1.55; color:var(--muted); }
@media (max-width:1100px){ .mv-vgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){ .mv-band{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:640px){ .mv-vgrid, .mv-vgrid--1, .mv-vgrid--2, .mv-vgrid--3, .mv-vgrid--4{ grid-template-columns:minmax(0,1fr); } }

/* leadership */
.leaders{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); }
@media (max-width:720px){ .leaders{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; } }
.leader .media{ width:100%; height:auto; aspect-ratio:4/5; border-radius:var(--radius-lg); }
.leader .role{ font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-top:24px; }
.leader h3{ font-size:30px; margin-top:8px; }
.leader p{ margin-top:12px; color:var(--muted); }

/* ---- People (leaders, src/PeopleOptions.php): eight designs ---- */
.pp-head{ max-width:760px; display:flex; flex-direction:column; gap:14px; margin-bottom:clamp(32px,4vw,56px); }
.pp-head .pp-h{ margin:0; }
.pp-head .pp-lead{ margin:0; }
.pp-photo{ width:100%; aspect-ratio:4 / 5; border-radius:var(--radius-lg); }
/* no photo: the initials on a soft tint, never a broken image */
.pp-mono, .cm-mono{ display:grid; place-items:center; background:linear-gradient(150deg, rgba(var(--accent-rgb),.16), rgba(var(--accent-rgb),.05)), var(--bg-alt); color:var(--accent); }
.pp-mono span, .cm-mono span{ font-family:var(--display); font-weight:var(--fw-heading); font-size:clamp(28px,4vw,52px); letter-spacing:.02em; }
.dark .pp-mono, .dark .cm-mono{ background:linear-gradient(150deg, rgba(var(--accent-bright-rgb),.2), rgba(var(--accent-bright-rgb),.05)), rgba(255,255,255,.04); color:var(--accent-bright); }
.pp-role{ margin:0; font-family:var(--label); font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.pp-name{ margin:6px 0 0; font-size:clamp(19px,1.7vw,24px); line-height:1.25; }
.pp-co{ margin:4px 0 0; font-size:14px; color:var(--faint); }
.pp-bio{ margin:10px 0 0; color:var(--muted); line-height:1.6; }
.pp-links{ display:flex; gap:8px; margin:12px 0 0; }
.pp-link{ display:grid; place-items:center; width:34px; height:34px; border:var(--border-w) solid var(--line); border-radius:50%; color:var(--ink); transition:border-color .2s ease, color .2s ease; }
.pp-link:hover, .pp-link:focus-visible{ border-color:var(--accent); color:var(--accent); }
.pp-cta{ margin-top:clamp(32px,4vw,52px); }
.pp-meta{ padding-top:18px; }
/* A · portrait grid */
.pp-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,2.4vw,36px) clamp(16px,2vw,28px); }
.pp-grid--1{ grid-template-columns:minmax(0,420px); } .pp-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:900px; } .pp-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:1000px){ .pp-grid, .pp-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){ .pp-grid, .pp-grid--2, .pp-grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:460px){ .pp-grid, .pp-grid--2, .pp-grid--3{ grid-template-columns:minmax(0,1fr); max-width:400px; } }
/* B · featured + grid */
.pp-feat{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,4vw,64px); align-items:center; margin-bottom:clamp(36px,4.5vw,64px); }
.pp-feat .pp-name{ font-size:clamp(26px,2.8vw,40px); }
.pp-feat .pp-bio{ font-size:clamp(16px,1.3vw,18px); max-width:58ch; }
.pp-grid.pp-grid--small{ grid-template-columns:repeat(auto-fill, minmax(150px, 230px)); max-width:none; }
.pp-grid--small .pp-photo{ aspect-ratio:1; }
.pp-grid--small .pp-name{ font-size:17px; }
@media (max-width:820px){ .pp-feat{ grid-template-columns:minmax(0,1fr); } .pp-feat__photo{ max-width:420px; } }
/* C · hover reveal cards: the bio slides up on hover, keyboard focus or tap (always shown without a pointer) */
.pp-hover{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px); }
.pp-hover--1{ grid-template-columns:minmax(0,380px); } .pp-hover--2{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:820px; } .pp-hover--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.pp-hcard{ position:relative; overflow:hidden; isolation:isolate; border-radius:var(--radius-lg); aspect-ratio:3 / 4; outline:none; color:var(--text-on-dark); }
.pp-hcard:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.pp-hcard .pp-hcard__photo{ position:absolute; inset:0; z-index:-2; height:100%; aspect-ratio:auto; border-radius:0; }
.pp-hcard::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, transparent 35%, rgba(var(--scrim-rgb),.88)); }
.pp-hcard__body{ position:absolute; left:0; right:0; bottom:0; padding:clamp(16px,1.8vw,24px); }
.pp-hcard .pp-role{ color:var(--accent-bright); }
.pp-hcard .pp-name{ color:var(--on-dark-strong); }
.pp-hcard .pp-co{ color:var(--muted-on-dark); }
.pp-hcard .pp-bio{ color:var(--text-on-dark); font-size:14.5px; }
.pp-hcard .pp-link{ border-color:var(--line-on-dark); color:var(--on-dark-strong); }
@media (hover:hover){
  .pp-hcard__more{ display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .45s var(--mo-ease), opacity .35s ease; }
  .pp-hcard__more > *{ overflow:hidden; min-height:0; }
  .pp-hcard:is(:hover, :focus-within) .pp-hcard__more{ grid-template-rows:1fr; opacity:1; }
  .pp-hcard:is(:hover, :focus-within)::after{ background:linear-gradient(180deg, rgba(var(--scrim-rgb),.2) 10%, rgba(var(--scrim-rgb),.92)); }
}
@media (max-width:1000px){ .pp-hover, .pp-hover--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){ .pp-hover, .pp-hover--2, .pp-hover--3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:460px){ .pp-hover, .pp-hover--2, .pp-hover--3{ grid-template-columns:minmax(0,1fr); } }
/* D · carousel (the logo carousel's rail, arrows and dots) */
.tl-carousel.pp-car{ --tl-per:3.3; --tl-gap:clamp(16px,2vw,24px); }
.pp-car .tl-rail{ list-style:none; margin:0; padding:0 0 4px; }
.pp-car .tl-item.pp-ccard{ list-style:none; display:block; min-height:0; padding:0; text-align:left; }
@media (max-width:1000px){ .tl-carousel.pp-car{ --tl-per:2.3; } }
@media (max-width:640px){ .tl-carousel.pp-car{ --tl-per:1.25; } }
/* E · editorial list: photo left / right in turn, a longer bio */
.pp-edit{ display:flex; flex-direction:column; gap:clamp(40px,5vw,80px); }
.pp-erow{ display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:clamp(28px,4vw,72px); align-items:center; }
.pp-erow--flip{ grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); }
.pp-erow--flip .pp-erow__photo{ order:2; }
.pp-erow .pp-name{ font-size:clamp(24px,2.4vw,34px); }
.pp-erow .pp-bio{ font-size:clamp(16px,1.25vw,18px); max-width:60ch; }
@media (max-width:820px){ .pp-erow, .pp-erow--flip{ grid-template-columns:minmax(0,1fr); } .pp-erow--flip .pp-erow__photo{ order:0; } .pp-erow__photo{ max-width:420px; } }
/* F · compact list (and the strips of G / H): round avatars, name and role */
.pp-compact, .pp-strip{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:18px 28px; }
.pp-crow{ display:flex; align-items:center; gap:14px; min-width:0; }
.pp-avatar{ flex:0 0 auto; width:60px; height:60px; aspect-ratio:1; border-radius:50%; }
.pp-avatar.pp-mono span{ font-size:18px; }
.pp-crow .pp-role{ font-size:11.5px; order:2; margin-top:3px; letter-spacing:.1em; }
.pp-crow__t{ display:flex; flex-direction:column; min-width:0; }
.pp-crow .pp-name{ margin:0; font-size:16.5px; }
.pp-crow .pp-co{ order:3; font-size:13px; }
/* G · tiered: a leadership row, then team rows, each with its heading */
.pp-tier + .pp-tier{ margin-top:clamp(36px,4.5vw,64px); padding-top:clamp(28px,3.4vw,44px); border-top:var(--border-w) solid var(--line); }
.pp-tier__h{ margin:0 0 clamp(18px,2vw,26px); font-family:var(--label); font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.pp-tier--lead .pp-grid{ justify-content:start; }
/* H · team photo: a wide group photo, the heading beside it, a people strip below */
.pp-head--split{ max-width:none; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end; gap:12px clamp(28px,4vw,64px); }
.pp-head--split .eyebrow{ grid-column:1 / -1; }
.pp-team{ margin:0; }
.pp-team .pp-team__photo{ width:100%; aspect-ratio:21 / 9; border-radius:var(--radius-lg); }
.pp-team__cap{ margin-top:12px; font-size:14px; color:var(--faint); }
.pp-strip{ margin-top:clamp(28px,3.4vw,44px); }
@media (max-width:820px){ .pp-head--split{ grid-template-columns:minmax(0,1fr); } .pp-team .pp-team__photo{ aspect-ratio:16 / 9; } }
.dark .pp-name, .alt .pp-name{ color:inherit; }
.dark .pp-role{ color:var(--accent-bright); } .dark .pp-bio{ color:var(--muted-on-dark); } .dark .pp-co, .dark .pp-team__cap{ color:var(--faint-on-dark); }
@media (prefers-reduced-motion:reduce){ .pp-hcard__more, .pp-link{ transition:none; } }
html[data-motion="off"] .pp-hcard__more{ transition:none; }

/* ---- Chairman's message (chairman_message, src/ChairmanOptions.php): five designs ---- */
.cm-h{ margin:0; }
.cm-h--small{ font-size:clamp(18px,1.6vw,22px); }
.cm-quote{ margin:0; }
.cm-quote p{ margin:0; font-family:var(--display); font-weight:var(--fw-heading); font-size:clamp(24px,2.6vw,36px); line-height:1.22; letter-spacing:-.015em; color:var(--ink); }
.cm-quote .accent{ color:var(--accent); }
.dark .cm-quote p{ color:var(--on-dark-strong); } .dark .cm-quote .accent{ color:var(--accent-bright); }
.cm-msg p{ margin:0; color:var(--muted); line-height:1.7; }
.cm-msg p + p{ margin-top:14px; }
.dark .cm-msg p{ color:var(--muted-on-dark); }
.cm-who{ display:flex; flex-direction:column; gap:2px; }
.cm-name{ margin:0; font-family:var(--display); font-weight:var(--fw-heading); font-size:19px; color:var(--ink); }
.cm-title{ margin:0; font-size:14px; font-weight:600; color:var(--accent); }
.cm-org{ margin:0; font-size:14px; color:var(--faint); }
.dark .cm-name{ color:var(--on-dark-strong); } .dark .cm-title{ color:var(--accent-bright); } .dark .cm-org{ color:var(--muted-on-dark); }
.cm-sig{ display:flex; align-items:flex-end; gap:20px; margin-top:24px; }
.cm-sig__img{ width:clamp(120px,14vw,180px); aspect-ratio:3 / 1; background:none; border-radius:0; }
.cm-sig__img img{ object-fit:contain; object-position:left center; }
.dark .cm-sig__img img{ filter:invert(1) brightness(1.6); }
.cm-avatar{ width:72px; height:72px; aspect-ratio:1; border-radius:50%; flex:0 0 auto; }
.cm-avatar.cm-mono span{ font-size:22px; }
/* A · glass split: its own dark backdrop (texture or picture), a glass card, a framed portrait with a name plate */
.cm--glass-split{ isolation:isolate; overflow:hidden; color:var(--text-on-dark); }
.cm-bg{ position:absolute; inset:0; z-index:-1; background:var(--panel); }
.cm-bg__tex{ position:absolute; inset:0; background:radial-gradient(60% 70% at 85% 10%, rgba(var(--accent-bright-rgb),.16), transparent 60%),
  repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 1px, transparent 1px 16px), linear-gradient(180deg, var(--panel), var(--scrim)); }
.cm-bg .media, .cm-bg__img{ position:absolute; inset:0; width:100%; height:100%; border-radius:0; }
.cm-bg.has-img::after{ content:""; position:absolute; inset:0; pointer-events:none; background:rgba(var(--scrim-rgb), max(.75, var(--cm-ov, .6))); }
.cm-gs{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(24px,3.4vw,56px); align-items:center; }
.cm-gs__card{ display:flex; flex-direction:column; gap:18px; padding:clamp(28px,3.4vw,52px); border-radius:var(--radius-lg); background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13); box-shadow:0 30px 60px -36px rgba(0,0,0,.6); -webkit-backdrop-filter:blur(14px) saturate(1.15); backdrop-filter:blur(14px) saturate(1.15); }
.cm-gs__card .eyebrow{ color:var(--accent-bright); }
.cm-gs__card .cm-h{ color:var(--on-dark-strong); font-size:clamp(20px,1.8vw,26px); }
.cm-gs__portrait{ position:relative; margin:0; padding:10px; border-radius:var(--radius-lg); border:1px solid rgba(var(--accent-bright-rgb),.45); background:rgba(255,255,255,.04); }
.cm-gs__portrait .cm-gs__photo{ width:100%; aspect-ratio:4 / 5; border-radius:calc(var(--radius-lg) - 6px); }
.cm-plate{ position:absolute; left:22px; right:22px; bottom:22px; padding:14px 18px; border-radius:var(--radius-md); background:rgba(var(--scrim-rgb),.86); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
@media (max-width:900px){ .cm-gs{ grid-template-columns:minmax(0,1fr); } .cm-gs__portrait{ max-width:440px; } }
.cm-gs.cm-gs--solo{ grid-template-columns:minmax(0,1fr); max-width:900px; }
/* B · portrait overlay: the portrait bleeds to the page edge, the message beside it */
.cm--portrait-overlay{ padding-block:0; }
.cm-po{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; min-height:clamp(520px,70vh,760px); }
.cm-po__media{ position:relative; margin:0; overflow:hidden; }
.cm-po__media .cm-po__photo{ position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; border-radius:0; }
.cm-po__body{ display:flex; flex-direction:column; justify-content:center; gap:20px; padding:clamp(48px,6vw,104px) max(var(--gutter, 24px), calc((100vw - var(--wrap, 1240px)) / 2)) clamp(48px,6vw,104px) clamp(32px,5vw,88px); }
@media (max-width:860px){ .cm-po{ grid-template-columns:minmax(0,1fr); } .cm-po__media{ min-height:420px; } .cm-po__body{ padding:clamp(36px,8vw,56px) var(--gutter, 24px); } }
.cm-po.cm-po--solo{ grid-template-columns:minmax(0,1fr); min-height:0; }
.cm-po--solo .cm-po__body{ padding-left:max(var(--gutter, 24px), calc((100vw - var(--wrap, 1240px)) / 2)); }
/* C · centered quote */
.cm-cq{ display:flex; flex-direction:column; align-items:center; gap:20px; max-width:960px; text-align:center; }
.cm-quote--xl p{ font-size:clamp(28px,3.8vw,54px); line-height:1.12; }
.cm-quote--xl p::before{ content:"“"; display:block; height:.55em; font-size:1.6em; line-height:1; color:var(--accent); }
.cm-msg--narrow{ max-width:62ch; }
.cm-cq__foot{ display:flex; align-items:center; gap:16px; margin-top:12px; text-align:left; }
.cm-cq__who .cm-sig__img{ width:140px; }
/* D · editorial letter: a readable column, a drop cap, the signature block at the end */
.cm-letter{ max-width:760px; display:flex; flex-direction:column; gap:22px; }
.cm-letter__head{ display:flex; flex-direction:column; gap:12px; }
.cm-quote--pull{ padding-left:22px; border-left:var(--rule-w) solid var(--accent-line); }
.cm-quote--pull p{ font-size:clamp(22px,2.2vw,30px); }
.cm-msg--letter p{ font-size:clamp(16.5px,1.25vw,18.5px); line-height:1.8; color:var(--ink); }
.cm-msg--letter p:first-child::first-letter{ float:left; margin:.06em .12em 0 0; font-family:var(--display); font-weight:var(--fw-heading); font-size:3.4em; line-height:.85; color:var(--accent); }
.cm-letter__sign{ display:flex; align-items:center; gap:18px; margin-top:12px; padding-top:22px; border-top:var(--border-w) solid var(--line); }
.cm-avatar--sm{ width:60px; height:60px; }
/* E · minimal band: the quote, a portrait thumbnail, "Read the full message" */
.cm-band{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(18px,2.4vw,36px); align-items:start; padding:clamp(26px,3.4vw,48px); border-radius:var(--radius-lg); background:var(--bg-alt); --accent:var(--accent-on-alt); }
.cm-avatar--band{ width:clamp(64px,7vw,96px); height:clamp(64px,7vw,96px); }
.cm-band__body{ display:flex; flex-direction:column; gap:14px; }
.cm-quote--band p{ font-size:clamp(22px,2.3vw,32px); }
.cm-who--row{ flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
.cm-who--row .cm-name{ font-size:16.5px; }
.cm-more{ border-top:var(--border-w) solid var(--line); }
.cm-more__s{ display:inline-flex; align-items:center; gap:10px; padding:14px 0 4px; list-style:none; cursor:pointer; font-weight:600; color:var(--ink); }
.cm-more__s::-webkit-details-marker{ display:none; }
.cm-more__s:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.cm-more__i{ width:9px; height:9px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); rotate:45deg; translate:0 -2px; transition:rotate .25s ease; }
.cm-more[open] .cm-more__i{ rotate:225deg; translate:0 2px; }
.cm-more__b{ display:flex; flex-direction:column; gap:14px; padding-top:12px; }
.cm-band.cm-band--solo{ grid-template-columns:minmax(0,1fr); }
@media (max-width:560px){ .cm-band{ grid-template-columns:minmax(0,1fr); } }
@media (prefers-reduced-motion:reduce){ .cm-more__i{ transition:none; } }

/* callout / vision band */
.band{ background:var(--panel); color:var(--text-on-dark); }
.band .big{ font-family:var(--display); font-weight:600; font-size:clamp(30px,4.4vw,58px);
  line-height:1.15; letter-spacing:-.02em; max-width:20ch; }
.band .big .accent{ color:var(--accent-bright); }
.band .lead{ color:var(--muted-on-dark); }

/* CTA band */
.cta-band{ position:relative; overflow:hidden; }
.cta-cards{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:720px){ .cta-cards{ grid-template-columns:1fr; } }
.cta-card{ display:flex; flex-direction:column; background:var(--cta-card-bg); border:var(--border-w) solid var(--cta-card-line);
  border-radius:var(--radius-lg); padding:40px; transition:transform .25s ease, border-color .25s ease, background .25s ease; }
.cta-card:hover{ transform:translateY(-4px); border-color:var(--cta-card-line-hover); }
.cta-card--accent{ background:var(--btn-bg); border-color:var(--btn-bg); }
.cta-card--accent:hover{ background:var(--btn-bg-hover); border-color:var(--btn-bg-hover); }
.cta-kicker{ font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--cta-kicker); }
.cta-card--accent .cta-kicker{ color:rgba(var(--btn-text-rgb),.72); }
.cta-url{ font-family:var(--display); font-weight:600; font-size:clamp(28px,3vw,40px); color:var(--text-on-dark);
  margin-top:16px; word-break:break-word; }
.cta-card--accent .cta-url{ color:var(--btn-text); }
.cta-go{ margin-top:auto; padding-top:34px; font-size:15px; font-weight:600; color:var(--soft-on-dark);
  display:inline-flex; align-items:center; gap:10px; }
.cta-card--accent .cta-go{ color:var(--btn-text); }
.cta-card .arw{ transition:transform .25s ease; }
.cta-card:hover .arw{ transform:translateX(5px); }

/* ---------- forms ---------- */
.form{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1 / -1; }
@media (max-width:640px){ .form{ grid-template-columns:1fr; } .field{ grid-column:1 / -1 !important; } }
.field label{ font-size:14px; font-weight:600; letter-spacing:.02em; color:var(--ink); }
.field .req{ color:var(--accent); }
.field input, .field select, .field textarea{
  font-family:var(--body); font-size:16px; color:var(--ink); background:var(--surface);
  border:var(--border-w) solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; width:100%;
  transition:border-color .18s ease, box-shadow .18s ease; }
.field textarea{ resize:vertical; min-height:140px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12); }
.form-note{ font-size:14px; color:var(--faint); }
.form-success{ display:none; background:var(--surface); border:var(--border-w) solid var(--line); border-left:4px solid var(--accent-line);
  border-radius:var(--radius-md); padding:26px 28px; }
.form-success.show{ display:block; }
.form-success h3{ font-size:22px; } .form-success p{ margin-top:8px; color:var(--muted); }
.form-success__ic{ display:grid; place-items:center; width:44px; height:44px; margin-bottom:16px; border-radius:50%; background:rgba(var(--accent-rgb),.12); color:var(--accent); }
.form-success__ic svg{ display:block; }

/* contact detail list */
.cdetails{ display:flex; flex-direction:column; gap:28px; }
.cdetail .k{ font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.cdetail .v{ font-size:18px; margin-top:8px; line-height:1.5; }
.cdetail a.v:hover{ color:var(--accent); }

/* ---------- footer ---------- */
.footer{ background:var(--panel); color:var(--muted-on-dark); padding-block:clamp(56px,7vw,88px) 34px; }
.footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
@media (max-width:880px){ .footer-top{ grid-template-columns:1fr 1fr; gap:36px 24px; } }
@media (max-width:520px){ .footer-top{ grid-template-columns:1fr; } }
.footer-brand .footer-logo{ display:block; height:var(--footer-logo-h); width:auto; max-width:none; object-fit:contain; }
.footer-brand p{ margin-top:20px; max-width:34ch; font-size:15px; line-height:1.6; color:var(--faint-on-dark); }
.footer h4{ font-family:var(--body); font-size:13px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-on-dark); }
.footer .fcol ul{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.footer .fcol a{ font-size:15px; color:var(--muted-on-dark); transition:color .18s ease; }
.footer .fcol a:hover{ color:var(--text-on-dark); }
.footer-bottom{ margin-top:clamp(44px,6vw,72px); padding-top:26px; border-top:1px solid var(--footer-line);
  display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between;
  font-size:13px; color:var(--footer-meta); }
.footer-bottom .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent-fill); display:inline-block; margin:0 10px; vertical-align:middle; }

/* ---------- footer (site setting "footer", FooterOptions): six styles, light / sand / dark ----------
   --ft-* hold the scheme's colours (theme tokens only). Groups that are switched
   off or empty are not rendered at all, so nothing leaves a gap. */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.ft{ --ft-bg:var(--bg); --ft-ink:var(--ink); --ft-text:var(--muted); --ft-meta:var(--faint); --ft-line:var(--line); --ft-acc:var(--accent); --ft-soft:var(--surface);
  background:var(--ft-bg); color:var(--ft-text); padding-block:clamp(56px, 7vw, 88px) 30px; }
.ft--bg-sand{ --ft-bg:var(--bg-alt); --ft-acc:var(--accent-on-alt); }
.ft--bg-dark{ --ft-bg:var(--panel); --ft-ink:var(--on-dark-strong); --ft-text:var(--muted-on-dark); --ft-meta:var(--footer-meta); --ft-line:var(--footer-line); --ft-acc:var(--accent-bright); --ft-soft:transparent; }
@supports (color:color-mix(in srgb, red 50%, transparent)){
  .ft{ --ft-soft:color-mix(in srgb, var(--accent) 9%, var(--ft-bg)); --ft-line:color-mix(in srgb, var(--ink) 15%, transparent); }
  .ft--bg-dark{ --ft-soft:color-mix(in srgb, var(--accent-bright) 11%, var(--panel)); --ft-line:var(--footer-line); }
}
.ft a{ color:inherit; text-decoration:none; transition:color .18s ease, background .2s ease, border-color .2s ease; }
.ft a:hover{ color:var(--ft-ink); }
.ft a:focus-visible, .ft summary:focus-visible{ outline:2px solid var(--ft-acc); outline-offset:3px; border-radius:4px; }
.ft .footer-logo{ display:block; height:var(--footer-logo-h); width:auto; max-width:100%; object-fit:contain; }
.ft-home{ display:inline-block; }
.ft-wordtext{ font-family:var(--display); font-weight:var(--fw-heading); font-size:24px; letter-spacing:-.01em; color:var(--ft-ink); }
.ft-tagline{ margin:18px 0 0; max-width:36ch; font-size:15px; line-height:1.6; color:var(--ft-text); }
.ft-h, .ft-col__h{ margin:0; font-family:var(--body); font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ft-ink); }
.ft-ico{ width:17px; height:17px; flex:0 0 auto; color:var(--ft-acc); }
/* menu columns (accordions on phones) */
.ft-nav{ display:grid; grid-template-columns:repeat(auto-fit, minmax(118px, 1fr)); gap:28px; }
.ft-col summary{ display:flex; align-items:center; justify-content:space-between; gap:12px; list-style:none; cursor:default; }
.ft-col summary::-webkit-details-marker{ display:none; }
.ft-col__chev{ display:none; }
.ft-links, .ft-clist{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; font-size:15px; }
.ft-clist a, .ft-loc__row{ display:inline-flex; align-items:center; gap:9px; }
.ft-main{ display:flex; flex-wrap:wrap; gap:40px clamp(28px, 4vw, 64px); }
.ft-main > .ft-side{ flex:1 1 260px; max-width:380px; }
.ft-main > .ft-brand{ flex:1 1 240px; max-width:360px; }
.ft-main > .ft-nav{ flex:3 1 420px; }
.ft-main > .ft-contact{ flex:1 1 200px; }
.ft-main > .ft-apps{ flex:1 1 200px; margin:0; align-content:flex-start; }
/* locations */
.ft-locs{ display:flex; flex-wrap:wrap; gap:24px 48px; margin-top:clamp(36px, 5vw, 56px); padding-top:28px; border-top:1px solid var(--ft-line); }
.ft-loc{ min-width:180px; display:flex; flex-direction:column; gap:6px; font-size:14.5px; }
.ft-loc__name{ margin:0; font-family:var(--display); font-weight:600; font-size:16px; color:var(--ft-ink); }
.ft-loc__city{ margin:0; }
.ft-loc__addr{ font-style:normal; line-height:1.55; }
.ft-loc__row{ margin:0; }
.ft .ft-loc__map{ display:inline-flex; align-items:center; gap:8px; margin-top:4px; font-size:14px; font-weight:600; color:var(--ft-acc); }
.ft .ft-loc__map:hover{ color:var(--ft-ink); }
.ft-locs--cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:16px; margin:0 0 clamp(40px, 5vw, 60px); padding:0; border:0; }
.ft-locs--cards .ft-loc{ padding:22px 22px 24px; border:1px solid var(--ft-line); border-radius:var(--radius-lg); background:var(--ft-soft); }
.ft-locs--cards .ft-loc__name{ font-size:20px; }
/* socials, app badges */
.ft-social{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.ft-social a{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--ft-line); color:var(--ft-ink); }
.ft-social a:hover{ background:var(--accent-fill); border-color:var(--accent-fill); color:var(--on-accent); }
.ft-social .ft-ico{ color:currentColor; }
.ft-apps{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.ft-app{ display:inline-flex; align-items:center; gap:10px; padding:8px 14px 8px 12px; border:1px solid var(--ft-line); border-radius:10px; color:var(--ft-ink); }
.ft-app:hover{ border-color:var(--ft-acc); }
.ft-app .ft-ico{ width:22px; height:22px; color:var(--ft-ink); }
.ft-app small{ display:block; font-size:10px; line-height:1.2; letter-spacing:.04em; color:var(--ft-text); }
.ft-app b{ display:block; font-size:15px; font-weight:600; line-height:1.25; }
/* a gradient set in the footer panel, over the background colour (wins over the theme's watermark) */
.footer.ft--grad{ background-image:var(--ft-grad); }
/* bottom bar */
.ft-bottom{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; margin-top:clamp(40px, 5vw, 64px); padding-top:24px; border-top:1px solid var(--ft-line); font-size:13px; color:var(--ft-meta); }
.ft-copy{ margin:0 auto 0 0; }
/* copyright + credit: always the last line of the footer (below legal links and socials when there are any) */
.ft-bottom > .ft-copy:not(:only-child){ order:9; flex-basis:100%; }
.ft-credit a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.ft-credit a:hover, .ft-credit a:focus-visible{ color:var(--ft-ink); }
.ft-legal{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 20px; }
.ft-bottom .ft-social a{ width:34px; height:34px; }
/* B · big brand: an oversized wordmark at the bottom edge */
.ft-main > .ft-side .ft-locs{ margin:0; padding:0; border:0; flex-direction:column; gap:18px; }
.ft-mega{ margin-top:clamp(40px, 6vw, 80px); overflow:hidden; line-height:.8; }
.ft-mega span{ display:block; text-align:center; white-space:nowrap; font-family:var(--display); font-weight:800; font-size:clamp(64px, 14vw, 240px); letter-spacing:-.05em; color:var(--ft-ink); }
.ft-tagline--wide{ max-width:60ch; margin:22px auto 0; text-align:center; }
/* C · CTA band on top */
.ft-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px 40px; margin-bottom:clamp(44px, 6vw, 72px);
  padding:clamp(28px, 4vw, 52px) clamp(24px, 4vw, 56px); border:1px solid var(--ft-line); border-radius:var(--radius-lg); background:var(--ft-soft); }
.ft .ft-cta__h{ margin:0; max-width:22ch; font-size:clamp(26px, 3vw, 40px); line-height:1.1; letter-spacing:-.02em; color:var(--ft-ink); }
.ft-cta__t{ margin:10px 0 0; max-width:56ch; font-size:16px; line-height:1.55; }
.ft .ft-cta__btn{ flex:0 0 auto; color:var(--btn-text); }
.ft-main--compact{ gap:32px clamp(24px, 3.4vw, 48px); }
.ft-main--compact .ft-tagline{ font-size:14px; }
/* E · minimal centered */
.ft--minimal-centered{ padding-block:clamp(44px, 5vw, 64px) 30px; }
.ft-center{ display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center; }
.ft-center .ft-brand{ display:flex; flex-direction:column; align-items:center; }
.ft-center .ft-tagline{ margin-top:12px; }
.ft-row{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; font-size:15px; }
.ft-center .ft-apps{ margin:0; justify-content:center; }
.ft-center .ft-bottom{ width:100%; margin-top:6px; padding-top:0; border-top:0; justify-content:center; }
.ft-center .ft-copy{ margin:0; }
/* F · split panel */
.ft-split{ display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(20px, 3vw, 40px); align-items:stretch; }
.ft-split > :only-child{ grid-column:1 / -1; }
.ft-panel{ display:flex; flex-direction:column; gap:26px; padding:clamp(26px, 3.4vw, 44px); border:1px solid var(--ft-line); border-radius:var(--radius-lg); background:var(--ft-soft); }
.ft-panel .ft-locs{ margin:0; padding:0; border:0; flex-direction:column; gap:18px; }
.ft-panel .ft-apps{ margin:0; }
.ft-split__main{ display:flex; flex-direction:column; gap:36px; padding:clamp(8px, 2vw, 24px) 0; }
@media (max-width:940px){
  .ft-split{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:720px){
  .ft-nav{ display:block; }
  .ft-col{ border-top:1px solid var(--ft-line); }
  .ft-col:last-child{ border-bottom:1px solid var(--ft-line); }
  .ft-col summary{ padding:16px 0; cursor:pointer; }
  .ft-col__chev{ display:block; width:9px; height:9px; margin-right:4px; border-right:2px solid var(--ft-acc); border-bottom:2px solid var(--ft-acc); transform:rotate(45deg); transition:transform .25s ease; }
  .ft-col[open] .ft-col__chev{ transform:rotate(-135deg); }
  .ft-col .ft-links{ margin:0 0 18px; }
  .ft-col--plain .ft-links{ margin:16px 0; }
  .ft-main > .ft-nav{ flex-basis:100%; }
  .ft-locs--cards{ grid-template-columns:minmax(0, 1fr); }
  .ft-bottom{ flex-direction:column; align-items:flex-start; }
  .ft-copy{ margin:0; }
  .ft-center .ft-bottom{ align-items:center; }
  .ft-mega span{ font-size:17vw; }
}
@media (prefers-reduced-motion:reduce){ .ft *, .ft *::after{ transition:none !important; } }

/* ---------- decorative motif (preset-provided SVG) ---------- */
.motif{ pointer-events:none; user-select:none; }
.motif path{ fill:none; stroke:var(--accent); }
.motif circle{ fill:var(--accent); }

/* ---------- brand pages: brand intro + compact hero ----------
   brand_intro: logo / tagline / story / note / chips left, up to four key facts right
   (count up through the motion system); stacks on phones. The compact hero (hero_slider
   Size = Compact, brand pages): 350 px (300 px on phones), a smaller heading, one button;
   the same slide text exit / enter and Ken Burns as the full hero. */
.bi{ --bi-ink:var(--ink); --bi-text:var(--muted); --bi-acc:var(--accent); --bi-line:var(--line); --bi-card:var(--surface); }
.bi.alt{ --bi-card:var(--surface); }
.bi.dark{ --bi-ink:var(--on-dark-strong); --bi-text:var(--muted-on-dark); --bi-acc:var(--accent-bright); --bi-line:var(--line-on-dark); --bi-card:transparent; }
@supports (color:color-mix(in srgb, red 50%, transparent)){
  .bi.dark{ --bi-card:color-mix(in srgb, var(--on-dark-strong) 6%, transparent); --bi-line:color-mix(in srgb, var(--on-dark-strong) 16%, transparent); }
}
.bi-grid{ display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:clamp(36px, 6vw, 96px); align-items:start; }
.bi--nofacts .bi-grid{ grid-template-columns:minmax(0, 1fr); max-width:820px; }
.bi-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.bi-logo{ display:flex; align-items:center; min-height:48px; }
.bi .bi-logo__img{ width:clamp(140px, 14vw, 200px); height:56px; background:none; border-radius:0; }
.bi .bi-logo__img img{ object-fit:contain; object-position:left center; }
.bi-word{ font-family:var(--display); font-weight:800; font-size:clamp(28px, 3vw, 40px); line-height:1; letter-spacing:-.02em; color:var(--bi-ink); }
.bi .bi-h{ margin:0; max-width:20ch; color:var(--bi-ink); }
.bi .bi-h .accent{ color:var(--bi-acc); }
.bi-story{ max-width:62ch; }
.bi .bi-story p{ margin:0 0 14px; font-size:var(--lead-size, 18px); line-height:1.65; color:var(--bi-text); }
.bi .bi-story p:last-child{ margin-bottom:0; }
.bi .bi-story strong{ color:var(--bi-ink); }
.bi .bi-note{ display:inline-flex; align-items:center; gap:10px; margin:0; font-family:var(--label); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--bi-ink); }
.bi-note__ico{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--accent-fill); color:var(--on-accent); }
.bi-tags{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.bi.dark .bi-tags .chip{ background:transparent; border-color:var(--bi-line); color:var(--bi-ink); }
.bi-facts{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(12px, 1.4vw, 18px); }
.bi-facts--1{ grid-template-columns:minmax(0, 1fr); }
.bi-fact{ display:flex; flex-direction:column; gap:10px; padding:clamp(20px, 2.2vw, 28px); border:1px solid var(--bi-line); border-radius:var(--radius-lg); background:var(--bi-card); }
.bi-facts--3 .bi-fact:first-child{ grid-column:1 / -1; }
.bi-fact__v{ font-family:var(--display); font-weight:var(--fw-heading); font-size:clamp(34px, 3.6vw, 52px); line-height:1; letter-spacing:-.02em; color:var(--bi-ink); white-space:nowrap; }
.bi-facts--3 .bi-fact:first-child .bi-fact__v{ color:var(--bi-acc); }
.bi-fact__l{ font-size:14.5px; line-height:1.45; color:var(--bi-text); }
@media (max-width:940px){
  .bi-grid{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:520px){
  .bi-facts{ grid-template-columns:minmax(0, 1fr); }
  .bi-facts--3 .bi-fact:first-child{ grid-column:auto; }
}

/* compact hero: 350 px desktop, 300 px phones; the slider grows only if the copy needs it */
.hero-slider.slider--size-compact{ min-height:350px; }
.slider--size-compact .hero-slide .wrap{ justify-content:flex-end; padding-top:calc(var(--nav-h) + 24px); padding-bottom:64px; }
.slider--size-compact .hero-slide .slide-inner{ max-width:none; }
.slider--size-compact .hero-slide h1{ margin-top:12px; max-width:28ch; font-size:clamp(28px, 3vw, 44px); line-height:1.08; }
.slider--size-compact .hero-slide .lead{ margin-top:10px; max-width:64ch; font-size:16px; }
.slider--size-compact .hero-slide .hero-cta{ margin-top:18px; }
.slider--size-compact .hero-slide .hero-cta .btn{ padding:11px 22px; font-size:15px; }
.slider--size-compact .slider-bar{ padding-bottom:18px; }
.slider--size-compact .slider-arrows button{ width:40px; height:40px; }
.slider--size-compact .slide-count{ display:none; }
@media (max-width:640px){
  .hero-slider.slider--size-compact{ min-height:300px; }
  .slider--size-compact .hero-slide .wrap{ padding-top:calc(var(--nav-h) + 4px); padding-bottom:44px; }
  .slider--size-compact .hero-slide .eyebrow{ font-size:10.5px; letter-spacing:.12em; }
  .slider--size-compact .hero-slide h1{ margin-top:8px; font-size:clamp(22px, 6.4vw, 27px); }
  .slider--size-compact .hero-slide .lead{ margin-top:6px; font-size:14px; line-height:1.45; }
  .slider--size-compact .hero-slide .hero-cta{ margin-top:12px; }
  .slider--size-compact .hero-slide .hero-cta .btn{ padding:9px 18px; font-size:14px; }
}

/* ---------- call to action (cta): ten designs on one content ----------
   centered band · split image · full-bleed media · floating card · marquee headline ·
   gradient glow · stats · logos · contact options · two audiences. The band (.cta-box)
   carries the scheme (light / sand / dark / accent; --ct-* = theme tokens only), the
   section only spaces it. Contained = a rounded band inside the page width; full bleed =
   edge to edge. Motion: the global system (entrances) plus the CSS below (Ken Burns,
   marquee, glow drift), all gated on .motion-ready; site.js initCta() for video, cursor
   glow and magnetic buttons. */
.section.cta{ --ct-pad:clamp(56px, 7vw, 104px); padding-block:calc(var(--ct-pad) * .5); }
.section.cta.cta--s-compact{ --ct-pad:clamp(36px, 4.5vw, 60px); }
.section.cta.cta--s-spacious{ --ct-pad:clamp(84px, 10vw, 150px); }
.section.cta.cta--w-full{ padding-block:0; }
.cta-shell{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); }
.cta--w-full .cta-shell{ max-width:none; padding-inline:0; }
.cta-box{ position:relative; isolation:isolate; overflow:hidden; padding:var(--ct-pad) clamp(24px, 5vw, 72px); background:var(--ct-bg); color:var(--ct-text);
  --ct-bg:var(--surface); --ct-ink:var(--ink); --ct-text:var(--muted); --ct-acc:var(--accent); --ct-line:var(--line); --ct-card:var(--bg-alt); --ct-card-h:var(--bg-alt); }
.cta--w-full .cta-box{ padding-inline:0; border-radius:0; }
.cta-box[style*="--ct-grad:"]{ background-image:var(--ct-grad); }
.cta--w-full .cta-in{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); }
.cta-box--r-none{ border-radius:0; }
.cta-box--r-soft{ border-radius:var(--radius-lg); }
.cta-box--r-large{ border-radius:clamp(24px, 3vw, 40px); }
.cta-box--sand{ --ct-bg:var(--bg-alt); --ct-card:var(--surface); --ct-card-h:var(--surface); }
.cta-box--dark, .cta-box.has-media{ --ct-bg:var(--panel); --ct-ink:var(--on-dark-strong); --ct-text:var(--muted-on-dark); --ct-acc:var(--accent-bright); --ct-line:var(--line-on-dark);
  --ct-card:transparent; --ct-card-h:transparent; }
.cta-box--accent{ --ct-bg:var(--accent-fill); --ct-ink:var(--on-accent); --ct-text:var(--on-accent); --ct-acc:var(--on-accent); --ct-line:var(--on-accent); --ct-card:transparent; --ct-card-h:transparent; }
.cta-box--accent.has-media{ --ct-bg:var(--panel); }
@supports (color:color-mix(in srgb, red 50%, transparent)){
  .cta-box{ --ct-line:color-mix(in srgb, var(--ink) 12%, transparent); --ct-card-h:color-mix(in srgb, var(--accent) 6%, var(--bg-alt)); }
  .cta-box--dark, .cta-box.has-media{ --ct-line:color-mix(in srgb, var(--on-dark-strong) 16%, transparent); --ct-card:color-mix(in srgb, var(--on-dark-strong) 6%, transparent);
    --ct-card-h:color-mix(in srgb, var(--on-dark-strong) 11%, transparent); }
  .cta-box--accent{ --ct-text:color-mix(in srgb, var(--on-accent) 82%, transparent); --ct-line:color-mix(in srgb, var(--on-accent) 26%, transparent);
    --ct-card:color-mix(in srgb, var(--on-accent) 7%, transparent); --ct-card-h:color-mix(in srgb, var(--on-accent) 12%, transparent); }
}
.cta-in{ position:relative; }
/* head + buttons */
.cta-head{ display:flex; flex-direction:column; gap:16px; max-width:760px; }
.cta--a-center .cta-head{ align-items:center; text-align:center; margin-inline:auto; }
.cta .eyebrow{ color:var(--ct-acc); }
.cta-box--accent .eyebrow::before{ background:currentColor; }
.cta .cta-h{ margin:0; max-width:20ch; color:var(--ct-ink); }
.cta .cta-h .accent{ color:var(--ct-acc); }
.cta-box--accent .cta-h .accent{ opacity:.78; }
.cta .cta-text{ margin:0; max-width:60ch; color:var(--ct-text); }
.cta .cta-text strong{ color:var(--ct-ink); font-weight:var(--fw-body-strong); }
.cta-btns{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(24px, 3vw, 36px); }
.cta--a-center .cta-btns{ justify-content:center; }
.cta-ico{ display:inline-flex; width:18px; height:18px; }
.cta-ico svg{ width:100%; height:100%; }
.cta-box:not(.dark):not(.cta-box--accent) .btn-ghost{ border-color:var(--ink); }   /* readable on light / sand bands and panels */
@supports (color:color-mix(in srgb, red 50%, transparent)){ .cta-box:not(.dark):not(.cta-box--accent) .btn-ghost{ border-color:color-mix(in srgb, var(--ink) 30%, transparent); } .cta-box:not(.dark):not(.cta-box--accent) .btn-ghost:hover{ border-color:var(--ink); } }
.cta-box--accent .btn-primary{ background:var(--ink); border-color:var(--ink); color:var(--on-dark-strong); }
.cta-box--accent .btn-primary:hover{ background:var(--panel); border-color:var(--panel); }
.cta-box--accent .btn-ghost{ color:var(--on-accent); border-color:var(--ct-line); }
.cta-box--accent .btn-ghost:hover{ border-color:var(--on-accent); }
.cta .btn:focus-visible, .cta-tile:focus-visible, .cta-logo__a:focus-visible{ outline:2px solid var(--ct-acc); outline-offset:3px; }
.cta-warn{ max-width:var(--maxw); margin:0 auto 14px; padding:10px 14px; border:1px dashed var(--accent); border-radius:var(--radius); background:var(--bg-alt); color:var(--ink); font-size:14px; }
/* background media + overlay (parallax overscan only when parallax is on) */
.cta-bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.cta-bg__par{ position:absolute; inset:0; }
.cta-bg__par[data-parallax]{ inset:-8% 0; }
.cta-bg .media, .cta-bg__video{ position:absolute; inset:0; width:100%; height:100%; border-radius:0; object-fit:cover; }
.cta-ov{ position:absolute; inset:0; background:var(--ct-ov-c, rgb(var(--scrim-rgb))); opacity:var(--ct-ov-op, .55); }
.motion-ready .cta-bg--kb .cta-bg__media img{ animation:cta-kb 26s ease-in-out infinite alternate; }
@keyframes cta-kb{ from{ scale:1; } to{ scale:1.08; } }

/* 1 · centered band: a soft tint behind the copy */
.cta--centered-band .cta-box::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(70% 90% at 50% 0%, rgba(var(--accent-rgb), .14) 0%, rgba(var(--accent-rgb), 0) 70%); }
.cta--centered-band .cta-box.has-media::before{ display:none; }
/* 2 · split with image */
.cta-split{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(32px, 5vw, 80px); align-items:center; }
.cta--img-left .cta-media{ order:-1; }
.cta-media .media{ aspect-ratio:4 / 3; height:auto; border-radius:var(--radius-lg); }
.cta-box--r-none .cta-media .media{ border-radius:0; }
/* 3 · full-bleed media */
.cta--full-bleed-media .cta-box{ display:flex; align-items:center; min-height:clamp(420px, 62vh, 680px); }
.cta--full-bleed-media .cta-in{ width:100%; }
.cta--full-bleed-media .cta-h{ font-size:clamp(40px, 5.6vw, 80px); max-width:16ch; }
/* 4 · floating card: overlaps the sections above and below; accent edge line */
.section.cta.cta--floating-card{ position:relative; z-index:3; padding-block:0; margin-block:calc(clamp(40px, 6vw, 88px) * -1); }
.cta--floating-card .cta-box{ box-shadow:0 34px 70px -34px rgba(0, 0, 0, .45), 0 2px 10px -4px rgba(0, 0, 0, .12); padding-block:calc(var(--ct-pad) * .7); }
.cta--floating-card .cta-box::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent-fill); }
.cta-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(24px, 4vw, 64px); }
.cta-row .cta-btns{ margin-top:0; flex:0 0 auto; }
.cta--a-center .cta-row{ flex-direction:column; align-items:center; }
/* 5 · marquee headline */
.cta-mq{ position:relative; overflow:hidden; margin:0 calc(clamp(24px, 5vw, 72px) * -1) clamp(28px, 4vw, 52px); padding-block:6px; }
.cta--w-full .cta-mq{ margin-inline:0; }
.cta-mq__track{ display:flex; align-items:center; gap:.4em; width:max-content; font-family:var(--display); font-weight:800; font-size:clamp(64px, 11vw, 180px); line-height:1;
  letter-spacing:-.03em; white-space:nowrap; color:var(--ct-ink); }
.cta-mq__sep{ color:var(--ct-acc); font-size:.42em; }
.motion-ready .cta-mq__track{ animation:cta-mq var(--ct-mq-dur, 60s) linear infinite; }
.cta-mq:hover .cta-mq__track{ animation-play-state:paused; }
@keyframes cta-mq{ to{ translate:-50% 0; } }
/* 6 · gradient glow: an accent glow that follows the cursor (site.js) over a slowly drifting gradient */
.cta-glowbg{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.cta-shift{ position:absolute; inset:-30%; background:radial-gradient(40% 40% at 30% 40%, rgba(var(--accent-rgb), .22) 0%, rgba(var(--accent-rgb), 0) 70%),
  radial-gradient(35% 35% at 75% 65%, rgba(var(--accent-rgb), .16) 0%, rgba(var(--accent-rgb), 0) 70%); }
.motion-ready .cta-shift{ animation:cta-shift 18s ease-in-out infinite alternate; }
@keyframes cta-shift{ from{ rotate:0deg; scale:1; } to{ rotate:24deg; scale:1.12; } }
.cta-glow{ position:absolute; left:62%; top:30%; width:min(70vmax, 900px); aspect-ratio:1; border-radius:50%; margin:calc(min(70vmax, 900px) / -2) 0 0 calc(min(70vmax, 900px) / -2);
  background:radial-gradient(circle, rgba(var(--accent-rgb), .34) 0%, rgba(var(--accent-rgb), 0) 62%); }
.cta-box.is-tracking .cta-glow{ left:0; top:0; translate:var(--gx, 0) var(--gy, 0); }
/* 7 · stats */
.cta-split--stats{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); }
.cta-stats{ list-style:none; margin:0; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); }
.cta-stat{ display:flex; flex-direction:column; gap:8px; padding:6px clamp(14px, 1.8vw, 26px); border-left:1px solid var(--ct-line); }
.cta-stat:first-child{ border-left:0; padding-left:0; }
.cta-stat__v{ font-family:var(--display); font-weight:var(--fw-heading); font-size:clamp(34px, 3.4vw, 52px); line-height:1; letter-spacing:-.02em; white-space:nowrap; color:var(--ct-ink); }
/* four stats: two rows of two, so the numbers never collide */
.cta-stats--4{ grid-auto-flow:row; grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:clamp(22px, 2.6vw, 34px); }
.cta-stats--4 .cta-stat:nth-child(3){ border-left:0; padding-left:0; }
.cta-stats--3 .cta-stat__v{ font-size:clamp(28px, 2.7vw, 42px); }
.cta-stat__l{ font-size:14.5px; line-height:1.45; color:var(--ct-text); }
/* 8 · logos: muted, full colour on hover */
.cta-logos{ list-style:none; margin:clamp(36px, 4.5vw, 56px) 0 0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:clamp(22px, 3.4vw, 52px); }
.cta--a-center .cta-logos{ justify-content:center; }
.cta-logo{ display:flex; }
.cta .cta-logo__img{ width:clamp(96px, 10vw, 140px); height:44px; background:none; border-radius:0; }
.cta .cta-logo__img img{ object-fit:contain; filter:grayscale(1); opacity:.6; transition:filter .4s ease, opacity .4s ease; }
.cta-logo:hover .cta-logo__img img, .cta-logo__a:focus-visible .cta-logo__img img{ filter:none; opacity:1; }
.dark .cta-logo__img img{ opacity:.7; }
/* 9 · contact options */
.cta-tiles{ list-style:none; margin:clamp(32px, 4vw, 48px) 0 0; padding:0; display:grid; gap:clamp(12px, 1.4vw, 18px); grid-template-columns:repeat(var(--ct-cols, 4), minmax(0, 1fr)); }
.cta-tiles--1{ --ct-cols:1; max-width:360px; } .cta-tiles--2{ --ct-cols:2; } .cta-tiles--3{ --ct-cols:3; }
.cta--a-center .cta-tiles--1, .cta--a-center .cta-tiles--2{ max-width:760px; margin-inline:auto; }
.cta-tile-li{ display:flex; min-width:0; }
.cta-tile{ position:relative; display:flex; flex-direction:column; gap:4px; width:100%; padding:20px 20px 22px; border:1px solid var(--ct-line); border-radius:var(--radius-lg);
  background:var(--ct-card); color:var(--ct-ink); text-decoration:none; text-align:left; transition:transform .4s cubic-bezier(.16,.84,.34,1), background-color .3s ease, border-color .3s ease; }
.cta-tile__ico{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-bottom:12px; border-radius:50%; background:var(--accent-fill); color:var(--on-accent); }
.cta-tile__ico svg{ width:22px; height:22px; }
.cta-box--accent .cta-tile__ico{ background:var(--ink); color:var(--on-dark-strong); }
.cta-tile__l{ font-family:var(--label); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ct-text); }
.cta-tile__v{ font-family:var(--display); font-weight:var(--fw-heading); font-size:17px; line-height:1.3; overflow-wrap:anywhere; }
.cta-tile__arw{ position:absolute; top:20px; right:20px; color:var(--ct-acc); transition:transform .3s cubic-bezier(.16,.84,.34,1); }
@media (hover:hover){
  .cta-tile:hover{ transform:translateY(-4px); background:var(--ct-card-h); border-color:var(--ct-acc); }
  .cta-tile:hover .cta-tile__arw{ transform:translateX(4px); }
}
/* 10 · two audiences: two panels, the hovered one grows a little */
.cta-row--top{ margin-bottom:clamp(32px, 4vw, 52px); }
.cta-aud{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(14px, 1.6vw, 22px); }
.cta-aud--1{ grid-template-columns:minmax(0, 1fr); max-width:640px; }
.cta-panel{ display:flex; min-width:0; }
.cta-panel__in{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; width:100%; padding:clamp(24px, 3vw, 40px); border:1px solid var(--ct-line); border-radius:var(--radius-lg);
  background:var(--ct-card); transition:scale .45s cubic-bezier(.16,.84,.34,1), background-color .3s ease, border-color .3s ease, box-shadow .4s ease; }
.cta-panel__n{ font-family:var(--label); font-size:12px; letter-spacing:.16em; color:var(--ct-acc); }
.cta .cta-panel__t{ margin:0; font-size:clamp(24px, 2.4vw, 32px); line-height:1.15; color:var(--ct-ink); }
.cta .cta-panel__d{ margin:0 0 8px; max-width:46ch; font-size:16px; line-height:1.6; color:var(--ct-text); }
.cta-panel__btn{ margin-top:auto; }
@media (hover:hover){
  .cta-panel:hover .cta-panel__in{ scale:1.02; background:var(--ct-card-h); border-color:var(--ct-acc); box-shadow:var(--shadow-md); }
}
/* magnetic buttons (site.js moves them a few px toward the pointer) */
.cta--magnetic .cta-btns .btn{ transition:translate .35s cubic-bezier(.16,.84,.34,1), transform .25s ease, scale .15s ease, background .3s ease, border-color .3s ease, color .3s ease; }

/* responsive: split designs stack, logos wrap, the marquee keeps running, audiences stack */
@media (max-width:940px){
  .cta-split, .cta-split--stats{ grid-template-columns:minmax(0, 1fr); }
  .cta--img-left .cta-media{ order:0; }
  .cta-row{ flex-direction:column; align-items:flex-start; }
  .cta--a-center .cta-row{ align-items:center; }
  .cta-tiles, .cta-tiles--3{ --ct-cols:2; }
}
@media (max-width:640px){
  .cta-aud{ grid-template-columns:minmax(0, 1fr); }
  .cta-tiles, .cta-tiles--2, .cta-tiles--3{ --ct-cols:1; }
  .cta-stats{ grid-auto-flow:row; grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:24px; }
  .cta-stat:nth-child(odd){ border-left:0; padding-left:0; }
  .cta--full-bleed-media .cta-box{ min-height:420px; }
  .section.cta.cta--floating-card{ margin-block:-32px; }
}
@media (prefers-reduced-motion:reduce){
  .cta *, .cta *::before, .cta *::after{ transition:none !important; animation:none !important; }
}
html[data-motion="off"] .cta *{ animation:none !important; }

/* ---------- digital presence (digital_presence): one content, five layouts ----------
   logo cards · image tiles · list rows · split feature · featured first; light / sand /
   dark (+ image with overlay). --dp-* hold the scheme's colours (theme tokens only);
   image cards switch them to the on-dark set. Coming-soon cards are dashed and softer.
   Entrances: the global motion system (each .dp-li is a staggered item). */
.dp{ position:relative; isolation:isolate; overflow:hidden;
  --dp-ink:var(--ink); --dp-text:var(--muted); --dp-acc:var(--accent); --dp-line:var(--line); --dp-card:var(--surface); --dp-card-h:var(--surface);
  --dp-tile:var(--bg-alt); --dp-tile-h:var(--bg-alt); --dp-soon-line:var(--accent-line); --dp-soon-bg:transparent; }
.dp.alt{ --dp-tile:var(--bg); --dp-tile-h:var(--bg); }
.dp.dark{ --dp-ink:var(--on-dark-strong); --dp-text:var(--muted-on-dark); --dp-acc:var(--accent-bright); --dp-line:var(--line-on-dark); --dp-card:transparent; --dp-card-h:transparent;
  --dp-tile:transparent; --dp-tile-h:transparent; --dp-soon-line:var(--accent-bright); }
@supports (color:color-mix(in srgb, red 50%, transparent)){
  .dp{ --dp-line:color-mix(in srgb, var(--ink) 12%, transparent); --dp-card-h:color-mix(in srgb, var(--accent) 4%, var(--surface));
    --dp-tile:color-mix(in srgb, var(--accent) 7%, var(--surface)); --dp-tile-h:color-mix(in srgb, var(--accent) 13%, var(--surface));
    --dp-soon-line:color-mix(in srgb, var(--accent) 55%, transparent); --dp-soon-bg:color-mix(in srgb, var(--accent) 5%, transparent); }
  .dp.dark{ --dp-line:color-mix(in srgb, var(--on-dark-strong) 14%, transparent); --dp-card:color-mix(in srgb, var(--on-dark-strong) 6%, transparent);
    --dp-card-h:color-mix(in srgb, var(--on-dark-strong) 11%, transparent); --dp-tile:color-mix(in srgb, var(--on-dark-strong) 8%, transparent);
    --dp-tile-h:color-mix(in srgb, var(--on-dark-strong) 15%, transparent); --dp-soon-line:color-mix(in srgb, var(--accent-bright) 55%, transparent);
    --dp-soon-bg:color-mix(in srgb, var(--accent-bright) 6%, transparent); }
}
.dp--image{ background:var(--panel); }
.dp-bg{ position:absolute; inset:0; z-index:-1; }
.dp-bg .media{ position:absolute; inset:0; width:100%; height:100%; border-radius:0; }
.dp-bg::after{ content:""; position:absolute; inset:0; background:rgba(var(--scrim-rgb), var(--dp-overlay, .6)); }
/* head */
.dp-head{ display:flex; flex-direction:column; gap:16px; max-width:760px; margin-bottom:clamp(32px, 4vw, 56px); }
.dp .dp-h{ margin:0; max-width:18ch; color:var(--dp-ink); }
.dp-h .accent{ display:block; color:var(--dp-acc); }
.dp.dark .eyebrow{ color:var(--accent-bright); }
.dp .dp-intro{ margin:0; max-width:60ch; color:var(--dp-text); }
.dp .dp-intro strong{ color:var(--dp-ink); font-weight:var(--fw-body-strong); }
/* shared card pieces */
.dp-grid, .dp-rows, .dp-soonlist, .dp-stack, .dp-feat__rest{ list-style:none; margin:0; padding:0; }
.dp-li{ display:flex; min-width:0; }
.dp-card{ position:relative; display:flex; width:100%; min-width:0; color:var(--dp-ink); text-decoration:none; background:var(--dp-card);
  border:1px solid var(--dp-line); border-radius:var(--radius-lg);
  transition:transform .4s cubic-bezier(.16,.84,.34,1), background-color .3s ease, border-color .3s ease, box-shadow .4s ease; }
a.dp-card:focus-visible{ outline:2px solid var(--dp-acc); outline-offset:3px; }
.dp-card.is-soon{ border-style:dashed; border-color:var(--dp-soon-line); background:var(--dp-soon-bg); }
.dp .dp-name{ margin:0; font-family:var(--display); font-weight:var(--fw-heading); font-size:clamp(18px, 1.5vw, 21px); line-height:1.2; letter-spacing:-.01em; color:var(--dp-ink); overflow-wrap:anywhere; }
.dp .no-logo .dp-name{ font-weight:800; font-size:clamp(20px, 1.8vw, 24px); letter-spacing:-.02em; }
.dp .dp-meta{ margin:6px 0 0; font-family:var(--label); font-size:11px; line-height:1.5; letter-spacing:.12em; text-transform:uppercase; color:var(--dp-text); }
.dp-dom{ font-family:var(--label); font-size:12px; letter-spacing:.06em; color:var(--dp-text); overflow-wrap:anywhere; }
.dp-arw{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--dp-line); border-radius:50%;
  font-size:15px; line-height:1; color:var(--dp-acc); transition:transform .3s cubic-bezier(.16,.84,.34,1), background-color .3s ease, border-color .3s ease, color .3s ease; }
.dp-soon{ font-family:var(--label); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--dp-acc); }
.dp .dp-soon-t{ margin:8px 0 0; font-size:14.5px; line-height:1.55; color:var(--dp-text); }
.dp-word{ display:block; font-family:var(--display); font-weight:800; font-size:clamp(20px, 2vw, 26px); line-height:1.05; letter-spacing:-.02em; color:var(--dp-ink); text-align:center; overflow-wrap:anywhere; }
.dp .dp-logo{ display:block; width:100%; height:44px; background:none; border-radius:0; }
.dp .dp-logo img{ object-fit:contain; }
.dp .dp-logo.ph{ background:none; }
.dp-btn{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; padding:11px 20px; border-radius:var(--radius-pill); background:var(--accent-fill); color:var(--on-accent);
  font-family:var(--body); font-weight:var(--fw-body-strong); font-size:14px; line-height:1; white-space:nowrap; transition:opacity .3s ease, translate .35s cubic-bezier(.16,.84,.34,1), background-color .2s ease; }
.dp-btn .arw{ display:inline-block; transition:transform .25s ease; }
@media (hover:hover){
  a.dp-card:hover .dp-arw{ transform:translate(3px, -3px); background:var(--accent-fill); border-color:var(--accent-fill); color:var(--on-accent); }
  a.dp-card:hover .dp-btn .arw{ transform:translateX(4px); }
}

/* A · logo cards */
.dp-grid{ display:grid; gap:clamp(14px, 1.6vw, 22px); grid-template-columns:repeat(var(--dp-cols, 3), minmax(0, 1fr)); }
.dp-grid--1{ --dp-cols:1; max-width:520px; }
.dp-grid--2{ --dp-cols:2; }
.dp-grid--4{ --dp-cols:4; }
.dp-lc{ flex-direction:column; gap:18px; padding:clamp(16px, 1.6vw, 22px); }
.dp-tile{ display:flex; align-items:center; justify-content:center; height:clamp(104px, 9vw, 132px); padding:0 14%; border-radius:var(--radius); background:var(--dp-tile);
  transition:background-color .3s ease, filter .3s ease; }
.dp-tile .dp-logo{ height:52px; }
.dp-lc__body{ flex:1 1 auto; }
.dp-lc__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:38px; padding-top:14px; border-top:1px solid var(--dp-line); }
@media (hover:hover){
  a.dp-lc:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--dp-acc); }
  a.dp-lc:hover .dp-tile{ background:var(--dp-tile-h); filter:brightness(1.05); }
}

/* B · image tiles */
.dp-it{ flex-direction:column; justify-content:flex-end; aspect-ratio:4 / 5; min-height:320px; overflow:hidden; isolation:isolate; border:0;
  --dp-ink:var(--on-dark-strong); --dp-text:var(--text-on-dark); --dp-acc:var(--accent-bright); --dp-line:var(--line-on-dark); }
.dp-it__media, .dp-fc__media{ position:absolute; inset:0; width:100%; height:100%; z-index:-2; border-radius:0; }
.dp-it__media img, .dp-fc__media img{ transition:scale 1.4s cubic-bezier(.16,.84,.34,1); }
.dp-it::after, .dp-fc::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(var(--scrim-rgb), 0) 24%, rgba(var(--scrim-rgb), .55) 58%, rgba(var(--scrim-rgb), .9) 100%); }
.dp-fb{ display:flex; align-items:center; justify-content:center; padding:0 18% 30%;
  background:radial-gradient(90% 70% at 72% 18%, rgba(var(--accent-rgb), .34) 0%, rgba(var(--accent-rgb), 0) 70%), linear-gradient(160deg, var(--panel) 0%, var(--bg-deepest) 100%); }
.dp-fb .dp-fb__logo{ height:clamp(56px, 6vw, 84px); }
.dp-fb .dp-word{ font-size:clamp(30px, 3.2vw, 44px); color:var(--on-dark-strong); }
.dp-badge{ position:absolute; top:16px; left:16px; display:flex; align-items:center; justify-content:center; width:112px; height:56px; padding:10px 14px;
  border-radius:var(--radius); background:var(--surface); box-shadow:0 10px 24px -14px rgba(0, 0, 0, .55); }
.dp-badge .dp-logo{ height:100%; }
.dp-badge .dp-word{ font-size:16px; color:var(--ink); }
.dp-it__cap{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:clamp(18px, 2vw, 26px); }
.dp-it .dp-btn{ margin-top:14px; opacity:0; translate:0 8px; }
.dp-it.is-soon{ border:1.5px dashed var(--dp-soon-line); }
.dp-it.is-soon .dp-it__media{ filter:grayscale(.7); opacity:.5; }
@media (hover:hover){
  a.dp-it:hover .dp-it__media img, a.dp-fc:hover .dp-fc__media img{ scale:1.06; }
  a.dp-it:hover .dp-btn{ opacity:1; translate:0 0; }
}
a.dp-it:focus-visible .dp-btn, .cms-editing .dp-it .dp-btn{ opacity:1; translate:0 0; }
@media (hover:none){ .dp-it .dp-btn{ opacity:1; translate:0 0; } }

/* C · list rows (the profile's marketplace list, refined) */
.dp-rows{ display:flex; flex-direction:column; gap:10px; }
.dp-row{ display:grid; grid-template-columns:36px 132px minmax(0, 1fr) auto; align-items:center; gap:clamp(14px, 2vw, 28px);
  padding:16px clamp(16px, 2vw, 26px); }
.dp-row.no-logo{ grid-template-columns:36px minmax(0, 1fr) auto; }
.dp-row__n{ font-family:var(--label); font-size:12px; letter-spacing:.14em; color:var(--dp-acc); }
.dp-row__logo{ display:flex; align-items:center; height:44px; }
.dp-row__logo .dp-logo{ height:34px; }
.dp-row__logo .dp-logo img{ object-position:left center; filter:grayscale(1); opacity:.6; transition:filter .4s ease, opacity .4s ease; }
.dp-row__end{ display:flex; align-items:center; gap:clamp(12px, 1.6vw, 22px); }
.dp-soonlist{ display:grid; gap:10px; margin-top:16px; }
.dp-soonbox{ flex-direction:column; padding:18px clamp(16px, 2vw, 26px) 20px; }
.dp-soonbox__row{ display:flex; align-items:center; gap:16px; margin-top:8px; }
.dp-soonbox .dp-row__logo{ width:120px; }
@media (hover:hover){
  a.dp-row:hover{ background:var(--dp-card-h); border-color:var(--dp-acc); }
  a.dp-row:hover .dp-row__logo .dp-logo img{ filter:none; opacity:1; }
}
a.dp-row:focus-visible .dp-row__logo .dp-logo img{ filter:none; opacity:1; }

/* D · split feature */
.dp-split{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr); gap:clamp(32px, 5vw, 80px); align-items:start; }
.dp-split .dp-head{ margin-bottom:0; }
.dp-phone{ margin-top:clamp(28px, 3.4vw, 48px); max-width:340px; }
.dp .dp-phone__img{ background:none; border-radius:0; overflow:visible; }
.dp-phone__img img{ position:static; width:100%; height:auto; object-fit:contain; filter:drop-shadow(0 30px 40px rgba(0, 0, 0, .35)); }
.motion-ready .dp-phone__float{ animation:dp-float 7s ease-in-out infinite alternate; }
@keyframes dp-float{ from{ translate:0 -6px; } to{ translate:0 8px; } }
.dp-stack{ display:flex; flex-direction:column; gap:12px; }
.dp-mini{ display:grid; grid-template-columns:104px minmax(0, 1fr) auto; align-items:center; gap:18px; padding:14px 18px; }
.dp-mini.no-logo{ grid-template-columns:minmax(0, 1fr) auto; }
.dp-mini__logo{ display:flex; align-items:center; justify-content:center; height:60px; padding:0 12px; border-radius:var(--radius); background:var(--dp-tile); transition:background-color .3s ease; }
.dp-mini__logo .dp-logo{ height:30px; }
.dp-mini__end{ display:flex; align-items:center; gap:14px; }
.dp-mini.is-soon .dp-mini__end{ align-self:start; }
@media (hover:hover){
  a.dp-mini:hover{ transform:translateY(-3px); background:var(--dp-card-h); border-color:var(--dp-acc); box-shadow:var(--shadow-md); }
  a.dp-mini:hover .dp-mini__logo{ background:var(--dp-tile-h); }
}

/* E · featured first */
.dp-feat{ display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:clamp(14px, 1.6vw, 22px); align-items:stretch; }
.dp-feat--solo, .dp-feat--none{ grid-template-columns:minmax(0, 1fr); }
.dp-feat__main{ min-height:clamp(380px, 38vw, 540px); }
.dp-fc{ flex-direction:column; justify-content:flex-end; overflow:hidden; isolation:isolate; border:0;
  --dp-ink:var(--on-dark-strong); --dp-text:var(--text-on-dark); --dp-acc:var(--accent-bright); --dp-line:var(--line-on-dark); }
.dp-fc__body{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:clamp(22px, 2.6vw, 36px); }
.dp-fc .dp-badge{ position:static; margin-bottom:12px; }
.dp .dp-fc__name{ font-size:clamp(26px, 2.6vw, 36px); }
.dp-fc__foot{ display:flex; align-items:center; flex-wrap:wrap; gap:18px; margin-top:16px; }
.dp-feat__rest{ display:flex; flex-direction:column; gap:12px; }
@media (hover:hover){ a.dp-fc:hover .dp-btn{ background:var(--btn-bg-hover); } }

/* responsive: grids 2 then 1 column; split stacks (image under the text); rows keep logo + arrow */
@media (max-width:940px){
  .dp-grid--3, .dp-grid--4{ --dp-cols:2; }
  .dp-split{ grid-template-columns:minmax(0, 1fr); }
  .dp-phone{ max-width:280px; margin-inline:auto; }
  .dp-feat{ grid-template-columns:minmax(0, 1fr); }
  .dp-feat__rest{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .dp-row{ grid-template-columns:28px 112px minmax(0, 1fr) auto; }
  .dp-row.no-logo{ grid-template-columns:28px minmax(0, 1fr) auto; }
}
@media (max-width:600px){
  .dp-grid, .dp-grid--2, .dp-grid--3, .dp-grid--4{ --dp-cols:1; }
  .dp-it{ aspect-ratio:4 / 3; min-height:260px; }
  .dp-feat__rest{ grid-template-columns:minmax(0, 1fr); }
  .dp-feat__main{ min-height:360px; }
  .dp-row{ grid-template-columns:84px minmax(0, 1fr) auto; gap:14px; padding:14px 16px; }
  .dp-row.no-logo{ grid-template-columns:minmax(0, 1fr) auto; }
  .dp-row__n, .dp-row .dp-dom{ display:none; }
  .dp-row__logo .dp-logo{ height:28px; }
  .dp-mini{ grid-template-columns:76px minmax(0, 1fr) auto; gap:14px; padding:12px 14px; }
  .dp-mini__logo{ height:48px; padding:0 8px; }
  .dp-mini .dp-dom{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .dp *, .dp *::before, .dp *::after{ transition:none !important; animation:none !important; }
  .dp-it .dp-btn{ opacity:1; translate:0 0; }
}
html[data-motion="off"] .dp-phone__float{ animation:none; }

/* ============================================================
   Motion system (assets/js/motion.js + src/MotionOptions.php)
   One set of rules for every section. Nothing is hidden until
   motion.js adds .motion-ready on <html>: without JavaScript,
   with reduced motion, with motion level "off" and in the editor
   the content simply shows. Only opacity, translate / scale,
   clip-path and filter animate. Keyframes hold the "from" state
   and run with backwards fill, so every element ends on its own
   styles (hover effects keep working).
   ============================================================ */
:root{ --mo-dur:820ms; --mo-dist:26px; --mo-scale:.93; --mo-out:300ms; --mo-ease:cubic-bezier(.16,.84,.34,1); }
.motion-ready .mo-pre{ opacity:0 !important; }
.mo-play[data-mo]{ animation-duration:var(--mo-d, var(--mo-dur)); animation-timing-function:var(--mo-ease);
  animation-delay:var(--mo-wait, 0ms); animation-fill-mode:backwards; }
.mo-play[data-mo="fade"]{ animation-name:mo-fade; }
.mo-play[data-mo="fade-up"]{ animation-name:mo-fade-up; }
.mo-play[data-mo="soft"]{ animation-name:mo-soft; }
.mo-play[data-mo="fade-down"]{ animation-name:mo-fade-down; }
.mo-play[data-mo="slide-left"]{ animation-name:mo-slide-left; }
.mo-play[data-mo="slide-right"]{ animation-name:mo-slide-right; }
.mo-play[data-mo="scale-in"]{ animation-name:mo-scale-in; }
.mo-play[data-mo="blur-in"]{ animation-name:mo-blur-in; }
.mo-play[data-mo="clip-reveal"]{ animation-name:mo-clip; animation-duration:calc(var(--mo-d, var(--mo-dur)) * 1.35); }
.mo-play[data-mo="clip-reveal"] :is(img, video){ animation:mo-settle calc(var(--mo-d, var(--mo-dur)) * 2) var(--mo-ease) var(--mo-wait, 0ms) backwards; }
@keyframes mo-fade{ from{ opacity:0; } }
@keyframes mo-fade-up{ from{ opacity:0; translate:0 var(--mo-dist); } }
@keyframes mo-soft{ from{ opacity:0; translate:0 calc(var(--mo-dist) * .55); } }
@keyframes mo-fade-down{ from{ opacity:0; translate:0 calc(var(--mo-dist) * -1); } }
@keyframes mo-slide-left{ from{ opacity:0; translate:calc(var(--mo-dist) * 2.2) 0; } }
@keyframes mo-slide-right{ from{ opacity:0; translate:calc(var(--mo-dist) * -2.2) 0; } }
@keyframes mo-scale-in{ from{ opacity:0; scale:var(--mo-scale); } }
@keyframes mo-blur-in{ from{ opacity:0; filter:blur(12px); } }
@keyframes mo-clip{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes mo-settle{ from{ scale:1.14; } }

/* heading text effects: words (motion.js splits them), accent words a beat later */
.mo-w, .mo-wi{ display:inline-block; }
.mo-t-line .mo-w{ clip-path:inset(-.35em -.2em -.16em -.2em); }
.mo-play[data-mo="line-reveal"]{ animation-name:mo-line; }
.mo-play[data-mo="word-stagger"]{ animation-name:mo-word; }
.mo-play[data-mo="blur-to-sharp"]{ animation-name:mo-blur; }
@keyframes mo-line{ from{ translate:0 118%; } }
@keyframes mo-word{ from{ opacity:0; translate:0 .45em; filter:blur(3px); } }
@keyframes mo-blur{ from{ opacity:0; filter:blur(12px); } }

/* kickers: the accent line draws from 0 to full width, then the label fades in */
.mo-kick.mo-play::before{ transform-origin:left center; animation:mo-draw var(--mo-d, var(--mo-dur)) var(--mo-ease) var(--mo-wait, 0ms) backwards; }
.mo-kick.mo-play > .mo-kl{ animation:mo-fade calc(var(--mo-d, var(--mo-dur)) * .8) var(--mo-ease) calc(var(--mo-wait, 0ms) + var(--mo-d, var(--mo-dur)) * .45) backwards; }
@keyframes mo-draw{ from{ transform:scaleX(0); } }

/* hero slider copy: the current copy exits in reverse order, the next one enters in sequence */
.motion-ready .hero-slide .slide-inner > *{ opacity:0; }
.motion-ready .hero-slide.mo-hin .slide-inner > *{ opacity:1; }
.mo-exit{ animation:mo-out var(--mo-out) cubic-bezier(.5,0,.75,0) var(--mo-wait, 0ms) forwards; }
@keyframes mo-out{ to{ opacity:0; translate:0 calc(var(--mo-dist) * -.5); } }

/* parallax overscan for section background images (motion.js moves them, max ~6%) */
.mo-px{ scale:1.07; }

/* scroll progress bar, just under the header (Brand & Theme → Motion) */
.mo-progress{ position:fixed; left:0; right:0; top:0; height:2px; z-index:99; pointer-events:none;
  background:var(--accent-bright); transform:scaleX(0); transform-origin:left center; }

/* page transitions: a short fade between internal pages */
::view-transition-old(root){ animation:mo-vt-out .2s ease both; }
::view-transition-new(root){ animation:mo-vt-in .32s cubic-bezier(.16,.84,.34,1) both; }
@keyframes mo-vt-out{ to{ opacity:0; } }
@keyframes mo-vt-in{ from{ opacity:0; } }
html.mo-leave body{ opacity:0; transition:opacity .22s ease; }

/* ---- micro-interactions: elegant, never bouncy ---- */
@media (prefers-reduced-motion:no-preference){
  html:not([data-motion="off"]) .btn{ transition:transform .25s var(--mo-ease), scale .15s ease, background .3s ease, border-color .3s ease, color .3s ease; }
  html:not([data-motion="off"]) .btn .arw{ display:inline-block; transition:transform .3s var(--mo-ease); }
  html:not([data-motion="off"]) .btn:active{ scale:.97; }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  /* text links: the underline draws in from the left */
  html:not([data-motion="off"]) :is(.ft-links a, .ft-nav a, .ft-legal a, .crumbs a, .tf-link, .cdetail a.v, .tx-body a){ position:relative; text-decoration:none; }
  html:not([data-motion="off"]) :is(.ft-links a, .ft-nav a, .ft-legal a, .crumbs a, .tf-link, .cdetail a.v, .tx-body a)::after{ content:""; position:absolute; left:0; right:0; bottom:-2px;
    height:1px; background:currentColor; transform:scaleX(0); transform-origin:left center; transition:transform .35s var(--mo-ease); pointer-events:none; }
  html:not([data-motion="off"]) :is(.ft-links a, .ft-nav a, .ft-legal a, .crumbs a, .tf-link, .cdetail a.v, .tx-body a):is(:hover, :focus-visible)::after{ transform:scaleX(1); }
  /* cards: gentle lift, soft shadow, accent border */
  html:not([data-motion="off"]) :is(.mcard, .aud, .val){ transition:transform .4s var(--mo-ease), box-shadow .4s ease, border-color .3s ease; }
  html:not([data-motion="off"]) :is(.mcard, .aud):hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--accent-line); }
  html:not([data-motion="off"]) .val:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
  /* images: a slow zoom inside their frame */
  html:not([data-motion="off"]) :is(.leader, .wwa-media, .sm:not(.ds-style-showcase) .sm-media, .mcard) .media :is(img, video){ transition:scale 1.4s cubic-bezier(.16,.84,.34,1); }
  html:not([data-motion="off"]) :is(.leader, .wwa-media, .sm:not(.ds-style-showcase) .sm-media, .mcard):hover .media :is(img, video){ scale:1.04; }
}

/* ---- section effects (MotionOptions::SECTION_FX → data-mo-bg / -hover / -form / -open on the
   section root). Nothing here hides content: the hidden "from" states only run under
   .motion-ready (or inside .mo-play); without script everything simply shows. ---- */
:root{ --mo-lift:4px; }
html[data-motion="subtle"]{ --mo-lift:2px; }
html[data-motion="expressive"]{ --mo-lift:6px; }

/* pin drop (location): the map fades in, then its pin drops onto it */
.mo-play[data-mo="pin-drop"]{ animation-name:mo-fade; }
.mo-play[data-mo="pin-drop"] .loc-pin{ animation:mo-pin calc(var(--mo-d, var(--mo-dur)) * .9) cubic-bezier(.22,1,.36,1) calc(var(--mo-wait, 0ms) + var(--mo-d, var(--mo-dur)) * .45) backwards; }
@keyframes mo-pin{ from{ opacity:0; translate:0 calc(var(--mo-dist) * -1.8); } }

/* cards on hover (channel cards, "I am a" options, questions): lift moves (never at level off,
   with reduced motion or while editing), glow adds an accent halo */
[data-mo-hover]{ --mo-glow:var(--accent-rgb); }
[data-mo-hover].dark{ --mo-glow:var(--accent-bright-rgb); }
@media (hover:hover){
  html:not([data-motion="off"]) [data-mo-hover]:not([data-mo-hover="none"]) :is(.cc-it, .cc-link, .cc-ico, .ef-aud__o, .tfaq-item){
    transition:translate .35s var(--mo-ease), box-shadow .35s ease, border-color .25s ease, background-color .25s ease; }
  html:not([data-motion="off"]) :is([data-mo-hover="glow"], [data-mo-hover="lift-glow"]) :is(.cc-tiles .cc-it:hover .cc-link, .cc-spot .is-spot:hover .cc-link, .ef-aud__o:hover, .tfaq-item:hover){
    border-color:rgba(var(--mo-glow),.55); box-shadow:0 0 0 1px rgba(var(--mo-glow),.22), 0 16px 36px -18px rgba(var(--mo-glow),.65); }
  html:not([data-motion="off"]) :is([data-mo-hover="glow"], [data-mo-hover="lift-glow"]) :is(.cc-list, .cc-rows, .cc-band__list, .cc-spot__more) .cc-it:hover .cc-ico{
    box-shadow:0 0 0 6px rgba(var(--mo-glow),.14), 0 8px 22px -8px rgba(var(--mo-glow),.6); }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  html:not([data-motion="off"]):not(.cms-editing) :is([data-mo-hover="lift"], [data-mo-hover="lift-glow"]) :is(.cc-tiles .cc-it, .cc-spot .is-spot, .ef-aud__o, .tfaq-item):hover{ translate:0 calc(var(--mo-lift) * -1); }
  /* rows (list, rows, band, the smaller spotlight channels) keep their lines still: the content nudges along */
  html:not([data-motion="off"]):not(.cms-editing) :is([data-mo-hover="lift"], [data-mo-hover="lift-glow"]) :is(.cc-list, .cc-rows, .cc-band__list, .cc-spot__more) .cc-it:hover .cc-link{ translate:calc(var(--mo-lift) * 1.5) 0; }
}

/* form fields: a focus glow (glow, float) and floating labels (float) */
:is([data-mo-form="glow"], [data-mo-form="float"]) .field :is(input, select, textarea):focus{
  border-color:var(--accent); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14), 0 12px 30px -16px rgba(var(--accent-rgb),.7); }
:is([data-mo-form="glow"], [data-mo-form="float"]) .field:focus-within > label{ color:var(--accent); }
:is(.ef--classic, .ef--steps, .ef--editorial).dark:is([data-mo-form="glow"], [data-mo-form="float"]) .field:focus-within > label{ color:var(--accent-bright); }
[data-mo-form="float"] .form .field:has(> :is(input, select, textarea)){ position:relative; }
[data-mo-form="float"] .form .field:has(> :is(input, select, textarea)) > label{ position:absolute; z-index:1; left:17px; top:9px; font-size:12.5px; line-height:1.25; pointer-events:none; transform-origin:left top; }
[data-mo-form="float"] .form .field > :is(input, select){ padding-top:27px; padding-bottom:9px; }
[data-mo-form="float"] .form .field > textarea{ padding-top:31px; }
[data-mo-form="float"] .form--line .field:has(> :is(input, select, textarea)) > label{ left:0; top:4px; }
[data-mo-form="float"] .form--line .field > :is(input, select){ padding-top:24px; padding-bottom:10px; }
[data-mo-form="float"] .form--line .field > textarea{ padding-top:28px; }
/* resting (script marked the form: .mo-fl): empty and not focused, the label sits where the value goes */
[data-mo-form="float"] .form.mo-fl .field:not(.is-filled):not(:focus-within):has(> input:not(:autofill)) > label{ translate:0 10px; scale:1.22; }
[data-mo-form="float"] .form.mo-fl .field:not(.is-filled):not(:focus-within):has(> textarea) > label{ translate:0 10px; scale:1.22; }
[data-mo-form="float"] .form.mo-fl .field:not(.is-filled):not(:focus-within) > textarea::placeholder{ color:transparent; }
@media (prefers-reduced-motion:no-preference){
  html:not([data-motion="off"]) :is([data-mo-form="glow"], [data-mo-form="float"]) .field > label{ transition:color .2s ease, translate .24s var(--mo-ease), scale .24s var(--mo-ease); }
  html:not([data-motion="off"]) :is([data-mo-form="glow"], [data-mo-form="float"]) .field :is(input, select, textarea){ transition:border-color .2s ease, box-shadow .3s ease; }
}
/* the message after sending: it rises in, its check mark pops and draws */
.motion-ready :is([data-mo-form="glow"], [data-mo-form="float"]) .form-success.show{ animation:mo-fade-up var(--mo-dur) var(--mo-ease) backwards; }
.motion-ready :is([data-mo-form="glow"], [data-mo-form="float"]) .form-success.show .form-success__ic{ animation:mo-pop calc(var(--mo-dur) * .7) var(--mo-ease) calc(var(--mo-dur) * .25) backwards; }
.motion-ready :is([data-mo-form="glow"], [data-mo-form="float"]) .form-success.show .form-success__ic svg{ animation:mo-check calc(var(--mo-dur) * .6) var(--mo-ease) calc(var(--mo-dur) * .6) backwards; }
@keyframes mo-pop{ from{ opacity:0; scale:.5; } }
@keyframes mo-check{ from{ clip-path:inset(0 100% 0 0); } }

/* questions open / close smoothly (motion.js animates the answer). The question keeps its own
   spacing while open, so nothing jumps when the answer collapses; it looks the same as before. */
[data-mo-open="smooth"] details[open] > .tfaq-q{ padding-bottom:20px; }
[data-mo-open="smooth"] details[open] > .tfaq-a{ margin-top:-8px; }

/* ---- motion level "off": no movement at all ---- */
html[data-motion="off"] .nav, html[data-motion="off"] .hero-slide{ transition:none; }
html[data-motion="off"] .hero-slide .slide-bg, html[data-motion="off"] .hero-slide .slide-bg > *{ animation:none !important; }
html[data-motion="off"] [data-transition] .hero-slide, html[data-motion="off"] [data-transition] .hero-slide.active, html[data-motion="off"] [data-transition] .hero-slide.is-leaving{
  transition:none !important; transform:none !important; filter:none !important; clip-path:none !important; }
@media print{ .mo-pre{ opacity:1 !important; } .mo-progress{ display:none; } }

/* ============================================================
   B2B page blocks (migrated from the b2b.html <style> block)
   ============================================================ */
.b2b-badge{ display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-strong); background:rgba(var(--scrim-tint-rgb),.9);
  padding:7px 16px; border-radius:var(--radius-pill); }
.b2b-badge .pulse{ width:8px; height:8px; border-radius:50%; background:var(--on-dark-strong); position:relative; }
.b2b-badge .pulse::after{ content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid rgba(255,255,255,.6); animation:b2bpulse 1.8s ease-out infinite; }
@keyframes b2bpulse{ 0%{ transform:scale(.6); opacity:1; } 100%{ transform:scale(1.9); opacity:0; } }

/* capabilities */
.cap-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
@media (max-width:860px){ .cap-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .cap-grid{ grid-template-columns:1fr; } }
.cap{ background:var(--bg); padding:38px 32px 42px; transition:background .3s ease; }
.cap:hover{ background:var(--surface); }
.cap-ico{ width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); background:rgba(var(--accent-rgb),.08); color:var(--accent); margin-bottom:22px; }
.cap-ico svg{ width:24px; height:24px; }
.cap h3{ font-size:22px; letter-spacing:-.01em; }
.cap p{ margin-top:12px; font-size:15px; color:var(--muted); line-height:1.55; }

/* steps */
.step-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,36px); }
@media (max-width:820px){ .step-grid{ grid-template-columns:1fr 1fr; gap:36px 28px; } }
@media (max-width:460px){ .step-grid{ grid-template-columns:1fr; } }
.step .sn{ font-family:var(--display); font-weight:var(--fw-heading); font-size:20px; color:var(--accent);
  width:48px; height:48px; border-radius:50%; border:2px solid var(--accent);
  display:flex; align-items:center; justify-content:center; }
.step h3{ font-size:20px; margin-top:22px; }
.step p{ margin-top:10px; font-size:15px; color:var(--muted); line-height:1.5; }
.dark .step p{ color:var(--muted-on-dark); }
.dark .step .sn{ color:var(--accent-bright); border-color:var(--accent-bright); }

/* audiences */
.aud-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:820px){ .aud-grid{ grid-template-columns:1fr; } }
.aud{ border:var(--border-w) solid var(--line); border-radius:var(--radius); padding:34px 30px; background:var(--surface); }
.aud .k{ font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.aud h3{ font-size:22px; margin-top:14px; }
.aud p{ margin-top:12px; font-size:15px; color:var(--muted); line-height:1.55; }

/* coming-soon modal */
.modal-overlay{ position:fixed; inset:0; z-index:2000; display:flex; align-items:center;
  justify-content:center; padding:24px; background:rgba(var(--scrim-rgb),.72); backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease; }
.modal-overlay.open{ opacity:1; visibility:visible; }
.modal{ position:relative; width:100%; max-width:520px; background:var(--panel); color:var(--text-on-dark);
  border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-xl); overflow:hidden;
  box-shadow:var(--shadow-lg);
  transform:translateY(20px) scale(.97); transition:transform .4s cubic-bezier(.16,.84,.34,1); }
.modal-overlay.open .modal{ transform:none; }
.modal-visual{ position:relative; height:150px; overflow:hidden;
  background:radial-gradient(circle at 72% 120%, rgba(var(--accent-rgb),.5) 0%, rgba(var(--accent-rgb),0) 55%), var(--modal-visual-bg); }
.modal-visual .m-rings{ position:absolute; left:72%; top:120%;
  background:repeating-radial-gradient(circle, transparent 0 30px, rgba(var(--accent-bright-rgb),.22) 30px 31px);
  inset:0; -webkit-mask-image:radial-gradient(circle at 72% 120%, #000 0%, transparent 62%);
  mask-image:radial-gradient(circle at 72% 120%, #000 0%, transparent 62%); }
.modal-visual .m-node{ position:absolute; left:72%; top:120%; width:20px; height:20px;
  transform:translate(-50%,-50%); border-radius:50%; background:var(--accent-bright);
  box-shadow:0 0 40px 10px rgba(var(--accent-bright-rgb),.6); }
.modal-body{ padding:34px 38px 38px; }
.modal-badge{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent-bright); }
.modal h2{ font-size:30px; margin-top:16px; color:var(--on-dark-strong); letter-spacing:-.02em; }
.modal .m-lead{ margin-top:14px; color:var(--muted-on-dark); font-size:16px; line-height:1.55; }
.modal-form{ display:flex; gap:10px; margin-top:26px; }
.modal-form input{ flex:1; font-family:var(--body); font-size:15px; color:var(--on-dark-strong);
  background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.16); border-radius:var(--radius-sm);
  padding:14px 16px; transition:border-color .18s ease, box-shadow .18s ease; }
.modal-form input::placeholder{ color:var(--faint-on-dark); }
.modal-form input:focus{ outline:none; border-color:var(--accent-bright);
  box-shadow:0 0 0 3px rgba(var(--accent-bright-rgb),.18); }
.modal-form button{ white-space:nowrap; }
@media (max-width:480px){ .modal-form{ flex-direction:column; } .modal-form button{ justify-content:center; } }
.modal-note{ margin-top:16px; font-size:13px; color:var(--faint-on-dark); }
.modal-success{ display:none; margin-top:22px; padding:20px 22px; border-radius:var(--radius-md);
  background:rgba(var(--accent-bright-rgb),.1); border:1px solid rgba(var(--accent-bright-rgb),.28); }
.modal-success.show{ display:block; }
.modal-success h3{ font-size:18px; color:var(--on-dark-strong); } .modal-success p{ margin-top:6px; color:var(--soft-on-dark); }
.modal-close{ position:absolute; top:16px; right:16px; z-index:3; width:38px; height:38px;
  border-radius:50%; border:1.5px solid rgba(255,255,255,.24); background:rgba(0,0,0,.25);
  color:var(--on-dark-strong); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, transform .2s ease, color .2s ease; }
.modal-close:hover{ background:var(--accent-fill); border-color:var(--accent-fill); color:var(--on-accent); transform:rotate(90deg); }
.notify-inline .modal-success{ background:rgba(var(--accent-rgb),.06); border-color:rgba(var(--accent-rgb),.24); }
.notify-inline .modal-success h3{ color:var(--ink); } .notify-inline .modal-success p{ color:var(--muted); }

/* ---------- form error banner (server-side no-JS validation fallback) ---------- */
.form-alert{ margin:0 0 26px; padding:14px 18px; border-radius:var(--radius-sm); font-size:15px; line-height:1.5;
  background:rgba(var(--danger-rgb),.07); border:1.5px solid rgba(var(--danger-rgb),.35); color:var(--danger-ink); }
.form-alert--dark{ background:rgba(var(--danger-bright-rgb),.12); border-color:rgba(var(--danger-bright-rgb),.4);
  color:var(--alert-on-dark); margin-bottom:18px; }

/* ---------- per-section override hooks ----------
   The Phase 4 attribute editor writes whitelisted CSS variables into a
   section's style_overrides (see Validator::STYLE_WHITELIST). Each rule
   below only matches when its variable is actually present in the inline
   style, so unstyled sections render byte-identically. */
[style*="--section-bg:"], .section[style*="--section-bg:"]{ background:var(--section-bg); }   /* .section[…] beats the .section.alt scheme */
[style*="--section-text:"]{ color:var(--section-text); }
[style*="--eyebrow-color:"] .eyebrow{ color:var(--eyebrow-color); }
[style*="--h1-size:"] h1{ font-size:var(--h1-size); }
[style*="--h2-size:"] h2{ font-size:var(--h2-size); }
[style*="--h3-size:"] h3{ font-size:var(--h3-size); }
[style*="--lead-size:"] .lead{ font-size:var(--lead-size); }
[style*="--body-size:"]{ font-size:var(--body-size); }
[style*="--heading-weight:"] h1, [style*="--heading-weight:"] h2, [style*="--heading-weight:"] h3{ font-weight:var(--heading-weight); }
[style*="--body-weight:"] p{ font-weight:var(--body-weight); }
[style*="--section-pad-y:"]{ padding-block:var(--section-pad-y); }
/* --accent, --accent-bright and --radius override the theme tokens directly
   and cascade through every rule that consumes them — no hook needed. The
   renderer expands a section's --accent to the accent roles + rgb triplets. */

/* ---------- section design controls (editor Style tab → style_overrides) ----------
   Every rule matches only when its variable / data flag is present, so sections
   without design settings render exactly as before. */
[style*="--section-pt:"]{ padding-top:var(--section-pt); }
[style*="--section-pb:"]{ padding-bottom:var(--section-pb); }
[style*="--section-mt:"]{ margin-top:var(--section-mt); }
[style*="--section-mb:"]{ margin-bottom:var(--section-mb); }
[style*="--section-mx:"]{ margin-inline:var(--section-mx); }
[style*="--section-maxw:"] .wrap{ max-width:var(--section-maxw); }
[style*="--section-min-h:"]{ min-height:var(--section-min-h); }
[data-sec-valign]{ display:flex; flex-direction:column; }
[data-sec-valign] > .wrap{ width:100%; }
[data-sec-valign="start"]{ justify-content:flex-start; }
[data-sec-valign="center"]{ justify-content:center; }
[data-sec-valign="end"]{ justify-content:flex-end; }
/* background: composed layers (overlay, image, gradient) from style_attr(). Three attribute selectors (0,3,0):
   the layers must win over every rule that paints a section background with the "background"
   shorthand, which also resets the image (the Background color rule .section[style*="--section-bg:"],
   .section.alt, .tpl-title.ds-style-banner, .ef--media-card, the theme watermark on .band). Before
   2026-10-07 the Background color rule won and wiped every gradient, image and overlay. */
[data-sec-bg][data-sec-bg][data-sec-bg]{ background-image:var(--sec-bg-layers); background-repeat:no-repeat;
  background-size:var(--section-bg-size, cover); background-position:var(--section-bg-pos, center);
  background-attachment:var(--section-bg-attach, scroll); }
@media (max-width:940px){ [data-sec-bg][data-sec-bg][data-sec-bg]{ background-attachment:scroll; } }   /* fixed is unreliable on touch */
[style*="--section-radius:"]{ border-radius:var(--section-radius); overflow:hidden; }
[data-sec-shadow="sm"]{ box-shadow:var(--shadow-sm); }
[data-sec-shadow="md"]{ box-shadow:var(--shadow-md); }
[data-sec-shadow="lg"]{ box-shadow:var(--shadow-lg); }
/* outer background: fills the space around the section (its margins and the
   corners outside a radius), separate from the section's own background. A
   solid ring drawn behind the section, clipped to its top / bottom margins. */
[style*="--section-outer:"], [data-osep]{ --sec-mt:var(--section-mt, 0px); --sec-mb:var(--section-mb, 0px); --sec-mx:var(--section-mx, 0px); }
[style*="--section-outer:"]{
  box-shadow:0 0 0 100vmax var(--section-outer); clip-path:inset(calc(-1 * var(--sec-mt)) -100vmax calc(-1 * var(--sec-mb)) -100vmax); }
/* section block (outer) separators: the section's border image (Renderer::section_outer_separators),
   pushed out into its margins: full width, at the outer edges, never clipped by rounded corners */
[data-osep]{ --osep-th:var(--osep-top-h, 80px); --osep-bh:var(--osep-bottom-h, 80px);
  border-image-source:var(--sec-osep-img); border-image-slice:100 0 100 0; border-image-width:var(--osep-th) 0 var(--osep-bh) 0;
  border-image-outset:var(--sec-mt) var(--sec-mx) var(--sec-mb) var(--sec-mx); border-image-repeat:stretch; }
[style*="--section-outer:"][data-sec-shadow="sm"]{ box-shadow:var(--shadow-sm), 0 0 0 100vmax var(--section-outer); }
[style*="--section-outer:"][data-sec-shadow="md"]{ box-shadow:var(--shadow-md), 0 0 0 100vmax var(--section-outer); }
[style*="--section-outer:"][data-sec-shadow="lg"]{ box-shadow:var(--shadow-lg), 0 0 0 100vmax var(--section-outer); }
@media (max-width:940px){
  :is([style*="--section-outer:"], [data-osep])[style*="--section-mt-t:"]{ --sec-mt:var(--section-mt-t); }
  :is([style*="--section-outer:"], [data-osep])[style*="--section-mb-t:"]{ --sec-mb:var(--section-mb-t); }
  :is([style*="--section-outer:"], [data-osep])[style*="--section-mx-t:"]{ --sec-mx:var(--section-mx-t); }
  [data-osep][style*="--osep-top-h-t:"]{ --osep-th:var(--osep-top-h-t); }
  [data-osep][style*="--osep-bottom-h-t:"]{ --osep-bh:var(--osep-bottom-h-t); }
}
@media (max-width:720px){
  :is([style*="--section-outer:"], [data-osep])[style*="--section-mt-m:"]{ --sec-mt:var(--section-mt-m); }
  :is([style*="--section-outer:"], [data-osep])[style*="--section-mb-m:"]{ --sec-mb:var(--section-mb-m); }
  :is([style*="--section-outer:"], [data-osep])[style*="--section-mx-m:"]{ --sec-mx:var(--section-mx-m); }
  [data-osep][style*="--osep-top-h-m:"]{ --osep-th:var(--osep-top-h-m); }
  [data-osep][style*="--osep-bottom-h-m:"]{ --osep-bh:var(--osep-bottom-h-m); }
}
/* visibility per device (the editor keeps hidden sections visible + marked) */
@media (max-width:720px){ body:not(.cms-editing) [data-sec-hide="mobile"]{ display:none !important; } }
@media (min-width:721px){ body:not(.cms-editing) [data-sec-hide="desktop"]{ display:none !important; } }

/* ---------- per-device section values (editor Style tab · Tablet / Mobile) ----------
   Desktop values are the base variables above; a tablet value (-t) applies at
   ≤ 940px and a mobile value (-m) at ≤ 720px, each falling back to the larger
   device. Rules match only when the variable is present. */
@media (max-width:940px){
  [style*="--section-pt-t:"]{ padding-top:var(--section-pt-t); }
  [style*="--section-pb-t:"]{ padding-bottom:var(--section-pb-t); }
  [style*="--section-mt-t:"]{ margin-top:var(--section-mt-t); }
  [style*="--section-mb-t:"]{ margin-bottom:var(--section-mb-t); }
  [style*="--section-mx-t:"]{ margin-inline:var(--section-mx-t); }
  [style*="--section-maxw-t:"] .wrap{ max-width:var(--section-maxw-t); }
  [style*="--section-min-h-t:"]{ min-height:var(--section-min-h-t); }
  [style*="--section-radius-t:"]{ border-radius:var(--section-radius-t); overflow:hidden; }
  [style*="--h1-size-t:"] h1{ font-size:var(--h1-size-t); }
  [style*="--h2-size-t:"] h2{ font-size:var(--h2-size-t); }
  [style*="--h3-size-t:"] h3{ font-size:var(--h3-size-t); }
  [style*="--lead-size-t:"] .lead{ font-size:var(--lead-size-t); }
  [style*="--body-size-t:"]{ font-size:var(--body-size-t); }
  [style*="--sep-top-h-t:"] > .sec-sep--top svg{ height:var(--sep-top-h-t); }
  [style*="--sep-bottom-h-t:"] > .sec-sep--bottom svg{ height:var(--sep-bottom-h-t); }
}
@media (max-width:720px){
  [style*="--section-pt-m:"]{ padding-top:var(--section-pt-m); }
  [style*="--section-pb-m:"]{ padding-bottom:var(--section-pb-m); }
  [style*="--section-mt-m:"]{ margin-top:var(--section-mt-m); }
  [style*="--section-mb-m:"]{ margin-bottom:var(--section-mb-m); }
  [style*="--section-mx-m:"]{ margin-inline:var(--section-mx-m); }
  [style*="--section-maxw-m:"] .wrap{ max-width:var(--section-maxw-m); }
  [style*="--section-min-h-m:"]{ min-height:var(--section-min-h-m); }
  [style*="--section-radius-m:"]{ border-radius:var(--section-radius-m); overflow:hidden; }
  [style*="--h1-size-m:"] h1{ font-size:var(--h1-size-m); }
  [style*="--h2-size-m:"] h2{ font-size:var(--h2-size-m); }
  [style*="--h3-size-m:"] h3{ font-size:var(--h3-size-m); }
  [style*="--lead-size-m:"] .lead{ font-size:var(--lead-size-m); }
  [style*="--body-size-m:"]{ font-size:var(--body-size-m); }
  [style*="--sep-top-h-m:"] > .sec-sep--top svg{ height:var(--sep-top-h-m); }
  [style*="--sep-bottom-h-m:"] > .sec-sep--bottom svg{ height:var(--sep-bottom-h-m); }
}

/* ---------- shape separators (src/Separators.php) ----------
   Hang from the section's top edge; the bottom one is the same shape turned
   180°. Content stays above them unless "bring to front" is set. */
.sec-sep{ position:absolute; left:0; right:0; overflow:hidden; line-height:0; pointer-events:none; z-index:1; }
.sec-sep--top{ top:-1px; opacity:var(--sep-top-op, 1); }
.sec-sep--bottom{ bottom:-1px; transform:rotate(180deg); opacity:var(--sep-bottom-op, 1); }
.sec-sep svg{ display:block; position:relative; left:50%; transform:translateX(-50%) scale(var(--sep-sx, 1), var(--sep-sy, 1)); }
.sec-sep--top svg{ width:calc(var(--sep-top-w, 100) * 1% + 2px); height:var(--sep-top-h, 80px); fill:var(--sep-top-color, var(--bg)); }
.sec-sep--bottom svg{ width:calc(var(--sep-bottom-w, 100) * 1% + 2px); height:var(--sep-bottom-h, 80px); fill:var(--sep-bottom-color, var(--bg)); }
.sec-sep--flip{ --sep-sx:-1; }
.sec-sep--invert{ --sep-sy:-1; }
.sec-sep--front{ z-index:6; }
[data-sep] > .wrap, [data-sep] .pagehead-inner{ position:relative; z-index:2; }
[data-sep] .hero-slides{ z-index:0; }

/* ============================================================
   SLIDER SETTINGS (hero_slider + pagehead "Slider settings").
   Everything below is scoped to classes / data attributes the
   renderer only emits once an admin saves slider options, so
   sliders without options render exactly as before.
   ============================================================ */
/* ---- transition engine: rest = "enter from" state, .active = shown,
        .is-leaving = previous slide animating out (site.js) ---- */
[data-transition] .hero-slide{ opacity:0; visibility:hidden; z-index:0; transition:none; }
[data-transition] .hero-slide.active,
[data-transition] .hero-slide.is-leaving{ visibility:visible;
  transition:opacity var(--slider-speed,1s) var(--slider-ease,ease), transform var(--slider-speed,1s) var(--slider-ease,ease),
             clip-path var(--slider-speed,1s) var(--slider-ease,ease), filter var(--slider-speed,1s) var(--slider-ease,ease); }
[data-transition] .hero-slide.active{ opacity:1; z-index:2; transform:none; clip-path:inset(0 0 0 0); filter:none; }
[data-transition] .hero-slide.is-leaving{ z-index:1; opacity:1; }
/* hero: the active slide sits in the flow, so a short height setting can never
   clip the copy — the slider grows to fit the active slide's content instead */
.hero-slider[data-transition] .hero-slides{ position:relative; min-height:inherit; }
.hero-slider[data-transition] .hero-slide.active{ position:relative; min-height:inherit; display:flex; flex-direction:column; }
.hero-slider[data-transition] .hero-slide.active > .wrap{ flex:1 0 auto; height:auto; width:100%; }
/* slide (horizontal) */
[data-transition="slide"] .hero-slide{ opacity:1; transform:translateX(100%); }
[data-transition="slide"][data-dir="prev"] .hero-slide{ transform:translateX(-100%); }
[data-transition="slide"] .hero-slide.is-leaving{ transform:translateX(-100%); }
[data-transition="slide"][data-dir="prev"] .hero-slide.is-leaving{ transform:translateX(100%); }
/* slide up (vertical) */
[data-transition="slide-up"] .hero-slide{ opacity:1; transform:translateY(100%); }
[data-transition="slide-up"][data-dir="prev"] .hero-slide{ transform:translateY(-100%); }
[data-transition="slide-up"] .hero-slide.is-leaving{ transform:translateY(-100%); }
[data-transition="slide-up"][data-dir="prev"] .hero-slide.is-leaving{ transform:translateY(100%); }
/* zoom: new slide settles from a slight zoom while fading in */
[data-transition="zoom"] .hero-slide{ transform:scale(1.14); }
[data-transition="zoom"] .hero-slide.is-leaving{ transform:scale(.96); }
/* wipe: new slide revealed edge to edge over the old one */
[data-transition="wipe"] .hero-slide{ opacity:1; clip-path:inset(0 0 0 100%); }
[data-transition="wipe"][data-dir="prev"] .hero-slide{ clip-path:inset(0 100% 0 0); }
[data-transition="wipe"] .hero-slide.is-leaving{ clip-path:inset(0 0 0 0); }
/* blur: both slides cross through a soft blur */
[data-transition="blur"] .hero-slide{ filter:blur(18px); transform:scale(1.04); }
[data-transition="blur"] .hero-slide.is-leaving{ opacity:0; filter:blur(18px); transform:scale(1.04); }
.slider--no-kenburns .hero-slide.active .slide-bg{ animation:none; }
/* spatial transitions carry the outgoing copy out with its slide */
:is([data-transition="slide"], [data-transition="slide-up"], [data-transition="wipe"]) .hero-slide.is-leaving :is(.eyebrow, h1, .lead, .hero-cta){ opacity:1; transform:none; animation:none; }
@media (prefers-reduced-motion:reduce){
  [data-transition] .hero-slide, [data-transition] .hero-slide.active, [data-transition] .hero-slide.is-leaving{
    transition:none !important; transform:none !important; filter:none !important; clip-path:none !important; }
}

/* ---- height ---- */
.hero-slider.slider--h-screen, .pagehead-slider.slider--h-screen{ min-height:100vh; min-height:100svh; }
.pagehead-slider.slider--h-large{ min-height:clamp(560px, 82vh, 880px); }
.hero-slider.slider--h-medium, .pagehead-slider.slider--h-medium{ min-height:clamp(480px, 70vh, 720px); }
.hero-slider.slider--h-compact{ min-height:clamp(460px, 56vh, 600px); }
.pagehead-slider.slider--h-compact{ min-height:clamp(340px, 44vh, 480px); }
.hero-slider.slider--h-custom{ min-height:max(420px, var(--slider-h, 80vh)); }
.pagehead-slider.slider--h-custom{ min-height:max(280px, var(--slider-h, 60vh)); }
.hero-slider.slider--h-compact .hero-slide .wrap{ padding-bottom:clamp(84px, 10vh, 120px); }

/* ---- frame: boxed (contained, rounded card below the nav) ---- */
.slider--boxed{ width:calc(100% - 2 * var(--pad-x)); max-width:calc(var(--maxw) - 2 * var(--pad-x));
  margin:calc(var(--nav-h) + clamp(14px, 2vw, 24px)) auto 0; border-radius:var(--radius-lg);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.55); isolation:isolate; }
.slider--boxed .hero-slide .wrap{ padding-top:clamp(40px, 6vh, 72px); }
.slider--boxed .pagehead-inner{ padding-top:clamp(48px, 7vh, 88px); }
.slider--boxed .slide-count{ top:clamp(22px, 3vh, 34px); }
.hero-slider.slider--boxed{ min-height:clamp(540px, 80vh, 860px); }
.slider--boxed.slider--h-screen{ min-height:calc(100vh - var(--nav-h) - 32px); min-height:calc(100svh - var(--nav-h) - 32px); }
@media (max-width:620px){
  .slider--boxed{ width:calc(100% - 24px); border-radius:var(--radius); }
}

/* ---- template: centered ---- */
.slider--tpl-centered .hero-slide .wrap{ align-items:center; justify-content:center; text-align:center;
  padding-bottom:clamp(110px, 13vh, 170px); }
.slider--tpl-centered .hero-slide .slide-inner{ margin-inline:auto; }
.slider--tpl-centered .hero-slide h1, .slider--tpl-centered .hero-slide .lead,
.slider--tpl-centered.pagehead-slider h1, .slider--tpl-centered.pagehead-slider .lead{ margin-inline:auto; }
.slider--tpl-centered .hero-cta, .slider--tpl-centered .chips{ justify-content:center; }
.slider--tpl-centered.pagehead-slider .pagehead-inner{ text-align:center; align-self:center; }
.slider--tpl-centered .slider-bar{ justify-content:center; }
.slider--tpl-centered .eyebrow{ justify-content:center; }
.slider--tpl-centered .eyebrow::before{ flex-shrink:0; }
.slider--tpl-centered.pagehead-slider .pagehead-inner{ padding-bottom:clamp(96px, 12vh, 140px); }
.slider--tpl-centered .slide-scrim{ background:radial-gradient(90% 80% at 50% 55%, rgba(var(--scrim-rgb),calc(.62*var(--scrim-op))) 0%, rgba(var(--scrim-rgb),calc(.4*var(--scrim-op))) 60%, rgba(var(--scrim-rgb),calc(.78*var(--scrim-op))) 100%); }

/* ---- template: split (text panel left, image right) ---- */
.slider--tpl-split .hero-slide{ background:var(--bg-deepest); }
.slider--tpl-split .hero-slide .slide-bg{ left:44%; width:56%; }
/* Ken Burns zooms the picture INSIDE its frame here (the frame itself must not
   grow over the text panel) */
.slider--tpl-split .hero-slide.active .slide-bg{ animation:none; }
@media (prefers-reduced-motion:no-preference){
  .slider--tpl-split:not(.slider--no-kenburns) .hero-slide.active .slide-bg > *{ animation:kenburns 10s cubic-bezier(.33,0,.4,1) both; }
}
.slider--tpl-split .slide-scrim{ left:44%;
  background:linear-gradient(90deg, rgba(var(--scrim-rgb),calc(.75*var(--scrim-op))) 0%, rgba(var(--scrim-rgb),0) 34%),
             linear-gradient(0deg, rgba(var(--scrim-rgb),calc(.5*var(--scrim-op))) 0%, rgba(var(--scrim-rgb),0) 30%); }
.slider--tpl-split .hero-slide .wrap{ justify-content:center; }
.slider--tpl-split .hero-slide .slide-inner, .slider--tpl-split .pagehead-inner > *{ max-width:min(40%, 560px); }
.slider--tpl-split .pagehead-inner{ align-self:center; }
.slider--tpl-split .hero-slide h1, .slider--tpl-split.pagehead-slider h1{ font-size:clamp(34px, 3.7vw, 58px); max-width:none; }
.slider--tpl-split.pagehead-slider .pagehead-inner > h1{ max-width:min(40%, 560px); }
.slider--tpl-split .hero-slide .lead{ font-size:clamp(16px, 1.25vw, 19px); }
.slider--tpl-split .slider-dots button{ width:40px; }
@media (max-width:940px){
  .slider--tpl-split .hero-slide .slide-bg, .slider--tpl-split .slide-scrim{ left:0; width:100%; height:calc(var(--nav-h) + 50vw); }
  .slider--boxed.slider--tpl-split .hero-slide .slide-bg, .slider--boxed.slider--tpl-split .slide-scrim{ height:50vw; }
  .slider--tpl-split .slide-scrim{ background:linear-gradient(0deg, rgba(var(--scrim-rgb),calc(.7*var(--scrim-op))) 0%, rgba(var(--scrim-rgb),0) 40%); }
  .slider--tpl-split .hero-slide .wrap{ justify-content:flex-end; }
  .slider--tpl-split .hero-slide .slide-inner, .slider--tpl-split .pagehead-inner > *, .slider--tpl-split.pagehead-slider .pagehead-inner > h1{ max-width:none; }
  .slider--tpl-split.pagehead-slider .pagehead-inner{ align-self:flex-end; padding-top:calc(var(--nav-h) + 50vw + 32px); }
  .slider--boxed.slider--tpl-split.pagehead-slider .pagehead-inner{ padding-top:calc(50vw + 32px); }
  .hero-slider.slider--tpl-split{ min-height:clamp(720px, 100vh, 940px); }
}

/* ---- template: glass card ----
   The glass text panel's look comes from SliderOptions (panel_opacity / _blur / _tint / _gradient /
   _border, and a hero slide's own "panel"): --pnl-op, --pnl-blur, --pnl-rgb, --pnl-grad. Unset, they
   fall back to the card's own values (scrim colour at 42 %, 18 px blur, a hairline border). */
.slider--tpl-card .hero-slide .wrap{ justify-content:center; }
.slider--tpl-card .hero-slide .slide-inner, .slider--tpl-card.pagehead-slider .pagehead-inner{
  max-width:680px; padding:clamp(24px, 3.2vw, 46px); border-radius:var(--radius-lg);
  background:rgba(var(--pnl-rgb, var(--scrim-rgb)), var(--pnl-op, .42)); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(var(--pnl-blur, 18px)) saturate(1.25); backdrop-filter:blur(var(--pnl-blur, 18px)) saturate(1.25);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.5); }
/* the same glass panel on the other templates, once its opacity is set above 0 (slider or one slide) */
:is(.slider--panel .hero-slide, .hero-slide.hero-slide--panel) .slide-inner, .slider--panel.pagehead-slider .pagehead-inner{
  padding:clamp(22px, 2.8vw, 40px); border-radius:var(--radius-lg);
  background:rgba(var(--pnl-rgb, var(--scrim-rgb)), var(--pnl-op, .42)); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(var(--pnl-blur, 18px)) saturate(1.25); backdrop-filter:blur(var(--pnl-blur, 18px)) saturate(1.25);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.5); }
:is(.slider--panel .hero-slide, .hero-slide.hero-slide--panel) .slide-inner{ width:fit-content; max-width:min(900px, 100%); }
.slider--panel.pagehead-slider .pagehead-inner{ align-self:center; width:auto; max-width:min(820px, calc(100% - 2 * var(--pad-x)));
  margin:calc(var(--nav-h) + 32px) auto 72px max(var(--pad-x), calc((100% - var(--maxw)) / 2 + var(--pad-x))); }
.slider--tpl-centered.slider--panel .hero-slide .slide-inner, .slider--tpl-centered .hero-slide.hero-slide--panel .slide-inner{ margin-inline:auto; }
/* gradient fill instead of the flat colour; border on / off (a slide's choice wins over the slider's) */
:is(.pnl-grad .hero-slide, .hero-slide.pnl-grad) .slide-inner, .pnl-grad.pagehead-slider .pagehead-inner{ background:var(--pnl-grad); }
:is(.pnl-noborder .hero-slide, .hero-slide.pnl-noborder) .slide-inner, .pnl-noborder.pagehead-slider .pagehead-inner{ border-color:transparent; }
.hero-slide.pnl-border .slide-inner{ border-color:rgba(255,255,255,.16); }
.slider--tpl-card .hero-slide h1, .slider--tpl-card.pagehead-slider h1{ font-size:clamp(32px, 3.6vw, 56px); max-width:none; }
.slider--tpl-card .hero-slide h1{ margin-top:14px; }
.slider--tpl-card .hero-slide .hero-cta{ margin-top:30px; }
.slider--tpl-card.pagehead-slider .pagehead-inner{ align-self:center; width:auto;
  margin:calc(var(--nav-h) + 32px) auto 72px max(var(--pad-x), calc((100% - var(--maxw)) / 2 + var(--pad-x))); }
.slider--boxed.slider--tpl-card.pagehead-slider .pagehead-inner{ margin-top:40px; padding-top:clamp(24px, 3.2vw, 46px); }
.slider--tpl-card .slide-scrim{ opacity:.55; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .slider--tpl-card .hero-slide .slide-inner, .slider--tpl-card.pagehead-slider .pagehead-inner,
  :is(.slider--panel .hero-slide, .hero-slide.hero-slide--panel) .slide-inner, .slider--panel.pagehead-slider .pagehead-inner{ background:rgba(var(--pnl-rgb, var(--scrim-rgb)), .82); }
}
@media (max-width:620px){
  .slider--tpl-card.pagehead-slider .pagehead-inner{ margin-inline:12px; }
  .slider--tpl-card .hero-slide .slide-inner{ padding:22px; }
  .slider--panel.pagehead-slider .pagehead-inner{ margin-inline:12px; max-width:none; }
  :is(.slider--panel .hero-slide, .hero-slide.hero-slide--panel) .slide-inner{ padding:22px; }
}

/* ============================================================
   SECTION STYLES + SECTION TEMPLATES (src/BlockDesign.php)
   ============================================================ */

/* ---------- split media ("Who we are") styles — .sm only exists once a style is saved ---------- */
.sm .sm-media .media{ width:100%; }
.sm.ds-ratio-landscape .sm-media .media{ aspect-ratio:4 / 3; height:auto; }
.sm.ds-ratio-wide .sm-media .media{ aspect-ratio:16 / 9; height:auto; }
.sm.ds-ratio-square .sm-media .media{ aspect-ratio:1; height:auto; }
.sm.ds-ratio-portrait .sm-media .media{ aspect-ratio:3 / 4; height:auto; }
.sm.ds-corners-square .sm-media .media{ border-radius:0; }
.sm.ds-corners-large .sm-media .media{ border-radius:calc(var(--radius-lg) * 2); }
.sm.ds-corners-arch .sm-media .media{ border-radius:999px 999px var(--radius) var(--radius); }
.sm.ds-valign-start .grid{ align-items:start; }
.sm.ds-frame .sm-media{ position:relative; }
.sm.ds-frame .sm-media::before{ content:""; position:absolute; inset:18px -18px -18px 18px; border:2px solid var(--accent-line); border-radius:inherit; z-index:0; }
.sm.sm--media-right.ds-frame .sm-media::before{ inset:18px 18px -18px -18px; }
.sm.ds-frame .sm-media .media{ position:relative; z-index:1; }
.sm.ds-frame.ds-corners-rounded .sm-media::before{ border-radius:var(--radius); }
.sm.ds-frame.ds-corners-large .sm-media::before{ border-radius:calc(var(--radius-lg) * 2); }
.sm.ds-frame.ds-corners-arch .sm-media::before{ border-radius:999px 999px var(--radius) var(--radius); }
/* image width (classic / overlap / editorial) */
@media (min-width:881px){
  /* Classic keeps the variant's own split unless an image width is chosen */
  .sm.ds-style-classic[style*="--ds-image-width:"] .grid, .sm.ds-style-editorial .grid{ grid-template-columns:var(--ds-image-width, 50%) 1fr; }
  .sm.sm--media-right.ds-style-classic[style*="--ds-image-width:"] .grid, .sm.sm--media-right.ds-style-editorial .grid{ grid-template-columns:1fr var(--ds-image-width, 50%); }
}
/* stats styles */
.sm.ds-stats-cards .stats{ border-top:0; gap:16px; }
.sm.ds-stats-cards .stat{ border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); padding:28px 26px 22px; }
.sm.ds-stats-plain .stats{ border-top:0; }
.sm.ds-stats-plain .stat{ border-right:0; padding-left:0; }
.dark.sm.ds-stats-cards .stat{ background:rgba(255,255,255,.04); border-color:var(--line-on-dark); }
/* overlap card: wide image, the copy as a raised card over its edge */
@media (min-width:881px){
  .sm.ds-style-overlap .grid{ grid-template-columns:var(--ds-image-width, 60%) 1fr; gap:0; }
  .sm.sm--media-right.ds-style-overlap .grid{ grid-template-columns:1fr var(--ds-image-width, 60%); }
  .sm.ds-style-overlap .sm-copy{ position:relative; z-index:2; margin-left:-90px; }
  .sm.sm--media-right.ds-style-overlap .sm-copy{ margin-left:0; margin-right:-90px; }
}
.sm.ds-style-overlap .sm-copy{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(26px, 3.4vw, 52px); box-shadow:var(--shadow-lg); }
.dark.sm.ds-style-overlap .sm-copy{ background:var(--panel); border-color:var(--line-on-dark); }
/* background image: the picture fills the section, the copy sits on a panel */
.sm.ds-style-background{ position:relative; overflow:hidden; isolation:isolate; }
.sm-bg{ position:absolute; inset:0; z-index:-1; }
.sm-bg .media{ position:absolute; inset:0; width:100%; height:100%; border-radius:0; }
.sm-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(var(--scrim-rgb), calc(var(--ds-overlay, .55) + .2)) 0%, rgba(var(--scrim-rgb), var(--ds-overlay, .55)) 60%, rgba(var(--scrim-rgb), calc(var(--ds-overlay, .55) - .1)) 100%); }
.sm.ds-style-background .grid{ grid-template-columns:minmax(0, 620px); }
.sm.sm--media-right.ds-style-background .grid{ justify-content:end; }
.sm.ds-style-background .sm-copy{ background:rgba(var(--scrim-rgb), .35); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-lg); padding:clamp(26px, 3.4vw, 48px); }
.sm.ds-style-background .sm-copy, .sm.ds-style-background .stats{ color:var(--text-on-dark); }
.sm.ds-style-background h2, .sm.ds-style-background .stat .num{ color:var(--on-dark-strong); }
.sm.ds-style-background p, .sm.ds-style-background .lead, .sm.ds-style-background .stat .lbl{ color:var(--lead-on-dark); }
.sm.ds-style-background .eyebrow{ color:var(--accent-bright); }
.sm.ds-style-background .btn-ghost{ color:var(--on-dark-strong); border-color:rgba(255,255,255,.35); }
.sm.ds-style-background .stats{ border-top-color:rgba(255,255,255,.2); }
.sm.ds-style-background .stat{ border-right-color:rgba(255,255,255,.16); }
/* stacked: centred copy above a wide image */
.sm.ds-style-stacked .grid{ grid-template-columns:1fr; justify-items:center; gap:clamp(36px, 5vw, 64px); }
.sm.ds-style-stacked .sm-copy{ max-width:760px; text-align:center; align-items:center; }
.sm.ds-style-stacked .sm-copy .eyebrow{ justify-content:center; }
.sm.ds-style-stacked .sm-copy .chips{ justify-content:center; }
.sm.ds-style-stacked .sm-media{ width:100%; }
.sm.ds-style-stacked.ds-ratio-auto .sm-media .media{ aspect-ratio:21 / 9; height:auto; }
/* editorial: big full-width headline, then image + text */
.sm-head{ margin-bottom:clamp(32px, 4.5vw, 64px); max-width:1000px; }
.sm-head h2{ font-size:clamp(34px, 4.6vw, 64px); line-height:1.04; max-width:20ch; }
.sm.ds-style-editorial .grid{ align-items:start; }
@media (max-width:880px){
  .sm .grid{ grid-template-columns:1fr; }
  .sm .sm-media{ order:-1; }
  .sm.ds-style-overlap .sm-copy{ margin:-56px 14px 0; }
  .sm.ds-frame .sm-media::before{ inset:12px -10px -10px 12px; }
  .sm.ds-style-stacked .sm-media, .sm.ds-style-background .sm-copy{ order:0; }
}

/* ---------- section templates: shared ---------- */
/* highlighted words on dark backgrounds use the bright accent (contrast) */
.dark.tpl .tpl-head .accent, .tpl .dark .tpl-head .accent{ color:var(--accent-bright); }
.tpl-head{ display:flex; flex-direction:column; gap:16px; max-width:760px; margin-bottom:clamp(36px, 4.5vw, 60px); }
.tpl-head h2{ max-width:22ch; }
.tpl-head--center{ margin-inline:auto; text-align:center; align-items:center; }
.tpl-head--center .eyebrow{ justify-content:center; }
.tpl-head--center h2{ margin-inline:auto; }
.tpl-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(32px, 4vw, 48px); }
.ds-head-center .tpl-ctas{ justify-content:center; }
.tpl h3{ font-size:clamp(19px, 1.5vw, 22px); line-height:1.25; }
.dark.tpl p{ color:var(--muted-on-dark); }

/* ---------- features grid ---------- */
.tf-grid{ display:grid; grid-template-columns:repeat(var(--ds-columns, 3), minmax(0, 1fr)); gap:clamp(16px, 2vw, 24px); }
.tf-item{ display:flex; flex-direction:column; gap:16px; }
.tf-body{ display:flex; flex-direction:column; gap:10px; }
.tf-body p{ color:var(--muted); line-height:1.6; }
.tf-ico{ display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; color:var(--accent); }
.tf-ico .ico{ width:26px; height:26px; }
.ds-icon-circle .tf-ico{ border-radius:50%; background:rgba(var(--accent-rgb), .1); }
.ds-icon-square .tf-ico{ border-radius:var(--radius-md); background:rgba(var(--accent-rgb), .1); }
.ds-icon-plain .tf-ico{ width:auto; height:auto; justify-content:flex-start; }
.ds-icon-plain .tf-ico .ico{ width:34px; height:34px; }
.tf-link{ margin-top:4px; font-weight:600; color:var(--accent); }
.tf-link:hover{ text-decoration:underline; }
.ds-align-center .tf-item{ align-items:center; text-align:center; }
.ds-style-cards .tf-item{ padding:clamp(24px, 2.6vw, 34px); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.ds-style-cards .tf-item:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--accent-line); }
.tpl-features.ds-style-bordered .tf-grid{ gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.ds-style-bordered .tf-item{ padding:clamp(24px, 2.6vw, 36px); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.ds-style-iconleft .tf-grid{ grid-template-columns:repeat(min(var(--ds-columns, 3), 2), minmax(0, 1fr)); column-gap:clamp(28px, 4vw, 56px); row-gap:clamp(28px, 3vw, 40px); }
.ds-style-iconleft .tf-item{ flex-direction:row; align-items:flex-start; gap:20px; }
.ds-style-iconleft .tf-ico{ flex:0 0 auto; }
.tf-num{ font-family:var(--display); font-weight:var(--fw-heading); font-size:clamp(34px, 3vw, 46px); line-height:1; color:var(--accent); letter-spacing:-.02em;
  padding-bottom:16px; border-bottom:2px solid var(--accent-line); align-self:stretch; }
.dark .ds-style-cards .tf-item, .dark.ds-style-cards .tf-item{ background:rgba(255,255,255,.04); border-color:var(--line-on-dark); }
.dark.tpl-features .tf-body p{ color:var(--muted-on-dark); }
@media (max-width:900px){ .tf-grid{ grid-template-columns:repeat(min(var(--ds-columns, 3), 2), minmax(0, 1fr)); } }
@media (max-width:600px){ .tf-grid, .ds-style-iconleft .tf-grid{ grid-template-columns:1fr; } }

/* ---------- stats (8 styles; every colour / size / font from the Section style) ---------- */
@property --ts-p{ syntax:'<number>'; inherits:true; initial-value:0; }
.tpl-stats{ --ts-line:var(--ds-line-color, var(--line)); --ts-card:var(--ds-card-bg, var(--surface)); --ts-num:var(--ds-number-color, var(--accent));
  --ts-fix:var(--ds-suffix-color, var(--ts-num)); --ts-lbl:var(--ds-label-color, var(--muted)); --ts-r:var(--ds-radius, var(--radius-lg)); }
.dark.tpl-stats, .tpl-stats .dark{ --ts-line:var(--ds-line-color, var(--line-on-dark)); --ts-card:var(--ds-card-bg, rgba(255,255,255,.05));
  --ts-num:var(--ds-number-color, var(--accent-bright)); --ts-lbl:var(--ds-label-color, var(--muted-on-dark)); }
.ts-grid{ display:grid; grid-template-columns:repeat(var(--ds-columns, 4), minmax(0, 1fr)); gap:clamp(16px, 2vw, 24px); }
.ts-item{ --ts-p:var(--p, 100); transition:--ts-p var(--ds-duration, 1600ms) cubic-bezier(.16,.84,.34,1) .2s; }
.motion-ready .ts-item.reveal:not(.in){ --ts-p:0; }
.ts-num{ font-family:var(--display); font-weight:var(--ds-weight, var(--fw-heading)); font-size:var(--ds-size, clamp(44px, 5vw, 76px));
  line-height:1; letter-spacing:-.035em; color:var(--ts-num); font-variant-numeric:tabular-nums; }
.ds-font-body .ts-num{ font-family:var(--body); letter-spacing:-.015em; }
.ds-font-label .ts-num{ font-family:var(--label); letter-spacing:-.02em; }
.ds-font-serif .ts-num{ font-family:Georgia, "Times New Roman", serif; font-weight:var(--ds-weight, 500); letter-spacing:-.01em; }
.ts-fix{ font-size:.5em; font-weight:600; margin-inline:2px; color:var(--ts-fix); }
.ts-label{ margin-top:12px; color:var(--ts-lbl); font-size:var(--ds-label-size, 16px); line-height:1.45; max-width:26ch; }
.ds-align-center .ts-item{ text-align:center; }
.ds-align-center .ts-label{ margin-inline:auto; }

/* 1 · divider lines (unchanged) */
.ds-style-lines .ts-grid{ gap:0; border-top:2px solid var(--ts-line); }
.ds-style-lines .ts-item{ padding:32px 28px 4px 0; border-right:1px solid var(--ts-line); }
.ds-style-lines .ts-item + .ts-item{ padding-left:28px; }
.ds-style-lines .ts-item:last-child{ border-right:0; }

/* 2 · tiles: tall tiles, an index line on top, the number settles at the bottom,
       an accent bar that grows on hover */
.ds-style-cards .ts-grid{ gap:clamp(12px, 1.4vw, 18px); }
.ds-style-cards .ts-item{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:clamp(22px, 2.4vw, 32px);
  min-height:clamp(210px, 19vw, 260px); padding:clamp(22px, 2.2vw, 30px); border:1px solid var(--ts-line); border-radius:var(--ts-r);
  background:linear-gradient(160deg, var(--ts-card) 0%, var(--ts-card) 55%, rgba(var(--accent-rgb), .07) 100%);
  transition:transform .35s cubic-bezier(.16,.84,.34,1), box-shadow .35s ease, border-color .35s ease; }
.ds-style-cards .ts-item::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:3px; background:var(--ts-num);
  transform:scaleX(.16); transform-origin:left; transition:transform .55s cubic-bezier(.16,.84,.34,1); }
.ds-style-cards .ts-item:hover{ transform:translateY(-4px); box-shadow:0 22px 44px -26px rgba(0,0,0,.35); border-color:rgba(var(--accent-rgb), .35); }
.ds-style-cards .ts-item:hover::after{ transform:scaleX(1); }
.ts-idx{ display:flex; align-items:center; gap:12px; font-family:var(--label); font-size:12px; letter-spacing:.16em; color:var(--ts-lbl); }
.ts-idx::after{ content:""; flex:1; height:1px; background:var(--ts-line); }
/* numbers line up across tiles (right under the index); labels sit at the bottom */
.ds-style-cards .ts-body{ flex:1; display:flex; flex-direction:column; }
.ds-style-cards .ts-label{ margin-top:auto; padding-top:18px; }
.ds-style-cards.ds-align-center .ts-idx::before{ content:""; flex:1; height:1px; background:var(--ts-line); }

/* 3 · spotlight band: a dark band lit by soft accent glows, numbers in a light
       gradient, fine dividers, spaced-caps labels */
.tpl-stats.ds-style-band{ position:relative; overflow:hidden;
  background:radial-gradient(55% 120% at 8% 0%, rgba(var(--accent-rgb), .28) 0%, rgba(var(--accent-rgb), 0) 62%),
             radial-gradient(45% 110% at 100% 100%, rgba(var(--accent-bright-rgb, 248,168,0), .14) 0%, rgba(var(--accent-bright-rgb, 248,168,0), 0) 60%),
             var(--panel); }
.ds-style-band .ts-grid{ gap:0; }
.ds-style-band .ts-item{ padding:10px clamp(18px, 2.4vw, 34px) 6px; border-left:1px solid var(--ts-line); }
.ds-style-band .ts-item:first-child{ border-left:0; padding-left:0; }
.ds-style-band .ts-num{ font-size:var(--ds-size, clamp(48px, 5.4vw, 84px));
  background:linear-gradient(180deg, var(--on-dark-strong) 15%, var(--ts-num) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ds-style-band .ts-num .ts-fix{ -webkit-text-fill-color:var(--ts-fix); color:var(--ts-fix); }
.ds-style-band .ts-label{ margin-top:16px; font-family:var(--label); font-size:var(--ds-label-size, 12.5px); letter-spacing:.14em; text-transform:uppercase; line-height:1.6; }

/* 4 · featured number: one headline number, the others as a ruled list */
.ts-feature{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); gap:clamp(32px, 6vw, 96px); align-items:end; }
.ts-hero{ padding-top:22px; border-top:3px solid var(--ts-num); }
.ts-hero .ts-num{ font-size:var(--ds-size, clamp(96px, 13vw, 200px)); line-height:.86; letter-spacing:-.05em; }
.ts-hero .ts-label{ margin-top:22px; font-size:var(--ds-label-size, clamp(17px, 1.4vw, 20px)); max-width:30ch; color:var(--ink); }
.dark .ts-hero .ts-label, .dark.tpl-stats .ts-hero .ts-label{ color:var(--text-on-dark); }
.ts-list{ display:flex; flex-direction:column; }
.ts-list .ts-item{ display:grid; grid-template-columns:minmax(120px, .8fr) minmax(0, 1.2fr); align-items:baseline; gap:20px; padding:22px 0; border-top:1px solid var(--ts-line); }
.ts-list .ts-item:last-child{ border-bottom:1px solid var(--ts-line); }
.ts-list .ts-num{ font-size:clamp(34px, 3.4vw, 52px); }
.ts-list .ts-label{ margin-top:0; }
.ds-style-centered.ds-align-center .ts-hero{ text-align:left; }

/* 5 · rings: thin SVG rings with rounded ends that draw in, number centred */
.ds-style-circles .ts-grid{ row-gap:clamp(28px, 3vw, 44px); }
.ds-style-circles .ts-item{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.ts-ring{ position:relative; width:clamp(140px, 13vw, 184px); aspect-ratio:1; display:grid; place-items:center; }
.ts-ring svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.ts-ring circle{ fill:none; stroke-width:4; }
.ts-ring__trk{ stroke:var(--ts-line); }
.ts-ring__val{ stroke:var(--ts-num); stroke-linecap:round; stroke-dasharray:var(--ts-p) 100; }
.ts-ring::before{ content:""; position:absolute; inset:13%; border-radius:50%; background:var(--ts-card); box-shadow:inset 0 0 0 1px var(--ts-line); }
.ds-style-circles .ts-num{ position:relative; font-size:var(--ds-size, clamp(30px, 2.8vw, 42px)); }
.ds-style-circles .ts-label{ margin:18px auto 0; max-width:22ch; }

/* 6 · icon rows: a spec sheet — soft icon tile, then the number and its label */
.ds-style-icons .ts-grid{ grid-template-columns:repeat(min(var(--ds-columns, 4), 2), minmax(0, 1fr)); column-gap:clamp(32px, 5vw, 72px); row-gap:0; }
.ds-style-icons .ts-item{ display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:clamp(18px, 2vw, 26px);
  padding:clamp(20px, 2.2vw, 28px) 0; border-top:1px solid var(--ts-line); }
.ts-ico{ display:grid; place-items:center; width:clamp(56px, 5vw, 68px); aspect-ratio:1; border-radius:var(--ds-radius, 18px);
  background:linear-gradient(145deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .05)); color:var(--ts-num);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb), .18); }
.ts-ico .ico{ width:28px; height:28px; }
.ds-style-icons .ts-num{ font-size:var(--ds-size, clamp(34px, 3.2vw, 48px)); }
.ds-style-icons .ts-label{ margin-top:6px; }
.ds-style-icons.ds-align-center .ts-item{ text-align:left; }

/* 7 · meters: label and number on one line, a thick gradient bar with a glowing cap */
.ds-style-bars .ts-grid{ grid-template-columns:repeat(min(var(--ds-columns, 4), 2), minmax(0, 1fr)); column-gap:clamp(32px, 5vw, 80px); row-gap:clamp(26px, 3vw, 38px); }
.ts-meter__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.ts-meter__head .ts-label{ margin:0; color:var(--ink); font-weight:500; font-size:var(--ds-label-size, 17px); }
.dark .ts-meter__head .ts-label{ color:var(--text-on-dark); }
.ds-style-bars .ts-num{ font-size:var(--ds-size, clamp(32px, 3vw, 44px)); flex:0 0 auto; }
.ts-bar{ position:relative; height:10px; margin-top:16px; border-radius:10px; background:var(--ts-line); }
.ts-bar i{ position:absolute; left:0; top:0; bottom:0; width:calc(var(--ts-p) * 1%); border-radius:inherit;
  background:linear-gradient(90deg, var(--ts-num), var(--accent-bright)); box-shadow:0 0 18px -2px rgba(var(--accent-bright-rgb, 248,168,0), .55); }
.ts-bar i::after{ content:""; position:absolute; right:-2px; top:50%; width:16px; height:16px; margin-top:-8px; border-radius:50%;
  background:var(--ts-card); border:3px solid var(--accent-bright); box-shadow:0 0 0 4px rgba(var(--accent-bright-rgb, 248,168,0), .18); }

/* 8 · split panel: the intro on a dark panel beside a 2×2 grid with fine cross lines */
.ts-split{ display:grid; grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr); gap:clamp(24px, 4vw, 56px); align-items:stretch; }
.ts-intro{ display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(28px, 3.6vw, 52px); border-radius:var(--ts-r);
  background:radial-gradient(90% 70% at 0% 0%, rgba(var(--accent-rgb), .32) 0%, rgba(var(--accent-rgb), 0) 60%), var(--panel); min-height:clamp(300px, 28vw, 400px); }
.ts-intro .tpl-head{ margin-bottom:0; }
.ds-style-split .ts-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0; align-content:center; }
.ds-style-split .ts-item{ padding:clamp(24px, 3vw, 40px); border-bottom:1px solid var(--ts-line); }
.ds-style-split .ts-item:nth-child(odd){ border-right:1px solid var(--ts-line); padding-left:clamp(4px, 1vw, 12px); }
.ds-style-split .ts-item:nth-last-child(-n+2){ border-bottom:0; }
.ds-style-split .ts-num{ font-size:var(--ds-size, clamp(40px, 4.2vw, 64px)); }

.ds-head-center .ts-label{ margin-inline:auto; }
@media (max-width:900px){
  .ts-split, .ts-feature{ grid-template-columns:1fr; }
  .ts-intro{ min-height:0; }
}
@media (max-width:820px){
  .ts-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:16px; }
  .ds-style-lines .ts-item{ padding:24px 16px 8px 0; border-right:0; }
  .ds-style-lines .ts-item + .ts-item{ padding-left:0; }
  .ds-style-band .ts-grid{ column-gap:clamp(18px, 5vw, 32px); }
  .ds-style-band .ts-item, .ds-style-band .ts-item:first-child{ border-left:0; padding:14px 0; }
  .ds-style-band .ts-label{ letter-spacing:.1em; }
  .ds-style-icons .ts-grid, .ds-style-bars .ts-grid{ grid-template-columns:1fr; }
}
@media (max-width:520px){ .ds-style-cards .ts-grid, .ds-style-circles .ts-grid{ grid-template-columns:1fr; } .ts-list .ts-item{ grid-template-columns:1fr; gap:6px; } }
@media (prefers-reduced-motion:reduce){ .ts-item{ transition:none; } .motion-ready .ts-item.reveal:not(.in){ --ts-p:var(--p, 100); } .ds-style-cards .ts-item{ transition:none; } }

/* ---------- testimonials ---------- */
.tq-grid{ display:grid; grid-template-columns:repeat(var(--ds-columns, 3), minmax(0, 1fr)); gap:clamp(16px, 2vw, 24px); }
.tq-item{ margin:0; display:flex; gap:24px; }
.tq-body{ display:flex; flex-direction:column; gap:18px; flex:1; }
.tq-mark{ font-family:Georgia, "Times New Roman", serif; font-size:64px; line-height:.6; height:28px; color:var(--accent); }
.tq-item blockquote{ margin:0; font-size:clamp(17px, 1.35vw, 20px); line-height:1.55; color:var(--ink); }
.tq-who{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.tq-who b{ display:block; font-weight:600; }
.tq-who small{ display:block; color:var(--muted); font-size:14px; margin-top:2px; }
.tq-photo{ width:46px; height:46px; flex:0 0 auto; border-radius:50% !important; }
.tq-photo-lg{ width:42%; flex:0 0 auto; aspect-ratio:4 / 5; height:auto; border-radius:var(--radius-lg); }
.ds-style-cards .tq-item{ padding:clamp(24px, 2.6vw, 34px); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); }
.ds-style-spotlight .tq-grid, .ds-style-split .tq-grid{ grid-template-columns:1fr; }
.ds-style-spotlight .tq-item{ max-width:880px; margin-inline:auto; text-align:center; }
.ds-style-spotlight .tq-body{ align-items:center; }
.ds-style-spotlight .tq-mark{ font-size:110px; height:44px; }
.ds-style-spotlight blockquote{ font-family:var(--display); font-size:clamp(24px, 2.6vw, 38px); line-height:1.3; letter-spacing:-.01em; }
.ds-style-split .tq-item{ align-items:center; gap:clamp(28px, 5vw, 72px); flex-direction:row-reverse; }
.ds-style-split blockquote{ font-family:var(--display); font-size:clamp(22px, 2.2vw, 32px); line-height:1.35; }
.ds-style-minimal .tq-item{ padding-left:22px; border-left:2px solid var(--accent-line); }
.dark.tpl-quotes blockquote{ color:var(--text-on-dark); }
.dark.tpl-quotes .ds-style-cards .tq-item, .dark.ds-style-cards .tq-item{ background:rgba(255,255,255,.04); border-color:var(--line-on-dark); }
@media (max-width:900px){ .tq-grid{ grid-template-columns:1fr; } .ds-style-split .tq-item{ flex-direction:column; } .tq-photo-lg{ width:100%; max-width:360px; } }

/* ---------- logos ----------
   10 styles (BlockDesign 'logo_strip'); every look option is a --ds-* variable
   or a ds-* class, each brand can carry --tl-scale (its "Logo size"). */
.tpl-logos{ --tl-line:var(--ds-tile-border, var(--line)); --tl-gap:var(--ds-gap, clamp(12px, 1.6vw, 20px)); --tl-ink:var(--ink); --tl-muted:var(--muted); --tl-tile:var(--surface); }
.dark.tpl-logos{ --tl-line:var(--ds-tile-border, var(--line-on-dark)); --tl-ink:var(--on-dark-strong); --tl-muted:var(--muted-on-dark); --tl-tile:transparent; }
.tl-grid{ display:grid; grid-template-columns:repeat(var(--ds-columns, 6), minmax(0, 1fr)); gap:var(--tl-gap); align-items:center; }
.tl-item{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:calc(var(--ds-logo-h, 44px) + 28px);
  padding:var(--ds-tile-pad, 14px); opacity:var(--ds-opacity, 1); color:inherit; text-decoration:none;
  transition:filter .25s ease, opacity .25s ease, transform .3s cubic-bezier(.16,.84,.34,1), box-shadow .3s ease; }
.tl-img{ height:calc(var(--ds-logo-h, 44px) * var(--tl-scale, 1)); width:100%; background:none; border-radius:0; transition:transform .3s cubic-bezier(.16,.84,.34,1); }
.tl-img img{ object-fit:contain; }
.tl-img.ph{ background:linear-gradient(135deg, var(--media-bg) 0%, var(--media-ph-mid) 100%); border-radius:var(--radius-sm); }
.tl-name{ font-family:var(--display); font-weight:600; font-size:clamp(16px, 1.4vw, 20px); color:var(--ds-name-color, var(--tl-muted)); letter-spacing:-.01em; }
.tl-label{ font-family:var(--label); font-size:var(--ds-name-size, 12.5px); letter-spacing:.06em; line-height:1.3; color:var(--ds-name-color, var(--tl-muted)); text-align:center; }
.tl-cap{ margin:0; font-size:14px; line-height:1.5; color:var(--tl-muted); }
.tl-go{ font-size:13px; font-weight:600; color:var(--accent); }
.dark .tl-go{ color:var(--accent-bright); }
.tpl-logos[style*="--ds-opacity:"] .tl-item:hover{ opacity:1; }
/* logo colour: original (as uploaded) · grey, colour on hover · all dark · all white;
   a brand set to "Always in its original colours" ignores the grey / dark / white choice */
.ds-tone-grey .tl-item{ filter:grayscale(1); opacity:var(--ds-opacity, .7); }
.ds-tone-grey .tl-item:hover, .ds-tone-grey .tl-item:focus-visible{ filter:none; opacity:1; }
.tpl-logos .tl-item--orig{ filter:none; opacity:1; }
.tpl-logos .tl-item--orig .tl-img img{ filter:none; }
/* logo colour: all dark / all white (white suits dark backgrounds) */
.ds-tone-dark .tl-img img{ filter:brightness(0); }
.ds-tone-white .tl-img img{ filter:brightness(0) invert(1); }
/* hover effects */
.ds-hover-lift .tl-item:hover{ transform:translateY(-4px); }
.ds-hover-zoom .tl-item:hover .tl-img{ transform:scale(1.08); }
.ds-hover-glow .tl-item:hover{ box-shadow:var(--shadow-md); }
/* a tile colour, when set, applies to every style */
.tpl-logos[style*="--ds-tile-bg:"] .tl-item{ background:var(--ds-tile-bg); border-radius:var(--ds-radius, var(--radius-md)); }
.tl-item--featured{ box-shadow:inset 0 0 0 1.5px var(--accent); border-radius:var(--ds-radius, var(--radius-md)); }
.dark .tl-item--featured{ box-shadow:inset 0 0 0 1.5px var(--accent-bright); }
/* tiles */
.ds-style-tiles .tl-item{ background:var(--ds-tile-bg, var(--tl-tile)); border:1px solid var(--tl-line); border-radius:var(--ds-radius, var(--radius-md)); padding:var(--ds-tile-pad, 20px); }
/* single row */
.ds-style-inline .tl-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--ds-gap, clamp(20px, 4vw, 56px)); }
.ds-style-inline .tl-item{ padding:var(--ds-tile-pad, 4px); }
.ds-style-inline .tl-img{ width:auto; aspect-ratio:3 / 1; }
.ds-dividers.ds-style-inline .tl-item + .tl-item::before{ content:""; position:absolute; top:22%; bottom:22%; left:calc(var(--ds-gap, clamp(20px, 4vw, 56px)) / -2); width:1px; background:var(--tl-line); }
/* hairline wall */
.tl-wall{ overflow:hidden; border:1px solid var(--tl-line); border-radius:var(--ds-radius, 0px); }
.ds-style-wall .tl-grid{ gap:0; margin:0 -1px -1px 0; }
.ds-style-wall .tl-item{ border-right:1px solid var(--tl-line); border-bottom:1px solid var(--tl-line); border-radius:0; padding:var(--ds-tile-pad, clamp(18px, 2.4vw, 34px)); min-height:calc(var(--ds-logo-h, 44px) + 64px); background:var(--ds-tile-bg, transparent); }
/* brand cards */
.ds-style-cards .tl-grid, .ds-style-split .tl-grid{ grid-template-columns:repeat(min(var(--ds-columns, 6), 4), minmax(0, 1fr)); }
.ds-style-cards .tl-grid{ align-items:stretch; }
.ds-style-cards .tl-item{ align-items:flex-start; justify-content:flex-start; text-align:left; gap:12px; padding:var(--ds-tile-pad, clamp(20px, 2.2vw, 28px));
  background:var(--ds-tile-bg, var(--tl-tile)); border:1px solid var(--tl-line); border-radius:var(--ds-radius, var(--radius-md)); }
.ds-style-cards .tl-img img{ object-position:left center; }
.ds-style-cards .tl-img{ margin-bottom:6px; }
.ds-style-cards .tl-label{ font-family:var(--display); font-weight:700; font-size:var(--ds-name-size, 17px); letter-spacing:-.01em; color:var(--ds-name-color, var(--tl-ink)); text-align:left; }
.ds-style-cards .tl-go{ margin-top:auto; padding-top:6px; }
/* intro + logos */
.tl-split{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(32px, 5vw, 80px); align-items:center; }
.tl-split .tpl-head{ margin:0; }
/* featured brand */
.tl-spot{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr); gap:var(--tl-gap); align-items:stretch; }
.ds-style-spotlight .tl-item--main{ gap:14px; padding:var(--ds-tile-pad, clamp(28px, 4vw, 56px)); background:var(--ds-tile-bg, var(--tl-tile)); border:1px solid var(--tl-line);
  border-radius:var(--ds-radius, var(--radius-lg)); box-shadow:none; text-align:center; }
.ds-style-spotlight .tl-item--main .tl-img{ height:calc(var(--ds-logo-h, 44px) * 2 * var(--tl-scale, 1)); }
.ds-style-spotlight .tl-item--main .tl-label{ font-family:var(--display); font-weight:700; font-size:calc(var(--ds-name-size, 14px) + 6px); letter-spacing:-.01em; color:var(--ds-name-color, var(--tl-ink)); }
.ds-style-spotlight .tl-spot .tl-grid{ grid-template-columns:repeat(min(var(--ds-columns, 6), 3), minmax(0, 1fr)); align-items:stretch; }
.ds-style-spotlight .tl-spot .tl-grid .tl-item{ border:1px solid var(--tl-line); border-radius:var(--ds-radius, var(--radius-md)); background:var(--ds-tile-bg, transparent); }
/* scrolling rows (one, or two in opposite directions) */
.tl-marquee{ overflow:hidden; }
.ds-fade .tl-marquee{ -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tl-track{ --tl-mgap:var(--ds-gap, clamp(28px, 4vw, 60px)); display:flex; width:max-content; gap:var(--tl-mgap); animation:tl-scroll var(--ds-speed, 35s) linear infinite; }
.ds-direction-right .tl-track, .tl-marquee--rev .tl-track{ animation-direction:reverse; }
.ds-direction-right .tl-marquee--rev .tl-track{ animation-direction:normal; }
.tl-track .tl-item{ flex:0 0 auto; }
.tl-track .tl-img{ width:calc(var(--ds-logo-h, 44px) * 3 * var(--tl-scale, 1)); }
.ds-pause .tl-marquee:hover .tl-track{ animation-play-state:paused; }
.ds-dividers .tl-track .tl-item + .tl-item::before{ content:""; position:absolute; top:22%; bottom:22%; left:calc(var(--tl-mgap) / -2); width:1px; background:var(--tl-line); }
.tl-marquee + .tl-marquee{ margin-top:var(--ds-gap, clamp(14px, 2vw, 24px)); }
@keyframes tl-scroll{ to{ transform:translateX(calc(-50% - var(--tl-mgap, 0px) / 2)); } }
@media (prefers-reduced-motion:reduce){ .tl-track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; } .tl-track [aria-hidden="true"], .tl-marquee[aria-hidden="true"]{ display:none; } }
/* slider (any style but the scrolling rows; site.js initLogoSliders): pages of logos,
   one effect, arrows at the sides or below, dots. Without JS the pages simply stack. */
.tl-slider{ position:relative; --tl-sspeed:var(--ds-transition, 600ms); outline:none; border-radius:var(--radius-md); }
.tl-slider:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; }
.js .tl-slides{ display:grid; overflow:hidden; perspective:1400px; padding:10px 6px; margin:-10px -6px; }   /* room for hover lifts and shadows */
.js .tl-slide{ grid-area:1 / 1; min-width:0; transition:transform var(--tl-sspeed) cubic-bezier(.22,.8,.3,1), opacity var(--tl-sspeed) ease, visibility 0s; }
.js .tl-slider .tl-slide:not(.is-active){ visibility:hidden; pointer-events:none;
  transition:transform var(--tl-sspeed) cubic-bezier(.22,.8,.3,1), opacity var(--tl-sspeed) ease, visibility 0s linear var(--tl-sspeed); }
.js .tl-slide.is-instant{ transition:none !important; }
.tl-slider img{ -webkit-user-drag:none; user-select:none; }
.tl-spot > .tl-slider{ align-self:center; }
.tl-slide + .tl-slide{ margin-top:var(--tl-gap); }
.js .tl-slide + .tl-slide{ margin-top:0; }
/* where a slide waits before (is-before) and after (is-after) the active one */
.js .ds-effect-slide .tl-slide.is-before{ transform:translateX(-104%); }
.js .ds-effect-slide .tl-slide.is-after{ transform:translateX(104%); }
.js .ds-effect-fade .tl-slide:not(.is-active){ opacity:0; }
.js .ds-effect-zoom .tl-slide:not(.is-active){ opacity:0; transform:scale(.88); }
.js .ds-effect-zoom .tl-slide.is-before{ transform:scale(1.1); }
.js .ds-effect-up .tl-slide.is-after{ opacity:0; transform:translateY(44px); }
.js .ds-effect-up .tl-slide.is-before{ opacity:0; transform:translateY(-44px); }
.js .ds-effect-flip .tl-slide{ backface-visibility:hidden; transform-origin:50% 50%; }
.js .ds-effect-flip .tl-slide.is-after{ opacity:0; transform:rotateY(-80deg); }
.js .ds-effect-flip .tl-slide.is-before{ opacity:0; transform:rotateY(80deg); }
.tl-snav{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:22px; }
.tl-sbtn{ display:grid; place-items:center; width:42px; height:42px; padding:0; border-radius:50%; cursor:pointer; z-index:2;
  border:1px solid var(--tl-line); background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm);
  transition:background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease, transform .2s ease; }
.tl-sbtn svg{ width:16px; height:16px; }
.tl-sbtn:hover:not(:disabled){ background:var(--accent-fill); border-color:var(--accent-fill); color:var(--on-accent); transform:translateY(-1px); }
.tl-sbtn:disabled{ opacity:.35; cursor:default; }
.tl-sbtn:focus-visible, .tl-sdot:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.dark .tl-sbtn{ background:transparent; border-color:var(--line-on-dark); color:var(--on-dark-strong); }
.tl-sdots{ display:flex; align-items:center; gap:8px; }
.tl-sdot{ width:8px; height:8px; padding:0; border:0; border-radius:4px; background:var(--tl-line); cursor:pointer; transition:width .25s ease, background .25s ease; }
.tl-sdot[aria-current="true"]{ width:22px; background:var(--accent); }
.dark .tl-sdot[aria-current="true"]{ background:var(--accent-bright); }
/* arrows at the sides: on the slider's edges, the dots stay below */
.ds-controls-sides .tl-slider:not(.tl-slider--one){ padding-inline:58px; }
.ds-controls-sides .tl-sbtn{ position:absolute; top:calc(50% - 21px); }
.ds-controls-sides.ds-dots .tl-sbtn{ top:calc(50% - 21px - 26px); }
.ds-controls-sides .tl-sbtn--prev{ left:0; }
.ds-controls-sides .tl-sbtn--next{ right:0; }
.ds-controls-sides:not(.ds-dots) .tl-snav{ margin:0; }
.ds-controls-below .tl-sdots{ order:0; }
.ds-controls-below .tl-sbtn--next{ order:1; }
.ds-controls-below .tl-sbtn--prev{ order:-1; }
@media (max-width:600px){
  .ds-controls-sides .tl-slider:not(.tl-slider--one){ padding-inline:44px; }
  .tl-sbtn{ width:36px; height:36px; }
  .ds-controls-sides .tl-sbtn{ top:calc(50% - 18px); }
  .ds-controls-sides.ds-dots .tl-sbtn{ top:calc(50% - 18px - 26px); }
}
@media (prefers-reduced-motion:reduce){ .js .tl-slide{ transition:none !important; } }
/* carousel (site.js: arrows, dots, autoplay) */
.tl-carousel{ position:relative; --tl-per:var(--ds-columns, 6); }
.tl-viewport{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; scroll-behavior:smooth; }
.tl-viewport::-webkit-scrollbar{ display:none; }
.tl-rail{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - (var(--tl-per) - 1) * var(--tl-gap)) / var(--tl-per)); gap:var(--tl-gap); }
.tl-rail .tl-item{ scroll-snap-align:start; }
.tl-arrow{ position:absolute; top:50%; z-index:1; display:grid; place-items:center; width:40px; height:40px; margin-top:-20px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid var(--tl-line); background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); transition:opacity .2s ease; }
.tl-arrow svg{ width:16px; height:16px; }
.tl-arrow--prev{ left:-20px; }
.tl-arrow--next{ right:-20px; }
.tl-arrow:disabled{ opacity:.35; cursor:default; }
.tl-dots{ display:flex; justify-content:center; gap:8px; margin-top:22px; }
.tl-dot{ width:8px; height:8px; padding:0; border:0; border-radius:4px; background:var(--tl-line); cursor:pointer; transition:width .25s ease, background .25s ease; }
.tl-dot[aria-current="true"]{ width:22px; background:var(--accent); }
.dark .tl-dot[aria-current="true"]{ background:var(--accent-bright); }
.ds-style-carousel:not(.ds-arrows) .tl-arrow, .ds-style-carousel:not(.ds-dots) .tl-dots, .tl-dots[hidden], .tl-arrow[hidden]{ display:none; }
@media (max-width:820px){
  .tpl-logos .tl-grid{ grid-template-columns:repeat(min(var(--ds-columns, 6), 3), minmax(0, 1fr)); }
  .ds-style-spotlight .tl-spot .tl-grid{ grid-template-columns:repeat(min(var(--ds-columns, 6), 3), minmax(0, 1fr)); }
  .tl-split, .tl-spot{ grid-template-columns:minmax(0, 1fr); }
  .tl-carousel{ --tl-per:min(var(--ds-columns, 6), 3); }
  .tl-arrow--prev{ left:-8px; }
  .tl-arrow--next{ right:-8px; }
}
@media (max-width:600px){
  .tpl-logos.ds-style-cards .tl-grid{ grid-template-columns:repeat(var(--ds-columns-m, 2), minmax(0, 1fr)); }
  .tpl-logos[style*="--ds-columns-m:"] .tl-grid{ grid-template-columns:repeat(var(--ds-columns-m), minmax(0, 1fr)); }
  .tl-carousel{ --tl-per:var(--ds-columns-m, 2); }
}

/* ---------- FAQ ---------- */
.tq-layout{ display:block; }
.tfaq-list{ display:flex; flex-direction:column; gap:12px; }
.ds-style-accordion .tfaq-list{ max-width:900px; }
.ds-style-accordion.ds-head-center .tfaq-list{ margin-inline:auto; }
.tfaq-item{ border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); }
.tfaq-q{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 24px; cursor:pointer; list-style:none;
  font-family:var(--display); font-weight:600; font-size:clamp(17px, 1.3vw, 19px); line-height:1.35; }
.tfaq-q::-webkit-details-marker{ display:none; }
.tfaq-q:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-md); }
.tfaq-pm{ position:relative; width:14px; height:14px; flex:0 0 auto; }
.tfaq-pm::before, .tfaq-pm::after{ content:""; position:absolute; left:0; right:0; top:6px; height:2px; background:var(--accent); border-radius:1px; transition:transform .25s ease; }
.tfaq-pm::after{ transform:rotate(90deg); }
details[open] .tfaq-pm::after{ transform:rotate(0); }
.tfaq-a{ padding:0 24px 22px; color:var(--muted); line-height:1.65; }
details[open] .tfaq-q{ padding-bottom:12px; }
.ds-style-cards .tfaq-list{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
.ds-style-cards .tfaq-q{ cursor:default; padding-bottom:10px; }
@media (min-width:901px){
  .ds-style-split .tq-layout{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(36px, 6vw, 96px); align-items:start; }
  .ds-style-split .tfaq-intro{ position:sticky; top:calc(var(--nav-h) + 32px); }
}
.dark.tpl-faq .tfaq-item{ background:rgba(255,255,255,.04); border-color:var(--line-on-dark); }
.dark.tpl-faq .tfaq-a{ color:var(--muted-on-dark); }
@media (max-width:700px){ .ds-style-cards .tfaq-list{ grid-template-columns:1fr; } }

/* ---------- timeline ---------- */
.tt-list{ list-style:none; margin:0; padding:0; position:relative; }
.tt-item{ position:relative; }
.tt-year{ display:inline-block; font-family:var(--label); font-size:var(--eyebrow-size); letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; color:var(--accent); font-weight:600; }
.tt-item h3{ margin-top:8px; }
.tt-item p{ margin-top:8px; color:var(--muted); line-height:1.6; max-width:60ch; }
.tt-dot{ position:absolute; width:14px; height:14px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px rgba(var(--accent-rgb), .15); }
/* vertical */
.ds-style-vertical .tt-list::before{ content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:var(--line); }
.ds-style-vertical .tt-item{ padding-left:44px; padding-bottom:clamp(30px, 4vw, 48px); }
.ds-style-vertical .tt-dot{ left:0; top:4px; }
/* alternating */
.ds-style-alternating .tt-list::before{ content:""; position:absolute; left:50%; top:6px; bottom:6px; width:2px; margin-left:-1px; background:var(--line); }
.ds-style-alternating .tt-item{ width:50%; padding:0 48px clamp(30px, 4vw, 48px) 0; text-align:right; }
.ds-style-alternating .tt-item p{ margin-left:auto; }
.ds-style-alternating .tt-item:nth-child(even){ margin-left:50%; padding:0 0 clamp(30px, 4vw, 48px) 48px; text-align:left; }
.ds-style-alternating .tt-item:nth-child(even) p{ margin-left:0; }
.ds-style-alternating .tt-dot{ right:-7px; top:4px; }
.ds-style-alternating .tt-item:nth-child(even) .tt-dot{ right:auto; left:-7px; }
/* horizontal */
.ds-style-horizontal .tt-list{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(200px, 1fr); gap:28px; overflow-x:auto; padding-top:34px; scroll-snap-type:x mandatory; }
.ds-style-horizontal .tt-list::before{ content:""; position:absolute; left:0; right:0; top:40px; height:2px; background:var(--line); }
.ds-style-horizontal .tt-item{ padding-top:30px; scroll-snap-align:start; }
.ds-style-horizontal .tt-dot{ left:0; top:0; }
.ds-compact .tt-item{ padding-bottom:20px !important; }
.ds-compact .tt-item p{ margin-top:4px; }
.dark.tpl-timeline .tt-list::before{ background:var(--line-on-dark); }
@media (max-width:760px){
  .ds-style-alternating .tt-list::before{ left:6px; }
  .ds-style-alternating .tt-item, .ds-style-alternating .tt-item:nth-child(even){ width:auto; margin-left:0; padding:0 0 32px 44px; text-align:left; }
  .ds-style-alternating .tt-item p{ margin-left:0; }
  .ds-style-alternating .tt-dot, .ds-style-alternating .tt-item:nth-child(even) .tt-dot{ left:0; right:auto; }
}

/* ---------- gallery ---------- */
.tg-grid{ display:grid; grid-template-columns:repeat(var(--ds-columns, 3), minmax(0, 1fr)); gap:var(--ds-gap, 14px); }
.tg-item{ margin:0; display:flex; flex-direction:column; gap:10px; }
.tg-img{ width:100%; height:auto; aspect-ratio:4 / 3; border-radius:0; }
.ds-ratio-square .tg-img{ aspect-ratio:1; }
.ds-ratio-portrait .tg-img{ aspect-ratio:3 / 4; }
.ds-ratio-wide .tg-img{ aspect-ratio:16 / 9; }
.ds-rounded .tg-img{ border-radius:var(--radius); }
.tg-item figcaption{ font-size:14px; color:var(--muted); }
.tg-img img{ transition:scale .6s cubic-bezier(.16,.84,.34,1); }
.tg-item:hover .tg-img img{ scale:1.04; }
.ds-style-masonry .tg-grid{ display:block; columns:var(--ds-columns, 3); column-gap:var(--ds-gap, 14px); }
.ds-style-masonry .tg-item{ break-inside:avoid; margin-bottom:var(--ds-gap, 14px); }
.ds-style-masonry .tg-img{ aspect-ratio:auto; }
.ds-style-masonry .tg-img img{ position:static; height:auto; }
.ds-style-masonry .tg-img.ph{ aspect-ratio:4 / 3; }
.ds-style-masonry .tg-item:nth-child(3n+1) .tg-img.ph{ aspect-ratio:3 / 4; }
.ds-style-featured .tg-item:first-child{ grid-column:span 2; grid-row:span 2; }
.ds-style-featured .tg-item:first-child .tg-img{ aspect-ratio:auto; flex:1; min-height:100%; }
.ds-style-strip .tg-grid{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; }
.ds-style-strip .tg-item{ flex:0 0 calc((100% - (var(--ds-columns, 3) - 1) * var(--ds-gap, 14px)) / var(--ds-columns, 3) * .92); scroll-snap-align:start; }
@media (max-width:820px){
  .tg-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ds-style-masonry .tg-grid{ columns:2; }
  .ds-style-strip .tg-item{ flex-basis:72%; }
  .ds-style-featured .tg-item:first-child{ grid-row:auto; }
  .ds-style-featured .tg-item:first-child .tg-img{ aspect-ratio:16 / 9; flex:none; min-height:0; }
}

/* ---------- text block ---------- */
.tx-layout{ display:block; }
.tx-main{ max-width:760px; }
.ds-width-narrow .tx-main{ max-width:620px; }
.ds-width-wide .tx-main{ max-width:1000px; }
.tx-body{ display:flex; flex-direction:column; gap:1.1em; font-size:var(--ds-size, var(--fs-body)); line-height:1.75; color:var(--muted); }
.tx-body p{ margin:0; }
.tx-list{ margin:0; padding-left:1.2em; display:flex; flex-direction:column; gap:.5em; }
.tx-list li::marker{ color:var(--accent); }
.ds-dropcap .tx-body > p:first-child::first-letter{ float:left; font-family:var(--display); font-weight:var(--fw-heading); font-size:3.4em; line-height:.85; margin:.08em .12em 0 0; color:var(--accent); }
.ds-style-centered .tx-main{ margin-inline:auto; text-align:center; }
.ds-style-centered .tx-list{ text-align:left; display:inline-flex; }
.ds-style-centered .tpl-ctas{ justify-content:center; }
.ds-style-columns .tx-main{ max-width:none; }
@media (min-width:821px){ .ds-style-columns .tx-body{ display:block; columns:2; column-gap:clamp(32px, 5vw, 64px); } .ds-style-columns .tx-body p{ margin-bottom:1.1em; break-inside:avoid-column; } }
@media (min-width:901px){
  .ds-style-sidebar .tx-layout{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(260px, 340px); gap:clamp(36px, 6vw, 88px); align-items:start; }
  .ds-style-sidebar .tx-aside{ position:sticky; top:calc(var(--nav-h) + 32px); }
}
.tx-aside{ margin-top:32px; display:flex; flex-direction:column; gap:14px; padding:clamp(24px, 2.6vw, 34px); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); }
.tx-aside p{ color:var(--muted); line-height:1.6; }
.tx-aside .btn{ align-self:flex-start; }
.dark.tpl-text .tx-body, .dark.tpl-text .tx-aside p{ color:var(--muted-on-dark); }
.dark.tpl-text .tx-aside{ background:rgba(255,255,255,.04); border-color:var(--line-on-dark); }

/* ---------- split media: animated styles (entrances: the global motion system) ---------- */
@media (min-width:881px){
  .sm.ds-style-curtain .grid, .sm.ds-style-showcase .grid{ grid-template-columns:var(--ds-image-width, 50%) 1fr; }
  .sm.sm--media-right.ds-style-curtain .grid, .sm.sm--media-right.ds-style-showcase .grid{ grid-template-columns:1fr var(--ds-image-width, 50%); }
}
/* parallax: a full-bleed image band that moves slower than the page (site.js),
   the copy on a card rising over its lower edge */
.sm.ds-style-parallax{ padding-top:0; }
.sm-parallax{ position:relative; height:clamp(340px, 64vh, 660px); overflow:hidden; }
.sm-par{ position:absolute; left:0; right:0; top:-20%; bottom:-20%; will-change:transform; }
.sm-par .media{ position:absolute; inset:0; width:100%; height:100%; border-radius:0; }
.sm-parallax::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(var(--scrim-rgb), 0) 55%, rgba(var(--scrim-rgb), calc(var(--ds-overlay, .55) * .7)) 100%); }
.sm.ds-style-parallax .grid{ position:relative; z-index:2; grid-template-columns:minmax(0, 700px); justify-content:end; margin-top:clamp(-170px, -12vw, -90px); }
.sm.sm--media-right.ds-style-parallax .grid{ justify-content:start; }
.sm.ds-style-parallax .sm-copy{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(28px, 3.6vw, 56px); box-shadow:var(--shadow-lg); }
.dark.sm.ds-style-parallax .sm-copy{ background:var(--panel); border-color:var(--line-on-dark); }
/* showcase: a slowly zooming picture that tilts toward the pointer (site.js),
   a turning accent ring behind it */
.sm.ds-style-showcase .sm-media{ position:relative; perspective:1100px; }
.sm.ds-style-showcase .sm-media .media{ position:relative; z-index:1; box-shadow:var(--shadow-lg);
  transform:rotateY(calc(var(--tx, 0) * 9deg)) rotateX(calc(var(--ty, 0) * -9deg)); transition:transform .3s ease-out; }
.sm.ds-style-showcase .sm-media .media img{ animation:sm-kenburns 18s ease-in-out infinite alternate; }
.sm.ds-style-showcase .sm-media::after{ content:""; position:absolute; z-index:0; width:48%; aspect-ratio:1; right:-10%; top:-14%; pointer-events:none;
  border:2px dashed var(--accent-line); border-radius:50%; animation:sm-spin 46s linear infinite; }
.sm.sm--media-right.ds-style-showcase .sm-media::after{ right:auto; left:-10%; }
.sm.ds-style-showcase .stat{ transition:transform .3s ease; }
.sm.ds-style-showcase .stat:hover{ transform:translateY(-4px); }
@keyframes sm-kenburns{ from{ scale:1.02; translate:0 0; } to{ scale:1.14; translate:-2% -1.5%; } }
@keyframes sm-spin{ to{ transform:rotate(360deg); } }
@media (max-width:880px){
  .sm.ds-style-parallax .grid{ margin-top:-56px; justify-content:stretch; }
  .sm.ds-style-parallax .sm-copy{ margin-inline:0; }
  .sm.ds-style-showcase .sm-media::after{ width:38%; right:-4%; top:-8%; }
}
@media (prefers-reduced-motion:reduce){
  .sm.ds-style-showcase .sm-media .media img, .sm.ds-style-showcase .sm-media::after{ animation:none; }
  .sm.ds-style-showcase .sm-media .media{ transform:none; }
  .sm-par{ translate:none !important; }
}

/* ---------- section template: Title (title_band, 10 styles) ---------- */
.tpl-title .tt-h{ margin:0; font-size:min(var(--ds-size, clamp(34px, 4.8vw, 66px)), 12vw); line-height:1.05; letter-spacing:-.025em; max-width:22ch; }
.tpl-title .tt-eyebrow{ margin-bottom:18px; }
.tpl-title .tt-sub{ margin-top:20px; max-width:60ch; font-size:var(--fs-lead); line-height:1.55; color:var(--muted); }
.dark.tpl-title .tt-sub{ color:var(--muted-on-dark); }
.tpl-title.ds-spacing-compact{ padding-block:clamp(28px, 4vw, 52px); }
.tpl-title.ds-spacing-large{ padding-block:clamp(96px, 12vw, 190px); }
/* alignment (classic, underline, outline, numbered, gradient) */
.tpl-title.ds-align-center .tt-inner{ text-align:center; justify-content:center; }
.tpl-title.ds-align-center .tt-h, .tpl-title.ds-align-center .tt-sub{ margin-inline:auto; }
.tpl-title.ds-align-center .tt-eyebrow{ justify-content:center; }
.tpl-title.ds-align-right .tt-inner{ text-align:right; justify-content:flex-end; }
.tpl-title.ds-align-right .tt-h, .tpl-title.ds-align-right .tt-sub{ margin-left:auto; }
.tpl-title.ds-align-right .tt-eyebrow{ justify-content:flex-end; }
/* 2 · centered: centred, short accent rule */
.tpl-title.ds-style-centered .tt-inner{ text-align:center; }
.tpl-title.ds-style-centered .tt-h, .tpl-title.ds-style-centered .tt-sub{ margin-inline:auto; }
.tpl-title.ds-style-centered .tt-eyebrow{ justify-content:center; }
.tpl-title.ds-style-centered .tt-h::after{ content:""; display:block; width:64px; height:3px; margin:24px auto 0; border-radius:2px; background:var(--accent); }
/* 3 · underlined: a thick accent bar */
.tpl-title.ds-style-underline .tt-h::after{ content:""; display:block; width:clamp(64px, 9vw, 128px); height:6px; margin-top:22px; border-radius:3px; background:var(--accent); }
.tpl-title.ds-style-underline.ds-align-center .tt-h::after{ margin-inline:auto; }
.tpl-title.ds-style-underline.ds-align-right .tt-h::after{ margin-left:auto; }
/* 4 · outline letters: hollow, accent words filled */
/* outline letters: background-coloured letters ringed by hairline shadows. (A text
   stroke would also draw the variable font's overlapping inner contours.) */
.tpl-title{ --tt-fill:var(--section-bg, var(--bg)); --tt-ol:var(--ink); }
.dark.tpl-title{ --tt-fill:var(--section-bg, var(--panel)); --tt-ol:var(--on-dark-strong); }
.tpl-title.ds-style-outline .tt-h, .tt-num, .tpl-title.ds-style-marquee .tt-copy--o{ color:var(--tt-fill);
  text-shadow:-1.5px 0 0 var(--tt-ol), 1.5px 0 0 var(--tt-ol), 0 -1.5px 0 var(--tt-ol), 0 1.5px 0 var(--tt-ol),
    -1.06px -1.06px 0 var(--tt-ol), 1.06px -1.06px 0 var(--tt-ol), -1.06px 1.06px 0 var(--tt-ol), 1.06px 1.06px 0 var(--tt-ol); }
.tpl-title.ds-style-outline .tt-h{ font-size:min(var(--ds-size, clamp(46px, 8.4vw, 128px)), 15vw); line-height:.98; max-width:none; }
.tpl-title.ds-style-outline .tt-h .accent{ color:var(--accent); text-shadow:none; }
/* 5 · split: eyebrow + subtitle left, title right, a hairline above */
.tpl-title.ds-style-split .tt-text{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2.2fr); column-gap:clamp(28px, 5vw, 80px);
  grid-template-areas:"eb h" "sub h"; align-items:start; border-top:1px solid var(--line); padding-top:clamp(24px, 3vw, 36px); }
.tpl-title.ds-style-split .tt-eyebrow{ grid-area:eb; }
.tpl-title.ds-style-split .tt-h{ grid-area:h; max-width:none; }
.tpl-title.ds-style-split .tt-sub{ grid-area:sub; margin-top:0; font-size:16px; }
.dark.tpl-title.ds-style-split .tt-text{ border-top-color:var(--line-on-dark); }
/* 6 · numbered: a big outlined number beside the title */
.tpl-title.ds-style-numbered .tt-inner{ display:flex; align-items:flex-start; gap:clamp(18px, 3vw, 44px); }
.tpl-title.ds-style-numbered.ds-align-center .tt-inner{ flex-direction:column; align-items:center; }
.tpl-title.ds-style-numbered.ds-align-right .tt-inner{ flex-direction:row-reverse; }
.tt-num{ --tt-ol:var(--accent); flex:0 0 auto; font-family:var(--display); font-weight:800; font-size:clamp(64px, 9vw, 140px); line-height:.86; letter-spacing:-.02em; }
/* 7 · between lines */
.tpl-title.ds-style-lines .tt-inner{ text-align:center; }
.tpl-title.ds-style-lines .tt-eyebrow{ justify-content:center; }
.tpl-title.ds-style-lines .tt-h{ display:flex; align-items:center; gap:clamp(16px, 3vw, 40px); max-width:none; }
.tpl-title.ds-style-lines .tt-h::before, .tpl-title.ds-style-lines .tt-h::after{ content:""; flex:1 1 40px; min-width:24px; height:2px; border-radius:1px; background:var(--accent-line); }
.tpl-title.ds-style-lines .tt-h__t{ flex:0 1 auto; max-width:22ch; }
.tpl-title.ds-style-lines .tt-sub{ margin-inline:auto; }
.dark.tpl-title.ds-style-lines .tt-h::before, .dark.tpl-title.ds-style-lines .tt-h::after{ background:var(--line-on-dark-2); }
/* 8 · gradient lettering */
.tpl-title.ds-style-gradient .tt-h{ font-size:min(var(--ds-size, clamp(42px, 6.6vw, 100px)), 13vw); max-width:18ch; }
.tpl-title.ds-style-gradient .tt-h__t{ background:linear-gradient(100deg, var(--accent) 0%, var(--accent-bright) 35%, var(--ink) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.tpl-title.ds-style-gradient .tt-h .accent{ color:inherit; }
.dark.tpl-title.ds-style-gradient .tt-h__t{ background-image:linear-gradient(100deg, var(--accent-bright) 0%, var(--on-dark-strong) 100%); }
/* 9 · banner: a dark band with a soft glow, centred */
.tpl-title.ds-style-banner{ background:radial-gradient(70% 120% at 50% 0%, rgba(var(--accent-rgb), .22) 0%, rgba(var(--accent-rgb), 0) 60%), var(--panel); }
.tpl-title.ds-style-banner .tt-inner{ text-align:center; }
.tpl-title.ds-style-banner .tt-h, .tpl-title.ds-style-banner .tt-sub{ margin-inline:auto; }
.tpl-title.ds-style-banner .tt-h{ color:var(--on-dark-strong); }
.tpl-title.ds-style-banner .tt-h .accent{ color:var(--accent-bright); }
.tpl-title.ds-style-banner .tt-eyebrow{ justify-content:center; color:var(--accent-bright); }
/* 10 · scrolling (animated): an endless giant title */
.tpl-title.ds-style-marquee{ overflow:hidden; }
.tpl-title.ds-style-marquee .tt-eyebrow{ margin-bottom:clamp(14px, 2vw, 24px); }
.tt-marquee{ overflow:hidden; }
.tt-track{ display:flex; align-items:center; gap:clamp(20px, 3vw, 44px); width:max-content; animation:tt-scroll var(--ds-speed, 30s) linear infinite; }
.tt-marquee:hover .tt-track{ animation-play-state:paused; }
.tpl-title.ds-style-marquee .tt-h{ flex:0 0 auto; max-width:none; white-space:nowrap; font-size:min(var(--ds-size, clamp(56px, 9.5vw, 150px)), 18vw); line-height:1.1; }
.tpl-title.ds-style-marquee .tt-copy--o .accent{ color:var(--tt-fill); --tt-ol:var(--accent); text-shadow:-1.5px 0 0 var(--tt-ol), 1.5px 0 0 var(--tt-ol), 0 -1.5px 0 var(--tt-ol), 0 1.5px 0 var(--tt-ol),
    -1.06px -1.06px 0 var(--tt-ol), 1.06px -1.06px 0 var(--tt-ol), -1.06px 1.06px 0 var(--tt-ol), 1.06px 1.06px 0 var(--tt-ol); }
.tpl-title.ds-style-marquee .tt-copy--o[data-tx]{ color:var(--tt-fill) !important; }   /* a text-window colour keeps the outline copies outlined */
.tt-sep{ flex:0 0 auto; font-size:clamp(24px, 3vw, 44px); color:var(--accent); }
.tpl-title.ds-style-marquee .tt-sub{ margin-top:clamp(14px, 2vw, 24px); }
@keyframes tt-scroll{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){
  .tt-track{ animation:none; }
  .tt-track .tt-copy, .tt-track .tt-sep{ display:none; }
  .tt-marquee{ padding-inline:var(--pad-x); }
  .tpl-title.ds-style-marquee .tt-h{ white-space:normal; }
}
@media (max-width:720px){
  .tpl-title.ds-style-split .tt-text{ grid-template-columns:1fr; grid-template-areas:"eb" "h" "sub"; }
  .tpl-title.ds-style-split .tt-sub{ margin-top:16px; }
  .tpl-title.ds-style-numbered .tt-inner{ flex-direction:column; gap:14px; }
}

/* ---------- Quality & Authenticity (quality_authenticity) ----------
   Theme tokens unless the admin picks a colour. Scheme: light = page
   background, sand = the "alt" scheme (bg-alt + its accent), dark = the
   "dark" scheme (an image is always dark). --qa-* hold the scheme's colours;
   each element reads var(--ds-<option>, var(--qa-<role>)), so a Section
   style colour wins and an empty one falls back to the theme. */
.qa{ position:relative; overflow:hidden; isolation:isolate;
  --qa-line:var(--line); --qa-ink:var(--ink); --qa-strong:var(--ink); --qa-text:var(--section-text, var(--muted)); --qa-acc:var(--accent); --qa-soft:var(--surface);
  --qa-l:var(--ds-line-color, var(--qa-line)); --qa-a:var(--ds-accent-color, var(--qa-acc)); --qa-r:var(--ds-radius, var(--radius-md)); }
.qa.dark{ --qa-line:var(--line-on-dark); --qa-ink:var(--on-dark-strong); --qa-strong:var(--text-on-dark); --qa-text:var(--section-text, var(--muted-on-dark)); --qa-acc:var(--accent-bright); --qa-soft:transparent;
  --qa-l:var(--ds-line-color, var(--qa-line)); --qa-a:var(--ds-accent-color, var(--qa-acc)); }
@supports (color:color-mix(in srgb, red 50%, transparent)){
  .qa{ --qa-line:color-mix(in srgb, var(--ink) 16%, transparent); --qa-soft:color-mix(in srgb, var(--accent) 7%, transparent); }
  .qa.dark{ --qa-line:color-mix(in srgb, var(--on-dark-strong) 20%, transparent); --qa-soft:color-mix(in srgb, var(--on-dark-strong) 6%, transparent); }
}
/* background: custom colour / gradient (Content tab → Background), image + overlay */
.qa[style*="--qa-bg1:"]{ background-color:var(--qa-bg1); }
.qa[style*="--qa-bg2:"]{ background-image:linear-gradient(var(--qa-bg-angle, 180deg), var(--qa-bg1, transparent), var(--qa-bg2)); }
.qa[style*="--qa-grad:"]{ background-image:var(--qa-grad); }
/* with Style-tab layers too (overlay, image, section gradient): those on top, this background under them */
[data-sec-bg][data-sec-bg][data-sec-bg].qa[style*="--qa-bg2:"]{ background-image:var(--sec-bg-layers), linear-gradient(var(--qa-bg-angle, 180deg), var(--qa-bg1, transparent), var(--qa-bg2)); }
[data-sec-bg][data-sec-bg][data-sec-bg].qa[style*="--qa-grad:"]{ background-image:var(--sec-bg-layers), var(--qa-grad); }
.qa-bg{ position:absolute; inset:0; z-index:-2; }
.qa-bg .media{ position:absolute; inset:0; width:100%; height:100%; border-radius:0; }
.qa-bg--top img{ object-position:center top; }
.qa-bg--bottom img{ object-position:center bottom; }
.qa-bg--fixed{ clip-path:inset(0); }
.qa-bg--fixed .media{ position:fixed; height:100vh; }
.qa-bg::after{ content:""; position:absolute; inset:0; background:rgba(var(--scrim-rgb), var(--qa-overlay, .6)); }
/* the brand mark as a watermark: size, opacity and corner are settings */
.qa-mark{ position:absolute; z-index:-1; top:clamp(28px, 4vw, 64px); right:clamp(12px, 4vw, 72px); width:var(--qa-mark-w, clamp(180px, 24vw, 340px)); height:auto; opacity:var(--qa-mark-op, .07); pointer-events:none; }
.dark .qa-mark{ opacity:var(--qa-mark-op, .09); }
.qa-mark--top-left{ right:auto; left:clamp(12px, 4vw, 72px); }
.qa-mark--bottom-right{ top:auto; bottom:clamp(28px, 4vw, 64px); }
.qa-mark--bottom-left{ top:auto; bottom:clamp(28px, 4vw, 64px); right:auto; left:clamp(12px, 4vw, 72px); }
.qa-mark--center{ top:50%; right:auto; left:50%; transform:translate(-50%, -50%); }
/* kicker, heading column, body column */
.qa-kicker{ margin-bottom:clamp(26px, 3.2vw, 44px); color:var(--ds-kicker-color, var(--accent)); }
.qa.dark .qa-kicker{ color:var(--ds-kicker-color, var(--accent-bright)); }
.qa-grid{ display:grid; grid-template-columns:minmax(0, var(--ds-split, 1.05fr)) minmax(0, 1fr); gap:var(--ds-gap, clamp(40px, 7vw, 112px)); align-items:start; }
.qa.ds-valign-center .qa-grid{ align-items:center; }
.qa-h{ margin:0; font-size:clamp(34px, 4.4vw, 60px); font-weight:var(--ds-heading-weight, var(--fw-heading)); line-height:1.06; letter-spacing:-.025em; max-width:16ch; color:var(--ds-heading-color, var(--qa-ink)); }
.qa[style*="--ds-heading-size:"] .qa-h{ font-size:clamp(min(28px, var(--ds-heading-size)), 9vw, var(--ds-heading-size)); }
.qa-h .accent{ color:var(--qa-a); }
.qa.ds-font-body .qa-h{ font-family:var(--body); letter-spacing:-.015em; }
.qa.ds-font-serif .qa-h{ font-family:Georgia, "Times New Roman", serif; letter-spacing:-.01em; }
.qa-bar{ display:block; width:var(--ds-bar-width, 54px); max-width:100%; height:3px; margin:30px 0 18px; border-radius:2px; background:var(--qa-a); }
.qa:not(.ds-bar) .qa-tagline{ margin-top:24px; }
.qa-tagline{ margin:0; font-family:var(--label); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ds-text-color, var(--qa-text)); }
.qa-body{ max-width:var(--ds-body-width, 560px); }
.qa-body > p{ margin:0; color:var(--ds-text-color, var(--qa-text)); font-size:var(--ds-body-size, var(--body-size, 17px)); line-height:1.7; }
.qa-body > p + p{ margin-top:1.05em; }
.qa-body strong{ color:var(--ds-bold-color, var(--qa-strong)); font-weight:600; }
/* pull quote: line + dot (default), side bar, box, plain */
.qa-quote{ display:flex; gap:14px; margin:34px 0 0; padding-top:26px; border-top:1px solid var(--qa-l); }
.qa-quote::before{ content:""; flex:0 0 auto; width:8px; height:8px; margin-top:.62em; border-radius:50%; background:var(--qa-a); }
.qa-quote p{ margin:0; font-family:var(--display); font-weight:500; font-size:var(--ds-quote-size, clamp(19px, 1.6vw, 22px)); line-height:1.42; color:var(--ds-quote-color, var(--qa-strong)); letter-spacing:-.01em; }
.qa.ds-quote-bar .qa-quote{ border-top:0; padding:4px 0 4px 22px; border-left:3px solid var(--qa-a); }
.qa.ds-quote-box .qa-quote{ border:1px solid var(--qa-l); border-radius:var(--qa-r); background:var(--ds-chain-bg, var(--qa-soft)); padding:22px 24px; }
.qa.ds-quote-plain .qa-quote{ border-top:0; padding-top:0; }
.qa.ds-quote-bar .qa-quote::before, .qa.ds-quote-plain .qa-quote::before{ display:none; }
/* layouts: Profile slide (default), Reversed, Centered, Heading panel, Stacked */
.qa.ds-style-reversed .qa-grid{ grid-template-columns:minmax(0, 1fr) minmax(0, var(--ds-split, 1.05fr)); }
.qa.ds-style-reversed .qa-lead{ order:2; }
.qa.ds-style-centered .qa-kicker{ display:flex; justify-content:center; }
.qa.ds-style-centered .qa-grid{ grid-template-columns:minmax(0, 1fr); justify-items:center; text-align:center; gap:clamp(26px, 3.4vw, 44px); }
.qa.ds-style-centered .qa-h{ max-width:22ch; margin-inline:auto; }
.qa.ds-style-centered .qa-bar, .qa.ds-style-centered .qa-body{ margin-inline:auto; }
.qa.ds-style-centered .qa-quote{ justify-content:center; }
.qa.ds-style-centered .qa-steps-title{ text-align:center; }
.qa.ds-style-panel .qa-lead{ align-self:stretch; padding:clamp(28px, 3.6vw, 52px); border-radius:var(--qa-r); background:var(--ds-panel-bg, var(--panel));
  --qa-ink:var(--on-dark-strong); --qa-text:var(--muted-on-dark); --qa-a:var(--ds-accent-color, var(--accent-bright)); }
.qa.dark.ds-style-panel .qa-lead{ background:var(--ds-panel-bg, var(--qa-soft)); border:1px solid var(--qa-l); }
.qa.ds-style-stacked .qa-grid{ grid-template-columns:minmax(0, 1fr); gap:clamp(26px, 3.4vw, 44px); }
.qa.ds-style-stacked .qa-h{ max-width:24ch; }
.qa.ds-style-stacked .qa-body{ max-width:var(--ds-body-width, none); display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:clamp(28px, 4vw, 64px); align-items:start; }
.qa.ds-style-stacked .qa-body > p + p{ margin-top:0; }
.qa.ds-style-stacked .qa-quote{ grid-column:1 / -1; }
/* the chain of steps: Joined boxes (default), Cards, Timeline, Arrows, Big numbers */
.qa-steps-title{ margin:clamp(56px, 7vw, 96px) 0 0; font-family:var(--label); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ds-text-color, var(--qa-text)); }
.qa-chain{ list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(var(--qa-n, 5), minmax(0, 1fr)); }
.qa-step{ position:relative; display:flex; flex-direction:column; gap:8px; padding:clamp(20px, 2vw, 26px) clamp(18px, 1.8vw, 24px) clamp(22px, 2.2vw, 28px); }
.qa-num{ font-family:var(--label); font-size:12.5px; letter-spacing:.12em; color:var(--ds-number-color, var(--qa-a)); }
.qa-label{ font-family:var(--display); font-weight:700; font-size:var(--ds-label-size, clamp(17px, 1.35vw, 19px)); line-height:1.2; color:var(--ds-label-color, var(--qa-a)); }
.qa-sub{ font-size:14.5px; line-height:1.45; color:var(--ds-sub-color, var(--qa-text)); }
.qa.ds-chain-boxed .qa-chain{ border:1px solid var(--qa-l); border-radius:var(--qa-r); background:var(--ds-chain-bg, transparent); }
.qa.ds-chain-boxed .qa-step + .qa-step{ border-left:1px solid var(--qa-l); }
.qa.ds-chain-cards .qa-chain{ gap:clamp(10px, 1.2vw, 16px); }
.qa.ds-chain-cards .qa-step{ border:1px solid var(--qa-l); border-top:3px solid var(--qa-a); border-radius:var(--qa-r); background:var(--ds-chain-bg, var(--qa-soft)); }
.qa.ds-chain-timeline .qa-step{ padding:0 clamp(10px, 1.4vw, 20px) 0 0; gap:10px; }
.qa.ds-chain-timeline .qa-num{ display:grid; place-items:center; width:46px; height:46px; margin-bottom:6px; border-radius:50%; letter-spacing:.06em;
  border:1.5px solid var(--ds-number-color, var(--qa-a)); background:var(--ds-chain-bg, transparent); }
.qa.ds-chain-timeline .qa-step:not(:last-child)::after{ content:""; position:absolute; top:23px; left:58px; right:12px; height:1px; background:var(--qa-l); }
.qa.ds-chain-arrows .qa-chain{ gap:30px; }
.qa.ds-chain-arrows .qa-step{ border-radius:var(--qa-r); background:var(--ds-chain-bg, var(--qa-soft)); border:1px solid var(--qa-l); }
.qa.ds-chain-arrows .qa-step:not(:last-child)::after{ content:""; position:absolute; top:50%; right:-21px; width:10px; height:10px; margin-top:-5px;
  border-top:2px solid var(--qa-a); border-right:2px solid var(--qa-a); transform:rotate(45deg); }
.qa.ds-chain-minimal .qa-chain{ gap:clamp(18px, 2.4vw, 36px); }
.qa.ds-chain-minimal .qa-step{ padding:18px 0 0; border-top:2px solid var(--qa-a); background:var(--ds-chain-bg, transparent); }
.qa.ds-chain-minimal .qa-num{ font-family:var(--display); font-weight:800; font-size:clamp(34px, 3.4vw, 48px); line-height:1; letter-spacing:-.02em;
  color:var(--ds-number-color, var(--qa-a)); }
@media (max-width:940px){
  .qa.ds .qa-grid{ grid-template-columns:minmax(0, 1fr); gap:clamp(28px, 5vw, 44px); }
  .qa.ds-style-reversed .qa-lead{ order:0; }
  .qa.ds-style-stacked .qa-body{ grid-template-columns:minmax(0, 1fr); }
  .qa.ds-style-stacked .qa-body > p + p{ margin-top:1.05em; }
  .qa-chain{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .qa.ds-chain-boxed .qa-step + .qa-step{ border-left:0; }
  .qa.ds-chain-boxed .qa-step:nth-child(even){ border-left:1px solid var(--qa-l); }
  .qa.ds-chain-boxed .qa-step:nth-child(n+3){ border-top:1px solid var(--qa-l); }
  .qa.ds-chain-timeline .qa-chain, .qa.ds-chain-minimal .qa-chain{ row-gap:28px; }
  .qa.ds-chain-arrows .qa-chain{ row-gap:16px; }
  .qa.ds-chain-timeline .qa-step:nth-child(even)::after, .qa.ds-chain-arrows .qa-step:nth-child(even)::after{ display:none; }
}
@media (max-width:600px){
  .qa-chain{ grid-template-columns:minmax(0, 1fr); }
  .qa.ds-chain-boxed .qa-step:nth-child(even){ border-left:0; }
  .qa.ds-chain-boxed .qa-step + .qa-step{ border-top:1px solid var(--qa-l); }
  .qa.ds-chain-timeline .qa-step{ display:grid; grid-template-columns:46px minmax(0, 1fr); column-gap:16px; row-gap:4px; padding:0; }
  .qa.ds-chain-timeline .qa-num{ grid-row:span 2; margin:0; }
  .qa.ds-chain-timeline .qa-step:not(:last-child)::after, .qa.ds-chain-timeline .qa-step:nth-child(even):not(:last-child)::after{ display:block; top:52px; bottom:-24px; left:23px; right:auto; width:1px; height:auto; }
  .qa.ds-chain-arrows .qa-step:not(:last-child)::after, .qa.ds-chain-arrows .qa-step:nth-child(even):not(:last-child)::after{ display:block; top:auto; bottom:-14px; right:auto; left:50%; margin:0 0 0 -5px; transform:rotate(135deg); }
  .qa-mark{ width:min(var(--qa-mark-w, 160px), 60vw); }
}

/* ============================================================
   Contact page (phase 18): contact channels (5 designs) · location (4 designs) ·
   enquiry form designs (6) + audience routing. Structure only: colours, fonts,
   radii and shadows are theme tokens. Copy buttons + audience choice: site.js.
   ============================================================ */
.cc-warn{ max-width:var(--maxw); margin:0 auto 14px; padding:10px 14px; border:1px dashed var(--accent); border-radius:var(--radius); background:var(--bg-alt); color:var(--ink); font-size:14px; }
.cc-head .cc-h, .loc-h{ max-width:18ch; }
.cc-intro{ margin-top:14px; max-width:48ch; }

/* ---- one channel ---- */
.cc-it{ position:relative; display:flex; align-items:center; gap:12px; }
.cc-link{ flex:1; min-width:0; display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:12px 18px; padding:20px 0; color:inherit; }
.cc-ico{ width:44px; height:44px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; background:rgba(var(--accent-rgb),.12); color:var(--accent); }
.cc-ico svg{ width:20px; height:20px; }
.cc-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.cc-label{ font-family:var(--label); font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.cc-value{ font-family:var(--display); font-weight:var(--fw-heading); font-size:clamp(19px,1.7vw,24px); line-height:1.25; letter-spacing:-.01em; color:var(--ink);
  overflow-wrap:anywhere; transition:color .25s ease; }
.cc-note{ font-size:14.5px; line-height:1.5; color:var(--muted); }
.cc-go{ display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:600; color:var(--accent); white-space:nowrap; }
.cc-go .arw{ display:inline-block; transition:transform .3s cubic-bezier(.23,1,.32,1); }
a.cc-link:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:var(--radius-sm); }
@media (hover:hover){
  a.cc-link:hover .cc-go .arw{ transform:translateX(4px); }
  a.cc-link[target="_blank"]:hover .cc-go .arw{ transform:translate(2px,-2px); }
}
.cc-copy{ position:relative; flex:0 0 auto; width:40px; height:40px; display:grid; place-items:center; padding:0; border:var(--border-w) solid var(--line); border-radius:50%;
  background:transparent; color:var(--muted); cursor:pointer; transition:color .2s ease, border-color .2s ease, transform .16s cubic-bezier(.23,1,.32,1); }
.cc-copy:hover{ color:var(--ink); border-color:var(--ink); }
.cc-copy:active{ transform:scale(.94); }
.cc-copy:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.cc-copy__ok{ position:absolute; bottom:calc(100% + 8px); left:50%; padding:4px 8px; border-radius:6px; background:var(--ink); color:var(--bg); font-size:12px; font-weight:600;
  white-space:nowrap; pointer-events:none; opacity:0; transform:translate(-50%, 4px); transition:opacity .18s ease, transform .18s cubic-bezier(.23,1,.32,1); }
.cc-copy.is-copied{ color:var(--accent); border-color:var(--accent); }
.cc-copy.is-copied .cc-copy__ok{ opacity:1; transform:translate(-50%, 0); }
.dark .cc-value{ color:var(--text-on-dark); }
.dark .cc-label, .dark .cc-note{ color:var(--muted-on-dark); }
.dark .cc-ico{ background:rgba(var(--accent-bright-rgb),.14); color:var(--accent-bright); }
.dark .cc-go{ color:var(--accent-bright); }
.dark .cc-copy{ border-color:var(--line-on-dark); color:var(--muted-on-dark); }
.dark .cc-copy:hover{ border-color:var(--text-on-dark); color:var(--text-on-dark); }
.dark .cc-copy__ok{ background:var(--text-on-dark); color:var(--panel); }

/* A · split list: heading left (sticky), channels right */
.cc-split{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(32px,6vw,96px); align-items:start; }
.cc-split__head{ position:sticky; top:calc(var(--nav-h) + 32px); }
.cc-list, .cc-rows{ list-style:none; margin:0; padding:0; border-top:var(--border-w) solid var(--line); }
.cc-list .cc-it, .cc-rows .cc-it{ border-bottom:var(--border-w) solid var(--line); }
.dark .cc-list, .dark .cc-rows, .dark .cc-list .cc-it, .dark .cc-rows .cc-it{ border-color:var(--line-on-dark); }
@media (hover:hover){ .cc-list a.cc-link:hover .cc-value, .cc-rows a.cc-link:hover .cc-value{ color:var(--accent); } .dark .cc-list a.cc-link:hover .cc-value, .dark .cc-rows a.cc-link:hover .cc-value{ color:var(--accent-bright); } }

/* B · directory rows: label column, large value, action */
.cc-rows{ margin-top:clamp(28px,4vw,48px); }
.cc-rows .cc-link{ grid-template-columns:minmax(0,1fr) auto; padding:clamp(22px,2.6vw,32px) 0; }
.cc-rows .cc-ico{ display:none; }
.cc-rows .cc-body{ display:grid; grid-template-columns:minmax(110px,.3fr) minmax(0,1fr); column-gap:clamp(16px,3vw,48px); row-gap:4px; align-items:baseline; }
.cc-rows .cc-label{ grid-row:span 2; }
.cc-rows .cc-value{ grid-column:2; font-size:clamp(22px,2.6vw,38px); line-height:1.15; letter-spacing:-.02em; }
.cc-rows .cc-note{ grid-column:2; }
@media (max-width:640px){ .cc-rows .cc-body{ grid-template-columns:minmax(0,1fr); } .cc-rows .cc-label{ grid-row:auto; } .cc-rows .cc-value, .cc-rows .cc-note{ grid-column:1; } }

/* C · tiles (the first one highlighted) */
.cc-tiles{ list-style:none; margin:clamp(28px,4vw,48px) 0 0; padding:0; display:grid; grid-template-columns:repeat(var(--cc-cols,3), minmax(0,1fr)); gap:clamp(12px,1.4vw,18px); }
.cc-tiles--1{ --cc-cols:1; } .cc-tiles--2{ --cc-cols:2; } .cc-tiles--3{ --cc-cols:3; } .cc-tiles--4{ --cc-cols:4; }
.cc-tiles .cc-it{ align-items:stretch; }
.cc-tiles .cc-link{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; min-height:230px; padding:clamp(22px,2.2vw,30px); border-radius:var(--radius-lg);
  background:var(--surface); box-shadow:0 0 0 var(--border-w) var(--line); transition:transform .35s cubic-bezier(.23,1,.32,1), box-shadow .35s ease; }
.cc-tiles .cc-body{ flex:1; }
.cc-tiles .cc-go{ margin-top:auto; }
.cc-tiles .cc-copy{ position:absolute; top:clamp(18px,1.8vw,24px); right:clamp(18px,1.8vw,24px); }
@media (hover:hover){ .cc-tiles a.cc-link:hover{ transform:translateY(-4px); box-shadow:0 0 0 var(--border-w) var(--accent), var(--shadow-md); } }
.cc-tiles .is-hl .cc-link{ background:var(--panel); box-shadow:none; }
.cc-tiles .is-hl.is-span{ grid-column:span 2; }
@media (max-width:940px){ .cc-tiles .is-hl.is-span{ grid-column:auto; } }
.cc-tiles .is-hl .cc-value{ color:var(--text-on-dark); }
.cc-tiles .is-hl .cc-label, .cc-tiles .is-hl .cc-note{ color:var(--muted-on-dark); }
.cc-tiles .is-hl .cc-ico{ background:rgba(var(--accent-bright-rgb),.16); color:var(--accent-bright); }
.cc-tiles .is-hl .cc-go{ color:var(--accent-bright); }
.cc-tiles .is-hl .cc-copy{ border-color:var(--line-on-dark); color:var(--muted-on-dark); }
.cc-tiles .is-hl .cc-copy:hover{ border-color:var(--text-on-dark); color:var(--text-on-dark); }
.dark .cc-tiles .cc-link{ background:rgba(255,255,255,.04); box-shadow:0 0 0 1px var(--line-on-dark); }
.dark .cc-tiles .is-hl .cc-link{ background:var(--accent-fill); }
.dark .cc-tiles .is-hl .cc-value, .dark .cc-tiles .is-hl .cc-go, .dark .cc-tiles .is-hl .cc-ico{ color:var(--on-accent); }
.dark .cc-tiles .is-hl .cc-label, .dark .cc-tiles .is-hl .cc-note{ color:var(--on-accent); opacity:.8; }
@media (max-width:940px){ .cc-tiles--3, .cc-tiles--4{ --cc-cols:2; } }
@media (max-width:560px){ .cc-tiles{ --cc-cols:1 !important; } .cc-tiles .cc-link{ min-height:0; } }

/* D · compact band (dark): channels in one line */
.cc--band{ padding-block:clamp(36px,4.5vw,56px); }
.cc-band{ display:flex; align-items:center; gap:clamp(24px,4vw,64px); flex-wrap:wrap; }
.cc-band__head .cc-h{ font-size:clamp(24px,2.4vw,34px); }
.cc-band__head .cc-intro{ font-size:15.5px; margin-top:8px; }
.cc-band__list{ list-style:none; margin:0; padding:0; display:flex; flex:1 1 560px; flex-wrap:wrap; }
.cc-band__list .cc-it{ flex:1 1 200px; padding-inline:clamp(16px,2vw,28px); border-left:1px solid var(--line-on-dark); }
.cc-band__list .cc-it:first-child{ border-left:0; padding-left:0; }
.cc-band .cc-link{ grid-template-columns:auto minmax(0,1fr); gap:4px 14px; padding:8px 0; }
.cc-band .cc-ico{ width:36px; height:36px; grid-row:span 2; }
.cc-band .cc-value{ font-size:18px; }
.cc-band .cc-note{ display:none; }
.cc-band .cc-go{ grid-column:2; font-size:13.5px; }
.cc-band .cc-copy{ width:34px; height:34px; }
@media (max-width:720px){ .cc-band__list .cc-it{ flex-basis:100%; border-left:0; padding-inline:0; border-top:1px solid var(--line-on-dark); padding-block:6px; } .cc-band__list .cc-it:first-child{ border-top:0; } }

/* E · spotlight: one channel large, the others below */
.cc-spot{ display:grid; gap:clamp(24px,3vw,40px); }
.cc-spot__main, .cc-spot__more{ list-style:none; margin:0; padding:0; }
.cc-spot .is-spot .cc-link{ grid-template-columns:minmax(0,1fr) auto; gap:20px 32px; padding:clamp(28px,3.6vw,52px); border-radius:var(--radius-lg); background:var(--panel); }
.cc-spot .is-spot .cc-ico{ display:none; }
.cc-spot .is-spot .cc-value{ font-size:clamp(32px,5vw,68px); line-height:1.02; letter-spacing:-.03em; color:var(--text-on-dark); }
.cc-spot .is-spot .cc-label{ color:var(--accent-bright); }
.cc-spot .is-spot .cc-note{ margin-top:6px; font-size:16px; color:var(--muted-on-dark); }
.cc-spot .is-spot .cc-go{ padding:15px 24px; border-radius:999px; background:var(--btn-bg); color:var(--btn-text); font-size:15px; transition:background-color .2s ease, transform .16s cubic-bezier(.23,1,.32,1); }
.cc-spot .is-spot a.cc-link:hover .cc-go{ background:var(--btn-bg-hover); }
.cc-spot .is-spot a.cc-link:active .cc-go{ transform:scale(.97); }
.cc-spot .is-spot .cc-copy{ position:absolute; top:clamp(16px,2vw,24px); right:clamp(16px,2vw,24px); border-color:var(--line-on-dark); color:var(--muted-on-dark); }
.cc-spot .is-spot .cc-copy:hover{ border-color:var(--text-on-dark); color:var(--text-on-dark); }
.cc-spot__more{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:4px 32px; }
.cc-spot__more .cc-link{ grid-template-columns:auto minmax(0,1fr); gap:4px 14px; padding:12px 0; }
.cc-spot__more .cc-ico{ width:36px; height:36px; grid-row:span 2; }
.cc-spot__more .cc-value{ font-size:18px; }
.cc-spot__more .cc-note{ display:none; }
.cc-spot__more .cc-go{ grid-column:2; font-size:13.5px; }
.dark .cc-spot .is-spot .cc-link{ background:rgba(255,255,255,.05); }
@media (max-width:720px){ .cc-spot .is-spot .cc-link{ grid-template-columns:minmax(0,1fr); padding-top:clamp(56px,14vw,72px); } .cc-spot .is-spot .cc-go{ justify-self:start; } }
@media (max-width:880px){ .cc-split{ grid-template-columns:minmax(0,1fr); } .cc-split__head{ position:static; } }

/* ---- location ---- */
.loc-text{ margin-top:16px; max-width:56ch; }
.loc-addr{ margin-top:clamp(22px,2.4vw,30px); font-style:normal; font-family:var(--display); font-weight:var(--fw-heading); font-size:clamp(20px,1.9vw,26px); line-height:1.35; letter-spacing:-.01em; color:var(--ink); }
.loc-facts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:16px 28px; margin:24px 0 0; padding-top:20px; border-top:var(--border-w) solid var(--line); }
.loc-fact dt{ font-family:var(--label); font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.loc-fact dd{ margin:6px 0 0; font-weight:600; line-height:1.45; color:var(--ink); }
.loc-hours{ display:flex; align-items:center; gap:10px; margin-top:18px; color:var(--muted); }
.loc-hours svg{ width:18px; height:18px; color:var(--accent); }
.loc-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(24px,2.6vw,32px); }
.loc-copy:active{ transform:scale(.97); }
.loc-copy.is-copied{ border-color:var(--accent); color:var(--accent); }
.dark .loc-addr, .dark .loc-fact dd{ color:var(--text-on-dark); }
.dark .loc-fact dt, .dark .loc-hours{ color:var(--muted-on-dark); }
.dark .loc-facts{ border-color:var(--line-on-dark); }
.dark .loc-hours svg{ color:var(--accent-bright); }
.dark .loc-copy.is-copied{ border-color:var(--accent-bright); color:var(--accent-bright); }

/* the map: an image, or a drawn schematic map with a pin */
.loc-map{ position:relative; overflow:hidden; border-radius:var(--radius-lg); background:var(--bg-alt); color:var(--ink); }
.loc-map .media{ position:absolute; inset:0; width:100%; height:100%; border-radius:0; }
.loc-map img{ width:100%; height:100%; object-fit:cover; }
.loc-map--ph svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.dark .loc-map--ph{ background:rgba(255,255,255,.04); color:var(--text-on-dark); }
.loc-pin{ position:absolute; left:52%; top:47%; width:0; height:0; }
.loc-pin__dot, .loc-pin__ring{ position:absolute; left:-11px; top:-11px; width:22px; height:22px; border-radius:50%; }
.loc-pin__dot{ background:var(--accent); box-shadow:0 0 0 6px rgba(var(--accent-rgb),.22), 0 10px 22px -6px rgba(var(--scrim-rgb),.5); }
.loc-pin__ring{ border:2px solid var(--accent); animation:loc-pulse 2.8s cubic-bezier(.23,1,.32,1) infinite; }
@keyframes loc-pulse{ from{ transform:scale(1); opacity:.7; } to{ transform:scale(3.4); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .loc-pin__ring{ animation:none; opacity:0; } }
.cms-editing .loc-pin__ring{ animation:none; opacity:0; }

/* A · full-width map with a floating card */
.loc--full-map{ padding-block:0; min-height:clamp(520px,64vh,700px); display:flex; align-items:center; }
.loc-fm__map{ position:absolute; inset:0; border-radius:0; }
.loc-fm{ position:relative; width:100%; padding-block:clamp(48px,6vw,88px); }
.loc-card{ max-width:540px; padding:clamp(28px,3.2vw,46px); border-radius:var(--radius-lg); background:var(--surface); box-shadow:0 30px 70px -30px rgba(var(--scrim-rgb),.45); }
.loc--full-map.dark .loc-card{ background:var(--panel); }
@media (max-width:760px){
  .loc--full-map{ display:block; min-height:0; }
  .loc-fm__map{ position:relative; height:300px; }
  .loc-fm{ padding-top:0; margin-top:-64px; }
  .loc-card{ max-width:none; }
}

/* B · split: map beside the details */
.loc-split{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(32px,5vw,80px); align-items:center; }
.loc-split__map{ aspect-ratio:4 / 3; }
@media (max-width:880px){ .loc-split{ grid-template-columns:minmax(0,1fr); } }

/* C · card: a wide map on top, the details below in two columns */
.loc-box{ overflow:hidden; border-radius:var(--radius-lg); background:var(--surface); box-shadow:0 30px 70px -40px rgba(var(--scrim-rgb),.4); }
.loc-box__map{ aspect-ratio:21 / 8; border-radius:0; }
.loc-box__details{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); grid-auto-flow:row dense; column-gap:clamp(28px,4vw,64px); align-items:start; padding:clamp(26px,3vw,46px); }
.loc-box__details > *{ grid-column:1; }
.loc-box__details > .loc-addr, .loc-box__details > .loc-facts, .loc-box__details > .loc-hours, .loc-box__details > .loc-actions{ grid-column:2; }
.loc-box__details > .loc-addr{ margin-top:0; }
.dark .loc-box{ background:rgba(255,255,255,.04); box-shadow:0 0 0 1px var(--line-on-dark); }
@media (max-width:820px){ .loc-box__map{ aspect-ratio:16 / 9; } .loc-box__details{ grid-template-columns:minmax(0,1fr); } .loc-box__details > *{ grid-column:1 !important; } .loc-box__details > .loc-addr{ margin-top:22px; } }

/* D · address band (dark): the address large, a round map beside it */
.loc-band{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr); gap:clamp(32px,5vw,72px); align-items:center; }
.loc-band .loc-addr{ font-size:clamp(28px,3.6vw,52px); line-height:1.12; letter-spacing:-.025em; }
.loc-band__map{ width:100%; max-width:340px; aspect-ratio:1; justify-self:end; border-radius:50%; }
@media (max-width:820px){ .loc-band{ grid-template-columns:minmax(0,1fr); } .loc-band__map{ justify-self:start; max-width:260px; } }

/* ---- enquiry form: audience choice ---- */
.ef-aud{ min-width:0; margin:0 0 4px; padding:0; border:0; }
.ef-aud__l{ margin-bottom:10px; padding:0; font-size:14px; font-weight:600; letter-spacing:.02em; color:var(--ink); }
.ef-aud__opts{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.ef-aud__opts--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.ef-aud__o{ position:relative; display:flex; flex-direction:column; gap:4px; padding:14px 16px 14px 44px; border:var(--border-w) solid var(--line); border-radius:var(--radius-md);
  background:var(--surface); cursor:pointer; transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.ef-aud__o input{ position:absolute; left:16px; top:16px; width:18px; height:18px; margin:0; accent-color:var(--accent); }
.ef-aud__t{ font-size:15px; font-weight:600; line-height:1.3; color:var(--ink); }
.ef-aud__d{ font-size:13.5px; line-height:1.4; color:var(--muted); }
@media (hover:hover){ .ef-aud__o:hover{ border-color:var(--ink); } }
.ef-aud__o:has(input:checked){ border-color:var(--accent); background:rgba(var(--accent-rgb),.07); box-shadow:inset 0 0 0 1px var(--accent); }
.ef-aud__o:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }
.field[hidden]{ display:none; }
@media (max-width:640px){ .ef-aud__opts, .ef-aud__opts--2{ grid-template-columns:minmax(0,1fr); } }

/* next steps */
.ef-steps__t{ font-family:var(--label); font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.ef-steps__list{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:20px; }
.ef-step{ position:relative; display:grid; grid-template-columns:32px minmax(0,1fr); gap:14px; align-items:start; }
.ef-step:not(:last-child)::after{ content:""; position:absolute; left:15.5px; top:40px; bottom:-16px; width:1px; background:var(--line); }
.ef-step__n{ width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:rgba(var(--accent-rgb),.14); color:var(--accent); font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
.ef-step__h{ font-family:var(--body); font-size:16.5px; font-weight:600; line-height:1.3; letter-spacing:0; padding-top:5px; }
.ef-step__p{ margin-top:4px; font-size:14.5px; line-height:1.5; color:var(--muted); }
.dark .ef-steps__t{ color:var(--muted-on-dark); }
.dark .ef-step__n{ background:rgba(var(--accent-bright-rgb),.16); color:var(--accent-bright); }
.dark .ef-step__p{ color:var(--muted-on-dark); }
.dark .ef-step:not(:last-child)::after{ background:var(--line-on-dark); }
.ef-note{ margin-top:8px; }

/* a form straight on a dark section (classic / steps / editorial on Dark) */
.ef--classic.dark .field label, .ef--steps.dark .field label, .ef--editorial.dark .field label,
.ef--classic.dark .ef-aud__l, .ef--steps.dark .ef-aud__l, .ef--editorial.dark .ef-aud__l,
.ef--classic.dark .ef-aud__t, .ef--steps.dark .ef-aud__t, .ef--editorial.dark .ef-aud__t{ color:var(--text-on-dark); }
.ef--classic.dark .ef-aud__d, .ef--steps.dark .ef-aud__d, .ef--editorial.dark .ef-aud__d,
.ef--classic.dark .form-note, .ef--steps.dark .form-note, .ef--editorial.dark .form-note{ color:var(--muted-on-dark); }
.ef--classic.dark .ef-aud__o, .ef--steps.dark .ef-aud__o, .ef--editorial.dark .ef-aud__o{ background:rgba(255,255,255,.04); border-color:var(--line-on-dark); }
.ef--classic.dark .field :is(input, select, textarea), .ef--steps.dark .field :is(input, select, textarea), .ef--editorial.dark .field :is(input, select, textarea){
  background:rgba(255,255,255,.06); border-color:var(--line-on-dark); color:var(--text-on-dark); }
.ef--classic.dark .field select option, .ef--steps.dark .field select option, .ef--editorial.dark .field select option{ color:var(--ink); }
/* forms on a light card keep dark ink even inside a dark section */
.ef-sp__form, .ef-ce__card, .ef-mc__card{ color:var(--ink); }
.ef-sp__form h3, .ef-ce__card h3, .ef-mc__card h3{ color:var(--ink); }

/* B · split panel: dark panel (heading, steps) beside the form */
.ef-sp{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); overflow:hidden; border-radius:var(--radius-lg); background:var(--surface);
  box-shadow:0 30px 70px -40px rgba(var(--scrim-rgb),.45); }
.ef-sp__panel{ display:flex; flex-direction:column; gap:clamp(28px,3vw,44px); padding:clamp(30px,3.6vw,56px); }
.ef-sp__panel .ef-h{ font-size:clamp(30px,3vw,46px); }
.ef-sp__panel .ef-details--panel{ gap:20px; padding-top:24px; border-top:1px solid var(--line-on-dark); }
.ef-sp__panel .cdetail .k{ color:var(--muted-on-dark); }
.ef-sp__panel .cdetail .v{ font-size:16px; color:var(--text-on-dark); }
.ef-sp__form{ padding:clamp(30px,3.6vw,56px); }
.dark .ef-sp{ background:var(--surface); box-shadow:none; }
@media (max-width:940px){ .ef-sp{ grid-template-columns:minmax(0,1fr); } }

/* C · with next steps: form beside a steps aside */
.ef-st{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,.8fr); gap:clamp(40px,6vw,96px); align-items:start; }
.ef-st__main .ef-note{ margin-bottom:28px; }
.ef-st__aside{ position:sticky; top:calc(var(--nav-h) + 32px); display:flex; flex-direction:column; gap:28px; padding:clamp(24px,2.6vw,34px); border-radius:var(--radius-lg); background:var(--bg-alt); }
.alt .ef-st__aside{ background:var(--surface); }
.dark .ef-st__aside{ background:rgba(255,255,255,.04); }
.ef-details--aside{ gap:18px; padding-top:22px; border-top:var(--border-w) solid var(--line); }
.ef-details--aside .cdetail .v{ font-size:16px; }
@media (max-width:940px){ .ef-st{ grid-template-columns:minmax(0,1fr); } .ef-st__aside{ position:static; } }

/* D · centered: one column, the form on a card */
.ef-ce{ max-width:920px; }
.ef-ce__head{ text-align:center; margin-bottom:clamp(28px,3vw,44px); }
.ef-ce__head .ef-h{ max-width:20ch; margin-inline:auto; }
.ef-ce__card{ padding:clamp(24px,3.4vw,48px); border-radius:var(--radius-lg); background:var(--surface); box-shadow:0 30px 70px -40px rgba(var(--scrim-rgb),.4); }
.ef-steps--row{ margin-top:clamp(32px,4vw,52px); }
.ef-steps--row .ef-steps__t{ text-align:center; }
.ef-steps--row .ef-steps__list{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:20px 28px; }
.ef-steps--row .ef-step::after{ display:none; }
.ef-details--row{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:24px 48px; margin-top:clamp(32px,4vw,48px); text-align:center; }
.ef-details--row .cdetail .v{ font-size:16px; }

/* E · editorial: a large heading left, a lined form right */
.ef-ed{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(40px,7vw,120px); align-items:start; }
.ef-ed__head{ position:sticky; top:calc(var(--nav-h) + 32px); display:flex; flex-direction:column; gap:28px; }
.ef-ed__h{ margin:0; font-size:clamp(40px,5.2vw,78px); line-height:.98; letter-spacing:-.035em; }
.ef-details--plain{ gap:18px; }
.ef-details--plain .cdetail .v{ font-size:16px; }
.form--line .field :is(input, select, textarea){ padding:12px 0; border:0; border-bottom:1.5px solid var(--line); border-radius:0; background:transparent; }
.form--line .field :is(input, select, textarea):focus{ border-color:var(--accent); box-shadow:0 1.5px 0 0 var(--accent); }
.form--line .field textarea{ min-height:110px; }
.form--line .ef-aud__o{ background:transparent; }
.ef--editorial.dark .form--line .field :is(input, select, textarea){ background:transparent; border-color:var(--line-on-dark); }
@media (max-width:940px){ .ef-ed{ grid-template-columns:minmax(0,1fr); } .ef-ed__head{ position:static; } }

/* F · card over image (dark). The picture and its scrim live inside .ef-mc__bg: the section
   root's ::before / ::after belong to the editor's section label (editor.css), and a scrim
   there merged with it into one accent-colored block over the whole section. */
.ef--media-card{ isolation:isolate; overflow:hidden; padding-block:clamp(72px,9vw,140px); background:var(--panel); }
.ef-mc__bg{ position:absolute; inset:0; z-index:-1; }
.ef-mc__bg .media, .ef-mc__img{ position:absolute; inset:0; width:100%; height:100%; border-radius:0; }
.ef-mc__bg :is(img, video){ width:100%; height:100%; object-fit:cover; }
/* no picture yet: the theme's dark surface with a soft glow */
.ef-mc__ph{ position:absolute; inset:0; background:radial-gradient(110% 80% at 86% 0%, rgba(var(--accent-bright-rgb),.16), transparent 60%), linear-gradient(165deg, var(--panel), var(--scrim)); }
/* scrim: the admin's overlay over the picture; the side with the heading never gets lighter than
   80 % (white and muted text stay at WCAG AA over any picture). The form card has its own surface. */
.ef-mc__bg::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(var(--scrim-rgb), max(.8, calc(var(--ef-ov, .6) + .15))) 0%, rgba(var(--scrim-rgb), max(.8, calc(var(--ef-ov, .6) + .15))) 47%, rgba(var(--scrim-rgb), var(--ef-ov, .6)) 60%); }
@media (max-width:940px){ .ef-mc__bg::after{ background:rgba(var(--scrim-rgb), max(.8, var(--ef-ov, .6))); } }
/* editor only: a hint while the section has no picture */
.ef-mc__hint{ display:none; }
.cms-editing .ef-mc__hint{ position:absolute; z-index:1; top:clamp(18px,2.2vw,30px); left:50%; translate:-50% 0; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:9px 18px; border:1px dashed rgba(255,255,255,.5); border-radius:12px; background:rgba(0,0,0,.4); color:var(--on-dark-strong); font:600 14px/1.3 var(--body); text-align:center; white-space:nowrap; }
.cms-editing .ef-mc__hint small{ font-size:12.5px; font-weight:500; opacity:.82; }
.ef.dark .ef-mc__card :is(.req, .accent){ color:var(--accent); }   /* the card is light: the regular accent reads there */
/* a narrow form card (tablet, editor open): the "I am a" options stack instead of squeezing */
.ef-mc__card, .ef-sp__form{ container-type:inline-size; }
@container (max-width:540px){ .ef-aud__opts, .ef-aud__opts--2{ grid-template-columns:minmax(0,1fr); } }
.ef-mc{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(40px,6vw,96px); align-items:center; }
.ef-mc__copy{ display:flex; flex-direction:column; gap:32px; }
.ef-mc__copy .ef-h{ font-size:clamp(34px,4vw,58px); }
.ef-mc__card{ padding:clamp(26px,3.2vw,44px); border-radius:var(--radius-lg); background:var(--surface); box-shadow:0 40px 80px -30px rgba(0,0,0,.5); }
@media (max-width:940px){ .ef-mc{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:560px){
  .cc-list .cc-link, .cc-rows .cc-link{ grid-template-columns:auto minmax(0,1fr); }
  .cc-rows .cc-link{ grid-template-columns:minmax(0,1fr); }
  .cc-list .cc-go{ grid-column:2; }
  .cc-it.has-copy .cc-copy{ align-self:flex-start; margin-top:20px; }
}
/* contact page: refinements after the design pass */
.cc--copy .cc-list .cc-it:not(.has-copy), .cc--copy .cc-rows .cc-it:not(.has-copy){ padding-right:52px; }
.cc-rows .cc-body{ grid-template-columns:clamp(110px,15vw,220px) minmax(0,1fr); }
.cc-band{ display:grid; grid-template-columns:minmax(220px,.5fr) minmax(0,1.5fr); align-items:center; }
.cc-band > .cc-band__list:only-child{ grid-column:1 / -1; }
.cc-band__list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:14px 0; }
.cc-band__list .cc-it, .cc-band__list .cc-it:first-child{ border-left:1px solid var(--line-on-dark); padding-left:clamp(16px,1.6vw,22px); padding-right:12px; }
@media (max-width:820px){ .cc-band{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:720px){ .cc-band__list{ grid-template-columns:minmax(0,1fr); gap:0; } .cc-band__list .cc-it, .cc-band__list .cc-it:first-child{ border-left:0; padding-inline:0; border-top:1px solid var(--line-on-dark); } .cc-band__list .cc-it:first-child{ border-top:0; } }
.cc-spot__more{ grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); }
.alt .loc-map--ph, .loc-box .loc-map--ph{ background:var(--bg-alt); }
.alt .loc-map--ph{ background:var(--surface); }
.loc-band .loc-addr{ font-size:clamp(26px,3.2vw,44px); }
.cc.dark .accent, .loc.dark .accent, .ef.dark .accent, .ef-sp__panel .accent, .ef.dark .req, .ef-sp__panel .req{ color:var(--accent-bright); }
.cc-band--stack{ grid-template-columns:minmax(0,1fr); gap:clamp(18px,2vw,26px); }
.cc-band--stack .cc-band__head .cc-h{ max-width:none; }
.cc-band__list{ grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); }
.cc-it--phone .cc-value, .cc-it--whatsapp .cc-value{ white-space:nowrap; overflow-wrap:normal; }

/* =====================================================================
   Responsive layer (docs/RESPONSIVE-AUDIT.md). One place for the rules that only phones,
   tablets and short landscape screens need; nothing here applies to a desktop with a mouse.
   Breakpoints used across the site, by role:
     phone ≤ 600 px · header menu switch ≤ 940 px · tablet ≤ 1024 px · desktop ≥ 1025 px
     short landscape: (orientation:landscape) and (max-height:540px)
     touch: (pointer:coarse) for tap targets, (hover:none) for hover-only effects
   Type and spacing stay on the theme's fluid tokens (--fs-*, --pad-x, --section-y: clamp()).
   ===================================================================== */
:root{ --tap:44px; }

/* 1. nothing sticks out sideways: a section clips decorative bleed (a spinning ring, a shadow,
   a slide-in) on the x axis only. `clip` is not a scroll container, so sticky parts still work;
   phones and tablets only (desktop is pixel-identical without it, and nothing overflows there). */
@media (max-width:1024px){ body > :is(section, header, footer){ overflow-x:clip; } }

/* 2. touch: 44 px tap targets (WCAG 2.5.5); the visible size of small controls stays,
   an invisible layer widens what a finger can hit */
@media (pointer:coarse){
  .btn{ min-height:var(--tap); }
  .nav-brand{ min-height:var(--tap); }
  .tl-dot::before{ content:""; position:absolute; inset:-18px -3px; }
  /* the slider dot clips its progress fill (overflow:hidden), so it grows by padding: the 3 px bar
     is painted in the content box, the negative margin keeps the layout */
  .slider-dots button{ height:44px; padding:20px 0 21px; margin-block:-20px -21px; background-clip:content-box; }
  .slider-dots button .fill{ inset:20px 0 21px; }
  .tl-dot{ position:relative; }
  .tl-arrow{ width:var(--tap); height:var(--tap); margin-top:calc(var(--tap) / -2); }
  .slider-arrows button{ min-width:var(--tap); min-height:var(--tap); }
  .modal-close{ width:var(--tap); height:var(--tap); top:12px; right:12px; }
  .cc-copy{ width:var(--tap); height:var(--tap); }
  .crumbs a, .pf-go, .ft-links a, .ft-clist a, .ft-legal a, .ft-credit a, .ft-nav a, .ft-bottom a{ display:inline-flex; align-items:center; min-height:var(--tap); }
  /* touch tablets wide enough for the desktop menu (1024 to 1366 px): its links and the footer accordion headers */
  .nav-links a{ display:inline-flex; align-items:center; min-height:var(--tap); }
  .ft-col summary{ min-height:var(--tap); }
  .mv-tab{ min-height:var(--tap); }
  .ft-links, .ft-clist{ gap:0; }
  /* iOS zooms into any field under 16 px */
  .modal-form input{ font-size:16px; }
}

/* 3. phones and tablets (and every touch screen, iPads in landscape are 1180 px wide): body text at least 14 px, uppercase labels at least 12 px */
@media (max-width:1024px), (pointer:coarse){
  .ft-bottom, .modal-note, .ef-aud__d, .cc-band .cc-go, .cc-spot__more .cc-go, .dp-dom{ font-size:14px; }
  .dp-soon, .dp .dp-meta, .pf-tags li, .pp-crow .pp-role, .slider--size-compact .hero-slide .eyebrow{ font-size:12px; }
}

/* 4. the B2B pop-up scrolls when it is taller than the screen (centred while it fits) */
.modal-overlay{ align-items:flex-start; overflow-y:auto; overscroll-behavior:contain; }
.modal{ margin-block:auto; flex-shrink:0; }
@media (max-width:600px){
  .modal-overlay{ padding:16px; }
  .modal-body{ padding:28px 22px 26px; }
  .modal h2{ font-size:clamp(24px, 7vw, 30px); }
}

/* 4b. hero slider on phones and tablets: the slides share one grid cell instead of being
   absolutely placed, so the hero is as tall as its tallest slide. A long headline no longer
   spills out of the top under the header (320 px wide), and the height does not change
   between slides. The minimum heights (and the slider's height setting) still apply. */
@media (max-width:1024px), (orientation:landscape) and (max-height:540px){
  .hero-slider .hero-slides{ position:relative; inset:auto; display:grid; min-height:inherit; }
  .hero-slider .hero-slide{ position:relative; inset:auto; grid-area:1 / 1; display:flex; flex-direction:column; min-height:inherit; }
  .hero-slider .hero-slide > .wrap{ flex:1 0 auto; height:auto; width:100%; }
}

/* 4c. sizes set in the editor in px (desktop values) must not break small screens.
   - A section's side margin (Style tab) without a tablet or mobile value: scaled down at ≤ 940 px
     (staging's Quality section: 128 px each side left 119 px for the text on a 375 px phone).
     The outer background / separators follow (--sec-mx).
   - A stats number size (Design tab) is capped by the width of its own column, so "2021" at
     83 px no longer runs into its neighbour or off the screen (staging's About stats). */
@media (max-width:940px){
  [style*="--section-mx:"]:not([style*="--section-mx-t:"]):not([style*="--section-mx-m:"]){ margin-inline:min(var(--section-mx), 3vw); --sec-mx:min(var(--section-mx), 3vw); }
}
@media (max-width:1024px){
  [style*="--ds-size:"] .ts-item{ container-type:inline-size; }
  [style*="--ds-size:"] .ts-num{ font-size:min(var(--ds-size), 30cqi); }
}

/* 5. the Products submenu opens on tap where there is no hover (site.js: initTouchSubmenus) */
.nav-links .has-sub.is-open > .nav-sub{ opacity:1; visibility:visible; transform:none; }

/* 6. short landscape screens (phones turned sideways): headings scale with the height,
   the hero no longer needs 600 px, sticky side columns scroll with the page */
@media (orientation:landscape) and (max-height:540px){
  h1{ font-size:min(var(--fs-h1), calc(5vh + 12px)); }
  h2{ font-size:min(var(--fs-h2), calc(4.4vh + 11px)); }
  .hero-slider{ min-height:max(480px, 100svh); }
  .hero-slide h1{ margin-top:12px; }
  .hero-slide .lead{ margin-top:12px; font-size:16px; }
  .hero-slide .hero-cta{ margin-top:20px; }
  .slide-count{ top:calc(var(--nav-h) + 16px); }
  .pagehead-slider{ min-height:0; }
  .pagehead-slider .pagehead-inner{ padding-top:calc(var(--nav-h) + 20px); padding-bottom:56px; }
  .pagehead-slider .lead{ margin-top:12px; }
  .crumbs{ margin-bottom:12px; }
  .modal-visual{ height:72px; }
  /* !important: some of these are set with two classes (.ds-style-split .tfaq-intro) */
  :is(.pf-split__panel, .wp-sticky__intro, .wp-tabs__panel, .mv-split__side, .tfaq-intro, .tx-aside, .cc-split__head, .ef-st__aside, .ef-ed__head){ position:static !important; }
}