/* ==========================================================================
   Target Global — Bargi Sabz Import Export & Ayanda Sazan
   Productive & Industrial — corporate landing page
   Self-contained: self-hosted font, no CDN, no build step.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Typeface — Inter, self-hosted variable font (no CDN, no external request).
   Four subsets so a reader downloads only what their language needs: Uzbek and
   English pull latin (+ latin-ext for the o‘/g‘ punctuation), Russian pulls
   cyrillic. One variable file per subset covers every weight from 100 to 900.
   -------------------------------------------------------------------------- */
/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-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;
}

/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-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;
}

/* cyrillic */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* cyrillic-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* --------------------------------------------------------------------------
   0b. IBM Plex Mono — the technical voice.
   Everything that is a *measurement* is set in this face: section numerals,
   eyebrows, ISO certificate numbers, the test-report tables, stat figures,
   filter counts. Previously these fell back to `ui-monospace`, so the ISO
   numbers rendered in a different typeface on every operating system.
   Same four unicode-range subsets as Inter, so a Uzbek reader still downloads
   only latin + latin-ext and a Russian reader only pulls cyrillic on demand.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plexmono-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: "Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plexmono-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: "Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plexmono-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plexmono-400-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plexmono-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: "Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plexmono-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: "Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plexmono-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plexmono-500-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/plexmono-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: "Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/plexmono-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: "Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/plexmono-600-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/plexmono-600-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand navy — sampled from the company profile deck */
  --navy-950: #071324;
  --navy-900: #0b1e39;
  --navy-800: #12294c;
  --navy-700: #17355f;
  --navy-600: #1e4478;
  --navy-500: #27578f;
  --navy-400: #3d70ad;

  /* Steel greys — the fabrication palette */
  --steel-900: #1a1f26;
  --steel-700: #3c4553;
  --steel-500: #6b7686;
  --steel-400: #8e99a8;
  --steel-300: #b6c0cd;
  --steel-200: #d5dce5;
  --steel-100: #e9eef4;
  --steel-050: #f4f7fa;

  /* Safety amber — from the crane girders and hard hats on site.
     Three of these are fills; only amber-800/700 are legible as TEXT on paper.
     Measured against #ffffff: 500 = 1.98:1, 600 = 2.85:1, 700 = 4.02:1,
     800 = 5.19:1. Against navy-900 #0b1e39: amber-400 = 11.4:1.
     Never set amber-500/600 as body text on a light surface — use --accent-ink. */
  --amber-800: #8a5310;
  --amber-700: #a86611;
  --amber-600: #d98617;
  --amber-500: #f2a41f;
  --amber-400: #ffbe45;
  --amber-glow: rgba(242, 164, 31, 0.28);

  --white: #ffffff;
  --paper: #f7f9fc;

  /* Semantic */
  --bg: var(--white);
  --bg-alt: var(--steel-050);
  --bg-deep: var(--navy-900);
  --ink: var(--steel-900);
  --ink-soft: var(--steel-700);
  --ink-mute: var(--steel-500);
  --rule: var(--steel-200);
  --brand: var(--navy-600);
  --accent: var(--amber-500);

  /* Type scale — fluid */
  --fs-display: clamp(2.35rem, 6.6vw, 5.75rem);
  --fs-h1: clamp(2.1rem, 5.2vw, 3.6rem);
  --fs-h2: clamp(1.72rem, 3.4vw, 2.9rem);
  --fs-h3: clamp(1.18rem, 2.1vw, 1.5rem);
  --fs-h4: 1.0625rem;
  --fs-body: clamp(0.975rem, 0.94rem + 0.18vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-tiny: 0.75rem;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, "Liberation Mono", monospace;

  /* Spacing */
  --gap: 1.25rem;
  --pad-x: clamp(1.15rem, 4vw, 3.5rem);
  --section-y: clamp(3.5rem, 7.5vw, 8rem);
  --maxw: 1280px;
  --maxw-narrow: 820px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(11, 30, 57, 0.06),
    0 2px 6px rgba(11, 30, 57, 0.05);
  --shadow-md: 0 4px 10px rgba(11, 30, 57, 0.07),
    0 12px 28px rgba(11, 30, 57, 0.09);
  --shadow-lg: 0 10px 24px rgba(11, 30, 57, 0.1),
    0 30px 64px rgba(11, 30, 57, 0.16);

  /* Shape language. This page sells welded angular steel; the old sheet used
     seven radii topped by a 999px pill (85 instances, more than every other
     radius combined). Structure is now square and only *controls* get a radius,
     so the pill reads as "you can press this" instead of as decoration. */
  --radius-sm: 0px;
  --radius: 0px;
  --radius-lg: 0px;
  --radius-ctl: 2px;

  /* Spacing scale — 8px base. Replaces the 30 ad-hoc gap values measured
     across the old sheet. Use these, not new one-off numbers. */
  --s-1: 0.5rem;   /*  8 */
  --s-2: 1rem;     /* 16 */
  --s-3: 1.5rem;   /* 24 */
  --s-4: 2.5rem;   /* 40 */
  --s-5: 4rem;     /* 64 */
  --s-6: 6rem;     /* 96 */
  --s-7: 8rem;     /* 128 */

  /* 12-column grid on the existing 1168px inner measure */
  --cols: 12;
  --gutter: var(--s-3);

  /* Section rhythm, three tiers by weight rather than one flat 108px */
  --sec-y-lg: clamp(4rem, 8vw, 8rem);
  --sec-y: clamp(3rem, 6vw, 6rem);
  --sec-y-sm: clamp(2.5rem, 4.5vw, 4.5rem);

  /* ---- Surface-scoped contrast roles -------------------------------------
     The old sheet coloured eyebrows and numerals with a fixed token, so a
     section that forgot its `--section--deep` class rendered navy-500 on navy
     at 2.26:1. These are redefined per surface below, so an element inherits
     the correct one from whatever it sits on and cannot render the wrong one. */
  --eyebrow-fg: var(--amber-800);   /* 5.19:1 on white */
  --num-fg: var(--amber-800);       /* 5.19:1 — these numerals are small, so
                                       amber-700 (4.02:1) is not enough */
  --rule-strong: #c3ccd8;
  --accent-ink: var(--amber-800);   /* amber as *text* on a light surface */
  --on-surface: var(--ink);
  --on-surface-soft: var(--ink-soft);
  --on-surface-mute: var(--ink-mute);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.45s;

  --header-h: 74px;
  --topbar-h: 38px;
  --mobilebar-h: 0px;
}

/* Dark surfaces flip the contrast roles. Any section, band, card or footer
   that paints itself dark opts in by setting these — see section 3. */
.section--deep,
.section--dark,
.band,
.footer,
.card--dark,
.cert,
.form,
.hero {
  --eyebrow-fg: var(--amber-400);   /* 11.4:1 on navy-900 */
  --num-fg: var(--amber-400);
  --accent-ink: var(--amber-400);
  --rule-strong: rgba(255, 255, 255, 0.22);
  --on-surface: #ffffff;
  --on-surface-soft: var(--steel-200);
  --on-surface-mute: var(--steel-300);
}

@media (max-width: 1040px) {
  :root {
    --topbar-h: 0px;
  }
}

@media (max-width: 720px) {
  :root {
    --header-h: 62px;
  }
}

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.68;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv05" 1; /* single-storey l — clearer at small sizes */
}

body.is-locked {
  overflow: hidden;
}

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

a {
  color: var(--navy-600);
  text-decoration: none;
}

a:hover {
  color: var(--navy-500);
}

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

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

h1,
h2,
h3,
h4,
h5 {
  margin: 0 0 0.6em;
  line-height: 1.14;
  letter-spacing: -0.021em;
  font-weight: 700;
  color: var(--navy-900);
  text-wrap: balance;
}

p {
  margin: 0 0 1.05em;
  text-wrap: pretty;
}

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

ul,
ol {
  margin: 0 0 1em;
  padding-left: 1.15em;
}

li {
  margin-bottom: 0.4em;
}

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

::selection {
  background: var(--navy-600);
  color: var(--white);
}

:focus-visible {
  outline: 3px solid var(--amber-500);
  outline-offset: 3px;
  border-radius: var(--radius-ctl);
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -100px;
  z-index: 200;
  background: var(--navy-900);
  color: var(--white);
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 0;
  color: var(--white);
}

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

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.wrap--narrow {
  max-width: var(--maxw-narrow);
}

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

.section--alt {
  background: var(--bg-alt);
}

.section--deep {
  background: var(--navy-900);
  color: var(--steel-200);
}

.section--deep h2,
.section--deep h3,
.section--deep h4 {
  color: var(--white);
}

.section--tint {
  background: linear-gradient(180deg, var(--white) 0%, var(--steel-050) 100%);
}

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

