/* ==========================================================================
   0. FONTS — Circular Std (Book 400 / Bold 700), ingesloten als woff2
   ========================================================================== */
@font-face{
  font-family:"Circular Std";
  src:url("../fonts/CircularStd-Book.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Circular Std";
  src:url("../fonts/CircularStd-Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root{
  /* --- MERKKLEUR ------------------------------------------------------- */
  --brand:        #00964F;   /* Finbee groen, gesampled uit FB_Logo.png */
  --brand-dark:   #007A40;   /* hover-staat */
  --brand-soft:   rgba(0,150,79,.10);

  /* --- NEUTRAAL (1:1 van het origineel) -------------------------------- */
  --ink:          #343230;   /* koppen + donkere knoppen */
  --body:         #4E4C4A;   /* bodytekst */
  --muted:        #6F6C69;
  --bg:           #F9F8F7;   /* paginabaan */
  --bg-alt:       #F1EFED;   /* afwisselende sectie / kaartcontainer */
  --card:         #FFFFFF;
  --line:         #E4E1DE;
  --nav-hover:    #FFFFFF;   /* nav-pill hover */
  --nav-active:   #FFFFFF;   /* nav-pill actief (mega open) */

  /* --- MAATVOERING ------------------------------------------------------ */
  --container:    1360px;   /* 1312 content + 2x24 padding */
  --gutter:       24px;
  --section-y:    96px;      /* verticale sectiepadding origineel */
  --radius-lg:    24px;
  --radius-md:    16px;
  --radius-pill:  9999px;

  --font: "Circular Std", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ==========================================================================
   2. RESET
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  font-size:18px;
  line-height:27px;
  font-weight:400;
  color:var(--body);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
figure{margin:0}   /* browser-default van 40px zijmarge weghalen */
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none}
h1,h2,h3,h4,h5{margin:0;color:var(--ink);font-weight:700;letter-spacing:-.02em}
p{margin:0 0 20px}
ul,ol{margin:0;padding:0;list-style:none}
sup{font-size:.6em;vertical-align:super;line-height:0}

h1{font-size:57.6px;line-height:1.0}   /* 10% kleiner dan 64px */
h2{font-size:48px;line-height:1.0}
h3{font-size:32px;line-height:1.1}
h4{font-size:24px;line-height:1.4}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section-y) 0}
.section[id]{scroll-margin-top:110px}   /* sticky header verrekenen bij anchors */
.section--alt{background:var(--bg-alt)}
.section--pt-tight{padding-top:24px}
.section--pb-tight{padding-bottom:72px}

/* ==========================================================================
   3. KNOPPEN
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 24px;border-radius:var(--radius-pill);
  font-size:16px;line-height:19.2px;font-weight:400;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
  white-space:nowrap;
}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:#000}
.btn--brand{background:var(--brand);color:#fff}
.btn--brand:hover{background:var(--brand-dark)}
.btn--outline{border:1px solid var(--ink);color:var(--ink);font-size:18px}
.btn--outline:hover{background:var(--ink);color:#fff}

.btn-round{
  width:40px;height:40px;border-radius:50%;
  background:var(--ink);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .18s ease;
}
.btn-round:hover{background:var(--brand)}

/* ==========================================================================
   4. HEADER + NAVIGATIE
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:60;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--container);margin:0 auto;padding:0 24px;   /* zelfde breedte als de footer */
  height:92px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}

/* ---- LOGO --------------------------------------------------------------- */
.logo{display:flex;align-items:center}
.logo img{height:39px;width:auto;display:block}

/* ---- HOOFDNAVIGATIE ----------------------------------------------------- */
.main-nav{display:flex;align-items:center;gap:8px}
.main-nav > a,
.nav-trigger{
  font-family:var(--font);font-size:16px;color:var(--ink);
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;border-radius:var(--radius-pill);
  background:transparent;transition:background .18s ease;
}
.main-nav > a:hover,
.nav-trigger:hover{background:var(--nav-hover)}
.nav-trigger[aria-expanded="true"]{background:var(--nav-active)}
.nav-trigger .caret{width:11px;height:11px;opacity:.75;transition:transform .22s ease}
.nav-trigger[aria-expanded="true"] .caret{transform:rotate(180deg)}

