:root {
        --bg: #f7f5ef;
        --bg-soft: #efe9dc;
        --surface: #fffdf8;
        --surface-2: #f1ecdf;
        --ink: #17303c;
        --ink-soft: #43565f;
        --heading: #043552;
        --teal: #043552;
        --teal-deep: #032a42;
        --copper: #b25f38;
        --copper-bright: #c4714a;
        --line: #ddd3bf;
        --line-strong: #c9bb9d;
        --on-teal: #f3eee0;
        --on-teal-soft: #c3d2d4;
        --chip-bg: #efe7d6;
        --shadow: 0 18px 40px -22px rgba(4, 53, 82, 0.35);
        --radius-lg: 22px;
        --radius-md: 14px;
        --radius-sm: 9px;
      }
      @media (prefers-color-scheme: dark) {
        :root {
          --bg: #06202e;
          --bg-soft: #082835;
          --surface: #0a2c3d;
          --surface-2: #0d3347;
          --ink: #ece5d3;
          --ink-soft: #b9c6c4;
          --heading: #f2ecdb;
          --teal: #0a2c3d;
          --teal-deep: #041a26;
          --copper: #d08359;
          --copper-bright: #d98a63;
          --line: #1d4457;
          --line-strong: #2b5a72;
          --on-teal: #f3eee0;
          --on-teal-soft: #b9cdcd;
          --chip-bg: #0d3347;
          --shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.6);
        }
      }

      * { 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(--bg);
        color: var(--ink);
        font-family: "Satoshi", "Avenir Next", "Segoe UI", sans-serif;
        font-size: 1.0625rem;
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
      }
      h1, h2, h3, .display {
        font-family: "General Sans", "Satoshi", sans-serif;
        color: var(--heading);
        line-height: 1.12;
        letter-spacing: -0.015em;
        margin: 0;
      }
      p { margin: 0; }
      a { color: var(--teal); }
      :focus-visible { outline: 3px solid var(--copper-bright); outline-offset: 3px; border-radius: 4px; }

      .wrap { max-width: 1180px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 48px); }
      section { padding-block: clamp(40px, 5.5vw, 68px); }

      /* ---------- Nav ---------- */
      .nav {
        position: sticky; top: 0; z-index: 50;
        background: var(--bg);
        border-bottom: 1px solid var(--line);
      }
      .nav-inner {
        display: flex; align-items: center; gap: 28px;
        padding-block: 14px;
      }
      .brand {
        display: inline-flex; align-items: center; gap: 10px;
        text-decoration: none; white-space: nowrap;
      }
      .brand-mark { height: 38px; width: auto; display: block; }
      .brand-text {
        font-family: "General Sans", sans-serif; font-weight: 700; font-size: 1.28rem;
        color: var(--heading); letter-spacing: -0.02em;
      }
      .nav-links { display: flex; gap: 26px; margin-left: auto; flex-wrap: wrap; }
      .nav-links a {
        color: var(--ink-soft); text-decoration: none; font-weight: 500; font-size: 0.98rem;
      }
      .nav-links a:hover { color: var(--heading); }
      .btn {
        display: inline-flex; align-items: center; gap: 9px;
        font-family: "General Sans", sans-serif; font-weight: 600; font-size: 1rem;
        text-decoration: none; border: 0; cursor: pointer;
        padding: 13px 24px; border-radius: 999px;
        background: var(--teal); color: #f7f3e8;
        transition: background 0.2s ease, transform 0.2s ease;
      }
      .btn:hover { background: var(--teal-deep); }
      @media (prefers-color-scheme: dark) {
        .btn { background: var(--copper-bright); color: #23130a; }
        .btn:hover { background: var(--copper); }
      }
      .btn.copper { background: var(--copper-bright); color: #fff8f0; }
      .btn.copper:hover { background: var(--copper); }
      .btn.small { padding: 10px 19px; font-size: 0.94rem; }
      .btn.ghost {
        background: transparent; color: var(--heading);
        border: 1.5px solid var(--line-strong);
      }
      .btn.ghost:hover { border-color: var(--heading); }
      @media (max-width: 760px) { .nav-links { display: none; } .nav-inner { justify-content: space-between; } }

      /* ---------- Hero ---------- */
      .hero { padding-block: clamp(48px, 7vw, 92px) clamp(56px, 7vw, 96px); }
      .hero-grid {
        display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(32px, 5vw, 72px);
        align-items: center;
      }
      @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
      .eyebrow {
        font-family: "General Sans", sans-serif; font-weight: 600;
        font-size: 0.86rem; letter-spacing: 0.14em; text-transform: uppercase;
        color: var(--copper); margin-bottom: 22px;
      }
      .hero h1 { font-size: clamp(2.15rem, 4.6vw, 3.55rem); font-weight: 600; }
      .hero h1 em { font-style: normal; color: var(--copper-bright); }
      .hero-sub { margin-top: 24px; font-size: 1.16rem; color: var(--ink-soft); max-width: 34em; }
      .hero-sub strong { color: var(--ink); }
      .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
      .hero-note { margin-top: 20px; font-size: 0.95rem; color: var(--ink-soft); }

      .video-card {
        background: var(--teal-deep); border-radius: var(--radius-lg);
        overflow: hidden; box-shadow: var(--shadow);
      }
      .video-stage {
        position: relative; aspect-ratio: 16 / 9;
        background:
          radial-gradient(120% 90% at 15% 0%, rgba(196, 113, 74, 0.35), transparent 55%),
          linear-gradient(150deg, #0a466a 0%, #043552 55%, #032a42 100%);
        display: flex; align-items: center; justify-content: center;
      }
      /* Welcome video player (2026-11-04): the real video fills the true
         16/9 stage. The old portrait treatment (poster img + teal scrim
         ::after + .sig overlay) was removed with the player swap — the
         scrim sat above the frame and blocked the controls, and the sig
         overlay fought the video's burned-in captions and control bar.
         The video is the visual now; Vito introduces himself in it. */
      .video-stage .welcome-video {
        position: absolute; inset: 0; width: 100%; height: 100%;
        object-fit: cover; display: block; background: #032a42;
      }
      .video-caption { padding: 18px 22px 20px; color: #d8dfd5; font-size: 0.97rem; background: var(--teal-deep); }
      .video-caption button {
        background: none; border: 0; padding: 0; cursor: pointer;
        color: var(--copper-bright); font: inherit; font-weight: 700; text-decoration: underline;
        text-underline-offset: 3px;
      }
      /* Transcript lives INSIDE .video-card (2026-11-04) as an inset panel,
         so opening it never breaks the card's silhouette. */
      .video-script {
        display: none; background: var(--surface); border: 1px solid var(--line);
        border-radius: 14px; margin: 0 16px 16px;
        padding: 22px 24px; font-size: 0.99rem; color: var(--ink-soft);
      }
      .video-script.open { display: block; }
      .video-script p + p { margin-top: 10px; }
      .video-script .who { font-weight: 700; color: var(--heading); font-family: "General Sans", sans-serif; }

      /* ---------- Section heads ---------- */
      .sec-head { max-width: 46em; margin-bottom: clamp(30px, 4vw, 48px); }
      .sec-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 600; }
      /* Two-tier heading scale (2026-11-04): supporting sections step down;
         primary sections (Situations, Stories, Why They Take the Call,
         Contact) keep the full scale above. */
      .sec-head--sm { margin-bottom: 30px; }
      .sec-head--sm h2 { font-size: clamp(1.55rem, 2.6vw, 2.05rem); }
      .sec-head .lede { margin-top: 14px; color: var(--ink-soft); font-size: 1.1rem; }
      .kicker {
        font-family: "General Sans", sans-serif; font-weight: 600; font-size: 0.84rem;
        letter-spacing: 0.13em; text-transform: uppercase; color: var(--copper); margin-bottom: 14px;
      }

      /* ---------- Situation cards ---------- */
      .sit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
      @media (max-width: 940px) { .sit-grid { grid-template-columns: 1fr; } }
      .sit-card {
        background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
        padding: 30px 28px 26px; display: flex; flex-direction: column; gap: 14px;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
      }
      .sit-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
      .sit-num {
        font-family: "General Sans", sans-serif; font-weight: 700; font-size: 0.95rem;
        color: var(--copper-bright); letter-spacing: 0.08em;
      }
      .sit-door {
        font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
        color: var(--ink-soft);
      }
      .sit-quote { font-family: "General Sans", sans-serif; font-weight: 600; font-size: 1.32rem; line-height: 1.3; color: var(--heading); }
      .sit-card p { color: var(--ink-soft); font-size: 1rem; }
      .sit-link {
        margin-top: auto; padding-top: 8px;
        font-family: "General Sans", sans-serif; font-weight: 600; font-size: 1rem;
        color: var(--copper); text-decoration: none; display: inline-flex; gap: 8px; align-items: center;
      }
      .sit-link:hover { color: var(--heading); }
      .sit-link svg { transition: transform 0.2s ease; }
      .sit-link:hover svg { transform: translateX(4px); }

      /* ---------- What we place ---------- */
      .place-band { background: var(--bg-soft); border-block: 1px solid var(--line); }
      .place-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); }
      @media (max-width: 800px) { .place-grid { grid-template-columns: 1fr; } }
      .place-col h3 { font-size: 1.35rem; font-weight: 600; margin-bottom: 6px; }
      .place-col .sub { color: var(--ink-soft); margin-bottom: 18px; font-size: 0.99rem; }
      .chips { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin: 0; padding: 0; }
      .chips li {
        background: var(--chip-bg); border: 1px solid var(--line);
        padding: 7px 14px; border-radius: 999px; font-size: 0.94rem; font-weight: 500;
      }

      /* ---------- Verification pillar ---------- */
      .verify { background: var(--teal-deep); color: var(--on-teal); }
      .verify h2 { color: #f7f3e8; font-size: clamp(1.9rem, 3.6vw, 2.75rem); font-weight: 600; max-width: 16em; }
      .verify h2 em { font-style: normal; color: var(--copper-bright); }
      .verify .lede { color: var(--on-teal-soft); font-size: 1.12rem; max-width: 44em; margin-top: 18px; }
      .verify-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 44px; }
      @media (max-width: 800px) { .verify-grid { grid-template-columns: 1fr; } }
      .verify-point {
        border: 1px solid rgba(243, 238, 224, 0.22); border-radius: var(--radius-md);
        padding: 24px 24px 20px; background: rgba(247, 245, 239, 0.04);
      }
      .verify-point h3 { color: #f7f3e8; font-size: 1.16rem; font-weight: 600; margin-bottom: 8px; display: flex; gap: 10px; align-items: baseline; }
      .verify-point h3 svg { flex: none; position: relative; top: 2px; }
      .verify-point p { color: var(--on-teal-soft); font-size: 0.99rem; }
      .verify .paper-link { margin-top: 36px; }
      .verify .paper-link a { color: var(--copper-bright); font-family: "General Sans", sans-serif; font-weight: 600; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
      .verify .paper-link a:hover { color: #f7f3e8; }

      /* ---------- Stories ---------- */
      .story { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(30px, 5vw, 68px); align-items: start; }
      .story + .story { margin-top: clamp(64px, 8vw, 110px); }
      @media (max-width: 880px) { .story { grid-template-columns: 1fr; } }
      .story.flip .story-main { order: 2; }
      .story.flip .story-side { order: 1; }
      @media (max-width: 880px) { .story.flip .story-main, .story.flip .story-side { order: initial; } }
      .story-tag {
        display: inline-block; font-family: "General Sans", sans-serif; font-weight: 600;
        font-size: 0.82rem; letter-spacing: 0.11em; text-transform: uppercase;
        color: var(--copper); border: 1px solid var(--line-strong); border-radius: 999px;
        padding: 5px 13px; margin-bottom: 18px; background: var(--surface);
      }
      .story h3 { font-size: clamp(1.65rem, 3vw, 2.3rem); font-weight: 600; }
      .story-main p { color: var(--ink-soft); margin-top: 16px; font-size: 1.05rem; }
      .story-main p strong { color: var(--ink); }
      .story-facts { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
      .story-facts li { display: flex; gap: 12px; align-items: baseline; font-size: 1rem; }
      .story-facts li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--copper-bright); flex: none; position: relative; top: -1px; }
      .story-side {
        background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
        padding: clamp(26px, 3.5vw, 40px); box-shadow: var(--shadow);
      }
      .story-side blockquote { margin: 0; }
      .story-side blockquote p {
        font-family: "General Sans", sans-serif; font-weight: 600;
        font-size: clamp(1.45rem, 2.6vw, 1.9rem); line-height: 1.3; color: var(--heading);
      }
      .story-side figcaption { margin-top: 16px; color: var(--ink-soft); font-size: 0.95rem; }
      .story-side .side-note { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.99rem; }
      .story-side .side-note strong { color: var(--ink); }

      /* ---------- Stats (Variant 1: dark editorial band, 2026-11-04) ---------- */
      .stats-band { background: var(--teal-deep); color: var(--on-teal); padding-block: clamp(56px, 7vw, 88px); }
      @media (prefers-color-scheme: dark) {
        /* teal-deep sits close to the dark page bg — a token edge defines the band */
        .stats-band { border-block: 1px solid var(--line); }
      }
      .stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
      .stat { padding-left: 26px; border-left: 1px solid rgba(243, 238, 224, 0.16); }
      .stat:first-child { padding-left: 0; border-left: 0; }
      .stat .num {
        font-family: "General Sans", sans-serif; font-weight: 700; line-height: 1;
        font-size: clamp(3rem, 5.4vw, 4.5rem); letter-spacing: -0.02em; color: var(--copper-bright);
      }
      .stat .num .unit { font-size: 0.36em; font-weight: 600; letter-spacing: 0; }
      .stat .lbl {
        margin-top: 16px; font-family: "General Sans", sans-serif; font-weight: 600;
        font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-teal-soft);
      }
      .stats-foot { margin-top: clamp(44px, 5vw, 60px); padding-top: 24px; border-top: 1px solid rgba(243, 238, 224, 0.22); }
      .stats-foot .scope { margin-bottom: 12px; font-size: 0.97rem; color: var(--on-teal-soft); }
      .stats-foot .ratio { font-size: 1.02rem; color: var(--on-teal); }
      .stats-foot .ratio strong { font-family: "General Sans", sans-serif; font-weight: 700; color: var(--copper-bright); }
      .stats-foot .caveat { margin-top: 4px; font-size: 0.92rem; color: var(--on-teal-soft); }
      @media (max-width: 880px) {
        .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
        .stat { padding-left: 0; border-left: 0; }
        .stat:last-child { grid-column: 1 / -1; text-align: center; }
        .stat .num { font-size: clamp(2.7rem, 11vw, 3.6rem); }
      }

      /* ---------- White papers ---------- */
      .paper-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
      @media (max-width: 940px) { .paper-grid { grid-template-columns: 1fr; } }
      .paper-card {
        background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
        padding: 28px 26px 24px; display: flex; flex-direction: column; gap: 12px; text-align: left;
        font: inherit; color: inherit; cursor: pointer; width: 100%;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
      }
      .paper-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
      .paper-meta { display: flex; justify-content: space-between; align-items: center; }
      .paper-no { font-family: "General Sans", sans-serif; font-weight: 700; color: var(--copper-bright); font-size: 0.92rem; letter-spacing: 0.06em; }
      .paper-status { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--line); padding: 3px 10px; border-radius: 999px; }
      .paper-status.ready { color: var(--copper); border-color: var(--line-strong); }
      .paper-card h3 { font-size: 1.42rem; font-weight: 600; line-height: 1.25; }
      .paper-card p { color: var(--ink-soft); font-size: 0.99rem; }
      .paper-open { margin-top: auto; padding-top: 6px; font-family: "General Sans", sans-serif; font-weight: 600; color: var(--copper); display: inline-flex; gap: 8px; align-items: center; }
      .paper-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
      @media (max-width: 940px) { .paper-row { grid-template-columns: 1fr; } }

      dialog.paper-dialog {
        border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
        background: var(--surface); color: var(--ink);
        max-width: 640px; width: calc(100% - 40px); padding: 0;
        box-shadow: 0 30px 80px -20px rgba(3, 30, 46, 0.5);
      }
      dialog.paper-dialog::backdrop { background: rgba(3, 30, 46, 0.55); }
      .dialog-body { padding: clamp(26px, 4vw, 40px); }
      .dialog-body h3 { font-size: 1.7rem; font-weight: 600; margin: 8px 0 14px; padding-right: 40px; }
      .dialog-body p { color: var(--ink-soft); }
      .dialog-body p + p { margin-top: 12px; }
      .dialog-body ul { margin: 14px 0 0; padding-left: 20px; color: var(--ink-soft); display: grid; gap: 7px; }
      .dialog-close {
        position: absolute; top: 14px; right: 14px; width: 38px; height: 38px;
        border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
        cursor: pointer; font-size: 1.05rem; color: var(--ink); line-height: 1;
      }
      .dialog-wrap { position: relative; }
      .dialog-cta { margin-top: 24px; }

      /* ---------- Lead magnet ---------- */
      .brief-card {
        background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
        border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
        padding: clamp(30px, 5vw, 54px);
        display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(26px, 4vw, 56px); align-items: center;
      }
      @media (max-width: 840px) { .brief-card { grid-template-columns: 1fr; } }
      .brief-card h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 600; }
      .brief-card .lede { color: var(--ink-soft); margin-top: 14px; }
      .brief-inside { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; color: var(--ink-soft); font-size: 0.99rem; }
      .brief-inside li { display: flex; gap: 10px; align-items: baseline; }
      .brief-inside li::before { content: "—"; color: var(--copper-bright); font-weight: 700; }
      .brief-form label { display: block; font-family: "General Sans", sans-serif; font-weight: 600; color: var(--heading); margin-bottom: 10px; }
      .brief-form .row { display: flex; gap: 10px; flex-wrap: wrap; }
      .brief-form input[type="email"] {
        flex: 1 1 230px; font: inherit; padding: 13px 18px; border-radius: 999px;
        border: 1.5px solid var(--line-strong); background: var(--bg); color: var(--ink);
      }
      .brief-form input[type="email"]::placeholder { color: var(--ink-soft); }
      .brief-form .fine { margin-top: 12px; font-size: 0.88rem; color: var(--ink-soft); }
      .brief-done { display: none; background: var(--chip-bg); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 18px 20px; font-size: 0.99rem; }
      .brief-done.show { display: block; }

      /* ---------- Contact ---------- */
      .contact { text-align: center; }
      .contact h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 600; max-width: 18em; margin-inline: auto; }
      .contact .big-q {
        font-family: "General Sans", sans-serif; font-weight: 600; font-size: clamp(1.2rem, 2.4vw, 1.5rem);
        color: var(--copper); margin-top: 26px;
      }
      .contact p.body { color: var(--ink-soft); max-width: 38em; margin: 16px auto 0; font-size: 1.08rem; }
      .contact .ctas { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
      .contact .aside-note { margin-top: 22px; color: var(--ink-soft); font-size: 0.98rem; }

      /* ---------- Footer ---------- */
      footer { border-top: 1px solid var(--line); padding-block: 38px 46px; }
      .foot-grid { display: flex; gap: 34px; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
      .foot-grid .cols { display: flex; gap: clamp(28px, 6vw, 80px); flex-wrap: wrap; }
      footer h4 { font-family: "General Sans", sans-serif; font-size: 0.92rem; margin: 0 0 10px; color: var(--heading); }
      footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: var(--ink-soft); font-size: 0.95rem; }
      footer a { color: var(--ink-soft); text-decoration: none; }
      footer a:hover { color: var(--heading); }
      .foot-note { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.86rem; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ==========================================================================
   theme.css — Iconstaff site theme.
   The design core below is ported verbatim from the approved Oct 21, 2026
   homepage mockup (iconstaff-homepage-mockup.html): tokens, nav, hero,
   situation cards, place band, stories, stats band, paper cards, brief
   card, contact, footer. Supplemental rules after the mockup block style
   the sections and components the homepage mockup did not cover
   (practices, playbook steps, testimonial carousel, logo bar, team, jobs,
   FAQ, forms, story/job pages) in the same design language.
   ========================================================================== */

/* ---------- Supplemental: layout helpers ---------- */
.wrap--narrow { max-width: 840px; }
.back-link { font-family: "General Sans", sans-serif; font-weight: 600; color: var(--copper); text-decoration: none; display: inline-flex; gap: 8px; align-items: center; margin-bottom: 26px; }
.back-link:hover { color: var(--heading); }
.prose p { color: var(--ink-soft); font-size: 1.06rem; margin-top: 18px; }
.prose p strong { color: var(--ink); }
.page-head h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 600; }
.page-head .lede { margin-top: 16px; color: var(--ink-soft); font-size: 1.12rem; max-width: 44em; }

/* ---------- Stats band: Variant 1 (dark editorial band) is styled in the
   base Stats section above (2026-11-04). The five-metric supplemental
   overrides that lived here — the 5-col grid, the 3.1rem numeral cap, and
   the mobile fifth-stat span — were folded into that section; the span
   survives there as the variant's own last-child rule. ---------- */

/* ---------- Supplemental: generic card grids (practices, exec, startup) ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card-grid.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 940px) { .card-grid, .card-grid.two { grid-template-columns: 1fr; } }
.info-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px 26px 24px; display: flex; flex-direction: column; gap: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.info-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.info-card h3 { font-size: 1.28rem; font-weight: 600; line-height: 1.3; }
.info-card p { color: var(--ink-soft); font-size: 1rem; }
.info-card .chips { margin-top: auto; padding-top: 6px; }
.info-card .chips li { font-size: 0.86rem; padding: 5px 12px; }
a.info-card { text-decoration: none; color: inherit; }

/* ---------- Supplemental: stacks ---------- */
.stack-block { padding-block: 18px; border-top: 1px solid var(--line); }
.stack-block h3 { font-size: 1.12rem; font-weight: 600; margin-bottom: 12px; }

/* ---------- Supplemental: numbered steps (playbook, methodology) ---------- */
.steps-list { display: grid; gap: 14px; }
.step-row {
  display: flex; gap: 20px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 22px 24px;
}
.step-num {
  font-family: "General Sans", sans-serif; font-weight: 700; font-size: 1.5rem; line-height: 1;
  color: var(--copper-bright); flex: none; min-width: 2.2ch;
}
.step-row h3 { font-size: 1.18rem; font-weight: 600; margin-bottom: 5px; }
.step-row p { color: var(--ink-soft); font-size: 1rem; }
.counsel-note { margin-top: 28px; color: var(--ink-soft); font-size: 1.05rem; max-width: 46em; }

/* ---------- Supplemental: embedded video (Playbook / Attract) ---------- */
.attract-video { margin-top: 36px; max-width: 430px; }
.attract-video__frame {
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-strong);
  box-shadow: var(--shadow); background: var(--surface);
}
.attract-video__frame iframe { width: 100%; aspect-ratio: 4 / 5; border: 0; display: block; }
.attract-video figcaption { margin-top: 14px; color: var(--ink-soft); font-size: 0.97rem; }
.attract-video figcaption a { color: var(--copper); font-weight: 600; }

