/* ==========================================================================
   Chamundi Extrusions Pvt. Ltd. — premium rebuild design system
   Deployed to  generated_sites/chamundi-extrusions-pvt-ltd/custom.css  (persistent)
   and to       current/assets/site.css                                 (linked)
   Brand: indigo #2F3C84 + orange #EF7F1A, both sampled from the company logo.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --ink:        #0B1030;
  --ink-2:      #131A45;
  --navy:       #1B2559;
  --brand:      #2F3C84;
  --brand-600:  #3B4AA3;
  --brand-300:  #8f99cf;
  --brand-50:   #EEF0FA;
  --amber:      #EF7F1A;
  --amber-600:  #D86C09;
  --amber-50:   #FFF3E6;
  --paper:      #FFFFFF;
  --mist:       #F4F6FC;
  --mist-2:     #EBEEF8;
  --line:       #E1E6F2;
  --line-dark:  rgba(255,255,255,.14);
  --text:       #171C36;
  --muted:      #5A6482;
  --muted-dark: #A9B2D6;

  --shell: 1240px;
  --gut: clamp(1.15rem, 0.6rem + 2vw, 3rem);

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-xl: 30px;

  --sh-1: 0 1px 2px rgba(11,16,48,.05), 0 8px 24px -14px rgba(11,16,48,.22);
  --sh-2: 0 2px 4px rgba(11,16,48,.05), 0 22px 46px -22px rgba(11,16,48,.30);
  --sh-3: 0 30px 70px -30px rgba(11,16,48,.45);

  --ease: cubic-bezier(.22,.7,.28,1);
  --dur: .55s;
}

/* ---------- reset (low specificity so components always win) ---------- */
*, *::before, *::after { box-sizing: border-box; }
:where(html) { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
:where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd) { margin: 0; }
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
:where(img, svg, video, canvas) { display: block; max-width: 100%; }
:where(img) { height: auto; }
:where(a) { color: inherit; text-decoration: none; }
:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(table) { border-collapse: collapse; width: 100%; }

body.ch {
  font-family: 'Inter', ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---------- type ---------- */
.ch h1, .ch h2, .ch h3, .ch h4, .ch h5 {
  font-family: 'Sora', ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.ch h1 { font-size: clamp(2.5rem, 1.35rem + 3.6vw, 4.5rem); letter-spacing: -0.032em; }
.ch h2 { font-size: clamp(1.95rem, 1.35rem + 2.1vw, 3.05rem); letter-spacing: -0.028em; }
.ch h3 { font-size: clamp(1.22rem, 1.05rem + 0.62vw, 1.6rem); }
.ch h4 { font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.22rem); }
.ch p  { color: var(--muted); }
.ch strong { color: var(--ink); font-weight: 600; }

.lead { font-size: clamp(1.08rem, 1.0rem + 0.42vw, 1.28rem); line-height: 1.72; color: var(--muted); }
.tiny { font-size: .82rem; }

/* ---------- layout ---------- */
.shell { width: min(var(--shell), 100% - var(--gut) * 2); margin-inline: auto; }
.shell-wide { width: min(1560px, 100% - var(--gut) * 2); margin-inline: auto; }
.sect { padding-block: clamp(4rem, 2.4rem + 5.4vw, 7.5rem); }
.sect-sm { padding-block: clamp(3rem, 2rem + 3.4vw, 5rem); }
.mist { background: var(--mist); }
.dark { background: var(--ink); color: #EEF1FB; }
.dark h1, .dark h2, .dark h3, .dark h4 { color: #fff; }
.dark p { color: var(--muted-dark); }

.grid { display: grid; gap: clamp(1.1rem, .6rem + 1.4vw, 2rem); }
/* A grid track is minmax(auto, …) by default, so a wide child (the spec tables'
   min-width:460px) blows the column out instead of scrolling inside it. */
.grid > *, .split > * { min-width: 0; }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 225px), 1fr)); }

/* ---------- section heading ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: 'Sora', sans-serif;
  font-size: .74rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--amber); line-height: 1;
}
.eyebrow::before { content: ""; width: 2rem; height: 2px; background: currentColor; flex: none; }
.eyebrow.c-brand { color: var(--brand); }
.shead { max-width: 46rem; }
.shead .eyebrow { margin-bottom: 1.1rem; }
.shead h2 + p { margin-top: 1.1rem; }
.shead.center { margin-inline: auto; text-align: center; }
.shead.center .eyebrow::before { display: none; }
.shead.center .eyebrow { padding-inline: 0; }

/* ---------- buttons ---------- */
.btn {
  --bg: var(--brand); --fg: #fff;
  position: relative; display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.7rem; border: 0; border-radius: 999px; cursor: pointer;
  font-family: 'Sora', sans-serif; font-size: .95rem; font-weight: 600; letter-spacing: -.01em;
  background: var(--bg); color: var(--fg); overflow: hidden; isolation: isolate;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--bg) 85%, #000);
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.28), transparent 80%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px color-mix(in srgb, var(--bg) 80%, #000); }
.btn:hover::after { transform: translateX(120%); }
.btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.btn .ico { width: 1.05em; height: 1.05em; flex: none; transition: transform .3s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }
.btn-amber { --bg: var(--amber); }
.btn-ghost {
  --bg: transparent; --fg: var(--ink);
  box-shadow: none; border: 1.5px solid var(--line);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); box-shadow: var(--sh-1); }
.dark .btn-ghost, .btn-ghost.on-dark { --fg: #fff; border-color: rgba(255,255,255,.32); }
.dark .btn-ghost:hover, .btn-ghost.on-dark:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.08); }
.btn-sm { padding: .68rem 1.25rem; font-size: .875rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: 'Sora', sans-serif; font-weight: 600; font-size: .92rem; color: var(--brand);
}
.link-arrow .ico { width: 1em; height: 1em; transition: transform .3s var(--ease); }
.link-arrow:hover .ico { transform: translateX(4px); }

/* ==========================================================================
   Loading screen — logo mark draws itself, then the panel splits away
   ========================================================================== */
#chLoader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--ink);
  transition: opacity .5s ease, visibility .5s ease;
}
#chLoader .ldr-wrap { display: grid; justify-items: center; gap: 1.6rem; }
#chLoader .ldr-mark { width: clamp(112px, 22vw, 168px); height: auto; }
#chLoader .ldr-stroke {
  fill: none; stroke-width: 22; stroke-linecap: butt; stroke-linejoin: miter;
  stroke-dasharray: 320; stroke-dashoffset: 320;
  animation: ldrDraw .95s var(--ease) forwards;
}
#chLoader .s-c { stroke: #fff; }
#chLoader .s-w { stroke: #fff; stroke-width: 20; }
#chLoader .s-b { stroke: var(--amber); stroke-width: 20; }
#chLoader .b1 { animation-delay: .34s; }
#chLoader .b2 { animation-delay: .46s; }
#chLoader .b3 { animation-delay: .58s; }
@keyframes ldrDraw { to { stroke-dashoffset: 0; } }
#chLoader .ldr-word {
  font-family: 'Sora', sans-serif; font-size: .74rem; font-weight: 600;
  letter-spacing: .42em; text-transform: uppercase; color: #fff;
  opacity: 0; animation: ldrFade .6s .75s ease forwards; padding-left: .42em;
}
@keyframes ldrFade { to { opacity: .92; } }
#chLoader .ldr-bar {
  width: clamp(140px, 26vw, 210px); height: 2px; border-radius: 2px;
  background: rgba(255,255,255,.16); overflow: hidden;
}
#chLoader .ldr-bar i {
  display: block; height: 100%; width: 40%; border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-600), var(--amber));
  animation: ldrSlide 1.15s var(--ease) infinite;
}
@keyframes ldrSlide { 0% { transform: translateX(-110%); } 100% { transform: translateX(320%); } }
html.ldr-done #chLoader { opacity: 0; visibility: hidden; pointer-events: none; }
html.ldr-on, html.ldr-on body { overflow: hidden; }

/* ==========================================================================
   Header
   ========================================================================== */