.header-actions{display:flex;align-items:center;gap:22px}
/* zelfde pill-gedrag als de nav-items: witte achtergrond, icoon blijft donker.
   42px komt overeen met de hoogte van een nav-item (11px padding + 19.2px regel) */
.icon-btn{
  width:42px;height:42px;border-radius:50%;
  color:var(--ink);background:transparent;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .18s ease;
}
.icon-btn:hover{background:var(--nav-hover)}
.burger[aria-expanded="true"]{background:var(--nav-active)}
.icon-btn svg{width:24px;height:24px}
.burger .icon-close{display:none}
.burger[aria-expanded="true"] .icon-open{display:none}
.burger[aria-expanded="true"] .icon-close{display:block}

/* ---- MEGA MENU (uitgeklapt bureaubladmenu) ------------------------------ */
.mega{
  position:absolute;top:100%;left:0;right:0;
  background:var(--bg);border-bottom:1px solid var(--line);
  padding:56px 0 64px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
  /* geen box-shadow: die kleurde de header eromheen lichter dan de paginabaan */
}
.mega.is-open{opacity:1;visibility:visible;transform:translateY(0)}

.mega-head{display:grid;grid-template-columns:minmax(280px,1fr) 2fr;gap:48px;align-items:start;margin-bottom:0}
.mega-head h2{font-size:40px;line-height:1.05;margin-bottom:14px}
.mega-head-left p{margin:24px 0 0;font-size:18px;line-height:27px}
.mega-link{
  display:inline-flex;align-items:center;gap:12px;
  font-size:17px;color:var(--ink);text-decoration:underline;text-underline-offset:5px;
}
.mega-link svg{width:20px;height:20px;transition:transform .18s ease}
.mega-link:hover svg{transform:translateX(4px)}

.mega-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mega-card{width:100%;box-sizing:border-box;
  background:var(--card);border-radius:var(--radius-md);
  padding:32px;min-height:204px;
  display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease;
}
.mega-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.06)}
.mega-card svg{width:36px;height:36px;color:var(--brand);margin-bottom:36px}
.mega-card span{font-size:24px;line-height:33.6px;font-weight:700;color:var(--ink)}

/* ---- HAMBURGER-PANEEL --------------------------------------------------- */
.mega--list{padding:0}
.mega--list .container{padding-top:0;padding-bottom:0}
.menu-list{border-top:1px solid var(--line)}
.menu-list a,
.menu-list .menu-group > button{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 0;font-size:19px;color:var(--ink);
  border-bottom:1px solid var(--line);text-align:left;
  transition:color .18s ease;
}
.menu-list a:hover,
.menu-list .menu-group > button:hover{color:var(--brand)}
.menu-list svg{width:20px;height:20px;flex:none;opacity:.75}
.menu-sub{overflow:hidden;height:0;transition:height .22s ease}
.menu-sub a{padding-left:24px;font-size:17px;color:var(--body)}
.menu-group > button .chev{transition:transform .22s ease}
.menu-group.is-open > button .chev{transform:rotate(90deg)}
/* alleen op mobiel zichtbaar: de hoofdnavigatie in het paneel */
.menu-mobile-only{display:none}

/* ---- SCRIM -------------------------------------------------------------- */
.nav-scrim{
  position:fixed;inset:0;z-index:40;background:rgba(20,18,16,.35);
  opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s;
}
.nav-scrim.is-open{opacity:1;visibility:visible}

/* ==========================================================================
   5. BREADCRUMB
   ========================================================================== */
.breadcrumb{padding:47px 0 22px}   /* 25px extra ruimte boven de breadcrumb */
.breadcrumb ol{display:flex;align-items:center;justify-content:center;gap:10px;font-size:15px;color:var(--muted)}
.breadcrumb li,
.breadcrumb a{display:flex;align-items:center}
.breadcrumb svg{width:16px;height:16px;display:block}

/* ==========================================================================
   6. HERO
   ========================================================================== */
