@charset "utf-8";

/* ==========================================================================
   Ludon Forge Co., Ltd. — forged ball valve components

   The palette and the two typefaces come from the 2026 print catalogue, so
   the brand reads as one. The LAYOUT does not: an A4 page is a tall, narrow,
   single-column field and the screen is a wide one. Sections here are built
   on a split grid with a sticky heading column, so the width earns its keep
   and the page does not become a scroll of stacked print pages.
   ========================================================================== */

@font-face {
  font-family: "LudonDisplay";
  src: url("fonts/framdcn.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LudonNarrow";
  src: url("fonts/arialn.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LudonNarrow";
  src: url("fonts/arialnb.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens. One committed visual world, not a light/dark pair: an industrial
   supplier should present one face. Every colour is therefore painted
   explicitly and never inherited from the host.
   -------------------------------------------------------------------------- */
:root {
  --ink:        #12171a;
  --shell:      #1c2428;
  --shell-2:    #232c31;
  --steel:      #5e6a70;
  --steel-lo:   #8d979c;
  --steel-hi:   #aeb7bb;
  --paper:      #edefee;
  --paper-2:    #e2e6e5;
  --white:      #ffffff;

  --ember:      #e2571e;
  --ember-lo:   #f07a45;
  --ember-deep: #a8390c;

  --rule-dark:  #333e44;
  --rule-light: #ccd2d1;

  --fg:       var(--paper);
  --fg-quiet: var(--steel-hi);
  --fg-faint: var(--steel);
  --bg:       var(--ink);
  --rule:     var(--rule-dark);
  --field:    rgba(255, 255, 255, 0.04);

  --display: "LudonDisplay", "Franklin Gothic Demi Cond",
             "Franklin Gothic Medium Cond", "Arial Narrow", sans-serif;
  --narrow:  "LudonNarrow", "Arial Narrow", "Segoe UI", sans-serif;
  --body:    "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
             Arial, sans-serif;

  --t-label: 0.6875rem;
  --t-sm:    0.875rem;
  --t-body:  1.0625rem;
  --t-lead:  1.1875rem;
  --t-h3:    1.3125rem;
  --t-h2:    clamp(1.75rem, 1.1rem + 1.9vw, 2.75rem);
  --t-h1:    clamp(2.5rem, 1.1rem + 5vw, 5.25rem);
  --t-fig:   clamp(1.7rem, 1.1rem + 1.7vw, 2.4rem);

  --col: 1320px;
  --pad: clamp(1.25rem, 0.5rem + 2.8vw, 3.5rem);
  --sec: clamp(3.75rem, 2rem + 4.4vw, 6.5rem);
  --head-h: 68px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

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

/* anchors clear the fixed header */
section[id] { scroll-margin-top: var(--head-h); }

/* --------------------------------------------------------------------------
   Grounds
   -------------------------------------------------------------------------- */
.ground-dark, .ground-shell, .ground-paper { color: var(--fg); background: var(--bg); }

.ground-dark {
  --fg: var(--paper); --fg-quiet: var(--steel-hi); --fg-faint: var(--steel);
  --bg: var(--ink); --rule: var(--rule-dark);
  --field: rgba(255, 255, 255, 0.04);
}
.ground-shell {
  --fg: var(--paper); --fg-quiet: var(--steel-hi); --fg-faint: var(--steel);
  --bg: var(--shell); --rule: var(--rule-dark);
  --field: rgba(255, 255, 255, 0.05);
}
.ground-paper {
  --fg: var(--ink); --fg-quiet: #46525a; --fg-faint: var(--steel);
  --bg: var(--paper); --rule: var(--rule-light);
  --field: rgba(18, 23, 26, 0.03);
}

.wrap {
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.section { padding-block: var(--sec); }

/* --------------------------------------------------------------------------
   The split: heading column stays with the reader while the detail scrolls.
   This is the piece that makes the page read as a screen and not as a page.
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr);
  gap: clamp(2rem, 0.5rem + 4vw, 5.5rem);
  align-items: start;
}
.split-head { position: sticky; top: calc(var(--head-h) + 2.25rem); }
@media (max-width: 940px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .split-head { position: static; }
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
.label {
  font-family: var(--narrow);
  font-weight: 700;
  font-size: var(--t-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ember);
  margin: 0;
}
.label-quiet { color: var(--fg-faint); }

h1, h2, h3 { margin: 0; text-wrap: balance; }

.h1 {
  font-family: var(--display);
  font-size: var(--t-h1);
  line-height: 0.94;
  text-transform: uppercase;
}
.h2 {
  font-family: var(--display);
  font-size: var(--t-h2);
  line-height: 1.02;
  text-transform: uppercase;
  margin-top: 0.85rem;
}
.h3 {
  font-family: var(--narrow);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--fg-quiet); max-width: 34em; margin: 1.5rem 0 0; }
.copy { max-width: 38em; color: var(--fg-quiet); margin: 1.1rem 0 0; }

.rule-accent { width: 58px; height: 3px; background: var(--ember); border: 0; margin: 1.35rem 0 0; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: rgba(18, 23, 26, 0);
  border-bottom: 1px solid transparent;
  transition: background 240ms ease, border-color 240ms ease;
}
.site-header.is-stuck {
  background: rgba(18, 23, 26, 0.94);
  border-bottom-color: var(--rule-dark);
  backdrop-filter: blur(8px);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; height: var(--head-h);
}

.mark { display: flex; align-items: baseline; gap: 0.55rem; text-decoration: none; }
.mark-name {
  font-family: var(--display); font-size: 1.375rem;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--white);
}
.mark-sub {
  font-family: var(--narrow); font-weight: 700; font-size: 0.625rem;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--ember);
}

.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav a {
  font-family: var(--narrow); font-weight: 700; font-size: var(--t-label);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--steel-hi); text-decoration: none; padding-block: 0.5rem;
  transition: color 160ms ease;
}
.nav a:hover { color: var(--white); }
@media (max-width: 940px) { .nav a:not(.btn) { display: none; } }

.btn {
  display: inline-block;
  font-family: var(--narrow); font-weight: 700; font-size: var(--t-label);
  letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  padding: 0.72rem 1.2rem;
  border: 1px solid var(--ember); color: var(--ember); background: transparent;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn:hover { background: var(--ember); color: var(--white); }
.btn-solid { background: var(--ember); color: var(--white); }
.btn-solid:hover { background: var(--ember-deep); border-color: var(--ember-deep); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(92svh, 860px);
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--ink); overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
/* Pulled well down the frame so the hot forging in the lower right of the
   shot sits inside the crop instead of being cut by the bottom edge. */
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 82%; }
/* The type sits lower left and the hot forgings sit upper right, so the veil
   runs on the diagonal: it seats the headline without dulling the glow that
   is the whole reason for using this photograph. */
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to top right,
                    rgba(18,23,26,0.93) 0%, rgba(18,23,26,0.62) 30%,
                    rgba(18,23,26,0.18) 58%, rgba(18,23,26,0) 78%),
    linear-gradient(to top,
                    rgba(18,23,26,0.90) 0%, rgba(18,23,26,0.30) 26%,
                    rgba(18,23,26,0.06) 55%, rgba(18,23,26,0.40) 100%);
}
.hero-body { position: relative; padding-top: 10rem; padding-bottom: 3rem; }
.hero .h1 { margin-top: 1.4rem; max-width: 21ch; }

/* Ember on a photograph of orange-hot steel is unreadable, so the hero
   eyebrow keeps the accent as a mark and takes its text from the paper. */
.hero .label { display: flex; align-items: center; gap: 0.7rem; color: var(--paper); }
.hero .label::before { content: ""; width: 9px; height: 9px; background: var(--ember); flex: none; }

.hero-figs {
  position: relative;
  border-top: 1px solid var(--rule-dark);
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.hero-figs .fig { padding: 1.5rem 0 2rem; }
.hero-figs .fig + .fig { border-left: 1px solid var(--rule-dark); padding-left: 1.75rem; }

.fig-n {
  font-family: var(--display); font-size: var(--t-fig); line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--white);
}
.fig-l {
  font-family: var(--narrow); font-weight: 700; font-size: var(--t-label);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ember);
  margin-top: 0.5rem;
}
.fig-s { font-size: var(--t-sm); color: var(--fg-faint); margin-top: 0.15rem; }

@media (max-width: 720px) {
  .hero-figs { grid-template-columns: 1fr; }
  .hero-figs .fig + .fig { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule-dark); }
}

/* --------------------------------------------------------------------------
   Bore envelope — full bleed of the content column, because it is the one
   graphic on the page that wants every pixel of width it can get.
   -------------------------------------------------------------------------- */
.envelope { margin: 3.5rem 0 0; }
.envelope-scroll { overflow-x: auto; padding-bottom: 0.5rem; }
.envelope svg { display: block; min-width: 700px; width: 100%; height: auto; }

.bore-ring { fill: var(--paper-2); stroke: var(--steel); stroke-width: 1.6; }
.bore-dn { font-family: var(--narrow); font-weight: 700; font-size: 15px; letter-spacing: 0.1em; fill: var(--ink); }
.bore-mm { font-family: var(--body); font-size: 12.5px; fill: var(--fg-faint); font-variant-numeric: tabular-nums; }
.bore-axis { stroke: var(--rule-light); stroke-width: 1; }
.bore-bracket { stroke: var(--ember); stroke-width: 1.6; fill: none; }
.bore-bracket-t {
  font-family: var(--narrow); font-weight: 700; font-size: 12px;
  letter-spacing: 0.2em; fill: var(--ember);
}

.envelope-notes {
  margin: 2rem 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem;
  font-family: var(--narrow); font-size: 0.9375rem; letter-spacing: 0.04em;
  color: var(--fg-quiet); font-variant-numeric: tabular-nums;
}
.envelope-notes b { color: var(--ink); font-weight: 700; }

/* --------------------------------------------------------------------------
   Data table
   -------------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; }
table.data { width: 100%; min-width: 620px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.data th {
  text-align: left;
  font-family: var(--narrow); font-weight: 700; font-size: var(--t-label);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ember);
  padding: 0 1.2rem 0.7rem 0; border-bottom: 1px solid var(--ember);
}
table.data td {
  padding: 0.85rem 1.2rem 0.85rem 0; border-bottom: 1px solid var(--rule);
  font-size: 1rem; color: var(--fg-quiet); vertical-align: top;
}
table.data td:first-child { color: var(--fg); font-weight: 600; }

/* --------------------------------------------------------------------------
   Column sets
   -------------------------------------------------------------------------- */
.cols { display: grid; gap: clamp(1.75rem, 1rem + 2.5vw, 3.5rem); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 820px) { .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cols-2, .cols-3 { grid-template-columns: minmax(0, 1fr); } }

.stack { margin-top: 3rem; }

.spec-list { margin: 1rem 0 0; padding: 0; list-style: none; }
.spec-list li {
  position: relative; padding: 0.55rem 0 0.55rem 1.1rem;
  border-bottom: 1px solid var(--rule); color: var(--fg-quiet); font-size: 1rem;
}
.spec-list li::before {
  content: ""; position: absolute; left: 0; top: 1.15em;
  width: 5px; height: 5px; background: var(--ember);
}
.col-head { padding-bottom: 0.7rem; border-bottom: 1px solid var(--ember); }

/* --------------------------------------------------------------------------
   Process — a genuine seven-step sequence, so the numbering carries meaning
   -------------------------------------------------------------------------- */
.steps { margin: 0; padding: 0; list-style: none; display: grid; }
.step {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0 1.25rem; padding: 1.35rem 0; border-top: 1px solid var(--rule);
}
.step:last-child { border-bottom: 1px solid var(--rule); }
.step-n { font-family: var(--display); font-size: 1.6rem; line-height: 1.1; color: var(--ember); font-variant-numeric: tabular-nums; }
.step-t {
  font-family: var(--narrow); font-weight: 700; font-size: 1.0625rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg);
}
.step-d { margin: 0.35rem 0 0; color: var(--fg-quiet); font-size: 1rem; }

