/* =====================================================================
   Schwimmschule Graf – zentrales Stylesheet
   Marke: Seepferdchen · Königsblau (#2E3192) + Cyan (#29ABE2)
   Aufbau: 1) Tokens 2) Reset/Basis 3) Layout 4) Header/Nav/Banner
           5) Buttons 6) Hero 7) Sektionen 8) Karten 9) Galerie
           10) Über 11) CTA 12) Formular 13) FAQ 14) Footer
           15) Utilities/Animationen 16) Responsive
   ===================================================================== */

/* 1) TOKENS ----------------------------------------------------------- */
:root{
  --brand:#2E3192;         /* Königsblau (Logo) */
  --brand-600:#26286f;
  --brand-700:#1d1f57;
  --cyan:#29abe2;          /* Cyan (Logo) */
  --cyan-600:#1b8ec1;
  --cyan-050:#eaf7fd;
  --sun:#ffc24b;           /* warmer Akzent, sehr sparsam */

  --ink:#1f2733;           /* Fließtext */
  --muted:#5a6b78;         /* Sekundärtext */
  --white:#ffffff;
  --bg:#ffffff;
  --bg-soft:#f2f8fc;       /* helle Sektionstönung */
  --bg-brand:#2E3192;
  --border:#e4ebf1;
  --border-strong:#cfdae4;

  --radius:12px;
  --radius-lg:18px;
  --radius-pill:999px;
  --shadow-sm:0 1px 3px rgba(31,39,51,.06),0 1px 2px rgba(31,39,51,.04);
  --shadow:0 8px 24px rgba(31,39,51,.08),0 2px 6px rgba(31,39,51,.05);
  --shadow-lg:0 18px 46px rgba(31,39,51,.14);

  --container:1180px;
  --font:"Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --fs-h1:clamp(1.9rem,4.2vw,3rem);
  --fs-h2:clamp(1.5rem,2.6vw,2.1rem);
  --fs-h3:1.2rem;
}

/* 2) RESET / BASIS ---------------------------------------------------- */
@font-face{font-family:"Roboto";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/roboto-400.woff2") format("woff2")}
@font-face{font-family:"Roboto";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/roboto-500.woff2") format("woff2")}
@font-face{font-family:"Roboto";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/roboto-700.woff2") format("woff2")}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  font-size:1.0625rem;line-height:1.7;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
picture{display:contents}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--cyan-600)}
h1,h2,h3,h4{line-height:1.2;color:var(--ink);margin:0 0 .5em;font-weight:700}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);font-weight:500}
p{margin:0 0 1rem}
ul{margin:0;padding:0}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:4px}

/* 3) LAYOUT ----------------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.section{padding:clamp(3rem,7vw,5.5rem) 0}
.section--soft{background:var(--bg-soft)}
.section--tight{padding:clamp(2rem,4vw,3rem) 0}
.section__head{max-width:52rem;margin:0 auto clamp(1.6rem,4vw,2.6rem);text-align:center}
.section__head--left{margin-inline:0;text-align:left}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cyan-600);margin-bottom:.6rem}
.lead{font-size:1.125rem;color:var(--muted);margin:0}
.grid{display:grid;gap:1.25rem}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* 4) HEADER / NAV / BANNER ------------------------------------------- */
#site-banner:empty{display:none}
.banner{background:var(--brand);color:#fff;font-size:.95rem}
.banner__inner{display:flex;align-items:center;justify-content:center;gap:.9rem;
  flex-wrap:wrap;padding:.55rem 1rem;text-align:center}
.banner__inner .icon{color:var(--sun)}
.banner__link{color:#fff;text-decoration:underline;font-weight:500;white-space:nowrap}
.banner__link:hover{color:var(--cyan)}

.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--border)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;min-height:68px}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--ink);font-size:1.15rem}
.brand:hover{color:var(--ink)}
.brand__mark{width:40px;height:40px;flex:0 0 auto}
.brand__name{line-height:1.05}
.brand__name small{display:block;font-size:.72rem;font-weight:500;color:var(--cyan-600);letter-spacing:.02em}
.nav{display:flex;align-items:center;gap:1.5rem}
.nav__list{display:flex;align-items:center;gap:1.4rem;list-style:none}
.nav__link{color:var(--ink);font-weight:500;font-size:1rem;padding:.35rem 0;position:relative}
.nav__link::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;
  background:var(--cyan);transition:right .25s ease}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--brand)}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{right:0}
