/* ==========================================================================
   MAURYA LOGISTICS — Design System
   Pharmaceutical Cold Chain Logistics
   Brand: Navy #14315F · Red #E01B22 · Amber #F5A93F
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand */
  --navy-900: #0b1e3d;
  --navy-800: #102a52;
  --navy-700: #14315f;
  --navy-600: #1b3a6b;
  --navy-500: #24528f;
  --navy-400: #3a6dad;
  --navy-300: #7ba0cc;
  --navy-100: #dce7f4;
  --navy-50:  #eef4fb;

  --red-600: #b8151b;
  --red-500: #e01b22;
  --red-400: #ef4a50;
  --red-50:  #fdeced;

  --amber-500: #f5a93f;
  --amber-400: #fbbf5c;
  --amber-50:  #fef6e9;

  /* Cold-chain accent (frost) */
  --frost-500: #17a2c4;
  --frost-400: #3dbfdd;
  --frost-50:  #e8f7fb;

  --green-500: #16a34a;
  --green-50:  #eafaf0;

  /* Neutrals */
  --ink:      #0f1621;
  --ink-soft: #33415a;
  --muted:    #64748b;
  --muted-2:  #94a3b8;
  --line:     #e2e8f0;
  --line-2:   #eef2f7;
  --surface:  #ffffff;
  --surface-2:#f6f8fc;
  --surface-3:#eef2f8;

  /* Type */
  --font-display: 'Archivo', 'Arial Narrow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale */
  /* Capped so "THE MEDICINE DOES." stays bold without spilling into an awkward wrap. */
  --fs-hero:   clamp(2.25rem, 1.08rem + 4vw, 4.05rem);
  --fs-h1:     clamp(2.1rem, 1.4rem + 3vw, 3.9rem);
  --fs-h2:     clamp(1.65rem, 1.2rem + 1.9vw, 2.7rem);
  --fs-h3:     clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-h4:     clamp(1.02rem, 0.97rem + 0.25vw, 1.15rem);
  --fs-lead:   clamp(1.04rem, 0.98rem + 0.4vw, 1.25rem);
  --fs-body:   1rem;
  --fs-sm:     0.9rem;
  --fs-xs:     0.8rem;
  --fs-eyebrow:0.78rem;

  /* Space */
  --sp-section: clamp(4rem, 2.5rem + 6vw, 8rem);
  --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 3rem);
  --maxw: 1240px;
  --maxw-narrow: 820px;

  /* Radius / shadow */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --sh-sm: 0 1px 2px rgba(15,22,33,.06), 0 2px 6px rgba(15,22,33,.05);
  --sh:    0 4px 12px -2px rgba(15,22,33,.08), 0 12px 32px -8px rgba(15,22,33,.10);
  --sh-lg: 0 8px 24px -6px rgba(15,22,33,.12), 0 28px 64px -16px rgba(15,22,33,.18);
  --sh-navy: 0 12px 34px -10px rgba(20,49,95,.45);

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --header-h: 76px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.68;
  color: var(--ink-soft);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }
