/* ==========================================================================
   Centry Capital — Consolidated Design System
   ==========================================================================
   Single CSS file replacing the legacy 3-file stack:
     centry-export-base.css  →  structural grid/card definitions
     centry-site.css         →  typography, polish, component refinements
     centry-zcode.css        →  "Swiss clock" design tokens and overrides

   Generated by scripts/consolidate-css.mjs
   ========================================================================== */

/* === Layer 1: Structural foundations (from centry-export-base.css) === */
/* @import url("/assets/design-tokens.css"); — removed: tokens now in 03-tokens-type.css */
@font-face {
      font-family: "Archia Regular";
      src: url("/assets/fonts/archia-regular.woff2") format("woff2");
      font-display: swap;
      font-style: normal;
      font-weight: 400;
    }

    :root {
      --bg: oklch(98.4% 0.006 78);
      --paper: oklch(100% 0 0);
      --paper-warm: oklch(96.8% 0.009 78);
      --ink: oklch(15% 0.014 245);
      --muted: oklch(45% 0.017 245);
      --faint: oklch(70% 0.011 245);
      --line: oklch(88% 0.009 78);
      --blue: oklch(61% 0.145 225);
      --green: oklch(70% 0.145 155);
      --amber: oklch(75% 0.14 78);
      --coral: oklch(67% 0.16 35);
      --violet: oklch(62% 0.12 288);
      --radius: 24px;
      --max: 1180px;
      --font: "Archia Regular", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
      --mono: "SF Mono", "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
      --heading-gradient: linear-gradient(105deg, var(--coral), var(--amber) 30%, var(--green) 58%, var(--blue) 82%, var(--violet));
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; background: var(--bg); }
    body {
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at 92% 10%, color-mix(in oklch, var(--green) 8%, transparent), transparent 28rem),
        radial-gradient(circle at 5% 48%, color-mix(in oklch, var(--blue) 5%, transparent), transparent 28rem),
        linear-gradient(180deg, var(--bg), oklch(99% 0.003 78) 46%, var(--paper-warm));
      font-family: var(--font);
      font-size: 16px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    body.menu-open,
    body.modal-open { overflow: hidden; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; }
    p, h1, h2, h3, h4 { margin: 0; }
    .page { /* overflow moved to body to preserve position:sticky on .nav */ }

    .nav {
      position: sticky;
      top: 0;
      z-index: 30;
      border-bottom: 1px solid color-mix(in oklch, var(--line) 76%, transparent);
      background: color-mix(in oklch, var(--bg) 96%, white);
    }

    .nav-inner {
      max-width: calc(var(--max) + 64px);
      min-height: 72px;
      margin: 0 auto;
      padding: 0 32px;
      display: grid;
      grid-template-columns: auto 1fr auto auto auto;
      gap: 22px;
      align-items: center;
    }

    .brand, .brand svg, .brand img {
      display: block;
      width: 218px;
      height: 30px;
      color: var(--ink);
    }

    .brand img { object-fit: contain; }

    .links {
      display: flex;
      justify-content: center;
      gap: 24px;
      color: var(--muted);
      font-size: 14px;
    }

    .links a, .site-footer a { transition: color 160ms ease; }
    .links a:hover, .site-footer a:hover { color: var(--ink); }

    .cta,
    .secondary,
    .login {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 18px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 650;
      white-space: nowrap;
      transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
    }

    .cta {
      border: 1px solid var(--ink);
      background: var(--ink);
      color: white;
      box-shadow: 0 16px 34px color-mix(in oklch, var(--ink) 12%, transparent);
    }

    .secondary,
    .login {
      border: 1px solid var(--line);
      background: color-mix(in oklch, white 76%, transparent);
      color: var(--ink);
    }

    .cta:hover,
    .secondary:hover,
    .login:hover {
      transform: translateY(-1px);
      border-color: color-mix(in oklch, var(--ink) 35%, var(--line));
    }

    .menu-toggle {
      display: none;
      width: 44px;
      height: 44px;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: var(--paper);
      color: var(--ink);
      place-items: center;
      cursor: pointer;
    }

    .menu-toggle span,
    .menu-toggle span::before,
    .menu-toggle span::after {
      display: block;
      width: 16px;
      height: 1.5px;
      background: currentColor;
      border-radius: 1px;
      content: "";
    }

    .menu-toggle span::before { transform: translateY(-6px); }
    .menu-toggle span::after { transform: translateY(4.5px); }

    .section {
      max-width: calc(var(--max) + 64px);
      margin: 0 auto;
      padding: clamp(72px, 7vw, 92px) 32px;
    }

    .hero {
      min-height: min(820px, calc(88svh - 72px));
      padding-top: 50px;
      padding-bottom: 62px;
      display: grid;
      grid-template-columns: minmax(0, 1.28fr) minmax(390px, 0.72fr);
      gap: clamp(34px, 4vw, 48px);
      align-items: center;
    }

    .hero > * { min-width: 0; }

    h1 {
      max-width: 790px;
      font-size: clamp(50px, 5.05vw, 76px);
      line-height: 0.98;
      letter-spacing: -0.008em;
      text-wrap: balance;
      hyphens: none;
    }

    .hero-title-line { display: block; }

    h2 {
      max-width: 820px;
      font-size: clamp(36px, 3.9vw, 56px);
      line-height: 1.04;
      letter-spacing: -0.006em;
      text-wrap: balance;
      hyphens: none;
    }

    .hero-copy,
    .section-lede {
      color: var(--muted);
      font-size: 22px;
      line-height: 1.42;
      text-wrap: pretty;
    }

    .hero-copy {
      max-width: 650px;
      margin-top: 24px;
    }

    .actions {
      margin-top: 32px;
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
    }

    .hero .actions .cta,
    .hero .actions .secondary {
      min-height: 58px;
      padding: 0 28px;
      font-size: 16px;
    }

    .hero-proof {
      margin-top: 22px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      color: var(--ink);
      font-size: 13px;
    }

    .hero-proof span {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      padding: 0 14px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: color-mix(in oklch, white 74%, transparent);
      box-shadow: 0 10px 24px color-mix(in oklch, var(--ink) 4%, transparent);
    }

    .hero-proof span:nth-child(1) {
      border-color: color-mix(in oklch, var(--blue) 42%, var(--line));
      background: color-mix(in oklch, var(--blue) 13%, white);
    }

    .hero-proof span:nth-child(2) {
      border-color: color-mix(in oklch, var(--green) 46%, var(--line));
      background: color-mix(in oklch, var(--green) 15%, white);
    }

    .hero-proof span:nth-child(3) {
      border-color: color-mix(in oklch, var(--coral) 42%, var(--line));
      background: color-mix(in oklch, var(--coral) 12%, white);
    }

    .hero-visual {
      position: relative;
      min-height: clamp(570px, 40vw, 640px);
      padding: clamp(26px, 2.4vw, 34px);
      border: 1px solid var(--line);
      border-radius: 34px;
      background:
        radial-gradient(circle at 28% 20%, color-mix(in oklch, var(--amber) 14%, transparent), transparent 13rem),
        radial-gradient(circle at 78% 76%, color-mix(in oklch, var(--green) 12%, transparent), transparent 15rem),
        linear-gradient(145deg, color-mix(in oklch, white 90%, var(--paper-warm)), var(--paper));
      box-shadow: 0 30px 86px color-mix(in oklch, var(--ink) 9%, transparent);
      overflow: hidden;
      display: grid;
      grid-template-rows: auto auto 1fr auto;
      gap: clamp(16px, 1.5vw, 22px);
      align-content: stretch;
    }

    .hero-visual::before {
      position: absolute;
      inset: 22px;
      border-radius: 28px;
      background-image:
        linear-gradient(color-mix(in oklch, var(--line) 68%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in oklch, var(--line) 68%, transparent) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: radial-gradient(circle at center, black 0 44%, transparent 82%);
      opacity: 0.55;
      content: "";
    }

    .kicker,
    .panel-label {
      color: var(--blue);
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .visual-head,
    .layer-card,
    .outcome-strip {
      position: relative;
      z-index: 2;
    }

    .visual-head {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      align-items: flex-start;
    }

    .visual-head h3 {
      max-width: 360px;
      margin-top: 8px;
      font-size: clamp(30px, 2.3vw, 38px);
      line-height: 1.02;
      letter-spacing: -0.006em;
    }

    .status {
      min-height: 30px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0 11px;
      border-radius: 999px;
      background: color-mix(in oklch, var(--green) 14%, white);
      color: color-mix(in oklch, var(--green) 58%, var(--ink));
      font-size: 12px;
      font-weight: 650;
    }

    .status::before {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 0 4px color-mix(in oklch, currentColor 13%, transparent);
      content: "";
    }

    .component-matrix {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .component-chip {
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px 10px;
      border: 1px solid color-mix(in oklch, var(--chip) 26%, var(--line));
      border-radius: 14px;
      background: color-mix(in oklch, var(--chip) 8%, white);
      color: color-mix(in oklch, var(--chip) 44%, var(--ink));
      font-size: 12px;
      font-weight: 650;
      text-align: center;
      line-height: 1.15;
      box-shadow: 0 10px 24px color-mix(in oklch, var(--ink) 4%, transparent);
    }

    .component-chip:nth-child(1),
    .component-chip:nth-child(6),
    .component-chip:nth-child(11) { --chip: var(--amber); }
    .component-chip:nth-child(2),
    .component-chip:nth-child(7),
    .component-chip:nth-child(12) { --chip: var(--green); }
    .component-chip:nth-child(3),
    .component-chip:nth-child(8) { --chip: var(--blue); }
    .component-chip:nth-child(4),
    .component-chip:nth-child(9) { --chip: var(--coral); }
    .component-chip:nth-child(5),
    .component-chip:nth-child(10) { --chip: var(--violet); }

    .layer-card {
      align-self: center;
      min-height: 164px;
      padding: 22px 24px;
      border: 1px solid color-mix(in oklch, var(--ink) 13%, var(--line));
      border-radius: 24px;
      background: color-mix(in oklch, white 91%, var(--paper-warm));
      box-shadow: 0 20px 54px color-mix(in oklch, var(--ink) 9%, transparent);
      display: grid;
      align-content: center;
    }

    .layer-card::before {
      display: block;
      height: 1px;
      margin: 0 0 14px;
      background: linear-gradient(90deg, var(--amber), var(--green), var(--blue), var(--violet));
      content: "";
    }

    .layer-card h4 {
      max-width: 420px;
      font-size: clamp(30px, 2.4vw, 38px);
      line-height: 1.04;
      letter-spacing: -0.006em;
    }

    .layer-card p {
      max-width: 500px;
      margin-top: 10px;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.38;
    }

    .outcome-strip {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .outcome-strip span {
      min-height: 58px;
      display: grid;
      align-content: center;
      gap: 3px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: white;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.14;
    }

    .outcome-strip strong {
      color: var(--ink);
      font-size: 13px;
      font-weight: 650;
    }

    .section-head {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.55fr);
      gap: 36px;
      align-items: end;
      margin-bottom: 36px;
    }

    .kicker { margin-bottom: 15px; }
    .section-lede { max-width: 620px; }

    .torch-heading {
      --torch-x: 50%;
      --torch-y: 50%;
      position: relative;
      display: block;
      isolation: isolate;
    }

    .heading-base,
    .heading-torch::before {
      content: attr(data-torch-text);
    }

    .heading-torch {
      display: block;
      font: inherit;
      line-height: inherit;
      letter-spacing: inherit;
      text-wrap: inherit;
      hyphens: inherit;
    }

    .heading-torch {
      position: absolute;
      inset: 0;
      color: transparent;
      background: var(--heading-gradient);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-mask-image: radial-gradient(circle at var(--torch-x) var(--torch-y), black 0 24px, rgba(0, 0, 0, 0.58) 36px, transparent 58px);
      mask-image: radial-gradient(circle at var(--torch-x) var(--torch-y), black 0 24px, rgba(0, 0, 0, 0.58) 36px, transparent 58px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 70ms ease;
    }

    .torch-heading:hover .heading-torch { opacity: 1; }

    .problem {
      display: grid;
      grid-template-columns: 0.8fr 1.2fr;
      gap: 46px;
      align-items: start;
    }

    .problem-copy {
      display: grid;
      gap: 18px;
      color: var(--muted);
      font-size: 21px;
      line-height: 1.42;
    }

    .questions {
      display: grid;
      gap: 12px;
    }

    .question {
      min-height: 66px;
      display: flex;
      align-items: center;
      padding: 18px 20px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: color-mix(in oklch, white 70%, var(--paper-warm));
      box-shadow: 0 12px 32px color-mix(in oklch, var(--ink) 5%, transparent);
      font-size: 19px;
    }

    .question:nth-child(2n) { margin-left: 34px; }

    .service-cards {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .service-card {
      --service: var(--blue);
      position: relative;
      min-height: 580px;
      padding: 28px;
      border: 1px solid color-mix(in oklch, var(--service) 24%, var(--line));
      border-radius: 30px;
      background:
        radial-gradient(circle at 82% 12%, color-mix(in oklch, var(--service) 12%, transparent), transparent 15rem),
        linear-gradient(160deg, color-mix(in oklch, white 84%, var(--paper-warm)), var(--paper));
      overflow: hidden;
      box-shadow: 0 18px 58px color-mix(in oklch, var(--ink) 6%, transparent);
    }

    .service-card.wealth { --service: var(--green); }

    .service-card::before {
      position: absolute;
      inset: 22px;
      border: 1px solid color-mix(in oklch, var(--service) 18%, transparent);
      border-radius: 26px;
      pointer-events: none;
      content: "";
    }

    .service-inner {
      position: relative;
      z-index: 2;
      height: 100%;
      min-height: 100%;
      display: flex;
      flex-direction: column;
    }

    .service-label {
      width: fit-content;
      padding: 7px 10px;
      border: 1px solid color-mix(in oklch, var(--service) 32%, var(--line));
      border-radius: 999px;
      background: color-mix(in oklch, var(--service) 9%, white);
      color: color-mix(in oklch, var(--service) 62%, var(--ink));
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .service-card h3 {
      max-width: 520px;
      margin-top: 18px;
      font-size: clamp(30px, 2.7vw, 40px);
      line-height: 1.06;
      letter-spacing: -0.006em;
    }

    .service-copy {
      max-width: 520px;
      margin-top: 12px;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.43;
    }

    .service-visual {
      margin-top: 20px;
      min-height: 176px;
      padding: 16px;
      border: 1px solid color-mix(in oklch, var(--service) 20%, var(--line));
      border-radius: 22px;
      background:
        linear-gradient(135deg, color-mix(in oklch, var(--service) 9%, white), white 70%);
      position: relative;
      overflow: hidden;
    }

    .service-visual::before {
      position: absolute;
      inset: 12px;
      border-radius: 18px;
      background-image:
        linear-gradient(color-mix(in oklch, var(--service) 10%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in oklch, var(--service) 10%, transparent) 1px, transparent 1px);
      background-size: 34px 34px;
      mask-image: radial-gradient(circle at 55% 45%, black, transparent 78%);
      opacity: 0.65;
      content: "";
    }

    .snapshot-top {
      position: relative;
      z-index: 2;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: center;
      margin-bottom: 12px;
      color: var(--muted);
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .snapshot-top strong {
      color: color-mix(in oklch, var(--service) 62%, var(--ink));
      font-family: var(--font);
      font-size: 12px;
      letter-spacing: 0;
      text-transform: none;
    }

    .service-diagram {
      position: relative;
      z-index: 2;
      min-height: 130px;
    }

    .tax-diagram {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      align-items: stretch;
    }

    .tax-node {
      min-height: 76px;
      display: grid;
      align-content: space-between;
      padding: 12px;
      border: 1px solid color-mix(in oklch, var(--service) 18%, var(--line));
      border-radius: 16px;
      background: color-mix(in oklch, white 86%, var(--paper-warm));
      box-shadow: 0 12px 30px color-mix(in oklch, var(--ink) 5%, transparent);
      transition: transform 180ms ease, border-color 180ms ease;
    }

    .service-card:hover .tax-node:nth-child(1) { transform: translateY(-2px); }
    .service-card:hover .tax-node:nth-child(2) { transform: translateY(-5px); }
    .service-card:hover .tax-node:nth-child(3) { transform: translateY(-2px); }

    .tax-node span,
    .wealth-axis span,
    .wealth-note span {
      color: var(--ink);
      font-size: 13px;
      font-weight: 650;
      line-height: 1.18;
    }

    .tax-node em,
    .wealth-axis em,
    .wealth-note em {
      color: var(--muted);
      font-style: normal;
      font-size: 11px;
      line-height: 1.25;
    }

    .tax-node strong {
      width: fit-content;
      min-height: 24px;
      display: inline-flex;
      align-items: center;
      padding: 0 8px;
      border-radius: 999px;
      background: color-mix(in oklch, var(--service) 12%, white);
      color: color-mix(in oklch, var(--service) 58%, var(--ink));
      font-size: 10px;
      font-weight: 650;
    }

    .tax-review-line {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 10px;
      align-items: center;
      color: color-mix(in oklch, var(--service) 52%, var(--ink));
      font-size: 11px;
      font-weight: 650;
      text-transform: uppercase;
      letter-spacing: 0.07em;
    }

    .tax-review-line::before,
    .tax-review-line::after {
      height: 1px;
      background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--service) 42%, var(--line)), transparent);
      content: "";
    }

    .wealth-diagram {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 14px;
      align-items: stretch;
    }

    .wealth-stack,
    .wealth-note {
      padding: 12px;
      border: 1px solid color-mix(in oklch, var(--service) 18%, var(--line));
      border-radius: 16px;
      background: color-mix(in oklch, white 86%, var(--paper-warm));
      box-shadow: 0 12px 30px color-mix(in oklch, var(--ink) 5%, transparent);
    }

    .wealth-stack {
      display: grid;
      gap: 8px;
    }

    .wealth-axis {
      display: grid;
      grid-template-columns: 76px 1fr;
      gap: 10px;
      align-items: center;
    }

    .wealth-axis em {
      grid-column: 1 / -1;
    }

    .wealth-bar {
      height: 8px;
      border-radius: 999px;
      background: color-mix(in oklch, var(--service) 12%, var(--paper-warm));
      overflow: hidden;
    }

    .wealth-bar::before {
      display: block;
      width: var(--bar-width);
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--service), color-mix(in oklch, var(--service) 46%, var(--blue)));
      content: "";
      transform-origin: left;
      transition: transform 180ms ease;
    }

    .service-card:hover .wealth-bar::before {
      transform: scaleX(1.04);
    }

    .wealth-note {
      display: grid;
      align-content: space-between;
      gap: 10px;
      position: relative;
      overflow: hidden;
    }

    .wealth-note::after {
      position: absolute;
      right: 14px;
      bottom: 12px;
      width: 48px;
      height: 48px;
      border: 1px solid color-mix(in oklch, var(--service) 34%, transparent);
      border-radius: 50%;
      box-shadow:
        inset 0 0 0 12px color-mix(in oklch, var(--service) 9%, transparent),
        0 0 0 12px color-mix(in oklch, var(--service) 6%, transparent);
      content: "";
    }

    .wealth-note span,
    .wealth-note em {
      position: relative;
      z-index: 2;
    }

    .service-list {
      margin: auto 0 0;
      padding: 22px 0 0;
      list-style: none;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .service-list li {
      min-height: 38px;
      display: flex;
      align-items: center;
      padding: 9px 11px;
      border: 1px solid color-mix(in oklch, var(--service) 14%, var(--line));
      border-radius: 13px;
      background: color-mix(in oklch, white 72%, var(--paper-warm));
      color: var(--ink);
      font-size: 13px;
      line-height: 1.25;
    }

    .service-cta {
      width: fit-content;
      min-height: 44px;
      margin-top: 24px;
      display: inline-flex;
      align-items: center;
      padding: 0 17px;
      border: 1px solid color-mix(in oklch, var(--service) 36%, var(--ink));
      border-radius: 999px;
      background: color-mix(in oklch, var(--service) 12%, white);
      color: var(--ink);
      font-size: 14px;
      font-weight: 650;
      transition: transform 160ms ease, background 160ms ease;
    }

    .service-cta:hover {
      transform: translateY(-1px);
      background: color-mix(in oklch, var(--service) 18%, white);
    }

    .service-bridge {
      margin-top: 18px;
      padding: 24px;
      border: 1px solid color-mix(in oklch, var(--blue) 18%, var(--line));
      border-radius: 28px;
      background:
        radial-gradient(circle at 20% 10%, color-mix(in oklch, var(--blue) 10%, transparent), transparent 20rem),
        radial-gradient(circle at 84% 18%, color-mix(in oklch, var(--green) 10%, transparent), transparent 18rem),
        color-mix(in oklch, white 78%, var(--paper-warm));
      color: var(--ink);
      text-align: center;
      box-shadow: 0 18px 58px color-mix(in oklch, var(--ink) 5%, transparent);
    }

    .service-bridge span {
      display: block;
      margin-bottom: 10px;
      color: var(--blue);
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .service-bridge strong {
      display: block;
      max-width: 820px;
      margin: 0 auto;
      font-size: clamp(24px, 2.1vw, 34px);
      line-height: 1.1;
      letter-spacing: -0.004em;
    }

    .service-bridge em {
      display: block;
      max-width: 760px;
      margin: 12px auto 0;
      color: var(--muted);
      font-style: normal;
      font-size: 16px;
      line-height: 1.42;
    }

    .calculator-cta {
      padding-top: 0;
    }

    .calculator-panel {
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.72fr);
      gap: 34px;
      align-items: center;
      padding: clamp(28px, 4vw, 46px);
      border: 1px solid color-mix(in oklch, var(--green) 20%, var(--line));
      border-radius: 34px;
      background:
        radial-gradient(circle at 18% 16%, color-mix(in oklch, var(--green) 14%, transparent), transparent 18rem),
        radial-gradient(circle at 92% 72%, color-mix(in oklch, var(--amber) 14%, transparent), transparent 15rem),
        color-mix(in oklch, white 80%, var(--paper-warm));
      box-shadow: 0 24px 72px color-mix(in oklch, var(--ink) 7%, transparent);
    }

    .calculator-panel h2 {
      max-width: 760px;
      font-size: clamp(36px, 4vw, 58px);
    }

    .calculator-panel p {
      max-width: 660px;
      margin-top: 18px;
      color: var(--muted);
      font-size: 19px;
      line-height: 1.42;
    }

    .calculator-note {
      display: block;
      margin-top: 16px;
      color: var(--muted);
      font-size: 13px;
    }

    .calculator-preview {
      padding: 18px;
      border: 1px solid color-mix(in oklch, var(--ink) 10%, var(--line));
      border-radius: 26px;
      background: white;
      box-shadow: 0 20px 60px color-mix(in oklch, var(--ink) 7%, transparent);
    }

    .calculator-preview-top {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: center;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--line);
      color: var(--muted);
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .calculator-preview-top strong {
      color: color-mix(in oklch, var(--green) 62%, var(--ink));
      font-family: var(--font);
      font-size: 12px;
      letter-spacing: 0;
      text-transform: none;
    }

    .calculator-preview-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 14px;
    }

    .calculator-preview-field {
      min-height: 66px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: color-mix(in oklch, white 76%, var(--paper-warm));
      display: grid;
      align-content: center;
      gap: 5px;
    }

    .calculator-preview-field span {
      color: var(--muted);
      font-size: 11px;
    }

    .calculator-preview-field strong {
      font-size: 14px;
      line-height: 1.15;
    }

    .calculator-preview-result {
      margin-top: 12px;
      padding: 14px;
      border-radius: 18px;
      background:
        radial-gradient(circle at 18% 20%, color-mix(in oklch, var(--green) 18%, transparent), transparent 7rem),
        color-mix(in oklch, var(--green) 8%, white);
      display: grid;
      gap: 6px;
    }

    .calculator-preview-result span {
      color: color-mix(in oklch, var(--green) 58%, var(--ink));
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .calculator-preview-result strong {
      font-size: 23px;
      line-height: 1.08;
    }

    .calculator-preview-result em {
      color: var(--muted);
      font-style: normal;
      font-size: 13px;
      line-height: 1.35;
    }

    .compare {
      border: 1px solid var(--line);
      border-radius: 32px;
      overflow: hidden;
      background: var(--paper);
      box-shadow: 0 24px 72px color-mix(in oklch, var(--ink) 8%, transparent);
    }

    .compare-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding: 20px;
      border-bottom: 1px solid var(--line);
    }

    .toggle {
      display: inline-grid;
      grid-template-columns: 1fr 1fr;
      padding: 4px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--paper-warm);
    }

    .toggle button {
      min-height: 38px;
      border: 0;
      border-radius: 999px;
      padding: 0 16px;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-size: 13px;
      font-weight: 650;
    }

    .toggle button.active { background: var(--ink); color: white; }

    .compare-stage {
      position: relative;
      min-height: 590px;
      padding: 28px;
      background:
        radial-gradient(circle at 82% 20%, color-mix(in oklch, var(--green) 8%, transparent), transparent 16rem),
        linear-gradient(180deg, color-mix(in oklch, white 78%, var(--paper-warm)), var(--paper));
      overflow: hidden;
    }

    .compare-copy {
      position: relative;
      z-index: 5;
      max-width: 360px;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: color-mix(in oklch, white 90%, transparent);
    }

    .compare-copy h3 {
      margin-top: 10px;
      font-size: 34px;
      line-height: 1.02;
    }

    .compare-copy p {
      margin-top: 11px;
      color: var(--muted);
      font-size: 16px;
    }

    .compare-copy [data-after] { display: none; }
    .compare.is-after .compare-copy [data-before] { display: none; }
    .compare.is-after .compare-copy [data-after] { display: block; }

    .before-list,
    .after-plan {
      position: absolute;
      right: 34px;
      top: 70px;
      bottom: 34px;
      width: min(650px, 58%);
      transition: opacity 420ms ease, transform 520ms ease;
    }

    .before-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      align-content: center;
    }

    .mess-card {
      min-height: 118px;
      padding: 18px;
      border: 1px solid color-mix(in oklch, var(--ink) 13%, var(--line));
      border-radius: 20px;
      background: white;
      box-shadow: 0 18px 44px color-mix(in oklch, var(--ink) 8%, transparent);
      transform: rotate(var(--r));
    }

    .mess-card strong { display: block; font-size: 18px; line-height: 1.12; }
    .mess-card span { display: block; margin-top: 9px; color: var(--muted); font-size: 13px; }
    .mess-card:nth-child(1) { --r: -3deg; }
    .mess-card:nth-child(2) { --r: 2deg; }
    .mess-card:nth-child(3) { --r: 2.6deg; }
    .mess-card:nth-child(4) { --r: -2deg; }
    .mess-card:nth-child(5) { --r: 1.6deg; }

    .after-plan {
      opacity: 0;
      pointer-events: none;
      transform: translateY(20px) scale(0.96);
      display: grid;
      align-content: center;
    }

    .plan-report {
      border: 1px solid color-mix(in oklch, var(--ink) 14%, var(--line));
      border-radius: 28px;
      background: white;
      box-shadow: 0 28px 88px color-mix(in oklch, var(--ink) 13%, transparent);
      overflow: hidden;
    }

    .plan-top {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      padding: 24px;
      border-bottom: 1px solid var(--line);
      background: color-mix(in oklch, white 82%, var(--paper-warm));
    }

    .plan-top h4 { margin-top: 7px; font-size: 30px; line-height: 1.02; }
    .plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
    .plan-metric { min-height: 106px; padding: 18px; border-right: 1px solid var(--line); }
    .plan-metric:last-child { border-right: 0; }
    .plan-metric strong { display: block; margin-top: 10px; font-size: 21px; line-height: 1; }
    .plan-actions { display: grid; gap: 0; padding: 14px 24px 24px; }
    .plan-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 16px;
      padding: 14px 0;
      border-bottom: 1px solid var(--line);
    }
    .plan-row:last-child { border-bottom: 0; }
    .plan-row strong { display: block; font-size: 15px; }
    .plan-row span { color: var(--muted); font-size: 13px; }

    .compare.is-after .before-list {
      opacity: 0;
      pointer-events: none;
      transform: translateY(18px) scale(0.98);
    }

    .compare.is-after .after-plan {
      opacity: 1;
      pointer-events: auto;
      transform: none;
    }

    .card-grid,
    .steps,
    .profiles,
    .trust-grid {
      display: grid;
      gap: 16px;
    }

    .card-grid { grid-template-columns: repeat(4, 1fr); }
    .steps { grid-template-columns: repeat(4, 1fr); }
    .profiles { grid-template-columns: repeat(4, 1fr); }
    .trust-grid { grid-template-columns: repeat(5, 1fr); }

    .card,
    .step,
    .profile,
    .trust-card {
      min-height: 214px;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: color-mix(in oklch, white 76%, var(--paper-warm));
      display: grid;
      grid-template-rows: auto auto 1fr;
      gap: 18px;
      align-content: start;
    }

    .card span,
    .step span,
    .profile span,
    .trust-card span {
      color: var(--faint);
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .card h3,
    .step h3,
    .profile h3,
    .trust-card h3 {
      min-height: 48px;
      font-size: 23px;
      line-height: 1.08;
    }

    .card p,
    .step p,
    .profile p,
    .trust-card p {
      color: var(--muted);
      font-size: 15px;
      line-height: 1.43;
      align-self: start;
    }

    .step {
      position: relative;
      min-height: 270px;
      overflow: hidden;
      --step-color: var(--blue);
    }

    .step:nth-child(2) { --step-color: var(--green); }
    .step:nth-child(3) { --step-color: var(--amber); }
    .step:nth-child(4) { --step-color: var(--coral); }
    .step::before {
      position: absolute;
      inset: 0 0 auto;
      height: 4px;
      background: linear-gradient(90deg, var(--step-color), transparent 76%);
      content: "";
    }

    .tech {
      border-radius: 38px;
      background: var(--ink);
      color: white;
      overflow: hidden;
      position: relative;
    }

    .tech::before {
      position: absolute;
      inset: -22% -14% auto auto;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      background: radial-gradient(circle, color-mix(in oklch, var(--green) 30%, transparent), transparent 66%);
      opacity: 0.45;
      content: "";
    }

    .tech .kicker { color: color-mix(in oklch, var(--green) 78%, white); }
    .tech .section-lede { color: color-mix(in oklch, white 72%, transparent); }
    .tech-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .tech-card {
      position: relative;
      min-height: 260px;
      padding: 24px;
      border: 1px solid color-mix(in oklch, white 16%, transparent);
      border-radius: 26px;
      background: color-mix(in oklch, white 8%, transparent);
      overflow: hidden;
    }

    .tech-shape {
      height: 80px;
      margin-bottom: 22px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
      align-items: end;
    }

    .tech-shape span {
      border-radius: 999px;
      background: color-mix(in oklch, var(--shape) 62%, white);
      opacity: 0.72;
      will-change: transform, opacity;
    }

    .tech-card:nth-child(1) { --shape: var(--blue); }
    .tech-card:nth-child(2) { --shape: var(--green); }
    .tech-card:nth-child(3) { --shape: var(--amber); }
    .tech-card:nth-child(1) .tech-shape span:nth-child(1) { height: 34%; }
    .tech-card:nth-child(1) .tech-shape span:nth-child(2) { height: 74%; }
    .tech-card:nth-child(1) .tech-shape span:nth-child(3) { height: 48%; }
    .tech-card:nth-child(1) .tech-shape span:nth-child(4) { height: 100%; }
    .tech-card:nth-child(1) .tech-shape span:nth-child(5) { height: 62%; }
    .tech-card:nth-child(1) .tech-shape span {
      transform-origin: center bottom;
      animation: organiseBars 7.2s ease-in-out infinite;
    }
    .tech-card:nth-child(1) .tech-shape span:nth-child(2) { animation-delay: -4.8s; }
    .tech-card:nth-child(1) .tech-shape span:nth-child(3) { animation-delay: -2.3s; }
    .tech-card:nth-child(1) .tech-shape span:nth-child(4) { animation-delay: -6.1s; }
    .tech-card:nth-child(1) .tech-shape span:nth-child(5) { animation-delay: -3.4s; }
    .tech-card:nth-child(2) .tech-shape {
      display: block;
      position: relative;
    }
    .tech-card:nth-child(2) .tech-shape::before {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: color-mix(in oklch, var(--shape) 74%, white);
      box-shadow: 0 0 26px color-mix(in oklch, var(--shape) 52%, transparent);
      content: "";
      transform: translate(-50%, -50%);
      animation: monitorCore 4.8s ease-in-out infinite;
    }
    .tech-card:nth-child(2) .tech-shape span {
      position: absolute;
      left: 50%;
      top: 50%;
      width: var(--s);
      height: var(--s);
      border: 1px solid color-mix(in oklch, var(--shape) 70%, white);
      border-radius: 50%;
      background: transparent;
      transform: translate(-50%, -50%);
    }
    .tech-card:nth-child(2) .tech-shape span {
      animation: monitorRing 5.6s ease-in-out infinite;
      opacity: var(--ring-opacity);
    }
    .tech-card:nth-child(2) .tech-shape span:nth-child(1) { --s: 26px; --ring-opacity: 0.7; --ring-dim: 0.48; animation-delay: -0.2s; }
    .tech-card:nth-child(2) .tech-shape span:nth-child(2) { --s: 42px; --ring-opacity: 0.55; --ring-dim: 0.37; animation-delay: -1.1s; }
    .tech-card:nth-child(2) .tech-shape span:nth-child(3) { --s: 58px; --ring-opacity: 0.4; --ring-dim: 0.27; animation-delay: -2s; }
    .tech-card:nth-child(2) .tech-shape span:nth-child(4) { --s: 74px; --ring-opacity: 0.28; --ring-dim: 0.19; animation-delay: -2.9s; }
    .tech-card:nth-child(2) .tech-shape span:nth-child(5) { --s: 90px; --ring-opacity: 0.18; --ring-dim: 0.12; animation-delay: -3.8s; }
    .tech-card:nth-child(3) .tech-shape { align-items: center; }
    .tech-card:nth-child(3) .tech-shape span {
      height: 9px;
      border-radius: 4px;
      transform: rotate(var(--rot));
      animation: actBars 6.4s ease-in-out infinite;
    }
    .tech-card:nth-child(3) .tech-shape span:nth-child(1) { --rot: -3deg; animation-delay: -0.2s; }
    .tech-card:nth-child(3) .tech-shape span:nth-child(2) { --rot: 3deg; animation-delay: -1.1s; }
    .tech-card:nth-child(3) .tech-shape span:nth-child(3) { --rot: -2deg; animation-delay: -2s; }
    .tech-card:nth-child(3) .tech-shape span:nth-child(4) { --rot: 4deg; animation-delay: -2.9s; }
    .tech-card:nth-child(3) .tech-shape span:nth-child(5) { --rot: -2deg; animation-delay: -3.8s; }
    .tech-card h3 { font-size: 25px; line-height: 1.08; }
    .tech-card p { margin-top: 12px; color: color-mix(in oklch, white 68%, transparent); font-size: 15px; }

    @keyframes organiseBars {
      0%, 100% { transform: scaleY(0.82); opacity: 0.56; }
      42% { transform: scaleY(1); opacity: 0.88; }
      70% { transform: scaleY(0.92); opacity: 0.7; }
    }

    @keyframes monitorCore {
      0%, 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.62; }
      44% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    }

    @keyframes monitorRing {
      0%, 100% { transform: translate(-50%, -50%) scale(0.96); opacity: var(--ring-dim); }
      48% { transform: translate(-50%, -50%) scale(1.06); opacity: var(--ring-opacity); }
    }

    @keyframes actBars {
      0%, 100% { transform: translateX(-2px) rotate(var(--rot)); opacity: 0.5; }
      48% { transform: translateX(5px) rotate(var(--rot)); opacity: 0.9; }
      72% { transform: translateX(1px) rotate(var(--rot)); opacity: 0.68; }
    }

    .security {
      border: 1px solid color-mix(in oklch, var(--blue) 16%, var(--line));
      border-radius: 38px;
      background:
        radial-gradient(circle at 18% 20%, color-mix(in oklch, var(--green) 18%, transparent), transparent 17rem),
        radial-gradient(circle at 86% 18%, color-mix(in oklch, var(--blue) 16%, transparent), transparent 18rem),
        linear-gradient(145deg, color-mix(in oklch, white 88%, var(--paper-warm)), var(--paper));
      overflow: hidden;
      position: relative;
    }

    .security::before {
      position: absolute;
      inset: 22px;
      border-radius: 30px;
      background-image:
        linear-gradient(color-mix(in oklch, var(--line) 58%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in oklch, var(--line) 58%, transparent) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: radial-gradient(circle at 50% 35%, black, transparent 78%);
      opacity: 0.5;
      content: "";
    }

    .security .section-head,
    .security-grid,
    .security-actions {
      position: relative;
      z-index: 2;
    }

    .security-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .security-card {
      min-height: 232px;
      padding: 22px;
      border: 1px solid color-mix(in oklch, var(--ink) 10%, var(--line));
      border-radius: 26px;
      background: color-mix(in oklch, white 82%, var(--paper-warm));
      box-shadow: 0 18px 52px color-mix(in oklch, var(--ink) 6%, transparent);
      display: grid;
      grid-template-rows: 76px auto 1fr;
      gap: 18px;
    }

    .security-visual {
      position: relative;
      border: 1px solid color-mix(in oklch, var(--accent) 22%, var(--line));
      border-radius: 20px;
      background:
        radial-gradient(circle at 35% 35%, color-mix(in oklch, var(--accent) 18%, transparent), transparent 4rem),
        white;
      overflow: hidden;
    }

    .security-visual::before,
    .security-visual::after {
      position: absolute;
      content: "";
    }

    .security-visual::before {
      left: 18px;
      right: 18px;
      top: 20px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--accent), transparent);
    }

    .security-visual::after {
      width: 34px;
      height: 34px;
      left: calc(50% - 17px);
      top: 26px;
      border: 1px solid color-mix(in oklch, var(--accent) 54%, var(--ink));
      border-radius: 50%;
      box-shadow:
        0 0 0 10px color-mix(in oklch, var(--accent) 8%, transparent),
        0 0 0 20px color-mix(in oklch, var(--accent) 5%, transparent);
    }

    .security-card:nth-child(1) { --accent: var(--blue); }
    .security-card:nth-child(2) { --accent: var(--green); }
    .security-card:nth-child(3) { --accent: var(--amber); }
    .security-card h3 {
      min-height: 48px;
      font-size: 23px;
      line-height: 1.08;
    }

    .security-card p {
      color: var(--muted);
      font-size: 15px;
      line-height: 1.43;
    }

    .security-actions {
      margin-top: 22px;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .faq-wrap {
      display: grid;
      grid-template-columns: 0.75fr 1.25fr;
      gap: 44px;
      align-items: start;
    }

    .faqs { display: grid; gap: 10px; }
    details {
      border: 1px solid var(--line);
      border-radius: 20px;
      background: var(--paper);
      overflow: hidden;
      transition: border-color 180ms ease, background 180ms ease;
    }

    summary {
      min-height: 64px;
      padding: 20px 52px 20px 22px;
      cursor: pointer;
      list-style: none;
      position: relative;
      font-weight: 650;
    }

    summary::-webkit-details-marker { display: none; }
    summary::after {
      position: absolute;
      right: 22px;
      top: 22px;
      width: 20px;
      height: 20px;
      border: 1px solid var(--line);
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: var(--muted);
      content: "+";
      font-size: 14px;
      line-height: 18px;
    }
    details[open] summary::after { content: "-"; }
    details.is-closing summary::after { content: "+"; }
    .faq-content {
      overflow: hidden;
      transition: height 280ms cubic-bezier(.2, .8, .2, 1);
    }
    details p { padding: 0 22px 22px; color: var(--muted); font-size: 15px; }

    .testimonials {
      display: grid;
      grid-template-columns: minmax(260px, 0.62fr) minmax(0, 1.38fr);
      gap: 42px;
      align-items: start;
    }

    .testimonial-intro {
      position: sticky;
      top: 104px;
    }

    .testimonial-note {
      max-width: 410px;
      margin-top: 18px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.45;
    }

    .testimonial-shell {
      position: relative;
      min-height: 404px;
      display: grid;
      border: 1px solid var(--line);
      border-radius: 30px;
      background:
        radial-gradient(circle at 18% 20%, color-mix(in oklch, var(--green) 15%, transparent), transparent 15rem),
        radial-gradient(circle at 86% 26%, color-mix(in oklch, var(--blue) 12%, transparent), transparent 16rem),
        var(--paper);
      box-shadow: 0 24px 72px color-mix(in oklch, var(--ink) 7%, transparent);
      overflow: hidden;
    }

    .testimonial-track {
      position: relative;
      min-height: inherit;
      width: 100%;
    }

    .testimonial {
      position: absolute;
      inset: 0;
      min-height: 100%;
      padding: clamp(30px, 4vw, 52px);
      display: grid;
      grid-template-rows: auto auto;
      align-content: center;
      justify-items: center;
      gap: 30px;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateX(18px);
      transition: opacity 260ms ease, transform 320ms ease, visibility 0s linear 320ms;
    }

    .testimonial.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: none;
      transition: opacity 260ms ease, transform 320ms ease;
    }

    .testimonial blockquote {
      margin: 0;
      width: 100%;
      max-width: 790px;
      font-size: clamp(22px, 2.2vw, 31px);
      line-height: 1.2;
      letter-spacing: -0.006em;
      text-wrap: pretty;
    }

    .testimonial figcaption {
      width: 100%;
      max-width: 790px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding-top: 18px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 15px;
    }

    .testimonial figcaption span {
      color: var(--ink);
      font-weight: 650;
    }

    .testimonial-controls {
      margin-top: 24px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 14px;
    }

    .testimonial-buttons {
      display: flex;
      gap: 8px;
    }

    .testimonial-buttons button {
      width: 44px;
      height: 44px;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: white;
      color: var(--ink);
      cursor: pointer;
      font-size: 18px;
    }

    .testimonial-dots {
      display: flex;
      gap: 7px;
    }

    .testimonial-dots button {
      width: 8px;
      height: 8px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: color-mix(in oklch, var(--ink) 18%, transparent);
      cursor: pointer;
    }

    .testimonial-dots button.active {
      width: 24px;
      border-radius: 999px;
      background: var(--ink);
    }

    .final-cta { padding-bottom: 96px; }
    .cta-panel {
      min-height: 390px;
      display: grid;
      grid-template-columns: minmax(0, 760px);
      gap: 44px;
      align-items: end;
      padding: 54px;
      border-radius: 38px;
      background:
        radial-gradient(circle at 80% 24%, color-mix(in oklch, var(--green) 34%, transparent), transparent 18rem),
        radial-gradient(circle at 24% 76%, color-mix(in oklch, var(--blue) 22%, transparent), transparent 18rem),
        radial-gradient(circle at 92% 88%, color-mix(in oklch, var(--amber) 24%, transparent), transparent 14rem),
        radial-gradient(circle at 52% 16%, color-mix(in oklch, var(--coral) 18%, transparent), transparent 16rem),
        var(--ink);
      color: white;
      overflow: hidden;
      position: relative;
    }

    .cta-panel p {
      max-width: 620px;
      margin-top: 22px;
      color: color-mix(in oklch, white 73%, transparent);
      font-size: 21px;
      line-height: 1.43;
    }

    .cta-panel .cta {
      background: white;
      border-color: white;
      color: var(--ink);
      box-shadow: none;
    }

    .site-footer {
      border-top: 1px solid var(--line);
      background:
        radial-gradient(circle at 85% 18%, color-mix(in oklch, var(--green) 9%, transparent), transparent 20rem),
        color-mix(in oklch, white 72%, var(--paper-warm));
    }

    .footer-inner {
      max-width: calc(var(--max) + 64px);
      margin: 0 auto;
      padding: 48px 32px 36px;
      display: grid;
      grid-template-columns: minmax(260px, 1.15fr) repeat(4, minmax(140px, 0.65fr));
      gap: 32px;
      color: var(--muted);
      font-size: 14px;
    }

    .footer-logo {
      display: inline-flex;
      margin-bottom: 18px;
      color: var(--ink);
    }

    .footer-logo img {
      display: block;
      width: 218px;
      height: auto;
    }

    .footer-brand p {
      max-width: 330px;
      line-height: 1.5;
    }

    .footer-col {
      display: grid;
      align-content: start;
      gap: 10px;
    }

    .footer-col h3 {
      margin-bottom: 6px;
      color: var(--ink);
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .footer-bottom {
      max-width: calc(var(--max) + 64px);
      margin: 0 auto;
      padding: 0 32px 40px;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      color: var(--muted);
      font-size: 12px;
    }

    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 620ms ease, transform 620ms ease;
    }
    .reveal.visible { opacity: 1; transform: none; }

    .mobile-sticky {
      position: fixed;
      left: 12px;
      right: 12px;
      bottom: 12px;
      z-index: 22;
      display: none;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
    }

    .mobile-sticky .cta,
    .mobile-sticky .login { min-height: 50px; }

    .cookie-banner {
      position: fixed;
      left: 24px;
      bottom: 24px;
      z-index: 40;
      width: min(468px, calc(100vw - 48px));
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      padding: 16px 16px 16px 18px;
      border: 1px solid color-mix(in oklch, var(--ink) 10%, var(--line));
      border-radius: 22px;
      background: color-mix(in oklch, white 90%, var(--paper-warm));
      box-shadow: 0 24px 70px color-mix(in oklch, var(--ink) 12%, transparent);
      color: var(--ink);
    }

    .cookie-banner[hidden] { display: none; }

    .cookie-copy {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .cookie-copy a {
      color: var(--ink);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }

    .cookie-accept {
      min-height: 42px;
      padding: 0 18px;
      border: 1px solid var(--ink);
      border-radius: 999px;
      background: var(--ink);
      color: white;
      cursor: pointer;
      font-size: 13px;
      font-weight: 650;
    }

    .cookie-accept:focus-visible,
    .cookie-copy a:focus-visible,
    .menu-toggle:focus-visible,
    .cta:focus-visible,
    .secondary:focus-visible,
    .login:focus-visible {
      outline: 2px solid color-mix(in oklch, var(--blue) 72%, white);
      outline-offset: 3px;
    }

    @media (max-width: 1280px) {
      .section { padding-top: 82px; padding-bottom: 82px; }
      .hero {
        min-height: auto;
        grid-template-columns: minmax(0, 1.24fr) minmax(380px, 0.76fr);
        gap: 38px;
        padding-top: 46px;
        padding-bottom: 58px;
      }
      .hero-visual { min-height: 570px; }
      .section-head { margin-bottom: 34px; }
      .card-grid, .steps, .profiles { gap: 14px; }
      .service-card { padding: 26px; }
    }

    @media (max-width: 1040px) {
      .nav-inner { grid-template-columns: auto 1fr auto; }
      .links {
        position: fixed;
        inset: 72px 16px auto 16px;
        display: none;
        flex-direction: column;
        align-items: flex-start;
        padding: 22px;
        border: 1px solid var(--line);
        border-radius: 22px;
        background: var(--paper);
        box-shadow: 0 24px 70px color-mix(in oklch, var(--ink) 14%, transparent);
      }
      body.menu-open .links { display: flex; }
      .nav .cta, .nav-login { display: none; }
      .menu-toggle { display: grid; justify-self: end; }
      .hero,
      .problem,
      .section-head,
      .calculator-panel,
      .faq-wrap,
      .cta-panel { grid-template-columns: 1fr; }
      .section { padding-top: 76px; padding-bottom: 76px; }
      .hero { min-height: auto; padding-top: 50px; }
      .hero-visual {
        min-height: 570px;
      }
      .outcome-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .service-cards { grid-template-columns: 1fr; }
      .service-card { min-height: auto; }
      .card-grid, .steps, .profiles, .trust-grid, .tech-grid, .security-grid, .testimonials { grid-template-columns: repeat(2, 1fr); }
      .testimonial-intro { position: static; }
      .before-list, .after-plan { width: min(600px, 54%); }
      .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .footer-brand { grid-column: 1 / -1; }
    }

    @media (max-width: 720px) {
      .section, .nav-inner { padding-left: 20px; padding-right: 20px; }
      .section { padding-top: 64px; padding-bottom: 64px; }
      .brand, .brand svg, .brand img { width: 166px; height: 23px; }
      h1 { font-size: 44px; }
      h2 { font-size: 34px; }
      .hero-title-line { display: inline; }
      .hero-title-line + .hero-title-line::before { content: " "; }
      .hero > div:first-child { width: 100%; max-width: calc(100vw - 40px); }
      .hero-copy, .section-lede { font-size: 17px; }
      .hero-copy { max-width: 100%; }
      .hero { gap: 24px; padding-top: 36px; padding-bottom: 50px; }
      .hero .actions { align-items: stretch; }
      .hero .actions .cta,
      .hero .actions .secondary { min-height: 52px; width: 100%; justify-content: center; }
      .hero-proof { margin-top: 16px; gap: 8px; }
      .hero-proof span { min-height: 34px; padding: 0 12px; }
      .hero-visual { display: none; }
      .question:nth-child(2n) { margin-left: 0; }
      .service-card { min-height: auto; padding: 24px; border-radius: 28px; }
      .service-card::before { inset: 16px; border-radius: 22px; }
      .service-visual { min-height: auto; padding: 14px; }
      .tax-diagram,
      .wealth-diagram { grid-template-columns: 1fr; }
      .tax-review-line { grid-template-columns: 1fr; text-align: center; }
      .tax-review-line::before,
      .tax-review-line::after { display: none; }
      .service-list { grid-template-columns: 1fr; }
      .compare-stage {
        min-height: auto;
        display: grid;
        gap: 22px;
        padding: 22px;
      }
      .compare-top { align-items: flex-start; flex-direction: column; }
      .compare-copy { max-width: none; }
      .before-list,
      .after-plan {
        position: relative;
        inset: auto;
        width: auto;
      }
      .before-list { grid-template-columns: 1fr; }
      .mess-card { transform: none; }
      .after-plan { display: none; opacity: 1; transform: none; }
      .compare.is-after .before-list { display: none; }
      .compare.is-after .after-plan { display: grid; }
      .plan-grid, .plan-row { grid-template-columns: 1fr; }
      .plan-metric { border-right: 0; border-bottom: 1px solid var(--line); }
      .plan-metric:last-child { border-bottom: 0; }
      .card-grid, .steps, .profiles, .trust-grid, .tech-grid, .security-grid, .testimonials { grid-template-columns: 1fr; }
      .card, .step, .profile, .trust-card { min-height: 190px; }
      .calculator-preview-grid { grid-template-columns: 1fr; }
      .tech, .security, .cta-panel { padding: 34px 24px; border-radius: 28px; }
      .testimonial-shell { min-height: 500px; }
      .testimonial { padding: 28px; }
      .testimonial blockquote { font-size: 22px; }
      .testimonial figcaption {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
      }
      .footer-inner { grid-template-columns: 1fr; padding: 44px 20px 34px; }
      .footer-bottom { flex-direction: column; padding: 0 20px 92px; }
      .mobile-sticky { display: grid; }
      .cookie-banner {
        left: 12px;
        right: 12px;
        bottom: 82px;
        width: auto;
        grid-template-columns: 1fr;
        padding: 16px;
      }
      .cookie-accept { width: 100%; }
    }

    @media (max-width: 480px) {
      .section, .nav-inner { padding-left: 18px; padding-right: 18px; }
      .section { padding-top: 56px; padding-bottom: 56px; }
      h1 { font-size: 39px; line-height: 1.02; }
      h2 { font-size: 31px; line-height: 1.08; }
      .actions { gap: 10px; }
      .hero .actions .cta,
      .hero .actions .secondary { width: 100%; }
      .service-card, .calculator-panel, .tech, .security, .cta-panel { border-radius: 24px; }
      .service-list li { min-height: 36px; }
      .testimonial-shell { min-height: 520px; }
      .cta-panel { padding: 30px 22px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
      }
      .reveal { opacity: 1; transform: none; }
    }

.geo-direct, .key-takeaways, .related-links, .answer-card, .notice-card { margin-top: 24px; padding: 22px; border: 1px solid var(--line); border-radius: 24px; background: color-mix(in oklch, white 82%, var(--paper-warm)); }
.geo-direct p, .key-takeaways li, .related-links li, .notice-card p { color: var(--muted); font-size: 17px; line-height: 1.56; }
.geo-direct strong, .answer-card strong { color: var(--ink); }
.key-takeaways h2, .related-links h2, .answer-card h2 { margin-top: 0; }
.link-list { display: grid; gap: 10px; margin-top: 18px; padding-left: 18px; }
.link-list a, .article a, .body-copy a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.compare-table { width: 100%; margin-top: 24px; border-collapse: collapse; overflow: hidden; border-radius: 22px; }
.compare-table th, .compare-table td { padding: 16px; border: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--muted); line-height: 1.45; }
.compare-table th { color: var(--ink); background: color-mix(in oklch, white 80%, var(--paper-warm)); }
.topic-clusters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.topic-cluster { padding: 22px; border: 1px solid var(--line); border-radius: 24px; background: color-mix(in oklch, white 82%, var(--paper-warm)); }
.topic-cluster p { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.topic-cluster ul { margin: 16px 0 0; padding-left: 18px; display: grid; gap: 8px; }
.fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.fact-grid li { list-style: none; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: white; color: var(--muted); line-height: 1.42; }
.faq-stack { display: grid; gap: 12px; margin-top: 28px; }
.faq-stack details { border: 1px solid var(--line); border-radius: 18px; background: white; padding: 18px 20px; }
.faq-stack summary { cursor: pointer; color: var(--ink); font-weight: 650; }
.faq-stack p { margin-top: 12px; color: var(--muted); line-height: 1.55; }
@media (max-width: 800px) { .topic-clusters, .fact-grid { grid-template-columns: 1fr; } .compare-table { display: block; overflow-x: auto; } }

/* ---- exported style block ---- */

@font-face { font-family: "Archia Regular"; src: url("/assets/fonts/archia-regular.woff2") format("woff2"); font-display: swap; font-weight: 400; }
:root { --bg: oklch(98.4% 0.006 78); --paper: oklch(100% 0 0); --paper-warm: oklch(96.8% 0.009 78); --ink: oklch(15% 0.014 245); --muted: oklch(45% 0.017 245); --line: oklch(88% 0.009 78); --blue: oklch(61% 0.145 225); --green: oklch(70% 0.145 155); --amber: oklch(75% 0.14 78); --coral: oklch(67% 0.16 35); --max: 1120px; --font: "Archia Regular", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif; --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace; } body { margin: 0; color: var(--ink); background: radial-gradient(circle at 86% 10%, color-mix(in oklch, var(--green) 10%, transparent), transparent 28rem), linear-gradient(180deg, var(--bg), var(--paper-warm)); font-family: var(--font); -webkit-font-smoothing: antialiased; } p, h1, h2, h3 { margin: 0; } p { text-wrap: pretty; }
.nav { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: color-mix(in oklch, var(--bg) 96%, white); } .nav-inner, .section, .footer-inner, .footer-bottom { max-width: calc(var(--max) + 64px); margin: 0 auto; padding-left: 32px; padding-right: 32px; } .nav-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 22px; } .brand, .footer-logo { display: inline-flex; align-items: center; color: var(--ink); } .brand img, .footer-logo img { display: block; width: 218px; height: auto; } .nav-actions { display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: 14px; } .nav a:hover, .site-footer a:hover { color: var(--ink); }
.cta, .secondary { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; border-radius: 999px; font-size: 14px; font-weight: 650; white-space: nowrap; } .cta { background: var(--ink); color: white; border: 1px solid var(--ink); } .secondary { background: white; border: 1px solid var(--line); color: var(--ink); }
.section { padding-top: 64px; padding-bottom: 64px; } .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.76fr); gap: 36px; align-items: center; padding-top: 56px; } .kicker { margin-bottom: 12px; color: var(--blue); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } h1 { max-width: 820px; font-size: clamp(44px, 5.5vw, 72px); line-height: 1; letter-spacing: -0.01em; text-wrap: balance; } h2 { max-width: 780px; font-size: clamp(31px, 3.8vw, 48px); line-height: 1.06; letter-spacing: -0.006em; text-wrap: balance; } h3 { font-size: 22px; line-height: 1.1; } .lede { max-width: 700px; margin-top: 18px; color: var(--muted); font-size: 19px; line-height: 1.42; } .actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
.panel { padding: 26px; border: 1px solid color-mix(in oklch, var(--blue) 22%, var(--line)); border-radius: 30px; background: radial-gradient(circle at 82% 12%, color-mix(in oklch, var(--green) 18%, transparent), transparent 12rem), radial-gradient(circle at 10% 92%, color-mix(in oklch, var(--coral) 10%, transparent), transparent 12rem), var(--paper); box-shadow: 0 24px 72px color-mix(in oklch, var(--ink) 8%, transparent); } .panel h3 { margin-top: 12px; font-size: 28px; } .status { display: inline-flex; min-height: 30px; align-items: center; padding: 0 11px; border-radius: 999px; background: color-mix(in oklch, var(--green) 14%, white); color: color-mix(in oklch, var(--green) 58%, var(--ink)); font-size: 12px; font-weight: 650; }
.panel-list { margin-top: 24px; display: grid; gap: 12px; } .panel-item { padding: 16px; border: 1px solid color-mix(in oklch, var(--line) 82%, white); border-radius: 18px; background: color-mix(in oklch, white 82%, var(--paper-warm)); color: var(--muted); font-size: 15px; line-height: 1.42; } .panel-item strong { display: block; margin-bottom: 8px; color: var(--ink); font-size: 13px; font-family: var(--mono); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 650; }
.split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 42px; align-items: start; } .body-copy { color: var(--muted); font-size: 19px; line-height: 1.5; } .body-copy p + p { margin-top: 16px; }
.grid { display: grid; gap: 16px; margin-top: 30px; } .grid.two { grid-template-columns: repeat(2, 1fr); } .grid.three { grid-template-columns: repeat(3, 1fr); } .grid.four { grid-template-columns: repeat(4, 1fr); }
.card, .team-card { min-height: 174px; padding: 22px; border: 1px solid var(--line); border-radius: 24px; background: color-mix(in oklch, white 78%, var(--paper-warm)); display: grid; grid-template-rows: auto auto 1fr; gap: 14px; } .card span, .team-card span { color: var(--blue); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .card p, .team-card p { color: var(--muted); font-size: 15px; line-height: 1.43; }
.story-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: radial-gradient(circle at 16% 18%, color-mix(in oklch, var(--amber) 16%, transparent), transparent 18rem), color-mix(in oklch, white 64%, var(--paper-warm)); } .story-card { margin-top: 30px; padding: clamp(26px, 4vw, 46px); border: 1px solid var(--line); border-radius: 34px; background: white; box-shadow: 0 24px 70px color-mix(in oklch, var(--ink) 7%, transparent); } .story-card p { max-width: 900px; color: var(--muted); font-size: 19px; line-height: 1.55; } .story-card p + p { margin-top: 18px; }
.quote-strip { margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .quote-strip article { min-height: 220px; padding: 28px; border-radius: 28px; border: 1px solid var(--line); background: color-mix(in oklch, white 72%, var(--paper-warm)); } .quote-strip span { color: var(--coral); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .quote-strip p { margin-top: 24px; color: var(--ink); font-size: clamp(23px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -0.006em; text-wrap: balance; }
.team-card { min-height: 150px; grid-template-rows: auto 1fr auto; } .team-card h3 { font-size: 20px; } .team-card p { align-self: end; }
.careers { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1.18fr); gap: 34px; align-items: start; } .career-note { padding: 26px; border: 1px solid color-mix(in oklch, var(--green) 28%, var(--line)); border-radius: 28px; background: radial-gradient(circle at 88% 10%, color-mix(in oklch, var(--green) 18%, transparent), transparent 13rem), white; } .career-note p { margin-top: 14px; color: var(--muted); font-size: 17px; line-height: 1.5; } .jobs-frame { overflow: hidden; border: 1px solid var(--line); border-radius: 30px; background: white; box-shadow: 0 22px 64px color-mix(in oklch, var(--ink) 7%, transparent); } .jobs-frame iframe { display: block; width: 100%; max-width: 800px; height: 700px; margin: 0 auto; border: 0; }
.final { border-radius: 34px; background: radial-gradient(circle at 86% 18%, color-mix(in oklch, var(--green) 24%, transparent), transparent 18rem), radial-gradient(circle at 8% 88%, color-mix(in oklch, var(--blue) 18%, transparent), transparent 18rem), var(--ink); color: white; } .final .lede, .final p { color: color-mix(in oklch, white 74%, transparent); } .final .cta { background: white; color: var(--ink); border-color: white; }
.site-footer { border-top: 1px solid var(--line); background: color-mix(in oklch, white 72%, var(--paper-warm)); } .footer-inner { padding-top: 54px; padding-bottom: 38px; display: grid; grid-template-columns: minmax(250px, 1.15fr) repeat(4, minmax(130px, 0.65fr)); gap: 30px; color: var(--muted); font-size: 14px; } .footer-logo { margin-bottom: 16px; } .footer-col h3 { margin: 0 0 6px; color: var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .footer-bottom { padding-top: 0; padding-bottom: 42px; display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 12px; }
@media (max-width: 900px) { .hero, .split, .careers { grid-template-columns: 1fr; } .grid.two, .grid.three, .grid.four, .quote-strip, .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .nav-inner, .section, .footer-inner, .footer-bottom { padding-left: 20px; padding-right: 20px; } .nav-actions { display: none; } .section { padding-top: 50px; padding-bottom: 50px; } .hero { padding-top: 40px; } h1 { font-size: 42px; } h2 { font-size: 32px; } .lede { font-size: 18px; } .grid.two, .grid.three, .grid.four, .quote-strip, .footer-inner { grid-template-columns: 1fr; } .jobs-frame iframe { height: 620px; } .footer-bottom { flex-direction: column; padding-bottom: 36px; } }
    .torch-heading {
      --torch-x: 50%;
      --torch-y: 50%;
      --heading-gradient: linear-gradient(105deg, var(--coral, oklch(67% 0.16 35)), var(--amber, oklch(75% 0.14 78)) 30%, var(--green, oklch(70% 0.145 155)) 58%, var(--blue, oklch(61% 0.145 225)) 82%, var(--violet, oklch(62% 0.12 288)));
      position: relative;
      display: block;
      isolation: isolate;
    }

    .torch-heading:hover .heading-torch,
    .torch-heading.torch-active .heading-torch { opacity: 1; }

    @media (prefers-reduced-motion: reduce) {
      .heading-torch { display: none; }
    }
@media (max-width: 900px) { .nav-actions { display: none; } } .brand { display: inline-flex; align-items: center; color: var(--ink); } .brand img { display: block; width: 218px; height: auto; } .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr); gap: 36px; align-items: center; padding-top: 56px; }
.panel { padding: 24px; border: 1px solid color-mix(in oklch, var(--blue) 22%, var(--line)); border-radius: 30px; background: radial-gradient(circle at 80% 15%, color-mix(in oklch, var(--green) 14%, transparent), transparent 12rem), var(--paper); box-shadow: 0 24px 72px color-mix(in oklch, var(--ink) 8%, transparent); }
.grid, .cards, .steps { display: grid; gap: 16px; margin-top: 30px; } .card, .step, .post-card, .partner-card { min-height: 172px; padding: 22px; border: 1px solid var(--line); border-radius: 24px; background: color-mix(in oklch, white 78%, var(--paper-warm)); display: grid; grid-template-rows: auto auto 1fr; gap: 14px; } .card span, .step span, .post-card span, .partner-card span { color: var(--blue); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .card p, .step p, .post-card p, .partner-card p { color: var(--muted); font-size: 15px; line-height: 1.43; } .split { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: 40px; align-items: start; } .body-copy { color: var(--muted); font-size: 19px; line-height: 1.45; }
.article { max-width: 780px; } .article h2 { margin-top: 44px; margin-bottom: 14px; font-size: 34px; } .article h3 { margin-top: 28px; margin-bottom: 10px; } .article p, .article li { color: var(--muted); font-size: 17px; line-height: 1.62; } .article p + p { margin-top: 16px; } .article ul { margin: 16px 0 0; padding-left: 20px; } blockquote { margin: 24px 0; padding: 18px 22px; border-left: 3px solid var(--green); background: white; color: var(--ink); font-size: 20px; line-height: 1.45; }
.final { border-radius: 34px; background: radial-gradient(circle at 82% 18%, color-mix(in oklch, var(--green) 28%, transparent), transparent 18rem), var(--ink); color: white; } .footer-logo { display: inline-flex; margin-bottom: 16px; color: var(--ink); }
.badge-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; } .badge { display: inline-flex; min-height: 30px; align-items: center; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--muted); font-size: 12px; } .placeholder-img { height: 126px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in oklch, var(--blue) 14%, white), color-mix(in oklch, var(--green) 12%, white)); border: 1px solid var(--line); }
@media (max-width: 900px) { .hero, .split { grid-template-columns: 1fr; } .grid.two, .grid.three, .grid.four, .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .nav-inner, .section, .footer-inner, .footer-bottom { padding-left: 20px; padding-right: 20px; } .nav-actions { display: none; } .section { padding-top: 50px; padding-bottom: 50px; } .hero { padding-top: 40px; } h1 { font-size: 42px; } h2 { font-size: 32px; } .lede { font-size: 18px; } .grid.two, .grid.three, .grid.four, .footer-inner { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; padding-bottom: 36px; } }

/* ---- exported style block ---- */

@font-face {
      font-family: "Archia Regular";
      src: url("/assets/fonts/archia-regular.woff2") format("woff2");
      font-display: swap;
      font-style: normal;
      font-weight: 400;
    }
    body {
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at 90% 8%, color-mix(in oklch, var(--green) 9%, transparent), transparent 28rem),
        radial-gradient(circle at 8% 38%, color-mix(in oklch, var(--blue) 6%, transparent), transparent 28rem),
        linear-gradient(180deg, var(--bg), oklch(99% 0.003 78) 48%, var(--paper-warm));
      font-family: var(--font);
      font-size: 16px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }
    code { font-family: var(--mono); }

    .nav {
      position: sticky;
      top: 0;
      z-index: 10;
      border-bottom: 1px solid color-mix(in oklch, var(--line) 76%, transparent);
      background: color-mix(in oklch, var(--bg) 96%, white);
    }

    .nav-inner {
      max-width: calc(var(--max) + 64px);
      min-height: 74px;
      margin: 0 auto;
      padding: 0 32px;
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 24px;
      align-items: center;
    }

    .links {
      display: flex;
      justify-content: center;
      gap: 22px;
      color: var(--muted);
      font-size: 14px;
    }

    .secondary {
      border: 1px solid var(--line);
      background: color-mix(in oklch, white 76%, transparent);
      color: var(--ink);
    }

    .section {
      max-width: calc(var(--max) + 64px);
      margin: 0 auto;
      padding: 96px 32px;
    }

    .hero {
      min-height: calc(90svh - 74px);
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
      gap: 54px;
      align-items: center;
      padding-top: 56px;
      padding-bottom: 76px;
    }

    .kicker,
    .label {
      color: var(--blue);
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    h1 {
      max-width: 920px;
      margin-top: 18px;
      font-size: clamp(56px, 6vw, 92px);
      line-height: 0.98;
      letter-spacing: -0.008em;
      text-wrap: balance;
    }

    h2 {
      max-width: 820px;
      font-size: clamp(36px, 4.1vw, 62px);
      line-height: 1.04;
      letter-spacing: -0.006em;
      text-wrap: balance;
    }

    h3 {
      font-size: 24px;
      line-height: 1.12;
      letter-spacing: -0.004em;
    }

    .lede {
      max-width: 720px;
      margin-top: 22px;
      color: var(--muted);
      font-size: 22px;
      line-height: 1.42;
      text-wrap: pretty;
    }

    .actions {
      margin-top: 30px;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .hero-card {
      position: relative;
      padding: 26px;
      border: 1px solid var(--line);
      border-radius: 34px;
      background:
        radial-gradient(circle at 26% 18%, color-mix(in oklch, var(--amber) 14%, transparent), transparent 13rem),
        radial-gradient(circle at 82% 72%, color-mix(in oklch, var(--green) 12%, transparent), transparent 15rem),
        linear-gradient(145deg, color-mix(in oklch, white 90%, var(--paper-warm)), var(--paper));
      box-shadow: 0 30px 86px color-mix(in oklch, var(--ink) 9%, transparent);
      overflow: hidden;
    }

    .hero-card::before {
      position: absolute;
      inset: 22px;
      border-radius: 28px;
      background-image:
        linear-gradient(color-mix(in oklch, var(--line) 68%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in oklch, var(--line) 68%, transparent) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: radial-gradient(circle at center, black 0 42%, transparent 82%);
      opacity: 0.48;
      content: "";
    }

    .hero-card > * { position: relative; z-index: 1; }

    .brand-snapshot {
      margin-top: 24px;
      display: grid;
      gap: 14px;
    }

    .snapshot-row {
      display: grid;
      grid-template-columns: 116px 1fr;
      gap: 14px;
      align-items: center;
      padding: 14px;
      border: 1px solid color-mix(in oklch, var(--ink) 12%, var(--line));
      border-radius: 18px;
      background: color-mix(in oklch, white 82%, transparent);
    }

    .snapshot-row strong {
      font-size: 13px;
      line-height: 1.2;
    }

    .snapshot-row span {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }

    .accent-line {
      height: 8px;
      margin-top: 24px;
      border-radius: 999px;
      background: var(--heading-gradient);
    }

    .section-head {
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(280px, 0.52fr);
      gap: 40px;
      align-items: end;
      margin-bottom: 34px;
    }

    .section-head p {
      color: var(--muted);
      font-size: 19px;
      line-height: 1.45;
    }

    .grid {
      display: grid;
      gap: 18px;
    }

    .card,
    .rule-card,
    .spec-card {
      min-height: 190px;
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: color-mix(in oklch, white 76%, var(--paper-warm));
      display: grid;
      gap: 14px;
      align-content: start;
    }

    .card p,
    .rule-card p,
    .spec-card p,
    .card li,
    .rule-card li {
      color: var(--muted);
      font-size: 15px;
      line-height: 1.45;
    }

    .card ul,
    .rule-card ul {
      margin: 0;
      padding-left: 18px;
    }

    .color-card {
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: color-mix(in oklch, white 80%, var(--paper-warm));
      display: grid;
      gap: 14px;
    }

    .swatch {
      min-height: 118px;
      border-radius: 18px;
      border: 1px solid color-mix(in oklch, var(--ink) 8%, transparent);
      background: var(--swatch);
    }

    .color-card strong,
    .color-card code {
      display: block;
    }

    .color-card code {
      color: var(--muted);
      font-size: 12px;
      white-space: normal;
    }

    .type-panel {
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: 30px;
      background: var(--paper);
    }

    .type-sample-large {
      max-width: 780px;
      font-size: clamp(42px, 5vw, 72px);
      line-height: 1;
      letter-spacing: -0.008em;
    }

    .type-sample-body {
      max-width: 700px;
      margin-top: 20px;
      color: var(--muted);
      font-size: 20px;
      line-height: 1.48;
    }

    .type-scale {
      margin-top: 26px;
      display: grid;
      gap: 10px;
    }

    .type-row {
      display: grid;
      grid-template-columns: 120px 1fr auto;
      gap: 18px;
      align-items: baseline;
      padding: 14px 0;
      border-top: 1px solid var(--line);
    }

    .type-row span,
    .type-row code {
      color: var(--muted);
      font-size: 13px;
    }

    .logo-zone {
      min-height: 220px;
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: 30px;
      background: var(--paper);
      display: grid;
      place-items: center;
    }

    .logo-zone.dark {
      background: var(--ink);
      color: white;
    }

    .logo-zone img {
      display: block;
      width: min(280px, 72vw);
      height: auto;
    }

    .logo-zone.dark img { filter: invert(1); }

    .voice-example {
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--paper);
    }

    .voice-example.good {
      border-color: color-mix(in oklch, var(--green) 28%, var(--line));
      background: color-mix(in oklch, var(--green) 5%, white);
    }

    .voice-example.bad {
      border-color: color-mix(in oklch, var(--coral) 30%, var(--line));
      background: color-mix(in oklch, var(--coral) 4%, white);
    }

    .voice-example blockquote {
      margin: 12px 0 0;
      color: var(--ink);
      font-size: 22px;
      line-height: 1.25;
    }

    .component-strip {
      padding: 26px;
      border: 1px solid var(--line);
      border-radius: 30px;
      background:
        radial-gradient(circle at 86% 18%, color-mix(in oklch, var(--green) 10%, transparent), transparent 15rem),
        var(--paper);
      display: grid;
      gap: 22px;
    }

    .mini-nav {
      min-height: 68px;
      padding: 0 20px;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: color-mix(in oklch, var(--bg) 96%, white);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .mini-links {
      display: flex;
      gap: 16px;
      color: var(--muted);
      font-size: 13px;
    }

    .sample-card {
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: color-mix(in oklch, white 82%, var(--paper-warm));
    }

    .sample-card span {
      display: block;
      margin-bottom: 12px;
    }

    .sample-card p {
      margin-top: 9px;
      color: var(--muted);
      font-size: 15px;
    }

    .motion-board {
      min-height: 280px;
      padding: 26px;
      border: 1px solid var(--line);
      border-radius: 30px;
      background:
        linear-gradient(color-mix(in oklch, var(--line) 68%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in oklch, var(--line) 68%, transparent) 1px, transparent 1px),
        var(--paper);
      background-size: 44px 44px;
      position: relative;
      overflow: hidden;
    }

    .motion-node {
      position: absolute;
      min-width: 132px;
      padding: 12px 14px;
      border: 1px solid color-mix(in oklch, var(--node) 24%, var(--line));
      border-radius: 16px;
      background: color-mix(in oklch, var(--node) 8%, white);
      color: color-mix(in oklch, var(--node) 48%, var(--ink));
      font-size: 13px;
    }

    .motion-node:nth-child(1) { --node: var(--blue); top: 34px; left: 30px; }
    .motion-node:nth-child(2) { --node: var(--amber); top: 98px; right: 36px; }
    .motion-node:nth-child(3) { --node: var(--coral); bottom: 44px; left: 72px; }
    .motion-node:nth-child(4) { --node: var(--green); bottom: 56px; right: 70px; }

    .motion-core {
      position: absolute;
      inset: 50%;
      width: 180px;
      height: 110px;
      padding: 18px;
      border: 1px solid color-mix(in oklch, var(--ink) 16%, var(--line));
      border-radius: 22px;
      background: white;
      transform: translate(-50%, -50%);
      box-shadow: 0 20px 54px color-mix(in oklch, var(--ink) 10%, transparent);
      display: grid;
      place-items: center;
      text-align: center;
      font-weight: 650;
    }

    .motion-board::after {
      position: absolute;
      inset: 50% auto auto 50%;
      width: 1px;
      height: 260px;
      background: linear-gradient(var(--blue), var(--green));
      opacity: 0.34;
      transform: translate(-50%, -50%) rotate(58deg);
      content: "";
    }

    .final {
      border-radius: 34px;
      background:
        radial-gradient(circle at 82% 18%, color-mix(in oklch, var(--green) 25%, transparent), transparent 18rem),
        var(--ink);
      color: white;
    }

    .final p { color: color-mix(in oklch, white 74%, transparent); }
    .final .cta { background: white; color: var(--ink); border-color: white; box-shadow: none; }

    .footer-inner {
      max-width: calc(var(--max) + 64px);
      margin: 0 auto;
      padding: 54px 32px 38px;
      display: grid;
      grid-template-columns: minmax(250px, 1.15fr) repeat(4, minmax(130px, 0.65fr));
      gap: 30px;
      color: var(--muted);
      font-size: 14px;
    }

    .footer-logo svg,
    .footer-logo img {
      display: block;
      width: 218px;
      height: auto;
    }
    .footer-bottom { max-width: calc(var(--max) + 64px); margin: 0 auto; padding: 0 32px 42px; display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 12px; }

    @media (max-width: 980px) {
      .nav-inner { grid-template-columns: auto auto; }
      .links { display: none; }
      .hero,
      .section-head { grid-template-columns: 1fr; }
      .grid.two,
      .grid.three,
      .grid.four,
      .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .footer-brand { grid-column: 1 / -1; }
      .hero { min-height: 0; }
    }

    @media (max-width: 640px) {
      .nav-inner,
      .section,
      .footer-inner,
      .footer-bottom {
        padding-left: 20px;
        padding-right: 20px;
      }
      .brand img { width: 176px; }
      .nav-inner .secondary { display: none; }
      .section { padding-top: 68px; padding-bottom: 68px; }
      h1 { font-size: 46px; }
      h2 { font-size: 34px; }
      .lede { font-size: 18px; }
      .grid.two,
      .grid.three,
      .grid.four,
      .footer-inner { grid-template-columns: 1fr; }
      .snapshot-row { grid-template-columns: 1fr; }
      .type-row { grid-template-columns: 1fr; gap: 8px; }
      .mini-nav { align-items: flex-start; flex-direction: column; padding: 18px; }
      .mini-links { flex-wrap: wrap; }
      .motion-board { min-height: 380px; }
      .motion-node { position: relative; inset: auto !important; margin-bottom: 10px; }
      .motion-core { position: relative; inset: auto; width: 100%; transform: none; margin-top: 18px; }
      .footer-bottom { flex-direction: column; padding-bottom: 36px; }
    }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 88% 8%, color-mix(in oklch, var(--green) 10%, transparent), transparent 28rem), linear-gradient(180deg, var(--bg), var(--paper-warm)); font-family: var(--font); -webkit-font-smoothing: antialiased; }
.kicker { margin-bottom: 14px; color: var(--blue); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
h3 { font-size: 22px; line-height: 1.12; }
.answer-list { margin-top: 24px; display: grid; gap: 10px; }
.answer-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.answer-row strong { color: var(--ink); font-weight: 650; }
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.faq-card { min-height: 176px; padding: 22px; border: 1px solid var(--line); border-radius: 24px; background: color-mix(in oklch, white 80%, var(--paper-warm)); display: grid; grid-template-rows: auto auto 1fr; gap: 12px; }
.faq-card span { color: var(--blue); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.faq-card h3 { font-size: 20px; }
.faq-card p { color: var(--muted); font-size: 15px; line-height: 1.45; }
.topic-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.topic-nav a { min-height: 86px; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: white; display: grid; align-content: space-between; color: var(--muted); font-size: 13px; }
.topic-nav strong { color: var(--ink); font-size: 16px; }
.note { margin-top: 30px; padding: 20px 22px; border: 1px solid color-mix(in oklch, var(--amber) 32%, var(--line)); border-radius: 24px; background: color-mix(in oklch, var(--amber) 10%, white); color: var(--muted); font-size: 15px; line-height: 1.5; }
.final { margin-top: 34px; margin-bottom: 34px; padding-top: 84px; padding-bottom: 84px; border-radius: 34px; background: radial-gradient(circle at 82% 18%, color-mix(in oklch, var(--green) 28%, transparent), transparent 18rem), var(--ink); color: white; }
@media (max-width: 900px) { .hero, .split { grid-template-columns: 1fr; } .faq-grid, .topic-nav, .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .nav-inner, .section, .footer-inner, .footer-bottom { padding-left: 20px; padding-right: 20px; } .nav-actions { display: none; } .section { padding-top: 50px; padding-bottom: 50px; } .hero { padding-top: 40px; } h1 { font-size: 42px; } h2 { font-size: 32px; } .lede { font-size: 18px; } .faq-grid, .topic-nav, .footer-inner { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; padding-bottom: 36px; } }
.section { padding-top: 72px; padding-bottom: 72px; } .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr); gap: 44px; align-items: center; padding-top: 68px; } .lede { max-width: 700px; margin-top: 20px; color: var(--muted); font-size: 20px; line-height: 1.42; } .actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) { .nav-inner, .section, .footer-inner, .footer-bottom { padding-left: 20px; padding-right: 20px; } .nav-actions { display: none; } .section { padding-top: 56px; padding-bottom: 56px; } .hero { padding-top: 48px; } h1 { font-size: 42px; } h2 { font-size: 32px; } .lede { font-size: 18px; } .grid.two, .grid.three, .grid.four, .footer-inner { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; padding-bottom: 36px; } }
.card { min-height: 176px; padding: 22px; border: 1px solid var(--line); border-radius: 24px; background: color-mix(in oklch, white 78%, var(--paper-warm)); display: grid; grid-template-rows: auto auto 1fr; gap: 14px; }
.card span { color: var(--blue); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.card p { align-self: end; color: var(--muted); font-size: 15px; line-height: 1.43; }
.security-band { width: calc(100% - 64px); margin-top: 20px; margin-bottom: 20px; padding: clamp(52px, 6vw, 78px) clamp(24px, 4vw, 46px); border: 1px solid color-mix(in oklch, white 16%, var(--ink)); border-radius: 34px; background: radial-gradient(circle at 12% 16%, color-mix(in oklch, var(--blue) 24%, transparent), transparent 22rem), radial-gradient(circle at 88% 78%, color-mix(in oklch, var(--green) 22%, transparent), transparent 24rem), var(--ink); color: white; box-shadow: 0 28px 80px color-mix(in oklch, var(--ink) 12%, transparent); overflow: hidden; }
.security-band .kicker { color: color-mix(in oklch, var(--green) 86%, white); }
.security-band .lede { color: color-mix(in oklch, white 72%, transparent); }
.intelligence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.intelligence-card { min-height: 188px; padding: 24px; border: 1px solid color-mix(in oklch, white 18%, transparent); border-radius: 26px; background: color-mix(in oklch, white 9%, transparent); display: grid; grid-template-rows: auto auto 1fr; gap: 16px; }
.intelligence-card span { color: color-mix(in oklch, var(--green) 78%, white); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.intelligence-card h3 { color: white; }
.intelligence-card p { align-self: end; color: color-mix(in oklch, white 68%, transparent); font-size: 15px; line-height: 1.46; }
@media (max-width: 900px) { .nav-actions { display: none; } .hero, .split { grid-template-columns: 1fr; } .grid.two, .grid.three, .intelligence-grid, .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .nav-inner, .section, .footer-inner, .footer-bottom { padding-left: 20px; padding-right: 20px; } .nav-actions { display: none; } .section { padding-top: 50px; padding-bottom: 50px; } .security-band { width: calc(100% - 32px); margin-top: 12px; margin-bottom: 12px; padding: 38px 22px; border-radius: 28px; } .hero { padding-top: 40px; } h1 { font-size: 42px; } h2 { font-size: 32px; } .lede { font-size: 18px; } .grid.two, .grid.three, .intelligence-grid, .footer-inner { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; padding-bottom: 36px; } }

    :root {
      --bg: oklch(98.4% 0.006 78);
      --paper: oklch(100% 0 0);
      --paper-warm: oklch(96.8% 0.009 78);
      --ink: oklch(15% 0.014 245);
      --muted: oklch(45% 0.017 245);
      --faint: oklch(70% 0.011 245);
      --line: oklch(88% 0.009 78);
      --blue: oklch(61% 0.145 225);
      --green: oklch(70% 0.145 155);
      --amber: oklch(75% 0.14 78);
      --radius: 24px;
      --max: 1180px;
      --font: "Archia Regular", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
      --mono: "SF Mono", "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
      --shadow: 0 28px 72px color-mix(in oklch, var(--ink) 9%, transparent);
    }
    body {
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at 88% 7%, color-mix(in oklch, var(--green) 10%, transparent), transparent 28rem),
        radial-gradient(circle at 5% 42%, color-mix(in oklch, var(--blue) 6%, transparent), transparent 30rem),
        linear-gradient(180deg, var(--bg), oklch(99% 0.003 78) 48%, var(--paper-warm));
      font-family: var(--font);
      font-size: 16px;
      line-height: 1.5;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    body.menu-open { overflow: hidden; }
    button { font: inherit; border: 0; }
    img { max-width: 100%; }

    .page {
      width: 100%;
      /* overflow-x moved to body to preserve position:sticky on .nav */
    }

    .nav {
      position: sticky;
      top: 0;
      z-index: 40;
      border-bottom: 1px solid color-mix(in oklch, var(--line) 76%, transparent);
      background: color-mix(in oklch, var(--bg) 96%, white);
    }

    .nav-inner {
      max-width: calc(var(--max) + 64px);
      min-height: 72px;
      margin: 0 auto;
      padding: 0 32px;
      display: grid;
      grid-template-columns: auto 1fr auto auto;
      gap: 22px;
      align-items: center;
    }

    .brand, .brand img {
      display: block;
      width: 218px;
      height: auto;
    }

    .cta,
    .secondary,
    .login {
      min-height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 20px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 650;
      white-space: nowrap;
      transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
      cursor: pointer;
    }

    .cta:hover,
    .secondary:hover,
    .login:hover { transform: translateY(-1px); }

    .section {
      max-width: calc(var(--max) + 64px);
      margin: 0 auto;
      padding: clamp(72px, 7vw, 96px) 32px;
    }

    .section[id] {
      scroll-margin-top: 92px;
    }

    .hero {
      min-height: min(720px, calc(82svh - 72px));
      padding-top: 54px;
      padding-bottom: 56px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, 0.58fr);
      gap: clamp(34px, 5vw, 72px);
      align-items: center;
    }

    .kicker,
    .eyebrow {
      color: var(--blue);
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    h3 {
      font-size: 24px;
      line-height: 1.12;
      letter-spacing: 0;
    }

    .hero-copy,
    .section-lede {
      max-width: 720px;
      color: var(--muted);
      font-size: 21px;
      line-height: 1.42;
      text-wrap: pretty;
    }

    .hero-copy { margin-top: 22px; }

    .actions {
      margin-top: 30px;
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
    }

    .hero .cta,
    .hero .secondary {
      min-height: 58px;
      padding: 0 28px;
      font-size: 16px;
    }

    .trust-line {
      margin-top: 18px;
      color: var(--muted);
      font-size: 14px;
    }

    .hero-card {
      border: 1px solid color-mix(in oklch, var(--green) 22%, var(--line));
      border-radius: 32px;
      background:
        radial-gradient(circle at 86% 16%, color-mix(in oklch, var(--green) 12%, transparent), transparent 13rem),
        color-mix(in oklch, white 82%, var(--paper-warm));
      box-shadow: var(--shadow);
      padding: clamp(22px, 3vw, 30px);
    }

    .hero-card h2 {
      margin-top: 8px;
      font-size: clamp(28px, 2.8vw, 38px);
      line-height: 1.05;
    }

    .hero-card p {
      margin-top: 12px;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.45;
    }

    .signal-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 22px;
    }

    .signal {
      min-height: 104px;
      padding: 15px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: white;
    }

    .signal span {
      display: block;
      color: var(--faint);
      font-size: 12px;
    }

    .signal strong {
      display: block;
      margin-top: 8px;
      font-size: 17px;
      line-height: 1.18;
    }

    .intro-row {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.42fr);
      gap: 32px;
      align-items: end;
      margin-bottom: 30px;
    }

    .calculator-frame-shell {
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      overflow: visible;
    }

    .widget-frame {
      display: block;
      width: 100%;
      min-height: 760px;
      height: 1040px;
      border: 0;
      background: transparent;
      transition: height 220ms ease;
    }

    .disclaimer {
      margin-top: 18px;
      padding: 16px 18px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: color-mix(in oklch, white 78%, var(--paper-warm));
      color: var(--muted);
      font-size: 13px;
      line-height: 1.46;
    }

    .footer-logo svg,
    .footer-logo img {
      width: 218px;
      height: auto;
      display: block;
    }

    @media (max-width: 980px) {
      .nav-inner {
        grid-template-columns: auto 1fr auto;
        gap: 12px;
      }
      .links {
        position: fixed;
        inset: 72px 18px auto 18px;
        display: none;
        padding: 18px;
        border: 1px solid var(--line);
        border-radius: 24px;
        background: var(--paper);
        box-shadow: var(--shadow);
        flex-direction: column;
        align-items: flex-start;
      }
      body.menu-open .links { display: flex; }
      .menu-toggle { display: grid; justify-self: end; }
      .nav .login { display: none; }
      .hero,
      .intro-row,
      .footer-inner {
        grid-template-columns: 1fr;
      }
      .footer-inner { gap: 22px; }
    }

    @media (max-width: 720px) {
      .nav-inner {
        min-height: 66px;
        padding: 0 18px;
      }
      .brand, .brand img { width: 176px; }
      .nav .cta { display: none; }
      .section { padding: 60px 18px; }
      .hero {
        min-height: auto;
        padding-top: 44px;
      }
      h1 { font-size: 42px; }
      h2 { font-size: 32px; }
      .hero-copy, .section-lede { font-size: 17px; }
      .hero-card { border-radius: 24px; }
      .signal-grid { grid-template-columns: 1fr; }
      .widget-frame {
        min-height: 820px;
        height: 1120px;
      }
      h1,
      h2,
      h3,
      p,
      strong,
      span {
        overflow-wrap: break-word;
      }
    }

/* === Layer 2: Typography and polish (from centry-site.css) === */
/*
  Centry shared design layer.
  Keeps the staging site static while centralising the approved visual polish:
  calm editorial surfaces, premium navigation, restrained motion, and mobile
  drawer behaviour shared by every generated HTML page.
*/

@font-face {
  font-family: "Centry Archia";
  src: url("/assets/fonts/archia-regular.woff2?v=archia-web-20260618") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Centry Archia";
  src: url("/assets/fonts/archia-medium.woff2?v=archia-web-20260618") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "Centry Archia";
  src: url("/assets/fonts/archia-medium.woff2?v=archia-web-20260618") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: "Centry Archia";
  src: url("/assets/fonts/archia-medium.woff2?v=archia-web-20260618") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

:root {
  --centry-bg: #ffffff;
  --centry-bg-soft: #ffffff;
  --centry-paper: #ffffff;
  --centry-ink: #001621;
  --centry-muted: rgba(0, 22, 33, 0.62);
  --centry-faint: #8a8e8c;
  --centry-line: rgba(23, 25, 28, 0.12);
  --centry-line-strong: rgba(23, 25, 28, 0.2);
  --centry-blue: #2369a8;
  --centry-green: #438a68;
  --centry-coral: #c56e52;
  --centry-shadow: 0 26px 80px rgba(23, 25, 28, 0.08);
  --centry-shadow-soft: 0 14px 40px rgba(23, 25, 28, 0.06);
  --centry-max: 1180px;
  --font: "Centry Archia", "Archia Regular", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --mono: "SF Mono", "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
}

html {
  background: var(--centry-bg);
}

body {
  color: var(--centry-ink);
  background: #ffffff !important;
  font-family: var(--font) !important;
}

button,
input,
textarea,
select {
  font-family: var(--font) !important;
}

body.menu-open {
  overflow: hidden;
}

.nav {
  border-bottom: 1px solid rgba(0, 22, 33, 0.07) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.nav-inner {
  max-width: calc(var(--centry-max) + 64px) !important;
  min-height: 76px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto !important;
  align-items: center !important;
  gap: clamp(14px, 2vw, 24px) !important;
}

.brand,
.footer-logo {
  color: var(--centry-ink) !important;
}

.brand img,
.footer-logo img {
  display: block;
  width: 218px;
  height: auto;
}

.links {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(14px, 2vw, 24px) !important;
}

.links,
.nav-actions {
  color: var(--centry-muted) !important;
}

.links,
.nav-actions,
.nav-actions {
  gap: clamp(14px, 2vw, 26px) !important;
}

.links a,
.nav-actions a,
.site-footer a {
  text-underline-offset: 0.2em;
}

.links a:hover,
.nav-actions a:hover,
.site-footer a:hover {
  color: var(--centry-ink) !important;
}

.cta,
.secondary,
.login {
  border-radius: 999px !important;
  letter-spacing: 0.02em !important;
}

.cta {
  background: var(--centry-ink) !important;
  border-color: var(--centry-ink) !important;
  color: #fff !important;
  box-shadow: 0 16px 34px rgba(23, 25, 28, 0.13) !important;
}

.secondary,
.login {
  background: rgba(255, 255, 255, 0.74) !important;
  border-color: var(--centry-line) !important;
  color: var(--centry-ink) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-weight: 650 !important;
}

.cta:focus-visible,
.secondary:focus-visible,
.login:focus-visible,
.menu-toggle:focus-visible,
.centry-mobile-menu a:focus-visible {
  outline: 2px solid var(--centry-blue);
  outline-offset: 3px;
}

.section {
  max-width: calc(var(--centry-max) + 64px) !important;
}

.hero {
  align-items: center;
}

main > .section:first-child,
main > .site-hero:first-child {
  padding-top: clamp(62px, 8vw, 118px) !important;
}

h1,
h2,
h3 {
  color: var(--centry-ink);
  font-family: var(--font) !important;
  font-weight: 400 !important;
}

h1 {
  letter-spacing: -0.018em !important;
}

h2 {
  letter-spacing: -0.012em !important;
}

h3 {
  letter-spacing: -0.006em !important;
}

.hero-copy,
.section-lede,
.lede,
.body-copy,
.article p,
.article li,
.card p,
.step p,
.post-card p,
.partner-card p,
.footer-brand p,
.footer-bottom {
  color: var(--centry-muted) !important;
}

.kicker,
.panel-label,
.card span,
.step span,
.post-card span,
.partner-card span,
.footer-col h3 {
  color: var(--centry-blue) !important;
  letter-spacing: 0.08em !important;
}

.hero-proof span,
.badge,
.status {
  border-color: var(--centry-line) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: var(--centry-muted) !important;
}

.panel,
.hero-visual,
.card,
.step,
.post-card,
.partner-card,
.faq-card,
.value-panel,
.layer-card,
.metric,
.timeline-card,
.trust-card,
.use-case-card,
.compare-card,
.asset-card,
.privacy-card,
.tax-form-card,
.tax-result-card {
  border-color: var(--centry-line) !important;
  box-shadow: var(--centry-shadow-soft);
}

.panel,
.hero-visual,
.value-panel,
.tax-form-card,
.tax-result-card {
  background: rgba(255, 255, 255, 0.78) !important;
}

.card,
.step,
.post-card,
.partner-card,
.faq-card,
.trust-card,
.use-case-card,
.compare-card,
.asset-card,
.privacy-card {
  background: rgba(255, 255, 255, 0.66) !important;
}

.final {
  background: var(--centry-ink) !important;
  box-shadow: var(--centry-shadow);
}

.final .cta {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--centry-ink) !important;
}

.final .cta--calculator {
  background: #7AAFB5 !important;
  border: 1.5px solid #7AAFB5 !important;
  color: #111719 !important;
}
.final .cta--calculator:hover {
  background: #8FC3C9 !important;
  border-color: #8FC3C9 !important;
  color: #111719 !important;
}

.final .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.site-footer {
  background:
    radial-gradient(circle at 82% 10%, rgba(67, 138, 104, 0.28), transparent 24rem),
    linear-gradient(145deg, #041118, #071f2b 58%, #031018) !important;
  border-top: 0 !important;
  color: rgba(255, 255, 255, 0.74) !important;
}

.site-footer .footer-logo,
.site-footer h3,
.site-footer a {
  color: #fff !important;
}

.site-footer .footer-logo img {
  filter: brightness(0) invert(1);
}

.site-footer .footer-brand p,
.site-footer .footer-bottom {
  color: rgba(255, 255, 255, 0.58) !important;
}

.heading-torch {
  display: none !important;
}

.reveal.visible,
.hero-visual.visible {
  opacity: 1 !important;
  transform: none !important;
}

.torch-heading {
  isolation: auto !important;
}

.torch-heading .heading-base {
  display: inline !important;
}

.page {
  /* overflow-x moved to body to preserve position:sticky on .nav */
}

body[data-route="/"] .hero {
  gap: clamp(38px, 5vw, 74px) !important;
}

body[data-route="/"] .hero > div:first-child {
  position: relative;
  z-index: 1;
}

body[data-route="/"] .hero-visual {
  position: relative !important;
  display: grid !important;
  min-height: clamp(520px, 42vw, 650px) !important;
  align-content: end !important;
  overflow: hidden !important;
  padding: clamp(22px, 3vw, 36px) !important;
  border-radius: clamp(26px, 3.4vw, 42px) !important;
  background: #dbe8ef !important;
  box-shadow: 0 38px 110px rgba(0, 22, 33, 0.13) !important;
}

body[data-route="/"] .hero-visual::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02) 42%, rgba(0, 22, 33, 0.24)),
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.35), transparent 18rem);
  content: "";
  pointer-events: none;
}

body[data-route="/"] .hero-visual .visual-head,
body[data-route="/"] .hero-visual .layer-card,
body[data-route="/"] .hero-visual .outcome-strip span,
body[data-route="/"] .hero-visual .component-chip {
  border-color: rgba(255, 255, 255, 0.72) !important;
  background: rgba(255, 255, 255, 0.76) !important;
  box-shadow: 0 12px 34px rgba(0, 22, 33, 0.08) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body[data-route="/"] .hero-visual .component-matrix {
  align-self: end;
  margin-top: auto;
}

.art-panel {
  display: grid !important;
  align-content: start;
  overflow: hidden;
  padding: 14px 18px 24px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.68)),
    radial-gradient(circle at 82% 0%, rgba(35, 105, 168, 0.13), transparent 16rem) !important;
}

.panel-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  width: 100%;
  margin: 0 0 22px;
  overflow: hidden;
  border: 1px solid rgba(0, 22, 33, 0.08);
  border-radius: 22px;
  background: #eef5f9;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.panel-media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 22, 33, 0.1));
  content: "";
  pointer-events: none;
}

.panel-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.panel-media--founder-horizon,
.panel-media--ai-dashboard,
.panel-media--wealth-review {
  aspect-ratio: 4 / 3;
}

.panel-media--founder-horizon img {
  object-position: center 42%;
}

.panel-media--wealth-review img,
.panel-media--ai-dashboard img {
  object-position: center 38%;
}

.panel-media--cross-border-map img,
.panel-media--process-timeline img,
.panel-media--coordination-arc img {
  object-fit: cover;
}

.art-panel .status {
  width: fit-content;
}

.art-panel--image-only {
  min-height: 0 !important;
  padding: 14px !important;
}

.art-panel--image-only .panel-media {
  aspect-ratio: 4 / 3;
  margin-bottom: 0;
}

.art-panel h3 {
  font-size: clamp(23px, 2.2vw, 30px) !important;
}

.service-visual,
.calculator-preview {
  position: relative;
  overflow: hidden;
}

.service-visual::before,
.calculator-preview::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  content: "";
  pointer-events: none;
}

.service-card.tax .service-visual::before {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.9)),
    url("/assets/images/pages/tax/tax-cross-border-planning-mountains.webp");
}

.service-card.wealth .service-visual::before {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.92)),
    url("/assets/images/pages/wealth-engineering/wealth-engineering-architecture.webp");
}

.calculator-preview::before {
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(237, 245, 250, 0.82)),
    url("/assets/images/pages/cross-border/cross-border-route-map.png");
  opacity: 0.72;
}

.service-visual > *,
.calculator-preview > * {
  position: relative;
  z-index: 1;
}

.card,
.step,
.post-card,
.partner-card,
.faq-card,
.trust-card,
.use-case-card,
.compare-card,
.asset-card,
.privacy-card {
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

@media (hover: hover) {
  .post-card:hover,
  .partner-card:hover,
  .compare-card:hover,
  .use-case-card:hover,
  .service-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 22, 33, 0.18) !important;
    box-shadow: 0 22px 60px rgba(0, 22, 33, 0.09) !important;
  }
}

body[data-route="/"] .hero-visual {
  align-content: stretch !important;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.82), transparent 16rem),
    linear-gradient(135deg, #ecf5f8 0%, #d7e7ee 55%, #f7fbfd 100%) !important;
}

.hero-art-system {
  position: absolute !important;
  inset: 18px;
  z-index: 0 !important;
  display: grid;
  grid-template-columns: 1.05fr 0.78fr 0.74fr;
  grid-template-rows: 1fr 0.78fr;
  gap: 14px;
  opacity: 0.92;
}

.hero-art-system--composite {
  display: block;
  opacity: 1;
}

.hero-art-card,
.service-card-media,
.home-rhythm-figure,
.art-story-figure,
.post-card-media {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(0, 22, 33, 0.08);
  background: #edf5fa;
  box-shadow: 0 22px 58px rgba(0, 22, 33, 0.1);
}

.hero-art-card::after,
.service-card-media::after,
.home-rhythm-figure::after,
.art-story-figure::after,
.post-card-media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 22, 33, 0.08));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  content: "";
  pointer-events: none;
}

.hero-art-card img,
.service-card-media img,
.home-rhythm-figure img,
.art-story-figure img,
.post-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-art-card {
  border-radius: 28px;
}

.hero-art-card--system {
  width: 100%;
  height: 100%;
  border-radius: clamp(24px, 3vw, 36px);
}

.hero-art-card--map {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.hero-art-card--review {
  grid-column: 3;
  grid-row: 1;
}

.hero-art-card--compass {
  grid-column: 2;
  grid-row: 2;
  transform: translate(10%, -5%);
}

.hero-art-card--structure {
  grid-column: 3;
  grid-row: 2;
}

.hero-art-card--review img {
  object-position: center 36%;
}

body[data-route="/"] .hero-visual .hero-art-system {
  z-index: 0 !important;
}

body[data-route="/"] .hero-visual > :not(.hero-art-system) {
  position: relative;
  z-index: 3;
}

body[data-route="/"] .hero-visual::after {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05) 45%, rgba(0, 22, 33, 0.18)),
    radial-gradient(circle at 80% 88%, rgba(255, 255, 255, 0.78), transparent 18rem);
}

body[data-route="/"] .hero-visual::before {
  content: none !important;
}

body[data-route="/"] .hero-visual .visual-head,
body[data-route="/"] .hero-visual .layer-card,
body[data-route="/"] .hero-visual .outcome-strip span,
body[data-route="/"] .hero-visual .component-chip {
  background: rgba(255, 255, 255, 0.9) !important;
}

body[data-route="/"] .hero-visual .component-matrix {
  max-width: 84%;
}

body[data-route="/"] .hero-visual .component-chip:nth-child(n + 8) {
  display: none;
}

.service-card-media {
  aspect-ratio: 16 / 9;
  margin: -4px 0 20px;
  border-radius: 22px;
}

.service-card-media--wealth img {
  object-position: center 44%;
}

.home-image-rhythm {
  padding-top: 0 !important;
  padding-bottom: clamp(52px, 7vw, 96px) !important;
}

.home-image-rhythm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.8fr) minmax(220px, 0.8fr);
  gap: clamp(16px, 2vw, 24px);
}

.home-rhythm-figure {
  min-height: 260px;
  border-radius: clamp(24px, 3vw, 36px);
}

.home-rhythm-figure-primary {
  min-height: 360px;
}

.art-story {
  padding-top: 0 !important;
  padding-bottom: clamp(52px, 7vw, 96px) !important;
}

.art-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.8fr);
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}

.art-story-stack {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

.art-story-figure {
  min-height: 210px;
  border-radius: clamp(22px, 3vw, 34px);
}

.art-story-figure-primary {
  min-height: 452px;
}

.post-card--media {
  grid-template-rows: auto auto auto 1fr !important;
  min-height: 0 !important;
  padding: 14px !important;
}

.post-card-media {
  aspect-ratio: 16 / 9;
  margin-bottom: 14px;
  border-radius: 18px;
  box-shadow: none;
}

.post-card--media h3 {
  font-size: clamp(19px, 1.7vw, 24px) !important;
}

.compare-table {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--centry-line) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--centry-shadow-soft);
}

.compare-table th {
  background: linear-gradient(180deg, rgba(237, 245, 250, 0.92), rgba(255, 255, 255, 0.82)) !important;
  color: var(--centry-ink) !important;
  font-size: 13px;
}

.compare-table td,
.compare-table th {
  border-color: rgba(0, 22, 33, 0.08) !important;
}

.geo-direct,
.key-takeaways,
.related-links,
.article-meta-panel {
  border: 1px solid var(--centry-line) !important;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(237, 245, 250, 0.58)) !important;
  box-shadow: var(--centry-shadow-soft);
}

.faq-stack details {
  border: 1px solid var(--centry-line) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 12px 34px rgba(0, 22, 33, 0.04);
}

.final {
  position: relative;
  overflow: hidden;
}

.final::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 17, 24, 0.96), rgba(4, 17, 24, 0.72)),
    url("/assets/images/brand/coordination-arc-lines.png") right center / 58% auto no-repeat;
  content: "";
  opacity: 0.9;
  pointer-events: none;
}

.final > * {
  position: relative;
  z-index: 1;
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--centry-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
  color: var(--centry-ink);
  place-items: center;
  cursor: pointer;
}

.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  content: "";
  transition: transform 160ms ease, opacity 160ms ease;
}

.menu-toggle span::before {
  transform: translateY(-6px);
}

.menu-toggle span::after {
  transform: translateY(4.5px);
}

body.menu-open .menu-toggle span {
  background: transparent;
}

body.menu-open .menu-toggle span::before {
  transform: translateY(1px) rotate(45deg);
}

body.menu-open .menu-toggle span::after {
  transform: translateY(-0.5px) rotate(-45deg);
}

.centry-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 29;
  display: none;
  padding: 88px 16px 24px;
  overflow-y: auto;
  border: none;
  border-radius: 0;
  background: var(--centry-bg);
  box-shadow: none;
}

.site-hero {
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(74px, 9vw, 122px) 32px clamp(54px, 6vw, 82px);
  text-align: center;
}

.site-hero h1 {
  max-width: 960px;
  margin: 0 auto;
  font-size: clamp(56px, 6.4vw, 88px);
  line-height: 0.98;
  letter-spacing: 0 !important;
  text-wrap: balance;
}

.site-hero .lede,
.site-hero p {
  max-width: 730px;
  margin: 24px auto 0;
  color: var(--centry-muted) !important;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.48;
}

.site-hero .actions,
.hero-actions,
.page-actions {
  justify-content: center;
  margin-top: 28px;
}

.image-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px clamp(70px, 8vw, 112px);
}

.media-frame,
.image-panel,
.hero-media,
.visual-panel {
  overflow: hidden;
  border: 1px solid rgba(0, 22, 33, 0.08);
  border-radius: clamp(22px, 3vw, 34px);
  background: #f4f8fb;
  box-shadow: 0 30px 90px rgba(0, 22, 33, 0.09);
}

.media-frame img,
.image-panel img,
.hero-media img,
.visual-panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-media {
  min-height: 420px;
}

.hero-media img {
  aspect-ratio: 1.1 / 1;
}

.editorial-statement {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(64px, 8vw, 112px) 32px;
  text-align: center;
}

.editorial-statement h2 {
  margin: 0 auto;
  font-size: clamp(42px, 6.2vw, 86px);
  line-height: 0.98;
}

.editorial-statement p {
  max-width: 760px;
  margin: 24px auto 0;
  color: var(--centry-muted);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
}

.blue-feature {
  position: relative;
  display: grid;
  min-height: 420px;
  align-items: end;
  overflow: hidden;
  border-radius: clamp(28px, 4vw, 44px);
  background: #c4d8e9;
  box-shadow: 0 30px 90px rgba(0, 22, 33, 0.08);
}

.blue-feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
}

.blue-feature > div {
  position: relative;
  max-width: 720px;
  padding: clamp(28px, 5vw, 60px);
}

.blue-feature h2 {
  font-size: clamp(36px, 5vw, 70px);
  line-height: 1;
}

.blue-feature p {
  max-width: 600px;
  margin-top: 18px;
  color: rgba(0, 22, 33, 0.7);
  font-size: 18px;
  line-height: 1.5;
}

.split-media {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
}

.split-media.reverse {
  grid-template-columns: minmax(360px, 1.05fr) minmax(0, 0.95fr);
}

.split-media.reverse > .media-frame,
.split-media.reverse > .hero-media {
  order: -1;
}

.content-stack > * + * {
  margin-top: 18px;
}

.content-stack .actions {
  margin-top: 30px;
}

.feature-list,
.check-list {
  display: grid;
  gap: 14px;
  padding: 0;
  margin: 28px 0 0;
  list-style: none;
}

.feature-list li,
.check-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  color: var(--centry-muted);
  line-height: 1.48;
}

.feature-list li::before,
.check-list li::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--centry-green);
  box-shadow: 0 0 0 8px rgba(67, 138, 104, 0.11);
}

.service-grid,
.audience-grid,
.process-grid,
.proof-grid,
.insight-grid {
  display: grid;
  gap: 18px;
  margin-top: 34px;
}

.service-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.audience-grid,
.proof-grid,
.insight-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.process-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.service-card,
.audience-card,
.process-card,
.proof-card,
.legal-card {
  min-height: 178px;
  padding: clamp(20px, 2.5vw, 28px);
  border: 1px solid var(--centry-line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 16px 44px rgba(0, 22, 33, 0.05);
}

.service-card span,
.audience-card span,
.process-card span,
.proof-card span,
.legal-card span {
  display: block;
  margin-bottom: 14px;
  color: var(--centry-blue);
  font-family: var(--font-mono, "SF Mono", ui-monospace, Menlo, monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.service-card h3,
.audience-card h3,
.process-card h3,
.proof-card h3,
.legal-card h3 {
  font-size: clamp(21px, 2vw, 26px);
}

.service-card p,
.audience-card p,
.process-card p,
.proof-card p,
.legal-card p {
  margin-top: 12px;
  color: var(--centry-muted);
  font-size: 15px;
  line-height: 1.48;
}

.page-band {
  margin-top: clamp(46px, 7vw, 84px);
  padding: clamp(30px, 5vw, 58px);
  border-radius: clamp(26px, 4vw, 42px);
  background: linear-gradient(135deg, #f7fbfd, #edf5fa);
  border: 1px solid rgba(0, 22, 33, 0.08);
}

.dark-cta,
.final {
  border-radius: clamp(28px, 4vw, 42px) !important;
  background:
    radial-gradient(circle at 82% 12%, rgba(67, 138, 104, 0.34), transparent 19rem),
    linear-gradient(145deg, #041118, #071f2b 58%, #031018) !important;
  color: #fff !important;
}

.dark-cta h2,
.dark-cta h3,
.final h2,
.final h3 {
  color: #fff !important;
}

.dark-cta p,
.final p,
.final .lede {
  color: rgba(255, 255, 255, 0.68) !important;
}

.dark-cta .secondary {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}

.article {
  max-width: 820px !important;
}

.article blockquote {
  border-left-color: var(--centry-green) !important;
  background: #f7fbfd !important;
  border-radius: 0 18px 18px 0;
}

.article-meta-panel {
  background: linear-gradient(135deg, #f7fbfd, #edf5fa) !important;
}

.note,
.legal-note {
  color: var(--centry-muted);
  font-size: 14px;
  line-height: 1.55;
}

.cookie-banner {
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 60 !important;
  display: grid !important;
  max-width: min(420px, calc(100vw - 36px)) !important;
  gap: 14px !important;
  padding: 18px !important;
  border: 1px solid var(--centry-line) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: var(--centry-shadow) !important;
}

.cookie-banner[hidden] {
  display: none !important;
}

.cookie-banner p {
  color: var(--centry-muted) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.cookie-accept {
  min-height: 40px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  background: var(--centry-ink) !important;
  color: #fff !important;
  cursor: pointer !important;
}

.centry-mobile-menu-inner {
  display: grid;
  gap: 8px;
}

.centry-mobile-menu a {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--centry-ink);
  font-size: 15px;
}

.centry-mobile-menu a:hover {
  border-color: var(--centry-line);
  background: var(--centry-bg-soft);
}

.centry-mobile-menu a.cta {
  justify-content: center;
  margin-top: 6px;
}

body.menu-open .centry-mobile-menu {
  display: block;
}

@media (max-width: 1100px) {
  .nav-inner {
    grid-template-columns: auto 1fr auto !important;
  }

  .links,
  .nav-actions,
  .nav-login,
  .nav-inner > .cta {
    display: none !important;
  }

  .menu-toggle {
    display: grid !important;
    justify-self: end;
  }
}

@media (max-width: 980px) {
  body[data-route="/"] .hero {
    align-items: start;
  }

  body[data-route="/"] .hero-visual {
    min-height: 460px !important;
  }

  .hero-art-system {
    grid-template-columns: 1fr 0.82fr;
    grid-template-rows: 1fr 0.74fr;
  }

  .hero-art-card--map {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }

  .hero-art-card--review {
    grid-column: 1;
    grid-row: 2;
  }

  .hero-art-card--compass {
    grid-column: 2;
    grid-row: 2;
    transform: none;
  }

  .hero-art-card--structure {
    display: none;
  }

  .home-image-rhythm-grid,
  .art-story-grid {
    grid-template-columns: 1fr;
  }

  .art-story-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split-media,
  .split-media.reverse {
    grid-template-columns: 1fr;
  }

  .split-media.reverse > .media-frame,
  .split-media.reverse > .hero-media {
    order: 0;
  }

  .service-grid,
  .audience-grid,
  .proof-grid,
  .insight-grid,
  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .nav-inner,
  .section,
  .footer-inner,
  .footer-bottom {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .brand,
  .brand svg,
  .brand img,
  .footer-logo svg,
  .footer-logo img {
    max-width: 188px !important;
    height: auto !important;
  }

  h1 {
    font-size: clamp(40px, 11vw, 58px) !important;
    line-height: 1.02 !important;
  }

  h2 {
    font-size: clamp(30px, 9vw, 42px) !important;
    line-height: 1.08 !important;
  }

  .hero-copy,
  .section-lede,
  .lede {
    font-size: 18px !important;
  }

  body[data-route="/"] .hero-visual {
    display: grid !important;
    min-height: 420px !important;
    padding: 18px !important;
    border-radius: 28px !important;
  }

  .hero-art-system {
    inset: 12px;
    grid-template-columns: 1fr 0.72fr;
    gap: 10px;
  }

  .hero-art-card {
    border-radius: 20px;
  }

  body[data-route="/"] .hero-visual .component-matrix,
  body[data-route="/"] .hero-visual .outcome-strip {
    display: none !important;
  }

  body[data-route="/"] .hero-visual .visual-head {
    margin-bottom: auto;
  }

  body[data-route="/"] .hero-visual .layer-card {
    max-width: none;
  }

  .art-panel {
    padding: 12px 14px 20px !important;
  }

  .panel-media,
  .panel-media--founder-horizon,
  .panel-media--ai-dashboard,
  .panel-media--wealth-review {
    aspect-ratio: 16 / 10;
    margin-bottom: 18px;
    border-radius: 18px;
  }

  .service-card-media {
    aspect-ratio: 16 / 10;
    margin-bottom: 16px;
    border-radius: 18px;
  }

  .home-image-rhythm,
  .art-story {
    padding-bottom: 42px !important;
  }

  .home-image-rhythm-grid,
  .art-story-grid,
  .art-story-stack {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .home-rhythm-figure,
  .home-rhythm-figure-primary,
  .art-story-figure,
  .art-story-figure-primary {
    min-height: 0;
    aspect-ratio: 16 / 10;
    border-radius: 20px;
  }

  .post-card-media {
    aspect-ratio: 16 / 10;
    border-radius: 16px;
  }

  .compare-table {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
    border: 0 !important;
  }

  .compare-table thead {
    display: none !important;
  }

  .compare-table tbody {
    display: grid !important;
    width: 100% !important;
    gap: 14px;
  }

  .compare-table tr {
    display: grid !important;
    width: 100% !important;
    overflow: hidden;
    border: 1px solid var(--centry-line) !important;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: var(--centry-shadow-soft);
  }

  .compare-table th,
  .compare-table td {
    display: block !important;
    width: 100% !important;
    padding: 14px 16px !important;
    border: 0 !important;
    text-align: left !important;
  }

  .compare-table td + td {
    border-top: 1px solid var(--centry-line) !important;
  }

  .compare-table td:first-child {
    color: var(--centry-ink);
    font-weight: 600;
  }

  .compare-table td:nth-child(2)::before,
  .compare-table td:nth-child(3)::before {
    display: block;
    margin-bottom: 6px;
    color: var(--centry-blue);
    font-family: var(--font-mono, "SF Mono", ui-monospace, Menlo, monospace);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .compare-table td:nth-child(2)::before {
    content: "Often best for";
  }

  .compare-table td:nth-child(3)::before {
    content: "Where Centry fits";
  }

  .footer-bottom {
    flex-direction: column;
  }

  .site-hero {
    padding: 70px 20px 54px;
  }

  .site-hero h1 {
    font-size: clamp(42px, 12vw, 58px) !important;
  }

  .image-section {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero-media {
    min-height: 280px;
  }

  .blue-feature {
    min-height: 390px;
  }

  .service-grid,
  .audience-grid,
  .proof-grid,
  .insight-grid,
  .process-grid {
    grid-template-columns: 1fr;
  }
}

/* Component polish pass: tighter system spacing, streamlined FAQs, cleaner details. */
:root {
  --component-section-gap: clamp(62px, 6.8vw, 108px);
  --component-section-gap-compact: clamp(42px, 4.8vw, 72px);
  --component-band-gap: clamp(70px, 7.4vw, 118px);
  --component-card-gap: clamp(18px, 2vw, 28px);
  --component-card-pad: clamp(22px, 2.2vw, 30px);
  --component-card-pad-compact: clamp(18px, 1.8vw, 24px);
  --component-panel-pad: clamp(28px, 3vw, 42px);
  --component-faq-pad-y: clamp(15px, 1.35vw, 19px);
  --component-faq-pad-x: clamp(18px, 1.9vw, 24px);
}

main > .section + .section {
  margin-top: var(--component-section-gap) !important;
}

main > .hero + .section {
  margin-top: clamp(58px, 6.2vw, 96px) !important;
}

body[data-route^="/legal/"] main > .section + .section,
body[data-route^="/legal/"] .legal-card + .legal-card {
  margin-top: var(--component-section-gap-compact) !important;
}

body:not([data-route^="/legal/"]) main > .section:nth-of-type(3n + 2):not(.hero):not(.tech):not(.final):not(.final-cta),
body:not([data-route^="/legal/"]) main > .section:nth-of-type(3n + 4):not(.hero):not(.tech):not(.final):not(.final-cta),
.tech,
.final,
.final-cta,
.cta-panel {
  margin-top: var(--component-band-gap) !important;
  margin-bottom: var(--component-band-gap) !important;
}

.page main + .site-footer,
body > .site-footer {
  margin-top: clamp(60px, 7vw, 104px) !important;
}

.grid,
.cards,
.steps,
.card-grid,
.trust-grid,
.security-grid,
.profiles,
.topic-clusters,
.faq-stack {
  gap: var(--component-card-gap) !important;
  margin-top: clamp(28px, 3.4vw, 48px) !important;
}

.card,
.step,
.post-card,
.partner-card,
.trust-card,
.team-card,
.service-card,
.audience-card,
.process-card,
.proof-card,
.compare-card,
.legal-card {
  min-height: 0 !important;
  padding: var(--component-card-pad) !important;
  border-radius: clamp(18px, 2vw, 24px) !important;
}

.card span,
.step span,
.post-card span,
.partner-card span,
.trust-card span,
.team-card span,
.service-card span,
.audience-card span,
.process-card span,
.proof-card span,
.compare-card span,
.legal-card span {
  margin-bottom: 10px !important;
}

.card p,
.step p,
.post-card p,
.partner-card p,
.trust-card p,
.team-card p,
.service-card p,
.audience-card p,
.process-card p,
.proof-card p,
.compare-card p,
.legal-card p {
  margin-top: 10px !important;
  line-height: 1.55 !important;
}

body[data-route="/tax/"] .luxury-grid-primary .card > span:first-child,
body[data-route="/tax/"] .luxury-grid-secondary .card > span:first-child,
body[data-route="/wealth/"] .luxury-grid-primary .card > span:first-child,
body[data-route="/wealth/"] .luxury-grid-secondary .card > span:first-child {
  display: none !important;
}

.luxury-disclosure,
.service-scope {
  margin-top: clamp(20px, 2.3vw, 30px) !important;
  overflow: hidden;
  border: 1px solid var(--centry-line, var(--line)) !important;
  border-radius: 18px !important;
  background: color-mix(in oklch, white 82%, var(--paper-warm, var(--bg))) !important;
}

.luxury-disclosure summary,
.service-scope summary {
  min-height: 48px !important;
  padding: 0 clamp(18px, 2vw, 24px) !important;
  align-items: center !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
}

.luxury-disclosure[open] summary,
.service-scope[open] summary {
  border-bottom: 1px solid var(--centry-line, var(--line));
}

.luxury-disclosure summary::after,
.service-scope summary::after {
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
}

.luxury-grid-secondary,
.service-scope .service-list {
  box-sizing: border-box;
  width: 100%;
  margin-top: 0 !important;
  padding: clamp(18px, 2vw, 24px) !important;
  gap: clamp(14px, 1.8vw, 22px) !important;
}

.luxury-grid-secondary .card,
.luxury-grid-secondary .step,
.service-scope .service-list li,
.service-scope .service-list .card {
  padding: var(--component-card-pad-compact) !important;
}

.faq-stack,
.faqs {
  display: grid !important;
  gap: 10px !important;
  margin-top: clamp(24px, 3vw, 40px) !important;
}

.faq-stack details,
.faqs details {
  overflow: hidden;
  padding: 0 !important;
  border: 1px solid var(--centry-line, var(--line)) !important;
  border-radius: 16px !important;
  background: color-mix(in oklch, white 86%, var(--paper-warm, var(--bg))) !important;
  box-shadow: none !important;
}

.faq-stack summary,
.faqs summary {
  min-height: 54px !important;
  padding: var(--component-faq-pad-y) var(--component-faq-pad-x) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  font-size: clamp(16px, 1.2vw, 18px) !important;
  line-height: 1.34 !important;
  cursor: pointer;
  list-style: none;
}

.faq-stack summary::-webkit-details-marker,
.faqs summary::-webkit-details-marker {
  display: none;
}

.faq-stack summary::after,
.faqs summary::after {
  content: "+";
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border: 1px solid var(--centry-line, var(--line));
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: var(--centry-muted, var(--muted));
  font-size: 17px;
  line-height: 1;
}

.faq-stack details[open] summary::after,
.faqs details[open] summary::after {
  content: "-";
}

.faq-stack p,
.faqs p,
.faq-stack .faq-content p,
.faqs .faq-content p {
  max-width: 780px;
  margin: 0 !important;
  padding: 0 var(--component-faq-pad-x) var(--component-faq-pad-y) !important;
  font-size: 15.5px !important;
  line-height: 1.58 !important;
}

body[data-route="/faq/"] .faq-stack details {
  border-radius: 18px !important;
}

body[data-route="/faq/"] .faq-stack summary {
  min-height: 60px !important;
  font-size: clamp(17px, 1.35vw, 19px) !important;
}

body[data-route="/faq/"] .faq-stack p,
body[data-route="/faq/"] .faq-stack .faq-content p {
  font-size: 16px !important;
}

.geo-direct,
.key-takeaways,
.related-links,
.article-meta-panel {
  margin: clamp(28px, 3.6vw, 48px) 0 !important;
  padding: var(--component-panel-pad) !important;
  border-radius: clamp(20px, 2.2vw, 26px) !important;
}

.geo-direct > :first-child,
.key-takeaways > :first-child,
.related-links > :first-child,
.article-meta-panel > :first-child,
.cta-panel > :first-child,
.final > :first-child,
.final-cta > :first-child {
  margin-top: 0 !important;
}

.key-takeaways h2,
.related-links h2,
.article-meta-panel h2 {
  margin-bottom: 14px !important;
}

.key-takeaways ul,
.related-links ul,
.article-meta-panel ul,
.link-list {
  margin-top: 12px !important;
}

.related-links .link-list {
  gap: 10px !important;
}

.final,
.final-cta,
.cta-panel {
  padding-top: clamp(58px, 6vw, 90px) !important;
  padding-bottom: clamp(58px, 6vw, 90px) !important;
}

.final .actions,
.final-cta .actions,
.cta-panel .actions {
  margin-top: clamp(24px, 3vw, 36px) !important;
}

@media (max-width: 780px) {
  :root {
    --component-section-gap: clamp(46px, 10vw, 66px);
    --component-section-gap-compact: clamp(34px, 8vw, 52px);
    --component-band-gap: clamp(52px, 11vw, 76px);
    --component-card-gap: 14px;
    --component-card-pad: clamp(18px, 5.6vw, 24px);
    --component-card-pad-compact: clamp(16px, 4.8vw, 20px);
    --component-panel-pad: clamp(20px, 6vw, 28px);
    --component-faq-pad-y: 14px;
    --component-faq-pad-x: 17px;
  }

  .luxury-disclosure summary,
  .service-scope summary,
  .faq-stack summary,
  .faqs summary {
    min-height: 50px !important;
  }

  .faq-stack p,
  .faqs p,
  .faq-stack .faq-content p,
  .faqs .faq-content p {
    font-size: 15px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Publish-readiness cleanup: fewer visual motifs, stronger contrast, tighter rhythm. */
html {
  scroll-padding-top: 104px;
}

.section[id],
.site-hero[id] {
  scroll-margin-top: 104px;
}

.nav {
  z-index: 100 !important;
  box-shadow: 0 1px 0 rgba(0, 22, 33, 0.04) !important;
}

.section {
  padding-top: clamp(54px, 6vw, 88px) !important;
  padding-bottom: clamp(54px, 6vw, 88px) !important;
}

main > .section:first-child,
main > .site-hero:first-child {
  padding-top: clamp(72px, 7vw, 102px) !important;
}

.section-head {
  gap: clamp(22px, 4vw, 54px) !important;
}

.card-grid,
.steps,
.trust-grid,
.profiles,
.service-cards,
.security-grid,
.tech-grid {
  gap: 14px !important;
}

.card,
.step,
.post-card,
.partner-card,
.faq-card,
.trust-card,
.use-case-card,
.compare-card,
.asset-card,
.privacy-card,
.service-card,
.security-card,
.tech-card {
  border-radius: 20px !important;
  box-shadow: 0 10px 32px rgba(0, 22, 33, 0.045) !important;
}

.step,
.card,
.trust-card,
.profile {
  min-height: 0 !important;
  padding: clamp(20px, 2vw, 24px) !important;
}

@media (hover: hover) {
  .post-card:hover,
  .partner-card:hover,
  .compare-card:hover,
  .use-case-card:hover,
  .service-card:hover {
    transform: none !important;
    box-shadow: 0 14px 40px rgba(0, 22, 33, 0.06) !important;
  }
}

body[data-route="/"] .hero {
  gap: clamp(34px, 4vw, 58px) !important;
}

body[data-route="/"] .hero-proof,
body[data-route="/"] .hero-visual .component-matrix,
body[data-route="/"] .hero-visual .outcome-strip,
body[data-route="/"] .hero-visual .layer-card {
  display: none !important;
}

body[data-route="/"] .hero-visual {
  min-height: clamp(430px, 34vw, 540px) !important;
  padding: clamp(20px, 2.4vw, 28px) !important;
  border-radius: clamp(24px, 3vw, 34px) !important;
  box-shadow: 0 28px 82px rgba(0, 22, 33, 0.1) !important;
}

body[data-route="/"] .hero-visual::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.08) 48%, rgba(0, 22, 33, 0.14)),
    radial-gradient(circle at 76% 82%, rgba(255, 255, 255, 0.78), transparent 15rem) !important;
}

body[data-route="/"] .hero-visual .hero-art-card--system img {
  filter: saturate(0.8) contrast(0.95);
  opacity: 0.82;
}

body[data-route="/"] .hero-visual .visual-head {
  max-width: min(440px, 90%) !important;
  padding: 18px 20px !important;
  border-radius: 18px !important;
}

body[data-route="/"] .hero-visual .visual-head h3 {
  font-size: clamp(28px, 3vw, 40px) !important;
  line-height: 1.02 !important;
}

body[data-route="/"] .hero-visual .layer-card {
  max-width: min(390px, 92%) !important;
  margin-top: auto !important;
  padding: 22px !important;
  border-radius: 20px !important;
}

body[data-route="/"] .hero-visual .layer-card h4 {
  font-size: clamp(28px, 3.4vw, 42px) !important;
  line-height: 1.02 !important;
}

.service-card-media,
.home-image-rhythm,
.art-story {
  display: none !important;
}

.service-card {
  min-height: 0 !important;
  padding: clamp(26px, 3vw, 34px) !important;
}

.service-card::before {
  opacity: 0.42 !important;
}

.service-inner {
  gap: 16px !important;
}

.service-visual {
  display: none !important;
}

.service-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 22px !important;
}

.service-list li {
  min-height: 42px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.64) !important;
  color: rgba(0, 22, 33, 0.72) !important;
}

.service-bridge,
.calculator-panel,
.compare,
.security,
.cta-panel {
  box-shadow: 0 18px 56px rgba(0, 22, 33, 0.06) !important;
}

.calculator-preview {
  min-height: 0 !important;
  opacity: 0.9;
}

.tech {
  padding: clamp(46px, 5vw, 70px) clamp(26px, 4vw, 44px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: clamp(24px, 3vw, 32px) !important;
  background:
    radial-gradient(circle at 82% 12%, rgba(67, 138, 104, 0.12), transparent 18rem),
    #06141c !important;
  color: #fff !important;
}

.tech::before {
  opacity: 0.16 !important;
}

.tech h2,
.tech h3 {
  color: #ffffff !important;
}

.tech .kicker,
.cta-panel .kicker {
  color: rgba(174, 215, 232, 0.92) !important;
}

.tech .section-lede,
.tech p {
  color: rgba(255, 255, 255, 0.76) !important;
}

.tech-card {
  min-height: 220px !important;
  padding: 22px !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
  background: rgba(255, 255, 255, 0.075) !important;
  box-shadow: none !important;
}

.tech-card p {
  color: rgba(255, 255, 255, 0.72) !important;
}

.tech-shape {
  height: 62px !important;
  margin-bottom: 18px !important;
  opacity: 0.82;
}

.security {
  padding: clamp(42px, 5vw, 64px) clamp(24px, 4vw, 40px) !important;
  border-radius: clamp(24px, 3vw, 32px) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 253, 0.9)) !important;
}

.security::before {
  opacity: 0.18 !important;
  mask-image: linear-gradient(180deg, black, transparent 78%) !important;
}

.security-card {
  min-height: 0 !important;
  grid-template-rows: auto auto !important;
  gap: 12px !important;
  padding: 24px !important;
  background: rgba(255, 255, 255, 0.74) !important;
}

.security-visual {
  display: none !important;
}

.security-card h3 {
  min-height: 0 !important;
}

.faq-wrap {
  padding-top: clamp(58px, 7vw, 96px) !important;
  padding-bottom: clamp(68px, 7vw, 104px) !important;
}

.faq-wrap h2 {
  max-width: 520px;
}

.faqs details,
details {
  box-shadow: 0 8px 24px rgba(0, 22, 33, 0.035) !important;
}

.final-cta {
  padding-top: clamp(42px, 6vw, 74px) !important;
  padding-bottom: clamp(46px, 6vw, 72px) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.final-cta::before {
  display: none !important;
}

.cta-panel {
  min-height: 0 !important;
  padding: clamp(38px, 5vw, 60px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: clamp(24px, 3vw, 32px) !important;
  background:
    radial-gradient(circle at 78% 18%, rgba(67, 138, 104, 0.14), transparent 18rem),
    linear-gradient(145deg, #06141c, #081b24 58%, #041118) !important;
  color: #fff !important;
}

.cta-panel h2 {
  max-width: 760px !important;
  color: #ffffff !important;
}

.cta-panel p {
  color: rgba(255, 255, 255, 0.78) !important;
}

.cta-panel .login {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
}

.site-footer {
  margin-top: 0 !important;
  background:
    radial-gradient(circle at 86% 10%, rgba(67, 138, 104, 0.2), transparent 22rem),
    linear-gradient(145deg, #06141c, #071a22 58%, #041118) !important;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.82) !important;
}

.site-footer a:hover {
  color: #ffffff !important;
}

.site-footer .footer-brand p,
.site-footer .footer-bottom {
  color: rgba(255, 255, 255, 0.64) !important;
}

.footer-inner {
  padding-top: 44px !important;
}

.cookie-banner {
  right: 22px !important;
  left: auto !important;
  bottom: 22px !important;
  z-index: 80 !important;
  width: min(360px, calc(100vw - 44px)) !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  padding: 14px 14px 14px 16px !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 44px rgba(0, 22, 33, 0.12) !important;
}

.cookie-banner p {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

.cookie-accept {
  min-height: 36px !important;
  padding: 0 14px !important;
}

@media (max-width: 980px) {
  .section {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  body[data-route="/"] .hero-visual {
    min-height: 390px !important;
  }

  .service-list {
    grid-template-columns: 1fr !important;
  }

  .tech-grid,
  .security-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  html {
    scroll-padding-top: 84px;
  }

  .section[id],
  .site-hero[id] {
    scroll-margin-top: 84px;
  }

  main > .section:first-child,
  main > .site-hero:first-child {
    padding-top: 52px !important;
  }

  body[data-route="/"] .hero {
    gap: 26px !important;
  }

  body[data-route="/"] .hero-visual {
    min-height: 320px !important;
    padding: 16px !important;
  }

  body[data-route="/"] .hero-visual .visual-head {
    padding: 14px 16px !important;
  }

  body[data-route="/"] .hero-visual .layer-card {
    display: none !important;
  }

  .service-card,
  .tech,
  .security,
  .cta-panel {
    border-radius: 24px !important;
  }

  .tech-card {
    min-height: 0 !important;
  }

  .faq-wrap {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .cookie-banner {
    right: 14px !important;
    left: 14px !important;
    bottom: 14px !important;
    width: auto !important;
    grid-template-columns: 1fr !important;
  }
}

/* Non-homepage design excellence pass: keep the staging copy, remove template noise. */
body:not([data-route="/"]) .hero {
  align-items: start !important;
  gap: clamp(30px, 4vw, 58px) !important;
}

body:not([data-route="/"]) main > .section:first-child,
body:not([data-route="/"]) main > .site-hero:first-child {
  padding-top: clamp(52px, 5vw, 84px) !important;
  padding-bottom: clamp(50px, 5vw, 78px) !important;
}

body:not([data-route="/"]) .hero > div:first-child {
  min-width: 0;
}

body:not([data-route="/"]) .hero h1 {
  max-width: 780px;
  line-height: 1.04 !important;
}

body:not([data-route="/"]) .hero .lede {
  max-width: 680px;
}

body:not([data-route="/"]) .art-panel {
  align-self: start;
  min-height: 0 !important;
  padding: clamp(26px, 3vw, 38px) !important;
  border: 1px solid rgba(0, 22, 33, 0.08) !important;
  border-radius: clamp(22px, 2.8vw, 30px) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(247, 251, 253, 0.82)),
    radial-gradient(circle at 88% 8%, rgba(67, 138, 104, 0.12), transparent 17rem),
    radial-gradient(circle at 8% 100%, rgba(61, 135, 165, 0.10), transparent 15rem) !important;
  box-shadow: 0 18px 50px rgba(0, 22, 33, 0.06) !important;
}

body:not([data-route="/"]) .art-panel .panel-media {
  display: none !important;
}

body[data-route^="/insights/"] .art-panel {
  padding: 14px 16px 28px !important;
}

body[data-route^="/insights/"] .art-panel .panel-media {
  display: block !important;
  aspect-ratio: 16 / 9;
  margin: 0 0 22px !important;
  border-radius: 18px;
}

body[data-route^="/insights/"] .art-panel h3 {
  margin-top: 18px;
}

body:not([data-route="/"]) .art-panel .status {
  border-color: rgba(0, 22, 33, 0.09) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: rgba(0, 22, 33, 0.64) !important;
}

body:not([data-route="/"]) .art-panel h3 {
  max-width: 560px;
  margin-top: clamp(20px, 2.8vw, 34px);
  color: var(--centry-ink) !important;
  font-size: clamp(24px, 2.35vw, 34px) !important;
  line-height: 1.08 !important;
}

body:not([data-route="/"]) .art-panel .badge-row {
  gap: 8px !important;
  margin-top: clamp(22px, 3vw, 34px) !important;
}

body:not([data-route="/"]) .art-panel .badge {
  min-height: 34px;
  border-color: rgba(0, 22, 33, 0.08) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  color: rgba(0, 22, 33, 0.7) !important;
}

.grid,
.grid.two,
.grid.three,
.grid.four,
.service-list,
.post-grid,
.related-grid {
  align-items: stretch;
}

.grid > *,
.service-list > *,
.post-grid > *,
.related-grid > * {
  min-width: 0;
}

.card,
.step,
.partner-card,
.trust-card,
.profile,
.post-card,
.security-card,
.tech-card {
  min-width: 0;
}

.compare-table {
  table-layout: fixed !important;
}

.compare-table th:first-child,
.compare-table td:first-child {
  width: 24%;
}

.article,
.article * {
  min-width: 0;
}

.article {
  overflow-wrap: break-word;
}

.article a,
.link-list a {
  overflow-wrap: anywhere;
}

.article ul,
.article ol {
  padding-left: 1.15rem;
}

body[data-route^="/legal/"] .article,
body[data-route^="/legal/"] .article * {
  overflow-wrap: anywhere;
}

.post-card-media {
  filter: saturate(0.78) contrast(0.96);
  opacity: 0.9;
}

@media (max-width: 980px) {
  body:not([data-route="/"]) .hero {
    grid-template-columns: 1fr !important;
  }

  body:not([data-route="/"]) .art-panel {
    width: 100%;
    max-width: 640px;
  }

  .grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  body:not([data-route="/"]) main > .section:first-child,
  body:not([data-route="/"]) main > .site-hero:first-child {
    padding-top: 44px !important;
    padding-bottom: 42px !important;
  }

  body:not([data-route="/"]) .hero {
    gap: 24px !important;
  }

  body:not([data-route="/"]) .hero h1 {
    line-height: 1.02 !important;
  }

  body:not([data-route="/"]) .art-panel {
    padding: 22px !important;
    border-radius: 22px !important;
  }

  body:not([data-route="/"]) .art-panel h3 {
    margin-top: 18px;
    font-size: clamp(22px, 8vw, 30px) !important;
  }

  body:not([data-route="/"]) .actions {
    gap: 10px !important;
  }

  body:not([data-route="/"]) .actions .cta,
  body:not([data-route="/"]) .actions .secondary,
  body:not([data-route="/"]) .actions .login {
    width: 100%;
    justify-content: center;
  }

  .grid.four {
    grid-template-columns: 1fr !important;
  }

  .article ul,
  .article ol {
    padding-left: 1rem;
  }
}

/* Luxury spacing and density pass.
   Copy remains in the HTML; secondary detail is visually demoted or exposed
   through native disclosure controls so the experience feels calmer. */
:root {
  --luxury-section-y: clamp(92px, 9vw, 136px);
  --luxury-section-y-compact: clamp(70px, 7vw, 104px);
  --luxury-hero-y: clamp(92px, 10vw, 150px);
  --luxury-gap: clamp(24px, 3vw, 38px);
  --luxury-card-pad: clamp(24px, 2.8vw, 34px);
}

html {
  scroll-padding-top: 104px;
}

.section {
  padding-top: var(--luxury-section-y) !important;
  padding-bottom: var(--luxury-section-y) !important;
}

main > .section:first-child,
main > .site-hero:first-child {
  padding-top: var(--luxury-hero-y) !important;
  padding-bottom: var(--luxury-section-y-compact) !important;
}

body[data-route="/"] .hero {
  min-height: calc(100svh - 76px);
  padding-top: clamp(84px, 9vw, 132px) !important;
  padding-bottom: clamp(88px, 10vw, 142px) !important;
}

body[data-route="/"] .hero h1 {
  max-width: 760px;
}

body[data-route="/"] .hero-copy {
  max-width: 640px;
  margin-top: 28px !important;
  line-height: 1.56 !important;
}

body[data-route="/"] .hero-proof,
body[data-route="/"] .hero-visual .component-matrix,
body[data-route="/"] .hero-visual .outcome-strip,
body[data-route="/"] .hero-visual .visual-head {
  display: none !important;
}

body[data-route="/"] .hero-visual {
  min-height: clamp(500px, 38vw, 620px) !important;
  padding: clamp(24px, 3vw, 40px) !important;
}

body[data-route="/"] .hero-visual .layer-card {
  max-width: 390px;
  align-self: end;
  margin-top: auto;
}

.kicker {
  margin-bottom: clamp(16px, 2vw, 24px) !important;
}

.section-head {
  gap: clamp(34px, 6vw, 86px) !important;
  margin-bottom: clamp(42px, 5vw, 72px) !important;
  align-items: end !important;
}

.section-head .section-lede,
.section-lede,
.lede {
  max-width: 650px !important;
  line-height: 1.58 !important;
}

h1,
h2 {
  text-wrap: balance;
}

h2 + .body-copy,
.body-copy {
  max-width: 720px;
  line-height: 1.68 !important;
}

.actions {
  margin-top: clamp(30px, 3.8vw, 48px) !important;
}

.grid,
.cards,
.steps,
.card-grid,
.trust-grid,
.security-grid,
.profiles,
.topic-clusters,
.faq-stack {
  gap: var(--luxury-gap) !important;
  margin-top: clamp(38px, 4.5vw, 64px) !important;
}

.grid.two,
.grid.three,
.grid.four {
  align-items: stretch;
}

.card,
.step,
.post-card,
.partner-card,
.faq-card,
.trust-card,
.use-case-card,
.compare-card,
.asset-card,
.privacy-card,
.profile,
.security-card,
.tech-card,
.team-card,
.topic-cluster,
.legal-card {
  min-height: 0 !important;
  padding: var(--luxury-card-pad) !important;
  border-radius: clamp(20px, 2.4vw, 30px) !important;
  box-shadow: 0 18px 58px rgba(0, 22, 33, 0.045) !important;
}

.card p,
.step p,
.post-card p,
.partner-card p,
.trust-card p,
.security-card p,
.tech-card p,
.profile p,
.team-card p,
.topic-cluster p {
  margin-top: 16px !important;
  font-size: 15.5px !important;
  line-height: 1.62 !important;
}

.card span,
.step span,
.post-card span,
.partner-card span,
.trust-card span,
.team-card span,
.profile span {
  margin-bottom: 18px !important;
}

.luxury-disclosure,
.service-scope {
  margin-top: clamp(24px, 3vw, 38px);
  border-top: 1px solid rgba(0, 22, 33, 0.1);
}

.luxury-disclosure summary,
.service-scope summary {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  color: var(--centry-ink);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.01em;
  list-style: none;
}

.luxury-disclosure summary::-webkit-details-marker,
.service-scope summary::-webkit-details-marker {
  display: none;
}

.luxury-disclosure summary::after,
.service-scope summary::after {
  width: 32px;
  height: 32px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--centry-line);
  border-radius: 50%;
  color: var(--centry-muted);
  content: "+";
  font-size: 18px;
  line-height: 1;
}

.luxury-disclosure[open] summary::after,
.service-scope[open] summary::after {
  content: "-";
}

.luxury-grid-secondary,
.service-scope .service-list {
  margin-top: clamp(18px, 2.4vw, 30px) !important;
}

body[data-route="/"] .service-visual {
  display: none !important;
}

body[data-route="/"] .service-card {
  padding: clamp(28px, 4vw, 46px) !important;
}

body[data-route="/"] .service-copy {
  max-width: 560px;
  line-height: 1.62 !important;
}

body[data-route="/"] .service-bridge {
  margin-top: clamp(38px, 5vw, 70px) !important;
}
body[data-route="/"] .flow-connector + .service-bridge {
  margin-top: -6px !important;
}

.questions {
  gap: 14px !important;
}

.question {
  min-height: 0 !important;
  padding: 16px 20px !important;
  box-shadow: none !important;
}

body:not([data-route="/"]) .hero {
  gap: clamp(42px, 6vw, 92px) !important;
}

body:not([data-route="/"]) .hero .actions .secondary[href="/"] {
  display: none !important;
}

body:not([data-route="/"]) .art-panel {
  max-width: 420px;
  padding: clamp(28px, 3vw, 40px) !important;
  align-content: center;
}

body:not([data-route="/"]) .art-panel .badge-row {
  display: none !important;
}

body[data-route^="/insights/"] .art-panel {
  padding: 14px 16px 30px !important;
}

body[data-route^="/insights/"] .art-panel .panel-media {
  margin-bottom: 26px !important;
}

.geo-direct,
.key-takeaways,
.related-links,
.article-meta-panel {
  margin: clamp(32px, 4vw, 56px) 0 !important;
  padding: clamp(26px, 3vw, 40px) !important;
  border-radius: clamp(22px, 2.6vw, 32px) !important;
}

.article {
  max-width: 760px !important;
}

.article h2 {
  margin-top: clamp(64px, 7vw, 96px) !important;
  margin-bottom: 22px !important;
}

.article h3 {
  margin-top: 42px !important;
}

.article p,
.article li {
  font-size: clamp(17px, 1.5vw, 18px) !important;
  line-height: 1.76 !important;
}

.article p + p {
  margin-top: 24px !important;
}

.article ul,
.article ol {
  margin-top: 22px !important;
}

.compare-table {
  margin-top: clamp(34px, 4vw, 56px) !important;
  border-radius: 28px !important;
}

.compare-table th,
.compare-table td {
  padding: clamp(20px, 2.4vw, 30px) !important;
  line-height: 1.62 !important;
}

body[data-route="/insights/"] .grid.three {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.post-card--media {
  padding: 18px !important;
}

.post-card-media {
  margin-bottom: 22px !important;
}

.post-card h3 {
  max-width: 95%;
}

.topic-cluster ul {
  margin-top: 22px !important;
  gap: 12px !important;
}

.faq-stack details,
.faqs details {
  padding: clamp(22px, 2.6vw, 30px) clamp(22px, 3vw, 34px) !important;
}

.faq-stack summary,
.faqs summary {
  line-height: 1.4 !important;
}

.faq-stack p,
.faqs p {
  max-width: 780px;
  line-height: 1.68 !important;
}

.final,
.dark-cta,
.cta-panel {
  padding-top: clamp(76px, 8vw, 118px) !important;
  padding-bottom: clamp(76px, 8vw, 118px) !important;
}

.final h2,
.cta-panel h2 {
  max-width: 760px;
}

.site-footer {
  margin-top: clamp(38px, 5vw, 72px);
}

.footer-inner {
  gap: clamp(28px, 4vw, 56px) !important;
  padding-top: clamp(58px, 7vw, 92px) !important;
  padding-bottom: clamp(48px, 6vw, 74px) !important;
}

body[data-route^="/legal/"] .article {
  max-width: 820px !important;
}

body[data-route^="/legal/"] .article h2 {
  margin-top: clamp(52px, 6vw, 78px) !important;
}

@media (max-width: 980px) {
  .section {
    padding-top: clamp(74px, 10vw, 104px) !important;
    padding-bottom: clamp(74px, 10vw, 104px) !important;
  }

  body[data-route="/"] .hero {
    min-height: 0;
  }

  body[data-route="/insights/"] .grid.three {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .section {
    padding-top: 68px !important;
    padding-bottom: 68px !important;
  }

  main > .section:first-child,
  main > .site-hero:first-child {
    padding-top: 58px !important;
  }

  body[data-route="/"] .hero {
    padding-top: 62px !important;
    padding-bottom: 74px !important;
  }

  body[data-route="/"] .hero-copy {
    margin-top: 22px !important;
  }

  body[data-route="/"] .hero-visual {
    min-height: 340px !important;
  }

  body[data-route="/"] .hero-visual .layer-card {
    display: none !important;
  }

  .grid.two,
  .grid.three,
  .grid.four,
  .card-grid,
  .steps,
  .profiles,
  .trust-grid,
  .security-grid,
  .topic-clusters,
  body[data-route="/insights/"] .grid.three {
    grid-template-columns: 1fr !important;
  }

  .card,
  .step,
  .post-card,
  .partner-card,
  .trust-card,
  .security-card,
  .tech-card,
  .profile,
  .topic-cluster {
    padding: 22px !important;
  }

  .luxury-disclosure summary,
  .service-scope summary {
    min-height: 50px;
  }

  .article h2 {
    margin-top: 54px !important;
  }

  .geo-direct,
  .key-takeaways,
  .related-links {
    padding: 22px !important;
  }

  .footer-inner {
    padding-top: 52px !important;
  }
}

/* Visual hierarchy, colour and desktop composition pass.
   Swiss Precision is the default production palette: light, exacting,
   infrastructure-led and less cream-heavy. Other colour directions remain
   preview-only behind ?colour=... URLs. The copy remains unchanged in the HTML. */
:root {
  --centry-bg: #f8f9f7;
  --centry-bg-soft: #eef1ef;
  --centry-paper: #ffffff;
  --centry-ink: #111719;
  --centry-muted: rgba(17, 23, 25, 0.64);
  --centry-faint: rgba(17, 23, 25, 0.46);
  --centry-line: rgba(17, 23, 25, 0.13);
  --centry-line-strong: rgba(17, 23, 25, 0.22);
  --centry-blue: #496c83;
  --centry-green: #6f7d76;
  --centry-coral: #8b7658;
  --centry-section-label: #405f73;
  --centry-section-soft: #eef1ef;
  --centry-section-cool: #edf2f3;
  --centry-section-warm: #f3f2ec;
  --centry-compliance: #8b7658;
  --centry-page-top: #ffffff;
  --centry-page-bottom: #f0f2ef;
  --centry-nav-surface: rgba(255, 255, 255, 0.91);
  --centry-kicker-bg: rgba(255, 255, 255, 0.74);
  --preview-label: "Swiss Precision";
  --preview-page-bg: radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.86), transparent 24rem), linear-gradient(180deg, #ffffff 0%, #f7f8f6 38%, #e2e7e6 100%);
  --preview-band-a: linear-gradient(135deg, #ffffff 0%, #e9eef0 100%);
  --preview-band-b: linear-gradient(135deg, #f8fbfc 0%, #dbe7ec 100%);
  --preview-card: rgba(255, 255, 255, 0.88);
  --preview-border: rgba(34, 57, 71, 0.24);
  --preview-cta: #334a5a;
  --preview-cta-text: #ffffff;
  --preview-secondary: #ffffff;
  --preview-kicker-text: #314f63;
  --preview-kicker-bg: rgba(255, 255, 255, 0.86);
  --preview-dark: radial-gradient(circle at 84% 12%, rgba(96, 130, 150, 0.26), transparent 18rem), linear-gradient(145deg, #111719, #243847 58%, #0b1114);
  --preview-footer: radial-gradient(circle at 84% 10%, rgba(96, 130, 150, 0.25), transparent 24rem), linear-gradient(145deg, #111719, #203443 58%, #0b1114);
  --preview-visual-overlay: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(219, 231, 236, 0.78));
  --layout-readable: 720px;
  --layout-article: 800px;
  --layout-standard: 1280px;
  --layout-wide: 1420px;
  --layout-ultra: 1520px;
}

html[data-colour-option="warm"] {
  --centry-bg: #fbf8f1;
  --centry-bg-soft: #f3efe6;
  --centry-paper: #fffdfa;
  --centry-ink: #061721;
  --centry-muted: rgba(6, 23, 33, 0.66);
  --centry-faint: rgba(6, 23, 33, 0.48);
  --centry-line: rgba(36, 34, 29, 0.14);
  --centry-line-strong: rgba(36, 34, 29, 0.24);
  --centry-blue: #2f6f8f;
  --centry-green: #5d7a64;
  --centry-coral: #a96f45;
  --centry-section-label: #285f78;
  --centry-section-soft: #f1ece2;
  --centry-section-cool: #edf4f3;
  --centry-section-warm: #f6efe3;
  --centry-compliance: #b2824f;
  --centry-page-top: #fffdf8;
  --centry-page-bottom: #f7f2e9;
  --centry-nav-surface: rgba(255, 253, 248, 0.9);
  --centry-kicker-bg: rgba(255, 253, 248, 0.72);
  --preview-label: "Warm Private Office";
  --preview-page-bg: radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.72), transparent 24rem), linear-gradient(180deg, #fffdf8 0%, #fbf8f1 46%, #f7f2e9 100%);
  --preview-band-a: linear-gradient(135deg, #fff9ef 0%, #efe4d3 100%);
  --preview-band-b: linear-gradient(135deg, #fffdf8 0%, #e4f1ef 100%);
  --preview-card: rgba(255, 253, 248, 0.78);
  --preview-border: rgba(36, 34, 29, 0.14);
  --preview-cta: #061721;
  --preview-cta-text: #ffffff;
  --preview-secondary: rgba(255, 253, 248, 0.9);
  --preview-kicker-text: #285f78;
  --preview-kicker-bg: rgba(255, 253, 248, 0.78);
  --preview-dark: radial-gradient(circle at 82% 12%, rgba(93, 122, 100, 0.2), transparent 18rem), linear-gradient(145deg, #061721, #0d2934 58%, #041118);
  --preview-footer: radial-gradient(circle at 86% 8%, rgba(93, 122, 100, 0.18), transparent 23rem), linear-gradient(145deg, #061721, #0b252e 58%, #041118);
  --preview-visual-overlay: linear-gradient(135deg, rgba(255, 249, 239, 0.78), rgba(228, 241, 239, 0.7));
}

html[data-colour-option="swiss"] {
  --centry-bg: #f8f9f7;
  --centry-bg-soft: #eef1ef;
  --centry-paper: #ffffff;
  --centry-ink: #111719;
  --centry-muted: rgba(17, 23, 25, 0.64);
  --centry-faint: rgba(17, 23, 25, 0.46);
  --centry-line: rgba(17, 23, 25, 0.13);
  --centry-line-strong: rgba(17, 23, 25, 0.22);
  --centry-blue: #496c83;
  --centry-green: #6f7d76;
  --centry-coral: #8b7658;
  --centry-section-label: #405f73;
  --centry-section-soft: #eef1ef;
  --centry-section-cool: #edf2f3;
  --centry-section-warm: #f3f2ec;
  --centry-compliance: #8b7658;
  --centry-page-top: #ffffff;
  --centry-page-bottom: #f0f2ef;
  --centry-nav-surface: rgba(255, 255, 255, 0.91);
  --centry-kicker-bg: rgba(255, 255, 255, 0.74);
  --preview-label: "Swiss Precision";
  --preview-page-bg: radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.86), transparent 24rem), linear-gradient(180deg, #ffffff 0%, #f7f8f6 38%, #e2e7e6 100%);
  --preview-band-a: linear-gradient(135deg, #ffffff 0%, #e9eef0 100%);
  --preview-band-b: linear-gradient(135deg, #f8fbfc 0%, #dbe7ec 100%);
  --preview-card: rgba(255, 255, 255, 0.88);
  --preview-border: rgba(34, 57, 71, 0.24);
  --preview-cta: #334a5a;
  --preview-cta-text: #ffffff;
  --preview-secondary: #ffffff;
  --preview-kicker-text: #314f63;
  --preview-kicker-bg: rgba(255, 255, 255, 0.86);
  --preview-dark: radial-gradient(circle at 84% 12%, rgba(96, 130, 150, 0.26), transparent 18rem), linear-gradient(145deg, #111719, #243847 58%, #0b1114);
  --preview-footer: radial-gradient(circle at 84% 10%, rgba(96, 130, 150, 0.25), transparent 24rem), linear-gradient(145deg, #111719, #203443 58%, #0b1114);
  --preview-visual-overlay: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(219, 231, 236, 0.78));
}

html[data-colour-option="family"] {
  --centry-bg: #faf6ec;
  --centry-bg-soft: #efe8da;
  --centry-paper: #fffdf8;
  --centry-ink: #102017;
  --centry-muted: rgba(16, 32, 23, 0.66);
  --centry-faint: rgba(16, 32, 23, 0.48);
  --centry-line: rgba(48, 43, 33, 0.15);
  --centry-line-strong: rgba(48, 43, 33, 0.24);
  --centry-blue: #6f7653;
  --centry-green: #6f7653;
  --centry-coral: #9a7651;
  --centry-section-label: #5d663f;
  --centry-section-soft: #efe8da;
  --centry-section-cool: #f0f1e8;
  --centry-section-warm: #f1e8d7;
  --centry-compliance: #9a7651;
  --centry-page-top: #fffdf8;
  --centry-page-bottom: #f3ecde;
  --centry-nav-surface: rgba(255, 253, 248, 0.91);
  --centry-kicker-bg: rgba(255, 253, 248, 0.76);
  --preview-label: "Modern Family Office";
  --preview-page-bg: radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.72), transparent 24rem), linear-gradient(180deg, #fffaf1 0%, #f5eddb 42%, #ddd7bd 100%);
  --preview-band-a: linear-gradient(135deg, #fff7e7 0%, #e8dbc0 100%);
  --preview-band-b: linear-gradient(135deg, #f8f3e6 0%, #dfe8cd 100%);
  --preview-card: rgba(255, 250, 241, 0.9);
  --preview-border: rgba(91, 99, 54, 0.28);
  --preview-cta: #3d4a2a;
  --preview-cta-text: #fffdf8;
  --preview-secondary: #fffaf1;
  --preview-kicker-text: #59663b;
  --preview-kicker-bg: rgba(255, 250, 241, 0.84);
  --preview-dark: radial-gradient(circle at 82% 14%, rgba(176, 131, 78, 0.27), transparent 19rem), linear-gradient(145deg, #102017, #364421 58%, #0b130e);
  --preview-footer: radial-gradient(circle at 86% 8%, rgba(111, 118, 83, 0.28), transparent 24rem), linear-gradient(145deg, #102017, #2d3a20 58%, #0b130e);
  --preview-visual-overlay: linear-gradient(135deg, rgba(255, 250, 241, 0.86), rgba(223, 232, 205, 0.72));
}

html[data-colour-option="dark"] {
  --centry-bg: #fbfcfa;
  --centry-bg-soft: #eef5f3;
  --centry-paper: #ffffff;
  --centry-ink: #07141c;
  --centry-muted: rgba(7, 20, 28, 0.64);
  --centry-faint: rgba(7, 20, 28, 0.46);
  --centry-line: rgba(7, 20, 28, 0.13);
  --centry-line-strong: rgba(7, 20, 28, 0.24);
  --centry-blue: #2f7284;
  --centry-green: #4f7d70;
  --centry-coral: #b58752;
  --centry-section-label: #2b6677;
  --centry-section-soft: #eef5f3;
  --centry-section-cool: #eaf4f2;
  --centry-section-warm: #f5f0e8;
  --centry-compliance: #b58752;
  --centry-page-top: #ffffff;
  --centry-page-bottom: #edf4f2;
  --centry-nav-surface: rgba(255, 255, 255, 0.9);
  --centry-kicker-bg: rgba(255, 255, 255, 0.74);
  --preview-label: "Intelligent Dark Contrast";
  --preview-page-bg: radial-gradient(circle at 12% 0%, rgba(47, 114, 132, 0.16), transparent 24rem), linear-gradient(180deg, #ffffff 0%, #eef7f5 36%, #d1e5e2 100%);
  --preview-band-a: linear-gradient(135deg, #ffffff 0%, #dbeeea 100%);
  --preview-band-b: linear-gradient(135deg, #f5fbfa 0%, #d2e8e4 100%);
  --preview-card: rgba(255, 255, 255, 0.9);
  --preview-border: rgba(11, 68, 82, 0.25);
  --preview-cta: #0b4452;
  --preview-cta-text: #ffffff;
  --preview-secondary: #ffffff;
  --preview-kicker-text: #0f6578;
  --preview-kicker-bg: rgba(255, 255, 255, 0.84);
  --preview-dark: radial-gradient(circle at 82% 12%, rgba(181, 135, 82, 0.32), transparent 18rem), linear-gradient(145deg, #051018, #0d3a49 58%, #02070b);
  --preview-footer: radial-gradient(circle at 86% 8%, rgba(47, 114, 132, 0.32), transparent 24rem), linear-gradient(145deg, #051018, #0b3341 58%, #02070b);
  --preview-visual-overlay: linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(210, 232, 228, 0.76));
}

html[data-colour-option="portugal"] {
  --centry-bg: #fbf7ef;
  --centry-bg-soft: #efe7d8;
  --centry-paper: #fffdf8;
  --centry-ink: #08212a;
  --centry-muted: rgba(8, 33, 42, 0.65);
  --centry-faint: rgba(8, 33, 42, 0.48);
  --centry-line: rgba(58, 48, 35, 0.14);
  --centry-line-strong: rgba(58, 48, 35, 0.24);
  --centry-blue: #1f6f7b;
  --centry-green: #7b8a68;
  --centry-coral: #b08357;
  --centry-section-label: #1e6671;
  --centry-section-soft: #efe7d8;
  --centry-section-cool: #eaf2ed;
  --centry-section-warm: #f3e8d6;
  --centry-compliance: #b08357;
  --centry-page-top: #fffdf8;
  --centry-page-bottom: #f1e8d9;
  --centry-nav-surface: rgba(255, 253, 248, 0.91);
  --centry-kicker-bg: rgba(255, 253, 248, 0.76);
  --preview-label: "Portugal / Global Warmth";
  --preview-page-bg: radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.72), transparent 24rem), linear-gradient(180deg, #fffaf2 0%, #f8ecd9 38%, #ddc5a5 100%);
  --preview-band-a: linear-gradient(135deg, #fff5e6 0%, #ead2ae 100%);
  --preview-band-b: linear-gradient(135deg, #fff9ed 0%, #cae6df 100%);
  --preview-card: rgba(255, 250, 242, 0.9);
  --preview-border: rgba(20, 93, 102, 0.27);
  --preview-cta: #0d5f6b;
  --preview-cta-text: #ffffff;
  --preview-secondary: #fffaf2;
  --preview-kicker-text: #0f6570;
  --preview-kicker-bg: rgba(255, 250, 242, 0.84);
  --preview-dark: radial-gradient(circle at 82% 12%, rgba(176, 131, 87, 0.28), transparent 18rem), linear-gradient(145deg, #08212a, #0d5965 58%, #041015);
  --preview-footer: radial-gradient(circle at 86% 8%, rgba(31, 111, 123, 0.32), transparent 24rem), linear-gradient(145deg, #08212a, #0c4b59 58%, #041015);
  --preview-visual-overlay: linear-gradient(135deg, rgba(255, 250, 242, 0.86), rgba(202, 230, 223, 0.74));
}

html,
body {
  background: var(--centry-bg) !important;
}

.page {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.72), transparent 24rem),
    linear-gradient(180deg, var(--centry-page-top) 0%, var(--centry-bg) 46%, var(--centry-page-bottom) 100%);
}

.nav {
  background: var(--centry-nav-surface) !important;
  border-bottom-color: rgba(36, 34, 29, 0.1) !important;
}

.nav-inner,
.footer-inner {
  max-width: min(calc(100vw - 56px), var(--layout-wide)) !important;
}

.section {
  width: min(calc(100vw - 56px), var(--layout-wide)) !important;
  max-width: var(--layout-wide) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.section .section,
.article .section {
  width: 100% !important;
}

body[data-route^="/legal/"] .section,
body[data-route^="/legal/"] .hero {
  max-width: 1120px !important;
}

.hero {
  max-width: var(--layout-wide) !important;
}

.section-head {
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.58fr) !important;
  max-width: none !important;
}

.kicker {
  display: inline-flex !important;
  min-height: 36px !important;
  align-items: center !important;
  gap: 8px !important;
  width: fit-content !important;
  padding: 8px 16px 8px 12px !important;
  border: 1px solid color-mix(in srgb, var(--centry-blue) 22%, transparent) !important;
  border-radius: 999px !important;
  background: var(--centry-kicker-bg) !important;
  color: var(--centry-section-label) !important;
  font-size: clamp(13px, 1vw, 15px) !important;
  font-weight: 780 !important;
  letter-spacing: 0.1em !important;
  line-height: 1 !important;
  box-shadow: 0 10px 26px rgba(6, 23, 33, 0.035);
}

/* Semantically relevant per-section icon, rendered as a real element (Icon
   component on most pages, hand-rolled inline SVG on insight articles built
   via set:html) rather than the blank ::before bar this replaces. */
.kicker-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.panel-label,
.card span,
.step span,
.post-card span,
.partner-card span,
.trust-card span,
.team-card span,
.profile span {
  color: var(--centry-section-label) !important;
  font-weight: 760 !important;
  letter-spacing: 0.105em !important;
}

body:not([data-route^="/legal/"]) main > .section:nth-of-type(3n + 2):not(.hero):not(.tech):not(.final):not(.final-cta),
body[data-route="/"] .problem,
body[data-route="/"] #why-centry {
  padding-left: clamp(28px, 4vw, 64px) !important;
  padding-right: clamp(28px, 4vw, 64px) !important;
  border: 1px solid rgba(36, 34, 29, 0.1);
  border-radius: clamp(28px, 3.8vw, 48px);
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.82), color-mix(in srgb, var(--centry-section-warm) 86%, transparent)),
    radial-gradient(circle at 88% 16%, color-mix(in srgb, var(--centry-blue) 11%, transparent), transparent 22rem);
}

body:not([data-route^="/legal/"]) main > .section:nth-of-type(3n + 4):not(.hero):not(.tech):not(.final):not(.final-cta),
body[data-route="/"] .calculator-cta,
body[data-route="/"] #wealth-engineering {
  padding-left: clamp(28px, 4vw, 64px) !important;
  padding-right: clamp(28px, 4vw, 64px) !important;
  border: 1px solid rgba(47, 111, 143, 0.11);
  border-radius: clamp(28px, 3.8vw, 48px);
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.86), color-mix(in srgb, var(--centry-section-cool) 88%, transparent)),
    radial-gradient(circle at 7% 92%, color-mix(in srgb, var(--centry-green) 10%, transparent), transparent 20rem);
}

.card,
.step,
.post-card,
.partner-card,
.faq-card,
.trust-card,
.use-case-card,
.compare-card,
.asset-card,
.privacy-card,
.profile,
.security-card,
.tech-card,
.team-card,
.topic-cluster,
.legal-card {
  background: rgba(255, 253, 248, 0.76) !important;
  border-color: rgba(36, 34, 29, 0.12) !important;
}

.secondary,
.login,
.luxury-disclosure summary,
.service-scope summary,
.faq-stack details,
.faqs details {
  background: rgba(255, 253, 248, 0.78) !important;
}

body[data-route="/"] .hero {
  width: min(calc(100vw - 64px), var(--layout-ultra)) !important;
  max-width: var(--layout-ultra) !important;
  grid-template-columns: minmax(0, 0.92fr) minmax(560px, 0.94fr) !important;
}

body[data-route="/"] .hero h1 {
  max-width: 820px;
}

body[data-route="/"] .hero-visual {
  min-height: clamp(560px, 41vw, 690px) !important;
}

body:not([data-route="/"]):not([data-route^="/legal/"]) .hero {
  grid-template-columns: minmax(0, 0.96fr) minmax(430px, 0.62fr) !important;
  width: min(calc(100vw - 64px), var(--layout-wide)) !important;
}

body:not([data-route="/"]):not([data-route^="/legal/"]) .hero h1 {
  max-width: 900px;
}

body:not([data-route="/"]):not([data-route^="/legal/"]) .art-panel {
  position: relative;
  min-height: clamp(320px, 27vw, 430px) !important;
  padding: clamp(24px, 3vw, 40px) !important;
  overflow: hidden;
}

body:not([data-route="/"]):not([data-route^="/legal/"]):not([data-route^="/insights/"]) .art-panel::before {
  display: block;
  aspect-ratio: 16 / 10;
  margin-bottom: clamp(22px, 2.8vw, 34px);
  border: 1px solid rgba(36, 34, 29, 0.1);
  border-radius: clamp(20px, 2.6vw, 30px);
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.78), rgba(237, 244, 243, 0.78)),
    url("/assets/images/brand/coordination-arc-lines.png") center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.46), 0 18px 44px rgba(6, 23, 33, 0.06);
  content: "";
}

body[data-route="/tax/"] .art-panel::before,
body[data-route="/wealth/"] .art-panel::before,
body[data-route="/cross-border-wealth-coordination/"] .art-panel::before {
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.82), rgba(237, 244, 243, 0.74)),
    url("/assets/images/pages/cross-border/cross-border-route-map.png") center / cover no-repeat;
}

body[data-route="/wealth-engineering/"] .art-panel::before,
body[data-route="/private-office/"] .art-panel::before,
body[data-route="/ai-family-office/"] .art-panel::before,
body[data-route="/security/"] .art-panel::before {
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.82), rgba(241, 236, 226, 0.74)),
    url("/assets/images/brand/wealth-process-timeline.png") center / cover no-repeat;
}

body:not([data-route^="/legal/"]) .section.split {
  display: grid !important;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 0.7fr) !important;
  gap: clamp(30px, 5vw, 82px) !important;
  align-items: center !important;
}

body:not([data-route^="/legal/"]) .section.split::after {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: clamp(280px, 26vw, 420px);
  border: 1px solid rgba(36, 34, 29, 0.12);
  border-radius: clamp(24px, 3vw, 40px);
  background:
    linear-gradient(160deg, rgba(6, 23, 33, 0) 45%, rgba(6, 23, 33, 0.14)),
    url("/assets/images/pages/wealth/wealth-life-beyond-portfolio.webp") center / cover no-repeat;
  box-shadow: 0 28px 80px rgba(6, 23, 33, 0.075);
  content: "";
}

body:not([data-route^="/legal/"]) .section.split > .body-copy {
  max-width: 620px !important;
}

body[data-route="/"] .card-grid,
body[data-route="/"] .steps,
body[data-route="/"] .profiles {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body[data-route="/"] .service-cards,
body:not([data-route^="/legal/"]) .grid.two {
  gap: clamp(24px, 3vw, 42px) !important;
}

body[data-route="/insights/"] .grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body[data-route="/insights/"] .post-card--media {
  min-height: 430px !important;
}

body[data-route="/insights/"] .post-card-media {
  aspect-ratio: 4 / 3;
}

.compare-table {
  width: min(100%, var(--layout-wide)) !important;
}

.compare-table th,
.compare-table td {
  vertical-align: top !important;
}

.article {
  max-width: var(--layout-article) !important;
}

.geo-direct,
.key-takeaways,
.related-links,
.article-meta-panel {
  max-width: 960px !important;
}

.tech,
.final,
.final-cta {
  /* 56px matches the page grid (.section/.nav-inner/.footer-inner below) —
     this used to say 64px, 4px off-grid per side on every one of these
     sections. .cta-panel is deliberately NOT in this rule: on the homepage
     it's nested inside .final-cta (see cta-footer.css), and giving a nested
     element a viewport-relative width overflows its parent's content box
     by the parent's own horizontal padding — see the reset below. */
  width: min(calc(100vw - 56px), var(--layout-wide)) !important;
  max-width: var(--layout-wide) !important;
}

/* .final-cta (homepage only) is purely a grid-width wrapper around the real
   panel, .cta-panel — both independently picked up the shared dark-panel
   chrome from cta-footer.css (background/border/padding/shadow/::before),
   so the panel was rendering *inside* an identical, wider, viewport-relative
   copy of itself and overflowing off the right edge. Strip the wrapper's
   chrome so only .cta-panel paints, sized to exactly fill it. */
.final-cta {
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.final-cta::before {
  content: none !important;
}

.cta-panel {
  width: 100% !important;
  max-width: 100% !important;
}

.tech {
  background:
    radial-gradient(circle at 82% 12%, rgba(93, 122, 100, 0.2), transparent 18rem),
    linear-gradient(145deg, #061721, #0d2934 58%, #041118) !important;
}

.tech .kicker,
.cta-panel .kicker,
.final .kicker {
  border-color: rgba(174, 215, 232, 0.22) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(198, 229, 236, 0.96) !important;
  box-shadow: none;
}

.site-footer {
  background:
    radial-gradient(circle at 86% 8%, rgba(93, 122, 100, 0.18), transparent 23rem),
    linear-gradient(145deg, #061721, #0b252e 58%, #041118) !important;
}

html[data-colour-option] .page {
  background: var(--preview-page-bg) !important;
}

html[data-colour-option] .nav {
  background: var(--centry-nav-surface) !important;
  border-bottom-color: var(--preview-border) !important;
}

html[data-colour-option] .links a,
html[data-colour-option] .footer-links a,
html[data-colour-option] .article a,
html[data-colour-option] .post-card a {
  color: var(--centry-ink) !important;
}

html[data-colour-option] .links a:hover,
html[data-colour-option] .footer-links a:hover,
html[data-colour-option] .article a:hover,
html[data-colour-option] .post-card a:hover {
  color: var(--centry-blue) !important;
}

html[data-colour-option] .cta,
html[data-colour-option] .nav-inner > .cta,
html[data-colour-option] .centry-mobile-menu a.cta {
  background: var(--preview-cta) !important;
  color: var(--preview-cta-text) !important;
  box-shadow: 0 18px 42px color-mix(in srgb, var(--preview-cta) 22%, transparent) !important;
}

html[data-colour-option] .kicker {
  border-color: color-mix(in srgb, var(--centry-blue) 42%, transparent) !important;
  background: var(--preview-kicker-bg) !important;
  color: var(--preview-kicker-text) !important;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--centry-blue) 10%, transparent);
}

html[data-colour-option] .panel-label,
html[data-colour-option] .card span,
html[data-colour-option] .step span,
html[data-colour-option] .post-card span,
html[data-colour-option] .partner-card span,
html[data-colour-option] .trust-card span,
html[data-colour-option] .team-card span,
html[data-colour-option] .profile span {
  color: var(--preview-kicker-text) !important;
}

html[data-colour-option] body:not([data-route^="/legal/"]) main > .section:nth-of-type(3n + 2):not(.hero):not(.tech):not(.final):not(.final-cta),
html[data-colour-option] body[data-route="/"] .problem,
html[data-colour-option] body[data-route="/"] #why-centry {
  border-color: var(--preview-border) !important;
  background: var(--preview-band-a) !important;
}

html[data-colour-option] body:not([data-route^="/legal/"]) main > .section:nth-of-type(3n + 4):not(.hero):not(.tech):not(.final):not(.final-cta),
html[data-colour-option] body[data-route="/"] .calculator-cta,
html[data-colour-option] body[data-route="/"] #wealth-engineering {
  border-color: color-mix(in srgb, var(--centry-blue) 22%, transparent) !important;
  background: var(--preview-band-b) !important;
}

html[data-colour-option] .card,
html[data-colour-option] .step,
html[data-colour-option] .post-card,
html[data-colour-option] .partner-card,
html[data-colour-option] .faq-card,
html[data-colour-option] .trust-card,
html[data-colour-option] .use-case-card,
html[data-colour-option] .compare-card,
html[data-colour-option] .asset-card,
html[data-colour-option] .privacy-card,
html[data-colour-option] .profile,
html[data-colour-option] .security-card,
html[data-colour-option] .team-card,
html[data-colour-option] .topic-cluster,
html[data-colour-option] .legal-card,
html[data-colour-option] .service-card,
html[data-colour-option] .service-bridge,
html[data-colour-option] .secondary,
html[data-colour-option] .login,
html[data-colour-option] .luxury-disclosure summary,
html[data-colour-option] .service-scope summary,
html[data-colour-option] .faq-stack details,
html[data-colour-option] .faqs details {
  background: var(--preview-card) !important;
  border-color: var(--preview-border) !important;
}

html[data-colour-option] .secondary,
html[data-colour-option] .login {
  background: var(--preview-secondary) !important;
  color: var(--centry-ink) !important;
  box-shadow: inset 0 0 0 1px var(--preview-border) !important;
}

html[data-colour-option] body[data-route="/"] .hero-visual {
  border-color: var(--preview-border) !important;
  background: var(--preview-band-b) !important;
  box-shadow: 0 28px 82px color-mix(in srgb, var(--centry-ink) 12%, transparent) !important;
}

html[data-colour-option] body[data-route="/"] .hero-visual::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04) 48%, color-mix(in srgb, var(--centry-ink) 16%, transparent)),
    radial-gradient(circle at 76% 82%, rgba(255, 255, 255, 0.76), transparent 15rem) !important;
}

html[data-colour-option] body[data-route="/"] .hero-art-card,
html[data-colour-option] body[data-route="/"] .hero-art-card--system,
html[data-colour-option] .post-card-media {
  border-color: var(--preview-border) !important;
  background: var(--preview-band-a) !important;
}

html[data-colour-option] body[data-route="/"] .hero-visual .visual-head,
html[data-colour-option] body[data-route="/"] .hero-visual .layer-card,
html[data-colour-option] body[data-route="/"] .hero-visual .outcome-strip span,
html[data-colour-option] body[data-route="/"] .hero-visual .component-chip {
  border-color: var(--preview-border) !important;
  background: color-mix(in srgb, var(--centry-paper) 88%, white) !important;
}

html[data-colour-option] body:not([data-route="/"]):not([data-route^="/legal/"]) .art-panel::before {
  border-color: var(--preview-border) !important;
  background:
    var(--preview-visual-overlay),
    url("/assets/images/brand/coordination-arc-lines.png") center / cover no-repeat !important;
}

html[data-colour-option] body[data-route="/tax/"] .art-panel::before,
html[data-colour-option] body[data-route="/wealth/"] .art-panel::before,
html[data-colour-option] body[data-route="/cross-border-wealth-coordination/"] .art-panel::before {
  background:
    var(--preview-visual-overlay),
    url("/assets/images/pages/cross-border/cross-border-route-map.png") center / cover no-repeat !important;
}

html[data-colour-option] body[data-route="/wealth-engineering/"] .art-panel::before,
html[data-colour-option] body[data-route="/private-office/"] .art-panel::before,
html[data-colour-option] body[data-route="/ai-family-office/"] .art-panel::before,
html[data-colour-option] body[data-route="/security/"] .art-panel::before {
  background:
    var(--preview-visual-overlay),
    url("/assets/images/brand/wealth-process-timeline.png") center / cover no-repeat !important;
}

html[data-colour-option] body:not([data-route^="/legal/"]) .section.split::after {
  border-color: var(--preview-border) !important;
  background:
    var(--preview-visual-overlay),
    url("/assets/images/pages/wealth/wealth-life-beyond-portfolio.webp") center / cover no-repeat !important;
}

html[data-colour-option] .tech,
html[data-colour-option] .final,
html[data-colour-option] .final-cta,
html[data-colour-option] .cta-panel {
  background: var(--preview-dark) !important;
}

html[data-colour-option] .site-footer {
  background: var(--preview-footer) !important;
}

html[data-colour-option] body::after {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  max-width: min(280px, calc(100vw - 36px));
  padding: 9px 13px;
  border: 1px solid color-mix(in srgb, var(--preview-cta) 22%, white);
  border-radius: 999px;
  background: color-mix(in srgb, var(--preview-cta) 92%, black);
  color: var(--preview-cta-text);
  box-shadow: 0 18px 45px color-mix(in srgb, var(--preview-cta) 24%, transparent);
  content: "Colour preview: " var(--preview-label);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.08em;
  line-height: 1.1;
  pointer-events: none;
  text-transform: uppercase;
}

@media (min-width: 1500px) {
  /* .cta-panel excluded deliberately: it fills .final-cta via width:100%
     (see the base rule below) rather than tracking the viewport itself —
     see the comment there for why. */
  .section,
  .hero,
  .nav-inner,
  .footer-inner,
  .tech,
  .final,
  .final-cta {
    width: min(calc(100vw - 96px), var(--layout-ultra)) !important;
    max-width: var(--layout-ultra) !important;
  }
}

@media (max-width: 1180px) {
  .section-head,
  body[data-route="/"] .hero,
  body:not([data-route="/"]):not([data-route^="/legal/"]) .hero,
  body:not([data-route^="/legal/"]) .section.split {
    grid-template-columns: 1fr !important;
  }

  body[data-route="/"] .hero,
  body:not([data-route="/"]):not([data-route^="/legal/"]) .hero,
  .section,
  .tech,
  .final,
  .final-cta {
    width: min(calc(100vw - 42px), var(--layout-wide)) !important;
  }

  body:not([data-route^="/legal/"]) .section.split::after {
    grid-column: 1;
    grid-row: auto;
    min-height: clamp(240px, 40vw, 360px);
  }

  body[data-route="/"] .card-grid,
  body[data-route="/"] .steps,
  body[data-route="/"] .profiles,
  body[data-route="/insights/"] .grid.three {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .section,
  body[data-route="/"] .hero,
  body:not([data-route="/"]):not([data-route^="/legal/"]) .hero,
  .tech,
  .final,
  .final-cta {
    width: min(calc(100vw - 28px), var(--layout-wide)) !important;
  }

  .kicker {
    min-height: 31px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
  }

  .kicker-icon {
    width: 13px;
    height: 13px;
  }

  body:not([data-route^="/legal/"]) main > .section:nth-of-type(3n + 2):not(.hero):not(.tech):not(.final):not(.final-cta),
  body:not([data-route^="/legal/"]) main > .section:nth-of-type(3n + 4):not(.hero):not(.tech):not(.final):not(.final-cta),
  body[data-route="/"] .problem,
  body[data-route="/"] #why-centry,
  body[data-route="/"] .calculator-cta,
  body[data-route="/"] #wealth-engineering {
    padding-left: 20px !important;
    padding-right: 20px !important;
    border-radius: 24px;
  }

  body:not([data-route="/"]):not([data-route^="/legal/"]) .art-panel::before,
  body:not([data-route^="/legal/"]) .section.split::after {
    min-height: 220px;
    border-radius: 22px;
  }

  body[data-route="/"] .card-grid,
  body[data-route="/"] .steps,
  body[data-route="/"] .profiles,
  body[data-route="/insights/"] .grid.three {
    grid-template-columns: 1fr !important;
  }
}

/* Literal final component-polish overrides. */
main > .section + .section { margin-top: var(--component-section-gap) !important; }
body:not([data-route^="/legal/"]) main > .section:nth-of-type(3n + 2):not(.hero):not(.tech):not(.final):not(.final-cta),
body:not([data-route^="/legal/"]) main > .section:nth-of-type(3n + 4):not(.hero):not(.tech):not(.final):not(.final-cta),
html[data-colour-option] body:not([data-route^="/legal/"]) main > .section:nth-of-type(3n + 2):not(.hero):not(.tech):not(.final):not(.final-cta),
html[data-colour-option] body:not([data-route^="/legal/"]) main > .section:nth-of-type(3n + 4):not(.hero):not(.tech):not(.final):not(.final-cta),
.tech,
.final,
.final-cta,
.cta-panel,
html[data-colour-option] .final,
html[data-colour-option] .final-cta,
html[data-colour-option] .cta-panel { margin-top: var(--component-band-gap) !important; margin-bottom: var(--component-band-gap) !important; }
.card,
.step,
.post-card,
.partner-card,
.trust-card,
.team-card,
.service-card,
.audience-card,
.process-card,
.proof-card,
.compare-card,
.legal-card,
html[data-colour-option] .card,
html[data-colour-option] .step,
html[data-colour-option] .post-card,
html[data-colour-option] .partner-card,
html[data-colour-option] .trust-card,
html[data-colour-option] .team-card,
html[data-colour-option] .service-card,
html[data-colour-option] .audience-card,
html[data-colour-option] .process-card,
html[data-colour-option] .proof-card,
html[data-colour-option] .compare-card,
html[data-colour-option] .legal-card { min-height: 0 !important; padding: var(--component-card-pad) !important; border-radius: clamp(18px, 2vw, 24px) !important; }
.luxury-disclosure,
.service-scope,
html[data-colour-option] .luxury-disclosure,
html[data-colour-option] .service-scope { margin-top: clamp(20px, 2.3vw, 30px) !important; overflow: hidden; border: 1px solid var(--centry-line, var(--line)) !important; border-radius: 18px !important; background: color-mix(in oklch, white 82%, var(--paper-warm, var(--bg))) !important; }
.luxury-disclosure summary,
.service-scope summary,
html[data-colour-option] .luxury-disclosure summary,
html[data-colour-option] .service-scope summary { min-height: 48px !important; padding: 0 clamp(18px, 2vw, 24px) !important; align-items: center !important; font-size: 14px !important; line-height: 1.25 !important; }
.luxury-disclosure summary::after,
.service-scope summary::after,
html[data-colour-option] .luxury-disclosure summary::after,
html[data-colour-option] .service-scope summary::after { width: 26px !important; height: 26px !important; flex: 0 0 26px !important; }
.luxury-grid-secondary,
.service-scope .service-list { margin-top: 0 !important; padding: clamp(18px, 2vw, 24px) !important; gap: clamp(14px, 1.8vw, 22px) !important; }
.faq-stack,
.faqs { gap: 10px !important; margin-top: clamp(24px, 3vw, 40px) !important; }
.faq-stack details,
.faqs details,
html[data-colour-option] .faq-stack details,
html[data-colour-option] .faqs details { overflow: hidden; padding: 0 !important; border: 1px solid var(--centry-line, var(--line)) !important; border-radius: 16px !important; background: color-mix(in oklch, white 86%, var(--paper-warm, var(--bg))) !important; box-shadow: none !important; }
.faq-stack summary,
.faqs summary,
html[data-colour-option] .faq-stack summary,
html[data-colour-option] .faqs summary { min-height: 54px !important; padding: var(--component-faq-pad-y) var(--component-faq-pad-x) !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; font-size: clamp(16px, 1.2vw, 18px) !important; line-height: 1.34 !important; }
.faq-stack p,
.faqs p,
.faq-stack .faq-content p,
.faqs .faq-content p,
html[data-colour-option] .faq-stack p,
html[data-colour-option] .faqs p,
html[data-colour-option] .faq-stack .faq-content p,
html[data-colour-option] .faqs .faq-content p { max-width: 780px; margin: 0 !important; padding: 0 var(--component-faq-pad-x) var(--component-faq-pad-y) !important; font-size: 15.5px !important; line-height: 1.58 !important; }
body[data-route="/faq/"] .faq-stack summary,
html[data-colour-option] body[data-route="/faq/"] .faq-stack summary { min-height: 60px !important; font-size: clamp(17px, 1.35vw, 19px) !important; }
body[data-route="/faq/"] .faq-stack p,
body[data-route="/faq/"] .faq-stack .faq-content p,
html[data-colour-option] body[data-route="/faq/"] .faq-stack p,
html[data-colour-option] body[data-route="/faq/"] .faq-stack .faq-content p { font-size: 16px !important; }
.geo-direct,
.key-takeaways,
.related-links,
.article-meta-panel,
html[data-colour-option] .geo-direct,
html[data-colour-option] .key-takeaways,
html[data-colour-option] .related-links,
html[data-colour-option] .article-meta-panel { margin: clamp(28px, 3.6vw, 48px) 0 !important; padding: var(--component-panel-pad) !important; border-radius: clamp(20px, 2.2vw, 26px) !important; }
.geo-direct > :first-child,
.key-takeaways > :first-child,
.related-links > :first-child,
.article-meta-panel > :first-child,
.final > :first-child,
.final-cta > :first-child,
.cta-panel > :first-child { margin-top: 0 !important; }
.final,
.final-cta,
.cta-panel,
html[data-colour-option] .final,
html[data-colour-option] .final-cta,
html[data-colour-option] .cta-panel { padding-top: clamp(58px, 6vw, 90px) !important; padding-bottom: clamp(58px, 6vw, 90px) !important; }
@media (max-width: 780px) {
  body[data-route^="/legal/"] main > .section + .section,
  body[data-route^="/legal/"] .legal-card + .legal-card { margin-top: clamp(38px, 8vw, 52px) !important; }
  .luxury-disclosure summary,
  .service-scope summary,
  .faq-stack summary,
  .faqs summary,
  html[data-colour-option] .luxury-disclosure summary,
  html[data-colour-option] .service-scope summary,
  html[data-colour-option] .faq-stack summary,
  html[data-colour-option] .faqs summary { min-height: 50px !important; }
  .faq-stack p,
  .faqs p,
  .faq-stack .faq-content p,
  .faqs .faq-content p,
  html[data-colour-option] .faq-stack p,
  html[data-colour-option] .faqs p,
  html[data-colour-option] .faq-stack .faq-content p,
  html[data-colour-option] .faqs .faq-content p { font-size: 15px !important; }
}

/* Literal final disclosure interior correction. */
.luxury-grid-secondary,
.service-scope .service-list,
html[data-colour-option] .luxury-grid-secondary,
html[data-colour-option] .service-scope .service-list {
  gap: clamp(14px, 1.5vw, 20px) !important;
  padding: clamp(16px, 1.8vw, 22px) !important;
}
.luxury-grid-secondary .card,
.luxury-grid-secondary .step,
.service-scope .service-list li,
.service-scope .service-list .card,
html[data-colour-option] .luxury-grid-secondary .card,
html[data-colour-option] .luxury-grid-secondary .step,
html[data-colour-option] .service-scope .service-list li,
html[data-colour-option] .service-scope .service-list .card {
  padding: var(--component-card-pad-compact) !important;
}
@media (max-width: 780px) {
  .luxury-grid-secondary,
  .service-scope .service-list,
  html[data-colour-option] .luxury-grid-secondary,
  html[data-colour-option] .service-scope .service-list {
    gap: 14px !important;
    padding: 16px !important;
  }
}

/* =========================================================================
   TAX-WEALTH CHART — inline chart inside service cards
   ========================================================================= */

.tax-wealth-chart {
  position: relative;
  margin-top: 20px;
  padding: 12px 16px;
  border: 1px solid color-mix(in oklch, var(--service, var(--blue)) 20%, var(--line));
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--service, var(--blue)) 6%, white), white 70%);
  overflow: hidden;
}

.tax-wealth-chart svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* Chart heading */
.twc-title {
  font-family: var(--font, "Archia Regular", -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: rgba(17,23,25,0.55);
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}

/* ---- Line drawing animations ---- */
.twc-line-entry {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: twcDraw 2s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.3s;
}
.twc-dot-start {
  opacity: 0;
  animation: twcPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.1s;
}
.twc-line-optimised {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: twcDraw 2.2s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.6s;
}
.twc-line-unstructured {
  opacity: 0;
  animation: twcFade 1s ease forwards 0.8s;
}
.twc-fill-optimised {
  opacity: 0;
  animation: twcFade 1s ease forwards 2s;
}
.twc-dot-optimised {
  opacity: 0;
  animation: twcPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 2.4s;
}
.twc-dot-unstructured {
  opacity: 0;
  animation: twcPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 2.6s;
}

@keyframes twcDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes twcFade {
  to { opacity: 1; }
}
@keyframes twcPop {
  from { transform: scale(0); opacity: 0; transform-origin: center; }
  to { transform: scale(1); opacity: 1; transform-origin: center; }
}

/* ---- Bridge pill override ---- */
.service-bridge .service-label {
  width: fit-content;
  margin: 0 auto 10px;
  padding: 7px 10px;
  border: 1px solid color-mix(in oklch, var(--blue) 32%, var(--line));
  border-radius: 999px;
  background: color-mix(in oklch, var(--blue) 9%, white);
  color: color-mix(in oklch, var(--blue) 62%, var(--ink));
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- Responsive: hide flow connector on mobile ---- */
@media (max-width: 800px) {
  #services > .flow-connector {
    display: none;
  }
}
/* === Layer 3: Swiss-clock design system (from centry-zcode.css, !important stripped) === */
/* =========================================================================
   Centry — zcode redesign design system
   -------------------------------------------------------------------------
   A single premium override layer loaded AFTER centry-export-base.css and
   centry-site.css. It does two things:

   1. Redefines the base :root tokens (--bg, --ink, --font, --radius, --max …)
      so the existing structural layer recolours and re-types instantly.
   2. Adds the new editorial / private-office treatment for navigation, hero,
      sections, cards, FAQ, CTA and footer across every page template.

   It never edits the original repo-root assets. Copy is untouched. The old
   centry-site.css polish layer is neutralised by loading this file last.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Design tokens
   ------------------------------------------------------------------------- */
:root {
  /* Swiss clock palette — warm white, paper, charcoal, silver, restrained red. */
  --background:      #F7F7F2;
  --surface:         #FFFFFF;
  --surface-muted:   #EFEFED;

  --text-primary:    #050505;
  --text-secondary:  #5F5F5A;
  --text-muted:      #8A8A84;

  --border:          #D8D8D2;
  --metal:           #B8B8B0;

  --accent-red:      #E30613;
  --accent-red-dark: #B8050F;
  --success:         #2E7D5B;
  --warning:         #C9892B;
  --info:            #2F6F9F;

  --dark-section:    #1A1A18;
  --dark-card:       #2B2B28;

  /* Legacy aliases used by the existing component layer. */
  --bg:            var(--background);
  --paper:         var(--surface);
  --paper-warm:    var(--surface-muted);
  --ink:           var(--text-primary);
  --muted:         var(--text-secondary);
  --faint:         var(--text-muted);
  --line:          var(--border);
  --line-strong:   var(--metal);

  /* Keep semantic colours available, but do not let old component aliases
     create a rainbow. Legacy --blue/--green/--amber now resolve neutral. */
  --blue:          var(--text-secondary);
  --green:         var(--text-secondary);
  --coral:         var(--accent-red);
  --amber:         var(--text-secondary);
  --violet:        var(--text-secondary);

  /* Charcoal carries the interface; red is reserved as a precision signal. */
  --accent:        var(--text-primary);
  --precision:     var(--accent-red);
  --precision-dark: var(--accent-red-dark);
  --accent-soft:   var(--metal);
  --dark:          var(--dark-section);
  --dark-soft:     var(--dark-card);

  /* Radii — tighter, more architectural than the old 24px */
  --radius:        14px;
  --radius-lg:     20px;
  --radius-sm:     10px;

  /* Width — wider editorial canvas on desktop */
  --max:           1360px;

  /* Shadows — extremely restrained */
  --shadow:        0 1px 2px rgba(5, 5, 5, 0.035), 0 12px 36px rgba(5, 5, 5, 0.06);
  --shadow-soft:   0 1px 2px rgba(5, 5, 5, 0.025), 0 8px 24px rgba(5, 5, 5, 0.045);

  /* Type — Centry/Archia-style sans throughout. */
  --font: "Centry Archia", "Archia", "Archia Regular", -apple-system,
          BlinkMacSystemFont, "Inter", "SF Pro Text", "Segoe UI",
          "Helvetica Neue", system-ui, sans-serif;
  --serif: var(--font);
  --mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Honour the legacy colour-preview hook while keeping Swiss clock as default. */
[data-colour-option] {
  --background: #F7F7F2;
  --surface: #FFFFFF;
  --surface-muted: #EFEFED;
  --text-primary: #050505;
  --text-secondary: #5F5F5A;
  --text-muted: #8A8A84;
  --border: #D8D8D2;
  --metal: #B8B8B0;
  --dark-section: #1A1A18;
  --dark-card: #2B2B28;
}

/* -------------------------------------------------------------------------
   Base reset on top of the export
   ------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  /* Belt-and-braces guard against any wide base-export element forcing
     horizontal scroll on small viewports. */
  overflow-x: clip;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(1100px 600px at 88% -8%, rgba(184, 184, 176, 0.08), transparent 60%),
    radial-gradient(900px 500px at -6% 30%, rgba(5, 5, 5, 0.018), transparent 55%),
    var(--bg);
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.menu-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { margin: 0; }
img { max-width: 100%; display: block; }
.page { /* overflow-x moved to body to preserve position:sticky on .nav */ }

/* Selection */
::selection { background: rgba(227, 6, 19, 0.14); color: var(--ink); }

/* Focus ring everywhere */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--precision);
  outline-offset: 3px;
  border-radius: 4px;
}

/* -------------------------------------------------------------------------
   Typography scale — editorial, confident
   ------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.25rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
}
h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.85rem);
  letter-spacing: -0.025em;
  line-height: 1.06;
}
h3 {
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  letter-spacing: -0.015em;
  line-height: 1.3;
}
h4 {
  font-family: var(--font);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

/* Body / lede / muted text */
.hero-copy,
.section-lede,
.lede,
.body-copy,
.article p,
.article li,
.card p,
.step p,
.post-card p,
.partner-card p,
.footer-brand p,
.footer-bottom {
  color: var(--muted);
}

.hero-copy,
.section-lede,
.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.6;
  font-weight: 400;
}

.body-copy { max-width: 66ch; }

/* -------------------------------------------------------------------------
   Section structure & rhythm
   ------------------------------------------------------------------------- */
.section {
  max-width: calc(var(--max) + 80px);
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: clamp(56px, 7vw, 92px);
  padding-bottom: clamp(56px, 7vw, 92px);
}

main > .section + .section {
  margin-top: clamp(10px, 1.6vw, 24px);
}

.section > .section-head,
.section > .reveal:first-child,
.section > .split,
.section > .grid,
.section > .cards,
.section > .steps,
.section > .card-grid {
  width: 100%;
}

main > .section:first-child,
main > .site-hero:first-child,
main > .hero:first-child {
  padding-top: clamp(72px, 9vw, 120px);
}

/* Section header block — kicker + heading, wider, more intentional */
.section-head,
.section > div:first-child:has(h2),
.kicker {
  max-width: 880px;
}

.kicker,
.panel-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin-bottom: 18px;
}

/* Blank-bar pseudo-element removed — kickers now carry a real semantic
   .kicker-icon element (see site-polish.css) instead. */

.panel-label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  margin-bottom: 12px;
}

.section-lede { margin-top: 6px; }

/* -------------------------------------------------------------------------
   Navigation — calm, persistent, premium
   ------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background: rgba(247, 247, 242, 0.86);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  transition: border-color 260ms var(--ease), background 260ms var(--ease);
}

.nav.is-scrolled,
.nav.scrolled {
  border-bottom-color: var(--line);
  background: rgba(247, 247, 242, 0.96);
}

.nav-inner {
  max-width: calc(var(--max) + 80px);
  min-height: 74px;
  padding: 0 40px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: clamp(16px, 2.4vw, 32px);
}

.brand,
.footer-logo { color: var(--ink); }

.brand img,
.footer-logo img {
  display: block;
  width: 150px;
  height: auto;
  opacity: 0.92;
}

.links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 2.4vw, 34px);
  font-size: 0.93rem;
  color: var(--muted);
}

.links a {
  position: relative;
  padding: 6px 0;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: color 200ms var(--ease);
}

.links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms var(--ease);
}

.links a:hover { color: var(--ink); }
.links a:hover::after { transform: scaleX(1); }

.nav-actions,
.nav .login,
.nav .cta { font-size: 0.9rem; }

/* Buttons — discreet, confident */
.cta,
.secondary,
.login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 0.92rem;
  font-weight: 550;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: transform 220ms var(--ease), background 220ms var(--ease),
              border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}

.cta {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--bg);
  box-shadow: 0 1px 2px rgba(5, 5, 5, 0.08), 0 8px 22px rgba(5, 5, 5, 0.1);
}

.cta:hover {
  transform: translateY(-1px);
  background: var(--dark);
  border-color: var(--dark);
  box-shadow: 0 2px 4px rgba(5, 5, 5, 0.1), 0 14px 30px rgba(5, 5, 5, 0.14);
}

.secondary,
.login {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink);
}

.secondary:hover,
.login:hover {
  transform: translateY(-1px);
  border-color: var(--ink);
  background: rgba(20, 32, 27, 0.03);
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.hero {
  align-items: center;
  gap: clamp(40px, 6vw, 84px);
}

.hero h1 {
  font-weight: 400;
}

.hero-title-line { display: block; }

.hero-copy {
  margin-top: 26px;
  max-width: 46ch;
}

.hero .actions,
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
}

/* Proof points — refined hairline row instead of pills */
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 38px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}

.hero-proof span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 0 20px 0 0;
  margin-right: 20px;
  position: relative;
}

.hero-proof span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.hero-proof span::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 1px;
  height: 14px;
  background: var(--line-strong);
  transform: translateY(-50%);
}

.hero-proof span:last-child::after { display: none; }

/* -------------------------------------------------------------------------
   Hero visual — calm architectural "coordination" panel (replaces the busy
   AI composite). The panel itself supplies the dark surface; the wrapping
   .hero-visual is just a rounded frame.
   ------------------------------------------------------------------------- */
.hero-visual {
  position: relative;
  display: block;
  padding: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--dark);
  border: 1px solid var(--dark-soft);
  box-shadow: var(--shadow);
}

.hero-visual::after { display: none; }

/* Legacy image-card chrome — kept inert for any other page still using it */
.hero-art-system,
.hero-art-system--composite,
.hero-art-card,
.hero-art-card--system { display: none; }
.visual-head { display: none; }

/* Hide the SaaS-demo overlays: component matrix, layer card, outcome strip.
   The approved copy already lives in the editorial hero text; these chrome
   fragments duplicate it and read like a dashboard mock. */
.component-matrix,
.component-strip,
.layer-card,
.outcome-strip,
.component-chip {
  display: none;
}

/* -------------------------------------------------------------------------
   Hero coordination panel — calm architectural "wealth map"
   Replaces the busy AI composite with a dark, editorial information panel:
   the many components a globally-mobile client juggles, converging on one
   coordinated plan. No stock art, no dashboard mock — just restraint.
   ------------------------------------------------------------------------- */
.coordination-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
  padding: clamp(26px, 3vw, 40px);
  background:
    radial-gradient(620px 360px at 86% 6%, rgba(184, 184, 176, 0.14), transparent 62%),
    radial-gradient(560px 320px at 8% 96%, rgba(247, 247, 242, 0.05), transparent 60%),
    radial-gradient(420px 260px at 18% 18%, rgba(227, 6, 19, 0.055), transparent 58%),
    linear-gradient(165deg, var(--dark) 0%, var(--dark-soft) 58%, #11110f 100%);
  color: var(--bg);
  overflow: hidden;
}

/* faint architectural grid lines — "precision" cue, not decoration */
.coordination-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(247, 247, 242, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 247, 242, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
  mask-image: radial-gradient(120% 100% at 50% 30%, #000 40%, transparent 92%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 30%, #000 40%, transparent 92%);
  pointer-events: none;
}

.coordination-panel > * { position: relative; z-index: 1; }

.coordination-panel__head .panel-label {
  color: rgba(184, 184, 176, 0.94);
  margin-bottom: 8px;
}

.coordination-panel__head h3 {
  color: var(--bg);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.9vw, 1.7rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  max-width: 18ch;
}

/* the component nodes — small, refined, converging */
.coordination-map {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  align-content: center;
}

.coordination-map li {
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(247, 247, 242, 0.78);
  padding: 9px 0 9px 20px;
  position: relative;
  border-bottom: 1px solid rgba(247, 247, 242, 0.08);
}

.coordination-map li:nth-child(2n) {
  padding-left: 22px;
  border-left: 1px solid rgba(247, 247, 242, 0.08);
}

.coordination-map li:nth-last-child(-n + 2) { border-bottom: 0; }

.coordination-map li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 1px;
  background: rgba(184, 184, 176, 0.72);
  transform: translateY(-50%);
}

/* the coordinated core — the convergence point */
.coordination-core {
  border-top: 1px solid rgba(184, 184, 176, 0.28);
  padding-top: clamp(18px, 2.2vw, 26px);
  margin-top: 4px;
}

.coordination-core__label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 10px;
}

.coordination-core__label::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--accent-soft);
}

.coordination-core p {
  color: rgba(247, 247, 242, 0.72);
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0;
  max-width: 44ch;
}

/* outputs — fine hairline row */
.coordination-outputs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: clamp(18px, 2.2vw, 26px);
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid rgba(247, 247, 242, 0.08);
}

.coordination-outputs span {
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(247, 247, 242, 0.62);
}

.coordination-outputs strong {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--bg);
  margin-top: 1px;
}

@media (max-width: 768px) {
  .coordination-map { grid-template-columns: 1fr; }
  .coordination-map li:nth-child(2n) { border-left: 0; padding-left: 20px; }
  .coordination-outputs { gap: 8px 20px; }
}

/* -------------------------------------------------------------------------
   Problem section
   ------------------------------------------------------------------------- */
.problem .problem-copy {
  display: grid;
  gap: 16px;
  max-width: 60ch;
}

.problem .questions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 8px;
  border-top: 1px solid var(--line);
}

.problem .question {
  border-bottom: 1px solid var(--line);
  padding: 18px 22px 18px 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0;
}

.problem .question:nth-child(2n) { border-left: 1px solid var(--line); padding-left: 22px; }

/* -------------------------------------------------------------------------
   Grids & cards — consistent, breathable, never colliding
   ------------------------------------------------------------------------- */
.grid,
.card-grid {
  display: grid;
  gap: clamp(18px, 2vw, 26px);
}

.grid.two,
.grid .two,
.luxury-grid-primary.grid.two,
.grid.two.luxury-grid-primary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.three,
.grid .three,
.luxury-grid-primary.grid.three,
.grid.three.luxury-grid-primary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.four,
.card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Use the full desktop width for 4-up service grids */
.service-cards,
.card-grid {
  max-width: 100%;
}

/* Cards — clean paper, hairline border, calm padding, no collision */
.card,
.step,
.post-card,
.partner-card,
.faq-card,
.value-panel,
.layer-card,
.metric,
.timeline-card,
.trust-card,
.use-case-card,
.compare-card,
.asset-card,
.privacy-card,
.tax-form-card,
.tax-result-card,
.rule-card,
.intelligence-card,
.mess-card,
.team-card,
.story-card,
.sample-card,
.security-card,
.tech-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: clamp(24px, 2.4vw, 32px);
  min-height: 0;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease),
              border-color 280ms var(--ease);
}

.card:hover,
.step:hover,
.post-card:hover,
.trust-card:hover,
.compare-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}

/* Hide the repeated category labels (e.g. "Tax", "Compare", "Wealth") that
   appear on every card — they merely duplicate the page context the user is
   already on, and the brief explicitly flags this as clutter. The card title
   carries the meaning. */
.card > span:first-child,
.step > span:first-child,
.post-card > span:first-child,
.trust-card > span:first-child,
.compare-card > span:first-child {
  display: none;
}

.card h3,
.step h3,
.post-card h3,
.trust-card h3,
.compare-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin-bottom: 10px;
  color: var(--ink);
}

.card p,
.step p,
.post-card p,
.trust-card p,
.compare-card p,
.service-card p,
.security-card p {
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}

/* Steps — numbered, editorial */
.step {
  position: relative;
  min-height: clamp(210px, 16vw, 250px);
}
.step span:first-child {
  font-family: var(--serif);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 16px;
}

/* Swiss clock colour discipline: inherited export CSS used rotating blue,
   green, amber and red stripes for process/service cards. Neutralise that
   old semantic rainbow so cards read as one sober Swiss system. */
.step,
.step:nth-child(1),
.step:nth-child(2),
.step:nth-child(3),
.step:nth-child(4),
.service-card,
.service-card.wealth,
.security-card,
.security-card:nth-child(1),
.security-card:nth-child(2),
.security-card:nth-child(3),
.process-card,
.proof-card {
  --step-color: var(--metal);
  --service: var(--metal);
  --accent: var(--text-primary);
}

.step::before,
.process-card::before,
.proof-card::before,
.security-card::before {
  height: 2px;
  background: linear-gradient(90deg, var(--metal), rgba(184, 184, 176, 0));
  opacity: 0.95;
}

.card span,
.step span,
.post-card span,
.partner-card span,
.trust-card span,
.team-card span,
.profile span,
.process-card span,
.proof-card span,
.security-card span,
.faq-card span {
  color: var(--text-secondary);
}

.panel,
.service-card,
.security-card,
.process-card,
.proof-card,
.card,
.step {
  border-color: var(--line);
}

/* Neutralise the decorative animated shapes from the Framer export */
.service-card::before,
.tax-node,
.tax-visual,
.tax-diagram,
.wealth-visual,
.wealth-diagram,
.wealth-bar,
.wealth-stack,
.wealth-axis,
.motion-board,
.motion-core,
.motion-node,
.tech-shape,
.service-diagram,
.service-visual,
.security-visual,
.calculator-preview::before,
.type-panel,
.swatch,
.color-card { display: none; }

.service-card,
.service-visual { background: var(--paper); }

/* -------------------------------------------------------------------------
   Panels / art panels (non-home hero side panels) — calm text-led
   ------------------------------------------------------------------------- */
.panel,
.art-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(26px, 3vw, 38px);
  overflow: hidden;
  min-height: 0;
}

.art-panel { display: grid; align-content: start; gap: 14px; }

.art-panel::before,
.art-panel::after,
body:not([data-route="/"]):not([data-route^="/legal/"]) .art-panel::before,
body:not([data-route="/"]):not([data-route^="/legal/"]) .art-panel::after {
  content: none;
  display: none;
}

/* Demote scenic generated hero imagery on non-home pages — text-led panel */
.art-panel .panel-media,
.panel-media {
  display: none;
}

.art-panel h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 6px 0 0;
  max-width: 22ch;
}

.art-panel--image-only .panel-media { display: none; }

.grid,
.cards,
.steps,
.card-grid,
.profiles,
.trust-grid,
.comparison-grid,
.intelligence-grid {
  align-items: stretch;
}

.grid.two,
.grid.three,
.grid.four,
.cards,
.steps,
.card-grid {
  gap: clamp(18px, 2vw, 28px);
}

.status,
.badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--paper-warm);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 5px 12px;
  border-radius: 999px;
  margin: 0;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

/* -------------------------------------------------------------------------
   Split / two-column editorial sections
   ------------------------------------------------------------------------- */
.split,
.split > div,
.section.split {
  align-items: start;
}

.section.split p.body-copy {
  font-size: 1.05rem;
  line-height: 1.65;
}

/* -------------------------------------------------------------------------
   Key takeaways / highlight boxes
   ------------------------------------------------------------------------- */
.key-takeaways,
.geo-direct {
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: clamp(22px, 2.4vw, 30px);
  margin: 0 0 32px;
}

.key-takeaways h2,
.geo-direct h2 {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.key-takeaways ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.key-takeaways li {
  position: relative;
  padding-left: 22px;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
}

.key-takeaways li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 1px;
  background: var(--accent);
}

/* -------------------------------------------------------------------------
   Service scope / "view additional" disclosures — streamlined
   ------------------------------------------------------------------------- */
.luxury-disclosure,
details.service-scope {
  margin-top: clamp(28px, 3.5vw, 44px);
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
}

.luxury-disclosure summary,
details.service-scope summary,
details.luxury-disclosure summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  padding: 13px 22px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  transition: background 220ms var(--ease), border-color 220ms var(--ease);
}

.luxury-disclosure summary::-webkit-details-marker,
details.service-scope summary::-webkit-details-marker { display: none; }

.luxury-disclosure summary::after,
details.service-scope summary::after {
  content: "+";
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--accent);
  transition: transform 280ms var(--ease);
}

.luxury-disclosure[open] summary::after,
details[open].service-scope summary::after { content: "−"; }

.luxury-disclosure[open] summary,
details[open].service-scope summary {
  border-color: var(--ink);
}

.luxury-disclosure > *:not(summary),
details.service-scope > *:not(summary) {
  margin-top: 26px;
}

/* -------------------------------------------------------------------------
   FAQ system — compact accordion rows, consistent across all pages
   ------------------------------------------------------------------------- */
.faqs,
.faq-stack,
.faq-wrap {
  display: grid;
  gap: 0;
  margin-top: clamp(18px, 2vw, 28px);
  border-top: 1px solid var(--line);
  max-width: 880px;
}

.faqs details,
.faq-stack details,
.faq-wrap details {
  position: relative;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

.faqs summary,
.faq-stack summary,
.faq-wrap summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 4px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--ink);
  transition: color 220ms var(--ease);
}

.faqs summary::-webkit-details-marker,
.faq-stack summary::-webkit-details-marker,
.faq-wrap summary::-webkit-details-marker { display: none; }

.faqs summary::after,
.faq-stack summary::after,
.faq-wrap summary::after {
  content: "";
  flex-shrink: 0;
  position: relative;
  width: 14px;
  height: 14px;
  margin-left: auto;
}

.faqs summary::after,
.faq-stack summary::after,
.faq-wrap summary::after {
  background:
    linear-gradient(var(--ink), var(--ink)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.5px 14px no-repeat;
  transition: transform 320ms var(--ease), opacity 320ms var(--ease);
}

.faqs details[open] summary::after,
.faq-stack details[open] summary::after,
.faq-wrap details[open] summary::after {
  transform: rotate(45deg);
  opacity: 0.6;
}

.faqs summary:hover,
.faq-stack summary:hover,
.faq-wrap summary:hover { color: var(--accent); }

.faqs p,
.faq-stack p,
.faq-wrap p {
  padding: 0 32px 18px 4px;
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.6;
  max-width: 70ch;
}

.faq-content { overflow: hidden; }

/* -------------------------------------------------------------------------
   Tables — compare tables
   ------------------------------------------------------------------------- */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  font-size: 0.93rem;
}

.compare-table th,
.compare-table td {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}

.compare-table th {
  background: var(--paper-warm);
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.compare-table tr:last-child td { border-bottom: 0; }
.compare-table .good { color: var(--green); font-weight: 600; }
.compare-table .bad { color: var(--faint); }

/* -------------------------------------------------------------------------
   CTA / final panels — dark, calm, confident
   ------------------------------------------------------------------------- */
.final,
.final-cta,
.cta-panel {
  background: var(--dark);
  color: var(--bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--dark-soft);
  box-shadow: var(--shadow);
  padding: clamp(40px, 6vw, 72px);
  position: relative;
  overflow: hidden;
}

.final::before,
.final-cta::before,
.cta-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 360px at 12% 0%, rgba(184, 184, 176, 0.12), transparent 60%),
    radial-gradient(600px 300px at 92% 100%, rgba(247, 247, 242, 0.05), transparent 60%),
    radial-gradient(420px 240px at 76% 4%, rgba(227, 6, 19, 0.045), transparent 58%);
  pointer-events: none;
}

.final > *,
.final-cta > *,
.cta-panel > * { position: relative; z-index: 1; }

.final h2,
.final-cta h2,
.cta-panel h2 {
  color: var(--bg);
}

.final .kicker,
.final-cta .kicker,
.cta-panel .kicker {
  color: var(--accent-soft);
}

.final .kicker::before,
.final-cta .kicker::before,
.cta-panel .kicker::before { background: var(--accent-soft); }

.final p,
.final-cta p,
.cta-panel p {
  color: rgba(247, 247, 242, 0.72);
}

.final .cta,
.final-cta .cta,
.cta-panel .cta {
  background: var(--bg);
  border-color: var(--bg);
  color: var(--dark);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.final .cta:hover,
.final-cta .cta:hover,
.cta-panel .cta:hover {
  background: #fff;
  transform: translateY(-1px);
}

.final .secondary,
.final-cta .secondary,
.cta-panel .secondary {
  background: transparent;
  border-color: rgba(247, 247, 242, 0.3);
  color: var(--bg);
}

.final .secondary:hover,
.final-cta .secondary:hover,
.cta-panel .secondary:hover {
  border-color: var(--bg);
  background: rgba(247, 247, 242, 0.06);
}

/* -------------------------------------------------------------------------
   Testimonials — calm quote, no carousel chrome
   ------------------------------------------------------------------------- */
.testimonials,
.testimonial-shell,
.testimonial-intro {
  max-width: 920px;
}

.testimonial-track { position: relative; }

.testimonial {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--precision);
  border-radius: var(--radius);
  padding: clamp(28px, 3.4vw, 44px);
  box-shadow: var(--shadow-soft);
}

.testimonial p,
.testimonial .voice-example {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

.testimonial-note,
.testimonial .testimonial-note,
.testimonial + * {
  display: block;
  margin-top: 18px;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.testimonial-controls,
.testimonial-buttons,
.testimonial-dots {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}

.testimonial-dots button,
[data-testimonial-dot] {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 0;
  background: var(--line-strong);
  padding: 0;
  cursor: pointer;
  transition: background 220ms var(--ease), width 220ms var(--ease);
}

[data-testimonial-dot].active {
  background: var(--precision);
  width: 22px;
  border-radius: 999px;
}

.testimonial-buttons button,
[data-testimonial-prev],
[data-testimonial-next] {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: border-color 220ms var(--ease), background 220ms var(--ease);
}

.testimonial-buttons button:hover,
[data-testimonial-prev]:hover,
[data-testimonial-next]:hover {
  border-color: var(--ink);
}

/* -------------------------------------------------------------------------
   Footer — premium advisory firm
   ------------------------------------------------------------------------- */
.site-footer {
  background:
    radial-gradient(900px 480px at 85% 0%, rgba(184, 184, 176, 0.11), transparent 58%),
    radial-gradient(700px 380px at 5% 100%, rgba(247, 247, 242, 0.05), transparent 55%),
    radial-gradient(420px 260px at 22% 0%, rgba(227, 6, 19, 0.04), transparent 58%),
    linear-gradient(160deg, var(--dark), var(--dark-soft));
  border-top: 1px solid var(--dark-soft);
  color: rgba(247, 247, 242, 0.66);
  padding-top: clamp(56px, 7vw, 88px);
}

.footer-inner {
  max-width: calc(var(--max) + 80px);
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(32px, 4vw, 56px);
}

.footer-brand p {
  max-width: 34ch;
  font-size: 0.93rem;
  line-height: 1.6;
}

.site-footer .footer-logo img {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.footer-col h3 {
  font-family: var(--font);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 247, 242, 0.92);
  margin-bottom: 18px;
}

.footer-col { display: grid; gap: 11px; align-content: start; }

.site-footer a {
  color: rgba(247, 247, 242, 0.66);
  font-size: 0.92rem;
  transition: color 200ms var(--ease);
}

.site-footer a:hover { color: var(--bg); }

.footer-bottom {
  max-width: calc(var(--max) + 80px);
  margin: clamp(40px, 5vw, 64px) auto 0;
  padding: 26px 40px;
  border-top: 1px solid rgba(247, 247, 242, 0.1);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
  color: rgba(247, 247, 242, 0.46);
}

/* -------------------------------------------------------------------------
   Article / insights / legal pages — editorial reading rhythm
   ------------------------------------------------------------------------- */
.article {
  max-width: 720px;
  margin: 0 auto;
}

.article p {
  font-size: 1.06rem;
  line-height: 1.72;
  margin-bottom: 20px;
}

.article h2 {
  margin-top: 48px;
  margin-bottom: 16px;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.article h3 {
  margin-top: 34px;
  margin-bottom: 12px;
  font-family: var(--serif);
  font-weight: 400;
}

.article ul,
.article ol { margin: 0 0 20px; padding-left: 1.3em; }
.article li { margin-bottom: 8px; line-height: 1.65; }

.related-links,
.link-list {
  margin-top: 40px;
}

.link-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.link-list li { border-bottom: 1px solid var(--line); }

.link-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px;
  font-size: 1rem;
  color: var(--ink);
  transition: color 220ms var(--ease), padding-left 280ms var(--ease);
}

.link-list a::after {
  content: "→";
  color: var(--accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 280ms var(--ease), transform 280ms var(--ease);
}

.link-list a:hover { color: var(--accent); }
.link-list a:hover::after { opacity: 1; transform: translateX(0); }

/* Post cards (insights index) */
.post-card,
.post-card--media { display: flex; flex-direction: column; gap: 10px; }

.post-card-media,
.post-card-media--coordination-arc,
.post-card-media--cross-border-map,
.post-card-media--founder-horizon,
.post-card-media--private-compass,
.post-card-media--process-timeline,
.post-card-media--tax-mountains,
.post-card-media--wealth-architecture {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--paper-warm);
  margin-bottom: 6px;
  opacity: 0.92;
}

.post-card span:first-child:not([class]) {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* -------------------------------------------------------------------------
   Cookie banner — quiet
   ------------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  left: auto;
  right: clamp(16px, 2vw, 28px);
  bottom: clamp(14px, 2vw, 24px);
  z-index: 80;
  max-width: min(310px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(5, 5, 5, 0.035), 0 10px 26px rgba(5, 5, 5, 0.08);
  border-radius: var(--radius);
  color: var(--muted);
  padding: 12px 12px 10px;
  font-size: 0.7rem;
  line-height: 1.28;
}

.cookie-banner p {
  margin: 0;
}

.cookie-actions {
  display: flex;
  gap: 8px;
}

.cookie-decline,
.cookie-accept,
.cookie-banner .cta,
.cookie-banner button {
  flex: 1 1 0;
  min-height: 32px;
  padding: 0 12px;
  font-size: 0.76rem;
}

/* Accept and Decline carry equal visual weight — neither is styled as the
   "expected" choice, since accepting or declining has no effect today
   (see centry.js: no analytics are gated on this preference yet). */
.cookie-decline {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
}

.cookie-accept {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* -------------------------------------------------------------------------
   Mobile menu
   (panel geometry + link styling are owned by site-polish.css; this file
   only re-skins the hamburger button below)
   ------------------------------------------------------------------------- */
.menu-toggle {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--paper);
}

.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after { background: var(--ink); }

/* -------------------------------------------------------------------------
   Tax calculator embed — contained, premium card
   ------------------------------------------------------------------------- */
.calculator-frame-shell,
.widget-frame,
.calculator-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   Misc structural cleanups
   ------------------------------------------------------------------------- */
.badge-row { margin-top: 8px; }

.reveal { opacity: 1; transform: none; }
.hero-visual { opacity: 1; }
.reveal.visible,
.hero-visual.visible { opacity: 1; transform: none; }

.heading-torch { display: none; }

/* Quote strip / signal grids inherit card treatment */
.quote-strip,
.signal-grid,
.signal,
.topic-cluster,
.topic-clusters,
.plan-grid,
.plan-row,
.plan-report,
.brand-snapshot,
.snapshot-row,
.profiles,
.profile { gap: clamp(18px, 2vw, 26px); }

/* -------------------------------------------------------------------------
   Colour-preview neutraliser
   -------------------------------------------------------------------------
   centry-site.css still contains the older experimental ?colour=... preview
   layer. This final zcode layer now treats Swiss clock as the production
   system, so any preview query should inherit the same palette rather than
   partially restoring the cream/bronze options.
   ------------------------------------------------------------------------- */
html[data-colour-option] {
  --centry-bg: var(--bg);
  --centry-paper: var(--paper);
  --centry-paper-soft: var(--paper-warm);
  --centry-ink: var(--ink);
  --centry-muted: var(--muted);
  --centry-line: var(--line);
  --centry-blue: var(--accent);
  --centry-green: var(--green);
  --centry-accent: var(--precision);
  --centry-nav-surface: rgba(247, 247, 242, 0.96);

  --preview-page-bg: var(--bg);
  --preview-card: var(--paper);
  --preview-border: var(--line);
  --preview-secondary: transparent;
  --preview-cta: var(--ink);
  --preview-cta-text: var(--bg);
  --preview-kicker-bg: transparent;
  --preview-kicker-text: var(--accent);
  --preview-band-a: var(--paper-warm);
  --preview-band-b: color-mix(in srgb, var(--surface-muted) 72%, white);
  --preview-dark: var(--dark);
  --preview-footer: linear-gradient(160deg, var(--dark), var(--dark-soft));
}

html[data-colour-option] body::after { display: none; }

html[data-colour-option] .page { background: var(--bg); }

html[data-colour-option] .nav {
  background: rgba(247, 247, 242, 0.96);
  border-bottom-color: var(--line);
}

html[data-colour-option] .cta,
html[data-colour-option] .nav-inner > .cta,
html[data-colour-option] .centry-mobile-menu a.cta {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
  box-shadow: 0 1px 2px rgba(5, 5, 5, 0.08), 0 8px 22px rgba(5, 5, 5, 0.1);
}

html[data-colour-option] .secondary,
html[data-colour-option] .login {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
  box-shadow: none;
}

html[data-colour-option] .kicker {
  background: transparent;
  border-color: transparent;
  color: var(--accent);
  box-shadow: none;
}

html[data-colour-option] .kicker::before { background: var(--precision); }

html[data-colour-option] body[data-route="/"] .hero-visual {
  background: var(--dark);
  border-color: var(--dark-soft);
}

html[data-colour-option] .final,
html[data-colour-option] .final-cta,
html[data-colour-option] .cta-panel,
html[data-colour-option] .tech {
  background: var(--dark);
}

html[data-colour-option] .site-footer {
  background:
    radial-gradient(900px 480px at 85% 0%, rgba(184, 184, 176, 0.11), transparent 58%),
    radial-gradient(700px 380px at 5% 100%, rgba(247, 247, 242, 0.05), transparent 55%),
    radial-gradient(420px 260px at 22% 0%, rgba(227, 6, 19, 0.04), transparent 58%),
    linear-gradient(160deg, var(--dark), var(--dark-soft));
}

/* Homepage Swiss-clock hero correction. The earlier shared site layer had a
   higher-specificity homepage visual shell with a blue cast; keep the premium
   framed composition, but make it charcoal, paper, silver and precision-red. */
body[data-route="/"] .hero-visual,
html[data-colour-option] body[data-route="/"] .hero-visual {
  display: block;
  align-content: initial;
  min-height: clamp(500px, 37vw, 620px);
  padding: clamp(14px, 1.45vw, 20px);
  border-radius: clamp(18px, 2vw, 26px);
  border: 1px solid var(--metal);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(5, 5, 5, 0.04), 0 26px 76px rgba(5, 5, 5, 0.08);
}

body[data-route="/"] .hero-visual::before,
body[data-route="/"] .hero-visual::after,
html[data-colour-option] body[data-route="/"] .hero-visual::before,
html[data-colour-option] body[data-route="/"] .hero-visual::after {
  content: none;
  display: none;
}

body[data-route="/"] .coordination-panel,
html[data-colour-option] body[data-route="/"] .coordination-panel {
  position: relative;
  inset: auto;
  width: 100%;
  min-height: clamp(470px, 34vw, 580px);
  border-radius: clamp(12px, 1.35vw, 18px);
  border: 1px solid rgba(184, 184, 176, 0.2);
}

body[data-route="/"] .coordination-panel::after,
html[data-colour-option] body[data-route="/"] .coordination-panel::after {
  content: "";
  position: absolute;
  top: clamp(28px, 3.2vw, 44px);
  right: clamp(30px, 4vw, 54px);
  z-index: 1;
  width: 2px;
  height: clamp(58px, 7vw, 96px);
  border-radius: 999px;
  background: var(--precision);
  opacity: 0.86;
  transform: rotate(32deg);
  transform-origin: 50% 0;
  box-shadow: 0 0 0 4px rgba(227, 6, 19, 0.08);
}

body[data-route="/"] .hero-proof span::before {
  background: var(--precision);
}

body[data-route="/"] .coordination-core__label::before {
  background: var(--precision);
}

/* -------------------------------------------------------------------------
   Responsive — tablet & mobile
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .grid.four,
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.three,
  .grid .three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-inner { grid-template-columns: 1fr 1fr; }

  body:not([data-route="/"]) .hero .art-panel {
    padding: clamp(20px, 3vw, 28px);
  }
}

@media (max-width: 768px) {
  .section {
    padding-left: 24px;
    padding-right: 24px;
    padding-top: clamp(44px, 9vw, 64px);
    padding-bottom: clamp(44px, 9vw, 64px);
  }
  .nav-inner { padding: 0 24px; min-height: 66px; }
  .footer-inner { grid-template-columns: 1fr; padding: 0 24px; gap: 36px; }
  .footer-bottom { padding: 24px; flex-direction: column; }

  /* Force single-column hero & grids; neutralise base minmax(390px/280px)
     minimums that overflow a 390px viewport. */
  .hero,
  .section.hero,
  .split,
  .grid,
  .grid.two,
  .grid.three,
  .grid.four,
  .grid.two.luxury-grid-primary,
  .grid.three.luxury-grid-primary,
  .grid.four.luxury-grid-primary,
  .luxury-grid-primary.grid.two,
  .luxury-grid-primary.grid.three,
  .luxury-grid-primary.grid.four,
  .grid.two.luxury-grid-secondary,
  .grid.three.luxury-grid-secondary,
  .grid.four.luxury-grid-secondary,
  .luxury-grid-secondary.grid.two,
  .luxury-grid-secondary.grid.three,
  .luxury-grid-secondary.grid.four,
  .card-grid,
  .grid .two,
  .grid .three,
  [class*="luxury-grid"] {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .hero > *,
  .grid > *,
  .split > *,
  [class*="luxury-grid"] > * { min-width: 0; max-width: 100%; }
  .hero-copy { max-width: none; }

  body:not([data-route="/"]) .hero .art-panel {
    display: none;
  }

  .problem .questions { grid-template-columns: 1fr; }
  .problem .question:nth-child(2n) { border-left: 0; padding-left: 0; }

  .hero-proof { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero-proof span { padding: 0; margin: 0; }
  .hero-proof span::after { display: none; }

  body { font-size: 16px; }
  h1 { font-size: clamp(2.1rem, 8vw, 2.8rem); }
  h2 { font-size: clamp(1.6rem, 6vw, 2.1rem); }

  .final,
  .final-cta,
  .cta-panel { padding: clamp(32px, 8vw, 44px); }

  .card,
  .step,
  .post-card,
  .trust-card,
  .compare-card,
  .service-card,
  .security-card {
    min-height: 0;
    padding: 22px;
  }

  .faqs summary,
  .faq-stack summary,
  .faq-wrap summary {
    padding: 15px 0;
    font-size: 1rem;
  }

  .faqs p,
  .faq-stack p,
  .faq-wrap p {
    padding: 0 24px 16px 0;
    font-size: 0.94rem;
  }

  .cookie-banner {
    left: 12px;
    right: auto;
    bottom: 10px;
    max-width: min(300px, calc(100vw - 24px));
    gap: 8px;
    padding: 10px 10px 8px;
    font-size: 0.66rem;
    line-height: 1.22;
  }

  .cookie-decline,
  .cookie-accept,
  .cookie-banner .cta,
  .cookie-banner button {
    min-height: 28px;
    padding: 0 10px;
    font-size: 0.7rem;
  }
}

/* Desktop nav hidden links on small screens handled by JS-injected menu */
@media (max-width: 860px) {
  .nav .links,
  .nav .login.nav-login,
  .nav .nav-actions { display: none; }
  .nav-inner { grid-template-columns: auto 1fr auto; }
  .nav .menu-toggle { display: inline-grid; }
}

/* Print */
@media print {
  .nav, .site-footer, .cookie-banner, .menu-toggle { display: none; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   AUTHORITATIVE COMPONENT FIXES
   These scoped overrides resolve cascade conflicts between the 3 CSS layers.
   They use !important to definitively win against layer 2's !important rules.
   ========================================================================== */


/* ---- Fix 1: Problem section — restore question pill grid ---- */

.problem .questions {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
  margin-top: 32px !important;
  border-top: none !important;
  border: none !important;
}

.problem .question {
  display: flex !important;
  align-items: center !important;
  min-height: 56px !important;
  padding: 16px 22px !important;
  border: 1px solid var(--line, rgba(17, 23, 25, 0.13)) !important;
  border-radius: 16px !important;
  border-bottom: 1px solid var(--line, rgba(17, 23, 25, 0.13)) !important;
  background: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 22, 33, 0.04) !important;
  font-family: var(--serif, Georgia, serif) !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.35 !important;
  color: var(--ink, #111719) !important;
  margin: 0 !important;
}

.problem .question:nth-child(2n) {
  border-left: 1px solid var(--line, rgba(17, 23, 25, 0.13)) !important;
  padding-left: 22px !important;
}

@media (max-width: 640px) {
  .problem .questions {
    grid-template-columns: 1fr !important;
  }
}


/* ---- Fix 1b: Service card icon — inline inside the label pill ---- */

.service-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.service-label .service-card-icon,
.service-label .card-icon {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
  color: inherit !important;
}


/* ---- Fix 2: Service scope disclosure — one clean definition ---- */

details.service-scope {
  margin-top: clamp(20px, 2.3vw, 30px) !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding: 0 !important;
  min-height: 0 !important;
}

details.service-scope summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  min-height: 52px !important;
  padding: 0 !important;
  cursor: pointer !important;
  color: var(--ink, #111719) !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.25 !important;
  list-style: none !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

details.service-scope summary::-webkit-details-marker {
  display: none !important;
}

details.service-scope summary::marker {
  display: none !important;
  content: "" !important;
}

details.service-scope summary::after {
  width: 28px !important;
  height: 28px !important;
  display: grid !important;
  flex: 0 0 28px !important;
  place-items: center !important;
  border: 1px solid var(--line, rgba(17, 23, 25, 0.13)) !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--muted, rgba(17, 23, 25, 0.64)) !important;
  content: "+" !important;
  font-size: 16px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

details[open].service-scope summary::after {
  content: "−" !important;
}

details.service-scope .service-list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: clamp(14px, 1.8vw, 22px) !important;
  margin-top: clamp(12px, 1.5vw, 18px) !important;
  padding: 0 !important;
  list-style: none !important;
}

details.service-scope .service-list li,
details.service-scope .service-list .scope-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  padding: 14px 16px !important;
  border: 1px solid var(--line, rgba(17, 23, 25, 0.13)) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  box-shadow: none !important;
  min-height: 0 !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}

details.service-scope .service-list .scope-item:hover {
  border-color: color-mix(in oklch, var(--service, var(--blue)) 30%, var(--line)) !important;
  background: rgba(255, 255, 255, 0.95) !important;
}

details.service-scope .service-list .scope-head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  color: var(--ink, #111719) !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

details.service-scope .service-list .scope-icon,
details.service-scope .service-list .scope-head .card-icon {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
  color: color-mix(in oklch, var(--service, var(--blue)) 70%, var(--ink)) !important;
  opacity: 0.7 !important;
}

details.service-scope .service-list .scope-desc {
  display: block !important;
  margin-top: 5px !important;
  padding-left: 0 !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--muted, rgba(17, 23, 25, 0.54)) !important;
}

@media (max-width: 640px) {
  details.service-scope .service-list {
    grid-template-columns: 1fr !important;
  }
}


/* ---- Fix 3: Calculator panel — restore 2-column grid + gradient ---- */

.calculator-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.72fr) !important;
  gap: 34px !important;
  align-items: center !important;
  padding: clamp(28px, 4vw, 46px) !important;
  border: 1px solid rgba(111, 125, 118, 0.2) !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(111, 125, 118, 0.1), transparent 18rem),
    radial-gradient(circle at 92% 72%, rgba(139, 118, 88, 0.1), transparent 15rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(248, 249, 247, 0.96)) !important;
  box-shadow: 0 24px 72px rgba(17, 23, 25, 0.06) !important;
  overflow: visible !important;
}

.calculator-panel h2 {
  max-width: 760px !important;
  font-size: clamp(32px, 4vw, 54px) !important;
}

.calculator-panel p {
  max-width: 660px !important;
  margin-top: 18px !important;
  color: var(--muted, rgba(17, 23, 25, 0.64)) !important;
  font-size: 18px !important;
  line-height: 1.48 !important;
}

.calculator-preview {
  border: 1px solid var(--line, rgba(17, 23, 25, 0.13)) !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 12px 36px rgba(0, 22, 33, 0.06) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.calculator-preview-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--line, rgba(17, 23, 25, 0.13)) !important;
}

.calculator-preview-top span {
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--muted, rgba(17, 23, 25, 0.64)) !important;
}

.calculator-preview-top strong {
  font-size: 13px !important;
  color: var(--muted, rgba(17, 23, 25, 0.64)) !important;
}

.calculator-preview-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  padding: 0 !important;
}

.calculator-preview-field {
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--line, rgba(17, 23, 25, 0.13)) !important;
  border-right: 1px solid var(--line, rgba(17, 23, 25, 0.13)) !important;
}

.calculator-preview-field:nth-child(2n) {
  border-right: none !important;
}

.calculator-preview-field span {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--muted, rgba(17, 23, 25, 0.64)) !important;
  margin-bottom: 4px !important;
}

.calculator-preview-field strong {
  display: block !important;
  font-size: 14px !important;
  color: var(--ink, #111719) !important;
}

.calculator-preview-result {
  padding: 16px 20px !important;
  background: rgba(248, 249, 247, 0.7) !important;
  border-top: 1px solid var(--line, rgba(17, 23, 25, 0.13)) !important;
}

.calculator-preview-result span {
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--muted, rgba(17, 23, 25, 0.64)) !important;
  margin-bottom: 6px !important;
}

.calculator-preview-result strong {
  display: block !important;
  font-size: 17px !important;
  color: var(--ink, #111719) !important;
  margin-bottom: 4px !important;
}

.calculator-preview-result em {
  display: block !important;
  font-size: 12.5px !important;
  font-style: normal !important;
  color: var(--muted, rgba(17, 23, 25, 0.64)) !important;
  line-height: 1.5 !important;
}

@media (max-width: 860px) {
  .calculator-panel {
    grid-template-columns: 1fr !important;
  }
}


/* ---- Fix 4: Compare stage — prevent plan-report truncation ---- */

.compare-stage {
  min-height: 720px !important;
}

.before-list,
.after-plan {
  bottom: 24px !important;
}

.plan-report {
  border: 1px solid rgba(17, 23, 25, 0.14) !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  box-shadow: 0 24px 72px rgba(17, 23, 25, 0.1) !important;
  overflow: hidden !important;
}

.plan-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 18px !important;
  padding: 22px 24px !important;
  border-bottom: 1px solid var(--line, rgba(17, 23, 25, 0.13)) !important;
  background: rgba(248, 249, 247, 0.6) !important;
}

.plan-top h4 {
  margin-top: 7px !important;
  font-size: 28px !important;
  line-height: 1.05 !important;
}

.plan-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  border-bottom: 1px solid var(--line, rgba(17, 23, 25, 0.13)) !important;
  gap: 0 !important;
}

.plan-metric {
  min-height: 96px !important;
  padding: 16px 18px !important;
  border-right: 1px solid var(--line, rgba(17, 23, 25, 0.13)) !important;
}

.plan-metric:last-child {
  border-right: 0 !important;
}

.plan-metric strong {
  display: block !important;
  margin-top: 8px !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

.plan-actions {
  display: grid !important;
  gap: 0 !important;
  padding: 10px 22px 18px !important;
}

.plan-row {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--line, rgba(17, 23, 25, 0.13)) !important;
}

.plan-row:last-child {
  border-bottom: none !important;
}

.plan-row strong {
  display: block !important;
  font-size: 14.5px !important;
  line-height: 1.25 !important;
}

.plan-row > div > span {
  display: block !important;
  margin-top: 3px !important;
  color: var(--muted, rgba(17, 23, 25, 0.64)) !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}


/* ---- Fix 5: Tech section — definitive dark-card styling ---- */

.tech {
  border-radius: 38px !important;
  background: var(--ink, #111719) !important;
  color: #ffffff !important;
  overflow: hidden !important;
  position: relative !important;
}

.tech h2 {
  color: #ffffff !important;
}

.tech .kicker {
  color: rgba(160, 210, 190, 0.88) !important;
}

.tech .section-lede {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* ---- Tech section: two-column layout (intro left, 2×2 grid right) ---- */
.section.tech {
  max-width: none !important;
}

.tech-layout {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 48px !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: none !important;
}

.tech-intro {
  flex: 0 0 340px !important;
  max-width: 340px !important;
  position: sticky !important;
  top: 100px !important;
}


.tech-intro h2 {
  margin-bottom: 20px !important;
}

.tech-intro .section-lede {
  max-width: none !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
}

.tech-wealth-map {
  margin: 24px 0 0 !important;
  padding: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(122, 175, 181, 0.18) !important;
}

.tech-wealth-map img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* Lightbox trigger */
.tech-lightbox-trigger {
  cursor: zoom-in !important;
  position: relative !important;
  transition: transform 200ms ease, box-shadow 200ms ease !important;
}

.tech-lightbox-trigger:hover {
  transform: scale(1.01) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
}

.tech-lightbox-hint {
  position: absolute !important;
  bottom: 10px !important;
  right: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  opacity: 0 !important;
  transition: opacity 200ms ease !important;
  pointer-events: none !important;
}

.tech-lightbox-trigger:hover .tech-lightbox-hint {
  opacity: 1 !important;
}

/* Lightbox modal */
.tech-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 250ms ease, visibility 250ms ease !important;
  cursor: zoom-out !important;
}

.tech-lightbox[aria-hidden="false"] {
  opacity: 1 !important;
  visibility: visible !important;
}

.tech-lightbox img {
  max-width: 92vw !important;
  max-height: 90vh !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.4) !important;
  object-fit: contain !important;
  transform: scale(0.95) !important;
  transition: transform 250ms ease !important;
}

.tech-lightbox[aria-hidden="false"] img {
  transform: scale(1) !important;
}

.tech-lightbox-close {
  position: absolute !important;
  top: 20px !important;
  right: 24px !important;
  width: 40px !important;
  height: 40px !important;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 24px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 150ms ease !important;
}

.tech-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}


.tech-grid {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.tech .tech-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 200px !important;
  padding: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.075) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.tech .tech-card .tech-diagram {
  flex: 1 1 auto !important;
}

.tech .tech-card h3 {
  margin-top: auto !important;
}

.tech .tech-card:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  transform: translateY(-2px) !important;
}

.tech .tech-card h3 {
  color: #ffffff !important;
  font-family: var(--sans, system-ui, -apple-system, sans-serif) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.12 !important;
  margin-bottom: 8px !important;
}

.tech .tech-card p {
  color: rgba(255, 255, 255, 0.74) !important;
  font-size: 14px !important;
  line-height: 1.56 !important;
}

/* Tech card decorative shapes */
.tech .tech-shape {
  display: grid !important;
  height: 68px !important;
  margin-bottom: 20px !important;
  opacity: 0.92 !important;
}

/* Remove old nth-child rule (no longer needed for 2×2) */
.tech .tech-card:nth-child(4) {
  grid-column: auto !important;
}

@media (max-width: 980px) {
  .tech-layout {
    flex-wrap: wrap !important;
    gap: 32px !important;
  }
  .tech-intro {
    flex: 1 1 100% !important;
    max-width: none !important;
    position: static !important;
  }
  .tech-grid {
    flex: 1 1 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .tech-grid {
    grid-template-columns: 1fr !important;
  }
  .tech .tech-card {
    min-height: 180px !important;
  }
}


/* ---- Calculator section: two-column layout (intro left, widget right) ---- */

.calculator-cta {
  max-width: none !important;
}

.calc-layout {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 48px !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: none !important;
}

.calc-intro {
  flex: 0 0 340px !important;
  max-width: 340px !important;
  position: sticky !important;
  top: 100px !important;
}

.calc-intro .kicker {
  margin-bottom: 16px !important;
}

.calc-intro h2 {
  margin-bottom: 20px !important;
}

.calc-intro p {
  color: var(--centry-muted, rgba(0, 22, 33, 0.56)) !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
}

.calc-intro .calculator-note {
  display: block !important;
  margin-top: 16px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.calc-widget {
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

@media (max-width: 980px) {
  .calc-layout {
    flex-wrap: wrap !important;
    gap: 32px !important;
  }
  .calc-intro {
    flex: 1 1 100% !important;
    max-width: none !important;
    position: static !important;
  }
  .calc-widget {
    flex: 1 1 100% !important;
  }
}


/* ==========================================================================
   SECURITY & PRIVACY — Refined section
   Sharper container, reduced grid, glass cards, premium CTA
   ========================================================================== */

/* --- Container: navy gradient, sharper radius, inset glow --- */

.section.security {
  border-radius: 24px !important;
  border: 1px solid rgba(122, 175, 181, 0.12) !important;
  background:
    linear-gradient(168deg, #1E2D3D 0%, #141E2A 55%, #111A24 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(122, 175, 181, 0.06),
    0 32px 80px rgba(0, 0, 0, 0.18) !important;
  overflow: hidden !important;
  position: relative !important;
}

/* --- Grid: softer, faded to top-right quadrant --- */

.section.security::before {
  opacity: 0.08 !important;
  mask-image:
    radial-gradient(ellipse 70% 60% at 75% 20%, black 10%, transparent 80%) !important;
  -webkit-mask-image:
    radial-gradient(ellipse 70% 60% at 75% 20%, black 10%, transparent 80%) !important;
}

/* --- Typography in dark context --- */

.section.security h2 {
  color: #F7F7F2 !important;
}

.section.security .section-lede {
  color: rgba(247, 247, 242, 0.78) !important;
}

.section.security .kicker {
  color: #B8D8DC !important;
  background: rgba(122, 175, 181, 0.12) !important;
  border-color: rgba(122, 175, 181, 0.35) !important;
}

/* --- Cards: translucent glass, teal border, top highlight, motifs --- */

.security-card {
  background: rgba(26, 40, 56, 0.65) !important;
  border: 1px solid rgba(122, 175, 181, 0.18) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 1px 0 0 rgba(122, 175, 181, 0.12),
    0 8px 32px rgba(0, 0, 0, 0.15) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 0 !important;
  grid-template-rows: auto auto auto !important;
  gap: 12px !important;
  padding: 24px !important;
}

.security-card h3 {
  color: #FFFFFF !important;
  font-weight: 500 !important;
  min-height: 0 !important;
}

.security-card p {
  color: rgba(247, 247, 242, 0.78) !important;
}

.security-visual {
  display: none !important;
}

/* --- Icons: dark-themed card-icon-wrap for security context --- */

.security-card .card-icon-wrap {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(122, 175, 181, 0.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 4px !important;
  flex-shrink: 0 !important;
}

.security-card .card-icon-wrap .card-icon {
  width: 20px !important;
  height: 20px !important;
  color: #7AAFB5 !important;
}

/* Remove the old CSS pseudo-element motifs */
.security-card::before {
  display: none !important;
}

/* --- CTA: teal pill matching the Start Here section --- */

.security-actions .cta {
  background: #7AAFB5 !important;
  border-color: #7AAFB5 !important;
  color: #111719 !important;
}

.security-actions .cta:hover {
  background: #5A8F98 !important;
  border-color: #5A8F98 !important;
}


/* ==========================================================================
   WHY IT MATTERS — Redesigned section
   Fragmented adviser row → converging flow → coordinated plan card
   ========================================================================== */

/* --- Layout --- */

.why-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(28px, 3.5vw, 48px);
  align-items: start;
  margin-top: clamp(24px, 3vw, 40px);
}

.why-narrative {
  position: sticky;
  top: 120px;
}

/* --- Lede box (replaces loose section-lede) --- */

.why-lede-box {
  padding: 22px 24px !important;
  border-radius: 16px !important;
  background: color-mix(in oklch, var(--paper-warm, #f5f0eb) 40%, white) !important;
  border: 1px solid var(--line, rgba(17, 23, 25, 0.13)) !important;
  box-shadow: 0 2px 12px rgba(0, 22, 33, 0.03) !important;
}

.why-lede-box p {
  color: var(--muted, rgba(17, 23, 25, 0.64));
  font-size: clamp(14.5px, 1vw, 16px);
  line-height: 1.62;
}

.why-lede-box p + p {
  margin-top: 14px;
}

/* --- Question pills (editorial, not buttons) --- */

.why-questions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: clamp(20px, 2.5vw, 28px);
}

.why-question {
  padding: 12px 16px;
  border-left: 3px solid var(--line, rgba(17, 23, 25, 0.13));
  font-family: var(--serif, Georgia, serif);
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--muted, rgba(17, 23, 25, 0.64));
  transition: border-color 0.25s ease, color 0.25s ease;
}

.why-question:hover {
  border-color: var(--blue, oklch(61% 0.145 225));
  color: var(--ink, #111719);
}

/* --- Adviser silo row --- */

.adviser-row {
  position: relative;
}

.adviser-row-label {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted, rgba(17, 23, 25, 0.64));
  margin-bottom: 14px;
  position: relative;
}

.adviser-row-label::before,
.adviser-row-label::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 54px);
  height: 1px;
  border-top: 1px dashed var(--line, rgba(17, 23, 25, 0.18));
}

.adviser-row-label::before { left: 0; }
.adviser-row-label::after { right: 0; }

.adviser-silos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.adviser-silo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px 4px 12px;
  border: 1px dashed var(--line, rgba(17, 23, 25, 0.18));
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  transition: border-color 0.2s ease;
}

.adviser-silo:hover {
  border-color: var(--blue, oklch(61% 0.145 225));
}

.silo-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line, rgba(17, 23, 25, 0.13));
  border-radius: 9px;
  background: var(--paper, #ffffff);
  color: var(--blue, oklch(61% 0.145 225));
  margin-bottom: 8px;
}

.silo-icon svg {
  width: 18px;
  height: 18px;
}

.adviser-silo strong {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--ink, #111719);
  margin-bottom: 2px;
}

.adviser-silo span {
  font-size: 9.5px;
  color: var(--muted, rgba(17, 23, 25, 0.64));
  line-height: 1.3;
}

/* --- Converging flow connector (SVG-based) --- */

.flow-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
}

.flow-svg {
  width: 100%;
  height: 50px;
}

.flow-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue, oklch(61% 0.145 225));
  padding: 3px 12px;
  border: 1px solid color-mix(in oklch, var(--blue, oklch(61% 0.145 225)) 30%, transparent);
  border-radius: 100px;
  background: color-mix(in oklch, var(--blue, oklch(61% 0.145 225)) 6%, white);
  margin-bottom: 6px;
}

/* Pull the right column up so it starts alongside the heading */
.why-visual {
  margin-top: -20px;
}

/* --- Coordinated plan card --- */

.coordinated-plan {
  border: 1px solid color-mix(in oklch, var(--blue, oklch(61% 0.145 225)) 25%, var(--line, rgba(17, 23, 25, 0.13)));
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95),
    color-mix(in oklch, var(--blue, oklch(61% 0.145 225)) 4%, white)
  );
  box-shadow: 0 12px 48px rgba(0, 22, 33, 0.06);
  overflow: hidden;
}

.coordinated-plan-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  max-height: 180px;
  overflow: hidden;
}

.coordinated-plan-text {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.coordinated-plan-text h3 {
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink, #111719);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.coordinated-plan-text p {
  font-size: clamp(13px, 0.9vw, 15px);
  line-height: 1.55;
  color: var(--muted, rgba(17, 23, 25, 0.64));
}

.coordinated-plan-img {
  width: 100%;
  height: 100%;
  min-height: 160px;
  object-fit: cover;
  border-radius: 0 17px 0 0;
}

/* --- Proof badges (inside coordinated plan card) --- */

.coordinated-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--line, rgba(17, 23, 25, 0.1));
}

.coordinated-proof .proof-badge {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted, rgba(17, 23, 25, 0.64));
  letter-spacing: 0.01em;
  white-space: nowrap;
  border-right: 1px solid var(--line, rgba(17, 23, 25, 0.1));
}

.coordinated-proof .proof-badge:last-child {
  border-right: none;
}

.coordinated-proof .proof-badge svg {
  color: var(--blue, oklch(61% 0.145 225));
  flex-shrink: 0;
}

/* Remove the old standalone proof strip */
.compare-proof { display: none; }

/* --- Responsive --- */

@media (max-width: 980px) {
  .why-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .why-narrative {
    position: static;
  }

  .adviser-silos {
    grid-template-columns: repeat(3, 1fr);
  }

  .why-visual {
    margin-top: 0;
  }
}

@media (max-width: 640px) {
  .why-questions {
    grid-template-columns: 1fr;
  }

  .adviser-silos {
    grid-template-columns: repeat(2, 1fr);
  }

  .coordinated-plan-inner {
    grid-template-columns: 1fr;
  }

  .coordinated-plan-img {
    border-radius: 0;
    max-height: 180px;
  }

  .coordinated-proof {
    flex-direction: column;
  }

  .coordinated-proof .proof-badge {
    border-right: none;
    border-bottom: 1px solid var(--line, rgba(17, 23, 25, 0.1));
    justify-content: flex-start;
    padding: 8px 16px;
  }

  .coordinated-proof .proof-badge:last-child {
    border-bottom: none;
  }
}

/* ---- Card icon containers (Wealth Engineering, Trust) ---- */

.card-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in oklch, var(--accent, #7AAFB5) 14%, var(--bg, #F4F1EC));
  margin-bottom: 16px;
  flex-shrink: 0;
}

.card-icon-wrap .card-icon {
  width: 20px;
  height: 20px;
  color: var(--accent, #7AAFB5);
}

/* ---- Profile images (Who we help) ---- */

.profile-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 18px;
}

.profile-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.85) contrast(1.02);
  transition: transform 420ms ease, filter 420ms ease;
}

.profile:hover .profile-img-wrap img {
  transform: scale(1.04);
  filter: saturate(1) contrast(1.05);
}


/* ---- What We Do — 2-column timeline layout ---- */

.wwd-layout {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 48px !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: none !important;
}

.wwd-copy {
  flex: 0 0 360px !important;
  max-width: 360px !important;
  align-self: center !important;
}

.wwd-copy .kicker {
  margin-bottom: 14px !important;
}

.wwd-copy h2 {
  font-size: clamp(28px, 3vw, 40px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.015em !important;
  color: var(--ink, #111719) !important;
}

.wwd-lede {
  margin-top: 18px !important;
  color: var(--muted, rgba(17, 23, 25, 0.64)) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

/* Right column: phases + ongoing bar — fills all remaining space */
.wwd-right {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* Phase grid: 4 equal columns */
.wwd-phases {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  position: relative !important;
  align-items: stretch !important;
  width: 100% !important;
}

/* Connecting line — runs between icon centers to the arrow */
.wwd-phases::before {
  content: "" !important;
  position: absolute !important;
  top: 22px !important;
  left: calc(12.5% + 22px) !important;
  right: calc(12.5% - 22px) !important;
  height: 1.5px !important;
  background: var(--line, rgba(17, 23, 25, 0.13)) !important;
  z-index: 0 !important;
}

/* Arrow — sits just past the last icon, aligned to the connecting line */
.wwd-arrow {
  position: absolute !important;
  top: 13px !important;
  left: calc(87.5% + 36px) !important;
  right: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1 !important;
}

.wwd-arrow-icon {
  width: 18px !important;
  height: 18px !important;
  color: var(--muted, rgba(17, 23, 25, 0.30)) !important;
  z-index: 1 !important;
}

/* Each phase column */
.wwd-phase {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  cursor: default !important;
}

/* Icon circle */
.wwd-phase-icon {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--line, rgba(17, 23, 25, 0.13)) !important;
  background: white !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease !important;
}

.wwd-icon {
  width: 20px !important;
  height: 20px !important;
  color: var(--ink, #111719) !important;
  opacity: 0.7 !important;
  transition: color 260ms ease, opacity 260ms ease !important;
}

/* Phase label */
.wwd-phase-label {
  display: block !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--ink, #111719) !important;
  text-align: center !important;
  transition: color 260ms ease !important;
}

/* Phase card */
.wwd-card {
  flex: 1 1 auto !important;
  width: 100% !important;
  padding: 16px !important;
  border: 1px solid var(--line, rgba(17, 23, 25, 0.13)) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease !important;
}

.wwd-card h3 {
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  color: var(--ink, #111719) !important;
  line-height: 1.25 !important;
  margin-bottom: 6px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.wwd-card p {
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--muted, rgba(17, 23, 25, 0.54)) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* === Hover animation: icon grows + turns teal, card lifts === */
.wwd-phase:hover .wwd-phase-icon {
  transform: scale(1.15) !important;
  border-color: var(--accent, #7AAFB5) !important;
  box-shadow: 0 0 0 4px rgba(122, 175, 181, 0.12) !important;
}

.wwd-phase:hover .wwd-icon {
  color: var(--accent, #7AAFB5) !important;
  opacity: 1 !important;
}

.wwd-phase:hover .wwd-phase-label {
  color: var(--accent, #7AAFB5) !important;
}

.wwd-phase:hover .wwd-card {
  transform: translateY(-3px) !important;
  border-color: rgba(122, 175, 181, 0.4) !important;
  box-shadow: 0 6px 20px rgba(17, 23, 25, 0.06) !important;
}

/* Ongoing bar — inside wwd-right, under the diagram only */
.wwd-ongoing {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 12px 20px !important;
  border-radius: 999px !important;
  background: var(--surface-muted, #EFEFED) !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--ink, #111719) !important;
}

.wwd-ongoing-icon {
  width: 14px !important;
  height: 14px !important;
  color: var(--accent, #7AAFB5) !important;
  flex-shrink: 0 !important;
}

.wwd-ongoing-sep {
  color: var(--muted, rgba(17, 23, 25, 0.3)) !important;
  font-size: 14px !important;
}

.wwd-ongoing-accent {
  color: #3F6B71 !important;
}

.wwd-quote {
  width: 100% !important;
  margin: 14px 0 0 !important;
  padding: 12px 18px 12px 18px !important;
  border-left: 2px solid #7AAFB5 !important;
  border-top: none !important;
}

.wwd-quote p {
  margin: 0 !important;
  font-family: var(--font, "Archia Regular", -apple-system, system-ui, sans-serif) !important;
  font-size: 14.5px !important;
  font-style: italic !important;
  line-height: 1.5 !important;
  color: rgba(17, 23, 25, 0.6) !important;
}

.wwd-quote cite {
  display: block !important;
  margin-top: 6px !important;
  font-family: var(--mono, "SF Mono", ui-monospace, monospace) !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: rgba(17, 23, 25, 0.64) !important;
}

/* Mobile responsive */
@media (max-width: 900px) {
  .wwd-layout {
    flex-direction: column !important;
    gap: 32px !important;
  }

  .wwd-copy {
    flex: 0 0 auto !important;
    max-width: 100% !important;
  }

  .wwd-phases {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  .wwd-phases::before {
    display: none !important;
  }

  .wwd-arrow {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .wwd-phases {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================================================
   WEALTH PAGE — New section styles
   ========================================================================== */

/* ---- Section heading → body-copy spacing ---- */
body[data-route="/wealth/"] h2 + .body-copy {
  margin-top: 18px !important;
}

/* ---- Risk card SVG diagrams ---- */
/* Force the 3-column grid to use row subgrid so card contents align */
.grid.three:has(.risk-card) {
  grid-template-rows: auto auto auto;
}
.risk-card {
  display: grid !important;
  grid-template-rows: subgrid !important;
  grid-row: span 3 !important;
  gap: 10px !important;
}
.risk-card h3 {
  align-self: start;
}
.risk-card p {
  align-self: start;
}
.risk-diagram {
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: rgba(250,249,245,0.6);
  border: 1px solid rgba(26,28,27,0.06);
  padding: 8px 4px 2px;
  margin-bottom: 16px;
  overflow: visible;
}

/* ---- Review list (inside cards, replaces paragraph body) ---- */
.review-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.review-list li {
  position: relative;
  padding: 7px 0 7px 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sub, #666963);
  border-bottom: 1px solid rgba(26,28,27,0.06);
}

.review-list li:last-child {
  border-bottom: none;
}

.review-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--accent, #7AAFB5);
  opacity: 0.6;
}

/* ---- Tax callout card ---- */
.tax-callout {
  margin-top: 28px;
  padding: 22px 28px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(122,175,181,0.08) 0%, rgba(122,175,181,0.03) 100%);
  border: 1px solid rgba(122,175,181,0.18);
}

.tax-callout p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink, #1A1C1B);
  margin: 0;
  font-style: italic;
}

.tax-callout-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  font-family: var(--sans, 'Outfit', sans-serif);
  font-weight: 500;
  font-size: 14px;
  color: var(--accent, #7AAFB5);
  text-decoration: none;
  transition: color 0.2s;
}

.tax-callout-link:hover {
  color: #5A8F98;
}

/* ---- Wealth map figure ---- */
.wealth-map-figure {
  margin: 28px 0 0;
  padding: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(26,28,27,0.09);
  background: var(--panel, #FBFAF6);
  box-shadow: 0 12px 40px -20px rgba(26,28,27,0.18);
}

.wealth-map-figure img {
  display: block;
  width: 100%;
  height: auto;
}


/* ---- Wealth hero panel: wider card, square image crop ---- */

body[data-route="/wealth/"] .hero .art-panel {
  min-width: 440px !important;
}

body[data-route="/wealth/"] .hero .art-panel .panel-media {
  display: block !important;
  aspect-ratio: 5 / 4 !important;
}

@media (max-width: 768px) {
  body[data-route="/wealth/"] .hero .art-panel {
    min-width: 0 !important;
  }
}


/* ---- Problem section figure ---- */

.problem-figure {
  margin: 32px 0 0;
  padding: 0;
  max-width: 680px;
}

.problem-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(26,28,27,0.09);
  box-shadow: 0 8px 28px -12px rgba(26,28,27,0.14);
}


/* ═══════════════════════════════════════════════════
   TEAM PAGE — HERO
   ═══════════════════════════════════════════════════ */

.team-hero {
  padding-bottom: clamp(20px, 2.5vw, 36px);
}

body[data-route="/team/"] .story-band {
  padding-top: clamp(36px, 4vw, 48px);
}
.team-hero .kicker {
  margin-left: 0;
}
.team-hero .lede {
  margin-left: 0;
}


/* ═══════════════════════════════════════════════════
   TEAM PROFILES
   ═══════════════════════════════════════════════════ */

.team-grid {
  gap: clamp(24px, 3vw, 36px) !important;
  align-items: start !important;
}

.team-profile {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  border: 1px solid rgba(26,28,27,0.10);
  border-radius: clamp(20px, 2.6vw, 28px);
  background: rgba(255,253,248,0.76);
  overflow: hidden;
  transition: box-shadow 0.28s ease, transform 0.28s ease;
}

.team-profile:hover {
  box-shadow: 0 18px 48px rgba(6,23,33,0.08);
  transform: translateY(-2px);
}

.team-profile-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(122,175,181,0.12), rgba(237,244,243,0.4));
}

.team-profile-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

/* ---- card body ---- */
.team-profile-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 24px 0;
  overflow: hidden;
}

.team-profile-role {
  display: block;
  font-family: var(--font), sans-serif;
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 760;
  letter-spacing: 0.105em;
  text-transform: uppercase;
  color: var(--centry-section-label, #2f6f8f);
}

.team-profile h3 {
  margin: 6px 0 0;
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 680;
  line-height: 1.28;
  color: var(--centry-ink, #061721);
}

.team-profile-tagline {
  margin: 4px 0 0;
  font-size: clamp(13.5px, 1vw, 15px);
  line-height: 1.5;
  color: var(--centry-muted, rgba(6,23,33,0.66));
}

/* ---- bio expander ---- */
.team-profile-bio {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(26,28,27,0.07);
}

.team-profile-bio summary {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  font-family: var(--font), sans-serif;
  font-size: 13px;
  font-weight: 620;
  letter-spacing: 0.03em;
  color: var(--centry-section-label, #2f6f8f);
  cursor: pointer;
  transition: color 0.2s;
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
}

.team-profile-bio summary::-webkit-details-marker { display: none; }

.team-profile-bio summary .bio-label { flex: 1; }

.team-profile-bio summary .bio-chevron {
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.team-profile-bio[open] summary .bio-chevron {
  transform: rotate(180deg);
}

.team-profile-bio summary:hover {
  color: var(--centry-ink, #061721);
}

.team-profile-bio .bio-content p {
  margin: 0;
  padding: 0 12px 16px;
  font-size: clamp(13px, 0.95vw, 14.5px);
  line-height: 1.65;
  color: var(--centry-muted, rgba(6,23,33,0.66));
}

/* ---- responsive ---- */
@media (max-width: 1180px) {
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .team-grid {
    grid-template-columns: 1fr !important;
  }
  .team-profile-photo {
    aspect-ratio: 4 / 3;
  }
  .team-profile-photo img {
    object-position: center 15%;
  }
}
/* ---- flex-story: text left, illustration right ---- */
.flex-story {
  display: flex !important;
  align-items: center !important;
  gap: clamp(24px, 3vw, 40px) !important;
}

.flex-story .story-text {
  flex: 0 0 62% !important;
  min-width: 0 !important;
}

.story-illustration {
  flex: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: 340px !important;
  border-radius: 16px !important;
  object-fit: cover !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  align-self: center !important;
}

@media (max-width: 720px) {
  .flex-story {
    flex-direction: column !important;
  }
  .story-illustration {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    align-self: center !important;
  }
}

/* ---- team-profile-bio: suppress generic details/summary styles ---- */
details.team-profile-bio {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.team-profile-bio summary::after {
  display: none !important;
  content: none !important;
}


/* ==========================================================================
   GLOSSARY TOOLTIP COMPONENT
   ========================================================================== */

.glossary-term {
  position: relative !important;
  display: inline !important;
  cursor: help !important;
}

.glossary-label {
  text-decoration: underline !important;
  text-decoration-style: dotted !important;
  text-decoration-color: #7AAFB5 !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 1.5px !important;
  transition: text-decoration-color 200ms ease !important;
}

.glossary-term:hover .glossary-label,
.glossary-term:focus .glossary-label {
  text-decoration-color: #5B9BA3 !important;
}

.glossary-tooltip {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 10px) !important;
  transform: translateX(-50%) translateY(6px) !important;
  width: 320px !important;
  max-width: calc(100vw - 24px) !important;
  padding: 18px 20px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(122, 175, 181, 0.22) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 16px 40px rgba(0, 0, 0, 0.08) !important;
  z-index: 100 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease !important;
}

.glossary-term:hover .glossary-tooltip,
.glossary-term:focus .glossary-tooltip {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
  pointer-events: auto !important;
}

/* On small screens a 320px tooltip centered on an inline term can overflow
   the viewport horizontally, and if the term sits inside an
   overflow:hidden ancestor (e.g. .tech, .panel) the upward-opening tooltip
   gets clipped vertically too. Detach it into a viewport-anchored card
   instead of positioning it relative to the term. Anchor near the TOP
   (just below the fixed nav) rather than the bottom — the bottom of the
   viewport is contested by other fixed UI (.cookie-banner, .mobile-sticky)
   that a bottom-anchored card would otherwise collide with. */
@media (max-width: 640px) {
  .glossary-tooltip {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    top: 84px !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100svh - 104px) !important;
    overflow-y: auto !important;
  }

  .glossary-term:hover .glossary-tooltip,
  .glossary-term:focus .glossary-tooltip {
    transform: none !important;
  }

  .glossary-tooltip::after {
    display: none !important;
  }
}

/* A positioned ancestor with an explicit z-index (e.g. the inline
   "position:relative;z-index:2" on .tech-layout) creates a stacking context
   that traps position:fixed/absolute descendants — the tooltip's own
   z-index:100 is then only compared *inside* that context, so it can render
   behind unrelated fixed UI elsewhere on the page (e.g. the cookie-consent
   banner) even though it's nominally "higher". Lift the trapping ancestor's
   stacking order, but only while a term inside it is actually open. */
[style*="z-index"]:has(.glossary-term:hover),
[style*="z-index"]:has(.glossary-term:focus) {
  z-index: 85 !important;
}

/* Tooltip arrow */
.glossary-tooltip::after {
  content: "" !important;
  position: absolute !important;
  bottom: -6px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(45deg) !important;
  width: 12px !important;
  height: 12px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border-right: 1px solid rgba(122, 175, 181, 0.22) !important;
  border-bottom: 1px solid rgba(122, 175, 181, 0.22) !important;
}

.glossary-tooltip-title {
  display: block !important;
  font-family: var(--font, "Archia Regular", -apple-system, system-ui, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #7AAFB5 !important;
  margin-bottom: 8px !important;
}

.glossary-tooltip-body {
  display: block !important;
  font-family: var(--font, "Archia Regular", -apple-system, system-ui, sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: rgba(17, 23, 25, 0.72) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-style: normal !important;
  text-decoration: none !important;
}

/* Dark section override (tech section) */
.tech .glossary-tooltip {
  background: rgba(26, 35, 50, 0.94) !important;
  border-color: rgba(122, 175, 181, 0.25) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.2),
    0 16px 40px rgba(0, 0, 0, 0.3) !important;
}

.tech .glossary-tooltip::after {
  background: rgba(26, 35, 50, 0.94) !important;
  border-color: rgba(122, 175, 181, 0.25) !important;
}

.tech .glossary-tooltip-body {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Fix: allow glossary tooltips to escape FAQ details/container */
.faqs details {
  overflow: visible !important;
}

.faqs details[open] {
  overflow: visible !important;
}

.faq-content {
  overflow: visible !important;
}

/* Wealth page: FAQ answer text spans full card width */
body[data-route="/wealth/"] .faq-stack p {
  max-width: none !important;
}

/* FAQ inline chart (e.g. long-term equities) */
.faq-chart {
  margin: 16px 0 4px !important;
  padding: 0 var(--component-faq-pad-x, 20px) !important;
}

.faq-chart img {
  width: 100%;
  max-width: 720px;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(0, 22, 33, 0.08);
}

/* ---- Wealth page: service cards with aligned content rows ---- */

#services-grid > .card {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

/* Reserve 2-line height so body text starts at same position across cards */
#services-grid > .card > h3 {
  min-height: 52px !important;
}

/* Body paragraph fills available space, pushing quote to bottom */
#services-grid > .card > p:not(.service-quote) {
  flex: 1 !important;
}

#services-grid > .card > .service-quote {
  margin-top: auto !important;
}

.service-quote {
  align-self: end;
  padding: 12px 0 0 14px !important;
  border-left: 2px solid #7AAFB5;
  font-size: 13.5px !important;
  font-style: italic;
  line-height: 1.45 !important;
  color: rgba(0, 22, 33, 0.48) !important;
}

/* Wealth + Tax pages: left-align CTA in Start here section */
body[data-route="/wealth/"] .final .actions,
body[data-route="/tax/"] .final .actions {
  justify-content: flex-start !important;
}

/* Tax page: h2 → body-copy spacing to match wealth page rhythm */
body[data-route="/tax/"] h2 + .body-copy {
  margin-top: 1.25rem;
}

/* Tax page: card flexbox (same approach as #services-grid on wealth page) */
body[data-route="/tax/"] .luxury-grid-primary > .card {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

body[data-route="/tax/"] .luxury-grid-primary > .card > p:not(.service-quote) {
  flex: 1 !important;
}

body[data-route="/tax/"] .luxury-grid-primary > .card > .service-quote {
  margin-top: auto !important;
  align-self: stretch !important;
}

/* Tax page: replace shared image with the cross-border ferry scene */
body[data-route="/tax/"] .section.split::after {
  background:
    linear-gradient(160deg, rgba(6, 23, 33, 0) 45%, rgba(6, 23, 33, 0.14)),
    url("/assets/tax/tax-cross-border-life.webp") center 22% / cover no-repeat !important;
}

/* ---- FAQ search bar ----
   .faq-section has three children in a fixed order across every page that
   uses it (home, /faq/, /wealth/): the heading (a bare <h2>, or on the
   homepage an <h2> wrapped in a plain .reveal div), .faq-search-wrap, then
   .faq-stack (the accordion list). Laying the section out as a flex row
   lets the search box sit truly vertically centered against the heading's
   own rendered box (align-items:center) instead of an approximated
   absolute-position offset — correct regardless of heading length or
   wrapping — while .faq-stack is forced onto its own full-width row below. */

/* Qualified with the element type (not just the class) so this reliably
   outranks overrides.css's ".faqs, .faq-stack, .faq-wrap { display:grid
   !important; gap:10px !important; ... }" rule, which is meant for the FAQ
   accordion list but also matches this section on pages where the
   <section> carries a legacy "faq-wrap" class alongside "faq-section". A
   plain ".faq-section" selector ties with that rule on specificity, so the
   winner would depend on file load order — qualifying with "section" wins
   outright regardless of order. */
section.faq-section {
  position: relative;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  column-gap: 24px !important;
  row-gap: 16px !important;
}

.faq-section.faq-wrap {
  grid-template-columns: 1fr !important;
}

.faq-section > h2,
.faq-section > .reveal {
  flex: 1 1 320px;
}

.faq-section p {
  max-width: none !important;
}

.faq-section .faq-stack {
  flex: 1 1 100%;
  margin-bottom: 48px;
}

.faq-search-wrap {
  /* relative, not static: .faq-search-icon inside is position:absolute and
     needs this as its positioning anchor, otherwise it escapes to the
     nearest positioned ancestor (.faq-section) and floats free of the
     input box. Relative-with-no-offset still lays out normally as a flex
     item. */
  position: relative;
  flex: 0 0 auto;
  width: 280px;
}

/* Below this width the heading can take the full row width itself, so give
   the search box its own full-width row underneath rather than squeezing
   it in beside the heading. */
@media (max-width: 640px) {
  .faq-search-wrap {
    width: 100%;
    margin: 16px 0 24px;
  }
}

.faq-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  pointer-events: none;
}

.faq-search {
  width: 100%;
  height: 44px;
  padding: 0 16px 0 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in oklch, white 82%, var(--paper-warm));
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.faq-search::placeholder {
  color: var(--faint);
}

.faq-search:focus {
  border-color: color-mix(in oklch, var(--blue) 48%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--blue) 12%, transparent);
}

/* Webkit search cancel button */
.faq-search::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;
  cursor: pointer;
}

.faq-no-results {
  text-align: center;
  color: var(--faint);
  font-size: 15px;
  padding: 24px 0;
}

/* ═══════════════════════════════════════════════════════════════════
   ALWAYS-ON ADVISOR — section #always-on-advisor
   ═══════════════════════════════════════════════════════════════════ */

/* --- 2a. Three-step "how it works" row --- */
.aoa-steps {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
  position: relative !important;
  align-items: stretch !important;
  width: 100% !important;
  margin-top: 2.5rem !important;
  margin-bottom: 1rem !important;
}

/* Connecting line behind icons */
.aoa-steps::before {
  content: "" !important;
  position: absolute !important;
  top: 22px !important;
  left: calc(16.67% + 22px) !important;
  right: calc(16.67% + 22px) !important;
  height: 1.5px !important;
  background: var(--line, rgba(17, 23, 25, 0.13)) !important;
  z-index: 0 !important;
}

.aoa-step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
}

.aoa-step-icon {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: 1px solid rgba(122, 175, 181, 0.3) !important;
  background: #FAF9F5 !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

.aoa-icon {
  width: 20px !important;
  height: 20px !important;
  color: #5A9BA1 !important;
}

.aoa-step-label {
  display: block !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  font-family: var(--heading-font, Outfit), sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--muted, #666963) !important;
  text-align: center !important;
}

.aoa-step-card {
  flex: 1 1 auto !important;
  width: 100% !important;
  padding: 16px !important;
  border: 1px solid var(--line, rgba(17, 23, 25, 0.13)) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.7) !important;
}

.aoa-step-card h4 {
  font-family: var(--heading-font, Outfit), sans-serif !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  color: var(--ink, #1A1C1B) !important;
  line-height: 1.25 !important;
  margin-bottom: 6px !important;
}

.aoa-step-card p {
  font-family: var(--font, Inter), sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--muted, rgba(17, 23, 25, 0.54)) !important;
}

/* --- 2b. Pipeline SVG diagram --- */
.aoa-diagram {
  max-width: 980px !important;
  margin: 2.5rem auto !important;
  padding: 0 !important;
}

.aoa-diagram svg {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* SVG flow animation */
@keyframes aoa-flow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -16; }
}

.aoa-flow-line {
  animation: aoa-flow 8s linear infinite;
}

/* Mobile fallback — hidden by default */
.aoa-diagram-mobile {
  display: none !important;
}

.aoa-mobile-chip {
  padding: 12px 20px !important;
  border: 1px solid rgba(26, 28, 27, 0.12) !important;
  border-radius: 14px !important;
  background: #FAF9F5 !important;
  font-family: var(--font, Inter), sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ink, #1A1C1B) !important;
  text-align: center !important;
}

.aoa-mobile-chip--accent {
  border-color: rgba(122, 175, 181, 0.4) !important;
  background: white !important;
  color: #3F6B71 !important;
  font-weight: 600 !important;
}

.aoa-mobile-arrow {
  text-align: center !important;
  font-size: 20px !important;
  color: #7AAFB5 !important;
  line-height: 1.4 !important;
}

/* --- 2c. Alert cards --- */
.aoa-sub {
  font-family: var(--heading-font, Outfit), sans-serif !important;
  font-size: clamp(1.15rem, 1.8vw, 1.35rem) !important;
  font-weight: 600 !important;
  color: var(--ink, #1A1C1B) !important;
  margin-top: 3rem !important;
  margin-bottom: 0.5rem !important;
}

.aoa-alert .badge {
  background: rgba(122, 175, 181, 0.12) !important;
  color: #5A9BA1 !important;
}

.aoa-alert h4 {
  font-family: var(--heading-font, Outfit), sans-serif !important;
  font-size: 1.02rem !important;
  font-weight: 600 !important;
  color: var(--ink, #1A1C1B) !important;
  margin: 0.75rem 0 0.5rem !important;
  line-height: 1.35 !important;
}

/* --- 2d. Trust strip --- */
.aoa-trust {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 12px 20px !important;
  border-radius: 999px !important;
  background: var(--surface-muted, #EFEFED) !important;
  font-family: var(--heading-font, Outfit), sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--ink, #1A1C1B) !important;
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

/* --- Footnote --- */
.aoa-footnote {
  font-family: var(--font, Inter), sans-serif !important;
  font-size: 12px !important;
  color: #9A9C97 !important;
  text-align: center !important;
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}

/* --- Responsive: mobile (<768px) --- */
@media (max-width: 767px) {
  .aoa-steps {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  .aoa-steps::before {
    display: none !important;
  }

  .aoa-diagram svg {
    display: none !important;
  }

  .aoa-diagram-mobile {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    align-items: center !important;
  }

  .aoa-trust {
    border-radius: 16px !important;
    font-size: 10px !important;
    padding: 14px 16px !important;
  }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .aoa-flow-line {
    animation: none !important;
  }
}

/* Tax calculator: tighten h1 so it wraps less in the narrow intro column */
#tax-calculator-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
}

#tax-calculator-title + p {
  margin-top: 24px;
}

/* ── FAQ page: category section headers ── */
.faq-category {
  display: grid;
  gap: 12px;
  margin-bottom: 8px;
}

.faq-category-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 36px 0 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.faq-category:first-child .faq-category-label {
  margin-top: 0;
}

/* FAQ page: full-width answer text */
.faq-category details p {
  max-width: none !important;
}

/* ---- Compare page: comparison matrix table ---- */

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 2rem 0;
}

.comparison-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: nowrap;
}

.comparison-matrix th,
.comparison-matrix td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.comparison-matrix thead th {
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--blue);
  border-bottom: 2px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--bg);
}

.comparison-matrix thead th:first-child {
  color: inherit;
}

.comparison-matrix tbody td:first-child {
  font-weight: 600;
  white-space: normal;
  min-width: 140px;
}

.comparison-matrix tbody tr:hover {
  background: oklch(15% 0.014 245 / 0.03);
}

/* Highlight the Centry column */
.comparison-matrix thead th:nth-child(2),
.comparison-matrix tbody td:nth-child(2) {
  background: rgba(91, 141, 239, 0.06);
}

.comparison-matrix--centry-last thead th:nth-child(2),
.comparison-matrix--centry-last tbody td:nth-child(2) {
  background: transparent;
}
.comparison-matrix--centry-last thead th:nth-child(3),
.comparison-matrix--centry-last tbody td:nth-child(3) {
  background: rgba(91, 141, 239, 0.06);
}

@media (max-width: 768px) {
  .comparison-matrix {
    font-size: 0.8rem;
  }
  .comparison-matrix th,
  .comparison-matrix td {
    padding: 0.5rem 0.75rem;
  }
}

/* ---- Team page: left-align final CTA ---- */
body[data-route="/team/"] .final .actions {
  justify-content: flex-start !important;
}

/* ---- Compare page: left-align final CTA ---- */
body[data-route="/compare/"] .final .actions {
  justify-content: flex-start !important;
}

/* ---- Comparison matrix table (compare hub) ---- */
.table-responsive {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

.comparison-matrix {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse;
  font-size: clamp(13px, 1vw, 14.5px);
  line-height: 1.45;
}

.comparison-matrix th,
.comparison-matrix td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  overflow: hidden;
  hyphens: auto;
  border-bottom: 1px solid var(--line, rgba(17, 23, 25, 0.1));
}

/* First column (row labels) gets a bit more space */
.comparison-matrix th:first-child,
.comparison-matrix td:first-child {
  width: 14%;
  font-size: clamp(12px, 0.9vw, 13.5px);
}

/* Header row */
.comparison-matrix thead th {
  font-size: clamp(12px, 0.85vw, 13px);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted, rgba(17, 23, 25, 0.64));
  padding-bottom: 14px;
  border-bottom: 2px solid var(--line, rgba(17, 23, 25, 0.13));
  white-space: normal;
}

/* Highlight the Centry column */
.comparison-matrix thead th:nth-child(2) {
  color: var(--blue, oklch(61% 0.145 225));
}

.comparison-matrix tbody td:nth-child(2) {
  color: var(--ink, #111719);
  font-weight: 500;
}

/* Row label styling */
.comparison-matrix td:first-child strong {
  font-size: clamp(12px, 0.9vw, 13.5px);
  font-weight: 600;
  color: var(--ink, #111719);
}

/* Alternate row stripes */
.comparison-matrix tbody tr:nth-child(even) {
  background: rgba(245, 240, 235, 0.3);
}

.comparison-matrix tbody tr:hover {
  background: rgba(245, 240, 235, 0.5);
}

@media (max-width: 768px) {
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .comparison-matrix {
    min-width: 600px;
    table-layout: auto;
  }
}

/* ---- Operating model diagram (private-office) ---- */
.operating-model-diagram {
  margin-top: clamp(28px, 3vw, 40px);
}

.operating-model-visual {
  margin-bottom: clamp(18px, 2vw, 28px);
}

.operating-model-diagram > h3 {
  margin-top: 0;
}

/* 5-column grid for private-office (homepage uses 6) */
.operating-model-visual .adviser-silos {
  grid-template-columns: repeat(5, 1fr);
}

/* Reset article-level typography inside the plan card */
.article .operating-model-diagram .coordinated-plan .coordinated-plan-text h3 {
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: clamp(18px, 2vw, 24px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  max-width: none !important;
  color: var(--ink, #111719) !important;
}

.article .operating-model-diagram .coordinated-plan .coordinated-plan-text p {
  font-size: clamp(12px, 0.85vw, 14px) !important;
  line-height: 1.45 !important;
  color: var(--muted, rgba(17, 23, 25, 0.64)) !important;
  margin-top: 0 !important;
}

.article .operating-model-diagram .coordinated-plan-inner {
  max-height: 180px !important;
  overflow: hidden !important;
}

/* ---- Important note (compact, inside article) ---- */
.important-note {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--line, rgba(17, 23, 25, 0.13));
}

.important-note h2 {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  margin-bottom: 6px;
}

.important-note p {
  font-size: clamp(0.82rem, 0.9vw, 0.9rem);
  color: var(--muted, rgba(17, 23, 25, 0.64));
}

/* ==========================================================================
   VOICE QUOTE — standalone client-quote interlude with photo (VoiceQuote.astro)
   Three of these sit between homepage sections in place of three testimonial
   carousel slides. Typography matches the carousel's blockquote/figcaption
   scale (base-export.css .testimonial rules) so they read as the same system.
   ========================================================================== */

.voice-quote-inner {
  display: grid;
  grid-template-columns: clamp(300px, 30vw, 400px) clamp(48px, 7vw, 96px) 1fr;
  align-items: center;
  max-width: 1000px;
  margin-inline: auto;
}

.voice-quote--reverse .voice-quote-inner {
  grid-template-columns: 1fr clamp(48px, 7vw, 96px) clamp(300px, 30vw, 400px);
}

.voice-quote--reverse .voice-quote-media {
  order: 3;
}

.voice-quote--reverse .voice-quote-connector {
  order: 2;
  transform: scaleX(-1);
}

.voice-quote--reverse .voice-quote-copy {
  order: 1;
}

.voice-quote-media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: clamp(20px, 2.6vw, 28px);
  background: color-mix(in oklch, white 82%, var(--paper-warm, var(--bg)));
}

.voice-quote-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The dashed connector lives in the layout gutter between photo and quote —
   deterministic negative space we control, unlike photo pixels — ending in
   a solid accent-blue dot beside the quote. Same stroke grammar as the
   .flow-svg connector in the Services section. */
.voice-quote-connector {
  align-self: center;
  height: 120px;
  pointer-events: none;
}

.voice-quote-connector svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Own every box property explicitly rather than relying on the generic
   unscoped `blockquote{...}` rule (base-export.css) — that rule's fixed
   18px/22px padding was leaking through here, getting tighter still on
   mobile where only padding-left was being patched. */
.voice-quote-copy {
  margin: 0;
  padding: clamp(28px, 4vw, 40px) clamp(28px, 4vw, 44px);
  border-left: 3px solid #7AAFB5;
  background: #fff;
}

.voice-quote-copy p {
  margin: 0;
  max-width: 560px;
  font-size: clamp(22px, 2.2vw, 31px);
  line-height: 1.2;
  letter-spacing: -0.006em;
  text-wrap: pretty;
  color: var(--ink, #111719);
}

.voice-quote-copy cite {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line, rgba(17, 23, 25, 0.13));
  font-style: normal;
  font-size: 15px;
  color: var(--muted, rgba(17, 23, 25, 0.64));
}

.voice-quote-copy cite span {
  font-weight: 650;
  color: var(--ink, #111719);
}

@media (max-width: 900px) {
  .voice-quote-inner,
  .voice-quote--reverse .voice-quote-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .voice-quote--reverse .voice-quote-media,
  .voice-quote--reverse .voice-quote-copy {
    order: initial;
  }

  .voice-quote--reverse .voice-quote-connector {
    transform: none;
  }

  .voice-quote-connector {
    display: none;
  }

  .voice-quote-media {
    max-width: 380px;
    margin-inline: auto;
    aspect-ratio: 4 / 3;
  }
}

/* ==========================================================================
   tech-diagrams.css — Bespoke SVG illustrations for the 4 tech cards
   (Ingest · Model · Monitor · Human review)
   ========================================================================== */

/* ---- Shared SVG container --------------------------------------------- */
.tech-diagram {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 18px;
  overflow: visible;
}

/* ========================================================================
   Card 1 — Ingest
   Pills (DOC, ASSET, TRUST, ACCT) → dashed curves → STRUCTURED FACT BASE
   ======================================================================== */

/* pill backgrounds */
.td-ingest-pill {
  fill: rgba(255,255,255,0.07);
  stroke: rgba(255,255,255,0.22);
  stroke-width: 1;
}
/* pill icon */
.td-ingest-icon {
  fill: none;
  stroke: #7AAFB5;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* pill label text */
.td-ingest-label {
  fill: rgba(255,255,255,0.82);
  font-family: var(--sans, 'Outfit', system-ui, sans-serif);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
/* flowing dashed curves */
.td-ingest-flow {
  fill: none;
  stroke: rgba(122,175,181,0.45);
  stroke-width: 1.2;
  stroke-dasharray: 4 6;
  stroke-linecap: round;
  animation: tdFlowDash 2.8s linear infinite;
}
.td-ingest-flow:nth-of-type(2) { animation-delay: -0.5s; }
.td-ingest-flow:nth-of-type(3) { animation-delay: -1.0s; }
.td-ingest-flow:nth-of-type(4) { animation-delay: -1.5s; }

/* target box */
.td-ingest-target {
  fill: rgba(122,175,181,0.10);
  stroke: rgba(122,175,181,0.40);
  stroke-width: 1;
}
.td-ingest-target-icon {
  fill: none;
  stroke: #7AAFB5;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.td-ingest-target-label {
  fill: rgba(255,255,255,0.72);
  font-family: var(--sans, 'Outfit', system-ui, sans-serif);
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-anchor: middle;
}

@keyframes tdFlowDash {
  to { stroke-dashoffset: -40; }
}

/* ========================================================================
   Card 2 — Model (v2: branching engine)
   Fact base pill → inflow line → rotating engine → branching paths → Scenarios
   ======================================================================== */

/* fact base input pill */
.td-model-input-pill {
  fill: rgba(255,255,255,0.07);
  stroke: rgba(255,255,255,0.22);
  stroke-width: 1;
}
.td-model-input-pill-icon {
  fill: none;
  stroke: #7AAFB5;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.td-model-input-label {
  fill: rgba(255,255,255,0.78);
  font-family: var(--sans, 'Outfit', system-ui, sans-serif);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* inflow line */
.td-model-inflow {
  fill: none;
  stroke: rgba(122,175,181,0.35);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  stroke-linecap: round;
  animation: tdFlowDash 2.4s linear infinite;
}

/* engine background */
.td-model-engine-bg {
  fill: rgba(122,175,181,0.06);
  stroke: none;
}

/* engine ring */
.td-model-engine-ring {
  fill: none;
  stroke: #7AAFB5;
  stroke-width: 1.4;
  stroke-dasharray: 6 4;
  filter: url(#glowModel);
  animation: tdEngineRotate 12s linear infinite;
  transform-origin: 120px 75px;
}

/* engine tick marks group (slow rotation) */
.td-model-engine-ticks {
  animation: tdEngineRotate 20s linear infinite reverse;
  transform-origin: 120px 75px;
}

/* engine core dot */
.td-model-engine-core {
  fill: #7AAFB5;
  animation: tdPulse 3s ease-in-out infinite;
}

/* branching output paths */
.td-model-branch {
  fill: none;
  stroke: rgba(122,175,181,0.35);
  stroke-width: 1;
  stroke-dasharray: 4 6;
  stroke-linecap: round;
  animation: tdFlowDashOut 2.2s linear infinite;
}
.td-model-branch:nth-of-type(2) { animation-delay: -0.4s; }
.td-model-branch:nth-of-type(3) { animation-delay: -0.8s; }

/* flowing data dots on branches */
.td-model-dot {
  fill: #7AAFB5;
  opacity: 0.8;
}
.td-model-dot-1 {
  offset-path: path("M140 72 C165 72, 180 32, 210 32");
  animation: tdDotTravel 2.6s ease-in-out infinite;
}
.td-model-dot-2 {
  offset-path: path("M140 75 C165 75, 185 75, 210 75");
  animation: tdDotTravel 2.6s ease-in-out infinite 0.5s;
}
.td-model-dot-3 {
  offset-path: path("M140 78 C165 78, 180 118, 210 118");
  animation: tdDotTravel 2.6s ease-in-out infinite 1.0s;
}

/* scenario label pills */
.td-model-scenario-bg {
  fill: rgba(255,255,255,0.06);
  stroke: rgba(122,175,181,0.35);
  stroke-width: 0.8;
}
.td-model-scenario-text {
  fill: rgba(255,255,255,0.78);
  font-family: var(--sans, 'Outfit', system-ui, sans-serif);
  font-size: 8.5px;
  font-weight: 500;
}

/* small bar indicators */
.td-model-bar {
  fill: rgba(122,175,181,0.50);
}

@keyframes tdEngineRotate {
  to { transform: rotate(360deg); }
}

@keyframes tdFlowDashOut {
  to { stroke-dashoffset: -40; }
}

@keyframes tdDotTravel {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.9; }
  100% { offset-distance: 100%; opacity: 0; }
}

@keyframes tdPulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* ========================================================================
   Card 3 — Monitor
   Timeline (JAN–JUN) with activity bars + notification toast
   ======================================================================== */

/* baseline */
.td-monitor-baseline {
  stroke: rgba(255,255,255,0.18);
  stroke-width: 1;
}

/* month labels */
.td-monitor-month {
  fill: rgba(255,255,255,0.50);
  font-family: var(--sans, 'Outfit', system-ui, sans-serif);
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-anchor: middle;
}

/* dots on baseline */
.td-monitor-dot {
  fill: rgba(122,175,181,0.50);
}

/* vertical activity bars */
.td-monitor-bar {
  stroke: rgba(122,175,181,0.40);
  stroke-width: 1;
  stroke-linecap: round;
  transform-origin: bottom;
  animation: tdBarGrow 0.6s ease-out both;
}
.td-monitor-bar:nth-child(1)  { animation-delay: 0.1s; }
.td-monitor-bar:nth-child(2)  { animation-delay: 0.18s; }
.td-monitor-bar:nth-child(3)  { animation-delay: 0.26s; }
.td-monitor-bar:nth-child(4)  { animation-delay: 0.34s; }
.td-monitor-bar:nth-child(5)  { animation-delay: 0.42s; }
.td-monitor-bar:nth-child(6)  { animation-delay: 0.50s; }
.td-monitor-bar:nth-child(7)  { animation-delay: 0.58s; }
.td-monitor-bar:nth-child(8)  { animation-delay: 0.66s; }
.td-monitor-bar:nth-child(9)  { animation-delay: 0.74s; }
.td-monitor-bar:nth-child(10) { animation-delay: 0.82s; }
.td-monitor-bar:nth-child(11) { animation-delay: 0.90s; }
.td-monitor-bar:nth-child(12) { animation-delay: 0.98s; }
.td-monitor-bar:nth-child(13) { animation-delay: 1.06s; }
.td-monitor-bar:nth-child(14) { animation-delay: 1.14s; }
.td-monitor-bar:nth-child(15) { animation-delay: 1.22s; }
.td-monitor-bar:nth-child(16) { animation-delay: 1.30s; }
.td-monitor-bar:nth-child(17) { animation-delay: 1.38s; }
.td-monitor-bar:nth-child(18) { animation-delay: 1.46s; }

/* scan line sweeping left→right */
.td-monitor-scan {
  stroke: rgba(122,175,181,0.55);
  stroke-width: 1.5;
  animation: tdScanLine 4s ease-in-out infinite;
}

/* --- Alert notification toast --- */
.td-monitor-alert-shadow {
  fill: rgba(0,0,0,0.25);
  stroke: none;
}
.td-monitor-alert-bg {
  fill: rgba(20,28,34,0.92);
  stroke: rgba(122,175,181,0.30);
  stroke-width: 0.8;
}
.td-monitor-alert-accent {
  fill: #e8a85c;
  stroke: none;
}
.td-monitor-alert-bell {
  fill: #e8a85c;
  stroke: none;
}
.td-monitor-alert-title {
  fill: rgba(255,255,255,0.88);
  font-family: var(--sans, 'Outfit', system-ui, sans-serif);
  font-size: 8px;
  font-weight: 600;
}
.td-monitor-alert-sub {
  fill: rgba(255,255,255,0.50);
  font-family: var(--sans, 'Outfit', system-ui, sans-serif);
  font-size: 7px;
  font-weight: 400;
}
.td-monitor-alert-chevron {
  fill: none;
  stroke: rgba(255,255,255,0.40);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.td-monitor-alert-group {
  animation: tdAlertSlide 0.8s ease-out 1.6s both,
             tdAlertBump 4s ease-in-out 1.6s infinite;
}

@keyframes tdBarGrow {
  from { opacity: 0; transform: scaleY(0); }
  to   { opacity: 1; transform: scaleY(1); }
}

@keyframes tdScanLine {
  0%   { opacity: 0; transform: translateX(0); }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.7; }
  100% { opacity: 0; transform: translateX(260px); }
}

@keyframes tdAlertSlide {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Bump synced to scan line: scan is 4s, alert is at ~60% across (x≈175 of 260),
   so bump triggers at ~60% of the 4s cycle */
@keyframes tdAlertBump {
  0%   { transform: translateY(0) scale(1); }
  58%  { transform: translateY(0) scale(1); }
  62%  { transform: translateY(-3px) scale(1.02); }
  68%  { transform: translateY(0) scale(1); }
  100% { transform: translateY(0) scale(1); }
}

/* ========================================================================
   Card 4 — Human Review
   Clipboard → flowing dashed line → Person → flowing dashed line → ✓ check
   ======================================================================== */

/* icons (shared style) */
.td-review-icon {
  fill: none;
  stroke: rgba(255,255,255,0.65);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* continuously flowing dashed lines */
.td-review-flow {
  fill: none;
  stroke: rgba(122,175,181,0.45);
  stroke-width: 1;
  stroke-dasharray: 4 5;
  stroke-linecap: round;
  animation: tdFlowDash 2.4s linear infinite;
}
.td-review-flow--delay {
  animation-delay: -1.0s;
}

/* mid-point dots */
.td-review-dot {
  fill: rgba(122,175,181,0.55);
}

/* check circle (final) */
.td-review-check-ring {
  fill: rgba(122,175,181,0.12);
  stroke: #7AAFB5;
  stroke-width: 1.4;
}
.td-review-check-mark {
  fill: none;
  stroke: #7AAFB5;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ========================================================================
   prefers-reduced-motion — disable all animations
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  .td-ingest-flow,
  .td-model-inflow,
  .td-model-engine-ring,
  .td-model-engine-ticks,
  .td-model-engine-core,
  .td-model-branch,
  .td-model-dot,
  .td-monitor-bar,
  .td-monitor-scan,
  .td-monitor-alert-group,
  .td-review-flow {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ==========================================================================
   plan-studio.css — Scoped styles for the Plan Studio section
   ========================================================================== */

/* ---- Container -------------------------------------------------------- */
#plan-studio-section,
#plan-studio-section > div,
#plan-studio-section > div:first-child {
  max-width: none !important;
  overflow: visible !important;
}

#plan-studio {
  background: var(--panel, #FBFAF6);
  border: 1px solid rgba(26,28,27,0.09);
  border-radius: 30px;
  margin-top: 22px;
  padding: 40px 40px 36px;
  box-shadow: 0 22px 50px -38px rgba(26,28,27,0.30);
}

/* ---- Header ----------------------------------------------------------- */
.ps-header {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  align-items: flex-end;
}
.ps-header-left {
  max-width: 720px;
}
.ps-title {
  font-family: var(--sans, 'Outfit', sans-serif) !important;
  font-weight: 500 !important;
  font-size: clamp(24px, 3vw, 34px) !important;
  color: var(--ink, #1A1C1B) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.1 !important;
  margin: 16px 0 0 !important;
}
.ps-subtitle {
  color: #666963;
  font-size: 15.5px;
  line-height: 1.55;
  margin: 12px 0 0;
  max-width: 690px;
}
.ps-ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  border: 1px solid rgba(26,28,27,0.09);
  background: #fff;
  border-radius: 11px;
  padding: 9px 14px;
  font-family: var(--sans, 'Outfit', sans-serif);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink, #1A1C1B);
  transition: all .25s;
  flex-shrink: 0;
}
.ps-ghost-btn:hover {
  border-color: var(--accent, #7AAFB5);
  color: var(--accent, #7AAFB5);
}

/* ---- Step rail -------------------------------------------------------- */
.ps-step-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 26px;
}
.ps-step-btn {
  text-align: left;
  cursor: pointer;
  border-radius: 16px;
  padding: 14px 16px 15px;
  border: 1px solid rgba(26,28,27,0.09);
  background: #ffffff;
  box-shadow: none;
  transition: all .3s;
  outline: none;
}
.ps-step-btn:hover {
  border-color: rgba(122,175,181,0.50);
}
.ps-step-btn--active {
  border-color: var(--accent, #7AAFB5) !important;
  box-shadow: 0 0 0 3px var(--accentPale, #E3EEEB) !important;
}
.ps-step-top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
}
.ps-step-num {
  font-family: var(--sans, 'Outfit', sans-serif);
  font-size: 11.5px;
  font-weight: 600;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: #EDEDE7;
  color: #666963;
  transition: all .3s;
}
.ps-step-btn--active .ps-step-num,
.ps-step-btn--done .ps-step-num {
  /* #7AAFB5 (the site's --accent) is 2.4:1 for white text — fails WCAG AA.
     Darkened locally rather than touching --accent, which is also used as
     a background/border/dot fill sitewide where the lighter shade is fine. */
  background: #3F6B71;
  color: #fff;
}
.ps-step-label {
  font-family: var(--sans, 'Outfit', sans-serif);
  font-weight: 500;
  font-size: 14px;
  color: #666963;
  transition: color .3s;
}
.ps-step-btn--active .ps-step-label,
.ps-step-btn--done .ps-step-label {
  color: var(--ink, #1A1C1B);
}
.ps-step-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #666963;
}
.ps-step-btn--active .ps-step-desc {
  color: #666963;
}

/* ---- Chart container -------------------------------------------------- */
.ps-chart-wrap {
  margin-top: 22px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFAF6 100%);
  border: 1px solid rgba(26,28,27,0.09);
  border-radius: 22px;
  padding: 10px 10px 4px;
  position: relative;
}
.ps-chart-title {
  font-family: var(--sans, 'Outfit', sans-serif);
  font-weight: 500;
  font-size: 14px;
  color: rgba(26,28,27,0.72);
  padding: 8px 14px 0;
  letter-spacing: 0.005em;
}

/* ---- Chart legend bar (below chart, contains scenario inline) --------- */
.ps-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px 8px;
  margin-top: 2px;
  font-size: 12px;
  color: #666963;
}
.ps-chart-legend strong {
  font-family: var(--sans, 'Outfit', sans-serif);
  font-weight: 500;
  color: var(--ink, #1A1C1B);
}

/* ---- Inline scenario controls (inside legend bar) --------------------- */
.ps-scenario-inline {
  display: flex;
  align-items: center;
  gap: 0;
}
.ps-scenario-ctrl {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.ps-scenario-pills {
  display: inline-flex;
  background: #F0EFE9;
  border: 1px solid rgba(26,28,27,0.09);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
  flex-wrap: wrap;
}
.ps-scenario-btn {
  cursor: pointer;
  border: none;
  border-radius: 7px;
  padding: 6px 11px;
  font-family: var(--sans, 'Outfit', sans-serif);
  font-weight: 500;
  font-size: 12px;
  background: transparent;
  color: #666963;
  box-shadow: none;
  transition: all .25s;
  white-space: nowrap;
}
.ps-scenario-btn--active {
  background: #fff;
  color: var(--ink, #1A1C1B);
  box-shadow: 0 3px 10px -6px rgba(26,28,27,0.5);
}
.ps-scenario-note {
  font-size: 11.5px;
  line-height: 1.45;
  color: #666963;
  margin: 0;
  max-width: 380px;
  text-align: right;
}
.ps-scenario-note svg {
  vertical-align: -2px;
  color: var(--accent, #7AAFB5);
  margin-right: 2px;
}

/* ---- Event cards (inside SVG foreignObject) --------------------------- */
.ps-event-card {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  gap: 8px;
  padding: 8px 9px;
  background: #FFFFFF;
  border: 1px solid rgba(26,28,27,0.13);
  border-radius: 11px;
  align-items: flex-start;
  box-shadow: 0 2px 8px -4px rgba(26,28,27,0.25);
  transition: background .25s, border-color .25s, box-shadow .25s;
  font-family: Inter, system-ui, sans-serif;
  overflow: hidden;
}
.ps-event-card--hot {
  background: var(--accentPale, #E3EEEB);
  border-color: var(--accentSoft, #9EC5C9);
  box-shadow: 0 6px 16px -8px rgba(122,175,181,0.4);
}
.ps-event-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--accentPale, #E3EEEB);
  color: var(--accent, #7AAFB5);
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.ps-event-body {
  min-width: 0;
  flex: 1 1 auto;
}
.ps-event-title-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.ps-event-name {
  font-family: var(--sans, 'Outfit', sans-serif);
  font-weight: 500;
  font-size: 11.5px;
  color: var(--ink, #1A1C1B);
  line-height: 1.15;
}
.ps-event-age {
  font-size: 10px;
  color: #666963;
  font-weight: 600;
  flex-shrink: 0;
}
.ps-event-sub {
  display: block;
  font-size: 10px;
  color: #666963;
  line-height: 1.3;
  margin-top: 2px;
}

/* event card reveal animation */
@keyframes psRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ps-event-reveal {
  animation: psRise .7s cubic-bezier(.2,.7,.2,1) both;
}
@media (prefers-reduced-motion: reduce) {
  .ps-event-reveal { animation: none; }
}

/* ---- Layer legend (below chart, above holdings) ----------------------- */
.ps-layer-legend {
  margin-top: 14px;
}
.ps-legend-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.ps-legend-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid rgba(26,28,27,0.09);
  background: transparent;
  transition: all .25s;
  cursor: default;
}
.ps-legend-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  margin-top: 3px;
}
.ps-legend-name {
  font-family: var(--sans, 'Outfit', sans-serif);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--ink, #1A1C1B);
  display: block;
}
.ps-legend-blurb {
  display: block;
  font-size: 11.5px;
  color: #666963;
  line-height: 1.35;
  margin-top: 1px;
}

/* ---- Bridge (liabilities → assets connector) ------------------------- */
.ps-bridge {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0 6px;
  padding: 0 4px;
}
.ps-bridge-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(26,28,27,0.12), transparent);
}
.ps-bridge-label {
  font-family: var(--sans, 'Outfit', sans-serif);
  font-weight: 500;
  font-size: 13.5px;
  color: #3F6B71;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-align: center;
}

/* ---- Holdings explorer ------------------------------------------------ */
.ps-holdings {
  margin-top: 18px;
  border: 1px solid rgba(26,28,27,0.09);
  border-radius: 18px;
  padding: 18px 20px 20px;
  background: #FFFFFF;
}
.ps-holdings-header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.ps-holdings-title {
  font-family: var(--sans, 'Outfit', sans-serif);
  font-weight: 500;
  font-size: 17px;
  color: var(--ink, #1A1C1B);
}
.ps-holdings-age-note {
  font-size: 12.5px;
  color: #666963;
}
.ps-age-highlight {
  color: #3F6B71;
  font-family: var(--sans, 'Outfit', sans-serif);
  font-weight: 600;
}
.ps-holdings-body {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
}
.ps-sunburst-wrap {
  flex: 0 0 auto;
  width: 300px;
  margin: 0 auto;
  position: relative;
}

/* ---- Sunburst tooltip ------------------------------------------------- */
.ps-sun-tooltip {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid rgba(26,28,27,0.12);
  border-radius: 8px;
  padding: 5px 10px;
  box-shadow: 0 4px 12px -6px rgba(26,28,27,0.25);
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
}
.ps-sun-tt-dot {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  flex-shrink: 0;
}
.ps-sun-tt-name {
  font-family: var(--sans, 'Outfit', sans-serif);
  font-weight: 500;
  font-size: 12px;
  color: var(--ink, #1A1C1B);
}
.ps-sun-tt-pct {
  font-family: var(--sans, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: 12px;
  color: var(--accent, #7AAFB5);
}

/* ---- Breakdown table -------------------------------------------------- */
.ps-breakdown {
  flex: 1 1 320px;
  min-width: 280px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 22px;
}
.ps-break-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}
.ps-break-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.ps-break-name {
  font-family: var(--sans, 'Outfit', sans-serif);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink, #1A1C1B);
}
.ps-break-pct {
  margin-left: auto;
  font-family: var(--sans, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.ps-break-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}
.ps-break-rowdot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.ps-break-rowname {
  flex: 1 1 auto;
  font-size: 11.5px;
  color: #666963;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ps-break-bar {
  flex: 0 0 46px;
  height: 5px;
  border-radius: 3px;
  background: #EFEEE8;
  overflow: hidden;
}
.ps-break-bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width .3s;
}
.ps-break-rowpct {
  flex: 0 0 30px;
  text-align: right;
  font-size: 11.5px;
  color: #666963;
  font-variant-numeric: tabular-nums;
}

/* ---- Slider ----------------------------------------------------------- */
.ps-slider-wrap {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(26,28,27,0.05);
}
.ps-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.ps-slider-label {
  font-family: var(--sans, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #666963;
}
.ps-slider-context {
  font-size: 12px;
  color: #666963;
}

/* slider track wrapper — ticks overlay on top of the range input */
.ps-slider-track {
  position: relative;
}
.ps-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  outline: none;
  background: linear-gradient(90deg, var(--accent, #7AAFB5) 0%, rgba(122,175,181,0.35) 100%);
  opacity: 0.92;
  display: block;
  position: relative;
  z-index: 2;
}
.ps-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--accent, #7AAFB5);
  box-shadow: 0 2px 8px -2px rgba(26,28,27,0.5);
  cursor: pointer;
  transition: transform .15s;
  position: relative;
  z-index: 3;
}
.ps-range::-webkit-slider-thumb:hover {
  transform: scale(1.12);
}
.ps-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--accent, #7AAFB5);
  box-shadow: 0 2px 8px -2px rgba(26,28,27,0.5);
  cursor: pointer;
}
.ps-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(122,175,181,0.35);
}

/* event dots — positioned on the track bar itself */
.ps-tick-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #9A9C97;
  z-index: 1;
  pointer-events: none;
  /* vertically centred on the 6px range input */
  margin-top: -3px;
  top: 3px;
}
.ps-tick-dot--accent {
  background: var(--accent, #7AAFB5);
}

/* ticks area below the track — age labels + small tick marks */
.ps-slider-ticks {
  position: relative;
  height: 24px;
  margin-top: 2px;
  /* Inset by half the thumb width so positions match thumb centre travel */
  left: 10px;
  right: 10px;
  width: calc(100% - 20px);
}
.ps-tick-mark {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 1px;
  height: 6px;
  background: rgba(26,28,27,0.18);
}
.ps-tick-label {
  position: absolute;
  transform: translateX(-50%);
  font-size: 10.5px;
  color: #666963;
  font-variant-numeric: tabular-nums;
  top: 8px;
}

/* ---- Footnote --------------------------------------------------------- */
.ps-footnote {
  text-align: center;
  color: #666963;
  font-size: 12.5px;
  letter-spacing: 0.2px;
  margin-top: 22px;
}

.ps-handoff {
  text-align: center;
  color: #666963;
  font-size: 12.5px;
  letter-spacing: 0.2px;
  margin-top: 0.5rem;
}

.ps-handoff a {
  color: #2A7871;
  text-decoration: none;
}

.ps-handoff a:hover {
  text-decoration: underline;
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 960px) {
  .ps-legend-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 760px) {
  #plan-studio {
    padding: 28px 20px 24px;
    border-radius: 22px;
  }
  .ps-step-rail {
    grid-template-columns: 1fr 1fr !important;
  }
  .ps-breakdown {
    grid-template-columns: 1fr;
  }
  .ps-sunburst-wrap {
    width: 240px;
  }
  .ps-legend-grid {
    grid-template-columns: 1fr;
  }
  .ps-chart-legend {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .ps-scenario-ctrl {
    align-items: flex-start;
  }
  .ps-scenario-note {
    text-align: left;
  }
}
@media (max-width: 480px) {
  .ps-step-rail {
    grid-template-columns: 1fr !important;
  }
}

/* #########################################################################
   DESIGN SYSTEM UPGRADE — Phase 1 & 2
   -------------------------------------------------------------------------
   Shifting from "Swiss clock" (charcoal, red, tight radii) to
   "private wealth editorial" (navy, teal, generous radii).
   ######################################################################### */


/* =========================================================================
   PHASE 1A: Design Token Overrides
   ========================================================================= */

:root {
  /* Ink — deep navy instead of pure black */
  --text-primary:    #111719 !important;
  --ink:             #111719 !important;

  /* Accent — teal/seafoam instead of red */
  --accent:          #7AAFB5 !important;
  --accent-red:      #7AAFB5 !important;
  --accent-red-dark: #5A8F98 !important;
  --precision:       #7AAFB5 !important;
  --precision-dark:  #5A8F98 !important;

  /* Dark sections — midnight navy instead of warm charcoal */
  --dark-section:    #1A2332 !important;
  --dark-card:       #243044 !important;
  --dark:            #1A2332 !important;
  --dark-soft:       #243044 !important;

  /* Radii — more generous, editorial */
  --radius:          24px !important;
  --radius-lg:       32px !important;
  --radius-sm:       16px !important;

  /* Keep legacy colour aliases pointing to teal, not red */
  --coral:           #7AAFB5 !important;
  --blue:            #7AAFB5 !important;
  --green:           #7AAFB5 !important;
}


/* =========================================================================
   PHASE 1B: Body Background — mute the radial gradient blobs
   ========================================================================= */

body {
  background: var(--bg, #F7F7F2) !important;
  color: #111719 !important;
}


/* =========================================================================
   PHASE 1C: Typography Styling — Archia stays, styling tightened
   ========================================================================= */

h1 {
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  line-height: 0.98 !important;
  color: #111719 !important;
}

h2 {
  font-weight: 400 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.04 !important;
  color: #111719 !important;
}

h3 {
  font-weight: 400 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.18 !important;
  color: #111719 !important;
}


/* =========================================================================
   PHASE 1D: Navigation — uppercase editorial treatment
   ========================================================================= */

.links a {
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.cta {
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  background: #111719 !important;
  border-color: #111719 !important;
  color: #FFFFFF !important;
}

.cta:hover {
  background: #243044 !important;
  border-color: #243044 !important;
}


/* =========================================================================
   PHASE 1E: Kicker labels — teal instead of red
   ========================================================================= */

.kicker,
.panel-label {
  /* #7AAFB5 (--accent) is 2.4:1 on white — fails WCAG AA for text. Darkened
     here specifically for text use; --accent itself is left untouched since
     it's also used for backgrounds/borders/dots sitewide where it's fine. */
  color: #3F6B71 !important;
}


/* =========================================================================
   PHASE 1F: Section spacing — more generous vertical rhythm
   ========================================================================= */

.section {
  padding-top: clamp(96px, 9vw, 120px) !important;
  padding-bottom: clamp(96px, 9vw, 120px) !important;
}

/* Hero needs different padding — don't over-space it */
.section.hero {
  padding-top: 50px !important;
  padding-bottom: 62px !important;
}


/* =========================================================================
   PHASE 2A: Dark sections — navy treatment
   ========================================================================= */

.section.tech,
.tech {
  background: #1A2332 !important;
  color: #F7F7F2 !important;
}

.section.tech h2,
.tech h2 {
  color: #F7F7F2 !important;
}

.section.tech .section-lede,
.tech .section-lede {
  color: rgba(247, 247, 242, 0.72) !important;
}

.section.tech .kicker,
.tech .kicker {
  color: #7AAFB5 !important;
}

.tech-card {
  background: #243044 !important;
  border-color: rgba(122, 175, 181, 0.15) !important;
}

.tech-card h3 {
  color: #F7F7F2 !important;
}

.tech-card p {
  color: rgba(247, 247, 242, 0.72) !important;
}


/* =========================================================================
   PHASE 2B: Coordination panel — navy dark
   ========================================================================= */

.coordination-panel {
  background:
    radial-gradient(circle at 82% 18%, rgba(122, 175, 181, 0.08), transparent 16rem),
    linear-gradient(160deg, #1A2332, #243044) !important;
}

.coordination-panel__head .panel-label {
  color: rgba(122, 175, 181, 0.9) !important;
}

.coordination-core__label {
  color: #7AAFB5 !important;
}

.coordination-core__label::before {
  background: #7AAFB5 !important;
}

.coordination-outputs span strong {
  color: #F7F7F2 !important;
}


/* =========================================================================
   PHASE 2C: Hero visual — navy card
   ========================================================================= */

.hero-visual {
  border-color: rgba(122, 175, 181, 0.18) !important;
  background:
    radial-gradient(circle at 28% 20%, rgba(122, 175, 181, 0.08), transparent 13rem),
    radial-gradient(circle at 78% 76%, rgba(122, 175, 181, 0.06), transparent 15rem),
    linear-gradient(145deg, color-mix(in oklch, white 90%, var(--paper-warm)), var(--paper)) !important;
}

.hero-visual::before {
  background-image:
    linear-gradient(rgba(122, 175, 181, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 175, 181, 0.12) 1px, transparent 1px) !important;
}


/* =========================================================================
   PHASE 2D: Status badges — teal instead of green
   ========================================================================= */

.status {
  background: rgba(122, 175, 181, 0.12) !important;
  color: #5A8F98 !important;
  border-color: rgba(122, 175, 181, 0.25) !important;
}

.status::before {
  color: #7AAFB5 !important;
  box-shadow: 0 0 0 4px rgba(122, 175, 181, 0.13) !important;
}


/* =========================================================================
   PHASE 2E: Hero proof badges — teal tints
   ========================================================================= */

.hero-proof span:nth-child(1) {
  border-color: rgba(122, 175, 181, 0.35) !important;
  background: rgba(122, 175, 181, 0.1) !important;
}

.hero-proof span:nth-child(2) {
  border-color: rgba(122, 175, 181, 0.28) !important;
  background: rgba(122, 175, 181, 0.08) !important;
}

.hero-proof span:nth-child(3) {
  border-color: rgba(122, 175, 181, 0.22) !important;
  background: rgba(122, 175, 181, 0.06) !important;
}


/* =========================================================================
   PHASE 2F: Question cards — teal left-border accent
   ========================================================================= */

.question {
  border-left: 3px solid #7AAFB5 !important;
  padding-left: 18px !important;
}

/* Override the nth-child(2n) left-border from the problem section */
.problem .question:nth-child(2n) {
  border-left: 3px solid #7AAFB5 !important;
}


/* =========================================================================
   PHASE 2G: Card hover — subtle teal border on hover
   ========================================================================= */

.card:hover,
.step:hover,
.post-card:hover,
.trust-card:hover,
.compare-card:hover,
.tech-card:hover,
.security-card:hover {
  border-color: rgba(122, 175, 181, 0.45) !important;
}


/* =========================================================================
   PHASE 2H: CTA panel — navy background
   ========================================================================= */

.cta-panel {
  background:
    radial-gradient(circle at 72% 28%, rgba(122, 175, 181, 0.1), transparent 18rem),
    linear-gradient(150deg, #1A2332, #243044) !important;
  border-color: rgba(122, 175, 181, 0.12) !important;
}

.cta-panel .kicker {
  color: #7AAFB5 !important;
}

.cta-panel h2 {
  color: #F7F7F2 !important;
}

.cta-panel p {
  color: rgba(247, 247, 242, 0.72) !important;
}

.cta-panel .cta {
  background: #7AAFB5 !important;
  border-color: #7AAFB5 !important;
  color: #111719 !important;
}

.cta-panel .cta:hover {
  background: #5A8F98 !important;
  border-color: #5A8F98 !important;
}

.cta-panel .login {
  border-color: rgba(247, 247, 242, 0.25) !important;
  color: #F7F7F2 !important;
}


/* =========================================================================
   PHASE 2I: Service cards & bridge — teal accents
   ========================================================================= */

.service-label {
  color: #7AAFB5 !important;
}

.service-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  background: var(--ink, #111719) !important;
  border: 1px solid var(--ink, #111719) !important;
  color: #FFFFFF !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: transform 220ms ease, background 220ms ease,
              border-color 220ms ease, box-shadow 220ms ease !important;
  box-shadow: 0 1px 2px rgba(5, 5, 5, 0.06), 0 6px 16px rgba(5, 5, 5, 0.08) !important;
}

.service-cta::after {
  content: "→" !important;
  display: inline-block !important;
  font-size: 15px !important;
  line-height: 1 !important;
  transition: transform 220ms ease !important;
}

.service-cta:hover {
  transform: translateY(-1px) !important;
  background: var(--dark, #1A2332) !important;
  border-color: var(--dark, #1A2332) !important;
  box-shadow: 0 2px 4px rgba(5, 5, 5, 0.08), 0 12px 28px rgba(5, 5, 5, 0.12) !important;
}

.service-cta:hover::after {
  transform: translateX(3px) !important;
}

/* Calculator CTA — light blue teal variant (matches Security section) */
.service-cta.service-cta--calculator {
  background: #7AAFB5 !important;
  border: 1.5px solid #7AAFB5 !important;
  color: #111719 !important;
  box-shadow: none !important;
}
.service-cta.service-cta--calculator:hover {
  background: #8FC3C9 !important;
  border-color: #8FC3C9 !important;
  color: #111719 !important;
  box-shadow: 0 2px 4px rgba(5, 5, 5, 0.08), 0 12px 28px rgba(5, 5, 5, 0.12) !important;
}
.service-cta.service-cta--calculator::after {
  content: "↗" !important;
}

.service-cta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 6px !important;
}
.service-bridge {
  border-color: rgba(122, 175, 181, 0.25) !important;
}

.service-bridge span {
  color: #7AAFB5 !important;
}


/* =========================================================================
   PHASE 2J: Section head spacing — more generous gaps
   ========================================================================= */

.section-head {
  margin-bottom: clamp(40px, 4vw, 56px) !important;
}

.section-head .kicker {
  margin-bottom: 14px !important;
}

.section-lede {
  margin-top: 18px !important;
}


/* =========================================================================
   PHASE 2K: Plan report — teal accents
   ========================================================================= */

.plan-metric .panel-label {
  color: #7AAFB5 !important;
}

.plan-top .panel-label {
  color: #7AAFB5 !important;
}


/* =========================================================================
   PHASE 2L: Step accent colours — teal line
   ========================================================================= */

.step::before,
.process-card::before,
.proof-card::before,
.security-card::before {
  background: linear-gradient(90deg, #7AAFB5, rgba(122, 175, 181, 0)) !important;
}

.step span:first-child {
  color: #7AAFB5 !important;
}


/* =========================================================================
   PHASE 2M: Key takeaways — teal accent border
   ========================================================================= */

.key-takeaways,
.geo-direct {
  border-left-color: #7AAFB5 !important;
}

.key-takeaways h2,
.geo-direct h2 {
  color: #7AAFB5 !important;
}

.key-takeaways li::before {
  background: #7AAFB5 !important;
}


/* =========================================================================
   PHASE 2N: Calculator panel — teal accents
   ========================================================================= */

.calculator-panel {
  border-color: rgba(122, 175, 181, 0.2) !important;
}

.calculator-panel .kicker {
  color: #7AAFB5 !important;
}

.calculator-preview-top span {
  color: #7AAFB5 !important;
}

.calculator-preview-result span {
  color: #7AAFB5 !important;
}


/* =========================================================================
   PHASE 2O: Compare section — teal toggle and accents
   ========================================================================= */

.toggle button.active {
  background: #111719 !important;
  color: #F7F7F2 !important;
}

.compare-top .panel-label {
  color: #7AAFB5 !important;
}


/* =========================================================================
   PHASE 2P: Security section — navy background
   ========================================================================= */

.section.security {
  background: #1A2332 !important;
  border-radius: var(--radius-lg) !important;
  color: #F7F7F2 !important;
}

.section.security h2 {
  color: #F7F7F2 !important;
}

.section.security .section-lede {
  color: rgba(247, 247, 242, 0.82) !important;
}

.section.security .kicker {
  color: #B8D8DC !important;
  background: rgba(122, 175, 181, 0.12) !important;
  border-color: rgba(122, 175, 181, 0.35) !important;
}

.security-card {
  background: #243044 !important;
  border-color: rgba(122, 175, 181, 0.15) !important;
}

.security-card h3 {
  color: #F7F7F2 !important;
}

.security-card p {
  color: rgba(247, 247, 242, 0.85) !important;
}

.security-actions .secondary {
  border-color: rgba(247, 247, 242, 0.25) !important;
  color: #F7F7F2 !important;
}


/* =========================================================================
   PHASE 2Q: Footer — teal accents in dark footer
   ========================================================================= */

.site-footer {
  background: #111719 !important;
}

.site-footer a:hover {
  color: #7AAFB5 !important;
}


/* =========================================================================
   PHASE 2R: Tech shapes — teal tints instead of grey
   ========================================================================= */

.tech-shape span {
  background: rgba(122, 175, 181, 0.25) !important;
}

.tech-card:nth-child(1) .tech-shape span { --shape: #7AAFB5 !important; }
.tech-card:nth-child(2) .tech-shape span { --shape: #7AAFB5 !important; }
.tech-card:nth-child(3) .tech-shape span { --shape: #7AAFB5 !important; }
.tech-card:nth-child(4) .tech-shape span { --shape: #7AAFB5 !important; }


/* =========================================================================
   PHASE 2S: Coordination map — teal accent lines
   ========================================================================= */

.coordination-map li::before {
  background: rgba(122, 175, 181, 0.5) !important;
}


/* =========================================================================
   PHASE 2T: Problem section — navy background for editorial feel
   ========================================================================= */

.problem {
  background: var(--surface-muted, #EFEFED) !important;
  border-radius: var(--radius-lg) !important;
}


/* =========================================================================
   PHASE 2U: Wealth diagram bars — teal
   ========================================================================= */

.wealth-bar {
  background: #7AAFB5 !important;
}

.tax-review-line {
  border-color: #7AAFB5 !important;
  color: #7AAFB5 !important;
}

.tax-node strong {
  color: #7AAFB5 !important;
}


/* #########################################################################
   PHASE 3: Imagery Integration
   -------------------------------------------------------------------------
   Adding generated illustrations to key sections via CSS.
   ######################################################################### */


/* =========================================================================
   PHASE 3A: Service cards — illustration at bottom of each card
   ========================================================================= */

.service-card.tax .service-visual {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  margin-top: 24px !important;
}

.service-card.tax .service-visual::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background: url('/assets/images/illustrations/tax-compass.png') center center / cover no-repeat !important;
  opacity: 0.08 !important;
  pointer-events: none !important;
  border-radius: 16px !important;
}

.service-card.wealth .service-visual {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  margin-top: 24px !important;
}

.service-card.wealth .service-visual::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background: url('/assets/images/illustrations/wealth-mountain-door.png') center center / cover no-repeat !important;
  opacity: 0.08 !important;
  pointer-events: none !important;
  border-radius: 16px !important;
}


/* =========================================================================
   PHASE 3B: How it works steps — subtle imagery
   ========================================================================= */

.step:nth-child(1) {
  position: relative !important;
  overflow: hidden !important;
}

.step:nth-child(1)::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 40% !important;
  background: url('/assets/images/illustrations/hikers-journey.png') center center / cover no-repeat !important;
  opacity: 0.06 !important;
  pointer-events: none !important;
  mask-image: linear-gradient(to right, transparent, black) !important;
  -webkit-mask-image: linear-gradient(to right, transparent, black) !important;
}

.step:nth-child(3) {
  position: relative !important;
  overflow: hidden !important;
}

.step:nth-child(3)::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 40% !important;
  background: url('/assets/images/illustrations/chess-strategy.png') center center / cover no-repeat !important;
  opacity: 0.06 !important;
  pointer-events: none !important;
  mask-image: linear-gradient(to right, transparent, black) !important;
  -webkit-mask-image: linear-gradient(to right, transparent, black) !important;
}


/* =========================================================================
   PHASE 3C: CTA panel — ocean illustration as subtle background
   ========================================================================= */

.cta-panel {
  position: relative !important;
  overflow: hidden !important;
}

.cta-panel::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background: url('/assets/images/illustrations/hero-ocean.webp') center 30% / cover no-repeat !important;
  opacity: 0.08 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.cta-panel > * {
  position: relative !important;
  z-index: 1 !important;
}


/* =========================================================================
   PHASE 3D: Service bridge — brush stroke texture
   ========================================================================= */

.service-bridge {
  position: relative !important;
  overflow: hidden !important;
}

.service-bridge::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background: url('/assets/images/illustrations/teal-brush-strokes.webp') center center / cover no-repeat !important;
  opacity: 0.06 !important;
  pointer-events: none !important;
}


/* =========================================================================
   PHASE 3E: Tech section — subtle vineyard background texture
   ========================================================================= */

.section.tech {
  position: relative !important;
  overflow: hidden !important;
}

.section.tech::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  right: -5% !important;
  bottom: 0 !important;
  width: 50% !important;
  background: url('/assets/images/illustrations/vineyard-golden.webp') center center / cover no-repeat !important;
  opacity: 0.04 !important;
  pointer-events: none !important;
  mask-image: linear-gradient(to left, black 30%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(to left, black 30%, transparent 100%) !important;
  z-index: 0 !important;
}

.section.tech .tech-grid {
  position: relative !important;
  z-index: 1 !important;
}

.section.tech .section-head {
  position: relative !important;
  z-index: 1 !important;
}


/* =========================================================================
   Hero visual — WebP image with rounded border crop
   ========================================================================= */



.hero-visual__img {
  display: block !important;
  width: 100% !important;
  max-width: 560px !important;
  height: auto !important;
  border-radius: 24px !important;
  object-fit: cover !important;
  box-shadow:
    0 8px 32px rgba(17, 23, 25, 0.12),
    0 2px 8px rgba(17, 23, 25, 0.06) !important;
  border: 1px solid rgba(122, 175, 181, 0.15) !important;
}

@media (min-width: 900px) {
  .hero-visual__img {
    max-width: 620px !important;
    border-radius: 28px !important;
  }
}

@media (max-width: 600px) {
  .hero-visual__img {
    max-width: 100% !important;
    border-radius: 20px !important;
  }
}


/* =========================================================================
   Sticky header with backdrop blur
   ========================================================================= */

.nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  transition: box-shadow 0.3s ease !important;
}

/* Override ALL overflow:clip rules on .page that break sticky positioning */
.page {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* Prevent horizontal scrollbar — clip only on body, not .page */
body {
  overflow-x: clip !important;
}


/* =========================================================================
   Fix: Service scope — border-top alignment
   The separator line needs horizontal padding to align with the card
   content above it, and proper margin to sit flush with the card edge.
   ========================================================================= */

details.service-scope {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: 0 !important;
}


/* =========================================================================
   Fix: Security & Privacy — improve contrast
   Light text on light pill backgrounds = poor readability. Darken the
   pill text, add a stronger teal border for visual hierarchy.
   ========================================================================= */

.security-band .kicker {
  color: #7AAFB5 !important;
  background: rgba(122, 175, 181, 0.12) !important;
  border-color: rgba(122, 175, 181, 0.3) !important;
}

.security-band .lede {
  color: rgba(247, 247, 242, 0.82) !important;
}

.security-band .security-cta,
.security-band .cta,
.security-actions .cta {
  background: #7AAFB5 !important;
  border-color: #7AAFB5 !important;
  color: #111719 !important;
}

.security-band .security-cta:hover,
.security-band .cta:hover,
.security-actions .cta:hover {
  background: #8FC3C9 !important;
  border-color: #8FC3C9 !important;
}

.security-card {
  background: #243044 !important;
  border: 1px solid rgba(122, 175, 181, 0.2) !important;
}

.security-card h3 {
  color: #FFFFFF !important;
  font-weight: 500 !important;
}

.security-card p {
  color: rgba(247, 247, 242, 0.78) !important;
}


/* =========================================================================
   Fix: CTA panel (Start here) — constrain text width, fill right with image
   The panel has only one child <div>, so grid 1fr 1fr leaves an empty column.
   Instead, constrain the text block and use a ::after to fill the right.
   ========================================================================= */

.cta-panel {
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: clamp(24px, 3vw, 32px) !important;
}

.cta-panel > div:first-child {
  max-width: 58% !important;
  position: relative !important;
  z-index: 2 !important;
}

.cta-panel::after {
  display: none !important;
}

@media (max-width: 768px) {
  .cta-panel > div:first-child {
    max-width: 100% !important;
  }
  .cta-panel::after {
    display: none !important;
  }
}

/* =========================================================================
   FIX 6: FAQ accordion — inline + icon with question text
   The competing Layer 1 (content:"+"), Layer 2 (flex summary) and Zcode
   (background gradient cross) fight each other. Force definitive layout.
   ========================================================================= */

.faqs,
.faq-stack,
.faq-wrap {
  display: grid !important;
  gap: 10px !important;
  border-top: none !important;
  max-width: none !important;
}

.faqs details,
.faq-stack details,
.faq-wrap details {
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  background: color-mix(in oklch, white 86%, var(--paper-warm, var(--bg))) !important;
  box-shadow: none !important;
}

.faqs summary,
.faq-stack summary,
.faq-wrap summary {
  list-style: none !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  min-height: 54px !important;
  padding: 16px 20px !important;
  font-family: var(--font, inherit) !important;
  font-weight: 500 !important;
  font-size: clamp(16px, 1.2vw, 18px) !important;
  line-height: 1.34 !important;
  color: var(--ink) !important;
}

.faqs summary::-webkit-details-marker,
.faq-stack summary::-webkit-details-marker,
.faq-wrap summary::-webkit-details-marker {
  display: none !important;
}

/* Definitive + icon: 26px circle, content "+" text, inline-flex */
.faqs summary::after,
.faq-stack summary::after,
.faq-wrap summary::after {
  content: "+" !important;
  flex: 0 0 26px !important;
  width: 26px !important;
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  background: none !important;
  color: var(--muted) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  margin-left: auto !important;
  transition: transform 320ms ease, opacity 320ms ease !important;
}

.faqs details[open] summary::after,
.faq-stack details[open] summary::after,
.faq-wrap details[open] summary::after {
  content: "−" !important;
  transform: none !important;
  opacity: 0.6 !important;
}

.faqs summary:hover,
.faq-stack summary:hover,
.faq-wrap summary:hover {
  color: var(--accent, var(--blue)) !important;
}

.faqs p,
.faq-stack p,
.faq-wrap p {
  padding: 0 20px 18px !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 15.5px !important;
  line-height: 1.58 !important;
  max-width: 780px !important;
}


/* =========================================================================
   FIX 7: Testimonial — remove unwanted red/green left border from blockquote
   The generic `blockquote` rule (border-left: 3px solid var(--green))
   and zcode `.testimonial` (border-left: 3px solid var(--precision))
   both add unwanted left borders. Strip them from testimonials.
   Also the testimonial-shell itself inherits a left border on rounded cards.
   ========================================================================= */

/* Shell: keep outer card but strip any left-accent */
.testimonial-shell {
  border-left-color: var(--line) !important;
}

/* Individual testimonial figure: no borders at all */
.testimonial,
.testimonial-shell .testimonial,
figure.testimonial {
  border: 0 !important;
  border-left: 0 !important;
  border-left-style: none !important;
  border-left-width: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: clamp(30px, 4vw, 52px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

/* Blockquote inside testimonial: no borders at all */
.testimonial blockquote,
.testimonial-shell .testimonial blockquote,
figure.testimonial blockquote,
.testimonial-track blockquote {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 0 !important;
  border-left-style: none !important;
  border-left-width: 0 !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-family: var(--serif, Georgia, serif) !important;
  font-size: clamp(22px, 2.2vw, 31px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.006em !important;
}


.testimonial figcaption,
.testimonial-shell .testimonial figcaption {
  width: 100% !important;
  max-width: 790px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-top: auto !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--line) !important;
  color: var(--muted) !important;
  font-size: 15px !important;
}

.testimonial figcaption span {
  color: var(--ink) !important;
  font-weight: 650 !important;
}


/* =========================================================================
   FIX 8: Art-panel .panel-media — on non-home pages, show the real image
   and HIDE the decorative ::before placeholder that was used as substitute.
   ========================================================================= */

/* Hide the decorative ::before placeholder since we show the real image */
body:not([data-route="/"]) .hero .art-panel::before {
  display: none !important;
  content: none !important;
}

/* For non-home pages: show the panel-media with the real image */
body:not([data-route="/"]) .hero .art-panel .panel-media {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  margin: 0 0 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 22, 33, 0.08) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--blue, #3d87a5) 14%, white),
    color-mix(in oklch, var(--green, #438a68) 12%, white)) !important;
}

body:not([data-route="/"]) .hero .art-panel .panel-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* For non-hero contexts on subpages, truly hide panel-media */
body:not([data-route="/"]) .art-panel:not(.hero .art-panel) .panel-media {
  display: none !important;
}


/* =========================================================================
   FIX 9: Calculator-preview — restore padding and gap.
   The zcode layer forces `padding: 0; gap: 0` which clusters everything.
   ========================================================================= */

.calculator-preview {
  padding: 16px !important;
}

.calculator-preview-top {
  padding: 0 4px 14px !important;
  margin-bottom: 4px !important;
}

.calculator-preview-grid {
  gap: 10px !important;
  padding: 0 !important;
}

.calculator-preview-field {
  border: 1px solid var(--line, rgba(17, 23, 25, 0.13)) !important;
  border-radius: 14px !important;
  background: color-mix(in oklch, white 76%, var(--paper-warm, #f5f0e8)) !important;
  padding: 14px 16px !important;
}

.calculator-preview-result {
  margin-top: 10px !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  border-top: 1px solid var(--line, rgba(17, 23, 25, 0.13)) !important;
}


/* =========================================================================
   FIX 10: 4th tech card "Human review" — add shape colour & span heights.
   Cards 1-3 have custom shape definitions but card 4 was never defined,
   so the spans have no background colour or height.
   ========================================================================= */

.tech-card:nth-child(4) {
  --shape: var(--coral, #b85c4e) !important;
}

/* Give the 4th card a "checkmark/review" shape — two angled bars */
.tech-card:nth-child(4) .tech-shape {
  align-items: center !important;
}

.tech-card:nth-child(4) .tech-shape span {
  height: 3px !important;
  border-radius: 999px !important;
  background: color-mix(in oklch, var(--shape, var(--coral, #b85c4e)) 62%, white) !important;
  opacity: 0.72 !important;
  animation: humanReviewPulse 3.6s ease-in-out infinite !important;
}

.tech-card:nth-child(4) .tech-shape span:nth-child(1) { width: 80% !important; animation-delay: -0.2s !important; }
.tech-card:nth-child(4) .tech-shape span:nth-child(2) { width: 100% !important; animation-delay: -0.9s !important; }
.tech-card:nth-child(4) .tech-shape span:nth-child(3) { width: 60% !important; animation-delay: -1.6s !important; }
.tech-card:nth-child(4) .tech-shape span:nth-child(4) { width: 90% !important; animation-delay: -2.3s !important; }
.tech-card:nth-child(4) .tech-shape span:nth-child(5) { width: 45% !important; animation-delay: -3.0s !important; }

@keyframes humanReviewPulse {
  0%, 100% { opacity: 0.45; transform: scaleX(0.9); }
  50% { opacity: 0.85; transform: scaleX(1); }
}


/* =========================================================================
   FIX 11: FAQ summary::after — force position:static so the + icon
   participates in the flex row instead of being absolutely positioned.
   Layer 1 sets `position: absolute; right: 22px; top: 22px` which
   removes the icon from flow and breaks vertical centering.
   ========================================================================= */

.faqs summary::after,
.faq-stack summary::after,
.faq-wrap summary::after {
  position: static !important;
  top: auto !important;
  right: auto !important;
}


/* =========================================================================
   FIX 12: Testimonial styling — the zcode rule `.testimonial + *` applies
   text-transform:uppercase, font-weight:600, font-size:0.82rem, etc. to
   all testimonials after the first. Reset ALL properties to match card 1.
   ========================================================================= */

.testimonial + .testimonial,
.testimonial + *,
figure.testimonial + figure.testimonial {
  text-transform: none !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
}

.testimonial figcaption,
.testimonial-shell .testimonial figcaption,
.testimonial-track .testimonial figcaption {
  text-transform: none !important;
  font-weight: normal !important;
  font-size: 15px !important;
  letter-spacing: normal !important;
}

.testimonial figcaption span {
  text-transform: none !important;
  font-weight: 650 !important;
  color: var(--ink) !important;
}

.testimonial blockquote {
  text-transform: none !important;
  font-weight: 400 !important;
}


/* =========================================================================
   FIX 13: Luxury-disclosure / Service-scope "View additional detail"
   The Layer 1 `summary::after { position: absolute }` removes the + icon
   from flow. Force position:static so inline-flex layout works properly.
   ========================================================================= */

.luxury-disclosure summary,
details.luxury-disclosure summary,
details.service-scope summary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 13px 22px !important;
  border: 1px solid var(--line-strong, var(--line)) !important;
  border-radius: 999px !important;
  background: var(--paper) !important;
  cursor: pointer !important;
  list-style: none !important;
  font-family: var(--font) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  position: relative !important;
}

.luxury-disclosure summary::after,
details.luxury-disclosure summary::after,
details.service-scope summary::after {
  content: "+" !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  width: auto !important;
  height: auto !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  display: inline !important;
  font-weight: 400 !important;
  font-size: 1.1rem !important;
  color: var(--accent, var(--blue)) !important;
}

.luxury-disclosure[open] summary::after,
details[open].luxury-disclosure summary::after,
details[open].service-scope summary::after {
  content: "−" !important;
}

.luxury-disclosure summary::-webkit-details-marker,
details.service-scope summary::-webkit-details-marker {
  display: none !important;
}


/* =========================================================================
   FIX 14: Link-list — give breathing room between items.
   The list items render too compressed in the current layout.
   ========================================================================= */

.link-list {
  margin-top: 30px !important;
  padding: 0 !important;
  list-style: none !important;
  display: grid !important;
  gap: 0 !important;
  border-top: 1px solid var(--line) !important;
}

.link-list li {
  border-bottom: 1px solid var(--line) !important;
}

.link-list a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 6px !important;
  font-size: 1rem !important;
  color: var(--ink) !important;
  text-decoration: none !important;
}

.link-list a::after {
  content: "→" !important;
  color: var(--accent, var(--blue)) !important;
  opacity: 0.4 !important;
  flex-shrink: 0 !important;
  margin-left: 16px !important;
  text-decoration: none !important;
  transition: opacity 280ms ease, transform 280ms ease !important;
}

.link-list a:hover::after {
  opacity: 1 !important;
}


/* =========================================================================
   FIX 15: Related guides heading — add spacing above when after a card grid
   ========================================================================= */

.grid + h2,
.luxury-grid-primary + h2,
.luxury-disclosure + h2,
.luxury-disclosure + .link-list,
.faq-stack + h2 {
  margin-top: 48px !important;
}


/* =========================================================================
   FIX 16: Luxury-disclosure wrapper — remove card appearance
   site-polish wraps .luxury-disclosure in a bordered card (border, radius,
   bg). The summary is styled as a standalone pill button in FIX 13.
   Strip the card wrapper so the pill sits directly on the page surface.
   ========================================================================= */

.luxury-disclosure,
details.luxury-disclosure {
  border: none !important;
  background: transparent !important;
  overflow: visible !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* The secondary grid inside an open disclosure should keep its own
   card-like appearance (padding, gap) but not inherit the wrapper */
.luxury-disclosure .luxury-grid-secondary {
  border: 1px solid var(--line, rgba(23, 25, 28, 0.12)) !important;
  border-radius: 18px !important;
  background: color-mix(in oklch, white 82%, var(--paper-warm, var(--bg, #F4F1EC))) !important;
  padding: clamp(18px, 2vw, 24px) !important;
  margin-top: 12px !important;
}


/* =========================================================================
   FIX 17: CTA hover contrast in dark sections (.final, .cta-panel)
   The generic .cta:hover { background: #243044 } makes the button
   near-invisible on dark navy backgrounds. Force white for dark contexts.
   ========================================================================= */

.final .cta,
.final-cta .cta,
.cta-panel .cta {
  background: #F7F7F2 !important;
  border-color: #F7F7F2 !important;
  color: #111719 !important;
}

.final .cta:hover,
.final-cta .cta:hover,
.cta-panel .cta:hover {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #111719 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}


/* =========================================================================
   FIX 18: Legal pages — compact header, no booking CTA
   Legal pages should show a clean header + content without the service-
   page hero CTA or empty art-panel whitespace.
   ========================================================================= */

body[data-route^="/legal/"] .hero {
  padding-bottom: 24px !important;
  min-height: auto !important;
}

body[data-route^="/legal/"] .hero .actions {
  display: none !important;
}

/* Hide the empty art panel on legal heroes (no image to show) */
body[data-route^="/legal/"] .hero .art-panel,
body[data-route^="/legal/"] .hero aside {
  display: none !important;
}

/* Tighten spacing between legal hero and first content section */
body[data-route^="/legal/"] .hero + .section {
  padding-top: clamp(32px, 4vw, 48px) !important;
}

/* =========================================================================
   FIX 19: Mobile CTA buttons — hug their label instead of stretching
   Below 720px several rules (base-export.css, site-polish.css) force
   .actions/.service-cta children to width:100%, and .service-inner's
   flex-direction:column gives .service-cta stretch-to-fill by default.
   Override both so pill buttons shrink to content and center.
   ========================================================================= */

@media (max-width: 720px) {
  .actions {
    align-items: center !important;
    justify-content: center !important;
  }

  .actions .cta,
  .actions .secondary,
  .actions .login {
    width: auto !important;
    max-width: 100% !important;
    align-self: center !important;
  }

  .service-cta-row {
    justify-content: center !important;
  }

  .service-cta {
    align-self: center !important;
    width: auto !important;
    max-width: 100% !important;
  }
}

/* =========================================================================
   FIX 20: Mobile section overlap — connected-advice bridge
   .flow-connector + .service-bridge carries a deliberate -6px overlap on
   desktop (site-polish.css) to visually bridge the flow-connector SVG into
   the card below it. The connector is hidden below 800px (site-polish.css),
   but display:none still satisfies the adjacent-sibling selector, so the
   overlap survives after the element it was designed around disappears.
   Restore the standard mobile section gap in that case.
   ========================================================================= */

@media (max-width: 800px) {
  body[data-route="/"] .flow-connector + .service-bridge {
    margin-top: clamp(46px, 10vw, 66px) !important;
  }
}


/* =========================================================================
   FIX 21: Homepage hero — full-width motion background
   The GitHub staging hero keeps its approved content and actions while the
   static right-hand image is replaced by the Atlas Motion film.
   ========================================================================= */

body[data-route="/"] main > .section.hero.hero--video {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  background: #0b1b1f;
  color: #f7f7f2;
}

body[data-route="/"] .hero--video > .hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--layout-ultra, 1520px);
  margin-inline: auto;
  min-width: 0;
}

body[data-route="/"] .hero--video h1 {
  color: #ffffff !important;
  text-shadow: 0 3px 34px rgba(4, 16, 20, 0.36);
}

body[data-route="/"] .hero--video .hero-copy {
  color: rgba(255, 255, 255, 0.84) !important;
  text-shadow: 0 2px 22px rgba(4, 16, 20, 0.32);
}

body[data-route="/"] .hero--video .actions .cta {
  border-color: #f7f7f2 !important;
  background: #f7f7f2 !important;
  color: #111719 !important;
}

body[data-route="/"] .hero--video .actions .cta:hover {
  border-color: #ffffff !important;
  background: #ffffff !important;
  color: #111719 !important;
}

body[data-route="/"] .hero--video .actions .secondary {
  border-color: rgba(255, 255, 255, 0.66) !important;
  background: rgba(7, 20, 24, 0.2) !important;
  color: #ffffff !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body[data-route="/"] .hero--video .actions .secondary:hover {
  border-color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

body[data-route="/"] .hero-video-media,
body[data-route="/"] .hero-video__asset,
body[data-route="/"] .hero-video__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

body[data-route="/"] .hero-video-media {
  z-index: 0;
  overflow: hidden;
  /* The poster as an always-on backdrop, framed identically to the video
     below. While the video buffers (opacity 0) this is what shows, so the
     poster -> motion transition is a soft crossfade rather than a hard cut.
     Same file the poster attribute uses — no extra bytes. */
  background-image: url('/assets/images/pages/home-atlas-motion/hero-space-to-live-poster.jpg');
  background-size: cover;
  background-position: 53% 50%;
  background-repeat: no-repeat;
}

body[data-route="/"] .hero-video__asset {
  display: block;
  object-fit: cover;
  object-position: 53% 50%;
  transform: scale(1.015);
  transition: opacity 450ms ease;
}

/* Set by the hero script the moment the src is attached; removed on the
   video's `playing` event to fade the first frame in over the poster. */
body[data-route="/"] .hero-video__asset--loading {
  opacity: 0;
}

body[data-route="/"] .hero-video__shade {
  background:
    linear-gradient(180deg, rgba(7, 20, 24, 0.14) 0%, rgba(7, 20, 24, 0.08) 45%, rgba(7, 20, 24, 0.72) 100%),
    linear-gradient(90deg, rgba(7, 20, 24, 0.84) 0%, rgba(7, 20, 24, 0.62) 45%, rgba(7, 20, 24, 0.12) 100%);
}

@media (max-width: 768px) {
  body[data-route="/"] .hero-video-media {
    background-position: 60% 50%;
  }

  body[data-route="/"] .hero-video__asset {
    object-position: 60% 50%;
  }

  body[data-route="/"] .hero-video__shade {
    background:
      linear-gradient(180deg, rgba(7, 20, 24, 0.16) 0%, rgba(7, 20, 24, 0.38) 42%, rgba(7, 20, 24, 0.9) 100%),
      linear-gradient(90deg, rgba(7, 20, 24, 0.54), rgba(7, 20, 24, 0.12));
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-route="/"] .hero-video__asset {
    transform: scale(1.015);
    /* No crossfade when motion is reduced (the video also never autoplays
       in this mode — see the hero script). */
    transition: none;
  }
}


/* =========================================================================
   FIX 22: Homepage Tax & Wealth cards — aligned content
   Keep both cards on a clean solid surface, with matching title and action
   rows giving the pair shared visual anchors on desktop.
   ========================================================================= */

body[data-route="/"] #services .service-card {
  background: #f3f1eb !important;
}

body[data-route="/"] #services .service-cta-row {
  gap: 8px !important;
  margin-top: 24px !important;
}

body[data-route="/"] #services .service-cta-row > .service-cta {
  margin-top: 0 !important;
}

@media (min-width: 1041px) {
  body[data-route="/"] #services .service-card h3 {
    min-height: 2lh;
  }
}


/* =========================================================================
   FIX 23: Connected-advice chart — scroll-triggered left-to-right growth
   The chart remains fully visible without JavaScript. Motion is enabled only
   after the homepage observer is ready and plays once as the graph enters.
   ========================================================================= */

body[data-route="/"] [data-scroll-chart] .twc-line-optimised,
body[data-route="/"] [data-scroll-chart] .twc-line-unstructured,
body[data-route="/"] [data-scroll-chart] .twc-fill-optimised,
body[data-route="/"] [data-scroll-chart] .twc-dot-start,
body[data-route="/"] [data-scroll-chart] .twc-dot-optimised,
body[data-route="/"] [data-scroll-chart] .twc-dot-unstructured {
  animation: none !important;
}

body[data-route="/"] [data-scroll-chart] .twc-line-optimised {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

body[data-route="/"] [data-scroll-chart] .twc-line-unstructured,
body[data-route="/"] [data-scroll-chart] .twc-fill-optimised,
body[data-route="/"] [data-scroll-chart] .twc-dot-start,
body[data-route="/"] [data-scroll-chart] .twc-dot-optimised,
body[data-route="/"] [data-scroll-chart] .twc-dot-unstructured {
  opacity: 1;
}

body[data-route="/"] [data-scroll-chart].is-chart-ready .twc-dot-start,
body[data-route="/"] [data-scroll-chart].is-chart-ready .twc-dot-optimised,
body[data-route="/"] [data-scroll-chart].is-chart-ready .twc-dot-unstructured {
  transform-box: fill-box;
  transform-origin: center;
}

body[data-route="/"] [data-scroll-chart].is-chart-ready:not(.is-chart-visible) .twc-title {
  opacity: 0;
  transform: translateY(7px);
}

body[data-route="/"] [data-scroll-chart].is-chart-ready:not(.is-chart-visible) svg {
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
}

body[data-route="/"] [data-scroll-chart].is-chart-ready:not(.is-chart-visible) .twc-line-optimised {
  stroke-dashoffset: 1;
}

body[data-route="/"] [data-scroll-chart].is-chart-ready:not(.is-chart-visible) .twc-fill-optimised,
body[data-route="/"] [data-scroll-chart].is-chart-ready:not(.is-chart-visible) .twc-dot-start,
body[data-route="/"] [data-scroll-chart].is-chart-ready:not(.is-chart-visible) .twc-dot-optimised,
body[data-route="/"] [data-scroll-chart].is-chart-ready:not(.is-chart-visible) .twc-dot-unstructured {
  opacity: 0;
}

body[data-route="/"] [data-scroll-chart].is-chart-ready:not(.is-chart-visible) .twc-dot-start,
body[data-route="/"] [data-scroll-chart].is-chart-ready:not(.is-chart-visible) .twc-dot-optimised,
body[data-route="/"] [data-scroll-chart].is-chart-ready:not(.is-chart-visible) .twc-dot-unstructured {
  transform: scale(0.35);
}

body[data-route="/"] [data-scroll-chart].is-chart-ready.is-chart-visible .twc-title {
  animation: connectedChartTitle 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

body[data-route="/"] [data-scroll-chart].is-chart-ready.is-chart-visible svg {
  animation: connectedChartReveal 1.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body[data-route="/"] [data-scroll-chart].is-chart-ready.is-chart-visible .twc-line-optimised {
  animation: connectedChartDraw 1.65s cubic-bezier(0.22, 1, 0.36, 1) 100ms both !important;
}

body[data-route="/"] [data-scroll-chart].is-chart-ready.is-chart-visible .twc-fill-optimised {
  animation: connectedChartFade 760ms ease 620ms both !important;
}

body[data-route="/"] [data-scroll-chart].is-chart-ready.is-chart-visible .twc-dot-start {
  animation: connectedChartPop 360ms cubic-bezier(0.2, 0.8, 0.2, 1) 80ms both !important;
}

body[data-route="/"] [data-scroll-chart].is-chart-ready.is-chart-visible .twc-dot-optimised,
body[data-route="/"] [data-scroll-chart].is-chart-ready.is-chart-visible .twc-dot-unstructured {
  animation: connectedChartPop 420ms cubic-bezier(0.2, 0.8, 0.2, 1) 1.3s both !important;
}

@keyframes connectedChartTitle {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes connectedChartReveal {
  from {
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0);
    -webkit-clip-path: inset(0);
  }
}

@keyframes connectedChartDraw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes connectedChartFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes connectedChartPop {
  from {
    opacity: 0;
    transform: scale(0.35);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-route="/"] [data-scroll-chart],
  body[data-route="/"] [data-scroll-chart] *,
  body[data-route="/"] [data-scroll-chart] svg {
    animation: none !important;
    transition: none !important;
  }

  body[data-route="/"] [data-scroll-chart] .twc-title,
  body[data-route="/"] [data-scroll-chart] .twc-line-unstructured,
  body[data-route="/"] [data-scroll-chart] .twc-fill-optimised,
  body[data-route="/"] [data-scroll-chart] .twc-dot-start,
  body[data-route="/"] [data-scroll-chart] .twc-dot-optimised,
  body[data-route="/"] [data-scroll-chart] .twc-dot-unstructured {
    opacity: 1 !important;
    transform: none !important;
  }

  body[data-route="/"] [data-scroll-chart] svg {
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }

  body[data-route="/"] [data-scroll-chart] .twc-line-optimised {
    stroke-dashoffset: 0 !important;
  }
}


/* =========================================================================
   FIX 24: Homepage editorial imagery — Atlas Motion crops
   Reuse the accepted Atlas portraits and asymmetric crop language while
   preserving the staging homepage's existing copy and section structure.
   ========================================================================= */

body[data-route="/"] .voice-quote-media {
  aspect-ratio: 0.9;
  border-radius: 72px 0 22px 22px;
}

body[data-route="/"] .voice-quote--reverse .voice-quote-media {
  border-radius: 0 72px 22px 22px;
}

body[data-route="/"] .voice-quote-media img {
  object-position: 50% 50%;
}

body[data-route="/"] #who-we-help .profile-img-wrap {
  aspect-ratio: 0.76;
  border-radius: 0 0 18px 18px;
}

body[data-route="/"] #who-we-help .profile:first-child .profile-img-wrap {
  border-radius: 54px 0 18px 18px;
}

body[data-route="/"] #who-we-help .profile-img-wrap img {
  filter: none;
  object-position: 50% 50%;
  transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

body[data-route="/"] #who-we-help .profile:hover .profile-img-wrap img {
  filter: none;
  transform: scale(1.025);
}

@media (max-width: 900px) {
  body[data-route="/"] .voice-quote-media,
  body[data-route="/"] .voice-quote--reverse .voice-quote-media {
    width: min(88vw, 430px);
    max-width: 430px;
    aspect-ratio: 0.9;
    border-radius: 50px 0 18px 18px;
  }
}


/* =========================================================================
   FIX 25: Homepage FAQ — Atlas split layout, Centry visual system
   Preserve the two-column composition while allowing the homepage's existing
   typography, palette and accordion component styling to cascade.
   ========================================================================= */

body[data-route="/"] #faq.faq-section {
  display: grid !important;
  grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr) !important;
  grid-template-rows: auto !important;
  align-content: start !important;
  align-items: start !important;
  justify-content: stretch !important;
  column-gap: clamp(34px, 6vw, 86px) !important;
  row-gap: 0 !important;
}

body[data-route="/"] #faq > .reveal:first-child {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  align-self: start;
}

body[data-route="/"] #faq > .faq-stack {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  margin: 0 !important;
  align-self: start;
}

@media (max-width: 760px) {
  body[data-route="/"] #faq.faq-section {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: 0 !important;
    row-gap: 32px !important;
  }

  body[data-route="/"] #faq > .reveal:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  body[data-route="/"] #faq > .faq-stack {
    grid-column: 1;
    grid-row: 2;
    margin: 0 !important;
  }
}


/* =========================================================================
   FIX 26: Homepage coordinated plan — Technology-enabled visual system
   The image-free destination keeps its hierarchy while filling the panel with
   the site's own chart blue (oklch(61% 0.145 225) / #0093C4, used by the
   tax/wealth chart and flow-connector dots), darkened to two close shades of
   the same hue for a solid, on-palette fill with legible text.
   ========================================================================= */

body[data-route="/"] .coordinated-plan--text-only {
  --coordinated-plan-bg-start: #143D52;
  --coordinated-plan-bg-end: #184962;
  --coordinated-plan-accent: #4DB8DE;

  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 147, 196, 0.3);
  border-radius: 24px;
  background:
    radial-gradient(circle at 78% 22%, rgba(0, 147, 196, 0.18), transparent 18rem),
    linear-gradient(150deg, var(--coordinated-plan-bg-start), var(--coordinated-plan-bg-end));
  box-shadow: 0 18px 48px rgba(20, 61, 82, 0.24);
  color: #f7f7f2;
}

body[data-route="/"] .coordinated-plan--text-only::before,
body[data-route="/"] .coordinated-plan--text-only::after {
  display: none;
}

body[data-route="/"] .coordinated-plan--text-only .coordinated-plan-inner {
  display: block;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

body[data-route="/"] .coordinated-plan--text-only .coordinated-plan-text {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 3.5vw, 40px);
  min-height: 0;
  padding: clamp(28px, 3.5vw, 40px);
  align-items: center;
  text-align: left;
}

body[data-route="/"] .coordinated-plan--text-only .coordinated-plan-text h3 {
  max-width: 12ch !important;
  margin: 0 !important;
  color: #f7f7f2 !important;
  font-family: var(--font) !important;
  font-size: clamp(2.05rem, 3.1vw, 2.85rem) !important;
  font-weight: 400 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.04 !important;
  text-align: left !important;
  text-transform: none !important;
}

body[data-route="/"] .coordinated-plan--text-only .coordinated-plan-text p {
  max-width: 34ch;
  margin: 0;
  color: rgba(247, 247, 242, 0.72);
  font-family: var(--font);
  font-size: clamp(0.95rem, 1.3vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.65;
  text-align: left;
  text-wrap: pretty;
}

body[data-route="/"] .coordinated-plan--text-only .coordinated-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(0, 147, 196, 0.24);
  background: rgba(0, 147, 196, 0.1);
}

body[data-route="/"] .coordinated-plan--text-only .coordinated-proof .proof-badge {
  min-width: 0;
  justify-content: center;
  padding: 14px 10px;
  border-right: 1px solid rgba(0, 147, 196, 0.24);
  border-bottom: 0;
  color: rgba(247, 247, 242, 0.74);
  font-size: 12px;
  font-weight: 600;
}

body[data-route="/"] .coordinated-plan--text-only .coordinated-proof .proof-badge:last-child {
  border-right: 0;
}

body[data-route="/"] .coordinated-plan--text-only .coordinated-proof .proof-badge svg {
  color: var(--coordinated-plan-accent);
}

@media (max-width: 640px) {
  body[data-route="/"] .coordinated-plan--text-only .coordinated-plan-text {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 30px 24px 28px;
  }

  body[data-route="/"] .coordinated-plan--text-only .coordinated-plan-text h3 {
    max-width: none !important;
    font-size: clamp(1.9rem, 9vw, 2.5rem) !important;
  }

  body[data-route="/"] .coordinated-plan--text-only .coordinated-plan-text p {
    max-width: 38ch;
    font-size: 0.95rem;
    line-height: 1.58;
  }

  body[data-route="/"] .coordinated-plan--text-only .coordinated-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-route="/"] .coordinated-plan--text-only .coordinated-proof .proof-badge {
    justify-content: flex-start;
    padding: 12px 14px;
    border-right: 1px solid rgba(0, 147, 196, 0.24);
    border-bottom: 1px solid rgba(0, 147, 196, 0.24);
    white-space: normal;
  }

  body[data-route="/"] .coordinated-plan--text-only .coordinated-proof .proof-badge:nth-child(2n) {
    border-right: 0;
  }

  body[data-route="/"] .coordinated-plan--text-only .coordinated-proof .proof-badge:nth-child(n + 3) {
    border-bottom: 0;
  }
}