/* ==========================================================================
   Soto Electrical Services - the only stylesheet.
   Design tokens first, then layout, then components.
   Concept: every section hangs off a single vertical bus line, tapped at each
   node like a distribution riser. See docs/DESIGN_DIRECTION.md.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

/* --------------------------------------------------------------- tokens -- */
:root {
  --ink: #0a121c;
  --bus: #123a63;
  --bus-deep: #0d2b49;
  --arc: #2e7bc4;
  --copper: #a9601b;
  --copper-lit: #c8873f;
  --paper: #f4f6f9;
  --paper-deep: #e7ecf2;
  --white: #ffffff;
  --rule: #c8d2dd;
  --rule-dark: #24425f;
  --muted: #57697c;

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --wrap: 1180px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --rail-w: 108px;
  --radius: 3px;
}

/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bus); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--arc); }
:focus-visible {
  outline: 3px solid var(--arc);
  outline-offset: 2px;
  border-radius: 2px;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 0.55em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 5.2vw, 3.55rem); }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.42rem); letter-spacing: -0.01em; }
h4 { font-size: 1.03rem; letter-spacing: 0.01em; }
p { margin: 0 0 1.15rem; max-width: 68ch; }
ul, ol { max-width: 68ch; }

.container { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--copper); color: var(--white);
  padding: 0.7rem 1.1rem; font-weight: 600;
}
.skip:focus { left: 0; }

/* ---- section rhythm ------------------------------------------------------ */
/* Previously this drew a vertical bus rail with copper nodes. The supplied
   reference layout has no rail and runs content to the container edge, so the
   class now carries vertical rhythm only. */
.rail-section { position: relative; padding: clamp(3.25rem, 7vw, 5.5rem) 0; }
.rail-section > .container { position: relative; }

.designation {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper);
  margin: 0 0 0.9rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--copper);
}
.designation .designation__code { color: var(--muted); }

/* Dark sections invert the rail rather than losing it. */
.on-dark { background: var(--ink); color: #dfe7ef; }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--white); }
.on-dark a { color: #9dc6ea; }
.on-dark a:hover { color: var(--white); }
.on-dark .designation { color: var(--copper-lit); }
.on-dark .designation { border-bottom-color: var(--copper-lit); }
.on-dark .designation .designation__code { color: #7d93a8; }
.on-paper { background: var(--paper); }

/* -------------------------------------------------------------- header --- */
.topbar {
  background: var(--ink);
  color: #b9c7d5;
  font-family: var(--font-mono);
  font-size: 0.73rem;
  letter-spacing: 0.05em;
}
.topbar__inner {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem;
  align-items: center; justify-content: space-between;
  padding: 0.52rem 0;
}
.topbar__group { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.topbar a { color: #b9c7d5; text-decoration: none; }
.topbar a:hover { color: var(--white); text-decoration: underline; }
.topbar__tag { color: var(--copper-lit); }

.site-header { background: var(--bus); color: var(--white); position: relative; z-index: 20; }
.header-inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: 74px;
}
.logo {
  display: inline-flex; align-items: center;
  margin-right: auto; text-decoration: none;
  line-height: 0;
}
/* White plate behind the logo. The supplied mark is dark navy on transparent
   and scores 1.11:1 against the header blue, so it needs a light ground to be
   legible at all. */
.logo__plate {
  display: block;
  background: var(--white);
  border-radius: 2px;
  padding: 0.4rem 0.6rem;
}
.logo__plate img { width: 110px; height: auto; display: block; }
@media (max-width: 620px) {
  .logo__plate { padding: 0.35rem 0.5rem; }
  .logo__plate img { width: 92px; }
}
.site-nav { display: flex; gap: 1.35rem; }
.site-nav a {
  color: #dbe7f2; text-decoration: none;
  font-size: 0.93rem; font-weight: 500;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--white); border-bottom-color: var(--copper-lit); }
.header-cta {
  background: var(--copper); color: var(--white);
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; text-decoration: none;
  padding: 0.72rem 1.15rem; border-radius: var(--radius);
  white-space: nowrap;
}
.header-cta:hover { background: var(--copper-lit); color: var(--white); }
.nav-toggle {
  display: none; background: none; border: 1px solid #3d6a99;
  color: var(--white); border-radius: var(--radius);
  padding: 0.4rem 0.5rem; cursor: pointer;
}

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; order: 3; }
  .header-cta { order: 2; padding: 0.6rem 0.8rem; font-size: 0.72rem; }
  .site-nav {
    order: 4; flex-basis: 100%; flex-direction: column; gap: 0;
    display: none; padding-bottom: 0.8rem;
  }
  .site-nav[data-open="true"] { display: flex; }
  .site-nav a { padding: 0.72rem 0; border-bottom: 1px solid #2a5688; }
}

/* ---------------------------------------------------------------- hero --- */
.hero { background: var(--ink); color: #dfe7ef; position: relative; overflow: hidden; }
.hero__inner {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  padding: clamp(2.75rem, 6vw, 4.75rem) 0 clamp(3rem, 6vw, 5rem);
  position: relative; z-index: 2;
}
@media (min-width: 980px) {
  .hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.85fr); align-items: start; }
}
.hero h1 { color: var(--white); }
.hero__lead { font-size: clamp(1.02rem, 1.5vw, 1.13rem); color: #c2d0de; max-width: 56ch; }
.hero__eyebrow {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--copper-lit); margin: 0 0 1.1rem;
  display: flex; align-items: center; gap: 0.7rem;
}
.hero__eyebrow::before {
  content: ""; width: 34px; height: 1px; background: var(--copper); flex: none;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.7rem; }

/* The drawn one-line behind the hero. Decorative, hidden from assistive tech. */
.hero__diagram {
  position: absolute; inset: 0;
  z-index: 1; opacity: 0.5; pointer-events: none;
}
.hero__diagram svg { width: 100%; height: 100%; }

/* Spec block: reads like the nameplate on a piece of gear. */
.specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 1px; margin-top: 2.2rem;
  background: var(--rule-dark); border: 1px solid var(--rule-dark);
}
.specs__cell { background: var(--ink); padding: 0.85rem 0.95rem; }
.specs__k {
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: #7d93a8; margin: 0 0 0.3rem; display: block;
}
.specs__v {
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  color: var(--white); line-height: 1.25;
}

