/* ============================================================
   Mahendra Facility Services Pvt Ltd — construction-forward stylesheet
   Palette derives from the brand logo: petrol teal #00343C ground
   with gold #C6A14F lettering. Dark bands use --teal-950, a
   darkened logo teal, so photography has contrast without
   importing a foreign charcoal.
   Breakpoint contract: mobile nav switches at 1300px — keep in
   sync with the innerWidth > 1300 check in js/script.js. Raised
   from 900px in Sep 2026 when the nav grew an 8th item (Contact
   Us) and the brand lockup got bigger — the full row no longer
   fits a single line below ~1400px, so the hamburger now covers
   that whole range instead of wrapping/overlapping.
   ============================================================ */

:root {
  /* Brand */
  --teal-950: #061A1E;    /* photo overlays, dark bands, footer */
  --teal: #00343C;        /* logo ground */
  --teal-hover: #0A4A54;
  --teal-deep: #002229;
  --teal-tint: #EEF3F2;   /* light section wash */
  --gold: #C6A14F;        /* logo gold */
  --gold-hover: #D8B667;
  --gold-deep: #96772F;   /* accessible gold for small text on light bg */

  /* Neutrals */
  --ink: #14211F;
  --body-c: #46565A;
  --muted: #71807F;
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --line: #E3E7E4;
  --on-dark: #F2F5F4;
  --on-dark-soft: rgba(242, 245, 244, .72);

  /* Type */
  --font-display: "Roboto Slab", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* Misc */
  --radius: 6px;
  --radius-sm: 4px;
  --shadow-sm: 0 2px 10px rgba(6, 26, 30, .07);
  --shadow-md: 0 14px 40px rgba(6, 26, 30, .14);
  --container: 1320px;
  --header-h: 112px;
  /* One horizontal gutter for the whole page. The full-width header and the
     capped .container share it, so the brand and the section content line up
     on the same left edge until the container hits its max width. */
  --gutter: clamp(20px, 4vw, 64px);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* clip (not hidden): pre-reveal GSAP transforms must never create
   horizontal scroll — required on BOTH html and body. */
html, body { overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.75;
  letter-spacing: .002em;
  color: var(--body-c);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

/* Whole-page film grain — the difference between a flat colour fill and a
   printed one. Fixed + very low alpha so it never fights legibility. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: var(--teal); text-decoration: none; }
p { margin: 0 0 1.15em; max-width: 68ch; }
ul, ol { margin: 0; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.18;
  margin: 0 0 .55em;
  font-weight: 700;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); font-weight: 800; line-height: 1.1; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); }
h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.005em; }

/* Gold emphasis inside display headings */
h1 em, h2 em { font-style: normal; color: var(--gold); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--on-dark); }
.on-dark p { color: var(--on-dark-soft); }

html { scroll-padding-top: calc(var(--header-h) + 16px); }

.container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
/* Every [data-page] section now lands flush at the top of the viewport (the
   pager resets scroll to 0 on every nav swap) with the fixed header floating
   on top of it, rather than scrolling in with a header-clearance offset
   applied externally. Below ~1422px, 9vw drops under --header-h + 16px
   (128px, header-h raised to 112px in Sep 2026 for the bigger logo), so
   the top padding alone isn't enough to clear the header — max() guarantees
   at least header height + breathing room without changing the desktop
   value (which already clears it comfortably). */
.section {
  padding-top: max(clamp(76px, 9vw, 132px), calc(var(--header-h) + 16px));
  padding-bottom: clamp(76px, 9vw, 132px);
}

/* ---------- Paged navigation ----------
   Progressive enhancement: without JS (or if it fails), every [data-page]
   section stays in normal document flow, i.e. the original one-scroll
   layout. js/script.js adds .is-paged once the pager takes over, at which
   point only the active page is shown and nav clicks swap pages instead of
   scrolling past them. */
html.is-paged main > [data-page] { display: none; }
html.is-paged main > [data-page].is-active { display: block; }
html.is-paged .hero[data-page].is-active { display: flex; }

.section-head { position: relative; max-width: 760px; margin: 0 0 clamp(40px, 5vw, 68px); }
.section-head.is-centered { margin-inline: auto; text-align: center; }
.section-intro { font-size: 1.05rem; }

/* Watermark page number — the site is a literal sequence of pages now, so
   the numeral encodes something real (this page's position, 01-07, About
   through Contact) rather than decorating for its own sake. Decoupled from
   .section-head (About's kicker+heading sit directly in .about-copy, not a
   .section-head wrapper) so the selector just needs the attribute. */
[data-num] { position: relative; }
[data-num]::before {
  content: attr(data-num);
  position: absolute;
  top: -.3em; left: -.02em;
  z-index: -1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(5rem, 11vw, 8rem);
  line-height: 1;
  color: var(--ink);
  opacity: .05;
  pointer-events: none;
  user-select: none;
}
.on-dark [data-num]::before { color: var(--on-dark); opacity: .07; }

.kicker {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--gold);
  flex: none;
}
.on-dark .kicker { color: var(--gold); }
.is-centered .kicker { justify-content: center; }

