/* ==========================================================================
   TRK India Group — design system
   Warm ivory ground, deep charcoal type, premium green, muted gold accents.
   ========================================================================== */

:root {
  /* Ground */
  --ivory: #fcfbf7;
  --ivory-2: #f5f2ea;
  --ivory-3: #ece7db;
  --white: #ffffff;

  /* Ink */
  --charcoal: #16181a;
  --charcoal-2: #23272a;
  --ink-70: #4a4f54;
  --ink-55: #6b7075;
  --ink-40: #8c9196;

  /* Green */
  --green-900: #0a2c22;
  --green-800: #0e3b2e;
  --green-700: #14513e;
  --green-600: #1a6a4f;
  --green-500: #22855f;
  --green-tint: #e7efe9;

  /* Gold */
  --gold: #b08d4f;
  --gold-soft: #d8c197;
  --gold-tint: #f4ecdd;

  /* Lines & shadow */
  --line: rgba(22, 24, 26, 0.1);
  --line-strong: rgba(22, 24, 26, 0.18);
  --line-light: rgba(255, 255, 255, 0.14);
  --shadow-sm: 0 1px 2px rgba(16, 24, 20, 0.04), 0 4px 14px rgba(16, 24, 20, 0.05);
  --shadow-md: 0 2px 6px rgba(16, 24, 20, 0.05), 0 18px 48px rgba(16, 24, 20, 0.1);
  --shadow-lg: 0 8px 24px rgba(16, 24, 20, 0.08), 0 40px 90px rgba(16, 24, 20, 0.14);

  /* Radius */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* Rhythm */
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(72px, 9vw, 148px);
  --maxw: 1280px;
  --maxw-narrow: 760px;

  /* Type */
  --font-display: "Plus Jakarta Sans", "Segoe UI", -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
    Arial, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 78px;
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

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

/* <picture> wraps the <img> for AVIF/WebP selection but must not create a box
   of its own — this keeps every existing `.slot img` rule working unchanged. */
picture {
  display: contents;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.08;
  margin: 0 0 0.5em;
  color: var(--charcoal);
  text-wrap: balance;
}

p {
  margin: 0 0 1.1em;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

strong {
  font-weight: 600;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--green-800);
  color: var(--ivory);
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translate(-50%, -140%);
  background: var(--charcoal);
  color: var(--ivory);
  padding: 10px 18px;
  border-radius: var(--r-md);
  z-index: 200;
  font-size: 0.9rem;
  transition: transform 0.2s var(--ease);
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-narrow {
  max-width: calc(var(--maxw-narrow) + var(--gutter) * 2);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

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

.section--ivory2 {
  background: var(--ivory-2);
}

.section--dark {
  background: var(--charcoal);
  color: rgba(255, 255, 255, 0.82);
}

.section--green {
  background: var(--green-900);
  color: rgba(255, 255, 255, 0.82);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--green h1,
.section--green h2,
.section--green h3,
.section--green h4 {
  color: #fff;
}

.grid {
  display: grid;
  gap: clamp(24px, 3vw, 44px);
}

/* --------------------------------------------------------------------------
   Type utilities
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-700);
  margin: 0 0 22px;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold);
  flex: none;
}

.section--dark .eyebrow,
.section--green .eyebrow {
  color: var(--gold-soft);
}

.h-display {
  font-size: clamp(2.6rem, 6.4vw, 5.1rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
}

.h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.9rem);
  letter-spacing: -0.03em;
}

.h2 {
  font-size: clamp(1.95rem, 3.5vw, 3rem);
  letter-spacing: -0.028em;
}

.h3 {
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  letter-spacing: -0.022em;
}

.h4 {
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  letter-spacing: -0.015em;
}

.lede {
  font-size: clamp(1.08rem, 1.45vw, 1.32rem);
  line-height: 1.6;
  color: var(--ink-70);
  max-width: 62ch;
}

.section--dark .lede,
.section--green .lede {
  color: rgba(255, 255, 255, 0.72);
}

.muted {
  color: var(--ink-55);
}

.small {
  font-size: 0.9rem;
  line-height: 1.6;
}

.tiny {
  font-size: 0.79rem;
  line-height: 1.55;
  color: var(--ink-55);
}

.section--dark .tiny,
.section--green .tiny {
  color: rgba(255, 255, 255, 0.5);
}

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--green-800);
  --btn-fg: #fff;
  --btn-bd: var(--green-800);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
    border-color 0.35s var(--ease), transform 0.35s var(--ease);
  will-change: transform;
}

.btn:hover {
  --btn-bg: var(--green-700);
  --btn-bd: var(--green-700);
  transform: translateY(-2px);
}

.btn .arw {
  transition: transform 0.35s var(--ease);
}

.btn:hover .arw {
  transform: translateX(4px);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--charcoal);
  --btn-bd: var(--line-strong);
}

.btn--ghost:hover {
  --btn-bg: var(--charcoal);
  --btn-fg: var(--ivory);
  --btn-bd: var(--charcoal);
}

.btn--onDark {
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, 0.28);
}

.btn--onDark:hover {
  --btn-bg: #fff;
  --btn-fg: var(--charcoal);
  --btn-bd: #fff;
}

.btn--gold {
  --btn-bg: var(--gold);
  --btn-bd: var(--gold);
  --btn-fg: #1c1608;
}

.btn--gold:hover {
  --btn-bg: var(--gold-soft);
  --btn-bd: var(--gold-soft);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--green-700);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), gap 0.3s var(--ease);
}

.link-arrow:hover {
  border-color: currentColor;
  gap: 14px;
}

.section--dark .link-arrow,
.section--green .link-arrow {
  color: var(--gold-soft);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background 0.45s var(--ease), box-shadow 0.45s var(--ease),
    border-color 0.45s var(--ease), height 0.45s var(--ease);
  border-bottom: 1px solid transparent;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

/* The supplied logo, in two colourways: white while the header floats over a
   dark hero, the artwork's own navy once the header turns solid. Both are
   always in the DOM so the swap never flashes. */
.brand__logo {
  height: 40px;
  width: auto;
  flex: none;
  transition: height 0.45s var(--ease);
}

.brand__logo--dark {
  display: none;
}

.site-header.is-stuck .brand__logo {
  height: 34px;
}

.site-header.is-stuck .brand__logo--light {
  display: none;
}

.site-header.is-stuck .brand__logo--dark {
  display: block;
}

.brand--foot .brand__logo {
  height: 46px;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--charcoal);
  transition: color 0.4s var(--ease);
}

.brand__sub {
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-top: 5px;
  transition: color 0.4s var(--ease);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
}

.nav a {
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--ink-70);
  padding: 6px 0;
  position: relative;
  transition: color 0.3s var(--ease);
  white-space: nowrap;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transition: right 0.4s var(--ease);
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--charcoal);
}

.nav a:hover::after,
.nav a[aria-current="page"]::after {
  right: 0;
}

.header-cta {
  padding: 11px 20px;
  font-size: 0.87rem;
}

/* Transparent-over-hero variant */
.site-header--over .brand__name {
  color: #fff;
}

.site-header--over .brand__sub {
  color: rgba(255, 255, 255, 0.55);
}

.site-header--over .nav a {
  color: rgba(255, 255, 255, 0.78);
}

.site-header--over .nav a:hover,
.site-header--over .nav a[aria-current="page"] {
  color: #fff;
}

.site-header--over .header-cta {
  --btn-bg: rgba(255, 255, 255, 0.1);
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, 0.32);
}