/* ------------------------------------------------------------ quote card - */
.workorder {
  background: var(--white); color: var(--ink);
  border: 1px solid var(--rule); border-top: 4px solid var(--copper);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.5vw, 1.85rem);
  box-shadow: 0 18px 44px rgba(4, 12, 22, 0.34);
}
.workorder h2 { font-size: 1.32rem; margin-bottom: 0.35rem; }
.workorder__note { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.2rem; }
.workorder__rows { border-top: 1px solid var(--rule); margin: 1.25rem 0 0; padding: 0; list-style: none; }
.workorder__rows li {
  display: flex; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--rule);
  padding: 0.6rem 0;
  font-family: var(--font-mono); font-size: 0.79rem;
}
.workorder__rows dt, .workorder__rows span:first-child { color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.workorder__rows span:last-child { text-align: right; font-weight: 500; }

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; text-decoration: none;
  padding: 0.88rem 1.4rem; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--copper { background: var(--copper); color: var(--white); }
.btn--copper:hover { background: var(--copper-lit); color: var(--white); }
.btn--blue { background: var(--bus); color: var(--white); }
.btn--blue:hover { background: var(--arc); color: var(--white); }
.btn--ghost { border-color: currentColor; color: inherit; background: none; }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.09); color: inherit; }
.btn--ghost-dark { border-color: var(--rule); color: var(--bus); background: none; }
.btn--ghost-dark:hover { background: var(--paper); color: var(--bus); }
.btn--wide { width: 100%; justify-content: center; }

/* ------------------------------------------------------------ typography - */
.lede { font-size: clamp(1.06rem, 1.7vw, 1.2rem); color: var(--muted); max-width: 62ch; }
.section-head { max-width: 62ch; margin-bottom: 2.35rem; }
.prose h2 { margin-top: 2.6rem; }
.prose h3 { margin-top: 2rem; }
.prose > *:first-child { margin-top: 0; }

/* Checklist with a copper tick drawn in CSS, not an icon font. */
.ticks { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.ticks li { position: relative; padding-left: 1.6rem; margin-bottom: 0.55rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--copper);
}
.on-dark .ticks li::before { border-color: var(--copper-lit); }

