/* Local B-Roll, a Cali Collective product. Static site styles v1.
   Tokens, type scale and component patterns follow A Cali Collective site.css. */

@font-face{font-family:"Archivo";src:url(/assets/fonts/archivo-var.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/assets/fonts/instrument-sans.woff2) format("woff2");font-weight:400 700;font-stretch:75% 100%;font-display:swap}

:root{
  --ink:#141414;--paper:#F7F6F2;--paper2:#EFEDE6;--char:#262624;--gray:#5C5B57;--y:#FED60F;
  --line:rgba(20,20,20,.16);--line-d:rgba(247,246,242,.22);
  --inset:clamp(1.25rem,5vw,6rem);--max:90rem;
  --ease:cubic-bezier(.16,1,.3,1);--ease2:cubic-bezier(.76,0,.24,1);
  --r:.5rem;--bar:4.25rem;
  --f-display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --step--1:clamp(.875rem,.85rem + .1vw,.9375rem);
  --step-0:clamp(1.0625rem,1.02rem + .22vw,1.1875rem);
  --step-1:clamp(1.25rem,1.15rem + .5vw,1.5rem);
  --step-2:clamp(1.6rem,1.3rem + 1.3vw,2.5rem);
  --step-3:clamp(2.1rem,1.5rem + 2.8vw,4rem);
  --step-4:clamp(2.4rem,1.1rem + 5.2vw,6rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:6rem;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:var(--step-0);line-height:1.5;padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom))}