.topbar {
  background: var(--ink); color: #C9D0EE; font-size: .84rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.topbar .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1.4rem; min-height: 44px; }
.topbar .meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.5rem; }
.topbar a { display: inline-flex; align-items: center; gap: .5rem; transition: color .25s; }
.topbar a:hover { color: var(--amber); }
.topbar .ico { width: 1.05em; height: 1.05em; color: var(--amber); flex: none; }
.topbar .socials { display: flex; gap: .4rem; }
.topbar .socials a {
  width: 30px; height: 30px; border-radius: 50%; justify-content: center;
  background: rgba(255,255,255,.08); transition: background .25s, transform .25s, color .25s;
}
.topbar .socials a:hover { background: var(--amber); color: #fff; transform: translateY(-2px); }
.topbar .socials .ico { color: currentColor; width: 15px; height: 15px; }

.hdr {
  position: sticky; top: 0; z-index: 900;
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.hdr.stuck { box-shadow: 0 10px 30px -18px rgba(11,16,48,.4); background: rgba(255,255,255,.96); }
.hdr .row { display: flex; align-items: center; gap: 1rem; min-height: 78px; }
.brand { display: flex; align-items: center; flex: none; margin-right: auto; }
.brand img { width: clamp(178px, 22vw, 236px); height: auto; }

.nav { display: none; align-items: center; gap: .1rem; }
.nav > li { position: relative; }
.nav > li > a {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .65rem .85rem; border-radius: 999px;
  font-family: 'Sora', sans-serif; font-size: .93rem; font-weight: 600; color: var(--ink);
  transition: color .25s, background .25s;
}
.nav > li > a .chev { width: .85em; height: .85em; opacity: .55; transition: transform .3s var(--ease); }
.nav > li > a:hover { color: var(--brand); background: var(--brand-50); }
.nav > li.here > a { color: var(--brand); }
.nav > li.here > a::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .18rem;
  height: 2px; border-radius: 2px; background: var(--amber);
}
.nav .sub {
  position: absolute; top: calc(100% + .55rem); left: -.4rem; min-width: 16.5rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-2); padding: .5rem; z-index: 20;
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98);
  transform-origin: top left;
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.nav .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -.7rem; height: .7rem; }
.nav > li:hover > .sub, .nav > li:focus-within > .sub { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.nav > li:hover > a .chev { transform: rotate(180deg); }
.nav .sub a {
  display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-radius: var(--r-sm);
  font-size: .92rem; font-weight: 500; color: var(--text);
  transition: background .22s, color .22s, padding-left .22s var(--ease);
}
.nav .sub a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--line); flex: none; transition: background .22s; }
.nav .sub a:hover { background: var(--brand-50); color: var(--brand); padding-left: 1.05rem; }
.nav .sub a:hover::before { background: var(--amber); }

.hdr-cta { display: none; }
/* Solid brand button rather than the earlier white box with a hairline --line
   border: against the white header that border was all but invisible, so the
   control read as three loose dashes instead of a button. It now uses the same
   indigo as .btn (the primary button language) and the same amber focus ring. */
.burger {
  display: inline-grid; place-items: center; width: 46px; height: 46px; flex: none;
  border: 0; border-radius: 14px; background: var(--brand); color: #fff; cursor: pointer;
  box-shadow: 0 6px 16px -8px rgba(47,60,132,.6);
  transition: background .25s var(--ease), box-shadow .25s var(--ease), transform .18s var(--ease);
}
.burger:hover { background: var(--brand-600); box-shadow: 0 9px 20px -8px rgba(47,60,132,.7); }
.burger:active { transform: scale(.94); }
.burger:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
/* Arrow, not three bars. It points down to read as "open", and flips to point
   up while the drawer is open — the same language as the nav and accordion
   chevrons, which already rotate 180deg on their open state. */
.burger-ico { display: grid; place-items: center; transition: transform .3s var(--ease); }
.burger-ico svg { width: 21px; height: 21px; display: block; }
.burger[aria-expanded="true"] .burger-ico { transform: rotate(180deg); }

@media (min-width: 1120px) {
  .nav { display: flex; }
  .hdr-cta { display: inline-flex; }
  .burger { display: none; }
}

/* drawer */
#mobileMenu {
  position: fixed; inset: 0 0 0 auto; width: min(400px, 88vw); z-index: 1000;
  background: var(--ink); color: #fff; padding: 1.4rem 1.35rem 2.5rem;
  overflow-y: auto; transform: translateX(102%);
  transition: transform .42s var(--ease); box-shadow: var(--sh-3);
}
#mobileMenu.open { transform: translateX(0); }
#chScrim {
  position: fixed; inset: 0; z-index: 999; background: rgba(6,9,26,.55);
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
#chScrim.on { opacity: 1; visibility: visible; }
#mobileMenu .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; }
#mobileMenu .top img { width: 168px; }
#menuClose {
  width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: transparent; color: #fff;
}
#menuClose:hover { background: rgba(255,255,255,.1); }
#mobileMenu nav a, #mobileMenu .acc-btn {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%;
  padding: .82rem .2rem; border-bottom: 1px solid rgba(255,255,255,.09);
  font-family: 'Sora', sans-serif; font-size: 1rem; font-weight: 600; color: #fff;
  background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; cursor: pointer;
}
#mobileMenu .acc-btn .chev { width: 1em; height: 1em; opacity: .6; transition: transform .3s var(--ease); }
#mobileMenu .acc.open .acc-btn .chev { transform: rotate(180deg); }
#mobileMenu .acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s var(--ease); }
#mobileMenu .acc.open .acc-panel { grid-template-rows: 1fr; }
#mobileMenu .acc-panel > div { overflow: hidden; }
#mobileMenu .acc-panel a {
  font-size: .93rem; font-weight: 500; color: var(--muted-dark);
  padding: .6rem .2rem .6rem 1rem; border-bottom: 1px solid rgba(255,255,255,.05);
}
#mobileMenu .acc-panel a:hover { color: var(--amber); }
#mobileMenu .drawer-foot { margin-top: 1.7rem; display: grid; gap: .8rem; }
#mobileMenu .drawer-foot .btn { justify-content: center; }
#mobileMenu .dcontact { font-size: .9rem; color: var(--muted-dark); display: grid; gap: .5rem; margin-top: .6rem; }
#mobileMenu .dcontact a { border: 0; padding: 0; font-family: inherit; font-weight: 500; font-size: .9rem; color: var(--muted-dark); justify-content: flex-start; }
#mobileMenu .dcontact a:hover { color: var(--amber); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; overflow: hidden; background: var(--ink); color: #fff; isolation: isolate; }
.hero-bg { position: absolute; inset: -12% 0 -12%; z-index: -3; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .34; will-change: transform; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(90% 70% at 12% 8%, rgba(47,60,132,.85), transparent 62%),
    radial-gradient(70% 60% at 92% 88%, rgba(239,127,26,.30), transparent 60%),
    linear-gradient(180deg, rgba(11,16,48,.94), rgba(11,16,48,.80) 45%, rgba(11,16,48,.97));
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
}
.hero-in { padding-block: clamp(4.5rem, 2.4rem + 8vw, 9rem); position: relative; }
.hero-grid { display: grid; gap: clamp(2.4rem, 1rem + 4vw, 4rem); align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.16fr .84fr; } }

