@import "tailwindcss";

/* ============================================================
   H-STAR corporate site — design tokens
   See DESIGN.md for roles and rationale.
   ============================================================ */
:root {
  --navy: #0d2032;
  --navy-2: #16202b;
  --paper: #ffffff;
  --mist: #f0f5fb;
  --line: #e3e7ec;

  --blue: #2c579a;
  --blue-soft: #7fa3de;
  --accent: #c2a03a;

  --ink: #1b2430;
  --ink-2: #0d2032;
  --muted: #5a6675;
  --on-navy: #ffffff;
  --on-navy-mut: #9fb0c4;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --pad-sec: clamp(56px, 7vw, 104px);
  --gut: clamp(20px, 4vw, 48px);

  --font-sans: Archivo, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  font-family: var(--font-sans);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.7;
}

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

a {
  color: inherit;
  text-decoration: none;
}

h2,
h3,
p,
figure,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ============================================================ layout */

.sec {
  padding: var(--pad-sec) 0;
  position: relative;
}

.sec--mist {
  background: var(--mist);
}

.sec--navy {
  background: var(--navy);
  color: var(--on-navy);
}

.wrap {
  width: min(1200px, 100% - var(--gut) * 2);
  margin: 0 auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
}

.sec--navy .eyebrow {
  color: var(--blue-soft);
}

.h2 {
  font-size: clamp(26px, 3.1vw, 42px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink-2);
  margin-top: 14px;
  max-width: 24ch;
}

.sec--navy .h2 {
  color: var(--on-navy);
}

.h3 {
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: var(--ink-2);
}

.lede {
  margin-top: 16px;
  max-width: 62ch;
  color: var(--muted);
  font-size: 16px;
}

.sec--navy .lede {
  color: var(--on-navy-mut);
}

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* ============================================================ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn--accent {
  background: var(--accent);
  color: var(--navy);
}

.btn--accent:hover {
  background: #d4b355;
}

.btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: var(--on-navy);
}

.btn--ghost:hover {
  border-color: var(--on-navy);
  background: rgba(255, 255, 255, 0.07);
}

/* =========================================================== metrics */

.metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  overflow: hidden;
}

.metric {
  background: rgba(13, 32, 50, 0.72);
  padding: 18px 18px 16px;
}

.metric__num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--on-navy);
}

.metric__num em {
  font-style: normal;
  font-size: 0.55em;
  color: var(--blue-soft);
  margin-left: 1px;
}

.metric__label {
  margin-top: 8px;
  font-size: 13px;
  color: var(--on-navy-mut);
  line-height: 1.45;
}

.metric__note {
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(159, 176, 196, 0.7);
}

/* ============================================================== hero */

.hero {
  position: relative;
  background: var(--navy-2);
  color: var(--on-navy);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 46%;
  animation: hero-settle 1.4s var(--ease) both;
}

@keyframes hero-settle {
  from {
    transform: scale(1.04);
    opacity: 0.6;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(13, 32, 50, 0.94) 0%,
    rgba(13, 32, 50, 0.86) 38%,
    rgba(13, 32, 50, 0.62) 68%,
    rgba(13, 32, 50, 0.5) 100%
  );
}

.hero__inner {
  position: relative;
  z-index: 2;
  padding: clamp(56px, 8vw, 112px) 0 clamp(40px, 5vw, 64px);
}

.hero__grid {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}