.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn-primary       { background: var(--gold); color: var(--teal-950); }
.btn-primary:hover { background: var(--gold-hover); }
.btn-outline       { border-color: rgba(242,245,244,.45); color: var(--on-dark); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.btn-gold          { background: var(--gold); color: var(--teal-950); }
.btn-gold:hover    { background: var(--gold-hover); }
.btn-outline-light       { border-color: rgba(242,245,244,.45); color: var(--on-dark); }
.btn-outline-light:hover { border-color: var(--gold); color: var(--gold); }

/* Foil sheen — a light sweep on hover, like light catching foil-stamped
   type. Only on the solid gold-filled variants; an outline button has no
   filled surface for light to catch. */
.btn-primary::before, .btn-gold::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.btn-primary:hover::before, .btn-gold:hover::before { animation: foil-sweep .9s ease; }
@keyframes foil-sweep { from { left: -60%; } to { left: 140%; } }
@media (prefers-reduced-motion: reduce) { .btn-primary:hover::before, .btn-gold:hover::before { animation: none; } }
html.is-reduced-motion .btn-primary:hover::before, html.is-reduced-motion .btn-gold:hover::before { animation: none; }

/* Dark photographic band: image + teal overlay, content above */
.band { position: relative; overflow: hidden; background: var(--teal-950); }
.band > .container { position: relative; z-index: 2; }
.band-media { position: absolute; inset: -12% 0; z-index: 0; }
.band-media img { width: 100%; height: 100%; object-fit: cover; }
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Faint blueprint grid over the darkening tint — a construction-drawing
     texture instead of a flat wash, at a low enough alpha to stay felt
     rather than seen. */
  background:
    repeating-linear-gradient(90deg, rgba(242,245,244,.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(242,245,244,.05) 0 1px, transparent 1px 34px),
    linear-gradient(180deg, rgba(6,26,30,.90), rgba(6,26,30,.78));
}

/* ---------- Ken-Burns drift on full-bleed band photography ---------- */
@keyframes ken-burns { from { transform: scale(1); } to { transform: scale(1.08); } }
.band-media img { animation: ken-burns 24s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .band-media img { animation: none; } }
html.is-reduced-motion .band-media img { animation: none; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Header / nav ---------- */
/* Header sits over the hero photo, so it (and the nav it contains) stay
   on-dark permanently: transparent while over the photo, solid teal-950
   once scrolled. Nav rules below are direct on-dark styling rather than
   a light-mode default layered under a .site-header override — the two
   have equal or lower specificity than each other and would otherwise
   fight over color depending on source order.
   The header spans the full viewport width rather than sitting inside
   .container: brand hard left, CTA hard right, using the same --gutter as
   the sections so the brand and the hero headline share a left edge. */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.site-header.scrolled {
  background: rgba(6,26,30,.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(242,245,244,.14);
  box-shadow: var(--shadow-sm);
}
/* backdrop-filter isn't universal — fall back to the previous solid fill. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.scrolled { background: var(--teal-950); }
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2.5vw, 48px);
  width: 100%;
  height: var(--header-h);
  padding-inline: var(--gutter);
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo { height: 96px; width: 96px; object-fit: cover; border-radius: 10px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brand-name { font-family: var(--font-display); font-weight: 700; color: var(--on-dark); font-size: 1.12rem; letter-spacing: -.01em; white-space: nowrap; }
.brand-sub { font-size: .72rem; font-weight: 500; color: var(--on-dark-soft); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }

.primary-nav ul { display: flex; align-items: center; gap: 2px; list-style: none; flex-wrap: nowrap; }
.primary-nav a {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  padding: 9px 11px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--on-dark);
  border-radius: var(--radius-sm);
  transition: color .2s, background .2s;
}
.primary-nav a:hover { color: var(--gold); }
.primary-nav a.is-active { color: var(--gold); font-weight: 600; }
/* Underline grows outward from centre rather than snapping on at full width. */
.primary-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: 4px;
  height: 2px;
  background: var(--gold);
  transition: left .3s cubic-bezier(.4,0,.2,1), right .3s cubic-bezier(.4,0,.2,1);
}
.primary-nav a:not(.nav-cta):hover::after,
.primary-nav a.is-active::after { left: 14px; right: 14px; }
.primary-nav a.nav-cta { background: var(--gold); color: var(--teal-950); font-weight: 600; padding: 10px 18px; margin-left: 8px; border-radius: var(--radius); }
.primary-nav a.nav-cta:hover { background: var(--gold-hover); color: var(--teal-950); }

/* Hamburger (hidden on desktop) */
.nav-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--on-dark); margin: 5px 0; transition: transform .25s, opacity .2s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  min-height: min(92vh, 900px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--header-h) + 72px);
}
/* width:100% is load-bearing — .hero is a column flex container, and
   .container's `margin: 0 auto` would otherwise shrink this item to its
   content width and centre it, pushing the headline off the page's left
   edge and out of line with the brand in the header. */
