/* ============================================================
   CRAFTERS B.V. — Design System
   Upgraded steel-blue / grey identity. Same DNA, sharper execution.
   ============================================================ */

/* ---- Tokens ---- */
:root{
  /* Brand blues */
  --blue-900:#0e1a2e;   /* footer / deep */
  --blue-800:#16243d;   /* logo navy — headings, brand */
  --blue-700:#1d5180;   /* primary CTA (from original) */
  --blue-600:#2a6494;
  --blue-500:#2f80c4;   /* brighter logo-blue accent */
  --blue-300:#8fb4d2;
  --blue-100:#dde9f3;

  /* Warm timber accent — pulled from the oak in Crafters' own project photos */
  --timber:#c0894f;
  --timber-700:#a06f3a;
  --timber-300:#e4c8a6;
  --timber-100:#f1e6d6;

  --ink:#172230;
  --ink-soft:#41505f;
  --muted:#6a7886;
  --line:#e1ddd5;       /* warm hairline */
  --line-soft:#ece8e0;

  --paper:#f4f2ec;      /* warm off-white page bg */
  --paper-2:#ebe7df;    /* alt section */
  --white:#ffffff;

  /* Accent (CTA) — warm, high-contrast primary action */
  --accent:#b3742f;
  --accent-ink:#ffffff;
  --accent-hover:#99611f;

  --shadow-sm:0 1px 2px rgba(15,48,80,.06), 0 2px 6px rgba(15,48,80,.05);
  --shadow:0 8px 24px rgba(15,48,80,.10);
  --shadow-lg:0 24px 60px rgba(15,48,80,.16);

  --radius:10px;
  --radius-lg:16px;
  --radius-sm:6px;

  --container:1280px;
  --gutter:clamp(20px,5vw,60px);

  --ff-head:"Poppins", system-ui, sans-serif;
  --ff-body:"Open Sans", system-ui, sans-serif;
  --ff-mono:"IBM Plex Mono", ui-monospace, monospace;

  --header-h:78px;
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--paper);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{font-family:var(--ff-head);margin:0;line-height:1.08;letter-spacing:-.01em;color:var(--ink);font-weight:700;}
p{margin:0;text-wrap:pretty;}
ul{margin:0;padding:0;list-style:none;}

/* ---- Layout helpers ---- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);width:100%;}
.section{padding-block:clamp(56px,8vw,108px);}
.section--tight{padding-block:clamp(40px,6vw,72px);}
.bg-paper2{background:var(--paper-2);}
.bg-white{background:var(--white);}
.center{text-align:center;}
.stack-sm{display:flex;flex-direction:column;gap:14px;}

/* Eyebrow / technical index label */
.kicker{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--ff-mono);font-weight:500;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--blue-700);
  margin-bottom:20px;
}
.kicker::before{content:attr(data-i);color:var(--timber);font-weight:600;letter-spacing:.05em;}
.kicker:not([data-i])::before{content:"";width:24px;height:1px;background:var(--timber);align-self:center;}
.kicker--center{justify-content:center;}
.kicker svg{width:16px;height:16px;flex-shrink:0;}
.kicker--light{color:rgba(255,255,255,.92);}
.kicker--light::before{color:var(--timber-300);}

/* Headings */
.h-display{font-size:clamp(2rem,4.2vw,3.35rem);font-weight:700;letter-spacing:-.025em;line-height:1.06;}
.h-section{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:700;letter-spacing:-.022em;line-height:1.08;color:var(--blue-800);}
.h-section--light{color:var(--white);}
.lead{font-size:clamp(1.02rem,1.35vw,1.16rem);color:var(--ink-soft);line-height:1.65;}

/* ---- Buttons ---- */
.btn{
  --b:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--ff-head);font-weight:600;font-size:1rem;
  padding:15px 28px;border-radius:11px;border:2px solid transparent;
  background:var(--b);color:var(--accent-ink);
  transition:transform .18s ease, box-shadow .25s ease, background .2s ease;
  box-shadow:0 6px 18px rgba(29,81,128,.28);
  line-height:1;white-space:nowrap;
}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 12px 26px rgba(29,81,128,.34);}
.btn:active{transform:translateY(0);}
.btn svg{width:19px;height:19px;}
.btn--ghost{background:transparent;color:var(--blue-800);border-color:var(--blue-300);box-shadow:none;}
.btn--ghost:hover{background:var(--blue-100);border-color:var(--blue-500);color:var(--blue-800);box-shadow:none;}
.btn--white{background:var(--white);color:var(--blue-800);box-shadow:0 8px 22px rgba(15,48,80,.18);}
.btn--white:hover{background:#f3f7fb;color:var(--blue-900);}
.btn--outline-white{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.55);box-shadow:none;}
.btn--outline-white:hover{background:rgba(255,255,255,.16);border-color:#fff;}
.btn--lg{padding:18px 34px;font-size:1.06rem;}
.btn--block{width:100%;}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;}

/* ============================================================
   HEADER
   ============================================================ */
.nav{display:flex;align-items:center;gap:6px;}
.nav__link{
  font-family:var(--ff-head);font-weight:500;font-size:.97rem;color:var(--ink-soft);
  padding:10px 14px;border-radius:9px;position:relative;transition:color .2s, background .2s;white-space:nowrap;
}
.nav__link:hover{background:rgba(29,81,128,.08);color:var(--blue-700);}
.nav__link.is-active{color:var(--blue-700);}
.nav__link.is-active::after{content:"";position:absolute;left:15px;right:15px;bottom:4px;height:2px;background:var(--blue-500);border-radius:2px;}
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line);
  transition:box-shadow .3s ease, height .3s ease;
}
.site-header.is-solid{box-shadow:0 1px 0 var(--line), 0 8px 26px rgba(15,48,80,.10);}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;}
.brand__mark{height:40px;width:auto;flex-shrink:0;display:block;}
.brand__wordmark{height:18px;width:auto;display:block;}
.site-footer .brand__mark{filter:brightness(0) invert(1);}
.site-footer .brand__wordmark{filter:brightness(0) invert(1);}

/* dropdown */
.nav__item{position:relative;}
.nav__panel{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px);
  background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(15,33,45,.13);
  padding:7px;width:248px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease;
}
.nav__panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px;}
.nav__item:hover .nav__panel,.nav__item:focus-within .nav__panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.nav__item:hover .nav__link .caret{transform:rotate(180deg);}
.nav__panel a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border-radius:8px;transition:background .14s,color .14s;}
.nav__panel a:hover{background:var(--paper);color:var(--blue-700);}
.nav__panel .ttl{font-family:var(--ff-head);font-weight:500;font-size:.96rem;color:var(--ink);transition:color .14s;}
.nav__panel a:hover .ttl{color:var(--blue-700);}
.nav__panel .go{width:16px;height:16px;color:var(--timber);opacity:0;transform:translateX(-4px);transition:opacity .14s,transform .14s;flex-shrink:0;}
.nav__panel a:hover .go{opacity:1;transform:translateX(0);}
.nav__link .caret{width:13px;height:13px;margin-left:5px;vertical-align:-1px;opacity:.65;transition:transform .2s ease;}
.nav__panel__all{justify-content:center !important;margin-top:5px;border-top:1px solid var(--line-soft);border-radius:0;font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted) !important;font-weight:500;}
.nav__panel__all .go{display:none;}
.nav__panel__all svg{width:15px;height:15px;flex-shrink:0;}
.nav__panel__all:hover{background:transparent !important;color:var(--blue-700) !important;}

