:root {
    --black: #050505;
    --navy: #040F28;            /* the WOOD CONSULTING wordmark navy (vault Brand note); owner pick B, Sep 7 */
    --navy-deep: #050B1A;
    --gold: #D7A84A;
    --gold-bright: #F0CD86;
    --paper: #F8F8F8;
    --ink: #0b1524;
    --ink-2: #4b5268;
    --white: #ffffff;
    --muted: #c9d1de;
    --blue: #0A5DFF; --blue-bright: #5B9DFF;   /* only where the lockup uses blue: separators, contents numbers */
    --steel: #8b95a7;
    --rule: rgba(255,255,255,0.12);
    --display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;  /* brand board: heavy geometric caps, like the wordmark */
    --sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;
    --wrap: 1120px;
    --ease: cubic-bezier(.2,.7,.2,1);
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
    background: var(--navy-deep);
    color: var(--white);
    -webkit-font-smoothing: antialiased;
  }
  img { max-width: 100%; height: auto; display: block; }
  a { color: var(--gold); }
  a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
  .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s3); }
  .narrow { max-width: 760px; }

  h1, h2 { font-family: var(--display); font-weight: 800; line-height: 1.02; letter-spacing: -.015em; text-wrap: balance; }
  h1 { text-transform: uppercase; }
  h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); margin-bottom: var(--s2); }
  h3 { font-size: 1.15rem; font-weight: 800; line-height: 1.3; }
  .kicker { font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s2); text-wrap: balance; }
  .lede { font-size: 1.15rem; color: var(--muted); max-width: 640px; margin-bottom: var(--s5); }
  .display-italic { font-family: var(--display); font-style: italic; font-weight: 600; }

  /* buttons: one primary (gold), one secondary (outlined) */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 56px; padding: 14px 28px;
    font-family: var(--sans); font-size: 1rem; font-weight: 800; letter-spacing: .01em;
    text-decoration: none; border-radius: 6px; border: 2px solid transparent;
    transition: transform .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
    cursor: pointer;
  }
  .btn small { font-weight: 600; opacity: .85; }
  .btn-primary { background: var(--gold); color: var(--black); border-color: var(--gold); }
  .btn-primary:hover { background: var(--gold-bright); border-color: var(--gold-bright); transform: translateY(-2px); }
  .btn-secondary { background: rgba(255,255,255,.06); color: var(--white); border-color: rgba(255,255,255,.7); }
  .btn-secondary:hover { border-color: var(--white); transform: translateY(-2px); }
  .btn svg { width: 18px; height: 18px; flex: none; }
  .cta-row { display: flex; flex-wrap: wrap; gap: var(--s2); }

  /* header */
  .top { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: var(--s3) 0; }
  .top .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
  .top img { height: 30px; width: auto; }
  .top a.wcl { color: var(--muted); font-size: .85rem; font-weight: 600; text-decoration: none; letter-spacing: .04em; }
  .top a.wcl:hover { color: var(--white); }

  /* hero: the cover on its own door */
  .hero {
    position: relative; overflow: hidden;
    background: var(--black);
    padding: 120px 0 var(--s6);
    min-height: 100vh; min-height: 100dvh;
    display: flex; align-items: center;
  }
  .hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 34% 34% at 72% 96%, rgba(201,151,46,.34) 0%, rgba(201,151,46,.10) 45%, rgba(201,151,46,0) 75%);
  }
  .hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s6); align-items: center; position: relative; }
  .hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.6rem); }
  .hero h1 em { font-style: normal; color: var(--gold); }
  .hero .sub { font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); margin: var(--s2) 0 var(--s3); text-wrap: balance; max-width: 22ch; }
  .hero p.lead { font-size: 1.15rem; color: var(--muted); max-width: 520px; margin-bottom: var(--s4); }
  .hero .tag { font-style: italic; font-weight: 600; font-size: 1.15rem; color: #eef2f7; margin-top: var(--s3); }
  .hero .note { font-size: .9rem; color: var(--steel); margin-top: var(--s2); }
  .cover { display: flex; justify-content: center; }
  .cover picture { display: block; width: 100%; max-width: 400px; }
  .cover img {
    width: 100%; height: auto; aspect-ratio: 2 / 3;
    box-shadow: 0 30px 60px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06), 5px 5px 0 -1px #d8d2c2, 9px 9px 0 -2px #bdb5a3;
    transform: perspective(1400px) rotateY(-7deg);
    transition: transform .5s var(--ease);
  }
  .cover img:hover { transform: perspective(1400px) rotateY(-2deg); }

  /* credibility */
  .cred { background: var(--navy); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: var(--s5) 0; }
  .cred ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4) var(--s2); max-width: 960px; margin: 0 auto; text-align: center; }
  .cred .num { font-family: var(--display); font-size: 2.8rem; font-weight: 800; line-height: 1; color: var(--white); font-variant-numeric: tabular-nums; }
  .cred .label { font-size: .9rem; color: var(--muted); margin-top: var(--s1); }

  /* sections */
  section { padding: var(--s7) 0; }
  .alt { background: var(--navy); }

  /* what's inside: the actual contents, in order */
  .toc { list-style: none; border-top: 1px solid var(--rule); }
  .toc li { display: grid; grid-template-columns: 64px 1fr; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
  .toc .n { font-family: var(--display); font-size: 1.6rem; font-weight: 800; color: var(--blue-bright); line-height: 1; }
  .toc h3 { margin-bottom: 6px; }
  .toc p { color: var(--muted); font-size: 1rem; }
  .also { display: grid; grid-template-columns: 64px 1fr; gap: var(--s3); padding-top: var(--s3); }
  .also .n { font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); padding-top: 4px; }
  .also p { color: var(--muted); font-size: 1rem; }

  /* who it's for */
  .for { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s4); }
  .for li { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); }
  .for li::before { content: ''; flex: none; width: 10px; height: 10px; margin-top: 9px; background: var(--gold); border-radius: 50%; }
  .any { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule); font-style: italic; font-weight: 600; font-size: 1.2rem; color: var(--white); }

  /* page from the book */
  .preview .kicker, .preview h2 { text-align: center; }
  .page {
    max-width: 640px; margin: var(--s5) auto 0; background: var(--paper); color: var(--ink);
    padding: 44px 44px 0; position: relative; overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,.45);
  }
  .page .rh { display: flex; justify-content: space-between; gap: var(--s2); font-size: .75rem; font-weight: 600; letter-spacing: .06em; color: var(--navy); border-bottom: 1px solid #d9dde6; padding-bottom: 10px; margin-bottom: var(--s3); }
  .page p { font-size: 1.05rem; line-height: 1.7; margin-bottom: 14px; font-weight: 400; }
  .page .fade { position: absolute; left: 0; right: 0; bottom: 0; height: 170px; background: linear-gradient(to bottom, rgba(248,248,248,0), var(--paper) 70%); pointer-events: none; }
  .preview .after { text-align: center; margin-top: var(--s4); }
  .preview .after p { color: var(--steel); font-size: .95rem; margin-top: var(--s2); }

  /* author */
  .author .wrap { display: grid; grid-template-columns: 300px 1fr; gap: var(--s6); align-items: start; }
  .author img { width: 100%; max-width: 300px; aspect-ratio: 1; object-fit: cover; object-position: top; border: 1px solid var(--gold); }
  .author h2 { margin-bottom: 4px; }
  .author .role { color: var(--gold); font-weight: 800; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--s3); }
  .author p { color: var(--muted); margin-bottom: var(--s2); max-width: 640px; }
  .author p.strong { color: var(--white); font-weight: 800; }
  .author .proof { font-size: 1.2rem; font-weight: 800; color: var(--white); margin: var(--s3) 0; }

  /* wood consulting, on paper */
  .wc { background: var(--paper); color: var(--ink); }
  .wc .kicker { color: var(--navy); }
  .wc a:focus-visible { outline-color: var(--navy); }
  .wc .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: center; }
  .wc img.lockup { width: 260px; margin-bottom: var(--s3); }
  .wc h2 { color: var(--navy); }
  .wc p { color: var(--ink); margin-bottom: var(--s2); }
  .wc .div { font-weight: 800; color: var(--navy); letter-spacing: .04em; margin: var(--s3) 0 var(--s2); display: flex; flex-wrap: wrap; gap: 4px 0; }
  .wc .div span { color: var(--blue); padding: 0 8px; }
  .wc .div b { font-weight: 800; white-space: nowrap; }
  .wc dl { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 6px var(--s3); margin-top: var(--s4); text-align: left; }
  .wc dt { font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); padding-top: 4px; }
  .wc dd a { color: var(--navy); font-weight: 600; text-decoration: none; }
  .wc dd a:hover { text-decoration: underline; }

  /* buy */
  .buy { background: var(--black); position: relative; overflow: hidden; text-align: center; }
  .buy::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 50% 40% at 50% 100%, rgba(201,151,46,.28), rgba(201,151,46,0) 70%); }
  .buy .wrap { position: relative; }
  .buy .lede { margin-left: auto; margin-right: auto; }
  .offers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); max-width: 820px; margin: 0 auto; text-align: left; }
  .offer { border: 1px solid var(--rule); padding: var(--s4); background: rgba(0,14,42,.85); display: flex; flex-direction: column; gap: var(--s2); }
  .offer.print { border-color: var(--gold); }
  .offer .fmt { font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
  .offer .price { font-family: var(--display); font-size: 2.8rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
  .offer .price sup { font-size: 1.2rem; vertical-align: top; margin-right: 2px; font-weight: 700; }
  .offer ul { list-style: none; color: var(--muted); font-size: .95rem; display: grid; gap: 6px; }
  .offer .btn { margin-top: auto; width: 100%; }
  .cost { max-width: 620px; margin: var(--s5) auto 0; text-align: left; border-left: 3px solid var(--gold); padding: 4px 0 4px var(--s3); }
  .cost h3 { color: var(--gold); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
  .cost p { color: var(--muted); }

  footer { padding: var(--s5) 0; border-top: 1px solid var(--rule); background: var(--navy-deep); }
  footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s2); }
  footer img { height: 28px; width: auto; }
  footer p { font-size: .9rem; color: var(--steel); }
  footer a { color: var(--muted); text-decoration: none; white-space: nowrap; }
  footer a:hover { color: var(--white); }
  footer .note { flex: 0 0 100%; max-width: 72ch; font-size: .95rem; color: var(--muted); }

  /* motion: scroll reveals only when JS is running; off under reduced motion */
  .gsap .reveal { opacity: 0; transform: translateY(24px); }
  .gsap .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .gsap .reveal { opacity: 1; transform: none; }
    .btn, .cover img { transition: none; }
  }

  @media (max-width: 900px) {
    .hero .wrap { grid-template-columns: 1fr; gap: var(--s5); text-align: center; }
    .hero { padding-top: 104px; }
    .hero .cover { order: -1; }
    .cover picture { max-width: 210px; }
    .cover img { transform: none; }
    .hero p.lead, .hero .sub { margin-left: auto; margin-right: auto; }
    .cta-row { justify-content: center; }
    .cred ul { grid-template-columns: repeat(2, 1fr); }
    .author .wrap, .wc .wrap { grid-template-columns: 1fr; gap: var(--s4); }
    .author img { max-width: 220px; }
    .offers { grid-template-columns: 1fr; }
  }
  @media (max-width: 600px) {
    /* mobile density (Sep 7 night): shorter hero, tighter bands, label floors */
    section { padding: var(--s5) 0; }
    .hero { min-height: 0; padding-top: 88px; padding-bottom: var(--s5); }
    .hero .wrap { gap: var(--s4); }
    .cover picture { max-width: 168px; }
    .kicker { font-size: .85rem; }
    .top a.wcl { font-size: .9rem; }
    .author img { max-width: 180px; }
    body { line-height: 1.5; }
    .hero p.lead { margin-bottom: var(--s3); }
    .for { grid-template-columns: 1fr; }
    .page { padding: 24px 18px 0; }
    .page p { line-height: 1.55; }
    .toc li, .toc .also { grid-template-columns: 44px 1fr; gap: var(--s2); }
    .toc .n { font-size: 1.3rem; }
    .top img { height: 24px; }
    .cta-row .btn { width: 100%; }
  }

  /* ===== elevation pass (Sep 7, 2026): WC site physics, book palette =====
     Topo contour field (adapted from the WC site's topo-field.js, itself from
     ThreeUI "TopoField", MIT) behind the hero and the buy section, lit from
     below in gold like the cover. GSAP carries entrance, word reveals,
     counters, parallax. Everything degrades: no JS = static, visible page. */
  canvas.field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
  .hero::before, .buy::before { z-index: 1; }
  .hero .wrap, .buy .wrap { z-index: 2; }
  .hero { background: var(--black); }
  .hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(5,5,5,.82) 0%, rgba(5,5,5,.55) 42%, rgba(5,5,5,0) 68%), linear-gradient(180deg, rgba(5,5,5,.7) 0%, rgba(5,5,5,0) 22%); }
  @media (max-width: 900px) { .hero::after { background: linear-gradient(180deg, rgba(5,5,5,.7) 0%, rgba(5,5,5,.2) 30%, rgba(5,5,5,.55) 60%, rgba(5,5,5,.85) 100%); } }

  /* header: fixed, quiet, earns a bar once the hero is gone */
  .top { position: fixed; z-index: 10; transition: background-color .3s var(--ease), padding .3s var(--ease); }
  .top .cta { display: none; color: var(--gold); font-weight: 800; font-size: .9rem; text-decoration: none; letter-spacing: .02em; }
  .top.is-scrolled { background: rgba(5,5,5,.94); padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .top.is-scrolled .cta { display: inline-block; }
  .top.is-scrolled a.wcl { display: none; }
  @media (min-width: 601px) { .top.is-scrolled a.wcl { display: inline; } .top .right { display: flex; gap: var(--s3); align-items: center; } }

  /* split text: words keep their wrap, chars move */
  .word { display: inline-block; white-space: nowrap; }
  .char { display: inline-block; will-change: transform, opacity; }
  .gsap .hero .hero-text > *, .gsap .hero .cover picture { opacity: 0; }
  .cover, .cover picture { will-change: transform; }

  /* the WC plate: lockup centered on its own axis, copy stays left */
  .wc .plate { text-align: center; }
  .wc .plate img.lockup { margin: 0 auto var(--s3); }
  .wc .plate .div { justify-content: center; }
  .wc .plate h2 { text-wrap: balance; }

  /* mobile buy bar: thumb zone, appears after the hero */
  .buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: none; gap: var(--s1); padding: 10px var(--s2) calc(10px + env(safe-area-inset-bottom)); background: rgba(5,5,5,.96); border-top: 1px solid var(--rule); transform: translateY(110%); transition: transform .35s var(--ease); }
  .buybar.is-on { transform: none; }
  .buybar .btn { min-height: 48px; flex: 1; padding: 10px 12px; font-size: .9rem; white-space: nowrap; }
  .buybar .btn small { display: none; }
  @media (max-width: 640px) { .buybar { display: flex; } body.has-buybar { padding-bottom: var(--buybar-h, 96px); } }

  .cred .rule { height: 1px; background: var(--gold); transform-origin: left; margin: 0 auto var(--s4); max-width: 960px; opacity: .6; }

  @media (prefers-reduced-motion: reduce) {
    .gsap .hero .hero-text > *, .gsap .hero .cover picture { opacity: 1; }
    .top, .buybar { transition: none; }
  }

  /* thank-you: on phones the downloads come before the cover (Astra A12) */
  @media (max-width: 900px) { .hero.ty .cover { order: 1; } }
  /* stacked download buttons: label over detail so both buttons stand the same height */
  @media (max-width: 600px) { .hero.ty .cta-row .btn { flex-direction: column; gap: 2px; padding: 12px 20px; } .hero.ty .cta-row .btn small { font-size: .85rem; } }

  /* footer policy links (Sep 8) */
  footer .legal-links { margin-top: var(--s2); font-size: .9rem; }
  footer .legal-links a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }