/*
Theme Name: ADEPC
Theme URI: https://adepc.com
Author: Afro-Dutch EPC Ltd.
Author URI: https://adepc.com
Description: Custom theme for Afro-Dutch EPC Ltd. — project management, EPC and engineering for energy, process and industrial projects in East Africa and the Middle East. Editorial, restrained, premium. "One line of accountability, from feasibility to handover."
Version: 1.5.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: adepc
*/

/* =====================================================
   1. Design tokens
   ===================================================== */

:root {
  --navy: #0B1F33;          /* primary */
  --navy-soft: #12293F;     /* slightly lifted navy for cards on navy */
  --navy-line: #24374C;     /* hairlines on navy */
  --accent: #C98A4B;        /* amber-clay, the single accent */
  --accent-deep: #B0763C;   /* hover state for accent */
  --paper: #F7F6F3;         /* warm off-white section background */
  --white: #FFFFFF;
  --ink: #1B2733;           /* body text on light */
  --ink-soft: #55616D;      /* secondary text on light */
  --line: #E4E1DA;          /* hairlines on light */
  --on-navy: #E9EDF2;       /* body text on navy */
  --on-navy-soft: #9BAAB9;  /* secondary text on navy */

  --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --measure: 62ch;
  --container: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-pad: clamp(4rem, 9vw, 7.5rem);
}

/* =====================================================
   2. Reset / base
   ===================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 0.6em;
  color: var(--navy);
  text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 5.5vw, 3.75rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); letter-spacing: -0.005em; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
h4 { font-size: 1.125rem; font-family: var(--font-body); font-weight: 600; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }

ul, ol { padding-left: 1.2em; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.5rem 0;
}

blockquote {
  margin: 2rem 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--accent);
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--navy);
}

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

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -3rem;
  z-index: 200;
  background: var(--navy);
  color: var(--white);
  padding: 0.6rem 1rem;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; color: var(--white); }

/* =====================================================
   3. Layout primitives
   ===================================================== */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: 860px; }

.section { padding-block: var(--section-pad); }
.section--paper { background: var(--paper); }
.section--navy { background: var(--navy); }

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

/* Eyebrow: small letterspaced caps above headings */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 1.1rem;
}
.section--navy .eyebrow { color: var(--accent); }

.lede {
  font-size: clamp(1.125rem, 1.9vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: var(--measure);
}
.section--navy .lede { color: var(--on-navy); }

.section-head { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* Amber keyline used as a quiet signature under headings */
.keyline {
  display: block;
  width: 3.5rem;
  height: 2px;
  background: var(--accent);
  border: 0;
  margin: 1.75rem 0 0;
}

/* =====================================================
   4. Buttons
   ===================================================== */

.button,
button.button,
input[type="submit"] {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 1.9rem;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: var(--white);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.button:hover,
input[type="submit"]:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: var(--white);
}

.button--ghost {
  background: transparent;
  color: var(--navy);
}
.button--ghost:hover { background: var(--navy); color: var(--white); }

.section--navy .button,
.hero .button,
.page-hero .button,
.cta-band .button {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--navy);
}
.section--navy .button:hover,
.hero .button:hover,
.page-hero .button:hover,
.cta-band .button:hover { background: var(--white); border-color: var(--white); color: var(--navy); }

.section--navy .button--ghost,
.hero .button--ghost,
.page-hero .button--ghost,
.cta-band .button--ghost {
  background: transparent;
  border-color: var(--navy-line);
  color: var(--white);
}
.section--navy .button--ghost:hover,
.hero .button--ghost:hover,
.page-hero .button--ghost:hover,
.cta-band .button--ghost:hover { background: var(--white); border-color: var(--white); color: var(--navy); }

/* Quiet text link with arrow */
.text-link {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}
.text-link:hover { color: var(--accent-deep); }

/* =====================================================
   5. Header
   ===================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 4.75rem;
}

/* Wordmark */
.wordmark {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: var(--navy);
}
.wordmark:hover { color: var(--navy); }

/* The A of ADEPC, drawn as the datum mark: triangle over an amber
   baseline. The amber line sits below the text baseline, so the svg
   must not clip (overflow: visible). */
.wordmark__a {
  height: 0.72em;
  width: auto;
  margin-right: 0.3em;
  display: inline-block;
  vertical-align: baseline;
  overflow: visible;
}

.wordmark__mark {
  font-family: var(--font-body);
  font-size: 2.55rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  margin-right: -0.3em; /* balance trailing letterspace */
}
.wordmark__mark .tick { color: var(--accent); }

.custom-logo { max-height: 3rem; width: auto; }

/* Navigation */
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.site-nav a {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--accent-deep); }

