@charset "UTF-8";
/* ==========================================================================
   POPATLAL AMTHALAL SHAH — DESIGN SYSTEM
   Luxury industrial · deep navy · royal blue · glass · scientific
   Authored for PHP 8 / static hosting. No frameworks, no build step.
   --------------------------------------------------------------------------
   01 Tokens          08 Hero              15 Infrastructure
   02 Reset & base    09 Trust bar         16 Quality
   03 Typography      10 About & timeline  17 Network map
   04 Primitives      11 Industries        18 Testimonials
   05 Buttons         12 Products          19 Enquiry
   06 Loader          13 Brands            20 Contact
   07 Navigation      14 Why choose us     21 Footer & floats
   22 Motion · 23 Responsive · 24 Print & a11y
   ========================================================================== */

/* ══════════════════════════════════════════════════════ 01 · TOKENS ═══ */
:root {
  /* Brand ---------------------------------------------------------------- */
  --navy-950:#03070F;  --navy-900:#050A16;  --navy-850:#070E1E;
  --navy-800:#0A1428;  --navy-700:#0F1E3D;  --navy-600:#16305F;
  --royal-700:#0B2A78; --royal-600:#1740C4; --royal-500:#2B6BFF;
  --royal-400:#5E9BFF; --royal-300:#93BCFF;
  --cyan-400:#57E0FF;  --cyan-300:#8EEDFF;
  --silver-300:#C3D0E4;--silver-200:#DCE5F2;

  /* Type ----------------------------------------------------------------- */
  --font-display:'Inter Tight','Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
  --font-body:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
  --fs-hero:clamp(2.6rem,6.4vw,5.4rem);
  --fs-h2:clamp(2rem,3.6vw,3.35rem);
  --fs-h3:clamp(1.4rem,2vw,1.9rem);
  --fs-h4:clamp(1.05rem,1.25vw,1.24rem);
  --fs-lede:clamp(1.02rem,1.25vw,1.22rem);
  --fs-body:clamp(.95rem,1.02vw,1.02rem);
  --fs-sm:.875rem;  --fs-xs:.78rem;  --fs-micro:.7rem;

  /* Space & shape -------------------------------------------------------- */
  --shell:1280px;
  --pad-x:clamp(1.15rem,4vw,2.75rem);
  --sec-y:clamp(5rem,10vw,9.5rem);
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;

  /* Motion --------------------------------------------------------------- */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-inout:cubic-bezier(.65,0,.35,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:.2s; --t-mid:.42s; --t-slow:.8s;

  --nav-h:116px;
  color-scheme:dark;
}

/* ── Dark (default) ─────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:#050A16; --bg-2:#070E1E; --bg-3:#0A1428;
  --text:#E9F0FB; --text-2:#9DAFCB; --text-3:#69799A;
  --line:rgba(255,255,255,.085);
  --line-2:rgba(255,255,255,.16);
  --glass:rgba(255,255,255,.042);
  --glass-2:rgba(255,255,255,.07);
  --glass-brd:rgba(255,255,255,.10);
  --brand:var(--royal-500); --brand-soft:var(--royal-400); --brand-deep:var(--royal-700);
  --accent:var(--cyan-400);
  --shadow-lg:0 34px 80px -28px rgba(0,0,0,.85);
  --shadow-md:0 18px 44px -20px rgba(0,0,0,.7);
  --grid-line:rgba(120,160,255,.055);
  --particle:94,155,255;
  --mark-a:#6BA5FF; --mark-b:#2B6BFF;
  --sheen:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.10) 48%,transparent 76%);
  color-scheme:dark;
}

/* ── Light ──────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:#FFFFFF; --bg-2:#F4F7FC; --bg-3:#EAF0F9;
  --text:#08111F; --text-2:#4A5C7C; --text-3:#7385A3;
  --line:rgba(8,25,60,.10);
  --line-2:rgba(8,25,60,.18);
  --glass:rgba(255,255,255,.72);
  --glass-2:rgba(255,255,255,.9);
  --glass-brd:rgba(10,30,70,.10);
  --brand:#1740C4; --brand-soft:#2B6BFF; --brand-deep:#0B2A78;
  --accent:#0C7FA6;
  --shadow-lg:0 30px 70px -30px rgba(12,32,72,.30);
  --shadow-md:0 16px 40px -22px rgba(12,32,72,.26);
  --grid-line:rgba(20,60,140,.06);
  --particle:23,64,196;
  --mark-a:#2B6BFF; --mark-b:#0B2A78;
  --sheen:linear-gradient(100deg,transparent 20%,rgba(20,60,150,.07) 48%,transparent 76%);
  color-scheme:light;
}

/* ═══════════════════════════════════════════════ 02 · RESET & BASE ═══ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 18px)}
body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.68;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  transition:background var(--t-mid) var(--e-out),color var(--t-mid) var(--e-out);
}
img,svg,canvas,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none;outline:none}
button{cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--brand);color:#fff}
:focus-visible{outline:2px solid var(--brand-soft);outline-offset:3px;border-radius:4px}

/* Scrollbar */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:9px;border:3px solid var(--bg-2)}
::-webkit-scrollbar-thumb:hover{background:var(--brand)}

.skip-link{
  position:fixed;top:-60px;left:16px;z-index:9999;padding:.7rem 1.2rem;border-radius:var(--r-sm);
  background:var(--brand);color:#fff;font-weight:600;transition:top var(--t-fast)
}
.skip-link:focus{top:16px}

/* ═════════════════════════════════════════════════ 03 · TYPOGRAPHY ═══ */
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:600;line-height:1.06;letter-spacing:-.028em}
.h2{font-size:var(--fs-h2);letter-spacing:-.035em}
.h3{font-size:var(--fs-h3)}
.lede{font-size:var(--fs-lede);color:var(--text);line-height:1.6}
p{color:var(--text-2)}
.grad{
  background:linear-gradient(96deg,var(--brand-soft) 0%,var(--accent) 52%,var(--brand-soft) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--font-display);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--brand-soft);margin-bottom:1.15rem;
}
.eyebrow__rule{display:block;width:34px;height:1px;background:linear-gradient(90deg,var(--brand),transparent)}
.eyebrow--center{justify-content:center}
.eyebrow--center .eyebrow__rule:last-child{background:linear-gradient(270deg,var(--brand),transparent)}

.linkarrow{
  display:inline-flex;align-items:center;gap:.5rem;color:var(--brand-soft);
  font-weight:500;font-size:var(--fs-sm);transition:gap var(--t-fast) var(--e-out),color var(--t-fast)
}
.linkarrow:hover{gap:.85rem;color:var(--accent)}
.flip{transform:rotate(180deg)}

/* ═════════════════════════════════════════════════ 04 · PRIMITIVES ═══ */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad-x)}
.section{position:relative;padding-block:var(--sec-y)}
.main{position:relative;z-index:1}

.sechead{max-width:760px;margin-bottom:clamp(2.6rem,5vw,4.2rem)}
.sechead--center{margin-inline:auto;text-align:center}
.sechead--split{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,4rem);
  align-items:end;max-width:none;
}
.sechead__sub{font-size:var(--fs-lede);color:var(--text-2);margin-top:1.35rem;max-width:60ch}
.sechead--center .sechead__sub{margin-inline:auto}
.sechead--split .sechead__sub{margin-top:0;padding-bottom:.35rem}

.glass{
  background:var(--glass);
  border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  backdrop-filter:blur(20px) saturate(140%);
}
.tag{
  display:inline-block;padding:.28rem .68rem;border-radius:var(--r-pill);
  font-size:var(--fs-micro);font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-2);background:var(--glass);border:1px solid var(--line);
}

/* ═══════════════════════════════════════════════════ 05 · BUTTONS ═══ */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.82rem 1.5rem;border-radius:var(--r-pill);
  font-family:var(--font-display);font-size:var(--fs-sm);font-weight:600;letter-spacing:.005em;
  white-space:nowrap;overflow:hidden;isolation:isolate;
  transition:transform var(--t-fast) var(--e-out),box-shadow var(--t-mid) var(--e-out),
             background var(--t-mid),border-color var(--t-mid),color var(--t-mid);
}
.btn svg{flex:none;transition:transform var(--t-mid) var(--e-out)}
.btn:hover svg{transform:translateX(3px)}
.btn--lg{padding:1.02rem 1.9rem;font-size:.95rem}
.btn--sm{padding:.6rem 1.05rem;font-size:var(--fs-xs)}
.btn--block{width:100%}

.btn--primary{
  color:#fff;
  background:linear-gradient(135deg,var(--royal-500),var(--royal-600) 55%,var(--royal-700));
  box-shadow:0 12px 30px -12px rgba(43,107,255,.7),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn--primary::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:var(--sheen);
  transform:translateX(-100%);transition:opacity .1s;
}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 20px 44px -14px rgba(43,107,255,.8),inset 0 1px 0 rgba(255,255,255,.28)}
.btn--primary:hover::after{opacity:1;animation:sheen 1.1s var(--e-out)}
.btn--primary:active{transform:translateY(0)}

