/* build 20260806-102427 */
/* Tiny Hearts CPR - built against DESIGN_CONTRACT.md (Kit 9 Warm Community) */

@font-face{font-family:'Playfair Display';src:url('/assets/fonts/playfair.woff2') format('woff2-variations');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('/assets/fonts/playfair-italic.woff2') format('woff2-variations');font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:'Figtree';src:url('/assets/fonts/figtree.woff2') format('woff2-variations');font-weight:300 800;font-display:swap}

:root{
  --paper:#FEF0F2;      /* her blush, harvested from her own site 2026-07-27 */
  --paper-2:#FBE1E6;    /* deeper blush: strips, cards, alternating bands */
  --warm:#FFFAF7;       /* warm white, the breathing band between blush sections */
  --ink:#2B211C;
  --ink-soft:#5C4C42;
  --brand:#B4111C;      /* lifted from her logo mark. 6.25:1 on paper, AA for body text */
  --brand-dk:#8F0D16;   /* hover */
  --rose:#E45478;       /* logo secondary. 3.25:1, DECORATIVE ONLY, never text */
  --rule:rgba(43,33,28,.16);
  --display:'Playfair Display',Georgia,'Times New Roman',serif;
  --body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;  /* label face, was Space Mono */
  --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16.8px;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{margin:0;font-family:var(--display);text-wrap:balance;letter-spacing:-.01em;font-weight:700}
h1{font-size:clamp(42px,5.4vw,74px);line-height:1.06;font-weight:700;letter-spacing:-.018em}
h2{font-size:clamp(32px,3.5vw,46px);line-height:1.12;font-weight:700;letter-spacing:-.014em}
h3{font-size:22px;font-weight:700;line-height:1.28}
p{margin:0 0 1em}
img{display:block;max-width:100%;height:auto}
a{color:var(--ink)}
ul,ol{margin:0 0 1em;padding-left:1.15em}
li{margin-bottom:.45em}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.eyebrow{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);display:block}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:99}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:40;background:rgba(254,240,242,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:15px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:58px;height:58px;object-fit:contain}
.brand b{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.02em}
.nav{display:flex;gap:26px;font-size:15px;font-weight:500}
.navitem{position:relative;display:flex;align-items:center}
.nav a{text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent;transition:border-color .2s var(--ease)}
.navitem>a:hover,.navitem>a[aria-current=page]{border-color:var(--brand)}
.navtop{display:inline-flex;align-items:center;gap:6px}
.caret{transition:transform .2s var(--ease)}
.has-sub.open .caret{transform:rotate(180deg)}

/* mega panel: carries the price and the point, not just a link list */
.mega{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  width:min(880px,calc(100vw - 48px));background:var(--warm);border:1px solid var(--rule);
  padding:10px;margin-top:14px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s var(--ease),transform .18s var(--ease);z-index:50}
.has-sub.open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
/* A panel taller than the screen hides its own last row. Cap it and let it scroll. */
.mega{max-height:min(72vh,640px);overflow-y:auto;overscroll-behavior:contain}
.mega .wrap{max-width:none;padding:0}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.mega-i{display:block;padding:14px 16px;text-decoration:none;border-bottom:0;background:transparent;
  transition:background-color .18s var(--ease)}
.mega-i:hover{background:var(--paper-2);border-bottom:0}
.mega-t{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-family:var(--display);font-size:17.5px;font-weight:600;line-height:1.2}
.mega-m{font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand);white-space:nowrap;flex:none}
.mega-b{display:block;font-size:14px;line-height:1.5;color:var(--ink-soft);margin-top:5px}

/* mobile menu groups */
.mnav-top-link{font-family:var(--display);font-size:29px;font-weight:600;text-decoration:none;
  padding:13px 0;border-bottom:1px solid var(--rule);display:block}
.mnav-group{border-bottom:1px solid var(--rule)}
.mnav-group summary{list-style:none;cursor:pointer;position:relative;padding:13px 40px 13px 0;
  font-family:var(--display);font-size:29px;font-weight:600}
.mnav-group summary::-webkit-details-marker{display:none}
.mnav-group summary::after{content:'+';position:absolute;right:4px;top:12px;font-family:var(--body);
  font-size:28px;font-weight:400;color:var(--brand);line-height:1}
.mnav-group[open] summary::after{content:'\2013'}
.mnav-subs{padding:0 0 14px}
.mnav-sub{display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:48px;padding:6px 0 6px 16px;border-left:2px solid var(--rule);
  font-family:var(--body);font-size:16.5px;font-weight:500;text-decoration:none;border-bottom:0}