.site-nav .current-menu-item > a,
.site-nav .current_page_item > a {
  border-bottom-color: var(--accent);
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.6rem;
  margin-right: -0.6rem;
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  margin: 5px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (max-width: 820px) {
  .nav-toggle { display: block; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    display: none;
  }

  .nav-open .site-nav { display: block; }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.25rem;
  }

  .site-nav li { border-top: 1px solid var(--line); }
  .site-nav li:first-child { border-top: 0; }
  .site-nav a { display: block; padding: 0.9rem 0; border-bottom: 0; }
  .site-nav .current-menu-item > a { color: var(--accent-deep); }

  .nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* =====================================================
   6. Hero (front page)
   ===================================================== */

.hero {
  background: var(--navy);
  color: var(--on-navy);
  padding-block: clamp(5rem, 12vw, 9.5rem) clamp(4rem, 10vw, 8rem);
  position: relative;
  overflow: hidden;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2rem;
}
.hero__eyebrow::after {
  content: "";
  flex: 0 0 3rem;
  height: 1px;
  background: var(--navy-line);
}

@media (max-width: 640px) {
  .hero__eyebrow::after { display: none; }
}

.hero h1 {
  color: var(--white);
  max-width: 15em;
  margin-bottom: 0.5em;
}
.hero h1 em {
  font-style: italic;
  color: var(--accent);
}

.hero__lede {
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
  color: var(--on-navy-soft);
  max-width: 46ch;
  margin-bottom: 2.5rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Coordinates footnote — the "two continents" signature */
.hero__coords {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--navy-line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-navy-soft);
}
.hero__coords strong { color: var(--on-navy); font-weight: 600; }

/* =====================================================
   7. Cards & grids
   ===================================================== */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}

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

.card {
  background: var(--white);
  border: 1px solid var(--line);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
}

.section--paper .card { border-color: transparent; }

.card__index {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--accent-deep);
  letter-spacing: 0.06em;
  margin-bottom: 1.5rem;
}

.card h3 { margin-bottom: 0.5em; }

.card p { color: var(--ink-soft); font-size: 1rem; }

.card .text-link { margin-top: auto; padding-top: 1.5rem; align-self: flex-start; border-bottom-color: var(--accent); }

/* Service detail rows (Services page) */
.service-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}
.service-row:last-of-type { border-bottom: 1px solid var(--line); }

@media (max-width: 820px) {
  .service-row { grid-template-columns: 1fr; }
}

.service-row__label { color: var(--accent-deep); font-family: var(--font-display); margin-bottom: 0.75rem; }

.service-row ul {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
}
.service-row li {
  padding: 0.55rem 0 0.55rem 1.4rem;
  position: relative;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.98rem;
}
.service-row li:first-child { border-top: 0; }
.service-row li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 0.55rem;
  height: 2px;
  background: var(--accent);
}

/* =====================================================
   8. Stats strip
   ===================================================== */

.stats {
  background: var(--navy);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

@media (max-width: 900px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stats__grid { grid-template-columns: 1fr; } }

.stat { border-left: 1px solid var(--navy-line); padding-left: 1.5rem; }

.stat__number {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3rem);
  line-height: 1;
  color: var(--accent);
  margin-bottom: 0.4rem;
}

.stat__label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-navy-soft);
}

/* =====================================================
   9. Photo placeholders
   ===================================================== */

/*
 * .photo-slot marks where real project photography will go later.
 * To replace: delete the .photo-slot div in the template and drop in
 * an <img> (or set a Featured Image where the template supports it).
 */
.photo-slot {
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 10px,
      rgba(11, 31, 51, 0.045) 10px,
      rgba(11, 31, 51, 0.045) 11px
    ),
    var(--paper);
  border: 1px solid var(--line);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

.photo-slot--tall { min-height: 440px; }
.photo-slot--short { min-height: 220px; }

