/* =====================================================================
   CREATIVE COLOUR PAINTER GROUP — design system
   Mobile-app feel on phones, wide editorial layout on desktop.
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  --navy:#1B3A8B;  --navy-d:#12276B;  --navy-x:#0A1024;
  --red:#E23B2E;   --yellow:#F2B01C;  --green:#35A853;
  --teal:#12A6C9;  --terra:#C2553B;   --plum:#7B3FA0;

  --ink:#0C1122;   --ink-2:#39415C;   --ink-3:#6B7390;
  --paper:#F7F4EE; --paper-2:#FFFFFF; --line:rgba(12,17,34,.10);

  --accent:var(--navy);              /* animated by GSAP per section */

  --r-xs:10px; --r-sm:16px; --r-md:22px; --r-lg:30px; --r-xl:42px; --r-full:999px;
  --sp:clamp(60px,9vw,132px);
  --wrap:1280px;
  --shadow-1:0 1px 2px rgba(12,17,34,.05), 0 6px 18px rgba(12,17,34,.06);
  --shadow-2:0 2px 6px rgba(12,17,34,.06), 0 22px 52px rgba(12,17,34,.13);
  --shadow-3:0 30px 80px rgba(12,17,34,.22);

  --f-d:'Anek Bangla','Hind Siliguri','Sora',system-ui,sans-serif;
  --f-b:'Hind Siliguri','Anek Bangla',system-ui,-apple-system,sans-serif;
  --f-n:'Sora','Hind Siliguri',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.9,.24,1);
  --dock-h:0px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-b); font-size:clamp(15.5px,1.02vw,17px); line-height:1.72;
  font-weight:400; overflow-x:hidden; -webkit-font-smoothing:antialiased;
  padding-bottom:var(--dock-h);
}
body.is-locked{overflow:hidden}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}
ul{margin:0; padding:0; list-style:none}
svg{fill:currentColor}
::selection{background:var(--accent); color:#fff}

.wrap{width:min(100% - 2.4rem, var(--wrap)); margin-inline:auto}
.wrap--tight{width:min(100% - 2.4rem, 980px); margin-inline:auto}
.skip{position:fixed; left:-999px; top:0; z-index:999; background:var(--navy); color:#fff; padding:.7rem 1.2rem}
.skip:focus{left:12px; top:12px}
.only-lg{display:none}
@media (min-width:900px){.only-lg{display:inline}}

/* ---------- 2. TYPE ---------- */
h1,h2,h3,h4{font-family:var(--f-d); font-weight:700; line-height:1.14; margin:0; letter-spacing:-.012em}
.h-xl{font-size:clamp(2.5rem,7.2vw,5.6rem); font-weight:800; line-height:1.02; letter-spacing:-.028em}
.h1{font-size:clamp(2rem,4.4vw,3.5rem); line-height:1.1; letter-spacing:-.02em}
.h2{font-size:clamp(1.5rem,2.6vw,2.25rem)}
.h3{font-size:clamp(1.18rem,1.7vw,1.42rem)}
.lead{font-size:clamp(1.02rem,1.25vw,1.2rem); color:var(--ink-2); max-width:62ch; margin:1rem 0 0}
.muted{color:var(--ink-3)}
.num{font-family:var(--f-n); font-variant-numeric:tabular-nums}

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem; margin:0 0 1rem;
  font-family:var(--f-n); font-size:.7rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent);
}
.eyebrow::before{content:''; width:26px; height:3px; border-radius:3px; background:var(--accent)}

.sec{padding-block:var(--sp); position:relative}
.sec__head{max-width:64ch; margin-bottom:clamp(2rem,4vw,3.4rem)}

/* ---------- 3. BUTTONS ---------- */
.btn{
  --bg:var(--navy); --fg:#fff;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.82rem 1.5rem; border-radius:var(--r-full);
  font-family:var(--f-d); font-weight:600; font-size:.98rem; line-height:1;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), background .35s, color .35s, border-color .35s;
  will-change:transform; overflow:hidden; isolation:isolate; white-space:nowrap;
}
.btn svg{width:18px; height:18px; flex:none}
.btn--fill{background:var(--bg); color:var(--fg); box-shadow:0 8px 22px rgba(27,58,139,.28)}
.btn--fill::after{content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg,var(--red),var(--yellow) 45%,var(--green) 78%,var(--teal));
  transform:translateY(101%); transition:transform .5s var(--ease)}
