/* =============================================================
   ATHER — PUBLIC FRONTEND DESIGN SYSTEM
   -------------------------------------------------------------
   Loaded AFTER style.css. style.css still dresses the partner
   dashboard and the older product/service pages, so nothing is
   deleted from it; this sheet re-skins the shared shell (header,
   footer, buttons, forms, page banners) and adds the components
   the homepage needs.

   Palette is strictly monochrome — white page, near-black panels,
   greys for text and lines. There is no colour accent: the two
   accent tokens resolve to black and white so any rule still using
   them stays in the palette.
   ============================================================= */

:root {
  --at-ink:      #0d0e10;   /* headings, solid buttons, dark panels */
  --at-ink-2:    #17181b;   /* card ground on dark */
  --at-ink-3:    #202226;   /* raised surface on dark */
  --at-body:     #5c6066;   /* paragraph text */
  --at-muted:    #8d9299;   /* labels, meta, captions */
  --at-line:     #e5e6e9;   /* hairline borders on light */
  --at-line-2:   #f0f1f2;   /* faintest divider */
  --at-canvas:   #ffffff;   /* page ground */
  --at-band:     #f5f5f6;   /* alternating section band */
  --at-band-2:   #fafafa;

  --at-accent:   #0d0e10;   /* monochrome: accent on light = ink */
  --at-accent-2: #ffffff;   /* monochrome: accent on dark = white */

  --at-r-sm: 10px;
  --at-r:    16px;
  --at-r-lg: 22px;
  --at-r-xl: 28px;

  --at-sh:    0 1px 2px rgba(13,14,16,.04), 0 8px 24px rgba(13,14,16,.06);
  --at-sh-lg: 0 24px 64px rgba(13,14,16,.12);

  --at-gut:  clamp(16px, 4vw, 48px);   /* page side gutter */
  --at-maxw: 1440px;
  --at-sec:  clamp(64px, 7vw, 112px);  /* vertical section rhythm */
}

/* ---------- base ---------- */
body {
  background: var(--at-canvas);
  color: var(--at-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { color: var(--at-ink); letter-spacing: -.025em; font-weight: 600; }

/* The shell width. Overrides style.css's 1600px so the new grid keeps the
   generous side gutters the design relies on. */
.at-wrap { width: 100%; max-width: var(--at-maxw); margin-inline: auto; padding-inline: var(--at-gut); }
.at-sec  { padding-block: var(--at-sec); }
.at-band { background: var(--at-band); }

/* ---------- section headings ---------- */
.at-eyebrow {
  display: block;
  font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--at-muted);
  margin-bottom: 14px;
}
.at-h2 { font-size: clamp(26px, 3.1vw, 42px); line-height: 1.12; }
.at-h2 .at-dim { color: var(--at-muted); display: block; }
.at-sub { margin-top: 14px; max-width: 62ch; color: var(--at-body); font-size: 15px; }
.at-head-c { text-align: center; }
.at-head-c .at-h2 { max-width: 24ch; margin-inline: auto; }
.at-head-c .at-sub { margin-inline: auto; }

/* ---------- buttons ---------- */
.at-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: 999px;
  font-size: 14px; font-weight: 600; line-height: 1;
  border: 1px solid transparent; cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.at-btn svg { width: 15px; height: 15px; flex: 0 0 auto; transition: transform .18s ease; }
.at-btn:hover svg { transform: translateX(3px); }
.at-btn-solid { background: var(--at-ink); color: #fff; }
.at-btn-solid:hover { background: #292b30; transform: translateY(-1px); }
.at-btn-ghost { background: transparent; color: var(--at-ink); border-color: #d5d7db; }
.at-btn-ghost:hover { border-color: var(--at-ink); background: rgba(13,14,16,.03); }
/* on dark panels the two invert */
.at-on-dark .at-btn-solid { background: #fff; color: var(--at-ink); }
.at-on-dark .at-btn-solid:hover { background: #e9eaec; }
.at-on-dark .at-btn-ghost { color: #fff; border-color: rgba(255,255,255,.28); }
.at-on-dark .at-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.at-btn-sm { padding: 9px 18px; font-size: 13px; }

/* A text link that carries its own arrow. */
.at-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--at-ink);
}
.at-link::after { content: "→"; transition: transform .18s ease; }
.at-link:hover::after { transform: translateX(3px); }

/* A black square icon tile, used on the partner cards. */
.at-ico-tile {
  width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto;
  display: grid; place-items: center; background: var(--at-ink); color: #fff;
}
.at-ico-tile svg { width: 19px; height: 19px; }

/* =============================================================
   TOP UTILITY BAR + HEADER
   ============================================================= */
.at-topbar {
  background: var(--at-ink); color: rgba(255,255,255,.72);
  font-size: 12px; line-height: 1;
}
.at-topbar .at-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; }
.at-topbar a { color: inherit; }
.at-topbar a:hover { color: #fff; }
.at-tb-links { display: flex; align-items: center; gap: 20px; }
.at-tb-links li { position: relative; }
.at-tb-links li + li::before {
  content: ""; position: absolute; left: -10px; top: 50%;
  width: 1px; height: 11px; margin-top: -5.5px; background: rgba(255,255,255,.22);
}
.at-tb-phone { white-space: nowrap; }
.at-tb-phone strong { color: #fff; font-weight: 600; }

/* --- main bar. Overrides .site-header from style.css. --- */
.site-header.at-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--at-line);
  box-shadow: none;
}
.at-head .at-wrap { display: flex; align-items: center; gap: 28px; min-height: 68px; }

.at-brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.at-brand img { height: 26px; width: auto; }
.at-wordmark {
  font-size: 19px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--at-ink);
}
.at-brand small { display: block; font-size: 10px; letter-spacing: .1em; color: var(--at-muted); font-weight: 500; text-transform: none; }

.at-nav { margin-inline: auto; }
.at-nav ul { display: flex; align-items: center; gap: 30px; }
/* The partner link is duplicated inside the menu for the collapsed layout,
   where the header's own copy is hidden. On desktop it would be a repeat. */
.at-nav-mobile { display: none; }
.at-nav a {
  position: relative; font-size: 14px; font-weight: 500; color: var(--at-body);
  padding-block: 6px; transition: color .16s ease;
}
.at-nav a:hover { color: var(--at-ink); }
.at-nav a.is-active { color: var(--at-ink); font-weight: 600; }
.at-nav a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--at-ink); border-radius: 2px;
}

.at-head-cta { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.at-head-cta .at-plain { font-size: 13px; font-weight: 500; color: var(--at-body); }
.at-head-cta .at-plain:hover { color: var(--at-ink); }

/* Business Portal button + dropdown (items come from the portal_items setting) */
.at-portal { position: relative; }
.at-portal-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 999px;
  border: 1px solid #d5d7db; background: #fff; color: var(--at-ink);
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.at-portal-btn:hover, .at-portal-btn[aria-expanded="true"] { border-color: var(--at-ink); background: rgba(13,14,16,.03); }
.at-portal-btn:focus-visible { outline: 2px solid var(--at-ink); outline-offset: 2px; }
.at-portal-btn > svg:first-child { width: 14px; height: 14px; }
.at-portal-caret { width: 9px; height: 9px; transition: transform .18s ease; }
.at-portal-btn[aria-expanded="true"] .at-portal-caret { transform: rotate(180deg); }
.at-portal-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 80; min-width: 270px;
  padding: 6px; background: #fff; border: 1px solid var(--at-line);
  border-radius: 14px; box-shadow: var(--at-sh-lg);
}
.at-portal-menu[hidden] { display: none; }
.at-portal-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--at-ink); }
.at-portal-item:hover, .at-portal-item:focus-visible { background: var(--at-band); outline: none; }
.at-portal-ico {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
  display: grid; place-items: center; background: var(--at-ink); color: #fff;
}
.at-portal-ico svg { width: 16px; height: 16px; }
.at-portal-item b { display: block; font-size: 13px; font-weight: 600; }
.at-portal-item small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--at-muted); }
/* the group label above the portal links inside the collapsed menu */
.at-nav-group span {
  display: block; padding: 16px 0 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--at-muted);
}

