@charset "UTF-8";

/* ═══════════════════════════════════════════════════════════════════════
   PSCPL - pscpl.in
   Design system: "Precision Industrial" (per the Stitch design spec)

   Industrial Premium - heavy-duty engineering reliability married to
   modern technology. Minimal, corporate, generous white space, rigorous
   grid, technical rather than decorative. The target feeling is
   institutional trust.

   The rules that spec sets, and that this file follows:
   · Defense navy is the authoritative foundation; technical orange is
     used sparingly, for calls to action and critical highlights only.
   · Depth comes from tonal layers and 1px outlines, never from heavy
     drop shadows. Hover raises an element on a soft ambient shadow.
   · Glassmorphism is reserved exclusively for the navigation header.
   · Shapes are soft, not round: 4px on controls, 8px on containers,
     pills only for badges.
   · Content is strictly left-aligned, on an 8px baseline.

     1  Tokens
     2  Base
     3  Typography
     4  Layout
     5  Components
     6  Header
     7  Footer
     8  Forms
     9  Page pieces
    10  Motion and print
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1  Tokens ──────────────────────────────────────────────────────── */

:root {
  /* Surfaces. Four near-whites with a faint blue cast, which is what
     gives the "clean room" feel rather than a flat clinical white. */
  --surface: #faf8ff;
  --surface-lowest: #ffffff;
  --surface-low: #f2f3ff;
  --surface-gray: #f8fafc;
  --surface-dim: #d2d9f4;

  /* Navy. The authoritative foundation. */
  --navy: #0f1e3d;
  --navy-deep: #031637;
  --navy-container: #1a2b4d;

  /* Text */
  --on-surface: #131b2e;
  --on-surface-variant: #44474e;
  --outline: #75777f;
  --outline-variant: #c5c6cf;
  --border-subtle: #e2e8f0;

  /* On navy */
  --on-navy: #ffffff;
  --on-navy-dim: #b7c8e1;
  --on-navy-faint: #8293bb;

  /* Technical orange. Calls to action and critical highlights only. The
     darker `--orange-ink` is the text-safe value: #E67E22 on white is
     3.0:1, which fails, so anything set as type uses #904d00. */
  --orange: #e67e22;
  --orange-ink: #904d00;
  --orange-light: #ffa454;
  --orange-tint: #ffdcc3;

  --font-display: "Hanken Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --font-serif: "Playfair Display", Georgia, serif;

  /* Soft, not round. */
  --radius: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 9999px;

  /* 8px baseline. */
  --gutter: 20px;
  --max: 1440px;
  --section: 80px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-ambient: 0 10px 30px rgba(0, 0, 0, 0.05);
  --shadow-lift: 0 20px 40px rgba(0, 0, 0, 0.08);
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --section: 112px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 48px;
    --section: 144px;
  }
}

/* ── 2  Base ────────────────────────────────────────────────────────── */

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

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

img {
  height: auto;
}

ul,
ol {
  list-style: none;
}

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

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

::selection {
  background: var(--orange-tint);
  color: var(--navy);
}

:focus-visible {
  outline: 2px solid var(--orange-ink);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 200;
  padding: 12px 20px;
  border-radius: var(--radius);
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  transform: translateY(-200%);
  transition: transform 0.2s;
}

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

/* ── 3  Typography ──────────────────────────────────────────────────── */

/* Hanken Grotesk for headlines: sharp, contemporary, "engineered". Tight
   letter-spacing at display sizes for visual impact. */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.2;
  text-wrap: balance;
}

h1 {
  font-size: clamp(28px, 1.4rem + 2.6vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(28px, 1.5rem + 1.2vw, 32px);
  font-weight: 600;
}

h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}

h4 {
  font-size: 18px;
  font-weight: 600;
}

/* The one flourish the spec allows: a second line of a headline set in
   Playfair italic. It reads as craft against the engineered grotesque,
   and it is the single detail that makes the page look considered rather
   than templated. Used on headline second lines only - never inline. */
