:root{
  --header:#3b5576;
  --deep:#424271;
  --card:#243f64;
  --gold:#efc457;
  --light:#f7f7f6;
  --split:#dfe0e7;
  --text:#111;
  --white:#fff;
  --page-pad:clamp(18px,3.2vw,64px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0;min-width:320px;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#fff;line-height:1.45;overflow-x:hidden}
a{text-decoration:none}
img{display:block;max-width:100%;height:auto}
button,input{font:inherit}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:36px;border:0;border-radius:999px;padding:.62em 2.1em;font-size:clamp(12px,.72vw,14px);font-weight:700;line-height:1;cursor:pointer;white-space:nowrap}
.btn-gold{background:var(--gold);color:#fff}
.btn:focus-visible,a:focus-visible{outline:3px solid rgba(239,196,87,.75);outline-offset:3px}

/* Header scales from phones through ultrawide displays without becoming oversized. */
.site-header{min-height:clamp(104px,8.3vw,170px);background:var(--header);position:relative;display:flex;align-items:center;justify-content:center;padding:clamp(8px,.7vw,14px) var(--page-pad)}
.header-logo-link{display:block;line-height:0}
.header-logo{width:clamp(195px,14.7vw,300px);max-height:clamp(88px,6.5vw,132px);object-fit:contain}
.header-donate{position:absolute;right:var(--page-pad);top:clamp(12px,1vw,20px);min-height:0;padding:.52em 2.2em;font-size:clamp(11px,.65vw,13px)}

/* Original homepage hero proportions, with fluid height for laptops and phones. */
.hero-carousel{height:clamp(220px,17.82vw,365px);position:relative;overflow:hidden;background:#fff}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;pointer-events:none}
.hero-slide.is-active{opacity:1;pointer-events:auto}
.hero-slide-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(30px,2.2vw,48px);background:#fff;padding:28px var(--page-pad)}
.hero-brand-logo{width:clamp(240px,17vw,350px);max-height:clamp(120px,8.5vw,175px);object-fit:contain}
.hero-cta{padding:.68em 2.8em}
.hero-slide-photo{background:#000}
.hero-collage{width:100%;height:100%;object-fit:cover;object-position:center 50%}

/* Mission and testimonials */
.mission-area{background:var(--deep);color:#fff;padding:clamp(38px,3.2vw,66px) var(--page-pad) clamp(52px,4.2vw,86px)}
.mission-copy{text-align:center;width:min(680px,100%);margin:0 auto}
.mission-copy h1{margin:0 0 clamp(16px,1.3vw,26px);color:var(--gold);font-size:clamp(30px,2.2vw,45px);line-height:1.08;text-shadow:0 3px 4px rgba(0,0,0,.25)}
.mission-copy p{margin:0;font-size:clamp(13px,.76vw,15px);line-height:1.72;font-weight:600}
.mission-divider{width:min(420px,52vw);margin:clamp(26px,2.2vw,44px) auto clamp(24px,2vw,40px);border-top:4px dotted rgba(255,255,255,.92)}
.testimonial-grid{width:min(1500px,100%);margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(46px,7vw,145px)}
.testimonial-card{text-align:center;min-width:0}
.avatar{width:clamp(94px,6vw,122px);aspect-ratio:1;border-radius:50%;object-fit:cover;margin:0 auto clamp(11px,.9vw,18px);border:2px solid #fff}
.testimonial-card h3{font-family:"Arial Narrow",Arial,sans-serif;color:var(--gold);font-size:clamp(13px,.78vw,16px);margin:0 0 clamp(12px,1vw,18px)}
.testimonial-card p{width:min(310px,100%);margin:0 auto;font-family:"Arial Narrow",Arial,sans-serif;font-size:clamp(12px,.72vw,14px);line-height:1.62;font-weight:700;overflow-wrap:anywhere}

/* Weekly classes */
.classes-section{background:var(--light);padding:clamp(40px,3.2vw,66px) var(--page-pad) clamp(44px,3.5vw,72px)}
.classes-section h2{text-align:center;color:var(--deep);font-family:"Arial Narrow",Arial,sans-serif;font-size:clamp(28px,1.9vw,39px);margin:0 0 clamp(30px,2.4vw,50px)}
.class-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,1.4vw,28px);width:min(1900px,100%);margin:0 auto}
.class-card{min-height:clamp(104px,6.6vw,135px);background:var(--card);color:#fff;padding:clamp(18px,1.25vw,26px);border-radius:clamp(13px,1vw,19px);text-align:center;box-shadow:clamp(4px,.4vw,8px) clamp(5px,.5vw,10px) 7px rgba(0,0,0,.25);display:flex;flex-direction:column;justify-content:center;min-width:0}
.class-card h3{font-size:clamp(15px,.9vw,19px);line-height:1.18;margin:0 0 6px;overflow-wrap:anywhere}
.class-card p{font-size:clamp(10px,.65vw,13px);margin:0;line-height:1.35}

/* Kollel feature */
.split-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:clamp(380px,26vw,535px)}
.split-logo{background:var(--deep);display:flex;align-items:center;justify-content:center;padding:clamp(34px,4vw,82px)}
.kollel-logo-img{width:clamp(270px,26vw,530px);max-height:clamp(220px,17vw,350px);object-fit:contain}
.split-copy{background:var(--split);padding:clamp(38px,4vw,82px) clamp(38px,6vw,125px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.split-copy h2{margin:0 0 clamp(18px,1.5vw,30px);color:#fff;text-transform:uppercase;font-size:clamp(38px,3.4vw,70px);line-height:.9;letter-spacing:-.025em}
.split-copy p{width:min(430px,100%);margin:0;font-family:"Arial Narrow",Arial,sans-serif;font-size:clamp(13px,.78vw,16px);line-height:1.58;font-style:italic;color:#444}

/* What we do */
.story-section{min-height:clamp(620px,44vw,850px);background:linear-gradient(rgba(238,235,229,.84),rgba(238,235,229,.84)),linear-gradient(135deg,#d7dde2,#f4efe6);display:grid;grid-template-columns:minmax(var(--page-pad),1fr) minmax(340px,620px) minmax(var(--page-pad),.45fr);align-items:center;padding-block:clamp(56px,4.5vw,92px)}
.story-copy{grid-column:2;width:100%;min-width:0}
.eyebrow{color:var(--gold);font-weight:800;letter-spacing:.13em;font-size:clamp(14px,.9vw,18px);text-shadow:0 2px 4px rgba(0,0,0,.28);margin:0 0 clamp(22px,1.8vw,36px)}
.story-copy h2{text-transform:uppercase;font-size:clamp(45px,4.1vw,72px);line-height:1.1;color:#fff;margin:0 0 clamp(28px,2.2vw,44px);text-shadow:0 2px 8px rgba(0,0,0,.15)}
.story-copy p{font-size:clamp(13px,.8vw,16px);line-height:1.68;font-weight:700;margin:0 0 clamp(18px,1.25vw,25px)}
.story-copy .btn{margin-top:clamp(16px,1.4vw,28px)}

/* Footer retains the original compact style but scales cleanly. */
.site-footer{min-height:clamp(112px,7vw,145px);background:var(--header);color:#fff;text-align:center;padding:clamp(9px,.8vw,16px) var(--page-pad) clamp(8px,.65vw,13px);display:flex;flex-direction:column;align-items:center;justify-content:center}
.footer-logo{width:clamp(170px,11.5vw,235px);max-height:clamp(62px,4.5vw,92px);object-fit:contain}
.footer-rule{width:min(520px,72vw);border-top:1px solid rgba(255,255,255,.7);margin-top:clamp(-5px,-.25vw,-2px)}
.site-footer p{font-size:clamp(8px,.48vw,10px);margin:5px 0 0}

/* Donation page */
.content{width:min(1260px,100%);margin:0 auto}.content.narrow{width:min(760px,100%)}.centered{text-align:center}
.donate-hero{background:#fff;padding:clamp(38px,3.2vw,66px) var(--page-pad) clamp(25px,2.1vw,42px)}
.donate-hero h1{font-size:clamp(30px,2.2vw,45px);color:var(--gold);margin:0 0 10px}
.donate-hero p{font-size:clamp(13px,.78vw,16px);margin:0;line-height:1.6}
.donate-section{background:#fff;padding:10px var(--page-pad) clamp(60px,5vw,100px)}
.donate-shell{width:min(780px,100%)}
.embed-card{background:#fff;border:1px solid #ddd;border-radius:16px;padding:clamp(22px,2.2vw,42px);box-shadow:0 14px 32px rgba(0,0,0,.08)}
.embed-card h2{text-align:center;font-size:clamp(23px,1.7vw,34px)}
.setup-note{background:#fff7dc;border:1px solid var(--gold);padding:14px;border-radius:8px}
.embed-placeholder{min-height:clamp(330px,28vw,480px);border:2px dashed #bbb;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(22px,2vw,38px);background:#fafafa}
.lock-icon{width:44px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#11b56d;color:#fff;font-weight:800}

/* Laptops and landscape tablets */
@media(max-width:1240px){
  .class-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .testimonial-grid{gap:clamp(28px,4vw,54px)}
  .story-section{grid-template-columns:minmax(var(--page-pad),.75fr) minmax(340px,590px) var(--page-pad)}
}

/* Tablets */
@media(max-width:900px){
  .testimonial-grid{grid-template-columns:1fr;gap:42px;width:min(560px,100%)}
  .testimonial-card p{width:min(390px,100%)}
  .class-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split-section{grid-template-columns:1fr}
  .split-logo{min-height:clamp(290px,45vw,400px)}
  .split-copy{min-height:clamp(360px,48vw,460px)}
  .split-copy p{width:min(520px,100%)}
  .story-section{display:block;min-height:auto;padding:clamp(62px,9vw,92px) var(--page-pad)}
  .story-copy{width:min(650px,100%);margin:0 auto}
}

/* Phones */
@media(max-width:560px){
  :root{--page-pad:18px}
  .site-header{min-height:102px;justify-content:flex-start;padding-right:112px}
  .header-logo{width:min(190px,52vw);max-height:82px}
  .header-donate{right:14px;top:14px;padding:.52em 1.55em}
  .hero-carousel{height:clamp(310px,82vw,410px)}
  .hero-slide-brand{gap:34px}
  .hero-brand-logo{width:min(280px,78vw);max-height:145px}
  .hero-collage{object-position:center}
  .mission-area{padding-top:42px}
  .mission-divider{width:min(360px,78vw)}
  .class-grid{grid-template-columns:1fr}
  .class-card{min-height:102px;padding:20px}
  .split-logo{min-height:280px;padding:34px 20px}
  .kollel-logo-img{width:min(330px,88vw);max-height:230px}
  .split-copy{min-height:360px;padding:48px 24px}
  .split-copy h2{font-size:clamp(39px,11vw,52px)}
  .story-copy h2{font-size:clamp(41px,12vw,56px)}
  .story-copy h2 br{display:none}
  .site-footer{min-height:118px}
  .footer-logo{width:185px}
  .footer-rule{width:min(330px,82vw)}
}

/* Very narrow phones */
@media(max-width:380px){
  .site-header{padding-left:12px;padding-right:98px}
  .header-logo{width:168px}
  .header-donate{right:10px;padding:.5em 1.25em}
  .hero-carousel{height:340px}
  .mission-copy h1{font-size:29px}
  .split-copy h2{font-size:38px}
  .story-copy h2{font-size:40px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-slide{transition:none}
}

/* v5: fluid sizing and proportional layout across full-width, split-screen, tablet, and phone views */
:root{
  --reading-size:clamp(15px,0.86vw,18px);
  --small-reading-size:clamp(13px,0.72vw,16px);
}

/* A more substantial, balanced header that stays proportional at any viewport width. */
.site-header{
  min-height:clamp(116px,8vw,164px);
  padding:clamp(10px,.7vw,15px) var(--page-pad);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.08);
}
.header-logo{
  width:clamp(235px,17vw,350px);
  max-height:clamp(94px,6.9vw,142px);
}
.header-donate{
  right:clamp(16px,2.3vw,48px);
  top:clamp(14px,1vw,21px);
  padding:.58em 2.25em;
  box-shadow:0 3px 8px rgba(0,0,0,.12);
}

/* Preserve the collage's true 2048x365 ratio on desktop and split-screen widths.
   On very narrow screens, a sensible minimum height keeps the hero useful. */
.hero-carousel{
  height:max(180px,calc(100vw * 365 / 2048));
  max-height:none;
  container-type:inline-size;
}
.hero-slide-brand{
  gap:clamp(14px,2.1cqw,42px);
  padding:clamp(14px,2cqw,34px) var(--page-pad);
}
.hero-brand-logo{
  width:clamp(210px,18cqw,370px);
  max-height:62%;
}
.hero-cta{
  min-height:clamp(31px,2.2cqw,40px);
  padding:.58em 2.7em;
}
.hero-collage{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

/* Make descriptive copy comfortably readable without becoming oversized. */
.mission-copy{width:min(790px,100%)}
.mission-copy p{
  font-size:var(--reading-size);
  line-height:1.72;
}
.testimonial-card p{
  width:min(365px,100%);
  font-size:var(--small-reading-size);
  line-height:1.68;
}
.testimonial-card h3{font-size:clamp(14px,.85vw,17px)}
.class-card p{font-size:clamp(12px,.72vw,15px)}
.split-copy p{
  width:min(500px,100%);
  font-size:var(--reading-size);
  line-height:1.66;
}

/* Center the complete What We Do section, matching the visual intent of the original. */
.story-section{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:clamp(590px,40vw,830px);
  padding:clamp(64px,5vw,104px) var(--page-pad);
  text-align:center;
}
.story-copy{
  width:min(900px,100%);
  margin:0 auto;
}
.story-copy h2{
  font-size:clamp(48px,4.25vw,80px);
  line-height:1.04;
  margin-inline:auto;
}
.story-copy p{
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
  font-size:var(--reading-size);
  line-height:1.72;
}
.story-copy .btn{margin-left:auto;margin-right:auto}

/* A cleaner, more deliberate footer with the logo at a useful visual size. */
.site-footer{
  min-height:clamp(150px,9vw,190px);
  padding:clamp(18px,1.3vw,28px) var(--page-pad) clamp(12px,1vw,20px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.footer-logo{
  width:clamp(225px,15vw,310px);
  max-height:clamp(82px,5.6vw,116px);
}
.footer-rule{
  width:min(540px,72vw);
  margin-top:clamp(-3px,-.15vw,0px);
}
.site-footer p{
  font-size:clamp(9px,.56vw,12px);
  margin-top:7px;
  letter-spacing:.01em;
}

/* Split-screen/laptop widths */
@media(max-width:1100px){
  .site-header{min-height:126px}
  .header-logo{width:270px}
  .hero-carousel{height:max(180px,calc(100vw * 365 / 2048))}
  .mission-copy{width:min(720px,100%)}
  .story-copy{width:min(760px,100%)}
}

/* Tablets */
@media(max-width:900px){
  .site-header{min-height:118px}
  .header-logo{width:245px}
  .story-section{text-align:center}
  .story-copy{width:min(690px,100%)}
  .split-copy{align-items:center;text-align:center}
  .split-copy p{margin-left:auto;margin-right:auto}
}

/* Phones */
@media(max-width:560px){
  .site-header{
    min-height:102px;
    justify-content:flex-start;
    padding-left:16px;
    padding-right:112px;
  }
  .header-logo{width:min(192px,53vw);max-height:82px}
  .hero-carousel{height:clamp(180px,49vw,240px)}
  .hero-brand-logo{width:min(255px,72vw);max-height:105px}
  .hero-slide-brand{gap:18px}
  .mission-copy p,.story-copy p,.split-copy p{font-size:15px}
  .story-section{padding:62px 20px;min-height:auto}
  .story-copy h2{font-size:clamp(40px,12vw,56px)}
  .story-copy h2 br{display:none}
  .site-footer{min-height:150px}
  .footer-logo{width:230px;max-height:94px}
}

/* Givebutter inline donation widget */
.givebutter-wrap{
  width:min(100%, 760px);
  min-height:clamp(900px, 110vh, 1400px);
  margin:0 auto;
}
.givebutter-wrap givebutter-widget{
  display:block;
  width:100%;
}
@media (max-width: 700px){
  .givebutter-wrap{min-height:1200px}
}

/* v7: keep the Givebutter form centered at every screen width */
.donate-section{
  display:flex;
  justify-content:center;
}
.donate-shell{
  width:100%;
  max-width:900px;
  margin-inline:auto;
  display:flex;
  justify-content:center;
}
.givebutter-wrap{
  width:100%;
  max-width:560px;
  margin-inline:auto;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.givebutter-wrap givebutter-widget{
  display:block;
  width:100%;
  max-width:560px;
  margin-inline:auto;
}

@media(max-width:620px){
  .donate-section{
    padding-left:14px;
    padding-right:14px;
  }
  .givebutter-wrap,
  .givebutter-wrap givebutter-widget{
    max-width:100%;
  }
}