/* ==========================================================================
   TERK ENERGY design system
   One variable grotesque worked across its width axis. Paper and plate.
   Gold hairlines as the only structural ornament.
   ========================================================================== */

/* --- Face ---------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-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;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  /* Ground */
  --paper: #f6f6f3;
  --paper-sunk: #ebebe6;
  --white: #fff;

  /* Ink: blue-black, taken from the mark */
  --ink: #0b1119;
  --ink-soft: #3d4a59; /* 8.4:1 on paper */
  --ink-faint: #5b6875; /* 5.2:1 on paper */
  --rule-light: #d8d8d1;

  /* Plate: dark section ground */
  --plate: #0c141e;
  --plate-raised: #142234;
  --on-plate: #eef1f4;
  --on-plate-soft: #a9b6c4; /* 8.6:1 on plate */
  --rule-plate: rgba(233, 240, 248, 0.16);

  /* Gold: the mark's metallic range */
  --gold: #b8842a;
  --gold-deep: #8a6116; /* 5.0:1 on paper, for small text */
  --gold-lift: #dfb35c; /* 9.5:1 on plate */
  --steel: #1d3a5c;

  /* Text sitting directly on graded photography, one step warmer than
     --on-plate-soft so it holds against a scrim rather than a flat field. */
  --on-photo: #cfd8e2;
  --placeholder-plate: #8794a3;
  --foot-faint: #7d8b9a;

  /* Success state. Error tokens already live with the field styles. */
  --ok-ink: #1f5c40;
  --ok-stroke: #2f7a55;
  --ok-on-plate: #8fd3ae;

  /* Measure */
  --measure: 68ch;
  --measure-tight: 46ch;
  --measure-lead: 54ch;

  /* Frame */
  --shell: 1320px;
  --shell-text: 1120px;
  --gutter: clamp(1.25rem, 4.4vw, 4rem);
  --band: clamp(4.75rem, 8.5vw, 9rem);
  --band-tight: clamp(3.25rem, 5.5vw, 5.5rem);

  /* Type */
  --display-xl: clamp(2.6rem, 5.9vw, 5.25rem);
  --display-l: clamp(2.1rem, 4.2vw, 3.5rem);
  --display-m: clamp(1.75rem, 3vw, 2.6rem);
  --h3: clamp(1.2rem, 1.55vw, 1.5rem);
  --body: 1.0625rem;
  --lead: clamp(1.125rem, 1.5vw, 1.3125rem);
  --label: 0.75rem;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.62s;
}

/* --- Reset --------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--body);
  font-weight: 400;
  line-height: 1.6;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}

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

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

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

/* --- Focus --------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 1px;
}
.plate :focus-visible,
.hero :focus-visible { outline-color: var(--gold-lift); }

.skip {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 200;
  transform: translateY(-140%);
  background: var(--ink);
  color: var(--paper);
  padding: 0.85rem 1.25rem;
  font-size: var(--label);
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.2s var(--ease);
}
.skip:focus { transform: translateY(0); }

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

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

.band { padding-block: var(--band); }
.band--tight { padding-block: var(--band-tight); }

.plate {
  background: var(--plate);
  color: var(--on-plate);
}
.plate a { color: var(--on-plate); }
.sunk { background: var(--paper-sunk); }

/* --- Type ---------------------------------------------------------------- */

.display {
  font-size: var(--display-xl);
  font-weight: 620;
  font-stretch: 116%;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}

.h2 {
  font-size: var(--display-l);
  font-weight: 620;
  font-stretch: 112%;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0;
}

.h3 {
  font-size: var(--h3);
  font-weight: 650;
  font-stretch: 106%;
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 0;
}

.label {
  font-size: var(--label);
  font-weight: 680;
  font-stretch: 88%;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--gold-deep);
  margin: 0;
}
.plate .label,
.hero .label { color: var(--gold-lift); }

.lead {
  font-size: var(--lead);
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink-soft);
  max-width: var(--measure-lead);
  letter-spacing: -0.006em;
}
.plate .lead { color: var(--on-plate-soft); }

.prose {
  max-width: var(--measure);
  color: var(--ink-soft);
}
.prose p + p { margin-top: 1.15em; }
.plate .prose { color: var(--on-plate-soft); }

