:root{
    --navy: #1F3A5F;
    --clay: #B8765A;
    --black: #000000;
    --paper: #F5F1EA;
    --paper-2: #EFE9DE;
    --slate: #5C6670;
    --dark: #1a1a1a;
    --serif: "Playfair Display", "GT Sectra", "Tiempos Headline", Georgia, serif;
    --sans: "Inter", "Söhne", "Helvetica Neue", Arial, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  }

  *{ box-sizing: border-box; min-width: 0; }
  html, body{ margin: 0; padding: 0; background: var(--paper); color: var(--navy); font-family: var(--sans); overflow-x: hidden; }
  body{ min-width: 320px; }
  img{ max-width: 100%; height: auto; }

  a{ color: inherit; text-decoration: none; }

  /* ---------- Shared chrome ---------- */
  .section{
    position: relative;
    padding: 96px 96px;
    min-height: 720px;
    overflow: hidden;
  }
  .section.tall{ min-height: 1080px; }
  .section .chrome-top, .section .chrome-bot{
    position: absolute;
    left: 96px; right: 96px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--slate);
    font-weight: 500;
  }
  .section .chrome-top{ top: 36px; }
  .section .chrome-bot{ bottom: 36px; }
  .section .rule-top, .section .rule-bot{
    position: absolute;
    left: 96px; right: 96px;
    height: 1px;
    background: var(--navy);
    opacity: 0.85;
  }
  .section .rule-top{ top: 64px; }
  .section .rule-bot{ bottom: 64px; }

  .section.dark{ background: var(--dark); color: var(--paper); }
  .section.dark .chrome-top, .section.dark .chrome-bot{ color: rgba(245,241,234,0.55); }
  .section.dark .rule-top, .section.dark .rule-bot{ background: rgba(245,241,234,0.6); }

  .section.paper{ background: var(--paper); }
  .section.paper-2{ background: var(--paper-2); }

  .eyebrow{
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--clay);
    font-weight: 600;
  }
  .eyebrow .num{ color: var(--clay); }

  .h-display{
    font-family: var(--serif);
    font-weight: 500;
    color: var(--navy);
    line-height: 0.96;
    letter-spacing: -0.025em;
    margin: 0;
  }
  .h-display .ital{ font-style: italic; color: var(--clay); }
  .h-display .clay-period{ color: var(--clay); }
  .section.dark .h-display{ color: var(--paper); }

  .body{
    font-family: var(--sans);
    color: var(--navy);
    line-height: 1.55;
    font-weight: 400;
  }

  /* ---------- Top nav (sticky-feeling header inside hero) ---------- */
  .nav{
    position: absolute;
    top: 36px; left: 96px; right: 96px;
    display: flex; justify-content: space-between; align-items: center;
    z-index: 5;
  }
  .nav-left{ display: flex; align-items: center; gap: 14px; }
  .nav-mark{ width: 34px; height: 34px; display: block; }
  .nav-mark img{
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    /* Match the watermark treatment, desaturated, ghosted, intentional */
    opacity: 0.35;
    transition: opacity 200ms ease;
  }
  .nav:hover .nav-mark img,
  .nav-left:hover .nav-mark img{ opacity: 0.85; }
  .nav-wordmark{
    font-family: var(--serif);
    font-weight: 500;
    font-size: 22px;
    color: var(--navy);
    letter-spacing: -0.01em;
  }
  .nav-wordmark .ital{ font-style: italic; color: var(--clay); }
  .nav-links{
    display: flex; gap: 36px; align-items: center;
  }
  .nav-links a{
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--navy);
    font-weight: 500;
    transition: color 0.2s ease;
  }
  .nav-links a:hover{ color: var(--clay); }
  .nav-links a.active{ color: var(--clay); }

  /* ---------- Buttons ---------- */
  .btn{
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 28px;
    border-radius: 2px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    border: 1px solid transparent;
  }
  .btn .arrow{ font-family: var(--serif); font-style: italic; font-weight: 400; }
  .btn.primary{ background: var(--navy); color: var(--paper); border-color: var(--navy); }
  .btn.primary:hover{ background: var(--clay); border-color: var(--clay); }
  .btn.secondary{ background: transparent; color: var(--navy); border-color: var(--navy); }
  .btn.secondary:hover{ color: var(--clay); border-color: var(--clay); }
  .btn.clay{ background: var(--clay); color: var(--paper); border-color: var(--clay); }
  .btn.clay:hover{ background: var(--paper); color: var(--clay); border-color: var(--clay); }
  .btn.ghost-light{ background: transparent; color: var(--paper); border-color: var(--paper); }

  /* ============================================================
     SECTION 01, HERO
     ============================================================ */
  .hero{
    background: var(--paper);
    min-height: 1080px;
    padding: 0 96px;
    display: flex; flex-direction: column;
    position: relative;
  }
  .hero .inner{
    flex: 1;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    padding: 96px 0 96px 0;
  }
  .hero .top-spacer{}
  .hero-eyebrow{ margin-bottom: 36px; display: flex; align-items: center; gap: 18px;}
  .hero-eyebrow .pill{
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 14px;
    border: 1px solid rgba(31,58,95,0.25);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--slate);
  }
  .hero-eyebrow .pill .dot{
    width: 6px; height: 6px;
    background: var(--clay);
    border-radius: 999px;
    position: relative;
    flex-shrink: 0;
    animation: m3-dot-pulse 2s ease-in-out infinite;
  }
  .hero-eyebrow .pill .dot::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--clay);
    transform: scale(1);
    opacity: 0.7;
    animation: m3-dot-ring 2s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
  }
  @keyframes m3-dot-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
  }
  @keyframes m3-dot-ring {
    0% { transform: scale(1); opacity: 0.7; }
    70% { transform: scale(3.2); opacity: 0; }
    100% { transform: scale(3.2); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce){
    .hero-eyebrow .pill .dot{ animation: none; }
    .hero-eyebrow .pill .dot::before{ animation: none; opacity: 0; }
  }
  .hero h1{
    font-family: var(--serif);
    font-weight: 500;
    font-size: 132px;
    line-height: 0.95;
    letter-spacing: -0.025em;
    color: var(--navy);
    margin: 0;
    max-width: 1500px;
  }
  .hero h1 .ital{ font-style: italic; color: var(--clay); }
  .hero h1 .clay-period{ color: var(--clay); }
  .hero .subtitle{
    margin-top: 36px;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 28px;
    color: var(--slate);
    line-height: 1.4;
  }
  .hero .ctas{
    margin-top: 56px;
    display: flex; gap: 18px;
  }
  .hero .meta-stack{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
    padding-top: 56px;
    margin-top: 56px;
    border-top: 1px solid rgba(31,58,95,0.25);
    gap: 56px;
  }
  .hero .meta-stack .stat{ text-align: left; }
  .hero .meta-stack .stat .lbl{
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--slate);
    margin-bottom: 14px;
    font-weight: 600;
  }
  .hero .meta-stack .stat .val{
    font-family: var(--serif);
    font-style: italic;
    font-size: 28px;
    color: var(--navy);
    line-height: 1.2;
  }
  .hero .meta-stack .stat .val .clay{ color: var(--clay); font-style: normal; }
  .hero .meta-stack .v-rule{ display: none; }

  .hero-mark-watermark{
    position: absolute;
    right: 96px;
    top: 130px;
    width: 360px;
    height: 360px;
    pointer-events: none;
    opacity: 0.07;
  }
  .hero-mark-watermark img{ width: 100%; height: 100%; object-fit: contain; }

  /* ============================================================
     SECTION 02, APPROACH
     ============================================================ */
  .approach .grid{
    margin-top: 64px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 96px;
    align-items: start;
  }
  .approach .head{
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 64px;
    align-items: end;
  }
  .approach h2{
    font-family: var(--serif);
    font-weight: 500;
    font-size: 64px;
    line-height: 1.04;
    letter-spacing: -0.018em;
    color: var(--navy);
    margin: 24px 0 0 0;
    max-width: 1100px;
  }
  .approach h2 .ital{ font-style: italic; color: var(--clay); }
  .approach h2 .clay-period{ color: var(--clay); }
  .approach .body p{
    font-family: var(--sans);
    font-size: 22px;
    line-height: 1.55;
    color: var(--navy);
    margin: 0;
    max-width: 720px;
  }
  .principles{ display: flex; flex-direction: column; gap: 24px; }
  .principle{
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 18px;
    border-top: 1px solid rgba(31,58,95,0.25);
    padding-top: 22px;
    align-items: start;
  }
  .principle .num{
    font-family: var(--serif);
    font-style: italic;
    color: var(--clay);
    font-size: 28px;
  }
  .principle .t{
    font-family: var(--serif);
    font-weight: 500;
    font-size: 24px;
    color: var(--navy);
    line-height: 1.2;
    letter-spacing: -0.005em;
  }
  .principle .d{
    font-family: var(--sans);
    font-size: 14px;
    color: var(--slate);
    margin-top: 8px;
    line-height: 1.5;
  }

  /* ============================================================
     SECTION 03, SERVICES
     ============================================================ */
  .services .head{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 64px;
  }
  .services h2{
    font-family: var(--serif);
    font-weight: 500;
    font-size: 56px;
    line-height: 1.02;
    color: var(--navy);
    margin: 24px 0 0 0;
    letter-spacing: -0.015em;
  }
  .services h2 .ital{ font-style: italic; color: var(--clay); }
  .services h2 .clay-period{ color: var(--clay); }
  /* .services .head-meta — legacy 2-column-grid styling, retired when /services became a sub-page.
     Treatment now comes from .page-section .head-meta below. */
  .services .grid{
    margin-top: 72px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(0, auto);
    gap: 0;
    border-top: 1px solid rgba(31,58,95,0.4);
    border-left: 1px solid rgba(31,58,95,0.4);
  }
  .service{
    border-right: 1px solid rgba(31,58,95,0.4);
    border-bottom: 1px solid rgba(31,58,95,0.4);
    padding: 48px 44px;
    background: var(--paper);
    display: flex; flex-direction: column;
    gap: 18px;
    min-height: 320px;
    transition: background 0.2s ease;
  }
  .service:hover{ background: var(--paper-2); }
  .service.span-2{ grid-column: span 2; }
  .service .num{
    font-family: var(--mono);
    font-size: 12px;
    color: var(--clay);
    letter-spacing: 0.18em;
  }
  .service h3{
    font-family: var(--serif);
    font-weight: 500;
    font-size: 30px;
    color: var(--navy);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.01em;
  }
  .service p{
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--slate);
    margin: 0;
    max-width: 520px;
  }
  .service .more{
    margin-top: auto;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--clay);
    font-weight: 600;
    display: inline-flex; align-items: center; gap: 8px;
    transition: gap 0.2s ease;
  }
  .service:hover .more{ gap: 14px; }

  /* ============================================================
     SECTION 04, SPEAKING
     ============================================================ */
  .speaking{ background: var(--dark); color: var(--paper); }
  .speaking .head{ display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 64px;}
  .speaking h2{
    font-family: var(--serif);
    font-weight: 500;
    font-size: 64px;
    line-height: 1.02;
    color: var(--paper);
    margin: 24px 0 0 0;
    letter-spacing: -0.018em;
  }
  .speaking h2 .ital{ font-style: italic; color: var(--clay); }
  .speaking h2 .clay-period{ color: var(--clay); }
  .speaking .grid{
    margin-top: 64px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
  }
  .talk{
    background: var(--paper);
    color: var(--navy);
    padding: 32px 28px;
    border-radius: 2px;
    display: flex; flex-direction: column;
    min-height: 280px;
  }
  .talk .num{
    font-family: var(--mono);
    font-size: 11px;
    color: var(--clay);
    letter-spacing: 0.18em;
    margin-bottom: 18px;
  }
  .talk h4{
    font-family: var(--serif);
    font-weight: 500;
    font-size: 22px;
    color: var(--navy);
    margin: 0 0 14px 0;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
  .talk p{
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--slate);
    margin: 0;
  }
  .speaking .venues{
    margin-top: 80px;
    border-top: 1px solid rgba(245,241,234,0.35);
    padding-top: 36px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 48px;
    align-items: center;
  }
  .speaking .venues .lbl{
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(245,241,234,0.55);
    font-weight: 600;
  }
  .speaking .venues .list{
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    color: var(--paper);
  }
  .speaking .venues .list .sep{ color: var(--clay); margin: 0 16px; font-style: normal; }
  .speaking .book-cta{
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--clay);
    font-weight: 600;
    display: inline-flex; align-items: center; gap: 12px;
    border-bottom: 1px solid var(--clay);
    padding-bottom: 6px;
  }
  .speaking-mark{
    position: absolute;
    right: 64px;
    top: 60px;
    width: 200px;
    height: 200px;
    opacity: 0.12;
  }
  .speaking-mark img{ width: 100%; height: 100%; object-fit: contain; }

  /* ============================================================
     SECTION 05, FOUNDERS
     ============================================================ */
  .founders .head{
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 64px;
    align-items: end;
  }
  .founders h2{
    font-family: var(--serif);
    font-weight: 500;
    font-size: 56px;
    line-height: 1.02;
    color: var(--navy);
    margin: 24px 0 0 0;
    letter-spacing: -0.018em;
    max-width: 900px;
  }
  .founders h2 .ital{ font-style: italic; color: var(--clay); }
  .founders h2 .clay-period{ color: var(--clay); }
  .founders .grid{
    margin-top: 72px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
  .founder-card{
    background: var(--paper);
    border: 1px solid rgba(31,58,95,0.18);
    display: flex; flex-direction: column;
  }
  .founder-card .photo{
    aspect-ratio: 4 / 5;
    background: var(--paper-2);
    position: relative;
    overflow: hidden;
  }
  .founder-card .photo img{
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .founder-card .body-pad{
    padding: 36px 36px 32px 36px;
    display: flex; flex-direction: column; gap: 14px;
  }
  .founder-card h3{
    font-family: var(--serif);
    font-weight: 500;
    font-size: 36px;
    color: var(--navy);
    margin: 0;
    line-height: 1.05;
    letter-spacing: -0.012em;
  }
  .founder-card h3 .ital{ font-style: italic; }
  .founder-card .role{
    font-family: var(--serif);
    font-style: italic;
    font-size: 20px;
    color: var(--clay);
    margin: 0;
  }
  .founder-card .bio{
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--navy);
    margin: 8px 0 0 0;
  }
  .founder-card .creds{
    margin-top: 12px;
    border-top: 1px solid rgba(31,58,95,0.2);
    padding-top: 16px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--slate);
    letter-spacing: 0.04em;
    line-height: 1.6;
  }
  .founder-card .creds .sep{ color: var(--clay); margin: 0 8px; }

  /* ============================================================
     SECTION 06, IN PRACTICE
     ============================================================ */
  .practice .head{
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 64px;
    align-items: end;
  }
  .practice h2{
    font-family: var(--serif);
    font-weight: 500;
    font-size: 56px;
    line-height: 1.02;
    color: var(--navy);
    margin: 24px 0 0 0;
    letter-spacing: -0.018em;
  }
  .practice h2 .ital{ font-style: italic; color: var(--clay); }
  .practice h2 .clay-period{ color: var(--clay); }
  .practice .grid{
    margin-top: 72px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .case{
    background: var(--paper);
    border: 1px solid rgba(31,58,95,0.25);
    padding: 36px;
    display: flex; flex-direction: column; gap: 18px;
    min-height: 360px;
  }
  .case .num{
    font-family: var(--mono);
    font-size: 11px;
    color: var(--clay);
    letter-spacing: 0.18em;
  }
  .case h3{
    font-family: var(--serif);
    font-weight: 500;
    font-size: 26px;
    color: var(--navy);
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
  .case .client{
    font-family: var(--serif);
    font-style: italic;
    font-size: 16px;
    color: var(--clay);
  }
  .case p{
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--slate);
    margin: 0;
  }
  .case .outcome{
    margin-top: auto;
    border-top: 1px solid rgba(31,58,95,0.2);
    padding-top: 14px;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--navy);
    font-weight: 600;
  }
  .trusted-by{
    margin-top: 96px;
    border-top: 1px solid rgba(31,58,95,0.4);
    border-bottom: 1px solid rgba(31,58,95,0.4);
    padding: 32px 0;
  }
  .trusted-by .lbl{
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--clay);
    font-weight: 600;
    margin-bottom: 24px;
    display: block;
    text-align: center;
  }
  .marquee{
    position: relative;
    overflow: hidden;
    width: 100%;
    /* Subtler mask fade so logos at the start aren't half-obscured before motion begins */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }
  .marquee-track{
    display: flex;
    align-items: center;
    width: max-content;
    /* GPU-accelerated, longer cycle, gentle 1.5s pause before motion begins */
    transform: translate3d(0, 0, 0);
    will-change: transform;
    backface-visibility: hidden;
    animation: m3-marquee 60s linear 1.5s infinite both;
  }
  .marquee:hover .marquee-track,
  .marquee:focus-within .marquee-track{
    animation-play-state: paused;
  }
  .marquee-item{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 56px;
    height: 80px;
  }
  .marquee-item img{
    height: 100%;
    max-height: 64px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    /* Tasteful uniform treatment, desaturated by default, full color on hover */
    filter: grayscale(100%) opacity(0.72);
    transition: filter 250ms ease;
    /* Reduce paint cost during scroll */
    transform: translate3d(0, 0, 0);
  }
  .marquee-item:hover img,
  .marquee-item:focus img{
    filter: grayscale(0%) opacity(1);
  }
  @keyframes m3-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }
  @media (prefers-reduced-motion: reduce){
    .marquee-track{ animation: none; }
    .marquee{
      overflow-x: auto;
      -webkit-mask-image: none;
              mask-image: none;
    }
  }

  /* ============================================================
     SECTION 07, FOOTER / CONTACT
     ============================================================ */
  .footer{ background: var(--dark); color: var(--paper); min-height: 720px;}
  .footer h2{
    font-family: var(--serif);
    font-weight: 500;
    font-size: 88px;
    line-height: 0.96;
    color: var(--paper);
    margin: 32px 0 0 0;
    letter-spacing: -0.025em;
    max-width: 1400px;
  }
  .footer h2 .ital{ font-style: italic; color: var(--clay); }
  .footer h2 .clay-period{ color: var(--clay); }
  .footer .grid{
    margin-top: 96px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 96px;
    align-items: start;
  }
  .contact-list{ display: flex; flex-direction: column; gap: 22px; }
  .contact-list .item{
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 32px;
    border-top: 1px solid rgba(245,241,234,0.18);
    padding-top: 18px;
    align-items: baseline;
  }
  .contact-list .item .who{
    font-family: var(--serif);
    font-size: 22px;
    color: var(--paper);
  }
  .contact-list .item .who .ital{ font-style: italic; color: var(--clay); }
  .contact-list .item .what{
    font-family: var(--mono);
    font-size: 14px;
    color: rgba(245,241,234,0.85);
    letter-spacing: 0.02em;
  }
  .footer-cta{
    display: flex; flex-direction: column; gap: 24px; align-items: flex-start;
  }
  .footer-cta .label{
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--clay);
    font-weight: 600;
  }
  .footer-cta p{
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    color: rgba(245,241,234,0.85);
    line-height: 1.4;
    margin: 0;
    max-width: 480px;
  }
  .footer-bottom{
    margin-top: 96px;
    padding-top: 28px;
    border-top: 1px solid rgba(245,241,234,0.35);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: rgba(245,241,234,0.65);
    text-transform: uppercase;
  }
  .footer-bottom .center{ text-align: center; }
  .footer-bottom .right{ text-align: right; }
  .footer-mark{
    position: absolute;
    right: 96px; top: 96px;
    width: 200px; height: 200px;
    opacity: 0.18;
  }
  .footer-mark img{ width: 100%; height: 100%; object-fit: contain; }

  /* utility */
  .num-marker{
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--slate);
  }

  /* ============================================================
     CONTACT FORM
     ============================================================ */
  .contact-form{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 540px;
  }
  .contact-form .field{ display: flex; flex-direction: column; gap: 8px; }
  .contact-form label{
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--clay);
    font-weight: 600;
  }
  .contact-form input,
  .contact-form textarea,
  .contact-form select{
    font-family: var(--sans);
    font-size: 16px;
    color: var(--paper);
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(245,241,234,0.35);
    padding: 10px 0;
    outline: none;
  }
  .contact-form input:focus,
  .contact-form textarea:focus,
  .contact-form select:focus{
    border-bottom-color: var(--clay);
  }
  .contact-form textarea{
    resize: vertical;
    min-height: 96px;
    font-family: var(--sans);
  }
  .contact-form select option{ color: var(--navy); background: var(--paper); }
  .contact-form .actions{
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 8px;
    flex-wrap: wrap;
  }
  .contact-form .or{
    font-family: var(--serif);
    font-style: italic;
    color: rgba(245,241,234,0.65);
    font-size: 14px;
  }
  .contact-form .alt-link{
    font-family: var(--mono);
    font-size: 13px;
    color: rgba(245,241,234,0.85);
    text-decoration: underline;
    text-decoration-color: rgba(245,241,234,0.35);
    text-underline-offset: 4px;
  }
  .contact-form .alt-link:hover{ color: var(--clay); text-decoration-color: var(--clay); }
  .form-success{
    display: none;
    padding: 24px;
    border: 1px solid rgba(184,118,90,0.5);
    background: rgba(184,118,90,0.08);
    color: var(--paper);
    font-family: var(--serif);
    font-style: italic;
    font-size: 18px;
  }

  /* ============================================================
     ACCESSIBILITY
     ============================================================ */
  .skip-to-content{
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--navy);
    color: var(--paper);
    padding: 12px 20px;
    font-family: var(--sans);
    font-size: 14px;
    z-index: 9999;
    text-decoration: none;
  }
  .skip-to-content:focus{ left: 16px; top: 16px; }
  *:focus-visible{ outline: 2px solid var(--clay); outline-offset: 3px; }
  a, button, .btn{ transition: background 200ms ease, color 200ms ease, border-color 200ms ease; }

  /* ============================================================
     RESPONSIVE, Tablet (≤1024px)
     ============================================================ */
  @media (max-width: 1024px){
    .section{ padding: 80px 48px !important; min-height: auto; }
    .section .chrome-top, .section .chrome-bot{ left: 48px !important; right: 48px !important; font-size: 11px; }
    .section .rule-top, .section .rule-bot{ left: 48px !important; right: 48px !important; }
    .nav{ left: 48px !important; right: 48px !important; }
    .nav-links{ gap: 24px; }
    .nav-links a{ font-size: 11px; }
    .hero{ padding: 0 48px !important; min-height: auto !important; }
    .hero h1{ font-size: 88px !important; line-height: 0.96 !important; }
    .approach h2, .services h2, .speaking h2, .founders h2, .practice h2{ font-size: 56px !important; }
    .footer h2{ font-size: 64px !important; }
    .grid, .approach .grid, .services .grid, .practice .grid, .founders .grid, .footer .grid{
      grid-template-columns: 1fr !important;
      gap: 48px !important;
    }
    .footer-bottom{ grid-template-columns: 1fr !important; gap: 16px; }
    .footer-bottom .center, .footer-bottom .right{ text-align: left !important; }
    .footer-mark{ display: none; }
  }

  /* ============================================================
     RESPONSIVE, Mobile (≤640px)
     ============================================================ */
  @media (max-width: 640px){
    body{ min-width: 320px; }
    .section{ padding: 96px 22px 56px !important; min-height: auto !important; }
    .section .chrome-top, .section .chrome-bot{
      left: 22px !important; right: 22px !important;
      font-size: 9px !important; letter-spacing: 0.16em !important;
      gap: 12px;
      flex-wrap: wrap;
    }
    .section .chrome-top{ top: 18px !important; }
    .section .chrome-bot{ bottom: 18px !important; }
    .section .rule-top, .section .rule-bot{ left: 22px !important; right: 22px !important; }
    .section .rule-top{ top: 56px !important; }
    .section .rule-bot{ bottom: 56px !important; }

    .nav{
      position: relative !important;
      top: auto !important; left: auto !important; right: auto !important;
      padding: 88px 22px 16px !important;
      flex-wrap: wrap; gap: 12px;
    }
    .nav-mark{ width: 28px !important; height: 28px !important; }
    .nav-wordmark{ font-size: 16px !important; }
    .nav-links{ display: none !important; }

    .hero{
      padding: 0 22px !important;
      min-height: auto !important;
    }
    .hero-mark-watermark{
      opacity: 0.10 !important;
      width: 60% !important;
    }
    .hero h1{
      font-size: 28px !important;
      line-height: 1.12 !important;
      letter-spacing: -0.01em !important;
      word-wrap: break-word !important;
      overflow-wrap: break-word !important;
      max-width: 100% !important;
      width: 100% !important;
      box-sizing: border-box;
    }
    /* Keep the original line breaks on mobile, they wrap at intentional points */
    .hero h1 br{ display: inline; }
    .hero .subtitle{
      flex-wrap: wrap;
      font-size: 15px !important;
      max-width: 100%;
    }
    .hero-eyebrow{
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 12px !important;
    }
    .eyebrow{
      font-size: 10px !important;
      letter-spacing: 0.16em !important;
    }
    .pill, .booking-pill{
      font-size: 9px !important;
      padding: 5px 10px !important;
      letter-spacing: 0.1em !important;
      max-width: 100%;
    }
    .hero .ctas, .ctas{
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 10px !important;
    }
    .hero .meta-stack, .meta-stack{
      display: flex !important;
      flex-direction: column !important;
      grid-template-columns: 1fr !important;
      gap: 20px !important;
      align-items: flex-start !important;
      padding-top: 32px !important;
      margin-top: 32px !important;
    }
    .hero .meta-stack .v-rule, .meta-stack .v-rule{ display: none !important; }
    .hero .meta-stack .stat,
    .meta-stack .stat{
      text-align: left !important;
      width: 100% !important;
    }
    .hero .meta-stack .stat .lbl,
    .meta-stack .stat .lbl{
      margin-bottom: 6px !important;
      font-size: 10px !important;
    }
    .hero .meta-stack .stat .val,
    .meta-stack .stat .val{
      font-size: 20px !important;
      line-height: 1.25 !important;
    }
    .subtitle{ font-size: 16px !important; }

    h2,
    .approach h2,
    .services h2,
    .speaking h2,
    .founders h2,
    .practice h2,
    .footer h2{
      font-size: 32px !important;
      line-height: 1.1 !important;
      letter-spacing: -0.01em !important;
      max-width: 100% !important;
      width: 100% !important;
      word-wrap: break-word !important;
      overflow-wrap: break-word !important;
    }
    /* Section headline wrappers, break stacked layouts to single column */
    .approach .head,
    .services .head,
    .speaking .head,
    .founders .head,
    .practice .head{
      grid-template-columns: 1fr !important;
      gap: 20px !important;
      align-items: start !important;
    }
    /* Eyebrows and sub-text below */
    .approach .body p,
    .services .body p,
    .speaking .body p,
    .practice .body p{
      font-size: 17px !important;
      line-height: 1.55 !important;
    }
    /* Card heading sizing on mobile */
    .speaking .talk h3,
    .practice .case h3,
    .services .service h3,
    .founders .founder-card h3,
    .talk h3, .case h3, .service h3{
      font-size: 22px !important;
      line-height: 1.2 !important;
    }
    .service .name, .talk .name, .case .client{
      font-size: 20px !important;
      line-height: 1.25 !important;
    }
    .service p, .talk p, .case p{
      font-size: 15px !important;
      line-height: 1.55 !important;
    }
    .service .num, .talk .num, .case .num{
      font-size: 11px !important;
    }
    /* Founders bio text */
    .founders .founder-card .bio,
    .founders .founder-card .role{
      font-size: 15px !important;
    }
    .founders .founder-card .creds{
      font-size: 11px !important;
      line-height: 1.6 !important;
    }
    /* Marquee on mobile, smaller and tighter */
    .marquee-item{ padding: 0 32px !important; height: 56px !important; }
    .marquee-item img{ max-height: 40px !important; max-width: 140px !important; }
    .trusted-by{ margin-top: 56px !important; padding: 24px 0 !important; }
    .trusted-by .lbl{ font-size: 10px !important; margin-bottom: 16px !important; }

    /* Speaking venues, stack vertically on mobile, each venue on its own line */
    .speaking .venues{
      display: flex !important;
      flex-direction: column !important;
      grid-template-columns: 1fr !important;
      gap: 16px !important;
      align-items: flex-start !important;
      margin-top: 48px !important;
      padding-top: 28px !important;
    }
    .speaking .venues .lbl{
      font-size: 10px !important;
      margin-bottom: 4px !important;
    }
    .speaking .venues .list{
      font-size: 18px !important;
      line-height: 1.35 !important;
    }
    /* Convert the inline · separators into line breaks on mobile */
    .speaking .venues .list .sep{
      display: block !important;
      font-size: 0 !important;
      margin: 0 !important;
      height: 6px !important;
    }
    /* Approach body two-column → single column, principles tighter */
    .approach .columns,
    .approach .grid-two,
    .principles{
      grid-template-columns: 1fr !important;
      gap: 24px !important;
    }
    /* Eyebrow / section numerals tighter on mobile */
    .eyebrow .num{ display: inline !important; }

    .grid,
    .services .grid,
    .approach .grid,
    .practice .grid,
    .founders .grid,
    .footer .grid,
    .speaking .talks,
    .speaking .grid{
      display: flex !important;
      flex-direction: column !important;
      grid-template-columns: 1fr !important;
      gap: 24px !important;
    }
    /* Cancel any grid-column span overrides, they break flex single-column on mobile */
    .service.span-2,
    .service[class*="span"],
    .talk[class*="span"],
    .case[class*="span"]{
      grid-column: auto !important;
      width: 100% !important;
    }

    .service, .talk, .case, .founder-card,
    .service-card, .case-card, .talk-card{
      padding: 28px !important;
      width: 100% !important;
      border-left: 1px solid rgba(31,58,95,0.4) !important;
    }
    .founder-card .photo{ aspect-ratio: 4/5; }

    .contact-list .item{
      grid-template-columns: 1fr !important;
      gap: 4px !important;
    }
    .contact-list .item .who{ font-size: 18px !important; }

    .trusted-by .list{ font-size: 10px !important; gap: 8px 14px !important; }

    .btn{
      padding: 14px 22px !important;
      font-size: 11px !important;
      min-height: 48px;
      width: 100%;
      justify-content: center;
    }

    /* Bigger touch targets everywhere */
    a, button{ min-height: 44px; }
  }

  /* ============================================================
     PRINT, clean PDF export
     ============================================================ */
  @media print{
    html, body{ background: var(--paper); }
    .section.dark, .footer{ background: var(--paper) !important; color: var(--navy) !important; }
    .section.dark *, .footer *{ color: var(--navy) !important; }
    .chrome, nav.main-nav, .footer-mark{ display: none; }
    .section{ break-inside: avoid; page-break-inside: avoid; }
  }

  /* Reduce motion for users who prefer it */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* ============================================================
     MULTI-PAGE EXTENSIONS
     Added when site converted from single-scrolling page to /sub-pages.
     ============================================================ */

  /* Reset link defaults that interfere with card-style anchors */
  a.teaser-card,
  a.nav-left{ text-decoration: none; color: inherit; }

  /* ---- Site nav (now a real nav, not absolute-positioned inside hero) ---- */
  nav.site-nav{
    position: sticky; top: 0; z-index: 50;
    display: flex; justify-content: space-between; align-items: center;
    background: var(--paper);
    padding: 22px 96px;
    border-bottom: 1px solid rgba(31,58,95,0.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  nav.site-nav .nav-links a.active{ color: var(--clay); }

  /* ---- Page section: shared top padding for sub-pages ---- */
  .page-section{ min-height: 100vh; }
  .page-section .page-head{ margin-top: 36px; margin-bottom: 56px; max-width: 1100px; }
  .page-section .page-h2{
    font-family: var(--serif);
    font-weight: 500;
    font-size: 80px;
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--navy);
    margin: 24px 0 0 0;
  }
  .page-section .page-h2 .ital{ font-style: italic; color: var(--clay); }
  .page-section .page-h2 .clay-period{ color: var(--clay); }
  .section.dark .page-h2{ color: var(--paper); }
  .page-section .head-meta{
    margin-top: 28px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    color: var(--slate);
    line-height: 1.4;
    text-align: left;
    max-width: 1200px;
    white-space: normal;
  }

  .page-cta{
    margin-top: 96px;
    display: flex;
    gap: 18px;
    padding-top: 32px;
    border-top: 1px solid rgba(31,58,95,0.15);
  }
  .section.dark .page-cta{ border-top-color: rgba(245,241,234,0.18); }

  /* ---- Home teaser grid ---- */
  .section.teasers{ min-height: auto; padding-bottom: 140px; }
  .teaser-grid{
    margin-top: 72px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    border-top: 1px solid rgba(31,58,95,0.4);
    border-left: 1px solid rgba(31,58,95,0.4);
  }
  .teaser-card{
    display: flex; flex-direction: column;
    padding: 44px 40px;
    border-right: 1px solid rgba(31,58,95,0.4);
    border-bottom: 1px solid rgba(31,58,95,0.4);
    background: var(--paper);
    cursor: pointer;
    transition: background 200ms ease;
    min-height: 280px;
  }
  .teaser-card:hover{ background: rgba(184,118,90,0.04); }
  .teaser-num{
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--clay);
    font-weight: 600;
    margin-bottom: 20px;
  }
  .teaser-card h3{
    font-family: var(--serif);
    font-weight: 500;
    font-size: 32px;
    line-height: 1.1;
    color: var(--navy);
    margin: 0 0 16px 0;
  }
  .teaser-card p{
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--slate);
    margin: 0;
    flex: 1;
  }
  .teaser-more{
    margin-top: 24px;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--clay);
    font-weight: 600;
  }
  .teaser-more .arrow{ font-family: var(--serif); font-style: italic; }

  /* ---- Lightweight site footer ---- */
  .site-footer{
    background: var(--dark);
    color: var(--paper);
    padding: 80px 96px 56px;
  }
  .site-footer-inner{ max-width: 1600px; margin: 0 auto; }
  .site-footer-top{
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(245,241,234,0.18);
  }
  .site-footer-brand{ display: flex; align-items: center; gap: 14px; }
  .footer-mark-small{ width: 36px; height: 36px; opacity: 0.5; }
  .footer-mark-small img{ width: 100%; height: 100%; object-fit: contain; }
  .footer-wordmark{
    font-family: var(--serif); font-weight: 500; font-size: 22px;
    color: var(--paper); letter-spacing: -0.01em;
  }
  .footer-wordmark .ital{ font-style: italic; color: var(--clay); }
  .site-footer-tagline{
    font-family: var(--serif); font-style: italic;
    font-size: 20px; color: rgba(245,241,234,0.7);
  }
  .site-footer-mid{
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 64px;
    padding: 56px 0;
  }
  .footer-col .footer-lbl{
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--clay);
    font-weight: 600;
    margin-bottom: 20px;
  }
  .footer-col ul{ list-style: none; padding: 0; margin: 0; }
  .footer-col li{
    font-family: var(--sans);
    font-size: 14px;
    color: rgba(245,241,234,0.85);
    line-height: 1.8;
  }
  .footer-col a{ color: inherit; transition: color 200ms ease; }
  .footer-col a:hover{ color: var(--clay); }
  .footer-col .ital{ font-style: italic; color: var(--clay); }
  .site-footer-bottom{
    padding-top: 32px;
    border-top: 1px solid rgba(245,241,234,0.18);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: rgba(245,241,234,0.55);
    text-transform: uppercase;
  }
  .site-footer-bottom .center{ text-align: center; }
  .site-footer-bottom .right{ text-align: right; }

  /* ---- Principles list on Approach page ---- */
  .approach-body{
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 96px;
    margin-top: 32px;
  }
  .approach-prose p{
    font-family: var(--serif);
    font-size: 22px;
    line-height: 1.5;
    color: var(--navy);
    margin: 0 0 24px 0;
  }
  .principles{ display: flex; flex-direction: column; gap: 24px; }
  .principle{
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 20px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(31,58,95,0.15);
  }
  .principle:last-child{ border-bottom: 0; padding-bottom: 0; }
  .principle-num{
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.18em;
    color: var(--clay);
    font-weight: 600;
    padding-top: 4px;
  }
  .principle-text{
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--navy);
  }
  .principle-text strong{ font-weight: 600; }

  /* ---- Mobile adjustments for new components ---- */
  @media (max-width: 1024px){
    nav.site-nav{ padding: 18px 48px; }
    .site-footer{ padding: 64px 48px 48px; }
    .teaser-grid{ grid-template-columns: 1fr 1fr; }
    .page-section .page-h2{ font-size: 56px !important; }
    .site-footer-mid{ grid-template-columns: 1fr 1fr; gap: 48px; }
    .site-footer-mid .footer-col:last-child{ grid-column: 1 / -1; }
    .approach-body{ grid-template-columns: 1fr !important; gap: 48px !important; }
  }

  @media (max-width: 640px){
    nav.site-nav{
      position: sticky;
      top: 0;
      padding: 14px 22px !important;
      flex-wrap: wrap;
      gap: 8px;
    }
    nav.site-nav .nav-mark{ width: 28px !important; height: 28px !important; }
    nav.site-nav .nav-wordmark{ font-size: 14px !important; }
    nav.site-nav .nav-links{
      display: flex !important;
      width: 100%;
      gap: 14px !important;
      flex-wrap: wrap;
      padding-top: 6px;
    }
    nav.site-nav .nav-links a{ font-size: 10px !important; }

    .page-section{ min-height: auto !important; }
    .page-section .page-h2{ font-size: 32px !important; line-height: 1.1 !important; }
    .page-section .page-head{ margin-top: 16px !important; margin-bottom: 32px !important; }
    .page-section .head-meta{ font-size: 18px !important; }
    .page-cta{
      flex-direction: column !important;
      gap: 12px !important;
      margin-top: 56px !important;
    }
    .page-cta .btn{ width: 100% !important; }

    .teaser-grid{
      grid-template-columns: 1fr !important;
      margin-top: 32px !important;
    }
    .teaser-card{ padding: 32px 24px !important; min-height: auto !important; }
    .teaser-card h3{ font-size: 24px !important; }

    .site-footer{ padding: 56px 24px 32px !important; }
    .site-footer-top{
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      padding-bottom: 28px;
    }
    .site-footer-tagline{ font-size: 16px !important; }
    .site-footer-mid{
      grid-template-columns: 1fr !important;
      gap: 32px !important;
      padding: 32px 0 !important;
    }
    .site-footer-bottom{
      grid-template-columns: 1fr !important;
      gap: 8px !important;
    }
    .site-footer-bottom .center, .site-footer-bottom .right{ text-align: left; }

    .approach-body{ gap: 32px !important; }
    .approach-prose p{ font-size: 17px !important; line-height: 1.55 !important; }
    .principle{ grid-template-columns: 40px 1fr !important; gap: 12px !important; }
    .principle-num{ font-size: 11px !important; }
    .principle-text{ font-size: 14px !important; }
  }

  /* ============================================================
     HOME TRUSTED BY STRIP
     A thin, breathing band between hero and teaser grid on the home page.
     ============================================================ */
  .section.home-trusted{
    min-height: auto;
    padding: 56px 96px;
    overflow: visible;
  }
  .home-trusted-by{
    margin-top: 0;
    padding: 28px 0;
  }
  .home-trusted-by .lbl{
    display: block;
    text-align: center;
    margin-bottom: 20px;
  }

  @media (max-width: 1024px){
    .section.home-trusted{ padding: 48px 48px; }
  }
  @media (max-width: 640px){
    .section.home-trusted{ padding: 32px 24px !important; }
    .home-trusted-by{ padding: 16px 0 !important; }
    .home-trusted-by .lbl{ margin-bottom: 12px !important; }
  }

  /* ============================================================
     TESTIMONIALS SECTION (Home page)
     Editorial pull-quote treatment, vertical stack of named quotes.
     ============================================================ */
  .section.testimonials{
    min-height: auto;
    padding: 120px 96px 120px;
  }
  .testimonials-head{ margin-top: 24px; margin-bottom: 80px; max-width: 1100px; }
  .testimonial-list{
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 1100px;
    margin: 0 auto;
  }
  .testimonial{
    position: relative;
    padding: 64px 0;
    border-top: 1px solid rgba(31,58,95,0.15);
  }
  .testimonial:first-child{ border-top: 1px solid rgba(31,58,95,0.4); }
  .testimonial:last-child{ border-bottom: 1px solid rgba(31,58,95,0.4); }
  .testimonial .mark{
    position: absolute;
    top: 24px; left: -24px;
    font-family: var(--serif);
    font-size: 96px;
    line-height: 1;
    color: var(--clay);
    font-style: italic;
    pointer-events: none;
    user-select: none;
  }
  .testimonial blockquote{
    margin: 0;
    padding: 0;
  }
  .testimonial blockquote p{
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 28px;
    line-height: 1.5;
    color: var(--navy);
    margin: 0 0 24px 0;
  }
  .testimonial blockquote p:last-child{ margin-bottom: 0; }
  .testimonial .attribution{
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid rgba(31,58,95,0.12);
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .testimonial .attribution .name{
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--navy);
    text-transform: none;
  }
  .testimonial .attribution .name .creds{
    font-weight: 400;
    color: var(--slate);
    font-size: 12px;
    margin-left: 8px;
  }
  .testimonial .attribution .title{
    font-family: var(--serif);
    font-style: italic;
    font-size: 16px;
    color: var(--slate);
    line-height: 1.3;
  }
  .testimonial .attribution .org{
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--slate);
  }
  .testimonial .attribution .org .sep{ color: var(--clay); margin: 0 8px; }

  @media (max-width: 1024px){
    .section.testimonials{ padding: 80px 48px; }
    .testimonial blockquote p{ font-size: 22px; }
    .testimonial .mark{ left: -12px; font-size: 72px; }
  }
  @media (max-width: 640px){
    .section.testimonials{ padding: 56px 24px !important; }
    .testimonials-head{ margin-bottom: 40px !important; }
    .testimonial{ padding: 36px 0 !important; }
    .testimonial blockquote p{ font-size: 18px !important; line-height: 1.5 !important; margin-bottom: 16px !important; }
    .testimonial .mark{ position: static !important; font-size: 48px !important; line-height: 0.5 !important; margin-bottom: 8px; }
    .testimonial .attribution{ margin-top: 24px !important; padding-top: 16px !important; }
    .testimonial .attribution .name{ font-size: 13px !important; }
    .testimonial .attribution .name .creds{ display: block; margin-left: 0 !important; margin-top: 2px; }
    .testimonial .attribution .title{ font-size: 14px !important; }
    .testimonial .attribution .org{ font-size: 10px !important; }
  }

  /* ============================================================
     TESTIMONIAL CAROUSEL (Home page, compact)
     Replaces the vertical stack version. One quote visible at a time,
     fades to the next every ~8s, dot navigation, pauses on hover.
     ============================================================ */
  .section.testimonials-carousel-section{
    min-height: auto;
    padding: 96px 96px;
  }
  .testimonials-head-compact{
    margin-top: 24px;
    margin-bottom: 56px;
    max-width: 1100px;
  }
  .testimonial-carousel{
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 24px;
  }
  .carousel-track{
    position: relative;
    min-height: 360px;
  }
  .testimonial-slide{
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 600ms ease, visibility 600ms ease;
    pointer-events: none;
  }
  .testimonial-slide.is-active{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    position: relative;
  }
  .testimonial-slide .mark{
    font-family: var(--serif);
    font-size: 80px;
    line-height: 0.5;
    color: var(--clay);
    font-style: italic;
    margin-bottom: 16px;
    user-select: none;
  }
  .testimonial-slide blockquote{ margin: 0; padding: 0; }
  .testimonial-slide blockquote p{
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.5;
    color: var(--navy);
    margin: 0 0 20px 0;
  }
  .testimonial-slide blockquote p:last-child{ margin-bottom: 0; }
  .testimonial-slide .attribution{
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid rgba(31,58,95,0.18);
  }
  .testimonial-slide .attribution .name{
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
  }
  .testimonial-slide .attribution .name .creds{
    font-weight: 400;
    color: var(--slate);
    font-size: 12px;
    margin-left: 8px;
  }
  .testimonial-slide .attribution .title{
    font-family: var(--serif);
    font-style: italic;
    font-size: 16px;
    color: var(--slate);
    margin-top: 2px;
  }
  .testimonial-slide .attribution .org{
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--slate);
    margin-top: 6px;
  }
  .testimonial-slide .attribution .org .sep{ color: var(--clay); margin: 0 8px; }

  .carousel-controls{
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 48px;
  }
  .carousel-controls .dot{
    width: 9px;
    height: 9px;
    border-radius: 999px;
    border: 1px solid var(--navy);
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: background 200ms ease, transform 200ms ease;
  }
  .carousel-controls .dot:hover{ background: rgba(31,58,95,0.25); }
  .carousel-controls .dot.is-active{
    background: var(--clay);
    border-color: var(--clay);
    transform: scale(1.2);
  }
  .carousel-controls .dot:focus-visible{ outline: 2px solid var(--clay); outline-offset: 3px; }

  @media (max-width: 1024px){
    .section.testimonials-carousel-section{ padding: 72px 48px; }
    .testimonial-slide blockquote p{ font-size: 20px; }
    .carousel-track{ min-height: 380px; }
  }
  @media (max-width: 640px){
    .section.testimonials-carousel-section{ padding: 56px 24px !important; }
    .testimonials-head-compact{ margin-bottom: 32px !important; }
    .testimonial-carousel{ padding: 0 !important; }
    .testimonial-slide .mark{ font-size: 48px !important; line-height: 0.5 !important; margin-bottom: 8px !important; }
    .testimonial-slide blockquote p{ font-size: 17px !important; line-height: 1.5 !important; margin-bottom: 14px !important; }
    .testimonial-slide .attribution{ margin-top: 24px !important; padding-top: 16px !important; }
    .testimonial-slide .attribution .name{ font-size: 13px !important; }
    .testimonial-slide .attribution .name .creds{ display: block; margin-left: 0 !important; margin-top: 2px; }
    .testimonial-slide .attribution .title{ font-size: 14px !important; }
    .testimonial-slide .attribution .org{ font-size: 10px !important; }
    .carousel-track{ min-height: 480px; }
    .carousel-controls{ margin-top: 32px !important; }
  }

  /* ============================================================
     SPEAKING PROJECTS — Video grid
     YouTube embeds in 16:9 frames, 3-column grid on desktop, stack on mobile.
     ============================================================ */
  .speaking-projects .video-grid{
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
  }
  .video-card{
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid rgba(31,58,95,0.18);
  }
  .video-frame{
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--dark);
    overflow: hidden;
  }
  .video-frame iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }
  .video-caption{
    padding: 22px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid rgba(31,58,95,0.12);
  }
  .video-num{
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--clay);
    font-weight: 600;
  }
  .video-link{
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--navy);
    font-weight: 600;
    transition: color 200ms ease;
  }
  .video-link:hover{ color: var(--clay); }
  .video-link .arrow{ font-family: var(--serif); font-style: italic; }

  @media (max-width: 1024px){
    .speaking-projects .video-grid{
      grid-template-columns: 1fr 1fr;
      gap: 28px;
    }
  }
  @media (max-width: 640px){
    .speaking-projects .video-grid{
      grid-template-columns: 1fr !important;
      gap: 24px !important;
    }
    .video-caption{ padding: 16px 20px; flex-wrap: wrap; gap: 8px; }
    .video-num{ font-size: 10px !important; }
    .video-link{ font-size: 11px !important; }
  }

  /* ============================================================
     TESTIMONIAL CAROUSEL ARROWS
     Clay-colored circular buttons on either side for prev/next navigation.
     ============================================================ */
  .carousel-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: 1px solid var(--clay);
    background: transparent;
    color: var(--clay);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    padding: 0;
    transition: background 200ms ease, color 200ms ease, transform 200ms ease, border-color 200ms ease;
  }
  .carousel-arrow:hover{
    background: var(--clay);
    color: var(--paper);
    transform: translateY(-50%) scale(1.08);
  }
  .carousel-arrow:focus-visible{
    outline: 2px solid var(--clay);
    outline-offset: 4px;
  }
  .carousel-arrow.prev{ left: -72px; }
  .carousel-arrow.next{ right: -72px; }
  .carousel-arrow svg{ display: block; }

  @media (max-width: 1200px){
    /* On narrower viewports the arrows tuck into the carousel's inner edges */
    .carousel-arrow.prev{ left: 0; }
    .carousel-arrow.next{ right: 0; }
    .testimonial-carousel{ padding: 0 64px; }
  }
  @media (max-width: 640px){
    .carousel-arrow{
      width: 40px; height: 40px;
    }
    .carousel-arrow.prev{ left: -8px; }
    .carousel-arrow.next{ right: -8px; }
    .testimonial-carousel{ padding: 0 44px !important; }
  }

  /* ============================================================
     HAMBURGER NAV — Mobile-only toggle, full-screen overlay menu
     ============================================================ */
  .nav-toggle{
    display: none;
    width: 44px; height: 44px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    position: relative;
    z-index: 60;
  }
  .nav-toggle .bar{
    display: block;
    width: 22px;
    height: 2px;
    background: var(--navy);
    border-radius: 2px;
    transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 200ms ease;
  }
  /* Animate the three bars into an X when the menu is open */
  body.nav-open .nav-toggle .bar:nth-child(1){
    transform: translateY(7px) rotate(45deg);
    background: var(--clay);
  }
  body.nav-open .nav-toggle .bar:nth-child(2){ opacity: 0; }
  body.nav-open .nav-toggle .bar:nth-child(3){
    transform: translateY(-7px) rotate(-45deg);
    background: var(--clay);
  }

  @media (max-width: 768px){
    /* Compact header: only logo + hamburger visible; nav-links overlay on tap */
    .nav-toggle{ display: flex; margin-left: auto; }
    nav.site-nav{
      padding: 12px 22px !important;
      flex-wrap: nowrap !important;
      min-height: 64px;
      gap: 0 !important;
    }
    nav.site-nav .nav-left{
      flex: 0 1 auto;
      min-width: 0;
      overflow: hidden;
    }
    nav.site-nav .nav-mark{ width: 28px !important; height: 28px !important; flex-shrink: 0; }
    nav.site-nav .nav-wordmark{
      font-size: 15px !important;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Hidden by default — overlay slides in when body.nav-open */
    nav.site-nav .nav-links{
      position: fixed;
      inset: 0;
      background: var(--paper);
      display: flex !important;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 28px !important;
      padding: 80px 24px !important;
      z-index: 50;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-12px);
      transition: opacity 280ms ease,
                  visibility 280ms ease,
                  transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
      pointer-events: none;
    }
    body.nav-open nav.site-nav .nav-links{
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }
    /* Larger, more tappable links in the overlay */
    nav.site-nav .nav-links a{
      font-size: 18px !important;
      letter-spacing: 0.16em !important;
      padding: 10px 0;
      color: var(--navy);
    }
    nav.site-nav .nav-links a.active{ color: var(--clay); }

    /* Prevent the page from scrolling while the overlay is open */
    body.nav-open{ overflow: hidden; }
  }

  /* ============================================================
     LEGAL PAGES — Privacy / Terms / Legal & Accessibility
     Editorial long-form treatment for body text and headings.
     ============================================================ */
  .legal-page .legal-body{
    max-width: 760px;
    margin: 32px 0 64px;
  }
  .legal-page .legal-body h3{
    font-family: var(--serif);
    font-weight: 500;
    font-size: 28px;
    line-height: 1.2;
    color: var(--navy);
    margin: 48px 0 16px;
    letter-spacing: -0.01em;
  }
  .legal-page .legal-body h3:first-child{ margin-top: 0; }
  .legal-page .legal-body p,
  .legal-page .legal-body li{
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    color: var(--navy);
    margin: 0 0 18px;
  }
  .legal-page .legal-body ul{
    padding-left: 24px;
    margin: 0 0 18px;
  }
  .legal-page .legal-body li{ margin-bottom: 8px; }
  .legal-page .legal-body a{
    color: var(--clay);
    text-decoration: underline;
    text-decoration-color: rgba(184,118,90,0.4);
    text-underline-offset: 3px;
    transition: text-decoration-color 200ms ease;
  }
  .legal-page .legal-body a:hover{ text-decoration-color: var(--clay); }
  .legal-page .legal-body strong{ font-weight: 600; color: var(--navy); }

  @media (max-width: 1024px){
    .legal-page .legal-body h3{ font-size: 24px; margin-top: 36px; }
  }
  @media (max-width: 640px){
    .legal-page .legal-body{ margin: 16px 0 40px; }
    .legal-page .legal-body h3{ font-size: 22px !important; margin-top: 28px !important; }
    .legal-page .legal-body p,
    .legal-page .legal-body li{ font-size: 15px !important; line-height: 1.6 !important; }
  }

  /* ============================================================
     HAMBURGER OVERLAY — Specificity overrides for mobile
     The earlier @media (max-width: 640px) rule forces flex-wrap on .nav-links;
     these rules win to force the vertical overlay layout when nav-open.
     ============================================================ */
  @media (max-width: 768px){
    body nav.site-nav .nav-links,
    body nav.site-nav .nav-links#nav-links{
      flex-direction: column !important;
      flex-wrap: nowrap !important;
      width: 100% !important;
      height: 100% !important;
      gap: 28px !important;
      padding: 80px 24px !important;
    }
    body nav.site-nav .nav-links a{
      font-size: 20px !important;
      letter-spacing: 0.18em !important;
      width: auto !important;
      text-align: center;
    }
  }

  /* ============================================================
     HAMBURGER OVERLAY — Final positioning fix
     Force full-viewport fixed overlay with all 6 links centered.
     ============================================================ */
  @media (max-width: 768px){
    body nav.site-nav .nav-links{
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      background: var(--paper) !important;
      flex-direction: column !important;
      flex-wrap: nowrap !important;
      justify-content: center !important;
      align-items: center !important;
      gap: 24px !important;
      padding: 80px 24px !important;
      z-index: 50 !important;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 280ms ease, visibility 280ms ease;
    }
    body.nav-open nav.site-nav .nav-links{
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
    }
  }

  /* ============================================================
     HAMBURGER OVERLAY — Containing block fix
     backdrop-filter on .site-nav creates a containing block that traps
     position:fixed children. Removing it on mobile so the overlay can
     escape to the viewport.
     ============================================================ */
  @media (max-width: 768px){
    nav.site-nav{
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      transform: none !important;
      filter: none !important;
    }
  }

  /* ============================================================
     MOBILE TIGHTEN-UP — Reduce excess vertical spacing
     Targets: hero, meta-stack, trusted-by, and carousel dot proportions.
     ============================================================ */
  @media (max-width: 640px){

    /* Hero — kill the giant 1fr grid rows that produce huge vertical gaps */
    .hero{
      min-height: auto !important;
      padding: 0 22px !important;
    }
    .hero .inner{
      grid-template-rows: auto auto auto !important;
      padding: 24px 0 32px !important;
      gap: 0 !important;
    }
    .hero .top-spacer{ display: none !important; }
    .hero-mark-watermark{
      width: 40% !important;
      max-width: 220px !important;
      top: 80px !important;
      right: 14px !important;
      opacity: 0.08 !important;
    }
    .hero-eyebrow{ margin-bottom: 18px !important; }
    .hero h1{ margin-top: 8px !important; }
    .hero .subtitle{ margin-top: 14px !important; }
    .hero .ctas{ margin-top: 28px !important; }

    /* Meta-stack (Founded · Practice · Based in) — tighter stacked layout */
    .hero .meta-stack, .meta-stack{
      padding-top: 24px !important;
      margin-top: 24px !important;
      gap: 14px !important;
    }
    .hero .meta-stack .stat .lbl,
    .meta-stack .stat .lbl{
      margin-bottom: 4px !important;
    }
    .hero .meta-stack .stat .val,
    .meta-stack .stat .val{
      font-size: 18px !important;
      line-height: 1.2 !important;
    }

    /* Trusted-by strip on home — much tighter on mobile */
    .section.home-trusted{
      padding: 24px 22px !important;
    }
    .home-trusted-by{
      padding: 12px 0 !important;
    }
    .home-trusted-by .lbl{
      margin-bottom: 8px !important;
    }
    .marquee-item{ height: 48px !important; padding: 0 24px !important; }
    .marquee-item img{ max-height: 32px !important; max-width: 120px !important; }

    /* Section padding on home becomes tighter overall */
    .section.teasers,
    .section.testimonials-carousel-section{
      padding: 56px 22px !important;
    }
    .testimonials-head-compact{
      margin-top: 12px !important;
      margin-bottom: 24px !important;
    }

    /* CAROUSEL DOTS — override the global touch-target min-height so dots stay circular */
    .carousel-controls .dot{
      min-height: 0 !important;
      width: 10px !important;
      height: 10px !important;
      padding: 0 !important;
      flex-shrink: 0;
    }
    /* Make the dot CONTAINER large enough to tap, without resizing the dot itself */
    .carousel-controls{
      gap: 16px !important;
      padding: 10px 0;
    }
  }

  /* ============================================================
     HERO MOBILE — Fix chrome overlap with eyebrow
     The hero's chrome-top + rule-top use inline styles tuned for desktop
     (top: 130px / 158px to clear an old absolute-positioned nav).
     On mobile, force them to standard section chrome position and push
     the inner content down to clear them.
     ============================================================ */
  @media (max-width: 640px){
    /* Force the hero chrome to standard section-top position, overriding inline */
    .hero .chrome-top{ top: 16px !important; }
    .hero .rule-top{ top: 50px !important; }
    .hero .chrome-top span,
    .hero .chrome-bot span{ font-size: 9px !important; letter-spacing: 0.14em !important; }

    /* Push hero content down so it clears the chrome */
    .hero .inner{
      padding: 76px 0 32px !important;
    }
  }

  /* ============================================================
     MOBILE MICRO-ADJUSTMENTS — chrome breathing room + tighter
     gap between hero and trusted-by strip
     ============================================================ */
  @media (max-width: 640px){
    /* Give the wrapped chrome text more room before the hairline rule */
    .hero .chrome-top{ top: 12px !important; }
    .hero .rule-top{ top: 66px !important; }
    .hero .inner{ padding: 88px 0 20px !important; }

    /* Tighter top padding on the trusted-by strip so the meta-stack flows
       cleanly into the logo band without a dead-space gap */
    .section.home-trusted{ padding: 14px 22px 24px !important; }
    .home-trusted-by{ padding: 8px 0 !important; }
  }