/* ============================================================
   DailyRoots one-pager, Soesterberg
   Lichte variant. Het palet komt van de flyer: gebroken wit
   domineert, zwart draagt de tekst, goud is accent.
   Typografie, ritme en het merkteken komen van dailyroots.nl.
   ============================================================ */

:root{
  /* papier */
  --paper:      #FBF8F2;
  --paper-warm: #F4ECDC;
  --paper-deep: #EADFC7;

  /* inkt */
  --ink:      #1C1C1C;
  --ink-soft: #44433E;
  --ink-mute: #6A6961;

  /* goud. --gold is voor vlakken en lijnen, --gold-ink voor tekst:
     #C9A84B haalt op papier maar 2:1 en is als letter niet te lezen. */
  --gold:       #C9A84B;
  --gold-warm:  #D9BC63;
  --gold-deep:  #A8862B;
  --gold-ink:   #7E611A;

  --dark: #16150F;

  --lijn: rgba(28,28,28,.10);
  --lijn-goud: rgba(169,134,43,.34);

  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gut: clamp(1.15rem, 5vw, 3.5rem);
  --max: 1240px;
  --sec: clamp(3.75rem, 9vw, 7rem);
  --radius: 4px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:72px; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  background:var(--paper);
  color:var(--ink-soft);
  font-family:var(--sans);
  font-size:clamp(1rem,.97rem + .18vw,1.0625rem);
  line-height:1.65;
  overflow-x:clip;
  /* op een lichte pagina maakt antialiasing de letter juist netter,
     anders dan op de zwarte hoofdsite waar het de tekst dunner trok */
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--gold);color:var(--ink)}

:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; border-radius:2px; }

.skip{
  position:fixed; left:0; top:0; z-index:300;
  background:var(--ink); color:var(--paper); padding:.85rem 1.3rem; font-weight:700;
  transform:translateY(-120%);
}
.skip:focus{ transform:none }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }

/* ---------- typografie ---------- */

h1,h2,h3{ color:var(--ink); font-weight:700; letter-spacing:-.018em; line-height:1.1; }

h1{ font-size:clamp(2rem,1.3rem + 3.1vw,3.25rem); line-height:1.07; }
h2{ font-size:clamp(1.65rem,1.2rem + 2vw,2.5rem); }
h3{ font-size:clamp(1.06rem,1rem + .3vw,1.2rem); letter-spacing:-.008em; }

.kicker,.label,.bon-label{
  font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.19em; color:var(--gold-ink);
}
.label{ margin-bottom:.85rem }
.mid{ max-width:22ch }

.lead{ font-size:clamp(1.06rem,1rem + .4vw,1.25rem); color:var(--ink-soft); }

.sec{ padding-block:var(--sec) }
.sec p + p{ margin-top:1rem }

/* ---------- merkteken ---------- */

.merk{ display:inline-flex; align-items:center; gap:.6rem; }
.merk-teken{ width:22px; height:auto; fill:var(--gold-deep); flex:none; }
.merk-naam{
  font-size:.82rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.22em; color:var(--ink);
}

/* ---------- knoppen ---------- */

.knop{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  background:var(--gold); color:var(--ink);
  font-weight:700; font-size:.9rem; letter-spacing:.005em;
  padding:.85rem 1.35rem; border-radius:var(--radius);
  border:1px solid var(--gold-deep);
  box-shadow:0 1px 0 rgba(28,28,28,.06);
  transition:background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
  text-align:center;
}
.knop:hover{ background:var(--gold-warm); transform:translateY(-1px); box-shadow:0 6px 18px rgba(126,97,26,.18); }
.knop:active{ transform:none }
.knop .wa{ width:18px; height:18px; fill:currentColor; flex:none; }

.knop-groot{ font-size:1rem; padding:1.05rem 1.7rem; }
/* de knoptekst is lang; laat hem alleen breken als het scherm echt smal is */
@media (min-width:520px){ .knop{ white-space:nowrap } }
.knop-kop{ padding:.65rem 1.05rem; font-size:.8rem; }