.hero{text-align:center;padding-top:72px}   /* extra ademruimte boven eyebrow */
.hero-eyebrow{margin-bottom:18px}
.hero h1{max-width:920px;margin:0 auto 22px}
.hero-lead{max-width:800px;margin:0 auto 34px;font-size:18px;line-height:27px}
.hero-usps{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 34px;
  margin-bottom:56px;
}
.usp{display:inline-flex;align-items:center;gap:10px;font-size:17px;color:var(--body)}
.usp .check{width:20px;height:20px;color:var(--brand);flex:none}
.hero-figure{
  width:100%;margin:0 auto;   /* zelfde breedte als de footer-container */border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:1072/480;background:var(--bg-alt);
}
.hero-figure img{width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   7. TRUSTED BY
   ========================================================================== */
.trusted{text-align:center}
.trusted p{font-size:16px;color:var(--muted);margin-bottom:40px}
.trusted-logos{
  display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap;
}
.trusted-logos img{
  max-height:34px;max-width:68px;width:auto;height:auto;object-fit:contain;   /* 35% kleiner */
  filter:grayscale(1);opacity:.65;
}

/* ==========================================================================
   8. SPLIT (beeld + tekst) — gebruikt door het probleemblok en de drie use-casesecties
   ========================================================================== */
/* verhouding 1.2fr / 1fr = exact zoals origineel; start = beeld blijft staan
   wanneer een accordeon-item opent */
.split{display:grid;grid-template-columns:0.88fr 1fr;gap:96px;align-items:start}
.split--reverse{grid-template-columns:1fr 0.88fr}
.split--reverse .split-media{order:2}
.split-media{
  border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-alt);
  aspect-ratio:1/1;
}
.split-media img{width:100%;height:100%;object-fit:cover}
/* kleine groene bovenkop boven de H2 van een use case */
.eyebrow{display:block;font-size:14px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand);margin-bottom:14px}
.split-body h2{margin-bottom:24px}
.split-body p{max-width:56ch}

.check-list{display:flex;flex-direction:column;gap:14px;margin:28px 0 32px}
.check-list li{display:flex;align-items:flex-start;gap:12px;font-size:17px}
.check-list .check{width:20px;height:20px;color:var(--brand);flex:none;margin-top:3px}

/* ==========================================================================
   9. APPLICATIE-KAARTEN
   ========================================================================== */
/* .bleed = bijna volle breedte (zoals origineel: 24px marge links/rechts) */
.bleed{width:100%;padding:0 24px}
.panel{
  background:var(--bg-alt);border-radius:var(--radius-lg);
  padding:var(--section-y) 0;
}
.panel > .container{max-width:var(--container)}
/* #why en #contact staan in .container i.p.v. .bleed: even breed als het quote-blok */
#why .panel > .container,
#contact .panel > .container{max-width:100%;padding:0 64px}
.panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:48px}
.panel-head p{max-width:52ch;margin:16px 0 0}

.app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.app-card{
  background:var(--card);border-radius:var(--radius-md);
  padding:28px 26px;display:flex;flex-direction:column;min-height:320px;
  transition:transform .2s ease,box-shadow .2s ease;
}
.app-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.06)}
.app-card .app-icon{width:34px;height:34px;color:var(--brand);margin-bottom:26px}
.app-card h4{margin-bottom:14px}
.app-card p{font-size:16px;line-height:24px;margin:0}
.app-card .btn-round{margin-top:auto;align-self:flex-end}

/* ==========================================================================
   10. ACCORDEON (producten binnen elke sectie)
   ========================================================================== */
.accordion{margin-top:40px;border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:26px 0;text-align:left;font-size:18px;font-weight:700;color:var(--ink);
  list-style:none;
}
.acc-trigger::-webkit-details-marker{display:none}
.acc-trigger::marker{content:""}
.acc-trigger .plus{width:20px;height:20px;flex:none;transition:transform .22s ease}
.acc-item[open] .plus{transform:rotate(45deg)}
.acc-panel{padding:0 0 26px;font-size:17px;line-height:26px;max-width:60ch}
.acc-panel p{margin:0 0 18px}

