/* =====================================================================
   Optima Glazenwasserij — v3 "Professional"
   Clean corporate/business. Cool white + charcoal base, yellow accent.
   Sans only: Hanken Grotesk + IBM Plex Mono (technical labels).
   Structured, bordered, sharp. No serif, no rounded cards, no soft shadows.
   ===================================================================== */

:root{
  --paper:#ffffff;
  --paper-2:#F2F3F4;       /* cool light gray section */
  --paper-3:#E8EAEC;
  --ink:#1d1b18;           /* near-black text */
  --ink-2:#3b3833;
  --muted:#6b6f73;         /* cool gray secondary */
  --muted-2:#9a9da1;
  --char:#211e1b;          /* brand charcoal — dark bands/footer */
  --char-2:#2b2825;
  --char-3:#39352f;        /* hairline on dark */
  --yellow:#FAC90C;
  --yellow-2:#ffd633;
  --yellow-deep:#e0b200;
  --line:#E2E4E6;          /* cool hairline */
  --line-2:#D2D5D8;
  --white:#fff;

  --wrap:1280px;
  --pad:clamp(20px,4.5vw,52px);
  --sec:clamp(60px,8vw,116px);
  --ease:cubic-bezier(.4,.1,.2,1);

  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);
  font-size:clamp(15.5px,1vw,16.5px);line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none;padding:0}