/* ---------- Supplemental: pull quotes (Why they take the call) ---------- */
.quote-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(26px, 3.5vw, 38px); box-shadow: var(--shadow); margin: 0;
}
.quote-card + .quote-card { margin-top: 20px; }
.quote-card p {
  font-family: "General Sans", sans-serif; font-weight: 600;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.35; color: var(--heading);
}
.quote-card cite { display: block; margin-top: 14px; font-style: normal; color: var(--ink-soft); font-size: 0.95rem; }
.section-foot { margin-top: 24px; color: var(--ink-soft); }

/* ---------- Supplemental: testimonial carousel ---------- */
.carousel-wrap { position: relative; }
.carousel {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px 2px 16px; scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel__slide { flex: 0 0 min(440px, 88%); scroll-snap-align: center; }
.li-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 26px 22px; height: 100%; display: flex; flex-direction: column; gap: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.li-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.li-card__li-icon { width: 22px; height: 22px; }
.li-card__profile { display: flex; gap: 14px; align-items: center; }
.li-card__profile .li-card__li-icon { margin-left: auto; flex: none; }
.li-card__photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.li-card__name { font-family: "General Sans", sans-serif; font-weight: 600; color: var(--heading); text-decoration: none; font-size: 1.05rem; }
.li-card__title { color: var(--ink); font-size: 0.92rem; }
.li-card__context { color: var(--ink-soft); font-size: 0.88rem; }
.li-card__quote { color: var(--ink-soft); font-size: 0.99rem; margin: 0; }
.li-card__link { margin-top: auto; color: var(--copper); font-weight: 600; text-decoration: none; font-family: "General Sans", sans-serif; }
.li-card__link:hover { color: var(--heading); }
.carousel__btn {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--heading);
  display: inline-flex; align-items: center; justify-content: center;
}
.carousel__btn:hover { border-color: var(--heading); }
.carousel__counter { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 6px; }
.carousel__counter-text { font-family: "General Sans", sans-serif; font-weight: 600; color: var(--ink-soft); }

