/*
Theme Name: Civonex Engineering
Theme URI: https://www.civonexengineering.com
Author: Imarisher
Author URI: https://imarisher.com
Description: Custom theme for Civonex Engineering Limited — a Kenyan engineering and construction firm delivering road, building, water and electrical works. "Clinical Amber" design system: light neutral canvas, white surfaces floated above it, a single saturated amber accent used as the active state, and Inter throughout.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
Text Domain: civonex
*/

/* ==========================================================================
   Civonex Engineering — "Clinical Amber" Design System

   The rules the whole sheet is built on:

     1. The page canvas is a light neutral gray. Never pure white. Content
        sits on white cards that float above it — separation comes from
        background contrast, not from strokes.
     2. Exactly one accent: amber #FFA10B. It is a highlight, never a wash.
        Within any group of cards, rows or tiles, one item is solid amber
        and the rest stay white — so the amber reads as "active/featured".
     3. Headlines are charcoal. Always. Amber is never used as heading text.
     4. Amber surfaces carry charcoal text (9:1), never white (1.9:1).
        This is the one deliberate departure from the reference comps —
        see README §9.
     5. Photography is desaturated to grayscale, and always inside a
        rounded container.
     6. Flat by default. Where lift is needed it is a single very soft,
        low-opacity shadow. Amber cards get no shadow at all — they read
        as flat saturated blocks.

   Contents
     1.  Tokens
     2.  Reset & base
     3.  Layout helpers
     4.  Typography accents (eyebrow, lede, ghost words, trail rule)
     5.  Buttons & the circular arrow affordance
     6.  Header / navigation
     7.  Hero & page banners
     8.  Cards & service tiles
     9.  Feature blocks (why-us, vision/mission, values, service rows, stats)
     10. Media placeholders
     11. Forms
     12. Contact blocks
     13. CTA moments
     14. Footer
     15. Blog
     16. Motion & utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* --- Colour -------------------------------------------------------- */

  /* The canvas. Everything is a card floating on top of this. */
  --bg: #F3F3F4;
  /* A half-step deeper, for bands that hold a group of white cards. */
  --bg-sunken: #EAEAEC;
  --surface: #FFFFFF;

  /* The single accent. --accent is the fill; --accent-strong is its hover;
     --accent-soft is the 8%-tint used behind thin-line icons; --accent-ink
     is the same hue pushed dark enough (6.2:1) to be legible as *text* on
     light backgrounds, for the handful of places a coloured link is
     unavoidable. Amber itself is never used as text on white. */
  --accent: #FFA10B;
  --accent-strong: #E88E00;
  --accent-soft: #FFF3E0;
  --accent-ink: #8A5300;

  /* Type + ink surfaces. One charcoal, two grays, nothing else. */
  --ink: #132229;
  --ink-raised: #1C2F38;   /* cards sitting on an ink section */
  --muted: #6B7280;
  --muted-soft: #98A0A9;

  /* The only hairline in the system — form controls, where an input has to
     announce itself as an input. Nothing else gets a border. */
  --line: #E2E3E5;
  --line-ink: rgba(255, 255, 255, 0.14);

  --danger: #B3261E;
  --success-bg: #E9F5EC;
  --success-fg: #1E6B34;
  --error-bg: #FCECEA;
  --error-fg: #B3261E;

  /* --- Type ---------------------------------------------------------- */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step-hero: clamp(2.5rem, 1.35rem + 4.6vw, 4.25rem);
  --step-1: clamp(2rem, 1.35rem + 2.8vw, 3.5rem);
  --step-2: clamp(1.6rem, 1.2rem + 1.8vw, 2.65rem);
  --step-3: clamp(1.125rem, 1.03rem + 0.45vw, 1.375rem);
  --step-0: 1rem;
  --step--1: 0.9375rem;
  --step--2: 0.8125rem;
  --step--3: 0.72rem;

  /* Oversized stat numerals — the visual anchors. */
  --step-stat: clamp(2.5rem, 1.6rem + 3.4vw, 4rem);

  /* --- Layout -------------------------------------------------------- */
  --container: 1400px;
  --container-narrow: 980px;
  --gutter: clamp(1.15rem, 3.5vw, 2.75rem);
  /* Breathing room between the page edge and a floated panel. */
  --frame: clamp(0.75rem, 2.2vw, 1.75rem);

  /* --- Shape --------------------------------------------------------- */
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* --- Elevation ----------------------------------------------------- */
  --shadow-soft: 0 4px 20px rgba(19, 34, 41, 0.05);
  --shadow-lift: 0 14px 38px rgba(19, 34, 41, 0.09);

  /* --- Motion -------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.68, 0.24, 1);
  --dur: 240ms;

  /* --- Signature motif ------------------------------------------------
     One amber gradient ribbon, reused at every hero and CTA moment so the
     site has a mark you recognise before you read anything. Two forms:
     --wave        the filled panel (gradient ground + white ribbons)
     --wave-lines  ribbons only, transparent ground, for use over charcoal
     Inline as data URIs so neither costs a request. */
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FFD08F'/%3E%3Cstop offset='.45' stop-color='%23FFA10B'/%3E%3Cstop offset='1' stop-color='%23DE7F00'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='800' height='400' fill='url(%23w)'/%3E%3Cg fill='none' stroke='%23ffffff' stroke-linecap='round' opacity='.32'%3E%3Cpath d='M-40 300 C 150 150 320 380 500 220 S 780 70 900 170' stroke-width='26'/%3E%3Cpath d='M-40 348 C 150 198 320 428 500 268 S 780 118 900 218' stroke-width='14' opacity='.75'/%3E%3Cpath d='M-40 248 C 150 98 320 328 500 168 S 780 18 900 118' stroke-width='9' opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
  --wave-lines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='v' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FFD08F'/%3E%3Cstop offset='.5' stop-color='%23FFA10B'/%3E%3Cstop offset='1' stop-color='%23DE7F00'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23v)' stroke-linecap='round'%3E%3Cpath d='M-40 300 C 150 150 320 380 500 220 S 780 70 900 170' stroke-width='30' opacity='.9'/%3E%3Cpath d='M-40 352 C 150 202 320 432 500 272 S 780 122 900 222' stroke-width='15' opacity='.6'/%3E%3Cpath d='M-40 246 C 150 96 320 326 500 166 S 780 16 900 116' stroke-width='9' opacity='.45'/%3E%3C/g%3E%3C/svg%3E");

  /* Soft organic gray "render" used wherever a photograph has not been
     supplied yet — reads as an intentional abstract texture rather than a
     missing asset, and matches the monochrome imagery rule. */
  --blob:
    radial-gradient(60% 70% at 22% 24%, rgba(255, 255, 255, 0.95), transparent 62%),
    radial-gradient(48% 58% at 78% 30%, rgba(19, 34, 41, 0.10), transparent 66%),
    radial-gradient(70% 80% at 62% 88%, rgba(19, 34, 41, 0.16), transparent 70%),
    linear-gradient(145deg, #E6E7E9, #D3D5D8 55%, #C4C7CB);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Sticky header height + breathing room, so in-page anchor links don't
     land underneath the navbar. */
  scroll-padding-top: 6.5rem;
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.65;
  color: var(--muted);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* Headlines: bold, tight, large, and always charcoal. */
h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.028em;
  margin: 0 0 0.5em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--step-1); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-3); font-weight: 600; letter-spacing: -0.018em; }