.hero__name {
  font-size: clamp(30px, 4.4vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 700;
  max-width: 20ch;
}

.hero__name span {
  display: block;
  font-size: 0.44em;
  letter-spacing: 0.02em;
  color: var(--blue-soft);
  margin-top: 10px;
  font-weight: 600;
}

.hero__tag {
  margin-top: 18px;
  font-size: clamp(16px, 1.5vw, 19px);
  color: rgba(255, 255, 255, 0.9);
  max-width: 46ch;
}

.hero__pos {
  margin-top: 14px;
  color: var(--on-navy-mut);
  max-width: 56ch;
  font-size: 15px;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* =========================================================== pillars */

.pillars {
  display: grid;
  gap: 20px;
  margin-top: 40px;
}

.pillar {
  display: grid;
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease);
}

.pillar:hover {
  border-color: var(--blue-soft);
  transform: translateY(-2px);
}

.pillar__img {
  background: var(--mist);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.pillar__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pillar__body {
  padding: 24px 22px 26px;
}

.pillar__spec {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

/* =========================================================== catalog */

.catalog {
  display: grid;
  gap: 18px;
  margin-top: 40px;
}

.cat {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  overflow: hidden;
  transition: border-color 0.22s var(--ease);
}

.cat:hover {
  border-color: var(--blue);
}

.cat__img {
  aspect-ratio: 5 / 4;
  background: var(--mist);
  overflow: hidden;
}

.cat__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}

.cat:hover .cat__img img {
  transform: scale(1.03);
}

.cat__body {
  padding: 18px 18px 20px;
}

.cat__name {
  font-weight: 700;
  font-size: 15.5px;
  color: var(--ink-2);
}

.cat__line {
  margin-top: 7px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.62;
}

.trust__metric .metric__num {
  font-size: clamp(20px, 2vw, 27px);
}

.qc {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.disclaimer {
  margin-top: 22px;
  padding: 16px 18px;
  border-left: 3px solid var(--accent);
  background: var(--mist);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 13.5px;
  color: var(--muted);
  max-width: 78ch;
}

/* ============================================================== global */

.globe__grid {
  display: grid;
  gap: 34px;
  margin-top: 38px;
}

.globe__figure {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--mist);
  aspect-ratio: 4 / 3;
}

.globe__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.chip {
  font-size: 12.5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--mist);
  border: 1px solid var(--line);
  color: var(--ink);
}

.facts {
  margin-top: 24px;
  border-top: 1px solid var(--line);
}

.fact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.fact__label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.fact__value {
  font-size: 14.5px;
  color: var(--ink-2);
}

/* ============================================================= contact */

.contact__grid {
  display: grid;
  gap: 34px;
  margin-top: 38px;
  align-items: start;
}

.contact__addr {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.addr {
  padding-left: 14px;
  border-left: 2px solid var(--line);
}

.addr__label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 700;
}

.addr__value {
  margin-top: 3px;
  font-size: 14px;
  color: var(--ink);
}

/* ======================================================== motion base */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero__media img {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }}

/* ========================================================= responsive */

@media (min-width: 720px) {
  .pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .trust__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fact {
    grid-template-columns: 190px 1fr;
    gap: 16px;
    align-items: baseline;
  }
  .oem__grid {
    grid-template-columns: 0.85fr 1fr;
  }
  .globe__grid {
    grid-template-columns: 0.8fr 1fr;
  }
  .contact__grid {
    grid-template-columns: 0.9fr 1fr;
  }
}

@media (min-width: 1080px) {
  .catalog {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
  }}

/* ============================================ staggered grid entrance */

.stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.stagger.is-in > * {
  opacity: 1;
  transform: none;
}

.stagger.is-in > *:nth-child(1) {
  transition-delay: 0ms;
}
.stagger.is-in > *:nth-child(2) {
  transition-delay: 60ms;
}
.stagger.is-in > *:nth-child(3) {
  transition-delay: 120ms;
}
.stagger.is-in > *:nth-child(4) {
  transition-delay: 180ms;
}
.stagger.is-in > *:nth-child(5) {
  transition-delay: 240ms;
}
.stagger.is-in > *:nth-child(6) {
  transition-delay: 300ms;
}

@media (prefers-reduced-motion: reduce) {
  .stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==================================================== QA fixes (round 1)
   Raised by rendered verification against the live preview.
   Appended last so these win over the base rules above.               */

/* Fix 1 — white-ground product photography must not be cropped.
   The merchant's group/product images carry baked-in labels; `cover` was
   cutting the first line off (e.g. "Factory supply…" on Undercarriage parts).
   `contain` also avoids the 128% downscale on square sources.            */
.pillar__img img,
.cat__img img,
.hist__media img,
.oem__shots img,
.trust__figure img,
.prod__img img,
.globe__figure img {
  object-fit: contain;
}

/* Fix 3 — metric note was rgba(159,176,196,.7) ≈ 4.2:1 at 11px.
   Full-strength token: 7.4:1.                                            */
.metric__note {
  color: var(--on-navy-mut);
}

/* ================================================== v2 company-site blocks
   Sections added when the draft was rebuilt as a company website:
   about · equipment · brands · hydraulic focus · quality · local support
   · warehousing · why-us · navy contact.                                */

/* ------------------------------------------------------------- about */

.about {
  display: grid;
  gap: 34px;
  align-items: start;
}

.about__figure {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--mist);
  aspect-ratio: 16 / 10;
}

