/* ==========================================================================
   Vachellia Investments (Pty) Ltd. Design System
   Hand-written CSS. No build step. No frameworks.
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Typography (one heading system, used everywhere)
   4.  Layout primitives
   5.  Motion / reveal
   6.  Buttons & links
   7.  Header / navigation
   8.  Home hero (rotating background)
   9.  Page hero (inner pages)
   10. Feature blocks (About, Philosophy)
   11. Capabilities (Our Services)
   12. Why Vachellia
   13. Team & board
   14. Values
   15. Contact
   16. Call to action band
   17. Footer
   18. Coming soon + 404
   19. Responsive refinements
   20. Accessibility & print
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* --- Brand colours, sampled from the supplied logo artwork --- */
  --ink:            #003B4A;   /* Wordmark petrol teal, primary */
  --ink-deep:       #002732;   /* Darkest shade, footer and dark grounds */
  --ink-soft:       #0C4750;   /* Mid gradient step */
  --forest:         #235C4E;   /* Green end of the logo gradient */
  --forest-light:   #2F7462;
  --forest-glow:    #63B99B;   /* Accent on dark grounds (AA on --ink) */

  /* --- Neutrals --- */
  --paper:          #FBFAF8;
  --paper-2:        #F4F2ED;
  --paper-3:        #E9E6DF;
  --white:          #FFFFFF;

  /* --- Text --- */
  --text:           #14282F;
  --text-muted:     #55686E;
  --text-on-dark:   rgba(255, 255, 255, 0.80);
  --text-on-dark-2: rgba(255, 255, 255, 0.64);

  /* --- Hairlines --- */
  --line:           rgba(0, 59, 74, 0.13);
  --line-strong:    rgba(0, 59, 74, 0.24);
  --line-on-dark:   rgba(255, 255, 255, 0.16);
  --line-on-dark-2: rgba(255, 255, 255, 0.10);

  /* --- Brand ground --- */
  --grad-brand: linear-gradient(120deg, var(--ink-deep) 0%, var(--ink) 48%, var(--forest) 120%);

  /* --- Type --- */
  --font-display: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* --- Spacing rhythm (8px base) --- */
  --sp-1:  0.5rem;
  --sp-2:  1rem;
  --sp-3:  1.5rem;
  --sp-4:  2rem;
  --sp-5:  2.75rem;
  --sp-6:  3.5rem;
  --sp-7:  5rem;
  --section-y: clamp(4.75rem, 9.5vw, 9rem);
  --gutter:    clamp(1.25rem, 5vw, 3rem);
  --measure:   66ch;

  /* --- Shell --- */
  --max:        1280px;
  --max-narrow: 900px;
  --radius:     2px;
  --radius-lg:  3px;

  /* --- Motion --- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:    180ms;
  --t-mid:     320ms;

  /* Header carries a larger logo lockup than Phase 1. */
  --header-h: 102px;
  --header-h-stuck: 82px;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.905rem + 0.14vw, 1.0625rem);
  line-height: 1.68;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: #fff; }

/* ==========================================================================
   3. TYPOGRAPHY

   One heading system for the whole site.

   .h-display  the homepage hero headline, and nothing else. The single
               deliberate step above the section scale.
   .h-section  EVERY major section title and every inner-page title, on every
               page, at exactly the same size, weight, tracking and leading.
               Only the colour changes with the ground it sits on.
   .h-sub      third-level headings inside a section.
   .eyebrow    the standardised section label (ABOUT US, OUR SERVICES …).
               No rules, no dashes, no decorative marks: the label alone.
   ========================================================================== */

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}

/* 40px phone → 54px at 1280 → 68px at 1920 */
.h-display {
  font-size: clamp(2.5rem, 1.35rem + 2.45vw, 4.25rem);
  line-height: 1.03;
  letter-spacing: -0.036em;
  font-weight: 300;
}

/* 30px phone → 40px at 1280 → 47px at 1920. One size, site-wide. */
.h-section {
  font-size: clamp(1.875rem, 1.36rem + 1.36vw, 2.95rem);
  line-height: 1.08;
  letter-spacing: -0.032em;
  font-weight: 300;
  margin-bottom: var(--sp-3);
}

.h-sub {
  font-size: clamp(1.18rem, 1rem + 0.46vw, 1.45rem);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.022em;
}

h3 {
  font-size: clamp(1.06rem, 1rem + 0.16vw, 1.2rem);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.34;
}

p { text-wrap: pretty; }

/* Running prose is justified. Hyphenation is not optional here: without it a
   justified column this narrow opens rivers of white space between words on
   the lines that have to stretch. Headings, labels, buttons, fact rows, cards
   and the footer stay ragged-right, where a flush edge would fight the
   layout rather than help it. */
