html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}


/* ---------------------------------------------------------------------
   Visual identity — "Maritime Editorial" (design handoff option 1c,
   approved 2026-07-22; supersedes Plate and Seam). Deep-sea blue + oxide
   red used boldly as full-bleed color bands; depth comes from color
   blocking and the hero image wash, not shadows. Archivo everywhere,
   Space Mono for technical eyebrows. Radius stays low/industrial (2px
   buttons, square panels).

   Deviations from the handoff, per user decisions on record:
   - Stats band shows the real DB-driven figures, not the handoff's
     placeholder numbers ("18 yrs / 400+ / 3 ports" were never verified).
   - Approved nav structure and the post-hero page sections (project
     services index, jobs strip, mission, logos, news, CTA) are kept and
     reskinned rather than dropped.
   - #FBE1D9 on oxide measured 4.0:1 (AA fail at 13px) — soft-on-oxide
     text is lifted to #FDEDE6 (~4.8:1) instead.
   --------------------------------------------------------------------- */
:root {
  --color-deep-sea: #0b2a3b;      /* nav, hero wash base, welding panel, mission band */
  --color-deep-blue: #093040;     /* workforce panel, footer */
  --color-oxide: #c6431f;         /* engineering panel, stats band, primary buttons */
  --color-oxide-dark: #a9381a;    /* button hover */
  --color-text-bright: #dce6ec;   /* hero subhead, dark-band body */
  --color-text-muted: #b6c7d2;    /* nav links, footer links */
  --color-panel-body: #c4d6e0;    /* body copy on blue panels */
  --color-eyebrow-blue: #9dc2d6;  /* eyebrows on blue panels */
  --color-oxide-soft: #fdede6;    /* soft text on oxide (lifted from handoff #FBE1D9 for AA) */
  --color-eyebrow-warm: #f0b7a5;  /* hero eyebrow, warm hover on dark */
  --color-page-text: #14303d;     /* body text on light */

  --hero-wash: linear-gradient(105deg,
      rgba(11, 42, 59, 0.92) 0%, rgba(11, 42, 59, 0.6) 45%, rgba(198, 67, 31, 0.38) 100%);

  /* Legacy aliases — non-pilot pages read these; re-pointed, not removed. */
  --brand-primary: var(--color-deep-sea);
  --brand-primary-dark: var(--color-deep-blue);
  --brand-accent: var(--color-oxide);
  --brand-accent-dark: var(--color-oxide-dark);
  --brand-light: #f4f7f9;
  --brand-dark-text: var(--color-page-text);

  --font-heading: "Archivo", "Segoe UI", Arial, sans-serif;
  --font-body: "Archivo", "Segoe UI", Arial, sans-serif;
  --font-mono: "Space Mono", "Consolas", monospace;

  --radius-button: 2px;
  --content-max: 1240px;
}

body {
  font-family: var(--font-body);
  color: var(--color-page-text);
  background-color: #fff;
}

h1, h2, h3, h4, h5, h6,
.brand-heading {
  font-family: var(--font-heading);
  font-weight: 700;
}

/* Editorial, not shouty: sentence case; tight display setting on H1 only.
   Scale reduced from the handoff's poster sizes after user review ("looks
   zoomed in") — proportions kept, absolute sizes brought down. */
h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  overflow-wrap: break-word;
  hyphens: auto; /* html[lang] is culture-bound — Finnish gets Finnish hyphenation */
}

h2 {
  font-size: 1.4rem;
}

h3 {
  font-size: 1.15rem;
}

/* Space Mono technical eyebrow — the 1c label voice. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

a {
  color: var(--color-oxide); /* 4.97:1 on white */
}

a:hover {
  color: var(--color-deep-sea);
}

/* Handoff-spec content width: ~1240px, inner padding 34–44px. */
.container-wide {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* --- Focus ------------------------------------------------------------- */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem var(--color-oxide);
}

a:focus-visible {
  outline: 2px solid var(--color-oxide);
  outline-offset: 2px;
}

/* Dark surfaces: white ring (oxide is only 3:1 on deep-sea — fine for the
   underline accent, not for the focus indicator). */
.navbar-deep .btn:focus, .navbar-deep a:focus-visible,
.hero-maritime .btn:focus, .hero-maritime a:focus-visible,
.stats-band a:focus-visible,
.band-deep a:focus-visible,
.service-panel:focus-visible,
footer.site-footer .btn:focus, footer.site-footer .form-control:focus, footer.site-footer a:focus-visible {
  box-shadow: 0 0 0 0.1rem var(--color-deep-sea), 0 0 0 0.25rem #fff;
  outline-color: #fff;
}

/* Bypass Blocks (WCAG 2.4.1) — offscreen until keyboard focus. */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 1050;
  background-color: var(--color-oxide);
  color: #fff;
  padding: 0.5rem 1rem;
  transition: top 0.15s ease-in-out;
}

.skip-link:focus {
  top: 0;
}

/* --- Navigation: deep-sea bar, oxide Contact ---------------------------- */
.navbar-deep {
  background-color: var(--color-deep-sea);
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}

.navbar-deep .navbar-brand {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff !important;
}

.navbar-deep .nav-link {
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 0.875rem;
}

.navbar-deep .nav-link:hover,
.navbar-deep .nav-link:focus-visible,
.navbar-deep .nav-link[aria-current] {
  color: #fff;
}

/* Contact dropdown toggle styled as the handoff's oxide nav button —
   approved nav structure, 1c skin. */
.navbar-deep .nav-cta {
  background-color: var(--color-oxide);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius-button);
  padding: 0.45rem 0.95rem;
  margin-left: 0.5rem;
}

.navbar-deep .nav-cta:hover,
.navbar-deep .nav-cta:focus-visible {
  background-color: var(--color-oxide-dark);
  color: #fff;
}

/* --- Language switcher: segmented EN|FI toggle -------------------------- */
.lang-switch {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-button);
  overflow: hidden;
  flex: 0 0 auto;
  align-self: center;
}

.lang-switch .lang-option {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 0.42rem 0.6rem;
  text-decoration: none;
  color: var(--color-text-muted);
  background-color: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
}

.lang-switch .lang-option + .lang-option {
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}

