/* Dr. Bukky George-Taylor | Robert Taylor Media: shared design system for every route.
   Part 1 and part 2 are the two <style> blocks of the approved one-page build (sha256 4534073f...), moved verbatim.
   Part 3 holds the multipage additions in namespaced blocks. */

/* ======== Part 1: approved one-page stylesheet, head block (verbatim) */
  /* argesta webfont: atipo webfont license (one website, unlimited pageviews; license PDF held with canonical backup).
     Licensed for this site only: do not copy the font file to any other project or domain. */
  @font-face {
    font-family: "Argesta Display";
    src: url(/assets/font/argestadisplay-regular.woff2) format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
  }

  /* Vale Editorial Medium — custom display face for Dr Bukky.
     SIL OFL 1.1 derivative of Cormorant Garamond, 10 glyphs redrawn.
     Single static cut, so the weight range is declared to suppress faux-bold synthesis.
     License and provenance travel with the font in assets/font/. */
  @font-face {
    font-family: "Vale Editorial";
    src: url(/assets/font/ValeEditorial-Medium.woff2) format("woff2");
    font-weight: 100 900; font-style: normal; font-display: swap;
  }

  :root {
    /* Locked palette: four colours plus neutrals */
    --field: #1F1A15;      /* deep warm field */
    --gold: #C79A4B;       /* the single accent */
    --ivory: #F7F4EE;      /* long-form field */
    --ink: #191713;        /* text on ivory */
    --meta: #8A8177;       /* meta on the deep field (4.5:1) */
    --hair: #E4DED2;       /* hairline on light fields */
    --paper: #F1EDE4;      /* warm-paper alt block */
    /* Text-safe shades of the same neutral/accent for light fields (AA) */
    --meta-on-light: #6B635A;  /* 5.4:1 on ivory, 5.0:1 on paper */
    --gold-on-light: #8C6A2E;  /* 4.5:1 on ivory, large numerals only */
    --ivory-soft: #CFC6B8;     /* secondary text on the deep field */
    --hair-dark: rgba(199, 154, 75, 0.24);

    --display: "Vale Editorial", "Fraunces", "Iowan Old Style", Georgia, serif;
    --body: "Newsreader", "Iowan Old Style", Georgia, serif;
    --label: "Inter", "Helvetica Neue", Arial, sans-serif;

    --gutter: clamp(24px, 6vw, 104px);
    --max: 1240px;
    --measure: 640px;
    --scene: clamp(136px, 14vw, 224px);   /* vertical breath between scenes: one value for every scene */
    --ease: cubic-bezier(.2, .7, .2, 1);
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--ivory);
    color: var(--ink);
    font-family: var(--body);
    font-size: 19px;
    line-height: 1.7;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  @media (min-width: 900px) { body { font-size: 20px; } }
  img { display: block; max-width: 100%; height: auto; }
  h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
  h1 .award, h2, h3, .pull { text-wrap: balance; }
  p, dd, li { text-wrap: pretty; }
  ol, ul { padding: 0; list-style: none; }

  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
  a { transition: text-decoration-color .18s ease; } /* menu softness */
  a:hover { text-decoration-color: var(--gold); }
  :focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 1px; }
  .dark :focus-visible { outline-color: var(--gold); }

  .wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

  .label {
    font-family: var(--label);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1.5;
  }

  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .skip {
    position: absolute; left: 12px; top: -100px; z-index: 10;
    background: var(--gold); color: var(--field); padding: 12px 18px; text-decoration: none;
  }
  .skip:focus { top: 12px; }

  /* ---- Deep field */
  .dark { background: var(--field); color: var(--ivory); }

  /* ---- Masthead */
  /* Sticky masthead: navigation stays reachable on mobile; field bar keeps the marquee/panel contrast */
  .masthead { position: sticky; top: 0; z-index: 50; background: var(--field); }
  .masthead .wrap {
    position: relative;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 10px 32px; padding-top: 26px; padding-bottom: 24px;
    border-bottom: 1px solid var(--hair-dark);
  }
  .marque { text-decoration: none; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-height: 24px; }
  .marque b { font-family: var(--display); font-weight: 500; font-size: 21px; letter-spacing: -0.005em; font-variation-settings: "opsz" 36; }
  .marque span { color: var(--meta); font-size: 11px; }
  .nav ul { display: flex; flex-wrap: wrap; gap: 6px 26px; }
  @media (min-width: 900px) { .nav ul { gap: 4px 30px; } }
  .nav a {
    display: inline-block; padding: 6px 0; min-height: 24px;
    text-decoration: none; color: var(--ivory-soft); font-size: 11px;
    border-bottom: 1px solid transparent;
    transition: color .18s ease, border-color .18s ease; /* menu softness */
  }
  .nav a:hover { color: var(--ivory); border-bottom-color: var(--gold); }

  /* ---- Hero */
  .hero > .wrap {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "head" "plate" "body";
    gap: 56px;
    padding-top: 72px; padding-bottom: 96px;
  }
  .hero-head { grid-area: head; }
  .hero-plate { grid-area: plate; }
  .hero-body { grid-area: body; }

  .kicker { color: var(--gold); }

  h1 { margin-top: 28px; font-family: var(--display); font-weight: 560; }
  h1 .award {
    display: block;
    font-weight: 440;
    font-size: clamp(25px, 2.3vw, 33px);
    line-height: 1.24; letter-spacing: -0.01em;
    color: var(--gold);
    font-variation-settings: "opsz" 48;
    max-width: 18ch;
  }
  h1 .name {
    display: block; margin-top: 22px;
    font-size: clamp(48px, 6.6vw, 96px);
    line-height: 0.98; letter-spacing: -0.017em;
    font-variation-settings: "opsz" 144;
  }
  h1 .name span { display: block; }

  /* The hand-signed mark, fitted at its native ratio, white on the warm field */
  .signature { width: clamp(220px, 25vw, 344px); height: auto; margin-top: 26px; opacity: .9; }

  .dek {
    font-size: clamp(20px, 1.55vw, 23px); line-height: 1.62;
    color: var(--ivory-soft); max-width: 32ch;
  }
  .dek strong { color: var(--ivory); font-weight: 500; }
  .signed { margin-top: 32px; color: var(--ivory-soft); }

  .actions { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 16px 34px; align-items: center; }
  .btn {
    display: inline-flex; align-items: center; min-height: 48px; padding: 0 28px;
    border: 1px solid var(--gold); color: var(--gold); text-decoration: none;
    transition: background-color .3s ease, color .3s ease;
  }
  .btn:hover { background: var(--gold); color: var(--field); }
  .textlink { color: var(--ivory); padding: 12px 0; }

  .frame { position: relative; overflow: hidden; }
  .hero-plate .frame { background: #2A231C; }
  .hero-plate img { width: 100%; aspect-ratio: 819 / 1024; object-fit: cover; object-position: 50% 30%; }

  @media (min-width: 900px) {
    .hero > .wrap {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      grid-template-areas: "head plate" "body plate";
      grid-template-rows: auto 1fr;
      column-gap: clamp(64px, 8vw, 144px); row-gap: 56px;
      padding-top: 112px; padding-bottom: 136px;
    }
    .hero-head { align-self: end; }
    .hero-body { align-self: start; }
    h1 { margin-top: 36px; }
    h1 .name { margin-top: 30px; }
    .signature { margin-top: 34px; margin-left: -6px; }
  }

  /* ---- Credential bar */
  .thread { height: 1px; background: var(--gold); transform-origin: 0 50%; }
  .credentials dl { display: grid; grid-template-columns: 1fr; }
  .cred { padding: 30px 0; border-bottom: 1px solid var(--hair-dark); }
  .cred:last-child { border-bottom: 0; padding-bottom: 96px; }
  .cred dt { color: var(--meta); }
  .cred dd { margin-top: 10px; font-family: var(--display); font-weight: 460; font-size: 25px; line-height: 1.25; letter-spacing: -0.01em; font-variation-settings: "opsz" 36; }
  .cred dd em { color: var(--gold); font-style: normal; }
  .cred dd .sub { display: block; margin-top: 8px; font-family: var(--body); font-size: 17px; font-weight: 400; color: var(--ivory-soft); letter-spacing: 0; }
  .press { font-weight: 420; }
  .press .nw { white-space: nowrap; }
  .press .dot { color: var(--gold); padding: 0 0.35em; }
  @media (min-width: 900px) {
    .credentials dl { grid-template-columns: 1.05fr 1fr 1.6fr; }
    .cred, .cred:last-child { padding: 44px 44px 128px; border-bottom: 0; border-left: 1px solid var(--hair-dark); }
    .cred:first-child { padding-left: 0; border-left: 0; }
    .cred:last-child { padding-right: 0; }
    .cred dd { font-size: 27px; }
  }

  /* ---- Scene scaffolding (light fields) */
  .scene { padding: var(--scene) 0; }
  section[id] { scroll-margin-top: 96px; }
  .scene.paper { background: var(--paper); }
  .eyebrow { color: var(--meta-on-light); }
  h2 {
    margin-top: 28px;
    font-family: var(--display); font-weight: 540;
    font-size: clamp(38px, 4.5vw, 64px); line-height: 1.05; letter-spacing: -0.016em;
    font-variation-settings: "opsz" 120;
    max-width: 15ch;
  }
  h2 em { font-family: "Fraunces", "Iowan Old Style", Georgia, serif; font-style: italic; font-weight: 420; }
  h2 .nb { white-space: nowrap; }
  .lede { margin-top: 36px; max-width: 34ch; font-size: 1.1em; line-height: 1.6; }

  /* ---- Evidence */
  @media (min-width: 900px) {
    .evidence-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 96px; align-items: end; }
    .evidence-head .lede { margin-top: 0; justify-self: end; }
  }
  .proofs { margin-top: clamp(72px, 8vw, 128px); border-top: 1px solid var(--ink); }
  .proof { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 48px 0 56px; border-bottom: 1px solid var(--hair); }
  .proof .num {
    font-family: var(--display); font-weight: 400; font-variation-settings: "opsz" 144;
    font-size: 52px; line-height: 1; letter-spacing: -0.02em; color: var(--gold-on-light);
  }
  .proof h3 {
    font-family: var(--display); font-weight: 540; font-variation-settings: "opsz" 72;
    font-size: clamp(30px, 2.8vw, 40px); line-height: 1.1; letter-spacing: -0.014em;
  }
  .proof .meta { margin-top: 14px; color: var(--meta-on-light); }
  .proof .copy p { max-width: 50ch; }
  .proof .copy p + p { margin-top: 16px; }
  .proof .copy a { color: var(--ink); text-decoration-color: var(--gold-on-light); }
  .clients { margin-top: 26px; }
  .clients .label { color: var(--meta-on-light); display: block; }
  .clients p { margin-top: 8px; }
  .clients p + .label { margin-top: 20px; }
  @media (min-width: 900px) {
    .proof { grid-template-columns: 128px minmax(0, 4fr) minmax(0, 6fr); column-gap: 56px; padding: 72px 0 80px; }
    .proof .num { font-size: 64px; margin-top: -4px; }
  }

  /* ---- Industries (the industry reel on the deep field; marquee mechanics below) */
  .reel .eyebrow { color: var(--gold); }
  .reel h2 { color: var(--ivory); }
  .reel .lede { color: var(--ivory-soft); }
  @media (min-width: 900px) {
    .reel-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 96px; align-items: end; }
    .reel-head .lede { margin-top: 0; justify-self: end; }
  }

  /* ---- Books */
  .book-grid { display: grid; grid-template-columns: 1fr; gap: 64px; align-items: center; }
  .cover { width: min(64vw, 300px); margin: 0 auto; }
  .book-sub { margin-top: 20px; font-size: 1.1em; line-height: 1.5; color: var(--meta-on-light); }
  .facts { margin-top: 48px; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: clamp(32px, 5vw, 64px); }
  .facts dt { color: var(--meta-on-light); margin-top: 8px; }
  .facts div { display: flex; flex-direction: column-reverse; }
  .facts dd { font-family: var(--display); font-weight: 400; font-variation-settings: "opsz" 144; font-size: clamp(40px, 4vw, 56px); line-height: 1; letter-spacing: -0.02em; color: var(--gold-on-light); }
  .masterclasses { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--hair); max-width: 46ch; scroll-margin-top: 48px; }
  .masterclasses .label { color: var(--meta-on-light); display: block; margin-bottom: 12px; }
  .stockists { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px 32px; }
  .stockists a { display: inline-block; padding: 8px 0; color: var(--ink); text-decoration-color: var(--gold-on-light); }
  @media (min-width: 900px) {
    .book-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(64px, 9vw, 152px); }
    .cover { width: min(100%, 340px); }
  }

  /* ---- Curated Experiences */
  .pull {
    margin-top: 32px;
    font-family: var(--display); font-weight: 400;
    font-size: clamp(34px, 4.6vw, 64px); line-height: 1.12; letter-spacing: -0.016em;
    font-variation-settings: "opsz" 144;
    max-width: 21ch;
  }
  .pull .mark, .story h2 .mark { color: var(--gold-on-light); }
  .spot-intro { margin-top: 40px; max-width: 42ch; }
  .realms { margin-top: clamp(80px, 9vw, 144px); display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--ink); }
  .realm { padding: 34px 0 40px; border-bottom: 1px solid var(--hair); }
  .realm .label { color: var(--meta-on-light); }
  .realm h3 { margin-top: 14px; font-family: var(--display); font-weight: 520; font-size: 28px; line-height: 1.15; letter-spacing: -0.012em; font-variation-settings: "opsz" 48; }
  @media (min-width: 900px) {
    .spot-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 96px; align-items: end; }
    .spot-intro { margin-top: 0; }
    .realms { grid-template-columns: repeat(3, 1fr); }
    .realm { padding: 44px 44px 0; border-bottom: 0; border-left: 1px solid var(--hair); }
    .realm:first-child { padding-left: 0; border-left: 0; }
    .realm:last-child { padding-right: 0; }
  }

  /* ---- About / Origin */
  .origin-grid { display: grid; grid-template-columns: 1fr; gap: 72px; }
  .portrait img { width: 100%; aspect-ratio: 1000 / 1184; object-fit: cover; }
  .portrait .frame { background: #D9DADB; }
  .story { max-width: var(--measure); }
  .story p { margin-top: 24px; }
  .story h2 + p { margin-top: 36px; }
  .story h2 + p::first-letter {
    float: left; font-family: var(--display); font-weight: 560; font-variation-settings: "opsz" 48;
    font-size: 4.1em; line-height: 0.82; padding: 0.06em 0.1em 0 0; color: var(--ink);
  }
  .ledger { margin-top: 72px; border-top: 1px solid var(--ink); }
  .ledger > .label { display: block; padding: 20px 0 8px; color: var(--meta-on-light); }
  .ledger ol li { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hair); font-size: 17px; line-height: 1.5; }
  .ledger ol li > span:first-child { font-family: var(--label); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--meta-on-light); padding-top: 3px; }
  @media (min-width: 900px) {
    .origin-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(64px, 9vw, 144px); align-items: start; }
    .portrait { position: sticky; top: 64px; }
  }

  /* ---- Contact (the one deep-field CTA strip) */
  .contact { padding: var(--scene) 0; }
  .contact .eyebrow { color: var(--gold); }
  .contact h2 { color: var(--ivory); max-width: 14ch; }
  .contact .lede { color: var(--ivory-soft); max-width: 40ch; }
  .primary-route {
    display: inline-block; margin-top: 56px;
    font-family: var(--display); font-weight: 420; font-variation-settings: "opsz" 72;
    font-size: clamp(24px, 3.4vw, 46px); line-height: 1.15; letter-spacing: -0.012em;
    color: var(--ivory); text-decoration-color: var(--gold); overflow-wrap: anywhere;
  }
  .routes { margin-top: 80px; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--hair-dark); }
  .route { padding: 24px 0; border-bottom: 1px solid var(--hair-dark); }
  .route dt { color: var(--meta); }
  .route dd { margin-top: 6px; font-size: 20px; }
  .route a { display: inline-block; padding: 4px 0; text-decoration-color: rgba(199,154,75,.6); }
  @media (min-width: 900px) {
    .routes { grid-template-columns: repeat(4, 1fr); }
    .route { padding: 32px 32px 0; border-bottom: 0; border-left: 1px solid var(--hair-dark); }
    .route:first-child { padding-left: 0; border-left: 0; }
  }

  /* ---- Footer */
  .footer { padding: 0 0 40px; }
  .footer .sign { padding-top: clamp(88px, 10vw, 144px); }
  .footer .sign img { width: clamp(260px, 36vw, 480px); height: auto; opacity: .92; }
  .foot-grid { margin-top: clamp(72px, 8vw, 112px); display: grid; grid-template-columns: 1fr 1fr; gap: 56px 32px; }
  .foot-col h2 { margin: 0 0 18px; font-family: var(--label); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; line-height: 1.5; text-transform: uppercase; color: var(--meta); max-width: none; }
  .foot-col li a { display: inline-flex; align-items: center; gap: 12px; min-height: 36px; color: var(--ivory-soft); text-decoration: none; font-size: 17px; transition: color .25s ease; }
  .foot-col li a:hover { color: var(--ivory); }
  .socials svg { width: 20px; height: 20px; flex: none; color: var(--meta); transition: color .25s ease; }
  .socials a:hover svg, .socials a:focus-visible svg { color: var(--gold); }
  .newsletter { grid-column: 1 / -1; }
  .newsletter p { color: var(--ivory-soft); font-size: 17px; line-height: 1.6; max-width: 34ch; }
  .newsletter form { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 14px; max-width: 460px; }
  .newsletter label { flex-basis: 100%; color: var(--meta); font-size: 11px; }
  .newsletter input {
    flex: 1 1 220px; min-height: 48px; padding: 0 2px;
    background: transparent; color: var(--ivory); font: inherit; font-size: 18px;
    border: 0; border-bottom: 1px solid var(--meta); border-radius: 0;
  }
  .newsletter input::placeholder { color: var(--meta); opacity: 1; }
  .newsletter input:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
  .newsletter button { cursor: pointer; background: transparent; }
  .rights { margin-top: clamp(72px, 8vw, 112px); padding-top: 24px; border-top: 1px solid var(--hair-dark); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; color: var(--meta); font-size: 15px; }
  .rights ul { display: flex; flex-wrap: wrap; gap: 4px 28px; }
  .rights a { display: inline-block; padding: 4px 0; text-decoration: none; transition: color .18s ease; } /* menu softness */
  .rights a:hover { color: var(--ivory); text-decoration: underline; text-decoration-color: var(--gold); }
  @media (min-width: 900px) {
    .foot-grid { grid-template-columns: 1fr 1fr 1.1fr 1.7fr; column-gap: 56px; }
    .newsletter { grid-column: auto; }
  }

  /* ---- Motion: transform/opacity only, opt-in via html.js */
  @keyframes enter  { from { opacity: 0; transform: translateY(20px); } }
  @keyframes fade   { from { opacity: 0; } }
  @keyframes settle { from { transform: scale(1.02); } }

  /* Hero: one cohesive entrance. The headline, signature and dek rise together; the plate fades and settles */
  .js .hero-head, .js .hero-body { animation: enter 1.2s var(--ease) .12s both; }
  .js .hero-plate .frame { animation: fade 1.4s ease-out both; }
  .js .hero-plate img { animation: settle 2.2s var(--ease) both; }

  /* Scenes: a gentle 20px rise as each frame enters; children of [data-stagger] are offset by --i */
  .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .9s ease-out, transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 140ms); }
  .js .reveal.in { opacity: 1; transform: none; }

  /* Portraits: a quiet 1.02 → 1.0 scan on enter */
  .js .scan img { transform: scale(1.02); transition: transform 1.8s var(--ease); }
  .js .scan.in img { transform: none; }

  /* The gold thread: a single hairline that draws itself. It opens the credentials, closes the footer */
  .js .thread { transform: scaleX(0); transition: transform 1.6s cubic-bezier(.6, 0, .2, 1) .35s; }
  .js .thread.in { transform: none; }

  /* Intro curtain: the signature settles on the field, the gold thread draws beneath it with a registration stroke,
     a short hold, then the curtain lifts away into the hero. Only ever shown under html.intro (set with html.js). */
  .intro-curtain { display: none; }
  .js.intro .intro-curtain {
    position: fixed; inset: 0; z-index: 100; pointer-events: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--field);
    animation: curtain-lift 1s cubic-bezier(.6, 0, .2, 1) 2.2s both;
  }
  .intro-mark { display: flex; flex-direction: column; align-items: center; }
  .intro-curtain .signature { width: clamp(260px, 32vw, 440px); margin: 0; opacity: .9; animation: enter 1s var(--ease) both; }
  .intro-rule { position: relative; width: clamp(240px, 28vw, 380px); height: 1px; margin-top: 22px; }
  .intro-rule .thread { animation: draw-x 1.6s cubic-bezier(.6, 0, .2, 1) .1s both; }
  .intro-rule::after {
    content: ""; position: absolute; left: 50%; top: -12px; width: 1px; height: 25px;
    background: var(--gold); transform-origin: 50% 50%;
    animation: draw-y 1.6s cubic-bezier(.6, 0, .2, 1) .25s both;
  }
  @keyframes draw-x { from { transform: scaleX(0); } to { transform: none; } }
  @keyframes draw-y { from { transform: scaleY(0); } to { transform: none; } }
  @keyframes curtain-lift { to { opacity: 0; transform: translateY(-24px); visibility: hidden; } }

  /* The hero's own entrance waits, unchanged, under the curtain, then plays as it lifts */
  .js.intro-hold .hero-head, .js.intro-hold .hero-body,   .js.intro-hold .hero-plate .frame, .js.intro-hold .hero-plate img { animation-play-state: paused; }
  /* Nothing below the hero reveals under the curtain; once it lifts, the credential bar follows the hero a beat behind */
  .js.intro-hold main .reveal.in { opacity: 0; transform: translateY(20px); }
  .js.intro-hold main .thread.in { transform: scaleX(0); }
  .js .credentials .reveal { transition-delay: calc(.3s + var(--i, 0) * 140ms); }
  .js .credentials .thread { transition-delay: .45s; }

  @media (prefers-reduced-motion: reduce) {
    .intro-curtain { display: none !important; }
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
    .reveal, .scan img, .thread { opacity: 1 !important; transform: none !important; }
  }

  @media print {
    .dark { background: #fff; color: #000; }
    .nav, .actions, .skip, .newsletter, .intro-curtain { display: none !important; }
    .reveal, .scan img, .thread { opacity: 1 !important; transform: none !important; }
  }

/* ======== Part 2: approved one-page stylesheet, reel and mobile block (verbatim) */
  /* ---- Industry reel: one slow marquee of sector groups (label above, marks in a row, hairline between) */
  .reel .marquee { margin-top: clamp(72px, 8vw, 128px); }
  .marquee { max-width: 1856px; margin: 0 auto; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
  .m-track { display: flex; width: max-content; animation: m-scroll 55s linear infinite; }
  .m-set { display: flex; align-items: center; gap: 56px; padding: 0 28px; margin: 0; list-style: none; }
  .m-set li { flex: 0 0 auto; width: 176px; height: 56px; display: flex; align-items: center; justify-content: center; color: var(--ivory-soft); }
  .m-logo { height: 26px; width: auto; display: block; color: var(--ivory-soft); }
  .m-bw-tall { height: 38px; }  /* stacked crest needs extra optical height; wordmark stays legible */
  .m-mono, .m-mono path { fill: currentColor; }
  .m-mono.m-bw, .m-mono.m-bw path { fill: none; stroke: currentColor; stroke-width: .75px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .m-word { font-family: "Argesta Display", var(--display); letter-spacing: .02em; font-size: 15px; white-space: nowrap; display: flex; align-items: baseline; gap: 7px; color: #1d1a15; }
  .m-word small { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; opacity: .75; }
  .m-dubai { font-style: italic; }
  .m-bp { font-size: 21px; font-weight: 600; letter-spacing: 0; }
  .m-tile { background: var(--paper); padding: 10px 20px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(29,26,21,.12); }
  .m-fdn { font-family: "Argesta Display", var(--display); color: var(--ivory-soft); font-size: 14px; display: flex; align-items: baseline; gap: 7px; }
  .m-fdn small { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; opacity: .75; }
  .m-set li.reel-group { width: auto; height: auto; flex-direction: column; gap: 18px; }
  .reel-label { font-size: 11px; letter-spacing: .22em; color: var(--gold); white-space: nowrap; }
  .reel-group ul { display: flex; align-items: center; justify-content: center; gap: 40px; margin: 0; padding: 0; list-style: none; }
  .reel-group ul li { width: auto; height: auto; min-height: 56px; position: relative; }
  .m-set li.reel-divider { width: 1px; height: 44px; background: var(--hair-dark); align-self: center; }
  .m-office { white-space: normal; display: block; max-width: 320px; text-align: center; line-height: 1.3; text-wrap: balance; }
  @keyframes m-scroll { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    .m-track { animation: none; width: auto; }
    .marquee { max-width: none; -webkit-mask-image: none; mask-image: none; }
    .m-set { flex: 1 1 100%; flex-wrap: wrap; justify-content: center; row-gap: 20px; }
    .m-set[aria-hidden="true"] { display: none; }
    .reel .m-set { padding: 0 var(--gutter); column-gap: 72px; row-gap: 48px; }
    .m-set li.reel-divider { display: none; }
    .m-set li.reel-group { flex-shrink: 1; max-width: 100%; }
    .reel-label { white-space: normal; text-align: center; }
    .reel-group ul { flex-wrap: wrap; row-gap: 16px; }
  }
  @media (max-width: 899px) {
    .m-set { gap: 40px; padding: 0 20px; }
    .m-set li { width: 140px; height: 46px; }
    .m-logo { height: 21px; }
    .m-bw-tall { height: 30px; }
    .m-word { font-size: 13px; }
    .m-bp { font-size: 18px; }
    .m-lagos { padding: 8px 12px; gap: 5px; }
    .m-lagos small { letter-spacing: .14em; }
    .m-set li.reel-group { gap: 14px; }
    .reel-label { font-size: 10px; }
    .reel-group ul { gap: 28px; }
    .reel-group ul li { min-height: 46px; }
    .m-set li.reel-divider { height: 40px; }
    .m-office { max-width: 264px; padding: 8px 14px; }
  }

  /* ---- Mobile menu (themed hamburger; hairline vocabulary) */
  .menu-btn {
    display: none;
    background: none; border: 0; padding: 10px 0; margin-left: auto;
    color: var(--ivory-soft); cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: color .18s ease, border-color .18s ease; /* menu softness */
  }
  .menu-btn:hover { color: var(--ivory); border-bottom-color: var(--gold); }
  .menu-btn .bars { display: inline-block; width: 20px; height: 12px; position: relative; margin-left: 7px; }
  .menu-btn .bars i { position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform .35s cubic-bezier(.6,0,.2,1), opacity .25s ease, top .35s cubic-bezier(.6,0,.2,1); }
  .menu-btn .bars i:nth-child(1) { top: 0; }
  .menu-btn .bars i:nth-child(2) { top: 50%; }
  .menu-btn .bars i:nth-child(3) { top: 100%; }
  .menu-btn[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg) }
  @media (max-width: 899px) {
    .menu-btn { display: inline-flex; align-items: center; }
    .nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--field); padding: 4px 24px 10px; border-top: 1px solid var(--hair-dark); border-bottom: 1px solid var(--hair-dark); z-index: 40; }
    .nav ul { display: flex; flex-direction: column; gap: 0; }
    .nav ul li { border-bottom: 1px solid var(--hair-dark); }
    .nav ul li:last-child { border-bottom: 0; }
    .nav ul a { display: block; padding: 16px 0; font-size: 12px; width: 100%; }
    .nav ul a:hover { text-decoration: none; }
    /* menu softness: closed panel stays laid out but hidden, unfocusable and untappable; visibility flips after the fade on close */
    .nav { visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .26s cubic-bezier(.6,0,.2,1), transform .26s cubic-bezier(.6,0,.2,1), visibility 0s linear .26s; }
    .nav.open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity .3s cubic-bezier(.6,0,.2,1), transform .3s cubic-bezier(.6,0,.2,1), visibility 0s linear 0s; }
  }

  /* mobile readability */
  @media (max-width: 899px) {
    :root { --scene: 112px; }
    .nav { padding-left: var(--gutter); padding-right: var(--gutter); } /* menu softness: was .nav.open, same values */
    .menu-btn { min-height: 44px; padding: 0; }
    .marque { min-height: 44px; }
    .foot-col h2, .newsletter label { font-size: 12px; }

    .hero > .wrap { gap: 40px; padding-top: 48px; padding-bottom: 72px; }
    .textlink { padding: 13px 0; }

    .press { display: flex; flex-wrap: wrap; gap: 0 28px; }
    .press .dot { display: none; }
    .book-grid { grid-template-columns: minmax(0, 1fr); }
    .cover { width: min(72vw, 300px); margin: 0; }
    .stockists { margin-top: 27px; }
    .stockists a { padding: 13px 0; }
    .pull > .mark:first-child { margin-left: -0.24em; }
    .story h2 > .mark:first-child { margin-left: -0.28em; }

    .primary-route { margin-top: 48px; padding: 8px 0; }
    .route a { padding: 5px 0; }

    .foot-col li a { min-height: 44px; }
    .foot-grid > .foot-col:nth-child(3) { grid-column: 1 / -1; }
    .socials { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
    .newsletter input { padding: 0; }
    .rights { gap: 4px 32px; align-items: center; }
    .rights a { padding: 10px 0; }
  }
  @media (max-width: 599px) {
    .masthead .wrap { flex-wrap: nowrap; column-gap: 12px; }
    .marque { flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
    .marque b { font-size: clamp(18px, 5.4vw, 21px); line-height: 1.2; }
    .menu-btn { flex: none; }
    .marque span { font-size: 12px; }
    .press { display: block; }
    .press .nw { display: block; }
  }
  @media (max-width: 480px) {
    .primary-route { font-size: clamp(20px, 6.2vw, 24px); padding: 11px 0; }
  }
  @media (max-width: 359px) {
    .marque span { font-size: 11px; }
  }
  @media (max-width: 380px) {
    .facts { column-gap: 18px; }
    .ledger ol li { grid-template-columns: 72px 1fr; gap: 12px; }
  }
  @media (min-width: 560px) and (max-width: 899px) {
    .hero-plate img { max-height: clamp(360px, 62vh, 520px); object-position: 50% 8%; }
  }
  /* mobile typography: alignment system for phones (<=599px).
     Centered: display-scale moments (scene headers, hero stack, book cover and facts, pull quote, footer).
     Left with balanced rag: reading-scale copy, lists, ledger rows, the credentials stack. Desktop untouched. */
  @media (max-width: 599px) { /* mobile typography */
    /* optical centering: uppercase tracked labels carry trailing letter-space, offset it so they sit true */
    .evidence-head .eyebrow, .reel-head .eyebrow, #books .eyebrow, #experiences .eyebrow, .story .eyebrow, .contact .eyebrow,
    .kicker, .signed, .facts dt, .foot-col h2, .newsletter label { padding-left: 0.2em; }

    /* scene headers: eyebrow + h2 + lede, centered on a fixed measure */
    .evidence-head, .reel-head, .contact .wrap > div { text-align: center; }
    .evidence-head h2, .reel-head h2, #books h2, .story h2, .contact h2 { margin-inline: auto; text-align: center; }
    .evidence-head .eyebrow, .reel-head .eyebrow, #books .eyebrow, #experiences .eyebrow, .story .eyebrow { text-align: center; }
    .lede { margin-inline: auto; text-wrap: balance; }
    .contact .lede { max-width: 34ch; }
    .story h2 > .mark:first-child { margin-left: 0; }

    /* hero: one centered stack (head above the portrait, dek/signed/actions below it) */
    .hero-head, .hero-body { text-align: center; }
    h1 .award { max-width: 16ch; margin-inline: auto; }
    h1 .name { font-size: clamp(46px, 14vw, 54px); }
    .dek { margin-inline: auto; max-width: 30ch; text-wrap: balance; }
    .actions { justify-content: center; }

    /* books: cover, header and edition facts centered; copy beneath stays left */
    .cover { margin-inline: auto; }
    #books .book-sub { margin-inline: auto; max-width: 26ch; text-align: center; text-wrap: balance; }
    .facts { justify-content: center; text-align: center; }
    .facts div { align-items: center; }
    .masterclasses { max-width: 38ch; }

    /* experiences: the pull quote is the display moment */
    .pull { margin-inline: auto; text-align: center; }
    .pull > .mark:first-child { margin-left: 0; }

    /* reading measure and rag */
    .spot-intro, .story p:not(.eyebrow), .newsletter p { max-width: 34ch; margin-inline: auto; }
    .proof .copy p { max-width: 38ch; }
    .story p:not(.eyebrow) { text-wrap: pretty; }
    .spot-intro, .proof .copy p, .masterclasses p, .ledger ol li > span:last-child { text-wrap: balance; }

    /* footer: signature, columns, newsletter and legal lines as one centered ending */
    .footer .sign img { margin-inline: auto; }
    .foot-grid { grid-template-columns: minmax(0, 1fr); text-align: center; }
    .foot-col h2 { text-align: center; }
    .foot-col li a { justify-content: center; }
    .foot-grid > nav ul { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 28px; max-width: 300px; margin-inline: auto; }
    .socials { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 28px; }
    .newsletter p { text-wrap: balance; }
    .newsletter form { justify-content: center; margin-inline: auto; }
    .newsletter label { text-align: center; }
    .newsletter input { text-align: center; }
    .rights { justify-content: center; text-align: center; }
    .rights ul { justify-content: center; }
  }
  @media (max-width: 380px) { /* mobile typography */
    .foot-grid > nav ul { column-gap: 20px; }
  }

/* ======== Part 3: multipage additions
   Namespaced: shell rules use the mp- prefix; page rules sit under the route class on <html>
   (.p-home, .p-about, .p-work, .p-masterclasses, .p-books, .p-contact, .p-404) with a matching
   class prefix (hm-, ab-, wk-, mc-, ct-). No class below exists in the one-page source. */

/* ---- Shell: navigation (route links, the 1:1 CTA, the active route) */
.nav .mp-nav-list { align-items: center; }
.nav a[aria-current="page"] { color: var(--ivory); border-bottom-color: var(--gold); }
.nav .mp-nav-cta {
  padding: 6px 14px; border: 1px solid var(--gold); color: var(--gold);
  transition: background-color .3s ease, color .3s ease; /* menu softness */
}
.nav .mp-nav-cta:hover { background: var(--gold); color: var(--field); }
@media (max-width: 899px) {
  .nav .mp-nav-list { align-items: stretch; }
  .nav .mp-nav-cta { margin: 14px 0 8px; padding: 14px 16px; text-align: center; }
}

/* ---- Shell: interior page head (route title on the deep field; enters exactly like the hero) */
.mp-head > .wrap { padding-top: 88px; padding-bottom: 104px; }
.mp-head .eyebrow { color: var(--gold); }
.mp-head .lede { color: var(--ivory-soft); }
.mp-title {
  font-weight: 540; font-size: clamp(44px, 5.6vw, 84px); line-height: 1.02; letter-spacing: -0.017em;
  font-variation-settings: "opsz" 144; max-width: 16ch; text-wrap: balance;
}
.mp-title em { font-family: "Fraunces", "Iowan Old Style", Georgia, serif; font-style: italic; font-weight: 420; }
.mp-title .nb { white-space: nowrap; }
.js .mp-head > .wrap { animation: enter 1.2s var(--ease) .12s both; }
@media (min-width: 900px) {
  .mp-head > .wrap { padding-top: 128px; padding-bottom: 144px; }
}

/* ---- Shell: a text route on light fields (same hairline treatment as the stockist links) */
.mp-link { display: inline-block; padding: 8px 0; color: var(--ink); text-decoration-color: var(--gold-on-light); }

/* ---- Shell: cross-page continuity. Progressive enhancement: browsers without cross-document
   view transitions simply navigate; reduced motion never opts in. Crossfade and position only. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .masthead { view-transition-name: mp-masthead; }
  .footer { view-transition-name: mp-footer; }
  main h1 { view-transition-name: mp-title; }
  ::view-transition-group(root) { animation-duration: .5s; animation-timing-function: var(--ease); }
  ::view-transition-group(mp-title) { animation-duration: .7s; animation-timing-function: var(--ease); }
}

/* ---- Shell: phones keep the alignment system (display-scale centred, reading-scale left) */
@media (max-width: 599px) { /* mobile typography */
  .mp-head > .wrap { padding-top: 64px; padding-bottom: 80px; text-align: center; }
  .mp-scene-head { text-align: center; }
  .mp-title { margin-inline: auto; text-align: center; font-size: clamp(38px, 11.5vw, 48px); }
  .mp-scene-head h2 { margin-inline: auto; text-align: center; }
  .mp-head .eyebrow, .mp-scene-head .eyebrow { padding-left: 0.2em; }
}

/* ---- Home: three doors out (hairline columns in the realms vocabulary) */
.p-home .hm-doors { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--ink); }
.p-home .hm-door { display: block; padding: 34px 0 40px; border-bottom: 1px solid var(--hair); text-decoration: none; }
.p-home .hm-door .label { display: block; color: var(--meta-on-light); }
.p-home .hm-door-text {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
  text-decoration-color: transparent; transition: text-decoration-color .18s ease; /* menu softness */
}
.p-home .hm-door:hover .hm-door-text { text-decoration-color: var(--gold-on-light); }
.p-home .hm-door h3 { margin-top: 14px; font-family: var(--display); font-weight: 520; font-size: 28px; line-height: 1.15; letter-spacing: -0.012em; font-variation-settings: "opsz" 48; }
.p-home .hm-door h3 em { font-family: "Fraunces", "Iowan Old Style", Georgia, serif; font-style: italic; font-weight: 420; }
.p-home .hm-door p { margin-top: 12px; max-width: 34ch; }
@media (min-width: 900px) {
  .p-home .hm-doors { grid-template-columns: repeat(3, 1fr); }
  .p-home .hm-door { padding: 44px 44px 8px; border-bottom: 0; border-left: 1px solid var(--hair); }
  .p-home .hm-door:first-child { padding-left: 0; border-left: 0; }
  .p-home .hm-door:last-child { padding-right: 0; }
}
@media (max-width: 599px) { /* mobile typography */
  .p-home .hm-door p { text-wrap: balance; }
}

/* ---- About: the firm, its affiliations and the trait triad */
.p-about .ab-lists { margin-top: clamp(72px, 8vw, 128px); display: grid; grid-template-columns: 1fr; gap: 64px; }
.p-about .ab-list h3 { padding-bottom: 14px; border-bottom: 1px solid var(--ink); color: var(--meta-on-light); }
.p-about .ab-list li { padding: 14px 0; border-bottom: 1px solid var(--hair); font-size: 18px; line-height: 1.5; }
.p-about .ab-triad { margin-top: clamp(96px, 10vw, 160px); }
.p-about .ab-triad p {
  padding-top: 40px; text-align: center;
  font-family: var(--display); font-weight: 400; font-variation-settings: "opsz" 144;
  font-size: clamp(32px, 4.2vw, 60px); line-height: 1.15; letter-spacing: -0.016em;
}
.p-about .ab-triad span { white-space: nowrap; }
.p-about .ab-dot { color: var(--gold-on-light); padding: 0 0.3em; }
@media (min-width: 900px) {
  .p-about .ab-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 96px; row-gap: 88px; }
}
@media (max-width: 599px) { /* mobile typography */
  .p-about .ab-list li { text-wrap: balance; }
}

