/* ==========================================================================
   Nicolas Die Sleutelhouer Ou
   Snyplan — die lasersnyer as die identiteit.

   Die ontwerp is doelbewus net lig. Geen donkermodus nie: die handelsmerk is
   plat gesnyde akriel op 'n bleek agtergrondvel, en dit moet op elke foon
   dieselfde lyk.
   ========================================================================== */

:root{
  color-scheme: light;

  --bg:#EFEBDF;      --bg-2:#E6E1D2;
  --fg:#22352A;      --fg-2:#5F6F62;
  --line:#D6CFBC;
  --forest:#22352A;  --on-forest:#F1EDE1;
  --sky:#8CB6D6;     --on-sky:#1B2C22;
  --mustard:#E0A22C; --on-mustard:#22352A;
  --cherry:#CE3F2E;  --on-cherry:#FFF6EF;
  --tile:#F7F4ED;
  --hard:#22352A;
  --ring:#B87F17;

  --f:"Jost","Century Gothic","Futura",system-ui,-apple-system,sans-serif;
  --wrap:1080px;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--f);
  font-size:16.5px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{margin:0; font-weight:600; line-height:1.04; letter-spacing:-.02em; text-wrap:balance}
p{margin:0}
img{max-width:100%; height:auto; display:block}
a{color:inherit}

:focus-visible{outline:3px solid var(--ring); outline-offset:3px; border-radius:4px}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

html{scroll-behavior:smooth}

.eyebrow{font-weight:600; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase}
.wa-ico{width:1.05em; height:1.05em; flex:none; vertical-align:-.15em}
.prys{font-variant-numeric:tabular-nums; font-weight:600}
.was{opacity:.5; text-decoration:line-through; font-weight:400; margin-right:.4em}
.nota{font-size:12.5px; line-height:1.4; color:var(--fg-2); margin-top:6px}
.sku{font-size:11.5px; letter-spacing:.1em; font-weight:500; font-variant-numeric:tabular-nums}

/* --- skoolmarkdag-strook ------------------------------------------------- */
.skoolbar{
  background:var(--cherry); color:var(--on-cherry);
  text-align:center; padding:11px 18px; font-size:14px; font-weight:500;
}
.skoolbar b{font-weight:600}

/* --- hero ---------------------------------------------------------------- */
.hero{
  background:var(--sky); color:var(--on-sky);
  border-radius:0 0 34px 34px;
  padding:44px 20px 92px;
  position:relative; overflow:hidden;
}
.hero::after{                       /* kerflyne — die snypad */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.15;
  background:
    repeating-linear-gradient(90deg,transparent 0 63px,var(--on-sky) 63px 64px),
    repeating-linear-gradient(0deg, transparent 0 63px,var(--on-sky) 63px 64px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 78%);
          mask-image:linear-gradient(180deg,#000,transparent 78%);
}
.hero-in{max-width:660px; margin:0 auto; position:relative; z-index:1; text-align:center}
.hero h1.hero-h1{margin:0}
.hero-logo{width:min(420px,88%); height:auto; margin:0 auto 22px; display:block}
.hero h1{font-size:clamp(33px,8vw,50px); margin-bottom:15px}
.hero h1 em{font-style:normal; display:block; color:#FAF7EE}
.lead{max-width:40ch; margin:0 auto; opacity:.88}

.cta{display:flex; gap:11px; justify-content:center; flex-wrap:wrap; margin-top:26px}
.cta-mid{margin-top:22px}
.btn{
  display:inline-flex; align-items:center; gap:9px;
  text-decoration:none; font-weight:600; font-size:15.5px;
  padding:13px 22px; border-radius:13px;
  border:2.5px solid var(--hard);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn-go{background:var(--mustard); color:var(--on-mustard); box-shadow:4px 4px 0 var(--hard)}
.btn-go:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--hard)}
.btn-ghost{background:transparent; color:var(--on-sky)}
.btn-ghost:hover{background:rgba(255,255,255,.3)}

/* --- feite --------------------------------------------------------------- */
.facts{
  max-width:660px; margin:-60px auto 0; padding:0 20px;
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(3,1fr); gap:9px;
}
.fact{
  background:var(--bg); border:2.5px solid var(--hard); border-radius:13px;
  padding:12px 11px; text-align:center; box-shadow:4px 4px 0 var(--hard);
}
.fact b{display:block; font-weight:600; font-size:19px; line-height:1.15}
.fact span{
  font-size:11px; color:var(--fg-2); font-weight:500;
  letter-spacing:.07em; text-transform:uppercase;
}

/* --- afdelings ----------------------------------------------------------- */
.sec{max-width:var(--wrap); margin:0 auto; padding:54px 20px}
.sec + .sec{padding-top:0}
.sec-kop{margin-bottom:20px}
.sec-kop .eyebrow{color:var(--fg-2); display:block; margin-bottom:7px}
.sec-kop h2{font-size:clamp(27px,6vw,38px)}
.sec-kop p{font-size:15px; color:var(--fg-2); max-width:44ch; margin-top:9px}

/* --- filter -------------------------------------------------------------- */
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px}
.chip{
  font-family:var(--f); font-size:14px; font-weight:500;
  padding:8px 15px; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--fg-2); border:2px solid var(--line);
}
.chip:hover{border-color:var(--hard); color:var(--fg)}
.chip[aria-pressed="true"]{background:var(--forest); color:var(--on-forest); border-color:var(--forest)}