.hero-inner { width: 100%; padding-bottom: clamp(48px, 7vw, 96px); }
.hero-copy { max-width: 780px; }
.hero-copy h1 { margin-bottom: 22px; }
.hero-lead {
  font-size: clamp(1rem, 1.5vw, 1.13rem);
  max-width: 640px;
  color: var(--on-dark-soft);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0 28px; }
.hero-registrations {
  font-size: .84rem;
  letter-spacing: .03em;
  color: var(--on-dark-soft);
  margin: 0;
}
.hero-registrations strong { color: var(--gold); font-weight: 600; }

/* Stat bar docked to the bottom of the hero */
.hero-stats {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(242,245,244,.16);
  background: rgba(6,26,30,.55);
}
.hero-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
}
.stat { padding: 26px 20px; text-align: center; }
.stat + .stat { box-shadow: -1px 0 0 rgba(242,245,244,.16); }
.stat-num {
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
}
/* Odometer digits — js/script.js rebuilds each .stat-num into a strip of
   0-9 per digit and translates it into place, rather than tweening text.
   Sizes stay in em so it scales with the existing clamp() on .stat-num. */
.od-digit { display: inline-block; width: .64em; height: 1em; overflow: hidden; position: relative; text-align: center; }
.od-strip { display: flex; flex-direction: column; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.od-strip span { height: 1em; line-height: 1; display: flex; align-items: center; justify-content: center; }
.stat-suffix { margin-left: 2px; }
.stat-label {
  display: block;
  margin-top: 8px;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}

@media (max-width: 900px) {
  .hero { min-height: 0; padding-top: calc(var(--header-h) + 48px); }
  .hero-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(odd) { box-shadow: none; }
  .stat:nth-child(n+3) { box-shadow: 0 -1px 0 rgba(242,245,244,.16); }
  .stat:nth-child(4)   { box-shadow: 0 -1px 0 rgba(242,245,244,.16), -1px 0 0 rgba(242,245,244,.16); }
}
@media (max-width: 560px) {
  .hero-actions .btn { width: 100%; }
}

/* ---------- About ---------- */
.about { background: var(--surface); }
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.about-media { border-radius: var(--radius); }
.about-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.about-copy h2 { margin-bottom: 20px; }
.about-points { margin: 26px 0; display: grid; gap: 12px; }
.about-points li {
  position: relative;
  padding-left: 30px;
  list-style: none;
  color: var(--body-c);
}
.about-points li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 16px; height: 2px;
  background: var(--gold);
}
.about-md {
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.about-md-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  font-size: 1.05rem;
}
.about-md-role {
  display: block;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-media img { aspect-ratio: 3 / 2; }
}