/* ---------- Supplemental: client logo bar ---------- */
.clients-bar { padding-block: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.clients-bar .kicker { text-align: center; }
.clients-panel { background: var(--surface); border-radius: var(--radius-lg); padding: 28px; }
.clients-logos { display: flex; flex-wrap: wrap; gap: 26px 40px; align-items: center; justify-content: center; }
.client-logo { height: 30px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: 0.8; transition: filter 0.2s ease, opacity 0.2s ease; }
.client-logo:hover { filter: grayscale(0); opacity: 1; }
.clients-tagline { text-align: center; color: var(--ink-soft); margin-top: 22px; font-size: 0.97rem; }

/* ---------- Supplemental: team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 940px) { .team-grid { grid-template-columns: 1fr; } }
.team-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 28px 26px; display: flex; flex-direction: column; gap: 10px;
}
.team-card__avatar img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; }
.team-card__name { font-family: "General Sans", sans-serif; font-weight: 600; font-size: 1.3rem; color: var(--heading); }
.team-card__role { color: var(--copper); font-weight: 600; font-size: 0.95rem; }
.team-card__bio { color: var(--ink-soft); font-size: 0.99rem; }
.team-card__contact { margin-top: auto; padding-top: 8px; }
.team-card__contact-link { font-family: "General Sans", sans-serif; font-weight: 600; color: var(--copper); text-decoration: none; }
.team-card__contact-link:hover { color: var(--heading); }

/* ---------- Supplemental: jobs ---------- */
.job-search { margin-bottom: 26px; }
.job-search__label {
  display: block; font-family: "General Sans", sans-serif; font-weight: 600;
  color: var(--heading); margin-bottom: 10px;
}
.job-search__input {
  width: 100%; padding: 14px 18px; font-size: 1rem; color: var(--heading);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
}
.job-search__input::placeholder { color: var(--ink-soft); }
.job-search__input:focus { outline: none; border-color: var(--copper); }
.job-search__count { color: var(--ink-soft); font-size: 0.95rem; margin-top: 10px; min-height: 1.2em; }
.job-search__empty { color: var(--ink-soft); margin-top: 18px; }
.job-list { display: grid; gap: 16px; }
.job-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 28px 22px; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.job-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.job-card__title { font-size: 1.4rem; font-weight: 600; }
.job-card__title a { color: var(--heading); text-decoration: none; }
.job-card__title a:hover { color: var(--copper); }
.job-card__meta { color: var(--copper); font-weight: 600; font-size: 0.95rem; margin-top: 6px; }
.job-card__desc { color: var(--ink-soft); margin-top: 10px; }
.job-card .job-link { display: inline-block; margin-top: 14px; font-family: "General Sans", sans-serif; font-weight: 600; color: var(--copper); text-decoration: none; }
.job-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 30px; }
@media (max-width: 940px) { .job-preview-grid { grid-template-columns: 1fr; } }
.job-detail__meta { color: var(--copper); font-weight: 600; margin-top: 12px; }
.job-detail__apply { margin-top: 34px; }
.job-detail__note { color: var(--ink-soft); font-size: 0.94rem; margin-top: 12px; }
.sample-notice {
  background: var(--chip-bg); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  padding: 16px 20px; font-size: 0.97rem; margin-bottom: 26px;
}

