/* Himalaya Packaging — main stylesheet. Loads after bootstrap.min.css, all.min.css and tokens.css.
   Colours come from tokens.css (contrast-measured).

   Sections
     1  Base
     2  Layout & type helpers
     3  Buttons
     4  Topbar
     5  Header, desktop nav, mega menu
     6  Mobile nav
     7  Hero, title block, spec figure
     8  Stat band
     9  About
    10  Capabilities list
    11  Industry cards
    12  Product cards
    13  Commitments + spec-request panel
    14  Process timeline
    15  FAQ
    16  Contact
    17  Forms + quote modal
    18  Footer + floating buttons
    19  Transparent chrome over the hero (opt-in)
    20  Page head (inner pages)
    21  CTA band (inner pages)
    22  About page
    23  Contact page
    24  Utility pages — 404, thank-you
    25  Spec tables (capabilities)
    26  Blog — listing, post cards, articles
    27  Legal pages — privacy, terms
    28  Product pages + hub
    29  Industry pages + hub
    30  Location page (Ahmedabad)
    31  Scroll reveal, print, reduced motion
   ========================================================================== */


/* ==== 1  BASE ==== */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.6;
  letter-spacing: -.003em;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration: underline;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--text-strong);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.028em;
  text-wrap: balance;
}

p {
  margin: 0;
}

button {
  color: inherit;
  background: none;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
}


/* ==== 2  LAYOUT & TYPE HELPERS ==== */
/* padding must stay >= half the widest gutter (g-lg-5), or rows overflow */
.container {
  max-width: 1380px;
  padding-inline: clamp(20px, 3.5vw, 36px);
}

.section {
  padding-block: clamp(56px, 7vw, 96px);
}

/* No two adjacent sections may share a ground — alternate white / paper. */
.section--paper {
  background: var(--paper);
}

.brand-sweep {
  width: 100%;
  height: 4px;
  background: var(--grad-full);
}

.header-sweep {
  height: 3px;
}

/* warm gradient on display type only — amber fails as text below ~28px */
.grad-text {
  background: var(--grad-sun);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9.6px;
  margin-bottom: 18.4px;
  font-family: var(--font-mono);
  font-size: 11.2px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 28.8px;
  height: 1px;
  background: currentColor;
}

.eyebrow span {
  margin-right: 1.6px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
}

.h-lg {
  font-size: clamp(28px, 3.6vw, 41.6px);
}

.h-sm {
  font-size: 17.28px;
  letter-spacing: -.01em;
}

.lede {
  max-width: 62ch;
  margin-top: 16px;
  font-size: clamp(16.48px, 1.4vw, 18.4px);
}

.muted {
  color: var(--text-muted);
}

.section-head {
  max-width: 64ch;
  margin-bottom: clamp(32px, 4vw, 48px);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center .eyebrow {
  justify-content: center;
}

.section-head--center .lede {
  margin-inline: auto;
}


/* ==== 3  BUTTONS ==== */
/* Bootstrap's .btn:hover colour out-ranks a variant class: every variant must set its label
   colour on :hover/:focus/:active/:focus-visible too. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9.6px;
  padding: 15.2px 25.6px;
  border: 1.5px solid transparent;
  border-radius: var(--btn-radius);
  font-size: 15.68px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .005em;
  isolation: isolate;
  transition: transform .2s cubic-bezier(.2, .7, .3, 1), box-shadow .2s ease, background .2s ease,
    border-color .2s ease, color .2s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn:active {
  transition-duration: .05s;
}

.btn i {
  font-size: 14.72px;
}

.btn .fa-arrow-right {
  transition: transform .22s ease;
}

.btn:hover .fa-arrow-right {
  transform: translateX(4px);
}

.btn--sm {
  font-size: 14.4px;
}

.btn--lg {
  padding: 16.8px 30.4px;
  font-size: 16.64px;
}

.btn--ghost {
  background: var(--white);
  border-color: var(--line-2);
}

.btn--ghost,
.btn--ghost:hover,
.btn--ghost:focus,
.btn--ghost:active,
.btn--ghost:focus-visible {
  color: var(--text-strong);
}

.btn--ghost:hover {
  background: var(--white);
  border-color: var(--ink);
  box-shadow: 0 12px 24px -14px rgba(20, 23, 26, .45);
}

/* order matters: after the ghost hover, before the accent hover */
.btn:focus,
.btn:active {
  box-shadow: none;
}

/* accent: orange-ink + white (5.84 AA); the hover gradient is darker still */
.btn--accent {
  background: var(--accent-btn);
}

.btn--accent,
.btn--accent:hover,
.btn--accent:focus,
.btn--accent:active,
.btn--accent:focus-visible {
  color: #fff;
}

.btn--accent:hover {
  background: #A63611;
  box-shadow: var(--shadow-glow);
}

.btn--accent::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, #A63611 0%, #8A2C0E 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

.btn--accent:hover::before {
  transform: scaleX(1);
}

.btn--accent:active::before {
  transition-duration: .12s;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 13.6px;
}

.ico--chev {
  width: .8em;
  height: .8em;
  transition: transform .2s ease;
}


/* ==== 4  TOPBAR ==== */
.topbar {
  background: var(--ink);
  color: #C2C8CF;
  font-family: var(--font-mono);
  font-size: 12.16px;
  letter-spacing: .02em;
}

.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 42px;
}

.topbar__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.topbar__meta li {
  display: flex;
  align-items: center;
  gap: 7.2px;
}

.topbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22.4px;
}

.topbar a {
  color: #C2C8CF;
}

.topbar a:hover {
  color: #fff;
  text-decoration: none;
}

.topbar__actions > a {
  display: inline-flex;
  align-items: center;
  gap: 7.2px;
}

.topbar i {
  font-size: 13.6px;
  opacity: .9;
}

.topbar__phone {
  color: var(--amber) !important;
  font-weight: 500;
}

.topbar__divider,
.topbar__mail-short {
  display: none;
}

@media (max-width: 900px) {
  .topbar__meta {
    display: none;
  }

  .topbar__inner {
    justify-content: center;
    min-height: 0;
  }

  .topbar__actions {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: center;
    justify-items: center;
    width: 100%;
  }

  .topbar__actions > a {
    justify-content: center;
    min-width: 0;
    padding: 9.6px 6.4px;
    font-size: 12.8px;
    text-align: center;
  }

  .topbar__actions > a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar__divider {
    display: block;
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, .22);
  }
}

@media (max-width: 560px) {
  .topbar__mail-text {
    display: none;
  }

  .topbar__mail-short {
    display: inline;
  }
}

@media (max-width: 420px) {
  .topbar__actions > a {
    font-size: 11.84px;
  }
}


/* ==== 5  HEADER, DESKTOP NAV, MEGA MENU ==== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 120;
  background: var(--white);
  border-bottom: 1px solid var(--line-2);
  transition: box-shadow .2s ease;
}

.site-header.is-stuck {
  box-shadow: var(--shadow-xs);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 92px;
  transition: min-height .2s ease, height .2s ease;
}

.site-header.is-stuck .site-header__inner {
  min-height: 76px;
}

.brand {
  flex: none;
}

.brand img {
  width: auto;
  height: 58px;
  transition: min-height .2s ease, height .2s ease;
}

.site-header.is-stuck .brand img {
  height: 48px;
}

/* .nav also picks up Bootstrap's .nav (display:flex; flex-wrap:wrap) */
.nav {
  align-items: center;
  gap: 24px;
  margin-left: auto;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 3.2px;
}

.nav__item {
  position: relative;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5.6px;
  padding: 9.6px 13.6px;
  border-radius: 2px;
  font-size: 15.52px;
  font-weight: 500;
  color: var(--text-strong);
}

.nav__link:hover {
  color: var(--accent);
  text-decoration: none;
}

.nav__link.is-active {
  color: var(--accent);
}

.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 13.6px;
  right: 13.6px;
  bottom: 1.6px;
  height: 2px;
  background: var(--orange);
}