.btn--fill:hover::after{transform:translateY(0)}
.btn--fill:hover{box-shadow:0 14px 32px rgba(12,17,34,.24)}
.btn--line{border:1.6px solid rgba(12,17,34,.2); color:var(--ink)}
.btn--line:hover{border-color:var(--accent); color:var(--accent); background:rgba(255,255,255,.7)}
.btn--ghost{color:var(--ink); font-family:var(--f-n); font-size:.9rem; font-weight:600; padding:.7rem 1rem}
.btn--ghost:hover{color:var(--accent)}
.btn--lg{padding:1.05rem 2rem; font-size:1.06rem}
.btn--white{background:#fff; color:var(--navy-x)}
.w-full{width:100%}
.btn:active{transform:scale(.97)}

/* ---------- 4. PRELOADER ---------- */
.preloader{position:fixed; inset:0; z-index:9999; display:grid; place-items:center; background:var(--navy-x)}
.preloader__bars{position:absolute; inset:0; display:flex}
.preloader__bars span{flex:1; background:var(--c); transform:translateY(0)}
.preloader__mark{position:relative; text-align:center; color:#fff; z-index:2}
.preloader__mark img{margin-inline:auto; filter:drop-shadow(0 8px 20px rgba(0,0,0,.4))}
.preloader__mark p{font-family:var(--f-d); font-size:1.05rem; margin:.9rem 0 0; line-height:1.35; letter-spacing:.02em}
.preloader__mark b{font-weight:800}
.preloader.is-done{pointer-events:none}

/* ---------- 5. SCROLL ROLLER ---------- */
.roller{position:fixed; top:0; left:0; right:0; height:4px; z-index:900; pointer-events:none}
.roller i{display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--navy),var(--red) 30%,var(--yellow) 55%,var(--green) 78%,var(--teal))}

/* ---------- 6. CURSOR ---------- */
.cursor{display:none}
@media (hover:hover) and (pointer:fine) and (min-width:1000px){
  .cursor{display:block; position:fixed; top:0; left:0; z-index:950; pointer-events:none; mix-blend-mode:multiply}
  .cursor span{display:block; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%;
    background:var(--accent); opacity:.85; transition:width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), opacity .3s}
  .cursor.is-big span{width:76px; height:76px; margin:-38px 0 0 -38px; opacity:.28}
}

/* ---------- 7. NAV ---------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:800; transition:transform .55s var(--ease)}
.nav.is-hidden{transform:translateY(-104%)}
.nav__in{
  width:min(100% - 1.4rem, calc(var(--wrap) + 40px)); margin:.7rem auto 0;
  display:flex; align-items:center; gap:1rem; padding:.5rem .55rem .5rem .9rem;
  border-radius:var(--r-full); background:rgba(255,255,255,.72);
  backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid rgba(255,255,255,.7); box-shadow:var(--shadow-1);
  transition:background .4s, box-shadow .4s, padding .4s;
}
.nav.is-stuck .nav__in{background:rgba(255,255,255,.9); box-shadow:var(--shadow-2)}
.brand{display:flex; align-items:center; gap:.6rem; flex:none}
.brand img{width:38px; height:auto}
.brand__txt{display:flex; flex-direction:column; font-family:var(--f-d); line-height:1.05}
.brand__txt b{font-size:.9rem; font-weight:800; letter-spacing:-.01em}
.brand__txt i{font-size:.72rem; font-style:normal; color:var(--ink-3); letter-spacing:.04em}
.brand--lg img{width:52px}
.brand--lg .brand__txt b{font-size:1.15rem}
.brand--lg .brand__txt i{font-size:.86rem}

.nav__links{display:none; margin-inline:auto; gap:.15rem}
@media (min-width:1000px){.nav__links{display:flex}}
.nav__links a{position:relative; display:grid; padding:.5rem .95rem; border-radius:var(--r-full); text-align:center; transition:background .3s}
.nav__links a span{font-family:var(--f-d); font-weight:600; font-size:.95rem; line-height:1.1}
.nav__links a em{font-family:var(--f-n); font-style:normal; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.nav__links a:hover{background:rgba(12,17,34,.05)}
.nav__links a.is-on{background:var(--navy-x); color:#fff}
.nav__links a.is-on em{color:rgba(255,255,255,.6)}
.nav__act{display:flex; align-items:center; gap:.4rem; margin-left:auto}
@media (min-width:1000px){.nav__act{margin-left:0}}

.burger{width:44px; height:44px; border-radius:50%; display:grid; place-content:center; gap:5px; background:rgba(12,17,34,.06)}
.burger i{display:block; width:18px; height:2px; border-radius:2px; background:var(--ink); transition:transform .4s var(--ease), opacity .3s}
.burger.is-on i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-on i:nth-child(2){opacity:0}
.burger.is-on i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (min-width:1000px){.burger{display:none}}

/* ---------- 8. MOBILE SHEET ---------- */
.scrim{position:fixed; inset:0; z-index:820; background:rgba(10,16,36,.45); backdrop-filter:blur(4px); opacity:0}
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:830;
  background:var(--paper-2); border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:.8rem 1.4rem calc(1.6rem + env(safe-area-inset-bottom));
  box-shadow:var(--shadow-3); transform:translateY(100%);
  max-height:88vh; overflow:auto;
}
.sheet__grab{width:44px; height:5px; border-radius:5px; background:rgba(12,17,34,.18); margin:0 auto 1.2rem}
.sheet__nav a{display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:.9rem;
  padding:1rem .2rem; border-bottom:1px solid var(--line)}