.photo-slot__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.photo-slot__label::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--accent);
  margin: 0 auto 1rem;
}

/* Credential panel
   Sits where project photography would otherwise go. Carries real
   information rather than decoration, so the layout stays balanced
   without imagery. If photographs become available later, a
   .photo-slot block can replace it. */
.credential-panel {
  background: var(--white);
  border: 1px solid var(--line);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}
.credential-panel .eyebrow { margin-bottom: 0.7rem; }
.credential-panel h3 { font-size: 1.2rem; margin-bottom: 0.4em; }
.credential-panel p { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 0; }
.credential-panel__item + .credential-panel__item {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

/* Project chain diagram (template-parts/project-chain.php)
   Hairline spans, not filled bars: the amber rule spanning the full
   width is the "one line of accountability" claim. Scrolls sideways
   below ~720px rather than shrinking to illegibility. */
.chain-figure { margin: clamp(2.5rem, 5vw, 4rem) 0 0; }
.chain-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.chain { display: block; width: 100%; height: auto; min-width: 720px; }
.chain .axis, .chain .ticks line { stroke: var(--line); }
.chain .stage {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  fill: var(--ink-soft);
  transition: fill 0.3s ease, opacity 0.3s ease;
}
.chain .chain-label { font-family: var(--font-display); font-size: 16px; }
.chain .chain-span { transition: opacity 0.3s ease; }
.chain .chain-span:focus { outline: none; }
.chain .chain-span:focus-visible .chain-rule { stroke-width: 3; }
.chain .chain-rule, .chain .chain-caps { transition: stroke-width 0.25s ease; }
.chain-figure .chain-span:hover { cursor: default; }

/* dim the spans that are not being inspected, and lift the stages covered */
.chain-figure[data-active] .chain-span { opacity: 0.4; }
.chain-figure[data-active="eng"] .chain-span--eng,
.chain-figure[data-active="epc"] .chain-span--epc,
.chain-figure[data-active="pm"]  .chain-span--pm { opacity: 1; }
.chain-figure[data-active] .stage { opacity: 0.3; }
.chain-figure[data-active="eng"] .stage.c1,
.chain-figure[data-active="eng"] .stage.c2,
.chain-figure[data-active="epc"] .stage.c2,
.chain-figure[data-active="epc"] .stage.c3,
.chain-figure[data-active="epc"] .stage.c4,
.chain-figure[data-active="epc"] .stage.c5,
.chain-figure[data-active="epc"] .stage.c6,
.chain-figure[data-active="pm"] .stage { opacity: 1; fill: var(--ink); }
.chain-figure[data-active="eng"] .chain-span--eng .chain-rule,
.chain-figure[data-active="epc"] .chain-span--epc .chain-rule { stroke-width: 2.5; }
.chain-figure[data-active="pm"] .chain-span--pm .chain-rule { stroke-width: 3.5; }

/* note under the diagram, cross-fading between spans */
.chain-notes { position: relative; margin-top: 2rem; min-height: 4.5rem; max-width: 64ch; }
.chain-note {
  position: absolute;
  inset: 0;
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.chain-note strong { color: var(--ink); font-weight: 600; }
.chain-note.is-on { opacity: 1; }

/* draw the rules in when the figure scrolls into view */
html.js .chain-figure .chain-rule {
  stroke-dasharray: var(--len) var(--len);
  stroke-dashoffset: var(--len);
}
html.js .chain-figure .chain-caps { opacity: 0; }
html.js .chain-figure.is-visible .chain-rule {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), stroke-width 0.25s ease;
}
html.js .chain-figure.is-visible .chain-caps {
  opacity: 1;
  transition: opacity 0.4s ease 0.55s;
}
html.js .chain-figure.is-visible .chain-span--epc .chain-rule { transition-delay: 0.12s; }
html.js .chain-figure.is-visible .chain-span--pm  .chain-rule { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html.js .chain-figure .chain-rule { stroke-dasharray: none; stroke-dashoffset: 0; }
  html.js .chain-figure .chain-caps { opacity: 1; }
  .chain .stage, .chain .chain-span, .chain-note { transition: none; }
}

@media (max-width: 600px) {
  .chain-notes { min-height: 7rem; }
}

/* Project location map (template-parts/project-map.php)
   The list and the map are two halves of one figure: hovering or
   focusing either side highlights the other. */
.map-layout {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 820px) {
  .map-layout { grid-template-columns: 1fr; }
}

.map-list { margin: 0; }
.map-list__item {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) 1fr;
  gap: 1.25rem;
  padding: 0.9rem 0.75rem;
  margin-inline: -0.75rem;
  border-top: 1px solid var(--line);
  transition: background-color 0.25s ease;
}
.map-list__item:last-child { border-bottom: 1px solid var(--line); }
.map-list__name {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-deep);
  padding-top: 0.2rem;
  transition: color 0.25s ease;
}
.map-list__note { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.map-list__item.is-on { background: rgba(201, 138, 75, 0.09); }
.map-list__item.is-on .map-list__note { color: var(--ink); }

.map-figure { margin: 0; position: sticky; top: 6rem; }
@media (max-width: 820px) { .map-figure { position: static; } }
.map-frame { background: var(--navy); padding: clamp(1rem, 3vw, 1.5rem); }
.map { display: block; width: 100%; height: auto; }
.map .land { fill: #16304A; stroke: var(--navy-line); stroke-width: 0.6; }
.map .marker { transition: opacity 0.25s ease; }
.map .marker:focus { outline: none; }
.map .marker .halo { opacity: 0; transition: opacity 0.25s ease; }
.map .marker--proj .dot { fill: var(--accent); }
.map .marker--base .dot { fill: var(--white); }
.map .lbl { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.04em; }
.map .marker--proj .lbl { fill: #C9B79B; transition: fill 0.25s ease; }
.map .marker--base .lbl { fill: var(--white); font-weight: 600; }

/* one marker inspected: dim the rest, ring and brighten the active one */
.map-layout[data-loc] .marker { opacity: 0.28; }
.map-layout[data-loc] .marker.is-on { opacity: 1; }
.map-layout[data-loc] .marker.is-on .halo { opacity: 1; }
.map-layout[data-loc] .marker.is-on .lbl { fill: var(--white); }

.map-key {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.map-key i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 0.55rem;
  vertical-align: middle;
  border: 1px solid var(--line);
}
.map-key__base { background: var(--white); }
.map-key__proj { background: var(--accent); border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .map-list__item, .map .marker, .map .marker .halo, .map .marker .lbl { transition: none; }
}

.section--navy .photo-slot {
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 10px,
      rgba(255, 255, 255, 0.05) 10px,
      rgba(255, 255, 255, 0.05) 11px
    ),
    var(--navy-soft);
  border-color: var(--navy-line);
}
.section--navy .photo-slot__label { color: var(--on-navy-soft); }

/* =====================================================
   10. Page hero (interior pages)
   ===================================================== */

.page-hero {
  background: var(--navy);
  padding-block: clamp(4rem, 9vw, 6.5rem);
}

.page-hero .eyebrow { color: var(--accent); }
.page-hero h1 { color: var(--white); margin-bottom: 0; max-width: 18em; }
.page-hero__lede {
  margin-top: 1.5rem;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: var(--on-navy-soft);
  max-width: 52ch;
}

/* =====================================================
   11. Prose (editor content)
   ===================================================== */

.prose { max-width: var(--measure); }
.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.6em; }
.prose img { margin-block: 2rem; }
.prose .wp-caption { max-width: 100%; }
.prose .wp-caption-text { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.5rem; }

.alignwide { margin-inline: auto; }
.aligncenter { margin-inline: auto; }
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }

