/* fonts.css */
/* Purpose: Self-hosted webfont declarations. Generated from the Google Fonts API — no CDN at runtime. */

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://bhawanisteel.com/wp-content/themes/bhawani-steel/assets/fonts/Anton-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://bhawanisteel.com/wp-content/themes/bhawani-steel/assets/fonts/Anton-400-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('https://bhawanisteel.com/wp-content/themes/bhawani-steel/assets/fonts/Archivo-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('https://bhawanisteel.com/wp-content/themes/bhawani-steel/assets/fonts/Archivo-300-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://bhawanisteel.com/wp-content/themes/bhawani-steel/assets/fonts/Archivo-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://bhawanisteel.com/wp-content/themes/bhawani-steel/assets/fonts/Archivo-400-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://bhawanisteel.com/wp-content/themes/bhawani-steel/assets/fonts/Archivo-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://bhawanisteel.com/wp-content/themes/bhawani-steel/assets/fonts/Archivo-500-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://bhawanisteel.com/wp-content/themes/bhawani-steel/assets/fonts/Archivo-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://bhawanisteel.com/wp-content/themes/bhawani-steel/assets/fonts/Archivo-600-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://bhawanisteel.com/wp-content/themes/bhawani-steel/assets/fonts/Archivo-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://bhawanisteel.com/wp-content/themes/bhawani-steel/assets/fonts/Archivo-700-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('https://bhawanisteel.com/wp-content/themes/bhawani-steel/assets/fonts/IBMPlexMono-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('https://bhawanisteel.com/wp-content/themes/bhawani-steel/assets/fonts/IBMPlexMono-300-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://bhawanisteel.com/wp-content/themes/bhawani-steel/assets/fonts/IBMPlexMono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://bhawanisteel.com/wp-content/themes/bhawani-steel/assets/fonts/IBMPlexMono-400-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://bhawanisteel.com/wp-content/themes/bhawani-steel/assets/fonts/IBMPlexMono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://bhawanisteel.com/wp-content/themes/bhawani-steel/assets/fonts/IBMPlexMono-500-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* design-system.css */
/* Purpose: Single source of truth for every design token. No other file may declare :root variables. */
/* Values taken from the approved HTML build (Bhawani steel.zip, 2026-08-06). */

:root {
  /* BRAND COLORS — names match the HTML build so ported section CSS works unchanged */
  --carbon:      #0A0908;
  --iron:        #161412;
  --iron-2:      #1E1B18;
  --ash:         #8A8580;
  --bone:        #EDE6DA;
  --molten:      #FF6B1A;
  --molten-deep: #C2410C;
  --gold:        #C9A961;
  --gold-deep:   #8B6914;

  /* SEMANTIC COLOR ALIASES */
  --color-primary:      var(--molten);
  --color-primary-dark: var(--molten-deep);
  --color-secondary:    var(--gold);
  --color-accent:       var(--gold-deep);
  --color-bg:           var(--carbon);
  --color-bg-alt:       var(--iron);
  --color-surface:      var(--iron-2);
  --color-text:         var(--bone);
  --color-text-muted:   var(--ash);
  --color-border:       rgba(237, 230, 218, 0.12);
  --color-border-strong: rgba(237, 230, 218, 0.25);

  /* Hairline between the cells of a divider grid (spec grid, stage flow, lab, stat band, post
     grid). Those grids draw their lines from the cells rather than from a container background,
     so that an odd item count leaves a hole that shows the section through rather than a pale
     block. The cells paint into a shared 1px gap from both sides, so this has to be a SOLID
     colour: rgba(237, 230, 218, 0.1) stacked with itself would come out near twice as bright on
     the inner lines as on the outer edge. The value is that same line already resolved over
     --carbon; .sec--iron re-resolves it over --iron. */
  --divider:            #211F1D;
  --color-success:      #22c55e;
  --color-warning:      #f59e0b;
  --color-error:        #ef4444;

  /* TYPOGRAPHY */
  --font-display: 'Anton', sans-serif;
  --font-heading: var(--font-display);
  --font-body:    'Archivo', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --text-xs:   0.6875rem;  /* 11px — mono labels */
  --text-sm:   0.8125rem;  /* 13px — buttons */
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.5rem;
  --text-4xl:  3.5rem;
  --text-5xl:  5rem;

  /* FLUID SCALE — matches the HTML build clamps */
  --text-hero:    clamp(38px, 5.4vw, 96px);
  --text-section: clamp(34px, 4.4vw, 72px);
  --text-stat:    clamp(32px, 3.1vw, 50px);
  --text-body-l:  clamp(16px, 1.35vw, 20px);
  --text-lead:    clamp(15px, 1.2vw, 18px);

  --leading-tight:  0.96;
  --leading-snug:   1.3;
  --leading-normal: 1.65;
  --leading-loose:  1.8;
  --tracking-tight:  0.005em;
  --tracking-normal: 0;
  --tracking-wide:   0.18em;
  --tracking-wider:  0.22em;
  --tracking-widest: 0.34em;
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* SPACING */
  --space-1:  0.25rem;  --space-2:  0.5rem;
  --space-3:  0.75rem;  --space-4:  1rem;
  --space-5:  1.25rem;  --space-6:  1.5rem;
  --space-8:  2rem;     --space-10: 2.5rem;
  --space-12: 3rem;     --space-16: 4rem;
  --space-20: 5rem;     --space-24: 6rem;
  --space-32: 8rem;
  /* SECTION + BLOCK RHYTHM
     Desktop keeps the approved HTML build's vh values unchanged. Below 1024px they switch to fixed
     px, because vh-based rhythm grows on a portrait tablet: 14vh is 143px at 768x1024 against 126px
     at 1440x900, so the gaps were larger on a tablet than on a desktop. The token names map onto the
     vh values they replace, so a component reads the same as before. */
  --space-section:   14vh;
  --space-block-2xl:  9vh;
  --space-block-xl:   8vh;
  --space-block-lg:   7vh;
  --space-block:      6vh;
  --space-block-sm:   5vh;
  --space-block-xs:   4vh;

  /* Fixed-px section rhythm from the HTML build — Home's components and the Hot Rolled page use
     these instead of the vh scale. Desktop values are the Figma frame paddings, untouched. */
  --space-section-lg: 92px;
  --space-section-md: 80px;
  --space-section-sm: 70px;
  --space-section-xs: 57px;

  /* LAYOUT */
  --container-sm:  640px;   --container-md:  768px;
  --container-lg:  1024px;  --container-xl:  1280px;
  --container-2xl: 1480px;  --container-max: 1920px;
  --shell-width: min(1480px, 92vw);
  --grid-cols: 12;
  --grid-gap:  var(--space-6);

  /* BORDERS */
  --radius-sm: 0;  --radius-md: 0;
  --radius-lg: 0;  --radius-xl: 0;  --radius-full: 9999px;
  --border-thin:   1px solid var(--color-border);
  --border-normal: 1px solid var(--color-border-strong);

  /* SHADOWS */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.65);

  /* TRANSITIONS */
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0.0, 1, 1);
  --ease-inout:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-stamp:  cubic-bezier(0.77, 0, 0.18, 1);
  --duration-fast:   150ms;  --duration-base:   250ms;
  --duration-slow:   400ms;  --duration-slower: 700ms;

  /* Z-INDEX */
  --z-base:     0;    --z-raised:   10;
  --z-dropdown: 100;  --z-sticky:   200;
  --z-overlay:  300;  --z-modal:    400;
  --z-toast:    500;  --z-hud:      800;
  --z-preloader: 9000; --z-cursor:  9999;
}

/* Tablet — portrait and landscape. */
@media (max-width: 1023px) {
  :root {
    --space-section:   78px;
    --space-block-2xl: 52px;
    --space-block-xl:  46px;
    --space-block-lg:  40px;
    --space-block:     34px;
    --space-block-sm:  28px;
    --space-block-xs:  22px;
    --space-section-lg: 62px;
    --space-section-md: 54px;
    --space-section-sm: 48px;
    --space-section-xs: 40px;
  }
}

/* Phone. */
@media (max-width: 767px) {
  :root {
    --space-section:   62px;
    --space-block-2xl: 44px;
    --space-block-xl:  38px;
    --space-block-lg:  32px;
    --space-block:     28px;
    --space-block-sm:  22px;
    --space-block-xs:  18px;
    --space-section-lg: 52px;
    --space-section-md: 46px;
    --space-section-sm: 40px;
    --space-section-xs: 34px;
  }
}

/* base.css */
/* Purpose: Reset, document defaults and accessibility primitives. Mobile first. */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

html.lenis-off {
  overflow: hidden;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-light);
  line-height: var(--leading-normal);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background-color: var(--molten);
  color: var(--carbon);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

ul, ol {
  list-style: none;
}

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

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

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

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
}

.mono {
  font-family: var(--font-mono);
}

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

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-cursor);
  padding: var(--space-3) var(--space-4);
  background-color: var(--bone);
  color: var(--carbon);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transform: translateY(-200%);
  transition: transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

/* layout.css */
/* Purpose: Shell, grid and section rhythm. Layout only — no component styles. */

.shell {
  width: var(--shell-width);
  margin-inline: auto;
}

.shell--narrow {
  width: min(1024px, 92vw);
}

.shell--wide {
  width: min(1920px, 96vw);
}

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

.section--tight {
  padding-block: var(--space-16);
}

.section--flush {
  padding-block: 0;
}

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

.site-main {
  display: block;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  }
}

/* about.css */
/* Purpose: About split section with fact grid. */

.about {
  padding: var(--space-section-md) 0;
  background-color: var(--carbon);
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-block);
  align-items: stretch;
}

.about__copy .section-head {
  margin: 22px 0 26px;
}

.about__text {
  max-width: 560px;
  margin-bottom: 30px;
  color: var(--ash);
  font-size: 16px;
  line-height: 1.75;
}