/* ---- Products: standard dropdown ---- */
.subnav {
  position: absolute;
  top: calc(100% + 8.8px);
  left: 0;
  min-width: 292px;
  padding: 8px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.has-sub:hover .subnav,
.has-sub.is-open .subnav {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.has-sub:hover .ico--chev,
.has-sub.is-open .ico--chev {
  transform: rotate(180deg);
}

.subnav a {
  display: flex;
  align-items: center;
  gap: 10.4px;
  padding: 9.6px 12px;
  border-radius: 2px;
  font-size: 15.04px;
  font-weight: 600;
  color: var(--text-strong);
}

.subnav a:hover {
  background: var(--paper);
  color: var(--accent);
  text-decoration: none;
}

.subnav a > i {
  width: 18.4px;
  font-size: 14.4px;
  color: var(--orange);
}

.subnav__all {
  margin-top: 5.6px;
  padding-top: 5.6px;
  border-top: 1px solid var(--line);
}

.subnav__all a {
  font-size: 13.92px;
  font-weight: 500;
  color: var(--text-muted);
}

/* ---- Industries mega panel: the li is static so the panel sizes against the header ---- */
.has-mega {
  position: static;
}

.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 115;
  background: var(--white);
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 28px 56px -30px rgba(20, 23, 26, .35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.has-mega:hover .mega,
.has-mega.is-open .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.has-mega:hover .ico--chev,
.has-mega.is-open .ico--chev {
  transform: rotate(180deg);
}

.mega__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-areas: "main aside" "sec sec";
  gap: 25.6px clamp(24px, 3vw, 48px);
  padding-block: 32px;
}

.mega__main {
  grid-area: main;
}

.mega__sec {
  grid-area: sec;
}

.mega__label {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 10.88px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.mega__label--sec {
  padding-top: 20.8px;
  border-top: 1px solid var(--line);
}

.mega__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9.6px;
}

.megacard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 14.4px;
  padding: 14.4px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: inherit;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.megacard:hover {
  background: var(--paper);
  border-color: var(--line);
  transform: translateX(2px);
  text-decoration: none;
}

.megacard__ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--paper);
  border-bottom: 2px solid var(--v, var(--orange));
  border-radius: var(--r-sm);
  font-size: 18.4px;
  color: var(--v, var(--orange));
  transition: background .16s ease;
}

.megacard:hover .megacard__ico {
  background: var(--white);
}

.megacard__txt {
  font-size: 13.76px;
  line-height: 1.5;
  color: var(--text-muted);
}

.megacard__txt b {
  display: block;
  margin-bottom: 3.2px;
  font-size: 15.68px;
  color: var(--ink);
}

.mega__more {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8.8px 20px;
}

.mega__more a {
  display: flex;
  align-items: center;
  gap: 8.8px;
  padding: 7.2px 4.8px;
  border-radius: var(--r-sm);
  font-size: 14.4px;
  font-weight: 600;
  color: var(--text-strong);
}

.mega__more a:hover {
  color: var(--accent);
  text-decoration: none;
}

.mega__more i {
  width: 18.4px;
  color: var(--orange);
}

.mega__aside {
  grid-area: aside;
  align-self: start;
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.mega__aside-t {
  font-size: 16.32px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
}

.mega__aside-d {
  margin: 9.6px 0 17.6px;
  font-size: 13.92px;
  line-height: 1.55;
  color: var(--text-muted);
}

.mega__aside .btn {
  width: 100%;
}

.mega__aside-n {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7.2px;
  margin-top: 14.4px;
  font-size: 14.08px;
  font-weight: 700;
  color: var(--ink);
}

.mega__aside-n i {
  font-size: 13.12px;
  color: var(--orange-ink);
}

@media (max-width: 1200px) {
  .mega__inner {
    grid-template-columns: minmax(0, 1fr) 260px;
  }
}

/* the tabbed mobile panel takes over below 1081px */
@media (max-width: 1080px) {
  .mega {
    display: none;
  }
}

@media (max-width: 980px) {
  .mega__grid {
    grid-template-columns: 1fr;
  }

  .mega__more {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---- Burger (below 1081px) ---- */
.nav-burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
}

.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

.nav-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1080px) {
  .nav-burger {
    display: flex;
  }

  .nav {
    display: none;
  }
}


/* ==== 6  MOBILE NAV ==== */
.mnav {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 130;
  display: flex;
  flex-direction: column;
  width: min(420px, 92vw);
  background: var(--white);
  box-shadow: -24px 0 60px -30px rgba(20, 23, 26, .5);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.mnav.is-open {
  transform: translateX(0);
}

.mnav-scrim {
  position: fixed;
  inset: 0;
  z-index: 125;
  background: rgba(20, 23, 26, .5);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .3s ease;
}

.mnav-scrim.is-open {
  opacity: 1;
}

body.has-mnav {
  overflow: hidden;
}

.mnav__head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18.4px;
  border-bottom: 1px solid var(--line);
}

.mnav__logo {
  height: 46px;
}

.mnav__close {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: 18.4px;
  color: var(--ink);
  transition: background .18s ease, color .18s ease;
}

.mnav__close:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.mnav__tabs {
  display: grid;
  flex: none;
  grid-template-columns: repeat(3, 1fr);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.mnav__tab {
  padding: 16px 8px;
  border-bottom: 3px solid transparent;
  font-family: var(--font-mono);
  font-size: 11.84px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color .18s ease, background .18s ease;
}

.mnav__tab.is-active {
  background: var(--white);
  border-bottom-color: var(--accent);
  color: var(--accent);
}

.mnav__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mnav__list li {
  border-bottom: 1px solid var(--line);
}

.mnav__list a {
  display: flex;
  align-items: center;
  gap: 12.8px;
  padding: 16.8px 18.4px;
  border-left: 4px solid transparent;
  font-size: 16.32px;
  font-weight: 600;
  color: var(--ink);
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.mnav__list a:hover {
  background: var(--paper);
  text-decoration: none;
}

.mnav__list a.is-active {
  background: var(--paper);
  border-left-color: var(--accent);
  color: var(--orange-ink);
}

.mnav__list--icons i {
  width: 21.6px;
  font-size: 16px;
  color: var(--orange);
}

.mnav__contact {
  display: grid;
  gap: 11.2px;
  padding: 18.4px;
}

.mnav__cbox {
  display: grid;
  grid-template-columns: 41.6px minmax(0, 1fr);
  align-items: start;
  gap: 14.4px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .18s ease, box-shadow .18s ease;
}

a.mnav__cbox:hover {
  border-color: var(--orange);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
}

.mnav__cbox--static {
  background: var(--paper);
}

.mnav__cbox > i {
  display: grid;
  place-items: center;
  width: 41.6px;
  height: 41.6px;
  background: var(--orange-tint);
  border-radius: var(--r-sm);
  font-size: 16px;
  color: var(--orange-ink);
}

.mnav__cbox span {
  font-size: 13.92px;
  line-height: 1.5;
  color: var(--text-muted);
}

.mnav__cbox b {
  display: block;
  margin-bottom: 2.4px;
  font-size: 15.68px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.mnav__foot {
  flex: none;
  padding: 18.4px;
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.mnav__foot .btn {
  background: var(--accent-btn);
  color: #fff;
}

/* white on the hover fill measures 6.47–8.24 (AA) */
.mnav__foot .btn:hover {
  background: #A63611;
  color: #fff;
}


/* ==== 7  HERO, TITLE BLOCK, SPEC FIGURE ==== */
.hero {
  /* --hero-bg: flute linework below 992px, the video's first frame above */
  --hero-bg: url('../img/hero/flute.svg');
  --hero-bg-size: 34px 56px;
  position: relative;
  padding-top: clamp(24px, 3vw, 44px);
  background:
    linear-gradient(100deg,
      rgba(246, 247, 249, .97) 0%,
      rgba(246, 247, 249, .86) 34%,
      rgba(240, 242, 245, .58) 62%,
      rgba(238, 241, 244, .42) 100%),
    var(--hero-bg),
    linear-gradient(to bottom, #E7EAEE 0%, #F2F4F6 62%, #F6F7F9 100%);
  background-size: auto, var(--hero-bg-size), auto;
  background-repeat: no-repeat, repeat, no-repeat;
}

.hero::before {
  z-index: 1;
}

.hero > .container,
.hero .titleblock {
  position: relative;
  z-index: 1;
}

/* ---- Background video: desktop only, started by main.js ---- */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .7s ease;
}

.hero__video.is-playing {
  opacity: 1;
}

/* ---- The sheet ---- */
.hero__frame {
  position: relative;
  margin-bottom: clamp(24px, 2.6vw, 36px);
  padding: clamp(25.6px, 2.8vw, 44px) clamp(28.8px, 2.8vw, 48px);
  background: var(--white);
  border: 1px solid var(--line-2);
  box-shadow: 0 18px 40px -24px rgba(20, 23, 26, .45);
}

.hero__frame::before,
.hero__frame::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--accent);
}

.hero__frame::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}

.hero__frame::after {
  right: -1px;
  bottom: -1px;
  border-left: 0;
  border-top: 0;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 4vw, 68px);
}

.hero__copy {
  text-align: center;
}

.hero__title {
  margin-inline: auto;
  font-size: clamp(34.4px, 4.7vw, 56px);
  line-height: 1.07;
  letter-spacing: -.035em;
}

.hero .btn-row {
  justify-content: center;
  margin-top: 32px;
}

/* ---- Title block: the spec strip along the bottom of the sheet ---- */
.titleblock {
  background: var(--ink);
}

.titleblock__row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
}