/* ---------- Supplemental: FAQ ---------- */
.faq-item { padding-block: 22px; border-top: 1px solid var(--line); }
.faq-item h3 { font-size: 1.18rem; font-weight: 600; margin-bottom: 8px; }
.faq-item p { color: var(--ink-soft); }

/* ---------- Supplemental: forms (lead magnets, contact) ---------- */
.magnet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 840px) { .magnet-grid { grid-template-columns: 1fr; } }
.magnet-card {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 42px);
}
.magnet-card h3 { font-size: 1.55rem; font-weight: 600; margin-bottom: 12px; }
.magnet-card > p { color: var(--ink-soft); }
.magnet-card ul { list-style: none; margin: 18px 0 24px; padding: 0; display: grid; gap: 8px; color: var(--ink-soft); font-size: 0.99rem; }
.magnet-card ul li { display: flex; gap: 10px; align-items: baseline; }
.magnet-card ul li::before { content: "—"; color: var(--copper-bright); font-weight: 700; }
.form-group { margin-bottom: 14px; }
.form-group label {
  display: block; font-family: "General Sans", sans-serif; font-weight: 600;
  color: var(--heading); font-size: 0.95rem;
}
.form-group input, .form-group textarea {
  display: block; width: 100%; margin-top: 7px; font: inherit; font-weight: 400;
  padding: 13px 18px; border-radius: var(--radius-md);
  border: 1.5px solid var(--line-strong); background: var(--bg); color: var(--ink);
}
.form-group textarea { border-radius: var(--radius-md); resize: vertical; }
.contact-details { display: grid; gap: 8px; margin: 26px auto 0; font-size: 1.08rem; }
.contact-details a { color: var(--copper); font-weight: 600; text-decoration: none; }
.contact-form-wrap { max-width: 620px; margin: 40px auto 0; text-align: left; }

