/* --- fonts.css --- */
/* Self-hosted brand typefaces from Fontshare, the Indian Type Foundry.
   Free for personal and commercial use under the ITF Free Font Licence.

   Cabinet Grotesk  display  headings, hero, figures
   Switzer          text     body copy, cards, forms
   Supreme          technical  eyebrows, labels, buttons, specifications
*/

@font-face {
  font-family: 'Cabinet Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cabinet-grotesk-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cabinet Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/cabinet-grotesk-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cabinet Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/cabinet-grotesk-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Switzer';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/switzer-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Switzer';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/switzer-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Switzer';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/switzer-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Supreme';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/supreme-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* --- tokens.css --- */
/* ==========================================================================
   Design tokens
   Every colour, size and motion value used across the site starts here.
   ========================================================================== */

:root {
  /* --- Brand palette, sampled directly from the logo artwork -------------- */
  --brand-steel: #343c46;   /* Shree Jee Electricals dark */
  --brand-red: #c12520;     /* Shree Jee Electricals red */
  --cinni-red: #ee1c25;     /* Cinni red */
  --cinni-ink: #3c3b3b;     /* Cinni FANS badge */

  /* --- Neutral ramp ------------------------------------------------------ */
  --ink-1000: #080a0d;
  --ink-900: #0e1116;
  --ink-800: #141922;
  --ink-700: #1b212b;
  --ink-600: #252d39;
  --ink-500: #343c46;
  --ink-400: #4d5766;
  --ink-300: #75808f;
  --ink-200: #a4adb9;
  --ink-100: #d5dbe3;
  --mist-100: #eef1f5;
  --mist-50: #f6f8fa;
  --paper: #ffffff;

  /* --- Accent ramp ------------------------------------------------------- */
  --red-700: #9c1c18;
  --red-600: #c12520;
  --red-500: #d92b25;
  --red-400: #ee1c25;
  --red-300: #f56a63;
  --red-tint: rgba(238, 28, 37, 0.12);

  /* --- Warm accent -------------------------------------------------------
     A restrained brass, used only for trust marks and hairlines. It carries
     the Indian warmth the brand asked for without touching saffron. */
  --brass-600: #9a6f38;
  --brass-500: #b8894a;
  --brass-400: #d0a568;
  --brass-tint: rgba(184, 137, 74, 0.13);
  --brass-line: rgba(184, 137, 74, 0.32);

  /* --- Jaali lattice ------------------------------------------------------
     An eight point star formed by an overlapping square and diamond, the
     geometry found in Indian jaali screens. Used at very low opacity as a
     texture, never as decoration in its own right. */
  --pattern-jaali: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23343c46' stroke-opacity='0.06' stroke-width='1'%3E%3Cpath d='M36 3 L69 36 L36 69 L3 36 Z'/%3E%3Crect x='13.5' y='13.5' width='45' height='45'/%3E%3Ccircle cx='36' cy='36' r='7.5'/%3E%3Cpath d='M0 0 L13.5 13.5 M72 0 L58.5 13.5 M0 72 L13.5 58.5 M72 72 L58.5 58.5'/%3E%3C/g%3E%3C/svg%3E");
  --pattern-jaali-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23f4f6f9' stroke-opacity='0.055' stroke-width='1'%3E%3Cpath d='M36 3 L69 36 L36 69 L3 36 Z'/%3E%3Crect x='13.5' y='13.5' width='45' height='45'/%3E%3Ccircle cx='36' cy='36' r='7.5'/%3E%3Cpath d='M0 0 L13.5 13.5 M72 0 L58.5 13.5 M0 72 L13.5 58.5 M72 72 L58.5 58.5'/%3E%3C/g%3E%3C/svg%3E");

  /* --- Semantic ---------------------------------------------------------- */
  --bg: var(--paper);
  --bg-alt: var(--mist-50);
  --bg-dark: var(--ink-900);
  --surface: var(--paper);
  --text: var(--ink-800);
  --text-soft: var(--ink-400);
  --text-muted: #616b7a; /* 5.4:1 on white, safe for the smallest type */
  --text-on-dark: #f4f6f9;
  --text-on-dark-soft: rgba(244, 246, 249, 0.66);
  --line: rgba(52, 60, 70, 0.14);
  --line-strong: rgba(52, 60, 70, 0.24);
  --line-dark: rgba(244, 246, 249, 0.14);
  --accent: var(--red-600);
  --accent-bright: var(--red-400);
  --focus: #4c9aff;

  /* --- Typography --------------------------------------------------------
     Three families, three jobs, no overlap.

     Cabinet Grotesk  display   headlines and figures. An engineered grotesk
                                with flat terminals that echoes the cut corners
                                of the SJE monogram.
     Switzer          text      body copy. Swiss neutral, wide aperture, holds
                                its texture down to 13px.
     Supreme          technical eyebrows, labels, buttons, specifications. Its
                                squared skeleton matches the logo lettering and
                                reads like instrument marking.
     ---------------------------------------------------------------------- */
  --font-display: 'Cabinet Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Switzer', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-technical: 'Supreme', 'Cabinet Grotesk', system-ui, sans-serif;

  /* Modular scale, 1.26 on mobile opening to 1.33 on desktop. */
  --step--2: clamp(0.6875rem, 0.665rem + 0.11vw, 0.75rem);
  --step--1: clamp(0.8125rem, 0.785rem + 0.14vw, 0.8875rem);
  --step-0: clamp(0.9375rem, 0.905rem + 0.16vw, 1.03125rem);
  --step-1: clamp(1.09375rem, 1.03rem + 0.32vw, 1.28125rem);
  --step-2: clamp(1.3125rem, 1.175rem + 0.69vw, 1.71875rem);
  --step-3: clamp(1.59375rem, 1.33rem + 1.32vw, 2.375rem);
  --step-4: clamp(1.9375rem, 1.47rem + 2.34vw, 3.3125rem);
  --step-5: clamp(2.3125rem, 1.53rem + 3.9vw, 4.625rem);
  --step-6: clamp(2.75rem, 1.35rem + 7vw, 6.875rem);

  /* Section headings sit on their own step between h2 and h1 so every section
     on the site opens at the same weight. Change it here, not per page. */
  --size-section-title: clamp(2.15rem, 1.62rem + 2.65vw, 3.85rem);
  --size-section-title-sm: clamp(1.75rem, 1.45rem + 1.5vw, 2.65rem);
  --size-panel-title: clamp(1.35rem, 1.2rem + 0.75vw, 1.8rem);

  /* Leading, tuned per role rather than one global value. */
  --leading-display: 0.96;
  --leading-tight: 1.02;
  --leading-snug: 1.14;
  --leading-title: 1.26;
  --leading-lede: 1.5;
  --leading-normal: 1.7;
  --leading-compact: 1.55;

  /* Optical tracking. Large type needs negative, small caps need positive. */
  --tracking-display: -0.038em;
  --tracking-tight: -0.028em;
  --tracking-snug: -0.018em;
  --tracking-normal: -0.006em;
  --tracking-label: 0.09em;
  --tracking-wide: 0.15em;
  --tracking-widest: 0.22em;

  /* --- Space scale ------------------------------------------------------- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --section-y: clamp(4rem, 3rem + 6vw, 8.5rem);
  --shell: 1240px;
  --shell-wide: 1440px;
  --shell-narrow: 820px;
  --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 2.75rem);

  /* --- Radii and edges --------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --chamfer: 18px; /* echoes the cut corners in the SJE monogram */

  /* --- Elevation --------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(14, 17, 22, 0.06);
  --shadow-sm: 0 2px 10px rgba(14, 17, 22, 0.07);
  --shadow-md: 0 12px 30px -12px rgba(14, 17, 22, 0.22);
  --shadow-lg: 0 30px 60px -25px rgba(14, 17, 22, 0.35);
  --shadow-red: 0 18px 40px -18px rgba(193, 37, 32, 0.55);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* --- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 620ms;
  --dur-reveal: 900ms;

  /* --- Layers ------------------------------------------------------------ */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 60;
  --z-header: 80;
  --z-drawer: 90;
  --z-modal: 100;
  --z-veil: 120;
  --z-preloader: 200; /* the home page spin up gate, above everything */
}

/* Sections rendered on the dark ink background flip the semantic colours. */
.on-dark {
  --bg: var(--ink-900);
  --surface: rgba(255, 255, 255, 0.04);
  --text: var(--text-on-dark);
  --text-soft: rgba(244, 246, 249, 0.72);
  --text-muted: rgba(244, 246, 249, 0.58);
  --line: rgba(244, 246, 249, 0.12);
  --line-strong: rgba(244, 246, 249, 0.22);
  --accent: var(--red-400);
  color: var(--text);
  background-color: var(--bg);
}

/* --- base.css --- */
/* ==========================================================================
   Reset, document defaults and layout primitives
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
  background-color: var(--ink-900);
  /* `clip` rather than `hidden`: it contains the decorative glows and lattices
     that deliberately sit outside their section without turning the root into
     a scroll container, which `hidden` does and which breaks position: sticky
     inside it. body keeps overflow-x: hidden for Safari before 16. */
  overflow-x: clip;
}

body {
  min-height: 100svh;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  color: var(--text);
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  hanging-punctuation: first last;
  /* Every weight in the design ships as a real font file, so block faux bold.
     Italics are allowed to synthesise since the families are upright only. */
  font-synthesis: style;
}

body.is-locked { overflow: hidden; }

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

img { height: auto; }

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; cursor: pointer; }

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

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

address { font-style: normal; }

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

::selection {
  background: var(--red-400);
  color: #fff;
}

/* --- Typography ---------------------------------------------------------- */

/* Headings sit on the display face. Weight and tracking tighten as size grows,
   which is how metal type behaved and how the page keeps its colour even. */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  color: inherit; /* dark sections set their own colour on the container */
  font-variant-numeric: lining-nums proportional-nums;
}