.hero .eyebrow { color: var(--amber); }
.hero h1 {
  color: #fff; margin-top: 1.3rem;
  font-size: clamp(2.3rem, 1.35rem + 2.8vw, 3.7rem);
  text-wrap: balance;
}
.hero h1 .accent {
  background: linear-gradient(96deg, var(--amber) 12%, #FFC176 60%, var(--amber) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lead { color: #C6CDEC; margin-top: 1.5rem; max-width: 38rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.2rem; }
.hero-trust { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 2.4rem; }
.hero-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .95rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  font-size: .84rem; font-weight: 500; color: #DCE2F7; white-space: nowrap;
}
.hero-chip .ico { width: 1.05em; height: 1.05em; color: var(--amber); flex: none; }

/* hero visual — stacked plates */
.hero-art { position: relative; }
.hero-plate {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid rgba(255,255,255,.16); box-shadow: var(--sh-3);
  aspect-ratio: 4 / 3.35; min-height: 0;
}
.hero-plate img { width: 100%; height: 100%; object-fit: cover; }
.hero-plate::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, transparent 40%, rgba(11,16,48,.55));
}
.hero-badge {
  position: absolute; left: -1.1rem; bottom: -1.3rem; z-index: 3;
  display: grid; gap: .15rem; padding: 1.05rem 1.35rem;
  background: #fff; color: var(--ink); border-radius: var(--r-lg); box-shadow: var(--sh-3);
  min-width: 12.5rem;
}
.hero-badge b { font-family: 'Sora', sans-serif; font-size: 1.85rem; line-height: 1; color: var(--brand); }
.hero-badge span { font-size: .8rem; color: var(--muted); letter-spacing: .02em; }
.hero-badge::before {
  content: ""; position: absolute; left: 0; top: 1.1rem; bottom: 1.1rem; width: 3px;
  border-radius: 3px; background: var(--amber); transform: translateX(-.65rem);
}
.hero-cert {
  position: absolute; right: -.6rem; top: -1.1rem; z-index: 3;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .7rem 1.05rem; border-radius: 999px; background: var(--amber); color: #fff;
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: .82rem; letter-spacing: .04em;
  box-shadow: 0 18px 34px -16px rgba(239,127,26,.9);
}
.hero-cert .ico { width: 1.1em; height: 1.1em; }

/* --------------------------------------------------------------------------
   Hero motion layer — decorative animated graphics.
   Sits between the hero's gradient/grid pseudo-elements (z-index -2 / -1) and
   the copy (.hero-in, z-index 2). Pointer-events off, aria-hidden in markup,
   and every animation is switched off under prefers-reduced-motion below.
   -------------------------------------------------------------------------- */
.hero-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-in { z-index: 2; }

/* drifting brand glows */
.fx-orb { position: absolute; display: block; border-radius: 50%; filter: blur(48px); will-change: transform; }
.fx-orb.a {
  width: min(30rem, 62vw); aspect-ratio: 1; left: -8rem; top: -9rem;
  background: radial-gradient(circle, rgba(59,74,163,.85), rgba(59,74,163,0) 70%);
  animation: fxOrb 19s var(--ease) infinite;
}
.fx-orb.b {
  width: min(24rem, 54vw); aspect-ratio: 1; right: -6rem; bottom: -8rem;
  background: radial-gradient(circle, rgba(239,127,26,.5), rgba(239,127,26,0) 70%);
  animation: fxOrb 25s var(--ease) -7s infinite reverse;
}
@keyframes fxOrb {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  34%      { transform: translate3d(4.5rem, 2.6rem, 0) scale(1.12); }
  67%      { transform: translate3d(-2.4rem, 3.8rem, 0) scale(.93); }
}

/* extrusion "flow lines" — dashes travelling along the curves */
.fx-flow { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .8; }
.fx-lines path { stroke-dasharray: 96 164; animation: fxFlow 7s linear infinite; }
.fx-lines .l1 { animation-duration: 7.6s; }
.fx-lines .l2 { animation-duration: 6.2s; animation-delay: -1.8s; }
.fx-lines .l3 { animation-duration: 8.4s; animation-delay: -3.1s; }
.fx-lines .l4 { animation-duration: 6.8s; animation-delay: -4.6s; }
@keyframes fxFlow { to { stroke-dashoffset: -260; } }

/* a bright bead running the length of a line — material moving down the line */
.fx-sparks path { stroke-dasharray: 5 1720; animation: fxSpark 9s linear infinite; }
.fx-sparks .s2 { animation-duration: 11.5s; animation-delay: -4s; }
@keyframes fxSpark { to { stroke-dashoffset: -1725; } }

/* slow dashed orbit behind the hero image */
.hero-ring {
  position: absolute; z-index: 0; display: block; pointer-events: none;
  left: 50%; top: 50%; width: 118%; aspect-ratio: 1; border-radius: 50%;
  border: 1px dashed rgba(239,127,26,.34);
  transform: translate(-50%, -50%);
  animation: fxSpin 48s linear infinite;
}
.hero-ring::before {
  content: ""; position: absolute; inset: 9%;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.10);
}
@keyframes fxSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* light sweeping across the plate */
.plate-sheen {
  position: absolute; z-index: 2; pointer-events: none;
  top: -60%; bottom: -60%; left: -60%; width: 42%;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.3) 48%, rgba(255,255,255,0));
  animation: fxSheen 7.5s var(--ease) infinite;
}
@keyframes fxSheen {
  0%       { transform: translateX(0) skewX(-14deg); opacity: 0; }
  8%, 38%  { opacity: 1; }
  46%, 100% { transform: translateX(420%) skewX(-14deg); opacity: 0; }
}

.scroll-cue {
  display: none; position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  align-items: center; gap: .55rem; font-size: .74rem; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
}
.scroll-cue i { display: block; width: 1px; height: 34px; background: linear-gradient(var(--amber), transparent); }
@media (min-width: 1024px) { .scroll-cue { display: flex; flex-direction: column; } }

/* ==========================================================================
   Stats
   ========================================================================== */
.stats { position: relative; margin-top: -3.4rem; z-index: 5; }
.stats-card {
  background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-2);
  border: 1px solid var(--line); overflow: hidden;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.stat { padding: clamp(1.5rem, 1rem + 1.4vw, 2.3rem) clamp(1.2rem, .8rem + 1vw, 1.9rem); position: relative; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 1.4rem; bottom: 1.4rem; width: 1px; background: var(--line); }
.stat b {
  display: flex; align-items: baseline; gap: .3rem; flex-wrap: wrap;
  font-family: 'Sora', sans-serif; font-weight: 800; color: var(--brand);
  font-size: clamp(2rem, 1.5rem + 1.5vw, 2.9rem); line-height: 1; letter-spacing: -.03em;
}
.stat b .suf { font-size: .5em; color: var(--amber); font-weight: 700; }
/* direct child only — a descendant selector here would also shrink the
   counter <span data-count> that lives inside .stat b */
.stat > span { display: block; margin-top: .55rem; font-size: .87rem; color: var(--muted); font-weight: 500; }
@media (max-width: 700px) { .stat + .stat::before { left: 1.2rem; right: 1.2rem; top: 0; bottom: auto; width: auto; height: 1px; } }

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1.1rem + 1vw, 2.1rem); overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--amber));
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-2); border-color: transparent; }
.card:hover::before { transform: scaleX(1); }
.card h3 { margin-bottom: .6rem; }
.card p { font-size: .96rem; }
.ic {
  width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand); margin-bottom: 1.15rem;
  transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.ic svg { width: 28px; height: 28px; }