/* --------------------------------------------------------------- grids --- */
.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}
.split {
  display: grid; gap: clamp(1.8rem, 4vw, 3.2rem);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.split--wide-left { }
@media (min-width: 900px) { .split--wide-left { grid-template-columns: 1.15fr 0.85fr; } }

/* --------------------------------------------------------------- cards --- */
.card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex; flex-direction: column;
}
.card__code {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--copper); margin-bottom: 0.7rem;
}
.card h3 { margin-bottom: 0.5rem; }
.card p { font-size: 0.965rem; color: var(--muted); margin-bottom: 1rem; }
.card__link {
  margin-top: auto;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  color: var(--bus);
}
.card__link:hover { color: var(--arc); text-decoration: underline; }
.card--dark { background: var(--bus-deep); border-color: var(--rule-dark); color: #d3dfeb; }
.card--dark h3 { color: var(--white); }
.card--dark p { color: #a9bfd3; }
.card--dark .card__link { color: var(--copper-lit); }

/* Numbered steps. The number is a mono designation, not a circle badge. */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps > li {
  counter-increment: step;
  border-top: 1px solid var(--rule);
  padding: 1.35rem 0 1.35rem 3.6rem;
  position: relative;
}
.steps > li::before {
  content: "0" counter(step);
  position: absolute; left: 0; top: 1.5rem;
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.1em; color: var(--copper);
}
.steps h3 { font-size: 1.12rem; margin-bottom: 0.35rem; }
.steps p { margin: 0; color: var(--muted); }
.on-dark .steps > li { border-color: var(--rule-dark); }
.on-dark .steps p { color: #a9bfd3; }

/* ------------------------------------------------------------- figures --- */
.figure { margin: 0; }
.figure img {
  width: 100%; border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--paper-deep);
}
.figure figcaption {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em;
  color: var(--muted); margin-top: 0.6rem; text-transform: uppercase;
}
.on-dark .figure img { border-color: var(--rule-dark); }
.on-dark .figure figcaption { color: #7d93a8; }

/* ----------------------------------------------------------- stat tiles -- */
.stats { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 620px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--white); padding: 1.25rem 1.15rem; }
.stat__v {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1; color: var(--bus);
  display: block; margin-bottom: 0.35rem;
}
.stat__k {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--muted);
}

/* -------------------------------------------------------- service list --- */
/* The reference layout's accordion, rebuilt as a plain semantic list so it
   works with no JavaScript and stays keyboard reachable. */
.svc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.svc-list > li { border-bottom: 1px solid var(--rule); }
.svc-list a {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 0.9rem; padding: 1.15rem 0.9rem; text-decoration: none; color: inherit;
}
.svc-list a:hover, .svc-list a:focus-visible { background: var(--paper); }
.svc-list__code {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em;
  color: var(--copper);
}
.svc-list__name { font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; }
.svc-list__arrow { color: var(--bus); font-family: var(--font-mono); }
.svc-list a:hover .svc-list__arrow { color: var(--copper); }

/* ------------------------------------------------------------- area bar -- */
.area-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.area-list li {
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.07em;
  border: 1px solid var(--rule-dark); border-radius: 2px;
  padding: 0.42rem 0.75rem; color: #cbd8e5;
}
.area-list li:first-child { border-color: var(--copper); color: var(--copper-lit); }

/* ---------------------------------------------------------------- forms -- */
.field { margin-bottom: 1.05rem; }
.field label {
  display: block; font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 0.35rem;
}
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem;
  padding: 0.72rem 0.8rem; color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--arc); }
.field textarea { min-height: 128px; resize: vertical; }
.field__hint { font-size: 0.83rem; color: var(--muted); margin: 0.35rem 0 0; }

