:root{
  /* 🔴 BRAND PALETTE, from the source (2026-08-19). Krystyn Richardson of BOLD
     Multimedia, who owns the mark, sent the hexes on the CMO thread, and Noelle
     confirmed the same file sits in the shared Drive under Branding/Palette.png.
     These six ARE the brand: #918d89 #797a68 #a89c82 #877d69 #725c4a #577c93.
     Jennifer Dudley (CMO): "The green needs to match the brand green and we also
     wonder if we can integrate more of the corporate blue as much of the marketing
     is driven by the blue."

     🔴 MEASURED, not eyeballed: the brand green (#797a68) reads 4.38:1 on white and
     the brand blue (#577c93) 4.46:1. Both miss WCAG AA for body-size text (4.5) and
     both fail as a button fill under white type. So the exact brand hexes carry
     FILLS, RULES and DISPLAY, and the deeper derivatives below carry TEXT and
     BUTTONS. Every value here was checked with a contrast calculation, and the
     audience for this site is 55-75 (Cheryl Dirck, 8/17: lighter backgrounds are
     "much easier to read" as she gets older). */
  --ink:#2b2c25; --ink-soft:#43453a; --muted:#5c5e50;          /* 14.10 / 6.62 on white */
  --green:#797a68;                                             /* BRAND GREEN, exact */
  --green-d:#5f6152; --green-dd:#464838; --green-ddd:#2f3126;  /* 6.33 / 9.36 / 13.22 */
  --green-l:#949581; --olive:#877d69;                          /* brand khaki as the olive */
  --sage:#c3c4b6; --sage-soft:#dcdcd2;                         /* 5.30 on --green-dd */
  --blue:#577c93;                                              /* BRAND CORPORATE BLUE, exact */
  --blue-d:#3f5e73; --blue-dd:#2c4557; --blue-l:#a5bccb;       /* 6.86 / 10.02 */
  /* 🔴 Jennifer Dudley, 8/17: "Add a modern pop of blue (e.g., for buttons)".
     The brand blue itself is 4.46:1 under white type, which misses AA, so the
     button fill is the brightest step down that clears it. MEASURED: white on
     #4e7189 is 5.19:1, hover #3f5e73 is 6.86:1. Do not put the raw brand blue
     behind a white label. */
  --blue-btn:#4e7189; --blue-btn-d:#3f5e73; --blue-txt:#3c5a6e;
  /* 🔴 --teal survives only as an ALIAS. It used to be #2f6a63, a blue-green, and
     it is the inconsistency Jennifer named: "the palette is inconsistent, mixing
     a blue-green with the brand's true green". Any rule still reaching for it
     now gets the brand blue and cannot bring the old colour back. */
  --teal:var(--blue-d);
  /* the old scheme's gold is not a brand colour. Its jobs move to brand coffee
     (#725c4a, 5.92 on ivory) and brand taupe. */
  --gold:#a89c82; --gold-d:#725c4a; --coffee:#725c4a; --taupe:#a89c82; --warmgrey:#918d89;
  --cream:#f4f1ea; --cream-d:#ece7dc; --ivory:#faf8f4; --paper:#ffffff; --line:#e4ded1;
  --maxw:1220px; --r:0px; --r-s:0px;
  /* Couture: paper does not glow. Shadows are a whisper, structure comes from
     hairline rules instead. */
  --sh:0 1px 2px rgba(43,47,40,.05);
  --sh-md:0 26px 60px -40px rgba(43,47,40,.30);
  --hair:rgba(114,92,74,.42);           /* coffee hairline */
  --hair-l:rgba(233,238,222,.26);       /* hairline on dark */
  --measure:64ch;
  /* 🔴 BRAND FONTS, Krystyn 8/19: "The brand fonts are Prata (serif) and Metropolis
     (sans serif) our subs have been Montserrat and Baskerville for social."
     Prata is used as sent. Metropolis is NOT: its canonical repository was taken
     down over its licence and there is no licensed webfont to serve, which is not a
     thing to put on a law firm's site. We use the sub Krystyn herself named,
     Montserrat, which is on Google Fonts under the OFL. Say the word and we will
     licence a Metropolis webfont properly and swap this one line. */
  --ff-d:"Prata",Georgia,"Times New Roman",serif;
  /* 🔴 THE SCRIPT, added 2026-08-31. Tamara asked on the call for "some cursive font
     paired with a bold font", and the bold half already exists: every eyebrow, label
     and button on this site is Montserrat 700 uppercase. Parisienne is the cursive.
     It was chosen against Pinyon Script and Style Script at real hero size on this
     exact ivory, and it also fixes a defect rather than only adding a flourish: Prata
     ships no italic, so every `em` in a display heading was being SLANTED BY THE
     BROWSER, which is a fake italic and looks like one.
     🔴 SHORT ACCENT PHRASES ONLY. Never a paragraph, never a whole heading, never
     anything a 55-to-75 reader has to work at. The rule on this site is that the
     script carries the emotional half of one sentence and nothing else. */
  --ff-s:"Parisienne",var(--ff-d);
  --ff-b:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--ff-b);font-size:1.06rem;line-height:1.78;color:var(--ink);
  letter-spacing:.001em;
  background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* 🔴 overflow-x:CLIP, not hidden. Setting overflow-x:hidden on one axis forces the
     other axis to compute as auto, which quietly turns <body> into a scroll container
     for the whole document. Everything still looked right, but any scroll-driven
     animation inside it resolved against a box that never scrolls and sat frozen at
     progress zero. That is what stopped the divider parallax dead. clip does the same
     job of stopping sideways overflow without creating a scrollport. hidden first for
     anything too old to know clip. */
  overflow-x:hidden;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2{font-family:var(--ff-d);font-weight:400;line-height:1.12;color:var(--ink);margin:0 0 .5em;
  letter-spacing:-.008em;font-feature-settings:"liga" 1,"kern" 1}
h3,h4{font-family:var(--ff-b);font-weight:600;line-height:1.25;color:var(--ink);margin:0 0 .5em;letter-spacing:-.004em}
h1{font-size:clamp(2.5rem,5.6vw,4.1rem)}
h2{font-size:clamp(1.95rem,3.8vw,2.85rem)}
h3{font-size:1.34rem}
p{margin:0 0 1.15rem;max-width:var(--measure)}
.center p,.section-sub,.lead-card p,.hstat span,.ev p,td p,li p{max-width:none}
em{font-style:italic}
sup.tm{font-size:.42em;vertical-align:super;font-family:var(--ff-b);font-weight:600;
  line-height:0;letter-spacing:0}
/* in body-font contexts .42em falls under 7px and reads as a gap, so it gets a floor */
.plate__by sup.tm,.hero__kicker sup.tm,.foot sup.tm,.eyebrow sup.tm,.ev sup.tm,
.hstat sup.tm,.nl sup.tm,.recog sup.tm,.foot__mark sup.tm{font-size:.6em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5.5vw,72px)}
.skip{position:absolute;left:-999px;top:0;background:var(--green-d);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:0}
.eyebrow{display:block;font-family:var(--ff-b);font-weight:700;
  font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-d);margin-bottom:1.5rem}
.eyebrow::before{content:"";display:inline-block;vertical-align:middle;
  width:34px;height:1px;background:currentColor;opacity:.7;margin-right:14px}
.center .eyebrow,.section-head.center .eyebrow{text-align:center}
.eyebrow--light{color:var(--sage)!important}
[class*="band--brand"] .eyebrow,.steps-sec .eyebrow{color:var(--sage)}
.muted{color:var(--muted)}
/* 🔴 max-width:none IS THE FIX, 2026-09-02. Tiffany: "a;ign buttens better. This is
   off", on the Lifetime Protection Plan picker, where the closing button sat hard left
   under a centred grid. Nothing was wrong with the centring: `p{max-width:var(--measure)}`
   caps EVERY paragraph at the reading measure, and the override next to it is
   `.center p`, which matches a paragraph INSIDE a centred block and does NOT match
   `p.center`, the paragraph that IS the centred block. So the <p> stayed measure-width,
   sat at the left edge as any block with a max-width and no auto margin does, and
   politely centred the button inside its own narrow box. Measured on the live page: the
   button sat 254px left of the wrap's left edge and 467px from its right. */
.center{text-align:center;max-width:none}

/* reveal-on-scroll (gated on .reveal-on so no-JS shows everything) */
.reveal-on .reveal{opacity:0;transform:translateY(20px);transition:opacity 1.25s cubic-bezier(.22,.61,.24,1),transform 1.35s cubic-bezier(.22,.61,.24,1)}
.reveal-on .reveal.in{opacity:1;transform:none}
.reveal-on .reveal.d1{transition-delay:.08s}.reveal-on .reveal.d2{transition-delay:.16s}.reveal-on .reveal.d3{transition-delay:.24s}.reveal-on .reveal.d4{transition-delay:.32s}

/* ---------- buttons (solid rectangular, uppercase letter-spaced, Shoup/P.Allen style) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7em;font-family:var(--ff-b);font-weight:700;
  font-size:.86rem;letter-spacing:.11em;text-transform:uppercase;line-height:1.25;padding:1.2em 2.3em;border-radius:0;
  border:1px solid transparent;cursor:pointer;transition:color .3s ease,border-color .3s ease;text-align:center;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn--lg{padding:1.35em 2.6em;font-size:.9rem}
.btn--block{width:100%}
/* 🔴 the primary action is BLUE. Jennifer asked for a modern pop of blue and
   named buttons as the place for it. Green stays as the frame colour, the
   rules, the marks and the outline buttons, so the brand green still leads. */
