/* NETDAK V14 · ANTRACIET / RESPONSIVE
   A deliberately restrained, low-saturation visual system. Built on top of V13
   without altering Netlify form handling, assets or the roof animation logic. */
:root {
  --ink:#252d31;
  --muted:#647076;
  --deep:#242b30;
  --deep2:#384248;
  --sea:#4b6266;
  --sea2:#657a7c;
  --mint:#dbe3e1;
  --paper:#f7f7f5;
  --soft:#eef0ed;
  --line:#dce1de;
  --shadow:0 24px 65px rgba(26,34,37,.10);
}
html{scroll-padding-top:100px}
body{background:var(--paper);color:var(--ink)}
::selection{background:#bccbc8;color:#1c2529}
body,main,.page {max-width:100%}
h1,h2,h3,h4 {text-wrap:balance}
.eyebrow,.service-index,.process-list b,.roof-detail .n,.feature-point .n{color:#596d71}
.eyebrow::before{background:#66777a}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:#8a999c}
.site-alert{background:#222a2e;color:#e2e5e3}
.site-alert a{color:#fff}
.site-header{background:rgba(250,250,249,.98);box-shadow:0 1px 0 rgba(31,42,44,.11)}
.site-header.scrolled{box-shadow:0 8px 34px rgba(25,33,36,.09)}
.nav a{color:#424b50}
.nav a.active,.nav a:hover{color:#20282c}
.nav a::after{background:#727f81}
.header-phone{color:#303b40}
.menu-toggle{border-color:#cbd2d0;background:rgba(255,255,255,.4)}
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{background:#273239}
.mobile-nav{background:#fafaf9}
.mobile-nav a{color:#313c40;border-color:#dfe3e1}
.btn,.btn.darkbtn{background:#343e43;color:#fff;box-shadow:none}
.btn:hover,.btn.darkbtn:hover{background:#222b30;box-shadow:0 11px 24px rgba(26,33,36,.16)}
.btn.outline{color:#354447;border-color:#8e9e9d;background:transparent}
.btn.outline:hover{background:#e8ece9}
.btn.lightbtn{background:#fafbfa;color:#273136}
.btn.lightbtn:hover{background:#e8eae8}
.link{color:#43585c}
.link.light{color:#f5f7f6}
.pill{border-color:#b7c6c3;color:#516469}
.hero{background:#232a2e}
.hero::after{background:linear-gradient(90deg,rgba(23,28,31,.94) 0%,rgba(31,37,41,.77) 38%,rgba(28,35,39,.23) 80%,rgba(24,30,33,.27)),linear-gradient(0deg,rgba(18,25,28,.45),transparent 45%)}
.hero h1 em{color:#d7dfdd}
.hero .hero-sub{color:#e1e5e3}
.hero-stat,.hero .eyebrow{color:#dce4e1}
.hero-review{box-shadow:0 22px 64px rgba(21,29,33,.19)}
.sub-hero{background:#262d31}
.sub-hero::after{background:linear-gradient(90deg,rgba(22,29,33,.95) 12%,rgba(29,38,42,.78) 63%,rgba(31,38,42,.27))}
.section.soft,.extra-work-section{background:#f0f2ef}
.section.white,.added-projects{background:#fff}
.service-card.featured,.footer-top-cta,.sub-cta{background:#293238}
.service-card.featured p{color:#d6dcda}
.service-card.featured .service-icon{color:#c5d1cd;border-color:#697b7a}
.service-card.featured .service-index{color:#c7d1ce}
.service-icon{color:#52676a;border-color:#d5dedb}
.service-card:hover{box-shadow:0 21px 55px rgba(30,37,39,.09)}
.roof-detail.selected{background:#f0f2f0}
.roof-detail .n,.review-author b{color:#465b5f}
.review-card{border-color:#dce2de}
.faq-list summary:hover{color:#303c41}
.logos .logo-name{color:#435055}
.choice.selected{border-color:#657679;background:#eef2ef}
.field{background:#fafaf9;border-color:#d6dcd9;color:#283136}
.field:focus{border-color:#8a9e9d;box-shadow:0 0 0 3px rgba(107,132,130,.15)}
.footer{background:#20282d;color:#f4f6f5}
.footer-about,.footer li{color:#c4cfcc}
.footer .brand-words small{color:#b9c4c2}
.floating-wa{box-shadow:0 12px 26px rgba(19,31,32,.17)}
.extra-work-section{border-top-color:#dbe1dc}
.extra-work-top p,.added-projects-head p{color:#69757a}
.extra-work-card{background:#30383c;border-radius:12px}
.extra-work-card::after{background:linear-gradient(180deg,transparent 30%,rgba(20,26,28,.86) 100%)}
.extra-work-card span small{color:#d9e0de}
.extra-work-card span strong{color:#fff}
.added-photo-gallery figure{border-color:#dfe4e1;background:#f4f5f2;border-radius:11px}
.added-photo-gallery figcaption{color:#2f3b3e}
.added-photo-gallery figcaption small{color:#6c7a7b}
/* A calmer, charcoal-colored cinematic roof explainer. The 6 frames stay intact. */
.nd-roof-section{background:#fbfbfa}
.nd-roof-header h2{color:#252e32}
.nd-roof-header h2 em{color:#53686b}
.nd-roof-header>p{color:#657277}
.nd-roof-showcase{background:#f1f2f0;border:1px solid #dce1de;box-shadow:0 24px 65px rgba(28,36,39,.085)}
.nd-roof-canvas{background:#e7e7e5}
.nd-roof-canvas-veil{background:linear-gradient(180deg,rgba(31,39,40,.02),transparent 38%,rgba(32,39,41,.055))}
.nd-roof-panel{background:#f3f4f2;border-left-color:#dce1de;border-top-color:#dce1de}
.nd-roof-panel-head{color:#68787a}
.nd-roof-eyebrow{color:#64777a}
.nd-roof-info h3{color:#273237}
.nd-roof-info p{color:#687579}
.nd-roof-render-tag{color:#4c6062;background:rgba(250,251,249,.87)}
.nd-roof-render-pulse{background:#778b88;box-shadow:0 0 0 5px rgba(107,131,128,.10)}
.nd-roof-corner-label{color:#394b4e}
.nd-roof-track{background:#d8dedb}
.nd-roof-track>span{background:#6d8182}
.nd-roof-iconbutton{color:#3f5558;border-color:#ced7d3;background:#fff}
.nd-roof-iconbutton:hover{background:#e4eae7;border-color:#9aa9a7}
.nd-roof-action{background:#37474c}
.nd-roof-action:hover{background:#273438}
.nd-roof-step{color:#5d6d71;background:#fbfbfa;border-color:#e0e4e1}
.nd-roof-step:hover{background:#eef1ee;border-color:#a9b7b3;color:#33474b}
.nd-roof-step.is-active{color:white;background:#36454a;border-color:#36454a;box-shadow:0 8px 20px rgba(37,52,56,.14)}
.nd-roof-step-num{background:#e5ebe7;color:#607476}
.nd-roof-step.is-active .nd-roof-step-num{background:#dfe7e4;color:#344d50}
.nd-roof-disclaimer{color:#6e7b7c}
/* Consistent look on the Over ons page too */
.about-page{--ab-mint:#d9e2de;--ab-dark:#252e33;--ab-ink:#303b3e;--ab-grey:#637277}
.about-hero{background:#242d32}
.about-hero:after{background:linear-gradient(90deg,rgba(23,30,34,.96) 0%,rgba(29,37,42,.87) 38%,rgba(31,38,42,.43) 77%,rgba(25,33,37,.27))}
.about-page em{color:#d7e0de}
.about-kicker__dot{background:#98aaa6}
.about-intro__rule{background:#83918f}
.about-intro__pull{color:#53676b}
.about-milestones span{color:#566e70}
/* Mobile foundations and responsive spacing */
@media (max-width:1000px){
  .mobile-nav{height:auto;max-height:calc(100dvh - 76px);padding-bottom:calc(32px + env(safe-area-inset-bottom));overscroll-behavior:contain}
  .header-content{gap:12px}
  .site-header .header-actions{gap:10px}
}
@media (max-width:820px){
  .extra-work-top,.added-projects-head{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
  .extra-work-top p,.added-projects-head p{margin:0;max-width:65ch}
  .nd-roof-showcase{border-radius:12px}
}
@media (max-width:760px){
  .extra-work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;grid-auto-rows:auto;gap:12px;align-items:stretch}
  .extra-work-card,.extra-work-card:first-child,.extra-work-card:last-child{position:relative;min-width:0;min-height:0;grid-row:auto;height:220px;max-height:none}
  .extra-work-card:first-child{grid-column:1/-1;height:clamp(225px,63vw,330px)}
  .extra-work-card:last-child{grid-column:1/-1;height:230px}
  .extra-work-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
  .extra-work-card span{bottom:15px;left:16px;right:12px;gap:7px}
  .extra-work-card span strong{font-size:clamp(12px,3.4vw,17px);line-height:1.28;overflow-wrap:break-word}
  .extra-work-card:first-child span strong{font-size:clamp(19px,5.1vw,26px)}
  .extra-work-card span small{font-size:9px;line-height:1.35}
  .added-photo-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .added-photo-gallery figure{min-width:0}
  .extra-work-section{padding:62px 0}
  .added-projects{padding:66px 0}
}
@media (max-width:620px){
  html{scroll-padding-top:87px}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .site-alert{line-height:1.4}
  .mobile-nav{max-height:calc(100dvh - 69px);padding:22px 19px calc(88px + env(safe-area-inset-bottom))}
  .brand-official .brand-mark{width:clamp(131px,37vw,156px)!important;max-width:100%;height:auto}
  .brand-official{height:63px;max-width:calc(100vw - 106px)}
  .header-content{gap:8px;justify-content:space-between}
  .header-actions{gap:7px}
  .menu-toggle{width:44px;height:44px;flex:0 0 44px}
  .hero{background:#252d32}
  .hero::after{background:linear-gradient(90deg,rgba(23,29,33,.94) 0%,rgba(25,31,35,.81) 72%,rgba(28,34,37,.56)),linear-gradient(0deg,rgba(24,30,34,.5),transparent 55%)}
  .hero-content{padding-top:88px;padding-bottom:120px}
  .hero h1{overflow-wrap:normal}
  .hero-buttons{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hero-buttons .btn{min-width:0;max-width:none;white-space:normal;line-height:1.25}
  .extra-work-top h2,.added-projects-head h2{font-size:clamp(2rem,9vw,3.05rem)}
  .extra-work-grid{gap:10px}
  .extra-work-card,.extra-work-card:first-child,.extra-work-card:last-child{border-radius:11px}
  .extra-work-card:not(:first-child):not(:last-child){height:clamp(187px,52vw,224px)}
  .extra-work-card:last-child{height:215px}
  .added-photo-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .added-photo-gallery img{height:clamp(142px,41vw,195px)}
  .added-photo-gallery figcaption strong{font-size:12px}
  .mobile-bottom{z-index:90;gap:9px;padding:10px 15px calc(10px + env(safe-area-inset-bottom));background:rgba(250,250,249,.97);backdrop-filter:blur(14px);border-top:1px solid #dce1de;box-shadow:0 -8px 28px rgba(25,35,38,.08)}
  .mobile-bottom a,.mobile-bottom a:last-child{min-width:0;min-height:47px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:12px;line-height:1.25;font-weight:750;padding:10px 7px;background:#2e383d;color:#fff;border-radius:6px;white-space:normal}
  .mobile-bottom a:last-child{background:#53676b}
  .floating-wa{bottom:calc(94px + env(safe-area-inset-bottom));right:16px;width:48px;height:48px;z-index:85}
  .footer-bottom{padding-bottom:28px}
  .footer-top-cta{padding-bottom:55px}
  .nd-roof-stepnav{gap:7px}
  .nd-roof-step{min-width:0;min-height:53px;gap:7px;padding:8px;font-size:10px;overflow-wrap:anywhere}
  .nd-roof-info p{max-width:none}
  .form-grid,.wizard-wrap,.contact-layout{min-width:0}
}
@media (max-width:375px){
  .container{width:calc(100% - 30px)}
  .extra-work-grid{grid-template-columns:1fr}
  .extra-work-card,.extra-work-card:not(:first-child):not(:last-child),.extra-work-card:first-child,.extra-work-card:last-child{grid-column:1/-1;height:230px}
  .extra-work-card:first-child{height:250px}
  .added-photo-gallery{grid-template-columns:1fr}
  .added-photo-gallery img{height:240px}
  .mobile-bottom a{font-size:11px}
  .nd-roof-render-tag{font-size:7px}
}