@charset "UTF-8";
/* ==========================================================================
   Pacific Ranger Security Agency Corporation — landing page
   Direction: "The Duty Board" — an operations sheet, not a brochure.
   Brand values sampled from the official logo artwork:
     ranger green #4B6D2E · slate navy #183143
   ========================================================================== */

/* ---------- 1. TOKENS ----------
   Two palettes under the same names (PRSAC's revisions, 21 October 2026):
   light ("daylight navy"), the default, and dark, which a visitor chooses with
   the switch in the top bar (main.js sets data-theme="dark" on <html>). In
   both, the ink tones are the ground and the bone tones the text. The sector
   panels and the green bands keep the dark palette in either mode: their text
   sits on a photograph or on brand green. Light mode's photographs are in
   section 17. */
:root {
  --ink-900: #FFFFFF;   /* sheet ground: white */
  --ink-800: #EEF2F6;   /* bands: a cool navy tint */
  --ink-700: #F7F9FB;   /* raised surfaces */
  --ink-600: #183143;   /* brand navy */
  --ink-500: #22455C;

  --olive:    #4B6D2E;  /* brand green: actions */
  --olive-lt: #3F6A2A;  /* the accent, legible on white */
  --olive-dk: #3A5523;

  --bone:   #13293D;    /* text: the brand's navy, deepened */
  --bone-2: #4B5D6E;    /* secondary */
  --bone-3: #5E6E7C;    /* meta / labels */

  --rule:       rgba(19, 41, 61, .14);
  --rule-soft:  rgba(19, 41, 61, .08);
  --rule-faint: rgba(19, 41, 61, .045);

  --rail-bg: #EEF2F6;
  --foot-bg: #EEF2F6;
  --err:     #A8432A;
  --paper:   #FFFFFF;   /* text on brand green, and the footer logo's plate */

  color-scheme: light;

  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1300px;
  --gut: 40px;
  --rail-h: 34px;
  --nav-h: 74px;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* The dark palette: the whole page in dark mode, and always the sector panels
   and the green bands. */
:root[data-theme="dark"],
.acc, .careers {
  --ink-900: #0C1821;   /* sheet ground */
  --ink-800: #0F1F2B;
  --ink-700: #132635;   /* raised surfaces */

  --olive-lt: #7FA855;  /* legible accent on dark ground */

  --bone:   #EDEAE3;    /* warm paper white */
  --bone-2: #A7B1B5;    /* secondary */
  --bone-3: #6D7B83;    /* meta / labels */

  --rule:       rgba(237, 234, 227, .14);
  --rule-soft:  rgba(237, 234, 227, .08);
  --rule-faint: rgba(237, 234, 227, .045);

  --rail-bg: #08121A;
  --foot-bg: #08121A;
  --err:     #D98166;
  --paper:   #EDEAE3;

  color-scheme: dark;
}
.acc { color: var(--bone); }

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  background: var(--ink-900);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--rail-h);
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }

::selection { background: var(--olive); color: var(--paper); }

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

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--olive); color: var(--paper);
  padding: 10px 18px; font: 600 13px/1 var(--sans);
  transition: top .2s;
}
.skip:focus { top: 12px; }

/* ---------- 3. TYPE PRIMITIVES ---------- */
.mono {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  letter-spacing: .02em;
}

.h-display {
  font-size: clamp(2.7rem, 6vw, 4.9rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.h-display em {
  font-style: normal;
  color: var(--olive-lt);
}

.h-sec {
  font-size: clamp(1.95rem, 4vw, 3.15rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.028em;
  text-wrap: balance;
}

.eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--bone-3);
}
.eyebrow span { white-space: nowrap; }   /* wrap between items, never mid-phrase */
.eyebrow b { color: var(--olive-lt); font-weight: 500; margin: 0 8px; }
.eyebrow__n {
  font-style: normal;
  color: var(--olive-lt);
  margin-right: 13px;
  padding-right: 13px;
  border-right: 1px solid var(--rule);
}
.eyebrow--inv { color: rgba(237, 234, 227, .7); }
.eyebrow--inv .eyebrow__n { color: var(--bone); border-color: rgba(237, 234, 227, .3); }

/* ---------- 4. LAYOUT ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
  position: relative;
  z-index: 1;
}

/* Drafting rules — continuous vertical hairlines down the whole sheet */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.sheet__inner {
  height: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.sheet__inner i { border-left: 1px solid var(--rule-faint); }
.sheet__inner i:last-child { border-right: 1px solid var(--rule-faint); }

main, .foot { position: relative; z-index: 1; }

/* ---------- 5. STATUS RAIL ---------- */
.rail {
  position: fixed;
  inset: 0 0 auto;
  height: var(--rail-h);
  z-index: 60;
  background: var(--rail-bg);
  border-bottom: 1px solid var(--rule-soft);
}
.rail__in {
  height: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .13em;
  color: var(--bone-3);
  text-transform: uppercase;
}
.rail__id i { color: var(--olive-lt); font-style: normal; margin: 0 8px; }
.rail__lic { display: flex; align-items: center; gap: 8px; }
.rail__lic .tick {
  width: 6px; height: 6px;
  background: var(--olive-lt);
  transform: rotate(45deg);
}
.rail__clock {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bone-2);
}
.rail__k { color: var(--bone-3); }
#mnl-clock { font-variant-numeric: tabular-nums; color: var(--bone); }

/* The light/dark switch, at the right of the top bar. Hidden until main.js runs. */
.theme {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 4px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--bone-2);
  transition: color .25s;
}
.theme[hidden] { display: none; }
.theme:hover { color: var(--bone); }
.theme__track {
  position: relative;
  width: 26px; height: 14px;
  border: 1px solid var(--bone-3);
  border-radius: 7px;
  transition: border-color .25s;
}
.theme__track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bone-3);
  transition: transform .25s var(--ease), background .25s;
}
.theme[aria-checked="true"] .theme__track { border-color: var(--olive-lt); }
.theme[aria-checked="true"] .theme__track::after { transform: translateX(12px); background: var(--olive-lt); }

.pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--olive-lt);
  box-shadow: 0 0 0 0 rgba(127, 168, 85, .6);
  animation: pulse 2.6s var(--ease) infinite;
  flex: none;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(127, 168, 85, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(127, 168, 85, 0); }
  100% { box-shadow: 0 0 0 0 rgba(127, 168, 85, 0); }
}

/* ---------- 6. NAV ---------- */
.nav {
  position: sticky;
  top: var(--rail-h);
  z-index: 50;
  background: var(--ink-900);
  border-bottom: 1px solid var(--rule);
}
.nav__in {
  height: var(--nav-h);
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
  display: flex;
  align-items: center;
  gap: 40px;
}

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
/* Real shield artwork (square source). height:auto is omitted deliberately —
   both dimensions are fixed here, so the HTML width/height attrs never apply. */
.brand__mark { width: 38px; height: 38px; object-fit: contain; }
.brand__word { display: block; line-height: 1; }
.brand__word strong {
  display: block;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -.005em;
}
.brand__word strong em { font-style: normal; color: var(--olive-lt); }
.brand__word small {
  display: block;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .3em;
  color: var(--bone-3);
  margin-top: 4px;
}

.nav__links { display: flex; gap: 30px; margin-left: auto; }
.nav__links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--bone-2);
  padding: 6px 0;
  position: relative;
  transition: color .25s;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--olive-lt);
  transition: width .3s var(--ease);
}
.nav__links a:hover { color: var(--bone); }
.nav__links a:hover::after { width: 100%; }
/* The page being read (About), or on the home page the section in view
   (aria-current="location", set by main.js §6 as the visitor scrolls). */
.nav__links a[aria-current] { color: var(--bone); }
.nav__links a[aria-current]::after { width: 100%; background: var(--olive); }
.drawer a[aria-current] { color: var(--olive-lt); }

.nav__act { display: flex; align-items: center; gap: 18px; flex: none; }
.nav__tel { font-size: 12.5px; letter-spacing: .04em; }

.burger {
  display: none;
  width: 42px; height: 42px;
  background: none;
  border: 1px solid var(--rule);
  cursor: pointer;
  padding: 0;
  place-content: center;
  gap: 5px;
  margin-left: auto;
}
.burger i {
  display: block;
  width: 17px; height: 1.5px;
  background: var(--bone);
  transition: transform .3s var(--ease);
}
.burger[aria-expanded="true"] i:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] i:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

.drawer {
  border-top: 1px solid var(--rule);
  padding: 8px var(--gut) 24px;
  background: var(--ink-900);
}
.drawer a {
  display: block;
  padding: 14px 0;
  font-size: 17px;
  font-weight: 500;
  border-bottom: 1px solid var(--rule-soft);
}
.drawer__tel { color: var(--olive-lt); font-size: 15px; }

/* ---------- 7. BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 20px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .01em;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease);
  white-space: nowrap;
}
.btn--lg { padding: 15px 28px; font-size: 14.5px; }
.btn--block { width: 100%; }

.btn--solid { background: var(--olive); color: var(--paper); }
.btn--solid:hover { background: #587F36; }
.btn--solid:active { transform: translateY(1px); }

.btn--line { border-color: var(--rule); color: var(--bone); }
.btn--line:hover { border-color: var(--olive-lt); color: var(--olive-lt); }

.btn--ghost { color: var(--bone-2); padding-inline: 0; }
.btn--ghost:hover { color: var(--olive-lt); }

.btn--inv { background: var(--bone); color: var(--ink-600); }
.btn--inv:hover { background: #fff; }
.btn--inv-line { border-color: rgba(237, 234, 227, .45); color: var(--bone); }
.btn--inv-line:hover { border-color: var(--bone); background: rgba(237, 234, 227, .1); }

/* ---------- 8. HERO / DUTY BOARD ---------- */
.hero {
  position: relative;
  isolation: isolate;            /* keep the negative z-index layers inside the hero */
  display: flex;
  flex-direction: column;
  min-height: min(94vh, 940px);
  padding-top: clamp(52px, 7vw, 92px);
  overflow: hidden;
}