.mnav-sub em{font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand);white-space:nowrap}
.hdr-cta{display:flex;align-items:center;gap:14px}
.hdr-tel{font-weight:700;font-size:15.5px;text-decoration:none;white-space:nowrap}
.hdr-tel:hover{color:var(--brand)}
.burger{display:none;width:46px;height:46px;border:1px solid var(--rule);background:none;cursor:pointer;align-items:center;justify-content:center;padding:0}
.burger span{display:block;width:20px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:20px;height:2px;background:var(--ink)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.mnav{position:fixed;inset:0;background:var(--paper);z-index:60;display:none;flex-direction:column;padding:22px 24px 40px;overflow-y:auto}
.mnav[open],.mnav.is-open{display:flex}
.mnav-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
.mnav-x{width:46px;height:46px;border:1px solid var(--rule);background:none;font-size:24px;line-height:1;cursor:pointer;font-family:var(--body)}
.mnav a{font-family:var(--display);font-size:29px;font-weight:600;text-decoration:none;padding:13px 0;border-bottom:1px solid var(--rule)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--body);font-weight:700;font-size:16px;text-decoration:none;padding:16px 30px;border-radius:2px;border:0;cursor:pointer;transition:transform .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease)}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{transform:translateY(-2px);background:var(--brand-dk)}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink);background:none}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-ghost.on-dark{border-color:var(--paper);color:var(--paper)}
.btn-ghost.on-dark:hover{background:var(--paper);color:var(--ink)}
.btn-lg{padding:18px 34px;font-size:17px}
.btnrow{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.btn-text{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-decoration:none;box-shadow:inset 0 -2px 0 var(--rose);align-self:center}

/* ---------- hero ---------- */
.hero{padding:44px 0 78px}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:50px;align-items:center}
.hero h1{margin-top:18px}
.mark{position:relative;white-space:nowrap}
.mark svg{position:absolute;left:0;right:0;bottom:-.16em;width:100%;height:.24em;overflow:visible}
.mark svg path{stroke:var(--brand);stroke-width:7;fill:none;stroke-linecap:round}
.lede{font-size:19.5px;color:var(--ink-soft);max-width:44ch;margin-top:22px}
.arch{position:relative;margin:0}
.arch-media{position:relative}
.arch img{width:100%;height:520px;object-fit:cover;border-radius:220px 220px 8px 8px;filter:saturate(1.03) contrast(1.02)}
.arch.sm img{height:300px;border-radius:150px 150px 8px 8px}
/* Portrait crop: hold the face near the top so cover-cropping never beheads her. */
.arch.portrait img{object-position:50% 18%;background:var(--paper-2)}
.arch-cap{margin:0;padding:18px 0 0}
.arch-cap ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.arch-cap li{position:relative;margin:0;padding:9px 0 9px 26px;font-size:15px;color:var(--ink-soft);border-bottom:1px solid var(--rule)}
.arch-cap li:first-child{font-family:var(--display);font-size:21px;font-weight:600;color:var(--ink);padding-top:0}
.arch-cap li::before{content:'';position:absolute;left:0;top:1.05em;width:14px;height:2px;background:var(--brand)}
.arch-cap li:first-child::before{top:.62em;width:0}
.arch-cap li:last-child{border-bottom:0}
.pricetag{position:absolute;left:-26px;bottom:34px;background:var(--paper);border:1px solid var(--rule);padding:16px 22px}
.pricetag .n{font-family:var(--display);font-size:38px;font-weight:600;line-height:1;display:block}
.pricetag .s{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}
.hero-sm{padding:40px 0 54px}
.hero-sm .hero-grid{align-items:center}

