/* foster.css — page-specific styles
   Auto-generated from preview-foster.html on push by
   tools/extract-preview-css.py. Edit the preview file,
   not this file directly. */

*{ box-sizing:border-box; }
/* ===== Nav (same minimal) ===== */
/* ===== Style-guide patterns ===== */
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:'Inter'; font-weight:700; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-d); margin-bottom:12px; }
.eyebrow::before{ content:""; width:24px; height:2px; background:var(--gold); }
.section-h2{ font-family:var(--slab); font-weight:800; font-size:clamp(40px,5vw,64px); line-height:1; letter-spacing:-.02em; margin:0 0 14px; color:var(--green-d); }
.section-h2 .accent{ font-family:'Fraunces', Georgia, serif; font-style:italic; font-weight:500; color:var(--green); }
.lede{ font-family:'Lora', Georgia, serif; font-style:italic; font-size:clamp(17px,1.5vw,20px); line-height:1.55; color:var(--ink-2); margin:0; max-width:50ch; }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:999px; font-family:'Inter'; font-weight:700; font-size:13.5px; letter-spacing:.06em; text-decoration:none; transition:background .2s ease, color .2s ease, transform .25s ease; }
.btn-primary{ background:var(--gold); color:var(--green-d); box-shadow:0 6px 22px rgba(228,178,91,.34); }
.btn-primary:hover{ background:var(--gold-d); color:var(--paper-w); transform:translateY(-2px); }
.btn-light{ background:transparent; border:1.5px solid var(--green-d); color:var(--green-d); }
.btn-light:hover{ background:var(--green-d); color:var(--paper-w); }
.btn svg{ width:14px; height:14px; }
/* ===== HERO ===== */
.foster-hero{
  position:relative; min-height:78vh;
  display:flex; align-items:flex-end;
  padding:64px var(--gutter) 84px;
  isolation:isolate; overflow:hidden;
  color:var(--paper-w);
}
.foster-hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  
}
.foster-hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0.5) 70%,rgba(0,0,0,0.85) 100%),linear-gradient(90deg,rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.1) 60%,rgba(0,0,0,0) 100%);
}
.foster-hero .container{ max-width:var(--maxw); margin:0 auto; width:100%; }
.foster-hero .eyebrow{ color:var(--gold-l); }
.foster-hero .eyebrow::before{ background:var(--gold); }
.foster-hero h1{
  font-family:var(--slab); font-weight:800;
  font-size:clamp(44px,6.4vw,90px); line-height:.98; letter-spacing:-.02em;
  margin:0 0 18px; max-width:18ch;
}
.foster-hero h1 .accent{ font-family:'Fraunces'; font-style:italic; font-weight:500; color:var(--gold-l); }
.foster-hero .lede{ color:rgba(251,246,231,.92); max-width:54ch; margin:0 0 14px; }
.foster-hero .lede strong{ color:var(--paper-w); font-weight:600; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.foster-hero .btn-light{ border-color:var(--paper-w); color:var(--paper-w); }
.foster-hero .btn-light:hover{ background:var(--paper-w); color:var(--green-d); }
.hero-meta{
  position:absolute; right:24px; bottom:24px; z-index:1;
  font-family:'Lora', Georgia, serif;
  font-style:italic; font-size:12px;
  color:rgba(251,246,231,.7);
}
.hero-meta .who{ color:var(--gold-l); font-weight:600; }
/* ===== MEANS ===== */
.foster-means{ background:var(--paper); padding:clamp(72px,9vw,120px) var(--gutter); }
.foster-means .container{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.6fr 1fr;
  gap:clamp(32px,4vw,64px); align-items:start;
  text-align:left;
}
.foster-means .means-text{ max-width:none; }
.foster-means h2{ text-align:left; max-width:22ch; margin:0 0 24px; }
.foster-means h2 .accent{ color:var(--green); }
.foster-means .body{ font-family:var(--slab); font-weight:500; font-size:clamp(17px,1.6vw,21px); line-height:1.65; color:var(--ink-2); margin:0; max-width:none; }
.foster-means .body em{ font-family:'Fraunces'; font-style:italic; color:var(--gold-d); font-weight:500; }
.story-video{
  max-width:720px; margin:36px auto 0;
  border-radius:22px; overflow:hidden;
  background:var(--paper-3);
  box-shadow:0 14px 38px rgba(40,40,30,.18);
  border:1px solid rgba(184,133,47,.20);
}
.foster-means .story-video{ margin:0; max-width:380px; }
.story-video video{ display:block; width:100%; height:auto; background:var(--green-d); }
.story-video figcaption{
  padding:14px 22px; text-align:left;
  font-family:'Lora', Georgia, serif; font-style:italic;
  font-size:14px; line-height:1.5; color:var(--ink-2);
  background:var(--paper-3);
  border-top:1px solid rgba(184,133,47,.18);
}
.story-video figcaption strong{
  display:block; margin-bottom:2px;
  font-family:var(--slab); font-style:normal; font-weight:700;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-d);
}
/* ===== PROVIDES — "What each side brings" ===== */
.foster-provides{ background:var(--paper-2); padding:clamp(72px,9vw,120px) var(--gutter); }
.foster-provides .container{ max-width:var(--maxw); margin:0 auto; }
.foster-provides .heading{ text-align:center; margin:0 0 48px; }
.foster-provides .heading .eyebrow{ display:inline-flex; }
.foster-provides .heading h2{ text-align:center; margin:0 auto; max-width:20ch; }
.foster-provides .heading h2 .accent{ color:var(--green); }
.provides-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:28px;
  position:relative;
}
.provides-grid::before{
  content:"+"; position:absolute;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:50%;
  background:var(--yellow); color:var(--green-d);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces'; font-style:italic; font-weight:500;
  font-size:34px; line-height:1;
  box-shadow:0 6px 18px rgba(237,202,102,.55), 0 0 0 8px var(--paper-2);
  z-index:2; pointer-events:none;
}
.provides-card{
  border-radius:18px; padding:38px 32px 32px;
  position:relative; isolation:isolate;
  box-shadow:0 4px 16px rgba(40,40,30,.10);
  transition:transform .25s ease, box-shadow .25s ease;
}
.provides-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 38px rgba(40,40,30,.18);
}
.provides-card.us{ background:var(--green-d); color:var(--paper-w); }
.provides-card.you{ background:var(--paper-3); color:var(--ink); }
.provides-card .role{
  display:inline-block; padding:5px 12px;
  border-radius:999px;
  font-family:'Inter'; font-weight:700; font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:14px;
}
.provides-card.us .role{ background:rgba(251,246,231,.15); color:var(--gold-l); }
.provides-card.you .role{ background:var(--paper-2); color:var(--gold-d); }
.provides-card h3{
  font-family:var(--slab); font-weight:800;
  font-size:28px; line-height:1.1; letter-spacing:-.02em;
  margin:0 0 18px;
}
.provides-card.us h3{ color:var(--paper-w); }
.provides-card.you h3{ color:var(--green-d); }
.provides-card h3 em{ font-family:'Fraunces'; font-style:italic; font-weight:500; }
.provides-card.us h3 em{ color:var(--gold-l); }
.provides-card.you h3 em{ color:var(--green); }
.provides-card ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:10px;
}
.provides-card li{
  display:flex; align-items:flex-start; gap:12px;
  font-family:var(--slab); font-size:15.5px; line-height:1.45;
}
.provides-card.us li{ color:rgba(251,246,231,.92); }
.provides-card.you li{ color:var(--ink-2); }
.provides-card li::before{
  content:""; flex-shrink:0; margin-top:8px;
  width:6px; height:6px; border-radius:50%;
}
.provides-card.us li::before{ background:var(--gold); }
.provides-card.you li::before{ background:var(--green); }
/* Stack the bold title above its description so the wording stops running
   together (was inline strong+span on one line). */
