/* Homepage-atelier: pagina in de live huisstijl (navy #20496b, oranje #ff6600 als accent,
   papier #f7f9fc, tweede laag #e7eef5). Alles onder .atelier-home; de globale regels
   uit style.css, company-design.css en brand-constructie.css laden eerder. */
.atelier-home {
    --ah-navy: #20496b;
    --ah-navy-diep: #152c42;
    --ah-oranje: #ff6600;
    --ah-papier: #f7f9fc;
    --ah-laag: #e7eef5;
    --ah-lijn: #cad7e2;
    --ah-gedempt: #526b80;
    --ah-tekst: #152c42;
    --ah-focus: #ba4a00;
    background: var(--ah-papier);
    color: var(--ah-tekst);
    font-family: 'Public Sans', Arial, sans-serif;
}

.atelier-home .papier-vel { max-width: none; margin: 0; background: transparent; padding: 0; }
.atelier-home :focus-visible { outline: 2px solid var(--ah-focus); outline-offset: 3px; }

/* Secties: afwisselend papier en tweede laag */
.atelier-home .ah-sectie { background: var(--ah-papier); padding: 44px 0; border-top: 1px solid var(--ah-lijn); scroll-margin-top: 96px; }
.atelier-home .ah-sectie.ah-laag { background: var(--ah-laag); }
.atelier-home .ah-wrap { max-width: 1280px; margin-inline: auto; padding-inline: 40px; }
.atelier-home .ah-sectie :is(h1, h2, h3, p, ol, ul, figure) { margin: 0; }
.atelier-home :is(h1, h2, h3) { font-family: 'Public Sans', Arial, sans-serif; color: var(--ah-navy-diep); text-wrap: balance; }