@media (max-width: 640px) {
  .alignleft, .alignright { float: none; margin: 1.5rem 0; }
}

/* =====================================================
   12. Two-column feature (About page etc.)
   ===================================================== */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.feature--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }

@media (max-width: 820px) {
  .feature, .feature--flip { grid-template-columns: 1fr; }
}

/* Definition list rows: partnership facts, office details */
.fact-list {
  margin: 0;
  border-top: 1px solid var(--line);
}
.fact-list > div {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) 2fr;
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.fact-list dt {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  padding-top: 0.2rem;
}
.fact-list dd { margin: 0; color: var(--ink-soft); }
.fact-list dd strong { color: var(--ink); }

.section--navy .fact-list { border-color: var(--navy-line); }
.section--navy .fact-list > div { border-color: var(--navy-line); }
.section--navy .fact-list dt { color: var(--accent); }
.section--navy .fact-list dd { color: var(--on-navy-soft); }
.section--navy .fact-list dd strong { color: var(--white); }

/* Values / principles list */
.value-item { border-top: 1px solid var(--line); padding: 1.75rem 0; }
.value-item:last-child { border-bottom: 1px solid var(--line); }
.value-item h3 { font-size: 1.2rem; margin-bottom: 0.4em; }
.value-item p { color: var(--ink-soft); font-size: 1rem; max-width: var(--measure); }