:focus-visible {
  outline: 3px solid var(--frost-400);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection { background: var(--navy-700); color: #fff; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--navy-700);
  line-height: 1.06;
  letter-spacing: 0;
  font-weight: 800;
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: 0; }
h4 { font-size: var(--fs-h4); letter-spacing: 0; line-height: 1.3; }
/* Utility: keeps h4 sizing on a heading promoted to h3 for a correct document outline. */
.h4 { font-size: var(--fs-h4); letter-spacing: 0; line-height: 1.3; }
p { text-wrap: pretty; }

/* ---------- 3. Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: var(--maxw-narrow); }
.section { padding-block: var(--sp-section); position: relative; }
.section--tight { padding-block: clamp(2.6rem, 1.8rem + 3.4vw, 4.6rem); }
.section--navy { background: var(--navy-700); color: #cfdcec; }
.section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--soft { background: var(--surface-2); }
.section--frost {
  background:
    radial-gradient(1100px 480px at 10% -10%, var(--frost-50), transparent 60%),
    radial-gradient(900px 420px at 92% 8%, var(--navy-50), transparent 62%),
    var(--surface);
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--navy-700); color: #fff;
  padding: 10px 18px; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600; font-size: var(--fs-sm);
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 0; }

/* Grids */
.grid { display: grid; gap: clamp(1.1rem, .7rem + 1.4vw, 2rem); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-auto { grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); }
.split {
  display: grid; align-items: center;
  gap: clamp(1.8rem, 1rem + 3.4vw, 4.2rem);
  /* minmax(0,...) not 1fr: a bare 1fr is minmax(auto,1fr), whose auto minimum is
     the item's min-content. One fixed-width child (a seal image, a table) then
     inflates the track past the container and the page scrolls sideways. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.split--wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.split--wide-right { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
@media (max-width: 900px) {
  .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); }
  .split, .split--wide-left, .split--wide-right { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
}

/* ---------- 4. Type helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red-500);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px;
  background: var(--red-500); border-radius: 2px;
}
.section--navy .eyebrow { color: var(--amber-500); }
.section--navy .eyebrow::before { background: var(--amber-500); }

.lead { font-size: var(--fs-lead); color: var(--ink-soft); line-height: 1.6; }
.section--navy .lead, .section--navy p { color: #c3d2e6; }
.muted { color: var(--muted); }
.center { text-align: center; }
.section-head { max-width: 720px; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.4rem); }
.section-head.center { margin-inline: auto; }
.section-head.center .eyebrow { justify-content: center; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.6rem; } .mt-4 { margin-top: 2.4rem; }
.mt-5 { margin-top: 3.4rem; }
.stack > * + * { margin-top: 1.05rem; }

/* ---------- 5. Buttons ---------- */
.btn {
  --btn-bg: var(--red-500);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .92rem 1.7rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid transparent; border-radius: 999px;
  font-weight: 700; font-size: var(--fs-sm); letter-spacing: .012em;
  cursor: pointer; white-space: nowrap;
  transition: transform .16s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s, border-color .2s;
  box-shadow: 0 10px 24px -10px rgba(224,27,34,.7);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(224,27,34,.68); }
.btn:active { transform: translateY(0); }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn--navy { --btn-bg: var(--navy-700); box-shadow: var(--sh-navy); }
.btn--navy:hover { background: var(--navy-600); box-shadow: 0 14px 30px -10px rgba(20,49,95,.55); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--navy-700);
  border-color: var(--navy-100); box-shadow: none;
}
.btn--ghost:hover { background: var(--navy-50); border-color: var(--navy-300); box-shadow: none; }
.btn--outline-light {
  --btn-bg: transparent; --btn-fg: #fff;
  border-color: rgba(255,255,255,.38); box-shadow: none;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}
.btn--outline-light:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.68); box-shadow: none; }
.btn--white { --btn-bg: #fff; --btn-fg: var(--navy-700); box-shadow: 0 8px 22px -8px rgba(0,0,0,.35); }
.btn--white:hover { background: var(--navy-50); }
.btn--frost { --btn-bg: var(--frost-500); box-shadow: 0 6px 18px -6px rgba(23,162,196,.55); }
.btn--frost:hover { background: var(--frost-400); box-shadow: 0 12px 26px -8px rgba(23,162,196,.6); }
.btn--lg { padding: 1.06rem 2.1rem; font-size: 1rem; }
.hero .btn--lg {
  min-height: 54px;
  box-shadow: 0 18px 34px -16px rgba(224,27,34,.84), inset 0 1px 0 rgba(255,255,255,.18);
}
.hero .btn--lg:hover { box-shadow: 0 22px 40px -16px rgba(224,27,34,.9), inset 0 1px 0 rgba(255,255,255,.2); }
.btn--sm { padding: .62rem 1.15rem; font-size: var(--fs-xs); }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.btn-row.center { justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; font-size: var(--fs-sm); color: var(--red-500);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
.section--navy .link-arrow { color: var(--amber-500); }

/* ---------- 6. Header ---------- */
.header {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(226,232,240,.78);
  transition: box-shadow .25s, border-color .25s, background .25s;
}
.header.is-stuck { box-shadow: 0 4px 22px -8px rgba(15,22,33,.16); border-bottom-color: var(--line); }
.header__bar {
  height: var(--header-h);
  display: flex; align-items: center; gap: 1.4rem;
}
.brand { display: flex; align-items: center; gap: .7rem; flex: none; margin-right: auto; }
.brand img { height: 42px; width: auto; }
/* The <picture> only carries the WebP <source>; `contents` keeps the <img> itself
   as the flex item, so wrapping it changed no layout. */
.brand picture, .footer picture { display: contents; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.02rem;
  color: var(--navy-700); letter-spacing: -.01em;
}
.brand__tag {
  font-size: .58rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--red-500); margin-top: 3px;
}
@media (max-width: 400px) { .brand__text { display: none; } }

.nav { display: flex; align-items: center; gap: .15rem; }
.nav a {
  padding: .55rem .78rem; border-radius: var(--r-sm);
  font-size: .88rem; font-weight: 600; color: var(--ink-soft);
  transition: color .18s, background .18s; position: relative;
}
.nav a:hover { color: var(--navy-700); background: rgba(220,231,244,.72); }
.nav a[aria-current="page"] { color: var(--navy-700); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: .78rem; right: .78rem; bottom: .18rem;
  height: 2.5px; background: var(--red-500); border-radius: 2px;
}
.header__cta { display: flex; align-items: center; gap: .6rem; flex: none; }
/* The nav carries its own CTA for the mobile drawer; suppress it on desktop
   where .header__cta already provides one. */
@media (min-width: 1025px) { .nav > .btn { display: none; } }

/* Call button in header */
.header__tel {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: .82rem; letter-spacing: .01em;
  color: var(--navy-700);
  padding: .52rem 1.1rem .52rem .85rem;
  border: 2px solid var(--navy-700);
  border-radius: 999px;          /* pill shape */
  background: transparent;
  transition: background .18s, color .18s, border-color .18s;
  white-space: nowrap;
}
.header__tel svg {
  width: 15px; height: 15px; flex-shrink: 0;
  color: var(--red-500);
  transition: color .18s;
}
.header__tel:hover {
  background: var(--navy-700);
  color: #fff;
  border-color: var(--navy-700);
}
.header__tel:hover svg { color: #fff; }

/* On ≤1150px: hide text, show icon-only pill */
@media (max-width: 1150px) {
  .header__tel { padding: .52rem .7rem; border-radius: 50%; }
  .header__tel span { display: none; }
}

.burger {
  display: none; width: 44px; height: 44px; flex: none;
  background: var(--navy-50); border: 1px solid var(--line);
  border-radius: 11px; cursor: pointer;
  align-items: center; justify-content: center;
}
.burger span {
  display: block; width: 19px; height: 2px; background: var(--navy-700);
  border-radius: 2px; position: relative;
  transition: transform .28s var(--ease), background .2s;
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 19px; height: 2px;
  background: var(--navy-700); border-radius: 2px;
  transition: transform .28s var(--ease), top .2s;
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
body.nav-open .burger span { background: transparent; }
body.nav-open .burger span::before { top: 0; transform: rotate(45deg); }
body.nav-open .burger span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1024px) {
  .burger { display: flex; }
  .header__cta .btn { display: none; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; padding: .8rem var(--gutter) 1.6rem;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 40px -16px rgba(15,22,33,.2);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-14px); opacity: 0; pointer-events: none;
    transition: transform .3s var(--ease), opacity .25s;
  }
  body.nav-open .nav { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav a { padding: .95rem .6rem; font-size: 1.02rem; border-bottom: 1px solid var(--line-2); border-radius: 0; }
  .nav a[aria-current="page"]::after { left: .6rem; right: auto; width: 22px; bottom: .55rem; }
  .nav .btn { margin-top: 1rem; width: 100%; }
}

/* ---------- 7. Hero ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + clamp(1.65rem, 1rem + 2.4vw, 3.6rem));
  padding-bottom: clamp(2.2rem, 1.5rem + 3vw, 4.6rem);
  background: var(--navy-900); color: #fff; overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
}
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 58%;
  /* The photograph is the real fleet on a real dock, so it is worth actually seeing.
     No brightness dimming — contrast and saturation instead, which deepen the shadows
     the scrim then builds on rather than flattening the whole frame toward grey. */
  filter: contrast(1.16) saturate(1.14);
}

/* The scrim lives on .hero, not inside .hero__bg — .hero__bg carries [data-parallax],
   so a pseudo-element in there would be stretched by its scale(1.14) and would slide
   up to 6% of the hero's height on scroll, dragging the dark band off the headline.
   Out here it holds still while the photograph moves underneath it.

   It is graded rather than flat, and every stop is measured: the lightest set that
   still holds the h1 and the lead above 4.5:1 against the brightest pixel behind them
   (worst case, not average). Below 1200px the hero stacks to ~1450px tall and the copy
   runs the full width, so the photo can only be uncovered in the band above the
   headline; from 44% down it deepens to near-solid navy, and the buttons, telemetry
   panel and stat tiles sit on clean ground. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(6,16,34,.20) 0%,
    rgba(6,16,34,.28) 10%,
    rgba(6,17,36,.46) 30%,
    rgba(7,19,40,.70) 58%,
    rgba(8,21,44,.80) 100%);
}
@media (min-width: 1200px) {
  /* Two columns, and the hero collapses to ~950px tall: the copy takes the left half,
     the telemetry panel the right. The scrim can shrink to an ellipse behind the text
     and leave the fleet nearly untouched — measured at ~2.4x the photo detail of the
     stacked treatment above, at the same headline contrast. */
  .hero::after {
    background:
      linear-gradient(100deg,
        rgba(6,17,36,.20) 0%, rgba(7,20,42,.18) 28%, rgba(10,28,58,.06) 58%, rgba(10,28,58,.02) 100%),
      linear-gradient(180deg, rgba(8,22,46,.26), rgba(10,28,58,0) 36%, rgba(8,22,46,.50));
  }
}
.hero__glow {
  position: absolute; z-index: -1; pointer-events: none;
  width: 620px; height: 620px; right: -140px; top: -180px;
  /* Lighter than it was: it now sits over an exposed photograph rather than a
     near-black wash, where the old .3 tinted the trucks visibly cyan. */
  background: radial-gradient(circle, rgba(23,162,196,.2), transparent 66%);
  filter: blur(10px);
}
/* Receding perspective floor — reads as a road surface running away under the fleet. */
.hero__floor {
  position: absolute; z-index: -1; pointer-events: none;
  left: 50%; bottom: -30px; width: 190%; height: 320px;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to top, #000, transparent 82%);
          mask-image: linear-gradient(to top, #000, transparent 82%);
  opacity: .5;
}
.hero__floor span {
  position: absolute; inset: 0; display: block;
  background:
    repeating-linear-gradient(to right, rgba(160,200,230,.28) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(to bottom, rgba(160,200,230,.22) 0 1px, transparent 1px 60px);
}

/* Two columns from 1040px up: copy left, telemetry panel right. Below that the panel
   drops under the copy, and the headline line-breaks relax to natural wrapping. */
.hero__inner {
  position: relative;
  display: grid; align-items: center;
  gap: clamp(2rem, 1.2rem + 3vw, 3.1rem);
}
@media (min-width: 1200px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 344px);
    align-items: start;
  }
}
.hero__copy {
  position: relative;
  z-index: 0;
  min-width: 0;
}
.hero__copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2.1rem -2.8rem -2.3rem -1.7rem;
  background: radial-gradient(ellipse at 44% 44%,
    rgba(4,13,28,.70) 0%,
    rgba(4,13,28,.58) 46%,
    rgba(4,13,28,.24) 76%,
    rgba(4,13,28,0) 100%);
  pointer-events: none;
}
.hero h1 {
  color: #fff; font-size: var(--fs-hero);
  letter-spacing: 0; line-height: .92; margin-bottom: 1.05rem;
  text-shadow: 0 8px 30px rgba(0,0,0,.42);
}
/* Explicit line blocks so the headline breaks where it was written to break, instead of
   wherever the viewport happens to run out. */
