/* Advanced Technologies — Component styles for server-rendered (PHP) markup.
   The design system ships these as React components with inline styles; here the
   same visuals are expressed as real CSS classes so WordPress/WooCommerce PHP
   templates can emit them. Every value references a design-system token. */

/* ───────────── Global content / wide width ─────────────
   Mirrors theme.json (contentSize 1180 / wideSize 1240). Set here in CSS too so
   the width applies the instant the stylesheet loads — independent of WordPress
   regenerating its global stylesheet from theme.json (which can lag behind a
   cache purge). WP's layout rules reference these custom properties. */
body,
.editor-styles-wrapper {
  --wp--style--global--content-size: 1180px;
  --wp--style--global--wide-size: 1240px;
}

/* ───────────────────────── Button ───────────────────────── */
.at-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; height: 44px; padding: 0 20px;
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-md); letter-spacing: var(--tracking-snug); line-height: 1;
  border-radius: var(--radius-md); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.at-btn:active { transform: translateY(1px); }
.at-btn[disabled], .at-btn.is-disabled { opacity: 0.5; cursor: not-allowed; }

.at-btn--sm { height: 36px; padding: 0 14px; gap: 7px; font-size: var(--text-sm); }
.at-btn--lg { height: 54px; padding: 0 28px; gap: 10px; font-size: var(--text-lg); }
.at-btn--full { width: 100%; }

.at-btn--primary   { background: var(--color-accent); color: var(--text-on-accent); border-color: var(--color-accent); }
.at-btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--text-on-accent); }
.at-btn--secondary { background: var(--navy-700); color: var(--text-on-brand); border-color: var(--navy-700); }
.at-btn--secondary:hover { background: var(--navy-800); border-color: var(--navy-800); color: var(--text-on-brand); }
.at-btn--outline   { background: transparent; color: var(--navy-700); border-color: var(--border-default); }
.at-btn--outline:hover { background: var(--navy-50); border-color: var(--navy-700); color: var(--navy-700); }
.at-btn--ghost     { background: transparent; color: var(--navy-700); border-color: transparent; }
.at-btn--ghost:hover { background: var(--navy-50); color: var(--navy-700); }

/* ───────────────────────── Eyebrow ───────────────────────── */
.at-eyebrow {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-xs); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--color-accent) !important;
}

/* ───────────────────────── Badge ───────────────────────── */
.at-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--radius-xs);
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; line-height: 1.4; color: #fff;
}
.at-badge--accent  { background: var(--color-accent); }
.at-badge--navy    { background: var(--navy-700); }
.at-badge--steel   { background: var(--steel-600); }
.at-badge--success { background: var(--success-600); }
.at-badge--warning { background: var(--warning-600); }

/* ───────────────────── Product card ───────────────────── */
.at-product-card {
  display: flex; flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.at-product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.at-product-card__media {
  position: relative; aspect-ratio: 4 / 3;
  background: var(--neutral-50); display: flex;
  align-items: center; justify-content: center; overflow: hidden;
}
.at-product-card__media img { width: 100%; height: 100%; object-fit: contain; }
.at-product-card__flag { position: absolute; top: 12px; left: 12px; }

.at-product-card__body {
  display: flex; flex-direction: column; gap: 8px;
  padding: var(--space-4); flex: 1;
}
.at-product-card__brand {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-muted);
}
.at-product-card__name {
  font-family: var(--font-body); font-weight: var(--weight-semibold);
  font-size: var(--text-md); color: var(--text-strong); line-height: var(--leading-snug);
  letter-spacing: 0.005em;
}
.at-product-card__name a { color: inherit; }
.at-product-card__name a:hover { color: var(--text-link); }

/* Hero carousel — rotating/swiping hero (crossfade, autoplay, dots, drag/swipe). */
.at-hero-carousel { position: relative; overflow: hidden; min-height: 560px; }
/* Force the viewport breakout on alignfull — matches every other full-bleed
   custom block in this theme (TwentyTwentyFive's constrained container
   doesn't auto-bleed a custom block class, only core blocks). */
.at-hero-carousel.alignfull {
  width: 100vw !important; max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
}
.at-hero-carousel__track { position: relative; width: 100%; height: 100%; min-height: 560px; touch-action: pan-y; cursor: grab; }
.at-hero-carousel.is-editor-preview .at-hero-carousel__track { display: flex; flex-direction: column; gap: 16px; cursor: default; min-height: 0; }
.at-hero-carousel-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease; display: flex; align-items: center; padding-left: max(32px, calc((100% - 1180px) / 2)); padding-right: max(32px, calc((100% - 1180px) / 2)); }
.at-hero-carousel-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }

/* Transition variants. --at-hc-speed comes from the block's speed setting;
   the .8s here is the fallback for blocks saved before that existed. */
.at-hero-carousel { --at-hc-speed: 800ms; }
.at-hero-carousel--fade .at-hero-carousel-slide { transition: opacity var(--at-hc-speed) ease; }

/* Horizontal slide. Inactive slides park off-screen on the side they'd
   travel from, so direction reads correctly; .is-reverse flips it. */
.at-hero-carousel--slide .at-hero-carousel-slide {
  transition: opacity var(--at-hc-speed) ease, transform var(--at-hc-speed) cubic-bezier(0.22, 0.61, 0.36, 1);
  transform: translateX(100%);
}
.at-hero-carousel--slide.is-reverse .at-hero-carousel-slide { transform: translateX(-100%); }
.at-hero-carousel--slide .at-hero-carousel-slide.is-active { transform: translateX(0); }

/* Zoom + fade — a slow push-in on the incoming slide. */
.at-hero-carousel--zoom .at-hero-carousel-slide {
  transition: opacity var(--at-hc-speed) ease, transform var(--at-hc-speed) ease;
  transform: scale(1.06);
}
.at-hero-carousel--zoom .at-hero-carousel-slide.is-active { transform: scale(1); }

.at-hero-carousel--none .at-hero-carousel-slide { transition: none; }

@media (prefers-reduced-motion: reduce) {
  /* Movement is the accessibility problem, not the change of slide — keep a
     short fade so the carousel still reads as advancing. */
  .at-hero-carousel .at-hero-carousel-slide {
    transition: opacity 200ms ease !important;
    transform: none !important;
  }
}
.is-editor-preview .at-hero-carousel-slide { position: relative; inset: auto; opacity: 1; visibility: visible; min-height: 320px; border: 1px dashed var(--border-subtle); }
.at-hero-carousel-slide__media { position: absolute; inset: 0; z-index: -1; background: var(--navy-700); }
.at-hero-carousel-slide__media img, .at-hero-carousel-slide__media video { width: 100%; height: 100%; object-fit: cover; }
.at-hero-carousel-slide__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28,36,53,.72) 0%, rgba(28,36,53,.35) 55%, rgba(28,36,53,.1) 100%); }
/* Fallback treatment when a slide has no image/video set — the brand's
   navy dot-grid + glow, matching the static AT — Hero pattern's background. */
.at-hero-carousel-slide__media.is-empty { background: var(--navy-700); }
.at-hero-carousel-slide__media.is-empty::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.07) 1.5px, transparent 0);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.at-hero-carousel-slide__media.is-empty::after {
  content: ""; position: absolute; top: -120px; right: -120px; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(87,117,145,0.55), transparent 70%);
}
.is-editor-preview .at-hero-carousel-slide__media { position: relative; inset: auto; height: 220px; z-index: 0; }
.at-hero-carousel-slide__panel { position: relative; z-index: 1; max-width: 640px; padding: 64px 0; color: #fff; }
.is-editor-preview .at-hero-carousel-slide__panel { padding: 20px 0; color: var(--text-strong); }
.at-hero-carousel-slide__eyebrow { color: #fff; opacity: .9; }
.is-editor-preview .at-hero-carousel-slide__eyebrow { color: var(--color-accent); opacity: 1; }
.at-hero-carousel-slide__heading { font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: 1.15; color: #fff; margin: 0 0 16px; }
.is-editor-preview .at-hero-carousel-slide__heading { color: var(--text-strong); font-size: 28px; }
.at-hero-carousel-slide__text { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.9); margin: 0 0 28px; }
.is-editor-preview .at-hero-carousel-slide__text { color: var(--text-body); }
.at-hero-carousel-slide__buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.at-hero-carousel-slide__buttons .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; line-height: 1; border-radius: var(--radius-md); border: 2px solid transparent; font-family: var(--font-display); font-weight: 700; font-size: 15px; text-decoration: none; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.at-hero-carousel-slide__buttons .wp-block-button.is-style-at-primary > .wp-block-button__link { background: var(--color-accent); color: var(--text-on-accent); border-color: var(--color-accent); }
.at-hero-carousel-slide__buttons .wp-block-button.is-style-at-primary > .wp-block-button__link:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.at-hero-carousel-slide__buttons .wp-block-button.is-style-at-outline > .wp-block-button__link { background: transparent; color: #fff; border-color: color-mix(in srgb, #fff 38%, transparent); }
.at-hero-carousel-slide__buttons .wp-block-button.is-style-at-outline > .wp-block-button__link:hover { background: color-mix(in srgb, #fff 12%, transparent); border-color: #fff; color: #fff; }
.is-editor-preview .at-hero-carousel-slide__buttons .wp-block-button.is-style-at-outline > .wp-block-button__link { color: var(--navy-700); border-color: var(--border-default); }
.at-hero-carousel__dots { position: absolute; left: 0; right: 0; bottom: 24px; z-index: 2; display: flex; justify-content: center; gap: 10px; }
.at-hero-carousel__dot { width: 9px; height: 9px; border-radius: 50%; border: 0; background: rgba(255,255,255,.4); padding: 0; cursor: pointer; }
.at-hero-carousel__dot.is-active { background: #fff; width: 26px; border-radius: 5px; transition: width .2s ease; }
@media (max-width: 720px) {
  .at-hero-carousel, .at-hero-carousel__track { min-height: 460px; }
  .at-hero-carousel-slide__panel { padding: 32px 0; }
  .at-hero-carousel-slide__heading { font-size: 30px; }
}

/* Shop highlights section (home page) — reuses the product-card look but
   applied to a live WooCommerce Product Collection block, so it's driven
   by real inventory instead of static copy. */
.at-shop-highlights { padding: 72px 32px; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.at-shop-highlights__cta a { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--color-accent); white-space: nowrap; }
.at-shop-highlights__cta a:hover { color: var(--color-accent); text-decoration: underline; }
.at-shop-highlights__grid.wp-block-woocommerce-product-collection { margin-top: 40px; }
.at-shop-highlights__grid ul.wc-block-product-template { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.at-shop-highlights__grid li.product {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-xs); transition: transform .2s, box-shadow .2s; padding: 0 !important;
}
.at-shop-highlights__grid li.product:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.at-shop-highlights__grid .wc-block-components-product-image { padding: 20px; background: var(--surface-page); aspect-ratio: 1; }
.at-shop-highlights__grid .wc-block-components-product-image img { object-fit: contain; }
.at-shop-highlights__grid h3.wp-block-post-title {
  font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text-strong);
  margin: 16px 18px 8px; line-height: 1.35;
}
.at-shop-highlights__grid h3.wp-block-post-title a { color: inherit; }
.at-shop-highlights__grid .wp-block-woocommerce-product-price {
  font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--text-strong); margin: 0 18px 20px;
}
@media (max-width: 900px) {
  .at-shop-highlights__grid ul.wc-block-product-template { grid-template-columns: repeat(2, 1fr); }
}
.at-product-card__price-row {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: auto; padding-top: 6px;
}
.at-product-card__price {
  font-family: var(--font-display); font-weight: var(--weight-extra);
  font-size: var(--text-xl); color: var(--text-strong);
  display: inline-flex; align-items: baseline; gap: 8px; flex-direction: row-reverse;
}
.at-product-card__price del, .at-product-card__price-old {
  font-family: var(--font-body); font-weight: var(--weight-regular);
  font-size: var(--text-sm); color: var(--text-muted); text-decoration: line-through;
}
/* The sale price arrives as <ins>, which browsers underline by default. The
   shop archive strips that via its own scoped rules; the card component needs
   it too so cards look identical wherever they're rendered. */
.at-product-card__price ins { text-decoration: none; order: 0; }
.at-product-card__add {
  margin-top: 4px; height: 40px; width: auto; min-width: 150px;
  align-self: center;
  border: 1px solid var(--navy-700); border-radius: var(--radius-md);
  background: var(--surface-card); color: var(--navy-700);
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-sm); cursor: pointer;
  display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none;
  box-sizing: border-box;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.at-product-card__add:hover { background: var(--navy-700); color: #fff; }

/* ───────────────────── Rating (inline stars) ───────────────────── */
.at-rating { display: inline-flex; align-items: center; gap: 4px; }
.at-rating__stars { color: var(--color-accent); letter-spacing: 1px; font-size: 14px; }
.at-rating__count { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); }

/* ═══════════════════ WordPress block editor bridge ═══════════════════
   Maps the registered block styles (inc/editor.php) onto core blocks, so
   editors pick a style in the sidebar and get the brand look. Applies on the
   front end AND in the editor canvas (loaded via add_editor_style). */

/* Button block → brand buttons (override core padding/radius/colour) */
.wp-block-button.is-style-at-primary > .wp-block-button__link,
.wp-block-button.is-style-at-secondary > .wp-block-button__link,
.wp-block-button.is-style-at-outline > .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 20px; line-height: 1;
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-md); letter-spacing: var(--tracking-snug);
  border-radius: var(--radius-md); border: 1px solid transparent;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.wp-block-button.is-style-at-primary > .wp-block-button__link {
  background: var(--color-accent); color: var(--text-on-accent); border-color: var(--color-accent);
}
.wp-block-button.is-style-at-primary > .wp-block-button__link:hover {
  background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--text-on-accent);
}
.wp-block-button.is-style-at-secondary > .wp-block-button__link {
  background: var(--navy-700); color: var(--text-on-brand); border-color: var(--navy-700);
}
.wp-block-button.is-style-at-secondary > .wp-block-button__link:hover {
  background: var(--navy-800); border-color: var(--navy-800); color: var(--text-on-brand);
}
.wp-block-button.is-style-at-outline > .wp-block-button__link {
  background: transparent; color: var(--navy-700); border-color: var(--border-default);
}
.wp-block-button.is-style-at-outline > .wp-block-button__link:hover {
  background: var(--navy-50); border-color: var(--navy-700); color: var(--navy-700);
}

/* Paragraph block → eyebrow */
.is-style-at-eyebrow {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-xs); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--color-accent) !important;
}

