/* ==========================================================================
   Geneva Bible School — genevabibleschool.org
   Static site. Hand-written CSS, no framework.

   Contents
   01  Fonts
   02  Tokens
   03  Reset & base
   04  Layout helpers
   05  Header / navigation
   06  Footer
   07  Buttons & links
   08  Home page
   09  About page
   10  Programme page
   11  Learning materials page
   12  Graduation trip page
   13  FAQ page
   14  Contact page
   15  Responsive — tablet (<=1080px)
   15b Responsive — collapsed menu (<=900px)
   16  Responsive — phone  (<=760px)
   ========================================================================== */


/* 01 — Fonts ============================================================== */

@font-face{
  font-family:'Libre Baskerville';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../assets/fonts/libre-baskerville-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Libre Baskerville';
  font-style:italic;
  font-weight:400 700;
  font-display:swap;
  src:url('../assets/fonts/libre-baskerville-italic-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../assets/fonts/montserrat-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}


/* 02 — Tokens ============================================================= */

:root{
  --red:        #F32836;   /* nav bar, welcome band, buttons, headings   */
  --red-deep:   #B2292E;   /* "next steps" band                          */
  --ink:        #1A1A1A;
  --ink-soft:   #3A3A3A;
  --paper:      #F6F5F4;   /* page background                            */
  --paper-warm: #E0DBD8;   /* footer background                          */
  --rule:       #D6D2CF;

  --serif:'Libre Baskerville', Baskerville, 'Times New Roman', Times, serif;
  --sans:'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --container:1250px;
  --gutter:28px;

  --nav-h:96px;
}


/* 03 — Reset & base ======================================================= */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:14px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.16}

p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

a{color:inherit}

ul{margin:0;padding:0;list-style:none}

strong,b{font-weight:700}

::selection{background:var(--red);color:#fff}

:focus-visible{outline:2px solid var(--red);outline-offset:2px}

.skip-link{
  position:absolute;left:8px;top:8px;z-index:999;
  transform:translateY(-200%);
  background:#fff;color:var(--ink);padding:12px 18px;font-family:var(--sans);font-size:13px;
}
.skip-link:focus{transform:none}

.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}


/* 04 — Layout helpers ===================================================== */

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* A full-bleed band whose inner content still lines up with .container */
.band{width:100%}

.section{padding:56px 0}
.section--tight{padding:38px 0}

/* Centred red page title, used on every inner page */
.page-title{
  font-size:clamp(25px,3.45vw,43px);
  color:var(--red);
  text-align:center;
  letter-spacing:.01em;
  margin-bottom:34px;
}
.page-title span{display:block}

.prose{font-size:14px;line-height:1.72}
.prose p{margin-bottom:1.25em}


/* 05 — Header / navigation ================================================ */

.site-header{
  background:var(--paper);
  position:relative;
  z-index:50;
}

.nav-shell{
  display:flex;
  align-items:stretch;
  background:var(--red);
  min-height:var(--nav-h);
}

.nav-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 clamp(14px,2.35vw,30px);
  flex:0 0 auto;
}
.nav-brand img{height:clamp(28px,3.1vw,40px);width:auto}

.nav-toggle{display:none}

