/* Flo-Rent Verhuizingen — AP Digital, redesign 2026
   Design tokens exact overgenomen uit het prototype. */
:root{
  --sand:#F7F4EF;      /* frame achtergrond */
  --sand-2:#EFE9DF;    /* alternerende sectie */
  --page:#E7E1D7;      /* body buiten het frame */
  --ink:#17150F;
  --muted:#6E675C;
  --acc:#C8441C;
  --border:#E4DED3;
  --border-2:#EFE9DF;
  --teal:#123C46;
  --teal-txt:#BFD3D6;
  --teal-border:#2A5761;
  --foot-txt:#B8B1A4;
  --foot-muted:#6E675C;
  --foot-line:#332F26;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:Archivo,system-ui,-apple-system,Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--acc);text-decoration:none;}
a:hover{color:var(--ink);}
img{max-width:100%;display:block;}
input,select,textarea,button{font-family:inherit;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acc);outline-offset:1px;}
h1,h2,h3,p{margin:0;}

/* ---- Frame ---- */
.frame{
  width:100%;max-width:1440px;margin:0 auto;background:var(--sand);color:var(--ink);
  box-shadow:0 30px 80px rgba(23,21,15,0.18);overflow:hidden;
}
.wrap{padding-left:clamp(20px,4vw,64px);padding-right:clamp(20px,4vw,64px);}

/* ---- Header ---- */
.hdr{position:sticky;top:0;z-index:30;background:rgba(247,244,239,0.92);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px clamp(14px,4vw,48px);}
.brand{display:flex;align-items:center;gap:8px;border:0;background:none;padding:0;cursor:pointer;
  flex-shrink:0;white-space:nowrap;}
.brand img{display:block;height:clamp(38px,4.6vw,46px);width:auto;}
.brand .b1{font-size:clamp(17px,2vw,20px);font-weight:800;letter-spacing:-0.04em;color:var(--ink);}
.brand .b2{font-family:'Instrument Serif',serif;font-style:italic;font-size:15px;color:var(--acc);}
.nav{display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(10px,1.6vw,22px);min-width:0;}
.nav a{border:0;background:none;padding:6px 0;font-size:14px;font-weight:600;letter-spacing:-0.01em;
  cursor:pointer;white-space:nowrap;color:var(--muted);border-bottom:2px solid transparent;}