.pull {
  font-size: var(--display-m);
  font-weight: 500;
  font-stretch: 104%;
  line-height: 1.16;
  letter-spacing: -0.022em;
  max-width: 22ch;
  text-wrap: balance;
  color: var(--ink);
}
.plate .pull { color: var(--on-plate); }

strong, b { font-weight: 640; }

/* Section heads: more space above than below. */
.head { margin-bottom: clamp(2.25rem, 3.6vw, 3.5rem); }
.head .h2 + .lead { margin-top: 1.35rem; }

/* --- Gold rule ----------------------------------------------------------- */

.rule {
  height: 1px;
  border: 0;
  background: var(--gold);
  transform-origin: left center;
  margin: 0;
}
.plate .rule,
.hero .rule { background: var(--gold-lift); opacity: 0.85; }
.rule--faint { background: var(--rule-light); }
.plate .rule--faint { background: var(--rule-plate); opacity: 1; }

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.6rem;
  font-size: 0.875rem;
  font-weight: 680;
  font-stretch: 94%;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: background 0.24s var(--ease), color 0.24s var(--ease),
    border-color 0.24s var(--ease), transform 0.24s var(--ease);
}
.btn .ico { transition: transform 0.32s var(--ease); }
.btn:hover { background: var(--gold-deep); color: #fff; }
.btn:hover .ico { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }

.btn--gold { background: var(--gold); color: #1a1204; }
.btn--gold:hover { background: var(--gold-lift); color: #1a1204; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: rgba(11, 17, 25, 0.32);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.plate .btn--ghost,
.hero .btn--ghost { color: var(--on-plate); border-color: rgba(238, 241, 244, 0.4); }
.plate .btn--ghost:hover,
.hero .btn--ghost:hover { background: var(--on-plate); color: var(--plate); border-color: var(--on-plate); }

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* Text link with a drawn underline */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 660;
  font-stretch: 96%;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--gold-deep);
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.34s var(--ease), color 0.2s var(--ease);
}
.link .ico { transition: transform 0.32s var(--ease); }
.link:hover { background-size: 0 1px; }
.link:hover .ico { transform: translateX(4px); }
.plate .link,
.hero .link { color: var(--gold-lift); }

/* --- Icons --------------------------------------------------------------- */

.ico {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.ico--lg { width: 2.5rem; height: 2.5rem; stroke-width: 1.25; }

/* --- Photography --------------------------------------------------------
   One grade across every frame so ten stock photographs read as one
   art direction.
   ------------------------------------------------------------------------ */

.ph {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--plate);
}
.ph > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.66) contrast(1.09) brightness(0.92);
}
/* Hue wash: pulls every frame onto the same steel-blue axis, so a red
   workshop wall and an open sea belong to one art direction. */
.ph::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #17293d;
  mix-blend-mode: color;
  opacity: 0.55;
  pointer-events: none;
}
.ph::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(12, 20, 30, 0.3) 0%, rgba(12, 20, 30, 0.12) 45%, rgba(12, 20, 30, 0.46) 100%);
  pointer-events: none;
}
.ph--flat::after { background: rgba(12, 20, 30, 0.28); }

/* Terk's own photography. The unifying grade exists to make mismatched stock
   belong to one set; applied to a picture carrying Terk's mark on a hard hat it
   flattens the gold to grey and greys out the hi-vis, which is the opposite of
   the point. These frames get a lighter treatment: enough to sit with the rest,
   not enough to suppress the brand. As more stock is replaced with Terk's own
   images, more of the set moves to this grade, and eventually all of it. */
.ph--own > img { filter: grayscale(0.26) contrast(1.05) brightness(0.97); }
.ph--own::before { opacity: 0.2; }
.ph--own::after {
  background: linear-gradient(180deg, rgba(12, 20, 30, 0.16) 0%, rgba(12, 20, 30, 0.05) 45%, rgba(12, 20, 30, 0.28) 100%);
}

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

.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: var(--plate);
  border-bottom: 1px solid var(--rule-plate);
}