.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3.5rem; }
.shot { position: relative; overflow: hidden; margin: 0; background: var(--shell); }
.shot img { width: 100%; height: clamp(200px, 20vw, 280px); object-fit: cover; }
.shot figcaption {
  position: absolute; left: 1rem; bottom: 0.85rem;
  font-family: var(--narrow); font-weight: 700; font-size: var(--t-label);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--white);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}
@media (max-width: 720px) { .shots { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Plant — full-bleed image against a data panel
   -------------------------------------------------------------------------- */
.plant { display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; }
.plant-media img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.plant-body { padding: clamp(2rem, 1rem + 3.5vw, 4.5rem); }
@media (max-width: 940px) { .plant { grid-template-columns: 1fr; } }

.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2rem; margin-top: 2.5rem; }
.figs .fig-n { font-size: 1.85rem; }
@media (max-width: 480px) { .figs { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Energy band
   -------------------------------------------------------------------------- */
.band { border-top: 3px solid var(--ember); }
.band-tags {
  margin: 1.1rem 0 0;
  font-family: var(--narrow); font-weight: 700; font-size: var(--t-label);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ember);
}

/* --------------------------------------------------------------------------
   Enquiry form
   -------------------------------------------------------------------------- */
.form { margin: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.75rem; }
.form-grid .wide { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field label {
  font-family: var(--narrow); font-weight: 700; font-size: var(--t-label);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ember);
}
.field .opt { color: var(--fg-faint); letter-spacing: 0.14em; }

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--fg);
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.7rem 0.85rem;
  transition: border-color 150ms ease, background 150ms ease;
}
.field textarea { min-height: 8.5rem; resize: vertical; line-height: 1.55; }
.field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--steel-hi) 50%),
    linear-gradient(135deg, var(--steel-hi) 50%, transparent 50%);
  background-position: right 1.05rem center, right 0.75rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}