/* ---------- Services ---------- */
.services { background: var(--bg); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.service-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md), 0 10px 24px -6px rgba(198,161,79,.28);
  border-color: rgba(198,161,79,.5);
}
.service-media { aspect-ratio: 3 / 2; }
.service-media img { width: 100%; height: 100%; object-fit: cover; }
.service-body { padding: 24px; flex: 1; }
.service-num {
  display: block;
  font-family: var(--font-display);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--gold-deep);
  margin-bottom: 10px;
}
.service-body h3 { margin-bottom: 10px; }
.service-body p { font-size: .94rem; margin-bottom: 0; }

/* Card without a photograph — gold rule stands in for the image */
.service-card.is-iconic { background: var(--teal); }
.service-card.is-iconic .service-body { padding-top: 34px; }
.service-card.is-iconic .service-body::before {
  content: "";
  display: block;
  width: 44px; height: 3px;
  background: var(--gold);
  margin-bottom: 20px;
}
.service-card.is-iconic h3 { color: var(--on-dark); }
.service-card.is-iconic p  { color: var(--on-dark-soft); }
.service-card.is-iconic .service-num { color: var(--gold); }

/* ---------- Blueprint corner frame (shared hover treatment) ----------
   Engineering-drawing corner brackets that draw in on hover/focus, inset
   far enough from the edge to stay clear of each card's overflow:hidden. */
.service-card::after,
.comp-card::after,
.process-step::after,
.comp-hero::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background-image:
    linear-gradient(to right, var(--gold) 2px, transparent 2px),
    linear-gradient(to bottom, var(--gold) 2px, transparent 2px),
    linear-gradient(to left, var(--gold) 2px, transparent 2px),
    linear-gradient(to bottom, var(--gold) 2px, transparent 2px),
    linear-gradient(to right, var(--gold) 2px, transparent 2px),
    linear-gradient(to top, var(--gold) 2px, transparent 2px),
    linear-gradient(to left, var(--gold) 2px, transparent 2px),
    linear-gradient(to top, var(--gold) 2px, transparent 2px);
  background-repeat: no-repeat;
  background-size: 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px;
  background-position: top left, top left, top right, top right, bottom right, bottom right, bottom left, bottom left;
  transition: opacity .3s ease;
}
.service-card:hover::after,
.service-card:focus-within::after,
.comp-card:hover::after,
.comp-card:focus-within::after,
.process-step:hover::after,
.process-step:focus-within::after,
.comp-hero:hover::after,
.comp-hero:focus-within::after { opacity: 1; }

.chip-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.chip-list li {
  list-style: none;
  font-size: .76rem;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--body-c);
  background: var(--bg);
}

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

