/* ==========================================================================
   KANMALAI CONSTRUCTIONS — website template
   Design language: architectural drafting sheet, rendered in navy and gold
   to match the brand mark. Hairlines, dimension marks, title blocks.
   Vanilla CSS. No build step.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Navy — sampled from the logo plate */
  --navy-abyss:  #070E1A;
  --navy:        #0B1729;
  --navy-raised: #10203A;
  --navy-lift:   #17304F;

  /* Gold — sampled from the logo mark */
  --gold:        #D6A542;
  --gold-light:  #F0CE7E;
  --gold-deep:   #A8792A;

  /* Text on navy */
  --text:        #EDEAE2;
  --text-soft:   rgba(237, 234, 226, .68);
  /* .52 rather than .44: the mono labels are small text, and below this they
     fall under the 4.5:1 AA threshold on navy. */
  --text-faint:  rgba(237, 234, 226, .52);

  /* Hairlines — gold at low alpha, the drafting-ink of this palette */
  --line:        rgba(214, 165, 66, .22);
  --line-strong: rgba(214, 165, 66, .48);
  --line-cool:   rgba(237, 234, 226, .14);

  /* Type */
  --sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Rhythm */
  --gutter: clamp(20px, 4vw, 56px);
  --shell: 1320px;
  --header-h: 78px;

  /* Home-page brand plate. --plate-w drives both the background size and the
     hero's padding; --plate-drop is the gap between the bottom of the lockup
     and the first line of copy. The artwork sits 0.533 x its own width above
     its baseline, which is where the 0.533 factor below comes from.
     Sized in svh, not vh: on Android Chrome the URL bar collapses as you
     scroll, and vh would resize the lockup mid-scroll. */
  --plate-w: min(1900px, 158vw, calc(193svh - 480px));
  --plate-top: -3svh;
  --plate-drop: 24px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Tells the browser to render form controls, scrollbars and the Android
     system UI in dark. Without it Chrome paints white select menus. */
  color-scheme: dark;
  accent-color: var(--gold);
}
/* Older engines that don't know svh still need a usable plate. */
@supports not (height: 1svh) {
  :root { --plate-w: min(1900px, 158vw, calc(193vh - 480px)); --plate-top: -3vh; }
}

/* --------------------------------------------------------------------------
   1b. FONT FALLBACK
   Inter arrives from a third-party server, so the first paint uses a system
   face. Left alone, the swap reflows every line on the page. This synthetic
   family stretches the local fallback to Inter's own metrics, so the swap is
   a change of shape rather than a change of layout — no jump, which matters
   most on a phone where the whole screen moves.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter Fallback";
  src: local("Roboto"), local("Helvetica Neue"), local("Arial");
  ascent-override: 90%;
  descent-override: 22.43%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--navy);
  /* Stops the page rubber-banding into white at the ends of a scroll on
     Android, and kills the grey flash Chrome paints on every tap. */
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--navy);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* One long token — an email address, a GST number — must never be able to
     push a narrow screen sideways. */
  overflow-wrap: break-word;
}
/* Anchored sections must clear the sticky masthead. */
:target, [id] { scroll-margin-top: calc(var(--header-h) + 20px); }
img, svg, video { display: block; max-width: 100%; }
img { background-color: var(--navy-raised); }   /* no white flash before decode */
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--gold); color: var(--navy-abyss); }

/* --------------------------------------------------------------------------
   3. THE LOGO FIELD
   On the home page the brand plate sits fixed behind the entire document and
   every section floats over it on a translucent navy veil.
   -------------------------------------------------------------------------- */
.logo-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--navy-abyss);
}
/* The brand plate is a real <img>, not a CSS background. It loads even if a
   browser cannot parse the custom properties below, it is visible in the
   network panel, and a missing file shows as a broken image rather than as
   nothing at all. Its own edges are feathered to --navy-abyss so it reads
   full-bleed. Source art is 2600px, covering a 2x display at these sizes. */
.logo-field__plate {
  position: absolute;
  left: 50%;
  top: 0;                                  /* fallbacks */
  width: 1200px;
  top: var(--plate-top);
  width: var(--plate-w);
  max-width: none;                         /* beat the global img max-width */
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
}
/* Scrim: keeps the lockup bright up top, settles to solid navy where copy sits */
.logo-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(7,14,26,.10) 0%,
    rgba(7,14,26,.06) 46%,
    rgba(7,14,26,.62) 76%,
    var(--navy) 96%);
}
/* Faint modular grid, the drafting field */
.logo-field::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(to right, rgba(214,165,66,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(214,165,66,.06) 1px, transparent 1px);
  background-size: 96px 96px;
}
/* Interior pages: the mark alone, low, as a watermark rather than a full plate.
   Opacity lives on the pseudo-element so the drafting grid stays full strength. */