.about__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.body {
  margin-top: 14px;
  color: var(--muted);
  font-size: 15px;
  max-width: 62ch;
}

.checklist {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

/* ---------------------------------------------------------- equipment */

.equip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 38px;
}

.equip__card {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--mist);
  border: 1px solid var(--line);
  transition: transform 0.24s var(--ease), border-color 0.24s var(--ease);
}

.equip__card:hover {
  transform: translateY(-3px);
  border-color: var(--blue-soft);
}

.equip__card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 760 / 1350;
  object-fit: cover;
}

.equip__name {
  padding: 12px 14px 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
  text-align: center;
  letter-spacing: -0.005em;
}

/* ------------------------------------------------------------- brands */

.brandband {
  margin-top: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper);
}

.brandband img {
  width: 100%;
  height: auto;
}

/* -------------------------------------------------------------- focus */

.focus {
  display: grid;
  gap: 34px;
  align-items: center;
}

.focus__figure {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--navy-2);
  aspect-ratio: 1 / 1;
}

/* The source banner carries a baked-in headline on its left half, so the frame
   is square and anchored hard right: only the pump cluster is shown.        */
.focus__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 50%;
}

.chips--navy {
  margin-top: 24px;
}

.chip--navy {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}

/* ------------------------------------------------------------ quality */

.qc__grid {
  display: grid;
  gap: 30px;
  margin-top: 38px;
  align-items: start;
}

.qc__figure {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--mist);
  aspect-ratio: 1 / 1;
}

.qc__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.qclist li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
}

.qclist li:first-child {
  border-top: 0;
  padding-top: 0;
}

.qclist__no,
.why__no {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--navy);
}

/* ----------------------------------------------------- local support */

.support {
  display: grid;
  gap: 14px;
  margin-top: 30px;
}

.support__card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  padding: 18px 20px;
}

/* -------------------------------------------------------- warehousing */

.wh {
  display: grid;
  gap: 14px;
  margin-top: 32px;
}

.wh__point {
  border-left: 2px solid var(--accent);
  padding-left: 16px;
  font-size: 15px;
  color: var(--ink);
}

.wh__figure {
  margin-top: 32px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--mist);
  aspect-ratio: 16 / 10;
}

.wh__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------- why-us */

.why {
  display: grid;
  gap: 32px;
  margin-top: 38px;
  align-items: start;
}

.why__figure {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--mist);
  aspect-ratio: 4 / 5;
}

.why__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.why__item {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.why__item:first-child {
  border-top: 0;
  padding-top: 0;
}

.why__title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink-2);
}

.why__copy {
  margin-top: 4px;
  font-size: 14px;
  color: var(--muted);
}

/* --------------------------------------------------- navy contact block */

.sec--navy .facts {
  border-top-color: rgba(255, 255, 255, 0.16);
}

.sec--navy .fact {
  border-bottom-color: rgba(255, 255, 255, 0.16);
}

.sec--navy .fact__label {
  color: var(--blue-soft);
}

.sec--navy .fact__value {
  color: var(--on-navy);
}

.contact__brand {
  display: grid;
  gap: 24px;
}

.contact__brand img {
  width: min(260px, 72%);
  height: auto;
  padding: 22px;
  background: var(--paper);
  border-radius: var(--r-md);
}

/* Scoped to the navy variant only — on the light contact page these fall back
   to the base .addr colours so contrast stays above 4.5:1. */
.sec--navy .addr--navy {
  border-left-color: rgba(255, 255, 255, 0.22);
}

.sec--navy .addr__value--navy {
  color: var(--on-navy-mut);
}

.sec--navy .addr__label {
  color: var(--blue-soft);
}

.sec--navy .h2,
.sec--navy .lede,
.sec--navy .body {
  color: inherit;
}

.sec--navy .lede {
  color: var(--on-navy-mut);
}

/* ==================================================== v2 responsive */