/* ---------- Why us ---------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}
.why-item { border-top: 2px solid rgba(198,161,79,.5); padding-top: 22px; }
.why-num {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 12px;
}
.why-item h3 { color: var(--on-dark); margin-bottom: 8px; }
.why-item p  { color: var(--on-dark-soft); font-size: .94rem; margin-bottom: 0; }

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

/* ---------- Process ---------- */
.process { background: var(--teal-tint); }
.process-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  counter-reset: none;
}
/* A gold line drawing in behind the row on page-enter — four steps read as
   one pipeline rather than four independent cards. Each opaque card paints
   over the line except in the 24px gaps between them, so it reads as
   connective tissue rather than a bar cutting across the cards themselves.
   Only makes sense as one row, so it's 4-column-layout only. */
.process-connector {
  position: absolute;
  top: 53px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: var(--line);
  z-index: 0;
  list-style: none;
}
.process-connector-fill { height: 100%; width: 0; background: var(--gold); transition: width 1.6s cubic-bezier(.4,0,.2,1); }
@media (max-width: 900px) { .process-connector { display: none; } }
.process-step {
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.process-step:hover {
  transform: translateY(-3px);
  border-color: rgba(198,161,79,.5);
  box-shadow: var(--shadow-md), 0 10px 24px -6px rgba(198,161,79,.25);
}
.process-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 18px;
}
.process-step h3 { margin-bottom: 8px; }
.process-step p  { font-size: .93rem; margin-bottom: 0; }

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

/* ---------- Compliance ---------- */
.compliance {
  background:
    repeating-linear-gradient(90deg, rgba(242,245,244,.04) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(242,245,244,.04) 0 1px, transparent 1px 34px),
    var(--teal-950);
}
.compliance .section-intro { color: var(--on-dark-soft); }
/* Bento: one large "headline figure" tile (top-left, 2x2) plus the eight
   registrations auto-flowing into the remaining cells, instead of nine
   equally-weighted boxes competing for attention. */
.compliance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.comp-hero {
  position: relative;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px;
  border-radius: var(--radius);
  border: 1px solid rgba(242,245,244,.16);
  background: linear-gradient(155deg, var(--teal) 0%, var(--teal-950) 100%);
  overflow: hidden;
}
.comp-hero-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  color: var(--gold);
  line-height: 1;
}
.comp-hero-label {
  margin-top: 10px;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
@media (max-width: 1000px) { .comp-hero { grid-column: 1 / -1; grid-row: auto; } }
.comp-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid rgba(242,245,244,.16);
  border-radius: var(--radius);
  background: rgba(242,245,244,.04);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
}
.comp-card::before, .comp-hero::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(198,161,79,.35), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: 1;
}
.comp-card:hover::before, .comp-hero:hover::before { animation: foil-sweep 1s ease; }
@media (prefers-reduced-motion: reduce) { .comp-card:hover::before, .comp-hero:hover::before { animation: none; } }
html.is-reduced-motion .comp-card:hover::before, html.is-reduced-motion .comp-hero:hover::before { animation: none; }
.comp-card:hover {
  transform: translateY(-3px);
  border-color: rgba(198,161,79,.45);
  background: rgba(242,245,244,.07);
  box-shadow: 0 10px 24px -6px rgba(198,161,79,.22);
}
.comp-card img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex: none;
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 5px;
}
.comp-text h3 {
  color: var(--on-dark);
  font-size: .92rem;
  margin: 0 0 3px;
}
.comp-text p {
  margin: 0;
  font-size: .84rem;
  font-family: var(--font-body);
  color: var(--gold);
  word-break: break-all;
}

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

/* ---------- Clients ---------- */
.clients { background: var(--surface); }
/* The CTA band now lives inside this section (it's a bridge into Contact,
   not its own page) and supplies its own bottom padding, so the section's
   own bottom padding would otherwise double up above it. */
.clients { padding-bottom: 0; }
.clients .section-head { margin-left: auto; margin-right: auto; text-align: center; }
.clients .kicker { justify-content: center; }

