:root{--ink:#1c2e37;--ink-soft:#576875;--blue:#1659d6;--blue-dark:#0849c1;--paper:#f5f7f7;--white:#fff;--line:#dce4e8;--sky:#edf3ff;--mint:#d5f0e8;--lime:#b9ec94;--radius:20px;--container:1240px;--shadow:0 25px 70px rgba(30,53,80,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 "Inter","Aptos","Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}a,button{touch-action:manipulation}img,svg{max-width:100%}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.08}p{color:var(--ink-soft)}.container{width:min(calc(100% - 64px),var(--container));margin:auto}.section{padding:115px 0}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:4px}.skip-link{position:absolute;left:12px;top:-80px;background:white;color:black;padding:12px;z-index:100}.skip-link:focus{top:12px}[hidden]{display:none!important}
.site-header{position:relative;background:var(--white);z-index:20;border-bottom:1px solid #ecf0f2}.header-inner{min-height:100px;display:flex;justify-content:space-between;align-items:center;gap:28px}.brand{display:inline-flex;align-items:center;gap:12px;flex-shrink:0}.brand-logo{display:flex;align-items:center}.brand-logo svg{display:block}.brand-copy{display:flex;flex-direction:column;line-height:1.18}.brand-copy strong{font-size:16px;font-weight:850;letter-spacing:.032em}.brand-copy small{font-size:10px;letter-spacing:.17em;font-weight:750;color:var(--ink-soft);margin-top:5px}.site-nav{display:flex;align-items:center;gap:29px;font-size:13px;font-weight:725}.site-nav>a:not(.nav-cta){transition:color .15s}.site-nav>a:hover{color:var(--blue)}.nav-cta{background:var(--blue);color:white;padding:15px 21px;border-radius:9px;white-space:nowrap}.nav-cta span{margin-left:14px}.menu-toggle{display:none}
.hero{background:#fff;overflow:hidden}.hero-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);min-height:690px;align-items:center;gap:52px;padding:56px 0 64px}.eyebrow{font-size:11px;letter-spacing:.14em;font-weight:850;color:var(--blue);display:flex;align-items:center;gap:9px;margin-bottom:29px}.signal-dot{width:8px;height:8px;background:#61bc96;border-radius:50%;box-shadow:0 0 0 5px #e3f5ee}.hero h1{font-size:clamp(59px,5.8vw,88px);letter-spacing:-.075em;font-weight:850;max-width:780px;margin:0 0 30px}.hero h1 em{color:var(--blue);font-style:normal}.hero-lead{max-width:540px;font-size:17px;line-height:1.9;margin:0 0 30px}.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:52px;padding:15px 23px;border-radius:9px;font-weight:780;font-size:13px;letter-spacing:.01em;transition:transform .18s,background .18s,box-shadow .18s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--blue);color:#fff;box-shadow:0 12px 27px #1659d627}.btn-primary:hover{background:var(--blue-dark)}.btn-plain{background:#f0f4f6;border:1px solid var(--line)}.btn-secondary{background:transparent;border:1px solid currentColor}.hero-proof{display:flex;gap:23px;flex-wrap:wrap;font-size:10px;font-weight:820;letter-spacing:.1em;margin-top:45px;color:#738491}.hero-proof span{padding-left:13px;border-left:3px solid #a6bdc9}.hero-art{position:relative;align-self:stretch;display:flex;align-items:center}.art-frame{position:relative;width:100%;height:540px;background:linear-gradient(155deg,#f2f6ff 0%,#eaf1fc 62%,#e3edf5 100%);border-radius:26px;overflow:hidden;border:1px solid #dfe8f6}.art-grid{position:absolute;inset:0;background-image:linear-gradient(#557fa70b 1px,transparent 1px),linear-gradient(90deg,#557fa70b 1px,transparent 1px);background-size:28px 28px}.art-top,.art-bottom{position:absolute;z-index:3;color:#6b86a3;letter-spacing:.13em;font-size:10px;font-weight:800}.art-top{top:27px;left:28px}.art-bottom{bottom:25px;right:25px}.art-orbit{position:absolute;border:1px solid #b0c4e4;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.orbit-one{width:330px;height:330px}.orbit-two{width:440px;height:440px;border-style:dashed;opacity:.55}.art-core{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);width:185px;height:185px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#1a6cea,#0b48bc);box-shadow:0 28px 60px #1d5cd84d, inset 0 0 0 12px #ffffff14}.art-bolt{font-size:140px;color:white;line-height:1;font-family:Georgia,serif;font-style:italic;margin-top:-9px}.art-card{position:absolute;background:#fff;box-shadow:var(--shadow);padding:16px 20px;border-radius:13px;display:flex;align-items:center;gap:14px;z-index:3;min-width:208px;border:1px solid #e8edf2}.art-card strong,.art-card small{display:block}.art-card strong{font-size:13px;letter-spacing:.04em}.art-card small{font-size:10px;color:#758594;margin-top:2px}.art-number{font-size:25px;font-weight:900;color:var(--blue)}.top-card{right:9px;top:105px}.bottom-card{left:11px;bottom:105px}.hero-ribbon{background:#eff4f8;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.ribbon-inner{min-height:61px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:10px;color:#667c8f;font-weight:825;letter-spacing:.075em}.ribbon-inner b{color:var(--blue);font-size:14px;margin:0 7px}
.kicker{font-size:11px;font-weight:850;letter-spacing:.135em;color:var(--blue);display:block;margin-bottom:21px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:80px;margin-bottom:45px}.section-heading h2,.network-copy h2,.about-grid h2,.faq-grid h2{font-size:clamp(38px,4.2vw,62px);letter-spacing:-.065em;font-weight:845;margin:0}.section-heading h2 em,.about-grid h2 em{font-style:normal;color:var(--blue)}.section-heading>p{max-width:392px;font-size:16px;line-height:1.8;margin:0 0 5px}.service-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.filter{appearance:none;background:white;border:1px solid var(--line);padding:11px 20px;border-radius:8px;font-size:12px;cursor:pointer;color:#526477;font-weight:820;transition:background .15s,color .15s}.filter:hover{border-color:#abc1e9}.filter[aria-pressed=true]{color:white;background:var(--blue);border-color:var(--blue)}.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.service-card{position:relative;background:white;border:1px solid #e1e8ea;min-height:292px;border-radius:15px;padding:26px 26px 22px;display:flex;flex-direction:column;transition:border-color .18s,transform .18s,box-shadow .18s}.service-card:hover{transform:translateY(-4px);border-color:#abc3f4;box-shadow:var(--shadow)}.service-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-height:54px}.card-num{font-size:10px;letter-spacing:.085em;color:#758898;font-weight:820}.service-svg{width:36px;height:36px;color:var(--blue);flex-shrink:0}.service-card h3{font-size:20px;letter-spacing:-.04em;margin:22px 0 10px;font-weight:820}.service-card p{font-size:13px;line-height:1.75;margin-bottom:22px}.card-more{display:flex;align-items:center;justify-content:space-between;color:var(--blue);font-size:12px;font-weight:850;letter-spacing:.01em;margin-top:auto}.card-stretch{position:absolute;inset:0;border-radius:15px}.card-stretch:focus-visible{outline-offset:1px}.service-bottom{margin-top:23px;display:flex;gap:20px;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.07em;font-weight:820;color:#8294a2}.service-bottom a{color:var(--blue);font-size:13px;letter-spacing:0}
.network-section{background:#eaf1f6}.network-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.network-copy h2{margin-bottom:25px}.network-copy p{font-size:16px;max-width:490px;line-height:1.9}.tick-list{list-style:none;padding:0;margin:25px 0 28px}.tick-list li{padding:11px 0 11px 32px;position:relative;font-weight:680;font-size:14px;border-bottom:1px solid #d5e1e9}.tick-list li:before{content:'✓';position:absolute;left:0;top:11px;color:var(--blue);font-weight:900}.text-link{font-size:14px;color:var(--blue);font-weight:850;border-bottom:1px solid #abc3ea;padding-bottom:8px;display:inline-block}.text-link span{margin-left:14px}.network-art{position:relative;min-height:415px;border-radius:21px;background:#fff;display:flex;align-items:center;justify-content:center;gap:10px;padding:60px 24px;border:1px solid #d6e4f1;box-shadow:0 28px 60px #2647630c;overflow:hidden}.network-art:after{content:'';position:absolute;width:300px;height:300px;border-radius:50%;background:#edf4ff;filter:blur(12px);left:-80px;bottom:-150px}.net-caption{position:absolute;left:27px;top:27px;font-size:10px;letter-spacing:.1em;font-weight:870;color:#92a3b1}.net-wire{position:absolute;top:49%;left:9%;width:82%;height:3px;background:repeating-linear-gradient(90deg,var(--blue) 0 10px,transparent 10px 16px);opacity:.45}.net-device{position:relative;z-index:2;width:28%;height:110px;background:#fff;border:1px solid #ccdcf6;border-radius:13px;box-shadow:0 10px 27px #1559d615;padding:18px 12px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.net-device:nth-of-type(3){background:var(--blue);color:white}.net-device>span{font-size:19px;font-weight:880;letter-spacing:-.05em}.net-device strong{font-size:11px;letter-spacing:.06em}.net-device small{font-size:10px;opacity:.65}.net-status{position:absolute;bottom:27px;right:27px;font-size:10px;letter-spacing:.095em;color:#5c7994;font-weight:830}.net-status span{color:#1ca16f}
.about-section{background:#fff}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}.about-grid>div:last-child{padding-top:45px}.about-grid>div>p{font-size:17px;line-height:1.9;margin-bottom:33px}.about-steps{border-top:1px solid var(--line)}.about-steps>div{padding:18px 0;display:flex;gap:22px;border-bottom:1px solid var(--line);font-size:14px;font-weight:730;align-items:baseline}.about-steps b{color:var(--blue);font-size:12px}.faq-section{background:var(--paper)}.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.faq-items details{border-bottom:1px solid #d6e1e7}.faq-items details:first-child{border-top:1px solid #d6e1e7}.faq-items summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:25px 0;font-size:15px;font-weight:790}.faq-items summary::-webkit-details-marker{display:none}.faq-symbol{font-size:22px;font-weight:350;color:var(--blue)}details[open] .faq-symbol{transform:rotate(45deg)}.faq-items details p{line-height:1.8;font-size:14px;max-width:590px;padding:0 18px 22px 0;margin:0}.contact-section{background:#123e8f;color:white;padding:102px 0}.contact-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:center}.contact-intro .kicker{color:#a3c8fb}.contact-intro h2{font-size:clamp(45px,5vw,75px);font-weight:850;letter-spacing:-.07em;line-height:1.08;margin-bottom:22px}.contact-intro h2 em{color:#bfdbff;font-style:normal}.contact-intro p{color:#d2e3ff;font-size:16px;max-width:420px;line-height:1.85}.location-chip{display:inline-block;border:1px solid #789cce;padding:9px 15px;border-radius:99px;font-size:12px;margin-top:22px}.contact-box{border-radius:18px;background:white;color:var(--ink);padding:38px 40px;box-shadow:0 27px 70px #081f565e;display:flex;flex-direction:column;align-items:flex-start}.tiny-heading{font-size:11px;font-weight:850;letter-spacing:.13em;color:var(--blue);margin-bottom:29px}.contact-label{font-size:11px;letter-spacing:.1em;color:#7c8b9a;font-weight:820;margin-bottom:6px}.phone-big{font-size:clamp(25px,2.8vw,40px);font-weight:860;letter-spacing:-.055em;white-space:nowrap;color:var(--ink)}.phone-big>span{color:var(--blue);margin-left:10px;font-size:22px}.contact-divider{height:1px;background:var(--line);width:100%;margin:22px 0}.reveal-email{border:0;background:none;padding:0;text-align:left;font-weight:790;color:var(--blue);font-size:16px;cursor:pointer;overflow-wrap:anywhere}.contact-box strong{font-size:16px}
.footer{background:#122b39;color:#dbe6eb;padding:65px 0 22px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:50px}.footer .brand-copy strong{color:white}.footer .brand-copy small{color:#9bafbc}.footer-brand p{margin-top:24px;color:#abc0cb;font-size:13px}.footer-grid>div:not(:first-child){display:flex;flex-direction:column;gap:13px;font-size:13px}.footer-grid>div:not(:first-child) strong{color:white;margin-bottom:8px}.footer-grid a:hover{color:#9fcbff}.footer-lower{margin-top:66px;border-top:1px solid #39505c;padding-top:20px;display:flex;justify-content:space-between;color:#859eae;font-size:12px}
.detail-hero{background:linear-gradient(120deg,#edf3fc 0%,white 85%);padding:74px 0 95px}.breadcrumbs{display:flex;gap:12px;color:#718294;font-size:12px;font-weight:750;margin-bottom:55px}.breadcrumbs a{color:var(--blue)}.detail-hero h1{font-size:clamp(48px,6vw,84px);letter-spacing:-.07em;max-width:850px;margin:0 0 22px}.detail-hero h1 em{font-style:normal;color:var(--blue)}.detail-hero>div>p{max-width:740px;font-size:17px;line-height:1.8;margin:0 0 30px}.detail-section h2{font-size:clamp(37px,4vw,54px);letter-spacing:-.055em;margin-bottom:35px}.detail-list{border-top:1px solid var(--line)}.detail-item{display:grid;grid-template-columns:70px 1fr 30px;gap:30px;padding:30px 0;border-bottom:1px solid var(--line);align-items:start}.detail-index{font-size:14px;color:var(--blue);font-weight:850}.detail-item h2{font-size:23px;letter-spacing:-.03em;margin:0 0 9px}.detail-item p{font-size:14px;line-height:1.8;margin:0;max-width:780px}.detail-plus{font-size:22px;color:var(--blue)}.projects-section{padding:100px 0;background:white}.projects-section h2{font-size:48px;letter-spacing:-.06em}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.project-card{background:var(--paper);border:1px solid var(--line);padding:25px;border-radius:12px}.project-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:7px}.project-card h3{font-size:22px;letter-spacing:-.04em;margin-top:20px}.project-card p{font-size:14px}
@media(max-width:1100px){.site-nav{gap:17px;font-size:12px}.hero-grid{gap:25px}.hero h1{font-size:clamp(52px,6vw,75px)}.service-card{padding:20px}.network-layout{gap:44px}}
@media(max-width:900px){.container{width:min(calc(100% - 40px),var(--container))}.header-inner{min-height:78px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;background:#eff3f8;border:1px solid #dce4ee;width:45px;height:42px;border-radius:9px;cursor:pointer;padding:12px}.menu-toggle span{width:100%;height:2px;background:var(--ink)}.site-nav{display:none;position:absolute;top:calc(100% - 1px);left:0;right:0;background:white;box-shadow:0 20px 28px #18304d20;padding:16px 20px 24px;flex-direction:column;align-items:stretch;gap:0}.site-nav.is-open{display:flex}.site-nav>a{display:block;padding:12px 8px;border-bottom:1px solid var(--line)}.site-nav .nav-cta{text-align:center;margin-top:12px}.hero-grid{grid-template-columns:1fr;min-height:unset;padding:65px 0 50px;gap:45px}.hero h1{font-size:clamp(51px,9vw,72px)}.hero-art{height:390px;max-width:620px;width:100%;margin:auto}.art-frame{height:390px}.art-core{width:145px;height:145px}.art-bolt{font-size:112px}.orbit-one{width:250px;height:250px}.orbit-two{width:340px;height:340px}.top-card{top:70px}.bottom-card{bottom:65px}.ribbon-inner{flex-wrap:wrap;gap:8px;padding:16px 0}.ribbon-inner span:last-child{display:none}.section{padding:80px 0}.section-heading{align-items:start;flex-direction:column;gap:20px}.section-heading>p{max-width:700px}.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.network-layout,.about-grid,.faq-grid,.contact-layout{grid-template-columns:1fr;gap:45px}.network-art{max-width:600px}.about-grid>div:last-child{padding-top:0}.contact-section{padding:80px 0}.contact-box{max-width:600px}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:span 2}}
@media(max-width:520px){.container{width:calc(100% - 34px)}.brand-copy strong{font-size:13px}.brand-copy small{font-size:8px}.brand-logo svg{width:37px;height:37px}.hero-grid{padding:48px 0 38px;gap:34px}.hero h1{font-size:clamp(44px,10.5vw,60px);letter-spacing:-.071em}.hero-lead{font-size:15px;line-height:1.75}.hero-actions .btn{min-height:50px;padding:12px 15px}.hero-proof{gap:12px;margin-top:32px;font-size:9px}.hero-art{height:315px}.art-frame{height:315px;border-radius:16px}.art-top{top:16px;left:14px;font-size:8px}.art-bottom{bottom:13px;right:12px;font-size:8px}.art-core{width:125px;height:125px}.art-bolt{font-size:100px}.orbit-one{width:225px;height:225px}.orbit-two{width:295px;height:295px}.art-card{min-width:145px;padding:11px 12px;gap:8px}.art-card strong{font-size:10px}.art-card small{font-size:8px}.art-number{font-size:18px}.top-card{top:52px;right:8px}.bottom-card{bottom:48px;left:8px}.ribbon-inner{font-size:9px}.ribbon-inner span:first-child{display:none}.section{padding:65px 0}.section-heading h2,.network-copy h2,.about-grid h2,.faq-grid h2{font-size:clamp(36px,9vw,47px)}.service-grid{grid-template-columns:1fr;gap:11px}.service-card{min-height:235px}.service-card h3{margin-top:10px}.service-filters{gap:7px}.filter{padding:9px 12px;font-size:11px}.network-art{min-height:300px;padding:30px 13px}.net-caption{top:13px;left:13px;font-size:8px}.net-device{height:95px;padding:10px 8px}.net-device span{font-size:15px}.net-device strong{font-size:9px}.net-device small{font-size:8px}.net-status{bottom:13px;right:13px;font-size:8px}.contact-intro h2{font-size:49px}.contact-box{padding:26px}.phone-big{font-size:30px}.footer-grid{gap:30px}.footer-lower{gap:10px;flex-wrap:wrap}.detail-hero{padding:40px 0 68px}.breadcrumbs{margin-bottom:45px}.detail-hero h1{font-size:49px}.detail-item{grid-template-columns:36px 1fr;gap:10px}.detail-item .detail-plus{display:none}.project-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}


/* Van der Weide combinatiethema — basis A, karakter B.
   Kleuren en oppervlakken hieronder zijn zelfstandig te wijzigen. */
:root{
  --ink:#183138;
  --ink-soft:#526973;
  --blue:#006C70;
  --blue-dark:#00575B;
  --paper:#E9EEEA;
  --white:#F8F8F4;
  --line:#CAD9D5;
  --sky:#D7E7E5;
  --mint:#BDECE0;
  --lime:#F4B575;
  --shadow:0 25px 70px rgba(13,47,51,.11)
}
body{background:var(--paper)}
.site-header{background:#EEF2EE;border-bottom:1px solid #CEDBD8}
.header-inner{min-height:90px}
.brand-copy strong{letter-spacing:.05em}
.brand-copy small{color:#4F6871}
.nav-cta{background:#17373B;color:#fff;border-radius:8px}
.nav-cta-contact{background:#eef3f1;color:#17373b;border:1px solid #bfd0cc}
.nav-cta:hover{background:var(--blue)}
.site-nav>a:hover{color:#00686C}
.hero{position:relative;background:linear-gradient(115deg,#F0F3EE 0%,#E4ECE8 58%,#DDE8E4 100%)}
.hero:before{content:"";position:absolute;width:500px;height:500px;left:-370px;bottom:-340px;border-radius:50%;border:90px solid #D6E4DF;opacity:.45;pointer-events:none}
.hero-grid{position:relative;z-index:1;min-height:650px;gap:48px;padding:60px 0}
.hero h1{font-size:clamp(50px,5vw,76px);letter-spacing:-.06em;font-weight:850;line-height:1.08}
.hero h1 em{color:#007D7E}
.eyebrow{color:#345C60;letter-spacing:.105em;font-size:11px}
.signal-dot{background:#E7A466;box-shadow:0 0 0 5px #F2E2CF}
.hero-lead{color:#4A6067;font-size:17px;line-height:1.82;max-width:540px}
.btn{border-radius:9px}
.btn-primary{background:#006D70;color:#fff;box-shadow:0 12px 28px rgba(0,101,107,.22)}
.btn-primary:hover{background:#004F56}
.btn-plain{background:#FFFFFF96;border-color:#BED1CE;color:#204149}
.hero-proof{color:#49686D;margin-top:39px}
.hero-proof span{border-color:#E2AA6D}
.art-frame{background:linear-gradient(155deg,#1A363B,#122B32 75%,#10272D);border:1px solid #284C52;box-shadow:0 38px 65px rgba(20,55,57,.2);border-radius:20px}
.art-grid{background-image:linear-gradient(#92B1AD12 1px,transparent 1px),linear-gradient(90deg,#92B1AD12 1px,transparent 1px);background-size:27px 27px}
.art-orbit{border-color:#577B78}
.orbit-two{opacity:.7;border-color:#5F928C}
.art-core{background:linear-gradient(145deg,#F7C78C,#EE9F58);box-shadow:0 24px 72px #F2A96E2F,inset 0 0 0 12px #FFFFFF14}
.art-bolt{color:#14343B}
.art-card{background:#F4F3EA;border-color:#DFE9DD;box-shadow:0 22px 45px #071b2459;border-radius:11px}
.art-card strong{color:#1A3A41}
.art-number{color:#006C70}
.art-top,.art-bottom{color:#9CBDB7}
.hero-ribbon{background:#17383E;border-color:#17383E}
.ribbon-inner{color:#D3E4E0}
.ribbon-inner b{color:#F4B575}
.services-section{background:#EEF2EE}
.services-section .kicker,.kicker{color:#00777A}
.section-heading h2 em,.about-grid h2 em{color:#00787A}
.filter{background:#F8F8F3;border-color:#C7D6D1;color:#48666A}
.filter:hover{border-color:#77A9A3}
.filter[aria-pressed=true]{background:#16383D;border-color:#16383D;color:#fff}
.service-card{background:#F8F8F3;border:1px solid #CBD9D5;border-radius:12px;min-height:286px;box-shadow:0 4px 15px #12383c08}
.service-card:before{content:"";position:absolute;top:0;left:25px;width:45px;height:4px;background:#F4B575;border-radius:0 0 4px 4px}
.service-card:hover{border-color:#87AFAA;box-shadow:0 24px 42px #113E4325}
.service-svg,.card-more,.service-bottom a{color:#007579}
.service-bottom{color:#657D7E}
.network-section{background:#17343A;color:#F1F4EF}
.network-copy h2{color:#F6F6F0}
.network-copy .kicker{color:#F3BC82}
.network-copy p{color:#BBD0CE}
.tick-list li{border-color:#3B585E;color:#ECF4F0}
.tick-list li:before{color:#F3BA7B}
.text-link{color:#F0B578;border-bottom-color:#987A5B}
.network-art{background:#E6EFEB;border-color:#5A7978;box-shadow:0 30px 65px #07191d55}
.network-art:after{background:#CBDDD8}
.net-device{background:#F7FAF5;border-color:#AFC8C3;color:#1B3940}
.net-device:nth-of-type(3){background:#007479;color:white}
.net-wire{background:repeating-linear-gradient(90deg,#006E73 0 10px,transparent 10px 17px)}
.net-caption,.net-status{color:#57777B}
.about-section{background:#E7EDE8}
.about-steps{border-color:#CAD7D1}
.faq-section{background:#F0F2ED}
.faq-items details{border-color:#CDD9D5}
.contact-section{background:linear-gradient(120deg,#0D2D33 0%,#14454B 100%)}
.contact-intro .kicker{color:#F5BF8A}
.contact-intro h2 em{color:#99DAD1}
.contact-intro p{color:#CADDD9}
.location-chip{border-color:#4F7B80;color:#E2F0EA}
.contact-box{background:#F7F6F0;box-shadow:0 28px 66px #09242b5e}
.contact-box .tiny-heading,.phone-big>span,.reveal-email{color:#007A7E}
.contact-box .phone-big{color:#183138}
.footer{background:#0D252C}
.footer-grid a:hover{color:#F2B575}
.detail-hero{background:linear-gradient(115deg,#E1EAE5 0%,#F5F5F0 100%)}
.detail-hero h1 em,.breadcrumbs a,.detail-index,.detail-plus{color:#00777A}
.detail-section{background:#F0F3EE}
.project-card{background:#EFF3EE}
@media(max-width:900px){
 .site-nav{background:#F0F3EE;box-shadow:0 20px 30px #0d2f3230}
 .menu-toggle{background:#DEEAE6;border-color:#BDD3CD}
 .hero-grid{min-height:unset}
}
@media(max-width:520px){
 .hero h1{font-size:clamp(40px,9.5vw,52px)}
 .art-frame{border-radius:16px}
 .hero-proof{font-size:9px}
 .ribbon-inner{justify-content:center}
 .service-card:before{left:20px}
}

/* Drie primaire specialismen — configureerbare kaarten via source/site.json. */
.pillars-section{background:#16383D;padding:28px 0 48px;color:#F4F7F2}
.pillars-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 1px 22px;color:#C0DBD4;font-size:10px;font-weight:850;letter-spacing:.14em}
.pillars-head span:last-child{color:#EFC399}
.pillars-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.pillar-card{min-width:0;display:flex;flex-direction:column;min-height:340px;padding:29px 30px 25px;background:linear-gradient(165deg,#F8F9F4 0%,#E9F0EB 100%);color:#19383D;border:1px solid #A5BCB7;border-radius:13px;box-shadow:0 12px 30px #09242B55;transition:transform .2s,box-shadow .2s,border-color .2s}
.pillar-card:hover{transform:translateY(-5px);border-color:#E6B57F;box-shadow:0 20px 40px #09242B88}
.pillar-card:focus-visible{outline:3px solid #F3BB82;outline-offset:3px}
.pillar-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:17px;font-size:10px;letter-spacing:.13em;font-weight:850;color:#56777A}
.pillar-icon{display:grid;place-items:center;width:57px;height:57px;flex-shrink:0;background:#D9E9E3;border:1px solid #BAD1C9;border-radius:14px}
.pillar-icon .service-svg{width:33px;height:33px;color:#006C70}
.pillar-smarthome .pillar-icon{background:#F7E8D7;border-color:#F0C69F}
.pillar-smarthome .pillar-icon .service-svg{color:#AE6428}
.pillar-netwerken .pillar-icon{background:#CDE3DF}
.pillar-card h3{font-size:clamp(23px,2.15vw,30px);font-weight:850;letter-spacing:-.055em;margin:0 0 10px}
.pillar-card p{font-size:13px;color:#47646A;line-height:1.7;margin:0 0 15px;max-width:350px}
.pillar-card ul{padding-left:18px;margin:0 0 20px;color:#254950;font-size:12px;line-height:1.85}
.pillar-card li::marker{color:#C17B3B}
.pillar-link{margin-top:auto;padding-top:13px;border-top:1px solid #CADBD5;display:flex;align-items:center;justify-content:space-between;color:#006F74;font-weight:850;font-size:12px}
.art-smart-pill{position:absolute;right:11px;bottom:98px;z-index:4;display:flex;align-items:center;gap:10px;padding:12px 15px;background:#F2E6D4;color:#254044;border:1px solid #F2C696;border-radius:10px;box-shadow:0 15px 35px #071B2459}
.art-smart-symbol{display:grid;place-items:center;border-radius:8px;width:33px;height:33px;background:#D4A777;color:#12343A;font-size:30px;line-height:1}
.art-smart-pill strong,.art-smart-pill small{display:block}
.art-smart-pill strong{font-size:10px;letter-spacing:.04em}
.art-smart-pill small{font-size:9px;color:#6E7772;margin-top:2px}
.hero-proof{gap:13px}
.hero-proof span{font-size:9px;white-space:nowrap}
.art-frame .bottom-card{bottom:135px}
.art-frame .art-bottom{bottom:27px}
/* Mobiele weergave, zonder overlopende menu's of kaarten */
@media(max-width:1100px){.pillar-card{padding:23px;min-height:350px}.pillar-card h3{font-size:24px}}
@media(max-width:900px){.pillars-grid{grid-template-columns:1fr;gap:11px}.pillar-card{min-height:0}.pillars-section{padding:25px 0 45px}.site-nav{font-size:13px}.art-smart-pill{bottom:58px;right:12px}.art-frame .bottom-card{bottom:85px}}
@media(max-width:520px){.pillars-head span:last-child{display:none}.pillar-card{padding:20px 22px;min-height:0}.pillar-top{margin-bottom:10px}.pillar-card ul{margin-bottom:14px}.pillar-card h3{font-size:26px}.art-smart-pill{right:7px;bottom:53px;padding:7px 9px;gap:6px}.art-smart-symbol{width:22px;height:22px;font-size:20px}.art-smart-pill strong{font-size:8px}.art-smart-pill small{font-size:7px}.art-frame .bottom-card{bottom:110px}.art-card{min-width:132px}.art-frame .art-bottom{bottom:12px;left:12px;right:auto;font-size:7px}.hero-proof{flex-wrap:wrap;column-gap:10px;row-gap:7px}}

/* Hero diagram v6: four equal, data-driven, clickable panels. Three pillars + technical service. */
.art-frame-quartet{isolation:isolate;}
.art-frame-quartet .art-top{top:30px;left:34px;letter-spacing:.15em;}
.art-frame-quartet .art-bottom{bottom:26px;left:34px;right:auto;letter-spacing:.12em;}
.art-diagram{position:absolute;z-index:2;inset:85px 35px 70px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:14px;}
.art-diagram-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-width:0;min-height:0;border-radius:13px;padding:19px 19px 16px;background:#F4F3EA;border:1px solid #CFDFDC;color:#1A3A41;text-decoration:none;box-shadow:0 12px 28px #071B2426;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;}
.art-diagram-card:hover{transform:translateY(-3px);border-color:#F2B16D;box-shadow:0 20px 34px #071B244D;}
.art-diagram-card:focus-visible{outline:3px solid #F3B573;outline-offset:3px;}
.diagram-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.diagram-card-no{font-size:12px;line-height:1.2;font-weight:900;color:#006C70;letter-spacing:.13em;}
.diagram-card-icon{width:43px;height:43px;flex:none;border-radius:11px;background:#DFEAE3;color:#006C70;display:grid;place-items:center;}
.diagram-card-icon svg{width:25px;height:25px;}
.diagram-card-copy{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding-right:14px;}
.diagram-card-tag{font-size:9px;line-height:1.25;letter-spacing:.12em;font-weight:850;color:#71847B;margin-bottom:5px;}
.diagram-card-copy strong{font-size:19px;line-height:1.15;font-weight:850;letter-spacing:-.035em;}
.diagram-card-copy small{font-size:11px;line-height:1.45;color:#576E74;margin-top:3px;}
.diagram-card-arrow{position:absolute;right:15px;bottom:13px;color:#007778;font-size:17px;line-height:1;}
.art-diagram-service{background:#F4E8D8;border-color:#E9CFAE;}
.art-diagram-service .diagram-card-icon{background:#E9CFAC;color:#8C4C22;}
.art-diagram-service .diagram-card-no,.art-diagram-service .diagram-card-arrow{color:#9C5A29;}
.art-diagram-service .diagram-card-tag{color:#976D48;}
@media(max-width:1100px) and (min-width:901px){.art-diagram{inset:83px 20px 70px;gap:10px}.art-diagram-card{padding:15px}.diagram-card-copy strong{font-size:17px}.diagram-card-icon{width:35px;height:35px}.diagram-card-icon svg{width:22px;height:22px}}
@media(max-width:900px){.art-diagram{inset:58px 25px 51px;gap:12px}.art-frame-quartet .art-top{top:18px;left:24px}.art-frame-quartet .art-bottom{bottom:17px;left:24px}.art-diagram-card{padding:14px}.diagram-card-icon{width:33px;height:33px;border-radius:8px}.diagram-card-icon svg{width:21px;height:21px}.diagram-card-copy strong{font-size:17px}.diagram-card-copy small{font-size:10px}.diagram-card-tag{font-size:8px;margin-bottom:3px}}
@media(max-width:520px){.art-frame-quartet .art-top{top:12px;left:13px;font-size:8px}.art-frame-quartet .art-bottom{bottom:10px;left:13px;font-size:7px}.art-diagram{inset:39px 12px 30px;gap:8px}.art-diagram-card{padding:10px;border-radius:9px}.diagram-card-no{font-size:10px}.diagram-card-icon{width:28px;height:28px}.diagram-card-icon svg{width:18px;height:18px}.diagram-card-copy{padding-right:7px;gap:1px}.diagram-card-tag{font-size:7px;margin-bottom:3px}.diagram-card-copy strong{font-size:13.5px}.diagram-card-copy small{font-size:9px;line-height:1.25}.diagram-card-arrow{right:8px;bottom:8px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.art-diagram-card{transition:none}.art-diagram-card:hover{transform:none}}


/* Logo: gecentreerde onderregel, ook op smalle schermen */
.brand-copy{align-items:center;text-align:center;white-space:nowrap}
.brand-copy strong,.brand-copy small{display:block;max-width:100%}
.brand-copy small{letter-spacing:.105em;margin-top:4px}
@media(max-width:380px){.brand-copy strong{font-size:12px}.brand-copy small{font-size:8px;letter-spacing:.04em}}
/* WhatsApp: zichtbaar maar niet dominant */
.whatsapp-float{position:fixed;right:22px;bottom:22px;z-index:45;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#20764b;color:#fff;box-shadow:0 8px 28px rgba(14,49,35,.26);transition:transform .18s,box-shadow .18s}
.whatsapp-float:hover,.whatsapp-float:focus-visible{transform:translateY(-3px);box-shadow:0 12px 30px rgba(14,49,35,.32)}
.whatsapp-float svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wa-contact{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;border-radius:12px;color:#fff;background:#20764b;font-weight:750;margin-top:12px}
.wa-contact:hover{background:#155a36}
.wa-contact svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8}

/* Contactkeuze */
.contact-choice-section{background:#f5f7f4;padding:80px 0 110px}.contact-choice-intro{max-width:720px;margin-bottom:35px}.contact-choice-intro h1{font-size:clamp(45px,6vw,72px);letter-spacing:-.065em;margin-bottom:20px}.contact-choice-intro p{font-size:17px;line-height:1.8}.contact-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.contact-choice{display:flex;min-height:260px;padding:28px;flex-direction:column;border:1px solid #d6e2df;border-radius:16px;background:#fff;transition:transform .18s,border-color .18s,box-shadow .18s}.contact-choice:hover{transform:translateY(-3px);border-color:#83aaa3;box-shadow:0 18px 45px #17373b14}.contact-choice-number{font-size:11px;font-weight:850;letter-spacing:.1em;color:#007a7e}.contact-choice h2{font-size:25px;margin:27px 0 12px}.contact-choice p{font-size:14px;line-height:1.75}.contact-choice-action{margin-top:auto;color:#006d70;font-weight:850}.contact-offer{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:24px;padding:25px 28px;border-radius:14px;background:#17373b;color:#fff}.contact-offer p{color:#d7e7e3;margin:5px 0 0}.contact-offer .btn{flex-shrink:0;background:#fff;color:#17373b}

@media(max-width:1080px) and (min-width:901px){.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;background:#eff3f8;border:1px solid #dce4ee;width:45px;height:42px;border-radius:9px;cursor:pointer;padding:12px}.menu-toggle span{width:100%;height:2px;background:var(--ink)}.site-nav{display:none;position:absolute;top:calc(100% - 1px);left:0;right:0;background:#f0f3ee;box-shadow:0 20px 30px #0d2f3230;padding:16px 32px 24px;flex-direction:column;align-items:stretch;gap:0}.site-nav.is-open{display:flex}.site-nav>a{display:block;padding:12px 8px;border-bottom:1px solid var(--line)}.site-nav .nav-cta{text-align:center;margin-top:8px}}
@media(max-width:900px){.site-nav .nav-cta+.nav-cta{margin-top:8px}.contact-choice-grid{grid-template-columns:1fr}.contact-choice{min-height:210px}.contact-offer{align-items:flex-start;flex-direction:column}}
@media(max-width:520px){.contact-choice-section{padding:55px 0 75px}.contact-choice-intro h1{font-size:46px}.contact-choice{padding:23px}.contact-offer{padding:23px}.contact-offer .btn{width:100%}}
.footer-legal{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.footer-legal a{text-decoration:underline;text-underline-offset:3px}
.legal-page{padding:64px 0 84px}.legal-page .container{max-width:900px}.legal-page h1{font-size:clamp(2.2rem,5vw,4.1rem);line-height:1.1;margin:0 0 22px}.legal-page h2{font-size:1.34rem;margin:30px 0 10px}.legal-page p,.legal-page li{line-height:1.78}.legal-page .legal-date{opacity:.67;font-size:.9rem}.legal-page a{text-decoration:underline;text-underline-offset:3px}
.cms-projects{padding:58px 0;background:var(--paper)}.cms-projects .cms-project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}.cms-projects article{border-radius:18px;background:var(--white);overflow:hidden;border:1px solid var(--line)}.cms-projects article img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}.cms-projects article .cms-project-copy{padding:22px}.cms-projects article h3{margin:0 0 10px}.cms-projects article p{margin:0;color:var(--ink-soft)}
@media(max-width:760px){.whatsapp-float{right:15px;bottom:15px;width:51px;height:51px}.cms-projects .cms-project-grid{grid-template-columns:1fr}}







/* Vier ingetogen premium vectoriconen: exact behoud van het 2x2-raster. */
.art-diagram-card .diagram-card-icon{width:63px;height:63px;background:transparent;border-radius:0;flex-shrink:0}
.art-diagram-card .diagram-card-icon img{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:1180px){.art-diagram-card .diagram-card-icon{width:52px;height:52px}}
@media(max-width:650px){.art-diagram-card .diagram-card-icon{width:48px;height:48px}}
@media(max-width:390px){.art-diagram-card .diagram-card-icon{width:42px;height:42px}}









/* De vier premium iconen absoluut rechtsboven, zodat tekst nooit verschuift of afsnijdt. */
.art-diagram-card .diagram-card-icon{position:absolute;right:14px;top:14px;z-index:0;width:104px!important;height:104px!important;flex:0 0 104px;background:none!important;border:0!important;display:block!important;line-height:0}
.art-diagram-card .diagram-card-icon img{width:100%;height:100%;display:block;object-fit:contain;filter:drop-shadow(0 5px 5px rgba(13,41,45,.12))}
.art-diagram-card .diagram-card-head{align-items:flex-start;min-height:15px}
.art-diagram-card .diagram-card-copy{position:relative;z-index:1}
@media(max-width:1180px){.art-diagram-card .diagram-card-icon{width:84px!important;height:84px!important;flex-basis:84px}}
@media(max-width:900px){.art-diagram-card .diagram-card-icon{width:94px!important;height:94px!important;flex-basis:94px}}
@media(max-width:520px){.art-diagram-card .diagram-card-icon{right:9px;top:9px;width:64px!important;height:64px!important;flex-basis:64px}}
@media(max-width:390px){.art-diagram-card .diagram-card-icon{width:55px!important;height:55px!important;flex-basis:55px}}

/* Definitieve vierdienstenafbeelding met afzonderlijke, toegankelijke klikvlakken. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.art-frame-quartet{height:auto;aspect-ratio:1;background:#0b3037;border:0;box-shadow:0 38px 65px rgba(20,55,57,.22)}
.art-frame-quartet>.art-grid,.art-frame-quartet>.art-top,.art-frame-quartet>.art-bottom{display:none}
.service-visual{position:absolute;inset:0;overflow:hidden;border-radius:20px;background:#0b3037;isolation:isolate}
.service-visual picture,.service-visual img{display:block;width:100%;height:100%}
.service-visual img{object-fit:cover}
.service-hotspot{position:absolute;z-index:2;border-radius:18px;background:transparent;transition:background-color .18s ease,box-shadow .18s ease}
.service-hotspot:hover{background:rgba(93,203,210,.09);box-shadow:inset 0 0 0 3px rgba(135,230,235,.7)}
.service-hotspot:focus-visible{outline:4px solid #f3b573;outline-offset:-4px;background:rgba(243,181,115,.12)}
.service-hotspot-elektra{left:4.38%;top:11.4%;width:44.82%;height:39.05%}
.service-hotspot-netwerken{left:50.83%;top:11.4%;width:44.82%;height:39.05%}
.service-hotspot-smarthome{left:4.38%;top:52.15%;width:44.82%;height:39.6%}
.service-hotspot-service{left:50.83%;top:52.15%;width:44.82%;height:39.6%}
@media(max-width:900px){.hero-art{height:auto;max-width:620px}.art-frame-quartet{height:auto}}
@media(max-width:520px){.service-visual,.art-frame-quartet{border-radius:16px}.service-hotspot{border-radius:12px}}
@media(prefers-reduced-motion:reduce){.service-hotspot{transition:none}}

/* v7.2: verfijnde merkhiërarchie, typografie en responsive omslag. */

@media(max-width:900px) and (min-width:521px){.hero h1{font-size:clamp(48px,5.5vw,52px)}}
@media(max-width:520px){
 .hero-lead{font-size:16px;line-height:1.7}
 .hero-proof{font-size:10px;column-gap:10px;row-gap:7px}
 .hero-proof span{font-size:10px;letter-spacing:.07em}
}

/* v7.3: volledige responsive afwerking en veilige vaste contactknop. */

.wa-contact{font-size:14px;white-space:nowrap}
.footer-grid>div:not(:first-child) a{display:inline-flex;align-items:center;min-height:28px}
.footer-legal a{display:inline-flex;align-items:center;min-height:24px}
.not-found-hero{min-height:560px;display:flex;align-items:center}
.not-found-hero>div>p{max-width:650px}
@media(max-width:1000px){.footer-lower{padding-right:78px}}
@media(max-width:520px){

 .detail-hero h1,.contact-intro h2{font-size:clamp(40px,12vw,49px)}
 .net-caption,.net-status{font-size:9px}
 .net-device strong{font-size:10px}
 .net-device small{font-size:9px}
 .not-found-hero{min-height:500px}
}
@media(max-width:355px){.hero h1{font-size:36px;letter-spacing:-.055em}}

/* v7.4: vaste hoofdnavigatie; pagina-inhoud schuift onder de merkbalk door. */
html{scroll-padding-top:125px}
.site-header{
 position:sticky;
 top:0;
 z-index:60;
 box-shadow:0 7px 24px rgba(13,47,51,.08)
}

/* Editorial RichText blocks: layout and type scale remain in the template. */
.cms-copy:is(ul,ol){margin-top:0;padding-inline-start:1.5rem;color:var(--ink-soft);line-height:1.8}.cms-copy ul{list-style:disc}.cms-copy ol{list-style:decimal}.cms-copy:is(ul){list-style:disc}.cms-copy:is(ol){list-style:decimal}.cms-copy li{margin-block:.3em}.cms-copy a{text-decoration:underline;text-underline-offset:3px}.cms-copy:is(blockquote){margin-inline:0;padding-inline-start:1rem;border-inline-start:3px solid var(--line);color:var(--ink-soft)}

/* Brand assets supplied by the owner: preserve the complete artwork and aspect ratio. */
.brand{gap:0;min-width:0}
.brand-wordmark{display:block;width:320px;height:auto;max-width:100%;object-fit:contain;flex:none}
.site-header .header-inner{min-height:108px;gap:20px}
.site-header .brand{display:inline-flex;align-items:center;flex:none;max-width:320px}
.footer .footer-brand .brand{display:inline-flex;max-width:100%;width:340px}
.footer .brand-wordmark{width:340px}
@media(max-width:1180px) and (min-width:901px){.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;background:#eff3f8;border:1px solid #dce4ee;width:45px;height:42px;border-radius:9px;cursor:pointer;padding:12px}.menu-toggle span{width:100%;height:2px;background:var(--ink)}.site-nav{display:none;position:absolute;top:calc(100% - 1px);left:0;right:0;background:#f0f3ee;box-shadow:0 20px 30px #0d2f3230;padding:16px 32px 24px;flex-direction:column;align-items:stretch;gap:0}.site-nav.is-open{display:flex}.site-nav>a{display:block;padding:12px 8px;border-bottom:1px solid var(--line)}.site-nav .nav-cta{text-align:center;margin-top:8px}}
@media(max-width:760px){.site-header .header-inner:has(.extra-nav){flex-wrap:wrap;padding-block:10px;row-gap:8px}.extra-nav{width:100%;gap:10px;justify-content:space-between;font-size:12px}}
@media(max-width:460px){html{scroll-padding-top:116px}.site-header .header-inner{min-height:100px;gap:16px}.site-header .brand{max-width:260px}.site-header .brand-wordmark{width:260px}.footer .footer-brand .brand{width:320px}.footer .brand-wordmark{width:320px}}
@media(max-width:355px){.site-header .brand{max-width:224px}.site-header .brand-wordmark{width:224px}}
.site-header .header-inner:has(>a[href="/cdn-cgi/access/logout"])>.brand{max-width:calc(100% - 88px)}

.site-header:has(#menu-toggle) .brand{max-width:min(320px,calc(100% - 65px))}.menu-toggle{flex:0 0 45px}
@media(max-width:355px){.detail-section h2{overflow-wrap:anywhere}}