.lang-switch .lang-option:hover,
.lang-switch .lang-option:focus-visible {
  background-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* Active language: filled oxide chip — white on #C6431F is 4.97:1 (AA). */
.lang-switch .lang-option.is-current {
  background-color: var(--color-oxide);
  color: #fff;
  cursor: default;
}

/* Mobile: the toggle sits in the collapsed menu, so give it breathing room. */
@media (max-width: 991.98px) {
  .lang-switch {
    margin: 0.75rem 0 0.25rem;
    align-self: flex-start;
  }
}

/* --- Hero: full-bleed image slot under the blue→red wash ---------------- */
.hero-maritime {
  position: relative;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  background-color: var(--color-deep-sea); /* belt-and-braces behind the photo */
}

/* Photography layer — currently local placeholder art in
   images/placeholders/photo-*.svg; swap src for real photography without
   touching the wash or content layers. */
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-wash {
  position: absolute;
  inset: 0;
  background: var(--hero-wash);
}

/* Fold fix (user review): hero shortened and top-aligned — the eyebrow no
   longer pushes the headline to the bottom, and the wash thins toward the
   right so the photography fills what used to read as blank space. The
   service panels are now visible above the fold on a typical laptop. */
.hero-maritime .hero-content {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  width: 100%;
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

.hero-eyebrow {
  color: var(--color-eyebrow-warm);
}

.hero-maritime h1 {
  color: #fff;
  font-size: clamp(1.8rem, 3vw, 2.75rem);
  line-height: 1.05;
  max-width: 620px;
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}

.hero-sub {
  color: var(--color-text-bright);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 480px;
  margin-bottom: 1.25rem;
}

/* --- Image slots (placeholder photography, clearly marked) -------------- */
.image-slot {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  background-color: #0e3245;
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: right;
  padding: 0.5rem 0.75rem;
}

.image-slot > span {
  outline: 1px dashed rgba(255, 255, 255, 0.4);
  padding: 0.2rem 0.5rem;
}

/* --- Services: three color-blocked magazine panels ---------------------- */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.service-panel {
  display: block;
  text-decoration: none;
  color: inherit;
}

.panel-media {
  position: relative;
  height: 140px;
  overflow: hidden;
}

.panel-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.service-panel:hover .panel-media img {
  transform: scale(1.03);
  filter: brightness(1.08);
}

.panel-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.panel-text {
  padding: 1.25rem 1.25rem 1.5rem;
}

.panel-text .eyebrow {
  font-size: 0.68rem;
  margin-bottom: 0.4rem;
}

.panel-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  color: #fff;
  margin-bottom: 0.4rem;
  overflow-wrap: break-word;
  hyphens: auto;
}

.panel-body {
  font-size: 0.9rem;
  line-height: 1.55;
  margin-bottom: 0;
}

.panel-oxide {
  background-color: var(--color-oxide);
}

.panel-oxide .panel-media::after {
  background: rgba(198, 67, 31, 0.35);
}

.panel-oxide .eyebrow {
  color: var(--color-oxide-soft);
}

.panel-oxide .panel-body {
  color: var(--color-oxide-soft);
}

.panel-sea {
  background-color: var(--color-deep-sea);
}

.panel-sea .panel-media::after {
  background: rgba(11, 42, 59, 0.35);
}

.panel-deep {
  background-color: var(--color-deep-blue);
}

.panel-deep .panel-media::after {
  background: rgba(9, 48, 64, 0.4);
}

.panel-sea .eyebrow,
.panel-deep .eyebrow {
  color: var(--color-eyebrow-blue);
}

.panel-sea .panel-body,
.panel-deep .panel-body {
  color: var(--color-panel-body);
}

/* --- Stats band: oxide red, real DB figures ----------------------------- */
.stats-band {
  background-color: var(--color-oxide);
  color: #fff;
}

.stats-cells {
  display: flex;
  flex-wrap: wrap;
}

.stats-cell {
  flex: 1 1 0;
  min-width: 9rem;
  padding: 1.25rem 1.5rem;
}

.stats-cell + .stats-cell {
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.stats-value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2rem;
  line-height: 0.95;
  display: block;
}

.stats-label {
  font-size: 0.78rem;
  color: var(--color-oxide-soft);
  letter-spacing: 0.03em;
  margin-top: 0.25rem;
  display: block;
}

/* --- Row components (project services / jobs strip / news), reskinned --- */
.parts-index {
  list-style: none;
  margin: 0;
  padding: 0;
}

.parts-index li {
  border-top: 1px solid #dde5ea;
}

.parts-index li:last-child {
  border-bottom: 1px solid #dde5ea;
}

.parts-row {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: 0.25rem 1rem;
  align-items: baseline;
  padding: 1.1rem 0.25rem;
  text-decoration: none;
  color: var(--color-page-text);
  position: relative;
}

.parts-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-oxide);
  grid-row: 1 / span 2;
}

.parts-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.1;
  overflow-wrap: break-word;
  hyphens: auto;
}

.parts-spec {
  grid-column: 2;
  color: #48606e;
  font-size: 0.95rem;
  max-width: 62ch;
}

.parts-arrow {
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 1.4rem;
  color: var(--color-oxide);
}

@media (min-width: 992px) {
  .parts-row {
    grid-template-columns: 4rem minmax(14rem, 20rem) 1fr auto;
  }

  .parts-num,
  .parts-arrow {
    grid-row: 1;
  }

  .parts-spec {
    grid-column: 3;
    grid-row: 1;
  }
}

.parts-row::after,
.jobs-row::after,
.news-row::after,
.service-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--color-oxide);
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

.parts-row:hover::after,
.parts-row:focus-visible::after,
.jobs-row:hover::after,
.jobs-row:focus-visible::after,
.news-row:hover::after,
.news-row:focus-visible::after,
.service-row:hover::after,
.service-row:focus-visible::after {
  opacity: 1;
}

.parts-row:hover .parts-name,
.jobs-row:hover .jobs-title,
.news-row:hover .news-title,
.service-row:hover .s-name {
  color: var(--color-oxide);
}

/* --- Services index: media rows (thumbnail + text) ---------------------- */
.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-list li {
  border-top: 1px solid #dde5ea;
}

.service-list li:last-child {
  border-bottom: 1px solid #dde5ea;
}

.service-row {
  display: grid;
  grid-template-columns: 108px 1fr auto;
  gap: 0.15rem 1.1rem;
  align-items: center;
  padding: 0.85rem 0.25rem;
  text-decoration: none;
  color: var(--color-page-text);
  position: relative;
}

.service-row img {
  width: 108px;
  height: 66px;
  object-fit: cover;
  grid-row: 1 / span 2;
}

.service-row .s-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.1;
  align-self: end;
}

.service-row .s-spec {
  grid-column: 2;
  color: #48606e;
  font-size: 0.9rem;
  align-self: start;
}

.service-row .parts-arrow {
  grid-row: 1 / span 2;
  grid-column: 3;
}