.masthead__in {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.75rem);
  min-height: 5rem;
  position: relative;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--on-plate);
  margin-right: auto;
}
.brand img { width: auto; height: 2.5rem; }
.brand__name {
  font-size: 1.0625rem;
  font-weight: 700;
  font-stretch: 108%;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.brand__name span { color: var(--gold-lift); font-weight: 500; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav a {
  position: relative;
  font-size: 0.8125rem;
  font-weight: 620;
  font-stretch: 92%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--on-plate);
  padding-block: 0.6rem;
  transition: color 0.2s var(--ease);
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold-lift);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s var(--ease);
}
.nav a:hover::after,
.nav a[aria-current='page']::after { transform: scaleX(1); }
.nav a[aria-current='page'] { color: var(--gold-lift); }

.masthead .btn { padding: 0.72rem 1.15rem; font-size: 0.75rem; white-space: nowrap; }

/* The in-nav action exists for the mobile panel only. */
@media (min-width: 56rem) {
  .nav > .btn { display: none; }
}

.burger {
  display: none;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: 1px solid rgba(238, 241, 244, 0.34);
  color: var(--on-plate);
  padding: 0.6rem 0.85rem;
  font-size: 0.6875rem;
  font-weight: 680;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 44rem;
  min-height: min(92vh, 58rem);
  min-height: min(92svh, 58rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 9rem;
  background: var(--plate);
  color: var(--on-plate);
  overflow: hidden;
}
.hero__ph {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 46%;
  filter: grayscale(0.34) contrast(1.12) brightness(0.94) saturate(0.86);
}
/* Asymmetric scrim: heavy under the copy, near-clear over the right two
   thirds so the rig stays readable instead of dissolving into the field. */
.hero__ph::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(94deg, rgba(8, 13, 20, 0.93) 0%, rgba(8, 13, 20, 0.85) 33%, rgba(8, 13, 20, 0.52) 60%, rgba(8, 13, 20, 0.1) 100%),
    linear-gradient(180deg, rgba(8, 13, 20, 0.46) 0%, rgba(8, 13, 20, 0) 34%, rgba(8, 13, 20, 0.58) 100%);
}
@media (max-width: 61.999rem) {
  /* No empty right half to protect once the copy spans the width. */
  .hero__ph::after {
    background: linear-gradient(180deg, rgba(8, 13, 20, 0.62) 0%, rgba(8, 13, 20, 0.34) 38%, rgba(8, 13, 20, 0.82) 100%);
  }
}

.hero__body {
  padding-bottom: clamp(2.75rem, 5vw, 4.5rem);
  max-width: 60rem;
}
.hero .display { max-width: 17ch; }
.hero__lead {
  margin-top: 1.6rem;
  font-size: var(--lead);
  line-height: 1.5;
  color: var(--on-photo);
  max-width: 46ch;
}
.hero .actions { margin-top: 2.35rem; }

/* Service index pinned across the base of the first viewport */
.index {
  border-top: 1px solid var(--rule-plate);
  background: rgba(8, 13, 20, 0.42);
  backdrop-filter: blur(2px);
}
.index__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.index__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem 1.75rem 1.5rem 0;
  text-decoration: none;
  color: var(--on-plate);
  border-left: 1px solid var(--rule-plate);
  padding-left: 1.75rem;
  transition: background 0.28s var(--ease);
}
.index__item:first-child { border-left: 0; padding-left: 0; }
.index__item:hover { background: rgba(238, 241, 244, 0.05); }
.index__item .ico { color: var(--gold-lift); width: 1.6rem; height: 1.6rem; margin-top: 0.15rem; }
.index__name {
  font-size: 0.9375rem;
  font-weight: 660;
  font-stretch: 100%;
  letter-spacing: 0.01em;
  line-height: 1.25;
}
.index__note {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--on-plate-soft);
}

/* --- Page header (inner pages) ------------------------------------------ */

.pagehead {
  position: relative;
  isolation: isolate;
  background: var(--plate);
  color: var(--on-plate);
  padding-top: clamp(9rem, 14vw, 13rem);
  padding-bottom: clamp(3.5rem, 6vw, 6rem);
  overflow: hidden;
}
.pagehead__ph { position: absolute; inset: 0; z-index: -1; isolation: isolate; }
.pagehead__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.72) contrast(1.06) brightness(0.62);
}
.pagehead__ph::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #17293d;
  mix-blend-mode: color;
  opacity: 0.6;
}
.pagehead__ph::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(96deg, rgba(8, 13, 20, 0.94) 0%, rgba(8, 13, 20, 0.72) 55%, rgba(8, 13, 20, 0.5) 100%);
}
.pagehead .display { max-width: 20ch; }
.pagehead .lead { margin-top: 1.5rem; color: var(--on-photo); }