/* placeholder badge */
.ph{position:relative}
.ph::after{content:attr(data-badge);position:absolute;left:10px;bottom:10px;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;background:rgba(43,33,28,.78);color:#FFF4F6;padding:4px 8px}

/* ---------- credential strip ---------- */
.creds{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--paper-2)}
.creds .wrap{max-width:none;display:grid;grid-template-columns:repeat(4,1fr);padding:0 clamp(24px,3vw,56px)}
.cred{min-width:0;padding:26px 26px 26px 0}
.cred+.cred{border-left:1px solid var(--rule);padding-left:26px}
.cred b{font-size:clamp(21px,1.9vw,27px);text-wrap:balance}
.cred b{display:block;font-family:var(--display);font-weight:700;line-height:1.12}
.cred span{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- sections ---------- */
.sec{padding:80px 0}
.sec-alt{background:var(--warm);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sec-blush{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}

/* ---------- EKG line: the motif from her own logo, used as the section rule ----------
   Hers uses it once. We use it as the recurring divider so the brand actually threads
   through the page instead of sitting only in the header. */
.ekg{display:flex;align-items:center;gap:0;width:100%;margin:0;padding:0}
.ekg svg{width:100%;height:26px;overflow:visible;display:block}
.ekg svg path{fill:none;stroke:var(--brand);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ekg svg path.flat{stroke:var(--rule);stroke-width:1.4}
.ekg-sec{padding:34px 0}
.hero .ekg{max-width:430px;margin-bottom:22px}
.hero .ekg svg{height:20px}

/* Full-bleed photo band: the single containment break.
   Deliberately NOT the 100vw + -50vw trick, which overflows by the scrollbar width.
   These sections are already top level, so 100% is genuinely full bleed. */
.bleed{position:relative;width:100%;overflow:hidden}
.bleed-media{position:relative;display:block}
.bleed img{width:100%;height:clamp(320px,44vw,540px);object-fit:cover;object-position:50% 42%;filter:saturate(1.03) contrast(1.02)}
/* Caption sits under the photo on solid ink, not scrimmed over it. No gradients anywhere
   on this build, and text over photography is a legibility gamble that never pays. */
.bleed-cap{background:var(--ink);padding:26px 0 28px}
.bleed-cap .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:end}
.bleed-cap h2{color:#FFF4F6;font-size:clamp(25px,2.7vw,36px);line-height:1.08}
.bleed-cap p{color:rgba(255,244,246,.84);max-width:52ch;margin:0;font-size:16.5px}
@media (max-width:900px){.bleed-cap .wrap{grid-template-columns:1fr;gap:14px}}
.sec-dark{background:var(--ink);color:var(--paper)}
.sec-dark h2,.sec-dark h3{color:var(--paper)}
.sec-dark .eyebrow{color:var(--rose)}
.sec-dark p{color:rgba(254,240,242,.86)}
.sec-dark a{color:var(--paper)}
.head-2col{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start;margin-bottom:48px}
/* `align-items:end` on a grid whose columns have different natural heights is a
   dead-space generator: it dropped every section lede to the bottom of the headline
   and left a void above it in the top-right quadrant. Start-align, then nudge the
   lede down so it sits on the headline's first baseline rather than its cap height. */
.head-2col p{margin:.5em 0 0;color:var(--ink-soft);max-width:48ch}
.sec-dark .head-2col p{color:rgba(254,240,242,.8)}

/* Answer-first, set as an editorial lede rather than a tinted slab.
   The old version was a flat pink box with eight lines in it, which is the
   single most template-looking thing a page can do. */
.answer{margin:0 0 36px;max-width:60ch;position:relative;padding-left:0}
.answer p{margin:0;font-size:17px;line-height:1.7;color:var(--ink-soft)}
.answer p+p{margin-top:.85em}
.answer p:first-child{font-family:var(--display);font-weight:400;font-size:clamp(21px,2.1vw,27px);
  line-height:1.42;color:var(--ink);letter-spacing:-.008em;margin-bottom:.6em}
.answer p:first-child::first-letter{font-weight:700}
.sec-dark .answer p{color:rgba(254,240,242,.82)}
.sec-dark .answer p:first-child{color:var(--paper)}

/* ---------- the party band: asymmetric, photo bleeds off the left edge ----------
   Replaces a four-column hairline grid that had no image in it at all. */
.pband{position:relative;padding:0;overflow:hidden}
.pband-top{display:grid;grid-template-columns:minmax(0,42%) minmax(0,58%);align-items:stretch;gap:0}
.pband-photo{position:relative;margin:0;min-height:600px}
.pband-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 42%;
  filter:saturate(1.03) contrast(1.02);display:block}
.pband-plate{position:absolute;right:-46px;bottom:54px;background:var(--paper);border:1px solid var(--rule);
  padding:20px 26px 18px;z-index:3;min-width:200px}
.pband-plate .n{font-family:var(--display);font-weight:700;font-size:44px;line-height:1;display:block;letter-spacing:-.02em}
.pband-plate .s{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-top:6px}
.pband-plate .x{display:block;margin-top:12px;padding-top:12px;border-top:1px solid var(--rule);font-size:14.5px;color:var(--ink-soft)}
.pband-copy{padding:76px 0 72px;padding-left:clamp(46px,6vw,92px);
  padding-right:max(32px,calc((100vw - 1240px) / 2 + 32px));display:flex;flex-direction:column;justify-content:center}
.pband-copy h2{margin:14px 0 26px;max-width:16ch}

/* staggered steps with oversized ghost numerals */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0 0 26px;align-items:start}
.step{position:relative;padding:74px 30px 34px 0}
.step:nth-child(even){transform:translateY(30px)}
.step .num{position:absolute;left:-2px;top:0;font-family:var(--display);font-weight:700;font-size:66px;
  line-height:.8;color:var(--rose);opacity:.38;letter-spacing:-.045em;pointer-events:none;z-index:0}
.step h3{position:relative;z-index:1;padding-bottom:10px;border-bottom:1px solid var(--rule);margin-bottom:12px}
.step p{position:relative;z-index:1;font-size:15.4px;color:var(--ink-soft);margin:0}

/* photo strip */
.strip{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px;margin-top:52px;
  margin-left:calc(50% - 50vw + 8px);margin-right:calc(50% - 50vw + 8px)}
.strip figure{margin:0}
.strip img{width:100%;height:clamp(250px,23vw,340px);object-fit:cover;object-position:50% 42%;filter:saturate(1.03) contrast(1.02);display:block}

/* ---------- inner page hero: asymmetric, always photographic ---------- */
.phero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule)}
.phero-in{display:grid;grid-template-columns:minmax(0,58%) minmax(0,42%);align-items:stretch;gap:0}
.phero-copy{padding:clamp(56px,5vw,78px) 0 clamp(52px,4.6vw,72px);
  padding-left:max(32px,calc((100vw - 1240px)/2 + 32px));
  padding-right:clamp(40px,5vw,80px);display:flex;flex-direction:column;justify-content:center}