.btn--glass{
  color:var(--text);background:var(--glass-2);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.btn--glass:hover{border-color:var(--brand);color:var(--brand-soft);transform:translateY(-2px);box-shadow:var(--shadow-md)}

.btn--bare{color:var(--text-2);border:1px solid transparent}
.btn--bare:hover{color:var(--text);border-color:var(--line-2)}

.btn--wa{color:#fff;background:linear-gradient(135deg,#25D366,#12924A);box-shadow:0 12px 28px -14px rgba(37,211,102,.8)}
.btn--wa:hover{transform:translateY(-2px)}

@keyframes sheen{to{transform:translateX(100%)}}

.iconbtn{
  display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--r-pill);
  color:var(--text-2);border:1px solid transparent;
  transition:color var(--t-fast),background var(--t-fast),border-color var(--t-fast),transform var(--t-fast)
}
.iconbtn:hover{color:var(--text);background:var(--glass);border-color:var(--line)}
.iconbtn:active{transform:scale(.94)}

/* ════════════════════════════════════════════════════ 06 · LOADER ═══ */
.loader{
  position:fixed;inset:0;z-index:9998;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 40%,var(--bg-3),var(--bg) 62%);
  transition:opacity .7s var(--e-out),visibility .7s;
}
.loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.loader__inner{display:grid;justify-items:center;gap:1.5rem;text-align:center;padding:2rem}
.loader__mark{animation:markIn 1.1s var(--e-spring) both}
.loader__svg{filter:drop-shadow(0 0 26px rgba(43,107,255,.55))}
.loader__mark svg circle{animation:atomPulse 2.1s ease-in-out infinite}
.loader__mark svg circle:nth-of-type(2){animation-delay:.16s}
.loader__mark svg circle:nth-of-type(3){animation-delay:.32s}
.loader__mark svg circle:nth-of-type(4){animation-delay:.48s}
@keyframes markIn{0%{opacity:0;transform:scale(.6) rotate(-32deg)}100%{opacity:1;transform:none}}
@keyframes atomPulse{0%,100%{opacity:1}50%{opacity:.35}}

.loader__word{display:flex;gap:.12em;font-family:var(--font-display);font-weight:600;
  font-size:clamp(.72rem,2.1vw,1.02rem);letter-spacing:.34em;color:var(--text-2)}
.loader__word span{animation:letterIn .5s var(--e-out) both}
.loader__word .sp{width:.7em}
.loader__word span:nth-child(n){animation-delay:calc(.3s + var(--i,0)*.03s)}
@keyframes letterIn{0%{opacity:0;transform:translateY(9px)}100%{opacity:1;transform:none}}
.loader__bar{width:min(230px,52vw);height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--accent));
  box-shadow:0 0 14px var(--brand);animation:barFill 1.5s var(--e-out) forwards}
@keyframes barFill{to{width:100%}}
.loader__meta{font-size:var(--fs-micro);letter-spacing:.24em;text-transform:uppercase;color:var(--text-3);
  animation:letterIn .6s .8s var(--e-out) both}

/* ════════════════════════════════════════════════ 07 · NAVIGATION ═══ */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:1002;
  background:linear-gradient(90deg,var(--brand),var(--accent));box-shadow:0 0 10px var(--brand);
}

