:root{
  --bg: #FAF9F6;
  --card: #FFFFFF;
  --ink: #16211f;
  --ink-muted: #5b6664;
  --petrol: #12696A;
  --petrol-dark: #0C4E4F;
  --accent-orange: #FBAB18;
  --validation-green: #309867;
  --validation-red: #EA2353;
  --line: #E2E6E4;
  --gutter: 64px;

  /* Fluid heading scale — clamp(min, preferred, max) so text shrinks
     continuously with the viewport instead of only jumping at a single
     900px breakpoint (which meant a heading with no explicit mobile
     override, like an on-page H1, just stayed at its full desktop size
     all the way down to a phone). min/max match values already measured
     off the live site; the preferred value is a straight-line interpolation
     between them across the 390px-1280px range. Shared here (not per
     section) so every template scales the same way. */
  --fs-hero: clamp(32px, 4.4vw + 15px, 60px);       /* full-bleed hero h1 (category/landingspage/content/contact/producten overzicht) */
  --fs-hero-home: clamp(30px, 4vw + 14px, 55px);    /* homepage's own hero, live sizes this one 5px smaller */
  --fs-h1: clamp(28px, 2vw + 20px, 40px);           /* on-page H1 (e.g. "Wij zijn Akoestiek Label") */
  --fs-h2: clamp(24px, 1.8vw + 17px, 35px);         /* section headings */
  --fs-h3: clamp(20px, 1.3vw + 15px, 28px);         /* sub-headings inside rich-text content blocks */
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* Base font-size was never set at all (browser default 16px), and most
   body-copy paragraphs individually hardcoded something smaller (14-16px)
   — measured against the live site (18px) and akoesta.com (~20.7px) after
   the user flagged our text as too small; 18px matches the live site
   exactly. This only changes elements with no explicit font-size of their
   own (mainly plain rich-text paragraphs) — small UI chrome (nav, badges,
   footer meta) keeps its own already-explicit smaller sizes on purpose,
   this is a first global pass, not a full type-scale rewrite. */
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:18px;line-height:1.6;}
/* Headings had no explicit line-height at all, so Overpass's own default
   ("normal") applied — noticeably looser than either reference site (live
   site measured 1.0, akoesta.com ~1.2) and looked especially loose on a
   wrapped multi-line heading. 1.15 splits the difference. */
h1,h2,h3{font-family:"Overpass",system-ui,sans-serif;margin:0;letter-spacing:-0.01em;line-height:1.15;}
h1,h2{font-weight:800;}
h3{font-weight:700;}
p{margin:0;}
a{color:var(--petrol);text-decoration:none;}
a:hover{color:var(--petrol-dark);text-decoration:underline;}
img{display:block;width:100%;height:100%;object-fit:cover;}
button{font-family:inherit;}

.wrap{max-width:1280px;margin:0 auto;}

