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

@font-face{font-family:'Fraunces';src:url('/assets/fonts/fraunces.woff2') format('woff2-variations');font-weight:300 700;font-display:swap}
@font-face{font-family:'Karla';src:url('/assets/fonts/karla.woff2') format('woff2-variations');font-weight:400 700;font-display:swap}
@font-face{font-family:'Space Mono';src:url('/assets/fonts/spacemono.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Space Mono';src:url('/assets/fonts/spacemono-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --paper:#FAF3E3;
  --paper-2:#F3E8D2;
  --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:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Karla',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Space Mono',ui-monospace,'SFMono-Regular',monospace;
  --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:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-variation-settings:'SOFT' 70,'WONK' 1;text-wrap:balance;letter-spacing:-.015em;font-weight:400}
h1{font-size:clamp(46px,6.1vw,86px);line-height:.99;font-variation-settings:'opsz' 144,'SOFT' 70,'WONK' 1}
h2{font-size:clamp(34px,3.7vw,50px);line-height:1.06}
h3{font-size:23px;font-weight:600;line-height:1.2}
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:13px;font-weight:500;letter-spacing:.25em;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(250,243,227,.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:46px;height:46px;object-fit:contain}
.brand b{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.02em}
.nav{display:flex;gap:28px;font-size:15px;font-weight:500}
.nav a{text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent;transition:border-color .2s var(--ease)}
.nav a:hover,.nav a[aria-current=page]{border-color:var(--brand)}
.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.05fr .95fr;gap:56px;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-variation-settings:'SOFT' 70,'WONK' 1;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;letter-spacing:.16em;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;letter-spacing:.12em;text-transform:uppercase;background:rgba(43,33,28,.78);color:#F7ECD8;padding:4px 8px}

/* ---------- credential strip ---------- */
.creds{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--paper-2)}
.creds .wrap{display:flex;flex-wrap:wrap}
.cred{flex:1 1 210px;min-width:0;padding:26px 28px 26px 0}
.cred+.cred{border-left:1px solid var(--rule);padding-left:28px}
.cred b{display:block;font-family:var(--display);font-size:29px;font-weight:600;line-height:1.05}
.cred span{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- sections ---------- */
.sec{padding:80px 0}
.sec-alt{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.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(250,243,227,.86)}
.sec-dark a{color:var(--paper)}
.head-2col{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:end;margin-bottom:48px}
.head-2col p{margin:0;color:var(--ink-soft);max-width:48ch}
.sec-dark .head-2col p{color:rgba(250,243,227,.8)}

/* answer-first */
.answer{border-left:3px solid var(--brand);background:var(--paper-2);padding:24px 28px;margin:0 0 34px;max-width:66ch}
.answer p{margin:0;font-size:18.5px}
.answer p+p{margin-top:.7em}
.sec-dark .answer{background:rgba(250,243,227,.07);border-left-color:var(--rose)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule)}
.step{padding:30px 26px 34px 0;border-right:1px solid var(--rule)}
.step:last-child{border-right:0}
.step:not(:first-child){padding-left:26px}
.step .num{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--brand);display:block;margin-bottom:14px}
.step p{font-size:15.5px;color:var(--ink-soft);margin:.5em 0 0}

/* photo strip */
.strip{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px;margin-top:52px}
.strip figure{margin:0}
.strip img{width:100%;height:250px;object-fit:cover;filter:saturate(1.03) contrast(1.02)}

/* 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{display:grid;grid-template-columns:repeat(4,1fr)}
.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;letter-spacing:.16em;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}
.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;letter-spacing:.16em;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{max-width:74ch;border-top:1px solid var(--rule)}
.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(250,243,227,.05);border-color:rgba(250,243,227,.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(250,243,227,.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(250,243,227,.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 */
.mission{max-width:64ch;margin:0 auto;text-align:center}
.mission p{font-family:var(--display);font-size:clamp(24px,2.9vw,34px);line-height:1.3;font-weight:400}

/* 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(250,243,227,.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:86px;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;letter-spacing:.18em;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(250,243,227,.06);border-color:rgba(250,243,227,.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;letter-spacing:.16em;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:1px solid var(--rule);border-left:3px solid var(--brand);background:var(--paper-2);padding:22px 26px;margin:30px 0;border-radius:0 4px 4px 0}
.callout h3{font-size:20px;margin-bottom:8px}
.callout p:last-child,.callout ul:last-child{margin-bottom:0}
.callout.warn{border-left-color:var(--rose)}
.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}
}
@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:900px){
  .nav{display:none}
  .hdr-tel{display:none}
  .burger{display:flex}
  .steps{grid-template-columns:1fr 1fr}
  .step{border-right:0;border-bottom:1px solid var(--rule);padding-left:0!important;padding-right:0}
  .strip{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .res-grid{grid-template-columns:1fr}
  .numsteps li{padding-left:44px}
  .creds .wrap{flex-direction:column}
  .cred{padding-right:0}
  .cred+.cred{border-left:0;border-top:1px solid var(--rule);padding-left:0}
}
@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}
  .rail .wrap{grid-template-columns:1fr}
  .ctaband .acts{width:100%}
}