h1 {
  font-size: var(--step-5);
  font-weight: 800;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

/* Every section on the site opens with an h2 at this size. */
h2 {
  font-size: var(--size-section-title);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

/* Secondary section headings, one step down but still a section opener. */
.title-sm {
  font-size: var(--size-section-title-sm);
  line-height: var(--leading-snug);
}

/* Headings inside a panel or card, which are not section openers. */
.title-panel {
  font-size: var(--size-panel-title);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}

h3 {
  font-size: var(--step-2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}

h4 {
  font-size: var(--step-1);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-snug);
}

p { text-wrap: pretty; max-width: 72ch; }

strong { font-weight: 600; }

/* Numerals in running text, tables and figures line up and never read as a
   letter O. Applied wherever a number carries meaning. */
.tabular,
.stat__value,
.spec-table td,
.numbered__n,
.mobile-menu__index {
  font-variant-numeric: tabular-nums slashed-zero lining-nums;
}

.lede {
  font-family: var(--font-body);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: var(--leading-lede);
  letter-spacing: var(--tracking-normal);
  color: var(--text-soft);
  max-width: 58ch;
  text-wrap: pretty;
}

/* --- Body copy blocks -----------------------------------------------------
   One rhythm for every stack of paragraphs on the site. Wrap consecutive
   paragraphs in this rather than setting margins per instance, so size,
   leading, colour and spacing stay identical everywhere. */

.copy {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

/* No leading gap when the block opens a column rather than following a heading. */
.copy:first-child { margin-top: 0; }

.copy > p {
  font-size: var(--step-0);
  line-height: var(--leading-normal);
  color: var(--text-soft);
  max-width: 66ch;
}

.copy > .lede {
  font-size: var(--step-1);
  line-height: var(--leading-lede);
  max-width: 58ch;
}

.copy + .cluster,
.copy + .btn,
.copy + .trust-badge { margin-top: var(--space-xl); }

/* A single paragraph following a heading, where a full .copy block would be
   overkill. Same size, leading and colour as the paragraphs inside .copy. */
.copy-note {
  margin-top: var(--space-md);
  font-size: var(--step-0);
  line-height: var(--leading-normal);
  color: var(--text-soft);
  max-width: 66ch;
}

/* The supporting line under a panel or form heading. */
.panel-note {
  margin-top: 0.5rem;
  font-size: var(--step--1);
  line-height: var(--leading-compact);
  color: var(--text-soft);
  max-width: 60ch;
}

/* Spacing after a heading is a margin in normal flow, but .section-head is a
   grid and already spaces its children, so it opts out. */
h1 + .lede,
h2 + .lede,
h3 + .lede { margin-top: var(--space-md); }

.section-head > .lede,
.section-head > .copy-note,
.section-head > p { margin-top: 0; }

/* Small caps label. Supreme at 500 with open tracking, never bold body text. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-technical);
  font-size: var(--step--2);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  font-feature-settings: 'ss01' 1;
}

.eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 2px;
  background: currentColor;
  transform-origin: left;
  animation: eyebrow-in var(--dur-slow) var(--ease-out) both;
}

@keyframes eyebrow-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

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

.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.section--flush-top { padding-top: 0; }
.section--alt { background: var(--bg-alt); }

.stack > * + * { margin-top: var(--flow, 1rem); }

.grid { display: grid; gap: var(--gap, var(--space-xl)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap, var(--space-md));
  align-items: center;
}

.section-head {
  display: grid;
  gap: var(--space-md);
  max-width: 46rem;
  margin-bottom: clamp(2.25rem, 1.5rem + 3vw, 4rem);
}

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

/* Top aligned rather than bottom: with the larger section headings the two
   columns are rarely the same height, and end alignment left a hole above
   short headings. */
.section-head--split {
  max-width: none;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 60rem) {
  .section-head--split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-2xl);
  }
}

/* --- Utilities ----------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 0;
  left: 50%;
  translate: -50% -120%;
  z-index: var(--z-veil);
  padding: 0.75rem 1.5rem;
  background: var(--red-600);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: translate var(--dur) var(--ease-out);
}

.skip-link:focus-visible { translate: -50% 0; }

.icon-sprite { display: none; }

.i {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
}

/* --- Jaali texture --------------------------------------------------------
   Applied to a section to lay the lattice behind its content. It fades out
   towards the middle so type always sits on clean ground. */

.texture-jaali {
  position: relative;
  isolation: isolate;
}

.texture-jaali::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--pattern-jaali);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, transparent 30%, #000 100%);
  mask-image: radial-gradient(120% 90% at 50% 50%, transparent 30%, #000 100%);
  opacity: 0.9;
}

.on-dark .texture-jaali::before,
.texture-jaali--dark::before {
  background-image: var(--pattern-jaali-dark);
}

/* --- Scroll progress and page transition veil ---------------------------- */

.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: var(--z-veil);
  pointer-events: none;
  background: transparent;
}

.scroll-progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--red-600), var(--red-400), #ff8a63);
}

.page-veil {
  position: fixed;
  inset: 0;
  z-index: var(--z-veil);
  pointer-events: none;
  background: var(--ink-900);
  opacity: 0;
  visibility: hidden;
}

.js .page-veil { animation: veil-out 700ms var(--ease-out) both; }

@keyframes veil-out {
  0% { opacity: 1; visibility: visible; }
  99% { opacity: 0; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

body.is-leaving .page-veil {
  animation: none;
  visibility: visible;
  opacity: 1;
  transition: opacity 260ms var(--ease-in-out);
}

/* --- Scroll reveal ------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-y, 22px), 0) scale(var(--reveal-s, 1));
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Promoted only while it still has something to animate. A blanket
   `will-change` here gave every revealed element on the page its own
   compositor layer for the whole session, dozens of them, which costs memory
   and is itself a source of scroll jank. The `:not(.is-visible)` releases each
   layer as soon as that element has landed. */
.js [data-reveal]:not(.is-visible),
.js [data-reveal-group]:not(.is-visible) > * {
  will-change: opacity, transform;
}

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

.js [data-reveal='left'] { transform: translate3d(-28px, 0, 0); }
.js [data-reveal='right'] { transform: translate3d(28px, 0, 0); }
.js [data-reveal='scale'] { transform: scale(0.94); }
.js [data-reveal='clip'] {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  transform: none;
  transition: clip-path 1s var(--ease-out);
}
.js [data-reveal='clip'].is-visible { clip-path: inset(0 0 0 0); }

.js [data-reveal-group] > * {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

.js [data-reveal-group].is-visible > * {
  opacity: 1;
  transform: none;
}

.js [data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0ms; }
.js [data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 70ms; }
.js [data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 140ms; }
.js [data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 210ms; }
.js [data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 280ms; }
.js [data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 350ms; }
.js [data-reveal-group].is-visible > *:nth-child(7) { transition-delay: 420ms; }
.js [data-reveal-group].is-visible > *:nth-child(8) { transition-delay: 490ms; }

/* A slower, clearly sequential stagger for short numbered lists, where the
   point is that one step lands after the previous rather than all together.
   Same specificity as the rules above, so it has to come after them. */
.js [data-reveal-group='steps'].is-visible > *:nth-child(1) { transition-delay: 0ms; }
.js [data-reveal-group='steps'].is-visible > *:nth-child(2) { transition-delay: 200ms; }
.js [data-reveal-group='steps'].is-visible > *:nth-child(3) { transition-delay: 400ms; }
.js [data-reveal-group='steps'].is-visible > *:nth-child(4) { transition-delay: 600ms; }
.js [data-reveal-group='steps'].is-visible > *:nth-child(5) { transition-delay: 800ms; }
.js [data-reveal-group='steps'] > * { transform: translate3d(0, 30px, 0); }

/* --- Motion preferences -------------------------------------------------- */

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

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

  .js [data-reveal],
  .js [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* --- components.css --- */
/* ==========================================================================
   Components: header, navigation, buttons, cards, forms, footer
   ========================================================================== */

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

.btn {
  --btn-bg: var(--red-600);
  --btn-color: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.65rem;
  font-family: var(--font-technical);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.028em;
  color: var(--btn-color);
  background: var(--btn-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--dur) var(--ease-spring),
    box-shadow var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.btn > * { position: relative; z-index: 1; }

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(120% 160% at 50% 120%, var(--red-400), transparent 65%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.btn:hover::before { opacity: 1; }

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-red);
}

.btn:active { transform: translateY(0) scale(0.985); }

.btn .i { transition: transform var(--dur) var(--ease-out); }
.btn:hover .i { transform: translateX(3px); }

.btn--secondary {
  --btn-bg: var(--ink-800);
  --btn-color: #fff;
}

.btn--outline {
  --btn-bg: transparent;
  --btn-color: var(--text);
  border-color: var(--line-strong);
}

.btn--outline:hover {
  --btn-color: #fff;
  border-color: transparent;
  background: var(--ink-800);
  box-shadow: var(--shadow-md);
}

.btn--ghost {
  --btn-bg: rgba(255, 255, 255, 0.06);
  --btn-color: var(--text-on-dark);
  border-color: var(--line-dark);
  backdrop-filter: blur(8px);
}

.btn--ghost:hover {
  --btn-bg: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.btn--light {
  --btn-bg: #fff;
  --btn-color: var(--ink-900);
}

.btn--light::before { background: radial-gradient(120% 160% at 50% 120%, var(--mist-100), transparent 65%); }

.btn--sm { padding: 0.7rem 1.15rem; font-size: var(--step--2); }
.btn--lg { padding: 1.1rem 2rem; font-size: var(--step-0); }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-technical);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.03em;
  color: var(--accent);
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--dur) var(--ease-out);
}

.link-arrow:hover { background-size: 100% 1px; }
.link-arrow .i { transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover .i { transform: translate(3px, -3px); }

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

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  color: var(--text-on-dark);
  transition: transform var(--dur-slow) var(--ease-out);
}

.site-header::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(14, 17, 22, 0.86);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line-dark);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.site-header.is-stuck::after { opacity: 1; }
.site-header.is-hidden { transform: translateY(-100%); }

.topbar {
  font-family: var(--font-technical);
  font-weight: 500;
  font-size: var(--step--2);
  letter-spacing: 0.045em;
  border-bottom: 1px solid rgba(244, 246, 249, 0.09);
  background: rgba(8, 10, 13, 0.5);
  transition: opacity var(--dur) var(--ease-out), max-height var(--dur) var(--ease-out);
  max-height: 3rem;
  overflow: hidden;
}

.site-header.is-stuck .topbar {
  max-height: 0;
  opacity: 0;
  border-color: transparent;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 2.6rem;
}

.topbar__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-on-dark-soft);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red-400);
  box-shadow: 0 0 0 0 rgba(238, 28, 37, 0.7);
  animation: pulse 2.4s var(--ease-out) infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(238, 28, 37, 0.6); }
  70% { box-shadow: 0 0 0 9px rgba(238, 28, 37, 0); }
  100% { box-shadow: 0 0 0 0 rgba(238, 28, 37, 0); }
}

.topbar__links {
  display: none;
  gap: var(--space-lg);
  color: var(--text-on-dark-soft);
}

.topbar__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: color var(--dur) var(--ease-out);
}

.topbar__links a:hover { color: var(--text-on-dark); }

@media (min-width: 52rem) {
  .topbar__links { display: flex; }
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: 4.5rem;
  transition: min-height var(--dur) var(--ease-out);
}

.site-header.is-stuck .navbar__inner { min-height: 3.9rem; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
}

.brand__mark {
  height: 2.05rem;
  width: auto;
  transition: transform var(--dur-slow) var(--ease-spring);
}

.brand:hover .brand__mark { transform: rotate(-3deg) scale(1.05); }

.brand__word {
  height: 0.78rem;
  width: auto;
  display: none;
}

@media (min-width: 30rem) {
  .brand__word { display: block; }
}

/* --- Primary navigation -------------------------------------------------- */

.nav { display: none; }

@media (min-width: 68rem) {
  .nav { display: block; }
}

/* Without JavaScript the drawer cannot open, so show the links inline instead. */
.no-js .nav { display: block; }
.no-js .nav__list { flex-wrap: wrap; justify-content: flex-end; }
.no-js .nav-toggle { display: none; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav__link {
  position: relative;
  display: block;
  padding: 0.6rem 0.85rem;
  font-family: var(--font-technical);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-on-dark-soft);
  border-radius: var(--radius-pill);
  transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.35rem;
  height: 2px;
  background: var(--red-400);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}