.photo{position:relative;overflow:hidden;background-size:cover;background-position:center;}
.photo::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.2), transparent 60%);pointer-events:none;}
.photo-1{background-image:linear-gradient(135deg, #e8c9b0, #d9a487 45%, #a7c2ac);}
.photo-2{background-image:linear-gradient(135deg, #d1a488, #a8674c);}
.photo-3{background-image:linear-gradient(135deg, #e3d19b, #cbab6e);}
.photo-4{background-image:linear-gradient(135deg, #a8c4ac, #7fa0a4);}

/* "Rimpel" — decorative sound-ripple accent, global across every hero-type
   header (.hero on home, .landing-hero-photo shared by 8 other page
   templates, .producten-hero) — real photo or placeholder alike, matching
   how the live reference itself overlays this kind of motif on real
   photography. Not applied to small placeholder thumbnails elsewhere
   (product cards, brand tiles) — those aren't header/hero contexts. A
   radial dark pocket rides along with the rings so they stay legible even
   where there's no separate dark overlay of its own (.producten-hero has
   none). */
:is(.hero, .landing-hero-photo, .producten-hero)::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background-repeat:no-repeat, no-repeat;
  background-position:bottom right, bottom right;
  background-size:380px 380px, 460px 460px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 380'%3E%3Cg fill='none' stroke='white' stroke-width='1.4'%3E%3Ccircle cx='380' cy='380' r='55' opacity='0.75'/%3E%3Ccircle cx='380' cy='380' r='95' opacity='0.6'/%3E%3Ccircle cx='380' cy='380' r='135' opacity='0.45'/%3E%3Ccircle cx='380' cy='380' r='175' opacity='0.32'/%3E%3Ccircle cx='380' cy='380' r='215' opacity='0.2'/%3E%3Ccircle cx='380' cy='380' r='255' opacity='0.1'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at bottom right, rgba(0,0,0,.32), transparent 65%);
}

.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:16px 32px;border-radius:999px;font-weight:700;font-size:15px;border:none;cursor:pointer;}
.btn-primary{background:var(--petrol);color:#fefaf3;}
/* Explicit color here, not just background: the generic a:hover{color:
   var(--petrol-dark)} rule (site-wide, higher specificity than the
   non-hover .btn-primary) otherwise wins on hover for any .btn-primary
   that's an <a> — same color as the hover background, so the text
   visually disappears. */
.btn-primary:hover{background:var(--petrol-dark);color:#fefaf3;}
.btn-white{background:white;color:var(--petrol);}
.btn-white:hover{background:#f1efe9;color:var(--petrol);}
.card{background:var(--card);border-radius:20px;}

/* TOPBAR — padding lives on .topbar (outer, full-bleed) so the bare .wrap
   inside .topbar-inner caps+centers to exactly the same 1280px column as
   .site-nav below it (site-nav uses the identical outer-padding/inner-bare-
   wrap split — combining padding and .wrap on ONE element, as this used to
   do, adds a second gutter's worth of inset on top of the cap and drifts
   out of alignment with the header on screens wider than 1280+2*gutter). */
/* overflow:hidden only while actually collapsed (.is-scrolled, below) —
   not here: this box also contains the language-switcher dropdown, which
   needs to overflow visibly below it when open. Having it here
   unconditionally clipped that dropdown away entirely (looked like a
   dead flag icon, not a z-index issue — the DOM/hover-state was fine,
   the ancestor was just cutting it off). */
.topbar{background:#EFEEEA;font-size:12px;font-weight:400;color:var(--ink);padding:9px var(--gutter);max-height:60px;opacity:1;transition:max-height .3s ease, opacity .2s ease, padding-top .3s ease, padding-bottom .3s ease;}
/* Sticky on every screen size, not just mobile — desktop scroll keeps the
   header in view too now. The topbar-collapse-on-scroll effect (see the
   900px media query below) stays mobile-only: on desktop there's room for
   the topbar strip to stay visible the whole time. */
.site-header-sticky{position:sticky;top:0;z-index:50;}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.topbar-usps{display:flex;gap:28px;flex-wrap:wrap;}
.topbar-usp{display:flex;align-items:center;gap:8px;font-weight:400;white-space:nowrap;}
.topbar-usp svg{color:var(--validation-green);min-width:16px;}
.topbar-right{display:flex;align-items:center;gap:24px;}
.topbar-contact{display:flex;align-items:center;gap:24px;white-space:nowrap;}
.topbar-contact a{display:flex;align-items:center;gap:7px;color:var(--ink);font-weight:400;}
.topbar-contact a:hover{color:var(--petrol);text-decoration:none;}

.topbar-lang{position:relative;}
.topbar-lang-toggle{display:flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;color:var(--ink);font-size:13px;padding:0;}
.flag{display:block;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.12);flex-shrink:0;}
/* margin-top:0 (not 8px) — same reasoning as .dropdown-menu's own
   zero-gap comment: any empty space between the toggle and this menu is
   space the mouse has to cross that satisfies neither element's :hover,
   which drops the menu before the cursor ever reaches it. Padding-top on
   the menu itself (below) gives the same visual breathing room without
   that gap. */
.topbar-lang-menu{position:absolute;top:100%;right:0;margin-top:0;padding-top:14px;background:var(--card);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.14);padding-left:6px;padding-right:6px;padding-bottom:6px;min-width:160px;z-index:20;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease,visibility 0s linear .12s,pointer-events 0s linear .12s;}
.topbar-lang:hover .topbar-lang-menu,
.topbar-lang-menu:hover{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .12s ease;}
.topbar-lang-option{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;font-size:13px;font-weight:500;color:var(--ink);}
.topbar-lang-option:hover{background:var(--bg);color:var(--petrol);text-decoration:none;}
.topbar-lang-option.is-active{color:var(--petrol);font-weight:700;}

/* NAV */
.site-nav{position:relative;display:flex;align-items:center;justify-content:space-between;padding:20px var(--gutter);border-bottom:1px solid var(--line);gap:24px;background:var(--card);}
.logo-img{height:26px;width:auto;display:block;}
.tagline{font-size:12px;color:var(--ink-muted);margin-top:6px;}
.trust-badge{display:flex;align-items:center;gap:10px;}
.trust-seal-img{width:44px;height:44px;flex-shrink:0;}
.trust-text{font-size:12px;line-height:1.5;}
.trust-stars{display:flex;gap:1px;}
.nav-links{display:flex;gap:36px;font-size:15px;font-weight:300;list-style:none;margin:0;padding:0;}
.nav-links li{display:flex;align-items:center;gap:5px;}
.nav-links li.has-dropdown{position:relative;}
.nav-links svg{opacity:.6;}
/* Ruimte/Producten's own <a> sits one level deeper (li > span.megamenu-trigger
   > a, for the mega-menu's hover-bridge), so a selector scoped to just
   "li > a" never matched it — it fell through to the global a{color:petrol}
   default and looked permanently "active" regardless of hover or the
   current page. Covering .megamenu-trigger a here fixes that. */
.nav-links > li > a, .nav-links .megamenu-trigger a{color:inherit;text-decoration:none;}
.nav-links > li > a:hover, .nav-links .megamenu-trigger a:hover{color:var(--petrol);text-decoration:none;}
/* Real "you are on this section" state — set server-side in
   site-header.php by checking the current page's ancestors against the
   mega-menu's own category titles, not merely current-hover. */
.nav-links li.is-active > span.megamenu-trigger > a{color:var(--petrol);}
/* Same "you are on this section" state for plain (non-megamenu) top-level
   links (Over ons/Blog/Contact) — these render as a bare <li><a>, no
   .megamenu-trigger span wrapper, so they need their own selector rather
   than sharing the rule above. */
.nav-links li.is-active > a{color:var(--petrol);}

/* Dropdown/megamenu hover-persistence is geometric, not timing-based: a
   fast synthetic "jump" hover (like an automated test) can mask a delay
   that's too short for a real hand moving the mouse at normal speed, so
   this closes the actual gap instead of racing a timer against it.
   - .dropdown-menu is anchored to its own <li> (has-dropdown is
     position:relative), so margin-top:0 makes it flush — zero gap.
   - .megamenu is anchored to .site-nav (needed for full page width), so
     its trigger <li> sits above it with empty site-nav padding in
     between; its ::before bridges exactly that empty strip so the
     cursor is continuously over part of .megamenu (and so still
     "hovering" it) the whole way down, however slowly it moves. */
.dropdown-menu{position:absolute;top:100%;left:0;margin-top:0;background:var(--card);border-radius:0;box-shadow:0 12px 32px rgba(0,0,0,.14);padding:24px 10px 10px;min-width:280px;list-style:none;z-index:20;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease,visibility 0s linear .12s,pointer-events 0s linear .12s;}
.nav-links li.has-dropdown:hover .dropdown-menu,
.dropdown-menu:hover{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .12s ease;}
.dropdown-menu li{display:block;}
/* Matches .megamenu-col a exactly (Ruimte/Producten) — plain color-only
   hover, no background highlight, same muted ink/size/weight — so "Over
   Akoestiek Label"'s dropdown doesn't look like a different component. */
.dropdown-menu a{display:block;color:var(--ink-muted);font-size:14px;padding:10px 16px;white-space:nowrap;}
.dropdown-menu a:hover{color:var(--petrol);}
.dropdown-menu--producten{display:grid;grid-template-columns:1fr 1fr;gap:2px;min-width:320px;}

/* MEGAMENU (Ruimte) — full-width panel, edge-to-edge under the nav bar.
   .megamenu itself anchors to .site-nav (position:relative) so it can
   span the full page width; that means its trigger <li> sits above it
   with site-nav's own empty padding in between. .megamenu-trigger is a
   SEPARATE positioned wrapper (not the <li>, which must stay unpositioned
   so .megamenu's containing block stays .site-nav) whose ::after bridges
   exactly that empty strip, scoped to just under "Ruimte" — not the
   pointer-events:none .megamenu itself, so hovering the bridge doesn't
   depend on the (still-hidden) panel already being interactive. Hovering
   any part of a descendant (including generated content) still satisfies
   ":hover" on the <li> ancestor, so the existing li:hover rule below
   keeps working unchanged. */
.megamenu-trigger{position:relative;display:inline-flex;align-items:center;gap:5px;}
/* Horizontal reach kept tight (not the wide -100px/+100px this started
   with): with two megamenu triggers now sitting 36px apart (Ruimte,
   Producten), a wide bridge on one spills sideways into the other's
   trigger column and the two fight over :hover — real symptom was a
   megamenu lingering open (or the wrong one appearing) when moving from
   one trigger toward the other, or down past it. 20px is still far more
   than needed to cover the vertical gap below and doesn't reach a
   neighboring trigger at this spacing. */
.megamenu-trigger::after{content:'';position:absolute;top:100%;left:-20px;right:-20px;height:60px;}
.megamenu{position:absolute;top:100%;left:0;right:0;background:var(--card);border-top:1px solid var(--line);box-shadow:0 16px 32px rgba(0,0,0,.08);z-index:30;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease,visibility 0s linear .12s,pointer-events 0s linear .12s;}
.nav-links li.has-megamenu:hover .megamenu,
.megamenu:hover{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .12s ease;}
.megamenu-inner{display:flex;align-items:flex-start;gap:48px;padding:40px var(--gutter);}
.megamenu-photo{width:220px;min-width:220px;height:220px;border-radius:16px;}
.megamenu-intro{width:220px;min-width:220px;}
.megamenu-intro h3{font-size:20px;margin-bottom:10px;}
.megamenu-intro p{color:var(--ink-muted);font-size:14px;line-height:1.6;}
.megamenu-columns{display:flex;gap:40px;flex:1;}
.megamenu-col-title{font-weight:700;font-size:14px;margin-bottom:12px;color:var(--ink);}
.megamenu-col a{display:block;color:var(--ink-muted);font-size:14px;padding:4px 0;text-decoration:none;}
.megamenu-col a:hover{color:var(--petrol);}
.megamenu-col-title a{display:inline;color:inherit;padding:0;}
.megamenu-col-title a:hover{color:var(--petrol);}

/* MOBILE NAV — reachable only via .nav-toggle, itself display:none until
   the <900px breakpoint, so this never shows or intercepts clicks on desktop. */
.nav-toggle{display:none;background:none;border:none;padding:4px;cursor:pointer;color:var(--ink);}
.mobile-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--card);border-top:1px solid var(--line);box-shadow:0 16px 32px rgba(0,0,0,.1);z-index:40;max-height:calc(100vh - 70px);overflow-y:auto;}
.mobile-nav.open{display:block;}
.mobile-nav > ul{list-style:none;margin:0;padding:8px var(--gutter);}
.mobile-nav-row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);}
.mobile-nav-item:last-child .mobile-nav-row{border-bottom:none;}
.mobile-nav-row a{display:block;flex:1;padding:16px 4px;color:var(--ink);font-weight:700;font-size:16px;text-decoration:none;}
.mobile-nav-expand{background:none;border:none;padding:12px;cursor:pointer;color:var(--ink-muted);transition:transform .15s ease;}
.mobile-nav-expand.open{transform:rotate(180deg);}
.mobile-nav-submenu{display:none;list-style:none;margin:0;padding:0 0 12px 4px;}
.mobile-nav-submenu.open{display:block;}
.mobile-nav-submenu li{display:block;}
.mobile-nav-submenu a{display:block;padding:9px 4px;color:var(--ink-muted);font-size:14px;text-decoration:none;}
.mobile-nav-subheading{padding:10px 4px 2px 4px;font-weight:700;font-size:12px;color:var(--ink);text-transform:uppercase;letter-spacing:.03em;}

/* FOOTER SOCIAL ICONS */
.footer-social{display:flex;gap:12px;margin-top:20px;}
.footer-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:white;}
.footer-social a:hover{background:rgba(255,255,255,.16);}
.nav-icons{display:flex;gap:20px;align-items:center;}
.nav-icons a{display:flex;color:inherit;text-decoration:none;}
.nav-icons a:hover{color:var(--petrol);}

/* FOOTER */
.site-footer{background:var(--ink);padding:56px var(--gutter);color:white;}
.site-footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;}
.site-footer .logo-img{height:22px;}
.footer-blurb{opacity:.7;font-size:13px;margin-top:16px;line-height:1.6;}
.footer-col-title{font-weight:700;font-size:14px;margin-bottom:14px;}
.footer-col a, .footer-col div{display:block;opacity:.75;font-size:13px;line-height:2.1;color:white;text-decoration:none;}
.footer-col a:hover{opacity:1;text-decoration:underline;}
.footer-legal-links{grid-column:1/-1;margin-top:24px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;opacity:.55;line-height:1.8;}
.footer-legal-links a{color:white;text-decoration:none;}
.footer-legal-links a:hover{opacity:1;text-decoration:underline;}
.footer-bottom{grid-column:1/-1;margin-top:20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;}
.site-footer .copyright{opacity:.5;font-size:13px;}
.footer-payment-icons{display:flex;align-items:center;gap:10px;}
/* Full color, not muted like the social icons/copyright text: these are
   branded payment badges (each already has its own light card background
   baked into the SVG) — a monochrome filter just crushed each one into a
   flat white rounded-rect, losing the logo entirely. */
.footer-payment-icons img{height:26px;width:auto;border-radius:4px;}

@media (max-width: 600px){
  .footer-bottom{justify-content:flex-start;}
}

/* UTILITY PAGES (offerte-mandje, offerte-bevestiging) */
.page-wrap{max-width:720px;margin:0 auto;padding:80px var(--gutter) 120px var(--gutter);}
.page-wrap h1{font-size:var(--fs-h1);margin-bottom:8px;}

.mandje-list{list-style:none;margin:32px 0;padding:0;display:flex;flex-direction:column;gap:12px;}
.mandje-list li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 20px;font-weight:700;}
.mandje-variant{color:var(--ink-muted);font-weight:400;font-size:13px;}

.offerte-form{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;}
.offerte-form input{flex:1;min-width:200px;padding:14px 20px;border:1px solid var(--line);border-radius:999px;font-size:15px;font-family:inherit;background:var(--card);color:var(--ink);}
.offerte-form input:focus{outline:none;border-color:var(--petrol);}
.offerte-form .btn{flex:none;}

.confirmation-page{text-align:center;}
.confirmation-page p{color:var(--ink-muted);font-size:16px;line-height:1.6;margin-top:16px;max-width:520px;margin-left:auto;margin-right:auto;}

/* KLANTPORTAAL (portaal.php) — same card/contact-field/btn language as
   offerte-mandje.php's own request form, built out further for a
   dashboard-style page: a status stepper, an offerte detail table, and a
   list of past offertes, rather than just plain paragraphs/tables. */
.portal-page{max-width:900px;}
.portal-page h1{margin-bottom:32px;}
.portal-empty{padding:48px;text-align:center;color:var(--ink-muted);}
.portal-empty .btn{margin-top:20px;}

.offerte-card{padding:32px;margin-bottom:24px;}
.offerte-card-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px;}
.offerte-card-head h2{font-size:20px;margin:0;}

