/* =========================================================
   Prakash Hardware & Paints — Semiliguda
   Mobile-first, no frameworks.
   ========================================================= */

:root{
  --ink:#0B0E13;
  --ink-2:#12161E;
  --ink-3:#1A2029;
  --line:rgba(255,255,255,.09);
  --paper:#F7F4EF;
  --txt:#EAE7E1;
  --txt-dim:#9AA1AE;

  --brand:#FF8A1F;
  --brand-2:#F0451F;
  --brand-3:#FFC246;
  --blue:#2E6FF2;
  --teal:#22C1A4;
  --wa:#25D366;

  --grad: linear-gradient(135deg,#FFC246 0%,#FF8A1F 45%,#F0451F 100%);

  --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px;
  --pad:20px;
  /* must be >= the dock's rendered height, or content hides behind it */
  --dock-h: calc(80px + env(safe-area-inset-bottom));

  --f-disp:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-body:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--txt);
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
  padding-bottom:var(--dock-h);
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3{font-family:var(--f-disp); font-weight:800; line-height:1.02; letter-spacing:-.03em; margin:0}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:2px solid var(--brand-3); outline-offset:3px; border-radius:6px}

/* ---------- Twemoji sprite ---------- */
/* The sprite itself must stay in the layer tree for <use> to resolve,
   so it is collapsed rather than display:none'd. */
.sprite{position:absolute; width:0; height:0; overflow:hidden}
.tw{width:1em; height:1em; display:inline-block; vertical-align:-.14em; flex:none}
.tw--sm{width:.9em; height:.9em}
.tw--off{opacity:.28}

/* Lucide UI icons — stroke-based, so they take the current text colour.
   Sized here rather than with width/height attributes on the <svg>: this
   rule beats presentation attributes, so an attribute would be silently
   ignored. Every context that wants a specific size sets it below. */
.lu{width:1em; height:1em; display:inline-block; flex:none; vertical-align:-.14em}
.hdr__cta .lu{width:17px; height:17px}
.btn .lu{width:18px; height:18px}

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important; transform:none!important; transition:none}
  *{animation-duration:.001ms!important; animation-iteration-count:1!important}
  html{scroll-behavior:auto}
}

/* =================== LOADER =================== */
.loader{
  position:fixed; inset:0; z-index:200; background:var(--ink);
  display:grid; place-content:center; justify-items:center; gap:18px;
  transition:opacity .5s ease, visibility .5s;
}
.loader.done{opacity:0; visibility:hidden}
.loader__drop{animation:bob 1.1s ease-in-out infinite}
.loader__txt{font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-dim)}
@keyframes bob{0%,100%{transform:translateY(-8px) rotate(-4deg)}50%{transform:translateY(8px) rotate(4deg)}}

/* =================== HEADER =================== */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:90;
  display:flex; align-items:center; gap:12px;
  padding:14px var(--pad); padding-top:calc(14px + env(safe-area-inset-top));
  transition:background .35s, backdrop-filter .35s, padding .35s, box-shadow .35s;
}
.hdr.stuck{
  background:rgba(11,14,19,.92); backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 1px 0 var(--line); padding-top:calc(10px + env(safe-area-inset-top)); padding-bottom:10px;
}
.brand{display:flex; align-items:center; gap:10px; margin-right:auto}
.brand__mark{display:grid; place-items:center; filter:drop-shadow(0 6px 14px rgba(240,69,31,.35))}
.brand__txt{display:flex; flex-direction:column; line-height:1}
.brand__txt strong{font-family:var(--f-disp); font-size:19px; letter-spacing:-.02em}
.brand__txt small{font-size:9.5px; letter-spacing:.19em; text-transform:uppercase; color:var(--brand-3); margin-top:3px}