/* Group block → navy brand section */
.wp-block-group.is-style-at-navy {
  background: var(--navy-800); color: var(--text-on-brand);
  padding: var(--space-9) var(--space-6);
  border-radius: var(--radius-lg);
}
.wp-block-group.is-style-at-navy :where(h1,h2,h3,h4,h5,h6) { color: var(--text-on-brand); }
.wp-block-group.is-style-at-navy p:not(.is-style-at-eyebrow) { color: var(--steel-200); }
.wp-block-group.is-style-at-navy .is-style-at-eyebrow { color: var(--steel-300) !important; }
/* Outline button needs to invert on the navy panel */
.wp-block-group.is-style-at-navy .wp-block-button.is-style-at-outline > .wp-block-button__link {
  color: var(--text-on-brand); border-color: color-mix(in srgb, #fff 45%, transparent);
}
.wp-block-group.is-style-at-navy .wp-block-button.is-style-at-outline > .wp-block-button__link:hover {
  background: color-mix(in srgb, #fff 12%, transparent); border-color: #fff; color: #fff;
}

/* Group block → steel-blue brand section */
.wp-block-group.is-style-at-steel {
  background: var(--steel-600); color: #fff;
  padding: var(--space-9) var(--space-6);
  border-radius: var(--radius-lg);
}
/* Group block → sunken (faint cool grey) brand section */
.wp-block-group.is-style-at-sunken {
  background: var(--surface-sunken);
  padding: var(--space-9) var(--space-6);
  border-radius: var(--radius-lg);
}
.wp-block-group.is-style-at-steel :where(h1,h2,h3,h4,h5,h6) { color: #fff; }
.wp-block-group.is-style-at-steel p:not(.is-style-at-eyebrow) { color: rgba(255,255,255,0.88); }
.wp-block-group.is-style-at-steel .is-style-at-eyebrow { color: #fff !important; }
.wp-block-group.is-style-at-steel .wp-block-button.is-style-at-outline > .wp-block-button__link {
  color: #fff; border-color: color-mix(in srgb, #fff 50%, transparent);
}
.wp-block-group.is-style-at-steel .wp-block-button.is-style-at-outline > .wp-block-button__link:hover {
  background: color-mix(in srgb, #fff 14%, transparent); border-color: #fff; color: #fff;
}

/* ═══════════════════ Marketing section patterns ═══════════════════
   Classes used by the registered block patterns (hero, services, stats).
   Built so the inner text stays editable core blocks. */

/* ── Hero ── */
.at-hero {
  position: relative; overflow: hidden; box-sizing: border-box;
  /* When set to Full width alignment, this band spans the whole viewport —
     but its content still needs to line up with the 1180px column the rest
     of the page's sections use, instead of a flat 40px inset. Padding grows
     with the viewport until it matches that column's own left/right gutter,
     then holds at a 40px floor on narrow screens. */
  padding-left: max(40px, calc((100vw - 1180px) / 2 + 40px));
  padding-right: max(40px, calc((100vw - 1180px) / 2 + 40px));
  background: var(--navy-700); color: #fff;
  padding-top: 88px; padding-bottom: 96px; border-radius: var(--radius-lg);
}
.at-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.07) 1.5px, transparent 0);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(105deg, #000 35%, transparent 80%);
  mask-image: linear-gradient(105deg, #000 35%, transparent 80%);
}
.at-hero::after {
  content: ""; position: absolute; top: -120px; right: -120px; width: 520px; height: 520px;
  z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(87,117,145,0.55), transparent 70%);
}
.at-hero > * {
  position: relative; z-index: 1; max-width: 940px;
  margin-left: 0 !important; margin-right: 0 !important;
}
.at-hero > p:not(.is-style-at-eyebrow), .at-hero > .at-hero__lead { max-width: 600px; }
.at-hero > .wp-block-buttons { max-width: none; }
.at-hero :where(h1,h2) { color: #fff; font-size: var(--text-5xl); line-height: 1.02; }
.at-hero :where(h1,h2) em { color: var(--steel-300); font-style: italic; }
.at-hero p:not(.is-style-at-eyebrow) { color: rgba(255,255,255,0.82); font-size: var(--text-lg); }
.at-hero .is-style-at-eyebrow { color: var(--steel-300) !important; }
.at-hero .wp-block-button.is-style-at-outline > .wp-block-button__link {
  color: #fff; border-color: color-mix(in srgb, #fff 38%, transparent);
}
.at-hero .wp-block-button.is-style-at-outline > .wp-block-button__link:hover {
  background: color-mix(in srgb, #fff 12%, transparent); border-color: #fff; color: #fff;
}

/* ── Section wrapper + card grid ── */
.at-section { padding: 72px 40px; background: var(--surface-card); }
.at-card-grid,
.at-card-grid--2,
.at-card-grid--3 {
  display: grid; gap: 20px; margin-top: 32px;
}
.at-card-grid   { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.at-card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.at-card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* both classes together → the variant wins */
.at-card-grid.at-card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.at-card-grid.at-card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.at-card-grid > *,
.at-card-grid--2 > *,
.at-card-grid--3 > * { margin: 0; }
/* Responsive collapse — !important so it overrides the inline desktop column
   count set by the Services grid block. */
@media (max-width: 1000px) {
  .at-card-grid, .at-card-grid--2, .at-card-grid--3,
  .at-card-grid.at-card-grid--2, .at-card-grid.at-card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
  .at-card-grid, .at-card-grid--2, .at-card-grid--3,
  .at-card-grid.at-card-grid--2, .at-card-grid.at-card-grid--3 { grid-template-columns: 1fr !important; }
}

/* Icon picker (block editor only — class unused on the front end) */
.at-icon-picker { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; max-height: 220px; overflow: auto; padding: 6px; border: 1px solid var(--border-subtle); border-radius: 8px; }
.at-icon-picker__btn { display: flex; align-items: center; justify-content: center; height: 36px; border: 1px solid transparent; border-radius: 6px; background: transparent; cursor: pointer; color: var(--navy-700); }
.at-icon-picker__btn:hover { background: var(--navy-50); }
.at-icon-picker__btn.is-selected { border-color: var(--color-accent); background: var(--red-50); color: var(--color-accent); }
.at-icon-search { width: 100%; box-sizing: border-box; margin-bottom: 6px; padding: 7px 10px; border: 1px solid var(--border-default); border-radius: 6px; font-size: 13px; }
.at-icon-empty { grid-column: 1 / -1; margin: 8px; font-size: 12px; color: #757575; text-align: center; }

/* ── Pricing packages (block) ── */
.at-pkg-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; align-items: stretch; margin-top: 32px; }
.at-pkg-grid > * { margin: 0; }
@media (max-width: 900px) { .at-pkg-grid { grid-template-columns: 1fr !important; } }
.at-pkg {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: 30px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); height: 100%;
}
.at-pkg.is-featured { background: var(--navy-800); border-color: var(--navy-800); box-shadow: var(--shadow-lg); position: relative; }
.at-pkg .at-pkg__badge {
  align-self: flex-start; background: var(--color-accent); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; margin-bottom: 14px;
}
.at-pkg .at-pkg__name { font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--text-strong); margin: 0; }
.at-pkg.is-featured .at-pkg__name { color: #fff; }
.at-pkg .at-pkg__price { font-family: var(--font-display); font-weight: 800; font-size: 30px; color: var(--text-strong); margin: 10px 0 0; }
.at-pkg .at-pkg__price small { font-family: var(--font-body); font-weight: 400; font-size: 14px; color: var(--text-muted); }
.at-pkg.is-featured .at-pkg__price { color: #fff; }
.at-pkg.is-featured .at-pkg__price small { color: var(--steel-300); }
.at-pkg .at-pkg__who { font-size: 14px; color: var(--text-muted); margin: 6px 0 0; min-height: 40px; }
.at-pkg.is-featured .at-pkg__who { color: var(--steel-300); }
.at-pkg .at-pkg__rule { border: 0; border-top: 1px solid var(--border-subtle); margin: 22px 0; width: 100%; }
.at-pkg.is-featured .at-pkg__rule { border-color: rgba(255,255,255,0.14); }
.at-pkg ul.at-pkg__list { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.at-pkg ul.at-pkg__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--text-body); }
.at-pkg.is-featured ul.at-pkg__list li { color: rgba(255,255,255,0.9); }
.at-pkg ul.at-pkg__list li svg { width: 18px; height: 18px; flex: none; color: var(--success-600); margin-top: 1px; }
.at-pkg.is-featured ul.at-pkg__list li svg { color: var(--steel-300); }
.at-pkg ul.at-pkg__list li.is-excluded { color: var(--text-muted); }
.at-pkg ul.at-pkg__list li.is-excluded svg { color: var(--danger-600); }
.at-pkg.is-featured ul.at-pkg__list li.is-excluded { color: rgba(255,255,255,0.55); }
.at-pkg .at-pkg__foot { margin-top: auto; }
/* RichText list editor inside the block */
.at-pkg ul.at-pkg__list[contenteditable] li::before,
.at-pkg ul.at-pkg__list .at-pkg__li svg { } /* check icon baked on save */

.at-service-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.at-service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.at-service-card > * { margin: 0; }
.at-service-card h3, .at-service-card h4 { font-size: var(--text-xl); }
.at-service-card p { color: var(--text-body); }

.at-icon-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; flex: none;
  background: var(--navy-50); color: var(--navy-700);
  border-radius: var(--radius-md);
}
.at-icon-tile--accent { background: var(--red-50); color: var(--color-accent); }
.at-icon-tile svg { width: 24px; height: 24px; }

/* ── Services grid: blue band variation (dark icons) ── */
.at-card-grid--navy {
  background: var(--navy-700);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 4vw, 48px);
}
.at-card-grid--navy .at-service-card {
  background: var(--navy-800);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: none;
}
.at-card-grid--navy .at-service-card:hover { box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.6); }
.at-card-grid--navy .at-service-card h3,
.at-card-grid--navy .at-service-card h4 { color: #fff; }
.at-card-grid--navy .at-service-card p { color: rgba(255, 255, 255, 0.74); }
/* Dark icons on light tiles */
.at-card-grid--navy .at-icon-tile { background: #fff; color: var(--navy-700); }
.at-card-grid--navy .at-icon-tile--accent { background: var(--red-50); color: var(--color-accent); }
.at-card-grid--navy .at-cardlink { color: var(--steel-300); }
.at-card-grid--navy .at-cardlink:hover { color: #fff; }

/* ── Services grid: steel cards (navy icons), blank background ── */
.at-card-grid--steel .at-service-card {
  background: var(--steel-100);
  border-color: var(--steel-200);
  box-shadow: none;
}
.at-card-grid--steel .at-service-card:hover { box-shadow: var(--shadow-sm); }
.at-card-grid--steel .at-icon-tile { background: #fff; color: var(--navy-700); }
.at-card-grid--steel .at-icon-tile--accent { background: var(--red-50); color: var(--color-accent); }

.at-cardlink,
.is-style-at-link {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-sm); color: var(--color-accent) !important;
  text-transform: none;
}

/* ── Stats band ── */
.at-stats { background: var(--navy-800); color: #fff; border-radius: var(--radius-lg); }
.at-stats .wp-block-columns { padding: 48px 32px; gap: 24px; margin: 0; }
.at-stat__n {
  font-family: var(--font-display); font-weight: 800; font-size: 44px;
  letter-spacing: -0.02em; color: #fff; margin: 0; text-align: center;
}
.at-stat__l {
  font-family: var(--font-body); font-size: 14px; color: var(--steel-300);
  margin: 4px 0 0; text-align: center;
}

/* ── CTA bands ── */
.at-cta-band {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl);
  padding: 56px 48px;
}
.at-cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.10) 1.5px, transparent 0);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(75deg, transparent 40%, #000);
  mask-image: linear-gradient(75deg, transparent 40%, #000);
}
.at-cta-band > * { position: relative; z-index: 1; }
.at-cta-band :where(h1,h2,h3) { color: #fff !important; margin: 0 0 8px; font-size: var(--text-4xl); }
.at-cta-band p:not(.is-style-at-eyebrow) { color: rgba(255,255,255,0.9) !important; font-size: var(--text-lg); margin: 0; }

/* Colour variants */
.at-cta-band--red  { background: var(--red-600); }
.at-cta-band--navy { background: var(--navy-800); }
.at-cta-band--steel{ background: var(--steel-600); }

/* Split layout: text left, actions right */
.at-cta-band.is-split {
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.at-cta-band.is-split .wp-block-buttons { margin: 0; }

/* On red/steel, the white button reads best; on navy, signal-red */
.at-cta-band .wp-block-button.is-style-at-primary > .wp-block-button__link {
  background: #fff; color: var(--red-700); border-color: #fff;
}
.at-cta-band--navy .wp-block-button.is-style-at-primary > .wp-block-button__link {
  background: var(--color-accent); color: #fff; border-color: var(--color-accent);
}
.at-cta-band .wp-block-button.is-style-at-outline > .wp-block-button__link {
  color: #fff; border-color: color-mix(in srgb, #fff 45%, transparent);
}
.at-cta-band .wp-block-button.is-style-at-outline > .wp-block-button__link:hover {
  background: color-mix(in srgb, #fff 14%, transparent); border-color: #fff; color: #fff;
}
.at-cta-band .is-style-at-eyebrow { color: rgba(255,255,255,0.85) !important; }

/* ── Site footer (template part) ── */
.at-footer {
  background: var(--navy-900);
  color: rgba(255,255,255,0.72);
}
.at-footer a { color: rgba(255,255,255,0.72); text-decoration: none; }
.at-footer a:hover { color: #fff; }
.at-footer .at-footer__brand {
  font-family: var(--font-display); font-weight: 800; font-size: 22px;
  letter-spacing: -0.01em; color: #fff !important; margin: 0 0 16px;
}
.at-footer .at-footer__addr { font-size: 14px; line-height: 1.8; color: rgba(255,255,255,0.72) !important; margin: 0; max-width: 280px; }
.at-footer .at-footer__addr a { color: var(--steel-300); }
.at-footer h2, .at-footer h3, .at-footer h4 {
  font-family: var(--font-display); font-weight: 700; font-size: 13px !important;
  letter-spacing: 0.08em; text-transform: uppercase; color: #fff !important; margin: 0 0 14px;
}
.at-footer ul { list-style: none; margin: 0; padding: 0; }
.at-footer ul li { margin: 0 0 9px; font-size: 14px; }
.at-footer .at-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 13px; color: rgba(255,255,255,0.5) !important;
}
.at-footer .at-footer__bottom p { color: rgba(255,255,255,0.5) !important; font-size: 13px; margin: 0; }
.at-footer .at-footer__bottom a { color: rgba(255,255,255,0.5); }

/* ── Site header (template part, sticky) ── */
/* ── Site header (template part, sticky) ──
   A template part renders wrapped in a .wp-block-template-part element, which is
   the real top-level child of .wp-site-blocks. Sticky must live on THAT wrapper —
   a sticky element pinned inside its own header-height wrapper just scrolls away
   with it. We target the wrapper two ways for robustness (class + :has). */
.at-header-tp,
.wp-block-template-part:has(> .at-header) {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100;
}
.at-header {
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
  padding-top: 0; padding-bottom: 0;
}
/* sticky breaks if an ancestor clips overflow — keep the chain visible.
   NB: do NOT include html/body here — in the post editor those are the scroll
   container, and overflow:visible!important on them disables editor scrolling. */
.wp-site-blocks, .wp-site-blocks > main { overflow: visible !important; }
.at-header > .wp-block-group { min-height: 72px; }
.at-header .wp-block-site-logo img { max-height: 34px; width: auto; }
.at-header .wp-block-site-title a {
  font-family: var(--font-display); font-weight: 800; font-size: 20px;
  letter-spacing: -0.01em; color: var(--navy-700) !important; text-decoration: none;
}
/* Standard WordPress menu (Navigation block) */
.at-header .wp-block-navigation {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
}
.at-header .wp-block-navigation a,
.at-header .wp-block-navigation .wp-block-navigation-item__content {
  color: var(--text-muted) !important; text-decoration: none;
  padding: 8px 14px; border-radius: var(--radius-md);
}
.at-header .wp-block-navigation a:hover,
.at-header .wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--navy-700) !important; background: var(--navy-50);
}
/* Current page → navy pill */
.at-header .wp-block-navigation .current-menu-item > a,
.at-header .wp-block-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
  color: var(--navy-700) !important; background: var(--navy-50);
}
.at-header .wp-block-navigation .wp-block-navigation-submenu__toggle { color: var(--text-muted) !important; }

/* ── Submenus (dropdowns) ──
   Built-in to the Navigation block: in the editor, select a menu item, click the
   submenu (downward chevron) toggle in its toolbar, then add child links. They
   render as a dropdown below the parent on the front end. */
.at-header .wp-block-navigation .wp-block-navigation-submenu {
  /* parent stays inline */
}
.at-header .wp-block-navigation .wp-block-navigation__submenu-container {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  min-width: 230px;
  /* No margin-top: a gap here sits OUTSIDE both the parent link and this
     dropdown, so moving the mouse down through it breaks the :hover chain and
     the menu closes before you can reach an item. Sit flush instead. */
  margin-top: 0;
}
.at-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block; padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--text-body) !important; font-size: 13px !important; font-weight: 400 !important;
}
.at-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--navy-50); color: var(--navy-700) !important;
}
.at-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item { width: 100%; }

/* Mobile overlay menu → white with dark links, full-viewport overlay (not inline in the header) */
.at-header .wp-block-navigation__responsive-container.is-menu-open {
  position: fixed !important; inset: 0 !important; z-index: 9999;
  width: 100vw !important; height: 100vh !important;
  background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.at-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  min-height: 100%; box-sizing: border-box; padding: 24px;
}
.at-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  flex-direction: column; align-items: stretch; gap: 4px;
}
.at-header .wp-block-navigation__responsive-container.is-menu-open a,
.at-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--text-strong) !important; }
.at-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { box-shadow: none; border: 0; padding-left: 12px; }
.at-header .wp-block-navigation__responsive-container-open { color: var(--navy-700) !important; }
/* Right-side phone + actions */
.at-header__phone {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: var(--navy-700) !important; text-decoration: none; margin: 0;
}
.at-header__phone a { color: var(--navy-700) !important; text-decoration: none; }

