/* ==========================================================================
   Retweaker Modern - Design System
   1.  Tokens
   2.  Reset & base
   3.  Typography
   4.  Layout primitives
   5.  Buttons
   6.  Components
   7.  Forms
   8.  Header & navigation
   9.  Hero
   10. Homepage sections
   11. Archives, single, blog
   12. Contact page
   13. Account / WooCommerce
   14. Footer
   15. Utilities, animation, print
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* Brand palette - overridable from the Customizer */
  --color-primary: #0a1a2f;
  --color-secondary: #12325c;
  --color-accent: #3acab9;
  --color-accent-2: #22d3ee;
  --color-accent-contrast: #0a1a2f;
  --color-accent-text: #268478;

  /* Derived accent steps (kept in sync by Customizer output) */
  --color-accent-soft: rgba(58, 202, 185, 0.1);
  --color-accent-softer: rgba(58, 202, 185, 0.055);
  --color-accent-ring: rgba(58, 202, 185, 0.28);
  --color-accent-hover: #33b2a3;

  /* Surfaces */
  --color-background: #ffffff;
  --color-surface: #f8fafc;
  --color-surface-2: #f1f5f9;
  --color-surface-dark: #0a1a2f;
  --color-surface-dark-2: #12325c;

  /* Ink */
  --color-text: #334155;
  --color-heading: #0a1a2f;
  --color-muted: #64748b;
  --color-muted-light: #94a3b8;
  --color-on-dark: #f8fafc;
  --color-on-dark-muted: #a3aec2;

  /* Lines */
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-border-dark: rgba(255, 255, 255, 0.1);
  --color-border-dark-strong: rgba(255, 255, 255, 0.18);

  /* Feedback */
  --color-success: #15803d;
  --color-success-bg: #f0fdf4;
  --color-error: #b91c1c;
  --color-error-bg: #fef2f2;

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem);
  --text-3xl: clamp(1.625rem, 1.35rem + 1.15vw, 2.125rem);
  --text-4xl: clamp(2rem, 1.55rem + 1.9vw, 2.875rem);
  --text-5xl: clamp(2.375rem, 1.6rem + 3.2vw, 4rem);
  --text-6xl: clamp(2.5rem, 1.6rem + 3.6vw, 4.125rem);

  --leading-tight: 1.08;
  --leading-normal: 1.5;
  --leading-relaxed: 1.72;

  --tracking-tight: -0.022em;
  --tracking-tighter: -0.032em;
  --tracking-widest: 0.14em;

  /* Spacing */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  /* Section rhythm - fluid */
  --section-y: clamp(4rem, 2.4rem + 6.4vw, 7.5rem);
  --section-y-sm: clamp(3rem, 2rem + 4vw, 5rem);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* Shadows - soft and layered */
  --shadow-xs: 0 1px 2px rgba(11, 15, 25, 0.05);
  --shadow-sm: 0 1px 3px rgba(11, 15, 25, 0.06), 0 1px 2px rgba(11, 15, 25, 0.04);
  --shadow-md: 0 4px 14px rgba(11, 15, 25, 0.06), 0 2px 4px rgba(11, 15, 25, 0.04);
  --shadow-lg: 0 18px 40px -12px rgba(11, 15, 25, 0.14), 0 4px 12px rgba(11, 15, 25, 0.05);
  --shadow-xl: 0 32px 64px -20px rgba(11, 15, 25, 0.2), 0 8px 20px rgba(11, 15, 25, 0.06);
  --shadow-focus: 0 0 0 3px var(--color-accent-ring);

  /* Layout */
  --container: 1240px;
  --container-narrow: 820px;
  --container-wide: 1440px;
  --gutter: clamp(1.25rem, 0.85rem + 1.7vw, 2.5rem);
  --header-height: 76px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration: 260ms;
  --duration-slow: 560ms;

  /* Z-index scale */
  --z-header: 100;
  --z-drawer: 110;
  --z-modal: 120;
  --z-skip: 200;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1.5rem);
}

body {
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.rt-no-scroll { overflow: hidden; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; }
p, ul, ol, dl, blockquote, figure, pre, table { margin: 0 0 1.15em; }
:where(p, ul, ol, figure, table, pre, blockquote):last-child { margin-bottom: 0; }

img, svg, video, canvas, iframe, embed, object {
  display: block;
  max-width: 100%;
}
img, video { height: auto; }

a {
  color: var(--color-accent-text);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--color-accent-hover); }

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-xl) 0;
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
code {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.4em;
}
pre {
  background: var(--color-surface-dark);
  color: var(--color-on-dark);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  line-height: 1.65;
}
pre code { background: none; border: 0; padding: 0; color: inherit; }

blockquote {
  border-left: 3px solid var(--color-accent);
  padding: 0.25rem 0 0.25rem var(--space-md);
  font-size: var(--text-xl);
  line-height: 1.55;
  color: var(--color-heading);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
}
blockquote cite {
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  font-style: normal;
  color: var(--color-muted);
}

/* Focus - visible, never removed */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.rt-section--dark :focus-visible,
.rt-header--dark :focus-visible { outline-color: #fff; }

::selection { background: var(--color-accent); color: var(--color-accent-contrast); }

/* Skip link */
.rt-skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-sm);
  z-index: var(--z-skip);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  transition: top var(--duration) var(--ease-out);
}
.rt-skip-link:focus { top: var(--space-sm); color: #fff; }

.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.screen-reader-text:focus {
  clip-path: none;
  height: auto;
  width: auto;
  margin: 0;
  display: block;
  top: 5px;
  left: 5px;
  padding: 15px 23px 14px;
  background: #fff;
  color: var(--color-accent-text);
  z-index: var(--z-skip);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

.rt-h1, h1 {
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  font-weight: 700;
  color: var(--color-heading);
}
.rt-h2, h2 {
  font-size: var(--text-4xl);
  line-height: 1.12;
  letter-spacing: var(--tracking-tighter);
  font-weight: 700;
  color: var(--color-heading);
}
.rt-h3, h3 {
  font-size: var(--text-3xl);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  font-weight: 650;
  color: var(--color-heading);
}
.rt-h4, h4 {
  font-size: var(--text-2xl);
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
  font-weight: 650;
  color: var(--color-heading);
}
.rt-h5, h5 {
  font-size: var(--text-xl);
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  color: var(--color-heading);
}
.rt-h6, h6 {
  font-size: var(--text-lg);
  line-height: 1.45;
  font-weight: 600;
  color: var(--color-heading);
}

.rt-display {
  font-size: var(--text-6xl);
  line-height: 1.03;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: var(--color-heading);
  text-wrap: balance;
}

.rt-lead {
  font-size: clamp(1.0625rem, 1rem + 0.32vw, 1.25rem);
  line-height: 1.65;
  color: var(--color-muted);
  text-wrap: pretty;
}

.rt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin: 0 0 var(--space-sm);
}
.rt-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  flex: none;
}
.rt-eyebrow--plain::before { display: none; }
.rt-section--dark .rt-eyebrow { color: var(--color-accent-2); }

.rt-muted { color: var(--color-muted); }
.rt-balance { text-wrap: balance; }

/* Long-form content (post/page body, block editor output) */
.rt-prose {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: #263041;
}
.rt-prose > * { margin-bottom: 1.35em; }
.rt-prose > *:last-child { margin-bottom: 0; }
.rt-prose h2 { font-size: var(--text-3xl); margin: 2em 0 0.6em; }
.rt-prose h3 { font-size: var(--text-2xl); margin: 1.8em 0 0.5em; }
.rt-prose h4 { font-size: var(--text-xl); margin: 1.6em 0 0.5em; }
.rt-prose > h2:first-child,
.rt-prose > h3:first-child { margin-top: 0; }
.rt-prose ul, .rt-prose ol { padding-left: 1.35em; }
.rt-prose li { margin-bottom: 0.5em; }
.rt-prose li::marker { color: var(--color-accent-text); }
.rt-prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-accent-ring);
}
.rt-prose a:hover { text-decoration-color: currentColor; }
.rt-prose img,
.rt-prose figure img { border-radius: var(--radius-lg); }
.rt-prose figcaption {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-top: 0.65em;
  text-align: center;
}
.rt-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}
.rt-prose th, .rt-prose td {
  border: 1px solid var(--color-border);
  padding: 0.75rem 1rem;
  text-align: left;
}
.rt-prose th {
  background: var(--color-surface);
  font-weight: 600;
  color: var(--color-heading);
}

/* Wide/full alignment inside a constrained prose column */
.rt-prose .alignwide {
  width: min(100vw - (var(--gutter) * 2), var(--container));
  margin-inline: calc(50% - min(50vw - var(--gutter), var(--container) / 2));
  max-width: none;
}
.rt-prose .alignfull {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  max-width: none;
}
.alignleft { float: left; margin: 0.4em 1.75em 1.25em 0; }
.alignright { float: right; margin: 0.4em 0 1.25em 1.75em; }
.aligncenter { margin-inline: auto; display: block; }

.rt-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.35em;
}

/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */

.rt-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.rt-container--narrow { max-width: var(--container-narrow); }
.rt-container--wide { max-width: var(--container-wide); }

.rt-section { padding-block: var(--section-y); }
.rt-section--sm { padding-block: var(--section-y-sm); }
.rt-section--tight { padding-block: clamp(2.5rem, 1.8rem + 2.8vw, 4rem); }
.rt-section--surface { background: var(--color-surface); }
.rt-section--flush-top { padding-top: 0; }
.rt-section--flush-bottom { padding-bottom: 0; }

.rt-section--dark {
  background: var(--color-surface-dark);
  color: var(--color-on-dark);
}
.rt-section--dark h1, .rt-section--dark h2, .rt-section--dark h3,
.rt-section--dark h4, .rt-section--dark h5, .rt-section--dark h6 { color: #fff; }
.rt-section--dark .rt-lead,
.rt-section--dark .rt-muted { color: var(--color-on-dark-muted); }

.rt-section-head {
  max-width: 720px;
  margin-bottom: clamp(2.5rem, 1.8rem + 2.4vw, 4rem);
}
.rt-section-head--center { margin-inline: auto; text-align: center; }
.rt-section-head--center .rt-eyebrow { justify-content: center; }
.rt-section-head--split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-lg);
  align-items: end;
}
.rt-section-head__title { margin: 0; }
.rt-section-head__text { margin: var(--space-sm) 0 0; max-width: 62ch; }

.rt-grid { display: grid; gap: var(--space-md); }
.rt-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rt-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rt-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rt-grid--gap-lg { gap: var(--space-lg); }

.rt-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}

.rt-stack { display: flex; flex-direction: column; gap: var(--space-sm); }
.rt-cluster { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }

/* Site chrome */
.rt-site { display: flex; flex-direction: column; min-height: 100vh; }
.rt-main { flex: 1 0 auto; }
.rt-main--offset { padding-top: var(--header-height); }

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.rt-btn {
  --btn-bg: var(--color-accent);
  --btn-fg: var(--color-accent-contrast);
  --btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8125rem 1.5rem;
  min-height: 48px;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  max-width: 100%;
  transition: background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.rt-btn:hover {
  --btn-bg: var(--color-accent-hover);
  color: var(--btn-fg);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px var(--color-accent-ring);
}
.rt-btn:active { transform: translateY(0); }
.rt-btn[disabled],
.rt-btn[aria-disabled="true"],
.rt-btn.is-loading {
  opacity: 0.62;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.rt-btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--color-heading);
  --btn-border: var(--color-border-strong);
}
.rt-btn--secondary:hover {
  --btn-bg: var(--color-surface);
  --btn-fg: var(--color-heading);
  --btn-border: var(--color-heading);
  box-shadow: var(--shadow-sm);
}

.rt-btn--dark { --btn-bg: var(--color-primary); --btn-fg: #fff; }
.rt-btn--dark:hover { --btn-bg: #1c2434; box-shadow: var(--shadow-lg); }

.rt-btn--light { --btn-bg: #fff; --btn-fg: var(--color-primary); }
.rt-btn--light:hover { --btn-bg: #eef1f6; --btn-fg: var(--color-primary); }

.rt-btn--ghost-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-border: var(--color-border-dark-strong);
}
.rt-btn--ghost-light:hover {
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-fg: #fff;
  --btn-border: rgba(255, 255, 255, 0.4);
  box-shadow: none;
}

.rt-btn--sm { padding: 0.5rem 1rem; min-height: 40px; font-size: var(--text-sm); }
.rt-btn--lg { padding: 1rem 1.875rem; min-height: 56px; font-size: var(--text-lg); }
.rt-btn--block { display: flex; width: 100%; }
.rt-btn__icon { flex: none; width: 18px; height: 18px; }
.rt-btn__icon--arrow { transition: transform var(--duration-fast) var(--ease-out); }
.rt-btn:hover .rt-btn__icon--arrow { transform: translateX(2px); }

/* Text link with arrow */
.rt-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-accent-text);
  letter-spacing: -0.01em;
}
.rt-link__arrow { transition: transform var(--duration-fast) var(--ease-out); flex: none; }
.rt-link:hover .rt-link__arrow { transform: translateX(3px); }
.rt-section--dark .rt-link { color: #fff; }

.rt-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: rt-spin 0.7s linear infinite;
  flex: none;
}
@keyframes rt-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   6. COMPONENTS
   ========================================================================== */

/* --- Card ---------------------------------------------------------------- */
.rt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  transition: border-color var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out),
    transform var(--duration) var(--ease-out);
}
.rt-card--hover:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.rt-card__title { font-size: var(--text-xl); margin: 0 0 0.5rem; }
.rt-card__text { color: var(--color-muted); margin: 0; font-size: var(--text-base); }
.rt-card__footer { margin-top: auto; padding-top: var(--space-md); }

/* Whole-card link overlay: keeps one real anchor for a11y */
.rt-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.rt-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  margin-bottom: var(--space-md);
  flex: none;
  transition: background-color var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out);
}
.rt-icon-box svg { width: 24px; height: 24px; }
.rt-card--hover:hover .rt-icon-box {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}
.rt-section--dark .rt-icon-box {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

/* --- Badge --------------------------------------------------------------- */
.rt-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
  white-space: nowrap;
}
.rt-badge--accent {
  background: var(--color-accent-soft);
  border-color: transparent;
  color: var(--color-accent-text);
}
.rt-badge--dark {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-border-dark);
  color: #fff;
}

/* --- Accordion (FAQ) ----------------------------------------------------- */
.rt-accordion {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-background);
}
.rt-accordion__item + .rt-accordion__item { border-top: 1px solid var(--color-border); }
.rt-accordion__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  padding: 1.35rem clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: none;
  border: 0;
  font-family: inherit;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
  text-align: left;
  line-height: 1.45;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.rt-accordion__trigger:hover { background: var(--color-surface); }