@media (min-width:64em){body{padding-bottom:0}}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:.25em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
p{margin:0 0 1em;max-width:66ch}
h1,h2,h3,h4{margin:0 0 1.1rem;font-family:var(--f-display);font-weight:900;line-height:.95;letter-spacing:-.03em}
h4{font-size:var(--step-0);font-stretch:110%;letter-spacing:-.01em}
ul,ol{margin:0 0 1.25em;padding-left:1.15em;max-width:66ch}
li{margin:.4em 0}
strong,b{font-weight:700}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 6px 0 -2px var(--y)}
.dark :focus-visible{outline-color:var(--paper)}
.skip{position:absolute;left:1rem;top:-5rem;z-index:100;background:var(--ink);color:var(--paper);padding:.875rem 1.25rem;border-radius:var(--r);text-decoration:none;font-weight:700}
.skip:focus{top:1rem}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--inset)}
section{position:relative}
.pad{padding-block:clamp(4rem,9vw,8rem)}
.pad-s{padding-block:clamp(2.75rem,6vw,5rem)}
.dark{background:var(--ink);color:var(--paper)}
.dark a:hover{text-decoration-color:var(--paper)}
.muted{color:var(--gray)}
.dark .muted{color:#C9C7C0}
.band{background:var(--paper2)}
.rule{border:0;border-top:2px solid var(--ink);margin:0}
.rule-soft{border:0;border-top:1px solid var(--line);margin:0}
.center{text-align:center}
.nw{white-space:nowrap}

/* type */
.d{font-family:var(--f-display);font-weight:900;font-stretch:125%;letter-spacing:-.035em;line-height:.9}
.d-1{font-size:var(--step-4)}
.d-2{font-size:var(--step-3)}
.d-3{font-size:var(--step-2);font-stretch:115%;line-height:1}
.label{display:inline-flex;align-items:center;gap:.75rem;font-family:var(--f-display);font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1.3;margin:0 0 1.25rem}
.label::before{content:"";width:.55rem;height:.55rem;background:var(--y);outline:1.5px solid var(--ink);flex:none}
.dark .label::before{outline-color:var(--paper)}
.lede{font-size:var(--step-1);line-height:1.4;max-width:48ch}
.hl{background:linear-gradient(transparent 68%,var(--y) 68%,var(--y) 94%,transparent 94%);padding:0 .06em}
.kicker{font-family:var(--f-display);font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:3.25rem;padding:.9rem 1.6rem;border-radius:var(--r);background:var(--ink);color:var(--paper);font-family:var(--f-display);font-weight:800;font-size:.9375rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;overflow:hidden;border:0;cursor:pointer}
.btn::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--y);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease2)}
.btn:hover::after,.btn:focus-visible::after{transform:scaleX(1)}
.btn .arr{display:inline-block;transition:transform .45s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.dark .btn,.btn.inv{background:var(--paper);color:var(--ink)}
.btn.big{min-height:3.75rem;font-size:1rem;padding:1rem 2rem}
.btn.wide{width:100%}
@media (max-width:40em){.btn.wide-s{width:100%}}
.tlink{display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;font-weight:700;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:2px}
.ctas{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;margin-top:2rem}
.ctas .note{margin:0;flex-basis:100%}
.note{font-size:.9375rem;line-height:1.45;color:var(--gray);max-width:52ch}
.dark .note{color:#C9C7C0}

/* header */
.hdr{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:border-color .3s}
.hdr::before{content:"";position:absolute;inset:0;z-index:-2;background:rgba(247,246,242,.94);backdrop-filter:saturate(1.3) blur(10px);-webkit-backdrop-filter:saturate(1.3) blur(10px);pointer-events:none}
.hdr.scrolled{border-bottom-color:var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.5rem}
.logo{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-display);font-weight:900;font-stretch:110%;letter-spacing:-.02em;font-size:1.0625rem;line-height:1.1;text-decoration:none;min-height:2.75rem}
.logo i{width:.6rem;height:.6rem;background:var(--y);display:inline-block;border-radius:50%;box-shadow:0 0 0 2px var(--ink);flex:none}
.logo small{display:block;font-family:var(--f-body);font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);margin-top:.15rem}
.nav{display:flex;align-items:center;gap:.15rem}
.nav a:not(.btn){display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .8rem;font-family:var(--f-display);font-weight:700;font-size:.875rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border-radius:var(--r)}
.nav a:not(.btn):hover{background:var(--paper2)}
.nav a[aria-current]:not(.btn){text-decoration:underline;text-underline-offset:.4em;text-decoration-thickness:2px}
.nav .btn{margin-left:.6rem;min-height:2.75rem;padding:.5rem 1.1rem;font-size:.8125rem}
.menu-btn{display:none}
@media (max-width:63.99em){
  .nav{display:none}
  .menu-btn{display:inline-flex;align-items:center;gap:.6rem;min-height:2.75rem;min-width:2.75rem;padding:0 .9rem;border:1px solid var(--ink);border-radius:var(--r);background:none;font-family:var(--f-display);font-weight:700;font-size:.8125rem;line-height:1;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);cursor:pointer}
  .nav.open{display:flex;flex-direction:column;align-items:stretch;position:fixed;inset:0;padding:calc(4.5rem + 1.75rem) var(--inset) 2.5rem;background:var(--ink);gap:.25rem;overflow:auto;height:100dvh;z-index:-1}
  .nav.open a:not(.btn){color:var(--paper);font-family:var(--f-display);font-size:clamp(2rem,9vw,3rem);font-weight:900;font-stretch:125%;letter-spacing:-.03em;text-transform:none;padding:.45rem 0;min-height:3.5rem;border-bottom:1px solid var(--line-d);border-radius:0}
  .nav.open .btn{margin:1.5rem 0 0;background:var(--paper);color:var(--ink);min-height:3.5rem;font-size:1rem}
  body:has(.nav.open) .bookbar{display:none}
  .hdr:has(.nav.open) .logo,.hdr:has(.nav.open) .menu-btn{color:var(--paper);border-color:var(--paper)}
  .hdr:has(.nav.open) .logo small{color:#C9C7C0}
  .hdr:has(.nav.open) .logo i{box-shadow:0 0 0 2px var(--paper)}
  .hdr:has(.nav.open)::before{background:var(--ink)}
  .hdr:has(.nav.open){border-bottom-color:transparent}
}