/* ── Testimonials section (Real Testimonials plugin wrapper) ──
   Reproduces the mockup's centered single-quote look: white section, decorative
   quote mark, large display-font quote, name + location. The plugin supplies
   the review text/name/location; the theme forces the layout, type, and colours
   so it matches the design regardless of the plugin's own style settings. */
.at-testimonials {
  background: var(--surface-card);
  padding: 72px 32px;
  text-align: center;
}
.at-testimonials.is-sunken { background: var(--surface-sunken); }
.at-testimonials.is-navy { background: var(--navy-800); }
.at-testimonials__mark { display: flex; justify-content: center; margin-bottom: 16px; color: var(--steel-400); }
.at-testimonials__mark svg { width: 40px; height: 40px; }
.at-testimonials__head { max-width: 720px; margin: 0 auto 28px; text-align: center; }
.at-testimonials__head h2 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: var(--text-4xl); color: var(--text-strong); margin: 0;
}
.at-testimonials.is-navy .at-testimonials__head h2 { color: #fff; }

/* Plugin output → large centered display quote */
.at-testimonials [class*="content"] p,
.at-testimonials [class*="-text"],
.at-testimonials blockquote {
  font-family: var(--font-display) !important; font-weight: 600;
  font-size: 30px; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--text-strong) !important;
  max-width: 860px; margin: 0 auto 22px !important;
}
/* Reviewer name → display, strong */
.at-testimonials [class*="client-name"],
.at-testimonials [class*="reviewer"],
.at-testimonials [class*="-name"] {
  font-family: var(--font-display) !important; font-weight: 700;
  font-size: 16px; color: var(--text-strong) !important;
}
/* Position / company / location → muted body */
.at-testimonials [class*="position"],
.at-testimonials [class*="company"],
.at-testimonials [class*="designation"],
.at-testimonials [class*="-info"] p {
  font-family: var(--font-body) !important; font-weight: 400;
  font-size: 14px; color: var(--text-muted) !important;
}
/* Navy variant inverts text */
.at-testimonials.is-navy [class*="content"] p,
.at-testimonials.is-navy blockquote { color: #fff !important; }
.at-testimonials.is-navy [class*="-name"] { color: #fff !important; }
.at-testimonials.is-navy [class*="position"],
.at-testimonials.is-navy [class*="company"] { color: var(--steel-300) !important; }

/* ════════════════════ Contact page ════════════════════ */

/* Compact navy page header */
.at-pagehead {
  position: relative; overflow: hidden;
  background: var(--navy-700); color: #fff;
  padding: 64px 32px;
}
.at-pagehead::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.07) 1.5px, transparent 0);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(105deg, #000 30%, transparent 78%);
  mask-image: linear-gradient(105deg, #000 30%, transparent 78%);
}
.at-pagehead::after {
  content: ""; position: absolute; top: -140px; right: -100px; width: 460px; height: 460px;
  z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(87,117,145,0.5), transparent 70%);
}
.at-pagehead > .wp-block-group {
  position: relative; z-index: 1;
  max-width: 1180px; margin-left: auto !important; margin-right: auto !important;
}
/* If a heading/paragraph here ever carries alignwide/alignfull (WordPress core
   pulls those to the true viewport edge via a negative margin), neutralize it so
   it stays flush with its siblings instead of bleeding past the section padding. */
.at-pagehead .alignwide, .at-pagehead .alignfull {
  margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important;
}
/* WordPress's "constrained" layout auto-centers EACH child individually based on
   its own max-width (margin-left/right: auto !important) — that's why the H1
   (max-width 640px) and paragraph (580px) didn't share a left edge. Force every
   direct child back to flush-left. */
.at-pagehead > .wp-block-group > * {
  margin-left: 0 !important; margin-right: auto !important;
}
.at-pagehead .is-style-at-eyebrow { color: var(--steel-300) !important; }.at-pagehead h1 {
  font-family: var(--font-display); font-weight: 800; font-size: 48px; line-height: 1.05;
  letter-spacing: -0.02em; color: #fff !important; margin: 14px 0 0; max-width: 640px;
}
.at-pagehead p { font-size: 19px; line-height: 1.6; color: rgba(255,255,255,0.82) !important; margin: 16px 0 0; max-width: 580px; }

/* ── Search results page ── */
.at-pagehead .wp-block-query-title { font-family: var(--font-display); font-weight: 800; font-size: 34px; color: #fff !important; margin: 12px 0 0; }
.at-pagehead .wp-block-search.at-search__refine { margin-top: 22px; max-width: 460px; }
.at-search__refine .wp-block-search__inside-wrapper { border-radius: var(--radius-md); overflow: hidden; border: 0 !important; }
.at-search__refine .wp-block-search__input { height: 46px; border: 0 !important; padding: 0 16px; font-size: 15px; }
.at-search__refine .wp-block-search__button {
  height: 46px; padding: 0 20px; background: var(--color-accent) !important; color: #fff !important;
  border: 0 !important; font-family: var(--font-display); font-weight: 700;
}
.at-search__refine .wp-block-search__button:hover { background: var(--color-accent-hover) !important; }

.at-search-shell { padding: 40px 32px 80px; }
.at-search-grid .wp-block-post-template {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px;
  list-style: none; margin: 0; padding: 0;
}
.at-search-card {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden;
  background: #fff; transition: box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.at-search-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-default); }
.at-search-card__media { margin: 0; aspect-ratio: 1; background: var(--surface-sunken); }
.at-search-card__media img { width: 100%; height: 100%; object-fit: cover; }
.at-search-card__body { padding: 16px 18px 20px; }
.at-search-card__kicker {
  display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 6px;
}
.at-search-card__body h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 0 0 6px; }
.at-search-card__body h3 a { color: var(--text-strong); text-decoration: none; }
.at-search-card__excerpt { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin: 0 0 10px; }
.at-search-card__cta { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--navy-700); margin: 0; }

.at-search-empty { text-align: center; padding: 64px 20px; max-width: 480px; margin: 0 auto; }
.at-search-empty h2 { font-family: var(--font-display); font-weight: 800; font-size: 24px; margin: 0 0 10px; }
.at-search-empty p { color: var(--text-muted); font-size: 15px; margin: 0 0 24px; }
.at-search-empty .wp-block-buttons { justify-content: center; }

.at-search-loadmore { display: flex; justify-content: center; margin-top: 40px; }
@media (max-width: 560px) {
  .at-pagehead .wp-block-query-title { font-size: 26px; }
  .at-search-grid .wp-block-post-template { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* ── 404 (Not Found) page ──
   Same navy band treatment as .at-pagehead, centered, with a large brand-styled
   "404" numeral, a search box, and quick-link buttons back into the site. */
.at-404 {
  position: relative; overflow: hidden; background: var(--navy-700); color: #fff;
  padding: 96px 32px; text-align: center;
}
.at-404::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.07) 1.5px, transparent 0);
  background-size: 22px 22px; mask-image: radial-gradient(ellipse at center, #000 40%, transparent 78%);
}
.at-404 > .wp-block-group {
  position: relative; z-index: 1; max-width: 640px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
}
.at-404__code {
  font-family: var(--font-display); font-weight: 800; font-size: 120px; line-height: 1;
  letter-spacing: -0.03em; color: var(--color-accent); margin: 0 0 8px;
}
.at-404 h1 {
  font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1.15;
  color: #fff; margin: 0 0 14px;
}
.at-404 p:not(.at-404__code) {
  font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.8); margin: 0 0 32px; max-width: 480px;
}
.at-404__search.wp-block-search { width: 100%; max-width: 420px; margin: 0 0 32px; }
.at-404__search .wp-block-search__inside-wrapper {
  border-radius: var(--radius-md); overflow: hidden; border: 0 !important;
}
.at-404__search .wp-block-search__input {
  height: 48px; border: 0 !important; padding: 0 16px; font-size: 15px; font-family: var(--font-body);
}
.at-404__search .wp-block-search__button {
  height: 48px; padding: 0 20px; background: var(--color-accent) !important; color: #fff !important;
  border: 0 !important; font-family: var(--font-display); font-weight: 700;
}
.at-404__search .wp-block-search__button:hover { background: var(--color-accent-hover) !important; }
.at-404 .wp-block-buttons { justify-content: center; flex-wrap: wrap; }
.at-404 .wp-block-button.is-style-at-primary > .wp-block-button__link {
  background: var(--color-accent); border-color: var(--color-accent);
}
.at-404 .wp-block-button.is-style-at-outline > .wp-block-button__link {
  color: #fff; border-color: color-mix(in srgb, #fff 40%, transparent);
}
.at-404 .wp-block-button.is-style-at-outline > .wp-block-button__link:hover {
  background: color-mix(in srgb, #fff 12%, transparent); border-color: #fff; color: #fff;
}
@media (max-width: 560px) {
  .at-404 { padding: 64px 24px; }
  .at-404__code { font-size: 84px; }
  .at-404 h1 { font-size: 26px; }
}

/* ── Legal document pages (Privacy Policy, Terms of Service) ──
   Pagehead comes from .at-pagehead above. This is the two-column body: a sticky
   table-of-contents sidebar + a prose card. Bleeds full-width the same manual way
   as My Account, since it sits inside the normal (narrower) content column. */
.at-legal-bleed { position: relative; left: 50%; right: 50%; width: 100vw; margin-left: -50vw !important; margin-right: -50vw !important; }
.legal-shell { max-width: 1180px; margin: 0 auto; padding: 40px 32px 80px; display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; }
@media (max-width: 800px) { .legal-shell { grid-template-columns: 1fr; } }
.legal-toc { position: sticky; top: 24px; background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 20px; }
.legal-toc .t { font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 12px; }
.legal-toc a { display: block; padding: 7px 0; font-size: 14px; color: var(--text-body); text-decoration: none; border-bottom: 1px solid var(--border-subtle); }
.legal-toc a:last-child { border-bottom: 0; }
.legal-toc a:hover { color: var(--navy-700); }
.legal-card { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 40px; }
.legal-card > .wp-block-group { max-width: none; }
.legal-card h2 { font-family: var(--font-display); font-weight: 800; font-size: 21px; color: var(--text-strong); margin: 0 0 12px; letter-spacing: -0.01em; scroll-margin-top: 24px; }
.legal-card h2:not(:first-child) { margin-top: 34px; padding-top: 34px; border-top: 1px solid var(--border-subtle); }
.legal-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text-strong); margin: 20px 0 8px; }
.legal-card p { font-size: 15px; line-height: 1.7; color: var(--text-body); margin: 0 0 14px; max-width: none; }
.legal-card ul, .legal-card ol { margin: 0 0 14px; padding-left: 20px; }
.legal-card li { font-size: 15px; line-height: 1.7; color: var(--text-body); margin-bottom: 6px; }
.legal-card a { color: var(--navy-700); }

/* Contact body */
.at-contact { background: var(--surface-card); padding: 72px 32px 80px; }
.at-contact__grid {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: start;
}
@media (max-width: 900px) { .at-contact__grid { grid-template-columns: 1fr; gap: 32px; } }

/* Form card */
.at-form-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 36px;
}
.at-form-card > .at-eyebrow { display: block; margin-bottom: 6px; }
.at-form-card h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; font-size: 28px; margin: 0 0 24px; color: var(--text-strong); }
.at-form-card .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .at-form-card .field-row { grid-template-columns: 1fr; } }
.at-form-card .form-note { font-size: 13px; color: var(--text-muted); margin: 14px 0 0; text-align: center; }

/* ── About page: timeline ── */
.at-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.at-timeline > * { margin: 0; }
.at-timeline__item { border-left: 3px solid var(--color-accent); padding-left: 16px; }
.at-timeline__year { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--navy-700); }
.at-timeline__desc { font-size: 15px; color: var(--text-body); line-height: 1.55; margin-top: 6px; }
@media (max-width: 1000px) { .at-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .at-timeline { grid-template-columns: 1fr; } }

/* ── About page: visit us ── */
.at-visit-us { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.at-visit-us > * { margin: 0; }
.at-visit-us__copy h2 { font-size: 34px; margin: 10px 0 14px; }
.at-visit-us__copy > p:not(.is-style-at-eyebrow) { font-size: 17px; line-height: 1.65; color: var(--text-body); margin: 0 0 20px; }
.at-visit-us .at-map { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.at-visit-us .at-map iframe { display: block; }
@media (max-width: 900px) { .at-visit-us { grid-template-columns: 1fr; } }

/* Info column */
.at-info { display: flex; flex-direction: column; gap: 14px; }
.at-info-card {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 20px 22px;
}
.at-info-card .icon-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none; border-radius: var(--radius-md);
  background: var(--navy-50); color: var(--navy-700);
}
.at-info-card .icon-tile.accent { background: var(--red-50); color: var(--color-accent); }
.at-info-card .icon-tile svg { width: 22px; height: 22px; }
.at-info-card h3 {
  font-family: var(--font-display); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); margin: 2px 0 6px; font-weight: 700;
}
.at-info-card .v { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text-strong); line-height: 1.35; }
.at-info-card .v a { color: var(--text-strong); text-decoration: none; }
.at-info-card .sub { font-size: 14px; color: var(--text-body); margin-top: 3px; line-height: 1.5; }

/* Map placeholder */
.at-map { margin-top: 4px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-subtle); }
.at-map .ph {
  position: relative; height: 220px; display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(0deg, var(--steel-100), var(--steel-100) 1px, transparent 1px, transparent 28px),
    repeating-linear-gradient(90deg, var(--steel-100), var(--steel-100) 1px, transparent 1px, transparent 28px),
    var(--surface-sunken);
}
.at-map .pin {
  display: inline-flex; align-items: center; gap: 8px; background: var(--navy-800); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  padding: 9px 14px; border-radius: 999px; box-shadow: var(--shadow-md);
}
.at-map .pin svg { width: 16px; height: 16px; }
/* Real embed (Google Maps iframe) */
.at-map iframe, .at-map__frame { display: block; width: 100%; height: 260px; border: 0; }

/* ════════════════════ Service page ════════════════════ */

/* Breadcrumb (inside .at-pagehead) */
.at-crumb {
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  color: var(--steel-300); margin-bottom: 18px;
}
.at-crumb a { color: var(--steel-300); text-decoration: none; }
.at-crumb a:hover { color: #fff; }
/* Yoast / Rank Math breadcrumb separators */
.at-crumb .breadcrumb_last, .at-crumb [aria-current] { color: #fff; }

/* Body layout: content + sidebar */
.at-service { background: var(--surface-card); padding: 64px 32px 80px; }
.at-service__layout {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 340px; gap: 56px; align-items: start;
}
.at-service__layout.is-full { grid-template-columns: minmax(0, 760px); justify-content: center; }
@media (max-width: 900px) {
  .at-service__layout, .at-service__layout.is-full { grid-template-columns: 1fr; gap: 40px; }
}

/* Prose */
.at-prose > * + * { margin-top: 18px; }
.at-prose > * + h2 { margin-top: 44px; }
.at-prose p { font-size: 17px; line-height: 1.7; color: var(--text-body); }
.at-prose .lead, .at-prose .is-style-lead { font-size: 20px; line-height: 1.6; color: var(--text-strong); }
.at-prose h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; font-size: 30px; margin-bottom: 4px; color: var(--text-strong); }

/* Numbered heading style (auto 01, 02, 03 …, small + steel) — Heading block → AT — Numbered.
   Counter resets per content column so each Service page starts at 01. */
.at-prose, .entry-content, .wp-block-post-content { counter-reset: at-section; }
.is-style-at-numbered { counter-increment: at-section; }
.is-style-at-numbered::before {
  content: counter(at-section, decimal-leading-zero);
  color: var(--steel-400);
  font-size: 0.5em; font-weight: 700;
  margin-right: 12px; vertical-align: 0.18em;
}
.at-prose h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--text-strong); }

/* Feature grid */
.at-features { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.at-features.is-one-col { grid-template-columns: 1fr; }
@media (max-width: 640px) { .at-features { grid-template-columns: 1fr; } }
.at-feature {
  display: flex; gap: 13px; align-items: flex-start; padding: 18px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card);
}
.at-feature .ic {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  flex: none; border-radius: var(--radius-md); background: var(--navy-50); color: var(--navy-700);
}
.at-feature .ic svg { width: 19px; height: 19px; }
.at-feature h4 { font-family: var(--font-display); font-weight: 700; margin: 2px 0 4px; font-size: 16px; color: var(--text-strong); }
.at-feature p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-body); }