.crumbs {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--label);
  font-weight: 660;
  font-stretch: 90%;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-plate-soft);
  margin-bottom: 1.35rem;
}
.crumbs a { text-decoration: none; color: var(--gold-lift); }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumbs span[aria-hidden] { color: rgba(169, 182, 196, 0.55); }

/* --- Split (text + figure) ---------------------------------------------- */

.split {
  display: grid;
  gap: clamp(2.25rem, 5vw, 5rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-text { grid-template-columns: 1.15fr 0.85fr; }
  .split--flip > :first-child { order: 2; }
}
/* A section whose photograph has not been supplied yet spans the grid rather
   than sitting in half of it beside nothing. A stratum fills the width, because
   its two-column scope list uses it. A split caps to a reading measure, so the
   rule ends with the prose instead of trailing across empty ground. Both revert
   on their own the moment a figure is added back. */
.split > :only-child,
.stratum__grid > :only-child { grid-column: 1 / -1; }
.split > :only-child { max-width: 52rem; }
.split .ph { aspect-ratio: 4 / 3; }

/* --- Stratum (service band) ---------------------------------------------
   Full-bleed alternating bands. Deliberately not a card grid.
   ------------------------------------------------------------------------ */

.stratum { border-top: 1px solid var(--rule-light); }
.stratum:first-of-type { border-top: 0; }
.stratum__grid {
  display: grid;
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 62rem) {
  .stratum__grid { grid-template-columns: 0.92fr 1.08fr; }
  .stratum--flip .stratum__grid > :first-child { order: 2; }
}
/* Height derives from width, never from the neighbouring text column;
   otherwise a long scope list inflates the figure until it paints over the copy. */
.stratum .ph { aspect-ratio: 5 / 4; align-self: start; }
.stratum .h2 { font-size: var(--display-m); }
.stratum__body { margin-top: 1.35rem; max-width: var(--measure); color: var(--ink-soft); }

/* --- Scope list ---------------------------------------------------------- */

.scope {
  margin-top: 2.25rem;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule-light);
}
@media (min-width: 44rem) {
  .scope--two { grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 3vw, 3rem); }
  /* An odd final item runs the full measure rather than leaving a half rule. */
  .scope--two > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.scope li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule-light);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink);
}
.scope li .ico {
  width: 0.95rem;
  height: 0.95rem;
  margin-top: 0.35rem;
  color: var(--gold-deep);
  stroke-width: 2;
}
.plate .scope,
.plate .scope li { border-color: var(--rule-plate); }
.plate .scope li { color: var(--on-plate); }
.plate .scope li .ico { color: var(--gold-lift); }

/* --- Ruled rows (values, commitments) ------------------------------------ */

.rows { border-top: 1px solid var(--rule-light); }
.plate .rows { border-color: var(--rule-plate); }
.rows > li {
  display: grid;
  gap: 0.5rem 2.5rem;
  padding: clamp(1.5rem, 2.6vw, 2.25rem) 0;
  border-bottom: 1px solid var(--rule-light);
}
.plate .rows > li { border-color: var(--rule-plate); }
@media (min-width: 52rem) {
  .rows > li { grid-template-columns: minmax(12rem, 0.42fr) 1fr; align-items: baseline; }
}
.rows__term {
  font-size: var(--h3);
  font-weight: 650;
  font-stretch: 106%;
  letter-spacing: -0.012em;
  line-height: 1.2;
}
.rows__def { color: var(--ink-soft); max-width: var(--measure); }
.plate .rows__def { color: var(--on-plate-soft); }
.rows--gold .rows__term { color: var(--gold-deep); }
.plate .rows--gold .rows__term { color: var(--gold-lift); }

