/* FINAL4 · A1 iteration 7. Identical to iteration 6 except the DB pill slot (Callan 2026-10-11): the pill KEEPS its space in
   the losse state (opacity 0 + visibility:hidden, so it is also out of the accessibility tree). The slot no longer collapses,
   so the card height is identical in both states and the card no longer re-centres (~16px shift in i2 to i6).
   Duration: data-dur="0.7" on #pakketten (allowed range 0.5 to 0.7 s; ?dur=<n> in the URL overrides it, see odometer.js).
   Iteration 6 notes (kept): the duration is locked at data-dur="0.7"; the CSS below already maps 0.5 and 0.7 for no-JS.
   Iteration 5 notes (kept):
   FINAL4 · A1 iteration 5 — the round-2 "Glasvenster" (Apple) skin carrying the FINAL3 content. A1 is the winner (V6 retired).
   Base: round3/builds/FINAL4-i4/A1/A1.css. Iteration 5 (Callan 2026-10-11):
   1. The trust sentence is a NORMAL service row (bone icon, same type, same hairline rhythm, no bonus gap), directly above
      "Vaste plek". The .bonus / .trust-tx rules and the i-trust2 icon are gone.
   2. ONE duration setting: data-dur on #pakketten (seconds). odometer.js writes it as --dur; every CSS timing derives from it:
      --d (row fall + DB-pill fade) = --dur × .4 (i4: 400 ms of 1 s). The counter roll + tick use the same --dur in JS.
   Kept from i4: fall is the only row animation; the hairline under the row above "Vaste plek" (= .f1's top border) stays in
   both states and through the fall. Kept from i2: "Vaste plek" = LAST service row; list first row top = selector capsule top;
   day line under the price unit line. State is pure CSS: .sheet--day:has(.st-ls:checked) = losse; anything else = kwartaal. */
:root{
  --navy:#17264A;
  --navy-700:#22345C;
  --cream:#FAF7F0;
  --white:#fff;
  --ink:#17264A;
  --muted:#5A6478;
  --line:#E7E3DA;
  --accent:#3D6FD9;
  --gold:#C89B5A;
  --gold-700:#B3874A;
  --f-display:'Bitter',Georgia,serif;
  --f-expr:'Fraunces',Georgia,serif;   /* A1's numeral face (round-2 render). FONT RULING OPEN: swap to var(--f-display) for Bitter. */
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --spring:linear(0,.18 6%,.46 14%,.69 22%,.84 30%,.93 40%,.97 50%,.99 62%,1);
  --on-glass:#fff;
  --on-glass-muted:rgba(255,255,255,.82);
  --glass-line:rgba(255,255,255,.2);
  --ic:20px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--f-body);font-size:100%;line-height:1.5}

/* ===== #pakketten — scoped ===== */
#pakketten{
  --photo-h:min(125vw,640px);
  --dur:500ms;                   /* TOTAL toggle time. JS overwrites it inline from data-dur (any value); fallbacks below for no-JS */
  --d:calc(var(--dur) * .4);     /* row fall + DB-pill fade = 40% of the total */
  background:var(--cream);
  padding:3.5rem 0 4rem;
  overflow-x:clip;
  font-family:var(--f-body);
}
#pakketten[data-dur="0.3"]{--dur:300ms}
#pakketten[data-dur="0.5"]{--dur:500ms}
#pakketten[data-dur="0.7"]{--dur:700ms}
#pakketten p,#pakketten h2,#pakketten h3,#pakketten ul,#pakketten figure{margin:0;padding:0}
#pakketten ul{list-style:none}
#pakketten img{display:block;max-width:100%}
#pakketten .ic{display:block;flex:none;width:var(--ic);height:var(--ic)}
#pakketten .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

#pakketten .pk-wrap{width:min(1280px,calc(100% - 2.5rem));margin-inline:auto}

/* --- heading --- */
#pakketten .pk-head h2{
  font:700 clamp(2rem,1.45rem + 2.4vw,3rem)/1.08 var(--f-display);
  letter-spacing:-.02em;color:var(--ink);
}
#pakketten .pk-sub{margin-top:.625rem;font:400 1.0625rem/1.5 var(--f-body);color:var(--muted)}
#pakketten .pk-vat{margin-top:.375rem;font:400 .8125rem/1.4 var(--f-body);color:var(--muted)}
#pakketten .pk-head{margin-bottom:2rem}