/* Layer -3: the photograph */
.hero__media { position: absolute; inset: 0; z-index: -3; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 32%;
  /* Duotone the photo into the olive/slate system instead of letting it sit raw */
  filter: grayscale(.66) contrast(1.08) brightness(.74) sepia(.2);
}

/* Layer -2: directional scrim — heaviest where the headline sits */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(97deg,
      rgba(12, 24, 33, .95) 0%,
      rgba(12, 24, 33, .84) 30%,
      rgba(12, 24, 33, .34) 58%,
      rgba(12, 24, 33, .58) 100%),
    linear-gradient(to bottom,
      rgba(12, 24, 33, .78) 0%,
      rgba(12, 24, 33, .05) 24%,
      rgba(12, 24, 33, .34) 66%,
      rgba(12, 24, 33, .9) 100%);
}

/* Layer -1: the drafting rules continue across the photograph */
.hero__rules {
  position: absolute;
  inset: 0;
  z-index: -1;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  pointer-events: none;
}
.hero__rules i { border-left: 1px solid rgba(237, 234, 227, .07); }
.hero__rules i:last-child { border-right: 1px solid rgba(237, 234, 227, .07); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 76px);
  align-items: center;
  flex: 1;
  padding-bottom: clamp(40px, 5vw, 72px);
}

/* Office data rail pinned to the base of the hero */
.hero__base {
  margin-top: auto;
  border-top: 1px solid var(--rule);
  background: rgba(8, 18, 26, .58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero__base-in {
  display: grid;
  grid-template-columns: 1.7fr 1.1fr 1fr 1.2fr;
}
.hero__base-in > div {
  padding: 18px 26px;
  border-left: 1px solid var(--rule);
}
.hero__base-in > div:first-child { border-left: 0; padding-left: 0; }
.hero__base-in .mono {
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--bone-3);
  margin-bottom: 8px;
}
.hero__base-in p:not(.mono) {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bone-2);
}
.hero__base-in .dim { color: var(--bone-3); }
.hero__base-in a { transition: color .25s; }
.hero__base-in a:hover { color: var(--olive-lt); }
.hero__lede .eyebrow { margin-bottom: 30px; }
.hero__sub {
  margin-top: 30px;
  max-width: 54ch;
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  line-height: 1.62;
  color: var(--bone-2);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.hero__fine {
  margin-top: 22px;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-3);
}

/* Deployment panel — a translucent ops readout sitting over the photograph */
.board {
  background: rgba(19, 38, 53, .78);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid rgba(237, 234, 227, .18);
  border-top: 2px solid var(--olive);
  box-shadow: 0 24px 60px rgba(4, 10, 15, .45);
}
.board__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
}
.board__head h2 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--bone);
}
.board__state {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9.5px;
  letter-spacing: .18em;
  color: var(--olive-lt);
}
.board__state .pulse { width: 6px; height: 6px; }

.board__rows > div {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 11px 18px;
  border-bottom: 1px solid var(--rule-soft);
}
.board__rows dt { font-size: 9.5px; letter-spacing: .15em; color: var(--bone-3); }
.board__rows dd { font-size: 13px; color: var(--bone); }
.board__rows dd.mono { font-size: 11.5px; letter-spacing: 0; }
.board__rows dd b { color: var(--olive-lt); font-weight: 600; }

.dial { padding: 20px 18px 18px; border-bottom: 1px solid var(--rule-soft); }
.dial__top {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  letter-spacing: .16em;
  color: var(--bone-3);
  margin-bottom: 14px;
}
.dial__now { color: var(--olive-lt); }

.dial__bar {
  display: flex;
  gap: 2px;
  height: 46px;
  padding-bottom: 8px;
  align-items: stretch;
}
.dial__bar i {
  flex: 1 1 0;
  min-width: 0;
  background: rgba(75, 109, 46, .42);
  position: relative;
  transition: background .4s, box-shadow .4s;
}
.dial__bar i.office::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--bone-3);
}
.dial__bar i.is-now {
  background: var(--olive-lt);
  box-shadow: 0 0 14px rgba(127, 168, 85, .5);
}
.dial__bar i.is-now::before {
  content: "";
  position: absolute;
  left: 50%; top: -7px;
  width: 1px; height: 5px;
  background: var(--olive-lt);
  transform: translateX(-50%);
}

.dial__ticks {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--bone-3);
  margin-top: 10px;
}
.dial__key {
  list-style: none;
  padding: 0;
  margin-top: 16px;
  display: grid;
  gap: 7px;
  font-size: 9.5px;
  letter-spacing: .06em;
  color: var(--bone-3);
}
.dial__key li { display: flex; align-items: center; gap: 9px; }
.sw { flex: none; }
.sw--post { width: 9px; height: 9px; background: rgba(75, 109, 46, .75); }
.sw--office { width: 9px; height: 2px; background: var(--bone-3); }