@media (prefers-reduced-motion:reduce){
  .knop,.knop:hover{ transition:none; transform:none }
}

/* ---------- header ---------- */

.kop{
  position:sticky; top:0; z-index:100;
  /* Bijna dekkend, en niet .88 zoals eerst. Onder deze balk schuiven donkere
     studiofoto's door; bij .88 kleurde de balk daar mee en werd de donkere
     merknaam onleesbaar. Safari negeert backdrop-filter bovendien in een
     aantal gevallen, en dan was er helemaal geen dempen meer. */
  background:rgba(251,248,242,.97);
  backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--lijn);
}
.kop-in{
  width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut);
  min-height:60px; display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
/* op de kleinste schermen draagt de vaste balk onderaan de actie al */
@media (max-width:520px){ .knop-kop{ display:none } }

/* ---------- hero ---------- */

.hero{ padding-block:clamp(2.25rem,5vw,4.25rem) clamp(2.5rem,5vw,4.5rem); }
.hero-in{ display:grid; gap:clamp(1.75rem,4vw,3rem); }

.hero-tekst h1{ margin-block:.7rem .85rem; max-width:17ch; }
.hero-tekst .lead{ max-width:34ch }

.hero-actie{ margin-top:1.6rem; display:flex; flex-direction:column; align-items:flex-start; gap:.85rem; }
.hero-actie .knop{ width:100% }

.plekken{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.85rem; color:var(--ink-mute);
  white-space:nowrap;
}
.plekken strong{ color:var(--ink) }
.stip{
  width:7px; height:7px; border-radius:50%; background:var(--gold-deep); flex:none;
  box-shadow:0 0 0 3px rgba(169,134,43,.18);
}

.hero-film{ position:relative }
.film{
  width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
  background:var(--paper-deep);
  border-radius:var(--radius);
  border:1px solid var(--lijn-goud);
  box-shadow:0 18px 44px -22px rgba(28,28,28,.4);
}
.hero-plek{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:.75rem; font-size:.78rem; letter-spacing:.02em; color:var(--ink-mute);
}
.hero-plek svg{ width:14px; height:14px; fill:var(--gold-deep); flex:none; }

@media (min-width:900px){
  .hero-in{ grid-template-columns:minmax(0,1fr) minmax(0,1.18fr); align-items:center; }
  .hero-actie{ flex-direction:row; align-items:center; gap:1.25rem; }
  .hero-actie .knop{ width:auto }
}

/* ---------- cijfers ---------- */

