/* ─── RESET ──────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* ─── DESIGN TOKENS ──────────────────────────────────────────── */
    /*
      Background:  #13151f  deep cool slate
      Gold:        #6e633a  editorial voice — headlines, eyebrow, rule
      Teal:        #0a435b  action — CTA button, nav book button
      Cream:       #ede7d8  primary text
      Muted:       #8a8275  secondary text
    */
    :root {
      --bg:         #13151f;
      --bg-2:       #191c2a;
      --gold:       #a09054;
      --gold-hi:    #b0a060;
      --teal:       #4d8aa6;
      --teal-hi:    #5c9dba;
      --cream:      #ede7d8;
      --muted:      #d8d4cc;
      --rule:       rgba(160, 144, 84, 0.18);
      --rule-solid: rgba(160, 144, 84, 0.48);
    }

    /* ─── BASE ───────────────────────────────────────────────────── */
    html { scroll-behavior: smooth; }

    body {
      background-color: var(--bg);
      color: var(--cream);
      font-family: 'Lora', serif;
      font-weight: 400;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* ─── GRAIN ──────────────────────────────────────────────────── */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 9999;
      pointer-events: none;
      opacity: 0.10;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23g)'/%3E%3C/svg%3E");
      background-size: 400px 400px;
    }

    /* ─── NAV ────────────────────────────────────────────────────── */
    .nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.6rem 3.5rem;
      background: linear-gradient(to bottom,
        rgba(19, 21, 31, 0.96) 0%,
        rgba(19, 21, 31, 0.0) 100%);
    }

    .nav-brand {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.35rem;
      font-weight: 600;
      letter-spacing: 0.07em;
      color: var(--cream);
      text-decoration: none;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 2.5rem;
      list-style: none;
    }

    .nav-links a {
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--muted);
      text-decoration: none;
      transition: color 0.2s;
    }

    .nav-links a:hover { color: var(--cream); }

    .nav-book {
      background: var(--teal) !important;
      color: var(--cream) !important;
      padding: 0.55rem 1.4rem !important;
      border-radius: 2px;
      transition: background 0.2s !important;
    }

    .nav-book:hover { background: var(--teal-hi) !important; }

    /* ─── NAV DROPDOWN ──────────────────────────────────────────── */
    .nav-brand-wrap { position: relative; }
    .nav-brand-chevron {
      display: inline-block;
      vertical-align: middle;
      margin-left: 0.3rem;
      opacity: 0.55;
      transition: transform 0.2s;
    }
    .nav-brand-wrap.open  .nav-brand-chevron { transform: rotate(180deg); opacity: 1; }
    .nav-dropdown {
      position: absolute;
      top: calc(100% + 0.65rem);
      left: 0;
      background: rgba(19, 21, 31, 0.97);
      border: 1px solid var(--rule);
      border-radius: 2px;
      min-width: 280px;
      padding: 0.5rem 0;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-5px);
      transition: opacity 0.18s, transform 0.18s;
      backdrop-filter: blur(12px);
      z-index: 300;
    }
    .nav-brand-wrap.open  .nav-dropdown {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
    .nav-dropdown-header {
      padding: 0.7rem 1.25rem 0.45rem;
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: var(--gold);
      opacity: 0.85;
    }
    .nav-dropdown-item {
      display: block;
      padding: 0.8rem 1.25rem;
      font-family: 'Lora', serif;
      font-size: 0.9rem;
      font-weight: 400;
      color: var(--muted);
      text-decoration: none;
      transition: color 0.18s, background 0.18s;
      white-space: nowrap;
      border-bottom: 1px solid var(--rule);
    }
    .nav-dropdown-item:last-child { border-bottom: none; }
    .nav-dropdown-item:hover { color: var(--cream); background: rgba(160, 144, 84, 0.06); }
    /* Invisible bridge fills the gap between brand link and dropdown menu */
    .nav-dropdown::before {
      content: '';
      position: absolute;
      top: -0.75rem;
      left: -0.5rem;
      right: -0.5rem;
      height: 0.75rem;
    }

    /* ─── FOOTER ICON LINKS ──────────────────────────────────────── */
    .footer-icon-link {
      color: var(--muted);
      opacity: 0.6;
      display: flex;
      align-items: center;
      transition: color 0.2s, opacity 0.2s;
    }
    .footer-icon-link:hover { color: var(--cream); opacity: 1; }

    /* ─── HERO ───────────────────────────────────────────────────── */
    #hero {
      position: relative;
      min-height: 100vh;
      display: grid;
      grid-template-columns: 62% 38%;
    }

    .hero-left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 14rem 4rem 5rem 3.5rem;
      position: relative;
      z-index: 2;
    }

    .hero-eyebrow {
      position: absolute;
      top: 9rem;
      left: 3.5rem;
      font-size: 0.82rem;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold);
      opacity: 0.55;
      margin: 0;
    }

    .hero-h1 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2.6rem, 4vw, 4.6rem);
      font-weight: 700;
      font-style: normal;
      line-height: 1.01;
      letter-spacing: -0.025em;
      color: var(--cream);
      margin-bottom: 0.12em;
    }

    .hero-h1-cont {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2.2rem, 3.5vw, 4.2rem);
      font-weight: 300;
      font-style: italic;
      line-height: 1.08;
      color: var(--gold);
      margin-bottom: 2.75rem;
    }

    .hero-rule {
      display: none;
    }

    /* ─── HERO BRUSH UNDERLINE ───────────────────────────────────── */
    .hero-brush-underline {
      display: block;
      width: 100%;
      max-width: 360px;
      height: 14px;
      margin-top: -0.75rem;
      margin-bottom: 2rem;
    }

    .hero-body {
      font-size: 1.35rem;
      font-weight: 300;
      line-height: 1.55;
      color: var(--cream);
      opacity: 0.88;
      max-width: 38ch;
      margin-bottom: 3rem;
      letter-spacing: 0.01em;
    }

    .hero-body strong {
      color: var(--cream);
      font-weight: 400;
    }

    /* CTA — teal button */
    .hero-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      background: var(--teal);
      color: var(--cream);
      font-family: 'Inter', sans-serif;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      text-decoration: none;
      padding: 1.05rem 2.1rem;
      border-radius: 2px;
      align-self: flex-start;
      transition: background 0.2s, gap 0.2s;
    }

    .hero-cta:hover {
      background: var(--teal-hi);
      gap: 1.1rem;
    }

    .hero-cta svg { transition: transform 0.2s; }
    .hero-cta:hover svg { transform: translateX(3px); }

    .hero-foot {
      margin-top: auto;
      padding-top: 4.5rem;
      display: flex;
      align-items: center;
      gap: 1.25rem;
    }

    .hero-foot-line {
      width: 1.75rem;
      height: 1px;
      background: var(--gold);
      opacity: 0.4;
      flex-shrink: 0;
    }

    .hero-foot-text {
      font-size: 0.62rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
    }

    /* Right column — photo */
    .hero-right {
      position: relative;
      overflow: hidden;
      border-left: 1px solid var(--rule);
    }

    .hero-photo {
      position: absolute;
      inset: 0;
      background-color: var(--bg-2);
      background-size: cover;
      background-position: center 82%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Fade from left column into photo */
    .hero-photo::before {
      content: '';
      position: absolute;
      inset: 0;
      background: none;
      pointer-events: none;
    }

    /* Gold accent bar removed */
    .hero-photo::after { display: none; }

    .photo-label {
      font-size: 0.62rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(138, 130, 117, 0.32);
      text-align: center;
      padding: 2rem;
      z-index: 2;
      position: relative;
    }

    /* Scroll cue */
    .scroll-cue {
      position: absolute;
      bottom: 2.75rem;
      left: 3.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      z-index: 3;
    }

    .scroll-cue-label {
      font-size: 0.56rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--muted);
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      opacity: 0.45;
    }

    .scroll-cue-line {
      width: 1px;
      height: 2.5rem;
      background: linear-gradient(to bottom, var(--gold), transparent);
      animation: pulse-down 2.2s ease-in-out infinite;
    }

    @keyframes pulse-down {
      0%, 100% { opacity: 0.3; transform: scaleY(0.65); transform-origin: top; }
      55%       { opacity: 0.9; transform: scaleY(1);    transform-origin: top; }
    }

    /* ─── RESPONSIVE ──────────────────────────────────────────────── */
    @media (max-width: 960px) {
      .nav { padding: 1.25rem 2rem; }
      .nav-links li:not(:last-child) { display: none; }
    }

    @media (max-width: 768px) {
      #hero { grid-template-columns: 1fr; min-height: 100svh; }

      .hero-right {
        order: -1;
        height: 36vw;
        min-height: 180px;
        border-left: none;
        border-bottom: 1px solid var(--rule);
      }

      .hero-photo::before {
        background: none;
      }
      .hero-photo {
        background-position: center 84%;
      }

      .hero-left {
        padding: 2.5rem 1.5rem 4rem;
        justify-content: flex-start;
      }

      .hero-foot  { display: none; }
      .scroll-cue { display: none; }
    }

    /* ─── THE PROBLEM ────────────────────────────────────────────── */
    #the-problem {
      display: grid;
      grid-template-columns: 42% 1fr;
      min-height: 600px;
      border-top: 1px solid var(--rule);
      padding-bottom: 2.5rem;
    }

    .problem-photo {
      position: relative;
      overflow: hidden;
    }
    .problem-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
    }

    .problem-content {
      padding: 3.5rem 5rem 3.5rem 4.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .problem-top {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      margin-bottom: 2.5rem;
    }

    .problem-num {
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--gold);
      opacity: 0.7;
      flex-shrink: 0;
    }

    .problem-top-rule {
      flex: 1;
      height: 1px;
      background: var(--rule);
    }

    .problem-eyebrow {
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--muted);
      flex-shrink: 0;
    }

    .problem-intro {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.75rem, 2.6vw, 2.35rem);
      font-weight: 400;
      color: var(--cream);
      line-height: 1.3;
      margin-bottom: 2rem;
    }

    .problem-para {
      font-size: 1.1rem;
      font-weight: 300;
      line-height: 1.7;
      color: var(--muted);
      margin-bottom: 2rem;
    }
    .problem-para:last-child { margin-bottom: 0; }

    .problem-what-changes {
      margin-top: 0;
    }

    .problem-para strong {
      color: var(--cream);
      font-weight: 400;
    }

    @media (max-width: 900px) {
      #the-problem { grid-template-columns: 1fr; }
      .problem-photo { height: 55vw; min-height: 280px; }
      .problem-content { padding: 3.5rem 1.5rem; }
    }

    /* ─── SHARED SECTION HEADER ──────────────────────────────────── */
    .section-top {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      margin-bottom: 4rem;
    }
    .section-num {
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--gold);
      opacity: 0.7;
      flex-shrink: 0;
    }
    .section-divider {
      flex: 1;
      height: 1px;
      background: var(--rule);
    }
    .section-label {
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--muted);
      flex-shrink: 0;
    }

    /* ─── THE WORK ───────────────────────────────────────────────── */
    #the-work {
      padding: 6.5rem 3.5rem;
      border-top: 1px solid var(--rule);
    }
    .work-inner { max-width: 1100px; margin: 0 auto; }

    .work-lead {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      margin-bottom: 3rem;
      align-items: start;
    }
    .work-headline {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2.2rem, 3.4vw, 4.1rem);
      font-weight: 600;
      line-height: 1.06;
      letter-spacing: -0.02em;
      color: var(--cream);
    }
    .work-headline em { font-style: italic; font-weight: 300; color: var(--gold); }
    .work-intro-text { font-size: 1.1rem; font-weight: 300; line-height: 1.68; color: var(--muted); max-width: 62ch; }
    .work-intro-text p + p { margin-top: 1.1rem; }
    .work-intro-text strong { color: var(--cream); font-weight: 400; }

    .offerings-grid {
      border-top: 1px solid var(--rule);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }
    .offering {
      padding: 2.75rem 2.25rem;
      border-bottom: 1px solid var(--rule);
      border-right: 1px solid var(--rule);
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      border-top: 2px solid var(--gold);
      position: relative;
    }
    .offering:last-child { border-right: none; }
    .offering-num {
      font-size: 0.55rem;
      font-weight: 600;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: var(--gold);
      opacity: 0.55;
    }
    .offering-tier-label {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2rem;
      font-weight: 700;
      color: var(--gold);
      line-height: 1.15;
      letter-spacing: -0.01em;
      margin-bottom: 0.25rem;
    }
    .offering-meta {
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      line-height: 1.6;
    }
    .offering-desc {
      font-size: 1.05rem;
      font-weight: 300;
      line-height: 1.68;
      color: var(--muted);
      flex: 1;
      max-width: 56ch;
    }
    .offering-price {
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--gold);
      padding-top: 1rem;
      border-top: 1px solid var(--rule);
      margin-top: 0.5rem;
    }

    .work-curriculum {
      margin-top: 4rem;
      padding-top: 3rem;
      border-top: 1px solid var(--rule);
    }
    .curriculum-intro {
      font-size: 1.0rem;
      font-weight: 300;
      line-height: 1.68;
      color: var(--muted);
      font-style: italic;
      margin-bottom: 1.5rem;
      max-width: 640px;
    }
    .curriculum-tags { display: flex; flex-wrap: wrap; gap: 0.55rem; }
    .tag {
      font-size: 0.78rem;
      font-weight: 300;
      color: var(--muted);
      padding: 0.4rem 1rem;
      border: 1px solid rgba(237, 231, 216, 0.12);
      border-radius: 2px;
      letter-spacing: 0.03em;
      transition: border-color 0.2s, color 0.2s;
    }
    .tag:hover { border-color: var(--rule-solid); color: var(--gold); }

    /* ─── SAMPLE ARC ────────────────────────────────────────────── */
    #sample-arc {
      padding: 8rem 3.5rem;
    }
    .arc-inner {
      max-width: 860px;
      margin: 0 auto;
    }
    .arc-label {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.6rem;
      font-weight: 400;
      font-style: italic;
      color: var(--cream);
      opacity: 0.75;
      letter-spacing: 0.01em;
      margin-bottom: 3.5rem;
    }
    .arc-steps {
      display: flex;
      flex-direction: column;
    }
    .arc-step {
      display: grid;
      grid-template-columns: 3.5rem 1fr;
      gap: 0 2rem;
      padding: 2.25rem 0;
      border-bottom: 1px solid var(--rule);
    }
    .arc-step:first-child { border-top: 1px solid var(--rule); }
    .arc-icon {
      display: flex;
      align-items: flex-start;
      padding-top: 0.2rem;
      opacity: 0.55;
    }
    .arc-icon svg { width: 28px; height: 28px; stroke: var(--gold); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    .arc-content {}
    .arc-meta {
      display: flex;
      align-items: baseline;
      gap: 1rem;
      margin-bottom: 0.5rem;
    }
    .arc-name {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.3rem;
      font-weight: 600;
      color: var(--cream);
      line-height: 1.2;
    }
    .arc-time {
      font-size: 0.72rem;
      font-weight: 400;
      color: var(--muted);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .arc-desc {
      font-size: 1.05rem;
      font-weight: 300;
      line-height: 1.68;
      max-width: 65ch;
      color: var(--muted);
      margin-bottom: 0.75rem;
    }
    .arc-takeaway {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.35rem;
      font-style: italic;
      font-weight: 400;
      color: var(--gold);
      line-height: 1.5;
      padding-left: 1.1rem;
      border-left: 2px solid rgba(183, 152, 90, 0.4);
    }

    /* ─── PHOTO BREAK ────────────────────────────────────────────── */
    .photo-break {
      display: grid;
      grid-template-columns: 30% 70%;
      border-top: 1px solid var(--rule);
      overflow: hidden;
    }
    .photo-break-img {
      position: relative;
      overflow: hidden;
    }
    .photo-break-img img {
      width: 100%;
      height: 110%;
      object-fit: cover;
      object-position: center top;
      display: block;
    }
    .photo-break-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 2.5rem 3.25rem 2.5rem 3rem;
      background: var(--bg-2);
    }
    .photo-break-quote {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2rem, 3.2vw, 3.4rem);
      font-weight: 300;
      font-style: italic;
      line-height: 1.28;
      color: var(--cream);
      margin-bottom: 2rem;
    }
    .photo-break-attr {
      font-size: 0.66rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold);
    }

    /* ─── WHY JEREMY ─────────────────────────────────────────────── */
    #why-jeremy {
      border-top: 1px solid var(--rule);
      display: grid;
      grid-template-columns: 44% 56%;
      min-height: 85vh;
    }
    .jeremy-photo-col {
      position: relative;
      overflow: hidden;
      background-color: var(--bg-2);
      background-image: url('images/JeremyFalk-2023-10.jpg');
      background-size: cover;
      background-position: center top;
    }
    .jeremy-photo-col::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, transparent 60%, rgba(19,21,31,0.88) 100%);
    }
    .jeremy-content {
      padding: 8rem 5rem 7rem 5.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .jeremy-headline {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2.2rem, 3.4vw, 4.1rem);
      font-weight: 600;
      line-height: 1.06;
      letter-spacing: -0.02em;
      color: var(--cream);
      margin-bottom: 2.5rem;
    }
    .jeremy-headline em { font-style: italic; font-weight: 300; color: var(--gold); }
    .jeremy-bio { font-size: 1.15rem; font-weight: 300; line-height: 1.72; color: var(--muted); max-width: 62ch; }
    .jeremy-bio p + p { margin-top: 1.2rem; }
    .jeremy-bio strong { color: var(--cream); font-weight: 400; }
    .jeremy-rule { width: 2.25rem; height: 1px; background: var(--rule-solid); margin: 2.5rem 0; }
    .jeremy-clients { font-size: 1.0rem; font-weight: 300; line-height: 1.68; color: var(--muted); }

    /* ─── SOCIAL PROOF ───────────────────────────────────────────── */
    #proof {
      padding: 6rem 3.5rem;
      border-top: 1px solid var(--rule);
    }
    .proof-inner { max-width: 1100px; margin: 0 auto; }
    .proof-heading {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.6rem, 2.8vw, 2.8rem);
      font-weight: 600;
      color: var(--cream);
      margin-bottom: 2rem;
      text-align: center;
    }
    .proof-label {
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
      text-align: center;
      margin-bottom: 3rem;
    }
    .logo-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 0.5rem 3.5rem;
      margin-bottom: 5rem;
      padding-bottom: 4rem;
      border-bottom: 1px solid var(--rule);
    }
    .logo-item {
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      opacity: 0.45;
      white-space: nowrap;
      padding: 0.4rem 0;
      transition: opacity 0.2s;
    }
    .logo-item:hover { opacity: 0.75; }

    /* ─── TESTIMONIAL STRIPS — open pull-quote style ────────────── */
    .testimonials-strip {
      padding: 4.5rem 2rem;
      background: var(--bg);
    }

    .testi-solo {
      max-width: 680px;
      margin: 0 auto;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
    }

    /* quote mark + text share a relative container */
    .testi-body {
      position: relative;
      padding-left: 3.2rem;
      text-align: left;
      width: 100%;
    }

    .testi-quote-mark {
      position: absolute;
      left: 0;
      top: -0.55em;
      font-family: 'Cormorant Garamond', serif;
      font-size: 5rem;
      line-height: 1;
      color: var(--gold);
      opacity: 0.6;
    }

    /* Testimonial quote — Raleway light across all */
    .testi-quote {
      font-family: 'Raleway', sans-serif;
      font-size: clamp(1.1rem, 1.75vw, 1.3rem);
      font-weight: 300;
      font-style: normal;
      letter-spacing: 0.02em;
      line-height: 1.82;
      color: var(--cream);
      margin: 0 0 1.8rem;
    }

    .testi-hl {
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      font-size: 1.12em;
      letter-spacing: 0.01em;
      color: var(--cream);
    }

    .testi-byline {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .testi-avatar {
      width: 68px;
      height: 68px;
      border-radius: 50%;
      object-fit: cover;
      object-position: center top;
      flex-shrink: 0;
      border: 2px solid rgba(160, 144, 84, 0.5);
    }

    .testi-name {
      text-align: left;
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--gold);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      line-height: 1.3;
    }

    .testi-name span {
      display: block;
      color: var(--muted);
      font-weight: 400;
      font-size: 0.9rem;
      letter-spacing: 0.04em;
      margin-top: 0.2rem;
      text-transform: none;
    }

    /* ─── FOUR TRUTHS ────────────────────────────────────────────── */
    #four-truths {
      padding: 6rem 3.5rem;
      border-top: 1px solid var(--rule);
    }
    .truths-inner { max-width: 1100px; margin: 0 auto; }
    .truths-heading {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2.2rem, 3.3vw, 3.95rem);
      font-weight: 600;
      line-height: 1.04;
      letter-spacing: -0.02em;
      color: var(--cream);
      margin-bottom: 0.75rem;
    }
    .truths-heading em { font-style: italic; font-weight: 300; color: var(--gold); }
    .truths-intro {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.3rem, 2vw, 1.65rem);
      font-weight: 300;
      font-style: italic;
      color: var(--muted);
      line-height: 1.5;
      max-width: 680px;
      margin-bottom: 2.5rem;
    }
    .truths-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
    }
    .truth-item {
      padding: 2rem 2rem 2rem 0;
      border-top: 1px solid var(--rule);
    }
    .truth-item:nth-child(2) { padding-left: 2rem; padding-right: 0; border-left: 1px solid var(--rule); }
    .truth-item:nth-child(3) { border-bottom: 1px solid var(--rule); padding-bottom: 2rem; }
    .truth-item:nth-child(4) { padding-left: 2rem; padding-right: 0; border-left: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding-bottom: 2rem; }
    .truth-icon-row {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 0.75rem;
    }
    .truth-icon {
      width: 28px;
      height: 28px;
      flex-shrink: 0;
      color: var(--gold);
      opacity: 0.8;
    }
    .truth-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2.75rem;
      font-weight: 300;
      color: var(--gold);
      opacity: 0.6;
      line-height: 1;
    }
    .truth-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.65rem, 2.5vw, 2.1rem);
      font-weight: 700;
      color: var(--gold);
      line-height: 1.15;
      margin-bottom: 0.65rem;
      letter-spacing: -0.01em;
    }
    .truth-desc {
      font-size: 1.05rem;
      font-weight: 300;
      line-height: 1.68;
      color: var(--muted);
      max-width: 52ch;
    }

    /* ─── WHAT CHANGES ───────────────────────────────────────────── */
    .what-changes {
      background: var(--bg);
      padding: 9rem 5rem;
    }
    .what-changes-inner {
      max-width: 1000px;
      margin: 0 auto;
      display: block;
    }
    .what-changes-label {
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--gold);
      opacity: 0.55;
      display: block;
      margin-bottom: 2rem;
    }
    .what-changes-line {
      font-family: 'Playfair Display', serif;
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--gold);
      line-height: 1.78;
      letter-spacing: 0;
      clip-path: inset(0 100% 0 0);
      transition: clip-path 1.6s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .what-changes-line.in-view {
      clip-path: inset(0 0% 0 0);
    }
    .what-changes-line strong {
      font-weight: 900;
      color: var(--gold);
    }
    .what-changes-line em {
      font-style: italic;
      font-weight: 700;
      color: var(--gold);
      opacity: 0.82;
    }

    /* ─── THEMES (4 BUBBLES) ─────────────────────────────────────── */
    #themes {
      padding: 3rem 3.5rem 6rem;
      border-top: 1px solid var(--rule);
    }
    .themes-inner { max-width: 1100px; margin: 0 auto; }
    .themes-subhead {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2.2rem, 3.4vw, 4.1rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -0.02em;
      color: var(--cream);
      margin-bottom: 2rem;
    }
    .themes-subhead em { font-style: italic; font-weight: 400; color: var(--gold); }
    .themes-subhead strong { font-weight: 700; font-style: normal; color: var(--cream); }
    .theme-bubbles {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      max-width: 860px;
      margin: 0 auto;
    }
    .theme-bubble {
      border: 1px solid var(--rule);
      border-radius: 4px;
      padding: 1.75rem 2rem;
      background: var(--bg-2);
      display: grid;
      grid-template-columns: 52px 1fr;
      grid-template-rows: auto auto;
      column-gap: 1.6rem;
      row-gap: 0.5rem;
      align-items: start;
      /* slide-in animation setup */
      opacity: 0;
      transition: opacity 1.05s cubic-bezier(0.22,1,0.36,1),
                  transform 1.05s cubic-bezier(0.22,1,0.36,1);
    }
    .theme-bubble:nth-child(odd)  { transform: translateX(-56px); }
    .theme-bubble:nth-child(even) { transform: translateX( 56px); }
    .theme-bubble.in-view {
      opacity: 1;
      transform: translateX(0);
    }
    .cluster-icon {
      width: 42px;
      height: 42px;
      grid-column: 1;
      grid-row: 1 / 3;
      align-self: center;
      color: var(--gold);
      opacity: 0.75;
      flex-shrink: 0;
    }
    .theme-bubble-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.6rem, 2.2vw, 2rem);
      font-weight: 700;
      color: var(--gold);
      line-height: 1.15;
      grid-column: 2;
      grid-row: 1;
    }
    .theme-bubble-desc {
      font-size: 1.0rem;
      font-weight: 300;
      color: var(--muted);
      line-height: 1.65;
      grid-column: 2;
      grid-row: 2;
    }
    .cite-unit {
      white-space: nowrap;
      display: inline;
    }
    .cite-inline {
      font-size: 0.72em;
      font-style: italic;
      color: var(--muted);
      opacity: 0.6;
      margin-left: 0.15em;
    }

    /* ─── HOW IT WORKS ───────────────────────────────────────────── */
    #how-it-works {
      padding: 9.5rem 3.5rem;
      border-top: 1px solid var(--rule);
      background: var(--bg-2);
    }
    .hiw-inner { max-width: 1100px; margin: 0 auto; }
    .hiw-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      margin-top: 5rem;
    }
    .hiw-step { padding: 0 3.5rem 0 0; border-right: 1px solid var(--rule); }
    .hiw-step:nth-child(2) { padding: 0 3.5rem; }
    .hiw-step:last-child { padding: 0 0 0 3.5rem; border-right: none; }
    .hiw-step-num {
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold);
      opacity: 0.7;
      margin-bottom: 1.5rem;
      display: block;
    }
    .hiw-step-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2.1rem;
      font-weight: 600;
      line-height: 1.1;
      color: var(--cream);
      margin-bottom: 1rem;
    }
    .hiw-step-desc { font-size: 1.1rem; font-weight: 300; line-height: 1.68; color: var(--muted); max-width: 52ch; }
    .hiw-step-desc strong { color: var(--cream); font-weight: 400; }

    /* ─── LOGO IMAGES ───────────────────────────────────────────── */
    .logo-img {
      height: 24px;
      width: auto;
      display: block;
      opacity: 0.72;
      transition: opacity 0.25s;
      object-fit: contain;
    }
    .logo-img-invert {
      filter: brightness(0) invert(1);
      opacity: 0.55;
    }
    .logo-img-invert:hover { opacity: 0.8; }
    .logo-img:hover { opacity: 1; }
    .logo-bar a { display: flex; align-items: center; }

    /* ─── CLIENTS LOGO BAND ─────────────────────────────────────── */
    #clients {
      background: #f0ece2;
      padding: 1.75rem 2rem;
      overflow-x: hidden;
    }
    .clients-inner { max-width: 1400px; margin: 0 auto; }
    .clients-label {
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #4a4840;
      text-align: center;
      margin-bottom: 2rem;
    }
    .clients-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 2.5rem 5rem;
      margin-bottom: 1.75rem;
    }
    .clients-row:last-child { margin-bottom: 0; }
    .cli-logo {
      height: 42px;
      max-width: 185px;
      width: auto;
      object-fit: contain;
      object-position: center;
      opacity: 0.88;
      transition: opacity 0.2s;
      flex-shrink: 0;
      flex-grow: 0;
      display: block;
      background: none;
    }
    .cli-logo:hover { opacity: 1; }
    .cli-multiply { mix-blend-mode: multiply; }
    .cli-invert { filter: invert(1); }
    .cli-aol { flex-shrink: 0; }
    .cli-lightyear {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      flex-shrink: 1;
    }
    .cli-lightyear-text {
      font-family: 'Inter', sans-serif;
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #444;
      line-height: 1.3;
      white-space: nowrap;
    }

    /* ─── BOOK / CTA ─────────────────────────────────────────────── */
    #book {
      border-top: 1px solid var(--rule);
    }
    .book-text {
      padding: 7rem 3.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .book-inner { max-width: 560px; }
    .book-headline {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2.1rem, 3.3vw, 3.9rem);
      font-weight: 600;
      line-height: 1.06;
      letter-spacing: -0.02em;
      color: var(--cream);
      margin-bottom: 1.25rem;
    }
    .book-headline em { font-style: italic; font-weight: 300; color: var(--gold); }
    .book-sub {
      font-size: 0.975rem;
      font-weight: 300;
      color: var(--muted);
      line-height: 1.75;
      margin-bottom: 3.25rem;
      max-width: 38ch;
      margin-left: auto;
      margin-right: auto;
    }
    .book-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1.25rem;
      flex-wrap: wrap;
    }
    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      background: var(--teal);
      color: var(--cream);
      font-family: 'Inter', sans-serif;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      text-decoration: none;
      padding: 1.1rem 2.25rem;
      border-radius: 2px;
      transition: background 0.2s, gap 0.2s;
    }
    .btn-primary:hover { background: var(--teal-hi); gap: 1.05rem; }
    .btn-primary svg { transition: transform 0.2s; }
    .btn-primary:hover svg { transform: translateX(3px); }
    .btn-secondary {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      color: var(--muted);
      font-family: 'Inter', sans-serif;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      text-decoration: none;
      padding: 1.1rem 1.75rem;
      border-radius: 2px;
      border: 1px solid rgba(237, 231, 216, 0.15);
      transition: color 0.2s, border-color 0.2s;
    }
    .btn-secondary:hover { color: var(--cream); border-color: rgba(237, 231, 216, 0.35); }

    /* ─── FOOTNOTE LINKS (in cards) ─────────────────────────────── */
    .ref-link {
      color: var(--gold);
      opacity: 0.95;
      text-decoration: none;
      font-size: 0.85em;
      font-weight: 700;
      vertical-align: super;
      margin-left: 0.1em;
    }
    .ref-link:hover { opacity: 1; text-decoration: underline; }

    /* ─── CITATIONS ──────────────────────────────────────────────── */
    .citations {
      padding: 3rem 3.5rem 3.5rem;
      border-top: 1px solid var(--rule);
      background: var(--bg);
    }
    .citations-inner {
      max-width: 900px;
      margin: 0 auto;
    }
    .citations-heading {
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--gold);
      opacity: 0.65;
      margin-bottom: 1.5rem;
    }
    .citations-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }
    .citations-list li {
      font-size: 0.7rem;
      font-weight: 300;
      color: var(--muted);
      opacity: 0.65;
      display: flex;
      align-items: baseline;
      gap: 0.3rem;
    }
    .citations-list li sup {
      color: var(--gold);
      font-size: 0.78em;
      opacity: 0.8;
    }
    .citations-list li a {
      color: var(--muted);
      text-decoration: underline;
      text-decoration-color: rgba(160,144,84,0.3);
      text-underline-offset: 2px;
    }
    .citations-list li a:hover { color: var(--gold); }

    /* ─── FOOTER ─────────────────────────────────────────────────── */
    .site-footer {
      padding: 2.5rem 3.5rem;
      border-top: 1px solid var(--rule);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .footer-name {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      color: var(--cream);
      opacity: 0.55;
    }
    .footer-links { display: flex; align-items: center; gap: 2rem; }
    .footer-link {
      font-size: 0.65rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      text-decoration: none;
      transition: color 0.2s;
    }
    .footer-link:hover { color: var(--cream); }
    .footer-copy { font-size: 0.62rem; color: var(--muted); opacity: 0.4; letter-spacing: 0.08em; }

    /* ─── RESPONSIVE — remaining sections ───────────────────────── */
    @media (max-width: 960px) {
      /* 2-col testimonials already set; no change needed */
    }

    @media (max-width: 768px) {

      /* ── HERO ── */
      #hero { grid-template-columns: 1fr; min-height: 100svh; }
      .hero-right {
        order: -1;
        height: 100vw;
        min-height: 360px;
        border-left: none;
        border-bottom: 1px solid var(--rule);
      }
      .hero-photo::before {
        background: none;
      }
      .hero-left {
        padding: 2rem 1.5rem 3.5rem;
        justify-content: flex-start;
      }
      /* Move eyebrow inline (not absolute) on mobile */
      .hero-eyebrow {
        position: static;
        font-size: 0.64rem;
        letter-spacing: 0.09em;
        margin-bottom: 2rem;
        display: block;
        opacity: 0.6;
      }
      .hero-h1 { font-size: clamp(2.2rem, 10vw, 3.2rem); margin-bottom: 0.1em; }
      .hero-h1-cont { font-size: clamp(1.9rem, 8.5vw, 2.8rem); margin-bottom: 2rem; }
      .hero-body { font-size: 1.05rem; line-height: 1.65; margin-bottom: 2.25rem; }
      .hero-rule { margin-bottom: 1.75rem; }
      .hero-cta { align-self: stretch; justify-content: center; }
      .hero-foot { display: none; }
      .scroll-cue { display: none; }

      /* ── PROBLEM SECTION ── */
      .problem-content { padding: 3rem 1.5rem; }
      .problem-intro { font-size: clamp(1.3rem, 5vw, 1.7rem); }
      .problem-para { font-size: 0.9rem; line-height: 1.7; }

      /* ── CLIENTS / LOGOS ── */
      #clients { padding: 2rem 1rem; }
      .clients-label { margin-bottom: 1.25rem; }
      /* ── LOGOS: dissolve row wrappers → true 3-col grid ── */
      #clients { padding: 2rem 1rem; }
      .clients-label { font-size: 0.7rem; margin-bottom: 1rem; }
      .clients-inner {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.75rem 0.5rem;
        align-items: center;
        justify-items: center;
      }
      .clients-label { grid-column: 1 / -1; }
      .clients-row { display: contents; }
      .cli-logo {
        height: auto !important;
        width: auto !important;
        max-height: 30px !important;
        max-width: 100% !important;
        object-fit: contain !important;
      }
      .cli-lightyear {
        width: auto;
        justify-content: center;
        gap: 0.2rem;
      }
      .cli-lightyear img {
        height: 26px !important;
        width: 26px !important;
      }
      .cli-lightyear-text { font-size: 0.52rem; }
      .cli-salesforce { max-height: 40px !important; }
      .cli-aol        { max-height: 20px !important; width: auto !important; }
      .cli-pinterest  { max-height: 20px !important; }

      /* ── THE WORK ── */
      .work-lead { grid-template-columns: 1fr; gap: 2rem; }
      .offerings-grid { grid-template-columns: 1fr; }
      .offering { border-right: none; padding: 2rem 0; border-top: none; border-bottom: 1px solid var(--rule); }
      .offering:first-child { border-top: 2px solid var(--gold); padding-top: 2rem; }
      .work-curriculum { grid-template-columns: 1fr; gap: 1.25rem; }
      #the-work { padding: 4rem 1.5rem; }

      /* ── FOUR TRUTHS ── */
      #four-truths { padding: 4rem 1.5rem; }
      .truths-list { grid-template-columns: 1fr; }
      .truth-item { padding: 2rem 0 !important; border-left: none !important; border-bottom: none !important; }
      .truth-item:last-child { border-bottom: 1px solid var(--rule) !important; }
      .truth-title { font-size: 1.25rem; }
      .truth-body { font-size: 0.88rem; line-height: 1.65; }

      /* ── WHAT CHANGES ── */
      .what-changes { padding: 2rem 1.5rem; }
      .what-changes-inner { flex-direction: column; gap: 0.75rem; }

      /* ── THEMES ── */
      #themes { padding: 2.5rem 1.5rem 3rem; }
      .theme-bubble { padding: 1.25rem 1.25rem; }
      .theme-bubble:nth-child(odd), .theme-bubble:nth-child(even) { transform: translateX(-40px); }
      .theme-bubble.in-view { opacity: 1; transform: translateX(0); }
      .theme-tiles { grid-template-columns: 1fr; }
      .theme-tile { height: auto; perspective: none; }
      .theme-tile-inner { transform: none !important; position: static; display: flex; flex-direction: column; }
      .theme-tile-front { position: static; border-bottom: none; border-radius: 2px 2px 0 0; padding: 1.25rem 1.5rem; justify-content: flex-start; }
      .theme-tile-back { position: static; transform: none; border-radius: 0 0 2px 2px; border-top: none; padding: 1.25rem 1.5rem; }
      .theme-tile-name { text-align: left; }

      /* ── TESTIMONIALS ── */
      .testimonials-strip { padding: 3.5rem 1.5rem; }
      .testi-quote { font-size: 1rem; }
      .testi-quote-mark { font-size: 5rem; }
      .testi-byline { gap: 0.75rem; }
      .logo-bar { gap: 1rem 2rem; }

      /* ── PHOTO BREAK ── */
      .photo-break { grid-template-columns: 1fr; }
      .photo-break-img { height: 60vw; min-height: 280px; }
      .photo-break-content { padding: 3rem 1.5rem; }

      /* ── WHY JEREMY ── */
      #why-jeremy { grid-template-columns: 1fr; }
      .jeremy-photo-col { height: 65vw; min-height: 280px; }
      .jeremy-photo-col::after {
        background: linear-gradient(to bottom, transparent 50%, rgba(19,21,31,0.9) 100%);
      }
      .jeremy-content { padding: 3rem 1.5rem 4.5rem; }

      /* ── HOW IT WORKS ── */
      .hiw-steps { grid-template-columns: 1fr; }
      .hiw-step,
      .hiw-step:nth-child(2),
      .hiw-step:last-child {
        padding: 2.5rem 0;
        border-right: none;
        border-bottom: 1px solid var(--rule);
      }
      .hiw-step:last-child { border-bottom: none; }
      #how-it-works { padding: 4rem 1.5rem; }

      /* ── BOOK ── */
      .book-text { padding: 4rem 1.5rem; }
      .book-actions { flex-direction: column; gap: 1rem; }
      .btn-primary, .btn-secondary { width: 100%; justify-content: center; }

      /* ── FOOTER ── */
      .site-footer { flex-direction: column; gap: 1.5rem; text-align: center; padding: 2.5rem 1.5rem; }
    }
  
    /* ─── ANIMATIONS ─────────────────────────────────────────────── */

    /* Hero word-by-word */
    .hero-word {
      display: inline-block;
      opacity: 0;
      transform: translateY(22px);
      animation: wordUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    @keyframes wordUp {
      to { opacity: 1; transform: translateY(0); }
    }

    /* Generic scroll reveal */
    .anim-reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1),
                  transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .anim-reveal.in-view {
      opacity: 1;
      transform: translateY(0);
    }

    /* Stagger children */
    .anim-stagger-child {
      opacity: 0;
      transform: translateY(36px);
      transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
                  transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .anim-stagger-child.in-view {
      opacity: 1;
      transform: translateY(0);
    }

    /* CTA pulse */
    @keyframes ctaPulse {
      0%   { box-shadow: 0 0 0 0 rgba(77,138,166,0.45); }
      60%  { box-shadow: 0 0 0 10px rgba(77,138,166,0); }
      100% { box-shadow: 0 0 0 0 rgba(77,138,166,0); }
    }
    .hero-cta { animation: ctaPulse 3.2s ease-in-out 2.5s infinite; }