.lead,
.body-copy,
.person__bio,
.value__body,
.hero__copy {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.lead {
  font-size: clamp(1rem, 0.925rem + 0.19vw, 1.15rem);
  line-height: 1.66;
  color: var(--text-muted);
  max-width: 56ch;
}

.body-copy { color: var(--text-muted); max-width: var(--measure); }
.body-copy + .body-copy { margin-top: 1.15em; }

/* The section label. Normal capitalisation, not all caps. Identical
   treatment on every page and on every ground; only the colour changes. */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--forest);
  margin-bottom: var(--sp-3);
}
.eyebrow--on-dark { color: var(--forest-glow); }

.on-dark { color: var(--text-on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }

/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: var(--max-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--paper-2 { background: var(--paper-2); }
.section--tight { padding-block: clamp(3.5rem, 7vw, 6.5rem); }

.head-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: end;
  margin-bottom: clamp(2.75rem, 5.5vw, 5rem);
}
@media (min-width: 900px) {
  .head-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.82fr); gap: var(--sp-7); }
  .head-split > :last-child { padding-bottom: 0.45rem; }
}
.head-split .h-section { margin-bottom: 0; }

/* A section head carrying no supporting paragraph. One column at full width,
   so a long title is not forced to break where the two-column head would
   otherwise wrap it. Same bottom margin as .head-split, so removing a lead
   paragraph does not change the rhythm of the page. */
.head-plain { margin-bottom: clamp(2.75rem, 5.5vw, 5rem); }
.head-plain .h-section { margin-bottom: 0; }

/* Centred section head, used where a grid sits below it */
.head-centre {
  max-width: 62ch;
  margin: 0 auto clamp(2.75rem, 5.5vw, 5rem);
  text-align: center;
}
.head-centre .lead { margin-inline: auto; }
.head-centre .h-section { margin-bottom: var(--sp-3); }

/* ==========================================================================
   5. MOTION / REVEAL
   Fade and rise only. Nothing spins, nothing bounces, nothing loops except
   the hero background.
   ========================================================================== */

:root {
  --reveal-y: 16px;
  --reveal-dur: 620ms;
  --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 1000px) {
  :root { --reveal-y: 24px; --reveal-dur: 900ms; }
}

/* Content is only hidden when scripting is available to bring it back. */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-y), 0);
  transition:
    opacity var(--reveal-dur) var(--ease-reveal),
    transform var(--reveal-dur) var(--ease-reveal);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Quietest variant: materialise in place. For labels and eyebrows. */
[data-reveal='fade'] { --reveal-y: 0px; }

/* Photographs settle out of a slight over-scale. */
[data-reveal='zoom'] { --reveal-y: 12px; }
[data-reveal='zoom'] img {
  transform: scale(1.06);
  transition: transform calc(var(--reveal-dur) * 1.6) var(--ease-reveal);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal='zoom'].is-visible img { transform: scale(1); }

/* ==========================================================================
   6. BUTTONS & LINKS
   ========================================================================== */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.82rem 1.65rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    background-color var(--t-mid) var(--ease-soft),
    border-color var(--t-mid) var(--ease-soft),
    color var(--t-mid) var(--ease-soft);
}
.btn svg { flex: none; transition: transform var(--t-mid) var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn:hover { --btn-bg: var(--forest); --btn-bd: var(--forest); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong); }
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); }

.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }
.btn--light:hover { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: #fff; }

.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,0.42); }
.btn--outline-light:hover { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: var(--sp-4); }

/* Text link with a hairline underline that stays put and changes colour */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-strong);
  transition: color var(--t-mid) var(--ease-soft), border-color var(--t-mid) var(--ease-soft);
}
.link svg { transition: transform var(--t-mid) var(--ease-out); }
.link:hover { color: var(--forest); border-color: var(--forest); }
.link:hover svg { transform: translateX(3px); }

.link--on-dark { color: #fff; border-color: var(--line-on-dark); }
.link--on-dark:hover { color: var(--forest-glow); border-color: var(--forest-glow); }

/* ==========================================================================
   7. HEADER / NAVIGATION

   Three-column grid: logo left, navigation centred in the header, the burger
   in the right column. On desktop the right column is empty, which puts the
   navigation on the true centre line of the page. Spacing between items is a
   single value, so every gap is identical.
   ========================================================================== */

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  padding: 0.8rem 1.2rem;
  background: var(--ink);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--radius);
  transition: top var(--t-fast) var(--ease-soft);
}
.skip-link:focus { top: 1rem; }

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition:
    background-color var(--t-mid) var(--ease-soft),
    height var(--t-mid) var(--ease-soft);
}

.header::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--line);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease-soft);
}

