/* Hoogerf · phone + tablet (r8 · 18 Oct, after Moreno's desktop approval).
   Loaded in the head with media="(max-width:1023px)"; desktop (≥ 1024, approved at 1440) never reads it.
   r9.4: html adds one type selector so these rules retain precedence over equal-specificity page styles later in the HTML.
   One column on phones, two where it helps on tablets; the same type, colours, hairlines and survey grammar. */
html:root{--u:.75px;--m:40px;--gut:0px;--col:100%;--c1:40px;--c2:50%;--c3:75%;--s:.75px}
html body{min-width:0}
html img{max-width:100%}
html main :is(p,.body,.lead,.d1,.d2,.d3,h3,blockquote,dl,.items,ol,ul,.statement){max-width:none !important}
html .d1{font-size:clamp(37.8px,7.2vw,58.5px);line-height:1}
html .d2{font-size:clamp(29.2px,5.3vw,43px)}
html .d3{font-size:clamp(21.5px,3.6vw,27.5px)}
html .lead{font-size:clamp(17px,2.4vw,19px)}
html .btn,html .btn.ghost,html .dark .btn.ghost,html .light .btn.ghost,html .paper .btn.ghost{height:50px;padding:0 22px}
html .actions{gap:14px 18px}
html main>section[class]{background-image:none}
html .sec{padding:72px var(--m)}
html .sec-head{grid-template-columns:1fr;row-gap:20px;margin-bottom:40px}
html .sec-head .cap{margin-bottom:18px}

/* ---------- header + menu ---------- */
html .site-head{height:72px}
html .site-head .nav{display:none}
html .menu-btn[hidden]{display:inline-flex}
html .menu-btn{align-items:center;gap:10px;height:44px;padding:0 2px 0 12px;font:600 14px/1 Manrope,sans-serif;letter-spacing:.02em;color:var(--linen)}
html .menu-btn i{position:relative;display:block;width:22px;height:1px;background:currentColor}
html .menu-btn i::before,html .menu-btn i::after{content:"";position:absolute;left:0;width:22px;height:1px;background:currentColor;transition:transform .25s}
html .menu-btn i::before{top:-6px}html .menu-btn i::after{top:6px}
html .menu-btn[aria-expanded="true"] i{background:none}
html .menu-btn[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
html .menu-btn[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}
html .site-head.open .nav{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;margin:0;padding:8px var(--m) 28px;background:var(--pine);border-top:1px solid var(--hair);font-size:24px;box-shadow:0 18px 30px rgba(10,14,12,.35)}
html .site-head.open .nav::after,html .site-head.open .nav a::after{display:none}
html .site-head.open .nav a{padding:18px 0 16px;background:none}
html .site-head.open .nav a::before{background:var(--hair)}
html .site-head.open .nav a[aria-current]::before{background:var(--window);box-shadow:none}
html .site-head.over.open{background:var(--pine)}

/* ---------- shared blocks ---------- */
html .page-head{grid-template-columns:1fr;row-gap:24px;padding:48px var(--m) 56px}
html .contact-band{grid-template-columns:1fr;row-gap:48px;padding:72px var(--m)}
html .form{grid-template-columns:1fr 1fr;margin-left:0;gap:26px 28px}
html .form .submit{flex-wrap:wrap;gap:16px}
html .band .ph{padding:24px 20px 0}
html .band .ph .w{font-size:clamp(24.1px,4vw,32.7px)}
html .founder{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);column-gap:40px;padding:72px var(--m)}
html .founder .ph-img{height:auto;aspect-ratio:4/5}
html .team{padding:72px var(--m)}
html .team .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px}
html .diary{padding:72px var(--m)}
html .diary .dh{flex-wrap:wrap}
html .diary .e{grid-template-columns:auto minmax(0,1fr);column-gap:24px;row-gap:10px;padding:22px 0}
html .diary .e>:nth-child(3){grid-column:1/-1}
html .diary .e .who{text-align:left;grid-column:1/-1}
html .diary .foot{flex-wrap:wrap;gap:16px}
html .visit2{grid-template-columns:1fr;row-gap:36px;padding:72px var(--m)}
html .visit2 .ph-img{height:56vw}
html .said{grid-template-columns:1fr;row-gap:36px;padding:72px var(--m)}
html .said .ph-img{height:62vw}
html .said .pair .ph-img{height:44vw}
html .site-foot{padding:56px var(--m) 40px}
html .site-foot .top{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:36px}
html .site-foot .top .wordmark{grid-column:1/-1}
html .site-foot .col{padding-left:0}
html .site-foot .spine{display:none}
html .site-foot .legal{flex-wrap:wrap;gap:10px 24px;margin-top:40px}
html .site-foot .legal span:last-child{margin-left:0}
html .skip{left:var(--m)}