@media (min-width: 720px) {
  .about {
    grid-template-columns: 1.15fr 0.85fr;
  }
  .equip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .qc__grid {
    grid-template-columns: 0.85fr 1fr;
  }
  .support {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wh {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .why {
    grid-template-columns: 0.78fr 1fr;
  }
  .focus {
    grid-template-columns: 1fr 0.85fr;
  }
}

@media (min-width: 1080px) {
  .pillars {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .equip {
    max-width: 1020px;
    margin-inline: auto;
  }
}

/* ==================================================== QA fixes (round 2)
   Raised by rendered verification of the company-site build.
   Each frame is now pinned to its source photograph's own aspect ratio, so
   `cover` produces zero crop and zero letterbox by construction.        */

/* gallery-mosaic is 1300x1938 — a portrait collage, and was losing 58% of
   its height inside a 16:10 band. Portrait frame instead.                */
.wh {
  grid-template-columns: 1fr;
}
.wh__figure {
  aspect-ratio: 1300 / 1938;
  max-width: 620px;
  margin-inline: auto;
}

/* site-excavator is 1400x609 — a wide landscape that was letterboxing 164px
   vertically inside a 4:3 frame.                                        */
.globe__figure {
  aspect-ratio: 1400 / 609;
}

/* The six part-group photographs are square; a 5:4 frame left 77px of
   horizontal letterbox on each card.                                    */
.cat__img {
  aspect-ratio: 1 / 1;
}

@media (min-width: 720px) {
  .wh {
    grid-template-columns: 0.95fr 0.72fr;
    align-items: start;
    gap: 34px;
  }
  .wh__figure {
    margin-top: 0;
    max-width: none;
  }
}

/* ================================================== corporate chrome (v3)
   A standalone company website needs the things the Alibaba storefront canvas
   forbids: a persistent header with primary navigation, and a footer carrying
   the legal entity, contact block and legal line.                          */

/* ----------------------------------------------------------- utilities */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--navy);
  padding: 10px 18px;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 700;
}

.skip:focus {
  left: 0;
}

/* --------------------------------------------------------- header */

.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.hdr__bar {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 74px;
}

.hdr__brand {
  display: grid;
  gap: 1px;
  flex: none;
}

.hdr__mark {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--navy);
  line-height: 1;
}

.hdr__mark span {
  color: var(--accent);
}

.hdr__sub {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.hdr__nav {
  display: none;
  gap: 4px;
  margin-left: auto;
}

.hdr__link {
  position: relative;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
  border-radius: var(--r-sm);
  transition: color 0.18s var(--ease);
}

.hdr__link:hover {
  color: var(--navy);
}

.hdr__link.is-active {
  color: var(--navy);
}

.hdr__link.is-active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  background: var(--accent);
}

.hdr__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.hdr__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--navy);
  cursor: pointer;
}

.hdr__panel {
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: 10px 0 20px;
}

.hdr__panel[hidden] {
  display: none;
}

.hdr__plink {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  color: var(--ink);
}

.hdr__plink.is-active {
  color: var(--blue);
}

.hdr__pcta {
  margin-top: 18px;
  width: 100%;
  justify-content: center;
}

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

.btn--sm {
  min-height: 40px;
  padding: 0 16px;
  font-size: 13.5px;
}

.btn--solid {
  background: var(--navy);
  color: var(--on-navy);
}

.btn--solid:hover {
  background: #16314b;
}

.btn--outline {
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--paper);
}

.btn--outline:hover {
  border-color: var(--navy);
}

/* ---------------------------------------------------- page header */

.phead {
  background: var(--navy);
  color: var(--on-navy);
  padding: clamp(40px, 5vw, 68px) 0 clamp(36px, 4vw, 56px);
}

.crumbs {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12.5px;
  color: var(--on-navy-mut);
  margin-bottom: 20px;
}

.crumbs a {
  color: var(--blue-soft);
}

.crumbs a:hover {
  color: var(--on-navy);
}

.phead__title {
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin-top: 14px;
  max-width: 26ch;
}

.phead__lede {
  margin-top: 16px;
  max-width: 62ch;
  color: var(--on-navy-mut);
  font-size: 16px;
}

/* -------------------------------------------------------- cta band */