.cijfers{
  background:var(--paper-warm);
  border-block:1px solid var(--lijn-goud);
  padding-block:clamp(1.75rem,4vw,2.75rem);
}
.cijfer-rij{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem 1rem; text-align:center; }
.cijfer-rij li{ display:flex; flex-direction:column; gap:.15rem; }
.cijfer{
  font-size:clamp(1.6rem,1.1rem + 2vw,2.35rem); font-weight:700;
  color:var(--ink); letter-spacing:-.02em; line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.cijfer-bij{ font-size:.8rem; color:var(--ink-mute); letter-spacing:.02em; }

@media (min-width:760px){
  .cijfer-rij{ grid-template-columns:repeat(4,1fr) }
}

/* ---------- meer dan trainen ---------- */

.meer-in{ display:grid; gap:clamp(2rem,5vw,3.5rem); }
.meer-tekst h2{ margin-bottom:1rem }

.pijlers{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-block:1.15rem 1.35rem;
}
.pijlers li span{
  display:inline-block;
  padding:.42rem .85rem;
  font-size:.82rem; font-weight:700; color:var(--ink);
  background:var(--paper-warm);
  border:1px solid var(--lijn-goud);
  border-radius:999px;
}

.adres{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:1.5rem; padding-top:1.35rem;
  border-top:1px solid var(--lijn);
  font-size:.95rem; color:var(--ink-soft); width:100%;
}
.adres strong{ color:var(--ink) }
.adres svg{ width:16px; height:16px; fill:var(--gold-deep); flex:none; }

.meer-beeld{ display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; }
.meer-beeld .bd{
  width:100%; height:100%; object-fit:cover;
  border-radius:var(--radius); border:1px solid var(--lijn);
  aspect-ratio:3/2;
}
.meer-beeld .bd-groot{ grid-column:1 / -1; aspect-ratio:4/5; max-height:520px; object-position:50% 28%; }
.meer-beeld .bd-breed{ grid-column:1 / -1; aspect-ratio:16/9; }

@media (min-width:900px){
  .meer-in{ grid-template-columns:minmax(0,1fr) minmax(0,.92fr); align-items:center; }
  .meer-beeld .bd-groot{ aspect-ratio:4/5; max-height:none; }
}

/* ---------- studioband ---------- */

.studio{ padding-bottom:clamp(1rem,3vw,2rem) }
/* Extra lucht tussen de studioband en de kop die erop volgt. Zonder deze
   ruimte plakt "Zo gaan we te werk" tegen de onderrand van de foto's aan en
   leest het als een bijschrift bij het beeld in plaats van als een nieuwe
   sectie. Op de telefoon valt dat het sterkst op, want daar staan ze onder
   elkaar in plaats van naast elkaar. */
@media (max-width:760px){
  .studio + .stappen{ padding-top:calc(var(--sec) + 1.25rem) }
}
.studio-band{
  display:flex; gap:.75rem;
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-inline:var(--gut); padding-bottom:.75rem;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.studio-band img{
  flex:none; width:min(78vw,420px); scroll-snap-align:center;
  aspect-ratio:3/2; object-fit:cover;
  border-radius:var(--radius); border:1px solid var(--lijn);
}
@media (min-width:1000px){
  .studio-band{ padding-inline:max(var(--gut),calc((100vw - var(--max))/2 + var(--gut))) }
}

/* Op de telefoon staan de twee foto's onder elkaar en volgt daar direct de
   studioband op. Drie beelden achter elkaar is ruis; de tweede foto voegt
   naast het portret weinig toe. Op desktop staan ze naast elkaar en werkt het
   wel, dus die blijft daar staan. */
@media (max-width:760px){
  .bd-breed{ display:none }
}

/* ---------- stappen ---------- */

.stappen{ background:var(--paper-warm); border-block:1px solid var(--lijn-goud); }
.stappen h2{ margin-bottom:2.25rem }

.stap-lijst{ display:grid; gap:0; }
.stap-lijst li{
  display:grid; grid-template-columns:auto 1fr; gap:.35rem 1.1rem;
  padding-block:1.35rem;
  border-top:1px solid var(--lijn-goud);
}
.stap-lijst li:last-child{ border-bottom:1px solid var(--lijn-goud) }
.stap-n{
  grid-row:1 / span 2;
  font-size:.82rem; font-weight:700; color:var(--gold-ink);
  letter-spacing:.1em; padding-top:.22rem;
  font-variant-numeric:tabular-nums;
}
.stap-lijst h3{ align-self:center }
.stap-lijst p{ max-width:62ch }

.stap-slot{
  margin-top:1.75rem; font-size:1.05rem; color:var(--ink);
  max-width:46ch; font-weight:500;
}

@media (min-width:820px){
  .stap-lijst li{ grid-template-columns:3.5rem 15rem 1fr; align-items:baseline; gap:1.25rem; }
  .stap-n{ grid-row:auto; font-size:.9rem }
  .stap-lijst p{ margin:0 }
}

/* ---------- resultaten ---------- */

.resultaten h2{ margin-bottom:2.25rem }
.res-rij{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.res{
  background:#fff;
  border:1px solid var(--lijn);
  border-radius:var(--radius);
  padding:1.15rem 1.15rem 1.25rem;
  display:flex; flex-direction:column; gap:.2rem;
}
.res img{
  width:72px; height:72px; border-radius:50%; object-fit:cover;
  margin-bottom:.9rem; border:1px solid var(--lijn);
}
.res-cijfer{
  font-size:clamp(1.5rem,1.1rem + 1.6vw,1.95rem); font-weight:700;
  color:var(--ink); line-height:1; letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
}
.res-naam{ font-size:.88rem; font-weight:700; color:var(--gold-ink); letter-spacing:.03em; }
.res-naam span{ font-weight:400; color:var(--ink-mute); letter-spacing:0; }
.res-quote{
  margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--lijn);
  font-size:.88rem; color:var(--ink-soft); line-height:1.5;
}
.res-quote::before{ content:"\201C" }
.res-quote::after{ content:"\201D" }

@media (min-width:900px){
  .res-rij{ grid-template-columns:repeat(4,minmax(0,1fr)) }
}

/* ---------- videotestimonials ---------- */

.films{ padding-top:0 }
.film-rij{ display:grid; gap:1.25rem; margin-top:1.25rem; }

.klantfilm{ display:flex; flex-direction:column; gap:.7rem; }
.film-knop{
  display:block; position:relative; width:100%; padding:0;
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--lijn-goud);
  background:var(--paper-deep);
  box-shadow:0 14px 36px -20px rgba(28,28,28,.42);
}
.film-knop img{ width:100%; aspect-ratio:16/9; object-fit:cover; }

/* De speler hangt aan .klantfilm en niet aan .film-knop. Bij het afspelen
   vervangt de video die knop, dus een regel op .film-knop raakt hem daarna
   niet meer. Zonder deze regel viel de video terug op zijn eigen 720 pixels
   breed, werd de pagina breder dan het scherm en zoomde de telefoon uit. */
.klantfilm video,
.film-speler{
  display:block;
  width:100%; max-width:100%; height:auto;
  aspect-ratio:16/9; object-fit:contain; background:#000;
  border-radius:var(--radius); border:1px solid var(--lijn-goud);
}
@media (max-width:640px){
  .film-knop img{ aspect-ratio:9/16 }
  .klantfilm video,
  .film-speler{ aspect-ratio:9/16 }
}

.play{
  position:absolute; inset:0; margin:auto;
  width:62px; height:62px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(251,248,242,.94);
  box-shadow:0 6px 22px rgba(0,0,0,.3);
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.play svg{ width:26px; height:26px; fill:var(--ink); margin-left:3px; }
.film-knop:hover .play{ transform:scale(1.06); background:var(--gold); }
@media (prefers-reduced-motion:reduce){ .film-knop:hover .play{ transform:none } }

.klantfilm figcaption{
  font-size:.85rem; font-weight:700; color:var(--ink);
}
.klantfilm figcaption span{
  display:block; font-weight:400; font-size:.78rem; color:var(--ink-mute);
}

@media (min-width:820px){
  .film-rij{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}

/* ---------- over thomas ---------- */

.over{ background:var(--paper-warm); border-block:1px solid var(--lijn-goud); }
.over-in{ display:grid; gap:clamp(1.75rem,4vw,3rem); }
.over-beeld img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 22%;
  border-radius:var(--radius); border:1px solid var(--lijn);
  max-height:460px;
}
.over-tekst h2{ margin-bottom:1.1rem }
.over-slot{ color:var(--ink); font-weight:500; }

.handtekening{
  margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--lijn-goud);
  font-size:.9rem; font-weight:700; color:var(--ink);
}
.handtekening span{ display:block; font-weight:400; font-size:.82rem; color:var(--ink-mute); }

@media (min-width:900px){
  .over-in{ grid-template-columns:minmax(0,.72fr) minmax(0,1fr); align-items:center; }
  .over-beeld img{ max-height:none }
}

/* ---------- de bon ---------- */

.aanbod{ padding-bottom:calc(var(--sec) + 4.5rem) }

.bon{
  background:var(--paper-warm);
  border:2px dashed var(--gold-deep);
  border-radius:6px;
  padding:clamp(1.5rem,4vw,2.75rem);
}
.bon-kop{ padding-bottom:1.35rem; border-bottom:2px dotted var(--lijn-goud); }
.bon-label{ display:block; margin-bottom:.5rem }
.bon-kop h2{ max-width:none }

.bon-body{ display:grid; gap:1.75rem; padding-top:1.6rem; }

.vink{ display:grid; gap:.45rem; margin-block:.9rem 1.1rem; }
.vink li{ position:relative; padding-left:1.5rem; }
.vink li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:.5rem; height:.28rem; border-left:2px solid var(--gold-deep);
  border-bottom:2px solid var(--gold-deep); transform:rotate(-45deg);
}
.geen-verplichting strong{ color:var(--ink) }

