:root{
  /* ink and paper. The greens are the brand values; the paper tones were
     picked so a hairline rule reads at 1px without turning muddy. */
  /* Roughly 60 percent dark, 25 ivory, 10 forest, 5 gold. Gold is the metal on
     a dark room, not a colour the page is painted with. */
  --green:#06281D; --green-mid:#0C3B2A; --green-dark:#041C14; --green-deep:#050806;
  --gold:#C9A34A; --gold-light:#E1C477; --gold-ink:#8A6A22;
  --paper:#F4F0E7; --paper-2:#EDE7DA; --paper-3:#E4DCCB; --white:#FBF9F4;
  --ink:#141A16; --muted:#4E574F; --rule:#D2C8B2; --rule-soft:#E2DACA;

  --serif:"Newsreader",Georgia,"Iowan Old Style","Times New Roman",serif;
  --shell-w:1240px;
  --sans:"Public Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --shell:1240px; --measure:66ch;
  --gut:clamp(20px,4vw,40px);
  --step:1;
  --t:.45s cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
/* The mastheads carry a big decorative arc that is meant to run off the right
   edge. On a phone that bleed made the whole document 9 to 15px wider than the
   screen, so every page drifted sideways under the thumb. overflow-x:clip stops
   the drift without creating a scroll container, which is the difference that
   matters: overflow-x:hidden here would have broken position:sticky. */
html,body{overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:calc(19.5px * var(--step));
  line-height:1.72;font-variant-numeric:oldstyle-nums proportional-nums;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* paper grain. Faint enough that you feel it rather than see it. */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.hc::before{display:none}

/* ---- type ------------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;color:var(--green-dark);margin:0 0 .5em;
  letter-spacing:-.012em;text-wrap:balance}
h1{font-size:clamp(2.7rem,6.4vw,5.4rem);line-height:.99;font-weight:400;letter-spacing:-.022em}
h2{font-size:clamp(2rem,3.9vw,3.3rem);line-height:1.06;font-weight:400;letter-spacing:-.016em}
h3{font-size:clamp(1.2rem,1.7vw,1.45rem);line-height:1.28;font-weight:600}
p{margin:0 0 1.15em}
em,i{font-style:italic}
a{color:var(--green);text-underline-offset:.18em;text-decoration-thickness:from-font}
a:hover{color:var(--gold-ink)}
img{max-width:100%;height:auto;display:block}
strong,b{font-weight:600}
::selection{background:var(--gold);color:var(--green-deep)}

/* labels, nav, buttons, anything tabular */
.lbl,.eyebrow,.btn,nav,.sans,th,.fig,.meta,.crumbs,label,input,textarea,button,
.site-footer h2,.a11y,.chip,.stat b,.when{font-family:var(--sans)}
.fig,.when,.tnum{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}

.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-ink);margin:0 0 1rem;display:block}
.lead{font-size:1.22rem;line-height:1.6;color:var(--muted)}
.dek{font-family:var(--serif);font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.5;
  color:var(--muted);font-style:italic}
.small{font-size:.94rem;color:var(--muted)}

/* ---- shell and the editorial grid ------------------------------------- */
.wrap{max-width:var(--shell);margin:0 auto;padding:0 var(--gut)}
.g{display:grid;grid-template-columns:repeat(12,1fr);gap:0 clamp(18px,2.4vw,34px)}
.c1-6{grid-column:1/7}   .c1-7{grid-column:1/8}   .c1-8{grid-column:1/9}
.c1-5{grid-column:1/6}   .c1-9{grid-column:1/10}  .c2-8{grid-column:2/9}
.c2-9{grid-column:2/10}
.c3-11{grid-column:3/12} .c4-13{grid-column:4/13} .c5-13{grid-column:5/13}
.c6-13{grid-column:6/13} .c7-13{grid-column:7/13} .c8-13{grid-column:8/13}
.c9-13{grid-column:9/13} .c10-13{grid-column:10/13}
.c1-13{grid-column:1/13} .c1-3{grid-column:1/4}
.c1-4{grid-column:1/5}   .c5-9{grid-column:5/10}
section{padding:clamp(5.5rem,10vw,10rem) 0;position:relative;z-index:2}
.tight{padding-top:clamp(2rem,4vw,3.5rem)}