/* --------------------------------------------------------- breadcrumbs --- */
.crumbs {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
  padding: 0.9rem 0; border-bottom: 1px solid var(--rule); color: var(--muted);
}
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; max-width: none; }
.crumbs li::after { content: "/"; margin-left: 0.45rem; color: var(--rule); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: var(--bus); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ------------------------------------------------------------- CTA band -- */
.cta-band { background: var(--bus); color: var(--white); }
.cta-band .container { padding: clamp(2.5rem, 5vw, 3.6rem) 0; }
.cta-band h2 { color: var(--white); margin-bottom: 0.6rem; }
.cta-band p { color: #cfe0ef; }
.cta-band__inner { display: grid; gap: 1.6rem; align-items: center; }
@media (min-width: 860px) { .cta-band__inner { grid-template-columns: 1.4fr auto; } }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* --------------------------------------------------------------- footer -- */
.site-footer { background: var(--ink); color: #a9bfd3; padding: clamp(2.6rem, 5vw, 3.8rem) 0 1.6rem; font-size: 0.945rem; }
.footer-inner { display: grid; gap: 2rem; }
@media (min-width: 780px) { .footer-inner { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.site-footer h4 {
  color: var(--white); font-family: var(--font-mono); font-size: 0.7rem;
  font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.5rem; }
.site-footer a { color: #a9bfd3; text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.footer-name { font-family: var(--font-display); font-weight: 700; color: var(--white); font-size: 1.08rem; margin-bottom: 0.5rem; }
.footer-nap p { margin-bottom: 0.4rem; max-width: 34ch; }
.footer-licence { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--copper-lit); }
.footer-bottom {
  border-top: 1px solid var(--rule-dark); margin-top: 2.4rem; padding-top: 1.3rem;
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between;
  font-size: 0.85rem;
}
.footer-bottom p { margin: 0; max-width: none; }

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* -------------------------------------------------------------- utility -- */
.u-mono { font-family: var(--font-mono); }
.u-center { text-align: center; }
.u-mt { margin-top: 1.6rem; }
.u-mb0 { margin-bottom: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Full-width band figure. Used where a single image carries a section rather
   than sitting beside text. */
.figure--band { margin: 0 0 2.4rem; }
.figure--band img { width: 100%; max-height: 460px; object-fit: cover; }

/* Notice above the quote form while it is still a placeholder. Removed with
   the placeholder block once the real form embed is in. */
.form-notice {
  background: #fdf3e7;
  border: 1px solid var(--copper);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  font-size: 0.92rem;
  margin: 0 0 1.25rem;
}
.field input:disabled, .field select:disabled, .field textarea:disabled {
  background: var(--paper-deep);
  color: var(--muted);
  cursor: not-allowed;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Portrait photographs. Panels and enclosures are vertical, so a lot of the
   real site photography is taller than it is wide. Cap the height so a tall
   frame cannot stretch its section out of proportion. */
.figure--portrait img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  max-height: 640px;
  width: auto;
  margin-inline: auto;
}

/* ==========================================================================
   REFERENCE LAYOUT
   A layout was supplied to match: photo hero with an overlapping form card,
   eyebrow labels with a rule under them, headings with an accent bar, a solid
   accent stat block, a photo collage, an accordion service list with one item
   open in the accent colour, tier-style cards, a photo band, preview cards,
   and a dark footer with an info row and nav pills.
   The structure is taken from it. The palette stays blue, copper, black and
   white, because the client brief rules out the red and orange it uses.
   ========================================================================== */

/* ---- shared label devices ------------------------------------------------ */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--copper); margin: 0 0 0.9rem; padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--copper);
}
.on-dark .eyebrow { color: var(--copper-lit); border-bottom-color: var(--copper-lit); }

/* Heading with the accent bar down its left edge. */
.bar-head { position: relative; padding-left: 1.15rem; }
.bar-head::before {
  content: ""; position: absolute; left: 0; top: 0.12em; bottom: 0.12em;
  width: 4px; background: var(--copper); border-radius: 2px;
}

/* ---- photo hero ---------------------------------------------------------- */
.phero { position: relative; background: var(--ink); overflow: hidden; }
.phero__media { position: absolute; inset: 0; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; }
.phero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(6,12,20,0.94) 0%, rgba(6,12,20,0.88) 42%,
    rgba(6,12,20,0.42) 72%, rgba(6,12,20,0.6) 100%);
}
/* Angular dark panel over the right of the frame, as in the reference. */
.phero__shape {
  position: absolute; top: 0; right: 0; bottom: 0; width: 46%;
  background: var(--ink); opacity: 0.92; display: none;
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
}
@media (min-width: 1080px) { .phero__shape { display: block; } }
.phero__inner {
  position: relative; z-index: 3;
  display: grid; gap: clamp(2rem, 4vw, 3.4rem); grid-template-columns: 1fr;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(4rem, 8vw, 6.5rem);
  align-items: center;
}
@media (min-width: 980px) {
  .phero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr); }
}
.phero h1 { color: var(--white); margin-bottom: 0.7rem; }
.phero__lead { color: #c8d6e4; max-width: 52ch; }
.phero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.8rem; }