.header.is-stuck {
  background: rgba(251, 250, 248, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  height: var(--header-h-stuck);
}
.header.is-stuck::after { opacity: 1; }

/* Pages without a photographic hero start in the solid state */
.header--solid {
  background: rgba(251, 250, 248, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}
.header--solid::after { opacity: 1; }

.header .shell {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
}
@media (min-width: 960px) {
  .header .shell { grid-template-columns: 1fr auto 1fr; }
}

.brand { display: block; line-height: 0; border-radius: 2px; justify-self: start; }
.brand img {
  width: auto;
  height: 66px;
  transition: height var(--t-mid) var(--ease-soft);
}
.header.is-stuck .brand img { height: 54px; }

/* Two lockups: white over the photographic hero, full colour once scrolled */
.brand__mark--light { display: block; }
.brand__mark--dark  { display: none; }
.header.is-stuck .brand__mark--light,
.header--solid .brand__mark--light { display: none; }
.header.is-stuck .brand__mark--dark,
.header--solid .brand__mark--dark { display: block; }

.nav { display: none; }

@media (min-width: 960px) {
  .nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.6rem, 2.6vw, 2.6rem);
    grid-column: 2;
  }
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.012em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.88);
  padding: 0.45rem 0;
  transition: color var(--t-mid) var(--ease-soft);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid) var(--ease-out);
}
.nav__link:hover::after,
.nav__link[aria-current='page']::after { transform: scaleX(1); }
.nav__link:hover { color: #fff; }

.header.is-stuck .nav__link,
.header--solid .nav__link { color: var(--text-muted); }
.header.is-stuck .nav__link:hover,
.header--solid .nav__link:hover,
.header.is-stuck .nav__link[aria-current='page'],
.header--solid .nav__link[aria-current='page'] { color: var(--ink); }

/* The one navigation item with a submenu. It opens on hover and, so it is
   reachable without a mouse, on focus within: the parent link takes focus
   first, which reveals the two pages beneath it in tab order. No JavaScript
   is involved, and with the stylesheet absent the markup is still two links. */
.nav__item { position: relative; display: inline-flex; align-items: center; }

.nav__link--parent { gap: 0.42rem; }
.nav__chev { flex: none; transition: transform var(--t-fast) var(--ease-soft); }
.nav__item:hover .nav__chev,
.nav__item:focus-within .nav__chev { transform: rotate(180deg); }

/* The parent underlines while the visitor is on either page beneath it. */
.nav__link.is-section::after { transform: scaleX(1); }
.header.is-stuck .nav__link.is-section,
.header--solid .nav__link.is-section { color: var(--ink); }

.nav__menu {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 50%;
  translate: -50% 0;
  min-width: 226px;
  padding: 0.45rem 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-mid) var(--ease-soft),
              transform var(--t-mid) var(--ease-soft),
              visibility var(--t-mid) var(--ease-soft);
}
/* Bridges the gap between the link and the panel so the pointer can cross it
   without the panel closing underneath it. */
.nav__menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -0.55rem;
  height: 0.55rem;
}
.nav__item:hover .nav__menu,
.nav__item:focus-within .nav__menu { opacity: 1; visibility: visible; transform: none; }

.nav__sublink {
  display: block;
  padding: 0.62rem 1.2rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--text-muted);
  transition: background-color var(--t-fast) var(--ease-soft),
              color var(--t-fast) var(--ease-soft);
}
.nav__sublink:hover,
.nav__sublink[aria-current='page'] { background: var(--paper-2); color: var(--ink); }

/* The same two pages in the mobile overlay, indented under their parent
   rather than hidden behind a control that has to be found and tapped. */
.mobile-nav__sub { padding: 0 0 0.9rem calc(var(--sp-2) + 2px); }
.mobile-nav__sublink {
  display: block;
  padding: 0.42rem 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.012em;
  color: var(--text-on-dark-2);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out),
              color var(--t-fast) var(--ease-soft);
}
body.menu-open .mobile-nav__sublink { opacity: 1; transform: none; transition-delay: 265ms; }
.mobile-nav__sublink:hover,
.mobile-nav__sublink[aria-current='page'] { color: var(--forest-glow); }

/* Burger */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 10px;
  background: none;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius);
  grid-column: 3;
  justify-self: end;
}
@media (min-width: 960px) { .burger { display: none; } }

.burger span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  transition: transform var(--t-mid) var(--ease-out), opacity var(--t-fast) linear, background-color var(--t-mid) var(--ease-soft);
}
.burger span:last-child { width: 68%; align-self: flex-end; }

.header.is-stuck .burger span,
.header--solid .burger span { background: var(--ink); }