/* Steps */
.at-steps { margin-top: 24px; display: flex; flex-direction: column; }
.at-step { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--border-subtle); }
.at-step:last-child { border-bottom: 0; }
.at-step .num {
  flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--navy-700); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
}
.at-step h4 { font-family: var(--font-display); font-weight: 700; margin: 6px 0 4px; font-size: 18px; color: var(--text-strong); }
.at-step p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-body); }

/* Callout / featured quote */
.at-callout {
  margin-top: 36px; border-left: 4px solid var(--color-accent); background: var(--surface-sunken);
  border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 22px 26px;
}
.at-callout p, .at-callout blockquote {
  margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 19px;
  line-height: 1.45; color: var(--text-strong);
}
/* When fed by Real Testimonials, strip the plugin's own chrome inside the callout */
.at-callout [class*="content"] p { font-family: var(--font-display) !important; font-weight: 600; font-size: 19px; }
.at-callout [class*="image"], .at-callout [class*="rating"], .at-callout [class*="-info"] { display: none !important; }

/* Sidebar */
.at-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 900px) { .at-side { position: static; } }
.at-cta-card { background: var(--navy-800); color: #fff; border-radius: var(--radius-lg); padding: 26px; position: relative; overflow: hidden; }
.at-cta-card::after { content: ""; position: absolute; top: -80px; right: -80px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(87,117,145,0.4), transparent 70%); }
.at-cta-card > * { position: relative; }
.at-cta-card .at-eyebrow, .at-cta-card .is-style-at-eyebrow { color: var(--steel-300) !important; }
.at-cta-card h3 { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 22px; margin: 10px 0 8px; }
.at-cta-card p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.82); margin: 0 0 18px; }
.at-cta-card .ph { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #fff; margin-top: 14px; text-align: center; }

.at-facts { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 8px 22px; }

/* Checklist box (sidebar "Why us" / feature checklist) — editable List block;
   checkmarks are added automatically so list items stay plain editable text. */
.at-checklist { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 22px 24px; }
.at-checklist h2, .at-checklist h3, .at-checklist h4 {
  font-family: var(--font-display); font-weight: 700; font-size: 13px !important;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 14px;
}
.at-checklist ul.wp-block-list { list-style: none; margin: 0; padding: 0; }
.at-checklist ul.wp-block-list li {
  position: relative; padding-left: 28px; margin: 0 0 11px;
  font-size: 15px; line-height: 1.5; color: var(--text-body);
}
.at-checklist ul.wp-block-list li:last-child { margin-bottom: 0; }
.at-checklist ul.wp-block-list li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px;
  background-color: var(--success-600);
  -webkit-mask: no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  mask: no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.at-fact { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--border-subtle); }
.at-fact:last-child { border-bottom: 0; }
.at-fact .l { font-size: 14px; color: var(--text-muted); }
.at-fact .v { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--text-strong); }

/* Native-block facts list (sidebar pattern built from a core List block) */
.at-facts-box { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 4px 22px; }
.at-facts-box ul.at-facts-list { list-style: none; margin: 0; padding: 0; }
.at-facts-box ul.at-facts-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 0; border-bottom: 1px solid var(--border-subtle); margin: 0;
}
.at-facts-box ul.at-facts-list li:last-child { border-bottom: 0; }
.at-facts-box ul.at-facts-list li span { font-size: 14px; color: var(--text-muted); }
.at-facts-box ul.at-facts-list li strong { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--text-strong); }
/* Full-width button inside the CTA card */
.at-cta-card .wp-block-button.wp-block-button__width-100 { width: 100%; }
.at-cta-card .wp-block-button__width-100 .wp-block-button__link { width: 100%; }

/* Self-contained 2-column service body (core Columns pattern) */
.at-service-cols { align-items: flex-start; margin: 8px 0; }
.at-service-cols .at-prose > *:first-child { margin-top: 0; }
@media (min-width: 782px) {
  .at-service-cols > .wp-block-column > .at-side { position: sticky; top: 96px; }
}

/* ════════════════════ Patch Management page ════════════════════
   Classes used by the advancedtech/patch-* block patterns. Text stays in
   editable core blocks; the "dashboard" mocks are static wp:html (no JS). */

/* ── Hero: navy, two-column (copy + console mock) ── */
.at-patch-hero { position: relative; overflow: hidden; background: var(--navy-700); color: #fff; padding: 40px 40px 88px; }
.at-patch-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.07) 1.5px, transparent 0);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(110deg, #000 30%, transparent 78%);
  mask-image: linear-gradient(110deg, #000 30%, transparent 78%);
}
.at-patch-hero::after {
  content: ""; position: absolute; top: -140px; right: -100px; width: 560px; height: 560px;
  z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(87,117,145,0.5), transparent 70%);
}
.at-patch-hero > * { position: relative; z-index: 1; }
.at-patch-hero__grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
@media (max-width: 960px) { .at-patch-hero__grid { grid-template-columns: 1fr; gap: 40px; } }
.at-patch-hero .at-crumb { margin: 0 0 28px; }
.at-patch-hero h1 {
  font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 1.02;
  letter-spacing: -0.02em; color: #fff !important; margin: 12px 0 0; max-width: 560px;
}
.at-patch-hero h1 em { color: var(--steel-300); font-style: italic; }
.at-patch-hero .is-style-at-eyebrow { color: var(--color-accent) !important; }
.at-patch-hero > .at-patch-hero__grid p:not(.is-style-at-eyebrow) {
  font-size: 19px; line-height: 1.6; color: rgba(255,255,255,0.82) !important; margin: 20px 0 0; max-width: 540px;
}
.at-patch-hero .wp-block-buttons { margin-top: 32px; }
.at-patch-hero .wp-block-button.is-style-at-outline > .wp-block-button__link { color: #fff; border-color: color-mix(in srgb, #fff 38%, transparent); }
.at-patch-hero .wp-block-button.is-style-at-outline > .wp-block-button__link:hover { background: color-mix(in srgb, #fff 12%, transparent); border-color: #fff; color: #fff; }
.at-patch-hero__stats { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 36px; }
.at-patch-hero__stats .n { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; color: #fff; }
.at-patch-hero__stats .l { font-family: var(--font-body); font-size: 13px; color: var(--steel-300); }

/* ── Console / dashboard mock (dark card) ── */
.at-dash { background: var(--navy-900); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; box-shadow: 0 30px 70px -28px rgba(0,0,0,0.7); overflow: hidden; }
.at-dash__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.at-dash__bar i { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
.at-dash__bar i:nth-child(1) { background: var(--red-500); }
.at-dash__bar i:nth-child(2) { background: var(--steel-400); }
.at-dash__bar i:nth-child(3) { background: rgba(255,255,255,0.25); }
.at-dash__bar span { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.55); margin-left: 8px; }
.at-dash__top { padding: 20px; display: flex; gap: 22px; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.08); }
.at-dash__meters { flex: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.at-dash__list { padding: 6px 8px 10px; }
.at-dash__row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 10px 12px; }
.at-dash__row .name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.at-dash__row .name i { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.at-dash__row .name b { font-family: var(--font-body); font-weight: 400; font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-dash__row .kb { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.5); }
.at-dash__row .st { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.is-ok { color: var(--success-600); } .is-ok-bg { background: var(--success-600); }
.is-wait { color: var(--steel-300); } .is-wait-bg { background: var(--steel-300); }
.is-due { color: var(--red-500); } .is-due-bg { background: var(--red-500); }

/* Donut */
.at-donut { position: relative; width: 132px; height: 132px; flex: none; }
.at-donut svg { transform: rotate(-90deg); }
.at-donut .track { fill: none; stroke: rgba(255,255,255,0.14); stroke-width: 9; }
.at-donut .val { fill: none; stroke: var(--steel-300); stroke-width: 9; stroke-linecap: round; }
.at-donut__c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.at-donut__c b { font-family: var(--font-display); font-weight: 800; font-size: 30px; color: #fff; letter-spacing: -0.02em; }
.at-donut__c span { font-family: var(--font-mono); font-size: 11px; color: var(--steel-300); text-transform: uppercase; letter-spacing: 0.08em; }

/* Meter (labelled progress bar) — works on dark and light panels */
.at-meter { display: flex; flex-direction: column; gap: 6px; }
.at-meter__head { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.7); }
.at-meter__head b { color: #fff; font-weight: 400; }
.at-meter__track { height: 7px; border-radius: 99px; background: rgba(255,255,255,0.12); overflow: hidden; }
.at-meter__fill { height: 100%; border-radius: 99px; background: var(--steel-400); }

/* ── Feature rows (alternating copy + panel) ── */
.at-feature-row { padding: 76px 40px; background: var(--surface-card); border-top: 1px solid var(--border-subtle); }
.at-feature-row.is-sunken { background: var(--surface-page); }
.at-feature-row__grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .at-feature-row__grid { grid-template-columns: 1fr; gap: 36px; } }
.at-feature-row.is-reverse .at-feature-row__copy { order: 2; }
.at-feature-row.is-reverse .at-feature-row__panel { order: 1; }
@media (max-width: 900px) { .at-feature-row.is-reverse .at-feature-row__copy, .at-feature-row.is-reverse .at-feature-row__panel { order: initial; } }
.at-feature-row__copy h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; font-size: 38px; margin: 10px 0 16px; color: var(--text-strong); }
.at-feature-row__copy p { font-size: 17.5px; line-height: 1.65; color: var(--text-body); margin: 0; }

/* Run list (light checklist panel) */
.at-runlist { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: 12px; box-shadow: var(--shadow-md); overflow: hidden; }
.at-runlist__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border-subtle); }
.at-runlist__head b { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text-strong); }
.at-runlist__body { padding: 8px 8px 12px; }
.at-runlist__item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; }
.at-runlist__item .tick { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: var(--navy-50); color: var(--navy-700); flex: none; }
.at-runlist__item .tick svg { width: 15px; height: 15px; }
.at-runlist__item .t { display: block; font-family: var(--font-body); font-weight: 600; font-size: 14.5px; color: var(--text-strong); }
.at-runlist__item .s { display: block; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }

/* Policy panel (dark deploy card) */
.at-policy { background: var(--navy-800); border-radius: 12px; padding: 22px; color: #fff; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 16px; }
.at-policy__head { display: flex; justify-content: space-between; align-items: center; }
.at-policy__head b { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.at-policy__head span { font-family: var(--font-mono); font-size: 11px; color: var(--steel-300); }
.at-policy__foot { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 14px; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.65); }
.at-policy__foot b { color: #fff; font-weight: 400; }

/* ── Flexibility cards (navy icon tile) ── */
.at-flex-card { display: flex; flex-direction: column; gap: 12px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-xs); }
.at-flex-card > * { margin: 0; }
.at-flex-card .tile { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--navy-700); color: #fff; }
.at-flex-card .tile svg { width: 24px; height: 24px; }
.at-flex-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--text-strong); }
.at-flex-card p { font-size: 15px; line-height: 1.6; color: var(--text-body); }

/* ── Feature row pattern (2-column Columns block: text + visual) ── */
.at-feature-section .at-feature-cols { align-items: center; }
/* When a navy (or any) background is set on the full-width feature section,
   TwentyTwentyFive's root-padding containment can stop it bleeding to the screen
   edges. Force the viewport breakout so the band is always full width; the inner
   columns stay constrained to the 1180 content measure and centered. */
.at-feature-section.has-background,
.wp-block-group.is-style-at-navy.alignfull {
  width: 100vw !important; max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
}
/* WooCommerce wraps the product Description in boxed containers that clip a
   full-width breakout. Let alignfull sections escape to the viewport edges. */
.single-product .woocommerce-tabs,
.single-product .woocommerce-Tabs-panel,
.single-product .wc-tabs-wrapper,
.single-product .woocommerce-tabs .panel,
.single-product div.product,
.single-product .entry-content { overflow: visible !important; }
.at-feature-cols .is-style-at-eyebrow { display: block; margin-bottom: 10px; }
.at-feature-cols h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; font-size: 38px; margin: 0 0 16px; color: var(--text-strong); }
.at-feature-cols p { font-size: 17.5px; line-height: 1.65; color: var(--text-body); margin: 0; }
.at-feature-cols .at-feature-panel { margin: 0; }
.at-feature-cols .at-feature-panel img { width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); }
@media (max-width: 781px) {
  .at-feature-cols h2 { font-size: 30px; }
}

/* ════════════ AT — Carousel (scroll-snap slider) ════════════ */
.at-carousel {
  position: relative; margin: 28px 0;
  display: grid; grid-template-columns: 1fr auto;
  grid-template-areas: "viewport viewport" "dots nav"; align-items: center;
}
.at-carousel__viewport { grid-area: viewport; overflow: hidden; }
.at-carousel__track {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: 10px; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.at-carousel__track::-webkit-scrollbar { height: 8px; }
.at-carousel__track::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 99px; }
.at-carousel.is-w-narrow .at-slide { flex: 0 0 260px; }
.at-carousel.is-w-medium .at-slide { flex: 0 0 340px; }
.at-carousel.is-w-wide   .at-slide { flex: 0 0 60%; }
.at-slide { scroll-snap-align: start; min-width: 0; text-decoration: none; }
a.at-slide { color: inherit; display: block; }
.at-story-slide__eyebrow-field { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); margin: 10px 0 0; }
.at-story-slide__heading-field { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text-strong); margin: 4px 0 0; }
.at-story-slide__text-field { font-size: 13px; color: var(--text-muted); margin: 4px 0 0; }
/* Editor: slides laid out by InnerBlocks horizontal flow */
.at-carousel .block-editor-inner-blocks > .block-editor-block-list__layout { display: flex; gap: 22px; overflow-x: auto; }
.at-carousel.is-w-narrow .block-editor-block-list__layout > .wp-block { flex: 0 0 260px; }
.at-carousel.is-w-medium .block-editor-block-list__layout > .wp-block { flex: 0 0 340px; }
.at-carousel.is-w-wide   .block-editor-block-list__layout > .wp-block { flex: 0 0 60%; }