.hero h1 .hero__line { display: block; }
.hero h1 em {
  font-style: normal; color: var(--amber-500);
  display: block;
  white-space: nowrap;
  text-shadow: 0 8px 28px rgba(245,169,63,.22), 0 8px 30px rgba(0,0,0,.42);
}
@media (max-width: 560px) {
  .hero h1 .hero__line { display: inline; }
  .hero h1 .hero__line + .hero__line::before { content: " "; }
  /* Slightly tighter than --fs-hero so the uppercase amber payoff line stays on one row
     at the narrowest mobile width. Broken across two rows it loses the whole point. */
  .hero h1 { font-size: clamp(1.55rem, .68rem + 4.5vw, 2.5rem); }
}
.hero__lead {
  font-size: clamp(1rem, .96rem + .36vw, 1.18rem);
  color: #d7e5f6; max-width: 39ch; line-height: 1.52; margin-bottom: 1.55rem;
}
.hero__lead strong { color: #fff; font-weight: 700; }
.hero__badges {
  display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.35rem;
}
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .48rem .95rem;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 800; color: #f3f7fc;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 26px -18px rgba(0,0,0,.75);
  backdrop-filter: blur(10px);
}
.chip svg { width: 14px; height: 14px; color: var(--amber-500); flex: none; }
.chip--light {
  background: var(--navy-50); border-color: var(--navy-100); color: var(--navy-700);
}
.chip--light svg { color: var(--red-500); }

/* Hero telemetry panel — an honest mock-up of the readout shared with clients.
   The 3D tilt lives in fx3d.css; without it this is still a legible glass card. */
.hero__panel { position: relative; min-width: 0; }
@media (min-width: 1200px) { .hero__panel { margin-top: 3.05rem; } }
@media (max-width: 1199px) { .hero__panel { max-width: 460px; } }
.tpanel {
  background: linear-gradient(165deg, rgba(19,44,84,.9), rgba(8,22,46,.92));
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-lg);
  padding: 1.1rem 1.15rem 1rem;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(61,191,221,.12), inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
}
.tpanel__bar {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding-bottom: .85rem; margin-bottom: .3rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.tpanel__live {
  display: inline-flex; align-items: center; gap: .42rem;
  font-size: var(--fs-xs); font-weight: 700; color: #fff;
  letter-spacing: .05em; text-transform: uppercase;
}
.tpanel__live i {
  width: 8px; height: 8px; border-radius: 50%; background: #35d07f; flex: none;
  box-shadow: 0 0 0 0 rgba(53,208,127,.65);
  animation: tpanel-pulse 1.9s var(--ease) infinite;
}
@keyframes tpanel-pulse {
  70%  { box-shadow: 0 0 0 9px rgba(53,208,127,0); }
  100% { box-shadow: 0 0 0 0 rgba(53,208,127,0); }
}
.tpanel__id { font-size: var(--fs-xs); color: #93a9c6; font-weight: 600; }
.tpanel__route { width: 100%; height: auto; margin-top: .55rem; }
.tpanel__ends {
  display: flex; justify-content: space-between;
  font-size: var(--fs-xs); font-weight: 600; color: #b6c8de; margin-top: -.1rem;
}
.tpanel__chart { width: 100%; height: auto; margin-top: .7rem; }
.tpanel__rows {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  margin-top: .9rem;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.11); border-radius: var(--r-sm);
  overflow: hidden;
}
.tpanel__rows > div { background: rgba(8,22,46,.6); padding: .6rem .7rem; }
.tpanel__rows dt {
  font-size: 10px; font-weight: 700; color: #8ba2c1;
  letter-spacing: .07em; text-transform: uppercase;
}
.tpanel__rows dd {
  font-family: var(--font-display); font-weight: 800; color: #fff;
  font-size: .95rem; margin-top: .18rem; font-variant-numeric: tabular-nums;
}
.tpanel__rows dd.ok { color: #4fd99a; }
.tpanel__note {
  font-size: 10.5px; color: #7f95b3; line-height: 1.45; margin-top: .7rem;
}

/* Hero stat strip */
.hero__stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; margin-top: clamp(1.8rem, 1.1rem + 2.2vw, 3rem);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg); overflow: hidden;
}
/* 3-stat variant: centred strip, equal thirds */
.hero__stats--3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 680px;
  margin-inline: auto;
  background: transparent;  /* border drawn by each card's ::before spin */
  border: none;
  gap: 2px;
}