.site-header--over .header-cta:hover {
  --btn-bg: #fff;
  --btn-fg: var(--charcoal);
  --btn-bd: #fff;
}

.site-header--over .burger span {
  background: #fff;
}

/* Scrolled state */
.site-header.is-stuck {
  background: rgba(252, 251, 247, 0.82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 24px rgba(16, 24, 20, 0.05);
  height: 68px;
}

.site-header.is-stuck .brand__name {
  color: var(--charcoal);
}

.site-header.is-stuck .brand__sub {
  color: var(--ink-40);
}

.site-header.is-stuck .nav a {
  color: var(--ink-70);
}

.site-header.is-stuck .nav a:hover,
.site-header.is-stuck .nav a[aria-current="page"] {
  color: var(--charcoal);
}

.site-header.is-stuck .header-cta {
  --btn-bg: var(--green-800);
  --btn-fg: #fff;
  --btn-bd: var(--green-800);
}

.site-header.is-stuck .burger span {
  background: var(--charcoal);
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
}

.burger span {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 1.5px;
  background: var(--charcoal);
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease),
    background 0.4s var(--ease);
}

.burger span:nth-child(1) {
  top: 17px;
}

.burger span:nth-child(2) {
  top: 25px;
}

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

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

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: var(--ivory);
  padding: calc(var(--header-h) + 28px) var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease),
    visibility 0.35s;
  overflow-y: auto;
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.mobile-nav a {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-nav .mn-foot {
  margin-top: auto;
  padding-top: 30px;
}

/* --------------------------------------------------------------------------
   Homepage hero — rotating group lockup
   Full-screen, one slide per business. Group name holds; sector changes.
   -------------------------------------------------------------------------- */

.vhero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* The content block sits in the true centre of the hero, not against an edge.
     Flex centring keeps it centred at every viewport height without fixed
     offsets, and the header padding stops it drifting under the navbar. */
  justify-content: center;
  align-items: center;
  padding-top: calc(var(--header-h) + 24px);
  padding-bottom: clamp(48px, 6vh, 80px);
  background: #07231b;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* ---- backgrounds ---- */

.vhero__stage {
  position: absolute;
  inset: 0;
  z-index: -3;
}

.vhero__scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 800ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 4400ms linear;
  will-change: opacity, transform;
}

.vhero__scene.is-active {
  opacity: 1;
  transform: scale(1.07);
}