.titleblock__cell {
  min-width: 0;
  padding: 16.8px 17.6px;
  border-left: 1px solid rgba(255, 255, 255, .13);
}

.titleblock__cell:first-child {
  padding-left: 0;
  border-left: 0;
}

.titleblock__cell dt {
  margin-bottom: 5.6px;
  font-family: var(--font-mono);
  font-size: 9.6px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #9AA2AB;
}

.titleblock__cell dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 14.08px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  color: #fff;
}

.titleblock__cell--cta {
  display: flex;
  align-items: center;
}

/* padding widens the tap target to 24px+; the negative margin keeps the layout */
.titleblock__cell--cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block: -4px;
  padding-block: 4px;
  font-family: var(--font-mono);
  font-size: 10.88px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amber);
  text-decoration: none;
  transition: gap .2s ease, color .2s ease;
}

.titleblock__cell--cta a:hover {
  gap: 12.8px;
  color: #fff;
}

.titleblock__cell--cta i {
  font-size: 11.2px;
}

@media (max-width: 1199px) {
  .titleblock__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .titleblock__cell:nth-child(3n+1) {
    padding-left: 0;
    border-left: 0;
  }

  .titleblock__cell:nth-child(n+4) {
    border-top: 1px solid rgba(255, 255, 255, .13);
  }
}

/* ---- Desktop: full-height banner over the footage ---- */
@media (min-width: 992px) {
  .hero {
    --hero-bg: url('../img/hero/hero-poster.webp');
    --hero-bg-pos: 52% 46%;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: clamp(40px, 5vw, 88px);
    background: var(--hero-bg), #EDEFF2;
    background-size: cover, auto;
    background-position: var(--hero-bg-pos), 0 0;
    background-repeat: no-repeat, no-repeat;
  }

  .hero > .container {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
  }

  .hero .titleblock {
    flex: none;
  }

  /* 60% opacity is only safe while the sheet holds just the ink h1 (6.80–7.43) */
  .hero__frame {
    width: 100%;
    max-width: 80%;
    margin-inline: auto;
    margin-bottom: clamp(40px, 5vw, 88px);
    padding-block: 60px;
    background: rgb(255 255 255 / 60%);
    -webkit-backdrop-filter: blur(5px) saturate(.94);
    backdrop-filter: blur(5px) saturate(.94);
    border: 1px solid rgba(255, 255, 255, .85);
    box-shadow: 0 26px 56px -34px rgba(20, 23, 26, .5);
  }

  /* each half of the h1 must fit one line at every width — re-measure if the copy changes */
  .hero__title {
    font-size: clamp(30.4px, 3.35vw, 46.4px);
    line-height: 1.08;
  }

  /* reserves the 68px column the floating WhatsApp/call buttons occupy */
  .titleblock__row {
    padding-right: 72px;
  }
}

@media (min-width: 576px) and (max-width: 991px) {
  .hero {
    padding-top: clamp(32px, 4.5vw, 48px);
  }

  .hero__frame {
    margin-bottom: clamp(32px, 4.5vw, 48px);
    padding-block: clamp(40px, 6vw, 56px);
  }
}

/* below 992 the video is never loaded; the flute ground shows instead */
@media (max-width: 991px) {
  .hero__bg {
    display: none;
  }

  .hero__grid {
    gap: 40px;
  }
}

@media (max-width: 575px) {
  .hero__frame {
    padding: 20.8px 24px 35.2px;
  }

  .hero__frame::before,
  .hero__frame::after {
    width: 13px;
    height: 13px;
  }

  .titleblock__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .titleblock__cell {
    padding-block: 14.4px;
  }

  /* undo the 3-up rule from the 1199 breakpoint before applying the 2-up one */
  .titleblock__cell:nth-child(3n+1) {
    padding-left: 17.6px;
    border-left: 1px solid rgba(255, 255, 255, .13);
  }

  .titleblock__cell:nth-child(2n+1) {
    padding-left: 0;
    border-left: 0;
  }

  .titleblock__cell:nth-child(n+3) {
    border-top: 1px solid rgba(255, 255, 255, .13);
  }

  .titleblock__cell--cta {
    grid-column: 1 / -1;
    justify-content: space-between;
    padding-left: 0;
    border-left: 0;
  }

  .titleblock__cell--cta a {
    justify-content: space-between;
    width: 100%;
  }
}

/* ---- Spec figure: a render bracketed by dimension lines ---- */
.specfig {
  position: relative;
  margin: 0;
  padding: 0 clamp(30.4px, 2.4vw, 41.6px) clamp(25.6px, 2vw, 33.6px) 0;
}

.specfig img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 30px rgba(20, 23, 26, .16));
}

.specdim {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9.6px;
  pointer-events: none;
}

.specdim b {
  flex: none;
  font-family: var(--font-mono);
  font-size: 9.6px;
  font-weight: 500;
  letter-spacing: .13em;
  white-space: nowrap;
  color: var(--faint);
}

.specdim--h::before,
.specdim--h::after,
.specdim--v::before,
.specdim--v::after {
  content: "";
  display: block;
  flex: 1 1 auto;
  background: var(--line-3);
  opacity: .85;
}

.specdim--h {
  left: 0;
  right: clamp(30.4px, 2.4vw, 41.6px);
  bottom: 7.2px;
  height: 10px;
  border-left: 1px solid var(--line-3);
  border-right: 1px solid var(--line-3);
}

.specdim--h::before,
.specdim--h::after {
  height: 1px;
}

.specdim--v {
  top: 0;
  bottom: clamp(25.6px, 2vw, 33.6px);
  right: 8.8px;
  flex-direction: column;
  width: 10px;
  border-top: 1px solid var(--line-3);
  border-bottom: 1px solid var(--line-3);
}

.specdim--v::before,
.specdim--v::after {
  width: 1px;
}

.specdim--v b {
  writing-mode: vertical-rl;
}

@media (max-width: 991px) {
  .specfig {
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
  }
}

/* labels at 10.4px below 768px for legibility (desktop keeps 9.6px) */
@media (max-width: 767px) {
  .specdim b,
  .titleblock__cell dt {
    font-size: 10.4px;
  }
}

/* 320px phones: keep "A · B · C · E" on one line in the half-width title-block cell */
@media (max-width: 359px) {
  .titleblock__cell dd {
    font-size: 12.8px;
    letter-spacing: 0;
  }
}

@media (max-width: 575px) {
  .specfig {
    padding: 0 0 22.4px;
  }

  .specdim--h {
    left: 0;
    right: 0;
    bottom: 4.8px;
  }

  .specdim--v {
    display: none;
  }
}


/* ==== 8  STAT BAND ==== */
.statband {
  padding-block: clamp(40px, 5vw, 56px);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.statcard {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 34px 70px -40px rgba(20, 23, 26, .45), 0 2px 6px -3px rgba(20, 23, 26, .10);
}

.statcard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--grad-full);
}

.statcard__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.statitem {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: clamp(22.4px, 2.6vw, 28.8px) clamp(17.6px, 2vw, 25.6px);
}

.statitem + .statitem::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: var(--line);
}

.statitem__ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 52px;
  height: 52px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 20.8px;
  color: var(--accent);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}

.statitem:hover .statitem__ico {
  background: var(--ink);
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px);
}

.statitem__n {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--ink);
}

.statitem__n--text {
  font-size: clamp(21.6px, 2.1vw, 25.6px);
  letter-spacing: -.02em;
}

.statitem__l {
  display: block;
  margin-top: 6.4px;
  font-size: 14.08px;
  line-height: 1.45;
  color: var(--text-muted);
}