.nav__link:hover { color: var(--text-on-dark); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__link.is-active {
  color: var(--text-on-dark);
  background: rgba(255, 255, 255, 0.07);
}

.nav__link.is-active::after { transform: scaleX(1); }

.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.navbar__actions .btn { display: none; }

@media (min-width: 44rem) {
  .navbar__actions .btn { display: inline-flex; }
}

/* --- Menu toggle --------------------------------------------------------- */

.nav-toggle {
  display: grid;
  place-items: center;
  width: 2.85rem;
  height: 2.85rem;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05);
  transition: background-color var(--dur) var(--ease-out);
}

.nav-toggle:hover { background: rgba(255, 255, 255, 0.12); }

@media (min-width: 68rem) {
  .nav-toggle { display: none; }
}

.nav-toggle__box {
  display: grid;
  gap: 4px;
  width: 1.1rem;
}

.nav-toggle__box i {
  display: block;
  height: 1.5px;
  background: var(--text-on-dark);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) linear;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__box i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__box i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__box i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* --- Mobile menu --------------------------------------------------------- */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: linear-gradient(160deg, var(--ink-900), var(--ink-1000) 70%);
  color: var(--text-on-dark);
  padding: 7rem var(--gutter) 2rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
}

.mobile-menu::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 40% at 85% 0%, rgba(193, 37, 32, 0.28), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 .5H40M.5 0V40' stroke='rgba(244,246,249,0.045)'/%3E%3C/svg%3E");
  pointer-events: none;
}

.mobile-menu[hidden] { display: block; }
.mobile-menu.is-open { opacity: 1; visibility: visible; }

.mobile-menu__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  min-height: 100%;
  max-width: 32rem;
  margin-inline: auto;
}

.mobile-menu__list li {
  border-bottom: 1px solid var(--line-dark);
  opacity: 0;
  transform: translateY(14px);
}

.mobile-menu.is-open .mobile-menu__list li {
  animation: menu-item-in 520ms var(--ease-out) forwards;
  animation-delay: calc(80ms + var(--i) * 55ms);
}

@keyframes menu-item-in {
  to { opacity: 1; transform: none; }
}

.mobile-menu__list a {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 1.05rem 0.25rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
  transition: color var(--dur) var(--ease-out), padding-left var(--dur) var(--ease-out);
}

.mobile-menu__list a:hover,
.mobile-menu__list a[aria-current='page'] { color: var(--red-400); padding-left: 0.6rem; }
.mobile-menu__list a .i { margin-left: auto; opacity: 0.45; }

.mobile-menu__index {
  font-family: var(--font-technical);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}

.mobile-menu__foot {
  display: grid;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-xl);
  border-top: 1px solid var(--line-dark);
  color: var(--text-on-dark-soft);
  font-size: var(--step--1);
}

/* --- Badges and pills ---------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  font-family: var(--font-technical);
  font-size: var(--step--2);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
  background: var(--red-tint);
  border: 1px solid rgba(238, 28, 37, 0.24);
  border-radius: var(--radius-pill);
}

.badge--neutral {
  color: var(--text-soft);
  background: rgba(52, 60, 70, 0.07);
  border-color: var(--line);
}

.badge--dark {
  color: var(--text-on-dark);
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--line-dark);
  backdrop-filter: blur(8px);
}

/* --- Make in India trust mark ---------------------------------------------
   A quiet credential, framed in brass rather than shouted in colour. The
   lion already carries the words, so the chip adds none of its own. */

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  /* Stays a chip even when it lands in a grid or flex track. */
  width: fit-content;
  max-width: 100%;
  justify-self: start;
  padding: 0.6rem 1.1rem;
  background: var(--brass-tint);
  border: 1px solid var(--brass-line);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

/* The three claim line that closes the Cinni distributorship copy. Technical
   face and brass, so it reads as a credential rather than more body copy. */
.trust-line {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--brass-line);
  font-family: var(--font-technical);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  color: var(--text-soft);
}

.trust-line strong {
  color: var(--brass-400);
  font-weight: 500;
}

/* `justify-self: start` above keeps the chip left aligned in an ordinary
   section head. Inside a centred one it has to give way, or the badge sits off
   to the left while everything above it is centred. */
.section-head--center .trust-badge { justify-self: center; }

.trust-badge:hover {
  transform: translateY(-2px);
  border-color: var(--brass-500);
}

.trust-badge img {
  height: 1.75rem;
  width: auto;
}

.trust-badge__note {
  font-family: var(--font-technical);
  font-size: var(--step--2);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--brass-600);
  border-left: 1px solid var(--brass-line);
  padding-left: 0.8rem;
}

.on-dark .trust-badge,
.trust-badge--dark {
  background: rgba(184, 137, 74, 0.1);
  border-color: rgba(184, 137, 74, 0.34);
}

.on-dark .trust-badge__note,
.trust-badge--dark .trust-badge__note {
  color: var(--brass-400);
}

/* --- Cards --------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: clamp(1.35rem, 1rem + 1.2vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition:
    transform var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    28rem 28rem at var(--mx, 50%) var(--my, 0%),
    rgba(193, 37, 32, 0.12),
    transparent 60%
  );
  transition: opacity var(--dur) var(--ease-out);
}

.card:hover {
  transform: translateY(-4px);
  border-color: rgba(193, 37, 32, 0.35);
  box-shadow: var(--shadow-md);
}

.card:hover::after { opacity: 1; }

.card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-sm);
  color: var(--accent);
  background: var(--red-tint);
  border: 1px solid rgba(238, 28, 37, 0.2);
}

.card__icon .i { width: 1.4rem; height: 1.4rem; }

.card__title { font-size: var(--step-1); letter-spacing: var(--tracking-snug); }

.card__body {
  color: var(--text-soft);
  font-size: var(--step--1);
  line-height: var(--leading-compact);
  max-width: 46ch;
}

.card--flat:hover { transform: none; box-shadow: none; }

/* --- Numbered feature card ----------------------------------------------- */

.numbered {
  position: relative;
  padding-top: 2.75rem;
}

.numbered__n {
  position: absolute;
  top: 1.1rem;
  right: 1.25rem;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
}

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

.stat { display: grid; gap: 0.35rem; }

.stat__value {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: var(--tracking-display);
  background: linear-gradient(120deg, currentColor 40%, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat__label {
  font-size: var(--step--1);
  font-weight: 500;
  line-height: var(--leading-compact);
}

.stat__detail {
  font-size: var(--step--2);
  color: var(--text-muted);
}

/* --- Marquee ------------------------------------------------------------- */

.marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--marquee-gap, 3rem);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--marquee-gap, 3rem);
  min-width: 100%;
  animation: marquee var(--marquee-duration, 38s) linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes marquee {
  to { transform: translateX(calc(-100% - var(--marquee-gap, 3rem))); }
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-technical);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-muted);
}

.marquee__item .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red-400);
}

/* --- Accordion ----------------------------------------------------------- */

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

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

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  padding: 1.35rem 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-snug);
  color: var(--text);
  transition: color var(--dur) var(--ease-out);
}

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

.accordion__sign {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.accordion__trigger[aria-expanded='true'] .accordion__sign {
  transform: rotate(45deg);
  background: var(--red-600);
  border-color: transparent;
  color: #fff;
}

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}

.accordion__panel[data-open='true'] { grid-template-rows: 1fr; }

.accordion__panel > div { overflow: hidden; }

.accordion__panel p {
  padding-bottom: 1.4rem;
  max-width: 64ch;
  color: var(--text-soft);
  font-size: var(--step--1);
  line-height: var(--leading-compact);
}

/* --- Forms --------------------------------------------------------------- */

.form { display: grid; gap: var(--space-lg); }

.form__row {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.field { display: grid; gap: 0.45rem; }

.field__label {
  font-family: var(--font-technical);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-soft);
}

.field__label .req { color: var(--accent); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  font-size: var(--step--1);
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}

.field textarea { min-height: 8.5rem; resize: vertical; }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%234d5766' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--red-500);
  box-shadow: 0 0 0 4px rgba(238, 28, 37, 0.13);
}

.field__error {
  font-size: var(--step--2);
  color: var(--red-500);
  display: none;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--red-500); }

.field.has-error .field__error { display: block; }

.on-dark .field input,
.on-dark .field select,
.on-dark .field textarea {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--line-dark);
  color: var(--text-on-dark);
}

.on-dark .field input::placeholder,
.on-dark .field textarea::placeholder { color: rgba(244, 246, 249, 0.35); }

.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: var(--step--2);
  color: var(--text-soft);
}

.choice input {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.25rem;
  accent-color: var(--red-600);
  flex: none;
}

.form__status {
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  border: 1px solid var(--line-strong);
  display: none;
}

.form__status.is-visible { display: block; }
.form__status.is-success { border-color: rgba(34, 139, 84, 0.4); background: rgba(34, 139, 84, 0.08); }
.form__status.is-error { border-color: rgba(217, 43, 37, 0.4); background: rgba(217, 43, 37, 0.08); }

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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

.site-footer {
  position: relative;
  isolation: isolate;
  padding-top: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  padding-bottom: var(--space-xl);
  background: var(--ink-1000);
  color: var(--text-on-dark);
  overflow: hidden;
}

.site-footer__glow {
  position: absolute;
  inset: auto -20% 30%;
  height: 30rem;
  z-index: -1;
  background: radial-gradient(50% 60% at 50% 100%, rgba(193, 37, 32, 0.32), transparent 70%);
  filter: blur(20px);
}

.footer-top {
  display: grid;
  gap: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

@media (min-width: 62rem) {
  .footer-top { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr); gap: var(--space-4xl); }
}

.footer-brand img { width: min(17rem, 70%); }

.footer-brand__line {
  margin-top: var(--space-md);
  font-family: var(--font-technical);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--red-400);
}

.footer-brand__body {
  margin-top: var(--space-sm);
  max-width: 38ch;
  font-size: var(--step--1);
  color: var(--text-on-dark-soft);
}

.footer-brand__cinni {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line-dark);
}

.footer-brand__cinni span {
  font-family: var(--font-technical);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.footer-brand__cinni img { width: 7.5rem; }

.footer-links {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

.footer-links__title {
  font-family: var(--font-technical);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-on-dark);
  margin-bottom: var(--space-md);
}

.footer-links li + li { margin-top: 0.6rem; }

.footer-links a,
.footer-links__col--contact address {
  font-size: var(--step--1);
  color: var(--text-on-dark-soft);
}

.footer-links a {
  display: inline-block;
  transition: color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.footer-links a:hover { color: var(--red-400); transform: translateX(3px); }

.footer-links__col--contact address p + p { margin-top: var(--space-sm); }
.footer-hours { color: var(--text-muted) !important; font-size: var(--step--2) !important; }

.social {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: var(--space-lg);
  padding: 0;
  list-style: none;
}

.social li {
  display: flex;
  align-items: center;
}

/* Flex centring rather than inline-grid: an inline box sits on the text
   baseline, which was nudging the icons out of line with each other. */
.social a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  color: var(--text-on-dark-soft);
  line-height: 1;
  transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}

.social a .i {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
}

.social a:hover {
  color: #fff;
  background: var(--red-600);
  border-color: transparent;
  transform: translateY(-3px);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-xl);
  justify-content: space-between;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line-dark);
  font-size: var(--step--2);
  color: var(--text-muted);
}

