@import url("./tokens.css");

/* Layers keep specificity flat and the cascade legible.
   Split this file only past ~800 lines. */
@layer base, layout, components, motion, utilities;

/* ============================================================ base ========= */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

  body {
    margin: 0;
    font-family: var(--font-body);
    line-height: 1.55;
    color: var(--text);
    background: var(--bg-page);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  h1, h2, h3 {
    font-family: var(--font-head);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-wrap: balance;
    margin: 0;
  }

  p { text-wrap: pretty; margin: 0; }

  img { max-width: 100%; height: auto; display: block; }

  a { color: var(--eyebrow); text-decoration: none; }
  a:hover { color: var(--link-hover); }

  :focus-visible {
    outline: 2px solid var(--coral);
    outline-offset: 3px;
    border-radius: 4px;
  }

  .skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--ink);
    color: var(--text-on-dark);
    border-radius: 0 0 8px 0;
  }
  .skip:focus { left: 0; color: var(--text-on-dark); }
}

/* ========================================================== layout ========= */
@layer layout {
  .wrap {
    max-width: var(--measure);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .section { padding-block: clamp(3.5rem, 2rem + 6vw, 6.5rem); }
  .section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

  /* Full-bleed escape from .wrap, for the dark night water panels. */
  .bleed {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }
}

/* ====================================================== components ========= */
@layer components {

  /* ---- signature rule (brand doc s5.3) ---- */
  .rule {
    width: 130px;
    height: 4px;
    border-radius: 4px;
    background: var(--redshift);
    margin-block: 1.9rem 1.6rem;
  }
  .rule--sm { width: 56px; height: 3px; margin-block: 0 1.1rem; }

  /* A faint coral hairline, so content "sits on the water" (brand doc s5.4). */
  .hairline {
    height: 1px;
    border: 0;
    margin: 0;
    background: linear-gradient(90deg,
      rgb(var(--coral-rgb) / 0%), var(--coral) 45%, rgb(var(--coral-rgb) / 0%));
  }

  /* The one coral word inside a headline (brand doc s4, Type patterns).
     Solid coral on purpose: gradient-filled text reads as decoration and the
     brand doc asks for one key word coloured, not a gradient. */
  .hl { color: var(--coral); }

  /* ---- eyebrows ---- */
  .eyebrow {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--eyebrow);
    margin-bottom: 1.35rem;
  }
  .callout .eyebrow { color: var(--eyebrow-on-dark); }

  /* The hero's eyebrow is a gold pill, not a coral label. */
  .eyebrow-pill {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text);
    background: var(--gold);
    border-radius: 999px;
    padding: 0.45rem 1rem;
    margin-bottom: 1.6rem;
    box-shadow: 0 4px 14px rgb(var(--gold-rgb) / 28%);
  }

  .badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 0.375rem 0.95rem;
  }
  .badge--gold    { background: var(--gold); color: var(--text); }
  /* Ink on coral, not white: white measured 3.22:1 against #F85858 at 12px.
     Ink is 5.36:1 and keeps the coral fill the brand doc asks for. */
  .badge--coral   { background: var(--coral); color: var(--text); }
  .badge--outline {
    color: var(--gold);
    border: 1px solid rgb(var(--gold-rgb) / 40%);
    letter-spacing: 0.14em;
  }

  /* ---- buttons ----
     The night water button is built in three layers so hover can animate the
     interior rather than only the frame:
       element background .... the ink gradient
       ::before .............. the starfield  (rotates on hover)
       ::after ............... the coral aura (blooms on hover)
     Both pseudos use z-index:-1 inside an isolated stacking context, which paints
     them above the element's own background but below the label. */
  .btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* inline-flex, not inline-block: in a flex row the default `stretch` makes a
       shorter button grow to a taller sibling and its label stops being centred. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--text-on-dark);
    padding: 1.05rem 2.1rem;
    border-radius: 12px;
    border: 0;
    cursor: pointer;
    background-image: var(--night-water);
    box-shadow: var(--shadow-btn);
    transition: transform .18s ease, box-shadow .18s ease;
  }

  .btn::before {
    content: "";
    position: absolute;
    /* Oversized so a rotation never exposes a corner. Keeping background-size
       fixed means apparent star density is identical to the un-rotated rest. */
    inset: -60%;
    z-index: -1;
    background-image: var(--stars);
    background-size: 61px 33px, 43px 47px;
    background-position: 11px 7px, 28px 15px;
    animation: btn-wheel 26s linear infinite;
    animation-play-state: paused;
  }

  .btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--btn-aura);
    transition: background .45s ease;
  }

  /* The night-water button is for cream. Inside a dark callout it has almost no
     contrast against its own background, so it becomes a coral fill, which is
     what every artboard does in that position. */
  .callout .btn,
  .tier--featured .btn {
    background-image: none;
    background-color: var(--coral);
    color: var(--text);
    box-shadow: 0 12px 30px rgb(var(--coral-rgb) / 30%);
  }
  .callout .btn::before,
  .tier--featured .btn::before { content: none; }
  .callout .btn::after,
  .tier--featured .btn::after { content: none; }
  .callout .btn:hover, .callout .btn:focus-visible,
  .tier--featured .btn:hover, .tier--featured .btn:focus-visible {
    color: var(--text);
    background-color: var(--coral-bright);
    box-shadow: 0 16px 38px rgb(var(--coral-rgb) / 42%), 0 0 0 1px rgb(255 255 255 / 25%);
  }

  .btn:hover, .btn:focus-visible {
    color: var(--text-on-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-btn), 0 0 0 1px rgb(var(--coral-rgb) / 35%);
  }
  /* The aura blooms inward and warms. This is the part that reads as "live". */
  .btn:hover::after, .btn:focus-visible::after { background: var(--btn-aura-hot); }
  .btn:active { transform: translateY(0); }

  @keyframes btn-wheel { to { transform: rotate(360deg); } }

  .btn--sm {
    font-size: 0.9375rem;
    padding: 0.8rem 1.5rem;
    box-shadow: var(--shadow-btn-sm);
  }
  .btn--sm::before { background-size: 53px 29px, 37px 41px; background-position: 9px 5px, 22px 12px; }
  .btn--sm:hover, .btn--sm:focus-visible {
    box-shadow: var(--shadow-btn-sm), 0 0 0 1px rgb(var(--coral-rgb) / 35%);
  }

  /* Quiet secondary action. Text only, per the artboards. */
  .btn-text {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-2);
    transition: color .18s ease;
  }
  .btn-text:hover { color: var(--text); }

  /* ---- header ---- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgb(var(--cream-rgb) / 82%);
    backdrop-filter: blur(10px);
    transition: box-shadow .25s ease, background .25s ease;
  }
  .site-header.is-stuck {
    background: rgb(var(--cream-rgb) / 94%);
    box-shadow: 0 1px 0 rgb(var(--text-rgb) / 8%), 0 12px 30px -24px rgb(var(--text-rgb) / 50%);
  }
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-block: 1.35rem;
  }
  .site-header__logo img { height: 44px; width: auto; }

  .nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 0.3rem + 1.7vw, 2.125rem);
    font-size: 0.9375rem;
    font-weight: 500;
  }
  .nav a {
    color: var(--text-2);
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
    transition: color .18s ease, border-color .18s ease;
  }
  .nav a:hover { color: var(--text); }
  .nav a[aria-current="page"] {
    color: var(--text);
    border-bottom-color: var(--coral);
  }

  /* The header CTA has two homes: the bar on desktop, inside the opened menu on
     mobile. Exactly one is ever visible. */
  .nav__cta { display: none; }

  .nav-toggle {
    display: none;
    background: none;
    border: 1px solid rgb(var(--text-rgb) / 15%);
    border-radius: 10px;
    padding: 0.5rem;
    color: var(--text);
    cursor: pointer;
  }

  /* ---- hero ---- */
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 700px) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
    /* Bottom padding matters: without it the CTA collides with the hairline
       divider that closes the hero. */
    padding-block: clamp(2rem, 1rem + 4vw, 3.5rem) clamp(2.5rem, 1.5rem + 3vw, 4rem);
  }
  .hero h1 { font-size: var(--step-hero); line-height: 1.02; letter-spacing: -0.025em; }
  .hero__lede {
    font-size: var(--step-lede);
    line-height: 1.55;
    color: var(--text-2);
    max-width: 30rem;
    margin-bottom: 2.25rem;
  }
  .hero__actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
  .hero__art { position: relative; display: flex; justify-content: flex-end; }
  /* Soft coral glow behind the creature. */
  .hero__art::before {
    content: "";
    position: absolute;
    inset: 6% -2.5rem auto auto;
    width: 78%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgb(var(--coral-rgb) / 16%), rgb(var(--coral-rgb) / 0%) 68%);
  }
  /* width:100% is load bearing. Without it the intrinsic image width becomes the
     grid track's automatic minimum, the track grows past the viewport, and every
     section on the page gets clipped on narrow screens. */
  .hero__art picture, .hero__art img { position: relative; width: 100%; max-width: 520px; }

  /* ---- section heads ---- */
  .section-head { margin-bottom: 1.5rem; }
  .section-head h2 { font-size: var(--step-h2); }
  .section-head--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
  }
  .section-head__aside {
    font-size: 1rem;
    color: var(--text-2);
    max-width: 24rem;
    padding-bottom: 0.25rem;
  }

  /* Lighter header for secondary sections. No rule, by design. */
  .subhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 2.25rem;
  }
  .subhead h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); letter-spacing: -0.024em; }
  .subhead__aside { font-size: 0.9375rem; color: var(--text-muted); }

  /* ---- gradient-border cards (the noise / the signal) ---- */
  .card-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 2rem;
    align-items: stretch;
  }
  .card {
    padding: 2px;
    border-radius: 20px;
    display: flex;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
  .card__inner {
    flex: 1;
    border-radius: 18px;
    padding: 1.9rem 2rem 2rem;
  }
  .card p { font-size: 1.1875rem; line-height: 1.55; }

  .card--noise { background: linear-gradient(120deg, var(--gold), var(--gold-light)); }
  .card--noise .card__inner {
    background:
      linear-gradient(160deg, rgb(var(--gold-rgb) / 10%) 0%, rgb(var(--gold-rgb) / 4%) 100%),
      linear-gradient(160deg, var(--cream-a) 0%, var(--cream-b) 100%);
  }
  .card--noise p { color: var(--text-2); }

  .card--signal { background: linear-gradient(120deg, var(--rose-deep), var(--coral)); }
  .card--signal .card__inner {
    background:
      linear-gradient(160deg, rgb(var(--coral-rgb) / 9%) 0%, rgb(var(--coral-rgb) / 3.5%) 100%),
      linear-gradient(160deg, var(--cream-a) 0%, var(--cream-b) 100%);
  }
  .card--signal p { color: var(--text); font-weight: 500; }

  .card__label { margin-bottom: 1.1rem; }

  /* ---- night water callout (brand doc s6). Ink is CALLOUT ONLY, never a
         section background. The edge mask makes it surface rather than sit. ---- */
  .callout {
    position: relative;
    color: var(--text-on-dark);
    background: var(--bg-callout);
    overflow: hidden;
  }
  .callout--panel { border-radius: var(--radius); padding: clamp(1.75rem, 1rem + 3vw, 2.5rem); }
  .callout--bleed {
    padding-block: clamp(4rem, 2rem + 7vw, 9.375rem);
    --edge: clamp(2rem, 1rem + 4vw, 8.75rem);
    mask-image: linear-gradient(180deg,
      transparent 0, rgba(0,0,0,.68) calc(var(--edge) * .66), #000 var(--edge),
      #000 calc(100% - var(--edge)), rgba(0,0,0,.68) calc(100% - var(--edge) * .66), transparent 100%);
  }
  .callout h2, .callout h3 { color: var(--text-on-dark); }
  .callout p { color: var(--text-2-on-dark); }
  /* Components that set their own light-surface text colour need re-pointing
     when they are nested in a callout, or they render dark on dark. */
  .callout .reason p,
  .callout .reason h3,
  .callout .person--role p { color: var(--text-2-on-dark); }
  .callout .reason h3 { color: var(--text-on-dark); }

  /* Starfield, drawn with gradients so it costs no DOM (brand doc s5.2). */
  .starfield {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      radial-gradient(circle, rgba(255,255,255,.75) 1px, transparent 1.3px),
      radial-gradient(circle, rgba(255,255,255,.5)  1px, transparent 1.2px),
      radial-gradient(circle, rgba(255,255,255,.35) 1px, transparent 1.2px);
    background-size: 143px 121px, 97px 89px, 71px 167px;
    background-position: 12px 18px, 60px 8px, 110px 40px;
    opacity: .5;
    mask-image: radial-gradient(120% 95% at 88% 2%,
      rgba(0,0,0,.95) 0%, rgba(0,0,0,.5) 42%, rgba(0,0,0,.08) 72%, transparent 92%);
  }

  .callout__head {
    position: relative;
    margin-bottom: 3.25rem;
    padding-bottom: 2.75rem;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  /* Variant for a head sitting directly above a list that draws its own
     separators. Without it the head's rule and the list's first rule stack up. */
  .callout__head--plain { border-bottom: 0; padding-bottom: 0.75rem; }

  .callout__head h2 { font-size: clamp(1.85rem, 1.2rem + 2.6vw, 2.75rem); }
  .callout__head p { font-size: 1.1875rem; line-height: 1.62; }

  /* ---- owner legend (Practice) ---- */
  .owner {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.9375rem;
    color: var(--text-2-on-dark);
  }
  .owner i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
  .owner--coral i { background: var(--coral); }
  .owner--gold  i { background: var(--gold); }
  .owner--ink   i { background: var(--text-2-on-dark); }

  /* ---- the loop ---- */
  .loop-meta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 2.375rem;
  }
  .loop-meta__lead { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
  .loop-meta__note { font-size: 0.9375rem; color: var(--text-2-on-dark); }
  .loop-meta__aside {
    font-family: var(--font-head);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-muted-on-dark);
  }

  .loop {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .loop__step { padding-inline: 1.875rem; border-right: 1px solid rgba(255,255,255,.12); }
  .loop__step:first-child { padding-left: 0; }
  .loop__step:last-child  { padding-right: 0; border-right: 0; }
  .loop__num {
    font-family: var(--font-head);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--gold);
    margin-bottom: 0.625rem;
  }
  .loop__step h3 { font-size: var(--step-h3); letter-spacing: -0.017em; margin-bottom: 0.75rem; }
  .loop__step p { font-size: 0.9375rem; line-height: 1.55; }

  .loop-foot {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,.12);
    font-size: 0.9375rem;
    color: var(--text-2-on-dark);
  }
  .loop-foot__label {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--gold);
  }

  /* ---- numbered reasons ---- */
  .reasons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 2.5rem;
  }
  .reason__num {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--gold-tint);
    border: 1px solid rgb(var(--gold-rgb) / 35%);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--gold-deep);
    margin-bottom: 1.25rem;
  }
  .reason h3 { font-size: var(--step-h3); margin-bottom: 0.7rem; }
  .reason p { color: var(--text-2); }

  /* Four-item variant: exactly two columns. auto-fit resolved to three at this
     container width, which left a ragged 3 + 1. */
  .reasons--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; }
  @media (width < 640px) { .reasons--pairs { grid-template-columns: minmax(0, 1fr); } }

  /* ---- "where to next" cards ---- */
  .next-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1.75rem;
  }
  .next-card {
    display: block;
    color: inherit;
    border-radius: 18px;
    border: 1px solid rgb(var(--text-rgb) / 10%);
    background: linear-gradient(160deg, rgba(255,255,255,.6), rgba(255,255,255,.25));
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .next-card:hover {
    color: inherit;
    transform: translateY(-4px);
    border-color: rgb(var(--coral-rgb) / 35%);
    box-shadow: var(--shadow-card);
  }
  .next-card__top { height: 4px; background: var(--redshift); }
  .next-card__body { padding: 1.75rem 1.75rem 1.9rem; }
  .next-card__kicker {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.9rem;
  }
  .next-card h3 { font-size: var(--step-h3); margin-bottom: 0.7rem; }
  .next-card p { color: var(--text-2); margin-bottom: 1.25rem; }
  .next-card__go {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--eyebrow);
  }
  .next-card__go::after { content: " \2192"; transition: none; }
  .next-card:hover .next-card__go { color: var(--link-hover); }

  /* ---- closing CTA band ---- */
  .cta-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    flex-wrap: wrap;
    border-radius: 20px;
    padding: clamp(2rem, 1.2rem + 3.5vw, 3.25rem);
  }
  .cta-band__copy { position: relative; max-width: 40rem; }
  .cta-band h2 { font-size: clamp(1.6rem, 1.1rem + 2.1vw, 2.35rem); margin-bottom: 1rem; }
  .cta-band p { font-size: 1.0625rem; }
  .cta-band__actions {
    position: relative; display: flex; flex-wrap: wrap;
    align-items: center; gap: 1rem 1.5rem; flex: none;
  }
  .cta-band .btn { position: relative; flex: none; }
  .cta-band__alt {
    color: var(--cream-a); font-weight: 500; font-size: 0.9375rem;
    text-decoration: underline; text-underline-offset: 4px;
    text-decoration-color: rgb(var(--coral-rgb) / 60%);
  }
  .cta-band__alt:hover, .cta-band__alt:focus-visible {
    text-decoration-color: rgb(var(--coral-rgb) / 100%);
  }

  /* ---- interior page hero ---- */
  .page-hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem) 0; }
  .page-hero h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.5rem); }
  .page-hero__lede {
    font-size: var(--step-lede);
    line-height: 1.55;
    color: var(--text-2);
    max-width: 46rem;
  }

  /* ---- accordion. Native <details>; no JS anywhere in this component. ---- */
  .accordion { border-top: 1px solid rgb(var(--text-rgb) / 12%); }
  .accordion__item { border-bottom: 1px solid rgb(var(--text-rgb) / 12%); }
  .accordion__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.35rem 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
    color: var(--text);
    transition: color .18s ease;
  }
  .accordion__item summary::-webkit-details-marker { display: none; }
  .accordion__item summary:hover { color: var(--eyebrow); }

  /* Plus that becomes a minus. Rotation only, so it composites. */
  .accordion__marker {
    position: relative;
    flex: none;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid rgb(var(--coral-rgb) / 35%);
    transition: transform .28s ease, background .28s ease;
  }
  .accordion__marker::before,
  .accordion__marker::after {
    content: "";
    position: absolute;
    inset: 50% 7px auto;
    height: 1.5px;
    background: var(--coral);
    transform: translateY(-50%);
  }
  .accordion__marker::after { transform: translateY(-50%) rotate(90deg); transition: opacity .28s ease; }
  .accordion__item[open] .accordion__marker { transform: rotate(180deg); background: rgb(var(--coral-rgb) / 10%); }
  .accordion__item[open] .accordion__marker::after { opacity: 0; }

  .accordion__body { padding-bottom: 1.6rem; max-width: 52rem; }
  .accordion__body p { color: var(--text-2); font-size: 1.0625rem; }

  .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }
  .chip {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gold-deep);
    background: var(--gold-tint);
    border: 1px solid rgb(var(--gold-rgb) / 35%);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
  }

  /* ---- ticked lists ---- */
  .ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
  .ticks li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--text-2); }
  .ticks svg { flex: none; width: 17px; height: 17px; margin-top: 0.22rem; color: var(--coral); }
  .callout .ticks li { color: var(--text-2-on-dark); }

  /* ---- phase ladder (Engagements) ---- */
  .phases { display: grid; gap: 0; counter-reset: phase; }
  .phase {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 1.5rem;
    padding: 1.6rem 0;
    border-top: 1px solid rgb(var(--text-rgb) / 12%);
  }
  .phase:last-child { border-bottom: 1px solid rgb(var(--text-rgb) / 12%); }
  .phase__num {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.2em;
    color: var(--eyebrow);
    padding-top: 0.2rem;
  }
  .phase h3 { font-size: var(--step-h3); margin-bottom: 0.4rem; }
  .phase p { color: var(--text-2); }

  /* The "always" note under the phase ladder. */
  .always {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
    padding: 1.4rem 1.6rem;
    border-radius: 16px;
    background: linear-gradient(160deg, rgb(var(--gold-rgb) / 10%), rgb(var(--gold-rgb) / 4%));
    border: 1px solid rgb(var(--gold-rgb) / 30%);
  }
  .always p { color: var(--text-2); flex: 1 1 20rem; }

  /* .phases inside a dark callout: light rules and on-dark text.
     The list drops its outer borders here. The callout head already draws a rule
     below itself and the foot draws one above, so keeping first-child top and
     last-child bottom produced a doubled line at both ends. Inside a callout the
     list contributes separators between items only. */
  .callout .phase { border-top-color: rgb(255 255 255 / 12%); }
  .callout .phase:first-child { border-top: 0; }
  .callout .phase:last-child { border-bottom: 0; }
  .callout .phase__num { color: var(--eyebrow-on-dark); }
  .callout .phase h3 { color: var(--text-on-dark); }
  .callout .phase p { color: var(--text-2-on-dark); }

  /* ---- engagement tiers ---- */
  .tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1.75rem;
    align-items: stretch;
  }
  .tier {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    height: 100%;
    border-radius: 20px;
    border: 1px solid rgb(var(--text-rgb) / 12%);
    background: linear-gradient(160deg, rgb(255 255 255 / 55%), rgb(255 255 255 / 20%));
    padding: 1.9rem;
  }
  .tier h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.6rem); }
  .tier > p { color: var(--text-2); }
  .tier__head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
  .tier__inherits {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--text-muted);
  }
  .tier .btn, .tier .btn-outline { margin-top: auto; text-align: center; }

  /* The featured tier is the night water card, which is how the artboard marks
     it. Ink is still a callout here, not a section background. */
  .tier--featured {
    position: relative;
    overflow: hidden;
    border-color: transparent;
    color: var(--text-on-dark);
    background: var(--bg-callout);
  }
  .tier--featured h3 { color: var(--text-on-dark); }
  .tier--featured > p { color: var(--text-2-on-dark); }
  .tier--featured .tier__inherits { color: var(--gold); }
  .tier--featured .ticks li { color: var(--text-2-on-dark); }
  .tier--featured > * { position: relative; }

  .btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--eyebrow);
    border: 2px solid rgb(var(--coral-rgb) / 55%);
    border-radius: 12px;
    padding: 0.8rem 1.5rem;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
  }
  .btn-outline:hover {
    color: var(--link-hover);
    border-color: var(--coral);
    background: rgb(var(--coral-rgb) / 8%);
  }
  .tier--featured .btn-outline { color: var(--salmon); border-color: rgb(var(--coral-rgb) / 60%); }
  .tier--featured .btn-outline:hover { color: #fff; background: rgb(var(--coral-rgb) / 18%); }

  /* Secondary action inside a dark callout. No border: a coral-outlined box on
     dark reads as a danger state, and the artboards use a plain link here. */
  .btn-text--light {
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 600;
    color: var(--salmon);
    transition: color .18s ease;
  }
  .btn-text--light:hover { color: #fff; }

  /* Action rows: centre, never stretch. */
  .actions { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }

  /* ---- people ---- */
  .roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 0 4.5rem; }
  .person {
    display: flex;
    align-items: center;
    gap: 1.35rem;
    padding: 1.5rem 0;
    border-top: 1px solid rgb(var(--text-rgb) / 12%);
  }
  .person h3 { font-size: 1.375rem; margin-bottom: 0.2rem; }
  .person__role { color: var(--text-2); font-size: 0.96875rem; }
  /* Deliberate placeholder, per PRODUCT.md: no headshots exist and stock
     photography is explicitly not a substitute. */
  .person__photo {
    flex: none;
    display: grid;
    place-items: end center;
    width: 78px; height: 78px;
    padding-bottom: 0.5rem;
    border-radius: 50%;
    border: 1px solid rgb(var(--text-rgb) / 10%);
    background-image: repeating-linear-gradient(135deg,
      rgb(var(--text-rgb) / 5%) 0 7px, rgb(var(--text-rgb) / 0%) 7px 14px);
  }
  .person__photo span {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 9px;
    color: var(--text-muted);
  }
  .person__photo--yours { border-color: rgb(var(--coral-rgb) / 40%); }

  .team { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 2rem; }
  .person--role { display: block; border-top: 0; padding: 0; }
  .person--role .person__photo { margin-bottom: 1.1rem; }
  .person--role h3 { font-size: var(--step-h3); margin-bottom: 0.5rem; }
  .person--role p { color: var(--text-2); font-size: 0.9375rem; }

  /* ---- About story columns ---- */
  .story { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 2.5rem; }
  .story__col h2 {
    font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem);
    margin-bottom: 1.25rem;
    padding-bottom: 0.9rem;
    border-bottom: 2px solid transparent;
    border-image: var(--redshift) 1;
    border-image-slice: 0 0 1 0;
  }

  /* ---- About "where we are" callout ---- */
  .where {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 3rem;
  }
  .where__copy, .where__details { position: relative; }
  .where h2 { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.125rem); }

  /* ---- beliefs (About) ---- */
  .beliefs { display: grid; gap: 1.1rem; max-width: 52rem; }
  .beliefs p { font-size: 1.125rem; color: var(--text-2); }
  .beliefs b { font-family: var(--font-head); color: var(--text); font-weight: 700; }

  /* ---- white papers ---- */
  .paper-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 2.5rem;
    align-items: center;
  }
  .paper-cover {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    min-height: 20rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .paper-cover__label {
    font-size: 0.71875rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--eyebrow-on-dark);
    margin-bottom: 1.25rem;
  }
  .paper-cover__title {
    /* The art sits bottom-right inside this card; without a cap the last word
       of a long title runs under it. */
    max-width: 82%;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.125rem);
    line-height: 1.12;
    letter-spacing: -0.026em;
    color: var(--text-on-dark);
    text-wrap: balance;
  }
  .paper-cover__art {
    position: absolute;
    /* Fully inside the card. The card clips overflow, so any negative inset here
       cuts the plesiosaur's snout, which sits at the right edge of the artwork. */
    right: 0.75rem; bottom: 1rem;
    width: 56%;
    max-width: 20rem;
    opacity: 0.92;
    pointer-events: none;
  }
  .paper-meta { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 1rem; }
  .paper-note { font-size: 0.875rem; color: var(--text-muted); }

  .papers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.75rem; }
  .paper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-radius: 18px;
    border: 1px solid rgb(var(--text-rgb) / 10%);
    background: linear-gradient(160deg, rgb(255 255 255 / 55%), rgb(255 255 255 / 20%));
    padding: 1.5rem;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .paper:hover { transform: translateY(-4px); border-color: rgb(var(--coral-rgb) / 35%); box-shadow: var(--shadow-card); }
  .paper__cover {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 4 / 3;
    background: var(--bg-callout);
    display: grid;
    place-items: center;
  }
  .paper__cover .rule { margin: 0; width: 64px; height: 3px; }
  .paper h3 { font-size: 1.125rem; }
  .paper p { color: var(--text-2); font-size: 0.9375rem; }
  .paper .btn-outline { margin-top: auto; text-align: center; }

  /* Shown in place of a Download button while a paper's PDF is not yet in the
     repo. Deliberately quiet: it is a state, not a call to action. */
  .paper-soon {
    margin-top: auto;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    border: 1px dashed rgb(var(--text-rgb) / 20%);
    border-radius: 12px;
    padding: 0.8rem 1.5rem;
  }

  /* ---- contact ---- */
  .contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
  }
  .steps { display: grid; gap: 1.5rem; counter-reset: step; }
  .step { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; }
  .step__num {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--gold-tint);
    border: 1px solid rgb(var(--gold-rgb) / 35%);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--gold-deep);
  }
  .step h3 { font-size: 1.125rem; margin-bottom: 0.25rem; }
  .step p { color: var(--text-2); font-size: 0.9375rem; }
  .contact-details { display: grid; gap: 0.65rem; }
  .contact-details a { font-weight: 600; }

  /* ---- prose (privacy) ---- */
  .prose { max-width: 44rem; }
  .prose h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.6rem); margin: 2.25rem 0 0.75rem; }
  .prose p, .prose li { color: var(--text-2); margin-bottom: 0.9rem; }
  .prose ul { padding-left: 1.2rem; }

  /* ---- footer ---- */
  .site-footer {
    border-top: 1px solid rgb(var(--text-rgb) / 10%);
    margin-top: clamp(3rem, 2rem + 4vw, 5rem);
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem) 1.75rem;
    font-size: 0.9375rem;
  }
  .site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
  }
  .site-footer__logo img { height: 40px; width: auto; margin-bottom: 1.1rem; }
  .site-footer p { color: var(--text-2); max-width: 24rem; }
  .site-footer__label {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1rem;
  }
  .site-footer__links { display: grid; gap: 0.6rem; justify-items: start; }
  .site-footer__links a, .site-footer__links span { color: var(--text-2); }
  .site-footer__links a:hover { color: var(--link-hover); }
  .site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgb(var(--text-rgb) / 10%);
    color: var(--text-muted);
    font-size: 0.875rem;
  }
}