.rt-accordion__icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 0.15em;
  color: var(--color-muted);
  transition: transform var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}
.rt-accordion__trigger[aria-expanded="true"] .rt-accordion__icon {
  transform: rotate(45deg);
  color: var(--color-accent-text);
}
.rt-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration) var(--ease-out);
}
.rt-accordion__panel[data-open="true"] { grid-template-rows: 1fr; }
.rt-accordion__panel > div { overflow: hidden; }
.rt-accordion__content {
  padding: 0 clamp(1.25rem, 1rem + 1vw, 1.75rem) 1.5rem;
  color: var(--color-muted);
  font-size: var(--text-base);
  max-width: 72ch;
}

/* --- Breadcrumb ---------------------------------------------------------- */
.rt-breadcrumb { font-size: var(--text-sm); color: var(--color-muted); }
.rt-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rt-breadcrumb li { display: flex; align-items: center; gap: 0.4rem; }
.rt-breadcrumb li + li::before {
  content: "/";
  color: var(--color-border-strong);
}
.rt-breadcrumb a { color: var(--color-muted); font-weight: 500; }
.rt-breadcrumb a:hover { color: var(--color-accent-text); }
.rt-breadcrumb [aria-current="page"] { color: var(--color-heading); font-weight: 500; }
.rt-page-hero--dark .rt-breadcrumb,
.rt-page-hero--dark .rt-breadcrumb a { color: var(--color-on-dark-muted); }
.rt-page-hero--dark .rt-breadcrumb [aria-current="page"] { color: #fff; }
.rt-page-hero--dark .rt-breadcrumb a:hover { color: #fff; }

/* --- Logo cloud ---------------------------------------------------------- */
.rt-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 1rem + 3vw, 4rem);
}
.rt-logos__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
}
.rt-logos__item img {
  max-height: 34px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter var(--duration) var(--ease-out), opacity var(--duration) var(--ease-out);
}
.rt-logos__item:hover img { filter: grayscale(0); opacity: 1; }

/* --- Stats --------------------------------------------------------------- */
.rt-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-lg);
}
.rt-stat__value {
  display: block;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: var(--tracking-tighter);
  color: var(--color-heading);
}
.rt-stat__label {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.5;
}
.rt-section--dark .rt-stat__value { color: #fff; }
.rt-section--dark .rt-stat__label { color: var(--color-on-dark-muted); }

/* --- Modal --------------------------------------------------------------- */
.rt-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-md);
  background: rgba(11, 15, 25, 0.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration) var(--ease-out), visibility var(--duration);
}
.rt-modal[data-open="true"] { opacity: 1; visibility: visible; }
.rt-modal__dialog {
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--color-background);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
  box-shadow: var(--shadow-xl);
  transform: translateY(12px) scale(0.98);
  transition: transform var(--duration) var(--ease-out);
}
.rt-modal[data-open="true"] .rt-modal__dialog { transform: none; }
.rt-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-background);
  color: var(--color-muted);
  cursor: pointer;
}
.rt-modal__close:hover { background: var(--color-surface); color: var(--color-heading); }

/* --- Pagination ---------------------------------------------------------- */
.rt-pagination {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}
.rt-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.rt-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: all var(--duration-fast) var(--ease-out);
}
.rt-pagination .page-numbers:hover {
  border-color: var(--color-heading);
  background: var(--color-surface);
}
.rt-pagination .page-numbers.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.rt-pagination .page-numbers.dots { border-color: transparent; }

/* --- Notices ------------------------------------------------------------- */
.rt-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--text-base);
  line-height: 1.6;
}
.rt-notice svg { flex: none; width: 20px; height: 20px; margin-top: 0.15em; }
.rt-notice--success {
  background: var(--color-success-bg);
  border-color: #bbf7d0;
  color: var(--color-success);
}
.rt-notice--error {
  background: var(--color-error-bg);
  border-color: #fecaca;
  color: var(--color-error);
}

/* --- Empty state --------------------------------------------------------- */
.rt-empty {
  text-align: center;
  padding: clamp(2.5rem, 2rem + 2vw, 4rem) var(--space-md);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.rt-empty__title { font-size: var(--text-xl); margin: 0 0 0.5rem; }
.rt-empty__text { color: var(--color-muted); margin: 0 auto; max-width: 46ch; }

/* ==========================================================================
   7. FORMS
   ========================================================================== */

.rt-form { display: grid; gap: var(--space-md); }

.rt-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}
.rt-form-grid--full { grid-template-columns: 1fr; }
.rt-field--full { grid-column: 1 / -1; }

.rt-field { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }

.rt-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-heading);
  letter-spacing: -0.005em;
}
.rt-label .rt-required { color: var(--color-error); margin-left: 0.15em; }
.rt-label__hint {
  display: block;
  font-weight: 400;
  color: var(--color-muted);
  font-size: var(--text-xs);
  margin-top: 0.15rem;
}

.rt-input,
.rt-textarea,
.rt-select,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
  width: 100%;
  min-height: 52px;
  padding: 0.875rem 1rem;
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-background);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  appearance: none;
  transition: border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

textarea, .rt-textarea {
  min-height: 148px;
  resize: vertical;
  line-height: 1.65;
}

.rt-select, select {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 20px 20px;
  cursor: pointer;
}

.rt-input::placeholder,
.rt-textarea::placeholder,
input::placeholder,
textarea::placeholder { color: var(--color-muted-light); opacity: 1; }

.rt-input:hover,
.rt-textarea:hover,
input:hover,
textarea:hover { border-color: var(--color-muted-light); }

.rt-input:focus,
.rt-textarea:focus,
.rt-select:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}

.rt-input[aria-invalid="true"],
.rt-textarea[aria-invalid="true"],
.rt-select[aria-invalid="true"] {
  border-color: var(--color-error);
  background: var(--color-error-bg);
}
.rt-input[aria-invalid="true"]:focus,
.rt-textarea[aria-invalid="true"]:focus,
.rt-select[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.18);
}

.rt-field__error {
  display: none;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-error);
  line-height: 1.45;
}
.rt-field__error:not(:empty) { display: flex; }

/* Checkbox & radio */
.rt-check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text);
  cursor: pointer;
}
.rt-check input[type="checkbox"],
.rt-check input[type="radio"] {
  flex: none;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0.15rem 0 0;
  padding: 0;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-background);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.rt-check input[type="radio"] { border-radius: 50%; }
.rt-check input[type="checkbox"]:checked,
.rt-check input[type="radio"]:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.rt-check input[type="checkbox"]:checked {
  background-image: var(--check-tick);
  background-repeat: no-repeat;
  background-position: center;
}
.rt-check input[type="radio"]:checked {
  box-shadow: inset 0 0 0 4px var(--color-background);
}
.rt-check input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.rt-check a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.rt-check[aria-invalid="true"] input[type="checkbox"] { border-color: var(--color-error); }

/* Honeypot - hidden from humans, reachable by bots */
.rt-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.rt-form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}
.rt-form__note { font-size: var(--text-sm); color: var(--color-muted); margin: 0; }
.rt-form__status { margin: 0; }
.rt-form__status:empty { display: none; }

/* Search form */
.rt-searchform { display: flex; gap: 0.5rem; }
.rt-searchform .rt-input { flex: 1; }

/* ==========================================================================
   8. HEADER & NAVIGATION
   ========================================================================== */

.rt-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out);
}
.rt-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  height: var(--header-height);
}

/* Solid state: default for inner pages, and for the hero header after scroll */
.rt-header--solid,
.rt-header.is-scrolled {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--color-border);
}
.rt-header.is-scrolled { box-shadow: var(--shadow-sm); }

@supports not (backdrop-filter: blur(1px)) {
  .rt-header--solid,
  .rt-header.is-scrolled { background: #fff; }
}

/* Branding */
.rt-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
  color: var(--color-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.rt-brand:hover { color: var(--color-heading); }
.rt-brand img,
.rt-brand .custom-logo {
  height: 34px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
}
.rt-brand__mark { width: 32px; height: 32px; flex: none; }
.rt-brand__tagline {
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-muted);
  margin-top: 0.15rem;
}
.rt-header--dark .rt-brand,
.rt-header--dark .rt-brand:hover { color: #fff; }
.rt-header--dark .rt-brand__tagline { color: var(--color-on-dark-muted); }
.rt-header--dark.is-scrolled .rt-brand { color: var(--color-heading); }
.rt-header--dark.is-scrolled .rt-brand__tagline { color: var(--color-muted); }
/* Logo swap for overlay headers */
.rt-brand__logo--light { display: none; }
.rt-header--dark:not(.is-scrolled) .rt-brand__logo--dark { display: none; }
.rt-header--dark:not(.is-scrolled) .rt-brand__logo--light { display: block; }

/* Primary nav */
.rt-nav { margin-left: auto; }
.rt-nav__list {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rt-nav__list > li { position: relative; }
.rt-nav__list > li > a {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-secondary);
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}
.rt-nav__list > li > a:hover { color: var(--color-heading); background: var(--color-surface-2); }
.rt-nav__list > li.current-menu-item > a,
.rt-nav__list > li.current-menu-ancestor > a,
.rt-nav__list > li.current_page_item > a,
.rt-nav__list > li.current_page_ancestor > a { color: var(--color-accent-text); font-weight: 600; }

.rt-header--dark:not(.is-scrolled) .rt-nav__list > li > a { color: rgba(255, 255, 255, 0.82); }
.rt-header--dark:not(.is-scrolled) .rt-nav__list > li > a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
}
.rt-header--dark:not(.is-scrolled) .rt-nav__list > li.current-menu-item > a,
.rt-header--dark:not(.is-scrolled) .rt-nav__list > li.current-menu-ancestor > a { color: #fff; }

.rt-nav__caret {
  width: 14px;
  height: 14px;
  opacity: 0.6;
  transition: transform var(--duration-fast) var(--ease-out);
}
.rt-nav__list > li:hover > a .rt-nav__caret,
.rt-nav__list > li:focus-within > a .rt-nav__caret { transform: rotate(180deg); }

/* Dropdowns */
.rt-nav .sub-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 268px;
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    visibility var(--duration-fast);
}
.rt-nav .sub-menu .sub-menu { top: -0.5rem; left: calc(100% + 0.25rem); }
.rt-nav li:hover > .sub-menu,
.rt-nav li:focus-within > .sub-menu,
.rt-nav li.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.rt-nav .sub-menu a {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-secondary);
  line-height: 1.45;
  transition: background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}
.rt-nav .sub-menu a:hover,
.rt-nav .sub-menu a:focus-visible {
  background: var(--color-surface);
  color: var(--color-accent-text);
}
.rt-nav .sub-menu .rt-nav__desc {
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-muted);
  margin-top: 0.1rem;
}

/* Header actions */
.rt-header__actions { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.rt-header__cta { margin-left: 0.35rem; }
.rt-header--dark:not(.is-scrolled) .rt-header__cta.rt-btn--dark {
  --btn-bg: #fff;
  --btn-fg: var(--color-primary);
}
.rt-header--dark:not(.is-scrolled) .rt-header__cta.rt-btn--dark:hover { --btn-bg: #eef1f6; }

.rt-icon-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-secondary);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}
.rt-icon-btn:hover { background: var(--color-surface-2); color: var(--color-heading); }
.rt-icon-btn svg { width: 20px; height: 20px; }
.rt-header--dark:not(.is-scrolled) .rt-icon-btn { color: rgba(255, 255, 255, 0.85); }
.rt-header--dark:not(.is-scrolled) .rt-icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Burger */
.rt-burger { display: none; }
.rt-burger__box { position: relative; width: 20px; height: 14px; }
.rt-burger__box span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--duration) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out),
    top var(--duration) var(--ease-out);
}
.rt-burger__box span:nth-child(1) { top: 0; }
.rt-burger__box span:nth-child(2) { top: 6px; }
.rt-burger__box span:nth-child(3) { top: 12px; }
.rt-burger[aria-expanded="true"] .rt-burger__box span:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}
.rt-burger[aria-expanded="true"] .rt-burger__box span:nth-child(2) { opacity: 0; }
.rt-burger[aria-expanded="true"] .rt-burger__box span:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

/* Mobile drawer */
.rt-drawer {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  display: none;
  background: var(--color-background);
  border-top: 1px solid var(--color-border);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}
.rt-drawer[data-open="true"] { opacity: 1; transform: none; }
.rt-drawer__inner {
  padding: var(--space-md) var(--gutter) var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-height: 100%;
}
.rt-drawer__list { list-style: none; margin: 0; padding: 0; }
.rt-drawer__list > li { border-bottom: 1px solid var(--color-border); }
.rt-drawer__row { display: flex; align-items: stretch; }
.rt-drawer__list a {
  flex: 1;
  display: block;
  padding: 1rem 0;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
}
.rt-drawer__list a:hover { color: var(--color-accent-text); }
.rt-drawer__list .current-menu-item > .rt-drawer__row > a,
.rt-drawer__list .current_page_item > .rt-drawer__row > a { color: var(--color-accent-text); }
.rt-drawer__toggle {
  display: grid;
  place-items: center;
  width: 48px;
  flex: none;
  border: 0;
  background: none;
  color: var(--color-muted);
  cursor: pointer;
}
.rt-drawer__toggle svg { width: 20px; height: 20px; transition: transform var(--duration) var(--ease-out); }
.rt-drawer__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.rt-drawer__list .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.9rem;
  border-left: 2px solid var(--color-border);
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height var(--duration) var(--ease-out),
    padding-bottom var(--duration) var(--ease-out),
    visibility var(--duration);
}
.rt-drawer__list li[data-open="true"] > .sub-menu {
  max-height: 70vh;
  padding-bottom: 0.75rem;
  visibility: visible;
}
.rt-drawer__list .sub-menu li { border: 0; }
.rt-drawer__list .sub-menu a {
  padding: 0.6rem 0;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-muted);
}
.rt-drawer__list .sub-menu a:hover { color: var(--color-accent-text); }
.rt-drawer__actions { display: grid; gap: 0.75rem; margin-top: auto; padding-top: var(--space-md); }
.rt-drawer__meta {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.rt-drawer__meta a { font-weight: 600; }

/* Search overlay */
.rt-search-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(11, 15, 25, 0.6);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration) var(--ease-out), visibility var(--duration);
}
.rt-search-overlay[data-open="true"] { opacity: 1; visibility: visible; }
.rt-search-overlay__inner {
  max-width: 640px;
  margin: 14vh auto 0;
  padding: var(--space-lg);
  background: var(--color-background);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  transform: translateY(12px);
  transition: transform var(--duration) var(--ease-out);
}
.rt-search-overlay[data-open="true"] .rt-search-overlay__inner { transform: none; }