/* Secondary action shaped like the reference play control. */
.playlink {
  display: inline-flex; align-items: center; gap: 0.7rem;
  color: var(--white); text-decoration: none;
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
}
.playlink__dot {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--white); color: var(--bus);
  display: grid; place-items: center;
}
.playlink:hover { color: var(--copper-lit); }
.playlink:hover .playlink__dot { background: var(--copper); color: var(--white); }

/* The card overlapping the hero, where the reference puts its booking form. */
.hero-card {
  background: var(--white); color: var(--ink);
  border-top: 4px solid var(--copper); border-radius: var(--radius);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  box-shadow: 0 26px 60px rgba(3, 9, 17, 0.45);
}
.hero-card h2 { font-size: 1.3rem; margin-bottom: 0.3rem; }
.hero-card__note { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.1rem; }
.hero-card__tabs {
  display: flex; margin-bottom: 1.1rem;
  border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
}
.hero-card__tabs span {
  flex: 1; text-align: center; padding: 0.55rem 0.4rem;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted);
}
.hero-card__tabs span[data-on] { background: var(--copper); color: var(--white); }
.hero-card__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-bottom: 1.1rem; }
.hero-card__cell { border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.6rem 0.7rem; }
.hero-card__cell b {
  display: block; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.2rem;
}
.hero-card__cell span { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; }

/* ---- section header row -------------------------------------------------- */
.sec-head { display: grid; gap: 1rem 2rem; align-items: end; margin-bottom: 2.6rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .sec-head { grid-template-columns: 1.1fr 1fr auto; } }
.sec-head h2 { margin: 0; }
.sec-head p { margin: 0; color: var(--muted); }

/* ---- stat block and collage ---------------------------------------------- */
.statblock { background: var(--copper); color: var(--white); padding: 1.1rem 1.3rem; border-radius: var(--radius); }
.statblock b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 2.1rem; line-height: 1; }
.statblock span { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; }

.intro-split { display: grid; gap: 1.1rem; grid-template-columns: 148px 1fr; align-items: stretch; margin-bottom: 1.4rem; }
.intro-split img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 520px) { .intro-split { grid-template-columns: 1fr; } }

.collage { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.collage__dots {
  position: absolute; left: -14px; top: -14px; width: 92px; height: 92px; z-index: 0;
  background-image: radial-gradient(var(--rule) 1.6px, transparent 1.6px);
  background-size: 13px 13px;
}
.collage figure { margin: 0; position: relative; z-index: 1; }
.collage img { width: 100%; border-radius: var(--radius); display: block; }
.collage__tall { grid-row: span 2; }
.collage__tall img { height: 100%; object-fit: cover; }
.floatcard {
  position: absolute; left: -8px; bottom: 16%; z-index: 3;
  background: var(--white); border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(6, 14, 24, 0.24);
  padding: 0.8rem 1rem; display: flex; align-items: center; gap: 0.75rem; max-width: 64%;
}
.floatcard b { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1; display: block; }
.floatcard span { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--copper); }
.floatcard__chip { width: 38px; height: 38px; flex: none; border-radius: var(--radius); background: var(--bus); display: grid; place-items: center; }
@media (max-width: 640px) { .floatcard { position: static; max-width: none; margin-top: 1rem; } }

/* ---- accordion service list ---------------------------------------------- */
.acc { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.acc__item { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white); }
.acc__head { display: flex; align-items: center; gap: 0.85rem; padding: 1.05rem 1.15rem; text-decoration: none; color: inherit; }
.acc__code { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--copper); }
.acc__name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin-right: auto; }
.acc__mark { font-family: var(--font-mono); color: var(--bus); }
.acc__item:hover { border-color: var(--copper); }
.acc__item--open { background: var(--copper); border-color: var(--copper); color: var(--white); }
.acc__item--open .acc__code, .acc__item--open .acc__mark { color: rgba(255, 255, 255, 0.85); }
.acc__body { padding: 0 1.15rem 1.15rem; }
.acc__body p { color: rgba(255, 255, 255, 0.93); margin: 0 0 1rem; max-width: 54ch; }
.acc__go {
  display: inline-grid; place-items: center; width: 46px; height: 38px;
  background: var(--white); color: var(--copper); border-radius: var(--radius);
  text-decoration: none; font-family: var(--font-mono);
}
.acc__go:hover { background: var(--ink); color: var(--white); }