em.serif {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: inherit;
}

/* Only on a dark plate does the accent line drop to the pale blue. On
   light grounds it inherits the navy - the pale blue there was almost
   invisible. */
.hero h1 em.serif,
.page-head h1 em.serif,
.section--navy em.serif {
  color: var(--on-navy-dim);
}

/* JetBrains Mono, wide-tracked, for technical data, part numbers and
   over-eyebrow headers. This is the detail that reads "manufacturer". */
.mono--accent {
  color: var(--orange-ink);
}

.section--navy .mono--accent {
  color: var(--orange-light);
}

.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Eyebrow: a short orange rule, then the mono label. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange-ink);
}

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

.eyebrow--on-navy {
  color: var(--orange-light);
}

.lede {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--on-surface-variant);
  max-width: 60ch;
}

.lede--on-navy {
  color: var(--on-navy-dim);
}

.prose {
  /* max-width: 68ch; */
  color: var(--on-surface-variant);
  font-size: 16px;
  line-height: 1.7;
}

.prose > * + * {
  margin-top: 24px;
}

.prose strong {
  font-weight: 600;
  color: var(--on-surface);
}

.prose a {
  color: var(--orange-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Body copy on a navy plate. The variant grey is unreadable there, so the
   prose block picks up the same dimmed white the ledes use. */
.section--navy .prose {
  color: var(--on-navy-dim);
}

.section--navy .prose strong {
  color: #fff;
}

.section--navy .prose a {
  color: var(--orange-light);
}

/* ── 4  Layout ──────────────────────────────────────────────────────── */

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

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

.section--gray {
  background: var(--surface-gray);
}

.section--white {
  background: var(--surface-lowest);
}

.section--navy {
  background: var(--navy);
  color: var(--on-navy);
}

.section--navy h2,
.section--navy h3 {
  color: var(--on-navy);
}

.section--tight {
  padding-block: calc(var(--section) * 0.62);
}

/* Headline block, strictly left-aligned per the spec. `--split` moves the
   standing paragraph beside the title on wide screens. */
.head {
  display: grid;
  gap: 24px;
  max-width: 720px;
}

.head h2 {
  margin-top: 8px;
}

.head--split {
  max-width: none;
}

@media (min-width: 900px) {
  .head--split {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: end;
  }
}

.split {
  display: grid;
  gap: 48px;
}

@media (min-width: 950px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: 96px;
    align-items: center;
  }

  .split--top {
    align-items: start;
  }

  .split--wide-left {
    grid-template-columns: 1.15fr 0.85fr;
  }

  .split--wide-right {
    grid-template-columns: 0.85fr 1.15fr;
  }

  /* A portrait beside a biography. The generic wide-right split gave the
     image a half-page column and then a 96px gutter, so a 300px headshot
     sat marooned with a quarter of the page of white to its right. Here the
     column is sized to the picture and the gutter comes in. */
  .split--portrait {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 8rem;
    align-items: start;
  }

  .split--sticky {
    align-items: start;
  }

  .split--sticky > :first-child {
    position: sticky;
    top: 128px;
  }
}

.grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 700px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

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

.mt-1 {
  margin-top: 8px;
}
.mt-2 {
  margin-top: 16px;
}
.mt-3 {
  margin-top: 24px;
}
.mt-4 {
  margin-top: 32px;
}
.mt-6 {
  margin-top: 48px;
}
.mt-8 {
  margin-top: 64px;
}

/* ── 5  Components ──────────────────────────────────────────────────── */

/* Navy fill, white text, 4px radius, mono-adjacent uppercase label. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 32px;
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  background: var(--navy);
  color: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease), transform 0.3s var(--ease), color 0.3s var(--ease);
}

.btn:hover {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(3, 22, 55, 0.22);
}

.btn--sm {
  padding: 12px 24px;
}

/* Low-contrast outline, per the spec's secondary button. */
/* On the navy hero: a white fill, and a glassy outline beside it. */
.btn--light {
  background: var(--surface);
  border-color: var(--surface);
  color: var(--navy);
}

.btn--light:hover {
  background: var(--surface-dim);
  border-color: var(--surface-dim);
  color: var(--navy);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.btn--glass {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.btn--glass:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
  box-shadow: none;
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--orange-light);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.link svg {
  transition: transform 0.3s var(--ease);
}

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

.link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* White, 1px subtle border, 8px radius, no shadow at rest. On hover it
   lifts on a diffused ambient shadow rather than a hard extrusion. */
.card {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
  transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease),
    border-color 0.5s var(--ease);
}

/* On hover the outline gets stronger, not weaker. It used to go
   transparent and lean on the shadow alone, which read as the card
   dissolving - the spec takes its depth from 1px outlines, so the outline
   is the thing that should respond. */
.card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px);
  border-color: var(--navy);
}