@media (max-width: 700px) {
  .rt-search-overlay__inner { margin: 0; border-radius: 0; min-height: 100%; }
}

/* ==========================================================================
   9. HERO
   ========================================================================== */

.rt-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-dark);
  color: var(--color-on-dark);
  padding-top: calc(var(--header-height) + clamp(3.25rem, 1.5rem + 6.5vw, 7rem));
  padding-bottom: clamp(3.75rem, 2rem + 6.5vw, 7.5rem);
  isolation: isolate;
}
/* Hairline of accent light closing the section off from what follows. */
.rt-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent-ring), transparent);
  z-index: 1;
}

/* --- Background planes ---------------------------------------------------
   Four separate elements rather than two pseudo-elements, because each one
   moves at its own rate under parallax and a pseudo-element can only carry
   one transform. Every colour is derived from the palette tokens or plain
   white alpha, so a Customizer colour change still repaints the whole scene. */
.rt-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}
.rt-hero__bg > * {
  position: absolute;
  display: block;
}

/* Dot matrix - the flat technical plane furthest back. */
.rt-hero__dots {
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 68% 58% at 64% 14%, #000 8%, transparent 74%);
  -webkit-mask-image: radial-gradient(ellipse 68% 58% at 64% 14%, #000 8%, transparent 74%);
  opacity: 0.55;
}

/* Two slow accent blooms, drifting on `translate` so parallax keeps
   `transform` to itself and the two motions compose instead of clobbering. */
.rt-hero__aurora {
  border-radius: 50%;
  filter: blur(70px);
  max-width: 110vw;
}
.rt-hero__aurora--a {
  top: -30%;
  right: -14%;
  width: 760px;
  height: 760px;
  background: radial-gradient(circle, var(--color-accent) 0%, transparent 62%);
  opacity: 0.28;
  animation: rt-aurora-a 19s ease-in-out infinite alternate;
}
.rt-hero__aurora--b {
  bottom: -38%;
  left: -18%;
  width: 660px;
  height: 660px;
  background: radial-gradient(circle, var(--color-accent-2) 0%, transparent 64%);
  opacity: 0.17;
  animation: rt-aurora-b 24s ease-in-out infinite alternate;
}
@keyframes rt-aurora-a { from { translate: 0 0; } to { translate: -46px 34px; } }
@keyframes rt-aurora-b { from { translate: 0 0; } to { translate: 40px -28px; } }

/* A grid laid flat and run to a horizon under the copy: the depth cue that
   makes the whole section read as a space rather than a panel. */
.rt-hero__floor {
  left: -30%;
  right: -30%;
  bottom: 0;
  height: 70%;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.22) 1px, transparent 1px);
  background-size: 64px 64px;
  transform-origin: 50% 100%;
  /* Shallow angle and a long perspective: steeper than this and the whole
     plane crushes into a single line at the horizon. */
  transform: perspective(760px) rotateX(58deg);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 78%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 78%);
  opacity: 0.8;
  animation: rt-floor-run 14s linear infinite;
}
@keyframes rt-floor-run { to { background-position: 0 64px, 0 64px; } }

/* One wide, very low-contrast sweep. Long period on purpose - it should be
   noticed on the second look, not the first. */
.rt-hero__scan {
  inset: -20% -40%;
  background: linear-gradient(104deg, transparent 42%, rgba(255, 255, 255, 0.05) 50%, transparent 58%);
  animation: rt-scan 16s ease-in-out infinite;
}
@keyframes rt-scan {
  0%, 100% { translate: -34% 0; }
  50% { translate: 34% 0; }
}

.rt-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(2.5rem, 1rem + 5vw, 4.5rem);
  align-items: center;
}
.rt-hero__content { max-width: 660px; }

.rt-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem 0.5rem 0.85rem;
  border: 1px solid var(--color-border-dark-strong);
  border-radius: var(--radius-pill);
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(6px);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-md);
}
.rt-hero__eyebrow .rt-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent-2);
  flex: none;
  animation: rt-ping 2.8s var(--ease-out) infinite;
}
@keyframes rt-ping {
  0% { box-shadow: 0 0 0 0 var(--color-accent-ring); }
  70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.rt-hero__title {
  color: #fff;
  margin: 0 0 var(--space-md);
  font-size: clamp(2.4rem, 1.35rem + 3.5vw, 3.875rem);
  line-height: 1.04;
  letter-spacing: -0.038em;
  font-weight: 800;
  text-wrap: balance;
}
.rt-hero__title em {
  font-style: normal;
  color: var(--color-accent-text);
}
/* A slow sheen travelling through the highlighted phrase. Clipped to the
   glyphs, so it survives however the heading happens to wrap. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .rt-hero__title em {
    background-image: linear-gradient(
      100deg,
      var(--color-accent) 0%,
      var(--color-accent-2) 38%,
      #ffffff 52%,
      var(--color-accent-2) 66%,
      var(--color-accent) 100%
    );
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rt-sheen 9s linear infinite;
  }
}
@keyframes rt-sheen { to { background-position: -260% 0; } }

.rt-hero__text {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
  max-width: 56ch;
  margin: 0 0 var(--space-lg);
  text-wrap: pretty;
}
.rt-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* The primary call to action carries a glow and one periodic pass of light.
   `isolation` keeps the sweep between the button's own background and its
   label instead of washing over the text. */
.rt-hero__cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 14px 34px -12px var(--color-accent-ring);
}
.rt-hero__cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-18deg);
  animation: rt-shine 5s ease-in-out infinite;
}
@keyframes rt-shine {
  0%, 62% { left: -60%; }
  92%, 100% { left: 125%; }
}

.rt-hero__meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: var(--space-lg) 0 0;
  padding: 0;
}
.rt-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.04);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.76);
  transition: border-color var(--duration) var(--ease-out),
    background-color var(--duration) var(--ease-out);
}
.rt-hero__meta-item:hover {
  border-color: var(--color-accent-ring);
  background: rgba(255, 255, 255, 0.07);
}
.rt-hero__meta-item svg { width: 16px; height: 16px; color: var(--color-accent-2); flex: none; }

/* --- Hero visual: the delivery stack, exploded ----------------------------
   .rt-hero__stage owns the perspective, .rt-hero__tilt owns the pointer tilt
   (transitioned, so the cursor feels weighted) and .rt-hero__deck owns the
   scroll rotation (untransitioned, so scrolling stays exact). Splitting them
   is what keeps the two motions from overwriting one another's transform. */
.rt-hero__visual { position: relative; min-width: 0; }

.rt-hero__stage {
  position: relative;
  perspective: 1500px;
  perspective-origin: 62% 42%;
  padding: clamp(1rem, 3vw, 2.25rem) 0 clamp(2.25rem, 4.5vw, 3.5rem);
}
.rt-hero__tilt {
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--my, 0) * -5deg)) rotateY(calc(var(--mx, 0) * 8deg));
  transition: transform 420ms var(--ease-out);
}
.rt-hero__deck {
  display: grid;
  gap: clamp(0.7rem, 1.4vw, 1.1rem);
  transform-style: preserve-3d;
  transform:
    rotateX(var(--deck-x, 9deg))
    rotateY(var(--deck-y, -15deg))
    rotateZ(var(--deck-z, 1deg));
}

/* Each plate sits at its own --pz, so the stack fans out in depth even before
   a single pixel is scrolled. --py is the scroll offset, written by the
   parallax rules further down. */
.rt-hero__plate {
  position: relative;
  transform: translate3d(0, var(--py, 0px), calc(var(--pz, 0) * var(--pz-unit, 1px)));
  border: 1px solid var(--color-border-dark-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03));
  backdrop-filter: blur(10px);
  box-shadow:
    0 28px 52px -30px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: border-color var(--duration) var(--ease-out);
}
.rt-hero__plate:hover { border-color: var(--color-accent-ring); }

.rt-hero__plate--console {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.05rem;
  overflow: hidden;
}
.rt-hero__lights { display: inline-flex; gap: 0.35rem; }
.rt-hero__lights i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: block;
  background: rgba(255, 255, 255, 0.22);
}
.rt-hero__lights i:nth-child(1) { background: rgba(248, 113, 113, 0.55); }
.rt-hero__lights i:nth-child(2) { background: rgba(250, 204, 21, 0.5); }
.rt-hero__lights i:nth-child(3) { background: rgba(74, 222, 128, 0.55); }
.rt-hero__panel-title {
  margin-left: 0.4rem;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.02em;
}
/* A packet running the top edge of the console - the one thing on the deck
   that never stops moving. */
.rt-hero__pulse {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 32%;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  animation: rt-pulse-run 3.6s linear infinite;
}
@keyframes rt-pulse-run {
  from { transform: translateX(-110%); }
  to { transform: translateX(420%); }
}

.rt-hero__plate--layer {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 0.95rem 0.85rem 1.35rem;
}
/* The spine: an accent rail on each plate that gains weight as the stack
   descends, so the infrastructure end reads as the load-bearing one. */
.rt-hero__link {
  position: absolute;
  left: 7px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(to bottom, var(--color-accent), var(--color-accent-2));
  box-shadow: 0 0 14px -3px var(--color-accent);
  opacity: 0.45;
}
.rt-hero__plate:nth-child(3) .rt-hero__link { opacity: 0.62; }
.rt-hero__plate:nth-child(4) .rt-hero__link { opacity: 0.8; }
.rt-hero__plate:nth-child(5) .rt-hero__link { opacity: 1; }

.rt-hero__row-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid var(--color-border-dark);
  background: linear-gradient(140deg, var(--color-accent-soft), rgba(255, 255, 255, 0.04));
  color: var(--color-accent-2);
}
.rt-hero__row-icon svg { width: 17px; height: 17px; }
.rt-hero__row-text { min-width: 0; }
.rt-hero__row-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.3;
}
.rt-hero__row-sub {
  display: block;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.44);
  font-family: var(--font-mono);
  margin-top: 0.15rem;
}
.rt-hero__row-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border-radius: var(--radius-pill);
  background: rgba(34, 197, 94, 0.14);
  color: #4ade80;
  white-space: nowrap;
}
.rt-hero__row-pill::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 7px currentColor;
  flex: none;
}

.rt-hero__plate--metrics { padding: 1rem 1.1rem 1rem 1.35rem; }
.rt-hero__bars { display: grid; gap: 0.55rem; }
.rt-hero__bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}
.rt-hero__bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2));
  width: var(--w, 60%);
  transform-origin: left;
  animation: rt-bar-grow 1.1s var(--ease-out) both;
  animation-delay: var(--d, 0ms);
}
@keyframes rt-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Floating assurance card. It sits outside the tilt so it stays square to the
   viewport while the deck turns behind it - the contrast is what sells the
   depth. */
.rt-hero__float {
  position: absolute;
  left: -10%;
  bottom: -0.25rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1.15rem;
  border: 1px solid var(--color-border-dark-strong);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface-dark) 86%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-xl);
  animation: rt-float 7s ease-in-out infinite;
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .rt-hero__float { background: rgba(10, 22, 40, 0.9); }
}
.rt-hero__float-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(34, 197, 94, 0.14);
  color: #4ade80;
  flex: none;
}
.rt-hero__float-icon svg { width: 19px; height: 19px; }
.rt-hero__float-value {
  display: block;
  font-size: var(--text-lg);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.rt-hero__float-label {
  display: block;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.1rem;
}
@keyframes rt-float {
  0%, 100% { transform: translate3d(0, var(--py, 0px), 0); }
  50% { transform: translate3d(0, calc(var(--py, 0px) - 12px), 0); }
}

/* Below the parallax breakpoint the deck lies flat. The depth ramp needs
   horizontal room a phone does not have, and a turned card is harder to read
   than a plain stack. Same 768px line the parallax rules use. */
@media (max-width: 767px) {
  .rt-hero__stage { perspective: none; padding: 0; }
  .rt-hero__tilt { transform: none; }
  .rt-hero__deck { --deck-x: 0deg; --deck-y: 0deg; --deck-z: 0deg; --pz-unit: 0px; }
}

/* Optional custom hero image replaces the CSS composition. It gets the same
   frame treatment so swapping one for the other is not a visual downgrade. */
.rt-hero__frame {
  position: relative;
  border-radius: var(--radius-xl);
  padding: 8px;
  border: 1px solid var(--color-border-dark);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.75);
}
.rt-hero__image {
  display: block;
  width: 100%;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-dark-strong);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
}
/* Inside the frame the border and shadow belong to the frame, not the image. */
.rt-hero__frame .rt-hero__image {
  border: 0;
  box-shadow: none;
  border-radius: calc(var(--radius-xl) - 8px);
}

/* Detail-page panel --------------------------------------------------------
   single-rt_service.php and single-rt_product.php render the flat ancestor of
   the homepage deck - .rt-hero__panel / __panel-bar / __panel-body / __row -
   and share the row parts above with it. The homepage no longer uses these
   four selectors, but those templates still do, so they stay. */
.rt-hero__panel {
  position: relative;
  border: 1px solid var(--color-border-dark-strong);
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  backdrop-filter: blur(8px);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
.rt-hero__panel-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--color-border-dark);
  background: rgba(255, 255, 255, 0.03);
}
.rt-hero__panel-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: block;
}
.rt-hero__panel-body { padding: 1.25rem; display: grid; gap: 0.9rem; }
.rt-hero__row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.035);
}

/* Inner page hero */
.rt-page-hero {
  position: relative;
  padding-top: calc(var(--header-height) + clamp(2.5rem, 1.5rem + 4vw, 4.5rem));
  padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}
.rt-page-hero__inner { max-width: 780px; }
.rt-page-hero__title { margin: var(--space-md) 0 0; }
.rt-page-hero__text { margin: var(--space-md) 0 0; max-width: 62ch; }
.rt-page-hero__actions { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: 0.75rem; }

.rt-page-hero--dark {
  background: var(--color-surface-dark);
  color: var(--color-on-dark);
  border-bottom-color: transparent;
}
.rt-page-hero--dark .rt-page-hero__title { color: #fff; }
.rt-page-hero--dark .rt-page-hero__text { color: var(--color-on-dark-muted); }
.rt-page-hero--dark .rt-eyebrow { color: var(--color-accent-2); }
.rt-page-hero--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 70% 100% at 30% 0%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 100% at 30% 0%, #000, transparent 75%);
  pointer-events: none;
}

/* ==========================================================================
   10. HOMEPAGE SECTIONS
   ========================================================================== */