/* hamburger — reuses .nav-toggle so main.js keeps working untouched */
.at-head .nav-toggle {
  display: none; width: 38px; height: 38px; border: 1px solid var(--at-line);
  border-radius: 10px; background: #fff; position: relative; cursor: pointer;
}
.at-head .nav-toggle span,
.at-head .nav-toggle span::before,
.at-head .nav-toggle span::after {
  content: ""; position: absolute; left: 50%; width: 16px; height: 1.5px;
  background: var(--at-ink); border-radius: 2px; transform: translateX(-50%);
}
.at-head .nav-toggle span { top: 50%; margin-top: -.75px; }
.at-head .nav-toggle span::before { top: -5px; left: 0; transform: none; }
.at-head .nav-toggle span::after  { top:  5px; left: 0; transform: none; }

/* =============================================================
   1. HERO
   ============================================================= */
/* Full-bleed banner carousel. The slides are stacked in the same grid cell,
   so the band takes the height of the tallest slide and never jumps, and the
   crossfade is a plain opacity change. */
.at-hero {
  display: grid; position: relative;
  background: var(--at-band); overflow: hidden;
}
.at-hero-slide {
  grid-area: 1 / 1; position: relative;
  display: flex; align-items: center;
  min-height: clamp(420px, 42vw, 620px);
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility .6s ease;
}
.at-hero-slide.active { opacity: 1; visibility: visible; }
.at-hero-slide:only-child { opacity: 1; visibility: visible; transition: none; }

.at-hero-media { position: absolute; inset: 0; z-index: 0; }
.at-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center right; }
.at-hero-media .at-ph { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }

.at-hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Almost gone — only the far-left edge behind the copy is touched, so
     the photo itself stays fully clear across the frame. */
  background: linear-gradient(90deg,
    rgba(245,245,246,.55) 0%, rgba(245,245,246,.18) 18%, rgba(245,245,246,0) 34%);
}
.at-hero-slide.is-dark .at-hero-scrim {
  background: linear-gradient(90deg,
    rgba(12,13,15,.55) 0%, rgba(12,13,15,.18) 18%, rgba(12,13,15,0) 34%);
}
/* With almost no wash, a halo behind the copy carries legibility instead. */
.at-hero-slide:not(.is-dark) .at-hero-copy { text-shadow: 0 1px 2px rgba(245,245,246,.95), 0 2px 18px rgba(245,245,246,.85); }
.at-hero-slide.is-dark .at-hero-copy { text-shadow: 0 1px 2px rgba(10,11,13,.85), 0 2px 18px rgba(10,11,13,.75); }