/* ── Moving border-light effect ─────────────────────────────────────── */

/* Each card: stacking context + clip the spinning beam inside */
.hero__stats--3 .hero__stat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent;  /* fill is on ::after */
  border-radius: var(--r-lg);
}

/* Spinning conic beam — side cards: icy-white/blue */
.hero__stats--3 .hero__stat::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 220%; height: 220%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 70deg,
    rgba(155,200,255,.5)  70deg 80deg,
    rgba(200,230,255,.95) 80deg 86deg,
    rgba(255,255,255,1)   86deg 90deg,
    rgba(200,230,255,.95) 90deg 96deg,
    rgba(155,200,255,.5)  96deg 106deg,
    transparent 106deg 360deg
  );
  transform: translate(-50%,-50%) rotate(0deg);
  animation: hero-stat-spin 4.5s linear infinite;
  z-index: 0;
}

/* Middle card beam: amber / gold */
.hero__stats--3 .hero__stat--mid::before {
  background: conic-gradient(
    from 0deg,
    transparent 0deg 70deg,
    rgba(245,158,11,.55)  70deg 80deg,
    rgba(251,191,36,.95)  80deg 86deg,
    rgba(255,230,100,1)   86deg 90deg,
    rgba(251,191,36,.95)  90deg 96deg,
    rgba(245,158,11,.55)  96deg 106deg,
    transparent 106deg 360deg
  );
  animation-duration: 3.2s;   /* slightly faster, feels distinct */
}

/* Card fill — sits above the beam, below the text */
.hero__stats--3 .hero__stat::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  background: rgba(11,30,61,.72);
  backdrop-filter: blur(8px);
  border-radius: calc(var(--r-lg) - 1.5px);
  z-index: 1;
}

/* Text must float above both layers */
.hero__stats--3 .hero__stat b,
.hero__stats--3 .hero__stat span {
  position: relative;
  z-index: 2;
}

@keyframes hero-stat-spin {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}

/* Respect user's reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .hero__stats--3 .hero__stat::before { animation: none; }
}
/* ─────────────────────────────────────────────────────────────────── */

.hero__stat { background: rgba(11,30,61,.55); padding: 1.3rem 1.2rem; backdrop-filter: blur(8px); }
.hero__stat b {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem);
  color: #fff; line-height: 1; letter-spacing: -.03em;
}
.hero__stat span {
  display: block; margin-top: .45rem;
  font-size: var(--fs-xs); font-weight: 600; color: #9fb4d0;
  letter-spacing: .04em; text-transform: uppercase;
}
@media (max-width: 780px) { .hero__stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 780px) { .hero__stats--3 { grid-template-columns: repeat(3, 1fr); max-width: 100%; } }

