/* Fortitude21 — buyer-facing site
   Palette: navy #0F2A44 with orange #F07C1E accent. */

:root {
  --navy: #0F2A44;
  --navy-dark: #071A2B;
  --navy-mid: #38566E;
  --orange: #F07C1E;
  --orange-dark: #D2680E;   /* backgrounds / hover fills */
  --orange-text: #A85309;   /* orange for TEXT on light backgrounds — 5.4:1 on white.
                               --orange-dark is only 3.7:1 and fails WCAG AA. */
  --ink: #17222C;
  --body: #4A5A68;
  --line: #DCE3E9;
  --light: #E8EDF2;
  --paper: #F6F8FA;
  --white: #fff;
  --head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --wrap: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--body);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--orange-text); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 26px; }

h1, h2, h3, h4 {
  font-family: var(--head);
  color: var(--ink);
  line-height: 1.08;
  margin: 0;
  letter-spacing: 0.01em;
}
h1 { font-size: clamp(38px, 6vw, 68px); font-weight: 700; text-transform: uppercase; }
h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 700; text-transform: uppercase; }
h3 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; }

.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  font-weight: 700;
  /* Default is the light-background case. Plain --orange is only 2.6:1 on white. */
  color: var(--orange-text);
  margin-bottom: 14px;
}
/* On navy grounds the brand orange reads correctly (5.3:1) and is preferred. */
.hero .eyebrow,
section.dark .eyebrow,
.closer .eyebrow { color: var(--orange); }
.lede { font-size: 18px; color: var(--body); max-width: 62ch; }
.center { text-align: center; margin-inline: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.03em;
  padding: 14px 28px;
  border-radius: 3px;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
  border: 2px solid transparent;
}
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-dark); }
.btn-ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { background: var(--navy-dark); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* ---------- header ---------- */
header.site {
  background: var(--navy-dark);
  position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
header.site .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; padding-top: 14px; padding-bottom: 14px;
}
.brandmark { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.brandmark .mark { width: 34px; height: 34px; flex-shrink: 0; }
.brandmark .wordmark {
  font-family: var(--head); font-weight: 700; font-size: 25px;
  color: #fff; text-transform: uppercase; letter-spacing: .03em; line-height: 1;
}
.brandmark .wordmark span { color: var(--orange); }

nav.main { display: flex; align-items: center; gap: 26px; }
nav.main a {
  color: rgba(255,255,255,.82); text-decoration: none;
  font-size: 14px; font-weight: 500; letter-spacing: .02em;
  padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
nav.main a:hover { color: #fff; }
nav.main a.active { color: #fff; border-bottom-color: var(--orange); }
nav.main a.cta {
  background: var(--orange); color: #fff; padding: 11px 20px;
  border-radius: 3px; border-bottom: none; font-weight: 600;
}
nav.main a.cta:hover { background: var(--orange-dark); }

.nav-toggle {
  display: none; background: none; border: 1px solid rgba(255,255,255,.3);
  color: #fff; border-radius: 3px; padding: 8px 12px; font-size: 15px; cursor: pointer;
}

/* products dropdown */
.has-sub { position: relative; }
.has-sub .caret { font-size: 10px; opacity: .75; }
.submenu {
  position: absolute; top: 100%; left: -14px; min-width: 250px;
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 18px 40px rgba(7,26,43,.20);
  padding: 8px 0; display: none; z-index: 70;
}
.has-sub:hover .submenu, .has-sub:focus-within .submenu { display: block; }
/* Scoped under nav.main so these beat `nav.main a` (0,1,2), which sets white text.
   Without the nav.main prefix these links render white-on-white. */
nav.main .submenu a {
  display: block; padding: 10px 18px; color: var(--ink);
  font-size: 14.5px; border-bottom: none; white-space: nowrap; font-weight: 500;
}
nav.main .submenu a:hover { background: var(--paper); color: var(--orange-text); }
nav.main .submenu a.all {
  border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px;
  font-weight: 600; color: var(--orange-text);
}

/* product line badge */
.line-badge {
  display: inline-block; background: rgba(240,124,30,.16); color: var(--orange);
  border: 1px solid rgba(240,124,30,.5); border-radius: 2px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; padding: 5px 11px; margin-bottom: 16px;
}
.prod-card .tagline {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange-text); margin-bottom: 8px;
}

/* ---------- hero ---------- */
.hero {
  background:
    radial-gradient(130% 120% at 78% 0%, #1B4468 0%, var(--navy) 45%, var(--navy-dark) 100%);
  color: #fff; position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0; opacity: .11; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.6) 0 1px, transparent 1px 62px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.6) 0 1px, transparent 1px 62px);
}
/* PADDING TRAP: .hero is a <section>, so the generic `section { padding: 84px 0 }`
   applies to it as well. With the wrap's own 96px on top that was 180px of dead
   space between the header and the first line of the hero — the homepage opened on
   an empty band and you had to scroll to reach the headline. The wrap owns the
   hero's vertical rhythm; the section contributes nothing. */
.hero { padding: 0; }
.hero .wrap { position: relative; z-index: 2; padding-top: 58px; padding-bottom: 66px; }
.hero.slim .wrap { padding-top: 44px; padding-bottom: 48px; }
.hero h1 { color: #fff; max-width: 17ch; }
.hero h1 em { color: var(--orange); font-style: normal; }
.hero p.sub { color: rgba(255,255,255,.84); font-size: 19px; max-width: 56ch; margin-top: 20px; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 54px; align-items: center; }
.hero-art { width: 100%; height: auto; }

/* The homepage hero art is a landscape range group (1135x800 cutout on transparency),
   not the old 3:4 portrait drawing, so its column gets more width and the image is
   allowed to bleed slightly past the wrap on the right. The cans are baseline aligned
   in the source, so a soft elliptical shadow under the group is what stops them
   looking like they are floating on the navy. */
.hero.has-range .hero-grid { grid-template-columns: 1fr 1.02fr; gap: 40px; }
.hero-range { position: relative; margin-right: -34px; }
.hero-range::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 2%; height: 34px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 72%);
  filter: blur(6px); z-index: -1;
}
.hero-range .hero-art { display: block; }
@media (max-width: 900px) {
  .hero.has-range .hero-grid { grid-template-columns: 1fr; }
  .hero-range { margin-right: 0; max-width: 560px; }
}
.crumb { font-size: 13.5px; color: rgba(255,255,255,.62); margin-bottom: 12px; }
.crumb a { color: rgba(255,255,255,.62); text-decoration: none; }
.crumb a:hover { color: #fff; }

/* ---------- trust strip ---------- */
.trust { background: var(--navy-dark); border-top: 1px solid rgba(255,255,255,.08); }
.trust .wrap {
  /* Sized for FIVE items across at desktop. At 210px min / 30px gap the fifth
     wrapped alone onto a second row, which reads as a mistake. 190/22 gives
     5x190 + 4x22 = 1038 inside the 1128px content box. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 14px 22px; padding-top: 26px; padding-bottom: 26px;
}
.trust li { list-style: none; color: rgba(255,255,255,.78); font-size: 13.8px; display: flex; gap: 10px; }
.trust ul { display: contents; margin: 0; padding: 0; }
.trust .tick { color: var(--orange); font-weight: 700; flex-shrink: 0; }

/* ---------- sections ---------- */
section { padding: 84px 0; }
section.tight { padding: 60px 0; }
section.paper { background: var(--paper); }
section.dark { background: var(--navy); color: rgba(255,255,255,.82); }
section.dark h2, section.dark h3 { color: #fff; }
section.dark .lede { color: rgba(255,255,255,.8); }
.section-head { max-width: 680px; margin-bottom: 44px; }
.section-head.center { text-align: center; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
/* min() guards the track so cards never exceed a narrow viewport (320/360px phones). */
.cols-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 26px; }
.cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 26px; }

/* ---------- cards ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  padding: 30px 28px; position: relative;
}
.card.on-dark { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.card h3 { margin-bottom: 10px; }
.card p { margin: 0; font-size: 15.5px; }
.card .num {
  font-family: var(--head); font-size: 15px; font-weight: 700;
  color: var(--orange); letter-spacing: .1em; display: block; margin-bottom: 12px;
}
.icon { width: 40px; height: 40px; color: var(--orange); margin-bottom: 16px; }

/* ---------- product ---------- */
.prod-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.prod-figure {
  background: linear-gradient(160deg, #24405C, var(--navy-dark));
  border-radius: 5px; padding: 46px; display: grid; place-items: center;
}
.prod-card {
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  overflow: hidden; display: flex; flex-direction: column;
}
.prod-card .fig {
  background: linear-gradient(160deg, #24405C, var(--navy-dark));
  padding: 34px; display: grid; place-items: center;
}
.prod-card .body { padding: 26px 24px 28px; flex: 1; display: flex; flex-direction: column; }
.prod-card .body p { font-size: 15px; flex: 1; }

table.spec { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 15.5px; }
table.spec th, table.spec td { text-align: left; padding: 13px 4px; border-bottom: 1px solid var(--line); }
table.spec th { color: var(--ink); font-weight: 600; width: 46%; }
table.spec td { font-variant-numeric: tabular-nums; }
/* De-emphasised but still legible: #98A6B2 was only 2.5:1 on white. This is 5.0:1. */
/* Dangerous-goods / contents caution shown to the buyer. Stays on the live site. */
.spec-warn {
  margin-top: 18px; font-size: 14.5px; color: #6B3410;
  background: #FDF0DC; border-left: 3px solid #C8791A; padding: 14px 17px; border-radius: 0 3px 3px 0;
}
/* Internal reminder. Delete the 
/* ---------- faq ---------- */
.faq { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 22px 40px 22px 0; position: relative;
  font-family: var(--head); font-size: 21px; font-weight: 600; color: var(--ink); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 18px;
  color: var(--orange); font-size: 27px; font-family: var(--sans); font-weight: 300;
}
.faq[open] summary::after { content: "\2212"; }
.faq p { margin: 0 0 22px; font-size: 15.5px; max-width: 74ch; }

/* ---------- closer ---------- */
.closer { background: var(--orange); color: #fff; text-align: center; }
.closer h2 { color: #fff; }
.closer p { color: rgba(255,255,255,.93); max-width: 56ch; margin: 14px auto 0; }
.closer .btn-row { justify-content: center; }
.closer .btn-dark { background: var(--navy-dark); }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: start; }
.detail { display: flex; gap: 15px; padding: 19px 0; border-bottom: 1px solid var(--line); }
.detail .ic { color: var(--orange); flex-shrink: 0; width: 21px; height: 21px; margin-top: 3px; }
.detail strong { display: block; color: var(--ink); font-size: 13px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
.detail a { color: var(--body); text-decoration: none; }
.detail a:hover { color: var(--orange-text); }

form.enquiry { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 32px 30px; }
form.enquiry label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); text-transform: uppercase; letter-spacing: .07em; margin: 18px 0 7px; }
form.enquiry label:first-of-type { margin-top: 0; }
form.enquiry input, form.enquiry select, form.enquiry textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 3px; font-family: var(--sans); font-size: 15.5px; color: var(--ink); background: #fff;
}
form.enquiry input:focus, form.enquiry select:focus, form.enquiry textarea:focus {
  outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange);
}
form.enquiry textarea { min-height: 118px; resize: vertical; }
form.enquiry .btn { margin-top: 22px; width: 100%; text-align: center; border: none; cursor: pointer; font-size: 15px; }
/* #7A8894 was 3.4:1 on the form's paper background. This is 4.9:1. */
.form-note { font-size: 13px; color: #5E6C78; margin-top: 14px; }

/* ---------- footer ---------- */
footer.site { background: var(--navy-dark); color: rgba(255,255,255,.66); padding: 66px 0 0; font-size: 14.5px; }
footer.site .cols { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.5fr; gap: 42px; }
footer.site h4 {
  color: #fff; font-family: var(--sans); font-size: 12px; text-transform: uppercase;
  letter-spacing: .14em; margin-bottom: 17px; font-weight: 700;
}
footer.site a { color: rgba(255,255,255,.66); text-decoration: none; }
footer.site a:hover { color: var(--orange); }
footer.site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
footer.site .fbrand { margin-bottom: 16px; }
footer.site .legal {
  margin-top: 54px; border-top: 1px solid rgba(255,255,255,.1);
  padding: 22px 0 30px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: 13px; color: rgba(255,255,255,.46);
}

/* ---------- responsive ---------- */
@media (max-width: 940px) {
  .hero-grid, .two-col, .prod-hero, .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero .wrap { padding-top: 40px; padding-bottom: 48px; }
  .hero.slim .wrap { padding-top: 30px; padding-bottom: 34px; }
  footer.site .cols { grid-template-columns: 1fr 1fr; gap: 34px; }
  section { padding: 62px 0; }
  nav.main { display: none; }
  nav.main.open {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy-dark); padding: 10px 26px 22px;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  nav.main.open a { padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
  nav.main.open a.cta { text-align: center; margin-top: 12px; border-bottom: none; }
  /* dropdown flattens into the stacked mobile menu */
  .has-sub { position: static; }
  .submenu {
    position: static; display: block; min-width: 0; background: none;
    border: none; box-shadow: none; padding: 0 0 0 14px;
  }
  nav.main .submenu a { color: rgba(255,255,255,.7); padding: 11px 0; font-size: 13.5px; }
  nav.main .submenu a:hover { background: none; color: #fff; }
  nav.main .submenu a.all { border-top: none; margin-top: 0; padding-top: 11px; color: rgba(255,255,255,.7); }
  .has-sub .caret { display: none; }
  .nav-toggle { display: block; }
  header.site .wrap { position: relative; }
}
@media (max-width: 560px) {
  footer.site .cols { grid-template-columns: 1fr; }
  .prod-figure { padding: 30px; }
}

/* ---------- WhatsApp floating button ----------
   Colour: #0E7A6B, not WhatsApp's signature #25D366.
   White on #25D366 is 1.98:1 and fails even the 3:1 non-text bar, let alone the
   4.5:1 the "Chat on WhatsApp" label needs. #0E7A6B sits in WhatsApp's own
   teal-green family and measures 5.23:1 against white. The glyph carries the
   recognition; the hue does not have to.

   z-index 50 keeps it BELOW the sticky header (60) and its submenu (70), so an
   open mobile menu covers the button instead of the button punching through it. */
.wa-fab {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 50;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px 13px 16px;
  background: #0E7A6B;
  color: #fff;
  border-radius: 999px;
  font-family: var(--sans, inherit);
  font-size: 15px; font-weight: 600; line-height: 1;
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.wa-fab svg { width: 24px; height: 24px; flex: none; }
.wa-fab:hover { background: #0B6558; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, .34); }
.wa-fab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(14, 122, 107, .55); }

/* Under 600px the label costs more than it earns: collapse to a round icon so the
   button never sits on top of body copy on a narrow screen. */
@media (max-width: 600px) {
  .wa-fab { padding: 14px; border-radius: 50%; gap: 0; }
  .wa-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-fab, .wa-fab:hover { transition: none; transform: none; }
}

/* ---------- sizing calculator ---------- */
/* LAYOUT TRAP, do not undo: the mode switch must NOT be two 50%-width tabs.
   The body below is a two-column grid, so full-width halves line up exactly with
   the columns and read as column headings — "Water" over the inputs, "Fuel" over
   the results. It was reported as confusing for precisely that reason. Keep the
   switch as a compact segmented pill on its own navy bar, sized to its content,
   so it cannot align with anything underneath it. */
.calc { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }

.calc-switch {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px;
  padding: 17px 28px; background: var(--navy);
}
.calc-switch-label {
  font-family: var(--head); font-size: 20px; font-weight: 600;
  letter-spacing: .01em; color: #fff;
}
.calc-modes {
  display: inline-flex; gap: 4px; padding: 4px;
  background: rgba(255, 255, 255, .13); border-radius: 999px;
}
.calc-modes button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 010px; padding-inline: 20px; border: 0; border-radius: 999px;
  background: transparent; color: #DCE6EF; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; line-height: 1;
}
.calc-modes button svg { width: 18px; height: 18px; flex: none; }
.calc-modes button:hover { color: #fff; }
.calc-modes button[aria-selected="true"] { background: #fff; color: var(--navy); }
.calc-modes button:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.calc-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.calc-inputs { padding: 28px; border-right: 1px solid var(--line); }
.calc-outwrap { padding: 28px; background: var(--paper); }
.calc-out { }
.calc-pane-title {
  font-family: var(--head); font-size: 15px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .11em; color: var(--body);
  margin: 0 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--line);
}
.calc-intro { font-size: 15px; margin: 0 0 20px; }

.calc label, .calc legend { display: block; font-weight: 700; font-size: 14px; margin: 18px 0 6px; }
.calc-inputs > label:first-of-type { margin-top: 0; }
.calc select, .calc input[type="number"] {
  width: 100%; padding: 11px 12px; font: inherit; font-size: 16px;
  border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink);
}
.calc select:focus-visible, .calc input:focus-visible { outline: 3px solid var(--orange); outline-offset: 1px; }
.calc input.is-locked { background: var(--paper); color: var(--body); }
.calc-row { display: flex; align-items: center; gap: 10px; }
.calc-suffix { font-size: 14px; color: var(--body); white-space: nowrap; flex: none; }
.calc-hint { font-size: 13.5px; color: var(--body); margin: 6px 0 0; line-height: 1.5; }
.calc-check { display: flex; align-items: center; gap: 9px; font-weight: 500; font-size: 14.5px; }
.calc-check input { width: auto; }
.calc-units { border: 0; padding: 0; margin: 18px 0 0; }
.calc-units legend { margin-bottom: 6px; }
.calc-units label { display: inline-flex; align-items: center; gap: 7px; margin: 0 18px 0 0; font-weight: 500; }
.calc-units input { width: auto; }

.calc-headline { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 16px; }
.calc-stat { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.calc-stat span { display: block; font-family: var(--head, inherit); font-size: 30px; line-height: 1.05; font-weight: 700; color: var(--navy, #0F2A44); }
.calc-stat small { display: block; margin-top: 6px; font-size: 13px; color: var(--muted, #5E6C78); }
.calc-stat.is-hero { background: var(--navy, #0F2A44); border-color: var(--navy, #0F2A44); }
.calc-stat.is-hero span { color: #fff; font-size: 40px; }
.calc-stat.is-hero small { color: #C9D6E2; }
.calc-stat.is-pending span { color: var(--muted, #5E6C78); }

.calc-table { width: 100%; border-collapse: collapse; margin-top: 22px; font-size: 14.5px; }
.calc-table th, .calc-table td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.calc-table th { font-weight: 700; width: 42%; padding-right: 14px; }
.calc-canline { margin: 18px 0 0; font-size: 15px; }
.calc-alts { margin-top: 20px; }
.calc-alts h4 { margin: 0 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #5E6C78); }
.calc-alts ul { margin: 0; padding-left: 18px; font-size: 14.5px; }
.calc-alts li { margin-bottom: 4px; }
.calc-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.calc-cta .btn { flex: 1 1 auto; text-align: center; cursor: pointer; font: inherit; font-weight: 700; }
.calc-empty { color: var(--muted, #5E6C78); font-size: 15px; }
.calc-foot { font-size: 13.5px; color: var(--muted, #5E6C78); margin-top: 18px; max-width: 760px; }

@media (max-width: 800px) {
  .calc-inputs { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .calc-switch { padding: 15px 20px; }
  .calc-switch-label { font-size: 18px; }
  .calc-modes { width: 100%; }
  .calc-modes button { flex: 1 1 0; justify-content: center; padding-inline: 12px; }
  .calc-inputs, .calc-outwrap { padding: 20px; }
  .calc-stat.is-hero span { font-size: 34px; }
}

/* ---------- calculator: market-entry compliance block ----------
   Tier colours are semantic, not decorative: 'required' must read as a hard stop,
   'route' as an opportunity. All four text/background pairs clear WCAG AA. */
.calc-compliance { margin-top: 26px; padding-top: 22px; border-top: 2px solid var(--line); }
.calc-compliance h4 { margin: 0 0 4px; font-size: 21px; }
.calc-compliance h5 {
  margin: 20px 0 10px; font-family: var(--sans); font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--body);
}
.req-count { margin: 0; font-size: 14px; color: var(--body); }
.req-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.req-list li {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: 6px; padding: 13px 15px;
}
.req-list p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; }
.req-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.req-code { font-weight: 700; color: var(--ink); font-size: 15px; }
.req-tag {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.req-need { color: var(--ink); }
.req-need strong { font-weight: 700; }

.req-list li.is-req    { border-left-color: #B3261E; }
.req-list li.is-req    .req-tag { background: #FBE9E7; color: #8C1D18; }
.req-list li.is-cond   { border-left-color: #A85309; }
.req-list li.is-cond   .req-tag { background: #FCEEE0; color: #8A4408; }
.req-list li.is-route  { border-left-color: #0E7A6B; }
.req-list li.is-route  .req-tag { background: #E2F2EF; color: #0A5B50; }
.req-list li.is-info   { border-left-color: var(--navy-mid); }
.req-list li.is-info   .req-tag { background: var(--light); color: var(--navy); }

.req-disclaimer {
  margin: 18px 0 0; padding: 13px 15px; border-radius: 6px;
  background: var(--light); color: var(--ink);
  font-size: 13.5px; line-height: 1.6;
}

/* ---------- factory photo grid (Capabilities) ---------- */
.factory-grid {
  margin-top: 34px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 18px;
}
.factory-grid figure { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.factory-grid img { display: block; width: 100%; height: 200px; object-fit: cover; }
.factory-grid figcaption { padding: 11px 14px; font-size: 13.5px; color: var(--body); border-top: 1px solid var(--line); }

/* ---------- full-bleed photo banner ----------
   CONTRAST TRAP, measured — do not go back to a vertical gradient.
   The caption text block is ~150px tall, so with a `to top` gradient the eyebrow
   (the topmost line) landed 81.5% up the caption box where the fade was only ~0.30
   alpha. The brightest pixel behind it was pure white, putting brand orange at
   roughly 1.6:1. Raising the vertical gradient enough to fix that flattens the
   whole photograph, which defeats the point of a banner.

   The gradient is therefore HORIZONTAL: near-solid navy behind the left-aligned
   text, clearing to almost nothing on the right so the image still reads. Worst
   case (pure white photo under the text) measures 5.47:1 for the orange eyebrow.
   A second, gentle vertical pass grounds the bottom edge. */
.banner { position: relative; overflow: hidden; background: var(--navy); }
.banner > img { display: block; width: 100%; height: 460px; object-fit: cover; }
.banner-tight > img { height: 320px; }
.banner-cap {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  padding: 0 0 36px;
  color: #fff;
  background:
    linear-gradient(to right,
      rgba(7,26,43,.965) 0%, rgba(7,26,43,.945) 38%,
      rgba(7,26,43,.62) 62%, rgba(7,26,43,.10) 100%),
    linear-gradient(to top, rgba(7,26,43,.55) 0%, rgba(7,26,43,0) 46%);
}
.banner-cap .wrap { width: 100%; }
.banner-cap h2 { color: #fff; margin: 6px 0 8px; max-width: 620px; }
.banner-cap p { color: #E2EAF2; max-width: 560px; margin: 0; font-size: 16px; }
/* Constrained so the box cannot extend past the dark side of the gradient. It is a
   block element, so without this it spans the full wrap even though the glyphs stop
   early — which makes the contrast measurement (and any future hover/focus ground)
   run out over the clear part of the photo. */
.banner-cap .eyebrow { color: var(--orange); max-width: 620px; }
.banner-note { font-size: 14.5px; color: #D5E0EA; }
.banner-tight .banner-cap { padding: 0 0 22px; }
@media (max-width: 700px) {
  .banner > img { height: 300px; }
  .banner-tight > img { height: 210px; }
}

/* ---------- capabilities: numbered process sequence ---------- */
.process { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 20px; }
.process > li {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
/* Alternate the image side so a long sequence does not read as a list of rows. */
.process > li:nth-child(even) .process-img { order: 2; }
.process-img { position: relative; }
.process-img img { display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.process-n {
  position: absolute; top: 0; left: 0; padding: 9px 15px;
  background: var(--orange); color: #fff;
  font-family: var(--head); font-size: 19px; font-weight: 700; line-height: 1;
}
.process-txt { padding: 26px 28px; display: flex; flex-direction: column; justify-content: center; }
.process-txt h3 { margin: 0 0 8px; }
.process-txt p { margin: 0; font-size: 15px; }
@media (max-width: 640px) {
  .process > li:nth-child(even) .process-img { order: 0; }
  .process-txt { padding: 20px; }
}

/* Below 640px the caption block grows taller than the banner image (measured: 317px
   of text over a 300px photo at 320px wide), so the overlay would clip its own top.
   Drop out of the overlay and stack it under the image on the navy ground instead. */
@media (max-width: 640px) {
  .banner-cap {
    position: static; background: var(--navy-dark, #071A2B);
    padding: 24px 0 26px;
  }
  .banner-tight .banner-cap { padding: 18px 0 20px; }
}

/* ---------- About: text beside the showroom photo ---------- */
/* .two-col is 1fr 1fr; the copy block here needs the larger share or the
   paragraphs set to a cramped measure next to a wide landscape photo. */
.two-col-wide { grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center; }
.photo-card { margin: 0; }
.photo-card img {
  display: block; width: 100%; height: auto;
  border-radius: 10px; border: 1px solid var(--line);
}
.photo-card figcaption {
  margin-top: 11px; font-size: 13.5px; color: var(--body); line-height: 1.5;
}
@media (max-width: 860px) {
  .two-col-wide { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- homepage FAQ block ---------- */
/* Constrained measure: the answers are long, and full-bleed lines on a wide
   homepage are unreadable. Centred so it does not look orphaned in the section. */
.faq-list { max-width: 900px; margin: 34px auto 0; }
.faq-list .faq:first-child { border-top: 1px solid var(--line); }

/* The header is sticky at ~74px, so a jump to #faqs from the footer link lands with
   the section heading tucked underneath it. scroll-margin-top offsets the landing. */
#faqs { scroll-margin-top: 92px; }

/* Provenance line under a spec table: these are the factory's figures, not ours. */
.spec-source {
  margin-top: 16px; padding: 12px 15px; border-radius: 6px;
  background: var(--light); color: var(--ink);
  font-size: 13.5px; line-height: 1.6;
}

/* ---------- product code ---------- */
/* Monospace: a part number is copied into an order form, so 0/O and 1/l must be
   distinguishable. Tracking is widened for the same reason. */
.prod-code {
  margin: 10px 0 0; font-size: 13px; letter-spacing: .04em;
  color: rgba(255,255,255,.72); text-transform: uppercase;
}
.prod-code span {
  font-family: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
  font-size: 14.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--orange); margin-left: 8px; text-transform: none;
}
.card-code {
  display: inline-block; margin: 0 0 8px;
  font-family: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
  font-size: 12.5px; font-weight: 700; letter-spacing: .05em; color: var(--orange-text);
}
table.spec td strong { font-family: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", monospace; letter-spacing: .05em; }

/* ---------- enquiry form actions ---------- */
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.form-actions .btn { cursor: pointer; font: inherit; font-weight: 700; }
.btn-ghost-dark {
  background: transparent; color: var(--navy);
  border: 1px solid var(--navy); border-radius: 4px; padding: 13px 22px; text-decoration: none;
}
.btn-ghost-dark:hover { background: var(--navy); color: #fff; }
.btn-plain {
  background: transparent; color: var(--body); border: 0; padding: 13px 10px;
  text-decoration: underline; text-underline-offset: 3px;
}
.btn-plain:hover { color: var(--ink); }
.form-note { font-size: 13.5px; color: var(--body); margin-top: 12px; line-height: 1.55; }
.form-note.is-warn { color: #8C1D18; font-weight: 600; }
.form-note.is-ok { color: #0A5B50; font-weight: 600; }

/* ---------- locations map: left / right split ----------
   Map left, copy and the location list right. The dots on the list are the exact
   pin colours sampled out of the map artwork (#E46C24 orange, #1E5028 green), so
   the list reads as a legend for the map rather than as unrelated cards.
   Stacked full-width the map was 87% of the viewport and pushed the explanation
   below the fold; side by side they land together. */
.map-split {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 48px; align-items: center;
}
.map-figure { margin: 0; }
.map-figure img {
  display: block; width: 100%; height: auto;
  border-radius: 10px; border: 1px solid var(--line); background: #fff;
}
.map-copy h2 { margin-bottom: 10px; }
.map-copy .lede { margin-bottom: 6px; }

.loc-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 18px; }
.loc { position: relative; padding-left: 26px; }
/* Dot sits on the cap-height of the heading, not the top of the box. */
.loc::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
}
.loc.is-orange::before { background: #E46C24; }
.loc.is-green::before  { background: #1E5028; }
.loc h3 { margin: 0 0 5px; font-size: 19px; }
.loc p { margin: 0; font-size: 14.7px; line-height: 1.6; }

@media (max-width: 900px) {
  .map-split { grid-template-columns: 1fr; gap: 30px; }
  /* Copy first on a phone: the heading has to introduce the map, not follow it. */
  .map-copy { order: -1; }
}