/* ── Media surface (shared by slides + feature-row images) ── */
.at-slide__media,
.at-media--white, .at-media--light, .at-media--dark {
  border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.at-slide__media img, .at-slide__media video,
.at-media--white img, .at-media--light img, .at-media--dark img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.at-slide__media.is-surface-white,  .at-media--white  { background: #fff; border: 1px solid var(--border-subtle); }
.at-slide__media.is-surface-light,  .at-media--light  { background: var(--surface-page); }
.at-slide__media.is-surface-dark,   .at-media--dark   { background: var(--navy-900); padding: 8px; }
/* Dark surface: pad + contain so a black-cornered image/video blends into the panel */
.at-slide__media.is-surface-dark img, .at-slide__media.is-surface-dark video, .at-media--dark img { object-fit: contain; border-radius: var(--radius-lg); }
.at-slide__add {
  border: 1px dashed var(--border-strong); background: transparent; border-radius: var(--radius-md);
  padding: 10px 14px; cursor: pointer; color: var(--text-muted); font-family: var(--font-body);
}
.at-slide__title { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text-strong); margin: 0 0 6px; }
.at-slide__text { font-size: 14.5px; line-height: 1.55; color: var(--text-body); margin: 0; }
/* The hero-carousel-slide's empty state sits on a dark navy background even
   in the editor — the default gray dashed button/text was nearly invisible
   against it. */
.at-hero-carousel-slide__media.is-empty .at-slide__add {
  border-color: rgba(255,255,255,.5); color: #fff; background: rgba(255,255,255,.08);
  position: relative; z-index: 1;
}
.at-hero-carousel-slide__media.is-empty .at-slide__add:hover { background: rgba(255,255,255,.16); border-color: #fff; }

/* Nav arrows + dots — footer row (dots left, arrows right) */
.at-carousel__nav { grid-area: nav; display: flex; gap: 10px; margin-top: 14px; }
.at-carousel__arrow {
  width: 44px; height: 44px; border-radius: 99px; border: 1px solid var(--border-default);
  background: #fff; color: var(--navy-700); font-size: 24px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: background var(--duration-fast) var(--ease-standard);
}
.at-carousel__arrow:hover { background: var(--surface-page); }
.at-carousel__arrow[disabled] { opacity: 0.4; cursor: default; }
.at-carousel__dots { grid-area: dots; display: flex; gap: 8px; justify-content: flex-start; margin-top: 14px; }
.at-carousel__dot { width: 8px; height: 8px; border-radius: 99px; border: 0; background: var(--border-default); cursor: pointer; padding: 0; }
.at-carousel__dot.is-active { background: var(--color-accent); }
@media (max-width: 781px) {
  .at-carousel.is-w-medium .at-slide, .at-carousel.is-w-narrow .at-slide { flex: 0 0 80%; }
  .at-carousel.is-w-wide .at-slide { flex: 0 0 90%; }
}
/* The block renders wp-block-media-text markup from PHP, so WordPress never
   sees core/media-text in post_content and never enqueues core's media-text
   stylesheet. Declare the grid ourselves so the block is self-sufficient —
   without this it falls back to block flow and the media stacks above the
   text regardless of mediaPosition. */
.at-mediatext { display: grid; grid-template-columns: 50% 1fr; grid-gap: 56px; align-items: center; }
.at-mediatext.is-vertically-aligned-top { align-items: start; }
.at-mediatext.is-vertically-aligned-bottom { align-items: end; }
.at-mediatext > .wp-block-media-text__media { grid-column: 1; grid-row: 1; margin: 0; }
.at-mediatext > .wp-block-media-text__content { grid-column: 2; grid-row: 1; }
.at-mediatext.has-media-on-the-right > .wp-block-media-text__media { grid-column: 2; grid-row: 1; }
.at-mediatext.has-media-on-the-right > .wp-block-media-text__content { grid-column: 1; grid-row: 1; }
.at-mediatext .wp-block-media-text__media img,
.at-mediatext .wp-block-media-text__media video { width: 100%; height: auto; display: block; }
.at-mediatext .wp-block-media-text__content { padding: 0; }
.wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr 1fr; }
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { grid-column: 2; grid-row: 1; }
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { grid-column: 1; grid-row: 1; }
.at-mediatext .is-style-at-eyebrow { display: block; margin-bottom: 10px; }
.at-mediatext h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; font-size: 38px; margin: 0 0 16px; color: var(--text-strong); }
.at-mediatext p:not(.is-style-at-eyebrow) { font-size: 17.5px; line-height: 1.65; color: var(--text-body); margin: 0 0 14px; }
.at-mediatext .wp-block-media-text__media img { border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); }
/* Base gutter for ANY Media & Text block (core has none by default), so the text
   never sits flush against the image. .at-mediatext / backgrounded variants set
   their own spacing and are left alone. */
.wp-block-media-text:not(.at-mediatext):not(.has-background) { column-gap: clamp(28px, 4vw, 56px); }
.wp-block-media-text:not(.at-mediatext):not(.has-background) > .wp-block-media-text__content { padding-inline: 0; }
@media (max-width: 781px) {
  .at-mediatext.is-stacked-on-mobile { grid-template-columns: 1fr; grid-gap: 28px; }
  .at-mediatext.is-stacked-on-mobile > .wp-block-media-text__media,
  .at-mediatext.is-stacked-on-mobile.has-media-on-the-right > .wp-block-media-text__media { grid-column: 1; grid-row: 1; }
  .at-mediatext.is-stacked-on-mobile > .wp-block-media-text__content,
  .at-mediatext.is-stacked-on-mobile.has-media-on-the-right > .wp-block-media-text__content { grid-column: 1; grid-row: 2; }
  .at-mediatext h2 { font-size: 30px; }
}

/* ── Media & Text: navy background + alignfull support ──
   Works when you set the block background to one of the dark palette colors
   (Navy / Navy Dark / Ink) or apply the "AT — Navy" block style. */
/* alignfull → the BACKGROUND bleeds edge-to-edge, but the media + text stay
   within the normal body column (centered), rather than stretching across the
   full viewport. We break out to 100vw for the background, then inset the grid
   with side padding equal to the gutter outside a 1180px content measure. */
.wp-block-media-text.alignfull {
  width: 100vw !important; max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
  padding-inline: max(32px, calc((100vw - var(--at-content, 1180px)) / 2)) !important;
}
/* On a full-bleed band give the column comfortable top/bottom room, and let the
   grid gutter (not extra content padding) separate the media from the text. */
.wp-block-media-text.alignfull.has-background { padding-block: clamp(40px, 6vw, 80px) !important; }
.wp-block-media-text.alignfull.has-background .wp-block-media-text__content { padding-inline: 0 !important; }
/* Give a backgrounded Media & Text comfortable inner padding */
.wp-block-media-text.has-background { border-radius: 0; }
.wp-block-media-text.has-background .wp-block-media-text__content { padding: clamp(28px, 4vw, 56px); }
/* Invert text on the dark navy backgrounds */
.wp-block-media-text.is-style-at-navy,
.wp-block-media-text.has-at-navy-background-color,
.wp-block-media-text.has-at-navy-dark-background-color,
.wp-block-media-text.has-at-ink-background-color {
  color: var(--text-on-brand, #fff);
}
.wp-block-media-text.is-style-at-navy,
.wp-block-media-text.has-at-navy-background-color,
.wp-block-media-text.has-at-navy-dark-background-color,
.wp-block-media-text.has-at-ink-background-color { background-color: var(--navy-800); }
.wp-block-media-text.is-style-at-navy { background: var(--navy-800); }
:is(.wp-block-media-text.is-style-at-navy, .wp-block-media-text.has-at-navy-background-color, .wp-block-media-text.has-at-navy-dark-background-color, .wp-block-media-text.has-at-ink-background-color) :where(h1,h2,h3,h4,h5,h6) { color: var(--text-on-brand, #fff); }
:is(.wp-block-media-text.is-style-at-navy, .wp-block-media-text.has-at-navy-background-color, .wp-block-media-text.has-at-navy-dark-background-color, .wp-block-media-text.has-at-ink-background-color) p:not(.is-style-at-eyebrow) { color: var(--steel-200); }
:is(.wp-block-media-text.is-style-at-navy, .wp-block-media-text.has-at-navy-background-color, .wp-block-media-text.has-at-navy-dark-background-color, .wp-block-media-text.has-at-ink-background-color) .is-style-at-eyebrow { color: var(--steel-300) !important; }
/* When the at-mediatext pattern is on a dark bg, drop the light image frame */
:is(.wp-block-media-text.is-style-at-navy, .wp-block-media-text.has-at-navy-background-color, .wp-block-media-text.has-at-navy-dark-background-color, .wp-block-media-text.has-at-ink-background-color) .wp-block-media-text__media img {
  border-color: rgba(255,255,255,0.12);
}

/* ── Patch checklist panel ── */
.at-panel { background: #fff; border: 1px solid var(--border-default); border-radius: 12px; box-shadow: var(--shadow-md); overflow: hidden; }
.at-panel__head { padding: 14px 18px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; }
.at-panel__title { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text-strong); }
.at-panel__body { padding: 8px 8px 12px; }
.at-panel__row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; }
.at-panel__check { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 99px; background: var(--navy-50); color: var(--navy-700); flex: none; }
.at-panel__row span b { display: block; font-family: var(--font-body); font-weight: 600; font-size: 14.5px; color: var(--text-strong); }
.at-panel__row span em { display: block; font-family: var(--font-mono, monospace); font-style: normal; font-size: 11.5px; color: var(--text-muted); }

/* ── Deploy status panel (navy) ── */
.at-deploy { background: var(--navy-800); border-radius: 12px; padding: 22px; color: #fff; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 16px; }
.at-deploy__head { display: flex; justify-content: space-between; align-items: center; }
.at-deploy__title { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.at-deploy__meta { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--steel-300); }
.at-bar { display: flex; flex-direction: column; gap: 6px; }
.at-bar__top { display: flex; justify-content: space-between; font-family: var(--font-mono, monospace); font-size: 12px; color: rgba(255,255,255,0.7); }
.at-bar__top .v { color: #fff; }
.at-bar__track { height: 7px; border-radius: 99px; background: rgba(255,255,255,0.12); overflow: hidden; }
.at-bar__fill { height: 100%; border-radius: 99px; }
.at-bar__fill.is-green { background: var(--success-600); }
.at-bar__fill.is-steel { background: var(--steel-400); }
.at-bar__fill.is-red { background: var(--red-500); }
.at-deploy__foot { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 14px; display: flex; justify-content: space-between; font-family: var(--font-mono, monospace); font-size: 12px; color: rgba(255,255,255,0.65); }
.at-deploy__foot .hl { color: #fff; }

/* ── Editable panel variants (built from core blocks) ── */
/* EDR white card */
.at-panel.is-editable .at-panel__head { padding: 14px 18px; }
.at-panel.is-editable .at-panel__body { padding: 8px 8px 12px; display: flex; flex-direction: column; }
.at-panel.is-editable p { margin: 0; }
.at-erow { display: flex; align-items: center; gap: 12px; padding: 11px 12px; }
.at-erow__ic { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 99px; background: var(--navy-50); color: var(--navy-700); flex: none; }
.at-erow__txt { gap: 0; }
.at-erow__txt .t { font-family: var(--font-body); font-weight: 600; font-size: 14.5px; color: var(--text-strong); }
.at-erow__txt .s { font-family: var(--font-mono, monospace); font-size: 11.5px; color: var(--text-muted); }
/* MDR navy card */
.at-deploy.is-editable p { margin: 0; }
.at-deploy.is-editable .at-deploy__title { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #fff; }
.at-deploy.is-editable .at-deploy__meta { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--steel-300); }
.at-deploy.is-editable .at-bar__top p { font-family: var(--font-mono, monospace); font-size: 12px; color: rgba(255,255,255,0.7); }
.at-deploy.is-editable .at-bar__top .v { color: #fff; }
.at-deploy.is-editable .at-deploy__foot p { font-family: var(--font-mono, monospace); font-size: 12px; color: rgba(255,255,255,0.65); }
.at-deploy.is-editable .at-deploy__foot .hl { color: #fff; }

/* ── Stat band ("why it matters") block ── */
.at-why-matters { background: var(--navy-800); color: #fff; }
/* Full-width: when set to alignfull, force the viewport breakout so the band
   bleeds edge-to-edge (TwentyTwentyFive / WooCommerce containers otherwise box it). */
.at-why-matters.alignfull {
  width: 100vw !important; max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
}
.at-why-matters__inner { max-width: var(--container-lg); margin: 0 auto; padding: clamp(48px, 6vw, 72px) 32px; }
.at-why-matters__head { max-width: 680px; margin-bottom: 40px; }
.at-why-matters__eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin: 0; }
.at-why-matters__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 4vw, 38px); letter-spacing: -0.02em; color: #fff; margin: 10px 0 0; }
.at-why-matters__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 22px; margin-bottom: 52px; }
.at-why-matters__stats .block-editor-inner-blocks,
.at-why-matters__stats .block-editor-block-list__layout { display: grid; grid-template-columns: inherit; gap: 22px; width: 100%; }
/* Explicit “stats per row” (set in the block sidebar) */
@media (min-width: 720px) {
  .at-why-matters.is-cols-2 .at-why-matters__stats,
  .at-why-matters.is-cols-2 .block-editor-block-list__layout { grid-template-columns: repeat(2, 1fr); }
  .at-why-matters.is-cols-3 .at-why-matters__stats,
  .at-why-matters.is-cols-3 .block-editor-block-list__layout { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 980px) {
  .at-why-matters.is-cols-4 .at-why-matters__stats,
  .at-why-matters.is-cols-4 .block-editor-block-list__layout { grid-template-columns: repeat(4, 1fr); }
}
.at-stat { border-top: 3px solid var(--color-accent); padding-top: 18px; }
.at-stat__value { font-family: var(--font-display); font-weight: 800; font-size: clamp(38px, 5vw, 48px); letter-spacing: -0.03em; color: #fff; line-height: 1; }
.at-stat__label { margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.78); }
.at-why-matters__threats { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 36px); }
.at-why-matters__threats h3 { margin: 0 0 20px; font-size: 19px; color: #fff; }
.at-why-matters .at-threats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 36px; }
.at-why-matters .at-threats li { position: relative; padding-left: 36px; font-family: var(--font-body); font-size: 15.5px; line-height: 1.4; color: rgba(255,255,255,0.86); display: flex; align-items: center; min-height: 24px; }
.at-why-matters .at-threats li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 99px; background: rgba(255,255,255,0.1); }
.at-why-matters .at-threats li::after { content: ""; position: absolute; left: 7px; top: 50%; width: 9px; height: 5px; border-left: 2px solid var(--steel-300); border-bottom: 2px solid var(--steel-300); transform: translateY(-65%) rotate(-45deg); }
/* Plain (light) theme */
.at-why-matters.is-plain { background: var(--surface-card); color: var(--text-strong); }
.at-why-matters.is-plain .at-why-matters__title { color: var(--text-strong); }
.at-why-matters.is-plain .at-stat__value { color: var(--text-strong); }
.at-why-matters.is-plain .at-stat__label { color: var(--text-body); }
.at-why-matters.is-plain .at-why-matters__threats { background: var(--surface-page); border-color: var(--border-default); }
.at-why-matters.is-plain .at-why-matters__threats h3 { color: var(--text-strong); }
.at-why-matters.is-plain .at-threats li { color: var(--text-body); }
.at-why-matters.is-plain .at-threats li::before { background: var(--navy-50); }
.at-why-matters.is-plain .at-threats li::after { border-color: var(--navy-700); }

/* Steel band theme */
.at-why-matters.is-steel { background: var(--steel-50); color: var(--text-strong); }
.at-why-matters.is-steel .at-why-matters__title { color: var(--text-strong); }
.at-why-matters.is-steel .at-stat__value { color: var(--navy-800); }
.at-why-matters.is-steel .at-stat__label { color: var(--text-body); }
.at-why-matters.is-steel .at-why-matters__threats { background: #fff; border-color: var(--steel-200); }
.at-why-matters.is-steel .at-why-matters__threats h3 { color: var(--text-strong); }
.at-why-matters.is-steel .at-threats li { color: var(--text-body); }
.at-why-matters.is-steel .at-threats li::before { background: var(--steel-100); }
.at-why-matters.is-steel .at-threats li::after { border-color: var(--navy-700); }
@media (max-width: 781px) {
  .at-why-matters__stats, .at-why-matters__stats .block-editor-block-list__layout,
  .at-why-matters .at-threats { grid-template-columns: 1fr; }
}

/* ── Comparison table block ── */
.at-compare { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: #fff; }
.at-compare__table { width: 100%; border-collapse: collapse; min-width: 640px; }
.at-compare__table th, .at-compare__table td { border-bottom: 1px solid var(--border-subtle); }
.at-compare__feat { text-align: left; padding: 20px; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.at-compare__table thead th { text-align: center; padding: 20px 18px; vertical-align: top; }
.at-compare__tier { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--text-strong); }
.at-compare__table thead th.is-featured .at-compare__tier { color: var(--color-accent); }
.at-compare__note { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 600; color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }
.at-compare__rowlabel { text-align: left; padding: 16px 20px; font-family: var(--font-body); font-size: 15.5px; color: var(--text-strong); }
.at-compare__cell { padding: 16px 18px; }
.at-compare__table td.is-featured, .at-compare__table th.is-featured { background: var(--navy-50); }
.at-compare__dash { display: inline-block; width: 14px; height: 2px; border-radius: 2px; background: var(--border-default); }
.at-compare__ctarow td { border-bottom: 0; padding: 22px 18px; }
.at-compare__ctarow .at-btn { display: inline-flex; }
/* Editing view: keep inputs compact */
.at-compare.is-editing .components-base-control { margin-bottom: 0; }
.at-compare.is-editing .at-compare__table input { text-align: center; }
.at-compare.is-editing .at-compare__rowlabel input { text-align: left; }

/* ── Steps / process flow block (auto-numbered via CSS counter) ── */
.at-stepflow {
  display: grid;
  grid-template-columns: repeat(var(--at-step-cols, 4), minmax(0, 1fr));
  gap: 22px;
  counter-reset: at-step;
  margin: 24px 0;
}
.at-stepflow.is-numbered { counter-reset: at-step; }
.at-stepcard { position: relative; }
.at-stepflow.is-numbered .at-stepcard { counter-increment: at-step; }
.at-stepcard__num { display: none; }
.at-stepflow.is-numbered .at-stepcard__num {
  display: block;
  font-family: var(--font-display); font-weight: 800; font-size: 34px;
  color: var(--steel-300); letter-spacing: -0.02em; line-height: 1; margin-bottom: 14px;
}
.at-stepflow.is-numbered .at-stepcard__num::before {
  content: counter(at-step, decimal-leading-zero);
}
.at-stepcard__title { margin: 0 0 8px; font-size: 20px; color: var(--text-strong); font-family: var(--font-display); font-weight: 700; }
.at-stepcard__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-body); }
/* Editor: lay the InnerBlocks out in the same grid */
.at-stepflow > .block-editor-inner-blocks > .block-editor-block-list__layout {
  display: grid;
  grid-template-columns: repeat(var(--at-step-cols, 4), minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 781px) {
  .at-stepflow,
  .at-stepflow > .block-editor-inner-blocks > .block-editor-block-list__layout { grid-template-columns: 1fr; }
}

/* ── Partners callout block (reversible 2-column) ── */
.at-partners { margin: 24px 0; }
.at-partners__inner {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: center;
  border-radius: var(--radius-xl); padding: clamp(28px, 4vw, 48px);
}
.at-partners.is-reversed .at-partners__inner { grid-template-columns: 1.4fr 1fr; }
.at-partners.is-reversed .at-partners__media { order: 2; }
.at-partners.is-reversed .at-partners__body { order: 1; }
/* Surfaces */
.at-partners.is-surface-steel .at-partners__inner { background: var(--steel-50); border: 1px solid var(--steel-200); }
.at-partners.is-surface-white .at-partners__inner { background: #fff; border: 1px solid var(--border-default); box-shadow: var(--shadow-sm); }
.at-partners.is-surface-navy .at-partners__inner { background: var(--navy-800); }
.at-partners.is-surface-none .at-partners__inner { background: transparent; padding: 0; }
/* Media column */
.at-partners__media img { max-width: 100%; height: auto; display: block; }
.at-partners__media .at-partners__label { font-family: var(--font-body); font-size: 13px; color: var(--text-muted); margin: 0 0 12px; }
.at-partners__placeholder { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); cursor: pointer; }
.at-partners__imgwrap img { border-radius: var(--radius-md); }
/* Body column */
.at-partners__body .at-partners__label { font-family: var(--font-body); font-size: 13px; color: var(--text-muted); margin: 0 0 8px; }
.at-partners__heading { font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -0.01em; margin: 0 0 12px; color: var(--text-strong); }
.at-partners__text { font-size: 16.5px; line-height: 1.65; color: var(--text-body); margin: 0; }
/* Navy surface text colors */
.at-partners.is-surface-navy .at-partners__heading { color: #fff; }
.at-partners.is-surface-navy .at-partners__text { color: rgba(255,255,255,0.8); }
.at-partners.is-surface-navy .at-partners__media .at-partners__label { color: var(--steel-300); }
@media (max-width: 781px) {
  .at-partners__inner, .at-partners.is-reversed .at-partners__inner { grid-template-columns: 1fr; gap: 24px; }
  .at-partners.is-reversed .at-partners__media { order: 1; }
  .at-partners.is-reversed .at-partners__body { order: 2; }
}

/* ── AT — Cards (compact icon + label) ── */
.at-cards {
  display: grid;
  grid-template-columns: repeat(var(--at-cards-cols, 4), minmax(0, 1fr));
  gap: 22px; margin: 24px 0;
}
.at-carditem {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  padding: 20px 22px; text-decoration: none; color: inherit;
}
a.at-carditem:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.at-carditem.has-text { align-items: flex-start; }
.at-carditem__tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--radius-md); flex: none;
  background: var(--navy-50); color: var(--navy-700);
}
.at-cards.is-tone-accent .at-carditem__tile { background: var(--red-50); color: var(--color-accent); }
.at-cards.is-tone-steel .at-carditem__tile { background: var(--steel-100); color: var(--navy-700); }
.at-carditem__body { display: flex; flex-direction: column; gap: 3px; }
.at-carditem__title { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; color: var(--text-strong); line-height: 1.25; }
.at-carditem__text { font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; color: var(--text-body); }
/* Editor: size cards by a comfortable min-width so they never crush in the
   narrow editor canvas (the front end still uses the exact column count). */
.at-cards > .block-editor-inner-blocks > .block-editor-block-list__layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 22px; align-items: start;
}
@media (max-width: 980px) {
  .at-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .at-cards { grid-template-columns: 1fr; }
}

/* ── AT — Feature showcase ("Key features at a glance") ──
   Grid of square-image tiles + captions, with an optional centered title. Light
   or dark tone. Column count via --at-fs-cols (block sets it inline). */
.at-feature-showcase { width: 100%; padding: var(--space-8) 0; }
.at-feature-showcase--dark {
  background: var(--neutral-900); border-radius: var(--radius-2xl);
  padding: var(--space-9) var(--space-6);
}
.at-feature-showcase__title {
  margin: 0 0 var(--space-7); text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-3xl);
  letter-spacing: var(--tracking-tight); color: var(--text-strong); text-wrap: balance;
}
.at-feature-showcase--dark .at-feature-showcase__title { color: #fff; }
.at-feature-showcase__grid {
  display: grid; grid-template-columns: repeat(var(--at-fs-cols, 4), minmax(0, 1fr)); gap: var(--space-6);
}
.at-feature-highlight { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.at-feature-highlight__media {
  position: relative; aspect-ratio: 1 / 1; width: 100%; overflow: hidden;
  border-radius: var(--radius-sm); background: var(--neutral-100);
  border: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center;
}
.at-feature-showcase--dark .at-feature-highlight__media { background: var(--neutral-800); border-color: rgba(255,255,255,0.06); }
.at-feature-highlight__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.at-feature-highlight__placeholder { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--text-subtle); }
.at-feature-highlight__label {
  margin: var(--space-2) 0 0; padding: 0 var(--space-3);
  text-align: center; font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--text-strong); text-wrap: balance;
}
.at-feature-showcase--dark .at-feature-highlight__label { color: #fff; }
.at-feature-highlight__text {
  margin: var(--space-2) 0 0; padding: 0 var(--space-3); text-align: center;
  font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-normal);
  color: var(--text-body); text-wrap: pretty;
}
.at-feature-showcase--dark .at-feature-highlight__text { color: rgba(255,255,255,0.72); }

/* Editor: tiles are spread as direct children of .at-feature-showcase__grid via
   useInnerBlocksProps, so the front-end grid rule above already lays them out.
   Just clear the editor block wrappers' default margins so rows stay even. */
.at-feature-showcase__grid > .wp-block,
.at-feature-showcase__grid > .block-editor-block-list__block { margin: 0; }
@media (max-width: 900px) {
  .at-feature-showcase__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* AT — Story showcase (caption-above center-peek carousel, transform-slide) */
.at-story-showcase { padding: var(--space-8, 48px) 0; }
.at-story-showcase__caption { width: 100%; max-width: 720px; margin: 0 auto var(--space-6, 32px); text-align: center; padding: 0 var(--space-4, 24px); box-sizing: border-box; }
.at-story-showcase__eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--red-600); margin: 0 0 10px; transition: opacity .2s ease;
}
.at-story-showcase__title {
  font-family: var(--font-display); font-weight: 700; font-size: 34px; letter-spacing: -0.01em;
  color: var(--navy-900); margin: 0 0 12px; line-height: 1.15; transition: opacity .2s ease;
}
.at-story-showcase__desc { font-size: 16px; line-height: 1.6; color: var(--text-muted, #66708a); margin: 0; transition: opacity .2s ease; }
.at-story-showcase__eyebrow.is-fading,
.at-story-showcase__title.is-fading,
.at-story-showcase__desc.is-fading { opacity: 0; }
.at-story-showcase__viewport { overflow: hidden; position: relative; cursor: grab; }
.at-story-showcase__viewport.is-dragging { cursor: grabbing; }
/* Editor-only: show all 3 slides full-size, unclipped, for easy editing —
   the front end (no .is-editor-view class) keeps the real center-peek sizing. */
.at-story-showcase__viewport.is-editor-view { overflow: visible; cursor: default; }
.at-story-showcase__viewport.is-editor-view .at-story-showcase__track { flex-wrap: wrap; }
.at-story-showcase__viewport.is-editor-view .at-story-slide {
  flex: 1 1 0; min-width: 200px; opacity: 1; transform: none; cursor: default;
}
.at-story-showcase__track {
  display: flex; gap: 24px; will-change: transform; align-items: stretch;
  transition: transform .55s cubic-bezier(.25,1,.4,1);
}
.at-story-slide {
  flex: 0 0 62%; cursor: pointer; border-radius: var(--radius-lg, 12px);
  overflow: hidden; opacity: .4; transform: scale(.86);
  transition: opacity .45s ease, transform .55s cubic-bezier(.25,1,.4,1);
  display: flex; flex-direction: column;
}
.at-story-slide.is-active { opacity: 1; transform: scale(1); cursor: default; }
.at-story-slide__media { width: 100%; aspect-ratio: 21/10; flex: none; }
.at-story-slide__media img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; }
.at-story-slide__eyebrow-data, .at-story-slide__title-data, .at-story-slide__text-data { display: none !important; }

/* ============================================================
   AT — Frequently Bought Together (custom, own markup)
   ============================================================ */
.at-fbt { max-width: 1080px; margin: var(--space-10, 64px) auto; padding: 0 var(--space-4, 24px); }
.at-fbt__title {
  font-family: var(--font-display); font-weight: 800; font-size: 32px; text-align: center;
  color: var(--text-strong); margin: 0 0 var(--space-8, 44px);
}
.at-fbt__row { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.at-fbt__op {
  flex: none; align-self: center; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--steel-600); color: #fff; font-size: 18px; font-weight: 700;
  box-shadow: var(--shadow-sm); margin: 0 var(--space-3, 16px);
}
.at-fbt__card {
  flex: 1 1 220px; min-width: 200px; display: flex; flex-direction: column; background: var(--surface-raised);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; transition: opacity .15s ease;
}
.at-fbt__card.is-excluded { opacity: .5; }
.at-fbt__media { padding: var(--space-5, 28px) var(--space-4, 24px) var(--space-3, 16px); text-align: center; }
.at-fbt__media img { max-width: 100%; aspect-ratio: 1; object-fit: contain; margin: 0 auto; display: block; }
.at-fbt__info { padding: var(--space-3, 16px) var(--space-4, 24px) var(--space-4, 24px); border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 4px; }
.at-fbt__name { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text-strong); margin: 0; line-height: 1.35; }
.at-fbt__price { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--text-strong); margin: 2px 0 0; display: flex; gap: 8px; align-items: baseline; }
.at-fbt__price-regular { font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--text-subtle); text-decoration: line-through; }
.at-fbt__desc { font-size: 13px; line-height: 1.5; color: var(--text-muted); margin: 0; }
.at-fbt__toggle {
  align-self: flex-start; margin-top: 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: var(--surface-raised); color: var(--text-body); font-family: var(--font-display); font-weight: 700;
  font-size: 12.5px; padding: 7px 18px; cursor: pointer;
}
.at-fbt__toggle.is-active { background: var(--neutral-100); color: var(--text-muted); border-color: var(--border-subtle); cursor: default; }
.at-fbt__toggle:not(.is-active) { border-color: var(--steel-600); color: var(--steel-700); background: var(--surface-raised); }