.nav-burger{
  display:none;
  margin-left:auto;
  align-items:center;
  gap:10px;
  padding:0 22px;
  cursor:pointer;
  color:#fff;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.nav-burger .bars{position:relative;display:block;width:22px;height:16px}
.nav-burger .bars span{
  position:absolute;left:0;display:block;width:22px;height:2px;background:#fff;
  transition:transform .25s ease,opacity .2s ease;
}
.nav-burger .bars span:nth-child(1){top:0}
.nav-burger .bars span:nth-child(2){top:7px}
.nav-burger .bars span:nth-child(3){top:14px}

.site-nav{
  flex:1 1 auto;
  display:flex;
  align-items:stretch;
}
.site-nav ul{
  display:flex;
  align-items:stretch;
  width:100%;
  justify-content:space-between;
}
.site-nav li{display:flex}
.site-nav a{
  display:flex;
  align-items:center;
  padding:0 clamp(6px,1.02vw,13px);
  text-transform:uppercase;
  color:#fff;
  text-decoration:none;
  font-size:clamp(12px,1.17vw,15px);
  letter-spacing:.02em;
  white-space:nowrap;
  transition:background-color .18s ease,color .18s ease;
}
.site-nav a:hover{background:rgba(0,0,0,.13)}
.site-nav a[aria-current="page"]{
  background:var(--paper);
  color:var(--ink);
}


/* 06 — Footer ============================================================= */

.site-footer{
  background:var(--paper-warm);
  padding:44px 0 34px;
  margin-top:0;
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr 1.15fr .9fr;
  gap:30px;
  align-items:start;
}

.footer-brand{display:flex;flex-direction:column;justify-content:space-between;height:100%;gap:38px}
.footer-brand img{width:min(290px,100%)}
.footer-copy{font-size:12px;color:var(--ink-soft)}

.footer-contact{font-size:13px;line-height:1.55}
.footer-contact dt{font-size:12px;color:var(--ink-soft);margin-top:14px}
.footer-contact dt:first-child{margin-top:0}
.footer-contact dd{margin:0}
.footer-contact .phone{font-size:17px}
.footer-contact a{text-decoration:none}
.footer-contact a:hover{text-decoration:underline}

.newsletter{margin-top:26px}
.newsletter .form-note{margin-bottom:12px;max-width:330px}
.newsletter h2{
  font-size:15px;letter-spacing:.04em;margin-bottom:9px;font-weight:400;
}
.newsletter form{display:flex;max-width:330px}
.newsletter input{
  flex:1 1 auto;min-width:0;
  font-family:var(--serif);font-size:12px;font-style:italic;
  padding:9px 12px;border:1px solid transparent;background:#fff;color:var(--ink);
}
.newsletter input::placeholder{color:#9a9a9a;font-style:italic}
.newsletter button{
  flex:0 0 auto;border:0;background:var(--red);color:#fff;cursor:pointer;
  font-family:var(--sans);font-size:11px;letter-spacing:.12em;padding:0 14px;
}
.newsletter button:hover{background:var(--red-deep)}

.footer-motto{
  display:flex;flex-direction:column;justify-content:space-between;height:100%;gap:38px;
}
.footer-motto p{
  font-size:27px;line-height:1.2;margin:0;
}
.footer-motto .accent{color:var(--red)}
.footer-social{display:flex;gap:18px;justify-content:flex-end;align-items:center}
.footer-social a{opacity:.85;transition:opacity .18s ease}
.footer-social a:hover{opacity:1}
.footer-social img{height:19px;width:auto}


/* 07 — Buttons & links ==================================================== */

.btn{
  display:inline-block;
  font-family:var(--serif);
  font-weight:700;
  font-size:16px;
  letter-spacing:.03em;
  color:#fff;
  background:var(--red);
  text-decoration:none;
  padding:13px 34px;
  border:0;
  cursor:pointer;
  transition:background-color .18s ease;
}
.btn:hover{background:var(--red-deep)}

/* red bar + black caret, as drawn on the home page */
.btn-split{display:inline-flex;align-items:stretch;text-decoration:none}
.btn-split .label{
  background:var(--red);color:#fff;font-weight:700;font-size:30px;letter-spacing:.03em;
  padding:12px 44px;display:flex;align-items:center;
}
.btn-split .caret{
  background:#000;width:53px;display:flex;align-items:center;justify-content:center;
}
.btn-split .caret::after{
  content:"";border-left:9px solid transparent;border-right:9px solid transparent;
  border-top:11px solid #fff;display:block;
}
.btn-split:hover .label{background:var(--red-deep)}

.btn-split--dark .label{background:#000;font-size:17px;padding:10px 17px}
.btn-split--dark .caret{background:var(--red);width:39px}
.btn-split--dark .caret::after{border-left-width:7px;border-right-width:7px;border-top-width:9px}
.btn-split--dark:hover .label{background:#222}

.learn-more{
  display:inline-block;
  font-weight:700;
  font-size:13px;
  letter-spacing:.03em;
  text-decoration:none;
  color:var(--ink);
}
.learn-more:hover{color:var(--red)}


/* 08 — Home page ========================================================== */

/* hero ------------------------------------------------------------------- */
/* Overlay sizes and positions are percentages of the photo, so the whole
   composition scales together at every viewport width. */
.hero{position:relative;line-height:0}
.hero img.hero-photo{width:100%;height:auto;aspect-ratio:1920/1080;object-fit:cover}
.hero .stamp    {position:absolute;top:10.8%;right:10.1%;width:12.2%}
.hero .hero-logo{position:absolute;bottom:12.7%;left:7.5%;width:32.7%}
.hero .joinus   {position:absolute;bottom:15.4%;right:5.5%;width:20.3%}

/* headline row ----------------------------------------------------------- */
.headline-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
  padding:52px 0 46px;
}
.headline{
  text-align:right;
  font-size:clamp(25px,3.5vw,44px);
  line-height:1.2;
  letter-spacing:.005em;
}
.headline .b{font-weight:700}
.headline .red{color:var(--red)}
.headline span{display:block}

.headline-cta{align-self:center;justify-self:end}
.headline-cta .tagline{
  margin-top:18px;
  font-weight:700;
  font-size:17px;
  line-height:1.35;
}

/* three columns ---------------------------------------------------------- */
.cards-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  padding-bottom:56px;
}
.card figure{margin:0}
.card img{width:100%;aspect-ratio:208/130;height:auto;object-fit:cover}
.card h3{
  font-size:14px;font-weight:700;color:var(--red);text-align:center;
  letter-spacing:.03em;margin:18px 0 14px;
}
.card p{font-size:13px;line-height:1.66;text-align:justify;hyphens:auto}
.card .learn-more-wrap{text-align:center;margin-top:16px}

/* welcome band ----------------------------------------------------------- */
.welcome{display:grid;grid-template-columns:39fr 61fr;background:var(--red)}
.welcome__img{width:100%;height:100%;object-fit:cover;min-height:280px}
.welcome__body{
  color:#fff;
  padding:52px clamp(28px,7vw,120px) 52px clamp(28px,4.5vw,72px);
  display:flex;flex-direction:column;justify-content:center;
}
.welcome__body h2{font-size:clamp(25px,3.4vw,43px);line-height:1.2;margin-bottom:26px}
.welcome__body p{font-size:13px;line-height:1.72;max-width:62ch}

/* feature strip ---------------------------------------------------------- */
.features{
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
  padding:46px 0 50px;
}
.feature{display:flex;gap:16px;align-items:flex-start}
.feature img{width:44px;height:auto;flex:0 0 auto;margin-top:2px}
.feature h3{
  font-size:14px;color:var(--red);letter-spacing:.03em;line-height:1.2;margin-bottom:10px;
}
.feature p{font-size:13px;line-height:1.5;margin:0}

/* next steps + testimonies ----------------------------------------------- */
.split-bands{display:grid;grid-template-columns:1fr 1fr}
.next-steps{background:var(--red-deep);color:#fff}
.testimonies{background:#000;color:#fff}
.split-bands__inner{padding:48px 0 52px}
/* left half aligns to the container's left edge, right half to its right edge */
.next-steps .split-bands__inner{
  max-width:calc(var(--container) / 2);
  margin-left:auto;
  padding-right:46px;
  padding-left:var(--gutter);
  width:100%;
}
.testimonies .split-bands__inner{
  max-width:calc(var(--container) / 2);
  margin-right:auto;
  padding-left:46px;
  padding-right:var(--gutter);
  width:100%;
}
.split-bands h2{font-size:clamp(25px,3.3vw,42px);margin-bottom:24px}
.next-steps p{font-size:13px;line-height:1.7;max-width:52ch}
.next-steps a{color:#fff}
.next-steps .btn-split{margin-top:24px}

.quote{position:relative;font-size:13px;line-height:1.7;max-width:56ch}
.quote::before{
  content:"\201C";position:absolute;left:-22px;top:-6px;
  font-size:36px;line-height:1;color:#fff;
}
.quote cite{display:block;margin-top:18px;font-style:normal;font-weight:700;font-size:13px}
.testimonial-nav{display:flex;gap:14px;justify-content:flex-end;margin-top:14px}
.testimonial-nav button{
  background:none;border:0;color:#fff;font-family:var(--serif);font-size:22px;
  line-height:1;cursor:pointer;padding:4px 6px;opacity:.8;
}
.testimonial-nav button:hover{opacity:1}


/* 09 — About page ========================================================= */

.page-banner img{width:100%;height:clamp(150px,17vw,235px);object-fit:cover}

.about-logo{display:block;width:min(300px,72%);margin:0 auto 34px}

.goals{display:grid;grid-template-columns:39fr 61fr;background:var(--red)}
.goals__img{width:100%;height:100%;object-fit:cover;min-height:300px}
.goals__body{
  color:#fff;
  padding:50px clamp(28px,6vw,96px) 52px clamp(28px,4.5vw,72px);
}
.goals__body h2{font-size:clamp(24px,3.3vw,42px);line-height:1.2;margin-bottom:22px}
.goals__body p{font-size:12.5px;line-height:1.66;max-width:70ch}
.goals__body .lead{margin-bottom:1.5em}

.bullets{font-size:13px;line-height:1.72}
.bullets li{position:relative;padding-left:17px;margin-bottom:.6em}
.bullets li::before{content:"\2022";position:absolute;left:0;top:0}

.scripture{
  font-weight:700;font-size:14px;line-height:1.6;margin-top:26px;max-width:88ch;
}

.instructor{background:#000;color:#fff}
.instructor__inner{
  display:grid;grid-template-columns:300px 1fr;gap:52px;align-items:start;
  padding:56px 0 60px;
}
.instructor__photo{
  width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:50%;
}
.instructor h2{font-size:clamp(24px,3.3vw,42px);line-height:1.2;margin-bottom:20px}
.instructor .role{font-weight:700;font-size:14px;margin-bottom:18px}
.instructor p{font-size:12.5px;line-height:1.72;max-width:80ch}


/* 10 — Programme page ===================================================== */

.syllabus-band{background:var(--red);padding:34px 0}
.syllabus-stage{
  display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,28px);
}
.syllabus-stage img{flex:0 1 760px;min-width:0;width:auto;box-shadow:0 10px 30px rgba(0,0,0,.22)}
.syllabus-arrow{
  background:none;border:0;color:#fff;font-family:var(--serif);font-size:34px;line-height:1;
  cursor:pointer;padding:6px 4px;opacity:.85;flex:0 0 auto;
}
.syllabus-arrow:hover{opacity:1}
.download-row{text-align:center;padding:40px 0 60px}
.link-inline{color:var(--ink);text-decoration:none;font-weight:700;overflow-wrap:anywhere}
.link-inline:hover{color:var(--red);text-decoration:underline}


/* 11 — Learning materials page ============================================ */

.materials{
  display:grid;grid-template-columns:repeat(3,1fr);gap:34px 30px;
  padding-bottom:64px;
}
.material figure{margin:0}
.material img{width:100%;aspect-ratio:1248/786;object-fit:cover}
.material h2{
  font-size:13px;font-weight:700;color:var(--red);letter-spacing:.03em;
  text-align:center;line-height:1.4;margin:18px 0 14px;
}
.material .dl{text-align:center}
.material .dl a{
  font-weight:700;font-size:12px;letter-spacing:.05em;text-decoration:none;color:var(--ink);
}
.material .dl a:hover{color:var(--red)}


/* 12 — Graduation trip page =============================================== */

.trip-photo{display:block;width:min(880px,100%);margin:0 auto}
.trip-caption{
  text-align:center;font-weight:700;font-size:12.5px;letter-spacing:.04em;
  margin:22px 0 24px;
}


/* 13 — FAQ page =========================================================== */

.faq-list{padding-bottom:70px}
.faq-list h2{font-size:14px;font-weight:700;margin-bottom:6px}
.faq-list section{margin-bottom:26px}
.faq-list p{font-size:13px;line-height:1.7;margin:0}


/* 14 — Contact page ======================================================= */

.contact-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;
  padding-bottom:70px;align-items:start;
}

.form-note{
  font-family:var(--sans);font-size:12.5px;line-height:1.5;
  padding:12px 15px;margin-bottom:24px;border-left:3px solid var(--red);background:#fff;
}
.form-note--ok{border-left-color:#2e7d32}

.field{margin-bottom:20px}
.field > label,
.fieldset-label{
  display:block;font-family:var(--sans);font-weight:700;font-size:12px;
  margin-bottom:7px;color:var(--ink);
}
.field .req{color:var(--red)}
.field input,
.field textarea{
  width:100%;font-family:var(--serif);font-size:14px;color:var(--ink);
  padding:8px 10px;background:#fff;border:1px solid var(--ink);border-radius:0;
}
.field textarea{min-height:104px;resize:vertical;display:block}
.field input:focus,
.field textarea:focus{outline:2px solid var(--red);outline-offset:0;border-color:var(--red)}

.name-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sub-label{
  display:block;font-family:var(--sans);font-size:11px;color:var(--ink-soft);margin-top:5px;
}
fieldset{border:0;padding:0;margin:0 0 20px}

.contact-submit{text-align:center;margin-top:32px}
.contact-submit .btn{min-width:180px}

.contact-map img{width:100%}
.contact-address{font-size:12.5px;line-height:1.55;margin-top:16px}
.contact-address dt{color:var(--ink-soft)}
.contact-address dd{margin:0}


/* 15 — Responsive — tablet (<=1080px) ===================================== */

@media (max-width:1080px){
  :root{--gutter:24px}

  .nav-brand{padding:0 14px}

  .headline-row{gap:28px;padding:42px 0 38px}

  .cards-3{gap:22px}
  .card img{height:135px}

  /* four features become 2 x 2 */
  .features{grid-template-columns:repeat(2,1fr);gap:26px 30px}

  .materials{grid-template-columns:repeat(2,1fr)}

  .instructor__inner{grid-template-columns:230px 1fr;gap:36px}

  .next-steps .split-bands__inner{padding-right:30px}
  .testimonies .split-bands__inner{padding-left:30px}

  .footer-grid{grid-template-columns:1fr 1.2fr;gap:34px}
  .footer-motto{grid-column:1 / -1;flex-direction:row;align-items:flex-end;justify-content:space-between}
  .footer-social{justify-content:flex-start}
}


/* 15b — Responsive — collapsed menu (<=900px) ============================= */
/*
   The seven items stop fitting on one line a little before the rest of the
   layout needs to change, so the menu collapses on its own breakpoint.
*/

@media (max-width:900px){
  .nav-shell{flex-wrap:wrap;min-height:62px}
  .nav-brand{padding:0 18px}
  .nav-brand img{height:30px}

  .nav-burger{display:flex}

  .site-nav{
    flex-basis:100%;
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
    background:var(--red);
  }
  .nav-toggle:checked ~ .site-nav{max-height:520px}
  .nav-toggle:checked ~ .nav-burger .bars span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked ~ .nav-burger .bars span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .nav-burger .bars span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .site-nav ul{flex-direction:column;padding:0 0 8px}
  .site-nav li{width:100%;border-top:1px solid rgba(255,255,255,.22)}
  .site-nav a{width:100%;padding:14px 20px;font-size:14px}
  .site-nav a[aria-current="page"]{background:rgba(0,0,0,.22);color:#fff;font-weight:700}
}


/* 16 — Responsive — phone (<=760px) ======================================= */
/*
   Everything becomes a single column, in the same order it is read on
   desktop: column 1, then 2, then 3. Nothing is hidden or duplicated.
*/

@media (max-width:760px){
  :root{--gutter:20px}

  body{font-size:15px}

  /* --- home --- */
  /* the hero keeps its composition, just a touch larger so the wordmark
     and the "Join us!" script stay legible on a small screen */
  .hero img.hero-photo{aspect-ratio:16/10}
  .hero .stamp    {width:17%;top:7%;right:5%}
  .hero .hero-logo{width:41%;left:5%;bottom:9%}
  .hero .joinus   {width:26%;right:5%;bottom:11%}

  .headline-row{grid-template-columns:1fr;gap:26px;padding:34px 0 30px;text-align:center}
  .headline{text-align:center;font-size:25px}
  .headline-cta{display:flex;flex-direction:column;align-items:center;text-align:center}
  .btn-split .label{font-size:17px;padding:11px 24px}

  .cards-3{grid-template-columns:1fr;gap:34px;padding-bottom:38px}
  .card img{height:190px}
  .card p{text-align:left}

  .welcome{grid-template-columns:1fr}
  .welcome__img{min-height:200px;max-height:230px}
  .welcome__body{padding:34px var(--gutter) 38px}

  .features{grid-template-columns:1fr;gap:24px;padding:34px 0 36px}

  .split-bands{grid-template-columns:1fr}
  .next-steps .split-bands__inner,
  .testimonies .split-bands__inner{
    max-width:none;margin:0;padding:36px var(--gutter) 40px;
  }
  .quote{margin-left:20px}
  .quote::before{left:-20px}

  /* --- inner pages --- */
  .page-title{font-size:26px;margin-bottom:24px}
  .section{padding:36px 0}

  .page-banner img{height:150px}
  .about-logo{width:min(240px,78%);margin-bottom:26px}

  .goals{grid-template-columns:1fr}
  .goals__img{min-height:200px;max-height:240px}
  .goals__body{padding:34px var(--gutter) 38px}

  .instructor__inner{grid-template-columns:1fr;gap:26px;padding:38px 0 42px;text-align:center}
  .instructor__photo{width:min(210px,60%);margin:0 auto}
  .instructor p,.instructor .role{text-align:left}

  .materials{grid-template-columns:1fr;gap:32px;padding-bottom:42px}

  /* on a phone the arrows sit on top of the spread instead of beside it */
  .syllabus-band{padding:22px 0}
  .syllabus-stage{position:relative;gap:0}
  .syllabus-stage img{flex:1 1 100%}
  .syllabus-arrow{
    position:absolute;top:50%;transform:translateY(-50%);font-size:30px;
    background:rgba(0,0,0,.35);color:#fff;padding:6px 10px;
  }
  .syllabus-arrow:first-child{left:0}
  .syllabus-arrow:last-child{right:0}
  .download-row{padding:28px 0 40px}

  .contact-grid{grid-template-columns:1fr;gap:34px;padding-bottom:44px}
  .name-row{grid-template-columns:1fr;gap:14px}
  .contact-submit .btn{width:100%}

  .faq-list{padding-bottom:44px}

  /* --- footer --- */
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .footer-brand{gap:22px}
  .footer-brand img{width:min(250px,70%)}
  .footer-motto{flex-direction:column;align-items:flex-start;gap:24px}
  .footer-motto p{font-size:24px}
  .footer-social{justify-content:flex-start}
  .newsletter form{max-width:none}
}

@media (max-width:400px){
  .headline{font-size:22px}
  .hero .hero-logo{width:125px}
  .hero .joinus{width:82px}
}