h4 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.012em; }

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

strong { font-weight: 600; color: var(--ink); }

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

::selection { background: var(--accent); color: var(--ink); }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section {
  position: relative;
  padding-block: clamp(3.5rem, 6.5vw, 6.5rem);
}
.section--tight { padding-block: clamp(2.25rem, 4vw, 3.5rem); }
.section--flush-top { padding-top: 0; }

/* The two band variants. --mist is the deeper gray band that a group of
   white cards sits on; --gray is the white band used to break the rhythm
   of an otherwise gray page. */
.section--mist { background: var(--bg-sunken); }
.section--gray { background: var(--surface); }

/* The one charcoal moment per page. Kept as `--navy` so every existing
   content file keeps working; it is charcoal now, not navy. */
.section--navy { background: var(--ink); color: rgba(255, 255, 255, 0.72); }
.section--navy h1,
.section--navy h2,
.section--navy h3,
.section--navy h4,
.section--navy strong { color: var(--surface); }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: center;
}
.grid-3,
.grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 640px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Asymmetric two-column: a statement on the left, supporting copy right. */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr 0.95fr; align-items: center; }
  .split--wide-left { grid-template-columns: 1.3fr 1fr; }
}

/* --------------------------------------------------------------------------
   4. Typography accents
   -------------------------------------------------------------------------- */

/* Small gray label above a headline, with a single amber dot. The dot is
   the smallest possible dose of the accent and appears on every page. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--step--3);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.1em;
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.eyebrow--center { justify-content: center; }
.section--navy .eyebrow,
.cta-simple .eyebrow { color: rgba(255, 255, 255, 0.62); }

/* Headlines are never coloured. The class is kept so existing content
   files keep rendering; it simply resolves to the headline colour. */
.title-amber { color: var(--ink); }
.section--navy .title-amber,
.cta-simple .title-amber { color: var(--surface); }

.lede {
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 54ch;
  color: var(--muted);
}
.section--navy .lede { color: rgba(255, 255, 255, 0.7); }

/* Oversized background word ("About", "Services", "Vision"). Decorative
   only — hidden from assistive tech, never intercepts clicks, and pulled
   right back so it reads as texture rather than as a second headline. */
.ghost {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  font-weight: 700;
  line-height: 0.78;
  letter-spacing: -0.05em;
  font-size: clamp(4.5rem, 16vw, 14rem);
  white-space: nowrap;
}
.ghost--outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.08);
}
.ghost--outline-dark {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(19, 34, 41, 0.07);
}
.ghost--fill { color: rgba(19, 34, 41, 0.045); }
.section--navy .ghost--fill { color: rgba(255, 255, 255, 0.05); }
.ghost--bottom-left { left: calc(var(--gutter) * -0.25); bottom: -0.12em; }
.ghost--center { left: 50%; transform: translateX(-50%); top: 0.05em; }

/* Anything that must sit above a .ghost word. */
.layer { position: relative; z-index: 1; }

/* The "trail" — a hairline that fades out with a filled amber circle
   riding at its head. Doubles as the divider on service rows. */
.trail {
  position: relative;
  flex: 1 1 auto;
  min-width: 60px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(19, 34, 41, 0.12), rgba(19, 34, 41, 0));
}
.trail--reverse { background: linear-gradient(270deg, rgba(19, 34, 41, 0.12), rgba(19, 34, 41, 0)); }
/* Soft amber, not solid: on a service row this sits inches from the
   "Learn More" arrow, and two solid amber circles side by side would
   both read as the action. The soft chip stays decorative. */
