/* =================================================================
   Flesko — landing page stylesheet
   Ported 1:1 from the prototype. Design tokens are hardcoded.
   ================================================================= */

:root{
  --steel-950:#0B0E12; --steel-900:#12161C; --steel-800:#1C222B;
  --steel-700:#2A3240; --steel-500:#5A6577; --steel-300:#A8B0BE; --steel-100:#E6E8ED;
  --paper:#F4F5F2; --bottle:#1B3A2F; --amber:#C97A18; --amber-2:#E4A64B;
  /* Text-only copper for light backgrounds: --amber is 3.0-3.3:1 on white/paper
     (fails WCAG AA for small text); this darker step passes at 4.6-5.0:1.
     Keep --amber itself for buttons and dark backgrounds. */
  --amber-text:#A0600C;
  --rule:rgba(255,255,255,.08); --rule-dk:rgba(0,0,0,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--steel-950);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.mono{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.display{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.01em}
.kicker{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.22em;font-size:12px}
a{color:inherit}
/* Skip link: visually hidden until keyboard-focused, then on top of the nav */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--steel-950);color:#fff;padding:12px 20px;font-family:Inter,sans-serif;font-size:14px;text-decoration:none}
.skip-link:focus{left:0}
.skip-link:focus-visible{outline:2px solid var(--amber-2);outline-offset:-2px}
.wrap{max-width:1440px;margin:0 auto;padding-left:48px;padding-right:48px}
@media(max-width:720px){.wrap{padding-left:20px;padding-right:20px}}

/* NAV */
nav.top{position:sticky;top:0;z-index:50;background:rgba(11,14,18,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule);color:var(--steel-100)}
nav.top .row{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand .wm{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:24px;text-transform:uppercase;letter-spacing:.04em;color:#fff}
.brand .wm .dot{color:var(--amber-2)}
/* Optional uploaded logo + icon (replace SVG mark + text wordmark when set) */
.brand .brand-icon{max-height:32px;width:auto;display:block}
.brand .brand-logo{max-height:36px;width:auto;display:block}
footer.flesko-footer .brand .brand-icon.footer-size{max-height:48px}
footer.flesko-footer .brand .brand-logo.footer-size{max-height:42px}
nav.top ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
nav.top ul a{font-size:13px;color:var(--steel-300);text-decoration:none;font-weight:500}
nav.top ul a:hover{color:#fff}
nav.top .cta{display:flex;gap:12px;align-items:center}
/* Mobile nav: collapse is invisible on desktop (display:contents), a dropdown on mobile. */
.nav-collapse{display:contents}
.nav-toggle{display:none;background:none;border:0;color:var(--steel-100);cursor:pointer;width:42px;height:42px;align-items:center;justify-content:center;border-radius:4px}
.nav-toggle:hover{color:#fff}
.nav-toggle:focus-visible{outline:2px solid var(--amber-2);outline-offset:2px}
.nav-toggle .bars,.nav-toggle .bars::before,.nav-toggle .bars::after{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.nav-toggle .bars{position:relative}
.nav-toggle .bars::before{content:"";position:absolute;left:0;top:-7px}
.nav-toggle .bars::after{content:"";position:absolute;left:0;top:7px}
nav.top.open .nav-toggle .bars{background:transparent}
nav.top.open .nav-toggle .bars::before{transform:translateY(7px) rotate(45deg)}
nav.top.open .nav-toggle .bars::after{transform:translateY(-7px) rotate(-45deg)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:13px;text-decoration:none;border-radius:2px;border:none;cursor:pointer}
.btn-primary{background:var(--amber);color:var(--steel-950)}
.btn-primary:hover{background:var(--amber-2)}
.btn-ghost{background:transparent;color:var(--steel-100);border:1px solid var(--rule)}
.btn-ghost:hover{border-color:var(--steel-300)}
@media(max-width:860px){
  nav.top .row{position:relative}
  .nav-toggle{display:inline-flex}
  .nav-collapse{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(11,14,18,.98);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:8px 0 20px;flex-direction:column}
  nav.top.open .nav-collapse{display:flex}
  nav.top .nav-collapse ul{display:flex;flex-direction:column;gap:0;width:100%;padding:0 4px}
  nav.top .nav-collapse ul a{display:block;padding:14px 8px;font-size:15px;border-bottom:1px solid var(--rule)}
  nav.top .nav-collapse ul li:last-child a{border-bottom:none}
  nav.top .nav-collapse .cta{display:flex;flex-direction:column;gap:10px;width:100%;padding:16px 8px 0}
  nav.top .nav-collapse .cta .btn{width:100%;justify-content:center;padding:14px}
}

/* HERO */
.hero{position:relative;background:var(--steel-950);color:var(--steel-100);overflow:hidden;min-height:780px;display:flex;flex-direction:column;justify-content:space-between}
.hero .grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:80px 80px;opacity:.6}
.hero .glow{position:absolute;right:-160px;top:-200px;width:680px;height:680px;border-radius:50%;background:radial-gradient(closest-side,rgba(201,122,24,.32),transparent 70%);filter:blur(20px);pointer-events:none}
.hero-inner{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:48px;padding:72px 0 96px;align-items:center}
.hero-text .kicker{color:var(--amber-2);margin-bottom:22px;display:flex;align-items:center;gap:10px}
.hero-text .kicker .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--amber-2);box-shadow:0 0 0 3px rgba(228,166,75,.2)}
.hero h1{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(48px,7vw,128px);line-height:.88;letter-spacing:-.005em;margin:0 0 28px;color:#fff}
.hero h1 .amber{color:var(--amber-2)}
.hero .lead{font-size:18px;line-height:1.55;color:var(--steel-300);max-width:520px;margin:0 0 32px}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap}
.hero .stats{display:flex;gap:0;margin-top:56px;padding-top:32px;border-top:1px solid var(--rule)}
.hero .stat{padding:0 30px}
.hero .stat:first-child{padding-left:0}
.hero .stat + .stat{border-left:1px solid var(--rule)}
.hero .stat .v{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:21px;color:#fff;line-height:1.1;text-transform:uppercase;letter-spacing:.02em}
.hero .stat .l{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-300);margin-top:6px}

/* Floating bottles stage — 3D perspective + glow + ground shadow */
.stage{position:relative;height:560px;perspective:1400px;perspective-origin:50% 30%}

/* .bottle = wrapper div. Receives parallax (cursor) only.
   transform-style: preserve-3d is critical here — without it, the inner SVG's
   3D rotateY/rotateX would be flattened by this wrapper, killing the depth. */
.bottle{position:absolute;will-change:transform;transition:transform .6s cubic-bezier(.2,.7,.3,1);transform-style:preserve-3d}
/* Inner SVG / uploaded photo = receives the dance animation. Composes with parallax cleanly. */
.bottle svg,.bottle img{display:block;width:100%;height:auto;transform-style:preserve-3d;will-change:transform}
/* Photo hero: uploaded product photos take over the stage — centered row,
   sized by HEIGHT so the bottle reads large regardless of transparent padding
   in the file. Handles 1, 2 or 3 photos; 2 gives the cleanest composition. */
/* No overflow:hidden here — the dance/parallax lifts the bottle up to ~40px
   and would clip the cap on tall viewports; .hero already clips the stage. */
.photo-stage{display:flex;align-items:center;justify-content:center;gap:24px;height:560px}
.photo-stage .bottle{position:relative;flex:0 1 auto;min-width:0}
.photo-stage .bottle img{width:auto;height:clamp(360px,52vh,520px);max-width:100%;object-fit:contain;filter:drop-shadow(0 22px 32px rgba(0,0,0,.55))}
.photo-stage .bottle:nth-child(1) img{animation:dance1 9s cubic-bezier(.4,0,.2,1) infinite}
.photo-stage .bottle:nth-child(2) img{animation:dance2 11s cubic-bezier(.4,0,.2,1) infinite}
.photo-stage .bottle:nth-child(3) img{animation:dance3 8s cubic-bezier(.4,0,.2,1) infinite}

/* Soft amber ambient glow per bottle (premium-photo feel on dark bg) */
.bottle::before{content:"";position:absolute;inset:-15% -15% -10% -15%;background:radial-gradient(ellipse at 50% 40%,rgba(228,166,75,.14),transparent 65%);filter:blur(24px);z-index:-1;pointer-events:none}
/* Per-bottle ground shadow — bottle dances ABOVE its shadow ("lift" effect) */
.bottle::after{content:"";position:absolute;left:50%;bottom:-4%;width:60%;height:8px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(0,0,0,.5),transparent 70%);filter:blur(4px);z-index:-1;pointer-events:none}

.b1{left:6%;top:8%;width:140px;z-index:1}
.b2{left:34%;top:14%;width:210px;z-index:3}
.b3{left:64%;top:32%;width:170px;z-index:2}

.b1 svg,.b1 img{animation:dance1 9s cubic-bezier(.4,0,.2,1) infinite}
.b2 svg,.b2 img{animation:dance2 11s cubic-bezier(.4,0,.2,1) infinite}
.b3 svg,.b3 img{animation:dance3 8s cubic-bezier(.4,0,.2,1) infinite}

@keyframes dance1{
  0%,100%{transform:translate3d(0,0,0) rotateZ(-3deg) rotateY(-12deg)}
  33%{transform:translate3d(2px,-12px,5px) rotateZ(1deg) rotateY(8deg)}
  66%{transform:translate3d(-3px,-22px,10px) rotateZ(2deg) rotateY(20deg)}
}
@keyframes dance2{
  0%,100%{transform:translate3d(-2px,-4px,0) rotateZ(2deg) rotateY(15deg)}
  25%{transform:translate3d(3px,-18px,15px) rotateZ(-1deg) rotateY(-10deg)}
  50%{transform:translate3d(-1px,-30px,20px) rotateZ(-3deg) rotateY(-22deg) rotateX(4deg)}
  75%{transform:translate3d(2px,-12px,8px) rotateZ(1deg) rotateY(5deg)}
}
@keyframes dance3{
  0%,100%{transform:translate3d(2px,-3px,0) rotateZ(-2deg) rotateY(0deg)}
  50%{transform:translate3d(-3px,-20px,12px) rotateZ(4deg) rotateY(-25deg) rotateX(-3deg)}
}
.stage::after{content:"";position:absolute;left:50%;bottom:0;width:80%;height:40px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(0,0,0,.4),transparent 70%);filter:blur(10px);z-index:-1;pointer-events:none}

/* TRUST STRIP — thin amber band under the hero (replaces the old ticker). */
.trust{background:var(--amber);color:var(--steel-950);border-top:2px solid rgba(0,0,0,.16);border-bottom:2px solid rgba(0,0,0,.16)}
.trust .trust-row{display:flex;justify-content:center;gap:14px 46px;flex-wrap:wrap;padding:16px 0}
.trust-item{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:16px;letter-spacing:.04em;display:inline-flex;align-items:center;gap:12px}
.trust-item::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--steel-950);flex:0 0 auto}