body.menu-open .burger span { background: #fff; }
body.menu-open .burger span:first-child { transform: translateY(6.5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:last-child { width: 100%; transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile overlay menu */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--ink);
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t-mid) var(--ease-soft), transform var(--t-mid) var(--ease-out), visibility 0s linear var(--t-mid);
  overflow-y: auto;
}
body.menu-open .mobile-nav {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.mobile-nav__list { display: flex; flex-direction: column; }
.mobile-nav__list > li { border-bottom: 1px solid var(--line-on-dark-2); }

.mobile-nav__link {
  display: block;
  padding: 1.05rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.6rem);
  font-weight: 300;
  letter-spacing: -0.028em;
  color: #fff;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out), color var(--t-fast) var(--ease-soft);
}
body.menu-open .mobile-nav__link { opacity: 1; transform: none; }
body.menu-open .mobile-nav__list > li:nth-child(1) .mobile-nav__link { transition-delay: 60ms; }
body.menu-open .mobile-nav__list > li:nth-child(2) .mobile-nav__link { transition-delay: 105ms; }
body.menu-open .mobile-nav__list > li:nth-child(3) .mobile-nav__link { transition-delay: 150ms; }
body.menu-open .mobile-nav__list > li:nth-child(4) .mobile-nav__link { transition-delay: 195ms; }
body.menu-open .mobile-nav__list > li:nth-child(5) .mobile-nav__link { transition-delay: 240ms; }
.mobile-nav__link:hover,
.mobile-nav__link[aria-current='page'] { color: var(--forest-glow); }

.mobile-nav__foot {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-on-dark-2);
  color: var(--text-on-dark-2);
  font-size: 0.82rem;
  display: grid;
  gap: 0.4rem;
}
.mobile-nav__foot a:hover { color: #fff; }

body.menu-open { overflow: hidden; }

/* ==========================================================================
   8. HOME HERO (rotating background)

   Three photographs cross-fade on a 27 second loop, nine seconds each, with
   a slow Ken Burns move while each one is on screen. Driven entirely by CSS
   keyframes, so it runs on the compositor and works with JavaScript off.
   The headline, copy and buttons never move.
   ========================================================================== */

.hero {
  position: relative;
  min-height: min(92svh, 880px);
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 4rem));
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  background: var(--ink-deep);
  overflow: hidden;
  isolation: isolate;
}

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

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  animation: heroFade 27s linear infinite;
}
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1.05);
}

.hero__slide--1 { animation-delay: 0s; }
.hero__slide--2 { animation-delay: 9s; }
.hero__slide--3 { animation-delay: 18s; }

/* Each photograph is framed so its subject sits clear of the headline
   column on the left. */
.hero__slide--1 img { object-position: 50% 36%; }
.hero__slide--2 img { object-position: 34% 46%; }
.hero__slide--3 img { object-position: 58% 50%; }

.hero__slide--1 img { animation: heroKenA 27s linear infinite 0s; }
.hero__slide--2 img { animation: heroKenB 27s linear infinite 9s; }
.hero__slide--3 img { animation: heroKenC 27s linear infinite 18s; }

/* Visible for nine seconds, with a 1.5s fade at each end. */
@keyframes heroFade {
  0%     { opacity: 0; }
  5.5%   { opacity: 1; }
  33.3%  { opacity: 1; }
  38.9%  { opacity: 0; }
  100%   { opacity: 0; }
}

/* Each move resets at 40%, by which point the slide is fully faded out.
   Scale headroom always exceeds the travel, so no edge is ever exposed. */
@keyframes heroKenA {
  0%      { transform: scale(1.05) translate3d(0, 0, 0); }
  40%     { transform: scale(1.15) translate3d(0, -1.5%, 0); }
  40.01%  { transform: scale(1.05) translate3d(0, 0, 0); }
  100%    { transform: scale(1.05) translate3d(0, 0, 0); }
}
@keyframes heroKenB {
  0%      { transform: scale(1.16) translate3d(0.8%, 0, 0); }
  40%     { transform: scale(1.06) translate3d(0, 0, 0); }
  40.01%  { transform: scale(1.16) translate3d(0.8%, 0, 0); }
  100%    { transform: scale(1.16) translate3d(0.8%, 0, 0); }
}
@keyframes heroKenC {
  0%      { transform: scale(1.06) translate3d(-1.2%, 0, 0); }
  40%     { transform: scale(1.15) translate3d(1.2%, 0.6%, 0); }
  40.01%  { transform: scale(1.06) translate3d(-1.2%, 0, 0); }
  100%    { transform: scale(1.06) translate3d(-1.2%, 0, 0); }
}

/* Refined scrim. Dark enough for AA text contrast, light enough that the
   photograph is still legible as a photograph. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(0, 39, 50, 0.88) 0%, rgba(0, 39, 50, 0.78) 36%, rgba(0, 39, 50, 0.30) 74%, rgba(0, 39, 50, 0.14) 100%),
    linear-gradient(180deg, rgba(0, 39, 50, 0.48) 0%, rgba(0, 39, 50, 0.18) 34%, rgba(0, 39, 50, 0.28) 72%, rgba(0, 39, 50, 0.64) 100%);
}

.hero__inner { position: relative; width: 100%; }

.hero__eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.86);
  margin-bottom: var(--sp-3);
}

.hero h1 {
  color: #fff;
  max-width: 17ch;
  margin-bottom: var(--sp-3);
}
.hero h1 em { font-style: normal; color: #A9D8C4; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 em {
    background: linear-gradient(96deg, #ffffff 8%, #A9D8C4 92%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.hero__copy {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(0.97rem, 0.9rem + 0.18vw, 1.1rem);
  line-height: 1.72;
  max-width: 62ch;
}

.hero .btn-row { margin-top: var(--sp-5); }

/* ==========================================================================
   9. PAGE HERO (About, Services, Team, Contact)

   No photography: the brand ground, generous space and the same heading
   system as every section title on the site.
   ========================================================================== */