.at-fbt__summary {
  flex: 1 1 260px; min-width: 240px; display: flex; flex-direction: column; gap: var(--space-3, 16px);
  background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--space-5, 28px) var(--space-6, 32px);
}
.at-fbt__summary-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text-strong); margin: 0; }
.at-fbt__summary-row { display: flex; align-items: center; gap: 12px; padding-bottom: var(--space-3, 16px); margin-bottom: var(--space-1, 8px); border-bottom: 1px solid var(--border-subtle); position: relative; }
.at-fbt__summary-row img { width: 44px; height: 44px; object-fit: contain; border-radius: var(--radius-sm); background: var(--surface-raised); flex: none; }
.at-fbt__summary-row-info { flex: 1 1 auto; min-width: 0; }
.at-fbt__summary-row-name { font-size: 13px; font-weight: 700; color: var(--text-strong); line-height: 1.3; margin: 0 0 2px; }
.at-fbt__summary-row-price { font-size: 13px; color: var(--text-muted); margin: 0; }
.at-fbt__summary-row-remove { position: absolute; top: 0; right: 0; background: none; border: 0; color: var(--text-muted); font-size: 15px; cursor: pointer; line-height: 1; }
.at-fbt__totals { display: flex; flex-direction: column; }
.at-fbt__totals-line { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--text-muted); padding: 5px 0; }
.at-fbt__totals-line strong { color: var(--text-strong); font-weight: 700; }
.at-fbt__totals-line--save strong { color: var(--steel-700); }
.at-fbt__totals-line--total { border-top: 1px solid var(--border-default); margin-top: 4px; padding-top: 12px; }
.at-fbt__totals-line--total strong { font-family: var(--font-display); font-weight: 800; font-size: 22px; }
.at-fbt__cta {
  border: 0; border-radius: var(--radius-md); background: var(--steel-600); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; padding: 14px 28px; cursor: pointer; width: 100%;
}
.at-fbt__cta:hover { background: var(--steel-700); }
.at-fbt__cta:disabled { opacity: .5; cursor: default; }
@media (max-width: 900px) {
  .at-fbt__row { flex-direction: column; align-items: stretch; }
  .at-fbt__op { margin: var(--space-2, 12px) auto; }
  .at-fbt__card, .at-fbt__summary { flex: 1 1 auto; width: 100%; }
}


.at-story-showcase__dots { display: flex; justify-content: center; gap: 8px; margin-top: var(--space-4, 24px); }
.at-story-showcase__dot {
  width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: var(--border-default);
  cursor: pointer;
}
.at-story-showcase__dot.is-active { background: var(--navy-900); }
@media (max-width: 700px) {
  .at-story-slide { flex-basis: 96%; }
  .at-story-showcase__title { font-size: 26px; }
}

/* ── AT — Feature spotlight (media background + text panel, left/right) ──
   Two layouts: split (media beside a solid text panel) and overlay (text panel
   floats over full-bleed media). Text side + tone are class-driven. Video/img
   fill .at-spotlight__bg; .at-spotlight__panel holds the copy. */
.at-spotlight {
  position: relative; display: grid; overflow: hidden;
  border-radius: var(--radius-2xl); background: var(--surface-card);
  min-height: var(--at-spot-minh, 520px); margin: 24px 0;
}
.at-spotlight.alignfull { border-radius: 0; }
.at-spotlight__bg { position: relative; overflow: hidden; }
.at-spotlight__media { width: 100%; height: 100%; object-fit: cover; display: block; }
.at-spotlight--fit-contain .at-spotlight__media { object-fit: contain; }
.at-spotlight__placeholder {
  background: var(--neutral-100);
  display: flex; align-items: center; justify-content: center; height: 100%; min-height: 260px;
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; color: var(--text-subtle);
}
.at-spotlight__panel { display: flex; align-items: center; align-self: stretch; }
/* Vertical placement of the text within the panel (top / center / bottom) */
.at-spotlight--valign-top    .at-spotlight__panel { align-items: flex-start; }
.at-spotlight--valign-center .at-spotlight__panel { align-items: center; }
.at-spotlight--valign-bottom .at-spotlight__panel { align-items: flex-end; }
.at-spotlight__panel-inner {
  width: 100%; padding: clamp(28px, 4vw, 56px);
  display: flex; flex-direction: column; gap: 10px;
}
.at-spotlight__eyebrow {
  margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy-700);
}
.at-spotlight__title {
  margin: 0; text-wrap: balance;
}
.at-spotlight__subtitle {
  margin: 6px 0 0; text-wrap: balance;
}
.at-spotlight__text {
  margin: 12px 0 0; color: var(--text-body); text-wrap: pretty; max-width: 46ch;
}
/* Hide empty RichText paragraphs so gaps don't accumulate in the editor */
.at-spotlight__eyebrow:empty, .at-spotlight__subtitle:empty, .at-spotlight__text:empty { display: none; }

/* Split layout — two columns; text side controls order */
.at-spotlight--split { grid-template-columns: 1fr 1fr; }
.at-spotlight--split.at-spotlight--text-left  { grid-template-areas: "panel media"; }
.at-spotlight--split.at-spotlight--text-right { grid-template-areas: "media panel"; }
.at-spotlight--split .at-spotlight__panel { grid-area: panel; }
.at-spotlight--split .at-spotlight__bg { grid-area: media; }