.topstrip{
  position:relative;z-index:1001;border-bottom:1px solid var(--line);
  background:var(--bg-2);font-size:var(--fs-xs);
}
.topstrip__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:38px}
.topstrip__msg{display:flex;align-items:center;gap:.6rem;color:var(--text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topstrip__msg .dot{width:6px;height:6px;border-radius:50%;background:#25D366;flex:none;
  box-shadow:0 0 0 0 rgba(37,211,102,.6);animation:live 2.4s infinite}
@keyframes live{70%{box-shadow:0 0 0 8px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.topstrip__links{display:flex;gap:1.5rem}
.topstrip__links a{display:inline-flex;align-items:center;gap:.45rem;color:var(--text-3);transition:color var(--t-fast)}
.topstrip__links a:hover{color:var(--brand-soft)}

.nav{
  position:sticky;top:0;z-index:1000;
  border-bottom:1px solid transparent;
  transition:background var(--t-mid) var(--e-out),border-color var(--t-mid),box-shadow var(--t-mid),height var(--t-mid);
}
.nav.is-stuck{
  background:color-mix(in srgb,var(--bg) 97%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  border-bottom-color:var(--line);box-shadow:0 12px 40px -26px rgba(0,0,0,.9);
}
.nav__in{display:flex;align-items:center;gap:1.4rem;height:var(--nav-h)}

.brand{display:flex;align-items:center;gap:.9rem;flex:none;margin-left:-.5rem}
.brand__mark{display:block;
  filter:drop-shadow(0 0 8px rgba(201,162,39,.24));
  transition:transform .5s var(--e-spring),filter var(--t-mid)}
.brand:hover .brand__mark{transform:scale(1.05);
  filter:drop-shadow(0 0 13px rgba(201,162,39,.42))}
.brand__text{display:grid;gap:.2rem;line-height:1.07}
.brand__text strong{font-family:var(--font-display);font-size:1.16rem;font-weight:700;letter-spacing:.07em;
  background:linear-gradient(172deg,#F3DE8B 0%,#CFA236 38%,#9C6F17 56%,#EAC766 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#C9A227}
.brand__text em{font-style:normal;font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#C62828}

.nav__menu{margin-left:auto}
.nav__menu ul{display:flex;align-items:center;gap:.2rem}
.nav__menu a{
  position:relative;display:inline-flex;align-items:center;gap:.3rem;
  padding:.6rem .85rem;border-radius:var(--r-sm);
  font-size:var(--fs-sm);font-weight:500;color:var(--text-2);transition:color var(--t-fast)
}
.nav__menu a::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:.34rem;height:1.5px;
  background:linear-gradient(90deg,var(--brand),var(--accent));transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-mid) var(--e-out);border-radius:2px
}
.nav__menu a:hover,.nav__menu li.is-active > a{color:var(--text)}
.nav__menu a:hover::after,.nav__menu li.is-active > a::after{transform:scaleX(1)}
.nav__caret{transition:transform var(--t-fast)}
.nav__menu li.is-open .nav__caret{transform:rotate(180deg)}

.nav__actions{display:flex;align-items:center;gap:.35rem;flex:none}
.ico-moon{display:none}
[data-theme="light"] .ico-sun{display:none}
[data-theme="light"] .ico-moon{display:block}

.langswitch{position:relative}
.langswitch__btn{width:auto;padding:0 .6rem;gap:.3rem;font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em}
.langswitch__pop{
  position:absolute;top:calc(100% + 8px);right:0;min-width:158px;padding:.4rem;
  border-radius:var(--r-md);background:var(--bg-2);border:1px solid var(--line);
  box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:all var(--t-fast) var(--e-out);
}
.langswitch.is-open .langswitch__pop{opacity:1;visibility:visible;transform:none}
.langswitch__pop button{
  display:flex;justify-content:space-between;align-items:center;width:100%;
  padding:.55rem .7rem;border-radius:var(--r-sm);font-size:var(--fs-sm);color:var(--text-2);text-align:left
}
.langswitch__pop button:hover:not(:disabled){background:var(--glass);color:var(--text)}
.langswitch__pop button.is-active{color:var(--brand-soft)}
.langswitch__pop button:disabled{opacity:.42;cursor:not-allowed}
.langswitch__pop em{font-style:normal;font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}

.nav__burger{display:none}

/* ── Mega menu ─────────────────────────────────────────────────────────── */
.mega{
  position:absolute;left:0;right:0;top:100%;
  background:color-mix(in srgb,var(--bg-2) 92%,transparent);
  -webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.85);
  opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;
  transition:opacity var(--t-mid) var(--e-out),transform var(--t-mid) var(--e-out),visibility var(--t-mid);
}
.mega.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.mega__in{display:grid;grid-template-columns:300px 1fr;gap:clamp(1.5rem,4vw,3.5rem);padding-block:2.4rem 2.6rem}
.mega__in--grid{grid-template-columns:repeat(4,1fr);gap:.4rem}
.mega__lead h4{font-size:1.42rem;margin-bottom:.75rem}
.mega__lead p{font-size:var(--fs-sm);margin-bottom:1.1rem}
.mega__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem 1.4rem}
.mega__cols a{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.5rem .7rem;border-radius:var(--r-sm);font-size:var(--fs-sm);color:var(--text-2);
  border:1px solid transparent;transition:all var(--t-fast)
}
.mega__cols a:hover{background:var(--glass);border-color:var(--line);color:var(--text);transform:translateX(3px)}
.mega__cols em{font-style:normal;font-size:var(--fs-micro);color:var(--text-3);letter-spacing:.04em}
.mega__ind{display:flex;gap:.85rem;padding:.85rem;border-radius:var(--r-md);border:1px solid transparent;transition:all var(--t-fast)}
.mega__ind:hover{background:var(--glass);border-color:var(--line);transform:translateY(-2px)}
.mega__ico{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:11px;
  background:linear-gradient(140deg,rgba(43,107,255,.2),rgba(87,224,255,.08));color:var(--brand-soft);
  border:1px solid var(--line)}
.mega__indtext{display:grid;gap:.15rem}
.mega__indtext strong{font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.mega__indtext em{font-style:normal;font-size:var(--fs-micro);color:var(--text-3);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ── Mobile drawer ─────────────────────────────────────────────────────── */
/* Same trap as .searchveil — a closed inset:0 overlay left at opacity:0 still
   sits over the whole page and eats every click. Needs visibility/pointer-events. */
.drawer{position:fixed;inset:0;z-index:1100;background:rgba(3,7,15,.6);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--t-mid),visibility var(--t-mid)}
.drawer.is-open{opacity:1;visibility:visible;pointer-events:auto}
.drawer__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(400px,88vw);
  display:flex;flex-direction:column;gap:1.2rem;padding:1.4rem;overflow-y:auto;
  background:var(--bg-2);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform var(--t-mid) var(--e-out)
}
.drawer.is-open .drawer__panel{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between}
.drawer__links{display:grid;gap:.2rem}
.drawer__links a{
  display:flex;align-items:center;justify-content:space-between;
  padding:.95rem .3rem;border-bottom:1px solid var(--line);
  font-family:var(--font-display);font-size:1.12rem;font-weight:500;color:var(--text);
  transition:padding var(--t-fast),color var(--t-fast)
}
.drawer__links a:hover{padding-left:.8rem;color:var(--brand-soft)}
.drawer__links svg{color:var(--text-3)}
.drawer__foot{margin-top:auto;display:grid;gap:.6rem}

/* ── Search overlay ────────────────────────────────────────────────────── */
/* NOTE: opacity alone is not enough to "close" a fixed full-screen overlay.
   Without visibility/pointer-events this stays inset:0 at z-index 1200 while
   invisible, and silently swallows every click on the page (the nav links,
   buttons and the enquiry form all became untappable). Same pattern as .mega. */
.searchveil{position:fixed;inset:0;z-index:1200;display:grid;place-items:start center;
  padding:clamp(4rem,12vh,9rem) 1.2rem 2rem;background:rgba(3,7,15,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--t-mid),visibility var(--t-mid)}
.searchveil.is-open{opacity:1;visibility:visible;pointer-events:auto}
.searchveil__box{width:min(680px,100%);border-radius:var(--r-lg);overflow:hidden;
  background:var(--bg-2);border:1px solid var(--line-2);box-shadow:var(--shadow-lg);
  transform:translateY(-14px) scale(.98);transition:transform var(--t-mid) var(--e-out)}
.searchveil.is-open .searchveil__box{transform:none}
.searchveil__field{display:flex;align-items:center;gap:.8rem;padding:.9rem 1rem;border-bottom:1px solid var(--line)}
.searchveil__field > svg{color:var(--text-3);flex:none}
.searchveil__field input{flex:1;font-size:1.06rem;padding:.4rem 0}
.searchveil__field input::-webkit-search-cancel-button{display:none}
.searchveil__results{max-height:min(52vh,420px);overflow-y:auto;padding:.5rem}
.sresult{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.75rem .85rem;border-radius:var(--r-sm);transition:background var(--t-fast)}
.sresult:hover,.sresult.is-sel{background:var(--glass)}
.sresult strong{font-size:var(--fs-sm);font-weight:500}
.sresult em{font-style:normal;font-size:var(--fs-micro);color:var(--text-3)}
.sresult__meta{font-size:var(--fs-micro);color:var(--text-3);text-align:right}
.searchveil__empty{padding:1.6rem;text-align:center;color:var(--text-3);font-size:var(--fs-sm)}
.searchveil__hint{padding:.7rem 1rem;border-top:1px solid var(--line);font-size:var(--fs-micro);color:var(--text-3)}
kbd{padding:.1rem .38rem;border-radius:5px;border:1px solid var(--line-2);background:var(--glass);font-size:.68rem;font-family:var(--font-body)}

/* ══════════════════════════════════════════════════════ 08 · HERO ═══ */
.hero{
  position:relative;min-height:clamp(640px,94svh,1000px);display:flex;align-items:center;
  padding-block:clamp(3rem,7vw,5rem);overflow:hidden;isolation:isolate;
  background:
    radial-gradient(130% 100% at 78% 8%, color-mix(in srgb,var(--brand-deep) 34%,transparent) 0%, transparent 58%),
    radial-gradient(90% 80% at 8% 92%, color-mix(in srgb,var(--brand) 15%,transparent) 0%, transparent 60%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-3;opacity:.85}
.hero__grid{
  position:absolute;inset:0;z-index:-4;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(115% 88% at 50% 34%,#000 20%,transparent 78%);
  mask-image:radial-gradient(115% 88% at 50% 34%,#000 20%,transparent 78%);
}
.hero__mesh{position:absolute;inset:0;z-index:-2;filter:blur(70px);opacity:.55}
.orb{position:absolute;border-radius:50%;mix-blend-mode:screen}
[data-theme="light"] .orb{mix-blend-mode:multiply;opacity:.5}
.orb--a{width:44vw;height:44vw;left:-8vw;top:-10vw;background:radial-gradient(circle,var(--royal-600),transparent 66%);animation:float1 17s ease-in-out infinite}
.orb--b{width:38vw;height:38vw;right:-6vw;top:16vh;background:radial-gradient(circle,var(--cyan-400),transparent 68%);opacity:.42;animation:float2 21s ease-in-out infinite}
.orb--c{width:30vw;height:30vw;left:38%;bottom:-14vw;background:radial-gradient(circle,var(--royal-500),transparent 66%);opacity:.4;animation:float3 25s ease-in-out infinite}
@keyframes float1{0%,100%{transform:none}50%{transform:translate(6vw,4vh) scale(1.12)}}
@keyframes float2{0%,100%{transform:none}50%{transform:translate(-5vw,6vh) scale(.9)}}
@keyframes float3{0%,100%{transform:none}50%{transform:translate(4vw,-6vh) scale(1.16)}}
.hero__scan{
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.012) 3px 4px);
}
[data-theme="light"] .hero__scan{display:none}

.hero__in{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;position:relative}

.hero__eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;padding:.45rem 1rem .45rem .6rem;
  border-radius:var(--r-pill);background:var(--glass);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  font-size:var(--fs-xs);letter-spacing:.09em;text-transform:uppercase;color:var(--text-2);margin-bottom:1.7rem
}
.hero__eyebrow .pip{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:live 2.4s infinite}

.hero__h1{font-size:var(--fs-hero);letter-spacing:-.043em;line-height:.98;margin-bottom:1.6rem}
.hero__h1 .line{display:block;overflow:hidden}
.hero__h1 .w{display:inline-block;transform:translateY(115%);opacity:0;
  animation:wordUp .95s var(--e-out) forwards}
.hero__h1 .line:nth-child(1) .w:nth-child(1){animation-delay:.05s}
.hero__h1 .line:nth-child(1) .w:nth-child(2){animation-delay:.13s}
.hero__h1 .line:nth-child(2) .w:nth-child(1){animation-delay:.21s}
.hero__h1 .line:nth-child(2) .w:nth-child(2){animation-delay:.29s}
@keyframes wordUp{to{transform:none;opacity:1}}

.hero__sub{font-size:clamp(1rem,1.35vw,1.2rem);color:var(--text-2);max-width:58ch;margin-bottom:2.3rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:2.6rem}
.hero__proof{display:flex;flex-wrap:wrap;gap:1.5rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.hero__proofitem{display:flex;align-items:center;gap:.55rem;font-size:var(--fs-sm);color:var(--text-3)}
.hero__proofitem svg{color:var(--brand-soft)}

.hero__visual{position:relative;aspect-ratio:1;max-width:560px;justify-self:center;width:100%}
.hero__molecule{width:100%;height:100%}
.hero__chip{
  position:absolute;display:grid;gap:.1rem;padding:.7rem 1rem;border-radius:14px;
  box-shadow:var(--shadow-md);animation:chipFloat 6s ease-in-out infinite
}
.hero__chip em{font-style:normal;font-size:var(--fs-micro);letter-spacing:.11em;text-transform:uppercase;color:var(--text-3)}
.hero__chip strong{font-family:var(--font-display);font-size:.95rem;font-weight:600;color:var(--text)}
.hero__chip--1{top:8%;left:-2%;animation-delay:0s}
.hero__chip--2{bottom:16%;right:-4%;animation-delay:1.4s}
.hero__chip--3{bottom:2%;left:12%;animation-delay:2.8s}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

.hero__scroll{
  position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);
  display:grid;justify-items:center;gap:.6rem;font-size:var(--fs-micro);
  letter-spacing:.24em;text-transform:uppercase;color:var(--text-3);z-index:2
}
.hero__scrollline{width:1px;height:46px;background:linear-gradient(180deg,transparent,var(--brand-soft));position:relative;overflow:hidden}
.hero__scrollline::after{content:"";position:absolute;inset:0;background:var(--accent);animation:scrollDot 2s var(--e-inout) infinite}
@keyframes scrollDot{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ═════════════════════════════════════════════════ 09 · TRUST BAR ═══ */
.trust{position:relative;border-block:1px solid var(--line);background:var(--bg-2);overflow:hidden}
.trust__row{display:grid;grid-template-columns:repeat(5,1fr)}
.trust__cell{padding:clamp(1.8rem,3.4vw,2.9rem) 1.2rem;text-align:center;position:relative}
.trust__cell + .trust__cell::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--line)}
.trust__num{font-family:var(--font-display);font-size:clamp(1.85rem,3.4vw,3rem);font-weight:600;
  letter-spacing:-.04em;line-height:1;color:var(--text);display:flex;align-items:baseline;justify-content:center;gap:.05em}
.trust__num i{font-style:normal;color:var(--brand-soft)}
.trust__text{font-size:clamp(1.05rem,1.9vw,1.6rem);letter-spacing:.02em;
  background:linear-gradient(96deg,var(--brand-soft),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.trust__label{margin-top:.7rem;font-size:var(--fs-sm);font-weight:500;color:var(--text)}
.trust__sub{font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-top:.15rem}

.marquee{border-top:1px solid var(--line);overflow:hidden;padding-block:.75rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex;gap:1.6rem;width:max-content;animation:marquee 42s linear infinite}
.marquee span{font-family:var(--font-display);font-size:var(--fs-xs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-3);white-space:nowrap}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ══════════════════════════════════════════ 10 · ABOUT & TIMELINE ═══ */
.about{background:var(--bg)}
.about__top{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,5rem);align-items:start;
  padding-bottom:clamp(3rem,6vw,5.5rem)}
.about__body p + p{margin-top:1.1rem}
.about__sign{display:flex;align-items:center;gap:1rem;margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.about__signmark{flex:none;opacity:.9}
.about__sign strong{display:block;font-family:var(--font-display);font-size:.98rem;font-weight:600;color:var(--text)}
.about__sign em{font-style:normal;font-size:var(--fs-sm);color:var(--text-3)}

.tl{padding-block:clamp(2rem,4vw,3rem);border-top:1px solid var(--line)}
.tl__head{display:flex;align-items:end;justify-content:space-between;gap:1.5rem;margin-bottom:2.2rem}
.tl__nav{display:flex;gap:.4rem}
.tl__nav .iconbtn{border:1px solid var(--line)}
.tl__rail{position:relative}
.tl__line{position:absolute;left:0;right:0;top:64px;height:1px;background:var(--line)}
.tl__line i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--accent));
  box-shadow:0 0 12px var(--brand);transition:width .1s linear}
.tl__track{display:flex;gap:1.2rem;overflow-x:auto;padding-bottom:1rem;scroll-snap-type:x mandatory;
  scrollbar-width:none}
.tl__track::-webkit-scrollbar{display:none}
.tl__card{position:relative;flex:0 0 clamp(255px,29vw,330px);scroll-snap-align:start;padding-top:96px}
.tl__dot{position:absolute;top:57px;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--bg);border:2px solid var(--brand);box-shadow:0 0 0 5px color-mix(in srgb,var(--brand) 16%,transparent)}
.tl__card:hover .tl__dot{background:var(--brand);box-shadow:0 0 0 7px color-mix(in srgb,var(--brand) 22%,transparent)}
.tl__tag{position:absolute;top:0;left:0;font-size:var(--fs-micro);letter-spacing:.18em;
  text-transform:uppercase;color:var(--brand-soft)}
.tl__year{font-family:var(--font-display);font-size:clamp(1.7rem,2.6vw,2.3rem);font-weight:600;
  letter-spacing:-.04em;color:var(--text);margin-bottom:.35rem}
.tl__title{font-size:1.02rem;font-weight:600;color:var(--text);margin-bottom:.6rem}
.tl__card p{font-size:var(--fs-sm);line-height:1.68}

.mvv{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:clamp(2rem,4vw,3.4rem)}
.mvv__card{padding:clamp(1.5rem,2.4vw,2.1rem);border-radius:var(--r-lg);position:relative;overflow:hidden;
  transition:transform var(--t-mid) var(--e-out),border-color var(--t-mid)}
.mvv__card::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity var(--t-mid);
  background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--brand) 15%,transparent),transparent 62%)}
