/*!
 * site-tpl.css — homepage composition layer
 * ---------------------------------------------------------------------------
 * WHAT THIS IS
 *   The sakhtino template's component vocabulary, rebuilt in SDO's own palette.
 *   Layout and rhythm come from the template; every colour comes from the
 *   brand book (dark is the base — see site.css §0).
 *
 * SCOPE
 *   Every selector is scoped to `body.sdo-landing-page`. This sheet is linked
 *   from intro/index.html via {% block stylesheets %}, i.e. AFTER site.css, so
 *   it can refine landing components without touching the shared public rules.
 *   Never add an unscoped global selector here.
 *
 * TOKENS
 *   Consumes site.css tokens only (--cyan, --navy-*, --ink-*, --line, --r-*).
 *   Two template metrics are local because they describe this composition:
 *     --tpl-container  content width, centred with auto margins
 *     --tpl-gutter     minimum breathing room at the viewport edge
 *
 * CONTRAST
 *   Bright cyan (#2BBBE9) + near-black reads harsh. Brand fills that carry
 *   copy use --tpl-brand (cyan-700) + --tpl-on-brand (#fff) instead.
 *   Always-dark plates (--tpl-deep) use --tpl-on-deep — never --tpl-ink-*
 *   (ink follows the light theme and would go black-on-navy).
 */

body.sdo-landing-page {
  --tpl-container: 1297px;
  --tpl-gutter: 16px;

  /* Surfaces resolve through site.css's SEMANTIC tokens, which the light
     theme redefines. Reaching for the raw --navy-* ramp here would pin the
     whole composition to dark and make the toggle a no-op. */
  --tpl-page: var(--surface-0);
  --tpl-band: var(--surface-2);
  --tpl-card: var(--surface-1);
  --tpl-raised: var(--surface-2);
  --tpl-sunken: var(--surface-2);

  /* Two cards are dark ON PURPOSE in both themes — they are the composition's
     weight, exactly as the navy and slate cards are in the source template. */
  --tpl-deep: #143050;
  --tpl-slate: #0E2338;
  --tpl-on-deep: #F3F8FD;

  /* Filled brand surfaces (tabs, CTA bars, accent stats) */
  --tpl-brand: var(--cyan-700);
  --tpl-brand-hover: var(--cyan-600);
  --tpl-on-brand: #FFFFFF;

  /* Ink follows the theme too. */
  --tpl-ink-0: var(--text-strong);
  --tpl-ink-1: var(--text);
  --tpl-ink-2: var(--text-muted);
  --tpl-ink-3: var(--text-label);

  --tpl-ring: color-mix(in srgb, var(--cyan) 14%, transparent);
}

/* The hero keeps a dark stage in both themes: the film is the subject and a
   white plate around it would blow out the frame. */
[data-theme="light"] body.sdo-landing-page {
  --tpl-hero-bg: #0A1B30;
  --tpl-hero-ink: #F3F8FD;
  --tpl-hero-ink-2: #BCCEE0;
}
body.sdo-landing-page {
  --tpl-hero-bg: var(--surface-2);
  --tpl-hero-ink: var(--text-strong);
  --tpl-hero-ink-2: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. RHYTHM — container, section shells
   ═══════════════════════════════════════════════════════════════════════════ */

/* site.css reserves --header-h at the top of the page for the FIXED shared
   header. This composition ships its own header in normal flow, so that
   reservation is just an empty strip above the topbar. */
body.sdo-landing-page { padding-block-start: 0; }

body.sdo-landing-page .tpl-wrap {
  max-inline-size: var(--tpl-container);
  margin-inline: auto;
  padding-inline: var(--tpl-gutter);
}

body.sdo-landing-page .tpl-section { position: relative; }
body.sdo-landing-page .tpl-section--band { background: var(--tpl-band); }

/* ═══════════════════════════════════════════════════════════════════════════
   2. SECTION TITLE — eyebrow above, two dashes, lead below
   The template stacks: title · dash pair · lead. The short dash is the accent,
   the long one is neutral; on a dark band the neutral dash reads as ink.
   ═══════════════════════════════════════════════════════════════════════════ */

body.sdo-landing-page .tpl-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
  inline-size: 100%;
}

body.sdo-landing-page .tpl-title__h {
  display: flex;
  inline-size: 100%;
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 800;
  color: var(--tpl-ink-0);
}

body.sdo-landing-page .tpl-title__rules {
  display: flex;
  gap: 8px;
  margin-block-end: 2px;
}

body.sdo-landing-page .tpl-title__rules span {
  display: inline-flex;
  block-size: 2px;
  border-radius: 10px;
}

body.sdo-landing-page .tpl-title__rules span:first-child {
  inline-size: 18px;
  background: var(--cyan);
}

body.sdo-landing-page .tpl-title__rules span:last-child {
  inline-size: 29px;
  background: var(--tpl-ink-3);
}

body.sdo-landing-page .tpl-title__lead {
  display: flex;
  font-size: 20px;
  line-height: 40px;
  font-weight: 500;
  color: var(--tpl-ink-3);
}

/* Centred variant — the box stays full width so the text centres on the
   container, not on its own shrink-wrapped width. */
body.sdo-landing-page .tpl-title--center {
  align-items: center;
  text-align: center;
}