.logo-field--quiet { background-image: none; }
.logo-field--quiet::after {
  background: url("../img/logo-mark.png") no-repeat right -140px top 12%;
  background-size: min(760px, 76vw) auto;
  opacity: .07;
}

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}
.section { padding-block: clamp(72px, 9vw, 132px); position: relative; z-index: 1; }
.section--tight { padding-block: clamp(48px, 6vw, 84px); }

/* Veiled panels — translucent so the plate glows faintly through */
.section--paper {
  background: rgba(16, 32, 58, .93);
  border-block: 1px solid var(--line);
}
.section--deep { background: rgba(7, 14, 26, .95); border-block: 1px solid var(--line); }
.section--veil { background: rgba(11, 23, 41, .92); }

.cols { display: grid; gap: clamp(28px, 4vw, 64px); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-sidebar { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.stack-sm > * + * { margin-top: 12px; }
.stack   > * + * { margin-top: 20px; }
.stack-lg > * + * { margin-top: 36px; }

/* --------------------------------------------------------------------------
   5. TYPE SYSTEM
   -------------------------------------------------------------------------- */
.display {
  font-size: clamp(2.5rem, 6.8vw, 5.8rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: .98;
}
.h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); letter-spacing: -0.028em; }
.h2 { font-size: clamp(1.55rem, 2.8vw, 2.3rem); letter-spacing: -0.024em; }
.h3 { font-size: clamp(1.1rem, 1.6vw, 1.35rem); letter-spacing: -0.016em; }

/* Gold gradient text, echoing the logo's metallic finish */
.gilt {
  background: linear-gradient(168deg, var(--gold-light) 4%, var(--gold) 42%, var(--gold-deep) 78%, var(--gold-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@supports not (background-clip: text) { .gilt { color: var(--gold); } }

.lede { font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.55; color: var(--text-soft); max-width: 62ch; }
.body { color: var(--text-soft); max-width: 66ch; }
.small { font-size: .875rem; color: var(--text-soft); }

/* Mono utilities — the drafting annotation voice */
.eyebrow, .meta, .tag, .num {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
}
.meta { letter-spacing: .08em; text-transform: none; }
.num { color: var(--gold); }

.sec-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: clamp(28px, 4vw, 52px); }
.sec-head .rule { flex: 1; align-self: center; }
.sec-head__title { max-width: 22ch; }

/* --------------------------------------------------------------------------
   6. HEADER + NAV
   -------------------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(7, 14, 26, .72);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--line);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.masthead.is-stuck { background: rgba(7, 14, 26, .94); box-shadow: 0 14px 34px -30px #000; }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: flex; align-items: center; gap: 12px; }
.brand__logo { width: auto; height: 44px; flex: none; }
.brand__text {
  font-size: 1.0625rem; font-weight: 600; letter-spacing: .1em; line-height: 1.1;
  text-transform: uppercase;
}
.brand__text span {
  display: block; font-size: .625rem; font-weight: 400; letter-spacing: .3em;
  color: var(--text-faint); margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  position: relative;
  padding: 9px 14px;
  font-size: .9375rem;
  color: var(--text-soft);
  transition: color .2s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s var(--ease);
}
.nav a:hover { color: var(--text); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--gold-light); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a.btn[aria-current="page"] { color: var(--navy-abyss); }
.nav a.btn::after { display: none; }

.nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line-strong); background: transparent; border-radius: 2px; position: relative; }
.nav-toggle span { position: absolute; left: 11px; right: 11px; height: 1px; background: var(--gold); transition: transform .3s var(--ease); }
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 25px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border: 1px solid var(--gold);
  border-radius: 2px;
  background: linear-gradient(160deg, var(--gold-light), var(--gold) 52%, var(--gold-deep));
  color: var(--navy-abyss);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
  transition: filter .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.btn svg { transition: transform .3s var(--ease); }
.btn:hover { filter: brightness(1.1); box-shadow: 0 12px 30px -18px var(--gold); transform: translateY(-1px); }
.btn:hover svg { transform: translateX(4px); }

.btn--ghost {
  background: transparent; color: var(--gold-light); border-color: var(--line-strong);
}
.btn--ghost:hover { background: rgba(214,165,66,.1); border-color: var(--gold); filter: none; box-shadow: none; }

.btn--light { background: transparent; color: var(--text); border-color: var(--line-cool); }
.btn--light:hover { background: var(--text); color: var(--navy-abyss); border-color: var(--text); filter: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .9375rem; font-weight: 500; color: var(--gold-light);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 3px;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.link-arrow svg { transition: transform .3s var(--ease); }
.link-arrow:hover { color: var(--gold); border-color: var(--gold); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   8. HOME HERO — sits directly on the logo plate
   -------------------------------------------------------------------------- */
/* The logo plate is the hero image. Copy sits in the settled band beneath it,
   so nothing competes with the wordmark. */
.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Clears the lockup by --plate-drop, derived from the plate's own size. */
  padding-top: clamp(270px, 52vh, 540px);   /* fallback */
  padding-top: calc(var(--plate-top) + 0.533 * var(--plate-w) + var(--plate-drop));
  padding-bottom: 24px;
}
.hero__label { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.hero__label .dot { width: 6px; height: 6px; background: var(--gold); border-radius: 50%; flex: none; }

/* Bottom bar: credentials, actions, scroll cue — all on one hairline rail */
.hero__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: clamp(20px, 2.4vw, 30px);
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* Scroll cue */
.scroll-cue {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--text-faint);
}
.scroll-cue i { display: block; width: 54px; height: 1px; background: var(--line-strong); position: relative; overflow: hidden; }
.scroll-cue i::after {
  content: ""; position: absolute; inset: 0; background: var(--gold-light);
  transform: translateX(-100%); animation: sweep 2.4s var(--ease) infinite;
}
@keyframes sweep { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

/* Dimension line: |<------ LABEL ------>| */
.dim {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 14px;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.dim::before, .dim::after { content: ""; height: 9px; width: 1px; background: var(--line-strong); flex: none; }
.dim__line { flex: 1; height: 1px; background: var(--line-strong); }

/* --------------------------------------------------------------------------
   9. IMAGE PLATES
   -------------------------------------------------------------------------- */
.plate { position: relative; background: var(--navy-raised); border: 1px solid var(--line); overflow: hidden; }
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate--wide { aspect-ratio: 21 / 9; }
.plate--tall { aspect-ratio: 3 / 4; }
.plate--square { aspect-ratio: 1 / 1; }
.plate__caption {
  position: absolute; left: 0; bottom: 0;
  background: rgba(7,14,26,.9);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 9px 16px;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-soft);
}
/* Google's frame is bright white. Dimming and slightly desaturating it lets
   the map sit inside the navy palette instead of punching a hole in it; it
   returns to full strength when you interact with it. */
.plate--map { background: var(--navy-abyss); }
.plate__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(.55) contrast(.92) brightness(.82);
  transition: filter .45s var(--ease);
}
.plate--map:hover .plate__map,
.plate__map:focus-within { filter: none; }

.regmark { position: absolute; width: 14px; height: 14px; pointer-events: none; opacity: .65; z-index: 3; }
.regmark::before, .regmark::after { content: ""; position: absolute; background: var(--gold); }
.regmark::before { left: 0; top: 6px; width: 14px; height: 1px; }
.regmark::after  { top: 0; left: 6px; width: 1px; height: 14px; }
.regmark--tl { top: 10px; left: 10px; }
.regmark--tr { top: 10px; right: 10px; }
.regmark--bl { bottom: 10px; left: 10px; }
.regmark--br { bottom: 10px; right: 10px; }

/* Hatched swatch — the fallback texture for any plate that has no photo yet */
.hatch {
  background-color: var(--navy-raised);
  background-image: repeating-linear-gradient(45deg, rgba(214,165,66,.10) 0 1px, transparent 1px 9px);
}
.hatch--blue {
  background-color: var(--navy-lift);
  background-image: repeating-linear-gradient(45deg, rgba(240,206,126,.14) 0 1px, transparent 1px 9px);
}

/* --------------------------------------------------------------------------
   10. STAT BAR
   -------------------------------------------------------------------------- */
.statbar { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.statbar--3 { grid-template-columns: repeat(3, 1fr); }
.statbar__item { padding: 28px 24px 28px 0; border-right: 1px solid var(--line); }
.statbar__item:last-child { border-right: 0; }
.statbar__item:not(:first-child) { padding-left: 24px; }
.statbar__value {
  font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 400;
  letter-spacing: -0.03em; line-height: 1; color: var(--gold-light);
}
.statbar__value sup { font-size: .45em; vertical-align: super; color: var(--gold); margin-left: 2px; }
.statbar__label { margin-top: 10px; }

/* --------------------------------------------------------------------------
   11. SERVICE INDEX ROWS
   -------------------------------------------------------------------------- */
.index-list { border-top: 1px solid var(--line); }
.index-row { border-bottom: 1px solid var(--line); }
.index-row__head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  width: 100%;
  padding: 26px 0;
  background: transparent;
  border: 0;
  text-align: left;
  color: inherit;
  transition: padding-left .35s var(--ease), color .25s var(--ease);
}
.index-row__head:hover { padding-left: 12px; color: var(--gold-light); }
.index-row__title { font-size: clamp(1.25rem, 2.2vw, 1.85rem); font-weight: 400; letter-spacing: -0.024em; }
.index-row__sign { position: relative; width: 22px; height: 22px; flex: none; }
.index-row__sign::before, .index-row__sign::after {
  content: ""; position: absolute; background: currentColor; transition: transform .35s var(--ease);
}
.index-row__sign::before { top: 10.5px; left: 0; width: 22px; height: 1px; }
.index-row__sign::after  { left: 10.5px; top: 0; width: 1px; height: 22px; }
.index-row.is-open .index-row__sign::after { transform: scaleY(0); }
.index-row.is-open .index-row__head { color: var(--gold-light); }
.index-row__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.index-row.is-open .index-row__panel { grid-template-rows: 1fr; }
.index-row__panel > div { overflow: hidden; }
.index-row__body {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  padding-bottom: 34px;
}
.chiplist { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em;
  padding: 5px 10px; border: 1px solid var(--line); border-radius: 2px;
  color: var(--text-soft); background: rgba(214,165,66,.06);
}

/* --------------------------------------------------------------------------
   12. PROJECT SHEETS
   -------------------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filter {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 9px 15px; border: 1px solid var(--line); background: transparent; border-radius: 2px;
  color: var(--text-soft); transition: all .22s var(--ease);
}
.filter:hover { border-color: var(--line-strong); color: var(--text); }
.filter.is-active {
  background: linear-gradient(160deg, var(--gold-light), var(--gold) 60%, var(--gold-deep));
  border-color: var(--gold); color: var(--navy-abyss); font-weight: 600;
}

.sheets { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.6vw, 36px); }
/* Three across for the photo gallery, where there are a lot of cards */
.sheets--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px); }
.sheets--3 .sheet__block--rich { gap: 12px; padding: 16px 18px; }
.sheets--3 .sheet__index { font-size: 1.15rem; }
.sheets--3 .sheet__name { font-size: 1rem; }
/* Figures are not links here — there are no project detail pages to open. */
figure.sheet { margin: 0; }
.sheet {
  display: block;
  background: rgba(16, 32, 58, .82);
  border: 1px solid var(--line);
  transition: border-color .3s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.sheet:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
  box-shadow: 0 30px 60px -44px #000, 0 0 0 1px rgba(214,165,66,.14);
}
.sheet__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--line); }
/* Drawings and plans must not be cropped. Letterboxed on paper white, so the
   card reads as a drawing sheet mounted on the wall rather than a dark hole. */