.nav-desk{display:none}
.hdr__cta{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--grad); color:#1A0B02; font-weight:600; font-size:14px;
  padding:9px 15px; border-radius:999px; box-shadow:0 6px 18px rgba(240,69,31,.32);
}
.burger{
  width:42px; height:42px; border:1px solid var(--line); background:rgba(255,255,255,.05);
  border-radius:13px; display:grid; place-content:center; gap:5px; cursor:pointer; padding:0;
}
.burger span{display:block; width:17px; height:2px; background:var(--txt); border-radius:2px; transition:transform .3s, opacity .25s}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =================== DRAWER =================== */
.drawer{
  position:fixed; z-index:95; top:0; right:0; height:100dvh; width:min(86vw,360px);
  background:var(--ink-2); border-left:1px solid var(--line);
  transform:translateX(102%); transition:transform .45s cubic-bezier(.6,.05,.2,1);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:calc(90px + env(safe-area-inset-top)) 26px calc(30px + env(safe-area-inset-bottom));
}
.drawer.open{transform:none}
.drawer nav{display:flex; flex-direction:column; gap:4px}
.drawer nav a{
  font-family:var(--f-disp); font-size:25px; font-weight:700; letter-spacing:-.02em;
  padding:11px 0; border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:12px;
}
.drawer nav a em{font-family:var(--f-body); font-style:normal; font-size:11px; color:var(--brand); letter-spacing:.1em}
.drawer__foot p{font-size:13px; color:var(--txt-dim); margin-top:14px; line-height:1.5}
.scrim{
  position:fixed; inset:0; z-index:94; background:rgba(0,0,0,.6);
  opacity:0; visibility:hidden; transition:.35s; backdrop-filter:blur(3px);
}
.scrim.on{opacity:1; visibility:visible}

/* =================== BUTTONS =================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 22px; border-radius:999px; font-weight:600; font-size:15px;
  border:1px solid transparent; cursor:pointer; transition:transform .2s, box-shadow .25s, background .25s;
}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--grad); color:#1A0B02; box-shadow:0 10px 26px rgba(240,69,31,.34)}
.btn--ghost{background:rgba(255,255,255,.05); border-color:var(--line); color:var(--txt)}
.btn--wa{background:var(--wa); color:#04220E}
.btn--block{width:100%; margin-top:16px}

/* =================== HERO =================== */
.hero{position:relative; padding:calc(120px + env(safe-area-inset-top)) var(--pad) 0; overflow:hidden}
/* Ambient light: painted with radial-gradients instead of blurred+animated
   layers — same look, no per-frame filter rasterisation while scrolling. */
.hero__bg{position:absolute; inset:0; z-index:0; pointer-events:none}
.blob{position:absolute; border-radius:50%; opacity:.55}
.blob--a{width:520px; height:520px; top:-190px; left:-190px; background:radial-gradient(circle,rgba(240,69,31,.85) 0%,rgba(240,69,31,.28) 38%,transparent 68%)}
.blob--b{width:520px; height:520px; top:60px; right:-230px; background:radial-gradient(circle,rgba(46,111,242,.8) 0%,rgba(46,111,242,.24) 38%,transparent 68%)}
.blob--c{width:460px; height:460px; bottom:-90px; left:-170px; background:radial-gradient(circle,rgba(34,193,164,.6) 0%,rgba(34,193,164,.18) 38%,transparent 68%); opacity:.45}
.grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 75% 45% at 50% 22%,#000 20%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 75% 45% at 50% 22%,#000 20%,transparent 72%);
}
.hero__inner{position:relative; z-index:1}

.hero__note{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin-top:18px; font-size:13px; color:var(--txt-dim); letter-spacing:.01em;
  row-gap:6px;
}
.hero__note span:not(:last-child)::after{content:" ·"; opacity:.5}
.hero__note strong{color:var(--brand-3); font-weight:600}

