:root{
  --ink:#171916;
  --ink-2:#262923;
  --paper:#FFFFFF;
  --paper-2:#F1F2EF;
  --sage:#5E7358;--accent:#5E7358;--accent-2:#4E6149;--accent-soft:rgba(94,115,88,.16);
  --sage-2:#8FA487;
  --line:rgba(23,25,22,.14);
  --line-strong:rgba(23,25,22,.24);
  --line-dark:rgba(255,255,255,.16);
  --forest:#3D4C38;
  --mute:rgba(23,25,22,.66);
  --mute-2:rgba(23,25,22,.78);
  --display:"Barlow Condensed",sans-serif;
  --body:"Source Sans 3",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-2:cubic-bezier(.25,1,.5,1);
  --r:28px;
  --gutter:clamp(20px,4vw,64px);
  --max:1360px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-gutter:stable}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--body);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,dl,dd,figure,address{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.dark :focus-visible,.hero :focus-visible,.case-hero :focus-visible{outline-color:var(--paper)}
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:999px;font-weight:600}
.skip:focus{top:16px}
.wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
p{max-width:60ch}

/* type */
.lbl{font:600 12.5px/1.3 var(--body);letter-spacing:.15em;text-transform:uppercase;color:var(--mute);max-width:none}
.lbl::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--sage);margin-right:10px;vertical-align:1px}
.plane .lbl::before{background:var(--paper)}
.dark .lbl{color:rgba(255,255,255,.6)}
.hero-kicker::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--sage);margin-right:12px;vertical-align:1px}
.h2{font:700 clamp(40px,5.2vw,76px)/.95 var(--display);text-transform:uppercase;letter-spacing:.004em;text-wrap:balance}
.lead{font-size:clamp(19px,1.5vw,22px);line-height:1.45}
.sep{opacity:.55;margin:0 .45em}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:50px;padding:0 26px;border-radius:999px;font:600 15.5px/1 var(--body);letter-spacing:.01em;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .55s var(--ease),background-color .35s ease,color .35s ease,border-color .35s ease}
.btn:hover{transform:translateY(-2px)}
.btn-sm{min-height:44px;padding:0 20px;font-size:14.5px}
.btn-ink{background:var(--accent);color:#fff}.btn-ink:hover{background:var(--accent-2)}
.btn-ink:hover{background:#31352E}
.btn-paper{background:var(--paper);color:var(--ink)}
.btn-paper:hover{background:#FBFAF5}
.btn-ghost{color:var(--paper);border-color:rgba(255,255,255,.6);background:rgba(23,25,22,.22)}
.btn-ghost:hover{background:rgba(23,25,22,.42);border-color:rgba(255,255,255,.9)}
.btn-sage{background:var(--accent);color:#fff}
.btn-sage:hover{background:var(--accent-2)}

/* nav */
.nav-wrap{position:fixed;left:0;right:0;top:0;z-index:60;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:16px var(--gutter);color:var(--paper);transition:transform .6s var(--ease),background-color .5s var(--ease),color .4s var(--ease),box-shadow .5s;animation:navfade 1s var(--ease)}
@keyframes navfade{from{opacity:0}to{opacity:1}}
.nav-wrap::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(23,25,22,.45),rgba(23,25,22,0));transition:opacity .5s;pointer-events:none}
html.nav-solid .nav-wrap{color:var(--ink);background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
html.nav-solid .nav-wrap::before{opacity:0}
html.nav-hidden .nav-wrap{transform:translateY(-110%)}
html.menu-open .nav-wrap{color:var(--ink);background:transparent;box-shadow:none;transform:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html.menu-open .nav-wrap::before{opacity:0}
.menu-btn{justify-self:start;display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 6px;border:0;background:transparent;color:inherit;cursor:pointer;font:600 12.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;border-radius:999px}
.menu-btn .lines{position:relative;width:26px;height:14px;display:block}
.menu-btn .lines span{position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px;top:50%;transition:transform .5s var(--ease)}
.menu-btn .lines span:first-child{transform:translateY(-5px)}
.menu-btn .lines span:last-child{transform:translateY(3px)}
.menu-btn[aria-expanded="true"] .lines span:first-child{transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .lines span:last-child{transform:rotate(-45deg)}
.brand{justify-self:center;display:inline-flex;align-items:center;height:44px}
.wordmark{display:inline-block;font:900 26px/1 "Urbanist",var(--display);letter-spacing:-.05em;text-transform:uppercase;color:inherit}
.wordmark-lg{font-size:52px;color:var(--paper)}
.nav-right{justify-self:end;display:flex;align-items:center;gap:10px}
.nav-tel{display:inline-flex;align-items:center;height:44px;padding:0 12px;font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;border-radius:999px;color:inherit;transition:background-color .3s}
.nav-tel:hover{background:rgba(127,127,127,.16)}
.btn-outline{color:inherit;background:transparent;border-color:currentColor}
.btn-outline:hover{background:rgba(127,127,127,.16)}
.menu{position:fixed;inset:0;z-index:55;visibility:hidden;pointer-events:none}
/* ready only makes the panel visible so the browser can draw it; open is what sets it moving */
.menu.ready{visibility:visible}
.menu.open{pointer-events:auto}
.menu-scrim{position:absolute;inset:0;background:rgba(23,25,22,.55);opacity:0;transition:opacity .6s var(--ease)}
.menu.open .menu-scrim{opacity:1}
.menu-panel{position:absolute;top:0;left:0;right:0;max-height:100%;overflow:auto;background:#fff;color:var(--ink);border-radius:0 0 var(--r) var(--r);padding:104px var(--gutter) 44px;transform:translateY(-102%);transition:transform .7s var(--ease);box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.menu.open .menu-panel{transform:none}
.menu-grid{width:min(100%,var(--max));margin-inline:auto;display:grid;grid-template-columns:minmax(220px,.75fr) 1.6fr;gap:32px 56px;align-items:start}
.menu-side{display:grid;gap:22px;padding-top:14px;font-size:15px}
.menu-side a{font-weight:600}
.menu-k{display:block;font:600 11.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:rgba(23,25,22,.5);margin-bottom:8px}
.m-l1,.m-l2,.m-l3{list-style:none;margin:0;padding:0}
.m-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.m-l1>li{border-top:0;transform:translateY(18px);opacity:0;transition:transform .7s var(--ease),opacity .7s var(--ease);transition-delay:calc(var(--i,0)*55ms + .15s)}
.m-l1>li:first-child{border-top:0}
.menu.open .m-l1>li{transform:none;opacity:1}
.m-l1>li>.m-row{padding:10px 0}
.m-l1>li>.m-row>.m-link{font:600 clamp(30px,7.4vw,40px)/1.1 "Figtree",var(--body);letter-spacing:-.02em;transition:color .3s}
.m-link:hover{color:var(--accent)}
.m-tog{flex:none;width:44px;height:44px;border:0;background:transparent;color:rgba(23,25,22,.7);display:grid;place-items:center;cursor:pointer;transition:color .3s,transform .5s var(--ease)}
.m-tog:hover{color:var(--ink)}
.m-tog svg{width:18px;height:18px;stroke-width:1.4;transition:transform .5s var(--ease)}
.m-tog[aria-expanded="true"] svg{transform:rotate(180deg)}
.m-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.m-sub.open{grid-template-rows:1fr}
.m-sub-in{overflow:hidden}
.m-l2{padding:2px 0 14px 4px}
.m-l2>li{border-top:0}
.m-l2>li>.m-row{padding:8px 0}
.m-l2>li>.m-row>.m-link{font:500 clamp(20px,5vw,24px)/1.2 "Figtree",var(--body);letter-spacing:-.01em;color:rgba(23,25,22,.85)}
.m-l2 .m-tog{width:36px;height:36px}.m-l2 .m-tog svg{width:14px;height:14px}
.m-l3{display:flex;flex-wrap:wrap;gap:6px 8px;padding:2px 0 14px}
.m-l3 .m-link{display:inline-block;padding:7px 12px;border:1px solid rgba(23,25,22,.2);border-radius:999px;font:500 13.5px/1 "Figtree",var(--body);color:rgba(23,25,22,.8);transition:background-color .3s,color .3s}
.m-l3 .m-link:hover{background:var(--paper);color:var(--ink)}
html.menu-open{overflow:hidden}
/* desktop cascade menu */
.casc-wrap{position:relative;overflow:hidden;display:block;min-height:min(56vh,480px)}
.casc-wrap .menu-side{position:absolute;left:0;top:0;width:34%;padding-top:14px;transition:opacity .4s var(--ease),transform .5s var(--ease)}
/* The list on the right glides in a line at a time; the column on the left had no entrance at all and
   stood there fully formed from the first frame, which is the mismatch that reads as odd. Same rise,
   same easing, same 50ms cadence, so the two halves arrive as one movement. The container keeps its own
   opacity and transform for sliding out of the way when a submenu opens, so the children carry this. */
.casc-wrap .menu-side>*{transform:translateY(14px);opacity:0;transition:transform .7s var(--ease),opacity .7s var(--ease)}
.casc-wrap .menu-side>:nth-child(1){transition-delay:.15s}
.casc-wrap .menu-side>:nth-child(2){transition-delay:.20s}
.casc-wrap .menu-side>:nth-child(3){transition-delay:.25s}
.casc-wrap .menu-side>:nth-child(4){transition-delay:.30s}
.casc-wrap .menu-side>:nth-child(5){transition-delay:.35s}
.menu.open .casc-wrap .menu-side>*{transform:none;opacity:1}
.cascade{position:relative;display:grid;grid-template-columns:36% 32% 32%;column-gap:0;transition:transform .7s var(--ease)}
.cascade[data-level="1"]{transform:translateX(64%)}
.cascade[data-level="2"]{transform:translateX(32%)}
.cascade[data-level="3"]{transform:none}
.cascade[data-level="2"]~.menu-side,.casc-wrap:has(.cascade[data-level="2"]) .menu-side,.casc-wrap:has(.cascade[data-level="3"]) .menu-side{opacity:0;transform:translateX(-24px);pointer-events:none}
.col{padding-right:40px;min-width:0}
.col2,.col3{opacity:0;transform:translateX(26px);transition:opacity .5s var(--ease),transform .6s var(--ease);pointer-events:none}
.cascade[data-level="2"] .col2,.cascade[data-level="3"] .col2,.cascade[data-level="3"] .col3{opacity:1;transform:none;pointer-events:auto}
.c-l1,.c-l2,.c-l3{list-style:none;margin:0;padding:0}
.c-l1>li{border-top:0;transform:translateY(16px);opacity:0;transition:transform .7s var(--ease),opacity .7s var(--ease);transition-delay:calc(var(--i,0)*50ms + .15s)}
.c-l1>li:first-child{border-top:0}
.menu.open .c-l1>li{transform:none;opacity:1}
.c-link{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:7px 0;font:600 clamp(34px,3.6vw,50px)/1.1 "Figtree",var(--body);letter-spacing:-.02em;color:rgba(23,25,22,.82);transition:color .3s,padding-left .4s var(--ease)}
.c-link:hover,.c-link.is-on,.c-link:focus-visible{color:var(--ink)}
.c-link.is-on{padding-left:0}
.c-chev{flex:none;width:22px;height:22px;display:grid;place-items:center;color:rgba(23,25,22,.55);transition:color .3s,transform .4s var(--ease)}
.c-chev svg{width:16px;height:16px;stroke-width:1.4}
.c-link.is-on .c-chev,.c-link2.is-on .c-chev,.c-link:hover .c-chev,.c-link2:hover .c-chev{color:var(--ink);transform:translateX(6px)}
.c-head{margin:0 0 6px;font:600 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:rgba(23,25,22,.45);padding-top:16px}
.c-l2>li{border-top:0;transform:translateX(14px);opacity:0;transition:transform .5s var(--ease),opacity .5s var(--ease);transition-delay:calc(var(--i,0)*45ms + .1s)}
.cascade[data-level="2"] .c-l2>li,.cascade[data-level="3"] .c-l2>li{transform:none;opacity:1}
.c-link2{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0;font:500 clamp(21px,1.9vw,27px)/1.2 "Figtree",var(--body);letter-spacing:-.01em;color:rgba(23,25,22,.8);transition:color .3s}
.c-link2:hover,.c-link2.is-on{color:var(--ink)}
.c-link2 .c-chev{width:20px;height:20px}.c-link2 .c-chev svg{width:14px;height:14px}
.c-l3>li{border-top:0;transform:translateX(14px);opacity:0;transition:transform .5s var(--ease),opacity .5s var(--ease);transition-delay:calc(var(--i,0)*40ms + .08s)}
.cascade[data-level="3"] .c-l3>li{transform:none;opacity:1}
.c-link3{display:block;padding:7px 0;font:500 17px/1.35 "Figtree",var(--body);letter-spacing:-.005em;color:rgba(23,25,22,.78);transition:color .3s,padding-left .3s var(--ease)}
.c-link3:hover{color:var(--accent);padding-left:6px}
.c-all{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font:600 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.c-all::after{content:"\2192"}
@media(max-width:900px){.casc-wrap{min-height:0}}

@media(max-width:900px){.menu-panel{border-radius:0;height:100%;padding:96px var(--gutter) 40px}.menu-grid{grid-template-columns:1fr;gap:34px}.menu-side{order:2;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-dark);padding-top:22px}
 /* The language buttons sat in the same two columns as the contact details, so Bel ons ended up
    beside them and Open was left alone on a row of its own. Give the buttons their own full width
    line and the four details fall into an even two by two block underneath. */
 .menu-side>.menu-langs{grid-column:1/-1;margin-bottom:0}}

/* photo treatment: one calm series */
.ph{position:relative;overflow:hidden;background:var(--ink-2)}
.ph>img{width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.03)}
.ph::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(74,66,50,.10),rgba(23,25,22,.16));mix-blend-mode:multiply}
.frame{border-radius:var(--r)}
.frame>img{transition:transform 1.2s var(--ease)}
.frame:hover>img{transform:scale(1.035)}
figcaption{position:relative;z-index:1}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:var(--paper);isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media>img{object-position:50% 50%;transform-origin:50% 50%;animation:herozoom 2.2s var(--ease) both;filter:brightness(1.02) contrast(1) saturate(.95)}
.hero-media.ph::after{background:linear-gradient(180deg,rgba(255,250,240,.06),rgba(23,25,22,.06));mix-blend-mode:normal}
@keyframes herozoom{from{transform:scale(1.07)}to{transform:scale(1)}}
@media(max-width:760px){.hero-media>img{object-position:58% 50%;transform-origin:58% 50%}}
.hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(23,25,22,.14) 0%,rgba(23,25,22,0) 28%,rgba(23,25,22,0) 52%,rgba(23,25,22,.3) 78%,rgba(23,25,22,.58) 100%)}
.hero-inner{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto;padding:150px 0 22px}
.hero-kicker{font:600 13px/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.9);margin-bottom:20px;max-width:none;text-shadow:0 1px 18px rgba(23,25,22,.5)}
.hero-title{font:500 clamp(40px,6.2vw,96px)/.92 var(--display);text-transform:uppercase;letter-spacing:.004em;max-width:11em;text-wrap:balance;margin-left:-.02em;text-shadow:0 2px 34px rgba(23,25,22,.35)}
.hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:28px 48px;margin-top:30px;flex-wrap:wrap}
.hero-lead{max-width:46ch;font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:rgba(255,255,255,.94)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-foot{display:flex;justify-content:flex-end;align-items:center;gap:16px 24px;margin-top:44px;padding-top:16px;border-top:1px solid rgba(255,255,255,.3);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.82);flex-wrap:wrap}
.hero-tags{display:flex;flex-wrap:wrap}
.hero-tags li+li::before{content:"·";margin:0 .7em;opacity:.6}
.scroll-cue{display:inline-flex;align-items:center;gap:10px;min-height:44px}
.scroll-cue span{display:inline-block;transition:transform .5s var(--ease)}
.scroll-cue:hover span{transform:translateY(4px)}
.anim{animation:rise .85s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes drop{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
@keyframes zoom{from{transform:scale(1.06)}to{transform:none}}


/* plan + carousel (scrollytelling) */
.plan-sec{position:relative;height:300vh;background:var(--paper)}
.plan-sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--paper)}
.plan-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:clamp(70px,9vh,110px) var(--gutter) clamp(60px,8vh,90px)}
.plan-svg{width:min(100%,1320px);height:auto;max-height:100%;display:block}
.plan-svg path{fill:var(--ink);fill-opacity:1;stroke:var(--ink);stroke-width:22;stroke-linecap:round;stroke-linejoin:round;vector-effect:none}
html.js-draw .plan-svg path{fill-opacity:0;stroke-dasharray:var(--l,1);stroke-dashoffset:calc(var(--l,1) * (1 - var(--p,0)));transition:fill-opacity .9s var(--ease)}
html.js-draw .plan-svg.drawn path{fill-opacity:.92}
.plan-kicker{position:absolute;left:0;right:0;top:clamp(88px,12vh,120px);text-align:center;font:600 12.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);opacity:0;transform:translateY(10px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.plan-sticky.is-drawn .plan-kicker{opacity:1;transform:none}
.plan-svg{transition:opacity 1.5s var(--ease)}
.plan-sticky{transition:background-color 1.6s var(--ease)}
.plan-svg path{transition:fill .9s var(--ease),stroke .9s var(--ease),fill-opacity .9s var(--ease)}
.plan-sticky.is-in{background:#3D4C38}
.plan-sticky.is-in .plan-svg{opacity:.1}
.plan-sticky.is-in .plan-svg path{fill:var(--paper);stroke:var(--paper)}
.plan-sticky.is-in .plan-kicker{color:rgba(255,255,255,.66)}
.plan-sticky.is-in .pc-meta{color:rgba(255,255,255,.72)}
.plan-sticky.is-in .pc-cap b{color:var(--paper)}
.plan-sticky.is-in .pc-prog{background:rgba(255,255,255,.18)}
.plan-sticky.is-in .pc-prog i{background:var(--paper)}
.plan-sticky.is-in .pc-btn{background:rgba(45,56,41,.78);color:var(--paper);border-color:rgba(255,255,255,.28)}
.plan-sticky.is-in .pc-btn:hover{background:rgba(45,56,41,.95)}
.plan-sticky.is-in .pc-slide{box-shadow:0 50px 100px -30px rgba(0,0,0,.7)}
.pc{position:absolute;left:0;right:0;top:50%;transform:translateY(calc(-50% + 40px));--sh:clamp(420px,80vh,920px);--sw:calc(var(--sh) * 3 / 4);--gap:24px;opacity:0;transition:opacity 1s var(--ease),transform 1.1s var(--ease);pointer-events:none}
.pc.is-in{opacity:1;transform:translateY(-50%);pointer-events:auto}
.pc-track{position:relative;height:var(--sh);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.pc-track:active{cursor:grabbing}
.pc-slide{position:absolute;top:0;left:50%;width:var(--sw);height:100%;margin:0 0 0 calc(var(--sw) / -2);border-radius:var(--r);overflow:hidden;opacity:0;transition:transform 1.1s var(--ease),opacity .9s var(--ease);will-change:transform;box-shadow:0 40px 80px -36px rgba(23,25,22,.55)}
.pc-ph{height:100%;background:var(--ink-2)}
.pc-ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.03);pointer-events:none;transform:scale(1.04)}
.pc-slide.is-active .pc-ph img{animation:pckb 7s var(--ease) both}
@keyframes pckb{from{transform:scale(1.1)}to{transform:scale(1)}}
.pc-slide:not(.is-active){cursor:pointer}
.pc-btn{position:absolute;top:calc(var(--sh) / 2);width:52px;height:52px;border:1px solid var(--line-strong);border-radius:50%;background:rgba(255,255,255,.94);color:var(--ink);display:grid;place-items:center;cursor:pointer;z-index:5;transform:translateY(-50%);transition:transform .5s var(--ease),background-color .3s}
.pc-btn:hover{transform:translateY(-50%) scale(1.07);background:var(--paper)}
.pc-btn.prev{left:max(var(--gutter),calc(50% - 640px))}
.pc-btn.next{right:max(var(--gutter),calc(50% - 640px))}
.pc-btn svg{width:20px;height:20px}
.pc-meta{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:16px;font-size:14px;color:var(--mute-2)}
.pc-cap b{font:700 20px/1 var(--display);letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin-right:10px}
.pc-cap.is-swap{animation:pccap .7s var(--ease)}
@keyframes pccap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pc-prog{position:relative;flex:1;max-width:220px;height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.pc-prog i{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(0)}
.pc.is-auto .pc-prog i{animation:pcprog 5.5s linear forwards}
@keyframes pcprog{to{transform:scaleX(1)}}
.pc-count{font-variant-numeric:tabular-nums;letter-spacing:.08em}
@media(prefers-reduced-motion:reduce){.plan-sec{height:auto}.plan-sticky{position:relative;height:auto;padding:80px 0 40px}.plan-bg{position:relative;padding:0 var(--gutter)}.pc{position:relative;top:auto;transform:none;opacity:1;pointer-events:auto;margin-top:24px}.plan-kicker{position:relative;top:auto;opacity:1;transform:none;margin-bottom:20px}}
@media(max-width:760px){
  .plan-sec{height:330svh}
  .plan-bg{align-items:center;padding:0 12px}
  .pc{--sh:min(64svh,calc(86vw * 4 / 3));--gap:10px;top:50%;bottom:auto;transform:translateY(calc(-50% + 30px))}
  .pc.is-in{transform:translateY(-50%)}
  .pc-btn{width:46px;height:46px}.pc-btn.prev{left:8px}.pc-btn.next{right:8px}
  .pc-prog{display:none}
  .pc-cap b{display:block;margin:0 0 4px}
}

/* diensten */
.svc-sec{padding:clamp(72px,9vw,132px) 0 clamp(56px,7vw,104px)}
.sec-head{display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(36px,5vw,64px)}
.svc-layout{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,4vw,64px);align-items:stretch}
.svc-photo{min-height:520px}
.svc-photo>img{position:absolute;inset:0;object-position:50% 50%}
.svc-photo::before{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;z-index:1;background:linear-gradient(180deg,rgba(23,25,22,0),rgba(23,25,22,.6));pointer-events:none}
.usps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 32px;margin-top:clamp(36px,4.5vw,64px);padding-top:24px;border-top:1px solid var(--line-strong)}
.usps li{font:700 clamp(19px,1.55vw,23px)/1.15 var(--display);text-transform:uppercase;display:flex;gap:12px;align-items:flex-start}
.usps li::before{content:"";flex:0 0 auto;width:9px;height:9px;border-radius:2px;background:var(--sage);margin-top:.42em}
.svc-photo figcaption{position:absolute;left:26px;right:26px;bottom:22px;display:flex;justify-content:space-between;gap:12px;color:var(--paper);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,3vw,52px)}
.svc{border-top:1px solid var(--line-strong);padding:26px 0 40px;display:flex;flex-direction:column;gap:14px}
.svc-n{font:500 15px/1 var(--display);letter-spacing:.1em;color:var(--mute)}
.svc h3{font:700 clamp(30px,2.9vw,42px)/1 var(--display);text-transform:uppercase}
.svc p{color:var(--mute-2);font-size:16.5px}
.more{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;font-size:15px;margin-top:auto;text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(23,25,22,.3);transition:text-decoration-color .3s}
.more:hover{text-decoration-color:currentColor}
.more span{display:inline-block;transition:transform .5s var(--ease)}
.more:hover span{transform:translateX(5px)}