.ctaband {
  background: var(--navy);
  color: var(--on-navy);
  padding: clamp(44px, 5vw, 72px) 0;
}

.ctaband__inner {
  display: grid;
  gap: 26px;
  align-items: center;
}

.ctaband__title {
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -0.02em;
  font-weight: 700;
}

.ctaband__copy {
  margin-top: 10px;
  color: var(--on-navy-mut);
  max-width: 56ch;
}

.ctaband__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

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

.ftr {
  background: var(--navy-2);
  color: var(--on-navy);
  padding: clamp(48px, 5vw, 76px) 0 0;
}

.ftr__grid {
  display: grid;
  gap: 34px;
}

.ftr__logo {
  width: 132px;
  height: auto;
  background: #05070a;
  border-radius: 8px;
  padding: 10px 12px;
}

.ftr__blurb {
  margin-top: 18px;
  color: var(--on-navy-mut);
  font-size: 14px;
  max-width: 40ch;
}

.ftr__legalname {
  margin-top: 14px;
  font-size: 12.5px;
  color: rgba(159, 176, 196, 0.75);
}

.ftr__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-soft);
}

.ftr__list {
  margin-top: 16px;
  display: grid;
  gap: 11px;
}

.ftr__list a {
  color: rgba(255, 255, 255, 0.86);
  font-size: 14px;
}

.ftr__list a:hover {
  color: var(--accent);
}

.ftr__list--contact li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.86);
}

.ftr__list--contact svg {
  flex: none;
  margin-top: 4px;
  color: var(--blue-soft);
}

.ftr__bottom {
  margin-top: clamp(34px, 4vw, 56px);
  padding: 20px 0 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  gap: 6px;
}

.ftr__bottom p {
  font-size: 12.5px;
  color: rgba(159, 176, 196, 0.8);
  max-width: 100ch;
}

/* --------------------------------------------------- documentation */

.qdoc {
  display: grid;
  gap: 28px;
  margin-top: 34px;
  align-items: center;
}

.qdoc__figure {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--mist);
  aspect-ratio: 1400 / 933;
}

.qdoc__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qdoc__list {
  display: grid;
  gap: 0;
}

.qdoc__list li {
  padding: 15px 0 15px 22px;
  border-top: 1px solid var(--line);
  position: relative;
  font-size: 15px;
}

.qdoc__list li:first-child {
  border-top: 0;
}

.qdoc__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  width: 8px;
  height: 2px;
  background: var(--accent);
}

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

@media (min-width: 720px) {
  .ctaband__inner {
    grid-template-columns: 1fr auto;
    gap: 40px;
  }
  .ftr__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  }
  .qdoc {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1080px) {
  .hdr__nav {
    display: flex;
  }
  .hdr__toggle {
    display: none;
  }
  .hdr__actions {
    margin-left: 0;
  }
}

/* ============================================== WordPress integration layer
   The design above was authored as static markup. This block adapts it to the
   markup WordPress actually emits — wp_nav_menu lists, the Customizer logo, the
   block editor's own output — without altering any of the design tokens.     */

/* ------------------------------------------------- navigation as a list */

.hdr {
  position: relative;
}

.hdr__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hdr__list li {
  margin: 0;
}

.hdr__list a {
  display: block;
  position: relative;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  border-radius: var(--r-sm);
  transition: color 0.18s var(--ease);
}

.hdr__list a:hover {
  color: var(--navy);
}

.hdr__list > .current-menu-item > a,
.hdr__list > .current_page_item > a {
  color: var(--navy);
}

.hdr__list > .current-menu-item > a::after,
.hdr__list > .current_page_item > a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  background: var(--accent);
}

/* ------------------------------------------------------- custom logo */

.hdr__img {
  max-height: 44px;
  width: auto;
}

/* --------------------------------------------- mobile panel behaviour */

@media (max-width: 1079px) {
  .hdr__nav.is-open {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 6px var(--gut) 20px;
    max-height: calc(100vh - 74px);
    overflow-y: auto;
  }

  .hdr__nav.is-open .hdr__list {
    display: block;
  }

  .hdr__nav.is-open .hdr__list li {
    border-bottom: 1px solid var(--line);
  }

  .hdr__nav.is-open .hdr__list a {
    padding: 15px 0;
    font-size: 15.5px;
    color: var(--ink);
  }

  .hdr__nav.is-open .hdr__list > .current-menu-item > a::after,
  .hdr__nav.is-open .hdr__list > .current_page_item > a::after {
    display: none;
  }

  .hdr__nav.is-open .hdr__list > .current-menu-item > a,
  .hdr__nav.is-open .hdr__list > .current_page_item > a {
    color: var(--blue);
  }
}