.stack > * + * {
  margin-top: 1rem;
}

/* Section heading block */
.head {
  max-width: 760px;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

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

/* Reads its colour from the surface (see --eyebrow-fg in section 1) rather
   than hardcoding navy-500 — which is how the stats band ended up rendering
   its label at 2.26:1, the worst contrast on the page. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--eyebrow-fg);
  margin-bottom: 0.9rem;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
  flex: none;
}

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

.head h2 {
  font-size: var(--fs-h2);
  margin-bottom: 0.5rem;
}

.head .lede {
  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  color: var(--ink-soft);
  margin-bottom: 0;
}

.section--deep .head .lede {
  color: var(--steel-300);
}

/* Two-tone display heading, echoing the source deck */
.duo {
  display: block;
}

/* The old device tinted the second half of every heading to steel-400, which
   measured 2.89:1 on white and 2.69:1 on the tinted sections — below even the
   3:1 large-text floor — and it was applied so mechanically that it split
   "Sertifikatlar" into "Serti"/"fikatlar" in all three languages.
   The split now carries in WEIGHT, not tone, so it survives translation and
   costs no contrast: both halves render at full ink. */
.duo em {
  font-style: normal;
  font-weight: 300;
  color: inherit;
  letter-spacing: -0.014em;
}

.section--deep .duo em {
  color: inherit;
  opacity: 0.92;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--navy-600);
  --btn-fg: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.82rem 1.5rem;
  min-height: 48px;
  border-radius: var(--radius-ctl);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 650;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    background-color 0.25s var(--ease), color 0.25s var(--ease);
  box-shadow: var(--shadow-sm);
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, var(--navy-500), var(--navy-700));
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

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

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

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

.btn--accent {
  --btn-bg: var(--amber-500);
  --btn-fg: var(--navy-950);
}

.btn--accent::after {
  background: linear-gradient(120deg, var(--amber-400), var(--amber-600));
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--navy-700);
  box-shadow: inset 0 0 0 1.5px var(--steel-300);
}

.btn--ghost::after {
  background: var(--navy-900);
}

.btn--ghost:hover {
  --btn-fg: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--navy-900), var(--shadow-md);
}

.btn--on-dark {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.38);
}

.btn--on-dark::after {
  background: var(--white);
}

.btn--on-dark:hover {
  --btn-fg: var(--navy-900);
}

.btn__ico {
  flex: none;
  width: 18px;
  height: 18px;
  transition: transform 0.3s var(--ease);
}

.btn:hover .btn__ico {
  transform: translateX(3px);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */
.scrollbar {
  position: fixed;
  inset: 0 auto auto 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--amber-500), var(--navy-400));
  z-index: 120;
  will-change: transform;
}

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 110;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0);
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease),
    height 0.35s var(--ease);
}

.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(7, 19, 36, 0.72) 0%,
    rgba(7, 19, 36, 0) 100%
  );
  opacity: 1;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}

.header.is-stuck {
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 var(--rule), 0 8px 26px rgba(11, 30, 57, 0.07);
}

.header.is-stuck::before {
  opacity: 0;
}

.header__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
  z-index: 1;
}

/* Wordmark */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--white);
  transition: color 0.35s var(--ease);
  flex: none;
}

.header.is-stuck .brand {
  color: var(--navy-900);
}

.brand__mark {
  flex: none;
  width: 38px;
  height: 38px;
}

.brand__mark .mk-ring {
  transition: stroke 0.35s var(--ease);
  stroke: rgba(255, 255, 255, 0.55);
}

.header.is-stuck .brand__mark .mk-ring {
  stroke: var(--steel-300);
}

.brand__mark .mk-core {
  fill: var(--amber-500);
}

.brand__mark .mk-beam {
  stroke: currentColor;
}

.brand__txt {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand__name {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.brand__sub {
  font-size: 0.585rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.72;
  font-weight: 600;
  margin-top: 3px;
}

/* Desktop nav */
.nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.nav a {
  position: relative;
  padding: 0.5rem 0.72rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  border-radius: var(--radius-sm);
  transition: color 0.3s var(--ease);
  white-space: nowrap;
}

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

.nav a::after {
  content: "";
  position: absolute;
  left: 0.72rem;
  right: 0.72rem;
  bottom: 0.24rem;
  height: 2px;
  background: var(--amber-500);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.32s var(--ease);
}

.nav a:hover,
.nav a.is-active {
  color: var(--white);
}

.header.is-stuck .nav a:hover,
.header.is-stuck .nav a.is-active {
  color: var(--navy-700);
}

.nav a:hover::after,
.nav a.is-active::after {
  transform: scaleX(1);
}

.header__cta {
  display: inline-flex;
}

.header__cta .btn {
  padding: 0.6rem 1.15rem;
  min-height: 42px;
  font-size: 0.875rem;
  white-space: nowrap;
}

/* Burger */
.burger {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: color 0.35s var(--ease);
  flex: none;
}

.header.is-stuck .burger {
  color: var(--navy-900);
}

.burger span {
  display: block;
  position: relative;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: background-color 0.2s var(--ease);
}

.burger span::before,
.burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.32s var(--ease);
}

.burger span::before {
  top: -7px;
}

.burger span::after {
  top: 7px;
}

.burger[aria-expanded="true"] span {
  background: transparent;
}

.burger[aria-expanded="true"] span::before {
  transform: translateY(7px) rotate(45deg);
}

.burger[aria-expanded="true"] span::after {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1040px) {
  .nav,
  .header__cta {
    display: none;
  }
  .burger {
    display: inline-flex;
  }
}

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 115;
  display: grid;
  grid-template-rows: 1fr;
  background: var(--navy-950);
  color: var(--white);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.5s var(--ease-out), visibility 0s linear 0.5s;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drawer.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.55s var(--ease-out), visibility 0s;
}

.drawer__inner {
  padding: calc(var(--header-h) + 1.75rem) var(--pad-x) 2.5rem;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.drawer nav {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.drawer nav a {
  padding: 1.02rem 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.22rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  opacity: 0;
  transform: translateY(14px);
}

.drawer.is-open nav a {
  animation: drawerIn 0.5s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 45ms + 120ms);
}

.drawer nav a span {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--amber-500);
  opacity: 0.8;
}

@keyframes drawerIn {
  to {
    opacity: 1;
    transform: none;
  }
}

.drawer__foot {
  margin-top: auto;
  padding-top: 2rem;
  display: grid;
  gap: 0.9rem;
}

.drawer__foot a.mini {
  color: var(--steel-300);
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.drawer__foot a.mini:hover {
  color: var(--white);
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--navy-950);
  color: var(--white);
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  /* Let the photograph actually read. It used to sit at 0.5 under a double
     scrim, which buried the steel frame that is the whole point of the shot.
     The grade below keeps it cool and industrial rather than washed out, and
     the legibility work is done by the directional scrim instead of by
     flattening the image. */
  opacity: 0.82;
  filter: saturate(0.85) contrast(1.08) brightness(0.92);
  transform: scale(1.08);
  will-change: transform;
}

/* Fallback engineered backdrop when no photo is present */
.hero__fallback {
  position: absolute;
  inset: 0;
  z-index: -4;
  background: radial-gradient(
      120% 90% at 78% 12%,
      var(--navy-700) 0%,
      var(--navy-900) 42%,
      var(--navy-950) 100%
    );
}

.hero__truss {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  /* Quieter now that the photograph carries the image. The drawn frame is an
     accent over the real structure, not a substitute for it. */
  opacity: 0.28;
  pointer-events: none;
}