/* sticky phone bar */
.bookbar{position:fixed;z-index:60;left:0;right:0;bottom:0;display:flex;gap:.5rem;padding:.55rem var(--inset) calc(.55rem + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--ink);box-shadow:0 -8px 24px rgb(0 0 0 / .07)}
.bookbar{flex-direction:column;gap:.4rem}
.bookbar .btn{flex:1 1 auto;min-height:3rem;width:100%}
.bookbar .bbnote{margin:0;text-align:center;font-size:.75rem;line-height:1.3;font-weight:600;color:var(--gray);letter-spacing:0}
@media (min-width:64em){.bookbar{display:none!important}}
/* On the home page the hero already carries the same button, so the phone bar
   stays down until the hero button has scrolled past. Two identical buttons on
   one screen reads as a mistake. */
.bookbar[data-defer]{transform:translateY(115%);opacity:0;transition:transform .22s ease,opacity .22s ease;pointer-events:none}
.bookbar[data-defer].is-on{transform:none;opacity:1;pointer-events:auto}
@media (prefers-reduced-motion: reduce){.bookbar[data-defer]{transition:none}}

/* hero: Direction A, the Gap Panel. No photograph anywhere in this section.
   The H1 spans the full grid width and the panel sits to its right, because three
   hard lines of Archivo 900 at 125% measure about 17em: a 7-column well would force
   the headline down to roughly 45px, which is not a hero. Same DOM order as the
   phone layout, so reading order never changes between breakpoints. */