/* Full-bleed marquee: the track holds two identical sets, so translating it
   -50% lands exactly one set along and the loop is seamless. Each set carries
   symmetric side padding equal to half the gap, keeping the seam even. */
.clients-marquee {
  position: relative;
  overflow: hidden;
  padding: 4px 0;
  margin-bottom: 26px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.clients-track {
  display: flex;
  width: max-content;
  animation: clients-scroll 45s linear infinite;
}
.clients-marquee:hover .clients-track,
.clients-marquee:focus-within .clients-track { animation-play-state: paused; }

.clients-set {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 0 10px;
  list-style: none;
}

@keyframes clients-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.client-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 210px;
  min-height: 116px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.client-logo img {
  max-height: 54px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
/* Global `p { max-width: 68ch }` would otherwise pin this left of the section. */
.clients-note { color: var(--muted); font-size: .94rem; margin: 0 auto; text-align: center; }

@media (max-width: 620px) {
  .client-logo { width: 164px; min-height: 96px; padding: 16px 18px; }
  .client-logo img { max-height: 44px; }
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--teal);
  border-top: 3px solid var(--gold);
  padding: clamp(44px, 5vw, 68px) 0;
}
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-band h2 { color: var(--on-dark); margin-bottom: 8px; }
.cta-band h2 em { color: var(--gold); font-style: normal; }
.cta-band p { color: var(--on-dark-soft); margin: 0; max-width: 620px; }
.cta-band .btn { flex: none; }

@media (max-width: 620px) {
  .cta-band .btn { width: 100%; }
}

/* ---------- Contact ---------- */
.contact { background: var(--bg); }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 3vw, 44px);
  align-items: stretch;
}
.contact-info { display: flex; flex-direction: column; }
.contact-person { margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.contact-company {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 6px;
}
.contact-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.contact-role {
  margin: 0;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
/* Detail cards rather than a flat stack: two per row fills the column's
   width, which keeps this side roughly level with the action panel beside
   it instead of running far below it. The email and the addresses are too
   long for a half-width card, so they take the full row. */
.contact-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  flex: 1;
  align-content: start;
}
.contact-list li {
  list-style: none;
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
}
.contact-list li.ci-wide, .contact-list li:nth-last-child(-n+2) { grid-column: 1 / -1; }
.ci-label {
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.contact-list li > span:not(.ci-label) { line-height: 1.6; }
.contact-list a { color: var(--teal); font-weight: 500; width: fit-content; }
.contact-list a:hover { color: var(--gold-deep); }

/* Flex column, contents centred as a block: the panel stretches to match the
   detail cards beside it (rather than floating with dead space under it),
   without leaving a hollow gap in its middle. */
.contact-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--teal-950);
  border-radius: var(--radius);
  border-top: 3px solid var(--gold);
  padding: clamp(28px, 3.5vw, 40px);
}
.contact-panel h3 { color: var(--on-dark); font-size: 1.3rem; }
.contact-panel p  { color: var(--on-dark-soft); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 20px; }
.contact-panel-note {
  font-size: .88rem;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid rgba(242,245,244,.14);
}
.contact-panel-note a { color: var(--gold); font-weight: 600; }

@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .contact-actions .btn { width: 100%; }
  .contact-list { grid-template-columns: 1fr; }
  .contact-list li { grid-column: 1 / -1; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--teal-950); color: var(--on-dark-soft); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding: clamp(48px, 6vw, 76px) 24px clamp(36px, 4vw, 52px);
}
.footer-logo { width: 108px; border-radius: var(--radius-sm); margin-bottom: 18px; }
.footer-brand p { font-size: .92rem; margin: 0; }
.site-footer h4 {
  color: var(--on-dark);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-weight: 600;
}
.site-footer ul { display: grid; gap: 9px; }
.site-footer li { list-style: none; }
.site-footer a {
  position: relative;
  display: inline-block;
  color: var(--on-dark-soft);
  font-size: .92rem;
}
.site-footer a::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: -3px;
  height: 1px;
  background: var(--gold);
  transition: left .3s cubic-bezier(.4,0,.2,1), right .3s cubic-bezier(.4,0,.2,1);
}
.site-footer a:hover { color: var(--gold); }
.site-footer a:hover::after { left: 0; right: 0; }
.footer-contact p { margin: 0 0 9px; font-size: .92rem; }
.footer-bottom { border-top: 1px solid rgba(242,245,244,.14); }
.footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 20px;
}
.footer-bottom p { margin: 0; font-size: .82rem; }
.footer-reg { color: var(--muted); }

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