.hero__truss path,
.hero__truss line,
.hero__truss polyline {
  stroke: rgba(255, 255, 255, 0.34);
  stroke-width: 1.15;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.hero__truss .beam-accent {
  stroke: var(--amber-500);
  stroke-width: 2;
  opacity: 0.85;
}

/* Draw-in animation for the truss */
.js .hero__truss [data-draw] {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  animation: drawLine 2.4s var(--ease-out) forwards;
  animation-delay: calc(var(--d, 0) * 1ms + 260ms);
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Directional, not flat. Heavy on the left where the headline sits, opening
     up towards the right so the structure stays visible; a soft floor keeps the
     stat strip readable and hands off cleanly to the ticker below. */
  background: linear-gradient(
      100deg,
      rgba(7, 19, 36, 0.94) 0%,
      rgba(7, 19, 36, 0.82) 34%,
      rgba(7, 19, 36, 0.42) 66%,
      rgba(7, 19, 36, 0.28) 100%
    ),
    linear-gradient(
      180deg,
      rgba(7, 19, 36, 0.55) 0%,
      rgba(7, 19, 36, 0) 26%,
      rgba(7, 19, 36, 0) 58%,
      rgba(7, 19, 36, 0.82) 100%
    );
}

/* On a phone the text runs the full width, so the horizontal opening would put
   the headline over the bright side of the photograph. Go back to a vertical
   scrim there. */
@media (max-width: 860px) {
  .hero__scrim {
    background: linear-gradient(
      180deg,
      rgba(7, 19, 36, 0.82) 0%,
      rgba(7, 19, 36, 0.72) 40%,
      rgba(7, 19, 36, 0.86) 100%
    );
  }
}

/* Cursor-tracking spotlight (desktop only, subtle) */
.hero__spot {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  background: radial-gradient(
    460px circle at var(--mx, 50%) var(--my, 40%),
    rgba(242, 164, 31, 0.14),
    transparent 68%
  );
}

.hero:hover .hero__spot {
  opacity: 1;
}

.hero__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: calc(var(--header-h) + 3.5rem) var(--pad-x) clamp(2.5rem, 6vw, 4rem);
}

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 0.95rem 0.45rem 0.55rem;
  border-radius: var(--radius-ctl);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.94);
  margin-bottom: 1.4rem;
}

.hero__kicker b {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-ctl);
  background: var(--amber-500);
  color: var(--navy-950);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
  flex: none;
}

@media (max-width: 430px) {
  .hero__kicker {
    font-size: 0.64rem;
    letter-spacing: 0.11em;
    gap: 0.5rem;
  }
}

.hero h1 {
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.033em;
  color: var(--white);
  margin: 0 0 1.15rem;
  max-width: 16ch;
  font-weight: 800;
}

.hero h1 .thin {
  display: block;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: -0.028em;
}

.hero h1 .amber {
  color: var(--amber-400);
}

.hero__tagline {
  font-size: clamp(0.82rem, 1.5vw, 1rem);
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 500;
  margin-bottom: 1.4rem;
}

.hero__lede {
  max-width: 58ch;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: rgba(255, 255, 255, 0.86);
  margin-bottom: 0;
}

.hero .btn-row {
  margin-top: 2rem;
}

/* Hero quick facts */
.hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  overflow: hidden;
}

.hero__fact {
  background: rgba(7, 19, 36, 0.58);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 1.05rem 1.15rem;
  transition: background-color 0.35s var(--ease);
}

.hero__fact:hover {
  background: rgba(30, 68, 120, 0.62);
}

.hero__fact b {
  display: block;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--white);
  line-height: 1;
  margin-bottom: 0.35rem;
}

.hero__fact span {
  font-size: 0.735rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
}

.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 1.15rem;
  transform: translateX(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.hero__cue i {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.65),
    rgba(255, 255, 255, 0)
  );
  animation: cue 2.1s var(--ease) infinite;
}

@keyframes cue {
  0%,
  100% {
    transform: scaleY(0.35);
    transform-origin: 50% 0;
    opacity: 0.35;
  }
  50% {
    transform: scaleY(1);
    transform-origin: 50% 0;
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .hero__cue {
    display: none;
  }
  .hero {
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   7. Marquee (capability ticker)
   -------------------------------------------------------------------------- */
.ticker {
  background: var(--navy-950);
  border-block: 1px solid rgba(255, 255, 255, 0.09);
  overflow: hidden;
  padding-block: 0.95rem;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ticker__track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: ticker 46s linear infinite;
  will-change: transform;
}

.ticker:hover .ticker__track {
  animation-play-state: paused;
}

.ticker__group {
  display: flex;
  align-items: center;
  flex: none;
}

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding-inline: 1.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}

.ticker__item::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber-500);
  opacity: 0.9;
  flex: none;
}

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

/* --------------------------------------------------------------------------
   8. Stat band
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.stat {
  position: relative;
  padding-left: 1.15rem;
  border-left: 2px solid var(--rule-strong);
  transition: border-color 0.4s var(--ease);
}

.stat:hover {
  border-left-color: var(--amber-500);
}

.stat b {
  display: flex;
  align-items: baseline;
  gap: 0.06em;
  font-family: var(--font-mono);
  font-size: clamp(2.4rem, 5.6vw, 3.9rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--on-surface);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.55rem;
}

/* The figure and its unit both live inside <b>, so the label rule below —
   which used to be `.stat span` — was also matching them and rendering a
   50px/800 white numeral as 13px/600 grey with the unit orphaned on its own
   line. These two rules re-assert the numeral; the label rule is now scoped
   with `>` so it can only ever match the direct-child label span. */
.stat b > span {
  display: inline;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

.stat b .suffix {
  font-size: 0.46em;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent-ink);
  transform: translateY(-0.06em);
}

.stat > span {
  display: block;
  font-size: 0.815rem;
  color: var(--on-surface-soft);
  font-weight: 600;
  letter-spacing: 0.045em;
  line-height: 1.45;
  max-width: 22ch;
}

/* --------------------------------------------------------------------------
   9. Split content (about)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* A grid item defaults to min-width:auto, so any column containing a wide
   data table sizes to that table's min-content and pushes the whole document
   sideways. These minmax(0,…) tracks and this min-width let the table's own
   .table-wrap scroll container do its job instead. */
.split > * {
  min-width: 0;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .split--wide-text {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
  .split--flip .split__media {
    order: -1;
  }
}

.split__media {
  position: relative;
}

.figure {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--steel-100);
  aspect-ratio: 4 / 3;
}

.figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}

.figure:hover img {
  transform: scale(1.05);
}

.figure figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.6rem 1.25rem 1rem;
  background: linear-gradient(0deg, rgba(7, 19, 36, 0.88), transparent);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.figure--inset {
  position: absolute;
  right: -1.25rem;
  bottom: -1.75rem;
  width: 46%;
  aspect-ratio: 1;
  border: 5px solid var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 2;
}

@media (max-width: 620px) {
  .figure--inset {
    display: none;
  }
}

/* A badge floating over media */
.badge-float {
  position: absolute;
  left: -0.9rem;
  top: 1.6rem;
  z-index: 3;
  background: var(--amber-500);
  color: var(--navy-950);
  padding: 0.7rem 1.05rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-weight: 800;
  line-height: 1.1;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  max-width: 190px;
}

.badge-float small {
  display: block;
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}

.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease);
  overflow: hidden;
  height: 100%;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--amber-500), var(--navy-500));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s var(--ease);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--steel-300);
}

.card:hover::before {
  transform: scaleX(1);
}

.card__ico {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: var(--navy-900);
  color: var(--amber-400);
  margin-bottom: 1.1rem;
  transition: background-color 0.4s var(--ease), transform 0.4s var(--ease);
}

.card:hover .card__ico {
  background: var(--navy-600);
  transform: translateY(-2px) rotate(-4deg);
}

.card__ico svg {
  width: 24px;
  height: 24px;
}

.card h3 {
  font-size: var(--fs-h3);
  margin-bottom: 0.5rem;
}

.card h4 {
  font-size: var(--fs-h4);
  margin-bottom: 0.45rem;
  color: var(--navy-700);
}

.card p {
  color: var(--ink-soft);
  font-size: 0.945rem;
  margin-bottom: 0;
}

.card--dark {
  background: var(--navy-800);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--steel-200);
}

.card--dark h3,
.card--dark h4 {
  color: var(--white);
}

.card--dark p {
  color: var(--steel-300);
}

/* Five principles in a 3-column auto-fit grid always left one empty cell and
   1,170px of very tall cards. As a stacked list they read like numbered
   clauses in a specification — which is the right register for this page —
   and the section loses roughly a third of its height. */
.cards--principles {
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule-strong);
}

.cards--principles .card {
  display: grid;
  grid-template-columns: 3.5rem 46px minmax(0, 20ch) minmax(0, 1fr);
  align-items: start;
  gap: 0 clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1.5rem, 2.6vw, 2rem) 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  height: auto;
}

.cards--principles .card::before {
  display: none;
}

.cards--principles .card:hover {
  transform: none;
  box-shadow: none;
  background: var(--steel-050);
}

.cards--principles .card__num {
  position: static;
  align-self: center;
  font-size: 0.95rem;
}

.cards--principles .card__ico {
  margin-bottom: 0;
  align-self: center;
}

.cards--principles .card h3 {
  margin: 0;
  align-self: center;
  font-size: 1.06rem;
}

.cards--principles .card p {
  margin: 0;
  color: var(--ink-soft);
  align-self: center;
  max-width: 68ch;
}

@media (max-width: 900px) {
  .cards--principles .card {
    grid-template-columns: 2.6rem 1fr;
    gap: 0.35rem 1rem;
  }
  .cards--principles .card__ico {
    display: none;
  }
  .cards--principles .card h3 {
    grid-column: 2;
  }
  .cards--principles .card p {
    grid-column: 2;
    margin-top: 0.3rem;
  }
}