/* Same treatment for the other outlined blocks. */
.panel,
.gallery__item {
  transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease),
    border-color 0.5s var(--ease);
}

.panel:hover,
.gallery__item:hover {
  border-color: var(--navy);
  box-shadow: var(--shadow-lift);
}

.section--navy .panel:hover,
.section--navy .gallery__item:hover {
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: none;
}

.card h3 {
  margin-top: 24px;
  font-size: 20px;
}

.card p {
  margin-top: 12px;
  color: var(--on-surface-variant);
  font-size: 15px;
  line-height: 1.6;
}

/* On navy, a card is a translucent pane rather than a white plate -
   a white card on navy is a hole in the page, and it made the white
   heading disappear entirely. */
.section--navy .card {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.14);
}

.section--navy .card:hover {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.26);
  box-shadow: none;
}

.section--navy .card p {
  color: var(--on-navy-dim);
}

.section--navy .icon-tile,
.section--navy .card:hover .icon-tile {
  background: rgba(255, 255, 255, 0.08);
  color: var(--orange-light);
}

.section--navy .spec-row {
  border-top-color: rgba(255, 255, 255, 0.14);
}

.section--navy .spec-row__key {
  color: var(--on-navy-faint);
}

.section--navy .spec-row__value {
  color: #fff;
}

.card__foot {
  margin-top: auto;
  padding-top: 24px;
}

/* The mono key/value strip along the bottom of a card - the spec's
   "spec-sheet" pattern, and the clearest signal that this is a
   manufacturer's catalogue rather than a brochure. */
.spec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.spec-row__key {
  color: var(--outline);
}

.spec-row__value {
  color: var(--navy);
  text-align: right;
}

/* Icon tile. Used where a set of otherwise-identical cards needs telling
   apart at a glance: the three homepage product lines, and the six company
   values. Everywhere else the tile was decoration and has been removed -
   where there is a photograph of the actual part, the photograph wins. */
.icon-tile {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  flex: none;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-low);
  color: var(--navy);
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

@media (max-width: 640px) {
  .icon-tile {
    width: 62px;
    height: 62px;
  }
}

.card:hover .icon-tile,
.panel:hover .icon-tile {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--orange-light);
}

/* A bordered aside - the "At a glance" block on the About page. Sits in the
   narrow column of a split and holds a title over a row list. */
.panel {
  padding: 32px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
}

.panel__title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-ink);
}

.panel__lead {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--on-surface-variant);
}

.panel__address {
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--on-surface-variant);
}

/* Legal pages. A numbered clause and a contents rail beside it - nobody
   reads a privacy policy front to back, they arrive looking for one
   clause, so the numbers and the jump links are the whole interface. */
.clause + .clause {
  margin-top: 56px;
  padding-top: 56px;
  border-top: 1px solid var(--border-subtle);
}

.clause h2 {
  font-size: clamp(22px, 1.2rem + 0.7vw, 26px);
}