.vhero__scene svg,
.vhero__scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Per-slide wash: strength comes from --scrim on the scene, so a bright
   product shot gets more cover than a dark film still. */
.vhero__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      92deg,
      rgba(4, 16, 12, calc(var(--scrim, 0.5) + 0.16)) 0%,
      rgba(4, 16, 12, var(--scrim, 0.5)) 42%,
      rgba(4, 16, 12, calc(var(--scrim, 0.5) * 0.34)) 100%
    );
}

/* Base wash under everything: seats the type and steadies contrast while the
   backgrounds crossfade. */
.vhero__wash {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    /* Pool of shade where the centred lockup sits, so type holds its contrast
       even over a bright frame, while the edges of the photograph stay vivid. */
    radial-gradient(
      ellipse 66% 44% at 38% 50%,
      rgba(3, 12, 9, 0.46) 0%,
      rgba(3, 12, 9, 0.2) 55%,
      rgba(3, 12, 9, 0) 100%
    ),
    linear-gradient(to top, rgba(3, 12, 9, 0.78) 0%, rgba(3, 12, 9, 0) 52%),
    linear-gradient(to bottom, rgba(3, 12, 9, 0.46) 0%, rgba(3, 12, 9, 0) 30%);
}

/* ---- the lockup ---- */

.vhero__inner {
  position: relative;
  width: 100%;
  /* Wider than the site grid: the lockup is one long line and the hero is
     full-bleed, so it gets more room than a text column would. */
  max-width: 1460px;
  text-align: left;
}

.vhero__lockup {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: clamp(12px, 1.5vw, 22px);
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  /* Caps run wider than title case, and "GOVERNMENT SOLUTIONS" is the longest
     line the hero has to hold — this scale keeps it on one line to 1280px. */
  font-size: clamp(1.3rem, 2.8vw, 2.8rem);
  line-height: 1.06;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  text-wrap: nowrap;
  text-shadow: 0 1px 2px rgba(2, 10, 7, 0.4), 0 4px 30px rgba(2, 10, 7, 0.55);
}

.vhero__group {
  font-weight: 300;
  white-space: nowrap;
}

.vhero__rule {
  flex: none;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1;
}

/* The sectors stack in one box so the line never reflows as they swap. */
.vhero__sectors {
  position: relative;
  display: inline-grid;
  justify-items: start;
  text-align: left;
  /* Width follows the active sector (measured in site.js) so the lockup is
     centred as one unit on every slide, and glides between lengths rather
     than jumping. */
  transition: width 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: width;
}

.vhero__sector {
  grid-area: 1 / 1;
  white-space: nowrap;
  justify-self: center;
  font-weight: 700;
  color: var(--gold-soft);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 480ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

/* Everything except the sector on screen is taken out of flow, so the box
   sizes to the active word and the whole lockup centres as one unit. The
   separate `translate` property keeps the fade's transform free. */
.vhero__sector:not(.is-active) {
  position: absolute;
  top: 0;
  left: 0;
}

.vhero__sector.is-active {
  position: relative;
  opacity: 1;
  transform: none;
}

.vhero__sector.is-leaving {
  opacity: 0;
  transform: translateY(-12px);
}

/* ---- responsive ---- */

@media (max-width: 940px) {
  .vhero {
    padding-bottom: clamp(40px, 6vh, 64px);
  }

  /* Stack the lockup rather than shrinking one long line to nothing. */
  .vhero__lockup {
    display: block;
    font-size: clamp(1.3rem, 5.6vw, 2.1rem);
    text-wrap: balance;
  }

  .vhero__group {
    display: block;
  }

  .vhero__rule {
    display: none;
  }

  .vhero__sectors {
    display: grid;
    margin-top: 10px;
    min-width: 0;
    width: auto !important;
  }

  .vhero__sector {
    white-space: normal;
  }

}

@media (max-width: 620px) {
  .vhero__lockup {
    font-size: clamp(1.25rem, 6.4vw, 1.9rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vhero__scene {
    transform: none !important;
    transition: opacity 400ms linear;
  }

  .vhero__sector {
    transform: none !important;
    transition: opacity 300ms linear;
  }
}


/* Page hero (interior pages) */
.phero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(64px, 9vw, 132px));
  padding-bottom: clamp(48px, 6vw, 86px);
  background: var(--green-900);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.phero__art {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.78;
}

.phero__art svg,
.phero__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.phero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    105deg,
    rgba(8, 34, 26, 0.95) 20%,
    rgba(8, 34, 26, 0.66) 100%
  );
}

.phero h1 {
  color: #fff;
  max-width: 18ch;
}

.phero .lede {
  color: rgba(255, 255, 255, 0.72);
}

.phero--films {
  background: #0c0d0f;
}

.phero--films::after {
  background: linear-gradient(105deg, rgba(10, 11, 13, 0.95) 20%, rgba(10, 11, 13, 0.6) 100%);
}

.phero--nimbarka {
  background: #1d2a20;
}

.phero--nimbarka::after {
  background: linear-gradient(105deg, rgba(20, 32, 24, 0.94) 20%, rgba(20, 32, 24, 0.6) 100%);
}