.sheet__media--fit { background: #F3F1EC; }
.sheet__media--fit > img { inset: 10px !important; width: calc(100% - 20px) !important; height: calc(100% - 20px) !important; }
.sheet:hover .sheet__media--fit > img { transform: none; }
.sheet__media--fit .sheet__tag { background: rgba(7, 14, 26, .92); }
.sheet__media > *:not(.sheet__tag) { transition: transform .7s var(--ease); }
.sheet:hover .sheet__media > *:not(.sheet__tag) { transform: scale(1.035); }
.sheet__tag {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  background: rgba(7,14,26,.86); border: 1px solid var(--line-strong);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 6px 12px; font-family: var(--mono); font-size: .625rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-light);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.sheet--feature:hover .sheet__tag {
  background: linear-gradient(160deg, var(--gold-light), var(--gold) 60%, var(--gold-deep));
  border-color: var(--gold); color: var(--navy-abyss); font-weight: 600;
}
.sheet__block { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 20px 22px; }
.sheet__name { font-size: 1.1875rem; font-weight: 500; letter-spacing: -0.018em; }

/* ---- Feature cards (home page) -------------------------------------------
   A richer title block: ruled index numeral, name, discipline line, and a
   circular go button that fills gold on hover.
   -------------------------------------------------------------------------- */
.sheet--feature { position: relative; }
/* accent rule along the top edge, drawn on hover */
.sheet--feature::before {
  content: "";
  position: absolute; top: -1px; left: -1px; right: -1px; height: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-light), var(--gold-deep));
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
  z-index: 3;
}
.sheet--feature:hover::before { transform: scaleX(1); }