/* realisaties: case */
.case-head{display:flex;justify-content:space-between;gap:16px;padding-bottom:22px}
.case-hero{position:relative;height:clamp(520px,84vh,880px);display:flex;align-items:flex-end;color:var(--paper);isolation:isolate}
.case-hero>img{position:absolute;inset:0;object-position:50% 62%}
.case-hero-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(23,25,22,0) 38%,rgba(23,25,22,.72) 100%)}
.case-hero-inner{position:relative;z-index:2;padding-bottom:30px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px 24px;flex-wrap:wrap}
.case-title{font:500 clamp(96px,17.5vw,250px)/.84 var(--display);text-transform:uppercase;letter-spacing:.01em;margin-left:-.04em}
.case-sub{font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding-bottom:16px;max-width:none}
.plane{background:var(--accent);color:#fff}.plane p{color:rgba(255,255,255,.86)}.plane .lbl{color:rgba(255,255,255,.72)}.plane .lbl::before{background:rgba(255,255,255,.72)}.plane a{color:#fff}
.case-grid{display:grid;grid-template-columns:4fr 8fr;gap:clamp(32px,5vw,88px);padding:clamp(56px,7vw,96px) 0 calc(clamp(56px,7vw,96px) + 72px)}
.meta div{display:grid;grid-template-columns:104px 1fr;gap:16px;padding:14px 0;border-top:1px solid rgba(23,25,22,.2);font-size:15.5px}
.meta div:last-child{border-bottom:1px solid rgba(23,25,22,.2)}
.meta dt{color:var(--mute);text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:600;padding-top:4px}
.meta dd{font-weight:600}
.case-text{display:flex;flex-direction:column;gap:22px;max-width:62ch}
.case-text .lbl{margin-top:8px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags li{border:1px solid rgba(23,25,22,.38);border-radius:999px;padding:8px 14px;font-size:14px;line-height:1.25}
.case-text .btn{align-self:flex-start;margin-top:10px}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px);margin-top:-72px;position:relative;z-index:1}
.strip .frame{aspect-ratio:3/4}
.strip figcaption{margin-top:12px;font-size:14px;color:var(--mute);display:flex;justify-content:space-between;gap:12px}