.phero--fleetxon {
  background: #0b1720;
}

.phero--fleetxon::after {
  background: linear-gradient(105deg, rgba(9, 20, 28, 0.95) 20%, rgba(9, 20, 28, 0.6) 100%);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 26px;
}

.crumbs a:hover {
  color: #fff;
}

.crumbs span {
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Stats strip
   -------------------------------------------------------------------------- */

.stats {
  /* Navy / warm-neutral palette — see src/data/site.mjs for the card content. */
  --stat-navy: #142b4a;
  --stat-navy-deep: #0b1f36;
  --stat-navy-soft: #284c7a;
  --stat-heading: #171a1f;
  --stat-muted: #6d7278;
  --stat-band: #f5f3ee;
  --stat-card: #faf9f6;
  --stat-line: #d9d6cf;

  background: var(--stat-band);
  padding: clamp(48px, 6vw, 88px) 0;
  border-top: 1px solid var(--stat-line);
  border-bottom: 1px solid var(--stat-line);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
  align-items: stretch;
}

.stat {
  /* Equal width from the grid, equal height from stretch + full-height card. */
  height: 100%;
  padding: clamp(28px, 3vw, 40px) clamp(20px, 2.2vw, 32px);
  background: var(--stat-card);
  border: 1px solid var(--stat-line);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}

.stat:hover {
  border-color: var(--stat-navy-soft);
  transform: translateY(-2px);
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--stat-navy);
  font-variant-numeric: tabular-nums;
  /* A shared baseline block so the four labels line up across the row even
     though one value is a word and three are figures. */
  min-height: clamp(2.2rem, 3.4vw, 3rem);
  display: flex;
  align-items: flex-end;
}

/* Word values ("Multi-Sector") read heavy at numeral size — set them smaller,
   with normal tracking, so all four cards balance optically. */
.stat__value--text {
  font-size: clamp(1.5rem, 2.1vw, 1.95rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-wrap: balance;
}

.stat__label {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stat-heading);
  font-weight: 600;
}

.stat__note {
  font-size: 0.84rem;
  color: var(--stat-muted);
  line-height: 1.55;
}

.stats__note {
  padding: clamp(20px, 2.4vw, 30px) 0 0;
  font-size: 0.76rem;
  color: var(--stat-muted);
}

@media (prefers-reduced-motion: reduce) {
  .stat {
    transition: none;
  }

  .stat:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Section heading block
   -------------------------------------------------------------------------- */

.shead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(20px, 4vw, 72px);
  align-items: end;
  margin-bottom: clamp(38px, 5vw, 68px);
}

.shead--center {
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
  max-width: 780px;
  margin-inline: auto;
}

.shead--center .eyebrow::before {
  display: none;
}

.shead__aside {
  padding-bottom: 6px;
}

/* --------------------------------------------------------------------------
   Business cards
   -------------------------------------------------------------------------- */

.biz-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 28px);
}

.bizcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(340px, 38vw, 470px);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--charcoal);
  color: #fff;
  isolation: isolate;
  border: 1px solid transparent;
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}

.bizcard:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.bizcard__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.bizcard__media svg,
.bizcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}

.bizcard:hover .bizcard__media svg,
.bizcard:hover .bizcard__media img {
  transform: scale(1.07);
}

.bizcard__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(8, 12, 10, 0.92) 6%,
    rgba(8, 12, 10, 0.55) 46%,
    rgba(8, 12, 10, 0.16) 100%
  );
  transition: opacity 0.6s var(--ease);
}

.bizcard__body {
  margin-top: auto;
  padding: clamp(24px, 2.6vw, 38px);
}

.bizcard__industry {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 12px;
  display: block;
}

.bizcard__name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  color: #fff;
  margin: 0 0 2px;
}

.bizcard__desc {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.96rem;
  line-height: 1.55;
  margin: 14px 0 0;
  max-width: 44ch;
  opacity: 0;
  max-height: 0;
  transform: translateY(8px);
  overflow: hidden;
  transition: opacity 0.5s var(--ease), max-height 0.6s var(--ease),
    transform 0.6s var(--ease);
}

.bizcard:hover .bizcard__desc,
.bizcard:focus-within .bizcard__desc {
  opacity: 1;
  max-height: 120px;
  transform: none;
}

.bizcard__go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: #fff;
}

.bizcard__go .arw {
  transition: transform 0.4s var(--ease);
}

.bizcard:hover .bizcard__go .arw {
  transform: translateX(5px);
}

.bizcard__link {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.bizcard__link span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* --------------------------------------------------------------------------
   Verticals mosaic — the six Group verticals
   An asymmetric bento: one flagship, two halves, one wide, two compact.
   -------------------------------------------------------------------------- */

.vt-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(clamp(190px, 17vw, 236px), auto);
  gap: clamp(14px, 1.5vw, 22px);
}

.vt {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-lg);
  background: var(--charcoal);
  color: #fff;
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}

.vt:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