/* Sits in the middle of the bottom bar on desktop and wraps under the
   copyright on narrow screens, where the bar becomes a column. */
.footer-bottom__legal a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.footer-bottom__legal a:hover,
.footer-bottom__legal a:focus-visible {
  color: var(--text-on-dark);
  border-bottom-color: var(--red-400);
}

@media (max-width: 40rem) {
  .footer-bottom { justify-content: flex-start; }
}

.footer-bottom__note {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.footer-heart {
  color: var(--red-400);
  font-size: 0.95em;
  line-height: 1;
  transform: translateY(0.5px);
}

/* --- Floating WhatsApp --------------------------------------------------- */

.whatsapp-fab {
  position: fixed;
  right: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  bottom: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  z-index: var(--z-sticky);
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  color: #fff;
  background: #1faa54;
  box-shadow: 0 14px 30px -10px rgba(31, 170, 84, 0.7);
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out);
}

.whatsapp-fab .i { width: 1.55rem; height: 1.55rem; }
.whatsapp-fab:hover { transform: scale(1.08) translateY(-2px); }

/* --- Breadcrumbs --------------------------------------------------------- */

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-technical);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.breadcrumbs a { transition: color var(--dur) var(--ease-out); }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 0.5rem; opacity: 0.5; }
.breadcrumbs li { display: inline-flex; align-items: center; }
.breadcrumbs [aria-current] { color: var(--text-on-dark); }

/* --- Tooltip style note -------------------------------------------------- */

.note {
  display: flex;
  gap: 0.65rem;
  padding: 0.9rem 1.05rem;
  font-size: var(--step--2);
  line-height: var(--leading-compact);
  color: var(--text-soft);
  background: rgba(52, 60, 70, 0.05);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
}

.on-dark .note {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-soft);
}

/* --- sections.css --- */
/* ==========================================================================
   Sections: hero, page headers, showcases, bento, timeline, network, CTA
   ========================================================================== */

/* --- Shared dark backdrop treatments ------------------------------------- */

/* The jaali lattice replaces the old square grid on every dark page header. */
.backdrop-jaali {
  position: absolute;
  inset: -10%;
  background-image: var(--pattern-jaali-dark);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 15%, transparent 78%);
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 15%, transparent 78%);
  animation: jaali-drift 90s linear infinite;
  will-change: transform;
}

@keyframes jaali-drift {
  to { transform: translate3d(-72px, -72px, 0); }
}

.backdrop-noise {
  position: absolute;
  inset: 0;
  opacity: 0.14;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* --- Home hero ----------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(8rem, 5.5rem + 8vw, 11rem);
  padding-bottom: clamp(5rem, 3rem + 7vw, 8rem);
  background: var(--ink-900);
  color: var(--text-on-dark);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.hero__glow {
  position: absolute;
  inset: -30% -10% auto;
  height: 75%;
  background:
    radial-gradient(45% 55% at 50% 35%, rgba(193, 37, 32, 0.45), transparent 70%),
    radial-gradient(38% 45% at 78% 12%, rgba(238, 28, 37, 0.22), transparent 70%);
  filter: blur(30px);
  animation: glow-breathe 11s var(--ease-in-out) infinite;
}

@keyframes glow-breathe {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

.hero__blade {
  position: absolute;
  top: 4%;
  left: 50%;
  width: min(120vh, 58rem);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 42deg,
    rgba(238, 28, 37, 0.16) 58deg,
    transparent 76deg 162deg,
    rgba(244, 246, 249, 0.07) 178deg,
    transparent 196deg 282deg,
    rgba(238, 28, 37, 0.12) 298deg,
    transparent 316deg 360deg
  );
  mask-image: radial-gradient(closest-side, transparent 34%, #000 46%, #000 72%, transparent 88%);
  animation: blade-spin 46s linear infinite;
  opacity: 0.9;
}

@keyframes blade-spin {
  to { rotate: 360deg; }
}

.hero__ring {
  position: absolute;
  top: 4%;
  left: 50%;
  width: min(120vh, 58rem);
  aspect-ratio: 1;
  translate: -50% 0;
  border: 1px solid rgba(244, 246, 249, 0.08);
  border-radius: 50%;
}

.hero__ring::after {
  content: '';
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(244, 246, 249, 0.06);
  border-radius: 50%;
}

/* --- Hero blueprint art -------------------------------------------------
   Fan components drawn as engineering line work. Everything is stroke only
   and animated with transforms, so it costs almost nothing to paint. */

.hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: rgba(244, 246, 249, 0.09);
  stroke-width: 1.1;
  -webkit-mask-image: radial-gradient(58% 52% at 50% 44%, transparent 42%, #000 92%);
  mask-image: radial-gradient(58% 52% at 50% 44%, transparent 42%, #000 92%);
}

.hero-art > g {
  transform: translate3d(var(--px, 0), var(--py, 0), 0);
  transition: transform 900ms var(--ease-out);
}

.hero-art__rotor { translate: 1258px 152px; }
.hero-art__bearing { translate: 132px 706px; }
.hero-art__winding { translate: 1128px 812px; }
.hero-art__callout { translate: 92px 190px; }

.hero-art__spin {
  transform-origin: 0 0;
  animation: art-spin 150s linear infinite;
}

.hero-art__balls {
  transform-origin: 0 0;
  animation: art-spin 210s linear infinite reverse;
}

.hero-art__blades { stroke: rgba(238, 28, 37, 0.14); }
.hero-art__ticks { stroke: rgba(244, 246, 249, 0.14); }

.hero-art__dashed { stroke-dasharray: 5 9; }
.hero-art__dot { fill: rgba(238, 28, 37, 0.4); stroke: none; }

.hero-art__winding { animation: art-float 26s var(--ease-in-out) infinite; }
.hero-art__callout { animation: art-float 34s var(--ease-in-out) infinite reverse; }

@keyframes art-spin {
  to { rotate: 360deg; }
}

@keyframes art-float {
  0%, 100% { translate: var(--fx, 96px) var(--fy, 132px); }
  50% { translate: var(--fx, 96px) calc(var(--fy, 132px) + 26px); }
}

/* The float keyframes need each group's own origin. */
.hero-art__winding { --fx: 1128px; --fy: 812px; }
.hero-art__callout { --fx: 92px; --fy: 190px; }

@media (max-width: 48rem) {
  /* Fewer moving parts on phones, and pulled clear of the headline. */
  .hero-art { stroke-width: 1; opacity: 0.75; }
  .hero-art__winding,
  .hero-art__callout { display: none; }
  .hero-art__rotor { translate: 1330px 110px; }
  .hero-art__bearing { translate: 84px 812px; }
}

.hero__inner {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  /* The headline runs at 0.96 leading, so its caps sit tight against the top
     of its box. The extra gap gives the lockup above it room to breathe. */
  gap: clamp(1.4rem, 1.05rem + 1.4vw, 2.25rem);
}

.hero__badge { --reveal-delay: 0ms; }

/* The wrapper carries the pointer parallax so the image is free to run its
   own entrance animation without the two transforms fighting. */
.hero__logo-wrap,
.hero__cinni-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  transform: translate3d(var(--px, 0), var(--py, 0), 0);
  transition: transform 900ms var(--ease-out);
}

.hero__logo {
  width: min(100%, 26rem);
  filter: drop-shadow(0 24px 45px rgba(0, 0, 0, 0.55));
}

.hero__cinni {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: clamp(1rem, 0.7rem + 1vw, 1.5rem) clamp(1.5rem, 1rem + 3vw, 3.25rem);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
  width: fit-content;
  max-width: 100%;
}

.hero__cinni::before {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  animation: sheen 5.5s var(--ease-in-out) infinite;
}

@keyframes sheen {
  0%, 62% { left: -60%; }
  100% { left: 120%; }
}

.hero__cinni-label {
  font-family: var(--font-technical);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Cinni logo sits beside the Make in India lion, separated by a hairline. */
.hero__cinni-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 0.6rem + 1.6vw, 1.9rem);
  flex-wrap: wrap;
}

.hero__cinni-logo {
  width: 17.5rem;
  max-width: 58vw;
  filter: drop-shadow(0 8px 22px rgba(238, 28, 37, 0.35));
}

.hero__cinni-rule {
  width: 1px;
  align-self: stretch;
  min-height: 3.25rem;
  background: linear-gradient(180deg, transparent, var(--line-dark) 25%, var(--line-dark) 75%, transparent);
}

.hero__mii {
  width: 9.25rem;
  max-width: 32vw;
  opacity: 0.95;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45));
}

@media (max-width: 30rem) {
  .hero__cinni-rule { display: none; }
}

.hero__title {
  max-width: 19ch;
  font-size: var(--step-5);
  font-weight: 800;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.hero__title .accent-word {
  position: relative;
  color: var(--red-400);
  white-space: nowrap;
}

.hero__lede {
  max-width: 56ch;
  color: var(--text-on-dark-soft);
  font-size: var(--step-1);
  line-height: var(--leading-lede);
}

.hero__actions { gap: var(--space-sm); justify-content: center; }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-sm);
  width: min(100%, 48rem);
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--line-dark);
}

/* Hairlines between the figures rather than around them. */
.hero__stats .stat + .stat {
  border-left: 1px solid var(--line-dark);
}

.hero__stats .stat { justify-items: center; text-align: center; }
.hero__stats .stat__value { font-size: var(--step-3); color: var(--text-on-dark); }
.hero__stats .stat__label {
  color: var(--text-on-dark-soft);
  font-size: var(--step--2);
  letter-spacing: 0.01em;
}

.hero__scroll {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  translate: -50% 0;
  font-size: var(--step--2);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (min-width: 64rem) and (min-height: 44rem) {
  .hero__scroll { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
}

.hero__scroll::after {
  content: '';
  width: 1px;
  height: 2.5rem;
  background: linear-gradient(180deg, var(--red-400), transparent);
  animation: scroll-hint 2.4s var(--ease-in-out) infinite;
}

@keyframes scroll-hint {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; transform-origin: top; }
  50% { transform: scaleY(1); opacity: 1; transform-origin: top; }
}

/* Entrance choreography for the hero, independent of scroll position. */
.js .hero__inner > * {
  opacity: 0;
  transform: translateY(26px);
  animation: hero-in 1s var(--ease-out) forwards;
}

.js .hero__inner > *:nth-child(1) { animation-delay: 100ms; }
.js .hero__inner > *:nth-child(4) { animation-delay: 880ms; }
.js .hero__inner > *:nth-child(5) { animation-delay: 980ms; }
.js .hero__inner > *:nth-child(6) { animation-delay: 1070ms; }
.js .hero__inner > *:nth-child(7) { animation-delay: 1160ms; }

@keyframes hero-in {
  to { opacity: 1; transform: none; }
}

/* The two logos are choreographed by hand: the company mark arrives first,
   then the Cinni lockup follows and settles a beat later. The wrappers opt
   out of the generic entrance so their parallax transform survives. */
.js .hero__logo-wrap,
.js .hero__cinni-wrap {
  opacity: 1;
  animation: none;
}

.js .hero__logo {
  animation: hero-mark-in 1100ms var(--ease-out) 140ms both;
}

.js .hero__cinni {
  animation: hero-cinni-in 1500ms var(--ease-out) 640ms both;
}

@keyframes hero-mark-in {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0) scale(0.94);
    filter: drop-shadow(0 24px 45px rgba(0, 0, 0, 0)) blur(3px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: drop-shadow(0 24px 45px rgba(0, 0, 0, 0.55)) blur(0);
  }
}