/* project index */
.index{padding:clamp(72px,9vw,120px) 0 clamp(56px,7vw,96px)}
.index-head{display:grid;grid-template-columns:4fr 8fr;gap:24px 32px;align-items:end;margin-bottom:26px}
.idx-row{position:relative;border-top:1px solid var(--line-strong)}
.idx-row:last-child{border-bottom:1px solid var(--line-strong)}
.idx-row>a{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:16px 28px;padding:16px 0;min-height:64px}
.idx-title{font:700 clamp(36px,5vw,72px)/1 var(--display);text-transform:uppercase;transition:transform .6s var(--ease);display:inline-block}
@media (hover:hover){.idx-row:hover .idx-title{transform:translateX(12px)}}
.idx-cat{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.idx-more{font-weight:600;font-size:15px;display:inline-flex;gap:8px;align-items:center;min-width:110px;justify-content:flex-end;padding-right:6px}
.idx-more span{display:inline-block;transition:transform .5s var(--ease)}
@media (hover:hover){.idx-row:hover .idx-more span{transform:translateX(5px)}}
.idx-thumb{position:absolute;right:28%;top:50%;width:128px;height:171px;object-fit:cover;border-radius:14px;opacity:0;transform:translateY(-50%) rotate(-4deg) scale(.9);transition:opacity .45s var(--ease),transform .65s var(--ease);pointer-events:none;z-index:2;box-shadow:0 24px 48px -22px rgba(23,25,22,.55);filter:saturate(.9)}
@media (hover:hover) and (min-width:1024px){.idx-row:hover .idx-thumb,.idx-row:focus-within .idx-thumb{opacity:1;transform:translateY(-50%) rotate(-4deg) scale(1)}}

/* werkwijze */
.how{background:var(--paper-2);padding:clamp(72px,9vw,128px) 0}
.how-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:start}
.how-sticky{position:sticky;top:104px;display:flex;flex-direction:column;gap:20px}
.how-sticky p{color:var(--mute-2)}
.how-sticky .frame{aspect-ratio:4/5;margin-top:12px;max-width:420px}
.step{display:grid;grid-template-columns:84px 1fr;gap:24px;padding:30px 0 34px;border-top:1px solid var(--line-strong)}
.step:last-child{border-bottom:1px solid var(--line-strong)}
.step-n{font:500 clamp(36px,3.6vw,52px)/.9 var(--display);color:rgba(23,25,22,.42);padding-top:2px}
.step h3{font:700 clamp(26px,2.4vw,34px)/1 var(--display);text-transform:uppercase;margin-bottom:10px}
.step p{color:var(--mute-2)}