@media (max-width: 820px) {
  .statcard__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .statitem + .statitem::before {
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
  }

  .statitem:nth-child(2)::before {
    display: none;
  }

  .statitem:nth-child(even)::after {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 1px;
    background: var(--line);
  }
}

@media (max-width: 420px) {
  .statcard__grid {
    grid-template-columns: 1fr;
  }

  .statitem::after {
    display: none !important;
  }

  .statitem:nth-child(2)::before {
    display: block;
  }
}


/* ==== 9  ABOUT ==== */
.about__head {
  margin-bottom: 22.4px;
}

.about__head .lede {
  margin-top: 14.4px;
}

#about p {
  max-width: 60ch;
  margin-bottom: 16px;
  color: var(--text-body);
}

#about .btn {
  margin-top: 9.6px;
}


/* ==== 10  CAPABILITIES ==== */
.caplist {
  border-top: 1px solid var(--line-2);
}

.capline {
  position: relative;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) minmax(0, 288px);
  align-items: start;
  gap: clamp(17.6px, 2.6vw, 40px);
  padding: clamp(23.2px, 2.8vw, 32px) 0;
  border-bottom: 1px solid var(--line);
  transition: background .22s ease;
}

.capline:hover {
  background: var(--paper);
}

.capline::before {
  content: "";
  position: absolute;
  top: -1px;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width .35s ease;
}

.capline:hover::before {
  width: 100%;
}

.capline__idx {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.capline__ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 43.2px;
  height: 43.2px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: 18.4px;
  color: var(--accent);
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}

.capline:hover .capline__ico {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.capline__n {
  font-family: var(--font-mono);
  font-size: 10.88px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
  color: var(--faint);
}

.capline__body p {
  max-width: 62ch;
  margin: 8px 0 0;
}

.capline__spec {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6.4px;
}

.capline__spec li {
  padding: 5.44px 9.6px;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 10.56px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
}

.capline:hover .capline__spec li {
  border-color: var(--line-3);
}

@media (max-width: 991px) {
  .capline {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14.4px 19.2px;
  }

  .capline__idx {
    flex-direction: row;
    align-items: center;
    gap: 10.4px;
  }

  .capline__ico {
    width: 36.8px;
    height: 36.8px;
    font-size: 16px;
  }

  .capline__spec {
    grid-column: 2;
    justify-content: flex-start;
    margin-top: 14.4px;
  }
}

@media (max-width: 575px) {
  .capline__body,
  .capline__spec {
    grid-column: 1 / -1;
  }

  .capline__spec {
    margin-top: 12px;
  }
}


/* ==== 11  INDUSTRY CARDS ==== */
.ind {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: inherit;
  transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s ease, border-color .28s ease;
}

.ind:hover {
  background: var(--paper);
  border-color: color-mix(in srgb, var(--v) 45%, var(--line));
  box-shadow: 0 30px 54px -30px color-mix(in srgb, var(--v) 55%, transparent);
  text-decoration: none;
}

.ind::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--v);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1);
}

.ind:hover::after {
  transform: scaleX(1);
}

.ind__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8.8px;
  padding: 27.2px 24px;
}

.ind__ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 14.4px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--v) 60%, transparent);
  font-size: 20.8px;
  color: var(--v);
  transition: background .28s ease, color .28s ease, transform .28s ease, border-color .28s ease;
}

.ind:hover .ind__ico {
  background: var(--v);
  border-color: transparent;
  color: #fff;
  transform: translateY(-3px) rotate(-4deg);
}

.ind__tag {
  font-family: var(--font-mono);
  font-size: 10.88px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.ind h4 {
  font-size: 18.4px;
  line-height: 1.25;
}

.ind p {
  flex: 1;
  font-size: 14.88px;
}

.ind__more {
  display: inline-flex;
  align-items: center;
  gap: 6.4px;
  margin-top: 8px;
  font-size: 14.4px;
  font-weight: 700;
  color: var(--v);
  transition: gap .22s ease;
}

.ind:hover .ind__more {
  gap: 12px;
}

.ind__more i {
  font-size: 12.16px;
  transition: transform .18s ease;
}

.ind:hover .ind__more i {
  transform: translateX(3px);
}


/* ==== 12  PRODUCT CARDS ==== */
.prod {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: inherit;
  transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s ease, border-color .28s ease;
}

.prod:hover {
  border-color: color-mix(in srgb, var(--pc) 45%, var(--line));
  box-shadow: 0 30px 54px -30px color-mix(in srgb, var(--pc) 55%, transparent);
  text-decoration: none;
}

.prod__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: 21.6px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--band) 100%);
  transition: background .3s ease;
}

.prod__media img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 14px rgba(20, 23, 26, .14));
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

.prod:hover .prod__media img {
  transform: scale(1.07) translateY(-4px) rotate(-.6deg);
}

.prod__body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 11.2px;
  padding: 22.4px;
  border-top: 1px solid var(--line);
}

.prod__body::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--pc);
  transition: width .35s cubic-bezier(.2, .7, .3, 1);
}

.prod:hover .prod__body::before {
  width: 100%;
}

.prod__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.prod__head h4 {
  font-size: 17.28px;
  line-height: 1.25;
}

.prod__arrow {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--band);
  border-radius: 2px;
  font-size: 12.48px;
  color: var(--pc);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}

.prod:hover .prod__arrow {
  background: var(--pc);
  color: #fff;
  transform: translateX(3px);
}

.prod__spec {
  display: flex;
  flex-wrap: wrap;
  gap: 6.4px;
}

.prod__spec li {
  padding: 4.16px 10.88px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 11.2px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--text-muted);
  transition: border-color .25s ease;
}

.prod:hover .prod__spec li {
  border-color: color-mix(in srgb, var(--pc) 35%, var(--line-2));
}

.prod p {
  flex: 1;
  font-size: 14.88px;
}

/* fallback for engines without color-mix() */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .prod:hover,
  .ind:hover {
    border-color: var(--line-2);
    box-shadow: var(--shadow-sm);
  }

  .prod__media {
    background: var(--paper);
  }
}


/* ==== 13  COMMITMENTS + SPEC-REQUEST PANEL (section "Why Himalaya") ==== */
.commit {
  border-top: 1px solid var(--line-2);
}

.commit li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 15.2px;
  padding: 16.8px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  transition: padding-left .25s ease;
}

.commit li:hover {
  padding-left: 12px;
}

.commit li i {
  display: grid;
  place-items: center;
  width: 27.2px;
  height: 27.2px;
  margin-top: 2.4px;
  background: var(--ink);
  border-radius: 2px;
  font-size: 11.52px;
  color: #fff;
}

.commit strong {
  display: block;
  margin-bottom: 2.4px;
  font-weight: 600;
  color: var(--text-strong);
}