@keyframes hero-cinni-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.9); }
  60% { opacity: 1; }
  to { opacity: 1; transform: none; }
}

/* --- Inner page header --------------------------------------------------- */

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(8rem, 6rem + 7vw, 11rem);
  padding-bottom: clamp(2.75rem, 2rem + 4vw, 5rem);
  background: var(--ink-900);
  color: var(--text-on-dark);
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.page-hero__bg .glow {
  position: absolute;
  inset: -40% -20% auto;
  height: 120%;
  background: radial-gradient(40% 50% at 22% 25%, rgba(193, 37, 32, 0.38), transparent 70%);
  filter: blur(30px);
}

/* The first band after a page header does not need the full section rhythm. */
.page-hero + .section,
.page-hero + div > .section:first-child {
  padding-top: clamp(2.5rem, 1.75rem + 3vw, 4.5rem);
}

.page-hero__inner {
  display: grid;
  gap: var(--space-md);
  max-width: 54rem;
}

.page-hero h1 { font-size: var(--step-4); }
.page-hero .lede { color: var(--text-on-dark-soft); max-width: 60ch; }

.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  margin-top: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line-dark);
  font-size: var(--step--2);
  color: var(--text-muted);
}

.page-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-technical);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.page-hero__meta .i { color: var(--red-400); }

/* --- Trust strip --------------------------------------------------------- */

.trust-strip {
  padding-block: var(--space-lg);
  background: var(--ink-1000);
  color: var(--text-on-dark);
  border-block: 1px solid rgba(244, 246, 249, 0.08);
}

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

.split {
  display: grid;
  gap: clamp(2rem, 1rem + 5vw, 4.5rem);
  align-items: start;
}

@media (min-width: 60rem) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--wide-start { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .split--wide-end { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }

}

.split__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(150deg, var(--ink-800), var(--ink-900));
  border: 1px solid var(--line-dark);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
}

.split__media img { width: min(100%, 22rem); }

.split__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 100%, rgba(193, 37, 32, 0.3), transparent 70%);
  pointer-events: none;
}

/* --- Video band -----------------------------------------------------------
   A full bleed band with no chrome of any kind. The aspect ratio is held from
   CSS rather than left to the file, so the space is reserved before a single
   byte of the video has arrived and nothing below it jumps when it loads. */

.video-band {
  position: relative;
  width: 100%;
  /* Ink rather than white: the first frame arrives late on a slow line, and a
     black band is far less jarring than a white flash. */
  background: var(--ink-1000);
  overflow: hidden;
}

.video-band__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* Nothing to click. The only control is the reduced motion fallback below. */
  pointer-events: none;
}

/* Under reduced motion the video does not autoplay, so it needs its own
   controls to be reachable at all. */
.video-band__media[controls] { pointer-events: auto; }

/* No aspect change on small screens on purpose. Cropping to something taller
   would trim the sides off a product shot, and 16:9 across a phone is still a
   reasonable band rather than a sliver. */

/* --- Value bento --------------------------------------------------------- */

/* Five cards of equal size rather than a mixed bento. The old mismatched
   spans left a ragged right edge on every row, because five does not divide
   into a six track grid without holes. */
.bento {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The odd one out takes the whole row instead of leaving a hole beside it. */
  .bento__item:nth-child(5) { grid-column: span 2; }
}

@media (min-width: 64rem) {
  /* Six tracks so five equal cards sit three up, then two centred: every card
     spans two, and the last row simply starts one track in. */
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bento__item { grid-column: span 2; }
  .bento__item:nth-child(4) { grid-column: 2 / span 2; }
  .bento__item:nth-child(5) { grid-column: 4 / span 2; }
}

.bento__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.bento__item:hover,
.bento__item:focus-within {
  transform: translateY(-4px);
  border-color: rgba(193, 37, 32, 0.35);
  box-shadow: var(--shadow-lg);
}

.bento__item--feature {
  color: var(--text-on-dark);
  background:
    radial-gradient(90% 90% at 15% 0%, rgba(193, 37, 32, 0.45), transparent 65%),
    linear-gradient(160deg, var(--ink-800), var(--ink-1000));
  border-color: transparent;
}

.bento__item--feature .card__body,
.bento__item--feature p { color: var(--text-on-dark-soft); }
.bento__item--feature h3 { color: #fff; }

.bento__item .i { color: var(--accent); }
.bento__item--feature .i { color: var(--red-300); }

.bento__spacer { flex: 1; min-height: var(--space-md); }

/* --- Product cards ------------------------------------------------------- */

.product-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.product-card:hover {
  transform: translateY(-6px);
  border-color: rgba(193, 37, 32, 0.3);
  box-shadow: var(--shadow-lg);
}

.product-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background:
    radial-gradient(80% 70% at 50% 110%, rgba(193, 37, 32, 0.13), transparent 70%),
    linear-gradient(180deg, var(--mist-50), #fff);
  overflow: hidden;
}

.product-card__media img {
  width: 100%;
  transition: transform var(--dur-slow) var(--ease-out);
}

.product-card:hover .product-card__media img { transform: scale(1.06) rotate(-1.5deg); }

.product-card__badge {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  padding: 0.32rem 0.72rem;
  font-family: var(--font-technical);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: #fff;
  background: var(--ink-800);
  border-radius: var(--radius-pill);
}

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  padding: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem);
  border-top: 1px solid var(--line);
}

.product-card__cat {
  font-family: var(--font-technical);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
}

.product-card__title {
  font-size: var(--step-1);
  letter-spacing: var(--tracking-snug);
}

.product-card__tag {
  font-size: var(--step--1);
  line-height: var(--leading-compact);
  color: var(--text-soft);
}

.product-card__list {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.35rem;
  font-size: var(--step--2);
  line-height: 1.5;
  color: var(--text-muted);
}

.product-card__list li { display: flex; gap: 0.5rem; align-items: flex-start; }
.product-card__list .i { color: var(--accent); width: 0.95rem; height: 0.95rem; margin-top: 0.28rem; }

.product-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-md);
}

/* The title anchor covers the whole card, so any part of it is clickable while
   assistive technology still sees a single, properly named link. */
.product-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.product-card:hover .link-arrow { background-size: 100% 1px; }
.product-card:hover .link-arrow .i { transform: translateX(3px); }
.product-card__title a:focus-visible::after { outline: 2px solid var(--focus); outline-offset: -3px; }

/* Anything the visitor might click directly sits above that overlay. */
.product-card__badge { z-index: 2; }

/* Supporting range ---------------------------------------------------------
   Categories we also supply, not Cinni SKUs. Deliberately quieter than
   .product-card and deliberately static: nothing here links anywhere, so a
   hover lift would promise a click that does not exist. */
.support-grid {
  display: grid;
  gap: clamp(0.9rem, 0.65rem + 0.9vw, 1.35rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 34rem) {
  .support-grid { grid-template-columns: 1fr; }
}

@media (min-width: 64rem) {
  .support-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.support-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

/* The renders keep their own white ground: they carry soft contact shadows and
   glow streaks, so a tinted plate behind them would show a seam. */
.support-card__media {
  aspect-ratio: 3 / 2;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.support-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.support-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
  padding: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem);
}

.support-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: var(--tracking-snug);
}

.support-card__text {
  font-size: var(--step--1);
  line-height: var(--leading-compact);
  color: var(--text-soft);
}

.support-card__list {
  display: grid;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.7rem;
  font-size: var(--step--2);
  line-height: 1.5;
  color: var(--text-muted);
}

.support-card__list li { display: flex; gap: 0.5rem; align-items: flex-start; }
.support-card__list .i { color: var(--brass-500); width: 0.95rem; height: 0.95rem; margin-top: 0.28rem; }

/* Availability caveat. Brass hairline ties it to the other trust marks. */
.support-note {
  max-width: 46rem;
  margin-top: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  padding-left: clamp(0.9rem, 0.7rem + 0.6vw, 1.25rem);
  border-left: 2px solid var(--brass-line);
  font-size: var(--step--1);
  line-height: var(--leading-compact);
  color: var(--text-muted);
}

/* If a photograph ever fails to load, the frame degrades to a labelled panel
   rather than a browser broken image icon. */
.media--missing { position: relative; }

.media--missing img { visibility: hidden; }

.media--missing::after {
  content: 'Image coming soon';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-technical);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--mist-50);
}

/* --- Filter chips -------------------------------------------------------- */

.filters {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.chip {
  flex: none;
  padding: 0.58rem 1.05rem;
  font-family: var(--font-technical);
  font-size: var(--step--2);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.045em;
  color: var(--text-soft);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}

.chip:hover { transform: translateY(-2px); color: var(--text); }

.chip[aria-pressed='true'] {
  color: #fff;
  background: var(--ink-800);
  border-color: transparent;
}

.chip__count {
  margin-left: 0.4rem;
  font-size: 0.7em;
  opacity: 0.6;
}

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

.timeline {
  position: relative;
  display: grid;
  gap: var(--space-xl);
  padding-left: 2.25rem;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0.6rem;
  bottom: 0.6rem;
  left: 0.53rem;
  width: 1px;
  background: linear-gradient(180deg, var(--red-500), var(--line-strong));
}

.timeline__item { position: relative; }

.timeline__item::before {
  content: '';
  position: absolute;
  top: 0.5rem;
  left: -2.25rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--red-500);
  box-shadow: 0 0 0 4px rgba(238, 28, 37, 0.1);
}

.on-dark .timeline__item::before { background: var(--ink-900); }

.timeline__step {
  font-family: var(--font-technical);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
}

.timeline__title {
  font-size: var(--step-1);
  margin-top: 0.25rem;
  letter-spacing: var(--tracking-snug);
}

.timeline__body {
  margin-top: 0.45rem;
  color: var(--text-soft);
  font-size: var(--step--1);
  line-height: var(--leading-compact);
  max-width: 54ch;
}

/* --- Distribution network ------------------------------------------------ */

.network {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: min(100%, 32rem);
  margin-inline: auto;
}

/* Standing on its own, with the region list gone, the map carries the whole
   section and can afford the room. */
.network--lg { width: min(100%, 46rem); }

.network svg { width: 100%; height: auto; overflow: visible; }