@media(max-width:1080px){
  .hero-inner{grid-template-columns:1fr;padding:56px 0 72px;gap:32px}
  .stage{height:340px;display:none}
  .hero .stats{gap:24px 32px;flex-wrap:wrap}
  .hero .stat{padding:0}
  .hero .stat + .stat{border-left:none}
  .hero{min-height:auto}
}
@media(max-width:540px){
  .hero .stats{gap:20px}
  .hero .stat .v{font-size:34px}
}

/* SECTIONS */
section{padding:88px 0;position:relative}
/* Anchor targets land below the ~75px sticky nav (esp. #waarom, which has
   padding-top:0 and would otherwise disappear under it). */
section[id]{scroll-margin-top:88px}
section + section{margin-top:0}
.sec-head{display:grid;grid-template-columns:240px 1fr;gap:48px;margin-bottom:56px;align-items:start}
.sec-num{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--amber-text)}
.sec-title{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(40px,5vw,64px);line-height:.95;margin:0;max-width:900px}
.sec-desc{margin-top:18px;font-size:16px;line-height:1.6;color:var(--steel-700);max-width:640px}
@media(max-width:720px){.sec-head{grid-template-columns:1fr;gap:10px}}

/* USP grid */
.usps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--rule-dk);border-radius:4px;background:#fff;overflow:hidden}
.usp{padding:36px 28px;border-right:1px solid var(--rule-dk);position:relative}
.usp:last-child{border-right:none}
.usp .ic{width:48px;height:48px;border-radius:4px;background:var(--steel-950);color:var(--amber-2);display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.usp h3{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:24px;margin:0 0 10px;letter-spacing:.02em}
.usp p{font-size:14px;line-height:1.55;color:var(--steel-700);margin:0}
.usp .tag{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber-text);margin-top:18px;display:block}
@media(max-width:960px){.usps{grid-template-columns:repeat(2,1fr)}.usp:nth-child(2n){border-right:none}.usp:nth-child(-n+2){border-bottom:1px solid var(--rule-dk)}}
@media(max-width:540px){.usps{grid-template-columns:1fr}.usp{border-right:none;border-bottom:1px solid var(--rule-dk)}.usp:last-child{border-bottom:none}}