.about__image {
  position: relative;
  min-height: 420px;
  overflow: hidden;
}

.about__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05);
}

.about__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 48px;
  background-color: rgba(237, 230, 218, 0.1);
  border: 1px solid rgba(237, 230, 218, 0.1);
}

.fact {
  padding: 24px 26px;
  background-color: var(--carbon);
}

.fact__key {
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.fact__value {
  margin-top: 8px;
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: var(--weight-medium);
  line-height: 1.3;
}

@media (min-width: 761px) {
  .about__facts {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 981px) {
  .about__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 6vw;
  }
}

/* audit.css */
/* Purpose: Lifecycle audit offer — rotating badge and three-card exchange. */

.audit {
  padding: var(--space-section-md) 0;
  background-color: var(--carbon);
}

.audit__badge {
  position: relative;
  width: 188px;
  height: 188px;
  margin: 0 auto;
}

.audit__badge svg {
  position: absolute;
  inset: 0;
  animation: audit-spin 16s linear infinite;
}

@keyframes audit-spin {
  to { transform: rotate(360deg); }
}

.audit__badge-core {
  position: absolute;
  inset: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold);
  border-radius: var(--radius-full);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 34px;
}

.audit__title {
  margin-top: var(--space-block-sm);
  color: var(--bone);
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 88px);
  line-height: 0.96;
  text-align: center;
  text-transform: uppercase;
}

.audit__title em {
  color: var(--gold);
  font-style: normal;
}

.audit__sub {
  max-width: 620px;
  margin: 30px auto 0;
  color: var(--ash);
  font-size: 17px;
  font-style: italic;
  line-height: 1.7;
  text-align: center;
}

.audit__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: var(--space-block-xl);
  background-color: rgba(201, 169, 97, 0.25);
  border: 1px solid rgba(201, 169, 97, 0.25);
}

.audit-card {
  padding: 46px 38px;
  background-color: var(--carbon);
}

.audit-card__key {
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.audit-card__title {
  margin: 18px 0 14px;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 30px);
  text-transform: uppercase;
}

.audit-card__text {
  color: var(--ash);
  font-size: 14px;
  line-height: 1.7;
}

.audit__cta {
  margin-top: var(--space-block-xl);
  text-align: center;
}

.audit__fine {
  margin-top: 22px;
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
}

@media (min-width: 881px) {
  .audit__cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* button.css */
/* Purpose: Button component styles. Matches the stamp and ghost buttons in the approved HTML build. */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  overflow: hidden;
  padding: 20px 36px;
  background-color: var(--gold);
  color: var(--carbon);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: color var(--duration-slow) var(--ease-out);
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--molten);
  transform: translateY(101%);
  transition: transform 450ms var(--ease-stamp);
}

.btn:hover::after {
  transform: translateY(0);
}

.btn > * {
  position: relative;
  z-index: var(--z-raised);
}

.btn--ghost {
  padding: 18px 30px;
  border: 1px solid var(--color-border-strong);
  background-color: transparent;
  color: var(--bone);
  font-size: 12px;
  font-weight: var(--weight-regular);
  transition:
    border-color var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out);
}

.btn--ghost::after {
  content: none;
}

.btn--ghost:hover {
  border-color: var(--gold);
  background-color: rgba(201, 169, 97, 0.07);
}

.btn--full {
  width: 100%;
  justify-content: center;
}

/* capability.css */
/* Purpose: Capability blocks — spec grid, stage flow, data table, lab, stat band and split extras. */

/* ---------- SPEC GRID ---------- */

.spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: var(--space-block-lg);
  /* Matches the cells, so an odd item count leaves a hole that reads as part of the block rather
     than as a window onto the section behind it. The hairlines come from the cells, so nothing
     here paints a line. */
  background-color: var(--carbon);
}

.sec--iron .spec-grid {
  background-color: var(--iron);
}

.spec {
  padding: 40px 28px;
  background-color: var(--carbon);
  box-shadow: 0 0 0 1px var(--divider);
}

.sec--iron .spec {
  background-color: var(--iron);
}

.spec__num {
  color: var(--molten);
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 46px);
  line-height: 1;
}

.spec__title {
  margin: 14px 0 12px;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.spec__text {
  color: var(--ash);
  font-size: 13px;
  line-height: 1.65;
}

.callout {
  margin-top: var(--space-block);
  padding: 36px 40px;
  border: 1px solid rgba(201, 169, 97, 0.3);
  color: rgba(237, 230, 218, 0.9);
  font-size: 17px;
  line-height: 1.7;
}

.callout strong {
  color: var(--gold);
  font-weight: var(--weight-semibold);
}

/* ---------- STAGE FLOW ---------- */

.stage-flow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: var(--space-block);
  background-color: var(--carbon);
}

.sec--iron .stage-flow {
  background-color: var(--iron);
}

.stage-cell {
  padding: 30px 24px;
  background-color: var(--carbon);
  box-shadow: 0 0 0 1px var(--divider);
}

.sec--iron .stage-cell {
  background-color: var(--iron);
}

.stage-cell__num {
  display: block;
  color: transparent;
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  -webkit-text-stroke: 1px rgba(237, 230, 218, 0.35);
}

.stage-cell__title {
  display: block;
  margin-top: 14px;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 18px;
  text-transform: uppercase;
}

.stage-cell__subtitle {
  display: block;
  margin-top: 6px;
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stage-cell__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.stage-cell__tag {
  padding: 5px 10px;
  border: 1px solid var(--color-border-strong);
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stage-flow__note {
  /* 86ch: the Capabilities note needs ~82ch to set in two lines from 1024px up (client, 2026-09-25). */
  max-width: 86ch;
  margin-top: var(--space-block-sm);
}

/* ---------- SPLIT EXTRAS ---------- */

.bullet-list {
  display: grid;
  gap: 12px;
  margin-top: 30px;
}

.bullet-list li {
  position: relative;
  padding-left: 24px;
  color: var(--ash);
  font-size: 15px;
  line-height: 1.6;
}

.bullet-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-family: var(--font-mono);
}

.spec-rows {
  margin-top: 30px;
  border-top: 1px solid rgba(237, 230, 218, 0.12);
}

.spec-rows__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(237, 230, 218, 0.12);
}

.spec-rows dt {
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.spec-rows dd {
  color: var(--bone);
  font-size: 15px;
  line-height: 1.5;
}

.proof {
  margin-top: 34px;
  padding: 26px 28px;
  border-left: 1px solid var(--gold);
  background-color: rgba(201, 169, 97, 0.06);
}

.proof__label {
  margin-bottom: 10px;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.proof__text {
  color: var(--ash);
  font-size: 15px;
  line-height: 1.7;
}

.proof__text strong {
  color: var(--bone);
}

/* ---------- DATA TABLE ---------- */

.data-table {
  margin-top: var(--space-block);
  overflow-x: auto;
  border: 1px solid rgba(237, 230, 218, 0.1);
}

.data-table table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 18px 22px;
  border-bottom: 1px solid rgba(237, 230, 218, 0.1);
  text-align: left;
}

.data-table th {
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.data-table td {
  color: var(--ash);
  font-size: 14px;
  line-height: 1.5;
}

.data-table tbody tr:hover td {
  color: var(--bone);
}

.data-table__note {
  max-width: 78ch;
  margin-top: var(--space-block-xs);
}

/* ---------- LAB ---------- */

.lab {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-block-sm);
  margin-top: var(--space-block-xl);
  align-items: start;
}

.lab__title {
  margin-bottom: 22px;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.02;
  text-transform: uppercase;
}

.lab__text {
  max-width: 440px;
  margin-bottom: 16px;
  color: var(--ash);
  font-size: 15px;
  line-height: 1.75;
}

.lab__fine {
  margin-top: 18px;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: italic;
  letter-spacing: 0.12em;
}

.lab__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  /* .lab-cell is carbon in every section, including iron ones, so this must not follow .sec--iron. */
  background-color: var(--carbon);
}

.lab-cell {
  padding: 24px 22px;
  background-color: var(--carbon);
  box-shadow: 0 0 0 1px var(--divider);
}

.lab-cell b {
  display: block;
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-medium);
  line-height: 1.3;
}

.lab-cell span {
  display: block;
  margin-top: 7px;
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
}

/* A lab card with a photo: image on top at the storyboard's 16:9, name underneath. */
.lab-cell--media {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.lab-cell__media {
  aspect-ratio: 909 / 508;
  overflow: hidden;
}

.lab-cell__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s ease;
}

.lab-cell--media:hover .lab-cell__media img {
  transform: scale(1.05);
}

.lab-cell__body {
  padding: 20px 22px;
}

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

  .lab-cell--media:hover .lab-cell__media img {
    transform: none;
  }
}

/* ---------- STAT BAND ---------- */

.stat-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px;
  margin-top: var(--space-block);
  background-color: var(--carbon);
}

.sec--iron .stat-band {
  background-color: var(--iron);
}

.stat {
  padding: 40px 26px;
  background-color: var(--carbon);
  box-shadow: 0 0 0 1px var(--divider);
}

/* Below 400px two columns cannot hold a stat label without pushing the document wider than the
   viewport, so the band stacks. */
@media (max-width: 400px) {
  .stat-band {
    grid-template-columns: minmax(0, 1fr);
  }

  .stat {
    padding: 30px 20px;
  }
}

.sec--iron .stat {
  background-color: var(--iron);
}

.stat__value {
  color: var(--bone);
  font-family: var(--font-display);
  font-size: clamp(30px, 2.8vw, 46px);
  line-height: 1;
}

.stat__label {
  margin-top: 14px;
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  line-height: 1.7;
  text-transform: uppercase;
}