.trail__icon {
  position: absolute;
  top: 50%;
  right: -6px;
  translate: 0 -50%;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--ink);
}
.trail__icon svg { width: 21px; height: 21px; }
.section--navy .trail { background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); }

/* --------------------------------------------------------------------------
   5. Buttons & the circular arrow affordance
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.8em 1.55em;
  min-height: 48px;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform var(--dur) var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

/* The primary CTA. Amber fill, charcoal label — 9:1, and the only solid
   amber element in the header. */
.btn-amber { background: var(--accent); color: var(--ink); }
.btn-amber:hover { background: var(--accent-strong); }

.btn-navy { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.btn-navy:hover { background: var(--ink-raised); border-color: var(--ink-raised); }

.btn-white { background: var(--surface); color: var(--ink); }
.btn-white:hover { background: var(--bg-sunken); }

.btn-outline { background: transparent; border-color: rgba(19, 34, 41, 0.22); color: var(--ink); }
.btn-outline:hover { background: var(--ink); border-color: var(--ink); color: var(--surface); }

.btn-outline-light { background: transparent; border-color: rgba(19, 34, 41, 0.18); color: var(--ink); }
.btn-outline-light:hover { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.section--navy .btn-outline-light,
.cta-simple .btn-outline-light,
.tile .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--surface);
}
.section--navy .btn-outline-light:hover,
.cta-simple .btn-outline-light:hover {
  background: var(--surface);
  border-color: var(--surface);
  color: var(--ink);
}

.btn-sm { padding: 0.5em 1.1em; min-height: 42px; font-size: var(--step--1); }
.btn-block { width: 100%; }

/* Inline text link with an arrow. The arrow itself becomes the circular
   affordance used consistently across cards and list rows. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--ink);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.link-arrow svg {
  width: 30px;
  height: 30px;
  padding: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.link-arrow:hover svg { background: var(--accent-strong); transform: translateX(3px); }

/* --------------------------------------------------------------------------
   6. Header / navigation
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -70px;
  z-index: 200;
  padding: 0.8rem 1.3rem;
  background: var(--accent);
  color: var(--ink);
  font-weight: 600;
  border-radius: var(--radius-pill);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 1rem; }

/* White navbar floating on the gray canvas. No border — the colour
   difference is the separation. */
.navbar {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.navbar.is-stuck {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 0 rgba(19, 34, 41, 0.06), var(--shadow-soft);
}
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
}

.brand { display: flex; align-items: center; flex: none; }
.brand img,
.brand .custom-logo {
  height: 38px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
}
@media (min-width: 640px) { .brand img, .brand .custom-logo { height: 44px; max-width: 230px; } }
@media (min-width: 1024px) { .brand img, .brand .custom-logo { height: 48px; max-width: 250px; } }

.nav-links { display: none; align-items: center; gap: 2.25rem; }
/* wp_nav_menu() wraps items in <ul class="menu">; the fallback emits bare
   <a>s. Flattening the list here means both render identically. */
.nav-links .menu { display: flex; align-items: center; gap: 2.25rem; }
.nav-links a {
  position: relative;
  padding-block: 0.5rem;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--muted);
  transition: color var(--dur) var(--ease);
}
/* Active state is a single amber dot — the same "one active thing" idea
   the cards use, at nav scale. */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateX(-50%) scale(0);
  transition: transform var(--dur) var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav-links a[aria-current="page"]::after { transform: translateX(-50%) scale(1); }

/* Sub-menus: the Services page has child pages, so a dropdown appears as
   soon as a real WordPress menu with depth is assigned. */
.nav-links .menu-item-has-children { position: relative; }
.nav-links .sub-menu {
  position: absolute;
  top: 100%;
  left: -1rem;
  min-width: 240px;
  padding: 0.5rem;
  margin-top: 0.85rem;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.nav-links .menu-item-has-children:hover > .sub-menu,
.nav-links .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-links .sub-menu a {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--muted);
}
.nav-links .sub-menu a::after { display: none; }
.nav-links .sub-menu a:hover { background: var(--bg); color: var(--ink); }

.nav-cta { display: none; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  background: var(--ink);
  border: 0;
  border-radius: 50%;
  color: var(--surface);
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-menu {
  display: none;
  flex-direction: column;
  padding: 0.25rem var(--gutter) 1.75rem;
  background: var(--surface);
  max-height: calc(100dvh - 5rem);
  overflow-y: auto;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu .menu { display: flex; flex-direction: column; }
.mobile-menu a {
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 0.85rem 0;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--bg-sunken);
}
.mobile-menu a[aria-current="page"] { font-weight: 700; }
.mobile-menu a[aria-current="page"]::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 0.65rem;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.mobile-menu .sub-menu { padding-left: 1rem; }
.mobile-menu .sub-menu a { font-size: var(--step--1); color: var(--muted); }
.mobile-menu .btn {
  margin-top: 1.35rem;
  border-bottom: 0;
  justify-content: center;
  color: var(--ink);
}

@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .mobile-menu { display: none !important; }
}

/* --------------------------------------------------------------------------
   7. Hero & page banners
   -------------------------------------------------------------------------- */

/* The home hero is a single white panel floated on the canvas, with the
   amber ribbon appearing below it as the signature graphic. */
