/* ============================================================
   ATB service pages: shared stylesheet.

   Two layers, both lifted verbatim from chat-assistants.html so the
   extraction changed nothing visible:

   1. The site shell (nav, footer, buttons, tokens), identical to index.html.
   2. The service page itself: hero, thread, faces, parallel, does, pricing,
      proof, final CTA.

   Every service page links this file. index.html does not: the home is the
   page that sells and it stays frozen. That is the whole reason the shell
   still exists in two places. See HBD-013.
   ============================================================ */

  :root {
    --atb-midnight: #02051A;
    --atb-midnight-2: #070B26;
    --atb-midnight-3: #0E1338;
    --atb-red: #D7232C;
    --atb-red-glow: #FF3B43;
    --atb-silver: #E8EAEE;
    --atb-silver-2: #C2C6CF;
    --atb-steel: #7A8090;
    --atb-success: #2BB673;

    --fg: var(--atb-silver);
    --fg-2: var(--atb-silver-2);
    --fg-3: var(--atb-steel);
    --line: #1A2046;
    --line-strong: #2A3266;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: var(--atb-midnight); color: var(--fg); overflow-x: hidden; }
  body {
    font-family: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.55;
  }
  a { color: inherit; text-decoration: none; }
  ::selection { background: var(--atb-red); color: #fff; }
  button { font-family: inherit; cursor: pointer; }

  /* Paper-grain overlay */
  body::after {
    content:''; position: fixed; inset: 0; pointer-events: none; z-index: 100;
    opacity: 0.05; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }

  .oldstyle { font-variant-numeric: oldstyle-nums proportional-nums; font-feature-settings: 'onum', 'pnum'; }

  /* ----- type ----- */
  .display {
    font-family: 'Fraunces', serif; font-weight: 700;
    line-height: 0.96; letter-spacing: -0.025em;
    color: var(--atb-silver); margin: 0;
    font-variation-settings: '"opsz" 144, "SOFT" 50';
  }
  .display em {
    font-style: italic; font-weight: 600;
    background: linear-gradient(90deg, #dc2626, #f87171 60%, #fecaca);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    font-variation-settings: '"opsz" 144, "SOFT" 100';
  }
  .eyebrow {
    font-family: 'JetBrains Mono', monospace; font-weight: 500;
    font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--atb-red); margin: 0 0 16px;
    padding: .3rem .7rem .3rem .9rem;
    border: 1px solid var(--atb-red); border-radius: 2px;
    display: inline-block;
  }
  .handnote {
    font-family: 'Caveat', cursive; font-weight: 600;
    color: var(--atb-red); font-size: 22px; line-height: 1.05;
    transform: rotate(-3deg); display: inline-block;
  }
  .handnote--silver { color: var(--atb-silver); }

  /* ----- buttons ----- */
  .btn {
    font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14px;
    letter-spacing: 0.01em; padding: 11px 20px;
    border-radius: 8px; border: none; display: inline-flex;
    align-items: center; gap: 8px; white-space: nowrap;
    /* Was `transition: all`, which quietly animated the focus ring too: tab onto a
       button and the outline grew in over 220ms. A focus indicator is either there
       or it is not. Name the properties that are allowed to move. */
    transition: background-color 220ms cubic-bezier(.85,0,.15,1),
                border-color 220ms cubic-bezier(.85,0,.15,1),
                color 220ms cubic-bezier(.85,0,.15,1),
                box-shadow 220ms cubic-bezier(.85,0,.15,1);
  }
  .btn--lg { font-size: 16px; padding: 14px 26px; }
  .btn--primary {
    background: var(--atb-red); color: #fff;
    box-shadow: 0 0 0 1px rgba(255,59,67,.45), 0 0 24px rgba(215,35,44,.35);
  }
  .btn--primary:hover { background: var(--atb-red-glow); }
  .btn--secondary {
    background: transparent; color: var(--atb-silver);
    border: 1px solid var(--line-strong);
  }
  .btn--secondary:hover { border-color: var(--atb-silver-2); }

  /* ----- nav ----- */
  nav.site {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 56px 42px; background: rgba(2,5,26,0.78);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--line);
  }
  .wordmark { display: inline-flex; align-items: center; gap: 11px; }
  .wordmark img { height: 30px; width: auto; display: block; }
  /* Top nav logo enlarged ~3x; negative margins keep its layout box at 30px so
     the nav bar height does NOT grow — the logo just bleeds a little below it. */
  nav.site .wordmark img { height: 84px; margin: -12px 0 -42px; }
  .wordmark .word {
    font-family: 'Syncopate', sans-serif; font-weight: 700;
    font-size: 13px; letter-spacing: 0.08em;
    color: var(--atb-silver); text-transform: uppercase; white-space: nowrap;
  }
  .wordmark .word .red { color: var(--atb-red); }
  nav.site .links {
    display: flex; gap: 32px; font-size: 14px; color: var(--fg-2);
  }
  nav.site .links a:hover {
    background: linear-gradient(transparent 70%, rgba(215,35,44,0.4) 70%);
  }
  nav.site .right {
    display: flex; gap: 10px; align-items: center;
  }
  nav.site .lang {
    font-family: 'Syncopate', sans-serif; font-size: 10px;
    letter-spacing: 0.22em; color: var(--fg-3);
  }

  /* ----- sections ----- */
  section {
    padding: 120px 56px;
    border-top: 1px solid var(--line);
    position: relative;
  }
  section.alt { background: var(--atb-midnight-2); }

  /* Servicios sobre el mismo rojo de la seccion final. Los textos se aclaran porque
     el rojo de marca sobre ese rojo cae a 1.28 de contraste: seria invisible. */
  #services {
    background: linear-gradient(160deg, #6b0000 0%, #a10000 40%, #b91c1c 100%);
    border-top-color: rgba(255, 255, 255, .10);
  }
  #services .eyebrow { color: #F5F6F8; border-color: rgba(255, 255, 255, .55); }
  #services .display { color: #FFFFFF; }
  #services .display em {
    background-image: linear-gradient(90deg, #FFDCDC, #FFFFFF 55%, #FFD4D4);
  }
  #services .lede,
  #services .lede p,
  #services .dropcap { color: #F5F6F8; }
  #services .handnote { color: #FFFFFF; }
  #services .dropcap::first-letter { color: #FFFFFF; }

  /* hero */
  section.hero {
    border-top: none;
    padding: 110px 56px 130px;
    overflow: hidden;
  }
  .hero-bg {
    position: absolute; inset: 0;
    pointer-events: none;
  }
.hero-inner { position: relative; max-width: 980px; }
  .hero-meta {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    margin-bottom: 14px;
  }
  .hero h1 { font-size: clamp(56px, 9vw, 104px); }
  .hero-squiggle {
    margin: 8px 0 0 -4px;
  }
  .hero-squiggle svg path {
    stroke-dasharray: 600; stroke-dashoffset: 600;
    animation: drawIn 1.4s cubic-bezier(.7,0,.3,1) 0.3s forwards;
  }
  @keyframes drawIn { to { stroke-dashoffset: 0; } }
  .hero-lede {
    font-size: 20px; line-height: 1.55; color: var(--fg-2);
    max-width: 640px; margin: 28px 0 36px;
    transform: rotate(0.4deg);
  }
  .hero-lede .accent {
    color: var(--atb-silver); font-style: italic;
    font-family: 'Fraunces', serif; font-weight: 500;
  }
  .hero-tags {
    display: flex; gap: 36px; margin-top: 64px;
    flex-wrap: wrap; align-items: center;
  }
  .tag {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 13px; color: var(--fg-2);
  }
  .tag .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--atb-red);
    box-shadow: 0 0 10px currentColor;
  }
  .tag.green .dot { background: var(--atb-success); color: var(--atb-success); }
  .tag.silver .dot { background: var(--atb-silver-2); box-shadow: none; }
  .tag.red .dot { color: var(--atb-red); }
  .hero-status {
    margin-top: 48px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; color: var(--fg-3);
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  }
  .hero-status .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--atb-success); box-shadow: 0 0 10px var(--atb-success);
    animation: pulse 1.6s ease-in-out infinite;
  }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

  /* services */
  .section-head {
    display: flex; justify-content: space-between;
    align-items: flex-end; margin-bottom: 64px; gap: 48px; flex-wrap: wrap;
  }
  .section-head h2 { font-size: 56px; }
  .section-head .lede {
    max-width: 380px; font-size: 16px; color: var(--fg-2); margin: 0;
    position: relative;
  }
  .section-head .note {
    position: absolute; right: 0; top: -46px;
    font-size: 20px; line-height: 1.1; text-align: right;
  }
  /* Flex y no grid: una grilla de columnas fijas deja la ultima fila pegada a la
     izquierda. Con flex-wrap + justify-content los sobrantes quedan centrados. */
  .services-grid {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
    gap: 20px;
  }
  .services-grid > .card { flex: 0 1 calc((100% - 40px) / 3); min-width: 0; }
  .card {
    background: var(--atb-midnight-3);
    border: 1px solid var(--line);
    padding: 28px 24px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    position: relative; overflow: hidden;
  }
  .card .icon { margin-bottom: 20px; display: block; }
  .card h3 {
    font-family: 'Fraunces', serif; font-weight: 700; font-size: 24px;
    color: var(--atb-silver); letter-spacing: -0.01em; margin: 0;
    font-variation-settings: '"opsz" 36';
  }
  .card p {
    font-size: 14px; line-height: 1.55;
    color: var(--fg-2); margin: 10px 0 0;
  }
  .card .quote-link {
    margin-top: 18px; font-size: 13px;
    color: var(--atb-red); font-weight: 600;
  }
  .services-grid .card { border-radius: 16px; }

  .dropcap {
    margin-top: 80px; max-width: 680px;
    font-family: 'Fraunces', serif; font-size: 18px;
    color: var(--fg-2); line-height: 1.65;
    font-style: italic; font-weight: 400;
  }
  .dropcap::first-letter {
    font-family: 'Fraunces', serif; font-weight: 700; font-style: italic;
    font-size: 4.4em; line-height: 0.85;
    float: left; margin: 6px 12px 0 0; color: var(--atb-red);
    font-variation-settings: '"opsz" 144';
  }

  /* process */
  section.process { padding: 90px 56px 130px; }
  .process .steps-art { margin: 18px 0 56px; }
  .steps-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  }
  .step-card {
    background: var(--atb-midnight-3);
    border: 1px solid var(--line);
    padding: 28px 24px; position: relative;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  }
  .step-card { border-radius: 16px; }
  .step-num {
    position: absolute; top: 20px; right: 20px;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1.5px solid var(--atb-red);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Syncopate', sans-serif; font-weight: 700; font-size: 11px;
    color: var(--atb-red);
  }
  .step-card h3 {
    font-family: 'Fraunces', serif; font-weight: 700; font-size: 22px;
    color: var(--atb-silver); margin: 48px 0 0; letter-spacing: -0.01em;
    font-variation-settings: '"opsz" 36';
  }
  .step-card p { font-size: 14px; line-height: 1.55; color: var(--fg-2); margin: 10px 0 0; }
  .process-foot {
    margin-top: 36px; display: flex; align-items: center; gap: 14px;
  }

  /* packages */
  .packages-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    flex-wrap: wrap; gap: 32px; margin-bottom: 56px;
  }
  .packages-head h2 { font-size: 56px; }
  .packages-head .lede {
    font-size: 15px; color: var(--fg-2); max-width: 340px;
    margin: 0; line-height: 1.55;
  }
  .pkg-grid {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
    gap: 20px;
  }
  .pkg-grid > .pkg { flex: 0 1 calc((100% - 40px) / 3); min-width: 0; }
  .pkg {
    background: var(--atb-midnight-3);
    border: 1px solid var(--line);
    border-radius: 18px; padding: 32px 28px; position: relative;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  }
  .pkg.popular {
    background: linear-gradient(180deg, rgba(215,35,44,.12), var(--atb-midnight-3) 80%);
    border-color: var(--atb-red);
    box-shadow: 0 0 40px rgba(215,35,44,.18);
  }
  .pkg-tag {
    position: absolute; top: -12px; right: 24px;
    padding: 4px 12px; background: var(--atb-red); color: #fff;
    font-family: 'Syncopate', sans-serif; font-size: 9px; font-weight: 700;
    letter-spacing: 0.22em; border-radius: 999px;
  }
  .pkg-cat {
    font-size: 12px; color: var(--fg-3);
    text-transform: uppercase; letter-spacing: 0.1em;
  }
  .pkg-name {
    font-family: 'Syncopate', sans-serif; font-weight: 700; font-size: 22px;
    color: var(--atb-silver); letter-spacing: 0.04em; margin-top: 8px;
  }
  .pkg-price {
    font-family: 'Fraunces', serif; font-style: italic; font-size: 18px;
    color: var(--atb-red); margin: 20px 0 24px; font-weight: 500;
  }
  .pkg ul { list-style: none; padding: 0; margin: 0 0 28px; }
  .pkg li {
    display: flex; gap: 10px; font-size: 14px; color: var(--fg-2);
    line-height: 1.5; margin-bottom: 12px;
  }
  .pkg li .check { color: var(--atb-red); flex-shrink: 0; }
  .pkg-foot {
    text-align: center; margin-top: 48px;
    font-size: 14px; color: var(--fg-3);
  }
  .pkg-foot strong { color: var(--atb-silver); }
  .footnotes {
    max-width: 680px; margin: 56px auto 0;
    border-top: 1px dashed var(--line-strong);
    padding-top: 24px; font-size: 12px; line-height: 1.7;
    color: var(--fg-3);
  }
  .footnotes div { margin-bottom: 4px; }
  .footnotes sup { margin-right: 4px; }

  /* why us */
  section.whyus { padding: 160px 56px 110px; overflow: hidden; position: relative; }

  /* brand-kit logo display (replaces polaroid) */
  .logo-display {
    position: absolute; top: 48px; right: 72px;
    width: 260px; height: 260px;
    background:
      radial-gradient(circle at 50% 50%, rgba(185,28,28,.18) 0%, transparent 60%),
      linear-gradient(145deg, #0a1026, #050812);
    border: 1px solid rgba(192,192,192,.13);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.75), 0 0 0 1px rgba(185,28,28,.1);
  }
  .logo-display::before {
    content: ''; position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(192,192,192,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(192,192,192,.04) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 80%);
  }
  .logo-display::after {
    content: ''; position: absolute; inset: 14px;
    border: 1px solid rgba(192,192,192,.07); border-radius: 6px;
    pointer-events: none;
  }
  .logo-display img {
    position: relative; z-index: 1;
    width: 72%; height: auto;
    image-rendering: -webkit-optimize-contrast;
    animation: ldFloat 7s ease-in-out infinite;
    filter: drop-shadow(0 0 24px rgba(185,28,28,.35));
  }
  .logo-display .ld-corner {
    position: absolute; width: 22px; height: 22px;
    border-color: var(--atb-red); opacity: .65; pointer-events: none;
  }
  .logo-display .ld-corner.tl { top: 12px; left: 12px; border-top: 1.5px solid; border-left: 1.5px solid; }
  .logo-display .ld-corner.tr { top: 12px; right: 12px; border-top: 1.5px solid; border-right: 1.5px solid; }
  .logo-display .ld-corner.bl { bottom: 12px; left: 12px; border-bottom: 1.5px solid; border-left: 1.5px solid; }
  .logo-display .ld-corner.br { bottom: 12px; right: 12px; border-bottom: 1.5px solid; border-right: 1.5px solid; }
  .logo-display .ld-label {
    position: absolute; bottom: 13px; left: 0; right: 0;
    text-align: center; z-index: 2;
    font-family: 'Syncopate', sans-serif; font-size: 6.5px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: rgba(215,35,44,.55);
  }
  @keyframes ldFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%       { transform: translateY(-9px) rotate(.5deg); }
  }
  .reasons {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 40px; margin-top: 64px;
  }
  .reason {
    display: flex; gap: 24px; align-items: flex-start;
  }
  .reason .num {
    font-family: 'Fraunces', serif; font-weight: 700; font-style: italic;
    font-size: 64px; color: var(--atb-red);
    line-height: 1; flex-shrink: 0;
    font-variation-settings: '"opsz" 144';
  }
  .reason h3 {
    font-family: 'Fraunces', serif; font-weight: 700; font-size: 22px;
    color: var(--atb-silver); letter-spacing: -0.01em; margin: 0;
    font-variation-settings: '"opsz" 36';
  }
  .reason p { font-size: 15px; line-height: 1.55; color: var(--fg-2); margin: 8px 0 0; }
  .signature {
    margin-top: 80px; padding-top: 32px;
    border-top: 1px dashed var(--line-strong);
    max-width: 680px;
  }
  .signature blockquote {
    font-family: 'Fraunces', serif; font-size: 19px;
    font-style: italic; font-weight: 500;
    line-height: 1.55; color: var(--fg-2); margin: 0;
  }
  .signature .name {
    margin-top: 18px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  }
  .signature .name .sig {
    font-family: 'Caveat', cursive; font-size: 36px; font-weight: 700;
    color: var(--atb-silver); line-height: 1;
  }
  .signature .name .meta {
    font-size: 12px; color: var(--fg-3); letter-spacing: 0.05em;
  }

  /* on-site / private AI */
  .twocol {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 64px; align-items: center;
  }
  .twocol h2 { font-size: 52px; }
  .twocol p.lede {
    font-size: 16px; line-height: 1.6; color: var(--fg-2);
    max-width: 520px; margin: 24px 0 28px;
  }
  .feature-list {
    display: flex; flex-direction: column; gap: 18px;
    margin-bottom: 28px;
  }
  .feature {
    display: flex; gap: 14px; align-items: flex-start;
  }
  .feature .check {
    width: 28px; height: 28px; border-radius: 6px;
    background: rgba(215,35,44,.16); border: 1px solid var(--atb-red);
    display: flex; align-items: center; justify-content: center;
    color: var(--atb-red); font-size: 14px; flex-shrink: 0; margin-top: 2px;
  }
  .feature h4 { font-weight: 700; font-size: 15px; color: var(--atb-silver); margin: 0; }
  .feature p { font-size: 14px; line-height: 1.5; color: var(--fg-2); margin: 4px 0 0; }

  /* bilingual */
  section.bilingual {
    padding: 80px 56px;
    display: flex; align-items: center; gap: 48px; flex-wrap: wrap;
  }
  section.bilingual .ill { flex-shrink: 0; }
  section.bilingual .body { flex: 1; min-width: 0; }
  section.bilingual h2 { font-size: 36px; }
  section.bilingual p {
    font-size: 15px; line-height: 1.55; color: var(--fg-2);
    max-width: 640px; margin: 14px 0 0;
  }

  /* footer cta */
  section.cta {
    padding: 140px 56px; overflow: hidden; text-align: center; position: relative;
    background: linear-gradient(160deg, #6b0000 0%, #a10000 40%, #b91c1c 100%);
    color: #fff;
  }
  section.cta::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(45deg, transparent, transparent 60px, rgba(255,255,255,.025) 60px, rgba(255,255,255,.025) 61px);
  }
  section.cta .glow {
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 60%, rgba(255,255,255,.06), transparent 55%);
    pointer-events: none;
  }
  section.cta .stamp {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); opacity: 0.12;
    pointer-events: none;
  }
  section.cta .inner { position: relative; max-width: 820px; margin: 0 auto; }
  section.cta h2 { font-size: clamp(48px, 8vw, 84px); }
  section.cta p {
    font-size: 18px; line-height: 1.55;
    color: var(--fg-2); margin: 28px 0 36px;
  }
  section.cta .contact {
    display: flex; gap: 32px; justify-content: center;
    margin-top: 48px; font-size: 13px; color: #F5F6F8;
    flex-wrap: wrap;
  }

  /* footer */
  footer.site {
    padding: 56px;
    border-top: 1px solid var(--line);
    background: var(--atb-midnight-2);
  }
  footer.site .top {
    display: flex; justify-content: space-between;
    align-items: flex-start; gap: 48px; flex-wrap: wrap;
  }
  footer.site .blurb {
    font-size: 13px; color: var(--fg-3); margin-top: 14px;
    max-width: 340px; line-height: 1.5;
  }
  footer.site .cols {
    display: flex; gap: 64px; font-size: 13px; flex-wrap: wrap;
  }
  footer.site .col-head {
    font-family: 'Syncopate', sans-serif; font-size: 10px;
    letter-spacing: 0.28em; color: var(--atb-red);
    margin-bottom: 14px; font-weight: 700;
  }
  footer.site .cols a {
    display: block; color: var(--fg-2); margin-bottom: 8px;
  }
  footer.site .cols a:hover { color: var(--atb-silver); }
  footer.site .rule {
    height: 1px; background: var(--line); margin: 40px 0 24px;
  }
  footer.site .legal {
    display: flex; justify-content: space-between;
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: var(--fg-3); flex-wrap: wrap; gap: 12px;
  }


  /* responsive */
  @media (max-width: 900px) {
    nav.site { padding: 16px 24px; }
    nav.site .wordmark img { height: 46px; margin: -8px 0; }
    nav.site .links { display: none; }
    section { padding: 80px 24px; }
    section.hero { padding: 60px 24px 80px; }
    section.cta { padding: 80px 24px; }
    .twocol { grid-template-columns: 1fr; gap: 32px; }
    .steps-grid { grid-template-columns: 1fr 1fr; }
    .reasons { grid-template-columns: repeat(2, 1fr); }
    .services-grid > .card,
    .pkg-grid > .pkg { flex-basis: calc((100% - 20px) / 2); }
    .section-head .note { display: none; }
    .display { font-size: 56px !important; }
    section.cta h2 { font-size: 48px !important; }
    .hero h1 { font-size: 56px; }
    #bilingual { padding: 60px 24px !important; }
    #bilingual > div { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  }
  @media (max-width: 560px) {
    .steps-grid { grid-template-columns: 1fr; }
    .reasons { grid-template-columns: 1fr; }
    .services-grid > .card,
    .pkg-grid > .pkg { flex-basis: 100%; }
    .hero-tags { gap: 16px; }
    section.cta .contact { gap: 16px; flex-direction: column; }
    .btn { white-space: normal; }
  }

  /* ---- Hero canvas ---- */
  #hero-canvas {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    display: block; z-index: 0; pointer-events: none;
  }
  section.hero { position: relative; }
  .hero-inner { position: relative; z-index: 1; }

  /* ---- Language toggle button ---- */
  .btn-lang {
    display: flex; align-items: center; gap: .3rem;
    background: transparent;
    border: 1px solid rgba(232,234,238,.2);
    border-radius: 4px; padding: .32rem .65rem;
    cursor: pointer;
    font-family: 'Syncopate', sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--fg-3);
    transition: border-color .2s, background .2s;
  }
  .btn-lang:hover { border-color: var(--fg-2); background: rgba(232,234,238,.06); }
  .btn-lang .lang-opt { transition: color .15s; color: var(--fg-3); }
  .btn-lang .lang-opt.active { color: var(--atb-silver); }
  .btn-lang .lang-div { opacity: .35; }

  /* ---- Mobile nav ---- */
  .mobile-nav {
    display: none; position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(2,5,26,.97); z-index: 999;
    flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
  }
  .mobile-nav.open { display: flex; }
  .mobile-nav a {
    font-family: 'Syncopate', sans-serif; font-size: 1.4rem; font-weight: 700;
    color: var(--fg-2); letter-spacing: .12em; text-transform: uppercase;
    transition: color .2s;
  }
  .mobile-nav a:hover { color: var(--atb-silver); }
  .mobile-nav .btn { font-size: 1rem; padding: .85rem 2rem; }
  .mobile-close {
    position: absolute; top: 1.5rem; right: 1.5rem;
    background: none; border: none;
    color: var(--fg-2); font-size: 1.8rem; cursor: pointer; line-height: 1;
  }
  .nav-hamburger {
    display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px;
    background: none; border: none;
  }
  .nav-hamburger span {
    display: block; width: 22px; height: 2px;
    background: var(--atb-silver); border-radius: 2px;
  }

  /* ---- Detailed Pricing accordion ---- */
  #detailed-pricing {
    padding: 120px 56px;
    border-top: 1px solid var(--line);
    background: var(--atb-midnight-2);
    position: relative;
  }
  #detailed-pricing .dp-head { margin-bottom: 56px; }
  #detailed-pricing .dp-head .eyebrow { margin-bottom: 12px; }
  #detailed-pricing .dp-head h2 {
    font-family: 'Fraunces', serif; font-weight: 700; font-size: clamp(36px,5vw,56px);
    line-height: .96; letter-spacing: -.025em; color: var(--atb-silver); margin: 0;
    font-variation-settings: '"opsz" 144, "SOFT" 50';
  }
  #detailed-pricing .dp-head h2 em {
    font-style: italic; font-weight: 600; color: var(--atb-red);
    font-variation-settings: '"opsz" 144, "SOFT" 100';
  }
  #detailed-pricing .dp-head p { font-size: 16px; color: var(--fg-2); margin: 16px 0 0; }
  .accordion { display: flex; flex-direction: column; gap: .75rem; }
  .acc-item {
    background: rgba(2,5,26,.6); border: 1px solid var(--line);
    border-radius: 10px; overflow: hidden;
    transition: border-color .2s, background .2s;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  }
  .acc-item:hover { border-color: var(--line-strong); background: rgba(14,19,56,.5); }
  .acc-item.open { border-color: var(--atb-red); background: rgba(14,19,56,.6); }
  .acc-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.2rem 1.5rem; cursor: pointer; user-select: none;
    transition: background .2s;
  }
  .acc-head:hover { background: rgba(255,255,255,.03); }
  .acc-head-left { display: flex; align-items: center; gap: 1rem; }
  .acc-icon { display:flex; align-items:center; flex-shrink:0; color: var(--atb-silver); }
  .acc-title {
    font-family: 'Rajdhani', sans-serif; font-size: 1.15rem; font-weight: 700;
    text-transform: uppercase; color: var(--fg-2); letter-spacing: .06em; transition: color .2s;
  }
  .acc-item.open .acc-title, .acc-item:hover .acc-title { color: var(--atb-silver); }
  .acc-arrow {
    width: 18px; height: 18px;
    border-right: 2px solid var(--fg-3); border-bottom: 2px solid var(--fg-3);
    transform: rotate(45deg); transition: transform .3s, border-color .2s;
    flex-shrink: 0; margin-top: -3px;
  }
  .acc-item.open .acc-arrow {
    transform: rotate(-135deg); border-color: var(--atb-silver); margin-top: 3px;
  }
  .acc-body {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .4s cubic-bezier(.16,1,.3,1);
  }
  .acc-item.open .acc-body { grid-template-rows: 1fr; }
  .acc-body-inner { overflow: hidden; min-height: 0; padding: 0 1.5rem 1.5rem; }
  .acc-desc {
    font-size: .88rem; color: var(--fg-2); margin-bottom: 1.25rem;
    border-top: 1px solid var(--line); padding-top: 1rem; line-height: 1.65;
  }
  .pricing-tiers {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;
  }
  .tier {
    background: rgba(14,19,56,.7); border: 1px solid var(--line);
    border-radius: 8px; padding: 1.1rem 1.25rem;
    transition: border-color .2s;
  }
  .tier:hover { border-color: var(--line-strong); }
  .tier-name {
    font-family: 'Syncopate', sans-serif; font-size: .7rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: .5rem;
  }
  .tier-features { display: flex; flex-direction: column; gap: .3rem; margin-top: .6rem; }
  .tier-features span {
    font-size: .8rem; color: var(--fg-2); display: flex; align-items: flex-start; gap: .4rem;
  }
  .tier-features span::before { content: '·'; color: var(--atb-red); flex-shrink: 0; }
  .tier-ideal {
    font-size: .78rem; color: #2BB673; font-weight: 600; letter-spacing: .03em;
    margin-bottom: .6rem; padding-bottom: .5rem;
    border-bottom: 1px solid rgba(14,19,56,.8);
  }
  .tier-ideal::before { content: '✦ Best for: '; opacity: .7; }
  .tier-why {
    margin-top: .75rem; padding-top: .75rem;
    border-top: 1px solid var(--line);
    font-size: .78rem; color: var(--fg-3); font-style: italic; line-height: 1.55;
  }
  .tier-why strong { color: var(--fg-2); font-style: normal; }
  .btn-quote {
    display: inline-block; background: transparent; color: var(--atb-red);
    font-family: 'Syncopate', sans-serif; font-size: .7rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    padding: .42rem 1rem; border: 1px solid rgba(215,35,44,.4);
    border-radius: 4px; cursor: pointer; transition: background .2s, border-color .2s;
    text-decoration: none; margin-bottom: .6rem; display: block;
  }
  .btn-quote:hover { background: rgba(215,35,44,.12); border-color: var(--atb-red); }
  .support-plans { display: flex; flex-direction: column; gap: 1.25rem; }
  .support-plan {
    background: rgba(14,19,56,.7); border: 1px solid var(--line);
    border-radius: 8px; overflow: hidden;
  }
  .support-plan-head { padding: 1rem 1.5rem .75rem; border-bottom: 1px solid var(--line); }
  .support-plan-head h3 {
    font-family: 'Syncopate', sans-serif; font-size: .85rem; font-weight: 700;
    color: var(--atb-silver); letter-spacing: .04em; margin-bottom: .25rem;
  }
  .support-plan-head p { font-size: .85rem; color: var(--fg-2); }
  .support-options { display: grid; grid-template-columns: 1fr 1fr; }
  .support-option { padding: 1.1rem 1.5rem; }
  .support-option:first-child { border-right: 1px solid var(--line); }
  .support-option.annual { background: linear-gradient(135deg,rgba(43,182,115,.06),rgba(43,182,115,.02)); }
  .support-opt-label {
    font-family: 'Syncopate', sans-serif; font-size: .68rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3);
    margin-bottom: .35rem; display: flex; align-items: center; gap: .5rem;
  }
  .save-badge {
    background: linear-gradient(90deg,#15803d,#16a34a); color: #fff;
    font-size: .6rem; padding: .12rem .4rem; border-radius: 20px; letter-spacing: .06em;
  }
  .support-opt-meta { font-size: .78rem; color: var(--fg-3); }
  .consulting-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
  .consulting-table th {
    font-family: 'Syncopate', sans-serif; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; font-size: .68rem; color: var(--fg-3);
    padding: .6rem 1rem; text-align: left; border-bottom: 1px solid var(--line);
  }
  .consulting-table td {
    padding: .75rem 1rem; color: var(--fg-2); border-bottom: 1px solid rgba(26,32,70,.6);
  }
  .consulting-table tr:hover td { background: rgba(255,255,255,.02); }
  .consulting-table .price-cell {
    font-family: 'Syncopate', sans-serif; font-size: 1rem; font-weight: 700; color: var(--atb-red);
  }

  /* ---- Hosting section ---- */
  #hosting {
    padding: 120px 56px; border-top: 1px solid var(--line);
    background: var(--atb-midnight); position: relative;
  }
  #hosting::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 65% 60% at 80% 30%, rgba(215,35,44,.07) 0%, transparent 65%);
    pointer-events: none;
  }
  .hosting-inner {
    display: grid; grid-template-columns: 55% 45%;
    gap: 0; align-items: stretch; position: relative; z-index: 1; min-height: 480px;
  }
  .hosting-text {
    padding: 3.5rem 3.5rem 3.5rem 0;
    display: flex; flex-direction: column; justify-content: center;
  }
  .hosting-text .eyebrow { margin-bottom: 16px; }
  .hosting-text h2 {
    font-family: 'Fraunces', serif; font-weight: 700; font-size: clamp(32px,4vw,48px);
    line-height: .96; letter-spacing: -.025em; color: var(--atb-silver); margin: 0 0 1rem;
    font-variation-settings: '"opsz" 144, "SOFT" 50';
  }
  .hosting-text h2 em {
    font-style: italic; font-weight: 600; color: var(--atb-red);
    font-variation-settings: '"opsz" 144, "SOFT" 100';
  }
  .hosting-text > p { color: var(--fg-2); line-height: 1.65; margin-bottom: 2rem; max-width: 440px; }
  .hosting-options { display: flex; flex-direction: column; gap: .85rem; margin-bottom: 2rem; }
  .hosting-option {
    display: flex; gap: .9rem; align-items: flex-start;
    padding: 1rem 1.2rem;
    background: rgba(14,19,56,.5); border: 1px solid var(--line);
    border-radius: 8px; transition: background .2s, border-color .2s;
  }
  .hosting-option:hover { background: rgba(215,35,44,.06); border-color: rgba(215,35,44,.3); }
  .hosting-option-icon { font-size: 1.4rem; line-height: 1.2; flex-shrink: 0; }
  .hosting-option-body h3 {
    font-family: 'Syncopate', sans-serif; font-size: .85rem; font-weight: 700;
    color: var(--atb-silver); letter-spacing: .04em; margin-bottom: .25rem;
  }
  .hosting-option-body p { font-size: .88rem; color: var(--fg-2); line-height: 1.55; }
  .hosting-visual {
    background: rgba(2,5,26,.6); border-left: 1px solid var(--line);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2rem; padding: 3rem 2.5rem; position: relative; overflow: hidden;
  }
  .hosting-visual::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(215,35,44,.07) 0%, transparent 70%);
    pointer-events: none;
  }
  .privacy-graphic { position: relative; width: 160px; height: 160px; flex-shrink: 0; }
  .privacy-graphic svg { width: 100%; height: 100%; overflow: visible; }
  @keyframes orbitSpin  { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
  @keyframes orbitSpinR { from { transform: rotate(0deg); }   to { transform: rotate(-360deg); } }
  @keyframes lockPulse  { 0%,100% { opacity:.7; } 50% { opacity:1; } }
  .orbit-1 { transform-origin: 50% 50%; animation: orbitSpin  12s linear infinite; }
  .orbit-2 { transform-origin: 50% 50%; animation: orbitSpinR 18s linear infinite; }
  .lock-body { animation: lockPulse 3s ease-in-out infinite; }
  .hosting-card {
    background: rgba(14,19,56,.9); border: 1px solid var(--line);
    border-radius: 8px; padding: 1.4rem 1.6rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06); position: relative; width: 100%; z-index: 1;
  }
  .hosting-card-badge {
    display: inline-block; font-family: 'Syncopate', sans-serif; font-size: .62rem;
    font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
    color: var(--atb-red); border: 1px solid rgba(215,35,44,.4);
    padding: .16rem .5rem; border-radius: 3px; margin-bottom: .7rem;
  }
  .hosting-card h3 {
    font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.1rem;
    color: var(--atb-silver); margin-bottom: .4rem;
    font-variation-settings: '"opsz" 36';
  }
  .hosting-card p { font-size: .85rem; color: var(--fg-2); line-height: 1.6; }

  /* ---- Reviews section ---- */
  #reviews {
    padding: 72px 56px; border-top: 1px solid var(--line);
    background: var(--atb-midnight); position: relative; overflow: hidden;
  }
  #reviews::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 15% 65%, rgba(215,35,44,.05) 0%, transparent 55%);
    pointer-events: none;
  }
  .reviews-inner { position: relative; z-index: 1; }
  .reviews-top {
    display: grid; grid-template-columns: 1fr auto; gap: 3rem;
    align-items: flex-end; margin-bottom: 32px;
  }
  .reviews-header .eyebrow { margin-bottom: 12px; }
  .reviews-header h2 {
    font-family: 'Fraunces', serif; font-weight: 700; font-size: clamp(36px,5vw,56px);
    line-height: .96; letter-spacing: -.025em; color: var(--atb-silver); margin: 0 0 14px;
    font-variation-settings: '"opsz" 144, "SOFT" 50';
  }
  .reviews-header p { font-size: 16px; color: var(--fg-2); max-width: 480px; margin: 0; }
  .reviews-top-right {
    display: flex; flex-direction: column; align-items: flex-end; gap: 1.2rem; flex-shrink: 0;
  }
  .reviews-rating-badge {
    background: var(--atb-midnight-2); border: 1px solid var(--line-strong);
    border-radius: 10px; padding: .9rem 1.5rem; text-align: center; min-width: 130px;
  }
  .reviews-rating-number {
    display: block; font-family: 'Fraunces', serif; font-weight: 700; font-size: 2.6rem;
    color: var(--atb-silver); line-height: 1; font-variation-settings: '"opsz" 144, "SOFT" 50';
  }
  .reviews-rating-stars { display: block; color: #f59e0b; font-size: .9rem; letter-spacing: .08em; margin: .3rem 0 .25rem; }
  .reviews-rating-label {
    display: block; font-family: 'Syncopate', sans-serif; font-size: .58rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3);
  }
  .btn-leave-review {
    display: inline-block; background: transparent; color: var(--atb-silver);
    font-family: 'Syncopate', sans-serif; font-weight: 700; font-size: .68rem;
    letter-spacing: .1em; text-transform: uppercase;
    padding: .72rem 1.4rem; border-radius: 6px; cursor: pointer;
    text-decoration: none; transition: background .15s, border-color .15s;
    border: 1px solid var(--line-strong);
  }
  .btn-leave-review:hover { border-color: var(--atb-silver-2); background: rgba(255,255,255,.04); }
  .reviews-grid {
    display: flex; gap: 14px; position: relative;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .reviews-grid::-webkit-scrollbar { display: none; }
  @media (prefers-reduced-motion: reduce) {
    .reviews-grid { scroll-behavior: auto; }
  }
  .review-card {
    flex: 0 0 clamp(260px, 31.5%, 380px);
    height: 250px; scroll-snap-align: start;
    background: var(--atb-midnight-2); border: 1px solid var(--line);
    border-top: 2px solid var(--atb-red);
    border-radius: 10px; padding: 1.3rem 1.4rem 1.1rem;
    display: flex; flex-direction: column; gap: .5rem;
    position: relative; overflow: hidden; transition: border-color .2s;
    cursor: default;
  }
  .review-card:hover { border-color: var(--line-strong); }
  .review-card::before {
    content: '\201C';
    position: absolute; top: .1rem; right: .8rem;
    font-family: 'Fraunces', serif; font-size: 4.5rem; line-height: 1;
    color: var(--atb-red); opacity: .1; pointer-events: none;
    font-variation-settings: '"opsz" 144, "SOFT" 100';
  }
  .review-card.highlight {
    border-top-color: var(--atb-red-glow);
    background: var(--atb-midnight-3);
    box-shadow: 0 0 0 1px rgba(215,35,44,.15), inset 0 1px 0 rgba(255,255,255,.04);
  }
  .review-stars { color: #f59e0b; font-size: .85rem; letter-spacing: .08em; }
  .review-text {
    font-size: .875rem; color: var(--fg-2); line-height: 1.65; margin: 0;
    flex: 1; min-height: 0; overflow: hidden;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
  }
  .review-footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: .4rem; padding-top: .65rem; border-top: 1px solid var(--line);
  }
  .review-name {
    font-family: 'Syncopate', sans-serif; font-weight: 700; font-size: .62rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--atb-red);
  }
  .review-biz-tag {
    font-family: 'JetBrains Mono', monospace; font-size: .62rem;
    color: var(--fg-3); text-transform: uppercase; letter-spacing: .04em;
  }
  .reviews-empty { text-align: center; color: var(--fg-3); font-size: .95rem; padding: 2rem 0; }
  .reviews-controls {
    display: flex; align-items: center; justify-content: center;
    gap: 1rem; margin-top: 1.4rem;
  }
  .reviews-arrow {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 2.2rem; height: 2.2rem; border-radius: 50%;
    background: var(--atb-midnight-3); border: 1px solid var(--line);
    color: var(--atb-silver-2); font-size: 1.15rem; line-height: 1;
    transition: border-color .2s, color .2s;
  }
  .reviews-arrow:hover { border-color: var(--atb-silver-2); color: var(--atb-silver); }
  .reviews-arrow:focus-visible,
  .reviews-pagination button:focus-visible { outline: 2px solid var(--atb-red-glow); outline-offset: 2px; }
  .reviews-pagination {
    display: flex; justify-content: center; gap: .45rem; margin: 0; flex-wrap: wrap;
  }
  .reviews-pagination button {
    width: .5rem; height: .5rem; padding: 0; border: none; border-radius: 50%;
    background: var(--line-strong); cursor: pointer;
    transition: background .2s, transform .2s;
  }
  .reviews-pagination button:hover { background: var(--atb-silver-2); }
  .reviews-pagination button.active { background: var(--atb-red); transform: scale(1.3); }

  /* ---- Contact form section ---- */
  #contact {
    padding: 120px 56px; position: relative; overflow: hidden;
    background: var(--atb-midnight-2);
    border-top: 1px solid var(--line);
  }
  #contact::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 65% 40%, rgba(185,28,28,.09) 0%, transparent 55%);
  }
  .contact-inner {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: start;
  }
  .contact-left h2 {
    font-family: 'Fraunces', serif; font-weight: 700; font-size: clamp(32px,4vw,52px);
    line-height: .96; letter-spacing: -.025em; color: var(--atb-silver); margin: 0 0 1rem;
    font-variation-settings: '"opsz" 144, "SOFT" 50';
  }
  .contact-left p { color: var(--fg-2); font-size: 16px; margin-bottom: 2.5rem; line-height: 1.65; }
  .contact-info { display: flex; flex-direction: column; gap: .9rem; }
  .contact-item { display: flex; align-items: center; gap: .75rem; font-size: .9rem; color: var(--fg-2); }
  .contact-item-icon {
    width: 36px; height: 36px;
    background: rgba(215,35,44,.1); border: 1px solid rgba(215,35,44,.22);
    border-radius: 6px; display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
  }
  .contact-form-wrap {
    background: var(--atb-midnight-3); border: 1px solid var(--line);
    border-radius: 14px; padding: 2.5rem;
    box-shadow: 0 30px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(215,35,44,.06);
  }
  .contact-form-wrap h3 {
    font-family: 'Syncopate', sans-serif; font-size: .95rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--atb-silver); margin-bottom: 1.5rem;
  }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .form-group { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
  .form-group label {
    font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3);
  }
  .form-group input, .form-group select, .form-group textarea {
    background: var(--atb-midnight-2); border: 1.5px solid var(--line); border-radius: 6px;
    padding: .75rem 1rem; color: var(--fg); font-size: .95rem;
    outline: none; transition: border-color .2s, box-shadow .2s; width: 100%;
  }
  .form-group input::placeholder, .form-group textarea::placeholder { color: var(--fg-3); }
  .form-group select option { background: var(--atb-midnight-3); color: var(--fg); }
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--atb-red); box-shadow: 0 0 0 3px rgba(215,35,44,.14);
  }
  .form-group textarea { resize: vertical; min-height: 100px; }
  .time-picker { display: flex; gap: .6rem; }
  .time-picker select { flex: 1; }
  .form-group select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c2c6cf' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
  .btn-submit {
    width: 100%; padding: 1rem;
    background: var(--atb-red); color: #fff;
    font-family: 'Syncopate', sans-serif; font-size: .85rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    border: none; border-radius: 8px; cursor: pointer;
    box-shadow: 0 0 0 1px rgba(255,59,67,.4), 0 0 24px rgba(215,35,44,.3);
    transition: background .2s, transform .15s;
  }
  .btn-submit:hover { background: var(--atb-red-glow); transform: translateY(-1px); }

  /* ---- Responsive additions ---- */
  @media (max-width: 900px) {
    #detailed-pricing, #hosting, #reviews, #contact { padding: 80px 24px; }
    nav.site .links { display: none; }
    .nav-hamburger { display: flex; }
    .hosting-inner { grid-template-columns: 1fr; min-height: auto; }
    .hosting-text { padding: 2.5rem 0; }
    .hosting-visual { border-left: none; border-top: 1px solid var(--line); padding: 2.5rem 1.5rem; }
    .contact-inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .support-options { grid-template-columns: 1fr; }
    .support-option:first-child { border-right: none; border-bottom: 1px solid var(--line); }
    .reviews-top { grid-template-columns: 1fr; }
    .reviews-top-right { flex-direction: row; align-items: center; }
    #reviews { padding: 64px 24px; }
    .review-card { flex-basis: 46%; }
  }
  @media (max-width: 600px) {
    .form-row { grid-template-columns: 1fr; }
    #reviews { padding: 56px 20px; }
    .review-card { flex-basis: 84%; }
    .reviews-top-right { flex-direction: column; align-items: flex-start; }
  }

