/* =========================================================
   EXCEL GENTECH — "Live Power Grid"
   Trust-blue + white, electric-cyan current, amber spark
   ========================================================= */

:root{
  /* Blues */
  --ink:        #071426;
  --blue-950:   #071B3E;
  --blue-900:   #0A2A5E;
  --blue-800:   #0E3468;
  --blue-700:   #123B84;
  --blue:       #1656C9;   /* primary electric blue */
  --blue-500:   #2E6BE6;
  --blue-400:   #5A8CF0;

  /* Energy accents */
  --volt:       #22D3EE;   /* live current cyan */
  --volt-soft:  #7BE6F6;
  --spark:      #FFB020;   /* power pulse amber — used sparingly */
  --spark-deep: #F59300;

  /* Neutrals */
  --white:      #FFFFFF;
  --mist:       #EEF3FF;   /* light section tint */
  --mist-2:     #DCE7FE;
  --line:       #E2E9F5;
  --slate:      #5B6B8C;
  --slate-2:    #8494B0;

  /* Type */
  --f-display: "Space Grotesk", system-ui, sans-serif;
  --f-body:    "Inter", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, monospace;

  --wrap: 1200px;
  --r: 18px;
  --r-sm: 12px;
  --ease: cubic-bezier(.22,1,.36,1);
  --shadow: 0 24px 60px -28px rgba(10,42,94,.35);
  --shadow-sm: 0 12px 30px -18px rgba(10,42,94,.4);
}

/* ---------- Reset ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
/* Anchor targets must clear the sticky nav (84px) or its top edge clips the
   destination section's eyebrow/heading when jumped to via nav link or hash. */
#home, #about, #capacity, #services, #industries, #process, #contact{ scroll-margin-top:96px; }
body{
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
ul{ list-style:none; }
::selection{ background:var(--blue); color:#fff; }

.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }
.ic{ width:1em; height:1em; display:inline-block; flex:none; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  --bg:var(--blue); --fg:#fff;
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--f-display); font-weight:600; font-size:.95rem;
  letter-spacing:.2px; padding:.85rem 1.4rem; border-radius:999px;
  background:var(--bg); color:var(--fg); position:relative; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
  white-space:nowrap; will-change:transform;
}
.btn .ic{ font-size:1.1em; }
.btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35), transparent 70%);
  transform:translateX(-120%); transition:transform .6s var(--ease);
}
.btn:hover::after{ transform:translateX(120%); }
.btn:hover{ transform:translateY(-3px); }
.btn__arrow{ transition:transform .3s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(4px); }

.btn--spark{ --bg:var(--spark); --fg:#241400; box-shadow:0 14px 30px -12px rgba(245,147,0,.6); }
.btn--spark:hover{ box-shadow:0 20px 40px -14px rgba(245,147,0,.75); }
.btn--blue{ --bg:var(--blue); box-shadow:0 14px 30px -14px rgba(22,86,201,.7); }
.btn--ghost{ --bg:transparent; --fg:#fff; border:1.5px solid rgba(255,255,255,.4); }
.btn--ghost:hover{ background:rgba(255,255,255,.1); }
.btn--white{ --bg:#fff; --fg:var(--blue-900); }
.btn--outline{ --bg:#fff; --fg:var(--blue); border:1.5px solid var(--line); box-shadow:var(--shadow-sm); }
.btn--outline:hover{ border-color:var(--blue); }
.btn--sm{ padding:.65rem 1.1rem; font-size:.85rem; }
.btn--full{ width:100%; justify-content:center; padding:1rem; }

/* =========================================================
   PILLS / EYEBROWS / HEADINGS
   ========================================================= */
.pill{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-mono); font-size:.72rem; font-weight:500;
  text-transform:uppercase; letter-spacing:1.5px;
  padding:.5rem 1rem; border-radius:999px;
  background:rgba(255,176,32,.12); color:var(--spark);
  border:1px solid rgba(255,176,32,.3);
}
.pill--onblue{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.25); }
.pulse{
  width:8px; height:8px; border-radius:50%; background:var(--spark);
  box-shadow:0 0 0 0 rgba(255,176,32,.6); animation:pulse 1.8s infinite;
}
.pill--onblue .pulse{ background:var(--volt); box-shadow:0 0 0 0 rgba(34,211,238,.6); }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,176,32,.55); }
  70%{ box-shadow:0 0 0 10px rgba(255,176,32,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,176,32,0); }
}

.eyebrow{
  display:inline-block; font-family:var(--f-mono); font-size:.75rem; font-weight:500;
  text-transform:uppercase; letter-spacing:2px; color:var(--blue);
  background:var(--mist); border:1px solid var(--mist-2);
  padding:.4rem .9rem; border-radius:999px; margin-bottom:1.1rem;
}
.eyebrow--onblue{ color:var(--volt); background:rgba(34,211,238,.1); border-color:rgba(34,211,238,.25); }

