:root {
    --cream: #f6f0ea; --sand: #e8d9cb; --tan: #ba9c7a; --gold: #ba8b50; --gold-dk: #8f6a3a;
    --olive: #474619; --forest: #32331a; --ink: #2b2a1f; --muted: #6b6656; --line: #ddd0c2; --white: #fffdfa;
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--cream); color: var(--ink); font: 400 17px/1.65 Jost, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
  img { max-width: 100%; display: block; }
  a { color: inherit; }
  h1, h2, h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; line-height: 1.08; margin: 0; color: var(--forest); text-wrap: balance; }
  h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
  h2 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); }
  h3 { font-size: 1.6rem; }
  p { margin: .9rem 0 0; }
  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
  .eyebrow { font: 500 .78rem/1 Jost, sans-serif; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
  .lead { font-size: 1.15rem; color: var(--muted); max-width: 36rem; }
  .sprig { width: 64px; height: 18px; color: var(--tan); margin: 14px 0 0; }
  section { padding: 84px 0; }
  .btn { display: inline-block; border: 0; border-radius: 999px; background: var(--forest); color: var(--sand); font: 500 .95rem/1 Jost, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 1.05rem 1.7rem; text-decoration: none; cursor: pointer; transition: background .2s, transform .2s; }
  .btn:hover { background: var(--olive); transform: translateY(-1px); }
  .btn.ghost { background: transparent; color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); }
  .btn.gold { background: var(--gold); color: var(--white); }
  .btn.gold:hover { background: var(--gold-dk); }
  :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

  /* Draft plumbing: amber = only Christie can fill this in. Nothing on this page is published. */
  .draft-strip { background: #fdf0d2; color: #6f4b12; text-align: center; font-size: .85rem; font-weight: 500; padding: .55rem 1rem; }
  .draft-note { display: inline-block; border-radius: .55rem; background: #fdf0d2; color: #6f4b12; font-size: .82rem; font-weight: 500; line-height: 1.4; padding: .45rem .7rem; margin-top: .8rem; }
  .tag { position: absolute; bottom: .6rem; right: .6rem; border-radius: .3rem; background: rgba(30,30,20,.55); color: #fff; font-size: 10.5px; letter-spacing: .04em; padding: .15rem .45rem; }

  /* Header */
  header { position: sticky; top: 0; z-index: 20; background: rgba(246,240,234,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
  header .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
  .brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
  .brand img { height: 50px; width: auto; mix-blend-mode: multiply; }
  .brand b { font: 600 1.15rem/1 "Cormorant Garamond", serif; letter-spacing: .14em; text-transform: uppercase; color: var(--forest); }
  .brand small { display: block; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: .3rem; }
  nav a { font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; margin-left: 1.6rem; color: var(--ink); }
  nav a:hover { color: var(--forest); }
  nav .btn { padding: .75rem 1.2rem; color: var(--sand); }
  @media (max-width: 1180px) { nav a { margin-left: 1.1rem; } nav .btn { padding: .7rem 1rem; letter-spacing: .05em; font-size: .85rem; } }
  main { overflow-x: clip; }  /* slide-in photos start 36px off their side; never let that make a sideways scroll */
  .brand b { white-space: nowrap; }
  @media (max-width: 860px) { nav .btn { display: none; } .brand small { display: none; } nav a { margin-left: 1.1rem; } }  /* phones/tablets: the bottom bar carries the CTA */
  @media (max-width: 600px) { header .wrap { height: 58px; } .brand b { display: none; } .brand img { height: 40px; } nav a { font-size: .7rem; letter-spacing: .06em; margin-left: .85rem; } }

  /* Hero */
  .hero { padding: 28px 0 72px; background: radial-gradient(ellipse 60% 70% at 100% 0%, rgba(186,139,80,.18), transparent 70%), var(--cream); }
  .hero .wrap { display: grid; grid-template-columns: 1fr; gap: 40px; }
  .hero .wrap > div:last-child { max-width: 46rem; }
  .hero h1 em { font-style: italic; color: var(--gold-dk); }
  .perks { margin-top: 1rem; font-size: .95rem; color: var(--olive); max-width: 34rem; }
  details.more { border: 0; padding: .4rem 0 0; }
  details.more > summary { font: 500 .85rem/1 Jost, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--forest); justify-content: flex-start; padding: .6rem 0; }
  details.more p { color: var(--ink); }
  .chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; padding: 0; list-style: none; }
  .chips li { border: 1px solid var(--line); background: var(--white); border-radius: 999px; padding: .4rem .9rem; font-size: .82rem; letter-spacing: .06em; color: var(--olive); }
  .cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
  .hero-media { position: relative; border-radius: 50% 50% 18px 18px / 46% 46% 18px 18px; overflow: hidden; aspect-ratio: 21/9; box-shadow: 0 30px 60px -30px rgba(50,51,26,.45); }
  .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 24% 50%; animation: pano 40s ease-in-out infinite alternate; }
  @keyframes pano { from { object-position: 8% 50%; } to { object-position: 46% 50%; } }  /* slow panorama across the lobby rendering and back */
  @keyframes pano-wide { from { object-position: 0% 50%; } to { object-position: 100% 50%; } }  /* the wide banner has less spare width, so it travels the whole of it */
  @media (min-width: 861px) { .hero-media img { animation-name: pano-wide; } }
  @keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.05) translateX(1%); } }
  @media (max-width: 860px) { .hero .wrap { gap: 28px; } .hero-media { aspect-ratio: 4/3; border-radius: 160px 160px 18px 18px; } }

  /* Pain */
  .pain { background: var(--white); border-block: 1px solid var(--line); }
  .pain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
  .quotes { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
  .quotes li { font: italic 500 1.35rem/1.35 "Cormorant Garamond", serif; color: var(--olive); padding: .9rem 1.1rem; border-left: 2px solid var(--tan); background: var(--cream); border-radius: 0 .6rem .6rem 0; }
  @media (max-width: 860px) { .pain-grid { grid-template-columns: 1fr; gap: 28px; } }

  /* Turn */
  .turn { background: var(--forest); color: var(--sand); text-align: center; }
  .turn h2 { color: var(--white); max-width: 46rem; margin: 0 auto; }
  .turn p { max-width: 40rem; margin: 1.2rem auto 0; color: #d9cdb8; font-size: 1.12rem; }
  .turn .sprig { margin: 18px auto 0; }

  /* Chapters (the instrument) */
  .chapters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 2.4rem; }
  .chapter { text-align: left; border: 1px solid var(--line); background: var(--white); border-radius: 18px; padding: 1.4rem 1.2rem; cursor: pointer; font: inherit; color: inherit; transition: border-color .2s, box-shadow .2s, transform .2s; }
  .chapter:hover { transform: translateY(-2px); border-color: var(--tan); }
  .chapter[aria-pressed="true"] { border-color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); background: #fbf7f1; }
  .chapter .n { font: 500 .72rem/1 Jost; letter-spacing: .22em; color: var(--muted); text-transform: uppercase; }
  .chapter h3 { margin-top: .6rem; font-size: 1.45rem; }
  .chapter p { font-size: .92rem; color: var(--muted); margin-top: .5rem; }
  .detail { margin-top: 18px; border-radius: 18px; background: var(--white); border: 1px solid var(--line); padding: 2rem; display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; }
  .detail ul { margin: .8rem 0 0; padding-left: 1.1rem; }
  .detail li { margin: .35rem 0; }
  .detail .side { background: var(--cream); border-radius: 14px; padding: 1.4rem; }
  .fine { font-size: .82rem; color: var(--muted); }
  @media (max-width: 860px) { .chapters { grid-template-columns: 1fr 1fr; } .detail { grid-template-columns: 1fr; padding: 1.4rem; } }
  @media (max-width: 420px) { .chapters { grid-template-columns: 1fr; } }

  /* Zig-zag story rows */
  .row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .row + .row { margin-top: 84px; }
  .row.flip .media { order: 2; }
  .media { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 50px -30px rgba(50,51,26,.5); }
  .media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
  .steps { list-style: none; counter-reset: s; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 1rem; }
  .steps li { counter-increment: s; display: grid; grid-template-columns: 2.4rem 1fr; gap: .8rem; }
  .steps li::before { content: counter(s); width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--tan); color: var(--olive); display: grid; place-items: center; font: 600 1.15rem/1 "Cormorant Garamond", serif; }
  .steps b { display: block; color: var(--forest); }
  .steps span { color: var(--muted); font-size: .95rem; }
  @media (max-width: 860px) { .row { grid-template-columns: 1fr; gap: 28px; } .row.flip .media { order: 0; } }

  /* Services */
  .services { background: var(--white); border-block: 1px solid var(--line); }
  .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 2.4rem; }
  .svc { border: 1px solid var(--line); border-radius: 18px; padding: 1.6rem; background: var(--cream); }
  .svc p { font-size: .95rem; color: var(--muted); }
  .svc.dark { background: var(--forest); border-color: var(--forest); color: var(--sand); }
  .svc.dark h3 { color: var(--white); }
  .svc.dark p { color: #d9cdb8; }
  @media (max-width: 860px) { .svc-grid { grid-template-columns: 1fr; } }
  /* Tile photos bleed to the card's top edge (real photos, true color) */
  .tile-photo { display: block; width: calc(100% + 3.2rem); max-width: none; height: auto; aspect-ratio: 16 / 10; object-fit: cover; margin: -1.6rem -1.6rem 1.1rem; border-radius: 17px 17px 0 0; }
  .post-card .tile-photo { width: calc(100% + 2.8rem); margin: -1.4rem -1.4rem .6rem; border-radius: 15px 15px 0 0; }

  /* Pricing */
  .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 2.4rem; align-items: stretch; }
  .tier { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 20px; padding: 1.8rem 1.6rem; background: var(--white); }
  .tier.best { background: var(--forest); color: var(--sand); border-color: var(--forest); transform: translateY(-10px); box-shadow: 0 30px 60px -30px rgba(50,51,26,.6); }
  .tier.best h3 { color: var(--white); }
  .tier .badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--white); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; padding: .35rem .8rem; border-radius: 999px; white-space: nowrap; }
  .tier ul { list-style: none; padding: 0; margin: 1.1rem 0 1.4rem; display: grid; gap: .5rem; font-size: .93rem; }
  .tier li::before { content: "\2014  "; color: var(--tan); }
  .price { margin-top: auto; font: 600 2.6rem/1 "Cormorant Garamond", serif; color: var(--forest); }
  .tier.best .price { color: var(--white); }
  .price small { font: 400 .9rem Jost; color: var(--muted); }
  .tier.best .price small, .tier.best .fine { color: #cbbfa8; }
  @media (max-width: 860px) { .tiers { grid-template-columns: 1fr; } .tier.best { order: -1; transform: none; } }

  /* About */
  #about .row { align-items: start; }
  .about-photo .frame { max-width: 420px; margin: 0 auto; overflow: hidden; border-radius: 180px 180px 14px 14px; box-shadow: 0 18px 40px rgba(40,50,30,.18); }
  .about-photo img { width: 100%; height: auto; display: block; }
  .from-christie { display: flex; align-items: center; gap: 1rem; margin-top: 1.6rem; }
  .from-christie img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: 52% 22%; box-shadow: 0 0 0 3px var(--cream), 0 0 0 4.5px #b9bec4; }
  .from-christie p { margin: 0; font: italic 500 1.25rem/1.35 "Cormorant Garamond", serif; color: var(--forest); }
  .from-christie span { display: block; font: 400 .8rem Jost, sans-serif; font-style: normal; letter-spacing: .06em; color: var(--muted); margin-top: .25rem; }
  @media (min-width: 861px) { .about-photo { position: sticky; top: 96px; } }
  .creds { color: var(--muted); font-size: .92rem; letter-spacing: .04em; margin: -.4rem 0 1.2rem; }
  .about-copy p { max-width: 40rem; }
  .about-quote { margin: 1.6rem 0 .6rem; padding-left: 1.1rem; border-left: 2px solid var(--tan); font: italic 500 1.55rem/1.35 "Cormorant Garamond", serif; color: var(--forest); }
  .about-close { font: 600 1.3rem/1.4 "Cormorant Garamond", serif; color: var(--forest); }

  /* FAQ */
  details { border-bottom: 1px solid var(--line); padding: 1.1rem 0; }
  summary { cursor: pointer; font: 600 1.35rem/1.3 "Cormorant Garamond", serif; color: var(--forest); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
  summary::after { content: "+"; color: var(--tan); font-size: 1.6rem; line-height: 1; }
  details[open] summary::after { content: "\2013"; }
  details p { color: var(--muted); max-width: 46rem; }

  /* Interest list */
  .join { background: linear-gradient(180deg, var(--sand), var(--cream)); }
  .join-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
  form, .sent { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 2rem; box-shadow: 0 30px 60px -40px rgba(50,51,26,.5); }
  label { display: block; font-size: .85rem; letter-spacing: .04em; color: var(--olive); margin-top: 1rem; }
  input[type=text], input[type=email], input[type=tel], select { width: 100%; margin-top: .35rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 12px; font: inherit; background: var(--cream); color: var(--ink); }
  input:focus, select:focus { outline: 2px solid var(--gold); border-color: transparent; }
  .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
  fieldset { border: 0; padding: 0; margin: 1.2rem 0 0; }
  legend { font-size: .85rem; letter-spacing: .04em; color: var(--olive); }
  .pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
  .pill { position: relative; margin: 0; }
  .pill input { position: absolute; opacity: 0; }
  .pill span { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: .55rem 1rem; font-size: .9rem; color: var(--ink); background: var(--cream); cursor: pointer; transition: all .15s; }
  .pill input:checked + span { background: var(--forest); color: var(--sand); border-color: var(--forest); }
  .pill input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
  .consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .85rem; color: var(--muted); margin-top: 1.2rem; letter-spacing: 0; }
  .consent input { margin-top: .3rem; accent-color: var(--forest); }
  .phi { margin-top: 1rem; font-size: .82rem; color: var(--muted); background: var(--cream); border-radius: 10px; padding: .7rem .9rem; }
  .err { color: #9b2c1f; font-size: .9rem; margin-top: .8rem; }
  .hp { position: absolute; left: -9999px; }
  .draft-box { margin-top: 1.2rem; border: 1px dashed #d4a64a; background: #fdf6e3; border-radius: 12px; padding: 1rem; font-size: .85rem; }
  .draft-box pre { white-space: pre-wrap; margin: .5rem 0 0; font: .82rem/1.5 ui-monospace, Consolas, monospace; color: #5c4514; }
  @media (max-width: 860px) { .join-grid { grid-template-columns: 1fr; gap: 28px; } .two { grid-template-columns: 1fr; } form, .sent { padding: 1.4rem; } }

  /* Footer */
  footer { background: var(--forest); color: #cbbfa8; padding: 56px 0 96px; font-size: .9rem; }
  footer .wrap { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 36px; }
  footer b { color: var(--white); font: 600 1.25rem "Cormorant Garamond", serif; letter-spacing: .12em; text-transform: uppercase; }
  footer .legal { grid-column: 1 / -1; border-top: 1px solid rgba(232,217,203,.18); padding-top: 1.4rem; font-size: .78rem; color: #a99d86; }
  @media (max-width: 860px) { footer .wrap { grid-template-columns: 1fr; } }

  /* Phone sticky CTA */
  .sticky { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; display: none; }
  .sticky .btn { width: 100%; text-align: center; box-shadow: 0 12px 30px -10px rgba(0,0,0,.4); }
  @media (max-width: 860px) { .sticky { display: block; } }
  .sticky { transition: transform .35s ease, opacity .35s ease; }
  .sticky.away { transform: translateY(140%); opacity: 0; pointer-events: none; }

  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s ease; }
  .reveal.in { opacity: 1; transform: none; }
  /* Attention, kept honest: slow motion on real photos only, and only while they're on screen.
     Faces draw the eye first, so the headshot eases in toward her eyes. Images alternate sides and
     slide in from their own side so each section feels new. One accent (silver on the primary button). */
  .frame .zoom { position: relative; transform-origin: 52% 27%; animation: gaze 12s ease-in-out infinite alternate; animation-play-state: paused; }
  .frame.live .zoom { animation-play-state: running; }
  @keyframes gaze { from { transform: scale(1); } to { transform: scale(1.2); } }
  .media img { transform-origin: 30% 50%; animation: drift2 28s ease-in-out infinite alternate; animation-play-state: paused; }
  .row.flip .media img { transform-origin: 70% 50%; }
  .media.live img { animation-play-state: running; }
  @keyframes drift2 { from { transform: scale(1); } to { transform: scale(1.05); } }
  /* Tile photos: a slow pattern across each row (pan right, pan left, ease in), at most 1.05x and 3% of width */
  .tile-frame { display: block; overflow: hidden; aspect-ratio: 16 / 10; margin: -1.6rem -1.6rem 1.1rem; border-radius: 17px 17px 0 0; }
  .post-card .tile-frame { margin: -1.4rem -1.4rem .6rem; border-radius: 15px 15px 0 0; }
  .tile-frame .tile-photo { margin: 0; width: 100%; height: 100%; border-radius: 0; transform: scale(1.05); animation: pan-r 30s ease-in-out infinite alternate; animation-play-state: paused; }
  :nth-child(3n+2) > .tile-frame .tile-photo { animation-name: pan-l; }
  :nth-child(3n) > .tile-frame .tile-photo { animation-name: ease-in; transform: none; }
  .tile-frame.live .tile-photo { animation-play-state: running; }
  .svc:hover .tile-photo, .post-card:hover .tile-photo, .post-card:focus-visible .tile-photo { animation-play-state: paused; }
  @keyframes pan-r { from { transform: scale(1.05) translateX(-1.5%); } to { transform: scale(1.05) translateX(1.5%); } }
  @keyframes pan-l { from { transform: scale(1.05) translateX(1.5%); } to { transform: scale(1.05) translateX(-1.5%); } }
  @keyframes ease-in { from { transform: scale(1); } to { transform: scale(1.05); } }
  .row.reveal .media { transform: translateX(-36px); transition: transform 1s cubic-bezier(.2,.7,.2,1); }
  .row.flip.reveal .media { transform: translateX(36px); }
  .row.reveal.in .media { transform: none; }

  /* Silver lining: the top button wears a thin silver ring. It breathes (dim and thin -> bright and bold -> dim)
     while one bright spot keeps circling it. The script puts it on just one button on screen. */
  @property --ra { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
  .btn { position: relative; }
  .btn.primary::after { content: ""; position: absolute; inset: -5px; border-radius: inherit; padding: 1.5px; pointer-events: none;
    background: conic-gradient(from var(--ra), #868c94 0deg, #9ba1a8 120deg, #868c94 230deg, #d9dde1 290deg, #ffffff 318deg, #d9dde1 338deg, #868c94 360deg);
    -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0); mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    -webkit-mask-clip: content-box, border-box; mask-clip: content-box, border-box; -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .6s ease; }
  .btn.primary.lit::after { opacity: 1; animation: orbit 3.2s linear infinite, breathe 3.6s ease-in-out infinite; }
  @keyframes orbit { to { --ra: 360deg; } }
  @keyframes breathe { 0%, 100% { padding: 1.5px; filter: brightness(.82); opacity: .55; } 50% { padding: 3px; filter: brightness(1.2); opacity: 1; } }
  .wide { display: inline; }
  @media (max-width: 600px) { .wide { display: none; } }

  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero-media img, .frame .zoom, .media img, .tile-photo, .btn.primary::after, .intro-trace .head { animation: none; } .row.reveal .media { transform: none; transition: none; } .reveal { opacity: 1; transform: none; transition: none; } }

  /* Intro (~5.5 s, once per visit, tap to skip): seed drops on the soil line, the logo's sprig grows and draws the line up into its stem, a light circles from the plant's base drawing the oval while the HH sweeps in, then a soft glow. */
  .intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #ece2d9; /* = the logo file's own background */ transition: opacity 0.5s ease, visibility 0.5s; cursor: pointer; }
  .intro.done { opacity: 0; visibility: hidden; }
  /* Everything below shares the logo's own coordinates (236 x 299), so the sprig grows from exactly where the seed lands. */
  .intro-stage { position: relative; width: 168px; aspect-ratio: 236 / 299; margin-bottom: 120px; animation: glowup .8s ease-out 3.7s 1, fly .6s cubic-bezier(.55,0,.85,.35) 7.35s forwards; }
  .intro-stage > img, .intro-trace { position: absolute; inset: 0; width: 100%; height: 100%; }
  .intro-trace { overflow: visible; pointer-events: none; }
  /* Unhurried, with held beats: line in (.2-1.0s), hold the gap, seed drops (1.5-2.1s), planted, hold, sprig + ground (3.0-5.3s), hold, light traces (5.7-7.8s), glow + tagline, (7s cut 2026-11-10: seed/sprig by 2.5s, oval + letters 2.6-4.1s, tagline drawn in 4.2-5.6s, name shine + rule 5.75-7.05s, fly 7.35s, page by ~8.1s).
     1. soil line draws in from both sides and stops with a gap, 2. pause, 3. seed drops through the gap and the line closes over it, 4. seed settles just under the earth and is buried */
  .intro .soil { stroke: var(--tan); stroke-width: 1.6; stroke-linecap: butt; stroke-dasharray: 100 200; stroke-dashoffset: 100;
    animation: soilin .35s ease-out .05s forwards, soilclose .13s ease-out .92s forwards, soilout 1.2s cubic-bezier(.45,.05,.55,.95) 1.3s forwards; }  /* same clock as the sprig: the ground becomes the plant */
  .intro .seed { fill: var(--gold-dk); transform-box: fill-box; transform-origin: center; opacity: 0;
    animation: drop .4s cubic-bezier(.5,0,.75,0) .55s forwards, sink .3s ease-in-out 1s forwards; }  /* drains bottom-to-top into the stem, gone exactly as the sprig starts (3.0s) */
  /* 3. the logo's own sprig grows up from the seed while the soil line is drawn up into its stem; then it stays */
  .mk-leaf { clip-path: inset(83% 0 0 0); transform-origin: 32.6% 82.3%; transform: scale(.94); animation: grow 1.2s cubic-bezier(.45,.05,.55,.95) 1.3s forwards; }
  /* 4. light starts at the base of the plant and circles clockwise; the letters sweep in right behind it */
  .intro-trace .line { stroke: #9a7a52; stroke-width: 1.7; stroke-linecap: butt; stroke-dasharray: 100 200; stroke-dashoffset: 100;
    animation: drawline 1.5s cubic-bezier(.45,.05,.55,.95) 2.6s forwards; }
  .intro-trace .head { stroke: #fdfdfe; stroke-width: 2.6; stroke-dasharray: 2.5 200; stroke-dashoffset: 2.5; opacity: 0;
    filter: drop-shadow(0 0 1.5px rgba(255,255,255,1)) drop-shadow(0 0 5px rgba(205,210,216,.95)); }
  .intro-trace .t1 { stroke: #fff7ea; stroke-width: 2.3; stroke-dasharray: 7 200; stroke-dashoffset: 7; opacity: 0; filter: drop-shadow(0 0 3px rgba(255,248,235,.9)); }
  .intro-trace .t2 { stroke: #f1dfbd; stroke-width: 2; stroke-dasharray: 16 200; stroke-dashoffset: 16; opacity: 0; }
  .intro-trace .t3 { stroke: #e0c79c; stroke-width: 1.8; stroke-dasharray: 30 200; stroke-dashoffset: 30; opacity: 0; }
  .intro-trace .head, .intro-trace .tail { stroke-linecap: round; animation: 1.5s cubic-bezier(.45,.05,.55,.95) 2.6s forwards; }
  .intro-trace .head { animation-name: c-head; } .intro-trace .t1 { animation-name: c-t1; } .intro-trace .t2 { animation-name: c-t2; } .intro-trace .t3 { animation-name: c-t3; }
  .intro-trace .mote { fill: #fffaf0; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 1.5px #fff); animation: mote 0.68s ease-out forwards; }
  @property --sw { syntax: '<angle>'; inherits: false; initial-value: -24deg; }
  .mk-letters { --sw: -24deg;  /* conic sweep centred on the oval, starting at the plant's base (205.5deg), clockwise */
    -webkit-mask-image: conic-gradient(from 205.5deg at 47.67% 53.01%, #000 var(--sw), transparent calc(var(--sw) + 24deg));
    mask-image: conic-gradient(from 205.5deg at 47.67% 53.01%, #000 var(--sw), transparent calc(var(--sw) + 24deg));
    animation: sweep 1.5s cubic-bezier(.45,.05,.55,.95) 2.6s forwards; }
  /* 5. Lettering laid out like the lobby sign: the name, a thin rule, then a small spaced line (about a third of the name's letter height).
        The name is there from the start. After a beat the tagline writes in behind a gold shine (left to right), then a gold shine runs back
        through the name (right to left) and draws the rule as it goes. Hold. Then everything flies toward the camera and the page opens. */
  @property --tx { syntax: '<percentage>'; inherits: false; initial-value: -6%; }
  @property --nx { syntax: '<percentage>'; inherits: false; initial-value: 125%; }
  .intro-words { position: absolute; left: 50%; top: calc(100% + 14px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .55rem; }
  .intro-name, .intro-line { white-space: nowrap; margin: 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
  .intro-name { font: 600 clamp(1.4rem, 6.2vw, 2.1rem)/1.15 "Cormorant Garamond", Georgia, serif; letter-spacing: .14em; text-transform: uppercase;
    background-image: linear-gradient(90deg, var(--forest) calc(var(--nx) - 12%), #b88a45 calc(var(--nx) - 5%), #d9ae5f var(--nx), #b88a45 calc(var(--nx) + 5%), var(--forest) calc(var(--nx) + 12%));
    animation: namesheen 1.3s linear 5.75s forwards; }
  /* like the logo: the two H's stand well above the rest, centred on the small capitals' midline (not sitting on their baseline) */
  .intro-name .cap { font-size: 1.6em; line-height: 0; position: relative; top: .117em; }
  .intro-rule { display: block; width: 88%; height: 1px; background: var(--tan); transform: scaleX(0); transform-origin: right center;
    animation: rule 1.3s linear 5.75s forwards; }
  .intro-line { font: 500 clamp(.6rem, 2.5vw, .82rem)/1 Jost, sans-serif; letter-spacing: .26em; text-transform: uppercase;
    background-image: linear-gradient(90deg, var(--olive) calc(var(--tx) - 9%), #b88a45 calc(var(--tx) - 3%), #d9ae5f var(--tx), transparent calc(var(--tx) + 2%));
    animation: tagsheen 1.4s ease-in-out 4.2s forwards;  /* drawn in left to right behind its shine */ }
  @keyframes tagsheen { to { --tx: 112%; } }
  @keyframes namesheen { to { --nx: -25%; } }
  /* the rule's ends sit at 94% and 6% of the name, so it starts and finishes exactly as the shine passes those points */
  @keyframes rule { 0%, 21% { transform: scaleX(0); } 79%, 100% { transform: scaleX(1); } }
  @keyframes fly { 0% { transform: scale(1); opacity: 1; filter: blur(0); } 100% { transform: scale(4.5); opacity: 0; filter: blur(4px); } }
  @keyframes soilin { to { stroke-dashoffset: 8; } }  /* stops ~6px short of the middle on each side: the gap the seed falls into */
  @keyframes soilclose { from { stroke-dashoffset: 8; } to { stroke-dashoffset: 0; } }
  @keyframes soilout { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
  @keyframes drop { 0% { opacity: 1; transform: translateY(-110px); } 100% { opacity: 1; transform: translateY(7px); } }  /* lands just under the line */
  @keyframes sink { from { opacity: 1; transform: translateY(7px); clip-path: inset(0 0 0 0); } to { opacity: .5; transform: translateY(4px); clip-path: inset(0 0 100% 0); } }
  @keyframes grow { to { clip-path: inset(40% 0 0 0); transform: scale(1); } }  /* the sprig fills only 41-83% of its frame, so the wipe stops at its tip and ends exactly with the ground line */
  @keyframes drawline { to { stroke-dashoffset: 0; } }
  /* each segment ends exactly at the head: offset runs from its own length to (length - 100); brightness peaks just past halfway */
  @keyframes c-head { 0% { stroke-dashoffset: 2.5; opacity: 0; } 12% { opacity: .7; } 55% { opacity: 1; } 100% { stroke-dashoffset: -97.5; opacity: 0; } }
  @keyframes c-t1 { 0% { stroke-dashoffset: 7; opacity: 0; } 12% { opacity: .52; } 55% { opacity: .75; } 100% { stroke-dashoffset: -93; opacity: 0; } }
  @keyframes c-t2 { 0% { stroke-dashoffset: 16; opacity: 0; } 12% { opacity: .28; } 55% { opacity: .4; } 100% { stroke-dashoffset: -84; opacity: 0; } }
  @keyframes c-t3 { 0% { stroke-dashoffset: 30; opacity: 0; } 12% { opacity: .13; } 55% { opacity: .18; } 100% { stroke-dashoffset: -70; opacity: 0; } }
  @keyframes mote { from { opacity: .95; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }
  @keyframes sweep { to { --sw: 360deg; } }
  @keyframes glowup { 0%, 100% { filter: none; } 40% { filter: brightness(1.1) drop-shadow(0 0 9px rgba(255,238,205,.85)); } }
  @keyframes fadein { to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .intro { display: none; } }