/* ---- Client Experience: static industry depth (the retired breadth ledger, restored without motion) */
.p-work .wk-industries { padding-top: 0; }
.p-work .wk-sectors { border-top: 1px solid var(--gold); }
.p-work .wk-sector { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 36px 0 40px; border-bottom: 1px solid var(--hair-dark); }
.p-work .wk-sector-name {
  margin-top: 0; max-width: none;
  font-family: var(--display); font-weight: 540; font-variation-settings: "opsz" 72;
  font-size: clamp(27px, 2.4vw, 34px); line-height: 1.12; letter-spacing: -0.014em; color: var(--ivory);
}
.p-work .wk-sector-note { color: var(--ivory-soft); max-width: 40ch; text-wrap: pretty; }
.p-work .wk-sector-clients { margin-top: 6px; }
.p-work .wk-sector-clients li { color: var(--gold); line-height: 1.5; padding: 3px 0; }
.p-work .wk-recognition { padding-top: var(--scene); }
@media (min-width: 900px) {
  .p-work .wk-sector { grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); column-gap: 56px; padding: 48px 0 52px; align-items: baseline; }
  .p-work .wk-sector-clients { margin-top: 0; }
  .p-work .wk-recognition .credentials dl { grid-template-columns: 1fr 1.6fr; }
}
@media (max-width: 899px) {
  .p-work .wk-sector { padding: 32px 0 36px; }
  .p-work .wk-sector-clients li { overflow-wrap: anywhere; }
}
@media (max-width: 599px) { /* mobile typography */
  .p-work .wk-sector-note { text-wrap: balance; }
}