.phero-copy h1{margin:14px 0 0}
.phero-copy .lede{margin-top:20px}
.phero-photo{position:relative;margin:0;min-height:560px}
.phero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%;
  filter:saturate(1.03) contrast(1.02);display:block}
/* Pam's portrait must never be cover-cropped through the top of her head. */
.phero-photo.portrait img{object-position:50% 16%}
/* On the home band the photo sits LEFT so the plate hangs off its right edge.
   On inner heroes the photo sits RIGHT, so the plate has to hang off its LEFT
   or it gets clipped by the section's overflow:hidden. */
.phero-photo .pband-plate{right:auto;left:-46px;bottom:26px}

/* ---------- article layout: prose plus a sticky fact rail ---------- */
.artgrid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(40px,5vw,76px);align-items:stretch}
.artaside{position:relative}
.artaside-in{position:sticky;top:96px}
.artaside-in{}
.artaside .eyebrow{margin-bottom:14px}
.ar-row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:15px}
.ar-row:last-of-type{border-bottom:0}
.ar-k{color:var(--ink-soft);flex:none}
.ar-v{font-family:var(--display);font-weight:700;font-size:17px;text-align:right;line-height:1.3}

/* pull quote: breaks the measure, gives long prose a gear change */
.pull{margin:38px 0;padding:0 0 0 26px;border-left:3px solid var(--brand);max-width:none}
.pull blockquote{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(22px,2.4vw,31px);
  line-height:1.32;letter-spacing:-.01em;color:var(--ink)}
.pull cite{display:block;margin-top:12px;font-family:var(--mono);font-style:normal;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}

/* big-figure strip inside prose */
.factstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:36px 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.fact{padding:22px 20px 22px 0;border-right:1px solid var(--rule)}
.fact:last-child{border-right:0}
.fact+.fact{padding-left:20px}
.fact b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(26px,2.8vw,36px);line-height:1.05}
.fact span{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}

@media (max-width:1080px){
  .phero-in{grid-template-columns:1fr}
  .phero-copy{padding:56px 32px 44px}
  .phero-photo{min-height:340px}
  .phero-photo .pband-plate{left:auto;right:24px;bottom:-30px}
  .artgrid{grid-template-columns:1fr;gap:36px}
  .artaside{position:static}
}
@media (max-width:430px){
  .hdr-cta .btn-primary{display:none}
}
@media (max-width:640px){
  .factstrip{grid-template-columns:1fr}
  .fact{border-right:0;border-bottom:1px solid var(--rule);padding-left:0!important;padding-right:0}
  .fact:last-child{border-bottom:0}
  .pull{padding-left:18px}
}

/* prose */
.prose{max-width:68ch}
.prose h2{font-size:clamp(27px,2.7vw,36px);margin:44px 0 14px}
.prose h3{margin:30px 0 10px}
.prose a{color:var(--ink);text-decoration-color:var(--brand);text-underline-offset:3px}
.prose ul{padding-left:1.1em}

/* class rail */
.rail{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:var(--paper-2)}
.rail .wrap{max-width:none;display:grid;grid-template-columns:repeat(4,1fr);padding:0 clamp(24px,3vw,56px)}
.rail-i{padding:24px 24px 26px;border-right:1px solid var(--rule)}
.rail-i:last-child{border-right:0}
.rail-i .k{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:9px}
.rail-i .v{font-family:var(--display);font-weight:600;font-size:31px;line-height:1}
.rail-i .n{font-size:14px;color:var(--ink-soft);margin-top:6px}
.rail-i a{text-decoration:none;color:inherit;display:block}
.rail-i a:hover .v{color:var(--brand)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
/* Column count must divide item count. `auto-fit` does not fix an orphan. */
.cards.c3{grid-template-columns:repeat(3,1fr)}
.card{border:1px solid var(--rule);background:var(--paper-2);padding:30px 30px 32px;border-radius:4px;display:flex;flex-direction:column}
.card .tag{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--brand);display:block;margin-bottom:12px}
.card p{color:var(--ink-soft);font-size:15.8px}
.card .price{font-family:var(--display);font-size:31px;font-weight:600;margin-top:auto;padding-top:14px}
.card .price small{font-family:var(--body);font-size:14px;font-weight:400;color:var(--ink-soft)}

/* faq */
.faq{border-top:1px solid var(--rule);columns:2;column-gap:56px;column-fill:balance}
.faq details{break-inside:avoid}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;font-family:var(--display);font-size:21px;font-weight:600;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:6px;top:18px;font-family:var(--body);font-size:26px;font-weight:400;color:var(--brand);line-height:1}
.faq details[open] summary::after{content:'\2013'}
.faq .a{padding:0 0 22px;color:var(--ink-soft);max-width:64ch}
.faq .a p:last-child{margin-bottom:0}