/* review stills: kwartaal state first, losse state second (stacked — each is a full-bleed A1 stage) */
#pakketten .stills{display:grid;gap:2.75rem}

/* --- hero stage (full-bleed photo; the glass sheet is the only foreground) --- */
#pakketten .stage{position:relative;background:var(--navy);overflow:hidden;isolation:isolate}
#pakketten .stage__photo{position:absolute;left:0;right:0;top:0;z-index:-1;overflow:hidden;background:var(--navy)}
#pakketten .stage__photo img{width:100%;height:100%;object-fit:cover}
#pakketten .stage--hero{padding-bottom:.75rem}
#pakketten .stage--hero .stage__photo{height:var(--photo-h)}
#pakketten .stage--hero .stage__photo img{
  object-position:54.5% 50%;
  -webkit-mask-image:linear-gradient(#000 62%,transparent 100%);
          mask-image:linear-gradient(#000 62%,transparent 100%);
}
#pakketten .stage__inner{position:relative;width:min(1280px,calc(100% - 1.5rem));margin-inline:auto}

/* --- the glass sheet (day card) --- */
#pakketten .sheet{
  --title-fs:1.625rem;           /* "Dagopvang" size; its line box = title-fs × 1.15 */
  --sel-gap:1rem;                /* gap title -> selector capsule */
  position:relative;
  max-width:40rem;margin-inline:auto;
  padding:1.5rem 1.25rem 1.5rem;
  color:var(--on-glass);
  border-radius:1.75rem;
  background:linear-gradient(180deg,rgba(23,38,74,.70) 0%,rgba(23,38,74,.84) 100%);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
          backdrop-filter:blur(28px) saturate(160%);
  border:1px solid rgba(255,255,255,.16);
  border-top-color:rgba(255,255,255,.4);          /* light catching the top edge */
  box-shadow:0 28px 64px -16px rgba(6,12,30,.6),0 2px 0 rgba(255,255,255,.12) inset;
  font-weight:500;letter-spacing:.005em;
}
#pakketten .sheet--day{margin-top:calc(var(--photo-h) - 6rem)}
#pakketten .sheet__head,#pakketten .sheet__extra{display:grid;align-content:start;min-width:0}
#pakketten .sheet__extra{margin-top:1.5rem}

#pakketten h3{font:700 1.625rem/1.15 var(--f-display);letter-spacing:-.01em;color:var(--on-glass)}
#pakketten .sheet h3{font-size:var(--title-fs)}

/* --- S3 radio list on glass (kwartaal first, badge on its row) --- */
#pakketten .sel{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem;margin-top:var(--sel-gap)}
#pakketten .opt{
  display:flex;flex-wrap:wrap;align-items:center;gap:.375rem .75rem;
  min-height:3.25rem;padding:.625rem .875rem;border-radius:.875rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);background:rgba(255,255,255,.04);
  font:600 1rem/1.25 var(--f-body);letter-spacing:.005em;color:var(--on-glass);cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
#pakketten .opt:hover{background:rgba(255,255,255,.09)}
/* name never shrinks under its text: if the row is too tight, the badge wraps to its own line (never clips) */
#pakketten .opt>span:not(.dot):not(.badge){flex:1 1 auto}
#pakketten .dot{flex:none;width:var(--ic);height:var(--ic);border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85)}
/* kwartaal selected: gold rim + gold glow (kwartaal only) */
#pakketten .sheet--day:has(.st-kw:checked) .opt-kw{box-shadow:inset 0 0 0 2px var(--gold),0 10px 28px -12px rgba(200,155,90,.7);background:rgba(200,155,90,.16)}
#pakketten .sheet--day:has(.st-kw:checked) .opt-kw .dot{background:var(--gold);box-shadow:inset 0 0 0 2px var(--gold),inset 0 0 0 5px #1c2c52}
/* losse selected: white rim (gold stays with the hero choice) */
#pakketten .sheet--day:has(.st-ls:checked) .opt-ls{box-shadow:inset 0 0 0 2px #fff;background:rgba(255,255,255,.12)}
#pakketten .sheet--day:has(.st-ls:checked) .opt-ls .dot{background:#fff;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 5px #1c2c52}
#pakketten .sheet--day:has(.st-kw:focus-visible) .opt-kw,
#pakketten .sheet--day:has(.st-ls:focus-visible) .opt-ls{outline:3px solid #fff;outline-offset:3px}