.card--num {
  padding-top: 2.9rem;
}

/* Was steel-100 on white = 1.17:1, made legible only on :hover — so on every
   touch device these numerals were permanently invisible. It is now a real
   label rather than a watermark: mono, legible at rest, amber on hover. */
.card__num {
  position: absolute;
  top: 1.15rem;
  right: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  color: var(--num-fg);
  transition: color 0.4s var(--ease);
  pointer-events: none;
  letter-spacing: 0.06em;
}

.card:hover .card__num {
  color: var(--amber-600);
}

.card--dark .card__num,
.section--deep .card__num {
  color: var(--amber-400);
}

/* Value cards with left rail */
.rail {
  position: relative;
  padding-left: 1.6rem;
}

.rail::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 3px;
  border-radius: var(--radius-ctl);
  background: var(--steel-200);
  transition: background-color 0.4s var(--ease);
}

.rail:hover::before {
  background: var(--amber-500);
}

.section--deep .rail::before {
  background: rgba(255, 255, 255, 0.18);
}

/* --------------------------------------------------------------------------
   11. Services grid + modal
   -------------------------------------------------------------------------- */
.svc-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.9rem;
}

/* `display:inline-flex` turns the " (11)" text node into an anonymous flex
   item and strips its leading whitespace, which is why the counts rendered
   as "Barcha yo'nalishlar(11)" despite the space being present in the markup.
   An explicit gap restores it, and the count is now its own styled token. */
.chip {
  padding: 0.6rem 1.1rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border-radius: var(--radius-ctl);
  border: 1px solid var(--rule-strong);
  background: var(--white);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
    color 0.2s var(--ease);
  white-space: nowrap;
}

.chip__n {
  font-family: var(--font-mono);
  font-size: 0.78em;
  font-weight: 500;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}

.chip:hover {
  border-color: var(--navy-600);
  color: var(--navy-800);
}

.chip[aria-pressed="true"] {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: var(--white);
}

.chip[aria-pressed="true"] .chip__n {
  color: var(--amber-400);
}

.svc-grid {
  display: grid;
  gap: clamp(0.9rem, 1.8vw, 1.35rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 305px), 1fr));
}

.svc {
  position: relative;
  text-align: left;
  width: 100%;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.55rem 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease), opacity 0.35s var(--ease);
  overflow: hidden;
  min-height: 100%;
}

.svc::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -34px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--amber-glow), transparent 70%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}

.svc:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--navy-400);
}

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

.svc__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem;
}

.svc__ico {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-ctl);
  display: grid;
  place-items: center;
  background: var(--steel-050);
  color: var(--navy-600);
  border: 1px solid var(--rule);
  flex: none;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}

.svc:hover .svc__ico {
  background: var(--navy-800);
  color: var(--amber-400);
  border-color: var(--navy-800);
}

.svc__ico svg {
  width: 22px;
  height: 22px;
}

.svc__idx {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--steel-400);
  letter-spacing: 0.06em;
  padding-top: 0.35rem;
}

.svc h3 {
  font-size: 1.06rem;
  line-height: 1.3;
  margin: 0.15rem 0 0;
  color: var(--navy-900);
}

/* The heading holds the real control; its ::after stretches over the whole
   card so the entire tile is clickable while staying valid, focusable HTML. */
.svc__trigger {
  font: inherit;
  color: inherit;
  text-align: left;
  padding: 0;
  cursor: pointer;
}

.svc__trigger::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius);
}

.svc__trigger:focus-visible {
  outline: none;
}

.svc__trigger:focus-visible::after {
  outline: 3px solid var(--amber-500);
  outline-offset: -3px;
}

.svc p {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0;
  flex: 1;
}

.svc__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--navy-600);
  margin-top: 0.4rem;
}

.svc__more svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s var(--ease);
}

.svc:hover .svc__more svg {
  transform: translateX(4px);
}

.svc.is-hidden {
  display: none;
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s;
}

.modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s var(--ease), visibility 0s;
}

.modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(7, 19, 36, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.modal__panel {
  position: relative;
  width: min(760px, 100%);
  max-height: min(86svh, 780px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  transform: translateY(22px) scale(0.98);
  transition: transform 0.42s var(--ease-out);
}

.modal.is-open .modal__panel {
  transform: none;
}

.modal__close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--steel-050);
  color: var(--ink-soft);
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
  z-index: 2;
}

.modal__close:hover {
  background: var(--navy-900);
  color: var(--white);
  transform: rotate(90deg);
}

.modal__eyebrow {
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--navy-500);
  margin-bottom: 0.6rem;
  display: block;
}

.modal__panel h3 {
  font-size: clamp(1.4rem, 3vw, 1.95rem);
  margin-bottom: 1rem;
  padding-right: 3rem;
}

.modal__panel ul {
  padding-left: 0;
  list-style: none;
  margin-top: 1.15rem;
}

.modal__panel ul li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.62rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.modal__panel ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 2px;
  background: var(--amber-500);
}

.modal__meta {
  margin-top: 1.5rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.72rem;
  border-radius: var(--radius-ctl);
  background: var(--steel-050);
  border: 1px solid var(--rule);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--navy-600);
}

/* --------------------------------------------------------------------------
   12. Process stepper (hot-dip galvanizing)
   -------------------------------------------------------------------------- */
.process {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
}

@media (min-width: 960px) {
  .process {
    grid-template-columns: 320px 1fr;
    align-items: start;
  }
}

.steps {
  position: relative;
  display: grid;
  gap: 0.15rem;
}

.steps::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  background: rgba(255, 255, 255, 0.14);
}

.steps__fill {
  position: absolute;
  left: 17px;
  top: 22px;
  width: 2px;
  background: var(--amber-500);
  transition: height 0.55s var(--ease);
  height: 0;
}

.step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 0.62rem 0.7rem 0.62rem 0;
  text-align: left;
  width: 100%;
  border-radius: var(--radius-sm);
  color: var(--steel-300);
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
  z-index: 1;
}

.step:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.05);
}

.step__dot {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--navy-800);
  border: 2px solid rgba(255, 255, 255, 0.2);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  transition: all 0.35s var(--ease);
}

.step__label {
  font-size: 0.94rem;
  font-weight: 650;
  letter-spacing: -0.005em;
}

.step[aria-selected="true"] {
  color: var(--white);
}

.step[aria-selected="true"] .step__dot {
  background: var(--amber-500);
  border-color: var(--amber-500);
  color: var(--navy-950);
  box-shadow: 0 0 0 6px rgba(242, 164, 31, 0.16);
}

.step-panel {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  min-height: 250px;
}

.step-panel__body[hidden] {
  display: none;
}

.step-panel__body {
  animation: fadeUp 0.5s var(--ease-out);
}

.step-panel h3 {
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  margin-bottom: 0.35rem;
}

.step-panel .step-index {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber-400);
  display: block;
  margin-bottom: 0.6rem;
}

.step-panel p {
  color: var(--steel-300);
  margin-bottom: 0;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Spec strip */
.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin-top: 1.75rem;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius);
  overflow: hidden;
}

.spec {
  background: var(--navy-900);
  padding: 1rem 1.1rem;
}

.spec b {
  display: block;
  font-size: 1.28rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 0.2rem;
}

.spec span {
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--steel-400);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   13. Tabs (QA/QC)
   -------------------------------------------------------------------------- */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.9rem;
  padding-bottom: 0.1rem;
}

.tab {
  position: relative;
  padding: 0.75rem 1.05rem;
  min-height: 46px;
  font-size: 0.885rem;
  font-weight: 650;
  color: var(--ink-mute);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color 0.28s var(--ease), background-color 0.28s var(--ease);
  white-space: nowrap;
}

.tab::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: -1px;
  height: 3px;
  border-radius: var(--radius-ctl) var(--radius-ctl) 0 0;
  background: var(--navy-600);
  transform: scaleX(0);
  transition: transform 0.32s var(--ease);
}

.tab:hover {
  color: var(--navy-700);
  background: var(--steel-050);
}

.tab[aria-selected="true"] {
  color: var(--navy-800);
}

.tab[aria-selected="true"]::after {
  transform: scaleX(1);
}

/* The five quality panels are 263–480px tall, so switching tabs grew or shrank
   the section by up to 217px and threw everything below it up the screen under
   the reader's cursor. Stacking every panel into one grid cell sizes the
   container to the tallest panel once, so selection never reflows the page.
   The `hidden` attribute stays on inactive panels — assistive tech and the tab
   order still ignore them — it just no longer collapses the box. */