/* --- Trust bar ----------------------------------------------------------- */
.rt-trust { padding-block: clamp(2.25rem, 1.8rem + 2vw, 3.5rem); border-bottom: 1px solid var(--color-border); }
.rt-trust__label {
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-muted);
  margin: 0 0 var(--space-lg);
}

/* --- Service cards ------------------------------------------------------- */
.rt-services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}
.rt-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out),
    transform var(--duration) var(--ease-out);
}
.rt-service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--color-accent-softer), transparent 55%);
  opacity: 0;
  transition: opacity var(--duration) var(--ease-out);
  pointer-events: none;
}
.rt-service-card:hover {
  border-color: var(--color-accent-ring);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.rt-service-card:hover::before { opacity: 1; }
.rt-service-card > * { position: relative; }
.rt-service-card__num {
  position: absolute;
  top: clamp(1.25rem, 1rem + 1vw, 1.85rem);
  right: clamp(1.25rem, 1rem + 1vw, 1.85rem);
  font-size: var(--text-sm);
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--color-border-strong);
  letter-spacing: 0.02em;
  transition: color var(--duration) var(--ease-out);
}
.rt-service-card:hover .rt-service-card__num { color: var(--color-accent-text); }
.rt-service-card__title {
  font-size: var(--text-xl);
  margin: 0 0 0.55rem;
  padding-right: 2.5rem;
}
.rt-service-card__title a { color: inherit; }
.rt-service-card__title a::after { content: ""; position: absolute; inset: 0; }
.rt-service-card:hover .rt-service-card__title { color: var(--color-accent-text); }
.rt-service-card__text {
  color: var(--color-muted);
  font-size: var(--text-base);
  margin: 0 0 var(--space-md);
  flex: 1;
}
.rt-service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent-text);
  margin-top: auto;
}
.rt-service-card__link svg { width: 15px; height: 15px; transition: transform var(--duration-fast) var(--ease-out); }
.rt-service-card:hover .rt-service-card__link svg { transform: translateX(3px); }

/* --- Alternating feature rows -------------------------------------------- */
.rt-feature-row + .rt-feature-row { margin-top: clamp(3.5rem, 2rem + 6vw, 7rem); }
.rt-feature-row__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.rt-feature-row--reverse .rt-feature-row__visual { order: 2; }
.rt-feature-row__title { margin: var(--space-sm) 0 var(--space-sm); }
.rt-feature-row__text { color: var(--color-muted); margin: 0 0 var(--space-md); max-width: 54ch; }
.rt-feature-row__list {
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.rt-feature-row__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.55;
}
.rt-feature-row__list svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.15em;
  color: var(--color-accent-2);
}

/* Abstract visual frame used for feature rows */
.rt-visual {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  padding: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.rt-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(11, 15, 25, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 15, 25, 0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.rt-visual > * { position: relative; }
.rt-visual img { border-radius: var(--radius-lg); width: 100%; }
.rt-visual__card {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.25rem;
}
.rt-visual__stack { display: grid; gap: 0.75rem; }
.rt-visual__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-heading);
}
.rt-visual__row-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  flex: none;
}
.rt-visual__row-icon svg { width: 16px; height: 16px; }
.rt-visual__meta {
  margin-left: auto;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-muted);
}
.rt-visual__bar { height: 6px; border-radius: 3px; background: var(--color-surface-2); overflow: hidden; }
.rt-visual__bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--color-accent);
  width: var(--w, 65%);
  opacity: 0.85;
}

/* --- Why / advantages ---------------------------------------------------- */
.rt-why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.rt-why-item {
  background: var(--color-background);
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  transition: background-color var(--duration) var(--ease-out);
}
.rt-why-item:hover { background: var(--color-surface); }
.rt-why-item__num {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-accent-text);
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: var(--space-sm);
}
.rt-why-item__title { font-size: var(--text-lg); margin: 0 0 0.4rem; }
.rt-why-item__text { color: var(--color-muted); font-size: var(--text-base); margin: 0; }
.rt-section--dark .rt-why-grid { background: var(--color-border-dark); border-color: var(--color-border-dark); }
.rt-section--dark .rt-why-item { background: var(--color-surface-dark); }
.rt-section--dark .rt-why-item:hover { background: var(--color-surface-dark-2); }
.rt-section--dark .rt-why-item__num { color: var(--color-accent-2); }
.rt-section--dark .rt-why-item__text { color: var(--color-on-dark-muted); }

/* --- Process timeline ---------------------------------------------------- */
.rt-process { position: relative; }
.rt-process__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-md);
  position: relative;
}
.rt-process__track::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-border);
}
.rt-section--dark .rt-process__track::before { background: var(--color-border-dark); }
.rt-process__step { position: relative; padding-top: 0; }
.rt-process__marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-background);
  font-size: var(--text-sm);
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--color-muted);
  margin-bottom: var(--space-md);
  transition: all var(--duration) var(--ease-out);
}
.rt-process__step:hover .rt-process__marker {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  transform: scale(1.06);
}
.rt-section--dark .rt-process__marker {
  background: var(--color-surface-dark);
  border-color: var(--color-border-dark-strong);
  color: var(--color-on-dark-muted);
}
.rt-process__title { font-size: var(--text-lg); margin: 0 0 0.4rem; }
.rt-process__text { color: var(--color-muted); font-size: var(--text-base); margin: 0; }
.rt-section--dark .rt-process__text { color: var(--color-on-dark-muted); }

/* --- Technology ---------------------------------------------------------- */
.rt-tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-md);
}
.rt-tech-group {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  background: var(--color-background);
  transition: border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}
.rt-tech-group:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }
.rt-tech-group__title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 var(--space-sm);
}
.rt-tech-group__list { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; margin: 0; padding: 0; }
.rt-tech-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-heading);
  line-height: 1.4;
  transition: all var(--duration-fast) var(--ease-out);
}
.rt-tech-chip:hover {
  border-color: var(--color-accent-ring);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}
.rt-tech-chip img { width: 18px; height: 18px; object-fit: contain; }
.rt-section--dark .rt-tech-group { background: var(--color-surface-dark-2); border-color: var(--color-border-dark); }
.rt-section--dark .rt-tech-group__title { color: var(--color-on-dark-muted); }
.rt-section--dark .rt-tech-chip {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--color-border-dark);
  color: #fff;
}

/* --- CTA band ------------------------------------------------------------ */
.rt-cta {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-dark);
  color: var(--color-on-dark);
  border-radius: var(--radius-2xl);
  padding: clamp(2.5rem, 1.5rem + 5vw, 5rem) clamp(1.5rem, 1rem + 4vw, 4.5rem);
  isolation: isolate;
}
.rt-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 90% at 80% 20%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 80% 20%, #000, transparent 72%);
}
.rt-cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -40%;
  right: -8%;
  width: 560px;
  height: 560px;
  max-width: 90vw;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-accent) 0%, transparent 68%);
  opacity: 0.2;
  filter: blur(26px);
}
.rt-cta__inner { max-width: 640px; }
.rt-cta__title { color: #fff; margin: 0 0 var(--space-sm); }
.rt-cta__text { color: rgba(255, 255, 255, 0.72); margin: 0 0 var(--space-lg); font-size: var(--text-lg); }
.rt-cta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.rt-cta--full { border-radius: 0; }

/* --- About preview ------------------------------------------------------- */
.rt-about-visual {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-surface-dark);
  min-height: 380px;
  display: grid;
  align-content: center;
  gap: var(--space-md);
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
}
.rt-about-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 20%, transparent 80%);
}
.rt-about-visual > * { position: relative; }
.rt-about-visual img { border-radius: var(--radius-lg); width: 100%; }
.rt-about-visual__stat {
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  padding: 1.15rem 1.35rem;
}
.rt-about-visual__value {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: var(--tracking-tighter);
  line-height: 1.1;
}
.rt-about-visual__label {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.25rem;
}
.rt-about-list { list-style: none; margin: var(--space-md) 0 var(--space-lg); padding: 0; display: grid; gap: 0.7rem; }
.rt-about-list li { display: flex; align-items: flex-start; gap: 0.65rem; line-height: 1.55; }
.rt-about-list svg { flex: none; width: 20px; height: 20px; margin-top: 0.15em; color: var(--color-accent-text); }

/* --- About panel (homepage) ----------------------------------------------
   One inset object carrying the whole section: a masthead band, the proof
   points under a rule, and the figures along the bottom edge. Dark against
   the light sections either side, so it anchors the middle of the page
   without borrowing the hero's 3D scene.

   Namespaced away from .rt-about-visual / .rt-about-list, which page-about
   and the product template still render. */
.rt-about-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: var(--color-surface-dark);
  color: var(--color-on-dark);
  padding: clamp(2rem, 1.2rem + 3.2vw, 4rem);
  box-shadow: var(--shadow-xl);
}
/* Accent light along the top edge - the panel's one bright line. */
.rt-about-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  box-shadow: 0 0 12px 1px var(--color-accent-ring);
  opacity: 0.8;
}

.rt-about-panel__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.rt-about-panel__bg > * { position: absolute; display: block; }
/* The same technical mesh the hero uses, at a smaller pitch so the two read
   as one family rather than a repeat. */
.rt-about-panel__mesh {
  inset: -10% -5%;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 92% 80% at 18% 0%, #000 12%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 92% 80% at 18% 0%, #000 12%, transparent 78%);
}
.rt-about-panel__bloom {
  right: -12%;
  top: -34%;
  width: 620px;
  height: 620px;
  max-width: 90%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-accent) 0%, transparent 64%);
  opacity: 0.2;
  filter: blur(70px);
}

/* Masthead: the heading held against the body copy, not stacked above it. */
.rt-about-panel__head {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  /* Wide gutter between the columns, tight one between the rows - the copy
     column spans both rows, so a large row gap would strand the button. */
  gap: var(--space-md) clamp(1.75rem, 1rem + 3vw, 4rem);
  align-items: start;
}
.rt-about-panel__title {
  color: #fff;
  margin: 0;
  font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.032em;
  font-weight: 700;
  text-wrap: balance;
}
.rt-about-panel__lede { grid-column: 1; grid-row: 1; }
.rt-about-panel__body {
  grid-column: 2;
  grid-row: 1 / span 2;
  padding-top: 0.35rem;
}
.rt-about-panel__cta {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  align-self: start;
  margin-top: var(--space-lg);
}
.rt-about-panel__text {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.72);
  text-wrap: pretty;
}
.rt-about-panel__text + .rt-about-panel__text { margin-top: var(--space-sm); }

/* Optional Customizer image, as a wide band across the panel. */
.rt-about-panel__media {
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-dark);
}
.rt-about-panel__media img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

/* Proof points, two up, divided by hairlines rather than boxed in cards -
   the panel is already the card. */
.rt-about-panel__points {
  list-style: none;
  margin: clamp(2rem, 1.4rem + 2vw, 3rem) 0 0;
  padding: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem) 0 0;
  border-top: 1px solid var(--color-border-dark);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 0.7rem + 1vw, 1.6rem) clamp(1.5rem, 1rem + 2vw, 3rem);
}
.rt-about-panel__point {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 0.85rem;
  font-size: var(--text-base);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.84);
}
.rt-about-panel__tick {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--color-border-dark);
  background: var(--color-accent-soft);
  color: var(--color-accent-2);
  transition: border-color var(--duration) var(--ease-out),
    background-color var(--duration) var(--ease-out);
}
.rt-about-panel__tick svg { width: 18px; height: 18px; }
.rt-about-panel__point:hover .rt-about-panel__tick {
  border-color: var(--color-accent-ring);
  background: rgba(255, 255, 255, 0.08);
}

/* The figures as a rail along the bottom edge. */
.rt-about-panel__stats {
  margin-top: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  padding-top: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  border-top: 1px solid var(--color-border-dark);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: clamp(1.25rem, 0.8rem + 1.6vw, 2.5rem);
}
.rt-about-panel__stat {
  display: grid;
  gap: 0.4rem;
  align-content: start;
  padding-left: clamp(1rem, 0.7rem + 0.8vw, 1.5rem);
  border-left: 2px solid var(--color-accent-ring);
}
.rt-about-panel__value {
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-accent-2);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .rt-about-panel__value {
    background-image: linear-gradient(100deg, var(--color-accent) 10%, var(--color-accent-2) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.rt-about-panel__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
}

/* --- About panel: scroll drift -------------------------------------------
   --vp is this section's own view progress (see the scrub rules in the
   parallax block). The mesh and the bloom travel opposite ways across it,
   so the panel has depth without moving anything anyone is reading. */
@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 768px) {
    .rt-about-panel__mesh {
      transform: translate3d(0, calc((var(--vp, 0.5) - 0.5) * -46px), 0);
    }
    .rt-about-panel__bloom {
      transform: translate3d(0, calc((var(--vp, 0.5) - 0.5) * 90px), 0);
    }
  }
}

/* --- About panel: narrow ------------------------------------------------- */
@media (max-width: 860px) {
  .rt-about-panel__head { grid-template-columns: minmax(0, 1fr); }
  /* One column: let the three blocks fall in source order, so the button
     comes after the copy rather than interrupting it. */
  .rt-about-panel__lede,
  .rt-about-panel__body,
  .rt-about-panel__cta {
    grid-column: 1;
    grid-row: auto;
  }
  .rt-about-panel__cta { margin-top: var(--space-md); }
  .rt-about-panel__points { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .rt-about-panel__cta { justify-self: stretch; }
  .rt-about-panel__stat { padding-left: 1rem; }
}

/* ==========================================================================
   11. ARCHIVES, SINGLE, BLOG
   ========================================================================== */

.rt-post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.rt-post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out),
    transform var(--duration) var(--ease-out);
}
.rt-post-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.rt-post-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-surface-2);
}
.rt-post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}
.rt-post-card:hover .rt-post-card__media img { transform: scale(1.04); }
.rt-post-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.25rem, 1rem + 0.8vw, 1.65rem);
}
.rt-post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-bottom: 0.65rem;
}
.rt-post-card__meta .rt-badge { font-size: 11px; }
.rt-post-card__title {
  font-size: var(--text-xl);
  line-height: 1.32;
  margin: 0 0 0.55rem;
}
.rt-post-card__title a { color: inherit; }
.rt-post-card__title a::after { content: ""; position: absolute; inset: 0; }
.rt-post-card:hover .rt-post-card__title { color: var(--color-accent-text); }
.rt-post-card__excerpt {
  color: var(--color-muted);
  font-size: var(--text-base);
  margin: 0 0 var(--space-md);
  flex: 1;
}
.rt-post-card__footer {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: auto;
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.rt-post-card__avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; }

