/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.fixed{position:fixed}.relative{position:relative}.start{inset-inline-start:var(--spacing)}.table{display:table}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.uppercase{text-transform:uppercase}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}}:root{--ink:#0f172a;--paper:#f7f9fb;--paper-2:#edf1f4;--line:#d5d9de;--acid:#0ea5e9;--acid-2:#0284c7;--sage:#f59e0b;--white:#fff;--graphite:#2e3138;--steel:#7a8088;--max:1440px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--paper);color:var(--ink);margin:0;font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{color:inherit}.siteHeader{height:88px;max-width:var(--max);border-left:1px solid var(--line);border-right:1px solid var(--line);z-index:20;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;margin:0 auto;padding:0 34px;display:grid;position:relative}.brand{align-items:center;gap:12px;width:max-content;display:inline-flex}.brand>span:last-child{flex-direction:column;gap:3px;display:flex}.brand strong{letter-spacing:.12em;font:800 18px/1 Space Grotesk,Arial,sans-serif}.brand strong span{color:var(--sage)}.brand small{letter-spacing:.13em;font:700 6.5px/1.1 Inter,Arial,sans-serif}.brandMark{flex:none;width:38px;height:38px;display:block}.siteHeader nav{align-items:center;gap:28px;font-size:13px;font-weight:700;display:flex}.siteHeader nav a,.siteHeader summary{cursor:pointer;transition:color .2s}.siteHeader nav>a:hover,.siteHeader summary:hover{color:var(--acid-2)}.siteHeader details{position:relative}.siteHeader summary{list-style:none}.siteHeader summary::-webkit-details-marker{display:none}.siteHeader summary:after{content:" +";color:var(--acid)}.navMenu{background:var(--ink);width:250px;color:var(--white);gap:2px;padding:12px;display:grid;position:absolute;top:27px;left:-18px;box-shadow:0 18px 50px #0f172a38}.navMenu a{padding:11px 10px;font-size:12px}.navMenu a:hover{color:var(--white);background:#ffffff12}.headerActions{justify-self:end;align-items:center;gap:20px;display:flex}.languagePicker{letter-spacing:.1em;font-size:11px;font-weight:800;position:relative}.languagePicker summary{cursor:pointer;padding:12px 4px;list-style:none}.languagePicker summary::-webkit-details-marker{display:none}.languagePicker summary:after{content:" +";color:var(--acid)}.languagePicker>div{background:var(--ink);min-width:62px;color:var(--white);gap:2px;padding:7px;display:grid;position:absolute;top:38px;right:0;box-shadow:0 18px 50px #0f172a38}.languagePicker a{text-align:center;padding:9px 10px}.languagePicker a:hover{background:#ffffff14}.button{border:1px solid var(--ink);background:var(--ink);min-height:52px;color:var(--white);letter-spacing:.03em;justify-content:center;align-items:center;gap:22px;padding:0 22px;font-size:12px;font-weight:800;transition:background .2s,transform .2s,color .2s;display:inline-flex}.button:hover{background:var(--acid-2);border-color:var(--acid-2);transform:translateY(-2px)}.button:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline-offset:3px;outline:3px solid #0ea5e966}.buttonSmall{min-height:42px;padding:0 17px}.buttonGhost{color:var(--ink);background:0 0}.buttonGhost:hover{color:var(--white)}.buttonLight{background:var(--white);color:var(--ink);border-color:var(--white)}.hero{min-height:680px;max-width:var(--max);border:1px solid var(--line);grid-template-columns:53% 47%;margin:0 auto;display:grid;overflow:hidden}.heroCopy{flex-direction:column;justify-content:center;padding:74px clamp(34px,6vw,96px) 42px;display:flex}.eyebrow,.kicker{letter-spacing:.14em;text-transform:uppercase;margin:0 0 22px;font-size:10px;font-weight:900}.eyebrow{align-items:center;gap:10px;display:flex}.eyebrow span{background:var(--acid);width:25px;height:2px;display:inline-block}h1{letter-spacing:-.065em;max-width:800px;margin:0;font-size:clamp(56px,6vw,92px);font-weight:800;line-height:.91}h1 em{color:var(--acid-2);letter-spacing:-.05em;font-family:Georgia,Times New Roman,serif;font-weight:400;display:block}.heroText{letter-spacing:-.02em;max-width:660px;margin:35px 0 0;font-size:clamp(17px,1.6vw,22px);line-height:1.48}.heroActions{flex-wrap:wrap;gap:10px;margin-top:35px;display:flex}.heroProof{border-top:1px solid var(--line);letter-spacing:.08em;text-transform:uppercase;flex-wrap:wrap;gap:14px 24px;margin-top:44px;padding-top:20px;font:700 9px/1.3 Arial,sans-serif;display:flex}.heroProof span:before{content:"●";color:var(--acid);margin-right:7px;font-size:7px}.heroVisual{background-color:var(--ink);isolation:isolate;min-height:600px;position:relative;overflow:hidden}.heroVisual:before{content:"";opacity:.28;background-image:linear-gradient(#ffffff18 1px,#0000 1px),linear-gradient(90deg,#ffffff18 1px,#0000 1px);background-size:43px 43px;position:absolute;inset:0}.heroVisual:after{content:"";background:var(--acid);filter:blur(110px);opacity:.42;z-index:-1;border-radius:50%;width:220px;height:220px;position:absolute;bottom:6%;right:8%}.systemBox{color:var(--white);border:1px solid #ffffff72;position:absolute}.systemOuter{inset:16% 12% 18% 14%}.systemOuter:before,.systemOuter:after{content:"";border-color:var(--acid);width:20px;height:20px;position:absolute}.systemOuter:before{border-left:3px solid var(--acid);border-top:3px solid var(--acid);top:-2px;left:-2px}.systemOuter:after{border-right:3px solid var(--acid);border-bottom:3px solid var(--acid);bottom:-2px;right:-2px}.systemOuter>span{letter-spacing:.12em;font-size:8px;position:absolute;top:-23px;left:13px}.systemInner{border:2px solid var(--white);align-items:flex-end;gap:9px;padding:14px;display:flex;inset:29% 25% 31% 27%}.systemInner span{letter-spacing:.12em;font-size:8px;position:absolute;top:14px;left:15px}.systemInner i{background:var(--acid);border-radius:2px;width:17%;height:45%;display:block}.systemInner i:nth-of-type(2){background:var(--white);height:62%}.systemInner i:nth-of-type(3){background:var(--sage);height:32%}.axis{background:#ffffff30;position:absolute}.axisA{width:1px;top:8%;bottom:9%;left:49%}.axisB{height:1px;top:52%;left:7%;right:6%}.measure{color:#fff8;letter-spacing:.15em;font-size:7px;position:absolute}.measureTop{top:9%;left:14%}.measureSide{transform-origin:0;top:22%;left:94%;transform:rotate(90deg)}.visualIndex{color:var(--white);letter-spacing:.12em;font:800 11px/1 Arial;position:absolute;bottom:5%;right:7%}.hero-transit .systemInner{grid-template-columns:repeat(5,1fr);align-items:stretch;padding:18px;display:grid;inset:27% 17% 30% 20%}.hero-transit .systemInner i{background:var(--acid);border-radius:50%;width:auto;height:auto}.hero-transit .systemInner i:nth-of-type(2){background:var(--white)}.hero-transit .systemInner i:nth-of-type(3){background:var(--sage)}.signalBar{max-width:var(--max);border:1px solid var(--ink);background:var(--acid);letter-spacing:.12em;border-top:0;justify-content:space-between;align-items:center;gap:22px;min-height:52px;margin:0 auto;padding:0 34px;font:900 9px/1 Arial;display:flex;overflow:hidden}.signalBar>span{align-items:center;gap:clamp(20px,6vw,90px);display:flex}.signalBar b{font-size:16px}.section{max-width:var(--max);border-left:1px solid var(--line);border-right:1px solid var(--line);margin:0 auto;padding:110px clamp(34px,6vw,90px)}.introSplit,.detailLead{grid-template-columns:1fr 1fr;align-items:start;gap:clamp(50px,9vw,140px);display:grid}h2{letter-spacing:-.055em;max-width:760px;margin:0;font-size:clamp(39px,4.3vw,68px);line-height:.98}.largeBody{letter-spacing:-.025em;font-size:clamp(19px,2vw,27px);line-height:1.42}.largeBody p:first-child,p.largeBody{margin-top:0}.muted{color:#545b66;font-size:15px;line-height:1.55}.sectionHeading{justify-content:space-between;align-items:end;gap:40px;margin-bottom:52px;display:flex}.sectionHeading>p{color:#545b66;max-width:420px;margin:0;line-height:1.55}.solutionGrid{border:1px solid var(--line);grid-template-columns:repeat(4,1fr);display:grid}.solutionCard{border-right:1px solid var(--line);flex-direction:column;justify-content:space-between;min-height:420px;padding:28px;transition:background .25s,color .25s;display:flex}.solutionCard:last-child{border-right:0}.solutionCard:hover{background:var(--ink);color:var(--white)}.cardTop{justify-content:space-between;align-items:center;font:800 10px/1 Arial;display:flex}.tag{letter-spacing:.08em;text-transform:uppercase;border:1px solid;border-radius:30px;padding:8px 10px;font-size:8px}.solutionCard h3,.detailCards h3{letter-spacing:-.04em;margin:0 0 18px;font-size:clamp(25px,2.3vw,36px);line-height:1}.solutionCard p{max-width:340px;margin:0;font-size:14px;line-height:1.55}.textLink{align-items:center;gap:16px;font-size:12px;font-weight:800;display:inline-flex}.textLink b{color:var(--acid)}.darkSection{background:var(--ink);color:var(--white);border-color:var(--ink)}.evidenceLayout{grid-template-columns:.9fr 1.1fr;align-items:center;gap:clamp(50px,9vw,150px);display:grid}.evidenceLead>p:not(.kicker){color:#d5d9de;max-width:560px;margin:30px 0;line-height:1.6}.evidencePanel{border:1px solid #ffffff34;padding:24px}.evidenceStamp{background:#ffffff08;border:1px solid #ffffff34;justify-content:space-between;align-items:flex-start;min-height:150px;margin-bottom:12px;padding:20px;display:flex}.evidenceStamp span{letter-spacing:.15em;font-size:9px}.evidenceStamp strong{color:var(--acid);letter-spacing:-.08em;font-size:68px;line-height:.8}.checkRow{border-top:1px solid #ffffff26;grid-template-columns:45px 1fr 30px;align-items:center;min-height:59px;display:grid}.checkRow span{color:#ffffff8a;font-size:9px}.checkRow p{margin:0;font-size:13px;font-weight:700}.checkRow b{color:var(--acid)}.processGrid{border-top:1px solid var(--line);border-bottom:1px solid var(--line);grid-template-columns:repeat(4,1fr);display:grid}.processGrid article{border-right:1px solid var(--line);min-height:270px;padding:28px 24px}.processGrid article:last-child{border-right:0}.processGrid span,.detailCards>article>span{color:var(--acid-2);font-size:10px;font-weight:900}.processGrid h3{letter-spacing:-.04em;margin:65px 0 12px;font-size:24px}.processGrid p{color:#545b66;margin:0;font-size:13px;line-height:1.6}.marketsSection{background:var(--paper-2);grid-template-columns:.9fr 1.1fr;gap:clamp(55px,9vw,150px);display:grid}.marketsSection .largeBody{max-width:520px;margin:28px 0}.marketList{border-top:1px solid var(--ink)}.marketList>div{border-bottom:1px solid var(--line);grid-template-columns:50px 1fr auto;align-items:center;gap:18px;min-height:70px;display:grid}.marketList span{color:var(--acid-2);font-size:10px;font-weight:900}.marketList strong{font-size:16px}.marketList small{color:#667080;font-size:10px}.regionalContext{border-top:1px solid var(--acid);border-bottom:1px solid var(--line);background:#eaf6fc;grid-template-columns:.9fr 1.1fr;align-items:start;gap:clamp(55px,9vw,150px);display:grid}.regionalContext .largeBody{max-width:720px;margin-top:0}.regionalContext .textLink{margin-top:16px}.officeSection{background:var(--paper-2);grid-template-columns:.9fr 1.1fr;gap:clamp(55px,8vw,120px);display:grid}.officeIntro .largeBody{max-width:650px;margin:28px 0}.officeGrid{border:1px solid var(--line);grid-template-columns:1fr 1fr;display:grid}.officeGrid article{border-right:1px solid var(--line);flex-direction:column;min-height:390px;padding:30px;display:flex}.officeGrid article:last-child{border-right:0}.officeGrid article>span{color:var(--acid-2);letter-spacing:.1em;font-size:10px;font-weight:900}.officeGrid h3{letter-spacing:-.05em;margin:85px 0 10px;font-size:clamp(32px,3vw,48px)}.officeGrid p{margin:0 0 25px;font-size:12px;font-weight:800}.officeGrid small{color:#5f6875;margin-top:auto;font-size:11px;line-height:1.65}.cabinetSection{background:var(--white)}.cabinetSectionCompact{background:var(--paper-2)}.cabinetGrid{border:1px solid var(--line);grid-template-columns:repeat(3,1fr);display:grid}.cabinetCard{border-right:1px solid var(--line);background:var(--paper);flex-direction:column;min-height:690px;padding:28px;display:flex}.cabinetCard:last-child{border-right:0}.cabinetCode{letter-spacing:.1em;justify-content:space-between;align-items:center;gap:12px;font-size:9px;font-weight:900;display:flex}.cabinetCode span{color:var(--acid-2)}.cabinetCode b{border:1px solid var(--line);text-transform:uppercase;border-radius:30px;padding:8px 10px;font-size:8px}.cabinetSilhouette{border:3px solid var(--ink);width:115px;height:160px;box-shadow:10px 10px 0 var(--sage);grid-template-rows:repeat(3,1fr);gap:8px;margin:44px auto 36px;padding:18px 15px;display:grid}.cabinetSilhouette i{border:1px solid var(--ink);background:linear-gradient(90deg, var(--acid) 0 16%, transparent 16%);display:block}.cabinetCard:nth-child(2) .cabinetSilhouette{width:135px;box-shadow:10px 10px 0 var(--acid)}.cabinetCard:nth-child(3) .cabinetSilhouette{width:185px;box-shadow:10px 10px 0 var(--ink)}.cabinetCard h3{letter-spacing:-.045em;margin:0 0 11px;font-size:clamp(27px,2.4vw,38px);line-height:1}.cabinetCard>p{color:#545b66;min-height:64px;margin:0;font-size:13px;line-height:1.55}.cabinetCard ul{border-top:1px solid var(--line);margin:25px 0;padding:0;list-style:none}.cabinetCard li{border-bottom:1px solid var(--line);padding:9px 0;font-size:11px;font-weight:700}.cabinetCard li:before{content:"✓";color:var(--acid-2);margin-right:9px}.cabinetPrice{flex-direction:column;gap:5px;margin:auto 0 14px;padding-top:18px;display:flex}.cabinetPrice small{letter-spacing:.1em;text-transform:uppercase;font-size:8px;font-weight:800}.cabinetPrice strong{font-size:18px}.cabinetCard .button{width:100%}.sourceNote{color:#697384;max-width:860px;margin:24px 0 0;font-size:10px;line-height:1.5}.configuratorSection{background:var(--ink);color:var(--white);grid-template-columns:.75fr 1.25fr;gap:clamp(50px,8vw,120px);display:grid}.configIntro{align-self:start;position:sticky;top:40px}.configIntro>p:not(.kicker){color:#c9d0da;max-width:500px;margin:28px 0;line-height:1.6}.privacyChip{color:#e3e7ed;border:1px solid #ffffff30;align-items:center;gap:10px;padding:11px 14px;font-size:10px;font-weight:800;display:inline-flex}.privacyChip span{color:var(--acid)}.configurator{background:#ffffff08;border:1px solid #ffffff30;min-height:680px}.configProgress{border-bottom:1px solid #ffffff30;grid-template-columns:1fr auto;align-items:center;gap:18px;padding:23px 25px;display:grid}.configProgress>span{letter-spacing:.12em;font-size:8px;font-weight:900}.configProgress>strong{font-size:17px}.configProgress>i{background:#ffffff20;grid-column:1/-1;height:3px;overflow:hidden}.configProgress>i>b{background:var(--acid);height:100%;transition:width .25s;display:block}.configSteps fieldset{border:0;border-bottom:1px solid #ffffff24;margin:0;padding:22px 25px}.configSteps fieldset:last-child{border-bottom:0}.configSteps legend{gap:15px;width:100%;margin-bottom:13px;padding:0;font-size:11px;font-weight:800;display:flex}.configSteps legend span{color:var(--acid);font-size:9px}.configChoices{grid-template-columns:1fr 1fr;gap:6px;display:grid}.configChoices button{min-height:42px;color:var(--white);text-align:left;cursor:pointer;background:0 0;border:1px solid #ffffff30;justify-content:space-between;align-items:center;gap:12px;padding:0 11px;font-size:10px;display:flex}.configChoices button:hover,.configChoices button.selected{background:var(--white);border-color:var(--white);color:var(--ink)}.configChoices button b{color:var(--acid)}.configResult{padding:34px}.resultHeader{border-bottom:1px solid #ffffff2b;grid-template-columns:68px 1fr;align-items:center;gap:20px;padding-bottom:30px;display:grid}.resultHeader>span{border:1px solid var(--acid);width:62px;height:62px;color:var(--acid);border-radius:50%;place-items:center;font-size:28px;display:grid}.resultHeader .kicker{margin-bottom:10px}.resultHeader h3{letter-spacing:-.05em;margin:0;font-size:clamp(30px,3vw,47px);line-height:1}.configResult>p{color:#c6cac6;margin:26px 0 15px}.configResult dl{margin:0}.configResult dl>div{border-top:1px solid #ffffff24;grid-template-columns:150px 1fr;gap:25px;padding:22px 0;display:grid}.configResult dt{color:var(--acid);letter-spacing:.1em;text-transform:uppercase;font-size:8px;font-weight:900}.configResult dd{margin:0;font-size:14px;line-height:1.55}.configResult .qualification{border-left:3px solid var(--acid);background:#ffffff0a;padding:16px;font-size:10px;line-height:1.5}.resultActions{flex-wrap:wrap;gap:8px;margin-top:30px;display:flex}.configurator .buttonGhost{border-color:var(--white);color:var(--white)}.resetButton{color:#aeb4ae;cursor:pointer;background:0 0;border:0;min-height:52px;padding:0 12px;font-size:10px;text-decoration:underline}.briefSection{background:var(--white);grid-template-columns:.78fr 1.22fr;gap:clamp(50px,8vw,120px);display:grid}.briefIntro>p:not(.kicker){max-width:500px;margin:28px 0;line-height:1.55}.briefNote{border-left:3px solid var(--acid);background:var(--paper);grid-template-columns:25px 1fr;gap:8px;margin-top:45px;padding:18px;display:grid}.briefNote>span{color:var(--acid-2);font-weight:900}.briefNote p{margin:0;font-size:11px;line-height:1.5}.briefNote strong{margin-bottom:4px;display:block}.briefForm{border:1px solid var(--line)}.briefForm fieldset{border:0;border-bottom:1px solid var(--line);margin:0;padding:24px}.briefForm legend{gap:18px;width:100%;margin:0 0 15px;padding:0;font-size:12px;font-weight:800;display:flex}.briefForm legend span{color:var(--acid-2);font-size:9px}.choiceGrid{grid-template-columns:1fr 1fr;gap:6px;display:grid}.choiceGrid button{border:1px solid var(--line);text-align:left;cursor:pointer;background:0 0;justify-content:space-between;align-items:center;min-height:43px;padding:0 12px;font-size:11px;display:flex}.choiceGrid button:hover,.choiceGrid button.selected{border-color:var(--ink);background:var(--ink);color:var(--white)}.choiceGrid button b{color:var(--acid)}.briefSubmit{background:var(--paper);justify-content:space-between;align-items:center;gap:20px;padding:22px 24px;display:flex}.briefSubmit>div{flex-direction:column;gap:4px;display:flex}.briefSubmit small{letter-spacing:.15em;font-size:7px}.briefSubmit strong{font-size:18px}.briefSubmit .button:disabled{opacity:.4;cursor:not-allowed;transform:none}.detailLead{border-bottom:1px solid var(--line)}.detailLead>.largeBody{margin:0}.factGrid{border-bottom:1px solid var(--line);grid-template-columns:repeat(3,1fr);padding-top:0;padding-bottom:0;display:grid}.factGrid>div{border-right:1px solid var(--line);flex-direction:column;min-height:220px;padding:38px 28px;display:flex}.factGrid>div:last-child{border-right:0}.factGrid strong{color:var(--acid-2);letter-spacing:-.07em;font-size:clamp(43px,5vw,74px);line-height:.9}.factGrid span{margin-top:auto;font-size:13px;font-weight:800}.factGrid small{color:#656b66;margin-top:6px;font-size:10px}.detailCards{background:var(--paper-2);grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.detailCards article{background:var(--paper);flex-direction:column;min-height:490px;padding:32px;display:flex}.detailCards h3{margin-top:75px}.detailCards p{color:#545b55;line-height:1.55}.detailCards ul{border-top:1px solid var(--line);margin:auto 0 0;padding:20px 0 0;list-style:none}.detailCards li{border-bottom:1px solid var(--line);padding:9px 0;font-size:12px;font-weight:700}.detailCards li:before{content:"↳";color:var(--acid-2);margin-right:10px}.evidenceNotice{background:var(--ink);color:var(--white);grid-template-columns:90px 1fr;align-items:center;gap:35px;display:grid}.evidenceNotice>span{border:1px solid var(--acid);width:78px;height:78px;color:var(--acid);border-radius:50%;place-items:center;font:400 50px/1 Georgia,serif;display:grid}.evidenceNotice p:last-child{max-width:850px;margin:0;font-size:17px;line-height:1.55}.sourceSection{background:var(--paper-2);grid-template-columns:.9fr 1.1fr;align-items:start;gap:clamp(55px,9vw,150px);display:grid}.sourceSection .muted{margin-top:24px}.sourceLinks{border-top:1px solid var(--ink);display:grid}.sourceLinks a{border-bottom:1px solid var(--line);justify-content:space-between;gap:28px;padding:22px 0;font-size:14px;font-weight:800;line-height:1.4;display:flex}.sourceLinks a:hover{color:var(--acid-2)}.sourceLinks b{color:var(--acid)}.nextLink{border-bottom:1px solid var(--line);justify-content:space-between;align-items:end;gap:40px;display:flex}.nextLink h2{max-width:900px}footer{max-width:var(--max);background:var(--ink);color:var(--white);margin:0 auto;padding:72px clamp(34px,6vw,90px) 24px}.footerTop{grid-template-columns:2fr repeat(3,1fr);gap:60px;padding-bottom:60px;display:grid}.footerTop>div{flex-direction:column;align-items:flex-start;gap:13px;display:flex}.footerTop>div:first-child p{color:#b9beb9;max-width:340px;font-size:13px;line-height:1.55}.footerTop small{color:var(--acid);text-transform:uppercase;letter-spacing:.12em;margin-bottom:7px;font-size:8px}.footerTop>div:not(:first-child) a{color:#d4d7d3;font-size:12px}.footerTop>div:not(:first-child) a:hover{color:var(--white)}.footerOffices{border-top:1px solid #ffffff28;grid-template-columns:1fr 1fr;gap:70px;padding:28px 0;display:grid}.footerOffices address{grid-template-columns:65px minmax(190px,.8fr) 1fr;align-items:start;gap:18px;font-style:normal;display:grid}.footerOffices address>span{color:var(--acid);letter-spacing:.12em;font-size:8px;font-weight:900}.footerOffices address>strong{font-size:11px;line-height:1.45}.footerOffices address>p{color:#aeb4ae;margin:0;font-size:10px;line-height:1.55}.footerBottom{color:#838a84;letter-spacing:.09em;text-transform:uppercase;border-top:1px solid #ffffff28;justify-content:space-between;gap:20px;padding-top:22px;font-size:8px;display:flex}@media (width<=980px){.siteHeader{grid-template-columns:1fr auto;height:78px}.siteHeader nav,.languagePicker{display:none}.hero{grid-template-columns:1fr}.heroCopy{min-height:580px}.heroVisual{min-height:480px}.introSplit,.detailLead,.evidenceLayout,.marketsSection,.regionalContext,.sourceSection,.officeSection,.configuratorSection,.briefSection,.solutionGrid,.cabinetGrid,.detailCards{grid-template-columns:1fr}.solutionCard{border-right:0;border-bottom:1px solid var(--line);min-height:340px}.solutionCard:last-child{border-bottom:0}.cabinetCard{border-right:0;border-bottom:1px solid var(--line);min-height:610px}.cabinetCard:last-child{border-bottom:0}.configIntro{position:static}.processGrid{grid-template-columns:1fr 1fr}.processGrid article:nth-child(2){border-right:0}.processGrid article:nth-child(-n+2){border-bottom:1px solid var(--line)}.footerTop{grid-template-columns:2fr 1fr 1fr}.footerTop>div:last-child{display:none}.footerOffices{grid-template-columns:1fr;gap:24px}}@media (width<=620px){.siteHeader{padding:0 18px}.headerActions .button{width:43px;min-height:43px;padding:0;font-size:0}.headerActions .button:after{content:"↗";font-size:15px}.heroCopy{min-height:560px;padding:58px 24px 35px}h1{font-size:54px}.heroVisual{min-height:400px}.heroProof{display:grid}.signalBar{white-space:nowrap;justify-content:flex-start}.section{padding:75px 24px}.sectionHeading{flex-direction:column;align-items:start}.processGrid,.factGrid{grid-template-columns:1fr}.processGrid article,.factGrid>div{border-right:0;border-bottom:1px solid var(--line)}.marketList>div{grid-template-columns:38px 1fr}.marketList small{grid-column:2;margin-top:-18px;padding-bottom:12px}.officeGrid{grid-template-columns:1fr}.officeGrid article{border-right:0;border-bottom:1px solid var(--line);min-height:300px}.officeGrid article:last-child{border-bottom:0}.choiceGrid,.configChoices{grid-template-columns:1fr}.configResult{padding:24px}.configResult dl>div{grid-template-columns:1fr;gap:8px}.briefSubmit{flex-direction:column;align-items:stretch}.detailCards{padding-left:12px;padding-right:12px}.evidenceNotice{grid-template-columns:1fr}.nextLink{flex-direction:column;align-items:flex-start}.footerTop{grid-template-columns:1fr 1fr}.footerTop>div:first-child{grid-column:1/-1}.footerTop>div:nth-child(3){display:none}.footerBottom{flex-direction:column}.footerOffices address{grid-template-columns:1fr;gap:7px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.01ms!important}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}

.footerOffices address>p a{text-decoration:underline;text-underline-offset:2px}
.footerOffices address>p a:hover{color:var(--white)}

.officeGrid small a{text-decoration:underline;text-underline-offset:2px}
.officeGrid small a:hover{color:var(--acid-2)}

/* ---------------------------------------------------------------------------
   Full-bleed achtergronden — content blijft gekapt op --max (1440px).
   De breedtebeperking zit niet meer op width maar op padding-inline, zodat de
   sectiekleur doorloopt tot de vensterrand terwijl de content-box identiek
   blijft aan de vorige opzet. --g is de gutter per elementtype.
   --------------------------------------------------------------------------- */
.siteHeader, .signalBar, .section, footer {
  max-width: none;
  padding-inline: max(var(--g), calc((100% - var(--max)) / 2 + var(--g)));
}
.siteHeader, .signalBar { --g: 34px }
.section, footer { --g: clamp(34px, 6vw, 90px) }
.siteHeader, .signalBar, .section { border-left: 0; border-right: 0 }

/* Hero: donker paneel loopt door naar rechts, tekst blijft op de contentkolom.
   Alleen boven de 980px-breakpoint, want daaronder stapelt de hero naar 1 kolom. */
@media (min-width: 981px) {
  .hero { max-width: none; border-left: 0; border-right: 0 }
  .heroCopy { padding-left: max(clamp(34px, 6vw, 96px), calc(94.34% - 624px)) }
}

/* Mobiele gutters gelijkhouden aan de bestaande shorthand-overrides */
@media (max-width: 620px) {
  .siteHeader { --g: 18px }
  .section { --g: 24px }
}

/* ---------------------------------------------------------------------------
   Productpagina's — Firebreak doorvoeren en batterijopslag.
   Componenten voor productkaarten met foto, specificatietabellen, downloads,
   FAQ en het leadformulier. Bewust opgebouwd uit dezelfde primitieven als de
   bestaande secties (1px --line rasters, --acid accent, kicker-typografie) —
   het is één ontwerp, geen tweede stijl.
   --------------------------------------------------------------------------- */

/* Hero met productfoto. Vervangt .heroVisual op pagina's waar we echte
   beelden hebben; de abstracte variant blijft elders in gebruik. */
.heroPhoto { position: relative; overflow: hidden; background: var(--graphite); min-height: 600px }
.heroPhoto img { width: 100%; height: 100%; object-fit: cover; display: block }
.heroPhoto figcaption {
  position: absolute; left: 0; bottom: 0; color: var(--white);
  letter-spacing: .12em; text-transform: uppercase; font-size: 9px; font-weight: 900;
  padding: 12px 16px; background: #0f172acc;
}

/* Productfamilies: kaart met foto, kenmerken en prijs. */
.familyGrid { border: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr) }
.familyCard {
  border-right: 1px solid var(--line); background: var(--paper);
  display: flex; flex-direction: column; padding: 0;
}
.familyCard:nth-child(3n) { border-right: 0 }
.familyGrid > .familyCard:nth-last-child(n+4) { border-bottom: 1px solid var(--line) }
.familyCard > img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-bottom: 1px solid var(--line); background: var(--paper-2);
}
.familyBody { display: flex; flex-direction: column; flex: 1; padding: 28px }
.familyCard h3 { margin: 0 0 11px; font-size: clamp(23px, 2.1vw, 31px); line-height: 1; letter-spacing: -.04em }
.familyCard > .familyBody > p { margin: 0; color: #545b66; font-size: 13px; line-height: 1.55 }
.familyCard ul { margin: 22px 0; padding: 0; list-style: none; border-top: 1px solid var(--line) }
.familyCard li { border-bottom: 1px solid var(--line); padding: 9px 0; font-size: 11px; font-weight: 700 }
.familyCard li:before { content: "✓"; color: var(--acid-2); margin-right: 9px }

/* Specificatie- en prestatietabellen. Scrollen horizontaal binnen hun eigen
   container zodat de pagina zelf nooit meebeweegt. */
.dataTable { overflow-x: auto; border: 1px solid var(--line); background: var(--paper) }
.dataTable table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 13px }
.dataTable th, .dataTable td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--line); vertical-align: top }
.dataTable thead th {
  background: var(--paper-2); letter-spacing: .1em; text-transform: uppercase;
  font-size: 9px; font-weight: 900; white-space: nowrap;
}
.dataTable tbody tr:last-child td { border-bottom: 0 }
.dataTable td strong { font-weight: 800 }
.dataTable td b { color: var(--acid-2); font-weight: 800; white-space: nowrap }
.dataTable caption {
  caption-side: bottom; text-align: left; color: #656b66;
  padding: 14px 18px; font-size: 11px; line-height: 1.55; border-top: 1px solid var(--line);
}