.field select option { background: var(--shell); color: var(--paper); }
.field input::placeholder, .field textarea::placeholder { color: var(--steel); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--steel); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--ember);
  background: rgba(226, 87, 30, 0.06);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--ember-lo); }

/* honeypot: hidden from people, tempting to bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; margin-top: 2rem; }
.form-note { font-size: var(--t-sm); color: var(--fg-faint); max-width: 34em; margin: 0; }

.form-status {
  margin: 1.75rem 0 0;
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--ember);
  background: var(--field);
  font-size: 1rem;
  color: var(--fg);
}
.form-status[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.cta-media {
  position: relative;
  overflow: hidden;
  width: min(calc(100% - (var(--pad) * 2)), 1280px);
  aspect-ratio: 18 / 10;
  margin: clamp(2rem, 1rem + 3vw, 4rem) auto 0;
  background: var(--ink);
}
.cta-media .enquiry-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.94) contrast(1.05);
}
.cta-media::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 48%, rgba(18,23,26,0) 50%, rgba(18,23,26,0.16) 74%, rgba(18,23,26,0.58) 100%),
              linear-gradient(to right, rgba(18,23,26,0.52), rgba(18,23,26,0) 18%, rgba(18,23,26,0) 82%, rgba(18,23,26,0.52)),
              linear-gradient(to bottom, rgba(18,23,26,0.36), rgba(18,23,26,0) 18%, rgba(18,23,26,0.06) 64%, rgba(18,23,26,0.82));
  pointer-events: none;
}
@media (max-width: 640px) {
  .cta-media { aspect-ratio: 4 / 3; }
}

.contact-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem; margin: 0; padding-top: 2.25rem; border-top: 1px solid var(--rule);
}
@media (max-width: 820px) { .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-grid dt {
  font-family: var(--narrow); font-weight: 700; font-size: var(--t-label);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ember);
}
.contact-grid dd { margin: 0.45rem 0 0; color: var(--paper); }
.contact-grid .placeholder { color: var(--steel-lo); }

.cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--rule-dark); padding-block: 2.5rem 3rem; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; justify-content: space-between; align-items: flex-end; }
.footer-note {
  font-family: var(--narrow); font-size: var(--t-label); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--steel); margin: 0;
}
.footer-legal { font-size: 0.8125rem; color: var(--steel); margin: 0.6rem 0 0; }

/* --------------------------------------------------------------------------
   Load-in: the bores draw themselves once, smallest first
   -------------------------------------------------------------------------- */