/* Page hero (inner pages) */
.phero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(2.2rem, 1.4rem + 3.4vw, 4.2rem));
  padding-bottom: clamp(2.2rem, 1.6rem + 3vw, 4rem);
  background: var(--navy-700); color: #fff;
}
.phero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(760px 320px at 88% 0%, rgba(23,162,196,.28), transparent 65%),
    radial-gradient(600px 300px at 4% 110%, rgba(224,27,34,.22), transparent 62%);
}
.phero__grid {
  position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.85), transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.85), transparent 85%);
}
.phero h1 { color: #fff; max-width: 900px; }
.phero .lead { color: #bfd0e6; max-width: 660px; margin-top: 1.1rem; }
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  font-size: var(--fs-xs); color: #8ea7c6; margin-bottom: 1.1rem;
}
.crumbs a:hover { color: #fff; }
.crumbs svg { width: 12px; height: 12px; opacity: .6; }
.crumbs [aria-current] { color: var(--amber-500); font-weight: 600; }

/* ---------- 8. Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.4rem, 1.1rem + .9vw, 2rem);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s;
  position: relative; overflow: hidden;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--navy-100); }
.card__icon {
  width: 54px; height: 54px; border-radius: 15px;
  display: grid; place-items: center; margin-bottom: 1.15rem;
  background: linear-gradient(150deg, var(--navy-50), var(--frost-50));
  border: 1px solid var(--navy-100);
  color: var(--navy-700); flex: none;
}
.card__icon svg { width: 27px; height: 27px; }
.card__icon--red { background: linear-gradient(150deg, var(--red-50), #fff4f0); border-color: #fbd5d7; color: var(--red-500); }
.card__icon--amber { background: linear-gradient(150deg, var(--amber-50), #fffaf0); border-color: #fae2bd; color: #d98a1a; }
.card__icon--frost { background: linear-gradient(150deg, var(--frost-50), #f0fbff); border-color: #c3e9f3; color: var(--frost-500); }
.card__icon--green { background: linear-gradient(150deg, var(--green-50), #f2fdf6); border-color: #c4ecd3; color: var(--green-500); }
.card h3 { margin-bottom: .55rem; }
.card p { font-size: var(--fs-sm); line-height: 1.62; color: var(--ink-soft); }
.card__num {
  position: absolute; top: .7rem; right: 1.1rem;
  font-family: var(--font-display); font-weight: 800; font-size: 2.6rem;
  color: var(--navy-50); line-height: 1; letter-spacing: -.04em;
  pointer-events: none; transition: color .28s;
}
.card:hover .card__num { color: var(--navy-100); }

.card--navy {
  background: linear-gradient(155deg, var(--navy-700), var(--navy-900));
  border-color: rgba(255,255,255,.1); color: #c3d2e6;
}
.card--navy h3, .card--navy h4 { color: #fff; }
.card--navy p { color: #b3c6de; }
.card--navy .card__icon {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); color: var(--amber-500);
}
.card--flush { padding: 0; }
.card--flush .card__body { padding: clamp(1.3rem, 1rem + .8vw, 1.8rem); }
.card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--surface-3); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__tag {
  position: absolute; left: .85rem; top: .85rem; z-index: 2;
  padding: .3rem .7rem; border-radius: 999px;
  background: rgba(11,30,61,.86); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  backdrop-filter: blur(4px);
}

/* Feature list */
.flist { display: grid; gap: 1.05rem; }
.flist li { display: flex; gap: .85rem; align-items: flex-start; }
.flist .tick {
  width: 25px; height: 25px; border-radius: 50%; flex: none; margin-top: 2px;
  display: grid; place-items: center;
  background: var(--green-50); color: var(--green-500);
  border: 1px solid #c4ecd3;
}
.flist .tick svg { width: 13px; height: 13px; }
.flist strong { display: block; color: var(--navy-700); font-size: var(--fs-h4); font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; }
.flist p { font-size: var(--fs-sm); margin-top: .15rem; }
.section--navy .flist strong { color: #fff; }
.section--navy .flist .tick { background: rgba(245,169,63,.16); border-color: rgba(245,169,63,.35); color: var(--amber-500); }

/* ---------- 9. Media / figures ---------- */
.figure { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); background: var(--surface-3); }
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure--tall { aspect-ratio: 4/5; }
.figure--wide { aspect-ratio: 16/9; }
.figure--square { aspect-ratio: 1/1; }
.figure__caption {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  padding: 2.4rem 1.5rem 1.2rem;
  background: linear-gradient(transparent, rgba(11,30,61,.9));
  color: #fff; font-size: var(--fs-sm); font-weight: 600;
}
.media-stack { position: relative; }
.media-stack__badge {
  position: absolute; z-index: 3; right: -14px; bottom: -18px;
  background: #fff; border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); padding: 1rem 1.25rem;
  display: flex; align-items: center; gap: .85rem;
  border: 1px solid var(--line);
}
.media-stack__badge b {
  font-family: var(--font-display); font-size: 1.65rem; font-weight: 800;
  color: var(--navy-700); line-height: 1; display: block; letter-spacing: -.03em;
}
.media-stack__badge span { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; display: block; margin-top: 2px; }
.media-stack__badge svg { width: 30px; height: 30px; color: var(--red-500); flex: none; }
@media (max-width: 560px) { .media-stack__badge { right: 8px; bottom: -14px; padding: .8rem 1rem; } }

/* ---------- 10. Temperature zones ---------- */
.temps { display: grid; gap: clamp(1rem, .7rem + 1vw, 1.6rem); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .temps { grid-template-columns: 1fr; } }
.temp {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: 1.6rem;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.temp:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.temp::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: var(--zone, var(--frost-500));
}
.temp__head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.15rem; }
.temp__dial { width: 52px; height: 52px; flex: none; }
.temp__label {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.temp__range {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.4rem, 1.15rem + .9vw, 1.9rem);
  color: var(--navy-700); line-height: 1; letter-spacing: -.03em; margin-top: .2rem;
}
.temp h3 { font-size: var(--fs-h4); margin-bottom: .5rem; }
.temp p { font-size: var(--fs-sm); }
.temp__items { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.temp__items li {
  font-size: .74rem; font-weight: 600; padding: .3rem .65rem;
  border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--line); color: var(--ink-soft);
}
.temp--ambient { --zone: var(--amber-500); }
.temp--chilled { --zone: var(--frost-500); }
.temp--frozen  { --zone: var(--navy-500); }

/* ---------- 11. Fleet table ---------- */
.table-wrap {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--surface); box-shadow: var(--sh-sm);
}
.table-scroll { overflow-x: auto; }
table.data { min-width: 620px; }
table.data caption { text-align: left; padding: 1.15rem 1.3rem .1rem; font-weight: 700; color: var(--navy-700); font-family: var(--font-display); }
table.data th, table.data td {
  padding: 1rem 1.3rem; text-align: left; font-size: var(--fs-sm);
  border-bottom: 1px solid var(--line-2);
}
table.data thead th {
  background: var(--navy-700); color: #fff;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: none; white-space: nowrap;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr { transition: background .18s; }
table.data tbody tr:hover { background: var(--navy-50); }
table.data td:first-child { font-weight: 700; color: var(--navy-700); }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--navy-700); }
table.data tfoot td {
  background: var(--surface-2); font-weight: 800; color: var(--navy-700);
  font-family: var(--font-display); border-top: 2px solid var(--navy-100);
}
.pill {
  display: inline-block; padding: .2rem .6rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  background: var(--frost-50); color: var(--frost-500); border: 1px solid #c3e9f3;
}

/* ---------- 12. Client logos ---------- */
.logo-grid {
  display: grid; gap: 1px;
  grid-template-columns: repeat(5, 1fr);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
@media (max-width: 900px) { .logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .logo-grid { grid-template-columns: repeat(2, 1fr); } }
.logo-cell {
  background: #fff; aspect-ratio: 5/3;
  display: grid; place-items: center; padding: 1.15rem;
  transition: background .25s;
}
/* Client marks are shown in their own brand colours. They were desaturated
   here originally, which reads as tidy on a logo wall but quietly weakens the
   strongest proof on the site — a recognisable logo is only recognisable in
   its own colours. Hover adds a lift, not a colour change. */
.logo-cell img {
  max-height: 58px; width: auto; max-width: 100%;
  object-fit: contain;
  transition: transform .3s var(--ease), filter .3s var(--ease);
}
.logo-cell:hover { background: var(--navy-50); }
.logo-cell:hover img { transform: scale(1.06); filter: drop-shadow(0 6px 12px rgba(11,30,61,.18)); }

/* Marquee */
.marquee { overflow: hidden; position: relative; padding-block: 1rem; --mq-dur: 42s; }
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(60px, 10vw, 140px); z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--surface-2) 30%, transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--surface-2) 30%, transparent); }
.marquee__track { display: flex; width: max-content; animation: mq var(--mq-dur) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  flex: none; width: clamp(140px, 16vw, 195px); height: 96px;
  display: grid; place-items: center; padding: 0 1.4rem;
}
.marquee__item img {
  max-height: 52px; max-width: 100%; width: auto; object-fit: contain;
  transition: transform .45s cubic-bezier(.34,1.4,.64,1),
              filter .35s ease,
              opacity .35s ease;
  opacity: .72;
  filter: grayscale(20%);
}
/* Hover fallback (when JS spotlight not active) */
.marquee__item:hover img { transform: scale(1.1); opacity: 1; filter: grayscale(0%); }

