/* Highset - shared stylesheet.
   Language: Queensland institutional. Maroon and Helidon sandstone, warm near-black ink,
   serif display, mono data register. Maroon carries full bands and the primary CTA —
   it is the brand, not a decorative highlight. No shadows, no radius, nothing floating.

   Token names are historical (--cobalt, --navy-*, --mint). The values are maroon-family;
   the names stayed so the markup didn't have to change. */

:root {
  --ink: #1E1A1B;
  --ink-deep: #14100F;
  --slate: #635C57;
  --cloud: #E4DACA;
  --cobalt: #8C1D40;
  --cobalt-deep: #6E152F;
  --mint: #8C1D40;
  --white: #F7F5F0;
  --paper: #FFFFFF;
  --line: #C9BFB2;
  --line-soft: #E0D8CC;
  --navy-card: #7A1637;
  --navy-card-line: #AD4A67;
  --navy-eyebrow: #EBCED7;
  --navy-copy: #F0DCE2;
  --navy-stat-label: #DDBCC5;
  --font-display: "Inter Tight", Inter, "Segoe UI", -apple-system, sans-serif;
  --font-body: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, ui-monospace, SFMono-Regular, Menlo, monospace;
  --measure: 62ch;
}

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

html {
  color: var(--ink);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--slate);
  background: var(--white);
  font-size: 1.0625rem;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
p,
blockquote {
  margin-top: 0;
}

h1,
h2,
h3,
h4 {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  text-wrap: balance;
}

