/* 3dhuisje.nl/klm (Wouter 26 Oct 06:52): the same shop in KLM's look, the kerstbal only, only white with Delft blue, and
   the story of the film "Every Journey Leads Home". Loaded after shop.css on klm.html only. */
:root{--klm:#00A1DE;--klm-dark:#003145;--klm-mid:#0E3A5A;--klm-light:#E6F6FC;--delft:#1E3F96;--forest:var(--klm);--wine:var(--klm-dark);--ivory:#fff;--sand:#F2F8FB;--text:#0B2233;--soft:#4F6B7D;--rule:#D6E7EF;--serif:"Noto Sans",Jost,system-ui,sans-serif}
html.klm body{background:#fff;color:var(--text);font-family:"Noto Sans",Jost,system-ui,sans-serif}
html.klm h1,html.klm h2,html.klm h3{font-family:"Noto Sans",Jost,system-ui,sans-serif;color:var(--klm-dark)}

/* header: the crown, × 3dhuisje */
.klm .top{background:rgba(255,255,255,.97)!important;box-shadow:0 1px 0 var(--rule);z-index:60}
.klm .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--klm)}
.klm .brand .crown{width:64px;height:40px;flex:none}
.klm .brand .x{font:300 20px/1 "Noto Sans",sans-serif;color:var(--soft)}
.klm .brand .hd{font:600 18px/1 "Noto Sans",sans-serif;color:var(--klm-dark);letter-spacing:-.01em}
.klm .brand .wm{width:128px;height:30px}
/* 26 Oct 08:58: KLM logo × 3Dhuisje.nl on one line. Our logo's box includes the j's tail, so it sits 15% lower to centre its letters. */
.klm .brand{gap:14px}
.klm .brand a{display:flex;align-items:center;text-decoration:none}
.klm .brand .klmlogo{height:50px;width:auto;display:block}
.klm .brand .xx{width:20px;height:20px;flex:none;color:var(--klm)}
.klm .brand .hd-home .wm{width:164px;height:37px;position:relative;top:6px}
@media (max-width:1100px){.klm .brand .klmlogo{height:42px}.klm .brand .hd-home .wm{width:136px;height:31px;top:5px}.klm .brand .xx{width:16px;height:16px}.klm .brand{gap:10px}}
@media (max-width:560px){.klm .brand .klmlogo{height:34px}.klm .brand .hd-home .wm{width:104px;height:24px;top:4px}.klm .brand .xx{width:13px;height:13px}.klm .brand{gap:8px}}
.klm .nav a{color:var(--klm-dark);font-family:"Noto Sans",sans-serif}
.klm .order-btn{background:var(--klm);border-radius:6px;font-family:"Noto Sans",sans-serif;font-weight:600}
.klm .top .deadline{color:var(--klm-dark);border-color:var(--rule);border-radius:6px}
.klm .lang button[aria-pressed="true"]{background:var(--klm);color:#fff}
.klm .back-shop{font:500 13px/1 "Noto Sans",sans-serif;color:var(--soft);text-decoration:none;white-space:nowrap}
.klm .back-shop:hover{color:var(--klm)}
@media (max-width:760px){.klm .back-shop{display:none}}
@media (max-width:560px){.klm .brand .wm{width:96px;height:23px}.klm .brand .crown{width:48px;height:30px}.klm .brand .hd{font-size:15px}.klm .brand .x{font-size:16px}}

/* hero: a winter sky in KLM blue */
.klm .hero2{background:var(--klm-dark);color:#fff}
.klm .hero2-bg{background:radial-gradient(60% 55% at 72% 38%,rgba(0,161,222,.55),transparent 70%),radial-gradient(80% 60% at 20% 110%,rgba(255,206,140,.28),transparent 60%),linear-gradient(180deg,#002235 0%,#00385a 55%,#0a5f8a 100%);filter:none;transform:none}
.klm .hero2-bg:after{background:linear-gradient(90deg,rgba(0,22,36,.72) 0%,rgba(0,22,36,.25) 55%,transparent 100%)}
.klm .hero2 .kicker{color:#9FDDF5}
.klm .hero2 .big-h{color:#fff;font-weight:600;letter-spacing:-.03em}
.klm .hero2 .big-h em{color:#9FDDF5;font-style:normal}
.klm .hero2 .lead{color:#E3F3FA}
.klm .see{background:var(--klm);border-radius:6px;font-family:"Noto Sans",sans-serif;font-weight:600}
.klm .ticks.light li:before{border-color:#9FDDF5}
.klm .hero-plane{position:absolute;right:6%;top:max(130px,14%);width:min(34vw,440px);opacity:1;z-index:0;filter:drop-shadow(0 18px 24px rgba(0,0,0,.35));pointer-events:none;animation:klmfly 26s linear infinite}
@keyframes klmfly{0%{transform:translate(18vw,4vh)}100%{transform:translate(-70vw,-6vh)}}
@media (prefers-reduced-motion:reduce){.klm .hero-plane{animation:none}}

/* the story, scene by scene */
.klm-story{background:linear-gradient(180deg,#fff,var(--klm-light));padding:clamp(56px,8vw,110px) clamp(16px,4vw,48px)}
.klm-story .sec-head{max-width:760px;margin:0 auto 44px;text-align:center}
.klm-story .kicker{color:var(--klm)}
.klm-story h2{font:600 clamp(30px,4.2vw,52px)/1.08 "Noto Sans",sans-serif;letter-spacing:-.02em;margin:0 0 16px}
.klm-story .sub{color:var(--soft);font-size:17px;line-height:1.6;margin:0}
.klm-scenes{list-style:none;margin:0 auto;padding:0;max-width:1180px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:sc}
.klm-scenes li{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:22px 20px 20px;position:relative;box-shadow:0 18px 40px -30px rgba(0,49,69,.45)}
.klm-scenes li:before{counter-increment:sc;content:counter(sc);position:absolute;top:18px;right:18px;width:28px;height:28px;border-radius:50%;background:var(--klm-light);color:var(--klm);font:700 13px/28px "Noto Sans",sans-serif;text-align:center}
.klm-scenes .t{display:block;font:600 11px/1 "Noto Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--klm);margin:0 0 12px}
.klm-scenes b{display:block;font:600 18px/1.25 "Noto Sans",sans-serif;color:var(--klm-dark);margin:0 36px 10px 0}
.klm-scenes p{margin:0 0 12px;color:var(--soft);font-size:14.5px;line-height:1.55}
.klm-scenes q{display:block;quotes:"“" "”";font:italic 400 15px/1.5 "Noto Sans",sans-serif;color:var(--delft);border-left:3px solid var(--klm);padding-left:12px}
@media (max-width:1000px){.klm-scenes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.klm-scenes{grid-template-columns:1fr}}

/* the voice-over, in one go */
.klm-vo{background:var(--klm-dark);color:#fff;padding:clamp(56px,8vw,100px) clamp(16px,4vw,48px);text-align:center}
.klm-vo p{max-width:760px;margin:0 auto 14px;font:300 clamp(19px,2.2vw,26px)/1.5 "Noto Sans",sans-serif;color:#E3F3FA}
.klm-vo p.big{font-weight:600;color:#fff;font-size:clamp(24px,3vw,36px);margin-top:28px}

/* end card */
.klm-end{background:var(--klm);color:#fff;text-align:center;padding:clamp(56px,8vw,96px) clamp(16px,4vw,48px)}
.klm-end .crown{width:96px;height:60px;color:#fff;margin:0 auto 18px;display:block}
.klm-end .k{font:700 14px/1 "Noto Sans",sans-serif;letter-spacing:.32em;margin:0 auto 18px}
html.klm .klm-end h2{color:#fff;font:600 clamp(32px,5vw,60px)/1.05 "Noto Sans",sans-serif;margin:0 0 14px}
.klm-end p{margin:0 auto 26px;max-width:620px;font-size:18px;color:#EAF8FD}
.klm-end a.go{display:inline-block;background:#fff;color:var(--klm-dark);text-decoration:none;font:600 16px/1 "Noto Sans",sans-serif;padding:16px 26px;border-radius:6px}
.klm-end small{display:block;margin-top:26px;font-size:12px;color:#CFEFFB}

/* one product, one finish: the chooser, the colours and the colour photos go */
.klm #finish,.klm #paint,.klm #photo,.klm #fotos,.klm .soon,.klm #with,.klm .nb-hero{display:none!important}
.klm .stage .panel{border-radius:14px}
.klm .cta{background:var(--klm);border-radius:8px}
.klm .cta b{color:#fff}
.klm .promise b{color:var(--klm-dark)}
.klm .how,.klm .order,.klm .faq,.klm .specs{--wine:var(--klm-dark)}
.klm .foot{background:var(--klm-dark)}
.klm .zoomer button{background:rgba(0,49,69,.6)}
.klm .nb-head b,.klm .nb-sec summary{color:var(--klm-dark)}
.klm .nb-opts button[aria-pressed="true"],.klm .nb-opts button.on{background:var(--klm);border-color:var(--klm)}
@media (max-width:760px){.klm .hero-plane{display:none}}
/* the film in place of the scene cards (26 Oct 07:32) */
.klm .film{position:relative;max-width:1180px;margin:0 auto;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:radial-gradient(70% 70% at 70% 30%,rgba(0,161,222,.6),transparent 70%),linear-gradient(180deg,#002235,#00385a);box-shadow:0 30px 60px -30px rgba(0,49,69,.6)}
.klm .film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#002235}
.klm .film-wait{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fff;text-align:center;padding:16px}
.klm .film-wait b{font:600 clamp(26px,4vw,48px)/1.1 "Noto Sans",sans-serif}
.klm .film-wait span{font:400 15px/1 "Noto Sans",sans-serif;color:#9FDDF5;letter-spacing:.08em}
.klm .film.nofilm video{display:none}.klm .film.nofilm .film-wait{display:flex}

/* 26 Oct 07:54-07:55 (Wouter): the whole page in KLM colours, no dark text on dark boxes, no red hovers.
   Buttons use a deeper KLM blue so white text reads well; hover goes to KLM dark blue. */
html.klm{--klm-btn:#0067A8;--red:#0067A8;--olive:#003145;--k-kerstbal:#0067A8;--bg:255,255,255;--night:#fff;--cream:#F2F8FB;--paper:#fff;--wall:#E6F6FC;--brown:#003145;--brown2:#0E3A5A;--coral:#00A1DE;--coral2:#0067A8;--sage:#7FC6E6;--brass:#9FDDF5;--gold:#C9A24A;--gold2:#A9832F;--ink:#0B2233;--muted:#4F6B7D;--line:#D6E7EF;--green:#003145;--forest:var(--klm-btn);--forest-2:#003145;--wine:var(--klm-btn)}
.klm .order-btn,.klm .see,.klm .hero2 .see,.klm .cta,.klm #pay,.klm .lang button[aria-pressed="true"],.klm .nb-opts button[aria-pressed="true"],.klm .nb-opts button.on{background:var(--klm-btn)!important;border-color:var(--klm-btn)!important;color:#fff!important}
.klm .order-btn:hover,.klm .see:hover,.klm .hero2 .see:hover,.klm .cta:hover,.klm #pay:hover,.klm .klm-end a.go:hover{background:#003145!important;color:#fff!important}
.klm .order-btn:focus-visible,.klm .see:focus-visible,.klm .cta:focus-visible,.klm #pay:focus-visible{outline:3px solid #9FDDF5;outline-offset:2px}
.klm .dl:hover{background:var(--klm-btn);color:#fff}
.klm .share:hover,.klm .photo .up:hover{border-color:var(--klm)}
.klm .nb-photos .x:hover{border-color:var(--klm-btn);color:var(--klm-btn)}
.klm .nav a:hover,.klm .back-shop:hover{color:var(--klm-btn)}
.klm .sugg li:hover,.klm .sugg li[aria-selected=true]{background:var(--klm-light)}
/* dark boxes get light text */
.klm .tree{background:#003145}
.klm .tree h2,.klm .tree h2 em,.klm .tree .eyebrow{color:#fff}
.klm .tree .eyebrow{color:#9FDDF5}
.klm .foot,.klm .foot h3,.klm .foot b,.klm .foot p,.klm .foot nav a,.klm .foot .fine p{color:#E3F3FA}
.klm .foot h3{color:#9FDDF5}
.klm .foot nav a:hover{color:#fff}
.klm .foot .fine{border-color:rgba(255,255,255,.18)}
.klm .klm-end{background:#0067A8}
.klm .klm-end .k,.klm .klm-end p{color:#fff}
.klm .klm-end small{color:#E3F3FA}
.klm .order small,.klm .order .gift,.klm .order .more{color:var(--soft)}
.klm .moments{background:#003145}
.klm .moments .kicker{color:#9FDDF5}
.klm .moments h2,.klm .moments .mid-h{color:#fff}
.klm .moments figcaption b{color:#fff}
.klm .moments figcaption span,.klm .moments .imp{color:#CFE9F5}
.klm .moments .g-oma figcaption b,.klm .moments .g-ouders figcaption b,.klm .moments .g-zelf figcaption b{color:#003145}.klm .moments .g-oma figcaption span,.klm .moments .g-ouders figcaption span,.klm .moments .g-zelf figcaption span{color:#4F6B7D}
.klm .turnhint,.klm .ai-tag{background:rgba(0,49,69,.8);color:#fff}
/* subtitles on/off (Wouter 26 Oct 08:56) */
.klm .film-cc{position:absolute;top:12px;right:12px;z-index:3;padding:8px 14px;border-radius:999px;border:0;background:rgba(0,49,69,.82);color:#fff;font:600 13px/1 "Noto Sans",sans-serif;cursor:pointer}
.klm .film-cc:hover,.klm .film-cc:focus-visible{background:#0067A8;outline:2px solid #9FDDF5;outline-offset:2px}
.klm .film-cc[aria-pressed=false]{background:rgba(0,49,69,.55);color:#cfe9f5}
.klm .film video::cue{font-family:"Noto Sans",sans-serif;background:rgba(0,30,45,.72);color:#fff}