.header-cta{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.header-phone{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-head);font-weight:600;font-size:.95rem;color:var(--blue-700);white-space:nowrap;}

.header-phone svg{width:17px;height:17px;}
.btn--header{padding:12px 22px;font-size:.95rem;}
.btn--mobcta{display:none;padding:11px 18px;font-size:.92rem;}

.burger{display:none;width:46px;height:46px;border:none;background:transparent;border-radius:10px;position:relative;}
.burger span{position:absolute;left:11px;right:11px;height:2.4px;background:var(--blue-800);border-radius:2px;transition:.25s;}
.burger span:nth-child(1){top:16px;}
.burger span:nth-child(2){top:22px;}
.burger span:nth-child(3){top:28px;}

/* mobile drawer */
.mnav{position:fixed;inset:0;z-index:80;visibility:hidden;}
.mnav__scrim{position:absolute;inset:0;background:rgba(15,33,45,.5);opacity:0;transition:opacity .3s;}
.mnav__panel{position:absolute;top:0;right:0;bottom:0;width:min(88vw,390px);background:var(--white);
  transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding:20px 22px calc(20px + env(safe-area-inset-bottom));overflow-y:auto;}
.mnav.open{visibility:visible;}
.mnav.open .mnav__scrim{opacity:1;}
.mnav.open .mnav__panel{transform:translateX(0);}
.mnav__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.mnav__close{width:44px;height:44px;border:1px solid var(--line);background:var(--white);border-radius:10px;font-size:1.5rem;color:var(--ink);display:grid;place-items:center;}
.mnav a.mlink{display:flex;align-items:center;justify-content:space-between;font-family:var(--ff-head);font-weight:600;font-size:1.12rem;padding:15px 4px;border-bottom:1px solid var(--line-soft);color:var(--ink);}
.mnav a.mlink::after{content:"";width:8px;height:8px;border-top:2px solid var(--blue-300);border-right:2px solid var(--blue-300);transform:rotate(45deg);flex-shrink:0;}
.mnav a.mlink.sub{font-weight:500;font-size:1rem;padding:12px 4px 12px 20px;color:var(--ink-soft);position:relative;}
.mnav a.mlink.sub::after{display:none;}
.mnav a.mlink.sub::before{content:"";position:absolute;left:5px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--timber);opacity:.7;}
.mnav a.mlink.is-active{color:var(--blue-700);}
.mnav__cta{margin-top:auto;padding-top:20px;display:flex;flex-direction:column;gap:12px;}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:clamp(540px,82vh,760px);display:flex;align-items:center;padding-top:var(--header-h);overflow:hidden;color:#fff;}
.hero__media{position:absolute;inset:0;z-index:0;}
.hero__media image-slot,.hero__media .ph-img{width:100%;height:100%;border-radius:0;}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(11,30,48,.84) 0%,rgba(13,38,60,.62) 45%,rgba(13,38,60,.18) 100%);z-index:1;pointer-events:none;}
.hero__inner{position:relative;z-index:2;width:100%;padding-block:clamp(28px,5vh,68px);}

/* Variant A — glass card (matches current site, refined) */
.hero-card{
  background:rgba(255,255,255,.93);backdrop-filter:blur(8px);
  border-radius:var(--radius-lg);padding:clamp(28px,4vw,52px);max-width:620px;
  box-shadow:var(--shadow-lg);
}
.hero-card .h-display{color:var(--blue-800);}
.hero-card .lead{color:var(--ink-soft);margin-top:18px;}
.hero-card .btn-row{margin-top:30px;}

/* Variant B — open text on image */
.hero-open{max-width:760px;}
.hero-open .h-display{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.3);}
.hero-open .lead{color:rgba(255,255,255,.92);margin-top:20px;max-width:600px;}
.hero-open .btn-row{margin-top:32px;}
.hero-usp{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px;}
.hero-usp li{display:flex;align-items:center;gap:9px;font-weight:600;font-family:var(--ff-head);font-size:.95rem;color:#fff;}
.hero-usp svg{width:20px;height:20px;color:var(--blue-300);flex-shrink:0;}

/* Variant C — split: text + inline offerte form */
.hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center;}
.hero-split .h-display{color:#fff;}
.hero-split .lead{color:rgba(255,255,255,.9);margin-top:18px;}
.hero-split__form{background:var(--white);border-radius:var(--radius-lg);padding:clamp(24px,3vw,38px);box-shadow:var(--shadow-lg);color:var(--ink);}

.hero-rating{display:flex;align-items:center;gap:12px;margin-top:26px;color:#fff;}
.hero-rating .stars{display:flex;gap:2px;color:#ffc24b;}
.hero-rating .stars svg{width:18px;height:18px;}
.hero-rating small{font-size:.9rem;color:rgba(255,255,255,.85);}
.hero-rating b{font-weight:700;}

/* hero variant visibility */
.hv{display:none;}
#heroHost[data-variant="a"] .hv--a{display:block;}
#heroHost[data-variant="b"] .hv--b{display:block;}
#heroHost[data-variant="c"] .hv--c{display:block;}

/* feature tiles overlapping hero */
.feature-tiles{position:relative;z-index:5;margin-top:-58px;}
.feature-tiles__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.ftile{background:var(--blue-700);color:#fff;border-radius:var(--radius);padding:24px 22px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow);transition:transform .2s, background .2s;}
.ftile:hover{transform:translateY(-4px);background:var(--blue-800);}
.ftile .ic{width:44px;height:44px;border-radius:11px;background:rgba(255,255,255,.14);display:grid;place-items:center;}
.ftile .ic svg{width:24px;height:24px;}
.ftile h3{font-size:1.08rem;font-weight:600;color:#fff;}
.ftile p{font-size:.88rem;color:rgba(255,255,255,.78);line-height:1.45;}

/* ============================================================
   ANGLED SECTIONS (signature divider)
   ============================================================ */
.angled{position:relative;background:var(--blue-700);color:#fff;
  clip-path:polygon(0 3.2vw,100% 0,100% calc(100% - 3.2vw),0 100%);
  margin-block:-1px;padding-block:clamp(80px,11vw,150px);}
.angled--solid{background:var(--blue-700);}
.angled__bg{position:absolute;inset:0;opacity:.10;z-index:0;}
.angled__bg img,.angled__bg .ph-img{width:100%;height:100%;object-fit:cover;}
.angled .container{position:relative;z-index:1;}

/* ============================================================
   SERVICES
   ============================================================ */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.svc-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--blue-800);color:#fff;min-height:340px;display:flex;align-items:flex-end;isolation:isolate;box-shadow:var(--shadow);}
.svc-card__media{position:absolute;inset:0;z-index:-2;}
.svc-card__media image-slot,.svc-card__media .ph-img{width:100%;height:100%;}
.svc-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(8,28,46,.92) 0%,rgba(10,32,52,.45) 55%,rgba(10,32,52,.12) 100%);transition:background .3s;}
.svc-card:hover::after{background:linear-gradient(to top,rgba(20,57,92,.95) 0%,rgba(20,57,92,.55) 60%,rgba(20,57,92,.2) 100%);}
.svc-card__body{padding:26px;position:relative;z-index:1;}
.svc-card h3{font-size:1.4rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.01em;}
.svc-card p{font-size:.92rem;color:rgba(255,255,255,.85);margin-top:8px;max-height:0;opacity:0;overflow:hidden;transition:max-height .35s ease,opacity .3s ease,margin .3s;}
.svc-card:hover p{max-height:120px;opacity:1;margin-top:10px;}
.svc-card__more{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-head);font-weight:600;font-size:.9rem;margin-top:16px;color:#fff;}
.svc-card__more svg{width:17px;height:17px;transition:transform .2s;}
.svc-card:hover .svc-card__more svg{transform:translateX(4px);}
.svc-card__tag{position:absolute;top:18px;left:18px;z-index:1;font-family:var(--ff-head);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);padding:7px 12px;border-radius:7px;}

/* ============================================================
   PHOTO + OFFSET BLUE PANEL (signature)
   ============================================================ */
.media-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;}
.media-split.reverse .media-split__media{order:-1;}
.framed{position:relative;}
.framed::before{content:"";position:absolute;inset:18px -18px -18px 18px;background:var(--blue-700);border-radius:var(--radius-lg);z-index:0;}
.framed__img{position:relative;z-index:1;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);}
.framed__img image-slot,.framed__img .ph-img{width:100%;height:100%;aspect-ratio:4/3;}