.network__ring { fill: none; stroke: rgba(244, 246, 249, 0.13); stroke-dasharray: 3 7; }
.network__line { stroke: rgba(238, 28, 37, 0.35); stroke-width: 1; }
.network__node { fill: var(--red-400); }
.network__label {
  font-family: var(--font-technical);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  fill: rgba(244, 246, 249, 0.7);
}
.network__hub { fill: #fff; }

.network__pulse {
  /* fill-box is load bearing. SVG resolves transform-origin against the
     viewBox by default, so `center` meant the middle of the map and every
     pulse flew outward from there instead of expanding on its own dot. */
  transform-box: fill-box;
  transform-origin: center;
  animation: node-pulse 3.2s var(--ease-out) infinite;
}

/* Staggered off the wrapper, not with :nth-of-type. The rings and the plain
   dots are <circle> as well, so type counting picked out the wrong elements
   and none of these delays ever applied. */
.network__pulses > *:nth-child(2) { animation-delay: 0.64s; }
.network__pulses > *:nth-child(3) { animation-delay: 1.28s; }
.network__pulses > *:nth-child(4) { animation-delay: 1.92s; }
.network__pulses > *:nth-child(5) { animation-delay: 2.56s; }

@keyframes node-pulse {
  0% { opacity: 0.55; transform: scale(0.6); }
  70% { opacity: 0; transform: scale(2.6); }
  100% { opacity: 0; transform: scale(2.6); }
}

.region-list { display: grid; gap: 0.75rem; }

.region {
  display: grid;
  gap: 0.2rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.region:hover { border-color: rgba(238, 28, 37, 0.4); transform: translateX(4px); }
.region__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: var(--tracking-snug);
}

.region__detail {
  font-size: var(--step--2);
  line-height: 1.55;
  color: var(--text-muted);
}

/* --- Testimonials -------------------------------------------------------- */

.testimonials {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

/* --- Testimonial carousel -------------------------------------------------
   Advances one card at a time and dwells, rather than scrolling continuously:
   a quote that never stops moving cannot actually be read. carousel.js clones
   the set once so the loop has somewhere to run before it snaps back. */

.carousel {
  position: relative;
  /* Breathing room for the lift on hover, which would otherwise be clipped. */
  padding-block: 0.5rem;
  overflow: hidden;
}

.carousel__track {
  display: flex;
  gap: var(--space-lg);
  will-change: transform;
}

/* The class is added by the JS once it has measured, so the first paint cannot
   animate in from zero. */
.carousel__track.is-animated {
  transition: transform 700ms var(--ease-out);
}

.carousel__item {
  flex: 0 0 100%;
  /* Equal height regardless of quote length. */
  display: flex;
}

.carousel__item > * { flex: 1; }

@media (min-width: 48rem) {
  .carousel__item { flex-basis: calc((100% - var(--space-lg)) / 2); }
}

@media (min-width: 72rem) {
  .carousel__item { flex-basis: calc((100% - var(--space-lg) * 2) / 3); }
}

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: var(--space-lg);
}

.carousel__dots {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.carousel__dot {
  width: 0.45rem;
  height: 0.45rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line-strong);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), width var(--dur) var(--ease-out);
}

.carousel__dot[aria-current='true'] {
  width: 1.4rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
}

.carousel__dot:focus-visible,
.carousel__pause:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Auto advancing content has to be stoppable. */
.carousel__pause {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  font-family: var(--font-technical);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.carousel__pause:hover {
  color: var(--text);
  border-color: var(--line-strong);
}

.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.1rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.testimonial .i { width: 1.9rem; height: 1.9rem; color: var(--red-400); opacity: 0.55; }
.testimonial blockquote {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: var(--tracking-snug);
  color: var(--text);
  text-wrap: pretty;
}

/* Cards in a row share a height, so the attribution sits on the floor of the
   card rather than floating under a short quote. */
.testimonial figcaption {
  margin-top: auto;
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
  font-size: var(--step--2);
}

.testimonial figcaption strong {
  display: block;
  font-family: var(--font-technical);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

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

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

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 5vw, 5.5rem);
  background: var(--ink-900);
  color: var(--text-on-dark);
}

.cta-band__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(50% 90% at 15% 100%, rgba(193, 37, 32, 0.42), transparent 65%),
    radial-gradient(45% 80% at 85% 0%, rgba(238, 28, 37, 0.22), transparent 65%);
}

.cta-band__inner {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 58rem) {
  .cta-band__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
}

.cta-band h2 { color: #fff; max-width: 17ch; }
.cta-band p { color: var(--text-on-dark-soft); max-width: 50ch; }

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

@media (min-width: 58rem) {
  .cta-band__actions { justify-content: flex-end; }
}

/* --- Capability cards -----------------------------------------------------
   The hover runs a gradient arc around the border: a conic sweep with one lit
   segment, masked down to a single pixel ring. Paired with a lift and a softer
   shadow. Only transform, opacity and a registered angle animate. */

@property --border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.capability {
  display: grid;
  gap: clamp(0.9rem, 0.65rem + 0.9vw, 1.35rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 34rem) {
  .capability { grid-template-columns: 1fr; }
}

@media (min-width: 64rem) {
  .capability { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.capability__item {
  position: relative;
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: clamp(1.4rem, 1.1rem + 1.1vw, 2.1rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition:
    transform 380ms var(--ease-out),
    box-shadow 380ms var(--ease-out),
    border-color 380ms var(--ease-out);
}

.capability__item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--border-angle),
    transparent 0deg 205deg,
    rgba(184, 137, 74, 0.55) 258deg,
    var(--red-500) 300deg,
    rgba(184, 137, 74, 0.55) 342deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
  pointer-events: none;
}

.capability__item:hover,
.capability__item:focus-within {
  transform: translateY(-5px);
  border-color: transparent;
  box-shadow: 0 26px 50px -26px rgba(14, 17, 22, 0.42);
}

.capability__item:hover::before,
.capability__item:focus-within::before {
  opacity: 1;
  animation: border-travel 3.4s linear infinite;
}

@keyframes border-travel {
  to { --border-angle: 360deg; }
}

.capability__illustration {
  width: clamp(3.1rem, 2.6rem + 1.6vw, 4rem);
  height: auto;
  margin-bottom: 0.4rem;
}

.capability__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-snug);
}

.capability__body {
  font-size: var(--step--1);
  line-height: var(--leading-compact);
  color: var(--text-soft);
  max-width: 34ch;
}

.on-dark .capability__item {
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--line-dark);
  box-shadow: none;
}

.on-dark .capability__item:hover { box-shadow: 0 26px 50px -26px rgba(0, 0, 0, 0.6); }

/* --- pages.css --- */
/* --- Legal pages ----------------------------------------------------------
   Long form policy text. Two columns on desktop with the contents list parked
   alongside, one column on anything narrower. The measure is deliberately
   tight: legal copy is read in full, not scanned, and long lines are where
   people lose their place. */

.page-hero--compact { padding-block: clamp(5rem, 4rem + 5vw, 8rem) clamp(2.5rem, 2rem + 2vw, 4rem); }

.legal {
  display: grid;
  gap: clamp(2rem, 1.5rem + 3vw, 4rem);
  align-items: start;
}

@media (min-width: 64rem) {
  .legal { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); }
  .legal__toc {
    position: sticky;
    /* Clear of the sticky header. */
    top: 6.5rem;
    max-height: calc(100vh - 9rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.legal__dates {
  margin-top: var(--space-md);
  font-family: var(--font-technical);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-on-dark-soft);
}

.legal__toc-title {
  font-family: var(--font-technical);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--line);
}

.legal__toc-list {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: var(--space-sm) 0 0;
  list-style: none;
  counter-reset: none;
}

.legal__toc-list a {
  display: block;
  padding: 0.3rem 0;
  font-size: var(--step--2);
  line-height: 1.45;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out);
}

.legal__toc-list a:hover,
.legal__toc-list a:focus-visible {
  color: var(--accent);
  padding-left: 0.3rem;
}

.legal__body { max-width: 44rem; }

.legal__section + .legal__section { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }

/* Verbatim from the source document, which sets section headings in capitals.
   Kept as written, but sized and tracked so a wall of capitals stays readable
   rather than shouting. */
.legal__section h2 {
  font-family: var(--font-technical);
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: var(--tracking-label);
  color: var(--text);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--line);
  /* Anchor links from the contents list must not land under the sticky header. */
  scroll-margin-top: 6rem;
}

.legal__section h3 {
  margin-top: var(--space-lg);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
  color: var(--text);
}

.legal__section p,
.legal__list li {
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  color: var(--text-soft);
}

.legal__section > p { margin-top: var(--space-md); }

.legal__intro { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }

.legal__intro p {
  margin-top: var(--space-md);
  font-size: var(--step-0);
  line-height: var(--leading-normal);
  color: var(--text-soft);
}

.legal__intro p:first-child { margin-top: 0; }

.legal__list {
  display: grid;
  gap: 0.4rem;
  margin-top: var(--space-md);
  padding-left: 1.1rem;
  /* base.css strips list markers globally, and a policy of unmarked lines
     reads as prose rather than as the enumerated list it is. */
  list-style: disc;
}

.legal__list li { padding-left: 0.25rem; }
.legal__list li::marker { color: var(--accent); }

.legal__pairs {
  display: grid;
  gap: 0.15rem 1rem;
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

@media (min-width: 34rem) {
  .legal__pairs { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); }
}