/* Documenten en compliance. */
.docGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; background: var(--paper-2) }
.docCard { background: var(--paper); padding: 28px; display: flex; flex-direction: column }
.docCard h3 { margin: 0 0 12px; font-size: 20px; letter-spacing: -.03em }
.docCard p { margin: 0 0 22px; color: #545b66; font-size: 13px; line-height: 1.55 }
.docLinks { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px }
.docLinks a {
  border: 1px solid var(--line); border-radius: 30px; padding: 9px 13px;
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
}
.docLinks a:hover { border-color: var(--acid-2); color: var(--acid-2) }

/* FAQ — native <details>, geen JavaScript nodig. */
.faqList { border-top: 1px solid var(--ink) }
.faqList details { border-bottom: 1px solid var(--line) }
.faqList summary {
  cursor: pointer; list-style: none; padding: 22px 0; font-size: 15px; font-weight: 800;
  display: flex; justify-content: space-between; gap: 28px; line-height: 1.4;
}
.faqList summary::-webkit-details-marker { display: none }
.faqList summary:after { content: "+"; color: var(--acid-2); font-size: 19px; line-height: 1 }
.faqList details[open] summary:after { content: "−" }
.faqList summary:hover { color: var(--acid-2) }
.faqList details > div { padding: 0 0 24px; max-width: 760px; color: #545b66; font-size: 14px; line-height: 1.65 }

/* Leadformulier. */
.leadForm { display: grid; gap: 16px }
.leadRow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.leadField { display: flex; flex-direction: column; gap: 7px }
.leadField label { letter-spacing: .1em; text-transform: uppercase; font-size: 9px; font-weight: 900 }
.leadField input, .leadField select, .leadField textarea {
  border: 1px solid var(--line); background: var(--white); color: var(--ink);
  padding: 13px 14px; font: inherit; font-size: 14px; border-radius: 0; width: 100%;
}
.leadField textarea { min-height: 118px; resize: vertical }
.leadField input:focus, .leadField select:focus, .leadField textarea:focus {
  outline: 2px solid var(--acid); outline-offset: -2px; border-color: var(--acid);
}
.leadForm button { justify-self: start }
.leadStatus { font-size: 13px; line-height: 1.55; padding: 14px 16px; border-left: 3px solid var(--acid); background: var(--paper-2) }
.leadStatus[data-state="error"] { border-left-color: #dc2626 }
.leadNote { color: #656b66; font-size: 11px; line-height: 1.6 }
.checkList { margin: 26px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line) }
.checkList li { border-bottom: 1px solid var(--line); padding: 12px 0; font-size: 13px; font-weight: 700 }
.checkList li:before { content: "✓"; color: var(--acid-2); margin-right: 10px }

/* Risico-oorzaken en keuzehulp op de batterijpagina. */
.riskGrid { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line) }
.riskGrid div { border-right: 1px solid var(--line); padding: 24px 20px; min-height: 150px; display: flex; flex-direction: column }
.riskGrid div:last-child { border-right: 0 }
.riskGrid span { color: var(--acid-2); font-size: 10px; font-weight: 900 }
.riskGrid p { margin: auto 0 0; font-size: 13px; font-weight: 700; line-height: 1.45 }
.pullQuote { border-left: 3px solid var(--acid); padding: 4px 0 4px 24px; margin: 40px 0 }
.pullQuote blockquote { margin: 0; font-size: clamp(18px, 2vw, 24px); line-height: 1.45; letter-spacing: -.02em }
.pullQuote cite { display: block; margin-top: 14px; font-size: 11px; font-style: normal; font-weight: 800; color: #656b66 }

/* Creditregel voor beeldmateriaal van partners. */
.imageCredit { color: #656b66; font-size: 10px; line-height: 1.6; margin: 18px 0 0 }

@media (width <= 980px) {
  .heroPhoto { min-height: 420px }
  .familyGrid, .docGrid { grid-template-columns: 1fr }
  .familyCard, .familyCard:nth-child(3n) { border-right: 0 }
  .familyGrid > .familyCard { border-bottom: 1px solid var(--line) }
  .familyGrid > .familyCard:last-child { border-bottom: 0 }
  .riskGrid { grid-template-columns: 1fr 1fr }
  .riskGrid div { border-right: 0; border-bottom: 1px solid var(--line) }
  .riskGrid div:nth-child(odd) { border-right: 1px solid var(--line) }
  .riskGrid div:last-child { border-bottom: 0; border-right: 0 }
}

@media (width <= 620px) {
  .heroPhoto { min-height: 320px }
  .riskGrid { grid-template-columns: 1fr }
  .riskGrid div, .riskGrid div:nth-child(odd) { border-right: 0 }
  .leadRow { grid-template-columns: 1fr }
  .docCard, .familyBody { padding: 24px }
}

/* Kop boven een tweede tabel binnen dezelfde sectie. */
.tableHeading { margin: 56px 0 22px; font-size: clamp(21px, 2vw, 28px); letter-spacing: -.03em }
/* Sectie die direct op de vorige aansluit (gedeelde kop). */
.sectionTight { padding-top: 0 }
/* Knop onderin een evidencePanel. */
.panelAction { margin-top: 20px }
/* checkList op een donkere ondergrond volgt de lichte scheidingslijn. */
.darkSection .checkList, .darkSection .checkList li { border-color: #ffffff34 }

/* Rijkoppen dragen de rij-identificatie; ze delen de celopmaak maar niet de
   kopbalkachtergrond van thead. */
.dataTable tbody th { font-weight: 800 }

/* Geen woord wordt halverwege afgebroken: een woord dat niet op de regel past
   gaat in zijn geheel naar de volgende. Dat betekent hyphens uit (ook de
   automatische woordenlijst van Safari/Firefox) en overflow-wrap terug op
   normal. Lange Nederlandse samenstellingen ("kabeldoorvoeren",
   "Lithiumbatterijen") passen op telefoonbreedte via de kleinere kopgroottes
   verderop in dit blok, niet via een afbreekstreepje. */
:root, body, h1, h2, h3, h4, h5, h6, p, li, td, th, dt, dd, blockquote, figcaption,
label, legend, summary, a, span, small, strong, em {
  -webkit-hyphens: none; hyphens: none; overflow-wrap: normal; word-break: normal;
}

/* Projectbeoordeling: de drie vragen zijn nu de kwalificatie boven een echt
   contactformulier. De vragen hertekenen bij elke keuze, de velden eronder
   niet — zie pyralta-local.js. */
.briefContact { display: grid; gap: 16px; padding: 24px }
.briefContactLegend {
  margin: 0; font-size: 12px; font-weight: 800;
  display: flex; align-items: center; gap: 18px;
}
.briefContactLegend:before { content: "04"; color: var(--acid-2); font-size: 9px; font-weight: 900 }
.briefContact .briefSubmit { margin: 8px -24px -24px; border-top: 1px solid var(--line) }

@media (width <= 620px) {
  .briefContact { padding: 18px }
  .briefContact .briefSubmit { margin: 8px -18px -18px }
}


/* ===========================================================================
   Huisstijl-update (sept 2026) — overgenomen uit de BESS-landingspagina.
   Geist + Geist Mono als sitebrede lettertypen, zwaardere koppen met strakkere
   spatiëring, blauwe primaire knop en de blauwe sectielabels. De regels hieronder
   overschrijven bewust de eerdere declaraties bovenin; de specificiteit is gelijk,
   dus de laatste wint.
   =========================================================================== */

/* Geist — variabel gewicht 100–900, per unicode-bereik gesplitst zodat alleen
   de Latijnse subset (de .p.-bestanden) daadwerkelijk geladen wordt. */
@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/fef07dbb0973bf53-s.12tyk43_3sh9u.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/8a480f0b521d4e75-s.0jzbimsg8vl84.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}
@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/53b9e256198e5412-s.0-wfv7uh4i7h9.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/7178b3e590c64307-s.0nx0ww8fni_q3.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/caa3a2e1cccd8315-s.p.09~u27dqhyhd6.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Geist Fallback;src:local(Arial);ascent-override:95.94%;descent-override:28.16%;line-gap-override:0.0%;size-adjust:104.76%}
@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/5ce348bf30bf5439-s.0zgw-jeven.3w.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/4fa387ec64143e14-s.0wkzw~je483f-.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}
@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/6306c77e7c8268e4-s.0rhz0arwfsn~5.woff2)format("woff2");unicode-range:U+2000-2001,U+2004-2008,U+200A,U+23B8-23BD,U+2500-259F}
@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/7d817b4c03b0c5f1-s.0l76wvqk9d84w.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/bbc41e54d2fcbd21-s.0k4k9394f2q-k.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/797e433ab948586e-s.p.08e28id.o-okb.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Geist Mono Fallback;src:local(Arial);ascent-override:74.67%;descent-override:21.92%;line-gap-override:0.0%;size-adjust:134.59%}