.bore { transform-box: fill-box; transform-origin: center; }
.js .envelope:not(.is-in) .bore { transform: scale(0.001); }
.js .envelope.is-in .bore { animation: bore-in 420ms cubic-bezier(0.22, 0.72, 0.3, 1) both; }
@keyframes bore-in { from { transform: scale(0.001); } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .js .envelope:not(.is-in) .bore { transform: none; }
  .js .envelope.is-in .bore { animation: none; }
  .site-header { transition: none; }
}

/* ==========================================================================
   2026-10 additions — registered logo, certificate exhibit, insights cards
   ========================================================================== */

/* Skip link: visible only once it has focus. */
.skip {
  position: absolute; left: 0.5rem; top: -4rem; z-index: 100;
  padding: 0.6rem 1rem; background: var(--ember); color: #fff;
  font: 700 0.85rem/1 var(--narrow); letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none; border-radius: 2px;
  transition: top 160ms ease;
}
.skip:focus { top: 0.5rem; }

/* The registered lockup stands alone — no typeset "Co., Ltd." appended to
   it. The EUIPO master is 549.9011 x 113.3858, a ratio of 4.8498 : 1. Only
   the height is set; the width follows from the SVG's own intrinsic ratio,
   so the trademark is reproduced at exactly the proportions it was drawn
   and filed in. aspect-ratio reserves the box before the SVG loads. */