/* gradient foot on the image, so the photo settles into the title block */
.sheet__scrim {
  position: absolute; inset: auto 0 0 0; height: 46%;
  background: linear-gradient(to bottom, rgba(7,14,26,0), rgba(7,14,26,.72));
  pointer-events: none; z-index: 1;
}
/* slow diagonal sheen across the image on hover */
.sheet__sheen {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
}
.sheet__sheen::after {
  content: "";
  position: absolute; top: -60%; bottom: -60%; left: -40%; width: 28%;
  background: linear-gradient(100deg, transparent, rgba(240,206,126,.16), transparent);
  transform: translateX(-140%) rotate(8deg);
  transition: transform 1.1s var(--ease);
}
.sheet--feature:hover .sheet__sheen::after { transform: translateX(520%) rotate(8deg); }

.sheet__block--rich {
  grid-template-columns: auto 1px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
}
.sheet__index {
  font-family: var(--mono);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--gold);
  opacity: .5;
  transition: opacity .3s var(--ease);
}
.sheet--feature:hover .sheet__index { opacity: 1; }
.sheet__divider { width: 1px; align-self: stretch; background: var(--line); }
.sheet__meta-line {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: .6875rem;
  line-height: 1.5;
  letter-spacing: .1em;
  color: var(--text-faint);
}
.sheet__go {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex: none;
  border: 1px solid var(--line-strong); border-radius: 50%;
  color: var(--gold-light);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.sheet__go svg { transition: transform .35s var(--ease); }
.sheet--feature:hover .sheet__go {
  background: linear-gradient(160deg, var(--gold-light), var(--gold) 60%, var(--gold-deep));
  border-color: var(--gold);
  color: var(--navy-abyss);
}
.sheet--feature:hover .sheet__go svg { transform: translateX(3px); }
.sheet__specs { display: flex; gap: 18px; margin-top: 12px; flex-wrap: wrap; }
.sheet__spec { border-top: 1px solid var(--line); padding-top: 7px; }
.sheet__spec dt { font-family: var(--mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.sheet__spec dd { margin: 3px 0 0; font-size: .8125rem; color: var(--text); }
.sheet--wide { grid-column: span 2; }
.sheet--wide .sheet__media { aspect-ratio: 21 / 9; }

/* --------------------------------------------------------------------------
   13. PROCESS RULER
   -------------------------------------------------------------------------- */
.ruler { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 8px; }
.ruler::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); }
.ruler__step { position: relative; padding: 34px 28px 0 0; }
.ruler__step + .ruler__step { padding-left: 28px; }
.ruler__step::before { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 16px; background: var(--gold); }
.ruler__n { font-family: var(--mono); font-size: .6875rem; letter-spacing: .18em; color: var(--gold); }
.ruler__t { margin-top: 12px; font-size: 1.125rem; font-weight: 500; letter-spacing: -0.014em; }
.ruler__d { margin-top: 10px; font-size: .9375rem; color: var(--text-soft); }

/* --------------------------------------------------------------------------
   13b. PROCESS FLOW — serpentine, five stages
        Row 1 runs left to right (01 → 02 → 03), drops at the right,
        then row 2 runs back right to left (04 → 05).
   -------------------------------------------------------------------------- */
.flow {
  --flow-gap: clamp(26px, 3.4vw, 62px);
  --flow-row: clamp(46px, 5vw, 84px);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--flow-gap);
  row-gap: var(--flow-row);
}
.flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: rgba(16, 32, 58, .55);
  padding: clamp(20px, 2vw, 28px);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.flow__step:hover { border-color: var(--line-strong); background: rgba(16, 32, 58, .8); }