.bon-actie{ display:flex; flex-direction:column; align-items:flex-start; gap:.9rem; }
.bon-actie .knop{ width:100% }
.bon-bel{ font-size:.9rem; color:var(--ink-mute); }
.bon-bel a{ font-weight:700; color:var(--ink); border-bottom:1px solid var(--lijn-goud); }

@media (min-width:820px){
  .bon-body{ grid-template-columns:minmax(0,1fr) minmax(0,.82fr); gap:2.5rem; align-items:start; }
  .bon-actie{ align-items:stretch }
  .bon-actie .plekken{ justify-content:center }
  .bon-bel{ text-align:center }
}

/* ---------- footer ---------- */

.voet{
  background:var(--dark); color:#CFCBBF;
  padding-block:clamp(2.25rem,5vw,3.25rem) 0;
}
.voet a{ color:inherit }
.voet-in{ display:grid; gap:1.75rem; }
.voet-merk{ display:flex; align-items:flex-start; gap:.75rem; }
.voet-merk .merk-teken{ width:26px; fill:var(--gold); }
.voet-merk strong{
  color:#fff; font-size:.86rem; text-transform:uppercase; letter-spacing:.2em;
  display:inline-block; margin-bottom:.2rem;
}
.voet-merk p{ font-size:.85rem; line-height:1.5; }
.voet-adres{ font-style:normal; font-size:.88rem; line-height:1.75; }
.voet-adres a{ border-bottom:1px solid rgba(201,168,75,.5) }