.hero {
  position: relative;
  background: var(--bg);
  padding: clamp(1rem, 2.5vw, 2rem) var(--frame) clamp(2.5rem, 5vw, 4.5rem);
}
.hero > .container {
  position: relative;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  background: var(--surface);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.hero h1 {
  color: var(--ink);
  font-size: var(--step-hero);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-bottom: 0;
}
.hero p { color: var(--muted); }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.hero__figure {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 21 / 9;
}
@media (max-width: 639px) { .hero__figure { aspect-ratio: 16 / 10; } }
.hero__figure img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.02); }
/* Amber wash over the desaturated photo — ties the hero image to the
   accent, heavier at the lower-left corner and fading out to clear. */
.hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 161, 11, 0.55) 0%, rgba(255, 161, 11, 0.55) 100%);
  mix-blend-mode: multiply;
}

/* Interior page banner. Same panel language as the hero: a rounded
   surface on the canvas, charcoal type, photo (when set) desaturated
   behind a white scrim so the headline always holds. */
.banner {
  position: relative;
  background: var(--bg);
  padding: clamp(1rem, 2.5vw, 2rem) var(--frame) 0;
}
.banner > .container {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(230px, 26vw, 340px);
  padding: clamp(1.75rem, 4vw, 3.25rem);
  background: var(--surface);
  border-radius: var(--radius-xl);
  overflow: hidden;
  isolation: isolate;
}
/* The photograph, desaturated, with a white wash over it. */
.banner > .container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--banner-img, none) center / cover no-repeat;
  filter: grayscale(1) contrast(1.02);
}
.banner > .container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.88) 45%, rgba(255, 255, 255, 0.62) 100%);
}
/* With no photo set, the ribbon takes the right-hand side instead — so a
   fresh install still looks deliberate. */
.banner:not([style*="--banner-img"]) > .container::before {
  background: var(--wave-lines) right center / 62% 150% no-repeat;
  filter: none;
  opacity: 0.5;
}
.banner:not([style*="--banner-img"]) > .container::after {
  background: linear-gradient(90deg, var(--surface) 32%, rgba(255, 255, 255, 0) 78%);
}
.banner h1 { color: var(--ink); margin-bottom: 0.25em; }
.banner p { color: var(--muted); max-width: 54ch; margin-bottom: 0; }
.banner .eyebrow { color: var(--muted); }

.banner__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: end;
  width: 100%;
}
@media (min-width: 900px) {
  .banner__inner { grid-template-columns: 1.35fr 1fr; }
}
/* Right-hand jump list on the Services banner — a stack of pill rows. */
.banner__links { display: flex; flex-direction: column; gap: 0.4rem; }
@media (min-width: 900px) { .banner__links { align-items: flex-end; } }
.banner__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--bg);
  font-weight: 500;
  font-size: var(--step--1);
  color: var(--ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.banner__links a::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.banner__links a:hover { background: var(--accent); }

/* --------------------------------------------------------------------------
   8. Cards & service tiles
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.card h3 { margin-bottom: 0.4em; }
.card p { font-size: var(--step--1); margin-bottom: 0; }
/* .card--alt is the "quieter" card. On the gray canvas that still has to
   be a white surface or it disappears into the page; it is only on a
   white band that it inverts to a gray fill with no shadow. */
.card--alt { background: var(--surface); box-shadow: var(--shadow-soft); }
.section--gray .card--alt,
.values .card--alt { background: var(--bg); box-shadow: none; }
.section--gray .card--alt:hover,
.values .card--alt:hover { background: var(--surface); box-shadow: var(--shadow-lift); }

/* Thin-line icon in a soft amber chip. */
.card__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 1.15rem;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--ink);
  flex: none;
}
.card__icon svg { width: 24px; height: 24px; }

/* Card CTA: label plus the circular arrow affordance. */
.card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: auto;
  padding-top: 1.35rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
}
.card__link svg {
  width: 28px;
  height: 28px;
  padding: 6.5px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.card:hover .card__link svg { background: var(--accent-strong); transform: translateX(3px); }

/* --- The "one active item" rule -------------------------------------
   Within a group, exactly one card is solid amber and the rest stay
   white. Applied to the second item so the highlight lands inside the
   group rather than at its edge. Blog post cards are excluded — a
   featured-looking post that isn't featured would be misleading. */
.grid-3 > .card:nth-child(2):not(.post),
.grid-4 > .card:nth-child(2):not(.post),
.card--accent {
  background: var(--accent);
  box-shadow: none;
}
.grid-3 > .card:nth-child(2):not(.post):hover,
.grid-4 > .card:nth-child(2):not(.post):hover,
.card--accent:hover { background: var(--accent-strong); box-shadow: none; }
.grid-3 > .card:nth-child(2):not(.post),
.grid-4 > .card:nth-child(2):not(.post),
.card--accent { color: rgba(19, 34, 41, 0.82); }
.grid-3 > .card:nth-child(2):not(.post) h3,
.grid-4 > .card:nth-child(2):not(.post) h3,
.card--accent h3 { color: var(--ink); }
.grid-3 > .card:nth-child(2):not(.post) .card__icon,
.grid-4 > .card:nth-child(2):not(.post) .card__icon,
.card--accent .card__icon { background: rgba(255, 255, 255, 0.42); }
.grid-3 > .card:nth-child(2):not(.post) .card__link svg,
.grid-4 > .card:nth-child(2):not(.post) .card__link svg,
.card--accent .card__link svg { background: var(--surface); }
.grid-3 > .card:nth-child(2):not(.post) .bullets li::before,
.grid-4 > .card:nth-child(2):not(.post) .bullets li::before,
.card--accent .bullets li::before { background: var(--ink); }

/* --- Image tile: the four service cards on the home page -------------
   A white card with a desaturated photo on top and the label beneath.
   The photo is set inline as  style="--tile-img:url('…')"; with none set
   it falls back to the soft gray render. */
.tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 300px;
  aspect-ratio: 3 / 4;
  padding: 0;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  color: var(--ink);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.tile__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tile-img, var(--blob));
  background-size: cover;
  background-position: center center;
  filter: grayscale(1) contrast(1.02);
  transition: transform 600ms var(--ease), filter var(--dur) var(--ease);
}
.tile:hover .tile__bg { transform: scale(1.05); }
.tile__body {
  position: relative;
  width: 100%;
  padding: 1.15rem 1.25rem 1.35rem;
  background: var(--surface);
}
.tile h3 {
  color: var(--ink);
  font-size: 1.1rem;
  margin-bottom: 0.85rem;
  text-wrap: pretty;
}
.tile .btn {
  background: var(--bg);
  color: var(--ink);
  min-height: 38px;
  padding: 0.4em 1.5em;
  font-size: var(--step--2);
}
.tile:hover .btn { background: var(--accent); }