.card:hover .ic { background: var(--brand); color: #fff; transform: rotate(-6deg) scale(1.06); }
.card .num {
  position: absolute; right: 1.1rem; top: .4rem; font-family: 'Sora', sans-serif;
  font-size: 3.6rem; font-weight: 800; color: var(--mist-2); line-height: 1; z-index: 0;
  transition: color .4s var(--ease);
}
.card:hover .num { color: var(--amber-50); }
.card > * { position: relative; z-index: 1; }

/* product cards */
.pcard {
  position: relative; display: block; border-radius: var(--r-lg); overflow: hidden;
  background: var(--ink); box-shadow: var(--sh-1);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.pcard:hover { transform: translateY(-7px); box-shadow: var(--sh-3); }
.pcard .ph { position: relative; aspect-ratio: 4 / 3.4; min-height: 0; overflow: hidden; }
.pcard .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .5s; }
.pcard:hover .ph img { transform: scale(1.09); }
.pcard .ph::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,16,48,0) 32%, rgba(11,16,48,.55) 62%, rgba(11,16,48,.93));
}
.pcard .body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 1.5rem 1.5rem; z-index: 2; }
.pcard .kicker { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.pcard h3 { color: #fff; margin-top: .5rem; font-size: 1.2rem; line-height: 1.28; }
.pcard .body p { color: #BFC7E8; font-size: .9rem; margin-top: .45rem; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .4s var(--ease), margin .4s; }
.pcard:hover .body p { max-height: 6rem; opacity: 1; }
.pcard .go {
  position: absolute; right: 1.3rem; top: 1.3rem; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .35s var(--ease), transform .35s var(--ease), border-color .35s;
}
.pcard .go svg { width: 17px; height: 17px; }
.pcard:hover .go { background: var(--amber); border-color: var(--amber); transform: rotate(-45deg); }

/* ==========================================================================
   Split / media blocks
   ========================================================================== */
.split { display: grid; gap: clamp(2rem, 1rem + 3.6vw, 4.2rem); align-items: center; }
@media (min-width: 940px) { .split { grid-template-columns: 1fr 1fr; } .split.rev > :first-child { order: 2; } }
.split.top { align-items: start; }

/* feature grid — used where a plain <ul> would leave a tall ragged column */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: .8rem; }
.feat {
  display: flex; gap: .8rem; align-items: flex-start; padding: 1.05rem 1.2rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  font-size: .95rem; color: var(--muted); line-height: 1.6;
  transition: border-color .3s, box-shadow .3s var(--ease), transform .3s var(--ease);
}
.feat:hover { border-color: transparent; box-shadow: var(--sh-1); transform: translateY(-3px); }
.feat .ico {
  flex: none; width: 22px; height: 22px; margin-top: .22rem; border-radius: 50%;
  background: var(--amber-50); color: var(--amber-600); display: grid; place-items: center;
}
.feat .ico svg { width: 12px; height: 12px; }
.frame {
  position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-2);
  aspect-ratio: 5 / 4; min-height: 0;
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame-stack { position: relative; padding: 0 0 3.2rem 3.2rem; }
.frame-stack .a { aspect-ratio: 4 / 3.2; }
.frame-stack .b {
  position: absolute; left: 0; bottom: 0; width: 46%; aspect-ratio: 1 / 1;
  border-radius: var(--r-lg); overflow: hidden; border: 6px solid #fff; box-shadow: var(--sh-2);
}
.frame-stack .b img { width: 100%; height: 100%; object-fit: cover; }
.frame-dots {
  position: absolute; right: -.9rem; top: -.9rem; width: 8rem; height: 8rem; z-index: -1;
  background-image: radial-gradient(var(--brand-300) 1.6px, transparent 1.6px);
  background-size: 15px 15px; opacity: .55; border-radius: 6px;
}
.tick-list { display: grid; gap: .85rem; margin-top: 1.7rem; }
.tick-list li { display: flex; gap: .8rem; align-items: flex-start; font-size: .98rem; color: var(--muted); }
.tick-list .ico {
  flex: none; width: 22px; height: 22px; margin-top: .28rem; border-radius: 50%;
  background: var(--amber-50); color: var(--amber-600); display: grid; place-items: center;
}
.tick-list .ico svg { width: 12px; height: 12px; }
.dark .tick-list li { color: var(--muted-dark); }
.dark .tick-list .ico { background: rgba(239,127,26,.18); color: #FFB570; }

/* ==========================================================================
   Brands marquee
   ========================================================================== */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee .track { display: flex; gap: 1.1rem; width: max-content; animation: mq 34s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }
.brand-chip {
  flex: none; width: 208px; height: 116px; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.1rem 1.3rem; transition: box-shadow .35s var(--ease), transform .35s var(--ease), border-color .35s;
}
.brand-chip img { max-height: 74px; width: auto; object-fit: contain; }
.brand-chip:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: transparent; }

/* ==========================================================================
   Global presence
   ========================================================================== */
.globe-wrap { position: relative; display: grid; place-items: center; }
.globe { width: min(100%, 500px); height: auto; overflow: visible; }
.globe .g-sphere { fill: url(#gSphere); }
.globe .g-line { fill: none; stroke: rgba(255,255,255,.20); stroke-width: 1; }
.globe .g-ring { fill: none; stroke: rgba(239,127,26,.35); stroke-width: 1; stroke-dasharray: 4 7; transform-origin: 200px 200px; animation: spin 44s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.globe .g-dot { fill: var(--amber); }
.globe .g-pulse { fill: var(--amber); opacity: .5; transform-box: fill-box; transform-origin: center; animation: pulse 2.6s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(3.6); opacity: 0; } }
.region-list { display: grid; gap: .7rem; }
.region {
  display: flex; align-items: center; gap: .9rem; padding: .95rem 1.2rem;
  border: 1px solid var(--line-dark); border-radius: var(--r); background: rgba(255,255,255,.04);
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.region:hover { background: rgba(255,255,255,.09); border-color: rgba(239,127,26,.5); transform: translateX(5px); }
.region .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); flex: none; box-shadow: 0 0 0 4px rgba(239,127,26,.18); }
.region span { font-family: 'Sora', sans-serif; font-weight: 600; font-size: .98rem; color: #fff; }

/* ==========================================================================
   Process timeline
   ========================================================================== */
.tl { position: relative; display: grid; gap: 1.1rem; }
@media (min-width: 900px) { .tl { grid-template-columns: repeat(6, 1fr); gap: 0; } }
.tl::before {
  content: ""; position: absolute; left: 21px; top: 12px; bottom: 12px; width: 2px;
  background: linear-gradient(var(--brand), var(--amber)); opacity: .28;
}
@media (min-width: 900px) {
  .tl::before { left: 0; right: 0; top: 21px; bottom: auto; width: auto; height: 2px; }
}
.step { position: relative; padding-left: 3.6rem; }
@media (min-width: 900px) { .step { padding: 0 .8rem; text-align: center; } }
.step .n {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; border: 2px solid var(--brand);
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: .95rem; color: var(--brand); z-index: 2;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
@media (min-width: 900px) { .step .n { position: relative; margin: 0 auto 1.3rem; } }
.step:hover .n { background: var(--amber); border-color: var(--amber); color: #fff; transform: scale(1.1); }
.step h4 { margin-bottom: .35rem; }
.step p { font-size: .9rem; }
.mist .step .n { background: var(--mist); }

/* ==========================================================================
   Gallery / lightbox
   ========================================================================== */
.gal { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; }
.gal-item {
  position: relative; border-radius: var(--r-lg); overflow: hidden; cursor: zoom-in;
  aspect-ratio: 4 / 3; min-height: 0; background: var(--mist-2); box-shadow: var(--sh-1);
}
.gal-item.tall { grid-row: span 2; aspect-ratio: 4 / 6.2; }
@media (max-width: 760px) { .gal-item.tall { grid-row: auto; aspect-ratio: 4 / 3; } }
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gal-item::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(11,16,48,.7));
  opacity: 0; transition: opacity .4s var(--ease);
}
.gal-item .zi {
  position: absolute; inset: auto auto 1rem 1rem; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--amber); color: #fff; opacity: 0; transform: translateY(10px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.gal-item .zi svg { width: 17px; height: 17px; }
.gal-item:hover img { transform: scale(1.08); }
.gal-item:hover::after { opacity: 1; }
.gal-item:hover .zi { opacity: 1; transform: translateY(0); }

#chLightbox {
  position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center;
  background: rgba(6,9,26,.94); padding: clamp(1rem, 4vw, 3rem);
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
#chLightbox.on { opacity: 1; visibility: visible; }
#chLightbox img { max-width: 100%; max-height: 84vh; border-radius: var(--r); box-shadow: var(--sh-3); }
#chLightbox .lb-cap { margin-top: 1rem; text-align: center; color: #C6CDEC; font-size: .92rem; }
#chLightbox .lb-x, #chLightbox .lb-nav {
  position: absolute; width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff;
  display: grid; place-items: center; transition: background .3s, transform .3s;
}
#chLightbox .lb-x:hover, #chLightbox .lb-nav:hover { background: var(--amber); border-color: var(--amber); }
#chLightbox .lb-x { top: 1.2rem; right: 1.2rem; }
#chLightbox .lb-prev { left: 1.2rem; top: 50%; transform: translateY(-50%); }
#chLightbox .lb-next { right: 1.2rem; top: 50%; transform: translateY(-50%); }
#chLightbox svg { width: 20px; height: 20px; }

/* ==========================================================================
   Page hero (inner pages)
   ========================================================================== */
.phero { position: relative; background: var(--ink); color: #fff; overflow: hidden; isolation: isolate; }
.phero-bg { position: absolute; inset: 0; z-index: -2; }
.phero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.phero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(80% 100% at 8% 0%, rgba(47,60,132,.9), transparent 62%),
    linear-gradient(180deg, rgba(11,16,48,.9), rgba(11,16,48,.82));
}
.phero-in { padding-block: clamp(3.4rem, 2rem + 5.4vw, 6.4rem); }
.phero h1 { color: #fff; max-width: 22ch; }
.phero .lead { color: #C6CDEC; margin-top: 1.1rem; max-width: 46rem; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: .84rem; color: #9EA9D6; margin-bottom: 1.15rem; }
.crumbs a:hover { color: var(--amber); }
.crumbs .sep { opacity: .5; }
.crumbs .cur { color: var(--amber); }

/* ==========================================================================
   Product detail
   ========================================================================== */
.prose > * + * { margin-top: 1.15rem; }
.prose p { font-size: 1.02rem; }
.prose h3 { margin-top: 2.2rem; }
/* .prose lists carry no class, so the base reset (which only targets ul[class])
   doesn't reach them — kill the native marker here or every item shows twice. */
.prose ul { display: grid; gap: .7rem; list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 1.6rem; color: var(--muted); font-size: .98rem; }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px;
  border-radius: 2px; background: var(--amber); transform: rotate(45deg);
}
.chip-grid { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip {
  display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-size: .88rem; font-weight: 500; color: var(--text);
  transition: border-color .3s, color .3s, transform .3s var(--ease);
}
.chip:hover { border-color: var(--amber); color: var(--amber-600); transform: translateY(-2px); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); flex: none; }

.app-card {
  position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; min-height: 0;
  box-shadow: var(--sh-1);
}
.app-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.app-card:hover img { transform: scale(1.08); }
.app-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem .9rem .8rem;
  background: linear-gradient(transparent, rgba(11,16,48,.9));
  color: #fff; font-family: 'Sora', sans-serif; font-weight: 600; font-size: .92rem; text-align: center;
}

.spec-table { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.spec-scroll { overflow-x: auto; }
.spec-table table { min-width: 460px; }
.spec-table th, .spec-table td { padding: .78rem 1.1rem; text-align: left; font-size: .93rem; border-bottom: 1px solid var(--line); }
.spec-table thead th { background: var(--ink); color: #fff; font-family: 'Sora', sans-serif; font-weight: 600; font-size: .85rem; letter-spacing: .04em; }
.spec-table tbody tr:nth-child(even) { background: var(--mist); }
.spec-table tbody tr:last-child td { border-bottom: 0; }
.spec-table td { color: var(--muted); }
.spec-table td:first-child { color: var(--ink); font-weight: 600; }

.dl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1rem; }
.dl {
  display: flex; align-items: center; gap: .95rem; padding: 1.1rem 1.25rem;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  transition: border-color .3s, box-shadow .3s var(--ease), transform .3s var(--ease);
}
.dl:hover { border-color: transparent; box-shadow: var(--sh-2); transform: translateY(-3px); }
.dl .pdf {
  flex: none; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: var(--amber-50); color: var(--amber-600);
}
.dl .pdf svg { width: 20px; height: 20px; }
.dl b { display: block; font-family: 'Sora', sans-serif; font-size: .95rem; color: var(--ink); font-weight: 600; }
.dl span { font-size: .78rem; color: var(--muted); }

.fibc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: .9rem; }
.fibc {
  display: grid; gap: .7rem; justify-items: center; padding: 1.1rem .8rem;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff; text-align: center;
  transition: border-color .3s, box-shadow .3s var(--ease), transform .3s var(--ease);
}
.fibc:hover { border-color: var(--brand); box-shadow: var(--sh-1); transform: translateY(-3px); }
.fibc img { height: 76px; width: auto; object-fit: contain; }
.fibc span { font-size: .8rem; font-weight: 500; color: var(--text); line-height: 1.4; }

/* certificates */
.cert {
  display: grid; gap: .9rem; padding: 1.1rem; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.cert:hover { box-shadow: var(--sh-2); transform: translateY(-4px); }
.cert .shot {
  /* the source marks are JPEGs on white, so keep the plate white too or the
     card shows a white box floating inside a grey one */
  border-radius: var(--r-sm); overflow: hidden; background: #fff; cursor: zoom-in;
  aspect-ratio: 1 / 1; min-height: 0; padding: 1.15rem; display: grid; place-items: center;
}
.cert { background: var(--mist); }
.cert .shot img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--ease); }
.cert:hover .shot img { transform: scale(1.05); }
.cert b { font-family: 'Sora', sans-serif; font-size: .93rem; text-align: center; color: var(--ink); }

/* people */
.person { text-align: center; }
.person .shot {
  position: relative; width: min(100%, 260px); margin: 0 auto 1.3rem; aspect-ratio: 1 / 1; min-height: 0;
  border-radius: 50%; overflow: hidden; border: 5px solid #fff; box-shadow: var(--sh-2);
}
.person .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.person:hover .shot img { transform: scale(1.06); }
.person .shot::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
  border: 2px solid transparent; border-top-color: var(--amber); border-right-color: var(--amber);
  opacity: 0; transform: rotate(-40deg); transition: opacity .45s var(--ease), transform .8s var(--ease);
}
.person:hover .shot::after { opacity: 1; transform: rotate(140deg); }
.person h3 { font-size: 1.18rem; }
.person span { display: block; margin-top: .3rem; font-size: .86rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band { position: relative; overflow: hidden; background: var(--brand); color: #fff; isolation: isolate; }
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 130% at 88% 20%, rgba(239,127,26,.55), transparent 58%),
    linear-gradient(120deg, #232E6D, #2F3C84 55%, #3B4AA3);
}
.cta-band::after {
  content: ""; position: absolute; right: -6%; bottom: -60%; width: 46rem; height: 46rem; z-index: -1;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 60px rgba(255,255,255,.04);
}
.cta-in { display: grid; gap: 2rem; align-items: center; padding-block: clamp(3rem, 2rem + 3.6vw, 5rem); }
@media (min-width: 940px) { .cta-in { grid-template-columns: 1.35fr .65fr; } }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.82); margin-top: .9rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
@media (min-width: 940px) { .cta-actions { justify-content: flex-end; } }
.cta-band .btn-amber { box-shadow: 0 16px 34px -14px rgba(0,0,0,.5); }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(1.5rem, 1rem + 1.8vw, 2.6rem); box-shadow: var(--sh-1);
}
.wlk-form { display: grid; gap: 1.05rem; }
.wlk-form .two { display: grid; gap: 1.05rem; }
@media (min-width: 640px) { .wlk-form .two { grid-template-columns: 1fr 1fr; } }
.wlk-form label { display: block; }
.wlk-form label > span {
  display: block; margin-bottom: .45rem; font-family: 'Sora', sans-serif;
  font-size: .82rem; font-weight: 600; color: var(--ink); letter-spacing: .01em;
}
.wlk-form label > span em { font-style: normal; color: var(--amber); }
.wlk-form input, .wlk-form textarea, .wlk-form select {
  width: 100%; padding: .85rem 1.05rem; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--mist); font-size: .96rem; outline: none;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.wlk-form textarea { resize: vertical; min-height: 8.5rem; }