.stat-band__note {
  /* 86ch, same as .stage-flow__note: two lines from 1024px up on Capabilities (client, 2026-09-25). */
  max-width: 86ch;
  margin-top: var(--space-block-sm);
}

@media (min-width: 681px) {
  .spec-grid,
  .stage-flow {
    grid-template-columns: repeat(3, 1fr);
  }

  .spec-rows__row {
    grid-template-columns: 220px 1fr;
    gap: 20px;
    align-items: baseline;
  }

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

@media (min-width: 1101px) {
  .spec-grid,
  .stat-band {
    grid-template-columns: repeat(5, 1fr);
  }

  .stage-flow {
    grid-template-columns: repeat(5, 1fr);
  }

  .lab {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 6vw;
  }
}

/* chip-nav.css */
/* Purpose: Sticky chip navigation for long product pages. */

.chip-nav {
  position: sticky;
  /* Set from the live header height by nav.js; the fallback matches the unscrolled bar. */
  top: var(--header-h, 72px);
  z-index: var(--z-sticky);
  padding: 16px 0;
  background-color: rgba(10, 9, 8, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(237, 230, 218, 0.08);
  border-bottom: 1px solid rgba(237, 230, 218, 0.08);
}

.chip-nav__inner {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  /* The fade is the only cue that the strip scrolls — its scrollbar is hidden. */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
}

.chip-nav__inner::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 10px 18px;
  border: 1px solid rgba(237, 230, 218, 0.18);
  border-radius: 0;
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.chip:hover {
  border-color: var(--gold);
  color: var(--bone);
}

/* clients.css */
/* Purpose: Client wall — outlined name cells that fill on hover. */

.clients {
  padding: var(--space-section-md) 0;
  background-color: var(--iron);
}

.clients__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: var(--space-block-lg);
  background-color: rgba(237, 230, 218, 0.1);
  border: 1px solid rgba(237, 230, 218, 0.1);
}

.clients__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 18px;
  background-color: var(--iron);
  color: transparent;
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 30px);
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  -webkit-text-stroke: 1px rgba(237, 230, 218, 0.5);
  transition:
    color var(--duration-slow),
    background-color var(--duration-slow);
}

.clients__cell:hover {
  background-color: var(--carbon);
  color: var(--gold);
  -webkit-text-stroke: 0;
}

/* Touch devices never fire :hover, so the outlined names would stay unreadable. */
@media (hover: none) {
  .clients__cell {
    color: var(--bone);
    -webkit-text-stroke: 0;
  }
}

.clients__cell--muted {
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  line-height: 1.8;
  -webkit-text-stroke: 0;
}

@media (min-width: 881px) {
  .clients__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* contact.css */
/* Purpose: Contact page blocks — cards, image band, emergency, map and cross-link. */

.contact-cards {
  display: grid;
  /* minmax(0, 1fr) rather than 1fr: an `auto` minimum makes the column at least as wide as the
     longest unbreakable token inside it, and marketing.foundry@bhawanisteel.com in 13px mono is
     wider than a 320px viewport once the card padding is added. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin-top: var(--space-block);
  background-color: rgba(237, 230, 218, 0.1);
  border: 1px solid rgba(237, 230, 218, 0.1);
}

.contact-card {
  padding: 40px 34px;
  background-color: var(--carbon);
}

/* Long addresses wrap instead of setting the grid's minimum width. */
.contact-line,
.emergency__line,
.contact-card__lines,
.emergency__lines {
  overflow-wrap: anywhere;
}

@media (max-width: 400px) {
  .contact-card {
    padding: 32px 20px;
  }
}

.sec--iron .contact-card {
  background-color: var(--iron);
}

.contact-card__name {
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 28px;
  text-transform: uppercase;
}

.contact-card__role {
  margin: 8px 0 18px;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.contact-card__text {
  color: var(--ash);
  font-size: 14px;
  line-height: 1.7;
}

.contact-card__lines {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.contact-line {
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  transition: color var(--duration-base) var(--ease-out);
}

.contact-line:hover {
  color: var(--gold);
}

.contact-line--bright {
  color: var(--bone);
}

/* Touch: pad the lines out to a comfortable tap area and take it back off the gaps,
   so the spacing on screen stays where it was. */
@media (hover: none) {
  .contact-line,
  .emergency__line {
    padding-block: 11px;
  }

  .contact-card__lines {
    gap: 0;
    margin-top: 13px;
  }

  .emergency__lines {
    gap: 0;
    margin-top: 15px;
  }

  .cross-link__lines {
    gap: 0 10px;
  }
}

/* ---------- IMAGE BAND ---------- */

.image-band {
  position: relative;
  height: 54vh;
  min-height: 320px;
  overflow: hidden;
}

.image-band__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.08);
}

.image-band__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 9, 8, 0.92) 0%, rgba(10, 9, 8, 0.45) 55%, rgba(10, 9, 8, 0.2));
}

.image-band__inner {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.image-band__statement {
  max-width: 18ch;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 64px);
  line-height: 1;
  text-transform: uppercase;
}

.image-band__statement .mo {
  color: var(--molten);
}

.image-band__statement .go {
  color: var(--gold);
}

.image-band__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px 16px;
  background-color: var(--carbon);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* ---------- EMERGENCY ---------- */

.emergency {
  margin-top: var(--space-block-sm);
  padding: clamp(30px, 4vw, 56px);
  border: 1px solid rgba(255, 107, 26, 0.35);
  background: radial-gradient(900px 400px at 0% 0%, rgba(255, 107, 26, 0.08), transparent 60%);
}

.emergency__eyebrow {
  color: var(--molten);
}

.emergency__eyebrow::before {
  background-color: var(--molten);
}

.emergency__heading {
  margin: 20px 0 22px;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 60px);
  line-height: 1;
  text-transform: uppercase;
}

.emergency__heading .mo {
  color: var(--molten);
}

.emergency__text {
  max-width: 78ch;
}

/* Desktop only: at 78ch the paragraph sat 1-2px short of three lines, so "to:" dropped onto a fourth
   line of its own. 84ch sets it in three at every width from 1024 up, with room for a small copy edit. */
@media (min-width: 881px) {
  .emergency__text {
    max-width: 84ch;
  }
}

.emergency__lines {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.emergency__line {
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  transition: color var(--duration-base) var(--ease-out);
}

.emergency__line:hover {
  color: var(--molten);
}

/* A line with no destination is a label for the ones under it, not a link. */
.emergency__line--label {
  color: var(--molten);
}

.emergency__line--label:hover {
  color: var(--molten);
}

.emergency__note {
  margin-top: 22px;
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.8;
}

/* ---------- MAP ---------- */

.map-split {
  margin-top: var(--space-block-sm);
  align-items: stretch;
}

.map-split__address {
  color: var(--ash);
  font-size: 16px;
  font-style: normal;
  line-height: 1.8;
}

.map-split__address strong {
  color: var(--bone);
}

.map-split__label {
  margin-top: 34px;
}

.map-split__map {
  position: relative;
  min-height: 380px;
  overflow: hidden;
  border: 1px solid rgba(237, 230, 218, 0.1);
}

.map-split__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) invert(0.92) contrast(0.9);
}

/* ---------- CROSS LINK ---------- */

.cross-link {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  padding: clamp(30px, 4vw, 54px);
  border: 1px solid rgba(237, 230, 218, 0.12);
}

.cross-link__heading {
  margin: 16px 0 14px;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.02;
  text-transform: uppercase;
}

.cross-link__text {
  max-width: 64ch;
}

.cross-link__side {
  display: grid;
  align-content: start;
  gap: 26px;
}

/* Email and phone sit on one row, each behind its own glyph. */
.cross-link__lines {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
}

.cross-link__line {
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: normal;
}

.cross-link__line::before {
  margin-right: 6px;
}

.cross-link__line--email::before {
  content: "\2709\FE0F";
}

.cross-link__line--tel::before {
  content: "\260E\FE0F";
}

@media (min-width: 881px) {
  .contact-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .cross-link {
    /* 668 / 40 / 514 of the card's inner width, as laid out in Figma. */
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(24px, 2.8vw, 40px);
  }

  /* The side column starts level with the headline, not the eyebrow. */
  .cross-link__side {
    padding-top: 62px;
  }
}

/* cursor.css */
/* Purpose: Custom cursor dot and trailing ring. Hidden on touch and reduced-motion. */

body.has-custom-cursor {
  cursor: none;
}

.cursor,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  border-radius: var(--radius-full);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.cursor {
  width: 10px;
  height: 10px;
  background-color: var(--molten);
  mix-blend-mode: difference;
  transition:
    width var(--duration-base),
    height var(--duration-base),
    background-color var(--duration-base);
}

.cursor-ring {
  z-index: calc(var(--z-cursor) - 1);
  width: 36px;
  height: 36px;
  border: 1px solid rgba(237, 230, 218, 0.4);
  transition:
    width var(--duration-slow),
    height var(--duration-slow),
    border-color var(--duration-slow);
}

body.is-cursor-hover .cursor {
  width: 64px;
  height: 64px;
  background-color: var(--gold);
}

body.is-cursor-hover .cursor-ring {
  width: 80px;
  height: 80px;
  border-color: transparent;
}

@media (hover: none) {
  .cursor,
  .cursor-ring {
    display: none;
  }

  body.has-custom-cursor {
    cursor: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor,
  .cursor-ring {
    display: none;
  }

  body.has-custom-cursor {
    cursor: auto;
  }
}

/* division-split.css */
/* Purpose: Site gate — the two-division cover screen served at "/". No site nav, own masthead and footer. */

.division-split {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  background-color: var(--carbon);
}

.division-split__masthead {
  display: flex;
  justify-content: center;
  padding: 40px 24px 24px;
}

.division-split__masthead img {
  width: 220px;
  height: auto;
}

.division-split__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.division-split__panel {
  position: relative;
  display: flex;
  flex: 1 1 50%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 56px 24px;
  isolation: isolate;
  text-align: center;
}

/* Molten wash rising off the floor of the hovered panel. */
.division-split__panel::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-base);
  height: 52%;
  background-image: linear-gradient(0deg, rgba(255, 107, 26, 0.2) 0%, rgba(255, 107, 26, 0) 100%);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.65s ease;
}