.mark {
  display: flex;
  align-items: center;
  gap: 0;
}
.mark-logo {
  display: block;
  height: clamp(32px, 1.3rem + 1.5vw, 44px);
  width: auto;
  aspect-ratio: 549.9011 / 113.3858;
}
.site-footer .mark-logo { height: 40px; }

/* ----------------------------------------------------- the certificate ---
   One contained card rather than two columns floating on the page. The
   certificate is tall and the facts beside it are short, so the previous
   full-width split left a large empty quarter that read as a mistake. A
   bounded panel with the two halves centred against each other makes the
   remaining space look deliberate, and caps the measure so the lines stay
   readable instead of running the full 1320 px.
   ------------------------------------------------------------------------ */
/* The card sits in the split's right-hand column, so it is narrower than
   before: sheet and facts share roughly 700 px. Centring the two halves
   against each other keeps the tall sheet from making the block top-heavy. */
.cert {
  display: grid;
  grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  align-items: center;
  padding: clamp(1.25rem, 0.75rem + 1.5vw, 2rem);
  background: var(--shell-2);
  border: 1px solid var(--rule-dark);
}
@media (max-width: 860px) { .cert { grid-template-columns: 1fr; align-items: start; } }

.cert-sheet {
  display: block;
  background: var(--white);
  padding: 0.6rem;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.cert-sheet img { display: block; width: 100%; height: auto; }
.cert-sheet:hover, .cert-sheet:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
}

.cert-std {
  margin: 0 0 1.15rem;
  font: 400 clamp(1.7rem, 1rem + 1.6vw, 2.25rem)/1 var(--display);
  color: var(--ember); letter-spacing: 0.01em;
}

/* Label above value, one pair per row. At this measure a side-by-side
   label column would squeeze the registrar's name to three lines. */
.cert-facts {
  margin: 0; display: grid; gap: 1.05rem;
  border-top: 1px solid var(--rule-dark); padding-top: 1.35rem;
}
.cert-facts dt {
  font: 700 0.66rem/1 var(--narrow);
  letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--ember); margin-bottom: 0.3rem;
}
.cert-facts dd { margin: 0; color: var(--fg); font-size: 1rem; line-height: 1.4; }

.cert-note {
  margin: 1.35rem 0 0; padding-top: 1.2rem;
  border-top: 1px solid var(--rule-dark);
  font-size: 0.9rem; line-height: 1.55; color: var(--fg-faint);
}