.wlk-form input:focus, .wlk-form textarea:focus, .wlk-form select:focus {
  border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(47,60,132,.1);
}
.wlk-form .btn { justify-content: center; }
.wlk-form-status { border-radius: var(--r-sm); padding: .8rem 1.05rem; font-size: .92rem; }
.wlk-form-status.hidden { display: none; }

.info-row { display: flex; gap: 1.05rem; align-items: flex-start; }
.info-row .ic { margin-bottom: 0; width: 50px; height: 50px; border-radius: 14px; flex: none; }
.info-row .ic svg { width: 22px; height: 22px; }
.info-row b { display: block; font-family: 'Sora', sans-serif; font-size: .98rem; color: var(--ink); margin-bottom: .25rem; }
.info-row p, .info-row a { font-size: .95rem; color: var(--muted); }
.info-row a:hover { color: var(--brand); }
.dark .info-row b { color: #fff; }
.dark .info-row p, .dark .info-row a { color: var(--muted-dark); }
.dark .info-row .ic { background: rgba(255,255,255,.08); color: var(--amber); }

.map-frame { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-1); border: 1px solid var(--line); }
.map-frame iframe { display: block; width: 100%; height: clamp(300px, 42vw, 460px); border: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.ftr { background: var(--ink); color: var(--muted-dark); position: relative; overflow: hidden; }
.ftr::before {
  content: ""; position: absolute; left: -8%; top: -40%; width: 34rem; height: 34rem;
  border-radius: 50%; background: radial-gradient(circle, rgba(47,60,132,.42), transparent 68%);
}
.ftr > * { position: relative; }
.ftr-top { display: grid; gap: 2.4rem; padding-block: clamp(3rem, 2rem + 3.4vw, 4.6rem); }
@media (min-width: 900px) { .ftr-top { grid-template-columns: 1.6fr 1fr 1fr 1.5fr; gap: 2.6rem; } }
.ftr-logo { width: 210px; margin-bottom: 1.3rem; }
.ftr p { font-size: .93rem; color: var(--muted-dark); }
.ftr h4 { color: #fff; font-size: 1rem; margin-bottom: 1.25rem; position: relative; padding-bottom: .7rem; }
.ftr h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 30px; height: 2px; background: var(--amber); }
/* the reset above only clears markers on ul[class]; the footer lists carry no
   class, so the native disc showed up next to the amber a::before dot */
.ftr ul { display: grid; gap: .62rem; list-style: none; padding-left: 0; }
.ftr ul a { font-size: .93rem; display: inline-flex; align-items: center; gap: .5rem; transition: color .25s, transform .25s var(--ease); }
.ftr ul a::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--amber); opacity: .55; flex: none; }
.ftr ul a:hover { color: #fff; transform: translateX(4px); }
.ftr .fcontact { display: grid; gap: 1rem; }
/* the footer is a dark surface but doesn't carry .dark — restate the contrast
   rules here or the labels and links render near-black on near-black */
.ftr .info-row .ic { background: rgba(255,255,255,.07); color: var(--amber); }
.ftr .info-row b { color: #fff; }
.ftr .info-row p, .ftr .info-row a { color: var(--muted-dark); }
.ftr .info-row a:hover { color: var(--amber); }
.ftr-socials { display: flex; gap: .55rem; margin-top: 1.5rem; }
.ftr-socials a {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.07); color: #fff; transition: background .3s, transform .3s var(--ease);
}
.ftr-socials a:hover { background: var(--amber); transform: translateY(-3px); }
.ftr-socials svg { width: 17px; height: 17px; }
.ftr-bot {
  border-top: 1px solid rgba(255,255,255,.09); padding-block: 1.35rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: center; justify-content: space-between;
  font-size: .85rem;
}
.ftr-bot a:hover { color: var(--amber); }

/* ==========================================================================
   FABs
   ========================================================================== */
.fab-stack { position: fixed; right: clamp(.9rem, 2vw, 1.6rem); bottom: clamp(.9rem, 2vw, 1.6rem); z-index: 800; display: grid; gap: .6rem; }
.fab {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 0; color: #fff; box-shadow: var(--sh-2);
  transition: transform .3s var(--ease), opacity .3s, visibility .3s, background .3s;
}
.fab svg { width: 20px; height: 20px; }
.fab:hover { transform: translateY(-3px); }
.fab-wa { background: #25D366; }
.fab-top { background: var(--brand); opacity: 0; visibility: hidden; }
.fab-top.on { opacity: 1; visibility: visible; }
/* the preview's "Update with AI" pill sits in this corner — stand down for it */
:root:has(.wluai-btn) .fab-stack { display: none; }

/* ==========================================================================
   Responsive corrections — these come LAST in source order on purpose:
   a media query adds no specificity, so it only wins by being later.
   ========================================================================== */
@media (max-width: 760px) {
  /* client, 2026-09-07: hide the top strip on phones. Below this width its four
     items stack and it was eating 136px — 16% of a 844px viewport — before the
     logo appeared. Nothing is lost: the drawer carries the same phone, email and
     social links, the WhatsApp FAB stays, and the footer repeats all of it.
     Delete this one line to bring the strip back. */
  .topbar { display: none; }
  .topbar .meta-note { display: none; }
  .topbar .row { justify-content: flex-start; gap: .35rem 1.1rem; padding-block: .5rem; }
  .frame-stack { padding: 0 0 2.2rem 2.2rem; }
  .frame-stack .b { width: 52%; border-width: 4px; }
  .frame-dots { right: 0; width: 5.5rem; height: 5.5rem; }
  .hero-badge { left: 0; bottom: -1rem; min-width: 0; }
  .hero-cert { right: 0; top: -.8rem; }
  /* the orbit would crowd the badge/cert once the art goes full-width */
  .hero-ring { display: none; }
  .fx-flow { opacity: .55; }
  .cta-in { text-align: left; }
}
/* On touch there is no hover, so the product blurb would never be readable —
   show it permanently wherever a fine pointer isn't available. */
@media (hover: none), (max-width: 940px) {
  .pcard .body p { max-height: none; opacity: 1; margin-top: .45rem; }
}

/* ==========================================================================
   Reveal animations — safe by default (visible if JS never runs)
   ========================================================================== */
html.js .rv { opacity: 0; transform: translateY(26px); }
html.js .rv-l { transform: translateX(-30px); }
html.js .rv-r { transform: translateX(30px); }
html.js .rv-s { transform: scale(.94); }
html.js .rv.in {
  opacity: 1; transform: none;
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
html.js .rv.d1 { transition-delay: .09s; }
html.js .rv.d2 { transition-delay: .18s; }
html.js .rv.d3 { transition-delay: .27s; }
html.js .rv.d4 { transition-delay: .36s; }
html.js .rv.d5 { transition-delay: .45s; }

/* ==========================================================================
   Section motion layers
   One decorative animated graphic per section, each chosen for what that
   section is about. SVG/CSS only — no images and no script, so page weight is
   unchanged. Markup is aria-hidden + pointer-events:none; the whole set is
   switched off in the prefers-reduced-motion block below.
   ========================================================================== */
.has-fx { position: relative; overflow: hidden; isolation: isolate; }
/* the layer sits at z-index -1: above the section's own background, below its
   content. Lifting .shell into its own stacking context keeps it there. */
.has-fx > .shell, .has-fx > .shell-wide { position: relative; z-index: 1; }
.sfx { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sfx-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* drifting brand glows — shared by several layers (fxOrb is the hero's) */
.sfx-orb { position: absolute; display: block; border-radius: 50%; filter: blur(54px); will-change: transform; }
.sfx-orb.a {
  width: min(28rem, 66vw); aspect-ratio: 1; left: -7rem; top: -6rem;
  background: radial-gradient(circle, rgba(47,60,132,.16), rgba(47,60,132,0) 70%);
  animation: fxOrb 23s var(--ease) infinite;
}
.sfx-orb.b {
  width: min(24rem, 58vw); aspect-ratio: 1; right: -6rem; bottom: -7rem;
  background: radial-gradient(circle, rgba(239,127,26,.16), rgba(239,127,26,0) 70%);
  animation: fxOrb 29s var(--ease) -9s infinite reverse;
}
.dark .sfx-orb.a { background: radial-gradient(circle, rgba(59,74,163,.55), rgba(59,74,163,0) 70%); }
.dark .sfx-orb.b { background: radial-gradient(circle, rgba(239,127,26,.32), rgba(239,127,26,0) 70%); }

/* About — warp and weft: fabric coming off the loom */
.sfx-weave {
  -webkit-mask-image: linear-gradient(100deg, #000 4%, rgba(0,0,0,.4) 46%, transparent 74%);
          mask-image: linear-gradient(100deg, #000 4%, rgba(0,0,0,.4) 46%, transparent 74%);
}
.sfx-weave .warp line { stroke: rgba(47,60,132,.13); stroke-width: 1; }
.sfx-weave .weft line {
  stroke: rgba(47,60,132,.20); stroke-width: 1.4;
  stroke-dasharray: 30 26; animation: sfxWeave 9s linear infinite;
}
.sfx-weave .weft .w2 { animation-duration: 11s; animation-delay: -3s; }
.sfx-weave .weft .w3 { animation-duration: 13s; animation-delay: -6s; animation-direction: reverse; }
.sfx-weave .weft .w4 { animation-duration: 10s; animation-delay: -1.5s; animation-direction: reverse; }
/* 560 = 10 × the 56-unit dash pattern, so the loop is seamless */
@keyframes sfxWeave { to { stroke-dashoffset: -560; } }

/* Why choose us — polymer granules, the raw material, drifting upward */
.sfx-granules i {
  position: absolute; left: var(--x); bottom: -4rem; display: block;
  width: var(--s); height: var(--s); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.95), rgba(47,60,132,.5) 62%, rgba(47,60,132,.3));
  animation: sfxRise var(--d) linear var(--t) infinite;
}
.sfx-granules i:nth-child(3n) {
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.95), rgba(239,127,26,.55) 62%, rgba(239,127,26,.32));
}
@keyframes sfxRise {
  0%   { transform: translate3d(0, 0, 0) scale(.55); opacity: 0; }
  12%  { opacity: .55; }
  50%  { transform: translate3d(1.6rem, -46vh, 0) scale(1); }
  86%  { opacity: .3; }
  100% { transform: translate3d(-.6rem, -104vh, 0) scale(.7); opacity: 0; }
}

/* Our range — a conveyor of chevrons running along the foot of the section */
.sfx-belt .sfx-svg { inset: auto 0 clamp(1.2rem, .6rem + 1.6vw, 2.6rem) 0; height: 26px; }
.sfx-belt .chev { animation: sfxBelt 5.5s linear infinite; }
.sfx-belt .chev path {
  fill: none; stroke: rgba(47,60,132,.17); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* exactly one 60-unit pattern step, so it loops without a jump */
@keyframes sfxBelt { to { transform: translateX(60px); } }

/* Infrastructure & certifications — counter-rotating dashed rings */
.sfx-loom .sfx-svg, .sfx-seal .sfx-svg {
  inset: auto; width: min(44rem, 96vw); height: auto; aspect-ratio: 1;
  top: 50%; transform: translateY(-50%);
}
.sfx-loom .sfx-svg { right: -11%; }
.sfx-seal .sfx-svg { left: 50%; transform: translate(-50%, -50%); }
.sfx-loom circle, .sfx-seal circle { fill: none; }
.sfx-loom .r1, .sfx-loom .r2, .sfx-loom .spokes,
.sfx-seal .r1, .sfx-seal .r2, .sfx-seal .spokes { transform-origin: 300px 300px; }
.sfx-loom .r1     { stroke: rgba(239,127,26,.34); stroke-width: 1; stroke-dasharray: 3 9;   animation: spin 60s linear infinite; }
.sfx-loom .r2     { stroke: rgba(255,255,255,.13); stroke-width: 1; stroke-dasharray: 22 14; animation: spin 42s linear infinite reverse; }
.sfx-loom .r3     { stroke: rgba(255,255,255,.09); stroke-width: 1; }
.sfx-loom .spokes { stroke: rgba(239,127,26,.34); stroke-width: 2; stroke-linecap: round; animation: spin 96s linear infinite; }
.sfx-seal .r1     { stroke: rgba(47,60,132,.16); stroke-width: 1; stroke-dasharray: 2 10;  animation: spin 72s linear infinite; }
.sfx-seal .r2     { stroke: rgba(239,127,26,.16); stroke-width: 1; stroke-dasharray: 26 18; animation: spin 50s linear infinite reverse; }
.sfx-seal .r3     { stroke: rgba(47,60,132,.09); stroke-width: 1; }
.sfx-seal .spokes { stroke: rgba(239,127,26,.15); stroke-width: 2; stroke-linecap: round; animation: spin 110s linear infinite; }

/* How we make it — a blueprint grid panning slowly behind the timeline */
.sfx-grid {
  background-image:
    linear-gradient(rgba(47,60,132,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,60,132,.055) 1px, transparent 1px);
  background-size: 38px 38px;
  animation: sfxPan 30s linear infinite;
  -webkit-mask-image: radial-gradient(120% 82% at 50% 42%, #000 18%, transparent 78%);
          mask-image: radial-gradient(120% 82% at 50% 42%, #000 18%, transparent 78%);
}
/* one full tile, so the pan never jumps */
@keyframes sfxPan { to { background-position: 38px 38px, 38px 38px; } }

/* …and a bead running the timeline rail, following .tl::before */
.tl::after {
  content: ""; position: absolute; left: 20px; top: 12px; width: 4px; height: 20%; z-index: 1;
  border-radius: 4px; background: linear-gradient(180deg, rgba(239,127,26,0), var(--amber));
  opacity: 0; animation: sfxRailY 5.2s var(--ease) infinite;
}
@keyframes sfxRailY {
  0%       { transform: translateY(0); opacity: 0; }
  10%, 82% { opacity: .95; }
  100%     { transform: translateY(400%); opacity: 0; }
}
@media (min-width: 900px) {
  .tl::after {
    left: 0; top: 20px; width: 16%; height: 4px;
    background: linear-gradient(90deg, rgba(239,127,26,0), var(--amber));
    animation-name: sfxRailX;
  }
}
@keyframes sfxRailX {
  0%       { transform: translateX(0); opacity: 0; }
  10%, 82% { opacity: .95; }
  100%     { transform: translateX(525%); opacity: 0; }
}

/* Global presence — shipping lanes, with a bead travelling two of them */
.sfx-routes .lanes path {
  fill: none; stroke: rgba(255,255,255,.15); stroke-width: 1.3;
  stroke-dasharray: 8 12; animation: sfxLane 16s linear infinite;
}
.sfx-routes .lanes .l2 { animation-duration: 21s; animation-delay: -6s; }
.sfx-routes .lanes .l3 { animation-duration: 26s; animation-delay: -11s; animation-direction: reverse; }
@keyframes sfxLane { to { stroke-dashoffset: -400; } }
.sfx-routes .ships path {
  fill: none; stroke: var(--amber); stroke-width: 4.5; stroke-linecap: round;
  stroke-dasharray: 4 2100; animation: sfxShip 13s linear infinite;
}
.sfx-routes .ships .s2 { animation-duration: 16.5s; animation-delay: -5s; }
@keyframes sfxShip { to { stroke-dashoffset: -2104; } }

/* Team — a soft dot field drifting behind the portraits */
.sfx-dots {
  background-image: radial-gradient(rgba(47,60,132,.17) 1.5px, transparent 1.5px);
  background-size: 22px 22px; opacity: .55; animation: sfxDrift 24s linear infinite;
  -webkit-mask-image: radial-gradient(88% 72% at 50% 50%, transparent 26%, #000 84%);
          mask-image: radial-gradient(88% 72% at 50% 50%, transparent 26%, #000 84%);
}
@keyframes sfxDrift { to { background-position: 22px -22px; } }

/* CTA band + stats — a slow light sweep */
.sfx-sheen .sfx-sweep {
  position: absolute; top: -60%; bottom: -60%; left: -32%; width: 30%;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.13) 50%, rgba(255,255,255,0));
  animation: fxSheen 9s var(--ease) infinite;
}
.sfx-sheen .sfx-orb.b { background: radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,0) 70%); }
.stats-card { position: relative; }
.stats-card::after {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 34%;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  opacity: 0; animation: sfxScan 6.4s var(--ease) infinite;
}
@keyframes sfxScan {
  0%       { transform: translateX(-40%); opacity: 0; }
  12%, 86% { opacity: 1; }
  100%     { transform: translateX(340%); opacity: 0; }
}

/* Inner-page banners — the hero's extrusion flow lines, quieter */
.sfx-flow {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
/* pinned to the top and bottom edges so a travelling dash never lands on the
   headline, whatever height the banner ends up at */
.sfx-flow .pf-top { inset: 0 0 auto 0; height: clamp(52px, 22%, 104px); }
.sfx-flow .pf-bot { inset: auto 0 0 0; height: clamp(52px, 22%, 104px); }
.sfx-flow .pflow path {
  fill: none; stroke: rgba(255,255,255,.17); stroke-width: 1.4;
  stroke-dasharray: 60 120; animation: sfxPhero 9s linear infinite;
}
.sfx-flow .pflow .f2 { stroke: rgba(239,127,26,.36); animation-duration: 12s; animation-delay: -4s; }
@keyframes sfxPhero { to { stroke-dashoffset: -540; } }

/* Below the .split breakpoint the two columns stack, so body copy lands where
   these line-based layers were clear on desktop. Fade them out above the text
   rather than letting a travelling dash read as a strikethrough.
   Placed after the rules above because a media query adds no specificity. */
@media (max-width: 939px) {
  .sfx-weave, .sfx-routes {
    -webkit-mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.45) 26%, transparent 48%);
            mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.45) 26%, transparent 48%);
  }
  .sfx-weave { opacity: .6; }
  .sfx-routes .lanes path { stroke: rgba(255,255,255,.11); }
}

@media (prefers-reduced-motion: reduce) {
  html.js .rv, html.js .rv.in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .marquee .track, .globe .g-ring, .globe .g-pulse, #chLoader .ldr-bar i, #chLoader .ldr-stroke { animation: none !important; }
  .fx-orb, .fx-lines path, .hero-ring, .plate-sheen { animation: none !important; }
  .fx-sparks, .plate-sheen { display: none; }
  /* section motion layers */
  .sfx-orb, .sfx-weave .weft line, .sfx-belt .chev, .sfx-grid, .sfx-dots,
  .sfx-loom .r1, .sfx-loom .r2, .sfx-loom .spokes,
  .sfx-seal .r1, .sfx-seal .r2, .sfx-seal .spokes,
  .sfx-routes .lanes path, .sfx-flow .pflow path { animation: none !important; }
  .sfx-granules, .sfx-routes .ships, .sfx-sheen .sfx-sweep,
  .stats-card::after, .tl::after { display: none; }
  #chLoader .ldr-stroke { stroke-dashoffset: 0; }
  #chLoader .ldr-word { opacity: .92; }
  :where(html) { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}

/* ---------- utilities ---------- */
.mt-1 { margin-top: .6rem; }  .mt-2 { margin-top: 1.2rem; }
.mt-3 { margin-top: 1.9rem; } .mt-4 { margin-top: 2.6rem; }
.mt-5 { margin-top: 3.4rem; }
.center { text-align: center; }
.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;
}

/* ==========================================================================
   COMPACT LAYER  (client, 2026-09-06: "make the sections compact, too much
   space showing")
   Appended rather than edited in place so the original rhythm stays readable
   and the whole restyle is revertible by deleting this one block. It wins on
   SOURCE ORDER at equal specificity, so it must stay LAST in the file — only
   the @media print block below may follow it (print re-sets .sect padding and
   has to keep winning inside print). Every selector here mirrors the original
   exactly, including .ch / body.ch, so specificity ties and order decides.

   The lever is vertical only: nothing about colour, motion, columns or
   horizontal layout changes. Section shells lose ~40% of their padding-block
   (232px -> 136px of chrome per section at 1440px) and the internal margins
   step down with them so the density stays proportional instead of looking
   like the padding alone was squeezed.
   ========================================================================== */

/* ---- section shells ---- */
.sect     { padding-block: clamp(2.6rem, 1.9rem + 2.6vw, 4.4rem); }
.sect-sm  { padding-block: clamp(2rem, 1.5rem + 1.7vw, 3rem); }
.hero-in  { padding-block: clamp(3.2rem, 2rem + 4.6vw, 6rem); }
.phero-in { padding-block: clamp(2.4rem, 1.6rem + 3vw, 4rem); }
.cta-in   { gap: 1.5rem; padding-block: clamp(2.1rem, 1.5rem + 1.9vw, 3.2rem); }
.ftr-top  { gap: 1.8rem; padding-block: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); }