[data-tabs] {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: minmax(0, 1fr);
}

[data-tabs] > .tabs {
  grid-row: 1;
  min-width: 0;
}

/* min-width:0 is load-bearing. A grid item defaults to min-width:auto, so the
   two wide data tables inside these panels sized the column to their
   min-content (792px) and pushed the whole document to 811px at every
   viewport under 820. With this, .table-wrap scrolls internally as designed. */
[data-tabs] > .tabpanel {
  grid-row: 2;
  grid-column: 1;
  min-width: 0;
}

.tabpanel[hidden] {
  display: block;
  visibility: hidden;
  pointer-events: none;
}

.tabpanel {
  animation: fadeUp 0.45s var(--ease-out);
}

/* --------------------------------------------------------------------------
   14. Accordion (machinery)
   -------------------------------------------------------------------------- */
.acc {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
}

.acc + .acc {
  margin-top: 0.7rem;
}

.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  text-align: left;
  font-weight: 700;
  color: var(--navy-800);
  font-size: 1rem;
  transition: background-color 0.28s var(--ease);
  min-height: 60px;
}

.acc__btn:hover {
  background: var(--steel-050);
}

.acc__btn .n {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--num-fg);
  flex: none;
  font-weight: 700;
}

.acc__btn .t {
  flex: 1;
}

.acc__btn .chev {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--steel-500);
  transition: transform 0.35s var(--ease), color 0.35s var(--ease);
}

.acc__btn[aria-expanded="true"] {
  background: var(--steel-050);
}

.acc__btn[aria-expanded="true"] .chev {
  transform: rotate(180deg);
  color: var(--navy-600);
}

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s var(--ease);
}

.acc__panel.is-open {
  grid-template-rows: 1fr;
}

.acc__panel > div {
  overflow: hidden;
}

.acc__inner {
  padding: 0 1.3rem 1.35rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.1rem;
}

.pill-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.pill-list li {
  margin: 0;
  padding: 0.42rem 0.85rem;
  border-radius: var(--radius-ctl);
  background: var(--steel-050);
  border: 1px solid var(--rule);
  font-size: 0.84rem;
  color: var(--ink-soft);
  font-weight: 550;
  transition: all 0.25s var(--ease);
}

.pill-list li:hover {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: var(--white);
}

/* --------------------------------------------------------------------------
   15. Certifications
   -------------------------------------------------------------------------- */
.certs {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}

.cert {
  position: relative;
  border-radius: var(--radius);
  padding: 1.75rem 1.6rem;
  background: linear-gradient(160deg, var(--navy-800), var(--navy-950));
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--steel-200);
  overflow: hidden;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
  height: 100%;
}

.cert::before {
  content: "";
  position: absolute;
  right: -50px;
  top: -50px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.7s var(--ease-out);
}

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

.cert:hover::before {
  transform: scale(1.28);
}

.cert__seal {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(242, 164, 31, 0.15);
  border: 1.5px solid var(--amber-500);
  color: var(--amber-400);
  margin-bottom: 1.15rem;
}

.cert__seal svg {
  width: 24px;
  height: 24px;
}

.cert h3 {
  color: var(--white);
  font-size: 1.18rem;
  margin-bottom: 0.15rem;
}

.cert__std {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--amber-400);
  letter-spacing: 0.09em;
  display: block;
  margin-bottom: 0.9rem;
}

.cert p {
  font-size: 0.9rem;
  color: var(--steel-300);
  margin-bottom: 1.15rem;
}

.cert__dl {
  display: grid;
  gap: 0.42rem;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.79rem;
}

.cert__dl div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.cert__dl dt {
  color: var(--steel-400);
  letter-spacing: 0.04em;
}

.cert__dl dd {
  margin: 0;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  text-align: right;
  word-break: break-all;
}

/* Data table */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  -webkit-overflow-scrolling: touch;
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  min-width: 560px;
}

table.data caption {
  caption-side: top;
  text-align: left;
  padding: 1rem 1.15rem 0.35rem;
  font-weight: 700;
  color: var(--navy-800);
  font-size: 0.95rem;
}

table.data th,
table.data td {
  padding: 0.72rem 1.15rem;
  text-align: left;
  border-bottom: 1px solid var(--rule);
}

table.data thead th {
  background: var(--steel-050);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
  white-space: nowrap;
}

table.data tbody tr:last-child td {
  border-bottom: 0;
}

table.data tbody tr {
  transition: background-color 0.2s var(--ease);
}

table.data tbody tr:hover {
  background: var(--steel-050);
}

table.data td {
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

table.data td:first-child {
  font-weight: 650;
  color: var(--navy-800);
}

.table-note {
  font-size: 0.79rem;
  color: var(--ink-mute);
  margin-top: 0.8rem;
}

/* --------------------------------------------------------------------------
   16. Gallery
   -------------------------------------------------------------------------- */
/* ---- Shared photographic grade ------------------------------------------
   The 33 site photographs were shot across many days, cameras and light
   conditions: adjacent tiles swung from cold blue-sky to warm sodium interior.
   Exactly one image on the old page carried a filter (the hero). Grading them
   all to one curve makes the set read as one body of work — which is what a
   reference list has to look like — without touching the files on disk.
   Lifted to full colour on hover so the detail is still inspectable. */
.gal img,
.svc__media img,
.figure img,
.band__media img {
  filter: saturate(0.9) contrast(1.05);
  transition: transform 0.75s var(--ease-out), opacity 0.4s var(--ease),
    filter 0.45s var(--ease);
}

.gal:hover img,
.gal:focus-visible img,
.svc:hover .svc__media img {
  filter: saturate(1) contrast(1);
}

.gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 0.7rem;
}

.gal {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--navy-800);
  cursor: zoom-in;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  padding: 0;
}

/* Portrait originals are framed a little high so people, machinery and tower
   tops survive the thumbnail crop. The lightbox always shows them uncropped. */
.gal.is-tall img {
  object-position: center 32%;
}

.gal:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  z-index: 2;
}

.gal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.75s var(--ease-out), opacity 0.4s var(--ease);
}

.gal:hover img {
  transform: scale(1.07);
}

.gal__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.9rem 0.9rem 0.75rem;
  background: linear-gradient(0deg, rgba(7, 19, 36, 0.92), transparent);
  color: var(--white);
  font-size: 0.79rem;
  font-weight: 600;
  text-align: left;
  line-height: 1.35;
  transform: translateY(6px);
  opacity: 0;
  transition: transform 0.38s var(--ease), opacity 0.38s var(--ease);
}

.gal:hover .gal__cap,
.gal:focus-visible .gal__cap {
  transform: none;
  opacity: 1;
}

.gal__tag {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-ctl);
  background: rgba(7, 19, 36, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--amber-400);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gal.is-hidden {
  display: none;
}

/* Placeholder shown when the photo file is missing */
.gal__ph {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  text-align: center;
  padding: 1rem;
  background: repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.035) 0 10px,
      transparent 10px 20px
    ),
    linear-gradient(160deg, var(--navy-700), var(--navy-950));
  color: var(--steel-400);
}

.gal.is-missing .gal__ph {
  display: grid;
}

.gal.is-missing img {
  opacity: 0;
}

.gal__ph svg {
  width: 30px;
  height: 30px;
  margin: 0 auto 0.5rem;
  opacity: 0.55;
}

.gal__ph b {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--steel-300);
  line-height: 1.4;
}

.gal__ph small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--steel-500);
  margin-top: 0.35rem;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(4, 11, 22, 0.96);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s var(--ease), visibility 0s;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem clamp(0.85rem, 3vw, 1.75rem);
  color: var(--steel-300);
  font-size: 0.8rem;
}

.lightbox__count {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}

.lightbox__stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0 clamp(0.5rem, 3vw, 4.5rem);
  min-height: 0;
}

.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  animation: lbIn 0.42s var(--ease-out);
}

@keyframes lbIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.lightbox__foot {
  padding: 0.9rem clamp(0.85rem, 3vw, 1.75rem) 1.35rem;
  text-align: center;
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 600;
}

.lb-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
  flex: none;
}

.lb-btn:hover {
  background: var(--amber-500);
  color: var(--navy-950);
}

.lb-btn svg {
  width: 20px;
  height: 20px;
}

.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.lb-nav--prev {
  left: clamp(0.35rem, 1.5vw, 1.1rem);
}

.lb-nav--next {
  right: clamp(0.35rem, 1.5vw, 1.1rem);
}

@media (max-width: 620px) {
  .lb-nav {
    top: auto;
    bottom: -0.35rem;
    transform: none;
  }
  .lb-nav--prev {
    left: 22%;
  }
  .lb-nav--next {
    right: 22%;
  }
}