/* forms */
.formwrap{background:var(--paper);border:1px solid var(--rule);padding:32px 32px 34px;border-radius:4px}
.sec-dark .formwrap{background:rgba(254,240,242,.05);border-color:rgba(254,240,242,.22)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{margin-bottom:14px}
.fld label{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;font-family:var(--body);font-size:16px;padding:13px 14px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);border-radius:2px}
.sec-dark .fld input,.sec-dark .fld select,.sec-dark .fld textarea{background:rgba(254,240,242,.94);color:var(--ink)}
.fld textarea{min-height:110px;resize:vertical}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.fnote{font-size:13.5px;color:var(--ink-soft);margin:14px 0 0}
.sec-dark .fnote{color:rgba(254,240,242,.72)}
.formmsg{margin-top:14px;padding:13px 16px;border-radius:2px;font-size:15.5px;display:none}
.formmsg.ok{display:block;background:rgba(180,17,28,.10);border-left:3px solid var(--brand)}
.formmsg.err{display:block;background:rgba(180,17,28,.15);border-left:3px solid var(--brand)}

/* mission band: solid deep red, no gradient. Her own words and her own verse. */
.sec-brand{background:var(--brand-dk);color:#FFF4F6;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sec-brand .eyebrow{color:rgba(255,244,246,.72)}
.sec-brand .ekg svg path{stroke:rgba(255,244,246,.55)}
.sec-brand .ekg svg path.flat{stroke:rgba(255,244,246,.22)}
.mission-v{max-width:52ch;margin:0 auto;padding-top:30px;position:relative}
.mission-v::before{content:'';display:block;width:56px;height:1px;background:rgba(255,244,246,.45);margin:0 auto 26px}
.mission-v p{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(17px,1.7vw,21px);line-height:1.55;color:rgba(255,244,246,.93);margin:0}
.mission-v cite{display:block;margin-top:14px;font-family:var(--mono);font-style:normal;font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,244,246,.66)}

/* mission */
.mission{max-width:64ch;margin:0 auto;text-align:center}
.mission p{font-family:var(--display);font-size:clamp(26px,3.1vw,42px);line-height:1.24;font-weight:700;letter-spacing:-.014em}
.sec-brand .mission p{color:#FFF4F6}

/* cta band */
.ctaband{background:var(--ink);color:var(--paper);padding:64px 0}
.ctaband .wrap{display:flex;gap:40px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ctaband h2{color:var(--paper);font-size:clamp(30px,3.2vw,42px)}
.ctaband p{color:rgba(254,240,242,.82);max-width:52ch;margin:.6em 0 0}
.ctaband .acts{display:flex;gap:14px;flex-wrap:wrap}

/* footer */
.ft{background:var(--paper-2);border-top:1px solid var(--rule);padding:56px 0 30px}
.ft-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px}
.ft .brand b{font-size:20px}
.ft-logo{width:104px;height:auto}
.ft p{color:var(--ink-soft);font-size:15.5px;max-width:40ch;margin-top:14px}
.ft .ft-h{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);font-weight:400;margin-bottom:14px;font-variation-settings:normal}
.ft ul{list-style:none;padding:0;margin:0}
.ft li{margin-bottom:2px}
.ft ul a{display:inline-flex;align-items:center;min-height:44px}
.ft a{text-decoration:none;font-size:15.5px}
.ft address a{display:inline-flex;align-items:center;min-height:44px}
.ft a:hover{color:var(--brand)}
.ft address{font-style:normal;color:var(--ink-soft);font-size:15.5px;line-height:1.75}
.ft-bot{border-top:1px solid var(--rule);margin-top:38px;padding-top:20px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-soft)}

/* social */
.social{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.social a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--rule);border-radius:2px;text-decoration:none;font-size:14px;font-weight:700;background:var(--paper);transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.social a:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.social svg{flex:none}
.sec-dark .social a{background:rgba(254,240,242,.06);border-color:rgba(254,240,242,.28);color:var(--paper)}

/* resource cards */
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.res{display:flex;flex-direction:column;border:1px solid var(--rule);background:var(--paper-2);padding:26px 26px 28px;border-radius:4px;text-decoration:none;transition:transform .2s var(--ease),border-color .2s var(--ease)}
.res:hover{transform:translateY(-3px);border-color:var(--brand)}
.res .k{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--brand);margin-bottom:12px}
.res h3{font-size:22px;line-height:1.18;margin-bottom:9px}
.res p{font-size:15.3px;color:var(--ink-soft);margin:0}
.res .go{margin-top:auto;padding-top:16px;font-weight:700;font-size:14.5px;box-shadow:inset 0 -2px 0 var(--rose);align-self:flex-start}

/* callout used inside articles */
.callout{border:0;border-top:2px solid var(--ink);background:transparent;padding:22px 0 0;margin:34px 0;border-radius:0}
.callout h3{font-family:var(--display);font-weight:700}
.callout p{color:var(--ink-soft)}
.callout.warn{border-top-color:var(--brand)}
.callout h3{font-size:20px;margin-bottom:8px}
.callout p:last-child,.callout ul:last-child{margin-bottom:0}