.board__note {
  padding: 15px 18px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bone-2);
  font-style: italic;
}

/* ---------- 9. CREDENTIAL STRIP ---------- */
.strip {
  border-block: 1px solid var(--rule);
  background: var(--ink-800);
}
.strip__in {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.strip__cell {
  padding: 30px 26px;
  border-left: 1px solid var(--rule);
}
.strip__cell:first-child { border-left: 0; padding-left: 0; }
.strip__cell b {
  display: block;
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--olive-lt);
  line-height: 1;
}
.strip__cell span {
  display: block;
  margin-top: 11px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--bone-2);
  max-width: 22ch;
}

/* ---------- 10. SECTION HEADS ---------- */
.sec-head { margin-bottom: clamp(44px, 5vw, 66px); }
.sec-head .eyebrow { margin-bottom: 26px; }
.sec-head__note {
  margin-top: 22px;
  max-width: 52ch;
  color: var(--bone-2);
  font-size: 15.5px;
  line-height: 1.6;
}

/* ---------- 11. SERVICE LINES ---------- */
.lines { padding: clamp(72px, 9vw, 120px) 0; }

.line {
  position: relative;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) 320px;
  gap: 44px;
  align-items: start;
  padding: 42px 0;
  border-top: 1px solid var(--rule);
}
.ladder .line:last-child { border-bottom: 1px solid var(--rule); }
.line::after {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 0; height: 2px;
  background: var(--olive-lt);
  transition: width .6s var(--ease);
}
.line:hover::after { width: 100%; }

.line__idx b {
  display: block;
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1;
  color: var(--bone-3);
  transition: color .3s;
}
.line:hover .line__idx b { color: var(--olive-lt); }

.line__body h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.15;
}
.line__body p {
  margin-top: 15px;
  max-width: 58ch;
  color: var(--bone-2);
  font-size: 15.5px;
  line-height: 1.65;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  list-style: none;
  padding: 0;
  margin-top: 22px;
}
.tags li {
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--bone-3);
  border: 1px solid var(--rule);
  padding: 5px 10px;
  transition: border-color .3s, color .3s;
}
.line:hover .tags li { border-color: rgba(127, 168, 85, .35); color: var(--bone-2); }

.line__fig { margin: 0; overflow: hidden; }
.line__fig img {
  width: 100%;
  height: auto;          /* required, or the HTML height attribute beats aspect-ratio */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(.85) contrast(1.06) brightness(.82);
  transform: scale(1.02);
  transition: filter .7s var(--ease), transform .9s var(--ease);
}
.line:hover .line__fig img {
  filter: grayscale(.22) contrast(1.02) brightness(.96) sepia(.1);
  transform: scale(1);
}

/* ---------- 12. SECTORS ACCORDION ---------- */
.sectors { padding: clamp(72px, 9vw, 120px) 0 0; }

.acc {
  display: flex;
  height: clamp(420px, 55vh, 540px);
  border-block: 1px solid var(--rule);
  margin-top: clamp(20px, 3vw, 36px);
}
.acc__p {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--rule);
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  transition: flex-grow .6s var(--ease);
}
.acc__p:first-child { border-left: 0; }

/* A real <img>, not a background on ::before — a relative url() inside a custom
   property resolves against the stylesheet, not the document, so it 404s from
   assets/css/. An element also gives us lazy-loading for free. */
.acc__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1) brightness(.38) contrast(1.1);
  transform: scale(1.06);
  transition: filter .8s var(--ease), transform 1s var(--ease);
}
.acc__p::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(12, 24, 33, .93) 0%, rgba(12, 24, 33, .3) 58%, rgba(12, 24, 33, .6) 100%);
}
.acc__p.is-open { flex-grow: 3.7; }
.acc__p.is-open .acc__img {
  /* Hold the photography on-palette — full colour reads teal against the olive/slate system */
  filter: grayscale(.45) brightness(.8) contrast(1.04) sepia(.18);
  transform: scale(1);
}
/* The open (hovered) panel's photo is brighter (PRSAC, 21 October 2026); a
   deeper shade under its text keeps the words readable. */
.acc__p.is-open::after {
  background: linear-gradient(to top, rgba(12, 24, 33, .95) 0%, rgba(12, 24, 33, .62) 34%, rgba(12, 24, 33, .08) 66%, rgba(12, 24, 33, .4) 100%);
}
.acc__label, .acc__desc { text-shadow: 0 1px 10px rgba(12, 24, 33, .7); }

.acc__n {
  position: absolute;
  top: 20px; left: 22px;
  z-index: 2;
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--bone-3);
  transition: color .4s;
}
.acc__p.is-open .acc__n { color: var(--olive-lt); }