/* ---- tier-style cards ----------------------------------------------------- */
.tiers { display: grid; gap: 1.3rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier {
  position: relative; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--white); padding: 1.5rem; display: flex; flex-direction: column;
}
.tier__code { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--copper); margin-bottom: 0.6rem; }
.tier h3 { margin-bottom: 0.5rem; padding-right: 4.5rem; }
.tier p { color: var(--muted); font-size: 0.96rem; }
.tier__tag {
  position: absolute; top: 1.15rem; right: 1.15rem;
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--bus);
  border: 1px solid var(--rule); border-radius: 999px; padding: 0.2rem 0.55rem;
}
.tier__link { margin-top: auto; font-family: var(--font-mono); font-size: 0.73rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--bus); }
.tier__link:hover { color: var(--copper); text-decoration: underline; }
.tier--lead { background: var(--bus); border-color: var(--bus); color: #dbe7f2; }
.tier--lead h3 { color: var(--white); }
.tier--lead p { color: #b9cde0; }
.tier--lead .tier__code { color: var(--copper-lit); }
.tier--lead .tier__tag { color: #cfe0ef; border-color: #3d6a99; }
.tier--lead .tier__link { color: var(--copper-lit); }

/* ---- photo band ----------------------------------------------------------- */
.band { display: grid; gap: clamp(1.6rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .band { grid-template-columns: 0.8fr 1.2fr; } }
.band figure { margin: 0; }
.band img { width: 100%; border-radius: var(--radius); display: block; }

/* ---- preview cards -------------------------------------------------------- */
.previews { display: grid; gap: 1.3rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .previews { grid-template-columns: repeat(3, 1fr); } }
.preview { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--white); display: flex; flex-direction: column; }
.preview__media { position: relative; }
.preview__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.preview__badge {
  position: absolute; left: 0.8rem; bottom: 0.8rem;
  background: var(--copper); color: var(--white);
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.3rem 0.55rem; border-radius: 2px;
}
.preview__body { padding: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.preview__body h3 { margin: 0; font-size: 1.1rem; }
.preview__body p { margin: 0; color: var(--muted); font-size: 0.94rem; }
.preview__link { margin-top: auto; font-family: var(--font-mono); font-size: 0.73rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--bus); }
.preview__link:hover { color: var(--copper); text-decoration: underline; }

/* ---- credentials strip, where the reference puts partner logos ------------ */
.creds { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem 2.4rem; }
.creds li { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); }
.creds li b { color: var(--bus); font-weight: 600; }

/* ---- footer info row and pills -------------------------------------------- */
.footer-top {
  display: grid; gap: 1rem 2rem; grid-template-columns: 1fr;
  padding-bottom: 1.6rem; margin-bottom: 1.9rem; border-bottom: 1px solid var(--rule-dark);
}
@media (min-width: 820px) { .footer-top { grid-template-columns: auto 1fr 1fr 1fr; align-items: center; } }
/* The stacked lockup, given enough width for its third line to survive. */
.footer-top__logo { display: block; justify-self: start; width: 208px; height: auto; }
@media (max-width: 480px) { .footer-top__logo { width: 190px; } }
.footer-top__item { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em; }
.footer-top__item b {
  display: block; color: var(--copper-lit); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.25rem;
}
.footer-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.1rem; }
.footer-pills a {
  font-family: var(--font-mono); font-size: 0.69rem; letter-spacing: 0.09em;
  text-transform: uppercase; text-decoration: none; color: #cbd8e5;
  border: 1px solid var(--rule-dark); border-radius: 999px; padding: 0.38rem 0.85rem;
}
.footer-pills a:hover { background: var(--copper); border-color: var(--copper); color: var(--white); }

/* ==========================================================================
   HORIZONTAL OVERFLOW GUARDS
   A mobile report showed the page narrower than the screen with white beside
   it, which is what a document wider than the viewport looks like. It could
   not be reproduced in Chrome at any width from 305px to 885px, so these
   close the whole class of cause rather than one reproduction.
   ========================================================================== */

/* 1. Grid and flex children default to min-width:auto, so a single wide word,
      a mono string or an image can push a track wider than its container.
      This is the most common source of overflow that appears in one engine
      and not another. */
.split > *,
.band > *,
.sec-head > *,
.phero__inner > *,
.hero__inner > *,
.tiers > *,
.previews > *,
.grid > *,
.collage > figure,
.stats > *,
.specs > *,
.footer-inner > *,
.footer-top > *,
.cta-band__inner > * { min-width: 0; }

/* 2. Flex children of the label rows, same reason. */
.topbar__inner > *,
.header-inner > *,
.hero-card__tabs > * { min-width: 0; }

/* 3. Nothing may exceed its box, whatever the source. */
img, svg, video, table { max-width: 100%; }
.figure--portrait img { max-width: 100%; }

/* 4. Long unbroken strings (a pasted URL, a licence code, a mono label) break
      instead of forcing the page wide. */
p, li, h1, h2, h3, h4, dd, dt, figcaption, .acc__name, .tier h3 { overflow-wrap: break-word; }

/* 5. The decorative offsets on the collage sit outside their parent by design.
      Keep them inside on small screens, where there is no room to spare. */
@media (max-width: 640px) {
  .collage__dots { left: 0; top: 0; }
  .floatcard { left: auto; }
}

/* 6. Backstop. If anything still escapes on an engine not tested here, it is
      clipped rather than making the whole page scroll sideways and paint a
      white gutter. `clip` does not create a scroll container the way `hidden`
      does, so it cannot break in-page anchors; `hidden` is the fallback for
      engines without it. The guards above are the actual fix. */
body {
  overflow-x: hidden;
  overflow-x: clip;
}

/* ==========================================================================
   LOGO, EMERGENCY CALLOUT, FORM EMBEDS
   ========================================================================== */

/* The logo is vector and transparent, so it needs no tile or plate behind it;
   the dark-ground colourway carries the contrast instead. */
.logo__mark { display: block; flex: none; width: 46px; height: 46px; }
.logo__text { display: block; }
@media (max-width: 620px) {
  .logo__mark { width: 38px; height: 38px; }
  .logo__text .logo__sub { display: none; }
}
@media (max-width: 420px) { .logo__text { display: none; } }

/* Emergency availability. The one place red-adjacent urgency is earned, but the
   brief rules out red, so it reads through weight and a copper pulse instead. */
.emergency {
  display: flex; align-items: flex-start; gap: 0.65rem;
  margin: 1.4rem 0 0; padding: 0.85rem 1rem;
  border: 1px solid var(--copper);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: rgba(169, 96, 27, 0.14);
  color: #e8eef5; font-size: 0.97rem; max-width: 56ch;
}
.emergency strong { color: var(--white); }
.emergency__dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--copper-lit); margin-top: 0.45rem;
  box-shadow: 0 0 0 0 rgba(200, 135, 63, 0.7);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 9px rgba(200, 135, 63, 0); }
  100% { box-shadow: 0 0 0 0 rgba(200, 135, 63, 0); }
}
@media (prefers-reduced-motion: reduce) { .emergency__dot { animation: none; } }
/* On light grounds the copper wash needs less opacity to stay readable. */
.rail-section:not(.on-dark) .emergency { background: #fdf3e7; color: var(--ink); }
.rail-section:not(.on-dark) .emergency strong { color: var(--ink); }

/* Third-party form embeds. The provider sizes the iframe by script, so the
   wrapper only guarantees a sensible minimum before that runs. */
.embed-wrap {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 760px;
}
.embed-wrap--tall { min-height: 1200px; }
.embed-wrap iframe { display: block; width: 100%; min-height: inherit; border: 0; }
@media (max-width: 700px) {
  .embed-wrap { min-height: 900px; }
  .embed-wrap--tall { min-height: 1500px; }
}

/* Wordmark beside the emblem. The .logo wrapper zeroes line-height so the tile
   sits flush, so the text block restores its own. */
.logo__text { line-height: 1.15; }
.logo__name {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.02rem; letter-spacing: 0.01em; color: var(--white);
}
.logo__sub {
  display: block;
  font-family: var(--font-mono); font-weight: 400;
  font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: #a9c4de; margin-top: 0.15rem;
}