/* ---------- home ---------- */
html .home-project{grid-template-columns:1fr;row-gap:48px;padding:72px var(--m)}
html .plan-wrap .siteplan{width:100%;height:auto}
html .plan-wrap .note-co{position:static;display:block;width:auto !important;white-space:normal !important;padding:14px 0 0;margin-top:14px;background:none;border-top:1px solid var(--hair-d)}
html .legend{flex-wrap:wrap;gap:12px 22px;padding-right:0}
html .home-steps{padding:72px 0}
html .spine-row{grid-template-columns:1fr}
html .spine-row .aside{padding:28px var(--m) 32px}
html .home-steps .band{margin:0 var(--m)}
html .home-steps .ph .body{max-width:none}
html .home-steps .ph .ph-img{width:100%;height:auto;aspect-ratio:4/5}
html .area{height:min(640px,110vw)}
html .area::before{background:linear-gradient(0deg,rgba(20,28,24,.84) 0,rgba(20,28,24,.6) 45%,rgba(20,28,24,.08) 80%,rgba(20,28,24,0) 100%)}
html .area .txt{left:var(--m);right:var(--m);bottom:48px;width:auto}
html .ref-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 24px}
html .ref.r1{grid-column:1/-1}
html .ref.r1 .ph-img{height:62vw}
html .ref.r2 .ph-img,html .ref.r3 .ph-img{height:auto;aspect-ratio:4/5}

/* ---------- projecten ---------- */
html .now-card{grid-template-columns:1fr;row-gap:36px;padding:56px var(--m) 0}
html .now-card .ph-img{height:62vw}
html .now-band{grid-template-columns:1fr;margin-top:48px}
html .now-band .lbl{padding:24px var(--m) 0;border-top:0}
html .now-band .band{margin:16px var(--m) 0}
html .soon{grid-template-columns:1fr;row-gap:28px;padding:72px var(--m)}
html .soon .field{max-width:none}
html .done-list{padding:72px var(--m)}
html .done,html .done.flip{grid-template-columns:1fr;row-gap:28px;padding:40px 0}
html .done .ph-img{height:62vw}
html .done .meta,html .done.flip .meta{order:2}
html .done dl{flex-wrap:wrap;gap:20px 32px}
html .pj-head{padding-bottom:36px}
html .filters{flex-wrap:wrap;gap:10px;padding:0 var(--m) 32px}
html .filters .cap.lbl{flex-basis:100%;margin:0 0 4px}
html .filters button{height:40px;padding:0 16px}

/* ---------- photo heroes (Heidezoom, Villa): photo, then facts, then the band, in flow ---------- */
html :is(.p-hero,.v-hero){height:auto;overflow:visible}
html :is(.p-hero,.v-hero) .photo{position:relative;height:62vw}
html .p-hero .photo img{position:absolute;inset:0;left:0;bottom:auto;transform:none;width:100%;height:100%;min-width:0;object-fit:cover;object-position:60% 72%}
html :is(.p-hero,.v-hero) .maaiveld{display:none}
html :is(.p-hero,.v-hero) .facts{position:relative;left:auto;top:auto;width:auto;padding:28px var(--m) 32px;gap:22px 24px}
html :is(.p-hero,.v-hero) .band{position:relative;left:auto;right:auto;top:auto;height:auto;margin:0 var(--m);border-top:1px solid var(--hair)}
html :is(.p-hero,.v-hero) .band .ph{padding:24px 16px 28px}
html :is(.p-hero,.v-hero) .band .ph .d{margin-top:12px}