.btn--solid{background:var(--blue-btn);color:#fff;border-color:var(--blue-btn)}
.btn--solid:hover{background:var(--blue-btn-d);border-color:var(--blue-btn-d)}
.btn--outline{background:transparent;border-color:var(--green);color:var(--green)}
.btn--outline:hover{background:var(--green);color:#fff}
.btn--line-l{background:transparent;border-color:rgba(43,47,40,.3);color:var(--ink)}
.btn--line-l:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--gold{background:var(--blue-btn);color:#fff;border-color:var(--blue-btn)}
.btn--gold:hover{background:var(--blue-btn-d);border-color:var(--blue-btn-d)}
.btn--ghost{background:transparent;border-color:rgba(43,47,40,.28);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--ghost-l{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn--ghost-l:hover{background:#fff;color:var(--green-d)}
.btn svg{flex:none}

/* ---------- topbar ---------- */
.topbar{background:var(--green-dd);color:#d5d9c9;font-size:.82rem}
.topbar__in{display:flex;align-items:center;gap:16px;min-height:42px;padding:5px 0}
.topbar__pos{display:inline-flex;align-items:center;gap:7px}
.topbar__pos svg{color:var(--sage)}
.topbar__spread{flex:1}
.topbar__ph{color:#fff;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.topbar__ph:hover{color:var(--sage);text-decoration:none}
.topbar__cta{color:#d5d9c9;border-left:1px solid rgba(255,255,255,.18);padding-left:16px;letter-spacing:.04em}
.topbar__cta:hover{color:#fff}
@media(max-width:760px){.topbar__cta,.topbar__pos{display:none}.topbar__in{justify-content:center}.topbar__spread{display:none}}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:.3s}
.nav__in{display:flex;align-items:center;gap:16px;min-height:100px}
.nav__brand img{height:56px;width:auto}
.nav__links{margin-left:auto}
.nav__links ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.nav__links .top{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--ink);padding:12px 10px;
  font-size:.85rem;letter-spacing:.045em;text-transform:uppercase;transition:.28s}
.nav__links .top:hover{color:var(--green);text-decoration:none}
.nav__links .top[aria-current]{color:var(--green)}
.car{width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.5;margin-top:-3px;transition:.2s}
.has-drop{position:relative}
.has-drop:hover .car{opacity:.9}
.drop{position:absolute;top:100%;left:0;min-width:300px;padding-top:10px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop__in{background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-md);padding:9px;overflow:hidden}
.drop__in a{display:block;padding:11px 14px;color:var(--ink)}
.drop__in a:hover{background:var(--cream);text-decoration:none}
.drop__in strong{display:block;font-weight:600;font-size:.96rem;color:var(--ink)}
.drop__in span{display:block;font-size:.82rem;color:var(--muted);margin-top:1px}
.nav__cta{margin-left:4px;padding:1.05em 1.5em;font-size:.84rem;letter-spacing:.05em}
.nav .wrap{max-width:1460px}
.nav__ph{font-size:.9rem}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:10px;cursor:pointer}
.burger span{width:26px;height:2.5px;background:var(--ink);border-radius:2px;transition:.2s}
@media(max-width:1040px){.nav__links,.nav__cta{display:none}.burger{display:flex;margin-left:auto}.nav__brand img{height:48px}.nav__in{min-height:72px}}
.mobnav{position:fixed;inset:0 0 0 auto;width:min(88vw,370px);background:var(--paper);z-index:150;box-shadow:var(--sh-md);padding:86px 24px 30px;overflow-y:auto;transform:translateX(100%);transition:.3s cubic-bezier(.16,.7,.25,1)}
.mobnav.open{transform:translateX(0)}
.mobnav[hidden]{display:block}
.mobnav a{display:block;padding:13px 8px;border-bottom:1px solid var(--line);color:var(--ink);font-weight:500;font-size:1.06rem}
.mobnav a.sub{padding:5px 0 5px 22px;font-weight:400;font-size:.96rem;color:var(--muted);border-bottom:0}
.mobnav .btn{width:100%;margin-top:18px}
.mobnav__ph{display:flex!important;align-items:center;gap:8px;justify-content:center;margin-top:14px;color:var(--green)!important;font-weight:600}
.navmask{position:fixed;inset:0;background:rgba(38,51,31,.5);z-index:140;opacity:0;visibility:hidden;transition:.3s}
.navmask.open{opacity:1;visibility:visible}
body.lock{overflow:hidden}

/* ---------- HERO (light, elegant, form on right; Shoup pattern) ---------- */
.hero{position:relative;background:linear-gradient(120deg,var(--ivory) 0%,var(--cream) 52%,#eef0e4 100%);overflow:hidden}
.hero__botanical{position:absolute;top:-30px;right:-40px;z-index:0;opacity:.75;pointer-events:none}
.hero__botanical .botanical{width:min(42vw,480px);height:auto;transform:rotate(8deg)}
.hero__in{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,72px);align-items:center;padding:clamp(56px,7vw,104px) 0}
.hero__kicker{font-family:var(--ff-b);font-weight:700;font-size:.84rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-d);margin:0 0 1.3rem;max-width:none}
.hero__crest{display:block;color:var(--gold-l);opacity:.85;margin:0 0 18px}
.hero__trust{display:flex;align-items:center;gap:14px;margin:1.6rem 0 0;padding-top:1.3rem;
  border-top:1px solid rgba(216,184,119,.30);font-family:var(--ff-b);font-size:.86rem;font-weight:600;
  letter-spacing:.05em;text-transform:none;color:#f3f6ec;max-width:none;line-height:1.6}
.hero__trust svg{color:var(--gold-l);flex:none}
.v-light .hero__trust{border-top-color:rgba(255,255,255,.34);color:rgba(255,255,255,.92)}
.v-light .hero__trust svg{color:#f0e3c6}
@media(max-width:600px){.hero__trust{font-size:.82rem;letter-spacing:.02em}}
.hero__title{font-size:clamp(2.7rem,5.6vw,4.6rem);line-height:1.06;color:var(--green-d);margin:0 0 1rem;font-weight:500;letter-spacing:-.005em}
.hero__title em{font-style:italic;color:var(--olive)}
/* ---- the script accent. One rule, every display heading, so it cannot drift. ----
   1.34em because Parisienne's lowercase is much smaller than Prata's at the same
   size; measured side by side until the x-heights agreed. The line-height and the
   inline-block are for the descenders, which are long and were being clipped by the
   heading's own tight leading. */
/* 🔴 2026-09-01. Tiffany: "where is the cursive font rule like we used on the home page?"
   The rule was already here and already correct. NOTHING WAS BROKEN IN THE CSS: the
   interior pages simply never wrote an <em>, so the accent had nowhere to land. Every
   location and service page rendered zero of them while the home page rendered six. The
   fix was in the copy, not here. These two selectors are the only additions, for the
   editorial side-heading and the closing CTA, which are the two display headings the
   interior pages own and the home page does not. */
.hero__title em,.phead h1 em,.statement__big em,.plate__q em,.section-head h2 em,
.split__copy h2 em,.arcx__panel h3 em,.edit__side h2 em,.cta-band__in h2 em,
.lband__h em,.foot__tag em{
  font-family:var(--ff-s);font-style:normal;font-weight:400;
  font-size:1.34em;line-height:1;letter-spacing:.005em;margin-left:.1em;margin-right:.16em}
/* an optical space before the script. Parisienne carries almost no left side bearing,
   so the word space in front of it disappears and the accent collides with whatever
   precedes it: "Life(TM),from the day" on the Lifetime Protection Plan page. */
/* 🔴 2026-09-21, and the same fault on the other side. Jennifer Dudley, on the home-page
   pull quote: "need an extra space here due to script to regular text - they run
   together". Parisienne's right side bearing is as thin as its left, so
   "<em>protected</em> long" closes up exactly the way ",from" did. .16em rather than
   .1em because the trailing letter is usually a d/t/e with a flat exit stroke, which
   reads tighter than the entry side. */
/* Parisienne's ascenders and descenders are long, so any heading that carries a
   script accent needs leading it would not otherwise need. Set here rather than on
   the base heading so the rest of the type is untouched. */
.hero__title,.phead h1,.statement__big,.plate__q,.edit__side h2,.cta-band__in h2{line-height:1.2}
/* 🔴 THE DESCENDER CUT, fixed 2026-09-01. Tiffany: "some places the fonts are cut."
   She was right, and the cause is geometric, not a font-loading problem. Parisienne is
   set at font-size:1.34em with line-height:1, so its descenders (y, g, f, p) hang BELOW
   the line box. Measured on the live page, every accent overhangs its own heading's
   border box by a consistent ~0.24em of the heading's font size: 6.5px on .hero__title,
   7.2px on .section-head h2, 5.8px on .plate__q, 3.6px on .foot__tag. That overhang is
   invisible until something cuts it, and two ancestors do: .hero__stage and .plate both
   carry overflow:hidden for the ken-burns and grain effects, so the tail of every y and
   f in the hero was being sliced off.
   🔴 The fix is padding, NOT removing those overflow rules: the overflow is load bearing
   for the animation, and a bigger line-height would open the leading between the lines
   of the heading, which is a different thing and looks wrong. .26em covers the measured
   .24em with a margin.
   🔴 :has(em) so an unaccented heading gains no space. Browsers without :has() simply
   keep today's behaviour, which is the safe direction.
   🔴 THIS LIST WAS WRONG TWICE ON THE FIRST PASS, and both errors are the same mistake:
   reading ONE page and generalising. (a) .statement__big was EXCLUDED because it measured
   -0.98em on the home page, where its accent happens to land on a line with room. On
   /about/, /who-we-serve/ and /lifetime-protection-plan/ the same class overhangs by
   10.4px. (b) .firmstrip__q was missed entirely because it is a SECOND, duplicated script
   rule further down this file (line ~1048, 1.28em) rather than part of the "one rule so it
   cannot drift" list up here. It drifted. It sits on every location and service page.
   Both were caught by measuring the overhang on seven pages, not by looking at the hero.
   🔴 .36em, not .26em: the worst measured overhang is .34em (.statement__big), and the
   list has to cover its worst member, not its typical one. If a new script accent is ever
   added, add its parent HERE TOO and re-run the sweep. */
.hero__title:has(em),.phead h1:has(em),.plate__q:has(em),.section-head h2:has(em),
.split__copy h2:has(em),.edit__side h2:has(em),.arcx__panel h3:has(em),
.cta-band__in h2:has(em),.foot__tag:has(em),.statement__big:has(em),
.lband__h:has(em),.firmstrip__q:has(em){padding-bottom:.36em}
/* Parisienne's ASCENDERS are long too, so an accent on a second line can crowd the line
   above it. Only the accented headings that were missing the compensation entirely. */
.section-head h2:has(em),.split__copy h2:has(em),.arcx__panel h3:has(em){line-height:1.2}
.hero__tagline{line-height:1.35;font-family:var(--ff-d);font-style:italic;font-size:clamp(1.35rem,2.4vw,1.7rem);color:var(--green);margin:0 0 1.2rem;font-weight:500}
.hero__lead{font-size:1.16rem;line-height:1.62;color:var(--ink-soft);max-width:46ch;margin:0 0 1.8rem}
/* 🔴 Tamara, 2026-09-17: the workshop Hook must read WITH the Theme, "just in a different
   font or size", not a scroll below it. hero_over() lifts it onto the still with the h1;
   this is the "different font or size": the display face, italic, gold, well under the
   theme's size so it reads as the theme's second line and never competes with it. */
.hero__hook{font-family:var(--ff-d);font-style:italic;font-weight:500;color:#f2e9d8;
  font-size:clamp(1.15rem,1.85vw,1.5rem);line-height:1.34;letter-spacing:-.004em;
  margin:-.2rem 0 1.15rem;
  /* 🔴 the same shadow stack as .hero__title. The hook sits on a bright sky-and-sand
     photograph; the first pass used --gold-l with one soft shadow and disappeared into
     the dirt. Anything set over the still needs the full stack, not a hint of one. */
  text-shadow:0 1px 1px rgba(20,16,10,.95),0 0 7px rgba(20,16,10,.88),
    0 2px 18px rgba(20,16,10,.72),0 6px 46px rgba(20,16,10,.58)}
.hero--split .hero__hook{color:var(--gold-d);text-shadow:none}
.hero__btns{display:flex;flex-wrap:wrap;gap:14px}
/* lead form card */
.lead-card{background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-md);padding:clamp(26px,3vw,38px);border-top:4px solid var(--green)}
.lead-card__eyebrow{font-family:var(--ff-b);font-weight:700;font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-d);margin:0 0 .4rem}
.lead-card__title{font-size:1.9rem;margin:0 0 .3rem;color:var(--green-d)}
.lead-card__sub{font-size:.98rem;color:var(--muted);margin:0 0 1.2rem}
.lead-card__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lead-card label{display:block;font-weight:600;font-size:.82rem;color:var(--ink-soft);margin-bottom:12px}
.lead-card .opt{font-weight:400;color:var(--muted)}
.lead-card input,.lead-card textarea{width:100%;margin-top:5px;padding:11px 13px;border:1.5px solid var(--line);border-radius:var(--r-s);font:inherit;font-size:.98rem;color:var(--ink);background:var(--ivory);transition:.15s}
.lead-card input:focus,.lead-card textarea:focus{outline:none;border-color:var(--green);background:#fff;box-shadow:0 0 0 3px rgba(65,87,63,.1)}
.lead-card .btn{margin-top:4px}
.lead-card__fine{font-size:.86rem;line-height:1.55;color:var(--ink-soft);margin:.9rem 0 0}
@media(max-width:920px){.hero__in{grid-template-columns:1fr;gap:36px}.hero__botanical{opacity:.35}.hero__lead{max-width:none}}

/* ---------- marquee / stat strip ---------- */
.marquee-sec{padding:clamp(26px,4vw,40px) 0;border-bottom:1px solid var(--line);background:var(--ivory)}
.marquee{display:flex;align-items:center;justify-content:center;gap:clamp(18px,4vw,52px);flex-wrap:wrap;text-align:center}
.marquee__item{display:flex;flex-direction:column;gap:2px}
.marquee__item strong{font-family:var(--ff-d);font-size:clamp(1.5rem,2.6vw,2rem);color:var(--green);font-weight:600;line-height:1}
.marquee__item span{font-size:.85rem;color:var(--muted)}
.marquee__div{width:5px;height:5px;border-radius:50%;background:var(--sage);flex:none}
@media(max-width:720px){.marquee__div{display:none}.marquee{gap:22px}}

/* ---------- bands ---------- */
.band{padding:clamp(78px,10.5vw,152px) 0;position:relative}
.band--paper{background:var(--paper)}
.band--cream{background:var(--cream)}
.band--ivory{background:var(--ivory)}
.band--brand{background:linear-gradient(160deg,var(--green) 0%,var(--green-d) 100%);color:#eef0e4}
.band--brand h1,.band--brand h2,.band--brand h3{color:#fff}
.band--brand p{color:#dbe0d0}
.narrow .wrap,.wrap.narrow{max-width:840px}
.section-head{max-width:800px;margin:0 auto clamp(38px,5vw,58px)}
.section-head/* 🔴 max-width:none IS THE FIX, 2026-09-02. Tiffany: "a;ign buttens better. This is
   off", on the Lifetime Protection Plan picker, where the closing button sat hard left
   under a centred grid. Nothing was wrong with the centring: `p{max-width:var(--measure)}`
   caps EVERY paragraph at the reading measure, and the override next to it is
   `.center p`, which matches a paragraph INSIDE a centred block and does NOT match
   `p.center`, the paragraph that IS the centred block. So the <p> stayed measure-width,
   sat at the left edge as any block with a max-width and no auto margin does, and
   politely centred the button inside its own narrow box. Measured on the live page: the
   button sat 254px left of the wrap's left edge and 467px from its right. */
.center{text-align:center;max-width:none}
.section-sub{font-size:1.18rem;color:var(--muted);line-height:1.6}
.band--brand .section-sub{color:#d3d9c6}
.prose{font-size:1.15rem}
.prose .lede{font-size:1.5rem;line-height:1.42;color:var(--green-d);font-family:var(--ff-d);font-weight:500;font-style:italic}
.prose h2{margin-top:.2em}
.prose.dropcap>p:first-of-type::first-letter{font-family:var(--ff-d);float:left;font-size:4.6rem;line-height:.72;padding:.08em .1em 0 0;color:var(--green);font-weight:600}

/* acanthus rule */
.rule{display:flex;align-items:center;justify-content:center;gap:18px;margin:1.8rem auto 0;max-width:320px}
.rule span{height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--sage))}
.rule span:last-child{background:linear-gradient(270deg,transparent,var(--sage))}
.acanthus{display:block}

/* ---------- statement (soft sage, elegant) ---------- */
.statement{background:linear-gradient(160deg,var(--green) 0%,var(--green-d) 100%);color:#eef0e4;text-align:center;padding:clamp(70px,10vw,140px) 0;position:relative;overflow:hidden}
.statement__in{position:relative;max-width:920px;margin:0 auto}
.statement__seal{color:var(--sage);display:inline-flex;margin-bottom:24px}
.statement__lead{font-family:var(--ff-d);font-style:italic;font-size:1.5rem;color:var(--sage-soft);margin:0 0 .5rem}
.statement__big{font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.2;color:#fff;margin:0 0 1.5rem;font-weight:500}
.statement__big em{color:var(--sage-soft);font-style:italic}
.statement__sub{font-size:1.14rem;color:#d6dcc9;max-width:60ch;margin:0 auto;line-height:1.6}

/* ---------- tri feature ---------- */
.tri-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.tri{text-align:center;padding:8px}
.tri__ic{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:var(--cream);color:var(--green);margin-bottom:20px;border:1px solid var(--sage-soft)}
.tri h3{font-size:1.5rem;font-weight:500}
.tri p{color:var(--muted)}
@media(max-width:820px){.tri-grid{grid-template-columns:1fr;gap:32px;max-width:460px;margin-inline:auto}}

/* ---------- product ladder ---------- */
/* ---------- the plan ladder ----------
   🔴 2026-08-31. Tamara: "the Lifetime Protection Plan and the Personal Protection
   Plan need to be in the same box side by side, perhaps a different stand out
   colour, and the other options smaller underneath, the family and elder ones."
   So: ONE panel in the brand corporate blue holding two equal cards, and a two-up
   row of quieter cards under it. The blue is #2c4557 (--blue-dd), which is the
   brand blue taken down to where white type on it measures 10.02:1, and it is the
   "modern pop of blue" Jennifer Dudley asked for rather than a colour invented to
   stand out. The panel is the only place on the site that colour carries a whole
   block, which is what makes it read as the important one. */
.ladder{display:block}
.ladder__box{background:linear-gradient(165deg,var(--blue-d) 0%,var(--blue-dd) 100%);
  padding:clamp(24px,3vw,42px);box-shadow:var(--sh-md);position:relative}
.ladder__boxhead{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--blue-l);margin:0 0 clamp(16px,2vw,24px);max-width:none}
.ladder__pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);align-items:stretch}
.pcard--hero{background:rgba(255,255,255,.96);border-color:transparent;border-top-color:var(--gold)}
.pcard--hero h3{font-size:clamp(1.42rem,2vw,1.82rem);margin:6px 0 2px}
.pcard--hero>p{font-size:clamp(.99rem,1.1vw,1.08rem);color:var(--ink-soft);flex:1}
.pcard--hero .pcard__plus{font-size:.92rem;color:var(--muted);border-top:1px solid var(--line);
  padding-top:12px;margin-top:12px;flex:none}
.pcard--hero .pcard__more{color:var(--blue-txt)}
.pcard--hero:hover{border-top-color:var(--gold-d)}
/* ---- THE CCJ PATH TO PLANNING (Tamara, 2026-09-16) -------------------------
   Two pictures of the same journey, stacked. The top one is the sentence she wrote
   in her email, "Learn about us -> learn about estate planning -> talk with us ...",
   set as connected pills so the eye reads the whole route in about a second: that is
   the "easy path not a laborious journey" she asked for, and it has to land BEFORE
   the seven steps or the seven steps are what the section is.
   The seven are a vertical path with a rule running down the numbers, so an optional
   step and a required one are visibly on the same road. Required carries the brand
   blue, optional the khaki, and the tag says which in words as well as in colour,
   because colour alone is not an answer for anyone who cannot see it. */
.pathline{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 0;list-style:none;margin:0 0 clamp(30px,4vw,52px);padding:0}
.pathline li{display:flex;align-items:center;counter-increment:none}
.pathline li+li::before{content:"";width:clamp(14px,2vw,30px);height:1px;background:var(--gold);
  flex:none;margin:0 2px}
.pathline span{display:inline-block;background:var(--paper);border:1px solid var(--line);
  border-radius:999px;padding:.55em 1.05em;font-size:clamp(.82rem,.95vw,.93rem);
  font-weight:600;color:var(--green-d);white-space:nowrap}
.pathline li:last-child span{background:var(--blue-dd);border-color:var(--blue-dd);color:#fff}

.pathline a{text-decoration:none;color:inherit;display:block}
.pathline a:hover span,.pathline a:focus-visible span{border-color:var(--gold);background:var(--cream);box-shadow:var(--sh-sm)}
.pathline li:last-child a:hover span,.pathline li:last-child a:focus-visible span{background:var(--blue-d);border-color:var(--blue-d)}
.pathline span{transition:background .18s ease,border-color .18s ease,box-shadow .18s ease}
.pathstep__body h3 a{color:inherit;text-decoration:none;background-image:linear-gradient(var(--gold),var(--gold));background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .22s ease}
.pathstep__body h3 a:hover,.pathstep__body h3 a:focus-visible{background-size:100% 1px}
.pathstep__go{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:.88rem;font-weight:600;letter-spacing:.02em;color:var(--blue-dd);text-decoration:none}
.pathstep__go svg{transition:transform .18s ease}
.pathstep__go:hover svg,.pathstep__go:focus-visible svg{transform:translateX(4px)}
.pathstep--opt .pathstep__go{color:var(--green-d)}
.pathsteps{list-style:none;margin-inline:auto;padding:0;position:relative;max-width:940px}
.pathstep{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2vw,28px);
  padding:0 0 clamp(22px,2.6vw,34px);position:relative}
/* the rule joins one number to the next, and stops at the last one rather than
   trailing off the bottom of the section. */
.pathstep:not(:last-child)::before{content:"";position:absolute;left:23px;top:52px;bottom:0;
  width:1px;background:var(--line)}
.pathstep__n{grid-row:1/3;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--ff-d);font-size:1.15rem;font-weight:600;position:relative;z-index:1}
.pathstep--req .pathstep__n{background:var(--blue-dd);color:#fff}
.pathstep--opt .pathstep__n{background:var(--paper);color:var(--green-d);border:1px solid var(--line)}
.pathstep__body h3{font-size:clamp(1.1rem,1.4vw,1.28rem);margin:10px 0 6px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.pathstep__tag{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  padding:.35em .7em;border-radius:999px}
.pathstep--req .pathstep__tag{background:rgba(44,69,87,.1);color:var(--blue-dd)}
.pathstep--opt .pathstep__tag{background:rgba(38,51,31,.07);color:var(--muted)}
.pathstep__body p{margin:0;color:var(--ink-soft);max-width:66ch}
.pathsec__note{margin:clamp(18px,2vw,26px) auto 0;font-size:.9rem;color:var(--muted);
  max-width:940px;border-top:1px solid var(--line);padding-top:14px}
@media(max-width:620px){
  .pathline{justify-content:flex-start}
  .pathline li+li::before{width:12px}
  .pathline span{white-space:normal}
  .pathstep__n{width:40px;height:40px;font-size:1rem}
  .pathstep:not(:last-child)::before{left:19px;top:44px}
}

.ladder__boxsub{color:rgba(255,255,255,.88);font-size:clamp(.97rem,1.05vw,1.06rem);
  max-width:74ch;margin:0 0 clamp(18px,2.2vw,28px)}
.ladder__small{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,22px);
  margin-top:clamp(16px,2vw,22px)}
/* Tamara, 2026-09-16: the three smaller plans "could have a narrow blue outline around
   them". Narrow is literal - 1px of --blue-dd, the same blue as the panel above, so the
   row reads as the continuation of it. The gold top rule the .pcard hover sets is kept,
   because that is the site's hover language everywhere else. */
.ladder__small--3{grid-template-columns:repeat(3,1fr)}
/* 🔴 .pcard is declared BELOW this block and sets its own border plus a 3px
   transparent border-top, so a single-class rule here loses on source order. Two
   classes wins it without an !important. */
.pcard.pcard--blueline{border:1px solid var(--blue-dd);border-top:3px solid var(--blue-dd)}
.pcard.pcard--blueline:hover{border-top-color:var(--gold)}
@media(max-width:900px){.ladder__small--3{grid-template-columns:1fr}}
.pcard--sm{padding:clamp(20px,2.1vw,26px) clamp(18px,2vw,24px);background:var(--ivory)}
.pcard--sm h3{font-size:1.16rem}
.pcard--sm>p{font-size:.93rem}
.pcard--sm .pcard__more{font-size:.82rem}
@media(max-width:820px){
  .ladder__pair{grid-template-columns:1fr}
}
@media(max-width:560px){
  .ladder__small{grid-template-columns:1fr}
}
/* RETIRED 2026-08-31 with the wide lead card it styled. Kept only as the light
   variant hook below still names it; delete both together. */
.pcard--lead{border-top-color:var(--gold);background:linear-gradient(180deg,#fff 0%,var(--ivory) 100%);
  box-shadow:var(--sh-md);padding:clamp(30px,3.4vw,46px) clamp(28px,3.2vw,44px)}
.pcard--lead h3{font-size:clamp(1.75rem,2.6vw,2.35rem);margin:6px 0 2px}
.pcard--lead>p{font-size:clamp(1.02rem,1.25vw,1.16rem);color:var(--ink-soft);max-width:62ch;flex:none}
.pcard--lead .pcard__plus{font-size:.98rem;color:var(--muted);max-width:62ch;
  border-left:3px solid var(--sage-soft);padding-left:16px;margin-top:14px}
.pcard--lead .pcard__more{color:var(--gold-d)}
.pcard--lead:hover{border-top-color:var(--gold-d)}
.v-light .pcard--lead{border-top-color:var(--teal)}
@media(max-width:760px){.ladder__small{grid-template-columns:1fr}}
.pcard{display:flex;flex-direction:column;gap:8px;background:var(--paper);border:1px solid var(--line);padding:30px 26px;color:var(--ink);transition:.3s;position:relative;border-top:3px solid transparent}
.pcard:hover{text-decoration:none;transform:translateY(-4px);box-shadow:var(--sh-md);border-top-color:var(--green)}
.pcard--flag{border-top-color:var(--green);box-shadow:var(--sh)}
.pcard__tag{font-size:.84rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--gold-d)}
.pcard h3{font-size:1.42rem;margin:4px 0;font-weight:500}
.pcard p{color:var(--muted);font-size:.98rem;margin:0;flex:1}
.pcard__more{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.88rem;letter-spacing:.05em;text-transform:uppercase;color:var(--green);margin-top:12px;transition:.2s}
.pcard:hover .pcard__more{gap:11px}
@media(max-width:980px){.ladder{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ladder{grid-template-columns:1fr}}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.step{position:relative;padding-top:16px;border-top:1px solid rgba(154,164,138,.4)}
.step__n{font-family:var(--ff-d);font-size:3.4rem;color:var(--sage);font-weight:500;display:block;margin-bottom:8px;line-height:1}
.band--brand .step p,.step--light p{color:#d3d9c6}
.step h3{margin-bottom:.4em;font-size:1.6rem;font-weight:500}
.step--light h3{color:#fff}
@media(max-width:820px){.steps{grid-template-columns:1fr;gap:32px;max-width:540px;margin-inline:auto}}

/* ---------- split ---------- */
/* 🔴 THE PICTURE FILLS ITS HALF. Tiffany, 2026-08-31, with two screenshots: "places
   where images are by content, they need to be proportional. The images need to be
   sized half frame with content half frame."
   The columns were already half and half, but the photograph inside its column was
   locked to 3:2 and vertically centred, so beside a tall block of copy it floated in
   the middle of a mostly empty column. On the service pages that was 300px of nothing
   above the picture and 300px below it. Now the row stretches, the figure fills the
   column, and the image takes whatever height the copy beside it takes.
   🔴 THE CAP IS NOT DECORATION. Without max-height a very long checklist (the
   who-this-is-for section runs to nine items) would stretch a 3:2 photograph into a
   portrait and crop straight through the faces, which is the fault Tiffany reported
   three times on the hero. Past the cap the picture stops growing and centres. */
/* 🔴 REBALANCED 2026-09-02, and this is a PROPAGATION that should have happened on
   2026-08-28. Tamara asked that day for the photograph to be LARGER, "taking up
   approximately half of the relevant space so the layout feels balanced". That fix was
   built as .split--big and the comment beneath it says, in plain sight, "Only the home
   page uses this." Every interior page kept the small centred figure, and
   feedback_update_one_update_everywhere exists for exactly this.
   Tiffany today: "these images are not equal spaces against content and loo kto small!
   ive told you shis and im getting frustrated."

   MEASURED BEFORE, all 30 pages, picture height as a fraction of the copy block beside
   it: 18 of 36 two-ups came in under 0.62 and most sat at 0.46 to 0.55. The picture was
   literally half the visual mass of its own paragraph.

   Three changes, in the order that matters:
   1. THE MEDIA COLUMN BLEEDS to the viewport edge. A landscape photograph inside a
      half of a 1200px wrap physically CANNOT reach the height of a 700px column of
      type without being cropped to a portrait, which is the thing that got rejected
      last week. Width is the only lever that does not crop. The bleed buys ~120px at
      1440 and much more on a wide screen.
   2. It takes the LARGER share, 1.14fr against .86fr, which is the .split--big
      proportion Tamara asked for, now everywhere instead of on one page.
   3. It STRETCHES to the height of the copy, bounded so the frame can never become
      taller than 1.3x its own width. The bound is the whole point: without it this is
      the 490x640 portrait box from this morning. */
.split{overflow-x:clip}          /* the bleed below, contained. clip not hidden, so sticky still works */
.split__in{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(34px,5vw,72px);align-items:stretch}
/* the distance from the wrap's content edge to the viewport edge, which is exactly how
   far the picture has to travel to bleed off the page. Named once here because it is
   written four times below and drifted the last time something like it was inlined. */
:root{--bleed:calc((100vw - min(var(--maxw), 100vw))/2 + clamp(22px,5.5vw,72px))}
/* 🔴 REVERTED, and the failed attempt is worth keeping. Trying to make the bleed
   scrollbar-aware by redefining it from the section's own 100% BROKE it: min() cannot
   compare a px max-width against a percentage that resolves later, and the measured
   result was a picture that no longer reached the edge at all (edgeL 93 instead of -20)
   AND a frame squeezed to a 1.01 ratio. 100vw includes the scrollbar, so the outer
   ~15px of each picture sits under it. On a 1047px frame that is 1.4 percent and no
   face goes near it. overflow-x:clip on the section keeps it from producing a
   horizontal scrollbar. Verified, not assumed: 0 pages report overflow at any width. */
.split__media{display:flex;margin-inline-end:calc(-1 * var(--bleed))}
.split--rev .split__in{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)}
.split--rev .split__media{order:-1;margin-inline-end:0;
  margin-inline-start:calc(-1 * var(--bleed))}
/* height:100%, not flex stretch. align-items:center is what keeps the picture
   centred once the cap bites, and centring cancels stretching, so the height has to
   be asked for explicitly. It resolves against the media column, which the grid row
   has already stretched to the height of the copy beside it. */
/* 🔴 margin:0 is doing real work. <figure> carries a browser default of 40px left
   and right, so the picture was sitting 80px narrower than its own column and
   off-centre inside it, which is half of why it did not read as half the frame. */
/* 🔴 THE STRETCH IS OFF, 2026-09-02, and this is the SECOND copy of a rule that was
   already fixed once. `.figph img` above was set to 3:2 in August with the comment
   "so a figure frame does not cut a third off them". This block then overrode it with
   height:100% + flex:1, which is a stretch to whatever the copy column happens to be,
   and the max-height cap was written against the VIEWPORT (50vw = 720px at 1440) when
   the thing it needed to bound was the COLUMN. Measured on /asset-protection/: a 3:2
   landscape rendering at 490x640, a portrait box, with half the frame thrown away and
   a head cut at the right edge. Tiffany: "the images are weird."
   🔴 The photographs this firm owns are ALL landscape. Any slot that can become taller
   than it is wide will crop them, whatever cap sits on it. So the ratio is fixed and
   the picture centres in its column; the copy beside it is simply taller, which is
   what an editorial two-up looks like. This is the same lesson as the 3:4 city slot on
   2026-09-01: when the picture keeps looking wrong, the SLOT is wrong, not the picture.
   .split--big below keeps its stretch on purpose. Tamara asked for that one. */
/* 🔴 STRETCHED TO THE COPY, with a hard bound on how tall the frame may become.
   This morning's version aligned the picture to the TOP at a fixed 3:2, which fixed the
   crop and made the imbalance worse: a 352px picture beside a 725px paragraph with 370px
   of nothing under it. "not equal spaces against content and loo kto small".
   Now the figure runs the full height of the copy block, so the top and bottom edges of
   the two columns line up exactly, which is what "equal spaces" means here.
   🔴 THE max-height IS THE GUARD, not a nicety. Without it this is the 490x640 portrait
   box from this morning all over again. 40vw against a media column that is roughly
   52vw wide holds the frame at about 1.3 times wider than tall, so the crop off a 3:2
   original is about 13 percent of the width and no face goes near an edge. The 620px
   ceiling stops a very wide screen turning the picture into a billboard. */
.split__media{align-items:stretch}
.split__media .figph{width:100%;margin:0;align-self:stretch;display:flex;
  max-height:clamp(340px,44vw,620px)}
.split__media .figph img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
/* the city portraits are cut 3:4 on purpose and keep their shape */
.split__media .figph--city img{aspect-ratio:3/4}
.split__copy{align-self:center}
/* 🔴 2026-08-28: Tamara asked for the photograph of the three of them to be LARGER,
   "taking up approximately half of the relevant space so the layout feels balanced".
   It was nominally half already, but a 3:2 figure in a centred half column reads
   smaller than the block of type beside it. The media column now takes the larger
   share and the figure stretches to the height of the copy, so the picture is the
   thing you see first. Only the home page uses this. */
/* 🔴 THE HOME PAGE SPLIT DOES NOT BLEED, and leaving it out of that rule was a real
   break, not a nicety. The bleed added on 2026-09-02 sets margin-inline-end on EVERY
   .split__media. --big puts the picture on the LEFT, so a negative right margin pulls
   its edge INTO the copy column: measured on the live home page, the photograph ended
   at 966px and the text began at 856px, so 110px of the paragraph sat on top of the
   partners. Tiffany saw it before the audit did, because the audit measured picture
   height against copy height and never asked whether the two columns TOUCH.
   check_widths.py now asserts they do not. */
.split--big .split__media{margin-inline-start:0;margin-inline-end:0}
.split--big .split__in{grid-template-columns:1.2fr .8fr;align-items:stretch}
.split--big .split__media{display:flex}
.split--big .split__media .figph{width:100%;display:flex;flex-direction:column}
.split--big .split__media .figph img{flex:1;height:100%;aspect-ratio:auto;min-height:clamp(340px,34vw,560px)}
.split--big .split__copy{align-self:center}
@media(max-width:880px){
  .split--big .split__in{grid-template-columns:1fr}
  .split--big .split__media .figph img{min-height:0;aspect-ratio:3/2}
}
.split__copy h2{margin-bottom:.5em}
/* 🔴 One column, because the photograph that used to sit beside this came off on
   2026-09-01. The measure is capped rather than left to fill .wrap: prose set to 1200px
   is unreadable, and this audience is 55 to 75. The button keeps its own line. */
.split--solo .split__in{grid-template-columns:1fr}
.split--solo .split__copy{max-width:68ch;align-self:start}
/* balance keeps a script accent in the narrow editorial column from orphaning its last
   word ("a firm that / stays"), which is what the first build did. */
.edit__side h2{text-wrap:balance}
.edit__side h2 em{font-size:1.22em}

@media(max-width:880px){
  .split__in,.split--rev .split__in{grid-template-columns:1fr;gap:36px;align-items:start}
  .split__media{order:-1;max-width:560px}
  /* 🔴 THE BLEED IS OFF BELOW THE TWO-COLUMN BREAKPOINT. Stacked, a picture that runs
     off the right edge and stops flush against the left margin does not read as a
     full-bleed, it reads as a broken image. Measured at 500px before this line was
     added: the frame sat hard against the right edge of the phone with a 22px gutter
     on the left. Both directions, because --rev sets the other margin. */
  .split__media,.split--rev .split__media{margin-inline-end:0;margin-inline-start:0}
  /* stacked, there is no copy beside it to match, so the photograph goes back to
     its own shape rather than to a height borrowed from nothing */
  .split__media .figph{max-height:none;align-self:auto}
  .split__media .figph img{flex:none;height:auto;min-height:0;aspect-ratio:3/2}
}

/* photo placeholders - warm, framed, prominent (references are photo-forward) */
.ph{position:relative;background:linear-gradient(150deg,var(--cream),var(--cream-d));border:1px solid var(--sage-soft);display:flex;align-items:center;justify-content:center;min-height:380px;overflow:hidden}
.ph::before{content:"";position:absolute;inset:14px;border:1px solid rgba(124,138,77,.4);pointer-events:none}
.ph--tall{min-height:clamp(380px,48vw,540px)}
.ph--portrait{min-height:340px;aspect-ratio:4/5}
.ph span{opacity:.5}
.ph::after{content:attr(data-note);position:absolute;bottom:16px;left:16px;right:16px;text-align:center;font-size:.72rem;color:var(--green);font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:rgba(251,249,241,.8);padding:5px 9px}

/* ---------- workshop cta on home ---------- */
.workshop-cta__in{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.nextup{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--green);padding:38px 40px;text-align:center;max-width:760px;margin:0 auto;box-shadow:var(--sh-md)}
.nextup__brand{display:block;font-size:.82rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-bottom:10px}
.nextup h3{font-size:clamp(1.45rem,2.4vw,1.9rem);margin:0 0 .5rem}
.nextup__hook{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--ink-soft);margin:0 0 1.1rem}
.nextup__soon{font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:0}
@media(max-width:600px){.nextup{padding:28px 22px}}
.workshop-cta__hook{font-family:var(--serif);font-size:1.22rem;line-height:1.45;color:var(--ink);margin:.35rem 0 .9rem;font-style:italic}
.workshop-cta__card{background:var(--paper);border:1px solid var(--line);padding:34px 36px;box-shadow:var(--sh-md);border-top:4px solid var(--green)}
.workshop-cta__free{display:inline-block;background:var(--green);color:#fff;font-size:.84rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:6px 14px;margin-bottom:16px}
.workshop-cta__card ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.workshop-cta__card li{display:flex;gap:11px;align-items:flex-start;font-size:1rem;color:var(--ink-soft)}
.workshop-cta__card li svg{color:var(--green);flex:none;margin-top:2px}
@media(max-width:880px){.workshop-cta__in{grid-template-columns:1fr;gap:30px}}

/* =====================================================================
   SHOWPIECE LAYER
   Cinematic hero, scroll choreography, pinned strategy, lit statement type.
   Everything here is additive and self-disabling: no JS or
   prefers-reduced-motion means every element renders in its final state.
   Body copy size, contrast and tap targets are untouched, because the
   reader is 55 to 75.
   ===================================================================== */

/* --- reading-progress hairline, sits on the sticky nav --- */
.prog{position:fixed;top:0;left:0;height:1px;width:100%;z-index:190;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold),var(--gold-l));pointer-events:none;will-change:transform}
.v-light .prog{background:linear-gradient(90deg,var(--teal),var(--blue-l))}

/* --- film grain + vignette, applied to the cinematic surfaces --- */
.grainy::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.vignette::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 42%,rgba(9,14,7,.42) 100%)}
.v-light .vignette::before{background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(9,14,7,.20) 100%)}

/* --- cinematic hero --- */
body:not(.v-light) .hero--cinema{min-height:100svh}
.hero--cinema .hero__bg img{animation:kb 40s ease-out forwards}
/* the cinematic hero is a single composed screen: the crest, the promise, the
   proof and both calls to action all sit above the fold together */
.hero--cinema .hero__title{font-size:clamp(2.5rem,4.35vw,3.85rem);line-height:1.04;margin-bottom:.55rem}
.hero--cinema .hero__tagline{font-size:clamp(1.2rem,1.9vw,1.42rem);margin-bottom:.9rem}
.hero--cinema .hero__lead{font-size:1.05rem;line-height:1.62;max-width:50ch;margin-bottom:1.5rem}
.hero--cinema .hero__rule{margin-bottom:1.2rem}
.hero--cinema .hero__crest{margin-bottom:16px}
.hero--cinema .hero__kicker{margin-bottom:1rem}
@keyframes kb{from{transform:scale(1.14)}to{transform:scale(1.01)}}
.hero__rule{display:block;height:1px;width:0;background:linear-gradient(90deg,var(--gold-l),rgba(216,184,119,0));
  margin:0 0 1.5rem;transition:width 1.3s cubic-bezier(.16,.7,.25,1) .35s}
.in .hero__rule,.hero--cinema.in .hero__rule{width:min(320px,52%)}
.v-light .hero__rule{background:linear-gradient(90deg,var(--teal),rgba(87,124,147,0))}
.hero__cue{position:absolute;left:50%;bottom:18px;z-index:4;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:9px;color:rgba(255,255,255,.9);font-family:var(--ff-b);font-size:.8rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase}
.hero__cue i{display:block;width:1px;height:44px;background:linear-gradient(180deg,rgba(255,255,255,.7),transparent);
  animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.35);opacity:.45;transform-origin:50% 0}50%{transform:scaleY(1);opacity:1;transform-origin:50% 0}}
.v-light .hero__cue{color:var(--green)}
.v-light .hero__cue i{background:linear-gradient(180deg,rgba(65,87,63,.85),transparent)}
@media(max-width:880px){.hero__cue{display:none}}

/* --- word-mask headline reveal. Words are wrapped in place, so <em>, italics
       and punctuation keep their exact position and styling. The padding /
       negative-margin pair keeps descenders from being clipped by the mask. --- */
.wm{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.16em;margin-bottom:-.16em}
/* Parisienne's descenders are far longer than Prata's, so a mask cut for the serif
   clips the tail off every g and y in the script accent. Measured against the live
   hero, not guessed. */
em .wm{padding-bottom:.34em;margin-bottom:-.34em}
/* 🔴 2026-09-01, and this is the ACTUAL cause of "some places the fonts are cut".
   The padding/negative-margin pair above is a guess at how far Parisienne descends and
   it is not enough: the y and f tails in a script accent were still being sliced off
   flat by the mask's own overflow:hidden. Proved by setting overflow:visible on the
   masks in the live DOM, at which point both tails completed.
   🔴 The mask exists ONLY to hide words while they slide up into place. Once the reveal
   has run, clipping the headline serves no purpose and can only ever cut a descender.
   So the script opens the masks when the last word's transition has finished, and this
   is what actually guarantees no glyph is ever cut, at any font size, on any heading,
   rather than another guess at a padding value. The padding stays: it is what keeps the
   tails whole DURING the 1.25s the mask is still closed. */
.wm-open .wm{overflow:visible}
.wm>b{display:inline-block;font-weight:inherit;font-style:inherit;
  transition:transform 1.25s cubic-bezier(.22,.61,.24,1),opacity .95s ease;
  transition-delay:calc(var(--i,0) * 55ms)}
/* .armed is added by the script only when it has a working observer to un-hide with */
[data-lines].armed .wm>b{transform:translateY(112%);opacity:0}
[data-lines].armed.in .wm>b,.in [data-lines].armed .wm>b{transform:none;opacity:1}

/* --- generic scroll choreography, opt in with data-anim --- */
.reveal-on [data-anim]{opacity:0;will-change:transform,opacity;
  transition:opacity 1.3s cubic-bezier(.22,.61,.24,1),transform 1.45s cubic-bezier(.22,.61,.24,1),clip-path 1.6s cubic-bezier(.22,.61,.24,1),filter 1.2s ease}
.reveal-on [data-anim="up"]{transform:translateY(30px)}
.reveal-on [data-anim="right"]{transform:translateX(-34px)}
.reveal-on [data-anim="left"]{transform:translateX(34px)}
.reveal-on [data-anim="scale"]{transform:scale(.94)}
.reveal-on [data-anim="blur"]{filter:blur(9px);transform:translateY(18px)}
.reveal-on [data-anim="clip"]{clip-path:inset(0 0 100% 0)}
.reveal-on [data-anim].in{opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0)}

/* =====================================================================
   SLOW DRIFT ON THE WIDE PHOTOGRAPHS (2026-08-31)
   Tiffany: "we need more motion, animation and beauty on the pages. Think P Allen
   Smith." His register is the opposite of busy: enormous photographs, enormous
   space, and the picture moving a little slower than the page it sits in. That is
   all this is. The image is oversized inside its own frame and the script nudges it
   a few percent against the scroll, so a divider breathes as it passes instead of
   sliding by like wallpaper.
   🔴 THE FRAME CLIPS AND THE IMAGE IS OVERSIZED, in that order. Without the extra
   height the drift would expose a bare edge at the top or bottom of every band.
   🔴 --p is set by the script and defaults to 0, so with no JavaScript, on a
   throttled tab, or under prefers-reduced-motion, the picture simply sits still and
   nothing is hidden or half-drawn.
   ===================================================================== */
/* 🔴 THE DIVIDERS ONLY, not the photo band. The band's picture is deliberately inset
   from the page edges by its own margin, and scaling it up inside a full-width
   section would push it past that inset and clip it at the window instead. The
   dividers are genuinely edge to edge, so there is nothing to break. */
/* 🔴 clip, NOT hidden, and this is the whole reason the parallax did nothing at
   first. overflow:hidden makes an element a SCROLL CONTAINER even though it can
   never be scrolled by a user, so the view() timeline attached to the image found
   its nearest scrollport was this div, which never moves, and sat inactive at
   progress zero forever. overflow:clip clips without creating a scroll container,
   so the timeline resolves against the page. hidden first for anything too old to
   know clip. */
.sdiv{overflow:hidden;overflow:clip}
.sdiv img{will-change:transform}
.drift-on .sdiv img{transform:translate3d(0,calc(var(--p,0) * 1%),0) scale(1.14);
  transform-origin:center}
/* 🔴 WHERE THE BROWSER CAN DO THIS ITSELF, LET IT. A scroll-driven animation runs on
   the compositor: no scroll handler, no layout read per frame, and it stays smooth on
   a phone in a way a JavaScript parallax never quite does. The JS above is the
   fallback for browsers without view() timelines, and the two do not fight: an
   animation beats a plain declaration, so where this applies it simply wins.
   Same six percent either way, so both paths look identical. */
@supports (animation-timeline: view()){
  .drift-on .sdiv img{animation:sdiv-drift linear both;animation-timeline:view();
    animation-range:cover 0% cover 100%}
  @keyframes sdiv-drift{
    from{transform:translate3d(0,-6%,0) scale(1.14)}
    to{transform:translate3d(0,6%,0) scale(1.14)}
  }
}
@media(prefers-reduced-motion:reduce){
  .drift-on .sdiv img{transform:none;animation:none}
}

/* --- photo mask reveal + slow drift inside the frame --- */
.figph{--mask:inset(0 0 100% 0)}
.reveal-on .figph img{clip-path:var(--mask);transform:scale(1.12);
  transition:clip-path 1.7s cubic-bezier(.22,.61,.24,1),transform 3s cubic-bezier(.22,.61,.24,1)}
.reveal-on .figph.in img{clip-path:inset(0 0 0 0);transform:scale(1)}
.figph{transition:box-shadow .5s ease}
.figph:hover{box-shadow:var(--sh-md)}

/* --- statement type that lights up as it scrolls --- */
.lit .w{color:rgba(255,255,255,.20);transition:color .45s ease,text-shadow .45s ease}
.lit .w.on{color:#fff}
.lit em .w.on{color:var(--gold-l)}
.v-light .lit em .w.on{color:#f0e3c6}

/* --- scroll-pinned Three Step Strategy --- */
/* =====================================================================
   THE THREE STEPS AS A SEQUENCE (2026-08-28)
   Tamara asked for arrows and a visible progression instead of three numbers
   that were hard to pick out, with short text and the detail one click away.
   The arrow is a real element between the cards on desktop and rotates to point
   downwards when the row stacks, so the order still reads on a phone.
   ===================================================================== */
.flowsec{padding-block:clamp(64px,7vw,104px)}

/* =====================================================================
   THE THREE STEPS AS A PLOTTED GRAPH (2026-08-31)
   Tamara: "the three step strategy, she wants it to look like a graph of some
   sort, and make it super fancy, interactive." So it is a real chart. Time runs
   left to right, from the first conversation to the day the family needs the
   plan; the vertical axis is how ready that family is; the curve only rises
   because somebody keeps working on it, which is the argument the section is
   making in words anyway.

   🔴 THE SVG STRETCHES (preserveAspectRatio:none) AND THE NODES ARE PERCENTAGES
   OF THE SAME BOX. That is what keeps a plotted point sitting exactly on the
   curve at every width without any JavaScript measuring anything. The stroke is
   held at a real width by vector-effect:non-scaling-stroke; without it the line
   would be squashed with the box.
   🔴 The graph is DECORATION FOR THE SIGHTED. Every word in it also exists in
   the panels underneath, so below 820px the whole plot is display:none and the
   three panels simply stack. Nothing is lost on a phone and nothing is lost to
   a screen reader.
   ===================================================================== */
.arcx{margin-bottom:clamp(26px,3.2vw,44px)}
.arcx__graph{display:block;margin-bottom:clamp(20px,2.6vw,34px)}
.arcx__xlab{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:var(--muted);margin:0;
  display:flex;justify-content:space-between;gap:16px;padding-top:14px;max-width:none}
.arcx__xlab i{font-style:normal}

/* the plot is one grid so the bars, the ladder over their tops and the baseline all
   agree at every width. --plot is the bar area; the labels sit under the baseline. */
.arcx__plot{position:relative;--plot:clamp(200px,22vw,300px);--pad:clamp(0px,2vw,40px);
  padding:0 var(--pad)}
.arcx__bars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,3vw,48px);
  position:relative;z-index:1}
/* the baseline. It is the only axis on this chart and it is the honest one: the
   horizontal axis is time, and time is the one thing here that was not invented. */
.arcx__bars::after{content:"";position:absolute;left:0;right:0;top:var(--plot);
  height:1px;background:var(--line)}
.arcx__bar{display:grid;grid-template-rows:var(--plot) auto;align-items:end;
  background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit;text-align:center}
.arcx__col{position:relative;height:var(--h);align-self:end;
  background:var(--cream);border:1px solid var(--line);border-bottom:0;
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .95s cubic-bezier(.22,.61,.24,1) var(--d,0s),
             background .3s ease,border-color .3s ease}
.arcx.is-in .arcx__col{transform:scaleY(1)}
/* the number rides at the top of its own bar, and is counter-scaled so it does not
   stretch with the grow animation */
.arcx__num{position:absolute;top:14px;left:50%;transform:translateX(-50%);
  font-family:var(--ff-d);font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1;
  color:#fff;transition:color .3s ease}
.arcx__lab{display:grid;gap:3px;padding-top:16px}
.arcx__lab b{font-family:var(--ff-d);font-weight:400;font-size:clamp(1rem,1.3vw,1.22rem);
  color:var(--green-d);line-height:1.2}
.arcx__lab i{font-style:normal;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
.arcx__bar:hover .arcx__col,.arcx__bar:focus-visible .arcx__col,
.arcx__bar[aria-expanded="true"] .arcx__col{
  background:var(--step);border-color:var(--step)}
.arcx__bar[aria-expanded="true"] .arcx__lab i{color:var(--green-d)}
.arcx__bar:focus-visible{outline:2px solid var(--blue-btn);outline-offset:8px}

/* ---- THREE STEPS, THREE BRAND COLOURS, ON WHITE. Rewritten 2026-09-02 ---------
   Tiffany: "make the graph colors more bold in a white background maybe? it needs to
   pop more". The two halves of that are one change. The chart sat on the dark olive
   band, and everything about its colour was a consequence of that: the fills had to be
   PALE TINTS to be visible at all, which is why the bars read as three shades of
   nothing. Move the band to white and the bars can carry the exact brand hexes at full
   strength instead of tints of them.
     1 create   -> BRAND GREEN  #797a68
     2 keep     -> BRAND BLUE   #577c93   (Jennifer Dudley, 8/17, "a modern pop of blue")
     3 use it   -> BRAND KHAKI  #877d69
   These are three of the six hexes Krystyn sent. Nothing invented, nothing tinted.
   🔴 CONTRAST, CALCULATED, and the comment this replaced warned in writing not to
   restate ratios from memory, so these came out of a luminance calculation today:
   bar against the white band 4.38 / 4.46 / 4.06, and the WHITE numeral on each bar
   4.38 / 4.46 / 4.06. The numeral is clamp(1.5rem,2.4vw,2.1rem) display type, which is
   large text at a 3:1 threshold, so all three clear it with room. The numeral had to
   flip from dark to white when the fills went solid; on the old pale tints it was the
   other way round.
   🔴 The band itself changed in _gen.py from band--brand to band--paper, and the eyebrow
   and the button with it. If this ever goes back to a dark band, every colour in this
   block has to be recalculated, not just swapped. */
.flowsec .arcx__bar:nth-child(1){--step:#797a68}   /* brand green */
.flowsec .arcx__bar:nth-child(2){--step:#577c93}   /* brand blue */
.flowsec .arcx__bar:nth-child(3){--step:#877d69}   /* brand khaki */
.flowsec .arcx__col{background:var(--step);border:1px solid var(--step);border-bottom:0}
/* a darker cap so the three read apart at a glance and the bar has a top edge */
.flowsec .arcx__col::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;
  background:var(--step);filter:brightness(.78)}
.flowsec .arcx__num{color:#fff}
.flowsec .arcx__bar:hover .arcx__col,
.flowsec .arcx__bar:focus-visible .arcx__col,
.flowsec .arcx__bar[aria-expanded="true"] .arcx__col{
  background:var(--step);border-color:var(--step);filter:brightness(.88)}
.flowsec .arcx__bar:hover .arcx__num,
.flowsec .arcx__bar[aria-expanded="true"] .arcx__num{color:#fff}
.flowsec .arcx__bar[aria-expanded="true"] .arcx__lab i{color:var(--step)}
/* the open panel is tied to its bar by colour. On white the step hexes carry straight
   through at full strength: 4.38 / 4.46 / 4.06 against the band, and this numeral is
   the largest type on the chart. */
.flowsec .arcx__panel:nth-child(1) .arcx__pn{color:#797a68}
.flowsec .arcx__panel:nth-child(2) .arcx__pn{color:#577c93}
.flowsec .arcx__panel:nth-child(3) .arcx__pn{color:#877d69}
/* 🔴 The colour-mix @supports fallback that used to sit here is GONE with the thing it
   guarded. The old fills were gradients built with color-mix over a dark band and
   needed a non-mix backup; the new ones are a flat brand hex, which every browser has
   always understood. --stepf is gone too. If a gradient ever comes back here, the
   fallback comes back with it. */

/* 🔴 the ladder: a stepped line across the tops of the bars, drawn on scroll by the
   same clip wipe the curve used. It sits BEHIND the bars on purpose, so the step
   reads as the connection between them rather than as a rail in front. Its
   coordinates and the bar heights are two views of the same three numbers. */
/* 🔴 width is COMPUTED, not `auto`. With left+right+height and width:auto the box
   collapsed and the staircase drew at a quarter size in the corner. The pad is the
   same clamp .arcx__plot uses; change one and change the other. */
.arcx__svg{position:absolute;top:0;left:var(--pad);width:calc(100% - var(--pad) * 2);
  height:var(--plot);overflow:visible;z-index:2;pointer-events:none}
.arcx__line{fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:square;opacity:.9}
.arcx__wipe{transform:scaleX(0);transform-box:fill-box;transform-origin:left center;
  transition:transform 1.6s cubic-bezier(.22,.61,.24,1)}
.arcx.is-in .arcx__wipe{transform:scaleX(1)}

/* one panel at a time under the chart, all of them stacked on a phone. The stack is
   position:relative + absolute siblings so the box does not jump height between
   steps of different lengths. */
.arcx__panels{position:relative;min-height:var(--panelh,150px)}
.arcx__panel{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,1.8vw,24px);
  align-items:start;max-width:70ch;margin-inline:auto;
  position:absolute;inset:0;opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .38s ease,transform .38s cubic-bezier(.22,.61,.24,1)}
.arcx__panel.is-on{opacity:1;transform:none;pointer-events:auto}
.arcx__pn{font-family:var(--ff-d);font-size:clamp(2.4rem,4vw,3.4rem);line-height:.9;
  color:var(--sage);opacity:.92}
.arcx__panel h3{font-family:var(--ff-d);font-weight:400;color:var(--green-d);margin:0 0 2px;
  font-size:clamp(1.32rem,1.9vw,1.7rem)}
.arcx__panel p{color:var(--ink-soft);margin:0;font-size:1rem;line-height:1.7}
.arcx__when{font-size:.76rem!important;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.55)!important;margin:0 0 8px!important}

/* 🔴 Below 820px the plot goes and the panels become a plain numbered list. A
   three-point chart across a 360px screen is three overlapping labels, and the
   words matter more than the picture of them. */
@media(max-width:820px){
  .arcx__graph{display:none}
  .arcx__panels{min-height:0}
  .arcx__panel{position:static;opacity:1;transform:none;pointer-events:auto;
    margin-inline:0;padding-bottom:clamp(18px,3vw,26px)}
  .arcx__panel + .arcx__panel{border-top:1px solid var(--line);
    padding-top:clamp(18px,3vw,26px)}
}
@media(prefers-reduced-motion:reduce){
  .arcx__wipe{transition:none;transform:none}
  .arcx__col{transition:none;transform:scaleY(1)}
  .arcx__panel{transition:none}
}

.stepspin{position:relative;padding:0;overflow:clip}
.stepspin__track{height:340vh}
.stepspin__stick{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.stepspin__in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,6vw,90px);align-items:center;width:100%}
.stepspin__head h2{font-size:clamp(2.2rem,4.4vw,3.4rem);margin-bottom:.5em}
.stepspin__rail{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:2px}
.stepspin__rail li{display:flex;gap:14px;align-items:center;padding:12px 0;position:relative;
  font-family:var(--ff-b);font-size:.92rem;letter-spacing:.02em;color:rgba(233,238,222,.42);transition:color .4s ease}
.stepspin__rail li::before{content:"";width:26px;height:1px;background:currentColor;flex:none;transition:width .5s ease}
.stepspin__rail li[data-on="1"]{color:#fff}
.stepspin__rail li[data-on="1"]::before{width:52px;background:var(--gold-l)}
.stepspin__stage{position:relative;min-height:clamp(340px,42vh,430px)}
.spanel{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .8s cubic-bezier(.16,.7,.25,1);pointer-events:none}
.spanel[data-on="1"]{opacity:1;transform:none;pointer-events:auto}
.spanel__n{font-family:var(--ff-d);font-size:clamp(5rem,13vw,10rem);line-height:.8;color:transparent;
  -webkit-text-stroke:1px rgba(216,184,119,.55);margin-bottom:.12em;display:block}
.spanel h3{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:500;color:#fff;margin-bottom:.4em}
.spanel p{font-size:1.14rem;line-height:1.68;color:#d3d9c6;max-width:52ch;margin:0}
.v-light .spanel__n{-webkit-text-stroke-color:rgba(255,255,255,.5)}
/* no pinning on short or touch-first screens: everything stacks and stays readable */
@media(max-width:920px),(max-height:640px){
  .stepspin__track{height:auto}
  .stepspin__stick{position:static;height:auto;padding-block:clamp(60px,8.5vw,116px)}
  .stepspin__in{grid-template-columns:minmax(0,1fr);gap:34px}
  .stepspin__rail{display:none}
  .stepspin__stage{position:static;min-height:0;display:grid;gap:40px}
  .spanel{position:static;opacity:1;transform:none;pointer-events:auto}
  .spanel__n{font-size:4.2rem}
}

/* --- credential marquee ribbon --- */
.dead--ribbon-removed-20260819{background:var(--green-dd);color:var(--sage-soft);padding:15px 0;overflow:hidden;
  border-block:1px solid rgba(216,184,119,.20)}
.v-light .ribbon{background:var(--cream-d);color:var(--green-d);border-color:var(--line)}
.ribbon__row{display:flex;width:max-content;animation:slide 72s linear infinite}
.ribbon:hover .ribbon__row{animation-play-state:paused}
.ribbon__set{display:flex;align-items:center;flex:none}
.ribbon__set span{display:inline-flex;align-items:center;gap:16px;padding:0 30px;white-space:nowrap;
  font-family:var(--ff-b);font-size:.76rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase}
.ribbon__set span::after{content:"";width:5px;height:5px;transform:rotate(45deg);background:var(--gold);flex:none}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- button + card micro-interactions --- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;transform:translateY(101%);
  transition:transform .42s cubic-bezier(.16,.8,.24,1)}
.btn--solid::after,.btn--gold::after,.btn--goldsolid::after{background:var(--green-dd)}
.v-light .btn--goldsolid::after,.v-light .btn--solid::after{background:var(--blue-btn-d)}
.btn--outline::after,.btn--ghost::after,.btn--line-l::after{background:var(--green)}
.btn--ghost-l::after{background:#fff}
.btn:hover::after{transform:translateY(0)}
.btn--outline:hover,.btn--ghost:hover,.btn--line-l:hover{color:#fff}
.btn--ghost-l:hover{color:var(--green-d)}
.pcard,.ev,.scard,.wcard,.loccard{position:relative;overflow:hidden}
.pcard::after,.ev::after{content:"";position:absolute;top:0;left:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-l));transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s cubic-bezier(.16,.8,.24,1)}
.pcard:hover::after,.ev:hover::after{transform:scaleX(1)}

/* --- counters keep their box so nothing shifts while they run --- */
.hstat strong{font-variant-numeric:tabular-nums}

/* --- honour the user's motion setting: show everything, animate nothing --- */
@media(prefers-reduced-motion:reduce){
  .hero--cinema .hero__bg img,.hero__cue i,.ribbon__row{animation:none!important}
  .reveal-on [data-anim],[data-lines].armed .wm>b,.reveal-on .figph img{opacity:1!important;transform:none!important;
    clip-path:none!important;filter:none!important;transition:none!important}
  .hero__rule{width:min(320px,52%);transition:none}
  .lit .w{color:#fff}
  .stepspin__track{height:auto}
  .stepspin__stick{position:static;height:auto;padding-block:90px}
  .stepspin__stage{position:static;display:grid;gap:40px;min-height:0}
  .spanel{position:static;opacity:1;transform:none}
  .prog{display:none}
}

/* ---------- newsletter capture + the /join/ QR landing page ---------- */
.nl{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,6vw,80px);align-items:center}
.nl__pts{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:12px}
.nl__pts li{display:flex;gap:12px;align-items:flex-start;font-size:1rem;color:var(--ink-soft)}
.nl__pts svg{color:var(--green);flex:none;margin-top:3px}
.nl__form{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--green);
  padding:clamp(28px,3.4vw,40px);display:grid;gap:16px;box-shadow:var(--sh-md)}
.nl__form label{display:grid;gap:7px;font-family:var(--ff-b);font-size:.86rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.nl__form input{font:inherit;font-size:1rem;letter-spacing:0;text-transform:none;padding:.95em 1em;
  border:1px solid var(--line);background:var(--ivory);border-radius:0;color:var(--ink)}
.nl__form input:focus{outline:2px solid var(--green);outline-offset:1px;background:#fff}
.nl__fine{font-size:.86rem;color:var(--ink-soft);margin:0;max-width:none;line-height:1.55}
.v-light .nl__form{border-top-color:var(--teal)}
/* 2026-09-28 lead forms -> Leadli: status line, thank-you state, invalid field */
.lead-msg{font-size:.9rem;color:var(--ink-soft);margin:0;line-height:1.5}
.lead-done{font-size:1.08rem;line-height:1.55;color:var(--ink);margin:0;outline:none}
form.is-done{display:flex;align-items:center}
form[data-lead] [aria-invalid="true"]{outline:2px solid #a23b2a;outline-offset:1px}
.footnl__form,.lsub__form{flex-wrap:wrap}
.footnl__form .lead-msg,.lsub__form .lead-msg{flex-basis:100%}
.footnl .lead-msg{color:#cfcec1}
.footnl .lead-done,.footnl .lead-done a{color:#fff}
.footnl__form [aria-invalid="true"]{outline-color:#f0b4a8}
/* 2026-09-28 Tamara: the workbook and the newsletter are two separate sign-ups */
.nl__forms{display:grid;gap:20px}
.nl__ftitle{font-family:var(--ff-d);font-size:1.3rem;line-height:1.2;margin:0;color:var(--ink)}
.nl__form--letter{border-top-color:var(--teal)}
@media(max-width:860px){.nl{grid-template-columns:minmax(0,1fr);gap:32px}}

.phead--join .phead__in{max-width:760px}
.join{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(34px,5vw,70px);align-items:start}
.join__form{margin:0}
.join__aside{padding-top:6px}
.join__btns{display:flex;flex-wrap:wrap;gap:14px;margin:1.5rem 0 0}
.join__note{display:flex;gap:10px;align-items:flex-start;margin:2rem 0 0;padding-top:1.4rem;
  border-top:1px solid var(--hair);font-size:.92rem;color:var(--muted);max-width:none}
.join__note svg{color:var(--green);flex:none;margin-top:3px}
@media(max-width:860px){.join{grid-template-columns:minmax(0,1fr);gap:34px}
  .join__aside{order:-1}}

/* ---------- recognition band (Readers' Choice + NNEPA) ---------- */
.recog{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:clamp(30px,5vw,64px);align-items:center}
.recog__badge{position:relative}
.recog__badge img{width:100%;height:auto;box-shadow:var(--sh-md)}
.recog__badge::after{content:"";position:absolute;inset:-14px;border:1px solid rgba(169,138,82,.55);pointer-events:none}
.recog__body h2{margin-bottom:.45em}
.recog__list{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:12px}
.recog__list li{display:flex;gap:12px;align-items:flex-start;font-size:1rem;line-height:1.5}
.recog__list svg{flex:none;margin-top:3px}
.band--brand .recog__list li{color:#dbe0d0}
.band--brand .recog__list svg{color:var(--gold-l)}
.band--brand .recog__badge::after{border-color:rgba(255,255,255,.32)}
.band--brand .recog__body strong{color:#fff}
.band--ivory .recog__list li{color:var(--ink-soft)}
.band--ivory .recog__list svg{color:var(--green)}
.v-light .band--brand .recog__list svg{color:#bfe0da}
@media(max-width:760px){.recog{grid-template-columns:minmax(0,1fr);gap:30px;text-align:left}
  .recog__badge{max-width:220px}}

/* ---------- staging-only light/dark preview toggle ---------- */
.vtoggle{position:fixed;right:18px;bottom:18px;z-index:180;display:flex;align-items:center;gap:6px;
  background:rgba(38,51,31,.94);backdrop-filter:blur(8px);padding:7px 8px 7px 14px;border-radius:999px;
  box-shadow:0 12px 34px -14px rgba(0,0,0,.6)}
.vtoggle__lab{font-family:var(--ff-b);font-size:.82rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.62);margin-right:2px}
.vtoggle__btn{font-family:var(--ff-b);font-size:.86rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#ffffff;background:transparent;border:0;padding:7px 15px;border-radius:999px;cursor:pointer;
  transition:.2s}
.vtoggle__btn:hover{color:#fff;background:rgba(255,255,255,.12)}
.vtoggle__btn[aria-pressed="true"]{background:var(--gold);color:#fff}
.v-light .vtoggle{background:rgba(255,255,255,.96);box-shadow:0 12px 34px -16px rgba(43,47,40,.55);
  border:1px solid var(--line)}
.v-light .vtoggle__lab{color:var(--muted)}
.v-light .vtoggle__btn{color:var(--ink-soft)}
.v-light .vtoggle__btn:hover{background:var(--cream)}
.v-light .vtoggle__btn[aria-pressed="true"]{background:var(--teal);color:#fff}
@media print{.vtoggle{display:none}}
@media(max-width:520px){.vtoggle{right:10px;bottom:10px;padding:5px 6px 5px 11px}
  .vtoggle__lab{display:none}.vtoggle__btn{padding:6px 12px}}

/* ---------- events & webinars ---------- */
.evgrid-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:clamp(46px,6vw,72px);padding-bottom:14px;border-bottom:1px solid var(--line)}
.evgrid-head__h{font-size:1.9rem;font-weight:500;margin:0;color:var(--green-d)}
.evgrid-head__all{font-family:var(--ff-b);font-size:.88rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold-d);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.evgrid-head__all svg{transition:transform .25s}
.evgrid-head__all:hover svg{transform:translateX(4px)}
/* auto-fit rather than a fixed column count, so the modifiers below can never be
   clobbered by a later media query at the same specificity. That collision was
   forcing a ONE-card grid into two 207px columns between 900 and 1080px. */
.evgrid{display:grid;gap:26px;margin-top:32px;align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.evgrid--two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));max-width:900px;margin-inline:auto}
.evgrid--one{grid-template-columns:minmax(0,1fr)}
.evgrid--solo{grid-template-columns:minmax(0,min(440px,100%));justify-content:center;max-width:900px;margin-inline:auto}
.ev{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--green);
  padding:26px 26px 28px;display:flex;flex-direction:column;box-shadow:var(--sh);transition:.3s;
  scroll-margin-top:110px}
.ev:hover{box-shadow:var(--sh-md);transform:translateY(-4px)}
/* 2026-09-28 Tamara marked the workshop cards NORMAN and OKC: location first */
.ev__loc{font-family:var(--ff-b);font-weight:700;font-size:1.05rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green);margin:0 0 14px;line-height:1.2}
.ev--webinar{border-top-color:var(--teal)}
.ev--appearance{border-top-color:var(--gold)}
.ev__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.ev__chip{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--cream);border:1px solid var(--sage-soft);color:var(--green-d);
  width:66px;padding:8px 4px;line-height:1;flex:none}
.ev__chip--rolling{flex-direction:row;gap:7px;width:auto;padding:9px 13px;color:var(--green)}
.ev__chip--rolling svg{flex:none}
.ev__mo{font-family:var(--ff-b);font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ev__day{font-family:var(--ff-d);font-size:2rem;font-weight:600;margin:2px 0}
.ev__yr{font-family:var(--ff-b);font-size:.84rem;font-weight:600;letter-spacing:.05em;color:var(--ink-soft)}
.ev__badge{font-family:var(--ff-b);font-size:.82rem;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;padding:5px 11px;color:#fff;background:var(--green);white-space:nowrap}
.ev__badge--webinar{background:var(--teal)}
.ev__badge--appearance{background:var(--gold-d)}
.ev__badge--client{background:var(--gold-d)}
/* client education (Tamara 2026-09-25): course descriptions only, no dates, no sign-up */
.ccourses{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:22px;max-width:1080px;margin-inline:auto}
.ccourse{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--gold-d);padding:26px 26px 22px;box-shadow:var(--sh)}
.ccourse .ev__badge{display:inline-block;margin-bottom:14px}
.ccourse h3{font-size:1.36rem;font-weight:500;line-height:1.2;margin:0 0 .45em}
.ccourse p{margin:0;color:var(--ink-soft);line-height:1.6}
.ev__title{font-size:1.42rem;font-weight:500;line-height:1.2;margin:0 0 14px}
.ev__when,.ev__where{display:flex;gap:11px;align-items:flex-start;margin:0 0 11px;
  font-size:1rem;line-height:1.55;color:var(--ink-soft)}
.ev__when svg,.ev__where svg{color:var(--green);flex:none;margin-top:3px}
.ev__where strong{font-weight:600;color:var(--ink)}
.ev__blurb{color:var(--ink-soft);font-size:1.02rem;line-height:1.6;margin:16px 0 24px}
.ev__cta{margin-top:auto;width:100%;text-align:center;justify-content:center;white-space:normal;line-height:1.35;padding-left:1.1em;padding-right:1.1em}
.lead-card[id]{scroll-margin-top:120px}
.webinar-split{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start}
@media(max-width:900px){.webinar-split{grid-template-columns:minmax(0,1fr);gap:30px}}
@media(max-width:680px){.evgrid-head{flex-direction:column;align-items:flex-start;gap:8px}}

/* ---------- quotes ---------- */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:36px}
.quotes--stack{grid-template-columns:1fr;max-width:840px;margin-inline:auto}
.quote{background:var(--cream);border:1px solid var(--line);border-left:3px solid var(--green);padding:34px 36px;margin:0;position:relative}
.quote blockquote{margin:0 0 14px;font-family:var(--ff-d);font-size:1.55rem;line-height:1.4;color:var(--green-d);font-style:italic}
.quote--lg blockquote{font-size:1.6rem}
.quote figcaption{font-size:.88rem;font-weight:700;color:var(--gold-d);letter-spacing:.05em;text-transform:uppercase}
@media(max-width:760px){.quotes{grid-template-columns:1fr}}

/* ---------- page head (interior masthead) ----------
   Every page reached from the nav opens with this, so it carries the whole
   first impression of the interior of the site. It is built as an editorial
   masthead rather than a banner: a gold hairline overhead, a marker rule beside
   the title, a deck set in the display face, and the house acanthus embossed
   into the paper at a size that reads as a watermark.

   🔴 The old ::after here painted ONE bare SVG stroke off the top-right corner,
   a botanical stem with no leaves. On every interior page it read as a stray
   line someone forgot to delete (Tiffany, 8/11). If you add an ornament here,
   it must be a composed motif at a deliberate size. A single loose path is a
   defect, not a flourish. */
.phead{position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 88% at 82% -12%, rgba(169,138,82,.13), transparent 62%),
    radial-gradient(96% 70% at 4% 108%, rgba(111,132,103,.14), transparent 60%),
    linear-gradient(118deg, var(--ivory) 0%, var(--cream) 54%, #edefe3 100%);
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--line)}
/* the embossed house mark. Bottom-right, cropped by the band on purpose, so it
   sits under the type as texture instead of competing with it. */
/* sized by HEIGHT, not width: the band's height changes with the length of each
   page's title, and a width-sized ornament overflowed top and bottom on short
   heads and read as wallpaper. Height-sizing keeps the whole spray inside the
   band on every page, cropped only at the right edge, which is deliberate. */
/* the house mark is 240x212, wider than tall, so it is sized by height and lets
   width follow; that keeps the whole emblem inside the band whatever the page
   title's length, cropped only at the right edge, which is deliberate. */
.phead__mark{position:absolute;z-index:0;right:clamp(-96px,-4.5vw,-30px);top:50%;transform:translateY(-50%);
  height:min(62%,340px);width:auto;color:var(--gold);opacity:.12;pointer-events:none}
.phead__mark svg{height:100%;width:auto;display:block}
.phead__in{position:relative;z-index:1;padding:clamp(66px,9vw,124px) 0 clamp(54px,7vw,92px);max-width:900px}
/* editorial marker: a gold hairline running down the left of the title block */
.phead__in::before{content:"";position:absolute;left:-26px;top:clamp(70px,9.2vw,128px);bottom:clamp(58px,7.2vw,96px);
  width:1px;background:linear-gradient(180deg,var(--gold),rgba(169,138,82,.08));opacity:.85}
/* city heads pass eyebrow(..., 'light'), which was written for eyebrows sitting
   on a dark photo. The masthead ground is always pale, so sage-on-cream reads as
   washed out. The masthead wins over the modifier here. */
.phead .eyebrow,.phead .eyebrow--light{color:var(--gold-d)!important;margin-bottom:1.15rem}
.phead h1{color:var(--green-d);font-size:clamp(2.85rem,5.9vw,4.5rem);letter-spacing:-.019em;margin-bottom:.3em}
.phead h1 em{font-style:italic;color:var(--gold-d)}
/* the deck is set in the display face: on a page whose body is a wall of prose,
   this is what makes the top of the page feel composed rather than typed */
.phead p{color:var(--ink-soft);font-family:var(--ff-d);font-size:clamp(1.32rem,2.1vw,1.62rem);
  font-weight:500;line-height:1.48;letter-spacing:-.004em;max-width:56ch;margin-bottom:0}
.phead p.phead__hook{font-family:var(--ff-d);font-style:italic;color:var(--gold-d);
  font-size:clamp(1.55rem,2.7vw,2.1rem);font-weight:500;line-height:1.28;
  letter-spacing:-.008em;max-width:44ch;margin:-.12em 0 .62em}
.phead__btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.1rem}
@media(max-width:900px){
  .phead__in{padding-left:22px}
  .phead__in::before{left:0}
  .phead__mark{right:-56px;height:min(46%,190px);opacity:.1}
}
/* dark-on-photo city heads keep their own treatment; just re-tone the ornament */
.phead--city .phead__mark{opacity:.11}
.v-light .phead{border-top-color:rgba(87,124,147,.35)}
.v-light .phead__in::before{background:linear-gradient(180deg,var(--teal),rgba(87,124,147,.06))}
.v-light .phead h1 em{color:var(--teal)}
.v-light .phead__mark{color:var(--teal);opacity:.1}

/* ---------- plans (LPP hub) ---------- */
.plans{display:grid;gap:26px;max-width:960px;margin-inline:auto}
.plan{background:var(--paper);border:1px solid var(--line);padding:clamp(30px,4vw,46px);box-shadow:var(--sh);scroll-margin-top:110px;position:relative;transition:.3s;border-left:3px solid transparent}
.plan:hover{box-shadow:var(--sh-md)}
.plan--flag{border-left-color:var(--green);box-shadow:var(--sh-md)}
.plan__head{margin-bottom:16px}
.plan__tag{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-d)}
.plan__flag{display:inline-block;background:var(--green);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;margin-left:12px;vertical-align:middle}
.plan h2{font-size:2.1rem;margin:8px 0 6px;font-weight:500}
.plan__for{color:var(--green);font-family:var(--ff-d);font-size:1.32rem;font-style:italic;margin:0}
.plan__body{color:var(--ink-soft);font-size:1.08rem}
.plan__list{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px}
.plan__list li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-soft)}
.plan__list svg{color:var(--green);flex:none;margin-top:3px}
.ticklist{list-style:none;margin:1.1rem 0 1.7rem;padding:0;display:grid;gap:13px}
.ticklist li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-soft);font-size:1.05rem}
.ticklist svg{color:var(--green);flex:none;margin-top:3px}

/* ---------- scards ---------- */
/* =====================================================================
   THREE DEVICES ADDED FOR THE SERVICE PAGES (2026-08-31)
   Tiffany: "every page needs this design detail. They seem to all look the same,
   images are boring, loads of font without well laid out design." The eight service
   pages ran fourteen sections of which twelve were the same shape: centred eyebrow,
   h2, gold rule, column of type. These three break that up, and they are written
   generically so any page can reach for them.
   ===================================================================== */

/* --rev puts the photograph on the LEFT. The service pages now alternate: picture
   left on the problem, picture right on who-it-is-for. Order, not direction, so the
   reading order for a screen reader is unchanged. */
@media(min-width:861px){
  .split--rev .split__media{order:-1}
}

/* the checklist gets its own card beside the copy instead of running underneath it
   in a centred column. It is the one place on a service page that carries a call to
   action mid-scroll, which is why the button is in it. */
.factcard{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--gold);
  padding:clamp(24px,2.6vw,34px);align-self:start;box-shadow:var(--sh)}
.factcard__h{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--gold-d);margin:0 0 16px;max-width:none}
.factcard .ticklist{margin:0 0 22px}
.factcard .ticklist li{font-size:.97rem}
.v-light .factcard{border-top-color:var(--blue-btn)}
.v-light .factcard__h{color:var(--blue-txt)}

/* the firm signature at the foot of a service page. It replaced a full two-paragraph
   about-the-firm split that was repeated verbatim on all eight of them. */
.firmstrip{padding-block:clamp(38px,4.6vw,68px)}
.firmstrip__in{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,44px);
  align-items:center}
.firmstrip__ph{margin:0;width:clamp(120px,14vw,190px);flex:none;overflow:hidden}
.firmstrip__ph img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.firmstrip__l{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--muted);margin:0 0 10px;max-width:none}
.firmstrip__q{font-family:var(--ff-d);font-weight:400;color:var(--green-dd);margin:0 0 18px;
  font-size:clamp(1.3rem,2.2vw,1.85rem);line-height:1.32;max-width:42ch}
.firmstrip__q em{font-family:var(--ff-s);font-style:normal;font-size:1.28em;line-height:1;margin-left:.1em}
.firmstrip__btns{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:700px){
  .firmstrip__in{grid-template-columns:1fr}
  .firmstrip__ph{width:clamp(110px,34vw,160px)}
}

.scards{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;max-width:960px;margin-inline:auto}
.scard{background:var(--paper);border:1px solid var(--line);padding:34px 34px;transition:.3s;border-top:3px solid transparent}
.scard:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-top-color:var(--green)}
.scard__ic{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:var(--cream);color:var(--green);border:1px solid var(--sage-soft);margin-bottom:16px}
.scard h3{margin-bottom:.4em;font-weight:500}
.scard p{color:var(--muted);margin:0}
@media(max-width:760px){.scards{grid-template-columns:1fr}}

/* ---------- workshop page ---------- */
.wgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:880px;margin-inline:auto}
.wcard{background:var(--paper);border:1px solid var(--line);padding:36px 32px;text-align:center;box-shadow:var(--sh);transition:.3s;border-top:4px solid var(--green)}
.wcard:hover{box-shadow:var(--sh-md);transform:translateY(-4px)}
.wcard__ic{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;background:var(--cream);color:var(--green);border:1px solid var(--sage-soft);margin-bottom:14px}
.wcard h3{font-size:1.7rem;margin-bottom:.3em;font-weight:500}
.wcard__addr{color:var(--muted);font-size:.98rem;margin-bottom:8px;min-height:2.6em}
.wcard__when{font-weight:700;color:var(--green);margin-bottom:20px}
.wcard .btn{width:100%}
.wgrid--one{grid-template-columns:minmax(0,440px);justify-content:center}
@media(max-width:680px){.wgrid{grid-template-columns:1fr}}

/* ---------- attorneys ---------- */
/* 🔴 2026-08-28: bigger cards, and the NAME ON THE CARD. Tamara asked for both in
   the Tamara + Tiff review: "the attorney image cards could be made larger, with
   names displayed on the image cards, and the image scale should be balanced with
   adjacent design elements." The plate is SOLID and sits under the portrait, so
   nothing is written across a face and nothing is dimmed. 300px -> 380px. */
.attys{display:grid;gap:56px;max-width:1080px;margin-inline:auto}
.atty{display:grid;grid-template-columns:380px 1fr;gap:clamp(34px,3.6vw,52px);align-items:start;scroll-margin-top:100px}
.atty:nth-child(even){grid-template-columns:1fr 380px}
.atty__plate{background:var(--coffee);color:#fff;padding:14px 18px 16px}
.atty__plate strong{display:block;font-family:var(--ff-d);font-weight:400;font-size:1.24rem;line-height:1.2}
.atty__plate span{display:block;font-family:var(--ff-b);font-weight:700;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-l);margin-top:6px}
@media(max-width:960px){.atty{grid-template-columns:300px 1fr}.atty:nth-child(even){grid-template-columns:1fr 300px}}
.atty:nth-child(even) .atty__photo{order:2}
.atty h2{font-weight:500}
.atty__role{color:var(--green);font-weight:600;margin:-2px 0 12px;letter-spacing:.04em;font-size:.85rem;text-transform:uppercase}
.atty__lead{font-family:var(--ff-d);font-size:1.5rem;font-style:italic;color:var(--green-d);line-height:1.36;margin-bottom:18px}
.atty__cred{font-family:var(--ff-d);font-style:italic;font-size:1.02rem;color:var(--muted);
  border-top:1px solid var(--hair);padding-top:18px;margin-top:14px;max-width:none}
@media(max-width:720px){.atty,.atty:nth-child(even){grid-template-columns:1fr;gap:24px}.atty:nth-child(even) .atty__photo{order:-1}.atty__photo{max-width:300px}}

/* ---------- pride ---------- */
.pride-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;max-width:1040px;margin-inline:auto}
/* 🔴 2026-09-21, PER MITCH: the values are four, not five, and the giant initial letter is
   gone with the acronym. Four across in a narrower rail so the cards do not stretch. */
.pride-grid--4{grid-template-columns:repeat(4,1fr);max-width:1040px}
.pride{background:var(--paper);border:1px solid var(--line);padding:28px 22px;text-align:center;transition:.3s}
.pride:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.pride__l{font-family:var(--ff-d);font-size:3rem;color:var(--green);display:block;line-height:1;margin-bottom:10px;font-weight:500}
.pride h3{font-size:1.16rem;margin-bottom:.4em;font-weight:600}
.pride p{font-size:.9rem;color:var(--muted);margin:0}
@media(max-width:900px){.pride-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:560px){.pride-grid{grid-template-columns:1fr 1fr}}

/* ---------- faq ---------- */
.faq-set{margin-bottom:42px}
.faq-set h2{font-size:1.7rem;padding-bottom:12px;border-bottom:2px solid var(--sage);margin-bottom:16px;font-weight:500}
.faq{border:1px solid var(--line);margin-bottom:12px;background:var(--paper);overflow:hidden;transition:.2s}
.faq[open]{box-shadow:var(--sh);border-color:var(--sage-soft)}
.faq summary{cursor:pointer;padding:20px 24px;font-family:var(--ff-d);font-size:1.35rem;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--ff-b);font-size:1.5rem;color:var(--green);flex:none;transition:.25s;font-weight:300}
.faq[open] summary::after{transform:rotate(135deg)}
.faq__a{padding:0 24px 22px}
.faq__a p{margin:0;color:var(--ink-soft)}

/* ---------- locations ---------- */
.locgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:960px;margin-inline:auto}
.loccard{background:var(--paper);border:1px solid var(--line);padding:34px 30px;color:var(--ink);text-align:center;transition:.3s;border-top:3px solid transparent}
.loccard:hover{text-decoration:none;transform:translateY(-4px);box-shadow:var(--sh-md);border-top-color:var(--green)}
.loccard__ic{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--cream);color:var(--green);border:1px solid var(--sage-soft);margin-bottom:14px}
.loccard h3{margin-bottom:.2em;font-weight:500}
.loccard p{color:var(--muted);margin-bottom:14px}
.loc-others{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center}
.loc-others a{font-weight:600}
@media(max-width:820px){.locgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.locgrid{grid-template-columns:1fr}}