/* ============================================================
   Chat Assistants service page
   Concept: the page is a clock. Time is the spine.
   Inherits every token from the site. Adds no font, no color.
   ============================================================ */

  .svc-wrap { max-width: 1180px; margin: 0 auto; }

  /* ---------- Hero ---------- */
  section.svc-hero {
    padding: 118px 56px 72px;
    background: var(--atb-midnight);
    border-bottom: 1px solid var(--line);
    position: relative;
    overflow: hidden;
  }
  section.svc-hero .glow {
    position: absolute; top: -220px; left: 50%; transform: translateX(-50%);
    width: 760px; height: 520px; pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(215,35,44,.16), transparent 68%);
    filter: blur(30px);
  }
  .svc-hero .inner { position: relative; max-width: 860px; }
  .svc-hero .stamp {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px; font-weight: 600; letter-spacing: .12em;
    color: var(--atb-red-glow);          /* 5.4:1 on midnight. #D7232C would be 3.7:1 and fail. */
    margin-bottom: 22px; display: block;
  }
  .svc-hero h1 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(2.35rem, 5.2vw, 4rem);
    font-weight: 700; line-height: 1.08; letter-spacing: -.025em;
    color: #F5F6F8; margin: 0 0 22px;
  }
  .svc-hero h1 em {
    font-style: normal;
    background: linear-gradient(96deg, #FFDCDC 0%, #FFFFFF 46%, #FFD4D4 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .svc-hero .sub {
    font-size: 1.14rem; line-height: 1.62; color: #C2C6CF;
    max-width: 56ch; margin: 0 0 34px;
  }
  .svc-hero .actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

  /* Hero split: headline left, WhatsApp demo button on the right, level with the big title */
  .svc-hero .hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    gap: 44px;
    align-items: center;
  }

  /* WhatsApp demo button (right of the hero), links to the 1350 demo bot.
     Two-line card: dark text on WhatsApp green stays WCAG-safe (9.5:1), same
     rule as the .wa-btn button further down this file. */
  .svc-hero .wa-top {
    display: inline-flex; align-items: center; gap: 14px;
    max-width: 100%;
    padding: 16px 20px;
    margin: 0;
    background: #25d366; color: #0B141A;
    border-radius: 20px;
    font-family: 'Sora', sans-serif;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(37,211,102,.3);
    transition: transform .2s, box-shadow .2s;
  }
  .svc-hero .wa-top .ring {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 50%; background: #fff; flex-shrink: 0;
  }
  .svc-hero .wa-top-text {
    display: flex; flex-direction: column; gap: 4px;
  }
  .svc-hero .wa-top-title {
    font-weight: 700; font-size: 1.06rem; line-height: 1.2; letter-spacing: .005em;
    color: #0B141A;
  }
  .svc-hero .wa-top-sub {
    font-weight: 500; font-size: .85rem; line-height: 1.42;
    color: rgba(11,20,26,.82);
  }
  .svc-hero .wa-top:hover {
    transform: translateY(-2px); box-shadow: 0 12px 28px rgba(37,211,102,.46);
  }
  /* Under 900px the hero stacks: button drops below the headline block */
  @media (max-width: 900px) {
    .svc-hero .hero-layout { grid-template-columns: 1fr; gap: 26px; align-items: start; }
  }

  /* Chat Assistants only: emphasized headline line in brand red, not the pink-white gradient */
  .svc-hero h1 em.hero-red {
    background: none;
    -webkit-background-clip: initial; background-clip: initial;
    -webkit-text-fill-color: var(--atb-red-glow);
    color: var(--atb-red-glow);
  }

  /* ---------- The lost message: a clock you scroll through ---------- */
  section.thread { padding: 76px 56px; background: var(--atb-midnight-2); }
  .thread-head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
  .thread-head h2 {
    font-family: 'Sora', sans-serif; font-size: clamp(1.75rem, 3.4vw, 2.6rem);
    font-weight: 700; letter-spacing: -.02em; line-height: 1.16; color: #F5F6F8; margin: 0 0 14px;
  }
  .thread-head p { color: #C2C6CF; font-size: 1.05rem; line-height: 1.6; margin: 0; }

  .track { position: relative; max-width: 720px; margin: 0 auto; padding-left: 34px; }
  .track .rail {
    position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px;
    background: linear-gradient(180deg,
      var(--atb-red-glow) 0%,
      var(--atb-red) 12%,
      #4A2130 34%,
      var(--atb-steel) 52%,
      #4A2130 72%,
      var(--atb-red) 100%);
    opacity: .85;
  }
  .beat { position: relative; padding-bottom: 28px; }
  .beat .dot {
    position: absolute; left: -34px; top: 7px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--atb-midnight-2);
    border: 2px solid var(--atb-red-glow);
    transform: translateX(-4px);
  }
  .beat .dot.cold { border-color: var(--atb-steel); }
  .beat .time {
    font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600;
    letter-spacing: .1em; color: var(--atb-red-glow); display: block; margin-bottom: 10px;
  }
  .beat .time.cold { color: #9DA3B2; }   /* 6.0:1 on midnight-2 */
  .beat .who {
    font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: #9DA3B2; margin-bottom: 8px;
  }
  .msg {
    display: inline-block; max-width: 100%;
    padding: 15px 20px; border-radius: 16px;
    font-size: 1.02rem; line-height: 1.5;
    border: 1px solid var(--line-strong);
    background: var(--atb-midnight-3);
    color: #E8EAEE;
  }
  .msg.them { border-bottom-left-radius: 5px; }
  .msg.you {
    border-bottom-right-radius: 5px;
    background: rgba(215,35,44,.10); border-color: rgba(255,59,67,.34);
  }
  .beat .aside {
    margin-top: 12px; font-size: .95rem; color: #C2C6CF; line-height: 1.55; max-width: 46ch;
  }

  /* ---------- Keyboard focus ----------
     The secondary buttons had no focus ring at all: tab onto "See the levels" and
     nothing happened. Somebody navigating without a mouse was simply lost. This is
     one ring for everything focusable, in the red that is legal on text (5.4:1), and
     :focus-visible so a mouse click does not light it up. */
  a:focus-visible,
  button:focus-visible {
    outline: 2px solid var(--atb-red-glow);
    outline-offset: 3px;
    border-radius: 4px;
  }

  /* ---------- Touch ----------
     The language toggle was 23px tall. A finger needs 44. It matters more here than
     on most sites: half this audience reads in Spanish and that button is how they
     get there. */
  @media (pointer: coarse) {
    .btn-lang { min-height: 44px; padding-left: 14px; padding-right: 14px; }
    .nav-hamburger { min-width: 44px; min-height: 44px; }
    .mobile-close { min-width: 44px; min-height: 44px; }
  }

  /* The gap: dead vertical space you have to scroll through.

     This block used to show the elapsed time as a big monospaced number: "1:47"
     over the word HOURS. It read as 1:47 in the afternoon, because it sits between
     10:15 AM and 12:02 PM and wore exactly the same clothes as they do. A duration
     and a clock reading are different things and they must not look alike.

     Worse, the number was the wrong subject. Minutes are not the argument. What
     happened during those minutes is. So the gap no longer counts time. It says
     what it cost, and the only number left on the rail is a real hour on a clock. */
  .silence {
    position: relative; padding: 14px 0;
    min-height: 30vh; display: flex; flex-direction: column;
    align-items: flex-start; justify-content: center;
  }
  .silence .tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    color: #9DA3B2; margin-bottom: 16px;
  }
  .silence .hit {
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-weight: 600;
    line-height: 1.35; letter-spacing: -.01em;
    color: #F5F6F8; max-width: 30ch;
  }
  .silence .hit em { font-style: normal; color: var(--atb-red-glow); }
  .silence .note {
    font-family: 'Caveat', cursive; font-size: 1.5rem; color: var(--atb-red-glow);
    margin-top: 20px; transform: rotate(-1.4deg);
  }

  /* ---------- Four businesses, one minute ---------- */
  section.faces { padding: 76px 56px; background: var(--atb-midnight); }
  .faces-head { max-width: 760px; margin: 0 auto 42px; text-align: center; }
  .faces-head .eyebrow {
    font-family: 'Syncopate', sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: .22em; text-transform: uppercase; color: #F5F6F8;
    border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
    padding: 7px 16px; display: inline-block; margin-bottom: 20px;
  }
  .faces-head h2 {
    font-family: 'Sora', sans-serif; font-size: clamp(1.75rem, 3.4vw, 2.6rem);
    font-weight: 700; letter-spacing: -.02em; line-height: 1.16; color: #F5F6F8; margin: 0 0 14px;
  }
  .faces-head p { color: #C2C6CF; font-size: 1.05rem; line-height: 1.6; margin: 0; }

  /* flex-wrap + center: last row centers, never an orphan pinned left (HBD-007) */
  .faces-grid {
    display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; align-items: stretch;
  }
  .faces-grid > .face { flex: 0 1 calc((100% - 20px) / 2); min-width: 0; }
  .face {
    display: flex; flex-direction: column; overflow: hidden;
    padding: 0 0 22px; border-radius: 16px;
    background: var(--atb-midnight-2); border: 1px solid var(--line);
    transition: border-color .25s cubic-bezier(.16,1,.3,1), transform .25s cubic-bezier(.16,1,.3,1);
  }
  .face:hover { border-color: var(--line-strong); transform: translateY(-3px); }
  @media (prefers-reduced-motion: reduce) { .face:hover .shot img { transform: none; } }
  .face .shot {
    position: relative; overflow: hidden;
    aspect-ratio: 16 / 9; background: var(--atb-midnight-3);
  }
  .face .shot img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: saturate(.92) contrast(1.04);
    transition: transform .5s cubic-bezier(.16,1,.3,1);
  }
  .face:hover .shot img { transform: scale(1.03); }
  /* The photo fades into the card instead of sitting on it like a sticker. */
  .face .shot::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(7,11,38,0) 42%, rgba(7,11,38,.72) 82%, var(--atb-midnight-2) 100%);
  }
  .face .body { padding: 0 26px; }

  .face .kicker {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    margin: -26px 0 12px; position: relative;
  }
  .face .when {
    font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 600;
    letter-spacing: .08em; color: var(--atb-red-glow);
  }
  .face h3 {
    font-family: 'Sora', sans-serif; font-size: 1.22rem; font-weight: 600;
    letter-spacing: -.01em; color: #F5F6F8; margin: 0;
  }
  .face .scene { color: #C2C6CF; font-size: .98rem; line-height: 1.58; margin: 0 0 16px; }
  .face .cost {
    margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
    font-size: 1rem; line-height: 1.55; color: #F5F6F8; font-weight: 500;
  }

  /* ---------- Serial vs parallel ---------- */
  section.parallel {
    padding: 78px 56px; background: var(--atb-midnight-2);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
  .par-inner {
    max-width: 1040px; margin: 0 auto;
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center;
  }
  .par-copy blockquote {
    margin: 0 0 22px; font-family: 'Fraunces', serif;
    font-size: clamp(1.6rem, 3.1vw, 2.3rem); font-weight: 500; line-height: 1.28;
    letter-spacing: -.01em; color: #F5F6F8;
  }
  /* The first half is the fact. The second half is the point. Only the point is red. */
  .par-copy blockquote span + span { color: var(--atb-red-glow); }
  .par-copy p { color: #C2C6CF; font-size: 1.05rem; line-height: 1.65; margin: 0; max-width: 44ch; }
  .par-viz { display: flex; justify-content: center; }
  .par-viz svg { width: 100%; max-width: 380px; height: auto; }

  /* ---------- What it does ---------- */
  section.does { padding: 76px 56px; background: var(--atb-midnight); }
  .does-head { max-width: 720px; margin: 0 auto 40px; }
  .does-head h2 {
    font-family: 'Sora', sans-serif; font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-weight: 700; letter-spacing: -.02em; line-height: 1.18; color: #F5F6F8; margin: 0 0 14px;
  }
  .does-head p { color: #C2C6CF; font-size: 1.05rem; line-height: 1.62; margin: 0; }
  /* Six identical boxes with an icon on top is the laziest grid there is, and it
     is the first thing that reads as machine made. No boxes. Two columns, hairlines,
     the red numeral doing the work the box used to do. */
  .does-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    column-gap: 56px; row-gap: 0;
    max-width: 980px; margin: 0 auto;
  }
  .do {
    display: grid; grid-template-columns: auto 1fr; column-gap: 18px;
    padding: 22px 0; border-top: 1px solid var(--line);
  }
  .do .n {
    font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
    letter-spacing: .06em; color: var(--atb-red-glow); padding-top: 4px;
  }
  .do h3 {
    font-family: 'Sora', sans-serif; font-size: 1.02rem; font-weight: 600;
    color: #F5F6F8; margin: 0 0 6px; letter-spacing: -.01em;
  }
  .do p { color: #C2C6CF; font-size: .95rem; line-height: 1.55; margin: 0; }

  /* ---------- Pricing: three levels of intelligence, not three grey boxes ---------- */
  section.svc-pricing {
    padding: 82px 56px; background: var(--atb-midnight-2); border-top: 1px solid var(--line);
  }
  .svc-pricing .ph { max-width: 760px; margin: 0 auto 48px; text-align: center; }
  .svc-pricing .ph h2 {
    font-family: 'Sora', sans-serif; font-size: clamp(1.85rem, 3.5vw, 2.7rem);
    font-weight: 700; letter-spacing: -.025em; line-height: 1.14; color: #F5F6F8; margin: 0 0 16px;
  }
  .svc-pricing .ph p { color: #C2C6CF; font-size: 1.08rem; line-height: 1.6; margin: 0; }

  .plans {
    display: flex; flex-wrap: wrap; gap: 22px; justify-content: center;
    align-items: stretch; max-width: 1180px; margin: 0 auto;
  }
  .plans > .plan { flex: 0 1 calc((100% - 44px) / 3); min-width: 0; }

  .plan {
    display: flex; flex-direction: column;
    padding: 34px 30px 30px; border-radius: 16px;
    background: var(--atb-midnight); border: 1px solid var(--line);
    transition: border-color .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1);
  }
  .plan:hover { border-color: var(--line-strong); transform: translateY(-4px); }

  /* Level three is the one that thinks. Let it look like it. */
  .plan.top {
    border-color: rgba(255,59,67,.42);
    background:
      linear-gradient(180deg, rgba(215,35,44,.13) 0%, rgba(215,35,44,0) 46%),
      var(--atb-midnight);
    box-shadow: 0 0 0 1px rgba(255,59,67,.08), 0 18px 50px rgba(215,35,44,.10);
  }
  .plan.top:hover { border-color: var(--atb-red-glow); }

  .plan .lvl {
    font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
    letter-spacing: .16em; color: #9DA3B2; display: block; margin-bottom: 14px;
  }
  .plan.top .lvl { color: var(--atb-red-glow); }
  .plan h3 {
    font-family: 'Sora', sans-serif; font-size: 1.62rem; font-weight: 700;
    letter-spacing: -.02em; color: #F5F6F8; margin: 0 0 10px; line-height: 1.16;
  }
  .plan .who {
    font-size: 1rem; line-height: 1.55; color: #C2C6CF; margin: 0 0 24px; min-height: 3.1em;
  }

  .plan ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 13px; }
  .plan li {
    display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start;
    font-size: 1rem; line-height: 1.5; color: #E8EAEE;
  }
  .plan li::before {
    content: ''; width: 7px; height: 7px; margin-top: .48em; border-radius: 50%;
    background: var(--atb-steel);
  }
  .plan.top li::before { background: var(--atb-red-glow); }

  .plan .hours {
    margin-top: auto; padding: 15px 18px; border-radius: 10px;
    background: rgba(255,255,255,.035); border: 1px solid var(--line);
    font-size: .95rem; line-height: 1.5; color: #C2C6CF;
  }
  .plan .hours strong {
    display: block; font-family: 'JetBrains Mono', monospace; font-size: 12px;
    font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: #F5F6F8; margin-bottom: 6px;
  }
  .plan .cta {
    display: block; margin-top: 20px; text-align: center;
    padding: 14px 20px; border-radius: 10px;
    font-family: 'Sora', sans-serif; font-size: .98rem; font-weight: 600;
    letter-spacing: .01em; text-decoration: none;
    color: #F5F6F8; background: transparent;
    border: 1px solid rgba(255,255,255,.24);
    transition: background .22s ease, border-color .22s ease, transform .22s ease;
  }
  .plan .cta:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.5); }
  .plan .cta:active { transform: scale(.985); }
  .plan.top .cta {
    background: var(--atb-red); border-color: var(--atb-red); color: #fff;
  }
  .plan.top .cta:hover { background: var(--atb-red-glow); border-color: var(--atb-red-glow); }

  /* ---------- Final CTA: the site's .display runs too large for this headline
       and snaps "AM." onto its own line. Bring it down, keep the times intact. --- */
  section.cta .display { font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.15; }
  section.cta .display .nb { white-space: nowrap; }

  /* ---------- The one we run ---------- */
  section.ours { padding: 72px 56px; background: var(--atb-midnight); }
  .ours-inner {
    max-width: 780px; margin: 0 auto; text-align: center;
    padding: 40px 40px; border-radius: 16px;
    background: var(--atb-midnight-2); border: 1px solid var(--line-strong);
  }
  .ours-inner h2 {
    font-family: 'Sora', sans-serif; font-size: clamp(1.55rem, 3vw, 2.15rem);
    font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: #F5F6F8; margin: 0 0 16px;
  }
  .ours-inner p {
    color: #C2C6CF; font-size: 1.06rem; line-height: 1.65; margin: 0 auto 30px; max-width: 52ch;
  }
  /* WhatsApp green with white text is 2.0:1 and fails WCAG badly. Same green, dark
     label, 9.5:1. The brand colour survives, the text becomes readable. */
  .wa-btn {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 8px 26px 8px 8px; background: #25d366; color: #0B141A;
    border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none;
    box-shadow: 0 4px 14px rgba(37,211,102,.35);
    transition: transform .2s, box-shadow .2s; font-family: inherit; letter-spacing: .01em;
  }
  .wa-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(37,211,102,.5); }
  .wa-btn .ring {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; background: #fff; flex-shrink: 0;
  }

  /* ---------- Motion: entry reveals only. No scroll-jacking. ----------
     Content is visible by default. Only once JS is alive does it hide itself
     to animate in. If the script dies, the page still reads. Never make text
     depend on JavaScript to be seen. */
  html.js-anim .reveal { opacity: 0; transform: translateY(22px); }

  /* ---------- Responsive ---------- */
  @media (max-width: 1000px) {
    .plans > .plan { flex: 0 1 calc((100% - 22px) / 2); }
    .plan .who { min-height: 0; }
    .par-inner { grid-template-columns: 1fr; gap: 40px; }
    .par-viz { order: -1; }
  }
  @media (max-width: 900px) {
    section.svc-hero { padding: 104px 24px 60px; }
    section.thread, section.faces, section.parallel,
    section.does, section.svc-pricing, section.ours { padding: 58px 24px; }
  }
  @media (max-width: 760px) {
    .plans > .plan { flex: 1 1 100%; }
    .faces-grid > .face { flex: 1 1 100%; }
    .does-grid { grid-template-columns: 1fr; column-gap: 0; }
    .ours-inner { padding: 40px 24px; }
    .silence { min-height: 38vh; }
  }
  @media (prefers-reduced-motion: reduce) {
    html.js-anim .reveal { opacity: 1 !important; transform: none !important; }
    .face:hover, .wa-btn:hover { transform: none; }
  }

  /* The six nav links stop fitting at about 1200px, in English and worse in Spanish,
     but the site only reaches for the hamburger at 900. That 300px gap is where the
     menu crushes itself against the logo. Hand over to the hamburger earlier. */
  @media (max-width: 1200px) {
    nav.site .links { display: none; }
    .nav-hamburger { display: flex; }
  }