/* --- Services editorial index ------------------------------------------ */
.services-index-hero {
  padding: clamp(3rem, 7vw, 5.5rem) 0;
  background:
    linear-gradient(115deg, rgba(11,42,59,.98), rgba(11,42,59,.82)),
    url("/images/photos/engineering.jpg") center / cover;
}
.services-index-hero .container { max-width: 920px; }
.services-index-hero h1 {
  max-width: 12ch;
  margin-bottom: .8rem;
  font-size: clamp(2.5rem, 6vw, 5.2rem);
  line-height: .95;
}
.services-index-hero .lead { max-width: 62ch; font-size: clamp(1rem, 1.7vw, 1.2rem); }
.services-index-section { background: #f5f8f8; }
.services-index-intro { max-width: 54rem; margin-bottom: 2.5rem; }
.services-index-intro h2 { max-width: 24ch; margin-bottom: .65rem; }
.services-index-intro > p:last-child { max-width: 66ch; color: #55707a; font-size: 1.02rem; line-height: 1.65; }
.service-editorial-list { display: grid; gap: 1rem; }
.service-editorial-item {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
  min-height: 250px;
  background: #fff;
  border: 1px solid #d6e1e4;
  box-shadow: 0 .7rem 1.5rem rgba(11,42,59,.05);
  overflow: hidden;
}
.service-editorial-item:nth-child(even) { grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); }
.service-editorial-item:nth-child(even) .service-editorial-media { order: 2; }
.service-editorial-media { position: relative; min-height: 250px; overflow: hidden; background: var(--color-deep-sea); }
.service-editorial-media::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(125deg, rgba(11,42,59,.52), transparent 65%);
  pointer-events: none;
}
.service-editorial-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .65s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}
.service-editorial-item:hover .service-editorial-media img,
.service-editorial-item:focus-within .service-editorial-media img {
  transform: scale(1.045);
  filter: saturate(1.08);
}
.service-editorial-number {
  position: absolute;
  z-index: 1;
  left: 1.2rem;
  bottom: .9rem;
  color: #fff;
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .12em;
}
.service-editorial-copy { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.4rem, 4vw, 2.75rem); }
.service-editorial-copy h2 { max-width: 18ch; margin-bottom: .6rem; font-size: clamp(1.55rem, 3vw, 2.5rem); }
.service-editorial-summary { max-width: 54ch; margin-bottom: 1.15rem; color: #48606e; line-height: 1.6; }
.service-chip-list { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; list-style: none; }
.service-chip-list li {
  padding: .35rem .55rem;
  color: #315260;
  background: #edf3f4;
  border-left: 2px solid var(--color-oxide);
  font-size: .75rem;
  font-weight: 650;
}
.service-editorial-link { margin-top: auto; padding-top: 1.25rem; color: var(--color-oxide); font-weight: 700; text-decoration: none; }
.service-editorial-link span { display: inline-block; margin-left: .4rem; transition: transform .2s ease; }
.service-editorial-link:hover span { transform: translateX(.25rem); }

/* --- Service detail ---------------------------------------------------- */
.service-detail-hero {
  color: #fff;
  background: linear-gradient(125deg, var(--color-deep-sea), #16485d);
}
.service-detail-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr);
  gap: clamp(2rem, 7vw, 6rem);
  align-items: center;
  min-height: 430px;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.service-detail-heading,
.service-detail-visual,
.service-detail-body,
.service-facts { min-width: 0; }
.service-detail-heading .eyebrow a { color: #f8c7b6; }
.service-detail-heading h1 { max-width: 12ch; color: #fff; font-size: clamp(2.4rem, 6vw, 5rem); line-height: .96; }
.service-detail-heading .lead { max-width: 55ch; color: rgba(255,255,255,.8); line-height: 1.65; }
.service-detail-visual { position: relative; margin: 0; }
.service-detail-visual::after {
  position: absolute;
  inset: 1rem -1rem -1rem 1rem;
  z-index: 0;
  content: "";
  border: 1px solid rgba(255,255,255,.25);
}
.service-detail-visual img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 1.25rem 2rem rgba(0,0,0,.2); }
.service-detail-visual figcaption { position: relative; z-index: 2; margin-top: .65rem; color: rgba(255,255,255,.62); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.service-detail-section { background: #fff; }
.service-detail-content-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); gap: clamp(2rem, 7vw, 6rem); align-items: start; }
.service-detail-body { max-width: 70ch; }
.service-detail-body > .eyebrow { margin-bottom: 1rem; }
.service-detail-body h2 { margin-top: 2.5rem; padding-top: 1rem; border-top: 2px solid #dbe5e7; }
.service-detail-body p, .service-detail-body li { color: #3d5661; font-size: 1.04rem; line-height: 1.8; }
.service-facts { position: sticky; top: 6rem; padding: 1.35rem; background: #f1f5f6; border-top: 4px solid var(--color-oxide); }
.service-fact-group + .service-fact-group { padding-top: 1.2rem; margin-top: 1.2rem; border-top: 1px solid #d2dfe2; }
.service-fact-group h2 { margin-bottom: .75rem; color: var(--color-deep-sea); font-size: 1.05rem; }
.service-fact-group ul { display: grid; gap: .55rem; padding: 0; margin: 0; list-style: none; }
.service-fact-group li { position: relative; padding-left: 1rem; color: #4b6671; font-size: .9rem; line-height: 1.5; }
.service-fact-group li::before { position: absolute; top: .55em; left: 0; width: .35rem; height: .35rem; content: ""; background: var(--color-oxide); border-radius: 50%; }
.service-delivery-band { padding: 3.5rem 0; color: #fff; background: var(--color-deep-blue); }
.service-delivery-intro { max-width: 34rem; margin-bottom: 1.7rem; }
.service-delivery-intro h2 { color: #fff; }
.service-delivery-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 0; margin: 0; list-style: none; }
.service-delivery-steps li { min-height: 170px; padding: 1.1rem; border-top: 2px solid var(--color-oxide); background: rgba(255,255,255,.06); }
.service-delivery-steps span { display: block; margin-bottom: 1.1rem; color: #f8c7b6; font-family: var(--font-mono); font-size: .72rem; }
.service-delivery-steps strong { display: block; margin-bottom: .45rem; font-family: var(--font-heading); font-size: 1.2rem; }
.service-delivery-steps p { margin: 0; color: rgba(255,255,255,.72); font-size: .88rem; line-height: 1.55; }
.service-back-link { padding-top: 1.5rem; padding-bottom: 1.5rem; }

/* --- Content pages with images ---------------------------------------- */
.editorial-content-section { background: #fff; }
.editorial-content-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr); gap: clamp(2rem, 7vw, 6rem); align-items: start; }
.editorial-content-no-image { grid-template-columns: minmax(0, 70ch); justify-content: center; }
.editorial-content-body { max-width: 70ch; }
.editorial-content-body p, .editorial-content-body li { font-size: 1.04rem; line-height: 1.8; color: #3d5661; }
.editorial-content-body h2 { margin-top: 2.5rem; padding-top: 1rem; border-top: 2px solid #dbe5e7; }
.editorial-content-media { position: sticky; top: 6rem; margin: 0; }
.editorial-content-media::before { position: absolute; inset: .8rem -.8rem -.8rem .8rem; content: ""; border: 1px solid var(--color-oxide); opacity: .65; }
.editorial-content-media img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 .9rem 1.6rem rgba(11,42,59,.12); }
.editorial-content-media span { position: absolute; z-index: 2; right: .6rem; bottom: .2rem; color: rgba(255,255,255,.65); font-family: var(--font-heading); font-size: 3rem; font-weight: 800; letter-spacing: -.06em; }
.page-component-image-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .65fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  padding: 1.5rem;
  background: #f3f7f7;
  border-top: 3px solid var(--color-deep-sea);
}
.page-component-copy { max-width: 65ch; }
.page-component-copy h2 { margin-top: 0; }
.page-component-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* --- Projects, news, and stories --------------------------------------- */
.editorial-list-section { background: #f5f8f8; }
.editorial-card-list { display: grid; gap: 1rem; max-width: 1040px; margin: 0 auto; }
.editorial-card {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  min-height: 250px;
  background: #fff;
  border: 1px solid #d6e1e4;
  overflow: hidden;
}
.editorial-card-media { min-height: 250px; background: var(--color-deep-sea); overflow: hidden; }
.editorial-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.2,.7,.2,1), filter .35s ease; }
.editorial-card:hover .editorial-card-media img { transform: scale(1.04); filter: saturate(1.08); }
.editorial-card-body { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.35rem, 4vw, 2.4rem); }
.editorial-card-body h2 { max-width: 24ch; margin-bottom: .6rem; font-size: clamp(1.45rem, 3vw, 2.25rem); }
.editorial-card-body > p:not(.eyebrow), .editorial-card-excerpt { max-width: 62ch; color: #48606e; line-height: 1.65; }
.editorial-card-excerpt p { margin-bottom: .65rem; }
.editorial-card-body > a { margin-top: auto; padding-top: 1rem; color: var(--color-oxide); font-weight: 700; }
.editorial-article-section { background: #fff; }
.editorial-article-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr); gap: clamp(2rem, 7vw, 6rem); align-items: start; max-width: 1040px; margin: 0 auto; }
.editorial-article-body { max-width: 70ch; }
.editorial-article-body p, .editorial-article-body li { color: #3d5661; font-size: 1.04rem; line-height: 1.8; }
.editorial-article-media { position: sticky; top: 6rem; margin: 0; }
.editorial-article-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 .9rem 1.6rem rgba(11,42,59,.12); }
.editorial-article-media figcaption { padding-top: .65rem; color: #607983; font-size: .8rem; }

.jobs-strip {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jobs-strip li {
  border-top: 1px solid #dde5ea;
}

.jobs-strip li:last-child {
  border-bottom: 1px solid #dde5ea;
}

.jobs-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 1rem;
  align-items: baseline;
  padding: 0.9rem 0.25rem;
  text-decoration: none;
  color: var(--color-page-text);
  position: relative;
}

.jobs-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  overflow-wrap: break-word;
  hyphens: auto;
}

.jobs-meta {
  grid-column: 1;
  color: #48606e;
  font-size: 0.9rem;
}

.jobs-row .parts-arrow {
  grid-row: 1 / span 2;
  grid-column: 2;
}

@media (min-width: 992px) {
  .jobs-row {
    grid-template-columns: minmax(14rem, 22rem) 1fr auto;
  }

  .jobs-meta {
    grid-column: 2;
    grid-row: 1;
  }

  .jobs-row .parts-arrow {
    grid-row: 1;
    grid-column: 3;
  }
}

.news-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  padding: 1rem 0.25rem;
  border-top: 1px solid #dde5ea;
  border-bottom: 1px solid #dde5ea;
  text-decoration: none;
  color: var(--color-page-text);
  position: relative;
}

.news-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--color-oxide);
}

.news-date {
  color: #48606e;
  font-size: 0.9rem;
}

.news-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
}

.news-excerpt {
  color: #48606e;
  font-size: 0.95rem;
  flex-basis: 100%;
  max-width: 75ch;
}

/* --- Empty state (e.g. Jobs filter with no matches) --------------------- */
.empty-state {
  border: 2px solid var(--color-deep-sea);
  border-radius: var(--radius-button);
  padding: 2rem 1.5rem;
  background-color: var(--brand-light);
}

/* --- Mission showcase --------------------------------------------------- */
.band-deep {
  padding: 4.5rem 0;
  background:
    linear-gradient(90deg, rgba(11,42,59,.045) 1px, transparent 1px),
    var(--brand-light);
  background-size: 32px 32px;
}

.band-deep-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  min-height: 420px;
  color: var(--color-text-bright);
  background: var(--color-deep-sea);
  border-top: 5px solid var(--color-oxide);
  box-shadow: 0 1.5rem 3rem rgba(11, 42, 59, .16);
  overflow: hidden;
}

.band-deep-content {
  z-index: 1;
  align-self: center;
  padding: clamp(2rem, 5vw, 4rem);
}

.band-deep .eyebrow {
  color: var(--color-eyebrow-blue);
}

.band-deep h2 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.25rem);
  max-width: 15ch;
  margin-bottom: 1.35rem;
  text-wrap: balance;
}