.numsteps{list-style:none;padding:0;margin:24px 0;counter-reset:s}
.numsteps li{counter-increment:s;position:relative;padding:16px 0 16px 54px;border-bottom:1px solid var(--rule);margin:0}
.numsteps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:16px;font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;color:var(--brand);font-weight:700}
.numsteps li b{display:block;font-family:var(--display);font-size:19px;font-weight:600;margin-bottom:3px}
.srcnote{font-size:14px;color:var(--ink-soft);border-top:1px solid var(--rule);margin-top:34px;padding-top:16px}

/* reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ---------- mobile ---------- */
@media (max-width:1080px){
  .res-grid{grid-template-columns:1fr 1fr}
  .faq{columns:1}
  .cards.c3{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  .hero-grid,.head-2col{grid-template-columns:1fr;gap:34px}
  .rail .wrap{grid-template-columns:1fr 1fr}
  .rail-i{border-bottom:1px solid var(--rule)}
  .ft-top{grid-template-columns:1fr 1fr}
}
@media (max-width:1180px){
  .nav{gap:18px;font-size:14.5px}
  .mega-grid{grid-template-columns:1fr}
  .mega{width:min(460px,calc(100vw - 40px))}
}
@media (max-width:1080px){
  .pband-top{grid-template-columns:1fr}
  .pband-photo{min-height:400px}
  .pband-plate{right:24px;bottom:-30px}
  .pband-copy{padding:64px 32px 56px}
}
@media (max-width:900px){
  .nav{display:none}
  .hdr-tel{display:none}
  .burger{display:flex}
  /* The wordmark wrapped to THREE lines at 390px and made the sticky header 107px
     tall, which is a quarter of the screen following you down every page. Pam's
     larger mark makes it worse, not better, so the mobile header is rebuilt here:
     one line of wordmark, tighter gaps, and below 430px the Book a Party button
     yields to the burger, which opens with that exact button as its first item. */
  .hdr-in{gap:12px}
  .hdr .hdr-in{padding-top:12px;padding-bottom:12px}
  .brand{gap:10px}
  .brand b{font-size:19px;white-space:nowrap}
  .hdr-cta{gap:10px}
  .hdr-cta .btn{padding:14px 18px;font-size:14.5px}
  .mega{display:none}
  .steps{grid-template-columns:1fr 1fr;gap:10px}
  .step{padding:58px 16px 26px 0}
  .step:nth-child(even){transform:none}
  .step .num{font-size:58px}
  .strip{grid-template-columns:1fr;margin-left:0;margin-right:0}
  .faq{columns:1}
  .cards,.cards.c3{grid-template-columns:1fr}
  .res-grid{grid-template-columns:1fr}
  .numsteps li{padding-left:44px}
  .creds .wrap{grid-template-columns:1fr 1fr}
  .cred{padding-right:16px}
  .cred:nth-child(odd){border-left:0;padding-left:0}
  .cred:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
  .sec{padding:56px 0}
  .hero{padding:30px 0 54px}
  .arch img{height:360px;border-radius:170px 170px 8px 8px}
  .arch.sm img{height:240px;border-radius:120px 120px 8px 8px}
  .pricetag{left:14px;bottom:16px;padding:13px 18px}
  .pricetag .n{font-size:31px}
  .btn{width:100%}
  .btn-text{width:100%;justify-content:center;min-height:48px}
  .frow{grid-template-columns:1fr}
  .formwrap{padding:24px 20px 26px}
  .ft-top{grid-template-columns:1fr;gap:32px}
  .steps{grid-template-columns:1fr;gap:0}
  .creds .wrap{grid-template-columns:1fr}
  .cred{border-left:0!important;padding-left:0!important;padding-right:0}
  .cred+.cred{border-top:1px solid var(--rule)}
  .step{padding:52px 0 22px}
  .step .num{font-size:52px;top:0}
  .pband-plate{position:static;margin:0 20px;transform:translateY(-28px)}
  .rail .wrap{grid-template-columns:1fr}
  .ctaband .acts{width:100%}
}

/* ==========================================================================
   PAGE-SHAPE VARIANTS, 2026-08-04.
   One hero and one tail across 34 pages was the sameness defect. Four of each
   now, by page family. Every one of these carries a photograph, scale contrast
   and something crossing a container edge, per the section gate.
   ========================================================================== */

/* ---- Area pages: copy panel left, photograph bleeding off the right edge ----
   First attempt right-aligned a 1200px media block inside a 1920px section, which
   left 720px of empty ground beside it and clipped the price tag at the viewport
   edge. A two-column band has no dead region, cannot clip, and hands the photo
   ~1030px at 1920 against a 1200px file. */
.hbleed{display:grid;grid-template-columns:minmax(0,50%) minmax(0,50%);align-items:stretch;
  border-bottom:1px solid var(--rule);background:var(--paper)}
.hb-panel{padding:clamp(52px,5vw,86px) clamp(32px,4vw,64px) clamp(48px,4.6vw,76px);
  padding-left:max(32px,calc((100vw - 1240px)/2 + 32px));
  display:flex;flex-direction:column;justify-content:center}
.hb-panel h1{margin:12px 0 0;font-size:clamp(34px,3.8vw,54px)}
.hb-panel .lede{margin-top:18px;max-width:46ch}
.hb-panel .btnrow{margin-top:28px}
.hb-media{position:relative;min-height:clamp(300px,32vw,470px);overflow:hidden;background:var(--ink)}
.hb-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;
  filter:saturate(1.03) contrast(1.02);display:block}