/* corner ticks, echoing the registration marks used on image plates */
.flow__step::before, .flow__step::after {
  content: ""; position: absolute; width: 9px; height: 9px; pointer-events: none;
}
.flow__step::before { top: -1px; left: -1px; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.flow__step::after  { bottom: -1px; right: -1px; border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); }

.flow__n { font-family: var(--mono); font-size: .6875rem; letter-spacing: .18em; color: var(--gold); }
.flow__t { margin-top: 12px; font-size: clamp(1.02rem, 1.35vw, 1.2rem); font-weight: 500; letter-spacing: -0.014em; }
.flow__s { margin-top: 8px; font-size: .8125rem; color: var(--gold-light); font-style: italic; }
.flow__d { margin-top: 12px; font-size: .9375rem; color: var(--text-soft); }

/* Desktop placement: 04 sits under 03, 05 sits under 02 */
.flow__step--4 { grid-column: 3; grid-row: 2; }
.flow__step--5 { grid-column: 2; grid-row: 2; }

/* Connectors. Decorative only — the reading order is the DOM order. */
.flow__link { position: absolute; display: block; pointer-events: none; }
.flow__link::after {
  content: ""; position: absolute; width: 7px; height: 7px;
  border-top: 1px solid var(--gold); border-right: 1px solid var(--gold);
}
.flow__link--right,
.flow__link--left { top: 50%; width: var(--flow-gap); height: 1px; background: var(--line-strong); }
.flow__link--right { left: 100%; }
.flow__link--right::after { right: 0; top: -3.5px; transform: rotate(45deg); }
.flow__link--left { right: 100%; }
.flow__link--left::after { left: 0; top: -3.5px; transform: rotate(-135deg); }
.flow__link--down {
  left: 50%; top: 100%; width: 1px; height: var(--flow-row); background: var(--line-strong);
}
.flow__link--down::after { bottom: 0; left: -3.5px; transform: rotate(135deg); }
/* Connectors differ between the 3-across and 2-across arrangements, so both
   sets live in the markup and each breakpoint shows the ones that apply. */