.acc__label {
  position: absolute;
  bottom: 26px; left: 22px;
  z-index: 2;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transform-origin: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--bone-2);
  white-space: nowrap;
  transition: color .4s;
}
.acc__p.is-open .acc__label { color: var(--bone); }

.acc__desc {
  position: absolute;
  left: 64px; right: 28px; bottom: 28px;
  z-index: 2;
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--bone-2);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s .15s var(--ease), transform .45s .15s var(--ease);
  pointer-events: none;
}
.acc__p.is-open .acc__desc { opacity: 1; transform: none; }

/* ---------- 13. HOW IT RUNS ---------- */
.engage { padding: clamp(72px, 9vw, 120px) 0; }

.steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.step {
  position: relative;
  background: var(--ink-900);
  padding: 30px 26px 34px;
}
.step::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 26px; height: 2px;
  background: var(--olive);
}
.step__n {
  display: block;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--olive-lt);
  margin-bottom: 18px;
}
.step h3 {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.step p {
  margin-top: 11px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--bone-2);
}

/* Standing competencies: a raised panel with a green edge, the items in the
   body font at reading size (23 October 2026: they were small grey mono). */
.comp {
  margin-top: 44px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--olive);
  background: var(--ink-700);
  padding: 28px 32px 32px;
}
.comp__lead {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--olive-lt);
  margin-bottom: 22px;
}
.comp__list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 32px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--bone);
}
.comp__list li { display: grid; grid-template-columns: 1.5em 1fr; }
.comp__list li::before {
  content: "\2713";           /* ✓, escaped so it never depends on the character set */
  font-weight: 700;
  color: var(--olive-lt);
}

/* ---------- 14. CAREERS ---------- */
.careers {
  position: relative;
  background: var(--olive);
  color: var(--bone);
  padding: clamp(64px, 8vw, 96px) 0;
  overflow: hidden;
}
.careers::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg,
    rgba(237, 234, 227, .05) 0 1px,
    transparent 1px 9px);
  pointer-events: none;
}
.careers__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: center;
}
.careers__copy .eyebrow { margin-bottom: 24px; }
.careers__copy p {
  margin-top: 22px;
  max-width: 50ch;
  font-size: 16px;
  line-height: 1.62;
  color: rgba(237, 234, 227, .88);
}
.careers__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.careers__mark {
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 600;
  line-height: .92;
  letter-spacing: .02em;
  text-align: right;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(237, 234, 227, .42);
  user-select: none;
}

/* ---------- 15. CONTACT ---------- */
.contact { padding: clamp(72px, 9vw, 120px) 0; }
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(44px, 6vw, 84px);
  align-items: start;
}
.contact__info .eyebrow { margin-bottom: 26px; }
.contact__info .h-sec { margin-bottom: 40px; }

.nap > div {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}
.nap dt {
  font-size: 9.5px;
  letter-spacing: .16em;
  color: var(--bone-3);
  padding-top: 4px;
}
.nap dd { font-size: 14.5px; line-height: 1.55; }
.nap dd a { border-bottom: 1px solid var(--rule); transition: color .25s, border-color .25s; }
.nap dd a:hover { color: var(--olive-lt); border-color: var(--olive-lt); }
.nap__sub { color: var(--bone-3); font-size: 12.5px; }

.prep {
  margin-top: 40px;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--olive);
  padding: 22px 24px 24px;
}
.prep__head {
  font-size: 9.5px;
  letter-spacing: .2em;
  color: var(--bone-3);
  margin-bottom: 16px;
}
.prep__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--bone-2);
}
.prep__list li { display: grid; grid-template-columns: 18px 1fr; }
.prep__list li::before {
  content: "\2192";           /* → */
  color: var(--olive-lt);
}

.contact__form {
  background: var(--ink-700);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--olive);
  padding: clamp(24px, 3vw, 34px);
}
.form__head {
  font-size: 9.5px;
  letter-spacing: .22em;
  color: var(--bone-3);
  padding-bottom: 18px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.f { margin-top: 20px; }
.f--split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.f label {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--bone-3);
  margin-bottom: 7px;
}
.f label i { color: var(--olive-lt); font-style: normal; }
.f input, .f textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 9px 0;
  font-size: 15px;
  transition: border-color .25s;
}
.f textarea { resize: vertical; line-height: 1.55; }
.f input::placeholder, .f textarea::placeholder { color: var(--bone-3); opacity: .7; }
.f input:focus, .f textarea:focus {
  outline: none;
  border-bottom-color: var(--olive-lt);
}
.f input[aria-invalid="true"], .f textarea[aria-invalid="true"] { border-bottom-color: var(--err); }

#survey-form button[type="submit"] { margin-top: 30px; }
.form__note {
  margin-top: 14px;
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone-3);
  text-align: center;
}
.form__note.is-err { color: var(--err); }
.form__note.is-ok { color: var(--olive-lt); }
.form__privacy {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--bone-3);
  text-align: center;
}