/* --------------------------------------------------------------------------
   9. Feature blocks
   -------------------------------------------------------------------------- */

/* --- Why choose us: stacked rows, exactly one of them amber ---------- */
.why {
  position: relative;
  padding-block: clamp(3.5rem, 6.5vw, 6rem);
  background: var(--bg);
  overflow: hidden;
}
.why h2 {
  color: var(--ink);
  text-align: center;
  max-width: 20ch;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.why__list { display: flex; flex-direction: column; gap: clamp(0.75rem, 1.6vw, 1.15rem); }
.why__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem 2.5rem;
  align-items: center;
  padding: clamp(1.4rem, 2.8vw, 2.15rem);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  color: var(--muted);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.why__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
/* The active row. */
.why__item:nth-child(2) {
  background: var(--accent);
  box-shadow: none;
  color: rgba(19, 34, 41, 0.82);
}
.why__item:nth-child(2):hover { box-shadow: none; }
.why__num {
  font-size: var(--step-stat);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.05em;
}
.why__item:nth-child(2) .why__num { color: var(--ink); }
.why__item h3 { color: var(--ink); margin-bottom: 0.35em; }
.why__item p { font-size: var(--step--1); margin-bottom: 0; }

@media (min-width: 780px) {
  .why__item { grid-template-columns: 160px 1fr; }
  /* Even rows mirror: copy left, numeral right. */
  .why__item:nth-child(even) { grid-template-columns: 1fr 160px; }
  .why__item:nth-child(even) .why__num { order: 2; text-align: right; }
  .why__item:nth-child(even) .why__body { order: 1; }
}

/* --- Vision / Mission pair ------------------------------------------- */
.vm { position: relative; }
.vm__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  min-height: 300px;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.vm__card h3 { position: relative; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; margin: 0; }
.vm__card p { position: relative; font-size: 1.0625rem; line-height: 1.6; margin: 0; }
.vm__card--vision { background: var(--accent); color: rgba(19, 34, 41, 0.82); }
.vm__card--vision h3 { color: var(--ink); }
.vm__card--mission {
  background: var(--ink-raised);
  color: rgba(255, 255, 255, 0.72);
  text-align: right;
}
.vm__card--mission h3 { color: var(--surface); }
/* The card's own ghost word. color:transparent is essential — without it
   the word inherits the card's text colour and covers the whole card. */
.vm__card .ghost {
  top: -0.06em;
  left: -0.02em;
  font-size: clamp(4rem, 11vw, 8rem);
  color: transparent;
}
.vm__card--vision .ghost { -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.45); }
.vm__card--mission .ghost { left: auto; right: -0.02em; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.10); }

/* --- Core values: gray tiles, thin-line icons, one active ------------ */
.values {
  position: relative;
  padding-block: clamp(3.5rem, 6.5vw, 6rem);
  background: var(--surface);
  overflow: hidden;
}
.values h2 { color: var(--ink); text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.value-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  min-height: 180px;
  padding: 1.75rem 1.25rem;
  text-align: center;
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.value-card:hover { transform: translateY(-4px); background: var(--bg-sunken); }
.value-card svg { width: 34px; height: 34px; color: var(--ink); stroke-width: 1.4; }
.value-card span { font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
.grid-3 > .value-card:nth-child(2),
.value-card--accent { background: var(--accent); }
.grid-3 > .value-card:nth-child(2):hover,
.value-card--accent:hover { background: var(--accent-strong); }

/* --- Service row: heading, trail rule, "Learn more" ------------------ */
.service-row { padding-block: clamp(2.25rem, 4.5vw, 3.5rem); }
.service-row + .service-row { border-top: 1px solid rgba(19, 34, 41, 0.08); }
.service-row__head {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}
.service-row__head h2 {
  color: var(--ink);
  font-size: clamp(1.5rem, 2.4vw, 2.15rem);
  margin: 0;
  flex: none;
  max-width: 15ch;
}
@media (max-width: 639px) {
  .service-row__head .trail { display: none; }
  .service-row__head { gap: 0.75rem; }
}
.service-row__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: start;
}
@media (min-width: 780px) { .service-row__body { grid-template-columns: 1fr 1fr; } }

/* --- Stat strip: oversized numerals as visual anchors ---------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.6rem, 1.4vw, 1rem);
}
@media (min-width: 780px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  background: var(--surface);
  padding: 1.6rem 1.35rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.stat__num {
  display: block;
  font-size: var(--step-stat);
  font-weight: 700;
  letter-spacing: -0.045em;
  color: var(--ink);
  line-height: 1;
}
.stat__label {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--step--2);
  font-weight: 400;
  color: var(--muted);
}
.stats > .stat:nth-child(2),
.stat--accent { background: var(--accent); box-shadow: none; }
.stats > .stat:nth-child(2) .stat__label,
.stat--accent .stat__label { color: rgba(19, 34, 41, 0.72); }
.section--navy .stat { background: var(--ink-raised); box-shadow: none; }
.section--navy .stat__num { color: var(--surface); }
.section--navy .stat__label { color: rgba(255, 255, 255, 0.6); }
.section--navy .stats > .stat:nth-child(2) { background: var(--accent); }
.section--navy .stats > .stat:nth-child(2) .stat__num { color: var(--ink); }
.section--navy .stats > .stat:nth-child(2) .stat__label { color: rgba(19, 34, 41, 0.72); }

/* --- Checklist ------------------------------------------------------- */
.checklist { display: flex; flex-direction: column; gap: 0.85rem; margin: 1.5rem 0; }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-weight: 500;
  color: var(--ink);
}
.checklist svg {
  width: 24px;
  height: 24px;
  flex: none;
  margin-top: 0.15em;
  padding: 5px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
}
.section--navy .checklist li { color: rgba(255, 255, 255, 0.84); }