.flow__link--md { display: none; }

/* --------------------------------------------------------------------------
   14. QUOTE
   -------------------------------------------------------------------------- */
.quote { max-width: 26ch; font-size: clamp(1.45rem, 3vw, 2.3rem); font-weight: 400; letter-spacing: -0.026em; line-height: 1.2; }
.quote--wide { max-width: 34ch; }
.attrib { display: flex; align-items: center; gap: 14px; margin-top: 32px; }
.attrib__avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; border: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   15. PEOPLE
   -------------------------------------------------------------------------- */
.people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
  max-width: 620px;
}
/* Each card is a button: hover, click or keyboard focus fills the panel below. */
.person {
  display: block;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
}
.person__photo {
  display: block;
  border: 1px solid var(--line);
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
  transition: border-color .3s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.person:hover .person__photo,
.person:focus-visible .person__photo,
.person.is-active .person__photo {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 24px 44px -36px #000, 0 0 0 1px rgba(214, 165, 66, .2);
}
/* The portrait fills its card; grayscale lifts to full colour on selection. */
.person__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: filter .45s var(--ease), transform .6s var(--ease);
}
.person:hover .person__photo img,
.person:focus-visible .person__photo img,
.person.is-active .person__photo img { filter: none; transform: scale(1.02); }

.person__name { display: block; margin-top: 16px; font-size: 1.0625rem; font-weight: 500; transition: color .25s var(--ease); }
.person__role { display: block; margin-top: 4px; }
.person.is-active .person__name { color: var(--gold-light); }

.person-detail {
  margin-top: clamp(28px, 3.4vw, 44px);
  border-top: 1px solid var(--line);
  padding-top: clamp(20px, 2.4vw, 30px);
}
/* One panel per person; only the selected one is in the flow. */
.person-panel[hidden] { display: none; }
.person-panel .detail:first-child { border-top: 0; padding-top: 0; }
.person-panel__line {
  margin-top: 18px;
  padding-left: 14px;
  border-left: 2px solid var(--gold);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--gold-light);
}

/* --------------------------------------------------------------------------
   16. FORM
   -------------------------------------------------------------------------- */