/* ---- Masterclasses: curriculum, the insight, the past session, the 1:1 */
.p-masterclasses .mc-topics { margin-top: clamp(72px, 8vw, 128px); display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--ink); }
.p-masterclasses .mc-topic { padding: 30px 0 34px; border-bottom: 1px solid var(--hair); }
.p-masterclasses .mc-topic .label { color: var(--gold-on-light); }
.p-masterclasses .mc-topic h3 { margin-top: 12px; font-family: var(--display); font-weight: 520; font-size: 28px; line-height: 1.15; letter-spacing: -0.012em; font-variation-settings: "opsz" 48; }
.p-masterclasses .mc-method { margin-top: 40px; color: var(--meta-on-light); }
.p-masterclasses .mc-audience { margin-top: 24px; color: var(--meta-on-light); }
.p-masterclasses .mc-dot { color: var(--gold-on-light); padding: 0 0.35em; }
.p-masterclasses .mc-insight .pull { margin-top: 0; max-width: 24ch; }
.p-masterclasses .mc-session h2 { font-size: clamp(32px, 3.4vw, 48px); max-width: 20ch; }
.p-masterclasses .mc-close { max-width: 38ch; }
.p-masterclasses .mc-next { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--hair); max-width: 46ch; }
.p-masterclasses .mc-next p { font-family: var(--display); font-weight: 420; font-variation-settings: "opsz" 72; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; letter-spacing: -0.012em; }
.p-masterclasses .mc-next .mp-link { margin-top: 12px; }
@media (min-width: 900px) {
  .p-masterclasses .mc-topics { grid-template-columns: repeat(4, 1fr); }
  .p-masterclasses .mc-topic { padding: 44px 32px 8px; border-bottom: 0; border-left: 1px solid var(--hair); }
  .p-masterclasses .mc-topic:first-child { padding-left: 0; border-left: 0; }
  .p-masterclasses .mc-topic:last-child { padding-right: 0; }
}
@media (max-width: 599px) { /* mobile typography */
  .p-masterclasses .mc-method { text-align: center; padding-left: 0.2em; }
  .p-masterclasses .mc-audience { padding-left: 0.2em; }
  .p-masterclasses .mc-close { text-wrap: balance; }
  .p-masterclasses .mc-next { max-width: 34ch; margin-inline: auto; }
}