/* The popup after sending. margin: auto puts back the centring that the
   "* { margin: 0 }" reset removes from <dialog>. */
.sent {
  margin: auto;
  width: min(calc(100vw - 32px), 420px);
  padding: 30px 28px 26px;
  background: var(--ink-700);
  color: var(--bone);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--olive);
  text-align: center;
}
.sent.is-err { border-top-color: var(--err); }
.sent::backdrop { background: rgba(12, 24, 33, .72); }
.sent[open] { animation: sent-in .25s var(--ease); }
@keyframes sent-in { from { opacity: 0; transform: translateY(8px); } }
.sent__title { font-size: 20px; font-weight: 600; margin-bottom: 10px; }
.sent__text { font-size: 15px; line-height: 1.55; color: var(--bone-2); margin-bottom: 24px; }
.sent .btn { min-width: 120px; }

/* Spam trap: present for bots that fill every field, invisible and
   unreachable for people (not display:none, which some bots skip). */
.f--trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */

/* ---------- Page head (shorter, photo-led variant of the hero) ---------- */
.phead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(64px, 9vw, 116px) 0 clamp(56px, 7vw, 96px);
}
/* The About page's photograph head is as tall as the home page's hero, so the
   photo is framed the same way; it was a short band that cut the photo to a
   close-up (23 October 2026). The text sits in the middle, as in the hero. */
.phead:not(.phead--plain) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(94vh, 940px);
}
.phead__media { position: absolute; inset: 0; z-index: -3; }
.phead__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 34%;
  filter: grayscale(.7) contrast(1.07) brightness(.66) sepia(.2);
}
.phead__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(97deg,
      rgba(12, 24, 33, .95) 0%,
      rgba(12, 24, 33, .86) 36%,
      rgba(12, 24, 33, .44) 70%,
      rgba(12, 24, 33, .66) 100%),
    linear-gradient(to bottom,
      rgba(12, 24, 33, .8) 0%,
      rgba(12, 24, 33, .1) 30%,
      rgba(12, 24, 33, .92) 100%);
}
/* Thank-you and 404 pages: the page head on its own, no photograph. */
.phead--plain { min-height: 56vh; }
.phead--plain .btn { margin-top: 36px; }

.phead__sub {
  margin-top: 28px;
  max-width: 58ch;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.62;
  color: var(--bone-2);
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--bone-3);
  margin-bottom: 30px;
}
.crumbs a { color: var(--olive-lt); transition: color .25s; }
.crumbs a:hover { color: var(--bone); }
.crumbs span[aria-current] { color: var(--bone-2); }

/* ---------- Agency record ---------- */
.record { padding: clamp(68px, 9vw, 112px) 0; }
.record__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 76px);
  align-items: start;
}
.record__copy .eyebrow { margin-bottom: 26px; }
.record__copy .h-sec { margin-bottom: 28px; }
.record__copy p {
  max-width: 54ch;
  color: var(--bone-2);
  font-size: 15.5px;
  line-height: 1.68;
}
.record__copy p + p { margin-top: 18px; }

/* Wider label column — "HEAD OFFICE" and "OPERATING" need more room than the hero board's keys */
.record .board__rows > div { grid-template-columns: 88px 1fr; }

/* The record board is not over a photo — keep it solid */
.record .board {
  background: var(--ink-700);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: var(--rule);
  box-shadow: none;
}

/* ---------- Mission & vision ---------- */
.creed { padding: 0 0 clamp(68px, 9vw, 112px); }
.creed__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.creed__card {
  background: var(--ink-900);
  padding: clamp(28px, 3vw, 40px);
}
.creed__k {
  font-size: 9.5px;
  letter-spacing: .24em;
  color: var(--olive-lt);
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--rule);
}
.creed__body {
  font-size: clamp(1rem, 1.3vw, 1.16rem);
  line-height: 1.6;
  color: var(--bone);
  max-width: 44ch;
}

/* ---------- Why choose us ---------- */
.reasons-sec { padding: 0 0 clamp(68px, 9vw, 112px); }
.reasons { border-top: 1px solid var(--rule); }
.reason {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 44px;
  padding: 30px 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.reason::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 0; height: 1px;
  background: var(--olive-lt);
  transition: width .6s var(--ease);
}
.reason:hover::after { width: 100%; }
.reason__n {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--bone-3);
  line-height: 1;
  transition: color .3s;
}
.reason:hover .reason__n { color: var(--olive-lt); }
.reason h3 {
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -.012em;
}
.reason p {
  margin-top: 10px;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--bone-2);
}