/* CSS-only hamburger, so no icon font or SVG sprite is needed. */
.hdr__bars,
.hdr__bars::before,
.hdr__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--navy);
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}

.hdr__bars {
  position: relative;
}

.hdr__bars::before,
.hdr__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.hdr__bars::before {
  top: -6px;
}

.hdr__bars::after {
  top: 6px;
}

.hdr__toggle[aria-expanded="true"] .hdr__bars {
  background: transparent;
}

.hdr__toggle[aria-expanded="true"] .hdr__bars::before {
  transform: translateY(6px) rotate(45deg);
}

.hdr__toggle[aria-expanded="true"] .hdr__bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* ------------------------------------------------- metric prefix */

.metric__pre {
  font-size: 0.62em;
  color: var(--blue-soft);
  margin-right: 1px;
}

/* ------------------------------------- block editor output on the front */

.entry > * + * {
  margin-top: 18px;
}

.entry h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-2);
  margin-top: 40px;
}

.entry h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink-2);
  margin-top: 30px;
}

.entry ul,
.entry ol {
  padding-left: 20px;
  list-style: disc;
}

.entry ol {
  list-style: decimal;
}

.entry li + li {
  margin-top: 7px;
}

.entry img,
.entry figure img {
  border-radius: var(--r-md);
  height: auto;
}

.entry blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 18px;
  color: var(--muted);
}

.entry .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--navy);
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
}

.entry .wp-block-button__link:hover {
  background: #d4b355;
}

/* Editor-authored tables follow the same hairline language as the facts list. */
.entry table,
.factsTable table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

.entry th,
.entry td,
.factsTable th,
.factsTable td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.entry thead th,
.factsTable thead th {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* -------------------------------------------------------- archives */

.archive__item {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.archive__item h2 a {
  color: var(--ink-2);
}

.pagination,
.wp-block-query-pagination {
  margin-top: 30px;
  display: flex;
  gap: 12px;
  font-size: 14px;
}

/* --------------------------------------- editor parity for patterns */

.editor-styles-wrapper .sec,
.block-editor-block-list__layout .sec {
  padding: 48px 20px;
}

.editor-styles-wrapper .eyebrow,
.block-editor-block-list__layout .eyebrow {
  color: var(--blue);
}

/* -------------------------------------------- admin-bar compensation */

body.admin-bar .hdr {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .hdr {
    top: 46px;
  }
}

/* ================================================== defect fix (2026-09-30)
   Rendered verification on the live WordPress install found the page-header
   <h1> painting at rgb(27,36,48) — the light-mode ink colour — on top of the
   navy band, i.e. almost invisible. WordPress emits its own heading colour from
   theme.json's "elements.heading" and it wins over the inherited colour on the
   section wrapper, so the colour has to be pinned on the headings themselves
   rather than on their parent.

   Pinning it here (rather than only in theme.json) also protects the theme if
   a future plugin or WordPress update re-injects global styles.              */

.hero h1,
.hero .hero__name,
.phead h1,
.phead .phead__title,
.sec--navy h1,
.sec--navy h2,
.sec--navy h3,
.sec--navy .h2,
.sec--navy .h3,
.ctaband h2,
.ctaband .ctaband__title,
.ftr h2,
.ftr h3 {
  color: var(--on-navy);
}

/* These two already carry their own accent colour; re-declared last so the
   block above cannot flatten them. */
.ftr__title {
  color: var(--accent);
}

.hero__name span {
  color: var(--blue-soft);
}

.sec--navy .lede,
.sec--navy .body,
.phead__lede {
  color: var(--on-navy-mut);
}

/* The site title is set in Settings → General, so the front page can end up
   titled with a bare hostname before the client configures it. Keep it legible
   rather than letting it wrap awkwardly. */
.hdr__sub,
.ftr__legalname {
  overflow-wrap: anywhere;
}