body.sdo-landing-page .tpl-title--center .tpl-title__h,
body.sdo-landing-page .tpl-title--center .tpl-title__rules {
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. BUTTONS — 44px touch target (WCAG), pill radius, SDO colours
   ═══════════════════════════════════════════════════════════════════════════ */

body.sdo-landing-page .tpl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  block-size: 44px;
  min-block-size: 44px;
  padding-inline: 20px;
  border: 1px solid transparent;
  border-radius: 50px;
  font: 500 14px/1.2 var(--font-sans);
  white-space: nowrap;
  inline-size: max-content;
  max-inline-size: 100%;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

body.sdo-landing-page .tpl-btn svg,
body.sdo-landing-page .tpl-btn i { font-size: 16px; flex: none; line-height: 1; }
body.sdo-landing-page .tpl-btn svg { inline-size: 16px; block-size: 16px; }

/* Cyan fill — deeper brand surface + white ink (bright cyan + black reads muddy) */
body.sdo-landing-page .tpl-btn--brand {
  background: var(--tpl-brand);
  color: var(--tpl-on-brand);
}
body.sdo-landing-page .tpl-btn--brand:hover { background: var(--tpl-brand-hover); color: var(--tpl-on-brand); }
body.sdo-landing-page .tpl-btn--brand i,
body.sdo-landing-page .tpl-btn--brand svg { color: inherit; }

/* Raised surface — the template's navy pill, here a lifted panel. */
body.sdo-landing-page .tpl-btn--solid {
  background: var(--tpl-deep);
  color: var(--tpl-on-deep);
}
body.sdo-landing-page .tpl-btn--solid:hover { background: var(--tpl-slate); color: var(--tpl-on-deep); }

/* Ghost — for dark hero stage: light label on translucent plate */
body.sdo-landing-page .tpl-btn--ghost {
  background: color-mix(in srgb, #F3F8FD 10%, transparent);
  border-color: color-mix(in srgb, #F3F8FD 28%, transparent);
  color: #F3F8FD;
}
body.sdo-landing-page .tpl-btn--ghost:hover {
  background: color-mix(in srgb, #F3F8FD 18%, transparent);
  border-color: color-mix(in srgb, #F3F8FD 45%, transparent);
  color: #fff;
}

/* Inverted — used on the cyan banner, where the page colour becomes the fill */
body.sdo-landing-page .tpl-btn--invert {
  background: var(--tpl-page);
  color: var(--tpl-ink-0);
}
body.sdo-landing-page .tpl-btn--invert:hover { background: var(--tpl-card); }

/* Icon button — 44px outlined circle */
body.sdo-landing-page .tpl-iconbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 40px;
  min-inline-size: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--tpl-ink-1);
  background: transparent;
  cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
body.sdo-landing-page .tpl-iconbtn i { font-size: 16px; }
body.sdo-landing-page .tpl-iconbtn:hover {
  border-color: var(--cyan-600);
  color: var(--cyan-300);
}
body.sdo-landing-page .tpl-iconbtn--bare { border-color: transparent; }

/* ═══════════════════════════════════════════════════════════════════════════
   4. HEADER — two rows: an info strip with a diagonal seam, then the nav row
   ═══════════════════════════════════════════════════════════════════════════ */

body.sdo-landing-page .tpl-header {
  position: relative;
  z-index: 30;
  background: var(--tpl-page);
}

/* ── Row 1: utility strip ─────────────────────────────────────────────────
   The accent block bleeds to the inline-start edge behind the container, and
   two skewed slivers mark the seam — the template's signature. */
body.sdo-landing-page .tpl-topbar {
  position: relative;
  display: flex;
  block-size: 40px;
  overflow: hidden;
  border-block-end: 1px solid var(--border);
}

body.sdo-landing-page .tpl-topbar__bleed {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  inline-size: 40%;
  block-size: 100%;
  background: var(--tpl-brand);
  z-index: 1;
}

body.sdo-landing-page .tpl-topbar > .tpl-wrap {
  position: relative;
  z-index: 2;
  inline-size: 100%;
}

body.sdo-landing-page .tpl-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: 100%;
  background: var(--tpl-page);
}

body.sdo-landing-page .tpl-topbar__start {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  block-size: 100%;
  flex: 1;
}

body.sdo-landing-page .tpl-topbar__seam {
  position: absolute;
  inset-block-start: 0;
  inline-size: 41px;
  block-size: 100%;
  background: var(--tpl-raised);
  z-index: 3;
  clip-path: polygon(28px 0%, 100% 0%, 14px 100%, 0% 100%);
}
body.sdo-landing-page .tpl-topbar__seam--1 { inset-inline-end: 0; }
body.sdo-landing-page .tpl-topbar__seam--2 { inset-inline-end: 24px; }

body.sdo-landing-page .tpl-topbar__menu ul {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.sdo-landing-page .tpl-topbar__menu a {
  display: inline-flex;
  font: 400 14px/28px var(--font-sans);
  color: var(--tpl-ink-2);
  transition: color .3s var(--ease);
}
body.sdo-landing-page .tpl-topbar__menu a:hover { color: var(--cyan-300); }

body.sdo-landing-page .tpl-topbar__end {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 44px;
  inline-size: 40%;
  block-size: 100%;
  background: var(--tpl-brand);
  clip-path: polygon(0 0, 100% 0%, calc(100% - 26px) 100%, 0 100%);
}

body.sdo-landing-page .tpl-topbar__fact {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--tpl-on-brand);
  min-inline-size: 0;
}
body.sdo-landing-page .tpl-topbar__fact .t {
  font: 500 13px/1.2 var(--font-sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.sdo-landing-page .tpl-topbar__fact .v {
  inline-size: 1px;
  block-size: 14px;
  display: inline-flex;
  flex: none;
  background: color-mix(in srgb, var(--tpl-on-brand) 28%, transparent);
}
body.sdo-landing-page .tpl-topbar__fact .i {
  display: inline-flex;
  align-items: center;
  flex: none;
  font-size: 14px;
  color: color-mix(in srgb, var(--tpl-on-brand) 78%, transparent);
}

body.sdo-landing-page .tpl-burger {
  display: flex;
  position: relative;
  z-index: 4;
  font-size: 24px;
  color: var(--tpl-ink-2);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
body.sdo-landing-page .tpl-burger:hover { color: var(--cyan-300); }

/* ── Row 2: brand + nav + actions ─────────────────────────────────────── */
body.sdo-landing-page .tpl-navbar { background: var(--tpl-page); }

body.sdo-landing-page .tpl-navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: 88px;
}

body.sdo-landing-page .tpl-navbar__start {
  display: flex;
  align-items: center;
  gap: 80px;
  flex: 1;
}

body.sdo-landing-page .tpl-brand img,
body.sdo-landing-page .tpl-brand svg { inline-size: 120px; block-size: auto; }

body.sdo-landing-page .tpl-nav { flex: 1; }
body.sdo-landing-page .tpl-nav > ul {
  display: flex;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.sdo-landing-page .tpl-nav > ul > li { position: relative; }

body.sdo-landing-page .tpl-nav > ul > li > a,
body.sdo-landing-page .tpl-nav > ul > li > button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 400 16px/32px var(--font-sans);
  color: var(--tpl-ink-1);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color .3s var(--ease);
}

/* Hairline between top-level items — the template's quiet divider */
body.sdo-landing-page .tpl-nav > ul > li:not(:last-child) > a::before,
body.sdo-landing-page .tpl-nav > ul > li:not(:last-child) > button::before {
  content: '';
  position: absolute;
  inset-inline-end: -32px;
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 1px;
  block-size: 100%;
  background: var(--border);
}

body.sdo-landing-page .tpl-nav > ul > li.is-current > a,
body.sdo-landing-page .tpl-nav > ul > li.is-current > button { color: var(--cyan); }

body.sdo-landing-page .tpl-nav > ul > li:hover > a,
body.sdo-landing-page .tpl-nav > ul > li:hover > button { color: var(--cyan-300); }

body.sdo-landing-page .tpl-nav__chev { font-size: 12px; color: var(--tpl-ink-3); }

/* Dropdown — level-3 surface, one shadow level */
body.sdo-landing-page .tpl-nav__panel {
  position: absolute;
  inset-block-start: calc(100% + 30px);
  inset-inline-start: 0;
  min-inline-size: 260px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  padding-block: 10px;
  background: var(--tpl-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
body.sdo-landing-page .tpl-nav > ul > li:hover > .tpl-nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Hover bridge across the gap, so the panel does not close mid-travel */
body.sdo-landing-page .tpl-nav > ul > li.has-panel::before {
  content: '';
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 30px;
}

body.sdo-landing-page .tpl-nav__panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  font: 400 14px/25px var(--font-sans);
  color: var(--tpl-ink-2);
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
body.sdo-landing-page .tpl-nav__panel a:hover {
  color: var(--cyan-300);
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
}
body.sdo-landing-page .tpl-nav__panel .d {
  display: block;
  font-size: 12px;
  line-height: 18px;
  color: var(--tpl-ink-3);
}

body.sdo-landing-page .tpl-navbar__end {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. OFF-CANVAS MENU — slides from the inline-start edge (the right, in RTL)
   ═══════════════════════════════════════════════════════════════════════════ */

body.sdo-landing-page .tpl-drawer {
  position: fixed;
  inset-inline-start: -378px;
  inset-block-start: 0;
  inline-size: 378px;
  max-inline-size: 100%;
  /* svh avoids iOS toolbar jump; dvh follows the live viewport */
  block-size: 100vh;
  block-size: 100svh;
  padding: 20px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  /* Must fit every phone without scrolling — density lives in the mobile rules */
  overflow: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: auto;
  background: var(--tpl-band);
  border-inline-end: 5px solid var(--cyan);
  transition: inset-inline-start .5s cubic-bezier(.19, 1, .22, 1);
  touch-action: manipulation;
}
body.sdo-landing-page .tpl-drawer.is-open { inset-inline-start: 0; }

body.sdo-landing-page .tpl-drawer__top {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-block-size: 0;
  flex: 1 1 auto;
}
body.sdo-landing-page .tpl-drawer__foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 auto;
}

body.sdo-landing-page .tpl-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: none;
}
body.sdo-landing-page .tpl-drawer__head img,
body.sdo-landing-page .tpl-drawer__head svg { inline-size: 100px; block-size: auto; }

/* A 40px disc turned 45°, so the "+" glyph reads as a close cross */
body.sdo-landing-page .tpl-drawer__close {
  inline-size: 40px;
  min-inline-size: 40px;
  block-size: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--tpl-brand);
  color: var(--tpl-on-brand);
  transform: rotate(45deg);
  cursor: pointer;
}

body.sdo-landing-page .tpl-drawer__lead {
  margin: 0;
  font: 400 13px/22px var(--font-sans);
  color: var(--tpl-ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.sdo-landing-page .tpl-drawer__nav { margin-block-start: 4px; min-block-size: 0; }
body.sdo-landing-page .tpl-drawer__nav ul { margin: 0; padding: 0; list-style: none; }
body.sdo-landing-page .tpl-drawer__nav > ul > li {
  padding-block: 0;
  border-block-end: 1px solid var(--border);
}
body.sdo-landing-page .tpl-drawer__nav > ul > li:last-child { border-block-end: 0; }
body.sdo-landing-page .tpl-drawer__nav > ul > li > a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-block-size: 40px;
  font: 500 14px/22px var(--font-sans);
  color: var(--tpl-ink-1);
}
body.sdo-landing-page .tpl-drawer__nav > ul > li.is-current > a { color: var(--cyan); }

body.sdo-landing-page .tpl-drawer__contact {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px;
  background: var(--tpl-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
body.sdo-landing-page .tpl-drawer__contact h5 {
  margin: 0;
  font: 700 14px/22px var(--font-sans);
  color: var(--tpl-ink-0);
  text-align: center;
}
body.sdo-landing-page .tpl-drawer__facts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  inline-size: 100%;
}
body.sdo-landing-page .tpl-drawer__facts .row {
  display: flex;
  align-items: center;
  gap: 10px;
}
body.sdo-landing-page .tpl-drawer__facts i { font-size: 14px; color: var(--cyan); flex: none; }
body.sdo-landing-page .tpl-drawer__facts .v {
  inline-size: 1px;
  block-size: 14px;
  display: inline-block;
  background: var(--border);
  flex: none;
}
body.sdo-landing-page .tpl-drawer__facts .t {
  font: 400 13px/20px var(--font-sans);
  color: var(--tpl-ink-1);
}
body.sdo-landing-page .tpl-drawer__contact .tpl-btn {
  inline-size: 100%;
  justify-content: center;
  block-size: 42px;
  font-size: 14px;
}

body.sdo-landing-page .tpl-drawer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-block-start: 0;
  margin-block-start: 0;
  border-block-start: 0;
}
body.sdo-landing-page .tpl-drawer__social a {
  inline-size: 40px;
  block-size: 40px;
  min-inline-size: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan);
  font-size: 16px;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
body.sdo-landing-page .tpl-drawer__social a:hover {
  background: var(--tpl-brand);
  color: var(--tpl-on-brand);
}

body.sdo-landing-page .tpl-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgb(0 0 0 / .5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
body.sdo-landing-page .tpl-scrim.is-open { opacity: 1; visibility: visible; }

/* ═══════════════════════════════════════════════════════════════════════════
   6. HERO — media on the inline-end side, copy on the inline-start side
   The template puts the figure opposite the copy; SDO's figure is the intro
   film, so the player takes that plane.
   ═══════════════════════════════════════════════════════════════════════════ */

body.sdo-landing-page .tpl-hero {
  position: relative;
  min-block-size: 600px;
  padding-inline: 10px;
  padding-block-end: 70px;      /* room for the wave that closes the stage */
  background: var(--tpl-hero-bg);
  overflow: hidden;
}

body.sdo-landing-page .tpl-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 78% 28%, color-mix(in srgb, var(--cyan) 16%, transparent), transparent 70%),
    radial-gradient(50% 60% at 12% 78%, color-mix(in srgb, var(--cyan-700) 20%, transparent), transparent 72%);
  pointer-events: none;
}

/* A faint blueprint grid, the dark-theme answer to the template's line art */
body.sdo-landing-page .tpl-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--cyan) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--cyan) 5%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(75% 65% at 50% 40%, #000 20%, transparent 78%);
  pointer-events: none;
}

body.sdo-landing-page .tpl-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  min-block-size: 600px;
}

body.sdo-landing-page .tpl-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  inline-size: 50%;
  padding: 76px 16px 16px;
}

body.sdo-landing-page .tpl-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  inline-size: max-content;
  padding: 6px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cyan) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan) 28%, transparent);
  font: 500 13px/20px var(--font-sans);
  color: var(--cyan-300);
}

body.sdo-landing-page .tpl-hero__title {
  margin: 0;
  font: 600 32px/44px var(--font-sans);
  color: var(--tpl-hero-ink);
}
body.sdo-landing-page .tpl-hero__title b { color: var(--cyan); font-weight: 800; }

body.sdo-landing-page .tpl-hero__lead {
  margin: 0;
  font: 400 16px/32px var(--font-sans);
  color: var(--tpl-hero-ink-2);
  max-inline-size: 52ch;
}

body.sdo-landing-page .tpl-hero__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

body.sdo-landing-page .tpl-hero__media {
  inline-size: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

/* Player shell — bezel, chrome bar, then the film */
body.sdo-landing-page .tpl-hero__bezel {
  position: relative;
  inline-size: 100%;
  max-inline-size: 560px;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #0A1B30;
  border: 1px solid #1D3A59;
  box-shadow: var(--shadow-3);
}

body.sdo-landing-page .tpl-hero__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: #0E2338;
  border-block-end: 1px solid #1D3A59;
}
body.sdo-landing-page .tpl-hero__dots { display: inline-flex; gap: 6px; }
body.sdo-landing-page .tpl-hero__dots i {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: #143050;
}
body.sdo-landing-page .tpl-hero__bar span {
  font: 400 12px/16px var(--font-sans);
  color: #8AA2B9;
}