.division-split__panel + .division-split__panel {
  border-top: 1px solid var(--color-border);
}

.division-split__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
}

.division-split__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Desaturated at rest; the panel hover warms and pushes it in. */
  filter: grayscale(0.5) contrast(1.05) brightness(0.5);
  transform: scale(1.04);
  transition: transform 1.1s cubic-bezier(0.77, 0, 0.18, 1), filter 0.8s ease;
}

.division-split__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 9, 8, 0.62) 0%, rgba(10, 9, 8, 0.48) 45%, rgba(10, 9, 8, 0.9) 100%);
}

.division-split__index {
  position: absolute;
  top: 20px;
  z-index: var(--z-raised);
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  opacity: 0.65;
}

.division-split__panel:first-child .division-split__index {
  left: 24px;
}

.division-split__panel:last-child .division-split__index {
  right: 24px;
}

.division-split__content {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  max-width: 340px;
  flex-direction: column;
  align-items: center;
}

.division-split__icon {
  width: 72px;
  height: 72px;
  color: var(--bone);
  transition: color 0.55s ease, transform 0.7s cubic-bezier(0.77, 0, 0.18, 1);
}

.division-split__label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.division-split__label::before,
.division-split__label::after {
  content: "";
  width: 28px;
  height: 1px;
  background-color: var(--gold);
  opacity: 0.75;
}

.division-split__heading {
  margin-top: 12px;
  color: var(--bone);
  transition: color 0.5s ease;
  font-family: var(--font-display);
  font-size: clamp(30px, 7vw, 42px);
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
}

.division-split__text {
  margin-top: 14px;
  color: rgba(237, 230, 218, 0.72);
  font-size: 15px;
  line-height: 1.6;
}

.division-split__cta {
  margin-top: 26px;
}

.division-split__cta-icon {
  width: 14px;
  height: 14px;
}

.division-split__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 24px;
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}

.division-split__footer-dot {
  opacity: 0.4;
}

@media (min-width: 768px) {
  .division-split__masthead img {
    width: 280px;
  }

  .division-split__icon {
    width: 96px;
    height: 96px;
  }

  .division-split__content {
    max-width: 420px;
  }
}

@media (min-width: 1024px) {
  .division-split__main {
    flex-direction: row;
  }

  .division-split__panel + .division-split__panel {
    border-top: 0;
    border-left: 1px solid var(--color-border);
  }

  .division-split__icon {
    width: 110px;
    height: 110px;
  }

  .division-split__content {
    max-width: 480px;
  }
}

/* ---------- hover choreography, ported from the approved cover build ---------- */

@media (hover: hover) and (min-width: 1024px) {
  /* The halves hold their 50/50 split — the build's flex-grow rules never fire, because its
     panels carry a 50% basis and there is no free space for growth to distribute. */
  .division-split__panel::after {
    opacity: 0;
  }

  .division-split__panel:hover::after {
    opacity: 1;
  }

  .division-split__bg img {
    filter: grayscale(1) contrast(1.05) brightness(0.42);
  }

  .division-split__panel:hover .division-split__bg img {
    filter: grayscale(0.15) contrast(1.1) brightness(0.6);
    transform: scale(1.11);
  }

  .division-split__panel:hover .division-split__icon {
    color: var(--molten);
    transform: translateY(-8px);
  }

  .division-split__panel:hover .division-split__heading {
    color: var(--molten);
  }

  /* The stamp fills from below when anywhere in its half is hovered. */
  .division-split__panel:hover .division-split__cta::after {
    transform: translateY(0);
  }
}

@media (max-width: 1023px) {
  /* Stacked, so both numerals sit on the same edge as in the build. */
  .division-split__panel:last-child .division-split__index {
    right: auto;
    left: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .division-split__bg img,
  .division-split__icon,
  .division-split__heading,
  .division-split__panel::after {
    transition: none;
  }

  .division-split__panel:hover .division-split__bg img {
    transform: scale(1.04);
  }

  .division-split__panel:hover .division-split__icon {
    transform: none;
  }
}

/* editorial.css */
/* Purpose: Editorial blocks — featured post, post grid, topic chips and article prose. */

.feature {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: var(--space-block-sm);
  border: 1px solid rgba(237, 230, 218, 0.1);
  background-color: var(--iron);
}

.feature__image {
  position: relative;
  min-height: 280px;
  overflow: hidden;
}

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

.feature__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(28px, 3vw, 52px);
}

.feature__cat {
  color: var(--molten);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.feature__title {
  margin: 18px 0 16px;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 52px);
  line-height: 1.02;
  text-transform: uppercase;
}

.feature__cta {
  margin-top: 24px;
}

/* ---------- POST GRID ---------- */

.post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: var(--space-block);
  background-color: var(--carbon);
}

.sec--iron .post-grid {
  background-color: var(--iron);
}

.post-card {
  display: block;
  background-color: var(--carbon);
  box-shadow: 0 0 0 1px var(--divider);
}

.sec--iron .post-card {
  background-color: var(--iron);
}

.post-card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.post-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slower) var(--ease-out);
}

.post-card:hover .post-card__image img {
  transform: scale(1.04);
}

.post-card__body {
  padding: 28px 26px 34px;
}

.post-card__cat {
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.post-card__title {
  margin: 14px 0 12px;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.1;
  text-transform: uppercase;
}

.post-card__excerpt {
  color: var(--ash);
  font-size: 14px;
  line-height: 1.65;
}

.post-card__meta {
  display: block;
  margin-top: 18px;
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.post-card--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
}

.post-card--placeholder .post-card__title {
  color: var(--ash);
}

/* ---------- TOPICS ---------- */

.topic-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--space-block-sm);
}

.topic {
  padding: 12px 22px;
  border: 1px solid rgba(237, 230, 218, 0.16);
  border-radius: var(--radius-full);
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Separator between topics. Hidden unless a page asks for the divider-row treatment. */
.topic-sep {
  display: none;
}

/* ---------- ARTICLE ---------- */

.page-hero--article {
  min-height: 78vh;
}

.page-hero__title--article {
  font-size: clamp(34px, 5.2vw, 84px);
}

/* Figma insets the article column 180px inside a 1440 frame. Centring an 1080px column inside the
   shell lands its left edge on that same 180px, so the body sits narrower than the hero above it. */
.article {
  max-width: 1080px;
  margin-inline: auto;
}

.article > * + * {
  margin-top: 17px;
}

.article p {
  color: var(--bone);
  font-size: clamp(16px, 1.32vw, 19px);
  line-height: 1.8;
}

.article .lede,
.article > p:first-child {
  color: var(--bone);
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.6;
}

.article h2,
.article h3 {
  margin-top: 56px;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 32px);
  text-transform: uppercase;
}

.article strong,
.article b {
  color: var(--bone);
  font-weight: var(--weight-medium);
}

/* Figma sets the pull quote in the display face, uppercase, against a molten rule. */
.article blockquote {
  margin: 40px 0;
  padding-left: 26px;
  border-left: 2px solid var(--molten);
  color: var(--bone);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.15;
  text-transform: uppercase;
}

.article ul,
.article ol {
  display: grid;
  gap: 12px;
  padding-left: 22px;
  color: var(--ash);
  font-size: 16px;
  line-height: 1.7;
}

.article ul { list-style: none; }
.article ol { list-style: decimal; }

.article ul li {
  position: relative;
}

.article ul li::before {
  content: "—";
  position: absolute;
  left: -22px;
  color: var(--gold);
}

@media (min-width: 881px) {
  .feature {
    grid-template-columns: 1fr 1fr;
  }

  /* A short run of briefings keeps the three-column card size and simply narrows the grid, rather
     than stretching the cards or leaving an empty cell where a third card would go.
     --post-track is one column of the full grid: the row minus its two gaps. */
  .post-grid {
    --post-track: calc((100% - 2px) / 3);
    grid-template-columns: repeat(3, 1fr);
  }

  .post-grid:not(:has(> :nth-child(2))) {
    grid-template-columns: 1fr;
    width: var(--post-track);
  }

  .post-grid:has(> :nth-child(2)):not(:has(> :nth-child(3))) {
    grid-template-columns: repeat(2, 1fr);
    width: calc(var(--post-track) * 2 + 1px);
  }
}

@media (min-width: 681px) and (max-width: 880px) {
  .post-grid {
    --post-track: calc((100% - 1px) / 2);
    grid-template-columns: repeat(2, 1fr);
  }

  .post-grid:not(:has(> :nth-child(2))) {
    grid-template-columns: 1fr;
    width: var(--post-track);
  }
}

/* error-404.css */
/* Purpose: 404 page — centred copy block sized to hold the footer below the fold. */

/* The header is fixed, so it sits over the top of this block rather than above it. Adding its live
   height (published by nav.js) to the top padding alone shifts the centred copy down by exactly that
   much, landing it on the optical centre of the space the visitor can actually see. svh keeps mobile
   browser chrome from pushing the footer out of reach. */
.error-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding-block: calc(var(--header-h, 72px) + clamp(48px, 9vh, 110px)) clamp(48px, 9vh, 110px);
  text-align: center;
}

/* The status code carries the page, so it runs to the shell width rather than a type-scale step.
   line-height is cut to the cap height because Anton leaves a lot of air under a numeral. */
.error-404__code {
  margin: 0;
  color: var(--molten);
  font-family: var(--font-display);
  font-size: clamp(120px, 26vw, 340px);
  line-height: 0.78;
  letter-spacing: -0.01em;
}