/* A1 badge: gold, uppercase, navy diamond */
#pakketten .badge{
  display:inline-flex;align-items:center;gap:.5rem;margin-left:auto;
  padding:.375rem .75rem;border-radius:999px;white-space:nowrap;
  background:var(--gold);color:var(--navy);
  font:700 .75rem/1 var(--f-body);letter-spacing:.09em;text-transform:uppercase;
}
#pakketten .badge::before{content:"";flex:none;width:.4375rem;height:.4375rem;background:currentColor;transform:rotate(45deg)}
@media (max-width:479.98px){
  #pakketten .sheet{padding-inline:1.125rem}
  #pakketten .opt{padding-inline:.75rem;column-gap:.625rem}
  #pakketten .badge{gap:.375rem;padding:.3125rem .5625rem;font-size:.6875rem;letter-spacing:.06em}
}

/* --- swap slots: both states share one grid cell, the taller reserves the height (no shift) --- */
#pakketten .swap{display:grid}
#pakketten .swap>*{grid-area:1/1;min-width:0}
#pakketten .sv-ls{visibility:hidden}
#pakketten .sheet--day:has(.st-ls:checked) .sv-ls{visibility:visible}
#pakketten .sheet--day:has(.st-ls:checked) .sv-kw{visibility:hidden}

/* --- price: huge numeral + unit on its baseline; day line right under it; gold hairline; DB pill --- */
#pakketten .pv{margin-top:1.25rem}
#pakketten .pricebox{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .875rem}
#pakketten .num{
  font:600 5.5rem/1 var(--f-expr);
  letter-spacing:-.02em;word-spacing:-.08em;
  font-optical-sizing:auto;color:var(--on-glass);
  font-feature-settings:"lnum" 1,"tnum" 1;white-space:nowrap;
}
#pakketten .billing{font:700 1rem/1.2 var(--f-body);letter-spacing:.01em;color:var(--on-glass)}
#pakketten .fine-slot{margin-top:.375rem}
#pakketten .fine{font:500 .9375rem/1.45 var(--f-body);letter-spacing:.005em;color:var(--on-glass-muted)}
#pakketten .hair{display:block;width:3.5rem;height:3px;margin:.875rem 0;border-radius:2px;background:var(--gold)}
/* DB pill slot (it.7): kwartaal only, but the slot KEEPS its height in losse. The pill fades out (--d) and then goes
   visibility:hidden (invisible AND out of the accessibility tree); nothing below it moves, so the card height never changes. */
#pakketten .save-slot{display:grid}
#pakketten .save-cell{min-height:0;transition:opacity var(--d) ease,visibility 0s}
#pakketten .sheet--day:has(.st-ls:checked) .save-cell{opacity:0;visibility:hidden;transition:opacity var(--d) ease,visibility 0s var(--d)}
#pakketten .save{
  display:inline-block;padding:.375rem .875rem;border-radius:999px;
  background:rgba(200,155,90,.22);box-shadow:inset 0 0 0 1px rgba(200,155,90,.8);
  font:700 .9375rem/1.35 var(--f-body);letter-spacing:.005em;color:var(--on-glass);
}

/* --- service rows: A1 hairlines on glass (one ABOVE each row) + live 20px bone icons. The trust row is one of them (it.5). --- */
#pakketten .feat li{
  display:flex;align-items:flex-start;gap:.75rem;padding:.6875rem 0;border-top:1px solid var(--glass-line);
  font:600 .9375rem/1.5rem var(--f-body);letter-spacing:.005em;color:var(--on-glass);
}
#pakketten .feat .ic{margin-top:.125rem;color:var(--gold)}
#pakketten .night .feat{border-bottom:1px solid var(--glass-line)}