/* ---- copy density: the single biggest source of "air" inside a block ---- */
body.ch { line-height: 1.65; }
.lead { line-height: 1.62; }

/* Headline sizes are trimmed only at the top of their clamp: a 72px h1 and a
   49px h2 wrap to two lines and each wrapped line was adding ~55px of section
   height. Small screens keep their existing size (the clamp minimums move far
   less than the maximums). */
.ch h1 { font-size: clamp(2.35rem, 1.35rem + 3vw, 3.7rem); }
.ch h2 { font-size: clamp(1.85rem, 1.35rem + 1.7vw, 2.6rem); }
.hero h1 { font-size: clamp(2.2rem, 1.35rem + 2.4vw, 3.15rem); }

/* ---- section headings ---- */
.shead .eyebrow { margin-bottom: .7rem; }
.shead h2 + p   { margin-top: .75rem; }

/* ---- gaps between the things inside a section ---- */
.grid      { gap: clamp(.9rem, .6rem + .9vw, 1.5rem); }
.split     { gap: clamp(1.6rem, .9rem + 2.2vw, 3rem); }
.hero-grid { gap: clamp(1.8rem, .9rem + 2.6vw, 3rem); }
.gal       { gap: .75rem; }
.tl        { gap: .8rem; }

/* ---- hero stack ---- */
.hero h1        { margin-top: 1rem; }
.hero .lead     { margin-top: 1.1rem; }
.hero-actions   { margin-top: 1.6rem; }
.hero-trust     { margin-top: 1.5rem; }
.phero .lead    { margin-top: .85rem; }
.crumbs         { margin-bottom: .8rem; }