.page-hero {
  position: relative;
  background: var(--grad-brand);
  color: var(--text-on-dark);
  padding-top: calc(var(--header-h) + clamp(3rem, 6vw, 5.5rem));
  padding-bottom: clamp(3.25rem, 6vw, 5.5rem);
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 60vw;
  height: 60vw;
  min-width: 460px;
  min-height: 460px;
  right: -14vw;
  top: -26vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 185, 155, 0.16) 0%, rgba(99, 185, 155, 0) 66%);
}
.page-hero .h-section { color: #fff; max-width: 20ch; margin-bottom: var(--sp-3); }
/* Nothing follows the title on some pages, where its own margin would only
   leave a gap. */
.page-hero .h-section:last-child { margin-bottom: 0; }
/* A title set to hold one line needs the full measure, not the 20ch that keeps
   a title stacked above a paragraph from running too wide to read. */
.page-hero--wide .h-section { max-width: none; }
.page-hero .lead { color: var(--text-on-dark); max-width: 62ch; }
.page-hero .eyebrow { color: var(--forest-glow); }

/* ==========================================================================
   10. FEATURE BLOCKS (a photograph beside a body of text)
   ========================================================================== */

.feature__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 960px) {
  .feature__grid {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: clamp(3.5rem, 7vw, 6.5rem);
  }
  .feature__grid--reverse { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
  .feature__grid--reverse > .figure { order: 2; }
}

.figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--paper-3);
}
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure--tall { aspect-ratio: 4 / 5; }
.figure--wide { aspect-ratio: 16 / 10; }
.figure--square { aspect-ratio: 1; }

/* A short statement given room, used once per page at most */
.statement {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 0.62vw, 1.72rem);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.026em;
  color: var(--ink);
  max-width: 34ch;
}

/* A bordered list of short facts */
.facts { border-top: 1px solid var(--line); margin-top: var(--sp-5); }
.facts__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 560px) {
  .facts__row { grid-template-columns: 180px 1fr; gap: 1.5rem; align-items: baseline; }
}
.facts__k {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.facts__v { margin: 0; font-size: 0.95rem; color: var(--ink); }

/* ==========================================================================
   11. CAPABILITIES (Our Services)
   Two columns on desktop so each description has room to breathe. Hairline
   cell borders rather than floating cards: no shadows, no heavy rounding.
   ========================================================================== */

.capabilities {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}
@media (min-width: 760px) { .capabilities { grid-template-columns: repeat(2, 1fr); } }

.capability {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 3.4vw, 3.25rem) clamp(1.5rem, 2.6vw, 2.75rem);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--t-mid) var(--ease-soft);
}
@media (min-width: 760px) {
  .capability:nth-child(odd) { border-right: 1px solid var(--line); }
}
.capability:hover { background: var(--white); }

.capability__icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--sp-3);
  color: var(--ink);
  transition: color var(--t-mid) var(--ease-soft);
}
.capability:hover .capability__icon { color: var(--forest); }

.capability h3 {
  font-size: clamp(1.1rem, 1rem + 0.3vw, 1.3rem);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.7rem;
}
.capability p {
  font-size: clamp(0.9rem, 0.87rem + 0.08vw, 0.96rem);
  line-height: 1.68;
  color: var(--text-muted);
  max-width: 48ch;
}

/* The same capability rendered on a dark ground (used on the services page
   intro band) keeps identical type, only the colours change. */
.capabilities--on-dark { border-top-color: var(--line-on-dark-2); }
.capabilities--on-dark .capability { border-bottom-color: var(--line-on-dark-2); }
@media (min-width: 760px) {
  .capabilities--on-dark .capability:nth-child(odd) { border-right-color: var(--line-on-dark-2); }
}
.capabilities--on-dark .capability:hover { background: rgba(255, 255, 255, 0.04); }
.capabilities--on-dark .capability__icon { color: var(--forest-glow); }
.capabilities--on-dark .capability h3 { color: #fff; }
.capabilities--on-dark .capability p { color: var(--text-on-dark-2); }

/* ==========================================================================
   12. WHY VACHELLIA
   ========================================================================== */

.why {
  position: relative;
  background: var(--ink);
  color: var(--text-on-dark);
  overflow: hidden;
  isolation: isolate;
}
.why__bg { position: absolute; inset: 0; z-index: -2; }
.why__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.24; filter: grayscale(0.35); }
.why::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, rgba(0, 39, 50, 0.95) 0%, rgba(0, 59, 74, 0.90) 48%, rgba(35, 92, 78, 0.86) 100%);
}
.why h2, .why h3, .why .h-section { color: #fff; }
.why .lead { color: var(--text-on-dark); }

.why__grid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line-on-dark-2);
}
@media (min-width: 700px)  { .why__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .why__grid { grid-template-columns: repeat(3, 1fr); } }