/* JS spotlight: logo nearest screen center gets zoom + glow */
.marquee.mq--js .marquee__item.is-spotlight img {
  transform: scale(1.28);
  opacity: 1;
  filter: grayscale(0%) drop-shadow(0 4px 18px rgba(0,0,0,.18));
}
/* Non-spotlight: fade slightly more when JS active */
.marquee.mq--js .marquee__item:not(.is-spotlight) img {
  opacity: .58;
}
@keyframes mq { to { transform: translateX(-50%); } }

/* ---------- 13. Timeline ---------- */
.timeline { position: relative; display: grid; gap: 0; }
.timeline::before {
  content: ""; position: absolute; left: 19px; top: 8px; bottom: 22px; width: 2px;
  background: linear-gradient(var(--red-500), var(--navy-400), var(--frost-400));
  border-radius: 2px;
}
.tl-item { position: relative; padding: 0 0 2.1rem 3.5rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute; left: 0; top: 2px;
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: 2px solid var(--navy-100);
  display: grid; place-items: center; color: var(--navy-700);
  box-shadow: 0 3px 10px -3px rgba(15,22,33,.14);
}
.tl-dot svg { width: 18px; height: 18px; }
.tl-year {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xs);
  letter-spacing: .12em; color: var(--red-500); text-transform: uppercase;
}
.tl-item :is(h3, h4) { margin: .3rem 0 .4rem; }
.tl-item p { font-size: var(--fs-sm); }
.section--navy .tl-dot { background: var(--navy-800); border-color: rgba(255,255,255,.22); color: var(--amber-500); }
.section--navy .timeline::before { background: linear-gradient(var(--amber-500), var(--frost-400), rgba(255,255,255,.2)); }
.section--navy .tl-year { color: var(--amber-500); }
.card--navy .tl-dot { background: var(--navy-800); border-color: rgba(255,255,255,.22); color: var(--amber-500); }
.card--navy .timeline::before { background: linear-gradient(var(--amber-500), var(--frost-400), rgba(255,255,255,.2)); }
.card--navy .tl-year { color: var(--amber-500); }

/* ---------- 14. Process / steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, .6rem + 1.4vw, 1.8rem); counter-reset: s; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: 2.9rem; }
.step::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--navy-700); color: #fff;
  box-shadow: var(--sh-navy);
}
.step::after {
  content: ""; position: absolute; top: 20px; left: 54px; right: -18px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--navy-100) 0 7px, transparent 7px 14px);
}
.step:last-child::after { display: none; }
@media (max-width: 900px) { .step:nth-child(2n)::after { display: none; } }
@media (max-width: 520px) { .step::after { display: none; } }
.step :is(h3, h4) { margin-bottom: .4rem; }
.step p { font-size: var(--fs-sm); }
.section--navy .step::before { background: var(--amber-500); color: var(--navy-900); box-shadow: 0 8px 20px -8px rgba(245,169,63,.6); }
.section--navy .step::after { background: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 7px, transparent 7px 14px); }

/* ---------- 15. Stats band ---------- */
.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem,.6rem + 1.4vw, 2rem); }
@media (max-width: 860px) { .stats-band { grid-template-columns: repeat(2, 1fr); } }
.stat { text-align: center; padding: .4rem; }
.stat b {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.5rem);
  line-height: 1; color: var(--navy-700); letter-spacing: -.035em;
}
.section--navy .stat b { color: #fff; }
.stat span {
  display: block; margin-top: .55rem; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.section--navy .stat span { color: var(--navy-300); }
.stat em { font-style: normal; color: var(--red-500); }
.section--navy .stat em { color: var(--amber-500); }

/* ---------- 16. Accordion (FAQ) ---------- */
.acc { border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; }
.acc + .acc { margin-top: .7rem; }
.acc summary {
  display: flex; align-items: flex-start; gap: 1rem; cursor: pointer;
  padding: 1.15rem 1.35rem; list-style: none;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4);
  color: var(--navy-700); letter-spacing: -.01em; line-height: 1.35;
  transition: background .2s;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { background: var(--navy-50); }
.acc summary::after {
  content: ""; flex: none; margin-left: auto; margin-top: 5px;
  width: 11px; height: 11px;
  border-right: 2.5px solid var(--red-500); border-bottom: 2.5px solid var(--red-500);
  transform: rotate(45deg); transition: transform .28s var(--ease);
}
.acc[open] summary::after { transform: rotate(-135deg); }
.acc__body { padding: 0 1.35rem 1.3rem; }
.acc__body p { font-size: var(--fs-sm); }
.acc[open] summary { background: var(--navy-50); }

/* ---------- 17. Contact ---------- */
.office {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.4rem, 1.1rem + .9vw, 2rem); position: relative; overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.office:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.office::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--accent, var(--navy-700)); }
.office--pithampur { --accent: var(--amber-500); }
.office--surat { --accent: var(--frost-500); }
/* Three offices side by side need a little more breathing room per card. */
.offices { gap: clamp(1rem, .7rem + 1vw, 1.6rem); }
.offices .office h3 { font-size: var(--fs-h3); }
.office__label {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .5rem;
}
.office h3 { margin-bottom: 1.1rem; }
.office dl { display: grid; gap: .9rem; }
.office dt { display: none; }
.office dd { display: flex; gap: .8rem; align-items: flex-start; font-size: var(--fs-sm); }
.office dd svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--accent, var(--navy-700)); }
.office dd a { font-weight: 600; color: var(--navy-700); word-break: break-word; }
.office dd a:hover { color: var(--red-500); text-decoration: underline; }

/* Form */
.form { display: grid; gap: 1.05rem; }
.form__row { display: grid; gap: 1.05rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }
.field label {
  display: block; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--navy-700); margin-bottom: .42rem;
}
.field .req { color: var(--red-500); }
.field input, .field select, .field textarea {
  width: 100%; padding: .82rem 1rem;
  background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--r-sm); font-size: var(--fs-sm);
  transition: border-color .18s, box-shadow .18s;
}
.field textarea { min-height: 128px; resize: vertical; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M8 11 3.5 6h9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 14px;
  padding-right: 2.4rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy-500);
  box-shadow: 0 0 0 4px rgba(36,82,143,.13);
}
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--red-500); }
.field.invalid input:focus, .field.invalid select:focus, .field.invalid textarea:focus { box-shadow: 0 0 0 4px rgba(224,27,34,.13); }
.field__err {
  font-size: var(--fs-xs); color: var(--red-500); font-weight: 600;
  margin-top: .35rem; min-height: 1.05em;
  opacity: 0; transform: translateY(-3px);
  transition: opacity .2s, transform .2s;
}
.field.invalid .field__err { opacity: 1; transform: translateY(0); }
.form__note { font-size: var(--fs-xs); color: var(--muted); }
.form__ok {
  display: none; align-items: flex-start; gap: .7rem;
  padding: 1rem 1.15rem; border-radius: var(--r);
  background: var(--green-50); border: 1px solid #c4ecd3; color: #12703a;
  font-size: var(--fs-sm); font-weight: 600;
}
.form__ok.show { display: flex; animation: rise .35s var(--ease-out); }
.form__ok svg { width: 19px; height: 19px; flex: none; margin-top: 1px; }