.provides-card li > div{ display:flex; flex-direction:column; gap:2px; }
.provides-card li strong{ font-weight:700; }
.provides-card li span{ display:block; font-size:13px; line-height:1.45; opacity:.8; }
/* ===== APPLY FORM (styled custom form → ASM via server-side proxy) ===== */
.foster-apply{ background:var(--paper-2); padding:clamp(72px,9vw,120px) var(--gutter); }
.foster-apply .container{ max-width:var(--maxw); margin:0 auto; }
.foster-apply .heading{ text-align:center; margin:0 0 40px; }
.foster-apply .heading .eyebrow{ display:inline-flex; }
.foster-apply .heading h2{ text-align:center; margin:0 auto 14px; max-width:22ch; }
.foster-apply .heading h2 .accent{ color:var(--green); }
.foster-apply .heading .lede{ margin:0 auto; max-width:50ch; text-align:center; }
.apply-frame{
  background:var(--paper-w); border-radius:18px;
  padding:40px 44px; max-width:780px; margin:0 auto;
  box-shadow:0 10px 30px rgba(40,40,30,.10);
}
.apply-frame .frame-eye{
  display:flex; align-items:center; gap:10px;
  font-family:'Inter'; font-weight:700; font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--green); margin-bottom:18px;
}
.apply-frame .frame-eye .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid .full{ grid-column:1 / -1; }
.form-grid label{ display:flex; flex-direction:column; gap:6px; font-family:'Inter'; font-weight:600; font-size:11px; letter-spacing:.10em; text-transform:uppercase; color:var(--green-d); }
.form-grid input, .form-grid textarea, .form-grid select{
  border:1px solid rgba(42,51,38,.18);
  background:var(--paper); border-radius:10px;
  padding:12px 14px; font-family:var(--slab); font-size:14.5px;
  color:var(--ink);
}
.form-grid textarea{ min-height:120px; resize:vertical; }
.form-grid input:focus, .form-grid textarea:focus, .form-grid select:focus{ outline:0; border-color:var(--gold); background:var(--paper-w); }
.apply-frame .actions{ display:flex; justify-content:center; margin-top:24px; }
.apply-frame .form-note{
  font-family:'Lora', Georgia, serif;
  font-style:italic; font-size:12.5px; line-height:1.5;
  color:#8a8470; margin:16px 0 0; text-align:center;
}
.form-fallback{ max-width:780px; margin:20px auto 0; }
.form-fallback summary{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Inter'; font-weight:700; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-d);
  padding:10px 0; border-bottom:1.5px solid var(--green-d);
}
.form-fallback summary::-webkit-details-marker{ display:none; }
.form-fallback summary::after{ content:"+"; font-family:'Fraunces'; font-style:italic; font-weight:500; font-size:18px; line-height:1; }
.form-fallback[open] summary::after{ content:"×"; font-style:normal; }
.form-fallback .iframe-wrap{ margin-top:18px; background:var(--paper-w); border-radius:14px; padding:8px; box-shadow:0 4px 16px rgba(40,40,30,.10); }
.form-fallback .iframe-mock{ background:#fdfdfb; border:1px solid rgba(42,51,38,.10); border-radius:10px; min-height:420px; padding:32px 28px; font-family:'Inter', sans-serif; font-size:13px; color:#5a5a4a; }
.form-fallback .iframe-mock h4{ font-family:Arial, Helvetica, sans-serif; font-weight:700; font-size:18px; margin:0 0 14px; color:#2a3326; }
.form-fallback .iframe-mock label{ display:block; font-size:12px; font-weight:600; margin:14px 0 4px; color:#5a5a4a; }
.form-fallback .iframe-mock input, .form-fallback .iframe-mock select{ width:100%; padding:8px 10px; border:1px solid #cccccc; border-radius:3px; font-family:Arial, sans-serif; font-size:13px; background:#fff; }
.form-fallback .iframe-mock button{ margin-top:18px; padding:10px 20px; background:#4a6b3f; color:#fff; border:0; border-radius:4px; cursor:pointer; font-family:Arial; font-size:13px; font-weight:600; }
.form-fallback .iframe-mock .asm-note{ margin-top:16px; padding-top:14px; border-top:1px solid #e0e0d0; font-family:'Lora', Georgia, serif; font-style:italic; font-size:12px; color:#888; }
/* ===== Lindsey trust quote ===== */
.foster-trust-quote{ background:var(--green-d); color:var(--paper-w); padding:clamp(60px,7vw,96px) var(--gutter); }
.foster-trust-quote .container{ max-width:780px; margin:0 auto; text-align:center; }
.foster-trust-quote blockquote{
  font-family:'Fraunces', Georgia, serif; font-weight:400;
  font-size:clamp(20px,2.1vw,28px); line-height:1.45;
  margin:14px 0 22px; color:var(--paper-w);
  padding:0; border:0; max-width:none;
}
.foster-trust-quote blockquote em{ font-style:italic; color:var(--gold-l); font-weight:500; }
.foster-trust-quote .attribution{
  font-family:'Inter'; font-weight:600; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(251,246,231,.72);
}
/* ===== Where (regions) ===== */
.foster-where{ background:var(--paper); padding:clamp(72px,9vw,120px) var(--gutter); }
.foster-where .container{ max-width:var(--maxw); margin:0 auto; }
.foster-where .heading{ text-align:center; margin:0 0 48px; }
.foster-where .heading .eyebrow{ display:inline-flex; }
.foster-where .heading h2{ text-align:center; margin:0 auto 14px; max-width:18ch; }
.foster-where .heading h2 .accent{ color:var(--gold-d); }
.foster-where .heading .lede,
.foster-where .heading > p{ margin:0 auto; max-width:50ch; text-align:center; }
.regions{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.region-card{
  position:relative; display:block;
  aspect-ratio:5/4; border-radius:14px; overflow:hidden;
  text-decoration:none; color:inherit;
  isolation:isolate;
  box-shadow:0 6px 22px rgba(40,40,30,.14);
  transition:transform .25s ease, box-shadow .25s ease;
}
.region-card:hover{ transform:translateY(-3px); box-shadow:0 18px 38px rgba(40,40,30,.22); }
.region-card .img{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .55s ease; z-index:0; }
.region-card:hover .img{ transform:scale(1.04); }
.region-card .band{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:74px 24px 22px;
  background:linear-gradient(180deg, rgba(30,58,42,0) 0%, rgba(30,58,42,.45) 30%, rgba(30,58,42,.92) 65%, var(--green-d) 82%, var(--green-d) 100%);
  color:var(--paper-w);
}
.region-card .pin,
.region-card .num{ font-family:'Inter'; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-l); font-weight:700; margin-bottom:8px; display:inline-block; }
.region-card h3{ font-family:'Fraunces'; font-weight:600; font-size:26px; line-height:1.08; margin:0 0 8px; color:var(--paper-w); }
.region-card h3 em{ font-style:italic; color:var(--gold-l); font-weight:500; }
.region-card p{ font-family:'Lora'; font-style:italic; font-size:13px; line-height:1.5; margin:0; color:rgba(251,246,231,.92); }
.region-card .ar{
  position:absolute; right:18px; bottom:18px;
  width:36px; height:36px; border-radius:50%;
  background:var(--yellow); color:var(--green-d);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:16px;
  box-shadow:0 4px 12px rgba(30,58,42,.30);
}
.region-card:hover .ar{ background:var(--gold); transform:translateX(2px); }
/* ===== Debbie's story (upgraded) ===== */
.foster-debbie{ background:var(--paper); padding:clamp(72px,9vw,120px) var(--gutter); }
.foster-debbie .container{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:center; }
.foster-debbie .photo{ border-radius:14px; overflow:hidden; aspect-ratio:3/2; background-size:cover; background-position:center; box-shadow:0 10px 30px rgba(30,58,42,.22); }
.foster-debbie h2 .accent{ color:var(--gold-d); }
.foster-debbie .body p{ font-family:var(--slab); font-weight:500; font-size:16px; line-height:1.65; color:var(--ink-2); margin:0 0 16px; }
.foster-debbie .body p em{ font-family:'Fraunces'; font-style:italic; color:var(--green); font-weight:500; }
.roster{
  background:var(--paper-2); border-radius:12px;
  padding:16px 20px; margin-top:8px;
  font-family:'Lora'; font-style:italic; font-size:13.5px; line-height:1.55; color:var(--ink-2);
}
.roster strong{ display:block; font-family:'Inter'; font-style:normal; font-weight:700; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-d); margin-bottom:6px; }
/* ===== "Ifnot" reassurance ===== */
.foster-ifnot{ background:var(--paper-2); padding:clamp(72px,9vw,120px) var(--gutter); }
.foster-ifnot .container{ max-width:780px; margin:0 auto; }
.foster-ifnot .ifnot-card{
  background:var(--paper-3); border-radius:28px;
  padding:clamp(44px,5vw,68px) clamp(30px,4vw,56px);
  border:1px solid rgba(184,133,47,.22);
  box-shadow:0 14px 38px rgba(40,40,30,.10);
  text-align:center; position:relative;
}
.foster-ifnot .ifnot-card::before{
  content:""; display:block;
  width:56px; height:4px; border-radius:999px;
  background:var(--gold); margin:0 auto 26px;
}
.foster-ifnot h2{ text-align:center; margin:0 auto 22px; max-width:18ch; }
.foster-ifnot h2 .accent{ color:var(--gold-d); }
.foster-ifnot .body{ max-width:54ch; margin:0 auto; }
.foster-ifnot .body p{ font-family:var(--slab); font-weight:500; font-size:16.5px; line-height:1.65; color:var(--ink-2); margin:0 0 14px; }
.foster-ifnot .body p:last-child{ margin-bottom:0; }
.foster-ifnot .body p em{ font-family:'Fraunces'; font-style:italic; color:var(--green); font-weight:500; }
/* ===== FAQ (same as adopt) ===== */
.foster-faq{ background:var(--green-d); padding:clamp(72px,9vw,120px) var(--gutter); color:var(--paper-w); }
.foster-faq .container{ max-width:820px; margin:0 auto; }
.foster-faq .heading{ text-align:center; margin:0 0 40px; }
.foster-faq .heading h2{ text-align:center; margin:0 auto; max-width:22ch; color:var(--paper-w); }
.foster-faq .heading h2 .accent{ color:var(--gold-l); }
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{
  background:var(--paper-3); border-radius:18px;
  padding:0; overflow:hidden;
  border:1px solid transparent;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.faq-item:hover{
  background:var(--paper-2);
  border-color:var(--gold);
  box-shadow:0 8px 22px rgba(0,0,0,.22);
  transform:translateY(-1px);
}
.faq-item[open]{
  background:var(--paper-2);
  border-color:var(--gold);
  box-shadow:0 10px 26px rgba(0,0,0,.24);
  transform:none;
}
.faq-item:hover summary .tg{ background:var(--gold); color:var(--green-d); }
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:22px 28px;
  font-family:var(--slab); font-weight:700; font-size:18px; line-height:1.3;
  color:var(--green-d);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .tg{
  flex-shrink:0; width:34px; height:34px; border-radius:50%;
  background:var(--green-d); color:var(--gold-l);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces'; font-style:italic; font-weight:500; font-size:22px; line-height:1;
  transition:background .25s ease, color .25s ease, transform .3s ease;
}
.faq-item[open] summary .tg{ background:var(--yellow); color:var(--green-d); transform:rotate(45deg); box-shadow:0 3px 10px rgba(237,202,102,.45); }
.faq-item .a{ padding:0 28px 22px; font-family:var(--slab); font-weight:500; font-size:15.5px; line-height:1.65; color:var(--ink-2); }
.faq-item .a p{ margin:0 0 12px; }
.faq-item .a p:last-child{ margin:0; }
.faq-item .a em{ font-family:'Fraunces'; font-style:italic; color:var(--gold-d); font-weight:500; }
/* ===== Cross-sell to SPONSOR ===== */
.cross-sell{ background:var(--paper); padding:clamp(60px,7vw,90px) var(--gutter); }
.cross-sell .container{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; }
.cross-sell .photo{ aspect-ratio:5/4; border-radius:14px; background-size:cover; background-position:center; box-shadow:0 10px 30px rgba(30,58,42,.22); }
.cross-sell .body .eyebrow{ display:inline-flex; color:var(--green-d); }
.cross-sell .body .eyebrow::before{ background:var(--green-d); }
.cross-sell .body h2{ margin:0 0 14px; text-wrap:balance; }
.cross-sell .body h2 .accent{ color:var(--green); display:inline-block; }
.cross-sell .body p{ font-family:var(--slab); font-weight:500; font-size:16.5px; line-height:1.6; color:var(--green-d); margin:0 0 22px; max-width:42ch; }
.cross-sell .body p em{ font-family:'Fraunces'; font-style:italic; color:var(--gold-d); font-weight:500; }
/* ===== Trust ===== */
.trust{ background:var(--gold); padding:22px var(--gutter); font-family:var(--slab); font-weight:500; font-size:14.5px; color:var(--green-d); }
.trust .container{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; }
.trust svg{ width:22px; height:22px; opacity:.9; color:var(--green-d); flex-shrink:0; }
.trust .sep{ width:6px; height:6px; border-radius:50%; background:var(--green-d); opacity:.45; display:inline-block; }
.trust strong{ font-weight:700; }
@media (max-width:980px){
  .foster-means .container{ grid-template-columns:1fr; gap:32px; }
  .foster-means .story-video{ max-width:520px; margin:0 auto; }
  .provides-grid{ grid-template-columns:1fr; }
  .provides-grid::before{ display:none; }
  .regions{ grid-template-columns:1fr; }
  .foster-debbie .container{ grid-template-columns:1fr; gap:28px; }
  .foster-debbie .photo{ aspect-ratio:3/2; }
  .cross-sell .container{ grid-template-columns:1fr; gap:24px; }
  .nav-links{ display:none; }

  /* ===== Hero mobile restructure (mirrors home-preview-v2 spec, 2026-05-31)
     Photo becomes a contained 4/3 block at the top with the H1 overlaid;
     the lede + buttons flow on paper BELOW the photo, flat, no cream box.
     Fixes the "floating cream rectangle stamped on the photo" eyesore.
     Dual selectors: the LIVE foster page renders .container/.hero-actions/
     .hero-meta; the refactored template uses .foster-hero-content/
     .foster-hero-actions/.foster-hero-meta. Cover both. */
  .foster-hero{
    display:flex; flex-direction:column;
    min-height:0; height:auto;
    padding:0; background:var(--paper);
    position:relative; overflow:hidden;
  }
  /* !important needed: the base .foster-hero-bg{position:absolute;z-index:-2}
     rule sits later in this file, so without it source order wins and the
     image collapses / hides behind the paper background. */
  .foster-hero-bg{
    position:relative !important; inset:auto !important;
    z-index:auto !important;
    width:100%; aspect-ratio:4/3; height:auto !important;
    order:1; flex:0 0 auto;
  }
  .foster-hero-bg img{
    position:absolute !important; inset:0 !important;
    width:100%; height:100% !important;
    object-fit:cover; object-position:center 30%;
  }
  .foster-hero .container,
  .foster-hero .foster-hero-content{
    position:static; inset:auto;
    padding:0; max-width:100%; width:100%;
    margin:0;
    background:var(--paper); color:var(--ink);
    order:2; flex:1 1 auto;
  }
  .foster-hero-eyebrow{ display:none; }
  /* H1 centred over the image */
  .foster-hero .container h1,
  .foster-hero .foster-hero-content h1{
    position:absolute; top:37.5vw;
    left:0; right:0; transform:translateY(-50%);
    margin:0; padding:0 24px; max-width:none;
    text-align:center; color:var(--paper-w);
    font-size:clamp(26px,7vw,38px); line-height:1.1;
    text-shadow:0 2px 14px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.5);
    z-index:3;
  }
  .foster-hero h1 .accent,
  .foster-hero h1 span{ color:var(--gold-l); }
  /* Lede on paper, dark text, centred */
  .foster-hero .lede{
    margin:0; padding:22px 22px 8px; max-width:none;
    background:var(--paper); color:#4a4a3d;
    font-size:14.5px; line-height:1.5; text-align:center;
  }
  .foster-hero .lede strong{ color:var(--ink); }
  /* Buttons flat on paper, centred, no container background */
  .foster-hero .hero-actions,
  .foster-hero .foster-hero-actions{
    margin:0; padding:0 22px 24px;
    background:var(--paper);
    display:flex; flex-direction:row; flex-wrap:wrap;
    gap:10px; align-items:center; justify-content:center; width:100%;
  }
  .foster-hero .hero-actions .btn,
  .foster-hero .foster-hero-actions .btn{ flex:0 0 auto; padding:12px 20px; font-size:13px; }
  .foster-hero .hero-actions .btn-light,
  .foster-hero .foster-hero-actions .btn-light{
    background:transparent;
    border:1.5px solid var(--green-d); color:var(--green-d);
  }
  .foster-hero .hero-actions .btn-light:hover,
  .foster-hero .foster-hero-actions .btn-light:hover{ background:var(--green-d); color:var(--paper-w); }
  /* Caption pill anchored to the bottom of the photo */
  .foster-hero .hero-meta,
  .foster-hero .foster-hero-meta{
    position:absolute; top:calc(75vw - 34px);
    left:50%; transform:translateX(-50%);
    right:auto; bottom:auto;
    margin:0; padding:5px 14px;
    background:rgba(0,0,0,.34);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    border-radius:999px;
    font-family:'Lora',Georgia,serif; font-style:italic; font-size:11px;
    color:rgba(251,246,231,.92); z-index:3;
    display:inline-flex; gap:5px; white-space:nowrap;
  }
  .foster-hero .hero-meta .who,
  .foster-hero .foster-hero-meta .who{ color:var(--gold-l); font-weight:600; }
}
/* ===== M10 — multi-step wizard (mirrors what will ship to global.css) ===== */
/* Checkbox-group field (typeoffoster, gdprcontactoptin) */
.pa-checkgroup{
  border:1px solid rgba(42,51,38,.18); border-radius:10px;
  padding:14px 16px; background:var(--paper);
  display:flex; flex-direction:column; gap:8px;
}
.pa-checkgroup .legend{
  font-family:'Inter', sans-serif; font-weight:600; font-size:11px;
  letter-spacing:.10em; text-transform:uppercase; color:var(--green-d);
  margin-bottom:4px;
}
.pa-checkgroup label{
  flex-direction:row; align-items:center; gap:10px;
  font-family:var(--slab); font-size:14.5px; color:var(--ink);
  font-weight:400; letter-spacing:0; text-transform:none;
}
.pa-checkgroup input[type="checkbox"]{
  width:18px; height:18px; padding:0; margin:0;
  accent-color:var(--green); cursor:pointer;
}
@media (max-width:680px){
  .pa-wizard-progress ol{ grid-template-columns:repeat(2, 1fr); gap:6px 8px; }
  .pa-wizard-progress li{ font-size:10px; }
}
/* ===== Mobile responsiveness fixes (audit 2026-05-30) ===== */
@media (max-width:640px){
  /* Bump small decorative microcopy on region cards to readable floor */
  .region-card p{ font-size:14px; }
  /* Ensure region-card "arrow" badge meets touch target floor (it's inside an <a>) */
  .region-card .ar{ width:44px; height:44px; min-width:44px; min-height:44px; font-size:18px; }
  /* Form action button — ensure adequate tap area */
  .apply-frame .actions .btn,
  .apply-frame .actions button{ min-height:44px; }
  /* FAQ summary toggle target */
  .faq-item summary{ min-height:44px; }
  .faq-item summary .tg{ width:38px; height:38px; min-width:38px; min-height:38px; }
  /* Form fallback summary tap area */
  .form-fallback summary{ min-height:44px; padding-top:12px; padding-bottom:12px; }
}

/* Live markup uses <div class="X-hero-bg"><img></div> instead of CSS bg.
   These rules size the image to fill the hero. */
.foster-hero-bg{ position:absolute; inset:0; z-index:-2; }
.foster-hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; }

/* ASM "standard application" fallback (Matt, 3 Jun 2026 pm).
   ASM only paints its grey (#aaa) page background at widths above ~500px; at
   <=480px it switches to a clean, full-width stacked layout with a transparent
   background. So we constrain the iframe to ~470px and centre it in a tidy
   white rounded frame: no grey margins, form centred, easier to read. The form
   is long, so it scrolls inside the framed box. */
.form-fallback{ max-width:760px; margin:20px auto 0; }
.form-fallback .iframe-wrap{ background:#fff !important; padding:0 !important; border:1px solid var(--line, #d8d2c4); border-radius:14px; box-shadow:0 8px 28px rgba(40,40,30,.10); overflow:hidden; margin-top:14px; }
.form-fallback .iframe-wrap iframe{ display:block; width:100%; height:900px; border:0; background:#fff; }
/* Desktop: ASM paints a grey (#aaa) body with the white form at ~68% width,
   centred, so there are grey gutters. Enlarge the iframe and shift it left so
   the overflow:hidden wrap shows only the white form and crops the grey. Below
   560px ASM serves its own full-width, grey-free mobile layout, so no crop. */
@media (min-width:560px){
  .form-fallback .iframe-wrap iframe{ width:147%; margin-left:-23.5%; }
}

/* Download a printable PDF of the application (sits above the iframe fallback). */
.form-download{ margin:22px 0 2px; text-align:center; }
.form-download-link{ display:inline-flex; align-items:center; gap:9px; font-family:'Inter', sans-serif; font-size:.92rem; font-weight:600; line-height:1.2; color:var(--ink, #2b2b27); text-decoration:none; background:var(--paper-w, #fff); border:1px solid var(--line, #d8d2c4); border-radius:999px; padding:11px 20px; transition:background .16s ease, border-color .16s ease, color .16s ease; }
.form-download-link svg{ flex:none; color:var(--gold, #c79a3b); }
.form-download-link:hover{ background:var(--paper-2, #f6f0e3); border-color:var(--gold, #c79a3b); color:var(--green, #2f4a39); }
.form-download-link:hover svg{ color:var(--green, #2f4a39); }

/* Branded thank-you shown when ASM redirects back with ?submitted=1. */
.pa-apply-thanks{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; max-width:560px; margin:10px auto 4px; padding:32px 28px; background:var(--paper-w, #fff); border:1px solid var(--line, #d8d2c4); border-radius:16px; box-shadow:0 6px 22px rgba(40,40,30,.08); }
.pa-apply-thanks-icon{ display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:999px; background:var(--green, #2f4a39); color:#fff; }
.pa-apply-thanks h3{ margin:8px 0 0; font-family:'Fraunces', Georgia, serif; color:var(--green, #2f4a39); font-size:1.5rem; line-height:1.2; }
.pa-apply-thanks p{ margin:0; color:var(--ink, #2b2b27); max-width:46ch; }
/* The [hidden] attr loses to the wizard's own display rule, so force it. */
.pa-asm-form[hidden], .pa-wizard-progress[hidden]{ display:none !important; }