:root {
  --font-sans: Geist, "Geist Fallback", Arial, sans-serif;
  --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, Menlo, monospace;
  --blue: var(--acid);
  --blue-dark: var(--acid-2);
  --blue-soft: #5bc8f5;      /* sectielabel op donkere ondergrond */
  --paper-blue: #eef7fb;     /* evidence-sectie */
  --muted: #667080;
}

body { font-family: var(--font-sans) }

/* Micro-typografie (indexnummers, meetlabels, signaalbalk) in Geist Mono in
   plaats van Arial. */
.heroProof, .signalBar, .cardTop, .visualIndex,
.processGrid span, .detailCards > article > span, .riskGrid span,
.officeGrid article > span, .marketList span, .cabinetCode,
.footerOffices address > span, .evidenceStamp span, .checkRow span,
.systemOuter > span, .systemInner span, .measure { font-family: var(--font-mono) }

.processGrid span, .detailCards > article > span, .riskGrid span { font-size: 12px; font-weight: 700 }

/* Merknaam: het logo-lettertype (Space Grotesk) is nooit geladen; Geist
   vervangt de Arial-terugval. De A blijft amber conform het merkpakket. */
.brand strong { font: 750 18px/1 var(--font-sans); letter-spacing: .08em }

.brand small { font: 700 6.5px/1.1 var(--font-sans); letter-spacing: .14em }