.error-404__heading {
  margin: 28px 0 0;
  max-width: 18ch;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: var(--text-section);
  line-height: var(--leading-tight);
  text-transform: uppercase;
}

.error-404__text {
  max-width: 46ch;
  margin: 24px 0 0;
  color: var(--ash);
  font-size: var(--text-body-l);
  line-height: var(--leading-normal);
}

.error-404__cta {
  margin-top: 40px;
}

/* faq.css */
/* Purpose: FAQ accordion. */

.faq {
  padding: var(--space-section-md) 0;
  background-color: var(--carbon);
}

.faq__list {
  margin-top: var(--space-block);
  border-top: 1px solid rgba(237, 230, 218, 0.12);
}

.faq__item {
  border-bottom: 1px solid rgba(237, 230, 218, 0.12);
}

.faq__question {
  position: relative;
  width: 100%;
  padding: 30px 60px 30px 8px;
  color: var(--bone);
  font-family: var(--font-body);
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: var(--weight-regular);
  text-align: left;
}

.faq__question::after {
  content: "+";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 22px;
  transition: transform var(--duration-slow);
}

.faq__item.is-open .faq__question::after {
  color: var(--molten);
  transform: translateY(-50%) rotate(45deg);
}

.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 500ms cubic-bezier(0.6, 0, 0.2, 1);
}

.faq__answer p {
  max-width: 760px;
  padding: 0 8px 32px;
  color: var(--ash);
  font-size: 15px;
  line-height: 1.75;
}

/* final-cta.css */
/* Purpose: Closing call-to-action band. */

.final-cta {
  position: relative;
  padding: var(--space-section-md) 0;
  overflow: hidden;
  background-color: var(--iron);
  text-align: center;
}

.final-cta__inner {
  position: relative;
  z-index: var(--z-raised);
}

.final-cta__title {
  margin-top: 30px;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: clamp(46px, 7.5vw, 124px);
  line-height: 0.94;
  text-transform: uppercase;
}

.final-cta__title em {
  color: transparent;
  font-style: normal;
  -webkit-text-stroke: 1.5px var(--molten);
}

.final-cta__text {
  max-width: 640px;
  margin: 36px auto 0;
}

.final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: var(--space-block-lg);
}

/* form.css */
/* Purpose: Form section and job cards. */

.form {
  margin-top: var(--space-block);
  padding: clamp(28px, 4vw, 54px);
  background-color: var(--carbon);
  border: 1px solid rgba(237, 230, 218, 0.1);
}

.sec--iron .form {
  background-color: var(--iron-2);
}

.form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.form__field--full {
  grid-column: 1 / -1;
}

.form__field label {
  display: block;
  margin-bottom: 10px;
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.form__field br {
  display: none;
}

.form__field label span {
  color: var(--molten);
}

.form__field input,
.form__field textarea {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid rgba(237, 230, 218, 0.18);
  background-color: transparent;
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color var(--duration-base) var(--ease-out);
}

.form__field input::placeholder,
.form__field textarea::placeholder {
  color: rgba(138, 133, 128, 0.7);
}

.form__field input:focus,
.form__field textarea:focus {
  border-color: var(--gold);
  outline: none;
}

.form__field textarea {
  resize: vertical;
}

.form__dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 31px;
  border: 1px dashed var(--color-border-strong);
  text-align: center;
  transition:
    border-color var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out);
}

.form__dropzone:focus-within {
  border-color: var(--gold);
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.form__dropzone.is-dragover {
  border-color: var(--gold);
  background-color: rgba(201, 169, 97, 0.06);
}

.form__dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.form__dropzone-text {
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
}

.form__dropzone.has-file .form__dropzone-text {
  color: var(--bone);
}

.form__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.form__note {
  margin-top: 22px;
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  line-height: 1.8;
}

.form-status {
  margin-top: var(--space-block-xs);
  padding: 18px 22px;
  border-left: 2px solid var(--gold);
  color: var(--bone);
  font-size: 15px;
}

.form-status--error {
  border-left-color: var(--molten);
}

/* ---------- JOBS ---------- */

.jobs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: var(--space-block);
  background-color: rgba(237, 230, 218, 0.1);
  border: 1px solid rgba(237, 230, 218, 0.1);
}

.job {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 36px 32px 40px;
  background-color: var(--carbon);
}

.sec--iron .job {
  background-color: var(--iron);
}

.job__discipline {
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.job__title {
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 22px;
  text-transform: uppercase;
}

.job__text {
  color: var(--ash);
  font-size: 14px;
  line-height: 1.65;
}

.job__meta {
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.job .btn {
  margin-top: 8px;
}

@media (min-width: 681px) {
  .form__grid {
    grid-template-columns: 1fr 1fr;
  }

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

@media (min-width: 1025px) {
  .jobs {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Contact Form 7 ----------
   CF7 wraps every control in its own span and appends its own status markup;
   these rules fold that output back into the theme's form styling. */
.wpcf7 .form__field .wpcf7-form-control-wrap {
  display: block;
}

.wpcf7-not-valid-tip {
  margin-top: 8px;
  color: var(--molten);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.form__field input[aria-invalid="true"],
.form__field textarea[aria-invalid="true"] {
  border-color: var(--molten);
}

.wpcf7-response-output {
  margin: 24px 0 0;
  padding: 16px 18px;
  border: 1px solid rgba(237, 230, 218, 0.18);
  color: var(--bone);
  font-size: 14px;
  line-height: 1.6;
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--gold);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  border-color: var(--molten);
}

.wpcf7-spinner {
  margin: 0 0 0 14px;
  background-color: var(--gold);
}

.wpcf7 .cta-row {
  align-items: center;
}

/* hero.css */
/* Purpose: Home hero — video bed, WebGL sparks canvas, scaled headline. */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding-top: 104px;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
}

.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.46;
  filter: saturate(1.1) contrast(1.06);
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 9, 8, 0.5) 0%, rgba(10, 9, 8, 0.4) 38%, rgba(10, 9, 8, 0.97) 100%),
    linear-gradient(90deg, rgba(10, 9, 8, 0.72) 0%, rgba(10, 9, 8, 0.12) 60%, rgba(10, 9, 8, 0) 100%);
}

.hero__sparks {
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: var(--shell-width);
  margin-inline: auto;
  padding-bottom: 10vh;
}

.hero__eyebrow {
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: clamp(10px, 1vw, 13px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  opacity: 0.85;
}

.hero__title {
  margin-top: 22px;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: 0.94;
  letter-spacing: 0.004em;
  text-transform: uppercase;
}

.hero__line {
  display: block;
  overflow: hidden;
}

.hero__line > span {
  display: inline-block;
  transform: translateY(110%);
}

.hero__label {
  display: inline-block;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.25vw, 16px);
  font-weight: var(--weight-medium);
  letter-spacing: 0.2em;
}

.hero__label .q {
  color: var(--molten);
  font-size: 0.85em;
  vertical-align: 0.06em;
}

.hero__big {
  display: inline-block;
  color: var(--bone);
  font-size: clamp(42px, 7.8vw, 140px);
  line-height: 0.95;
}

.hero__big .mo {
  color: var(--molten);
}

.hero__small {
  display: inline-block;
  color: var(--gold);
  font-size: clamp(22px, 3vw, 52px);
  line-height: 1.04;
}

/* Home hero only — its lines mix label, display and small sizes, so they need the extra air.
   Inner-page heroes reuse .hero__line at one size and must stay evenly spaced. */
.hero__title .hero__line:nth-child(2) { margin-top: 10px; }
.hero__title .hero__line:nth-child(4) { margin-top: 20px; }

.hero__sub {
  /* Sized so the sentence sets in two lines across the desktop range. 560px did that only while
     --text-lead was small; from 1440 up the type grows to 17-18px and it broke to three. 620px is
     the exact threshold at 1920, so this keeps a margin for any later copy edit. */
  max-width: 660px;
  margin-top: 34px;
  color: rgba(237, 230, 218, 0.78);
  font-size: var(--text-lead);
  line-height: 1.7;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  margin-top: 42px;
}

.hero__scroll {
  position: absolute;
  right: 28px;
  bottom: 26px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.hero__scroll i {
  display: block;
  width: 1px;
  height: 54px;
  background: linear-gradient(180deg, var(--molten), transparent);
  animation: hero-drip 1.8s ease-in-out infinite;
}

@keyframes hero-drip {
  0%   { transform: scaleY(0); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: top; }
  56%  { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__line > span {
    transform: none;
  }
}

/* industries.css */
/* Purpose: Pinned horizontal industries track. */

.industries {
  padding: var(--space-section-md) 0;
  background-color: var(--iron);
}

.industries__pin {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  overflow: hidden;
}

.industries__head {
  padding: 0 4vw var(--space-block-sm);
}

.industries__track {
  display: flex;
  gap: 1px;
  padding-right: 6vw;
  background-color: rgba(237, 230, 218, 0.1);
  will-change: transform;
}

.industry {
  position: relative;
  flex: 0 0 clamp(300px, 30vw, 460px);
  padding: 46px 40px 56px;
  background-color: var(--iron);
  border-top: 1px solid rgba(237, 230, 218, 0.1);
  border-bottom: 1px solid rgba(237, 230, 218, 0.1);
}

.industry__num {
  color: transparent;
  font-family: var(--font-display);
  font-size: clamp(80px, 9vw, 150px);
  line-height: 1;
  -webkit-text-stroke: 1px rgba(237, 230, 218, 0.3);
}

.industry--hot .industry__num {
  color: var(--molten);
  text-shadow: 0 0 60px rgba(255, 107, 26, 0.35);
  -webkit-text-stroke: 0;
}

.industry__tag {
  position: absolute;
  top: 46px;
  right: 34px;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.industry--hot .industry__tag {
  color: var(--molten);
}

.industry__title {
  margin: 26px 0 14px;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 30px);
  text-transform: uppercase;
}

.industry__text {
  color: var(--ash);
  font-size: 14px;
  line-height: 1.7;
}

/* leader.css */
/* Purpose: Leadership profile split with portrait. */

.leader {
  padding: var(--space-section-md) 0;
  background-color: var(--iron);
}

.leader__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-block);
  align-items: center;
}

.leader__image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.leader__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05);
}