.hero__title{font-size:clamp(40px,12.5vw,66px); margin:0}
.ink{position:relative; display:inline-block; padding-bottom:6px}
.ink__word{
  display:inline-block; min-height:1em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.ink__stroke{position:absolute; left:-2%; bottom:-6px; width:104%; height:18px}
.ink__stroke path{stroke-dasharray:340; stroke-dashoffset:340; animation:draw 1.3s .9s cubic-bezier(.6,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.hero__sub{margin-top:20px; font-size:16.5px; color:var(--txt-dim); max-width:44ch; font-weight:300}
.hero__sub strong{color:var(--txt); font-weight:500}
.hero__cta{display:flex; gap:11px; margin-top:26px; flex-wrap:wrap}

/* ---- Mascot ---- */
.mascot{position:relative; margin:6px auto -14px; width:min(300px,78vw)}
/* Static glow behind the mascot instead of a drop-shadow filter on animated SVG. */
.mascot::before{
  content:""; position:absolute; left:50%; top:55%; width:110%; aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%; z-index:-1;
  background:radial-gradient(circle,rgba(240,69,31,.35) 0%,rgba(240,69,31,.10) 45%,transparent 70%);
}
.mascot__svg{width:100%; height:auto; overflow:visible}
.m-float{animation:float 4.4s ease-in-out infinite; transform-origin:140px 190px}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-13px) rotate(1.5deg)}}
.m-shadow{animation:shad 4.4s ease-in-out infinite}
@keyframes shad{0%,100%{transform:scale(1); opacity:.9}50%{transform:scale(.86); opacity:.55}}
.m-eyes{animation:blink 5.2s infinite; transform-origin:140px 168px}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
.m-arm{animation:wave 3s ease-in-out infinite; transform-origin:80px 200px}
@keyframes wave{0%,100%{transform:rotate(0)}50%{transform:rotate(-13deg)}}
.m-hat{animation:tip 6s ease-in-out infinite; transform-origin:140px 128px}
@keyframes tip{0%,88%,100%{transform:rotate(0) translateY(0)}93%{transform:rotate(-7deg) translateY(-7px)}}
.m-drip{animation:rise 3.6s ease-in-out infinite}
.m-drip.d2{animation-delay:-1.2s} .m-drip.d3{animation-delay:-2.4s}
@keyframes rise{0%,100%{transform:translateY(0); opacity:.5}50%{transform:translateY(-18px); opacity:1}}