/* ---------- 16. FOOTER ---------- */
.foot {
  border-top: 1px solid var(--rule);
  background: var(--foot-bg);
  padding-top: clamp(48px, 6vw, 72px);
}
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 44px;
  padding-bottom: clamp(40px, 5vw, 60px);
}
.foot__logo {
  background: var(--paper);
  padding: 13px 16px;
  width: 100%;
  max-width: 290px;
  height: auto;
  object-fit: contain;
}
.foot__legal {
  margin-top: 22px;
  max-width: 40ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--bone-3);
}
.foot__col { display: flex; flex-direction: column; gap: 11px; }
.foot__col p.mono {
  font-size: 9.5px;
  letter-spacing: .2em;
  color: var(--bone-3);
  margin-bottom: 6px;
}
.foot__col a {
  font-size: 13.5px;
  color: var(--bone-2);
  transition: color .25s;
}
.foot__col a:hover { color: var(--olive-lt); }
.foot__col address {
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--bone-2);
}

.foot__base {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-block: 20px;
  border-top: 1px solid var(--rule-soft);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--bone-3);
}

/* ---------- 17. LIGHT MODE: PHOTOGRAPHS ----------
   In light mode (the default) the photographs are brighter and nearer their
   own colours, and the hero's text sits on a white fade instead of a dark one.
   Dark mode keeps the rules in sections 8, 11, 12 and the About page head. */
:root:not([data-theme="dark"]) .hero__media img,
:root:not([data-theme="dark"]) .phead__media img {
  filter: grayscale(.18) saturate(.92) contrast(1.02) brightness(1.04);
}
:root:not([data-theme="dark"]) .hero__scrim {
  background:
    linear-gradient(97deg,
      rgba(255, 255, 255, .97) 0%,
      rgba(255, 255, 255, .92) 38%,
      rgba(255, 255, 255, .5) 60%,
      rgba(255, 255, 255, .12) 100%),
    linear-gradient(to bottom,
      rgba(255, 255, 255, .55) 0%,
      rgba(255, 255, 255, 0) 22%,
      rgba(255, 255, 255, 0) 68%,
      rgba(255, 255, 255, .85) 100%);
}
:root:not([data-theme="dark"]) .phead__scrim {
  background:
    linear-gradient(97deg,
      rgba(255, 255, 255, .97) 0%,
      rgba(255, 255, 255, .9) 36%,
      rgba(255, 255, 255, .5) 70%,
      rgba(255, 255, 255, .25) 100%),
    linear-gradient(to bottom,
      rgba(255, 255, 255, .5) 0%,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, .7) 100%);
}
:root:not([data-theme="dark"]) .hero__rules i { border-color: rgba(19, 41, 61, .06); }
:root:not([data-theme="dark"]) .hero__base { background: rgba(255, 255, 255, .84); }
:root:not([data-theme="dark"]) .hero .board {
  background: rgba(255, 255, 255, .95);
  border-color: rgba(19, 41, 61, .12);
  box-shadow: 0 24px 60px rgba(19, 41, 61, .16);
}
:root:not([data-theme="dark"]) .line__fig img { filter: grayscale(.3) contrast(1.02); }
:root:not([data-theme="dark"]) .line:hover .line__fig img { filter: none; }
:root:not([data-theme="dark"]) .acc__img { filter: grayscale(.55) brightness(.6) contrast(1.05); }
:root:not([data-theme="dark"]) .acc__p.is-open .acc__img { filter: grayscale(.2) brightness(.92) contrast(1.03) sepia(.06); }

@media (max-width: 1024px) {
  /* Stacked, the hero's text runs across the photograph: a fuller fade. */
  :root:not([data-theme="dark"]) .hero__scrim,
  :root:not([data-theme="dark"]) .phead__scrim {
    background: linear-gradient(to bottom, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .8) 60%, rgba(255, 255, 255, .92) 100%);
  }
}
@media (max-width: 900px) {
  :root:not([data-theme="dark"]) .acc__img { filter: grayscale(.5) brightness(.48) contrast(1.05); }
  :root:not([data-theme="dark"]) .acc__p.is-open .acc__img { filter: grayscale(.3) brightness(.62) contrast(1.04) sepia(.1); }
}

/* ---------- 18. REVEAL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .07s; }
.reveal[data-d="2"] { transition-delay: .14s; }
.reveal[data-d="3"] { transition-delay: .21s; }
.reveal[data-d="4"] { transition-delay: .28s; }

/* ---------- 19. RESPONSIVE ---------- */
@media (max-width: 1180px) {
  .nav__links { gap: 22px; }
  .nav__tel { display: none; }
  .line { grid-template-columns: 92px minmax(0, 1fr) 240px; gap: 32px; }
  .step { padding: 26px 20px 30px; }
}

