/* Road UI by Andriy Konstantynov and the Agents of Change team. CC BY-ND 4.0. */
    @font-face { font-family: 'Road UI'; src: url("assets/fonts/RoadUI-Light.woff2") format('woff2'); font-style: normal; font-weight: 300; font-display: swap; }
    @font-face { font-family: 'Road UI'; src: url("assets/fonts/RoadUI-Regular.woff2") format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
    @font-face { font-family: 'Road UI'; src: url("assets/fonts/RoadUI-Medium.woff2") format('woff2'); font-style: normal; font-weight: 500; font-display: swap; }
    @font-face { font-family: 'Road UI'; src: url("assets/fonts/RoadUI-SemiBold.woff2") format('woff2'); font-style: normal; font-weight: 600; font-display: swap; }
    @font-face { font-family: 'Road UI'; src: url("assets/fonts/RoadUI-Bold.woff2") format('woff2'); font-style: normal; font-weight: 700; font-display: swap; }

    /* ─────────────── Reset ─────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
    img, svg { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

    /* ─────────────── JAM design tokens ─────────────── */
    :root {
      /* Tier 1: foundations. Components must never use these directly. */
      --foundation-color-paper-50: #F2F6FA;
      --foundation-color-paper-100: #E3EBF3;
      --foundation-color-paper-200: #C8D4DF;
      --foundation-color-paper-300: #A7B6C5;
      --foundation-color-white: #F2F6FA;
      --foundation-color-black: #08101A;
      --foundation-color-ink-950: #0B1118;
      --foundation-color-ink-900: #121B25;
      --foundation-color-ink-850: #182432;
      --foundation-color-ink-800: #1E2E3D;
      --foundation-color-ink-700: #2B4052;
      --foundation-color-ink-600: #9EACBA;
      --foundation-color-ink-400: #AFC0CF;
      --foundation-color-blue-500: #4F7CFF;
      --foundation-color-blue-600: #3158D6;
      --foundation-color-blue-300: #83A4FF;
      --foundation-color-green-500: #7FD18B;
      --foundation-color-telegram-blue-500: #2AABEE;
      --foundation-color-telegram-blue-700: #2B5278;
      --foundation-color-telegram-panel: #17212B;
      --foundation-color-telegram-chat: #0E1621;
      --foundation-color-telegram-bubble: #182533;
      --foundation-color-telegram-muted: #7F91A4;

      --foundation-font-display: 'Oswald', 'Road UI', sans-serif;
      --foundation-font-body: 'Road UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --foundation-leading-display: 1.12;
      --foundation-leading-display-compact: 1.08;
      --foundation-leading-body: 1.6;
      --foundation-type-display-section: clamp(2.4rem, 4vw, 4.5rem);
      --foundation-type-body-lead: clamp(1rem, 1.2vw, 1.125rem);

      --foundation-space-100: 0.5rem;
      --foundation-space-200: 1rem;
      --foundation-space-300: 1.5rem;
      --foundation-space-400: 2rem;
      --foundation-space-500: 3rem;
      --foundation-space-600: 4rem;
      --foundation-space-700: 6rem;
      --foundation-space-800: 7rem;

      --foundation-size-nav: 72px;
      --foundation-size-content: 1240px;
      --foundation-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

      /* Tier 2: semantic roles. All UI rules consume this layer. */
      --color-canvas: var(--foundation-color-ink-950);
      --color-surface-muted: var(--foundation-color-ink-900);
      --color-surface-raised: var(--foundation-color-ink-850);
      --color-surface-inverse: var(--foundation-color-ink-800);
      --color-surface-light: var(--foundation-color-paper-100);
      --color-text: var(--foundation-color-paper-50);
      --color-text-muted: var(--foundation-color-ink-600);
      --color-text-inverse-muted: var(--foundation-color-ink-400);
      --color-text-on-light: var(--foundation-color-black);
      --color-text-on-light-muted: var(--foundation-color-ink-700);
      --color-border: var(--foundation-color-ink-700);
      --color-border-on-light: var(--foundation-color-paper-300);
      --color-accent: var(--foundation-color-blue-500);
      --color-accent-on-light: var(--foundation-color-blue-600);
      --color-accent-hover: var(--foundation-color-blue-300);
      --color-text-inverse: var(--foundation-color-white);
      --color-text-on-accent: var(--foundation-color-black);
      --color-text-accent-contrast: var(--foundation-color-black);
      --color-mask: var(--foundation-color-black);
      --color-scroll-thumb: var(--foundation-color-ink-700);
      --color-status-success: var(--foundation-color-green-500);
      --color-chat-surface: var(--foundation-color-telegram-chat);
      --color-chat-surface-raised: var(--foundation-color-telegram-panel);
      --color-chat-bubble: var(--foundation-color-telegram-bubble);
      --color-chat-user-bubble: var(--foundation-color-telegram-blue-700);
      --color-chat-accent: var(--foundation-color-telegram-blue-500);
      --color-chat-text: var(--foundation-color-paper-50);
      --color-chat-muted: var(--foundation-color-telegram-muted);

      --color-border-inverse: color-mix(in srgb, var(--foundation-color-white) 40%, transparent);
      --color-border-inverse-soft: color-mix(in srgb, var(--foundation-color-white) 12%, transparent);
      --color-border-inverse-subtle: color-mix(in srgb, var(--foundation-color-white) 10%, transparent);
      --color-border-inverse-faint: color-mix(in srgb, var(--foundation-color-white) 9%, transparent);
      --color-border-inverse-hairline: color-mix(in srgb, var(--foundation-color-white) 8%, transparent);
      --color-text-inverse-muted-soft: color-mix(in srgb, var(--foundation-color-white) 66%, transparent);
      --color-text-inverse-body: color-mix(in srgb, var(--foundation-color-white) 70%, transparent);
      --color-text-inverse-strong: color-mix(in srgb, var(--foundation-color-white) 85%, transparent);
      --color-canvas-glass: color-mix(in srgb, var(--foundation-color-ink-950) 90%, transparent);
      --color-canvas-glass-strong: color-mix(in srgb, var(--foundation-color-ink-900) 94%, transparent);
      --color-surface-muted-glass: color-mix(in srgb, var(--foundation-color-ink-850) 78%, transparent);
      --color-surface-inverse-glass: color-mix(in srgb, var(--foundation-color-ink-950) 95%, transparent);
      --color-surface-accent-glass: color-mix(in srgb, var(--foundation-color-blue-500) 92%, transparent);
      --color-highlight-glass: color-mix(in srgb, var(--foundation-color-white) 62%, transparent);
      --color-accent-glow-subtle: color-mix(in srgb, var(--foundation-color-blue-500) 14%, transparent);
      --color-accent-glow-medium: color-mix(in srgb, var(--foundation-color-blue-500) 16%, transparent);
      --color-accent-glow: color-mix(in srgb, var(--foundation-color-blue-500) 18%, transparent);
      --color-accent-pattern: color-mix(in srgb, var(--foundation-color-blue-500) 33%, transparent);
      --color-shadow-soft: color-mix(in srgb, var(--foundation-color-ink-950) 9%, transparent);
      --color-shadow-strong: color-mix(in srgb, var(--foundation-color-black) 45%, transparent);

      --font-display: var(--foundation-font-display);
      --font-body: var(--foundation-font-body);
      --leading-display: var(--foundation-leading-display);
      --leading-display-compact: var(--foundation-leading-display-compact);
      --leading-body: var(--foundation-leading-body);
      --type-display-section: var(--foundation-type-display-section);
      --type-body-lead: var(--foundation-type-body-lead);

      --space-compact: var(--foundation-space-100);
      --space-related: var(--foundation-space-200);
      --space-component: var(--foundation-space-300);
      --space-group: var(--foundation-space-400);
      --space-surface: var(--foundation-space-500);
      --space-section-head-max: var(--foundation-space-600);
      --space-section: var(--foundation-space-700);
      --space-section-wide: var(--foundation-space-800);

      --layout-nav-height: var(--foundation-size-nav);
      --layout-content-max: var(--foundation-size-content);
      --layout-section-y: clamp(var(--space-section), 8vw, var(--space-section-wide));
      --layout-section-head-gap: clamp(var(--space-surface), 5vw, var(--space-section-head-max));
      --layout-surface-padding: clamp(var(--space-group), 3vw, var(--space-surface));
      --layout-grid-gap: clamp(var(--space-related), 2vw, var(--space-component));
      --layout-copy-gap: clamp(var(--space-group), 6vw, var(--space-section));
      --layout-content-row-y: var(--space-section-head-max);

      --motion-ease: var(--foundation-ease-standard);
    }

    /* ─────────────── Base ─────────────── */
    body {
      font-family: var(--font-body);
      background: var(--color-canvas);
      color: var(--color-text);
      line-height: var(--leading-body);
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }
    ::selection { background: var(--color-accent); color: var(--color-text-on-accent); }
    ::-webkit-scrollbar { width: 11px; }
    ::-webkit-scrollbar-track { background: var(--color-surface-muted); }
    ::-webkit-scrollbar-thumb { background: var(--color-scroll-thumb); border: 3px solid var(--color-surface-muted); border-radius: 20px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

    .wrap { width: 100%; max-width: var(--layout-content-max); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }

    /* ─────────────── Shared type ─────────────── */
    .tag {
      display: inline-flex; align-items: center;
      font-family: var(--font-body); font-size: 0.68rem; font-weight: 600;
      letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-accent);
    }

    /* ─────────────── Buttons ─────────────── */
    .btn {
      display: inline-flex; align-items: center; gap: 0.6rem;
      padding: 0.85rem 1.6rem;
      font-family: var(--font-body); font-size: 0.72rem; font-weight: 600;
      letter-spacing: 0.12em; text-transform: uppercase;
      transition: all 0.25s var(--motion-ease); white-space: nowrap;
    }
    .btn .arw { transition: transform 0.25s var(--motion-ease); }
    .btn:hover .arw { transform: translateX(4px); }
    .btn-accent { background: var(--color-accent); color: var(--color-text-on-accent); }
    .btn-accent:hover { background: var(--color-accent-hover); }
    .btn-outline { background: transparent; color: var(--color-text); border: 1px solid var(--color-text); }
    .btn-outline:hover { background: var(--color-text); color: var(--color-canvas); }
    .btn-ondark { background: transparent; color: var(--color-text-inverse); border: 1px solid var(--color-border-inverse); }
    .btn-ondark:hover { background: var(--color-text-inverse); color: var(--color-surface-inverse); }

    /* ─────────────── Nav ─────────────── */
    .nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
      height: var(--layout-nav-height);
      background: var(--color-canvas-glass);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      display: flex; align-items: center;
      border-bottom: 1px solid transparent;
      transition: border-color 0.3s;
    }
    .nav-inner {
      width: 100%; max-width: var(--layout-content-max); height: 100%;
      margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem);
      display: flex; align-items: center; justify-content: space-between;
    }
    .nav.scrolled { border-color: var(--color-border); }
    .brand { display: flex; align-items: center; gap: 0.85rem; }
    .brand img { height: 44px; width: auto; }
    .nav-right { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 1.8rem); }
    .nav-links { display: flex; align-items: center; gap: clamp(1.4rem, 3vw, 2.2rem); }
    .nav-links a.link {
      font-size: 0.74rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--color-text); position: relative; transition: color 0.2s;
    }
    .nav-links a.link::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0; background: var(--color-accent); transition: width 0.3s var(--motion-ease); }
    .nav-links a.link:hover { color: var(--color-accent); }
    .nav-links a.link:hover::after { width: 100%; }

    .lang { display: flex; align-items: center; gap: 0.4rem; }
    .lang-btn { font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; color: var(--color-text-muted); transition: color 0.2s; padding: 0.2rem 0; }
    .lang-btn.active { color: var(--color-accent); }
    .lang-btn:not(.active):hover { color: var(--color-text); }
    .lang-sep { color: var(--color-border); font-size: 0.72rem; }

    .hamburger { display: none; flex-direction: column; gap: 5px; padding: 6px; }
    .hamburger span { display: block; width: 24px; height: 1.5px; background: var(--color-text); transition: transform 0.3s, opacity 0.3s; }
    .hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

    /* ─────────────── Reveal ─────────────── */
    .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--motion-ease), transform 0.8s var(--motion-ease); }
    .reveal.in { opacity: 1; transform: none; }
    [data-delay="1"] { transition-delay: 0.08s; }
    [data-delay="2"] { transition-delay: 0.16s; }
    [data-delay="3"] { transition-delay: 0.24s; }
    [data-delay="4"] { transition-delay: 0.32s; }

    /* ─────────────── Hero ─────────────── */
    .hero { position: relative; padding: calc(var(--layout-nav-height) + clamp(2.6rem, 7vh, 5.5rem)) 0 clamp(1.5rem, 3vh, 2.5rem); overflow: hidden; }
    .hero::before, .agent::before, .brief-section::before {
      content: ""; position: absolute; pointer-events: none; z-index: 0;
      background-image: radial-gradient(circle, var(--color-accent-pattern) 1px, transparent 1.5px);
      background-size: 28px 28px;
      -webkit-mask-image: radial-gradient(ellipse at center, #000 0 38%, transparent 76%);
      mask-image: radial-gradient(ellipse at center, #000 0 38%, transparent 76%);
    }
    .hero::before { top: -3rem; right: -4rem; width: min(54vw, 760px); height: min(68vw, 760px); opacity: 0.62; }
    .hero .wrap { position: relative; z-index: 1; }
    .hero-grid { display: block; }
    .hero-content { padding-top: 0.4rem; }
    .hero-frame {
      position: relative;
      margin-top: 1.5rem; width: 100%; max-width: none;
      /* Air between L-corners and Oswald/Cyrillic display (breve needs vertical room). */
      padding: 0.55em 0.7em 0.7em;
    }
    .hero-frame::before, .hero-frame::after {
      content: ""; position: absolute; width: clamp(40px, 7vw, 64px); height: clamp(40px, 7vw, 64px);
      pointer-events: none; z-index: 2;
    }
    .hero-frame::before {
      top: 0; left: 0;
      border-top: 2px solid var(--color-accent); border-left: 2px solid var(--color-accent);
      transform-origin: top left;
      transition: border-color 0.45s ease;
    }
    .hero-frame::after {
      right: 0; bottom: 0;
      border-right: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent);
      transform-origin: bottom right;
      transition: border-color 0.45s ease;
    }
    /* Blue copy → white corners; white copy → blue corners */
    .hero-frame.is-tone-accent::before,
    .hero-frame.is-tone-accent::after {
      border-color: var(--color-text);
    }
    .hero-frame.is-tone-bone::before,
    .hero-frame.is-tone-bone::after {
      border-color: var(--color-accent);
    }
    @keyframes hero-corner-pulse {
      0% { transform: scale(1); }
      32% { transform: scale(1.42); }
      100% { transform: scale(1); }
    }
    .hero-frame.is-corner-pulse::before,
    .hero-frame.is-corner-pulse::after {
      animation: hero-corner-pulse 0.95s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-frame.is-corner-pulse::before,
      .hero-frame.is-corner-pulse::after { animation: none; }
      .hero-slide { transition: none; }
    }
    .hero h1 {
      position: relative;
      font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
      font-size: clamp(3.3rem, 6.4vw, 6.2rem); line-height: var(--leading-display); letter-spacing: -0.01em;
      margin-top: 0; width: 100%; max-width: none;
      /* Tall enough for 3-line UA accent slide so prices never collide */
      min-height: 3.55em;
      padding: 0;
      margin-bottom: 0.15em;
    }
    .hero-slide {
      display: block;
      position: absolute; left: 0; right: 0; top: 0;
      opacity: 0; visibility: hidden;
      pointer-events: none;
      transition: opacity 0.55s ease, visibility 0.55s, color 0.45s ease;
    }
    .hero-slide.is-active {
      opacity: 1; visibility: visible;
      pointer-events: auto;
      z-index: 1;
    }
    .hero-slide.is-tone-accent { color: var(--color-accent); }
    .hero-slide.is-tone-accent .accent { color: inherit; }
    .hero h1 .accent { color: var(--color-accent); }
    .hero h1 .thin { color: var(--color-text-muted); font-weight: 300; }
    .hero-prices {
      display: flex; flex-wrap: wrap; gap: 0.65rem 1.4rem;
      margin-top: clamp(1.1rem, 2.4vh, 1.6rem);
      padding-inline: 0.1em;
    }
    .hero-price {
      color: var(--color-text);
      font-family: var(--font-display);
      font-size: clamp(1.05rem, 2.1vw, 1.35rem);
      font-weight: 500;
      letter-spacing: 0.04em;
      line-height: 1.2;
      text-transform: uppercase;
    }
    .hero-price small {
      display: block;
      margin-top: 0.28rem;
      color: var(--color-text-muted);
      font-family: var(--font-body);
      font-size: 0.72rem;
      font-weight: 400;
      letter-spacing: 0.02em;
      text-transform: none;
    }
    .hero-cta { display: flex; gap: 0.8rem; flex-wrap: nowrap; margin-top: clamp(1.8rem, 4vh, 2.6rem); align-items: stretch; }
    .hero-cta .btn { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; }

    /* ─────────────── Marquee ─────────────── */
    .marquee { border-block: 1px solid var(--color-border); margin-top: clamp(3rem, 8vh, 5.5rem); padding-block: 1.4rem; overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent, var(--color-mask) 8%, var(--color-mask) 92%, transparent);
      mask-image: linear-gradient(90deg, transparent, var(--color-mask) 8%, var(--color-mask) 92%, transparent); }
    /* iOS Safari bottom chrome sits on the hero edge — clear home indicator + toolbar */
    @media (max-width: 860px) {
      .hero {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8.75rem);
      }
      .hero-cta {
        gap: 0.55rem;
        margin-top: clamp(1.35rem, 3.5vh, 2rem);
      }
      .hero-cta .btn {
        padding: 0.85rem 0.7rem;
        font-size: 0.62rem;
        letter-spacing: 0.08em;
      }
      .hero-cta .btn .arw { display: none; }
      .marquee {
        margin-top: clamp(1.25rem, 3.5vh, 2.2rem);
        margin-bottom: 0;
        padding-block: 1.1rem;
      }
      .marquee-track span { font-size: 0.95rem; padding-inline: 1.2rem; }
    }
    .marquee-track { display: flex; width: max-content; animation: scroll 36s linear infinite; }
    .marquee:hover .marquee-track { animation-play-state: paused; }
    .marquee-track span {
      font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em;
      font-size: 1.15rem; color: var(--color-text); display: inline-flex; align-items: center; padding-inline: 1.8rem;
    }
    .marquee-track span::after { content: "✦"; color: var(--color-accent); margin-left: 3.6rem; font-size: 0.7rem; }
    @keyframes scroll { to { transform: translateX(-50%); } }

    /* ─────────────── Section scaffolding ─────────────── */
    section { position: relative; padding-block: var(--layout-section-y); }
    .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-group); flex-wrap: wrap; margin-bottom: var(--layout-section-head-gap); }
    .sec-title { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; font-size: var(--type-display-section); line-height: var(--leading-display); letter-spacing: -0.005em; margin-top: var(--space-related); max-width: 20ch; }
    .sec-title .accent { color: var(--color-accent); }
    .sec-note { max-width: 44ch; color: var(--color-text-muted); font-size: var(--type-body-lead); font-weight: 300; line-height: var(--leading-body); }

    /* ─────────────── Services ─────────────── */
    .services-section { padding-top: clamp(2.5rem, 5vw, 4.5rem); }
    .services-section .sec-head {
      display: grid;
      grid-template-columns: minmax(0, 760px);
      grid-template-areas:
        "tag"
        "title"
        "note";
      align-items: start;
      row-gap: var(--space-related);
    }
    .services-section .sec-head .tag { grid-area: tag; }
    .services-section .sec-head .sec-title { grid-area: title; max-width: 15ch; margin-top: 0; }
    .services-section .sec-head .sec-note { grid-area: note; max-width: 54ch; margin-top: 0.35rem; }
    .services-editorial, .process-editorial {
      margin: 0 0 var(--layout-section-head-gap);
      aspect-ratio: 2.35 / 1;
      overflow: hidden;
      border: 1px solid var(--color-border);
      background: var(--color-surface-muted);
    }
    .services-editorial img, .process-editorial img { width: 100%; height: 100%; object-fit: cover; }
    .services-editorial img { object-position: center top; }
    .process-editorial img { object-position: center 50%; }
    .services { border-top: 1px solid var(--color-border); }
    .service {
      display: grid;
      grid-template-columns: minmax(280px, 0.72fr) minmax(320px, 1fr);
      justify-content: space-between;
      align-items: start;
      gap: clamp(2.5rem, 5vw, 5rem);
      padding-block: clamp(3rem, 6vw, 4.5rem);
      border-bottom: 1px solid var(--color-border);
    }
    .service h3 {
      max-width: 14ch;
      margin: 0;
      font-family: var(--font-display);
      font-weight: 500;
      text-transform: uppercase;
      font-size: var(--type-display-section);
      line-height: var(--leading-display);
      letter-spacing: -0.018em;
    }
    .service h3 .accent { color: var(--color-accent); }
    .service-copy { max-width: 56ch; padding-top: 0.25rem; }
    .service p { color: var(--color-text-muted); font-size: var(--type-body-lead); font-weight: 300; line-height: var(--leading-body); }
    .service p + p { margin-top: var(--space-related); }
    .service p strong { color: var(--color-text); font-weight: 600; }

    /* ─────────────── Work / What we build ─────────────── */
    .work { background: var(--color-surface-muted); padding-block: var(--layout-section-y); }
    .work .sec-head { margin-bottom: var(--layout-section-head-gap); }
    .work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--layout-grid-gap); }
    .card { grid-column: span 6; background: var(--color-canvas); border: 1px solid var(--color-border); min-height: 420px; display: flex; flex-direction: column; justify-content: flex-start; transition: transform 0.4s var(--motion-ease), border-color 0.4s; position: relative; overflow: hidden; }
    .card:hover { transform: translateY(-5px); border-color: var(--color-accent); }
    .card.feature { grid-column: span 12; background: var(--color-canvas); color: var(--color-text); min-height: 500px; }
    .card-media { aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--color-border); background: var(--color-surface-raised); }
    .card.feature .card-media { aspect-ratio: 2.35 / 1; }
    .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--motion-ease); }
    .card:hover .card-media img { transform: scale(1.025); }
    .card-body { padding: var(--layout-surface-padding); display: flex; flex-direction: column; flex: 1; }
    .card .kicker { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-related); }
    .card h3 { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.05; letter-spacing: -0.005em; }
    .card p { color: var(--color-text-muted); margin-top: var(--space-related); font-size: 0.92rem; font-weight: 300; max-width: 50ch; }
    .card.feature p { color: var(--color-text-muted); }
    .card .meta { display: flex; gap: var(--space-component); margin-top: auto; padding-top: var(--space-group); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); flex-wrap: wrap; }
    .card.feature .meta { color: var(--color-text-muted); }
    .card .meta b { color: var(--color-text); font-weight: 600; }
    .card.feature .meta b { color: var(--color-text); }

    /* ─────────────── Impact / Sons of War ─────────────── */
    .impact { background: var(--color-surface-light); color: var(--color-text-on-light); }
    .impact-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
    .impact .tag { color: var(--color-accent-on-light); }
    .impact h2 { margin-top: var(--space-related); max-width: 14ch; font-family: var(--font-display); font-weight: 500; text-transform: uppercase; font-size: clamp(2.8rem, 6.1vw, 5.5rem); line-height: var(--leading-display); letter-spacing: -0.018em; }
    .impact h2 .impact-percent { color: var(--color-accent-on-light); }
    .impact-detail { display: grid; grid-template-columns: clamp(108px, 11vw, 156px) minmax(0, 1fr); gap: var(--space-component); align-items: center; padding-left: clamp(1.25rem, 2.5vw, 2rem); border-left: 1px solid var(--color-border-on-light); }
    .impact-emblem { width: 100%; height: auto; }
    .impact-text { align-self: center; }
    .impact-text p { max-width: 36ch; color: var(--color-text-on-light-muted); font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.62; }
    .impact-link { display: inline-flex; min-height: 44px; align-items: center; gap: 0.55rem; margin-top: var(--space-related); padding: 0.6rem 0.15rem; border-bottom: 1px solid var(--color-text-on-light); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; transition: color 0.2s, border-color 0.2s; }
    .impact-link:hover { color: var(--color-accent-on-light); border-color: var(--color-accent-on-light); }
    .impact-link:focus-visible { outline: 2px solid var(--color-accent-on-light); outline-offset: 4px; }

    /* ─────────────── Agent / assistant ─────────────── */
    .agent { position: relative; background: var(--color-surface-inverse); color: var(--color-text-inverse); overflow: hidden; }
    .agent::before { top: 50%; left: -5rem; width: min(56vw, 760px); height: min(74vw, 820px); opacity: 0.44; transform: translateY(-50%); }
    .agent .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
    .agent .tag { color: var(--color-accent); }
    .agent h2 { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: var(--leading-display); letter-spacing: -0.005em; margin: 1rem 0 1.4rem; max-width: 16ch; }
    .agent h2 .accent { color: var(--color-accent); }
    .agent p { color: var(--color-text-inverse-body); font-weight: 300; max-width: 46ch; margin-bottom: 1rem; }
    .agent .agent-cta { margin-top: 1.6rem; }

    .chat { background: var(--color-chat-surface); border: 1px solid var(--color-border-inverse-faint); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px var(--color-shadow-strong); }
    .chat-head { min-height: 68px; display: flex; align-items: center; gap: 0.8rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border-inverse-hairline); background: var(--color-chat-surface-raised); }
    .chat-app-mark { width: 24px; height: 24px; flex: 0 0 auto; color: var(--color-chat-accent); }
    .chat-ava { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; background: var(--color-accent); color: var(--color-text-accent-contrast); font-family: var(--font-display); font-weight: 700; font-size: 1rem; display: flex; align-items: center; justify-content: center; }
    .chat-identity { min-width: 0; flex: 1; }
    .chat-who { font-size: 0.88rem; font-weight: 600; color: var(--color-text-inverse); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .chat-stat { font-size: 0.7rem; color: var(--color-chat-accent); }
    .chat-actions { display: flex; align-items: center; gap: 0.9rem; color: var(--color-chat-muted); }
    .chat-actions svg { width: 19px; height: 19px; }
    .chat-body { position: relative; padding: 1.1rem 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.55rem; background-color: var(--color-chat-surface); background-image: radial-gradient(circle at 20% 20%, var(--color-border-inverse-hairline) 0 1px, transparent 1px), radial-gradient(circle at 80% 60%, var(--color-border-inverse-hairline) 0 1px, transparent 1px); background-size: 38px 38px, 52px 52px; }
    .chat-day { align-self: center; padding: 0.24rem 0.65rem; border-radius: 999px; background: var(--color-canvas-glass-strong); color: var(--color-chat-muted); font-size: 0.63rem; font-weight: 600; margin-bottom: 0.15rem; }
    .bubble { position: relative; max-width: 84%; padding: 0.58rem 0.72rem 0.4rem; border-radius: 13px; color: var(--color-chat-text); font-size: 0.82rem; line-height: 1.42; box-shadow: 0 1px 1px var(--color-shadow-soft); }
    .bubble.user { align-self: flex-end; background: var(--color-chat-user-bubble); border-bottom-right-radius: 4px; }
    .bubble.bot { align-self: flex-start; background: var(--color-chat-bubble); border-bottom-left-radius: 4px; }
    .bubble.preview { width: min(88%, 390px); padding: 4px 4px 0.42rem; }
    .chat-preview { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 10px 10px 5px 5px; object-fit: cover; background: var(--color-surface-muted); }
    .bubble-caption { padding: 0.55rem 0.48rem 0.1rem; }
    .bubble-question { display: block; margin-top: 0.18rem; font-weight: 600; color: var(--color-chat-accent); }
    .bubble-meta { display: flex; justify-content: flex-end; align-items: center; gap: 0.22rem; min-width: 54px; margin: 0.14rem 0 0 0.65rem; color: var(--color-chat-muted); font-size: 0.6rem; line-height: 1; float: right; }
    .bubble.user .bubble-meta { color: var(--color-text-inverse-muted-soft); }
    .bubble-checks { color: var(--color-chat-accent); letter-spacing: -0.12em; padding-right: 0.12em; }
    .chat-compose { min-height: 54px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.85rem; padding: 0.55rem 0.9rem; background: var(--color-chat-surface-raised); border-top: 1px solid var(--color-border-inverse-hairline); color: var(--color-chat-muted); }
    .chat-compose svg { width: 20px; height: 20px; }
    .chat-placeholder { font-size: 0.78rem; }
    .chat-send { color: var(--color-chat-accent); }

    /* ─────────────── Comparison ─────────────── */
    .comparison { background: var(--color-surface-muted); }
    .comparison .sec-head { margin-bottom: var(--layout-section-head-gap); }
    .comparison-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto repeat(4, auto) auto; border-top: 1px solid var(--color-border); border-left: 1px solid var(--color-border); }
    .comparison-card { display: grid; min-width: 0; grid-row: 1 / span 8; grid-template-rows: subgrid; padding: var(--layout-surface-padding); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-canvas); }
    .comparison-card:nth-child(1) { grid-column: 1; }
    .comparison-card:nth-child(2) { grid-column: 2; }
    .comparison-card:nth-child(3) { grid-column: 3; }
    .comparison-card.featured { position: relative; border-top: 0; background: var(--color-surface-raised); box-shadow: inset 0 2px 0 var(--color-accent); }
    .comparison-label { color: var(--color-accent); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
    .comparison-card h3 { margin-top: var(--space-related); font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 500; line-height: var(--leading-display); text-transform: uppercase; }
    .comparison-summary { min-height: 0; margin-top: var(--space-related); color: var(--color-text-muted); font-size: 0.88rem; font-weight: 300; line-height: 1.55; }
    .comparison-points { display: grid; grid-row: 4 / span 4; grid-template-rows: subgrid; margin-top: var(--space-component); list-style: none; border-top: 1px solid var(--color-border); }
    .comparison-points li { padding-block: 0.78rem; border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 0.8rem; font-weight: 300; line-height: 1.45; }
    .comparison-points strong { display: block; margin-bottom: 0.18rem; color: var(--color-text); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
    .comparison-card .btn { grid-row: 8; align-self: start; justify-self: start; margin-top: var(--space-component); }

    .custom-software-callout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--layout-copy-gap); align-items: center; margin-bottom: var(--layout-section-head-gap); padding: var(--layout-surface-padding); border: 1px solid var(--color-border); border-top: 2px solid var(--color-accent); background: var(--color-surface-muted); }
    .custom-software-callout h3 { font-family: var(--font-display); font-size: clamp(1.55rem, 3vw, 2.35rem); font-weight: 500; line-height: var(--leading-display); text-transform: uppercase; }
    .custom-software-callout p { max-width: 62ch; margin-top: var(--space-related); color: var(--color-text-muted); font-size: 0.9rem; font-weight: 300; line-height: 1.55; }
    .custom-software-callout .btn { white-space: nowrap; }
    .price-euro { max-width: 62ch; margin: -0.35rem 0 var(--space-related); color: var(--color-text-muted); font-size: 0.88rem; font-weight: 300; line-height: 1.5; }
    .price-jumps, .offer-groups { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 var(--layout-section-head-gap); }
    .offer-group {
      display: inline-flex; align-items: center; gap: 0.45rem;
      min-height: 44px; padding: 0.55rem 0.95rem;
      border: 1px solid var(--color-border);
      color: var(--color-text);
      font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em;
      transition: border-color 0.2s ease, color 0.2s ease;
    }
    .offer-group:hover, .offer-group:focus-visible { border-color: var(--color-accent); color: var(--color-accent); outline: none; }
    .offer-group .arw { color: var(--color-accent); }
    .care-line {
      margin-top: var(--layout-section-head-gap);
      padding-top: var(--space-related);
      border-top: 1px solid var(--color-border);
      color: var(--color-text-muted);
      font-size: 0.92rem; font-weight: 300; line-height: 1.55;
      max-width: 62ch;
    }
    .care-line a { color: var(--color-text); font-weight: 500; border-bottom: 1px solid var(--color-border); }
    .care-line a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
    .brief-complete-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-related); margin-top: var(--space-component); }
    .brief-complete-actions .brief-again { margin-top: 0; }

    /* ─────────────── Pricing ─────────────── */
    .brand-pricing { margin-bottom: var(--layout-section-head-gap); border-top: 2px solid var(--color-accent); border-bottom: 1px solid var(--color-border); }
    .brand-pricing-head { display: grid; grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1fr); gap: var(--layout-copy-gap); align-items: end; padding-block: var(--space-surface); }
    .brand-pricing-kicker { color: var(--color-accent); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
    .brand-pricing-title { max-width: 16ch; margin-top: var(--space-related); font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 500; line-height: var(--leading-display); text-transform: uppercase; }
    .brand-pricing-intro { max-width: 55ch; color: var(--color-text-muted); font-size: var(--type-body-lead); font-weight: 300; line-height: var(--leading-body); }
    .brand-price-list { border-top: 1px solid var(--color-border); }
    .brand-price-row { display: grid; grid-template-columns: minmax(220px, 0.62fr) minmax(0, 1fr) minmax(180px, auto); gap: var(--layout-copy-gap); align-items: start; padding-block: var(--space-group); border-bottom: 1px solid var(--color-border); }
    .brand-price-row:last-child { border-bottom: 0; }
    .brand-price-name { font-family: var(--font-display); font-size: clamp(1.5rem, 2.7vw, 2.2rem); font-weight: 500; line-height: var(--leading-display); text-transform: uppercase; }
    .brand-price-desc { max-width: 58ch; color: var(--color-text-muted); font-size: 0.92rem; font-weight: 300; line-height: var(--leading-body); }
    .brand-price-copy { max-width: 58ch; display: flex; flex-direction: column; gap: var(--space-related); }
    .brand-price-outcome { margin: 0; color: var(--color-text); font-size: 0.98rem; font-weight: 500; line-height: var(--leading-body); }
    .brand-price-bullets { margin: 0; padding-left: 1.1rem; color: var(--color-text-muted); font-size: 0.9rem; font-weight: 300; line-height: 1.45; }
    .brand-price-bullets li { margin: 0.35rem 0; }
    .brand-price-deliverables { margin: 0; color: var(--color-text-muted); font-size: 0.78rem; font-weight: 300; line-height: 1.45; opacity: 0.9; }
    .brand-pricing-leader { max-width: 62ch; margin: 0 0 var(--space-related); color: var(--color-text-muted); font-size: 0.92rem; font-weight: 300; line-height: var(--leading-body); }
    .brand-pricing-skip { margin: var(--space-related) 0 0; color: var(--color-text-muted); font-size: 0.82rem; font-weight: 400; line-height: 1.45; }
    .brand-price-buy {
      display: flex; flex-direction: column; align-items: stretch;
      gap: var(--space-related);
      min-width: 11.5rem; width: 11.5rem;
    }
    .brand-price-amount {
      color: var(--color-accent);
      font-family: var(--font-display);
      font-size: clamp(1.55rem, 2.6vw, 2.15rem);
      font-weight: 600;
      /* room for Cyrillic Д descender in Oswald */
      line-height: 1.2;
      text-transform: uppercase;
      white-space: nowrap;
      text-align: center;
      display: block;
      width: 100%;
      letter-spacing: 0.02em;
    }
    .brand-price-buy .btn {
      width: 100%;
      min-width: 0;
      justify-content: center;
    }
    .brand-pricing-note { padding-block: var(--space-related); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 0.75rem; font-weight: 300; line-height: 1.5; }
    .website-configurator { display: grid; grid-template-columns: minmax(280px, 0.62fr) minmax(0, 1.38fr); border-top: 2px solid var(--color-accent); border-bottom: 1px solid var(--color-border); }
    .site-config-summary { position: sticky; top: calc(var(--layout-nav-height) + var(--space-related)); display: flex; align-self: start; flex-direction: column; align-items: flex-start; min-width: 0; padding: clamp(2rem, 4vw, 3.2rem) var(--space-component); }
    .site-config-kicker { color: var(--color-accent); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
    .site-config-title { max-width: 11ch; margin-top: var(--space-related); font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 500; line-height: var(--leading-display); text-transform: uppercase; }
    .site-config-intro { max-width: 36ch; margin-top: var(--space-component); color: var(--color-text-muted); font-size: 0.9rem; font-weight: 300; line-height: var(--leading-body); }
    .site-config-total-wrap { width: 100%; margin-top: var(--space-group); padding-top: var(--space-component); border-top: 1px solid var(--color-border); }
    .site-config-total-label { display: block; margin-bottom: var(--space-compact); color: var(--color-text-muted); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
    .site-config-total { white-space: normal; max-width: 18ch; display: block; color: var(--color-accent); font-family: var(--font-display); font-size: clamp(1.55rem, 3.2vw, 2.15rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
    .site-config-breakdown { display: grid; width: 100%; margin-top: var(--space-component); list-style: none; border-top: 1px solid var(--color-border); }
    .site-config-breakdown li { display: flex; justify-content: space-between; gap: var(--space-related); padding: 0.72rem 0; border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 0.74rem; font-weight: 300; line-height: 1.4; }
    .site-config-breakdown strong { color: var(--color-text); font-weight: 500; white-space: nowrap; }
    .site-config-note { margin-top: var(--space-component); color: var(--color-text-muted); font-size: 0.72rem; font-weight: 300; line-height: 1.5; }
    .site-config-summary .btn { width: 100%; justify-content: center; margin-top: var(--space-component); }
    .site-config-builder { min-width: 0; padding: clamp(2rem, 4vw, 3.2rem) var(--space-component); border-left: 1px solid var(--color-border); }
    .site-config-step { min-width: 0; margin: 0; padding: 0 0 var(--space-group); border: 0; border-bottom: 1px solid var(--color-border); }
    .site-config-step + .site-config-step { margin-top: var(--space-group); }
    .site-config-step:last-child { padding-bottom: 0; border-bottom: 0; }
    .site-config-step-head { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; margin-bottom: var(--space-component); }
    .site-config-step-head > span { min-width: 0; max-width: 100%; }
    .site-config-step-number { color: var(--color-accent); font-family: var(--font-display); font-size: 1rem; font-weight: 500; letter-spacing: 0.08em; }
    .site-config-step-title { display: block; font-family: var(--font-display); font-size: clamp(1.25rem, 2.5vw, 1.8rem); font-weight: 500; line-height: var(--leading-display); text-transform: uppercase; }
    .site-config-step-note { display: block; max-width: 50ch; margin-top: var(--space-compact); color: var(--color-text-muted); font-size: 0.78rem; font-weight: 300; line-height: 1.5; }
    .site-base-options { display: grid; border-top: 1px solid var(--color-border); }
    .site-base-option { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 0.85rem; align-items: start; min-height: 84px; padding: var(--space-related) 0; border-bottom: 1px solid var(--color-border); cursor: pointer; }
    .site-base-option input, .site-option input { position: absolute; opacity: 0; pointer-events: none; }
    .site-base-radio { position: relative; width: 18px; height: 18px; margin-top: 0.14rem; border: 1px solid var(--color-border); border-radius: 50%; }
    .site-base-option input:checked + .site-base-radio { border-color: var(--color-accent); }
    .site-base-option input:checked + .site-base-radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--color-accent); }
    .site-base-option input:focus-visible + .site-base-radio, .site-option input:focus-visible + .brief-option-box { outline: 2px solid var(--color-accent); outline-offset: 3px; }
    .site-base-copy, .site-option-copy { min-width: 0; }
    .site-base-name, .site-option-name { display: block; color: var(--color-text); font-size: 0.9rem; font-weight: 500; line-height: 1.35; }
    .site-base-desc, .site-option-desc { display: block; max-width: 52ch; margin-top: 0.28rem; color: var(--color-text-muted); font-size: 0.76rem; font-weight: 300; line-height: 1.45; }
    .site-base-price, .site-option-price { color: var(--color-text); font-size: 0.78rem; font-weight: 600; line-height: 1.45; white-space: nowrap; }
    .site-base-option:hover .site-base-name, .site-base-option input:checked ~ .site-base-copy .site-base-name, .site-option:hover .site-option-name, .site-option input:checked ~ .site-option-copy .site-option-name { color: var(--color-accent); }
    .site-counter-grid, .site-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-component); border-top: 1px solid var(--color-border); }
    .site-counter { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-related); align-items: center; min-height: 88px; padding: var(--space-related) 0; border-bottom: 1px solid var(--color-border); }
    .site-counter:nth-child(odd), .site-option:nth-child(odd) { padding-right: var(--space-related); }
    .site-counter:nth-child(even), .site-option:nth-child(even) { padding-left: var(--space-related); border-left: 1px solid var(--color-border); }
    .site-stepper { display: grid; grid-template-columns: 38px 44px 38px; min-height: 38px; border: 1px solid var(--color-border); }
    .site-stepper button { border: 0; background: transparent; color: var(--color-text); font: inherit; font-size: 1rem; cursor: pointer; }
    .site-stepper button:hover { background: var(--color-accent); color: var(--color-text-on-accent); }
    .site-stepper button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
    .site-stepper input { width: 44px; border: 0; border-inline: 1px solid var(--color-border); border-radius: 0; background: transparent; color: var(--color-text); font: 600 0.8rem var(--font-body); text-align: center; appearance: textfield; }
    .site-stepper input::-webkit-inner-spin-button, .site-stepper input::-webkit-outer-spin-button { margin: 0; appearance: none; }
    .site-option { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 0.75rem; align-items: start; min-height: 84px; padding-block: var(--space-related); border-bottom: 1px solid var(--color-border); cursor: pointer; }
    .site-option input:checked + .brief-option-box { border-color: var(--color-accent); background: var(--color-accent); }
    .site-option input:checked + .brief-option-box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--color-text-on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
    .site-option.is-included { cursor: default; }
    .site-option.is-included .site-option-price { color: var(--color-accent); }
    .price-card { border: 1px solid var(--color-border); background: var(--color-canvas); padding: clamp(1.8rem, 3vw, 2.8rem); display: flex; flex-direction: column; }
    .price-card.dark { background: var(--color-surface-inverse); border-color: var(--color-surface-inverse); color: var(--color-text-inverse); }
    .price-name { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; font-size: 1.3rem; letter-spacing: 0.02em; }
    .price-row { display: flex; align-items: baseline; gap: 0.5rem; margin: 1rem 0 0.3rem; }
    .price-amt { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -0.01em; }
    .price-card.dark .price-amt { color: var(--color-text-inverse); }
    .price-unit { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
    .price-card.dark .price-unit { color: var(--color-text-inverse-muted); }
    .price-desc { color: var(--color-text-muted); font-size: 0.9rem; font-weight: 300; margin-bottom: 1.4rem; }
    .price-card.dark .price-desc { color: var(--color-text-inverse-muted); }
    .price-list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; margin-top: auto; }
    .price-list li { position: relative; padding-left: 1.6rem; font-size: 0.9rem; font-weight: 300; color: var(--color-text); }
    .price-card.dark .price-list li { color: var(--color-text-inverse-strong); }
    .price-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.7rem; height: 0.4rem; border-left: 1.5px solid var(--color-accent); border-bottom: 1.5px solid var(--color-accent); transform: rotate(-45deg); }
    .price-foot { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--color-border); font-size: 0.78rem; color: var(--color-text-muted); }
    .price-card.dark .price-foot { border-color: var(--color-border-inverse-soft); color: var(--color-text-inverse-muted); }

    .care-card { display: grid; grid-template-columns: minmax(240px, 0.62fr) minmax(0, 1.38fr); gap: var(--layout-copy-gap); margin-top: var(--layout-section-head-gap); }
    .care-intro { align-self: start; }
    .care-configurator { min-width: 0; }
    .care-summary { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-related); margin: var(--space-related) 0 var(--space-compact); }
    .care-total { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -0.01em; }
    .care-unit { margin-bottom: 0.28rem; color: var(--color-text-muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
    .care-options { display: grid; margin-top: var(--space-related); border: 0; border-top: 1px solid var(--color-border); }
    .care-options legend { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    .care-option { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: start; gap: 0.8rem; min-height: 72px; padding-block: var(--space-related); border-bottom: 1px solid var(--color-border); cursor: pointer; }
    .care-option input { position: absolute; opacity: 0; pointer-events: none; }
    .care-option .brief-option-box { margin-top: 0.12rem; }
    .care-option input:checked + .brief-option-box { border-color: var(--color-accent); background: var(--color-accent); }
    .care-option input:checked + .brief-option-box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--color-text-on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
    .care-option input:focus-visible + .brief-option-box { outline: 2px solid var(--color-accent); outline-offset: 3px; }
    .care-option-copy { min-width: 0; }
    .care-option-name { display: block; color: var(--color-text); font-size: 0.9rem; font-weight: 500; line-height: 1.35; }
    .care-option-quota { display: block; margin-top: 0.28rem; color: var(--color-text-muted); font-size: 0.76rem; font-weight: 300; line-height: 1.45; }
    .care-option-price { color: var(--color-text); font-size: 0.78rem; font-weight: 600; line-height: 1.45; white-space: nowrap; }
    .care-option:hover .care-option-name { color: var(--color-accent); }
    .care-option input:checked ~ .care-option-copy .care-option-name { color: var(--color-accent); }
    .care-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-related); margin-top: var(--space-component); }
    .care-actions .btn { flex: 0 0 auto; }
    .care-note { max-width: 33ch; color: var(--color-text-muted); font-size: 0.72rem; font-weight: 300; line-height: 1.5; }

    .tiers-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin: clamp(2.5rem,6vh,4rem) 0 1.6rem; scroll-margin-top: calc(var(--layout-nav-height) + var(--space-component)); }
    .tiers-head h3 { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; font-size: clamp(1.4rem, 3vw, 2.2rem); }
    .tiers-head p { color: var(--color-text-muted); font-size: 0.88rem; font-weight: 300; max-width: 42ch; }
    .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
    .tier { border: 1px solid var(--color-border); background: var(--color-canvas); padding: clamp(1.5rem, 2.4vw, 2rem); position: relative; transition: border-color 0.3s, transform 0.3s var(--motion-ease); }
    .tier:hover { border-color: var(--color-accent); transform: translateY(-4px); }
    .tier.popular { border-color: var(--color-accent); }
    .tier .badge { position: absolute; top: -0.7rem; left: 1.5rem; background: var(--color-accent); color: var(--color-text-on-accent); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.25rem 0.6rem; }
    .tier .t-name { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; font-size: 1.15rem; }
    .tier .t-row { display: flex; align-items: baseline; gap: 0.4rem; margin: 0.7rem 0; }
    .tier .t-amt { font-family: var(--font-display); font-weight: 600; font-size: 2.2rem; line-height: 1; }
    .tier .t-unit { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
    .tier .t-line { color: var(--color-text-muted); font-size: 0.88rem; font-weight: 300; }

    .custom { margin-top: var(--space-section-head-max); border: 1px solid var(--color-border); background: var(--color-surface-muted); padding: var(--layout-surface-padding); scroll-margin-top: calc(var(--layout-nav-height) + var(--space-component)); }
    .custom-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.55fr); gap: var(--layout-copy-gap); align-items: center; padding-bottom: var(--layout-section-head-gap); }
    .custom-kicker, .custom-label { color: var(--color-accent); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
    .custom-title { max-width: 14ch; font-family: var(--font-display); font-size: var(--type-display-section); font-weight: 500; line-height: var(--leading-display); letter-spacing: -0.018em; text-transform: uppercase; }
    .custom-title .accent { color: var(--color-accent); }
    .custom-intro { max-width: 43ch; color: var(--color-text-muted); font-size: var(--type-body-lead); font-weight: 300; line-height: var(--leading-body); }
    .custom-media {
      margin: 0 0 var(--layout-section-head-gap);
      aspect-ratio: 2.35 / 1;
      overflow: hidden;
      border-block: 1px solid var(--color-border);
      background: var(--color-canvas);
    }
    .custom-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 52%; }
    .custom-flows { border-top: 0; }
    .custom-flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--layout-grid-gap); padding-block: var(--space-group); border-bottom: 1px solid var(--color-border); }
    .custom-flow-signal { padding-top: var(--space-compact); color: var(--color-accent); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
    .custom-flow-copy { display: grid; grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr); gap: var(--layout-copy-gap); align-items: start; }
    .custom-flow h4 { font-family: var(--font-display); font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 500; line-height: var(--leading-display); text-transform: uppercase; }
    .custom-flow p, .custom-control p, .custom-scope p { color: var(--color-text-muted); font-size: 0.94rem; font-weight: 300; line-height: var(--leading-body); }
    .custom-control { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--layout-copy-gap); padding-block: var(--space-surface); border-bottom: 1px solid var(--color-border); }
    .custom-control h4 { margin-top: var(--space-related); font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 500; line-height: var(--leading-display); text-transform: uppercase; }
    .custom-control p { margin-top: var(--space-related); max-width: 47ch; }
    .custom-scope { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--layout-copy-gap); align-items: end; padding-top: var(--space-surface); }
    .custom-scope-copy { max-width: 63ch; }
    .custom-scope p { margin-top: var(--space-related); }
    .custom .c-right { display: flex; align-items: center; gap: var(--space-component); }
    .custom .c-price { max-width: 10ch; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.45rem, 2.5vw, 1.8rem); line-height: var(--leading-display); color: var(--color-accent); text-transform: uppercase; }

    /* ─────────────── Process ─────────────── */
    .steps { border-top: 1px solid var(--color-border); }
    .step {
      display: grid;
      grid-template-columns: minmax(92px, 0.2fr) minmax(280px, 0.82fr) minmax(280px, 0.72fr);
      gap: var(--layout-copy-gap);
      align-items: start;
      padding-block: clamp(1.9rem, 4.2vh, 3.2rem);
      border-bottom: 1px solid var(--color-border);
      transition: background 0.35s var(--motion-ease), box-shadow 0.35s var(--motion-ease);
    }
    @media (hover: hover) {
      .step:hover { background: var(--color-surface-muted); }
    }
    .step-marker { display: flex; flex-direction: column; gap: 0.55rem; min-height: 4.2rem; transform: translateX(0.6rem); }
    .step-number { color: var(--color-accent); font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; line-height: 1; letter-spacing: 0.08em; }
    .step-head { min-width: 0; }
    .step h3 { max-width: 18ch; font-family: var(--font-display); font-weight: 500; text-transform: uppercase; font-size: clamp(1.55rem, 2.7vw, 2.25rem); line-height: var(--leading-display); letter-spacing: -0.01em; text-wrap: balance; }
    .step p { max-width: 48ch; margin: 0; color: var(--color-text-muted); font-size: 0.94rem; font-weight: 300; line-height: var(--leading-body); text-wrap: pretty; }
    .step .dur { color: var(--color-text); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }

    /* ─────────────── Partner program ─────────────── */
    .partner-program { position: relative; overflow: hidden; background: var(--color-accent); color: var(--color-text-on-accent); scroll-margin-top: var(--layout-nav-height); }
    .partner-program::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, color-mix(in srgb, var(--color-text-on-accent) 20%, transparent) 1px, transparent 1.5px); background-size: 32px 32px; opacity: 0.42; pointer-events: none; }
    .partner-program .wrap { position: relative; z-index: 1; }
    .partner-program-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.72fr); gap: var(--layout-copy-gap); align-items: start; }
    .partner-program-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; }
    .partner-program-kicker { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
    .partner-program-title { max-width: 13ch; margin-top: var(--space-related); font-family: var(--font-display); font-size: clamp(2.8rem, 6vw, 5.7rem); font-weight: 500; line-height: var(--leading-display-compact); letter-spacing: -0.018em; text-transform: uppercase; text-wrap: balance; }
    .partner-program-title span { display: block; color: var(--color-text); }
    .partner-program-lead { max-width: 48ch; margin-top: var(--space-component); font-size: var(--type-body-lead); font-weight: 400; line-height: var(--leading-body); }
    .partner-program-audience { max-width: 54ch; margin-top: var(--space-related); font-size: 0.78rem; font-weight: 500; line-height: 1.5; }
    .partner-program-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-related) var(--space-component); margin-top: auto; padding-top: var(--space-group); }
    .partner-program .btn { border-color: var(--color-text-on-accent); background: var(--color-text-on-accent); color: var(--color-text); }
    .partner-program .btn:hover { border-color: var(--color-text); background: var(--color-text); color: var(--color-text-on-accent); }
    .partner-program-ledger { align-self: start; border: 1px solid color-mix(in srgb, var(--color-text-on-accent) 38%, transparent); background: color-mix(in srgb, var(--color-text-on-accent) 6%, transparent); }
    .partner-program-rate { display: grid; grid-template-columns: minmax(170px, 0.5fr) minmax(0, 1fr); gap: var(--space-component); align-items: center; min-height: 154px; padding: clamp(1.3rem, 3vw, 2.2rem); border-bottom: 1px solid color-mix(in srgb, var(--color-text-on-accent) 38%, transparent); }
    .partner-program-rate-value { font-family: var(--font-display); font-size: clamp(3.6rem, 7vw, 6rem); font-weight: 600; line-height: 0.9; letter-spacing: -0.025em; }
    .partner-program-rate-copy strong { display: block; font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.55rem); font-weight: 500; line-height: var(--leading-display); text-transform: uppercase; }
    .partner-program-rate-copy span { display: block; margin-top: 0.4rem; font-size: 0.78rem; line-height: 1.45; }
    .partner-program-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .partner-program-flow span { position: relative; min-height: 94px; padding: 1.15rem 1.35rem; border-right: 1px solid color-mix(in srgb, var(--color-text-on-accent) 38%, transparent); font-size: 0.76rem; font-weight: 600; line-height: 1.45; text-transform: uppercase; }
    .partner-program-flow span:last-child { border-right: 0; }
    .partner-program-flow span:not(:last-child)::after { content: "→"; position: absolute; top: 50%; right: -0.55em; z-index: 1; transform: translateY(-50%); padding: 0.2rem; background: var(--color-accent); }

    /* ─────────────── Manifesto ─────────────── */
    .manifesto { background: var(--color-surface-muted); text-align: center; }
    .manifesto .quote { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.6rem, 4.4vw, 3.4rem); line-height: 1.18; letter-spacing: -0.005em; max-width: 24ch; margin-inline: auto; }
    .manifesto .quote .accent { color: var(--color-accent); }
    .manifesto .sig { margin-top: 2rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); }

    /* ─────────────── Project brief ─────────────── */
    .brief-section { position: relative; overflow: hidden; background: var(--color-canvas); }
    .brief-section::before { top: -5rem; left: -9rem; width: min(54vw, 720px); height: min(72vw, 760px); opacity: 0.42; }
    .brief-section .wrap { position: relative; z-index: 1; }
    .brief-grid { display: grid; grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr); gap: clamp(3rem, 8vw, 7rem); align-items: start; transition: grid-template-columns 0.35s var(--motion-ease); }
    .brief-grid.is-quick-mode { grid-template-columns: minmax(0, 720px); justify-content: center; gap: 0; }
    .brief-grid.is-quick-mode .brief-intro { position: static; max-width: 720px; }
    .brief-grid.is-quick-mode .quick-contact { max-width: 620px; }
    .brief-intro { position: sticky; top: calc(var(--layout-nav-height) + var(--space-component)); }
    .brief-intro h2 { margin-top: var(--space-related); max-width: 10ch; font-family: var(--font-display); font-weight: 500; text-transform: uppercase; font-size: clamp(2.8rem, 6vw, 5.4rem); line-height: var(--leading-display); letter-spacing: -0.018em; }
    .brief-intro h2 .accent { color: var(--color-accent); }
    .brief-intro > p { margin-top: var(--space-component); max-width: 39ch; color: var(--color-text-muted); font-size: 1rem; font-weight: 300; }
    .quick-contact { margin-top: clamp(1.8rem, 4vw, 3rem); scroll-margin-top: calc(var(--layout-nav-height) + 1rem); border-top: 2px solid var(--color-accent); background: color-mix(in srgb, var(--color-surface-raised) 88%, transparent); box-shadow: 0 24px 64px var(--color-shadow-strong); }
    .quick-contact-launch { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.45rem 1rem; width: 100%; padding: 1.25rem 1.3rem; border: 0; background: transparent; color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
    .quick-contact-launch[hidden] { display: none; }
    .quick-contact-launch:hover { background: var(--color-surface-muted); }
    .quick-contact-launch:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
    .quick-contact-launch-kicker { color: var(--color-accent); font-family: var(--font-display); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
    .quick-contact-launch strong { grid-column: 1; font-family: var(--font-display); font-size: clamp(1.45rem, 2.6vw, 2rem); font-weight: 500; line-height: 1; text-transform: uppercase; }
    .quick-contact-launch-time { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--color-text-muted); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
    .quick-contact-form[hidden] { display: none; }
    .quick-contact-form { padding: 1.3rem; }
    .quick-contact-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--color-border); }
    .quick-contact-head-copy { display: grid; gap: 0.35rem; }
    .quick-contact-step-label { color: var(--color-accent); font-family: var(--font-display); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
    .quick-contact-status-dot { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--color-text-muted); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; }
    .quick-contact-status-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 18%, transparent); }
    .quick-contact-close { display: grid; flex: 0 0 40px; place-items: center; width: 40px; height: 40px; border: 1px solid var(--color-border); background: transparent; color: var(--color-text); font: inherit; font-size: 1.1rem; cursor: pointer; }
    .quick-contact-close:hover { border-color: var(--color-accent); color: var(--color-accent); }
    .quick-contact-close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
    .quick-contact-stage[hidden] { display: none; }
    .quick-contact-fields { display: grid; gap: 0.85rem; margin-top: 0.85rem; }
    .quick-contact-field label { display: block; margin-bottom: 0.45rem; color: var(--color-text); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
    .quick-contact-field .optional { color: var(--color-text-muted); font-weight: 400; letter-spacing: 0; text-transform: none; }
    .quick-contact-field input, .quick-contact-field textarea { width: 100%; min-height: 46px; padding: 0.65rem 0; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; background: transparent; color: var(--color-text); font: inherit; font-size: 0.9rem; font-weight: 300; }
    .quick-contact-field textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
    .quick-contact-field input::placeholder, .quick-contact-field textarea::placeholder { color: var(--color-text-muted); opacity: 0.72; }
    .quick-contact-field input:focus, .quick-contact-field textarea:focus { outline: 0; border-bottom-color: var(--color-accent); background: var(--color-surface-muted); }
    .quick-contact-field.is-invalid input, .quick-contact-field.is-invalid textarea { border-bottom-color: var(--color-accent); box-shadow: none; padding-left: 0.8rem; }
    .quick-contact-consent { display: flex; align-items: flex-start; gap: 0.7rem; margin-top: 1rem; color: var(--color-text-muted); font-size: 0.72rem; line-height: 1.45; cursor: pointer; }
    .quick-contact-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 0.1rem; accent-color: var(--color-accent); }
    .quick-contact-consent.is-invalid { color: var(--color-text); }
    .quick-contact-consent.is-invalid input { outline: 2px solid var(--color-accent); outline-offset: 2px; }
    .quick-contact-actions { display: grid; gap: 0.75rem; margin-top: 1rem; }
    .quick-contact-actions .btn { width: 100%; justify-content: center; }
    .quick-contact-stage-note, .quick-contact-reply-promise { color: var(--color-text-muted); font-size: 0.74rem; line-height: 1.45; }
    .quick-contact-step-back, .quick-contact-brief-link, .quick-contact-again { justify-self: start; padding: 0; border: 0; background: transparent; color: var(--color-text-muted); font: inherit; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-align: left; text-transform: uppercase; cursor: pointer; }
    .quick-contact-step-back { margin-top: 1rem; }
    .quick-contact-step-back:hover, .quick-contact-brief-link:hover, .quick-contact-again:hover { color: var(--color-accent); }
    .quick-contact-step-back:focus-visible, .quick-contact-brief-link:focus-visible, .quick-contact-again:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
    .quick-contact-submit:disabled { cursor: wait; opacity: 0.58; }
    .quick-contact-status { min-height: 1.25em; color: var(--color-text-muted); font-size: 0.72rem; }
    .quick-contact-status.is-error { color: var(--color-accent); }
    .quick-contact-success[hidden], .quick-contact-body[hidden] { display: none; }
    .quick-contact-success { padding: 1.8rem 0 0; text-align: left; }
    .quick-contact-success:focus { outline: 0; }
    .quick-contact-success-mark { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 1rem; border: 1px solid var(--color-accent); border-radius: 50%; color: var(--color-accent); font-size: 1.4rem; box-shadow: 0 0 0 7px color-mix(in srgb, var(--color-accent) 10%, transparent); }
    .quick-contact-success h3 { max-width: 100%; font-family: var(--font-display); font-size: clamp(1.9rem, 3.5vw, 2.8rem); font-weight: 500; line-height: 1; overflow-wrap: anywhere; text-transform: uppercase; }
    .quick-contact-success p { margin-top: 0.8rem; color: var(--color-text-muted); font-size: 0.88rem; line-height: 1.55; }
    .quick-contact-success-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 1.2rem; }
    .quick-contact-success-actions .btn { margin: 0; }
    .brief-form { }
    .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
    .brief-wizard { min-width: 0; scroll-margin-top: 6rem; }
    .brief-wizard-head { display: grid; gap: var(--space-related); padding: var(--space-component) 0; border-bottom: 1px solid var(--color-border); }
    .brief-wizard-progress-copy { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-related); color: var(--color-text-muted); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
    .brief-wizard-progress-copy strong { color: var(--color-text); font-weight: 600; }
    .brief-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
    .brief-progress span { height: 3px; background: var(--color-border); transition: background 0.25s var(--motion-ease), transform 0.25s var(--motion-ease); transform-origin: left; }
    .brief-progress span.is-complete { background: var(--color-accent); }
    .brief-step[hidden] { display: none; }
    .brief-step { padding-block: clamp(2rem, 5vw, 3.5rem); border-bottom: 1px solid var(--color-border); }
    .brief-step-heading { display: grid; gap: 0.65rem; margin-bottom: var(--space-component); }
    .brief-step-kicker { color: var(--color-accent); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
    .brief-step-heading h3 { max-width: 20ch; font-family: var(--font-display); font-size: clamp(1.85rem, 4.3vw, 3rem); font-weight: 500; line-height: var(--leading-display); text-transform: uppercase; text-wrap: balance; }
    .brief-step-heading p, .brief-choice-group > p { max-width: 52ch; color: var(--color-text-muted); font-size: 0.84rem; font-weight: 300; line-height: 1.5; }
    .brief-choice-group { margin-top: var(--space-group); padding: 0; border: 0; }
    .brief-choice-group > legend { margin-bottom: 0.35rem; color: var(--color-text); font-family: var(--font-display); font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-weight: 500; line-height: var(--leading-display); text-transform: uppercase; }
    .brief-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; padding: 0; border: 0; }
    .brief-choice-grid-compact { margin-top: var(--space-related); }
    .brief-choice { position: relative; display: block; min-width: 0; cursor: pointer; }
    .brief-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
    .brief-choice > span { display: flex; min-height: 62px; flex-direction: column; justify-content: center; gap: 0.28rem; padding: 0.85rem 1rem; border: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-surface-raised) 34%, transparent); color: var(--color-text-muted); font-size: 0.88rem; font-weight: 400; line-height: 1.35; transition: border-color 0.2s var(--motion-ease), background 0.2s var(--motion-ease), color 0.2s var(--motion-ease), transform 0.2s var(--motion-ease); }
    .brief-choice > span::before { content: ""; position: absolute; top: 0.85rem; right: 0.85rem; width: 9px; height: 9px; border: 1px solid var(--color-border); background: transparent; transition: border-color 0.2s, background 0.2s; }
    .brief-choice:hover > span { border-color: var(--color-text-muted); color: var(--color-text); transform: translateY(-1px); }
    .brief-choice input:checked + span { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 13%, var(--color-surface-raised)); color: var(--color-text); box-shadow: none; }
    .brief-choice input:checked + span::before { border-color: var(--color-accent); background: var(--color-accent); }
    .brief-choice input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 3px; }
    .brief-choice strong { padding-right: 1.4rem; color: inherit; font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; line-height: 1; }
    .brief-choice small { padding-right: 1.4rem; color: var(--color-text-muted); font-size: 0.72rem; font-weight: 300; line-height: 1.35; }
    .brief-step-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-component); margin-top: var(--space-group); }
    .brief-step-actions .btn { min-width: min(100%, 220px); justify-content: center; }
    .brief-back { min-height: 44px; padding: 0.6rem 0; border: 0; border-bottom: 1px solid var(--color-border); background: transparent; color: var(--color-text-muted); font: inherit; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
    .brief-back:hover { border-color: var(--color-accent); color: var(--color-text); }
    .brief-back:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
    .brief-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-component); }
    .brief-date { margin-top: var(--space-related); max-width: 360px; scroll-margin-top: calc(var(--layout-nav-height) + 1rem); }
    .brief-date-label { display: block; margin-bottom: 0.55rem; color: var(--color-text); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
    .jam-calendar { position: relative; }
    .jam-calendar-trigger { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-related); width: 100%; min-height: 48px; padding: 0.65rem 0; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; background: transparent; color: var(--color-text); font: inherit; font-size: 0.96rem; font-weight: 300; text-align: left; transition: border-color 0.2s, background 0.2s, padding 0.2s; }
    .jam-calendar-trigger:hover { border-bottom-color: var(--color-text-muted); }
    .jam-calendar-trigger:focus-visible, .jam-calendar.is-open .jam-calendar-trigger { outline: 0; border-bottom-color: var(--color-accent); background: var(--color-surface-muted); box-shadow: none; padding-left: 0.8rem; }
    .jam-calendar-trigger-value.is-placeholder { color: var(--color-text-muted); }
    .jam-calendar-icon { position: relative; width: 18px; height: 18px; margin-right: 0.15rem; border: 1px solid currentColor; }
    .jam-calendar-icon::before { content: ""; position: absolute; top: 3px; left: -1px; right: -1px; border-top: 1px solid currentColor; }
    .jam-calendar-icon::after { content: ""; position: absolute; top: -3px; left: 3px; width: 8px; height: 4px; border-left: 1px solid currentColor; border-right: 1px solid currentColor; }
    .jam-calendar-panel { position: absolute; z-index: 70; top: calc(100% + 1px); left: 0; width: min(360px, calc(100vw - 2.5rem)); max-height: calc(100vh - var(--layout-nav-height) - 2rem); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-related); border: 1px solid var(--color-accent); background: var(--color-surface-raised); box-shadow: 0 24px 54px var(--color-shadow-strong); }
    .jam-calendar.opens-up .jam-calendar-panel { top: auto; bottom: calc(100% + 1px); }
    .jam-calendar-panel[hidden] { display: none; }
    .jam-calendar-head { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: center; gap: 0.35rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--color-border); }
    .jam-calendar-month { font-family: var(--font-display); font-size: 1rem; font-weight: 500; letter-spacing: 0.04em; text-align: center; text-transform: uppercase; }
    .jam-calendar-nav { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid transparent; color: var(--color-text); font-size: 1.25rem; line-height: 1; }
    .jam-calendar-nav:hover:not(:disabled), .jam-calendar-nav:focus-visible { border-color: var(--color-accent); color: var(--color-accent); outline: 0; }
    .jam-calendar-nav:disabled { color: var(--color-text-muted); cursor: default; opacity: 0.35; }
    .jam-calendar-weekdays, .jam-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.2rem; }
    .jam-calendar-weekdays { padding: 0.75rem 0 0.35rem; color: var(--color-text-muted); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; }
    .jam-calendar-day { display: grid; place-items: center; min-width: 0; aspect-ratio: 1; border: 1px solid transparent; background: transparent; color: var(--color-text); font-size: 0.82rem; }
    .jam-calendar-day.is-outside { color: var(--color-text-muted); opacity: 0.45; }
    .jam-calendar-day:hover:not(:disabled), .jam-calendar-day:focus-visible { border-color: var(--color-accent); color: var(--color-text); outline: 0; }
    .jam-calendar-day.is-today { box-shadow: inset 0 -2px 0 var(--color-accent); }
    .jam-calendar-day.is-selected { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-text-on-accent); font-weight: 600; box-shadow: none; }
    .jam-calendar-day:disabled { color: var(--color-text-muted); cursor: default; opacity: 0.22; }
    .jam-calendar-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-related); margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); }
    .jam-calendar-footer button { min-height: 40px; padding: 0.45rem 0.65rem; color: var(--color-text-muted); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
    .jam-calendar-footer button:hover, .jam-calendar-footer button:focus-visible { color: var(--color-accent); outline: 1px solid var(--color-accent); outline-offset: 0; }
    .brief-validation { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 0.75rem; margin-top: 0.75rem; padding: 0.65rem 0.75rem; border: 1px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface-muted)); color: var(--color-text); font-size: 0.76rem; line-height: 1.4; }
    .brief-validation-mark { display: grid; place-items: center; width: 30px; height: 30px; background: var(--color-accent); color: var(--color-text-on-accent); font-family: var(--font-display); font-size: 1rem; font-weight: 600; }
    .brief-choice-grid.is-invalid .brief-choice > span, .brief-choice-group.is-invalid > .brief-choice-grid .brief-choice > span { border-color: color-mix(in srgb, var(--color-accent) 70%, var(--color-border)); }
    .brief-field.is-invalid input, .brief-field.is-invalid textarea, .brief-field.is-invalid select, .brief-date.is-invalid .jam-calendar-trigger { border-bottom-color: var(--color-accent); box-shadow: none; padding-left: 0.8rem; }
    .brief-option.is-invalid { color: var(--color-text); }
    .brief-option.is-invalid .brief-option-box { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-glow-subtle); }
    .brief-contact-methods { margin-top: var(--space-component); }
    .brief-wizard .brief-field { margin-top: var(--space-component); }
    .brief-wizard .brief-contact-grid .brief-field { margin-top: 0; }
    .brief-wizard .brief-field textarea { min-height: 94px; }
    .brief-wizard > .brief-status { min-height: 0; margin-top: 0; }
    .brief-wizard > .brief-status:not(.is-error):not(.is-success) { display: none; }
    .brief-wizard > .brief-status.is-error { color: var(--color-accent); }
    .brief-step-actions.brief-submit { padding-top: 0; }
    .brief-group { display: grid; grid-template-columns: minmax(112px, 0.28fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); padding-block: clamp(2rem, 4vw, 3.2rem); border-bottom: 1px solid var(--color-border); }
    .brief-group-title { font-family: var(--font-display); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); }
    .brief-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-component); }
    .brief-field { min-width: 0; }
    .brief-field.wide { grid-column: 1 / -1; }
    .brief-field label, .brief-field legend { display: block; margin-bottom: 0.65rem; color: var(--color-text); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
    .brief-field .optional { color: var(--color-text-muted); font-weight: 400; letter-spacing: 0; text-transform: none; }
    .brief-field input, .brief-field textarea, .brief-field select {
      width: 100%; min-height: 48px; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; background: transparent; color: var(--color-text); font: inherit; font-size: 0.96rem; font-weight: 300; padding: 0.65rem 0; transition: border-color 0.2s, background 0.2s;
    }
    .brief-field textarea { min-height: 116px; resize: vertical; line-height: 1.55; }
    .brief-field select { color-scheme: dark; cursor: pointer; }
    .brief-field input::placeholder, .brief-field textarea::placeholder { color: var(--color-text-muted); opacity: 0.72; }
    .brief-field input:focus, .brief-field textarea:focus, .brief-field select:focus { outline: 0; border-bottom-color: var(--color-accent); background: var(--color-surface-muted); }
    .brief-field input:focus-visible, .brief-field textarea:focus-visible, .brief-field select:focus-visible { box-shadow: none; padding-left: 0.8rem; }
    .brief-field select.is-enhanced { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; opacity: 0; overflow: hidden; pointer-events: none; }
    .jam-select { position: relative; min-width: 0; }
    .jam-select-trigger { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; width: 100%; min-height: 48px; padding: 0.65rem 0; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; background: transparent; color: var(--color-text); font: inherit; font-size: 0.96rem; font-weight: 300; text-align: left; cursor: pointer; transition: border-color 0.2s, background 0.2s, padding 0.2s; }
    .jam-select-trigger:hover { border-bottom-color: var(--color-text-muted); }
    .jam-select-trigger:focus-visible, .jam-select.is-open .jam-select-trigger { outline: 0; border-bottom-color: var(--color-accent); background: var(--color-surface-muted); box-shadow: none; padding-left: 0.8rem; }
    .jam-select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .jam-select-chevron { width: 9px; height: 9px; margin-right: 0.25rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transform-origin: center; transition: transform 0.2s var(--motion-ease); }
    .jam-select.is-open .jam-select-chevron { transform: rotate(225deg) translate(-1px, -1px); }
    .jam-select-list { position: absolute; z-index: 40; top: calc(100% + 1px); left: 0; width: 100%; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; padding: 0.4rem; border: 1px solid var(--color-accent); background: var(--color-surface-raised); box-shadow: 0 22px 48px var(--color-shadow-strong); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.16s var(--motion-ease), transform 0.16s var(--motion-ease), visibility 0.16s; }
    .jam-select.opens-up .jam-select-list { top: auto; bottom: calc(100% + 1px); transform: translateY(6px); }
    .jam-select.is-open .jam-select-list { opacity: 1; visibility: visible; transform: none; }
    .jam-select-option { position: relative; display: block; width: 100%; min-height: 44px; padding: 0.7rem 0.85rem 0.7rem 1.1rem; border: 0; background: transparent; color: var(--color-text-muted); font: inherit; font-size: 0.92rem; font-weight: 300; line-height: 1.35; text-align: left; cursor: pointer; }
    .jam-select-option::before { content: ""; position: absolute; left: 0; top: 0.65rem; bottom: 0.65rem; width: 2px; background: var(--color-border); }
    .jam-select-option:hover, .jam-select-option:focus-visible { outline: 0; background: var(--color-surface-inverse); color: var(--color-text); }
    .jam-select-option[aria-selected="true"] { background: var(--color-accent); color: var(--color-text-on-accent); font-weight: 500; }
    .jam-select-option[aria-selected="true"]::before { background: var(--color-text-on-accent); }
    .brief-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem var(--space-component); border: 0; }
    .brief-field label.brief-option { display: flex; align-items: flex-start; gap: 0.75rem; min-height: 44px; margin-bottom: 0; color: var(--color-text-muted); font-size: 0.9rem; font-weight: 300; letter-spacing: 0; line-height: 1.45; text-transform: none; cursor: pointer; }
    .brief-option input { position: absolute; opacity: 0; pointer-events: none; }
    .brief-option-box { position: relative; flex: 0 0 20px; width: 20px; height: 20px; margin-top: 0.1rem; border: 1px solid var(--color-border); transition: border-color 0.2s, background 0.2s; }
    .brief-option input:checked + .brief-option-box { border-color: var(--color-accent); background: var(--color-accent); }
    .brief-option input:checked + .brief-option-box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--color-text-on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
    .brief-option input:focus-visible + .brief-option-box { outline: 2px solid var(--color-accent); outline-offset: 3px; }
    .brief-option span:last-child { min-width: 0; }
    .brief-care { min-width: 0; margin-top: var(--space-related); padding: 0; border: 0; }
    .brief-care-intro { margin: -0.15rem 0 var(--space-related); color: var(--color-text-muted); font-size: 0.82rem; font-weight: 300; line-height: 1.5; }
    .brief-care-summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-related); padding: var(--space-related) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
    .brief-care-summary span { color: var(--color-text-muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
    .brief-care-summary output { color: var(--color-accent); font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1; }
    .brief-care-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-component); border-bottom: 1px solid var(--color-border); }
    .brief-field label.brief-care-option { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: start; gap: 0.75rem; min-height: 60px; margin: 0; padding-block: var(--space-related); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 0.82rem; font-weight: 300; letter-spacing: 0; line-height: 1.4; text-transform: none; cursor: pointer; }
    .brief-care-option:nth-child(-n + 2) { border-top: 0; }
    .brief-care-option-price { color: var(--color-text); font-weight: 600; white-space: nowrap; }
    .brief-field label.brief-consent { display: flex; align-items: flex-start; gap: 0.8rem; margin-bottom: 0; color: var(--color-text-muted); font-size: 0.82rem; font-weight: 300; letter-spacing: 0; line-height: 1.55; text-transform: none; cursor: pointer; }
    .brief-consent span { max-width: 58ch; }
    .brief-submit { display: flex; align-items: center; justify-content: space-between; gap: var(--space-component); padding-top: var(--space-component); }
    .brief-submit .btn { min-width: min(100%, 260px); justify-content: center; }
    .brief-submit .btn:disabled { cursor: wait; opacity: 0.58; }
    .brief-status { min-height: 1.5em; max-width: 38ch; color: var(--color-text-muted); font-size: 0.82rem; }
    .brief-status.is-success { color: var(--foundation-color-green-500); }
    .brief-status.is-error { color: var(--color-accent); }
    .brief-complete { align-self: start; width: min(100%, 480px); border-top: 1px solid var(--color-accent); padding-top: var(--space-component); }
    .brief-complete[hidden] { display: none; }
    .brief-complete h3 { color: var(--color-status-success); font-family: var(--font-display); font-size: clamp(1.55rem, 2.4vw, 2rem); font-weight: 500; line-height: 1.15; letter-spacing: 0; text-transform: uppercase; }
    .brief-complete p { max-width: 38ch; margin-top: 0.65rem; color: var(--color-status-success); font-size: 0.92rem; font-weight: 300; }
    .brief-again { display: inline-flex; min-height: 44px; align-items: center; gap: 0.55rem; margin-top: var(--space-related); padding: 0.5rem 0; border: 0; border-bottom: 1px solid var(--color-border); background: transparent; color: var(--color-text-muted); font: inherit; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
    .brief-again:hover { color: var(--color-text); border-color: var(--color-accent); }
    .brief-again:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
    .brief-honeypot { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }

    /* ─────────────── Footer ─────────────── */
    footer { border-top: 1px solid var(--color-border); padding-block: 3.4rem 2.2rem; }
    .foot-top { display: flex; justify-content: space-between; gap: 2.5rem; flex-wrap: wrap; }
    .foot-brand { max-width: 34ch; }
    .foot-lockup { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(1rem, 2vw, 1.5rem); margin-bottom: 1.1rem; }
    .foot-lockup .brand { flex: 0 0 auto; }
    .foot-slogan { margin: 0; color: var(--color-text); font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; }
    .foot-copy { color: var(--color-text-muted); font-size: 0.9rem; font-weight: 300; }
    .foot-cols { display: flex; gap: clamp(2.5rem, 7vw, 6rem); flex-wrap: wrap; }
    .foot-col { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
    .foot-col a { color: var(--color-text-muted); font-size: 0.9rem; transition: color 0.2s; }
    .foot-col a:hover { color: var(--color-text); }
    .foot-defense { display: flex; align-items: center; gap: 0.75rem; max-width: 46ch; margin: 0; padding: 0; border: 0; }
    .foot-defense-emblem { width: 36px; height: auto; flex: 0 0 auto; }
    .foot-defense-copy { min-width: 0; }
    .foot-defense-kicker { display: block; color: var(--color-accent); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; }
    .foot-defense-body { margin: 0; color: var(--color-text-muted); font-size: 0.72rem; font-weight: 300; line-height: 1.4; }
    .foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--color-border); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }

    /* ─────────────── Responsive ─────────────── */
    @media (max-width: 900px) {
      .hero::before { top: 4rem; right: -42vw; width: 110vw; height: 110vw; opacity: 0.46; }
      .agent::before { top: 34%; left: -18vw; width: 120vw; height: 120vw; opacity: 0.34; }
      .brief-section::before { top: -2rem; left: -54vw; width: 120vw; height: 120vw; opacity: 0.3; }
      .hero-grid { display: block; }
      .impact-grid { grid-template-columns: 1fr; align-items: start; }
      .impact-detail { max-width: 640px; padding: var(--space-group) 0 0; border-left: 0; border-top: 1px solid var(--color-border-on-light); }
      .agent .wrap { grid-template-columns: 1fr; }
      .comparison-grid { grid-template-columns: 1fr; grid-template-rows: none; }
      .comparison-grid > .comparison-card:nth-child(1),
      .comparison-grid > .comparison-card:nth-child(2),
      .comparison-grid > .comparison-card:nth-child(3) { display: flex; flex-direction: column; width: 100%; grid-column: 1; grid-row: auto; }
      .comparison-summary { min-height: 0; }
      .comparison-points { display: grid; grid-row: auto; grid-template-rows: none; }
      .comparison-card .btn { align-self: flex-start; grid-row: auto; }
      .custom-software-callout { grid-template-columns: 1fr; align-items: start; }
      .custom-software-callout .btn { justify-self: start; }
      .price-jumps, .offer-groups { margin-bottom: var(--space-surface); }
      .brand-pricing-head { grid-template-columns: 1fr; align-items: start; }
      .brand-price-row { grid-template-columns: minmax(190px, 0.72fr) minmax(0, 1fr); }
      .brand-price-buy { grid-column: 2; width: 11.5rem; justify-self: start; }
      .website-configurator { grid-template-columns: 1fr; }
      .site-config-summary { position: static; border-bottom: 1px solid var(--color-border); }
      .site-config-builder { border-left: 0; }
      .care-card { grid-template-columns: 1fr; }
      .tiers { grid-template-columns: 1fr; }
      .brief-grid { grid-template-columns: 1fr; }
      .brief-intro { position: static; max-width: 640px; }
      .brief-intro h2 { max-width: 12ch; }
      .quick-contact { max-width: 520px; }
    }
    @media (max-width: 860px) {
      :root {
        --layout-section-y: clamp(var(--space-section-head-max), 20vw, var(--space-section));
        --layout-copy-gap: var(--space-component);
        --layout-content-row-y: var(--space-surface);
      }
      /* Primary destinations stay visible — no hamburger for Why/How/What */
      .nav-right { gap: 0.4rem; min-width: 0; flex: 1; justify-content: flex-end; }
      .nav-links {
        position: static; inset: auto; flex-direction: row; flex-wrap: nowrap;
        align-items: center; gap: 0.15rem;
        background: transparent; border: 0; padding: 0;
        transform: none; transition: none;
        min-width: 0;
      }
      .nav-links.open { transform: none; }
      .nav-links a.link {
        width: auto; border-bottom: 0;
        /* ≥44px touch target without looking huge */
        min-height: 44px; min-width: 44px;
        padding: 0.65rem 0.45rem;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 0.62rem; letter-spacing: 0.08em;
      }
      .nav-links a.link::after { bottom: 10px; }
      .hamburger { display: none !important; }
      .brand img { height: 32px; }
      .lang { gap: 0.2rem; flex-shrink: 0; }
      .lang-btn {
        font-size: 0.64rem;
        min-height: 44px; min-width: 36px;
        padding: 0 0.35rem;
        display: inline-flex; align-items: center; justify-content: center;
      }
      .services-section .sec-head, .service { grid-template-columns: 1fr; }
      .services-section .sec-head {
        grid-template-areas:
          "tag"
          "title"
          "note";
      }
      .service h3 { max-width: 16ch; }
      .service-copy { max-width: 58ch; padding-top: 0; }
      .card, .card.feature { grid-column: span 12; }
      .custom-head, .custom-flow-copy, .custom-control, .custom-scope { grid-template-columns: 1fr; gap: var(--space-group); }
      .custom-flow { grid-template-columns: 1fr; gap: var(--space-related); }
      .custom-flow-signal { padding-top: 0; }
      .custom .c-right { width: 100%; flex-direction: column; align-items: stretch; gap: var(--space-related); }
      .custom .c-price { max-width: none; text-align: left; }
      .custom .c-right .btn { width: 100%; justify-content: center; }
      .step { grid-template-columns: minmax(90px, 0.22fr) minmax(0, 1fr); }
      .step p { grid-column: 2; }
      .partner-program-grid { grid-template-columns: 1fr; }
      .partner-program-actions { margin-top: 0; }
      .foot-defense-copy { grid-template-columns: 1fr; gap: var(--space-related); }
      .brief-group { grid-template-columns: 1fr; gap: var(--space-related); }
    }
    @media (max-width: 600px) {
      .nav-inner { padding-inline: 0.7rem; gap: 0.35rem; }
      .nav-links { gap: 0; }
      .nav-links a.link { font-size: 0.56rem; letter-spacing: 0.05em; padding: 0.65rem 0.35rem; min-width: 40px; }
      .brand img { height: 28px; }
      .foot-brand { width: 100%; max-width: 100%; }
      .foot-lockup { grid-template-columns: minmax(0, auto) minmax(7rem, 1fr); gap: 0.9rem; }
      .foot-lockup .brand img { height: 34px; }
      .foot-slogan { font-size: clamp(1rem, 5vw, 1.2rem); }
      .foot-defense { grid-template-columns: 46px minmax(0, 1fr); align-items: start; }
      .brief-wizard { scroll-margin-top: 4.75rem; }
      .brand-price-row { grid-template-columns: 1fr; gap: var(--space-related); }
      .brand-price-buy {
        grid-column: 1;
        width: min(11.5rem, 100%);
        max-width: 100%;
        justify-self: start;
      }
      .brand-price-amount { font-size: clamp(1.45rem, 7vw, 1.85rem); }
      .services-editorial, .process-editorial, .custom-media { aspect-ratio: 4 / 3; }
      .services-editorial img { object-position: 54% center; }
      .process-editorial img { object-position: 52% center; }
      .custom-media img { object-position: 58% center; }
      .impact-detail { grid-template-columns: 76px 1fr; gap: var(--space-related); }
      .hero-frame::before, .hero-frame::after { width: 40px; height: 40px; }
      .hero-frame { padding: 0.6em 0.75em 0.75em; }
      .chat { border-radius: 12px; }
      .chat-head { padding-inline: 0.75rem; }
      .chat-app-mark { display: none; }
      .chat-body { padding-inline: 0.7rem; }
      .bubble { max-width: 92%; }
      .bubble.preview { width: 92%; }
      .brief-fields, .brief-options, .brief-care-options { grid-template-columns: 1fr; }
      .brief-choice-grid, .brief-contact-grid { grid-template-columns: 1fr; }
      .brief-step { padding-block: var(--space-group); }
      .brief-step-actions { align-items: stretch; flex-direction: column-reverse; }
      .brief-step-actions .btn, .brief-step-actions .brief-back { width: 100%; justify-content: center; text-align: center; }
      .brief-choice > span { min-height: 56px; }
      .brief-care-option:nth-child(2) { border-top: 1px solid var(--color-border); }
      .brief-care-summary output { font-size: 1.3rem; }
      .brief-submit { align-items: stretch; flex-direction: column; }
      .brief-submit .btn { width: 100%; }
      .quick-contact-launch { padding: 1.1rem; }
      .quick-contact-form { padding: 1.1rem; }
      .quick-contact-field input, .quick-contact-field textarea { font-size: 1rem; }
      .quick-contact-success-actions { align-items: stretch; flex-direction: column; }
      .quick-contact-success-actions .btn { width: 100%; justify-content: center; }
      .care-actions { align-items: stretch; flex-direction: column; }
      .care-actions .btn { width: 100%; justify-content: center; }
      .site-config-summary, .site-config-builder { padding-inline: 0; }
      .site-counter-grid, .site-option-grid { grid-template-columns: 1fr; }
      .site-counter:nth-child(odd), .site-option:nth-child(odd), .site-counter:nth-child(even), .site-option:nth-child(even) { padding-inline: 0; border-left: 0; }
      .step { grid-template-columns: 1fr; gap: var(--space-related); }
      .step-marker { flex-direction: row; align-items: baseline; gap: 0.8rem; min-height: 0; }
      .step-number { flex: 0 0 auto; }
      .step .dur { color: var(--color-text-muted); }
      .step-head, .step p { grid-column: 1; }
      .step h3 { font-size: clamp(1.45rem, 7.5vw, 2rem); }
      .partner-program-title { font-size: clamp(2.7rem, 14vw, 4.4rem); }
      .partner-program-rate { grid-template-columns: 138px minmax(0, 1fr); min-height: 128px; padding: 1.15rem; }
      .partner-program-rate-value { font-size: clamp(3.2rem, 17vw, 4.8rem); }
      .partner-program-flow { grid-template-columns: 1fr; }
      .partner-program-flow span { min-height: 0; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--color-text-on-accent) 38%, transparent); }
      .partner-program-flow span:last-child { border-bottom: 0; }
      .partner-program-flow span:not(:last-child)::after { top: auto; right: 1.15rem; bottom: -0.85em; transform: rotate(90deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      * { animation: none !important; transition: none !important; }
      .reveal { opacity: 1; transform: none; }
      .jam-select-list, .jam-select-chevron { transition: none; }
    }


/* ── Service shelf cards (landing) ── */
.service-shelf {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-component);
  margin: 0 0 var(--layout-section-head-gap);
}
.service-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-related);
  min-height: 100%;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--color-border);
  background: var(--color-canvas);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.service-card:hover, .service-card:focus-visible {
  border-color: var(--color-accent);
  outline: none;
}
.service-card-kicker {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.service-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  font-weight: 500;
  line-height: var(--leading-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.service-card-copy {
  margin: 0;
  max-width: 42ch;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.5;
  flex: 1;
}
.service-card-cta {
  margin-top: var(--space-related);
  color: var(--color-accent);
  font-size: 0.82rem;
  font-weight: 600;
}
.service-card-cta .arw { margin-left: 0.15em; }

/* ── Service page chrome ── */
.service-page-hero {
  padding: calc(var(--layout-nav-height) + var(--space-group)) 0 var(--space-group);
  border-bottom: 1px solid var(--color-border);
}
.service-page-hero .wrap { display: grid; gap: var(--space-related); }
.service-page-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none;
}
.service-page-back:hover { color: var(--color-accent); }
.service-page-kicker {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.service-page-title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 500;
  line-height: var(--leading-display-compact);
  letter-spacing: -0.018em;
  text-transform: uppercase;
}
.service-page-lead {
  margin: 0;
  max-width: 52ch;
  color: var(--color-text-muted);
  font-size: var(--type-body-lead);
  font-weight: 300;
  line-height: var(--leading-body);
}
.service-page-main { padding: var(--space-group) 0 var(--layout-section-gap, 4rem); }
.service-page-main .care-card { margin-top: var(--space-group); }
.service-page-cta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-related);
  margin-top: var(--space-group);
  padding-top: var(--space-component);
  border-top: 1px solid var(--color-border);
}
.service-page-cta-bar p {
  margin: 0;
  max-width: 42ch;
  color: var(--color-text-muted);
  font-size: 0.86rem;
  font-weight: 300;
  line-height: 1.5;
}

@media (max-width: 820px) {
  .service-shelf { grid-template-columns: 1fr; }
}