.mascot__bubble{
  position:absolute; right:-6px; top:6px; max-width:172px;
  background:var(--paper); color:#141821; border-radius:16px 16px 16px 4px;
  padding:11px 14px; font-size:12.5px; line-height:1.4;
  box-shadow:0 14px 30px rgba(0,0,0,.4);
  animation:pop .6s 1.6s both cubic-bezier(.3,1.5,.5,1);
}
.mascot__bubble b{display:block; font-size:13.5px; font-family:var(--f-disp)}
.mascot__bubble span{color:#5A6270}
@keyframes pop{from{opacity:0; transform:scale(.7) translateY(10px)}to{opacity:1; transform:none}}

/* ---- Trust strip ---- */
.trust{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1px; background:var(--line);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin:24px calc(var(--pad) * -1) 0;
}
.trust__item{background:var(--ink); padding:20px 16px; text-align:center}
.trust__item b{
  display:inline-block; font-family:var(--f-disp); font-size:29px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.tw--trust{width:23px; height:23px; vertical-align:-1px; margin-left:3px}
.trust__item span{display:block; font-size:11.5px; color:var(--txt-dim); letter-spacing:.05em}

/* =================== MARQUEE =================== */
.marquee{overflow:hidden; margin:-6px 0 26px}
.marquee__bar{
  overflow:hidden; background:var(--grad); color:#1A0B02; padding:11px 0;
  transform:rotate(-1.4deg); width:114%; margin-left:-7%;
}
.marquee__track{display:flex; gap:22px; white-space:nowrap; width:max-content; animation:scroll 26s linear infinite; will-change:transform}
.marquee__track span{font-family:var(--f-disp); font-weight:800; font-size:15px; letter-spacing:.06em}
/* Separator is a rotated square, not a ✦ glyph — that codepoint sits
   outside our font subsets and would render from a system fallback. */
.marquee__track i{
  align-self:center; width:7px; height:7px; border-radius:1px;
  background:currentColor; transform:rotate(45deg); opacity:.5;
}
@keyframes scroll{to{transform:translateX(-50%)}}

/* =================== SECTIONS =================== */
.sec{padding:60px var(--pad); position:relative; scroll-margin-top:76px}
.sec__head{margin-bottom:32px}
.eyebrow{
  display:inline-block; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brand); margin-bottom:14px; font-weight:600;
}
.sec__head h2{font-size:clamp(31px,9vw,46px)}
.sec__head p{margin-top:14px; color:var(--txt-dim); font-weight:300; max-width:46ch}

/* ---- Category cards ---- */
.cards{display:grid; gap:16px}
.card{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:var(--ink-2); border:1px solid var(--line);
  transition:transform .4s cubic-bezier(.2,.7,.3,1), border-color .4s;
  isolation:isolate; contain:layout paint;
}
.card::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:inherit; box-shadow:inset 0 0 0 1px transparent;
  transition:box-shadow .4s;
}
.card:hover{transform:translateY(-6px); border-color:color-mix(in srgb, var(--tint) 55%, transparent)}
.card:hover::after{box-shadow:inset 0 0 60px -20px var(--tint)}
.card img{width:100%; height:190px; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.card:hover img{transform:scale(1.06)}
.card--tall img{height:230px}
.card__art{height:170px; display:grid; place-items:center; background:radial-gradient(circle at 50% 40%, color-mix(in srgb,var(--tint) 30%, var(--ink-2)), var(--ink-2))}
.card__art svg{width:120px; height:120px}
.card__body{padding:22px 20px 24px; position:relative}
.card__no{
  position:absolute; top:-26px; right:18px; z-index:3;
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  background:var(--tint); color:#fff; font-family:var(--f-disp); font-weight:800; font-size:15px;
  box-shadow:0 10px 22px rgba(0,0,0,.45);
}
.card h3{font-size:22px; margin-bottom:9px}
.card p{font-size:14.5px; color:var(--txt-dim); font-weight:300}
.chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:14px}
.chips li{
  font-size:11.5px; padding:5px 11px; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--txt-dim);
}

