/* ============================================================
   One Smile at a Time Foundation — V2 DESIGN LAYER
   Loads after styles.css. Changes how things are presented;
   content stays as it is.
   ============================================================ */

:root{
  /* chosen palette: Haley's logo trio (blue, red & yellow) — was the staging switcher's first option */
  --teal:#1c56a8;
  --teal-d:#123c78;
  --amber:#f0c93f;
  --acc-r:#e0301e;
  --navy:#141c2b;
  --v2-sh:0 18px 44px rgba(20,28,43,.13);
  --v2-sh-lg:0 28px 70px rgba(20,28,43,.20);
}

/* ---------- 1. TYPE SCALE — more contrast ---------- */
.hero h1{font-size:64px;letter-spacing:-1px}
.page-hero h1{font-size:50px}
.sec-head h2{font-size:42px}
.story h2{font-size:42px}
.sec-head p{font-size:17px}

/* ---------- 2. EDITORIAL SECTION HEAD (off-centre + supporting column) ---------- */
.sec-head.split{max-width:none;text-align:left;display:grid;grid-template-columns:.85fr 1.15fr;
  gap:60px;align-items:end;margin-bottom:46px}
.sec-head.split .label,.sec-head.split .label.center{justify-content:flex-start;margin-bottom:12px}
.sec-head.split .label.center::after{display:none}
.sec-head.split h2{text-align:left;margin-bottom:0}
.sec-head.split p{text-align:left;max-width:none;margin:0}

/* ---------- 3. THREE HERO TYPES ---------- */
/* Type 1 — STORY: full-bleed photo, left aligned */
.page-hero.ph-story{position:relative;min-height:420px;display:flex;align-items:flex-end;
  text-align:left;padding:0;border-bottom:none;background-size:cover;background-position:center}
