/* ============================================================
   BEN CALF ROBE SOCIETY · main stylesheet
   How the site looks. The words live in content/*.json.
   The look follows the Society's brochures: navy, red, tan
   and cream blocks, bold Oswald headings, beadwork trim.
   ============================================================ */

:root{
  /* the Society's web palette: navy, red, tan, cream */
  --blue:#0E243C;   --red:#C43131;   --tan:#D9C0A2;   --cream:#FFFAEC;
  --slate:#24415F;  /* secondary navy used in the ribbon waves */
  --card:#FFFDF6;   /* warm near-white for cards */
  /* --gold and --wyellow are the tan; the rules below use those names */
  --gold:#D9C0A2;   --ink:#17242F;   --muted:#5b6470;  --white:#fff;
  --wred:#C43131;   --wyellow:#D9C0A2; --wblue:#24415F;
  --bluedk:#081A2E;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter','Source Sans 3',sans-serif;color:var(--ink);background:var(--cream);line-height:1.6}
h1,h2,h3,h4{font-family:'Oswald',sans-serif;font-weight:600;line-height:1.05;text-transform:uppercase;letter-spacing:.5px}
img{max-width:100%;display:block}
a{color:var(--red)}
.wrap{max-width:1180px;margin:0 auto;padding:0 26px}

/* Scroll-reveal: elements ease into place as they enter view (main.js adds
   .in). Content is hidden only once the inline script in <head> has added
   the 'js' class, so a page whose script never runs stays fully visible. */
.reveal{transition:opacity .7s ease,transform .8s cubic-bezier(.16,.68,.28,1)}
.js .reveal{opacity:0}
.js .reveal:not(.in){transform:translateY(28px)}            /* default: rise up   */
.js .reveal.from-left:not(.in){transform:translateX(-46px)} /* slide from left   */
.js .reveal.from-right:not(.in){transform:translateX(46px)} /* slide from right  */
.js .reveal.zoom:not(.in){transform:scale(.9)}              /* gently scale up    */
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.12s}                        /* stagger helpers   */
.js .reveal.d2{transition-delay:.24s}
.js .reveal.d3{transition-delay:.36s}
.js .reveal.d4{transition-delay:.48s}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1!important;transform:none!important;transition:none!important}}
/* clip sideways overflow so slide-in animations never flash a horizontal scrollbar
   (header is outside #main, so its sticky behaviour is unaffected) */
#main{overflow-x:clip}

.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--ink);padding:10px 16px;z-index:200;font-family:'Oswald'}
.skip:focus{left:8px;top:8px}

/* Ribbon wave along the top edge of a navy section, drawn at its natural
   aspect. Its cream shape meets the section above and its navy base meets
   the section below. */
.wave-edge{background:var(--blue);line-height:0;font-size:0;margin-bottom:-1px}
.wave-edge img{display:block;width:100%;height:auto}

/* corner wave: a ribbon sweeps in from a corner of a solid section. It stays
   small and in the far corner, clear of the centred buttons, and is hidden
   on narrow screens where the buttons fill the width. */
.has-corner{position:relative;overflow:hidden}
.has-corner>*:not(.corner-wave){position:relative;z-index:1}
.corner-wave{position:absolute;right:0;bottom:0;width:clamp(150px,22%,340px);z-index:0;pointer-events:none}
@media(max-width:860px){.corner-wave{display:none}}

/* ---------- sticky shrinking header (utility bar + nav together) ---------- */
.site-header{position:sticky;top:0;z-index:60}