.leader__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px 16px;
  background-color: var(--carbon);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.leader__copy .section-head {
  margin: 22px 0 28px;
}

.leader__text {
  margin-bottom: 20px;
  color: var(--ash);
  font-size: 16px;
  line-height: 1.75;
}

.leader__text strong {
  color: var(--bone);
  font-weight: var(--weight-medium);
}

.leader__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 30px;
}

@media (min-width: 981px) {
  .leader__grid {
    grid-template-columns: 0.92fr 1.08fr;
    gap: 6vw;
  }
}

/* marquee.css */
/* Purpose: Infinite casting-families marquee strip. */

.marquee {
  padding: 22px 0;
  overflow: hidden;
  background-color: var(--iron);
  border-top: 1px solid rgba(237, 230, 218, 0.1);
  border-bottom: 1px solid rgba(237, 230, 218, 0.1);
}

.marquee__track {
  display: flex;
  width: max-content;
  /* 36s per copy of the item list, whatever the copy count. */
  animation: marquee-run calc(var(--marquee-copies, 2) / 2 * 36s) linear infinite;
}

.marquee__group {
  display: flex;
  /* Trailing space between copies; the gap lives on each group (not on the
     track) so one group is an exact repeat period for the -50% keyframe. */
  padding-right: var(--marquee-gap, 0px);
}

.marquee__item {
  padding: 0 34px;
  color: transparent;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 38px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  /* .45 measured 3.89:1 against iron and was the site's only contrast failure. .62 clears 4.5:1
     while keeping the type reading as outlined rather than filled. */
  -webkit-text-stroke: 1px rgba(237, 230, 218, 0.62);
}

.marquee__item--hot {
  color: var(--molten);
  -webkit-text-stroke: 0;
}

@keyframes marquee-run {
  to { transform: translateX(-50%); }
}

/* milestones.css */
/* Purpose: Milestone proof-point grid. */

.milestones {
  padding: var(--space-section-md) 0;
  background-color: var(--carbon);
}

.milestones.is-iron {
  background-color: var(--iron);
}

.milestones.is-iron .milestone {
  background-color: var(--iron);
}

.milestones.is-iron .milestone:hover {
  background-color: var(--iron-2);
}

.milestones__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: var(--space-block-lg);
  background-color: rgba(237, 230, 218, 0.1);
  border: 1px solid rgba(237, 230, 218, 0.1);
}

.milestone {
  padding: 48px 38px;
  background-color: var(--carbon);
  transition: background-color var(--duration-slow);
}

.milestone:hover {
  background-color: var(--iron);
}

.milestone__num {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(40px, 4vw, 68px);
  line-height: 1;
}

.milestone__title {
  margin: 18px 0 10px;
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  line-height: 1.35;
  text-transform: none;
}

.milestone__text {
  color: var(--ash);
  font-size: 13.5px;
  line-height: 1.7;
}

@media (min-width: 601px) {
  .milestones__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 981px) {
  .milestones__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* page-hero.css */
/* Purpose: Inner-page hero — image bed, scrim, stepped headline and meta stats. */

.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* Matches the home hero: a full viewport bed with the fixed nav's height reserved at the top, so
     the copy sits the same distance under the header and the section ends exactly at the fold. */
  min-height: 100svh;
  padding-top: 104px;
  overflow: hidden;
}

.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
}

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.06);
}

/* Two passes, same recipe as the home hero: the vertical one seats the section in the page,
   the horizontal one darkens only the side the copy sits on, so the photograph stays readable. */
.page-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1; /* Above the image, below the sparks and the copy — never over the text. */
  background:
    linear-gradient(180deg, rgba(10, 9, 8, 0.62) 0%, rgba(10, 9, 8, 0.45) 38%, rgba(10, 9, 8, 0.96) 100%),
    linear-gradient(90deg, rgba(10, 9, 8, 0.82) 0%, rgba(10, 9, 8, 0.18) 62%, rgba(10, 9, 8, 0) 100%);
}

.page-hero__sparks {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* The bed above reserves the nav's height, so the inner only owns the gap under the copy — the same
   10vh the home hero uses. */
.page-hero__inner {
  position: relative;
  z-index: 3;
  width: var(--shell-width);
  margin-inline: auto;
  padding-block: 0 10vh;
}

.page-hero__title {
  margin: 14px 0 22px;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: clamp(40px, 6.4vw, 104px);
  line-height: 0.96;
  text-transform: uppercase;
}

.page-hero__title .mo { color: var(--molten); }
.page-hero__title .go { color: var(--gold); }

.page-hero__sub {
  max-width: 64ch;
  color: var(--ash);
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: var(--weight-light);
  line-height: 1.6;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 26px;
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-meta b {
  color: var(--bone);
  font-weight: var(--weight-medium);
}

.hero-meta--flow {
  margin-top: var(--space-block-sm);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 30px;
}

.cta-row--center {
  justify-content: center;
}

/* Short laptop screens: tighten the hero so the CTA and the meta row stay above the fold. The bed
   still fills the viewport — only the type and the bottom gap give ground. */
@media (max-height: 850px) and (min-width: 881px) {
  .page-hero {
    padding-top: 96px;
  }

  .page-hero__inner {
    padding-block: 0 7vh;
  }

  .page-hero__title {
    font-size: clamp(36px, 5.4vw, 88px);
  }
}

@media (max-height: 720px) and (min-width: 881px) {
  .page-hero {
    padding-top: 88px;
  }

  .page-hero__inner {
    padding-block: 0 5vh;
  }

  .page-hero__title {
    font-size: clamp(32px, 4.6vw, 72px);
  }
}

/* preloader.css */
/* Purpose: Molten-pour preloader — ladle, stream, filling wordmark, embers. */

.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  overflow: hidden;
  background: radial-gradient(120% 95% at 50% 120%, #22130a 0%, var(--carbon) 58%);
}

.preloader::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12%;
  width: 82vw;
  height: 34vh;
  transform: translateX(-50%);
  background: radial-gradient(50% 62% at 50% 100%, rgba(255, 107, 26, 0.3), transparent 70%);
  filter: blur(6px);
  pointer-events: none;
  animation: pl-pool 2.4s ease-in-out infinite alternate;
}

@keyframes pl-pool {
  0%   { opacity: 0.5; }
  100% { opacity: 0.95; }
}

/* The pool glow fades out as the metal solidifies, just before the lift. Left on, Chrome counts the
   blurred, bottom-anchored glow as a layout shift while the preloader slides up (CLS 0.26 on the
   cover page, desktop PSI 85); faded, it measures 0.013. Client wanted desktop 90+ (2026-09-25). */
.preloader.is-solidified::before {
  animation: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.preloader__kicker {
  z-index: 3;
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.preloader__kicker span span {
  color: var(--molten);
}

.preloader__stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.preloader__ladle {
  transform-origin: center;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5));
  animation: pl-tilt 1.1s ease both;
}

@keyframes pl-tilt {
  0%   { transform: rotate(4deg); }
  100% { transform: rotate(-12deg); }
}

.preloader__ladle .pl-bail { fill: none; stroke: #6b6258; stroke-width: 3; }
.preloader__ladle .pl-body,
.preloader__ladle .pl-lip  { fill: #16120f; stroke: #83786c; stroke-width: 2; }
.preloader__ladle .pl-rim  { filter: drop-shadow(0 0 9px rgba(255, 138, 42, 0.95)); }

.preloader__ladle .pl-drip {
  filter: drop-shadow(0 0 9px rgba(255, 138, 42, 0.95));
  animation: pl-drip 1.1s ease-in-out infinite;
}

@keyframes pl-drip {
  0%, 100% { transform: translateY(0); opacity: 0.9; }
  50%      { transform: translateY(4px); opacity: 1; }
}

.preloader__stream {
  position: relative;
  width: 6px;
  height: 60px;
  margin-top: -6px;
  overflow: hidden;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, rgba(255, 231, 176, 0.15), #FFB257 28%, var(--molten) 72%, rgba(255, 107, 26, 0.55));
  box-shadow: 0 0 16px 2px rgba(255, 107, 26, 0.75);
  animation: pl-sway 1.4s ease-in-out infinite;
}

@keyframes pl-sway {
  0%, 100% { transform: translateX(-1px) scaleX(1); }
  50%      { transform: translateX(1px) scaleX(1.18); }
}

.preloader__stream::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -40%;
  height: 60%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  animation: pl-flow 0.5s linear infinite;
}

@keyframes pl-flow {
  0%   { transform: translateY(-60%); }
  100% { transform: translateY(220%); }
}

.preloader__impact {
  position: relative;
  width: 0;
  height: 0;
}

.preloader__impact i {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full);
  background-color: #FFD9A0;
  box-shadow: 0 0 8px 1px rgba(255, 138, 42, 0.9);
  animation: pl-spark 1s ease-out infinite;
}

@keyframes pl-spark {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--sx, 16px), var(--sy, -18px)) scale(0.2); opacity: 0; }
}

.preloader__impact i:nth-child(odd) { --sx: -18px; }
.preloader__impact i:nth-child(1) { animation-delay: 0s; }
.preloader__impact i:nth-child(2) { animation-delay: 0.15s; --sx: 20px; --sy: -22px; }
.preloader__impact i:nth-child(3) { animation-delay: 0.32s; }
.preloader__impact i:nth-child(4) { animation-delay: 0.5s; --sx: -22px; --sy: -14px; }
.preloader__impact i:nth-child(5) { animation-delay: 0.68s; }
.preloader__impact i:nth-child(6) { animation-delay: 0.84s; --sx: 24px; --sy: -20px; }