.proof__cta {
  padding: 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.proof__cta-t {
  font-size: 17.6px;
  font-weight: 800;
  color: var(--ink);
}

.proof__cta-d {
  margin: 6.4px 0 19.2px;
  font-size: 15.2px;
  color: var(--text-muted);
}

.proof__cta-direct {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.proof__cta-lbl {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 10.56px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
}

.proof__cta-direct a {
  display: inline-flex;
  align-items: center;
  gap: 8.8px;
  font-size: 17.92px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.proof__cta-direct a:hover {
  color: var(--accent);
}

.proof__cta-direct a i {
  font-size: 13.6px;
  color: var(--accent);
}

.proof__cta-hrs {
  margin: 7.2px 0 0;
  font-family: var(--font-mono);
  font-size: 11.2px;
  letter-spacing: .04em;
  color: var(--muted);
}

@media (min-width: 992px) {
  .proof__cta {
    position: sticky;
    top: 136px;
  }
}


/* ==== 14  PROCESS TIMELINE ==== */
.timeline {
  position: relative;
}

.timeline__track {
  position: absolute;
  top: 34px;
  left: 10%;
  right: 10%;
  height: 3px;
  overflow: hidden;
  background: var(--line);
  border-radius: 2px;
}

.timeline__fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--grad-full);
  transition: width 1.4s cubic-bezier(.3, .8, .4, 1);
}

.timeline.is-drawn .timeline__fill {
  width: 100%;
}

.timeline__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.tstep {
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
}

.timeline.is-drawn .tstep {
  opacity: 1;
  transform: none;
}

.timeline.is-drawn .tstep:nth-child(1) { transition-delay: .10s; }
.timeline.is-drawn .tstep:nth-child(2) { transition-delay: .28s; }
.timeline.is-drawn .tstep:nth-child(3) { transition-delay: .46s; }
.timeline.is-drawn .tstep:nth-child(4) { transition-delay: .64s; }
.timeline.is-drawn .tstep:nth-child(5) { transition-delay: .82s; }

.tstep__node {
  position: relative;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  margin: 0 auto 17.6px;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 24px;
  color: var(--orange-ink);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.timeline.is-drawn .tstep__node {
  border-color: var(--orange);
  box-shadow: 0 12px 26px -14px rgba(179, 61, 20, .7);
}

.tstep:hover .tstep__node {
  transform: scale(1.06);
}

.tstep__num {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: var(--ink);
  border-radius: 2px;
  font-size: 12.48px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.tstep__body h4 {
  margin-bottom: 7.2px;
  font-size: 16.32px;
}

.tstep__body p {
  max-width: 30ch;
  margin-inline: auto;
  font-size: 14.72px;
}

@media (max-width: 900px) {
  .timeline__track {
    display: none;
  }

  .timeline__steps {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .tstep {
    position: relative;
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 20px;
    padding-bottom: 32px;
    text-align: left;
  }

  .tstep:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 34px;
    top: 74px;
    bottom: 0;
    width: 3px;
    background: var(--line);
    border-radius: 2px;
  }

  .tstep__node {
    margin: 0;
  }

  .tstep__body p {
    max-width: none;
    margin-inline: 0;
  }
}

@media (max-width: 420px) {
  .tstep {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 16px;
  }

  .tstep__node {
    width: 56px;
    height: 56px;
    font-size: 19.2px;
  }

  .tstep:not(:last-child)::before {
    left: 27px;
    top: 60px;
  }
}


/* ==== 15  FAQ ==== */
.faq {
  display: grid;
  gap: 13.6px;
  max-width: 832px;
  margin-inline: auto;
}

.faq details {
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: box-shadow .25s ease, border-color .25s ease;
}

.faq details[open] {
  border-color: var(--line-2);
  box-shadow: var(--shadow-xs);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18.4px 22.4px;
  font-size: 16.32px;
  font-weight: 700;
  color: var(--text-strong);
  list-style: none;
}

.faq summary:hover {
  color: var(--orange-ink);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: none;
  width: 11.2px;
  height: 11.2px;
  margin-top: -4.8px;
  border-right: 2px solid;
  border-bottom: 2px solid;
  border-color: var(--accent);
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.faq details[open] summary::after {
  margin-top: 3.2px;
  transform: rotate(-135deg);
}

.faq details[open] summary {
  border-bottom: 1px solid transparent;
}

.faq details.is-open summary {
  border-bottom-color: var(--line);
}

.faq .faq__a {
  overflow: hidden;
  padding: 0 22.4px;
  font-size: 15.52px;
  transition: height .32s cubic-bezier(.3, .8, .4, 1);
}

.faq__inner {
  padding: 5.6px 0 20.8px;
}


/* ==== 16  CONTACT ==== */
.contact {
  background: var(--band);
}

.contact__channels {
  display: grid;
  gap: 11.2px;
  margin-top: 30.4px;
}

.contact__channels a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14.4px;
  padding: 15.2px 17.6px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.contact__channels a:hover {
  border-color: var(--orange);
  box-shadow: var(--shadow-xs);
  transform: translateX(2px);
  text-decoration: none;
}

.contact__ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--orange-tint);
  border: 1px solid #F0D4C6;
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
  font-size: 16px;
  color: var(--orange-ink);
}

.contact__ico--wa {
  background: #E3F1EA;
  border-color: #C6E4D4;
  color: #0F7A54;
}

.contact__channels a:hover .contact__ico {
  background: var(--grad-sun);
  border-color: transparent;
  color: var(--ink);
}

.contact__channels a:hover .contact__ico--wa {
  background: #0F7A54;
  color: #fff;
}

/* :not(.contact__ico) — a bare span selector would out-rank the icon rule */
.contact__channels a > span:not(.contact__ico),
.contact__plant > span:not(.contact__ico) {
  font-size: 13.92px;
  line-height: 1.5;
  color: var(--text-muted);
}

.contact__channels b,
.contact__plant b {
  display: block;
  margin-bottom: 1.92px;
  font-size: 15.68px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.contact__plant {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 14.4px;
  margin-top: 22.4px;
  padding-top: 22.4px;
  border-top: 1px solid var(--line);
}

.contact__plant .contact__ico {
  margin-top: 1.6px;
}

.contact__card {
  position: relative;
  overflow: hidden;
  padding: clamp(22.4px, 3vw, 33.6px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.contact__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--grad-full);
}

.contact__privacy {
  font-family: var(--font-mono);
  font-size: 13.44px;
  color: var(--text-faint);
}


/* ==== 17  FORMS + QUOTE MODAL ==== */
.form-control,
.form-select {
  padding: 11.2px 14.4px;
  background: var(--white);
  border-color: var(--line-2);
  border-radius: var(--r-sm);
  font-size: 15.52px;
  color: var(--text-strong);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(179, 61, 20, .12);
}

.form-control::placeholder {
  color: var(--text-faint);
}

.form-label {
  margin-bottom: 5.6px;
  font-family: var(--font-mono);
  font-size: 11.84px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.req {
  color: var(--orange-ink);
}

.quote-modal {
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

.quote-modal::before {
  content: "";
  height: 4px;
  background: var(--grad-full);
}

.quote-modal__head {
  align-items: flex-start;
  padding: 21.6px 25.6px;
  background: var(--ink);
  border-bottom: 0;
  color: #fff;
}

.quote-modal__head .modal-title {
  font-weight: 800;
}

.quote-modal__eyebrow {
  margin: 0 0 5.6px;
  font-family: var(--font-mono);
  font-size: 11.52px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber);
}

.quote-modal__body {
  padding: 25.6px;
}

.quote-modal__intro {
  max-width: 62ch;
  margin-bottom: 22.4px;
  font-size: 15.52px;
}

.quote-form__note {
  display: flex;
  align-items: flex-start;
  gap: 11.2px;
  padding: 13.6px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 14.4px;
  color: var(--text-muted);
}

.quote-form__note > i {
  flex: none;
  margin-top: 1.6px;
  font-size: 16.8px;
  color: var(--orange);
}

.quote-form__privacy {
  font-size: 13.44px;
  color: var(--text-faint);
}

@media (max-width: 575.98px) {
  .quote-modal__head {
    padding: 17.6px 18.4px;
  }

  .quote-modal__body {
    padding: 18.4px;
  }
}

/* ---- Lead forms: honeypot, messages, phone input ---- */
.lead-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lead-alert,
.lead-note {
  margin: 0;
  padding: 12px 14px;
  scroll-margin-top: 130px;                       /* clears the sticky header on #lead-… jumps */
  background: var(--orange-tint);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--r-sm);
  font-size: 14.4px;
  color: var(--ink);
}

.lead-alert i {
  margin-right: 6px;
  color: var(--accent);
}

.lead-note {
  flex-basis: 100%;
}

.iti {
  display: block;
  width: 100%;
}

/* the badge sits under the floating buttons; Google allows hiding it when every form shows .lead-recaptcha */
.grecaptcha-badge {
  visibility: hidden;
}

.lead-recaptcha {
  display: block;
  margin-top: 4px;
  font-size: 11.52px;
  color: var(--faint);
}

.lead-recaptcha a {
  color: inherit;
  text-decoration: underline;
}

/* ---- Quick-Connect (components/quick-connect.php) ---- */
.btn--wa {
  background: var(--wa);
  border-color: var(--wa);
}

/* ink on WhatsApp green: 9.3 (white would be 1.98) */
.btn--wa,
.btn--wa:hover,
.btn--wa:focus,
.btn--wa:active,
.btn--wa:focus-visible {
  color: var(--ink);
}

.btn--wa:hover {
  background: #1EBE5A;
  border-color: #1EBE5A;
}

.qc__tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 16px;
  padding: 4px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.qc__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: 13.6px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-muted);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.qc__tab i {
  font-size: 16px;
}

.qc__tab:hover {
  color: var(--ink);
}

.qc__tab.is-active {
  background: var(--white);
  border-color: var(--line-2);
  box-shadow: var(--shadow-xs);
  color: var(--accent);
}

.qc__direct {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 18px;
  font-size: 14.4px;
  color: var(--text-muted);
}

.qc__direct a {
  font-weight: 700;
  color: var(--ink);
}

.qc__direct a i {
  margin-right: 4px;
  font-size: 12.8px;
  color: var(--accent);
}

.qc__direct span {
  font-family: var(--font-mono);
  font-size: 11.2px;
  letter-spacing: .06em;
  color: var(--faint);
}

.qc__submit {
  justify-content: center;
}

.qc .lead-note {
  margin-top: 16px;
}

.qc__success {
  padding: 12px 0 4px;
  text-align: center;
}

.qc__success-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  background: var(--orange-tint);
  border-radius: 50%;
  font-size: 24px;
  color: var(--accent);
}

.qc__success h4 {
  font-size: 20px;
}

.qc__success p {
  max-width: 40ch;
  margin: 8px auto 18px;
}

.fabtn {
  border: 0;
  cursor: pointer;
}

.iti__country-list {
  z-index: 1060;                                  /* above the Bootstrap modal */
  max-width: min(360px, 80vw);
  white-space: normal;
}


/* ==== 18  FOOTER + FLOATING BUTTONS ==== */
.site-footer {
  background: var(--ink);
  font-size: 15.04px;
  color: #B6BDC5;
}

.site-footer a {
  color: #B6BDC5;
}

.site-footer a:hover {
  color: #fff;
}

.footer__top {
  padding-block: clamp(44px, 5.5vw, 68px);
}

.footer__brand {
  max-width: 32ch;
}

.footer__logo {
  width: auto;
  height: 78px;
}

.footer__tagline {
  margin-top: 17.6px;
  font-family: var(--font-mono);
  font-size: 11.2px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber);
}