.form { background: rgba(16, 32, 58, .9); border: 1px solid var(--line); }
.form__head { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 18px 26px; border-bottom: 1px solid var(--line); }
.form__body { padding: 26px; display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field > label { font-family: var(--mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.field input, .field select, .field textarea {
  font: inherit;
  font-size: .9375rem;
  color: var(--text);
  padding: 12px 14px;
  background: rgba(7, 14, 26, .7);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
  width: 100%;
}
.field select option { background: var(--navy-raised); color: var(--text); }
.field ::placeholder { color: var(--text-faint); }
.field textarea { resize: vertical; min-height: 128px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold); background: rgba(7, 14, 26, .95);
  box-shadow: 0 0 0 3px rgba(214, 165, 66, .18);
}
.field__err { font-family: var(--mono); font-size: .6875rem; color: #F09090; }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: #C7524C; }
.form__foot { padding: 0 26px 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.form__note {
  display: none; grid-column: 1 / -1; padding: 14px 16px;
  border: 1px solid var(--gold); background: rgba(214, 165, 66, .12);
  color: var(--gold-light); font-size: .9375rem; border-radius: 2px;
}
.form__note.is-visible { display: block; }
/* Delivery failed: say so in red rather than in the reassuring gold. */
.form__note.is-error { border-color: #C7524C; background: rgba(199, 82, 76, .14); color: #F0A9A5; }
.form button[type="submit"]:disabled { opacity: .6; cursor: progress; }

.detail { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.detail:first-child { border-top: 1px solid var(--line); }
.detail a { color: var(--gold-light); }
.detail a:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   17. CTA BAND
   -------------------------------------------------------------------------- */
.cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  background: var(--navy-abyss);
  border-top: 1px solid var(--line);
  color: var(--text);
  padding-block: clamp(56px, 7vw, 88px) 32px;
  position: relative; z-index: 1;
}
.footer a { color: var(--text-soft); transition: color .2s var(--ease); }
.footer a:hover { color: var(--gold-light); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.footer h4 { font-family: var(--mono); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; font-weight: 500; }
.footer li + li { margin-top: 10px; }
.footer__base {
  margin-top: clamp(40px, 5vw, 64px); padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   19. PAGE HEADER (interior pages)
   -------------------------------------------------------------------------- */
.pagehead { padding-block: clamp(48px, 6vw, 92px) clamp(36px, 4vw, 56px); border-bottom: 1px solid var(--line); position: relative; z-index: 1; }
.crumbs { display: flex; gap: 10px; align-items: center; margin-bottom: 24px; }
.crumbs a { color: var(--text-soft); }
.crumbs a:hover { color: var(--gold-light); }

/* --------------------------------------------------------------------------
   20. SCROLL REVEAL + PROGRESS
   -------------------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform-origin: left; transform: scaleX(0); z-index: 60;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-light));
}

/* --------------------------------------------------------------------------
   21. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .ruler { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
  .ruler::before { display: none; }
  .ruler__step { border-top: 1px solid var(--line); }

  /* Two across, still serpentine: 01→02 ↓ 04←03 ↓ 05 */
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow__step--3 { grid-column: 2; grid-row: 2; }
  .flow__step--4 { grid-column: 1; grid-row: 2; }
  .flow__step--5 { grid-column: 1; grid-row: 3; }
  .flow__link--lg { display: none; }
  .flow__link--md { display: block; }
}

@media (max-width: 860px) {
  :root { --header-h: 68px; }
  .brand__logo { height: 38px; }
  .nav-toggle { display: block; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(7, 14, 26, .98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 22px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  /* Freeze the page behind the open menu. */
  body.nav-open { overflow: hidden; }
  .nav a { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 1.0625rem; }
  .nav a::after { display: none; }
  .nav .btn { margin: 18px 0 0; justify-content: center; border-bottom: 1px solid var(--gold); }

  .cols-2, .cols-3, .cols-sidebar { grid-template-columns: 1fr; }
  /* On small screens sit the copy directly under the lockup rather than
     pinning it to the bottom of the viewport. */
  /* Same derivation, sized for a narrow screen. */
  :root {
    --plate-w: min(152vw, 124svh);
    --plate-top: -2svh;
    --plate-drop: 34px;
  }
  .hero { min-height: 0; justify-content: flex-start; }
  .hero__bar { grid-template-columns: 1fr; align-items: start; gap: 20px; }
  .statbar { grid-template-columns: repeat(2, 1fr); }
  .statbar__item { border-right: 0; padding: 22px 0; border-bottom: 1px solid var(--line); }
  .statbar__item:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 20px; }
  .statbar__item:nth-child(even) { padding-left: 20px; }
  /* three figures: last one spans the full width rather than sitting half-empty */
  .statbar--3 .statbar__item:last-child { grid-column: 1 / -1; border-right: 0; padding-left: 0; border-bottom: 0; }
  .sheets { grid-template-columns: 1fr; }
  .sheets--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet--wide { grid-column: span 1; }
  .sheet--wide .sheet__media { aspect-ratio: 4 / 3; }
  /* Single column: the numbering carries the sequence, connectors come off */
  .flow { grid-template-columns: 1fr; --flow-row: 0px; row-gap: 14px; }
  .flow__step--3, .flow__step--4, .flow__step--5 { grid-column: 1; grid-row: auto; }
  .flow__link { display: none !important; }

  .people { max-width: none; }

  .index-row__head { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .index-row__body { grid-template-columns: 1fr; }
  .form__body { grid-template-columns: 1fr; }
  .cta { grid-template-columns: 1fr; }
  .detail { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 560px) {
  .cols-4 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .ruler { grid-template-columns: 1fr; }
  .ruler__step + .ruler__step { padding-left: 0; }
  .sheets--3 { grid-template-columns: 1fr; }
  .sheet__block { grid-template-columns: 1fr; }
  /* keep the index rule alongside the title, drop the go button */
  .sheet__block--rich { grid-template-columns: auto 1px minmax(0, 1fr); gap: 14px; padding: 20px; }
  .sheet__go { display: none; }
  .brand__text span { display: none; }
}

/* --------------------------------------------------------------------------
   22. TOUCH AND POINTER
   Everything in this file was drawn for a mouse. This section makes it behave
   on a phone — which, for a contractor's website, is where most visitors are.
   -------------------------------------------------------------------------- */

/* Hover effects that move things are wrong on a touchscreen: the state sticks
   after the tap and the card sits lifted until you touch something else.
   Fine-pointer devices keep them; touch devices get a press state instead. */
@media (hover: none) {
  .sheet:hover .sheet__media > *:not(.sheet__tag),
  .person:hover .person__photo,
  .person:hover .person__photo img,
  .btn:hover { transform: none; }
  .sheet--feature:hover .sheet__sheen::after { transform: translateX(-160%) rotate(8deg); }
  .btn:hover { filter: none; box-shadow: none; }
}

/* A press should register instantly — this is what makes a site feel native
   rather than like a document you are poking at. */
.btn:active, .filter:active, .person:active, .link-arrow:active { transform: translateY(1px); }
.btn:active { filter: brightness(.96); }
.sheet:active { opacity: .92; }

/* Comfortable targets. 44px is the smallest a thumb hits reliably. */
@media (pointer: coarse) {
  .filter { padding: 12px 17px; min-height: 44px; }
  .nav-toggle { width: 46px; height: 46px; }
  .sheet__go { min-width: 44px; min-height: 44px; }
  .footer a, .detail a { padding-block: 2px; }
  /* A one-finger drag on an embedded map pans the map instead of scrolling
     the page, and the visitor gets stuck. On touch the map is a picture; the
     "Get directions" link below it opens the real Maps app. */
  .plate__map { pointer-events: none; filter: grayscale(.55) contrast(.92) brightness(.82); }
}

/* Under 16px, Chrome and Safari zoom the whole page when a field takes focus
   and never zoom back out. Every input on this site is therefore 16px. */
.field input, .field select, .field textarea { font-size: 1rem; }

/* `transition: all` re-animates layout properties on every repaint. */
.filter { transition: border-color .22s var(--ease), color .22s var(--ease), background .22s var(--ease); }

/* Figures read as data, so the numerals should line up in a column. */
.stat__figure, .sheet__index, .num, .statbar__figure { font-variant-numeric: tabular-nums; }

/* Desktop scrollbar in the brand palette rather than default grey. */
@media (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: var(--gold-deep) var(--navy-abyss); }
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: var(--navy-abyss); }
  ::-webkit-scrollbar-thumb { background: var(--navy-lift); border: 3px solid var(--navy-abyss); border-radius: 6px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }
}

/* Very small phones: the gallery captions crowd badly at three lines. */
@media (max-width: 400px) {
  .sheet__block--rich { padding: 16px; gap: 12px; }
  .sheet__name { font-size: .9375rem; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .plate__caption { font-size: .625rem; padding: 8px 12px; }
  /* Residential —— Commercial —— Industrial only just fits a 320px column;
     tightening the tracking and the gaps keeps it on one line rather than
     letting it decide to overflow. */
  .dim { gap: 8px; letter-spacing: .09em; font-size: .625rem; }
  .form__body, .form__foot { padding-inline: 18px; }
  .form__head { padding-inline: 18px; }
  .footer__grid { gap: 28px; }
}

/* --------------------------------------------------------------------------
   23. ACCESSIBILITY
   -------------------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; border-radius: 2px; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: var(--navy-abyss); padding: 12px 18px; font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .masthead, .footer, .progress, .nav-toggle, .logo-field { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 24px; }
}