/* Featured post */
.rt-featured-post {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-background);
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  transition: box-shadow var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}
.rt-featured-post:hover { box-shadow: var(--shadow-lg); border-color: var(--color-border-strong); }
.rt-featured-post__media { position: relative; min-height: 320px; background: var(--color-surface-2); }
.rt-featured-post__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rt-featured-post__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.75rem, 1.25rem + 2.4vw, 3rem);
}
.rt-featured-post__title { font-size: var(--text-3xl); margin: 0.75rem 0 0.75rem; line-height: 1.18; }
.rt-featured-post__title a { color: inherit; }
.rt-featured-post__title a::after { content: ""; position: absolute; inset: 0; }

/* Case study / editorial cards */
.rt-work-grid { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.rt-work-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-background);
  transition: border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}
.rt-work-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-lg); }
.rt-work-card:nth-child(even) .rt-work-card__media { order: 2; }
.rt-work-card__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-surface-2);
}
.rt-work-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.rt-work-card:hover .rt-work-card__media img { transform: scale(1.03); }
.rt-work-card__title { font-size: var(--text-3xl); margin: 0.75rem 0 0.75rem; }
.rt-work-card__title a { color: inherit; }
.rt-work-card__title a::after { content: ""; position: absolute; inset: 0; }
.rt-work-card__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-md);
  margin: var(--space-md) 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}
.rt-work-card__fact-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.2rem;
}
.rt-work-card__fact-value { display: block; font-size: var(--text-base); font-weight: 600; color: var(--color-heading); }

/* Product grid */
.rt-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.rt-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-background);
  transition: border-color var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out),
    transform var(--duration) var(--ease-out);
}
.rt-product-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.rt-product-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(160deg, var(--color-surface), var(--color-surface-2));
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.rt-product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.rt-product-card__media--icon { padding: var(--space-lg); }
.rt-product-card__media--icon img { width: auto; height: auto; max-height: 88px; object-fit: contain; }
.rt-product-card__badges { position: absolute; top: 0.85rem; left: 0.85rem; display: flex; gap: 0.35rem; }
.rt-product-card__body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.25rem, 1rem + 0.8vw, 1.65rem); }
.rt-product-card__title { font-size: var(--text-xl); margin: 0 0 0.5rem; }
.rt-product-card__title a { color: inherit; }
.rt-product-card__title a::after { content: ""; position: absolute; inset: 0; }
.rt-product-card:hover .rt-product-card__title { color: var(--color-accent-text); }
.rt-product-card__text { color: var(--color-muted); font-size: var(--text-base); margin: 0 0 var(--space-md); flex: 1; }
.rt-product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: auto;
}

/* Team */
.rt-team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.rt-team-card { text-align: left; }
.rt-team-card__media {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-2);
  margin-bottom: var(--space-sm);
}
.rt-team-card__media img { width: 100%; height: 100%; object-fit: cover; }
.rt-team-card__name { font-size: var(--text-lg); margin: 0 0 0.15rem; }
.rt-team-card__role { font-size: var(--text-sm); color: var(--color-muted); margin: 0; }

/* Single post / entry */
.rt-entry-header { max-width: 780px; margin-inline: auto; text-align: center; }
.rt-entry-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-top: var(--space-md);
}
.rt-entry-header__meta-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.rt-entry-header__meta img { width: 28px; height: 28px; border-radius: 50%; }
.rt-entry__media {
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) auto 0;
  max-width: var(--container);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-surface-2);
}
.rt-entry__media img { width: 100%; }
.rt-entry__content { max-width: 760px; margin-inline: auto; }
.rt-entry__footer {
  max-width: 760px;
  margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) auto 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.rt-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rt-share { display: flex; align-items: center; gap: 0.5rem; }
.rt-share__label { font-size: var(--text-sm); font-weight: 600; color: var(--color-heading); }
.rt-share a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-muted);
  transition: all var(--duration-fast) var(--ease-out);
}
.rt-share a:hover { border-color: var(--color-heading); color: var(--color-heading); background: var(--color-surface); }
.rt-share svg { width: 17px; height: 17px; }

.rt-post-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  max-width: 760px;
  margin: var(--space-xl) auto 0;
}
.rt-post-nav__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  transition: border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}
.rt-post-nav__item:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }
.rt-post-nav__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.4rem;
}
.rt-post-nav__title { display: block; font-size: var(--text-base); font-weight: 600; color: var(--color-heading); line-height: 1.45; }
.rt-post-nav__item--next { text-align: right; }

/* Sidebar */
.rt-with-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  align-items: start;
}
.rt-sidebar { position: sticky; top: calc(var(--header-height) + var(--space-md)); display: grid; gap: var(--space-md); }
.rt-widget {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  background: var(--color-background);
}
.rt-widget__title { font-size: var(--text-base); font-weight: 700; margin: 0 0 var(--space-sm); color: var(--color-heading); }
.rt-widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.rt-widget li a {
  display: block;
  padding: 0.45rem 0;
  font-size: var(--text-sm);
  color: var(--color-secondary);
  font-weight: 500;
}
.rt-widget li a:hover { color: var(--color-accent-text); }
.rt-widget li + li { border-top: 1px solid var(--color-border); }

/* Related */
.rt-related { background: var(--color-surface); }

/* Search results list */
.rt-result-list { display: grid; gap: 0; }
.rt-result {
  position: relative;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
}
.rt-result:first-child { padding-top: 0; }
.rt-result__type {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: 0.35rem;
  display: block;
}
.rt-result__title { font-size: var(--text-xl); margin: 0 0 0.35rem; }
.rt-result__title a { color: inherit; }
.rt-result__title a:hover { color: var(--color-accent-text); }
.rt-result__excerpt { color: var(--color-muted); font-size: var(--text-base); margin: 0; }
.rt-result__url { font-size: var(--text-sm); color: var(--color-muted-light); margin-top: 0.35rem; word-break: break-all; }

/* 404 */
.rt-404 {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 62vh;
  padding-block: var(--section-y);
}
.rt-404__code {
  font-size: clamp(4.5rem, 3rem + 10vw, 9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--color-accent-text);
  opacity: 0.16;
  margin: 0 0 -0.4em;
}
.rt-404__links { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: var(--space-lg); }

/* Comments */
.rt-comments { max-width: 760px; margin: clamp(2.5rem, 2rem + 2vw, 4rem) auto 0; }
.rt-comments__title { font-size: var(--text-2xl); margin: 0 0 var(--space-lg); }
.rt-comments .comment-list { list-style: none; margin: 0 0 var(--space-lg); padding: 0; display: grid; gap: var(--space-md); }
.rt-comments .comment-list .children { list-style: none; margin: var(--space-md) 0 0; padding-left: clamp(1rem, 3vw, 2.5rem); display: grid; gap: var(--space-md); }
.rt-comments .comment-body {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  background: var(--color-background);
}
.rt-comments .comment-meta { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.rt-comments .comment-author img { width: 36px; height: 36px; border-radius: 50%; }
.rt-comments .comment-author .fn { font-weight: 600; font-style: normal; color: var(--color-heading); }
.rt-comments .comment-metadata { font-size: var(--text-sm); color: var(--color-muted); }
.rt-comments .reply { margin-top: 0.6rem; }
.rt-comments .reply a { font-size: var(--text-sm); font-weight: 600; }
.rt-comments .comment-respond { margin-top: var(--space-lg); }
.rt-comments .comment-form { display: grid; gap: var(--space-md); }
.rt-comments .comment-form p { margin: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.rt-comments .comment-form label { font-size: var(--text-sm); font-weight: 600; color: var(--color-heading); }
.rt-comments .comment-form .form-submit { display: block; }
.rt-comments .comment-form .submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.8125rem 1.5rem;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  width: auto;
}
.rt-comments .comment-form .submit:hover { background: var(--color-accent-hover); }

/* ==========================================================================
   12. CONTACT PAGE
   ========================================================================== */

.rt-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 1.5rem + 3.5vw, 4.5rem);
  align-items: start;
}
.rt-contact-info { position: sticky; top: calc(var(--header-height) + var(--space-lg)); }
.rt-contact-list { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: var(--space-md); }
.rt-contact-list li { display: flex; align-items: flex-start; gap: 0.9rem; }
.rt-contact-list__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-accent-text);
  flex: none;
}
.rt-contact-list__icon svg { width: 19px; height: 19px; }
.rt-contact-list__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.15rem;
}
.rt-contact-list__value { display: block; font-size: var(--text-base); font-weight: 600; color: var(--color-heading); word-break: break-word; }
.rt-contact-list__value a { color: inherit; }
.rt-contact-list__value a:hover { color: var(--color-accent-text); }
.rt-contact-list__note { display: block; font-size: var(--text-sm); color: var(--color-muted); font-weight: 400; margin-top: 0.15rem; }

.rt-contact-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-background);
  padding: clamp(1.5rem, 1.25rem + 1.6vw, 2.75rem);
  box-shadow: var(--shadow-md);
}
.rt-contact-card__title { font-size: var(--text-2xl); margin: 0 0 0.4rem; }
.rt-contact-card__text { color: var(--color-muted); margin: 0 0 var(--space-lg); font-size: var(--text-base); }

.rt-form-success {
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-xl) var(--space-md);
}
.rt-form-success__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-success-bg);
  color: var(--color-success);
  margin-bottom: var(--space-md);
}
.rt-form-success__icon svg { width: 30px; height: 30px; }

/* ==========================================================================
   13. ACCOUNT / WOOCOMMERCE COMPATIBILITY
   ========================================================================== */

.rt-account-shell { max-width: 480px; margin-inline: auto; }
.rt-account-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-background);
  padding: clamp(1.5rem, 1.25rem + 1.6vw, 2.5rem);
  box-shadow: var(--shadow-md);
}
.rt-account-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  margin-bottom: var(--space-lg);
}
.rt-account-tabs a {
  flex: 1;
  text-align: center;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
}
.rt-account-tabs a[aria-current="true"] {
  background: var(--color-background);
  color: var(--color-heading);
  box-shadow: var(--shadow-xs);
}

.woocommerce .rt-main,
.rt-woo { --wc-gap: var(--space-md); }
.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  align-items: start;
}
.woocommerce-account.woocommerce-page:not(.logged-in) .woocommerce { display: block; max-width: 980px; margin-inline: auto; }
.woocommerce-MyAccount-navigation { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 0.5rem; background: var(--color-background); }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-secondary);
}
.woocommerce-MyAccount-navigation li a:hover { background: var(--color-surface); color: var(--color-heading); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--color-accent-soft); color: var(--color-accent-text); font-weight: 600; }
.woocommerce-MyAccount-content { min-width: 0; }

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password,
.woocommerce form.checkout_coupon {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  background: var(--color-background);
  box-shadow: var(--shadow-sm);
}
.woocommerce form .form-row { display: flex; flex-direction: column; gap: 0.45rem; margin: 0 0 var(--space-md); padding: 0; }
.woocommerce form .form-row label { font-size: var(--text-sm); font-weight: 600; color: var(--color-heading); }
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 100%; float: none; }
.woocommerce form .form-row .required { color: var(--color-error); text-decoration: none; }

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.8125rem 1.5rem;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover { background: var(--color-accent-hover); color: #fff; }

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-background);
  padding: 0 0 1.25rem;
  text-align: left;
  transition: border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out),
    transform var(--duration) var(--ease-out);
}
.woocommerce ul.products li.product:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.woocommerce ul.products li.product a img { margin: 0 0 1rem; border-radius: 0; aspect-ratio: 16 / 10; object-fit: cover; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: var(--text-lg) !important;
  font-weight: 650;
  padding: 0 1.25rem !important;
  margin: 0 0 0.4rem;
  color: var(--color-heading);
  line-height: 1.35;
}
.woocommerce ul.products li.product .price { padding: 0 1.25rem; color: var(--color-muted); font-size: var(--text-base); font-weight: 600; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button { margin: 1rem 1.25rem 0; }
.woocommerce ul.products li.product .onsale {
  top: 0.85rem;
  right: 0.85rem;
  left: auto;
  margin: 0;
  padding: 0.3rem 0.7rem;
  min-height: 0;
  min-width: 0;
  line-height: 1.4;
  border-radius: var(--radius-pill);
  background: var(--color-accent-2);
  font-size: var(--text-xs);
  font-weight: 700;
}
.woocommerce div.product .product_title { font-size: var(--text-4xl); }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; border-bottom: 1px solid var(--color-border); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0 1.25rem 0 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 0.85rem 0;
  font-weight: 600;
  color: var(--color-muted);
  border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--color-heading); border-bottom-color: var(--color-accent); }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border: 1px solid var(--color-border);
  border-top-width: 1px;
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 1rem 1.25rem;
  color: var(--color-text);
  list-style: none;
  margin: 0 0 var(--space-md);
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }
.woocommerce-message { border-left-color: var(--color-success); background: var(--color-success-bg); }
.woocommerce-error { border-left-color: var(--color-error); background: var(--color-error-bg); }

.woocommerce table.shop_table {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.woocommerce table.shop_table th { background: var(--color-surface); font-weight: 600; color: var(--color-heading); }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { padding: 0.9rem 1rem; border-color: var(--color-border); }

.woocommerce .woocommerce-breadcrumb { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-md); }
.woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; gap: 0.4rem; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; overflow: visible; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  min-width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-weight: 600;
  color: var(--color-heading);
  padding: 0 0.75rem;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Easy Digital Downloads - light touch so existing EDD output stays usable */
