/* The Coil Care Project — shared site styles (v3: matched to Wix layout) */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,600;0,700;0,900;1,600&family=Poppins:wght@400;500;600&display=swap');

:root{
  --cream: #FDF9F2;
  --mocha: #D1C7BD;
  --tan-light: #F2EBE0;
  --tan-peach: #E8DCCB;
  --orange: #E15A2C;
  --orange-dark: #C74A20;
  --ink: #201914;
  --text: #3A322B;
  --white: #FFFFFF;
  --max: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  margin:0;
  background:var(--cream);
  color:var(--text);
  font-family:'Poppins', sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  color:var(--ink);
  margin:0 0 .5em;
  line-height:1.1;
}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

.wrap{width:100%; margin:0 auto; padding:0 60px; position:relative; box-sizing:border-box;}

/* ---------- Header ---------- */
.site-header{padding:38px 0 22px; position:relative; z-index:5; background:var(--cream);}
.site-header .wrap{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:20px;}
.brand{display:flex; align-items:center; grid-column:1;}
.brand img.logo-primary{height:138px; width:auto;}
nav{display:flex; gap:clamp(16px,3vw,36px); flex-wrap:wrap; align-items:center; justify-content:center; grid-column:2; justify-self:center;}
nav a{font-size:clamp(1.05rem,1.6vw,1.4875rem); color:var(--ink); padding-bottom:4px; border-bottom:2px solid transparent; white-space:nowrap;}
nav a.active{border-bottom-color:var(--orange);}
nav a:hover{color:var(--orange-dark);}

.nav-toggle{display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:44px; height:44px; padding:0; border:none; background:transparent; cursor:pointer; z-index:20; flex-shrink:0;}
.nav-toggle span{display:block; width:26px; height:2.5px; border-radius:2px; background:var(--ink); transition:transform .25s ease, opacity .25s ease;}
.nav-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

/* ---------- Decorative shapes (inline SVG data-uris via CSS bg, plus HTML shape divs) ---------- */
.shape{position:absolute; z-index:0; pointer-events:none;}
.shape svg{display:block; width:100%; height:100%;}

/* scalloped wave divider between bands */
.wave-divider{position:relative; height:64px; margin-top:-1px;}
.wave-divider svg{position:absolute; top:0; left:0; width:100%; height:100%;}
.wave-divider.flip{transform:scaleY(-1);}

/* colored full-width bands */
.band{position:relative; z-index:1;}
.band-mocha{background:var(--mocha);}
.band-tan{background:var(--tan-light);}
.band-peach{background:var(--tan-peach);}

/* watermark oversized heading behind content */
.watermark-head{position:absolute; top:-6px; left:0; right:0; text-align:center; font-size:4.4rem; font-weight:700; color:rgba(32,25,20,.06); white-space:nowrap; z-index:0; pointer-events:none;}

/* scalloped divider strip between colored bands, drawn with a repeating radial-gradient scallop */
.scallop{height:34px; width:100%; position:relative; z-index:2;}
.scallop-into-mocha{background:
  radial-gradient(circle at 10px 0, transparent 12px, var(--mocha) 12.5px) 0 -1px/20px 20px repeat-x,
  var(--cream);}
.scallop-into-cream{background:
  radial-gradient(circle at 10px 34px, transparent 12px, var(--cream) 12.5px) 0 0/20px 20px repeat-x,
  var(--mocha);}
.scallop-into-tan{background:
  radial-gradient(circle at 10px 34px, transparent 12px, var(--cream) 12.5px) 0 0/20px 20px repeat-x,
  var(--tan-light);}
.scallop-tan-into-cream{background:
  radial-gradient(circle at 10px 0, transparent 12px, var(--tan-light) 12.5px) 0 -1px/20px 20px repeat-x,
  var(--cream);}
.scallop-into-peach{background:
  radial-gradient(circle at 10px 34px, transparent 12px, var(--cream) 12.5px) 0 0/20px 20px repeat-x,
  var(--tan-peach);}
.scallop-peach-into-cream{background:
  radial-gradient(circle at 10px 0, transparent 12px, var(--tan-peach) 12.5px) 0 -1px/20px 20px repeat-x,
  var(--cream);}