/* over ons */
.about{padding:clamp(72px,9vw,128px) 0}
.about-grid{display:grid;grid-template-columns:6fr 6fr;gap:clamp(32px,6vw,96px);align-items:center}
.about-text{display:flex;flex-direction:column;gap:20px}
.about-text .lbl+.h2{margin-top:-4px}
.about-text .lbl.sub{margin-top:14px}
.marks{counter-reset:mark}
.marks li{counter-increment:mark;border-top:1px solid rgba(23,25,22,.2);padding:13px 0;font:700 clamp(22px,2vw,28px)/1.1 var(--display);text-transform:uppercase;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.marks li:last-child{border-bottom:1px solid rgba(23,25,22,.2)}
.marks li::before{content:counter(mark,decimal-leading-zero);font:500 14px/1 var(--display);letter-spacing:.1em;color:var(--mute);order:2}
.about-photos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px);align-items:start}
.about-photos figure:nth-child(2){margin-top:72px}
.about-photos .frame{aspect-ratio:3/4}

/* cta */
.cta{background:var(--ink);color:var(--paper);padding:clamp(72px,9vw,120px) 0}
.cta-grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,6vw,96px);align-items:center}
.cta-text{display:flex;flex-direction:column;gap:22px}
.cta-title{font:700 clamp(48px,6.4vw,96px)/.92 var(--display);text-transform:uppercase;display:flex;flex-direction:column;margin-bottom:6px}
.cta-title-2{color:var(--sage-2);font-weight:500}
.cta-text p{color:rgba(255,255,255,.82)}
.cta-actions{display:flex;align-items:center;gap:12px 26px;flex-wrap:wrap;margin-top:6px}
.cta-tel{font-weight:600;min-height:44px;display:inline-flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.45);transition:border-color .3s}
.cta-tel:hover{border-color:var(--paper)}
.cta-photo{aspect-ratio:4/5;max-width:520px;justify-self:end}