.nav a:hover{color:var(--ink);}
.nav a.active{color:var(--ink);border-bottom-color:var(--acc);}
.hdr-right{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.hdr-tel{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;}
.hdr-tel:hover{color:var(--acc);}
.btn{border:0;border-radius:999px;cursor:pointer;font-weight:700;display:inline-block;
  text-align:center;transition:background .15s,color .15s;}
.btn-acc{background:var(--acc);color:#fff;}
.btn-acc:hover{background:var(--ink);color:#fff;}
.btn-line{border:1px solid var(--ink);background:none;color:var(--ink);font-weight:600;}
.btn-line:hover{background:var(--ink);color:var(--sand);}
.cta-sm{padding:10px 16px;font-size:14px;}
.cta-lg{padding:16px 28px;font-size:16px;}
.cta-md{padding:15px 26px;font-size:15.5px;}
.hamb{display:none;flex-direction:column;justify-content:center;gap:4px;width:44px;height:44px;
  padding:0 11px;border:1px solid var(--border);border-radius:12px;background:#fff;cursor:pointer;flex-shrink:0;}
.hamb span{display:block;height:2px;width:100%;background:var(--ink);}
.mnav{display:none;flex-direction:column;gap:2px;padding:8px 14px 16px;border-top:1px solid var(--border);background:var(--sand);}
.mnav a{text-align:left;border:0;background:none;padding:14px 6px;font-size:16px;font-weight:600;cursor:pointer;
  border-bottom:1px solid var(--border-2);color:var(--muted);}
.mnav a.active{color:var(--ink);}
.mnav .m-tel{color:var(--ink);font-weight:700;border-bottom:0;}

/* ---- Sections ---- */
section{padding-top:clamp(36px,5vw,72px);padding-bottom:clamp(28px,4vw,56px);}
.sec-tight{padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(28px,4vw,56px);}
.sec-alt{background:var(--sand-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.sec-dark{background:var(--teal);color:var(--sand);}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--acc);}
.h1{font-size:clamp(34px,4.8vw,58px);line-height:1;letter-spacing:-0.04em;font-weight:800;text-wrap:balance;}
.h1-home{font-size:clamp(38px,5.6vw,68px);line-height:0.98;letter-spacing:-0.04em;font-weight:800;text-wrap:balance;}
.h2{font-size:clamp(28px,3.4vw,42px);letter-spacing:-0.035em;font-weight:800;}
.serif{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;letter-spacing:-0.02em;}
.lead{font-size:clamp(16px,1.6vw,19px);line-height:1.55;color:var(--muted);max-width:52ch;text-wrap:pretty;}
.p-mut{color:var(--muted);line-height:1.6;}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px;margin-bottom:30px;}
.link-acc{border:0;background:none;color:var(--acc);font-size:15px;font-weight:700;cursor:pointer;padding:0;}
.link-acc:hover{color:var(--ink);}

/* ---- Grids ---- */
.grid{display:grid;gap:16px;}
.g-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(24px,4vw,56px);align-items:center;}
.g-cards{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.g-cards-wide{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.g-steps{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:28px;}

/* ---- Media / photo slots ---- */
.shot{position:relative;width:100%;border-radius:18px;overflow:hidden;background:var(--sand-2);}
.shot img{width:100%;height:100%;object-fit:cover;}
.shot.r20{border-radius:20px;}
.ar-4-5{aspect-ratio:4/5;min-height:320px;}
.ar-3-2{aspect-ratio:3/2;min-height:250px;}
.ar-1-1{aspect-ratio:1/1;min-height:280px;}
.ph{display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;
  background:linear-gradient(135deg,#EFE9DF,#E4DED3);color:var(--muted);font-size:14px;font-weight:600;
  border:1px solid var(--border);}
.ph-dark{background:var(--ink);color:var(--sand);}
.badge-quote{position:absolute;left:8px;right:8px;bottom:18px;background:#fff;border:1px solid var(--border);
  border-radius:14px;padding:14px 18px;box-shadow:0 14px 40px rgba(23,21,15,0.14);max-width:250px;}
.badge-quote p{font-size:14px;line-height:1.45;font-weight:600;margin-bottom:6px;}
.badge-quote span{font-size:12px;color:var(--muted);}

/* ---- Chips / pills ---- */
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--sand-2);border:1px solid var(--border);
  border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:600;color:var(--muted);}
.pills{display:flex;flex-wrap:wrap;gap:8px;}

/* ---- Cards ---- */
.card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px;
  display:flex;flex-direction:column;gap:10px;}
.card-btn{text-align:left;cursor:pointer;transition:border-color .15s;}
.card-btn:hover{border-color:var(--ink);}
.card .tag{font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--acc);}
.card .tag-mut{color:var(--muted);}
.card .ct{font-size:21px;font-weight:700;letter-spacing:-0.025em;}
.card .cb{font-size:14.5px;line-height:1.5;color:var(--muted);}

/* stat row */
.stats{display:flex;flex-wrap:wrap;gap:22px;padding-top:14px;border-top:1px solid var(--border);margin-top:8px;}
.stat{display:flex;flex-direction:column;gap:2px;}
.stat b{font-size:19px;font-weight:800;letter-spacing:-0.02em;}
.stat span{font-size:13px;color:var(--muted);}

/* steps */
.step{display:flex;flex-direction:column;gap:10px;border-top:2px solid var(--ink);padding-top:16px;}
.step .num{font-family:'Instrument Serif',serif;font-size:40px;line-height:1;color:var(--acc);}
.step h3{font-size:20px;font-weight:700;letter-spacing:-0.02em;}
.step p{font-size:15px;line-height:1.55;color:var(--muted);}

/* teal proof cards */
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.proof div{border:1px solid var(--teal-border);border-radius:14px;padding:18px;}
.proof p:first-child{font-size:15px;font-weight:700;}
.proof p:last-child{margin-top:6px;font-size:13.5px;color:var(--teal-txt);}

/* checklist */
.chk{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;
  border-top:1px solid var(--border);padding-top:14px;}
.chk li{display:flex;gap:9px;font-size:14.5px;line-height:1.45;}
.chk li::before{content:"✓";color:var(--acc);font-weight:800;}

/* borderless top-list (zakelijk) */
.tlist{border-top:2px solid var(--ink);padding-top:16px;display:flex;flex-direction:column;gap:8px;}
.tlist h3{font-size:19px;font-weight:700;letter-spacing:-0.02em;}
.tlist p{font-size:15px;line-height:1.55;color:var(--muted);}

/* diensten media cards */
.mcard{background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;}
.mcard .mimg{height:170px;width:100%;}
.mcard .mimg img{width:100%;height:100%;object-fit:cover;}
.mcard .mbody{padding:22px;display:flex;flex-direction:column;gap:9px;flex:1;}
.mcard h3{font-size:20px;font-weight:700;letter-spacing:-0.025em;}
.mcard p{font-size:15px;line-height:1.55;color:var(--muted);}
.mcard .mprijs{font-size:14px;font-weight:700;color:var(--acc);margin-top:auto;padding-top:10px;}

/* reviews */
.figc{margin:0;background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px;
  display:flex;flex-direction:column;gap:12px;}
.figc .rtop{display:flex;justify-content:space-between;align-items:center;}
.figc .score{font-size:15px;font-weight:800;color:var(--acc);}
.figc .bron{font-size:12px;color:var(--muted);}
.figc blockquote{margin:0;font-size:15.5px;line-height:1.6;}
.figc figcaption{font-size:13px;color:var(--muted);}
.badge-dark{display:flex;flex-direction:column;gap:6px;background:var(--ink);color:var(--sand);
  border-radius:18px;padding:22px 28px;}
.badge-dark b{font-size:22px;font-weight:800;letter-spacing:-0.03em;line-height:1.1;}
.badge-dark span{font-size:14px;line-height:1.4;color:#B8B1A4;}

/* pull quote */
.pull{margin:0 auto;max-width:760px;text-align:center;font-family:'Instrument Serif',serif;
  font-size:clamp(24px,3.2vw,36px);line-height:1.3;letter-spacing:-0.02em;}

/* contact info cards */
.icards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;}
.icard{background:#fff;border:1px solid var(--border);border-radius:14px;padding:20px;}
.icard .lbl{font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.icard .val{font-size:16px;line-height:1.45;font-weight:600;}
.icard a.val{font-size:19px;font-weight:700;color:var(--ink);}
.icard a.val:hover{color:var(--acc);}

/* ---- Offerte form ---- */
.off-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);gap:clamp(20px,3vw,40px);
  align-items:start;}
.off-form{display:flex;flex-direction:column;gap:16px;}
fieldset{border:1px solid var(--border);border-radius:18px;background:#fff;padding:clamp(20px,2.4vw,28px);
  margin:0;display:flex;flex-direction:column;gap:18px;}
legend{padding:0 10px;margin-left:-4px;font-size:12px;font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--acc);}
.fld{display:flex;flex-direction:column;gap:9px;}
.fld > span{font-size:15px;font-weight:700;}
label.fl{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:600;}
.grid-inp{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;}
input,select,textarea{border:1px solid var(--border);border-radius:10px;padding:13px 14px;font-size:15px;
  font-weight:400;background:var(--sand);width:100%;}