/* --------------------------------------------------------------------------
   17. Timeline
   -------------------------------------------------------------------------- */
.timeline {
  position: relative;
  display: grid;
  gap: 1.5rem;
  padding-left: 2.1rem;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--steel-200);
}

.section--deep .timeline::before {
  background: rgba(255, 255, 255, 0.15);
}

.tl {
  position: relative;
}

.tl::before {
  content: "";
  position: absolute;
  left: -2.1rem;
  top: 0.42rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--navy-500);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}

.section--deep .tl::before {
  background: var(--navy-900);
}

.tl:hover::before {
  border-color: var(--amber-500);
  transform: scale(1.18);
}

.tl b {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--amber-600);
  margin-bottom: 0.25rem;
}

.section--deep .tl b {
  color: var(--amber-400);
}

.tl h4 {
  font-size: 1.02rem;
  margin-bottom: 0.25rem;
}

.tl p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 0;
}

.section--deep .tl p {
  color: var(--steel-300);
}

/* --------------------------------------------------------------------------
   18. Contact
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.25rem);
}

@media (min-width: 940px) {
  .contact-grid {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

.cinfo {
  display: grid;
  gap: 1.35rem;
  align-content: start;
}

.cbit {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.cbit__ico {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-ctl);
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--amber-400);
  transition: background-color 0.35s var(--ease);
}

.cbit:hover .cbit__ico {
  background: rgba(242, 164, 31, 0.16);
}

.cbit__ico svg {
  width: 20px;
  height: 20px;
}

.cbit h4 {
  font-size: 0.74rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--steel-400);
  margin-bottom: 0.3rem;
  font-weight: 700;
}

.cbit p,
.cbit a {
  margin: 0;
  color: var(--white);
  font-size: 0.985rem;
  line-height: 1.55;
  font-weight: 550;
}

.cbit a:hover {
  color: var(--amber-400);
}

/* Form */
.form {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3.5vw, 2.35rem);
}

.field {
  margin-bottom: 1.05rem;
}

.field label {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel-300);
  margin-bottom: 0.45rem;
}

.field label .req {
  color: var(--amber-400);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.82rem 1rem;
  min-height: 50px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  background: rgba(7, 19, 36, 0.5);
  color: var(--white);
  font-size: 0.97rem;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.field textarea {
  resize: vertical;
  min-height: 128px;
  line-height: 1.6;
}

.field select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b6c0cd' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 18px;
  padding-right: 2.6rem;
}

.field select option {
  background: var(--navy-900);
  color: var(--white);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--steel-500);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--amber-500);
  background: rgba(7, 19, 36, 0.75);
  outline: none;
}

.field.has-error input,
.field.has-error textarea,
.field.has-error select {
  border-color: #e2574c;
}

.field .err {
  display: none;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: #ff9a90;
  font-weight: 600;
}

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

.form__row {
  display: grid;
  gap: 0 1rem;
}

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

.form__note {
  font-size: 0.79rem;
  color: var(--steel-400);
  margin-top: 1rem;
  margin-bottom: 0;
}

.form__status {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(242, 164, 31, 0.14);
  border: 1px solid rgba(242, 164, 31, 0.4);
  color: var(--amber-400);
  font-size: 0.87rem;
  font-weight: 600;
}

.form__status[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--navy-950);
  color: var(--steel-400);
  padding-top: clamp(2.75rem, 6vw, 4.25rem);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.footer__grid {
  display: grid;
  gap: 2.25rem;
  padding-bottom: 2.5rem;
}

@media (min-width: 760px) {
  .footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
}

@media (min-width: 1040px) {
  .footer__grid {
    grid-template-columns: 1.7fr 1fr 1fr 1.2fr;
  }
}

.footer h5 {
  color: var(--white);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  font-weight: 700;
}

.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer li {
  margin-bottom: 0.55rem;
}

.footer a {
  color: var(--steel-400);
  font-size: 0.9rem;
  transition: color 0.25s var(--ease), padding-left 0.25s var(--ease);
  display: inline-block;
}

.footer a:hover {
  color: var(--white);
  padding-left: 4px;
}

.footer__about p {
  font-size: 0.9rem;
  max-width: 42ch;
  color: var(--steel-400);
}

.footer .brand {
  color: var(--white);
  margin-bottom: 1.1rem;
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-block: 1.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
}

.footer__bottom p {
  margin: 0;
}

/* Roomier tap targets for the dense link lists on touch screens. */
@media (max-width: 900px) {
  .footer li {
    margin-bottom: 0.2rem;
  }

  /* 0.5rem left these at 40px measured; 44px is the accessible minimum. */
  .footer a {
    padding-block: 0.7rem;
  }

  .cbit p,
  .cbit a {
    font-size: 1.02rem;
  }

  .cbit a {
    display: inline-block;
    padding-block: 0.28rem;
  }
}

.iso-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1.1rem;
}

.iso-chip {
  padding: 0.28rem 0.65rem;
  border-radius: var(--radius-ctl);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.68rem;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  color: var(--steel-300);
}

/* Back to top */
.totop {
  position: fixed;
  right: clamp(0.85rem, 2.5vw, 1.6rem);
  bottom: clamp(0.85rem, 2.5vw, 1.6rem);
  z-index: 100;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--navy-800);
  color: var(--white);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.9);
  transition: all 0.4s var(--ease);
}

.totop.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.totop:hover {
  background: var(--amber-500);
  color: var(--navy-950);
}

.totop svg {
  width: 20px;
  height: 20px;
}

/* --------------------------------------------------------------------------
   20. Scroll reveal
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
  transition-delay: calc(var(--rd, 0) * 1ms);
}

.js [data-reveal="left"] {
  transform: translateX(-30px);
}

.js [data-reveal="right"] {
  transform: translateX(30px);
}

.js [data-reveal="scale"] {
  transform: scale(0.95);
}

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

/* --------------------------------------------------------------------------
   21. Motion & print preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .js .hero__truss [data-draw] {
    stroke-dashoffset: 0 !important;
  }

  .ticker__track {
    animation: none !important;
  }

  .hero__media img {
    transform: none !important;
  }
}

@media print {
  .header,
  .drawer,
  .totop,
  .scrollbar,
  .ticker,
  .hero__cue,
  .lightbox,
  .modal,
  .svc-filters {
    display: none !important;
  }

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

  .section,
  .section--deep,
  .section--alt {
    background: #fff !important;
    color: #000 !important;
    padding-block: 1.5rem;
    break-inside: avoid;
  }

  .hero {
    min-height: auto;
    color: #000;
    background: #fff;
  }

  .hero__scrim,
  .hero__truss,
  .hero__media,
  .hero__fallback {
    display: none;
  }

  .hero h1,
  .section--deep h2,
  .section--deep h3 {
    color: #000 !important;
  }

  a {
    color: #000;
    text-decoration: underline;
  }
}

/* ==========================================================================
   22. v2 — topbar, language switcher, photo bands, coverage map, process,
       richer contact. Everything below builds on the tokens above.
   ========================================================================== */

/* --------------------------------------------------------------------------
   22.1 Utility bar above the header
   -------------------------------------------------------------------------- */
.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 111;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  background: var(--navy-950);
  color: var(--steel-400);
  font-size: 0.775rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.4s var(--ease);
}

.topbar__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.topbar__set {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  min-width: 0;
}

.topbar a,
.topbar span.tb {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--steel-400);
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}

.topbar a:hover {
  color: var(--white);
}

.topbar svg {
  width: 14px;
  height: 14px;
  flex: none;
  opacity: 0.8;
}

@media (max-width: 1040px) {
  .topbar {
    display: none;
  }
}

/* Language switcher — segmented control */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex: none;
}

.lang button {
  padding: 0.34rem 0.66rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--steel-200);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
  line-height: 1.5;
}

.lang button:hover {
  color: var(--white);
}

.lang button[aria-pressed="true"] {
  background: var(--amber-500);
  color: var(--navy-950);
}

/* Drawer variant sits on a dark panel and needs bigger targets */
.drawer .lang {
  padding: 4px;
  margin-bottom: 1.2rem;
  align-self: flex-start;
}

.drawer .lang button {
  padding: 0.5rem 1rem;
  font-size: 0.78rem;
  min-height: 40px;
}

/* Header shifts down to clear the topbar on wide screens */
.header {
  top: var(--topbar-h);
}

/* --------------------------------------------------------------------------
   22.2 Section index numbers
   -------------------------------------------------------------------------- */
.head {
  position: relative;
}

/* Was steel-400 at 11.5px = 2.69:1. The chapter numeral is the spine of the
   whole document; it now sits on a rule, in mono, at a legible size and takes
   its colour from the surface. */
.secno {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--num-fg);
  margin-bottom: 0.7rem;
}