/* ---------- right fit call page form ---------- */
.split__form{position:relative}
.formcard{background:var(--paper);border:1px solid var(--line);padding:38px 34px;box-shadow:var(--sh-md);border-top:4px solid var(--green)}
.formcard h3{font-size:1.8rem;margin-bottom:.3em;font-weight:500}
.formcard__note{color:var(--muted);font-size:.96rem;margin-bottom:20px}
.rfc-form{display:grid;gap:15px}
.rfc-form label{display:block;font-weight:600;font-size:.85rem;color:var(--ink-soft)}
.rfc-form .opt{font-weight:400;color:var(--muted)}
.rfc-form input,.rfc-form textarea{width:100%;margin-top:6px;padding:13px 15px;border:1.5px solid var(--line);border-radius:var(--r-s);font:inherit;font-size:1rem;color:var(--ink);background:var(--ivory);transition:.15s}
.rfc-form input:focus,.rfc-form textarea:focus{outline:none;border-color:var(--green);background:#fff;box-shadow:0 0 0 3px rgba(65,87,63,.1)}
.rfc-form .btn{width:100%;margin-top:4px}
.formcard__fine{font-size:.8rem;color:var(--muted);margin:0}

/* ---------- blog scaffold ---------- */
.bgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;max-width:960px;margin-inline:auto}
.bcard{background:var(--paper);border:1px solid var(--line);overflow:hidden;box-shadow:var(--sh);transition:.3s}
.bcard:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.bcard__ph{background:linear-gradient(150deg,var(--cream),var(--cream-d));min-height:160px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}
.bcard__ph span{opacity:.5}
.bcard__body{padding:24px 26px}
.bcard__cat{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-d)}
.bcard h3{font-size:1.4rem;margin:8px 0 10px;font-weight:500}
.bcard__soon{font-size:.84rem;color:var(--muted);font-style:italic}
@media(max-width:680px){.bgrid{grid-template-columns:1fr}}