/* --- Bulleted list inside body copy ---------------------------------- */
.bullets { display: flex; flex-direction: column; gap: 0.55rem; margin: 1rem 0 1.5rem; }
.bullets li { position: relative; padding-left: 1.35rem; }
.bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.section--navy .bullets li::before { background: var(--accent); }

/* --- Equipment / capability pills ------------------------------------ */
.pills { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.25rem; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.55em 1.1em;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink);
}
.pill svg { width: 14px; height: 14px; color: var(--accent); }
.section--navy .pill {
  background: var(--ink-raised);
  box-shadow: none;
  color: rgba(255, 255, 255, 0.86);
}

/* --------------------------------------------------------------------------
   10. Media placeholders
   Stand-ins until real project photography is uploaded — see README §8.
   The treatment is the soft monochrome "render" the imagery rule calls
   for, so a placeholder never looks like a broken asset.
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  background: var(--blob);
  background-size: cover;
  background-position: center;
  color: var(--ink);
}
.media__label {
  width: 100%;
  padding: 0.9rem 1.15rem;
  font-size: var(--step--3);
  letter-spacing: 0.02em;
  color: rgba(19, 34, 41, 0.55);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
}
.media--wide { aspect-ratio: 16 / 9; }
.media--tall { aspect-ratio: 3 / 4; }
.media--square { aspect-ratio: 1 / 1; }
.media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.02); }

/* The hero band is wider than any .media default and .media is declared
   later in this file, so restate it here at higher specificity. It also
   carries the signature amber ribbon while no photograph is set. */
.media.hero__figure {
  aspect-ratio: 21 / 9;
  background: var(--wave) center / cover no-repeat;
}
.media.hero__figure .media__label {
  color: rgba(19, 34, 41, 0.62);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
}
@media (max-width: 639px) { .media.hero__figure { aspect-ratio: 16 / 10; } }
/* Once a real photo is set via background-image, drop the label wash. */
.media[style*="background-image"] .media__label { background: linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)); }

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */
.form-card {
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.form-card--outlined { background: var(--surface); box-shadow: var(--shadow-lift); }
.form-card > h2 { color: var(--ink); margin-bottom: 1.5rem; }

.form-legend {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  margin: 2rem 0 0.3rem;
}
.form-legend:first-child { margin-top: 0; }
.form-legend + p { font-size: var(--step--1); padding-bottom: 0.85rem; border-bottom: 1px solid var(--line); }

.form-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 640px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .field--full { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.field .req { color: var(--danger); margin-left: 0.15em; }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1.05rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.field input::placeholder,
.field textarea::placeholder { color: var(--muted-soft); opacity: 1; }
.field select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23132229' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 161, 11, 0.25);
}
.field-error { font-size: var(--step--3); color: var(--error-fg); }
.field-error:empty { display: none; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--error-fg); }

.form-status {
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  font-weight: 500;
}
.form-status.success { background: var(--success-bg); color: var(--success-fg); }
.form-status.error { background: var(--error-bg); color: var(--error-fg); }

/* Forms sitting inside a white band get the canvas gray instead, so the
   card still reads as a floated surface. */
.section--gray .form-card { background: var(--bg); box-shadow: none; }
.section--gray .field input,
.section--gray .field select,
.section--gray .field textarea { background: var(--surface); }

/* --------------------------------------------------------------------------
   12. Contact blocks
   -------------------------------------------------------------------------- */
.contact-list { display: flex; flex-direction: column; gap: 0.75rem; }
.contact-list a,
.contact-list li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.2rem;
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  font-weight: 500;
  color: var(--ink);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.contact-list a:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.contact-list svg {
  width: 34px;
  height: 34px;
  padding: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--ink);
}