/* ---- the rules that hold the page together ---------------------------- */
.rule{border:0;border-top:1px solid var(--rule);margin:0}
.rule-heavy{border:0;border-top:2px solid var(--green);margin:0}
.rule-gold{border:0;border-top:2px solid var(--gold);width:52px;margin:0 0 1.5rem}
/* a rule that draws itself once, the only motion on most pages */
.draw{border:0;border-top:1px solid var(--rule);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.draw.in{transform:scaleX(1)}
body.reduce-motion .draw{transform:none;transition:none}

/* section head: number hanging in the margin, rule, then the title */
.shead{border-top:1px solid var(--gold);padding-top:1.6rem;margin-bottom:clamp(2.4rem,5vw,4rem)}
.shead .no{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.18em;
  color:var(--gold-ink);font-variant-numeric:tabular-nums}
.shead h2{margin:.5rem 0 0;max-width:18ch}
.shead .lead{margin:1rem 0 0;max-width:46ch}
.shead .note{font-family:var(--sans);font-size:.88rem;line-height:1.55;color:var(--muted);
  border-left:2px solid var(--gold);padding-left:14px;margin-top:.6rem}

/* a note in the gutter, the way a printed report annotates itself */
.margin-note{font-family:var(--sans);font-size:.86rem;line-height:1.55;color:var(--muted);
  border-top:1px solid var(--rule);padding-top:.7rem;margin-top:.4rem}
.margin-note b{display:block;color:var(--green);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:.35rem}

/* ---- buttons ---------------------------------------------------------- */
/* Outlined by default. A solid slab of gold reads cheap, so the filled gold
   button is reserved for the single primary action on a page. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:60px;padding:18px 38px;border:1px solid transparent;border-radius:0;
  font-size:.85rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;line-height:1;position:relative;
  transition:background var(--t),color var(--t),border-color var(--t)}
.btn-gold{background:var(--gold);color:#1a1405;border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-light);border-color:var(--gold-light);color:#1a1405}
.btn-green{background:var(--green);color:var(--white);border-color:var(--green)}
.btn-green:hover{background:var(--green-mid);color:#fff}
.btn-line{background:transparent;color:var(--green);border-color:var(--gold-ink)}
.btn-line:hover{background:var(--green);color:var(--white);border-color:var(--green)}
.btn-pale{background:transparent;color:var(--white);border-color:rgba(255,255,255,.5)}
.btn-pale:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
/* an outlined button on any dark ground has to switch to white, or it paints
   dark green on near black and disappears */
.masthead.dark .btn-line,.band-dark .btn-line,.byob .btn-line,.close-block .btn-line,
.on-dark .btn-line,.band-green .btn-line{color:#fff;border-color:rgba(255,255,255,.5);background:transparent}
.masthead.dark .btn-line:hover,.band-dark .btn-line:hover,.byob .btn-line:hover,
.close-block .btn-line:hover,.on-dark .btn-line:hover,.band-green .btn-line:hover{
  background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.band-dark .xref,.masthead.dark .xref,.on-dark .xref{color:var(--gold-light);border-color:var(--gold)}
.band-dark .xref:hover,.on-dark .xref:hover{color:#fff}
.band-dark .small,.on-dark .small{color:#9aac9a}
.band-dark .shead .note{color:#b3c2b2}
.band-dark .nlist,.band-dark .nlist > li{border-color:rgba(255,255,255,.2)}
.band-dark .nlist h3{color:#fff}
.band-dark .nlist p{color:#c6d3c4}
.band-dark .index{border-color:var(--gold)}
.band-dark .index-row{border-color:rgba(255,255,255,.18)}
.band-dark .index-row:hover{background:rgba(255,255,255,.05)}
.band-dark .index-row .t{color:#fff}
.band-dark .index-row p,.band-dark .index-row .when{color:#b3c2b2}
.band-dark .index-row:hover .t{color:var(--gold-light)}
.band-dark .lesson{border-color:var(--gold)}
.band-dark .lesson .learn .sub{color:var(--gold-light);border-color:rgba(255,255,255,.2)}
.band-dark .lesson .learn li{color:#c6d3c4}
.band-dark .lesson .learn li svg{color:var(--gold)}
.band-dark .chips,.band-dark .chips a{border-color:rgba(255,255,255,.2)}
.band-dark .chips a{color:#e4ebe2}
.band-dark .chips a:hover{color:var(--gold-light)}
.band-dark .chips a svg{color:var(--gold)}
.btn-wide{width:100%}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:2rem}

/* a text link that behaves like an editorial cross-reference */
.xref{font-family:var(--sans);font-size:.88rem;font-weight:700;letter-spacing:.08em;
  min-height:44px;display:inline-flex;align-items:center;
  text-transform:uppercase;text-decoration:none;color:var(--green);
  display:inline-flex;align-items:center;gap:.5rem;border-bottom:1.5px solid var(--gold);
  padding-bottom:3px;transition:gap var(--t),border-color var(--t)}
.xref:hover{gap:.85rem;border-color:var(--green);color:var(--green)}

/* ---- accessibility basics --------------------------------------------- */
.skip{position:absolute;left:16px;top:-70px;background:var(--green);color:#fff;
  padding:14px 20px;z-index:3000;font-family:var(--sans);font-weight:700;transition:top .15s}
.skip:focus{top:12px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--gold-ink);outline-offset:3px}

/* ---- header ----------------------------------------------------------- */
.util{background:var(--green-deep);color:#c9d6c9;font-family:var(--sans);font-size:.8rem}
.util .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;
  min-height:40px;flex-wrap:wrap}
.util a{color:var(--gold-light);text-decoration:none}
.util a:hover{color:#fff}
.util span{display:inline-flex;align-items:center;gap:7px}
.site-header{position:sticky;top:0;z-index:900;background:rgba(251,247,239,.97);
  border-bottom:1px solid var(--rule);backdrop-filter:saturate(150%) blur(8px)}
.bar{display:flex;align-items:center;gap:20px;min-height:98px}
/* the mark is the Rhema shield, transparent around its edge, so the
   same file sits on cream in the header and on deep green in the footer. The
   wordmark is live text rather than baked into an image, so it stays crisp and
   uses the site's own serif. */
.brand{flex:0 0 auto;display:flex;align-items:center;gap:14px;text-decoration:none}
.brand-mark{width:70px;height:70px;flex:0 0 auto}
.brand-wm{display:block;line-height:1}
.brand-wm b{display:block;font-family:var(--serif);font-size:1.72rem;font-weight:500;
  letter-spacing:.17em;color:var(--green);white-space:nowrap}
.brand-wm i{display:block;font-family:var(--sans);font-style:normal;font-size:.58rem;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);
  margin-top:6px;white-space:nowrap}
.brand-rev .brand-wm b{color:#fff}
.brand-rev .brand-wm i{color:var(--gold-light)}
.mobile-menu .brand-mark{width:56px;height:56px}
.mobile-menu .brand-wm b{font-size:1.22rem}
.nav-main{display:flex;align-items:center;gap:clamp(12px,1.5vw,22px);margin-left:auto;
  flex:0 0 auto}
.nav-main a{font-size:.86rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  min-height:44px;display:inline-flex;align-items:center;white-space:nowrap;
  color:var(--ink);text-decoration:none;white-space:nowrap;padding:8px 0;
  border-bottom:2px solid transparent;transition:border-color var(--t),color var(--t)}
.nav-main a:hover,.nav-main a[aria-current=page]{border-color:var(--gold);color:var(--green)}
.head-cta{flex:0 0 auto;display:flex;align-items:center;gap:12px}
/* The header runs out of room long before the mobile breakpoint. A 70px mark,
   a wordmark, five nav items and two buttons at the site's normal 40px button
   padding came to more than the shell is wide, so the Schedule button hung off
   the right edge of the page and the whole document scrolled sideways. Header
   buttons get their own tighter sizing rather than the page's. */
.site-header .btn{min-height:52px;padding:15px 24px;font-size:.75rem;letter-spacing:.12em}
.site-header .btn-sm{min-height:52px;padding:15px 18px;font-size:.72rem}
.menu-btn{display:none;width:54px;height:54px;align-items:center;justify-content:center;
  background:transparent;border:1.5px solid var(--rule);border-radius:2px;color:var(--green);cursor:pointer}

.mobile-menu{position:fixed;inset:0;background:var(--paper);z-index:1500;display:none;
  flex-direction:column;padding:20px var(--gut) 40px;overflow-y:auto}
.mobile-menu.open{display:flex}
.mobile-menu .row{display:flex;justify-content:space-between;align-items:center;
  padding-bottom:18px;border-bottom:1px solid var(--rule);margin-bottom:8px}
.mobile-menu nav{display:flex;flex-direction:column}
.mobile-menu nav a{font-family:var(--serif);font-size:1.7rem;color:var(--green-dark);
  text-decoration:none;padding:18px 0;border-bottom:1px solid var(--rule-soft)}
.mobile-menu .m-act{margin-top:26px;display:grid;gap:12px}

/* ---- masthead (the page opener) --------------------------------------- */
.masthead{padding:clamp(4.5rem,9vw,9rem) 0 clamp(4rem,8vw,7rem);border-bottom:1px solid var(--rule)}
.masthead h1{margin:0}
.masthead .kicker{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-ink);margin:0 0 1.6rem;
  padding-bottom:1rem;border-bottom:1px solid var(--rule)}
.masthead .dek{margin:0}
.masthead .side{display:flex;flex-direction:column;justify-content:flex-end;height:100%}

/* dark masthead, used on the pages that should feel like a cover */
.masthead.dark{background:var(--green-deep);color:var(--paper);border-bottom:0;position:relative;overflow:hidden}
.masthead.dark h1{color:var(--white)}
.masthead.dark .kicker{color:var(--gold-light);border-color:rgba(255,255,255,.22)}
.masthead.dark .dek{color:#c6d3c4}
.masthead.dark .margin-note{color:#b3c2b2;border-color:rgba(255,255,255,.22)}
.masthead.dark .margin-note b{color:var(--gold-light)}
.masthead.dark::after{content:"";position:absolute;right:-14%;top:-30%;width:60vw;height:60vw;
  max-width:760px;max-height:760px;border-radius:50%;
  border:1px solid rgba(201,168,76,.22);pointer-events:none}

/* ---- editorial rows (replaces the three-card grid) -------------------- */
.erows{border-top:1px solid var(--rule)}
form.lead{grid-template-columns:minmax(0,1fr)}form.lead>*,form.lead .lf2>*{min-width:0}
form.lead input,form.lead select,form.lead textarea{max-width:100%;min-width:0;box-sizing:border-box}
@media(max-width:820px){.sched-form{min-width:0;order:-1;margin-bottom:2rem}}
.faq-src{display:block;margin-top:.6rem;font-size:.82rem;color:var(--muted,#6b6b6b)}
.move-anchor{scroll-margin-top:110px}.erow h4{font-family:var(--sans);font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:1.2rem 0 .4rem;color:var(--green)}
.move-jump{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.move-jump a{display:flex;gap:.7rem;align-items:baseline;padding:1rem 1.1rem;border:1px solid var(--gold);border-radius:6px;font-size:1.1rem;text-decoration:none;color:inherit;min-height:48px}.move-jump a:hover,.move-jump a:focus-visible{background:var(--green);color:#fff}.move-jump .no{font-size:.8rem;font-weight:700;color:var(--gold)}
.erow{display:grid;grid-template-columns:repeat(12,1fr);gap:0 clamp(18px,2.4vw,34px);
  padding:clamp(2.4rem,4vw,3.6rem) 0;border-bottom:1px solid var(--rule);align-items:start}
.erow .idx{grid-column:1/2;font-family:var(--sans);font-size:.78rem;font-weight:700;
  letter-spacing:.14em;color:var(--gold-ink);font-variant-numeric:tabular-nums;padding-top:.55rem}
.erow .mark{grid-column:2/3;color:var(--green);padding-top:.2rem}
.erow .body{grid-column:3/9}
.erow .side{grid-column:10/13}
.erow h3{font-size:clamp(1.4rem,2.2vw,1.85rem);font-weight:400;margin-bottom:.4rem}
.erow .say{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green-mid);margin:0 0 .8rem}
.erow p{color:var(--muted);max-width:56ch}
.erow ul{margin:.4rem 0 1rem;padding-left:1.1rem;color:var(--muted)}
.erow li{margin-bottom:.35rem}
/* on dark bands */
.on-dark .erow,.on-dark .erows{border-color:rgba(255,255,255,.2)}
.on-dark .erow h3{color:#fff}
.on-dark .erow p,.on-dark .erow li{color:#c6d3c4}
.on-dark .erow .mark{color:var(--gold)}
.on-dark .erow .say{color:var(--gold-light)}
.on-dark .erow .idx{color:var(--gold)}

/* ---- index list (videos, guides, anything with many entries) ---------- */
.index{border-top:2px solid var(--green);margin-top:1.5rem}
/* these rows are <button> elements, which default to centered text and a
   platform font, so both have to be reset explicitly */
.index-row{display:grid;grid-template-columns:2.6rem 108px 1fr auto;gap:clamp(14px,2vw,26px);
  align-items:center;padding:1.15rem 0;border:0;border-bottom:1px solid var(--rule-soft);
  text-align:left;font:inherit;background:none;width:100%;cursor:pointer;
  text-decoration:none;color:inherit;transition:background var(--t)}
.index-row:hover{background:var(--paper-2)}
/* A row with no thumbnail: guides, articles, anything text only. This used to
   be an inline grid-template-columns on the element, which quietly beat every
   media query below, so the article rows never reflowed on a phone while the
   video rows did. That is what made the two lists look misaligned. */
.index-row.plain{grid-template-columns:2.6rem 1fr auto}
.index-row .n{font-family:var(--sans);font-size:.78rem;font-weight:700;color:var(--gold-ink);
  font-variant-numeric:tabular-nums}
.index-row .thumb{position:relative;aspect-ratio:16/10;border-radius:2px;overflow:hidden;
  background:var(--green-deep) url("/img/logo-mark.png") center/34px no-repeat;
  background-image:image-set(url("/img/logo-mark.webp") type("image/webp"),url("/img/logo-mark.png") type("image/png"))}
.index-row .thumb img{width:100%;height:100%;object-fit:cover}
.index-row .thumb .pl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff}
.index-row .t{display:block;font-family:var(--serif);font-size:1.08rem;font-weight:500;
  margin:0 0 .18rem;color:var(--green-dark);line-height:1.3}
.index-row p{margin:0;font-size:.95rem;color:var(--muted);max-width:52ch}
.index-row .when{font-family:var(--sans);font-size:.8rem;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.index-row:hover .t{color:var(--gold-ink)}

/* ---- ledger list (events, checklists, anything with a leader line) ---- */
.ledger{border-top:2px solid var(--green);margin-top:1.5rem}
.ledger-row{display:grid;grid-template-columns:6.5rem 1fr auto;gap:clamp(16px,2.4vw,32px);
  align-items:baseline;padding:1.6rem 0;border-bottom:1px solid var(--rule)}
.ledger-row .when{font-family:var(--sans);font-variant-numeric:tabular-nums}
.ledger-row .when b{display:block;font-family:var(--serif);font-size:2rem;font-weight:400;
  line-height:1;color:var(--green)}
.ledger-row .when span{display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-ink);margin-top:.3rem}
.ledger-row h3{margin:0 0 .3rem;font-size:1.3rem;font-weight:500}
.ledger-row p{margin:0 0 .5rem;color:var(--muted);max-width:58ch}
/* flows as one sentence, so a long venue address does not orphan the pin icon
   onto a line of its own */
.ledger-row .where{font-family:var(--sans);font-size:.86rem;color:var(--green);line-height:1.6}
.ledger-row .where svg{vertical-align:-3px;margin-right:5px}
.ledger-row.past{opacity:.66}
.ledger-row.past .when b{color:var(--muted)}

/* ---- numbered editorial list ------------------------------------------ */
.nlist{counter-reset:n;border-top:1px solid var(--rule);margin-top:1.4rem}
.nlist > li{list-style:none;counter-increment:n;display:grid;
  grid-template-columns:3.4rem 1fr;gap:clamp(14px,2vw,26px);
  padding:1.5rem 0;border-bottom:1px solid var(--rule)}
.nlist > li::before{content:counter(n,decimal-leading-zero);font-family:var(--sans);
  font-size:.82rem;font-weight:700;letter-spacing:.1em;color:var(--gold-ink);
  font-variant-numeric:tabular-nums;padding-top:.4rem}
.nlist h3{margin:0 0 .3rem}
.nlist p{margin:0;color:var(--muted);max-width:60ch}
.nlist{padding:0;margin-left:0}

/* ---- goal cards, but as a stacked question list ----------------------- */
.goals{border-top:2px solid var(--green)}
.goal{display:grid;grid-template-columns:2.8rem 1fr auto;gap:clamp(14px,2vw,28px);
  align-items:center;padding:1.7rem 0;border-bottom:1px solid var(--rule);
  text-decoration:none;color:inherit;transition:padding-left var(--t),background var(--t)}
.goal:hover{padding-left:.7rem;background:var(--paper-2)}
.goal .mark{color:var(--green)}
.goal q{display:block;font-family:var(--serif);font-size:clamp(1.15rem,1.9vw,1.5rem);
  font-style:italic;color:var(--green-dark);quotes:"\201C" "\201D";margin-bottom:.25rem}
.goal p{margin:0;font-size:.96rem;color:var(--muted)}
.goal .xref{border:0;padding:0}
.goal:hover .xref{color:var(--gold-ink)}

/* ---- figures and pull quotes ------------------------------------------ */
.pull{font-family:var(--serif);font-size:clamp(1.5rem,2.8vw,2.15rem);line-height:1.35;
  font-style:italic;color:var(--green-dark);margin:0;
  border-top:2px solid var(--gold);border-bottom:1px solid var(--rule);padding:1.6rem 0}
.pull cite{display:block;font-family:var(--sans);font-style:normal;font-size:.78rem;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin-top:1rem}
.figs{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--green)}
.figs > div{padding:1.8rem clamp(14px,2vw,28px) 1.8rem 0;border-right:1px solid var(--rule)}
.figs > div:last-child{border-right:0}
.figs b{display:block;font-family:var(--serif);font-size:clamp(2.4rem,4.4vw,3.4rem);
  font-weight:400;line-height:1;color:var(--green);font-variant-numeric:lining-nums tabular-nums}
.figs span{display:block;font-family:var(--sans);font-size:.82rem;color:var(--muted);margin-top:.6rem;max-width:24ch}
.on-dark .figs,.on-dark .figs > div{border-color:rgba(255,255,255,.22)}
.on-dark .figs b{color:var(--gold)}
.on-dark .figs span{color:#c6d3c4}

/* ---- bands ------------------------------------------------------------ */
.band-2{background:var(--paper-2)}
.band-3{background:var(--paper-3)}
.band-dark{background:var(--green-deep);color:var(--paper)}
.band-dark h2,.band-dark h3{color:var(--white)}
.band-dark .lead,.band-dark .dek{color:#c6d3c4}
.band-dark .eyebrow,.band-dark .shead .no{color:var(--gold-light)}
.band-dark .shead{border-color:var(--gold)}
.band-dark p{color:#c6d3c4}
.band-green{background:var(--green);color:#eaf1e7}
.band-green h2,.band-green h3{color:#fff}
.band-green .eyebrow{color:var(--gold-light)}
.band-green p{color:#d3e0d0}

/* ---- video: poster and player ----------------------------------------- */
.vfacade{position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
  aspect-ratio:16/9;overflow:hidden;border-radius:2px;
  background:var(--green-deep) url("/img/logo-mark.png") center 42%/72px no-repeat;
  background-image:image-set(url("/img/logo-mark.webp") type("image/webp"),url("/img/logo-mark.png") type("image/png"))}
.vfacade img{width:100%;height:100%;object-fit:cover;opacity:.86;transition:opacity var(--t),transform var(--t)}
.vfacade:hover img{opacity:1;transform:scale(1.02)}
.vfacade .pl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff}
.vfacade .pl svg{width:76px;height:76px;filter:drop-shadow(0 3px 14px rgba(0,0,0,.55))}
.vfacade .cap{position:absolute;left:0;right:0;bottom:0;padding:2.6rem 18px 1rem;text-align:left;
  font-family:var(--sans);font-size:.95rem;font-weight:600;color:#fff;
  background:linear-gradient(transparent,rgba(6,23,16,.88))}
.vplayer{position:relative;aspect-ratio:16/9;border-radius:2px;overflow:hidden}
.vplayer iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- faq -------------------------------------------------------------- */
.faq-tools{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:0 0 1rem}
.faq-search{flex:1 1 300px;display:flex;align-items:center;gap:12px;background:var(--white);
  border:1px solid var(--rule);border-radius:2px;padding:4px 18px}
.faq-search input{border:0;outline:0;font-family:var(--sans);font-size:1rem;flex:1;
  padding:14px 0;background:transparent;color:var(--ink)}
.faq-count{font-family:var(--sans);font-size:.86rem;color:var(--muted);font-variant-numeric:tabular-nums}
.faq-cat{margin-top:3.5rem}
.faq-cat > h2{font-size:clamp(1.4rem,2.2vw,1.8rem);border-top:2px solid var(--green);
  padding-top:1rem;margin-bottom:.4rem}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-item h3{margin:0;font-size:1.05rem}
.faq-q{width:100%;text-align:left;background:none;border:0;padding:1.3rem 0;cursor:pointer;
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  font-family:var(--serif);font-size:1.16rem;font-weight:500;color:var(--green-dark);line-height:1.4}
.faq-q:hover{color:var(--gold-ink)}
.faq-q .chev{flex:0 0 auto;color:var(--gold-ink);transition:transform var(--t);align-self:center}
.faq-q[aria-expanded=true] .chev{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.22,.61,.36,1)}
.faq-item.open .faq-a{padding-bottom:1.4rem}
.faq-a p{color:var(--muted);margin:0;max-width:62ch}
.faq-empty{font-family:var(--sans);color:var(--muted);padding:1.5rem 0}
body.reduce-motion .faq-a{transition:none}

/* ---- checklist -------------------------------------------------------- */
.quiz{border-top:2px solid var(--green)}
.quiz ul{list-style:none;margin:0;padding:0}
.quiz li{display:grid;grid-template-columns:30px 1fr;gap:16px;align-items:start;
  padding:1.05rem 0;border-bottom:1px solid var(--rule-soft);cursor:pointer}
.quiz li:hover{background:var(--paper-2)}
.quiz input{width:24px;height:24px;margin-top:.25rem;accent-color:var(--green)}
.quiz label{cursor:pointer;font-size:1.04rem}
.quiz-go{margin-top:1.8rem}
.quiz-out{display:none;margin-top:1.6rem;border-top:2px solid var(--gold);padding-top:1.4rem}
.quiz-out.show{display:block}
.quiz-out strong{display:block;font-family:var(--serif);font-size:1.5rem;font-weight:400;
  color:var(--green-dark);margin-bottom:.5rem}
.quiz-out p{color:var(--muted)}

/* ---- forms ------------------------------------------------------------ */
form{display:grid;gap:1.2rem}
.field{display:grid;gap:.45rem}
label{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
input,textarea,select{font-family:var(--sans);font-size:1rem;padding:15px 16px;
  border:1px solid var(--rule);border-radius:2px;background:var(--white);color:var(--ink)}
input:focus,textarea:focus{border-color:var(--green)}
textarea{min-height:140px;resize:vertical}
.form-note{font-family:var(--sans);font-size:.94rem;font-weight:600;margin:0}
.form-note.ok{color:var(--green)}
.safe{display:flex;gap:12px;align-items:flex-start;font-family:var(--sans);font-size:.9rem;
  color:var(--green);border-left:2px solid var(--gold);padding:.2rem 0 .2rem 14px;margin:0 0 1.2rem}

/* ---- tables ----------------------------------------------------------- */
.cmp{width:100%;border-collapse:collapse;min-width:660px;font-family:var(--sans);font-size:.95rem}
.cmp th,.cmp td{padding:1rem .9rem;text-align:center;border-bottom:1px solid var(--rule)}
.cmp thead th{border-bottom:2px solid var(--green);font-size:.76rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--green);vertical-align:bottom}
.cmp thead th:first-child,.cmp th[scope=row]{text-align:left}
.cmp th[scope=row]{font-weight:600;color:var(--ink);font-size:.98rem}
.cmp td{color:var(--muted)}
.cmp .y{color:var(--green)}
.cmp .n{color:#a89e88}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---- prose ------------------------------------------------------------ */
.prose{max-width:var(--measure)}
.prose h2{margin-top:2.6rem;padding-top:1.2rem;border-top:1px solid var(--rule);font-size:clamp(1.5rem,2.4vw,2rem)}
.prose h3{margin-top:1.8rem}
.prose ul,.prose ol{padding-left:1.3rem}
.prose li{margin-bottom:.55rem;color:var(--muted)}
.prose dl{margin:0}
.prose dt{font-weight:600;color:var(--green-dark);margin-top:1.3rem;
  padding-top:1.1rem;border-top:1px solid var(--rule-soft)}
.prose dd{margin:.35rem 0 0;color:var(--muted)}
.callout{border-top:2px solid var(--gold);border-bottom:1px solid var(--rule);
  padding:1.4rem 0;margin:2rem 0;font-family:var(--sans);font-size:.98rem;color:var(--muted)}
.callout strong{color:var(--green);display:block;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:.5rem}

/* ---- chips ------------------------------------------------------------ */
.chips{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--rule)}
.chips a{flex:1 1 340px;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:1.15rem 1.2rem 1.15rem 0;border-bottom:1px solid var(--rule);text-decoration:none;
  font-family:var(--serif);font-size:1.06rem;color:var(--green-dark);transition:padding var(--t),color var(--t)}
.chips a:hover{padding-left:.7rem;color:var(--gold-ink)}
.chips a svg{color:var(--gold-ink);flex:0 0 auto}

/* ---- closing block ---------------------------------------------------- */
.close-block{background:var(--green-deep);color:var(--paper);padding:clamp(3.5rem,7vw,6rem) 0}
.close-block h2{color:#fff;font-size:clamp(2.1rem,4.4vw,3.4rem);margin:0;max-width:14ch}
.close-block .sub{font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.6vw,2.1rem);
  color:var(--gold-light);margin:.3rem 0 1.4rem;max-width:18ch}
.close-block p{color:#c6d3c4;max-width:46ch}
.close-block .fine{font-family:var(--sans);font-size:.84rem;color:#9aac9a;margin-top:1.4rem}
.close-block .phone{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.2rem);color:#fff;
  text-decoration:none;display:inline-block;margin-top:.4rem;border-bottom:2px solid var(--gold);
  font-variant-numeric:lining-nums tabular-nums}
.close-block .phone:hover{color:var(--gold-light)}

/* ---- footer ----------------------------------------------------------- */
.site-footer{background:var(--green-deep);color:#b6c5b5;padding:clamp(3rem,5vw,4.5rem) 0 2rem;
  font-family:var(--sans);font-size:.92rem;border-top:1px solid rgba(201,168,76,.3)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(24px,3vw,44px)}
.site-footer h2{color:var(--gold-light);font-size:.72rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 1.1rem;padding-bottom:.7rem;border-bottom:1px solid rgba(255,255,255,.16)}
.site-footer a{color:#e4ebe2;text-decoration:none}
.site-footer a:hover{color:var(--gold-light)}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.foot-brand .brand{margin-bottom:1.2rem}
.foot-brand p{color:#9aac9a;max-width:32ch;font-size:.92rem}
.foot-bottom{margin-top:3rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.14);color:#8fa38f}
.disclaimer{font-size:.8rem;line-height:1.65;color:#84987f;margin-top:1rem}

/* ---- accessibility panel ---------------------------------------------- */
.a11y{position:fixed;right:16px;bottom:16px;z-index:950;display:flex;flex-direction:column;
  gap:8px;align-items:flex-end}
.a11y-panel{display:none;background:var(--white);border:1px solid var(--rule);
  box-shadow:0 18px 50px rgba(13,40,35,.18);padding:16px;width:238px;border-radius:2px}
.a11y-panel.open{display:block}
.a11y-h{margin:0 0 .7rem;font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.a11y-panel .grp{display:flex;gap:8px;margin-bottom:9px}
.a11y-panel button{flex:1;border:1px solid var(--rule);background:var(--white);border-radius:2px;
  padding:11px;font-family:var(--sans);font-size:.85rem;font-weight:700;cursor:pointer;color:var(--green)}
.a11y-panel button:hover{border-color:var(--green)}
.a11y-panel button[aria-pressed=true]{background:var(--green);color:#fff;border-color:var(--green)}
.a11y-toggle{background:var(--green);color:#fff;border:0;border-radius:2px;padding:14px 18px;
  min-height:44px;
  font-family:var(--sans);font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 10px 30px rgba(6,23,16,.28);cursor:pointer;display:inline-flex;align-items:center;gap:9px}
.reading-guide{position:fixed;left:0;right:0;height:54px;background:rgba(201,168,76,.15);
  border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);pointer-events:none;
  z-index:940;display:none}
body.guide-on .reading-guide{display:block}

/* high contrast */
body.hc{--paper:#fff;--paper-2:#fff;--paper-3:#f2f2f2;--white:#fff;
  --muted:#1a1a1a;--rule:#1a1a1a;--rule-soft:#767676;--gold-ink:#6b5410}
body.hc .lead,body.hc p,body.hc .index-row p,body.hc .faq-a p{color:#1a1a1a}
body.hc a{text-decoration:underline}

.foot-tag{font-family:var(--serif);font-style:italic;font-size:1.16rem;color:var(--gold-light);
  margin:0 0 .4rem}

/* ---- the five power moves, as architectural panels -------------------- */
.panels{display:grid;grid-template-columns:repeat(5,1fr);border-top:2px solid var(--gold);
  margin-top:1.5rem}
.panel{position:relative;display:flex;flex-direction:column;padding:2.2rem 1.5rem 2.6rem 0;
  border-right:1px solid rgba(255,255,255,.2);min-height:clamp(300px,32vw,420px)}
.panel:not(:first-child){padding-left:1.5rem}
.panel:last-child{border-right:0;padding-right:0}
.panel .no{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.2em;
  color:var(--gold);font-variant-numeric:tabular-nums}
.panel .mark{margin:1.5rem 0 auto;color:var(--gold)}
.panel h3{font-size:clamp(1.1rem,1.5vw,1.45rem);font-weight:400;color:#fff;margin:1.5rem 0 .5rem}
.panel p{font-size:.94rem;line-height:1.55;color:#b9c8b7;margin:0}
.panel::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;
  background:var(--gold);transition:width .55s cubic-bezier(.22,.61,.36,1)}
.panel:hover::after,.panel:focus-within::after{width:100%}
body.reduce-motion .panel::after{transition:none}

/* ---- timeline (the About story) --------------------------------------- */
.tl{border-top:2px solid var(--green);margin-top:1.5rem}
.tl-row{display:grid;grid-template-columns:7.5rem 1fr;gap:clamp(16px,3vw,40px);
  padding:1.7rem 0;border-bottom:1px solid var(--rule)}
.tl-row b{font-family:var(--serif);font-size:1.75rem;font-weight:400;line-height:1;
  color:var(--gold-ink);font-variant-numeric:lining-nums tabular-nums}
.tl-row h3{margin:0 0 .3rem}
.tl-row p{margin:0;color:var(--muted);max-width:58ch}

/* ---- a video with its lesson beside it -------------------------------- */
.lesson{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(24px,3.4vw,54px);
  align-items:start;border-top:2px solid var(--green);padding-top:2rem;margin-top:1.5rem}
.lesson .learn h3{margin:0 0 .5rem}
.lesson .learn > p{color:var(--muted)}
.lesson .learn .sub{font-family:var(--sans);font-size:.74rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);
  margin:1.6rem 0 .7rem;padding-top:1rem;border-top:1px solid var(--rule)}
.lesson .learn ul{list-style:none;margin:0 0 1.2rem;padding:0}
.lesson .learn li{display:grid;grid-template-columns:20px 1fr;gap:12px;
  padding:.45rem 0;color:var(--muted);font-size:1rem}
.lesson .learn li svg{color:var(--gold-ink);margin-top:.35rem}

/* ---- where we work ----------------------------------------------------- */
.areas{display:grid;grid-template-columns:repeat(2,1fr);border-top:2px solid var(--green)}
.areas a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:1.25rem 1.4rem 1.25rem 0;border-bottom:1px solid var(--rule);text-decoration:none;
  color:var(--green-dark);font-size:1.1rem;transition:padding var(--t),color var(--t)}
.areas a:nth-child(odd){border-right:1px solid var(--rule);padding-right:1.4rem}
.areas a:hover{padding-left:.7rem;color:var(--gold-ink)}
.areas a span{font-family:var(--sans);font-size:.82rem;color:var(--muted)}


/* ---- announcement bar -------------------------------------------------- */
.announce{background:var(--gold);color:#231b00;font-family:var(--sans);font-size:.88rem;
  font-weight:600;position:relative;z-index:901}
.announce .wrap{display:flex;align-items:center;justify-content:center;gap:14px;
  min-height:46px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap;text-align:center}
.announce b{font-weight:700}
.announce a{color:#231b00;text-decoration:none;border-bottom:1.5px solid rgba(35,27,0,.45);
  min-height:44px;display:inline-flex;align-items:center;
  white-space:nowrap}
.announce a:hover{border-color:#231b00}
.announce .x{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;
  background:none;border:0;color:#231b00;cursor:pointer;padding:8px;line-height:0;opacity:.6}
.announce .x:hover{opacity:1}
body.announce-off .announce{display:none}

/* ---- credentials strip ------------------------------------------------- */
.creds{background:var(--paper-2);border-bottom:1px solid var(--rule)}
.creds ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:0}
.creds li{font-family:var(--sans);font-size:.73rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--green);padding:1.05rem clamp(12px,1.9vw,26px);
  border-left:1px solid var(--rule);display:flex;align-items:center;gap:8px;white-space:nowrap}
.creds li:first-child{border-left:0}
.creds li svg{color:var(--gold-ink);flex:0 0 auto}
.band-dark + .creds,.masthead.dark + .creds{border-top:0}

/* ---- sticky action bar, small screens only ----------------------------- */
.actionbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:960;
  max-width:100%;overflow:hidden;
  background:var(--green-deep);border-top:1px solid rgba(201,168,76,.45);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
  gap:10px;box-shadow:0 -6px 24px rgba(6,23,16,.28)}
/* min-width:0 matters here. A flex child defaults to min-width:auto, which is
   its min-content width, so the two buttons refused to shrink below their own
   text and pushed the fixed bar past the right edge of the screen. A fixed
   element wider than the viewport still makes the whole document scroll
   sideways, which is why every page on a phone had 9px of drift. */
.actionbar a{flex:1 1 0;min-width:0;min-height:52px;display:flex;align-items:center;justify-content:center;
  gap:8px;font-family:var(--sans);font-size:.84rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;border-radius:2px;border:1.5px solid transparent}
.actionbar .call{color:#fff;border-color:rgba(255,255,255,.45)}
.actionbar .book{background:var(--gold);color:#231b00}
.actionbar .cb{color:#fff;border-color:rgba(201,168,76,.7)}

/* ---- consent checkbox -------------------------------------------------- */
.consent{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:1.1rem 0;margin:.2rem 0}
.consent .cb{display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start;
  cursor:pointer;font-family:var(--sans);font-size:.86rem;font-weight:400;line-height:1.55;
  letter-spacing:0;text-transform:none;color:var(--muted)}
.consent .cb input{width:24px;height:24px;margin:2px 0 0;accent-color:var(--green)}
.consent .cb a{color:var(--green)}
.consent .opt{margin:.7rem 0 0 40px;font-family:var(--sans);font-size:.8rem;color:var(--muted)}


/* ---- photography ------------------------------------------------------- */
.photo{width:100%;height:auto;border-radius:2px;display:block}
.photo-frame{position:relative;background:transparent;margin:0}
.photo-frame .photo{aspect-ratio:4/5;object-fit:cover;border-radius:2px;
  background:var(--green-deep)}
.photo-frame figcaption{font-family:var(--sans);font-size:.84rem;letter-spacing:.03em;
  color:var(--muted);padding-top:.75rem;border-top:1px solid var(--rule);margin-top:.85rem}
.masthead.dark .photo-frame figcaption{color:#9aac9a;border-color:rgba(255,255,255,.22)}
.photo-wide .photo{aspect-ratio:16/10;object-fit:cover}

/* the plate that stands in until a real photograph exists */
.plate-stand{position:relative;aspect-ratio:4/5;border:1px solid var(--rule);
  background:linear-gradient(160deg,var(--green) 0,var(--green-deep) 100%);
  display:flex;align-items:flex-end;padding:22px;overflow:hidden;border-radius:2px}
.plate-stand::after{content:"";position:absolute;right:-30%;top:-22%;width:80%;
  padding-bottom:80%;border-radius:50%;border:1px solid rgba(201,168,76,.3)}
.plate-stand .cap{position:relative;font-family:var(--sans);font-size:.8rem;
  line-height:1.5;color:#c6d3c4}
.plate-stand .cap b{display:block;font-family:var(--serif);font-size:1.3rem;
  font-weight:400;color:#fff;margin-bottom:.3rem}


/* ---- the hero, with Richelle composited into it ------------------------ */
.masthead.hero{padding-bottom:0;overflow:hidden}
.masthead.hero .wrap{position:relative}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,64px);
  align-items:end;min-height:clamp(420px,58vh,660px)}
.hero-copy{padding-bottom:clamp(3.5rem,7vw,6rem)}
.hero-copy h1{max-width:13ch}
.hero-copy .dek{max-width:36ch;margin:1.8rem 0 0}
.hero-portrait{position:relative;align-self:end;display:flex;justify-content:center}
.hero-portrait img{width:100%;max-width:460px;height:auto;display:block;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))}
/* a ring of light behind her, the vault door read as an aura */
.hero-portrait::before{content:"";position:absolute;left:50%;bottom:8%;
  width:min(120%,540px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(201,163,74,.20) 0%,rgba(201,163,74,.06) 42%,transparent 66%);
  pointer-events:none}
.hero-credentials{border-top:1px solid rgba(201,163,74,.35);margin-top:0;
  padding:1.5rem 0 1.8rem;display:flex;flex-wrap:wrap;gap:.6rem clamp(20px,3.4vw,44px);
  position:relative;z-index:2}
.hero-credentials span{font-family:var(--sans);font-size:.74rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:#C4CFC2;display:flex;align-items:center;gap:9px}
.hero-credentials svg{color:var(--gold)}
@media(max-width:940px){
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .hero-copy{padding-bottom:2.5rem}
  .hero-portrait img{max-width:320px}
}


/* ---- booking embed ------------------------------------------------------
   Google's appointment view has its own internal scrolling and a minimum
   comfortable width. Below that it hides day columns, so the frame gets taller
   on small screens rather than narrower, and the visitor scrolls the page
   instead of pinching a box. */
.booking{border:1px solid var(--rule);background:var(--white);overflow:hidden}
.booking iframe{display:block;width:100%;height:760px;border:0}
@media(max-width:900px){.booking iframe{height:820px}}
@media(max-width:560px){.booking iframe{height:900px}}

/* ---- lead capture forms -------------------------------------------------
   Big targets and real labels. The audience is 50 to 75 and many are on a
   phone, so inputs are 17px: below 16px iOS zooms the page on focus, which
   feels like the site just broke. Every control clears 44px. */
.lead{margin-top:1.6rem;max-width:34rem}
.lead label{display:block;margin-bottom:1rem;font-family:var(--sans);font-size:.8rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-dark)}
.lead .opt{font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--muted);
  font-size:.88rem}
.lead input,.lead textarea{display:block;width:100%;margin-top:.5rem;padding:14px 15px;
  font-family:var(--sans);font-size:17px;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--ink);background:var(--white);border:1px solid var(--rule);border-radius:2px}
.lead input:focus,.lead textarea:focus{outline:2px solid var(--gold-ink);outline-offset:1px;
  border-color:var(--gold-ink)}
.lf2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
/* the consent wording is the thing a carrier will read back to you, so it is
   set at reading size, not fine print size */
.lead .cbx{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;
  margin:1.2rem 0 1.4rem;font-size:.95rem;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--muted);line-height:1.55}
.lead .cbx input{width:26px;height:26px;min-height:26px;margin:1px 0 0;padding:0;
  accent-color:var(--green)}
.lead .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead .lead-msg{margin:1rem 0 0;padding:14px 16px;border-left:3px solid var(--gold);
  background:var(--paper-2);font-size:1rem;color:var(--ink)}
.lead .lead-msg.bad{border-left-color:#8c2f2f}
.price{display:flex;align-items:baseline;gap:12px;margin:1.4rem 0 0;
  padding-top:1.2rem;border-top:1px solid var(--rule)}
.price b{font-family:var(--serif);font-size:2.6rem;font-weight:400;color:var(--green)}
.price span{font-family:var(--sans);font-size:.88rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.ticks{margin:.8rem 0 0;padding-left:1.15rem}
.ticks li{margin-bottom:.5rem;color:var(--muted)}
.offer-card{border:1px solid var(--rule);background:var(--white);
  padding:clamp(1.4rem,3vw,2.2rem);display:flex;flex-direction:column;height:100%}
.offer-card .tag{font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-ink)}
.offer-card h3{font-size:clamp(1.25rem,2vw,1.55rem);font-weight:400;margin:.7rem 0 .6rem;
  line-height:1.25}
.offer-card > p{font-size:1rem;color:var(--muted);margin:0 0 1rem}
.offer-card ul{margin:0 0 1.4rem;padding-left:1.1rem;font-size:.96rem;color:var(--muted)}
.offer-card ul li{margin-bottom:.4rem}
/* the action sits on the bottom edge of every card, so a short card and a long
   card still line up. This is what makes a row of cards look made rather than
   assembled. */
.offer-card .go{margin-top:auto;padding-top:1.2rem}
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);
  margin-top:2rem;align-items:stretch}
@media(max-width:1000px){.offer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.offer-grid{grid-template-columns:1fr}.lf2{grid-template-columns:1fr}}

/* Breadcrumb links are small by design, but they are still links somebody has
   to hit. Give them the vertical room without changing how the trail looks. */
.crumbs a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px}


/* ---- ways, asks and ticks ----------------------------------------------- */
.rule-note{border-top:2px solid var(--green);margin-top:2.4rem;padding-top:1rem;max-width:44rem}
.rule-note b{display:block;font-family:var(--sans);font-size:.78rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:.5rem}
.rule-note p{margin:0;font-size:1.05rem;color:var(--ink)}
.ways{border-top:1px solid var(--rule);margin-top:1.6rem}
.way{display:grid;grid-template-columns:3rem minmax(0,1fr) auto;gap:clamp(14px,2vw,26px);
  align-items:center;padding:1.25rem 0;border-bottom:1px solid var(--rule-soft);
  text-decoration:none;color:inherit;transition:background var(--t)}
.way:hover{background:var(--paper-2)}
.way .n{font-family:var(--sans);font-size:.78rem;font-weight:700;color:var(--gold-ink)}
.way b{display:block;font-family:var(--serif);font-size:1.22rem;font-weight:500;
  color:var(--green-dark);line-height:1.3}
.way em{display:block;font-style:normal;font-size:.98rem;color:var(--muted);margin-top:.2rem}
.way:hover b{color:var(--gold-ink)}
.asks{margin-top:1.6rem;border-top:1px solid var(--rule)}
.ask{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:clamp(14px,2vw,24px);
  padding:1.5rem 0;border-bottom:1px solid var(--rule-soft)}
.ask .n{font-family:var(--sans);font-size:.78rem;font-weight:700;color:var(--gold-ink);
  padding-top:.35rem}
.ask h3{font-size:clamp(1.15rem,1.9vw,1.4rem);font-weight:400;margin:0 0 .5rem;line-height:1.3}
.ask p{margin:0;color:var(--muted)}
.ticks-list{margin-top:1.6rem;border-top:1px solid var(--rule)}
/* 26px boxes and a whole clickable row, because this is meant to be usable by
   somebody in their seventies on a tablet, possibly at the kitchen table */
.tick{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;align-items:start;
  padding:1.1rem .6rem 1.1rem 0;border-bottom:1px solid var(--rule-soft);cursor:pointer}
.tick:hover{background:var(--paper-2)}
.tick input{width:26px;height:26px;margin:0;accent-color:var(--green);cursor:pointer}
.tick span{font-size:1.06rem;line-height:1.5;color:var(--ink)}
.tick input:checked + span{color:var(--muted);text-decoration:line-through}
@media(max-width:640px){
  .way{grid-template-columns:2.2rem minmax(0,1fr);row-gap:8px}
  .way .xref{grid-column:2;justify-self:start}
  .ask{grid-template-columns:2.2rem minmax(0,1fr)}
}
@media print{.tick{break-inside:avoid}.ways,.site-footer{display:none}}


/* ---- grouped navigation -------------------------------------------------
   Click to open, not hover. A hover menu is the first thing that fails for a
   visitor in their seventies on a trackpad: the pointer drifts off the target
   on the way down and the menu disappears. This one stays put until it is
   dismissed. */
.navgrp{position:relative}
.navtop{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 2px;
  background:none;border:0;cursor:pointer;font-family:var(--sans);font-size:.86rem;
  font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--green-dark);
  border-bottom:2px solid transparent;white-space:nowrap}
.navtop svg{transition:transform var(--t)}
.navtop[aria-expanded="true"] svg{transform:rotate(180deg)}
.navtop:hover,.navtop[aria-expanded="true"],.navtop[aria-current=page]{border-color:var(--gold);
  color:var(--green)}
.navmenu{position:absolute;top:calc(100% + 10px);left:-18px;z-index:60;min-width:19rem;
  padding:.6rem 0;background:var(--white);border:1px solid var(--rule);
  box-shadow:0 18px 44px rgba(6,40,29,.16)}
.navmenu::before{content:"";position:absolute;top:-7px;left:26px;width:12px;height:12px;
  background:var(--white);border-left:1px solid var(--rule);border-top:1px solid var(--rule);
  transform:rotate(45deg)}
.navmenu a{display:block;min-height:46px;padding:12px 22px;font-family:var(--sans);
  font-size:.95rem;font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--ink);text-decoration:none;line-height:1.35}
.navmenu a:hover,.navmenu a:focus-visible{background:var(--paper-2);color:var(--green)}
.navmenu a:first-child{font-weight:700;color:var(--green)}
/* group headings inside the phone menu */
.mgrp{margin:1.6rem 0 .2rem;font-family:var(--sans);font-size:.74rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light)}
.mobile-menu nav a{padding-left:0}


/* ---- sms consent --------------------------------------------------------- */
.smsbox{margin:1.4rem 0;padding:1.2rem 1.3rem;border:1px solid var(--rule);
  background:var(--paper-2)}
.smsbox legend{padding:0 .5rem;font-family:var(--sans);font-size:.78rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.smsbox .cbx{margin:.5rem 0 .9rem}
.smsnote{margin:.2rem 0 0;font-size:.9rem;line-height:1.55;color:var(--muted)}


/* ---- hero ground --------------------------------------------------------
   A drawn horizon until a real photograph of the oceanfront is supplied. Deep
   water at the bottom, sky above, one low band of sun on the waterline. It is
   deliberately not photographic: better an honest surface than a stock beach
   that belongs to somebody else's town. */
.hero{position:relative;isolation:isolate}
.hero-shot{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-shot img{width:100%;height:100%;object-fit:cover;object-position:center 38%;
  opacity:.5}
.hero-shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,var(--green-deep) 6%,rgba(5,8,6,.88) 42%,
    rgba(5,8,6,.55) 76%,rgba(5,8,6,.7) 100%)}
.hero-drawn{background:
  radial-gradient(120% 82% at 74% 96%, rgba(201,163,74,.20) 0%, rgba(201,163,74,0) 58%),
  linear-gradient(180deg,
    var(--green-deep) 0%, #071a14 34%, #08281e 56%,
    rgba(201,163,74,.30) 62.4%, rgba(201,163,74,.10) 63.6%,
    #06241b 65%, #041a13 82%, var(--green-deep) 100%)}
.hero-drawn::after{background:linear-gradient(100deg,var(--green-deep) 10%,
  rgba(5,8,6,.82) 46%, rgba(5,8,6,.42) 82%, rgba(5,8,6,.66) 100%)}

/* ---- retirement vision --------------------------------------------------- */
.vision{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);
  gap:clamp(22px,3.5vw,54px);margin-top:2.2rem;align-items:start}
.vtabs{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.vtab{display:block;width:100%;text-align:left;padding:1.15rem .8rem 1.15rem 0;
  min-height:56px;background:none;border:0;border-bottom:1px solid var(--rule-soft);
  border-left:3px solid transparent;padding-left:1rem;cursor:pointer;font:inherit;
  transition:background var(--t),border-color var(--t)}
.vtab b{display:block;font-family:var(--serif);font-size:1.32rem;font-weight:500;
  color:var(--green-dark);line-height:1.25}
.vtab em{display:block;font-style:normal;font-family:var(--sans);font-size:.92rem;
  color:var(--muted);margin-top:.22rem}
.vtab:hover{background:var(--paper-2)}
.vtab[aria-selected="true"]{border-left-color:var(--gold);background:var(--paper-2)}
.vtab[aria-selected="true"] b{color:var(--gold-ink)}
.vpanel{border-left:2px solid var(--gold);padding-left:clamp(20px,3vw,38px)}
.vpanel h3{font-size:clamp(1.6rem,3.2vw,2.5rem);font-weight:400;margin:0 0 1rem;
  line-height:1.16;color:var(--green-dark)}
.vpanel p{font-size:1.12rem;line-height:1.66;color:var(--muted);max-width:44ch;
  margin:0 0 1.5rem}
@media(max-width:860px){
  .vision{grid-template-columns:1fr}
  .vpanel{border-left:0;border-top:2px solid var(--gold);padding-left:0;padding-top:1.4rem}
}

/* ---- legacy ladder ------------------------------------------------------- */
.ladder{margin-top:2rem;border-top:1px solid rgba(255,255,255,.2)}
.rung{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:clamp(16px,2.5vw,32px);
  padding:1.5rem 0;border-bottom:1px solid rgba(255,255,255,.14);align-items:baseline}
.rung b{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.2rem);font-weight:400;
  color:var(--gold-light)}
.rung p{margin:0;color:#cddbcb;font-size:1.05rem;line-height:1.6}
.rung p strong{display:block;color:#fff;font-family:var(--serif);font-size:1.22rem;
  font-weight:500;margin-bottom:.3rem}
@media(max-width:640px){.rung{grid-template-columns:1fr;gap:6px}}


/* ---- retirement calculator ----------------------------------------------
   Big boxes, big numbers. The answer sits beside the questions on a wide
   screen and under them on a phone, and it updates as you type. */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,60px);
  align-items:start;margin-top:.5rem}
.calc-q{display:grid;gap:1.05rem}
.calc-q .row{display:grid;grid-template-columns:minmax(0,1fr) 11rem;gap:14px;align-items:center;
  padding-bottom:1rem;border-bottom:1px solid var(--rule-soft)}
/* the site's label style is small uppercase sans, which is right for a form
   field and wrong for a question somebody is meant to read and answer */
.calc-q label,.calc-q legend{font-family:var(--serif);font-size:1.12rem;line-height:1.35;
  color:var(--green-dark);text-transform:none;letter-spacing:0;font-weight:400}
.calc-q label small,.calc-q legend small{text-transform:none;letter-spacing:0;font-weight:400}
.grow label{text-transform:none;letter-spacing:0}
.calc-q label small{display:block;font-family:var(--sans);font-size:.9rem;color:var(--muted);
  margin-top:.25rem;line-height:1.45}
.calc-q .box{position:relative}
.calc-q .box span{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-family:var(--sans);font-size:17px;color:var(--muted);pointer-events:none}
.calc-q input{width:100%;min-height:52px;padding:12px 14px 12px 28px;font-family:var(--sans);
  font-size:18px;font-variant-numeric:tabular-nums;color:var(--ink);background:var(--white);
  border:1px solid var(--rule);border-radius:2px;text-align:right}
.calc-q input.years{padding-left:14px}
.calc-q input:focus{outline:2px solid var(--gold-ink);outline-offset:1px;border-color:var(--gold-ink)}
.calc-q fieldset{border:0;margin:0;padding:0}
.calc-q legend{font-family:var(--serif);font-size:1.12rem;color:var(--green-dark);margin-bottom:.6rem}
.calc-q legend small{display:block;font-family:var(--sans);font-size:.9rem;color:var(--muted);margin-top:.25rem}
.grow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.grow label{display:block;cursor:pointer;margin:0;font-size:1rem}
.grow input{position:absolute;opacity:0;width:1px;height:1px}
.grow b{display:block;min-height:56px;padding:10px 8px;text-align:center;font-family:var(--sans);
  font-size:.95rem;font-weight:700;color:var(--green-dark);border:1px solid var(--rule);
  background:var(--white);line-height:1.25}
.grow b em{display:block;font-style:normal;font-weight:400;font-size:.82rem;color:var(--muted)}
.grow input:checked + b{background:var(--green);color:#fff;border-color:var(--green)}
.grow input:checked + b em{color:#d7e3d4}
.grow input:focus-visible + b{outline:2px solid var(--gold-ink);outline-offset:2px}
.calc-a{position:sticky;top:120px;background:var(--green-deep);color:#e8eee6;
  padding:clamp(1.5rem,3vw,2.4rem);border-top:3px solid var(--gold)}
.calc-a h2{color:#fff;font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:400;margin:0 0 1.2rem}
.calc-a .big{font-family:var(--serif);font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;color:var(--gold-light);
  font-variant-numeric:tabular-nums}
.calc-a .line{margin:0 0 1.3rem;font-size:1.06rem;line-height:1.6;color:#d4dfd2}
.calc-a .line b{color:#fff;font-weight:600}
.stack{display:flex;height:34px;margin:.4rem 0 .6rem;background:rgba(255,255,255,.08)}
.stack i{display:block;height:100%;transition:width .35s ease}
.stack .ss{background:#c9a34a}.stack .pe{background:#e1c477}.stack .gap{background:repeating-linear-gradient(135deg,
  rgba(255,255,255,.28) 0 6px,rgba(255,255,255,.08) 6px 12px)}
.key{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 1.4rem;font-family:var(--sans);font-size:.86rem;color:#c4d2c2}
.key span::before{content:"";display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-1px}
.key .k1::before{background:#c9a34a}.key .k2::before{background:#e1c477}
.key .k3::before{background:repeating-linear-gradient(135deg,rgba(255,255,255,.5) 0 3px,rgba(255,255,255,.12) 3px 6px)}
.track{position:relative;height:14px;background:rgba(255,255,255,.1);margin:.5rem 0 .4rem}
.track i{position:absolute;left:0;top:0;bottom:0;background:var(--gold);transition:width .35s ease}
.track b{position:absolute;top:-6px;bottom:-6px;width:2px;background:#fff}
.ages{display:flex;justify-content:space-between;font-family:var(--sans);font-size:.84rem;color:#b6c5b4}
.calc-a .fine{font-size:.86rem;color:#9fb09e;margin:1.4rem 0 0;line-height:1.55}
.calc-a .btn{margin-top:1.2rem}
@media(max-width:980px){.calc{grid-template-columns:1fr}.calc-a{position:static}}
@media(max-width:520px){.calc-q .row{grid-template-columns:1fr}.grow b{font-size:.88rem}}


/* <picture> wrappers take no box of their own, so an <img> inside one lays out
   exactly as it did before it was wrapped */
picture{display:contents}

/* ---- contact buttons --------------------------------------------------- */
.btn-sm{min-height:46px;padding:12px 22px;font-size:.72rem;letter-spacing:.13em}
.foot-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:1.4rem}
.close-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.4rem}
.head-cta .btn-sm{display:none}

/* ---- responsive ------------------------------------------------------- */
@media(max-width:1240px){
  .nav-main{gap:14px}
  .nav-main a{font-size:.8rem}
}
@media(max-width:1120px){
  .nav-main{display:none}
  .menu-btn{display:flex}
}
@media(max-width:940px){
  .actionbar{display:flex}
  /* lift the reading panel above the action bar so they never overlap */
  .a11y{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  body{padding-bottom:74px}
  .creds li{border-left:0;padding:.7rem 1rem;font-size:.7rem}
  .creds ul{gap:0 4px}
  .nav-main{display:none}
  .head-cta .btn{display:none}
  .menu-btn{display:flex}
  .c1-6,.c1-7,.c1-8,.c1-5,.c1-9,.c2-8,.c2-9,.c3-11,.c4-13,.c5-13,.c6-13,.c7-13,.c8-13,
  .c9-13,.c1-3,.c1-4,.c5-9{grid-column:1/13}
  .erow{grid-template-columns:2.4rem 1fr}
  .erow .idx{grid-column:1/2}
  .erow .mark{grid-column:1/2;grid-row:2;padding-top:0}
  .erow .body,.erow .side{grid-column:2/3}
  .erow .side{margin-top:1.2rem}
  .figs{grid-template-columns:1fr}
  .figs > div{border-right:0;border-bottom:1px solid var(--rule);padding-right:0}
  .figs > div:last-child{border-bottom:0}
  .foot-grid{grid-template-columns:1fr 1fr}
  .index-row{grid-template-columns:2rem 84px 1fr;row-gap:6px}
  .index-row .when{grid-column:3/4;font-size:.76rem}
  /* text only rows drop the action under the text rather than squeezing three
     columns into 375px */
  .index-row.plain{grid-template-columns:2rem 1fr;row-gap:8px}
  .index-row.plain .when{grid-column:2/3;justify-self:start;
    color:var(--gold-ink);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  .ledger-row{grid-template-columns:1fr;gap:12px}
  .ledger-row .when{display:flex;align-items:baseline;gap:10px}
  .ledger-row .when b{font-size:1.6rem}
  .goal{grid-template-columns:2.2rem 1fr;row-gap:10px}
  .goal .xref{grid-column:2/3}
  .panels{grid-template-columns:1fr 1fr}
  .panel{min-height:0;border-right:0;border-bottom:1px solid rgba(255,255,255,.2);
    padding:1.8rem 1.2rem 2rem 0}
  .panel:nth-child(odd){padding-left:0}
  .panel:nth-child(even){padding-left:1.2rem;border-left:1px solid rgba(255,255,255,.2)}
  .panel .mark{margin:1rem 0 .8rem}
  .lesson{grid-template-columns:1fr}
  .areas{grid-template-columns:1fr}
  .areas a:nth-child(odd){border-right:0;padding-right:1.4rem}
  .tl-row{grid-template-columns:1fr;gap:6px}
}
@media(max-width:560px){
  body{font-size:calc(18.5px * var(--step))}
  .brand-mark{width:54px;height:54px}
  .brand{gap:10px}
  .brand-wm b{font-size:1.18rem;letter-spacing:.1em}
  .brand-wm i{font-size:.5rem;letter-spacing:.15em}
  .foot-grid{grid-template-columns:1fr}
  .btn{width:100%}
  .util .wrap{justify-content:center;font-size:.76rem}
  .index-row{grid-template-columns:1fr;row-gap:8px}
  .index-row .n,.index-row .thumb{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .draw{transform:none;transition:none}
  *{animation:none!important}
}

/* ---- defensive layout, from an outside review --------------------------
   None of this changes how the site looks when the content behaves. It stops
   the layout breaking when the content does not.

   The grid part is the interesting one. A CSS grid track written as `1fr` is
   really `minmax(auto, 1fr)`, and that `auto` floor is the item's min-content
   width, so one long unbroken word or URL can push a track wider than its
   share and shove the whole row out of the page. `minmax(0, 1fr)` removes the
   floor and lets the track shrink as intended. Same for `min-width:0` on flex
   and grid children, which have an `auto` minimum for the same reason. */
.index-row,.offer-card{min-width:0}
.index-row > *{min-width:0}
.index-row .t,.index-row p,
.offer-card h3,.offer-card > p,.offer-card li{overflow-wrap:anywhere}
.index-row.plain{grid-template-columns:2.6rem minmax(0,1fr) auto}
.index-row.plain .when{white-space:nowrap}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btns .btn{flex:0 0 auto}
/* the booking frame sized against the viewport rather than in fixed pixels, so
   a short laptop screen does not have to scroll past a 900px box to reach the
   rest of the page */
.booking iframe{height:min(920px,82vh);min-height:700px}

@media(max-width:940px){
  .index-row.plain{grid-template-columns:2rem minmax(0,1fr)}
  .index-row.plain .when{grid-column:2;justify-self:start;margin-top:.15rem}
}
@media(max-width:640px){
  .index-row.plain{grid-template-columns:1.8rem minmax(0,1fr);padding:1.05rem 0}
  .offer-card{padding:1.35rem}
  /* one thumb, one column, full width targets */
  .offer-card .go .btn,.btns .btn{width:100%}
  .lead .cbx{grid-template-columns:26px minmax(0,1fr);gap:10px}
}
/* Small phones still in use by this audience: the SE, the older Androids. The
   header is the first thing to run out of room, so the mark and wordmark come
   down before anything else has to. */
@media(max-width:380px){
  .wrap{padding-left:16px;padding-right:16px}
  .brand-mark{width:50px;height:50px}
  .brand-wm b{font-size:1.08rem;letter-spacing:.12em}
  .brand-wm i{font-size:.46rem}
}
@media print{
  .site-header,.util,.a11y,.mobile-menu,.close-block,.reading-guide{display:none}
  body::before{display:none}
}

/* ---- event landing page ------------------------------------------------ */
.ev-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.ev-hero h1{color:var(--paper);font-size:clamp(2.1rem,4.2vw,3.3rem);line-height:1.08}
.ev-flyer{display:block;width:100%;height:auto;border:1px solid rgba(201,163,74,.55);
  box-shadow:0 18px 40px rgba(4,28,20,.35)}
.ev-meta{list-style:none;padding:0;margin:1.4rem 0 1.6rem;display:grid;gap:.6rem;
  font-family:var(--sans)}
.ev-meta li{display:flex;gap:.6rem;align-items:center}
.ev-meta svg{color:var(--gold);flex:0 0 auto}
.steps3{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:1.2rem}
.steps3 li{counter-increment:s;position:relative;padding-left:3.1rem;min-width:0}
.steps3 li::before{content:counter(s);position:absolute;left:0;top:0;width:2.1rem;
  height:2.1rem;border-radius:50%;border:1.5px solid var(--gold);display:grid;
  place-items:center;font-family:var(--serif);color:var(--green)}
.steps3 b{display:block;font-family:var(--serif);font-weight:500;font-size:1.15rem;
  color:var(--green-dark)}
.learn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem 2.2rem}
.learn-grid div{border-top:1px solid var(--gold);padding-top:1rem;min-width:0}
.learn-grid h3{font-size:1.2rem;margin:0 0 .35rem}
.ev-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:1rem}

/* ---- team -------------------------------------------------------------- */
.team{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.4rem,3vw,2.6rem)}
.member{border-top:2px solid var(--gold);padding-top:1.4rem;min-width:0}
.member .face{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;
  display:block;background:var(--green-deep)}
.monogram{width:100%;aspect-ratio:4/5;display:grid;place-items:center;
  background:var(--green-deep);color:var(--gold-light);font-family:var(--serif);
  font-size:clamp(3rem,8vw,5rem);letter-spacing:.08em}
.monogram small{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:#9aac9a;text-align:center;margin-top:.4rem}
.member h3{margin:1.1rem 0 .2rem}
.member .role{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-ink);margin:0 0 .9rem}
.member .btns{margin-top:1.2rem}
.foot-social{margin:.9rem 0 0;font-family:var(--sans);font-size:.85rem;display:flex;
  flex-wrap:wrap;gap:.4rem 1.1rem}
.foot-social a{color:var(--gold-light)}
@media (max-width:820px){
  .ev-hero,.team,.learn-grid{grid-template-columns:minmax(0,1fr)}
}