/* --- Table (track record) ------------------------------------------------ */

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.record {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.9375rem;
}
table.record caption {
  text-align: left;
  color: var(--ink-faint);
  font-size: 0.875rem;
  padding-bottom: 1.1rem;
}
table.record th,
table.record td {
  padding: 1.05rem 1.25rem 1.05rem 0;
  border-bottom: 1px solid var(--rule-light);
  vertical-align: top;
}
table.record thead th {
  font-size: var(--label);
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-deep);
  border-bottom-color: var(--gold);
  padding-bottom: 0.85rem;
}
table.record tbody th { font-weight: 600; }
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  font-stretch: 90%;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
}
.status::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  background: currentColor;
  flex: none;
}
.status--open { color: var(--gold-deep); }
.status--done { color: #2f6a4f; }

/* --- Placeholder ---------------------------------------------------------
   Visible, honest, and impossible to mistake for verified fact.
   ------------------------------------------------------------------------ */

.tbc {
  border: 1px dashed var(--gold);
  background: rgba(184, 132, 42, 0.07);
  padding: clamp(1.25rem, 2.4vw, 1.85rem);
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.tbc b {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--gold-deep);
  font-size: var(--label);
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.plate .tbc {
  border-color: rgba(223, 179, 92, 0.65);
  background: rgba(223, 179, 92, 0.09);
  color: var(--on-plate-soft);
}
.plate .tbc b { color: var(--gold-lift); }

/* Inline sibling of .tbc, for a claim that is written but not yet verified. */
.unconfirmed {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.2rem 0.5rem;
  border: 1px dashed var(--gold);
  background: rgba(184, 132, 42, 0.09);
  color: var(--gold-deep);
  font-size: 0.6875rem;
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  vertical-align: 0.18em;
  white-space: nowrap;
}
.plate .unconfirmed {
  border-color: rgba(223, 179, 92, 0.7);
  background: rgba(223, 179, 92, 0.12);
  color: var(--gold-lift);
}

/* --- Statement (pull quote band) ----------------------------------------- */

.statement { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); }
@media (min-width: 62rem) {
  .statement { grid-template-columns: 0.36fr 1fr; align-items: start; }
}
/* Stacked, the margin label would sit directly above the statement and read
   as a kicker. It still names the section for assistive technology. */
@media (max-width: 61.999rem) {
  .statement > :first-child {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* --- Contact ------------------------------------------------------------- */

.contactgrid { display: grid; gap: clamp(2.5rem, 5vw, 5rem); }
@media (min-width: 62rem) {
  /* The form is the taller column, so give it the greater share and let the
     details rail travel with the scroll instead of leaving dead paper below it. */
  .contactgrid { grid-template-columns: 0.82fr 1.18fr; align-items: start; }
  .contactgrid > :first-child { position: sticky; top: 7.5rem; }
}

.detail { border-top: 1px solid var(--rule-light); }
.detail > div {
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--rule-light);
  display: grid;
  gap: 0.35rem 1.5rem;
}
@media (min-width: 34rem) {
  .detail > div { grid-template-columns: 8.5rem 1fr; align-items: baseline; }
  /* A second value under the same term, such as the second telephone number,
     sits under the first rather than under the label. */
  .detail dd + dd { grid-column: 2; }
}
.detail dt {
  font-size: var(--label);
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.detail dd {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 500;
}
.detail dd a { text-decoration: none; border-bottom: 1px solid rgba(184, 132, 42, 0.55); }
.detail dd a:hover { border-bottom-color: var(--gold-deep); color: var(--gold-deep); }

.plate .detail,
.plate .detail > div { border-color: var(--rule-plate); }
.plate .detail dt { color: var(--gold-lift); }
.plate .detail dd a { border-bottom-color: rgba(223, 179, 92, 0.5); }
.plate .detail dd a:hover { border-bottom-color: var(--gold-lift); color: var(--gold-lift); }

/* --- Form ---------------------------------------------------------------- */

.field { display: grid; gap: 0.5rem; margin-bottom: 1.35rem; }
.field label {
  font-size: var(--label);
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.field .opt { color: var(--ink-faint); font-weight: 500; letter-spacing: 0.1em; }
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--white);
  border: 1px solid #c9c9c1;
  color: var(--ink);
  padding: 0.9rem 1rem;
  font-size: 1rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: #6b7683; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #9aa0a4; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold-deep);
  box-shadow: inset 0 0 0 1px var(--gold-deep);
}
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-deep) 50%),
    linear-gradient(135deg, var(--gold-deep) 50%, transparent 50%);
  background-position: calc(100% - 1.2rem) 1.35rem, calc(100% - 0.85rem) 1.35rem;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}