/* ---------- cta band ---------- */
.cta-band{background:linear-gradient(160deg,var(--green) 0%,var(--green-d) 100%);color:#fff;text-align:center;position:relative;overflow:hidden}
.cta-band__in{position:relative;padding:clamp(60px,8vw,100px) 0;max-width:740px;margin:0 auto}
.cta-band .acanthus{margin:0 auto 20px}
.cta-band h2{color:#fff}
.cta-band p{color:#dbe0d0;font-size:1.2rem;margin:0 auto 2rem;max-width:52ch}
.cta-band__btns{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}
.cta-band .btn--gold{background:#fff;color:var(--green-d);border-color:#fff}
.cta-band .btn--gold:hover{background:var(--cream)}

/* ---------- footer ---------- */
.foot{background:var(--green-dd);color:#c3c9b6;font-size:.95rem;padding:clamp(52px,7vw,80px) 0 0}
/* 🔴 FIVE COLUMNS FOR FIVE COLUMNS. Tiffany: "can the Frim section on the footef not
   fit by locations?" It could not: the footer has FIVE children (the brand block plus
   Services, The Plan, Locations and The Firm) and this rule declared FOUR tracks, so
   the fifth wrapped to a second row and sat on its own under the brand. Measured at
   1440, 1280, 1024 and 900px: identical every time, The Firm alone on row two.
   The gap tightens with the viewport so the five still fit on a small laptop; the
   two-column and one-column fallbacks below are unchanged. */
.foot__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1.15fr;
  gap:clamp(26px,3vw,42px);padding-bottom:48px}
.foot h4{color:#fff;font-family:var(--ff-b);font-size:.88rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px;font-weight:700}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
/* 🔴 The social row, 2026-09-01. It MUST out-specify `.foot ul` above (0,1,1) and the
   `.foot__grid ul li a` phone rules further down (0,2,1), or the icons render as a
   vertical column of blocks, which is exactly what shipped the first time and was
   caught in a browser. Hence `.foot .foot__social`, not `.foot__social`.
   42px targets: the audience is 55 to 75 and a bare 20px glyph is not tappable. */
.foot .foot__social{display:flex;flex-direction:row;gap:10px;margin:1.15rem 0 0}
.foot .foot__social li{margin:0}
.foot .foot__social a{display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;padding:0;border-radius:50%;color:rgba(255,255,255,.78);
  border:1px solid rgba(216,184,119,.34);
  transition:color .2s,border-color .2s,background .2s}
.foot .foot__social a:hover,.foot .foot__social a:focus-visible{color:var(--sand);
  border-color:rgba(216,184,119,.75);background:rgba(216,184,119,.10)}
/* The firm's own tagline, off their live site. Set as a line, not a heading, so it does
   not compete with the wordmark directly above it. */
.foot__tag{font-family:var(--ff-d);font-size:1.18rem;line-height:1.4;
  color:rgba(255,255,255,.92);margin:.25rem 0 .95rem}
.foot a{color:#c3c9b6}
/* Footer Call now button (Patrice, 2026-10-01). Out-specifies `.foot a` so the gold button keeps its own text color. */
.foot a.foot__call{display:inline-flex;align-items:center;gap:8px;margin:.5rem 0 1rem;color:#fff}
.foot a.foot__call:hover{color:#fff}
.foot a.foot__call svg{width:18px;height:18px}
.foot a:hover{color:#fff}
.foot__mark{font-family:var(--ff-d);font-size:1.9rem;color:#fff;display:block;line-height:1.1;font-weight:500}
.foot__legal{font-size:.86rem;color:var(--sage);margin:5px 0 14px;letter-spacing:.02em}
.foot__brand p{color:#aab29a;max-width:38ch}
.foot__addr{font-size:.9rem;line-height:1.75}
.foot__addr svg{vertical-align:-3px;color:var(--sage)}
.foot__nnepa{font-size:.84rem;color:var(--sage);font-style:italic}
.foot__bar{border-top:1px solid rgba(255,255,255,.1);padding:24px 0}
.foot__bar-in{display:flex;flex-direction:column;gap:8px;font-size:.86rem;line-height:1.6;color:#b9c0aa}
.foot__disc{color:#b9c0aa;line-height:1.6;font-size:.84rem}
/* Built by TruLata credit (Tiffany 2026-09-27): a craftsman's mark, stays at launch */
.foot__credit{color:#b9c0aa;font-size:.78rem;letter-spacing:.02em}
.foot .foot__credit a{color:#b9c0aa;text-decoration:none}
.foot .foot__credit a:hover,.foot .foot__credit a:focus-visible{color:#fff;text-decoration:underline}
/* 🔴 THE FIVE-ACROSS LAYOUT ONLY WHERE FIVE FIT. With four columns the two-up fallback
   could start at 860px; with five it cannot. Measured: at 1024px the links were wrapping
   to three lines and at 900px to four, because "Estate Planning Glossary" and "For
   Advisors & CPAs" do not fit a 122px track. Two columns from 1100px down, which is a
   footer, not a compromise. */
@media(max-width:1100px){.foot__grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:520px){.foot__grid{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1!important;transform:none!important}}

/* ================= V3 ART DIRECTION =================
   The v1/v2 problem was not styling, it was that the site shipped one image
   (the logo) and eight identical horizontal bands. This block adds real
   photography, depth, and a broken rhythm. Landscape only, no people, per
   Tamara's stated dislike of stock photography. */

/* 🔴 --gold-l was #d8b877, a warm gold that is not in the brand palette and never
   was. It is the light accent on dark surfaces (the hero crest, the topbar hover,
   the Client Login chip), so it is now brand taupe lightened rather than gold.
   Measured: 7.33:1 on --green-ddd, 5.19:1 on --green-dd. Both clear AA. */
:root{--gold-l:#cbc0a8;--ink-dd:#141c0f;--sand:#a89c82}

/* --- cinematic photo hero --- */
.hero--photo{background:var(--ink-dd);min-height:min(88vh,820px);display:flex;flex-direction:column;justify-content:flex-end}
.hero--photo .hero__in{flex:1 1 auto}
/* .wrap carries margin:0 auto, and an auto cross-axis margin cancels flex stretch,
   so these children shrink-wrapped their content instead of filling the hero. */
.hero--photo>.wrap{width:100%}
.hero--photo .hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero--photo .hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;transform:scale(1.04)}
/* DEAD, kept only as a marker: nothing uses .hero--photo since 2026-08-19 and
   NO scrim may come back. See the film-hero block. */
.dead--never-used .hero__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(98deg,rgba(18,26,14,.93) 0%,rgba(20,29,16,.80) 34%,rgba(22,32,18,.34) 68%,rgba(22,32,18,.10) 100%),
             linear-gradient(180deg,rgba(14,20,11,.58) 0%,rgba(14,20,11,0) 32%,rgba(14,20,11,.50) 100%)}
/* .hero__in above sets `padding: <block> 0`, which zeroes the .wrap side padding and
   left the hero copy flush to the screen edge on mobile. Restore it explicitly. */
.hero--photo .hero__in{display:block;position:relative;z-index:2;
  padding-block:clamp(104px,12vw,140px) clamp(40px,4.5vw,60px);
  padding-inline:clamp(20px,4.5vw,48px)}
.hero--photo .hero__copy{max-width:min(720px,100%)}
.hero--photo .hero__kicker{color:var(--gold-l)}
.hero--photo .hero__title{color:#fff;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.hero--photo .hero__title em{color:var(--gold-l)}
.hero--photo .hero__tagline{color:#dfe4d2}
.hero--photo .hero__lead{color:#cfd6c2;max-width:52ch}
.hero--photo .hero__scroll{position:absolute;left:50%;bottom:22px;z-index:2;transform:translateX(-50%);
  width:1px;height:44px;background:linear-gradient(180deg,rgba(216,184,119,0),rgba(216,184,119,.9))}
@media(max-width:920px){.dead--never-used{min-height:auto}.dead--never-used .hero__scrim{
  background:linear-gradient(180deg,rgba(14,20,11,.62) 0%,rgba(16,23,13,.86) 55%,rgba(16,23,13,.94) 100%)}}

.btn--goldsolid{background:var(--blue-btn);color:#fff;border-color:var(--blue-btn)}
.btn--goldsolid:hover{color:#fff}
.btn--goldsolid:hover{background:var(--blue-btn-d);border-color:var(--blue-btn-d);color:#fff}
.btn--ghost-l{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn--ghost-l:hover{background:#fff;color:var(--green-dd)}

/* --- statement, now sitting on a photograph --- */
.statement--photo{background:var(--ink-dd)}
.statement--photo .statement__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.statement--photo .statement__bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.7)}
.statement--photo .statement__veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(168deg,rgba(38,51,31,.90) 0%,rgba(20,28,16,.95) 100%)}
.statement--photo .statement__in{position:relative;z-index:2}
.statement--photo .statement__seal{color:var(--gold-l)}
.statement--photo .statement__big em{color:var(--gold-l)}

/* --- full-bleed plate: breaks the cream/green alternation --- */
.plate{position:relative;min-height:clamp(340px,44vw,540px);display:flex;align-items:center;overflow:hidden;background:var(--ink-dd)}
.plate>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.plate__veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(92deg,rgba(17,24,13,.90) 0%,rgba(17,24,13,.66) 42%,rgba(17,24,13,.18) 100%)}
.plate__in{position:relative;z-index:2;max-width:min(960px,72%);padding-block:clamp(56px,8vw,104px)}
.plate__q{font-family:var(--ff-d);font-size:clamp(1.9rem,3.6vw,3.15rem);line-height:1.22;color:#fff;font-weight:500;margin:0;max-width:none}
.plate__q em{font-style:italic;color:var(--gold-l)}
.plate__by{display:block;margin:2rem 0 0;max-width:none;
  font-family:var(--ff-b);font-size:1rem;letter-spacing:.06em;text-transform:none;
  color:#efe0bd;font-weight:600}
.plate__by::before{content:"";display:inline-block;vertical-align:middle;
  width:52px;height:1px;background:var(--gold-l);margin-right:16px}
@media(max-width:820px){.plate__in{max-width:100%}.plate__by{font-size:.94rem}
  .plate__by::before{width:34px;margin-right:12px}}

/* --- real photo figures (these replace the empty .ph slots where art exists) --- */
.figph{position:relative;overflow:hidden;background:var(--cream-d)}
/* 🔴 3:2, the ratio the photographs were actually shot at, so a figure frame does
   not cut a third off them. --tall used to be PORTRAIT (4/4.6) and was throwing away
   the sides of every landscape photograph placed in it. */
.figph img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
/* 🔴 --tall is a misnomer kept for compatibility: it is 3:2, the same as the base,
   because every photograph using it is a landscape original. --city is the real
   portrait, 3:4, and it matches the crop _export_cities.py writes exactly, so the
   container adds no second crop. */
.figph--tall img{aspect-ratio:3/2}
.figph--city img{aspect-ratio:3/4}
.figph--portrait img{aspect-ratio:4/4.6;object-position:50% 22%}
/* 🔴 THE SEED SOWER HAD NO HEAD, and the photograph was never the problem. It is a
   768x1024 PORTRAIT frame, and every slot it appears in crops 3:2 from the centre,
   which throws away the top third, which is where the head is. Krystyn Richardson
   flagged it 2026-08-25 and Tamara repeated it on 8/28: "its head should be visible
   in the image." Keyed on the file so it holds in every frame the picture is ever
   dropped into, rather than in the one that happened to be broken. */
img[src*="epfl-seed-sower"]{object-position:50% 18%}
.figph::before{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.30);pointer-events:none;z-index:2}
.dropcap::first-letter{float:left;font-family:var(--ff-d);font-size:4.4em;line-height:.78;font-weight:500;
  padding:.06em .12em 0 0;color:var(--green);font-variant-numeric:normal}
.figph::before{border-color:var(--hair)}
.figph__cap{position:absolute;left:0;bottom:0;z-index:3;background:var(--green-dd);color:#e8d9b4;
  font-size:.82rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:9px 15px}

/* --- flagship plan card actually reads as the flagship --- */
.pcard--flag{border-top-color:var(--gold);background:linear-gradient(180deg,#fff 0%,var(--ivory) 100%);box-shadow:var(--sh-md)}
.pcard--flag::after{content:"Our flagship";position:absolute;top:-3px;right:0;background:var(--gold);color:#fff;
  font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px}
.pcard--flag h3{font-size:1.58rem}
.pcard--flag:hover{border-top-color:var(--gold-d)}

/* --- start-here section (the lead form, evicted from the hero) --- */
.starthere__in{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,64px);align-items:center}
@media(max-width:900px){.starthere__in{grid-template-columns:1fr}.starthere__media{display:none}}

/* --- left-aligned section heads read as designed, centered reads as template --- */
.section-head--left{text-align:left;margin-inline:0;max-width:60ch}
.section-head--left .rule,.section-head--left .rule-gold{margin-inline:0}
.section-head.center .rule-gold{margin-inline:auto}
.rule-gold{height:2px;width:74px;background:linear-gradient(90deg,var(--gold),rgba(169,138,82,0));border:0;margin:18px 0 0}


/* ================= V4: NAVIGATION + FLOW =================
   The old bar was two stacked slabs (dark utility strip + white nav) totalling
   130px of chrome, an opaque white edge cutting across the photo hero, a small
   low-contrast mark, and seven evenly weighted links in body-copy sans. */

/* the separate dark utility strip is gone; the phone moved into the bar */
.topbar{display:none}

.nav{position:sticky;top:0;z-index:100;background:rgba(251,249,241,.94);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);transition:background .35s,border-color .35s,box-shadow .35s}
.nav__in{display:flex;align-items:center;gap:26px;min-height:92px}
/* the brand is a flex item, and the global img{max-width:100%} lets it shrink to
   min-content 0, so a crowded bar silently ate the logo. flex:none pins it. */
.nav__brand{flex:0 0 auto}
.nav__brand .nav__mark{height:62px;width:auto;max-width:none;display:block}
.nav__brand .nav__mark--light{display:none}
.nav__links{margin-left:auto}
.nav__links ul{gap:4px}
.nav__links .top{font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--green-d);padding:12px 13px;position:relative;white-space:nowrap}
.nav__links .top::after{content:"";position:absolute;left:13px;right:13px;bottom:6px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .28s}
.nav__links .top:hover::after,.nav__links .top[aria-current]::after{transform:scaleX(1)}
.nav__links .top:hover{color:var(--green)}
.nav__end{display:flex;align-items:center;gap:18px}
.nav__ph{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.9rem;color:var(--green-d);white-space:nowrap}
.nav__ph:hover{color:var(--gold-d);text-decoration:none}
.nav__cta{margin-left:0}

/* --- transparent across the photo hero, solid once you scroll past it --- */
.nav--over{position:fixed;left:0;right:0;background:transparent;backdrop-filter:none;border-bottom-color:transparent}
.nav--over .nav__brand .nav__mark--dark{display:none}
.nav--over .nav__brand .nav__mark--light{display:block}
.nav--over .nav__links .top{color:rgba(255,255,255,.92)}
.nav--over .nav__links .top:hover{color:#fff}
.nav--over .nav__ph{color:rgba(255,255,255,.92)}
.nav--over .nav__ph:hover{color:var(--gold-l)}
.nav--over .burger span{background:#fff}
.nav--over.nav--solid{position:fixed;background:rgba(251,249,241,.96);backdrop-filter:blur(12px);
  border-bottom-color:var(--line);box-shadow:0 6px 28px -22px rgba(38,51,31,.5)}
.nav--over.nav--solid .nav__brand .nav__mark--dark{display:block}
.nav--over.nav--solid .nav__brand .nav__mark--light{display:none}
.nav--over.nav--solid .nav__links .top{color:var(--green-d)}
.nav--over.nav--solid .nav__ph{color:var(--green-d)}
.nav--over.nav--solid .burger span{background:var(--ink)}
/* the fixed bar floats over the hero, so the hero owns the top spacing */
.nav--over + main .hero--photo .hero__in{padding-block-start:clamp(150px,17vw,220px)}

/* --- LOGO IN THE CENTRE, LINKS SPLIT AROUND IT (Tamara, 2026-09-16) ---------
   Three grid tracks, 1fr auto 1fr, so the mark sits on the page's centre line no
   matter how wide the two link groups are. Client Login is ordered to the far left
   edge and the Right Fit Call button to the far right, which is the rest of her ask.
   🔴 A right-hand dropdown opens RIGHTWARD. .drop is left:0 by default, which on the
   last tab in the bar hangs it off the side of the window. */
.nav--split .nav__in{display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:clamp(10px,1.4vw,24px)}
.nav--split .nav__half{display:flex;align-items:center;gap:clamp(6px,.9vw,16px);min-width:0}
.nav--split .nav__half--l{justify-content:flex-start}
.nav--split .nav__half--r{justify-content:flex-end}
.nav--split .nav__links{margin-left:0}
.nav--split .nav__brand{justify-self:center}
.nav--split .nav__half--r .drop{left:auto;right:0}
.nav--split .burger{display:none}
/* 🔴 THE PHONE NUMBER LEAVES THE BAR, and it is arithmetic rather than taste. At
   1440 the right track is 592px and its contents wanted 690: three tabs 371, the
   number 130, the button 161, plus gaps. Something had to go, and Tamara's layout
   names four things for this bar (Client Login, six tabs, the mark, the Right Fit
   Call button) and not the number. It was already hidden under 1320px, the button
   beside it books the call the number is for, and it is still in the footer and on
   every contact block. */
.nav--split .nav__ph{display:none}
.nav--split .nav__links .top{padding:12px 11px;letter-spacing:.11em}
@media(max-width:1400px){.nav--split .nav__links .top{padding:12px 8px;letter-spacing:.08em;font-size:.75rem}
  .nav--split .nav__login em{display:none}}
@media(max-width:1320px){.nav__ph{display:none}}
/* --- LOGO ON ITS OWN ROW, EVERY LINK IN ONE ROW BENEATH IT (Tiffany, 2026-09-23) ---
   Replaces the split bar above, which ran out of room once a seventh tab arrived and
   slid its links under the centred mark. The mark stays centred (Tamara, 9/16), and the
   row under it is Member Login far left, the seven tabs centred, the Right Fit Call far
   right. Below 1300 it hands over to the burger, same as before. */
.nav--stack .nav__in{display:flex;flex-direction:column;align-items:stretch;gap:2px;
  min-height:0;padding-block:12px 4px}
.nav--stack .nav__brand{align-self:center}
.nav--stack .nav__brand .nav__mark{height:66px}
/* the bar is ~132px now; anchor targets carry scroll-margin-top 100-120, this adds the rest */
@media(min-width:1301px){html{scroll-padding-top:26px}}
.nav--stack .nav__row{display:flex;align-items:center;gap:clamp(10px,1.2vw,20px)}
.nav--stack .nav__links{margin:0 auto}
.nav--stack .nav__links .top{padding:12px 11px;letter-spacing:.11em}
.nav--stack .nav__links li:nth-last-child(-n+2) .drop{left:auto;right:0}
.nav--stack .nav__ph{display:none}
.nav--stack .burger{display:none}
@media(max-width:1400px){.nav--stack .nav__links .top{padding:12px 8px;letter-spacing:.08em;font-size:.75rem}}
@media(max-width:1300px){.nav__links,.nav__end{display:none}.burger{display:flex;margin-left:auto}
  .nav__mark{height:52px}.nav__in{min-height:76px}
  /* back to brand + burger: an empty 1fr track either side would push the mark
     off centre once the links are gone. */
  .nav--split .nav__in{display:flex}
  .nav--split .nav__half{display:none}
  .nav--split .burger{display:flex}
  .nav--stack .nav__in{flex-direction:row;align-items:center;min-height:76px;padding-block:0}
  .nav--stack .nav__brand{align-self:auto}
  .nav--stack .nav__brand .nav__mark{height:52px}
  .nav--stack .nav__row{display:none}
  .nav--stack .burger{display:flex}}

/* --- ONE ROW, LOGO AT THE LEFT (Tamara + Jennifer, 2026-09-25) -------------------
   Mark, seven tabs, Member Login, Schedule a Right Fit Call, left to right, which is
   her list exactly. Supersedes .nav--split and .nav--stack above (kept, unused).
   It holds one row down to 1100px by tightening in steps, then hands over to the
   burger. Tamara saw only the burger on 9/25 because the stacked bar quit at 1300. */
.nav--line .nav__in{gap:clamp(10px,1.1vw,22px);min-height:88px}
.nav--line .nav__brand .nav__mark{height:58px}
.nav--line .nav__links{margin-left:auto;display:block}
.nav--line .nav__end{display:flex}
/* the old 1300px rule hides .nav__links/.nav__end for every bar; these win on specificity */
.nav--line .nav__links .top{padding:12px 11px;letter-spacing:.11em}
.nav--line .nav__links li:nth-last-child(-n+2) .drop{left:auto;right:0}
.nav--line .nav__end{gap:12px}
.nav--line .nav__ph{display:none}
.nav--line .burger{display:none}
.nav--line .nav__cta{white-space:nowrap}
.nav--line .nav__cta{gap:.3em}
@media(max-width:1640px){.nav--line .nav__links .top{padding:12px 8px;letter-spacing:.08em;font-size:.75rem}
  .nav--line .nav__login em{display:none}}
@media(max-width:1420px){.nav--line .nav__cta-pre{display:none}
  .nav--line .nav__brand .nav__mark{height:50px}}
@media(max-width:1240px){.nav--line .nav__links ul{gap:0}
  .nav--line .nav__links .top{padding:12px 6px;letter-spacing:.04em;font-size:.72rem}
  .nav--line .nav__links .top::after{left:6px;right:6px}
  .nav--line .nav__links .car{display:none}
  .nav--line .nav__in{gap:10px}
  .nav--line .nav__login{padding-inline:10px}
  .nav--line .nav__cta{padding:1em 1.1em}}
@media(max-width:1100px){.nav--line .nav__links,.nav--line .nav__end{display:none}
  .nav--line .burger{display:flex;margin-left:auto}
  .nav--line .nav__in{min-height:76px}
  .nav--line .nav__brand .nav__mark{height:50px}}

/* --- TWO ROWS (Tiffany, 2026-09-28, after the client call) --------------------------
   Row 1: mark beside the wordmark, larger, left; Schedule a Right Fit Call, right.
   Row 2: the nav items, spread edge to edge under them. Member Login is not rendered.
   Selectors carry .nav--line.nav--two so they beat the one-row bar's width steps. */
.nav--line.nav--two .nav__in{display:block;min-height:0;padding-block:14px 0}
.nav--line.nav--two .nav__top{display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav--line.nav--two .nav__brand--lock{display:flex;align-items:flex-end;gap:16px}  /* words sit on the bottom of the mark (Tiffany 9/28) */
.nav--line.nav--two .nav__brand .nav__mark{max-width:none}
.nav--line.nav--two .nav__brand .nav__mk{height:70px;width:auto}
.nav--line.nav--two .nav__brand .nav__wm{height:30px;width:auto}
.nav--line.nav--two .nav__links{margin:10px 0 0;border-top:1px solid var(--line)}
.nav--line.nav--two .nav__links ul{display:flex;justify-content:space-between;gap:0}
.nav--line.nav--two .nav__links .top{font-size:.74rem;letter-spacing:.11em;padding:13px 10px}
.nav--line.nav--two .nav__links .top::after{left:10px;right:10px}
.nav--line.nav--two .nav__links .car{display:inline-block}
.nav--line.nav--two .nav__links li:first-child .top{padding-left:0}
.nav--line.nav--two .nav__links li:first-child .top::after{left:0}
.nav--line.nav--two .nav__links li:last-child .top{padding-right:0}
.nav--line.nav--two .nav__links li:last-child .top::after{right:0}
.nav--line.nav--two .nav__cta-pre{display:inline}
.nav--line.nav--two .nav__cta{font-size:.8rem;padding:1em 1.5em}
@media(min-width:1101px){html{scroll-padding-top:44px}}
@media(max-width:1240px){.nav--line.nav--two .nav__links .top{font-size:.68rem;letter-spacing:.07em;padding:13px 6px}}
@media(max-width:1100px){
  .nav--line.nav--two .nav__in{padding-block:0}
  .nav--line.nav--two .nav__top{min-height:76px}
  .nav--line.nav--two .nav__links,.nav--line.nav--two .nav__end{display:none}
  .nav--line.nav--two .burger{display:flex;margin-left:auto}
  .nav--line.nav--two .nav__brand .nav__mk{height:46px}
  .nav--line.nav--two .nav__brand .nav__wm{height:20px}
  .nav--line.nav--two .nav__brand--lock{gap:10px}}
@media(max-width:420px){
  .nav--line.nav--two .nav__brand .nav__mk{height:40px}
  .nav--line.nav--two .nav__brand .nav__wm{height:15px}}

/* --- PATH TO PLANNING, THREE STEPS (Tamara, 2026-09-25) --------------------------
   "more colorful and more interactive ... In reality there are only 3 steps". Three
   orbs in the pie's three brand colours on a line that draws in; the pie's own script
   drives them ([data-arc] adds .is-in, .arcx__bar gets aria-expanded). Below: the three
   not-ready-yet alternatives as cards. */
.pathsec--3 .p3{margin-bottom:clamp(34px,4vw,56px)}
.p3__track{list-style:none;margin:0 auto clamp(22px,3vw,38px);padding:0;max-width:980px;
  display:grid;grid-template-columns:repeat(3,1fr);position:relative}
.p3__track::before{content:"";position:absolute;left:16.66%;right:16.66%;top:calc(var(--orb) / 2);
  height:4px;margin-top:-2px;border-radius:2px;
  background:linear-gradient(90deg,#577c93,#797a68 50%,#877d69);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.22,.61,.24,1) .15s}
.p3.is-in .p3__track::before{transform:scaleX(1)}
.p3__track{--orb:clamp(96px,11vw,148px)}
.p3__stop{display:flex;justify-content:center;position:relative;z-index:1}
.p3__stop:nth-child(1){--step:#577c93}
.p3__stop:nth-child(2){--step:#797a68}
.p3__stop:nth-child(3){--step:#877d69}
.p3__orb{display:grid;justify-items:center;gap:14px;background:none;border:0;padding:0;
  cursor:pointer;font:inherit;color:inherit}
.p3__disc{width:var(--orb);height:var(--orb);border-radius:50%;background:var(--step);color:#fff;
  display:grid;place-items:center;align-content:center;gap:4px;position:relative;
  box-shadow:0 0 0 8px var(--cream),0 14px 30px -18px rgba(38,51,31,.55);
  transform:scale(.3);opacity:0;
  transition:transform .7s cubic-bezier(.22,.61,.24,1) var(--d,0s),opacity .5s ease var(--d,0s),filter .3s,box-shadow .3s}
.p3.is-in .p3__disc{transform:scale(.9);opacity:1}
.p3__orb[aria-expanded="true"] .p3__disc{transform:scale(1);
  box-shadow:0 0 0 8px var(--cream),0 0 0 11px var(--step),0 18px 36px -18px rgba(38,51,31,.6)}
.p3__orb:not([aria-expanded="true"]) .p3__disc{filter:saturate(.8) brightness(.92)}
.p3__orb:hover .p3__disc{filter:none}
.p3__orb:focus{outline:none}
.p3__orb:focus-visible .p3__disc{outline:2px solid var(--blue-btn);outline-offset:14px}
.p3__n{font-family:var(--ff-d);font-size:clamp(2rem,3.4vw,3rem);line-height:.9}
.p3__ic svg{width:clamp(20px,2vw,26px);height:auto;opacity:.92}
.p3__lab{font-family:var(--ff-b);font-weight:700;font-size:clamp(.72rem,.95vw,.86rem);
  letter-spacing:.1em;text-transform:uppercase;color:var(--green-d);text-align:center;
  max-width:14em;line-height:1.35;transition:color .3s}
.p3__orb[aria-expanded="true"] .p3__lab{color:var(--step)}
.p3__stop:nth-child(1) .p3__orb[aria-expanded="true"] .p3__lab{color:#3f5e73}
.p3__stop:nth-child(2) .p3__orb[aria-expanded="true"] .p3__lab{color:#5f6152}
.p3__stop:nth-child(3) .p3__orb[aria-expanded="true"] .p3__lab{color:#725c4a}
.p3__panels{max-width:760px;margin-inline:auto}
.p3__panel{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--pc,#577c93);
  padding:clamp(20px,2.4vw,30px) clamp(20px,2.8vw,36px);box-shadow:0 18px 40px -34px rgba(38,51,31,.5)}
.p3__panel:nth-child(1){--pc:#577c93}.p3__panel:nth-child(2){--pc:#797a68}.p3__panel:nth-child(3){--pc:#877d69}
.p3__panel .arcx__pn{color:var(--pc)}
.p3__of{font-size:.74rem!important;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--muted)!important;margin:0 0 4px!important}
.p3__panel h3{margin-bottom:8px}
.p3__go{margin-top:16px}
.p3alt{max-width:1060px}
.p3alt__h{text-align:center;font-family:var(--ff-d);font-size:clamp(1.3rem,2vw,1.7rem);color:var(--green-d);
  margin:0 auto clamp(18px,2.2vw,28px);max-width:none}
.p3alt__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,26px)}
.p3alt__card a{display:flex;flex-direction:column;height:100%;background:var(--ivory);
  border:1px solid var(--line);padding:clamp(18px,2vw,26px);color:var(--ink);
  transition:transform .3s cubic-bezier(.22,.61,.24,1),box-shadow .3s,border-color .3s}
.p3alt__card:nth-child(1){--ac:#577c93}.p3alt__card:nth-child(2){--ac:#797a68}.p3alt__card:nth-child(3){--ac:#877d69}
.p3alt__card a{border-top:3px solid var(--ac)}
.p3alt__card .p3alt__ic{background:var(--ac);color:#fff}
.p3alt__card a:hover{text-decoration:none;transform:translateY(-4px);border-color:var(--blue-l);
  box-shadow:0 20px 40px -30px rgba(38,51,31,.55)}
.p3alt__ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--cream-d);color:var(--blue-d);margin-bottom:12px}
.p3alt__card h3{font-family:var(--ff-d);font-weight:400;font-size:1.28rem;color:var(--green-d);margin:0 0 6px}
.p3alt__card p{font-size:.95rem;line-height:1.65;color:var(--ink-soft);margin:0 0 14px;flex:1}
.p3alt__go{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.82rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--blue-txt)}
@media(max-width:820px){
  .p3__track{--orb:clamp(72px,20vw,96px)}
  .p3__lab{font-size:.66rem;letter-spacing:.06em}
  .p3__panel + .p3__panel{border-top:4px solid var(--pc)}
  .p3__panels .p3__panel{margin-bottom:14px}
  .p3alt__list{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.p3__disc,.p3__track::before{transition:none}}

/* Who We Serve cards carry a photograph (Tamara, 2026-09-25: OU photos for Academics &
   Professionals). The picture bleeds to the card edges; the icon sits over its foot. */
.scard--ph{padding-top:0!important;display:flex;flex-direction:column}
.scard__ph{margin:0 -34px 0;aspect-ratio:16/9;overflow:hidden}
.scard__ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.scard--ph:hover .scard__ph img{transform:scale(1.04)}
.scard--ph .scard__ic{margin-top:-30px;position:relative;background:var(--paper)}

/* --- stat strip, now living inside the hero instead of as its own thin band --- */
.hero__stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,3vw,44px);padding-block:clamp(20px,2.6vw,30px) clamp(26px,3.4vw,40px);
  border-top:1px solid rgba(216,184,119,.34)}
.hstat{display:flex;flex-direction:column;gap:3px}
.hstat strong{font-family:var(--ff-d);font-size:clamp(1.15rem,1.7vw,1.5rem);color:var(--gold-l);font-weight:500;line-height:1.1}
.hstat span{font-size:.92rem;color:rgba(240,244,231,.90);line-height:1.45}
.hstat strong span{font-size:inherit;color:inherit;line-height:inherit;letter-spacing:inherit}
.hstat__big{white-space:nowrap}
@media(max-width:860px){.hero__stats{grid-template-columns:1fr 1fr;gap:18px}}
@media(max-width:420px){.hero__stats{grid-template-columns:1fr}}


/* ================= LIGHT VARIANT =================
   Faithful to the client's stated references (Shoup Legal, P. Allen Smith):
   light and airy, a lead form on the hero, warm family photography.
   Same stylesheet, switched by a body class, so the two builds cannot drift. */

/* hero: bright, low scrim, copy left and form right */
body:not(.v-light) .hero__form{display:none}
.v-light .hero--photo{min-height:auto;background:var(--ivory)}
.v-light .hero--photo .hero__bg img{object-position:50% 46%;
  filter:brightness(1.34) saturate(.88) contrast(.94)}
.v-light .dead--never-used .hero__scrim{
  background:linear-gradient(100deg,rgba(251,249,241,.95) 0%,rgba(251,249,241,.90) 30%,rgba(251,249,241,.66) 58%,rgba(251,249,241,.30) 100%),
             linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.10) 34%,rgba(246,242,231,.55) 100%)}
/* the copy is dark on a light ground now, not white on a dark one */
.v-light .hero--photo .hero__kicker{color:var(--gold-d)}
.v-light .hero--photo .hero__title{color:var(--green-d);text-shadow:none}
.v-light .hero--photo .hero__title em{color:var(--gold-d)}
.v-light .hero--photo .hero__tagline{color:var(--green)}
.v-light .hero--photo .hero__lead{color:var(--ink-soft)}
.v-light .hero--photo .hero__crest{color:var(--gold-d);opacity:1}
.v-light .hero--photo .hero__rule{background:linear-gradient(90deg,var(--gold-d),rgba(111,87,41,0))}
.v-light .hero--photo .hero__trust{color:var(--ink);border-top-color:rgba(111,87,41,.34)}
.v-light .hero--photo .hero__trust svg{color:var(--green)}
.v-light .hero--photo .btn--ghost-l{border-color:var(--green);color:var(--green)}
.v-light .hero--photo .btn--ghost-l:hover{color:#fff}
.v-light .hero--photo .btn--ghost-l::after{background:var(--green)}
.v-light .vignette::before{background:radial-gradient(120% 90% at 50% 45%,transparent 62%,rgba(120,110,84,.14) 100%)}
.v-light .grainy::after{opacity:.09}
.v-light .hero--photo .hero__in{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,4vw,60px);
  align-items:center;padding-block:clamp(140px,15vw,180px) clamp(40px,5vw,64px)}
.v-light .hero--photo .hero__copy{max-width:none}
.v-light .hero--photo .hero__title{font-size:clamp(2.4rem,4.4vw,3.7rem)}
.v-light .hero--photo .hero__lead{max-width:none;font-size:1.08rem}
.v-light .hero__form .lead-card{background:#fff;border-top:4px solid var(--teal);
  box-shadow:0 30px 70px -34px rgba(20,28,16,.6)}
.v-light .lead-card .btn--solid{background:var(--teal);border-color:var(--teal)}
.v-light .lead-card .btn--solid:hover{background:var(--blue-btn-d);border-color:var(--blue-btn-d)}
.v-light .lead-card__title{font-size:1.75rem}
.v-light .hero--photo .hero__scroll{display:none}
@media(max-width:980px){.v-light .hero--photo .hero__in{grid-template-columns:1fr}}

/* stat strip reads on the lighter image */
.v-light .hero__stats{border-top-color:rgba(111,87,41,.30)}
.v-light .hstat strong{color:var(--green-d)}
.v-light .hstat span{color:var(--ink-soft)}

/* teal accent from Shoup instead of the brass, and a lighter overall page */
.v-light .btn--goldsolid{background:var(--blue-btn);border-color:var(--blue-btn);color:#fff}
.v-light .btn--goldsolid:hover{background:var(--blue-btn-d);border-color:var(--blue-btn-d);color:#fff}
.v-light .nav__links .top::after{background:var(--teal)}
/* the light hero is light, so the nav over it must be inked, not knocked out */
/* 🔴 These used to flip the transparent bar to DARK type in the light variant,
   because the light variant's hero used to be a pale photograph. Since 8/19 both
   variants open on the same dark film hero, so dark-on-dark made the whole nav
   unreadable over the video. The transparent state is light in both variants
   again; only the scrolled .nav--solid state differs. */
.v-light .nav--over .nav__brand .nav__mark--dark{display:none}
.v-light .nav--over .nav__brand .nav__mark--light{display:block}
.v-light .nav--over .nav__links .top{color:rgba(255,255,255,.92)}
.v-light .nav--over .nav__links .top:hover{color:#fff}
.v-light .nav--over .nav__ph{color:rgba(255,255,255,.92)}
.v-light .nav--over .nav__ph:hover{color:#fff}
.v-light .nav--over .burger span{background:#fff}
.v-light .nav--over.nav--solid .nav__brand .nav__mark--dark{display:block}
.v-light .nav--over.nav--solid .nav__brand .nav__mark--light{display:none}
.v-light .nav--over.nav--solid .nav__links .top{color:var(--green-d)}
.v-light .nav--over.nav--solid .nav__ph{color:var(--green-d)}
.v-light .nav--over.nav--solid .burger span{background:var(--ink)}
.v-light .eyebrow,.v-light .hero__kicker,.v-light .pcard__tag{color:var(--teal)}
.v-light .rule-gold{background:linear-gradient(90deg,var(--teal),rgba(87,124,147,0))}
.v-light .pcard--flag{border-top-color:var(--teal)}
.v-light .pcard--flag::after{background:var(--teal)}

/* the two dark punctuation bands soften to sage rather than near-black */
.v-light .statement--photo .statement__veil{
  background:linear-gradient(168deg,rgba(65,87,63,.86) 0%,rgba(51,70,49,.90) 100%)}
.v-light .plate__veil{
  background:linear-gradient(92deg,rgba(51,70,49,.86) 0%,rgba(51,70,49,.58) 44%,rgba(51,70,49,.14) 100%)}
.v-light .statement--photo .statement__seal,.v-light .statement--photo .statement__big em,
.v-light .plate__q em,.v-light .plate__by{color:#e6dcc2}

/* founder portrait slot uses the porch photograph in this variant */

/* =====================================================================
   FILM HERO, no overlay (2026-08-19, second cut)
   Tiffany: "she doesnt want an overlay in images. She wants them vivid."

   The first cut put white type over the loop under a measured wash. That is the
   fault Jennifer named in the first place, "the key images currently being washed
   in the background behind the text", and it is not what the reference does.
   pallensmith.com, the site Tamara keeps pointing at, runs its photography at FULL
   strength with nothing over it and puts every real sentence in a clean band next
   to the picture. So does this now.

   🔴 There is no .hero__scrim element and no scrim rule. Do not add one back. The
   contrast problem a scrim used to solve does not exist any more, because no text
   is on the photograph: the type is ink on ivory at 13.3:1, and the picture is
   free to do the emotional work it was always supposed to do.
   ===================================================================== */
.hero--film{display:block;background:var(--ivory);overflow:hidden}
/* 🔴 THE INTERIOR HERO, 2026-09-02. Same treatment as the home page, a still instead of
   the licensed loop. It inherits every .hero--film rule below, including the four-layer
   glyph shadow, which is the thing that lets white type sit on a photograph without a
   scrim. Only two things differ.
   1. 2:1, not 3:2. A 3:2 stage is 960px at 1440 wide and swallows the page on a page
      that is not the home page; 2:1 is 720 and capped at 620, which is a header.
   2. The eyebrow goes white and gets the same shadow, because on the home page there is
      no eyebrow on the film at all. */
.hero--still .hero__stage{aspect-ratio:2/1;max-height:min(62vh,620px)}

/* 🔴 THE SPLIT HERO, for the one page whose hero is a photograph of PEOPLE. The words
   sit BESIDE the picture on solid colour, never on it. That is not a style choice, it
   is the rule from 2026-08-19: "she doesnt want an overlay in images. She wants them
   vivid." The photograph here runs at full strength, uncropped left and right beyond
   what the column shape takes, and nothing is dimmed anywhere.
   🔴 The panel is the deep green, not the coffee. Coffee is the Letters for Legacy
   plate and it should keep meaning that one thing. */
.hero--split{display:block;background:var(--green-dd);overflow:hidden}
.hero__split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:stretch;min-height:clamp(420px,46vw,620px)}
.hero__panel{background:var(--green-dd);display:flex;align-items:center;
  justify-content:flex-start}
/* 🔴 THE WORDS START ON THE SITE'S LEFT GUTTER, the same edge every heading below the
   hero starts on. The first version right-aligned the block inside the panel and capped
   its width, which put the headline at 234px on a 1440 screen and 695px on a 1920 one
   while the content underneath began at 192 and 432. Measured, not eyeballed: a hero
   that does not share an edge with the page reads as a banner pasted on top of it. */
.hero__panel-in{width:100%;
  padding-block:clamp(38px,5vw,72px);
  padding-right:clamp(28px,3vw,56px);
  padding-left:max(clamp(22px,5.5vw,72px),
                   calc((100vw - var(--maxw))/2 + clamp(22px,5.5vw,72px)))}
.hero--split .eyebrow,.hero--split .eyebrow--light{color:var(--gold-l)!important;margin-bottom:1.1rem}
.hero--split .eyebrow::before,.hero--split .eyebrow--light::before{background:var(--gold-l)}
.hero--split .hero__title{color:#fff;font-size:clamp(2.1rem,3.6vw,3.4rem);line-height:1.1;
  margin:0 0 1.6rem;max-width:16ch;text-shadow:none}
.hero--split .hero__title em{color:#fff;font-style:normal}
.hero--split .hero__btns{display:flex;margin:0}
.hero--split .btn--solid{background:var(--blue-btn);border-color:var(--blue-btn)}
.hero--split .btn--solid:hover{background:var(--blue-btn-d);border-color:var(--blue-btn-d)}
.hero__pic{margin:0;position:relative;overflow:hidden;background:var(--green-ddd)}
.hero__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 34%}
/* 2026-09-24: landscape photographs (the city landmarks, the office, the ACM room) get the
   wider picture column, so a 16:9 original is not cut down to a near square. */
@media(min-width:881px){.hero--split-wide .hero__split{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  min-height:clamp(380px,36vw,560px)}}
.hero--split-wide .hero__pic img{object-position:50% 50%}
@media(max-width:880px){
  .hero__split{grid-template-columns:1fr;min-height:0}
  .hero__panel{order:2;justify-content:flex-start}
  .hero__panel-in{max-width:none;padding:clamp(30px,7vw,48px) clamp(22px,5.5vw,40px)}
  /* stacked, the picture needs its own height or an absolutely positioned image has none */
  .hero__pic{order:1;aspect-ratio:3/2}
}
.hero--still .hero__say{max-width:34ch}
.hero--still .hero__say .eyebrow,.hero--still .hero__say .eyebrow--light{
  color:#fff!important;margin-bottom:.9rem;
  text-shadow:0 1px 1px rgba(20,16,10,.95), 0 0 7px rgba(20,16,10,.88),
              0 2px 14px rgba(20,16,10,.7)}
.hero--still .hero__say .eyebrow::before,.hero--still .hero__say .eyebrow--light::before{
  background:rgba(255,255,255,.85);margin-left:-48px}
/* 🔴 A WRAPPED EYEBROW USED TO BREAK ITS OWN ALIGNMENT. The rule is an ::before on an
   inline-block, so the first line starts 48px in and every wrapped line starts at the
   container edge: "ESTATE PLANNING IN EDMOND," indented, then "OKLAHOMA" hanging out to
   the left under it. Indenting the whole block and pulling the rule back out by the
   same 48px puts every line on one left edge with the rule in the margin. */
.hero--still .hero__say .eyebrow{padding-left:48px}
/* the head that is left under the hero carries the standfirst and the buttons only, so
   it needs less air above it than a page head that opened the page */
.phead--under{padding-top:clamp(34px,4.4vw,64px)}
.phead--under .phead__mark{display:none}
/* 🔴 aspect-ratio 3/2, matching the source and the loop, so the BAND adds no crop of
   its own. It used to be a fixed height and the picture was being cut twice, once on
   export and once here (Tiffany, 8/19: "the layout cuts out a lot of the image").
   The max-height is the only trim left and it only bites on very wide screens. */
.hero--film .hero__stage{position:relative;width:100%;aspect-ratio:3/2;
  max-height:min(82vh,880px);overflow:hidden;background:var(--green-ddd)}
.hero--film .hero__stage>img,.hero--film .hero__film{position:absolute;inset:0;width:100%;
  height:100%;object-fit:cover;object-position:50% 50%;border:0}
.hero--film .hero__still{z-index:0}
.hero--film .hero__film{z-index:1}
@media(prefers-reduced-motion:reduce){.hero--film .hero__film{display:none}}
.no-autoplay .hero--film .hero__film{display:none}
/* 🔴 2026-08-28: THE MESSAGE IS ON THE FILM, LOW AND LEFT, ON A SOLID PANEL.
   From the Tamara + Tiff review and Jennifer Dudley's CMO note the same day, which
   agreed on the fault: the words were below the picture, so a visitor could not
   tell in five seconds what the firm does. Tamara's own direction was one button,
   a darker background behind the words, the box at about HALF its previous size,
   LOWER on the video, video size unchanged.
   🔴 The panel is OPAQUE. It covers a corner of the frame; it does not dim it.
   That is what keeps "vivid, no overlays" true, and it is why there is still no
   .hero__scrim rule anywhere in this file. Do not add one.
   🔴 The stage is capped a little tighter than before (was min(88vh,940px)) for
   ONE reason: the panel has to be above the fold on a laptop. At 88vh the bottom of
   the panel landed within a hair of the viewport edge. 82vh puts the whole panel,
   button included, on the first screen at 1512x860 and on a 13in MacBook. */
.hero--film .hero__over{position:absolute;inset:0;z-index:2;display:flex;
  align-items:flex-end;justify-content:flex-start;
  padding-bottom:clamp(30px,5vh,72px);pointer-events:none}
.hero--film .hero__over-in{width:100%}
/* 🔴 NO BLOCK. Second pass 2026-08-28: "remove the blocked background on the hero and
   just have one sentence and the Right Fit Call CTA only in the bottom left." So no
   panel, no kicker, no second button. The words sit straight on the film.
   🔴 The shadow is carried BY THE GLYPHS and that is load-bearing, not decoration.
   /hero-headline/ measured this loop frame by frame: plain white with no edge failed
   3.0:1 on 26 of 27 seconds and vanished entirely against the pale sky. A glyph
   shadow darkens only the few pixels each letter casts, so nothing BETWEEN the words
   is dimmed and the picture still runs at full strength. That is what keeps "vivid,
   no overlays" true with the block gone. Do not swap it for a scrim or a gradient. */
.hero--film .hero__say{max-width:30ch;pointer-events:auto}
/* 🔴 THE SHADOW STACK IS MEASURED, NOT DECORATIVE, and it is deliberately heavy.
   Composited the type over all twelve shots of the actual loop and looked at every
   one. A light shadow held on nine and FAILED on three: the white stone house, the
   pale sand around the pump jacks, and worst of all the hydrangeas, where white type
   on white-blue flower heads simply vanished. Four layers now: a tight 1px edge and
   a 6px halo do the work on pale frames, the two wide soft ones keep it from reading
   as an outline on the dark ones. Still no block, still no wash: only the pixels each
   glyph casts are darkened, so the photograph runs at full strength between the
   words. If a new clip is added to the loop, composite the type over it and LOOK
   before shipping. */
.hero--film .hero__title{color:#fff;font-size:clamp(1.75rem,2.9vw,2.7rem);
  line-height:1.14;margin:0 0 1.5rem;max-width:none;margin-inline:0;
  text-shadow:0 1px 1px rgba(20,16,10,.95), 0 0 7px rgba(20,16,10,.88),
              0 2px 18px rgba(20,16,10,.72), 0 6px 46px rgba(20,16,10,.58)}
.hero--film .hero__title em{font-style:italic;color:#fff}
.hero--film .hero__btns{justify-content:flex-start;margin:0}
.hero--film .btn--solid{background:var(--blue-btn);border-color:var(--blue-btn)}
.hero--film .btn--solid:hover{background:var(--blue-btn-d);border-color:var(--blue-btn-d)}
/* the light variant runs the same hero: there is no dark treatment left to differ from */
.v-light .hero--film{background:var(--ivory)}
.v-light .hero--film .hero__title,.v-light .hero--film .hero__title em{color:#fff;
  text-shadow:0 1px 1px rgba(20,16,10,.95), 0 0 7px rgba(20,16,10,.88),
              0 2px 18px rgba(20,16,10,.72), 0 6px 46px rgba(20,16,10,.58)}
@media(max-width:920px){
  /* 🔴 On a phone a 3:2 film is only ~260px tall and the panel is taller than that,
     so the words overflowed the top of the picture and got clipped. MEASURED at
     390x844, not guessed. A portrait 4:5 stage gives the film ~490px, the panel sits
     in the lower half of it with room to spare, and the button is still on the first
     screen. The film is not squeezed; it is taller than it was. */
  .hero--film .hero__stage{max-height:62vh}
  .hero--film .hero__over{padding-bottom:clamp(18px,2.6vh,30px)}
  .hero--film .hero__say{max-width:none}
  .hero--film .hero__title{font-size:clamp(1.45rem,5.3vw,1.95rem)}
  .hero--film .hero__btns .btn{width:100%;justify-content:center}
}
/* phones only. A 3:2 film on a 390px screen is 260px tall and the panel is taller
   than that, so the words overflowed the top of the picture and were clipped. 4:5
   gives the film ~490px, the panel sits in its lower half with room, and the button
   is still on the first screen. Measured at 390x844, not guessed. Tablets keep 3:2:
   at 834px wide the panel fits inside it already, and forcing 4:5 there pushed the
   button to within 40px of the fold. */
@media(max-width:620px){
  .hero--film .hero__stage{aspect-ratio:4/5;max-height:none}
}

/* ---------- footer newsletter (CMO structure doc, final line) ---------- */
.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}
.footnl{background:var(--green-dd);border-top:1px solid rgba(255,255,255,.10)}
.footnl__in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);
  align-items:center;padding:clamp(30px,4vw,46px) 0}
.footnl__copy h4{color:#fff;font-family:var(--ff-d);font-weight:400;font-size:1.5rem;margin:0 0 .35em}
.footnl__copy p{color:#cfcec1;margin:0;font-size:.95rem;line-height:1.6;max-width:56ch}
.footnl__form{display:flex;gap:10px}
.footnl__form input[type=email]{flex:1;min-width:0;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.28);color:#fff;padding:1.05em 1.1em;font-family:var(--ff-b);
  font-size:.98rem;border-radius:0}
.footnl__form input[type=email]::placeholder{color:rgba(255,255,255,.62)}
.footnl__form input[type=email]:focus{outline:2px solid var(--sage);outline-offset:1px;
  background:rgba(255,255,255,.12)}
.footnl__form .btn{white-space:nowrap;background:var(--sage);color:var(--green-ddd);border-color:var(--sage)}
.footnl__form .btn:hover{background:#fff;border-color:#fff;color:var(--green-ddd)}
@media(max-width:860px){.footnl__in{grid-template-columns:1fr;gap:20px}}
@media(max-width:520px){.footnl__form{flex-direction:column}}

/* ---------- service pages (2026-08-19) ------------------------------------
   The section furniture for the eight estate-planning service pages, built to the
   CMO's structure document. Nothing here is new visual language: it reuses the
   same rules, cards, ticklists and bands as the rest of the site so a service page
   reads as part of the firm rather than as a landing page bolted on the side. */
.phead__lead{font-family:var(--ff-b)!important;font-size:1.02rem!important;line-height:1.7!important;
  max-width:60ch;opacity:.94}
.narrow-copy{max-width:760px;margin-inline:auto}
.narrow-copy p{max-width:none}
.notefor{background:var(--paper);border-left:3px solid var(--olive);padding:16px 20px;
  font-size:.97rem;color:var(--ink-soft);margin:1.4rem 0 1.8rem;max-width:none}
.notefor strong{color:var(--ink)}
.ticklist--tight{gap:9px;margin:.8rem 0 0}
.ticklist--tight li{font-size:.97rem}
.ticklist--light li{color:#e2e0d3}
.ticklist--light svg{color:var(--sage)}

/* who-we-serve style scenario blocks: long-form, one column, easy to read */
.scens{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 44px;max-width:1060px;margin-inline:auto}
.scen{border-top:1px solid var(--line);padding-top:22px}
.scen h3{color:var(--green-d);margin-bottom:.55em}
.scen p{color:var(--ink-soft);margin:0;font-size:1.01rem;line-height:1.72;max-width:none}
@media(max-width:820px){.scens{grid-template-columns:1fr;gap:28px}}

/* Oklahoma section, on the dark brand band */
.okgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,4.5vw,64px);align-items:start}
.okgrid__copy p{color:#e6e4d8;max-width:none}
@media(max-width:860px){.okgrid{grid-template-columns:1fr;gap:24px}}

/* the three-stage firm process */
.procs{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:1060px;margin-inline:auto}
.proc{background:var(--paper);border:1px solid var(--line);padding:30px 30px 26px;position:relative}
.proc__n{display:block;font-family:var(--ff-d);font-size:2.1rem;line-height:1;color:var(--olive);
  opacity:.65;margin-bottom:10px}
.proc h3{margin-bottom:.2em}
@media(max-width:900px){.procs{grid-template-columns:1fr}}

/* related planning */
.relgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1100px;margin-inline:auto}
.relcard{display:flex;flex-direction:column;gap:10px;background:var(--paper);border:1px solid var(--line);
  padding:24px 22px;color:var(--ink);transition:.28s;border-top:3px solid transparent}
.relcard:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--sh-md);border-top-color:var(--green)}
.relcard__ic{display:inline-flex;color:var(--green)}
.relcard strong{font-weight:600;font-size:1.02rem;line-height:1.3}
.relcard__go{margin-top:auto;display:inline-flex;align-items:center;gap:7px;color:var(--green-d);
  font-size:.82rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.relgrid--links{margin-top:20px}
.relcard--plain{background:var(--cream)}
@media(max-width:900px){.relgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.relgrid{grid-template-columns:1fr}}

/* the services index */
.svcgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;max-width:1060px;margin-inline:auto}
.svc{display:flex;flex-direction:column;gap:12px;background:var(--paper);border:1px solid var(--line);
  padding:34px;color:var(--ink);transition:.3s;border-top:3px solid transparent}
.svc:hover{text-decoration:none;transform:translateY(-4px);box-shadow:var(--sh-md);border-top-color:var(--green)}
.svc__ic{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
  background:var(--cream);color:var(--green);border:1px solid var(--sage-soft)}
.svc h3{margin:0}
.svc p{color:var(--muted);margin:0;font-size:1rem}
.svc__go{margin-top:auto;display:inline-flex;align-items:center;gap:7px;color:var(--green-d);
  font-size:.82rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
@media(max-width:820px){.svcgrid{grid-template-columns:1fr}}
/* the light variant paints the same furniture; these surfaces are already paper */
.v-light .proc,.v-light .relcard,.v-light .svc,.v-light .notefor{background:var(--paper)}
.v-light .relcard--plain{background:var(--cream)}

/* ---------- photographic page mastheads, no overlay, no crop ---------------
   Third cut. The photograph is not a band across the top any more: a full 3:2 frame
   across 1500px of screen is a thousand pixels tall, so a full-bleed masthead had to
   crop and that is the thing being complained about. Beside the title instead, at
   a bit over half the width, the WHOLE frame fits in a sensible height. Nothing is
   written on it, nothing is cut off it. It stacks under the title on a phone. */
/* the reel masthead reuses the photo masthead's flow: a band in normal flow ABOVE the
   title, never a background with type washed over it (Tiffany, 8/19: no overlay). */
.phead--reel{background:var(--ivory);isolation:auto}
.phead--reel .phreel{margin-bottom:clamp(30px,4vw,58px)}
.phead--photo{background:var(--ivory);isolation:auto}
.phead--photo .phead__bg{position:relative;width:100%;overflow:hidden;background:var(--green-ddd)}
.phead--photo .phead__bg img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;display:block}
.phead--photo .phead__in{position:relative;z-index:1;padding:clamp(40px,5vw,68px) 0 clamp(38px,4.6vw,60px)}
.phead--photo .phead__mark{opacity:.07}
@media(min-width:961px){
  .phead--photo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
    align-items:center;gap:clamp(30px,4vw,64px)}
  /* 🔴 align-self:center, not height:100%. Stretching the cell and capping the image
     left a dark band under the photograph wherever the text column was taller. */
  .phead--photo .phead__bg{order:2;align-self:center;background:transparent}
  .phead--photo .phead__bg img{max-height:min(72vh,660px);width:100%;object-fit:cover}
  .phead--photo .phead__in{order:1;max-width:none;padding-inline:clamp(22px,5vw,72px) 0;
    margin-left:auto;width:100%;max-width:calc(var(--maxw) / 2 + 40px)}
  .phead--photo .phead__mark{display:none}
}
.v-light .phead--photo{background:var(--ivory)}

/* ---------- editorial photograph band (mid-page imagery) ---------- */
/* 🔴 contained rather than full bleed, and aspect-ratio 3/2, so the entire frame is
   on the page. Full bleed at 3:2 is a thousand pixels tall on a desktop, which is why
   it used to be a fixed height and cropping hard. */
.photoband{overflow:hidden;background:var(--ivory);padding:clamp(10px,2vw,26px) 0 0}
.photoband>img{display:block;width:calc(100% - 2 * clamp(22px,5.5vw,72px));max-width:var(--maxw);
  margin-inline:auto;aspect-ratio:3/2;height:auto;object-fit:cover}
/* the caption used to sit on a dark gradient over the bottom of the picture. It is
   under it now, on paper. No overlay anywhere on this site (Tiffany, 8/19). */
.photoband__cap{padding:14px 0 18px}
.photoband__cap p{color:var(--muted);margin:0;font-size:.88rem;letter-spacing:.02em;max-width:70ch}
.v-light .photoband{background:var(--ivory)}


/* ---------- statement + plate, de-overlaid (2026-08-19, second cut) ----------
   Both of these used to be type written over a DARKENED STOCK oak tree, which was
   an overlay and stock at the same time. The statement is now a typographic band on
   the brand green with no picture at all; the plate is the firm's own photograph at
   full strength with its quote in a clean band underneath. */
.statement--band{background:var(--green-dd);color:#f1efe4}
.statement--band .statement__in{position:relative;z-index:1;padding:clamp(64px,8vw,116px) 0;
  max-width:1000px;margin-inline:auto;text-align:center}
.statement--band .statement__seal{display:inline-flex;color:var(--sage);margin-bottom:20px}
.statement--band .statement__lead{color:var(--sage);font-family:var(--ff-b);font-weight:700;
  font-size:.84rem;letter-spacing:.2em;text-transform:uppercase;margin:0 0 1.2rem;max-width:none}
.statement--band .statement__big{color:#fff;font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.22;
  margin:0 auto 1.4rem;max-width:22ch}
.statement--band .statement__big em{color:var(--sage-soft)}
/* a statement with nothing under it needs no bottom margin fighting the padding */
.statement__in > .statement__big:last-child{margin-bottom:0}
/* a statement carrying ONE line, used at the top of a service page rather than as
   the emotional centre of the home page, does not need 140px of air above and below
   it. 783px for a single sentence read as a gap, not as a pause. */
.statement--compact{padding-block:clamp(44px,5.5vw,80px)}
.statement--compact .statement__seal{margin-bottom:6px}
.statement--band .statement__sub{color:#dcdacd;margin:0 auto;max-width:62ch;font-size:1.03rem;line-height:1.7}
.v-light .statement--band{background:var(--green-dd)}

/* 🔴 the original .plate is a flex ROW with the image absolutely positioned behind
   the quote. Both have to be undone here or the picture ends up sitting beside the
   type at half width, which is what happened on the first pass. */
.plate{position:static;display:block;min-height:0;align-items:initial;overflow:hidden;
  background:var(--ivory);isolation:auto;padding-top:clamp(10px,2vw,26px)}
.plate>img{position:static;width:100%;height:clamp(300px,44vw,540px);object-fit:cover;
  object-position:50% 34%;display:block;transform:none;filter:none}
.plate .plate__in{position:relative;z-index:1;padding:clamp(34px,4.5vw,58px) 0 clamp(36px,5vw,62px);
  text-align:center;max-width:900px;margin-inline:auto}
.plate .plate__q{color:var(--green-dd);font-family:var(--ff-d);font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1.3;margin:0 0 .9rem;max-width:none;text-shadow:none}
.plate .plate__q em{font-style:italic;color:var(--coffee)}
.plate .plate__by{color:var(--muted);font-family:var(--ff-b);font-weight:700;font-size:.8rem;
  letter-spacing:.18em;text-transform:uppercase;margin:0;max-width:none;text-shadow:none}
.v-light .plate{background:var(--ivory)}


/* ---------- event date cards carry a photograph (2026-08-19) ----------
   Tiffany: "on the events section, she wants images on each date card." Same rules
   as everywhere else on this site: 3:2 so the frame is not cut, and nothing written
   over it. The card is a flex column so the button still pins to the bottom and the
   cards stay level whatever the blurb length. */
.ev{display:flex;flex-direction:column}
.ev__pic{margin:-1px -1px 20px;overflow:hidden;background:var(--cream-d)}
.ev__pic img{display:block;width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.61,.24,1)}
.ev:hover .ev__pic img{transform:scale(1.03)}
.ev__cta{margin-top:auto}
@media(max-width:600px){.ev__pic{margin-bottom:16px}}



/* ===================================================================
   CREAM AND WHITE BALANCE (2026-08-19)
   Jennifer Dudley, 8/17: the design reads "staunchy", "stormy" and "dry", and the
   action she wrote down was to "incorporate a cream/white balance for a fresh
   feel". Counted on the home page before this block: SEVEN dark surfaces between
   the hero and the footer (proof bar, statement, the steps band, the recognition
   band, the start-here band, the newsletter strip, the footer). That is what
   "stormy" means in practice, and no amount of lighter type fixes it.

   One dark moment is kept, the statement band, because a single one reads as
   deliberate. Everything else between the hero and the footer is paper, ivory or
   cream. The green is still everywhere: in the type, the rules, the marks and the
   outline buttons, which is where a brand colour belongs on a light page.
   =================================================================== */
.proofbar{background:var(--ivory);color:var(--ink-soft);border-bottom:1px solid var(--line);
  border-top:1px solid var(--line)}
.proofbar .hstat strong{color:var(--green-dd)}
.proofbar .hstat span{color:var(--muted)}

/* the steps band, the recognition band and the start-here band all used the same
   dark green gradient. On cream they read as three different sections again. */
.v-light .stepspin.band--brand,
.v-light .band--brand.recog-sec,
.v-light .band--brand.starthere{background:var(--cream);color:var(--ink)}
.v-light .stepspin.band--brand .eyebrow,
.v-light .band--brand.recog-sec .eyebrow,
.v-light .band--brand.starthere .eyebrow{color:var(--gold-d)!important}
.v-light .stepspin.band--brand h2,.v-light .stepspin.band--brand h3,
.v-light .band--brand.recog-sec h2,.v-light .band--brand.recog-sec h3,
.v-light .band--brand.starthere h2,.v-light .band--brand.starthere h3{color:var(--green-dd)}
.v-light .stepspin.band--brand p,.v-light .stepspin.band--brand li,
.v-light .band--brand.recog-sec p,.v-light .band--brand.recog-sec li,
.v-light .band--brand.starthere p,.v-light .band--brand.starthere li{color:var(--ink-soft)}
.v-light .band--brand.starthere .starthere__ph,
.v-light .band--brand.starthere .starthere__lede{color:var(--ink-soft)}
.v-light .band--brand.starthere .ticklist svg,
.v-light .stepspin.band--brand .ticklist svg{color:var(--green)}
.v-light .band--brand.starthere .starthere__pts li,
.v-light .band--brand.starthere .starthere__pts span{color:var(--ink-soft)}
.v-light .band--brand.starthere .starthere__mark,
.v-light .stepspin.band--brand .starthere__mark{color:var(--green);opacity:.05}
.v-light .stepspin.band--brand .btn--ghost-l,
.v-light .band--brand.recog-sec .btn--ghost-l,
.v-light .band--brand.starthere .btn--ghost-l{border-color:var(--green);color:var(--green)}
.v-light .stepspin.band--brand .btn--ghost-l:hover,
.v-light .band--brand.recog-sec .btn--ghost-l:hover,
.v-light .band--brand.starthere .btn--ghost-l:hover{background:var(--green);color:#fff}
.v-light .band--brand.starthere .starthere__ph a{color:var(--blue-txt)}

/* the closing call to action was the same dark gradient a fourth time */
.v-light .cta-band{background:var(--cream-d);color:var(--ink)}
.v-light .cta-band h2{color:var(--green-dd)}
.v-light .cta-band p{color:var(--ink-soft)}
.v-light .cta-band .btn--ghost-l{border-color:var(--green);color:var(--green)}
.v-light .cta-band .btn--ghost-l:hover{background:var(--green);color:#fff}
.v-light .cta-band svg{color:var(--green)}

/* 🔴 More air. "So maybe more white space? Clean-looking" (Tiffany, relaying).
   The base rule is already clamp(78px,10.5vw,152px); this RAISES it. Checked
   before writing, because the obvious version of this edit sets a number that
   happens to be SMALLER than the one already there and quietly takes air away. */
.band{padding:clamp(88px,11.5vw,168px) 0}
.section-head{margin-bottom:clamp(42px,5.4vw,70px)}
.narrow-copy p,.prose p{margin-bottom:1.35rem}


/* the step panel was drawn for a dark band. On cream, white type and a white
   outline numeral are invisible, so they are restated. */
.v-light .stepspin.band--brand .stepspin__rail li{color:var(--muted)}
.v-light .stepspin.band--brand .stepspin__rail li[data-on="1"]{color:var(--green-dd)}
.v-light .stepspin.band--brand .stepspin__rail li[data-on="1"]::before{background:var(--blue-btn)}
.v-light .stepspin.band--brand .spanel__n{-webkit-text-stroke-color:rgba(121,122,104,.55);
  color:transparent}
.v-light .stepspin.band--brand .spanel h3{color:var(--green-dd)}
.v-light .stepspin.band--brand .spanel p{color:var(--ink-soft)}
.v-light .stepspin.band--brand .eyebrow{color:var(--gold-d)!important}


/* ---------- "which plan is mine" chooser ----------
   Jennifer: the plan pages "force clients to self-diagnose". This is the fix on the
   page itself; the nav dropdown got the same treatment. Each card leads with the
   family's own words and names the product LAST, in small type, where it belongs. */
.picks{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:1000px;margin-inline:auto}
.pick{display:flex;flex-direction:column;gap:10px;background:var(--paper);border:1px solid var(--line);
  border-left:3px solid var(--blue-btn);padding:28px 30px;color:var(--ink);transition:.28s}
.pick:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--sh-md);
  border-left-color:var(--green)}
.pick__q{font-family:var(--ff-d);font-size:1.32rem;line-height:1.3;color:var(--green-dd)}
.pick__d{color:var(--muted);font-size:.98rem;line-height:1.6}
.pick__n{margin-top:auto;display:inline-flex;align-items:center;gap:8px;color:var(--blue-txt);
  font-family:var(--ff-b);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
@media(max-width:800px){.picks{grid-template-columns:1fr}}


/* the glossary hands the reader on to the page that does the work */
.gterm__see{display:inline-flex;align-items:center;gap:8px;margin-top:.5rem;color:var(--blue-txt);
  font-family:var(--ff-b);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.gterm__see:hover{color:var(--green-d)}


/* the date is the loudest thing on an event card now, and the actions sit together.
   "Simplify event listings with clear dates and Watch Now buttons, inspired by the
   P. Allen Smith newsletter" (Jennifer, 8/17). */
.ev__when{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 .7rem}
.ev__whenmain{font-family:var(--ff-d);font-size:1.16rem;line-height:1.3;color:var(--green-dd)}
.ev__cost{font-family:var(--ff-b);font-weight:700;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:var(--green-d);padding:.3em .6em}
.ev__acts{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px}
.ev__acts .btn{flex:1 1 auto}
.ev__watch{white-space:nowrap}


/* ---------- three-up photo strip ----------
   Tiffany, 8/19: "the other pages other than the home page need more imagry."
   Same rules as everything else here: the firm's own photography, 3:2 so nothing
   is cut, and nothing written over it. */
/* 🔴 2026-08-31: the flat three-up strip is now a row of GALLERY CARDS. Tamara:
   "the images of people at the event at the bottom, move those up under the events
   section and make those images gallery cards." On the home page the section moves
   (see the PSTRIP marker in _gen.py); everywhere else it stays where it was and
   only the treatment changes. A card carries the photograph's own description,
   because a picture of a room full of people you are being invited to join should
   say what it is. */
.pstrip{background:var(--cream);padding:clamp(20px,3vw,44px) 0 clamp(28px,4vw,60px)}
/* the band and the strip stack on most pages; give them room to read as two
   things rather than one run-on gallery */
.photoband + .pstrip{padding-top:clamp(26px,3.4vw,48px)}
.pstrip__in{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
.gcard{margin:0;display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);box-shadow:var(--sh);
  transition:transform .35s cubic-bezier(.22,.61,.24,1),box-shadow .35s}
.gcard:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.gcard__ph{display:block;overflow:hidden;background:var(--cream-d)}
.gcard__ph img{display:block;width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;
  transition:transform .7s cubic-bezier(.22,.61,.24,1)}
.gcard:hover .gcard__ph img{transform:scale(1.05)}
.gcard__cap{padding:14px clamp(14px,1.5vw,20px) 16px;font-size:.9rem;line-height:1.55;
  color:var(--muted)}
@media(max-width:760px){
  .pstrip__in{grid-template-columns:1fr 1fr}
  .gcard:nth-child(3){display:none}
}
@media(max-width:460px){
  .pstrip__in{grid-template-columns:1fr}
  .gcard:nth-child(3){display:flex}
}


/* ---------- embedded film block ----------
   "is there a video we can imbedd?" (Tiffany, 8/19). A real <video controls> that a
   visitor chooses to play, beside its copy rather than under it, with a poster so
   the room is visible before anyone presses anything. */
.filmblk__in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(30px,4.5vw,64px);align-items:center}
.filmblk__copy h2{margin-bottom:.55em}
.filmblk__copy p{color:var(--ink-soft)}
.filmblk__note{font-family:var(--ff-b);font-weight:700;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:1.6rem!important}
.filmblk__v{margin:0}
.filmblk__v video{display:block;width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;
  background:var(--green-ddd)}
.filmblk__v figcaption{margin-top:12px;font-size:.86rem;color:var(--muted);letter-spacing:.02em}
@media(max-width:860px){.filmblk__in{grid-template-columns:1fr;gap:26px}}


/* ---------- estate section dividers ----------
   "some beautiful estate images throughout the site where it divides sections this
   does give it the pretty spacey and P Allen feel" (Tiffany, 8/19). Full bleed,
   12:5 to match the export exactly so the band adds no crop of its own, and
   nothing written on it. The space around it is the point: this is the breath
   between two blocks of reading, not decoration squeezed between them. */
/* 🔴 2026-08-31: THE CREAM BAND AROUND THESE IS GONE. Tamara, of the cattle
   photograph: "wider, with no white space." It was sitting in about 70px of ivory
   top and bottom, and a 46vh cap was cropping the exported 3:1 frame to nearer
   3.8:1 on a normal laptop, so the picture was both smaller and more cropped than
   the file it came from. Now the band runs edge to edge and shows the whole 3:1
   export, and the breathing room comes from the padding of the sections either
   side rather than from a stripe of cream. Applied to every divider, not only the
   cattle: it is the same photograph treatment in every place it appears. */
.sdiv{display:block;width:100%;padding:0}
.sdiv img{display:block;width:100%;aspect-ratio:3/1;height:auto;object-fit:cover;
  max-height:64vh}
@media(max-width:700px){
  .sdiv img{aspect-ratio:2/1;max-height:52vh}
}



/* 🔴 The recognition band went from dark green to cream in the 8/19 balance pass and
   THREE colours were left behind pointing at the old background. Tiffany: "the
   white, best estate planning law firm is hard to read because its white."
   MEASURED on the cream it now sits on: white bold 1.13:1, the list text 1.19:1,
   the tick icons 1.25:1. All three were effectively invisible. This is the cost of
   recolouring a surface without re-checking everything drawn on it. */
.v-light .band--brand.recog-sec .recog__body strong{color:var(--green-dd)}
.v-light .band--brand.recog-sec .recog__body p{color:var(--ink-soft)}
.v-light .band--brand.recog-sec .recog__list li{color:var(--ink-soft)}
.v-light .band--brand.recog-sec .recog__list svg{color:var(--green-d)}
.v-light .band--brand.recog-sec .recog__badge::after{border-color:var(--hair)}


/* ---------- event cards, trimmed (2026-08-19) ----------
   "less words on the event cards, more bold dates and imagry" (Tiffany). The
   photograph is taller, the date is the loudest line, and the blurb and street
   address are gone. */
.ev__pic img{aspect-ratio:5/3}
.ev__date{font-family:var(--ff-d);font-size:clamp(1.5rem,2.3vw,2rem);line-height:1.15;
  color:var(--green-dd);margin:0 0 .5rem;max-width:none}
.ev__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 .9rem}
.ev__meta .ev__cost{font-family:var(--ff-b);font-weight:700;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--green-d);background:none;padding:0}
.ev__title{font-size:1.12rem;line-height:1.35;margin:0 0 .7rem}
.ev__where{display:flex;gap:9px;align-items:center;color:var(--muted);font-size:.92rem;
  margin:0 0 1.3rem}
.ev__where svg{flex:none;color:var(--green)}



/* =====================================================================
   HERO HEADLINE OVER THE FILM (internal, /hero-headline/, 2026-08-20)
   Tiffany asked to SEE the home page headline laid over the hero video in white.
   Three treatments on one page so it can be judged moving rather than imagined.
   🔴 NOT used by the home page. The home page still runs the film clean with the
   words in their own band, which is the standing no-overlay instruction.
   ===================================================================== */
.hh{position:relative;margin:0 0 clamp(30px,4vw,56px)}
/* 🔴 the stage must be at least as tall as the words it carries. At a flat 16/7
   the panel ran off the bottom of the film and the last button was cut in half,
   which is a sizing bug being mistaken for a design. */
.hh__stage{position:relative;overflow:hidden;aspect-ratio:16/7;min-height:min(76vh,740px);
  background:var(--cream-d)}
.hh__still,.hh__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hh__film{z-index:1}
.hh__over{position:absolute;inset:0;z-index:2;display:flex;align-items:center}
.hh__in{width:100%}
.hh__panel{max-width:34ch}
.hh__kick{font-family:var(--ff-b);font-weight:700;font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;margin:0 0 1.1rem;max-width:none}
.hh__t{font-family:var(--ff-d);font-weight:400;font-size:clamp(1.45rem,2.7vw,2.55rem);
  line-height:1.14;letter-spacing:-.005em;margin:0 0 1rem;max-width:none}
.hh__t em{font-style:normal}
.hh__tag{font-family:var(--ff-b);font-size:clamp(.95rem,1.15vw,1.1rem);margin:0 0 1.6rem;
  max-width:none}
.hh__btns{display:flex;gap:14px;flex-wrap:wrap}
/* 🔴 the outline button is inked for a light band. Over film it disappears, which
   is a fault of the button on this page and not of the treatment being judged. */
.hh .btn--outline{color:#fff;border-color:rgba(255,255,255,.8);background:none}
.hh .btn--outline:hover{background:rgba(255,255,255,.14);border-color:#fff}
.hh__label{padding-top:clamp(14px,1.8vw,22px)}
.hh__label h3{font-family:var(--ff-d);font-weight:400;font-size:clamp(1.15rem,1.5vw,1.5rem);
  color:var(--ink);margin:0 0 .35rem}
.hh__label p{color:var(--muted);font-size:.98rem;line-height:1.7;margin:0;max-width:74ch}

/* A. exactly as asked: white, nothing else. This is the one that disappears. */
.hh--plain .hh__kick,.hh--plain .hh__t,.hh--plain .hh__tag,.hh--plain .hh__t em{color:#fff}

/* B. the same white, with the shadow carried by the LETTERS. This is not a wash:
   nothing over the photograph is darkened except the few pixels each glyph casts,
   so the picture still runs at full strength between the words. */
.hh--shadow .hh__kick,.hh--shadow .hh__t,.hh--shadow .hh__tag,.hh--shadow .hh__t em{color:#fff;
  text-shadow:0 1px 2px rgba(28,24,18,.6), 0 3px 20px rgba(28,24,18,.5)}

/* C. a solid brand panel. The film underneath is COVERED, never dimmed, which is
   the same rule the Letters for Legacy name plates follow. */
.hh--plate .hh__panel{background:var(--coffee);max-width:36ch;
  padding:clamp(22px,2.6vw,36px) clamp(20px,2.4vw,34px)}
.hh--plate .hh__kick,.hh--plate .hh__t,.hh--plate .hh__tag{color:#fff}
.hh--plate .hh__t em{color:var(--sage-soft)}
.hh--plate .hh__btns{margin-bottom:0}

.hh__jump{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin-top:clamp(18px,2.2vw,28px)}
.hh__jump span{font-family:var(--ff-b);font-weight:700;font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.btn--sm{padding:.6em 1.05em;font-size:.8rem;letter-spacing:.09em;
  background:var(--paper);border:1px solid var(--taupe);color:var(--ink);cursor:pointer;
  font-family:var(--ff-b);font-weight:700;text-transform:uppercase;border-radius:0}
.btn--sm:hover{background:var(--coffee);border-color:var(--coffee);color:#fff}
.btn--sm[aria-pressed="true"]{background:var(--coffee);border-color:var(--coffee);color:#fff}
.hh__measure{margin-top:clamp(20px,2.6vw,34px);border-left:3px solid var(--green);
  padding:clamp(16px,2vw,24px) clamp(18px,2.4vw,30px);background:var(--cream)}
.hh__measure p{color:var(--ink-soft);margin:0 0 .9rem}
.hh__measure p:last-child{margin-bottom:0}
.hh__foot{color:var(--muted);font-size:.95rem}
@media(max-width:820px){
  .hh__stage{aspect-ratio:4/5}
  .hh__panel,.hh--plate .hh__panel{max-width:none}
}

/* =====================================================================
   LETTER FOR LEGACY (2026-08-19, second cut)
   🔴 FORMATTED TO sherricoale.com/blog, which Tiffany asked for twice. The first
   cut was built from a memory of that page and got it wrong: it opened on a huge
   left-aligned masthead and ran the entries as portrait cards. The real page,
   measured in a browser at 1512px, is
     REEL   a full-bleed horizontal run of photographs, ALL AT ONE HEIGHT (483px)
            and their OWN aspect ratios, with two long-tailed arrows at bottom left
     BAND   a full-bleed coloured strip, the title in a large white serif set in
            from the left, the byline out on the right
     FIND   a bordered search field on the left, a short note on the right
     GRID   three columns, 434px each, a 3:2 photograph, a 94px gap, then a 37px
            serif title and the writing itself
   Quieter than the rest of this site on purpose: no dark bands, no proof bar, no
   statistics. This page is Tamara's, not the firm's.
   ===================================================================== */

/* --- the reel. Fixed HEIGHT, native widths, so a portrait stays a portrait.
   Five of her ten photographs are portrait and a 3:2 box throws most of them
   away, which is the exact crop complaint that got cropping removed sitewide. */
.lreel{background:var(--paper);padding:clamp(26px,4vw,54px) 0 clamp(18px,2.4vw,30px)}
/* 🔴 NO scroll-snap. It fought the left padding: the browser snapped the first
   frame's edge to the container's edge, which scrolled the 60px inset away and put
   the first photograph flush against the window while the grid below it stayed
   inset. The reel should line up with the grid, so the padding wins and the snap
   goes. */
.lreel__track{display:flex;gap:clamp(8px,1vw,14px);overflow-x:auto;scroll-behavior:smooth;
  padding:0 clamp(16px,4vw,60px);
  scrollbar-width:none;-ms-overflow-style:none}
.lreel__track::-webkit-scrollbar{display:none}
.lreel__track:focus-visible{outline:2px solid var(--blue-btn);outline-offset:3px}
.lreel__f{margin:0;flex:0 0 auto;background:var(--cream-d)}
.lreel__f img{display:block;height:clamp(240px,34vw,483px);width:auto;max-width:none}
.lreel__ctl{display:flex;gap:14px;padding-top:clamp(14px,2vw,24px)}
.lreel__b{width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;
  background:none;color:var(--ink);cursor:pointer;transition:color .2s,transform .2s}
.lreel__b svg{width:30px;height:auto;display:block}
.lreel__b:hover{color:var(--coffee)}
.lreel__b[data-reel="-1"]:hover{transform:translateX(-3px)}
.lreel__b[data-reel="1"]:hover{transform:translateX(3px)}
.lreel__b:focus-visible{outline:2px solid var(--blue-btn);outline-offset:2px}
.lreel__b[disabled]{opacity:.25;cursor:default;transform:none}

/* 🔴 GREEN, NOT BROWN, 2026-09-24. Tamara: "I do not like the brown. I probably prefer one
   of the greens." The band and the name plates are the deep brand green (white 9.36:1).
   Never put coffee back as a block colour on this page.
   --- (was) the coloured band. Coffee, the brand's darkest warm hex, and the closest
   thing we have to the brown on hers. White on #725c4a measures 6.28:1, which
   clears AA at every size (the white-on-cream lesson from earlier today). */
.lband{background:var(--green-dd);padding:clamp(40px,5.4vw,74px) 0}
/* 🔴 The band carries the standing description now, Tiffany 2026-08-20: "put
   this content in the brown block". It was in the search row on the right, where
   the reference page keeps its note, and she wants it up here where the name is.
   Cream #f4f1ea on coffee #725c4a measures 5.57:1, white 6.28:1, both AA. */
.lband__in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(22px,4.5vw,72px);align-items:center}
.lband__l{padding-left:clamp(0px,5vw,90px)}
.lband__h{font-family:var(--ff-d);font-weight:400;font-size:clamp(1.9rem,3.6vw,3rem);
  line-height:1.1;letter-spacing:.005em;color:#fff;margin:0 0 .5rem}
/* 1.1 is too tight once Parisienne is in the line: its ascenders reach into the line
   above and its descenders into the one below, and this heading wraps to two lines
   below about 1100px. Only when the accent is present. */
.lband__h:has(em){line-height:1.2}
.lband__by{font-family:var(--ff-d);font-size:clamp(1.05rem,1.5vw,1.28rem);
  color:var(--cream);margin:0;max-width:none}
.lband__by::after{content:"";display:block;width:64px;height:3px;margin-top:1.1rem;
  background:var(--green)}
.lband__intro{font-family:var(--ff-b);font-size:clamp(.98rem,1.15vw,1.06rem);
  line-height:1.78;color:var(--cream);margin:0;max-width:56ch}
@media(max-width:820px){
  .lband__in{grid-template-columns:1fr;gap:22px}
  .lband__l{padding-left:0}
}

/* --- search on the left, the standing note on the right */
.lutil{background:var(--paper);padding:clamp(48px,7vw,104px) 0 clamp(40px,6vw,88px)}
.lutil__in{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  gap:clamp(24px,4vw,56px);align-items:start}
.lutil__find{position:relative;grid-column:1}
.lutil__ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;color:var(--muted);pointer-events:none}
.lutil__ico svg{width:100%;height:100%;display:block}
.lutil__find input{width:100%;background:var(--paper);border:1px solid var(--taupe);
  color:var(--ink);padding:1.05em 1.1em 1.05em 3rem;font-family:var(--ff-d);
  font-size:1.02rem;border-radius:0;-webkit-appearance:none;appearance:none}
.lutil__find input::placeholder{color:var(--muted)}
.lutil__find input:focus{outline:2px solid var(--blue-btn);outline-offset:1px}
@media(max-width:900px){
  .lutil__in{grid-template-columns:1fr}
  .lutil__find{grid-column:1}
}

/* --- the entries. Three columns, 3:2 photograph, a WIDE gap before the title
   (94px on hers, and the gap is most of why the page breathes), a large serif
   title, then the writing. */
/* 🔴 WIDER THAN THE REST OF THE SITE, deliberately. On the reference page the
   content runs 60px to 1452px of a 1512px viewport and each of the three columns
   is 434px; inside our standard --maxw the same three columns come out at 320px
   and a 37px title wraps to three lines, which loses the calm the whole page is
   for. These four containers get their own width so the columns land near 430px.
   Same padding as the reel, so the photographs above line up with the grid. */
.lband__in,.lutil__in,.lgrid .wrap{max-width:1520px;padding:0 clamp(16px,4vw,60px)}
.lgrid{background:var(--paper);padding:0 0 clamp(70px,9vw,140px)}
.ltrs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,3vw,45px) clamp(30px,3vw,45px);
  align-items:start}
.ltr{display:flex;flex-direction:column}
/* 🔴 THE NAME SITS ON THE PICTURE, AND THE PICTURE IS NOT DIMMED TO DO IT.
   Tiffany, 2026-08-20: "put the names in the blogs on the images". The standing
   rule from the client is that nothing washes over a photograph (Jennifer: vivid,
   no overlays), so the title rides a SOLID coffee plate across the foot of the
   frame rather than a scrim: every pixel of the photograph above it is at full
   strength, and the type sits on a flat brand colour at 6.28:1. If the plate ever
   becomes a gradient or gains an alpha, that rule has been broken. */
.ltr__pic{display:block;position:relative;margin:0 0 clamp(26px,4vw,56px);
  overflow:hidden;background:var(--cream-d)}
.ltr__pic img{display:block;width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;
  transition:transform .7s cubic-bezier(.22,.61,.24,1)}
.ltr:hover .ltr__pic img{transform:scale(1.03)}
.ltr__plate{position:absolute;left:0;right:0;bottom:0;background:var(--green-dd);
  padding:clamp(11px,1.2vw,15px) clamp(15px,1.6vw,21px)}
.ltr__t{font-family:var(--ff-d);font-weight:400;font-size:clamp(1.18rem,1.46vw,1.46rem);
  line-height:1.2;letter-spacing:.003em;color:#fff;margin:0}
.ltr__s{color:var(--ink-soft);font-size:1rem;line-height:1.8;margin:0 0 1.6rem;max-width:none}
/* 🔴 Brand colour, not grey. Audited on 2026-08-20 (Tiffany: "make sure the
   colors and fonts are in the firms branding guidelines"): this page was running
   coffee plus the neutral scale and NONE of the other five brand hexes, while
   Jennifer's standing note asks for more of the corporate blue. The label now
   carries the brand-blue text tone (#3c5a6e, 7.29:1 on white; the raw brand blue
   #577c93 is 4.46 and misses AA at this size), the search field is bordered in
   brand taupe, and a brand-green rule sits under the byline in the band. */
.ltr__soon{margin:auto 0 0;font-family:var(--ff-b);font-weight:700;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue-txt);max-width:none}
.ltrs__none{margin-top:1rem;color:var(--muted);font-family:var(--ff-d);font-size:1.15rem}
@media(max-width:900px){.ltrs{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ltrs{grid-template-columns:1fr}}

/* --- 2026-09-18, TAMARA'S FOUR SECTIONS ---------------------------------------
   She asked for Places I Love / From My Table / Stories Worth Saving / A Life's Work,
   each with its own standing description. The grid is unchanged inside a section; what
   is new is the heading above each one and the kicker line on every card, which is her
   wording too ("A Letter for Legacy, by Tamara Cain" above the title).
   🔴 .ltrs becomes a plain block here, NOT a grid: the three-column grid moved down to
   .lsec__grid, because with the sections in place .ltrs holds four section blocks, and
   leaving the columns on it laid the SECTIONS out side by side. */
.ltrs{display:block}
.lsec + .lsec{margin-top:clamp(56px,7vw,104px)}
.lsec__head{max-width:62ch;margin:0 0 clamp(26px,3.4vw,46px)}
.lsec__t{font-family:var(--ff-d);font-weight:400;font-size:clamp(1.7rem,2.6vw,2.45rem);
  line-height:1.16;color:var(--green);margin:0 0 .5rem}
.lsec__t::after{content:"";display:block;width:56px;height:3px;margin-top:.9rem;
  background:var(--gold)}
.lsec__s{color:var(--ink-soft);font-size:1rem;line-height:1.8;margin:.9rem 0 0}
.lsec__grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(30px,3vw,45px) clamp(30px,3vw,45px);align-items:start}
@media(max-width:900px){.lsec__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.lsec__grid{grid-template-columns:1fr}}
/* the kicker sits on the same solid coffee plate as the title, so it inherits the
   no-overlay rule above rather than introducing a second treatment. */
.ltr__kick{font-family:var(--ff-b);font-weight:700;font-size:.63rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold-l);margin:0 0 .3rem;max-width:none}
/* the four jump links, sitting opposite the search box in the utility row */
.lutil__jump{grid-column:2;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;align-items:center;
  font-family:var(--ff-b);font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700}
.lutil__jump a{color:var(--blue-txt);text-decoration:none;border-bottom:1px solid transparent;
  padding-bottom:2px}
.lutil__jump a:hover{border-bottom-color:var(--gold)}
@media(max-width:900px){.lutil__jump{grid-column:1}}
.lband__bio{margin:.9rem 0 0;color:#e7e3d6;font-size:.97rem;line-height:1.75}
/* a letter that exists reads as a link, not as a label; same slot as .ltr__soon so the
   cards in a row still bottom-align. */
.ltr__read{margin:auto 0 0;font-family:var(--ff-b);font-weight:700;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue-txt);text-decoration:none;
  display:inline-flex;align-items:center;gap:.55rem;max-width:none}
.ltr__read:hover{color:var(--green)}

/* --- ARTICLES (/articles/) -----------------------------------------------------
   Five pieces someone else published. No photograph on a card, because the artwork is
   theirs and lives inside the PDF; the card carries the words and the credit. */
.artgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,2.6vw,40px)}
.art{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--gold);
  padding:clamp(26px,2.6vw,40px);display:flex;flex-direction:column}
.art__meta{font-family:var(--ff-b);font-weight:700;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue-txt);margin-bottom:.8rem}
.art__dot{margin:0 .5rem;color:var(--taupe)}
.art__when{color:var(--muted)}
.art__t{font-family:var(--ff-d);font-weight:400;font-size:clamp(1.3rem,1.8vw,1.75rem);
  line-height:1.22;margin:0 0 .8rem}
.art__s{color:var(--ink-soft);font-size:1rem;line-height:1.8;margin:0 0 1.1rem}
.art__by{font-style:italic;color:var(--muted);font-size:.92rem;margin:0 0 1.4rem}
.art__go{margin-top:auto;font-family:var(--ff-b);font-weight:700;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blue-txt);text-decoration:none;
  display:inline-flex;align-items:center;gap:.6rem}
.art__go:hover{color:var(--green)}
.art__fmt{font-size:.62rem;letter-spacing:.14em;border:1px solid var(--taupe);
  padding:.2em .5em;color:var(--muted)}
@media(max-width:820px){.artgrid{grid-template-columns:1fr}}

/* --- A MATTER OF TRUST (the newsletter archive) --------------------------------- */
.nlgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.4vw,34px);
  margin-top:clamp(24px,2.6vw,38px)}
.nlc{background:var(--paper);border:1px solid var(--line);transition:.3s}
.nlc:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.nlc__l{display:flex;flex-direction:column;height:100%;padding:clamp(22px,2.2vw,32px);
  text-decoration:none;color:inherit}
.nlc__when{font-family:var(--ff-b);font-weight:700;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue-txt);margin-bottom:.7rem}
.nlc__t{font-family:var(--ff-d);font-weight:400;line-height:1.22;margin:0 0 .7rem;
  font-size:clamp(1.18rem,1.4vw,1.42rem)}
.nlc--lead{border-top:3px solid var(--gold)}
.nlc--lead .nlc__t{font-size:clamp(1.6rem,2.4vw,2.3rem)}
.nlc--lead .nlc__s{font-size:1.06rem;max-width:70ch}
.nlc__s{color:var(--ink-soft);font-size:.97rem;line-height:1.75;margin:0 0 1.2rem}
.nlc__go{margin-top:auto;font-family:var(--ff-b);font-weight:700;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blue-txt)}
@media(max-width:900px){.nlgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.nlgrid{grid-template-columns:1fr}}
/* one issue, set as a letter */
.nlx__kick{font-family:var(--ff-b);font-weight:700;font-size:.72rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--blue-txt);margin:0 0 .8rem}
.nlx p{font-size:1.06rem;line-height:1.85}
.nlx__sig{margin-top:2.2rem;font-family:var(--ff-d);font-style:italic;color:var(--green);
  font-size:1.14rem;line-height:1.7}
.nlx__sig span{font-style:normal;display:inline-block;margin-top:.2rem}
.nlx__nav{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.nlx__nav p{flex-basis:100%}

/* subscribe */
.lsub__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(26px,4vw,60px);align-items:center}
.lsub__in p{color:var(--ink-soft);max-width:52ch}
.lsub__form{display:flex;gap:10px}
.lsub__form input[type=email]{flex:1;min-width:0;background:var(--paper);
  border:1px solid var(--line);color:var(--ink);padding:1.05em 1.1em;
  font-family:var(--ff-b);font-size:.98rem;border-radius:0}
.lsub__form input[type=email]:focus{outline:2px solid var(--blue-btn);outline-offset:1px}
.lsub__form .btn{white-space:nowrap}
@media(max-width:820px){.lsub__in{grid-template-columns:1fr}}
@media(max-width:520px){.lsub__form{flex-direction:column}}


/* ---------- red play button on the film block ----------
   Tiffany, 2026-08-19: "can we put a red video play button on the video on the
   homepage towards the bottom?" Native <video controls> shows the browser's own
   chrome, which reads as a file rather than as an invitation to watch.

   🔴 This is a CONTROL, not an overlay, and the distinction is the whole no-overlay
   rule: a wash hides a photograph, a play button tells you the picture moves. Red
   is deliberately NOT a brand colour and appears nowhere else on the site, which is
   what makes it read instantly as "press this". #c8342a measures 5.28:1 under the
   white triangle. */
.playwrap{position:relative;display:block;line-height:0}
.playwrap video{display:block;width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;
  background:var(--green-ddd)}
.playbtn{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;
  justify-content:center;background:none;border:0;padding:0;cursor:pointer;
  transition:opacity .3s ease}
.playbtn__disc{display:inline-flex;align-items:center;justify-content:center;
  width:clamp(64px,7vw,86px);height:clamp(64px,7vw,86px);border-radius:50%;
  background:#c8342a;color:#fff;padding-left:5px;
  box-shadow:0 10px 34px -8px rgba(20,10,8,.55);transition:transform .28s cubic-bezier(.2,.7,.3,1),background .2s ease}
.playbtn:hover .playbtn__disc{transform:scale(1.07);background:#b8291f}
.playbtn:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.playwrap.is-playing .playbtn{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.playbtn__disc{transition:none}}

/* ---------- internal hero comparison page ---------- */
.opt{max-width:1060px;margin-inline:auto}
.opt__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-bottom:18px}
.opt__head h2{margin:0}
.opt__tag{margin:0;font-family:var(--ff-b);font-weight:700;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:var(--green-d);padding:.45em .8em}
.opt__tag--warn{background:var(--coffee)}
.opt__v{display:block;width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;background:var(--green-ddd)}
.opt__note{margin:18px 0 0;color:var(--ink-soft);max-width:70ch}
.opt__flags{margin-top:26px;background:var(--paper);border-left:3px solid var(--coffee);padding:20px 24px}
.opt__flags p{margin:0 0 .6rem;max-width:none}
.opt__credits{margin-top:1rem!important;font-size:.86rem;color:var(--muted)}
.opt__creditlist{margin:.4rem 0 0;padding-left:1.1rem;font-size:.84rem;color:var(--muted)}
.opt__creditlist li{margin-bottom:.2rem}

/* ---------- proof bar: the four facts, moved off the photograph ---------- */
.proofbar{background:var(--green-dd);color:#e8e6da;border-bottom:1px solid rgba(255,255,255,.10)}
.proofbar__in{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,44px);
  padding:clamp(26px,3.4vw,40px) 0}
.proofbar .hstat{display:block;text-align:center}
.proofbar .hstat strong{display:block;font-family:var(--ff-d);font-weight:400;
  font-size:clamp(1.15rem,1.8vw,1.5rem);color:#fff;line-height:1.2;margin-bottom:.35rem}
.proofbar .hstat span{display:block;font-size:.84rem;line-height:1.45;letter-spacing:.02em;
  color:#c9c8b9}
/* 🔴 the caption rule above also matched the counter span INSIDE <strong>, so "30+"
   rendered at .84rem AND display:block broke "years" onto a second line. Noelle,
   2026-09-17: "'30+ years' should all be large and on one line like everything else." */
.proofbar .hstat strong span{display:inline;font-size:inherit;color:inherit;
  line-height:inherit;letter-spacing:inherit}
@media(max-width:860px){.proofbar__in{grid-template-columns:1fr 1fr;gap:22px}}
@media(max-width:430px){.proofbar__in{grid-template-columns:1fr}}

.askfab{position:fixed;right:18px;z-index:170;display:inline-flex;align-items:center;gap:10px;
  /* sits one rung above the staging light/dark toggle; drop to 18px at cutover
     when that toggle goes away */
  bottom:78px;
  padding:13px 20px;border:1px solid var(--hair);background:var(--green-d);color:#fff;
  font-family:var(--ff-b);font-size:.86rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;box-shadow:var(--sh-md);transition:background .25s,transform .25s}
.askfab:hover{background:var(--green);transform:translateY(-2px)}
.askfab svg{flex:none}
.askfab[hidden]{display:none}
.askpanel{position:fixed;right:18px;bottom:78px;z-index:171;width:min(400px,calc(100vw - 36px));
  max-height:min(640px,calc(100vh - 120px));display:none;flex-direction:column;
  background:var(--ivory);border:1px solid var(--line);box-shadow:0 40px 90px -40px rgba(43,47,40,.55)}
.askpanel.open{display:flex}
.ask__head{display:flex;align-items:center;gap:12px;padding:16px 18px;background:var(--green-d);color:#fff}
.ask__head b{font-family:var(--ff-d);font-size:1.28rem;font-weight:500;letter-spacing:-.01em;display:block}
.ask__head small{display:block;font-size:.76rem;letter-spacing:.04em;color:rgba(255,255,255,.72)}
.ask__head .ask__id{flex:1;min-width:0}
.ask__x{margin-left:auto;background:none;border:0;color:rgba(255,255,255,.8);font-size:1.6rem;
  line-height:1;cursor:pointer;padding:0 2px}
.ask__x:hover{color:#fff}
.ask__msgs{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;
  background:var(--ivory);scroll-behavior:smooth}
.ask__m{max-width:88%;padding:11px 14px;font-size:.97rem;line-height:1.62;white-space:pre-wrap}
.ask__m--a{align-self:flex-start;background:var(--cream);border-left:2px solid var(--gold);color:var(--ink)}
.ask__m--u{align-self:flex-end;background:var(--green-d);color:#f3f1e6}
.ask__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.ask__chip{font-family:var(--ff-b);font-size:.85rem;line-height:1.35;text-align:left;
  padding:8px 13px;border:1px solid var(--hair);background:transparent;color:var(--green-d);cursor:pointer;
  transition:background .2s,color .2s}
.ask__chip:hover{background:var(--green-d);color:#fff}
.ask__typing{align-self:flex-start;display:flex;gap:5px;padding:13px 15px;background:var(--cream)}
.ask__typing i{width:6px;height:6px;background:var(--sage);display:block;animation:askblink 1.3s infinite}
.ask__typing i:nth-child(2){animation-delay:.18s}
.ask__typing i:nth-child(3){animation-delay:.36s}
@keyframes askblink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.ask__inrow{display:flex;align-items:center;gap:8px;padding:12px;border-top:1px solid var(--line);
  background:var(--paper)}
.ask__inrow input{flex:1;min-width:0;font-family:var(--ff-b);font-size:.95rem;padding:11px 12px;
  border:1px solid var(--line);background:var(--ivory);color:var(--ink)}
.ask__inrow input:focus{outline:none;border-color:var(--gold)}
.ask__send{flex:none;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border:0;background:var(--gold);color:#fff;cursor:pointer;transition:background .2s}
.ask__send:hover{background:var(--gold-d)}
.ask__foot{padding:0 12px 12px;background:var(--paper);display:flex;flex-direction:column;gap:8px}
.ask__cta{display:block;text-align:center;font-family:var(--ff-b);font-size:.8rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:11px;background:var(--green-d);color:#fff}
.ask__cta:hover{background:var(--green);text-decoration:none;color:#fff}
.ask__disc{margin:0;font-size:.72rem;line-height:1.5;color:var(--muted);text-align:center;max-width:none}
@media(max-width:520px){
  .askfab{right:10px;bottom:70px;padding:12px 16px;font-size:.8rem}
  .askpanel{right:10px;left:10px;bottom:10px;width:auto;max-height:calc(100vh - 90px)}
}
@media print{.askfab,.askpanel{display:none!important}}

/* ---------- Insights: the migrated archive (2026-09-02) ----------
   Type-led, no thumbnails. Their post artwork is a maroon social tile with the
   headline burned into it, so a card showing both the tile and the title says the
   same words twice in two different brands. The card sells the writing instead. */
.bfilt{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;
  padding-bottom:clamp(26px,3vw,38px);margin-bottom:clamp(30px,3.4vw,46px);
  border-bottom:1px solid var(--line)}
.bfilt__s{flex:1 1 260px;max-width:340px;position:relative}
.bfilt__s input{width:100%;font-family:var(--ff-b);font-size:.95rem;padding:12px 14px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:0}
.bfilt__s input:focus{outline:2px solid var(--gold-d);outline-offset:1px}
.bfilt__c{display:flex;flex-wrap:wrap;gap:8px}
.bchip{font-family:var(--ff-b);font-size:.74rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:9px 14px;border:1px solid var(--line);
  background:transparent;color:var(--ink-soft);cursor:pointer;transition:.2s}
.bchip:hover{border-color:var(--gold-d);color:var(--green-d)}
.bchip.is-on{background:var(--green-d);border-color:var(--green-d);color:#fff}

.bposts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,2.6vw,40px)}
.bpost{border-top:2px solid var(--green-d);padding-top:20px}
.bpost__l{display:flex;flex-direction:column;height:100%;color:inherit}
.bpost__l:hover{text-decoration:none}
.bpost__cat{font-family:var(--ff-b);font-size:.68rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-d)}
.bpost__t{font-family:var(--ff-d);font-weight:400;font-size:clamp(1.2rem,1.5vw,1.45rem);
  line-height:1.28;margin:.5em 0 .45em;color:var(--green-d);transition:.2s}
.bpost__l:hover .bpost__t{color:var(--gold-d)}
.bpost__s{font-size:.98rem;line-height:1.75;color:var(--ink-soft);margin:0 0 1.3rem;max-width:none}
.bpost__m{margin-top:auto;font-family:var(--ff-b);font-size:.74rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
.bpost__dot{margin:0 .5em}
.bpost--lead{grid-column:1/-1;border-top-width:3px;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,3vw,52px);align-items:start}
.bpost--lead .bpost__l{display:contents}
.bpost--lead .bpost__cat{grid-column:1}
.bpost--lead .bpost__t{grid-column:1;font-size:clamp(1.75rem,3vw,2.6rem);margin-top:.3em}
.bpost--lead .bpost__s{grid-column:2;grid-row:1/4;font-size:1.08rem;align-self:center}
.bpost--lead .bpost__m{grid-column:1}
/* 🔴 The filter sets [hidden], and the UA rule behind that is display:none at the
   lowest possible specificity. .bpost--lead sets display:grid, which beats it, so the
   lead card stayed on screen through a search that matched nothing and sat there
   alone under "Nothing matches that yet". Any class here that sets display needs this. */
.bpost[hidden]{display:none!important}
/* each post's own photograph (Tamara, 2026-09-24) */
.bpost__img{display:block;aspect-ratio:1/1;overflow:hidden;margin:0 0 16px;background:var(--cream-d)}
.bpost__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.bpost__l:hover .bpost__img img{transform:scale(1.03)}
.bpost--lead{grid-template-columns:minmax(0,.62fr) minmax(0,1fr) minmax(0,1fr)}
.bpost--lead .bpost__img{grid-column:1;grid-row:1/5;margin:0}
.bpost--lead .bpost__cat,.bpost--lead .bpost__t,.bpost--lead .bpost__m{grid-column:2}
.bpost--lead .bpost__s{grid-column:3}
@media(max-width:880px){.bpost--lead{grid-template-columns:1fr}
  .bpost--lead .bpost__img,.bpost--lead .bpost__cat,.bpost--lead .bpost__t,.bpost--lead .bpost__s,.bpost--lead .bpost__m{grid-column:1;grid-row:auto}}
.art__fig{margin:0 0 2rem;max-width:520px}
.art__fig img{display:block;width:100%;height:auto}
.bposts__none{margin-top:2.4rem}
.bposts--more{grid-template-columns:repeat(3,1fr)}

/* the dated firm news, kept and readable, but plainly not current advice */
.barc__lede{margin-bottom:clamp(26px,3vw,40px)}
.barc{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.barc__i{border-bottom:1px solid var(--line)}
.barc__i a{display:grid;grid-template-columns:170px 1fr;gap:20px;align-items:baseline;
  padding:15px 4px;color:inherit}
.barc__i a:hover{background:var(--cream);text-decoration:none}
.barc__d{font-family:var(--ff-b);font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.barc__t{font-family:var(--ff-d);font-size:1.08rem;line-height:1.45;color:var(--green-d)}
.barc__i a:hover .barc__t{color:var(--gold-d)}

/* one article */
.phead--art .phead__in{max-width:820px}
.phead--art h1{font-size:clamp(2.2rem,4.4vw,3.4rem)}
.art__meta{font-family:var(--ff-b)!important;font-size:.78rem!important;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)!important;margin-top:1.1rem}
.art__body>h3{font-family:var(--ff-d);font-weight:500;font-size:clamp(1.35rem,2vw,1.65rem);
  color:var(--green-d);margin:2.1em 0 .5em;line-height:1.3}
.art__body>h2{margin-top:1.9em}
.art__body ul,.art__body ol{margin:0 0 1.5em 1.15em;line-height:1.85}
.art__body li{margin-bottom:.5em}
.art__body blockquote{margin:2em 0;padding:0 0 0 1.4em;border-left:3px solid var(--gold-d);
  font-family:var(--ff-d);font-size:1.22rem;line-height:1.55;font-style:italic;color:var(--green-d)}
.art__note{background:var(--cream);border-left:3px solid var(--taupe);padding:16px 20px;
  font-size:.95rem;line-height:1.7;color:var(--ink-soft);margin-bottom:2.2rem}
@media(max-width:900px){
  .bposts,.bposts--more{grid-template-columns:repeat(2,1fr)}
  .bpost--lead{grid-template-columns:1fr}
  .bpost--lead .bpost__cat,.bpost--lead .bpost__t,.bpost--lead .bpost__s,.bpost--lead .bpost__m{grid-column:1}
  .bpost--lead .bpost__s{grid-row:auto}
}
@media(max-width:620px){
  .bposts,.bposts--more{grid-template-columns:1fr}
  .barc__i a{grid-template-columns:1fr;gap:4px}
}


/* =====================================================================
   THE HEADER SLIDESHOW (2026-09-02)
   Tiffany asked first for "a scroll video style of imaages", then, having seen it:
   "instead of a scroll on the page headers can the images fade in and out between each
   other?" So the marquee is gone and this is a crossfade. Same pictures, same 2 of the
   firm to 1 of Oklahoma mix, same full-bleed band under the nav.

   HOW THE TIMING WORKS, because it is all in the delays and nothing is scripted.
   Seven frames stacked on top of each other. One keyframe track holds a frame visible
   for a seventh of the cycle and transparent for the rest, and each frame runs the same
   track offset by a seventh, so exactly one is up at a time and the handover is the
   overlap of one fading out while the next fades in.
   🔴 --i is set per frame in the HTML. Without it every frame runs at delay 0, they all
   fade together, and the band pulses instead of changing picture.
   🔴 The -3% on the delay is what stops the page opening on a blank band: it starts the
   first frame's clock just past its fade-in rather than at zero.
   🔴 A CSS-only crossfade cannot be paused by a reader, so it is slow on purpose. Seven
   frames at ~6s each is a 42s cycle; anything quicker reads as a slideshow demanding
   attention rather than a room the page happens to be standing in.
   ===================================================================== */
/* 🔴 TALLER THAN THE MARQUEE WAS, on purpose. At 26vw the band was 374px on a 1440
   screen, which crops a 3:2 photograph to 3.9:1 and throws away 60 percent of its
   height: sampled at t=0 on /wills/ and two heads were cut. At 34vw it is 489px and
   2.9:1, which the room frames survive. A header band is also the one place on this
   site where a bigger picture is unambiguously better. */
.phreel{position:relative;overflow:hidden;background:var(--green-ddd);
  height:clamp(260px,34vw,520px)}
.phreel__track{position:absolute;inset:0}
.phreel__f{position:absolute;inset:0;margin:0;opacity:0;
  animation:phfade 42s linear infinite both;
  animation-delay:calc(var(--i) * (42s / 7) - 1.26s)}
.phreel__f img{width:100%;height:100%;object-fit:cover;display:block;
  /* the band keeps roughly the middle-upper half of a landscape frame. Dead centre puts
     the crop through chests and floor; 38% keeps heads in shot on the room photographs. */
  object-position:50% 38%;
  /* the same slow drift the wide photographs got on 8/31, so a still frame is not
     completely still while it is up. One scale, no pan, no attention drawn. */
  animation:phdrift 42s linear infinite both;
  animation-delay:inherit}
@keyframes phfade{
  0%{opacity:0}
  3%{opacity:1}
  14.28%{opacity:1}
  17.28%{opacity:0}
  100%{opacity:0}
}
@keyframes phdrift{
  0%{transform:scale(1.0)}
  17.28%{transform:scale(1.045)}
  100%{transform:scale(1.045)}
}
/* a soft edge into the page on both sides so the band reads as part of the page rather
   than as a photograph dropped on top of it */
.phreel::before,.phreel::after{content:"";position:absolute;top:0;bottom:0;
  width:clamp(30px,5vw,90px);z-index:2;pointer-events:none}
.phreel::before{left:0;background:linear-gradient(90deg,rgba(37,40,30,.55),transparent)}
.phreel::after{right:0;background:linear-gradient(270deg,rgba(37,40,30,.55),transparent)}
@media(prefers-reduced-motion:reduce){
  /* no cycling at all. A person who asks for no motion gets one photograph, not a
     slower slideshow. */
  .phreel__f,.phreel__f img{animation:none}
  .phreel__f{opacity:0}
  .phreel__f:first-child{opacity:1}
}
@media(max-width:620px){
  .phreel{height:clamp(190px,52vw,260px)}
}



/* ============================================================================
   THE THREE STEP PIE (2026-09-02)
   Tiffany: "the graph section, can we make it equal parts of a pie that are
   interactive by stage?" It replaces the laddered bars, and it is a truer picture:
   the sentence directly above it reads "All three are the job", and three EQUAL
   thirds say that where rising bars said the opposite.
   🔴 THE HIT AREA IS THE SLICE. Each button is absolutely positioned over the whole
   circle and clipped to its own 120 degrees by an inline clip-path generated in
   _gen.py. clip-path clips POINTER EVENTS as well as paint, so three overlapping
   buttons each answer only inside their own wedge. Do not swap this for three
   rectangles with a round background; the top one would swallow every click.
   🔴 THE CLASS .arcx__bar STAYS ON THE BUTTONS. The interaction script keys off it,
   and keeping it meant hover, click, focus, arrow keys and the reserved panel height
   all carried over with no change to the JavaScript.
   ============================================================================ */
.arcx--pie .arcx__graph{display:flex;justify-content:center;
  margin-bottom:clamp(26px,3.4vw,46px)}
.arcpie{position:relative;width:min(440px,72vw);aspect-ratio:1;border-radius:50%;
  isolation:isolate}
.arcpie__seg{position:absolute;inset:0;background:none;border:0;padding:0;margin:0;
  cursor:pointer;color:inherit;font:inherit}
.arcpie__seg:focus{outline:none}
/* the fill is the whole circle; the button's clip-path is what makes it a slice */
.arcpie__fill{position:absolute;inset:0;border-radius:50%;background:var(--step);
  transform:scale(.04);transform-origin:50% 50%;
  transition:transform .8s cubic-bezier(.22,.61,.24,1) var(--d,0s),filter .3s ease}
.arcx--pie.is-in .arcpie__fill{transform:scale(1)}
/* 🔴 THE UNSELECTED SLICES GO DARKER, NOT LIGHTER. Washing them out would drop the
   white numeral on them below its 3:1 threshold; darkening raises the contrast, so
   the selected slice is the brightest one and nothing becomes harder to read. */
.arcpie__seg:not([aria-expanded="true"]) .arcpie__fill{filter:brightness(.74)}
.arcpie__seg:hover .arcpie__fill,
.arcpie__seg:focus-visible .arcpie__fill{filter:brightness(.9)}
.arcpie__seg[aria-expanded="true"] .arcpie__fill{filter:none}
/* the label rides at the wedge's own centroid, passed in as --lx/--ly from _gen.py */
.arcpie__tag{position:absolute;left:var(--lx);top:var(--ly);
  transform:translate(-50%,-50%);display:grid;justify-items:center;gap:2px;
  width:7.4em;text-align:center;pointer-events:none;color:#fff}
.arcpie__tag b{font-family:var(--ff-d);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.15rem);
  line-height:1}
.arcpie__tag i{font-style:normal;font-family:var(--ff-b);font-weight:700;
  font-size:clamp(.62rem,.86vw,.76rem);letter-spacing:.1em;text-transform:uppercase;
  line-height:1.35;text-wrap:balance}
/* the spokes, drawn over the slices so the three read apart. pointer-events:none so
   they never eat a click meant for a wedge. */
.arcpie::after{content:"";position:absolute;inset:0;border-radius:50%;z-index:2;
  pointer-events:none;
  /* 🔴 from 0deg, NOT -90deg. A CSS conic gradient already starts at twelve o'clock,
     while the clip-path maths uses the trig convention where 0 is three o'clock and
     -90 is the top. Writing -90 here rotated the spokes a quarter turn off the wedges
     and drew three white lines straight ACROSS the slices. Caught in a screenshot. */
  background:conic-gradient(from 0deg,
    var(--paper) 0 .55deg, transparent .55deg 119.45deg,
    var(--paper) 119.45deg 120.55deg, transparent 120.55deg 239.45deg,
    var(--paper) 239.45deg 240.55deg, transparent 240.55deg 359.45deg,
    var(--paper) 359.45deg 360deg)}
/* the hub carries the section's own claim, which is what the equal thirds are for */
.arcpie__hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  /* 🔴 36%, down from 41%. The hub sits ABOVE the slices, so any label whose box
     reaches under it loses its first letters: measured in a screenshot, wedge 1 read
     "REATE THE PLAN" and wedge 3's second line ran under the disc. Smaller hub plus a
     label pushed further out (r=74 in _gen.py) clears both with room. */
  width:36%;aspect-ratio:1;border-radius:50%;background:var(--paper);z-index:3;
  display:grid;place-content:center;text-align:center;pointer-events:none;
  box-shadow:0 0 0 1px var(--line)}
.arcpie__hub b{display:block;font-family:var(--ff-d);font-weight:400;
  font-size:clamp(1.05rem,1.7vw,1.42rem);color:var(--green-d);line-height:1.1}
.arcpie__hub i{display:block;font-style:normal;font-family:var(--ff-b);font-weight:700;
  font-size:clamp(.6rem,.8vw,.7rem);letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-top:4px}
.arcpie__seg:focus-visible{outline:none}
.arcpie:has(.arcpie__seg:focus-visible){box-shadow:0 0 0 3px var(--blue-btn)}
@media(prefers-reduced-motion:reduce){
  .arcpie__fill{transform:none;transition:none}
}
@media(max-width:820px){
  /* the panels already stack as a plain numbered list below this width and the graph
     hides, which is the same contract the bars had. Nothing here needs its own rule. */
  .arcpie{width:min(340px,80vw)}
}


/* ============================================================================
   THE PHONE (2026-09-02)
   Tiffany: "Make sure the mobile layout is spaced well, right now it looks very
   smooshed togetehr and oddly aligned on a phone."
   Two complaints, two measurements, taken across all 30 pages at 390px
   (_audit/mobile_audit.py).

   🔴 ODDLY ALIGNED WAS THE EYEBROW'S RULE. The little dash before every eyebrow is an
   inline ::before, so it pushes the eyebrow's TEXT in by 48px while the h2 directly
   underneath starts at the 22px gutter, and a wrapped eyebrow drops its second line
   back to the margin. Measured: 943 blocks start at x=22 and then 240 at x=47, 100 at
   57, 64 at 53, 50 at 49, 29 at 87, 28 at 39. Seven near-but-not-equal indents down a
   390px column is exactly what "oddly aligned" looks like. On a centred eyebrow that
   wraps, the dash sits on line one only and the block reads lopsided.
   The rule becomes a BLOCK above the text on a phone. One left edge, and a centred
   eyebrow centres properly.
   🔴 There was NO horizontal overflow on any of the 30 pages, so this is alignment,
   not a broken width. Checked before changing anything.
   ============================================================================ */
@media(max-width:620px){
  .eyebrow,.eyebrow--light{padding-left:0}
  /* margin-left:0 explicitly: .hero--still pulls its rule out by -48px to hang it in
     the margin on desktop, and with the rule on its own line that is just a dent. */
  .eyebrow::before,.eyebrow--light::before{display:block;width:34px;margin:0 0 11px 0}
  .center .eyebrow::before,.section-head.center .eyebrow::before,
  .center .eyebrow--light::before,.section-head.center .eyebrow--light::before{
    margin-inline:auto}
  /* the hero eyebrow carries a 48px indent to hang its rule in the margin on desktop;
     with the rule on its own line that indent is just a dent. */
  .hero--still .hero__say .eyebrow{padding-left:0}

  /* 🔴 SMOOSHED WAS INSIDE THE SECTIONS, NOT BETWEEN THEM. The gap between sections
     measures 88px top and bottom on 181 of them, which is 176px of air and is not the
     problem. What is tight is the run from a heading into the list or paragraph under
     it, and the rows of a checklist against each other, at a reading size of 1.05rem
     on a 350px column. Both open up here and nowhere else. */
  /* 🔴 ONE CARD INSET ON A PHONE. This is what "oddly aligned" actually was, and it
     took identifying the elements at each edge rather than counting the edges: every
     card type had invented its own padding, so a single 390px column ran content at
     x=47 (.faq__a and .factcard), 49 (.pcard, .ev), 53 (.proc), 55 (.plan) and 57
     (.scard). Five near-identical indents down one column reads as sloppy, and on a
     wide screen where the cards sit side by side nobody ever noticed.
     22px matches the page gutter, so a card's content sits at 44 and the page has TWO
     left edges on a phone instead of six. Desktop is untouched. */
  .pcard,.scard,.proc,.plan,.factcard,.ev,.lead-card,.nl__form,
  .ladder__box,.workshop-cta__card,.faq__a,.faq__q{padding-left:22px;padding-right:22px}
  /* 🔴 the list was written from GUESSED class names first (.ev__in, .ev__body) and two
     of them do not exist, which left .ev, .lead-card, .nl__form, .ladder__box and
     .workshop-cta__card still on their own insets at 46, 49, 51 and 59. Found by
     printing the PARENT class and its computed padding for every block between x=24
     and x=70, rather than by counting edges again. .plan keeps a 3px accent border on
     its left, so it lands at 47 on purpose and is left alone. */

  /* 🔴 THE BUTTONS WERE EATING THE SCREEN. Measured across 30 pages at 390px: 124 of
     229 buttons rendered at 80 percent of the viewport width or more, and 47 of them at
     89 percent. They are inline-flex with nowrap, so the width is the label plus
     2.6em of padding either side, which is a desktop proportion on a 390px screen.
     Smaller padding and one step down in size brings them back to a control rather
     than a slab. --lg stops being large on a phone; there is no room for a size step. */
  .btn{padding:1.05em 1.45em;font-size:.78rem;letter-spacing:.09em}
  .btn--lg{padding:1.1em 1.6em;font-size:.8rem}
  .phead__btns,.hero__btns,.cta-band__btns,.firmstrip__btns,.ev__acts{gap:12px}

  /* 🔴 ONE TYPE SCALE. Counted on a phone: paragraphs alone were running at 12, 15, 16,
     17, 18, 19 and 21px, with list items at 16 and 17 and h3 at 19 and 21. Seven
     paragraph sizes is not a scale, it is noise, and it is what "resuze fonts to line up
     pretty" is pointing at. Four sizes for reading, two for headings, labels left alone
     because a label is not reading. */
  p,.prose p,.split__copy p,.okgrid__copy p,.scen p,.scard p,.arcx__panel p{font-size:1.0625rem}
  .lede,.section-sub,.phead__lead,.phead p,.plan__body{font-size:1.125rem}
  li,.ticklist li,.plan__list li{font-size:1rem}
  /* 🔴 THE NAMED ONES TOO. Plain h2 and h3 selectors were being beaten by the more
     specific rules that set each component's own size, so after the first pass a phone
     still showed h3 at 19, 21, 23 and 26 and h2 at 30 and 34. Found by printing every
     element whose size was NOT one of the intended steps, rather than by re-counting.
     The scale on a phone is: 12/13 labels, 16 list, 17 body, 18 lede, 20 h3, 24 card
     heading, 28 section heading, 32 display. Eight steps is a scale; nine paragraph
     sizes was not. */
  h2,.section-head h2,.split__copy h2,.arcx__panel h3{font-size:1.75rem;line-height:1.18}
  h3,.scard h3,.scen h3,.proc h3,.step h3,.tri h3,.relcard strong,
  .loccard h3,.atty h3,.wcard h3{font-size:1.25rem}
  .pcard h3,.plan__head h2,.ltr__t{font-size:1.5rem;line-height:1.2}
  .statement__big,.hero__title{font-size:2rem;line-height:1.16}
  .plan__for{font-size:1.125rem}
  .plate__q{font-size:1.4rem}

  .ticklist{gap:18px;margin:1.4rem 0 1.9rem}
  .ticklist li{font-size:1rem;line-height:1.6}
  .section-head{margin-bottom:clamp(30px,7vw,44px)}
  .section-head h2,.split__copy h2{margin-bottom:.6em}
  .prose p,.split__copy p{margin-bottom:1.35rem}
}


/* ---- the phone drop-downs (2026-09-02) ------------------------------------
   A .mdrop is a plain block on a desktop and a drop-down on a phone. `open` is in the
   HTML and the script only ever CLOSES one, and only under 620px, so the failure mode
   is "everything visible", which is what the page did before. */
.mdrop{border:0;margin:0}
.mdrop__s{display:none}
.mdrop__b{display:block}
@media(max-width:620px){
  .mdrop{border:1px solid var(--line);background:var(--paper);margin:0 0 14px}
  .mdrop__s{display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:17px 22px;cursor:pointer;list-style:none;
    font-family:var(--ff-b);font-weight:700;font-size:.78rem;letter-spacing:.09em;
    text-transform:uppercase;color:var(--green-d)}
  .mdrop__s::-webkit-details-marker{display:none}
  /* the chevron is drawn here rather than shipped as an icon, so it can rotate */
  .mdrop__s::after{content:"";width:9px;height:9px;flex:none;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s ease}
  .mdrop[open] .mdrop__s::after{transform:rotate(225deg) translate(-2px,-2px)}
  .mdrop__n{font-family:var(--ff-d);font-weight:400;font-size:1rem;letter-spacing:0;
    color:var(--muted);margin-left:auto;margin-right:6px}
  .mdrop__b{padding:0 22px 22px}
  /* the wrapped grids lose their own gutter, the drop-down supplies it */
  .mdrop__b .okgrid,.mdrop__b .scens{padding-left:0;padding-right:0;gap:22px}
  .band--brand .mdrop{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22)}
  .band--brand .mdrop__s{color:#fff}
}


.gloss{display:grid;gap:0}
.gterm{padding:1.7rem 0;border-top:1px solid var(--line)}
.gterm:first-child{border-top:0;padding-top:0}
.gterm h3{font-family:var(--ff-d);font-size:1.45rem;font-weight:500;margin:0 0 .35em;color:var(--green-d)}
.gterm p{margin:0;max-width:var(--measure)}
.v-light .gterm h3{color:var(--teal)}
@media(min-width:900px){
  .gterm{display:grid;grid-template-columns:minmax(0,272px) minmax(0,1fr);gap:clamp(24px,4vw,54px);align-items:start}
  .gterm h3{margin:0}
}
/* per-page Q&A block */
.qa-sec__more{margin:2.2rem 0 0;text-align:center;font-size:.95rem;color:var(--muted);max-width:none}

.tablewrap{overflow-x:auto;margin:1.8rem 0 1rem;-webkit-overflow-scrolling:touch}
.ctable{width:100%;border-collapse:collapse;font-family:var(--ff-b);font-size:.97rem;min-width:520px}
.ctable th,.ctable td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.ctable thead th{font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-d);border-bottom:1px solid var(--hair);white-space:nowrap}
.ctable tbody th{font-weight:600;color:var(--green-d);white-space:nowrap}
.ctable tbody th a{color:inherit;border-bottom:1px solid var(--hair)}
.ctable tbody th a:hover{color:var(--gold-d);text-decoration:none}
.ctable tbody tr:last-child th,.ctable tbody tr:last-child td{border-bottom:0}
.ctable__note{font-size:.92rem;color:var(--muted);max-width:var(--measure)}
.v-light .ctable tbody th{color:var(--teal)}

.edit{display:grid;gap:clamp(22px,3vw,40px)}
.edit__side{position:relative}
.edit__n{display:block;font-family:var(--ff-b);font-size:.74rem;font-weight:700;letter-spacing:.2em;
  color:var(--gold-d);margin-bottom:.7rem}
.edit__kick{display:block;font-family:var(--ff-b);font-size:.78rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sage);margin-bottom:.55rem}
.edit__side h2{font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1.08;margin:0;color:var(--green-d)}
.edit__body p{font-size:1.1rem;line-height:1.8;color:var(--ink-soft);max-width:62ch}
.edit__body p:last-child{margin-bottom:0}
.edit__body p:first-child::first-line{color:var(--ink)}
.edit-sec + .edit-sec{padding-top:clamp(58px,7vw,104px)}
@media(min-width:900px){
  .edit{grid-template-columns:minmax(0,314px) minmax(0,1fr);gap:clamp(38px,5.5vw,86px);align-items:start}
  .edit__side{padding-top:6px}
  .edit__side::after{content:"";position:absolute;right:calc(clamp(38px,5.5vw,86px) / -2);top:4px;bottom:4px;
    width:1px;background:linear-gradient(180deg,var(--hair),rgba(169,138,82,.05))}
  .edit__side h2{position:sticky;top:104px}
}
.v-light .edit__side h2{color:var(--teal)}
.v-light .edit__n{color:var(--teal)}

.markdefs{position:absolute!important;width:0;height:0;overflow:hidden;visibility:hidden}
.acanthus{display:block}

.nav__login{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-b);font-size:.78rem;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--green-d);white-space:nowrap;
  padding:11px 16px;border:1px solid var(--hair);background:transparent;
  transition:background .22s,color .22s,border-color .22s}
.nav__login svg{flex:none;opacity:.9}
a.nav__login:hover{background:var(--green-d);border-color:var(--green-d);color:#fff;text-decoration:none}
.nav__login--soon{cursor:default}
.nav__login--soon em{font-style:normal;font-size:.6rem;font-weight:700;letter-spacing:.11em;
  color:var(--gold-d);border-left:1px solid var(--hair);padding-left:8px;margin-left:2px}
/* 🔴 the transparent nav sits over a DARK photo in the dark variant and a LIGHT
   one in the light variant, so this needs both sets of overrides, exactly like
   the phone number. Setting only the knocked-out colour made the label vanish on
   the light hero and left a bare "Soon" floating in the bar. */
.nav--over .nav__login{color:rgba(255,255,255,.94);border-color:rgba(255,255,255,.42)}
.nav--over .nav__login--soon em{color:var(--gold-l);border-left-color:rgba(255,255,255,.32)}
.nav--over a.nav__login:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.nav--over.nav--solid .nav__login{color:var(--green-d);border-color:var(--hair)}
.nav--over.nav--solid .nav__login--soon em{color:var(--gold-d);border-left-color:var(--hair)}
.v-light .nav--over .nav__login{color:rgba(255,255,255,.94);border-color:rgba(255,255,255,.42)}
.v-light .nav--over.nav--solid .nav__login{color:var(--green-d);border-color:var(--hair)}
.v-light .nav--over .nav__login--soon em{color:var(--teal);border-left-color:rgba(87,124,147,.3)}
.v-light a.nav__login:hover{background:var(--teal);border-color:var(--teal);color:#fff}
/* No breakpoint of its own: .nav__end already collapses to the burger at 1140px,
   and an earlier extra rule here hid the button from 1320px down, which is most
   of a laptop screen. Keeping it to the collapse point is the point of it. */
.mobnav__login{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--ff-b);font-size:.82rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--green-d);border:1px solid var(--hair);padding:13px 18px;margin-top:14px}
.mobnav__login em{font-style:normal;font-size:.62rem;letter-spacing:.11em;color:var(--gold-d);
  border-left:1px solid var(--hair);padding-left:9px}

.pcard p b{font-weight:700;color:var(--green-d)}
.pcard--flag p b{color:var(--gold-d)}
.plan__for b{font-weight:600;font-style:italic;color:var(--green-d)}
.v-light .pcard p b,.v-light .plan__for b{color:var(--teal)}
.v-light .pcard--flag p b{color:var(--gold-d)}

.starthere{position:relative;overflow:hidden;isolation:isolate}
.starthere__mark{position:absolute;z-index:0;left:-6%;bottom:-18%;height:min(88%,520px);width:auto;
  color:#e9eede;opacity:.06;pointer-events:none}
.starthere__mark svg{height:100%;width:auto;display:block}
.starthere__in{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,var(--form-w,470px));
  gap:clamp(38px,6vw,86px);align-items:center}
.starthere__copy h2{color:#fff;font-size:clamp(2.1rem,3.6vw,3rem);margin-bottom:.5em;max-width:15ch}
.starthere__lede{color:#dbe0d0;font-size:1.1rem;line-height:1.72;max-width:52ch}
.starthere__pts{list-style:none;margin:1.9rem 0 0;padding:0;display:grid;gap:14px}
.starthere__pts li{display:flex;gap:13px;align-items:flex-start;color:#e9eede;font-size:1.03rem;line-height:1.5}
.starthere__pts svg{color:var(--gold-l);flex:none;margin-top:3px}
.starthere__ph{margin:1.9rem 0 0;color:#c4cbb6;font-size:.97rem}
.starthere__ph a{color:#fff;border-bottom:1px solid rgba(212,186,138,.6)}
.starthere__ph a:hover{color:var(--gold-l);text-decoration:none}
/* the form card carries a gold top edge here so it reads against the dark ground
   rather than the green edge it uses on pale bands */
.starthere .lead-card{border-top-color:var(--gold);box-shadow:0 40px 90px -44px rgba(0,0,0,.65)}
.starthere .lead-card__title{margin-bottom:1.4rem}
@media(max-width:980px){
  .starthere__in{grid-template-columns:minmax(0,1fr);gap:36px}
  .starthere__copy h2{max-width:none}
  .starthere__mark{left:auto;right:-14%;bottom:-12%;height:min(52%,300px);opacity:.05}
}
.v-light .starthere__pts svg{color:var(--gold-l)}

.starthere .lead-card__title{color:var(--green-d)}
.starthere .lead-card__eyebrow{color:var(--gold-d)}
.starthere .lead-card__fine{color:var(--ink-soft)}
.starthere .lead-card label{color:var(--ink-soft)}
.starthere .lead-card .opt{color:var(--muted)}
.v-light .starthere .lead-card__title{color:var(--teal)}
.v-light .starthere .lead-card__eyebrow{color:var(--teal)}

.nav__in{padding-left:clamp(16px,2.6vw,44px);padding-right:clamp(16px,2.6vw,44px);gap:clamp(14px,1.6vw,24px)}
.nav__links ul{gap:0}
.nav__links .top{padding:12px 9px;letter-spacing:.1em}
.nav__end{gap:clamp(10px,1.1vw,16px)}
/* slimmer login: sentence case, tighter tracking, the tag reduced to a dot-sized
   marker rather than a boxed word */
.nav__login{font-size:.8rem;letter-spacing:.03em;text-transform:none;padding:9px 13px;gap:7px}
.nav__login--soon em{font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;padding-left:7px;margin-left:0}
.nav__ph{font-size:.86rem}
/* the phone is the first thing to go when the bar tightens, then the login */
@media(max-width:1400px){.nav__ph{display:none}}
@media(max-width:1240px){.nav__login{display:none}}
/* the one-row bar keeps Member Login down to its own burger point (Tamara's list, 9/25) */
@media(min-width:1101px){.nav--line .nav__login{display:inline-flex}}

/* 🔴 THE GRID min-width:auto TRAP. `.plans` had no explicit template, so its auto
   column sized to the widest card's MIN-CONTENT and refused to shrink: at a 360px
   viewport the single column computed to 449px and the cards hung 111px off the
   screen. Grid and flex children default to min-width:auto; anything holding text
   inside one needs minmax(0,1fr) on the track or min-width:0 on the item. */
.plans{grid-template-columns:minmax(0,1fr)}
.plan,.pcard,.loccard,.scard,.wcard,.ev,.bcard,.gterm,.edit__side,.edit__body{min-width:0}
.plan__list li,.ticklist li,.recog__list li,.starthere__pts li,.nl__pts li{min-width:0}
.plan__list li span,.ticklist li span,.recog__list li span,.starthere__pts li span{min-width:0}

/* buttons carry white-space:nowrap, which is right on a wide bar and wrong on a
   phone: a long label ran 40px off the About page at 360. Let them wrap and cap
   them to the column once the screen is narrow. */
@media(max-width:520px){
  .btn{white-space:normal;padding-left:1.6em;padding-right:1.6em;max-width:100%}
  .btn--lg{padding-left:1.8em;padding-right:1.8em}
}
/* long unbroken strings (emails, URLs) must never set the page width */
body{overflow-wrap:break-word}
a[href^="mailto:"],.foot__addr a,.gterm p,.edit__body p{overflow-wrap:anywhere}

.burger{padding:12px 10px;min-height:46px;min-width:46px;justify-content:center}
@media(max-width:900px){
  .foot__grid ul li{margin-bottom:2px}
  .foot__grid ul li a{display:inline-block;padding:9px 0;line-height:1.25}
  .foot__addr a,.foot__brand a{display:inline-block;padding:5px 0}
  .evgrid-head__all{padding:10px 0}
  .loc-others a{display:inline-block;padding:8px 4px}
  .mobnav a{min-height:46px;display:flex;align-items:center}
}
/* the staging preview toggle and the chat launcher both live bottom-right on a
   phone; keep them stacked with real clearance instead of touching */
@media(max-width:520px){
  .askfab{bottom:74px}
  .vtoggle{bottom:12px}
}

/* last two under-sized targets on a phone: the footer link lists sat at 35px and
   the phone number inside the closing panel's sentence at 20px */
@media(max-width:900px){
  .foot__grid ul li a{padding:11px 0}
  .starthere__ph a{display:inline-block;padding:9px 0}
}

@media(max-width:900px){
  .reveal-on [data-anim="left"],.reveal-on [data-anim="right"]{transform:translateY(24px)}
  .reveal-on [data-anim="scale"]{transform:translateY(24px) scale(1)}
}

.ib__bar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.ib__filters{display:flex;flex-wrap:wrap;gap:8px}
.ib__f{font:inherit;font-size:.86rem;letter-spacing:.02em;padding:7px 15px;border-radius:999px;
  border:1px solid var(--line);background:transparent;color:var(--ink-soft);cursor:pointer}
.ib__f:hover{border-color:var(--green-d);color:var(--green-dd)}
.ib__f.is-on{background:var(--green-dd);border-color:var(--green-dd);color:#fff}
.ib__upload{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:.9rem;
  padding:8px 18px;border-radius:999px;border:1px dashed var(--green-d);color:var(--green-dd)}
.ib__upload:hover{background:var(--ivory)}
.ib__saved{font-size:.92rem;color:var(--muted);margin:0}
.ib__saved.is-bad{color:#a3302a;font-weight:600}
/* 🔴 2026-09-22. THE STATUS LINE NOW RIDES WITH THE READER. It used to sit in the page
   header, which is where it was when Tamara rated 126 photographs signed out: measured at
   the moment of the click it was 255px ABOVE the viewport, so the one message telling her
   nothing could save was the one thing she could not see. Sticky, directly under the nav,
   full width, so an error lands in front of whoever caused it. */
.ib__stick{position:sticky;top:var(--navh,78px);z-index:40;background:var(--cream);
  border-bottom:1px solid var(--line);padding:.7rem 0}
.ib__stick__in{display:flex;flex-wrap:wrap;gap:.7rem 1.2rem;align-items:center;
  justify-content:space-between}
.ib__signin{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.ib__signin input{border:1px solid var(--taupe);background:var(--paper);color:var(--ink);
  padding:.6em .8em;font-family:var(--ff-b);font-size:.95rem;min-width:min(260px,60vw);
  border-radius:0;-webkit-appearance:none;appearance:none}
.ib__signin input:focus{outline:2px solid var(--blue-btn);outline-offset:1px}
.ib__signin .btn{padding:.62em 1.1em;font-size:.76rem}
/* a board nobody is signed in to does not offer controls that cannot work */
.ib-anon .ib__upload{opacity:.4;cursor:not-allowed}
.ib-anon .ib__v,.ib-anon .ib__notebtn{cursor:pointer}
@media(max-width:700px){
  .ib__stick__in{flex-direction:column;align-items:stretch}
  .ib__signin{width:100%}
  .ib__signin input{flex:1 1 auto;min-width:0}
}
.ib__grp{margin:0 0 46px}
.ib__grp[hidden]{display:none}
/* block, not flex: every word of the heading is wrapped in a .wm span, and as flex items
   they never wrapped, which pushed the board 112px sideways at 390 (QA 2026-09-23) */
.ib__grp h2{font-size:clamp(1.25rem,2vw,1.6rem);margin:0 0 4px}
.ib__n{display:inline-block;margin-left:10px;vertical-align:middle;font-family:var(--ff-b);font-size:.78rem;letter-spacing:.06em;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.ib__sub{color:var(--muted);font-size:.94rem;margin:0 0 18px;max-width:60ch}
.ib__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin-top:14px}
.ib__card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column}
.ib__card[hidden]{display:none}
.ib__card figure{margin:0;aspect-ratio:3/2;background:var(--ivory)}
.ib__card figure img{width:100%;height:100%;object-fit:cover;display:block}
.ib__meta{padding:11px 13px 8px;flex:1}
.ib__alt{font-size:.88rem;line-height:1.35;margin:0 0 5px;color:var(--ink)}
.ib__where{font-size:.76rem;letter-spacing:.02em;color:var(--muted);margin:0}
.ib__acts{display:flex;gap:6px;padding:0 13px 12px}
.ib__v,.ib__notebtn{font:inherit;cursor:pointer;border-radius:8px;border:1px solid var(--line);
  background:transparent;padding:6px 10px;line-height:1}
.ib__v{font-size:1.15rem}
.ib__notebtn{font-size:.8rem;color:var(--ink-soft);margin-left:auto}
.ib__v:hover,.ib__notebtn:hover{border-color:var(--green-d)}
/* 🔴 the verdict has to be readable at a glance across a grid of 118, so it colours the
   whole card edge, not just the button that was pressed */
.ib__card[data-vote="up"]{border-color:#3f7d4f;box-shadow:inset 0 0 0 1px #3f7d4f}
.ib__card[data-vote="up"] .ib__v--up{background:#3f7d4f;border-color:#3f7d4f}
.ib__card[data-vote="down"]{border-color:#a3302a;box-shadow:inset 0 0 0 1px #a3302a;opacity:.72}
.ib__card[data-vote="down"] .ib__v--down{background:#a3302a;border-color:#a3302a}
.ib__card[data-note="1"] .ib__notebtn{background:var(--gold-d);border-color:var(--gold-d);color:#fff}
.ib__note{display:none;font:inherit;font-size:.85rem;width:calc(100% - 26px);margin:0 13px 13px;
  padding:8px 10px;border:1px solid var(--line);border-radius:8px;resize:vertical}
.ib__card.is-noting .ib__note{display:block}
.ib__mine{margin:0 0 46px;padding:20px;border:1px dashed var(--green-d);border-radius:14px;background:var(--ivory)}
.ib__mine h2{margin-top:0}
.ib__card.is-mine{border-style:dashed}
@media(max-width:560px){.ib__grid{grid-template-columns:1fr 1fr;gap:12px}
  .ib__alt{font-size:.8rem}.ib__where{display:none}}

.ib__card--v figure{aspect-ratio:16/9}
.ib__card--v video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.ib__grp--v .ib__grid{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}

/* the full newsletter PDF under each archive card (2026-09-24) */
.nlc__pdf{display:inline-flex;align-items:center;gap:.4em;margin-top:.7rem;font-family:var(--ff-b);
  font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-d)}
.nlc__pdf svg{width:14px;height:14px}