/* Amber address card — the "active" block of the contact page. */
.address-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 280px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  color: rgba(19, 34, 41, 0.82);
  background: var(--accent);
}
/* A photo, when one is set, sits behind the amber as a monochrome ground. */
.address-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--card-img, none) center / cover no-repeat;
  filter: grayscale(1);
  opacity: 0.22;
}
.address-card h3 { color: var(--ink); font-size: 1.05rem; margin-bottom: 0.85rem; }
.address-card p { font-size: 1.0625rem; font-weight: 500; line-height: 1.5; margin-bottom: 1.1rem; color: var(--ink); }
.address-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  font-size: var(--step--1);
  font-weight: 500;
}
.address-card__meta span,
.address-card__meta a { display: inline-flex; align-items: center; gap: 0.5em; }
.address-card__meta svg { width: 16px; height: 16px; flex: none; }

.person-card {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.person-card h3 { margin-bottom: 0.9rem; font-size: 1.05rem; }
.person-card + .person-card { margin-top: 1rem; }
.person-card ul { display: flex; flex-direction: column; gap: 0.55rem; font-size: var(--step--1); }
.person-card li { display: flex; align-items: center; gap: 0.7rem; color: var(--ink); }
.person-card svg { width: 16px; height: 16px; flex: none; color: var(--accent); }

/* The map is imagery too — desaturated at rest, colour on interaction. */
.map-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.map-frame iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--dur) var(--ease);
}
.map-frame:hover iframe,
.map-frame:focus-within iframe { filter: none; }

/* --------------------------------------------------------------------------
   13. CTA moments
   Both carry the signature ribbon — the hero, this band and the simple
   CTA are the three places the motif appears.
   -------------------------------------------------------------------------- */
.cta-band {
  background: var(--bg);
  padding: clamp(2rem, 4vw, 3.5rem) var(--frame);
}
.cta-band > .container {
  position: relative;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--wave) center / cover no-repeat, var(--accent);
  color: rgba(19, 34, 41, 0.8);
}
.cta-band__row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem 2.5rem;
  align-items: center;
  padding-block: clamp(1.1rem, 2.2vw, 1.75rem);
}
.cta-band__row + .cta-band__row { border-top: 1px solid rgba(19, 34, 41, 0.18); }
@media (min-width: 780px) { .cta-band__row { grid-template-columns: 230px 1fr; } }
/* Charcoal on amber, not white on amber: white here measures 1.9:1 and is
   unreadable outdoors. Charcoal gives 9:1 and matches the wordmark. */
.cta-band__label {
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.35;
  color: rgba(19, 34, 41, 0.72);
}
.cta-band__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: clamp(1.65rem, 4.2vw, 2.85rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.cta-band__link svg {
  width: clamp(42px, 6vw, 56px);
  height: clamp(42px, 6vw, 56px);
  padding: clamp(11px, 1.6vw, 15px);
  flex: none;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  transition: transform var(--dur) var(--ease);
}
.cta-band__link:hover svg { transform: translateX(6px); }

/* Simple centred CTA at the foot of blog posts and service pages. */
.cta-simple {
  position: relative;
  background: var(--bg);
  padding: clamp(2rem, 4vw, 3.5rem) var(--frame);
  text-align: center;
}
.cta-simple > .container {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4.25rem) clamp(1.5rem, 4vw, 3.25rem);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.72);
}
.cta-simple > .container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wave-lines) center bottom / 130% 90% no-repeat;
  opacity: 0.28;
  pointer-events: none;
}
.cta-simple h2,
.cta-simple p,
.cta-simple .btn { position: relative; }
.cta-simple h2 { color: var(--surface); max-width: 20ch; margin-inline: auto; }
.cta-simple p { max-width: 56ch; margin-inline: auto; }
.cta-simple .btn { margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   14. Footer
   The single sustained charcoal surface on the site — it closes the page
   the way the ink sections punctuate it.
   -------------------------------------------------------------------------- */
.footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.66);
  padding-block: clamp(3rem, 5vw, 4.5rem) 0;
  font-size: var(--step--1);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 720px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }

.footer h4 {
  color: var(--surface);
  font-size: var(--step--3);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.35rem;
}
.footer__logo img { height: 50px; width: auto; max-width: 220px; object-fit: contain; margin-bottom: 1.25rem; }
.footer__tagline { max-width: 34ch; color: rgba(255, 255, 255, 0.55); }
.footer ul { display: flex; flex-direction: column; gap: 0.65rem; }
.footer a { color: rgba(255, 255, 255, 0.66); transition: color var(--dur) var(--ease); }
.footer a:hover { color: var(--surface); }
.footer a[aria-current="page"] { color: var(--surface); }
.footer__contact li { display: flex; align-items: flex-start; gap: 0.75rem; }
.footer__contact svg { width: 17px; height: 17px; flex: none; margin-top: 0.25em; color: var(--accent); }

/* On phones the Quick Links and Our Services lists read better as wrapping
   rows than tall single columns. The contact list keeps its icon+text rows. */
@media (max-width: 719px) {
  .footer ul:not(.footer__contact) {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.65rem 1.5rem;
  }
}

.footer__bottom {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-block: 1.35rem;
  border-top: 1px solid var(--line-ink);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: var(--step--3);
  color: rgba(255, 255, 255, 0.45);
}

/* Back to top — the same circular affordance as every other arrow. */
.to-top {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 80;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--accent-strong); }
.to-top svg { width: 19px; height: 19px; }

/* --------------------------------------------------------------------------
   15. Blog
   Typography here is scoped to the blog body classes only, so hand-built
   pages (Home, About, Services…) keep full control of their own markup.
   -------------------------------------------------------------------------- */