.toc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  counter-reset: none;
}

.toc a {
  display: flex;
  gap: 14px;
  padding: 9px 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--on-surface-variant);
  transition: color 0.3s var(--ease);
}

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

.toc__no {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.7;
  color: var(--orange-ink);
}

/* On navy the panel is a translucent pane, like a card. */
.section--navy .panel {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.14);
}

.section--navy .panel__title {
  color: var(--orange-light);
}

.section--navy .panel__lead {
  color: var(--on-navy-dim);
}

.section--navy .panel .rows {
  border-top-color: rgba(255, 255, 255, 0.14);
}

.section--navy .panel .row {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.section--navy .panel .row__name {
  color: #fff;
}

.section--navy .panel .row__note {
  color: var(--on-navy-faint);
}

/* Status badge - an outlined mono chip. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-lowest);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
}

.badge--accent {
  border-color: var(--orange-tint);
  background: #fff7ef;
  color: var(--orange-ink);
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Bulleted list. The marker is a small orange square, in keeping with
   the rectilinear language. */
.list {
  display: grid;
  gap: 12px;
}

.list li {
  position: relative;
  padding-left: 20px;
  color: var(--on-surface-variant);
  font-size: 15px;
  line-height: 1.6;
}

.list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--orange);
}

.list--divided {
  gap: 0;
}

.list--divided li {
  padding: 16px 0 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.list--divided li::before {
  top: 24px;
}

/* Spec sheet: mono key, value, hairline divider. */
.rows {
  border-top: 1px solid var(--border-subtle);
}

.row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-block: 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.row__name {
  font-size: 15px;
  color: var(--on-surface);
}

.row__note {
  flex: none;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--outline);
}

.section--navy .rows {
  border-top-color: rgba(255, 255, 255, 0.14);
}

.section--navy .row {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.section--navy .row__name {
  color: #fff;
}

.section--navy .row__note {
  color: var(--on-navy-faint);
}

.section--navy .lede {
  color: var(--on-navy-dim);
}

.section--navy .list li {
  color: var(--on-navy-dim);
}

/* Stats - display numeral over a mono caption, divided by a hairline. */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  padding-top: 40px;
  border-top: 1px solid var(--border-subtle);
}

.stats__value {
  display: block;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.stats__label {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--outline);
}

/* Images. A tinted panel sits rotated behind the photograph, which is
   what turns a flat rectangle into a composition. */
.shot {
  position: relative;
}

.shot::before {
  content: "";
  position: absolute;
  inset: -20px;
  border-radius: var(--radius-xl);
  background: var(--surface-low);
  transform: rotate(2.5deg);
  transition: transform 0.7s var(--ease);
  z-index: 0;
}

.shot:hover::before {
  transform: rotate(1deg);
}

.shot img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
  transition: transform 0.7s var(--ease);
}

.shot:hover img {
  transform: scale(1.015);
}

/* Taller crops. Not currently emitted by the generator - the pages that
   used them now run 4:3 - but kept as part of the figure vocabulary. */
.shot--tall img {
  aspect-ratio: 4 / 5;
}

.shot--portrait img {
  aspect-ratio: 3 / 4;
  object-position: top;
}

.shot figcaption {
  position: relative;
  z-index: 1;
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--outline);
}

/* Photo strip. Four frames across, no rotated panel behind them - at this
   count the tilt reads as noise, so the composition comes from the mono
   caption rail and the hairline that separates it from the image. */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Column-count variants. `--2` is for the product bands, where a strip of
   parts sits in one half of a split. An odd trailing frame stays in its own
   column: spanning it across the full width doubled its rendered size, and
   with a fixed 4:3 ratio that made one photograph twice the height of every
   other frame on the page. Equal frames read as a set; one giant frame reads
   as a mistake. `--5` is the machine fleet, which stays one row. */
.gallery--2 {
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
}