.edd_download { margin-bottom: var(--space-md); }
#edd_checkout_form_wrap input[type="text"],
#edd_checkout_form_wrap input[type="email"],
#edd_checkout_form_wrap select { max-width: 100%; }
.edd-submit,
.edd_purchase_submit_wrapper .edd-add-to-cart,
.edd-submit.button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.8125rem 1.5rem;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
}
.edd-submit:hover, .edd_purchase_submit_wrapper .edd-add-to-cart:hover { background: var(--color-accent-hover); color: #fff; }

/* ==========================================================================
   14. FOOTER
   ========================================================================== */

.rt-footer {
  background: var(--color-surface-dark);
  color: var(--color-on-dark-muted);
  padding-top: clamp(3rem, 2rem + 4vw, 5rem);
  font-size: var(--text-base);
}
.rt-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.rt-footer__brand { display: inline-flex; align-items: center; gap: 0.6rem; color: #fff; font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.03em; }
.rt-footer__brand:hover { color: #fff; }
.rt-footer__brand img { height: 34px; width: auto; max-width: 190px; object-fit: contain; }
.rt-footer__about { margin: var(--space-md) 0 0; max-width: 42ch; line-height: 1.7; color: var(--color-on-dark-muted); }
.rt-footer__title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 var(--space-md);
}
.rt-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.rt-footer__list a { color: var(--color-on-dark-muted); font-size: var(--text-base); }
.rt-footer__list a:hover { color: #fff; }
.rt-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.rt-footer__contact li { display: flex; align-items: flex-start; gap: 0.6rem; line-height: 1.55; }
.rt-footer__contact svg { flex: none; width: 17px; height: 17px; margin-top: 0.2em; color: var(--color-accent-2); }
.rt-footer__contact a { color: var(--color-on-dark-muted); word-break: break-word; }
.rt-footer__contact a:hover { color: #fff; }

.rt-footer__social { display: flex; gap: 0.5rem; margin-top: var(--space-lg); }
.rt-footer__social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  color: var(--color-on-dark-muted);
  transition: all var(--duration-fast) var(--ease-out);
}
.rt-footer__social a:hover { border-color: rgba(255, 255, 255, 0.4); color: #fff; background: rgba(255, 255, 255, 0.06); }
.rt-footer__social svg { width: 18px; height: 18px; }

.rt-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-top: 1px solid var(--color-border-dark);
  font-size: var(--text-sm);
}
.rt-footer__legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.rt-footer__legal a { color: var(--color-on-dark-muted); }
.rt-footer__legal a:hover { color: #fff; }
.rt-footer__copy { margin: 0; }

/* Back to top */
.rt-to-top {
  position: fixed;
  right: clamp(1rem, 2vw, 2rem);
  bottom: clamp(1rem, 2vw, 2rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-background);
  color: var(--color-heading);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out),
    visibility var(--duration);
}
.rt-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.rt-to-top:hover { background: var(--color-surface); }
.rt-to-top svg { width: 20px; height: 20px; }

/* ==========================================================================
   15. UTILITIES, ANIMATION, PRINT
   ========================================================================== */

.rt-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.rt-text-center { text-align: center; }
.rt-mt-lg { margin-top: var(--space-lg); }
.rt-mt-xl { margin-top: var(--space-xl); }
.rt-mb-0 { margin-bottom: 0; }
.rt-flow > * + * { margin-top: var(--space-sm); }

/* Scroll reveal - opt-in, JS adds .is-visible */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
/* Never hide content when JS is unavailable */
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .rt-hero__float { animation: none; }
  .rt-hero__bar span { animation: none; transform: none; }
  /* The hero's ambient layers stop outright rather than run at 0.01ms. */
  .rt-hero__aurora,
  .rt-hero__floor,
  .rt-hero__scan,
  .rt-hero__pulse,
  .rt-hero__eyebrow .rt-dot,
  .rt-hero__title em { animation: none; }
  .rt-hero__cta::after { display: none; }
  .rt-hero__tilt { transform: none; }
}

@media print {
  .rt-header, .rt-footer, .rt-drawer, .rt-to-top, .rt-cta, .rt-search-overlay { display: none !important; }
  body { font-size: 12pt; color: #000; }
  .rt-main--offset { padding-top: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* --- 1280px: tighten the container ---------------------------------------- */
@media (max-width: 1280px) {
  :root { --container: 1140px; }
}

/* --- 1080px: 4-up becomes 2-up, sidebar narrows --------------------------- */
@media (max-width: 1080px) {
  .rt-grid--4,
  .rt-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rt-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rt-with-sidebar { grid-template-columns: minmax(0, 1fr) 280px; }
  .rt-hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 2rem + 3vw, 3.5rem); }
  .rt-hero__content { max-width: 660px; }
  .rt-hero__visual { max-width: 640px; }
  /* Less turn once the deck no longer shares the row with the copy, and
     half the depth ramp - a long perspective magnifies the deepest plates,
     and at this width the full ramp pushed them past the section edge. */
  .rt-hero__stage { perspective: 2200px; }
  .rt-hero__deck { --deck-x: 5deg; --deck-y: -9deg; --deck-z: 0.5deg; --pz-unit: 0.5px; }
  .rt-hero__float { left: 0; }
}

/* --- 1024px: tablet ------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --header-height: 68px; }

  /* Desktop nav off, burger on */
  .rt-nav,
  .rt-header__cta { display: none; }
  .rt-header__actions { margin-left: auto; }
  .rt-burger { display: grid; }
  .rt-drawer { display: block; }
  .rt-drawer[hidden] { display: none; }
  .rt-drawer:not([data-open="true"]) { visibility: hidden; pointer-events: none; }

  .rt-services-grid,
  .rt-post-grid,
  .rt-product-grid,
  .rt-why-grid,
  .rt-grid--3,
  .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .rt-process__track {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 0;
  }
  .rt-process__track::before {
    top: 0;
    bottom: 0;
    left: 21px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .rt-process__step {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--space-md);
    padding-bottom: var(--space-lg);
  }
  .rt-process__step:last-child { padding-bottom: 0; }
  .rt-process__marker { margin-bottom: 0; }

  .rt-with-sidebar { grid-template-columns: minmax(0, 1fr); }
  .rt-sidebar { position: static; }

  .rt-contact-grid { grid-template-columns: minmax(0, 1fr); }
  .rt-contact-info { position: static; }

  .woocommerce-account .woocommerce { grid-template-columns: minmax(0, 1fr); }
}

/* --- 860px: split layouts stack ------------------------------------------- */
@media (max-width: 860px) {
  .rt-split,
  .rt-feature-row__grid,
  .rt-work-card,
  .rt-featured-post { grid-template-columns: minmax(0, 1fr); }
  .rt-feature-row--reverse .rt-feature-row__visual,
  .rt-work-card:nth-child(even) .rt-work-card__media { order: 0; }
  .rt-featured-post__media { min-height: 0; aspect-ratio: 16 / 9; }
  .rt-featured-post__media img { position: static; }
  .rt-section-head--split { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .rt-about-visual { min-height: 0; }
}

/* --- 700px: phone --------------------------------------------------------- */
@media (max-width: 700px) {
  :root {
    --header-height: 64px;
    --radius-2xl: 20px;
    --radius-xl: 16px;
  }

  .rt-services-grid,
  .rt-post-grid,
  .rt-product-grid,
  .rt-why-grid,
  .rt-grid--2,
  .rt-grid--3,
  .rt-grid--4,
  .rt-team-grid,
  .rt-form-grid,
  .rt-post-nav,
  .woocommerce ul.products { grid-template-columns: minmax(0, 1fr); }

  .rt-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .rt-footer__bottom { flex-direction: column; align-items: flex-start; }

  .rt-hero { padding-top: calc(var(--header-height) + 2.5rem); }
  .rt-hero__actions .rt-btn,
  .rt-cta__actions .rt-btn,
  .rt-page-hero__actions .rt-btn { flex: 1 1 100%; }
  .rt-hero__float { position: static; margin-top: 1rem; animation: none; }
  .rt-hero__meta { gap: 0.5rem; }
  .rt-hero__meta-item { width: 100%; }

  .rt-entry__footer { flex-direction: column; align-items: flex-start; }
  .rt-post-nav__item--next { text-align: left; }

  .rt-work-card__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .rt-cta { padding-inline: var(--space-md); }

  .rt-logos { gap: 1.75rem 2rem; }
  .rt-logos__item, .rt-logos__item img { height: 28px; max-height: 28px; }

  .rt-modal__dialog { max-height: 90vh; }
  .rt-form__footer .rt-btn { width: 100%; }
}

/* --- 400px: small phones -------------------------------------------------- */
@media (max-width: 400px) {
  :root { --gutter: 1.125rem; }
  /* Long labels must wrap rather than push the page wider than the screen. */
  .rt-btn {
    white-space: normal;
    text-wrap: balance;
    padding-inline: 1.125rem;
  }
  .rt-badge { white-space: normal; }
  .rt-brand img, .rt-brand .custom-logo { height: 28px; max-width: 140px; }
  .rt-brand { font-size: var(--text-lg); }
  .rt-work-card__facts { grid-template-columns: minmax(0, 1fr); }
  .rt-hero__plate--layer,
  .rt-hero__row { grid-template-columns: 34px minmax(0, 1fr); }
  .rt-hero__row-icon { width: 34px; height: 34px; }
  .rt-hero__row-pill { display: none; }
}

/* --- Hover-capable pointers only ------------------------------------------ */
@media (hover: none) {
  .rt-card--hover:hover,
  .rt-service-card:hover,
  .rt-post-card:hover,
  .rt-product-card:hover { transform: none; }
}

/* Industries ---------------------------------------------------------------
   Term-driven grid used on the homepage and the Industries page. */
.rt-industry-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
  margin: var(--space-2xl) 0 0;
  padding: 0;
  list-style: none;
}
.rt-industry-grid--lg {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0;
}
.rt-industry-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
  padding: var(--space-lg);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out),
    transform var(--duration) var(--ease-out);
}
.rt-industry-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.rt-industry-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-2xs);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  flex: none;
}
.rt-industry-card__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
}
.rt-industry-card__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-muted);
}

@media (max-width: 1024px) {
  .rt-industry-grid,
  .rt-industry-grid--lg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .rt-industry-grid,
  .rt-industry-grid--lg { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .rt-industry-card { transition: none; }
  .rt-industry-card:hover { transform: none; }
}
/* Trust statistics fallback ------------------------------------------------ */
.rt-trust-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.75rem, 1rem + 4vw, 5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rt-trust-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  text-align: center;
}
.rt-trust-stats__value {
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tighter);
  color: var(--color-heading);
}
.rt-trust-stats__label {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* WooCommerce single product ----------------------------------------------
   WooCommerce lays the gallery and summary out with 48% floats. Replace that
   with the theme grid so the columns, gaps and rhythm match every other page. */
.rt-woo > .rt-container > .woocommerce-notices-wrapper:empty { display: none; }

.woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 1.4rem + 2.6vw, 4rem);
  row-gap: clamp(2.5rem, 2rem + 2.4vw, 4.5rem);
  align-items: start;
}
.woocommerce div.product > * { grid-column: 1 / -1; min-width: 0; }
.woocommerce div.product > div.images,
.woocommerce div.product > div.summary {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}
.woocommerce div.product > div.images { grid-column: 1; }
.woocommerce div.product > div.summary { grid-column: 2; }

/* Gallery */
.woocommerce div.product div.images img { border-radius: var(--radius-lg); }
.woocommerce div.product div.images .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
}
.woocommerce div.product div.images .flex-control-thumbs li {
  width: 100%;
  float: none;
  margin: 0;
  list-style: none;
}
.woocommerce div.product div.images .flex-control-thumbs img {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  opacity: 0.6;
  transition: opacity var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}
.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
  opacity: 1;
  border-color: var(--color-accent);
}

/* Summary */
.woocommerce div.product div.summary { display: flex; flex-direction: column; gap: var(--space-md); }
.woocommerce div.product div.summary > * { margin: 0 !important; }
.woocommerce div.product .product_title {
  margin: 0 !important;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-heading);
}
.woocommerce div.product p.price del { color: var(--color-muted-light); font-weight: 400; }
.woocommerce div.product p.price ins { text-decoration: none; }
.woocommerce-product-details__short-description { color: var(--color-text); line-height: var(--leading-relaxed); }
.woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after { display: none; }
.woocommerce div.product form.cart div.quantity { float: none; margin: 0; }
.woocommerce div.product form.cart .button { float: none; margin: 0; }

.woocommerce div.product .product_meta {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-muted);
  display: grid;
  gap: 0.35rem;
}
.woocommerce div.product .product_meta > span { display: block; }
.woocommerce div.product .product_meta a { color: var(--color-accent-text); }

/* Tabs and what follows them */
.woocommerce div.product .woocommerce-tabs { padding-top: 0; }
.woocommerce div.product .woocommerce-tabs .panel {
  margin: 0;
  padding: var(--space-lg) 0 0;
  max-width: 75ch;
}
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child { margin-top: 0; }
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 { margin: 0 0 var(--space-lg); font-size: var(--text-3xl); }

@media (max-width: 900px) {
  .woocommerce div.product { grid-template-columns: minmax(0, 1fr); }
  .woocommerce div.product > div.images,
  .woocommerce div.product > div.summary { grid-column: 1 / -1; }
  .woocommerce div.product div.images .flex-control-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .woocommerce div.product div.images .flex-control-thumbs img { transition: none; }
}

/* Hero parallax -------------------------------------------------------------
   One scrubbed value, --px-progress, runs 0 -> 1 over the first viewport of
   scroll. Browsers with scroll-driven animations drive it off the compositor
   with no JavaScript at all; everywhere else theme.js sets the same property
   from a rAF loop. Both paths render through the identical transforms below,
   so there is one behaviour to reason about.

   The scene is built from six planes moving at six rates: the dot matrix
   recedes, the floor grid runs away under the copy, the two blooms drift the
   other way, the copy lifts, and the deck's plates separate along their own
   --px-depth ramp while the deck itself rotates towards flat. --mx / --my are
   the pointer's position, written by the same script, and land on a separate
   wrapper so cursor tilt and scroll rotation never share a transform. */