/* ---------- Page transition curtain ----------
   Extends the site's existing image-reveal curtain language (a teal-950
   panel wiping open) to the page swap itself: sweeps in from the left to
   cover the outgoing page, the DOM swap happens while fully covered, then
   it sweeps out to the right revealing the new page. Driven entirely by
   js/script.js (GSAP scaleX tween); this class only sets the resting state. */
.page-curtain {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--teal-950);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* ---------- Page dots ---------- */
.page-dots {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 60;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(6,26,30,.55);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(242,245,244,.14);
  opacity: 1;
  transition: opacity .25s ease;
}
/* Hidden rather than fixed-overlapping once the footer scrolls into view —
   short pages (Compliance, Why Us) show the footer without scrolling, and a
   fixed rail would otherwise sit on top of the footer's own links. */
.page-dots.is-hidden { opacity: 0; pointer-events: none; }
.page-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(242,245,244,.4);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color .2s, transform .2s;
}
.page-dot:hover { background: rgba(242,245,244,.7); }
.page-dot.is-active { background: var(--gold); transform: scale(1.35); }

@media (max-width: 640px) { .page-dots { display: none; } }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--teal); color: #fff; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .25s, transform .25s, background .2s;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--teal-hover); }
.to-top svg { width: 20px; height: 20px; }

/* ---------- Responsive ---------- */
/* Mobile nav — breakpoint kept in sync with js/script.js (innerWidth > 1300) */
@media (max-width: 1300px) {
  .nav-toggle { display: block; }
  .primary-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    display: none;
  }
  .primary-nav.open { display: block; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 10px 16px 16px; }
  /* Dropdown panel itself stays light (var(--surface) below), so its
     links need ink-on-light, not the header's permanent on-dark color. */
  .primary-nav a { display: block; padding: 13px 10px; font-size: 1rem; color: var(--ink); border-radius: var(--radius-sm); }
  .primary-nav a:hover { color: var(--teal); background: var(--teal-tint); }
  .primary-nav a.nav-cta { margin: 10px 0 0; text-align: center; }
}

@media (max-width: 640px) {
  .nav-inner { gap: 10px; }
  .brand { gap: 9px; }
  .brand-logo { height: 64px; width: 64px; }
  /* Text shrinks more than usual here: the logo itself now carries the
     company name (full graphic incl. wordmark, not just the icon), so this
     label just needs to stay legible, not compete with it for width next
     to the hamburger — see the mobile-overlap gotcha in CLAUDE.md. */
  .brand-name { font-size: .8rem; letter-spacing: -.005em; }
  .brand-sub { display: none; }
  .nav-toggle { padding: 10px 4px; }
  .footer-bottom-inner { justify-content: center; text-align: center; }
}

/* ---------- Mobile content trim ----------
   Phones get a shorter page, not a different one: .sm-hide marks copy that
   restates something already on screen (duplicate compliance strip, About
   elaborations, section intros that echo their heading, the footer Services
   column). Desktop markup is untouched — only this query hides them, so
   nothing needs re-adding if the trim is ever reversed. */