/* --- "Vaste plek" row (.f1): always the last service row. Its top border IS the hairline under the row above it (the trust row):
   it never changes colour, so that line stays in both states and through the whole fall (the list never ends on a floating row). */
#pakketten .feat .f1{overflow:clip}
#pakketten .f1 .ic-stack{display:grid;flex:none}
#pakketten .f1-tx{position:relative;display:grid;flex:0 1 auto;min-width:0}

/* FALL: row slides down out of its own (clipped) slot and fades out (--d, ease-in); reverse rises back in (--d, ease-out).
   The slot keeps its height: nothing else in the card moves for this row. */
#pakketten .f1 :is(.ic-stack,.f1-tx){
  transition:transform var(--d) cubic-bezier(.2,.7,.3,1),opacity var(--d) ease-out,visibility 0s;
}
#pakketten .sheet--day:has(.st-ls:checked) .f1 :is(.ic-stack,.f1-tx){
  transform:translateY(1.75rem);opacity:0;visibility:hidden;
  transition:transform var(--d) ease-in,opacity var(--d) ease-in,visibility 0s var(--d);
}

/* --- actions --- */
#pakketten .btn{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:3.5rem;padding:0 1.5rem;
  border-radius:999px;text-decoration:none;text-align:center;cursor:pointer;
  font:700 1.0625rem/1.2 var(--f-body);letter-spacing:.005em;
  -webkit-tap-highlight-color:transparent;
  transition:transform .35s var(--spring),filter .2s ease,background-color .2s ease,box-shadow .2s ease;
}
#pakketten .btn:active{transform:scale(.97);transition:transform 100ms ease-out}
#pakketten .btn--gold{background:var(--gold);color:var(--navy);box-shadow:0 10px 28px -10px rgba(200,155,90,.7)}
#pakketten .btn--gold:hover{filter:brightness(1.07);box-shadow:0 14px 32px -10px rgba(200,155,90,.85)}
#pakketten .btn--ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.85)}
#pakketten .btn--ghost:hover{background:rgba(255,255,255,.14)}
#pakketten .acts{margin-top:1.5rem}

/* ===== CONTAINER 2: night card — V6 structure (photo left, text right, no overlap) in A1 glass/type (unchanged from it.1) ===== */
#pakketten .night{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr);
  width:min(1280px,calc(100% - 1.5rem));margin:2.75rem auto 0;
  border-radius:1.75rem;color:var(--on-glass);
  background:linear-gradient(180deg,var(--navy-700) 0%,#1c2c52 100%);
  border:1px solid rgba(255,255,255,.16);border-top-color:rgba(255,255,255,.4);   /* A1 glass rim */
  box-shadow:0 28px 64px -18px rgba(6,12,30,.5),0 2px 0 rgba(255,255,255,.12) inset;
  font-weight:500;letter-spacing:.005em;
}
#pakketten .n-photo{position:relative;aspect-ratio:650/433}
#pakketten .n-photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:42% 50%;
  -webkit-mask-image:linear-gradient(#000 82%,transparent 100%);
          mask-image:linear-gradient(#000 82%,transparent 100%);
}
#pakketten .n-body{display:grid;gap:1.5rem;padding:1.25rem 1.25rem 1.75rem}
#pakketten .n-main,#pakketten .n-more{display:grid;align-content:start;min-width:0}
#pakketten .night h3{font-size:1.5rem}
#pakketten .night .pv{margin-top:.625rem}
#pakketten .night .num{font-size:3.5rem;letter-spacing:-.015em}
#pakketten .note{margin-top:.25rem;font:600 1.0625rem/1.35 var(--f-body);letter-spacing:.005em;color:var(--on-glass)}
#pakketten .chip{
  display:flex;align-items:flex-start;gap:.625rem;
  margin-top:.875rem;padding:.625rem .8125rem;border-radius:.875rem;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.26);
  font:500 .9375rem/1.4 var(--f-body);color:#fff;
}
#pakketten .chip .ic{margin-top:.0625rem;color:var(--gold)}
#pakketten .night .btn{margin-top:1.25rem;min-height:3.25rem;font-size:1rem;padding:0 1rem}
#pakketten .desc{font:500 1rem/1.55 var(--f-body);letter-spacing:.005em;color:#fff}
#pakketten .night .feat{margin-top:1rem}