body.sdo-landing-page .tpl-hero__screen {
  position: relative;
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  padding: 0;
  margin: 0;
  border: 0;
  background: #040C16;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  text-align: inherit;
  color: inherit;
}
body.sdo-landing-page .tpl-hero__screen video,
body.sdo-landing-page .tpl-hero__screen img,
body.sdo-landing-page .tpl-hero__poster {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Centred disc — decorative play affordance (click is on the whole screen) */
body.sdo-landing-page .tpl-hero__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(50%, -50%);   /* RTL: inline-start is the right edge */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 68px;
  block-size: 68px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tpl-brand);
  color: var(--tpl-on-brand);
  font-size: 20px;
  pointer-events: none;
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
body.sdo-landing-page .tpl-hero__screen:hover .tpl-hero__play,
body.sdo-landing-page .tpl-hero__screen:focus-visible .tpl-hero__play {
  background: var(--tpl-brand-hover);
  transform: translate(50%, -50%) scale(1.06);
}
body.sdo-landing-page .tpl-hero__play i { margin-inline-start: 3px; color: inherit; }
body.sdo-landing-page .tpl-hero__play[hidden] { display: none; }

body.sdo-landing-page .tpl-hero__play-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent);
}

/* Wave — the stage resolves into the next section's surface, and the cue
   sits in the trough. Drawn as a mask so it recolours with the theme. */
body.sdo-landing-page .tpl-hero__wave {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 92px;
  z-index: 1;
  pointer-events: none;
}
body.sdo-landing-page .tpl-hero__wave svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
body.sdo-landing-page .tpl-hero__wave path { fill: var(--tpl-page); }

body.sdo-landing-page .tpl-hero__cue {
  position: absolute;
  inset-block-end: 8px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  z-index: 3;
  inline-size: 48px;
  block-size: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tpl-page);
  border: 1px solid var(--border);
  color: var(--cyan);
  font-size: 16px;
  transition: transform .3s var(--ease), color .3s var(--ease);
}
body.sdo-landing-page .tpl-hero__cue:hover {
  transform: translateX(50%) translateY(3px);
  color: var(--cyan-400);
}

/* Capability chips closing the hero */
body.sdo-landing-page .tpl-hero__band {
  position: relative;
  z-index: 2;
  padding-block: 18px;
  border-block-start: 1px solid color-mix(in srgb, #F3F8FD 12%, transparent);
  background: color-mix(in srgb, #040C16 55%, transparent);
}
body.sdo-landing-page .tpl-hero__band ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.sdo-landing-page .tpl-hero__band li {
  font: 400 13.5px/24px var(--font-sans);
  color: var(--tpl-hero-ink-2);
}
body.sdo-landing-page .tpl-hero__band li::before {
  content: '';
  display: inline-block;
  inline-size: 5px;
  block-size: 5px;
  margin-inline-end: 8px;
  border-radius: 50%;
  background: var(--cyan);
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1199px) {
  body.sdo-landing-page .tpl-nav > ul { gap: 36px; }
  body.sdo-landing-page .tpl-nav > ul > li:not(:last-child) > a::before,
  body.sdo-landing-page .tpl-nav > ul > li:not(:last-child) > button::before {
    inset-inline-end: -18px;
  }
  body.sdo-landing-page .tpl-navbar__start { gap: 32px; }
}

@media (max-width: 991px) {
  body.sdo-landing-page .tpl-nav,
  body.sdo-landing-page .tpl-topbar__menu { display: none; }

  body.sdo-landing-page { overflow-x: clip; }

  /* Login is icon-only below lg — full label crowds the bar */
  body.sdo-landing-page .tpl-navbar__end .tpl-btn span { display: none; }
  body.sdo-landing-page .tpl-navbar__end .tpl-btn {
    padding-inline: 0;
    inline-size: 40px;
    min-inline-size: 40px;
    block-size: 40px;
    justify-content: center;
  }
  body.sdo-landing-page .tpl-navbar__end .tpl-btn i { margin: 0; font-size: 15px; }
  body.sdo-landing-page .tpl-navbar__inner { block-size: 64px; }
  body.sdo-landing-page .tpl-iconbtn { block-size: 40px; min-inline-size: 40px; }

  /* Without the secondary menu, the cyan strip is short — phone only */
  body.sdo-landing-page .tpl-topbar { block-size: 40px; }
  body.sdo-landing-page .tpl-topbar__end {
    gap: 10px;
    inline-size: auto;
    flex: 1;
    padding-inline-start: 28px;
    justify-content: flex-end;
  }
  body.sdo-landing-page .tpl-topbar__end .tpl-topbar__fact:first-child { display: none; }

  body.sdo-landing-page .tpl-hero__inner { flex-direction: column; min-block-size: 0; }
  body.sdo-landing-page .tpl-hero__copy,
  body.sdo-landing-page .tpl-hero__media { inline-size: 100%; }
  body.sdo-landing-page .tpl-hero__copy { padding-block: 48px 8px; gap: 16px; }
  body.sdo-landing-page .tpl-hero__bezel { max-inline-size: none; }
  body.sdo-landing-page .tpl-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  body.sdo-landing-page .tpl-hero__actions .tpl-btn {
    inline-size: 100%;
    justify-content: center;
  }
}

@media (max-width: 575px) {
  body.sdo-landing-page { --tpl-gutter: 12px; }

  body.sdo-landing-page .tpl-topbar { block-size: 38px; }
  body.sdo-landing-page .tpl-topbar__end {
    gap: 8px;
    inline-size: auto;
    flex: 1;
    padding-inline-start: 20px;
    min-inline-size: 0;
    justify-content: flex-end;
  }
  /* Hours clip on narrow cyan strip — keep phone only */
  body.sdo-landing-page .tpl-topbar__end .tpl-topbar__fact:first-child { display: none; }
  body.sdo-landing-page .tpl-topbar__fact { gap: 6px; }
  body.sdo-landing-page .tpl-topbar__fact .t {
    font-size: 12px;
    line-height: 1.2;
  }
  body.sdo-landing-page .tpl-navbar__start { gap: 10px; }
  body.sdo-landing-page .tpl-brand img,
  body.sdo-landing-page .tpl-brand svg { inline-size: 96px; }
  body.sdo-landing-page .tpl-navbar__end { gap: 4px; }

  body.sdo-landing-page .tpl-hero { min-block-size: 0; padding-inline: 0; }
  body.sdo-landing-page .tpl-hero__copy { padding: 32px 16px 8px; }
  body.sdo-landing-page .tpl-hero__title { font-size: 24px; line-height: 36px; }
  body.sdo-landing-page .tpl-hero__lead { font-size: 14px; line-height: 26px; }
  body.sdo-landing-page .tpl-btn { block-size: 42px; min-block-size: 42px; font-size: 13.5px; padding-inline: 16px; }
  /* Keep header login a 40px icon disc — do not inherit the full-width CTA padding */
  body.sdo-landing-page .tpl-navbar__end .tpl-btn {
    padding-inline: 0;
    inline-size: 40px;
    min-inline-size: 40px;
    max-inline-size: 40px;
    block-size: 40px;
    min-block-size: 40px;
  }

  body.sdo-landing-page .tpl-drawer {
    inline-size: calc(100% - 32px);
    max-inline-size: 320px;
    padding: 14px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
  }
  body.sdo-landing-page .tpl-drawer__lead { font-size: 12px; line-height: 20px; }
  body.sdo-landing-page .tpl-drawer__nav > ul > li > a { min-block-size: 36px; font-size: 13.5px; }
  body.sdo-landing-page .tpl-drawer__contact { padding: 12px; gap: 8px; }
  body.sdo-landing-page .tpl-drawer__social a { inline-size: 36px; block-size: 36px; min-inline-size: 36px; font-size: 14px; }

  body.sdo-landing-page .tpl-title__h { font-size: 20px; line-height: 30px; }
  body.sdo-landing-page .tpl-title__lead { font-size: 15px; line-height: 26px; }
}

/* Short phones (SE / small Android): drop lead + social so the sheet never scrolls */
@media (max-width: 991px) and (max-height: 700px) {
  body.sdo-landing-page .tpl-drawer__lead { display: none; }
  body.sdo-landing-page .tpl-drawer__social { display: none; }
  body.sdo-landing-page .tpl-drawer__nav > ul > li > a { min-block-size: 34px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. PILLARS — the template's staggered card grid
   Two full-height columns hold a card plus two ghost plates; the two short
   columns hold a card each. Wrapping is COLUMN-wise: the list is a fixed
   height and items flow top-to-bottom, then start a new column.
   ═══════════════════════════════════════════════════════════════════════════ */

body.sdo-landing-page .tpl-pillars { background: var(--tpl-page); padding-inline: 10px; }

body.sdo-landing-page .tpl-pillars__inner {
  display: flex;
  align-items: center;
  padding-block: 72px 24px;
}

body.sdo-landing-page .tpl-pillars__aside {
  inline-size: 45%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
body.sdo-landing-page .tpl-pillars__aside .tpl-title { align-items: center; }
body.sdo-landing-page .tpl-pillars__aside .tpl-title__h,
body.sdo-landing-page .tpl-pillars__aside .tpl-title__rules { justify-content: center; }

body.sdo-landing-page .tpl-pillars__art {
  inline-size: 100%;
  max-inline-size: 340px;
  margin-block-start: 28px;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  border: 1px dashed var(--border);
  background: var(--tpl-band);
  display: grid;
  place-items: center;
  color: var(--tpl-ink-3);
  font-size: 13px;
  text-align: center;
  padding: 16px;
}
body.sdo-landing-page .tpl-pillars__art img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  border-radius: var(--r-lg);
}

body.sdo-landing-page .tpl-pillars__main { inline-size: 55%; padding: 10px; }
body.sdo-landing-page .tpl-pillars__track { overflow: hidden; }

body.sdo-landing-page .tpl-pillars__list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: space-between;
  gap: 24px;
  block-size: 552px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.sdo-landing-page .tpl-pillars__cell {
  flex: 0 0 auto;
  inline-size: calc((100% - 48px) / 3);
}
body.sdo-landing-page .tpl-pillars__cell--tall { block-size: 100%; }
body.sdo-landing-page .tpl-pillars__cell--half { block-size: calc(50% - 12px); }

/* Ghost plates above and below the tall cards — the template's rhythm */
body.sdo-landing-page .tpl-pillars__cell--tall::before,
body.sdo-landing-page .tpl-pillars__cell--tall::after {
  content: '';
  display: block;
  block-size: 264px;
  border-radius: 32px;
}
body.sdo-landing-page .tpl-pillars__cell--tall::before { margin-block-end: 24px; }
body.sdo-landing-page .tpl-pillars__cell--tall::after { margin-block-start: 24px; }
body.sdo-landing-page .tpl-pillars__cell--tall.is-a::before {
  margin-block-start: -93px;
  background: color-mix(in srgb, var(--cyan) 7%, transparent);
}
body.sdo-landing-page .tpl-pillars__cell--tall.is-a::after {
  background: color-mix(in srgb, var(--tpl-ink-3) 8%, transparent);
}
body.sdo-landing-page .tpl-pillars__cell--tall.is-d::before {
  margin-block-start: -175px;
  background: color-mix(in srgb, var(--tpl-ink-3) 8%, transparent);
}
body.sdo-landing-page .tpl-pillars__cell--tall.is-d::after {
  background: color-mix(in srgb, var(--cyan) 7%, transparent);
}

body.sdo-landing-page .tpl-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  block-size: 264px;
  padding: 18px;
  border-radius: 32px;
  text-align: center;
}
body.sdo-landing-page .tpl-pillar h3 {
  margin: 0 0 8px;
  font: 800 20px/32px var(--font-sans);
}
body.sdo-landing-page .tpl-pillar .rule {
  inline-size: 60%;
  block-size: 1px;
  display: flex;
}
body.sdo-landing-page .tpl-pillar p { margin: 0; font: 400 15px/28px var(--font-sans); }

/* Four weights so adjacent cards never read as one block */
body.sdo-landing-page .tpl-pillar--brand { background: var(--tpl-brand); color: var(--tpl-on-brand); }
body.sdo-landing-page .tpl-pillar--brand .rule { background: color-mix(in srgb, var(--tpl-on-brand) 28%, transparent); }
body.sdo-landing-page .tpl-pillar--pale { background: var(--cyan-100); color: var(--navy-850); }
body.sdo-landing-page .tpl-pillar--pale .rule { background: color-mix(in srgb, var(--navy-850) 20%, transparent); }
/* Always-dark plate — must use --tpl-on-deep (theme ink goes black in light mode) */
body.sdo-landing-page .tpl-pillar--deep { background: var(--tpl-deep); color: var(--tpl-on-deep); }
body.sdo-landing-page .tpl-pillar--deep .rule { background: color-mix(in srgb, var(--tpl-on-deep) 22%, transparent); }
body.sdo-landing-page .tpl-pillar--slate { background: var(--tpl-slate); color: var(--tpl-on-deep); }
body.sdo-landing-page .tpl-pillar--slate .rule { background: color-mix(in srgb, var(--tpl-on-deep) 22%, transparent); }

/* ═══════════════════════════════════════════════════════════════════════════
   9. PROBLEM — four plain cards on the band
   ═══════════════════════════════════════════════════════════════════════════ */

body.sdo-landing-page .tpl-problem { background: var(--tpl-band); padding-block: 72px; }
body.sdo-landing-page .tpl-problem__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-block-start: 40px;
}
body.sdo-landing-page .tpl-problem__card {
  padding: 28px 24px;
  background: var(--tpl-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
body.sdo-landing-page .tpl-problem__card i {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  margin-block-end: 16px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--cyan) 12%, transparent);
  color: var(--cyan);
  font-size: 20px;
}
body.sdo-landing-page .tpl-problem__card h3 {
  margin: 0 0 8px;
  font: 700 17px/28px var(--font-sans);
  color: var(--tpl-ink-0);
}
body.sdo-landing-page .tpl-problem__card p {
  margin: 0;
  font: 400 14px/28px var(--font-sans);
  color: var(--tpl-ink-2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. WHY — the template's overlapping card, with the brand rail beside it
   ═══════════════════════════════════════════════════════════════════════════ */

body.sdo-landing-page .tpl-why {
  position: relative;
  margin-block: 100px 130px;
  padding-inline: 16px;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--tpl-page) 82%, transparent), color-mix(in srgb, var(--tpl-page) 82%, transparent)),
    radial-gradient(70% 120% at 20% 0%, color-mix(in srgb, var(--cyan) 22%, transparent), transparent 70%),
    var(--tpl-raised);
}

body.sdo-landing-page .tpl-why__inner {
  position: relative;
  display: flex;
  align-items: stretch;
  min-block-size: 310px;
}

body.sdo-landing-page .tpl-why__card {
  position: relative;
  inline-size: 35%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  margin-block: -50px -42px;
  overflow: hidden;
  background: var(--tpl-card);
  border: 1px solid var(--border);
  border-radius: 32px;
  box-shadow: var(--shadow-3);
}
body.sdo-landing-page .tpl-why__top { padding: 26px 26px 0; display: flex; flex-direction: column; gap: 20px; }
body.sdo-landing-page .tpl-why__top .tpl-title__h { font-size: 20px; line-height: 32px; font-weight: 700; }
body.sdo-landing-page .tpl-why__top p { margin: 0; font: 400 15px/30px var(--font-sans); color: var(--tpl-ink-2); }

body.sdo-landing-page .tpl-why__stats { display: flex; }
body.sdo-landing-page .tpl-why__stat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px;
}
body.sdo-landing-page .tpl-why__stat--a { flex: 0 0 46.7%; background: var(--tpl-brand); color: var(--tpl-on-brand); }
body.sdo-landing-page .tpl-why__stat--b { flex: 0 0 53.3%; background: var(--tpl-deep); color: var(--tpl-on-deep); }
body.sdo-landing-page .tpl-why__stat i {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  flex: none;
  border-radius: var(--r-md);
  font-size: 18px;
}
body.sdo-landing-page .tpl-why__stat--a i { background: color-mix(in srgb, var(--tpl-on-brand) 18%, transparent); color: var(--tpl-on-brand); }
body.sdo-landing-page .tpl-why__stat--b i { background: color-mix(in srgb, var(--cyan) 16%, transparent); color: var(--cyan-300); }
body.sdo-landing-page .tpl-why__stat .n { font: 800 22px/26px var(--font-sans); }
body.sdo-landing-page .tpl-why__stat .l { font: 400 13px/22px var(--font-sans); }
body.sdo-landing-page .tpl-why__stat--a .n,
body.sdo-landing-page .tpl-why__stat--a .l { color: var(--tpl-on-brand); }
body.sdo-landing-page .tpl-why__stat--b .n { color: var(--tpl-on-deep); }
body.sdo-landing-page .tpl-why__stat--b .l { color: color-mix(in srgb, var(--tpl-on-deep) 78%, transparent); }