/* ==========================================================================
   11. TESTIMONIAL
   ========================================================================== */
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:stretch}
.quote-card{
  background:var(--bg-alt);border-radius:var(--radius-lg);
  padding:72px 56px;display:flex;flex-direction:column;justify-content:center;
}
.quote-card .quote-mark{width:48px;height:38px;color:var(--brand);margin-bottom:28px}
.quote-card h3{margin-bottom:18px}
.quote-text{font-size:17px;line-height:26px;margin-bottom:24px}
.quote-name{font-weight:700;color:var(--ink);margin-bottom:2px}
.quote-org{margin-bottom:24px}
.quote-photo{border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-alt)}
.quote-photo img{width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   12. WHY / USP-KAARTEN
   ========================================================================== */
/* horizontale slider: 5 kaarten, 3 in beeld, rest schuift mee */
.why-viewport{overflow-x:auto;overflow-y:hidden;margin-top:48px;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x mandatory}
.why-viewport::-webkit-scrollbar{display:none}
.why-grid{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/3);gap:24px}
.why-card{
  background:var(--card);border-radius:var(--radius-md);
  padding:32px 30px;min-height:320px;scroll-snap-align:start;
  transition:transform .2s ease,box-shadow .2s ease;
}
.why-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.06)}
.why-card .why-icon{width:34px;height:34px;color:var(--brand);margin-bottom:28px}
.why-card h4{margin-bottom:14px}
.why-card p{font-size:16px;line-height:24px;margin:0}
.dots{display:flex;gap:2px;margin-top:32px;margin-left:-6px}
/* knop is 24px voor een fatsoenlijk klikvlak, de zichtbare stip is 11px */
.dot{width:24px;height:24px;padding:0;border:0;background:none;
  display:inline-flex;align-items:center;justify-content:center}
.dot::before{
  content:"";width:11px;height:11px;border-radius:50%;
  border:0;background:#fff;transition:background .18s ease;
}
.dot:hover::before{background:var(--line)}
.dot.is-active::before{background:var(--brand)}