.mvv__card:hover{transform:translateY(-5px);border-color:var(--line-2)}
.mvv__card:hover::before{opacity:1}
.mvv__ico{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;margin-bottom:1.1rem;
  color:var(--brand-soft);background:linear-gradient(140deg,color-mix(in srgb,var(--brand) 22%,transparent),transparent);
  border:1px solid var(--line)}
.mvv__card h4{font-size:var(--fs-h4);margin-bottom:.6rem}
.mvv__card p{font-size:var(--fs-sm)}
.mvv__list{display:grid;gap:.5rem;margin-top:.2rem}
.mvv__list li{display:flex;align-items:center;gap:.55rem;font-size:var(--fs-sm);color:var(--text-2)}
.mvv__list svg{color:var(--accent);flex:none}

/* ════════════════════════════════════════════════ 11 · INDUSTRIES ═══ */
.industries{background:var(--bg-2);border-block:1px solid var(--line)}
.indgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.indcard{
  position:relative;padding:clamp(1.4rem,2vw,1.9rem);border-radius:var(--r-lg);overflow:hidden;
  background:var(--glass);border:1px solid var(--glass-brd);cursor:default;
  transition:transform var(--t-mid) var(--e-out),border-color var(--t-mid),box-shadow var(--t-mid);
  transform-style:preserve-3d;
}
.indcard__glow{position:absolute;width:260px;height:260px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand) 26%,transparent),transparent 66%);
  transform:translate(-50%,-50%);transition:opacity var(--t-mid);left:var(--mx,50%);top:var(--my,50%)}
.indcard:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--brand) 45%,transparent);box-shadow:var(--shadow-md)}
.indcard:hover .indcard__glow{opacity:1}
.indcard__ico{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:15px;
  margin-bottom:1.15rem;color:var(--brand-soft);border:1px solid var(--line);
  background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 18%,transparent),transparent 70%);
  transition:transform var(--t-mid) var(--e-spring),color var(--t-mid)}
.indcard:hover .indcard__ico{transform:translateY(-3px) scale(1.06);color:var(--accent)}
.indcard h3{position:relative;font-size:1.06rem;margin-bottom:.5rem}
.indcard p{position:relative;font-size:var(--fs-sm);line-height:1.62}
.indcard__arrow{position:absolute;right:1.2rem;top:1.4rem;color:var(--text-3);opacity:0;transform:translateX(-6px);
  transition:all var(--t-mid) var(--e-out)}
.indcard:hover .indcard__arrow{opacity:1;transform:none;color:var(--brand-soft)}

/* ══════════════════════════════════════════════════ 12 · PRODUCTS ═══ */
.products{background:var(--bg)}
.pfilter{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-bottom:2rem;
  padding-bottom:1.4rem;border-bottom:1px solid var(--line)}
.pfilter__search{position:relative;display:flex;align-items:center;gap:.7rem;flex:1 1 330px;
  padding:.78rem 1rem;border-radius:var(--r-pill);background:var(--glass);border:1px solid var(--glass-brd);
  transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.pfilter__search:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 14%,transparent)}
.pfilter__search svg{color:var(--text-3);flex:none}
.pfilter__search input{flex:1;font-size:var(--fs-sm)}
.pfilter__search input::-webkit-search-cancel-button{display:none}
.pfilter__clear{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:var(--text-3);background:var(--glass-2)}
.pfilter__chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{padding:.5rem 1rem;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:500;
  color:var(--text-2);background:var(--glass);border:1px solid var(--line);transition:all var(--t-fast)}
.chip:hover{color:var(--text);border-color:var(--line-2)}
.chip.is-active{color:#fff;background:linear-gradient(135deg,var(--royal-500),var(--royal-600));
  border-color:transparent;box-shadow:0 8px 20px -10px rgba(43,107,255,.8)}

.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.pcard{
  display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  background:var(--glass);border:1px solid var(--glass-brd);
  transition:transform var(--t-mid) var(--e-out),border-color var(--t-mid),box-shadow var(--t-mid);
}
.pcard:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--brand) 40%,transparent);box-shadow:var(--shadow-lg)}
.pcard.is-hidden{display:none}
.pcard__viz{position:relative;aspect-ratio:16/8.4;overflow:hidden;
  background:linear-gradient(150deg,color-mix(in srgb,var(--brand-deep) 55%,var(--bg-3)),var(--bg-3));
  border-bottom:1px solid var(--line)}
[data-theme="light"] .pcard__viz{background:linear-gradient(150deg,#E7EEFB,#F6F9FE)}
.pcard__canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.85}
.pcard__formula{position:absolute;left:1.1rem;bottom:.85rem;font-family:var(--font-display);
  font-size:1.5rem;font-weight:600;letter-spacing:-.02em;color:var(--text);opacity:.92;
  text-shadow:0 2px 20px rgba(0,0,0,.4)}
.pcard__cat{position:absolute;right:.85rem;top:.85rem;padding:.25rem .6rem;border-radius:var(--r-pill);
  font-size:var(--fs-micro);letter-spacing:.09em;text-transform:uppercase;color:var(--text-2);
  background:var(--glass-2);border:1px solid var(--glass-brd);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pcard__body{display:flex;flex-direction:column;flex:1;padding:1.3rem}
.pcard__body h3{font-size:1.14rem;margin-bottom:.45rem}
.pcard__desc{font-size:var(--fs-sm);line-height:1.6;margin-bottom:1.05rem}
.pcard__spec{display:grid;gap:.5rem;padding:.9rem 0;border-block:1px solid var(--line);margin-bottom:.9rem}
.pcard__spec > div{display:grid;grid-template-columns:96px 1fr;gap:.7rem;align-items:start}
.pcard__spec dt{font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);padding-top:.1rem}
.pcard__spec dd{font-size:var(--fs-xs);color:var(--text-2);line-height:1.55}
.pcard__tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1.1rem}
.pcard__actions{display:flex;align-items:center;gap:.45rem;margin-top:auto}
.pcard__tds{display:inline-flex;align-items:center;gap:.35rem;margin-left:auto;padding:.45rem .55rem;
  border-radius:var(--r-sm);font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3);transition:color var(--t-fast)}