.gallery--5 {
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

@media (max-width: 1200px) {
  .gallery--5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

@media (max-width: 480px) {
  .gallery,
  .gallery--2,
  .gallery--5 {
    grid-template-columns: 1fr;
  }
}

/* At five across the caption rail has very little width, so it tightens up
   rather than wrapping the machine name onto three lines. */
.gallery--5 .gallery__item figcaption {
  padding: 14px 16px 16px;
}

.gallery--5 .gallery__note {
  font-size: 0.8125rem;
}

.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
  border: 1px solid var(--border-subtle);
}

.gallery__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.gallery__item:hover img {
  transform: scale(1.04);
}

.gallery__item figcaption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px 20px;
  border-top: 1px solid var(--border-subtle);
}

.gallery__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-light);
}

.gallery__note {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--on-surface-variant);
}

/* On navy the strip inverts: translucent pane, pale rules. */
.section--navy .gallery__item {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}

.section--navy .gallery__item figcaption {
  border-top-color: rgba(255, 255, 255, 0.14);
}

.section--navy .gallery__note {
  color: var(--on-navy-dim);
}

/* The navy figure badge that overlaps the photograph. */
.shot__badge {
  position: absolute;
  right: -20px;
  bottom: -28px;
  z-index: 2;
  padding: 24px 28px;
  border-radius: var(--radius-lg);
  background: var(--navy);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.24);
}

@media (max-width: 640px) {
  .shot__badge {
    right: 8px;
    bottom: -20px;
    padding: 16px 20px;
  }
}

.shot__badge b {
  display: block;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.shot__badge span {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-navy-dim);
}

.quote {
  font-family: var(--font-display);
  font-size: clamp(22px, 1.2rem + 1.4vw, 32px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--navy);
  max-width: 26ch;
  padding-left: 32px;
  border-left: 2px solid var(--orange);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--outline);
}

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

.crumbs [aria-current] {
  color: var(--orange-ink);
}

/* ── 6  Header ──────────────────────────────────────────────────────── */

/* Glassmorphism, used here and nowhere else - it has to stay legible over
   high-contrast industrial photography. */
.masthead {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 255, 0.72);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
  transition: background 0.4s var(--ease);
}

.masthead.is-scrolled {
  background: rgba(250, 248, 255, 0.92);
  border-bottom-color: var(--border-subtle);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 80px;
}

@media (min-width: 1024px) {
  .masthead__inner {
    height: 96px;
  }
}

.brand img {
  height: 80px;
  width: auto;
  max-width: 250px;
  object-fit: contain;
  object-position: left center;
  transition: transform 0.5s var(--ease);
}

.brand:hover img {
  transform: scale(1.04);
}

@media (min-width: 768px) {
  .brand img {
    height: 80px;
    max-width: 250px;
  }
}

.nav {
  display: none;
}

@media (min-width: 1024px) {
  .nav {
    display: flex;
    align-items: center;
    gap: 40px;
  }
}

.nav__link,
.nav__trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  color: var(--on-surface-variant);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  transition: color 0.3s, border-color 0.3s;
}

.nav__link:hover,
.nav__trigger:hover,
.nav__group.is-open .nav__trigger {
  color: var(--navy-deep);
}

/* Active state: a 2px orange underline, per the spec. */
.nav__link[aria-current="page"] {
  color: var(--orange-ink);
  border-bottom-color: var(--orange);
}

.nav__trigger svg {
  transition: transform 0.3s var(--ease);
}

.nav__group.is-open .nav__trigger svg {
  transform: rotate(180deg);
}

.nav__group {
  position: relative;
}

.nav__panel {
  position: absolute;
  top: calc(100% + 24px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: 520px;
  padding: 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.1);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
    visibility 0.3s;
}

.nav__group.is-open .nav__panel {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.nav__panel::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -24px;
  height: 24px;
}

.nav__panel-grid {
  display: grid;
  gap: 2px;
}

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