/* Tile shapes ------------------------------------------------------------ */
.vt--lg {
  grid-column: span 7;
  grid-row: span 2;
}

.vt--md {
  grid-column: span 5;
}

.vt--wide {
  grid-column: span 6;
}

.vt--sm {
  grid-column: span 3;
}

/* Media ------------------------------------------------------------------ */
.vt__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.vt__media svg,
.vt__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

.vt:hover .vt__media svg,
.vt:hover .vt__media img {
  transform: scale(1.06);
}

.vt__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* a short top scrim so the index numeral holds against bright photography */
    linear-gradient(to bottom, rgba(6, 12, 10, 0.55) 0%, rgba(6, 12, 10, 0) 30%),
    linear-gradient(
      to top,
      rgba(6, 12, 10, 0.94) 4%,
      rgba(6, 12, 10, 0.62) 44%,
      rgba(6, 12, 10, 0.2) 100%
    );
  transition: opacity 0.6s var(--ease);
}

/* The compact markers carry a deeper wash so their short type stays legible
   against busier photography. */
.vt--sm .vt__veil {
  background:
    linear-gradient(to bottom, rgba(6, 12, 10, 0.5) 0%, rgba(6, 12, 10, 0) 34%),
    linear-gradient(
      to top,
      rgba(6, 12, 10, 0.95) 10%,
      rgba(6, 12, 10, 0.74) 58%,
      rgba(6, 12, 10, 0.44) 100%
    );
}

/* Index numeral ---------------------------------------------------------- */
/* The numeral sits in normal flow at the top of the tile and the body is
   pushed to the bottom — so on a short tile with long copy they can never
   collide, whatever the breakpoint. */
.vt__index {
  align-self: flex-start;
  padding: clamp(16px, 1.6vw, 26px) clamp(20px, 2.2vw, 34px) 0;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: var(--gold-soft);
  opacity: 0.85;
}

.vt__index::after {
  content: "";
  display: block;
  width: 22px;
  height: 1px;
  margin-top: 8px;
  background: var(--gold);
  transition: width 0.5s var(--ease-out);
}

.vt:hover .vt__index::after {
  width: 42px;
}

.vt--lg .vt__index {
  font-size: 0.9rem;
}

/* Body ------------------------------------------------------------------- */
.vt__body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: clamp(20px, 2.4vw, 36px);
}

.vt__industry {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 10px;
}

.vt__name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.026em;
  color: #fff;
  margin: 0;
}

.vt--lg .vt__name {
  font-size: clamp(1.9rem, 3vw, 2.7rem);
}

.vt--wide .vt__name {
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
}

.vt--sm .vt__name {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
}

.vt__desc {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.94rem;
  line-height: 1.55;
  max-width: 46ch;
  margin: 12px 0 0;
}

/* On every tile but the flagship the description stays folded away until the
   tile is hovered or focused, so the mosaic reads as shapes first. */
.vt:not(.vt--lg) .vt__desc {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  transform: translateY(6px);
  overflow: hidden;
  transition: opacity 0.45s var(--ease), max-height 0.55s var(--ease),
    margin-top 0.55s var(--ease), transform 0.55s var(--ease);
}

.vt:not(.vt--lg):hover .vt__desc,
.vt:not(.vt--lg):focus-within .vt__desc {
  opacity: 1;
  max-height: 130px;
  margin-top: 12px;
  transform: none;
}

/* The compact markers stay a name and a cue — no description on hover. */
.vt--sm .vt__desc {
  display: none;
}

.vt__go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: clamp(14px, 1.6vw, 22px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  color: #fff;
}

.vt--sm .vt__go {
  font-size: 0.82rem;
  margin-top: 12px;
}

.vt__go .arw {
  transition: transform 0.4s var(--ease);
}

.vt:hover .vt__go .arw {
  transform: translateX(5px);
}

.vt__link {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.vt__link span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .vt,
  .vt__media svg,
  .vt__media img,
  .vt__desc,
  .vt__index::after {
    transition: none;
  }

  .vt:hover {
    transform: none;
  }

  .vt:hover .vt__media svg,
  .vt:hover .vt__media img {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Split feature
   -------------------------------------------------------------------------- */

.feature {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 5vw, 84px);
  align-items: center;
}

.feature--flip .feature__media {
  order: 2;
}

.feature__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3.2;
  background: var(--ivory-3);
  box-shadow: var(--shadow-md);
}

.feature__media svg,
.feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature__badge {
  position: absolute;
  left: 20px;
  bottom: 20px;
  background: rgba(252, 251, 247, 0.92);
  backdrop-filter: blur(8px);
  border-radius: var(--r-sm);
  padding: 10px 16px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-800);
}

.feature__body h2 {
  margin-bottom: 22px;
}

.feature__list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 28px 0 32px;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 0.83rem;
  color: var(--ink-70);
  background: transparent;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease),
    background 0.3s var(--ease);
}

.tag:hover {
  border-color: var(--green-600);
  color: var(--green-700);
  background: var(--green-tint);
}

