/* ===========================
       Design Tokens
       =========================== */
    :root {
      --gold: #F4AF23;
      --text: #FFF3E2;
      --ink: #1b0f07;
      --max: 980px;
    }

    /* ===========================
       Reset & Base
       =========================== */
    * { box-sizing: border-box; }

    html {
      background: #2a140a;
      /* Horizontal clipping lives on the root only. Setting overflow-x on body
         as well would make body its own scroll container, which silently
         freezes every scroll-driven animation on the page: view() would then
         resolve against body's scrollport, and body never scrolls. Root
         overflow propagates to the viewport, so this clips just as well. */
      overflow-x: hidden;
      scroll-behavior: auto;
      scroll-padding-top: 0;
    }
    html, body {
      margin: 0;
      /* System stack = paint text immediately (no webfont wait / swap) */
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background: #2a140a;
      color: var(--text);
    }

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

    /* Skip link: visible on keyboard focus only */
    .skip-link {
      position: absolute;
      left: -9999px;
      top: auto;
      width: 1px;
      height: 1px;
      overflow: hidden;
      z-index: 200;
      padding: 12px 18px;
      background: var(--gold);
      color: var(--ink);
      font-weight: 650;
      border-radius: 0 0 12px 0;
      box-shadow: 0 8px 24px rgba(0,0,0,.35);
    }
    .skip-link:focus,
    .skip-link:focus-visible {
      left: 0;
      top: 0;
      width: auto;
      height: auto;
      overflow: visible;
      outline: 3px solid #fff;
      outline-offset: 2px;
    }

    :focus { outline: none; }
    :focus-visible {
      outline: 2px solid rgba(244,175,35,.85);
      outline-offset: 3px;
    }
    .btn:focus { outline: none; }
    .btn:focus-visible {
      outline: 2px solid rgba(244,175,35,.85);
      outline-offset: 4px;
    }

    .wrap {
      width: min(var(--max), calc(100% - 40px));
      margin: 0 auto;
    }

    /* ===========================
       Buttons
       =========================== */
    .btn {
      appearance: none;
      border: 0;
      border-radius: 999px;
      padding: 11px 16px;
      font-weight: 620;
      font-size: 0.98rem;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
      white-space: nowrap;
    }
    .btn:focus { outline: none; }

    .btn-primary {
      background: var(--gold);
      color: var(--ink);
      box-shadow: 0 10px 24px rgba(255,193,7,0.18);
    }
    .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(255,193,7,0.24); }

    /* Seasonal Rosh HaShana CTA: left of the hero copy on web, bottom-right on mobile */
    .hero-seasonal-btn {
      position: absolute;
      z-index: 6;
      left: max(16px, env(safe-area-inset-left));
      top: 50%;
      transform: translateY(-50%);
      max-width: 168px;
      min-height: 44px;
      padding: 14px 18px;
      white-space: normal;
      text-align: center;
      line-height: 1.28;
      font-size: 0.92rem;
    }
    .hero-seasonal-btn.btn-primary:hover {
      transform: translateY(-50%) translateY(-2px);
    }
    @media (max-width: 920px) {
      .hero-seasonal-btn {
        left: auto;
        right: max(16px, env(safe-area-inset-right));
        top: auto;
        bottom: max(16px, calc(env(safe-area-inset-bottom) + 16px));
        transform: none;
        max-width: 148px;
        font-size: 0.88rem;
      }
      .hero-seasonal-btn.btn-primary:hover {
        transform: translateY(-2px);
      }
    }

    .chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(244,175,35,0.28), rgba(204,108,39,0.18));
      border: 1px solid rgba(204,108,39,0.26);
      font-size: 1.2rem;
      flex: 0 0 auto;
    }

  @media (max-width: 920px) {
    html {
      scroll-behavior: auto;
      overflow-x: hidden;
      max-width: 100%;
      overscroll-behavior-x: none;
      touch-action: pan-y;
    }
    body {
      /* No overflow-x on body: it would become a scroll container and freeze
         scroll-driven animations. Root overflow-x + touch-action pan-y is enough. */
      -webkit-overflow-scrolling: touch;
      max-width: 100%;
      overscroll-behavior-x: none;
      touch-action: pan-y;
    }
    main#top,
    .site-header,
    footer {
      max-width: 100%;
      overflow-x: hidden;
    }
  }
  body { background: #2a140a; }
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    /* Own compositor layer: avoids repainting header with every scroll frame */
    transform: translateZ(0);
  }
  .nav-wrap {
    min-height: 78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding-top: env(safe-area-inset-top);
  }
  main#top { padding-top: 0; }
  .brand-link img { width:72px; height:72px; object-fit:contain; display:block; }
  .nav-links { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:10px 14px; }
  .nav-links a:not(.btn) {
    color:rgba(255,243,226,.82);
    font-weight:650;
    font-size:.9rem;
    white-space:nowrap;
  }
  .nav-links a[aria-current="page"]:not(.btn),
  .nav-links a[aria-current="true"]:not(.btn) {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .nav-links .btn { padding:10px 14px; font-size:.9rem; }
  .nav-cta-mobile { display:none; }
  .section-stepper {
    display: none;
  }

  /* Page sections */
  .snap-section {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: calc(var(--header-h, 78px) + 18px) 0 36px;
    overflow: visible;
    position: relative;
    scroll-margin-top: 0;
  }
  .snap-section > .wrap {
    width: min(var(--max), calc(100% - 40px));
    margin: 0 auto;
  }

  .hero-section {
    background: linear-gradient(180deg, #5c2d16 0%, #2a140a 100%);
  }
  .hero-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:42px; align-items:center; }
  .hero-copy h1 { font-size:clamp(2.1rem,4.2vw,4rem); line-height:1.05; max-width:13ch; margin-bottom:18px; }
  .hero-mark img { width:min(360px,70vw); height:auto; }

  /* Skip painting off-screen sections while scrolling (desktop) */
  @media (min-width: 921px) {
    #work,
    #approach {
      content-visibility: auto;
      contain-intrinsic-size: auto 900px;
    }
  }

  /* Light sections: one solid reading card, no glow layers */
  .light-section::before,
  .light-section::after {
    display: none !important;
    animation: none !important;
  }
  .light-section {
    background: #fff9f0;
    color: #1b0f07;
  }
  .light-section.alt {
    background: #fff2df;
    color: #1b0f07;
  }
  .light-section > .wrap:not(.contact-panel) {
    background: #ffffff;
    padding: clamp(28px, 4vw, 44px);
    border-radius: 22px;
    border: 1px solid rgba(115, 57, 29, 0.12);
    box-shadow: 0 14px 48px rgba(90, 46, 21, 0.1);
    position: relative;
    z-index: 4;
    color: #1b0f07;
  }
  .light-section :where(h1, h2, h3, p, li, strong) {
    color: #1b0f07;
  }
  .light-section .eyebrow.dark {
    color: #73391D !important;
  }
  .light-section > .wrap .principle-card {
    background: #fff9f0;
    border-color: rgba(115, 57, 29, 0.1);
  }
  html[data-theme="light"] {
    color: #1b0f07;
    background: #fff9f0;
  }
  html[data-theme="light"] .nav-links a:not(.btn) {
    color: #4a2812;
  }
  html[data-theme="light"] .nav-links a[aria-current="page"]:not(.btn),
  html[data-theme="light"] .nav-links a[aria-current="true"]:not(.btn) {
    color: #1b0f07;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .dark-section { background:#32180c; color:#fff3e2; }
  .eyebrow { margin:0 0 10px; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:#FFBE3D; font-weight:800; }
  .eyebrow.dark { color:#73391D; }
  #work-heading { color:#FFBE3D !important; }
  .two-col { display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:center; }
  .two-col h2, .section-heading h2, .contact-panel h2 { font-size:clamp(1.7rem,3vw,2.7rem); line-height:1.1; margin:0 0 14px; }
  .two-col p, .section-heading p, .contact-panel p { font-size:clamp(1.1rem,1.5vw,1.22rem); line-height:1.6; margin:0 0 12px; }
  .two-col p:last-child, .section-heading p:last-child { margin-bottom:0; }
  .section-heading { max-width:760px; margin-bottom:22px; }
  #work .section-heading { max-width: none; }
  #work .work-intro {
    margin: 0;
    line-height: 1.45;
  }
  #work .work-intro-line {
    display: block;
    white-space: nowrap;
    max-width: 100%;
  }
  #work .work-intro-line + .work-intro-line {
    margin-top: 0.2em;
  }
  #work .work-intro-line:nth-child(1) {
    font-size: clamp(1rem, calc((100vw - 40px) / 24.5), 1.35rem);
  }
  #work .work-intro-line:nth-child(2) {
    font-size: clamp(1rem, calc((100vw - 40px) / 21), 1.35rem);
  }
  /* Fit full phrase on one line; scale down instead of wrapping */
  #principles .section-heading h2 {
    white-space: normal;
    font-size: clamp(1.7rem, 3vw, 2.7rem);
  }
  .dark-copy { color:#1b0f07; }
  .impact-grid { display:grid; grid-template-columns:1fr; gap:10px; }
  .principles-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  .impact-card, .principle-card { border-radius:18px; padding:16px; }
  .impact-card {
    display:grid;
    grid-template-columns:44px minmax(160px, .72fr) 1.6fr;
    gap:16px;
    align-items:center;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(244,175,35,.22);
    padding:14px 18px;
  }
  .impact-card .chip { margin:0; width:36px; height:36px; font-size:1.05rem; border-radius:12px; }
  .impact-card h3 { font-size:1.05rem; margin:0; }
  .impact-card p { margin:0; line-height:1.45; font-size:1.08rem; color:rgba(255,243,226,.9); }
  .work-copy-short { display: none; }
  .work-copy-full { display: inline; }

  /* Desktop: show all work areas without a nested scroll pane */
  @media (min-width: 921px) {
    #work.snap-section {
      align-items: center;
    }
    #work.snap-section > .wrap {
      display: block;
      height: auto;
      max-height: none;
      width: min(var(--max), calc(100% - 40px));
    }
    #work .impact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      overflow: visible;
      max-height: none;
    }
    #work .impact-card {
      grid-template-columns: 40px 1fr;
      gap: 8px 12px;
      align-items: start;
      padding: 14px 16px;
    }
    #work .impact-card h3 {
      grid-column: 2;
      font-size: 1.02rem;
    }
    #work .impact-card p {
      grid-column: 2;
      font-size: 1rem;
      line-height: 1.4;
    }
    #work .impact-card:last-child:nth-child(odd) {
      grid-column: 1 / -1;
    }
  }
  .principle-card h3 { font-size:1.12rem; margin:12px 0 8px; }
  .principle-card p { font-size:1.08rem; line-height:1.5; margin:0; }
  .principle-card { background:white; border:1px solid rgba(115,57,29,.12); box-shadow:0 12px 30px rgba(90,46,21,.07); }
  .contact-panel { max-width:780px; margin:0 auto; background:white; border:1px solid rgba(115,57,29,.12); border-radius:28px; padding:36px; box-shadow:0 16px 40px rgba(90,46,21,.08); text-align:center; }
  .contact-panel p { max-width:620px; margin-left:auto; margin-right:auto; }
  .contact-actions { display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:22px; }
  .contact-location { margin-top:16px !important; font-size:1.05rem !important; color:rgba(90,46,21,.68); }
  footer {
    background:#1f0e06;
    color:rgba(255,243,226,.72);
    padding:22px 0;
  }
  .footer-row { display:flex; justify-content:space-between; gap:20px; }
  @media (max-width: 1100px) {
    .nav-links { gap:8px 12px; }
    .nav-links a:not(.btn) { font-size:.82rem; }
    .brand-link img { width:64px; height:64px; }
  }
  @media (max-width: 920px) {
    :root {
      --m-eyebrow: .72rem;
      --m-h1: clamp(1.8rem, 5.2vh, 2.4rem);
      --m-h2: clamp(1.55rem, 4vh, 2.1rem);
      --m-h3: clamp(1.08rem, 2.5vh, 1.22rem);
      --m-body: clamp(1.08rem, 2.7vh, 1.25rem);
      --m-lead: 1.55;
      --m-gap: clamp(12px, 2.8vh, 28px);
      /* 16px is standard mobile content gutter; include notch safe areas */
      --m-gutter: max(16px, env(safe-area-inset-left));
      --m-gutter-right: max(16px, env(safe-area-inset-right));
    }
    .wrap,
    .nav-wrap,
    .snap-section > .wrap {
      width: 100%;
      max-width: none;
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
      box-sizing: border-box;
    }
    .site-header .wrap.nav-wrap {
      width: 100%;
      padding-left: var(--m-gutter);
      padding-right: var(--m-gutter-right);
    }
    .nav-wrap {
      min-height: 64px;
      gap:10px;
    }
    .brand-link img { width:52px; height:52px; }
    .nav-cta-mobile {
      display:inline-flex;
      margin-left:auto;
      padding:10px 12px;
      font-size:.86rem;
    }
    .section-stepper {
      display: flex;
      flex-direction: column;
      position: fixed;
      top: calc(var(--header-h, 64px) + 8px);
      right: var(--m-gutter-right);
      z-index: 120;
      width: 48px;
      gap: 6px;
      padding: 6px;
      box-sizing: border-box;
      background: #2a140a;
      border: 1px solid rgba(244,175,35,.28);
      border-radius: 12px;
      box-shadow: 0 10px 24px rgba(0,0,0,.28);
      pointer-events: auto;
      touch-action: manipulation;
    }
    /* Keep heading text clear of the fixed section-stepper arrows (48px wide + gutter) */
    .two-col > div:first-child,
    .section-heading {
      padding-right: 60px;
      box-sizing: border-box;
    }
    .section-step {
      appearance: none;
      border: 0;
      width: 100%;
      min-height: 44px;
      height: 44px;
      border-radius: 8px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,.06);
      color: rgba(255,243,226,.92);
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    .section-step:active { background: rgba(244,175,35,.22); }
    .section-step:disabled {
      opacity: .28;
      cursor: default;
    }
    .section-step svg { display: block; }
    .nav-links {
      display:none;
    }

    .hero-grid {
      grid-template-columns: 1fr;
      gap: clamp(14px, 2.5vh, 22px);
      align-items: center;
      justify-items: stretch;
    }
    .two-col { grid-template-columns: 1fr; gap: var(--m-gap); }
    .hero-mark {
      display: flex;
      order: -1;
      justify-content: center;
      align-items: center;
      margin: 0;
    }
    .hero-mark img {
      width: min(210px, 52vw);
      max-height: min(210px, 26vh);
      height: auto;
      object-fit: contain;
    }

    .snap-section {
      align-items: stretch;
      justify-content: stretch;
      scroll-margin-top: 0;
      padding: calc(var(--header-h, 64px) + 12px) var(--m-gutter-right) calc(14px + env(safe-area-inset-bottom)) var(--m-gutter);
      overflow: hidden;
      min-height: 100vh;
      min-height: 100dvh;
      height: 100vh;
      height: 100dvh;
      max-height: 100dvh;
      max-width: 100%;
      touch-action: pan-y;
    }
    .snap-section > .wrap {
      width: 100%;
      max-width: 100%;
      max-height: none;
      flex: 1 1 auto;
      align-self: stretch;
      min-height: 0;
      height: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: var(--m-gap);
      box-sizing: border-box;
      overflow-x: hidden;
      overflow-y: visible;
    }

    /* Keep glow planes inside the screen; scale was making the page swipe sideways */
    .hero-section::before,
    .dark-section::before,
    .light-section::before,
    .hero-section::after,
    .dark-section::after,
    .light-section::after {
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }

    footer .wrap {
      width: 100%;
      padding-left: var(--m-gutter);
      padding-right: var(--m-gutter-right);
    }

    /* Uniform type across every section */
    .eyebrow {
      margin: 0 0 .55em;
      font-size: var(--m-eyebrow);
      letter-spacing: .12em;
    }
    .hero-copy h1 {
      font-size: var(--m-h1);
      max-width: none;
      margin-bottom: .55em;
      line-height: 1.12;
    }
    .two-col p,
    .section-heading p:not(.work-intro),
    .contact-panel p,
    .impact-card p,
    .principle-card p,
    .contact-location {
      font-size: var(--m-body) !important;
      line-height: var(--m-lead) !important;
    }
    .two-col h2,
    .section-heading h2,
    .contact-panel h2 {
      font-size: var(--m-h2);
      margin-bottom: .45em;
      line-height: 1.15;
    }
    /* Fit full phrase on one line; scale down instead of wrapping */
    #principles .section-heading h2 {
      white-space: normal;
      font-size: 1.55rem;
      line-height: 1.15;
      transform: none !important;
      animation: none !important;
    }
    .impact-card h3,
    .principle-card h3 {
      font-size: var(--m-h3);
      margin: 0 0 .2em;
    }
    .two-col p,
    .section-heading p:not(.work-intro),
    .contact-panel p {
      margin-bottom: .75em;
    }
    .two-col p:last-child,
    .section-heading p:last-child { margin-bottom: 0; }

    .section-heading {
      margin-bottom: 0;
      max-width: none;
    }
    .light-section > .wrap:not(.contact-panel) {
      padding: clamp(18px, 3.5vw, 28px);
      border-radius: 18px;
    }
    .section-heading p { display: block; }

    .hero-copy { display: flex; flex-direction: column; gap: .35em; }

    .principles-grid {
      grid-template-columns: 1fr;
      gap: clamp(10px, 1.8vh, 16px);
      flex: 1;
      display: grid;
    }
    .principle-card {
      display: grid;
      grid-template-columns: 40px 1fr;
      grid-template-rows: auto auto;
      column-gap: 12px;
      row-gap: 4px;
      align-items: center;
      padding: clamp(14px, 2.2vh, 20px) 16px;
    }
    .principle-card .chip {
      grid-row: 1 / span 2;
      width: 40px;
      height: 40px;
      font-size: 1.15rem;
    }

    .impact-grid {
      gap: clamp(8px, 1.5vh, 14px);
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .impact-card {
      grid-template-columns: 36px 1fr;
      gap: 6px 12px;
      align-items: start;
      padding: clamp(12px, 1.8vh, 18px) 14px;
      border-radius: 16px;
      flex: 1;
    }
    .impact-card .chip {
      width: 36px;
      height: 36px;
      font-size: 1.05rem;
      border-radius: 11px;
    }
    .impact-card p { grid-column: 2; }

    /* Work section: natural height on mobile so scroll stays smooth */
    #work.snap-section {
      height: auto;
      min-height: 100vh;
      min-height: 100dvh;
      max-height: none;
      overflow: visible;
      box-sizing: border-box;
    }
    #work.snap-section > .wrap {
      height: auto;
      min-height: 0;
      max-height: none;
      overflow: visible;
      justify-content: center;
      gap: clamp(8px, 1.5vh, 14px);
    }
    #work .section-heading,
    main#work .section-heading {
      flex: 0 0 auto;
      margin-bottom: 0;
      padding-right: 0;
      box-sizing: border-box;
      width: 100%;
    }
    #work .work-intro,
    main#work .work-intro {
      line-height: 1.45;
    }
    #work .work-intro-line,
    main#work .work-intro-line {
      font-size: clamp(0.95rem, 2.6vw, 1.2rem) !important;
      line-height: 1.45 !important;
    }
    #work .work-copy-full { display: none; }
    #work .work-copy-short { display: inline; }
    #work .impact-grid {
      flex: 0 1 auto;
      min-height: 0;
      gap: clamp(6px, 1.2vh, 10px);
      overflow: hidden;
    }
    #work .impact-card {
      flex: 0 0 auto;
      grid-template-columns: 34px 1fr;
      align-items: center;
      gap: 2px 10px;
      padding: clamp(8px, 1.3vh, 12px) 12px;
      border-radius: 14px;
    }
    #work .impact-card .chip {
      width: 32px;
      height: 32px;
      font-size: .95rem;
      grid-row: 1 / span 2;
    }
    #work .impact-card h3 {
      font-size: clamp(1rem, 2.4vh, 1.12rem);
      margin: 0;
      line-height: 1.2;
    }
    #work .impact-card p {
      grid-column: 2;
      font-size: clamp(.92rem, 2.1vh, 1.05rem) !important;
      line-height: 1.35 !important;
      margin: 0;
    }

    /* Principles: natural height so the heading does not drift while scrolling */
    #principles.snap-section {
      height: auto;
      min-height: 100vh;
      min-height: 100dvh;
      max-height: none;
      overflow: visible;
      box-sizing: border-box;
    }
    #principles.snap-section > .wrap {
      height: auto;
      min-height: 0;
      max-height: none;
      overflow: visible;
      justify-content: flex-start;
      gap: clamp(10px, 2vh, 16px);
    }
    #principles .section-heading,
    main#principles .section-heading {
      flex: 0 0 auto;
      padding-right: 0;
      box-sizing: border-box;
      width: 100%;
    }
    #principles .principles-grid {
      flex: 0 1 auto;
    }

    .contact-panel {
      width: 100%;
      padding: clamp(28px, 4vh, 40px) 22px;
      border-radius: 22px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: .35em;
      flex: 1;
    }
    .contact-actions { margin-top: .6em; }
    .contact-actions .btn { width: 100%; }
    .contact-location { margin-top: .4em !important; }

    .footer-row { flex-direction: column; gap: 8px; text-align: center; }
    footer { padding: 18px 0 calc(18px + env(safe-area-inset-bottom)); }
  }
  @media (min-width: 921px) and (max-height: 760px) {
    .hero-copy h1 { font-size:clamp(1.8rem,4vw,2.8rem); margin-bottom:12px; }
    .two-col h2, .section-heading h2, .contact-panel h2 { font-size:clamp(1.45rem,2.8vw,2.2rem); }
    .impact-card { padding:10px 14px; }
    .impact-card p { font-size:1.02rem; line-height:1.4; }
    .section-heading { margin-bottom:14px; }
    .principle-card { padding:14px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; scroll-behavior: auto !important; }
  }

  /* ===========================
     Parallax depth and scroll reveal

     Two mechanisms, split by risk.

     1. Drift (hero separation, background glow) uses scroll-driven CSS
        timelines. No scroll listener, no per-frame JS. Purely decorative, so
        a partial or stalled state is always harmless.
     2. Reveals use IntersectionObserver and a one-way class. Content stays
        visible until JS adds .js-reveal-ready, so copy is never hidden if
        the script fails to run.
     =========================== */
  @media (prefers-reduced-motion: no-preference) {
    /* Reveal uses motion only; never hide copy behind opacity */
    .js-reveal-ready .hc-reveal {
      opacity: 1;
      transition: transform .85s cubic-bezier(.22,.61,.36,1);
    }
    .js-reveal-ready .hc-reveal.is-in { opacity: 1; }

    @supports not (animation-timeline: view()) {
      .js-reveal-ready .hc-reveal {
        transform: translateY(42px);
        transition: transform .85s cubic-bezier(.22,.61,.36,1);
      }
      .js-reveal-ready .hc-reveal.is-in { transform: none; }
    }
  }

  /* ---------------------------
     Background depth

     Same warm light language only; two drift speeds for stronger parallax,
     no new texture or pattern.
     --------------------------- */
  .hero-section::before,
  .dark-section::before,
  .light-section::before,
  .hero-section::after,
  .dark-section::after,
  .light-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  }

  /* Near plane: stronger, faster warm light */
  .hero-section::before,
  .dark-section::before,
  .light-section::before {
    top: 0;
    bottom: 0;
    z-index: 1;
  }
  .hero-section::before,
  .dark-section::before {
    background: radial-gradient(68% 62% at 74% 40%, rgba(244,175,35,.42), transparent 68%);
  }
  .light-section::before {
    background: radial-gradient(68% 62% at 26% 50%, rgba(244,175,35,.28), transparent 70%);
  }

  /* Far plane: softer counter-drift for depth */
  .hero-section::after,
  .dark-section::after,
  .light-section::after {
    top: -6%;
    bottom: -6%;
    z-index: 0;
  }
  .hero-section::after,
  .dark-section::after {
    background: radial-gradient(78% 68% at 18% 68%, rgba(255,143,28,.26), transparent 72%);
  }
  .light-section::after {
    background: radial-gradient(78% 68% at 82% 32%, rgba(115,57,29,.14), transparent 72%);
  }

  .hero-section > .wrap,
  .dark-section > .wrap,
  .light-section > .wrap { position: relative; z-index: 2; }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {

      .hero-section::before,
      .dark-section::before,
      .light-section::before {
        animation: hc-drift-near linear both;
        animation-timeline: view();
        animation-range: cover;
        will-change: transform, opacity;
      }
      @keyframes hc-drift-near {
        from { transform: translate3d(0, 38%, 0) scale(1.18); opacity: .35; }
        to   { transform: translate3d(0, -38%, 0) scale(1.4); opacity: 1; }
      }

      .hero-section::after,
      .dark-section::after,
      .light-section::after {
        animation: hc-drift-far linear both;
        animation-timeline: view();
        animation-range: cover;
        will-change: transform, opacity;
      }
      @keyframes hc-drift-far {
        from { transform: translate3d(0, -28%, 0) scale(1.1); opacity: .25; }
        to   { transform: translate3d(0, 28%, 0) scale(1.32); opacity: 1; }
      }

      /* Hero: mark and copy pull apart more as the section exits */
      .hero-mark img {
        animation: hc-hero-mark linear both;
        animation-timeline: view();
        animation-range: exit 0% exit 100%;
        will-change: transform, opacity;
      }
      @keyframes hc-hero-mark {
        to { transform: translateY(-220px) scale(.8); opacity: 0; }
      }

      .hero-copy {
        animation: hc-hero-copy linear both;
        animation-timeline: view();
        animation-range: exit 0% exit 100%;
        will-change: transform, opacity;
      }
      @keyframes hc-hero-copy {
        to { transform: translateY(-96px); opacity: .12; }
      }

      /* Headings stay still; no parallax on light sections */
      .dark-section .two-col > div:last-child,
      .dark-section .impact-grid,
      .contact-panel {
        animation: hc-layer-front linear both;
        animation-timeline: view();
        animation-range: cover;
        will-change: transform;
      }
      .light-section .two-col > div:last-child,
      .light-section .principles-grid {
        animation: none !important;
      }
      @keyframes hc-layer-front {
        from { transform: translate3d(0, 24%, 0); }
        to   { transform: translate3d(0, -24%, 0); }
      }

      .two-col > div:first-child,
      .section-heading {
        position: relative;
        z-index: 3;
      }
      .dark-section :is(h1, h2, h3):not(.eyebrow) {
        color: #fff3e2 !important;
      }
      .dark-section .eyebrow:not(.dark) {
        color: #FFBE3D !important;
      }
      .hero-copy h1 {
        text-shadow: 0 2px 28px rgba(42,20,10,.55);
      }
      .light-section::before,
      .light-section::after {
        display: none !important;
        animation: none !important;
      }
      .dark-section::before,
      .hero-section::before {
        background: radial-gradient(68% 62% at 74% 40%, rgba(244,175,35,.32), transparent 68%);
      }

      /* Mobile: no scroll-driven layer drift; it fights touch scrolling */
      @media (max-width: 920px) {
        .hero-section::before,
        .dark-section::before,
        .light-section::before,
        .hero-section::after,
        .dark-section::after,
        .light-section::after,
        .hero-mark img,
        .hero-copy,
        .two-col > div:first-child,
        .section-heading,
        .section-heading h2,
        #principles .section-heading,
        #principles .section-heading h2,
        .two-col > div:last-child,
        .impact-grid,
        .principles-grid,
        .contact-panel {
          animation: none !important;
          transform: none !important;
          will-change: auto !important;
        }
      }
    }
  }