/* Every .head pairs a .secno with an .eyebrow, and the eyebrow already draws
   the connecting rule — so this one only appears when a numeral stands alone. */
.secno::after {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.head--center .secno::after,
.head .secno:has(+ .eyebrow)::after {
  display: none;
}

.head--center .secno {
  display: block;
}

/* --------------------------------------------------------------------------
   22.3 Full-bleed photo bands (parallax)
   -------------------------------------------------------------------------- */
.band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy-900);
  color: var(--white);
  padding-block: clamp(3.5rem, 9vw, 7.5rem);
}

.band__media {
  position: absolute;
  inset: -12% 0;
  z-index: -2;
}

.band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.band__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      100deg,
      rgba(7, 19, 36, 0.94) 0%,
      rgba(7, 19, 36, 0.78) 46%,
      rgba(7, 19, 36, 0.55) 100%
    );
}

.band--center {
  text-align: center;
}

.band--center .band__scrim {
  background: linear-gradient(0deg, rgba(7, 19, 36, 0.92), rgba(7, 19, 36, 0.8));
}

.band h2 {
  color: var(--white);
  font-size: var(--fs-h2);
  margin-bottom: 0.7rem;
}

.band p {
  color: var(--steel-200);
  max-width: 58ch;
  font-size: clamp(1rem, 1.5vw, 1.14rem);
}

.band--center p {
  margin-inline: auto;
}

.band--center .btn-row {
  justify-content: center;
}

/* Stat band on photo */
.band .stats .stat {
  border-left-color: rgba(255, 255, 255, 0.22);
}

.band .stats .stat b {
  color: var(--white);
}

.band .stats .stat span {
  color: var(--steel-300);
}

/* --------------------------------------------------------------------------
   22.4 Coverage — Uzbekistan map
   -------------------------------------------------------------------------- */
.coverage {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 1000px) {
  .coverage {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.uzmap {
  position: relative;
  width: 100%;
}

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

.uzmap__land {
  fill: rgba(30, 68, 120, 0.1);
  stroke: var(--navy-500);
  stroke-width: 1.6;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.section--deep .uzmap__land {
  fill: rgba(255, 255, 255, 0.05);
  stroke: rgba(255, 255, 255, 0.35);
}

.js .uzmap__land[data-draw] {
  stroke-dasharray: var(--len, 4000);
  stroke-dashoffset: var(--len, 4000);
}

.uzmap.is-in .uzmap__land[data-draw] {
  animation: drawLine 2.6s var(--ease-out) forwards;
}

.uzmap__city {
  cursor: pointer;
}

.uzmap__dot {
  fill: var(--steel-400);
  transition: fill 0.3s var(--ease), r 0.3s var(--ease);
}

.uzmap__label {
  font-size: 15px;
  font-weight: 600;
  fill: var(--ink-mute);
  paint-order: stroke;
  stroke: var(--white);
  stroke-width: 3px;
  stroke-linejoin: round;
  transition: fill 0.3s var(--ease);
  pointer-events: none;
}

.section--deep .uzmap__label {
  fill: var(--steel-300);
  stroke: var(--navy-900);
}

.uzmap__city:hover .uzmap__dot,
.uzmap__city:focus-visible .uzmap__dot {
  fill: var(--amber-500);
}

.uzmap__city:hover .uzmap__label,
.uzmap__city:focus-visible .uzmap__label {
  fill: var(--navy-800);
}

.section--deep .uzmap__city:hover .uzmap__label {
  fill: var(--white);
}

/* The two facilities get a pulsing marker */
.uzmap__hub .uzmap__dot {
  fill: var(--amber-500);
}

.uzmap__hub .uzmap__label {
  fill: var(--navy-800);
  font-weight: 800;
}

.section--deep .uzmap__hub .uzmap__label {
  fill: var(--white);
}

.uzmap__pulse {
  fill: var(--amber-500);
  transform-box: fill-box;
  transform-origin: center;
  animation: pulse 2.8s var(--ease) infinite;
}

.uzmap__pulse--b {
  animation-delay: 1.4s;
}

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

/* Rail link between the two facilities */
.uzmap__rail {
  stroke: var(--amber-500);
  stroke-width: 2;
  stroke-dasharray: 5 5;
  fill: none;
  opacity: 0.75;
  vector-effect: non-scaling-stroke;
}

.coverage__facts {
  display: grid;
  gap: 0.9rem;
}

.fact {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 0.95rem;
  align-items: start;
  padding: 1.05rem 1.15rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}

.fact:hover {
  border-color: var(--navy-400);
  transform: translateX(3px);
  box-shadow: var(--shadow-sm);
}

.section--deep .fact {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.13);
}

.fact__ico {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-ctl);
  display: grid;
  place-items: center;
  background: var(--navy-900);
  color: var(--amber-400);
}

.fact__ico svg {
  width: 20px;
  height: 20px;
}

.fact h4 {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 0.25rem;
  font-weight: 700;
}

.section--deep .fact h4 {
  color: var(--steel-400);
}

.fact p {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--navy-800);
  line-height: 1.5;
}

.section--deep .fact p {
  color: var(--white);
}

/* Region chips */
.regions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.5rem;
}

.regions span {
  padding: 0.36rem 0.8rem;
  border-radius: var(--radius-ctl);
  border: 1px solid var(--rule);
  background: var(--white);
  font-size: 0.79rem;
  color: var(--ink-soft);
  font-weight: 550;
  transition: all 0.25s var(--ease);
}

.section--deep .regions span {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--steel-300);
}

.regions span:hover {
  border-color: var(--amber-500);
  color: var(--navy-800);
}

.section--deep .regions span:hover {
  color: var(--white);
}

/* --------------------------------------------------------------------------
   22.5 Service cards with photography
   -------------------------------------------------------------------------- */
.svc {
  padding: 0;
  gap: 0;
}

.svc__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(160deg, var(--navy-700), var(--navy-950));
  border-radius: var(--radius) var(--radius) 0 0;
}

.svc__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
  transition: transform 0.8s var(--ease-out), opacity 0.4s var(--ease);
}

.svc:hover .svc__media img {
  transform: scale(1.06);
  opacity: 1;
}

.svc__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(7, 19, 36, 0.62), transparent 62%);
}

.svc__body {
  padding: 1.3rem 1.4rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.svc__idx {
  position: absolute;
  top: 0.85rem;
  right: 0.95rem;
  z-index: 2;
  padding: 0.16rem 0.5rem;
  border-radius: var(--radius-ctl);
  background: rgba(7, 19, 36, 0.66);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--amber-400);
  padding-top: 0.16rem;
}

.svc__ico {
  position: absolute;
  left: 0.95rem;
  bottom: 0.85rem;
  z-index: 2;
  background: rgba(7, 19, 36, 0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--amber-400);
}

.svc:hover .svc__ico {
  background: var(--amber-500);
  color: var(--navy-950);
  border-color: var(--amber-500);
}

.svc__trigger::after {
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   22.6 Process — how we work
   -------------------------------------------------------------------------- */
.flow {
  position: relative;
  display: grid;
  gap: clamp(1.1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  counter-reset: flow;
}

/* Six ordered steps in an auto-fit grid resolved to 4 columns, stranding
   steps 05 and 06 alone under two empty cells. Column counts here divide 6
   exactly at every breakpoint, so the sequence never leaves a hole. */
.flow--rail {
  grid-template-columns: repeat(3, 1fr);
}

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

@media (max-width: 560px) {
  .flow--rail {
    grid-template-columns: 1fr;
  }
}

.flow__item {
  position: relative;
  padding: 1.6rem 1.4rem 1.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  counter-increment: flow;
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

.section--deep .flow__item {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.12);
}

.flow__item::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--amber-500);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.55s var(--ease);
}

.flow__item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--navy-400);
}

.flow__item:hover::before {
  transform: scaleX(1);
}

.flow__n {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--amber-400);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.flow__item h3 {
  font-size: 1.02rem;
  margin-bottom: 0.35rem;
}

.section--deep .flow__item h3 {
  color: var(--white);
}

.flow__item p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.section--deep .flow__item p {
  color: var(--steel-300);
}

/* --------------------------------------------------------------------------
   22.7 Contact v2
   -------------------------------------------------------------------------- */
.office-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  margin-bottom: 1.25rem;
}

.office {
  padding: 1.35rem 1.4rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.13);
  transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease);
}

.office:hover {
  border-color: rgba(242, 164, 31, 0.5);
  background: rgba(255, 255, 255, 0.075);
}

.office__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-400);
  margin-bottom: 0.6rem;
}

.office h4 {
  color: var(--white);
  font-size: 1.16rem;
  margin-bottom: 0.3rem;
}