/* Brand rail — the template's certificate strip, here the group's companies */
body.sdo-landing-page .tpl-why__rail {
  inline-size: 65%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 10px 40px 10px 10px;
}
body.sdo-landing-page .tpl-why__rail-head {
  font: 500 14px/24px var(--font-sans);
  color: var(--tpl-ink-2);
}
body.sdo-landing-page .tpl-brands { display: flex; gap: 24px; }
body.sdo-landing-page .tpl-brand-tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 10px;
  text-align: center;
  background: color-mix(in srgb, var(--tpl-ink-0) 5%, transparent);
  border: 1px solid var(--border);
  border-radius: 24px;
}
body.sdo-landing-page .tpl-brand-tile__slot {
  inline-size: 84px;
  block-size: 84px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  overflow: hidden;
}
body.sdo-landing-page .tpl-brand-tile__slot img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
body.sdo-landing-page .tpl-brand-tile .t {
  font: 400 14px/25px var(--font-sans);
  color: var(--tpl-ink-1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. COUNTERS — one pill, figures inside
   ═══════════════════════════════════════════════════════════════════════════ */

body.sdo-landing-page .tpl-counters { padding-inline: 10px; }
body.sdo-landing-page .tpl-counters__pill {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  padding: 44px;
  border-radius: 32px;
  background:
    radial-gradient(80% 140% at 85% 0%, color-mix(in srgb, var(--cyan) 26%, transparent), transparent 70%),
    var(--tpl-raised);
  border: 1px solid var(--border);
}
body.sdo-landing-page .tpl-counter {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  min-block-size: 66px;
}
body.sdo-landing-page .tpl-counter__icon {
  display: grid;
  place-items: center;
  inline-size: 50px;
  block-size: 50px;
  flex: none;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--tpl-ink-0) 10%, transparent);
  color: var(--cyan);
  font-size: 20px;
}
body.sdo-landing-page .tpl-counter__n {
  display: flex;
  align-items: center;
  gap: 2px;
  font: 800 28px/28px var(--font-sans);
  color: var(--tpl-ink-0);
}
body.sdo-landing-page .tpl-counter__l {
  font: 400 15px/28px var(--font-sans);
  color: var(--tpl-ink-1);
}

@media (max-width: 991px) {
  body.sdo-landing-page .tpl-pillars__inner { flex-direction: column; align-items: stretch; }
  body.sdo-landing-page .tpl-pillars__aside,
  body.sdo-landing-page .tpl-pillars__main { inline-size: 100%; }
  body.sdo-landing-page .tpl-pillars__list { flex-direction: row; flex-wrap: wrap; block-size: auto; align-content: normal; }
  body.sdo-landing-page .tpl-pillars__cell { inline-size: calc((100% - 24px) / 2); block-size: auto !important; }
  body.sdo-landing-page .tpl-pillars__cell--tall::before,
  body.sdo-landing-page .tpl-pillars__cell--tall::after { display: none; }

  body.sdo-landing-page .tpl-problem__grid { grid-template-columns: repeat(2, 1fr); }
  body.sdo-landing-page .tpl-why__inner { flex-direction: column; }
  body.sdo-landing-page .tpl-why__card,
  body.sdo-landing-page .tpl-why__rail { inline-size: 100%; }
  body.sdo-landing-page .tpl-why__rail { padding: 10px 0; }
  body.sdo-landing-page .tpl-counters__pill { flex-wrap: wrap; gap: 32px; }
}