.atelier-home .ah-eyebrow {
    display: flex; align-items: center; gap: 9px;
    font-size: 12px; font-weight: 650; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ah-gedempt);
}
.atelier-home .ah-eyebrow::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ah-oranje); }
.atelier-home h2 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.atelier-home h3 { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.atelier-home .ah-nr { font-size: 12px; font-weight: 650; letter-spacing: .06em; color: var(--ah-gedempt); font-variant-numeric: tabular-nums; }

/* Knoppen en links */
.atelier-home .ah-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.atelier-home .ah-knop {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    min-height: 46px; padding: 11px 20px;
    background: var(--ah-navy); color: #fff; border: 0; border-left: 3px solid var(--ah-oranje); border-radius: 2px;
    font: 600 15px/1.3 'Public Sans', Arial, sans-serif; text-decoration: none;
    transition: background-color 160ms ease, transform 160ms ease;
}
.atelier-home .ah-knop:hover { background: var(--ah-navy-diep); color: #fff; }
.atelier-home .ah-knop:active { transform: scale(.98); }
.atelier-home .ah-link {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
    color: var(--ah-navy); font-size: 15px; font-weight: 600; text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.atelier-home .ah-link:hover { text-decoration-color: var(--ah-oranje); text-decoration-thickness: 2px; }

/* Hero: navy zoals de live homepage; gestapeld op mobiel (kop, scene, tekst), twee kolommen vanaf 1000 px */
.atelier-home .ah-hero { background: #20496b; color: #dbe6ef; border-top: 0; padding: 24px 0 32px; }
.atelier-home .ah-hero :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.atelier-home .ah-hero .ah-eyebrow { color: #dbe6ef; letter-spacing: .04em; }
.atelier-home .ah-hero__grid {
    display: grid; gap: 20px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "kop" "scene" "tekst";
}
.atelier-home .ah-hero__kop { grid-area: kop; display: grid; gap: 10px; }
.atelier-home .ah-hero__scene {
    grid-area: scene; min-width: 0; width: 100%;
    background: #fff; border-radius: 8px; box-shadow: 0 24px 60px rgba(8, 22, 38, .35); overflow: hidden;
}
.atelier-home .ah-hero__scene > * { margin: 0; max-width: 100%; }
.atelier-home .ah-hero__tekst { grid-area: tekst; display: grid; gap: 18px; }
.atelier-home .ah-hero h1 {
    font-size: 32px; font-weight: 650; line-height: 1.08; letter-spacing: -.03em; color: #fff;
}
.atelier-home .ah-hero h1 br { display: none; }
.atelier-home .ah-hero h1 em { font-style: normal; font-weight: 400; color: #dbe6ef; white-space: nowrap; text-decoration: underline; text-decoration-color: #ff6600; text-decoration-thickness: 3px; text-underline-offset: 8px; text-decoration-skip-ink: none; }
.atelier-home .ah-intro { font-size: 18px; line-height: 1.6; color: #dbe6ef; max-width: 44ch; }
.atelier-home .ah-hero .ah-knop {
    background: #fff; color: var(--ah-navy); border: 0; border-bottom: 3px solid transparent; border-radius: 2px;
}
.atelier-home .ah-hero .ah-knop:hover { background: #fff; color: var(--ah-navy); border-bottom-color: var(--ah-oranje); }
.atelier-home .ah-hero .ah-link { color: #fff; text-decoration-color: var(--ah-oranje); text-decoration-thickness: 2px; }
.atelier-home .ah-hero .ah-link:hover { text-decoration-thickness: 3px; }

/* Koppen van secties */
.atelier-home .ah-kop { display: grid; gap: 10px; margin-bottom: 24px; max-width: 760px; }
.atelier-home .ah-kop__toelichting { font-size: 16px; line-height: 1.6; color: var(--ah-gedempt); max-width: 62ch; }

/* Werkvelden */
.atelier-home .ah-werkvelden { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--ah-navy); }
.atelier-home .ah-werkvelden li { border-bottom: 1px solid var(--ah-lijn); }
.atelier-home .ah-werkvelden a {
    display: grid; grid-template-columns: 34px 168px minmax(0, 1fr) auto; gap: 8px 16px; align-items: start;
    padding: 18px 4px; color: inherit; text-decoration: none; transition: background-color 160ms ease;
}
.atelier-home .ah-werkvelden a:hover { background: #fff; }
.atelier-home .ah-werkvelden a:hover .ah-pijl { color: var(--ah-oranje); transform: translate(2px, -2px); }
.atelier-home .ah-wv__thumb { --cs-ink:#152c42; --cs-navy:#20496b; --cs-mu:#526b80; --cs-line:#c5d3df; --cs-wash:#e7eef5; --cs-orange:#ff6600; --cs-action:#c64a00; display: block; width: 168px; padding: 4px; background: var(--ah-papier); border: 1px solid var(--ah-lijn); border-radius: 4px; line-height: 0; }
.atelier-home .ah-wv__thumb .cs-thumb { display: block; width: 100%; height: auto; aspect-ratio: 168 / 98; }
.atelier-home .ah-wv__tekst { display: grid; gap: 4px; min-width: 0; }
.atelier-home .ah-wv__label { font-size: 12px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--ah-gedempt); }
.atelier-home .ah-wv__tekst strong { font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--ah-navy-diep); }
.atelier-home .ah-wv__uitkomst { font-size: 15px; line-height: 1.55; color: var(--ah-gedempt); }
.atelier-home .ah-pijl { font-size: 20px; line-height: 1; color: var(--ah-navy); transition: transform 160ms ease, color 160ms ease; }
.atelier-home .ah-meer { margin-top: 12px; }

/* Producten: mobiel een lijst, desktop vijf kolommen */
.atelier-home .ah-producten { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--ah-navy); }
.atelier-home .ah-producten li { border-bottom: 1px solid var(--ah-lijn); }
.atelier-home .ah-producten a {
    display: grid; gap: 2px; padding: 14px 4px; color: inherit; text-decoration: none; height: 100%;
    transition: background-color 160ms ease;
}
.atelier-home .ah-producten a:hover { background: var(--ah-laag); }
.atelier-home .ah-producten strong { font-size: 17px; font-weight: 650; color: var(--ah-navy-diep); }
.atelier-home .ah-ext { color: var(--ah-gedempt); font-weight: 600; margin-left: 2px; }
.atelier-home .ah-producten :is(a:hover, a:focus-visible) strong { text-decoration: underline; text-decoration-color: var(--ah-oranje); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.atelier-home .ah-domein { font-size: 13px; color: var(--ah-gedempt); overflow-wrap: anywhere; }
.atelier-home .ah-regel { font-size: 14px; line-height: 1.5; color: var(--ah-tekst); margin-top: 4px; }

/* Bewijs */
.atelier-home .ah-bewijs { display: grid; grid-template-columns: 1fr; gap: 16px; }
.atelier-home .ah-bewijs__item {
    min-width: 0;
    display: grid; align-content: start; gap: 12px; padding: 22px 22px 20px;
    background: #fff; border: 1px solid var(--ah-lijn); border-top: 3px solid var(--ah-navy);
    color: inherit; text-decoration: none; transition: border-color 160ms ease;
}
.atelier-home .ah-bewijs__item:hover { border-color: var(--ah-navy); }
.atelier-home .ah-bewijs__item p { font-size: 15px; line-height: 1.6; color: var(--ah-gedempt); }
.atelier-home .ah-label { font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ah-gedempt); }
.atelier-home .ah-bewijs__kop { display: flex; align-items: flex-end; height: 44px; }
.atelier-home .ah-bewijs__merk { display: flex; align-items: center; gap: 0; width: 100%; font-size: 13px; font-weight: 600; color: var(--ah-navy); }
.atelier-home .ah-pil { flex: 0 1 auto; min-width: 0; padding: 4px 10px; background: var(--ah-laag); border: 1px solid var(--ah-lijn); border-radius: 999px; line-height: 1.2; }
.atelier-home .ah-bewijs__merk i { position: relative; flex: 1 0 14px; min-width: 14px; max-width: 80px; height: 2px; background: var(--ah-oranje); }
.atelier-home .ah-bewijs__merk i::after { content: ''; position: absolute; right: -1px; top: -4px; border-left: 7px solid var(--ah-oranje); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.atelier-home .ah-bewijs__jaar { display: flex; align-items: baseline; gap: 10px; color: var(--ah-navy); }
.atelier-home .ah-bewijs__jaar small { font-size: 13px; font-weight: 600; }
.atelier-home .ah-bewijs__jaar b { font-size: 34px; font-weight: 650; line-height: 1; letter-spacing: -.03em; }
.atelier-home .ah-bewijs__actie { font-size: 14px; font-weight: 650; color: var(--ah-navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* Aanpak */
.atelier-home .ah-stappen { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--ah-navy); }
.atelier-home .ah-stappen li { display: grid; gap: 6px; padding: 16px 4px; border-bottom: 1px solid var(--ah-lijn); }
.atelier-home .ah-stappen p { font-size: 15px; line-height: 1.6; color: var(--ah-gedempt); }
.atelier-home .ah-aanpak h2 em { font-style: normal; color: var(--ah-navy); }

/* Contact: bestaand formulier (ids, names, captcha, intent ongewijzigd) in de atelier-stijl */
.atelier-home .ah-contact__grid { display: grid; gap: 28px; align-items: start; }
.atelier-home .ah-contact h2 { max-width: 22ch; }
.atelier-home .ah-contact__intro { display: grid; gap: 16px; align-content: start; min-width: 0; }
.atelier-home .ah-contact .papier-inzet { margin: 0; padding: 0 0 0 14px; border: 0; border-left: 3px solid var(--ah-oranje); font-size: 15px; line-height: 1.6; color: var(--ah-tekst); }
.atelier-home .ah-contact .papier-inzet a { color: var(--ah-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.atelier-home .ah-contact .papier-herkomst { color: var(--ah-gedempt); font-size: 14px; }
.atelier-home .ah-contact__noten { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.atelier-home .ah-contact .papier-noot { margin: 0; font: 400 14px/1.5 'Public Sans', Arial, sans-serif; color: var(--ah-gedempt); }
.atelier-home .ah-contact .papier-noot b { display: block; font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ah-gedempt); }
.atelier-home .ah-contact .papier-noot a { color: var(--ah-navy); }
.atelier-home .ah-contact__intro, .atelier-home .ah-contact__formulier { grid-column: auto; grid-row: auto; }
.atelier-home .ah-contact__formulier { min-width: 0; background: #fff; border: 1px solid var(--ah-lijn); border-top: 3px solid var(--ah-navy); padding: 22px; }
.atelier-home .ah-contact .papier-formulier { max-width: none; gap: 16px; }
.atelier-home .ah-contact .papier-veld { gap: 6px; }
.atelier-home .ah-contact .papier-veld label { font: 600 14px/1.4 'Public Sans', Arial, sans-serif; color: var(--ah-navy-diep); }
.atelier-home .ah-contact .papier-veld :is(input, textarea) { padding: 11px 12px; border: 1px solid #7f95a8; border-radius: 2px; background: #fff; color: var(--ah-tekst); font: 400 16px/1.5 'Public Sans', Arial, sans-serif; }
.atelier-home .ah-contact .papier-veld :is(input, textarea):focus-visible { outline: 2px solid var(--ah-focus); outline-offset: 1px; }
.atelier-home .ah-contact .papier-veld textarea { min-height: 130px; resize: vertical; }
.atelier-home .ah-contact .captcha-group input { max-width: 150px; }
.atelier-home .ah-contact .form-message { color: var(--ah-tekst); font-size: 14px; }
.atelier-home .ah-contact .submit-button {
    min-height: 46px; padding: 11px 20px; background: var(--ah-navy); color: #fff; border: 0; border-left: 3px solid var(--ah-oranje); border-radius: 2px;
    font: 600 15px/1.3 'Public Sans', Arial, sans-serif; cursor: pointer;
}
.atelier-home .ah-contact .submit-button:hover { background: var(--ah-navy-diep); border-color: var(--ah-oranje); color: #fff; }
.atelier-home .ah-contact .submit-button:disabled { opacity: .6; cursor: not-allowed; }
.atelier-home .ah-pijl.link-pijl { align-self: start; margin-top: .3em; }
.atelier-home .ah-werkvelden a:hover .ah-pijl { transform: translateX(3px); }

/* Footer in dezelfde breedte als de rest */
.atelier-home .papier-voet { max-width: none; margin: 0; padding: 28px max(40px, calc((100% - 1280px) / 2 + 40px)); }
.atelier-home .company-footer { background: var(--ah-laag); }

@media (min-width: 700px) {
    .atelier-home .ah-sectie { padding: 56px 0; }
    .atelier-home .ah-bewijs { grid-template-columns: 1fr 1fr; gap: 20px; }
    .atelier-home .ah-stappen { grid-template-columns: repeat(3, 1fr); border-top: 0; gap: 0 28px; }
    .atelier-home .ah-stappen li { border-top: 1px solid var(--ah-navy); border-bottom: 0; padding: 16px 0 0; }
    .atelier-home .ah-producten { grid-template-columns: repeat(3, 1fr); border-top: 0; gap: 8px 20px; }
    .atelier-home .ah-producten li { border-top: 1px solid var(--ah-navy); border-bottom: 0; }
    .atelier-home .ah-producten a { padding: 14px 0 8px; }
}

@media (min-width: 700px) and (max-width: 1099px) {
    .atelier-home .ah-producten:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
    .atelier-home .ah-contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; }
    .atelier-home .ah-contact__intro { grid-column: 1; grid-row: 1; }
    .atelier-home .ah-contact__formulier { grid-column: 2; grid-row: 1; padding: 28px; }
}

@media (min-width: 1100px) {
    .atelier-home .ah-werkvelden { grid-template-columns: 1fr 1fr; gap: 0 36px; border-top: 0; }
    .atelier-home .ah-werkvelden li { border-top: 1px solid var(--ah-navy); border-bottom: 0; }
    .atelier-home .ah-werkvelden a { padding: 18px 0 22px; }
}

@media (min-width: 700px) {
    .atelier-home .ah-hero h1 br { display: inline; }
    .atelier-home .ah-hero h1 { font-size: 40px; }
}

@media (min-width: 1000px) {
    .atelier-home .ah-hero { display: flex; align-items: center; min-height: clamp(700px, calc(100svh - 92px), 830px); padding: 40px 0; }
    .atelier-home .ah-hero > .ah-wrap { width: 100%; max-width: 1280px; padding-inline: 40px; }
    .atelier-home .ah-hero__grid {
        grid-template-columns: minmax(340px, 34%) 1fr;
        grid-template-areas: "kop scene" "tekst scene";
        grid-template-rows: auto 1fr;
        align-items: start; column-gap: 40px; row-gap: 20px;
    }
    .atelier-home .ah-hero__kop, .atelier-home .ah-hero__tekst { align-self: start; }
    .atelier-home .ah-hero h1 { font-size: clamp(34px, 3.3vw, 50px); }
    .atelier-home .ah-hero__scene { align-self: start; }
}

@media (min-width: 1100px) {
    .atelier-home .ah-producten { grid-template-columns: repeat(3, 1fr); gap: 8px 18px; }
    .atelier-home .ah-producten:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 699px) {
    .atelier-home .ah-werkvelden a { grid-template-columns: 34px minmax(0, 1fr) auto; }
    .atelier-home .ah-wv__thumb { grid-column: 2; grid-row: 1; width: min(100%, 168px); min-width: 140px; }
    .atelier-home .ah-nr { grid-row: 1; align-self: center; }
    .atelier-home .ah-wv__tekst { grid-column: 2 / 4; grid-row: 2; }
    .atelier-home .ah-pijl { grid-column: 3; grid-row: 1; }
    .atelier-home .ah-wrap { padding-inline: 20px; }
    .atelier-home .papier-voet { padding: 24px 20px; }
}

@media (max-width: 699px) {
    .atelier-home .ah-hero .ah-wrap { padding-inline: 16px; }
    .atelier-home .ah-hero { padding-top: 16px; }
}

@media (min-width: 1280px) {
    .atelier-home .ah-wrap { padding-inline: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .atelier-home * { transition: none !important; }
}

/* Contactbalk in de huisstijl (geen groen of crème); op mobiel pas zichtbaar als de hero uit beeld is (homepage-atelier.js) */
.atelier-home .contactbalk { --cb-ink: #152c42; --cb-oranje: #20496b; --cb-oranje-donker: #152c42; --cb-lijn: #cad7e2; background: #e7eef5; border-top: 1px solid #cad7e2; }
.atelier-home .contactbalk__knop { background: #fff; border-color: #20496b; border-radius: 2px; }
.atelier-home .contactbalk__knop:hover { background: #f7f9fc; }
.atelier-home .contactbalk__knop--app { background: #20496b; border-color: #20496b; border-left: 4px solid #ff6600; color: #fff; }
.atelier-home .contactbalk__knop--app:hover { background: #152c42; border-color: #152c42; border-left-color: #ff6600; }
.atelier-home .contactbalk__knop:focus-visible { outline: 3px solid #ba4a00; }
@media (max-width: 720px) {
    .atelier-home .contactbalk { background: #e7eef5; transition: transform 200ms ease, visibility 0s; }
    .atelier-home[data-hero-in-beeld] .contactbalk { transform: translateY(110%); visibility: hidden; transition: transform 200ms ease, visibility 0s 200ms; }
    .atelier-home[data-hero-in-beeld]:has(.contactbalk) { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .atelier-home .contactbalk { transition: none !important; } }

/* Productband en contact: uitlijning */
.atelier-home .ah-producten a { align-content: start; }
.atelier-home .ah-tel { white-space: nowrap; }
.atelier-home .ah-contact .papier-noot--contact { background: transparent; border: 0; padding: 0; border-radius: 0; flex: 1 1 100%; max-width: none; }
.atelier-home .ah-contact .papier-noot--contact small { display: block; font-size: 13px; }
.atelier-home .ah-contact .form-message:empty { display: none; }
.atelier-home .ah-contact .form-message { min-height: 0; margin: 0; }