/* contact */
.contact{padding:clamp(72px,9vw,128px) 0}
.contact-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:start}
.contact-info{display:flex;flex-direction:column;gap:20px}
.contact-info p{color:var(--mute-2)}
.details{margin-top:10px}
.details div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:12px 0;border-top:1px solid var(--line-strong);font-size:16px}
.details div:last-child{border-bottom:1px solid var(--line-strong)}
.details dt{color:var(--mute);text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:600;padding-top:6px}
.details dd{line-height:1.5}
.details a{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(23,25,22,.3);transition:text-decoration-color .3s}
.details a:hover{text-decoration-color:currentColor}
.form{display:grid;gap:22px;padding:clamp(24px,3vw,44px);background:var(--paper-2);border-radius:var(--r)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--mute)}
.field input,.field select,.field textarea{font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid rgba(23,25,22,.32);padding:10px 0;min-height:48px;border-radius:0;outline:none;width:100%;transition:border-color .3s,box-shadow .3s}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 14px) 22px,calc(100% - 9px) 22px;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px;cursor:pointer}
.field textarea{resize:vertical;min-height:120px;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.field.invalid input,.field.invalid textarea{border-bottom-color:#8A2E22;box-shadow:0 1px 0 #8A2E22}
.f-err{font-size:13.5px;color:#8A2E22;min-height:0;line-height:1.3}
.f-err:empty{display:none}
.f-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.f-note{font-size:14.5px;color:var(--mute)}
.f-success{padding:8px 0}
.f-success h3{font:700 clamp(28px,3vw,40px)/1 var(--display);text-transform:uppercase;margin-bottom:12px}
.f-body{display:contents}
.form.sent .f-body{display:none}

/* footer */
.foot{background:var(--forest);color:var(--paper);padding:clamp(56px,7vw,88px) 0 0;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:4fr 2.6fr 2.4fr 3fr;gap:32px;padding-bottom:48px;border-bottom:1px solid var(--line-dark)}
.foot-brand img{height:46px;width:auto;margin-bottom:20px}
.foot-brand p{color:rgba(255,255,255,.72);max-width:34ch;font-size:15.5px}
.foot .lbl{color:rgba(255,255,255,.55);margin-bottom:12px}
.foot .lbl::before{display:none}
.foot ul a,.foot address a{display:inline-flex;align-items:center;min-height:44px;color:rgba(255,255,255,.86);transition:color .3s}
.foot ul a:hover,.foot address a:hover{color:var(--paper)}
.foot address{font-style:normal;color:rgba(255,255,255,.86);line-height:1.7}
.foot address a{min-height:44px;margin:-6px 0}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 24px;padding:18px 0;font-size:14px;color:rgba(255,255,255,.66)}
.foot-bottom ul{display:flex;gap:4px 22px;flex-wrap:wrap}
.foot-bottom a{display:inline-flex;align-items:center;min-height:44px;transition:color .3s}
.foot-bottom a:hover{color:var(--paper)}
.foot-giant{font:700 clamp(84px,18.2vw,270px)/.78 var(--display);text-transform:uppercase;color:rgba(255,255,255,.06);text-align:center;white-space:nowrap;margin:24px auto -.1em;max-width:none;user-select:none}

/* reveal */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.js .rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .anim,.pill,.hero-media>img{animation:none}
  .js .rv{opacity:1;transform:none;transition:none}
  .btn,.frame>img,.idx-title,.more span,.idx-more span,.scroll-cue span,.menu,.burger span{transition:none}
}

/* responsive */
@media (max-width:1080px){
  .nav-tel{display:none}
}
@media (max-width:600px){.nav-right .btn{display:inline-flex}.menu-btn .mlbl{display:none}.menu-foot{grid-template-columns:1fr 1fr}}
@media (max-width:960px){
  .svc-layout{grid-template-columns:1fr}
  .svc-photo{aspect-ratio:16/10;min-height:0}
  .svc-photo>img{object-position:50% 58%}
  .usps{grid-template-columns:1fr 1fr}
  .case-grid,.index-head,.how-grid,.about-grid,.cta-grid,.contact-grid{grid-template-columns:1fr}
  .how-sticky{position:static}
  .how-sticky .frame{aspect-ratio:16/10;max-width:none}
  .about-photos figure:nth-child(2){margin-top:40px}
  .cta-photo{max-width:none;justify-self:stretch;aspect-ratio:16/10}
  .cta-photo>img{object-position:50% 40%}
  .foot-grid{grid-template-columns:1fr 1fr}
  .idx-thumb{display:none}
}
@media (max-width:640px){
  :root{--r:20px}
  body{font-size:16px}
  .hero-inner{padding-top:120px}
  .hero-row{margin-top:26px}
  .hero-cta .btn{width:100%}
  .hero-cta{width:100%}
  .hero-foot{margin-top:32px}
  .hero-kicker{font-size:12px;letter-spacing:.12em}
  .hero-tags{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
  .hero-tags li+li::before{content:none}
  .scroll-cue{display:none}
  .usps{grid-template-columns:1fr;gap:12px}
  .svc-grid{grid-template-columns:1fr}
  .svc{padding:22px 0 30px}
  .case-grid{padding-bottom:calc(clamp(56px,7vw,96px) + 40px)}
  .strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-top:-40px;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);scrollbar-width:none;scroll-padding-inline:var(--gutter)}
  .strip::-webkit-scrollbar{display:none}
  .strip figure{flex:0 0 74%;scroll-snap-align:start}
  .idx-row>a{grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:6px 16px}
  .idx-title{grid-column:1;grid-row:1}
  .idx-cat{grid-column:1;grid-row:2}
  .idx-more{grid-column:2;grid-row:1/3;min-width:0}
  .step{grid-template-columns:56px 1fr;gap:14px;padding:24px 0 28px}
  .meta div,.details div{grid-template-columns:96px 1fr}
  .f-row{grid-template-columns:1fr}
  .form{padding:22px 18px 24px}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .about-photos figure:nth-child(2){margin-top:28px}
}
@media (max-width:400px){
  .hero-title{font-size:42px}
  .case-title{font-size:88px}
}