/* decorative blob / comb / swirl shapes, scattered accents */
.deco{position:absolute; z-index:0; pointer-events:none;}
.deco svg{width:100%; height:100%; display:block;}
.deco-blob{fill:var(--ink);}
.deco-orange{fill:var(--orange);}

/* ---------- Buttons ---------- */
.btn{display:inline-block; padding:14px 30px; border-radius:40px; font-weight:600; font-size:.98rem; transition:transform .15s ease;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--orange); color:var(--white);}
.btn-outline{background:transparent; color:var(--ink); border:2px solid var(--ink);}
.btn-row{display:flex; flex-direction:row; align-items:center; gap:14px;}

/* ---------- Hero (home) ---------- */
.hero{padding:10px 0 0; position:relative; overflow:hidden;}
.hero .wrap:not(.hero-banner-wrap){display:grid; grid-template-columns:1.214fr 1fr; gap:169px; align-items:start; padding-bottom:50px;}
.hero h1{font-size:6.7rem; color:var(--orange); font-weight:900; text-transform:uppercase; letter-spacing:.5px;}
.hero p{font-size:1.675rem; max-width:none; margin-bottom:26px; color:var(--text);}
.hero .hero-img{width:100%; border-radius:18px; display:block; aspect-ratio:3/2; object-fit:cover; box-shadow:0 20px 40px rgba(32,25,20,.12);}
.hero-banner{max-width:1428px; margin:0 auto; border-radius:36px; overflow:hidden;}
.hero-banner img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block;}

/* Generic page hero (About / Programs / Blog / Collaborations) */
.page-hero{padding:56px 0 40px; position:relative; overflow:hidden;}
.page-hero h1{font-size:3rem; max-width:820px;}
.page-hero .lede{font-size:1.05rem; max-width:640px;}
.page-hero.centered{text-align:center;}
.page-hero.centered .wrap{display:flex; flex-direction:column; align-items:center;}
.page-hero.centered .lede{margin:0 auto;}
.page-hero .thankyou-note{max-width:700px; margin:22px auto 0; text-align:center; font-size:.98rem;}
.page-hero .thankyou-note p{margin:0 0 10px;}
.page-hero .thankyou-note .sign{font-style:italic;}

/* Programs hero: large corner blobs, clipped at the section edges */
.programs-hero{padding:80px 0 90px;}
.programs-hero.centered{text-align:center;}
.programs-hero.centered .wrap{display:flex; flex-direction:column; align-items:center;}
.programs-hero h1{font-size:clamp(2.3rem, 6.2vw, 4.8rem); max-width:none; white-space:nowrap;}
.programs-hero .lede{font-size:2.1rem; max-width:820px;}
.programs-hero.centered .lede{margin:0 auto;}

/* Collaborations hero: left-aligned text + right-side photo */
.collab-hero{padding:64px 0 90px;}
.collab-hero-wrap{display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:60px;}
.collab-hero-text{text-align:left;}
.collab-hero-text h1{margin-bottom:20px;}
.collab-hero .lede, .collab-hero .thankyou-note{margin-left:0; margin-right:0; text-align:left; max-width:none;}
.collab-hero .thankyou-note{margin-top:24px;}
.collab-hero-photo img{width:100%; height:auto; aspect-ratio:1400/972; object-fit:contain; border-radius:20px; display:block;}
.collab-hero-comb{pointer-events:none;}

@media (max-width:900px){
  .collab-hero{padding:48px 0 64px;}
  .collab-hero-wrap{grid-template-columns:1fr; gap:32px;}
  .collab-hero-photo{order:-1;}
  .collab-hero-comb{display:none;}
}

/* ---------- Sections generic ---------- */
section{padding:60px 0;}
.section-title{font-size:2.2rem; margin-bottom:16px;}
.eyebrow{color:var(--orange); font-weight:600; text-transform:uppercase; letter-spacing:1.5px; font-size:.85rem; margin-bottom:10px; display:block;}
.lede{max-width:720px; font-size:1.05rem;}

/* Label-left / content-right row pattern (Programs page) */
.label-row{display:grid; grid-template-columns:280px 1fr; gap:36px; align-items:start;}
.label-row .label-col h2{font-size:1.9rem; margin-bottom:12px;}
.label-row .label-col p{font-size:.95rem; max-width:260px;}
.label-row .content-row{display:flex; gap:20px; flex-wrap:wrap;}