.at-hero .at-wrap { position: relative; z-index: 2; width: 100%; }
.at-hero-copy { max-width: 44%; padding-block: clamp(36px, 5vw, 72px); }
.at-hero h1 {
  font-size: clamp(30px, 3.6vw, 52px); line-height: 1.06;
  font-weight: 600; letter-spacing: -.03em;
}
.at-hero-tag {
  margin-top: 14px; max-width: 40ch;
  font-size: clamp(13px, 1vw, 16px); line-height: 1.55; color: var(--at-body);
}
.at-hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 26px; }
.at-hero-actions .at-btn { justify-content: space-between; width: clamp(260px, 26vw, 330px); }
.at-hero-slide.is-dark h1 { color: #fff; }
.at-hero-slide.is-dark .at-hero-tag { color: rgba(255,255,255,.78); }

/* Decorative captions in the hero corners — small stacked caps, faint,
   wide letter-spacing, wrapped into short lines (all breakpoints). */
.at-hero-vlabel {
  display: block; position: absolute; z-index: 3;
  max-width: clamp(70px, 7vw, 100px);
  font-size: clamp(8px, .66vw, 10px); font-weight: 600;
  letter-spacing: .22em; line-height: 1.7; text-transform: uppercase;
  color: rgba(13,14,16,.24); pointer-events: none;
}
.at-hero-slide.is-dark .at-hero-vlabel { color: rgba(255,255,255,.34); }
.at-hero-vlabel-tr { top: clamp(20px, 3.4vw, 46px); right: clamp(14px, 1.8vw, 30px); text-align: right; }
.at-hero-vlabel-bl { bottom: clamp(20px, 3.4vw, 46px); left: clamp(14px, 2.4vw, 40px); text-align: left; }

.at-hero-dots {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(16px, 2vw, 26px);
  display: flex; justify-content: center; gap: 8px;
}
.at-hero-dot, .at-tst-dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(18,20,23,.26); cursor: pointer;
  transition: width .25s ease, background .25s ease;
}
.at-hero-dot:hover, .at-tst-dot:hover { background: rgba(18,20,23,.45); }
.at-hero-dot.active, .at-tst-dot.active { width: 26px; background: var(--at-ink); }
.at-hero-dot:focus-visible, .at-tst-dot:focus-visible { outline: 2px solid var(--at-ink); outline-offset: 3px; }

/* =============================================================
   PLACEHOLDER PANEL
   -------------------------------------------------------------
   Stands in wherever a photograph has not been uploaded yet. It is
   a finished-looking surface rather than a grey box, so the page
   reads as designed while the real photography is being shot.
   ============================================================= */