.pcard__tds:hover{color:var(--brand-soft)}
.pgrid__empty{text-align:center;padding:3rem 1rem;color:var(--text-3)}
.pgrid__empty a{color:var(--brand-soft);text-decoration:underline;text-underline-offset:3px}

.products__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;
  margin-top:2.6rem;padding-top:2rem;border-top:1px solid var(--line)}
.products__foot p{font-size:var(--fs-sm);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}

/* ════════════════════════════════════════════════════ 13 · BRANDS ═══ */
.brands{background:var(--bg-2);border-block:1px solid var(--line);overflow:hidden}
.brandgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.brandplate{
  position:relative;display:grid;gap:.55rem;place-content:center;text-align:center;
  min-height:180px;padding:1.4rem 1.1rem;border-radius:var(--r-md);overflow:hidden;
  background:var(--glass);border:1px solid var(--glass-brd);
  transition:transform var(--t-mid) var(--e-out),border-color var(--t-mid),box-shadow var(--t-mid)
}
.brandplate__logo{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:74px;border-radius:10px;padding:11px;margin:0 auto .15rem;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)
}
.brandplate__logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.brandplate__logo--dark{background:#0b0b0d}
.brandplate__logo--light{background:#ffffff}
.brandplate__badge{justify-self:center;font-size:10px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:#fff;background:var(--brand);padding:4px 11px;border-radius:999px;margin-bottom:.1rem}
.brandplate:has(.brandplate__badge){border-color:color-mix(in srgb,var(--brand) 55%,transparent);
  background:color-mix(in srgb,var(--brand) 8%,var(--glass))}
.brandplate__shine{position:absolute;inset:0;background:var(--sheen);transform:translateX(-120%);transition:none}
.brandplate:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--brand) 45%,transparent);box-shadow:var(--shadow-md)}
.brandplate:hover .brandplate__shine{animation:sheen 1s var(--e-out)}
.brandplate h3{font-family:var(--font-display);font-size:1.14rem;font-weight:600;letter-spacing:.01em;color:var(--text)}
.brandplate p{font-size:var(--fs-micro);letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
.brands__note{margin-top:1.6rem;text-align:center;font-size:var(--fs-micro);color:var(--text-3)}

/* ══════════════════════════════════════════════ 14 · WHY CHOOSE US ═══ */
.why{background:var(--bg)}
.whygrid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.whycard{position:relative;padding:clamp(1.5rem,2.2vw,2.1rem);border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);overflow:hidden;transition:background var(--t-mid)}
.whycard:hover{background:var(--glass)}
.whycard__n{font-family:var(--font-display);font-size:var(--fs-micro);letter-spacing:.2em;color:var(--brand-soft);display:block;margin-bottom:1.4rem}
.whycard h3{font-size:1.02rem;margin-bottom:.55rem;letter-spacing:-.02em}
.whycard p{font-size:var(--fs-xs);line-height:1.68}
.whycard__line{position:absolute;left:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--brand),var(--accent));transition:width var(--t-slow) var(--e-out)}
.whycard:hover .whycard__line{width:100%}

/* ═════════════════════════════════════════════ 15 · INFRASTRUCTURE ═══ */
.infra{background:var(--bg-2);border-block:1px solid var(--line)}
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
  grid-template-rows:clamp(200px,20vw,262px);grid-auto-rows:clamp(180px,16vw,214px)}
.bento__cell{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--glass-brd);
  background:var(--glass);transition:transform var(--t-mid) var(--e-out),border-color var(--t-mid)}
.bento__cell--wide{grid-column:span 2}
.bento__cell--tall{grid-row:span 2}
.bento__cell:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--brand) 40%,transparent)}
.bento__viz{position:absolute;inset:0;background:linear-gradient(160deg,var(--bg-3),var(--navy-900) 90%)}
[data-theme="light"] .bento__viz{background:linear-gradient(160deg,#E9EFFA,#F7FAFE)}
.bento__canvas{width:100%;height:100%}
.bento__scanline{position:absolute;left:0;right:0;height:34%;pointer-events:none;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--brand) 12%,transparent),transparent);
  animation:scanY 7s var(--e-inout) infinite}
@keyframes scanY{0%,100%{transform:translateY(-60%)}50%{transform:translateY(230%)}}
.bento__cell figcaption{position:absolute;left:0;right:0;bottom:0;display:grid;gap:.15rem;padding:1.1rem;
  background:linear-gradient(180deg,transparent,rgba(3,7,15,.86));z-index:2}
[data-theme="light"] .bento__cell figcaption{background:linear-gradient(180deg,transparent,rgba(255,255,255,.94))}
.bento__cell figcaption strong{font-family:var(--font-display);font-size:1rem;font-weight:600;color:var(--text)}
.bento__cell figcaption em{font-style:normal;font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.bento__note{margin-top:1.5rem;font-size:var(--fs-micro);color:var(--text-3);text-align:center}

/* ═════════════════════════════════════════════════════ 16 · QUALITY ═══ */
.quality{background:var(--bg);overflow:hidden}
.quality__bgline{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:110px 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.quality__in{position:relative;display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.quality__lead{position:sticky;top:calc(var(--nav-h) + 32px)}
.quality__seals{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin-top:2rem}
.seal{display:flex;align-items:center;gap:.6rem;padding:.8rem .95rem;border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--glass-brd);font-size:var(--fs-xs);font-weight:500;color:var(--text-2)}
.seal svg{color:var(--accent);flex:none}
.qsteps{display:grid;gap:.2rem;counter-reset:q}
.qstep{display:grid;grid-template-columns:64px 1fr;gap:1.2rem;padding:1.5rem 0;border-bottom:1px solid var(--line);
  transition:padding-left var(--t-mid) var(--e-out)}
.qstep:first-child{border-top:1px solid var(--line)}
.qstep:hover{padding-left:.7rem}
.qstep__n{font-family:var(--font-display);font-size:1.5rem;font-weight:600;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px var(--line-2);transition:color var(--t-mid),-webkit-text-stroke-color var(--t-mid)}
.qstep:hover .qstep__n{color:var(--brand-soft);-webkit-text-stroke-color:transparent}
.qstep h3{font-size:1.08rem;margin-bottom:.4rem}
.qstep p{font-size:var(--fs-sm);max-width:62ch}

/* ═════════════════════════════════════════════════════ 17 · NETWORK ═══ */
.network{background:var(--bg-2);border-block:1px solid var(--line)}
.mapwrap{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(1.5rem,3.5vw,3rem);align-items:center}
.map{position:relative;aspect-ratio:1/1.06;border-radius:var(--r-xl);overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%,color-mix(in srgb,var(--brand-deep) 30%,transparent),transparent 62%),var(--glass);
  border:1px solid var(--glass-brd)}
.map__canvas{position:absolute;inset:0;width:100%;height:100%}
.map__pins{position:absolute;inset:0}
.pin{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;
  width:14px;height:14px;border-radius:50%;z-index:2}
.pin::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand-soft);
  box-shadow:0 0 10px var(--brand);transition:transform var(--t-fast) var(--e-spring)}
.pin--hq::after{width:12px;height:12px;background:var(--accent);box-shadow:0 0 18px var(--accent)}
.pin--node::after{width:6px;height:6px;background:var(--text-3);box-shadow:none}
.pin__ring{position:absolute;width:14px;height:14px;border-radius:50%;border:1px solid var(--brand);opacity:0}
.pin--hq .pin__ring,.pin--hub .pin__ring{animation:ping 2.8s var(--e-out) infinite}
.pin--hq .pin__ring{border-color:var(--accent);animation-duration:2.2s}
@keyframes ping{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(4.2)}}
.pin__label{position:absolute;left:16px;top:50%;transform:translateY(-50%);white-space:nowrap;
  font-size:var(--fs-micro);letter-spacing:.06em;color:var(--text-2);opacity:0;
  padding:.2rem .5rem;border-radius:6px;background:var(--bg-2);border:1px solid var(--line);
  transition:opacity var(--t-fast);pointer-events:none}
.pin:hover{z-index:5}
.pin:hover::after{transform:scale(1.45)}
.pin:hover .pin__label,.pin:focus-visible .pin__label{opacity:1}
.pin--hq .pin__label{opacity:1;color:var(--text);font-weight:600}