.page-hero.ph-story::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,28,43,.93) 26%,rgba(20,28,43,.45) 70%,rgba(20,28,43,.2))}
.page-hero.ph-story .wrap{position:relative;z-index:2;padding-top:66px;padding-bottom:58px}
.page-hero.ph-story h1{color:#fff;font-size:58px;max-width:900px;margin-bottom:14px}
.page-hero.ph-story p{color:rgba(255,255,255,.87);margin:0;max-width:640px;text-align:left}
.page-hero.ph-story .label,.page-hero.ph-story .label.center{justify-content:flex-start;color:var(--amber)}
.page-hero.ph-story .label.center::after{display:none}

/* Type 2 — ACTION: colour block + live numbers */
.page-hero.ph-action{text-align:left;border-bottom:none;padding:62px 0;
  background:linear-gradient(120deg,var(--teal-d),var(--teal))}
.page-hero.ph-action .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center}
.page-hero.ph-action h1{color:#fff;margin-bottom:12px}
.page-hero.ph-action p{color:rgba(255,255,255,.88);margin:0 0 24px;text-align:left;max-width:580px}
.page-hero.ph-action .label,.page-hero.ph-action .label.center{justify-content:flex-start;color:var(--amber)}
.page-hero.ph-action .label.center::after{display:none}
.ph-panel{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:16px;padding:26px 30px}
.ph-panel b{display:block;font-family:'Fraunces',serif;font-weight:500;font-size:36px;color:var(--amber);line-height:1}
.ph-panel span{display:block;font-size:13.5px;color:rgba(255,255,255,.8);margin-top:5px}
.ph-panel hr{border:0;height:1px;background:rgba(255,255,255,.18);margin:17px 0}

/* Type 3 — UTILITY: compact bar */
.page-hero.ph-util{background:var(--paper);text-align:left;padding:42px 0 36px}
.page-hero.ph-util .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.page-hero.ph-util h1{font-size:38px;margin-bottom:6px}
.page-hero.ph-util p{color:var(--soft);font-size:15.5px;margin:0;text-align:left;max-width:660px}
.page-hero.ph-util .crumb{font-size:12.5px;color:var(--soft);margin-bottom:9px}
.page-hero.ph-util .label,.page-hero.ph-util .label.center{display:none}

/* ---------- 4. ONE CARD TYPE PER SECTION ---------- */
.card{border:none;box-shadow:var(--v2-sh)}
.prog{border:none;box-shadow:var(--v2-sh)}
.prog::before{display:none}
.pillar{border:none;box-shadow:var(--v2-sh)}
.hosp-card{border:none;box-shadow:var(--v2-sh)}
.hosp-card::before{display:none}
.doc{border:none;box-shadow:var(--v2-sh)}
.hl,.hl:nth-child(3n),.hl:nth-child(3n+1),.hl:nth-child(3n+2){background:var(--paper);border:none;border-top:none;border-radius:14px}
.qcard{border:none;box-shadow:var(--v2-sh)}

/* image-led programme cards */
.progs-img{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.pcard{background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--v2-sh);display:flex;flex-direction:column}
.pcard .ph{aspect-ratio:16/9;overflow:hidden}
.pcard .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.pcard:hover .ph img{transform:scale(1.04)}
.pcard .bd{padding:30px 32px 34px;display:flex;flex-direction:column;flex:1}
.pcard h3{font-size:28px;margin:6px 0 10px}
.pcard p{color:var(--soft);font-size:15px;margin-bottom:22px}
.pcard .btn{align-self:flex-start;margin-top:auto}

/* ---------- 5. IMPACT NUMBERS — institutional navy band ---------- */
.impact{background:var(--navy);border-top:none;border-bottom:none}
.imp{border-left-color:rgba(255,255,255,.15)}
.imp::before{background:var(--amber)}
.imp b{color:var(--amber);font-size:62px}
.imp span{color:rgba(255,255,255,.74)}

/* ---------- 6. THE SMILE MOTIF (from the logo) ---------- */
.hero h1 em::after{display:none}
.smile-u{position:relative;white-space:nowrap;display:inline-block}
.smile-u svg{position:absolute;left:0;right:0;bottom:-.16em;width:100%;height:.2em;overflow:visible}

/* ---------- 7. FULL-BLEED QUOTE BREAK ---------- */
.quote-bleed{position:relative;min-height:420px;display:flex;align-items:center;
  background-size:cover;background-position:center 38%}
.quote-bleed::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,28,43,.92) 32%,rgba(20,28,43,.3))}
.quote-bleed .qb{position:relative;z-index:2;max-width:680px;margin-left:8%;padding:64px 26px}
.quote-bleed blockquote{font-family:'Fraunces',serif;font-style:italic;font-size:29px;line-height:1.42;color:#fff}
.quote-bleed cite{display:block;margin-top:18px;font-style:normal;font-size:12px;letter-spacing:2px;
  text-transform:uppercase;color:var(--amber);font-weight:700}

/* ---------- 8. GIFT LEVELS ---------- */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tier{background:var(--paper);border-radius:16px;padding:28px 24px;text-align:center}
.tier.best{background:var(--navy);color:#fff}
.tier b{display:block;font-family:'Fraunces',serif;font-weight:500;font-size:40px;color:var(--teal);line-height:1}
.tier.best b{color:var(--amber)}
.tier .w{font-family:'Fraunces',serif;font-size:18px;margin:10px 0 6px}
.tier p{font-size:13.5px;color:var(--soft);margin:0;line-height:1.6}
.tier.best p{color:rgba(255,255,255,.76)}
.tier-note{margin-top:18px;font-size:13px;color:var(--soft);font-style:italic;text-align:center}

/* ---------- 9. BOARD ROLL ---------- */
.bhero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:end}
/* board hero: left-aligned like every other content hero */
.page-hero.bhero,.page-hero.bhero .gov-note{text-align:left}
.page-hero.bhero .label,.page-hero.bhero .label.center{justify-content:flex-start}
.page-hero.bhero .label::after,.page-hero.bhero .label.center::after{display:none}
.page-hero.bhero p{margin-left:0;margin-right:0}
.gov-note{background:rgba(255,255,255,.08);border-left:3px solid var(--amber);padding:18px 22px;
  border-radius:0 10px 10px 0;font-size:14.5px;color:rgba(255,255,255,.86)}
.broll{display:grid;grid-template-columns:1fr 1fr;gap:0 46px}
.brow{display:grid;grid-template-columns:92px 1fr;gap:22px;padding:26px 0;border-top:1px solid var(--line);align-items:start}
.brow .av{width:92px;height:92px;border-radius:50%;background:var(--paper);display:flex;align-items:center;
  justify-content:center;font-family:'Fraunces',serif;font-size:29px;color:var(--teal);overflow:hidden;flex:0 0 92px}
.brow .av img{width:100%;height:100%;object-fit:cover}
.brow h2,.brow h3{font-size:21px;margin:0}
.brow .role{font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--teal);margin:5px 0 8px}
.brow p{font-size:14.5px;color:var(--soft);margin:0}