.pillar {
  position: relative;
  padding: clamp(2rem, 3.2vw, 2.9rem) clamp(1.35rem, 2.2vw, 2.2rem);
  border-bottom: 1px solid var(--line-on-dark-2);
  transition: background-color var(--t-mid) var(--ease-soft);
}
@media (min-width: 700px) {
  .pillar { border-right: 1px solid var(--line-on-dark-2); }
  .pillar:nth-child(2n) { border-right: 0; }
}
@media (min-width: 1060px) {
  .pillar { border-right: 1px solid var(--line-on-dark-2); }
  .pillar:nth-child(2n) { border-right: 1px solid var(--line-on-dark-2); }
  .pillar:nth-child(3n) { border-right: 0; }
}
.pillar:hover { background: rgba(255, 255, 255, 0.05); }

.pillar__num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 200;
  letter-spacing: 0.02em;
  color: var(--forest-glow);
  margin-bottom: var(--sp-4);
}
.pillar h3 { color: #fff; font-size: 1.16rem; font-weight: 500; margin-bottom: 0.6rem; }
.pillar p {
  font-size: clamp(0.875rem, 0.85rem + 0.05vw, 0.91rem);
  line-height: 1.64;
  color: var(--text-on-dark-2);
}

/* ==========================================================================
   13. TEAM & BOARD
   ========================================================================== */

/* Full profiles: a fixed-ratio portrait beside the biography. Identical
   layout for every person, so nothing reads as an exception. */
.person {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: start;
  padding-block: clamp(2.75rem, 5vw, 4.25rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 820px) {
  .person { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
}

.person__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--paper-3);
}
.person__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 620ms var(--ease-soft);
}
.person:hover .person__media img,
.person:focus-within .person__media img { filter: grayscale(0); }

/* Stands in until a portrait is supplied. The brand ground rather than a grey
   box, so the slot reads as considered, not broken. */
.person__media--monogram {
  display: grid;
  place-items: center;
  background: var(--grad-brand);
}
.person__initials {
  font-family: var(--font-display);
  font-size: clamp(3rem, 1.9rem + 4.2vw, 4.6rem);
  font-weight: 200;
  letter-spacing: 0.12em;
  text-indent: 0.12em;   /* offsets the trailing letter-space, so it optically centres */
  color: #fff;
}

.person__name {
  font-size: clamp(1.4rem, 1.15rem + 0.7vw, 1.85rem);
  font-weight: 300;
  letter-spacing: -0.028em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.person__role {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--forest);
  margin-bottom: var(--sp-2);
}
.person__creds span,
.team-card__creds span { display: block; }

.person__creds {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-muted);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
  max-width: 54ch;
}
.person__bio { color: var(--text-muted); max-width: 68ch; }
.person__bio + .person__bio { margin-top: 1.1em; }

/* A profile whose biography is printed elsewhere points to it instead. */
.person__ref { margin-top: var(--sp-1); }

/* Compact cards, used for the team preview on the homepage */
.team__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
}
@media (min-width: 600px) { .team__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .team__grid { grid-template-columns: repeat(3, 1fr); } }

.team-card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--paper-3);
  margin-bottom: var(--sp-3);
}
.team-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 620ms var(--ease-soft), transform 900ms var(--ease-out);
}
.team-card:hover .team-card__media img,
.team-card:focus-visible .team-card__media img {
  filter: grayscale(0);
  transform: scale(1.03);
}

/* Touch screens have no hover, so the photographs stay in colour there
   rather than being stuck in grey. */
@media (hover: none) {
  .team-card__media img,
  .person__media img { filter: grayscale(0); }
}

/* The whole card is a link to the full profile. The name carries the same
   drawn-in underline as every other link on the site, so it reads as one. */
.team-card__name {
  position: relative;
  display: inline-block;
  font-size: clamp(1.15rem, 1.05rem + 0.3vw, 1.3rem);
  font-weight: 400;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin-bottom: 0.35rem;
  transition: color var(--t-mid) var(--ease-soft);
}
.team-card__name::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid) var(--ease-out);
}
.team-card:hover .team-card__name,
.team-card:focus-visible .team-card__name { color: var(--forest); }
.team-card:hover .team-card__name::after,
.team-card:focus-visible .team-card__name::after { transform: scaleX(1); }
.team-card__role {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.45;
  color: var(--forest);
  margin-bottom: 0.6rem;
}
.team-card__creds { font-size: 0.83rem; line-height: 1.6; color: var(--text-muted); }


/* ==========================================================================
   14. VALUES

   Five values as a definition list: the term on the left, the commitment on
   the right. A list rather than a grid, because five does not divide evenly
   into columns and a forced three-plus-two reads as an accident.
   ========================================================================== */

.values { border-top: 1px solid var(--line); margin-top: var(--sp-5); }

.value {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  padding-block: clamp(1.5rem, 2.6vw, 2.15rem);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 680px) {
  .value {
    grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: baseline;
  }
}