/* CATALOG */
.catalog{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pcard{background:#fff;border:1px solid var(--rule-dk);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;text-decoration:none;color:inherit}
.pcard .img{aspect-ratio:1/1;background:linear-gradient(180deg,#FAFBF7 0%,var(--paper) 100%);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.pcard .img::after{content:"";position:absolute;left:8%;right:8%;bottom:14%;height:8px;background:radial-gradient(ellipse at center,rgba(0,0,0,.16),transparent 70%);filter:blur(2px)}
.pcard.wide{grid-column:span 2}
.pcard.wide .img{aspect-ratio:auto;min-height:180px}
.pcard.wide{flex-direction:row}
.pcard.wide .img{flex:0 0 44%}
.pcard.wide .info{flex:1}
.pcard .img img{max-width:75%;max-height:85%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 8px 16px rgba(0,0,0,.15))}
.pcard.wide .img img{max-width:80%;max-height:88%}

/* Hover image crossfade — when product card has a second image uploaded */
.pcard.has-hover .img{position:relative}
.pcard.has-hover .img img{transition:opacity .35s ease}
.pcard.has-hover .img img.hover{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none}
/* Hover effects only on devices with real hover — on touch a tap would
   "stick" the card lift and swap the product photo until the next tap. */
@media(hover:hover){
  .pcard:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(0,0,0,.08);border-color:var(--steel-300)}
  .pcard:hover .add{gap:10px}
  .pcard.has-hover:hover .img img:not(.hover){opacity:0}
  .pcard.has-hover:hover .img img.hover{opacity:1}
}
.pcard .img .badge{position:absolute;top:12px;left:12px;background:var(--steel-950);color:#fff;font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;border-radius:2px}
.pcard .info{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;justify-content:center}
.pcard .info .nm{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;font-size:19px;letter-spacing:.02em;color:var(--steel-950);line-height:1.1}
.pcard .info .sub{font-size:13px;color:var(--steel-500);line-height:1.4}
.pcard .ft{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.pcard .add{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-text);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:gap .2s}
.pcard .tag{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;color:var(--steel-500);text-transform:uppercase}
.pcard .badge{position:absolute;top:14px;left:14px;background:var(--steel-950);color:#fff;font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;padding:5px 8px;border-radius:2px;z-index:1}
@media(max-width:900px){.catalog{grid-template-columns:repeat(2,1fr)}.pcard.wide{grid-column:span 2;flex-direction:column}.pcard.wide .img{flex:0 0 auto;min-height:200px}}

/* Category groups within the catalog */
.cat-group + .cat-group{margin-top:40px}
.cat-label{display:flex;align-items:center;gap:14px;font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-500);margin-bottom:18px}
.cat-label::after{content:"";flex:1;height:1px;background:var(--rule-dk)}

/* "Dit is maar een greep" — prominent block that points to the full range + contact */
.catalog-more{margin-top:48px;background:var(--steel-950);color:#fff;border-radius:6px;padding:36px 40px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.catalog-more .cm-text{max-width:640px}
.catalog-more h3{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(24px,3vw,34px);line-height:1;margin:0 0 10px;color:#fff}
.catalog-more p{font-size:15px;line-height:1.6;color:var(--steel-300);margin:0}
.catalog-more .cm-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.catalog-more .cm-phone{font-family:"JetBrains Mono",monospace;font-size:14px;letter-spacing:.04em;color:var(--amber-2);text-decoration:none;white-space:nowrap}
@media(hover:hover){.catalog-more .cm-phone:hover{text-decoration:underline}}
@media(max-width:720px){.catalog-more{padding:28px 24px;flex-direction:column;align-items:flex-start}}

/* ===== Productenpagina (page-producten.php) ===== */
.page-hero{background:var(--steel-950);color:var(--steel-100);border-bottom:1px solid var(--rule);padding:72px 0 60px}
.page-hero .kicker{color:var(--amber-text);margin-bottom:14px}
.page-hero h1{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(44px,6vw,72px);line-height:.95;margin:0;max-width:900px}
.page-hero .lead{margin:18px 0 0;font-size:16px;line-height:1.6;color:var(--steel-300);max-width:640px}
@media(max-width:720px){.page-hero{padding:48px 0 40px}}
.products-empty{background:#fff;border:1px dashed var(--rule-dk);border-radius:6px;padding:56px 40px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.products-empty p{margin:0;font-size:16px;line-height:1.6;color:var(--steel-700);max-width:520px}

/* STEPS */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--steel-950);color:var(--steel-100);border-radius:4px;overflow:hidden;position:relative}
.step{padding:40px 32px;border-right:1px solid var(--rule);position:relative}
.step:last-child{border-right:none}
.step .n{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:80px;line-height:1;color:var(--steel-500);margin-bottom:20px}
.step h3{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:22px;margin:0 0 10px;letter-spacing:.02em;color:#fff}
.step p{font-size:14px;line-height:1.55;color:var(--steel-300);margin:0}
.step .arrow{position:absolute;right:-12px;top:60px;width:24px;height:24px;color:var(--amber-2);background:var(--steel-950);border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:2}
.step:last-child .arrow{display:none}
@media(max-width:960px){.steps{grid-template-columns:repeat(2,1fr)}.step:nth-child(2) .arrow,.step:nth-child(4) .arrow{display:none}.step:nth-child(-n+2){border-bottom:1px solid var(--rule)}}
@media(max-width:540px){.steps{grid-template-columns:1fr}.step{border-right:none;border-bottom:1px solid var(--rule)}.step:last-child{border-bottom:none}.step .arrow{display:none}}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.contact-info{padding-right:24px}
.contact-info h2{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(40px,4vw,56px);line-height:.95;margin:0 0 20px;letter-spacing:.01em}
.contact-info p{font-size:16px;line-height:1.6;color:var(--steel-700);margin:0 0 32px;max-width:480px}
.contact-info .item{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--rule-dk);align-items:center}
.contact-info .item:last-child{border-bottom:none}
.contact-info .ic{width:36px;height:36px;background:var(--steel-950);color:var(--amber-2);border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-info .l{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel-500)}
.contact-info .v{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:18px;color:var(--steel-950);text-transform:uppercase;letter-spacing:.02em}
/* Form banner (success/error after submit) */
.form-wrap{display:flex;flex-direction:column;gap:14px}
.form-banner{padding:14px 18px;border-radius:4px;font-family:Inter,sans-serif;font-size:14px;line-height:1.5}
.form-banner.success{background:rgba(27,106,78,.08);border:1px solid rgba(27,106,78,.3);color:#1B6A4E}
.form-banner.error{background:rgba(163,59,42,.08);border:1px solid rgba(163,59,42,.3);color:#A33B2A}

/* Honeypot — visually hidden but still in the DOM for bots to find */
.flesko-honeypot{position:absolute !important;left:-9999px !important;top:auto !important;width:1px !important;height:1px !important;overflow:hidden !important}

form.flesko-contact{background:#fff;border:1px solid var(--rule-dk);border-radius:4px;padding:32px}
form.flesko-contact button[disabled]{opacity:.6;cursor:not-allowed}
form.flesko-contact .row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
form.flesko-contact .field{display:flex;flex-direction:column;gap:6px}
form.flesko-contact .field.full{grid-column:span 2}
form.flesko-contact label{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel-500)}
form.flesko-contact input,form.flesko-contact select,form.flesko-contact textarea{font-family:Inter,sans-serif;font-size:14px;padding:12px 14px;border:1px solid var(--rule-dk);border-radius:2px;background:var(--paper);color:var(--steel-950);outline:none;transition:border-color .15s,background .15s}
form.flesko-contact input:focus,form.flesko-contact select:focus,form.flesko-contact textarea:focus{border-color:var(--amber);background:#fff}
/* Explicit focus ring for keyboard users (in addition to the amber border on :focus) */
form.flesko-contact input:focus-visible,form.flesko-contact select:focus-visible,form.flesko-contact textarea:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.btn:focus-visible{outline:2px solid var(--amber-2);outline-offset:2px}
form.flesko-contact textarea{min-height:120px;resize:vertical;font-family:inherit}
form.flesko-contact .submit{margin-top:8px;width:100%;justify-content:center;padding:16px}
form.flesko-contact .legal{font-size:11px;color:var(--steel-500);margin-top:14px;text-align:center;font-family:"JetBrains Mono",monospace;letter-spacing:.06em}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}form.flesko-contact .row{grid-template-columns:1fr}form.flesko-contact .field.full{grid-column:span 1}}

/* FOOTER */
footer.flesko-footer{background:var(--steel-950);color:var(--steel-300);padding:64px 0 32px;border-top:1px solid var(--rule)}
footer.flesko-footer .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}
footer.flesko-footer h3{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:11px;color:var(--steel-300);margin:0 0 16px}
footer.flesko-footer .li{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--steel-300);padding:5px 0;letter-spacing:.02em}
footer.flesko-footer .li a{text-decoration:none;color:inherit}
footer.flesko-footer .li a:hover{color:var(--amber-2)}
footer.flesko-footer .lead{margin:18px 0 0;font-size:14px;line-height:1.6;color:var(--steel-300);max-width:340px}
footer.flesko-footer .btm{margin-top:48px;padding-top:24px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--steel-300);letter-spacing:.14em;text-transform:uppercase}
footer.flesko-footer .wm-big{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:38px;text-transform:uppercase;letter-spacing:.04em;color:#fff}
footer.flesko-footer .wm-big .dot{color:var(--amber-2)}
@media(max-width:860px){footer.flesko-footer .grid{grid-template-columns:1fr 1fr}footer.flesko-footer .btm{flex-direction:column;gap:10px}}
@media(max-width:540px){footer.flesko-footer .grid{grid-template-columns:1fr}}

/* REDUCED MOTION — kill the permanent bottle animations, the parallax
   transition and smooth scrolling for users who ask for less motion.
   (hero-tilt.js checks the same media query before enabling the parallax.) */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bottle svg,.bottle img,.photo-stage .bottle img{animation:none}
  .bottle{transition:none}
}