/*
Theme Name: White Label Lighting
Theme URI: https://whitelabellighting.nl
Author: White Label Lighting
Description: Marketing site voor White Label Lighting. Geen logo. Wel marge. Gebaseerd op het White Label Lighting design system (Atelier / Studio / Gallery looks).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: whitelabellighting
*/

/* ════════ tokens: colors ════════ */
:root{
--wl-canvas:#FBFAF7;--wl-ink:#141414;--wl-gray-warm:#E3E1DA;--wl-signal:#D85A30;--wl-signal-deep:#C04C24;
--wl-ink-60:rgba(20,20,20,.62);--wl-ink-40:rgba(20,20,20,.4);--wl-ink-15:rgba(20,20,20,.16);--wl-ink-08:rgba(20,20,20,.08);
--wl-canvas-70:rgba(251,250,247,.72);--wl-canvas-45:rgba(251,250,247,.45);--wl-canvas-18:rgba(251,250,247,.18);
--surface-page:var(--wl-canvas);--surface-contrast:var(--wl-ink);--surface-tint:var(--wl-gray-warm);
--text-body:var(--wl-ink);--text-muted:var(--wl-ink-60);--text-faint:var(--wl-ink-40);--text-on-dark:var(--wl-canvas);--text-on-dark-muted:var(--wl-canvas-70);
--accent-signal:var(--wl-signal);
--border-rule:var(--wl-ink);--border-hairline:var(--wl-ink-15);--border-hairline-dark:var(--wl-canvas-18);
--photo-base:#0D0C0A;
}

/* ════════ tokens: typography ════════ */
:root{
--font-grotesk:'Hanken Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;--font-serif:'Instrument Serif',Georgia,serif;
--text-display:clamp(40px,4.4vw,68px);--text-h2:clamp(28px,2.7vw,42px);--text-h3:clamp(19px,1.5vw,23px);
--text-body-lg:18px;--text-body:15.5px;--text-small:13.5px;--text-label:11.5px;
--leading-display:1.02;--leading-tight:1.08;--leading-body:1.55;
--tracking-display:-0.03em;--tracking-tight:-0.015em;--tracking-label:0.16em;
--weight-regular:400;--weight-medium:500;
}

/* ════════ tokens: spacing ════════ */
:root{
--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--space-24:96px;--space-32:128px;--space-40:160px;
--page-margin:clamp(24px,4.5vw,64px);--measure:32em;
--content-max:1100px; /* content boxed like the Shopify storefront (Dawn: 120rem box minus 2x5rem inner padding) */
--gutter:clamp(16px,2.2vw,32px);
--radius-pill:999px;
--ease-out:cubic-bezier(.22,.61,.36,1);
--dur-fast:.18s;
--dur-slow:.7s;
}

/* ════════ base ════════ */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-grotesk);font-size:var(--text-body);line-height:var(--leading-body);font-weight:var(--weight-regular);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,figure,ul{margin:0}
img{max-width:100%}
a{color:inherit}
a:hover{color:inherit}
b,strong{font-weight:var(--weight-medium)}
::selection{background:var(--wl-ink);color:var(--wl-canvas)}
[hidden]{display:none !important}