.value__term {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + 0.45vw, 1.45rem);
  font-weight: 300;
  letter-spacing: -0.026em;
  line-height: 1.18;
  color: var(--ink);
}
.value__body {
  margin: 0;
  font-size: clamp(0.9rem, 0.87rem + 0.08vw, 0.96rem);
  line-height: 1.68;
  color: var(--text-muted);
  max-width: 58ch;
}

/* ==========================================================================
   15. CONTACT
   Three equal cards carrying the contact details, then the enquiry form
   centred beneath them so it reads as the focal point of the page.
   ========================================================================== */

.contact-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 640px)  { .contact-cards { grid-template-columns: repeat(2, 1fr); } }
/* In the two-column range the address would be squeezed into a half column and
   each of its three lines would wrap, so it takes the full row instead. */
@media (min-width: 640px) and (max-width: 1099px) {
  .contact-card--wide { grid-column: 1 / -1; }
}
/* The address runs to five lines against one line in each of the cards
   beside it, so it is given the wider column and its lines stop wrapping. */
@media (min-width: 1100px) {
  .contact-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); }
}

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.9rem, 3.1vw, 2.75rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color var(--t-mid) var(--ease-soft),
              background-color var(--t-mid) var(--ease-soft);
}
.contact-card:hover { border-color: var(--line-strong); }

/* The icon sits on a hairline tile, which gives it the visual weight the
   bare glyph does not have at this size. */
.contact-card__tile {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-bottom: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  transition: border-color var(--t-mid) var(--ease-soft),
              background-color var(--t-mid) var(--ease-soft);
}
.contact-card:hover .contact-card__tile {
  border-color: var(--forest);
  background: rgba(35, 92, 78, 0.07);
}
.contact-card__icon {
  width: 34px;
  height: 34px;
  color: var(--forest);
}

.contact-card__k {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.contact-card__v {
  font-size: clamp(0.9rem, 0.86rem + 0.13vw, 0.98rem);
  line-height: 1.6;
  color: var(--ink);
  word-break: break-word;
}
/* Every line of the address in one size, weight and colour. */
.contact-card--wide .contact-card__v { line-height: 1.9; }
.contact-card__v a {
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
  transition: color var(--t-mid) var(--ease-soft), border-color var(--t-mid) var(--ease-soft);
}
.contact-card__v a:hover { color: var(--forest); border-color: var(--forest); }
/* Form card */
.form-shell { max-width: 780px; margin-inline: auto; }

.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3.4vw, 3rem);
}