/* =================== COLOUR STUDIO =================== */
.studio{background:var(--ink-2); border-block:1px solid var(--line)}
.studio__stage{
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  background:var(--ink-3); box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.room{width:100%; height:auto; display:block}
#wall{transition:fill .7s cubic-bezier(.3,.8,.3,1)}
.studio__meta{display:flex; align-items:center; gap:13px; padding:15px 18px; border-top:1px solid var(--line)}
.swatch-preview{width:38px; height:38px; border-radius:11px; background:#E4B7A0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); transition:background .5s; flex:none}
.studio__meta b{font-family:var(--f-disp); font-size:16px; display:block}
.studio__meta small{font-size:12px; color:var(--txt-dim)}

/* 4-up on small phones so each swatch stays a comfortable tap target
   (8-up would be ~27px at 320px wide); 8-up once there is room. */
.swatches{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:18px}
@media (min-width:480px){ .swatches{grid-template-columns:repeat(8,1fr); gap:9px} }
.sw{
  aspect-ratio:1; border-radius:12px; background:var(--c); border:2px solid transparent;
  cursor:pointer; padding:0; position:relative;
  box-shadow:inset 0 -6px 12px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.3);
  transition:transform .25s, border-color .25s;
}
.sw:active{transform:scale(.9)}
.sw.is-on{border-color:#fff; transform:translateY(-4px)}
.sw.is-on::after{content:"✓"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:15px; text-shadow:0 1px 4px rgba(0,0,0,.6)}

/* ---- Calculator ---- */
.calc{
  margin-top:32px; padding:24px 20px; border-radius:var(--r-lg);
  background:linear-gradient(160deg, rgba(255,138,31,.1), rgba(46,111,242,.07));
  border:1px solid var(--line);
}
.calc h3{font-size:22px}
.calc__hint{font-size:13px; color:var(--txt-dim); margin-top:7px; font-weight:300}
.calc__row{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px}
.calc__row label{display:flex; flex-direction:column; gap:6px; font-size:11.5px; color:var(--txt-dim); position:relative}
.calc__row label span{position:absolute; right:11px; top:31px; font-size:11px; color:var(--txt-dim); pointer-events:none}
.calc__row input{
  background:rgba(0,0,0,.35); border:1px solid var(--line); border-radius:13px;
  padding:12px 30px 12px 13px; font-size:16px; font-weight:600; width:100%;
  -moz-appearance:textfield;
}
.calc__row input::-webkit-outer-spin-button,.calc__row input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.calc__out{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; text-align:center}
.calc__out > div{background:rgba(0,0,0,.3); border:1px solid var(--line); border-radius:15px; padding:14px 8px}
.calc__out b{display:block; font-family:var(--f-disp); font-size:22px}
.calc__out span{font-size:10.5px; color:var(--txt-dim); line-height:1.3; display:block; margin-top:3px}
.calc__hero{background:var(--grad)!important; border-color:transparent!important; color:#1A0B02}
.calc__hero span{color:rgba(26,11,2,.7)!important}

/* =================== BRANDS =================== */
.brands{text-align:left}
.logos{
  display:grid; gap:12px;
  margin-inline:calc(var(--pad) * -1);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
}
.logos__row{overflow:hidden}
.logos__track{display:flex; gap:12px; width:max-content; will-change:transform; animation:scroll 34s linear infinite}
.logos__row[data-dir="r"] .logos__track{animation-direction:reverse; animation-duration:40s}
.logos:hover .logos__track{animation-play-state:paused}
.logos__track span{
  display:inline-flex; align-items:center; gap:11px; flex:none;
  padding:13px 20px 13px 13px; border-radius:999px;
  background:var(--ink-2); border:1px solid var(--line);
  font-family:var(--f-disp); font-weight:700; font-size:15.5px; letter-spacing:-.01em;
  color:var(--txt); white-space:nowrap;
}
.logos__track i{
  font-style:normal; font-size:11.5px; font-weight:800; letter-spacing:.02em;
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--b); color:#fff;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--b) 22%, transparent);
}
.brands__note{margin-top:18px; font-size:13px; color:var(--txt-dim); text-align:center}
.brands__note strong{color:var(--brand-3); font-weight:600}

/* =================== WHY =================== */
.why__grid{display:grid; gap:13px}
.why__item{
  padding:22px 20px; border-radius:var(--r); border:1px solid var(--line);
  background:linear-gradient(150deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  transition:transform .35s, border-color .35s;
}
.why__item:hover{transform:translateY(-4px); border-color:color-mix(in srgb, var(--tint) 45%, transparent)}
.why__ico{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  margin-bottom:14px; color:var(--tint);
  background:color-mix(in srgb, var(--tint) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--tint) 30%, transparent);
}
.why__ico svg{width:24px; height:24px}
.why__item h3{font-size:18px; margin-bottom:7px}
.why__item p{font-size:14px; color:var(--txt-dim); font-weight:300}

/* =================== REVIEWS =================== */
.rail{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px calc(var(--pad)) 8px; margin:0 calc(var(--pad) * -1);
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{display:none}
.quote{
  flex:0 0 84%; scroll-snap-align:center;
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 22px; position:relative;
}
.quote::before{
  content:"”"; position:absolute; top:-2px; right:20px;
  font-family:var(--f-disp); font-size:84px; line-height:1; color:rgba(255,138,31,.16);
}
.stars{display:flex; gap:4px}
.stars .tw{width:16px; height:16px}
.quote p{margin-top:13px; font-size:16.5px; font-weight:300; line-height:1.5}
.quote footer{margin-top:16px; font-size:12px; color:var(--txt-dim); letter-spacing:.04em}
/* Small dot, big hit area: the button is 28px square and transparent,
   the visible dot is drawn by ::before. */
.dots{display:flex; gap:2px; justify-content:center; margin-top:12px}
.dots button{
  width:28px; height:28px; border:0; background:none; padding:0; cursor:pointer;
  display:grid; place-items:center;
}
.dots button::before{
  content:""; width:7px; height:7px; border-radius:99px;
  background:rgba(255,255,255,.22); transition:width .3s, background .3s;
}
.dots button.on::before{width:22px; background:var(--brand)}

/* =================== VISIT =================== */
.visit__grid{display:grid; gap:18px}
.visit__map{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); height:280px; background:var(--ink-2)}
.visit__map iframe{width:100%; height:100%; border:0}
.visit__info{display:grid; gap:19px}
.info__row{display:flex; gap:13px; align-items:flex-start}
/* Light chip: the Twemoji glyphs are full-colour and some (the phone) are
   near-black, so they need a light ground rather than the dark tint tile. */
.info__ico{
  flex:none; width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  background:var(--paper); box-shadow:0 2px 10px rgba(0,0,0,.3);
}
.info__ico .tw{width:22px; height:22px}
.info__row b{font-family:var(--f-disp); font-size:15px; display:block; margin-bottom:3px}
.info__row p{font-size:14px; color:var(--txt-dim); font-weight:300}
.info__row a{color:var(--brand-3); border-bottom:1px solid rgba(255,194,70,.35)}
.visit__btns{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px}

.enquiry{
  margin-top:34px; padding:26px 20px; border-radius:var(--r-lg);
  background:var(--ink-2); border:1px solid var(--line);
}
.enquiry h3{font-size:22px}
.enquiry__hint{font-size:13px; color:var(--txt-dim); margin-top:6px; font-weight:300}
.field{display:flex; flex-direction:column; gap:7px; margin-top:16px}
.field label{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-dim)}
.field input,.field select,.field textarea{
  background:rgba(0,0,0,.32); border:1px solid var(--line); border-radius:14px;
  padding:13px 14px; font-size:15px; resize:vertical; width:100%;
}
.field select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--txt-dim) 50%),linear-gradient(135deg,var(--txt-dim) 50%,transparent 50%); background-position:calc(100% - 19px) 21px, calc(100% - 14px) 21px; background-size:5px 5px; background-repeat:no-repeat}
.field input::placeholder,.field textarea::placeholder{color:#5D6472}

/* =================== FOOTER =================== */
.ftr{border-top:1px solid var(--line); padding:44px var(--pad) 30px; background:var(--ink-2)}
.brand--ftr{margin-bottom:16px}
.ftr__line{font-size:14px; color:var(--txt-dim); font-weight:300; max-width:48ch}
.ftr__nav{display:flex; flex-wrap:wrap; gap:9px 18px; margin-top:22px; font-size:14px; color:var(--txt-dim)}
.ftr__nav a:hover{color:var(--brand-3)}
.ftr__bot{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between;
  margin-top:30px; padding-top:20px; border-top:1px solid var(--line);
  font-size:12px; color:#6C7381;
}

/* =================== DOCK =================== */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:88;
  display:grid; grid-template-columns:repeat(3,1fr);
  background:#0C1017; border-top:1px solid var(--line);
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  transform:translateY(120%); transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.dock.up{transform:none}
.dock__btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  min-height:58px; padding:8px 4px; border-radius:16px;
  font-size:12.5px; color:var(--txt-dim); font-weight:600; letter-spacing:.01em;
  transition:background .25s, color .25s;
}
.dock__btn .lu{width:26px; height:26px; vertical-align:0}
/* tight line box so the bar's height stays predictable and matches --dock-h */
.dock__btn span{line-height:1.15}
.dock__btn:active{background:rgba(255,255,255,.07)}
.dock__btn--wa{color:var(--wa)}
.dock__btn:first-child{color:var(--brand-3)}