/* Display type carries the brand. Large, tight, low leading. */
h1 {
  margin-bottom: 1.75rem;
  font-size: clamp(2.75rem, 7vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.038em;
}

h2 {
  margin-bottom: 1.25rem;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

h3 {
  margin-bottom: 0.7rem;
  font-size: clamp(1.15rem, 1.6vw, 1.3rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
}

p {
  margin-bottom: 1rem;
  max-width: var(--measure);
}

/* Links read as text, not as accent decoration. */
a {
  color: var(--ink);
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover {
  text-decoration-color: currentColor;
}

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

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

[hidden] {
  display: none !important;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 3px;
}

.section--navy :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--white);
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1000;
  padding: 0.65rem 1rem;
  color: var(--white);
  background: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
}

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

.container {
  width: min(100% - 2.5rem, 72rem);
  margin-inline: auto;
}

/* ---------- navigation ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line);
  background: rgb(247 245 240 / 0.94);
  backdrop-filter: saturate(180%) blur(12px);
}

.nav__inner {
  position: relative;
  display: flex;
  min-height: 4.5rem;
  align-items: center;
  gap: 1.75rem;
}

.nav__logo {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
}

/* The 2A steelwork H: posts as I-beams, high bar spanning them. */
.nav__logo svg {
  flex: none;
  width: auto;
  height: 1.4em;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-left: auto;
}

.nav__link {
  position: relative;
  padding-block: 0.5rem;
  color: var(--slate);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.nav__link:hover {
  color: var(--ink);
}

.nav__link[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

.nav__link[aria-current="page"]::after {
  position: absolute;
  right: 0;
  bottom: 0.15rem;
  left: 0;
  height: 1px;
  background: var(--ink);
  content: "";
}

/* The phone sits in the data register: this firm publishes numbers. */
.nav__phone {
  flex: 0 0 auto;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.nav__cta {
  flex: 0 0 auto;
}

.nav__toggle {
  display: none;
  margin-left: auto;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--white);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav__panel {
  display: none;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--cobalt);
  color: var(--white);
  background: var(--cobalt);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn:hover {
  border-color: var(--cobalt-deep);
  background: var(--cobalt-deep);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

/* Secondary action: quiet, ink, never a second accent colour. */
.btn--ghost {
  border-color: var(--line);
  color: var(--ink);
  background: transparent;
}

.btn--ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}

.section--navy .btn--ghost {
  border-color: rgb(255 255 255 / 0.4);
  color: var(--white);
}

.section--navy .btn--ghost:hover {
  border-color: var(--white);
  color: var(--white);
  background: rgb(255 255 255 / 0.06);
}

/* On the maroon band a maroon button would disappear into it. Invert: the primary
   action becomes the light surface, and the band becomes its border. */
.section--navy .btn:not(.btn--ghost) {
  border-color: var(--white);
  color: var(--cobalt);
  background: var(--white);
}

.section--navy .btn:not(.btn--ghost):hover {
  border-color: var(--cloud);
  color: var(--cobalt-deep);
  background: var(--cloud);
}

/* ---------- sections and the 2 degree seam ---------- */

.section {
  position: relative;
  isolation: isolate;
  padding-block: clamp(5rem, 11vw, 9rem);
}

/* The 2-degree skewed seam is gone. Bands meet on a straight edge now — the angled
   transition is a 2010s marketing-site device and it fought the institutional read. */

.section > * {
  position: relative;
  z-index: 1;
}

/* The full-bleed band is maroon, not ink. This is where the brand colour gets its area —
   large and calm, so it reads as a field rather than a highlight. */
.section--navy {
  color: var(--navy-copy);
  background: var(--cobalt);
}

.section--navy h1,
.section--navy h2,
.section--navy h3,
.section--navy h4 {
  color: var(--white);
}

.section--navy a:not(.btn) {
  color: var(--white);
  text-decoration-color: rgb(255 255 255 / 0.4);
}

.section--deep {
  background: var(--ink-deep);
}

.section--cloud {
  background: var(--cloud);
}

/* Photo band: a dark full-bleed section with a photograph multiplied under an
   ink-to-maroon gradient (set inline as background-image per section). Pair with
   .section--navy so text and buttons take the on-dark palette. */
.section--photo {
  background-color: var(--ink-deep);
  background-position: center;
  background-size: cover;
}

/* Hero: sandstone ground straight off the nav, tighter top so the headline
   sits high instead of floating in a chalk void. Cards go paper for contrast. */
.section--hero {
  background: var(--cloud);
  padding-block-start: clamp(2.75rem, 5.5vw, 4.5rem);
}

.section--hero .card {
  border-color: var(--line);
  background: var(--paper);
}

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

/* ---------- labels (the old eyebrow, de-templated) ----------
   Mono, ink, with a short rule. Not uppercase-tracking cobalt on every section. */

.eyebrow {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 46ch;
  margin-bottom: 1.5rem;
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-transform: none;
}

/* Rule sits on the optical centre of the FIRST line, so a wrapped label stays tidy.
   Maroon: the one colour signal above the fold. */
.eyebrow::before {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 2px;
  margin-top: 0.68em;
  background: var(--cobalt);
  content: "";
}

.section--navy .eyebrow {
  color: var(--navy-stat-label);
}

.lede {
  max-width: 54ch;
  color: var(--slate);
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.62;
}

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

/* ---------- grids ---------- */

.grid {
  display: grid;
  gap: 2rem;
}

/* Asymmetric by default: the first column carries more weight. */
.grid--2 {
  grid-template-columns: 1.08fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}

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

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

.feature-stack {
  gap: clamp(4rem, 10vw, 8rem);
}

.feature-row {
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}

.feature-row--reverse > :first-child {
  grid-column: 2;
  grid-row: 1;
}

.feature-row--reverse > :last-child {
  grid-column: 1;
  grid-row: 1;
}

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

/* ---------- surfaces ----------
   Flat by default. Elevation only where a card is a real choice or a real form. */

.card {
  height: 100%;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line-soft);
  background: var(--white);
}

.card__title {
  margin-bottom: 0.7rem;
  font-size: clamp(1.15rem, 1.6vw, 1.3rem);
  letter-spacing: -0.015em;
}

.section--navy .card {
  border-color: var(--navy-card-line);
  color: var(--navy-copy);
  background: var(--navy-card);
}

.section--cloud .card {
  border-color: var(--line);
}

/* "Raised" no longer means elevated — no shadows anywhere on this site. Emphasis now
   comes from a heavier hairline, which is how the rest of the page draws separation. */
.card--raised {
  border-color: var(--slate);
}

.section--navy .card--raised {
  border-color: var(--navy-card-line);
}

/* Primary door outweighs the secondary one: maroon rule across the top. */
.card--lead {
  border-color: var(--slate);
  border-top: 3px solid var(--cobalt);
}

/* ---------- instrument panel (stats) ----------
   Mono, tabular, hairline-separated, unequal columns. Reads as measurement. */

.statgrid {
  display: grid;
  border-top: 1px solid rgb(255 255 255 / 0.16);
}

.statgrid--4 {
  grid-template-columns: 1.25fr 1.25fr 1fr 1.35fr;
}

.statgrid--3 {
  grid-template-columns: 1fr 1.15fr 1.15fr;
}

.stat {
  padding: 2.25rem 1.5rem 0 0;
}

.statgrid .stat + .stat {
  padding-left: 1.75rem;
  border-left: 1px solid rgb(255 255 255 / 0.16);
}

/* The two real numbers are the strongest asset on the site. Set them in the display
   serif and much larger — mono at 3rem read like a spec sheet, not a claim. */
.stat__figure {
  display: block;
  margin-bottom: 0.85rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(3rem, 6.5vw, 5.25rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.section--navy .stat__figure {
  color: var(--white);
}

.stat__label {
  display: block;
  max-width: 22ch;
  color: var(--slate);
  font-size: 0.875rem;
  line-height: 1.45;
}

.section--navy .stat__label {
  color: var(--navy-stat-label);
}

/* ---------- ledger: numbered editorial rows (replaces 3 equal cards) ---------- */

.ledger {
  display: grid;
  gap: 0;
  counter-reset: ledger-row;
}

.ledger__row {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--line);
  counter-increment: ledger-row;
}

.ledger__row:last-child {
  border-bottom: 1px solid var(--line);
}

.ledger__row::before {
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.9;
  content: counter(ledger-row, decimal-leading-zero);
}

.ledger__row :is(h2, h3) {
  margin-bottom: 0;
  font-size: clamp(1.3rem, 2.1vw, 1.65rem);
  line-height: 1.15;
  letter-spacing: -0.022em;
}

.ledger__row p {
  margin-bottom: 0;
  max-width: 46ch;
}

/* ---------- stagger: offset tiles (replaces 3 equal cards) ---------- */

.stagger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.stagger__item {
  padding-top: 1.5rem;
  border-top: 2px solid var(--ink);
}

.stagger__item:nth-child(2) {
  margin-top: clamp(1.5rem, 4vw, 3.25rem);
}

.stagger__item:nth-child(3) {
  margin-top: clamp(3rem, 8vw, 6.5rem);
}

.section--navy .stagger__item {
  border-top-color: var(--navy-eyebrow);
}

.stagger__item :is(h2, h3) {
  margin-bottom: 0.6rem;
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  line-height: 1.22;
  letter-spacing: -0.018em;
}

.stagger__item p {
  margin-bottom: 0;
  max-width: 34ch;
}

/* ---------- slab: large-type list (replaces 3 equal cards) ---------- */

.slab {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.slab__item {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 3rem);
  align-items: baseline;
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}

.slab__item :is(h2, h3) {
  margin-bottom: 0;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.slab__item p {
  margin-bottom: 0;
}

/* ---------- process steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  counter-reset: brochure-step;
}

.step {
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink);
  counter-increment: brochure-step;
}

.step::before {
  display: block;
  margin-bottom: 1.25rem;
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  content: counter(brochure-step, decimal-leading-zero);
}

.step h3 {
  margin-bottom: 0.5rem;
}

.step p {
  margin-bottom: 0;
  font-size: 0.9375rem;
}

.section--navy .step {
  border-top-color: rgb(255 255 255 / 0.3);
}

.section--navy .step::before {
  color: var(--navy-stat-label);
}

/* ---------- pull quote ---------- */

.quote {
  margin: 0;
  max-width: 24ch;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.2vw, 3rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.section--navy .quote {
  color: var(--white);
}

.quote__attr {
  display: block;
  margin-top: 2rem;
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.section--navy .quote__attr {
  color: var(--navy-stat-label);
}

/* ---------- check list ---------- */

.check {
  position: relative;
  min-height: 1.5rem;
  margin-bottom: 0.85rem;
  padding-left: 1.75rem;
  font-size: 0.9375rem;
}

.check::before {
  position: absolute;
  top: 0.42em;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--mint);
  content: "";
}

/* ---------- FAQ ---------- */

.faq {
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  position: relative;
  padding: 1.4rem 3rem 1.4rem 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::marker {
  content: "";
}

.faq summary::after {
  position: absolute;
  top: 50%;
  right: 0.25rem;
  width: 1.5rem;
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  content: "+";
  transform: translateY(-50%);
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq details > :not(summary) {
  max-width: 62ch;
  padding-right: 3rem;
  padding-bottom: 1.4rem;
  color: var(--slate);
}

.section--navy .faq,
.section--navy .faq details {
  border-color: var(--navy-card-line);
}

.section--navy .faq summary {
  color: var(--white);
}

.section--navy .faq summary::after,
.section--navy .faq details > :not(summary) {
  color: var(--navy-stat-label);
}

/* ---------- forms ---------- */

.field {
  margin-bottom: 1.35rem;
}

.field__label {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.field__control {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--slate);
  color: var(--ink);
  background: var(--white);
}

.field__control::placeholder {
  color: var(--slate);
}

.section--navy .field__control {
  border-color: #8DA2B8;
}

textarea.field__control {
  min-height: 8rem;
  resize: vertical;
}

.field__control[aria-invalid="true"] {
  border-color: #B42318;
}

.field__error {
  min-height: 1.35em;
  margin-top: 0.35rem;
  color: #B42318;
  font-size: 0.875rem;
}

.section--navy .field__label {
  color: var(--white);
}

.section--navy .field__error {
  color: #FFD1CC;
}

.form-status {
  min-height: 1.55em;
  margin-top: 1rem;
  color: var(--ink);
  font-weight: 500;
}

.form-status[data-state="success"] {
  padding-left: 0.75rem;
  border-left: 3px solid var(--mint);
}

.form-status[data-state="error"] {
  padding-left: 0.75rem;
  border-left: 3px solid #B42318;
  color: #B42318;
}

.section--navy .form-status {
  color: var(--white);
}

.section--navy .form-status[data-state="success"] {
  border-left-color: var(--mint);
}

.section--navy .form-status[data-state="error"] {
  border-left-color: #FFD1CC;
  color: #FFD1CC;
}

/* ---------- image slots ----------
   Deliberate reserved space, not a broken-image hatch. Real photography is outstanding. */

.imgslot {
  position: relative;
  display: grid;
  min-height: 22rem;
  align-content: end;
  padding: 1.5rem;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgb(30 26 27 / 0) 55%, rgb(30 26 27 / 0.06) 100%),
    var(--cloud);
}

.imgslot::before {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  content: "IMAGE PENDING";
}

/* Photo variant: slot holds a real image. Placeholder chrome switches off.
   Every photo gets the same grade — slight desaturate, warm shift, a whisper of maroon
   multiplied over the top — so mismatched stock reads as one art-directed set. */
.imgslot--photo {
  position: relative;
  padding: 0;
  overflow: hidden;
}

.imgslot--photo::before {
  content: none;
}

.imgslot--photo::after {
  position: absolute;
  inset: 0;
  background: var(--cobalt);
  content: "";
  mix-blend-mode: multiply;
  opacity: 0.08;
  pointer-events: none;
}

.imgslot--photo img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.04) brightness(0.98) sepia(0.1);
}

.imgslot--portrait {
  min-height: 14rem;
}

/* Portrait captions already read "PORTRAIT" (wireframe copy) — the marker would be redundant. */
.imgslot--portrait::before {
  content: none;
}

.imgslot--map {
  min-height: 11rem;
}

.imgslot__caption {
  max-width: 34ch;
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
}

.section--cloud .imgslot {
  background:
    linear-gradient(180deg, rgb(30 26 27 / 0) 55%, rgb(30 26 27 / 0.06) 100%),
    var(--white);
}

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  color: var(--slate);
  background: var(--white);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-block: 3.5rem 2.75rem;
}

.footer__tag {
  max-width: 26ch;
  margin: 0.9rem 0 0;
  font-size: 0.9rem;
}

.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}

.footer__col a,
.footer__col .footer__placeholder {
  font-size: 0.9rem;
}

.footer__col a {
  text-decoration: none;
}

.footer__col a:hover {
  text-decoration: underline;
  text-decoration-color: currentColor;
}

.footer__h {
  margin: 0 0 0.35rem;
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer__btm {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  padding-block: 1.4rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.footer a {
  color: var(--ink);
}

.footer__placeholder {
  color: var(--slate);
}

/* ---------- responsive ---------- */

@media (max-width: 899px) {
  .nav__inner > .nav__links,
  .nav__inner > .nav__phone,
  .nav__inner > .nav__cta {
    display: none;
  }

  .nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav__panel:not([hidden]) {
    position: absolute;
    top: calc(100% + 1px);
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-top: 0;
    background: var(--white);
  }

  .nav__panel .nav__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    margin-left: 0;
  }

  .nav__panel .nav__link {
    padding: 0.65rem 0;
  }

  .nav__panel .nav__phone,
  .nav__panel .nav__cta {
    align-self: flex-start;
  }

  .container {
    width: min(100% - 2rem, 72rem);
  }

  .grid--2,
  .grid--3,
  .grid--4,
  .steps,
  .stagger,
  .statgrid--3,
  .statgrid--4 {
    grid-template-columns: 1fr;
  }

  .feature-row--reverse > :first-child,
  .feature-row--reverse > :last-child {
    grid-column: auto;
    grid-row: auto;
  }

  .stagger__item:nth-child(2),
  .stagger__item:nth-child(3) {
    margin-top: 0;
  }

  .statgrid .stat + .stat {
    padding-left: 0;
    border-top: 1px solid rgb(255 255 255 / 0.16);
    border-left: 0;
  }

  .stat {
    padding: 1.75rem 0 0;
  }

  .ledger__row,
  .slab__item {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .ledger__row::before {
    line-height: 1.4;
  }

  .quote {
    max-width: none;
  }

  .section {
    padding-block: 4.5rem;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

@media (max-width: 480px) {
  .container {
    width: min(100% - 1.5rem, 72rem);
  }

  .nav__inner {
    min-height: 4rem;
  }

  .card {
    padding: 1.35rem;
  }

  .imgslot {
    min-height: 15rem;
  }
}

/* ---------- motion ----------
   MOTION_INTENSITY 4. Reveals establish reading order down a long single-column page;
   nothing loops, nothing hijacks scroll. Static is the default under reduced motion. */

@media (prefers-reduced-motion: no-preference) {
  .skip-link,
  .btn,
  .card,
  .nav__link,
  .nav__toggle,
  a {
    transition: 350ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* No lift, no shadow. Hover darkens the hairline — that is the whole interaction. */
  .card:hover {
    border-color: var(--ink);
  }

  .section--navy .card:hover {
    border-color: var(--navy-copy);
  }

  /* Physical press: the button compresses rather than flashing colour. */
  .btn:active {
    transform: translateY(1px) scale(0.985);
  }

  /* Heavier entry: more travel, a breath of blur resolving, slower curve. */
  [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(6px);
    transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 800ms cubic-bezier(0.16, 1, 0.3, 1),
      filter 800ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--reveal-index, 0) * 70ms);
  }

  [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* ---------- texture ----------
   Film grain at 3.5% over everything, fixed and inert. Paper physicality for the
   sandstone-and-maroon palette; invisible as an element, felt as a surface. */

body::after {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  content: "";
  opacity: 0.035;
  pointer-events: none;
}

/* ---------- inline tools ----------
   Not a "tools page": each answer lives where its audience already is. The empty-desk
   counter sits above the employer brief form; the work-rights check sits under the
   candidate FAQ. Big maroon tabular figures, hairline controls — house style, no boxes. */

.tool {
  border-top: 2px solid var(--ink);
  padding-top: 1.5rem;
}

.tool__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  margin: 1.25rem 0 1.75rem;
}

.tool__controls .field {
  min-width: 14rem;
  flex: 1;
  max-width: 20rem;
  margin-bottom: 0;
}

.tool__figure {
  display: block;
  color: var(--cobalt);
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.5vw, 4.25rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.03em;
}

.tool__figure small {
  color: var(--slate);
  font-family: var(--font-body);
  font-size: 0.35em;
  font-weight: 400;
  letter-spacing: 0;
}

.tool__note {
  max-width: 52ch;
  margin-top: 0.9rem;
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.55;
}

.tool__verdict {
  max-width: 56ch;
  margin-top: 0.5rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--cobalt);
  font-size: 1.0625rem;
}

.statgrid__more {
  margin: 1.75rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

/* ---------- local edit mode (localhost only, added by site.js) ---------- */

body.editing main img,
body.editing .footer img {
  outline: 2px dashed var(--cobalt);
  outline-offset: -2px;
  cursor: pointer;
}

/* ---------- selection ---------- */

::selection {
  color: var(--white);
  background: var(--cobalt);
}

.section--navy ::selection {
  color: var(--cobalt);
  background: var(--white);
}

/* Article prose (Insights) */
.prose{max-width:70ch}
.prose h2{font-family:var(--font-display);font-weight:700;letter-spacing:-0.015em;font-size:clamp(1.3rem,2.2vw,1.55rem);margin:2em 0 0.6em;color:var(--ink)}
.prose h3{font-family:var(--font-display);font-weight:600;font-size:1.1rem;margin:1.6em 0 0.5em;color:var(--ink)}
.prose p{margin:0 0 1em;color:var(--slate);line-height:1.7}
.prose ul,.prose ol{margin:0 0 1em;padding-left:1.25rem;color:var(--slate);line-height:1.7}
.prose li{margin-bottom:0.4em}
.prose a{color:var(--cobalt);text-decoration:underline;text-underline-offset:2px}
.prose strong{color:var(--ink)}
.ledger__row h2 a{color:inherit;text-decoration:none}
.ledger__row h2 a:hover{color:var(--cobalt)}
.prose blockquote{margin:0 0 1em;border-left:2px solid var(--cobalt);padding:0.15rem 0 0.15rem 1rem}
.prose blockquote p{margin:0;color:var(--ink)}
/* Insights tile grid */
.tilegrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.25rem}
.tile{display:flex;flex-direction:column;gap:0.5rem;border:1px solid var(--line);background:var(--paper);padding:1.25rem;text-decoration:none;color:inherit}
.tile:hover{border-color:var(--cobalt)}
.tile .eyebrow{margin:0}
.tile__title{font-family:var(--font-display);font-weight:700;font-size:1.02rem;line-height:1.3;letter-spacing:-0.015em;margin:0;color:var(--ink)}
.tile:hover .tile__title{color:var(--cobalt)}
.tile__desc{color:var(--slate);font-size:0.85rem;line-height:1.5;margin:0}
@media (max-width:1100px){.tilegrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.tilegrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.tilegrid{grid-template-columns:1fr}}
/* Nav logo lockup: RECRUITMENT under the wordmark */
.nav__logo-text{display:flex;flex-direction:column;line-height:1}
.nav__logo-sub{font-family:var(--font-mono);font-weight:400;font-size:0.5rem;letter-spacing:0.30em;text-transform:uppercase;color:var(--slate);margin-top:3px}