/* =====================================================
   13. Projects empty state
   ===================================================== */

.projects-empty {
  border: 1px solid var(--line);
  background: var(--white);
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
}

.projects-empty h2 { margin-bottom: 0.5em; }
.projects-empty p {
  color: var(--ink-soft);
  max-width: 52ch;
  margin-inline: auto;
}
.projects-empty .button { margin-top: 1.75rem; }

.projects-empty__mark {
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 1.5rem;
}

/* Capability preview cards on Projects page */
.sector-list { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* =====================================================
   14. Contact page & form
   ===================================================== */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
}

@media (max-width: 860px) {
  .contact-layout { grid-template-columns: 1fr; }
}

.contact-details h3 {
  font-size: 0.8rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 2.25rem 0 0.5rem;
}
.contact-details h3:first-child { margin-top: 0; }
.contact-details p { color: var(--ink-soft); }
.contact-details a { font-weight: 500; }

/* Form */
.contact-form { background: var(--white); border: 1px solid var(--line); padding: clamp(1.75rem, 4vw, 2.75rem); }

.form-field { margin-bottom: 1.4rem; }

.form-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.5rem;
}
.form-field .required { color: var(--accent-deep); }

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 0.8rem 1rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--white);
}

.form-field textarea { min-height: 9rem; resize: vertical; }

/* Honeypot — hidden from humans, left in DOM for bots */
.form-field--hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-notice {
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
  font-size: 0.95rem;
  border-left: 3px solid var(--accent);
  background: var(--paper);
  color: var(--ink);
}
.form-notice--error { border-left-color: #A94434; }

/* =====================================================
   15. CTA band
   ===================================================== */

.cta-band { background: var(--navy); padding-block: clamp(4rem, 8vw, 6.5rem); }

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

.cta-band h2 { color: var(--white); margin: 0; max-width: 18em; }
.cta-band .eyebrow { color: var(--accent); }
.cta-band__text { max-width: 640px; }
.cta-band p { color: var(--on-navy-soft); margin: 1rem 0 0; }

/* =====================================================
   16. Footer
   ===================================================== */

.site-footer {
  background: var(--navy);
  color: var(--on-navy-soft);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem;
  font-size: 0.95rem;
}

.site-footer a { color: var(--on-navy); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }

.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--navy-line);
}

@media (max-width: 820px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: 2.25rem; }
}

.site-footer .wordmark { color: var(--white); }
/* The wordmark is a link, and its mark is drawn with currentColor, so the
   generic footer link hover would turn the whole logo amber. Hold it white.
   The amber tick and baseline set their own colour and are unaffected. */
.site-footer .wordmark:hover,
.site-footer .wordmark:focus { color: var(--white); }
.site-footer .wordmark__sub { color: var(--on-navy-soft); }

.site-footer__tagline {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--on-navy);
  max-width: 30ch;
}

.site-footer h4 {
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.6rem; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  padding-top: 2rem;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

/* =====================================================
   17. Reveal on scroll (progressive enhancement)
   ===================================================== */

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

html.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; }
}

/* =====================================================
   18. Misc / blog fallback / 404
   ===================================================== */

.entry-list article {
  border-top: 1px solid var(--line);
  padding-block: 2.25rem;
}
.entry-list article:last-child { border-bottom: 1px solid var(--line); }
.entry-list h2 { font-size: 1.5rem; margin-bottom: 0.3em; }
.entry-list h2 a { text-decoration: none; }
.entry-list .entry-meta {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
}

.error-404 { text-align: center; padding-block: var(--section-pad); }
.error-404 .button { margin-top: 1.5rem; }

/* WordPress admin bar offset for sticky header */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}