@property --px-progress {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --mx {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --my {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.rt-hero { --px-progress: 0; }

@keyframes rt-scrub {
  from { --px-progress: 0; }
  to   { --px-progress: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    @media (min-width: 768px) {
      .rt-hero {
        animation: rt-scrub linear both;
        animation-timeline: scroll(root block);
        animation-range: 0 100vh;
      }
    }
  }

  @media (min-width: 768px) {
    /* The plates keep their own transform (they carry --pz as well), so the
       scroll offset arrives as a variable rather than as a whole transform. */
    .rt-hero__plate,
    .rt-hero__float {
      --py: calc(var(--px-progress) * var(--px-depth, 0) * 1px);
    }

    /* The stack turns towards the reader as it separates. */
    .rt-hero__deck {
      --deck-x: calc(9deg - var(--px-progress) * 7deg);
      --deck-y: calc(-15deg + var(--px-progress) * 9deg);
      --deck-z: calc(1deg - var(--px-progress) * 1deg);
    }

    /* Background planes. */
    .rt-hero__dots {
      transform: translate3d(0, calc(var(--px-progress) * -64px), 0);
    }
    .rt-hero__floor {
      transform: perspective(760px) rotateX(58deg)
        translate3d(0, calc(var(--px-progress) * -90px), 0);
    }
    .rt-hero__aurora--a {
      transform: translate3d(0, calc(var(--px-progress) * 130px), 0);
      opacity: calc(0.28 - var(--px-progress) * 0.15);
    }
    .rt-hero__aurora--b {
      transform: translate3d(0, calc(var(--px-progress) * -76px), 0);
    }

    /* The copy lifts a little faster than the section scrolls. */
    .rt-hero__content {
      transform: translate3d(0, calc(var(--px-progress) * -36px), 0);
    }
  }
}

/* Only the moving layers get a compositor hint, and only while the hero can
   still be on screen. */
.rt-hero.is-parallax-active .rt-hero__plate,
.rt-hero.is-parallax-active .rt-hero__deck,
.rt-hero.is-parallax-active .rt-hero__dots,
.rt-hero.is-parallax-active .rt-hero__floor,
.rt-hero.is-parallax-active .rt-hero__aurora,
.rt-hero.is-parallax-active .rt-hero__content { will-change: transform; }

/* View-progress scrub -------------------------------------------------------
   The hero's --px-progress is measured from the top of the document. --vp is
   per-element: it runs 0 -> 1 as a [data-scrub] element crosses the viewport,
   so a section halfway down the page gets its own 0..1 instead of a number
   that ran out four screens ago. Browsers with scroll-driven animations read
   it off view(); theme.js writes the same property everywhere else.

   The registered initial value is 0.5 - the midpoint - so anything driven by
   --vp sits at rest, not at one extreme, before the first frame arrives. */

@property --vp {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.5;
}

@keyframes rt-scrub-view {
  from { --vp: 0; }
  to   { --vp: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @media (min-width: 768px) {
      [data-scrub] {
        animation: rt-scrub-view linear both;
        animation-timeline: view();
        animation-range: cover 0% cover 100%;
      }
    }
  }
}

/* Page hero: cancel the duplicated header offset ---------------------------
   .rt-main--offset already reserves --header-height to clear the fixed header,
   and .rt-page-hero was reserving it a second time - roughly 190-220px of dead
   space above the breadcrumb on every inner page. The hero keeps only its own
   breathing room when the offset is already in place. The overlay case (the
   homepage, where .rt-main has no offset) is untouched. */
.rt-main--offset .rt-page-hero {
  padding-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

/* Knowledge base (BasePress) ------------------------------------------------
   The plugin renders its own layout with no theme container or vertical
   rhythm, so article pages started immediately under the fixed header. These
   rules give it the site's spacing scale, card treatment and type, and let its
   own accent (set to the theme accent in the plugin settings) do the colour. */
.rt-main > .bpress-wrap {
  max-width: var(--container);
  /* The plugin adds 30px of its own top and bottom margin on top of whatever
     the theme reserves; the padding below is the whole vertical rhythm. */
  margin: 0 auto;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  padding-inline: var(--gutter);
}

/* A clearfix for floats that no longer exist - and, on the grid below, an
   extra grid item. */
.bpress-wrap::after { content: none; display: none; }

.bpress-wrap .bpress-card {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: none;
  background: var(--color-background);
}
.bpress-wrap .bpress-card.bpress-product.fix-height { transition: border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out), transform var(--duration) var(--ease-out); }
.bpress-wrap .bpress-card.bpress-product.fix-height:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.bpress-wrap .bpress-card-title,
.bpress-wrap h1.bpress-card-header,
.bpress-wrap h2.bpress-card-header {
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
}
.bpress-wrap .bpress-article-content { color: var(--color-text); line-height: var(--leading-relaxed); }
.bpress-wrap .bpress-article-content h2,
.bpress-wrap .bpress-article-content h3 { color: var(--color-heading); letter-spacing: var(--tracking-tight); }

.bpress-wrap .bpress-crumbs-wrap { font-size: var(--text-sm); color: var(--color-muted); }
.bpress-wrap .bpress-crumbs li a { color: var(--color-muted); }

.bpress-wrap button.bpress-btn,
.bpress-wrap .bpress-search input[type="text"],
.bpress-wrap .bpress-search input[type="search"] {
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
}
.bpress-wrap .bpress-search input[type="text"]:focus,
.bpress-wrap .bpress-search input[type="search"]:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}

@media (prefers-reduced-motion: reduce) {
  .bpress-wrap .bpress-card.bpress-product.fix-height { transition: none; }
  .bpress-wrap .bpress-card.bpress-product.fix-height:hover { transform: none; }
}

/* Knowledge base cards -----------------------------------------------------
   BasePress lays these out with inline-block columns and a negative
   letter-spacing whitespace hack, then bleeds the card image outside the card
   padding with !important negative margins. Rebuild both on the theme's grid
   and card design. */
.bpress-wrap .bpress-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-md);
  letter-spacing: normal;
  word-spacing: normal;
}
.bpress-wrap .bpress-grid > .bpress-col {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.bpress-wrap .bpress-card.bpress-product {
  display: flex;
  overflow: hidden;
  margin: 0;
  padding: 0 0 var(--space-sm);
}
.bpress-wrap .bpress-product-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
}

/* Undo the image bleed: the card has no padding to escape from now. */
.bpress-wrap .bpress-card.bpress-product .bpress-card-top-image {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 var(--space-sm) !important;
  border-radius: 0 !important;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.bpress-wrap .bpress-card.bpress-product .bpress-card-title {
  margin: 0 0 var(--space-2xs);
  padding-inline: var(--space-md);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
}

.bpress-wrap .bpress-card.bpress-product .bpress-card-footer {
  position: static;
  width: auto;
  margin: auto 0 0;
  padding: var(--space-sm) var(--space-md) 0;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent-text);
}
.bpress-wrap .bpress-card.bpress-product:hover .bpress-card-footer { color: var(--color-accent-hover); }

/* When BasePress renders inside a page (the /docs/ index), the theme section
   and container already supply width and padding - do not add a second set. */
.rt-container .bpress-wrap {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Knowledge base index -----------------------------------------------------
   The entry page renders through the standard page template, whose content
   column is a 760px reading measure. The knowledge base grid is a card layout,
   not prose, so it takes the full container width. */
.rt-kb-index .rt-entry__content { max-width: none; }

/* Knowledge base: single entry --------------------------------------------
   Three flat children in a two column grid wrap the footer under the image,
   so each one is placed explicitly: the image spans both rows on the left,
   and the title and link sit centred in the right column between two
   flexible spacer rows. The link has a fixed height so the image fills it
   rather than sizing the card from its own intrinsic height. */
.bpress-wrap .bpress-grid:has(> .bpress-col:only-child) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 780px;
}
.bpress-wrap .bpress-grid:has(> .bpress-col:only-child) .bpress-card.bpress-product {
  padding: 0;
  border-color: var(--color-border-strong);
}
.bpress-wrap .bpress-grid:has(> .bpress-col:only-child) .bpress-product-link {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto 1fr;
  height: clamp(220px, 19vw, 280px);
}
.bpress-wrap .bpress-grid:has(> .bpress-col:only-child) .bpress-card-top-image {
  grid-column: 1;
  grid-row: 1 / -1;
  width: 100% !important;
  height: 100%;
  min-height: 0;
  margin: 0 !important;
  aspect-ratio: auto;
  object-fit: cover;
  border-right: 1px solid var(--color-border-strong);
  transition: transform var(--duration-slow) var(--ease-out);
}
.bpress-wrap .bpress-grid:has(> .bpress-col:only-child) .bpress-card-title {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  padding: 0 var(--space-lg);
  font-size: var(--text-xl);
}
.bpress-wrap .bpress-grid:has(> .bpress-col:only-child) .bpress-card-footer {
  grid-column: 2;
  grid-row: 3;
  align-self: start;
  justify-self: start;
  width: auto;
  margin: var(--space-sm) 0 0;
  padding: 0 var(--space-lg);
  border-top: 0;
}

/* The "View" span is the only call to action, so give it the weight of one. */
.bpress-wrap .bpress-card.bpress-product .bpress-card-footer {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.bpress-wrap .bpress-card.bpress-product .bpress-card-footer::after {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--duration) var(--ease-out);
}

/* Hover: the whole card is the link, so it reacts as one object. */
.bpress-wrap .bpress-card.bpress-product:hover { border-color: var(--color-accent); }
.bpress-wrap .bpress-card.bpress-product:hover .bpress-card-top-image { transform: scale(1.03); }
.bpress-wrap .bpress-card.bpress-product:hover .bpress-card-footer::after { transform: translateX(3px); }
.bpress-wrap .bpress-product-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-lg);
}

@media (max-width: 720px) {
  .bpress-wrap .bpress-grid:has(> .bpress-col:only-child) .bpress-product-link {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    height: auto;
  }
  .bpress-wrap .bpress-grid:has(> .bpress-col:only-child) .bpress-card-top-image {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 16 / 10;
    border-right: 0;
    border-bottom: 1px solid var(--color-border-strong);
  }
  .bpress-wrap .bpress-grid:has(> .bpress-col:only-child) .bpress-card-title {
    grid-column: 1;
    grid-row: 2;
    padding: var(--space-md) var(--space-md) 0;
  }
  .bpress-wrap .bpress-grid:has(> .bpress-col:only-child) .bpress-card-footer {
    grid-column: 1;
    grid-row: 3;
    padding: 0 var(--space-md) var(--space-md);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bpress-wrap .bpress-card .bpress-card-top-image,
  .bpress-wrap .bpress-card.bpress-product .bpress-card-footer::after { transition: none; }
  .bpress-wrap .bpress-card.bpress-product:hover .bpress-card-top-image { transform: none; }
}

/* Knowledge base article layout --------------------------------------------
   BasePress gives the content area AND the sidebar the same float-right
   class, so the article and its navigation stack on the right with a quarter
   of the page left empty. Drop the floats and lay the page out as a grid with
   explicit placement, so the nav sits on the left whatever the source order. */
.bpress-wrap > .bpress-content-area,
.bpress-wrap > .bpress-sidebar {
  float: none !important;
  width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.rt-main > .bpress-wrap:has(> .bpress-sidebar) {
  display: grid;
  grid-template-columns: minmax(0, 270px) minmax(0, 1fr);
  column-gap: clamp(1.75rem, 1rem + 2.5vw, 3.25rem);
  row-gap: 0;
  align-items: start;
}

/* Every child gets an explicit cell. Auto placement only ever moves forward,
   so the sidebar - last in the source - was starting a fourth row underneath
   the article instead of sitting beside it, and the left column stayed empty
   for the whole page. */
.rt-main > .bpress-wrap:has(> .bpress-sidebar) > .bpress-main-header {
  grid-column: 1 / -1;
  grid-row: 1;
}
.rt-main > .bpress-wrap:has(> .bpress-sidebar) > .bpress-crumbs-wrap {
  grid-column: 1 / -1;
  grid-row: 2;
}
.rt-main > .bpress-wrap:has(> .bpress-sidebar) > .bpress-sidebar {
  grid-column: 1;
  grid-row: 3;
  align-self: stretch;
}
.rt-main > .bpress-wrap:has(> .bpress-sidebar) > .bpress-content-area {
  grid-column: 2;
  grid-row: 3;
  min-width: 0;
}

/* The plugin's sticky polyfill only engages when the aside itself computes to
   position: sticky, and it works by cloning a full-height .fixedsticky-dummy
   spacer next to it - which became a grid item of its own and added an empty
   row the height of the nav. Keep the aside static and let the inner wrapper
   do the sticking natively, so the clone is never created. */
.bpress-wrap .fixedsticky-dummy { display: none !important; }

/* Title and breadcrumbs line up with the container, not 15px inside it. */
.bpress-wrap > .bpress-main-header { margin: 0 0 var(--space-2xs); }
.bpress-wrap > .bpress-crumbs-wrap { margin: 0 0 var(--space-lg); }

/* Documentation nav: a quiet rail, not a stack of cards. */
.bpress-wrap > .bpress-sidebar {
  position: static;
  padding: 0 !important;
  border-right: 1px solid var(--color-border);
}
.bpress-wrap > .bpress-sidebar > .hide-scrollbars {
  position: sticky;
  top: calc(var(--header-height) + 1.25rem);
  max-height: calc(100vh - var(--header-height) - 3rem);
  padding: var(--space-3xs) var(--space-md) var(--space-md) 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* The nav widget is marked up as a card; in the rail it is only a list. */
.bpress-wrap .bpress-sidebar .bpress-widget.bpress-card,
.bpress-wrap .bpress-sidebar .bpress-widget.bpress-card:hover {
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.bpress-wrap .bpress-sidebar * { font-weight: inherit; color: inherit; }
.bpress-wrap .bpress-product-title {
  margin: 0 var(--space-md) var(--space-sm) 0;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Nav rows -----------------------------------------------------------------
   The plugin lays the icon and the label out as two table cells inside
   .bpress-nav-item. Styling the anchor as a block broke that pair onto two
   lines and left the row padding on the wrong element, so the hit area and
   the highlight no longer matched the row. The row itself is the flex line;
   the anchor just fills it. */
.bpress-wrap .bpress-nav-accordion,
.bpress-wrap .bpress-nav-accordion ul { list-style: none; margin: 0; padding: 0; }
/* The plugin hangs widget lists 25px outside the sidebar to bleed them to the
   edge of its card. There is no card here, and the rail scrolls, so the
   overhang was simply being clipped - taking the whole icon column with it. */
.bpress-wrap .bpress-sidebar .bpress-widget > ul,
.bpress-wrap .bpress-sidebar .bpress-widget > ol { margin: 0; padding: 0; }
.bpress-wrap .bpress-nav-accordion ul.children {
  margin: 2px 0 var(--space-2xs) 0.85rem;
  padding-left: 0.4rem;
  border-left: 1px solid var(--color-border);
}
.bpress-wrap .bpress-nav-accordion .bpress-nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 2px;
  padding: 0.34rem 0.75rem;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-muted);
}
.bpress-wrap .bpress-nav-accordion .bpress-nav-widget-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
  padding: 0;
  font-size: 0.9em;
  color: var(--color-muted-light);
}
.bpress-wrap .bpress-nav-accordion .bpress-nav-item-title {
  display: inline;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.bpress-wrap .bpress-nav-accordion a.bpress-nav-item-title { flex: 1 1 auto; }
.bpress-wrap .bpress-nav-accordion .bpress-nav-section > .bpress-nav-item {
  position: relative;
  padding-right: 1.9rem;
  font-weight: 600;
  color: var(--color-heading);
  cursor: pointer;
}
.bpress-wrap .bpress-nav-accordion .bpress-nav-section > .bpress-nav-item::after {
  right: 0.85rem;
  top: 50%;
  color: var(--color-muted-light);
}
/* The plugin marks the current row with a 5px left border, which squares off
   one side of the rounded highlight. The highlight is the marker here. */
.bpress-wrap .bpress-nav-accordion .bpress-nav-item:hover {
  border-left: 0;
  background: var(--color-surface-2);
  color: var(--color-heading);
}
.bpress-wrap .bpress-nav-accordion .active > .bpress-nav-item,
.bpress-wrap .bpress-nav-accordion li.current-menu-item > a {
  border-left: 0;
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-weight: 600;
}
.bpress-wrap .bpress-nav-accordion .active > .bpress-nav-item .bpress-nav-widget-icon { color: var(--color-accent-text); }

/* Article and result copy is authored with non-breaking spaces between whole
   sentences, which makes an unbreakable line that pushed the page sideways on
   narrow screens. Let those runs break when they have to. */
.bpress-wrap .bpress-article-content,
.bpress-wrap .bpress-search-excerpt,
.bpress-wrap .bpress-card-body { overflow-wrap: break-word; }

/* Article column */
.bpress-wrap .bpress-post-header { margin: 0 0 var(--space-md); }
.bpress-wrap .bpress-main > article > .bpress-card {
  margin: 0 !important;
  padding: var(--space-lg) !important;
}
.bpress-wrap .bpress-article-content { max-width: 74ch; }
.bpress-wrap .bpress-card-body > *:first-child { margin-top: 0; }
.bpress-wrap .bpress-card-body > *:last-child { margin-bottom: 0; }
.bpress-wrap .bpress-pagination {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}
/* The plugin prints the pagination wrapper even with nothing to page through,
   which left a rule and 3rem of dead space under every single-page article. */
.bpress-wrap .bpress-pagination:not(:has(a)) { display: none; }

@media (max-width: 900px) {
  .rt-main > .bpress-wrap:has(> .bpress-sidebar) { grid-template-columns: minmax(0, 1fr); }
  .rt-main > .bpress-wrap:has(> .bpress-sidebar) > .bpress-main-header,
  .rt-main > .bpress-wrap:has(> .bpress-sidebar) > .bpress-crumbs-wrap,
  .rt-main > .bpress-wrap:has(> .bpress-sidebar) > .bpress-content-area,
  .rt-main > .bpress-wrap:has(> .bpress-sidebar) > .bpress-sidebar {
    grid-column: 1;
    grid-row: auto;
  }
  .bpress-wrap > .bpress-sidebar {
    margin-top: var(--space-xl);
    border-right: 0;
    border-top: 1px solid var(--color-border);
  }
  .bpress-wrap > .bpress-sidebar > .hide-scrollbars {
    position: static;
    max-height: none;
    padding: var(--space-lg) 0 0;
    overflow: visible;
  }
}

/* Knowledge base sections --------------------------------------------------
   The content area wraps the search box and the section grid in a .bpress-card
   of its own. It is a layout wrapper, not a card, so it carries no chrome -
   otherwise every section card sits inside a second bordered box. The plugin
   sets its 25px padding with !important, which was also shifting the search
   bar 25px out of line with the grid below it. */
.bpress-wrap .bpress-content-area > .bpress-card {
  margin: 0 0 var(--space-lg) !important;
  padding: 0 !important;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* The plugin's grid is an inline-block layout with a float clearfix, so its
   ::before and ::after became grid items: the first pushed every card one
   cell along - leaving row one, column one empty - and the second added a
   trailing row. Its -10px side margins also hung the grid outside the
   content column. */
.bpress-wrap .bpress-grid {
  margin: 0;
  padding: 0;
}
.bpress-wrap .bpress-grid::before,
.bpress-wrap .bpress-grid::after {
  content: none;
  display: none;
}

.bpress-wrap .bpress-card:hover { box-shadow: none; }

.bpress-wrap .bpress-card.bpress-section {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--space-md) var(--space-md) var(--space-sm);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration) var(--ease-out);
}
.bpress-wrap .bpress-card.bpress-section:hover { border-color: var(--color-accent); }
.bpress-wrap .bpress-card.bpress-section .bpress-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--space-sm);
  padding: 0 0 var(--space-sm);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: none;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
.bpress-wrap .bpress-card.bpress-section .bpress-card-header a { color: var(--color-heading); text-decoration: none; }
.bpress-wrap .bpress-card.bpress-section .bpress-card-header a:hover { color: var(--color-accent-text); }
.bpress-wrap .bpress-card.bpress-section .bpress-post-count {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-muted);
}
.bpress-wrap .bpress-card.bpress-section .bp-icon { color: var(--color-accent-text); }

