/* Offertebouwer. Kleuren, fonts en knoppen gelijk aan de homepage (#prijzen).
   UX: één lijst, prijs naast elke optie, totaal altijd in beeld, tekst minimaal 16px, raakvlakken 44px+. */
:root{ --of-sand:#e3b97e; --of-ink:#2a1a0c; --of-txt:#f7f9fb; --of-mute:rgba(247,249,251,.66); --of-line:rgba(255,255,255,.1); }

/* Breed zoals de homepage: zijmarge --m in plaats van een smalle kolom */
.wrap.of-wide{ max-width:1680px; padding:0 clamp(24px,4.6vw,88px); }
.of-page{ font-variant-numeric:lining-nums; margin:0 auto; font-family:'Plus Jakarta Sans',sans-serif; color:var(--of-txt); }
.of-hero{ text-align:center; max-width:1100px; margin:clamp(28px,6vh,64px) auto clamp(48px,8vh,96px); }
.of-hero h1{ margin:0 0 22px; font-family:'Verso Display','Raleway',sans-serif; font-weight:400; font-size:clamp(2.8rem,7vw,6.4rem); line-height:1; letter-spacing:-.005em; text-wrap:balance; }
.of-hero p{ margin:0 auto; max-width:52ch; color:var(--of-mute); font-size:clamp(18px,1.5vw,21px); line-height:1.55; text-wrap:balance; }
.of-hero p b{ color:var(--of-txt); font-weight:600; }

.of-build{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(40px,9vw,180px); align-items:start; }

/* Categorieën: pagina's is het hoofdonderdeel, daarna functies, e-mail en domein, maatwerk */
.of-group{ margin:0 0 clamp(36px,5vh,52px); }
.of-group:last-child{ margin-bottom:0; }
.of-group-name{ margin:0 0 10px; font:700 15px 'Raleway',sans-serif; color:var(--of-sand); }
.of-group--main .of-opt{ min-height:96px; }
.of-group--main .of-opt-name{ font-size:clamp(22px,1.9vw,26px); }

/* Opties: tekst links, bediening rechts, lijntje ertussen */
.of-opts{ border-top:1px solid var(--of-line); }
.of-opt{ display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; min-height:76px; padding:14px 0; border:0; border-bottom:1px solid var(--of-line); background:none; color:var(--of-txt); text-align:left; font:inherit; cursor:pointer; }
.of-opt--count{ cursor:default; }
.of-opt-txt{ flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.of-opt-name{ font:600 clamp(18px,1.4vw,20px)/1.3 'Raleway',sans-serif; letter-spacing:-.01em; }
.of-opt-price{ font-size:16px; color:var(--of-mute); font-variant-numeric:lining-nums tabular-nums; }
.of-opt[aria-checked="true"] .of-opt-price, .of-opt.is-on .of-opt-price{ color:var(--of-sand); }

.of-check{ flex:none; width:28px; height:28px; border-radius:0; border:1.5px solid rgba(255,255,255,.3); transition:background .2s ease,border-color .2s ease; }
button.of-opt:hover .of-check{ border-color:var(--of-sand); }
.of-opt[aria-checked="true"] .of-check{ border-color:var(--of-sand); background:var(--of-sand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.6 5.4-5.6' fill='none' stroke='%23111d25' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat; }

.of-step{ flex:none; display:inline-flex; align-items:center; gap:4px; }
.of-step button{ width:44px; height:44px; border-radius:0; border:1px solid rgba(247,249,251,.4); background:transparent; color:var(--of-txt); font-size:22px; line-height:1; cursor:pointer; transition:border-color .2s ease,background .2s ease; }
.of-step button:hover:not(:disabled){ border-color:var(--of-sand); }
.of-step button:disabled{ opacity:.25; cursor:default; }
.of-step output{ min-width:34px; text-align:center; font:700 20px 'Raleway',sans-serif; font-variant-numeric:lining-nums tabular-nums; }

.of-page button:focus-visible{ outline:2px solid var(--of-sand); outline-offset:3px; }

/* Offerte: geen kader, alleen prijs, meerprijzen en de knop */
/* Offerte: regels bovenaan gelijk met "Extra pagina's", prijs en knop zakken mee onderin beeld */
.of-quote{ align-self:stretch; display:flex; flex-direction:column; }
.of-totals{ margin-top:auto; position:sticky; bottom:clamp(24px,5vh,56px); padding-top:24px; }
.of-price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin:0; }
.of-price b{ font-family:'Raleway',sans-serif; font-weight:800; font-size:clamp(60px,6.6vw,108px); line-height:1; letter-spacing:-.04em; font-variant-numeric:lining-nums tabular-nums; }
.of-price span{ color:var(--of-mute); font-size:clamp(18px,1.4vw,22px); }
.of-once{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin:0 0 28px; padding:18px 0; border-top:1px solid rgba(227,185,126,.3); border-bottom:1px solid rgba(227,185,126,.3); font-size:clamp(18px,1.4vw,21px); color:rgba(247,249,251,.85); font-variant-numeric:lining-nums tabular-nums; }
.of-once b{ font:700 clamp(22px,1.9vw,28px) 'Raleway',sans-serif; font-variant-numeric:lining-nums tabular-nums; color:var(--of-sand); }
.of-pak{ margin:8px 0 0; color:var(--of-mute); font-size:clamp(16px,1.2vw,19px); }
.of-list{ list-style:none; margin:0 0 32px; padding:12px 0 0; border-top:1px solid transparent; }
.of-list:empty{ display:none; }
.of-list li{ display:flex; justify-content:space-between; gap:16px; align-items:center; min-height:clamp(56px,4.6vw,72px); padding:0 0 0 22px; border-left:1px solid rgba(227,185,126,.5); font-size:clamp(18px,1.4vw,21px); color:rgba(247,249,251,.85); font-variant-numeric:lining-nums tabular-nums; }
.of-list li b{ flex:none; font-weight:600; color:var(--of-txt); }
.of-list li.q b{ color:var(--of-sand); font-weight:500; }
.of-list li.inc{ border-left-color:rgba(255,255,255,.14); color:var(--of-mute); }
.of-list li.inc b{ font-weight:500; color:var(--of-mute); }
.of-list li.v{ border-left-color:transparent; color:var(--of-sand); }
.of-list li.v b{ color:var(--of-sand); }
.of-list li.in{ animation:ofIn .45s cubic-bezier(.16,1,.3,1) both; }
@keyframes ofIn{ from{ opacity:0; transform:translateX(-8px); } to{ opacity:1; transform:none; } }
/* Knop zoals op de homepage (luxe.css sectie 5 en 11): vlak zand, rechte hoeken, hover lichter zand */
.of-cta, .of-bar a{ display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--of-sand); border-radius:0; background:var(--of-sand); color:var(--of-ink); font:500 17px 'Plus Jakarta Sans',sans-serif; letter-spacing:.03em; text-decoration:none; transition:background-color .45s ease,border-color .45s ease; }
.of-cta{ margin-top:40px; padding:22px 44px; font-size:18px; }
.of-cta:hover, .of-cta:focus-visible, .of-bar a:hover{ background:#f0cf9c; border-color:#f0cf9c; }
.of-fine{ margin:18px 0 0; font-size:16px; color:var(--of-mute); }

/* Prijsbalk op mobiel, zolang de bouwer in beeld is */
.of-bar{ display:none; }

/* SEO-tekst: kop links, tekst rechts, over de volle breedte */
.of-text{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(40px,9vw,180px); row-gap:clamp(48px,7vh,80px); max-width:none !important; margin:clamp(120px,18vh,200px) 0 0; }
.of-text h2{ grid-column:1; margin:0 !important; }
.of-text > p, .of-text > .faq{ grid-column:2; margin:0; }
.of-text p{ font-size:clamp(18px,1.3vw,20px); line-height:1.7; max-width:68ch; }
.of-text a{ color:var(--of-sand); }
.of-text .faq-q span{ font-size:clamp(18px,1.3vw,20px); }
.of-text .faq-a-inner{ font-size:17px; line-height:1.65; }

@media (max-width:980px){
  .of-build{ grid-template-columns:1fr; }
  .of-text{ grid-template-columns:1fr; row-gap:18px; }
  .of-text h2:not(:first-child){ margin-top:40px !important; }
  .of-text > p, .of-text > .faq{ grid-column:1; }
  .of-quote{ position:static; }
  .of-bar{ position:fixed; z-index:50; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px calc(14px + env(safe-area-inset-bottom)); background:rgba(17,28,35,.94); border-top:1px solid var(--of-line); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transform:translateY(110%); transition:transform .35s cubic-bezier(.16,1,.3,1); }
  .of-bar.is-on{ transform:none; }
  .of-bar b{ display:block; font:800 26px/1 'Raleway',sans-serif; font-variant-numeric:lining-nums tabular-nums; }
  .of-bar small{ font-size:14px; color:var(--of-mute); }
  .of-bar a{ flex:none; padding:14px 22px; font-size:16px; }
}
@media (max-width:520px){
  .of-cta{ width:100%; }
}
@media (prefers-reduced-motion:reduce){ .of-page *, .of-bar{ transition:none !important; animation:none !important; } }

/* Subtiele lijntjes tussen de tekstblokken (kop en tekst lopen samen door) */
/* geen kolomgat, zodat de lijn van kop en tekst één doorlopende zandlijn is */
.of-text.prose{ row-gap:0; column-gap:0; }
.of-text.prose > h2, .of-text.prose > p{ padding:clamp(32px,5vh,52px) 0; border-top:1px solid rgba(227,185,126,.3); }
.of-text.prose > h2{ padding-right:clamp(40px,9vw,180px); }
.of-text.prose > h2:first-child, .of-text.prose > h2:first-child + p{ border-top:0; padding-top:0; }
@media (max-width:980px){
  .of-text.prose > p{ border-top:0; padding-top:12px; }
  .of-text.prose > h2{ padding-right:0; }
  .of-text.prose > h2:not(:first-child){ margin-top:0 !important; }
}

/* Veelgestelde vragen gecentreerd op de pagina */
.of-text.of-text--faq{ display:block; max-width:880px !important; margin-left:auto; margin-right:auto; }
.of-text--faq .faq{ margin:0 auto; }
.of-text--faq h2{ text-align:center; margin:0 0 clamp(28px,4vh,44px) !important; }