/* ---- cards and panels ---- */
.card      { padding: clamp(1.15rem, .95rem + .7vw, 1.6rem); }
/* kept at .ic, not .card .ic, so `.info-row .ic { margin-bottom: 0 }` above
   still outranks it on the contact page */
.ic        { margin-bottom: .85rem; }
.stat      { padding: clamp(1.15rem, .8rem + 1vw, 1.7rem) clamp(1rem, .7rem + .8vw, 1.5rem); }
.wlk-form  { padding: clamp(1.2rem, .95rem + 1vw, 1.9rem); }
.cert .shot { padding: .9rem; }
.person .shot { margin: 0 auto 1rem; }
.tick-list { gap: .65rem; margin-top: 1.2rem; }
.cta-band p { margin-top: .7rem; }

/* ---- long-form pages ---- */
.prose > * + * { margin-top: .9rem; }
.prose h3      { margin-top: 1.55rem; }

/* ---- timeline steps ---- */
@media (min-width: 900px) { .step .n { margin: 0 auto .95rem; } }

/* ---- footer ---- */
.ftr-logo    { margin-bottom: 1rem; }
.ftr h4      { margin-bottom: .9rem; }
.ftr-socials { margin-top: 1.1rem; }

/* ---- spacing utilities, stepped down in the same proportion ---- */
.mt-1 { margin-top: .5rem; }  .mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.4rem; } .mt-4 { margin-top: 1.9rem; }
.mt-5 { margin-top: 2.4rem; }

@media print {
  .hdr, .topbar, #mobileMenu, #chScrim, .fab-stack, #chLoader, .cta-band, #chLightbox { display: none !important; }
  body.ch { color: #000; }
  .sect { padding-block: 1.5rem; }
}