/* Bleeds to the card's edges, so the negative margin has to track the
   card's own fluid padding exactly. */
.card__thumb {
  aspect-ratio: 16 / 10;
  margin: calc(-1 * clamp(1.5rem, 2.4vw, 2.1rem)) calc(-1 * clamp(1.5rem, 2.4vw, 2.1rem)) 1.35rem;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}
.card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.02);
  transition: transform 600ms var(--ease), filter var(--dur) var(--ease);
}
.card:hover .card__thumb img { transform: scale(1.04); filter: grayscale(0.35); }

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.6em;
  font-size: var(--step--3);
  color: var(--muted);
}
.post-meta a { font-weight: 600; color: var(--accent-ink); }
.post-meta--light { color: var(--muted); }
.post-meta--light a { color: var(--accent-ink); }

.tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 2rem 0; }
.tag {
  padding: 0.4em 1em;
  border-radius: var(--radius-pill);
  background: var(--bg-sunken);
  font-size: var(--step--3);
  font-weight: 500;
  color: var(--ink);
  transition: background var(--dur) var(--ease);
}
.tag:hover { background: var(--accent); }

.pagination { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.pagination a { font-weight: 600; color: var(--ink); }
.pagination a:hover { color: var(--accent-ink); }

.post-nav { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav__link { display: flex; flex-direction: column; gap: 0.3em; }
.post-nav__link--next { text-align: right; align-items: flex-end; }
.post-nav__label {
  font-size: var(--step--3);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.post-nav__title { font-weight: 600; color: var(--ink); }
.post-nav__link:hover .post-nav__title { color: var(--accent-ink); }

.rule { height: 1px; background: rgba(19, 34, 41, 0.08); margin-block: 2.5rem; }

:where(.blog, .archive, .search, .search-results, .single-post) .entry-content > *:first-child { margin-top: 0; }
:where(.blog, .archive, .search, .search-results, .single-post) .entry-content p { margin: 0 0 1.15em; line-height: 1.75; }
:where(.blog, .archive, .search, .search-results, .single-post) .entry-content h2 { margin-top: 1.6em; }
:where(.blog, .archive, .search, .search-results, .single-post) .entry-content h3 { margin-top: 1.4em; }
:where(.blog, .archive, .search, .search-results, .single-post) .entry-content a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
:where(.blog, .archive, .search, .search-results, .single-post) .entry-content ul,
:where(.blog, .archive, .search, .search-results, .single-post) .entry-content ol { margin: 0 0 1.5em; }
:where(.blog, .archive, .search, .search-results, .single-post) .entry-content ul li {
  position: relative;
  padding-left: 1.45rem;
  margin-bottom: 0.55rem;
}
:where(.blog, .archive, .search, .search-results, .single-post) .entry-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
:where(.blog, .archive, .search, .search-results, .single-post) .entry-content ol { counter-reset: civonex-ol; }
:where(.blog, .archive, .search, .search-results, .single-post) .entry-content ol li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.55rem;
  counter-increment: civonex-ol;
}
:where(.blog, .archive, .search, .search-results, .single-post) .entry-content ol li::before {
  content: counter(civonex-ol) ".";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--ink);
}
:where(.blog, .archive, .search, .search-results, .single-post) .entry-content img {
  border-radius: var(--radius);
  margin: 1.75em 0;
  filter: grayscale(1) contrast(1.02);
}
:where(.blog, .archive, .search, .search-results, .single-post) .entry-content blockquote {
  margin: 1.75em 0;
  padding: 1.35em 1.5em;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink);
}
/* Buttons pasted into blog content must not pick up the link underline. */
.entry-content a.btn,
.entry-content a.card__link,
.entry-content a.link-arrow { text-decoration: none; }

/* --------------------------------------------------------------------------
   16. Motion & utilities
   -------------------------------------------------------------------------- */
/* Scroll reveal is scoped under .js-reveal, a class main.js adds to <html>
   as its first action. If that script is ever blocked or fails, the hidden
   state never applies and content stays visible — it fails open. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
.js-reveal .reveal--d1 { transition-delay: 90ms; }
.js-reveal .reveal--d2 { transition-delay: 180ms; }
.js-reveal .reveal--d3 { transition-delay: 270ms; }

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.max-w-copy { max-width: 66ch; }
.max-w-title { max-width: 20ch; }
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: 1rem; }
.mt-md { margin-top: 1.75rem; }
.mt-lg { margin-top: clamp(2rem, 4vw, 3rem); }
.mb-lg { margin-bottom: clamp(2rem, 4vw, 3rem); }
.stack > * + * { margin-top: 1rem; }

/* Comfortable tap targets on phones and tablets. Text links that sit in a
   list — banner jump links, contact rows, footer nav — are only ~26px tall
   from line-height alone, which is fiddly to hit accurately on a phone
   even though it clears the WCAG 2.5.8 minimum of 24px. */
@media (max-width: 899px) {
  .banner__links a,
  .link-arrow,
  .address-card__meta a,
  .person-card a,
  .footer li a,
  .contact-list a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .footer li,
  .footer__contact li { align-items: center; }
}

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

.admin-bar .navbar { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .navbar { top: 46px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js-reveal .reveal { opacity: 1; transform: none; }
}

@media print {
  .navbar, .footer, .to-top, .cta-band, .cta-simple { display: none !important; }
  body { color: #000; background: #fff; }
  .card, .tile, .why__item, .stat, .form-card { box-shadow: none !important; }
}