.footer__blurb {
  max-width: 38ch;
  margin-top: 13.6px;
  line-height: 1.7;
  color: #A8B0B8;
}

.social {
  display: flex;
  gap: 9.6px;
  margin-top: 22.4px;
}

.social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--r-sm);
  transition: background .18s ease, border-color .18s ease;
}

.social a:hover {
  background: var(--accent-btn);
  border-color: var(--accent-btn);
}

.social i {
  font-size: 15.2px;
}

.footer__col {
  padding-top: 5.6px;
}

.footer__head {
  margin: 0 0 18.4px;
  padding-bottom: 11.2px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-family: var(--font-mono);
  font-size: 11.2px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}

/* 2px padding = 24px tap targets; the gap is 4px smaller to keep the rhythm */
.footer__links {
  display: grid;
  gap: 5.92px;
}

.footer__links a {
  display: inline-block;
  padding-block: 2px;
  font-size: 14.88px;
  line-height: 1.45;
  transition: padding-left .16s ease, color .16s ease;
}

.footer__links a:hover {
  padding-left: 3.2px;
  text-decoration: none;
}

.footer__contact {
  display: grid;
  gap: 16px;
}

.footer__contact-item {
  display: grid;
  grid-template-columns: 17.6px minmax(0, 1fr);
  align-items: start;
  gap: 11.2px;
  font-size: 14.88px;
}

/* lets the email address wrap instead of widening the column */
.footer__contact-item > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.footer__contact-item > i {
  width: 17.6px;
  margin-top: 4.8px;
  font-size: 15.2px;
  color: var(--amber);
}

.footer__contact-item a {
  display: inline-block;
  padding-block: 1px;                             /* 24px+ tap target */
}

.footer__hours {
  font-family: var(--font-mono);
  color: #7E868F;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 22.4px 25.6px;
  border-top: 1px solid rgba(255, 255, 255, .13);
  font-size: 13.92px;
}

.footer__copy a {
  color: #C2C8CF;
  text-decoration: underline;
}

.footer__copy a:hover {
  color: var(--amber);
}

.footer__sep {
  margin-inline: 5.6px;
  opacity: .4;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

@media (max-width: 991.98px) {
  .footer__brand {
    max-width: 46ch;
  }

  .footer__logo {
    height: 68px;
  }

  .footer__bottom {
    padding-bottom: 88px;
  }
}

@media (max-width: 575.98px) {
  .footer__logo {
    height: 60px;
  }

  .footer__bottom {
    justify-content: flex-start;
  }

  .footer__legal {
    gap: 17.6px;
  }
}

/* .fabtn, not .fab — .fab is reserved by Font Awesome Brands */
.fabs {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  display: grid;
  gap: 10.4px;
}

.fabtn {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease;
}

.fabtn:hover {
  transform: scale(1.07);
}

.fabtn i {
  font-size: 18.4px;
  color: #fff;
}

.fabtn--wa {
  background: var(--wa);
}

.fabtn--call {
  background: var(--accent-btn);
}


/* ==== 19  TRANSPARENT CHROME OVER THE HERO (opt-in: $header_overlay) ==== */
/* --chrome-h = measured topbar + header height; the hero is pulled up by exactly that. */
.page--overlay-header {
  --chrome-h: 137px;
}

.page--overlay-header .hero {
  margin-top: calc(-1 * var(--chrome-h));
  padding-top: calc(var(--chrome-h) + clamp(24px, 3vw, 44px));
}

/* lightest scrim that keeps the chrome AA over the footage */
.page--overlay-header .hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--chrome-h) + 56px);
  background: linear-gradient(to bottom,
      rgba(248, 249, 250, .92) 0%,
      rgba(248, 249, 250, .84) 46%,
      rgba(248, 249, 250, .55) 78%,
      rgba(248, 249, 250, 0) 100%);
  pointer-events: none;
}

@media (max-width: 991px) {
  .page--overlay-header {
    --chrome-h: 135px;
  }
}

@media (max-width: 575px) {
  .page--overlay-header {
    --chrome-h: 133px;
  }
}

/* z-index 2: the pulled-up hero would otherwise paint over the topbar */
.topbar--overlay {
  position: relative;
  z-index: 2;
  background: transparent;
  color: var(--text-body);
}

.topbar--overlay a,
.topbar--overlay i {
  color: var(--text-body);
}

.topbar--overlay i {
  opacity: 1;
}

.topbar--overlay a:hover {
  color: var(--ink);
}

/* darker than orange-ink here: 5.00 measured */
.topbar--overlay .topbar__phone,
.topbar--overlay .topbar__phone i {
  color: #A63611 !important;
}

.topbar--overlay .topbar__divider {
  background: var(--line-2);
}

/* transparent until it sticks, then solid again */
.site-header--overlay {
  background: transparent;
  border-bottom: 0;
}

.site-header--overlay .header-sweep {
  opacity: 0;
  transition: opacity .2s ease;
}

.site-header--overlay.is-stuck {
  background: var(--white);
  border-bottom: 1px solid var(--line-2);
  box-shadow: var(--shadow-xs);
}

.site-header--overlay.is-stuck .header-sweep {
  opacity: 1;
}


/* ==== 20  PAGE HEAD ==== */
.pagehead,
.utilpage {
  background:
    linear-gradient(100deg,
      rgba(246, 247, 249, .97) 0%,
      rgba(246, 247, 249, .9) 45%,
      rgba(240, 242, 245, .62) 100%),
    url('../img/hero/flute.svg') 0 0 / 34px 56px repeat,
    linear-gradient(to bottom, #E7EAEE 0%, #F2F4F6 62%, #F6F7F9 100%);
  border-bottom: 1px solid var(--line-2);
}

.pagehead {
  padding-block: clamp(36px, 4.5vw, 64px) clamp(40px, 5vw, 72px);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-family: var(--font-mono);
  font-size: 11.2px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.crumbs li + li::before {
  content: "/";
  margin-right: 10px;
  color: var(--line-3);
}

.crumbs a {
  color: var(--text-muted);
}

.crumbs a:hover {
  color: var(--accent);
}

.crumbs [aria-current] {
  color: var(--ink);
}

.pagehead__title {
  max-width: 24ch;
  margin-top: clamp(14px, 1.8vw, 22px);
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.08;
  letter-spacing: -.035em;
}


/* ==== 21  CTA BAND ==== */
.ctaband {
  padding-block: clamp(48px, 6vw, 80px);
  background: var(--band);
}

.ctaband__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px 48px;
  overflow: hidden;
  padding: clamp(28px, 3.5vw, 44px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.ctaband__inner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--grad-full);
}

.ctaband__title {
  font-size: clamp(24px, 2.6vw, 32px);
}

.ctaband__text {
  max-width: 58ch;
  margin-top: 10px;
}

.ctaband__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
}