.hero{padding-top:clamp(2rem,4vw,3.25rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
.gap{display:grid;grid-template-columns:minmax(0,1fr)}
.gap > .label{order:1}
.hero h1{order:2;font-size:clamp(1.85rem,8.2vw,2.2rem);margin:2rem 0 0;line-height:.97;max-width:22ch;letter-spacing:-.03em}
.h1-line{display:inline}
.gap-panel{order:3}
.hero .sub{order:4}
.hero .ctas{order:5}
.hero .hero-meta{order:6}

.hero .sub{font-size:clamp(1.1rem,1rem + .6vw,1.4rem);line-height:1.34;max-width:30ch;margin:1.5rem 0 0;color:var(--gray)}
.hero .ctas{margin-top:2rem}
.hero-meta{display:flex;flex-wrap:wrap;gap:.45rem 1.5rem;font-family:var(--f-display);font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);margin:0;max-width:none}
.hero-meta span{display:inline-flex;align-items:center;gap:.5rem}
.hero-meta span::before{content:"";width:.45rem;height:.45rem;background:var(--y);outline:1.5px solid var(--ink);flex:none}
.hero .hero-meta{margin-top:2.5rem}

/* the panel */
.gap-panel{min-width:0;background:var(--paper2);border:2px solid var(--ink);border-radius:4px;padding:24px;margin-top:1.75rem}
.track-set{display:grid;gap:1.35rem}
.track{min-width:0}
.track-lab{font-family:var(--f-display);font-size:13px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;margin:0 0 .55rem;color:var(--ink);line-height:1.2}
.track-rail{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;height:28px}
.seg{background:var(--ink);border-radius:2px;min-width:0}
.seg.off{background:transparent}
.gap-block{grid-column:3 / -1;display:grid;place-items:center;background:var(--y);color:var(--ink);border-radius:3px;font-family:var(--f-display);font-size:14px;font-weight:800;line-height:1;padding:0 .25rem;overflow:hidden}
.track-note{font-size:15px;line-height:1.4;color:var(--gray);margin:1.35rem 0 0}

/* desktop: copy in column one, panel beside the lower copy */
@media (min-width:64em){
  .gap{grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:clamp(1.75rem,3vw,3rem);align-items:start}
  .gap > .label{grid-column:1;grid-row:1}
  .hero h1{grid-column:1 / -1;grid-row:2;font-size:clamp(2.375rem,5.25vw,4.75rem);line-height:.92;letter-spacing:-.035em}
  .h1-line{display:block}
  .hero .sub{grid-column:1;grid-row:3;margin-top:1.5rem}
  .hero .ctas{grid-column:1;grid-row:4;margin-top:2rem}
  .hero .hero-meta{grid-column:1;grid-row:5;margin-top:2.5rem}
  .gap-panel{grid-column:2;grid-row:3 / span 2;align-self:center;margin-top:1.5rem}
}

/* phone and tablet: order stays label, H1, panel, sub, CTA, meta */
@media (max-width:63.99em){
  .hero .ctas{display:grid;gap:.6rem;justify-items:stretch}
  .hero .ctas .btn{width:100%;min-height:52px}
  .hero .ctas .tlink{justify-content:center}
  .hero .hero-meta{display:grid;gap:.55rem;margin-top:2rem}
  .track-rail{height:20px;gap:4px}
  .gap-panel{padding:18px}
}
/* tablet: still one paragraph, sized so the three sentences land on three lines */
@media (min-width:40em) and (max-width:63.99em){
  .hero h1{font-size:clamp(2rem,5.1vw,3.3rem);line-height:.95;max-width:none}
  .h1-line{display:block}
}
@media (max-width:40em){
  .track-rail{height:20px;gap:3px}
  .track-lab{font-size:12px;letter-spacing:.1em}
  .gap-block{font-size:13px}
}

/* statement / problem */
.statement{font-family:var(--f-display);font-weight:800;font-stretch:112%;font-size:clamp(1.6rem,1.1rem + 2.6vw,3rem);line-height:1.08;letter-spacing:-.03em;max-width:26ch;margin:0}
.statement s{text-decoration-thickness:.08em}

/* lists of included items */
.svc{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:2px solid var(--ink);counter-reset:s}
.svc>li{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.1rem;padding:1.5rem 0;border-bottom:1px solid var(--line);align-items:start}
.svc .n{grid-row:1/3;font-family:var(--f-display);font-weight:900;font-stretch:125%;font-size:1.15rem;line-height:1.5;color:var(--gray);min-width:2.2rem}
.svc h3{font-size:clamp(1.2rem,1rem + .8vw,1.6rem);font-stretch:110%;line-height:1.1;margin:0 0 .45rem;letter-spacing:-.02em}
.svc p{margin:0;max-width:60ch}
@media (min-width:52em){.svc>li{grid-template-columns:3rem 1fr;padding:1.75rem 0}}

/* notes, set apart from the included list so it never reads as a list item */
.notes{border:2px solid var(--ink);border-left-width:8px;border-radius:.25rem;background:var(--paper2);padding:1.15rem 1.25rem 1.25rem;max-width:58rem;margin:0}
.band .notes{background:var(--paper)}
.notes-h{display:flex;align-items:center;gap:.6rem;font-family:var(--f-display);font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .6rem;color:var(--ink)}
.notes .ast{display:inline-grid;place-items:center;width:1.4rem;height:1.4rem;background:var(--y);outline:1.5px solid var(--ink);border-radius:50%;font-size:1rem;line-height:1;letter-spacing:0;flex:none}
.notes p{margin:0;font-size:1rem;line-height:1.5;max-width:60ch}
.notes p + p{margin-top:.6rem}

/* who teaches it. One real photograph treated as ink: hard rectangle, no shadow,
   no gradient, no circular crop. A 1px ink hairline only, because the black and
   white frame is heavy against the paper. */
.who{display:grid;grid-template-columns:minmax(0,1fr);gap:1.75rem;align-items:start}
.who-photo{margin:0;max-width:22rem}
.who-photo img{display:block;width:100%;height:auto;border:2px solid var(--ink);border-radius:0}
.who-photo figcaption{margin:.75rem 0 0;font:400 .8125rem/1.45 "Instrument Sans",sans-serif;color:#5c5c5c;max-width:34ch}
.who-copy{min-width:0}
.who-copy p{margin:0;max-width:58ch}
.who-copy p + p{margin-top:1rem}
.who-copy .who-link{margin:1.75rem 0 0}
@media (min-width:56em){
  .who{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(2rem,4vw,4rem)}
  .who-photo{max-width:none}
  .who-copy{padding-top:.35rem}
}

/* cards */
.cards{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:48em){.cards{grid-template-columns:repeat(2,1fr);gap:1.25rem}}
@media (min-width:64em){.cards.three{grid-template-columns:repeat(3,1fr)}}
.card{border:2px solid var(--ink);border-radius:.25rem;padding:clamp(1.25rem,3vw,1.85rem);background:var(--paper);display:flex;flex-direction:column}
.card h3{font-size:clamp(1.3rem,1.05rem + .9vw,1.75rem);font-stretch:110%;line-height:1.05;margin:0 0 .6rem}
.card p{margin:0;font-size:1rem;line-height:1.5}
.card .tagn{font-family:var(--f-display);font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin:0 0 .75rem}
.card.ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.card.ink p{color:#C9C7C0}
.card.ink .tagn{color:var(--y)}

/* steps */
.steps{list-style:none;margin:0;padding:0;counter-reset:st;display:grid;gap:0}
.steps>li{position:relative;padding:1.75rem 0 1.75rem 3.6rem;border-top:1px solid var(--line)}
.steps>li:last-child{border-bottom:1px solid var(--line)}
.steps>li::before{counter-increment:st;content:counter(st);position:absolute;left:0;top:1.6rem;width:2.35rem;height:2.35rem;display:grid;place-items:center;background:var(--y);color:var(--ink);border:2px solid var(--ink);border-radius:50%;font-family:var(--f-display);font-weight:900;font-size:1rem}
.steps h3{font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);font-stretch:112%;line-height:1.05;margin:0 0 .5rem}
.steps p{margin:0;max-width:58ch}
@media (min-width:52em){.steps>li{padding:2rem 0 2rem 4.25rem}.steps>li::before{top:1.85rem;width:2.75rem;height:2.75rem;font-size:1.1rem}}

/* dates */
.dates{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink);max-width:34rem}
.dates li{display:grid;grid-template-columns:1fr auto;gap:.15rem 1rem;padding:.95rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.dates .dt{font-family:var(--f-display);font-weight:800;font-stretch:110%;font-size:clamp(1.05rem,1rem + .4vw,1.25rem);line-height:1.2}
.dates .hr{font-family:var(--f-display);font-weight:700;font-size:.9375rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.dates .wh{grid-column:1/-1;font-size:.875rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--gray)}
.dates li.room .wh{color:var(--ink)}
.dates li.room .wh::before{content:"";display:inline-block;width:.45rem;height:.45rem;background:var(--y);outline:1.5px solid var(--ink);margin-right:.5rem;vertical-align:.05em}

/* gallery */
.gal{display:grid;gap:.75rem;grid-template-columns:1fr 1fr}
@media (min-width:48em){.gal{grid-template-columns:repeat(12,1fr);gap:1rem}}
.gal figure{margin:0}
.gal .frame img{width:100%;height:100%;object-fit:cover;aspect-ratio:var(--ar,4/3)}
.gal figcaption{font-size:.875rem;color:var(--gray);padding-top:.5rem;line-height:1.35}
.g-4,.g-6,.g-7,.g-5,.g-8,.g-12{grid-column:span 1}
@media (min-width:48em){
  .g-4{grid-column:span 4}.g-5{grid-column:span 5}.g-6{grid-column:span 6}.g-7{grid-column:span 7}.g-8{grid-column:span 8}.g-12{grid-column:span 12}
}
.ar-32{--ar:3/2}.ar-45{--ar:4/5}.ar-169{--ar:16/9}.ar-11{--ar:1/1}.ar-43{--ar:4/3}
.frame{border:2px solid var(--ink);background:var(--paper2);border-radius:.25rem;overflow:hidden}
.frame img{width:100%;display:block}

/* banded photo section */
.wideband{margin:0;width:100%;display:block;overflow:hidden;background:var(--paper2)}
.wideband img{width:100%;aspect-ratio:16/9;object-fit:cover}
@media (min-width:40em){.wideband img{aspect-ratio:21/9}}
.wide-line{margin:.75rem var(--inset) 0;font-family:var(--f-display);font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gray)}

/* price */
.price-card{border:2px solid var(--ink);border-radius:.25rem;background:var(--paper);padding:clamp(1.5rem,4vw,2.75rem);max-width:44rem}
.price-card .amt{font-family:var(--f-display);font-weight:900;font-stretch:125%;font-size:clamp(2.6rem,1.5rem + 4.2vw,4.25rem);line-height:.92;letter-spacing:-.045em;margin:0 0 .35rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem}
.price-card .amt small{font-size:.3em;font-weight:700;font-stretch:100%;letter-spacing:.04em;color:var(--gray)}
.price-card .what{font-size:1rem;margin:0 0 1.5rem;color:var(--gray);max-width:38ch}
.price-card hr{border:0;border-top:1px solid var(--line);margin:1.5rem 0}
.price-card h3{font-size:1.1rem;font-stretch:110%;margin:0 0 .5rem;letter-spacing:-.01em}
.price-card p:last-child{margin-bottom:0}
.price-alt{border:2px solid var(--ink);border-radius:.25rem;padding:clamp(1.5rem,4vw,2.75rem);max-width:44rem;background:var(--ink);color:var(--paper)}
.price-alt .amt{font-family:var(--f-display);font-weight:900;font-stretch:125%;font-size:clamp(2.25rem,1.4rem + 3.2vw,3.25rem);line-height:.95;letter-spacing:-.04em;margin:0 0 .5rem;color:var(--paper)}
.price-alt .amt small{font-size:.34em;font-weight:700;font-stretch:100%;letter-spacing:.04em;color:var(--y);display:block;margin-top:.35rem}
.price-alt p{max-width:44ch;color:#D9D7D0}
.price-alt .save{display:inline-block;background:var(--y);color:var(--ink);font-family:var(--f-display);font-weight:800;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;padding:.35rem .6rem;border-radius:.25rem;margin:0 0 1rem}
.price-alt .btn{background:var(--paper);color:var(--ink)}
.price-alt .handoff{color:var(--paper)}
.price-alt .handoff::before{outline-color:var(--paper)}
.price-grid{display:grid;gap:1.25rem}
@media (min-width:64em){.price-grid{grid-template-columns:1fr 1fr;align-items:start;gap:1.5rem}}
.incl{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;max-width:60ch}
.incl li{position:relative;padding-left:1.5rem;font-size:1rem;line-height:1.45}
.incl li::before{content:"";position:absolute;left:0;top:.45em;width:.55rem;height:.55rem;background:var(--y);outline:1.5px solid var(--ink)}
.incl.no li::before{background:transparent;outline:1.5px solid var(--gray);border-radius:50%}
.credit{border-left:5px solid var(--y);background:var(--paper2);padding:1.1rem 1.25rem;max-width:52rem;margin:0}
.credit p{margin:0;font-size:1rem;max-width:56ch}
.handoff{display:flex;align-items:flex-start;gap:.6rem;font-size:.9375rem;font-weight:700;max-width:40ch;margin:.9rem 0 0}
.handoff::before{content:"";flex:none;width:.55rem;height:.55rem;margin-top:.42em;background:var(--y);outline:1.5px solid var(--ink)}

/* faq */
.faq{border-top:2px solid var(--ink);max-width:62rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;gap:1rem;align-items:baseline;cursor:pointer;list-style:none;padding:1.25rem 0;min-height:3rem;font-family:var(--f-display);font-weight:800;font-size:clamp(1.1rem,1rem + .5vw,1.4rem);line-height:1.25;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-weight:400;font-size:1.5em;line-height:.6;flex:none}
.faq details[open] summary::after{content:"\00d7"}
.faq .a{padding:0 0 1.6rem 0;max-width:62ch}
@media (min-width:40em){.faq .a{padding-left:3rem}}
.faq .a p:last-child{margin-bottom:0}

/* regions */
.regions{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
@media (min-width:56em){.regions{grid-template-columns:repeat(3,1fr);gap:1.25rem}}
.region{border:2px solid var(--ink);border-radius:.25rem;overflow:hidden;display:flex;flex-direction:column;background:var(--paper)}
.region .frame{border:0;border-bottom:2px solid var(--ink);border-radius:0}
.region .frame img{aspect-ratio:4/3;width:100%;object-fit:cover}
.region .body{padding:1.25rem 1.25rem 1.5rem;display:flex;flex-direction:column;flex:1}
.region h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.65rem);font-stretch:112%;line-height:1.05;margin:0 0 .5rem}
.region p{font-size:.9875rem;line-height:1.5;margin:0 0 1rem}
.region .status{align-self:flex-start;margin:0 0 .9rem;font-family:var(--f-display);font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:.35rem .6rem;border-radius:.25rem;border:2px solid var(--ink)}
.region .status.live{background:var(--y);color:var(--ink)}
.region .status.soon{background:transparent;color:var(--gray);border-color:var(--gray)}
.region .body .tlink{margin-top:auto;font-size:.9375rem}

/* prose (terms, privacy, members) */
.prose{max-width:62rem}
.prose h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.15rem);font-stretch:110%;margin:2.5rem 0 .75rem;line-height:1.05}
.prose h2:first-of-type{margin-top:0}
.prose h3{font-size:1.1rem;font-stretch:110%;margin:1.75rem 0 .4rem}
.prose p,.prose li{font-size:1.0125rem;line-height:1.6;max-width:66ch}
.prose ul{padding-left:1.15em}
.prose .updated{font-family:var(--f-display);font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.prose .box{border:2px solid var(--ink);border-radius:.25rem;padding:1.25rem 1.5rem;margin:2rem 0;background:var(--paper2)}
.prose .box p:last-child{margin-bottom:0}

/* final CTA */
.final .d-2{max-width:18ch;margin-bottom:1.5rem}
.final p{max-width:46ch}

/* footer */
.ftr{background:var(--ink);color:var(--paper);padding:clamp(3rem,7vw,5rem) 0 2rem}
.ftr .big{font-family:var(--f-display);font-weight:900;font-stretch:125%;font-size:clamp(2rem,1.2rem + 3.6vw,4rem);letter-spacing:-.04em;line-height:.92;margin:0 0 2rem;max-width:20ch}
.fcols{display:grid;gap:1.75rem;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-d);padding-top:2rem}
@media (min-width:64em){.fcols{grid-template-columns:repeat(4,1fr)}}
.fcols h2{font-family:var(--f-display);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;margin:0 0 .75rem;line-height:1.3;color:#C9C7C0}
.fcols ul{list-style:none;margin:0;padding:0}
.fcols li{margin:0}
.fcols a{display:inline-flex;align-items:center;min-height:2.75rem;text-decoration:none;font-size:.9875rem;word-break:break-word}
.fcols a:hover{text-decoration:underline}
.fbase{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 1.5rem;margin-top:2.5rem;font-size:.875rem;color:#C9C7C0}
.fbase p{margin:0;max-width:none}

/* 404 */
.nf{min-height:60svh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(3rem,8vw,6rem)}
.nf .d-2{margin-bottom:1.25rem}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* measure fix 2026-11-04: ch measures the zero glyph, so 66ch ran ~93 characters.
   em tracks the font. Applied after measuring the deploy. */
p{max-width:32em}
ul,ol{max-width:33em}
ul li,ol li{max-width:33em}
.svc p{max-width:33em}
.notes p{max-width:33em}
.who-copy p{max-width:32em}
.steps p{max-width:33em}
.faq .a{max-width:34em}
.incl li{max-width:33em}
.credit p{max-width:32em}
.note{max-width:30em}
.prose p,.prose li{max-width:32.5em}
p[style*=max-width]{max-width:32em!important}

/* who section: crop, caption size, level the copy column to the photo foot (Designer, 4 Nov) */
.who-photo img{aspect-ratio:800/910;object-fit:cover;object-position:50% 0%}
.who-photo figcaption{font-size:.9375rem;line-height:1.45;max-width:38ch}
/* Item 3, NOT applied (measured 4 Nov). Stretching the copy to the figure foot
   level the columns, but the copy is 144px shorter than the figure at 1440, so the
   dead paper moved from under the link to a 116px hole between the third paragraph
   and the link. A tail at the end of a column is invisible; a hole mid-column is
   not. Left start-aligned until the photo cap or the copy length is decided. */