.field input:user-invalid,
.field textarea:user-invalid,
.field select:user-invalid { border-color: #b03a24; }
.field .err {
  display: none;
  font-size: 0.8125rem;
  color: #9c2f1c;
  letter-spacing: 0.01em;
}
.field input:user-invalid ~ .err,
.field select:user-invalid ~ .err,
.field textarea:user-invalid ~ .err { display: block; }
/* Honeypot. Off-screen rather than display:none, because some bots skip
   hidden fields but happily fill positioned ones. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formnote {
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin-top: 1.35rem;
  max-width: 46ch;
  padding-left: 0.9rem;
  border-left: 1px solid var(--rule-light);
}
.formnote--ok {
  color: var(--ok-ink);
  border-left-color: var(--ok-stroke);
  font-weight: 500;
}
.formnote--err {
  color: #9c2f1c;
  border-left-color: #b03a24;
  font-weight: 500;
}
.plate .formnote--ok { color: var(--ok-on-plate); border-left-color: var(--ok-on-plate); }
.plate .formnote--err { color: #f0a08c; border-left-color: #f0a08c; }

/* Dark-ground variant, kept for any form placed on a plate. */
.plate .field label { color: var(--gold-lift); }
.plate .field .opt { color: var(--on-plate-soft); }
.plate .field input,
.plate .field select,
.plate .field textarea {
  background: rgba(238, 241, 244, 0.05);
  border-color: var(--rule-plate);
  color: var(--on-plate);
}
.plate .field input::placeholder,
.plate .field textarea::placeholder { color: var(--placeholder-plate); }
.plate .field input:hover,
.plate .field select:hover,
.plate .field textarea:hover { border-color: rgba(233, 240, 248, 0.32); }
.plate .field input:focus,
.plate .field select:focus,
.plate .field textarea:focus {
  border-color: var(--gold-lift);
  box-shadow: inset 0 0 0 1px var(--gold-lift);
}
.plate .field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-lift) 50%),
    linear-gradient(135deg, var(--gold-lift) 50%, transparent 50%);
}
.plate .field select option { background: var(--plate); color: var(--on-plate); }
.plate .field .err { color: #f0a08c; }
.plate .formnote { color: var(--on-plate-soft); }

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

.foot { background: #080d14; color: var(--on-plate); }
.foot__top {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-block: clamp(3.25rem, 6vw, 5rem);
}
@media (min-width: 56rem) {
  .foot__top { grid-template-columns: 1.5fr 1fr 1fr; }
}
.foot h2 {
  font-size: var(--label);
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-lift);
  margin-bottom: 1.15rem;
}
.foot ul { display: grid; gap: 0.7rem; }
.foot a { text-decoration: none; color: var(--on-plate-soft); font-size: 0.9375rem; }
.foot a:hover { color: var(--gold-lift); }
.foot__mark { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.35rem; }
.foot__mark img { height: 3rem; width: auto; }
.foot__blurb { color: var(--on-plate-soft); font-size: 0.9375rem; max-width: 34ch; }
.foot__base {
  border-top: 1px solid var(--rule-plate);
  padding-block: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--foot-faint);
}

/* --- Motion --------------------------------------------------------------
   One authored moment: the hero opens from the horizon. Everything else
   settles into place in the same grammar.
   ------------------------------------------------------------------------ */

.js .hero__ph {
  clip-path: inset(46% 0 46% 0);
  transform: scale(1.14);
  will-change: clip-path, transform;
}
.js .hero.is-open .hero__ph {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
  transition: clip-path 1.25s var(--ease), transform 1.8s var(--ease);
}
.js .hero__body > *,
.js .index {
  opacity: 0;
  transform: translateY(18px);
}
.js .hero.is-open .hero__body > *,
.js .hero.is-open .index {
  opacity: 1;
  transform: none;
  transition: opacity 0.85s var(--ease), transform 0.95s var(--ease);
  transition-delay: calc(0.42s + var(--i, 0) * 0.085s);
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease), transform var(--dur) var(--ease);
  transition-delay: calc(var(--i, 0) * 0.07s);
}
.js [data-reveal].rule { transform: scaleX(0); opacity: 1; }
.js [data-reveal].rule.is-in { transform: scaleX(1); transition: transform 0.85s var(--ease); }