.band-deep a {
  color: #fff;
}

.band-deep a:hover {
  color: var(--color-eyebrow-warm);
}

.band-lede {
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 58ch;
  color: rgba(255,255,255,.8);
}

.band-lede > :last-child {
  margin-bottom: 0;
}

.mission-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
  padding: 0;
  margin: 2rem 0 0;
  list-style: none;
}

.mission-pillars li {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .8rem;
  color: #fff;
  font-family: var(--font-heading);
  font-size: .95rem;
  font-weight: 700;
  background: rgba(255,255,255,.07);
  border-left: 2px solid var(--color-oxide);
}

.mission-pillars span {
  color: #f7c9b8;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .08em;
}

.band-deep-media {
  position: relative;
  min-height: 100%;
}

.band-deep-media::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, var(--color-deep-sea) 0%, rgba(11,42,59,.5) 30%, rgba(11,42,59,.05) 70%);
}

.band-deep-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.8) contrast(1.05);
}

.band-deep-mark {
  position: absolute;
  z-index: 2;
  right: 1.25rem;
  bottom: .6rem;
  color: rgba(255,255,255,.22);
  font-family: var(--font-heading);
  font-size: clamp(3.8rem, 8vw, 7rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.06em;
}

@media (max-width: 900px) {
  .band-deep-grid {
    grid-template-columns: 1fr;
  }

  .band-deep-media {
    min-height: 260px;
  }
}

@media (max-width: 560px) {
  .band-deep { padding: 2.75rem 0; }
  .band-deep-content { padding: 1.5rem; }
  .mission-pillars { grid-template-columns: 1fr; }
  .band-deep-media { min-height: 210px; }
}

/* Footer sits directly under the CTA plate; a thin oxide seam marks the join. */
footer.site-footer {
  border-top: 3px solid var(--color-oxide);
}

/* --- Proof strip / CTA -------------------------------------------------- */
.proof-strip {
  background-color: var(--brand-light);
  padding: 2rem 0;
}

.section-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #48606e;
}

/* Closing CTA band — an oxide plate over the deep-blue footer, with a warm
   wash so it reads as a deliberate "act now" moment rather than a leftover strip.
   Butts directly onto the footer (no gap). */
.cta-plate {
  background-color: var(--color-oxide);
  background-image: linear-gradient(105deg, var(--color-deep-sea) 0%, var(--color-deep-blue) 46%, var(--color-oxide) 100%);
  color: #fff;
  padding: 3rem 0;
}

.cta-plate .eyebrow {
  color: var(--color-eyebrow-warm);
}

.cta-plate h2 {
  color: #fff;
  margin-bottom: 0.35rem;
  font-size: 1.65rem;
}

.cta-plate .cta-sub {
  color: var(--color-text-bright);
  margin-bottom: 0;
  max-width: 44ch;
}

.cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

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

/* --- Buttons ------------------------------------------------------------ */
.btn-brand {
  background-color: var(--color-oxide);
  border: 2px solid var(--color-oxide);
  color: #fff; /* 4.97:1 */
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: var(--radius-button);
  padding: 0.55rem 1.25rem;
}

.btn-brand:hover {
  background-color: var(--color-oxide-dark);
  border-color: var(--color-oxide-dark);
  color: #fff;
}

.btn-brand-outline {
  background-color: transparent;
  border: 2px solid var(--color-deep-sea);
  color: var(--color-deep-sea);
  font-family: var(--font-heading);
  font-weight: 600;
  border-radius: var(--radius-button);
}

.btn-brand-outline:hover {
  background-color: var(--color-deep-sea);
  color: #fff;
}