/* When the text sits on the right, right-align the copy to mirror the layout */
.at-spotlight--text-left   .at-spotlight__panel-inner { align-items: flex-start; text-align: left; }
.at-spotlight--text-center .at-spotlight__panel-inner { align-items: center; text-align: center; }
.at-spotlight--text-right  .at-spotlight__panel-inner { align-items: flex-end; text-align: right; }
.at-spotlight--text-center .at-spotlight__text { margin-left: auto; margin-right: auto; }
.at-spotlight--text-right  .at-spotlight__text { margin-left: auto; }

/* Overlay & Hero — media fills the whole block, panel floats over it. Hero is the
   same mechanic as overlay, intended as a full-bleed banner. */
.at-spotlight--overlay,
.at-spotlight--hero { grid-template-columns: 1fr; }
.at-spotlight--overlay .at-spotlight__bg,
.at-spotlight--hero .at-spotlight__bg { grid-area: 1 / 1; }
.at-spotlight--overlay .at-spotlight__panel,
.at-spotlight--hero .at-spotlight__panel { grid-area: 1 / 1; position: relative; }
.at-spotlight--overlay .at-spotlight__panel-inner { max-width: min(560px, 90%); }
.at-spotlight--hero .at-spotlight__panel-inner { max-width: min(680px, 92%); }
/* Horizontal placement of the panel within the media (left / center / right) */
.at-spotlight--overlay.at-spotlight--text-left  .at-spotlight__panel,
.at-spotlight--hero.at-spotlight--text-left     .at-spotlight__panel { justify-content: flex-start; }
.at-spotlight--overlay.at-spotlight--text-center .at-spotlight__panel,
.at-spotlight--hero.at-spotlight--text-center    .at-spotlight__panel { justify-content: center; }
.at-spotlight--overlay.at-spotlight--text-right .at-spotlight__panel,
.at-spotlight--hero.at-spotlight--text-right    .at-spotlight__panel { justify-content: flex-end; }
/* Readability scrim, weighted toward the text side (side-weighted for left/right,
   soft vertical wash for center). Applies to overlay + hero. */
.at-spotlight--scrim .at-spotlight__bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.at-spotlight--scrim.at-spotlight--text-left  .at-spotlight__bg::after { background: linear-gradient(90deg, rgba(15,23,42,0.66) 0%, rgba(15,23,42,0.28) 45%, transparent 72%); }
.at-spotlight--scrim.at-spotlight--text-right .at-spotlight__bg::after { background: linear-gradient(270deg, rgba(15,23,42,0.66) 0%, rgba(15,23,42,0.28) 45%, transparent 72%); }
.at-spotlight--scrim.at-spotlight--text-center.at-spotlight--valign-top    .at-spotlight__bg::after { background: linear-gradient(180deg, rgba(15,23,42,0.6) 0%, rgba(15,23,42,0.2) 45%, transparent 75%); }
.at-spotlight--scrim.at-spotlight--text-center.at-spotlight--valign-center .at-spotlight__bg::after { background: rgba(15,23,42,0.42); }
.at-spotlight--scrim.at-spotlight--text-center.at-spotlight--valign-bottom .at-spotlight__bg::after { background: linear-gradient(0deg, rgba(15,23,42,0.6) 0%, rgba(15,23,42,0.2) 45%, transparent 75%); }