/* ====================================================== responsive ========= */
@media (width < 900px) {
  /* minmax(0, 1fr), not 1fr: the default automatic minimum is min-content, which
     lets wide children push the track past the viewport. */
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero__art { justify-content: center; order: -1; }
  .hero__art::before { inset-inline: auto; width: 60%; }
  .hero__art picture, .hero__art img { max-width: 340px; }
  .nav, .site-header__cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header__inner:has(.nav[data-open]) { flex-wrap: wrap; }
  .nav[data-open] {
    display: grid;
    justify-items: start;
    gap: 0.9rem;
    flex-basis: 100%;
    padding-block: 1rem 0.5rem;
  }
  .nav[data-open] .nav__cta { display: inline-block; margin-top: 0.4rem; }
  .loop { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 0; }
  .loop__step:nth-child(2n) { border-right: 0; padding-right: 0; }
  .loop__step:nth-child(2n+1) { padding-left: 0; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__logo { grid-column: 1 / -1; }
}

@media (width < 760px) {
  .paper-hero, .contact-grid, .where { grid-template-columns: minmax(0, 1fr); }
  .roster { gap: 0; }
}

@media (width < 560px) {
  .loop { grid-template-columns: 1fr; }
  .loop__step {
    padding: 0 0 1.5rem;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .loop__step:last-child { border-bottom: 0; padding-bottom: 0; }
  .site-footer__grid { grid-template-columns: 1fr; }
}

/* ========================================================== motion ========= */
/* Everything here is opt-out by default. The brand doc's budget is
   "subtle only, never distracting", so nothing moves more than a few pixels. */
@layer motion {
  @media (prefers-reduced-motion: no-preference) {

    /* 1a. Scroll reveal for a single block. */
    .js .reveal {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .8s ease, transform .8s ease;
    }
    .reveal.is-in { opacity: 1; transform: none; }

    /* 1b. Staggered reveal for grids. The CHILDREN animate, not the container,
           which is the whole point: cards resolve in sequence rather than as one
           block. --i is set per child in site.js (or inline, for the loop). */
    .js .stagger > * {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .8s ease, transform .8s ease;
      transition-delay: calc(var(--i, 0) * 70ms);
    }
    .stagger.is-in > * { opacity: 1; transform: none; }

    /* 2. The signature rule draws itself in. Highest value effect on the site:
          it turns the brand mark from decoration into something authored.
          scaleX rather than width, so it runs on the compositor and never
          triggers layout. Works for both rule widths without restating them. */
    .js .reveal .rule, .js .rule.reveal {
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform .7s cubic-bezier(.2,.7,.3,1) .15s;
    }
    .reveal.is-in .rule, .rule.reveal.is-in { transform: scaleX(1); }

    /* 3. Gentle wave drift on the creature (brand doc s7, Motion). */
    .hero__art img { animation: drift 12s ease-in-out infinite; }
    @keyframes drift {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-12px); }
    }

    /* 3b. The CTA's starfield wheels slowly while hovered or focused, so the
           interior of the button moves rather than only its frame. It resumes
           from wherever it paused, so leaving the button never snaps. Under
           reduced motion the animation simply stays paused and the aura bloom
           carries the whole affordance. */
    .btn:hover::before,
    .btn:focus-visible::before { animation-play-state: running; }

    /* 4. Starfield twinkle. One keyframe on the layer, not per star, so it
          costs nothing and never triggers layout. */
    .starfield { animation: twinkle 9s ease-in-out infinite; }
    @keyframes twinkle {
      0%, 100% { opacity: .38; }
      50%      { opacity: .58; }
    }
  }
}

/* ======================================================= utilities ========= */
@layer utilities {
  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}