/* ======================================================================
   Contact · optie C "Sfeer en tafel" (keuze eigenaar 29-09: "Voor de contactpagina vind ik optie C echt super.")
   Bron: v6-lab/home-opties/contact-opties.html#optC, 1:1 overgenomen en onder .ct gezet, zodat niets weglekt.
   - .ct-split: links de hotellobby als ansichtkaart (4:5, sticky vanaf 900 px), rechts de belofte, de twee
     tegels (App en Bel Stefan) en het terugbelverzoek (#check).
   - .ct-waar: "Waar we zitten", het adres groot, en de getekende route Ruurlo → jouw zaak.
   Kleur: één beige (var(--paper)) en blauwtinten; de foutkleur blijft het rood van de hele site.
   Letters: Archivo (koppen, .d) en DM Sans, geen cursief.
   Ruimte: --ritme-kop boven, KORT rond de lijn van .ct-waar (lijn in het midden); onder: blok in knoppen.css.
   ====================================================================== */
.ct{--ct-err:#9B2C2C;--ct-lijn:rgba(47,74,122,.22)}
.ct [hidden]{display:none!important}
/* 14-10 mobieltest: geen los woord op de laatste regel van lopende tekst (alleen in <main> van deze pagina, niet in de voet).
   De lange vorm text-wrap-style, zodat een white-space:nowrap elders blijft staan; koppen houden hun text-wrap:balance. */
main :is(p,li,dd,figcaption,legend){text-wrap-style:pretty}
.ct figure{margin:0}
.ct address{font-style:normal}
.ct a:focus-visible,.ct button:focus-visible{outline:2px solid var(--delft);outline-offset:3px}

/* ---------- boven: foto links, alles rechts ---------- */
.ct-split{padding-block:var(--ritme-kop) calc(var(--ritme-kort) / 2);align-items:start}
.ct-links{grid-column:1/6;position:sticky;top:76px}
.ct-foto{position:relative;aspect-ratio:4/5;max-height:calc(100vh - 120px);width:100%;box-shadow:var(--pk-s)}
.ct-foto::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 0 var(--pk-w) var(--pk-c),inset 0 0 0 calc(var(--pk-w) + 1px) rgba(22,32,48,.07)}
.ct-foto img{display:block;width:100%;height:100%;object-fit:cover}
.ct-rechts{grid-column:7/13;display:grid;gap:clamp(56px,6vw,88px);padding-top:clamp(8px,2vw,32px);min-width:0}

.ct-h1{font-size:clamp(2.8rem,1.4rem + 4vw,5.6rem);line-height:.92;text-wrap:balance}
.ct-hl{font-family:var(--f-display);font-weight:600;font-stretch:90%;letter-spacing:-.015em;font-size:clamp(1.3rem,1rem + 1vw,2rem);line-height:1.2;color:var(--delft);margin:18px 0 0;text-wrap:balance}
.ct-hl em{font-style:normal;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.17em;text-decoration-color:rgba(47,74,122,.45)}
.ct-head .lead{margin:22px 0 0;color:var(--ink-soft);text-wrap:pretty}

/* Stefan en Wouter: 64 px ringen, in kleur */
.ct-duo{display:flex;flex-wrap:wrap;gap:20px clamp(28px,3vw,48px);margin-top:32px}
.ct-por{display:flex;align-items:center;gap:16px;max-width:22em}
.ct-ring{flex:none;display:block;padding:3px;border:1px solid rgba(47,74,122,.45);border-radius:50%}
.ct-ring img{display:block;width:64px;height:64px;border-radius:50%;object-fit:cover;filter:none}
.ct-por figcaption{display:grid;gap:2px}
.ct-por b{font-family:var(--f-display);font-weight:700;font-size:1.15rem;color:var(--ink);line-height:1.1}
.ct-por small{font-size:.9rem;line-height:1.4;color:var(--ink-soft)}