/* Programs page section labels: text sized 1.5x the base label-row scale
   (Upcoming Events, Tutorial Videos, Past Events & Programs) */
.label-row-lg{grid-template-columns:340px 1fr;}
.label-row-lg .label-col h2{font-size:2.85rem;}
.label-row-lg .label-col p{font-size:1.425rem; max-width:320px;}

/* Split image/text (Mission section + About Who We Are) */
.split{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;}
.split img{border-radius:30px; width:100%; aspect-ratio:4/5; height:auto; object-fit:cover;}
.split.reverse{grid-template-columns:1fr 1fr;}
.split h2{font-size:2rem;}
.split.mission h2{color:var(--orange); font-size:4.667rem;}
.split.mission .lede{font-size:1.675rem; max-width:none;}

/* About page "Who We Are" intro copy: set to 20pt */
.about-intro-text p{font-size:1.667rem;}

/* About page "Our Programs / Lines & Links" block: everything sized 1.5x */
.lines-links-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px;}
.lines-links-1_5x .eyebrow{font-size:1.275rem;}
.lines-links-1_5x .section-title{font-size:3.3rem;}
.lines-links-1_5x p{font-size:1.5rem;}
.lines-links-1_5x h3{font-size:1.95rem;}
.lines-links-1_5x ul{padding-left:20px; font-size:1.47rem; line-height:1.9;}
.lines-links-1_5x .ll-closing-line{font-style:italic; color:var(--orange-dark); margin:16px 0 22px; font-size:1.5rem;}

@media (max-width:900px){
  .lines-links-grid{grid-template-columns:1fr; gap:28px;}
  .lines-links-1_5x .section-title{font-size:2.6rem;}
  .lines-links-1_5x p{font-size:1.2rem;}
  .lines-links-1_5x h3{font-size:1.5rem;}
  .lines-links-1_5x ul{font-size:1.15rem;}
  .lines-links-1_5x .ll-closing-line{font-size:1.2rem;}
}
@media (max-width:600px){
  .lines-links-1_5x .section-title{font-size:2rem;}
  .lines-links-1_5x p{font-size:1.05rem;}
  .lines-links-1_5x h3{font-size:1.3rem;}
  .lines-links-1_5x ul{font-size:1rem;}
  .lines-links-1_5x .ll-closing-line{font-size:1.05rem;}
}

/* ---------- Framework section ---------- */
.framework-title{font-size:4.667rem;}
.framework-lede{font-size:1.675rem; max-width:none;}
.framework-deco{width:230px !important; height:230px !important;}

/* ---------- Framework pillar cards w/ icon badges ---------- */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px; position:relative; z-index:1;}
.pillar-card{background:var(--tan-peach); border-radius:16px; padding:26px; position:relative; min-height:333px;}
.pillar-card h3{color:var(--ink); font-size:2.232rem; margin-bottom:12px;}
.pillar-card p{font-size:1.4875rem; max-width:70%;}
.pillar-card .icon-badge{position:absolute; top:24px; right:22px; width:100px; height:100px; border-radius:16px; background:var(--orange); display:flex; align-items:center; justify-content:center;}
.pillar-card:nth-child(2) .icon-badge{top:auto; bottom:22px;}
.pillar-card .icon-badge svg{width:52px; height:52px; fill:var(--white);}