.preloader__word {
  position: relative;
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: clamp(58px, 14vw, 190px);
  line-height: 0.82;
  letter-spacing: 0.012em;
}

.preloader__word-ghost {
  display: block;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(237, 230, 218, 0.22);
}

.preloader__word-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  border-top: 2px solid #FFCF8A;
  box-shadow:
    0 0 22px 2px rgba(255, 107, 26, 0.85),
    0 0 64px 10px rgba(255, 107, 26, 0.32);
  will-change: height;
}

.preloader__word-fill > span {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  white-space: nowrap;
  background: linear-gradient(180deg, #FFE7B0 0%, #FFB257 26%, var(--molten) 58%, var(--molten-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 107, 26, 0.45));
}

.preloader__word-fill::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -30%;
  width: 60%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #FFE7B0, transparent);
  opacity: 0.85;
  animation: pl-shimmer 1.2s linear infinite;
}

@keyframes pl-shimmer {
  0%   { transform: translateX(0); }
  100% { transform: translateX(220%); }
}

.preloader__meta {
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 22px;
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
}

.preloader__pct {
  color: var(--bone);
}

.preloader__pct i {
  margin-left: 1px;
  color: var(--molten);
  font-style: normal;
}

.preloader__embers {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.preloader__embers i {
  position: absolute;
  bottom: -12px;
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full);
  background-color: var(--molten);
  box-shadow: 0 0 8px 1px rgba(255, 107, 26, 0.9);
  opacity: 0;
  animation: pl-ember linear infinite;
}

@keyframes pl-ember {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  12%  { opacity: 1; }
  82%  { opacity: 0.65; }
  100% { transform: translateY(-80vh) translateX(var(--dx, 0)) scale(0.35); opacity: 0; }
}

.preloader__embers i:nth-child(1)  { left: 12%; animation-duration: 3.4s; animation-delay: 0.1s; --dx: 14px; }
.preloader__embers i:nth-child(2)  { left: 22%; animation-duration: 4.2s; animation-delay: 0.7s; --dx: -10px; }
.preloader__embers i:nth-child(3)  { left: 33%; animation-duration: 3.0s; animation-delay: 1.1s; --dx: 8px; }
.preloader__embers i:nth-child(4)  { left: 41%; animation-duration: 4.6s; animation-delay: 0.3s; --dx: -16px; }
.preloader__embers i:nth-child(5)  { left: 49%; animation-duration: 3.6s; animation-delay: 1.4s; --dx: 10px; }
.preloader__embers i:nth-child(6)  { left: 57%; animation-duration: 4.0s; animation-delay: 0.5s; --dx: -8px; }
.preloader__embers i:nth-child(7)  { left: 64%; animation-duration: 3.2s; animation-delay: 1.0s; --dx: 12px; }
.preloader__embers i:nth-child(8)  { left: 72%; animation-duration: 4.4s; animation-delay: 0.2s; --dx: -12px; }
.preloader__embers i:nth-child(9)  { left: 80%; animation-duration: 3.5s; animation-delay: 1.3s; --dx: 9px; }
.preloader__embers i:nth-child(10) { left: 88%; animation-duration: 4.1s; animation-delay: 0.8s; --dx: -14px; }
.preloader__embers i:nth-child(11) { left: 28%; animation-duration: 3.8s; animation-delay: 1.7s; --dx: 6px; }
.preloader__embers i:nth-child(12) { left: 68%; animation-duration: 3.9s; animation-delay: 2.0s; --dx: -6px; }

.preloader.is-solidified .preloader__stream {
  opacity: 0;
  transition: opacity var(--duration-slow) ease;
}

.preloader.is-solidified .preloader__ladle {
  transform: rotate(6deg);
  transition: transform 450ms ease;
}

.preloader.is-solidified .preloader__word-fill {
  border-top-color: var(--gold);
  box-shadow: 0 0 30px 4px rgba(201, 169, 97, 0.7);
}

.preloader.is-solidified .preloader__word-fill > span {
  background: linear-gradient(180deg, #F0E2C6, #C9A961 52%, #9C8038);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Phones. Two things break here and neither has anything to do with the pour: the meta row wants
   427px of its own (a 370px sub-line, the 22px gap and the percentage) and gets squeezed instead,
   and .preloader__word's 58px floor beats the 14vw track below about 414px, so the wordmark comes
   out wider than the viewport. The whole overlay is overflow:hidden, so both simply clip rather
   than scroll. Nothing above 520px is touched. */
@media (max-width: 520px) {
  .preloader {
    gap: 24px;
    padding-inline: 20px;
  }

  /* Letting vw win again keeps the wordmark inside the padding all the way down. */
  .preloader__word {
    font-size: clamp(42px, 14vw, 190px);
  }

  /* One row cannot hold both, so they stack and centre instead of the sub-line shrinking into a
     ragged two lines pinned to the left edge. */
  .preloader__meta {
    flex-direction: column;
    gap: 10px;
  }

  .preloader__sub {
    letter-spacing: 0.16em;
    text-align: center;
  }
}

/* products.css */
/* Purpose: Casting list with cursor-following image preview. */

.products {
  padding: var(--space-section-md) 0;
  background-color: var(--carbon);
}

.products__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: var(--space-block-lg);
}

.products__lede {
  max-width: 340px;
}

.products__list {
  border-top: 1px solid rgba(237, 230, 218, 0.12);
}

.product-row {
  position: relative;
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 30px;
  padding: 34px 10px;
  border-bottom: 1px solid rgba(237, 230, 218, 0.12);
  transition: padding var(--duration-slow);
}

.product-row:hover {
  padding-left: 24px;
}

.product-row__idx {
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
}

.product-row__name {
  color: var(--bone);
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 56px);
  line-height: 1;
  text-transform: uppercase;
  transition:
    color var(--duration-slow),
    transform var(--duration-slow);
}

.product-row:hover .product-row__name {
  color: var(--molten);
  transform: translateX(18px);
}

.product-row__meta {
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  line-height: 1.9;
  text-align: right;
  text-transform: uppercase;
}

.product-preview {
  position: fixed;
  z-index: 700;
  width: 330px;
  height: 225px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.85);
  transition:
    opacity var(--duration-slow),
    transform var(--duration-slow);
}

.product-preview.is-visible {
  opacity: 1;
  transform: scale(1);
}

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

@media (max-width: 760px) {
  .product-row {
    grid-template-columns: 60px 1fr;
  }

  .product-row__meta {
    grid-column: 2;
    text-align: left;
  }
}

/* sec.css */
/* Purpose: Generic inner-page section rhythm, lead block, split, people, phases, group and certs. */

.sec {
  position: relative;
  padding: var(--space-section) 0;
}

.sec--iron {
  /* Divider hairlines sit in the grid gaps, so they resolve over the section, not over the cells. */
  --divider: #2C2926;

  background-color: var(--iron);
}

/* Optional full-bleed photo behind a section, dimmed so copy stays readable. */
.sec--photo {
  isolation: isolate;
}

.sec--photo > .shell {
  position: relative;
  z-index: 1;
}

.sec__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
}

.sec__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, var(--carbon), rgba(10, 9, 8, 0.82));
}

.sec--centred {
  text-align: center;
}

.sec--centred__text {
  max-width: 60ch;
  margin: 24px auto 0;
}

.sec--tight-bottom {
  padding-bottom: 0;
}

.sec-lead {
  max-width: 760px;
}

/* Form sections only, desktop only: at 760px the Contact intro left "right." alone on a fifth line
   from 1440 up. 800px sets it in four at every desktop width; the headings above wrap the same. */
@media (min-width: 881px) {
  .sec-lead--form {
    max-width: 800px;
  }
}

.split__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px 16px;
  background-color: var(--carbon);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.cta-row--tight {
  margin-top: 24px;
}

.sec-lead__text {
  margin-top: 24px;
}

/* ---------- SPLIT ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-block);
  align-items: center;
}

.split__text {
  margin-top: 24px;
}

.split__media {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(237, 230, 218, 0.1);
  background-color: var(--iron);
}

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

.split__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 42px;
  background-color: rgba(237, 230, 218, 0.1);
  border: 1px solid rgba(237, 230, 218, 0.1);
}

.split__fact {
  padding: 24px 26px;
  background-color: var(--carbon);
  color: var(--bone);
  font-size: 13.5px;
  line-height: 1.55;
}

.sec--iron .split__fact {
  background-color: var(--iron);
}

.split__events {
  margin-top: var(--space-block-sm);
}

.event {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 34px 0;
  border-top: 1px solid rgba(237, 230, 218, 0.12);
}

.event:last-child {
  border-bottom: 1px solid rgba(237, 230, 218, 0.12);
}

.event__when {
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.event__title {
  margin-bottom: 10px;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 22px;
  text-transform: uppercase;
}

.event__text {
  max-width: 74ch;
  color: var(--ash);
  font-size: 14.5px;
  line-height: 1.64;
}

/* ---------- PEOPLE ---------- */

.people {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: var(--space-block);
  background-color: rgba(237, 230, 218, 0.1);
  border: 1px solid rgba(237, 230, 218, 0.1);
}

.person {
  background-color: var(--carbon);
}

.sec--iron .person {
  background-color: var(--iron);
}

.person__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.person__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.12) contrast(1.05);
}

.person__body {
  padding: 30px 30px 36px;
}

.person__name {
  margin-bottom: 5px;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 27px;
  text-transform: uppercase;
}