/* ==========================================================================
   13. CONTACTFORMULIER
   ========================================================================== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:start}
.contact-intro .chat-icon{width:38px;height:38px;color:var(--brand);margin-bottom:24px}
.contact-intro h2{margin-bottom:24px}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:15px;font-weight:700;color:var(--ink)}
.field .req{color:#C4342B;margin-left:2px}
.field input,.field select,.field textarea{
  font:inherit;font-size:16px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:6px;
  padding:12px 14px;width:100%;
}
.field textarea{min-height:52px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);
}
.consent{display:flex;align-items:flex-start;gap:12px;margin:24px 0;font-size:16px}
.consent input{width:20px;height:20px;accent-color:var(--brand);margin-top:2px;flex:none}

/* ── Custom form validation error ── */
.field.has-error input,
.field.has-error select,
.field.has-error textarea{border:1px solid #dc2626}
.consent.has-error input{outline:1px solid #dc2626;outline-offset:2px}
.form-error-msg{
  display:none;
  margin:12px 0 0;
  font-size:14px;color:#dc2626;line-height:1.4;
}
.contact-form.has-error .form-error-msg{display:block}

/* ── Success popup (same look as cookie banner) ── */
.fb-overlay{
  position:fixed;inset:0;z-index:99999;
  background:rgba(0,0,0,0.25);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .3s ease;pointer-events:none;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.fb-overlay.is-visible{opacity:1;pointer-events:auto}
.fb-popup{
  background:#fff;border-radius:20px;
  width:90%;max-width:520px;
  box-shadow:0 24px 80px rgba(0,0,0,0.18);
  transform:scale(.95) translateY(16px);opacity:0;
  transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .35s;
  overflow:hidden;max-height:90vh;
  display:flex;flex-direction:column;
  padding:28px;
}
.fb-overlay.is-visible .fb-popup{transform:scale(1) translateY(0);opacity:1}
.fb-popup h2{font-size:22px;font-weight:700;color:#000;margin:0 0 12px;line-height:1.3}
.fb-popup p{font-size:14px;line-height:1.6;color:#4a4a4a;margin:0 0 20px}
.fb-popup .fb-popup-actions{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.fb-popup .fb-popup-logo{height:24px;width:auto;display:block}
.fb-popup .fb-btn{
  display:inline-block;
  padding:13px 24px;background:var(--brand);color:#fff;
  font-size:14px;font-weight:600;font-family:inherit;
  border:0;border-radius:999px;cursor:pointer;line-height:1;
  transition:background .2s;
}
.fb-popup .fb-btn:hover{background:var(--brand-dark)}
@media (max-width:600px){
  .fb-overlay{align-items:flex-end}
  .fb-popup{width:100%;max-width:100%;border-radius:20px 20px 0 0;max-height:85vh}
  .fb-overlay.is-visible .fb-popup{transform:scale(1) translateY(0)}
}

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
#why{padding-bottom:0}
#contact{padding-top:150px;padding-bottom:0}  /* 150px tussen "Why" en contact; onder komt van de footer */
.site-footer{padding:64px 0 40px}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:40px}
.footer-brand .footer-logo{height:39px;width:auto;margin-bottom:26px}
.footer-brand a{display:block;text-decoration:none;font-size:16px;margin-bottom:4px;
  transition:color .18s ease}
.footer-brand a:hover{color:var(--brand)}
.footer-col h5{font-size:18px;font-weight:700;color:var(--ink);margin:0 0 20px}
.footer-col li{margin-bottom:14px}
.footer-col a{font-size:16px;color:var(--body)}
.footer-col a:hover{color:var(--brand)}
.footer-bottom{margin-top:70px;font-size:15px;color:var(--muted)}   /* ruimte boven de copyrightregel */
.footer-legal{display:flex;align-items:center;gap:26px;margin-top:14px}
.footer-legal a{font-size:15px}
.footer-legal a:hover{color:var(--brand)}

/* ==========================================================================
   16. PAGINA "OVER ONS"
   ========================================================================== */
.page-head{text-align:center;padding-top:26px}
.page-head h1{max-width:900px;margin:0 auto 22px}
.page-intro{max-width:800px;margin:0 auto;font-size:18px;line-height:27px}
.page-figure{
  width:100%;margin:56px auto 0;border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:1600/716;background:var(--bg-alt);
}
.page-figure img{width:100%;height:100%;object-fit:cover}

/* smalle leeskolom voor het artikel, gecentreerd zoals op het origineel */
.article{max-width:640px;margin:0 auto}
.article h2{margin-bottom:28px}
.article .lead{font-weight:700;color:var(--ink)}

/* grijs blok met logo en doorverwijzing */
.brand-block{background:var(--bg-alt);border-radius:var(--radius-lg);padding:80px 64px;text-align:center}
.brand-block img{height:42px;width:auto;margin:0 auto 30px}
.brand-block h2{margin-bottom:20px}
.brand-block p{max-width:620px;margin:0 auto 32px}

/* gerelateerde artikelen */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post-card{display:flex;flex-direction:column}
.post-thumb{
  border-radius:var(--radius-md);overflow:hidden;aspect-ratio:840/560;
  background:var(--bg-alt);margin-bottom:20px;
}
.post-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.post-card:hover .post-thumb img{transform:scale(1.03)}
.post-tag{
  align-self:flex-start;
  background:none;border:0;padding:0;
  font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand);margin-bottom:14px;
}
.post-card h3{font-size:24px;line-height:33.6px;margin-bottom:12px;transition:color .18s ease}
.post-card:hover h3{color:var(--brand)}
.post-meta{font-size:15px;color:var(--muted)}

@media (max-width:900px){
  .posts{grid-template-columns:1fr 1fr}
  .brand-block{padding:48px 28px}
  .page-figure{margin-top:36px}
}
@media (max-width:600px){
  .posts{grid-template-columns:1fr}
}

/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .app-grid{grid-template-columns:repeat(3,1fr)}
  .split,.contact-grid{gap:56px}
}
@media (max-width:1180px){
  .mega-grid{grid-template-columns:repeat(3,1fr)}
  .mega-head{gap:40px}
}
@media (max-width:900px){
  :root{--section-y:64px}
  h1{font-size:40px}h2{font-size:34px}h3{font-size:26px}h4{font-size:21px}
  .main-nav{display:none}
  .menu-mobile-only{display:block}
  .mega{padding:32px 0 40px;max-height:calc(100vh - 92px);overflow-y:auto}
  .mega--list{padding:0}
  .mega-head{grid-template-columns:1fr;gap:20px;margin-bottom:28px}
  .mega-head h2{font-size:32px}
  .mega-grid{grid-template-columns:1fr 1fr;gap:12px}
  .mega-card{min-height:0;padding:22px}
  .mega-card svg{margin-bottom:20px}
  .mega-card span{font-size:18px;line-height:25px}
  .split,.quote-grid,.contact-grid,.form-row{grid-template-columns:1fr}
  .split--reverse .split-media{order:0}
  .app-grid,.why-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .panel-head{flex-direction:column;align-items:flex-start}
}
@media (max-width:600px){
  .app-grid,.why-grid,.footer-grid{grid-template-columns:1fr}
  .quote-card{padding:44px 28px}
  .trusted-logos{justify-content:center;gap:28px}
  .trusted-logos img{height:42px}
}