textarea{resize:vertical;}
input.invalid,select.invalid{border-color:var(--acc);background:#FBEFEA;}
.chip{border:1px solid var(--border);background:var(--sand);color:var(--ink);border-radius:999px;
  padding:11px 18px;font-size:14.5px;font-weight:600;cursor:pointer;}
.chip[aria-pressed="true"].single{background:var(--ink);color:var(--sand);border-color:var(--ink);}
.chip[aria-pressed="true"].multi{background:#FBEFEA;color:var(--acc);border-color:var(--acc);}
.addr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;}
.addr{display:flex;flex-direction:column;gap:12px;}
.addr > span{font-size:15px;font-weight:700;}
.addr .row{display:flex;gap:10px;}
.hint{font-size:13.5px;color:var(--muted);}
.err{font-size:13px;color:var(--acc);font-weight:600;display:none;}
.err.show{display:block;}
.btn-submit{align-self:start;border:0;background:var(--acc);color:#fff;border-radius:999px;
  padding:17px clamp(20px,4vw,32px);font-size:16.5px;font-weight:700;cursor:pointer;max-width:100%;}
.btn-submit:hover{background:var(--ink);}
.btn-submit:disabled{opacity:.6;cursor:default;}

.cform{display:flex;flex-direction:column;gap:16px;border:1px solid var(--border);border-radius:18px;
  background:#fff;padding:clamp(22px,2.6vw,30px);align-self:start;}
.cform-cap{font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--acc);}
.cform-ok{display:none;flex-direction:column;gap:12px;align-items:center;text-align:center;
  border:1px solid var(--border);border-radius:18px;background:#fff;padding:clamp(28px,4vw,44px);}
.cform-ok.show{display:flex;}
.cform-ok .ok{font-size:clamp(22px,2.6vw,28px);font-weight:800;letter-spacing:-0.03em;}
.cform-ok .em{width:60px;height:60px;border-radius:999px;background:#FBEFEA;color:var(--acc);
  display:flex;align-items:center;justify-content:center;font-size:30px;}

.off-aside{position:sticky;top:88px;display:flex;flex-direction:column;gap:14px;}
.sumbox{background:var(--ink);color:var(--sand);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:14px;}
.sumbox .cap{font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#8E877A;}
.sumbox .done{display:flex;align-items:center;gap:12px;}
.sumbox .done b{font-size:34px;font-weight:800;letter-spacing:-0.04em;line-height:1;}
.sumbox .done span{font-size:14px;line-height:1.4;color:#B8B1A4;}
.bar{height:6px;border-radius:99px;background:#332F26;overflow:hidden;}
.bar > i{display:block;height:100%;background:var(--acc);width:0%;transition:width .25s;}
.sumlist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;
  border-top:1px solid #332F26;padding-top:14px;}
.sumlist li{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;}
.sumlist .sl{color:#8E877A;}
.sumlist .sv{font-weight:600;text-align:right;}
.aside-call{background:var(--sand-2);border:1px solid var(--border);border-radius:18px;padding:22px;
  display:flex;flex-direction:column;gap:10px;}
.aside-call a{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-0.02em;}
.aside-note{border:1px solid var(--border);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:8px;}
.off-success{background:#fff;border:1px solid var(--border);border-radius:18px;padding:clamp(28px,4vw,44px);
  display:none;flex-direction:column;gap:14px;text-align:center;align-items:center;}
.off-success.show{display:flex;}
.off-success .ok{font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-0.03em;}
.off-success .em{width:64px;height:64px;border-radius:999px;background:#FBEFEA;color:var(--acc);
  display:flex;align-items:center;justify-content:center;font-size:32px;}

/* ---- Footer ---- */
.foot{background:var(--ink);color:var(--foot-txt);padding:clamp(36px,4vw,56px) clamp(20px,4vw,64px) 28px;}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;
  padding-bottom:28px;border-bottom:1px solid var(--foot-line);}
.foot-brand b{font-size:20px;font-weight:800;letter-spacing:-0.04em;color:var(--sand);display:block;margin-bottom:10px;}
.foot-logo{display:block;height:46px;width:auto;margin-bottom:14px;}
.foot-brand p{font-size:14px;line-height:1.6;max-width:300px;}
.foot-col{display:flex;flex-direction:column;gap:9px;}
.foot-col .ch{font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--foot-muted);}
.foot-col a,.foot-col span{font-size:14.5px;color:var(--foot-txt);}
.foot-col a:hover{color:var(--sand);}
.foot-bot{margin:20px 0 0;font-size:13px;color:var(--foot-muted);}
.foot-bot a{color:var(--foot-muted);}
.foot-bot a:hover{color:var(--foot-txt);}
.credit{margin:10px 0 0;font-size:13px;color:var(--foot-muted);}
.credit a{color:var(--foot-txt);}
.credit a:hover{color:var(--sand);}

/* ---- Utilities ---- */
.col{display:flex;flex-direction:column;}
.gap8{gap:8px;}.gap10{gap:10px;}.gap12{gap:12px;}.gap14{gap:14px;}.gap16{gap:16px;}
.gap18{gap:18px;}.gap22{gap:22px;}.gap26{gap:26px;}
.mw520{max-width:520px;}.mw560{max-width:560px;}.mw600{max-width:600px;}.mw620{max-width:620px;}
.row-wrap{display:flex;flex-wrap:wrap;gap:12px;}
.selfstart{align-self:flex-start;}
.center-sec{text-align:center;}

/* ---- Responsive ---- */
@media (max-width:900px){
  .nav,.hdr-tel{display:none;}
  .hamb{display:flex;}
  .frame{box-shadow:none;}
  .off-grid{grid-template-columns:1fr;}
  .off-aside{position:static;}
  .badge-quote{position:static;max-width:none;margin:12px;}
  .shot.ar-4-5{aspect-ratio:4/3;min-height:0;}
}
@media (max-width:560px){
  .hdr-in{padding:12px 16px;}
  .cta-sm{padding:9px 13px;}
}
body.menu-open .mnav{display:flex;}