/* ---- Books: the book title is the page title, set at scene-header scale */
.p-books .mp-title { font-weight: 540; font-size: clamp(38px, 4.5vw, 64px); line-height: 1.05; letter-spacing: -0.016em; font-variation-settings: "opsz" 120; max-width: 15ch; }

/* ---- Let's Talk: channels, the enquiry form, the newsletter (both forms are markup only) */
.p-contact .contact { padding-top: 0; }
.p-contact .ct-grid { display: grid; grid-template-columns: 1fr; gap: 64px; }
.p-contact .ct-enquiry h2 { max-width: 16ch; }
.p-contact .ct-form { display: grid; gap: 32px; max-width: 560px; }
.p-contact .ct-field .label { display: block; color: var(--meta-on-light); }
.p-contact .ct-field input {
  display: block; width: 100%; min-height: 48px; margin-top: 6px; padding: 8px 0;
  background: transparent; color: var(--ink); font: inherit; font-size: 18px;
  border: 0; border-bottom: 1px solid var(--meta-on-light); border-radius: 0;
}
.p-contact .ct-field textarea {
  display: block; width: 100%; min-height: 148px; margin-top: 6px; padding: 8px 0; resize: vertical;
  background: transparent; color: var(--ink); font: inherit; font-size: 18px; line-height: 1.6;
  border: 0; border-bottom: 1px solid var(--meta-on-light); border-radius: 0;
}
.p-contact .ct-news-form input::placeholder { color: var(--meta-on-light); opacity: 1; }
.p-contact .ct-submit {
  justify-self: start; display: inline-flex; align-items: center; min-height: 48px; padding: 0 28px;
  border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer;
  transition: background-color .3s ease, color .3s ease;
}
.p-contact .ct-submit:hover { background: var(--ink); color: var(--ivory); }
.p-contact .ct-news-form { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 14px; max-width: 460px; }
.p-contact .ct-news-form .label { flex-basis: 100%; color: var(--meta-on-light); }
.p-contact .ct-news-form input {
  flex: 1 1 220px; min-height: 48px; padding: 8px 0;
  background: transparent; color: var(--ink); font: inherit; font-size: 18px;
  border: 0; border-bottom: 1px solid var(--meta-on-light); border-radius: 0;
}
@media (min-width: 900px) {
  .p-contact .ct-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(64px, 9vw, 144px); align-items: start; }
}
@media (max-width: 599px) { /* mobile typography */
  .p-contact .ct-news-form { justify-content: center; margin-inline: auto; }
  .p-contact .ct-news-form .label { text-align: center; padding-left: 0.2em; }
  .p-contact .ct-news-form input { text-align: center; }
}

/* ---- 404: the page head, standing alone */
.p-404 .mp-head > .wrap { min-height: 56vh; }