.hb-tag{position:absolute;right:0;bottom:0;background:var(--ink);color:var(--paper);
  padding:14px 22px 15px;display:flex;align-items:baseline;gap:14px;max-width:calc(100% - 24px)}
.hb-tag .k{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rose)}
.hb-tag .v{font-family:var(--display);font-weight:700;font-size:27px;line-height:1}
@media (max-width:860px){
  .hbleed{grid-template-columns:1fr}
  .hb-panel{padding:44px 24px 38px;order:2}
  .hb-media{min-height:240px;order:1}
}

/* ---- Guides: question at measure, then a wide short photograph ---- */
.hart{padding:clamp(54px,5vw,84px) 0 0}
.hart h1{margin:12px 0 0;font-size:clamp(34px,4.1vw,58px);max-width:20ch}
.hart .lede{margin-top:20px;max-width:62ch}
.ha-meta{display:flex;flex-wrap:wrap;gap:0 26px;margin-top:24px}
.ha-meta span{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);position:relative;padding-left:18px}
.ha-meta span::before{content:'';position:absolute;left:0;top:.52em;width:11px;height:2px;background:var(--brand)}
.hart-photo{margin:clamp(38px,4vw,58px) auto 0;height:clamp(220px,22vw,330px);overflow:hidden;
  max-width:1000px;padding:0 32px}
.hart-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 56%;
  filter:saturate(1.03) contrast(1.02);display:block}

/* ---- Pricing: the facts ARE the header. Deliberately no hero photograph. ---- */
.shead{border-bottom:1px solid var(--rule);padding:clamp(52px,5vw,80px) 0 clamp(48px,4.6vw,72px);background:var(--warm)}
.sh-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(40px,5vw,80px);align-items:start}
.sh-copy h1{margin:12px 0 0;font-size:clamp(34px,4vw,56px)}
.sh-copy .lede{margin-top:18px;max-width:46ch}
.sh-copy .btnrow{margin-top:28px}
.sh-table{border-top:2px solid var(--ink)}
.sh-row{display:grid;grid-template-columns:1fr auto;gap:6px 18px;padding:15px 0 14px;border-bottom:1px solid var(--rule)}
.sh-k{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft);align-self:center}
.sh-v{font-family:var(--display);font-weight:700;font-size:29px;line-height:1;text-align:right}
.sh-n{grid-column:1/-1;font-size:14px;color:var(--ink-soft)}
@media (max-width:900px){.sh-in{grid-template-columns:1fr;gap:38px}}

/* ---- The second photograph, back half of interior pages ---- */
.pbreak{display:grid;grid-template-columns:minmax(0,48%) minmax(0,52%);align-items:stretch;width:100%}
.pb-media{position:relative;min-height:clamp(250px,26vw,380px)}
.pb-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;
  filter:saturate(1.03) contrast(1.02);display:block}
.pb-cap{background:var(--ink);padding:clamp(36px,3.8vw,58px) clamp(28px,3.6vw,58px);
  display:flex;flex-direction:column;justify-content:center}
.pb-cap .wrap{max-width:none;padding:0}
.pb-cap h2{color:#FFF4F6;font-size:clamp(24px,2.5vw,34px);line-height:1.1;margin:0;max-width:20ch}
.pb-cap p{color:rgba(255,244,246,.84);max-width:50ch;margin:.75em 0 0;font-size:16.5px}
@media (max-width:860px){.pbreak{grid-template-columns:1fr}.pb-media{min-height:230px}}

/* ---- Area-page tail ---- */
.ctaphoto{display:grid;grid-template-columns:minmax(0,47%) minmax(0,53%);align-items:stretch}
.cp-media{position:relative;min-height:340px}
.cp-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 42%;filter:saturate(1.03) contrast(1.02);display:block}
.cp-panel{background:var(--ink);color:var(--paper);padding:clamp(44px,4.6vw,68px) clamp(30px,4vw,64px);
  display:flex;flex-direction:column;justify-content:center}
.cp-panel h2{color:var(--paper);font-size:clamp(28px,3vw,40px);margin:0;max-width:15ch}
.cp-panel p{color:rgba(254,240,242,.82);max-width:46ch;margin:.7em 0 0}
.cp-panel .acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
@media (max-width:860px){.ctaphoto{grid-template-columns:1fr}.cp-media{min-height:230px}}