/* --- snyplan-rooster ----------------------------------------------------- */
.bed{
  --cell:30px;
  background-image:
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px var(--cell)),
    repeating-linear-gradient(0deg, var(--line) 0 1px,transparent 1px var(--cell));
  border:2.5px solid var(--hard); border-radius:18px;
  padding:16px; position:relative;
}
.bed::before,.bed::after{
  content:"+"; position:absolute;
  font-weight:500; color:var(--fg-2); font-size:15px; line-height:1;
}
.bed::before{top:6px; left:8px}
.bed::after{bottom:6px; right:8px}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:14px}

.kaart{
  background:var(--bg); border:2.5px solid var(--hard); border-radius:14px;
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:5px 5px 0 var(--hard);
  transition:transform .14s ease, box-shadow .14s ease;
}
.kaart:nth-child(3n+2){box-shadow:5px 5px 0 var(--mustard)}
.kaart:nth-child(3n+3){box-shadow:5px 5px 0 var(--sky)}
.kaart:hover{transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--hard)}
.kaart img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  background:var(--tile); border-bottom:2.5px solid var(--hard);
}
.kaart-lyf{padding:11px 12px 12px; display:flex; flex-direction:column; flex:1}
.kaart-lyf h3{font-size:17.5px}
.kaart-kat{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-2); font-weight:500; margin-top:2px;
}
.kaart-voet{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:auto; padding-top:10px;
}
.kaart-voet .prys{font-size:17px}
.koop{
  text-decoration:none; background:var(--forest); color:var(--on-forest);
  font-weight:500; font-size:12.5px; padding:7px 11px; border-radius:9px;
  display:inline-flex; align-items:center; gap:6px;
}
.koop:hover{background:var(--mustard); color:var(--on-mustard)}

.noscript{
  margin-top:16px; padding:16px; border:2px dashed var(--line);
  border-radius:12px; color:var(--fg-2); font-size:15px;
}

/* --- stappe -------------------------------------------------------------- */
.stappe{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px}
.stap{background:var(--bg-2); border:2.5px solid var(--hard); border-radius:14px; padding:18px}
.stap b{
  display:inline-flex; align-items:center; justify-content:center;
  width:31px; height:31px; border-radius:50%;
  background:var(--mustard); color:var(--on-mustard);
  font-weight:600; font-size:15px; margin-bottom:11px;
  border:2.5px solid var(--hard);
}
.stap h3{font-size:19px; margin-bottom:5px}
.stap p{font-size:14.5px; color:var(--fg-2)}

/* --- bestel -------------------------------------------------------------- */
.bestel{
  background:var(--forest); color:var(--on-forest);
  border-radius:26px; padding:38px 24px; text-align:center;
}
.bestel h2{font-size:clamp(26px,6vw,38px); margin-bottom:11px}
.bestel > p{max-width:46ch; margin:0 auto; opacity:.82; font-size:15.5px}
.kaartjie{
  display:flex; gap:14px; align-items:center; justify-content:center; flex-wrap:wrap;
  margin-top:26px; padding-top:24px;
  border-top:1px solid rgba(241,237,225,.18);
}
.kaartjie img{width:78px; height:78px; border-radius:11px; background:var(--on-forest); padding:5px; flex:none}
.kaartjie p{text-align:left; font-size:13.5px; max-width:33ch}

/* --- voet ---------------------------------------------------------------- */
.voet{
  max-width:var(--wrap); margin:0 auto; padding:44px 20px 54px;
  text-align:center; color:var(--fg-2); font-size:14px;
}
.voet-logo{width:min(190px,54%); height:auto; margin:0 auto 18px; opacity:.75}
.voet a{font-weight:500}
.voet .fyn{margin-top:8px; font-size:13px; opacity:.75}

/* --- klein skerms -------------------------------------------------------- */
@media (max-width:820px){
  .facts{grid-template-columns:1fr; gap:8px}
  .fact{display:flex; align-items:baseline; justify-content:space-between; text-align:left}
}

@media (max-width:520px){
  body{font-size:16px}
  .hero{padding:34px 16px 84px}
  .sec{padding:42px 16px}
  .grid{grid-template-columns:repeat(2,1fr); gap:10px}
  .bed{padding:10px; border-radius:14px}
  .kaart-lyf{padding:9px 10px 10px}
  .kaart-lyf h3{font-size:15.5px}
  .kaart-voet{flex-direction:column; align-items:flex-start; gap:6px}
}