.h2{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.9rem, 4vw, 3rem); line-height:1.08;
  letter-spacing:-1px; text-transform:uppercase;
}
.h2--light{ color:#fff; }
.hl{ color:var(--spark); }
.h2--light .hl{ color:var(--spark); }

.lead{ font-size:1.06rem; color:var(--slate); max-width:56ch; margin-top:1rem; }
.lead--light{ color:rgba(255,255,255,.75); margin-inline:auto; }
.muted{ color:var(--slate); margin-top:.8rem; }

.section-head{ margin-bottom:3rem; }
.section-head--center{ text-align:center; }
.section-head--center .lead{ margin-inline:auto; }

/* =========================================================
   TOP BAR
   ========================================================= */
.topbar{
  background:var(--blue-950); color:rgba(255,255,255,.8);
  font-size:.8rem; border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar__inner{ display:flex; justify-content:space-between; align-items:center; height:42px; }
.topbar__contacts{ display:flex; gap:1.4rem; }
.topbar__contacts a, .topbar__loc{ display:inline-flex; align-items:center; gap:.4rem; transition:color .25s; }
.topbar__contacts a:hover{ color:var(--volt); }
.topbar .ic{ color:var(--spark); }
.topbar__right{ display:flex; align-items:center; gap:1.2rem; }
.topbar__wa{
  display:inline-flex; align-items:center; gap:.45rem;
  background:#22c15e; color:#fff; padding:.4rem .85rem; border-radius:999px;
  font-weight:600; transition:transform .25s, box-shadow .25s;
}
.topbar__wa .ic{ color:#fff; }
.topbar__wa:hover{ transform:translateY(-1px); box-shadow:0 8px 18px -8px rgba(34,193,94,.8); }
@media (max-width:860px){ .topbar__contacts a:nth-child(2), .topbar__loc{ display:none; } }
@media (max-width:560px){ .topbar__contacts a:nth-child(3){ display:none; } }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.85); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s, background .3s;
}
/* Sticky + backdrop-filter forces a GPU blur recomposite on every scroll frame —
   costly on mid-range phones. Swap to a cheap opaque fill below the breakpoint
   where users are most likely to be on constrained hardware. */
@media (max-width:768px){
  .nav{ background:#fff; backdrop-filter:none; }
}
.nav.is-scrolled{ box-shadow:0 10px 30px -20px rgba(10,42,94,.5); background:rgba(255,255,255,.95); }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; height:84px; gap:1rem; }

.brand{ display:inline-flex; align-items:center; gap:.6rem; }
.brand__logo{ width:54px; height:54px; flex:none; display:block; }
.brand__name{ font-family:var(--f-display); font-weight:700; font-size:1.15rem; letter-spacing:-.5px; color:var(--blue-900); line-height:1; }
.brand__name span{ color:var(--spark); }
.brand--light .brand__name{ color:#fff; }

.nav__links{ display:flex; gap:.3rem; margin-left:auto; margin-right:.5rem; }
.nav__links a{
  font-family:var(--f-display); font-weight:500; font-size:.92rem; color:var(--ink);
  padding:.5rem .8rem; border-radius:8px; position:relative; transition:color .25s;
}
.nav__links a::after{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:.25rem; height:2px;
  background:var(--spark); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav__links a:hover, .nav__links a.is-active{ color:var(--blue); }
.nav__links a:hover::after, .nav__links a.is-active::after{ transform:scaleX(1); }

.nav__burger{ display:none; width:44px; height:44px; flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.nav__burger span{ width:24px; height:2px; background:var(--blue-900); border-radius:2px; transition:.3s var(--ease); }
.nav__burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity:0; }
.nav__burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:1024px){
  .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
  .nav__links{
    position:fixed; inset:116px 0 auto 0; flex-direction:column; gap:0;
    background:#fff; padding:1rem 20px 1.5rem; border-bottom:1px solid var(--line);
    box-shadow:var(--shadow); transform:translateY(-140%); transition:transform .45s var(--ease);
    margin:0;
  }
  .nav__links.is-open{ transform:translateY(0); }
  .nav__links a{ padding:.9rem .5rem; border-bottom:1px solid var(--line); border-radius:0; font-size:1.05rem; }
  .nav__links a::after{ display:none; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(1200px 700px at 80% -10%, var(--blue-700), transparent 60%),
    linear-gradient(160deg, var(--blue-900) 0%, var(--blue-950) 55%, var(--ink) 100%);
  color:#fff; padding:clamp(3.5rem,8vw,6rem) 0 5.5rem;
}
.hero__bg{
  position:absolute; inset:0; z-index:-3; width:100%; height:100%; object-fit:cover;
  opacity:.22; mix-blend-mode:luminosity;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 85%);
}
/* mix-blend-mode forces an isolated compositing layer; skip it on mobile GPUs
   and fall back to a plain low-opacity image with the same visual read. */
@media (max-width:768px){
  .hero__bg{ mix-blend-mode:normal; opacity:.14; }
}
.hero__grid{
  position:absolute; inset:0; z-index:-2; opacity:.5;
  background-image:
    linear-gradient(rgba(90,140,240,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,140,240,.08) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(circle at 50% 30%, #000 40%, transparent 80%);
}
.hero__glow{
  position:absolute; z-index:-1; width:520px; height:520px; right:-80px; top:10%;
  background:radial-gradient(circle, rgba(34,211,238,.22), transparent 65%); filter:blur(20px);
}
.hero__wave{
  /* Sits behind .hero__inner (z-index:-1 vs 1, same isolated stacking context)
     so it never paints over any foreground element. The mask additionally
     fades it out under the copy column specifically — without it, the wave
     is still technically "behind" the paragraph/buttons, but shows through
     their transparent gaps (ghost button fill, space around letters) and
     reads visually as if it were crossing over the text. */
  position:absolute; left:0; right:0; bottom:16%; width:100%; height:260px; z-index:-1; opacity:.6;
  mask-image:linear-gradient(90deg, transparent 0%, transparent 46%, #000 68%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 46%, #000 68%);
}
.wave{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.wave--1{ stroke:var(--volt); stroke-width:2.5; filter:drop-shadow(0 0 8px rgba(34,211,238,.8)); }
.wave--2{ stroke:rgba(34,211,238,.4); stroke-width:2; }
.wave--3{ stroke:rgba(90,140,240,.25); stroke-width:1.5; }

.hero__inner{
  display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center;
  position:relative; z-index:1; min-height:66vh;
}
.hero__copy{ max-width:640px; }
.hero__title{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(2.6rem, 6.2vw, 4.6rem); line-height:.98;
  letter-spacing:-2px; text-transform:uppercase; margin:1.2rem 0 1.3rem;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line span{ display:block; }
.hero__title .hl{ color:var(--spark); }

.hero__lead{ font-size:1.12rem; color:rgba(255,255,255,.82); max-width:52ch; }
.hero__lead strong{ color:#fff; }

.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin:2rem 0 2.6rem; }

.hero__stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; max-width:560px; }
.stat{ position:relative; padding-left:.2rem; }
/* Full-height divider (not a fraction of it) so it consistently spans the
   whole stat — including labels that wrap to two lines like "Generators
   Fleet" — instead of stopping short next to the number only. */
.stat::before{ content:""; position:absolute; left:-.6rem; top:0; width:3px; height:100%; background:var(--spark); border-radius:2px; }
.stat__num{ display:block; font-family:var(--f-mono); font-weight:700; font-size:clamp(1.5rem,3vw,2.1rem); color:var(--spark); line-height:1; }
.stat__label{ font-size:.72rem; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.6); }

/* Genset nameplate panel */
.hero__panel{ position:relative; justify-self:center; width:100%; max-width:420px; }
.genset{
  position:relative; overflow:hidden; border-radius:22px; padding:1.6rem 1.6rem 2.2rem;
  background:linear-gradient(155deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.15);
  backdrop-filter:blur(10px);
}
.genset__scan{
  position:absolute; left:0; right:0; top:0; height:38%;
  background:linear-gradient(180deg, rgba(34,211,238,.18), transparent);
  transform:translateY(-100%);
}
.genset__head{ display:flex; justify-content:space-between; align-items:center; }
.genset__brand{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:1.5px; color:var(--volt-soft); }
.genset__led{ width:9px; height:9px; border-radius:50%; background:#4ade80; box-shadow:0 0 10px #4ade80; animation:pulse 1.8s infinite; }
.genset__range{ display:flex; align-items:baseline; gap:.35rem; margin:1.4rem 0 .2rem; }
.genset__from, .genset__to{ font-family:var(--f-mono); font-weight:700; font-size:2.6rem; color:#fff; line-height:1; }
.genset__dash{ font-size:1.8rem; color:var(--volt); }
.genset__unit{ font-family:var(--f-mono); font-size:1rem; color:var(--volt); align-self:flex-end; margin-bottom:.3rem; letter-spacing:1px; }
.genset__bars{ display:flex; align-items:flex-end; gap:6px; height:56px; margin:1.2rem 0 1.4rem; }
.genset__bars span{
  flex:1; height:var(--h); border-radius:3px 3px 0 0;
  background:linear-gradient(180deg, var(--volt), var(--blue)); opacity:.85;
  transform-origin:bottom;
}
.genset__specs{ display:grid; gap:.55rem; border-top:1px solid rgba(255,255,255,.12); padding-top:1.1rem; }
.genset__specs li{ display:flex; justify-content:space-between; font-size:.82rem; }
.genset__specs span{ font-family:var(--f-mono); letter-spacing:1px; color:rgba(255,255,255,.5); font-size:.72rem; }
.genset__specs b{ color:#fff; font-weight:500; }
.genset__specs .ok{ color:#4ade80; }
.hero__chip{
  position:absolute; left:-16px; bottom:-22px;
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-display); font-weight:600; font-size:.9rem; color:#241400;
  background:var(--spark); padding:.7rem 1.1rem; border-radius:12px;
  box-shadow:0 18px 34px -14px rgba(245,147,0,.8);
}
.hero__chip .ic{ font-size:1.05em; }

.hero__scroll{ position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%); z-index:2; }
.hero__mouse{ width:24px; height:38px; border:2px solid rgba(255,255,255,.4); border-radius:14px; display:block; position:relative; }
.hero__mouse span{ position:absolute; left:50%; top:7px; width:4px; height:8px; background:var(--volt); border-radius:2px; transform:translateX(-50%); animation:scrollDot 1.8s infinite; }
@keyframes scrollDot{ 0%{ opacity:0; transform:translate(-50%,0); } 40%{ opacity:1; } 80%{ opacity:0; transform:translate(-50%,12px); } }

@media (max-width:900px){
  .hero__inner{ grid-template-columns:1fr; gap:2.5rem; }
  .hero__panel{ max-width:380px; order:2; }
  /* Single-column layout: the left/right split no longer applies, so fade
     evenly instead of masking by horizontal position. */
  .hero__wave{
    bottom:auto; top:40%; opacity:.35;
    mask-image:linear-gradient(180deg, transparent, #000 40%, #000 60%, transparent);
    -webkit-mask-image:linear-gradient(180deg, transparent, #000 40%, #000 60%, transparent);
  }
}
@media (max-width:520px){
  .hero__stats{ grid-template-columns:repeat(2,1fr); gap:1.3rem 1rem; }
}

/* =========================================================
   TICKER
   ========================================================= */
.ticker{ background:var(--blue-950); border-block:1px solid rgba(255,255,255,.06); overflow:hidden; }
.ticker__row{ display:flex; }
.ticker__track{ display:flex; gap:3rem; padding:.9rem 0; white-space:nowrap; animation:ticker 30s linear infinite; }
.ticker__track span{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--f-mono); font-size:.82rem; letter-spacing:.5px; color:rgba(255,255,255,.72); }
.ticker__track .ic{ color:var(--spark); }
@keyframes ticker{ to{ transform:translateX(-50%); } }
.ticker:hover .ticker__track{ animation-play-state:paused; }

/* =========================================================
   FEATURE CARDS
   ========================================================= */
.features{ background:#fff; padding:3.5rem 0; margin-top:-2.5rem; position:relative; z-index:2; }
.features__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.fcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:2rem 1.5rem; text-align:center;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.fcard::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--blue),var(--volt)); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.fcard:hover{ transform:translateY(-8px); box-shadow:0 34px 60px -30px rgba(10,42,94,.5); border-color:var(--mist-2); }
.fcard:hover::before{ transform:scaleX(1); }
.fcard__ic{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; margin:0 auto 1rem; background:var(--mist); color:var(--blue); font-size:1.4rem; transition:.4s var(--ease); }
.fcard:hover .fcard__ic{ background:var(--blue); color:#fff; transform:rotate(-6deg) scale(1.05); }
.fcard__num{ display:block; font-family:var(--f-mono); font-weight:700; font-size:2.3rem; color:var(--blue); line-height:1; }
.fcard__prefix{ font-size:.5em; font-weight:600; vertical-align:middle; color:var(--slate); letter-spacing:.5px; }
.fcard__label{ font-size:.78rem; text-transform:uppercase; letter-spacing:1px; color:var(--slate); }
@media (max-width:820px){ .features__grid{ grid-template-columns:repeat(2,1fr); } }
.features__note{ text-align:center; font-size:.75rem; color:var(--slate-2); margin-top:1.2rem; }

/* =========================================================
   ABOUT
   ========================================================= */
.about{ background:linear-gradient(180deg,#fff,var(--mist)); padding:6rem 0; }
.about__inner{ display:grid; grid-template-columns:.9fr 1.1fr; gap:4rem; align-items:center; }
.about__media{ position:relative; }
.about__frame{ border-radius:22px; overflow:hidden; box-shadow:var(--shadow); position:relative; }
.about__frame--main{ aspect-ratio:4/4.2; }
.about__frame--sub{ position:absolute; right:-24px; bottom:-30px; width:52%; aspect-ratio:1/1; border:6px solid #fff; }
.about__frame img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.about__frame:hover img{ transform:scale(1.06); }
.about__frame--main::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(200deg, transparent 55%, rgba(7,20,38,.55));
  pointer-events:none;
}
.about__badge{
  position:absolute; left:-20px; top:38%; background:linear-gradient(135deg,var(--blue),var(--blue-700));
  color:#fff; padding:1.1rem 1.3rem; border-radius:16px; text-align:center;
  box-shadow:0 24px 44px -18px rgba(22,86,201,.8); z-index:2;
}
.about__badge-num{ display:block; font-family:var(--f-display); font-weight:700; font-size:2.4rem; line-height:1; }
.about__badge-num span{ color:var(--spark); }
.about__badge-txt{ font-size:.68rem; text-transform:uppercase; letter-spacing:1.5px; color:rgba(255,255,255,.8); }

.checklist{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem 1.4rem; margin:1.8rem 0; }
.checklist li{ display:flex; align-items:center; gap:.6rem; font-weight:500; font-size:.95rem; color:var(--ink); }
.checklist .ic{ color:var(--blue); font-size:1.25rem; flex:none; }
.about__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.6rem; }

@media (max-width:900px){
  .about__inner{ grid-template-columns:1fr; gap:3.5rem; }
  .about__media{ max-width:440px; }
}
@media (max-width:480px){ .checklist{ grid-template-columns:1fr; } }

/* =========================================================
   BRANDS
   ========================================================= */
.brands{ background:var(--mist); padding:0 0 4rem; }
.brands__eyebrow{ text-align:center; font-family:var(--f-display); font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--ink); font-size:1.1rem; padding-top:.5rem; margin-bottom:1.6rem; }
.brands__eyebrow span{ color:var(--spark); }
.brands__row{ display:flex; justify-content:center; flex-wrap:wrap; gap:1.4rem; }
.brandcard{
  display:inline-flex; align-items:center; gap:.7rem; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:1rem 2rem; font-family:var(--f-display); font-weight:600; font-size:1.05rem;
  color:var(--blue-900); box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s;
}
.brandcard:hover{ transform:translateY(-5px); box-shadow:0 24px 44px -22px rgba(10,42,94,.5); }
.brandcard__ic{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--mist); color:var(--spark); font-size:1.1rem; }

/* =========================================================
   CAPACITY (dark)
   ========================================================= */
.capacity{ position:relative; background:linear-gradient(180deg,var(--blue-950),var(--ink)); color:#fff; padding:6rem 0; overflow:hidden; }
.capacity__grid-bg{ position:absolute; inset:0; opacity:.4; background-image:linear-gradient(rgba(90,140,240,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(90,140,240,.07) 1px,transparent 1px); background-size:48px 48px; mask-image:radial-gradient(circle at 50% 0,#000,transparent 75%); }
.capacity .wrap{ position:relative; z-index:1; }
.capacity__cards{ display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; }
.capcard{
  position:relative; border-radius:16px; padding:1.6rem 1rem 1.3rem; text-align:center;
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1); overflow:hidden;
  transition:transform .4s var(--ease), border-color .4s, background .4s;
}
.capcard:hover{ transform:translateY(-8px); border-color:var(--volt); background:linear-gradient(160deg, rgba(34,211,238,.12), rgba(255,255,255,.02)); }
.capcard__flag{ position:absolute; top:.7rem; right:.7rem; font-family:var(--f-mono); font-size:.6rem; letter-spacing:1px; text-transform:uppercase; background:var(--spark); color:#241400; padding:.2rem .5rem; border-radius:6px; }
.capcard__ic{ width:44px; height:44px; margin:0 auto .8rem; border-radius:12px; display:grid; place-items:center; background:rgba(34,211,238,.12); color:var(--volt); font-size:1.3rem; transition:.4s; }
.capcard:hover .capcard__ic{ background:var(--volt); color:var(--ink); transform:scale(1.1); }
.capcard--hot{ border-color:rgba(255,176,32,.5); background:linear-gradient(160deg, rgba(255,176,32,.14), rgba(255,255,255,.02)); }
.capcard--hot .capcard__ic{ background:rgba(255,176,32,.18); color:var(--spark); }
.capcard__num{ font-family:var(--f-mono); font-weight:700; font-size:2.1rem; color:#fff; line-height:1; }
.capcard__unit{ font-family:var(--f-mono); font-size:.85rem; color:var(--volt); margin-left:.2rem; }
.capcard__tag{ display:block; font-size:.72rem; color:rgba(255,255,255,.55); margin-top:.5rem; min-height:2em; }
.capcard__meter{ display:block; height:5px; border-radius:3px; background:rgba(255,255,255,.1); margin-top:.7rem; overflow:hidden; }
.capcard__meter i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--blue),var(--volt)); border-radius:3px; transition:width 1.2s var(--ease); }
.capcard.is-in .capcard__meter i{ width:var(--w); }
.capacity__actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:1rem; margin-top:2.6rem; }
@media (max-width:900px){ .capacity__cards{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .capacity__cards{ grid-template-columns:repeat(2,1fr); } }

/* =========================================================
   SERVICES
   ========================================================= */
.services{ background:#fff; padding:6rem 0; }
.services__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.scard{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:0 1.7rem 2rem;
  box-shadow:var(--shadow-sm); overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s, border-color .4s;
}
.scard::before{ content:""; position:absolute; inset:0; background:radial-gradient(400px 200px at 100% 0, rgba(22,86,201,.06), transparent 60%); opacity:0; transition:opacity .4s; z-index:1; pointer-events:none; }
.scard:hover{ transform:translateY(-8px); box-shadow:0 34px 60px -30px rgba(10,42,94,.45); border-color:var(--mist-2); }
.scard:hover::before{ opacity:1; }
.scard__media{ position:relative; margin:0 -1.7rem 1.3rem; height:150px; overflow:hidden; }
.scard__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.scard:hover .scard__media img{ transform:scale(1.08); }
.scard__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,20,38,0) 55%, rgba(7,20,38,.35)); }
.scard__tag{ position:absolute; top:1rem; right:1rem; z-index:2; font-family:var(--f-mono); font-size:.62rem; letter-spacing:1px; text-transform:uppercase; padding:.25rem .55rem; border-radius:6px; color:#fff; }
.scard__tag--rental{ background:var(--blue); }
.scard__tag--long{ background:#16a34a; }
.scard__tag--amc{ background:var(--spark-deep); }
.scard__tag--emg{ background:#e11d48; }
.scard__tag--test{ background:var(--volt); color:var(--ink); }
.scard__ic{ width:54px; height:54px; border-radius:14px; display:grid; place-items:center; background:var(--mist); color:var(--blue); font-size:1.4rem; margin-bottom:1.2rem; transition:.4s var(--ease); position:relative; z-index:1; }
.scard:hover .scard__ic{ background:var(--blue); color:#fff; transform:rotate(-6deg); }
.scard h3{ font-family:var(--f-display); font-weight:600; font-size:1.2rem; text-transform:uppercase; letter-spacing:-.3px; margin-bottom:.6rem; }
.scard p{ color:var(--slate); font-size:.92rem; margin-bottom:1.1rem; }
.scard--cta{ padding:2rem 1.7rem; }
.link{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--f-display); font-weight:600; font-size:.85rem; text-transform:uppercase; letter-spacing:.5px; color:var(--blue); }
.link span{ transition:transform .3s var(--ease); }
.link:hover span{ transform:translateX(5px); }

.scard--cta{ background:linear-gradient(160deg,var(--blue),var(--blue-800)); color:#fff; border:none; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.scard--cta h3, .scard--cta p{ color:#fff; }
.scard--cta p{ color:rgba(255,255,255,.8); }
.scard__ic--light{ background:rgba(255,255,255,.15); color:#fff; }
.scard--cta:hover .scard__ic{ background:#fff; color:var(--blue); }
@media (max-width:900px){ .services__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .services__grid{ grid-template-columns:1fr; } }

/* =========================================================
   INDUSTRIES
   ========================================================= */
.industries{ background:var(--mist); padding:6rem 0; }
.industries__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.icard{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:.7rem; text-align:center; aspect-ratio:4/3.2; border-radius:var(--r); padding:1.6rem 1rem;
  font-family:var(--f-display); font-weight:600; font-size:1rem; text-transform:uppercase; letter-spacing:.3px;
  box-shadow:var(--shadow-sm); overflow:hidden; isolation:isolate; color:#fff;
  transition:transform .4s var(--ease), box-shadow .4s;
}
.icard img{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover;
  object-position:center center;
  transition:transform .6s var(--ease), filter .4s;
  filter:saturate(.35) brightness(.6);
}
/* Manufacturing's source photo is a tall portrait shot — the recognizable
   assembly-line row of cars sits in the upper third; a plain center crop
   grabbed mostly the foreground chassis close-up instead. */
.icard:nth-child(6) img{ object-position:center 15%; }
.icard::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(200deg, rgba(10,42,94,.15), rgba(7,20,38,.88));
  transition:background .4s;
}
.icard__ic{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.14); backdrop-filter:blur(4px); color:var(--volt); font-size:1.4rem; transition:.4s var(--ease); }
.icard__label{ position:relative; }
.icard:hover{ transform:translateY(-8px); box-shadow:0 30px 50px -26px rgba(22,86,201,.7); }
.icard:hover img{ transform:scale(1.1); filter:saturate(.7) brightness(.75); }
.icard:hover::after{ background:linear-gradient(200deg, rgba(22,86,201,.25), rgba(7,20,38,.75)); }
.icard:hover .icard__ic{ background:var(--spark); color:#241400; transform:scale(1.08); }
@media (max-width:900px){ .industries__grid{ grid-template-columns:repeat(2,1fr); } }

/* =========================================================
   PROCESS
   ========================================================= */
.process{ background:#fff; padding:6rem 0; }
.process__grid{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; }
.process__line{ position:absolute; top:34px; left:12%; right:12%; height:2px; background:var(--line); z-index:0; }
.process__line i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--blue),var(--spark)); }
.pcard{
  position:relative; z-index:1; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:2rem 1.5rem; text-align:center;
  box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s;
}
.pcard:hover{ transform:translateY(-8px); box-shadow:0 30px 54px -28px rgba(10,42,94,.45); }
.pcard__no{ position:absolute; top:1rem; right:1.2rem; font-family:var(--f-mono); font-weight:700; font-size:2.4rem; color:var(--mist-2); line-height:1; }
.pcard__ic{ width:60px; height:60px; margin:0 auto 1.2rem; border-radius:16px; display:grid; place-items:center; background:linear-gradient(135deg,var(--blue),var(--blue-700)); color:#fff; font-size:1.5rem; box-shadow:0 16px 30px -14px rgba(22,86,201,.7); transition:.4s var(--ease); }
.pcard:hover .pcard__ic{ transform:translateY(-4px) rotate(-6deg); }
.pcard h3{ font-family:var(--f-display); font-weight:600; font-size:1.05rem; text-transform:uppercase; margin-bottom:.5rem; }
.pcard p{ color:var(--slate); font-size:.88rem; }
@media (max-width:900px){ .process__grid{ grid-template-columns:repeat(2,1fr); } .process__line{ display:none; } }
@media (max-width:480px){ .process__grid{ grid-template-columns:1fr; } }

/* =========================================================
   REVIEWS
   ========================================================= */
.reviews{ background:var(--mist); padding:6rem 0; }
.reviews__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.rcard{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:2.2rem 1.8rem;
  box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s;
}
.rcard:hover{ transform:translateY(-8px); box-shadow:0 34px 60px -30px rgba(10,42,94,.45); }
.rcard__quote{ position:absolute; top:.3rem; left:1.4rem; font-family:var(--f-display); font-weight:700; font-size:4.5rem; color:var(--mist-2); line-height:1; }
.rcard__stars{ display:flex; gap:.2rem; color:var(--spark); margin-bottom:1rem; position:relative; }
.rcard__stars .ic{ width:16px; height:16px; }
.rcard blockquote{ font-size:.98rem; color:var(--ink); font-style:italic; margin-bottom:1.4rem; position:relative; }
.rcard figcaption{ display:flex; align-items:center; gap:.9rem; border-top:1px solid var(--line); padding-top:1.1rem; }
.rcard__av{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--blue),var(--blue-700)); color:#fff; font-family:var(--f-display); font-weight:700; font-size:.9rem; flex:none; }
.rcard figcaption b{ display:block; font-family:var(--f-display); font-size:.95rem; color:var(--blue-900); }
.rcard figcaption small{ color:var(--slate); font-size:.8rem; }
@media (max-width:900px){ .reviews__grid{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; } }

/* =========================================================
   BIG CTA
   ========================================================= */
.cta{ position:relative; overflow:hidden; background:linear-gradient(120deg,var(--blue-900),var(--blue) 70%,var(--spark-deep)); color:#fff; padding:5rem 0; text-align:center; }
.cta__bg{
  position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;
  opacity:.32;
}
@media (max-width:768px){ .cta__bg{ opacity:.22; } }
.cta__glow{ position:absolute; inset:0; z-index:1; background:radial-gradient(600px 300px at 20% 0,rgba(255,255,255,.15),transparent 60%); }
.cta__inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.cta__title{ font-family:var(--f-display); font-weight:700; font-size:clamp(2rem,5vw,3.4rem); text-transform:uppercase; letter-spacing:-1px; margin:1rem 0 .8rem; line-height:1.05; }
.cta__title .hl{ color:var(--spark); }
.cta__lead{ max-width:56ch; color:rgba(255,255,255,.85); font-size:1.08rem; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin:2rem 0 1.5rem; }
.cta__meta{ display:flex; flex-wrap:wrap; gap:1.6rem; justify-content:center; font-size:.85rem; color:rgba(255,255,255,.8); }
.cta__meta span{ display:inline-flex; align-items:center; gap:.5rem; }
.cta__meta .ic{ color:var(--spark); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact{ background:#fff; padding:6rem 0; }
.contact__inner{ display:grid; grid-template-columns:1fr 1.05fr; gap:3.5rem; align-items:start; }
.contact__cards{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.8rem 0; }
.ccard{ display:flex; align-items:center; gap:.9rem; background:var(--mist); border:1px solid var(--line); border-radius:14px; padding:1.1rem; transition:transform .35s var(--ease), box-shadow .35s; }
.ccard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.ccard__ic{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,var(--blue),var(--blue-700)); color:#fff; font-size:1.2rem; flex:none; }
.ccard b{ display:block; font-family:var(--f-display); font-size:.95rem; color:var(--blue-900); }
.ccard small{ display:block; color:var(--slate); font-size:.82rem; }
.contact__trust{ display:flex; flex-wrap:wrap; gap:.8rem; }
.contact__trust span{ display:inline-flex; align-items:center; gap:.45rem; font-size:.82rem; font-weight:500; color:var(--slate); background:var(--mist); border:1px solid var(--line); padding:.5rem .9rem; border-radius:999px; }
.contact__trust .ic{ color:var(--blue); }

.quote{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:2.2rem; box-shadow:var(--shadow); }
.quote__title{ font-family:var(--f-display); font-weight:600; font-size:1.3rem; text-transform:uppercase; letter-spacing:-.3px; margin-bottom:1.4rem; }
.quote__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field{ display:block; margin-bottom:1rem; }
.field span{ display:block; font-family:var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:1px; color:var(--slate); margin-bottom:.4rem; }
.field i{ color:#e11d48; font-style:normal; }
.field input, .field select, .field textarea{
  width:100%; font-family:var(--f-body); font-size:.95rem; color:var(--ink);
  padding:.8rem .9rem; border:1.5px solid var(--line); border-radius:10px; background:var(--mist);
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px rgba(22,86,201,.12); }
.field textarea{ resize:vertical; }
.quote__ok{ margin-top:1rem; color:#16a34a; font-weight:600; font-size:.92rem; text-align:center; }
@media (max-width:900px){ .contact__inner{ grid-template-columns:1fr; gap:2.5rem; } }
@media (max-width:520px){ .quote__row{ grid-template-columns:1fr; } .contact__cards{ grid-template-columns:1fr; } }

.map{
  position:relative; margin-top:3.5rem; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow); background:var(--mist);
  aspect-ratio:21/9;
}
.map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(.15) contrast(1.02); }
.map__pin{
  position:absolute; left:1.2rem; bottom:1.2rem; z-index:1;
  display:flex; align-items:center; gap:.7rem; background:#fff; border-radius:14px;
  padding:.8rem 1.1rem; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s;
}
.map__pin:hover{ transform:translateY(-3px); box-shadow:0 24px 44px -20px rgba(10,42,94,.5); }
.map__pin-ic{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg,var(--blue),var(--blue-700)); color:#fff; font-size:1.1rem; flex:none; }
.map__pin b{ display:block; font-family:var(--f-display); font-size:.92rem; color:var(--blue-900); }
.map__pin small{ display:block; color:var(--slate); font-size:.78rem; }
@media (max-width:640px){
  .map{ aspect-ratio:4/5; }
  .map__pin{ left:.8rem; right:.8rem; bottom:.8rem; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ position:relative; overflow:hidden; background:var(--ink); color:rgba(255,255,255,.7); padding:4.5rem 0 0; }
.footer__bg{
  /* No blend mode here: the source photo is a dark night shot, and
     luminosity blending against the already-dark footer crushed it to
     near-invisible. Plain opacity reads much better on a dark base.
     Positive z-index (not negative) so lightweight renderers that mishandle
     stacking contexts with negative z-index don't drop the layer entirely. */
  position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;
  object-position:85% 35%; opacity:.55;
}
.footer::before{
  /* Darkens/evens out the background photo so the four columns of small
     text stay comfortably readable, fading out toward the bottom bar. */
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, var(--ink) 12%, rgba(7,20,38,.75) 50%, rgba(7,20,38,.45) 100%);
}
@media (max-width:768px){ .footer__bg{ opacity:.4; object-position:70% 35%; } }
.footer__grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.08); }
.footer__col--brand p{ font-size:.9rem; margin:1.2rem 0 1.4rem; max-width:34ch; }
.footer__social{ display:flex; gap:.6rem; }
.footer__social a{ width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.06); color:#fff; font-size:1.1rem; transition:.3s var(--ease); }
.footer__social a:hover{ background:var(--blue); transform:translateY(-3px); }
.footer__col h4{ font-family:var(--f-display); font-weight:600; font-size:1rem; text-transform:uppercase; letter-spacing:.5px; color:#fff; margin-bottom:1.2rem; position:relative; padding-bottom:.6rem; }
.footer__col h4::after{ content:""; position:absolute; left:0; bottom:0; width:32px; height:2px; background:var(--spark); }
.footer__col > a{ display:block; font-size:.9rem; padding:.35rem 0; transition:color .25s, padding-left .25s; }
.footer__col > a:hover{ color:var(--volt); padding-left:6px; }
.footer__contact{ display:flex; gap:.5rem; font-size:.9rem; margin-bottom:.6rem; }
.footer__contact .ic, .footer__col a .ic{ color:var(--spark); flex:none; }
.footer__col a .ic{ margin-right:.5rem; }
.footer__bar{ position:relative; z-index:2; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; padding:1.4rem 0; font-size:.82rem; color:rgba(255,255,255,.5); }
.footer__credit{ position:relative; z-index:2; padding:0 0 1.4rem; font-size:.68rem; line-height:1.6; color:rgba(255,255,255,.3); border-top:1px solid rgba(255,255,255,.06); padding-top:1rem; }
.footer__legal a{ transition:color .25s; }
.footer__legal a:hover{ color:var(--volt); }
@media (max-width:900px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer__grid{ grid-template-columns:1fr; } }

/* =========================================================
   FLOATING ACTIONS
   ========================================================= */
.fab{ position:fixed; right:22px; z-index:55; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; font-size:1.4rem; color:#fff; box-shadow:0 16px 34px -12px rgba(0,0,0,.5); transition:transform .35s var(--ease), opacity .35s; }
.fab--wa{ bottom:86px; background:#22c15e; }
.fab--wa::before{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #22c15e; animation:ring 2s infinite; }
@keyframes ring{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.6); opacity:0; } }
.fab--top{ bottom:22px; background:var(--blue); font-size:1.2rem; opacity:0; pointer-events:none; transform:translateY(12px); }
.fab--top.is-show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.fab:hover{ transform:translateY(-4px) scale(1.05); }

/* Mobile sticky quick-contact bar — hidden by default (desktop keeps the
   floating WhatsApp bubble instead); takes over below 768px where a single
   small FAB is easy to miss and most visitors want to call or WhatsApp
   immediately rather than browse further. */
.mobilebar{ display:none; }
@media (max-width:768px){
  .fab--wa{ display:none; } /* replaced by the bar's WhatsApp button */
  .fab--top{ bottom:calc(66px + env(safe-area-inset-bottom, 0px)); }

  .mobilebar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:56;
    background:#fff; border-top:1px solid var(--line);
    box-shadow:0 -12px 30px -16px rgba(10,42,94,.35);
    padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom, 0px));
    gap:.6rem;
  }
  .mobilebar__btn{
    flex:1; display:flex; align-items:center; justify-content:center; gap:.5rem;
    font-family:var(--f-display); font-weight:600; font-size:.92rem;
    padding:.75rem 1rem; border-radius:12px; transition:transform .2s var(--ease);
  }
  .mobilebar__btn:active{ transform:scale(.96); }
  .mobilebar__btn--call{ background:var(--blue); color:#fff; }
  .mobilebar__btn--wa{ background:#22c15e; color:#fff; }
}
/* Reserve space so the fixed bar never covers the footer's last row of links. */
@media (max-width:768px){
  body{ padding-bottom:calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* =========================================================
   REVEAL (JS-driven). Fallback: visible if no JS.
   ========================================================= */
.reveal, [data-reveal]{ will-change:transform,opacity; }
.js .reveal, .js [data-reveal]{ opacity:0; }

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .js .reveal, .js [data-reveal]{ opacity:1 !important; transform:none !important; }
  .ticker__track{ animation:none; }
}