.mapside{display:grid;gap:1.1rem}
.mapside__card{padding:1.4rem;border-radius:var(--r-lg)}
.mapside__card h3{font-size:1.25rem;margin-bottom:.5rem}
.mapside__card p{font-size:var(--fs-sm)}
.mapside__list{display:grid;gap:.1rem}
.mapside__list li{display:grid;gap:.15rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
.mapside__list span{font-family:var(--font-display);font-size:.95rem;font-weight:600;color:var(--text)}
.mapside__list em{font-style:normal;font-size:var(--fs-xs);color:var(--text-3)}
.mapside__future{display:flex;gap:.85rem;padding:1.1rem;border-radius:var(--r-md);
  background:linear-gradient(140deg,color-mix(in srgb,var(--brand) 16%,transparent),transparent);
  border:1px solid var(--line)}
.mapside__future svg{color:var(--accent);flex:none;margin-top:.15rem}
.mapside__future strong{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.mapside__future em{font-style:normal;font-size:var(--fs-xs);color:var(--text-3);line-height:1.6}

/* ════════════════════════════════════════════════ 18 · TESTIMONIALS ═══ */
.testi{background:var(--bg);overflow:hidden}
/* Clip the carousel to the content column so partial cards end at the grid
   edge rather than bleeding to the viewport. Padding keeps hover shadows. */
.testi__stage{position:relative;overflow:hidden;margin-inline:-14px;padding:14px}
.testi__track{display:flex;gap:1.1rem;transition:transform var(--t-slow) var(--e-out);will-change:transform}
.tcard{position:relative;flex:0 0 calc((100% - 2.2rem)/3);display:flex;flex-direction:column;gap:1.1rem;
  padding:clamp(1.5rem,2.4vw,2.1rem);border-radius:var(--r-lg)}
.tcard__quote{position:absolute;right:1.3rem;top:1.1rem;color:var(--brand);opacity:.16}
.tcard__stars{display:flex;gap:.14rem;color:#FFC24B}
.tcard blockquote{font-family:var(--font-display);font-size:1.03rem;font-weight:400;line-height:1.6;
  letter-spacing:-.012em;color:var(--text)}
.tcard__by{display:flex;align-items:center;gap:.75rem;margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--line)}
.tcard__avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;flex:none;
  color:var(--brand-soft);background:color-mix(in srgb,var(--brand) 16%,transparent);border:1px solid var(--line)}
.tcard__by strong{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.tcard__by em{font-style:normal;font-size:var(--fs-micro);color:var(--text-3)}
.testi__ctrl{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:2rem}
.testi__ctrl .iconbtn{border:1px solid var(--line)}
.testi__dots{display:flex;gap:.4rem}
.tdot{width:7px;height:7px;border-radius:50%;background:var(--line-2);transition:all var(--t-fast)}
.tdot.is-active{width:22px;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--brand),var(--accent))}
.testi__note{margin-top:1.4rem;text-align:center;font-size:var(--fs-micro);color:var(--text-3)}

/* ═════════════════════════════════════════════════════ 19 · ENQUIRY ═══ */
.enq{background:var(--bg-2);border-block:1px solid var(--line);position:relative;overflow:hidden}
.enq__in{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,4.5vw,4rem);align-items:start}
.enq__points{display:grid;gap:.9rem;margin-top:2rem}
.enq__points li{display:flex;gap:.8rem;align-items:flex-start}
.enq__points svg{color:var(--accent);flex:none;margin-top:.28rem}
.enq__points strong{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.enq__points em{font-style:normal;font-size:var(--fs-xs);color:var(--text-3)}
.enq__direct{display:grid;gap:.6rem;margin-top:2rem;padding-top:1.7rem;border-top:1px solid var(--line)}
.enq__directitem{display:flex;align-items:center;gap:.85rem;padding:.9rem 1.05rem;border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--glass-brd);transition:all var(--t-fast)}
.enq__directitem:hover{border-color:var(--brand);transform:translateX(4px)}
.enq__directitem svg{color:var(--brand-soft);flex:none}
.enq__directitem em{font-style:normal;display:block;font-size:var(--fs-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3)}
.enq__directitem strong{font-family:var(--font-display);font-size:.98rem;font-weight:600;color:var(--text)}

.enq__formwrap{padding:clamp(1.4rem,2.6vw,2.3rem);border-radius:var(--r-xl);box-shadow:var(--shadow-lg)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.field{position:relative}
.field--full{grid-column:1/-1}
.field input,.field select,.field textarea{
  width:100%;padding:1.28rem .95rem .55rem;border-radius:var(--r-md);
  background:color-mix(in srgb,var(--bg) 55%,transparent);border:1px solid var(--line);
  font-size:var(--fs-sm);transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast)
}
.field textarea{resize:vertical;min-height:96px;padding-top:1.5rem}
.field select{appearance:none;cursor:pointer}
.field select option{background:var(--bg-2);color:var(--text)}
.field label{
  position:absolute;left:.98rem;top:.95rem;font-size:var(--fs-sm);color:var(--text-3);
  pointer-events:none;transform-origin:left top;
  transition:transform var(--t-fast) var(--e-out),color var(--t-fast)
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--brand);background:color-mix(in srgb,var(--bg) 80%,transparent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 13%,transparent)
}
.field input:focus + label,.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,.field select:valid + label{
  transform:translateY(-.62rem) scale(.78);color:var(--brand-soft)
}
.field--select .field__caret{position:absolute;right:.9rem;top:1.15rem;color:var(--text-3);pointer-events:none}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#FF6B6B;box-shadow:0 0 0 4px rgba(255,107,107,.13)}
.field__err{display:block;margin-top:.3rem;font-size:var(--fs-micro);color:#FF8A8A}

.upload{display:flex;align-items:center;gap:.9rem;padding:1.05rem;border-radius:var(--r-md);cursor:pointer;
  border:1px dashed var(--line-2);background:color-mix(in srgb,var(--bg) 45%,transparent);
  transition:border-color var(--t-fast),background var(--t-fast)}
.upload:hover{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 6%,transparent)}
.upload svg{color:var(--brand-soft);flex:none}
.upload input{position:absolute;width:1px;height:1px;opacity:0}
.upload__text strong{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.upload__text em{font-style:normal;font-size:var(--fs-micro);color:var(--text-3)}

.enq__submit{margin-top:1.3rem}
.enq__legal{margin-top:.85rem;text-align:center;font-size:var(--fs-micro);color:var(--text-3)}
.enq__status{margin-top:1rem;padding:.95rem 1.1rem;border-radius:var(--r-md);font-size:var(--fs-sm)}
.enq__status.is-ok{background:color-mix(in srgb,#25D366 14%,transparent);border:1px solid rgba(37,211,102,.36);color:#7BE8A8}
.enq__status.is-err{background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.34);color:#FF9C9C}
[data-theme="light"] .enq__status.is-ok{color:#12734A}
[data-theme="light"] .enq__status.is-err{color:#B02B2B}

/* ═════════════════════════════════════════════════════ 20 · CONTACT ═══ */
.contact{background:var(--bg)}
.contact__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(1.5rem,3vw,2.4rem);align-items:stretch}
.contact__cards{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.ccard{padding:1.4rem;border-radius:var(--r-lg);transition:transform var(--t-mid) var(--e-out),border-color var(--t-mid)}
.ccard:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--brand) 40%,transparent)}
.ccard__ico{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;margin-bottom:.9rem;
  color:var(--brand-soft);border:1px solid var(--line);background:color-mix(in srgb,var(--brand) 12%,transparent)}
.ccard h3{font-size:1rem;margin-bottom:.55rem}
.ccard p{font-size:var(--fs-xs);line-height:1.75}
.ccard a{transition:color var(--t-fast)}
.ccard a:hover{color:var(--brand-soft)}
.ccard__gst{margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--line);
  font-size:var(--fs-micro);letter-spacing:.06em;color:var(--text-3)}
.ccard .linkarrow{margin-top:.7rem}
.contact__map{position:relative;min-height:420px;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line)}
.contact__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.35) contrast(1.05)}
[data-theme="dark"] .contact__map iframe{filter:grayscale(.75) invert(.92) hue-rotate(185deg) contrast(.9) brightness(.95)}
.contact__mapoverlay{position:absolute;left:1rem;bottom:1rem;right:1rem;max-width:340px;display:grid;gap:.3rem;
  padding:1.1rem;border-radius:var(--r-md);box-shadow:var(--shadow-md)}
.contact__mapoverlay strong{font-family:var(--font-display);font-size:.98rem;font-weight:600}
.contact__mapoverlay em{font-style:normal;font-size:var(--fs-micro);color:var(--text-3);margin-bottom:.5rem}

/* ═══════════════════════════════════════════ 21 · CTA, FOOT, FLOATS ═══ */
.ctaband{position:relative;overflow:hidden;padding-block:clamp(3.4rem,6vw,5.4rem);
  background:linear-gradient(120deg,var(--royal-700),var(--navy-800) 58%,var(--navy-900));
  border-top:1px solid var(--line)}