/* =================== DESKTOP =================== */
@media (min-width:700px){
  :root{--pad:38px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .card--wide{grid-column:span 2}
  .card--wide img{height:250px}
  .trust{grid-template-columns:repeat(4,1fr)}
  .why__grid{grid-template-columns:repeat(2,1fr)}
  .logos{grid-template-columns:repeat(4,1fr)}
  .quote{flex-basis:52%}
  .calc__row{grid-template-columns:repeat(3,1fr)}
}

@media (min-width:960px){
  :root{--pad:60px; --dock-h:0px}
  body{padding-bottom:0}
  .dock{display:none}
  .burger{display:none}
  .nav-desk{display:flex; gap:26px; margin-right:22px; font-size:14.5px; color:var(--txt-dim)}
  .nav-desk a{position:relative; padding:4px 0}
  .nav-desk a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--grad); border-radius:2px; transition:width .3s}
  .nav-desk a:hover{color:var(--txt)}
  .nav-desk a:hover::after{width:100%}
  .hdr__cta{padding:11px 20px; font-size:15px}

  .hero{padding-top:150px; padding-bottom:10px}
  .hero__inner{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; max-width:1240px; margin:0 auto}
  .hero__title,.hero__sub,.hero__cta,.hero__note{grid-column:1; justify-self:start}
  .hero__title{font-size:clamp(56px,5.6vw,80px)}
  .hero__sub{font-size:18px}
  .mascot{grid-column:2; grid-row:1 / span 5; width:min(430px,100%); margin:0; justify-self:center}
  .mascot__bubble{right:-24px; top:20px; max-width:210px; font-size:13.5px}
  .trust{max-width:1240px; margin-inline:auto; border-radius:var(--r); border:1px solid var(--line); overflow:hidden; margin-top:44px}

  .sec{max-width:1240px; margin:0 auto; padding-block:100px}
  .sec__head{max-width:640px}
  .sec__head h2{font-size:clamp(44px,4.2vw,60px)}
  /* 3 columns, no dead cells:
     row 1  [ 01 tall ][ 02 ][ 03 ]
     row 2  [ 01 …    ][ 04 ][ 05 ]
     row 3  [ 06 — full-width closer          ]                */
  .cards{grid-template-columns:repeat(3,1fr); gap:22px}
  .card--tall{grid-row:span 2; display:flex; flex-direction:column}
  /* image absorbs the leftover height instead of leaving the card bottom empty */
  .card--tall img{height:auto; min-height:330px; flex:1 1 auto}
  .card--wide{grid-column:1 / -1}
  .card--wide img{height:260px}

  .studio{max-width:none; padding-inline:var(--pad)}
  .studio > *{max-width:1240px; margin-inline:auto}
  .swatches{grid-template-columns:repeat(8,1fr); gap:14px; max-width:720px}
  .calc{max-width:720px}
  .why__grid{grid-template-columns:repeat(3,1fr); gap:20px}
  .visit__grid{grid-template-columns:1.15fr 1fr; gap:36px; align-items:start}
  .visit__map{height:460px}
  .enquiry{max-width:640px}
  .ftr{padding-inline:var(--pad)}
  .ftr__top{max-width:1240px; margin:0 auto}
  .ftr__bot{max-width:1240px; margin-inline:auto}
  .marquee{margin-bottom:0}
}

@media (min-width:1200px){
  .studio__stage{max-width:880px}
}