.nav__item {
  display: block;
  padding: 14px 16px;
  border-radius: var(--radius);
  border-left: 2px solid transparent;
  transition: background 0.25s, border-color 0.25s;
}

.nav__item:hover,
.nav__item[aria-current="page"] {
  background: var(--surface-gray);
  border-left-color: var(--orange);
}

.nav__item-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
}

.nav__item-desc {
  display: block;
  margin-top: 4px;
  color: var(--outline);
  font-size: 13px;
  line-height: 1.45;
}

.masthead__cta {
  display: none;
}

@media (min-width: 768px) {
  .masthead__cta {
    display: inline-flex;
  }
}

.burger {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  background: none;
  color: var(--navy);
  cursor: pointer;
}

@media (min-width: 1024px) {
  .burger {
    display: none;
  }
}

.burger__x {
  display: none;
}

.masthead.is-open .burger__bars {
  display: none;
}

.masthead.is-open .burger__x {
  display: block;
}

.drawer {
  display: none;
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-lowest);
}

.masthead.is-open .drawer {
  display: block;
}

@media (min-width: 1024px) {
  .masthead.is-open .drawer {
    display: none;
  }
}

.drawer__inner {
  padding-block: 16px 40px;
}

.drawer__link {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
}

.drawer__section {
  padding-top: 32px;
}

.drawer__section > span {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--outline);
}

.drawer__sub {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--on-surface-variant);
  font-size: 15px;
}

.drawer .btn {
  margin-top: 32px;
  width: 100%;
}

/* ── 7  Footer ──────────────────────────────────────────────────────── */

.footer {
  background: var(--navy);
  color: var(--on-navy-dim);
}

.footer__top {
  display: grid;
  gap: 48px;
  padding-block: 80px 56px;
}

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

@media (min-width: 1024px) {
  .footer__top {
    grid-template-columns: 1.6fr 1.1fr 1fr 1fr;
    gap: 40px;
  }
}

.footer__brand img {
  height: 56px;
  width: auto;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: #fff;
}

.footer__blurb {
  margin-top: 24px;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--on-navy-dim);
}

.footer__title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}

.footer__col ul,
.footer__contact-list {
  margin-top: 24px;
  display: grid;
  gap: 12px;
}

.footer__col a,
.footer__contact-list a {
  color: var(--on-navy-dim);
  font-size: 15px;
  transition: color 0.25s;
}

.footer__col a:hover,
.footer__contact-list a:hover {
  color: #fff;
}

.footer address {
  font-style: normal;
  font-size: 15px;
  line-height: 1.65;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  color: var(--on-navy-faint);
}

.footer__legal ul {
  display: flex;
  gap: 28px;
}

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

/* Studio credit, far right of the legal strip. Underlined so it reads as a
   link - everything else in this row is either plain text or sits in a
   list where the link is obvious from position. */
.footer__credit a {
  color: var(--on-navy-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.3s var(--ease);
}

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

/* Three items wrapping unevenly looks like a mistake. Below this width the
   strip stacks left-aligned instead. */
@media (max-width: 900px) {
  .footer__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

/* ── 8  Forms ───────────────────────────────────────────────────────── */

.form {
  display: grid;
  gap: 20px;
}

.form__row {
  display: grid;
  gap: 20px;
}

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

.field label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--outline);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  background: var(--surface-lowest);
  font-size: 15px;
  transition: border-color 0.25s, box-shadow 0.25s;
}

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

/* On focus the border shifts to primary with a subtle 2px outer glow. */
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--navy);
  box-shadow: 0 0 0 2px rgba(15, 30, 61, 0.12);
}

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

/* Shown when a submission fails, so the visitor is told rather than left
   assuming the enquiry landed. */
.form__error {
  margin-top: 20px;
  padding: 16px 20px;
  border: 1px solid var(--orange-tint);
  border-left: 2px solid var(--orange);
  border-radius: var(--radius);
  background: #fff7ef;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--orange-ink);
}