.section--dark .tag,
.section--green .tag {
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.78);
}

.section--dark .tag:hover,
.section--green .tag:hover {
  border-color: var(--gold-soft);
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

/* --------------------------------------------------------------------------
   One group / connector
   -------------------------------------------------------------------------- */

.connector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: clamp(40px, 5vw, 70px);
}

.connector__cell {
  background: var(--green-900);
  padding: clamp(26px, 3vw, 44px) clamp(20px, 2.2vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background 0.5s var(--ease);
}

.connector__cell:hover {
  background: #0d3527;
}

.connector__num {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--gold);
}

.connector__title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
}

.connector__body {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Timeline
   -------------------------------------------------------------------------- */

.tl {
  position: relative;
  margin-top: clamp(28px, 4vw, 52px);
}

.tl__track {
  display: flex;
  gap: clamp(20px, 3vw, 44px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 26px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.tl__track::-webkit-scrollbar {
  height: 3px;
}

.tl__track::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 3px;
}

.tl__item {
  flex: 0 0 min(320px, 78vw);
  scroll-snap-align: start;
  padding-top: 34px;
  position: relative;
}

.tl__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}

.tl__item::after {
  content: "";
  position: absolute;
  top: -3.5px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.tl__year {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--green-800);
  line-height: 1;
  margin-bottom: 12px;
}

.tl__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  margin-bottom: 8px;
  letter-spacing: -0.015em;
}

.tl__body {
  font-size: 0.93rem;
  color: var(--ink-55);
  line-height: 1.6;
}

.tl__src {
  margin-top: 10px;
  font-size: 0.74rem;
  color: var(--ink-40);
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   Films
   -------------------------------------------------------------------------- */

.films {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
}

.film {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #101214;
  border: 1px solid rgba(255, 255, 255, 0.09);
  display: flex;
  flex-direction: column;
  transition: border-color 0.5s var(--ease), transform 0.5s var(--ease-out);
}

.film:hover {
  border-color: rgba(216, 193, 151, 0.4);
  transform: translateY(-4px);
}

.film__poster {
  aspect-ratio: 2 / 3;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #1a1d21, #0b0d0f);
}

.film__poster svg,
.film__poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform 1s var(--ease-out);
}

.film:hover .film__poster svg,
.film:hover .film__poster img {
  transform: scale(1.06);
}

.film__title {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}

.film__meta {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.film__year {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--gold-soft);
}

.film__roles {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.66);
}

/* Filmography table */
.filmo {
  border-top: 1px solid var(--line);
}

.filmo__row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) minmax(0, 0.9fr) auto;
  gap: 18px;
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.4s var(--ease);
}

.filmo__row:hover {
  background: var(--ivory-2);
}

.filmo__year {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.06rem;
  color: var(--green-700);
  font-variant-numeric: tabular-nums;
}

.filmo__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
}

.filmo__note {
  font-size: 0.84rem;
  color: var(--ink-55);
  margin-top: 4px;
}

.filmo__roles {
  font-size: 0.92rem;
  color: var(--ink-55);
}

/* --------------------------------------------------------------------------
   Products (Nimbarka)
   -------------------------------------------------------------------------- */

.prods {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
}

.prod {
  background: var(--white);
  border: 1px solid var(--ivory-3);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

.prod:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.prod__art {
  aspect-ratio: 1 / 1;
  background: linear-gradient(170deg, #f3f6f1, #e7efe6);
  position: relative;
  overflow: hidden;
}

.prod__art svg,
.prod__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.9s var(--ease-out);
}

.prod:hover .prod__art svg,
.prod:hover .prod__art img {
  transform: scale(1.05);
}

.prod__name {
  padding: 16px 18px 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.015em;
}

/* --------------------------------------------------------------------------
   Generic cards / lists
   -------------------------------------------------------------------------- */

.cards {
  display: grid;
  gap: clamp(16px, 2vw, 26px);
}

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

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

.card {
  background: var(--white);
  border: 1px solid var(--ivory-3);
  border-radius: var(--r-lg);
  padding: clamp(24px, 2.6vw, 36px);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out),
    border-color 0.5s var(--ease);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--ivory-3);
}

.card__num {
  font-family: var(--font-display);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  color: var(--gold);
  margin-bottom: 16px;
  display: block;
}

.card h3 {
  margin-bottom: 10px;
}

.card p {
  color: var(--ink-55);
  font-size: 0.96rem;
}

.section--dark .card,
.section--green .card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

.section--dark .card p,
.section--green .card p {
  color: rgba(255, 255, 255, 0.66);
}

.caplist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 44px);
}

.capgroup h4 {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.capgroup li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 7px 0;
  font-size: 0.95rem;
  color: var(--ink-70);
}

.capgroup li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: 10px;
  flex: none;
}

.section--dark .capgroup li,
.section--green .capgroup li {
  color: rgba(255, 255, 255, 0.72);
}

.section--dark .capgroup h4,
.section--green .capgroup h4 {
  border-color: rgba(255, 255, 255, 0.16);
}