/* Koppen: gewicht 650, iets ruimere regelafstand dan voorheen. */
h1 { font-weight: 650; letter-spacing: -.052em; line-height: .98; font-size: clamp(50px, 6vw, 88px) }

h1 em { letter-spacing: -.04em }

h2 { font-weight: 650; letter-spacing: -.045em; line-height: 1.04; font-size: clamp(40px, 4.6vw, 68px) }

h3 { font-weight: 650; letter-spacing: -.02em }

.largeBody { letter-spacing: -.015em; line-height: 1.5 }

/* Sectielabels: 12px, blauw. De hero-eyebrow erft de tekstkleur. */
.eyebrow, .kicker { font-size: 12px; font-weight: 750; letter-spacing: .16em; margin-bottom: 25px }

.kicker { color: var(--blue-dark) }

.darkSection .kicker, .evidenceNotice .kicker, .configuratorSection .kicker,
.scopeBand .kicker, .marketBand .kicker, .checklistBand .kicker { color: var(--blue-soft) }

.projectReview .kicker { color: #d9f3ff }

/* Primaire knop wordt blauw; hover licht op. Ghost-knop blijft ink-omlijnd op
   lichte ondergrond en krijgt op de fotohero een glazen variant. */
.button {
  background: var(--blue-dark); border-color: var(--blue-dark);
  font-size: 13px; font-weight: 760; letter-spacing: 0; gap: 14px; padding: 0 20px; min-height: 51px;
}

.button:hover { background: var(--blue); border-color: var(--blue); transform: translateY(-1px) }

.buttonGhost { background: transparent; border-color: var(--ink); color: var(--ink) }

.buttonGhost:hover { background: var(--ink); border-color: var(--ink); color: var(--white) }

.buttonLight { background: var(--white); border-color: var(--white); color: var(--ink) }

.buttonLight:hover { background: var(--ink); border-color: var(--ink); color: var(--white) }

.configurator .buttonGhost:hover, .darkSection .buttonGhost:hover { background: var(--white); color: var(--ink) }

.buttonSmall { min-height: 42px; padding: 0 16px; white-space: nowrap }

.languagePicker summary { white-space: nowrap }

/* Formulier-keuzeknoppen en FAQ volgen de nieuwe gewichten. */
.faqList summary { font-weight: 670 }

/* Bulletlijsten in de site: gewicht 620 in plaats van 700. */
.detailCards li, .checkList li, .familyCard li, .cabinetCard li { font-weight: 620 }


/* ---------------------------------------------------------------------------
   Header als overlay op een fotohero (BESS-pagina). Zelfde markup als de
   gewone header; alleen de klasse headerOverlay komt erbij. Dropdowns blijven
   donker en werken ongewijzigd.
   --------------------------------------------------------------------------- */
.hasOverlayHeader { position: relative }

.headerOverlay {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  height: 92px; color: var(--white); background: transparent;
  border-bottom: 1px solid #ffffff38;
}

.headerOverlay .brandMark { filter: brightness(0) invert(1) }

.headerOverlay .brand small { color: #ffffffad }

.headerOverlay nav > a, .headerOverlay nav summary { color: #ffffffc7 }

.headerOverlay nav > a:hover, .headerOverlay nav summary:hover, .headerOverlay .languagePicker summary:hover { color: var(--white) }

.headerOverlay .navMenu, .headerOverlay .languagePicker > div { background: #0b1220; border: 1px solid #ffffff24 }


/* ---------------------------------------------------------------------------
   BESS-pagina: componenten uit de landingspagina, vertaald naar de conventies
   van deze stylesheet (camelCase, --line rasters, content gekapt op --max via
   de padding-formule van .section).
   --------------------------------------------------------------------------- */

/* Fotohero over de volle breedte. */
.heroFull {
  position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: 840px; color: var(--white); background: var(--ink);
}

.heroFull > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center }

.heroShade {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #050c1bf2 0%, #050c1bd6 38%, #050c1b5c 69%, #050c1b24 100%),
              linear-gradient(#0000 55%, #050c1b9e);
}

.heroFullCopy {
  position: relative; z-index: 2; width: 100%; max-width: var(--max); margin: 0 auto;
  padding: 170px clamp(34px, 6vw, 90px) 60px;
}

.heroFullCopy > * { max-width: 790px }

.heroFull h1 { max-width: 790px }

.heroFull h1 em { display: inline; color: var(--blue) }

.heroFull .eyebrow { color: var(--white) }

.heroFull .heroText { color: #fffc; max-width: 685px; margin-top: 30px; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.55 }

.heroFull .heroActions { margin-top: 36px; gap: 13px }

.heroFull .buttonGhost {
  color: var(--white); background: #0f172a5c; border-color: #ffffff6b;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

.heroFull .buttonGhost:hover { background: var(--white); border-color: var(--white); color: var(--ink) }

.heroFull .heroProof {
  border-top: 0; padding-top: 0; margin-top: 46px; text-transform: none; letter-spacing: 0;
  color: #ffffffb8; font: 650 12px/1.4 var(--font-sans); gap: 12px 28px;
}

.heroFull .heroProof span:before { content: "•"; color: var(--sage); font-size: 12px; margin-right: 9px }

/* Variant zonder foto (pagina's zonder passend beeld): zelfde opbouw, donkere
   ondergrond met het rasterpatroon en de blauwe gloed van het oude diagram. */
.heroPlain { min-height: 720px; isolation: isolate }

.heroPlain:before {
  content: ""; position: absolute; inset: 0; opacity: .28;
  background-image: linear-gradient(#ffffff18 1px, #0000 1px), linear-gradient(90deg, #ffffff18 1px, #0000 1px);
  background-size: 43px 43px;
}

.heroPlain:after {
  content: ""; position: absolute; right: 8%; bottom: 6%; width: 320px; height: 320px; z-index: -1;
  border-radius: 50%; background: var(--blue); filter: blur(130px); opacity: .38;
}

.heroPlain .heroShade { background: linear-gradient(90deg, #050c1bcc 0%, #050c1b66 50%, #050c1b00 100%) }

/* Onderschrift bij de herofoto (product- en systeemnaam). */
.heroCaption {
  position: absolute; right: clamp(24px, 4vw, 60px); bottom: 24px; z-index: 2;
  color: var(--white); background: #0f172ae0; padding: 10px 12px;
  font: 500 10px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}

/* Drie uitkomsten direct onder de hero. De sectie levert de standaard
   contentbreedte (--max) en de volle-breedte achtergrond; het raster zit erin. */
.signalSection { padding-top: 0; padding-bottom: 0; background: var(--white); border-bottom: 1px solid var(--line) }

.signalStrip { display: grid; grid-template-columns: repeat(3, 1fr) }

.signalStrip > p { margin: 0; padding: 30px clamp(24px, 4.2vw, 72px); border-right: 1px solid var(--line) }

.signalStrip > p:last-child { border-right: 0 }

.signalStrip strong, .signalStrip span { display: block }

.signalStrip strong { margin-bottom: 7px; font-size: 15px; font-weight: 650 }

.signalStrip span { color: var(--muted); font-size: 13px; line-height: 1.5 }

/* Intro: h2 links, lead + tekst rechts (bouwt op .detailLead). */
.riskIntro { background: var(--paper); border-bottom: 0 }

.riskIntro .introCopy { align-self: end; max-width: 690px }

.riskIntro .introCopy .largeBody { color: #3f4857; margin: 0; font-size: clamp(20px, 1.65vw, 25px); line-height: 1.58 }

.riskIntro .introCopy p + p { color: var(--muted); margin: 22px 0 0; font-size: 17px; line-height: 1.72 }

/* Vier gevaren: zelfde container als de andere secties, raster zonder
   verticale sectiepadding. */
.hazardSection { padding-top: 0; padding-bottom: 0; background: var(--paper) }

/* Beeld/tekst-splitsing (interfaces, why Pyralta). */
.imageSplitSection { background: var(--white) }

.imageSplit { display: grid; grid-template-columns: 1fr 1fr; min-height: 720px; max-width: var(--max); margin: 0 auto }

.imageWrap { position: relative; overflow: hidden; background: #dfe4e9; min-height: 620px }

.imageWrap img { width: 100%; height: 100%; object-fit: cover; display: block }

.imageWrap small {
  position: absolute; left: 24px; bottom: 24px; color: var(--white); background: #0f172ae0;
  font: 500 10px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; padding: 10px 12px;
}

.splitCopy { display: flex; flex-direction: column; justify-content: center; padding: clamp(70px, 8vw, 130px) clamp(34px, 6vw, 90px) }

.splitCopy > p:not(.kicker):not(.calloutLine) { color: var(--muted); margin: 30px 0 0; font-size: 17px; line-height: 1.75 }

.imageSplit.reverse .imageWrap { order: 2 }

.interfaceList { margin: 32px 0 0; padding: 0; list-style: none }

.interfaceList li {
  position: relative; border-bottom: 1px solid var(--line); color: #3d4655;
  padding: 13px 0 13px 28px; font-size: 14px; font-weight: 620;
}

.interfaceList li:before { content: "↳"; color: var(--blue-dark); position: absolute; left: 0 }

.calloutLine { border-top: 2px solid var(--ink); margin: 34px 0 0; padding: 24px 0 0; font-size: 20px; font-weight: 680; line-height: 1.5 }

.proofList { border-top: 1px solid var(--line); margin-top: 36px }

.proofList p {
  display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 22px; margin: 0 !important;
  padding: 17px 0; border-bottom: 1px solid var(--line); font-size: 14px !important; line-height: 1.5 !important;
}

.proofList strong { color: var(--ink); font-weight: 650 }

/* Werkstroom: donkere band met 8 kaarten in een 1px-raster. */
.scopeBand { background: var(--ink); color: var(--white); border-color: var(--ink) }

.scopeBand .sectionHeading { display: grid; grid-template-columns: minmax(390px, 1.15fr) minmax(300px, .75fr); gap: 50px 10vw; margin-bottom: 0 }

.scopeBand .sectionHeading > p, .stepSection .sectionHeading > p { max-width: none; font-size: 17px; line-height: 1.7 }

.scopeBand .sectionHeading > p { color: #ffffff9e }

.scopeGrid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 70px; border-top: 1px solid #ffffff30; border-left: 1px solid #ffffff30 }

.scopeGrid article { min-height: 290px; padding: 30px; border-right: 1px solid #ffffff30; border-bottom: 1px solid #ffffff30 }

.scopeGrid article > span { display: block; margin-bottom: 55px; color: var(--blue-soft); font: 700 12px/1 var(--font-mono) }

.scopeGrid h3, .stepGrid h3, .marketGrid h3 { margin: 0 0 12px; font-size: 22px }

.scopeGrid p, .stepGrid p, .marketGrid p { margin: 0; font-size: 15px; line-height: 1.65 }

.scopeGrid p { color: #ffffff9c }

/* Vier stappen met indexlijn. */
.stepSection { background: var(--white) }

.stepSection .sectionHeading > p { color: var(--muted) }

.stepGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; margin-top: 70px }

.stepGrid article > div { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; color: var(--blue-dark); font: 700 12px/1 var(--font-mono) }

.stepGrid article i { display: block; flex: 1; height: 1px; background: var(--line) }

.stepGrid p { color: var(--muted) }

/* Markten: verloopband met drie kaarten. */
.marketBand { color: var(--white); background: linear-gradient(135deg, #0f172a, #132540 72%, #0c3346); border-color: transparent }

.marketIntro { max-width: 900px }

.marketIntro > p:not(.kicker) { color: #ffffffa8; max-width: 690px; margin: 30px 0 0; font-size: 18px; line-height: 1.7 }

.marketGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 70px; background: #ffffff2e; border: 1px solid #ffffff2e }

.marketGrid article { background: #0f172adb; min-height: 330px; padding: 38px }

.marketGrid article > span {
  display: inline-flex; align-items: center; justify-content: center; width: 47px; height: 47px;
  margin-bottom: 65px; border: 1px solid var(--blue-soft); color: var(--blue-soft); font: 500 12px/1 var(--font-mono);
}

.marketGrid p { color: #ffffffa1 }

/* Normen en bewijs. */
.evidenceSplit { background: var(--paper-blue); display: grid; grid-template-columns: minmax(330px, .82fr) minmax(390px, 1.18fr); gap: 60px 9vw; border-color: transparent }

.evidenceSplit > div:last-child { align-self: end }

.evidenceSplit p { color: var(--muted); margin: 0 0 18px; font-size: 16px; line-height: 1.72 }

.evidenceSplit .largeBody { color: #3c4655; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.58 }

.standardTags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px }

.standardTags span { color: #22506a; background: #ffffffa6; border: 1px solid #b9d9e8; padding: 9px 12px; font: 500 11px/1 var(--font-mono) }

/* Checklist: donkere band, tekst links, genummerde lijst rechts. */
.checklistBand { background: var(--ink); color: var(--white); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 70px 10vw; border-color: var(--ink) }

.checklistBand > div > p:not(.kicker) { color: #ffffffab; margin: 30px 0; font-size: 17px; line-height: 1.72 }

.checklistSteps { margin: 0; padding: 0; list-style: none; border-top: 1px solid #ffffff38 }

.checklistSteps li { display: grid; grid-template-columns: 46px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid #ffffff38 }

.checklistSteps li > span { color: var(--blue-soft); font: 500 11px/1.6 var(--font-mono) }

.checklistSteps p { color: #ffffffa8; margin: 0; font-size: 14px; line-height: 1.55 }

.checklistSteps strong { display: block; margin-bottom: 4px; color: var(--white); font-size: 15px; font-weight: 650 }

/* FAQ: plakkende kop links, uitklaplijst rechts. */
.faqSplit { background: var(--paper); display: grid; grid-template-columns: minmax(300px, .7fr) minmax(420px, 1.3fr); gap: 70px 10vw; align-items: start }

.faqHeading { position: sticky; top: 30px }

.faqSplit .faqList { border-top-color: var(--line) }

.faqSplit .faqList summary { padding: 25px 0; font-size: 18px; line-height: 1.4 }

.faqSplit .faqList summary:after { font-size: 26px; font-weight: 400 }

.faqSplit .faqList details > div { color: var(--muted); font-size: 15px; line-height: 1.72; padding-right: 45px }

/* Projectbeoordeling: blauwe band met witte kaart. */
.projectReview { background: var(--blue-dark); color: var(--white); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 70px 10vw; border-color: transparent }

.projectReview > div:first-child > p:not(.kicker) { color: #ffffffc7; margin: 30px 0; font-size: 17px; line-height: 1.72 }

.briefCard { color: var(--ink); background: var(--white); padding: clamp(30px, 4vw, 54px); box-shadow: 0 25px 70px #0f172a2e }

.briefCard > p { margin: 0 0 22px; font-size: 12px; font-weight: 760; letter-spacing: .14em; text-transform: uppercase }

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

.briefCard li { position: relative; border-bottom: 1px solid var(--line); color: #414a59; padding: 13px 0 13px 25px; font-size: 14px }

.briefCard li:before { content: "○"; color: var(--blue-dark); position: absolute; left: 0 }

.briefCard small { display: block; margin-top: 24px; color: var(--muted); font-size: 11px; line-height: 1.6 }

/* Kwalificatienoot in amber. */
.qualificationNote { background: #fff8e9; border-bottom: 1px solid #ead9b6; display: grid; grid-template-columns: 52px 1fr; gap: 25px; padding-top: 34px; padding-bottom: 34px; border-color: #ead9b6 }

.qualificationNote > span { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid #d29b24; color: #9a6900; font-weight: 800 }

.qualificationNote p { color: #68593a; max-width: 1100px; margin: 0; font-size: 13px; line-height: 1.65 }

.qualificationNote strong { display: block; margin-bottom: 3px; color: #493b21; font-weight: 650 }


@media (width <= 1120px) {
  .scopeGrid { grid-template-columns: repeat(2, 1fr) }

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

  .scopeBand .sectionHeading { grid-template-columns: 1fr }

}


@media (width <= 980px) {
  .headerOverlay { height: 78px }

  .heroPlain { min-height: 640px }

  .heroFull { min-height: 760px }

  .heroFullCopy { padding-top: 150px }

  .signalStrip { grid-template-columns: 1fr }

  .signalStrip > p { border-right: 0; border-bottom: 1px solid var(--line) }

  .signalStrip > p:last-child { border-bottom: 0 }

  .imageSplit, .evidenceSplit, .checklistBand, .faqSplit, .projectReview { grid-template-columns: 1fr }

  .imageSplit { min-height: 0 }

  .imageWrap { min-height: 520px }

  .imageSplit.reverse .imageWrap { order: 0 }

  .marketGrid { grid-template-columns: 1fr }

  .marketGrid article { min-height: auto }

  .marketGrid article > span { margin-bottom: 28px }

  .faqHeading { position: static }

  .riskIntro .introCopy { max-width: none }

}


@media (width <= 620px) {
  .heroFullCopy { padding: 130px 24px 50px }

  .heroCaption { right: 24px; bottom: 16px }

  .heroFull h1 { font-size: clamp(30px, 8.4vw, 62px) }

  .scopeGrid, .stepGrid { grid-template-columns: 1fr }

  .scopeGrid article { min-height: auto }

  .scopeGrid article > span { margin-bottom: 25px }

  .imageWrap { min-height: 370px }

  .splitCopy { padding-left: 24px; padding-right: 24px }

  .proofList p { grid-template-columns: 1fr; gap: 5px }

  .projectReview { gap: 45px }

  .qualificationNote { grid-template-columns: 1fr; gap: 14px }

  .checklistSteps li { grid-template-columns: 36px 1fr; gap: 12px }

}


/* ---------------------------------------------------------------------------
   Sitebrede uitrol van de BESS-componenten (fase 1 + 2). Varianten die de
   overige pagina's nodig hebben: lijsten in kaarten, kaarten als link, het
   formulier in de blauwe projectreview, kantoren in het marktenraster.
   --------------------------------------------------------------------------- */

/* signalStrip met derde regel (specificatiebron). */
.signalStrip small { display: block; margin-top: 6px; color: #8a93a0; font: 500 11px/1.4 var(--font-mono) }

/* riskIntro met link of tweede alinea uit de oude introSplit. */
.riskIntro .introCopy .textLink { margin-top: 24px }

/* stepGrid / scopeGrid / marketGrid zonder sectiekop erboven. */
.stepSection > .stepGrid:first-child, .scopeBand > .scopeGrid:first-child, .marketBand > .marketGrid:first-child { margin-top: 0 }

.scopeGrid3 { grid-template-columns: repeat(3, 1fr) }

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

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

/* Lijsten in donkere kaarten (voormalige detailCards). */
.scopeGrid ul, .marketGrid ul { margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid #ffffff30 }

.scopeGrid li, .marketGrid li {
  position: relative; border-bottom: 1px solid #ffffff30; padding: 10px 0 10px 22px;
  color: #ffffffc7; font-size: 13px; font-weight: 620; line-height: 1.45;
}

.scopeGrid li:before, .marketGrid li:before { content: "↳"; color: var(--blue-soft); position: absolute; left: 0 }

/* Kantoren in het marktenraster: code met vrije breedte, adres in small. */
.marketGrid article > span { width: auto; min-width: 47px; padding: 0 12px }

.marketGrid small { display: block; margin-top: 24px; color: #ffffff8a; font-size: 12px; line-height: 1.65 }

.marketGrid small a { text-decoration: underline; text-underline-offset: 2px }

.marketGrid small a:hover { color: var(--white) }

.marketIntro .textLink { margin-top: 24px; color: var(--white) }

/* Kaarten als link (kernoplossingen op de home). */
.hazardGrid > a {
  display: flex; flex-direction: column; border-right: 1px solid var(--line);
  min-height: 300px; padding: 28px 24px; transition: background .25s, color .25s;
}

.hazardGrid > a:last-child { border-right: 0 }

.hazardGrid > a:hover { background: var(--ink); color: var(--white) }

.hazardGrid > a h3 { margin: 55px 0 12px; font-size: 24px }

.hazardGrid > a p { color: var(--muted); margin: 0; font-size: 14px; line-height: 1.6 }

.hazardGrid > a:hover p { color: #ffffff9c }

.hazardGrid > a .cardTop { display: flex; justify-content: space-between; align-items: center }

.hazardGrid > a .cardTop > span:first-child { color: var(--blue-dark); font: 700 12px/1 var(--font-mono) }

.hazardGrid > a:hover .cardTop > span:first-child { color: var(--blue-soft) }

.hazardGrid > a .textLink { margin-top: auto; padding-top: 22px }

/* Projectreview met formulier of keuzevragen in de witte kaart. */
.projectReview .reviewIntro .checkList { border-top-color: #ffffff40; margin-top: 26px }

.projectReview .reviewIntro .checkList li { border-color: #ffffff40; color: var(--white) }

/* Lijsttitel boven de checkList (BESS: "Useful information for the first review"). */
.projectReview .reviewIntro .reviewListTitle {
  margin: 30px 0 0; color: #d9f3ff; font-size: 12px; font-weight: 760; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4;
}

.projectReview .reviewIntro .reviewListTitle + .checkList { margin-top: 12px }

.projectReview .briefNote { background: #ffffff14; border-left-color: var(--white); color: var(--white); margin-top: 34px }

.projectReview .briefNote > span { color: var(--white) }

/* Zelfde binnenmarge als de BESS-informatiekaart. Een <legend> staat boven de
   padding van zijn fieldset, dus de bovenmarge zit op .briefForm zelf; de
   zijmarges lopen via --cardPad door naar fieldsets, contactvelden en knopbalk. */
.briefCardForm { --cardPad: clamp(24px, 3vw, 40px); padding: 0 }

.briefCardForm .briefForm { border: 0; padding-top: clamp(30px, 4vw, 54px) }

.briefCardForm .briefForm fieldset { padding-left: var(--cardPad); padding-right: var(--cardPad) }

/* Ook de legenda's 02 en 03 staan boven de padding van hun fieldset; de ruimte
   boven de scheidingslijn komt daarom van de legenda zelf. 04 is een gewone
   alinea in .briefContact en krijgt dezelfde bovenmarge via de padding. */
.briefCardForm .briefForm fieldset + fieldset legend { padding-top: 28px }

/* Het hele blok is één formulier: drie keuzelijsten in fieldsets, daarna de
   contactvelden in .briefContactFields. Geen teller meer; de knop staat rechts. */
.briefCardForm .briefContact { display: block; padding: 0 }

.briefContactFields { display: grid; gap: 16px; padding: 28px var(--cardPad) var(--cardPad) }

.briefCardForm .briefContactFields .briefSubmit { margin: 8px calc(-1 * var(--cardPad)) calc(-1 * var(--cardPad)); justify-content: flex-end }

.briefContactFields .leadStatus { margin: 0 }

/* Keuzelijsten: eigen pijl, zelfde kader als de invoervelden. */
.leadField select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 44px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230f172a' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
}

.leadField select:invalid, .leadField select option[value=""] { color: var(--muted) }

.leadField select:has(option[value=""]:checked) { color: var(--muted) }

.briefCardForm .leadForm { padding: clamp(30px, 4vw, 54px) var(--cardPad) var(--cardPad) }

.briefCardForm .leadNote a { text-decoration: underline; text-underline-offset: 2px }

/* checklistBand: notitiekaart onder de lijst en de controlelabel erboven. */
.checklistBand .panelNote { margin-top: 34px; padding-top: 26px; border-top: 1px solid #ffffff38 }

.checklistBand .panelNote .kicker { margin-bottom: 14px }

.checklistBand .panelNote p:not(.kicker) { color: #ffffffa8; margin: 0 0 18px; font-size: 15px; line-height: 1.6 }

.checklistBand .panelNote .panelAction { margin: 0 }

.checklistLabel { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 12px; font: 500 11px/1 var(--font-mono); letter-spacing: .12em; color: var(--blue-soft) }

.checklistLabel strong { font-size: 22px; letter-spacing: 0; color: var(--white) }

.checklistSteps li b { color: var(--blue-soft); align-self: center }

.checklistSteps li:has(> b) { grid-template-columns: 46px 1fr auto }

.checklistBand > div > .button { margin-top: 8px }

/* FAQ-kop met toelichting. */
.faqHeading > p:not(.kicker) { color: var(--muted); margin: 18px 0 0; font-size: 16px; line-height: 1.6 }


@media (width <= 1120px) {
  .scopeGrid3 { grid-template-columns: repeat(2, 1fr) }

}


@media (width <= 980px) {
  .hazardGrid > a { border-right: 0; border-bottom: 1px solid var(--line) }

  .hazardGrid > a:last-child { border-bottom: 0 }

  .marketGrid2, .scopeGrid2, .scopeGrid3 { grid-template-columns: 1fr }

}


/* ---------------------------------------------------------------------------
   Compacter CTA-formulier: minder ruimte tussen label en veld, tussen de
   fieldsets en rond de contactvelden. Veldhoogte iets lager.
   --------------------------------------------------------------------------- */
.briefCardForm .briefForm { padding-top: clamp(22px, 3vw, 34px) }

.briefCardForm .briefForm fieldset { padding-top: 0; padding-bottom: 18px }

.briefCardForm .briefForm legend { margin-bottom: 8px }

.briefCardForm .briefForm fieldset + fieldset legend { padding-top: 18px }

.briefContactFields { gap: 10px; padding-top: 18px }

.briefContactFields .briefContactLegend { margin-bottom: 2px }

.briefCardForm .leadField { gap: 5px }

.briefCardForm .leadField input, .briefCardForm .leadField select, .briefCardForm .leadField textarea { padding: 11px 14px }

.briefCardForm .leadField textarea { min-height: 96px }

.briefCardForm .leadForm { gap: 10px; padding-top: clamp(22px, 3vw, 34px) }

.briefCardForm .briefContactFields .briefSubmit, .briefCardForm .leadForm .briefSubmit { margin-top: 4px }


/* ---------------------------------------------------------------------------
   Ruimte maken voor hele woorden. Zonder afbreekstreepjes moet het langste woord
   van een kop of alinea op één regel passen. Dat vraagt drie dingen: kolommen
   die niet met hun langste woord meegroeien, koppen die met hun kolom
   meeschalen, en een lagere ondergrens voor de kopgroottes op telefoonbreedte —
   de vaste 50px voor h1 en 40px voor h2 zijn te groot voor woorden als
   "Lithiumbatterijen" of "Compartimenteringsstrategie".
   --------------------------------------------------------------------------- */

/* Rasterkolommen mogen niet meegroeien met hun langste woord. Zonder
   min-width:0 is de min-content-breedte van een grid- of flexcel gelijk aan het
   langste woord erin, en duwt "Compartimenteringsstrategie" de hele kolom
   breder dan het scherm. */
.scopeGrid > *, .stepGrid > *, .marketGrid > *, .processGrid > *, .factGrid > *,
.familyGrid > *, .docGrid > *, .cabinetGrid > *, .riskGrid > *, .officeGrid > *,
.solutionGrid > *, .detailCards > *, .footerTop > *, .imageSplit > *, .leadRow > *,
.choiceGrid > *, .configChoices > *, .hazardGrid > *, .marketList > *,
.faqSplit > * { min-width: 0 }

/* Sectiekop en bijschrift staan naast elkaar; onder 1200px wordt de kopkolom te
   smal voor woorden als "brandveiligheidsadviseur" en steken die over de rand.
   Vanaf daar stapelen ze, zoals op telefoonbreedte al gebeurde. */
@media (width <= 1200px) {
  .sectionHeading { flex-direction: column; align-items: start }

  .scopeBand .sectionHeading, .stepSection .sectionHeading { grid-template-columns: 1fr }
}

/* De kopgrootte gaat via een variabele zodat een kop in een smalle kolom hem
   kan aftoppen zonder de schaal per breakpoint over te schrijven. */
h2 { --h2-size: clamp(40px, 4.6vw, 68px); font-size: var(--h2-size) }

/* De FAQ-kop staat in een kolom van ongeveer 300-400px; "brandbeveiliging,"
   past daar niet in op 66px. */
.faqHeading { container-type: inline-size }

.faqHeading h2 { font-size: min(var(--h2-size), 13cqi) }

@media (width <= 620px) {
  h1 { font-size: clamp(26px, 7.6vw, 50px) }

  h2 { --h2-size: clamp(23px, 6.6vw, 40px) }

  .tableHeading { font-size: clamp(18px, 4.6vw, 28px) }

  /* Ruimere binnenmarges kosten op 320px de breedte die woorden als
     "brandwerendheidsclassificaties" nodig hebben om heel te blijven. */
  .scopeGrid article, .marketGrid article { padding: 24px 20px }
}

/* De kaartkoppen in de rasters schalen mee met hun eigen kolom in plaats van
   met het scherm: "Compartimenteringsstrategie" past bij 22px in geen enkele
   kolombreedte die dit raster maakt, ook niet op desktop. Met een
   containerquery krimpt alleen de kop, en alleen zo ver als de kolom vraagt. */
.scopeGrid article, .stepGrid article, .marketGrid article { container-type: inline-size }

.scopeGrid h3, .stepGrid h3, .marketGrid h3 { font-size: min(22px, 7.2cqi) }

.hazardCard { container-type: inline-size }

.hazardGrid > a h3 { font-size: min(24px, 11.5cqi) }


/* ---------------------------------------------------------------------------
   Mobiel hamburgermenu. Onder 980px verdwijnen de navigatie en de taalkiezer
   uit de header; ze komen terug in een uitklappaneel. Opgebouwd uit <details>
   zodat het zonder JavaScript werkt, net als de bestaande dropdowns.
   --------------------------------------------------------------------------- */
.siteHeader .mobileNav { display: none; position: static }

.mobileNav > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: center;
  width: 43px; height: 43px; border: 1px solid var(--line); background: transparent;
}

.mobileNav > summary::-webkit-details-marker { display: none }

.mobileNav > summary:after { content: none }

.burgerIcon { position: relative; display: block; width: 17px; height: 13px }

.burgerIcon span {
  position: absolute; left: 0; right: 0; height: 1.5px; background: var(--ink);
  transition: transform .18s, opacity .18s;
}

.burgerIcon span:first-child { top: 0 }

.burgerIcon span:nth-child(2) { top: 50%; margin-top: -.75px }

.burgerIcon span:last-child { bottom: 0 }

.headerOverlay .mobileNav > summary { border-color: #ffffff40 }

.headerOverlay .burgerIcon span { background: var(--white) }

.mobileNav[open] > summary { background: var(--ink); border-color: var(--ink) }

.mobileNav[open] .burgerIcon span { background: var(--white) }

.mobileNav[open] .burgerIcon span:first-child { transform: translateY(5.75px) rotate(45deg) }

.mobileNav[open] .burgerIcon span:nth-child(2) { opacity: 0 }

.mobileNav[open] .burgerIcon span:last-child { transform: translateY(-5.75px) rotate(-45deg) }

.mobileNavPanel {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  display: grid; gap: 2px; padding: 14px 18px 20px;
  background: #0b1220; border-top: 1px solid #ffffff24;
  box-shadow: 0 24px 60px #0f172a4d;
  max-height: calc(100dvh - 78px); overflow-y: auto;
}

.mobileNavPanel a {
  color: #d9dde3; font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  padding: 12px 6px; border-bottom: 1px solid #ffffff14;
}

.mobileNavPanel a:hover, .mobileNavPanel a:focus-visible { color: var(--white) }

.mobileNavGroup {
  color: var(--blue-soft); font-size: 10px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; margin: 16px 0 4px;
}

.mobileNavPanel > .mobileNavGroup:first-child { margin-top: 4px }

.mobileNavLangs { display: flex; gap: 8px; padding-top: 6px }

.mobileNavLangs a {
  flex: 1; text-align: center; border: 1px solid #ffffff2e; border-bottom: 1px solid #ffffff2e;
  font-size: 11px; letter-spacing: .1em; font-weight: 800; padding: 11px 0;
}

.mobileNavLangs a:hover { background: #ffffff14 }

/* Vanaf hier valt de desktopnavigatie weg en staat de hamburger in haar plaats.
   De header houdt dan twee cellen over: merk en hamburger. De actieknop vervalt
   op deze breedtes; de call-to-action staat verderop op elke pagina zelf. */
@media (width <= 980px) {
  .siteHeader .mobileNav { display: block }

  .siteHeader { grid-template-columns: minmax(0, 1fr) auto; gap: 14px }

  .siteHeader .headerActions { display: none }
}

@media (width <= 620px) {
  .siteHeader { gap: 10px }
  .brand { min-width: 0 }
}