.voet-social{ display:flex; gap:.6rem; }
.voet-social a{
  display:grid; place-items:center; width:38px; height:38px;
  border:1px solid rgba(255,255,255,.16); border-radius:var(--radius);
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.voet-social svg{ width:18px; height:18px; fill:#CFCBBF; }
.voet-social a:hover{ border-color:var(--gold); background:rgba(201,168,75,.1); }

.voet-onder{
  margin-top:2.25rem;
  /* op mobiel staat de vaste knop onderaan over de pagina heen; de laatste
     regel van de footer moet daar niet onder verdwijnen */
  padding-block:1.1rem calc(1.1rem + 4.25rem + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:#8E8A7E;
}
.voet-onder p:first-child{ color:var(--gold) }

@media (min-width:760px){
  .voet-in{ grid-template-columns:1.4fr 1fr auto; align-items:start; }
}

/* ---------- vaste balk onderaan, mobiel ---------- */

.balk{
  position:fixed; left:0; right:0; bottom:0; z-index:110;
  padding:.6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(251,248,242,.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--lijn-goud);
}
.knop-balk{ width:100%; padding-block:.95rem; }

/* Ruimte onder de pagina zodat de vaste balk niet over de laatste regels van
   de voet valt, en genoeg speling bij het aanspringen van een anker. */
@media (max-width:759.98px){
  body{ padding-bottom:76px }
  .sec{ scroll-margin-top:72px }
}

@media (min-width:760px){
  .balk{ display:none }
  .aanbod{ padding-bottom:var(--sec) }
  .voet-onder{ padding-block:1.1rem }
}

/* ---------- opkomen ---------- */

.op{ opacity:0; transform:translateY(14px); }
.op-in{ opacity:1; transform:none; transition:opacity .6s var(--ease), transform .6s var(--ease); }
@media (prefers-reduced-motion:reduce){
  .op{ opacity:1; transform:none }
  .op-in{ transition:none }
}