@media (max-width: 640px) {
  .sm-hide { display: none !important; }

  /* Services was a third of the mobile page: eight stacked cards, each with a
     3:2 photo above its text. Turning the card into a row puts the photo
     alongside the copy, where it costs no extra height — every card keeps its
     image and its words, the section just stops being a scroll. */
  .service-card { flex-direction: row; }
  .service-media { flex: 0 0 104px; aspect-ratio: auto; align-self: stretch; }
  .service-media img { height: 100%; }
  .service-body { padding: 18px; min-width: 0; }
  .service-body h3 { font-size: 1.02rem; }
  .chip-list { gap: 6px; }
  .chip-list li { font-size: .72rem; padding: 4px 9px; }

  .about-copy p + p { margin-top: 14px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }

/* Marquee has no static equivalent, so reduced motion collapses it to the
   three real logos, centered — the duplicate sets exist only for the loop. */
.clients-track { animation: none; width: 100%; justify-content: center; }
.clients-set { flex-wrap: wrap; justify-content: center; }
.clients-set + .clients-set { display: none; }
.clients-set li:nth-child(n+4) { display: none; }
.clients-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* Mirrors the block above for the ?noanim screenshot path (see js/script.js) */
html.is-reduced-motion { scroll-behavior: auto; }
html.is-reduced-motion *,
html.is-reduced-motion *::before,
html.is-reduced-motion *::after {
  transition-duration: .01ms !important;
  animation-duration: .01ms !important;
}

/* ---------- Image curtain reveal ---------- */
.img-reveal { position: relative; overflow: hidden; }
.img-reveal img {
  transform: scale(1.08);
  transition: transform 1.1s cubic-bezier(.22,.61,.36,1);
}
/* Teal duotone grade, permanent (not part of the reveal transition) — unifies
   eight different stock photographs into one consistent "shoot" instead of
   reading as separate flat images. Sits above the <img> (default stacking)
   and below the curtain (::after, z-index 2). */
.img-reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--teal);
  mix-blend-mode: color;
  opacity: .55;
  pointer-events: none;
}
.img-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--teal-950);
  transform: translateX(0);
  transition: transform .85s cubic-bezier(.76,0,.24,1);
  z-index: 2;
}
.img-reveal.is-in img    { transform: scale(1); }
.img-reveal.is-in::after { transform: translateX(101%); }

@media (prefers-reduced-motion: reduce) {
  .img-reveal img    { transform: none; transition: none; }
  .img-reveal::after { display: none; }
  html { scroll-behavior: auto; }
}

/* Mirrors the block above for the ?noanim screenshot path (see js/script.js) */
html.is-reduced-motion .img-reveal img    { transform: none; transition: none; }
html.is-reduced-motion .img-reveal::after { display: none; }

html.is-reduced-motion .clients-track { animation: none; width: 100%; justify-content: center; }
html.is-reduced-motion .clients-set { flex-wrap: wrap; justify-content: center; }
html.is-reduced-motion .clients-set + .clients-set { display: none; }
html.is-reduced-motion .clients-set li:nth-child(n+4) { display: none; }
html.is-reduced-motion .clients-marquee { -webkit-mask-image: none; mask-image: none; }

/* ---------- Print ----------
   The in-page scroll reveal (revealWhenVisible() in js/script.js) hides
   below-the-fold [data-anim] content and defers it to an IntersectionObserver
   that only fires on a real scroll — a full-page screenshot tool, a
   print-to-PDF export, or a crawler that renders without scrolling never
   fires it, so that content would otherwise print/export blank (caught on
   the Compliance and Contact pages: the last four registration cards and
   the whole "Send us your requirement" panel). !important is required here
   because GSAP sets opacity/transform as inline styles, which otherwise
   beat an ordinary stylesheet rule regardless of media query. */
@media print {
  [data-anim] { opacity: 1 !important; transform: none !important; }
  .img-reveal img { transform: none !important; }
  .img-reveal::after { display: none !important; }
  .process-connector-fill { width: 100% !important; }
  /* Fixed floating chrome has no place on a printed page. */
  .page-curtain, .page-dots, .to-top { display: none !important; }
}