/* ---------- Supplemental: legal pages ---------- */
.legal h2 { font-size: 1.35rem; font-weight: 600; margin-top: 34px; }
.legal ul { margin: 14px 0 0; padding-left: 22px; color: var(--ink-soft); display: grid; gap: 9px; }
.legal p { margin-top: 14px; }

/* ---------- Supplemental: mobile navigation menu ---------- */
.nav-toggle {
  display: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--heading);
  align-items: center; justify-content: center; flex: none;
}
@media (max-width: 760px) {
  .nav-inner { gap: 12px; }
  .nav-inner .btn.small { margin-left: auto; }
  .nav-toggle { display: inline-flex; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; gap: 0; flex-wrap: nowrap;
    position: absolute; top: 100%; left: 0; right: 0; margin-left: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 6px clamp(20px, 5vw, 48px) 14px;
  }
  .nav.open .nav-links a {
    padding: 12px 0; font-size: 1.05rem; border-top: 1px solid var(--line);
  }
}

/* ---------- Supplemental: form notes ---------- */
.form-note { margin-top: 14px; font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- Supplemental: anchor landing + small-screen header ---------- */
html { scroll-padding-top: 96px; }
@media (max-width: 430px) {
  .brand-text { display: none; }
  .nav-inner .btn.small { padding: 9px 15px; font-size: 0.9rem; }
}

/* ---------- Supplemental: contextual download strip (Playbook) ---------- */
.magnet-strip {
  margin-top: 40px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  padding: clamp(26px, 4vw, 40px);
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(22px, 4vw, 48px); align-items: center;
}
@media (max-width: 840px) { .magnet-strip { grid-template-columns: 1fr; } }
.magnet-strip h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: 10px; }
.magnet-strip__text p { color: var(--ink-soft); }
.magnet-strip .brief-form .fine { margin-top: 12px; font-size: 0.88rem; color: var(--ink-soft); }