.nav-toggle{display:none;border:1px solid var(--border-strong);background:#fff;
  width:44px;height:44px;border-radius:var(--radius);cursor:pointer;color:var(--brand);
  align-items:center;justify-content:center}
.nav-toggle svg{width:24px;height:24px}

/* 5) BUTTONS ---------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:inherit;font-weight:500;
  font-size:1rem;line-height:1;padding:.8rem 1.4rem;border-radius:var(--radius-pill);
  border:2px solid transparent;cursor:pointer;transition:transform .12s,background .18s,color .18s,box-shadow .18s}
.btn:active{transform:translateY(1px)}
.btn .icon{width:1.1em;height:1.1em}
.btn--primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--brand-600);color:#fff;box-shadow:var(--shadow)}
.btn--accent{background:var(--cyan);color:#08344a}
.btn--accent:hover{background:var(--cyan-600);color:#fff}
.btn--whatsapp{background:#128c4a;color:#fff}
.btn--whatsapp:hover{background:#0e6f3a;color:#fff}
.btn--call{background:var(--cyan);color:#08344a}
.btn--call:hover{background:var(--cyan-600);color:#fff}
.btn--ghost{background:transparent;color:var(--brand);border-color:var(--border-strong)}
.btn--ghost:hover{border-color:var(--brand);color:var(--brand);background:#fff}
.btn--light{background:#fff;color:var(--brand)}
.btn--light:hover{background:var(--cyan-050);color:var(--brand)}
.btn--lg{padding:.95rem 1.7rem;font-size:1.05rem}
.btn--block{width:100%;justify-content:center}

/* 6) HERO ------------------------------------------------------------- */
.hero{position:relative;background:var(--brand-700);color:#fff;overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(29,31,87,.92) 0%,rgba(46,49,146,.78) 42%,rgba(29,31,87,.35) 100%)}
.hero__inner{position:relative;z-index:1;padding:clamp(3.2rem,9vw,6.5rem) 0;max-width:40rem}
.hero .eyebrow{color:var(--cyan)}
.hero__title{color:#fff;font-size:var(--fs-h1);margin-bottom:1rem}
.hero__text{font-size:1.18rem;color:#e6ebff;margin-bottom:1.7rem;max-width:34rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.6rem}
.hero__badges{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);color:#fff;font-size:.9rem;font-weight:500;
  padding:.4rem .85rem;border-radius:var(--radius-pill)}
.chip .icon{width:1.05em;height:1.05em;color:var(--cyan)}

/* 6b) SEITEN-HERO (Unterseiten) */
.page-hero{position:relative;background:var(--brand-700);color:#fff;overflow:hidden;text-align:center}
.page-hero__media{position:absolute;inset:0;opacity:.26}
.page-hero__media img{width:100%;height:100%;object-fit:cover}
.page-hero__inner{position:relative;z-index:1;padding:clamp(2.6rem,6vw,4.4rem) 0;max-width:46rem;margin-inline:auto}
.page-hero .eyebrow{color:var(--cyan)}
.page-hero h1{color:#fff;margin-bottom:.5rem}
.page-hero p{color:#e6ebff;margin:0;font-size:1.1rem}

/* 6c) WECHSEL-LAYOUT (Bild + Text) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;
  margin-bottom:clamp(2.2rem,5vw,3.6rem)}
.split:last-child{margin-bottom:0}
.split__media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3}
.split__media img{width:100%;height:100%;object-fit:cover}
.split__text h2,.split__text h3{margin-bottom:.5rem}
.split__text p{color:var(--muted);margin-bottom:.7rem}
.split__text .btn{margin-top:.4rem}
@media (min-width:761px){.split--reverse .split__media{order:2}}
@media (max-width:900px){.split{grid-template-columns:1fr}.split__media{aspect-ratio:16/10}}

/* 7) SEKTIONEN / allgemeine Karten ----------------------------------- */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card__body{padding:1.4rem}

/* 8a) Feature-Kacheln ("Warum wir") */
.feature{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:1.5rem;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s}
.feature:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.feature__icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;
  justify-content:center;background:var(--cyan-050);color:var(--brand);margin-bottom:1rem}
.feature__icon svg{width:28px;height:28px}
.feature h3{margin-bottom:.35rem}
.feature p{margin:0;color:var(--muted);font-size:.98rem}

/* 8b) Standort-Karten */
.loc-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .18s,box-shadow .18s}
.loc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.loc-card--featured{border:2px solid var(--cyan);box-shadow:var(--shadow)}
.loc-card__media{position:relative;aspect-ratio:16/10;background:var(--cyan-050)}
.loc-card__media img{width:100%;height:100%;object-fit:cover}
.loc-card__badge{position:absolute;top:.8rem;left:.8rem;background:var(--sun);color:#5a3d00;
  font-size:.78rem;font-weight:700;letter-spacing:.02em;padding:.28rem .7rem;border-radius:var(--radius-pill)}
.loc-card__body{padding:1.3rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.loc-card__title{display:flex;align-items:center;gap:.5rem;font-size:1.2rem;font-weight:700;margin:0}
.loc-card__title .icon{color:var(--cyan-600);width:1.15em;height:1.15em}
.loc-card__addr{color:var(--muted);font-size:.95rem;margin:0}
.loc-card__meta{display:flex;flex-direction:column;gap:.3rem;margin:.2rem 0 .4rem;font-size:.95rem}
.loc-card__meta span{display:inline-flex;align-items:center;gap:.5rem}
.loc-card__meta .icon{color:var(--brand);width:1.05em;height:1.05em;flex:0 0 auto}
.loc-card__price{font-weight:700;color:var(--brand);font-size:1.05rem}
.loc-card__foot{margin-top:auto;padding-top:.4rem}

/* 8c) Preis-Karten */
.price-card{position:relative;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:1.8rem 1.5rem;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;text-align:center}
.price-card--featured{border:2px solid var(--cyan);box-shadow:var(--shadow)}
.price-card__tag{position:absolute;top:-.8rem;left:50%;transform:translateX(-50%);
  background:var(--cyan);color:#08344a;font-size:.78rem;font-weight:700;padding:.3rem .9rem;
  border-radius:var(--radius-pill)}
.price-card h3{font-size:1.25rem;margin-bottom:.2rem}
.price-card__amount{font-size:2.4rem;font-weight:700;color:var(--brand);line-height:1;margin:.4rem 0 .1rem}
.price-card__amount small{font-size:.95rem;font-weight:500;color:var(--muted)}
.price-card__sub{color:var(--muted);font-size:.9rem;margin-bottom:1rem}
.price-card__list{list-style:none;text-align:left;display:flex;flex-direction:column;gap:.55rem;margin:0 0 1.3rem}
.price-card__list li{display:flex;align-items:flex-start;gap:.55rem;font-size:.97rem}
.price-card__list .icon{color:var(--cyan-600);width:1.15em;height:1.15em;margin-top:.15rem;flex:0 0 auto}

/* 8d) Kurs-Karten */
.course-card{overflow:hidden}
.course-card__media{aspect-ratio:3/2;background:var(--cyan-050)}
.course-card__media img{width:100%;height:100%;object-fit:cover}
.course-card h3{margin-bottom:.35rem}
.course-card p{margin:0;color:var(--muted)}

/* 8e) Bild-Platzhalter (bis echtes Foto vorliegt) */
.img-ph{width:100%;height:100%;min-height:170px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.5rem;background:var(--cyan-050);
  text-align:center;padding:1rem}
.img-ph img{width:54px;height:54px;opacity:.65}
.img-ph span{font-size:.82rem;font-weight:500;color:var(--brand)}

/* 8f) Info-Liste (Standort-Detail) */
.info-list{list-style:none;display:flex;flex-direction:column;gap:.85rem;margin:0 0 1.4rem}
.info-list li{display:flex;align-items:flex-start;gap:.8rem}
.info-list .icon{color:var(--cyan-600);width:1.35em;height:1.35em;margin-top:.15rem;flex:0 0 auto}
.info-list strong{display:block;color:var(--ink)}
.info-list span{color:var(--muted)}

/* 9) GALERIE ---------------------------------------------------------- */
.gallery{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.gallery__item{position:relative;overflow:hidden;border-radius:var(--radius-lg);
  aspect-ratio:4/5;box-shadow:var(--shadow-sm)}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gallery__item:hover img{transform:scale(1.06)}
.gallery__item--wide{aspect-ratio:auto}

/* 10) ÜBER KATRIN ----------------------------------------------------- */
.about{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.about__media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/5;background:var(--cyan-050)}
.about__media img{width:100%;height:100%;object-fit:cover}
.about__body h2{margin-bottom:.6rem}
.signature{font-weight:700;color:var(--brand);margin-top:.5rem}

/* 11) CTA-BAND -------------------------------------------------------- */
.cta{position:relative;overflow:hidden;background:var(--brand);color:#fff}
.cta__media{position:absolute;inset:0}
.cta__media img{width:100%;height:100%;object-fit:cover}
.cta__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(29,31,87,.94),rgba(46,49,146,.82))}
.cta__inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;padding:clamp(2.2rem,5vw,3.4rem) 0}
.cta__inner h2{color:#fff;margin:0 0 .3rem}
.cta__inner p{color:#e6ebff;margin:0}

/* 12) FORMULAR -------------------------------------------------------- */
.form{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:clamp(1.4rem,3vw,2.2rem);box-shadow:var(--shadow-sm)}
.form__grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.field{display:flex;flex-direction:column;gap:.35rem}
.field--full{grid-column:1/-1}
.field label{font-weight:500;font-size:.95rem}
.field .req{color:var(--cyan-600)}
.field input,.field select,.field textarea{font-family:inherit;font-size:1rem;color:var(--ink);
  background:#fff;border:1px solid var(--border-strong);border-radius:var(--radius);padding:.7rem .85rem;
  width:100%;transition:border-color .15s,box-shadow .15s}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(41,171,226,.2)}
.checkbox{display:flex;align-items:flex-start;gap:.6rem;font-size:.95rem;color:var(--muted)}
.checkbox input{width:1.15rem;height:1.15rem;margin-top:.2rem;flex:0 0 auto;accent-color:var(--brand)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__note{font-size:.88rem;color:var(--muted);margin:.9rem 0 0}
.form-status{border-radius:var(--radius);padding:.9rem 1.1rem;margin-bottom:1.2rem;font-size:.97rem;display:none}
.form-status--ok{display:block;background:#e7f7ee;border:1px solid #b7e4cd;color:#1c6b43}
.form-status--err{display:block;background:#fdecec;border:1px solid #f4c2c2;color:#a12727}
.field-error{color:#a12727;font-size:.85rem}

/* 12b) KONTAKT-LAYOUT */
.contact-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(1.5rem,4vw,2.5rem);align-items:start}
.contact-aside{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(1.4rem,3vw,1.8rem)}
.contact-aside h3{margin-bottom:1rem}
.contact-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:1.3rem}
.contact-actions .btn{flex:1 1 auto;justify-content:center}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}

/* 13) FAQ ------------------------------------------------------------- */
.faq{max-width:52rem;margin-inline:auto;display:flex;flex-direction:column;gap:.8rem}
.faq__item{background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden}
.faq__item summary{cursor:pointer;list-style:none;padding:1.05rem 1.3rem;font-weight:500;
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary .icon{width:1.2em;height:1.2em;color:var(--brand);transition:transform .2s;flex:0 0 auto}
.faq__item[open] summary .icon{transform:rotate(180deg)}
.faq__item__a{padding:0 1.3rem 1.2rem;color:var(--muted)}

/* 14) FOOTER ---------------------------------------------------------- */
.footer{background:#141631;color:#c7cbe8;font-size:.95rem}
.footer a{color:#c7cbe8}
.footer a:hover{color:var(--cyan)}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;
  padding:clamp(2.4rem,5vw,3.4rem) 0}
.footer__brand{display:flex;align-items:center;gap:.6rem;color:#fff;font-weight:700;font-size:1.15rem;margin-bottom:.7rem}
.footer__brand img{width:40px;height:40px;background:#fff;border-radius:10px;padding:3px}
.footer h4{color:#fff;font-size:1rem;margin-bottom:.9rem}
.footer__links{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.footer__contact{display:flex;flex-direction:column;gap:.5rem}
.footer__contact a{display:inline-flex;align-items:center;gap:.55rem}
.footer__contact .icon{color:var(--cyan);width:1.1em;height:1.1em;flex:0 0 auto}
.footer__bottom{border-top:1px solid rgba(255,255,255,.12)}
.footer__bottom__inner{padding:1.1rem 0;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;font-size:.86rem;color:#9aa0cf}
.footer__bottom__inner nav{display:flex;gap:1.1rem;flex-wrap:wrap}

/* 15) UTILITIES / ANIMATIONEN ---------------------------------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:.5rem;top:-3rem;z-index:100;background:var(--brand);color:#fff;
  padding:.6rem 1rem;border-radius:var(--radius);transition:top .2s}
.skip-link:focus{top:.5rem;color:#fff}
.icon{width:1.2em;height:1.2em;display:inline-block;vertical-align:-.15em;flex:0 0 auto}
.text-center{text-align:center}
.mt-2{margin-top:1.5rem}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* 15a) HERO-TEXT: kürzere Variante auf dem Handy ---------------------- */
.hero__text--short{display:none}
@media (max-width:980px){
  .hero__text--full{display:none}
  .hero__text--short{display:block}
}

/* 15b) STICKY MOBILE-CTA --------------------------------------------- */
.mobile-cta{display:none}
@media (max-width:980px){
  .mobile-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:.55rem;
    padding:.6rem clamp(.8rem,4vw,1rem);background:rgba(255,255,255,.96);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border-top:1px solid var(--border);box-shadow:0 -4px 16px rgba(31,39,51,.12)}
  .mobile-cta .btn{flex:1;justify-content:center;padding:.8rem .9rem}
  .mobile-cta .btn--call,.mobile-cta .btn--whatsapp{flex:0 0 auto;width:54px;padding:.8rem 0}
  body.has-mobile-cta{padding-bottom:78px}
}

/* 16) RESPONSIVE ------------------------------------------------------ */
@media (max-width:900px){
  .footer__top{grid-template-columns:1fr 1fr}
  .about{grid-template-columns:1fr;max-width:34rem;margin-inline:auto}
  .about__media{aspect-ratio:16/10;max-height:340px}
}
@media (max-width:980px){
  .nav__list{display:none}
  .nav-toggle{display:inline-flex}
  .nav{gap:.6rem}
  .nav--open .nav__list{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--border);box-shadow:var(--shadow);padding:.4rem 0}
  .nav--open .nav__list li{border-top:1px solid var(--border)}
  .nav--open .nav__link{display:block;padding:.9rem clamp(1rem,4vw,2rem)}
  .nav--open .nav__link::after{display:none}
  .nav__cta{display:none}
  .site-header__inner{position:relative}
  .cta__inner{flex-direction:column;align-items:flex-start;text-align:left}
  .footer__top{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column;align-items:flex-start}
}