/* ------------------------------------------------------------------
     SUERKEN LAW — single-theme (dark) brand site
     Palette
  ------------------------------------------------------------------ */
  :root {
    color-scheme: dark;
    --ink: #0A0B0F;        /* page ground */
    --ink-2: #12141B;      /* alternating band */
    --ink-3: #1A1D27;      /* raised panel */
    --line: #2A2E3B;
    --paper: #FFFFFF;
    --paper-2: #E9EBF2;
    --muted: #A6ACBF;
    --royal: #2A4BD7;      /* fills, buttons */
    --royal-hi: #5A80FF;   /* accent text on dark (4.5:1+ on every panel) */
    --royal-deep: #1B348F; /* hover */
    --royal-glow: rgba(90,128,255,.28);
    --display: "Oswald", "Arial Narrow", Impact, sans-serif;
    --body: "Roboto", "Helvetica Neue", Arial, sans-serif;
    --container: 1200px;
    --gutter: clamp(16px, 4vw, 40px);
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
  body {
    margin: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; }
  img, svg { max-width: 100%; }
  h1, h2, h3, h4 { font-family: var(--display); text-transform: uppercase; line-height: 1.05; margin: 0; text-wrap: balance; }
  p { margin: 0; }
  :focus-visible { outline: 3px solid var(--royal-hi); outline-offset: 3px; }
  .wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
  .band { padding-block: clamp(56px, 8vw, 104px); }
  .band--alt { background: var(--ink-2); }
  .band--panel { background: var(--ink-3); }

  /* Section heading pattern: eyebrow + two-weight H2 + short blue rule */
  .eyebrow { font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: .18em; font-size: 13px; color: var(--royal-hi); }
  .h2 { font-size: clamp(34px, 4.6vw, 58px); font-weight: 300; letter-spacing: .01em; margin-top: 10px; }
  .h2 b { font-weight: 700; }
  .rule { width: 72px; height: 5px; background: var(--royal); margin-top: 18px; }
  .sec-head { display: grid; gap: 0; margin-bottom: clamp(32px, 4vw, 56px); }
  .sec-head.center { text-align: center; justify-items: center; }
  .lede { color: var(--muted); max-width: 66ch; font-size: 18px; margin-top: 18px; }
  .sec-head.center .lede { margin-inline: auto; }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; font-size: 15px;
    padding: 15px 28px; border: 2px solid var(--royal); background: var(--royal); color: #fff; text-decoration: none; border-radius: 3px;
    transition: background .18s ease, border-color .18s ease, transform .18s ease; cursor: pointer; line-height: 1.15; text-align: center; max-width: 100%;
  }
  .topbar .btn, header.site .btn { white-space: nowrap; }
  .btn:hover { background: var(--royal-deep); border-color: var(--royal-deep); transform: translateY(-1px); }
  .btn--ghost { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
  .btn--ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; }
  .btn--sm { padding: 11px 18px; font-size: 13px; }
  .btn--lg { padding: 18px 36px; font-size: 17px; }
  .textlink { color: var(--royal-hi); text-decoration: none; font-weight: 500; }
  .textlink:hover { text-decoration: underline; }

  /* ------------------------------------------------------------------ Header */
  .topbar { background: #000; border-bottom: 1px solid var(--line); font-size: 13.5px; }
  .topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
  .topbar .promise { color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; }
  .topbar .promise span + span::before { content: "·"; margin-right: 14px; color: var(--royal-hi); }
  .topbar .callnow { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
  .topbar .callnow a.phone { color: #fff; font-weight: 700; text-decoration: none; font-size: 15px; }
  .topbar .callnow a.phone b { color: var(--royal-hi); font-weight: 400; margin-right: 6px; }
  header.site { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(10,11,15,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
  header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 78px; }
  header.site { overflow-x: clip; }
  header.site .logo, nav.main, .hdr-cta { flex: none; }
  @media (max-width: 1320px) { nav.main > a, nav.main > .dd > button { font-size: 13px; padding: 12px 8px; letter-spacing: .06em; } }
  .logo { display: inline-flex; align-items: baseline; gap: 0; text-decoration: none; font-family: var(--display); text-transform: uppercase; line-height: 1; white-space: nowrap; }
  .logo .a, .logo .b { font-weight: 700; font-size: 30px; letter-spacing: .02em; }
  .logo .a { color: var(--royal-hi); }
  .logo .b { color: #fff; }
  .logo .c { font-weight: 500; font-size: 12px; letter-spacing: .2em; color: #fff; margin-left: 9px; }
  nav.main { display: flex; align-items: center; gap: 4px; }
  nav.main > a, nav.main > .dd > button {
    font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: 14px; font-weight: 500;
    color: #fff; text-decoration: none; padding: 12px 11px; background: none; border: 0; cursor: pointer; border-bottom: 3px solid transparent; transition: border-color .15s; white-space: nowrap;
  }
  nav.main > a:hover, nav.main > .dd:hover > button, nav.main > .dd > button[aria-expanded="true"] { border-bottom-color: var(--royal); }
  nav.main > a.es { color: var(--royal-hi); }
  .dd { position: relative; }
  .dd-menu { position: absolute; top: 100%; left: 0; min-width: 260px; background: var(--ink-3); border: 1px solid var(--line); border-top: 3px solid var(--royal); display: none; padding: 8px 0; box-shadow: 0 20px 40px rgba(0,0,0,.5); }
  .dd:hover .dd-menu, .dd:focus-within .dd-menu, .dd.open .dd-menu { display: block; }
  .dd-menu a { display: block; padding: 11px 18px; text-decoration: none; font-size: 15px; color: var(--paper-2); }
  .dd-menu a:hover { background: rgba(76,116,255,.12); color: #fff; }
  .hdr-cta { display: flex; align-items: center; gap: 12px; }
  .burger { display: none; background: none; border: 1px solid var(--line); color: #fff; width: 44px; height: 44px; border-radius: 3px; cursor: pointer; font-size: 22px; line-height: 1; }
  .mobile-nav { display: none; background: var(--ink-2); border-bottom: 1px solid var(--line); }
  .mobile-nav.open { display: block; }
  .mobile-nav a { display: block; padding: 14px var(--gutter); border-top: 1px solid var(--line); text-decoration: none; font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: 15px; }
  .mobile-nav a.sub { padding-left: calc(var(--gutter) + 18px); font-family: var(--body); text-transform: none; letter-spacing: 0; color: var(--paper-2); font-size: 15px; }
  @media (max-width: 420px) {
    .topbar .wrap { gap: 8px; }
    .topbar .callnow { gap: 8px; min-width: 0; }
    .topbar .callnow a.phone { font-size: 14px; }
    .topbar .btn--sm { padding: 10px 12px; font-size: 12px; }
  }
  @media (max-width: 1180px) {
    nav.main, .hdr-cta .btn { display: none; }
    .burger { display: inline-block; }
    .topbar .promise { display: none; }
  }

  /* ------------------------------------------------------------------ Hero */
  .hero { position: relative; overflow: hidden; background: radial-gradient(1200px 600px at 80% 20%, rgba(42,75,215,.28), transparent 60%), linear-gradient(180deg, #0D0F16 0%, var(--ink) 100%); border-bottom: 1px solid var(--line); }
  .hero { --form-w: 350px; --spacer-w: 280px; --hero-gap: 28px; --photo-h: 620px; }
  @media (max-width: 1300px) { .hero { --form-w: 330px; --spacer-w: 250px; --hero-gap: 24px; --photo-h: 580px; } }
  .hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) var(--spacer-w) var(--form-w); gap: var(--hero-gap); align-items: center; padding-block: clamp(48px, 7vw, 104px); }
  /* Jimmy in the masthead: anchored to the spacer column, bleeding right, edges feathered into the black */
  .hero-photo { position: absolute; z-index: 0; bottom: 0; width: 0; right: calc(max(0px, (100% - var(--container)) / 2) + var(--gutter) + var(--form-w) + var(--hero-gap) + var(--spacer-w) / 2); pointer-events: none; }
  .hero-photo img { position: absolute; bottom: 0; left: 0; transform: translateX(-50%); height: var(--photo-h); width: auto; max-width: none; display: block;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 15%, #000 74%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 15%, #000 74%, transparent 100%);
    mask-composite: intersect; }
  @media (min-width: 1100px) {
    .hero-form { grid-column: 3; }
    /* fill the masthead's height and stay centred in it, whatever the copy does */
    .hero-photo { top: 0; }
    .hero-photo img { top: 50%; bottom: auto; transform: translate(-50%, -50%); height: clamp(500px, 100%, var(--photo-h)); }
  }
  .hero .kicker { font-family: var(--display); text-transform: uppercase; letter-spacing: .2em; font-size: 13px; color: var(--muted); }
  .hero h1 { font-size: clamp(42px, 6.4vw, 84px); font-weight: 700; margin-top: 14px; }
  .hero h1 .light { font-weight: 300; display: block; font-size: .72em; letter-spacing: .02em; color: var(--paper-2); }
  .tagline { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--royal-hi); font-size: clamp(18px, 2.2vw, 26px); margin-top: 18px; display: inline-flex; align-items: center; gap: 14px; }
  .tagline::before { content: ""; width: 34px; height: 5px; background: var(--royal); }
  .hero p.intro { color: var(--paper-2); max-width: 56ch; font-size: 19px; margin-top: 22px; }
  .hero .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
  .hero .badges { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; color: var(--muted); font-size: 14px; }
  .hero .badges span::before { content: "✓"; color: var(--royal-hi); margin-right: 8px; font-weight: 700; }
  /* Free case review card (masthead) */
  .hero-form { background: rgba(18,20,27,.94); border: 1px solid var(--line); border-top: 5px solid var(--royal); padding: clamp(20px, 2.4vw, 30px); box-shadow: 0 30px 70px rgba(0,0,0,.5); }
  .hero-form h2 { font-size: clamp(24px, 2.2vw, 30px); font-weight: 700; }
  .hero-form .note { color: var(--muted); font-size: 14px; margin-top: 8px; line-height: 1.45; }
  .hero-form form { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .hero-form .field input, .hero-form .field select { padding: 12px 12px; font-size: 15px; }
  .hero-form .field label { font-size: 11.5px; }
  .hero-form .submit { grid-column: 1 / -1; display: grid; gap: 10px; margin-top: 4px; }
  .hero-form .submit .btn { width: 100%; white-space: normal; }
  .hero-form .fine { text-align: center; color: var(--muted); font-size: 13px; }
  .hero-form .fine a { color: var(--royal-hi); text-decoration: none; }
  .hero-form .form-msg { grid-column: 1 / -1; }
  /* Stacked layout: photo sits top-right, headline starts over the faded shoulders, form follows */
  @media (max-width: 1099px) {
    .hero { --photo-h: clamp(360px, 105vw, 480px); }
    .hero .wrap { grid-template-columns: minmax(0, 1fr); padding-top: calc(var(--photo-h) - 70px); }
    .hero-photo { top: 0; bottom: auto; right: 0; }
    .hero-photo img { top: 0; bottom: auto; left: auto; right: 0; transform: none;
      -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%), linear-gradient(to bottom, transparent 0%, #000 8%, #000 55%, transparent 97%);
      mask-image: linear-gradient(to right, transparent 0%, #000 38%), linear-gradient(to bottom, transparent 0%, #000 8%, #000 55%, transparent 97%); }
    .hero-form { max-width: 560px; }
  }
  @media (min-width: 700px) and (max-width: 1099px) {
    .hero .wrap { padding-top: calc(var(--photo-h) * .46); }
    /* keep the copy clear of the face while they sit side by side */
    .hero .wrap > div:first-child { max-width: calc(100% - var(--photo-h) * .42); }
  }
  @media (max-width: 480px) { .hero-form form { grid-template-columns: minmax(0, 1fr); } }

  /* ------------------------------------------------------------------ Straight answers (replaces verdict tiles) */
  .tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: var(--line); border: 1px solid var(--line); }
  .tile { background: var(--ink); padding: clamp(24px, 3vw, 40px) clamp(20px, 2.4vw, 32px); display: grid; align-content: start; gap: 12px; }
  .tile .q { font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: 13px; color: var(--muted); }
  .tile .big { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.05; color: #fff; }
  /* The tile headline is the answer - "Nothing up front", "You can still
     recover". It was split across white and royal mid-sentence, which on a
     near-black panel reads as two disconnected fragments rather than one
     statement, and royal on ink is the weakest contrast pair in the palette.
     The headline is the message: one colour, one weight, full stop. */
  .tile .big em { font-style: normal; color: inherit; }
  .tile p { color: var(--paper-2); font-size: 15.5px; }
  @media (max-width: 960px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 520px) { .tiles { grid-template-columns: 1fr; } }
  .after { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 44px); }

  /* ------------------------------------------------------------------ The Suerken Way */
  .way { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
  .way .promise-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
  .way .promise-list li { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
  .way .promise-list .ic { width: 56px; height: 56px; border: 2px solid var(--royal); display: grid; place-items: center; color: var(--royal-hi); }
  .way .promise-list .ic svg { width: 26px; height: 26px; }
  .way .promise-list b { font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; font-size: 19px; display: block; }
  .way .promise-list span { color: var(--muted); font-size: 15px; }
  .way blockquote { margin: 0; font-size: clamp(20px, 2.1vw, 26px); line-height: 1.45; color: var(--paper-2); border-left: 5px solid var(--royal); padding-left: 24px; }
  @media (max-width: 860px) { .way { grid-template-columns: 1fr; } }

  /* ------------------------------------------------------------------ Why choose — 3 big stats + credentials strip */
  .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; text-align: center; }
  .stat { padding: 32px 20px; border-top: 5px solid var(--royal); background: var(--ink); }
  .stat .n { font-family: var(--display); font-weight: 700; font-size: clamp(46px, 5.6vw, 76px); line-height: 1; color: #fff; white-space: nowrap; }
  .stat .n.txt { font-size: clamp(36px, 4.2vw, 58px); padding-top: .18em; }
  .stat .l { font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: 15px; color: var(--royal-hi); margin-top: 8px; }
  .stat p { color: var(--muted); font-size: 15px; margin-top: 10px; }
  @media (max-width: 760px) { .stats { grid-template-columns: 1fr; } }
  .creds { margin-top: clamp(40px, 6vw, 72px); text-align: center; }
  .creds h3 { font-size: 15px; letter-spacing: .22em; color: var(--muted); font-weight: 500; }
  .cred-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
  .cred { border: 1px solid var(--line); padding: 14px 22px; display: grid; gap: 2px; min-width: 180px; background: var(--ink); }
  .cred b { font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; font-size: 17px; }
  .cred span { color: var(--muted); font-size: 13.5px; }

  /* ------------------------------------------------------------------ Meet Jimmy (portrait + letter) */
  .meet { display: grid; grid-template-columns: minmax(280px, 440px) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
  .portrait { position: sticky; top: calc(96px + env(safe-area-inset-top, 0px)); aspect-ratio: 4 / 5; max-width: 100%; border: 1px solid var(--line); background: var(--ink-3); overflow: hidden; }
  .portrait::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(76,116,255,.45); pointer-events: none; }
  .portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
  .portrait .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 26px 24px; background: linear-gradient(0deg, rgba(10,11,15,.96) 0%, rgba(10,11,15,.75) 55%, rgba(10,11,15,0) 100%); }
  .portrait .cap b { font-family: var(--display); text-transform: uppercase; font-size: 28px; font-weight: 700; display: block; letter-spacing: .02em; }
  .portrait .cap span { color: var(--royal-hi); font-family: var(--display); text-transform: uppercase; letter-spacing: .14em; font-size: 12.5px; }
  .letter h2 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 300; }
  .letter h2 b { font-weight: 700; }
  .letter .body { margin-top: 24px; display: grid; gap: 18px; font-size: 17.5px; color: var(--paper-2); max-width: 66ch; }
  .letter .body strong { color: #fff; }
  .letter .sig { margin-top: 26px; display: grid; gap: 4px; }
  .letter .sig .line { font-family: var(--display); text-transform: uppercase; font-size: 24px; font-weight: 700; letter-spacing: .04em; color: var(--royal-hi); }
  .letter .sig .sub { color: var(--muted); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; font-family: var(--display); }
  @media (max-width: 900px) { .meet { grid-template-columns: 1fr; } .portrait { position: relative; top: auto; max-width: 440px; } }

  /* ------------------------------------------------------------------ Road to justice (true sequence → numbered) */
  .road { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: step; }
  .step { position: relative; padding: 28px 24px 28px; background: var(--ink-3); border: 1px solid var(--line); border-top: 4px solid var(--royal); display: grid; gap: 10px; align-content: start; }
  .step .when { font-family: var(--display); text-transform: uppercase; letter-spacing: .14em; font-size: 12.5px; color: var(--royal-hi); }
  .step h3 { font-size: 24px; font-weight: 600; }
  .step p { color: var(--paper-2); font-size: 15.5px; }
  .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; top: 14px; right: 18px; font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1; color: rgba(255,255,255,.07); }
  /* The last card is always the call. The three before it are things only the
     client can do; anything that means contacting an insurer, an employer or
     an agency is the firm's job, and this card is where that hand-off happens.
     Filled royal so it reads as the action, not as a fourth piece of advice. */
  .step--call { background: var(--royal); border-color: var(--royal); border-top-color: #fff; }
  .step--call .when { color: rgba(255,255,255,.75); }
  .step--call h3, .step--call p { color: #fff; }
  .step--call p { color: rgba(255,255,255,.9); }
  .step--call::before { color: rgba(255,255,255,.16); }
  .step--call .tel { font-family: var(--display); font-size: 25px; font-weight: 700; letter-spacing: .01em; color: #fff; text-decoration: none; border-bottom: 2px solid rgba(255,255,255,.45); padding-bottom: 2px; justify-self: start; transition: border-color .16s; }
  .step--call .tel:hover { border-bottom-color: #fff; }
  /* Answer pages label every card: the reader's step, or the firm's job.
     Firm cards get a pale top edge so the two read differently at a glance. */
  .step .when .own { color: var(--paper); }
  .step .when:has(.own) { padding-right: 56px; }
  .step--we { border-top-color: var(--paper-2); }
  .step--we .when { color: var(--muted); }
  .step--call .when .own { color: #fff; }
  @media (max-width: 1000px) { .road { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .road { grid-template-columns: 1fr; } }

  /* ------------------------------------------------------------------ Practice areas */
  .areas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: var(--line); border: 1px solid var(--line); }
  /* flex column rather than grid so the CTA pins to the bottom of the card:
     in a row of cards whose questions run to different lengths, a grid packs
     every "Read the answer" to a different height and the row reads ragged. */
  .area { background: var(--ink-2); padding: 34px 26px 30px; text-decoration: none; display: flex; flex-direction: column; gap: 14px; position: relative; transition: background .18s; }
  .area:hover { background: #171A24; }
  .area::after { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 5px; background: var(--royal); transition: width .25s ease; }
  .area:hover::after { width: 100%; }
  .area .ic { width: 52px; height: 52px; color: var(--royal-hi); }
  .area .ic svg { width: 52px; height: 52px; }
  .area h3 { font-size: 26px; font-weight: 600; }
  .area p { color: var(--paper-2); font-size: 15.5px; }
  .area .more { font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: 13px; color: var(--royal-hi); margin-top: auto; padding-top: 10px; }
  .area .more::after { content: " \2192"; }
  /* category eyebrow, matching .post .meta .cat so an answer card reads the
     same way whether it sits on the hub or in a practice page's cluster */
  .area .cat { font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; color: var(--royal-hi); }
  .area .cat + h3 { margin-top: -4px; }
  @media (max-width: 1000px) { .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .areas { grid-template-columns: 1fr; } }

  /* ------------------------------------------------------------------ Where we work */
  .cities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .city { background: var(--ink); border: 1px solid var(--line); padding: clamp(24px, 3vw, 40px); display: grid; gap: 16px; align-content: start; }
  .city .top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
  .city h3 { font-size: clamp(28px, 3vw, 38px); font-weight: 700; }
  .city h3 small { display: block; font-weight: 300; font-size: .55em; letter-spacing: .08em; color: var(--muted); }
  .city .quote { font-size: 18px; color: var(--paper-2); border-left: 4px solid var(--royal); padding-left: 16px; }
  .city dl { margin: 0; display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; font-size: 15px; }
  .city dt { font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; color: var(--royal-hi); padding-top: 3px; }
  .city dd { margin: 0; color: var(--paper-2); }
  @media (max-width: 860px) { .cities { grid-template-columns: 1fr; } }

  /* ------------------------------------------------------------------ Answers feed (blog motif) */
  .feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .post { background: var(--ink-2); border: 1px solid var(--line); padding: 28px 26px; display: grid; gap: 14px; align-content: start; text-decoration: none; transition: border-color .18s; }
  .post:hover { border-color: var(--royal-hi); }
  .post .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
  .post .meta .cat { font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; color: var(--royal-hi); font-size: 12.5px; }
  .post .meta .cat::after { content: "|"; color: var(--line); margin-left: 10px; }
  .post h3 { font-size: 24px; font-weight: 600; text-transform: none; line-height: 1.2; }
  .post .cta { font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: 13px; color: #fff; }
  .post .cta::after { content: " →"; color: var(--royal-hi); }
  /* question headings that link to their own answer page */
  .post .q a.qlink { color: inherit; text-decoration: none; }
  .post .q a.qlink:hover { color: var(--royal-hi); }
  /* Answer library list: the question reads as a headline - uppercase,
     display face, no underline - matching the card headings elsewhere. */
  .qa .post h3.q { text-transform: uppercase; font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: .01em; }
  .qa .post h3.q a.qlink { text-decoration: none; }
  /* The nine secondary questions. They were bare text rows with the category
     floated to the right edge, which read as an unfinished list sitting under
     three finished cards. Same surface, border and royal uppercase category as
     .post, just tighter and without the CTA line - a smaller sibling of the
     featured cards rather than a different species. */
  .more-answers { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .more-answers a { background: var(--ink-2); border: 1px solid var(--line); padding: 18px 20px; display: grid; gap: 9px; align-content: start; text-decoration: none; transition: border-color .18s, background .18s; }
  .more-answers a:hover { border-color: var(--royal-hi); background: var(--ink-3); }
  .more-answers a small { font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: 11.5px; color: var(--royal-hi); }
  .more-answers a span { font-size: 16.5px; line-height: 1.3; color: var(--paper-2); font-weight: 500; }
  .more-answers a:hover span { color: #fff; }
  @media (max-width: 960px) { .feed, .more-answers { grid-template-columns: 1fr; } }

  /* ------------------------------------------------------------------ FAQ accordion */
  .faq { max-width: 880px; margin-inline: auto; border-top: 1px solid var(--line); }
  .faq details { border-bottom: 1px solid var(--line); }
  .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 4px; font-family: var(--display); font-size: 21px; font-weight: 500; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; font-weight: 300; font-size: 30px; color: var(--royal-hi); flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); transition: transform .2s; }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq .a { padding: 0 4px 24px; color: var(--paper-2); max-width: 70ch; }

  /* ------------------------------------------------------------------ Wordmark + form */
  .closer { background: #000; border-top: 1px solid var(--line); }
  .wordmark { text-align: center; }
  .wordmark .actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
  .wordmark .w1, .wordmark .w2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: .92; letter-spacing: .01em; display: block; }
  .wordmark .w1 { font-size: clamp(52px, 11.5vw, 168px); color: #fff; }
  .wordmark .w2 { font-size: clamp(52px, 11.5vw, 168px); color: var(--royal-hi); }
  .wordmark p { color: var(--muted); margin-top: 22px; font-size: 18px; max-width: 72ch; margin-inline: auto; }
  .field { display: grid; gap: 6px; min-width: 0; }
  .field label { font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; color: var(--muted); }
  .field label b { color: var(--royal-hi); font-weight: 400; }
  .field input, .field select, .field textarea { width: 100%; min-width: 0; background: var(--ink); color: #fff; border: 1px solid var(--line); border-radius: 3px; padding: 14px 14px; font: inherit; font-size: 16px; }
  .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--royal-hi); outline: none; box-shadow: 0 0 0 3px var(--royal-glow); }
  .form-msg { grid-column: 1 / -1; padding: 16px 18px; border: 1px solid var(--royal-hi); background: rgba(76,116,255,.08); color: #fff; font-size: 15.5px; }
  .form-msg a { color: var(--royal-hi); }

  /* ------------------------------------------------------------------ Footer */
  footer { background: #000; border-top: 1px solid var(--line); padding-block: clamp(40px, 6vw, 72px) 28px; color: var(--paper-2); }
  .foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
  .foot h4, .foot .fh { font-size: 14px; letter-spacing: .2em; color: var(--royal-hi); font-weight: 500; margin-bottom: 14px; }
  .foot a { text-decoration: none; }
  .foot a:hover { color: #fff; text-decoration: underline; }
  .foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
  .foot .brand p { color: var(--muted); margin-top: 10px; max-width: 34ch; }
  .foot .phone-big { font-family: var(--display); font-size: 30px; font-weight: 700; color: #fff; display: block; margin-top: 4px; }
  .foot .social { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; }
  .foot .social svg { width: 20px; height: 20px; }
  .legal { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.6; display: grid; gap: 8px; }
  @media (max-width: 860px) { .foot { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px) { .foot { grid-template-columns: 1fr; } }

  /* ------------------------------------------------------------------ Chat launcher (from current site) */
  .chat-launch { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 60; background: var(--royal); color: #fff; border: 0; border-radius: 999px; padding: 14px 20px; font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.5); display: inline-flex; align-items: center; gap: 10px; }
  .chat-launch:hover { background: var(--royal-deep); }
  .chat-panel { position: fixed; right: 18px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 60; width: min(340px, calc(100vw - 36px)); background: var(--ink-3); border: 1px solid var(--line); border-top: 4px solid var(--royal); box-shadow: 0 20px 50px rgba(0,0,0,.6); padding: 18px; display: none; }
  .chat-panel.open { display: block; }
  .chat-panel .who { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .chat-panel .who b { font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: 17px; }
  .chat-panel .who span { font-size: 12.5px; color: var(--muted); }
  .chat-panel .who span::before { content: "●"; color: #3ED27A; margin-right: 6px; }
  .chat-panel .msg { background: var(--ink); border: 1px solid var(--line); padding: 12px 14px; margin-top: 14px; font-size: 15px; color: var(--paper-2); }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .chips a { text-decoration: none; font-size: 13.5px; padding: 8px 12px; border: 1px solid var(--royal-hi); color: #fff; border-radius: 999px; }
  .chips a:hover { background: rgba(76,116,255,.15); }
  /* Chat thread + composer. Built at runtime by site.js so no page markup
     changed; styled from the same tokens as the panel it sits in. */
  .chat-thread { margin-top: 12px; max-height: 46vh; overflow-y: auto; display: grid; gap: 8px; }
  .chat-thread:empty { display: none; }
  .chat-thread .cb { padding: 10px 12px; font-size: 14.5px; line-height: 1.45; border: 1px solid var(--line); }
  .chat-thread .cb.me { background: var(--royal); border-color: var(--royal); color: #fff; justify-self: end; max-width: 88%; }
  .chat-thread .cb.bot { background: var(--ink); color: var(--paper-2); }
  .chat-thread .cb-link { display: block; margin-top: 8px; font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--royal-hi); text-decoration: none; }
  .chat-thread .cb-link:hover { color: #fff; }
  .chat-thread .cb-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .chat-thread .cb-act a, .chat-thread .cb-act button { font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--royal-hi); background: none; color: #fff; text-decoration: none; cursor: pointer; }
  .chat-thread .cb-act a:hover, .chat-thread .cb-act button:hover { background: rgba(76,116,255,.18); }
  .chat-thread .cb-lead { display: grid; gap: 7px; margin-top: 10px; }
  .chat-thread .cb-lead input { padding: 9px 10px; font-size: 14.5px; }
  .chat-thread .cb-lead button { font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; padding: 9px 12px; border: 0; background: var(--royal); color: #fff; cursor: pointer; }
  .chat-thread .cb-lead button:hover { background: var(--royal-deep); }
  .chat-thread .cb-lead button[disabled] { opacity: .6; cursor: default; }
  .chat-ask { display: flex; gap: 7px; margin-top: 10px; }
  .chat-ask input { flex: 1 1 auto; min-width: 0; padding: 10px 11px; font-size: 14.5px; }
  .chat-ask button { flex: 0 0 auto; width: 42px; border: 0; background: var(--royal); color: #fff; font-size: 17px; cursor: pointer; }
  .chat-ask button:hover { background: var(--royal-deep); }
  .chat-panel .fine { color: var(--muted); font-size: 12px; margin-top: 12px; }
  .chat-close { background: none; border: 0; color: var(--muted); font-size: 22px; cursor: pointer; line-height: 1; }

  /* ==================================================================
     Interior-page components
     ================================================================== */

  /* Breadcrumb */
  .crumb { background: var(--ink-2); border-bottom: 1px solid var(--line); font-size: 13.5px; }
  .crumb .wrap { padding-block: 12px; color: var(--muted); }
  .crumb a { color: var(--paper-2); text-decoration: none; }
  .crumb a:hover { color: #fff; text-decoration: underline; }
  .crumb span { color: var(--royal-hi); margin-inline: 8px; }

  /* Interior hero: copy left, form right (no portrait band) */
  .hero--sub .wrap { grid-template-columns: minmax(0, 1fr) minmax(320px, 430px); }
  .hero--sub .hero-form { grid-column: auto; }   /* home page pins the form to col 3; interior pages have only two */
  .hero--sub h1 { font-size: clamp(36px, 4.6vw, 62px); }
  .hero--sub .intro { font-size: 18px; }
  @media (max-width: 980px) { .hero--sub .wrap { grid-template-columns: minmax(0, 1fr); } }

  /* Trust strip */
  .trust { background: #000; border-bottom: 1px solid var(--line); }
  .trust .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding-block: 18px; }
  .trust div { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--paper-2); }
  .trust svg { width: 18px; height: 18px; color: var(--royal-hi); flex: none; }
  @media (max-width: 860px) { .trust .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 460px) { .trust .wrap { grid-template-columns: 1fr; gap: 12px; } }

  /* Body prose + at-a-glance panel */
  .prose-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: clamp(28px, 4vw, 60px); align-items: start; }
  .prose { display: grid; gap: 20px; font-size: 17.5px; color: var(--paper-2); max-width: 70ch; }
  .prose strong { color: #fff; }
  .glance { background: var(--ink-3); border: 1px solid var(--line); border-top: 4px solid var(--royal); padding: clamp(22px, 2.6vw, 30px); position: sticky; top: calc(100px + env(safe-area-inset-top, 0px)); }
  .glance h3 { font-size: 21px; font-weight: 600; }
  .glance dl { margin: 18px 0 0; display: grid; gap: 0; }
  .glance dt { font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--royal-hi); padding-top: 14px; }
  .glance dd { margin: 4px 0 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--paper-2); font-size: 15.5px; }
  .glance dd:last-child { border-bottom: 0; padding-bottom: 0; }
  @media (max-width: 900px) { .prose-grid { grid-template-columns: 1fr; } .glance { position: static; } }

  /* Areas served */
  .areas-served { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
  .areas-served span, .areas-served a { border: 1px solid var(--line); background: var(--ink); padding: 9px 16px; font-size: 14.5px; color: var(--paper-2); border-radius: 999px; line-height: 1.2; }
  /* a community with its own page reads as a link, not a label */
  .areas-served a { color: #fff; border-color: #2F3E7A; text-decoration: none; font-weight: 500; transition: background .16s, border-color .16s; }
  .areas-served a::after { content: " \2192"; color: var(--royal-hi); margin-left: 4px; }
  .areas-served a:hover { background: var(--royal); border-color: var(--royal); }
  .areas-served a:hover::after { color: #fff; }
  .area-group + .area-group { margin-top: 26px; }
  .area-group h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: .14em; font-size: 13px; color: var(--royal-hi); font-weight: 500; margin-bottom: 12px; }
  .area-note { margin-top: 26px; color: var(--muted); font-size: 15.5px; max-width: 70ch; }

  /* Spanish call-out band */
  .es-band { background: linear-gradient(100deg, var(--royal-deep) 0%, #16224f 60%, var(--ink-3) 100%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .es-band .wrap { padding-block: clamp(32px, 4vw, 52px); display: grid; gap: 14px; justify-items: start; }
  .es-band h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 700; }
  .es-band p { color: var(--paper-2); max-width: 62ch; font-size: 17px; }

  /* Answers library */
  .filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; }
  .filters button {
    font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; font-weight: 500;
    background: transparent; color: var(--paper-2); border: 1px solid var(--line); border-radius: 999px;
    padding: 10px 18px; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
  }
  .filters button:hover { border-color: var(--royal-hi); color: #fff; }
  .filters button[aria-pressed="true"] { background: var(--royal); border-color: var(--royal); color: #fff; }
  .count { text-align: center; color: var(--muted); font-size: 13.5px; margin-bottom: 26px; }
  .qa { max-width: 900px; margin-inline: auto; border-top: 1px solid var(--line); }
  .qa details { border-bottom: 1px solid var(--line); }
  /* the hidden attribute only sets display:none in the UA sheet, so any
     author display rule (.post is display:grid) beats it. Scope-force it
     for every filterable row, whatever element it is. */
  .qa [hidden] { display: none !important; }
  .qa summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; padding: 20px 4px; }
  .qa summary::-webkit-details-marker { display: none; }
  .qa .q { font-family: var(--display); font-size: 20px; font-weight: 500; line-height: 1.25; }
  .qa .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 7px; font-size: 12.5px; color: var(--muted); }
  .qa .tags b { font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; color: var(--royal-hi); font-weight: 500; }
  .qa .plus { width: 32px; height: 32px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--royal-hi); font-size: 26px; font-weight: 300; line-height: 1; transition: transform .2s; }
  .qa details[open] .plus { transform: rotate(45deg); }
  .qa .a { padding: 0 4px 24px; color: var(--paper-2); max-width: 72ch; font-size: 16.5px; }
  .qa .a p + p { margin-top: 14px; }
  .qa .a .cta { margin-top: 14px; font-size: 15px; }
  .empty { text-align: center; color: var(--muted); padding: 40px 0; }

  /* 404 */
  .nf { text-align: center; padding-block: clamp(60px, 10vw, 120px); }
  .nf .code { font-family: var(--display); font-weight: 700; font-size: clamp(80px, 16vw, 180px); line-height: 1; color: var(--royal-hi); }
  .nf h1 { font-size: clamp(28px, 4vw, 44px); margin-top: 10px; }
  .nf p { color: var(--paper-2); margin-top: 16px; }
  .nf .actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }

  /* Interior pages have no portrait band — undo the home hero's mobile photo spacing */
  @media (max-width: 1099px) {
    .hero--sub .wrap { padding-top: clamp(48px, 7vw, 104px); }
    .hero--sub .wrap > div:first-child { max-width: none; }
  }

  /* Phones: bring the copy up under his chin (photo size unchanged) */
  @media (max-width: 699px) {
    .hero:not(.hero--sub) .wrap { padding-top: calc(var(--photo-h) * .54); }
    /* the copy now sits over his shoulders — keep it readable on a bright screen */
    .hero:not(.hero--sub) .kicker,
    .hero:not(.hero--sub) h1 { text-shadow: 0 2px 14px rgba(10,11,15,.75); }
    .hero:not(.hero--sub) .kicker { color: #C3C9DA; }
    .hero-photo img {
      -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%), linear-gradient(to bottom, transparent 0%, #000 7%, #000 42%, transparent 84%);
      -webkit-mask-composite: source-in;
      mask-image: linear-gradient(to right, transparent 0%, #000 34%), linear-gradient(to bottom, transparent 0%, #000 7%, #000 42%, transparent 84%);
      mask-composite: intersect;
    }
  }

/* ---- Oct 2026: author byline on answer pages, form label, phone call bar,
   homepage call strips, adjuster band and "What happened to you?" tiles. */
.hero--sub .author { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 0; margin: 18px 0 6px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); max-width: 620px; }
.hero--sub .author .pf { width: 104px; aspect-ratio: 3 / 4; border: 1px solid var(--line); overflow: hidden; background: #111; }
.hero--sub .author .pf img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero--sub .author .who { display: grid; gap: 3px; min-width: 0; }
.hero--sub .author small { font-family: var(--display); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--royal-hi); }
.hero--sub .author .name { font-family: var(--display); text-transform: uppercase; font-size: 22px; letter-spacing: .03em; line-height: 1.05; font-weight: 700; color: var(--paper); text-decoration: none; }
.hero--sub .author .name:hover { color: var(--royal-hi); }
.hero--sub .author ul { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 3px; font-size: 14px; color: var(--paper-2); }
.hero--sub .author li + li { border-top: 1px solid var(--line); padding-top: 3px; }
.hero-form .flabel { font-family: var(--display); text-transform: uppercase; letter-spacing: .16em; font-size: 12px; color: var(--royal-hi); margin-bottom: 6px; }
.hero .meetlink { display: inline-block; margin-top: 14px; color: var(--royal-hi); font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: 13px; text-decoration: none; }
.mbar { display: none; }
@media (max-width: 720px) {
  .hero--sub .author .pf { width: 84px; }
  .hero--sub .author .name { font-size: 18px; }
  .hero--sub .author ul { font-size: 12.5px; }
  .chat-launch { display: none !important; }
  .chat-panel { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
  body { padding-bottom: 64px; }
  .mbar { display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; grid-template-columns: 1fr 1fr 1.25fr; background: rgba(10,11,15,.97); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .mbar a, .mbar button { display: grid; justify-items: center; gap: 2px; padding: 9px 4px 11px; font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: 12.5px; font-weight: 600; color: #fff; text-decoration: none; background: none; border: 0; cursor: pointer; }
  .mbar .pri { background: var(--royal); }
  .mbar svg { width: 19px; height: 19px; }
}
.ctastrip { background: var(--ink-3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 22px; }
.ctastrip .wrap { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
.ctastrip p { font-family: var(--display); text-transform: uppercase; font-size: clamp(20px, 2.4vw, 28px); letter-spacing: .01em; font-weight: 600; color: #fff; }
.ctastrip .ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.ctastrip .btn--ghost { cursor: pointer; }
.adjband { padding-block: clamp(40px, 6vw, 72px); background: var(--ink); }
.adjband .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; }
@media (max-width: 820px) { .adjband .wrap { grid-template-columns: 1fr; } }
.adjband h2 { font-size: clamp(30px, 4vw, 48px); font-weight: 300; margin-top: 10px; }
.adjband h2 b { font-weight: 700; color: var(--royal-hi); }
.adjband p { color: var(--paper-2); margin-top: 12px; max-width: 52ch; }
.adjband .say { background: var(--ink-3); border: 1px solid var(--line); border-left: 5px solid var(--royal); padding: 22px; display: grid; gap: 12px; }
.adjband .say small { font-family: var(--display); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--muted); }
.adjband .say q { font-size: 19px; line-height: 1.4; }
.adjband .say .btn { justify-self: start; }
.adjband .textlink { color: var(--royal-hi); font-size: 14.5px; }
.qs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 900px) { .qs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .qs { grid-template-columns: 1fr; } }
.qs a { background: var(--ink-2); padding: 26px 24px; display: grid; gap: 8px; align-content: start; text-decoration: none; border-top: 4px solid var(--royal); }
.qs a b { font-family: var(--display); text-transform: uppercase; font-size: 22px; line-height: 1.08; font-weight: 600; }
.qs a span { color: var(--paper-2); font-size: 15px; }
.qs a em { font-style: normal; font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: 13px; color: var(--royal-hi); margin-top: 4px; }
.qs a.alt { background: var(--royal); }
.qs a.alt span, .qs a.alt em { color: #fff; }
.qs a:hover { background: var(--ink-3); }
.qs a.alt:hover { background: var(--royal-deep); }


/* ---- Oct 2 2026: landing pages get the homepage masthead photo. On phones the
   headline wraps to the left of the photo instead of starting under it. */
/* Phones: headline wraps to the left of the photo instead of starting under it */
@media (max-width: 699px) {
  .hero:not(.hero--sub) { --photo-h: clamp(330px, 92vw, 400px); }
  .hero:not(.hero--sub) .wrap { padding-top: 26px; }
  .hero:not(.hero--sub) .wrap > div:first-child::before { content: ""; float: right; width: 40%; height: calc(var(--photo-h) * .70); margin-left: 6px; }
  .hero:not(.hero--sub) h1 { font-size: clamp(28px, 8.4vw, 36px); margin-top: 10px; }
  .hero:not(.hero--sub) h1 .light { font-size: .74em; }
  .hero:not(.hero--sub) .tagline { font-size: 17px; gap: 10px; }
  .hero:not(.hero--sub) .tagline::before { width: 24px; }
  .hero:not(.hero--sub) .actions, .hero:not(.hero--sub) .badges { clear: both; }
  .hero:not(.hero--sub) .hero-photo img { right: -28px; }
  .hero-photo img {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%), linear-gradient(to bottom, transparent 0%, #000 6%, #000 62%, transparent 96%);
    mask-image: linear-gradient(to right, transparent 0%, #000 30%), linear-gradient(to bottom, transparent 0%, #000 6%, #000 62%, transparent 96%);
  }
}
/* Spanish tagline: blue line, then the call to action in white on its own line */
.tagline { flex-wrap: wrap; row-gap: 4px; --tag-indent: 48px; }
.tagline .tag2 { flex-basis: 100%; padding-left: var(--tag-indent); color: #fff; }
@media (max-width: 699px) {
  .hero:not(.hero--sub) .tagline { --tag-indent: 34px; }
  /* a block-level tagline sits beside the photo and wraps there, instead of dropping below it */
  .hero:not(.hero--sub) .tagline { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 10px; }
  .hero:not(.hero--sub) .tagline::before { margin-top: .55em; }
  .hero:not(.hero--sub) .tagline .tag2 { grid-column: 2; padding-left: 0; }
  .hero:not(.hero--sub) .tagline { font-size: 15px; letter-spacing: .04em; text-wrap: balance; }
  .hero:not(.hero--sub) p.intro { clear: both; }
}
/* Chat call button: square, filled, like the site's buttons */
.chat-thread .cb-act a.cb-call { border-radius: 0; background: var(--royal); border-color: var(--royal); font-size: 13px; padding: 10px 14px; }
.chat-thread .cb-act a.cb-call:hover { background: var(--royal-deep); }

/* ---- Oct 5 2026: more presence for the brand, headlines and taglines (same font and layout) */
.logo .a, .logo .b { font-size: 46px; letter-spacing: 0; }
.logo .c { font-size: 15px; font-weight: 600; letter-spacing: .2em; margin-left: 10px; }
.hero .kicker { font-size: 15px; font-weight: 600; color: #D2D6E3; letter-spacing: .16em; }
.hero:not(.hero--sub) h1 { font-size: clamp(52px, 7.6vw, 108px); letter-spacing: 0; line-height: .98; }
.hero h1 .light { font-weight: 500; font-size: .8em; color: #fff; letter-spacing: 0; }
.tagline { font-weight: 700; font-size: clamp(22px, 2.6vw, 34px); letter-spacing: .03em; }
.tagline::before { height: 7px; width: 40px; }
.h2 { font-weight: 500; }
.hero:not(.hero--sub) p.intro { color: #EEF0F6; font-size: 20px; }
@media (max-width: 1099px) { .logo .a, .logo .b { font-size: 42px; } .logo .c { font-size: 14px; } }
@media (max-width: 699px) {
  .logo .a, .logo .b { font-size: 40px; }
  .logo .c { font-size: 13px; margin-left: 8px; }
  .hero:not(.hero--sub) .wrap > div:first-child::before { width: 36%; }
  /* --lw is the headline's longest word (set per page); long words get a size that still fits beside the photo */
  .hero:not(.hero--sub) h1 { font-size: min(clamp(40px, 12.4vw, 50px), calc((100vw - 2 * var(--gutter)) * .6 / (var(--lw, 6) * .55))); line-height: .96; }
  .hero:not(.hero--sub) h1 .light { font-size: .78em; }
  .hero:not(.hero--sub) .tagline { font-size: 21px; letter-spacing: .02em; }
  .hero:not(.hero--sub) .tagline::before { width: 26px; height: 6px; }
  .hero:not(.hero--sub) .kicker { font-size: 14px; letter-spacing: .14em; }
}

/* ---- Oct 5 2026, desktop only: the headline is sized by its length (--hl, set per page) and the photo and
   form line up with its top, so the headline, Jimmy and the form are all on the first screen */
@media (min-width: 1100px) {
  .hero:not(.hero--sub) h1 { font-size: clamp(50px, min(7.6vw, calc(2700px / var(--hl, 20))), 104px); }
  .hero:not(.hero--sub) h1 .light { font-size: .62em; margin-top: .25em; line-height: 1.05; }
  .hero:not(.hero--sub) .wrap { align-items: start; padding-top: clamp(40px, 5vw, 72px); }
  .hero:not(.hero--sub) .hero-form { margin-top: 8px; }
  .hero:not(.hero--sub) .tagline { font-size: clamp(22px, 2vw, 28px); }
  /* photo starts level with the headline instead of centring on the whole masthead */
  .hero:not(.hero--sub) .hero-photo img { top: clamp(40px, 5vw, 72px); transform: translateX(-50%); height: min(var(--photo-h), calc(100% - 40px)); }
}

/* ===== Oct 6 2026: self-hosted fonts + accessibility ===== */
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/oswald-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/oswald-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/oswald-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/oswald-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 300; font-display: swap; src: url(/assets/fonts/roboto-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/roboto-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/roboto-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/roboto-latin-700-normal.woff2) format("woff2"); }
.skip { position: absolute; left: 12px; top: -200px; z-index: 1000; background: var(--royal); color: #fff; padding: 12px 18px; font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: 15px; text-decoration: none; }
.skip:focus { top: 12px; }
main:focus { outline: none; }
.legal .legal-links a + a::before { content: "·"; color: var(--muted); margin: 0 10px; display: inline-block; }
@media (min-width: 1001px) { .areas.areas--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ===== Oct 6 2026: in-article calls to action ===== */
.prose .cta-box { margin: 34px 0; padding: 24px 26px; background: var(--ink-3); border: 1px solid var(--line); border-left: 4px solid var(--royal); }
.prose .cta-box h3 { margin: 0 0 8px; font-size: clamp(20px, 2vw, 24px); font-weight: 700; color: #fff; }
.prose .cta-box p { margin: 0 0 16px; color: var(--paper-2); }
.prose .cta-box .cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.prose .cta-box .btn { text-decoration: none; }
.prose .cta-box--end { border-left-color: var(--royal-hi); }