/* Job description lists */
.prose ul { margin: 0 0 1.1em; padding-left: 22px; display: grid; gap: 6px; }
.prose li { line-height: 1.6; }

/* ---------- Supplemental: stories (story pages, 2026-11-05) ---------- */
.story-hero { margin: 30px 0 8px; }
.story-hero img {
  display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover;
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.story-body h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); font-weight: 600; margin-top: 46px; }
.story-body .story-pull { margin: 42px 0 8px; padding: 4px 0 4px 26px; border-left: 3px solid var(--copper); }
.story-body .story-pull p {
  font-family: "General Sans", sans-serif; font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem); line-height: 1.3; color: var(--heading); margin: 0;
}
.story-body .story-stats {
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin: 40px 0 8px; padding: 26px 28px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.story-stats li { line-height: 1.35; }
.story-stat-value {
  display: block; font-family: "General Sans", sans-serif; font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem); line-height: 1.05; color: var(--copper);
}
.story-stat-label { display: block; margin-top: 7px; color: var(--ink-soft); font-size: 0.95rem; }
.story-more { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.story-more h2 { font-size: 1.3rem; font-weight: 600; margin-bottom: 14px; }
.story-more ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.story-more a {
  font-family: "General Sans", sans-serif; font-weight: 600; color: var(--copper); text-decoration: none;
}
.story-more a:hover { color: var(--heading); }
@media (max-width: 640px) {
  .story-body .story-stats { grid-template-columns: 1fr; gap: 16px; }
  .story-body .story-pull { padding-left: 18px; }
}