/* ---------- Accordion recap list ---------- */
.band-tan .section-title{font-size:4.667rem;}
.band-tan .lede{font-size:1.675rem; max-width:none;}
.recap-quarter{margin-top:34px;}
.recap-quarter h3{font-size:2.977rem; margin-bottom:14px;}
.recap-quarter.muted{opacity:.65;}
.accordion-list{display:grid;}
.accordion-item{border-top:1px solid rgba(32,25,20,.15); display:grid;}
.accordion-list .accordion-item:last-child{border-bottom:1px solid rgba(32,25,20,.15);}
.accordion-item .accordion-trigger{background:none; border:none; padding:16px 4px; display:flex; align-items:center; justify-content:space-between; gap:20px; cursor:pointer; width:100%; text-align:left; font-family:inherit; color:inherit;}
.accordion-item span{font-size:1.4875rem;}
.accordion-item .chev{width:24px; height:24px; flex-shrink:0; opacity:.7; transition:transform .25s ease;}
.accordion-item.open .chev{transform:rotate(180deg);}
.accordion-item .accordion-panel{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.accordion-item .accordion-panel-inner{padding:0 4px 18px; font-size:1.05rem; color:var(--text);}
.accordion-item .accordion-panel-inner p{margin:0 0 18px;}

/* ---------- Recap photo carousel ---------- */
.carousel{position:relative; max-width:840px; margin:0 auto; border-radius:16px; overflow:hidden; background:var(--ink);}
.carousel-track{display:flex; transition:transform .4s ease;}
.carousel-slide{flex:0 0 100%; aspect-ratio:3/2;}
.carousel-slide img{width:100%; height:100%; object-fit:cover; display:block;}
.carousel-btn{position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,.85); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.2); transition:background .2s ease;}
.carousel-btn:hover{background:#fff;}
.carousel-btn svg{width:20px; height:20px;}
.carousel-prev{left:12px;}
.carousel-next{right:12px;}
.carousel-dots{position:absolute; left:0; right:0; bottom:12px; display:flex; justify-content:center; gap:8px;}
.carousel-dot{width:9px; height:9px; border-radius:50%; border:none; background:rgba(255,255,255,.5); padding:0; cursor:pointer;}
.carousel-dot.active{background:#fff;}

/* ---------- Recap single photo + external link button ---------- */
.recap-photo{max-width:100%; max-height:680px; width:auto; height:auto; border-radius:16px; display:block; margin:0 auto 18px; object-fit:contain;}
.accordion-panel-inner .recap-btn{display:inline-flex; margin-top:4px;}

/* ---------- Forms side-by-side w/ divider ---------- */
.forms-row{display:grid; grid-template-columns:1fr auto 1fr; gap:50px; margin-top:10px;}
.forms-row .divider{width:2px; background:var(--orange); align-self:stretch;}
.forms-row h2{font-size:2.1rem;}
form{display:grid; gap:14px; margin-top:20px;}
form .row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
label{font-size:.8rem; font-weight:600; display:block; margin-bottom:5px;}
input, select, textarea{width:100%; padding:10px 12px; border:1.5px solid rgba(32,25,20,.25); border-radius:6px; font-family:inherit; font-size:.9rem; background:var(--white);}
textarea{min-height:90px; resize:vertical;}
form .btn-primary{border:none; cursor:pointer; justify-self:start; padding:12px 34px;}

/* ---------- Timeline (zigzag) ---------- */
.timeline-wrap{position:relative; margin-top:50px;}
.timeline-wrap::before{content:"";position:absolute; left:50%; top:0; bottom:0; width:1px; background:rgba(32,25,20,.2); transform:translateX(-50%);}
.timeline-row{display:grid; grid-template-columns:1fr 1fr; gap:60px; position:relative; margin-bottom:70px;}
.timeline-row:last-child{margin-bottom:0;}
.timeline-card{border:1.5px solid rgba(32,25,20,.35); border-radius:10px; padding:22px 26px; background:transparent; position:relative;}
.timeline-card .timeline-date{color:var(--orange-dark); font-weight:700; font-family:'Fraunces',serif; font-style:italic; margin-bottom:4px; font-size:1.5rem;}
.timeline-card h4{font-size:1.95rem; margin-bottom:8px;}
.timeline-card p{font-size:1.38rem; margin:0;}
.timeline-row.right .timeline-card{grid-column:2;}
.timeline-row.left .timeline-card{grid-column:1;}
.timeline-connector{position:absolute; width:60px; height:60px; z-index:1;}
.journey-title{font-size:3.3rem;}

@media (max-width:900px){
  .timeline-card .timeline-date{font-size:1.2rem;}
  .timeline-card h4{font-size:1.5rem;}
  .timeline-card p{font-size:1.1rem;}
  .journey-title{font-size:2.6rem;}
}
@media (max-width:600px){
  .timeline-card .timeline-date{font-size:1.05rem;}
  .timeline-card h4{font-size:1.3rem;}
  .timeline-card p{font-size:1rem;}
  .journey-title{font-size:2rem;}
}

/* ---------- Team ---------- */
.team-section{position:relative; padding-top:80px; padding-bottom:90px;}
.team-section .watermark-head{top:6px;}
.team-section{text-align:center;}
.team-section .eyebrow{font-size:1.275rem;}
.team-section .section-title{font-size:3.3rem;}
.team-section .lede{font-size:1.575rem; max-width:820px; margin-left:auto; margin-right:auto;}
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:36px; position:relative; z-index:1; text-align:left;}
.team-card{background:var(--cream); border-radius:16px 16px 12px 12px; padding:22px; box-shadow:0 10px 30px rgba(32,25,20,.08);}
.team-card .avatar-img{width:100%; aspect-ratio:1.38/1; height:auto; object-fit:cover; border-radius:10px; margin-bottom:18px; display:block;}
.team-card .avatar.placeholder{width:100%; aspect-ratio:1.38/1; height:auto; border-radius:10px; margin-bottom:18px; background:linear-gradient(160deg,#cfe0df 0%,#e7ecdf 45%,#f4efe4 100%); position:relative; overflow:hidden;}
.team-card h4{margin-bottom:2px; font-size:1.875rem;}
.team-card .role{color:var(--orange-dark); font-weight:600; font-size:1.32rem; margin-bottom:10px;}
.team-card p{font-size:1.35rem;}

@media (max-width:900px){
  .team-section .section-title{font-size:2.6rem;}
  .team-section .lede{font-size:1.2rem;}
  .team-card h4{font-size:1.5rem;}
  .team-card .role{font-size:1.05rem;}
  .team-card p{font-size:1.05rem;}
}
@media (max-width:600px){
  .team-section .section-title{font-size:2rem;}
  .team-section .lede{font-size:1.05rem;}
  .team-card h4{font-size:1.3rem;}
  .team-card .role{font-size:.95rem;}
  .team-card p{font-size:.95rem;}
}

/* ---------- Cards / lists generic ---------- */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.card{background:var(--white); border-radius:14px; overflow:hidden; box-shadow:0 6px 20px rgba(32,25,20,.06);}
.card img{width:100%; height:170px; object-fit:cover; display:block; background:#eee;}
.card .body{padding:18px 20px;}
.card .meta{font-size:.8rem; color:#8A7F72; margin-bottom:6px;}
.card h3{font-size:1.05rem;}

/* Upcoming events cards (tan) */
.event-list{display:flex; flex-direction:column; gap:16px;}
.event-item{background:var(--tan-peach); border-radius:14px; padding:20px 24px; width:100%; max-width:340px;}
.event-item .date-badge{color:var(--orange-dark); font-weight:700; font-family:'Fraunces',serif; font-style:italic; margin-bottom:4px; font-size:.95rem;}
.event-item .badge-q{font-family:'Fraunces',serif; font-weight:700; font-size:1.3rem; margin-bottom:8px; color:var(--ink);}
.event-item p{font-size:.88rem; margin:0 0 14px;}
.event-item .btn{padding:9px 20px; font-size:.85rem;}
.event-item.event-item-poster{max-width:380px;}
.event-item .event-poster{width:100%; height:auto; border-radius:10px; margin-bottom:16px; display:block;}

/* Video/tutorial thumb cards: sized/styled to match .event-item (tan card) */
.thumb-row{display:flex; gap:18px; flex-wrap:wrap;}
.thumb-card{width:100%; max-width:340px;}
.thumb-card img{width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:10px; margin-bottom:16px; display:block;}
.thumb-card span{font-size:.88rem; font-weight:500;}

/* Past events numbered cards: sized/styled to match .event-item (tan card) */
.past-row{display:flex; gap:18px; flex-wrap:wrap;}
.past-card{width:100%; max-width:340px;}
.past-card .photo{position:relative; margin-bottom:16px;}
.past-card img{width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:10px; display:block;}
.past-card h4{font-size:.98rem; margin-bottom:4px;}
.past-card .num{font-family:'Fraunces',serif; font-weight:700; font-size:.85rem; color:var(--orange-dark); float:right;}
.past-card p{font-size:.78rem; margin:0; line-height:1.45;}

/* Resources section */
.resources-block{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; margin-top:10px;}
.resources-block img{width:100%; height:280px; object-fit:cover; border-radius:16px;}
.resource-list{display:grid; gap:0;}
.resource-item{padding:16px 0; display:flex; justify-content:space-between; align-items:center; border-top:1px dashed rgba(32,25,20,.3); gap:20px;}
.resource-item:last-child{border-bottom:1px dashed rgba(32,25,20,.3);}
.resource-item span{font-size:.92rem; font-weight:500;}
.resource-item .btn{padding:9px 22px; font-size:.85rem;}

/* Collaborations grid */
.collab-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:20px;}
.collab-grid .collab-card:last-child:nth-child(odd){grid-column:1 / -1; max-width:calc(50% - 13px);}
.collab-card{background:var(--tan-light); border:1px solid rgba(32,25,20,.08); border-radius:16px; overflow:hidden;}
.collab-card img{width:100%; height:300px; object-fit:cover;}
.collab-card .body{padding:22px 26px;}
.collab-card h3{font-size:1.25rem;}
.collab-card p{font-size:1.25rem;}
.collab-card .btn{padding:9px 22px; font-size:.85rem; margin-top:6px;}
.thankyou{max-width:760px; margin:22px auto 0; text-align:center;}
.thankyou p{font-size:.98rem;}
.thankyou .sign{font-style:italic;}

/* Blog cards with meta row */
.blog-card .meta-row{display:flex; align-items:center; gap:14px; font-size:.78rem; color:#8A7F72; margin-top:12px; padding-top:12px; border-top:1px solid #eee;}
.blog-card .meta-row .icon-txt{display:flex; align-items:center; gap:5px;}
.blog-card{cursor:pointer; transition:transform .2s ease, box-shadow .2s ease;}
.blog-card:hover{transform:translateY(-4px); box-shadow:0 12px 28px rgba(32,25,20,.12);}

/* Single blog post / article */
.article-back{display:inline-block; font-size:.92rem; font-weight:500; color:var(--orange-dark);}
.article-back:hover{text-decoration:underline;}
.article-head{max-width:820px; padding-top:18px;}
.article-title{font-size:2.6rem; max-width:720px;}
.article-meta{display:inline-block; box-shadow:none; background:none; padding:0; border-radius:0; margin-bottom:10px;}
.article-byline{font-size:.92rem; color:#8A7F72; margin:0 0 8px;}
.article-hero{width:100%; height:auto; max-height:520px; object-fit:cover; border-radius:20px;}
.article-body{max-width:760px; margin:0 auto;}
.article-body p{font-size:1.05rem; margin:0 0 22px;}
.article-body a{color:var(--orange-dark); text-decoration:underline;}
.article-quote{border-left:4px solid var(--orange); margin:32px 0; padding:4px 0 4px 24px; font-family:'Fraunces',serif; font-style:italic; font-size:1.4rem; color:var(--ink);}
.article-inline-img{width:100%; height:auto; border-radius:16px; margin:8px 0 26px;}
.article-split{max-width:820px; margin:36px auto; gap:32px;}
.article-split img{border-radius:16px; aspect-ratio:4/3;}
.article-split h2{font-size:1.6rem;}
.article-signoff{font-style:italic; margin-top:34px;}
.article-code{background:var(--tan-peach); color:var(--orange-dark); padding:3px 10px; border-radius:6px; font-family:'Fraunces',serif;}

@media (max-width:900px){
  .article-title{font-size:2rem;}
  .article-split{grid-template-columns:1fr; text-align:left;}
}
@media (max-width:600px){
  .article-title{font-size:1.7rem;}
  .article-hero{border-radius:14px;}
  .article-body p{font-size:1rem;}
}

/* ---------- Footer ---------- */
footer{position:relative; padding:56px 0 0;}
footer .wrap{display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:end; padding-bottom:26px;}
footer .brand img.logo-primary{height:110px;}
footer .tagline{font-size:1.2rem; font-family:'Fraunces',serif; font-weight:700; align-self:end;}
footer .contact-block{text-align:right;}
footer .contact-block h4{font-size:1.1rem; margin-bottom:6px;}
footer .contact-block .email{font-size:.92rem; margin-bottom:10px;}
footer .socials{display:flex; gap:10px; justify-content:flex-end;}
footer .socials a{width:30px; height:30px; border-radius:8px; background:var(--ink); display:flex; align-items:center; justify-content:center;}
footer .socials a svg{width:16px; height:16px; fill:var(--white);}
footer .socials a.social-icon-img{background:none; border-radius:8px; overflow:hidden;}
footer .socials a.social-icon-img img{width:100%; height:100%; object-fit:cover; display:block;}
footer .bottom-bar{border-top:1px solid rgba(32,25,20,.15); padding:16px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
footer .bottom-bar .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:0; padding-bottom:0; align-items:center;}
.footer-note{font-size:.82rem; color:#8A7F72;}
.footer-note .credit{display:block; margin-top:4px;}
.footer-note .credit a{color:var(--orange-dark); font-weight:600;}
.legal-links{font-size:.82rem; color:#8A7F72;}
.legal-links a:hover{color:var(--orange-dark);}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- Responsive ---------- */

/* Tablet tier: keeps large desktop-only values from persisting awkwardly
   between ~901px and 1180px, and smooths the handoff into the 900px tier. */
@media (max-width:1180px){
  .wrap{padding:0 40px;}
  .hero .wrap:not(.hero-banner-wrap){gap:60px;}
  .hero h1{font-size:4.6rem;}
  .hero p{font-size:1.25rem;}
  .split.mission h2{font-size:3.2rem;}
  .split.mission .lede{font-size:1.25rem;}
  .framework-title{font-size:3.2rem;}
  .framework-lede{font-size:1.25rem;}
  .band-tan .section-title{font-size:3.2rem;}
  .band-tan .lede{font-size:1.25rem;}
  /* Page-hero decorative accents are positioned with fixed offsets and can
     collide with headings once they wrap to multiple lines on narrower
     screens, so they're hidden from tablet width down. The Programs hero's
     corner blobs are excluded — they're clipped at the section edges and
     don't sit near the text, so they're safe to keep and just shrink. */
  .page-hero .deco{display:none;}
  .page-hero .deco.programs-hero-blob-black{display:block; width:170px !important; height:170px !important; top:-50px !important; right:-50px !important;}
  .page-hero .deco.programs-hero-blob-orange{display:block; width:120px !important; height:120px !important; bottom:-40px !important; left:-40px !important;}
  .programs-hero .lede{font-size:1.5rem;}
}

@media (max-width:900px){
  .wrap{padding:0 28px;}
  .hero{padding-top:0;}
  .hero .wrap:not(.hero-banner-wrap){grid-template-columns:1fr; gap:36px; padding-bottom:36px;}
  .hero h1{font-size:2.6rem;}
  .hero p{font-size:1.05rem;}
  .pillars, .team-grid, .card-grid, .split, .collab-grid, .resources-block{grid-template-columns:1fr 1fr;}
  .label-row{grid-template-columns:1fr;}
  .forms-row{grid-template-columns:1fr;}
  .forms-row .divider{width:100%; height:2px;}
  form .row{grid-template-columns:1fr 1fr;}
  .timeline-wrap::before{left:20px;}
  .timeline-row{grid-template-columns:1fr; gap:20px; padding-left:50px;}
  .timeline-row.right .timeline-card, .timeline-row.left .timeline-card{grid-column:1;}
  .timeline-connector{display:none;}
  .pillar-card p{max-width:100%;}
  .watermark-head{font-size:2.6rem;}
  footer .wrap{grid-template-columns:1fr; text-align:left; align-items:start; padding-bottom:20px;}
  footer .contact-block{text-align:left;}
  footer .socials{justify-content:flex-start;}
  footer .bottom-bar .wrap{flex-direction:column; align-items:flex-start; gap:8px;}

  /* Header / mobile nav */
  .site-header{padding:20px 0 18px; position:fixed; top:0; left:0; right:0; z-index:100; background:var(--cream); box-shadow:0 2px 12px rgba(32,25,20,.08);}
  .site-header .wrap{display:flex; flex-wrap:nowrap; justify-content:space-between;}
  .brand img.logo-primary{height:64px;}
  body{padding-top:var(--header-h, 104px);}
  .nav-toggle{display:flex;}
  .programs-hero .lede{font-size:1.25rem;}
  nav{
    position:fixed; top:var(--header-h, 104px); right:0; left:auto;
    height:calc(100vh - var(--header-h, 104px)); width:min(80vw,320px);
    background:var(--cream);
    flex-direction:column; flex-wrap:nowrap;
    gap:0;
    padding:0 32px 32px;
    transform:translateX(100%);
    transition:transform .3s ease;
    box-shadow:-8px 0 30px rgba(32,25,20,.15);
    z-index:15;
    align-items:flex-end;
    overflow-y:auto;
    justify-content:flex-start;
  }
  nav.open{transform:translateX(0);}
  nav a{width:100%; padding:16px 0; font-size:1.15rem; border-bottom:1px solid rgba(32,25,20,.1); text-align:right; margin:0;}
  nav a:first-child{border-top:1px solid rgba(32,25,20,.1);}
  nav a.active{border-bottom:1px solid rgba(32,25,20,.1); color:var(--orange-dark);}
  body.nav-open{overflow:hidden;}
  body.nav-open::after{
    content:"";
    position:fixed; inset:0; z-index:10;
    background:rgba(32,25,20,.35);
  }
}

@media (max-width:600px){
  .wrap{padding:0 18px;}
  .brand img.logo-primary{height:56px;}
  section{padding:44px 0;}
  .pillars, .team-grid, .card-grid, .split, .collab-grid, .resources-block, .label-row .content-row{grid-template-columns:1fr;}
  .card-grid{grid-template-columns:1fr !important;}
  form .row{grid-template-columns:1fr;}
  form .row .row{grid-template-columns:1fr 1fr 1fr;}
  .thumb-row, .past-row{gap:14px;}
  .thumb-card, .past-card{width:calc(50% - 7px);}
  .thumb-card img, .past-card img{width:100%; height:auto; aspect-ratio:1/1;}
  .event-item{max-width:100%;}
  .hero h1{font-size:2.1rem;}
  .hero p{font-size:1rem;}
  .split img{aspect-ratio:16/10;}
  .split.mission h2{font-size:2.1rem;}
  .split.mission .lede{font-size:1rem;}
  .about-intro-text p{font-size:1.2rem;}
  .framework-title{font-size:2.1rem;}
  .framework-lede{font-size:1rem;}
  .framework-deco{display:none;}
  .band-tan .section-title{font-size:2.1rem;}
  .band-tan .lede{font-size:1rem;}
  .recap-quarter h3{font-size:1.4rem;}
  .page-hero h1{font-size:2.2rem;}
  .programs-hero h1{font-size:2.2rem; white-space:normal; max-width:340px; margin:0 auto;}
  .programs-hero .lede{font-size:1.05rem;}
  .section-title{font-size:1.7rem;}
  .split.reverse, .split{grid-template-columns:1fr;}
  .pillar-card{min-height:0; padding-right:110px;}
  .pillar-card .icon-badge{width:64px; height:64px; top:20px; right:16px;}
  .pillar-card .icon-badge svg{width:34px; height:34px;}
  .pillar-card:nth-child(2) .icon-badge{bottom:auto; top:20px;}
  .timeline-card{padding:18px 20px;}
  .carousel-btn{width:36px; height:36px;}
  .accordion-item span{font-size:1.05rem;}
  footer .brand img.logo-primary{height:80px;}
  .deco{display:none;}
  .page-hero .deco.programs-hero-blob-black,
  .page-hero .deco.programs-hero-blob-orange{display:block;}
}

/* Touch targets: bump interactive elements to the ~44px minimum on touch-sized
   screens without changing desktop's tighter, mouse-driven sizing. */
@media (max-width:900px){
  .btn{padding:15px 30px; min-height:44px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;}
  input, select, textarea{padding:12px 12px; min-height:44px; box-sizing:border-box;}
  textarea{min-height:100px;}
}

@media (max-width:400px){
  .thumb-card, .past-card{width:100%;}
  .btn-row{flex-direction:column; align-items:stretch;}
  .btn-row .btn{text-align:center;}
}