.field__hint {
  margin-top: 8px;
  font-size: 13px;
  color: var(--outline);
}

.form-done {
  display: none;
  padding: 48px 32px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
}

.form-done.is-visible {
  display: block;
}

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

.text-btn {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--orange-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── 9  Page pieces ─────────────────────────────────────────────────── */

.page-top {
  padding-top: 80px;
}

@media (min-width: 1024px) {
  .page-top {
    padding-top: 96px;
  }
}

/* The homepage hero: navy plate, photograph behind at low opacity, two
   gradient scrims so type stays legible at the left edge. */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 620px;
  padding-block: 96px;
  background: var(--navy);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .hero {
    min-height: 82vh;
  }
}

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

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  transform: scale(1.05);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
      100deg,
      var(--navy) 12%,
      rgba(15, 30, 61, 0.92) 42%,
      rgba(15, 30, 61, 0.32) 100%
    ),
    linear-gradient(to top, rgba(15, 30, 61, 0.6), transparent 55%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
}

.hero h1 {
  margin-top: 32px;
  color: #fff;
}

.hero .lede {
  margin-top: 32px;
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 48px;
}

/* Interior page banner - the hero at roughly half height. Same navy plate,
   same photograph-behind-a-scrim construction, so an interior page arrives
   with the weight the homepage does. The fact rail on the right is what
   stops it being a headline floating on a picture. */
.page-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 380px;
  padding-block: 72px 56px;
  background: var(--navy);
  overflow: hidden;
}

@media (min-width: 900px) {
  .page-head {
    min-height: 460px;
    padding-block: 96px 72px;
  }
}

.page-head__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-head__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  transform: scale(1.05);
}

.page-head__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
      100deg,
      var(--navy) 10%,
      rgba(15, 30, 61, 0.9) 46%,
      rgba(15, 30, 61, 0.34) 100%
    ),
    linear-gradient(to top, rgba(15, 30, 61, 0.72), transparent 62%);
}

.page-head__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 40px;
  width: 100%;
}

@media (min-width: 1024px) {
  .page-head__inner {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: end;
    gap: 64px;
  }
}

.page-head__main {
  max-width: 46rem;
}

.page-head h1 {
  margin-top: 24px;
  max-width: 18ch;
  color: #fff;
}

.page-head .lede {
  margin-top: 24px;
  max-width: 52ch;
  color: var(--on-navy-dim);
}

/* The crumbs, the accent line and the fact rail all need the dark-plate
   treatment the navy sections already define. */
.page-head .crumbs {
  color: var(--on-navy-faint);
}

.page-head .crumbs a:hover {
  color: #fff;
}

.page-head .crumbs [aria-current] {
  color: var(--orange-light);
}

.page-head__meta .rows {
  border-top-color: rgba(255, 255, 255, 0.16);
}

.page-head__meta .row {
  border-bottom-color: rgba(255, 255, 255, 0.16);
}

.page-head__meta .row__name {
  color: #fff;
}

.page-head__meta .row__note {
  color: var(--on-navy-faint);
}

/* The fact rail stacks value-over-label on narrow screens - side by side
   the longer values ("ISO 9001:2015 · IATF 16949") wrap badly. */
@media (max-width: 560px) {
  .page-head__meta .row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .page-head__meta .row__note {
    text-align: left;
  }
}

/* Certificates. The source scans are 212 x 300 - barely bigger than a
   thumbnail - so they are shown at that scale beside their description
   rather than blown up to fill a card, where they only look soft. */
.certs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

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

.cert {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.cert__thumb {
  flex: none;
  width: 104px;
  aspect-ratio: 212 / 300;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius);
  background: #fff;
  padding: 6px;
}

.cert__body p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--on-surface-variant);
}

.section--navy .cert__body p {
  color: var(--on-navy-dim);
}

/* Director portraits. Held to a headshot width - at full column width the
   two faces dominated a page that is mostly biography. */