.field { margin-bottom: 1.25rem; }
.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin-bottom: 0.45rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--t-mid) var(--ease-soft), background-color var(--t-mid) var(--ease-soft), box-shadow var(--t-mid) var(--ease-soft);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(85, 104, 110, 0.7); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-strong); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--forest);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(35, 92, 78, 0.12);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2355686E' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.4rem;
}
.field-row { display: grid; grid-template-columns: 1fr; gap: 0 1.25rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

.field label .optional { font-weight: 400; color: var(--text-muted); }

.form-card .btn {
  width: 100%;
  min-height: 54px;
  margin-top: 0.5rem;
  font-size: 0.88rem;
}
.form-note { font-size: 0.85rem; line-height: 1.6; color: var(--text-muted); margin-top: 1rem; }
.form-note a { border-bottom: 1px solid var(--line-strong); }
.form-status {
  font-size: 0.9rem;
  margin-top: 0.9rem;
  padding: 0.8rem 0.95rem;
  border-radius: var(--radius);
  background: rgba(35, 92, 78, 0.08);
  color: var(--forest);
  display: none;
}
.form-status.is-shown { display: block; }
/* The handler reported a problem rather than a success. */
.form-status--error {
  background: rgba(150, 52, 40, 0.07);
  color: #8A3224;
}

/* The spam trap. Off-screen rather than display:none, because some bots skip
   anything that is display:none; aria-hidden and tabindex keep it away from
   screen readers and the keyboard. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   16. CALL TO ACTION BAND
   ========================================================================== */

.cta {
  position: relative;
  background: var(--grad-brand);
  color: var(--text-on-dark);
  padding-block: clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}
.cta::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 54vw;
  height: 54vw;
  min-width: 420px;
  min-height: 420px;
  left: -12vw;
  bottom: -28vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 185, 155, 0.15) 0%, rgba(99, 185, 155, 0) 66%);
}
.cta__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  align-items: center;
}
@media (min-width: 900px) {
  .cta__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-7); }
}
.cta .h-section { color: #fff; margin-bottom: var(--sp-2); max-width: 22ch; }
.cta p { color: var(--text-on-dark); max-width: 56ch; font-size: 0.98rem; }
.cta .btn-row { margin-top: 0; }

/* ==========================================================================
   17. FOOTER
   ========================================================================== */

.footer {
  background: var(--ink-deep);
  color: var(--text-on-dark-2);
  padding-block: clamp(3.5rem, 6vw, 5.5rem) var(--sp-4);
  font-size: 0.85rem;
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.25rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--line-on-dark-2);
}
@media (min-width: 780px)  { .footer__top { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1060px) { .footer__top { grid-template-columns: 1.6fr 1fr 1.15fr 1.15fr; gap: clamp(2rem, 4vw, 4rem); } }

.footer__brand img { height: 60px; width: auto; margin-bottom: var(--sp-2); }
.footer__brand p { max-width: 36ch; line-height: 1.62; font-size: 0.85rem; }

.footer__col h4 {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: var(--sp-2);
}
.footer__col li + li { margin-top: 0.65rem; }
.footer__col a,
.footer__col span {
  display: inline-block;
  color: var(--text-on-dark-2);
  font-size: 0.86rem;
  line-height: 1.55;
  transition: color var(--t-mid) var(--ease-soft);
}
.footer__col a:hover { color: #fff; }

/* The legal line is the only thing down here now, so it runs the full width
   of the footer and wraps naturally rather than being held to a column. */
.footer__bottom {
  padding-top: var(--sp-3);
  font-size: 0.78rem;
  line-height: 1.6;
}
.footer__legal { color: rgba(255, 255, 255, 0.56); }

.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 80;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--t-mid) var(--ease-soft), transform var(--t-mid) var(--ease-out), visibility 0s linear var(--t-mid), background-color var(--t-mid) var(--ease-soft);
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:hover { background: var(--forest); }

/* ==========================================================================
   18. COMING SOON + 404
   ========================================================================== */

.soon {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--header-h) + 4rem) var(--gutter) 5rem;
  background: var(--paper);
  overflow: hidden;
  isolation: isolate;
}
.soon::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 70vw;
  height: 70vw;
  min-width: 520px;
  min-height: 520px;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(35, 92, 78, 0.085) 0%, rgba(35, 92, 78, 0) 64%);
}
.soon__inner { position: relative; }
.soon h1 {
  font-size: clamp(2.25rem, 1.6rem + 1.9vw, 3.75rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.036em;
  color: var(--ink);
}
.soon .soon__hint {
  margin-top: var(--sp-3);
  color: var(--text-muted);
  font-size: 0.98rem;
  max-width: 46ch;
  margin-inline: auto;
}
.soon .btn-row { justify-content: center; }

/* ==========================================================================
   19. RESPONSIVE REFINEMENTS
   ========================================================================== */

@media (max-width: 520px) {
  :root { --header-h: 84px; --header-h-stuck: 72px; }
  .brand img { height: 54px; }
  .header.is-stuck .brand img { height: 46px; }
  .btn { width: 100%; }
  .btn-row .btn { flex: 1 1 100%; }
  .hero { min-height: min(90svh, 720px); }
  .contact-card__tile { width: 58px; height: 58px; }
  .contact-card__icon { width: 29px; height: 29px; }
  .capability__icon { width: 42px; height: 42px; }
}

@media (min-width: 521px) and (max-width: 760px) {
  .btn-row .btn { flex: 1 1 auto; }
}

/* On narrow screens the copy spans the full width, so the horizontal fall-off
   is replaced by an even field that holds contrast across the whole line. */
@media (max-width: 860px) {
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(0, 39, 50, 0.62) 0%, rgba(0, 39, 50, 0.52) 30%, rgba(0, 39, 50, 0.66) 70%, rgba(0, 39, 50, 0.84) 100%),
      linear-gradient(90deg, rgba(0, 39, 50, 0.34) 0%, rgba(0, 39, 50, 0.22) 100%);
  }
}

/* A 14" laptop is wide but short. Width-based clamps cannot see that, so the
   vertical rhythm is trimmed here and the hero stops overflowing the fold. */
@media (min-width: 1000px) and (max-height: 850px) {
  :root { --section-y: clamp(4rem, 7vw, 6.5rem); }
  .hero { min-height: min(96svh, 720px); }
  .hero .btn-row { margin-top: var(--sp-4); }
}

/* ==========================================================================
   20. ACCESSIBILITY & PRINT
   ========================================================================== */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
  border-radius: 2px;
}

.on-dark :where(a, button):focus-visible,
.header:not(.is-stuck):not(.header--solid) :where(a, button):focus-visible,
.hero :where(a, button):focus-visible,
.page-hero :where(a, button):focus-visible,
.why :where(a, button):focus-visible,
.cta :where(a, button):focus-visible,
.footer :where(a, button):focus-visible,
.mobile-nav :where(a, button):focus-visible {
  outline-color: #fff;
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-reveal] img { transform: none !important; }
  /* The hero settles on a single, still photograph. */
  .hero__slide { animation: none !important; opacity: 0 !important; }
  .hero__slide--1 { opacity: 1 !important; }
  .hero__slide img { animation: none !important; transform: scale(1) !important; }
}

@media print {
  .header, .mobile-nav, .to-top, .form-card, .hero__media, .hero__scrim { display: none !important; }
  body { background: #fff; color: #000; }
  .section, .page-hero, .cta { padding-block: 1.5rem; }
  .hero { min-height: auto; background: #fff; }
  .hero h1, .hero__copy, .hero__eyebrow { color: #000; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}