.legal__pairs dt {
  font-family: var(--font-technical);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.legal__pairs dd {
  margin: 0 0 var(--space-sm);
  font-size: var(--step--1);
  line-height: var(--leading-compact);
  color: var(--text);
}

@media (min-width: 34rem) {
  .legal__pairs dd { margin-bottom: 0.5rem; }
}

/* ==========================================================================
   Page specific layouts: product detail, catalogue, enquiry, contact, 404
   ========================================================================== */

/* --- Product detail ------------------------------------------------------ */

.product-hero {
  display: grid;
  gap: clamp(1.75rem, 1rem + 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 62rem) {
  .product-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

/* Gallery */

.gallery { display: grid; gap: var(--space-md); }

.gallery__stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  background:
    radial-gradient(75% 65% at 50% 115%, rgba(193, 37, 32, 0.16), transparent 70%),
    linear-gradient(170deg, var(--mist-50), #fff);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: zoom-in;
}

.gallery__stage img {
  width: 100%;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

/* One photograph per product, so the stage is square and the shot fills it. */
.gallery__stage--single {
  aspect-ratio: 1;
  padding: clamp(1rem, 0.6rem + 1.6vw, 2rem);
}

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

.gallery__stage--single:hover img { transform: scale(1.02); }

.gallery__stage.is-switching img { opacity: 0; transform: scale(0.97); }

.gallery__zoom {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  font-size: var(--step--2);
  color: var(--text-soft);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(6px);
}

/* Lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(8, 10, 13, 0.9);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
}

.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { width: min(90vw, 46rem); }

.lightbox__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  color: #fff;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
}

/* Product summary */

.product-summary { display: grid; gap: var(--space-md); }

.product-summary__title {
  font-size: var(--step-4);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.product-summary__intro {
  color: var(--text-soft);
  max-width: 50ch;
  line-height: var(--leading-lede);
}

.product-highlights {
  display: grid;
  gap: 0.65rem;
  padding: var(--space-lg) 0;
  border-block: 1px solid var(--line);
}

.product-highlights li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: var(--step--1);
}

.product-highlights .i {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.32rem;
  color: var(--accent);
  flex: none;
}

.variant-group { display: grid; gap: 0.55rem; }

.variant-group__label {
  font-family: var(--font-technical);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.variant-options { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.variant-options span {
  padding: 0.42rem 0.8rem;
  font-family: var(--font-technical);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
}

.product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-top: var(--space-xs);
}

.product-meta {
  display: grid;
  gap: 0.5rem;
  margin-top: var(--space-xs);
  font-size: var(--step--2);
  color: var(--text-muted);
}

.product-meta span { display: inline-flex; align-items: center; gap: 0.5rem; }
.product-meta .i { color: var(--accent); }

/* Spec table */

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}

.spec-table caption {
  text-align: left;
  padding-bottom: var(--space-md);
  color: var(--text-muted);
  font-size: var(--step--2);
  line-height: var(--leading-compact);
}

.spec-table th,
.spec-table td {
  padding: 0.95rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

/* Row labels stay in the text face so the values beside them can carry the
   technical face and hold the eye. */
.spec-table tbody th {
  width: 42%;
  font-weight: 400;
  color: var(--text-soft);
}

.spec-table thead th {
  font-family: var(--font-technical);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom-color: var(--line-strong);
  vertical-align: bottom;
}

.spec-table td {
  font-family: var(--font-technical);
  font-weight: 500;
  letter-spacing: 0.015em;
  color: var(--text);
}
.spec-table tr:hover td { color: var(--accent); }

.spec-wrap { overflow-x: auto; }

/* Downloads */

.downloads { display: grid; gap: var(--space-sm); }

.download {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 1rem 1.15rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-soft);
  font-size: var(--step--1);
}

.download__icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  color: var(--accent);
  background: var(--red-tint);
  border-radius: var(--radius-xs);
}

.download__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: var(--tracking-snug);
  color: var(--text);
}

.download__note { font-size: var(--step--2); color: var(--text-muted); }

/* The catalogue row is a real link, so it gets an affordance. */
.download--file {
  border-style: solid;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.download--file:hover {
  border-color: rgba(193, 37, 32, 0.4);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.download--file:hover .download__icon { background: var(--red-600); color: #fff; }
.download__icon { transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }

.download__state {
  margin-left: auto;
  font-family: var(--font-technical);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Product page tabs */

.tabs { display: grid; gap: var(--space-lg); }

.tabs__list {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
}

.tabs__tab {
  position: relative;
  padding: 0.85rem 1.1rem;
  font-family: var(--font-technical);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.035em;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--dur) var(--ease-out);
}

.tabs__tab::after {
  content: '';
  position: absolute;
  inset: auto 0.8rem -1px;
  height: 2px;
  background: var(--red-500);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease-out);
}

.tabs__tab:hover { color: var(--text); }
.tabs__tab[aria-selected='true'] { color: var(--text); }
.tabs__tab[aria-selected='true']::after { transform: scaleX(1); }

.tabs__panel[hidden] { display: none; }

.tabs__panel { animation: fade-up 500ms var(--ease-out) both; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* Product pager */

.product-pager {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  padding-top: var(--space-xl);
  border-top: 1px solid var(--line);
}

.product-pager a {
  display: grid;
  gap: 0.25rem;
  padding: 1.1rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.product-pager a:hover { border-color: rgba(238, 28, 37, 0.4); transform: translateY(-3px); }
.product-pager small {
  font-family: var(--font-technical);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.product-pager strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: var(--tracking-snug);
}
.product-pager a:last-child { text-align: right; }

/* --- Catalogue page ------------------------------------------------------ */

.catalogue-bar {
  position: sticky;
  top: 4.5rem;
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-md);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.catalogue-count {
  font-family: var(--font-technical);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  white-space: nowrap;
}

.catalogue-group + .catalogue-group { margin-top: var(--space-3xl); }

.catalogue-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--line);
}

.catalogue-group__head h2 {
  font-size: var(--step-2);
  letter-spacing: var(--tracking-snug);
}

.catalogue-group__head p {
  font-size: var(--step--1);
  line-height: var(--leading-compact);
  color: var(--text-muted);
  max-width: 44ch;
}

.catalogue-empty {
  padding: var(--space-2xl);
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--text-muted);
}

/* --- Enquiry and contact ------------------------------------------------- */

.form-panel {
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.contact-grid {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3.5vw, 3.5rem);
  align-items: start;
}

@media (min-width: 62rem) {
  .contact-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

.contact-card {
  display: grid;
  gap: 0.35rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.contact-card:hover { border-color: rgba(238, 28, 37, 0.4); transform: translateY(-3px); }

.contact-card__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-technical);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.contact-card__label .i { color: var(--accent); }
.contact-card__value {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
  font-variant-numeric: tabular-nums slashed-zero;
}
.contact-card__value a { transition: color var(--dur) var(--ease-out); }
.contact-card__value a:hover { color: var(--accent); }
.contact-card__note { font-size: var(--step--2); color: var(--text-muted); }

.map-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(160deg, var(--ink-800), var(--ink-900));
}

.map-frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.25) contrast(1.05); }

/* --- Dealer network ------------------------------------------------------ */

.benefit-list { display: grid; gap: var(--space-md); }

.benefit {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.benefit__icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  color: var(--accent);
  background: var(--red-tint);
  border: 1px solid rgba(238, 28, 37, 0.2);
  border-radius: var(--radius-sm);
}

.benefit__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: var(--tracking-snug);
}

.benefit__body {
  font-size: var(--step--1);
  line-height: var(--leading-compact);
  color: var(--text-soft);
  max-width: 52ch;
}

.export-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

/* --- 404 ----------------------------------------------------------------- */

.notfound {
  display: grid;
  place-items: center;
  gap: var(--space-lg);
  min-height: 70svh;
  padding-top: 8rem;
  padding-bottom: var(--space-4xl);
  text-align: center;
}

.notfound__code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 3rem + 14vw, 12rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.055em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(244, 246, 249, 0.28);
}

/* --- Legal / long form --------------------------------------------------- */

.prose { max-width: 66ch; }
.prose h2 { font-size: var(--step-2); margin-top: var(--space-2xl); }
.prose h3 { font-size: var(--step-1); margin-top: var(--space-xl); }
.prose p + p { margin-top: var(--space-md); }

.prose p {
  color: var(--text-soft);
  line-height: var(--leading-normal);
  max-width: 66ch;
}

.prose ul {
  display: grid;
  gap: 0.6rem;
  margin-top: var(--space-md);
}

.prose ul li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  color: var(--text-soft);
  font-size: var(--step--1);
}

.prose ul li .i { width: 1.05rem; height: 1.05rem; margin-top: 0.35rem; color: var(--accent); flex: none; }

/* --- Shared text utilities -------------------------------------------------
   The last few one off overrides, given names so paragraph typography stays
   consistent everywhere. */

.address-block {
  margin-top: 1.25rem;
  font-size: var(--step-0);
  line-height: var(--leading-normal);
  color: var(--text-soft);
}

.lede--sm { font-size: var(--step-0); line-height: var(--leading-lede); }

.card__title--sm { font-size: var(--step-0); }

.bento__kicker {
  font-family: var(--font-technical);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--red-300);
}

/* --- preloader.css --- */
/* ==========================================================================
   Preloader
   A spin up gate on the home page. Loaded last so it can sit above every
   other layer without fighting specificity.

   Contract with the rest of the site
   ----------------------------------
   - Nothing here applies until <html> carries `is-preloading`. The inline
     script in head.html adds that class before first paint, and preloader.js
     removes it on exit. No class, no overlay, so a JavaScript failure cannot
     leave a visitor staring at a locked page.
   - `.no-js` never shows it at all.

   Two custom properties drive almost everything, both written by preloader.js:

     --d   demand, 0 to 1. What the visitor has dialled in. Updated the instant
           they move, so the knob and the fill track the finger with no lag.
     --p   actual, 0 to 1. What the motor has actually reached. Lags --d, which
           is what makes the readout and the blur feel like a machine spooling
           up rather than a value being set.
   ========================================================================== */

/* --- Page level state ----------------------------------------------------- */

/* Scroll lock while the gate is up. Both elements, because iOS honours one
   and not the other depending on version. */
html.is-preloading,
html.is-preloading body {
  overflow: hidden;
  overscroll-behavior: none;
}

/* The veil covers one specific gap: between the boot script running and the
   overlay existing. In the offline single file <main> starts empty and is
   filled by the router a moment later, so without this the header and footer
   would paint for a frame before the overlay mounted over them.

   preloader.js lifts it the instant it has the overlay, and that timing is the
   whole point. While the veil is up the browser paints nothing, so lifting it
   at exit would mean rendering the entire page in one frame exactly as the
   overlay fades, which is the flash this used to have. Lifted early, the page
   renders and decodes behind an opaque overlay and is simply revealed. */
html.is-preloading body { background: var(--ink-1000); }
html.is-preloading-veil body > * { visibility: hidden; }
html.is-preloading-veil .preloader { visibility: visible; }

/* The hero runs its own entrance animation on load. Hold it at frame zero
   while the preloader is up so it plays properly once the gate lifts, rather
   than finishing unseen behind the overlay. */
html.is-preloading .hero *,
html.is-preloading .hero {
  animation-play-state: paused !important;
}

/* The reveal. The page behind is already painted by this point, so the overlay
   only has to get out of the way while the hero settles the last fraction of a
   scale. Both run for the same 700ms, matching EXIT_DURATION in preloader.js,
   so the two moves read as one camera push rather than two events. */
html.is-preloading-out .hero {
  animation: preloader-hero-in 700ms var(--ease-out) both;
}

@keyframes preloader-hero-in {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: none; }
}

/* --- Shell ---------------------------------------------------------------- */

.preloader {
  --fan-size: clamp(12rem, 8rem + 20vmin, 20rem);
  --meter-size: clamp(5rem, 4rem + 4vmin, 7rem);
  --d: 0;
  --p: 0;
  --blur: 0;
  --buffered: 0;
  --arc: #b8894a;

  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  place-items: center;
  padding: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  color: var(--text-on-dark);
  background: var(--ink-1000);
  /* Fence off layout and paint so the spinning fan cannot invalidate anything
     in the page underneath. Size containment is deliberately left out: the
     grid still needs to measure its own content. */
  contain: layout paint style;
  transform-origin: 50% 46%;
}

html.is-preloading .preloader { display: grid; }
html.no-js .preloader { display: none !important; }

/* The overlay takes focus on open so the trap has somewhere to start, but it
   is a container rather than a control and should not draw a focus ring. */
.preloader:focus { outline: none; }

/* Exit: push through the fan and hand over to the hero. */
html.is-preloading-out .preloader {
  animation: preloader-out 700ms var(--ease-out) both;
  pointer-events: none;
}

/* A gentle push through rather than a lunge. The old 1.5 scale drew attention
   to itself and, on a low end device, dropped frames on the way out. */
@keyframes preloader-out {
  from { opacity: 1; transform: scale(1); }
  55%  { opacity: 0.35; }
  to   { opacity: 0; transform: scale(1.16); }
}

/* --- Backdrop ------------------------------------------------------------- */