.ctaband__phone {
  display: inline-flex;
  align-items: center;
  gap: 8.8px;
  font-size: 17.28px;
  font-weight: 600;
  color: var(--ink);
}

.ctaband__phone:hover {
  color: var(--accent);
  text-decoration: none;
}

.ctaband__phone i {
  font-size: 13.6px;
  color: var(--accent);
}

@media (max-width: 991px) {
  .ctaband__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ==== 22  ABOUT PAGE ==== */
.prose {
  max-width: 62ch;
  color: var(--text-body);
}

.prose p + p {
  margin-top: 16px;
}

/* ---- Company data sheet ---- */
.factsheet {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.factsheet__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: var(--ink);
}

.factsheet__title {
  font-size: 16.32px;
  font-weight: 700;
  color: #fff;
}

.factsheet__ref {
  font-family: var(--font-mono);
  font-size: 10.88px;
  letter-spacing: .12em;
  color: var(--amber);
}

.factsheet__list {
  margin: 0;
  padding: 6px 24px 10px;
}

.factsheet__row {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.factsheet__row:last-child {
  border-bottom: 0;
}

.factsheet__row dt {
  font-family: var(--font-mono);
  font-size: 10.56px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}

.factsheet__row dd {
  margin: 0;
  font-size: 15.2px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
  color: var(--ink);
}

@media (max-width: 420px) {
  .factsheet__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

/* ---- Plant figure: a ticked sheet around the photograph ---- */
.plantfig {
  position: relative;
  margin: 0;
  padding: 10px;
  background: var(--white);
  border: 1px solid var(--line-2);
  box-shadow: 0 18px 40px -24px rgba(20, 23, 26, .45);
}

.plantfig::before,
.plantfig::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--accent);
}

.plantfig::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}

.plantfig::after {
  right: -1px;
  bottom: -1px;
  border-left: 0;
  border-top: 0;
}

.plantfig img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.plantfig figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 10px 2px 0;
  font-family: var(--font-mono);
  font-size: 10.56px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---- In-house process list ---- */
.flowlist {
  border-top: 1px solid var(--line-2);
}

.flowlist li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.flowlist__n {
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: 10.88px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
  color: var(--faint);
}

.flowlist h4 {
  font-size: 17.28px;
}

.flowlist p {
  margin-top: 3px;
  font-size: 15.2px;
}

/* ---- Working principles ---- */
.principle {
  position: relative;
  padding: 26px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .22s ease;
}

.principle::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 24px;
  width: 32px;
  height: 2px;
  background: var(--vt, var(--accent));
}

.principle:hover {
  border-color: var(--line-3);
}

.principle__n {
  font-family: var(--font-mono);
  font-size: 12.8px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--accent);
}

.principle h4 {
  margin-top: 16px;
  font-size: 17.6px;
}

.principle p {
  margin-top: 8px;
  font-size: 15.2px;
}

/* ---- Verticals: mega-menu cards, laid out as a page grid ---- */
.about__verticals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.about__verticals .megacard {
  background: var(--white);
  border-color: var(--line);
}

.about__verticals .megacard:hover {
  background: var(--white);
  border-color: var(--line-3);
}

@media (max-width: 1199px) {
  .about__verticals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .about__verticals {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ==== 23  CONTACT PAGE ==== */
.contact-page__formhead {
  margin-bottom: 18px;
  font-size: clamp(20px, 2vw, 24px);
}

.mapcard {
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.mapcard__map {
  display: block;
  width: 100%;
  height: clamp(300px, 34vw, 440px);
  border: 0;
}

.mapcard__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  padding: 18px 22px;
  border-top: 1px solid var(--line);
}

.mapcard__foot p {
  font-size: 14.4px;
  line-height: 1.5;
  color: var(--text-muted);
}

.mapcard__foot b {
  display: block;
  font-size: 15.68px;
  color: var(--ink);
}


/* ==== 24  UTILITY PAGES ==== */
.utilpage {
  padding-block: clamp(56px, 8vw, 120px);
}

.sheet {
  position: relative;
  max-width: 800px;
  margin-inline: auto;
  padding: clamp(32px, 5vw, 60px) clamp(22px, 5vw, 60px);
  background: var(--white);
  border: 1px solid var(--line-2);
  box-shadow: 0 18px 40px -24px rgba(20, 23, 26, .45);
  text-align: center;
}

.sheet::before,
.sheet::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--accent);
}

.sheet::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}

.sheet::after {
  right: -1px;
  bottom: -1px;
  border-left: 0;
  border-top: 0;
}

.sheet__ico {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  background: #E3F1EA;
  border: 1px solid #C6E4D4;
  border-radius: var(--r-sm);
  font-size: 24px;
  color: #0F7A54;
}

.sheet__ref {
  display: inline-block;
  margin-bottom: 22px;
  padding: 5px 10px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 10.56px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}

.sheet__title {
  max-width: 20ch;
  margin-inline: auto;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.sheet .lede {
  margin-inline: auto;
}

.sheet__path {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.sheet .btn-row {
  justify-content: center;
  margin-top: 28px;
}

.sheet__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 24px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 15.2px;
}

.sheet__links-lbl {
  font-family: var(--font-mono);
  font-size: 10.56px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
}

/* as the page h2 it must still look like a label, not a heading */
h2.sheet__links-lbl {
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .13em;
  color: var(--faint);
}

.nextsteps__head {
  margin-top: 36px;
}

.nextsteps__head + .nextsteps {
  margin-top: 14px;
}

.sheet__sooner {
  margin-top: 32px;
}

.sheet__sooner .btn-row {
  margin-top: 12px;
}

/* ---- Thank-you: what happens next ---- */
.nextsteps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 36px;
  text-align: left;
}

.nextsteps li {
  padding: 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.nextsteps__n {
  font-family: var(--font-mono);
  font-size: 11.2px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--accent);
}

.nextsteps h3 {
  margin-top: 8px;
  font-size: 16.32px;
  letter-spacing: -.01em;
}

.nextsteps p {
  margin-top: 6px;
  font-size: 14.4px;
}

@media (max-width: 767px) {
  .nextsteps {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ==== 25  SPEC TABLES ==== */
.spectable__cap {
  margin-bottom: 12px;
  font-size: 17.28px;
}

.spectable-wrap {
  overflow-x: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.spectable {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.2px;
}

.spectable thead th {
  padding: 12px 16px;
  background: var(--white);
  border-bottom: 1px solid var(--line-2);
  font-family: var(--font-mono);
  font-size: 10.56px;
  font-weight: 500;
  letter-spacing: .12em;
  text-align: left;
  text-transform: uppercase;
  color: var(--faint);
}

.spectable tbody th,
.spectable td {
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.spectable tbody tr:first-child th,
.spectable tbody tr:first-child td {
  border-top: 0;
}

.spectable tbody th {
  font-family: var(--font-mono);
  font-size: 13.6px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink);
}

.spectable td:nth-child(2) {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink);
}

.spectable__note {
  max-width: 72ch;
  margin-top: 24px;
  font-size: 14.4px;
  color: var(--text-muted);
}


/* ==== 26  BLOG ==== */
/* ---- post card: cover, meta, title, excerpt ---- */
.postcard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: inherit;
  transition: box-shadow .28s ease, border-color .28s ease;
}

.postcard:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow);
  text-decoration: none;
}

.postcard__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;  background: var(--ink);
}

.postcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

.postcard:hover .postcard__media img {
  transform: scale(1.04);
}

.postcard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 22px;
  border-top: 1px solid var(--line);
}

.postcard__meta,
.post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-family: var(--font-mono);
  font-size: 10.88px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}

.postcard h4 {
  font-size: 17.28px;
  line-height: 1.3;
}

.postcard__text {
  flex: 1;
  font-size: 14.88px;
}

.postcard__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.4px;
  font-weight: 600;
  color: var(--accent);
}

.postcard__more i {
  font-size: 12px;
  transition: transform .25s ease;
}

.postcard:hover .postcard__more i {
  transform: translateX(3px);
}

/* ---- article: text at a readable measure, sticky tools beside it ---- */
.post {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: clamp(32px, 5vw, 72px);
}

.post__main {
  min-width: 0;
  max-width: 760px;
}