.bpress-wrap .bpress-section-list { list-style: none; margin: 0; padding: 0; }
.bpress-wrap .bpress-section-list .bpress-post-link {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  padding: 0.22rem 0;
}
.bpress-wrap .bpress-section-list .bpress-post-link a {
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 1.5;
  text-decoration: none;
}
.bpress-wrap .bpress-section-list .bpress-post-link a:hover { color: var(--color-accent-text); }
.bpress-wrap .bpress-section-list .bp-icon { color: var(--color-muted-light); font-size: 0.85em; }

/* "View all N articles" ----------------------------------------------------
   The plugin pins this footer to the bottom of the card with position:
   absolute, so on cards whose list ran to the bottom it printed on top of the
   last article title. The card is a column instead: the list takes the slack
   and the link is pushed down by it, so equal-height cards still align their
   footers without overlapping anything. */
.bpress-wrap .bpress-card.bpress-section .bpress-section-list { flex: 1 1 auto; }
.bpress-wrap .bpress-card.bpress-section > a {
  margin-top: auto;
  text-decoration: none;
}
.bpress-wrap .bpress-card.bpress-section .bpress-card-footer {
  position: static;
  display: block;
  width: auto;
  margin: var(--space-sm) 0 0;
  padding: var(--space-sm) 0 0;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  background: none;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent-text);
}
.bpress-wrap .bpress-card.bpress-section:hover .bpress-card-footer {
  background: none;
  color: var(--color-accent-hover);
}

/* Search bar ---------------------------------------------------------------
   The plugin sizes this as a 40px strip with a bottom rule and drops a 100px
   transparent submit button on top of the field's right-hand padding. Lay the
   field and the button out side by side on the theme's form styles instead. */
.bpress-wrap .bpress-search {
  height: auto;
  margin-bottom: 0;
  background: none;
}
.bpress-wrap .bpress-search-form {
  display: flex;
  gap: var(--space-2xs);
  height: auto;
}
.bpress-wrap input.bpress-search-field,
.bpress-wrap input.bpress-search-field.show-submit {
  flex: 1 1 auto;
  width: auto;
  height: 46px;
  padding: 0 var(--space-sm) !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-text);
  background-color: var(--color-background) !important;
}
.bpress-wrap input.bpress-search-field:focus {
  border-color: var(--color-accent) !important;
  box-shadow: var(--shadow-focus);
  outline: none;
}
.bpress-wrap .bpress-search-submit {
  position: static;
  flex: 0 0 auto;
  width: auto;
  height: 46px;
}
.bpress-wrap .bpress-search-submit input[type="submit"],
.bpress-wrap .bpress-search-submit input[type="submit"]:hover {
  width: auto;
  height: 100%;
  padding: 0 var(--space-md);
  border: 0;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent-contrast);
  background-color: var(--color-accent);
  cursor: pointer;
}
.bpress-wrap .bpress-search-submit input[type="submit"]:hover { background-color: var(--color-accent-hover); }
.bpress-wrap .bpress-search-suggest {
  left: 0;
  width: 100%;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
}

@media (max-width: 560px) {
  .bpress-wrap .bpress-search-submit input[type="submit"] { padding: 0 var(--space-sm); }
}

/* -------------------------------------------------------------------------
 * Services-only contact band
 *
 * Rendered by template-parts/sections/service-contact.php on Services pages.
 * Built on the existing --btn-* custom properties so it inherits every button
 * behaviour (focus ring, hover lift, 48px minimum tap target) for free.
 * ---------------------------------------------------------------------- */

.rt-btn--whatsapp {
  /* WhatsApp green, darkened from the #25D366 brand tone so white label text
     clears WCAG AA (5.2:1). The glyph carries the brand recognition. */
  --btn-bg: #0f7b69;
  --btn-fg: #fff;
  --btn-border: transparent;
}

.rt-btn--whatsapp:hover,
.rt-btn--whatsapp:focus-visible {
  --btn-bg: #0c6455;
  --btn-fg: #fff;
}

.rt-service-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.rt-service-contact__text {
  flex: 1 1 20rem;
  min-width: 0;
}

.rt-service-contact__title {
  margin: 0;
}

.rt-service-contact__lead {
  margin: 0.5rem 0 0;
  color: var(--color-muted);
  max-width: 46ch;
}

.rt-service-contact__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

/* The number is a phone number, so keep it on one line and stop it being
   re-flowed or hyphenated mid-digit-group. */
.rt-service-contact__number {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .rt-service-contact {
    flex-direction: column;
    align-items: stretch;
  }

  .rt-service-contact__actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* Full-width tap targets on small screens. */
  .rt-service-contact__actions .rt-btn {
    width: 100%;
  }
}

/* ---- accent on dark surfaces ---- */
/* --color-accent-text is darkened for words on white. Inside these dark
   scopes the full-strength accent is the readable one, so reset it. */
.rt-section--dark,
.rt-hero,
.rt-about-panel,
.rt-page-hero--dark,
.rt-cta,
.rt-footer,
.rt-badge--dark {
  --color-accent-text: var(--color-accent);
}

/* =========================================================================
 * Technology stack (home page) - replaces the old .rt-tech-grid card grid.
 * ========================================================================= */
/* --- Technology stack ---------------------------------------------------- */
/* One system drawn as tiers: the top line of the Customizer field is the
   surface users touch, the last line is the foundation everything runs on.
   --tier-depth (0 at the top, 1 at the base) drives weight, fill and accent,
   so the infrastructure end of the stack reads as the load-bearing one.
   The old .rt-tech-grid / .rt-tech-chip rules stay put: single-rt_service.php
   and page-services.php still use them. */
.rt-techstack {
  --tier-pad: clamp(1rem, 0.75rem + 1vw, 1.75rem);
  --tier-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* Vertical axis key - decorative, desktop only. */
.rt-techstack__axis { display: none; }

.rt-techstack__tiers {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rt-techstack__tier {
  --tier-depth: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 0.65rem;
  padding-block: calc(0.9rem + 0.6rem * var(--tier-depth));
  padding-inline: calc(var(--tier-pad) + 0.5rem) var(--tier-pad);
  border: 1px solid rgba(255, 255, 255, calc(0.07 + 0.11 * var(--tier-depth)));
  background-color: rgba(255, 255, 255, calc(0.022 + 0.05 * var(--tier-depth)));
}

/* Tiers sit flush on each other: the seams are shared hairlines, not gaps. */
.rt-techstack__tier + .rt-techstack__tier { margin-top: -1px; }
.rt-techstack__tier:first-child { border-radius: var(--tier-radius) var(--tier-radius) 0 0; }
.rt-techstack__tier:last-child { border-radius: 0 0 var(--tier-radius) var(--tier-radius); }
.rt-techstack__tier:only-child { border-radius: var(--tier-radius); }

/* Load-bearing edge: dim at the surface, full accent at the foundation. */
.rt-techstack__tier::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--color-accent);
  opacity: calc(0.2 + 0.8 * var(--tier-depth));
  transition: opacity var(--duration) var(--ease-out);
}

/* Hover wash lives on its own layer so it never fights the reveal transition. */
.rt-techstack__tier::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px var(--color-accent-ring);
  transition: opacity var(--duration) var(--ease-out);
}

.rt-techstack__rail {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
}

.rt-techstack__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(2.25rem + 0.5rem * var(--tier-depth));
  height: calc(2.25rem + 0.5rem * var(--tier-depth));
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, calc(0.04 + 0.05 * var(--tier-depth)));
  color: var(--color-accent);
  transition: border-color var(--duration) var(--ease-out),
    background-color var(--duration) var(--ease-out);
}
.rt-techstack__icon svg { width: 20px; height: 20px; }

/* The foundation is the anchor: solid accent plate, navy mark on it. */
.rt-techstack__tier:last-child .rt-techstack__icon {
  background: var(--color-accent);
  border-color: transparent;
  color: var(--color-accent-contrast);
}

.rt-techstack__naming { min-width: 0; }

.rt-techstack__title {
  margin: 0;
  font-size: calc(var(--text-base) + 0.11rem * var(--tier-depth));
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  overflow-wrap: break-word;
}

.rt-techstack__meta {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
}
.rt-techstack__tier:last-child .rt-techstack__meta { color: var(--color-accent); }

.rt-techstack__mods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rt-techstack__mod {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-on-dark);
  overflow-wrap: break-word;
}
.rt-techstack__mod::before {
  content: "";
  flex: none;
  width: 10px;
  height: 1px;
  margin-top: 0.68em;
  background: var(--color-accent);
  opacity: calc(0.4 + 0.6 * var(--tier-depth));
}

/* Ground plate the stack sits on. */
.rt-techstack__ground {
  position: relative;
  height: 0.9rem;
  border: 1px solid var(--color-border-dark);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
}
.rt-techstack__ground::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline: 14%;
  height: 2px;
  background: var(--color-accent);
  opacity: 0.5;
}
.rt-techstack__ground::after {
  content: "";
  position: absolute;
  top: 100%;
  inset-inline: 4%;
  height: 3.25rem;
  background: radial-gradient(58% 100% at 50% 0%, var(--color-accent-ring), transparent 72%);
  pointer-events: none;
}

/* --- 701px: the rail becomes a column and the items line up as modules ---- */
@media (min-width: 701px) {
  .rt-techstack__tier {
    grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-md);
    padding-block: calc(1rem + 0.7rem * var(--tier-depth));
  }
  .rt-techstack__mods {
    display: grid;
    /* auto-fill, not auto-fit: empty tracks stay, so the module columns line
       up down the whole stack like slots in a rack. */
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.4rem 1rem;
  }
  .rt-techstack__ground { margin-inline: -0.75rem; }
}

/* --- 1025px: axis key ----------------------------------------------------- */
@media (min-width: 1025px) {
  .rt-techstack {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    column-gap: var(--space-md);
  }
  .rt-techstack__axis {
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xs);
    margin: 0;
    padding-block: 0.4rem;
  }
  .rt-techstack__axis-cap {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-on-dark-muted);
  }
  .rt-techstack__axis-cap--base { color: var(--color-accent); }
  .rt-techstack__axis-rule {
    flex: 1;
    width: 1px;
    min-height: 2rem;
    background: linear-gradient(to bottom, var(--color-border-dark), var(--color-accent));
  }
  .rt-techstack__tier { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); }
}

/* --- Hover-capable pointers only ------------------------------------------ */
@media (hover: hover) {
  .rt-techstack__tier:hover { z-index: 1; }
  .rt-techstack__tier:hover::before { opacity: 1; }
  .rt-techstack__tier:hover::after { opacity: 1; }
  .rt-techstack__tier:hover .rt-techstack__icon { border-color: var(--color-accent-ring); }
  .rt-techstack__tier:last-child:hover .rt-techstack__icon { border-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .rt-techstack__tier::before,
  .rt-techstack__tier::after,
  .rt-techstack__icon { transition: none; }
}