@media (max-width: 575px) {
  /* Pillars: 2×2 grid — no horizontal carousel that clips off-screen */
  body.sdo-landing-page .tpl-pillars { padding-inline: 12px; overflow-x: clip; }
  body.sdo-landing-page .tpl-pillars__inner { padding-block: 36px 8px; gap: 8px; }
  body.sdo-landing-page .tpl-pillars__aside { padding: 0; }
  body.sdo-landing-page .tpl-pillars__art {
    max-inline-size: 200px;
    margin-block-start: 12px;
    aspect-ratio: 4 / 3;
    min-block-size: 0;
    font-size: 11px;
    padding: 10px;
  }
  body.sdo-landing-page .tpl-pillars__note { font-size: 14px; line-height: 26px; margin-block-start: 8px; }
  body.sdo-landing-page .tpl-pillars__main { padding: 0; }
  body.sdo-landing-page .tpl-pillars__track { overflow: visible; }
  body.sdo-landing-page .tpl-pillars__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    block-size: auto;
    flex-direction: unset;
    flex-wrap: unset;
  }
  body.sdo-landing-page .tpl-pillars__cell {
    inline-size: auto !important;
    block-size: auto !important;
    max-inline-size: none;
  }
  body.sdo-landing-page .tpl-pillar {
    block-size: auto;
    min-block-size: 0;
    padding: 16px 12px;
    gap: 10px;
    border-radius: 20px;
  }
  body.sdo-landing-page .tpl-pillar h3 { font-size: 15px; line-height: 24px; margin-block-end: 4px; }
  body.sdo-landing-page .tpl-pillar p { font-size: 12.5px; line-height: 22px; }

  body.sdo-landing-page .tpl-problem { padding-block: 40px; }
  body.sdo-landing-page .tpl-problem__grid { grid-template-columns: 1fr; gap: 12px; margin-block-start: 24px; }
  body.sdo-landing-page .tpl-problem__card { padding: 18px 16px; }
  body.sdo-landing-page .tpl-problem__card i { inline-size: 40px; block-size: 40px; margin-block-end: 10px; font-size: 16px; }

  body.sdo-landing-page .tpl-why { margin-block: 40px 48px; padding-inline: 12px; }
  body.sdo-landing-page .tpl-why__inner { min-block-size: 0; }
  body.sdo-landing-page .tpl-why__card { margin-block: 0 16px; border-radius: 20px; }
  body.sdo-landing-page .tpl-why__top { padding: 20px 18px 0; gap: 12px; }
  body.sdo-landing-page .tpl-why__stats { flex-direction: column; }
  body.sdo-landing-page .tpl-why__stat--a,
  body.sdo-landing-page .tpl-why__stat--b { flex: 1 1 auto; }
  body.sdo-landing-page .tpl-why__stat { padding: 14px 16px; }
  body.sdo-landing-page .tpl-brands {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    overflow: visible;
  }
  body.sdo-landing-page .tpl-brand-tile { flex: none; padding: 14px 8px; border-radius: 16px; }
  body.sdo-landing-page .tpl-brand-tile__slot { inline-size: 64px; block-size: 64px; }
  body.sdo-landing-page .tpl-counters { padding-inline: 12px; }
  body.sdo-landing-page .tpl-counters__pill {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 12px 10px;
    padding: 16px 14px;
    border-radius: 20px;
    inline-size: 100%;
    max-inline-size: 100%;
    box-sizing: border-box;
  }
  body.sdo-landing-page .tpl-counter {
    align-items: center;
    gap: 10px;
    min-block-size: 0;
    min-inline-size: 0;
  }
  body.sdo-landing-page .tpl-counter__icon {
    inline-size: 40px;
    block-size: 40px;
    font-size: 16px;
  }
  body.sdo-landing-page .tpl-counter__n { font-size: 22px; line-height: 22px; }
  body.sdo-landing-page .tpl-counter__l { font-size: 12.5px; line-height: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. INHERITANCE GUARDS
   site.css styles h2/h3/p inside the landing scope, so a component that sets
   colour on the CARD and expects its text to inherit loses to those element
   rules. Anything whose colour is decided by its surface says so explicitly.
   ═══════════════════════════════════════════════════════════════════════════ */

body.sdo-landing-page .tpl-pillar h3,
body.sdo-landing-page .tpl-pillar p,
body.sdo-landing-page .tpl-why__stat .n,
body.sdo-landing-page .tpl-why__stat .l,
body.sdo-landing-page .tpl-brand-tile .t,
body.sdo-landing-page .tpl-counter__n,
body.sdo-landing-page .tpl-counter__l { color: inherit; }

body.sdo-landing-page .tpl-why__stat--a,
body.sdo-landing-page .tpl-why__stat--a * { color: var(--tpl-on-brand); }
body.sdo-landing-page .tpl-why__stat--b,
body.sdo-landing-page .tpl-why__stat--b .n { color: var(--tpl-on-deep); }
body.sdo-landing-page .tpl-why__stat--b .l { color: color-mix(in srgb, var(--tpl-on-deep) 78%, transparent); }
body.sdo-landing-page .tpl-pillar--deep,
body.sdo-landing-page .tpl-pillar--deep *,
body.sdo-landing-page .tpl-pillar--slate,
body.sdo-landing-page .tpl-pillar--slate * { color: var(--tpl-on-deep); }
body.sdo-landing-page .tpl-pillar--brand,
body.sdo-landing-page .tpl-pillar--brand * { color: var(--tpl-on-brand); }
body.sdo-landing-page .tpl-counter__n { color: var(--tpl-ink-0); }
body.sdo-landing-page .tpl-counter__l { color: var(--tpl-ink-1); }
body.sdo-landing-page .tpl-brand-tile .t { color: var(--tpl-ink-1); }

/* Supporting copy under a centred title */
body.sdo-landing-page .tpl-pillars__note {
  margin: 14px 0 0;
  max-inline-size: 46ch;
  font: 400 15px/30px var(--font-sans);
  color: var(--tpl-ink-2);
}

body.sdo-landing-page .tpl-problem__lead {
  margin: 18px auto 0;
  max-inline-size: 62ch;
  text-align: center;
  font: 400 16px/32px var(--font-sans);
  color: var(--tpl-ink-2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. FEATURES — tab rail, visual + copy per area, expanding detail
   Replaces the template's project grid: the same "browse a set, open one"
   gesture, but the open state stays on the page instead of navigating away.
   ═══════════════════════════════════════════════════════════════════════════ */

body.sdo-landing-page .tpl-features { background: var(--tpl-page); padding-block: 96px 24px; }

body.sdo-landing-page .tpl-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-block: 34px 30px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--tpl-band);
  inline-size: max-content;
  margin-inline: auto;
  max-inline-size: 100%;
}

body.sdo-landing-page .tpl-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tpl-ink-2);
  font: 500 14px/22px var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
body.sdo-landing-page .tpl-tab i { font-size: 15px; }
body.sdo-landing-page .tpl-tab:hover { color: var(--tpl-ink-0); }
body.sdo-landing-page .tpl-tab.is-active {
  background: var(--tpl-brand);
  color: var(--tpl-on-brand);
}
body.sdo-landing-page .tpl-tab.is-active i { color: inherit; }

/* A panel is a two-column spread: figure on one side, list on the other */
body.sdo-landing-page .tpl-area { display: flex; gap: 32px; align-items: stretch; }
body.sdo-landing-page .tpl-area[hidden] { display: none; }

body.sdo-landing-page .tpl-area__figure {
  inline-size: 42%;
  flex: none;
  border-radius: var(--r-lg);
  border: 1px dashed var(--border);
  background: var(--tpl-band);
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
  color: var(--tpl-ink-3);
  font-size: 13px;
  min-block-size: 340px;
}
body.sdo-landing-page .tpl-area__figure img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: var(--r-lg);
}

body.sdo-landing-page .tpl-area__body { flex: 1; display: flex; flex-direction: column; gap: 12px; }
body.sdo-landing-page .tpl-area__head h3 {
  margin: 0 0 6px;
  font: 800 20px/32px var(--font-sans);
  color: var(--tpl-ink-0);
}
body.sdo-landing-page .tpl-area__head p {
  margin: 0 0 6px;
  font: 400 15px/28px var(--font-sans);
  color: var(--tpl-ink-2);
}

body.sdo-landing-page .tpl-feat {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--tpl-card);
  overflow: hidden;
  transition: border-color .25s var(--ease);
}
body.sdo-landing-page .tpl-feat:hover { border-color: var(--cyan-700); }

body.sdo-landing-page .tpl-feat__btn {
  inline-size: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  text-align: start;
  cursor: pointer;
  color: var(--tpl-ink-0);
}
body.sdo-landing-page .tpl-feat__btn .t { flex: 1; font: 600 15px/26px var(--font-sans); }
/* the description is a second line, not a continuation of the title */
body.sdo-landing-page .tpl-feat__btn .d {
  display: block;
  font: 400 13.5px/24px var(--font-sans);
  color: var(--tpl-ink-2);
}
body.sdo-landing-page .tpl-feat__chev {
  inline-size: 32px;
  block-size: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cyan) 12%, transparent);
  color: var(--cyan);
  font-size: 12px;
  transition: transform .3s var(--ease), background-color .3s var(--ease);
}
body.sdo-landing-page .tpl-feat__btn.is-open .tpl-feat__chev {
  transform: rotate(180deg);
  background: var(--tpl-brand);
  color: var(--tpl-on-brand);
}

/* The expanding panel — height is animated, so it can settle on auto */
body.sdo-landing-page .tpl-detail {
  block-size: 0;
  overflow: hidden;
  transition: block-size .35s var(--ease);
}
body.sdo-landing-page .tpl-detail__inner {
  padding: 0 16px 16px;
  border-block-start: 1px solid var(--border);
  margin-block-start: 2px;
  padding-block-start: 14px;
}
body.sdo-landing-page .tpl-detail p {
  margin: 0 0 10px;
  font: 400 14px/28px var(--font-sans);
  color: var(--tpl-ink-1);
}
body.sdo-landing-page .tpl-detail ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
body.sdo-landing-page .tpl-detail li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font: 400 13.5px/24px var(--font-sans);
  color: var(--tpl-ink-2);
}
body.sdo-landing-page .tpl-detail li i { color: var(--cyan); font-size: 12px; margin-block-start: 6px; }

@media (prefers-reduced-motion: reduce) {
  body.sdo-landing-page .tpl-detail { transition: none; }
}

@media (max-width: 991px) {
  body.sdo-landing-page .tpl-features { padding-block: 56px 16px; }
  body.sdo-landing-page .tpl-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    inline-size: 100%;
    max-inline-size: 100%;
    margin-block: 24px 20px;
    padding: 8px;
    border-radius: 20px;
    gap: 6px;
    overflow: visible;
  }
  body.sdo-landing-page .tpl-tab {
    justify-content: center;
    padding: 10px 8px;
    font-size: 13px;
    line-height: 18px;
    white-space: normal;
    text-align: center;
    min-block-size: 44px;
  }
  body.sdo-landing-page .tpl-tab i { display: none; }
  body.sdo-landing-page .tpl-area { flex-direction: column; }
  body.sdo-landing-page .tpl-area__figure { inline-size: 100%; min-block-size: 220px; }
}