.office p {
  margin: 0;
  color: var(--steel-300);
  font-size: 0.93rem;
  line-height: 1.55;
}

/* Direct-contact rows */
.reach {
  display: grid;
  gap: 0.55rem;
}

.reach a {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1.05rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.11);
  color: var(--white);
  font-weight: 600;
  font-size: 0.97rem;
  min-height: 56px;
  transition: all 0.28s var(--ease);
}

.reach a:hover {
  background: rgba(242, 164, 31, 0.13);
  border-color: rgba(242, 164, 31, 0.45);
  transform: translateX(3px);
}

.reach svg {
  width: 19px;
  height: 19px;
  flex: none;
  color: var(--amber-400);
}

.reach small {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--steel-400);
  font-weight: 700;
  margin-bottom: 1px;
}

.reach .reach__go {
  margin-left: auto;
  color: var(--steel-500);
  transition: transform 0.28s var(--ease), color 0.28s var(--ease);
}

.reach a:hover .reach__go {
  color: var(--amber-400);
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   22.8 Extra motion utilities
   -------------------------------------------------------------------------- */

/* Word-by-word headline reveal */
.js .splitline {
  display: block;
  overflow: hidden;
}

.js .splitline > span {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
  transition: transform 0.95s var(--ease-out), opacity 0.7s var(--ease-out);
  transition-delay: calc(var(--w, 0) * 75ms + 220ms);
  will-change: transform;
}

.js .hero.is-ready .splitline > span {
  transform: none;
  opacity: 1;
}

/* Image mask reveal */
.js .maskwrap {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.05s var(--ease-out);
}

.js .maskwrap.is-in {
  clip-path: inset(0 0 0 0);
}

/* Subtle pointer-tilt on cards, applied by JS only on fine pointers */
.tilt {
  transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg))
    translateY(var(--tz, 0));
  transition: transform 0.4s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .js .splitline > span {
    transform: none !important;
    opacity: 1 !important;
  }

  .js .maskwrap {
    clip-path: none !important;
  }

  .uzmap .uzmap__land[data-draw] {
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }

  .uzmap__pulse {
    animation: none !important;
    opacity: 0.25 !important;
  }

  .tilt {
    transform: none !important;
  }

  .band__media img {
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   22.9 Responsive refinements
   -------------------------------------------------------------------------- */

/* Very small phones */
@media (max-width: 380px) {
  :root {
    --pad-x: 1rem;
  }

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

  .btn {
    width: 100%;
  }

  .hero .btn-row .btn {
    width: 100%;
  }

  .chip {
    font-size: 0.78rem;
    padding-inline: 0.85rem;
  }
}

/* Phones and small tablets: single-column forms, calmer type */
@media (max-width: 560px) {
  .hero h1 {
    max-width: 100%;
  }

  .figure--inset {
    display: none;
  }

  .modal__panel {
    padding-top: 3.2rem;
  }

  table.data {
    font-size: 0.82rem;
  }

  table.data th,
  table.data td {
    padding: 0.6rem 0.85rem;
  }
}

/* Tablets */
@media (min-width: 700px) and (max-width: 1040px) {
  .svc-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

/* Large desktop: let the layout breathe rather than stretch */
@media (min-width: 1600px) {
  :root {
    --maxw: 1400px;
    --section-y: clamp(5rem, 6vw, 9rem);
  }
}

/* Landscape phones — the 100svh hero would otherwise swallow the screen */
@media (max-height: 520px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding-block: 5rem 3rem;
  }

  .hero__facts {
    display: none;
  }

  .drawer__inner {
    padding-top: calc(var(--header-h) + 1rem);
  }
}

/* Fine-pointer only affordances */
/* Modal footer — carries the reader's intent into the enquiry form */
.modal__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}

.modal__foot .btn {
  flex: 1 1 auto;
}

/* --------------------------------------------------------------------------
   Mobile action bar — the only persistent contact affordance under 1040px
   -------------------------------------------------------------------------- */
.actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: stretch;
  gap: 1px;
  background: var(--rule-strong);
  border-top: 1px solid var(--navy-800);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(110%);
  transition: transform 0.32s var(--ease);
}

.actionbar.is-on {
  transform: none;
}

.actionbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 56px;
  padding: 0.5rem 1.1rem;
  background: var(--navy-900);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
}

.actionbar__item svg {
  width: 20px;
  height: 20px;
}

.actionbar__item--cta {
  background: var(--amber-500);
  color: var(--navy-950);
  font-size: 0.9rem;
  letter-spacing: 0;
  min-width: 0;
}

/* At 320px the three items no longer fit at full size — tighten rather than
   let the CTA label push the document wider than the viewport. */
@media (max-width: 360px) {
  .actionbar__item {
    padding-inline: 0.7rem;
    font-size: 0.62rem;
  }
  .actionbar__item--cta {
    font-size: 0.82rem;
    padding-inline: 0.5rem;
  }
  .actionbar__item--cta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.actionbar__item:active {
  filter: brightness(0.92);
}

@media (max-width: 1040px) {
  .actionbar {
    display: grid;
  }
  /* Keep the last of the page clear of the bar, and lift the back-to-top
     button so the two controls never overlap. The bar measures 58px with its
     current padding and label line-height, so reserve 64px — a hardcoded 56
     left the footer's bottom rule 2px underneath it. */
  body {
    padding-bottom: calc(var(--mobilebar-h) + env(safe-area-inset-bottom, 0px) + 0.75rem);
  }
  .totop {
    bottom: calc(var(--mobilebar-h) + env(safe-area-inset-bottom, 0px) + 0.9rem);
  }
}

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

@media (hover: none) {
  /* This used to pin the caption open on all 32 tiles at once, so a phone got
     32 dark gradient scrims over the photography — the one asset on this page
     that cannot be bought. The caption is still carried by the tile's
     aria-label and is shown in full in the lightbox, so nothing is lost by
     letting the photograph be a photograph. */
  .gal__cap {
    opacity: 0;
  }

  .gal:focus-visible .gal__cap {
    opacity: 1;
    transform: none;
  }

  .card:hover,
  .svc:hover,
  .flow__item:hover,
  .cert:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   22.10 FAQ — procurement objections, answered before they become emails
   -------------------------------------------------------------------------- */
.faq {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 1000px) {
  .faq {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

.faq__list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}

.faq__item {
  border-bottom: 1px solid var(--rule);
}

.faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 0;
  text-align: left;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  font-weight: 650;
  line-height: 1.4;
  color: var(--navy-900);
  transition: color 0.25s var(--ease);
  min-height: 64px;
}

.faq__q:hover {
  color: var(--navy-500);
}

.faq__q .n {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--num-fg);
  padding-top: 0.34rem;
  letter-spacing: 0.04em;
}

.faq__q .t {
  flex: 1;
}

.faq__q .sign {
  flex: none;
  position: relative;
  width: 18px;
  height: 18px;
  margin-top: 0.3rem;
}

/* A plus that becomes a minus — cheaper and calmer than a rotating chevron. */
.faq__q .sign::before,
.faq__q .sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  border-radius: 2px;
  background: var(--steel-500);
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease);
}

.faq__q .sign::after {
  transform: rotate(90deg);
}

.faq__q[aria-expanded="true"] .sign::before,
.faq__q[aria-expanded="true"] .sign::after {
  background: var(--amber-600);
}

.faq__q[aria-expanded="true"] .sign::after {
  transform: rotate(0deg);
}

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s var(--ease);
}

.faq__a.is-open {
  grid-template-rows: 1fr;
}

.faq__a > div {
  overflow: hidden;
}

.faq__a p {
  margin: 0;
  padding: 0 2.1rem 1.4rem 2.4rem;
  color: var(--ink-soft);
  font-size: 0.97rem;
  line-height: 1.72;
  max-width: 68ch;
}

/* The aside that sits beside the list on wide screens */
.faq__aside {
  position: sticky;
  top: calc(var(--header-h) + var(--topbar-h) + 1.5rem);
}

.faq__card {
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
  background: linear-gradient(160deg, var(--navy-800), var(--navy-950));
  color: var(--steel-300);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.faq__card h3 {
  color: var(--white);
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.faq__card p {
  font-size: 0.94rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 999px) {
  .faq__aside {
    position: static;
  }
}

/* Post-submit fallbacks. mailto can silently do nothing on a phone with no mail
   client, so the same enquiry is offered over WhatsApp and as a clipboard copy
   and the panel stays put until one of them is used. */
.form__status-lead {
  margin: 0 0 0.85rem;
}

.form__fallbacks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.form__fallbacks .btn {
  flex: 1 1 auto;
  min-height: 46px;
  font-size: 0.88rem;
  padding-inline: 1rem;
}