/* ===========================
   Multi-page layout
   =========================== */
/* One page, one screen.

   The old rule sized the section to the viewport MINUS THE HEADER ONLY, and
   the footer then sat below that. Every page therefore came out exactly one
   footer taller than the screen, so you always had to scroll, and the only
   thing under the fold was the footer.

   Flexing the body fixes it at any footer height: the footer claims what it
   needs, the section takes whatever is left. flex-shrink is 0 throughout, so
   a page with more copy than fits still grows and scrolls normally rather
   than clipping. */
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.page-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding-top: var(--header-h, 78px);
}
.page-main .snap-section {
  flex: 1 0 auto;
  min-height: 0;
  /* .page-main already offsets the fixed header. The section's own
     header-sized top padding is a leftover from the single-page layout, where
     each section had to clear the header itself. Keeping both counted the
     header twice and wasted a header's height at the top of every page. */
  padding-top: 18px;
}
footer {
  flex: 0 0 auto;
}
.footer-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.footer-stack p {
  margin: 0;
  line-height: 1.45;
  font-size: 0.92rem;
}
.footer-legal {
  color: rgba(255,243,226,0.86);
}
.contact-panel .footer-legal {
  color: #3a1c0c;
}
.footer-address {
  max-width: 42ch;
}
.site-header {
  background: #2a140a;
  border-bottom: 1px solid rgba(244,175,35,.18);
  overflow: visible;
}
html[data-theme="light"] .site-header {
  background: #fff9f0;
  border-bottom: 1px solid rgba(115,57,29,.12);
}
body.page-dark {
  background: #2a140a;
  color: #fff3e2;
}
body.page-light {
  background: #fff9f0;
  color: #1b0f07;
}
  .nav-check {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
.nav-toggle {
  display: none;
  appearance: none;
  border: 1px solid rgba(244,175,35,.35);
  background: rgba(255,255,255,.06);
  color: #fff3e2;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  margin-left: auto;
  padding: 0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
html[data-theme="light"] .nav-toggle {
  background: rgba(115,57,29,.06);
  border-color: rgba(115,57,29,.22);
  color: #3a1c0c;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  position: relative;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
body.nav-open .nav-toggle-bars,
.nav-check:checked ~ .nav-toggle .nav-toggle-bars { background: transparent; }
body.nav-open .nav-toggle-bars::before,
.nav-check:checked ~ .nav-toggle .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
body.nav-open .nav-toggle-bars::after,
.nav-check:checked ~ .nav-toggle .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 6px;
}
.footer-nav a {
  color: rgba(255,243,226,.88);
  font-size: 0.88rem;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 920px) {
  .section-stepper { display: none !important; }
  .nav-cta-mobile { display: none !important; }

  .nav-wrap {
    flex-wrap: nowrap;
    min-height: 64px;
    align-items: center;
    gap: 12px;
  }
  .nav-toggle { display: inline-flex; }

  .nav-links {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--m-gutter, 16px) 14px;
    background: #2a140a;
    border-bottom: 1px solid rgba(244,175,35,.22);
    box-shadow: 0 16px 32px rgba(0,0,0,.28);
    z-index: 130;
  }
  html[data-theme="light"] .nav-links {
    background: #fff9f0;
    border-bottom-color: rgba(115,57,29,.14);
    box-shadow: 0 16px 32px rgba(90,46,21,.12);
  }
  body.nav-open .nav-links,
  .nav-check:checked ~ .nav-links {
    display: flex !important;
  }
  .nav-links a:not(.btn) {
    display: block;
    width: 100%;
    padding: 14px 4px;
    font-size: 1rem;
    line-height: 1.3;
    white-space: normal;
    border-bottom: 1px solid rgba(255,243,226,.1);
  }
  html[data-theme="light"] .nav-links a:not(.btn) {
    border-bottom-color: rgba(115,57,29,.1);
  }
  .nav-links .btn {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 10px;
    padding: 12px 14px;
    font-size: 0.95rem;
  }

  /* Multi-page: natural scroll, no leftover single-page viewport lock */
  .page-main {
    padding-top: var(--header-h, 64px);
  }
  .page-main .snap-section,
  .snap-section {
    height: auto !important;
    max-height: none !important;
    min-height: calc(100dvh - var(--header-h, 64px));
    overflow: visible !important;
    padding-top: 20px !important;
    padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
    padding-left: var(--m-gutter) !important;
    padding-right: var(--m-gutter-right) !important;
  }
  .page-main .snap-section > .wrap,
  .snap-section > .wrap {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    justify-content: flex-start;
    flex: 0 1 auto;
  }
  .two-col > div:first-child,
  .section-heading,
  #work .section-heading,
  #principles .section-heading,
  main#work .section-heading,
  main#principles .section-heading {
    padding-right: 0 !important;
  }

  .hero-seasonal-btn {
    position: static !important;
    display: inline-flex;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    margin-top: 8px;
    box-sizing: border-box;
  }
  .hero-section.snap-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
  }

  .light-section > .wrap:not(.contact-panel) {
    width: 100%;
    box-sizing: border-box;
  }
  .contact-panel {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    flex: 0 1 auto;
    padding: 24px 18px;
  }

  .footer-stack {
    text-align: center;
    align-items: center;
  }
  .footer-address { max-width: 34ch; }

  body.nav-open {
    overflow: hidden;
  }

  /* Work + principles: selectors for multi-page main ids */
  main#work .work-copy-full { display: none; }
  main#work .work-copy-short { display: inline; }
  main#work .impact-grid,
  #work .impact-grid {
    flex: 0 1 auto;
    overflow: visible;
  }
  main#work .impact-card,
  #work .impact-card {
    flex: 0 0 auto;
  }

  /* Light pages: roomier reading card on small screens */
  .light-section > .wrap:not(.contact-panel) {
    padding: 22px 18px;
    border-radius: 18px;
    box-shadow: none;
  }
  .two-col {
    gap: 14px;
  }
  .page-main .snap-section {
    min-height: 0;
  }
}