/* focus */
#pakketten a:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px rgba(23,38,74,.95)}

/* review-only: #single = kwartaal still alone; #single-losse = losse still alone */
#single:target ~ #pakketten .still:nth-child(2),
#single-losse:target ~ #pakketten .still:nth-child(1){display:none}

/* ===== desktop ===== */
@media (min-width:1200px){
  #pakketten{padding:5rem 0 5.5rem}
  #pakketten .pk-head{margin-bottom:3rem}
  #pakketten .stills{gap:3.5rem}

  #pakketten .stage--hero{display:flex;align-items:center;min-height:50rem;padding:3.5rem 0}
  #pakketten .stage--hero .stage__photo{inset:0;height:auto}
  #pakketten .stage--hero .stage__photo img{
    position:absolute;left:0;top:0;width:138%;max-width:none;height:100%;
    object-position:50% 72%;-webkit-mask-image:none;mask-image:none;
  }
  #pakketten .stage--hero::after{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(90deg,rgba(23,38,74,.5) 0%,rgba(23,38,74,.18) 52%,rgba(23,38,74,0) 70%);
  }
  #pakketten .stage__inner{width:min(1280px,calc(100% - 5rem))}

  /* GRID RULE: two equal columns; every left-column item starts at column-1's left edge,
     the service list starts at column-2's left edge and its first row top = the selector capsule top. */
  #pakketten .sheet{
    --title-fs:2rem;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:2.75rem;align-items:start;
    max-width:none;margin-inline:0;padding:2.5rem 2.75rem 2.75rem;border-radius:2rem;
  }
  #pakketten .sheet--day{margin:0;width:min(54rem,100%)}
  #pakketten .sheet__head{grid-column:1}
  #pakketten .sheet__extra{grid-column:2;grid-row:1;margin-top:calc(var(--title-fs) * 1.15 + var(--sel-gap))}
  #pakketten .num{font-size:7.5rem}
  #pakketten .billing{font-size:1.0625rem}
  #pakketten .feat li{font-size:1rem}

  /* night: navy glass panel, Pip photo left (cover, no crop of the dog), two text columns right (same grid logic as the day card) */
  #pakketten .night{
    width:min(1280px,calc(100% - 5rem));margin-top:3.5rem;border-radius:2rem;
    grid-template-columns:44% minmax(0,1fr);
  }
  #pakketten .n-photo{aspect-ratio:auto;min-height:100%}
  #pakketten .n-photo img{
    object-position:62% 50%;   /* Pip's front paw ~20px off the left edge, rear paw before the fade */
    -webkit-mask-image:linear-gradient(90deg,#000 80%,transparent 100%);
            mask-image:linear-gradient(90deg,#000 80%,transparent 100%);
  }
  #pakketten .n-body{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:2.25rem;align-items:start;
    padding:2.5rem 2.75rem 2.75rem 2.25rem;
  }
  #pakketten .night h3{font-size:1.625rem}
  #pakketten .night .num{font-size:4.25rem}
  #pakketten .note{font-size:1.1875rem}
}

/* ===== always-on adaptations (A1 S14) ===== */
@media (prefers-reduced-motion:reduce){
  #pakketten{--d:0s !important}   /* instant swap: every row/pill transition and visibility delay goes to 0 */
  #pakketten .btn{transition:none}
  #pakketten .btn:active{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  #pakketten .sheet{background:var(--navy-700);-webkit-backdrop-filter:none;backdrop-filter:none}
  #pakketten .sheet--day{background:var(--navy)}
}
@media (prefers-contrast:more){
  #pakketten .sheet,#pakketten .night{border:2px solid #fff;background:var(--navy);-webkit-backdrop-filter:none;backdrop-filter:none}
  #pakketten .chip{border-color:#fff}
  #pakketten .pk-vat,#pakketten .pk-sub{color:var(--ink)}
}