@media (max-width: 1024px) {
  :root { --gut: 28px; }

  .hero { min-height: 0; }
  .phead:not(.phead--plain) { min-height: 0; }
  .hero__grid { grid-template-columns: 1fr; align-items: start; }
  .board { max-width: 460px; }
  .hero__base-in { grid-template-columns: 1fr 1fr; }
  .hero__base-in > div { border-top: 1px solid var(--rule); }
  .hero__base-in > div:nth-child(-n+2) { border-top: 0; }
  .hero__base-in > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .hero__rules { display: none; }

  .strip__in { grid-template-columns: repeat(2, 1fr); }
  .strip__cell:nth-child(3) { border-left: 0; padding-left: 0; }
  .strip__cell:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }

  .steps { grid-template-columns: repeat(2, 1fr); }
  /* Five steps, five values: the fifth takes the whole row. */
  .steps > .step:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .comp__list { grid-template-columns: repeat(2, 1fr); }

  .contact__grid { grid-template-columns: 1fr; }
  .record__grid { grid-template-columns: 1fr; }
  .record .board { max-width: 460px; }
  .creed__grid { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 36px; }

  .sheet__inner { grid-template-columns: repeat(6, 1fr); }
  .sheet__inner i:nth-child(n+7) { display: none; }
  .sheet__inner i:nth-child(6) { border-right: 1px solid var(--rule-faint); }
}

@media (max-width: 900px) {
  /* The top bar keeps the licence, the clock and the dark-mode switch. */
  .rail__id { display: none; }

  .nav__links, .nav__act { display: none; }
  .burger { display: grid; }

  /* Sectors stack — no hover, everything legible at once */
  .acc { flex-direction: column; height: auto; }
  .acc__p {
    flex: none;
    border-left: 0;
    border-top: 1px solid var(--rule);
    min-height: 132px;
    padding: 24px 22px 24px 62px;
    /* Explicit flex layout so the in-flow label and description sit predictably
       in the content box rather than in a button's anonymous centred wrapper */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    width: 100%;
  }
  .acc__p:first-child { border-top: 0; }
  .acc__p.is-open { flex-grow: 0; }
  .acc__img { filter: grayscale(.6) brightness(.34) contrast(1.05); transform: none; }
  /* Stacked, the text spans the whole panel: the tapped one brightens less. */
  .acc__p.is-open .acc__img { filter: grayscale(.5) brightness(.5) contrast(1.04) sepia(.18); }
  .acc__p.is-open::after { background: linear-gradient(to top, rgba(12, 24, 33, .93) 0%, rgba(12, 24, 33, .45) 58%, rgba(12, 24, 33, .6) 100%); }
  .acc__n { top: 24px; left: 22px; color: var(--olive-lt); }
  /* position: relative (not static) keeps these above the absolutely-positioned
     ::before image and ::after scrim. inset must be reset — the desktop rules
     set left/bottom for absolute positioning, and those offsets would otherwise
     still shift a relative box. */
  .acc__label {
    position: relative;
    inset: auto;
    z-index: 2;
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 19px;
    color: var(--bone);
    display: block;
  }
  .acc__desc {
    position: relative;
    inset: auto;
    z-index: 2;
    max-width: 46ch;
    margin-top: 9px;
    opacity: 1;
    transform: none;
    font-size: 13.5px;
  }
}

@media (max-width: 720px) {
  .rail__in { gap: 16px; font-size: 9px; }

  .line {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 34px 0;
  }
  .line__idx { display: flex; align-items: baseline; gap: 14px; }
  .line__idx b { font-size: 1.4rem; }
  .line__fig { order: -1; }
  .line__fig img { aspect-ratio: 16 / 9; filter: grayscale(.4) brightness(.9); }

  .careers__in { grid-template-columns: 1fr; gap: 34px; }
  .careers__mark { text-align: left; }

  .reason { grid-template-columns: 1fr; gap: 12px; }
  .reason__n { font-size: 1.2rem; }

  .sheet__inner { grid-template-columns: repeat(3, 1fr); }
  .sheet__inner i:nth-child(n+4) { display: none; }
  .sheet__inner i:nth-child(3) { border-right: 1px solid var(--rule-faint); }
}

@media (max-width: 560px) {
  :root { --gut: 20px; --nav-h: 66px; }

  /* Room for the dark-mode switch: the clock keeps its time, not its labels. */
  .rail__k { display: none; }
  .rail__lic { white-space: nowrap; }

  .strip__in { grid-template-columns: 1fr; }
  .strip__cell { border-left: 0; padding: 22px 0; border-bottom: 1px solid var(--rule); }
  .strip__cell:last-child { border-bottom: 0; }
  .strip__cell span { max-width: none; }

  .steps, .comp__list { grid-template-columns: 1fr; }
  .f--split { grid-template-columns: 1fr; }
  .hero__base-in { grid-template-columns: 1fr; }
  .hero__base-in > div { border-left: 0; padding: 16px 0; border-top: 1px solid var(--rule); }
  .hero__base-in > div:first-child { border-top: 0; }
  .foot__grid { grid-template-columns: 1fr; }
  .hero__cta .btn { flex: 1 1 100%; }
  .nap > div { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- 20. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 21. PRINT ---------- */
@media print {
  .sheet, .rail, .nav, .careers, .acc { display: none; }
  body { background: #fff; color: #000; padding: 0; }
  .line__fig, .contact__form { display: none; }
}