/* Business section blocks on /businesses/ */
.bizblock {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 76px);
  padding-block: clamp(48px, 6vw, 90px);
  border-top: 1px solid var(--line);
  align-items: center;
}

.bizblock:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.bizblock--flip .bizblock__media {
  order: 2;
}

.bizblock__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background: var(--ivory-3);
  position: relative;
}

.bizblock__media svg,
.bizblock__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bizlogo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.bizlogo__mark {
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02em;
  color: #fff;
  background: var(--green-800);
  flex: none;
}

.bizlogo__mark--films {
  background: #17191c;
}

.bizlogo__mark--nimbarka {
  background: #2f5c40;
}

.bizlogo__mark--fleetxon {
  background: #133042;
}

.bizlogo__meta {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.bizlogo__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.28rem;
  letter-spacing: -0.02em;
}

.bizlogo__ind {
  font-size: 0.78rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   Leadership
   -------------------------------------------------------------------------- */

.leader {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
}

.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(155deg, var(--ivory-2), var(--ivory-3));
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portrait__mono {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 7vw, 5.6rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--green-800);
  opacity: 0.22;
}

.portrait__slot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 18px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-40);
  background: rgba(252, 251, 247, 0.75);
  backdrop-filter: blur(6px);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Contact / forms
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.field label {
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.field .req {
  color: var(--gold);
}

.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  width: 100%;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.field textarea {
  min-height: 148px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgba(26, 106, 79, 0.14);
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: #b4342c;
  box-shadow: 0 0 0 3px rgba(180, 52, 44, 0.1);
}

.field__err {
  font-size: 0.82rem;
  color: #a02f28;
  min-height: 1em;
}

.field--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.hp {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  pointer-events: none;
}

.form-note {
  font-size: 0.82rem;
  color: var(--ink-55);
  margin-top: 14px;
}

.form-status {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  font-size: 0.92rem;
  display: none;
}

.form-status.is-ok {
  display: block;
  background: var(--green-tint);
  color: var(--green-800);
  border: 1px solid rgba(26, 106, 79, 0.24);
}

.form-status.is-err {
  display: block;
  background: #fbeceb;
  color: #93261f;
  border: 1px solid rgba(180, 52, 44, 0.24);
}

.info-list {
  border-top: 1px solid var(--line);
}

.info-list li {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.info-list dt,
.info-list .k {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 6px;
}

.info-list .v {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.04rem;
  letter-spacing: -0.015em;
}

.info-list .v a:hover {
  color: var(--green-700);
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.cta-band {
  background: var(--green-900);
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.cta-band h1,
.cta-band h2,
.cta-band h3 {
  color: #fff;
}

.cta-band .lede,
.cta-band p {
  color: rgba(255, 255, 255, 0.74);
}

.cta-band__art {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.55;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(6, 24, 18, 0.86), rgba(6, 24, 18, 0.5));
}

.cta-band__art svg,
.cta-band__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--charcoal);
  color: rgba(255, 255, 255, 0.6);
  padding-top: clamp(56px, 7vw, 96px);
  font-size: 0.94rem;
}

.site-footer h2,
.site-footer h3 {
  color: #fff;
}

.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 0.75fr));
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 64px);
}

.foot-brand .brand__name {
  color: #fff;
}

.foot-brand .brand__sub {
  color: rgba(255, 255, 255, 0.4);
}

.foot-tag {
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.86);
  max-width: 26ch;
}

.foot-col h3 {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  font-weight: 600;
  margin-bottom: 20px;
}

.foot-col li {
  margin-bottom: 12px;
}

.foot-col a {
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.3s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.foot-col a:hover {
  color: #fff;
}

.foot-col a .ext {
  opacity: 0.5;
}

.foot-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 26px 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.45);
}

.foot-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.foot-legal a:hover {
  color: #fff;
}

.socials {
  display: flex;
  gap: 10px;
  margin-top: 26px;
}

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

.socials a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.34);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Prose (legal pages)
   -------------------------------------------------------------------------- */

.prose h2 {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  margin-top: 2.2em;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose p,
.prose li {
  color: var(--ink-70);
  font-size: 1rem;
}

.prose ul {
  margin: 0 0 1.2em;
}

.prose ul li {
  padding-left: 20px;
  position: relative;
  margin-bottom: 9px;
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

.prose a {
  color: var(--green-700);
  border-bottom: 1px solid rgba(20, 81, 62, 0.3);
}

.prose a:hover {
  border-color: var(--green-700);
}

.disclaimer {
  padding: 18px 20px;
  background: var(--ivory-2);
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 0.86rem;
  color: var(--ink-55);
  line-height: 1.6;
}

.section--dark .disclaimer,
.section--green .disclaimer {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
}

/* Media list */
.news-list {
  border-top: 1px solid var(--line);
}

.news-item {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) auto;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  transition: background 0.4s var(--ease);
}

.news-item:hover {
  background: var(--ivory-2);
}

.news-date {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-40);
}