.post__meta {
  gap: 6px 18px;
  margin-bottom: 20px;
  font-size: 11.2px;
}

.post__cover {
  margin: 0 0 clamp(28px, 3.5vw, 40px);
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.post__cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}

.post__title {
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -.025em;
}

.post__body {
  margin-top: 16px;
  color: var(--text-body);
}

.post__lede {
  font-size: clamp(16.48px, 1.4vw, 18.4px);
  color: var(--text-strong);
}

.post__body h3 {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: clamp(19.2px, 1.8vw, 22.4px);
  letter-spacing: -.02em;
  scroll-margin-top: 110px;
}

.post__body p,
.post__body ul,
.post__body ol,
.post__body .spectable-wrap {
  margin-top: 14px;
}

/* the global reset strips list markers — article lists need them back */
.post__body ul {
  padding-left: 22px;
  list-style: disc;
}

.post__body ol {
  padding-left: 26px;
  list-style: decimal;
}

.post__body li + li {
  margin-top: 8px;
}

.post__body ul li::marker {
  color: var(--line-3);
}

.post__body ol li::marker {
  font-family: var(--font-mono);
  font-size: .85em;
  color: var(--accent);
}

.post__body strong {
  color: var(--text-strong);
}

/* links in running text carry an underline, not colour alone */
.post__body a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* prose tables wrap their text; the capabilities tables keep values on one line */
.post__body .spectable tbody th,
.post__body .spectable td {
  white-space: normal;
}

.post__body .spectable tbody th {
  min-width: 96px;
}

.post__sticky {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 20px;
}

.post__toc {
  padding: 20px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.post__toc-lbl {
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 10.56px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
}

.post__toc ol {
  counter-reset: toc;
}

.post__toc li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  counter-increment: toc;
}

.post__toc li::before {
  content: counter(toc, decimal-leading-zero);
  padding-top: 7px;
  font-family: var(--font-mono);
  font-size: 10.56px;
  color: var(--faint);
}

.post__toc a {
  display: block;
  padding: 5px 0;
  font-size: 14.4px;
  line-height: 1.4;
  color: var(--text-muted);
}

.post__toc a:hover {
  color: var(--accent);
  text-decoration: none;
}

.post__ask {
  position: relative;
  overflow: hidden;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

.post__ask::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--grad-full);
}

.post__ask-title {
  font-size: 17.28px;
  font-weight: 700;
  color: var(--ink);
}

.post__ask-title + p {
  margin-top: 8px;
  font-size: 14.4px;
}

.post__ask .btn {
  justify-content: center;
  width: 100%;
  margin-top: 16px;
}

.post__ask-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;                                /* 12px visible; padding makes a 24px+ target */
  padding-block: 3px;
  font-size: 14.4px;
  font-weight: 600;
  color: var(--ink);
}

.post__ask-link i {
  width: 16px;
  color: var(--accent);
}

.post__ask-link:hover {
  color: var(--accent);
  text-decoration: none;
}

/* ---- the product behind the article ---- */
.postprod {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin-top: 48px;
  padding: 16px 20px 16px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: inherit;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.postprod:hover {
  border-color: color-mix(in srgb, var(--pc) 45%, var(--line));
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.postprod__media {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 10px;
  background: linear-gradient(180deg, var(--white) 0%, var(--band) 100%);
  border-radius: var(--r-sm);
}

.postprod__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.postprod__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.postprod__lbl {
  font-family: var(--font-mono);
  font-size: 10.56px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}

.postprod__name {
  font-size: 18.4px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}

.postprod__text {
  font-size: 14.4px;
}

.postprod .prod__spec {
  margin-top: 4px;
}

.postprod__chip {
  padding: 4.16px 10.88px;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 11.2px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-muted);
}

.postprod:hover .prod__arrow {
  background: var(--pc);
  color: #fff;
  transform: translateX(3px);
}

.section-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  max-width: none;
}

@media (max-width: 991px) {
  .post {
    grid-template-columns: minmax(0, 1fr);
  }

  .post__main {
    max-width: none;
  }

  /* below the article on small screens, so the contents list has no use */
  .post__sticky {
    position: static;
  }

  .post__toc {
    display: none;
  }
}

@media (max-width: 575px) {
  .postprod {
    grid-template-columns: 88px minmax(0, 1fr);
    padding-right: 16px;
  }

  .postprod .prod__arrow {
    display: none;
  }
}

/* ==== 27  LEGAL PAGES ==== */
.legal {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: start;
  gap: clamp(32px, 5vw, 72px);
}

.legal__toc {
  position: sticky;
  top: 104px;
  padding: 20px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.legal__toc-lbl {
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 10.56px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
}

.legal__toc a {
  display: block;
  padding: 5px 0;
  font-size: 14.4px;
  line-height: 1.4;
  color: var(--text-muted);
}

.legal__toc a:hover {
  color: var(--accent);
  text-decoration: none;
}

.legal__doc {
  max-width: 72ch;
  color: var(--text-body);
}

.legal__title {
  margin-bottom: 8px;
  font-size: clamp(22.4px, 2.4vw, 28.8px);
  letter-spacing: -.025em;
}

.legal__meta {
  font-family: var(--font-mono);
  font-size: 11.2px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}

.legal__intro {
  margin-top: 14px;
  font-size: clamp(16.48px, 1.4vw, 18.4px);
  color: var(--text-strong);
}

.legal__doc h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: clamp(19.2px, 1.8vw, 22.4px);
  letter-spacing: -.02em;
  scroll-margin-top: 110px;
}

.legal__doc h3 span {
  font-family: var(--font-mono);
  font-size: 11.2px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--accent);
}

.legal__doc p,
.legal__doc ul,
.legal__doc .spectable-wrap {
  margin-top: 14px;
}

/* the global reset strips list bullets — legal text needs them back */
.legal__doc ul {
  padding-left: 22px;
  list-style: disc;
}

.legal__doc li + li {
  margin-top: 6px;
}

.legal__doc li::marker {
  color: var(--line-3);
}

.legal__doc strong {
  color: var(--text-strong);
}

.legal__card {
  display: block;
  margin-top: 14px;
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-style: normal;
  line-height: 1.7;
}

.legal__card b {
  display: block;
  color: var(--ink);
}

@media (max-width: 991px) {
  .legal {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal__toc {
    position: static;
  }

  .legal__toc ol {
    columns: 2;
    column-gap: 24px;
  }
}

@media (max-width: 575px) {
  .legal__toc ol {
    columns: 1;
  }
}


/* ==== 28  PRODUCT PAGES + HUB ==== */
.prodstage {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 48px);
  background: linear-gradient(180deg, var(--paper) 0%, var(--band) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.prodstage::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--pc, var(--accent));
}

.prodintro__chips {
  margin-top: 22px;
}

.prodintro__chips + .btn-row {
  margin-top: 24px;
}

.specnote {
  max-width: 62ch;
  margin-top: 16px;
  font-size: 14.4px;
  color: var(--text-muted);
}

.prodopts__head {
  margin-bottom: 14px;
  font-size: 17.28px;
}

.spectable tbody th.spectable__name {
  font-family: var(--font);
  font-size: 15.2px;
  white-space: normal;
}

.spectable__name a {
  color: var(--ink);
}

.spectable__name a:hover {
  color: var(--accent);
}

@media (min-width: 992px) {
  .prodopts__head {
    margin-top: 118px;
  }
}


/* ==== 29  INDUSTRY PAGES + HUB ==== */
.principle__fix {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 14.4px;
  font-weight: 600;
  color: var(--ink);
}

.vfact .factsheet__title i {
  margin-right: 6px;
  color: var(--amber);
}


/* ==== 30  LOCATION PAGE (Ahmedabad) ==== */
.areas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.areas li {
  padding: 7px 12px;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 12.8px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink);
}

.areas__beyond {
  max-width: 56ch;
  margin-top: 20px;
  font-size: 15.2px;
  color: var(--text-muted);
}


/* ==== 31  SCROLL REVEAL, PRINT, REDUCED MOTION ==== */
/* .has-reveal is added by main.js, so without JS nothing is hidden */
.has-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease var(--reveal-delay, 0ms), transform .6s cubic-bezier(.2, .7, .3, 1) var(--reveal-delay, 0ms);
}

.has-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media print {
  .fabs,
  .topbar,
  .nav,
  .nav-burger {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .btn--accent::before {
    transition: none;
  }
}