/* Head-office map. The Google embed arrives as a fixed 600 × 450 iframe; the
   width/height attributes are kept so it still reserves space with CSS off,
   and overridden here to fill a fluid, ratio-locked frame. */
.maprow__head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1.2rem;
  margin-bottom: 1.4rem;
}
.maprow__text { max-width: 62ch; }
.maprow__text h3 { margin-bottom: .5rem; }
.maprow__text p { color: var(--muted); font-size: var(--fs-sm); }
.mapframe {
  position: relative;
  aspect-ratio: 21 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-3);
  box-shadow: var(--sh-lg);
}
@media (max-width: 900px) { .mapframe { aspect-ratio: 4 / 3; } }
.mapframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* A satellite tile is meaningless on paper and costs a whole page. */
@media print { .maprow { display: none; } }

/* ---------- 18. CTA band ---------- */
.cta {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(120deg, var(--navy-900), var(--navy-700) 55%, var(--navy-600));
  color: #fff; border-radius: var(--r-xl);
  padding: clamp(2.2rem, 1.6rem + 3vw, 4rem);
}
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(560px 260px at 88% 12%, rgba(23,162,196,.34), transparent 66%),
    radial-gradient(460px 240px at 6% 100%, rgba(224,27,34,.3), transparent 64%);
}
.cta__truck {
  position: absolute; right: -20px; bottom: -10px; z-index: -1;
  width: clamp(200px, 30vw, 380px); opacity: .16; pointer-events: none;
}
.cta h2 { color: #fff; max-width: 620px; }
.cta p { color: #c3d2e6; max-width: 540px; margin-top: .9rem; }
.cta__inner { display: flex; flex-wrap: wrap; gap: 1.8rem; align-items: center; justify-content: space-between; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- 19. Footer ---------- */
.footer { background: var(--navy-900); color: #93a8c4; padding-top: clamp(3rem, 2rem + 3vw, 4.5rem); font-size: var(--fs-sm); }
.footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: clamp(1.6rem, 1rem + 2.4vw, 3rem); }
@media (max-width: 940px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__top { grid-template-columns: 1fr; } }
.footer__logo { height: 44px; width: auto; margin-bottom: 1.1rem; }
.footer :is(h3, h4) {
  color: #fff; font-size: var(--fs-xs); letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 1.1rem; font-family: var(--font-body); font-weight: 700;
}
.footer ul { display: grid; gap: .68rem; }
.footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer p { color: #93a8c4; }
.footer__legal {
  margin-top: clamp(2.2rem, 1.6rem + 2vw, 3.4rem);
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .8rem 1.6rem;
  align-items: center; justify-content: space-between;
  font-size: var(--fs-xs); color: #7d93b0;
}
.footer__legal .gst { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.footer__social { display: flex; gap: .5rem; }
.footer__social a {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  transition: background .2s, transform .2s;
}
.footer__social a:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.footer__social svg { width: 17px; height: 17px; }
.footer__contact-item { display: flex; gap: .65rem; align-items: flex-start; }
.footer__contact-item svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--amber-500); }
/* Three offices stacked in one footer column — each line on its own row. */
.footer__offices { gap: 1.15rem; }
.footer__offices span { display: grid; gap: .1rem; }
.footer__offices strong { color: #fff; font-weight: 700; }
.footer__offices a { color: #a8bcd6; }
.footer__offices a[href^="tel:"] { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* ---------- 20. Floating actions ---------- */
.fabs {
  position: fixed; right: clamp(.9rem, .4rem + 1vw, 1.6rem); bottom: clamp(.9rem, .4rem + 1vw, 1.6rem);
  z-index: 90; display: grid; gap: .6rem; justify-items: center;
}
.fab {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: none; color: #fff;
  box-shadow: 0 8px 24px -6px rgba(15,22,33,.35);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.fab:hover { transform: translateY(-3px) scale(1.05); }
.fab svg { width: 25px; height: 25px; }
.fab--wa { background: #25d366; }
.fab--call { background: var(--red-500); width: 48px; height: 48px; }
.fab--call svg { width: 21px; height: 21px; }
.fab--top {
  background: var(--navy-700); width: 42px; height: 42px;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .25s, transform .25s;
}
.fab--top svg { width: 17px; height: 17px; }
.fab--top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* ---------- 21. Compliance badges ---------- */
.badges { display: flex; flex-wrap: wrap; gap: clamp(.8rem, .5rem + 1vw, 1.4rem); }
.badge {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.3rem; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r);
  min-width: 210px; flex: 1 1 210px;
  transition: transform .25s var(--ease), box-shadow .25s;
}
.badge:hover { transform: translateY(-3px); box-shadow: var(--sh); }
.badge__ico {
  width: 42px; height: 42px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  background: var(--navy-50); color: var(--navy-700); border: 1px solid var(--navy-100);
}
.badge__ico svg { width: 21px; height: 21px; }
.badge b { display: block; font-family: var(--font-display); font-size: .96rem; color: var(--navy-700); letter-spacing: -.01em; }
.badge span { display: block; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 1px; }
.badge--pending .badge__ico { background: var(--amber-50); border-color: #fae2bd; color: #d98a1a; }

/* ---------- 22. Coverage ---------- */
.coverage { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(1.6rem, 1rem + 3vw, 3.6rem); align-items: center; }
@media (max-width: 900px) { .coverage { grid-template-columns: 1fr; } }
.city-groups { display: grid; gap: 1.4rem; }
.city-group :is(h3, h4) {
  font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--red-500); margin-bottom: .65rem; font-family: var(--font-body); font-weight: 700;
}
.section--navy .city-group :is(h3, h4) { color: var(--amber-500); }
.city-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.city-list li {
  font-size: .78rem; font-weight: 600; padding: .32rem .68rem;
  border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--line); color: var(--ink-soft);
  transition: background .2s, color .2s, border-color .2s;
}
.city-list li:hover { background: var(--navy-700); color: #fff; border-color: var(--navy-700); }
.section--navy .city-list li { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); color: #cddaea; }
.section--navy .city-list li:hover { background: var(--amber-500); color: var(--navy-900); border-color: var(--amber-500); }

/* ---------- 23. Quote / callout ---------- */
.quote {
  position: relative; padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  padding-left: clamp(2.8rem, 2rem + 2.4vw, 4.4rem);
  background: var(--surface-2); border-radius: var(--r-lg);
  border-left: 5px solid var(--red-500);
}
.quote::before {
  content: "\201C"; position: absolute;
  left: clamp(.8rem, .5rem + .9vw, 1.5rem); top: -.1em;
  font-family: var(--font-display); font-size: 5.5rem; line-height: 1;
  color: var(--navy-100); pointer-events: none;
}
.quote p { font-size: var(--fs-lead); color: var(--navy-700); font-weight: 500; font-style: italic; line-height: 1.55; }
.quote footer { margin-top: 1rem; font-size: var(--fs-sm); font-weight: 700; color: var(--red-500); font-style: normal; }
.quote footer span { display: block; font-weight: 500; color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; }
.section--navy .quote { background: rgba(255,255,255,.05); border-left-color: var(--amber-500); }
.section--navy .quote::before { color: rgba(255,255,255,.14); }
.section--navy .quote p { color: #e8eff8; }
.section--navy .quote footer { color: var(--amber-500); }

/* ---------- 24. Managing Director's message ----------
   Portrait beside a signed letter. Runs on a navy panel, so every colour here
   is chosen against --navy-700 rather than the light surfaces above.          */
.owner__grid {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: clamp(2.2rem, 1.4rem + 3.4vw, 4.6rem);
  align-items: center;
}
@media (max-width: 900px) {
  .owner__grid { grid-template-columns: minmax(0, 1fr); gap: 2.6rem; }
}

/* --- portrait --- */
/* `width: 100%` is load-bearing, not decoration: auto inline margins on a grid
   item switch it to fit-content sizing, which would make the frame's size
   depend on whether the photograph had downloaded yet. An explicit width keeps
   the box at the track width (clamped by max-width) and gives the auto margins
   real leftover space to centre with. */
.owner__media { position: relative; width: 100%; max-width: 400px; }
@media (max-width: 900px) { .owner__media { margin-inline: auto; } }

/* Offset amber outline behind the photo. Absolute and aria-hidden so it adds
   depth without adding a box to the layout or a node to the a11y tree. */
.owner__frame {
  position: absolute;
  inset: 22px -22px -22px 22px;
  border: 2px solid rgba(245, 169, 63, .5);
  border-radius: var(--r-xl);
  pointer-events: none;
}
@media (max-width: 560px) {
  /* Right-hand offset would push past the gutter on a phone. */
  .owner__frame { inset: 16px -12px -16px 12px; }
}

.owner__figure {
  position: relative;
  z-index: 1;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--navy-900);
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .75);
}
/* The photograph is square and the box is square, so `cover` crops nothing —
   object-fit is here only so a future replacement of any ratio still fills it. */
.owner__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Name plate sitting on a gradient so it stays legible over the photograph. */
.owner__plate {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 3;
  padding: 2.6rem 1.3rem 1.1rem;
  background: linear-gradient(transparent, rgba(6, 18, 38, .92) 62%);
}
.owner__plate b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  /* Its own clamp rather than --fs-h4: the name has to stay inside a 400 px
     photo, so it is sized against that box, not the page's heading scale. */
  font-size: clamp(1.02rem, .95rem + .45vw, 1.28rem);
  line-height: 1.2;
  color: #fff;
}
.owner__plate span {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--amber-500);
}

/* --- letter --- */
.owner__head {
  font-size: clamp(1.65rem, 1.2rem + 1.8vw, 2.5rem);
  line-height: 1.16;
  margin-top: .55rem;
}
.owner__letter { display: grid; gap: 1.05rem; margin-top: 1.5rem; }

/* A grid item rather than an absolutely-positioned pseudo-element: at narrow
   widths an absolute quote mark collided with the heading above it. */
.owner__mark {
  font-family: var(--font-display);
  font-size: 4.4rem;
  line-height: .55;
  color: rgba(245, 169, 63, .55);
  margin-bottom: -.45rem;
}
.owner__letter p { line-height: 1.72; }
.owner__letter strong { color: #fff; font-weight: 700; }

/* .section--navy p is (0,1,1), so this needs two classes to win without
   resorting to !important. */
.owner__letter .owner__closing {
  padding-left: 1.1rem;
  border-left: 3px solid var(--amber-500);
  color: #fff;
  font-size: var(--fs-lead);
  font-weight: 500;
  font-style: italic;
  line-height: 1.6;
}

.owner__sign {
  margin-top: 1.9rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.owner__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  color: #fff;
}
.owner__role {
  display: block;
  margin-top: .3rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber-500);
}

/* ---------- 25. Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
.gallery figure { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 1/1; background: var(--surface-3); }
.gallery figure:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 900px) { .gallery figure:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16/10; } }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gallery figure:hover img { transform: scale(1.07); }
.gallery figcaption {
  position: absolute; inset-inline: 0; bottom: 0; padding: 1.6rem .9rem .75rem;
  background: linear-gradient(transparent, rgba(11,30,61,.88));
  color: #fff; font-size: var(--fs-xs); font-weight: 600;
}

/* ---------- 26. Reveal animations ---------- */
/* Scroll reveals are gated behind the .js class that main.js sets on <html>.
   If JavaScript never runs, nothing is ever hidden — the page reads normally. */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js [data-reveal].in { opacity: 1; transform: none; }
.js [data-reveal][data-reveal="left"] { transform: translateX(-26px); }
.js [data-reveal][data-reveal="right"] { transform: translateX(26px); }
.js [data-reveal][data-reveal="scale"] { transform: scale(.96); }
.js [data-reveal].in { transform: none; }
/* On narrow screens a sideways slide only pushes content past the edge — go vertical. */
@media (max-width: 640px) {
  .js [data-reveal][data-reveal="left"],
  .js [data-reveal][data-reveal="right"] { transform: translateY(22px); }
  .js [data-reveal].in { transform: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- 27. Utilities ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.divider { height: 1px; background: var(--line); border: 0; margin-block: clamp(2rem,1.4rem + 2vw,3.4rem); }
.section--navy .divider { background: rgba(255,255,255,.12); }
.nowrap { white-space: nowrap; }

/* ---------- 28. Motion / print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none; }
}
@media print {
  .header, .fabs, .cta, .marquee, .burger { display: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  body { color: #000; }
  a { text-decoration: underline; }
}