.btn .ic-pair{width:26px;height:21px;display:inline-block;flex:none;margin-right:3px}.btn .ic-pair svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* hero: no buttons, title centred on the floor */
.hero .hero-inner{justify-content:flex-end;align-items:center;text-align:center}
.hero .hero-title{margin:0 auto;max-width:22ch;text-wrap:balance}
.hero .hero-foot{width:100%;margin-top:clamp(28px,5vh,56px)}
@media(max-width:600px){.hero .hero-title{max-width:12ch}}

/* light menu + header phone icon + index link */
.menu-panel{background:#fff;color:var(--ink);box-shadow:0 40px 90px -40px rgba(23,25,22,.35)}
.menu-scrim{background:rgba(23,25,22,.22)}
html.menu-open .nav-wrap{color:var(--ink)}
.c-link[aria-expanded="true"],.c-link2[aria-expanded="true"],.c-link:hover,.c-link2:hover,.c-link3:hover,.m-link:hover{color:var(--accent)}
.nav-tel{display:inline-flex;align-items:center;gap:8px}.nav-tel svg{width:15px;height:15px;flex:none}
.idx-all{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font:600 12.5px/1 var(--body);letter-spacing:.15em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:8px;transition:color .25s,border-color .25s}
.idx-all svg{width:16px;height:16px}.idx-all:hover{color:var(--accent);border-color:var(--accent)}

/* menu: mos panel, white text */
.menu-panel{background:var(--accent);color:#fff}
.menu-panel .c-link,.menu-panel .c-link2,.menu-panel .c-link3,.menu-panel .m-link,.menu-panel .m-tog{color:rgba(255,255,255,.72)}.menu-panel .menu-side a,.menu-panel .menu-side span{color:rgba(255,255,255,.9)}
.menu-panel .menu-k{color:rgba(255,255,255,.6)}
.menu-panel .c-link[aria-expanded="true"],.menu-panel .c-link2[aria-expanded="true"],.menu-panel .c-link:hover,.menu-panel .c-link2:hover,.menu-panel .c-link3:hover,.menu-panel .m-link:hover,.menu-panel .c-all{color:#fff}
.menu-panel .m-link{border-color:rgba(255,255,255,.35)}
/* The panel scrolls its own content on a short screen, and a see-through bar let that content slide up
   behind the close button and the wordmark: the white call to action ended up under them, and a tap in
   the middle of it landed on the logo. The bar takes the panel's own colour, so whatever scrolls past
   it simply disappears instead of showing through. */
html.menu-open .nav-wrap{color:#fff;background:var(--accent)}
.menu-scrim{background:rgba(23,25,22,.35)}
/* werkwijze: icon row */
.how-title{text-align:center;margin:0 0 clamp(36px,5vw,64px)}
.how-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2.5vw,36px);position:relative}
.how-steps::before{content:"";position:absolute;left:10%;right:10%;top:44px;height:1px;background:var(--line-strong)}
.how-steps li{position:relative;text-align:center;padding:0 6px}
.how-ic{position:relative;width:88px;height:88px;border-radius:50%;background:#fff;border:1px solid var(--line-strong);display:grid;place-items:center;margin:0 auto 22px;color:var(--accent)}
.how-ic svg{width:36px;height:36px}
.how-ic b{position:absolute;right:-2px;top:-2px;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font:600 12px/28px var(--body);text-align:center}
.how-steps h3{margin:0;font:500 22px/1.05 var(--display);text-transform:uppercase}
.how-steps p{margin:10px auto 0;max-width:24ch;font-size:15px;line-height:1.45;color:var(--mute-2)}
@media(max-width:900px){.how-steps{grid-template-columns:repeat(2,1fr);gap:32px 20px}.how-steps::before{display:none}}
@media(max-width:520px){.how-steps{grid-template-columns:1fr}}

/* Lede: pinned photo, mos panel slides over it */
.case-sec{position:relative}
.case-hero{position:sticky;top:0;height:100vh;min-height:520px;z-index:1}
.case-panel{position:relative;z-index:2;border-radius:32px 32px 0 0;box-shadow:0 -24px 60px -30px rgba(23,25,22,.5)}
.case-grid{padding:clamp(64px,9vw,128px) 0 clamp(64px,9vw,128px);align-items:start}
.plane .meta div{border-color:rgba(255,255,255,.28)}.plane .meta dt{color:rgba(255,255,255,.65)}.plane .meta dd{color:#fff}
.case-quote{margin:0;font:500 clamp(30px,3.6vw,54px)/1.1 var(--display);text-transform:uppercase;letter-spacing:.005em;color:#fff;text-wrap:balance;max-width:22ch}

.case-quote .w{opacity:0;transition:opacity .5s linear}
.case-quote.apart .w{opacity:.26}
.case-quote .w.on,.case-quote.apart .w.on{opacity:1}

.case-quote.measuring .qm{transition:none}
@media(prefers-reduced-motion:reduce){.case-quote .w{opacity:1}.case-quote .qm{transform:none!important}}
.case-more{display:inline-flex;align-items:center;gap:14px;margin-top:46px;font:500 clamp(22px,2.1vw,32px)/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:#fff;text-decoration:none;border-bottom:1.5px solid rgba(255,255,255,.5);padding-bottom:12px;transition:gap .3s,border-color .3s}
.case-more svg{width:26px;height:26px}.case-more:hover{gap:16px;border-color:#fff}
@media(max-width:900px){.case-hero{height:100svh}.case-grid{grid-template-columns:1fr;gap:32px}}
/* werkwijze: steps appear one by one */
.how-steps.rv{opacity:1;transform:none}
.how-steps.rv::before{transform:scaleX(0);transform-origin:left center;transition:transform 1.6s var(--ease) .25s}
.how-steps.rv.in::before{transform:scaleX(1)}
.how-steps li.rv{transform:translateY(34px);transition-duration:1s;transition-delay:calc(var(--i,0)*.22s)}
.how-steps li.rv .how-ic{transform:scale(.6);transition:transform 1s var(--ease);transition-delay:calc(var(--i,0)*.22s + .1s)}
.how-steps li.rv.in .how-ic{transform:none}

/* carousel -> Lede: photo slides over the pinned dark panel, then the title appears */
@media(min-width:901px){
  .plan-sec{height:calc(260vh + 100vh)}
  .case-sec{margin-top:-100vh;z-index:3}
}
.case-hero-inner{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease) .15s,transform .9s var(--ease) .15s}
.case-hero.is-set .case-hero-inner{opacity:1;transform:none}
@media(max-width:900px){.case-hero-inner{opacity:1;transform:none}}

/* holds: carousel stays 100vh before Lede slides over; green sheet pauses before werkwijze */
@media(min-width:901px){
  .plan-sec{height:calc(260vh + 200vh)}
  .case-sec{min-height:calc(270vh + clamp(96px,17.5vw,250px))}
  .case-panel{position:sticky;top:0;min-height:100vh;display:flex;align-items:center}
  .case-panel>.wrap{width:min(100% - 2*var(--gutter),var(--max))}
  .case-panel .case-grid{padding:26px 0 30px;gap:26px}
  .how{height:220vh;padding-bottom:0;margin-bottom:calc(-1 * clamp(110px,17vh,190px))}
  .how-inner{position:sticky;top:0;min-height:100vh;display:flex;align-items:center}
  .how-inner>.wrap{width:min(100% - 2*var(--gutter),var(--max))}
}
.how-steps li{opacity:0;transform:translateY(36px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.how-steps li.in{opacity:1;transform:none}
.how-steps li .how-ic{transform:scale(.6);transition:transform .9s var(--ease) .1s}
.how-steps li.in .how-ic{transform:none}
.how-steps::before{transform:scaleX(var(--lp,0));transform-origin:left center;transition:transform .5s var(--ease)}
@media(max-width:900px){.how-steps li{transition-delay:calc(var(--i,0)*.22s)}}

/* Lede title rides with the green sheet: stuck at the bottom on the photo, pushed up by the sheet, pinned at the top */
.case-title-wrap{position:sticky;bottom:40px;z-index:4;width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:12px 24px;flex-wrap:wrap;color:#fff;pointer-events:none;opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease) .15s,transform .9s var(--ease) .15s}
.case-hero.is-set ~ .case-title-wrap{opacity:1;transform:none}
.case-title-wrap .case-title{margin:0;margin-left:-.04em}
.case-title-wrap .case-sub{padding-bottom:18px}


@media(max-width:760px){
  .nav-tel{width:42px;height:42px;border-radius:50%;border:1px solid currentColor;justify-content:center;gap:0}
  .nav-tel span{display:none}
  .nav-tel svg{width:17px;height:17px}
}

/* quote marks: start side by side, pull apart diagonally, then the words light up */
.case-quote .qm{display:inline-block;font-size:1.25em;opacity:.55;line-height:0;vertical-align:-.02em;transform:translate(var(--dx,0px),var(--dy,0px));transition:transform 1.15s var(--ease)}
.case-quote .qm.o{margin-left:-.39em;padding-right:.1em}
.case-quote .qm.c{margin-left:.04em;vertical-align:-.2em}
.case-quote.apart .qm{transform:none}

/* mobile: no scroll-drawn plan stage — one dark block with the faint plan behind the carousel */
@media(max-width:900px){
  .plan-sec{height:330svh}
  .plan-sticky{position:sticky;top:0;height:100svh;padding:0}
  .plan-bg{padding:0 12px;align-items:center}
  /* werkwijze: compact timeline instead of five full-height blocks */
  .how{height:220svh;padding:0}
  .how-inner{position:sticky;top:0;min-height:100svh;display:flex;align-items:center}
  .how-inner>.wrap{width:min(100% - 2*var(--gutter),var(--max))}
  .how-title{margin-bottom:clamp(24px,4vw,36px)}
  .how-steps{grid-template-columns:1fr;gap:0}
  .how-steps::before{display:block;left:31px;right:auto;top:24px;bottom:34px;width:1px;height:auto;transform:scaleY(var(--lp,0));transform-origin:top center;transition:transform 1.2s var(--ease)}
  .how-steps li{display:grid;grid-template-columns:62px 1fr;gap:2px 16px;text-align:left;padding:0 0 26px}
  .how-steps li .how-ic{width:62px;height:62px;margin:0;grid-row:1 / span 2;align-self:start}
  .how-steps li .how-ic svg{width:26px;height:26px}
  .how-steps li .how-ic b{width:22px;height:22px;font:600 10.5px/22px var(--body);right:-1px;top:-1px}
  .how-steps h3{font-size:19px;align-self:end}
  .how-steps p{margin:5px 0 0;max-width:none;font-size:14.5px;text-align:left}
  /* Lede: same choreography as desktop — photo pinned, green sheet slides over and pauses */
  .case-sec{min-height:300svh}
  .case-panel{position:sticky;top:0;min-height:100svh;display:flex;align-items:center}
  .case-panel>.wrap{width:min(100% - 2*var(--gutter),var(--max))}
  /* hero: shorter and cropped on the window wall */
  /* hero: full-bleed portrait photo of the same room */
  .hero{min-height:100svh;height:100svh}
  .hero-media>img{object-position:18% 52%}
  .hero .hero-inner{padding:110px 0 20px}
  .hero .hero-title{font-size:clamp(32px,8.8vw,46px)}
  /* header keeps the offerte/afspraak button; it steps aside while the menu is open (the menu has its own) */
  .nav-right .btn{display:inline-flex;padding:0 14px;font-size:0;gap:0;min-height:42px}
  .nav-right .btn .ic-pair{margin-right:0;width:28px;height:22px}
  html.menu-open .nav-right .btn{display:none}
}

/* menu: prominent call to action */
.menu-cta{display:none;align-items:center;justify-content:center;gap:12px;margin-top:26px;min-height:56px;padding:0 26px;border-radius:999px;background:#fff;color:var(--accent);font:600 16px/1 var(--body);text-decoration:none;transition:transform .4s var(--ease),background-color .3s}
.menu-cta .ic-pair{width:28px;height:22px;display:inline-block;flex:none}
.menu-cta .ic-pair svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.menu-cta:hover{transform:translateY(-2px)}
@media(max-width:900px){.menu-cta{display:flex;width:100%;margin-top:4px}}

/* diensten: the four icons spin into place */
.sv-tab .ic{transform-origin:50% 55%}
html.js .sv-tabs:not(.spun) .sv-tab .ic{opacity:0;transform:rotate(-150deg) scale(.5)}
html.js .sv-tabs:not(.spun) .sv-tab .t{opacity:0;transform:translateY(10px)}
.sv-tabs.spun .sv-tab .ic{opacity:1;transform:none;transition:opacity .5s var(--ease),transform 1.05s cubic-bezier(.22,1.2,.36,1);transition-delay:calc(var(--k)*.12s)}
.sv-tabs.spun .sv-tab .t{opacity:1;transform:none;transition:opacity .5s var(--ease) calc(var(--k)*.12s + .25s),transform .6s var(--ease) calc(var(--k)*.12s + .25s)}
@media(prefers-reduced-motion:reduce){html.js .sv-tabs:not(.spun) .sv-tab .ic,html.js .sv-tabs:not(.spun) .sv-tab .t{opacity:1;transform:none}}

/* language switcher */
.langs{display:inline-flex;align-items:center;gap:2px;margin-right:6px}
.langs .lang{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 6px;border-radius:999px;font:600 12px/1 var(--body);letter-spacing:.06em;color:inherit;opacity:.62;text-decoration:none;transition:opacity .25s,background-color .25s}
.langs .lang:hover{opacity:1}
.langs .lang.is-on{opacity:1;background:rgba(23,25,22,.08);pointer-events:none}
html:not(.nav-solid) .langs .lang.is-on{background:rgba(255,255,255,.22)}
html.menu-open .langs .lang.is-on{background:rgba(255,255,255,.22)}
@media(max-width:760px){.nav-right .langs{display:none}}
.menu-langs{display:flex;gap:6px;margin-bottom:18px}
.menu-langs .lang{min-width:44px;height:38px;border:1px solid rgba(255,255,255,.35);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font:600 13px/1 var(--body);color:rgba(255,255,255,.85);text-decoration:none}
.menu-langs .lang.is-on{background:#fff;color:var(--accent);border-color:#fff}

/* ---- mobile browser-bar safety: the section carries the panel colour so a growing
   viewport can never reveal a white strip under a 100svh sticky panel ---- */
.plan-sec{transition:background .5s ease}
.plan-sec.is-in{background:#3D4C38}
@media(max-width:900px){.case-sec{background:var(--accent)}}

/* ---- back to top: a control, not a sentence ---- */
.foot .to-top{flex:none;display:grid;place-items:center;width:46px;height:46px;min-height:0;padding:0;
  border-radius:50%;border:1px solid rgba(255,255,255,.3);color:rgba(255,255,255,.72);
  transition:color .3s,border-color .3s,transform .35s var(--ease)}
.foot .to-top svg{width:19px;height:19px;display:block}
.foot .to-top:hover{color:#fff;border-color:rgba(255,255,255,.62);transform:translateY(-3px)}

/* ---- footer on a phone: two link columns, one legal line, nothing floating loose ---- */
@media(max-width:640px){
  .foot{padding-top:48px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:22px 18px;padding-bottom:22px}
  .foot-brand{grid-column:1/-1}
  .foot-brand p{font-size:14.5px;max-width:34ch}
  .foot-grid>div:last-child{grid-column:1/-1}
  .foot .lbl{margin-bottom:0;font-size:11.5px}
  .foot ul a{min-height:34px;font-size:15px}
  .foot address{font-size:15px;line-height:1.8}
  .foot address a{min-height:36px;margin:-4px 0}
  .foot-bottom{display:grid;grid-template-columns:1fr auto;grid-template-areas:"c t" "l l";
    align-items:center;gap:0 16px;padding:12px 0 16px;font-size:12.5px}
  .foot-bottom>p{grid-area:c}
  .foot-bottom>ul{grid-area:l;gap:0 18px}
  .foot-bottom ul a{min-height:34px;font-size:12.5px}
  .foot .to-top{grid-area:t;justify-self:end;width:44px;height:44px}
  .foot-giant{font-size:19.5vw;margin-top:6px}
}

/* phone: one button opens a small card with the landline and the mobile number; the number never wraps */
.tel-wrap{position:relative;display:inline-flex}
button.nav-tel{border:0;margin:0;background:none;font-family:inherit;line-height:1;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.nav-tel .tel-chev{width:14px;height:14px;margin-left:-3px;opacity:.7;transition:transform .35s var(--ease)}
.tel-wrap.is-open .nav-tel{background:rgba(127,127,127,.16)}
.tel-wrap.is-open .tel-chev{transform:rotate(180deg)}
.tel-pop{position:absolute;top:calc(100% + 10px);right:0;z-index:2;min-width:252px;padding:6px;border-radius:18px;background:#fff;color:var(--ink);box-shadow:0 24px 50px -18px rgba(23,25,22,.42),0 0 0 1px rgba(23,25,22,.07);visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .25s var(--ease),transform .35s var(--ease),visibility 0s linear .35s}
.tel-wrap.is-open .tel-pop{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.tel-pop a{display:flex;align-items:baseline;justify-content:space-between;gap:22px;padding:14px 14px 13px;border-radius:12px;color:var(--ink);text-decoration:none;transition:background-color .2s}
.tel-pop a:hover,.tel-pop a:focus-visible{background:var(--accent-soft)}
.tel-pop .k{font:600 11.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.tel-pop .v{font:600 16px/1 var(--body);font-variant-numeric:tabular-nums;white-space:nowrap}
/* below 1280px the number next to the languages and the button pushed the wordmark off centre and
   broke over three lines; there the phone is a round icon, and the card shows both numbers */
@media (max-width:1279px){
  button.nav-tel{width:42px;height:42px;padding:0;border-radius:50%;border:1px solid currentColor;justify-content:center;gap:0}
  .nav-tel span,.nav-tel .tel-chev{display:none}
  .nav-tel svg{width:17px;height:17px}
}