[data-theme="light"] .ctaband{background:linear-gradient(120deg,#12256B,#0B1B4A 58%,#081436)}
.ctaband__glow{position:absolute;width:60vw;height:60vw;right:-15vw;top:-30vw;border-radius:50%;
  background:radial-gradient(circle,rgba(87,224,255,.28),transparent 62%);filter:blur(50px)}
.ctaband__in{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2rem}
.ctaband .h2{color:#fff}
.ctaband p{color:rgba(226,236,255,.72);margin-top:.85rem;font-size:var(--fs-lede)}
.ctaband__actions{display:flex;flex-wrap:wrap;gap:.7rem}
.ctaband .btn--bare{color:rgba(226,236,255,.8);border-color:rgba(255,255,255,.2)}
.ctaband .btn--bare:hover{color:#fff;border-color:rgba(255,255,255,.45)}

.foot{position:relative;padding-top:clamp(3.4rem,6vw,5rem);background:var(--bg-2);border-top:1px solid var(--line);overflow:hidden}
.foot__top{display:grid;grid-template-columns:1.15fr 2fr 1.05fr;gap:clamp(1.8rem,4vw,3.4rem);
  padding-bottom:3rem;border-bottom:1px solid var(--line)}
.brand--foot{margin-bottom:1.2rem}
.foot__blurb{font-size:var(--fs-sm);max-width:38ch}
.foot__badges{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.3rem}
.fbadge{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .75rem;border-radius:var(--r-pill);
  font-size:var(--fs-micro);letter-spacing:.06em;color:var(--text-3);background:var(--glass);border:1px solid var(--line)}
.fbadge svg{color:var(--accent)}
.foot__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.foot h4{font-family:var(--font-display);font-size:var(--fs-xs);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text);margin-bottom:1.1rem}
.foot__col ul{display:grid;gap:.55rem}
.foot__col a{font-size:var(--fs-xs);color:var(--text-3);transition:color var(--t-fast),padding-left var(--t-fast)}
.foot__col a:hover{color:var(--brand-soft);padding-left:.25rem}
.foot__col a.is-more{color:var(--brand-soft);white-space:nowrap}
.foot__contactlist{display:grid;gap:.75rem;margin-bottom:1.8rem}
.foot__contactlist li{display:flex;gap:.6rem;font-size:var(--fs-xs);color:var(--text-3);line-height:1.6}
.foot__contactlist svg{color:var(--brand-soft);flex:none;margin-top:.1rem}
.foot__contactlist a:hover{color:var(--brand-soft)}
.foot__nlhead{margin-top:.4rem}
.foot__nl{display:flex;gap:.4rem}
.foot__nl input{flex:1;padding:.7rem .9rem;border-radius:var(--r-pill);font-size:var(--fs-xs);
  background:var(--glass);border:1px solid var(--line);transition:border-color var(--t-fast)}
.foot__nl input:focus{border-color:var(--brand)}
.foot__nl .btn{padding:.7rem .95rem}
.foot__nlnote{margin-top:.6rem;font-size:var(--fs-micro);color:var(--text-3)}
.foot__nlnote.is-ok{color:#5BD48D}
.foot__social{display:flex;gap:.45rem;margin-top:1.5rem}
.soc{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--text-3);
  background:var(--glass);border:1px solid var(--line);transition:all var(--t-fast)}
.soc:hover{color:#fff;background:var(--brand);border-color:var(--brand);transform:translateY(-3px)}
.foot__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.5rem}
.foot__bar p{font-size:var(--fs-micro);color:var(--text-3)}
.foot__legal{display:flex;gap:1.3rem}
.foot__legal a{font-size:var(--fs-micro);color:var(--text-3);transition:color var(--t-fast)}
.foot__legal a:hover{color:var(--brand-soft)}
.foot__watermark{position:absolute;left:50%;bottom:-2.2vw;transform:translateX(-50%);pointer-events:none;
  font-family:var(--font-display);font-size:clamp(4rem,15vw,13rem);font-weight:700;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1px var(--line);white-space:nowrap;opacity:.34;z-index:0}
.foot .shell{position:relative;z-index:1}

.floats{position:fixed;right:clamp(.9rem,2.2vw,1.6rem);bottom:clamp(.9rem,2.2vw,1.6rem);z-index:900;
  display:flex;flex-direction:column;align-items:flex-end;gap:.6rem}
.fab{position:relative;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  box-shadow:var(--shadow-md);transition:transform var(--t-fast) var(--e-spring),box-shadow var(--t-fast)}
.fab:hover{transform:translateY(-3px) scale(1.05)}
.fab--top{width:44px;height:44px;color:var(--text-2);background:var(--glass-2);border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.fab--top:hover{color:var(--text)}
.fab--wa{color:#fff;background:linear-gradient(140deg,#25D366,#0F9D4F)}
.fab__pulse{position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:ping 2.6s var(--e-out) infinite}
.fab__tip{position:absolute;right:calc(100% + 12px);white-space:nowrap;padding:.45rem .8rem;border-radius:var(--r-sm);
  font-size:var(--fs-xs);color:var(--text);background:var(--bg-2);border:1px solid var(--line);
  box-shadow:var(--shadow-md);opacity:0;transform:translateX(8px);transition:all var(--t-fast);pointer-events:none}
.fab--wa:hover .fab__tip{opacity:1;transform:none}

.chatdock{width:min(330px,calc(100vw - 2.2rem));border-radius:var(--r-lg);overflow:hidden;
  background:var(--bg-2);border:1px solid var(--line-2);box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(14px) scale(.97);transform-origin:bottom right;
  transition:all var(--t-mid) var(--e-out)}
.chatdock.is-open{opacity:1;transform:none}
.chatdock__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.1rem;
  background:linear-gradient(135deg,var(--royal-600),var(--royal-700));color:#fff}
.chatdock__head strong{display:block;font-family:var(--font-display);font-size:.95rem}
.chatdock__head em{font-style:normal;font-size:var(--fs-micro);color:rgba(255,255,255,.72)}
.chatdock__head .iconbtn{color:rgba(255,255,255,.8);width:32px;height:32px}
.chatdock__head .iconbtn:hover{color:#fff;background:rgba(255,255,255,.14)}
.chatdock__body{padding:1.1rem}
.chatdock__msg{font-size:var(--fs-xs);margin-bottom:.85rem}
.chatdock__opts{display:grid;gap:.4rem}
.chatdock__opts a{padding:.65rem .8rem;border-radius:var(--r-sm);font-size:var(--fs-xs);color:var(--text-2);
  background:var(--glass);border:1px solid var(--line);transition:all var(--t-fast)}
.chatdock__opts a:hover{color:var(--text);border-color:var(--brand);transform:translateX(3px)}
.chatdock__cta{border-radius:0}

/* ══════════════════════════════════════════════════════ 22 · MOTION ═══ */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--e-out),transform .85s var(--e-out)}
.reveal.is-in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
.no-js .hero__h1 .w{transform:none;opacity:1;animation:none}
.no-js .loader{display:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .hero__h1 .w{opacity:1;transform:none}
  .marquee__track{animation:none}
}

/* ══════════════════════════════════════════════════ 23 · RESPONSIVE ═══ */
/* Raised 1180 -> 1300 on 2026-09-09. The enlarged brand block (100px emblem +
   gold company name) grew the nav content to ~1348px, so between 1181px and
   ~1380px the "Request a Quote" CTA was being clipped off the right edge —
   which covers the very common 1280 and 1366 laptop widths. Below 1300 we now
   use the burger; above it the brand is trimmed (see the block after this). */
@media (max-width:1300px){
  .nav__menu{display:none}
  .nav__burger{display:grid}
  .indgrid{grid-template-columns:repeat(3,1fr)}
  .whygrid{grid-template-columns:repeat(3,1fr)}
  .foot__top{grid-template-columns:1fr 1fr}
  .foot__contact{grid-column:1/-1}
}
@media (max-width:1024px){
  .hero__in{grid-template-columns:1fr;gap:3rem}
  .hero__visual{max-width:420px;order:-1}
  .hero__chip{display:none}
  .sechead--split{grid-template-columns:1fr;align-items:start}
  .about__top{grid-template-columns:1fr}
  .quality__in{grid-template-columns:1fr}
  .quality__lead{position:static}
  .mapwrap{grid-template-columns:1fr}
  .map{max-width:560px;margin-inline:auto;width:100%}
  .enq__in{grid-template-columns:1fr}
  .contact__grid{grid-template-columns:1fr}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .tcard{flex:0 0 calc((100% - 1.1rem)/2)}
  .bento{grid-template-columns:repeat(2,1fr)}
  .mvv{grid-template-columns:1fr}
  .trust__row{grid-template-columns:repeat(3,1fr)}
  .trust__cell:nth-child(3n+1)::before{display:none}
  .trust__cell:nth-child(n+4){border-top:1px solid var(--line)}
}
@media (max-width:760px){
  :root{--nav-h:86px}
  .nav .brand__mark{width:66px!important;height:66px!important}
  .brand__text strong{font-size:.98rem}
  .brand__text em{font-size:.64rem}
  .topstrip__links{display:none}
  .topstrip__msg{font-size:var(--fs-micro)}
  /* Keep "Since 1950" visible on phones — only drop the longer
     "Chemical Distribution · " prefix so the line still fits the 66px logo. */
  .brand__long{display:none}
  .langswitch{display:none}
  .nav__actions .btn--primary{display:none}
  .indgrid,.brandgrid,.whygrid,.contact__cards{grid-template-columns:1fr 1fr}
  .pgrid{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .tcard{flex:0 0 100%}
  .bento{grid-template-columns:1fr;grid-auto-rows:180px}
  .bento__cell--wide,.bento__cell--tall{grid-column:auto;grid-row:auto}
  .qstep{grid-template-columns:44px 1fr;gap:.9rem}
  .quality__seals{grid-template-columns:1fr}
  .foot__top{grid-template-columns:1fr}
  .foot__cols{grid-template-columns:1fr 1fr}
  .foot__bar{flex-direction:column;align-items:flex-start}
  .hero__proof{gap:.8rem 1.2rem}
  .hero__visual{max-width:310px}
  .products__foot{flex-direction:column;align-items:stretch}
}
@media (max-width:520px){
  .trust__row{grid-template-columns:repeat(2,1fr)}
  .trust__cell::before{display:none}
  .trust__cell{border-top:1px solid var(--line)}
  .indgrid,.brandgrid,.whygrid,.contact__cards{grid-template-columns:1fr}
  .hero__cta .btn{flex:1 1 100%}
  .ctaband__actions{width:100%}
  .ctaband__actions .btn{flex:1 1 100%}
}

/* ══════════════════════════════════════════════ 24 · PRINT & A11Y ═══ */
@media print{
  .nav,.topstrip,.floats,.loader,.hero__canvas,.hero__mesh,.mega,.drawer,.searchveil,.ctaband{display:none!important}
  body{background:#fff;color:#000}
  .section{padding-block:1.2rem;break-inside:avoid}
}
@media (forced-colors:active){
  .btn,.chip,.pcard,.indcard{border:1px solid CanvasText}
}

/* ═══════════════════════════════════════════ MOBILE USABILITY ═══
   Added 2026-09-09 after auditing the live site at 375px.
   Fixes: (a) smallest type sat at 11.2px, below the ~12px readable
   floor; (b) several controls had tap areas far under the 44px
   guideline (map pins 14x14, carousel dots 22x7, footer links 55x14);
   (c) form fields at 14px make iOS Safari zoom in on focus — 16px
   stops that. Layout itself was already sound (no horizontal scroll).
   ================================================================ */
@media (max-width: 760px) {

  /* (a) lift the smallest type tier ~11.2px -> ~12.5px */
  :root { --fs-micro: .78rem; }

  /* (b1) inline links get a taller hit area without moving the layout */
  .foot__col li a,
  .foot__legal li a,
  .foot__contactlist li a,
  .ccard p a,
  .linkarrow,
  .is-more { display: inline-block; padding-block: .5rem; }

  /* (b2) icon-sized buttons keep their looks but gain a real touch area.
     Map pins use a smaller box than the 44px ideal on purpose — the
     India map places Ahmedabad/Surat/Vapi close together and a full
     44px halo would overlap its neighbours. */
  .pin, .tdot, .pfilter__clear { position: relative; }
  .pin::after,
  .tdot::after,
  .pfilter__clear::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
  }
  .pin::after { width: 34px; height: 34px; }

  /* (c) 16px on form controls prevents iOS auto-zoom on focus */
  .field input, .field select, .field textarea,
  #prodSearch, #searchInput,
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="search"], select, textarea { font-size: 16px; }

  #prodSearch { min-height: 44px; }
}

/* ══════════════════════════════════ NAV FIT ON MID-SIZE SCREENS ═══
   Just above the burger breakpoint the full menu, the enlarged brand and
   the CTA all have to share one row. Trim the brand there so
   "Request a Quote" is never clipped. Measured target: nav content must
   stay under the viewport width at 1301px.
   ================================================================= */
@media (min-width: 1301px) and (max-width: 1560px) {
  .nav .brand__mark { width: 72px !important; height: 72px !important; }
  .brand__text strong { font-size: 1rem; letter-spacing: .05em; }
  .brand__text em { font-size: .66rem; letter-spacing: .09em; }
  .brand { gap: .7rem; }
  .nav__menu a { padding-inline: .55rem; }
}

/* ══════════════════════════════════ LOGO LEGIBILITY ═══
   The emblem was artworked on white, so on the dark theme its navy rings
   sit too close in value to the navbar and the mark goes muddy at small
   sizes. A tight light halo restores the separation it gets on white,
   without putting the mark back in a white box.
   Light theme already has good contrast, so it is left alone.
   ===================================================== */
[data-theme="dark"] .brand__mark {
  filter: drop-shadow(0 0 5px rgba(255,255,255,.30))
          drop-shadow(0 0 12px rgba(201,162,39,.34));
}
[data-theme="dark"] .brand:hover .brand__mark {
  filter: drop-shadow(0 0 7px rgba(255,255,255,.42))
          drop-shadow(0 0 16px rgba(201,162,39,.5));
}

/* A touch more presence on phones (nav is 86px tall, so 72 still clears). */
@media (max-width: 760px) {
  .nav .brand__mark { width: 72px !important; height: 72px !important; }
}

/* ═══════════════════════ MOBILE NAV FIT — regression guard ═══
   At 375px the brand (72px emblem + the 237px full company name) took
   324px of the 375px bar and pushed .nav__actions — including the burger —
   completely off screen, leaving the mobile menu unreachable.
   On phones: smaller emblem + the short brand name, and the actions are
   pinned so they can never be squeezed out again.
   ============================================================ */
.brand__abbr { display: none; }

@media (max-width: 760px) {
  .nav .brand__mark { width: 54px !important; height: 54px !important; }
  .brand { min-width: 0; flex: 0 1 auto; margin-left: -.25rem; gap: .5rem; }
  /* Keep the FULL company name on phones — wrap it onto two lines rather than
     abbreviating it. Capped so it can never push .nav__actions (and the
     burger) off the right edge. */
  .brand__text { min-width: 0; max-width: 178px; }
  .brand__full { display: inline; }
  .brand__abbr { display: none; }
  .brand__text strong { font-size: .82rem; white-space: normal;
                        line-height: 1.14; letter-spacing: .03em; }
  .brand__text em { font-size: .68rem; white-space: nowrap; }
  /* the burger and its siblings must always win the space fight */
  .nav__actions { flex: none; margin-left: auto; }
}

/* "SINCE 1950" sat at 10.9px on phones — below the readable floor. */
@media (max-width: 760px) {
  .brand__text em { font-size: .78rem; }
}

/* ═══════════ PHONE: full company name on ONE line ═══════════
   "POPATLAL AMTHALAL SHAH" needs ~220px to sit on a single readable line.
   The top bar only had ~127px for it because search + theme were competing
   for width, so the name wrapped to two lines. Those two controls move into
   the drawer on phones (see .drawer__tools), which frees ~90px and lets the
   full name render on one line at a readable size.
   ============================================================ */
.drawer__tools { display: none; }

@media (max-width: 760px) {
  /* free the space */
  .nav__actions #searchOpen,
  .nav__actions #themeToggle { display: none; }

  /* full name, one line */
  .brand__text { max-width: 232px; }
  .brand__text strong { font-size: .92rem; white-space: nowrap;
                        letter-spacing: .02em; line-height: 1.2; }

  /* the relocated controls */
  .drawer__tools { display: grid; gap: .4rem; margin-top: .9rem; }
  .drawer__tool {
    display: flex; align-items: center; gap: .7rem; width: 100%;
    min-height: 48px; padding: .7rem .8rem; border-radius: var(--r-md);
    border: 1px solid var(--line); background: var(--glass);
    color: var(--text); font-size: .95rem; text-align: left;
  }
  .drawer__tool:hover { border-color: var(--brand); color: var(--brand-soft); }
  [data-theme="light"] .drawer__tool .ico-moon,
  [data-theme="dark"]  .drawer__tool .ico-sun { display: none; }
}

/* ═══════════════════════ LOGO: clean edges, no glow ═══════════════════
   The gold/white drop-shadows added earlier for "dark mode visibility"
   read as a fuzzy halo at navbar size — the emblem looked smudged rather
   than sharp. Contrast is handled by the artwork itself, so drop every
   filter and let the mark render with clean edges.
   ==================================================================== */
.brand__mark,
.brand:hover .brand__mark,
[data-theme="dark"] .brand__mark,
[data-theme="dark"] .brand:hover .brand__mark { filter: none; }

/* keep the subtle hover lift, just without the blur */
.brand:hover .brand__mark { transform: scale(1.04); }

/* ═════════════════════════ CONTACT: two location maps ═══════════════
   Office and warehouse are in different parts of Ahmedabad, so each gets
   its own pinned map, caption and directions link. Stacked in the right
   column on desktop; full width on tablet/phone.
   =================================================================== */
.contact__maps { display: grid; gap: 1rem; align-content: start; }
.contact__maps .contact__map { min-height: 300px; }

@media (max-width: 1024px) {
  .contact__maps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .contact__maps { grid-template-columns: 1fr; }
  .contact__maps .contact__map { min-height: 260px; }
  /* on a narrow screen the caption would swallow the map — keep it compact */
  .contact__mapoverlay { left: .6rem; right: .6rem; bottom: .6rem; padding: .7rem .8rem; }
}