@media (max-width: 575px) {
  body.sdo-landing-page .tpl-features { padding-block: 40px 12px; }
  body.sdo-landing-page .tpl-tabs {
    grid-template-columns: 1fr 1fr;
    margin-block: 18px 14px;
    padding: 6px;
    border-radius: 16px;
  }
  body.sdo-landing-page .tpl-tab {
    padding: 10px 6px;
    font-size: 12.5px;
    line-height: 17px;
  }
  body.sdo-landing-page .tpl-area { gap: 16px; }
  body.sdo-landing-page .tpl-area__figure { display: none; }
  body.sdo-landing-page .tpl-area__head h3 { font-size: 17px; line-height: 28px; }
  body.sdo-landing-page .tpl-feat__btn { padding: 12px 14px; gap: 10px; }
  body.sdo-landing-page .tpl-feat__btn .t { font-size: 14px; line-height: 22px; }
  body.sdo-landing-page .tpl-feat__btn .d { font-size: 12.5px; line-height: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. MODULES — the template's product-card grid
   Each module is a card with a tinted well on top, a category chip, the name,
   and a one-line summary. Replaces the old inventory rail, whose stylesheet
   was deleted with landing.css and left the markup unstyled.
   ═══════════════════════════════════════════════════════════════════════════ */

body.sdo-landing-page .tpl-modules {
  background: var(--tpl-band);
  padding-block: 72px 96px;
  margin-block-start: 96px;
}

body.sdo-landing-page .tpl-modules__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-block-start: 44px;
}

body.sdo-landing-page .tpl-module {
  display: flex;
  flex-direction: column;
  padding: 0 24px 18px;
  margin-block: 24px;
  background: var(--tpl-card);
  border: 1px solid var(--border);
  border-radius: 24px;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
body.sdo-landing-page .tpl-module:hover {
  border-color: var(--cyan-600);
  transform: translateY(-3px);
}

/* The well lifts above the card, exactly as the template's thumbnail does */
body.sdo-landing-page .tpl-module__well {
  display: grid;
  place-items: center;
  block-size: 120px;
  margin-block: -24px 18px;
  border-radius: 24px;
  background: var(--tpl-raised);
  color: var(--cyan);
  font-size: 34px;
}

body.sdo-landing-page .tpl-module__chip {
  display: inline-flex;
  inline-size: max-content;
  padding: 2px 11px;
  margin-block-end: 6px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--cyan) 14%, transparent);
  color: var(--brand-text);
  font: 400 13px/26px var(--font-sans);
}

body.sdo-landing-page .tpl-module h3 {
  margin: 0 0 6px;
  font: 800 16px/30px var(--font-sans);
  color: var(--tpl-ink-0);
}
body.sdo-landing-page .tpl-module p {
  margin: 0;
  font: 400 13.5px/26px var(--font-sans);
  color: var(--tpl-ink-2);
}

body.sdo-landing-page .tpl-modules__more {
  margin-block-start: 36px;
  text-align: center;
  font: 400 14px/30px var(--font-sans);
  color: var(--tpl-ink-2);
}
body.sdo-landing-page .tpl-modules__more b { color: var(--brand-text); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   15. CONTACT BANNER — the template's full-bleed accent pill
   ═══════════════════════════════════════════════════════════════════════════ */

body.sdo-landing-page .tpl-cta { padding-inline: 16px; margin-block: 0 130px; }

body.sdo-landing-page .tpl-cta__pill {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-block-size: 248px;
  padding-inline-end: 50px;
  border-radius: 32px;
  background: var(--tpl-brand);
  color: var(--tpl-on-brand);
}
/* Blueprint hatching, the dark-theme answer to the template's line art */
body.sdo-landing-page .tpl-cta__pill::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--tpl-on-brand) 10%, transparent) 0 2px,
    transparent 2px 22px);
  pointer-events: none;
}

body.sdo-landing-page .tpl-cta__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 32px 0 32px 50px;
}
body.sdo-landing-page .tpl-cta__copy h2 {
  margin: 0;
  font: 700 18px/32px var(--font-sans);
  color: color-mix(in srgb, var(--tpl-on-brand) 88%, transparent);
}
body.sdo-landing-page .tpl-cta__phone {
  font: 800 28px/44px var(--font-sans);
  color: var(--tpl-on-brand);
}

body.sdo-landing-page .tpl-cta__figure {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  inline-size: 260px;
  block-size: 216px;
  flex: none;
  display: grid;
  place-items: center;
  border-start-start-radius: 24px;
  border-start-end-radius: 24px;
  border: 1px dashed color-mix(in srgb, var(--tpl-on-brand) 36%, transparent);
  border-block-end: 0;
  color: color-mix(in srgb, var(--tpl-on-brand) 72%, transparent);
  font-size: 12px;
  text-align: center;
  padding: 12px;
}
body.sdo-landing-page .tpl-cta__figure img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  object-position: bottom;
}

@media (max-width: 991px) {
  body.sdo-landing-page .tpl-modules__grid { grid-template-columns: repeat(2, 1fr); }
  body.sdo-landing-page .tpl-cta__pill { flex-direction: column; align-items: stretch; padding-inline-end: 0; }
  body.sdo-landing-page .tpl-cta__copy { padding: 32px 24px; }
  body.sdo-landing-page .tpl-cta__figure { align-self: center; }
}

@media (max-width: 575px) {
  body.sdo-landing-page .tpl-modules { padding-block: 40px 48px; margin-block-start: 40px; }
  body.sdo-landing-page .tpl-modules__grid { grid-template-columns: 1fr 1fr; gap: 12px; margin-block-start: 24px; }
  body.sdo-landing-page .tpl-module {
    margin-block: 16px;
    padding: 0 12px 14px;
    border-radius: 16px;
  }
  body.sdo-landing-page .tpl-module__well {
    block-size: 72px;
    margin-block: -16px 12px;
    border-radius: 16px;
    font-size: 24px;
  }
  body.sdo-landing-page .tpl-module h3 { font-size: 14px; line-height: 22px; }
  body.sdo-landing-page .tpl-module p { font-size: 12px; line-height: 20px; }
  body.sdo-landing-page .tpl-module__chip { font-size: 11px; line-height: 20px; padding: 1px 8px; }

  body.sdo-landing-page .tpl-cta { margin-block-end: 48px; }
  body.sdo-landing-page .tpl-cta__pill { min-block-size: 0; border-radius: 24px; }
  body.sdo-landing-page .tpl-cta__copy { padding: 24px 18px 8px; }
  body.sdo-landing-page .tpl-cta__phone { font-size: 20px; line-height: 30px; }
  body.sdo-landing-page .tpl-cta__copy .tpl-btn { inline-size: 100%; justify-content: center; }
  body.sdo-landing-page .tpl-cta__figure {
    inline-size: min(200px, 60vw);
    block-size: 160px;
  }
}

/* Light button — for use ON the accent banner */
body.sdo-landing-page .tpl-btn--light {
  background: var(--tpl-on-brand);
  color: var(--tpl-brand);
  border-color: var(--tpl-on-brand);
}
body.sdo-landing-page .tpl-btn--light:hover {
  background: #F3F8FD;
  color: var(--cyan-800);
}

/* ═══════════════════════════════════════════════════════════════════════════
   16. AGENTS — the template's team section
   Tabs group the ten agents by domain; the cards use the template's portrait
   shape; selecting one opens a detail panel in place rather than navigating.
   ═══════════════════════════════════════════════════════════════════════════ */

body.sdo-landing-page .tpl-agents {
  position: relative;
  padding-block: 63px;
  margin-block-end: 130px;
  background: var(--tpl-deep);
  overflow: hidden;
}
/* Faint grid, the dark-theme stand-in for the template's building photograph */
body.sdo-landing-page .tpl-agents::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, #F3F8FD 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, #F3F8FD 4%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
body.sdo-landing-page .tpl-agents > * { position: relative; z-index: 1; }

body.sdo-landing-page .tpl-agents .tpl-title__h { color: var(--tpl-on-deep); }
body.sdo-landing-page .tpl-agents .tpl-title__lead { color: color-mix(in srgb, var(--tpl-on-deep) 71%, transparent); }
body.sdo-landing-page .tpl-agents .tpl-title__rules span:last-child { background: var(--tpl-on-deep); }

/* Tab rail */
body.sdo-landing-page .tpl-agents__tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 36px 32px;
}
body.sdo-landing-page .tpl-agents__tab {
  padding: 10px 22px;
  border-radius: 50px;
  border: 1px solid color-mix(in srgb, var(--tpl-on-deep) 18%, transparent);
  background: color-mix(in srgb, var(--tpl-on-deep) 8%, transparent);
  color: color-mix(in srgb, var(--tpl-on-deep) 78%, transparent);
  font: 500 14px/24px var(--font-sans);
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
body.sdo-landing-page .tpl-agents__tab:hover {
  background: color-mix(in srgb, var(--tpl-on-deep) 14%, transparent);
  color: var(--tpl-on-deep);
}
body.sdo-landing-page .tpl-agents__tab[aria-selected="true"] {
  background: var(--tpl-brand);
  border-color: var(--tpl-brand);
  color: var(--tpl-on-brand);
}

/* Card rail — the template's slider shape */
body.sdo-landing-page .tpl-agents__panel[hidden] { display: none; }
body.sdo-landing-page .tpl-agents__rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
body.sdo-landing-page .tpl-agents__rail--3 { grid-template-columns: repeat(3, 1fr); max-inline-size: 980px; margin-inline: auto; }

body.sdo-landing-page .tpl-agent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 16px;
  text-align: center;
  background: color-mix(in srgb, var(--tpl-on-deep) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--tpl-on-deep) 14%, transparent);
  border-block-end: 2px solid var(--tpl-on-deep);
  border-radius: 24px;
  cursor: pointer;
  transition: background .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
body.sdo-landing-page .tpl-agent:hover {
  background: color-mix(in srgb, var(--tpl-on-deep) 14%, transparent);
  transform: translateY(-4px);
}
body.sdo-landing-page .tpl-agent[aria-expanded="true"] {
  background: color-mix(in srgb, var(--cyan) 20%, transparent);
  border-color: var(--cyan);
  border-block-end-color: var(--cyan);
}

body.sdo-landing-page .tpl-agent__face {
  inline-size: 96px;
  block-size: 96px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  margin-block-end: 8px;
  background: color-mix(in srgb, var(--cyan) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan) 32%, transparent);
  color: var(--cyan-300);
  font-size: 34px;
}
body.sdo-landing-page .tpl-agent__name {
  margin: 0;
  font: 500 15px/28px var(--font-sans);
  color: var(--tpl-on-deep);
}
body.sdo-landing-page .tpl-agent__tag {
  font: 400 12.5px/22px var(--font-sans);
  color: color-mix(in srgb, var(--tpl-on-deep) 52%, transparent);
}

/* Detail — opens in place, under the rail */
body.sdo-landing-page .tpl-agent-detail {
  display: grid;
  grid-template-rows: 0fr;
  margin-block-start: 0;
  opacity: 0;
  transition: grid-template-rows .45s var(--ease), opacity .3s var(--ease),
              margin-block-start .45s var(--ease);
}
body.sdo-landing-page .tpl-agent-detail[data-open="true"] {
  grid-template-rows: 1fr;
  margin-block-start: 24px;
  opacity: 1;
}
body.sdo-landing-page .tpl-agent-detail__clip { overflow: hidden; }