.portrait {
  max-width: 300px;
}

.portrait img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}

@media (max-width: 860px) {
  .portrait {
    max-width: 220px;
  }
}

/* Life dates under a director's name. Mono, because the design system
   uses it for anything that reads as a record rather than as prose -
   and sentence case, because uppercasing a person's dates is cold. */
.person__dates {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--outline);
}

.map {
  border: 0;
  width: 100%;
  height: clamp(320px, 36vw, 440px);
}

.person + .person,
.product + .product {
  margin-top: 64px;
  padding-top: 64px;
  border-top: 1px solid var(--border-subtle);
}

/* Utilities that replace inline style attributes. Every `style="..."` in
   the markup was removed so the Content-Security-Policy can ship without
   'unsafe-inline' in style-src - one attribute anywhere would have forced
   the whole policy open. */

/* Anchored sections sat under the sticky header when linked to directly.
   This was a style attribute on every one of them; as a selector it also
   covers any section added later. */
section[id],
.clause[id] {
  scroll-margin-top: 5rem;
}

.clause[id] {
  scroll-margin-top: 6rem;
}

.split--center {
  align-items: center;
}

.lede--sm {
  font-size: 0.9375rem;
}

.text-variant {
  color: var(--on-surface-variant);
}

/* ── 10  Motion and print ───────────────────────────────────────────── */

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

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

/* ── Preloader ──────────────────────────────────────────────────────
   A navy plate over the first page of a session while it loads. The boot
   script in the head sets `is-ready` immediately on every page after
   that, so moving around the site never brings the plate back.

   Three ways out, because a plate that will not lift is worse than no
   plate at all: it only exists under `.js`, so scripting off never sees
   it; main.js lifts it on window.load; and the animation below lifts it
   at six seconds regardless, in case main.js is blocked or fails. */
.preloader {
  display: none;
}

.js .preloader {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--navy);
  animation: preloader-lift 0.6s var(--ease) 6s forwards;
}

/* `animation: none` matters - without it the six-second fallback would
   fire later and flash the plate back over a page already in use. */
.js.is-ready .preloader {
  animation: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s var(--ease), visibility 0s linear 0.6s;
}

.preloader__inner {
  display: grid;
  justify-items: center;
  gap: 28px;
  padding-inline: var(--gutter);
}

/* The mark, not the full logo. pusalkar-logo.png sets the wordmark in
   navy for a light masthead, which on this plate is navy on navy - the
   favicon is the same mark drawn for a navy ground, and its background
   square is the same colour as the plate, so it reads as if it floats. */
.preloader__mark {
  width: 72px;
  height: 72px;
  opacity: 0;
  animation: preloader-mark 0.7s var(--ease) forwards;
}

/* The line eases towards the end and never arrives. It says something is
   happening; it is not a measurement, and a bar that sits at 100% while
   the page is still blank is worse than one that never claims to finish. */
.preloader__bar {
  width: 160px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.preloader__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  animation: preloader-fill 2.6s var(--ease) forwards;
}

@keyframes preloader-mark {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes preloader-fill {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(0.92);
  }
}

/* Both ends are written out on purpose. With only a `to` keyframe the
   browser keeps `pointer-events: auto` on the way down, which leaves an
   invisible plate swallowing every click on the page underneath - a site
   that looks fine and does nothing. */
@keyframes preloader-lift {
  from {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .preloader__mark {
    opacity: 1;
    animation: none;
  }

  .preloader__bar span {
    animation: none;
    transform: scaleX(0.6);
  }
}

@media print {
  .preloader,
  .masthead,
  .drawer,
  .btn,
  .map,
  .hero__bg,
  .hero__scrim {
    display: none !important;
  }

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

  .hero,
  .section--navy,
  .footer {
    background: #fff;
    color: #000;
  }

  .section {
    padding-block: 24px;
    break-inside: avoid;
  }
}