h1,h2,h3,h4{font-family:var(--sans);font-weight:800;line-height:1.06;letter-spacing:-.022em;color:var(--ink)}
::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.ic{width:1.1em;height:1.1em;fill:none;flex:none}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.skip-link{position:fixed;left:14px;top:-60px;z-index:300;background:var(--ink);color:#fff;padding:10px 16px}
.skip-link:focus{top:14px}
.rule{height:1px;background:var(--line);border:0;width:100%}
.center{text-align:center}.mt-0{margin-top:0}
.stack-lg>*+*{margin-top:clamp(16px,2.4vw,26px)}

/* ---------- type helpers ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-weight:500;
  text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--muted)}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--yellow);flex:none}
.eyebrow--plain::before{display:none}
.eyebrow--light{color:#b9bcc0}
@media (max-width:560px){.eyebrow{letter-spacing:.07em;font-size:.66rem;gap:8px}.eyebrow::before{width:15px}}
.display{font-weight:800;letter-spacing:-.026em;line-height:1.04}
.h-xl{font-size:clamp(2.3rem,5.4vw,4.4rem)}
.h-lg{font-size:clamp(1.9rem,3.8vw,3.1rem)}
.h-md{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.lede{font-size:clamp(1.06rem,1.5vw,1.22rem);line-height:1.55;color:var(--ink-2);font-weight:400}
.muted{color:var(--muted)}
.measure{max-width:62ch}.measure-s{max-width:50ch}

/* ---------- buttons & links ---------- */
.btn{--bg:var(--yellow);--fg:var(--ink);--bd:var(--yellow);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  background:var(--bg);color:var(--fg);border:1.5px solid var(--bd);
  font-family:var(--sans);font-weight:700;font-size:.92rem;letter-spacing:.005em;
  padding:.92em 1.5em;border-radius:0;transition:background .25s var(--ease),color .25s,border-color .25s,transform .2s}
.btn .ic{width:1.05em;height:1.05em}
.btn .ic--arrow{transition:transform .25s var(--ease)}
.btn:hover .ic--arrow{transform:translateX(4px)}
.btn--primary:hover{--bg:var(--yellow-2)}
.btn--dark{--bg:var(--ink);--fg:#fff;--bd:var(--ink)}
.btn--dark:hover{--bg:#000;--bd:#000}
.btn--line{--bg:transparent;--fg:var(--ink);--bd:var(--line-2)}
.btn--line:hover{--bg:var(--ink);--fg:#fff;--bd:var(--ink)}
.btn--light{--bg:#fff;--fg:var(--ink);--bd:#fff}
.btn--light:hover{--bg:var(--yellow);--bd:var(--yellow)}
.btn--ghost-light{--bg:transparent;--fg:#fff;--bd:var(--char-3)}
.btn--ghost-light:hover{--bg:#fff;--fg:var(--ink);--bd:#fff}
.btn--block{display:flex;width:100%}
.btn--lg{padding:1.05em 1.8em;font-size:1rem}

.arrowlink{display:inline-flex;align-items:center;gap:.55em;font-family:var(--sans);font-weight:700;
  font-size:.92rem;color:var(--ink);position:relative;padding-bottom:3px}
.arrowlink::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--yellow);transform:scaleX(1);transform-origin:left;transition:transform .35s var(--ease)}
.arrowlink:hover::after{transform:scaleX(.4)}
.arrowlink .ic{width:1.05em;height:1.05em;transition:transform .25s var(--ease)}
.arrowlink:hover .ic{transform:translateX(4px)}
.arrowlink--light{color:#fff}

/* ---------- top utility bar ---------- */
.topbar{background:var(--char);color:#c7c2ba;font-family:var(--mono);font-size:.74rem;letter-spacing:.02em}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:40px}
.topbar__l{display:flex;gap:24px;align-items:center}
.topbar__l span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.topbar__r a{white-space:nowrap}
.topbar__l .ic{width:14px;height:14px;color:var(--yellow)}
.topbar__r{display:flex;gap:22px;align-items:center}
.topbar__r a{display:inline-flex;align-items:center;gap:7px;color:#d7d2ca;transition:color .2s}
.topbar__r a:hover{color:#fff}
.topbar__r .ic{width:14px;height:14px;color:var(--yellow)}
@media (max-width:1180px){.topbar__l span:nth-child(3){display:none}}
@media (max-width:860px){.topbar__l span:not(:first-child){display:none}}
@media (max-width:560px){.topbar__r a span{display:none}.topbar__l span{font-size:.68rem}}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.3) blur(8px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
.site-header.scrolled{box-shadow:0 1px 0 var(--line),0 10px 30px -22px rgba(0,0,0,.35)}
.hdr{display:flex;align-items:center;gap:26px;min-height:76px;transition:min-height .3s var(--ease)}
.site-header.scrolled .hdr{min-height:64px}
.brand{display:inline-flex;align-items:center;margin-right:auto}
.brand img{height:38px;width:auto;transition:height .3s var(--ease)}
.site-header.scrolled .brand img{height:33px}
.mainnav{display:flex;align-items:center;gap:28px}
.mainnav a{font-family:var(--sans);font-weight:600;font-size:.92rem;color:var(--ink-2);position:relative;padding:6px 0;transition:color .25s}
.mainnav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.mainnav a:hover{color:var(--ink)}
.mainnav a:hover::after,.mainnav a[aria-current="page"]::after{transform:scaleX(1)}
.mainnav a[aria-current="page"]{color:var(--ink)}
.hdr__cta{display:flex;align-items:center;gap:18px}
.hdr__phone{font-family:var(--sans);font-weight:700;font-size:.92rem;color:var(--ink);display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.hdr__phone .ic{width:30px;height:30px;padding:7px;background:var(--paper-2);color:var(--ink);border:1px solid var(--line)}
.menu-toggle{display:none;align-items:center;gap:10px;font-family:var(--sans);font-weight:700;font-size:.84rem;color:var(--ink)}
.menu-toggle .bars{display:inline-flex;flex-direction:column;gap:4px;width:22px}
.menu-toggle .bars span{height:2px;background:var(--ink);width:100%}
@media (max-width:1080px){.mainnav,.hdr__cta{display:none}.menu-toggle{display:inline-flex}}

/* ---------- overlay menu ---------- */
.overlay{position:fixed;inset:0;z-index:200;background:var(--char);color:#fff;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;display:flex;flex-direction:column}
.overlay.open{opacity:1;visibility:visible}
.overlay__top{display:flex;align-items:center;justify-content:space-between;min-height:76px;border-bottom:1px solid var(--char-3)}
.overlay__top img{height:32px}
.overlay__close{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:700;font-size:.84rem;color:#fff}
.overlay__close .ic{width:22px;height:22px}
.overlay__body{flex:1;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-content:center;padding-block:clamp(28px,6vw,64px);overflow-y:auto}
.overlay__nav{display:flex;flex-direction:column}
.overlay__nav a{font-weight:800;font-size:clamp(1.7rem,4.2vw,2.7rem);letter-spacing:-.02em;color:#fff;line-height:1.25;display:flex;align-items:baseline;gap:14px;transition:color .25s,padding .3s var(--ease)}
.overlay__nav a .num{font-family:var(--mono);font-size:.7rem;font-weight:500;color:var(--muted-2);transform:translateY(-.5em)}
.overlay__nav a:hover{color:var(--yellow);padding-left:12px}
.overlay__side{align-self:center;border-left:1px solid var(--char-3);padding-left:36px}
.overlay__side h4{font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--muted-2);margin-bottom:16px}
.overlay__side a,.overlay__side p{display:block;color:#d3cec6;padding:5px 0;font-size:1rem}
.overlay__side a:hover{color:var(--yellow)}
.overlay__sub{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:4px}
.overlay__sub a{font-size:.9rem;color:var(--muted-2)}
@media (max-width:760px){.overlay__body{grid-template-columns:1fr;gap:26px}.overlay__side{border-left:0;border-top:1px solid var(--char-3);padding-left:0;padding-top:24px}}

/* ---------- business hero ---------- */
.bhero{border-bottom:1px solid var(--line);background:
  linear-gradient(180deg,var(--paper),var(--paper))}
.bhero__in{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(28px,4vw,60px);align-items:stretch;padding-block:clamp(36px,5vw,72px)}
.bhero__text{align-self:center;min-width:0}
.bhero__media{min-width:0}
.bhero__title{font-size:clamp(1.92rem,4.8vw,3.9rem);font-weight:800;letter-spacing:-.03em;line-height:1.04;margin-top:24px}
.bhero__title .hl{color:var(--ink);position:relative;white-space:nowrap}
.bhero__title .hl::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.28em;background:var(--yellow);z-index:-1}
.bhero__lede{margin-top:22px;max-width:48ch;color:var(--ink-2);font-size:clamp(1.04rem,1.4vw,1.18rem)}
.bhero__usps{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin-top:26px}
.bhero__usps li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem}
.bhero__usps .ic{width:19px;height:19px;color:var(--ink);background:var(--yellow);padding:3px;flex:none}
.bhero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.bhero__trust{display:flex;flex-wrap:wrap;gap:14px 30px;margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.bhero__trust span{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);display:inline-flex;align-items:center;gap:9px}
.bhero__trust .ic{width:16px;height:16px;color:var(--ink)}
.bhero__media{position:relative;aspect-ratio:4/3;align-self:center}
.bhero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bhero__media::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:64px;background:var(--yellow)}
.bhero__badge{position:absolute;right:0;top:0;background:var(--char);color:#fff;padding:18px 22px;max-width:210px}
.bhero__badge b{display:block;font-size:1.7rem;font-weight:800;color:var(--yellow);line-height:1}
.bhero__badge span{display:block;font-size:.82rem;color:#c7c2ba;margin-top:6px}
@media (max-width:920px){
  .bhero__in{grid-template-columns:1fr;gap:30px}
  .bhero__media{aspect-ratio:16/10}
}
@media (max-width:520px){.bhero__usps{grid-template-columns:1fr}.bhero__title .hl{white-space:normal}.bhero__actions .btn{flex:1 1 auto}}

/* ---------- usp strip (under hero) ---------- */
.uspstrip{background:var(--char);color:#fff}
.uspstrip__in{display:grid;grid-template-columns:repeat(4,1fr)}
.uspstrip__i{display:flex;gap:14px;align-items:flex-start;padding:26px clamp(18px,2vw,30px);border-left:1px solid var(--char-3)}
.uspstrip__i:first-child{border-left:0}
.uspstrip__i .ic{width:26px;height:26px;color:var(--yellow);flex:none;margin-top:2px}
.uspstrip__i b{display:block;font-weight:700;font-size:1rem}
.uspstrip__i p{color:#b4afa6;font-size:.86rem;margin-top:3px;line-height:1.45}
@media (max-width:860px){.uspstrip__in{grid-template-columns:1fr 1fr}.uspstrip__i:nth-child(odd){border-left:0}.uspstrip__i:nth-child(n+3){border-top:1px solid var(--char-3)}}
@media (max-width:480px){.uspstrip__in{grid-template-columns:1fr}.uspstrip__i{border-left:0;border-top:1px solid var(--char-3)}.uspstrip__i:first-child{border-top:0}}

/* ---------- section scaffolding ---------- */
.section{padding-block:var(--sec)}
.section--tight{padding-block:clamp(40px,6vw,76px)}
section[id],main[id]{scroll-margin-top:92px}
.bg-2{background:var(--paper-2)}
.sec-head{max-width:760px}
.sec-head .eyebrow{margin-bottom:18px}
.sec-head--split{display:grid;grid-template-columns:1fr auto;gap:20px 50px;align-items:end;max-width:none}
@media (max-width:760px){.sec-head--split{grid-template-columns:1fr}}

/* ---------- service grid (bordered, professional) ---------- */
.svcgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.svc{background:var(--paper);padding:clamp(26px,2.6vw,36px);display:flex;flex-direction:column;min-height:230px;transition:background .25s}
.svc:hover{background:var(--paper-2)}
.svc__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.svc__num{font-family:var(--mono);font-size:.74rem;color:var(--muted);letter-spacing:.08em}
.svc__ic{width:30px;height:30px;color:var(--ink)}
.svc h3{font-size:1.32rem;margin-bottom:10px}
.svc p{color:var(--muted);font-size:.95rem;flex:1}
.svc__link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:700;font-size:.86rem;color:var(--ink)}
.svc__link .ic{width:16px;height:16px;color:var(--yellow-deep);transition:transform .25s var(--ease)}
.svc:hover .svc__link .ic{transform:translateX(4px)}
@media (max-width:900px){.svcgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.svcgrid{grid-template-columns:1fr}}

/* ---------- editorial service rows (diensten page) ---------- */
.srow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px);align-items:center;padding-block:clamp(34px,5vw,64px)}
.srow+.srow{border-top:1px solid var(--line)}
.srow__media{overflow:hidden;align-self:stretch;min-height:260px;position:relative}
.srow__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.srow:hover .srow__media img{transform:scale(1.04)}
.srow__num{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;color:var(--muted);margin-bottom:16px;display:block}
.srow h3{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:14px}
.srow p{color:var(--muted);max-width:46ch;margin-bottom:20px}
.srow__list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.srow__list li{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2);border:1px solid var(--line-2);padding:6px 11px}
.srow:nth-child(even) .srow__media{order:2}
@media (max-width:820px){.srow{grid-template-columns:1fr;gap:22px}.srow:nth-child(even) .srow__media{order:0}.srow__media{aspect-ratio:3/2;min-height:0}}

/* ---------- two-col / statement ---------- */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,70px);align-items:start}
@media (max-width:820px){.twocol{grid-template-columns:1fr;gap:24px}}
.statement{font-weight:800;font-size:clamp(1.5rem,2.9vw,2.3rem);line-height:1.18;letter-spacing:-.02em;color:var(--ink)}
.statement .hl{position:relative;white-space:nowrap}
.statement .hl::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.26em;background:var(--yellow);z-index:-1}

/* ---------- checklist ---------- */
.checklist{display:grid;gap:13px}
.checklist li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;padding-bottom:13px;border-bottom:1px solid var(--line)}
.checklist li .ic{width:20px;height:20px;color:var(--ink);background:var(--yellow);padding:3px;margin-top:3px}
.checklist li b{font-weight:700}
.checklist--light li{border-color:var(--char-3)}
.checklist--light li .ic{color:var(--ink)}

/* ---------- feature ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,70px);align-items:center}
.feature--reverse .feature__media{order:2}
.feature__media{position:relative;aspect-ratio:4/3;align-self:center;min-width:0}
.feature__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature__media--wide{aspect-ratio:16/10}
.feature p{color:var(--muted);margin-top:16px}
@media (max-width:860px){.feature{grid-template-columns:1fr;gap:24px}.feature--reverse .feature__media{order:0}.feature__media{aspect-ratio:4/3;min-height:0}}
.band .feature p{color:#b4afa6}

/* ---------- video band ---------- */
.videoband{background:var(--paper-2)}
.videoband__in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,64px);align-items:center}
.videoband__text .lede{margin-top:18px}
.videoplayer{position:relative;aspect-ratio:3/4;max-width:400px;width:100%;margin-inline:auto;overflow:hidden;background:var(--ink);min-width:0}
.videoplayer video{width:100%;height:100%;object-fit:cover;display:block}
.videoplayer::after{content:"";position:absolute;left:0;bottom:0;width:60px;height:60px;background:var(--yellow);pointer-events:none}
.videoplayer__tag{position:absolute;left:0;top:0;z-index:2;display:inline-flex;align-items:center;gap:8px;
  background:var(--ink);color:#fff;font-weight:700;font-size:.74rem;letter-spacing:.04em;padding:9px 14px;text-transform:uppercase}
.videoplayer__tag .dot{width:8px;height:8px;border-radius:50%;background:var(--yellow);animation:pulse 1.6s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.videoplayer__sound{position:absolute;right:12px;bottom:12px;z-index:2;width:42px;height:42px;display:grid;place-items:center;
  background:rgba(20,18,15,.62);color:#fff;backdrop-filter:blur(4px);transition:background .2s}
.videoplayer__sound:hover{background:var(--yellow);color:var(--ink)}
.videoplayer__sound .ic{width:20px;height:20px}
.videoplayer__sound .on{display:none}
.videoplayer.sound .videoplayer__sound .on{display:block}
.videoplayer.sound .videoplayer__sound .off{display:none}
@media (prefers-reduced-motion:reduce){.videoplayer__tag .dot{animation:none}}
@media (max-width:860px){.videoband__in{grid-template-columns:1fr;gap:26px}}

/* ---------- spec / stats ---------- */
.spec{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)}
.spec__item{padding:clamp(26px,3vw,40px) clamp(16px,2vw,28px);border-left:1px solid var(--line)}
.spec__item:first-child{border-left:0}
.spec__item b{display:block;font-size:clamp(2rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.spec__item span{display:block;margin-top:11px;font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.band .spec,.spec--dark{border-color:var(--char-3)}
.band .spec__item,.spec--dark .spec__item{border-color:var(--char-3)}
.band .spec__item b,.spec--dark .spec__item b{color:var(--yellow)}
.band .spec__item span,.spec--dark .spec__item span{color:#b4afa6}
@media (max-width:760px){.spec{grid-template-columns:1fr 1fr}.spec__item:nth-child(odd){border-left:0}.spec__item:nth-child(n+3){border-top:1px solid var(--line)}.band .spec__item:nth-child(n+3){border-top-color:var(--char-3)}}

/* ---------- dark band ---------- */
.band{background:var(--char);color:#fff}
.band .eyebrow{color:#b9bcc0}
.band h1,.band h2,.band h3{color:#fff}
.band .lede{color:#d2cec6}
.band p{color:#b4afa6}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.step{padding:clamp(24px,2.6vw,34px) clamp(16px,1.6vw,26px) clamp(24px,2.6vw,34px) 0;border-top:3px solid var(--ink)}
.step__n{font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.1em;color:var(--yellow-deep);display:block;margin-bottom:18px}
.step h3{font-size:1.2rem;margin-bottom:10px}
.step p{color:var(--muted);font-size:.94rem}
.steps--light .step{border-top-color:var(--yellow)}
.steps--light .step__n{color:var(--yellow)}
.steps--light .step h3{color:#fff}
.steps--light .step p{color:#b4afa6}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}

/* ---------- gallery ---------- */
.gallery{columns:3;column-gap:clamp(10px,1.2vw,16px)}
.gallery--2{columns:2}
.gal{display:block;width:100%;margin-bottom:clamp(10px,1.2vw,16px);padding:0;position:relative;break-inside:avoid;overflow:hidden;background:var(--paper-2)}
.gal img{width:100%;height:auto;transition:transform .8s var(--ease)}
.gal::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,18,16,.5),transparent 46%);opacity:0;transition:opacity .35s}
.gal:hover img{transform:scale(1.04)}
.gal:hover::after{opacity:1}
.gal__cap{position:absolute;left:14px;bottom:12px;z-index:2;color:#fff;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;opacity:0;transform:translateY(5px);transition:.35s var(--ease)}
.gal:hover .gal__cap{opacity:1;transform:none}
@media (max-width:1000px){.gallery{columns:2}}
@media (max-width:560px){.gallery,.gallery--2{columns:1}}

/* project strip */
.proj-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,16px)}
.proj-strip a{display:block;overflow:hidden;position:relative;aspect-ratio:1/1}
.proj-strip a img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.proj-strip a:hover img{transform:scale(1.05)}
@media (max-width:720px){.proj-strip{grid-template-columns:1fr 1fr}.proj-strip a:nth-child(3){display:none}}

.bigimg{width:100%;height:clamp(300px,42vw,560px);object-fit:cover}

/* ---------- before/after ---------- */
.ba-stack{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px)}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.6vw,18px)}
.ba figure{position:relative;margin:0;border:1px solid var(--line);background:var(--paper-2)}
.ba img{width:100%;height:100%;object-fit:cover;display:block}
.ba figcaption{position:absolute;top:12px;left:12px;background:var(--char);color:#fff;font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px}
.ba--na figcaption{background:var(--yellow);color:var(--ink)}
.videorow{margin-top:clamp(18px,2.4vw,28px);display:flex;justify-content:center}
.videorow video{width:100%;max-width:420px;border:1px solid var(--line);background:var(--ink);display:block}

/* why grid (service pages) */
.whygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--char-3);border:1px solid var(--char-3)}
.why{background:var(--char);padding:clamp(24px,2.6vw,34px)}
.why .n{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;color:var(--yellow);display:block;margin-bottom:16px}
.why h3{font-size:1.22rem;margin-bottom:10px;color:#fff}
.why p{color:#b4afa6;font-size:.93rem}
@media (max-width:820px){.whygrid{grid-template-columns:1fr}}

/* ---------- reviews ---------- */
.pquote{max-width:940px;margin-inline:auto;text-align:center}
.pquote__stars{display:inline-flex;gap:4px;color:var(--yellow);margin-bottom:24px}
.pquote__stars .ic{width:19px;height:19px;fill:var(--yellow)}
.pquote blockquote{font-weight:800;font-size:clamp(1.4rem,3vw,2.3rem);line-height:1.28;letter-spacing:-.02em;color:var(--ink)}
.pquote figcaption{margin-top:24px;font-family:var(--mono);font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.pquote figcaption b{color:var(--ink);font-weight:600}
.reviewgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.rev{background:var(--paper);padding:clamp(26px,3vw,42px)}
.rev .stars{display:flex;gap:3px;color:var(--yellow);margin-bottom:18px}
.rev .stars .ic{width:16px;height:16px;fill:var(--yellow)}
.rev blockquote{font-size:clamp(1.08rem,1.6vw,1.3rem);line-height:1.45;color:var(--ink-2);font-weight:500}
.rev figcaption{margin-top:20px;font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.rev figcaption b{color:var(--ink);font-weight:600}
@media (max-width:720px){.reviewgrid{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;text-align:left;padding:clamp(20px,2.6vw,28px) 0;font-weight:700;font-size:clamp(1.05rem,1.7vw,1.3rem);color:var(--ink);transition:color .25s}
.faq__q:hover{color:var(--yellow-deep)}
.faq__q .sign{position:relative;width:17px;height:17px;flex:none}
.faq__q .sign::before,.faq__q .sign::after{content:"";position:absolute;background:var(--ink);transition:transform .35s var(--ease)}
.faq__q .sign::before{left:0;top:7.5px;width:17px;height:2px}
.faq__q .sign::after{left:7.5px;top:0;width:2px;height:17px}
.faq__item.open .sign::after{transform:scaleY(0)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq__a-in{padding-bottom:clamp(20px,2.6vw,28px);color:var(--muted);max-width:70ch}
.faq__a-in p+p{margin-top:12px}

/* index list */
.indexlist{border-top:1px solid var(--line)}
.indexlist a{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;padding:clamp(18px,2.2vw,26px) 0;border-bottom:1px solid var(--line);transition:padding .3s var(--ease)}
.indexlist a:hover{padding-left:12px}
.indexlist .num{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;color:var(--muted)}
.indexlist .ttl{font-weight:800;font-size:clamp(1.3rem,2.2vw,1.8rem);letter-spacing:-.02em}
.indexlist .ic{width:22px;height:22px;color:var(--muted);transition:transform .3s var(--ease),color .25s}
.indexlist a:hover .ic{transform:translateX(6px);color:var(--ink)}

/* ---------- CTA ---------- */
.cta{background:var(--char);color:#fff;text-align:center}
.cta .eyebrow{justify-content:center;color:#b9bcc0;margin-bottom:22px}
.cta h2{color:#fff;font-size:clamp(1.9rem,4vw,3.2rem);max-width:18ch;margin-inline:auto}
.cta p{color:#b4afa6;margin:20px auto 0;max-width:50ch}
.cta__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:36px}

/* ---------- phero (interior) ---------- */
.phero{background:var(--paper-2);border-bottom:1px solid var(--line);padding-block:clamp(34px,5vw,62px)}
.phero__in{display:grid;grid-template-columns:1.1fr .9fr;gap:24px 60px;align-items:end}
.phero__crumb{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:22px;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.phero__crumb a:hover{color:var(--ink)}
.phero__crumb span{color:var(--line-2)}
.phero h1{font-size:clamp(2.1rem,4.6vw,3.7rem);letter-spacing:-.028em}
@media (max-width:820px){.phero__in{grid-template-columns:1fr;gap:18px}}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,4vw,70px);align-items:start}
.contact-list{margin-top:30px;border-top:1px solid var(--line)}
.contact-list li>*{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);transition:padding .25s var(--ease)}
.contact-list a:hover{padding-left:7px}
.contact-list .ic{width:34px;height:34px;padding:8px;background:var(--paper-2);border:1px solid var(--line);color:var(--ink);flex:none}
.contact-list b{display:block;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:500;margin-bottom:3px}
.contact-list span{font-weight:700;font-size:1.04rem;color:var(--ink)}
.cform{background:var(--paper-2);border:1px solid var(--line);padding:clamp(24px,3vw,40px)}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:block;margin-bottom:18px}
.field>span{display:block;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:8px}
.field i{color:var(--yellow-deep);font-style:normal}
.field input,.field select,.field textarea{width:100%;background:var(--paper);border:1px solid var(--line-2);padding:.78em .85em;border-radius:0;transition:border-color .2s,box-shadow .2s}
.field textarea{resize:vertical;min-height:96px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 2px rgba(29,27,24,.08)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6f73' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8em center}
.field__opt{font-style:normal;text-transform:none;letter-spacing:.02em;color:var(--muted-2)}
.filedrop{display:flex;align-items:center;gap:14px;width:100%;background:var(--paper);border:1px dashed var(--line-2);padding:16px 18px;cursor:pointer;transition:border-color .2s,background .2s}
.filedrop:hover,.filedrop:focus-visible,.filedrop.drag{border-color:var(--ink)}
.filedrop.drag{background:var(--paper-3)}
.filedrop__ic{width:26px;height:26px;color:var(--yellow-deep)}
.filedrop__txt b{display:block;font-weight:600;font-size:.92rem}
.filedrop__txt small{display:block;color:var(--muted);font-size:.78rem;margin-top:2px;line-height:1.45}
.filelist{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.filelist li{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--paper);padding:8px 12px;font-size:.85rem}
.filelist .fn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filelist .fs{font-family:var(--mono);font-size:.72rem;color:var(--muted);flex:none}
.filelist button{padding:4px;line-height:0;color:var(--muted)}
.filelist button:hover{color:#a83523}
.filelist button .ic{width:13px;height:13px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cform__note{font-size:.78rem;color:var(--muted);margin-top:12px}
.cform__msg{margin-top:16px;padding:14px 16px;font-size:.92rem;border:1px solid}
.cform__msg.ok{background:#eef7f0;color:#2f6b3f;border-color:#bcdcc6}
.cform__msg.err{background:#fcefec;color:#a83523;border-color:#e7c3bb}
.cform.sending button[type=submit]{opacity:.55;pointer-events:none}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:440px){.cform__row{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.site-footer{background:var(--char);color:#aaa49a}
.footer-cta{border-bottom:1px solid var(--char-3);padding-block:clamp(48px,6vw,84px)}
.footer-cta__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.footer-cta h2{color:#fff;font-size:clamp(1.8rem,3.6vw,2.9rem);max-width:18ch}
.foot-main{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:34px;padding-block:clamp(46px,5vw,72px)}
.foot-brand img{height:36px;margin-bottom:20px}
.foot-brand p{max-width:32ch;font-size:.94rem;color:#9a948a}
.foot-brand .foot-social{display:inline-grid;place-items:center;width:42px;height:42px;border:1px solid var(--char-3);color:#fff;margin-top:20px;transition:.25s}
.foot-brand .foot-social:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.foot-col h4{color:#fff;font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;margin-bottom:16px}
.foot-col a,.foot-col p{display:flex;align-items:center;gap:9px;color:#9a948a;padding:5px 0;font-size:.93rem;transition:color .25s}
.foot-col a:hover{color:var(--yellow)}
.foot-col .ic{width:15px;height:15px;color:var(--muted-2);flex:none}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-block:22px;border-top:1px solid var(--char-3);font-family:var(--mono);font-size:.76rem;color:#7c766c}
@media (max-width:860px){.foot-main{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-main{grid-template-columns:1fr}}

/* ---------- mobile action bar ---------- */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;grid-template-columns:1fr 1fr 1fr;background:var(--char);border-top:1px solid var(--char-3)}
.actionbar a{display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;padding:14px 6px;font-weight:700;font-size:.82rem;border-left:1px solid var(--char-3)}
.actionbar a:first-child{border-left:0}
.actionbar .ic{width:17px;height:17px;color:var(--yellow)}
.actionbar__cta{background:var(--yellow);color:var(--ink)!important}
.actionbar__cta .ic{color:var(--ink)}
@media (max-width:1080px){.actionbar{display:grid}body{padding-bottom:52px}}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:250;display:flex;align-items:center;justify-content:center;background:rgba(20,18,15,.95);padding:24px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(1100px,94vw);max-height:88vh;object-fit:contain}
.lightbox__btn{position:absolute;display:grid;place-items:center;width:50px;height:50px;color:#fff;border:1px solid var(--char-3)}
.lightbox__btn:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.lightbox__btn .ic{width:24px;height:24px}
.lb-close{top:22px;right:22px}
.lb-prev{left:20px;top:50%;transform:translateY(-50%)}
.lb-next{right:20px;top:50%;transform:translateY(-50%)}
@media (max-width:600px){.lightbox__btn{width:44px;height:44px}.lb-prev{left:8px}.lb-next{right:8px}}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.07s}.reveal-d2{transition-delay:.14s}.reveal-d3{transition-delay:.21s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}*{scroll-behavior:auto!important}}
body.no-scroll{overflow:hidden}