body.sdo-landing-page .tpl-agent-detail__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  padding: 28px;
  background: color-mix(in srgb, var(--tpl-on-deep) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan) 28%, transparent);
  border-radius: 24px;
}
body.sdo-landing-page .tpl-agent-detail h4 {
  margin: 0 0 6px;
  font: 800 20px/34px var(--font-sans);
  color: var(--tpl-on-deep);
}
body.sdo-landing-page .tpl-agent-detail__desc {
  margin: 0 0 16px;
  font: 400 14px/30px var(--font-sans);
  color: color-mix(in srgb, var(--tpl-on-deep) 76%, transparent);
}
body.sdo-landing-page .tpl-agent-detail__bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
body.sdo-landing-page .tpl-agent-detail__bullets li {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 13.5px/26px var(--font-sans);
  color: color-mix(in srgb, var(--tpl-on-deep) 82%, transparent);
}
body.sdo-landing-page .tpl-agent-detail__bullets li::before {
  content: '';
  inline-size: 6px; block-size: 6px; flex: none;
  border-radius: 50%;
  background: var(--cyan);
}

/* The sample exchange, as a small transcript */
body.sdo-landing-page .tpl-agent-detail__chat {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 18px;
  border-radius: 16px;
  background: color-mix(in srgb, #040C16 42%, transparent);
  border: 1px solid color-mix(in srgb, var(--tpl-on-deep) 12%, transparent);
}
body.sdo-landing-page .tpl-agent-detail__q,
body.sdo-landing-page .tpl-agent-detail__a {
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  font: 400 13.5px/26px var(--font-sans);
}
body.sdo-landing-page .tpl-agent-detail__q {
  background: color-mix(in srgb, var(--tpl-on-deep) 10%, transparent);
  color: color-mix(in srgb, var(--tpl-on-deep) 84%, transparent);
  justify-self: end;
}
body.sdo-landing-page .tpl-agent-detail__a {
  background: color-mix(in srgb, var(--cyan) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent);
  color: var(--tpl-on-deep);
}
body.sdo-landing-page .tpl-agent-detail__em {
  font: 500 13px/24px var(--font-sans);
  color: var(--cyan-300);
}

@media (max-width: 991px) {
  body.sdo-landing-page .tpl-agents__rail,
  body.sdo-landing-page .tpl-agents__rail--3 { grid-template-columns: repeat(2, 1fr); }
  body.sdo-landing-page .tpl-agent-detail__inner { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  body.sdo-landing-page .tpl-agents {
    padding-block: 36px;
    margin-block-end: 48px;
    overflow-x: clip;
  }
  body.sdo-landing-page .tpl-agents__tabs {
    margin-block: 20px 16px;
    gap: 6px;
  }
  body.sdo-landing-page .tpl-agents__tab {
    flex: 1 1 auto;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 20px;
    min-block-size: 40px;
  }
  /* Keep a contained 2-col grid — no negative-margin carousel that spills the page */
  body.sdo-landing-page .tpl-agents__rail,
  body.sdo-landing-page .tpl-agents__rail--3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    overflow: visible;
    padding-inline: 0;
    margin-inline: 0;
    max-inline-size: none;
  }
  body.sdo-landing-page .tpl-agent {
    flex: none;
    padding: 16px 10px;
    gap: 6px;
    border-radius: 16px;
  }
  body.sdo-landing-page .tpl-agent:hover { transform: none; }
  body.sdo-landing-page .tpl-agent__face {
    inline-size: 64px;
    block-size: 64px;
    margin-block-end: 4px;
    font-size: 24px;
  }
  body.sdo-landing-page .tpl-agent__name { font-size: 13px; line-height: 22px; }
  body.sdo-landing-page .tpl-agent__tag { font-size: 11.5px; line-height: 18px; }
  body.sdo-landing-page .tpl-agent-detail__inner { padding: 16px; gap: 16px; border-radius: 16px; }
  body.sdo-landing-page .tpl-agent-detail h4 { font-size: 17px; line-height: 28px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   17. ARTICLES — Swiper carousel (local plugins/swiper)
   Mobile peeks the next card; md+ shows 2; lg+ shows 3. Cards are equal-height
   flex columns so the footer sits on a shared baseline.
   ═══════════════════════════════════════════════════════════════════════════ */

body.sdo-landing-page .tpl-articles {
  background: var(--tpl-band);
  padding-block: 80px 56px;
  margin-block-end: 130px;
  overflow-x: clip;
}

body.sdo-landing-page .tpl-articles__stage {
  position: relative;
  margin-block-start: 34px;
}

body.sdo-landing-page .tpl-articles__swiper {
  overflow: hidden;
  padding-block-end: 36px;
}

body.sdo-landing-page .tpl-articles__swiper .swiper-slide {
  block-size: auto;
  display: flex;
}

body.sdo-landing-page .tpl-article {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  background: var(--tpl-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
body.sdo-landing-page .tpl-article:hover {
  border-color: var(--cyan-600);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--tpl-ink-0) 8%, transparent);
}

body.sdo-landing-page .tpl-article__thumb {
  display: flex;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--tpl-raised);
  aspect-ratio: 16 / 10;
  flex: none;
}
body.sdo-landing-page .tpl-article__thumb img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform .45s var(--ease);
}
body.sdo-landing-page .tpl-article:hover .tpl-article__thumb img {
  transform: scale(1.04);
}
body.sdo-landing-page .tpl-article__thumb--empty {
  display: grid;
  place-items: center;
  color: var(--cyan);
  font-size: 28px;
  min-block-size: 160px;
}

body.sdo-landing-page .tpl-article__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 16px 0;
  min-block-size: 0;
}

body.sdo-landing-page .tpl-article__cat {
  margin: 0 0 6px;
  font: 500 12px/20px var(--font-sans);
  color: var(--cyan);
}

body.sdo-landing-page .tpl-article__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
body.sdo-landing-page .tpl-article__title {
  margin: 0;
  font: 800 16px/28px var(--font-sans);
  color: var(--tpl-ink-0);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}
body.sdo-landing-page .tpl-article__link:hover .tpl-article__title { color: var(--cyan); }

body.sdo-landing-page .tpl-article__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-block-start: auto;
  padding-block-start: 14px;
  padding-inline-start: 0;
  border-block-start: 1px solid var(--border);
}
body.sdo-landing-page .tpl-article__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-inline-start: 4px;
  font: 400 12.5px/22px var(--font-sans);
  color: var(--tpl-ink-3);
}
body.sdo-landing-page .tpl-article__go {
  inline-size: 48px;
  block-size: 48px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--tpl-brand);
  color: var(--tpl-on-brand);
  border-start-end-radius: 20px;
  font-size: 15px;
  transition: background .3s var(--ease);
}
body.sdo-landing-page .tpl-article:hover .tpl-article__go { background: var(--tpl-brand-hover); }

/* Pagination + nav */
body.sdo-landing-page .tpl-articles__dots {
  position: static;
  margin-block-start: 8px;
  inset-inline: auto;
}
body.sdo-landing-page .tpl-articles__dots .swiper-pagination-bullet {
  inline-size: 8px;
  block-size: 8px;
  margin-inline: 4px !important;
  background: var(--tpl-ink-3);
  opacity: .45;
  transition: inline-size .25s var(--ease), opacity .25s var(--ease), background .25s var(--ease);
}
body.sdo-landing-page .tpl-articles__dots .swiper-pagination-bullet-active {
  inline-size: 22px;
  border-radius: 99px;
  background: var(--cyan);
  opacity: 1;
}

body.sdo-landing-page .tpl-articles__nav {
  position: absolute;
  inset-block-start: 42%;
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--tpl-card);
  color: var(--tpl-ink-1);
  cursor: pointer;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--tpl-ink-0) 10%, transparent);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
body.sdo-landing-page .tpl-articles__nav:hover {
  background: var(--tpl-brand);
  border-color: var(--tpl-brand);
  color: var(--tpl-on-brand);
}
body.sdo-landing-page .tpl-articles__nav--prev { inset-inline-start: -8px; }
body.sdo-landing-page .tpl-articles__nav--next { inset-inline-end: -8px; }
body.sdo-landing-page .tpl-articles__nav.swiper-button-disabled {
  opacity: .35;
  pointer-events: none;
}

body.sdo-landing-page .tpl-articles__all { margin-block-start: 28px; text-align: center; }

@media (max-width: 991px) {
  body.sdo-landing-page .tpl-articles__nav--prev { inset-inline-start: 0; }
  body.sdo-landing-page .tpl-articles__nav--next { inset-inline-end: 0; }
}