/* --------------------------------------------------------- insights ----- */
.insight-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.insight {
  display: flex; flex-direction: column;
  background: var(--shell-2);
  border: 1px solid var(--rule-dark);
  text-decoration: none; color: inherit;
  transition: border-color 200ms ease, transform 200ms ease;
}
.insight:hover, .insight:focus-visible {
  border-color: var(--ember); transform: translateY(-2px);
}
.insight img { width: 100%; height: 170px; object-fit: cover; display: block; }
.insight-body { padding: 1.15rem 1.25rem 1.4rem; }
.insight-kicker {
  font: 700 0.66rem/1 var(--narrow); letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--ember); margin: 0 0 0.5rem;
}
.insight-t {
  font: 400 1.18rem/1.2 var(--display); color: var(--white);
  margin: 0 0 0.55rem; letter-spacing: 0.01em;
}
.insight-d { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--fg-quiet); }
.insight-more {
  margin-top: 0.9rem; font: 700 0.72rem/1 var(--narrow);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember);
}

/* ----------------------------------------------------- article pages ---- */
.article { max-width: 46rem; }
.article-head {
  padding-top: calc(var(--head-h) + clamp(2rem, 1rem + 3vw, 3.5rem));
  padding-bottom: clamp(3.5rem, 2rem + 4vw, 6rem);
}
.breadcrumb {
  font: 0.78rem/1 var(--narrow); color: var(--fg-faint);
  letter-spacing: 0.04em; margin: 0 0 1.25rem;
}
.breadcrumb a { color: var(--fg-quiet); }
.article h2 {
  font: 400 clamp(1.45rem, 1rem + 1.5vw, 2rem)/1.12 var(--display);
  color: var(--ink); letter-spacing: 0.01em;
  margin: 2.6rem 0 0.4rem; padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--ember);
}
.article h3 {
  font: 700 1.02rem/1.3 var(--body); color: var(--ink);
  margin: 1.9rem 0 0.4rem;
}
.article p { margin: 0 0 1rem; line-height: 1.68; }
.article ul { margin: 0 0 1.2rem; padding-left: 1.1rem; }
.article li { margin-bottom: 0.5rem; line-height: 1.6; }
.article .standfirst {
  font-size: 1.12rem; line-height: 1.55; color: var(--fg-faint);
  margin-bottom: 1.8rem;
}
.pullquote {
  margin: 2rem 0; padding: 0.2rem 0 0.2rem 1.4rem;
  border-left: 3px solid var(--ember);
}
.pullquote p { font-size: 1.1rem; line-height: 1.5; font-style: italic; margin-bottom: 0.5rem; }
.pullquote cite { font-size: 0.85rem; color: var(--fg-faint); font-style: normal; }
.article-figure { margin: 2rem 0; }
.article-figure img { width: 100%; height: auto; display: block; }
.article-figure figcaption {
  font: 0.8rem/1.4 var(--narrow); color: var(--fg-faint);
  padding-top: 0.5rem;
}
.faq-q { font-weight: 700; margin: 1.5rem 0 0.35rem; color: var(--ink); }


/* Metric and imperial size, one above the other in the same face. */
.size-cell { white-space: nowrap; }

/* Material table: short labels can wrap, so the section no longer needs a horizontal scrollbar. */
.size-table { min-width: 0; table-layout: fixed; }
.size-table th, .size-table td { white-space: normal; padding-right: 0.75rem; }
.size-table .size-cell { white-space: nowrap; }
/* The last column needs no gutter. */
.size-table th:last-child, .size-table td:last-child { padding-right: 0; }
@media (max-width: 520px) {
  .size-table th, .size-table td { font-size: 0.9rem; padding-right: 0.5rem; }
  .size-table th { letter-spacing: 0.12em; }
  .size-table .size-cell { white-space: normal; }
}

/* A single wide shot, not one of the three-up .shots row. Used at the head of
   the product programme, where the section previously had no photograph at
   all even though the Product schema named one. */
/* A single wide shot closing the product programme. No caption: the section
   above it has already named the part, the material and the surface. */
.shot-wide { margin-top: clamp(2.5rem, 1rem + 3vw, 4rem); }
.shot-wide img { height: clamp(200px, 22vw, 320px); }