.person__role {
  margin-bottom: 16px;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.person__desc {
  color: var(--ash);
  font-size: 13.5px;
  line-height: 1.62;
}

/* ---------- PHASES ---------- */

.phases {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: var(--space-block);
  background-color: rgba(237, 230, 218, 0.1);
  border: 1px solid rgba(237, 230, 218, 0.1);
}

.phase {
  padding: 42px 34px;
  background-color: var(--carbon);
}

.sec--iron .phase {
  background-color: var(--iron);
}

.phase__when {
  margin-bottom: 16px;
  color: var(--molten);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.phase__title {
  margin-bottom: 14px;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 24px;
  text-transform: uppercase;
}

.phase__text {
  color: var(--ash);
  font-size: 14px;
  line-height: 1.62;
}

/* ---------- GROUP ---------- */

.group-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: var(--space-block);
  /* Hairlines come from the cells (see .spec-grid). The container matches the cells, so a last row
     that is not full — 9 companies since Devshree Metals was removed (2026-09-25) — leaves a quiet
     framed space instead of a pale block. */
  background-color: var(--carbon);
  border: 1px solid var(--divider);
}

.sec--iron .group-grid {
  background-color: var(--iron);
}

.group-company {
  padding: 28px 22px;
  background-color: var(--carbon);
  box-shadow: 0 0 0 1px var(--divider);
  text-align: center;
}

.sec--iron .group-company {
  background-color: var(--iron);
}

.group-company--current {
  background-color: var(--iron-2);
}

.group-company__name {
  margin-bottom: 8px;
  min-height: 38px;
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-medium);
  line-height: 1.3;
}

.group-company--current .group-company__name {
  color: var(--gold);
  font-weight: var(--weight-semibold);
}

.group-company__year {
  color: var(--molten);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
}

/* ---------- CERTIFICATIONS ---------- */

.cert-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: var(--space-block-sm);
}

.cert-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border: 1px solid var(--gold);
  border-radius: 40px;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cert-pill::before {
  content: "\2713";
  color: var(--molten);
}

.cert-note {
  max-width: 80ch;
  margin-top: var(--space-block-sm);
}

.cert-note strong {
  color: var(--bone);
}

@media (min-width: 901px) {
  .split {
    grid-template-columns: 1.02fr 0.98fr;
    gap: 5vw;
  }

  .split__media {
    min-height: 480px;
  }

  .split--reversed .split__copy { order: 2; }
  .split--reversed .split__media { order: 1; }

  .event {
    grid-template-columns: 120px 1fr;
    gap: 30px;
  }

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

  .group-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* site-footer.css */
/* Purpose: Site footer — brand blurb, link columns, contact and legal strip. */

.site-footer {
  padding: var(--space-block-2xl) 0 var(--space-block-sm);
  background-color: var(--carbon);
  border-top: 1px solid rgba(237, 230, 218, 0.12);
}

.site-footer__grid {
  display: grid;
  /* minmax(0, 1fr): a long unbroken email must never widen the column past the viewport. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-block-lg) 8vw;
}

/* Below 400px two columns leave ~130px each — too narrow for the contact emails, so stack them. */
@media (max-width: 400px) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.site-footer__grid a {
  overflow-wrap: anywhere;
}

.site-footer__logo img {
  width: 160px;
  height: auto;
  margin-bottom: 20px;
}

.site-footer__title {
  margin-bottom: 20px;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* Bone at rest, not ash (client, 2026-09-24): the footer copy read too dim. */
.site-footer__blurb,
.site-footer__grid a {
  display: block;
  color: var(--bone);
  font-size: 14px;
  line-height: 2;
}

.site-footer__grid a {
  transition: color var(--duration-base) var(--ease-out);
}

/* Column links sit further apart than the lines inside a single wrapped link.
   The padding is tap area, not spacing — it is taken back out of the margin. */
.site-footer__col a {
  padding-block: 8px;
  margin-bottom: 3px;
}

.site-footer__col a:last-child {
  margin-bottom: 0;
}

/* Links and emails pick up the site's molten accent on hover. */
.site-footer__grid a:hover,
.site-footer__grid a:focus-visible {
  color: var(--molten);
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding: 0;
  list-style: none;
}

.site-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(237, 230, 218, 0.18);
  border-radius: var(--radius-full);
  transition: border-color var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out);
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
  border-color: var(--gold);
  background-color: rgba(237, 230, 218, 0.06);
}

.site-footer__social img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  margin-top: var(--space-block-xl);
  padding-top: 30px;
  border-top: 1px solid rgba(237, 230, 218, 0.08);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (min-width: 881px) {
  .site-footer__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 5vw;
  }
}

/* site-nav.css */
/* Purpose: Fixed site navigation, mobile toggle and full-screen overlay menu. */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 850;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px clamp(20px, 4vw, 52px);
  border-bottom: 1px solid transparent;
  pointer-events: none;
  transition:
    padding var(--duration-slow) ease,
    background-color var(--duration-slow) ease,
    border-color var(--duration-slow) ease;
}

.site-nav.is-scrolled {
  padding: 10px clamp(20px, 4vw, 52px);
  background-color: rgba(10, 9, 8, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(237, 230, 218, 0.09);
}

.site-nav__logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  pointer-events: auto;
}

/* Sized by width, not height, so the logo reads the same whatever the artwork's proportions:
   160px at rest, 132px once the bar turns sticky. */
.site-nav__logo img {
  width: 160px;
  height: auto;
  transition: width var(--duration-slow) ease;
}

.site-nav.is-scrolled .site-nav__logo img {
  width: 132px;
}

.site-nav__pill {
  display: flex;
  align-items: center;
  gap: 34px;
  pointer-events: auto;
}

.site-nav__menu {
  display: flex;
  align-items: center;
  gap: 30px;
}

.site-nav__menu a {
  position: relative;
  padding: 6px 0;
  color: var(--bone); /* bone at rest, molten on hover — matches the footer (client, 2026-09-24) */
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color var(--duration-slow) ease;
}

.site-nav__menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: var(--molten);
  transition: width var(--duration-slow) ease;
}

.site-nav__menu a:hover,
.site-nav__menu a:focus-visible {
  color: var(--molten);
}

.site-nav__menu a:hover::after,
.site-nav__menu a:focus-visible::after {
  width: 100%;
}

.site-nav__menu .current-menu-item > a,
.site-nav__menu .current_page_item > a {
  color: var(--bone);
}

.site-nav__menu .current-menu-item > a::after,
.site-nav__menu .current_page_item > a::after {
  width: 100%;
  background-color: var(--gold);
}

.site-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  background-color: var(--gold);
  color: var(--carbon);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--duration-slow) ease;
}

.site-nav__cta::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: var(--molten);
}

.site-nav__cta:hover {
  background-color: var(--bone);
}

.nav-toggle {
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 8900;
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  pointer-events: auto;
  transition: top var(--duration-slow) ease;
}

.site-nav.is-scrolled ~ .nav-toggle {
  top: 7px;
}

.nav-toggle span {
  display: block;
  width: 28px;
  height: 2px;
  background-color: var(--bone);
  transition:
    transform var(--duration-slow) ease,
    opacity var(--duration-base) ease;
}

.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 8800;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 0 9vw;
  background-color: var(--carbon);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 450ms ease;
}

.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav-overlay a {
  padding: 5px 0;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: clamp(30px, 7.5vw, 58px);
  line-height: 1.04;
  text-transform: uppercase;
  transition: color var(--duration-slow) ease;
}

.nav-overlay a:hover,
.nav-overlay .current-menu-item > a {
  color: var(--molten);
}

.nav-overlay__cta {
  margin-top: 26px;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.4vw, 15px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nav-overlay__meta {
  margin-top: 36px;
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  line-height: 2.1;
  text-transform: uppercase;
}

@media (max-width: 1180px) {
  .site-nav__pill {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }
}

/* typography.css */
/* Purpose: Shared editorial primitives — eyebrow, section heading, lede, reveal state. */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 42px;
  height: 1px;
  background-color: var(--gold);
}

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

.section-head {
  color: var(--bone);
  font-family: var(--font-display);
  font-size: var(--text-section);
  line-height: var(--leading-tight);
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.section-head--spaced {
  margin-top: 22px;
}

.section-head .mo {
  color: var(--molten);
}

.section-head .go {
  color: var(--gold);
}

.lede {
  color: var(--ash);
  font-size: var(--text-body-l);
  font-weight: var(--weight-light);
  line-height: 1.65;
}

/* Paragraph break inside a single copy field — the ACF text fields are inline-only, so a seed
   marks the second paragraph with <span class="para"> rather than a real <p>. */
.lede .para {
  display: block;
  margin-top: 18px;
}

/* Keeps a hyphenated term whole. "INR-priced" was breaking after its hyphen and starting the next
   line on "priced.", which reads as two words. The ACF copy fields are inline-only and wp_kses
   allows span[class], so the seed wraps the term rather than relying on a non-breaking hyphen —
   the body face is a latin subset and U+2011 is not guaranteed to be in it. */
.nb {
  white-space: nowrap;
}

.reveal {
  opacity: 0;
  transform: translateY(46px);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* voices.css */
/* Purpose: Voice-of-customer quote columns. */

.voices {
  padding: var(--space-section-md) 0;
  background-color: var(--carbon);
}

.voices__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-block-xl);
  margin-top: var(--space-block-lg);
}

.voice__quote {
  color: var(--bone);
  font-size: clamp(18px, 1.6vw, 23px);
  font-weight: var(--weight-light);
  line-height: 1.55;
}

.voice__quote em {
  color: var(--molten);
  font-style: normal;
}

.voice__who {
  margin-top: 26px;
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  line-height: 2;
  text-transform: uppercase;
}

.voice__who::before {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  margin-bottom: 16px;
  background-color: var(--gold);
}

@media (min-width: 981px) {
  .voices__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 5vw;
  }
}