.offerte-status-badge{display:inline-flex;align-items:center;padding:5px 14px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--bg);color:var(--ink-muted);}
.offerte-status-badge--verstuurd{background:#FEF3DA;color:#8a5f0a;}
.offerte-status-badge--geaccepteerd{background:#E4F3EA;color:var(--validation-green);}

.offerte-stepper{display:flex;align-items:flex-start;}
.offerte-stepper-step{display:flex;flex-direction:column;align-items:center;flex:1;position:relative;text-align:center;}
.offerte-stepper-nr{width:32px;height:32px;min-width:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:var(--bg);color:var(--ink-muted);border:2px solid var(--line);z-index:1;}
.offerte-stepper-label{font-size:12px;color:var(--ink-muted);margin-top:8px;line-height:1.3;max-width:90px;}
.offerte-stepper-connector{position:absolute;top:16px;left:calc(-50% + 16px);right:calc(50% + 16px);height:2px;background:var(--line);z-index:0;}
.offerte-stepper-step:first-child .offerte-stepper-connector{display:none;}
.offerte-stepper-step.is-done .offerte-stepper-nr{background:var(--petrol);border-color:var(--petrol);color:#fefaf3;}
.offerte-stepper-step.is-done .offerte-stepper-connector{background:var(--petrol);}
.offerte-stepper-step.is-current .offerte-stepper-nr{background:#fefaf3;border-color:var(--petrol);color:var(--petrol);}
.offerte-stepper-step.is-current .offerte-stepper-label{color:var(--ink);font-weight:700;}

.offerte-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.offerte-list-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border:1px solid var(--line);border-radius:14px;color:var(--ink);flex-wrap:wrap;}
.offerte-list-item:hover{border-color:var(--petrol);}
.offerte-list-item-nr{font-weight:700;}

.offerte-table{width:100%;border-collapse:collapse;margin-top:4px;}
.offerte-table th,.offerte-table td{text-align:left;padding:14px 4px;border-bottom:1px solid var(--line);font-size:15px;}
.offerte-table th{color:var(--ink-muted);font-size:12px;text-transform:uppercase;letter-spacing:.03em;font-weight:700;}
.offerte-table td:last-child,.offerte-table th:last-child{text-align:right;}
.offerte-table tfoot td{border-bottom:none;border-top:2px solid var(--ink);font-weight:800;font-size:17px;padding-top:18px;}

.offerte-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px;}
.offerte-vraag-form{margin-top:16px;display:flex;flex-direction:column;gap:12px;max-width:460px;}

@media (max-width: 900px){
  :root{--gutter:24px;}
  .nav-links{display:none;}
  .topbar-usps{display:none;}
  .trust-badge{display:none;}
  .tagline{display:none;}
  .site-nav .logo-img{height:20px;}
  .site-footer .wrap{grid-template-columns:1fr;}
  .nav-toggle{display:block;}

  /* Past a small scroll threshold (see main.js), the topbar collapses
     away so the sticky bar stays compact instead of permanently eating
     ~40px of a small screen — nav-links/logo/icons underneath are
     untouched, only the topbar's own box height/opacity animate. */
  .site-header-sticky.is-scrolled .topbar{max-height:0;opacity:0;padding-top:0;padding-bottom:0;overflow:hidden;}

  /* Five circles in a row + a label under each is too tight below
     ~600px — shrink the circles/text and let labels wrap onto two lines
     (they already have a max-width) rather than overlapping the
     connector lines on either side. */
  .offerte-card{padding:20px;}
  .offerte-stepper-nr{width:26px;height:26px;min-width:26px;font-size:11px;}
  .offerte-stepper-label{font-size:10px;max-width:60px;}
  .offerte-stepper-connector{top:13px;}
  .offerte-table{font-size:13px;}
  .offerte-table th,.offerte-table td{padding:10px 4px;font-size:13px;}
  .offerte-table th{font-size:10px;}

  /* Rimpel ripple: the 380/460px background-size was sized for a
     desktop-width hero — at phone width that's nearly the whole banner,
     overpowering the headline rather than sitting as a corner accent.
     Scales down proportionally; still a background-image so this can
     never cause overflow, just a proportion fix. */
  :is(.hero, .landing-hero-photo, .producten-hero)::before{
    background-size:200px 200px, 260px 260px;
  }
}

@media (max-width: 600px){
  .offerte-form{flex-direction:column;}
  .offerte-form input, .offerte-form .btn{width:100%;}
}