.at-ph {
  position: relative; width: 100%; height: 100%;
  min-height: inherit; border-radius: var(--at-r-lg); overflow: hidden;
  background: linear-gradient(145deg, #e9eaec 0%, #dcdee1 55%, #cfd2d6 100%);
  display: grid; place-items: center;
}
.at-ph::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 50% 100%, rgba(13,14,16,.10), transparent 70%);
}
.at-ph svg { width: min(62%, 340px); height: auto; opacity: .5; color: #6f757c; position: relative; z-index: 1; }
.at-ph-dark { background: linear-gradient(145deg, #2a2c31 0%, #1b1d21 55%, #121417 100%); }
.at-ph-dark svg { color: #8c939b; opacity: .45; }
.at-ph-dark::after { background: radial-gradient(60% 50% at 50% 100%, rgba(0,0,0,.35), transparent 70%); }

/* A photo slot that fills its frame edge to edge (cards, about photo). */
.at-dm-img, .at-prod-img, .at-about-photo { position: relative; overflow: hidden; background: var(--at-ink-2); }
.at-dm-img > img, .at-prod-img > img, .at-about-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.at-dm-img > .at-ph, .at-prod-img > .at-ph, .at-about-photo > .at-ph { position: absolute; inset: 0; border-radius: 0; }

/* =============================================================
   2. TRUST STRIP
   ============================================================= */
.at-trust { background: #fff; border-bottom: 1px solid var(--at-line); }
.at-trust-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.at-trust-row li {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  padding: 20px 14px; font-size: 13px; font-weight: 500; color: var(--at-ink);
}
.at-trust-row li + li { border-left: 1px solid var(--at-line); }
.at-trust-ico {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; background: var(--at-ink); color: #fff;
}
.at-trust-ico svg { width: 15px; height: 15px; }

/* =============================================================
   3. DEALERSHIP MODELS
   ============================================================= */
.at-dm-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.at-dm-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--at-line); border-radius: var(--at-r-lg);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.at-dm-card:hover, .at-why-card:hover, .at-prod-card:hover, .at-chk-item:hover {
  border-color: #cfd2d6; box-shadow: var(--at-sh); transform: translateY(-2px);
}
.at-dm-img { aspect-ratio: 4 / 3; }
.at-dm-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 18px 18px 20px; }
.at-dm-body h3 { font-size: 15px; font-weight: 600; line-height: 1.3; }
.at-dm-body p { font-size: 13px; margin-top: 8px; flex: 1 1 auto; }
.at-dm-body .at-link { margin-top: 16px; }

/* =============================================================
   4. NUMBERS BAND
   ============================================================= */
.at-stats { background: var(--at-ink); padding-block: clamp(44px, 5vw, 68px); }
.at-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.at-stat { text-align: center; padding: 6px 18px; }
.at-stat + .at-stat { border-left: 1px solid rgba(255,255,255,.14); }
.at-stat b {
  display: block; color: #fff; font-weight: 600; line-height: 1.05;
  font-size: clamp(30px, 3.4vw, 50px); letter-spacing: -.03em;
}
.at-stat span {
  display: block; margin-top: 10px; color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.at-stat small { display: block; margin-top: 4px; font-size: 12px; color: rgba(255,255,255,.55); }

/* =============================================================
   5. ABOUT
   ============================================================= */
.at-about-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 76px); align-items: center;
}
.at-about-media { position: relative; }
.at-about-photo { aspect-ratio: 5 / 4; border-radius: var(--at-r-xl); box-shadow: var(--at-sh-lg); }
.at-about-badge {
  position: absolute; top: 22px; left: 22px; max-width: calc(100% - 44px);
  background: var(--at-ink); color: #fff; border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px; padding: 10px 14px;
}
.at-about-badge b { display: block; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.at-about-badge span { display: block; margin-top: 2px; font-size: 12px; color: rgba(255,255,255,.7); }
.at-about-card {
  position: absolute; left: 22px; right: 22px; bottom: 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: var(--at-sh-lg);
}
.at-about-card b { display: block; font-size: 13px; font-weight: 600; color: var(--at-ink); }
.at-about-card span { display: block; margin-top: 2px; font-size: 11px; color: var(--at-muted); }
.at-about-card em {
  flex: 0 0 auto; font-style: normal; font-size: 11px; font-weight: 600;
  background: var(--at-ink); color: #fff; border-radius: 999px; padding: 6px 11px;
}
.at-about-copy .at-h2 { font-size: clamp(26px, 2.8vw, 40px); }
.at-about-copy p { margin-top: 16px; font-size: 14.5px; }
.at-checks { margin-top: 22px; display: grid; gap: 11px; }
.at-checks li { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; color: var(--at-ink); }
.at-checks li svg {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; padding: 4px;
  border-radius: 50%; background: var(--at-ink); color: #fff; stroke-width: 3;
}
.at-about-copy .at-btn { margin-top: 30px; }

/* =============================================================
   6. WHY PARTNER
   ============================================================= */
.at-why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.at-why-card {
  display: flex; flex-direction: column; padding: 26px 22px 22px;
  background: #fff; border: 1px solid var(--at-line); border-radius: var(--at-r-lg);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.at-why-card h3 { font-size: 15px; font-weight: 600; margin-top: 20px; }
.at-why-card p { font-size: 13px; margin-top: 8px; flex: 1 1 auto; }
.at-why-card .at-link { margin-top: 18px; }

/* =============================================================
   7. PRODUCT PORTFOLIO
   ============================================================= */
.at-prod-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.at-prod-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--at-line); border-radius: var(--at-r-lg);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.at-prod-img { aspect-ratio: 4 / 3; }
.at-prod-badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: #fff; color: var(--at-ink); border-radius: 999px; padding: 5px 10px;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.at-prod-body { padding: 16px 18px 18px; }
.at-prod-body h3 { font-size: 15px; font-weight: 600; }
.at-prod-body h3 a { color: inherit; }
.at-prod-body p { margin-top: 6px; font-size: 12px; color: var(--at-muted); }

/* =============================================================
   8. PARTNERSHIP CHECKLIST
   ============================================================= */
.at-chk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.at-chk-item {
  padding: 24px; background: #fff;
  border: 1px solid var(--at-line); border-radius: var(--at-r-lg);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.at-chk-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.at-chk-num { font-size: 28px; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--at-ink); }
.at-chk-ico {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; background: var(--at-band); color: var(--at-ink);
}
.at-chk-ico svg { width: 17px; height: 17px; }
.at-chk-item h3 { font-size: 15px; font-weight: 600; }
.at-chk-item p { font-size: 13px; margin-top: 8px; }
.at-chk-foot { margin-top: 36px; text-align: center; }
.at-chk-foot p { font-size: 13px; color: var(--at-muted); }
.at-chk-foot .at-btn { margin-top: 14px; }

/* =============================================================
   9. CERTIFICATIONS
   ============================================================= */
.at-certs .at-h2 { font-size: clamp(22px, 2.4vw, 32px); }
.at-cert-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
.at-cert {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 22px 14px; text-align: center;
  background: #fff; border: 1px solid var(--at-line); border-radius: var(--at-r);
}
.at-cert-ico {
  width: 46px; height: 46px; margin-bottom: 10px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; border: 1px solid var(--at-line); color: var(--at-ink);
}
.at-cert-ico img { width: 100%; height: 100%; object-fit: contain; }
.at-cert-ico svg { width: 20px; height: 20px; }
.at-cert b { font-size: 13px; font-weight: 600; color: var(--at-ink); }
.at-cert > span:last-child { font-size: 11px; color: var(--at-muted); }

/* =============================================================
   10. PARTNER EXPERIENCES (scroll-snap slider)
   ============================================================= */
.at-tst-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3);
  gap: 16px; margin-top: 44px; padding-bottom: 4px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
}
.at-tst-track::-webkit-scrollbar { display: none; }
.at-tst-card {
  display: flex; flex-direction: column; scroll-snap-align: start;
  padding: 26px 24px; background: #fff;
  border: 1px solid var(--at-line); border-radius: var(--at-r-lg);
}
.at-tst-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.at-stars { display: flex; gap: 3px; color: var(--at-ink); }
.at-stars svg { width: 14px; height: 14px; }
.at-tst-qmark { color: #cfd2d6; }
.at-tst-qmark svg { width: 26px; height: 26px; }
.at-tst-quote { flex: 1 1 auto; font-size: 14px; color: var(--at-body); }
.at-tst-by { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--at-line-2); }
.at-tst-av {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; background: var(--at-ink);
  font-size: 13px; font-weight: 600; color: #fff;
}
.at-tst-by b { display: block; font-size: 13px; font-weight: 600; color: var(--at-ink); }
.at-tst-by span span { font-size: 12px; color: var(--at-muted); }
.at-tst-dots { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }
.at-tst-dots[hidden] { display: none; }

/* =============================================================
   11. FAQ
   ============================================================= */
.at-faq-list { max-width: 820px; margin: 38px auto 0; display: grid; gap: 10px; }
.at-faq-item { background: #fff; border: 1px solid var(--at-line); border-radius: var(--at-r); }
.at-faq-item[open] { border-color: #cfd2d6; }
.at-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 20px; cursor: pointer; list-style: none;
  font-size: 14.5px; font-weight: 500; color: var(--at-ink);
}
.at-faq-item summary::-webkit-details-marker { display: none; }
.at-faq-item summary::after {
  content: ""; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--at-band) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%230d0e10' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M6 1v10M1 6h10'/%3E%3C/svg%3E") center / 10px no-repeat;
  transition: transform .22s ease, background-color .22s ease;
}
.at-faq-item[open] summary::after { transform: rotate(45deg); background-color: #e5e6e9; }
.at-faq-item .at-faq-a { padding: 0 20px 20px; font-size: 14px; color: var(--at-body); }

/* =============================================================
   12. CLOSING BANNER
   ============================================================= */
.at-cta {
  position: relative; overflow: hidden; text-align: center;
  background: var(--at-ink); padding-block: clamp(68px, 8vw, 116px);
}
.at-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 50% 0%, rgba(255,255,255,.08), transparent 70%);
}
.at-cta .at-wrap { position: relative; }
.at-cta-pill {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.24); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.at-cta h2 {
  max-width: 18ch; margin: 20px auto 0; color: #fff;
  font-size: clamp(30px, 4vw, 58px); line-height: 1.08;
}
.at-cta p { max-width: 56ch; margin: 16px auto 0; color: rgba(255,255,255,.66); }
.at-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