/* ════════ components ════════ */
.wl-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:var(--radius-pill);font-family:var(--font-grotesk);font-weight:var(--weight-medium);font-size:14px;line-height:1;padding:13px 26px;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:background var(--dur-fast),transform var(--dur-fast)}
.wl-btn:active{transform:scale(.98)}
.wl-btn--lg{font-size:15px;padding:16px 32px}
.wl-btn--sm{font-size:13px;padding:10px 20px}
.wl-btn--primary{background:var(--wl-ink);color:var(--wl-canvas)}
.wl-btn--primary:hover{background:#000}
.wl-btn--inverse{background:var(--wl-canvas);color:var(--wl-ink)}
.wl-btn--inverse:hover{background:#fff}
.wl-btn--signal{background:var(--wl-signal);color:#FBFAF7}
.wl-btn--signal:hover{background:var(--wl-signal-deep)}
.wl-link{display:inline-flex;align-items:baseline;gap:8px;color:inherit;font-family:var(--font-grotesk);font-size:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;cursor:pointer;background:none;border:0;padding:0;transition:opacity var(--dur-fast)}
.wl-link:hover{opacity:.55}
.wl-label{display:inline-flex;align-items:baseline;gap:12px;font-family:var(--font-grotesk);font-size:var(--text-label);font-weight:var(--weight-medium);letter-spacing:var(--tracking-label);text-transform:uppercase;line-height:1.4;color:var(--text-body)}
.wl-label--muted{color:var(--text-muted)}
.wl-label--signal{color:var(--accent-signal)}
.wl-label--on-dark{color:var(--text-on-dark-muted)}
.wl-label__index{opacity:.5}
.wl-rule{border:0;margin:0;border-top:2px solid var(--border-rule)}
.wl-rule--hairline{border-top:1px solid var(--border-hairline)}
.wl-rule--on-dark{border-top-color:var(--wl-canvas)}
.wl-rule--hairline.wl-rule--on-dark{border-top-color:var(--border-hairline-dark)}
.wl-display{font-family:var(--font-grotesk);font-size:var(--text-display);font-weight:var(--weight-medium);line-height:var(--leading-display);letter-spacing:var(--tracking-display);margin:0;text-wrap:balance}
.wl-h2{font-family:var(--font-grotesk);font-size:var(--text-h2);font-weight:var(--weight-medium);line-height:1.06;letter-spacing:-0.02em;margin:0;text-wrap:balance}
.wl-h3{font-family:var(--font-grotesk);font-size:var(--text-h3);font-weight:var(--weight-medium);line-height:1.2;letter-spacing:var(--tracking-tight);margin:0}
.wl-display em,.wl-h2 em,.wl-h3 em,.wl-em{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:0}
.wl-display em,.wl-h2 em{font-size:1.03em}
.wl-body-lg{font-family:var(--font-grotesk);font-size:var(--text-body-lg);line-height:1.5;margin:0}
.wl-tile{margin:0;display:block}
a.wl-tile,a .wl-tile{text-decoration:none;color:inherit}
.wl-tile__media{position:relative;overflow:hidden;background:var(--photo-base)}
.wl-tile__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out);position:absolute;inset:0}
.wl-tile:hover .wl-tile__media img{transform:scale(1.045)}
.wl-tile__caption{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:14px}
.wl-tile__title{font-size:17px;font-weight:var(--weight-regular)}
.wl-field{display:flex;flex-direction:column;gap:8px}
.wl-field input,.wl-field textarea{font-family:var(--font-grotesk);font-size:15.5px;color:var(--text-body);background:transparent;border:0;border-bottom:1px solid var(--wl-ink-40);border-radius:0;padding:10px 0;outline:none;transition:border-color var(--dur-fast);width:100%}
.wl-field input::placeholder,.wl-field textarea::placeholder{color:var(--text-faint)}
.wl-field input:focus,.wl-field textarea:focus{border-bottom-color:var(--wl-ink)}
.wl-field__hint{font-size:var(--text-small);color:var(--text-muted)}
.wl-nav{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:22px var(--page-margin);border-bottom:1px solid var(--border-hairline);background:var(--surface-page)}
.wl-nav__logo{display:flex;align-items:center;text-decoration:none}
.wl-nav__logo img{height:26px;width:auto;display:block}
.wl-nav__links{display:flex;align-items:center;gap:36px}
.wl-nav__link{font-size:14px;text-decoration:none;color:var(--text-body);transition:opacity var(--dur-fast)}
.wl-nav__link:hover{opacity:.55}
.wl-nav__link--active{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.wl-footer{background:var(--surface-contrast);color:var(--text-on-dark);padding:var(--space-16) var(--page-margin) var(--space-8)}
.wl-footer__top{display:flex;justify-content:space-between;align-items:flex-start;gap:48px;padding-bottom:var(--space-12)}
.wl-footer__logo img{height:30px;width:auto;display:block}
.wl-footer__links{display:flex;gap:36px}
.wl-footer__link{font-size:14px;text-decoration:none;color:var(--text-on-dark);transition:opacity var(--dur-fast)}
.wl-footer__link:hover{opacity:.55}
.wl-footer__bottom{display:flex;justify-content:space-between;gap:24px;padding-top:var(--space-6);border-top:1px solid var(--border-hairline-dark);font-size:var(--text-small);color:var(--text-on-dark-muted)}

/* ════════ site layout ════════ */
/* Content is capped at --content-max and centered (whitespace left/right on wide
   screens, like the Shopify storefront); backgrounds and hairlines stay full-bleed. */
.wrap,.wl-nav,.wl-footer{padding-left:max(var(--page-margin),calc((100% - var(--content-max)) / 2));padding-right:max(var(--page-margin),calc((100% - var(--content-max)) / 2))}
.grid12{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter)}
.dark{background:var(--surface-contrast);color:var(--text-on-dark)}
a{color:var(--wl-ink)}a:hover{opacity:.6}

/* ── look & feel variants: retint the primitives, everything downstream follows ── */
[data-look]{--surface-page:var(--wl-canvas);--surface-contrast:var(--wl-ink);--surface-tint:var(--wl-gray-warm);--text-body:var(--wl-ink);--text-muted:var(--wl-ink-60);--text-faint:var(--wl-ink-40);--text-on-dark:var(--wl-canvas);--text-on-dark-muted:var(--wl-canvas-70);--accent-signal:var(--wl-signal);--border-rule:var(--wl-ink);--border-hairline:var(--wl-ink-15);--border-hairline-dark:var(--wl-canvas-18)}
[data-look=studio]{--wl-canvas:#F3F3F1;--wl-ink:#17181A;--wl-gray-warm:#DEDEDB;--wl-signal:#A8813C;--wl-signal-deep:#8C6A2E;--wl-ink-60:rgba(23,24,26,.62);--wl-ink-40:rgba(23,24,26,.4);--wl-ink-15:rgba(23,24,26,.16);--wl-ink-08:rgba(23,24,26,.08);--wl-canvas-70:rgba(243,243,241,.72);--wl-canvas-45:rgba(243,243,241,.45);--wl-canvas-18:rgba(243,243,241,.18);--photo-base:#0B0C0D}
[data-look=gallery]{--wl-canvas:#FFFFFF;--wl-ink:#101314;--wl-gray-warm:#E6E8E8;--wl-signal:#1F6F78;--wl-signal-deep:#175A61;--wl-ink-60:rgba(16,19,20,.62);--wl-ink-40:rgba(16,19,20,.4);--wl-ink-15:rgba(16,19,20,.16);--wl-ink-08:rgba(16,19,20,.08);--wl-canvas-70:rgba(255,255,255,.72);--wl-canvas-45:rgba(255,255,255,.45);--wl-canvas-18:rgba(255,255,255,.18);--photo-base:#080A0B}
[data-look=studio] .wl-display em,[data-look=studio] .wl-h2 em{font-family:var(--font-grotesk);font-style:normal;font-size:1em}

/* ── nav / footer overrides ── */
.wl-nav{position:sticky;top:0;z-index:60}
.wl-nav__logo img{height:42px}
/* ── mobile hamburger ── */
.wll-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:0;border:none;background:transparent;cursor:pointer;margin:-8px 0}
.wll-burger span{display:block;width:22px;height:1.5px;background:var(--wl-ink);transition:transform var(--dur-fast),opacity var(--dur-fast)}
.wl-nav.is-open .wll-burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.wl-nav.is-open .wll-burger span:nth-child(2){opacity:0}
.wl-nav.is-open .wll-burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.wll-menu{display:none}
.wll-menu__link{font-size:17px;text-decoration:none;color:var(--text-body);padding:15px 0;border-top:1px solid var(--border-hairline)}
.wll-menu__cta{margin-top:16px;justify-content:center;min-height:48px;padding:14px 24px;font-size:14px}
.wl-footer__logo img{height:40px}
.wl-btn--primary:hover{background:var(--wl-signal);color:var(--wl-canvas)}
.wll-social{display:inline-flex;align-items:center}
.wll-social svg{width:19px;height:19px;display:block}

/* ── list-style section rows ── */
.toolrow{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);padding:38px 0;border-top:1px solid var(--border-hairline);align-items:baseline}
.toolrow__num{grid-column:1 / 2;color:var(--text-faint);transition:color var(--dur-fast)}
.toolrow:hover .toolrow__num{color:var(--accent-signal)}
.toolrow__title{grid-column:2 / 8}
.toolrow__desc{grid-column:9 / 13;color:var(--text-muted)}
.doc-row{display:grid;grid-template-columns:64px 1fr;column-gap:var(--gutter);padding:24px 0;border-top:1px solid var(--border-hairline);align-items:baseline}
.doc-row__num{color:var(--text-faint);transition:color var(--dur-fast)}
.doc-row:hover .doc-row__num{color:var(--accent-signal)}

/* ── partner demo ── */
.dropzone{margin-top:28px;border:1px dashed var(--wl-ink-40);padding:52px 40px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;cursor:pointer;transition:border-color var(--dur-fast)}
.dropzone:hover{border-color:var(--wl-ink)}
.demo-progress{height:2px;background:var(--wl-ink-15);margin:28px 0 20px;max-width:520px}
.demo-progress span{display:block;height:100%;background:var(--wl-ink);width:0;animation:demofill 3s linear forwards}
@keyframes demofill{to{width:100%}}
.lijst-row{display:grid;grid-template-columns:110px 1fr 52px;gap:16px;padding:13px 0;border-top:1px solid var(--border-hairline);font-size:15px;align-items:baseline}
.calc-col{display:flex;flex-direction:column}
.calc-row{display:flex;flex-direction:column;gap:8px;padding:18px 0;border-top:1px solid var(--border-hairline-dark)}
.calc-row__line{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;color:var(--text-on-dark-muted)}
.calc-row__val{color:var(--text-on-dark);font-size:17px}
.calc-bar{height:8px;background:var(--wl-canvas-45)}
.calc-bar--signal{background:var(--accent-signal)}

/* ── over ons: supply-chain flow ── */
.flowpanel{border:1px solid var(--border-hairline);padding:28px 30px}
.flowpanel--dark{border-color:var(--border-hairline-dark)}
.flowline{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:20px}
.flownode{display:flex;flex-direction:column;gap:5px}
.flownode__role{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint)}
.flownode__name{font-size:clamp(17px,1.6vw,21px);letter-spacing:-0.01em}
.flowarrow{color:var(--text-faint);font-size:19px;line-height:1}
.flownode--hi .flownode__name{color:var(--accent-signal)}
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.stat__num{font-family:var(--font-grotesk);font-weight:500;font-size:clamp(38px,4.6vw,62px);letter-spacing:-0.03em;line-height:1}
.stat__lbl{color:var(--text-muted);margin-top:12px}
.stat__lbl--dark{color:var(--text-on-dark-muted)}