/* ---------- heidezoom ---------- */
html .intro2{grid-template-columns:1fr;row-gap:32px;padding:72px var(--m)}
html .situ{grid-template-columns:1fr;row-gap:40px;padding:72px var(--m)}
html .situ .siteplan{width:100%;height:auto}
html .situ .legend{flex-wrap:wrap;gap:12px 22px;padding-right:0}
html .situ .legend .hint{margin-left:0;flex-basis:100%}
html .pick{min-height:0}
html .villas td{font-size:18px}
html .villas .foot{flex-wrap:wrap;gap:16px}
html .docs-row{grid-template-columns:1fr;row-gap:20px}
html .ligging{grid-template-columns:1fr;row-gap:36px;padding:72px var(--m)}
html .phases2{padding:72px 0}
html .phases2 .row{grid-template-columns:1fr}
html .phases2 .aside{padding:28px var(--m) 32px}
html .phases2 .band{margin:0 var(--m)}
html .phases2 .ph .ph-img{width:100%;height:auto;aspect-ratio:4/5}
html .teaser{grid-template-columns:1fr;row-gap:36px;padding:0 var(--m) 72px}
html .teaser .ph-img{height:62vw}

/* ---------- villa ---------- */
html .plans{grid-template-columns:1fr;row-gap:36px;padding:72px var(--m)}
html .plan-box .plan{width:100%;height:auto;margin:0}
html .plan-box .note{position:static;margin-top:12px}
html .v-docs{grid-column:1;justify-content:flex-start;margin-top:8px}
html .inside{grid-template-columns:1fr;row-gap:40px;padding:72px var(--m)}
html .inside .ph-img.a{height:62vw}
html .inside .ph-img.b{height:56vw}
html .mat{padding:72px var(--m)}
html .mat-head{grid-template-columns:1fr;row-gap:20px}
html .mat-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
html .plot{grid-template-columns:1fr;row-gap:36px;padding:72px var(--m)}
html .plot .kavelplan{width:100%;height:auto;margin:0}

/* ---------- werkwijze ---------- */
html .wide-img{height:56vw}
html .chap{padding:88px 0 0}
html .chap .top{grid-template-columns:1fr;row-gap:32px;padding:0 var(--m)}
html .chap .top::before,html .chap .top::after{left:var(--m)}
html .chap .top::before{right:var(--m)}
html .chap .top::after{width:calc((100% - 2 * var(--m)) * var(--p))}
html .chap .ph-img{height:62vw}
html .chap .lists{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:40px;padding:0 var(--m) 64px}
html .chap .lists div{padding:0 16px}
html .chap .lists div:first-child{display:none}
html .chap .lists div:nth-child(2){padding-left:0;border-left:0}
html .chap .lists div:last-child{padding-right:0}
html .af{grid-template-columns:1fr;row-gap:32px;padding:72px var(--m)}

/* ---------- over ---------- */
html .ov-split{grid-template-columns:1fr;row-gap:36px;padding:72px var(--m)}
html .ov-split .ph-img{height:auto;aspect-ratio:4/5}
html .roles{padding:72px var(--m)}
html .roles .grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-right:0}
html .roles .grid .lbl{grid-column:1/-1;padding:0 0 24px}
html .roles .r{padding:24px 20px 0}
html .roles .r:nth-child(2){border-left:0;padding-left:0}
html .name{grid-template-columns:auto minmax(0,1fr);column-gap:36px;padding:72px var(--m)}
html .name .mark{width:160px;height:auto}

/* ---------- contact, privacy, 404 ---------- */
html .faq{grid-template-columns:1fr;row-gap:32px;padding:72px var(--m)}
html .faq summary{gap:20px}
html .faq summary::after{flex:none;width:10px;height:10px}
html .visit{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 var(--m)}
html .visit div,html .visit div:nth-child(4n+1){padding:24px 20px 28px;border-left:1px solid var(--hair)}
html .visit div:nth-child(odd){padding-left:0;border-left:0}
html .visit div:nth-child(4n){padding-right:20px}
html .visit div:nth-child(n+3){border-top:1px solid var(--hair)}
html .legal-text{grid-template-columns:1fr;row-gap:32px;padding:56px var(--m) 72px}
html .nf{grid-template-columns:1fr;row-gap:32px;min-height:0;padding:56px var(--m) 72px}
html .nf svg{width:180px;justify-self:start}