/* ---------- 10. TRANSPARENCY LEDGER ---------- */
.fin2{display:grid;grid-template-columns:1.15fr .85fr;gap:54px;align-items:start}
.ledger .lrow{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  padding:20px 0;border-top:1px solid var(--line)}
.ledger h3{font-size:19px;margin:0}
.ledger p{font-size:14px;color:var(--soft);margin-top:3px}
.pill{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  padding:7px 14px;border-radius:30px;white-space:nowrap}
.pill.ok{background:#e8f3ec;color:#1d6b3f}
.pill.soon{background:var(--paper);color:var(--soft);border:1px solid var(--line)}
.repcard{background:var(--navy);color:#fff;border-radius:18px;padding:30px 32px;margin-bottom:22px}
.repcard h3{color:#fff;font-size:24px;margin-bottom:8px}
.repcard p{color:rgba(255,255,255,.78);font-size:14.5px;margin-bottom:20px}
.idcard{background:var(--paper);border-radius:16px;padding:24px 28px}
.idcard .l{display:flex;justify-content:space-between;gap:20px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:14.5px}
.idcard .l:last-child{border-bottom:none}
.idcard .l b{font-family:'Fraunces',serif;font-weight:500;text-align:right}

/* ---------- 11. DONATE: framed widget ---------- */
.dsplit{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.dfact{display:grid;grid-template-columns:76px 1fr;gap:18px;padding:16px 0;border-top:1px solid var(--line)}
.dfact b{font-family:'Fraunces',serif;font-weight:500;font-size:25px;color:var(--teal);line-height:1.1}
.dfact span{font-size:14.5px;color:var(--soft)}
.dwidget{background:#fff;border-radius:20px;box-shadow:var(--v2-sh-lg);overflow:hidden}
.dwidget .wh{background:var(--navy);color:#fff;padding:20px 26px}
.dwidget .wh b{font-family:'Fraunces',serif;font-weight:500;font-size:21px;display:block}
.dwidget .wh span{font-size:13px;color:rgba(255,255,255,.72)}
.dwidget .wb{padding:10px 12px 0}
.dtrust{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:6px 26px 22px;font-size:12.5px;color:var(--soft)}
.dtrust b{color:var(--navy)}

/* ---------- 12. PRESS AS PROOF ---------- */
.pfeat{background:#fff;border-left:5px solid var(--amber);border-radius:14px;padding:28px 32px;
  margin-bottom:26px;box-shadow:var(--v2-sh)}
.pfeat .q{font-family:'Fraunces',serif;font-style:italic;font-size:21px;line-height:1.45;margin-bottom:10px}
.pfeat .src{font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--soft)}
.prows{border-top:1px solid var(--line)}
.prow{display:grid;grid-template-columns:225px 1fr 135px;gap:24px;align-items:center;
  padding:22px 6px;border-bottom:1px solid var(--line)}
.prow .out{font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--teal)}
.prow .ttl{font-family:'Fraunces',serif;font-size:18px;line-height:1.35}
.prow a.ttl{color:var(--ink);text-decoration:none}
.prow a.ttl:hover,.prow a.ttl:focus-visible{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.prow a.ttl .ext{display:inline-block;margin-left:6px;font-family:Inter,sans-serif;font-size:14px;color:var(--teal)}
.prow .dt{text-align:right;color:var(--soft);font-size:13.5px}

/* ---------- MOBILE ---------- */
@media(max-width:900px){
  .hero h1{font-size:40px;letter-spacing:-.4px}
  .page-hero h1{font-size:34px}
  .sec-head h2,.story h2{font-size:31px}

  .sec-head.split{grid-template-columns:1fr;gap:16px;align-items:start}
  .progs-img,.tiers,.broll,.fin2,.dsplit{grid-template-columns:1fr}
  .tiers{gap:14px}

  .page-hero.ph-story{min-height:330px}
  .page-hero.ph-story h1{font-size:33px}
  .page-hero.ph-story .wrap{padding-top:44px;padding-bottom:40px}
  .page-hero.ph-action{padding:44px 0}
  .page-hero.ph-action .wrap{grid-template-columns:1fr;gap:28px}
  .page-hero.ph-util .wrap{flex-direction:column;align-items:flex-start;gap:18px}
  .bhero .wrap{grid-template-columns:1fr;gap:26px}

  .quote-bleed{min-height:0}
  .quote-bleed .qb{margin-left:0;padding:48px 26px}
  .quote-bleed blockquote{font-size:22px}

  .prow{grid-template-columns:1fr;gap:6px;padding:18px 4px}
  .prow .dt{text-align:left}
  .brow{grid-template-columns:70px 1fr;gap:16px}
  .brow .av{width:70px;height:70px;flex:0 0 70px;font-size:23px}
  .ledger .lrow{grid-template-columns:1fr;gap:10px;justify-items:start}
  .idcard .l{flex-direction:column;gap:2px}
  .idcard .l b{text-align:left}
  .dfact{grid-template-columns:64px 1fr;gap:12px}
}


/* ---- board: featured founder ---- */
.founder{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:center}
.founder .fimg{border-radius:20px;overflow:hidden;box-shadow:0 24px 60px rgba(20,28,43,.18);aspect-ratio:4/5}
.founder .fimg img{width:100%;height:100%;object-fit:cover;display:block}
.founder h2{font-size:38px;margin-bottom:12px}
.founder p{color:var(--soft);margin-bottom:18px}
.fquote{font-family:'Fraunces',serif;font-style:italic;font-size:20px;line-height:1.5;color:var(--ink);
  border-left:3px solid var(--amber);padding-left:22px;margin-bottom:0}
.board-head{margin:76px 0 10px}
.board-head h2{font-size:30px}
@media(max-width:900px){
  .founder{grid-template-columns:1fr;gap:26px}
  .founder .fimg{max-width:330px;aspect-ratio:3/4}
  .founder h2{font-size:29px}
  .board-head{margin:52px 0 6px}
}


/* ---- Patient & Family Connection: request form + steps ---- */
.reqform{background:#fff;border-radius:20px;box-shadow:var(--v2-sh-lg);padding:38px 40px;max-width:900px;margin:0 auto}
.form-alert{background:#fdecea;border:1px solid #f3b8b1;color:#8a1f12;border-radius:10px;padding:12px 16px;margin-bottom:18px;font-size:14.5px;line-height:1.5}
.reqform .form-note{margin-top:16px;font-size:13px;color:var(--soft);line-height:1.6}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.step{background:#fff;border-radius:16px;padding:28px 26px 30px;box-shadow:var(--v2-sh)}
.step b{display:block;font-family:'Fraunces',serif;font-weight:500;font-size:34px;color:var(--amber);line-height:1;margin-bottom:12px}
.step h3{font-size:19px;margin-bottom:8px}
.step p{font-size:14.5px;color:var(--soft);margin:0}
@media(max-width:900px){
  .steps{grid-template-columns:1fr}
  .reqform{padding:26px 22px}
}


/* ---- story hero: align to the site container + readable over busy photos ---- */
/* the section is flex, so its .wrap shrank to its text and centred itself —
   width:100% makes it behave like every other container on the site */
.page-hero.ph-story .wrap{width:100%}
.page-hero.ph-story{min-height:460px}
.page-hero.ph-story::after{
  background:
    linear-gradient(90deg, rgba(16,23,37,.95) 0%, rgba(16,23,37,.88) 32%, rgba(16,23,37,.58) 62%, rgba(16,23,37,.3) 100%),
    linear-gradient(0deg, rgba(16,23,37,.6) 0%, rgba(16,23,37,0) 58%);
}
.page-hero.ph-story h1{max-width:820px;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.page-hero.ph-story p{max-width:600px;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.page-hero.ph-story .label{text-shadow:0 1px 10px rgba(0,0,0,.5)}
@media(max-width:900px){
  .page-hero.ph-story{min-height:340px}
  .page-hero.ph-story h1{max-width:none}
}


/* ---- Connection Program: four support categories (2x2) ---- */
.cats{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cat{display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start;background:#fff;
  border-radius:16px;padding:28px 30px;box-shadow:var(--v2-sh)}
.cat .ic{width:52px;height:52px;border-radius:14px;background:#eaf1fb;color:var(--teal);
  display:flex;align-items:center;justify-content:center}
.cat .ic svg{width:26px;height:26px}
.cat h3{font-size:20px;margin:2px 0 8px}
.cat p{font-size:15px;color:var(--soft);margin:0}
@media(max-width:900px){.cats{grid-template-columns:1fr}.cat{padding:22px 22px}}


/* ---- quote bands: photo runs full width, text sits on the content grid ----
   .wrap is --maxw wide with 28px padding, so content starts at (100% - --maxw)/2 + 28px.
   Percentage margins on these flex children resolve against the full-width section. */
.quote-bleed .qb{margin-left:max(28px, calc((100% - var(--maxw)) / 2 + 28px));padding:64px 0;max-width:min(960px, calc(100% - 56px))}
/* text now crosses most of the band, so the overlay stays dark further right; the field still shows at the edge */
.quote-bleed::after{background:linear-gradient(90deg,rgba(20,28,43,.9) 0%,rgba(20,28,43,.84) 50%,rgba(20,28,43,.66) 78%,rgba(20,28,43,.42) 100%)}
@media(max-width:900px){
  .quote-bleed .qb{margin-left:0;padding:48px 26px}
}

.quote-split{display:flex;align-items:stretch;background:var(--navy);min-height:420px}
.quote-split .qs-text{flex:0 0 auto;width:560px;max-width:calc(100% - 56px);
  margin-left:max(28px, calc((100% - var(--maxw)) / 2 + 28px));padding:64px 56px 64px 0;
  display:flex;flex-direction:column;justify-content:center}
.quote-split blockquote{font-family:'Fraunces',serif;font-style:italic;font-size:27px;line-height:1.45;color:#fff}
.quote-split cite{display:block;margin-top:18px;font-style:normal;font-size:12px;letter-spacing:2px;
  text-transform:uppercase;color:var(--amber);font-weight:700}
.quote-split .qs-img{flex:1 1 auto;min-width:0;position:relative}
.quote-split .qs-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
@media(max-width:900px){
  .quote-split{flex-direction:column;min-height:0}
  .quote-split .qs-img{order:-1;height:260px}
  .quote-split .qs-text{width:auto;max-width:none;margin-left:0;padding:38px 26px}
  .quote-split blockquote{font-size:21px}
}
/* home hero badge: room for "Massachusetts & New York" on two lines */
.hero-badge span{max-width:190px}
/* phones/tablets: badge sits top-left so the inset craft photo (bottom-right) never covers it */
@media(max-width:900px){.hero-badge{top:14px;bottom:auto}}

/* testimonials: quote cards + share box */
.tq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.tq{background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px 32px 30px;display:flex;flex-direction:column;box-shadow:var(--v2-sh)}
.tq .k{font-size:11.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--teal);margin-bottom:16px}
.tq h3{font-family:'Fraunces',serif;font-size:23px;line-height:1.3;color:var(--ink);margin-bottom:16px}
.tq h3::before{content:"“";color:var(--amber);margin-right:2px}
.tq h3::after{content:"”";color:var(--amber)}
.tq p{font-size:15.5px;line-height:1.7;color:var(--soft);margin-bottom:22px;flex:1}
.tq .by{border-top:1px solid var(--line);padding-top:16px;display:flex;align-items:center;gap:14px}
.tq .by img{height:34px;width:auto}
.tq .by b{display:block;font-size:14.5px;color:var(--ink)}
.tq .by span{font-size:13px;color:var(--soft)}
.share{margin-top:44px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--paper);border-radius:18px;padding:28px 34px}
.share h3{font-family:'Fraunces',serif;font-size:24px;color:var(--ink);margin-bottom:4px}
.share p{color:var(--soft);font-size:15.5px}
@media(max-width:900px){.tq-grid{grid-template-columns:1fr}.share{flex-direction:column;align-items:flex-start}}
/* stats band: phones/tablets - two equal columns that can shrink, and numbers sized to fit ("1,500+" overflowed at 62px) */
@media(max-width:900px){.impact .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.imp b{font-size:44px}}
@media(max-width:480px){.imp{padding:8px 14px}.imp:nth-child(odd){padding-left:0}.imp b{font-size:34px}}