/* ============ NEXI DESIGN SYSTEM ============ */
:root{
  --ink:#181B3A;

  /* ★★★ BRAND COLOUR — change this one line to re-colour the whole site ★★★ */
  --brand-color:#0E4193;   /* sampled from the "Nexi" wordmark in the supplied logo */

  /* everything below is derived from --brand-color.
     Each pair is: a plain-hex fallback first, then the derived value.
     Browsers without color-mix() keep the fallback, so update BOTH if you
     change --brand-color by hand and want old browsers to match exactly. */
  --brand:var(--brand-color);
  --brand-deep:#09285B;
  --brand-deep:color-mix(in srgb,var(--brand-color) 62%,#000);
  --red:#E8402A;
  --accent:#F04432;                    /* orange-red accent, used by the hero visual */
  --paper:#FFFFFF;
  --mist:#F3F4FA;
  --line:#E4E6F2;
  --sub:#565B7E;
  /* accent colour — follows the brand colour above */
  --paint:var(--brand-color);
  --paint-ink:#ffffff;                 /* text that sits on --paint */
  --paint-soft:rgba(14,65,147,.13);
  --paint-soft:color-mix(in srgb,var(--brand-color) 13%,transparent);
  --paint-d:#0A2F6A;                   /* shaded wall  */
  --paint-d:color-mix(in srgb,var(--brand-color) 72%,#000);
  --paint-dd:#071F47;                  /* deep shadow  */
  --paint-dd:color-mix(in srgb,var(--brand-color) 48%,#000);
  --paint-l:#3963A6;                   /* lit wall     */
  --paint-l:color-mix(in srgb,var(--brand-color) 82%,#fff);

  /* the footer sits on the brand colour, taken down a touch so it grounds the
     page without losing the blue. Secondary text is #D5DBF0 (7.94:1). */
  --footer-bg:#0C3981;
  --footer-bg:color-mix(in srgb,var(--brand-color) 88%,#000);
  --d:font-family:'Poppins';
  --radius:20px;
  --shadow-lg:0 30px 60px -20px rgba(24,27,58,.22);
  --shadow-md:0 14px 34px -14px rgba(24,27,58,.18);
  --ease:cubic-bezier(.22,.8,.24,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
::selection{background:var(--paint);color:var(--paint-ink)}

/* kill the translucent blue box browsers flash over a tapped link/button.
   Keyboard focus rings are untouched — see :focus-visible below. */
html{-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:rgba(0,0,0,0)}
a,button,summary,label,[role="button"]{-webkit-tap-highlight-color:transparent}
/* controls shouldn't turn into selectable text when tapped or dragged */
.btn,button,.faq-q,.nav-links a,.crumbs a,.logo,.stars,.mb-lines{
  -webkit-user-select:none;-ms-user-select:none;user-select:none}
/* Safari/iOS: stop the grey callout box on long-press of a link */
a,button{-webkit-touch-callout:none}
body{font-family:'Poppins',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* height:auto is required: the width/height attributes on <img> map to CSS as
   presentational hints. Any rule that sets width but not height would otherwise
   leave the height hint in force and stretch the image. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font-family:inherit;font-size:1rem;color:var(--ink)}
:focus-visible{outline:3px solid var(--paint);outline-offset:3px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
h1,h2,h3{font-family:'Poppins',sans-serif;line-height:1.12;letter-spacing:-.01em}
.eyebrow{font-family:'Poppins',sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--paint);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:3px;border-radius:3px;background:var(--paint)}
.ml{font-family:'Anek Malayalam','Poppins',sans-serif}
.sec{padding:clamp(70px,9vw,120px) 0}
.sec-head{max-width:640px;margin-bottom:clamp(34px,5vw,56px)}
.sec-head h2{font-size:clamp(1.6rem,3.4vw,2.5rem);font-weight:700;margin:.55em 0 .4em}
.sec-head p{color:var(--sub);font-size:1.05rem}

/* paint-roller scroll progress */
#progress{position:fixed;top:0;left:0;height:5px;width:0;background:var(--paint);z-index:200;transition:background .4s}
#progress::after{content:"";position:absolute;right:-2px;top:-4px;width:13px;height:13px;border-radius:50%;background:var(--paint);box-shadow:0 0 0 3px #fff}

/* ============ NAV ============ */
#nav{position:fixed;inset:0 0 auto;z-index:150;transition:.35s var(--ease)}
#nav .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:16px;padding-bottom:16px}
#nav.scrolled{background:rgba(255,255,255,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.logo{display:flex;align-items:center;line-height:0}
/* the supplied logo is a stacked lockup (mark over Nexi over PAINTS), so it needs
   more height than a horizontal one for "PAINTS" to stay legible */
.logo img{height:clamp(50px,5vw,62px);width:auto}
/* the multicolour logo needs a light plate to read on the dark footer.
   Kept small and given generous breathing room so it reads as a considered
   brand plate rather than a pasted sticker.
   A reversed build lives at /assets/images/logo-white.png if the plate is ever dropped. */
.foot-logo{width:max-content;background:#fff;padding:14px 18px;border-radius:16px;
  margin:0 0 26px;box-shadow:0 10px 26px -14px rgba(0,0,0,.55)}
.foot-logo img{height:52px}
/* previous type-set logo, replaced by the supplied brand asset
.logo{display:flex;align-items:center;gap:11px;font-family:'Poppins';font-weight:800;font-size:1.25rem;color:var(--brand)}
.logo small{display:block;font-family:'Poppins';font-size:.58rem;font-weight:700;letter-spacing:.42em;color:var(--red);margin-top:-3px}
*/
.nav-links{display:flex;gap:6px;align-items:center}
.nav-links a{font-weight:600;font-size:.93rem;padding:9px 14px;border-radius:999px;transition:.25s}
.nav-links a:hover{background:var(--mist)}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:.95rem;padding:13px 24px;border-radius:999px;transition:.3s var(--ease);border:2px solid transparent}
.btn-paint{background:var(--paint);color:var(--paint-ink);box-shadow:0 10px 24px -10px var(--paint)}
.btn-paint:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn-ghost{border-color:var(--line);background:#fff}
.btn-ghost:hover{border-color:var(--ink)}
#menu-btn{display:none;width:44px;height:44px;border-radius:12px;background:var(--mist);
  place-items:center;transition:background .25s var(--ease)}
#menu-btn:hover{background:var(--paint-soft)}
.mb-lines{position:relative;display:block;width:20px;height:14px}
.mb-lines i{position:absolute;left:0;right:0;height:2.4px;border-radius:2px;background:var(--ink);
  transition:top .34s var(--ease),transform .34s var(--ease),opacity .18s var(--ease)}
.mb-lines i:nth-child(1){top:0}
.mb-lines i:nth-child(2){top:5.8px}
.mb-lines i:nth-child(3){top:11.6px}
#menu-btn[aria-expanded="true"] .mb-lines i:nth-child(1){top:5.8px;transform:rotate(45deg)}
#menu-btn[aria-expanded="true"] .mb-lines i:nth-child(2){opacity:0;transform:scaleX(.3)}
#menu-btn[aria-expanded="true"] .mb-lines i:nth-child(3){top:5.8px;transform:rotate(-45deg)}

/* dimmer behind the open menu */
#nav-scrim{position:fixed;inset:0;z-index:140;background:rgba(24,27,58,.4);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s linear .3s}
#nav-scrim.show{opacity:1;visibility:visible;transition:opacity .3s var(--ease),visibility 0s}
body.nav-open{overflow:hidden}

/* ============ HERO ============ */
.hero{position:relative;padding:clamp(120px,15vw,170px) 0 0;overflow:hidden;background:
  radial-gradient(1200px 600px at 85% -10%,var(--paint-soft),transparent 60%),
  linear-gradient(180deg,#fff, #FAFBFF)}
.hero-grid{display:grid;grid-template-columns:42fr 58fr;
  column-gap:clamp(24px,3vw,54px);row-gap:clamp(24px,3vw,38px);align-items:center}
.hero-copy{grid-column:1;grid-row:1;align-self:end}
.hero-visual{grid-column:2;grid-row:1 / span 2;align-self:center;position:relative}
.hero-trust{grid-column:1;grid-row:2;align-self:start}
.hero h1{font-size:clamp(2.1rem,5vw,3.7rem);font-weight:800}
.hero h1 .painted{position:relative;white-space:nowrap;color:var(--paint);transition:color .5s}
.hero h1 .painted svg{position:absolute;left:-2%;bottom:-.28em;width:104%;height:.42em;overflow:visible;animation:paint-sway 5.5s ease-in-out 1.4s infinite}
.hero h1 .painted path{fill:none;stroke:var(--paint);stroke-width:7;stroke-linecap:round;opacity:.35;transition:stroke .5s;stroke-dasharray:112;stroke-dashoffset:112;animation:paint-draw 1.1s var(--ease) .45s forwards}
@keyframes paint-draw{to{stroke-dashoffset:0}}
@keyframes paint-sway{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-1.5px) rotate(-.4deg)}70%{transform:translateY(1px) rotate(.3deg)}}
.hero .ml-line{font-size:1.08rem;font-weight:600;color:var(--brand);margin:20px 0 8px}
.hero p.lead{color:var(--sub);font-size:1.1rem;max-width:32rem;margin:8px 0 30px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-trust{display:flex;gap:26px;padding-top:26px;border-top:1px solid var(--line);flex-wrap:wrap}
.hero-trust div b{font-family:'Poppins';font-size:1.35rem;display:block;color:var(--ink)}
.hero-trust div span{font-size:.82rem;color:var(--sub)}
/* hero scene card — white frame retired with the old bucket collage
.scene-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-lg);padding:12px}
*/
.scene-card{position:relative}

/* ============ HERO VISUAL — house + paint strokes composite ============ */
/* no isolation here on purpose: the image must blend against the PAGE
   background, not against an isolated group, or the white would not drop out */
.hv-stage{position:relative}
/* soft radial lighting behind the house — no hard background gradient */
.hv-stage::before{content:"";position:absolute;z-index:0;pointer-events:none;
  left:-8%;right:-8%;top:-6%;bottom:-2%;
  background:radial-gradient(54% 50% at 52% 46%,
    color-mix(in srgb,var(--brand-color) 9%,transparent),transparent 72%);
  animation:hv-breathe 14s ease-in-out infinite}
/* the composite is shot on white; multiply drops that white into the page so
   there is no rectangular edge, and the soft contact shadows survive intact */
.hv-img{position:relative;z-index:1;display:block;width:100%;height:auto;
  mix-blend-mode:multiply;animation:hv-float 9s ease-in-out infinite}
.hv-dots{position:absolute;z-index:2;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.hv-dots circle{animation:hv-drift 9s ease-in-out infinite}
.hv-dots circle:nth-child(2){animation-duration:11s;animation-delay:-2s}
.hv-dots circle:nth-child(3){animation-duration:10s;animation-delay:-4s}
.hv-dots circle:nth-child(4){animation-duration:12s;animation-delay:-1s}
.hv-dots circle:nth-child(5){animation-duration:10.5s;animation-delay:-5s}
.hv-dots circle:nth-child(6){animation-duration:13s;animation-delay:-3s}
.hv-foot{display:block;margin-top:clamp(4px,.8vw,12px);text-align:right;
  font-family:'Poppins';font-weight:700;text-transform:uppercase;
  font-size:.64rem;letter-spacing:.14em;color:var(--brand-color);opacity:.65}

@keyframes hv-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes hv-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes hv-breathe{0%,100%{opacity:.9;transform:scale(1)}50%{opacity:1;transform:scale(1.035)}}

@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .hero-copy{grid-column:1;grid-row:1}
  .hero-visual{grid-column:1;grid-row:2;max-width:620px;margin:0 auto;width:100%}
  .hero-trust{grid-column:1;grid-row:3}
  .hv-foot{text-align:center}
}

/* .scene-card .hint{display:flex;justify-content:space-between;align-items:center;font-family:'Poppins';font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sub);margin-bottom:12px} */
/* .scene-card .hint b{color:var(--paint);transition:color .4s} */
/* shade swatches — commented out with the colour picker
.hero-swatches{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.sw{width:38px;height:38px;border-radius:12px;border:3px solid #fff;box-shadow:0 3px 10px rgba(24,27,58,.2);transition:.25s var(--ease);position:relative}
.sw:hover{transform:translateY(-4px) scale(1.08)}
.sw[aria-pressed="true"]{outline:3px solid var(--ink);outline-offset:2px}
*/
.marquee{background:var(--brand);color:#fff;overflow:hidden;padding:15px 0;margin-top:clamp(60px,8vw,90px)}
.marquee-track{display:flex;gap:56px;white-space:nowrap;animation:mq 30s linear infinite;font-family:'Poppins';font-weight:600;letter-spacing:.2em;font-size:.83rem;text-transform:uppercase}
.marquee-track span{display:flex;align-items:center;gap:56px}
.marquee-track i{font-style:normal;color:var(--red);}
@keyframes mq{to{transform:translateX(-50%)}}

/* ============ PRODUCTS ============ */
.prod-hero-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pcard{position:relative;border-radius:26px;overflow:hidden;padding:30px 26px 0;min-height:520px;display:flex;flex-direction:column;color:#fff;isolation:isolate;transition:transform .4s var(--ease),box-shadow .4s}
.pcard:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.pcard .tag{font-family:'Poppins';font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);padding:6px 13px;border-radius:999px;width:max-content;backdrop-filter:blur(4px)}
.pcard h3{font-size:1.45rem;margin:16px 0 6px}
.pcard .sub{font-size:.92rem;opacity:.85;font-weight:500}
.pcard ul{list-style:none;margin:16px 0 8px;display:grid;gap:7px;font-size:.9rem;font-weight:600}
.pcard ul li{display:flex;gap:9px;align-items:center}
/* dot bullet replaced by per-point icons
.pcard ul li::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;flex:none;box-shadow:0 0 0 3px rgba(255,255,255,.25)}
*/
.pcard ul li svg{flex:none;opacity:.95}
/* HOVER SQUARE FIX — the bucket render fills ~97% of its PNG frame, so its alpha silhouette is
   essentially a rectangle. drop-shadow() traces that silhouette, so it was painting a big blurred
   RECTANGLE behind the image. At rest it hid behind the bucket; on hover the lift + 2deg rotate
   slid it out and it read as a square. Old rule kept here, commented out:
.pcard img{margin:auto auto -6px;width:min(78%,300px);filter:drop-shadow(0 24px 30px rgba(0,0,0,.35));transition:transform .5s var(--ease)}
*/
.pcard img{margin:auto auto -6px;width:min(78%,300px);position:relative;z-index:1;transition:transform .5s var(--ease)}
/* elliptical ground shadow instead — no straight edges, so nothing can read as a box */
.pcard::after{content:"";position:absolute;z-index:0;pointer-events:none;left:50%;bottom:-26px;width:min(84%,320px);height:52px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(0,0,0,.42),rgba(0,0,0,.24) 46%,rgba(0,0,0,0) 73%);transition:transform .5s var(--ease),opacity .5s var(--ease)}
.pcard:hover::after{transform:translateX(-50%) scale(.92);opacity:.78}
.pcard:hover img{transform:translateY(-10px) rotate(-2deg)}
.pcard.primer{background:linear-gradient(160deg,#57A81C,#2E7D0F 55%,#1F5E08)}
.pcard.jotax{background:linear-gradient(160deg,#00A6C0,#03789C 55%,#04566E)}
.pcard.glance{background:linear-gradient(160deg,#5B3FA8,#3E2C82 55%,#2A1D62)}
.prod-more{margin-top:56px}
.prod-more h3{font-size:1.15rem;margin-bottom:22px;display:flex;align-items:center;gap:14px}
.prod-more h3::after{content:"";flex:1;height:1px;background:var(--line)}
.mini-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px}
.mini{border:1px solid var(--line);border-radius:18px;padding:20px;background:#fff;transition:.3s var(--ease)}
.mini:hover{border-color:var(--paint);box-shadow:var(--shadow-md);transform:translateY(-4px)}
.mini .chip{width:34px;height:34px;border-radius:10px;margin-bottom:14px}
.mini b{font-size:.98rem;display:block;margin-bottom:4px}
.mini span{font-size:.82rem;color:var(--sub)}

/* ============ VISUALIZER (COMMENTED OUT — Colour Studio removed) ============
#studio{background:var(--brand-deep);color:#fff;position:relative;overflow:hidden}
#studio::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 500px at 15% 0%,rgba(232,64,42,.14),transparent 55%),radial-gradient(900px 500px at 90% 100%,var(--paint-soft),transparent 55%);pointer-events:none}
#studio .sec-head p{color:#B9BCDE}
#studio .eyebrow{color:#fff}
#studio .eyebrow::before{background:var(--red)}
.studio-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,48px);position:relative}
.stage{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:26px;padding:clamp(14px,2vw,26px);backdrop-filter:blur(6px)}
.stage-top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.seg{display:flex;background:rgba(255,255,255,.1);border-radius:999px;padding:5px;gap:4px}
.seg button{padding:9px 20px;border-radius:999px;font-weight:700;font-size:.9rem;color:#CFD2EE;transition:.25s}
.seg button[aria-pressed="true"]{background:#fff;color:var(--ink)}
.shade-now{font-family:'Poppins';font-size:.85rem;display:flex;align-items:center;gap:10px;color:#CFD2EE}
.shade-now i{width:22px;height:22px;border-radius:7px;background:var(--paint);display:inline-block;border:2px solid rgba(255,255,255,.6);transition:background .4s}
.scene-holder svg{width:100%;height:auto;border-radius:18px;display:block}
.panel{display:flex;flex-direction:column;gap:18px}
.panel .box{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:22px;padding:20px}
.panel h4{font-family:'Poppins';font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:#AEB2D8;margin-bottom:14px}
.fam-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.fam-tabs button{font-size:.8rem;font-weight:700;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.08);color:#CFD2EE;transition:.25s}
.fam-tabs button[aria-pressed="true"]{background:var(--paint);color:var(--paint-ink)}
.shade-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:10px;max-height:250px;overflow:auto;padding-right:6px}
.shade-grid::-webkit-scrollbar{width:6px}
.shade-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:99px}
.shade{aspect-ratio:1;border-radius:13px;position:relative;border:2px solid rgba(255,255,255,.15);transition:.2s var(--ease)}
.shade:hover{transform:scale(1.12);z-index:2;border-color:#fff}
.shade[aria-pressed="true"]{outline:3px solid #fff;outline-offset:2px}
.shade-name{font-family:'Poppins';display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.07);padding:12px 16px;border-radius:14px;font-size:.9rem;gap:12px}
.shade-name b{font-weight:600}
.shade-name button{font-size:.75rem;font-weight:700;letter-spacing:.08em;padding:7px 13px;border-radius:999px;background:#fff;color:var(--ink)}
.harmony-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.h-chip{border-radius:14px;padding:10px 10px 8px;min-height:74px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .25s var(--ease);border:2px solid rgba(255,255,255,.14)}
.h-chip:hover{transform:translateY(-4px)}
.h-chip small{font-family:'Poppins';font-size:.62rem;letter-spacing:.06em;font-weight:700;text-transform:uppercase;opacity:.9}
============ end VISUALIZER ============ */

/* ============ CALCULATOR (COMMENTED OUT — Calculator removed) ============
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:start}
.calc-card{background:#fff;border:1px solid var(--line);border-radius:26px;padding:clamp(24px,3vw,36px);box-shadow:var(--shadow-md)}
.field{margin-bottom:20px}
.field label{display:block;font-weight:700;font-size:.9rem;margin-bottom:8px}
.field input,.field select{width:100%;padding:13px 16px;border:2px solid var(--line);border-radius:14px;background:#fff;transition:.25s;font-weight:600}
.field input:focus,.field select:focus{border-color:var(--paint);outline:none}
.field .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.result{background:linear-gradient(160deg,var(--brand),var(--brand-deep));color:#fff;border-radius:26px;padding:clamp(24px,3vw,36px);position:sticky;top:100px}
.result h3{font-size:1.05rem;font-family:'Poppins';letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:#B9BCDE;margin-bottom:20px}
.result .big{font-family:'Poppins';font-size:clamp(2.2rem,4vw,3rem);font-weight:800;line-height:1}
.result .big small{font-size:.35em;font-family:'Poppins';font-weight:600;letter-spacing:.1em;color:#B9BCDE}
.result .packs{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}
.result .packs span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);padding:8px 15px;border-radius:999px;font-weight:700;font-size:.9rem}
.result .rows{display:grid;gap:12px;border-top:1px solid rgba(255,255,255,.18);padding-top:20px;font-size:.95rem}
.result .rows div{display:flex;justify-content:space-between;gap:14px}
.result .rows b{font-family:'Poppins'}
.note{font-size:.8rem;color:#B9BCDE;margin-top:18px}
============ end CALCULATOR ============ */

/* ============ WHY / BADGES ============ */
.badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.badge{border:1px solid var(--line);border-radius:20px;padding:26px 20px;text-align:center;background:#fff;transition:.3s var(--ease)}
.badge:hover{transform:translateY(-5px);border-color:var(--paint);box-shadow:var(--shadow-md)}
.badge .ic{width:52px;height:52px;margin:0 auto 14px;border-radius:16px;display:grid;place-items:center;background:var(--paint-soft);color:var(--paint);transition:.4s}
.badge b{display:block;font-size:.95rem;margin-bottom:3px}
.badge span{font-size:.8rem;color:var(--sub)}

/* ============ CONTACT ============ */
#contact{background:var(--mist)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:center}
.contact-cards{display:grid;gap:14px}
.ccard{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 22px;font-weight:600;transition:.3s var(--ease)}
.ccard:hover{transform:translateX(6px);border-color:var(--paint)}
.ccard .ic{width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;background:var(--paint-soft);color:var(--paint)}
.ccard small{display:block;font-size:.76rem;color:var(--sub);font-weight:600;letter-spacing:.08em;text-transform:uppercase}

/* ============ FOOTER ============ */
.site-footer{background:var(--footer-bg);color:#D5DBF0;padding:60px 0 30px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:44px}
.site-footer h5{color:#fff;font-family:'Poppins';letter-spacing:.16em;text-transform:uppercase;font-size:.8rem;margin-bottom:16px}
.site-footer a{display:block;padding:5px 0;font-size:.93rem;transition:.2s}
.site-footer a:hover{color:#fff}
.f-bottom{border-top:1px solid rgba(255,255,255,.18);padding-top:24px;display:flex;justify-content:space-between;gap:16px;font-size:.83rem;flex-wrap:wrap}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .marquee-track{animation:none}
  .hero h1 .painted svg{animation:none}
  .hv-img,.hv-dots circle,.hv-stage::before{animation:none}
  .faq-a,.faq-chev{transition:none}
  .nav-links,.nav-links a,.mb-lines i,#nav-scrim{transition:none}
  .rvtrack{animation:none}
  .rvtrack-wrap{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .nav-links.open a{transition-delay:0s}
  .hero h1 .painted path{animation:none;stroke-dashoffset:0}
  *{scroll-behavior:auto!important}
}

/* ============ PHOTO ROOM (masked recolor) ============ */
.room{position:relative;border-radius:18px;overflow:hidden}
.room img{width:100%;height:auto;display:block}
/* live badge — commented out with the colour picker
.room .badge-live{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:999px;color:var(--ink);display:flex;gap:8px;align-items:center}
.room .badge-live i{width:12px;height:12px;border-radius:4px;background:var(--paint);transition:background .45s}
*/

/* ============ PLACEHOLDER / TODO BLOCKS (for client content) ============ */
.todo{border:2px dashed #E8A13C;background:repeating-linear-gradient(45deg,#FFF9EE,#FFF9EE 12px,#FFF4DF 12px,#FFF4DF 24px);border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:26px 20px;color:#8A5A13;min-height:150px}
.todo b{font-size:.9rem;letter-spacing:.06em;text-transform:uppercase}
.todo span{font-size:.83rem;max-width:34rem;line-height:1.5}
.todo::before{content:"📌";font-size:1.4rem}

/* ============ PRODUCT CARDS & MODAL ============ */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.prod{border:1px solid var(--line);border-radius:22px;background:#fff;overflow:hidden;display:flex;flex-direction:column;transition:.3s var(--ease)}
.prod:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--paint)}
.prod .ph{height:190px;display:grid;place-items:center;padding:18px;position:relative}
.prod .ph img{max-height:170px;width:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.28))}
.prod .ph .noimg{width:100%;height:100%;border:2px dashed #E8A13C;border-radius:14px;display:grid;place-items:center;font-size:.75rem;font-weight:700;color:#8A5A13;background:#FFF9EE;padding:12px;text-align:center}
.prod .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.prod .cat{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--paint)}
.prod h3{font-size:1.05rem;font-weight:700}
.prod p{font-size:.85rem;color:var(--sub);flex:1}
.prod .btn{align-self:flex-start;padding:10px 18px;font-size:.85rem;margin-top:6px}
/* product modal — replaced by product.html detail pages
dialog#pmodal{border:none;border-radius:26px;padding:0;max-width:820px;width:calc(100% - 32px);box-shadow:var(--shadow-lg)}
dialog#pmodal::backdrop{background:rgba(24,27,58,.55);backdrop-filter:blur(4px)}
.pm-grid{display:grid;grid-template-columns:.9fr 1.1fr}
.pm-img{display:grid;place-items:center;padding:30px;min-height:340px}
.pm-img img{max-height:320px;filter:drop-shadow(0 20px 26px rgba(0,0,0,.3))}
.pm-body{padding:30px 32px;background:#fff}
.pm-body .cat{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--paint)}
.pm-body h3{font-size:1.5rem;margin:6px 0 8px}
.pm-body>p{color:var(--sub);font-size:.95rem;margin-bottom:16px}
.pm-headline{color:var(--paint);font-weight:700;font-size:.95rem;margin:0 0 14px}
.pm-feats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.pm-feats span{background:var(--paint-soft);color:var(--ink);font-size:.78rem;font-weight:600;padding:6px 13px;border-radius:999px}
.pm-spec{width:100%;border-collapse:collapse;font-size:.88rem;margin-bottom:20px}
.pm-spec td{padding:9px 0;border-bottom:1px solid var(--line)}
.pm-spec td:first-child{color:var(--sub);width:42%}
.pm-spec td:last-child{font-weight:600}
#pm-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.9);font-size:1.1rem;font-weight:700;box-shadow:var(--shadow-md);z-index:2}
*/
/* @media(max-width:700px){.pm-grid{grid-template-columns:1fr}.pm-img{min-height:220px}.pm-img img{max-height:200px}} */

/* ============ GALLERY ============ */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.gal figure{border-radius:18px;overflow:hidden;position:relative;margin:0;aspect-ratio:4/3;background:var(--mist)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.gal figure:hover img{transform:scale(1.06)}
.gal figcaption{position:absolute;inset:auto 0 0;padding:26px 16px 12px;background:linear-gradient(transparent,rgba(24,27,58,.75));color:#fff;font-size:.82rem;font-weight:600}

/* about split */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:center}
@media(max-width:900px){.about-grid{grid-template-columns:1fr}}

/* toast */
#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,80px);background:var(--ink);color:#fff;padding:13px 24px;border-radius:999px;font-weight:600;font-size:.92rem;opacity:0;transition:.4s var(--ease);z-index:300;box-shadow:var(--shadow-lg);display:flex;gap:10px;align-items:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast i{width:16px;height:16px;border-radius:5px;background:var(--paint)}

/* WhatsApp float */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:140;width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 12px 28px -8px rgba(37,211,102,.6);transition:.3s var(--ease)}
.wa-float:hover{transform:scale(1.1)}

/* ============ RESPONSIVE ============ */
@media(max-width:1000px){
  .hero-grid,/*.studio-grid,*/ /*.calc-grid,*/ .contact-grid{grid-template-columns:1fr}
  .prod-hero-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .f-grid{grid-template-columns:1fr 1fr}
  /* .result{position:static} */
}
@media(max-width:760px){
  .nav-links{position:fixed;inset:94px 14px auto;z-index:160;
    background:#fff;border:1px solid var(--line);border-radius:22px;
    flex-direction:column;align-items:stretch;gap:2px;padding:10px;box-shadow:var(--shadow-lg);
    display:flex;opacity:0;visibility:hidden;
    transform:translateY(-12px) scale(.97);transform-origin:top right;
    transition:opacity .26s var(--ease),transform .34s var(--ease),visibility 0s linear .34s}
  .nav-links.open{opacity:1;visibility:visible;transform:none;
    transition:opacity .26s var(--ease),transform .34s var(--ease),visibility 0s}
  .nav-links a{padding:14px 16px;border-radius:14px;font-size:1rem;
    opacity:0;transform:translateY(-8px);
    transition:opacity .3s var(--ease),transform .3s var(--ease),background .2s var(--ease),color .2s var(--ease)}
  .nav-links.open a{opacity:1;transform:none}
  .nav-links.open a:nth-child(1){transition-delay:.06s}
  .nav-links.open a:nth-child(2){transition-delay:.11s}
  .nav-links.open a:nth-child(3){transition-delay:.16s}
  .nav-links.open a:nth-child(4){transition-delay:.21s}
  .nav-links.open a:nth-child(5){transition-delay:.26s}
  .nav-links.open a:nth-child(6){transition-delay:.31s}
  .nav-links a:hover,.nav-links a:focus-visible{background:var(--paint-soft);color:var(--paint)}
  #menu-btn{display:grid}
  .nav-cta{display:none}
  /* .harmony-row{grid-template-columns:repeat(2,1fr)} */
  .f-grid{grid-template-columns:1fr}
}

/* ============ VISION / MISSION ============ */
.vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px)}
.vm-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:clamp(24px,3vw,32px);transition:.3s var(--ease)}
.vm-card:hover{border-color:var(--paint);box-shadow:var(--shadow-md);transform:translateY(-4px)}
.vm-card .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--paint-soft);color:var(--paint);margin-bottom:16px}
.vm-tag{display:block;font-family:'Poppins';font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--paint);margin-bottom:10px}
.vm-card p{color:var(--sub);font-size:1rem;line-height:1.7}
@media(max-width:800px){.vm-grid{grid-template-columns:1fr}}

/* ============ WHY NEXI — benefit cards ============ */
/* unused — every section head on the site is left-aligned
.sec-head-center{max-width:760px;margin-left:auto;margin-right:auto;text-align:center}
.sec-head-center .eyebrow{justify-content:center}
.sec-head-center .eyebrow::before{display:none}
*/

/* was repeat(3,1fr) while the section had three cards
.wcgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
*/
.wcgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,16px)}
.wc-card{--tint:var(--paint-soft);--acc:var(--paint);
  position:relative;background:var(--tint);border-radius:26px;
  padding:clamp(24px,2.4vw,32px);transition:.35s var(--ease)}
/* the bite out of the top-right corner, plus the dot that sits in it */
.wc-card::before{content:"";position:absolute;top:0;right:0;width:58px;height:58px;
  background:var(--paper);border-bottom-left-radius:26px}
.wc-card::after{content:"";position:absolute;top:8px;right:8px;width:34px;height:34px;
  border-radius:50%;background:var(--tint)}
.wc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.wc-ic{color:var(--acc);margin-bottom:clamp(22px,3vw,22px)}
.wc-card h3{font-size:1.05rem;font-weight:700;margin-bottom:10px;color:var(--ink)}
.wc-card p{font-size:.92rem;line-height:1.65;color:var(--sub)}
.wc-1{--tint:#E9EEF5;--acc:#0E4193}
.wc-2{--tint:#EDF6EF;--acc:#3E7D53}
.wc-3{--tint:#FDEFEC;--acc:#F04432}
.wc-4{--tint:#F2EEFB;--acc:#6A46B8}
.wc-todo{outline:2px dashed rgba(24,27,58,.16);outline-offset:-2px}
.wc-todo p b{color:var(--ink)}

/* 4 across needs the full 1200px wrap; drop to 2 up before the cards get pinched */
@media(max-width:1080px){.wcgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.wcgrid{grid-template-columns:1fr}}

/* ============ FAQ ============ */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,4vw,64px);align-items:start}
.faq-intro{position:sticky;top:110px}
.faq-intro h2{font-size:clamp(1.6rem,3.2vw,2.4rem);margin:.5em 0 .45em}
.faq-intro p{color:var(--sub);max-width:26rem;margin-bottom:26px}

.faq-list{display:grid;gap:12px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:18px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.faq-item:hover{border-color:var(--paint)}
.faq-item.open{border-color:var(--paint);box-shadow:var(--shadow-md)}
.faq-item h3{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit}

.faq-q{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;
  padding:20px clamp(18px,2vw,26px);text-align:left;font-family:'Poppins';font-weight:600;
  font-size:clamp(.95rem,1.15vw,1.03rem);color:var(--ink);border-radius:18px}
.faq-q:focus-visible{outline:3px solid var(--paint);outline-offset:2px}
.faq-chev{flex:none;color:var(--paint);transition:transform .42s var(--ease)}
.faq-item.open .faq-chev{transform:rotate(180deg)}

/* smooth both ways: 0fr -> 1fr needs no fixed height */
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease)}
.faq-a>div{overflow:hidden}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a p{color:var(--sub);font-size:.95rem;line-height:1.7;
  padding:0 clamp(18px,2vw,26px) 22px;margin-top:-2px}

@media(max-width:900px){
  .faq-grid{grid-template-columns:1fr}
  .faq-intro{position:static}
}

/* ============ ABOUT — range panel (stands in for the factory photo) ============ */
.about-panel{position:relative;border-radius:26px;overflow:hidden;min-height:340px;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(22px,2.4vw,30px);
  background:linear-gradient(155deg,var(--paint-l),var(--brand-color) 48%,var(--paint-d))}
.about-panel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 46% at 20% 12%,rgba(255,255,255,.22),transparent 70%)}
.ap-tag{position:relative;z-index:1;align-self:flex-start;font-family:'Poppins';font-weight:700;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  padding:7px 14px;border-radius:999px}
.ap-shot{position:relative;z-index:1;flex:1;display:flex;align-items:flex-end;justify-content:center;
  padding:clamp(12px,1.8vw,20px) 0 clamp(4px,.8vw,10px)}
.ap-shot img{width:30%;margin-inline:-9.4%;height:auto;transform-origin:bottom center;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.45));transition:transform .55s var(--ease)}
/* tallest in the middle, tapering out — reads as a family shot */
.ap-shot img:nth-child(1){transform:scale(.80);z-index:1}
.ap-shot img:nth-child(2){transform:scale(.87);z-index:2}
.ap-shot img:nth-child(3){transform:scale(.94);z-index:3}
.ap-shot img:nth-child(4){transform:scale(1);z-index:4}
.ap-shot img:nth-child(5){transform:scale(.94);z-index:3}
.ap-shot img:nth-child(6){transform:scale(.87);z-index:2}
.ap-shot img:nth-child(7){transform:scale(.80);z-index:1}
/* hover fans the row open a little */
.about-panel:hover .ap-shot img:nth-child(1){transform:scale(.80) translateX(-26%)}
.about-panel:hover .ap-shot img:nth-child(2){transform:scale(.87) translateX(-15%)}
.about-panel:hover .ap-shot img:nth-child(3){transform:scale(.94) translateX(-6%)}
.about-panel:hover .ap-shot img:nth-child(5){transform:scale(.94) translateX(6%)}
.about-panel:hover .ap-shot img:nth-child(6){transform:scale(.87) translateX(15%)}
.about-panel:hover .ap-shot img:nth-child(7){transform:scale(.80) translateX(26%)}
.ap-chips{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px}
.ap-chips span{font-size:.74rem;font-weight:600;color:#fff;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.26);padding:7px 13px;border-radius:999px}

/* ============ REVIEWS ============ */
.rv-top{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(24px,4vw,56px);
  align-items:start;margin-bottom:clamp(28px,3.4vw,44px)}
.rv-facts{display:grid;gap:14px;align-content:start}
.rv-facts div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 20px}
.rv-facts b{display:block;font-family:'Poppins';font-size:1.05rem;color:var(--paint);margin-bottom:4px}
.rv-facts span{font-size:.83rem;color:var(--sub);line-height:1.5}

.rvtrack-wrap{overflow:hidden;padding:8px 0 14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
/* 3 identical sets; the loop travels exactly one set, so it never runs dry.
   The gap lives on the card (not `gap`) so one third of the track is an exact set. */
.rvtrack{display:flex;width:max-content;animation:rv-scroll 78s linear infinite}
.rvtrack-wrap:hover .rvtrack,.rvtrack:focus-within{animation-play-state:paused}
@keyframes rv-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-33.3333%,0,0)}}

.rvcard{flex:0 0 clamp(268px,25vw,340px);margin-right:clamp(14px,1.6vw,20px);display:flex;flex-direction:column;gap:14px;
  background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:clamp(20px,2vw,26px);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.rvcard:hover{transform:translateY(-6px);border-color:var(--paint);box-shadow:var(--shadow-md)}
.stars{display:flex;gap:3px;color:#F0A92B}
.rvcard p{font-size:.93rem;line-height:1.7;color:var(--sub);flex:1}
.rvcard footer{display:flex;align-items:center;gap:12px}
.rv-av{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:'Poppins';font-weight:700;font-size:.85rem;letter-spacing:.04em}
.rv-who{display:flex;flex-direction:column;line-height:1.35;flex:1;min-width:0}
.rv-who b{font-size:.92rem}
.rv-who small{font-size:.76rem;color:var(--sub)}
.rv-qm{flex:none;color:var(--paint);opacity:.22}

@media(max-width:820px){.rv-top{grid-template-columns:1fr}
  .rv-facts{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.rv-facts{grid-template-columns:1fr}}