/* werkzaamheden bullet list */
.check-list{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;margin-top:22px;}
.check-list li{display:flex;gap:11px;align-items:flex-start;font-weight:500;}
.check-list li svg{width:22px;height:22px;color:var(--blue-600);flex-shrink:0;margin-top:1px;}

/* ============================================================
   WERKWIJZE (steps)
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step;}
.step{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;position:relative;transition:transform .2s,box-shadow .2s,border-color .2s;}
.step:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--blue-300);}
.step__num{font-family:var(--ff-head);font-weight:800;font-size:2.6rem;color:var(--blue-100);line-height:1;letter-spacing:-.03em;}
.step:hover .step__num{color:var(--blue-300);}
.step h3{font-size:1.12rem;font-weight:600;margin-top:10px;color:var(--blue-800);}
.step p{font-size:.92rem;color:var(--muted);margin-top:8px;}
.step__ic{position:absolute;top:26px;right:24px;width:40px;height:40px;border-radius:10px;background:var(--blue-100);display:grid;place-items:center;color:var(--blue-700);}
.step__ic svg{width:21px;height:21px;}

/* steps on dark */
.steps--dark .step{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);}
.steps--dark .step:hover{background:rgba(255,255,255,.1);box-shadow:none;}
.steps--dark .step__num{color:rgba(255,255,255,.22);}
.steps--dark .step:hover .step__num{color:var(--blue-300);}
.steps--dark .step h3{color:#fff;}
.steps--dark .step p{color:rgba(255,255,255,.72);}
.steps--dark .step__ic{background:rgba(255,255,255,.12);color:#fff;}

/* ============================================================
   STATS
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.stat{text-align:center;}
.stat__num{font-family:var(--ff-head);font-weight:800;font-size:clamp(2.2rem,5vw,3.4rem);color:var(--blue-700);line-height:1;letter-spacing:-.03em;}
.angled .stat__num{color:#fff;}
.stat__label{font-size:.95rem;color:var(--muted);margin-top:8px;font-weight:500;}
.angled .stat__label{color:rgba(255,255,255,.8);}

/* USP bar */
.usp-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.usp{background:var(--white);padding:22px 24px;display:flex;gap:14px;align-items:center;}
.usp .ic{width:42px;height:42px;border-radius:10px;background:var(--blue-100);color:var(--blue-700);display:grid;place-items:center;flex-shrink:0;}
.usp .ic svg{width:22px;height:22px;}
.usp b{display:block;font-family:var(--ff-head);font-weight:600;font-size:.98rem;color:var(--ink);}
.usp span{font-size:.84rem;color:var(--muted);}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.review{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-sm);}
.review .stars{display:flex;gap:2px;color:#ffb02e;}
.review .stars svg{width:18px;height:18px;}
.review p{color:var(--ink-soft);line-height:1.6;flex:1;}
.review__who{display:flex;align-items:center;gap:12px;}
.review__av{width:44px;height:44px;border-radius:50%;background:var(--blue-700);color:#fff;display:grid;place-items:center;font-family:var(--ff-head);font-weight:700;flex-shrink:0;}
.review__who b{font-family:var(--ff-head);font-weight:600;font-size:.95rem;}
.review__who span{font-size:.82rem;color:var(--muted);}

/* ============================================================
   PROJECTS GALLERY
   ============================================================ */
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.proj{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow-sm);background:var(--blue-100);}
.proj image-slot,.proj .ph-img{width:100%;height:100%;}
.proj__cap{position:absolute;left:0;right:0;bottom:0;padding:20px;background:linear-gradient(to top,rgba(8,28,46,.88),transparent);color:#fff;transform:translateY(8px);opacity:.92;transition:.25s;}
.proj:hover .proj__cap{transform:translateY(0);opacity:1;}
.proj__cap b{font-family:var(--ff-head);font-weight:600;font-size:1.05rem;display:block;}
.proj__cap span{font-size:.85rem;color:rgba(255,255,255,.82);}
.proj--wide{grid-column:span 2;}
.proj--tall{grid-row:span 2;aspect-ratio:auto;}

/* ============================================================
   FORM
   ============================================================ */
.form-head h3{font-size:1.5rem;font-weight:700;color:var(--blue-800);}
.form-head p{color:var(--muted);font-size:.95rem;margin-top:6px;}
.field{display:flex;flex-direction:column;gap:7px;margin-top:16px;}
.field label{font-family:var(--ff-head);font-weight:600;font-size:.85rem;color:var(--ink-soft);}
.field label .req{color:#c4543b;}
.field input,.field select,.field textarea{
  font-family:var(--ff-body);font-size:1rem;color:var(--ink);
  padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;background:var(--white);
  transition:border-color .2s, box-shadow .2s;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(58,120,173,.16);}
.field textarea{resize:vertical;min-height:104px;}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.field-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px;}
.chip{font-family:var(--ff-head);font-weight:500;font-size:.86rem;padding:9px 15px;border:1.5px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink-soft);transition:.18s;user-select:none;}
.chip:hover{border-color:var(--blue-300);}
.chip.on{background:var(--blue-700);color:#fff;border-color:var(--blue-700);}
.form-note{font-size:.8rem;color:var(--muted);margin-top:14px;display:flex;gap:8px;align-items:flex-start;}
.form-note svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--blue-500);}
.form-ok{display:none;text-align:center;padding:30px 10px;}
.form-ok.show{display:block;}
.form-ok .ic{width:64px;height:64px;border-radius:50%;background:#e6f4ec;color:#1f8a5b;display:grid;place-items:center;margin:0 auto 16px;}
.form-ok .ic svg{width:34px;height:34px;}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{background:var(--blue-700);border-radius:var(--radius-lg);padding:clamp(36px,5vw,60px);color:#fff;display:grid;grid-template-columns:1.4fr auto;gap:32px;align-items:center;position:relative;overflow:hidden;}
.cta-band__bg{position:absolute;inset:0;opacity:.12;}
.cta-band__bg .ph-img,.cta-band__bg img{width:100%;height:100%;object-fit:cover;}
.cta-band > *:not(.cta-band__bg){position:relative;z-index:1;}
.cta-band h2{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:800;text-transform:uppercase;color:#fff;line-height:1.05;}
.cta-band p{color:rgba(255,255,255,.88);margin-top:14px;max-width:560px;}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--blue-900);color:rgba(255,255,255,.75);padding-top:clamp(56px,7vw,84px);}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:48px;}
.footer-brand .brand__name{color:#fff;}
.footer-brand p{font-size:.92rem;margin-top:16px;max-width:300px;color:rgba(255,255,255,.6);}
.footer-col h4{font-family:var(--ff-head);font-weight:600;font-size:.95rem;color:#fff;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px;}
.footer-col a,.footer-col li{display:block;font-size:.94rem;padding:6px 0;color:rgba(255,255,255,.7);transition:color .15s;}
.footer-col a:hover{color:#fff;}
.footer-contact a{display:flex;gap:10px;align-items:center;}
.footer-contact svg{width:17px;height:17px;color:var(--blue-300);flex-shrink:0;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-block:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.85rem;color:rgba(255,255,255,.55);}
.footer-bottom a{color:rgba(255,255,255,.7);}

/* ============================================================
   STICKY MOBILE CTA BAR
   ============================================================ */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;grid-template-columns:repeat(3,1fr);gap:8px;padding:9px 12px calc(9px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);backdrop-filter:blur(10px);box-shadow:0 -4px 20px rgba(15,48,80,.12);border-top:1px solid var(--line);}
.mobile-bar .btn{flex-direction:column;gap:3px;padding:9px 6px;font-size:.76rem;border-radius:10px;box-shadow:none;border-width:1.5px;}
.mobile-bar .btn svg{width:20px;height:20px;}
.mobile-bar .mbar-wa{background:#25d366;border-color:#25d366;color:#fff;}
.mobile-bar .mbar-wa:hover{background:#1fb858;border-color:#1fb858;color:#fff;}

/* Floating offer pill (appears at 20% scroll) */
.offer-pill{position:fixed;right:24px;bottom:24px;z-index:54;display:flex;align-items:center;gap:6px;background:var(--white);border-radius:999px;padding:7px;box-shadow:0 14px 38px rgba(15,33,45,.22);opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .3s ease,transform .3s ease,visibility .3s;}
.offer-pill.show{opacity:1;visibility:visible;transform:translateY(0);}
.offer-pill__cta{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:#fff;font-family:var(--ff-head);font-weight:600;font-size:.96rem;padding:13px 22px;border-radius:999px;transition:background .2s;}
.offer-pill__cta:hover{background:var(--accent-hover);}
.offer-pill__cta svg{width:18px;height:18px;flex-shrink:0;}
.offer-pill__tel{display:inline-flex;align-items:center;gap:9px;color:var(--blue-800);font-family:var(--ff-head);font-weight:600;font-size:.96rem;padding:13px 20px 13px 14px;transition:color .2s;}
.offer-pill__tel:hover{color:var(--blue-700);}
.offer-pill__tel svg{width:17px;height:17px;color:var(--timber);flex-shrink:0;}
@media (max-width:920px){
  .offer-pill{display:none;}
}

/* ============================================================
   PAGE HEADER (inner pages)
   ============================================================ */
.page-hero{position:relative;padding-top:calc(var(--header-h) + clamp(56px,9vw,110px));padding-bottom:clamp(56px,9vw,110px);color:#fff;overflow:hidden;}
.page-hero__media{position:absolute;inset:0;z-index:0;}
.page-hero__media .ph-img,.page-hero__media image-slot{width:100%;height:100%;}
.page-hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(11,30,48,.9),rgba(13,38,60,.55));pointer-events:none;}
.page-hero .container{position:relative;z-index:1;}
.page-hero .h-display{color:#fff;max-width:720px;}
.page-hero .lead{color:rgba(255,255,255,.9);max-width:620px;margin-top:18px;}
.crumbs{display:flex;gap:8px;align-items:center;font-size:.85rem;color:rgba(255,255,255,.7);margin-bottom:20px;font-family:var(--ff-head);font-weight:500;}
.crumbs a:hover{color:#fff;}
.crumbs svg{width:14px;height:14px;opacity:.6;}

/* accordion */
.acc{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--white);}
.acc__item+.acc__item{border-top:1px solid var(--line);}
.acc__head{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;background:none;border:none;text-align:left;font-family:var(--ff-head);font-weight:600;font-size:1.05rem;color:var(--blue-800);}
.acc__head .pm{width:30px;height:30px;border-radius:8px;background:var(--blue-100);color:var(--blue-700);display:grid;place-items:center;flex-shrink:0;transition:.2s;font-size:1.2rem;}
.acc__item.open .acc__head .pm{background:var(--blue-700);color:#fff;transform:rotate(45deg);}
.acc__body{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.acc__body p{padding:0 22px 22px;color:var(--ink-soft);}

/* generic photo placeholder */
.ph-img{position:relative;overflow:hidden;background:
  linear-gradient(135deg,#c3ccd4 0%,#9aa8b5 55%,#7d8e9c 100%);}
.ph-img::after{content:attr(data-label);position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.78);font-family:var(--ff-head);font-weight:600;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;text-align:center;padding:16px;}
.ph-img::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 2px,transparent 2px 22px);}
.ph-img.blue{background:linear-gradient(135deg,#2a6494,#143a5c);}
.ph-img.dark{background:linear-gradient(120deg,#566472 0%,#3a4651 60%,#2b343d 100%);}
.ph-img.dark::after{color:rgba(255,255,255,.5);}

/* real images inside media containers */
.hero__media img,.page-hero__media img,.angled__bg img,.cta-band__bg img,
.svc-card__media img,.proj img,.map-ph img{width:100%;height:100%;object-fit:cover;display:block;}
.framed__img img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}

/* reveal: content is visible immediately (CRO — no hidden-until-scroll pop-in).
   Kept as a no-op class so existing markup/JS stays valid. */
.reveal,.reveal.d1,.reveal.d2,.reveal.d3{opacity:1;transform:none;transition:none;}

.section-head{max-width:680px;margin-bottom:clamp(36px,5vw,56px);}
.section-head.center{margin-inline:auto;}

/* ============================================================
   ELEVATION LAYER — bespoke editorial detailing
   ============================================================ */

/* technical mono utility label (used standalone, e.g. vertical tags) */
.tlabel{font-family:var(--ff-mono);font-weight:500;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);}

/* ghost section number + heading composition */
.section-head{position:relative;}
.section-head .h-section{position:relative;}
.idx-head{display:flex;align-items:baseline;gap:18px;}
.idx-head .idx{font-family:var(--ff-mono);font-weight:600;font-size:.78rem;letter-spacing:.1em;color:var(--timber);padding-top:.3em;white-space:nowrap;}
.idx-head .idx::before{content:"";display:inline-block;width:14px;height:1px;background:var(--timber);vertical-align:middle;margin-right:10px;margin-bottom:3px;}

/* hairline rule */
.hr{height:1px;background:var(--line);border:none;margin:0;}
.hr--soft{background:var(--line-soft);}

/* buttons: more confident, architectural */
.btn{border-radius:8px;box-shadow:0 1px 2px rgba(22,36,61,.16);font-weight:600;letter-spacing:.005em;}
.btn:hover{box-shadow:0 10px 22px rgba(22,36,61,.22);}
.btn--lg{padding:18px 32px;}
.btn--timber{--b:var(--timber);color:#231507;}
.btn--timber:hover{background:var(--timber-700);color:#fff;}

/* links inside body copy get a timber underline cue */
a.inline-link{color:var(--blue-700);text-decoration:underline;text-decoration-color:var(--timber-300);text-underline-offset:3px;text-decoration-thickness:2px;}
a.inline-link:hover{text-decoration-color:var(--timber);}

/* ---- HERO refinements: calmer, quieter backdrop ---- */
.hero__media img{filter:blur(2px) saturate(.88) brightness(.9);transform:scale(1.06);}
.hero__media::after{background:linear-gradient(96deg,rgba(11,21,37,.92) 0%,rgba(11,21,37,.78) 48%,rgba(11,21,37,.52) 100%);}
.hero__inner{padding-block:clamp(36px,6vh,80px) clamp(88px,11vh,142px);}
.hero .kicker{color:rgba(255,255,255,.88);}
.hero .kicker::before{color:var(--timber-300);}
.hero-card .kicker{color:var(--blue-700);}
.hero-card .kicker::before{color:var(--timber);}
.hero .h-display{max-width:22ch;font-size:clamp(2rem,3.9vw,3rem);line-height:1.08;}
.hero-split .lead{max-width:46ch;color:rgba(255,255,255,.86);}
.hero-rating .stars{color:var(--timber);}

/* hero owner chip (face above the fold) */
.hero-owner{display:flex;align-items:center;gap:14px;margin-top:30px;}
.hero-owner__img{width:58px;height:58px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.85);box-shadow:0 5px 16px rgba(0,0,0,.28);flex-shrink:0;background:var(--blue-800);}
.hero-owner__txt .stars{display:flex;gap:2px;color:var(--timber);}
.hero-owner__txt .stars svg{width:15px;height:15px;}
.hero-owner__txt small{display:block;color:rgba(255,255,255,.84);font-size:.85rem;margin-top:4px;max-width:40ch;}
.hero-owner__txt b{color:#fff;font-weight:700;}

/* ---- FEATURE / VALUE STRIP (floating band, clean icon row) ---- */
.feature-tiles{margin-top:clamp(-72px,-5vw,-52px);}
.feature-tiles__grid{grid-template-columns:repeat(4,1fr);gap:0;background:var(--blue-800);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 28px 60px rgba(14,26,46,.28);}
.ftile{background:transparent;border-radius:0;box-shadow:none;padding:32px 30px;gap:0;position:relative;display:block;}
.ftile + .ftile::before{content:"";position:absolute;left:0;top:30px;bottom:30px;width:1px;background:rgba(255,255,255,.12);}
.ftile:hover{background:rgba(255,255,255,.04);transform:none;}
.ftile .ftico{display:inline-flex;color:var(--timber);margin-bottom:18px;}
.ftile .ftico svg{width:30px;height:30px;}
.ftile h3{font-size:1.08rem;font-weight:600;color:#fff;letter-spacing:-.01em;margin-bottom:8px;}
.ftile p{font-size:.88rem;color:rgba(255,255,255,.7);line-height:1.55;}
.ftile .ic,.ftile .ftnum,.ftile .ftfig{display:none;}

/* ---- ANGLED: deeper, blueprint hairline texture ---- */
.angled{background:linear-gradient(160deg,var(--blue-800),var(--blue-900));}
.angled__bg{opacity:.14;}
.angled .kicker{color:rgba(255,255,255,.9);}
.angled .kicker::before{color:var(--timber-300);}

/* ---- SERVICES: index tag + sentence-case ---- */
.svc-card{border-radius:var(--radius-lg);}
.svc-card h3{text-transform:none;font-weight:600;letter-spacing:-.01em;font-size:1.45rem;}
.svc-card__tag{background:transparent;backdrop-filter:none;padding:0;top:22px;left:24px;font-family:var(--ff-mono);font-weight:600;font-size:.78rem;letter-spacing:.12em;color:var(--timber-300);text-transform:none;}
.svc-card__tag::before{content:"";display:inline-block;width:18px;height:1px;background:var(--timber-300);vertical-align:middle;margin-right:9px;margin-bottom:3px;}
.svc-card__more{color:var(--timber-300);}
.svc-grid--open .svc-card{min-height:300px;}
.svc-grid--open .svc-card p{max-height:140px;opacity:1;margin-top:10px;}
.svc-card--cta{background:linear-gradient(150deg,var(--blue-700),var(--blue-900));display:flex;align-items:center;}
.svc-card--cta::after{display:none;}
.svc-card--cta .svc-card__body{position:static;}
.svc-card--cta p{max-height:none;opacity:1;margin-top:10px;color:rgba(255,255,255,.82);}

/* ---- FRAMED PHOTO: timber offset + corner ticks ---- */
.framed::before{background:var(--blue-800);}
.framed.framed--timber::before{background:var(--timber);}
.framed__img{border-radius:var(--radius);}
.framed__tick{position:absolute;z-index:2;width:26px;height:26px;pointer-events:none;}
.framed__tick--tl{top:-9px;left:-9px;border-top:2px solid var(--timber);border-left:2px solid var(--timber);}
.framed__tick--br{right:-27px;bottom:-27px;border-bottom:2px solid var(--blue-800);border-right:2px solid var(--blue-800);}

/* ---- CHECK LIST: timber ticks ---- */
.check-list li{font-weight:500;color:var(--ink-soft);}
.check-list li svg{color:var(--timber);width:20px;height:20px;}

/* ---- STEPS: editorial ---- */
.step{border-radius:var(--radius);}
.step__num{font-family:var(--ff-mono);font-weight:600;font-size:1.05rem;letter-spacing:.06em;color:var(--timber);}
.step:hover .step__num{color:var(--timber);}
.step__bignum{position:absolute;top:18px;right:20px;font-family:var(--ff-head);font-weight:800;font-size:3.4rem;line-height:1;color:var(--line-soft);letter-spacing:-.04em;transition:color .2s;}
.step:hover .step__bignum{color:var(--timber-100);}
.step h3{margin-top:14px;font-size:1.16rem;}
.step__ic{display:none;}

/* ---- STATS: editorial, hairline-divided ---- */
.stats{gap:0;}
.stat{text-align:left;padding:6px 30px;border-left:1px solid var(--line);}
.stat:first-child{padding-left:0;border-left:none;}
.stat__num{font-family:var(--ff-head);font-weight:800;font-size:clamp(2.6rem,5.4vw,3.8rem);color:var(--blue-800);letter-spacing:-.04em;}
.stat__num .u{color:var(--timber);}
.stat__label{font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:12px;line-height:1.5;}
.angled .stat{border-left-color:rgba(255,255,255,.16);}
.angled .stat__num{color:#fff;}
.angled .stat__label{color:rgba(255,255,255,.7);}

/* ---- USP bar refinements ---- */
.usp-bar{border-radius:var(--radius);}
.usp .ic{background:var(--timber-100);color:var(--timber-700);}
.usp b{letter-spacing:-.01em;}

/* ---- REVIEWS: editorial cards with quote + google ---- */
.reviews-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,48px);}
.gscore{display:inline-flex;align-items:center;gap:12px;font-family:var(--ff-mono);font-size:.82rem;letter-spacing:.04em;color:var(--ink-soft);border:1px solid var(--line);background:var(--white);border-radius:999px;padding:9px 16px;}
.gscore svg{width:18px;height:18px;}
.gscore b{font-family:var(--ff-head);font-weight:700;color:var(--ink);}
.gscore .stars{display:inline-flex;gap:1px;color:var(--timber);}
.gscore .stars svg{width:14px;height:14px;}
.review{border-radius:var(--radius);padding:30px 30px 28px;position:relative;box-shadow:none;background:var(--white);border:1px solid var(--line);}
.review::before{content:"\201C";position:absolute;top:14px;right:24px;font-family:Georgia,serif;font-size:4.4rem;line-height:1;color:var(--timber-100);}
.review .stars{color:var(--timber);}
.review p{font-size:1.02rem;color:var(--ink);position:relative;z-index:1;}
.review__av{border-radius:8px;background:var(--blue-800);font-family:var(--ff-mono);font-weight:600;}

/* ---- PROJECTS: crisp tag + tick on hover ---- */
.proj{border-radius:var(--radius);}
.proj__cap b{font-weight:600;letter-spacing:-.01em;}
.proj__cap span{font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--timber-300);}

/* ---- FORM premium ---- */
.hero-split__form,.contact-card{border-radius:var(--radius-lg);}
.hero-split__form textarea{min-height:74px;}
.form-head h3{letter-spacing:-.015em;}
.form-head p{font-family:var(--ff-body);font-size:.92rem;letter-spacing:0;text-transform:none;color:var(--muted);}
.field label{font-family:var(--ff-mono);font-weight:500;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.field input,.field select,.field textarea{border-radius:8px;border-color:var(--line);background:#fbfaf7;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--timber);box-shadow:0 0 0 3px rgba(192,137,79,.18);background:#fff;}
.field input:user-invalid,.field select:user-invalid{border-color:#c4543b;box-shadow:0 0 0 3px rgba(196,84,59,.14);}
.chip{border-radius:8px;font-family:var(--ff-mono);font-size:.78rem;letter-spacing:.02em;}
.chip.on{background:var(--blue-800);border-color:var(--blue-800);}
.form-note{font-family:var(--ff-body);font-size:.8rem;letter-spacing:0;color:var(--muted);}
.form-note svg{color:var(--timber);}
.form-ok .ic{background:var(--timber-100);color:var(--timber-700);}
/* benefit clarifier under submit (CRO) */
.form-clarifier{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;margin-top:14px;}
.form-clarifier span{display:inline-flex;align-items:center;gap:7px;font-family:var(--ff-body);font-size:.82rem;color:var(--muted);}
.form-clarifier svg{width:15px;height:15px;color:var(--timber);flex-shrink:0;}

/* hero CTA buttons — only shown on mobile where the form sits below the fold */
.hero-cta-mobile{display:none;}

/* ---- CTA BAND ---- */
.cta-band{border-radius:var(--radius-lg);background:linear-gradient(150deg,var(--blue-800),var(--blue-900));}
.cta-bar{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;border-radius:var(--radius-lg);background:linear-gradient(120deg,var(--blue-800),var(--blue-900));color:#fff;padding:clamp(28px,3.2vw,42px) clamp(28px,4vw,52px);box-shadow:0 20px 50px rgba(14,26,46,.2);}
.cta-bar__bg{position:absolute;inset:0;opacity:.1;}
.cta-bar__bg img{width:100%;height:100%;object-fit:cover;}
.cta-bar>*:not(.cta-bar__bg){position:relative;z-index:1;}
.cta-bar__text{max-width:42ch;}
.cta-bar .cta-band__rule{margin-bottom:14px;}
.cta-bar h2{font-size:clamp(1.4rem,2.5vw,2rem);font-weight:700;letter-spacing:-.02em;color:#fff;line-height:1.08;text-transform:none;}
.cta-bar p{color:rgba(255,255,255,.8);margin-top:8px;font-size:.96rem;}
.cta-bar__actions{display:flex;gap:12px;flex-wrap:wrap;}
.cta-bar .cta-wa{background:#25d366 !important;color:#fff !important;border-color:#25d366 !important;}
.cta-bar .cta-wa:hover{background:#1fb858 !important;}
.cta-bar .cta-wa svg{width:20px;height:20px;}
@media (max-width:600px){.cta-bar__actions{width:100%;}.cta-bar__actions .btn{flex:1;}}

/* ---- BOTTOM FORM (slotformulier, split) ---- */
.bf-split{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 20px 50px rgba(14,26,46,.16);}
.bf-split__info{position:relative;background:linear-gradient(150deg,var(--blue-800),var(--blue-900));color:#fff;padding:clamp(30px,3.5vw,50px);}
.bf-split__info .h-section{color:#fff;font-size:clamp(1.5rem,2.6vw,2.05rem);}
.bf-split__info .lead{color:rgba(255,255,255,.84);margin-top:12px;}
.bf-trust{margin-top:24px;display:flex;flex-direction:column;gap:13px;}
.bf-trust li{display:flex;gap:12px;align-items:flex-start;color:rgba(255,255,255,.92);font-weight:500;}
.bf-trust svg{width:21px;height:21px;color:var(--timber);flex-shrink:0;margin-top:1px;}
.bf-contact{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);display:flex;flex-direction:column;gap:12px;}
.bf-contact a{display:flex;gap:11px;align-items:center;color:#fff;font-family:var(--ff-head);font-weight:600;}
.bf-contact a:hover{color:var(--timber-300);}
.bf-contact svg{width:18px;height:18px;color:var(--timber-300);flex-shrink:0;}
.bf-split__form{background:#fff;padding:clamp(26px,3.2vw,44px);}
@media (max-width:820px){.bf-split{grid-template-columns:1fr;}}
.cta-band h2{text-transform:none;font-weight:700;letter-spacing:-.025em;}
.cta-band__rule{display:inline-block;width:40px;height:2px;background:var(--timber);margin-bottom:22px;}

/* ---- accordion ---- */
.acc{border-radius:var(--radius);}
.acc__head{font-weight:600;}
.acc__head .pm{background:var(--timber-100);color:var(--timber-700);border-radius:7px;}
.acc__item.open .acc__head{color:var(--blue-800);}
.acc__item.open .acc__head .pm{background:var(--timber);color:#fff;}

/* ---- OWNER / PERSONAL block ---- */
.framed__img--portrait{aspect-ratio:4/5;background:var(--blue-100);}
.framed__img--portrait #owner-portrait{display:block;width:100%;height:100%;}
.framed__img--team{aspect-ratio:3/2;background:var(--blue-100);}
.framed__img--team img{width:100%;height:100%;object-fit:cover;display:block;}
.owner-sign{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line);}
.owner-sign .mark{width:46px;height:46px;border-radius:50%;background:var(--blue-800);color:#fff;display:grid;place-items:center;flex-shrink:0;}
.owner-sign .mark svg{width:24px;height:24px;}
.owner-sign b{font-family:var(--ff-head);font-weight:600;font-size:1rem;color:var(--ink);display:block;}
.owner-sign span{font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}

/* ---- FAQ (objection handling) ---- */
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,64px);align-items:start;}
.faq-wrap .section-head{margin-bottom:0;position:sticky;top:calc(var(--header-h) + 24px);}
.faq-wrap .acc{background:var(--white);}
@media (max-width:820px){
  .faq-wrap{grid-template-columns:1fr;gap:28px;}
  .faq-wrap .section-head{position:static;}
}

/* ============================================================
   DISTINCTIVE SECTIONS (v2 — less generic, more alive)
   ============================================================ */

/* --- Hero trust: two-part pill (owner + Google score) --- */
.hero-trust{display:inline-flex;align-items:stretch;margin-top:30px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:14px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow:hidden;max-width:100%;}
.hero-trust__owner{display:flex;align-items:center;gap:11px;padding:11px 15px;}
.hero-trust__owner img{width:42px;height:42px;border-radius:50%;border:2px solid rgba(255,255,255,.8);flex-shrink:0;background:var(--blue-800);object-fit:cover;}
.hero-trust__owner b{color:#fff;font-family:var(--ff-head);font-weight:600;font-size:.9rem;display:block;line-height:1.2;}
.hero-trust__owner span{color:rgba(255,255,255,.72);font-size:.76rem;}
.hero-trust__score{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:11px 17px;background:rgba(0,0,0,.16);border-left:1px solid rgba(255,255,255,.18);}
.hero-trust__score .g{display:flex;align-items:center;gap:8px;}
.hero-trust__score .g svg{width:16px;height:16px;}
.hero-trust__score .g b{color:#fff;font-family:var(--ff-head);font-weight:700;font-size:1rem;}
.hero-trust__score .stars{display:inline-flex;gap:1px;color:var(--timber);}
.hero-trust__score .stars svg{width:13px;height:13px;}
.hero-trust__score small{color:rgba(255,255,255,.72);font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;}

/* --- Services: interactive index list with hover preview --- */
.svc-list-wrap{display:grid;grid-template-columns:1fr 360px;gap:clamp(32px,5vw,64px);align-items:start;margin-top:8px;}
.svc-list{display:flex;flex-direction:column;}
.svc-row{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;padding:24px 6px;border-top:1px solid rgba(255,255,255,.16);color:#fff;position:relative;transition:padding .25s ease;}
.svc-list .svc-row:last-child{border-bottom:1px solid rgba(255,255,255,.16);}
.svc-row__idx{font-family:var(--ff-mono);font-size:.82rem;letter-spacing:.06em;color:var(--timber-300);transition:color .25s;}
.svc-row__main{min-width:0;}
.svc-row__name{display:block;font-family:var(--ff-head);font-weight:600;font-size:clamp(1.45rem,2.6vw,2.05rem);letter-spacing:-.015em;line-height:1.1;transition:transform .25s ease,color .25s ease;}
.svc-row__desc{display:block;color:rgba(255,255,255,.66);font-size:.92rem;margin-top:5px;transition:transform .25s ease;}
.svc-row__thumb{display:none;}
.svc-row__arrow{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.28);display:grid;place-items:center;flex-shrink:0;transition:.25s ease;}
.svc-row__arrow svg{width:19px;height:19px;transition:transform .25s ease;}
.svc-row::after{content:"";position:absolute;left:-6px;top:50%;transform:translateY(-50%);width:3px;height:0;background:var(--timber);border-radius:3px;transition:height .25s ease;}
.svc-row:hover,.svc-row.is-active{padding-left:22px;}
.svc-row:hover::after,.svc-row.is-active::after{height:62%;}
.svc-row:hover .svc-row__idx,.svc-row.is-active .svc-row__idx{color:var(--timber);}
.svc-row:hover .svc-row__name,.svc-row.is-active .svc-row__name{color:var(--timber-100);}
.svc-row:hover .svc-row__arrow{background:var(--timber);border-color:var(--timber);color:#2a1809;}
.svc-row:hover .svc-row__arrow svg{transform:translateX(2px);}
.svc-preview{position:sticky;top:104px;border-radius:18px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 30px 60px rgba(8,16,30,.45);background:var(--blue-900);}
.svc-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .5s ease,transform .7s ease;}
.svc-preview img.is-active{opacity:1;transform:scale(1);}
.svc-preview__tag{position:absolute;left:18px;bottom:18px;z-index:2;font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(8,16,30,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:8px 14px;border-radius:8px;}

/* --- Marquee facts band (replaces counting stats) --- */
.factband{background:var(--blue-800);color:#fff;overflow:hidden;padding:20px 0;border-block:1px solid rgba(255,255,255,.08);}
.factband__track{display:flex;align-items:center;gap:0;width:max-content;animation:factmarquee 34s linear infinite;}
.factband:hover .factband__track{animation-play-state:paused;}
.factband__item{display:inline-flex;align-items:center;gap:13px;padding:0 34px;font-family:var(--ff-head);font-weight:500;font-size:1.05rem;color:rgba(255,255,255,.9);white-space:nowrap;}
.factband__item .n{font-weight:700;color:var(--timber);font-size:1.18rem;letter-spacing:-.01em;}
.factband__item::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--timber);opacity:.55;margin-right:34px;flex-shrink:0;}
@keyframes factmarquee{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){
  .factband__track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:6px 0;}
}

/* --- Projects: horizontal scroll gallery --- */
.proj-scroller-wrap{position:relative;}
.proj-scroller{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 18px;scrollbar-width:thin;scrollbar-color:var(--timber) var(--line);}
.proj-scroller::-webkit-scrollbar{height:6px;}
.proj-scroller::-webkit-scrollbar-track{background:var(--line);border-radius:3px;}
.proj-scroller::-webkit-scrollbar-thumb{background:var(--timber);border-radius:3px;}
.proj-card{flex:0 0 clamp(248px,72vw,340px);scroll-snap-align:start;position:relative;border-radius:14px;overflow:hidden;aspect-ratio:3/4;box-shadow:var(--shadow-sm);background:var(--blue-100);}
.proj-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.proj-card:hover img{transform:scale(1.06);}
.proj-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,20,34,.82) 0%,rgba(8,20,34,.1) 50%,transparent 100%);}
.proj-card__cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:20px;color:#fff;}
.proj-card__cat{font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--timber-300);}
.proj-card__cap b{display:block;font-family:var(--ff-head);font-weight:600;font-size:1.12rem;margin-top:5px;}
.proj-card__cap span.loc{font-size:.85rem;color:rgba(255,255,255,.78);}
.proj-nav{position:absolute;top:-66px;right:0;display:flex;gap:10px;}
.proj-nav button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--white);color:var(--blue-800);display:grid;place-items:center;transition:.2s;}
.proj-nav button:hover{background:var(--blue-800);color:#fff;border-color:var(--blue-800);}
.proj-nav button svg{width:20px;height:20px;}
.proj-nav button:disabled{opacity:.35;cursor:default;}

/* --- Personal CTA (replaces generic slogan band) --- */
.cta-personal{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(150deg,var(--blue-800),var(--blue-900));color:#fff;padding:clamp(32px,4.5vw,56px);display:grid;grid-template-columns:1fr auto;gap:clamp(28px,3.5vw,52px);align-items:center;}
.cta-personal__bg{position:absolute;inset:0;opacity:.1;}
.cta-personal__bg img{width:100%;height:100%;object-fit:cover;}
.cta-personal > *:not(.cta-personal__bg){position:relative;z-index:1;}
.cta-personal__intro{display:flex;align-items:center;gap:clamp(20px,2.4vw,30px);}
.cta-personal__face{width:104px;height:104px;border-radius:50%;border:3px solid rgba(255,255,255,.18);object-fit:cover;background:var(--blue-900);flex-shrink:0;}
.cta-personal h2{font-family:var(--ff-head);font-weight:700;font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.02em;line-height:1.06;}
.cta-personal p{color:rgba(255,255,255,.82);margin-top:12px;max-width:46ch;}
.cta-personal__sign{display:block;margin-top:14px;font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--timber-300);}
.cta-personal__actions{display:flex;flex-direction:column;gap:12px;min-width:230px;}
.cta-wa{background:#25d366 !important;color:#fff !important;border-color:#25d366 !important;box-shadow:0 8px 22px rgba(7,94,84,.34) !important;}
.cta-wa:hover{background:#1fb858 !important;}
.cta-wa svg{width:20px;height:20px;}

/* ---- crumbs mono ---- */
.crumbs{font-family:var(--ff-mono);font-weight:500;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;}

/* ---- footer accents ---- */
.footer-col h4{font-family:var(--ff-mono);font-weight:500;font-size:.74rem;letter-spacing:.16em;color:var(--timber-300);}
.footer-contact svg{color:var(--timber-300);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* hide desktop nav earlier so it never cramps on mid widths */
@media (max-width:1024px){
  .nav,.header-phone,.btn--header{display:none;}
  .btn--mobcta{display:inline-flex;}
  .burger{display:block;}
}

@media (max-width:1080px){
  .svc-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
  .feature-tiles__grid{grid-template-columns:1fr 1fr;}
  .ftile:nth-child(3)::before,.ftile:nth-child(2)::before{}
  .ftile:nth-child(odd)::before{display:none;}
}
@media (max-width:920px){
  :root{--header-h:68px;}
  .nav,.header-phone,.btn--header{display:none;}
  .btn--mobcta{display:inline-flex;}
  .burger{display:block;}
  .hero-cta-mobile{display:flex;gap:12px;margin-top:28px;}
  .hero-cta-mobile .btn{flex:1;}
  .feature-tiles{margin-top:28px;}
  .feature-tiles__grid{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr);}
  .stats{grid-template-columns:repeat(2,1fr);gap:34px 0;}
  .stat{padding:0 26px;}
  .stat:nth-child(odd){padding-left:0;border-left:none;}
  .usp-bar{grid-template-columns:1fr 1fr;}
  .reviews{display:flex;grid-template-columns:none;overflow-x:auto;gap:14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:14px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scrollbar-width:none;}
  .reviews::-webkit-scrollbar{display:none;}
  .reviews .review{flex:0 0 85%;max-width:380px;scroll-snap-align:start;}
  .hero-split{grid-template-columns:1fr;}
  .hero-split__form{max-width:480px;}
  .media-split{grid-template-columns:1fr;gap:46px;}
  .media-split.reverse .media-split__media{order:0;}
  .framed::before{inset:14px -14px -14px 14px;}
  .cta-band{grid-template-columns:1fr;text-align:center;}
  .cta-band .btn-row{justify-content:center;}
  .header-cta{gap:10px;}
  .proj--wide,.proj--tall{grid-column:auto;grid-row:auto;aspect-ratio:4/3;}
}
@media (max-width:600px){
  body{font-size:16px;}
  .svc-grid{display:flex;overflow-x:auto;gap:14px;grid-template-columns:none;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:14px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scrollbar-width:none;}
  .svc-grid::-webkit-scrollbar{display:none;}
  .svc-grid .svc-card{flex:0 0 80%;max-width:360px;scroll-snap-align:start;min-height:300px;}
  .proj-grid{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .check-list{grid-template-columns:1fr;}
  .feature-tiles__grid{grid-template-columns:1fr 1fr;}
  .ftile{padding:22px 20px;}
  .ftile .ftico{margin-bottom:12px;}
  .ftile .ftico svg{width:26px;height:26px;}
  .ftile h3{font-size:1rem;}
  .ftile p{font-size:.83rem;}
  .ftile + .ftile::before{display:none;}
  .ftile:nth-child(odd){border-right:1px solid rgba(255,255,255,.12);}
  .ftile:nth-child(1),.ftile:nth-child(2){border-bottom:1px solid rgba(255,255,255,.12);}
  .stats{grid-template-columns:1fr;gap:0;}
  .stat{padding:22px 0;border-left:none;border-top:1px solid var(--line);}
  .stat:first-child{border-top:none;padding-top:0;}
  .angled .stat{border-top-color:rgba(255,255,255,.16);}
  .field--row{grid-template-columns:1fr;}
  .svc-card p{max-height:120px;opacity:1;margin-top:10px;}
  .hero{min-height:auto;}
  .framed__tick--br{right:-15px;bottom:-15px;}
}
@media (max-width:380px){
  .stats{grid-template-columns:1fr;}
  .brand__wordmark{display:none;}
  .btn--mobcta{padding:11px 14px;}
}

/* --- v2 distinctive components: responsive --- */
@media (max-width:920px){
  .svc-list-wrap{grid-template-columns:1fr;}
  .svc-preview{display:none;}
  .svc-row{grid-template-columns:auto 58px 1fr auto;gap:16px;padding:18px 4px;}
  .svc-row__thumb{display:block;width:58px;height:58px;border-radius:10px;overflow:hidden;flex-shrink:0;}
  .svc-row__thumb img{width:100%;height:100%;object-fit:cover;}
  .svc-row__name{font-size:1.3rem;}
  .svc-row__desc{display:none;}
  .svc-row__arrow{width:40px;height:40px;}
  .cta-personal{grid-template-columns:1fr;text-align:center;gap:24px;}
  .cta-personal__intro{flex-direction:column;text-align:center;gap:18px;}
  .cta-personal__face{margin:0 auto;}
  .cta-personal p{margin-inline:auto;}
  .cta-personal__actions{min-width:0;}
}
@media (max-width:520px){
  .hero-trust{flex-direction:column;width:100%;max-width:340px;}
  .hero-trust__owner{padding:13px 16px;}
  .hero-trust__score{border-left:none;border-top:1px solid rgba(255,255,255,.18);flex-direction:row;align-items:center;gap:10px;padding:12px 16px;}
  .hero-trust__score small{margin-left:auto;}
}