.sheet__no{font-family:var(--f-n); font-size:.68rem; font-weight:700; color:var(--accent)}
.sheet__bn{font-family:var(--f-d); font-size:1.5rem; font-weight:700}
.sheet__en{font-family:var(--f-n); font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.sheet__nav a.is-on .sheet__bn{color:var(--navy)}
.sheet__foot{margin-top:1.4rem; text-align:center}
.sheet__foot p{font-size:.85rem; color:var(--ink-3); margin:.9rem 0 0}

/* ---------- 9. HERO ---------- */
.hero{position:relative; padding:clamp(120px,17vh,170px) 0 clamp(40px,6vw,70px); overflow:clip}
.hero__bg{position:absolute; inset:0; z-index:-2; overflow:hidden}
.hero__blob{position:absolute; border-radius:50%; filter:blur(60px); opacity:.5}
.hero__blob:nth-child(1){width:46vw; height:46vw; background:#dbe4ff; top:-12vw; right:-10vw}
.hero__blob:nth-child(2){width:34vw; height:34vw; background:#ffe6cf; bottom:-8vw; left:-8vw}
.hero__blob:nth-child(3){width:26vw; height:26vw; background:#d6f3ea; top:38%; left:44%}
.hero__grid{display:grid; gap:clamp(2rem,4vw,3.4rem)}
@media (min-width:1000px){.hero__grid{grid-template-columns:1.02fr .98fr; align-items:center}}

.hero__title{margin:0}
.hero__title .ln{display:block; overflow:hidden}
.hero__title .wd{display:inline-block}
.hero__paint{
  position:relative; display:inline-block; padding:0 .2em;
  background:linear-gradient(100deg,var(--red),var(--yellow) 40%,var(--green) 72%,var(--teal));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__meta{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.7rem}
.pill{display:inline-flex; align-items:center; gap:.45rem; padding:.48rem .9rem; border-radius:var(--r-full);
  background:rgba(255,255,255,.8); border:1px solid var(--line); font-size:.85rem; font-weight:500; box-shadow:var(--shadow-1)}
.pill i{width:8px; height:8px; border-radius:50%; background:var(--c,var(--accent)); flex:none}
.hero__btns{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem}

/* hero comparison card */
.compare{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-2); background:#ddd;
  aspect-ratio:7/5; touch-action:pan-y; user-select:none; cursor:ew-resize}
.compare img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.compare__after{clip-path:inset(0 0 0 var(--x,50%))}
.compare__bar{position:absolute; top:0; bottom:0; left:var(--x,50%); width:3px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.compare__knob{position:absolute; top:50%; left:var(--x,50%); translate:-50% -50%; width:52px; height:52px; border-radius:50%;
  background:#fff; display:grid; place-content:center; box-shadow:var(--shadow-2); font-size:.9rem; color:var(--navy)}
.compare__knob svg{width:24px; height:24px}
.compare__tag{position:absolute; top:14px; padding:.35rem .8rem; border-radius:var(--r-full);
  font-family:var(--f-d); font-weight:600; font-size:.78rem; background:rgba(10,16,36,.72); color:#fff; backdrop-filter:blur(6px)}
.compare__tag--b{left:14px}
.compare__tag--a{right:14px; background:rgba(255,255,255,.9); color:var(--navy-x)}
.compare__cap{margin:.9rem .2rem 0}
.compare__cap b{font-family:var(--f-d); font-size:1.02rem; display:block}
.compare__cap span{font-size:.85rem; color:var(--ink-3)}

/* ---------- 10. MARQUEE ---------- */
.marq{overflow:hidden; border-block:1px solid var(--line); background:var(--paper-2); padding:1.1rem 0}
.marq__row{display:flex; gap:3.4rem; width:max-content; will-change:transform}
.marq__row span{display:inline-flex; align-items:center; gap:.9rem; font-family:var(--f-n);
  font-weight:700; font-size:clamp(.95rem,1.5vw,1.2rem); letter-spacing:-.01em; color:var(--ink-2); white-space:nowrap}
.marq__row span::after{content:''; width:9px; height:9px; border-radius:50%; background:var(--accent); opacity:.55}

/* ---------- 11. STATS ---------- */
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
@media (min-width:820px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--paper-2); padding:clamp(1.3rem,2.6vw,2.1rem)}
.stat b{display:block; font-family:var(--f-d); font-size:clamp(2.1rem,4.4vw,3.2rem); font-weight:800; line-height:1; color:var(--navy)}
.stat b em{font-style:normal; font-size:.42em; color:var(--accent)}
.stat p{margin:.45rem 0 0; font-size:.92rem; font-weight:500}
.stat > span{display:block; font-family:var(--f-n); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}

/* ---------- 12. SERVICE CARDS ---------- */
.svc-grid{display:grid; gap:1.1rem}
@media (min-width:700px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.svc-grid{grid-template-columns:repeat(4,1fr)}}
.svc{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--r-lg); background:var(--paper-2); border:1px solid var(--line);
  box-shadow:var(--shadow-1); transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
.svc:hover{transform:translateY(-8px); box-shadow:var(--shadow-2)}
.svc__img{position:relative; aspect-ratio:4/3; overflow:hidden}
.svc__img img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease), filter .6s}
.svc:hover .svc__img img{transform:scale(1.07)}
.svc__img::after{content:''; position:absolute; inset:auto 0 0 0; height:52%;
  background:linear-gradient(transparent, rgba(10,16,36,.55))}
.svc__no{position:absolute; top:12px; left:12px; z-index:2; width:34px; height:34px; border-radius:50%;
  display:grid; place-content:center; background:var(--sc); color:#fff; font-family:var(--f-n); font-size:.72rem; font-weight:700}
.svc__body{padding:1.15rem 1.2rem 1.35rem; display:flex; flex-direction:column; flex:1}
.svc__body h3{font-size:1.14rem}
.svc__en{font-family:var(--f-n); font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); display:block; margin-top:.25rem}
.svc__body p{font-size:.92rem; color:var(--ink-2); margin:.7rem 0 1rem; flex:1}
.svc__more{display:inline-flex; align-items:center; gap:.4rem; font-family:var(--f-d); font-weight:600; font-size:.9rem; color:var(--sc)}
.svc__more svg{width:15px; height:15px; transition:transform .4s var(--ease)}
.svc:hover .svc__more svg{transform:translateX(5px)}
.svc__bar{height:4px; background:var(--sc)}

/* ---------- 13. BRUSH DIVIDER ---------- */
.brush{display:block; width:100%; height:auto; overflow:visible}
.brush path{fill:none; stroke:var(--accent); stroke-width:14; stroke-linecap:round; opacity:.9}

/* ---------- 14. WORK / horizontal rail ---------- */
.rail{display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:.4rem .2rem 1.6rem;
  scrollbar-width:none; -webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail__item{flex:0 0 78%; scroll-snap-align:center; border-radius:var(--r-lg); overflow:hidden; position:relative;
  background:#e7e4de; box-shadow:var(--shadow-1)}
@media (min-width:760px){.rail__item{flex-basis:44%}}
@media (min-width:1160px){.rail__item{flex-basis:30%}}
.rail__item img{aspect-ratio:4/3; width:100%; object-fit:cover; transition:transform 1s var(--ease)}
.rail__item:hover img{transform:scale(1.05)}
.rail__cap{position:absolute; left:0; right:0; bottom:0; padding:2.6rem 1.1rem 1.05rem; color:#fff;
  background:linear-gradient(transparent, rgba(10,16,36,.82))}
.rail__cap b{display:block; font-family:var(--f-d); font-size:1rem; font-weight:600}
.rail__cap span{font-size:.78rem; opacity:.75}

/* ---------- 15. GALLERY GRID ---------- */
.filters{display:flex; gap:.45rem; overflow-x:auto; padding-bottom:.6rem; scrollbar-width:none; margin-bottom:1.6rem}
.filters::-webkit-scrollbar{display:none}
.filters button{padding:.55rem 1.1rem; border-radius:var(--r-full); border:1.5px solid var(--line);
  font-family:var(--f-d); font-weight:600; font-size:.9rem; white-space:nowrap; background:var(--paper-2); transition:.3s}
.filters button.is-on{background:var(--navy-x); color:#fff; border-color:var(--navy-x)}
.gal{columns:2; column-gap:.9rem}
@media (min-width:760px){.gal{columns:3; column-gap:1.1rem}}
@media (min-width:1160px){.gal{columns:4}}
.gal__it{break-inside:avoid; margin-bottom:.9rem; border-radius:var(--r-md); overflow:hidden; position:relative;
  background:#e7e4de; box-shadow:var(--shadow-1); cursor:zoom-in}
@media (min-width:760px){.gal__it{margin-bottom:1.1rem}}
.gal__it img{width:100%; transition:transform .9s var(--ease)}
.gal__it:hover img{transform:scale(1.05)}
.gal__it figcaption{position:absolute; inset:auto 0 0 0; padding:2.2rem .85rem .8rem; color:#fff;
  background:linear-gradient(transparent, rgba(10,16,36,.85)); opacity:0; transition:opacity .4s}
.gal__it:hover figcaption, .gal__it:focus-within figcaption{opacity:1}
.gal__it figcaption b{display:block; font-family:var(--f-d); font-size:.9rem; font-weight:600; line-height:1.3}
.gal__it figcaption span{font-size:.74rem; opacity:.75}
.gal__it.is-hide{display:none}

/* lightbox */
.lb{position:fixed; inset:0; z-index:960; display:none; place-items:center; background:rgba(8,12,26,.94); padding:1rem}
.lb.is-on{display:grid}
.lb img{max-width:min(96vw,1200px); max-height:82vh; border-radius:var(--r-md); box-shadow:var(--shadow-3)}
.lb__cap{color:#fff; text-align:center; margin-top:1rem; font-family:var(--f-d)}
.lb__cap span{display:block; font-family:var(--f-b); font-size:.85rem; opacity:.6}
.lb__x{position:absolute; top:1rem; right:1rem; width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; display:grid; place-content:center; font-size:1.4rem}
.lb__nav{position:absolute; top:50%; translate:0 -50%; width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; display:grid; place-content:center}
.lb__nav--p{left:1rem} .lb__nav--n{right:1rem}

/* ---------- 16. SHADE PICKER ---------- */
.shade{display:grid; gap:1.6rem}
@media (min-width:900px){.shade{grid-template-columns:1.25fr .75fr; align-items:center}}
.shade__stage{position:relative; border-radius:var(--r-lg); overflow:hidden; background:#fff; box-shadow:var(--shadow-2)}
.shade__stage img{width:100%; aspect-ratio:16/9; object-fit:cover}
.shade__wash{position:absolute; inset:0; mix-blend-mode:multiply; opacity:0; transition:opacity .6s, background .6s}
.shade__wash.is-on{opacity:.42}
.shade__code{position:absolute; left:14px; bottom:14px; display:flex; align-items:center; gap:.6rem;
  padding:.5rem .9rem; border-radius:var(--r-full); background:rgba(255,255,255,.92); box-shadow:var(--shadow-1);
  font-family:var(--f-n); font-size:.8rem; font-weight:700}
.shade__code i{width:16px; height:16px; border-radius:5px; background:var(--c,#ccc)}
.swatches{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:.55rem}
.sw{border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--line); background:var(--paper-2);
  transition:transform .4s var(--ease), box-shadow .4s}
.sw:hover, .sw.is-on{transform:translateY(-4px); box-shadow:var(--shadow-2)}
.sw i{display:block; height:52px; background:var(--c)}
.sw span{display:block; padding:.45rem .4rem .55rem; font-family:var(--f-d); font-size:.78rem; font-weight:600; text-align:center; line-height:1.25}
.sw.is-on{outline:2px solid var(--navy-x); outline-offset:1px}

/* ---------- 17. PROCESS ---------- */
.proc{position:relative; display:grid; gap:1rem}
@media (min-width:760px){.proc{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.proc{grid-template-columns:repeat(3,1fr)}}
.step{position:relative; padding:1.5rem 1.4rem 1.6rem; border-radius:var(--r-lg);
  background:var(--paper-2); border:1px solid var(--line); overflow:hidden}
.step::before{content:''; position:absolute; inset:0 auto 0 0; width:4px; background:var(--accent); opacity:.85}
.step b{font-family:var(--f-n); font-size:.72rem; letter-spacing:.16em; color:var(--accent); font-weight:700}
.step h3{margin:.5rem 0 .4rem; font-size:1.16rem}
.step p{margin:0; font-size:.93rem; color:var(--ink-2)}
.step__ghost{position:absolute; right:-6px; bottom:-26px; font-family:var(--f-d); font-weight:800;
  font-size:5.4rem; color:var(--ink); opacity:.05; line-height:1}

/* ---------- 18. DARK PANEL ---------- */
.dark{background:var(--navy-x); color:#fff; border-radius:var(--r-xl); padding:clamp(2.2rem,5vw,4.2rem) clamp(1.4rem,4vw,3.4rem); position:relative; overflow:hidden}
.dark .lead, .dark .muted{color:rgba(255,255,255,.68)}
.dark .eyebrow{color:#fff}
.dark .eyebrow::before{background:var(--accent)}
.dark__glow{position:absolute; width:52vw; height:52vw; border-radius:50%; filter:blur(90px); opacity:.28;
  background:radial-gradient(circle,var(--accent),transparent 70%); top:-18vw; right:-14vw; pointer-events:none}

/* warranty table */
.wtab{width:100%; border-collapse:collapse; margin-top:1.8rem; font-size:.92rem}
.wtab th{text-align:left; font-family:var(--f-n); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.45); padding:0 1rem .8rem 0; font-weight:700}
.wtab td{padding:.95rem 1rem .95rem 0; border-top:1px solid rgba(255,255,255,.12); vertical-align:top}
.wtab td:first-child{font-family:var(--f-d); font-weight:600}
.wtab .term{display:inline-block; padding:.2rem .7rem; border-radius:var(--r-full);
  background:rgba(255,255,255,.1); font-family:var(--f-n); font-size:.75rem; font-weight:600; white-space:nowrap}
.wtab__wrap{overflow-x:auto}

/* ---------- 19. CERT / TRUST CARDS ---------- */
.trust{display:grid; gap:.9rem}
@media (min-width:700px){.trust{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.trust{grid-template-columns:repeat(3,1fr)}}
.tcard{padding:1.25rem 1.3rem; border-radius:var(--r-md); background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.1)}
.tcard b{display:block; font-family:var(--f-d); font-size:.98rem; font-weight:600; line-height:1.4}
.tcard span{font-family:var(--f-n); font-size:.7rem; letter-spacing:.1em; color:rgba(255,255,255,.45)}
.tcard i{display:block; width:26px; height:3px; border-radius:3px; background:var(--accent); margin-bottom:.9rem}

/* ---------- 20. FOUNDER ---------- */
.founder{display:grid; gap:clamp(1.6rem,4vw,3.2rem); align-items:center}
@media (min-width:880px){.founder{grid-template-columns:.85fr 1.15fr}}
.founder__ph{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-2)}
.founder__ph img{width:100%; aspect-ratio:9/11; object-fit:cover}
.founder__badge{position:absolute; left:14px; right:14px; bottom:14px; padding:.7rem 1.05rem; border-radius:var(--r-md);
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px); box-shadow:var(--shadow-1)}
.founder__badge b{display:block; font-family:var(--f-d); font-size:1.05rem; line-height:1.3}
.founder__badge span{display:block; font-size:.78rem; line-height:1.4; color:var(--ink-3)}
.quote{font-family:var(--f-d); font-size:clamp(1.25rem,2.3vw,1.85rem); line-height:1.4; font-weight:600; margin:0 0 1.2rem}
.quote::before{content:'“'; color:var(--accent); font-size:1.3em; line-height:0; vertical-align:-.24em; margin-right:.06em}

/* ---------- 21. AREAS ---------- */
.areas{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.6rem}
.area{display:inline-flex; align-items:baseline; gap:.5rem; padding:.6rem 1.1rem; border-radius:var(--r-full);
  background:var(--paper-2); border:1px solid var(--line); box-shadow:var(--shadow-1);
  font-family:var(--f-d); font-weight:600; font-size:.96rem; transition:transform .4s var(--ease), border-color .3s}
.area:hover{transform:translateY(-3px); border-color:var(--accent)}
.area em{font-style:normal; font-family:var(--f-n); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}

/* ---------- 22. FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:1.25rem .4rem 1.25rem 0; display:flex; gap:1rem; align-items:flex-start;
  font-family:var(--f-d); font-weight:600; font-size:clamp(1rem,1.5vw,1.15rem)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:''; margin-left:auto; flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--accent); mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v14h-2z'/%3E%3Cpath d='M5 11h14v2H5z'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v14h-2z'/%3E%3Cpath d='M5 11h14v2H5z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .4s var(--ease); margin-top:.25rem}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq details p{margin:0 0 1.4rem; padding-right:2.4rem; color:var(--ink-2); font-size:.98rem}

/* ---------- 23. FORM ---------- */
.form{display:grid; gap:.9rem}
@media (min-width:700px){.form{grid-template-columns:repeat(2,1fr)}.form .full{grid-column:1/-1}}
.field{position:relative}
.field label{display:block; font-family:var(--f-n); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:.4rem; font-weight:700}
.field input, .field select, .field textarea{
  width:100%; padding:.95rem 1.05rem; border-radius:var(--r-sm); border:1.5px solid var(--line);
  background:var(--paper-2); font:inherit; color:var(--ink); transition:border-color .3s, box-shadow .3s}
.field textarea{min-height:130px; resize:vertical}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--navy); box-shadow:0 0 0 4px rgba(27,58,139,.12)}
.chipset{display:flex; flex-wrap:wrap; gap:.5rem}
.chipset input{position:absolute; opacity:0; width:0; height:0}
.chipset label{display:inline-flex; align-items:center; padding:.6rem 1.05rem; border-radius:var(--r-full);
  border:1.5px solid var(--line); background:var(--paper-2); cursor:pointer; font-family:var(--f-d); font-weight:600;
  font-size:.92rem; letter-spacing:0; text-transform:none; color:var(--ink); margin:0; transition:.3s}
.chipset input:checked + label{background:var(--navy-x); color:#fff; border-color:var(--navy-x)}
.chipset input:focus-visible + label{box-shadow:0 0 0 4px rgba(27,58,139,.18)}
.form__note{font-size:.85rem; color:var(--ink-3); margin:.2rem 0 0}

/* ---------- 24. CTA + FOOTER ---------- */
.cta{background:var(--navy-x); color:#fff; padding-block:clamp(3.4rem,7vw,6rem); position:relative; overflow:hidden; text-align:center}
.cta__in{position:relative}
.cta .lead{color:rgba(255,255,255,.7); margin-inline:auto}
.cta .eyebrow{color:#fff; justify-content:center}
.cta__btns{display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:2rem}
.cta .btn--line{border-color:rgba(255,255,255,.3); color:#fff}
.cta .btn--line:hover{background:rgba(255,255,255,.1); border-color:#fff; color:#fff}
.cta__drips{position:absolute; top:calc(-1 * clamp(3.4rem,7vw,6rem)); left:0; right:0; display:flex; height:64px}
.cta__drips span{flex:1; background:var(--c); border-radius:0 0 60% 60%; transform-origin:top}

.foot{background:#070C1C; color:rgba(255,255,255,.72); padding-top:clamp(3rem,6vw,5rem)}
.foot a:hover{color:#fff}
.foot__grid{display:grid; gap:2.2rem; padding-bottom:3rem}
@media (min-width:760px){.foot__grid{grid-template-columns:1.3fr 1fr 1fr}}
@media (min-width:1080px){.foot__grid{grid-template-columns:1.5fr .8fr .8fr 1.1fr}}
.foot .brand__txt b{color:#fff}
.foot .brand__txt i{color:rgba(255,255,255,.5)}
.foot__tag{margin:1rem 0 1.2rem; max-width:34ch; font-size:.95rem}
.chipline{display:flex; gap:.4rem}
.chip{width:26px; height:26px; border-radius:8px; background:var(--c); display:block}
.foot__col h4{font-family:var(--f-n); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.42); margin:0 0 1rem}
.foot__col li{margin-bottom:.55rem; font-size:.94rem}
.foot__areas{columns:2; column-gap:1rem}
.foot__contact a{display:block; margin-bottom:.35rem; font-size:.95rem}
.foot__phone{font-family:var(--f-n); font-size:1.16rem !important; font-weight:700; color:#fff; letter-spacing:.01em}
.foot__contact p{font-size:.9rem; margin:.9rem 0 0; max-width:32ch}
.foot__hours{color:rgba(255,255,255,.45) !important; font-size:.85rem !important}
.foot__contact .btn{margin-top:1.1rem; border-color:rgba(255,255,255,.24); color:#fff}
.foot__contact .btn:hover{border-color:#fff; background:rgba(255,255,255,.08); color:#fff}
.foot__bar{display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; justify-content:space-between;
  padding:1.4rem 0 calc(1.6rem + var(--dock-h)); border-top:1px solid rgba(255,255,255,.1); font-size:.82rem; color:rgba(255,255,255,.45)}
.foot__bar p{margin:0}

/* ---------- 25. MOBILE DOCK ---------- */
.dock{
  position:fixed; left:50%; translate:-50% 0; bottom:calc(.7rem + env(safe-area-inset-bottom)); z-index:840;
  display:grid; grid-template-columns:repeat(5,1fr); align-items:center; gap:.1rem;
  width:min(100% - 1.6rem, 430px); padding:.42rem;
  background:rgba(255,255,255,.86); backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid rgba(255,255,255,.7); border-radius:var(--r-full); box-shadow:0 10px 34px rgba(10,16,36,.2);
  transition:transform .5s var(--ease), opacity .4s;
}
.dock.is-down{transform:translate(-50%, 160%); opacity:0}
.dock a{display:grid; justify-items:center; gap:2px; padding:.44rem .2rem; border-radius:var(--r-full); color:var(--ink-3)}
.dock a svg{width:21px; height:21px}
.dock a span{font-family:var(--f-d); font-size:.62rem; font-weight:600; line-height:1}
.dock a.is-on{color:var(--navy)}
.dock__wa{background:#25D366; color:#fff !important; width:52px; height:52px; border-radius:50% !important;
  place-content:center; justify-self:center; box-shadow:0 6px 18px rgba(37,211,102,.42)}
.dock__wa svg{width:26px; height:26px}
@media (min-width:1000px){.dock{display:none}}
@media (max-width:999px){body{--dock-h:82px}}

/* ---------- 26. REVEAL STATES ---------- */
.reveal{opacity:0; transform:translateY(28px)}
.reveal.is-in{opacity:1; transform:none}
.no-motion .reveal{opacity:1 !important; transform:none !important}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important; transform:none !important}
  .preloader{display:none}
}

/* ---------- 27. SMALL UTILITIES ---------- */
.grid-2{display:grid; gap:clamp(1.4rem,3vw,2.6rem)}
@media (min-width:880px){.grid-2{grid-template-columns:repeat(2,1fr)}}
.split-head{display:grid; gap:1rem; align-items:end; margin-bottom:clamp(1.8rem,3.4vw,3rem)}
@media (min-width:880px){.split-head{grid-template-columns:1.4fr .6fr}}
.sec--paper{background:var(--paper-2)}
.hr{height:1px; background:var(--line); border:0; margin:0}
.tick{display:flex; gap:.65rem; align-items:flex-start; margin-bottom:.55rem; font-size:.95rem}
.tick::before{content:''; flex:none; width:20px; height:20px; margin-top:.16rem; border-radius:50%;
  background:var(--accent); opacity:.16;
  box-shadow:inset 0 0 0 1px var(--accent)}
.tick{position:relative}
.tick::after{content:''; position:absolute; left:6px; top:.5rem; width:8px; height:4px; border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent); transform:rotate(-45deg)}