/* ── verkooptools: Luma chat ── */
.luma{border:1px solid var(--border-hairline);display:flex;flex-direction:column;background:var(--surface-page)}
.luma__bar{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--border-hairline)}
.luma__id{display:flex;align-items:center;gap:9px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
.luma__live{width:7px;height:7px;border-radius:999px;background:var(--wl-signal)}
@media (prefers-reduced-motion: no-preference){.luma__live{animation:pulse 2.4s ease-in-out infinite}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.luma__body{padding:22px;display:flex;flex-direction:column;gap:13px;min-height:320px}
.bubble{max-width:82%;padding:13px 17px;font-size:15px;line-height:1.5}
.bubble--user{align-self:flex-end;background:var(--wl-ink);color:var(--wl-canvas)}
.bubble--bot{align-self:flex-start;background:var(--wl-gray-warm);color:var(--wl-ink)}
.luma__chips{display:flex;flex-wrap:wrap;gap:9px;padding:0 22px 22px}
.chip{border:1px solid var(--border-hairline);background:transparent;color:inherit;font-family:var(--font-grotesk);font-size:13px;padding:9px 14px;cursor:pointer;transition:border-color var(--dur-fast),background var(--dur-fast);text-align:left}
.chip:hover{border-color:var(--wl-ink);background:var(--wl-ink-08)}
.typing{display:inline-flex;gap:5px;align-items:center;height:10px}
.typing i{width:5px;height:5px;border-radius:999px;background:var(--wl-ink-40);display:block}
@media (prefers-reduced-motion: no-preference){.typing i{animation:tblink 1.1s infinite}.typing i:nth-child(2){animation-delay:.16s}.typing i:nth-child(3){animation-delay:.32s}}
@keyframes tblink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.caps{list-style:none;margin:0;padding:0}
.caps li{display:grid;grid-template-columns:30px 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--border-hairline);align-items:baseline}
.caps li b{font-weight:var(--weight-medium)}
.caps li>span{color:var(--text-faint)}
.caps li p{color:var(--text-muted);margin:5px 0 0;font-size:14.5px}

/* ── verkooptools: lichtplan preview ── */
.plan{position:relative;display:block}
.plan__fig{position:relative;display:block;background:var(--photo-base);aspect-ratio:4 / 3;overflow:hidden}
.plan__room{position:absolute;border:1px solid var(--wl-canvas-45)}
.plan__wall{position:absolute;background:var(--wl-canvas-18)}
.plan__pt{position:absolute;width:9px;height:9px;border-radius:999px;background:var(--wl-signal);transform:translate(-50%,-50%);box-shadow:0 0 0 5px color-mix(in srgb, var(--wl-signal) 16%, transparent)}
.plan__pt--pendel{width:13px;height:13px;box-shadow:0 0 0 7px color-mix(in srgb, var(--wl-signal) 14%, transparent)}
.plan__cap{display:block;padding:12px 0 0;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
.doc{background:#fff;border:1px solid var(--border-hairline);padding:28px}
.doc__logo{border:1px dashed var(--wl-ink-40);padding:10px 16px}

/* ── partner hero: foreground sign-up over imagery ── */
.phero{position:relative;overflow:hidden;background:var(--photo-base)}
.phero__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,11,9,.92) 0%,rgba(13,11,9,.76) 44%,rgba(13,11,9,.56) 100%)}
.phero__inner{position:relative;min-height:min(90vh,860px);align-items:center;padding-top:52px;padding-bottom:52px}
.signup{background:var(--surface-page);border-top:3px solid var(--wl-signal);padding:34px 34px 30px;box-shadow:0 26px 72px rgba(0,0,0,.38);display:flex;flex-direction:column;gap:17px}
.trust{display:flex;flex-wrap:wrap;gap:14px 28px}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
@media (max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}.phero__inner{min-height:0}}