/* ---------- de twee tegels ---------- */
.ct-blok{scroll-margin-top:96px;min-width:0}
.ct-sh{font-family:var(--f-body);font-size:.84rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.4;color:var(--ink-soft);margin-bottom:16px}
.ct-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ct-tiles li{display:flex;min-width:0}
.ct-tile{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:16px;row-gap:6px;height:100%;padding:24px 22px;
  border:1px solid rgba(47,74,122,.4);color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.ct-tile:hover,.ct-tile:focus-visible{border-color:var(--delft);box-shadow:inset 0 0 0 1px var(--delft)}
.ct-tile-ic{grid-column:1;width:52px;height:52px;margin-bottom:12px;border:1px solid rgba(47,74,122,.45);border-radius:50%;display:grid;place-items:center;color:var(--delft)}
.ct-ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ct-tile-t{grid-column:1;font-family:var(--f-display);font-weight:800;font-stretch:72%;text-transform:uppercase;font-size:1.6rem;line-height:1}
.ct-tile-s{grid-column:1;font-size:.92rem;color:var(--ink-soft);line-height:1.35}
.ct-tile-nr{grid-column:1}
.ct-tile-nr .todo{margin:4px 0 0;font-size:.78rem}
.ct-tile .arr{grid-row:1;grid-column:2;color:var(--delft);font-size:1.3rem}

/* ---------- het terugbelverzoek (#check) ---------- */
.ct-call{padding-top:clamp(40px,4vw,56px);border-top:1px solid var(--ct-lijn);scroll-margin-top:72px;min-width:0}
.ct-h3{font-family:var(--f-display);font-weight:800;font-stretch:72%;text-transform:uppercase;font-size:clamp(2rem,1.4rem + 1.8vw,3rem);line-height:.95;color:var(--ink)}
.ct-sub{margin:14px 0 28px;color:var(--ink-soft)}
.ct-sheet{scroll-margin-top:96px}
.ct-cb{display:grid;gap:28px}

.ct-delen{border:0;margin:0;padding:0;min-width:0;scroll-margin-top:100px}
.ct-delen legend{padding:0;margin-bottom:14px;font-weight:600;font-size:1.02rem;color:var(--ink);text-wrap:balance}   /* 14-10 mobieltest: geen los woord ("uit?") */
.ct-keus{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ct-deel{position:relative;display:grid;align-content:center;gap:2px;min-width:0;min-height:88px;padding:16px 16px 16px 54px;border:1px solid rgba(47,74,122,.4);cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.ct-deel input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.ct-deel:has(input:checked),.ct-deel.is-on{border-color:var(--delft);box-shadow:inset 0 0 0 1px var(--delft)}
.ct-deel:has(input:focus-visible){outline:2px solid var(--delft);outline-offset:3px}
.ct-deel-i{position:absolute;left:18px;top:50%;width:22px;height:22px;margin-top:-11px;border:1.5px solid var(--delft);border-radius:50%;display:grid;place-items:center;pointer-events:none}
.ct-deel-i i{width:10px;height:10px;border-radius:50%;background:var(--delft);transform:scale(0);transition:transform .25s var(--ease)}
.ct-deel:has(input:checked) .ct-deel-i i,.ct-deel.is-on .ct-deel-i i{transform:scale(1)}
.ct-deel-n{font-family:var(--f-display);font-weight:700;font-size:1.25rem;line-height:1.1;pointer-events:none}
.ct-deel-h{font-size:.9rem;color:var(--ink-soft);pointer-events:none}
.ct-delen[data-invalid] .ct-deel{border-color:var(--ct-err)}

.ct-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px}
.ct-f{display:grid;gap:6px;align-content:start;min-width:0;scroll-margin-top:100px}
.ct-f label{font-size:.92rem;font-weight:600;color:var(--ink)}
.ct-opt{font-weight:400;color:var(--ink-soft)}
.ct-f input{width:100%;min-width:0;min-height:52px;padding:12px 14px;font:inherit;font-size:1.05rem;color:var(--ink);background:var(--paper);border:1px solid var(--delft);border-radius:0;-webkit-appearance:none;appearance:none}
.ct-f input::placeholder{color:#6E7589;opacity:1}
.ct-f input:focus-visible{outline:2px solid var(--delft);outline-offset:2px}
.ct-f-dag input{display:block;text-align:left}
.ct-f-dag input::-webkit-date-and-time-value{text-align:left}
.ct-f-dag input::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.75}
.ct-hint{font-size:.86rem;color:var(--ink-soft)}
.ct-err{margin:0;font-size:.9rem;line-height:1.4;color:var(--ct-err)}
.ct-err:empty{display:none}
.ct [aria-invalid="true"]{border-color:var(--ct-err)!important;box-shadow:inset 0 0 0 1px var(--ct-err)}
.ct-delen input[aria-invalid="true"]{box-shadow:none}
.ct-dag-uit{display:block;margin-top:-4px}
.ct-act{margin:0}
.ct-act .btn{border:0;font:inherit;font-size:.95rem;font-weight:500;cursor:pointer}

.ct-link{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;background:none;border:0;font:inherit;color:var(--delft);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:rgba(47,74,122,.4);cursor:pointer;
  transition:text-decoration-color .25s var(--ease)}
.ct-link:hover,.ct-link:focus-visible{text-decoration-color:currentColor}

/* ---------- de bevestiging ---------- */
.ct-done{padding:8px 0;scroll-margin-top:96px}
.ct-done-ic{display:block;width:60px;height:60px;fill:none;stroke:var(--delft);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ct-done-ic *{stroke-dasharray:1 1}
.ct-done-h{font-family:var(--f-display);font-weight:800;font-stretch:72%;text-transform:uppercase;font-size:clamp(2.2rem,1.4rem + 2.4vw,3.6rem);line-height:.98;margin:20px 0 14px;color:var(--ink);overflow-wrap:anywhere;scroll-margin-top:96px}
.ct-done-h:focus{outline:none}
.ct-done-h:focus-visible{outline:2px solid var(--delft);outline-offset:4px}
.ct-done-zin{font-size:clamp(1.1rem,1rem + .3vw,1.3rem);line-height:1.5;max-width:30em;margin:0;color:var(--ink);overflow-wrap:anywhere}
.ct-done-again{margin:14px 0 0}

/* ---------- waar we zitten ---------- */
.ct-waar{border-top:1px solid var(--ct-lijn)}
.ct-waar .grid{padding-block:calc(var(--ritme-kort) / 2) 0;align-items:center;row-gap:48px}
.ct-waar-t{grid-column:1/7;min-width:0}
.ct-waar-h{font-family:var(--f-body);font-size:.84rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.4;color:var(--ink-soft);margin-bottom:22px}
.ct-adr{font-family:var(--f-display);font-weight:800;font-stretch:72%;text-transform:uppercase;letter-spacing:-.005em;font-size:clamp(2.2rem,1.2rem + 2.8vw,4.4rem);line-height:.95;color:var(--ink)}
.ct-org{display:block;font-size:.42em;font-stretch:90%;letter-spacing:.02em;color:var(--delft);margin-bottom:.5em}
.ct-nw{white-space:nowrap}
.ct-mail{margin:28px 0 0;font-size:clamp(1.2rem,1rem + .6vw,1.6rem);font-weight:500}
.ct-mail a{color:var(--delft);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:rgba(47,74,122,.4);transition:text-decoration-color .25s var(--ease)}
.ct-mail a:hover,.ct-mail a:focus-visible{text-decoration-color:currentColor}
.ct-kvk{margin:8px 0 0;color:var(--ink-soft)}
.ct-kvk .todo{margin:0}
.ct-gebied{margin:24px 0 0;padding-top:20px;border-top:1px solid rgba(47,74,122,.2);font-family:var(--f-display);font-weight:600;font-stretch:90%;font-size:1.25rem;color:var(--delft)}
.ct-kaart{grid-column:8/13;min-width:0}
.ct-route{display:block;width:100%;height:auto;overflow:visible}
.ct-raster path{fill:none;stroke:rgba(47,74,122,.1);stroke-width:1}
.ct-rivier{fill:none;stroke:rgba(47,74,122,.28);stroke-width:1;stroke-dasharray:2 5}
.ct-weg{fill:none;stroke:var(--delft);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 1}
.ct-pin circle{fill:var(--paper);stroke:var(--delft);stroke-width:1.5}
.ct-pin .ct-pin-k{fill:var(--delft);stroke:none}
.ct-lab{font-family:var(--f-display);font-weight:800;font-stretch:72%;text-transform:uppercase;font-size:26px;fill:var(--ink)}
.ct-lab-s{font-family:var(--f-body);font-size:15px;fill:var(--ink-soft)}

/* ---------- beweging: alleen als contact.js Motion heeft en beweging mag (klasse ct-mo op .ct) ---------- */
.ct-mo [data-ct-r],.ct-mo [data-ct-rs]>*,.ct-mo .ct-pin{opacity:0}
.ct-mo .ct-weg{stroke-dashoffset:1}

/* ---------- tablet en telefoon ---------- */
@media(max-width:899px){
  .ct-links{grid-column:1/-1;position:static}
  .ct-foto{aspect-ratio:4/3;max-height:none}
  .ct-rechts{grid-column:1/-1;margin-top:48px}
  .ct-waar-t,.ct-kaart{grid-column:1/-1}
}
@media(max-width:599px){
  .ct-tiles{grid-template-columns:1fr}
  .ct-keus{grid-template-columns:1fr}
  .ct-deel{min-height:64px}
  .ct-fields{grid-template-columns:1fr}
  .ct-act .btn{justify-content:center}
  .ct-lab{font-size:30px}
  .ct-lab-s{font-size:19px}
}

@media(prefers-reduced-motion:reduce){
  .ct-deel,.ct-deel-i i,.ct-tile,.ct-link,.ct-mail a{transition:none}
}
/* 14-10 ronde 2: op 320 px stak "Stationsstraat 18" 4 px voorbij de kantlijn */
@media(max-width:359px){.ct-adr{font-size:2rem}}