/* ---- Guide tail: the next article, not a booking slab ---- */
.ctanext{padding:clamp(56px,5vw,84px) 0;background:var(--paper-2);border-top:1px solid var(--rule)}
.nx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.nx{display:block;background:var(--paper);border:1px solid var(--rule);padding:24px 24px 26px;
  text-decoration:none;color:inherit;border-bottom:1px solid var(--rule);
  transition:transform .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1)}
.nx:hover{transform:translateY(-2px);border-color:var(--ink)}
.nx .k{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brand);display:block;margin-bottom:12px}
.nx h3{font-size:20px;line-height:1.25;margin:0 0 16px}
.nx .go{font-size:14px;font-weight:700;border-bottom:1.5px solid var(--brand);padding-bottom:2px}
.nx-line{margin:30px 0 0;color:var(--ink-soft);max-width:70ch}
@media (max-width:900px){.nx-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.nx-grid{grid-template-columns:1fr}}

/* ---- The rail, rebuilt 2026-08-04 --------------------------------------
   A 230px fact card beside a 3000px article left 45% of the viewport dead for
   the rest of the page on five of seven pages. That is the most-rejected thing
   in the taste log. The rail now carries a card, a photograph and a call plate,
   so the sticky has real height and real content to follow. */
.ar-card{border:1px solid var(--rule);background:var(--warm);padding:24px 24px 26px}
.ar-photo{margin:16px 0 0;position:relative;height:300px;overflow:hidden}
.ar-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;
  filter:saturate(1.03) contrast(1.02);display:block}
.ar-note{margin:14px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-soft);
  padding-left:16px;border-left:2px solid var(--brand)}
.ar-call{margin-top:16px;background:var(--ink);color:var(--paper);padding:20px 22px 22px}
.ar-call .k{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rose);display:block}
.ar-call .v{display:block;margin-top:8px;font-family:var(--display);font-weight:700;font-size:26px;
  line-height:1;color:var(--paper);text-decoration:none;letter-spacing:-.01em}
.ar-call .v:hover{color:var(--rose)}
.ar-call .n{display:block;margin-top:10px;font-size:13.5px;line-height:1.5;color:rgba(254,240,242,.78)}
@media (max-width:980px){.ar-photo{height:220px}}

/* Area pages open on the town's own numbers instead of a fourth identical drop cap.
   The one-line follow-up is the answer-first sentence an answer engine reads, set
   as plain lede rather than a repeat of the Playfair opening used elsewhere. */
.oneline{font-size:17.5px;line-height:1.66;color:var(--ink-soft);max-width:62ch;margin:0 0 34px}

/* Guides open with the same answer-first SEMANTICS as everywhere else and a different
   shape: a ruled block with a hanging label, so the beat differs without costing the
   thing an answer engine actually reads. */
.lede-quote{position:relative;margin:0 0 38px;max-width:60ch;padding:26px 0 0;border-top:2px solid var(--ink)}
.lede-quote::before{content:'The short answer';position:absolute;top:-9px;left:0;background:var(--paper);
  padding-right:14px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand)}
.lede-quote p{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(20px,2vw,26px);
  line-height:1.44;color:var(--ink);letter-spacing:-.008em}
.lede-quote p+p{margin-top:.7em;font-family:var(--body);font-size:17px;line-height:1.7;color:var(--ink-soft)}

/* Area pages lead with the town's numbers, so the answer-first block that follows is
   set flat rather than as a second oversized opening in the same screen. */
.answer-flat p:first-child{font-family:var(--body);font-weight:400;font-size:17.5px;line-height:1.66;
  color:var(--ink-soft);letter-spacing:0}
.answer-flat p:first-child::first-letter{font-weight:400}

/* Three homepage heads rebuilt 2026-08-04. Six identical two-column heads on one page
   is the sameness failure at section level; each of these carries its own scale move. */
.head-quote{max-width:70ch;margin-bottom:44px}
.head-quote blockquote{margin:14px 0 0;font-family:var(--display);font-weight:700;
  font-size:clamp(34px,4.4vw,62px);line-height:1.02;letter-spacing:-.018em;color:var(--ink);text-wrap:balance}
.head-quote blockquote::before{content:'\201C'}
.head-quote blockquote::after{content:'\201D'}
.head-quote p{margin:20px 0 0;color:var(--ink-soft);max-width:56ch}
.head-1col{max-width:64ch;margin-bottom:44px}
.head-1col h2{margin:14px 0 0}
.head-1col p{margin:18px 0 0;color:var(--ink-soft)}
.head-counties{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,5vw,76px);
  align-items:start;margin-bottom:48px}
.head-counties h2{margin:14px 0 0}
.head-counties>div>p{margin:18px 0 0;color:var(--ink-soft);max-width:48ch}
.hc-list{border-top:2px solid var(--ink);padding-top:18px}
.hc-k{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:12px}
.hc-list b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(21px,2.1vw,28px);
  line-height:1.24;letter-spacing:-.014em;border-bottom:1px solid var(--rule);padding:7px 0}
.hc-n{display:block;margin-top:14px;font-size:14.5px;color:var(--ink-soft)}
@media (max-width:860px){.head-counties{grid-template-columns:1fr;gap:30px}}