.preloader__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.preloader__jaali {
  position: absolute;
  inset: 0;
  background-image: var(--pattern-jaali-dark);
  background-size: 72px 72px;
  opacity: 0.55;
  /* Fade the lattice away from the middle so nothing sits behind the fan. */
  mask-image: radial-gradient(circle at 50% 46%, transparent 0%, transparent 24%, #000 66%);
}

/* Warms and brightens as the fan spins up. */
.preloader__glow {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(120vmin, 60rem);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(193, 37, 32, 0.22) 0%,
    rgba(156, 28, 24, 0.10) 36%,
    transparent 68%
  );
  opacity: calc(0.32 + var(--blur) * 0.68);
  transition: opacity 180ms linear;
}

.preloader__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 46%, transparent 40%, rgba(8, 10, 13, 0.85) 100%);
}

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

.preloader__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(0.85rem, 0.5rem + 1.5vmin, 1.7rem);
  width: min(100%, 34rem);
  text-align: center;
}

.preloader__eyebrow {
  font-family: var(--font-technical);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--brass-400);
}

.preloader__title {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 0.95rem + 1.1vmin, 1.6rem);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-on-dark);
}

/* --- Fan stage ------------------------------------------------------------ */

.preloader__stage {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--fan-size);
  height: var(--fan-size);
}

.preloader__particles {
  position: absolute;
  inset: -18%;
  width: 136%;
  height: 136%;
  pointer-events: none;
}

/* Viewed face on, matching the brand's coming soon artwork. No tilt, no
   downrod: this reads as a fan symbol rather than a ceiling fixture. */
.fan {
  position: relative;
  width: 100%;
  height: 100%;
  /* A slow camera push that tracks speed, so the stage tightens as it spools. */
  scale: calc(1 + var(--blur) * 0.04);
}

/* The glowing rim the blades turn inside. */
.fan__ring {
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  border: 1px solid rgba(238, 28, 37, calc(0.28 + var(--blur) * 0.45));
  box-shadow:
    0 0 calc(1.5rem + var(--blur) * 2.5rem) rgba(238, 28, 37, calc(0.18 + var(--blur) * 0.3)),
    inset 0 0 3rem rgba(238, 28, 37, calc(0.06 + var(--blur) * 0.16));
}

/* --- Rotor and blades ----------------------------------------------------- */

/* Rotation is applied by the Web Animations API, not by a per frame style
   write, so it runs on the compositor and cannot be stuttered by a busy main
   thread. `will-change` keeps the layer promoted for the whole run. */
.fan__rotor {
  position: absolute;
  inset: 0;
  will-change: transform;
}

/* Ghost rotors are clones trailing behind the real one. Together they read as
   motion blur far more cheaply than an actual blur filter, which would cost a
   full screen repaint every frame. */
.fan__rotor--ghost { pointer-events: none; }

.fan__arm {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Short of the rim on purpose: the blades should turn inside the ring with
     daylight around the tips, not scrape it. */
  width: 42%;
  height: 18%;
  margin-top: -9%;
  transform-origin: 0 50%;
}

.fan__arm:nth-child(1) { transform: rotate(0deg); }
.fan__arm:nth-child(2) { transform: rotate(120deg); }
.fan__arm:nth-child(3) { transform: rotate(240deg); }

/* A swept petal: red along the leading edge, falling away to near black at the
   trailing edge. The slight rotation inside the arm is what gives the sweep. */
.fan__blade {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  rotate: -7deg;
  background: linear-gradient(
    174deg,
    var(--red-300) 0%,
    var(--red-400) 18%,
    var(--red-600) 38%,
    var(--red-700) 52%,
    var(--ink-700) 76%,
    var(--ink-900) 100%
  );
  box-shadow: 0 0 1.1rem rgba(238, 28, 37, 0.22);
}

/* A single specular streak down the leading edge so the blade catches light. */
.fan__blade::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    174deg,
    rgba(255, 255, 255, 0.34) 0%,
    rgba(255, 255, 255, 0.06) 14%,
    transparent 34%,
    transparent 72%,
    rgba(8, 10, 13, 0.4) 100%
  );
}

/* --- Blur disc ------------------------------------------------------------ */

/* At speed a fan stops being three blades and becomes a translucent disc.
   Opacity is driven from --blur, so it arrives exactly as the blades dissolve. */
.fan__disc {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 94%;
  height: 94%;
  translate: -50% -50%;
  border-radius: 50%;
  opacity: calc(var(--blur) * 0.55);
  background:
    conic-gradient(
      from 0deg,
      rgba(193, 37, 32, 0.00) 0deg,
      rgba(193, 37, 32, 0.20) 40deg,
      rgba(193, 37, 32, 0.00) 120deg,
      rgba(193, 37, 32, 0.20) 160deg,
      rgba(193, 37, 32, 0.00) 240deg,
      rgba(193, 37, 32, 0.20) 280deg,
      rgba(193, 37, 32, 0.00) 360deg
    ),
    radial-gradient(
      circle,
      transparent 10%,
      rgba(156, 28, 24, 0.30) 20%,
      rgba(52, 60, 70, 0.30) 72%,
      transparent 84%
    );
  will-change: opacity;
}

/* --- Hub ------------------------------------------------------------------ */

.fan__hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11%;
  height: 11%;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--ink-400), var(--ink-900) 72%);
  box-shadow:
    0 0 0 1px rgba(244, 246, 249, 0.10),
    0 0.5rem 1.4rem rgba(8, 10, 13, 0.8);
}

/* --- Meter, readout only -------------------------------------------------- */

.meter {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--meter-size);
  height: var(--meter-size);
}

.meter__dial {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Rotate so the 270 degree sweep opens at the bottom left. */
  transform: rotate(135deg);
  overflow: visible;
}

.meter__track,
.meter__value {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  /* 2 * pi * 86 = 540.35. Three quarters of that is the visible sweep. */
  stroke-dasharray: 405.3 540.4;
}

.meter__track { stroke: rgba(244, 246, 249, 0.10); }

.meter__value {
  stroke: var(--arc);
  stroke-dasharray: calc(var(--p) * 405.3) 540.4;
  filter: drop-shadow(0 0 5px rgba(238, 28, 37, 0.45));
}

.meter__readout {
  display: grid;
  justify-items: center;
  gap: 0.05rem;
}

.meter__number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 0.85rem + 1.2vmin, 1.5rem);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  /* Slashed tabular zeros, so the number does not jitter as it counts. */
  font-variant-numeric: tabular-nums slashed-zero;
  color: var(--text-on-dark);
}

.meter__unit {
  font-family: var(--font-technical);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-on-dark-soft);
}

/* --- Track, the control --------------------------------------------------- */

.preloader__controls {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  width: 100%;
}

.track {
  position: relative;
  width: min(100%, 22rem);
  /* Generous height for a comfortable thumb target; the visible rail is thin
     and centred inside it. */
  height: 2.5rem;
  cursor: grab;
  /* Stops the browser scrolling the page when the track is dragged on touch. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.track.is-dragging { cursor: grabbing; }

.track:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.track__rail,
.track__buffer,
.track__fill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 6px;
  translate: 0 -50%;
  border-radius: var(--radius-pill);
  pointer-events: none;
}

.track__rail {
  right: 0;
  background: rgba(244, 246, 249, 0.10);
}

/* Asset loading, shown the way a video scrubber shows buffered against played. */
.track__buffer {
  width: calc(var(--buffered) * 100%);
  background: rgba(244, 246, 249, 0.20);
  transition: width 320ms var(--ease-out);
}

/* Demand, not actual speed: the fill must track the finger with no lag. */
.track__fill {
  width: calc(var(--d) * 100%);
  background: linear-gradient(90deg, var(--brass-500), var(--red-400));
  box-shadow: 0 0 14px rgba(238, 28, 37, 0.45);
}

.track__knob {
  position: absolute;
  top: 50%;
  left: calc(var(--d) * 100%);
  width: 1.15rem;
  height: 1.15rem;
  translate: -50% -50%;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(8, 10, 13, 0.45),
    0 2px 10px rgba(8, 10, 13, 0.65),
    0 0 18px rgba(238, 28, 37, calc(0.25 + var(--blur) * 0.5));
  pointer-events: none;
  transition: scale 160ms var(--ease-out);
}

.track.is-dragging .track__knob { scale: 1.18; }

.preloader__hint {
  min-height: 1.2em;
  font-family: var(--font-technical);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: rgba(244, 246, 249, 0.45);
  transition: opacity var(--dur) var(--ease-out);
}

.preloader__hint.is-hidden { opacity: 0; }

.preloader__status {
  font-family: var(--font-technical);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-on-dark-soft);
}

.preloader__status.is-ready { color: var(--brass-400); }

/* --- Actions -------------------------------------------------------------- */

.preloader__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.preloader__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  font-family: var(--font-technical);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-on-dark-soft);
  background: rgba(244, 246, 249, 0.05);
  border: 1px solid rgba(244, 246, 249, 0.14);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.preloader__btn:hover,
.preloader__btn:focus-visible {
  color: var(--text-on-dark);
  border-color: rgba(244, 246, 249, 0.34);
  background: rgba(244, 246, 249, 0.09);
}

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

.preloader__btn[aria-pressed='true'] {
  color: var(--brass-400);
  border-color: var(--brass-line);
}

/* Three bars that only animate while sound is actually on. */
.preloader__btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 0.75rem;
}

.preloader__wave {
  width: 2px;
  height: 34%;
  border-radius: 1px;
  background: currentColor;
}

.preloader__btn[aria-pressed='true'] .preloader__wave {
  animation: preloader-wave 900ms var(--ease-in-out) infinite;
}

.preloader__btn[aria-pressed='true'] .preloader__wave:nth-child(2) { animation-delay: 150ms; }
.preloader__btn[aria-pressed='true'] .preloader__wave:nth-child(3) { animation-delay: 300ms; }

@keyframes preloader-wave {
  0%, 100% { height: 34%; }
  50%      { height: 100%; }
}

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

/* Landscape phones and short windows: drop the headline and tighten the stack
   so the track and the actions stay reachable without scrolling. */
@media (max-height: 33rem) {
  .preloader {
    --fan-size: clamp(5.5rem, 20vh, 8rem);
    --meter-size: 3.75rem;
    padding: 0.6rem;
  }
  .preloader__title { display: none; }
  .preloader__inner { gap: 0.45rem; }
  .track { height: 2rem; }
  /* The hint stays: it is the only thing telling anyone the track is a
     control. The fan gives up the space instead. */
}

@media (max-width: 24rem) {
  .preloader__actions { width: 100%; }
  .preloader__btn { flex: 1 1 auto; justify-content: center; }
}

/* --- Reduced motion ------------------------------------------------------- */

/* preloader.js skips the gate entirely when reduced motion is requested, so
   this is a belt and braces stop in case the overlay is ever forced up. */
@media (prefers-reduced-motion: reduce) {
  html.is-preloading .preloader,
  html.is-preloading-out .preloader,
  html.is-preloading-out .hero {
    animation: none !important;
  }
  .preloader__wave { animation: none !important; }
  .fan__disc { opacity: 0.3; }
}