.news-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.14rem;
  letter-spacing: -0.02em;
  margin-bottom: 7px;
}

.news-sum {
  color: var(--ink-55);
  font-size: 0.95rem;
  max-width: 62ch;
}

.empty-state {
  padding: clamp(40px, 6vw, 72px);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  text-align: center;
  color: var(--ink-55);
}

/* --------------------------------------------------------------------------
   Reveal animations
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}

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

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="mask"] {
  clip-path: inset(0 0 100% 0);
  opacity: 1;
  transform: none;
  transition: clip-path 1.2s var(--ease-out);
}

[data-reveal="mask"].is-in {
  clip-path: inset(0 0 0 0);
}

[data-parallax] {
  will-change: transform;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

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

  .caplist,
  .cards--3 {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .foot-top {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Tablet: the mosaic re-cuts to a 6-column frame — flagship and wide tiles
     go full width, the rest pair up. */
  .vt-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .vt--lg {
    grid-column: span 6;
    grid-row: span 1;
    min-height: clamp(300px, 42vw, 400px);
  }

  .vt--wide {
    grid-column: span 6;
  }

  .vt--md,
  .vt--sm {
    grid-column: span 3;
  }
}

@media (max-width: 940px) {
  .nav,
  .header-cta {
    display: none;
  }

  .burger {
    display: block;
  }

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

  .shead {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .biz-grid {
    grid-template-columns: 1fr;
  }

  .feature,
  .leader,
  .bizblock,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .feature--flip .feature__media,
  .bizblock--flip .bizblock__media {
    order: 0;
  }

  .cta-band__inner {
    grid-template-columns: 1fr;
  }

  .filmo__row {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .filmo__roles,
  .filmo__link {
    grid-column: 2;
  }

  .news-item {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .hero__scroll {
    display: none;
  }

  .leader .portrait {
    max-width: 380px;
  }
}

@media (max-width: 620px) {
  body {
    font-size: 16px;
  }

  .films,
  .prods,
  .caplist,
  .cards--3,
  .cards--2,
  .connector,
  .foot-top,
  .field--2 {
    grid-template-columns: 1fr;
  }

  /* Phone: one tile per row, but the flagship keeps its extra height so the
     hierarchy survives the stack. */
  .vt-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(200px, auto);
  }

  .vt--lg,
  .vt--md,
  .vt--wide,
  .vt--sm {
    grid-column: span 1;
  }

  .vt--lg {
    min-height: 320px;
  }

  /* Nothing to hover on a phone — show every description. */
  .vt:not(.vt--lg) .vt__desc {
    opacity: 1;
    max-height: none;
    margin-top: 12px;
    transform: none;
  }

  /* Two clean columns hold down to ~420px; below that the cards stack. */
  .stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .stat__value--text {
    font-size: 1.35rem;
  }

  .hero {
    min-height: 92svh;
  }

  .btn {
    padding: 14px 22px;
  }

  .btn-row .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Motion & print preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .hero__scene {
    transform: none !important;
  }

  .bizcard__desc {
    opacity: 1;
    max-height: 120px;
    transform: none;
  }
}

@media print {
  .site-header,
  .site-footer,
  .mobile-nav,
  .hero__scroll {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* --------------------------------------------------------------------------
   Photo heroes — a stronger, more even scrim so headline contrast holds over
   any photograph. Must come after the .phero--<theme> rules to win.
   -------------------------------------------------------------------------- */

.phero--photo .phero__art {
  opacity: 1;
}

.phero--photo::after {
  background:
    linear-gradient(
      105deg,
      rgba(6, 22, 17, 0.93) 12%,
      rgba(6, 22, 17, 0.76) 55%,
      rgba(6, 22, 17, 0.56) 100%
    ),
    linear-gradient(to top, rgba(4, 14, 11, 0.8) 0%, rgba(4, 14, 11, 0) 62%);
}

.phero--photo.phero--films::after {
  background:
    linear-gradient(105deg, rgba(8, 9, 11, 0.94) 12%, rgba(8, 9, 11, 0.74) 55%, rgba(8, 9, 11, 0.52) 100%),
    linear-gradient(to top, rgba(6, 7, 9, 0.82) 0%, rgba(6, 7, 9, 0) 62%);
}

.phero--photo.phero--fleetxon::after {
  background:
    linear-gradient(105deg, rgba(7, 18, 25, 0.93) 12%, rgba(7, 18, 25, 0.74) 55%, rgba(7, 18, 25, 0.52) 100%),
    linear-gradient(to top, rgba(5, 13, 19, 0.82) 0%, rgba(5, 13, 19, 0) 62%);
}

/* Photographs in the hero carousel sit under the same veil as the artwork,
   but benefit from a touch more depth. */
.vhero__scene img {
  filter: saturate(1.03) contrast(1.02);
}

/* Narrow phones — two stat columns squeeze the wording, so stack them. */
@media (max-width: 430px) {
  .stats__grid {
    grid-template-columns: 1fr;
  }
}