/* Dark tone (light text) — used for overlay-on-media or dark panels */
.at-spotlight--dark .at-spotlight__eyebrow { color: #fff; opacity: 0.85; }
.at-spotlight--dark .at-spotlight__title,
.at-spotlight--dark .at-spotlight__subtitle { color: #fff; }
.at-spotlight--dark .at-spotlight__text { color: rgba(255,255,255,0.82); }
/* Split + dark → give the panel a navy fill so light text reads */
.at-spotlight--split.at-spotlight--dark .at-spotlight__panel { background: var(--neutral-900); }

@media (max-width: 782px) {
  .at-spotlight--split { grid-template-columns: 1fr !important; grid-template-areas: "media" "panel" !important; }
  .at-spotlight--split .at-spotlight__bg { min-height: 260px; }
  .at-spotlight--overlay .at-spotlight__panel-inner,
  .at-spotlight--hero .at-spotlight__panel-inner { max-width: 100%; }
  .at-spotlight--scrim .at-spotlight__bg::after { background: linear-gradient(0deg, rgba(15,23,42,0.72) 0%, rgba(15,23,42,0.35) 45%, transparent 80%) !important; }
}

/* ── AT — Badges (certified / integrations strip) ── */
.at-badges {
  border-radius: var(--radius-xl); padding: clamp(28px, 4vw, 48px); margin: 24px 0;
}
.at-badges.alignfull { border-radius: 0; }
.at-badges__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  flex-wrap: wrap; max-width: 1180px; margin: 0 auto;
}
.at-badges.is-surface-navy { background: var(--navy-800); }
.at-badges.is-surface-steel { background: var(--steel-50); border: 1px solid var(--steel-200); }
.at-badges.is-surface-white { background: #fff; border: 1px solid var(--border-default); }
.at-badges__intro { max-width: 460px; }
.at-badges__eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 10px;
}
.at-badges__heading {
  font-family: var(--font-display); font-weight: 800; font-size: 30px;
  letter-spacing: -0.01em; margin: 0;
}
.at-badges.is-surface-navy .at-badges__heading { color: #fff; }
.at-badges.is-surface-steel .at-badges__heading,
.at-badges.is-surface-white .at-badges__heading { color: var(--text-strong); }
.at-badges__row { display: flex; gap: 14px; flex-wrap: wrap; }
.at-badges__row > .block-editor-inner-blocks > .block-editor-block-list__layout { display: flex; gap: 14px; flex-wrap: wrap; }
/* Scoped to .at-badges: this is the big pill used inside the AT — Badges
   strip, NOT the small product-card flag defined at the top of this file.
   Left unscoped it overrode .at-badge everywhere, which is what blew up the
   Sale flag on product cards. */
.at-badges .at-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 22px; border-radius: var(--radius-md);
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
}
.at-badges.is-surface-navy .at-badge {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); color: #fff;
}
.at-badges.is-surface-steel .at-badge { background: #fff; border: 1px solid var(--border-default); color: var(--text-strong); }
.at-badges.is-surface-white .at-badge { background: var(--surface-page); border: 1px solid var(--border-default); color: var(--text-strong); }
.at-badge__ic { display: inline-flex; color: var(--success-600); }
.at-icon-picker__none { font-size: 11px; font-weight: 600; color: #555; }
@media (max-width: 781px) {
  .at-badges__heading { font-size: 24px; }
}
.at-announcement-bar { display: block; text-align: center; padding: 8px 16px; font-family: var(--font-body); font-weight: 600; font-size: 13px; text-decoration: none; }
.at-announcement-bar:hover { text-decoration: underline; }

/* ───────────────────── AT — Quiz Promo ─────────────────────
   Attribute-driven "Help me choose" promo band. Themes flip text colour;
   --at-qp-accent overrides the eyebrow / step numerals per instance. */
.at-quizpromo {
  position: relative; overflow: hidden;
  --at-qp-accent: var(--color-accent);
  --at-qp-minh: 0px;
}
/* Force the viewport breakout on alignfull — matches the hero carousel and
   stat band. TwentyTwentyFive's constrained container doesn't auto-bleed a
   custom block class, only core blocks. The inner wrapper keeps its own
   max-width, so the band goes edge-to-edge while the content stays in the
   body column. */
.at-quizpromo.alignfull {
  width: 100vw !important; max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
  border-radius: 0;
}
.at-quizpromo--navy { background: var(--navy-700); color: #fff; }.at-quizpromo--navy-dark { background: var(--navy-900, #1c2435); color: #fff; }
.at-quizpromo--steel { background: var(--steel-50); color: var(--text-body); }
.at-quizpromo--white { background: #fff; color: var(--text-body); }
.at-quizpromo--navy .at-quizpromo__title,
.at-quizpromo--navy-dark .at-quizpromo__title { color: #fff; }
.at-quizpromo--steel .at-quizpromo__title,
.at-quizpromo--white .at-quizpromo__title { color: var(--text-strong); }
.at-quizpromo--navy .at-quizpromo__body,
.at-quizpromo--navy-dark .at-quizpromo__body { color: rgba(255,255,255,0.8); }
.at-quizpromo--steel .at-quizpromo__body,
.at-quizpromo--white .at-quizpromo__body { color: var(--text-body); }

/* Padding scale (token-based, not raw px) */
.at-quizpromo--pt-none { padding-top: 0; }
.at-quizpromo--pt-sm { padding-top: clamp(20px, 2vw, 28px); }
.at-quizpromo--pt-md { padding-top: clamp(28px, 3vw, 40px); }
.at-quizpromo--pt-lg { padding-top: clamp(40px, 4.5vw, 56px); }
.at-quizpromo--pt-xl { padding-top: clamp(56px, 6vw, 88px); }
.at-quizpromo--pb-none { padding-bottom: 0; }
.at-quizpromo--pb-sm { padding-bottom: clamp(20px, 2vw, 28px); }
.at-quizpromo--pb-md { padding-bottom: clamp(28px, 3vw, 40px); }
.at-quizpromo--pb-lg { padding-bottom: clamp(40px, 4.5vw, 56px); }
.at-quizpromo--pb-xl { padding-bottom: clamp(56px, 6vw, 88px); }

/* Background media */
.at-quizpromo__bg { position: absolute; inset: 0; z-index: 0; }
.at-quizpromo__media { width: 100%; height: 100%; object-fit: cover; display: block; }
.at-quizpromo__overlay { position: absolute; inset: 0; background: #0F172A; }
.at-quizpromo--media-right .at-quizpromo__bg { left: 50%; }
.at-quizpromo--media-left .at-quizpromo__bg { right: 50%; }

/* Inner grid */
.at-quizpromo__inner {
  position: relative; z-index: 1; margin: 0 auto;
  display: grid; gap: clamp(28px, 4vw, 48px); align-items: center;
  min-height: var(--at-qp-minh);
  padding-left: 32px; padding-right: 32px;
}
.at-quizpromo__inner--wide { max-width: 1280px; }
.at-quizpromo__inner--full { max-width: none; }
.at-quizpromo--split .at-quizpromo__inner { grid-template-columns: 1.15fr 0.85fr; }
.at-quizpromo--stacked .at-quizpromo__inner { grid-template-columns: 1fr; }
.at-quizpromo--centered .at-quizpromo__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.at-quizpromo--no-steps .at-quizpromo__inner { grid-template-columns: 1fr; }
/* Media confined to one half: keep the content in the other half */
.at-quizpromo--media-right.at-quizpromo--split .at-quizpromo__steps,
.at-quizpromo--media-left.at-quizpromo--split .at-quizpromo__steps { align-self: center; }

/* Content */
.at-quizpromo__eyebrow {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-xs); letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--at-qp-accent); margin: 0 0 8px;
}
.at-quizpromo__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15;
  margin: 0 0 12px; text-wrap: pretty;
}
.at-quizpromo__body { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-relaxed); margin: 0 0 22px; max-width: 52ch; }
.at-quizpromo--centered .at-quizpromo__body { margin-left: auto; margin-right: auto; }

/* Actions */
.at-quizpromo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.at-quizpromo--centered .at-quizpromo__actions { justify-content: center; }
.at-quizpromo__btn {
  display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 14.5px;
  border-radius: var(--radius-md); padding: 12px 24px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer;
}
.at-quizpromo__btn--accent { background: var(--color-accent); color: #fff; }
.at-quizpromo__btn--accent:hover { background: var(--accent-700, #B01A21); color: #fff; }
.at-quizpromo__btn--light { background: #fff; color: var(--navy-700); }
.at-quizpromo__btn--light:hover { background: var(--steel-50); color: var(--navy-700); }
.at-quizpromo__btn--outline { background: transparent; border-color: currentColor; color: inherit; }
.at-quizpromo__btn--outline:hover { background: rgba(255,255,255,0.12); color: inherit; }
.at-quizpromo--steel .at-quizpromo__btn--outline:hover,
.at-quizpromo--white .at-quizpromo__btn--outline:hover { background: rgba(0,0,0,0.04); }
.at-quizpromo__btn-secondary {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: inherit; text-decoration: underline; text-underline-offset: 3px;
}
.at-quizpromo__btn-secondary:hover { color: var(--at-qp-accent); }

/* Steps */
.at-quizpromo__steps { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }
.at-quizpromo--centered .at-quizpromo__steps { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.at-quizpromo__step {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-md); padding: 14px 16px;
}
.at-quizpromo--steel .at-quizpromo__step,
.at-quizpromo--white .at-quizpromo__step { background: rgba(0,0,0,0.03); border-color: var(--border-default); }
.at-quizpromo__num { font-family: var(--font-mono); font-size: 12px; color: var(--at-qp-accent); flex: none; }
.at-quizpromo__label { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; }

/* Editor-only affordances (repeater row tools) — hidden on the front end
   because PHP never renders them. */
.at-quizpromo__rowtools { display: flex; gap: 2px; margin-left: auto; opacity: 0.55; }
.at-quizpromo__step:hover .at-quizpromo__rowtools { opacity: 1; }
.at-quizpromo__addrow { margin-top: 4px; }

/* ───────────────────── AT — Series Grid / Series Tile ─────────────────────
   Section header + a grid of large image tiles linking into product series.
   --at-sg-accent overrides the eyebrow and tile-link colour per instance. */
.at-seriesgrid {
  --at-sg-accent: var(--color-accent);
  padding: clamp(40px, 4.5vw, 64px) 32px;
}
.at-seriesgrid.alignfull {
  width: 100vw !important; max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
}
.at-seriesgrid--white { background: var(--surface-page); }
.at-seriesgrid--steel { background: var(--steel-50); }
.at-seriesgrid--navy { background: var(--navy-700); }
.at-seriesgrid__head { max-width: 640px; margin: 0 auto clamp(24px, 3vw, 32px); }
.at-seriesgrid__head:not(:has(*)) { display: none; }
.at-seriesgrid--white .at-seriesgrid__head,
.at-seriesgrid--steel .at-seriesgrid__head { margin-left: 0; }
.at-seriesgrid__eyebrow {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-xs); letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--at-sg-accent); margin: 0 0 8px;
}
.at-seriesgrid__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(24px, 2.8vw, 32px); line-height: 1.15;
  color: var(--text-strong); margin: 0 0 10px; text-wrap: pretty;
}
.at-seriesgrid__sub { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-body); margin: 0; }
.at-seriesgrid--navy .at-seriesgrid__title { color: #fff; }
.at-seriesgrid--navy .at-seriesgrid__sub { color: rgba(255,255,255,0.8); }

.at-seriesgrid__tiles {
  display: grid; gap: 20px;
  max-width: 1280px; margin: 0 auto;
}
.at-seriesgrid--cols-2 .at-seriesgrid__tiles { grid-template-columns: repeat(2, 1fr); }
.at-seriesgrid--cols-3 .at-seriesgrid__tiles { grid-template-columns: repeat(3, 1fr); }
.at-seriesgrid--cols-4 .at-seriesgrid__tiles { grid-template-columns: repeat(4, 1fr); }
.at-seriesgrid--cols-5 .at-seriesgrid__tiles { grid-template-columns: repeat(5, 1fr); }

/* Tile */
.at-seriestile {
  display: flex; flex-direction: column; text-decoration: none;
  background: #fff; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
a.at-seriestile:hover { border-color: var(--navy-700); transform: translateY(-2px); }
.at-seriestile__media {
  display: flex; align-items: center; justify-content: center;
  background: var(--steel-100, #e7eef3); overflow: hidden;
}
.at-seriesgrid--ratio-4-3 .at-seriestile__media { aspect-ratio: 4 / 3; }
.at-seriesgrid--ratio-1-1 .at-seriestile__media { aspect-ratio: 1; }
.at-seriesgrid--ratio-16-9 .at-seriestile__media { aspect-ratio: 16 / 9; }
.at-seriesgrid--ratio-3-4 .at-seriestile__media { aspect-ratio: 3 / 4; }
.at-seriestile__media img { width: 100%; height: 100%; display: block; }
.at-seriesgrid--fit-cover .at-seriestile__media img { object-fit: cover; }
.at-seriesgrid--fit-contain .at-seriestile__media img { object-fit: contain; }
.at-seriestile__placeholder { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.at-seriestile__body { display: flex; flex-direction: column; flex: 1; padding: 18px; }
.at-seriestile__name {
  font-family: var(--font-display); font-weight: 800; font-size: 19px;
  color: var(--text-strong); margin: 0 0 6px;
}
.at-seriestile__note {
  font-size: 13.5px; line-height: 1.5; color: var(--text-muted);
  margin: 0 0 14px; flex: 1;
}
.at-seriestile__meta {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--steel-500); margin: 0 0 12px;
}
.at-seriestile__link { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--navy-700); }
a.at-seriestile:hover .at-seriestile__link { color: var(--at-sg-accent); }
.at-seriesgrid--no-meta .at-seriestile__meta,
.at-seriesgrid--no-link .at-seriestile__link { display: none; }

@media (max-width: 1080px) {
  .at-seriesgrid--cols-4 .at-seriesgrid__tiles,
  .at-seriesgrid--cols-5 .at-seriesgrid__tiles { grid-template-columns: repeat(2, 1fr); }
  .at-seriesgrid--cols-3 .at-seriesgrid__tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .at-seriesgrid { padding-left: 20px; padding-right: 20px; }
  .at-seriesgrid__tiles { grid-template-columns: 1fr !important; }
}

/* ───────────────────── AT — Feature Swiper / Feature Slide ─────────────────────
   Wide editorial carousel: large media panel, next slide peeking on the right,
   per-slide text beneath. Vanilla JS in assets/js/feature-swiper.js. */
.at-fswiper {
  --at-fs-accent: var(--color-accent);
  --at-fs-gap: 24px;
  padding: clamp(40px, 4.5vw, 64px) 0;
  overflow: hidden;
}
.at-fswiper.alignfull {
  width: 100vw !important; max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
}
.at-fswiper--white { background: #fff; }
.at-fswiper--steel { background: var(--steel-50); }
.at-fswiper--navy { background: var(--navy-700); }
.at-fswiper--navy-dark { background: var(--navy-900, #1c2435); }

/* No horizontal padding by default: inside the theme's constrained container
   the block already sits in the content column, and adding padding here
   indents it relative to the blocks above and below. The padding is applied
   only for alignfull, where the block owns the full viewport and needs to
   pull its content back into the column. */
.at-fswiper__inner { max-width: 100%; margin: 0 auto; }
.at-fswiper.alignfull .at-fswiper__inner { max-width: 1280px; padding: 0 32px; }
.at-fswiper__head { max-width: 640px; margin: 0 0 clamp(24px, 3vw, 36px); }
/* Eyebrows across all AT section blocks use the design-system definition
   (.is-style-at-eyebrow) rather than hardcoded values, so a token change
   propagates. --at-*-accent still lets an instance override the colour. */
.at-fswiper__eyebrow {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-xs); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--at-fs-accent); margin: 0 0 8px;
}
.at-fswiper__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(24px, 2.8vw, 32px); line-height: 1.15;
  color: var(--text-strong); margin: 0; text-wrap: pretty;
}
.at-fswiper--navy .at-fswiper__title,
.at-fswiper--navy-dark .at-fswiper__title { color: #fff; }

/* The viewport is deliberately allowed to overflow its container so the next
   slide peeks past the content column, the way Samsung's does. */
.at-fswiper__viewport { overflow: visible; }
.at-fswiper__track {
  display: flex; gap: var(--at-fs-gap);
  transition: transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
  cursor: grab;
  touch-action: pan-y; /* let the page scroll vertically, we own horizontal */
}
.at-fswiper__track.is-dragging { transition: none; cursor: grabbing; }

/* Slide width drives everything — the JS reads it back rather than
   duplicating these numbers. 78% leaves roughly a fifth of the next slide
   visible on desktop. */
.at-fslide {
  flex: 0 0 78%; max-width: 78%;
  opacity: 0.6; transition: opacity 300ms ease;
  user-select: none;
}
.at-fslide.is-active { opacity: 1; }

.at-fslide__media {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--steel-100, #e7eef3);
  aspect-ratio: 16 / 9; margin-bottom: 28px;
}
.at-fslide__poster,
.at-fslide__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* The video sits above its poster and fades in once it starts, so the first
   frame never flashes black before playback begins. */
.at-fslide__video { opacity: 0; transition: opacity 250ms ease; }
.at-fslide.is-active .at-fslide__video { opacity: 1; }

.at-fslide__headline {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2;
  color: var(--text-strong); margin: 0 0 12px; text-wrap: pretty;
}
.at-fslide__sub {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-xs); letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--at-fs-accent); margin: 0 0 12px;
}
.at-fslide__desc {
  font-family: var(--font-body); font-size: var(--text-md);
  line-height: var(--leading-relaxed); color: var(--text-body);
  margin: 0; max-width: 62ch;
}
.at-fswiper--navy .at-fslide__headline,
.at-fswiper--navy-dark .at-fslide__headline { color: #fff; }
.at-fswiper--navy .at-fslide__desc,
.at-fswiper--navy-dark .at-fslide__desc { color: rgba(255,255,255,0.78); }

/* Controls: dots left, arrows right, on one row beneath the track. */
.at-fswiper__controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: clamp(24px, 3vw, 36px);
}
.at-fswiper__dots { display: flex; gap: 8px; }
.at-fswiper__dot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 99px;
  background: var(--border-default); cursor: pointer;
  transition: background 200ms ease, width 200ms ease;
}
.at-fswiper__dot.is-active { width: 26px; background: var(--at-fs-accent); }
.at-fswiper--navy .at-fswiper__dot,
.at-fswiper--navy-dark .at-fswiper__dot { background: rgba(255,255,255,0.3); }
.at-fswiper--navy .at-fswiper__dot.is-active,
.at-fswiper--navy-dark .at-fswiper__dot.is-active { background: #fff; }

.at-fswiper__arrows { display: flex; gap: 10px; margin-left: auto; }
.at-fswiper__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border-radius: 99px; cursor: pointer;
  background: transparent; color: var(--navy-700);
  border: 1.5px solid var(--border-default);
  transition: border-color 150ms ease, background 150ms ease, opacity 150ms ease;
}
.at-fswiper__arrow:hover:not(:disabled) { border-color: var(--navy-700); background: var(--steel-50); }
.at-fswiper__arrow:disabled { opacity: 0.35; cursor: default; }
.at-fswiper--navy .at-fswiper__arrow,
.at-fswiper--navy-dark .at-fswiper__arrow { color: #fff; border-color: rgba(255,255,255,0.35); }
.at-fswiper--navy .at-fswiper__arrow:hover:not(:disabled),
.at-fswiper--navy-dark .at-fswiper__arrow:hover:not(:disabled) { border-color: #fff; background: rgba(255,255,255,0.1); }

.at-fswiper--no-arrows .at-fswiper__arrows,
.at-fswiper--no-dots .at-fswiper__dots { display: none; }
.at-fswiper--no-dots .at-fswiper__controls { justify-content: flex-end; }

@media (max-width: 900px) {
  /* Keep a visible sliver of the next slide so it still reads as swipeable. */
  .at-fslide { flex-basis: 86%; max-width: 86%; }
  .at-fswiper.alignfull .at-fswiper__inner { padding: 0 20px; }
  .at-fslide__media { margin-bottom: 20px; }
}
@media (max-width: 600px) {
  .at-fslide { flex-basis: 88%; max-width: 88%; }
  .at-fswiper { --at-fs-gap: 16px; }
  .at-fswiper__arrows { display: none; } /* swipe and dots are enough here */
  .at-fswiper--no-dots .at-fswiper__controls { justify-content: center; }
}
/* Video play/pause, bottom-right of the media panel — only rendered on
   slides that actually have a video. */
.at-fslide__playpause {
  position: absolute; right: 16px; bottom: 16px; z-index: 3;
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border-radius: 99px; cursor: pointer;
  color: #fff; background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(4px);
  transition: background 150ms ease, border-color 150ms ease;
}
.at-fslide.is-active .at-fslide__playpause { display: inline-flex; }
.at-fslide__playpause:hover { background: rgba(15, 23, 42, 0.75); border-color: #fff; }
.at-fslide__playpause .at-icon-pause { display: block; }
.at-fslide__playpause .at-icon-play { display: none; }
.at-fslide__playpause.is-paused .at-icon-pause { display: none; }
.at-fslide__playpause.is-paused .at-icon-play { display: block; }

@media (prefers-reduced-motion: reduce) {
  .at-fswiper__track { transition: none; }
  .at-fslide__video,
  .at-fslide__playpause { display: none !important; } /* poster only */
}

/* Editor-only: stack the slides so every one is reachable and editable.
   The front-end carousel behaviour would otherwise hide all but the active
   slide behind a transform the editor can't drive. */
.at-fswiper--editor .at-fswiper__track {
  display: grid; grid-template-columns: 1fr; gap: 32px;
  transform: none !important; cursor: default;
}
.at-fswiper--editor .at-fslide {
  flex-basis: auto; max-width: none; opacity: 1;
  padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle);
}
.at-fswiper--editor .at-fslide:last-child { border-bottom: 0; padding-bottom: 0; }
.at-fslide__placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-muted);
}
.at-fslide__videoflag {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  color: #fff; background: var(--navy-700); border-radius: 999px; padding: 3px 10px;
}

/* ───────────────────── AT — Trust Row / Trust Item ─────────────────────
   Unboxed reassurance columns: short rule, bold title, one line of copy.
   No card border or shadow — this closes a page, it doesn't compete with
   the product grid above it. */
.at-trustrow {
  --at-tr-rule: var(--color-accent);
}
.at-trustrow.alignfull {
  width: 100vw !important; max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
}
.at-trustrow--steel { background: var(--steel-50); }
.at-trustrow--white { background: var(--surface-page); }
.at-trustrow--navy { background: var(--navy-700); }
.at-trustrow--pt-none { padding-top: 0; }
.at-trustrow--pt-sm { padding-top: clamp(20px, 2vw, 28px); }
.at-trustrow--pt-md { padding-top: clamp(28px, 3vw, 40px); }
.at-trustrow--pt-lg { padding-top: clamp(40px, 4.5vw, 64px); }
.at-trustrow--pt-xl { padding-top: clamp(56px, 6vw, 88px); }
.at-trustrow--pb-none { padding-bottom: 0; }
.at-trustrow--pb-sm { padding-bottom: clamp(20px, 2vw, 28px); }
.at-trustrow--pb-md { padding-bottom: clamp(28px, 3vw, 40px); }
.at-trustrow--pb-lg { padding-bottom: clamp(40px, 4.5vw, 64px); }
.at-trustrow--pb-xl { padding-bottom: clamp(56px, 6vw, 88px); }

.at-trustrow__inner { max-width: 1280px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.at-trustrow__head { max-width: 640px; margin: 0 0 clamp(20px, 2.5vw, 28px); }
.at-trustrow__eyebrow {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-xs); letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--at-tr-rule); margin: 0 0 8px;
}
.at-trustrow__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15;
  color: var(--text-strong); margin: 0; text-wrap: pretty;
}
.at-trustrow--navy .at-trustrow__title { color: #fff; }

.at-trustrow__items { display: grid; gap: 28px; }
.at-trustrow--cols-2 .at-trustrow__items { grid-template-columns: repeat(2, 1fr); }
.at-trustrow--cols-3 .at-trustrow__items { grid-template-columns: repeat(3, 1fr); }
.at-trustrow--cols-4 .at-trustrow__items { grid-template-columns: repeat(4, 1fr); }

.at-trustitem__rule { display: block; width: 34px; height: 3px; background: var(--at-tr-rule); margin: 0 0 12px; }
.at-trustrow--no-rule .at-trustitem__rule { display: none; }
.at-trustitem__title {
  font-family: var(--font-display); font-weight: 700; font-size: 15.5px;
  color: var(--text-strong); margin: 0 0 6px;
}
.at-trustitem__text { font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-body); margin: 0; }
.at-trustrow--navy .at-trustitem__title { color: #fff; }
.at-trustrow--navy .at-trustitem__text { color: rgba(255,255,255,0.78); }

@media (max-width: 900px) {
  .at-trustrow--cols-3 .at-trustrow__items,
  .at-trustrow--cols-4 .at-trustrow__items { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .at-trustrow__inner { padding-left: 20px; padding-right: 20px; }
  .at-trustrow__items { grid-template-columns: 1fr !important; gap: 22px; }
}

/* ───────────────────── AT — Product Feed / Feed Group ─────────────────────
   Section header + one live product row per series. Cards come from Woo's own
   content-product.php, so they inherit the shop-archive card styling. */
.at-pfeed {
  --at-pf-accent: var(--color-accent);
  padding: clamp(40px, 4.5vw, 64px) 32px;
}
.at-pfeed.alignfull {
  width: 100vw !important; max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
}
.at-pfeed--white { background: var(--surface-page); }
.at-pfeed--steel { background: var(--steel-50); }
.at-pfeed__head { max-width: 640px; margin: 0 0 clamp(24px, 3vw, 32px); }
.at-pfeed__eyebrow {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-xs); letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--at-pf-accent); margin: 0 0 8px;
}
.at-pfeed__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(24px, 2.8vw, 32px); line-height: 1.15;
  color: var(--text-strong); margin: 0 0 10px; text-wrap: pretty;
}
.at-pfeed__sub { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-body); margin: 0; }
.at-pfeed__groups { max-width: 1280px; margin: 0 auto; }

.at-pfeed__group { margin-bottom: clamp(32px, 4vw, 44px); }
.at-pfeed__group:last-child { margin-bottom: 0; }
.at-pfeed__group-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 12px; margin-bottom: 20px;
  border-bottom: 2px solid var(--navy-700);
}
.at-pfeed__group-name {
  font-family: var(--font-display); font-weight: 800; font-size: 21px;
  color: var(--text-strong); margin: 0;
}
.at-pfeed__group-count {
  font-family: var(--font-mono); font-weight: 400; font-size: 12px;
  color: var(--text-muted); margin-left: 8px;
}
.at-pfeed__group-all {
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  color: var(--navy-700); white-space: nowrap; text-decoration: none;
}
.at-pfeed__group-all:hover { color: var(--at-pf-accent); }
.at-pfeed--no-count .at-pfeed__group-count,
.at-pfeed--no-seeall .at-pfeed__group-all { display: none; }

/* The card grid. Woo's content-product.php emits <li class="product">. */
.at-pfeed__grid {
  display: grid; gap: 20px; list-style: none; margin: 0; padding: 0;
}
.at-pfeed--cols-2 .at-pfeed__grid { grid-template-columns: repeat(2, 1fr); }
.at-pfeed--cols-3 .at-pfeed__grid { grid-template-columns: repeat(3, 1fr); }
.at-pfeed--cols-4 .at-pfeed__grid { grid-template-columns: repeat(4, 1fr); }
.at-pfeed--cols-5 .at-pfeed__grid { grid-template-columns: repeat(5, 1fr); }
/* Woo's own float/width rules would fight the grid — neutralise them here. */
.at-pfeed__grid li.product,
.at-pfeed__grid li.at-product-col {
  width: auto !important; margin: 0 !important; float: none !important; clear: none !important;
  list-style: none;
}
.at-pfeed__grid::before, .at-pfeed__grid::after { content: none !important; display: none !important; }

.at-pfeed__group--empty p, .at-pfeed__group-hint {
  font-size: 13.5px; color: var(--text-muted); font-style: italic; margin: 8px 0 0;
}

@media (max-width: 1080px) {
  .at-pfeed--cols-4 .at-pfeed__grid,
  .at-pfeed--cols-5 .at-pfeed__grid,
  .at-pfeed--cols-3 .at-pfeed__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .at-pfeed { padding-left: 20px; padding-right: 20px; }
  .at-pfeed__grid { grid-template-columns: 1fr !important; }
  .at-pfeed__group-head { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  video.at-quizpromo__media { display: none; }
  .at-quizpromo__bg { background: var(--navy-800, #303c56); }
}
@media (max-width: 900px) {
  .at-quizpromo { --at-qp-minh: 0px !important; }
  .at-quizpromo--split .at-quizpromo__inner { grid-template-columns: 1fr; }
  .at-quizpromo--media-right .at-quizpromo__bg,
  .at-quizpromo--media-left .at-quizpromo__bg { left: 0; right: 0; }
  .at-quizpromo__inner { padding-left: 20px; padding-right: 20px; }
  .at-quizpromo--centered .at-quizpromo__steps { flex-direction: column; }
}