@media (max-width: 575px) {
  body.sdo-landing-page .tpl-articles { padding-block: 40px 32px; margin-block-end: 48px; }
  body.sdo-landing-page .tpl-articles__stage { margin-block-start: 20px; }
  body.sdo-landing-page .tpl-articles__swiper { padding-block-end: 28px; }
  body.sdo-landing-page .tpl-article { border-radius: 16px; }
  body.sdo-landing-page .tpl-article:hover { box-shadow: none; }
  body.sdo-landing-page .tpl-article:hover .tpl-article__thumb img { transform: none; }
  body.sdo-landing-page .tpl-article__thumb { aspect-ratio: 16 / 9; }
  body.sdo-landing-page .tpl-article__thumb--empty { min-block-size: 120px; font-size: 22px; }
  body.sdo-landing-page .tpl-article__body { padding: 12px 12px 0; }
  body.sdo-landing-page .tpl-article__title { font-size: 15px; line-height: 26px; }
  body.sdo-landing-page .tpl-article__foot { padding-block-start: 10px; }
  body.sdo-landing-page .tpl-article__go {
    inline-size: 44px;
    block-size: 44px;
    border-start-end-radius: 16px;
    font-size: 14px;
  }
  /* On phones the peek handles browsing — hide side arrows to reduce chrome */
  body.sdo-landing-page .tpl-articles__nav { display: none; }
  body.sdo-landing-page .tpl-articles__all { margin-block-start: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  body.sdo-landing-page .tpl-article__thumb img,
  body.sdo-landing-page .tpl-article { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   18. FOOTER — the template's closing composition
   An accent pill overlapping the footer plate, then link columns with square
   bullets, contact cards, socials, and a rule-separated about row.
   ═══════════════════════════════════════════════════════════════════════════ */

body.sdo-landing-page .tpl-foot-cta {
  position: relative;
  z-index: 2;
  padding-inline: 16px;
  margin-block-end: -42px;   /* the pill rides the seam, as in the template */
}
body.sdo-landing-page .tpl-foot-cta__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px;
  border-radius: 50px;
  background: var(--tpl-brand);
  color: var(--tpl-on-brand);
}
body.sdo-landing-page .tpl-foot-cta__side { display: flex; align-items: center; gap: 26px; }
body.sdo-landing-page .tpl-foot-cta__side--end { justify-content: flex-end; gap: 20px; }
body.sdo-landing-page .tpl-foot-cta__bar h2 {
  margin: 0;
  font: 800 20px/29px var(--font-sans);
  color: var(--tpl-on-brand);
}
body.sdo-landing-page .tpl-foot-cta__phone {
  font: 600 20px/29px var(--font-sans);
  color: var(--tpl-on-brand);
}
body.sdo-landing-page .tpl-foot-cta__rule {
  inline-size: 1px;
  block-size: 42px;
  background: color-mix(in srgb, var(--tpl-on-brand) 32%, transparent);
}
body.sdo-landing-page .tpl-foot-cta__logo { block-size: 34px; inline-size: auto; }
/* Prefer light logo plate on the brand bar when both exist */
body.sdo-landing-page .tpl-foot-cta .sdo-landing-logo--for-light { display: none; }
body.sdo-landing-page .tpl-foot-cta .sdo-landing-logo--for-dark { display: inline-block; }

body.sdo-landing-page .tpl-footer { background: var(--tpl-deep); padding-inline: 16px; }
body.sdo-landing-page .tpl-footer__main {
  display: flex;
  gap: 0 106px;
  padding-block: 88px 44px;
  max-inline-size: var(--tpl-container);
  margin-inline: auto;
}

body.sdo-landing-page .tpl-footer__links { display: flex; gap: 40px; }
body.sdo-landing-page .tpl-footer__col { display: flex; flex-direction: column; gap: 20px; inline-size: 116px; }
body.sdo-landing-page .tpl-footer h3 {
  margin: 0;
  font: 600 16px/32px var(--font-sans);
  color: var(--tpl-on-deep);
  white-space: nowrap;
}
body.sdo-landing-page .tpl-footer .tpl-title__rules span:last-child { background: var(--tpl-on-deep); }

body.sdo-landing-page .tpl-footer__list { list-style: none; margin: 0; padding: 0; }
body.sdo-landing-page .tpl-footer__list li { padding-block-end: 5px; }
body.sdo-landing-page .tpl-footer__list li + li { margin-block-start: 5px; }
body.sdo-landing-page .tpl-footer__list a {
  display: flex;
  align-items: center;
  gap: 5px;
  font: 400 14px/32px var(--font-sans);
  color: color-mix(in srgb, var(--tpl-on-deep) 70%, transparent);
  transition: color .3s var(--ease);
}
body.sdo-landing-page .tpl-footer__list a:hover { color: var(--tpl-on-deep); }
body.sdo-landing-page .tpl-footer__list a::before {
  content: '';
  inline-size: 8px; block-size: 6px; flex: none;
  background: color-mix(in srgb, var(--tpl-on-deep) 70%, transparent);
}

body.sdo-landing-page .tpl-footer__wide { flex: 1; display: flex; flex-direction: column; gap: 12px; }
body.sdo-landing-page .tpl-footer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
body.sdo-landing-page .tpl-footer__head .tpl-title { inline-size: max-content; gap: 8px; }
body.sdo-landing-page .tpl-footer__arrow { display: flex; color: var(--cyan-300); font-size: 20px; }

body.sdo-landing-page .tpl-offices { display: flex; gap: 24px; }
body.sdo-landing-page .tpl-office {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--tpl-on-deep) 10%, transparent);
}
body.sdo-landing-page .tpl-office > div { inline-size: 100%; }
body.sdo-landing-page .tpl-office__dot {
  inline-size: 12px; block-size: 12px; border-radius: 4px; background: var(--cyan);
}
body.sdo-landing-page .tpl-office h4 {
  margin: 0;
  font: 800 16px/28px var(--font-sans);
  color: var(--tpl-on-deep);
}
body.sdo-landing-page .tpl-office__label {
  font: 400 14px/23px var(--font-sans);
  color: color-mix(in srgb, var(--tpl-on-deep) 55%, transparent);
}
body.sdo-landing-page .tpl-office__val {
  font: 500 14px/23px var(--font-sans);
  color: var(--tpl-on-deep);
}
body.sdo-landing-page .tpl-office__block { margin-block-start: 10px; }

body.sdo-landing-page .tpl-footer__certs { display: flex; flex-direction: column; gap: 8px; inline-size: 271px; }
body.sdo-landing-page .tpl-certs-row { display: flex; justify-content: space-between; gap: 8px; }
body.sdo-landing-page .tpl-certs-row .tpl-cert {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 16px 4px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--tpl-on-deep) 13%, transparent);
  color: color-mix(in srgb, var(--tpl-on-deep) 58%, transparent);
  font-size: 11px;
  text-align: center;
  min-block-size: 84px;
}
body.sdo-landing-page .tpl-socials { display: flex; justify-content: space-between; gap: 8px; margin-block-start: 22px; }
body.sdo-landing-page .tpl-socials a {
  inline-size: 50px; block-size: 50px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tpl-on-deep) 13%, transparent);
  color: var(--tpl-on-deep);
  font-size: 18px;
  transition: background .3s var(--ease);
}
body.sdo-landing-page .tpl-socials a:hover { background: var(--tpl-brand); color: var(--tpl-on-brand); }

body.sdo-landing-page .tpl-footer__about { background: var(--tpl-deep); padding-inline: 16px; }
body.sdo-landing-page .tpl-footer__about-inner { max-inline-size: var(--tpl-container); margin-inline: auto; display: flex; }
body.sdo-landing-page .tpl-footer__about-row {
  flex: 1;
  display: flex;
  gap: 30px;
  align-items: flex-start;
  padding-block: 38px 40px;
  border-block-start: 1px solid color-mix(in srgb, var(--tpl-on-deep) 16%, transparent);
}
body.sdo-landing-page .tpl-footer__about-row h4 {
  flex: none; margin: 0;
  font: 900 18px/32px var(--font-sans);
  color: var(--tpl-on-deep);
}
body.sdo-landing-page .tpl-footer__about-row p {
  margin: 0;
  font: 400 14px/28px var(--font-sans);
  color: color-mix(in srgb, var(--tpl-on-deep) 73%, transparent);
}
body.sdo-landing-page .tpl-footer__legal {
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  padding-block: 18px;
  border-block-start: 1px solid color-mix(in srgb, var(--tpl-on-deep) 16%, transparent);
  font: 400 13px/26px var(--font-sans);
  color: color-mix(in srgb, var(--tpl-on-deep) 62%, transparent);
}
body.sdo-landing-page .tpl-footer__legal a { color: inherit; }
body.sdo-landing-page .tpl-footer__legal a:hover { color: var(--tpl-on-deep); }

@media (max-width: 1199px) {
  body.sdo-landing-page .tpl-footer__main { flex-wrap: wrap; gap: 40px; }
  body.sdo-landing-page .tpl-footer__certs { inline-size: auto; }
}
@media (max-width: 991px) {
  body.sdo-landing-page .tpl-offices { flex-direction: column; gap: 10px; }
  body.sdo-landing-page .tpl-footer__about-row { flex-direction: column; gap: 8px; }

  body.sdo-landing-page .tpl-foot-cta {
    margin-block-end: -24px;
    padding-inline: 12px;
  }
  body.sdo-landing-page .tpl-foot-cta__bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 14px;
    border-radius: 22px;
    text-align: center;
  }
  body.sdo-landing-page .tpl-foot-cta__side,
  body.sdo-landing-page .tpl-foot-cta__side--end {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  body.sdo-landing-page .tpl-foot-cta__side--end {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  body.sdo-landing-page .tpl-foot-cta__rule { display: none; }
  body.sdo-landing-page .tpl-foot-cta__bar h2 {
    font-size: 16px;
    line-height: 24px;
    max-inline-size: none;
  }
  body.sdo-landing-page .tpl-foot-cta__phone { font-size: 15px; line-height: 22px; }
  body.sdo-landing-page .tpl-foot-cta__side--end .tpl-btn {
    inline-size: auto;
    min-inline-size: 140px;
    flex: 1 1 auto;
    justify-content: center;
    block-size: 40px;
    min-block-size: 40px;
    font-size: 13px;
    padding-inline: 14px;
  }

  body.sdo-landing-page .tpl-footer { padding-inline: 12px; }
  body.sdo-landing-page .tpl-footer__main {
    flex-direction: column;
    gap: 22px;
    padding-block: 48px 20px;
  }
  body.sdo-landing-page .tpl-footer__links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  body.sdo-landing-page .tpl-footer__col {
    inline-size: auto;
    flex: none;
    gap: 8px;
  }
  body.sdo-landing-page .tpl-footer h3 {
    font: 600 14px/22px var(--font-sans);
  }
  body.sdo-landing-page .tpl-footer__list li { padding-block-end: 0; }
  body.sdo-landing-page .tpl-footer__list li + li { margin-block-start: 2px; }
  body.sdo-landing-page .tpl-footer__list a {
    font: 400 13px/24px var(--font-sans);
  }
  body.sdo-landing-page .tpl-footer__arrow { display: none; }
  body.sdo-landing-page .tpl-footer__wide { gap: 8px; }
  body.sdo-landing-page .tpl-office {
    padding: 10px 12px;
    border-radius: 12px;
    gap: 6px;
  }
  body.sdo-landing-page .tpl-office h4 { font: 700 14px/22px var(--font-sans); }
  body.sdo-landing-page .tpl-office__block { margin-block-start: 4px; }
  body.sdo-landing-page .tpl-office__label,
  body.sdo-landing-page .tpl-office__val { font-size: 12.5px; line-height: 20px; }

  body.sdo-landing-page .tpl-footer__certs { gap: 8px; inline-size: auto; }
  /* Empty licence slots burn vertical space on phones — keep socials only */
  body.sdo-landing-page .tpl-footer__certs > .tpl-footer__head,
  body.sdo-landing-page .tpl-certs-row { display: none; }
  body.sdo-landing-page .tpl-socials {
    margin-block-start: 0;
    justify-content: flex-start;
    gap: 8px;
  }
  body.sdo-landing-page .tpl-socials a {
    inline-size: 40px;
    block-size: 40px;
    font-size: 15px;
  }

  body.sdo-landing-page .tpl-footer__about { padding-inline: 12px; }
  body.sdo-landing-page .tpl-footer__about-row {
    padding-block: 18px 14px;
    gap: 6px;
  }
  body.sdo-landing-page .tpl-footer__about-row h4 {
    font: 800 15px/24px var(--font-sans);
  }
  body.sdo-landing-page .tpl-footer__about-row p {
    font: 400 12.5px/22px var(--font-sans);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  body.sdo-landing-page .tpl-footer__legal {
    padding-block: 12px 16px;
    gap: 4px 12px;
    font: 400 11.5px/20px var(--font-sans);
  }
}
@media (max-width: 575px) {
  body.sdo-landing-page .tpl-foot-cta__logo { display: none; }
  body.sdo-landing-page .tpl-foot-cta__bar { padding: 12px; border-radius: 18px; gap: 8px; }
  body.sdo-landing-page .tpl-foot-cta__bar h2 { font-size: 15px; line-height: 22px; }
  body.sdo-landing-page .tpl-footer__main { gap: 16px; padding-block: 36px 12px; }
  body.sdo-landing-page .tpl-footer__links { gap: 12px; }
  body.sdo-landing-page .tpl-footer__about-row p { -webkit-line-clamp: 3; }
}