/* Glass secondary — hero over the wash (handoff spec). */
.btn-glass {
  background-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: var(--radius-button);
  padding: 0.55rem 1.25rem;
  transition: background-color 0.15s ease;
}

.btn-glass:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* --- Inner-page hero band (1c: compact deep-sea plate) ------------------ */
.hero-section {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: #fff;
  padding: 2.25rem 0;
}

.hero-section h1 {
  color: #fff;
}

.hero-section .lead {
  color: var(--color-text-bright);
  font-size: 1rem;
}

/* Content-page banner image (renders the page's ImageUrl, previously unused). */
.page-banner {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  display: block;
}

/* Parts-index thumbnail variant (Services index). */
.parts-thumb {
  width: 96px;
  height: 60px;
  object-fit: cover;
  align-self: center;
  grid-row: 1 / span 2;
}

@media (min-width: 992px) {
  .parts-thumb {
    grid-row: 1;
  }
}

.section-alt {
  background-color: var(--brand-light);
}

.section-padded {
  padding: 2.5rem 0;
}

.stat-counter {
  text-align: center;
  padding: 1rem;
}

.stat-counter .stat-value {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--color-oxide);
  display: block;
}

.stat-counter .stat-label {
  color: var(--brand-dark-text);
  letter-spacing: 0.03em;
  font-size: 0.9rem;
}

.brand-card {
  border: 1px solid #dde5ea;
  border-radius: 0; /* square panels — industrial, per 1c */
  background-color: #fff;
  overflow: hidden;
  height: 100%;
  transition: box-shadow 0.15s ease-in-out;
}

.brand-card:hover {
  box-shadow: 0 0.5rem 1rem rgba(11, 42, 59, 0.12);
}

.brand-card .brand-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background-color: var(--brand-light);
}

.brand-card .brand-card-body {
  padding: 1.25rem;
}

.client-logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.client-logo-strip img {
  max-height: 48px;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: opacity 0.15s ease-in-out, filter 0.15s ease-in-out;
}

.client-logo-strip img:hover {
  filter: none;
  opacity: 1;
}

/* --- Footer ------------------------------------------------------------- */
footer.site-footer {
  background-color: var(--color-deep-blue);
  color: var(--color-text-muted);
  padding: 2rem 0;
}

footer.site-footer a {
  color: var(--color-text-muted);
}

footer.site-footer a:hover {
  color: var(--color-eyebrow-warm);
}

/* Forms */
.form-control,
.form-select {
  border-radius: var(--radius-button);
}

/* Public enquiry/application forms. The visual grouping mirrors the actual data
   flow: contact fields, submission details, consent, then one primary action. */