/* utility bar */
.util{background:var(--ink);color:#e8e2d5;font-size:.8rem}
.util .wrap{display:flex;justify-content:space-between;align-items:center;padding:7px 26px;flex-wrap:wrap;gap:6px;transition:padding .25s ease}
.util a{color:#e8e2d5;text-decoration:none}
.utilright{display:flex;align-items:center;gap:15px}
.usocial{display:inline-flex;color:#e8e2d5;transition:color .2s}
.usocial:hover{color:var(--wyellow)}
.usocial svg{width:17px;height:17px;display:block}
/* top-bar safety exit */
.util .safe{color:#fff;font-weight:700;background:var(--wred);border:0;font-family:'Oswald';font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;padding:5px 12px;border-radius:4px;display:inline-flex;align-items:center;gap:5px}
.util .safe:hover{background:#b3231f}
/* always-visible floating safety exit, bottom left */
.safe-float{position:fixed;left:16px;bottom:16px;z-index:80;background:var(--wred);color:#fff;border:0;border-radius:8px;padding:11px 16px;font-family:'Oswald';font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;display:flex;align-items:center;gap:8px;box-shadow:0 6px 20px rgba(0,0,0,.3);transition:background .2s,transform .16s}
.safe-float:hover{background:#b3231f;transform:translateY(-2px)}
.safe-float svg{display:block}
@media(max-width:560px){.safe-float{padding:9px 13px;font-size:.8rem;left:12px;bottom:12px}}

/* nav (sits inside .site-header) */
nav{background:var(--cream);border-bottom:3px solid var(--blue)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:9px 26px;transition:padding .25s ease}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.brand img{height:64px;width:auto;transition:height .25s ease}

/* shrink state: main.js adds .shrink to #siteHeader once the page scrolls */
.site-header.shrink nav .wrap{padding-top:4px;padding-bottom:4px}
.site-header.shrink .brand img{height:46px}
.site-header.shrink .util .wrap{padding-top:3px;padding-bottom:3px}
.brand .bt{font-family:'Oswald';font-size:1.18rem;font-weight:700;color:var(--blue);line-height:1;text-transform:uppercase}
.brand .bs{display:block;font-family:'Source Sans 3';font-size:.64rem;letter-spacing:.2em;color:var(--red);font-weight:600;margin-top:3px;text-transform:uppercase}
.navlinks{display:flex;gap:23px;align-items:center}
.navlinks a{text-decoration:none;font-family:'Oswald';font-size:.92rem;font-weight:500;color:var(--ink);text-transform:uppercase;letter-spacing:.4px;transition:color .2s}
.navlinks a:hover,.navlinks a:focus{color:var(--red)}
.donate{background:var(--red);color:#fff!important;padding:9px 20px;border-radius:3px;font-weight:600}
.donate:hover{background:#a52f22}
.menubtn{display:none;background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--blue)}

/* ---------- buttons ---------- */
.btns{display:flex;gap:13px;flex-wrap:wrap}
.btn{padding:14px 30px;border-radius:3px;text-decoration:none;font-family:'Oswald';font-weight:500;font-size:.95rem;text-transform:uppercase;letter-spacing:.5px;display:inline-block;transition:transform .16s,background .2s;cursor:pointer;border:0}
.btn:hover{transform:translateY(-2px)}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:#a52f22}
.btn-gold{background:var(--cream);color:var(--blue)}.btn-gold:hover{background:#d8cbae}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid #fff}
.btn-ghost:hover{background:#fff;color:var(--blue)}
.btn-blue{background:var(--blue);color:#fff}.btn-blue:hover{background:var(--bluedk)}

/* ---------- hero banner + CTA strip ---------- */
.hero-banner{background:var(--bluedk);position:relative;overflow:hidden}
/* the header's photos, stacked; the one showing has .on, and the next fades
   in over the last (.was) so the band never dims between them */
.hero-slides{position:relative;z-index:0;height:clamp(250px,40vw,820px)}
.hero-slide{position:absolute;inset:0;opacity:0;z-index:0;transition:opacity 1.8s ease}
.hero-slide.on{opacity:1;z-index:2}
.hero-slide.was{opacity:1;z-index:1}
.hero-banner img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 50%;filter:brightness(.94) contrast(1.03)}
/* a photo whose subject sits low in the frame keeps its bottom edge; one
   with its sky and heads near the top is framed high */
.hero-slide.low img{object-position:center 100%}
.hero-slide.up img{object-position:center 20%}
@media(prefers-reduced-motion:reduce){.hero-slide{transition:none}}
/* headline written over the hero photo; gradient fades into the blue band below */
.hero-words{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;text-align:center;pointer-events:none;background:linear-gradient(to top,rgba(14,36,60,1) 0%,rgba(14,36,60,.92) 5%,rgba(14,36,60,.74) 12%,rgba(14,36,60,.54) 20%,rgba(14,36,60,.36) 30%,rgba(14,36,60,.22) 42%,rgba(14,36,60,.12) 55%,rgba(14,36,60,.05) 70%,rgba(14,36,60,.01) 85%,rgba(14,36,60,0) 100%)}
.hero-words .inner{padding:0 22px 26px}
.hero-words h1{font-family:'Oswald';font-weight:700;text-transform:uppercase;color:#fff;font-size:clamp(2.1rem,5.4vw,4rem);line-height:1.04;letter-spacing:.015em;text-shadow:0 2px 6px rgba(0,0,0,.45),0 4px 28px rgba(0,0,0,.55);margin:0}
.hero-words .rule{display:block;height:4px;width:74px;background:var(--red);margin:16px auto 0;border-radius:2px}
.hero-cta{background:var(--blue);color:#fff;text-align:center;padding:34px 26px 40px}
.hero-cta .eyebrow{display:inline-block;background:transparent;color:var(--gold);border:1px solid var(--gold);font-family:'Oswald';font-size:.72rem;letter-spacing:.16em;padding:6px 15px;border-radius:2px;margin-bottom:16px;text-transform:uppercase;font-weight:600}
.hero-cta .lead{font-size:1.12rem;font-weight:300;max-width:42rem;margin:0 auto 22px;opacity:.96}
.hero-cta .btns{justify-content:center}

/* ---------- mission strip ---------- */
.mission{background:var(--tan);position:relative;padding:54px 0;text-align:center}
.mission .ic{font-size:1.6rem;margin-bottom:8px}
.mission p{font-family:'Oswald';font-weight:400;font-size:clamp(1.2rem,2.6vw,1.85rem);color:var(--blue);max-width:50rem;margin:0 auto;text-transform:none;line-height:1.32}
.mission p b{color:var(--red)}

/* ---------- generic section + heading ---------- */
.section{padding:74px 0}
.sec-head{text-align:center;max-width:44rem;margin:0 auto 46px}
.sec-head .kicker{font-family:'Oswald';color:var(--red);font-size:.92rem;letter-spacing:.2em;font-weight:600;display:block;margin-bottom:10px}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem);color:var(--blue);font-weight:700}
.sec-head p{margin-top:12px;color:var(--muted)}
.sec-head .line{width:70px;height:4px;background:var(--red);margin:14px auto 0}

/* ---------- Our Story (about / namesake) ---------- */
.story{background:var(--cream)}
.story .grid{max-width:780px;margin:0 auto;padding:64px 26px;text-align:center}
.story .copy{max-width:560px;margin:0 auto}
.story .kicker{font-family:'Oswald';color:var(--red);font-size:.92rem;letter-spacing:.2em;font-weight:600;display:block;margin-bottom:10px}
.story h2{font-size:clamp(1.8rem,3.4vw,2.5rem);color:var(--blue);margin-bottom:18px}
.story p{margin-bottom:14px;text-align:left}
.story .photo{position:relative;height:400px;max-width:760px;margin:0 auto 38px;background-size:cover;background-position:center;border-radius:16px;overflow:hidden}
.story .photo::before{content:"";position:absolute;inset:0;background:var(--blue);opacity:.12}

/* ---------- audience paths (photo cards) ---------- */
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pcard{position:relative;color:#fff;border-radius:7px;overflow:hidden;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;text-decoration:none;transition:transform .2s;box-shadow:0 6px 22px rgba(0,0,0,.12)}
.pcard:hover{transform:translateY(-6px)}
.pcard .bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;transition:transform .4s}
.pcard:hover .bg{transform:scale(1.06)}
.pcard::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(16,37,74,.15) 0%,rgba(16,37,74,.55) 55%,rgba(16,37,74,.92) 100%)}
.pcard.b::after{background:linear-gradient(180deg,rgba(142,36,24,.15) 0%,rgba(142,36,24,.55) 55%,rgba(142,36,24,.92) 100%)}
.pcard.c::after{background:linear-gradient(180deg,rgba(154,114,9,.18) 0%,rgba(120,80,5,.6) 55%,rgba(80,52,3,.93) 100%)}
.pcard>*{position:relative;z-index:2}
.pcard h3{font-size:1.5rem;margin-bottom:6px}
.pcard p{font-size:.92rem;opacity:.95;font-weight:300;margin-bottom:10px}
.pcard .go{font-family:'Oswald';font-size:.8rem;letter-spacing:.1em;font-weight:600;text-transform:uppercase}

/* ---------- programs grid (brochure tiles) ---------- */
.programs{background:var(--blue);color:#fff;position:relative}
.programs .sec-head h2{color:#fff}
/* beadwork trim along the bottom of the navy Programs band */
.programs::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;z-index:2;pointer-events:none;background:url("../img/design-kit/beadwork-strip.png") repeat-x center;background-size:auto 16px}
.programs .sec-head .kicker{color:var(--wyellow)}
.programs .sec-head p{color:#cdd7e6}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.prog{display:flex;flex-direction:column;background:var(--cream);border-radius:9px;overflow:hidden;text-decoration:none;transition:transform .18s,box-shadow .2s;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.prog:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(0,0,0,.30)}
.prog .ph{height:140px;background-size:cover;background-position:center}
.prog .pbody{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.prog .tag{align-self:flex-start;display:inline-block;font-family:'Oswald';font-size:.7rem;letter-spacing:.1em;font-weight:600;padding:3px 9px;border-radius:2px;margin-bottom:10px;text-transform:uppercase;background:var(--blue);color:#fff}
.prog .tag.free{background:var(--gold);color:var(--ink)}
.prog .tag.fee{background:var(--red);color:#fff}
.prog h3{font-size:1.12rem;margin-bottom:7px;color:var(--blue);line-height:1.12}
.prog p{font-size:.88rem;color:var(--muted);font-weight:400;flex:1}
.prog .more{margin-top:12px;font-family:'Oswald';font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--red);font-weight:600}
.programs .viewall{text-align:center;margin-top:38px}

/* ---------- Rooted in Culture strip ---------- */
.culture{background:var(--tan)}
/* On tan the brand red and the muted grey fall under 4.5:1, so this band
   takes a deeper red and a darker grey. */
.culture .sec-head .kicker{color:#962020}
.culture .sec-head p{color:#434b56}
.culture .row{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.culture .row figure{position:relative;aspect-ratio:1/1;overflow:hidden}
.culture .row img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.culture .row figure:hover img{transform:scale(1.07)}
/* The fade is dark enough to keep the white caption readable over the
   brightest of the four photos, and the shadow covers a lighter photo later. */
.culture .row figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px;color:#fff;font-family:'Oswald';text-transform:uppercase;letter-spacing:.06em;font-size:.92rem;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.7) 35%,rgba(0,0,0,.84));text-shadow:0 1px 3px rgba(0,0,0,.6)}

/* ---------- Pow Wow feature ---------- */
.powwow{position:relative;color:#fff;overflow:hidden;background:var(--bluedk)}
.powwow .bg{position:absolute;inset:0;background-size:cover;background-position:center 30%;z-index:0;opacity:.5}
.powwow::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(16,37,74,.92),rgba(16,37,74,.55))}
.powwow .wrap{position:relative;z-index:2;padding:84px 26px}
.powwow .inner{max-width:560px}
.powwow .kicker{font-family:'Oswald';color:var(--wyellow);font-size:.92rem;letter-spacing:.2em;font-weight:600;display:block;margin-bottom:10px}
.powwow h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin-bottom:14px}
.powwow p{font-size:1.06rem;font-weight:300;opacity:.96;margin-bottom:24px}

/* ---------- impact stats ---------- */
.impact{background:var(--red);color:#fff;text-align:center;padding:46px 0}
.impact .row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.impact .n{font-family:'Oswald';font-weight:700;font-size:2.6rem;line-height:1;color:var(--cream)}
.impact .l{font-size:.92rem;opacity:.95;margin-top:6px;text-transform:uppercase;letter-spacing:.08em;font-family:'Oswald'}

/* ---------- courses / events split ----------
   Two halves, red on the left and tan on the right: courses (dated intakes,
   from courses.json) and events (community gatherings, from events.json).
   Each half reads its own file, so nothing appears twice in the band. */
.en{display:grid;grid-template-columns:1fr 1fr;gap:0}
.en .courses{background:var(--red);color:#fff;padding:64px 54px}
.en .events{background:var(--tan);color:var(--ink);padding:64px 54px}
.en h2{font-size:1.95rem;margin-bottom:10px}
.en .courses h2{color:#fff}.en .events h2{color:var(--blue)}
.en .kicker{font-family:'Oswald';font-size:.88rem;letter-spacing:.18em;font-weight:600;display:block;margin-bottom:8px}
.en .courses .kicker{color:var(--cream)}.en .events .kicker{color:#962020}
.eitem{padding:16px 0;border-bottom:1px solid rgba(0,0,0,.12)}
.en .courses .eitem{border-color:rgba(255,255,255,.25)}
.eitem .d{font-family:'Oswald';font-size:.78rem;opacity:.85;letter-spacing:.05em}
.en .courses .eitem .d{opacity:1}
.eitem h3{font-size:1.08rem;margin:3px 0;text-transform:none;font-weight:600}
.eitem p{font-size:.85rem;opacity:.9;font-weight:300}

/* ---------- donate CTA ---------- */
.cta{position:relative;background:var(--blue) url("../img/donate-bg.jpg") center/cover;color:#fff;text-align:center;padding:76px 26px;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(16,37,74,.88),rgba(16,37,74,.84))}
/* beadwork trim on the dark donate band */
.cta::after{content:"";position:absolute;top:0;left:0;right:0;height:16px;z-index:2;pointer-events:none;background:url("../img/design-kit/beadwork-strip.png") repeat-x center;background-size:auto 16px}
.cta .wrap{position:relative;z-index:1}
.cta h2{font-size:2.2rem;margin-bottom:12px}
.cta p{max-width:36rem;margin:0 auto 24px;font-size:1.06rem;opacity:.95}
.cta .fineprint{margin-top:16px;font-size:.82rem;opacity:.8}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#b7ad9c}
/* the beadwork strip along the top of the footer, straight on the dark ground */
.footer-bead{height:22px;background:url("../img/design-kit/beadwork-strip.png") repeat-x center;background-size:auto 22px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding:48px 0 30px}
.fgrid .fbrand img{height:74px;margin-bottom:14px}
.fgrid h2{color:#fff;font-size:1rem;margin-bottom:14px;font-family:'Oswald';letter-spacing:.04em}
.fgrid a{display:block;color:#b7ad9c;text-decoration:none;font-size:.9rem;margin-bottom:8px}
.fgrid a:hover{color:var(--wyellow)}
.fgrid p{font-size:.9rem;line-height:1.7}
.fsocial{display:flex;gap:12px;margin-top:6px}
.fsocial a{font-size:1.3rem}
/* The copyright line sits a step quieter than the footer links, at 5:1 on
   --ink. Its colour is stated outright rather than dimmed with opacity, because
   opacity would cap every descendant and the credit link below could never
   reach full strength on hover. The Privacy link takes the footer links' own
   colour; the brand red is too dark to read on --ink. */
.fcopy{text-align:center;font-size:.8rem;color:#96918a;border-top:1px solid rgba(255,255,255,.06);padding:20px 0 26px}
.fcopy>a{color:#b7ad9c}
.fcopy>a:hover{color:var(--wyellow)}
/* Studio credit. Sits inside .fcopy so it adds no second border, on its own row
   and a touch smaller than the Society's line so it never competes with their
   name. It takes the footer's own grey and nothing of the studio's: no colour
   of its own and no movement. Underlined only so a reader can tell it is
   clickable, and the line firms up under a pointer or a keyboard. */
.fbuilt{display:block;width:max-content;margin:9px auto 0;font-size:.78rem}
.fbuilt a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.2);transition:border-bottom-color .3s}
.fbuilt a:hover,.fbuilt a:focus-visible{border-bottom-color:rgba(255,255,255,.55)}

/* ============================================================
   SUBPAGE COMPONENTS (About, Programs, Events, Courses, Contact)
   ============================================================ */

/* page banner (compact hero for inner pages) */
.pagehead{position:relative;background:var(--blue);color:#fff;overflow:hidden;min-height:240px;display:flex;align-items:center}
.pagehead .bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;opacity:.45}
.pagehead::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(14,36,60,.92),rgba(14,36,60,.62))}
/* beadwork trim along the bottom of the dark page banner */
.pagehead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;z-index:2;pointer-events:none;background:url("../img/design-kit/beadwork-strip.png") repeat-x center;background-size:auto 16px}
.pagehead .wrap{position:relative;z-index:2;padding:54px 26px}
.pagehead .crumb{font-family:'Oswald';font-size:.88rem;letter-spacing:.16em;text-transform:uppercase;color:var(--wyellow);margin-bottom:8px}
/* the brand red reads under 3:1 on the navy banner, so the link keeps the crumb's tan and its underline */
.pagehead .crumb a{color:inherit}
.pagehead .crumb a:hover{color:#fff}
.pagehead h1{font-size:clamp(2rem,4.4vw,3rem);font-weight:700}
.pagehead p{max-width:38rem;margin-top:10px;font-weight:300;opacity:.95}

/* prose blocks (About) */
.prose{max-width:48rem;margin:0 auto}
.prose p{margin-bottom:16px}
.prose h2{color:var(--blue);font-size:1.4rem;margin:30px 0 10px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.two-col .photo{border-radius:8px;overflow:hidden;box-shadow:0 8px 26px rgba(0,0,0,.12)}
.two-col .photo img{width:100%;height:100%;object-fit:cover}

/* Treaty 6 acknowledgement band */
.acknowledge{background:var(--blue);color:#fff;text-align:center;padding:54px 0}
.acknowledge .wrap{max-width:50rem}
.acknowledge p{font-family:'Oswald';font-weight:300;font-size:clamp(1.05rem,2.2vw,1.4rem);line-height:1.5;text-transform:none}

/* values cards (medicine-wheel colours) */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.vcard{border-radius:8px;padding:26px;color:#fff;min-height:170px}
.vcard h3{font-size:1.15rem;margin-bottom:8px}
.vcard p{font-size:.9rem;font-weight:300;opacity:.95}
.vcard.r{background:linear-gradient(160deg,var(--wred),#9e1f1f)}
/* the yellow card keeps true yellow: the four colours of the medicine wheel */
.vcard.y{background:#F6C026;color:var(--ink)}
.vcard.b{background:linear-gradient(160deg,var(--wblue),#1a2a6b)}
.vcard.k{background:linear-gradient(160deg,#3a3a3a,#111)}

/* programs full listing */
.plist{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.pfull{background:var(--card);border:1px solid var(--tan);border-radius:9px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 6px 20px rgba(14,36,60,.10);border-top:4px solid var(--blue)}
.pfull .ph{height:188px;background-size:cover;background-position:center}
.pfull .body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.pfull .tag{align-self:flex-start;font-family:'Oswald';font-size:.7rem;letter-spacing:.1em;font-weight:600;padding:3px 9px;border-radius:2px;margin-bottom:10px;text-transform:uppercase;background:var(--blue);color:#fff}
.pfull .tag.free{background:var(--gold);color:var(--ink)}
.pfull .tag.fee{background:var(--red);color:#fff}
.pfull h2{color:var(--blue);font-size:1.25rem;line-height:1.1}
.pfull .sub{font-family:'Oswald';font-size:.78rem;letter-spacing:.06em;color:var(--red);text-transform:uppercase;margin:4px 0 10px}
.pfull p{font-size:.92rem;margin-bottom:14px}
.pfull .contact{margin-top:auto;border-top:1px solid var(--tan);padding-top:12px;font-size:.86rem}
.pfull .contact a{color:var(--red);text-decoration:none;font-weight:600}
.pfull .contact a:hover{text-decoration:underline}
.pfull .contact .who{font-weight:600;color:var(--ink)}

/* contact page */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
/* a long email address must wrap inside its card, never widen the grid past the phone */
.contact-grid>*{min-width:0}
.infocard{background:var(--card);border:1px solid var(--tan);border-radius:9px;padding:28px;box-shadow:0 6px 20px rgba(14,36,60,.10);min-width:0}
.inforow{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid rgba(0,0,0,.1)}
.inforow:last-child{border-bottom:0}
.inforow .lab{font-family:'Oswald';text-transform:uppercase;font-size:.74rem;letter-spacing:.08em;color:var(--red);min-width:84px;padding-top:2px}
.inforow .val{font-size:.95rem;min-width:0;overflow-wrap:anywhere}
@media(max-width:560px){
  /* label above value on phones, so an address or a postal code keeps its own line */
  .inforow{flex-direction:column;gap:3px}
  .inforow .lab{min-width:0}
}
.inforow .val a{color:var(--blue);text-decoration:none}
.inforow .val a:hover{text-decoration:underline}
.cform label{display:block;font-family:'Oswald';font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--blue);margin:14px 0 5px}
.cform input,.cform textarea{width:100%;border:1.5px solid var(--tan);border-radius:5px;padding:11px 13px;font-family:inherit;font-size:16px;/* 16px or more, so phones do not zoom into the field */background:#fff}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--blue)}
.cform textarea{min-height:130px;resize:vertical}
.cform .btn{margin-top:18px;border:0;cursor:pointer}
.cform .formnote{margin-top:16px;padding:13px 15px;background:var(--cream);border:1px solid var(--tan);border-left:4px solid var(--red);border-radius:6px;color:var(--ink);font-size:.92rem;line-height:1.5}
.cform .formnote a{color:var(--red);font-weight:600}
.mapwrap{margin-top:18px;border-radius:9px;overflow:hidden;border:1px solid var(--tan)}
.mapwrap iframe{display:block;width:100%;height:300px;border:0}
.emaillist{display:grid;grid-template-columns:1fr 1fr;gap:8px 22px;margin-top:6px}
.emaillist a{font-size:.9rem;color:var(--blue);text-decoration:none}
.emaillist a:hover{text-decoration:underline}

/* simple list rows for the Events and Courses pages */
.feed{max-width:50rem;margin:0 auto;display:flex;flex-direction:column;gap:0}
.feed .item{display:flex;gap:22px;padding:15px 18px;margin-bottom:12px;background:var(--card);border:1px solid var(--tan);border-left:5px solid var(--tan);border-radius:8px;box-shadow:0 4px 14px rgba(14,36,60,.08)}
.feed .item .when{font-family:'Oswald';color:var(--red);text-transform:uppercase;letter-spacing:.05em;font-size:.85rem;min-width:140px;padding-top:3px}
.feed .item h2{color:var(--blue);font-size:1.25rem;margin-bottom:5px}
.feed .item p{font-size:.95rem}

/* ---------- "What's On" calendar (calendar.html) ---------- */
.calfilters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:50rem;margin:0 auto 6px}
.calchip{font-family:'Oswald';font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;padding:7px 17px;border-radius:30px;border:1.5px solid var(--tan);background:#fff;color:var(--blue);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.calchip:hover{border-color:var(--blue)}
.calchip.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.calgroup{max-width:50rem;margin:0 auto}
.calmonth{font-family:'Oswald';color:var(--red);text-transform:uppercase;letter-spacing:.1em;font-size:.9rem;font-weight:600;margin:30px 0 0;padding-bottom:8px;border-bottom:2px solid var(--tan)}
.ctag{display:inline-block;font-family:'Oswald';font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:2px 9px;border-radius:3px;margin-bottom:7px}
.ctag.dropin{background:var(--gold);color:var(--ink)}
.ctag.event{background:var(--blue);color:#fff}
.ctag.course{background:#2e7d5b;color:#fff}
.ctag.program{background:var(--red);color:#fff}
/* "Register" line on the calendar's courses */
.item .reg{color:var(--red);font-weight:600;font-size:.92rem;margin:.35rem 0 .1rem}
/* feed + calendar rows are outlined white cards; left stripe colored by type/page */
.feed .item.calitem[data-type="dropin"]{border-left-color:var(--gold)}
.feed .item.calitem[data-type="event"]{border-left-color:var(--blue)}
/* calendar call-to-action band on the Programs page */
.calcta{text-align:center;padding-top:34px;padding-bottom:0}
.calcta p{color:var(--muted);margin:0 0 15px;font-size:1rem}

/* ============================================================
   MOBILE / RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .values{grid-template-columns:repeat(2,1fr)}
  .plist{grid-template-columns:1fr}
  .culture .row{grid-template-columns:repeat(2,1fr)}
  .impact .row{grid-template-columns:repeat(2,1fr);gap:28px}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;background:var(--cream);flex-direction:column;gap:0;border-bottom:3px solid var(--blue);padding:8px 0}
  .navlinks.open{display:flex}
  .navlinks a{padding:12px 26px;width:100%}
  .menubtn{display:block;padding:9px 8px;margin:-9px -8px;line-height:0}
  /* thumbs: every small control gets a hit area near 40px without moving the layout */
  .usocial{padding:11px;margin:-11px -3px}
  .util .safe{min-height:36px}
  .fgrid a{padding:6px 0;margin-bottom:2px}
  .fsocial a{display:inline-block;padding:6px 9px;margin:-6px -5px}
  .fcopy a{display:inline-block;padding:8px 6px}
  .paths{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr}
  .story .grid{padding:48px 20px}
  .story .copy{max-width:none}
  .story .photo{height:240px;margin-bottom:28px;border-radius:14px}
  .en{grid-template-columns:1fr}
  .en .courses,.en .events{padding:44px 26px}
  .two-col{grid-template-columns:1fr;gap:28px}
  .contact-grid{grid-template-columns:1fr;gap:30px}
  .feed .item{flex-direction:column;gap:4px}
  .feed .item .when{min-width:0}
  .emaillist{grid-template-columns:1fr}
}
@media(max-width:560px){
  .culture .row{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr}
  /* a smaller logo, so the full logo and the Society's name both fit */
  .brand img{height:50px}
  .brand .bt{font-size:1.05rem}
  /* the top bar drops its address, phone and hours on phones; the footer
     and the Contact page carry them */
  .util .wrap > span:first-child{display:none}
  .util .wrap{justify-content:flex-end}
  /* full-width stacked hero buttons */
  .hero-cta .btns{flex-direction:column;align-items:stretch}
  .hero-cta .btns .btn{width:100%;text-align:center}
  /* medicine-wheel value cards: keep the 2x2, give the text more room */
  .vcard{padding:18px;min-height:0}
}

/* ---------- single program detail page (program.html): article + sidebar ---------- */
.prog-detail{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;max-width:1000px;margin:0 auto;align-items:start}
.prog-main{grid-column:1;grid-row:1;min-width:0}
.prog-aside{grid-column:2;grid-row:1}
.prog-explore{grid-column:1 / -1;grid-row:2;margin-top:14px;padding-top:24px;border-top:1px solid var(--tan)}
.prog-detail .backlink{display:block;width:fit-content;font-family:'Oswald';font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);text-decoration:none;margin-bottom:14px}
.prog-detail .backlink:hover{color:var(--red)}
.prog-main .tag{display:inline-block;font-family:'Oswald';font-size:.72rem;letter-spacing:.1em;font-weight:600;padding:4px 10px;border-radius:2px;margin:0 0 14px;text-transform:uppercase;background:var(--blue);color:#fff}
.prog-main .tag.free{background:var(--gold);color:var(--ink)}
.prog-main .tag.fee{background:var(--red);color:#fff}
.prog-headline{font-family:'Oswald';font-weight:600;font-size:clamp(1.5rem,3vw,2rem);color:var(--blue);line-height:1.18;margin:4px 0 18px}
.prog-main p{margin-bottom:16px;line-height:1.7}
.prog-sec{font-family:'Oswald';font-weight:600;font-size:1.18rem;color:var(--red);letter-spacing:.01em;margin:26px 0 12px}
.prog-list{list-style:none;margin:0 0 16px;padding:0}
.prog-list li{position:relative;padding-left:26px;margin-bottom:10px;line-height:1.6}
.prog-list li::before{content:"";position:absolute;left:2px;top:.5em;width:9px;height:9px;background:var(--red);border-radius:2px;transform:rotate(45deg)}
.prog-main .prog-kicker{font-family:'Oswald';font-weight:600;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin:4px 0 2px}
.prog-main .prog-motto{font-family:'Oswald';font-size:.95rem;letter-spacing:.04em;color:var(--slate);margin:0 0 10px}
.prog-pairs{margin:0 0 18px;border-top:1px solid var(--tan)}
.prog-pairs > div{display:grid;grid-template-columns:150px 1fr;gap:4px 18px;padding:11px 0;border-bottom:1px solid var(--tan)}
.prog-pairs dt{font-family:'Oswald';font-weight:600;font-size:1rem;letter-spacing:.02em;color:var(--blue)}
.prog-pairs dd{margin:0;line-height:1.6}
.prog-main .prog-after{font-family:'Oswald';font-weight:600;font-size:1.05rem;color:var(--blue)}
@media (max-width:560px){
  .prog-pairs > div{grid-template-columns:1fr}
}
/* sidebar card */
.pa-photo{height:185px;border-radius:12px;background-size:cover;background-position:center;margin-bottom:16px}
.pa-card{background:var(--card);border:1px solid var(--tan);border-radius:12px;padding:20px 22px;box-shadow:0 6px 20px rgba(14,36,60,.08)}
.pa-h{font-family:'Oswald';font-weight:600;font-size:.92rem;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);margin:0 0 6px}
.pa-card .pa-facts + .pa-h,.pa-card .pa-contact + .pa-h{margin-top:18px}
.pa-facts{margin:0}
.pa-facts dt{font-family:'Oswald';font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);margin-top:10px}
.pa-facts dt:first-of-type{margin-top:0}
.pa-facts dd{margin:1px 0 0;font-size:.95rem;color:var(--ink)}
.pa-contact{font-size:.95rem;line-height:1.7}
.pa-contact a{color:var(--red);text-decoration:none;font-weight:600}
.pa-contact a:hover{text-decoration:underline}
.pa-contact .who{font-weight:600;color:var(--ink)}
.pa-cta{display:block;text-align:center;margin-top:18px}
/* The quieter second button. Outlined on the light sidebar card, where the
   banner's white ghost button would not be visible at all. */
.pa-more{margin-top:10px;background:transparent;color:var(--blue);border:1.5px solid var(--blue);padding:12px 30px}
.pa-more:hover{background:var(--blue);color:#fff}
/* explore other programs */
.pe-links{display:flex;flex-wrap:wrap;gap:9px}
.pe-links a{font-family:'Oswald';font-size:.85rem;letter-spacing:.02em;color:var(--blue);background:var(--cream);border:1px solid var(--tan);border-radius:20px;padding:7px 15px;text-decoration:none;transition:background .15s ease,color .15s ease,border-color .15s ease}
.pe-links a:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
@media(max-width:768px){
  .prog-detail{grid-template-columns:1fr;gap:26px}
  .prog-main,.prog-aside,.prog-explore{grid-column:1;grid-row:auto}
  .pa-photo{display:none} /* the banner already shows this photo on phones */
}

/* ---------- clickable directory cards (whole card links to its program page) ---------- */
.pfull{position:relative}
.pfull-stretch{position:absolute;inset:0;z-index:1}
.pfull .more{display:inline-block;margin-top:auto;align-self:flex-start;color:var(--red);font-family:'Oswald';font-size:.86rem;letter-spacing:.02em}
.pfull:hover{box-shadow:0 12px 30px rgba(14,36,60,.18);transform:translateY(-2px);transition:box-shadow .2s ease,transform .2s ease}
.pfull:focus-within{outline:2px solid var(--blue);outline-offset:2px}

/* the note on a program page with no full write-up in programs.json yet */
.wip-note{background:var(--cream);border:1px solid var(--tan);border-left:4px solid var(--red);border-radius:8px;padding:14px 18px;margin:16px 0 6px;font-size:.95rem;line-height:1.55;color:var(--ink)}
.wip-note a{color:var(--red);font-weight:600}

/* ============================================================
   FOSTER CARE SECTION
   The five pages under the Foster Care menu. Words live in
   content/fostercare.json, layout lives here.
   ============================================================ */

/* ---------- nav dropdown ----------
   .navlinks is stretched to the full height of the nav bar so the menu can
   hang from the bottom edge (top:100%) instead of from the middle of the
   text. The links inside stay vertically centred as before. */
.navlinks{align-self:stretch}
.navdrop{position:relative;display:flex;align-items:center;gap:4px}
/* The arrow is 11px, too small to hit. Padding makes it a 24px square, the
   least a touch target may be, and the negative margins give that space back
   so neither the arrow nor the row moves. Most of it sits on the right, in
   the gap before the next link, so it never covers Foster Care. */
.navdrop-btn{background:none;border:0;padding:6.5px 9px 6.5px 4px;margin:-3.5px -8px -3.5px -3px;cursor:pointer;color:var(--ink);display:flex;align-items:center;line-height:0;transition:color .2s}
.navdrop-btn svg{width:11px;height:11px;transition:transform .2s ease}
.navdrop:hover .navdrop-btn{color:var(--red)}
.navdrop-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.navdrop-menu{position:absolute;top:100%;left:-17px;margin-top:3px;min-width:236px;background:var(--card);border:1px solid var(--tan);border-top:3px solid var(--red);border-radius:0 0 8px 8px;box-shadow:0 12px 28px rgba(14,36,60,.17);padding:7px 0;z-index:60;display:none}
/* An invisible strip across the gap between the link and the menu, so the
   pointer never leaves the menu on its way down. The 6px is the 3px margin
   plus the 3px red border, which the offset is measured from. */
.navdrop-menu::before{content:"";position:absolute;left:0;right:0;top:-6px;height:6px}
.navdrop:hover .navdrop-menu,.navdrop:focus-within .navdrop-menu,.navdrop-menu.open{display:block}
.navdrop-menu a{display:block;padding:9px 18px;font-size:.83rem;letter-spacing:.03em;color:var(--blue);white-space:nowrap}
.navdrop-menu a:hover,.navdrop-menu a:focus{background:var(--cream);color:var(--red)}
.navdrop-menu a[aria-current="page"]{color:var(--red)}
@media(prefers-reduced-motion:reduce){.navdrop-btn svg{transition:none}}

/* Nine nav items is a lot. Tighten the row before it wraps. */
@media(max-width:1080px) and (min-width:861px){
  .navlinks{gap:15px}
  .navlinks a{font-size:.85rem}
  .brand .bt{font-size:1.04rem}
  .donate{padding:8px 15px}
}
/* On phones the drawer is already a vertical list, so the submenu just sits
   inside it as an indented group. No second tap needed to open it. */
@media(max-width:860px){
  .navdrop{display:block;width:100%}
  .navdrop-btn{display:none}
  .navdrop-menu{display:block;position:static;margin:0;padding:0 0 6px;min-width:0;background:transparent;border:0;border-radius:0;box-shadow:none}
  /* No gap to bridge in the drawer, and the strip would sit over the link above it. */
  .navdrop-menu::before{display:none}
  .navdrop-menu a{width:100%;white-space:normal;padding:9px 26px 9px 48px;font-size:.82rem}
  .navdrop-menu a::before{content:"";display:inline-block;width:13px;height:1px;background:var(--red);vertical-align:middle;margin:0 9px 0 -22px}
}

/* ---------- section sub-nav (sits under the banner on all five pages) ---------- */
.fc-subnav{background:var(--card);border-bottom:1px solid var(--tan)}
.fc-subnav .wrap{display:flex;gap:6px;flex-wrap:wrap;padding-top:11px;padding-bottom:11px}
.fc-subnav a{font-family:'Oswald';font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;color:var(--blue);text-decoration:none;padding:7px 15px;border-radius:20px;border:1px solid var(--tan);background:var(--cream);transition:background .15s,color .15s,border-color .15s}
.fc-subnav a:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.fc-subnav a[aria-current="page"]{background:var(--red);color:#fff;border-color:var(--red)}

/* ---------- shared building blocks ---------- */
.fc-body{max-width:820px;margin:0 auto}
.fc-wide{max-width:1000px;margin:0 auto}
.fc-h{font-family:'Oswald';font-weight:600;font-size:clamp(1.4rem,2.7vw,1.85rem);color:var(--blue);margin:0 0 14px}
.fc-block{margin-bottom:52px}
.fc-block:last-child{margin-bottom:0}
.fc-block p{margin-bottom:15px;line-height:1.75}
.fc-lead{font-size:1.08rem;color:var(--muted);margin-bottom:18px}
.fc-list{list-style:none;margin:0;padding:0}
.fc-list li{position:relative;padding-left:27px;margin-bottom:11px;line-height:1.65}
.fc-list li::before{content:"";position:absolute;left:2px;top:.52em;width:9px;height:9px;background:var(--red);border-radius:2px;transform:rotate(45deg)}

/* the three contract types (CFS / DFNA / IGB) */
.fc-terms{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
.fc-term{background:var(--card);border:1px solid var(--tan);border-radius:10px;padding:22px;box-shadow:0 6px 20px rgba(14,36,60,.07)}
.fc-term .ab{font-family:'Oswald';font-weight:700;font-size:1.45rem;color:var(--red);line-height:1;letter-spacing:.03em}
.fc-term .nm{font-family:'Oswald';font-size:.86rem;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);margin:8px 0 7px}
.fc-term .ds{font-size:.92rem;color:var(--muted);line-height:1.6}

/* the "we are not CFS" note, and any other callout that must not be skimmed past */
.fc-callout{background:var(--blue);color:#fff;border-radius:12px;padding:30px 32px;position:relative;overflow:hidden}
.fc-callout::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:url("../img/design-kit/beadwork-strip.png") repeat-x center;background-size:auto 14px}
.fc-callout h2,.fc-callout h3{font-family:'Oswald';font-weight:600;font-size:1.2rem;color:var(--tan);margin:0 0 11px;letter-spacing:.04em}
.fc-callout p{margin:0 0 16px;line-height:1.72;opacity:.96;font-weight:300}
.fc-callout p:last-child{margin-bottom:0}
.fc-callout a{color:var(--tan);font-weight:600}

/* ---------- success stories ---------- */
.fc-quotes{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.fc-quote{background:var(--card);border:1px solid var(--tan);border-left:4px solid var(--red);border-radius:10px;padding:28px 30px;box-shadow:0 6px 20px rgba(14,36,60,.07)}
.fc-quote .qm{font-family:'Oswald';font-size:2.6rem;color:var(--tan);line-height:.6;display:block;margin-bottom:10px}
.fc-quote blockquote{font-size:1.02rem;line-height:1.78;color:var(--ink);margin:0 0 16px}
.fc-quote .att{font-family:'Oswald';font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.fc-empty{background:var(--card);border:1px dashed var(--tan);border-radius:12px;padding:44px 34px;text-align:center;color:var(--muted);line-height:1.75}
.fc-empty .ic{width:46px;height:46px;margin:0 auto 16px;opacity:.5}

/* ---------- application: numbered steps + FAQ ---------- */
.fc-steps{list-style:none;counter-reset:fcstep;margin:0;padding:0}
.fc-steps li{counter-increment:fcstep;position:relative;padding:0 0 22px 52px;line-height:1.7}
.fc-steps li::before{content:counter(fcstep);position:absolute;left:0;top:-2px;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;font-family:'Oswald';font-size:.95rem;display:flex;align-items:center;justify-content:center}
.fc-steps li::after{content:"";position:absolute;left:17px;top:36px;bottom:2px;width:1px;background:var(--tan)}
.fc-steps li:last-child{padding-bottom:0}
.fc-steps li:last-child::after{display:none}

/* <details> so the FAQ still opens if JavaScript never runs */
.fc-faq details{background:var(--card);border:1px solid var(--tan);border-radius:9px;margin-bottom:10px;overflow:hidden}
.fc-faq summary{cursor:pointer;list-style:none;padding:17px 52px 17px 22px;font-family:'Oswald';font-weight:500;font-size:1rem;color:var(--blue);position:relative;transition:color .15s}
.fc-faq summary::-webkit-details-marker{display:none}
.fc-faq summary:hover{color:var(--red)}
.fc-faq summary::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;border-right:2px solid var(--red);border-bottom:2px solid var(--red);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.fc-faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.fc-faq details[open] summary{color:var(--red)}
.fc-faq .ans{padding:0 22px 19px;line-height:1.72;color:var(--ink)}
/* An answer that is a set of things rather than a paragraph. The list sits
   outside .ans so the answer element still holds exactly its own words. */
.fc-faq .ans-list{margin:-9px 0 0;padding:0 22px 19px}
.fc-faq .ans-list li{margin-bottom:9px;line-height:1.65}
.fc-faq .ans-list li:last-child{margin-bottom:0}
.fc-faq .ans-lead{margin-top:-9px}
@media(prefers-reduced-motion:reduce){.fc-faq summary::after{transition:none}}

/* small note under a form field */
.cform .fc-hint{font-size:.85rem;color:var(--muted);margin:6px 0 0;line-height:1.55}

/* ---------- current foster parents: the gate and what sits behind it ---------- */
.fc-gate{max-width:470px;margin:0 auto;background:var(--card);border:1px solid var(--tan);border-radius:12px;padding:38px 34px;text-align:center;box-shadow:0 6px 20px rgba(14,36,60,.09)}
.fc-gate .lock{width:42px;height:42px;margin:0 auto 16px;color:var(--red)}
.fc-gate h2{font-size:1.3rem;color:var(--blue);margin-bottom:8px}
.fc-gate p{color:var(--muted);font-size:.95rem;margin-bottom:20px;line-height:1.6}
.fc-gate input{width:100%;border:1.5px solid var(--tan);border-radius:5px;padding:12px 14px;font-family:inherit;font-size:16px;text-align:center;letter-spacing:.14em;background:#fff}
.fc-gate input:focus{outline:none;border-color:var(--blue)}
.fc-gate .btn{margin-top:14px;width:100%}
.fc-gate .err{margin-top:14px;padding:11px 14px;background:var(--cream);border:1px solid var(--tan);border-left:4px solid var(--red);border-radius:6px;font-size:.9rem;text-align:left;line-height:1.55}
.fc-gate .hint{margin:18px 0 0;font-size:.86rem;color:var(--muted)}
.fc-res{display:grid;gap:12px}
.fc-res .row{display:flex;align-items:flex-start;gap:16px;background:var(--card);border:1px solid var(--tan);border-radius:9px;padding:18px 22px}
.fc-res .row .ic{flex:0 0 auto;width:22px;height:22px;color:var(--red);margin-top:2px}
.fc-res .row h3{font-family:'Oswald';font-weight:500;font-size:1.02rem;color:var(--blue);margin:0 0 4px;text-transform:none;letter-spacing:0}
.fc-res .row p{margin:0;font-size:.92rem;color:var(--muted);line-height:1.6}
.fc-res .row .req{display:inline-block;font-family:'Oswald';font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;background:var(--red);color:#fff;padding:3px 8px;border-radius:2px;margin-left:8px;vertical-align:2px}
.fc-res .row .soon{font-size:.82rem;color:var(--muted);font-style:italic}
.fc-oncall{background:var(--blue);color:#fff;border-radius:12px;padding:28px 30px;margin-bottom:24px}
.fc-oncall h3{font-family:'Oswald';font-size:1.05rem;color:var(--tan);margin:0 0 9px;letter-spacing:.04em}
.fc-oncall p{margin:0;line-height:1.7;font-weight:300;opacity:.96}
.fc-oncall .num{display:inline-block;font-family:'Oswald';font-size:1.75rem;color:#fff;text-decoration:none;letter-spacing:.02em;margin-top:4px}
.fc-oncall .num:hover{color:var(--tan)}

@media(max-width:860px){
  .fc-terms{grid-template-columns:1fr}
  .fc-quotes{grid-template-columns:1fr}
  .fc-callout{padding:26px 24px}
  .fc-subnav .wrap{gap:5px}
  .fc-subnav a{font-size:.76rem;padding:6px 12px}
}

/* ---------- Semi-Independent Living, the Williers House Learn More page ----------
   Laid out like a program page; only what that layout does not already have. */
.prog-pairs dd .prog-list{margin:8px 0 0}
.prog-pairs dd .prog-list li{margin-bottom:5px}
.sil-note{color:var(--muted);font-style:italic;font-size:.95rem}
.pa-ref{font-size:.85rem;color:var(--muted);line-height:1.55;margin:12px 0 0}
.pa-card .pa-h.pa-sub{margin-top:24px;padding-top:18px;border-top:1px solid var(--tan)}

/* Inside the editor's frame: a word you can change shows where it is, and
   nothing animates in again while the page redraws as you type. */
.editing [data-field],.editing [data-field-href]{cursor:pointer;outline:1px dashed transparent;outline-offset:2px;transition:outline-color .15s}
.editing [data-field]:hover,.editing [data-field-href]:hover{outline:2px solid #E24A2B;background:rgba(226,74,43,.08)}
.editing .reveal{opacity:1;transform:none;transition:none}
/* A word being edited where it stands: the same type and colour, a firm
   outline, a text cursor, and a count near the limit. */
.editing .inplace,.editing .inplace:hover{outline:2px solid #E24A2B;background:rgba(226,74,43,.06);cursor:text;caret-color:#E24A2B}
.inplace-count{position:fixed;z-index:9999;font:12px/1 system-ui,sans-serif;background:#1d1d1b;color:#fff;padding:4px 7px;border-radius:6px;pointer-events:none}
.inplace-count.over{background:#E24A2B}