/* ── hero headline: two sentences, own lines ── */
.hl-s{display:block}

/* ── USP strip: numbered small-caps row, stacks to hairline rows on mobile ── */
.usp{display:flex;flex-wrap:wrap;gap:14px clamp(28px,5vw,72px);padding-top:24px}
.usp__item{display:flex;align-items:baseline;gap:9px}
.usp__num{font-size:11.5px;letter-spacing:.16em;color:var(--text-faint);font-variant-numeric:tabular-nums}
.usp__txt{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}

/* ── hero media ── */
.hero-media{position:absolute;inset:0;background:var(--photo-base)}
.hero-media video,.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fill-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ════════ mobile layout (was html[data-view=mobile], now a real media query) ════════ */
@media (max-width:860px){
:root{--page-margin:20px}
.grid12{grid-template-columns:1fr;row-gap:34px}
.grid12>*{grid-column:1 / -1 !important;margin-top:0 !important}
.toolrow{grid-template-columns:34px 1fr;row-gap:6px;padding:26px 0}
.toolrow__num{grid-column:1 / 2}
.toolrow__title,.toolrow__desc{grid-column:2 / -1}
.doc-row{grid-template-columns:34px 1fr}
.statgrid{grid-template-columns:1fr;gap:32px}
.gallery{grid-template-columns:repeat(2,1fr)}
.phero__inner{min-height:0;padding-top:40px;padding-bottom:40px;row-gap:34px}
.phero__scrim{background:linear-gradient(180deg,rgba(13,11,9,.78) 0%,rgba(13,11,9,.9) 100%)}
.signup{padding:26px 22px 24px}
.luma__body{min-height:210px}
.bubble{max-width:92%}
.lijst-row{grid-template-columns:1fr auto;row-gap:2px}
.dropzone{padding:34px 22px}
.wl-display{font-size:clamp(31px,8.4vw,40px)}
.hl-s+.hl-s{margin-top:.55em}
.usp{display:block;padding-top:8px}
.usp__item{gap:14px;padding:15px 0;border-top:1px solid var(--border-hairline)}
.usp__txt{font-size:14.5px;letter-spacing:0;text-transform:none;color:var(--text-body)}
/* nav collapses to burger */
.wl-nav__links{display:none}
.wll-burger{display:inline-flex}
.wl-nav{position:sticky}
.wl-nav.is-open .wll-menu{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;top:100%;left:0;right:0;background:var(--surface-page);border-bottom:1px solid var(--border-hairline);padding:6px var(--page-margin) 20px;box-shadow:0 22px 48px rgba(0,0,0,.14)}
/* footer stacks */
.wl-footer{padding-left:var(--page-margin);padding-right:var(--page-margin)}
.wl-footer__top{flex-direction:column;align-items:stretch;gap:30px}
.wl-footer__links{flex-direction:column;gap:0}
.wl-footer__links>.wl-footer__link{padding:13px 0;border-top:1px solid var(--border-hairline-dark)}
.wl-footer__top>*:last-child,.wl-footer__top address{text-align:left !important}
.wl-footer__bottom{flex-direction:column;align-items:flex-start;gap:20px}
.wl-footer__bottom nav{gap:10px}
.wl-footer__bottom a{display:inline-flex;align-items:center;min-height:44px}
.wl-footer__bottom a.wll-social{min-width:44px;justify-content:center}
.wl-footer__bottom>*{max-width:100%}
}