/* ================= phones (≤ 599 CSS px) ================= */
@media (max-width:599px){
  html:root{--u:.5px;--m:20px;--c1:20px;--s:.5px}
  html .site-head{height:64px}
  html .d2[data-sv]::before{display:none}
  html .form{grid-template-columns:1fr}
  html .intro2 .cols{grid-template-columns:1fr;row-gap:32px}
  html .af ul{grid-template-columns:1fr}
  html .specs div{grid-template-columns:120px 1fr}
  html .btn,html .btn.ghost,html .dark .btn.ghost,html .light .btn.ghost,html .paper .btn.ghost{padding:0 18px}
  html .band{grid-template-columns:1fr}
  html .band .ph{border-left:0;border-top:1px solid var(--hair);padding:20px 0 24px 22px}
  html .light .band .ph,html .paper .band .ph{border-top-color:var(--hair-d)}
  html .band .ph::before{top:-2px}
  html .band .ph::after{left:0;top:-4px}
  html .band{border-top:0}
  html .founder{grid-template-columns:1fr;row-gap:32px}
  html .team .grid{gap:32px 16px}
  html .site-foot .top{grid-template-columns:1fr 1fr}
  html .ref-row{grid-template-columns:1fr}
  html .ref.r1 .ph-img,html .ref.r2 .ph-img,html .ref.r3 .ph-img{height:auto;aspect-ratio:4/3}
  /* photo heroes keep the three phases in one row on a phone: short, like the home hero */
  html :is(.p-hero,.v-hero) .band{grid-template-columns:repeat(3,minmax(0,1fr))}
  html :is(.p-hero,.v-hero) .band .ph{border-top:0;border-left:1px solid var(--hair);padding:18px 8px 22px 12px}
  html :is(.p-hero,.v-hero) .band .ph:first-child{border-left:0;padding-left:0}
  html :is(.p-hero,.v-hero) .band .ph::after{display:none}
  html :is(.p-hero,.v-hero) .band .ph .w{font-size:18.9px}
  html :is(.p-hero,.v-hero) .band .ph .d{display:none}
  html .v-hero .facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  html .home-steps .ph .ph-img,html .phases2 .ph .ph-img{aspect-ratio:3/2}
  html .mat-row{grid-template-columns:1fr;gap:36px}
  html .mat-row .ph-img{aspect-ratio:3/2}
  html .chap .lists{grid-template-columns:1fr;row-gap:28px}
  html .chap .lists div{padding:0 !important;border-left:0 !important}
  html .roles .grid{grid-template-columns:1fr}
  html .roles .r,html .roles .r:nth-child(2){border-left:0;border-top:1px solid var(--hair);padding:22px 0 26px}
  html .name{grid-template-columns:1fr;row-gap:28px}
  html .name .mark{width:120px}
  html .visit{grid-template-columns:1fr}
  html .visit div,html .visit div:nth-child(odd),html .visit div:nth-child(4n),html .visit div:nth-child(4n+1){padding:20px 0 22px;border-left:0}
  html .visit div:nth-child(n+2){border-top:1px solid var(--hair)}
  html .diary .e{grid-template-columns:1fr}
  html .villas thead{display:none}
  html .villas table,html .villas tbody{display:block}
  html .villas tr{display:grid;grid-template-columns:auto 1fr auto;column-gap:16px;row-gap:4px;padding:18px 0;border-top:1px solid var(--hair-d)}
  html .villas tr:last-child{border-bottom:1px solid var(--hair-d)}
  html .villas td,html .villas tr:last-child td{border:0;padding:0;font-size:17px}
  html .villas td.n{grid-row:1/4;width:auto;font-size:34px;padding-right:4px}
  html .villas td:nth-child(2){grid-column:2}
  html .villas td:nth-child(3),html .villas td:nth-child(4){grid-column:2;font-size:15px;color:var(--ink-2)}
  html .villas td:nth-child(5){display:none}
  html .villas td:nth-child(6){grid-column:3;grid-row:1;justify-self:end}
  html .villas td.pr{grid-column:3;grid-row:2/4;align-self:end;font-size:15px}
  html .tabs{width:100%}
  html .tabs button{flex:1}
  html .area{height:min(600px,150vw)}
}