.public-form-section {
  background: linear-gradient(180deg, #eef3f4 0, #f7f8f8 19rem, #fff 19rem);
}
.public-form-layout {
  display: grid;
  grid-template-columns: minmax(230px, .62fr) minmax(0, 1.38fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
}
.public-form-aside { position: sticky; top: 6.5rem; padding-top: 1.25rem; }
.public-form-aside h2 {
  max-width: 13ch;
  margin-bottom: .8rem;
  color: var(--color-deep-sea);
  font-size: clamp(1.65rem, 3vw, 2.3rem);
}
.public-form-aside > p:not(.eyebrow) {
  max-width: 36ch;
  color: #516872;
  line-height: 1.65;
}
.public-form-route {
  display: grid;
  gap: .35rem;
  margin-top: 1.75rem;
  padding: 1rem;
  color: #fff;
  background: var(--color-deep-sea);
  border-left: 4px solid var(--color-oxide);
}
.public-form-route span { color: rgba(255,255,255,.74); font-size: .9rem; line-height: 1.5; }
.public-form-route a { margin-top: .4rem; color: #fff; font-size: .86rem; font-weight: 700; }
.public-form-card {
  padding: clamp(1.25rem, 4vw, 2.5rem);
  background: #fff;
  border: 1px solid #d9e2e5;
  border-top: 5px solid var(--color-oxide);
  box-shadow: 0 1.25rem 2.75rem rgba(11,42,59,.1);
}
.public-form-block + .public-form-block {
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid #dfe7e9;
}
.public-form-block-heading {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
  margin-bottom: 1.25rem;
}
.public-form-block-heading > span {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  color: #fff;
  background: var(--color-deep-sea);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
}
.public-form-block-heading h2 { margin: 0 0 .2rem; color: var(--color-deep-sea); font-size: 1.2rem; }
.public-form-block-heading p { margin: 0; color: #667b83; font-size: .9rem; }
.public-form-card .form-label {
  margin-bottom: .38rem;
  color: #243f4a;
  font-size: .87rem;
  font-weight: 700;
}
.public-form-card .form-control,
.public-form-card .form-select {
  min-height: 3rem;
  padding: .7rem .8rem;
  color: #19343f;
  background-color: #fbfcfc;
  border: 1px solid #b9c8cd;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.public-form-card textarea.form-control { min-height: auto; resize: vertical; }
.public-form-card .form-control:hover,
.public-form-card .form-select:hover { border-color: #78909a; }
.public-form-card .form-control:focus,
.public-form-card .form-select:focus {
  background: #fff;
  border-color: var(--color-oxide);
  box-shadow: 0 0 0 .2rem rgba(198,67,31,.14);
}
.public-field-meta {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .35rem;
  color: #647981;
  font-size: .76rem;
}
.public-field-meta output {
  color: #405861;
  font-family: var(--font-mono);
  white-space: nowrap;
}
.public-consent-box {
  padding: 1rem 1rem 1rem 2.65rem;
  margin-top: 2rem;
  background: #f3f6f7;
  border: 1px solid #d9e2e5;
}
.public-consent-box .form-check-input { margin-left: -1.65rem; }
.public-consent-box .form-check-label { color: #405861; font-size: .88rem; line-height: 1.55; }
.public-form-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1.5rem;
}
.public-form-actions .btn { min-width: 10.5rem; }
.public-form-actions > span {
  max-width: 35ch;
  color: #667b83;
  font-size: .76rem;
  line-height: 1.45;
}
.public-form-card button[disabled],
.newsletter-form button[disabled] { cursor: wait; opacity: .7; }
.newsletter-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem;
}
.newsletter-form .form-control { min-width: 0; }
@media (max-width: 900px) {
  .public-form-layout { grid-template-columns: 1fr; }
  .public-form-aside { position: static; padding-top: 0; }
  .public-form-aside h2, .public-form-aside > p:not(.eyebrow) { max-width: 46rem; }
  .public-form-route { max-width: 40rem; }
}
@media (max-width: 560px) {
  .public-form-section { padding-top: 2.25rem; }
  .public-form-card { margin-inline: -.25rem; padding: 1.15rem; }
  .public-form-actions { align-items: stretch; flex-direction: column; }
  .public-form-actions .btn { width: 100%; }
  .newsletter-form { grid-template-columns: 1fr; }
}

/* --- Responsive: handoff's ~900px collapse point ------------------------ */
@media (max-width: 900px) {
  .panel-grid {
    grid-template-columns: 1fr;
  }

  .stats-cells {
    flex-direction: column;
  }

  .stats-cell + .stats-cell {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
  }

  .service-detail-hero-grid,
  .service-detail-content-grid,
  .editorial-content-grid {
    grid-template-columns: 1fr;
  }

  .service-detail-hero-grid {
    min-height: auto;
    padding-top: 2.5rem;
    padding-bottom: 3.5rem;
  }

  .service-detail-visual {
    max-width: 44rem;
  }

  .service-facts,
  .editorial-content-media {
    position: relative;
    top: auto;
  }

  .service-delivery-steps {
    grid-template-columns: 1fr;
  }

  .editorial-content-no-image {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-component-image-grid {
    grid-template-columns: 1fr;
  }

  .editorial-card,
  .editorial-article-grid {
    grid-template-columns: 1fr;
  }

  .editorial-card-media {
    min-height: 210px;
    max-height: 300px;
  }

  .editorial-article-media {
    position: relative;
    top: auto;
    max-width: 44rem;
  }
}

@media (max-width: 640px) {
  .service-editorial-item,
  .service-editorial-item:nth-child(even) {
    display: flex;
    flex-direction: column;
  }

  .service-editorial-item:nth-child(even) .service-editorial-media {
    order: 0;
  }

  .service-editorial-media {
    min-height: 205px;
  }

  .service-editorial-copy {
    min-height: 250px;
  }

  .service-detail-heading h1 {
    font-size: clamp(2.4rem, 13vw, 4rem);
    overflow-wrap: anywhere;
  }

  .service-detail-hero-grid {
    gap: 1.75rem;
    padding-top: 2rem;
    padding-bottom: 2.5rem;
  }

  .service-detail-visual::after {
    inset: .5rem 0 -.5rem .5rem;
  }
}

/* Progressive scroll reveals. JS adds .motion-ready only when motion is supported
   and not disabled by the user's system preference, so this can never hide content
   for users without the enhancement. */
.motion-ready .reveal-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-ready .reveal-item.is-visible {
  opacity: 1;
  transform: none;
}
.hero-section .container,
.service-detail-heading,
.service-detail-visual {
  animation: hero-content-in .7s cubic-bezier(.2,.7,.2,1) both;
}
.service-detail-visual { animation-delay: 110ms; }
@keyframes hero-content-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Reduced motion: kill every transition/animation site-wide. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Admin workspace */
.admin-page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.admin-eyebrow {
  color: var(--brand-accent);
  font-family: "Space Mono", monospace;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  padding: .8rem;
  margin-bottom: 1rem;
  background: #f4f7f8;
  border: 1px solid #dce5e8;
  border-radius: .35rem;
}
.admin-empty-state {
  padding: 2rem 1rem !important;
  text-align: center;
  color: #5c6b72;
}
@media (max-width: 640px) {
  .admin-page-heading { flex-direction: column; }
  .admin-page-heading > * { width: 100%; }
  .admin-toolbar .form-control, .admin-toolbar .form-select { max-width: none !important; width: 100%; }
}

/* Admin dashboard and leads inbox */
.admin-dashboard-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  color: #fff;
  background: linear-gradient(115deg, var(--color-deep-blue), #123f53);
}
.admin-dashboard-hero .admin-eyebrow { color: #f7c9b8; }
.admin-dashboard-hero p:last-child { color: rgba(255,255,255,.78); max-width: 48rem; }
.admin-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem;
  margin-bottom: 1.25rem;
}
.admin-metric-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-height: 138px;
  padding: 1rem;
  color: var(--color-deep-blue);
  background: #fff;
  border: 1px solid #dce5e8;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.admin-metric-card:hover { color: var(--color-deep-blue); transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(11,42,59,.1); }
.admin-metric-card strong { font-family: var(--font-heading); font-size: 2.25rem; line-height: 1; }
.admin-metric-card span:last-child { margin-top: auto; font-size: .82rem; color: #58707a; }
.admin-metric-label { font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #58707a; }
.admin-metric-primary { border-top: 4px solid var(--color-oxide); }
.admin-metric-warning { border-top: 4px solid #d79f28; }
.admin-recent-list { border-top: 1px solid #e3eaed; }
.admin-recent-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem 0;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid #e3eaed;
}
.admin-recent-item:hover { color: var(--color-oxide); }
.admin-recent-dot { width: .55rem; height: .55rem; flex: 0 0 auto; border-radius: 50%; background: #aab8bd; }
.admin-recent-dot.is-new { background: var(--color-oxide); box-shadow: 0 0 0 4px rgba(198,67,31,.12); }
.admin-shortcut-list { display: grid; border-top: 1px solid #e3eaed; }
.admin-shortcut-list a { display: flex; justify-content: space-between; padding: .8rem 0; color: var(--color-deep-blue); text-decoration: none; border-bottom: 1px solid #e3eaed; }
.admin-shortcut-list a:hover { color: var(--color-oxide); }
.admin-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.admin-summary-card { display: flex; align-items: baseline; gap: .65rem; padding: .85rem 1rem; background: #f4f7f8; border: 1px solid #dce5e8; color: #58707a; }
.admin-summary-value { color: var(--color-deep-blue); font-family: var(--font-heading); font-size: 1.75rem; line-height: 1; }
.admin-summary-accent { border-left: 4px solid var(--color-oxide); }
.admin-filter-panel { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(120px, 1fr)) auto; gap: .7rem; align-items: end; padding: 1rem; background: #f4f7f8; border: 1px solid #dce5e8; }
.admin-filter-search { min-width: 0; }
.admin-filter-actions { display: flex; gap: .4rem; align-items: center; }
.admin-leads-table th { white-space: nowrap; color: #58707a; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.admin-leads-table td { padding: .9rem .75rem; }
.admin-source-badge { color: var(--color-deep-blue); background: #e7eef1; font-weight: 600; }
.admin-message-preview { min-width: 220px; max-width: 360px; color: #40545d; line-height: 1.45; }
.admin-row-actions { display: flex; justify-content: flex-end; gap: .3rem; flex-wrap: wrap; min-width: 180px; }
.admin-lead-full-message,
.admin-preserved-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.7;
  color: #30474f;
}
.admin-application-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.admin-application-narrative { grid-column: 1 / -1; }
.admin-detail-list { display: grid; gap: 0; margin: 1rem 0 0; }
.admin-detail-list > div {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: .75rem;
  padding: .75rem 0;
  border-top: 1px solid #e3eaed;
}
.admin-detail-list dt {
  color: #60757e;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.admin-detail-list dd { margin: 0; overflow-wrap: anywhere; }
.admin-empty-icon { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: .75rem; color: #26734d; background: #e3f1e8; border-radius: 50%; font-weight: 700; }

/* Home page: a direct path for each audience before the service catalogue. */
.home-paths { background: #f4f7f8; }
.home-section-intro { max-width: 42rem; margin-bottom: 1.5rem; }
.home-section-intro h2 { margin-bottom: .45rem; }
.home-section-intro > p:last-child { color: #58707a; margin-bottom: 0; }
.home-path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.home-path-card { display: flex; flex-direction: column; min-height: 220px; padding: 1.25rem; color: #fff; background: var(--color-deep-blue); text-decoration: none; border-top: 4px solid var(--color-oxide); transition: transform .15s ease, background .15s ease; }
.home-path-card:nth-child(2) { background: #16445a; }
.home-path-card:nth-child(3) { background: #205e73; }
.home-path-card:hover { color: #fff; background: #0f3549; transform: translateY(-3px); }
.home-path-number { font-family: var(--font-mono); font-size: .75rem; color: #f7c9b8; letter-spacing: .08em; }
.home-path-title { margin-top: 1.25rem; font-family: var(--font-heading); font-size: 1.55rem; font-weight: 700; }
.home-path-copy { margin-top: .45rem; color: rgba(255,255,255,.78); line-height: 1.5; }
.home-path-link { margin-top: auto; padding-top: 1.2rem; font-size: .88rem; font-weight: 700; }

@media (max-width: 900px) {
  .admin-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-filter-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-filter-search, .admin-filter-actions { grid-column: 1 / -1; }
  .home-path-grid { grid-template-columns: 1fr; }
  .home-path-card { min-height: 170px; }
}
@media (max-width: 640px) {
  .admin-dashboard-hero { align-items: flex-start; flex-direction: column; }
  .admin-metric-grid, .admin-summary-grid { grid-template-columns: 1fr; }
  .admin-filter-panel { grid-template-columns: 1fr; }
  .admin-filter-search, .admin-filter-actions { grid-column: auto; }
  .admin-filter-actions .btn-brand { flex: 1; }
  .admin-row-actions { justify-content: flex-start; min-width: 0; }
}

/* Admin application shell — intentionally separate from the public-site navigation. */
.admin-body {
  min-height: 100vh;
  color: #17313d;
  background: #f3f6f7;
}
.admin-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1030;
  width: 272px;
  flex-direction: column;
  color: #dbe8ed;
  background: #092b3a;
  border-right: 1px solid rgba(255,255,255,.08);
}
.admin-brand {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: 78px;
  padding: 1rem 1.15rem;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.admin-brand:hover { color: #fff; background: rgba(255,255,255,.035); }
.admin-brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  color: #fff;
  background: var(--color-oxide);
  font-family: var(--font-mono);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .06em;
  border-radius: 9px;
}
.admin-brand strong, .admin-brand small { display: block; }
.admin-brand strong { font-size: .88rem; letter-spacing: .01em; }
.admin-brand small { margin-top: .12rem; color: #8eabb8; font-size: .67rem; }
.admin-sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding: .75rem .7rem 1.25rem;
  overflow-y: auto;
  scrollbar-color: rgba(255,255,255,.18) transparent;
  scrollbar-width: thin;
}
.admin-nav-group + .admin-nav-group { margin-top: 1.15rem; }
.admin-nav-label {
  margin: 0 0 .4rem;
  padding: 0 .65rem;
  color: #7897a5;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.admin-nav-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 40px;
  padding: .46rem .58rem;
  margin: .1rem 0;
  color: #bcd0d9;
  text-decoration: none;
  border-radius: 7px;
  transition: color .12s ease, background .12s ease;
}
.admin-nav-link:hover { color: #fff; background: rgba(255,255,255,.07); }
.admin-nav-link.is-active {
  color: #fff;
  background: rgba(198,67,31,.22);
  box-shadow: inset 3px 0 0 var(--color-oxide);
}
.admin-nav-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  color: #91afbb;
  background: rgba(255,255,255,.065);
  font-family: var(--font-mono);
  font-size: .57rem;
  font-weight: 700;
  letter-spacing: .03em;
  border-radius: 6px;
}
.admin-nav-link.is-active .admin-nav-icon { color: #fff; background: var(--color-oxide); }
.admin-nav-link > span:last-child { font-size: .82rem; font-weight: 600; }
.admin-sidebar-footer {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1rem;
  border-top: 1px solid rgba(255,255,255,.09);
}
.admin-user { display: flex; align-items: center; gap: .6rem; min-width: 0; flex: 1; }
.admin-user-avatar, .admin-topbar-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  background: #245364;
  font-weight: 700;
  border-radius: 50%;
}
.admin-user-avatar { width: 34px; height: 34px; font-size: .78rem; }
.admin-user-name { min-width: 0; }
.admin-user-name strong, .admin-user-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-name strong { color: #fff; font-size: .73rem; }
.admin-user-name small { color: #7f9eab; font-size: .62rem; }
.admin-logout {
  padding: .35rem .5rem;
  color: #bcd0d9;
  background: transparent;
  border: 0;
  font-size: .7rem;
}
.admin-logout:hover { color: #fff; }
.admin-workspace { min-height: 100vh; margin-left: 272px; }
.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 70px;
  padding: .75rem clamp(1rem, 2.5vw, 2rem);
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid #dfe7ea;
  backdrop-filter: blur(10px);
}
.admin-topbar-title { display: flex; flex-direction: column; min-width: 0; }
.admin-topbar-title strong { overflow: hidden; color: #17313d; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-topbar-kicker { color: #78909a; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.admin-topbar-actions { display: flex; align-items: center; gap: .8rem; margin-left: auto; }
.admin-view-site {
  padding: .48rem .72rem;
  color: #244a59;
  background: #eef3f5;
  border: 1px solid #dbe5e8;
  border-radius: 7px;
  font-size: .75rem;
  font-weight: 700;
  text-decoration: none;
}
.admin-view-site:hover { color: var(--color-oxide); background: #fff; }
.admin-topbar-avatar { width: 34px; height: 34px; font-size: .76rem; }
.admin-menu-button {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 39px;
  height: 39px;
  padding: 9px;
  background: #eef3f5;
  border: 1px solid #dbe5e8;
  border-radius: 7px;
}
.admin-menu-button span { display: block; height: 2px; background: #17313d; border-radius: 2px; }
.admin-content {
  width: 100%;
  max-width: 1580px;
  margin: 0 auto;
  padding: 1.45rem clamp(1rem, 2.5vw, 2rem) 3rem;
}
.admin-breadcrumb { margin-bottom: 1rem; }
.admin-breadcrumb .breadcrumb { padding: .52rem .72rem; background: #e9eff1; border-radius: 7px; }
.admin-alert { border: 0; border-left: 4px solid currentColor; border-radius: 8px; }
.admin-mobile-menu { width: min(88vw, 300px); color: #dbe8ed; background: #092b3a; border-right: 0; }
.admin-mobile-menu .offcanvas-header { min-height: 78px; padding: 0; border-bottom: 1px solid rgba(255,255,255,.09); }
.admin-mobile-menu .offcanvas-header .admin-brand { flex: 1; border-bottom: 0; }
.admin-mobile-menu .btn-close { margin-right: .8rem; }
.admin-mobile-menu .offcanvas-body { padding: .75rem .7rem 1.25rem; }

.admin-body .brand-card {
  border-color: #dfe7ea;
  border-radius: 11px;
  box-shadow: 0 2px 8px rgba(11,42,59,.035);
}
.admin-body .brand-card:hover { box-shadow: 0 8px 24px rgba(11,42,59,.07); }
.admin-body .brand-card .brand-card-body { padding: 1.3rem; }
.admin-body .btn { border-radius: 7px; font-size: .82rem; font-weight: 650; }
.admin-body .form-control, .admin-body .form-select {
  min-height: 40px;
  border-color: #cfdadd;
  border-radius: 7px;
}
.admin-body .form-control:focus, .admin-body .form-select:focus {
  border-color: #6f929f;
  box-shadow: 0 0 0 3px rgba(36,83,100,.12);
}

.admin-image-guidance {
  display: grid;
  gap: .65rem;
  margin-top: .65rem;
  padding: .8rem .9rem;
  color: #49616b;
  background: #f2f6f7;
  border: 1px solid #d9e4e7;
  border-left: 3px solid var(--color-oxide);
  font-size: .78rem;
}
.admin-image-guidance-heading { display: flex; align-items: center; gap: .5rem; color: var(--color-deep-sea); }
.admin-image-guidance-heading span {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 1.4rem;
  color: #fff;
  background: var(--color-deep-sea);
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .06em;
}
.admin-image-guidance dl { display: grid; gap: .25rem; margin: 0; }
.admin-image-guidance dl > div { display: grid; grid-template-columns: 5.8rem minmax(0, 1fr); gap: .5rem; }
.admin-image-guidance dt { color: #70858d; font-weight: 700; }
.admin-image-guidance dd { margin: 0; color: #304b56; }
.admin-image-guidance p { margin: 0; line-height: 1.45; }
.admin-image-guidance-preview { width: 100%; max-height: 120px; object-fit: cover; border: 1px solid #cad9dd; }
.admin-body .table > :not(caption) > * > * { border-bottom-color: #e3eaed; }
.admin-body .table thead th { background: #f4f7f8; }
.admin-page-heading { align-items: center; margin-bottom: 1.25rem; }
.admin-page-heading h1 { color: #14303d; font-size: 1.55rem; }
.admin-page-heading > div:first-child > .text-muted { max-width: 52rem; font-size: .86rem; }
.admin-eyebrow { color: var(--color-oxide); font-weight: 700; }

.admin-dashboard-hero {
  align-items: center;
  padding: 1.8rem;
  margin-bottom: 1rem;
  background:
    radial-gradient(circle at 85% 15%, rgba(198,67,31,.32), transparent 32%),
    linear-gradient(120deg, #092b3a, #15495b);
  border-radius: 12px;
  overflow: hidden;
}
.admin-dashboard-hero h1 { color: #fff; }
.admin-dashboard-hero .btn-brand { flex: 0 0 auto; box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.admin-metric-grid { gap: 1rem; }
.admin-metric-card { min-height: 152px; padding: 1.15rem; border-radius: 10px; box-shadow: 0 2px 8px rgba(11,42,59,.035); }
.admin-metric-card strong { font-size: 2.45rem; }
.admin-metric-primary { color: #fff; background: var(--color-oxide); border-color: var(--color-oxide); }
.admin-metric-primary:hover { color: #fff; background: var(--color-oxide-dark); }
.admin-metric-primary .admin-metric-label, .admin-metric-primary span:last-child { color: rgba(255,255,255,.82); }

@media (max-width: 991.98px) {
  .admin-workspace { margin-left: 0; }
  .admin-content { padding-top: 1rem; }
}
@media (max-width: 575.98px) {
  .admin-topbar { min-height: 62px; }
  .admin-topbar-kicker, .admin-topbar-avatar { display: none; }
  .admin-view-site { padding: .42rem .55rem; font-size: .68rem; }
  .admin-content { padding-inline: .75rem; }
  .admin-dashboard-hero { align-items: flex-start; padding: 1.2rem; }
}

/* Leads inbox cards */
.lead-inbox-list { display: grid; gap: .75rem; }
.lead-inbox-item {
  display: grid;
  grid-template-columns: minmax(210px, 1.05fr) minmax(260px, 1.7fr) minmax(210px, .9fr);
  gap: 1.25rem;
  align-items: center;
  padding: 1rem 1.15rem;
  background: #fff;
  border: 1px solid #dfe7ea;
  border-left: 4px solid #c8d4d9;
  border-radius: 11px;
  box-shadow: 0 2px 8px rgba(11,42,59,.035);
}
.lead-inbox-item.is-new { border-left-color: var(--color-oxide); }
.lead-inbox-person { display: flex; align-items: flex-start; gap: .75rem; min-width: 0; }
.lead-inbox-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  color: #fff;
  background: #1b4c5f;
  font-size: .92rem;
  font-weight: 700;
  border-radius: 50%;
}
.lead-inbox-item.is-new .lead-inbox-avatar { background: var(--color-oxide); }
.lead-inbox-name { margin: .1rem 0 .15rem; color: #17313d; font-family: var(--font-body); font-size: .94rem; font-weight: 700; }
.lead-inbox-person a, .lead-inbox-person > div > span { display: block; overflow: hidden; color: #5e7781; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.lead-inbox-person a:hover { color: var(--color-oxide); }
.lead-new-dot {
  padding: .2rem .42rem;
  color: #9b351c;
  background: #fde9e2;
  font-family: var(--font-mono);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 4px;
}
.lead-inbox-message { min-width: 0; }
.lead-inbox-meta { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-bottom: .35rem; color: #6b818a; font-size: .72rem; }
.lead-inbox-meta > span:not(.admin-source-badge) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-source-badge { display: inline-block; padding: .27rem .42rem; color: #1c4a5a; background: #e8f0f2; border-radius: 4px; font-size: .62rem; font-weight: 700; }
.lead-inbox-message p { display: -webkit-box; margin: 0; overflow: hidden; color: #4b626b; font-size: .8rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.lead-inbox-side { display: flex; flex-direction: column; align-items: flex-end; gap: .65rem; min-width: 0; }
.lead-inbox-side time { display: flex; align-items: flex-end; flex-direction: column; color: #78909a; font-size: .68rem; }
.lead-inbox-side time strong { color: #3c5964; font-size: .72rem; }
.lead-inbox-side .admin-row-actions { min-width: 0; }
.lead-inbox-side .admin-row-actions form { display: inline-flex; }

@media (max-width: 1100px) {
  .lead-inbox-item { grid-template-columns: minmax(180px, 1fr) minmax(230px, 1.5fr); }
  .lead-inbox-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; padding-top: .65rem; border-top: 1px solid #edf1f2; }
  .lead-inbox-side time { align-items: flex-start; }
}
@media (max-width: 640px) {
  .lead-inbox-item { display: block; padding: .95rem; }
  .lead-inbox-message { padding: .8rem 0; margin-top: .8rem; border-top: 1px solid #edf1f2; border-bottom: 1px solid #edf1f2; }
  .lead-inbox-side { margin-top: .8rem; padding-top: 0; border-top: 0; }
  .lead-inbox-side .admin-row-actions { justify-content: flex-end; }
  .lead-inbox-side .admin-row-actions .btn { font-size: .7rem; }
}

/* Admin workspace navigation keeps the persistent shell in place while an MVC
   response updates the current list or form. */
.admin-content { transition: opacity .16s ease; }
.admin-content.is-loading { position: relative; opacity: .58; pointer-events: none; }
.admin-content.is-loading::before {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-oxide), #ef9d75, var(--color-oxide));
  background-size: 200% 100%;
  content: "";
  animation: admin-loading 1s linear infinite;
}
.admin-link-inserter {
  padding: .7rem .8rem;
  background: #f5f8f9;
  border: 1px solid #dfe7ea;
  border-radius: 8px;
}
@keyframes admin-loading {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-content { transition: none; }
  .admin-content.is-loading::before { animation: none; }
}

@media (max-width: 640px) {
  .admin-application-detail-grid { grid-template-columns: 1fr; }
  .admin-application-narrative { grid-column: auto; }
  .admin-detail-list > div { grid-template-columns: 1fr; gap: .2rem; }
}