/* Photographs settle out of a slow push-in. */
.js .ph[data-reveal] > img { transform: scale(1.07); transition: transform 1.5s var(--ease); }
.js .ph[data-reveal].is-in > img { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero__ph,
  .js .hero.is-open .hero__ph { clip-path: none; transform: none; transition: none; }
  .js .hero__body > *,
  .js .index,
  .js [data-reveal],
  .js [data-reveal].rule {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js .ph[data-reveal] > img { transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Spacing utilities ----------------------------------------------------
   The vertical rhythm between a rule, a heading and its paragraph varies by
   block, so it is carried here rather than baked into the type classes.

   These are classes and not style attributes on purpose. The site sends
   Content-Security-Policy with style-src 'self', which blocks every inline
   style attribute in the markup outright: the browser drops the declaration
   and reports it in the console. Anything positional must therefore live in
   this stylesheet. Named by value so the number in the markup is the number
   on the page.
   ------------------------------------------------------------------------- */

.flow-135 { margin-top: 1.35rem; }
.flow-150 { margin-top: 1.5rem; }
.flow-160 { margin-top: 1.6rem; }
.flow-180 { margin-top: 1.8rem; }
.flow-200 { margin-top: 2rem; }
.flow-225 { margin-top: 2.25rem; }
.flow-235 { margin-top: 2.35rem; }
.flow-250 { margin-top: 2.5rem; }
.flow-275 { margin-top: 2.75rem; }
.flow-300 { margin-top: 3rem; }

.flow-end-0   { margin-bottom: 0; }
.flow-end-160 { margin-bottom: 1.6rem; }
.flow-block   { margin-block: clamp(2rem, 3.5vw, 3rem); }

.measure-14  { max-width: 14ch; }
.measure-16  { max-width: 16ch; }
.measure-56  { max-width: 56ch; }
.measure-34r { max-width: 34rem; }

.ratio-45 { aspect-ratio: 4 / 5; }

/* The icon sprite is a definitions document, never drawn. Without this it
   claims the SVG default 300x150 box and pushes the page down. */
.sprite { display: none; }

/* A single short message held at the optical centre: 404 and the enquiry
   acknowledgement. */
.midpage {
  min-height: 74vh;
  display: flex;
  align-items: center;
  padding-block: var(--band);
}
.midpage > .shell { width: 100%; }

/* --- Small screens ------------------------------------------------------- */

@media (max-width: 61.999rem) {
  .index__grid { grid-template-columns: 1fr; }
  .index__item {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--rule-plate);
    padding-block: 1.1rem;
  }
  .index__item:first-child { border-top: 0; }
  .index__note { display: none; }
}

@media (max-width: 55.999rem) {
  .nav,
  .masthead__in > .btn { display: none; }
  .burger { display: inline-flex; }

    .nav.is-open {
    display: flex;
    position: fixed;
    inset: 5rem 0 0 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background: var(--plate);
    padding: 1.5rem var(--gutter) 3rem;
    overflow-y: auto;
  }
  .nav.is-open a {
    font-size: 1.25rem;
    font-stretch: 104%;
    letter-spacing: 0.02em;
    text-transform: none;
    padding-block: 1.15rem;
    border-bottom: 1px solid var(--rule-plate);
  }
  .nav.is-open a::after { display: none; }
  .nav.is-open .btn {
    display: inline-flex;
    justify-content: center;
    margin-top: 1.75rem;
    text-transform: uppercase;
    font-size: 0.8125rem;
  }
  body.is-locked { overflow: hidden; }
}

@media (max-width: 43.999rem) {
  .hero { min-height: auto; padding-top: 8rem; }
  .hero__body { padding-bottom: 2.75rem; }
  table.record { min-width: 34rem; font-size: 0.875rem; }
}

/* --- Print --------------------------------------------------------------- */

@media print {
  .masthead, .index, .burger, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .plate, .hero, .pagehead { background: #fff !important; color: #000 !important; }
  .ph { display: none; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.75em; }
}