/* =============================================================
   13. FOOTER
   ============================================================= */
.site-footer.at-foot { background: #08090a; color: rgba(255,255,255,.6); padding: 0; border-top: 1px solid rgba(255,255,255,.08); }
.at-foot a { color: rgba(255,255,255,.62); transition: color .16s ease; }
.at-foot a:hover { color: #fff; }

/* style.css centres the old footer on phones; this layout stays left-aligned at every width */
.site-footer.at-foot .at-foot-main,
.site-footer.at-foot .at-foot-brand,
.site-footer.at-foot .at-foot-col,
.site-footer.at-foot .at-foot-bottom { text-align: left; }
.site-footer.at-foot .at-foot-col ul { justify-items: start; }

/* brand column | link columns (Quick Links, Partnership Types, Business Portal) | Get in Touch
   Proportions follow the reference: a wide brand column, then evenly spread
   link columns with generous gaps between them. */
.site-footer.at-foot { background: #111418; border-top: 0; }
.at-foot-main {
  display: grid; gap: 40px clamp(32px, 4vw, 64px); padding-block: 60px 42px;
  grid-template-columns: minmax(0, 1.7fr) repeat(var(--at-foot-n, 2), minmax(0, 1fr)) minmax(0, 1.2fr);
}
/* the logo sits on a compact white rounded card */
.at-foot-logo {
  display: inline-flex; align-items: center; min-height: 62px;
  padding: 8px 16px; background: #fff; border-radius: 10px;
}
.at-foot-logo img { height: 44px; width: auto; }
.at-foot-logo .at-wordmark { color: var(--at-ink); font-size: 19px; }
.at-foot-brand p { margin-top: 18px; max-width: 38ch; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.72); }

.at-foot-col h3 {
  color: #fff; font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 22px;
}
.at-foot-col ul { display: grid; gap: 14px; }
.at-foot-col li, .at-foot-col a { font-size: 15px; line-height: 1.4; color: rgba(255,255,255,.84); }
.at-foot-col a:hover { color: #fff; }
.at-foot-desk li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.at-foot-desk li svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; color: #fff; }
/* let long emails / numbers wrap instead of overflowing the column */
.at-foot-desk li a, .at-foot-desk li span { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }

/* rounded-square social buttons */
.at-foot-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.at-foot-social a {
  width: 36px; height: 36px; border-radius: 8px;
  display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff;
}
.at-foot-social a:hover { background: rgba(255,255,255,.16); }
.at-foot-social svg { width: 14px; height: 14px; }

.at-foot-bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding-block: 22px 26px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px;
  font-size: 14px; color: rgba(255,255,255,.72);
}
.at-foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: rgba(255,255,255,.45); }
.at-foot-legal a { color: rgba(255,255,255,.78); }

/* floating support pill */
.at-callback {
  position: fixed; right: 20px; bottom: 20px; z-index: 70;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px;
  background: var(--at-ink); color: #fff; border: 1px solid rgba(255,255,255,.18);
  font-size: 13px; font-weight: 600;
  box-shadow: var(--at-sh-lg);
  transition: transform .18s ease, background .18s ease;
}
.at-callback:hover { background: #292b30; transform: translateY(-2px); }
.at-callback svg { width: 14px; height: 14px; }

.at-alert { padding: 12px 14px; border-radius: var(--at-r-sm); font-size: 13px; border: 1px solid; margin-bottom: 4px; }
.at-alert-ok { background: #f5f5f6; border-color: #d5d7db; color: var(--at-ink); }

/* =============================================================
   SHARED PAGE SHELL — about / franchise / contact / apply / login
   -------------------------------------------------------------
   These pages keep their existing markup; this block restyles the
   pieces of style.css they use so they sit in the same design as
   the homepage instead of the old teal/amber theme.
   ============================================================= */
.at-page {
  --px-teal:      #0d0e10;
  --px-teal-dark: #0d0e10;
  --px-mint:      #f5f5f6;
  --px-mint-dark: #ececee;
  --px-ink:       #0d0e10;
  --px-body:      #5c6066;
  --px-muted:     #8d9299;
  --px-line:      #e5e6e9;
  --px-maxw-wide: 1440px;

  --btn:      #0d0e10;
  --btn-dark: #292b30;
  --btn-ink:  #ffffff;

  --canvas:   #f5f5f6;
  --canvas-2: #ececee;
  --maxw:     1440px;
}

.at-page .pxb,
.at-page .pxb-center {
  background: var(--at-band) !important;
  border-bottom: 1px solid var(--at-line);
}
.at-page .pxb::before,
.at-page .pxb::after,
.at-page .pxb-center::before,
.at-page .pxb-center::after { display: none !important; content: none !important; }

.at-page .pxb-inner {
  min-height: 0; padding-block: clamp(48px, 6vw, 88px);
  grid-template-columns: 1fr;
}
.at-page .pxb-center .pxb-copy { text-align: center; margin-inline: auto; }
.at-page .pxb-center .pxb-copy p { margin-inline: auto; }

.at-page .pxb h1 {
  font-size: clamp(30px, 3.6vw, 50px); font-weight: 600;
  letter-spacing: -.03em; color: var(--at-ink); text-shadow: none;
}
.at-page .pxb p  { color: var(--at-body); font-size: 15px; }
.at-page .pxb-crumb { font-size: 12px; color: var(--at-muted); letter-spacing: .02em; }
.at-page .pxb-crumb a { color: var(--at-body); text-decoration: none; }
.at-page .pxb-crumb a:hover { color: var(--at-ink); }
.at-page .pxb-art, .at-page .pxb-blob, .at-page .pxb-tin,
.at-page .pxl-bg, .at-page .pxl-dots { display: none !important; }

.at-page .btn, .at-page .btn-primary, .at-page button[type="submit"],
.at-page .pxl-cta {
  background: var(--at-ink); color: #fff; border-radius: 999px;
  border: 1px solid var(--at-ink); font-weight: 600; letter-spacing: 0;
}
.at-page .btn:hover, .at-page .btn-primary:hover,
.at-page button[type="submit"]:hover, .at-page .pxl-cta:hover { background: #292b30; border-color: #292b30; }
.at-page .btn-ghost, .at-page .pxl-cta.ghost {
  background: transparent; color: var(--at-ink); border-color: #d5d7db;
}
.at-page .btn-ghost:hover, .at-page .pxl-cta.ghost:hover { background: rgba(13,14,16,.03); border-color: var(--at-ink); }

.at-page .btn, .at-page .btn-primary, .at-page button[type="submit"],
.at-page .pxk-btn.primary, .at-page .pxl-cta { box-shadow: none; }

.at-page .pxw-eyebrow, .at-page .pxs-eyebrow {
  color: var(--at-muted); background: transparent; letter-spacing: .14em;
}

.at-page input, .at-page select, .at-page textarea {
  border-radius: var(--at-r-sm); border-color: var(--at-line);
}
.at-page input:focus, .at-page select:focus, .at-page textarea:focus {
  border-color: var(--at-ink); box-shadow: 0 0 0 3px rgba(13,14,16,.07);
}
.at-page .card, .at-page .pxk-card, .at-page .pxt-card {
  border-radius: var(--at-r-lg); border: 1px solid var(--at-line); box-shadow: none;
}
.at-page .ico-quote, .at-page .ico-badge, .at-page .ico-tools, .at-page .ico-cover,
.at-page .ico-check, .at-page .ico-id,    .at-page .ico-doc,   .at-page .ico-bank { color: var(--at-ink); }

.at-page .pxn { background: var(--at-band); }
.at-page .pxn-item b { font-weight: 600; color: var(--at-ink); }

.at-page .pxa-step span,
.at-page .pxa-num,
.at-page .pxs-step-num { background: var(--at-ink) !important; color: #fff !important; }
.at-page .pxa-docs li::before,
.at-page .pxa-check { background: var(--at-ink) !important; color: #fff !important; border-color: var(--at-ink) !important; }

.at-page .pxk-card { border-radius: var(--at-r-lg); }
.at-page .pxk-card.featured { box-shadow: 0 18px 40px rgba(13,14,16,.10); }
.at-page .pxk-swatch { height: 4px; }
.at-page .pxk-amount { border-radius: var(--at-r-sm); font-weight: 600; }
.at-page .pxk-head h3 { font-weight: 600; }
.at-page .pxk-btn { border-radius: 999px; font-weight: 600; border-width: 1px; }
.at-page .pxk-tablewrap { border-radius: var(--at-r); }
.at-page .pxk-badges li,
.at-page .pxs-intro .pxw-eyebrow {
  letter-spacing: .12em; text-transform: uppercase; font-size: 11px; color: var(--at-muted);
}
.at-page .pxk-badges li {
  background: #fff; border: 1px solid var(--at-line); border-radius: 999px;
  text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--at-body);
}

.at-page .pxl { background: var(--at-band); }
.at-page .pxl-card { background: #fff; border: 1px solid var(--at-line); border-radius: var(--at-r-xl); box-shadow: none; }
.at-page .pxl-card h2 { font-weight: 600; letter-spacing: -.025em; }

/* ---------- inner-page banner / closing band with an uploaded photo ----------
   The photo sits in its own span (the .pxb pseudo-elements are switched off
   above), darkened so white text on top stays readable. */
.at-banner, .at-ctaband { position: relative; overflow: hidden; }
.at-banner-media { position: absolute; inset: 0; z-index: 0; }
.at-banner-media img { width: 100%; height: 100%; object-fit: cover; }
.at-banner-media::after { content: ""; position: absolute; inset: 0; background: rgba(13,14,16,.62); }
.at-banner .pxb-inner, .at-ctaband .container { position: relative; z-index: 1; }
.at-banner-eyebrow {
  display: inline-block; margin-top: 14px;
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--at-muted);
}
.at-page .pxb.has-img { background: var(--at-ink) !important; border-bottom-color: var(--at-ink); }
.at-page .pxb.has-img h1,
.at-page .pxb.has-img p { color: #fff; }
.at-page .pxb.has-img .pxb-crumb,
.at-page .pxb.has-img .pxb-crumb a,
.at-page .pxb.has-img .at-banner-eyebrow { color: rgba(255,255,255,.75); }
.at-page .pxl.has-img { background: var(--at-ink); }

/* ---------- legal pages (privacy / terms) ---------- */
.at-legal { max-width: 860px; margin-inline: auto; font-size: 15px; line-height: 1.8; color: var(--at-body); }
.at-legal h2 { font-size: 20px; margin: 34px 0 8px; color: var(--at-ink); }
.at-legal h3 { font-size: 16px; margin: 20px 0 6px; color: var(--at-ink); }
.at-legal p { margin: 10px 0; }
.at-legal ul { margin: 8px 0; padding-left: 22px; list-style: disc; }
.at-legal li { margin: 5px 0; }
.at-legal strong { color: var(--at-ink); font-weight: 600; }
.at-legal-warn { background: var(--at-band); border-left: 3px solid var(--at-ink); padding: 12px 16px; border-radius: 8px; }
.at-legal-foot { margin-top: 30px; }

/* ---------- testimonial photos ---------- */
.at-tst-av { overflow: hidden; }
.at-tst-av img { width: 100%; height: 100%; object-fit: cover; }
.pxt-photo { display: block; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; margin-bottom: 12px; background: var(--at-band); }
.pxt-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Business Portal "coming soon" pages (portal.php) ---------- */
.at-soon { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.at-soon-card {
  background: #fff; border: 1px solid var(--at-line); border-radius: var(--at-r-xl);
  padding: clamp(24px, 4vw, 44px);
}
.at-soon-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.at-soon-badge {
  display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--at-band); color: var(--at-ink);
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.at-soon-card h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; }
.at-soon-card h3 {
  margin-top: 28px; font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--at-muted);
}
.at-soon-card .at-checks { margin-top: 14px; }
.at-soon-note { margin-top: 26px; padding: 14px 16px; background: var(--at-band); border-radius: 12px; font-size: 14px; }
.at-soon-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.at-soon-side { background: var(--at-band); border-radius: var(--at-r-xl); padding: 22px; }
.at-soon-side h3 {
  margin: 0 0 10px; padding-inline: 10px; font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--at-muted);
}
.at-soon-link { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; color: var(--at-ink); }
.at-soon-link:hover, .at-soon-link:focus-visible { background: #fff; outline: none; }
.at-soon-link b { display: block; font-size: 13px; font-weight: 600; }
.at-soon-link small { display: block; margin-top: 1px; font-size: 11.5px; line-height: 1.45; color: var(--at-muted); }
@media (max-width: 1024px) { .at-soon { grid-template-columns: 1fr; } }
@media (max-width: 560px)  { .at-soon-actions .at-btn { flex: 1 1 100%; } }

/* the dark sidebar cards on apply / contact were tinted lilac by the old theme */
.at-page .side-card { background: var(--at-ink); color: #fff; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1200px) {
  .at-dm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .at-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .at-prod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .at-cert-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .at-foot-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .at-foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
  .at-nav { display: none; }
  .at-head .nav-toggle { display: block; }
  /* The hidden nav no longer pushes the actions across, so push them to the
     right edge ourselves — keeps the hamburger on the right of the header. */
  .at-head-cta { margin-left: auto; }
  /* main.js toggles .open on .site-header */
  .site-header.at-head.open .at-nav {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--at-line);
    padding: 8px var(--at-gut) 18px; box-shadow: var(--at-sh);
  }
  .site-header.at-head.open .at-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-header.at-head.open .at-nav-mobile { display: block; }
  .site-header.at-head.open .at-nav li { border-bottom: 1px solid var(--at-line-2); }
  .site-header.at-head.open .at-nav a { display: block; padding: 14px 0; font-size: 15px; }
  .site-header.at-head.open .at-nav a.is-active::after { display: none; }
  .at-head .at-wrap { position: relative; }

  .at-hero-slide { min-height: clamp(400px, 62vw, 520px); }
  .at-hero-copy { max-width: 56%; }
  .at-hero-scrim {
    background: linear-gradient(90deg,
      rgba(245,245,246,.60) 0%, rgba(245,245,246,.20) 22%, rgba(245,245,246,0) 40%);
  }
  .at-hero-slide.is-dark .at-hero-scrim {
    background: linear-gradient(90deg,
      rgba(12,13,15,.60) 0%, rgba(12,13,15,.20) 22%, rgba(12,13,15,0) 40%);
  }

  .at-trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .at-trust-row li:nth-child(odd) { border-left: 0; }
  .at-trust-row li:nth-child(n+3) { border-top: 1px solid var(--at-line); }

  .at-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .at-stat:nth-child(odd) { border-left: 0; }

  .at-about-grid { grid-template-columns: 1fr; }
  .at-prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .at-chk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .at-tst-track { grid-auto-columns: calc((100% - 16px) / 2); }
}

@media (max-width: 768px) {
  .at-topbar .at-tb-links { display: none; }
  .at-topbar .at-wrap { justify-content: center; }

  /* ---------------------------------------------------------------
     MOBILE HERO — same composition as desktop: copy on the light left,
     scooter clear on the right, buttons stacked, captions in the
     corners and the dots over the floor. Height kept moderate so the
     landscape photo is not over-cropped.
     --------------------------------------------------------------- */
  .at-hero { background: var(--at-band); }
  .at-hero-slide { align-items: center; min-height: clamp(440px, 112vw, 580px); }
  .at-hero-copy { max-width: 68%; padding-block: clamp(20px, 6vw, 34px); }
  .at-hero h1 { font-size: clamp(30px, 8.6vw, 44px); line-height: 1.05; }
  .at-hero-tag { max-width: 30ch; margin-top: 11px; }
  .at-hero-actions { flex-direction: column; gap: 11px; margin-top: 20px; }
  .at-hero-actions .at-btn { width: min(100%, 300px); justify-content: space-between; }

  /* Horizontal wash — copy reads on the light left, the scooter stays
     clear on the right (matching the desktop composition). */
  .at-hero-scrim {
    background: linear-gradient(90deg,
      var(--at-band) 0%, rgba(245,245,246,.86) 40%, rgba(245,245,246,.30) 72%, rgba(245,245,246,0) 100%);
  }
  .at-hero-slide.is-dark .at-hero-scrim {
    background: linear-gradient(90deg,
      rgba(12,13,15,.90) 0%, rgba(12,13,15,.74) 40%, rgba(12,13,15,.30) 72%, rgba(12,13,15,0) 100%);
  }
  /* Centre the crop — hero slides use different photos, so a neutral
     centre keeps each slide's subject in frame rather than the edges. */
  .at-hero-media img { object-position: center center; }

  /* Corner captions — a touch stronger so they read over the photo. */
  .at-hero-vlabel { font-size: 9px; color: rgba(13,14,16,.34); }
  .at-hero-slide.is-dark .at-hero-vlabel { color: rgba(255,255,255,.42); }
  .at-hero-vlabel-tr { top: 16px; right: 12px; }
  .at-hero-vlabel-bl { bottom: 16px; left: 12px; }

  /* Trust strip → 2-up cards with a thin outlined circular icon. */
  .at-trust-row li {
    flex-direction: row; justify-content: flex-start; align-items: center;
    gap: 12px; padding: 18px 16px; font-size: 12.5px; line-height: 1.3; text-align: left;
  }
  .at-trust-ico {
    width: 40px; height: 40px; border-radius: 50%;
    background: transparent; color: var(--at-ink);
    border: 1.5px solid rgba(13,14,16,.16);
  }

  .at-dm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .at-cert-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .at-tst-track { grid-auto-columns: 88%; }
  .at-callback { right: 14px; bottom: 14px; padding: 11px 16px; font-size: 12px; }
}

@media (max-width: 560px) {
  .at-head-cta .at-plain, .at-head-cta .at-portal { display: none; }
  .at-hero-copy { max-width: 80%; }
  .at-hero-actions .at-btn { width: min(100%, 300px); }

  .at-trust-row li { justify-content: flex-start; padding: 14px 10px; font-size: 12px; }
  .at-dm-grid, .at-why-grid, .at-prod-grid, .at-chk-grid { grid-template-columns: 1fr; }
  .at-stat { padding-inline: 8px; }
  .at-stat small { font-size: 11px; }
  .at-about-badge { top: 14px; left: 14px; }
  .at-about-card { left: 14px; right: 14px; bottom: 14px; flex-wrap: wrap; }
  .at-cta-actions .at-btn { flex: 1 1 100%; }
  .at-foot-main { grid-template-columns: 1fr; gap: 32px; padding-block: 44px 36px; }
  .at-foot-bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .at-hero-slide, .at-hero-dot, .at-tst-dot { transition: none; }
  .at-btn, .at-btn svg, .at-dm-card, .at-why-card, .at-prod-card, .at-chk-item,
  .at-callback, .at-link::after, .at-faq-item summary::after { transition: none; }
  .at-tst-track { scroll-behavior: auto; }
}