/*
Theme Name: DevCon v2
Theme URI: https://devconptyltd.com.au
Author: DevCon Pty Ltd
Description: Premium commercial fitout & construction. Cinematic editorial design — React-parity WordPress theme.
Version: 2.21.22
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: devcon-wp
*/

/* ─── Design tokens ────────────────────────────────────────────────────────── */
:root {
  --color-primary:       #1a1a1a;
  --color-primary-light: #2e2e2e;
  --color-accent:        #00a651;
  --color-accent-hover:  #008c44;
  --color-accent-muted:  #33bb72;
  --color-accent-dark:   #005C2A;
  --color-text:          #1a1a1a;
  --color-text-muted:    #666666;
  --color-label:         #00a651;
  --color-bg:            #ffffff;
  --color-bg-alt:        #f5f5f5;
  --color-border:        #e0e0e0;
  /* Panel fill. Four rules referenced var(--color-surface) but the token was
     never declared, so those declarations were invalid and the panels rendered
     with no background at all. The two live consumers are the contact page's
     detail and hours cards. */
  --color-surface:       #f5f5f5;

  /* Height of the fixed header bar. The logo is sized off the same token so the
     two cannot drift apart and leave a gap at the top or bottom of the bar. */
  --header-h: 72px;

  --font-sans:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'DM Serif Display', Georgia, 'Times New Roman', serif;

  --shadow-sm:        0 1px 2px rgba(0,0,0,.06);
  --shadow-md:        0 8px 32px rgba(0,0,0,.08);
  --shadow-card-hover:0 12px 40px rgba(0,0,0,.12);
  --radius-sm: 3px;
  --radius-md: 6px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --container-max:    1280px;
  --container-narrow: 680px;
  --lh-tight:  1.2;
  --lh-body:   1.65;
  --lh-loose:  1.8;
}

/* ─── Reset / base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(0,166,81,.15); color: var(--color-primary); }

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); }

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

h1,h2,h3,h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: var(--lh-tight);
  margin: 0 0 1rem;
  color: var(--color-primary);
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* ─── Utility ───────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.section-label {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--color-accent);
  margin-bottom: 1rem;
  display: block;
}

/* ─── Scroll-reveal animation classes ──────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }
.reveal-delay-5 { transition-delay: .5s; }

/* ─── Navbar ────────────────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease, transform .5s var(--ease-out);
  transform: translateY(-80px);
}
.site-header.header-loaded { transform: translateY(0); }
.site-header.scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

/* The anchor is inline by default, so its line-height added a couple of stray
   pixels below the image and stopped the logo sitting flush. */
.site-branding { display: flex; align-items: center; height: 100%; }
.site-branding a { display: block; line-height: 0; }

.site-branding a {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-primary);
  text-decoration: none;
}
.site-branding a span { color: var(--color-accent); font-weight: 700; }
/* Full bar height, top edge to bottom edge.
   This only reads as "full height" because assets/devcon-logo-full.svg had its
   viewBox tightened in the same release. The file used to frame the artwork with
   ~19% empty space above and ~21% below, so the mark occupied just 59.9% of its
   own box: at the previous height:60px the visible logo was about 36px inside a
   72px bar, which is why it kept looking undersized however far the height was
   pushed. The !important here existed only to beat an inline style on the img,
   which has been removed. */
.site-logo { height: var(--header-h); width: auto; display: block; }
/* Held at the same visible size as before the viewBox change: 64px of the old
   padded box showed ~38px of actual logo. Only the header was asked to grow. */
.footer-logo { height: 38px; width: auto; display: block; margin-bottom: .75rem; }

.menu-toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  letter-spacing: .04em;
  padding: .5rem 0;
}
.menu-toggle:hover { color: var(--color-text-muted); }

.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}
.hamburger span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform .25s ease, opacity .25s ease;
}
.hamburger span:last-child { width: 70%; }

/* ─── Nav drawer ────────────────────────────────────────────────────────────── */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  visibility: hidden;
}
.nav-overlay.open {
  pointer-events: auto;
  visibility: visible;
}

.nav-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .3s ease;
}
.nav-overlay.open .nav-backdrop { opacity: 1; }

.nav-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 88vw);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 32px rgba(0,0,0,.12);
  transform: translateX(100%);
  transition: transform .38s var(--ease-out);
}
.nav-overlay.open .nav-drawer { transform: translateX(0); }

.nav-drawer__header {
  display: flex;
  justify-content: flex-end;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.nav-close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 1.375rem;
  color: var(--color-primary);
  cursor: pointer;
  border-radius: 4px;
  transition: background .2s;
}
.nav-close:hover { background: var(--color-bg-alt); }

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 1rem 2rem;
  flex: 1;
}
.nav-menu li { border-bottom: 1px solid var(--color-border); }
.nav-menu li:last-child { border-bottom: none; }
.nav-menu a {
  display: block;
  padding: 1.25rem 0;
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--color-primary);
  text-decoration: none;
  transition: color .2s ease;
  opacity: 0;
  transform: translateX(24px);
  transition: color .2s ease, opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.nav-overlay.open .nav-menu a { opacity: 1; transform: translateX(0); }
.nav-menu li:nth-child(1) a { transition-delay: .08s; }
.nav-menu li:nth-child(2) a { transition-delay: .14s; }
.nav-menu li:nth-child(3) a { transition-delay: .20s; }
.nav-menu li:nth-child(4) a { transition-delay: .26s; }
.nav-menu li:nth-child(5) a { transition-delay: .32s; }
.nav-menu li:nth-child(6) a { transition-delay: .38s; }
.nav-menu a:hover { color: var(--color-accent); }

.nav-drawer__footer {
  padding: 1.5rem 2rem;
  border-top: 1px solid var(--color-border);
}
.nav-drawer__footer p { font-size: .875rem; color: var(--color-text-muted); font-style: italic; margin: 0 0 .25rem; }
.nav-drawer__footer a { font-size: .875rem; color: var(--color-accent); }

/* ─── Hero ──────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('assets/hero/1.jpg');
  background-size: cover;
  background-position: center 40%;
  will-change: transform;
}

/* Rotating hero slides (crossfade) */
.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}
.hero__slide.is-active { opacity: 1; }

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 50%, rgba(0,0,0,.75) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 72px;
}

.hero__inner {
  padding-bottom: 7rem;
  max-width: 700px;
}

.hero__logo {
  height: 104px;
  width: auto;
  display: block;
  margin-bottom: 2rem;
}

.hero__label {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: .02em;
  /* White rather than the green accent: at this size, over a photograph, the
     accent green sat too close to the image in value to carry. The title below
     is already #fff, so this also keeps the lockup in one colour. */
  color: #fff;
  margin-bottom: 1.5rem;
  display: block;
  opacity: 0;
  animation: fadeUp .6s var(--ease-out) .1s forwards;
}

.hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 7vw, 5rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: 2rem;
}

.hero__title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  animation: wordReveal .6s var(--ease-out) forwards;
  margin-right: .32em;
}
.hero__title .word:nth-child(1) { animation-delay: .3s; }
.hero__title .word:nth-child(2) { animation-delay: .38s; }
.hero__title .word:nth-child(3) { animation-delay: .46s; }
.hero__title .word:nth-child(4) { animation-delay: .54s; }
.hero__title .word:nth-child(5) { animation-delay: .62s; }
.hero__title .word:nth-child(6) { animation-delay: .70s; }

.hero__text {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgba(255,255,255,.85);
  margin-bottom: 2.5rem;
  max-width: 520px;
  opacity: 0;
  animation: fadeUp .6s var(--ease-out) .85s forwards;
}

.hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp .6s var(--ease-out) 1.05s forwards;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  padding: .875rem 2rem;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .9375rem;
  border-radius: var(--radius-sm);
  letter-spacing: .02em;
  transition: background .2s ease, transform .15s ease;
}
.btn-primary:hover { background: var(--color-accent-hover); color: #fff; transform: translateY(-2px); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: .875rem 2rem;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .9375rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(8px);
  letter-spacing: .02em;
  transition: background .2s ease, transform .15s ease;
}
.btn-ghost:hover { background: rgba(255,255,255,.22); color: #fff; transform: translateY(-2px); }

.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, rgba(255,255,255,.8), transparent);
  opacity: 0;
  animation: fadeIn .5s ease 1.6s forwards, scrollPulse 1.8s ease-in-out 2s infinite;
}

/* ─── Stats bar ─────────────────────────────────────────────────────────────── */
.stats-bar {
  background: var(--color-primary);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 3.5rem 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
}

.stat__number {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: .5rem;
}
.stat__label {
  display: block;
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255,255,255,.5);
}

@media (max-width: 600px) {
  .stats-grid { grid-template-columns: 1fr; }
}

/* ─── What We Do ────────────────────────────────────────────────────────────── */
.what-we-do {
  padding: 8rem 0;
  background: var(--color-bg);
}

.what-we-do__intro { margin-bottom: 4rem; max-width: 640px; }

.what-we-do__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin-bottom: 1.25rem;
}

.what-we-do__lead {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-text-muted);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

@media (max-width: 900px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card:nth-child(3n) { border-right: 1px solid var(--color-border); }
  .service-card:nth-child(even) { border-right: none; }
}

@media (max-width: 640px) {
  .services-grid { grid-template-columns: 1fr; }
  .service-card { border-right: none !important; }
}

.service-card {
  padding: 2.5rem 2rem;
  border-top: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  transition: background-color .25s ease;
  cursor: default;
}
.service-card:nth-child(3n) { border-right: none; }
.service-card:hover { background: var(--color-bg-alt); }

.service-card__bar {
  width: 36px;
  height: 3px;
  background: var(--color-accent);
  border-radius: 2px;
  margin-bottom: 1.5rem;
}

.service-card__title {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--color-primary);
  margin-bottom: .75rem;
  line-height: 1.2;
}

.service-card__desc {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0;
}

/* ─── Our Approach ──────────────────────────────────────────────────────────── */
.our-approach {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  padding: 8rem 0;
}

.our-approach__header { margin-bottom: 5rem; }

.our-approach__title {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  letter-spacing: -.02em;
  max-width: 18ch;
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 4rem;
  margin-bottom: 5rem;
}

@media (max-width: 768px) {
  .pillars-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.pillar__number {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--color-accent);
  display: block;
  margin-bottom: 1.25rem;
}

.pillar__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 400;
  color: var(--color-primary);
  margin-bottom: 1rem;
  line-height: 1.1;
}

.pillar__desc {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin: 0;
}

.approach-tagline {
  padding-left: 1.5rem;
  border-left: 3px solid var(--color-accent);
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-style: italic;
  color: var(--color-primary);
  line-height: 1.65;
  max-width: 36ch;
  margin: 0;
}

/* ─── Projects ──────────────────────────────────────────────────────────────── */
.projects {
  background: var(--color-bg);
  padding: 8rem 0 0;
}

.projects__header { margin-bottom: 4rem; }

.projects__title {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  letter-spacing: -.02em;
}

.projects-list {
  border-top: 1px solid var(--color-border);
}

.project-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 360px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  transition: background-color .25s ease;
  cursor: pointer;
}
.project-card:hover { background: var(--color-bg-alt); }

@media (max-width: 900px) {
  .project-card { grid-template-columns: 1fr; }
  .project-card__media { order: 0 !important; min-height: 260px; }
  .project-card__body { order: 1 !important; }
}

.project-card__media {
  position: relative;
  overflow: hidden;
}

.project-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s var(--ease-out);
}
.project-card:hover .project-card__image { transform: scale(1.05); }
.project-card__image--placeholder { background: var(--color-bg-alt); }

.project-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,166,81,.25) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .3s ease;
}
.project-card:hover .project-card__overlay { opacity: 1; }

.project-card__body {
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.project-card__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.project-card__cat {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--color-accent);
}

.project-card__year {
  font-family: var(--font-sans);
  font-size: .75rem;
  color: var(--color-text-muted);
}

.project-card__title {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 400;
  color: var(--color-primary);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.project-card__excerpt {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}

.project-card__link {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .875rem;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: .25em;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  transition: gap .2s ease;
}
.project-card:hover .project-card__link { gap: .7em; }

/* ─── Testimonials ──────────────────────────────────────────────────────────── */
.testimonials {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 8rem 0;
}

.testimonials__title { font-size: clamp(1.75rem, 3.5vw, 2.75rem); letter-spacing: -.02em; }

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 4rem;
}

@media (max-width: 1100px) { .testimonials-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .testimonials-grid { grid-template-columns: 1fr; } }

.testimonial-card {
  position: relative;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2.5rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out), border-color .25s var(--ease-out);
  cursor: default;
  overflow: hidden;
}
/* Accent bar across the top, grows full-width on hover */
.testimonial-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--color-accent);
  transition: width .35s var(--ease-out);
}
.testimonial-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
  border-color: transparent;
}
.testimonial-card:hover::before { width: 100%; }

.testimonial-card__open {
  font-family: var(--font-heading);
  font-size: 4rem;
  line-height: .8;
  color: var(--color-accent);
  opacity: .18;
  margin-bottom: -.75rem;
  pointer-events: none;
}

.testimonial-card__quote {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.75;
  color: var(--color-primary-light);
  flex: 1;
  margin-bottom: 1.75rem;
}

.testimonial-card__attr {
  display: flex;
  align-items: center;
  gap: .875rem;
  border-top: 1px solid var(--color-border);
  padding-top: 1.25rem;
}

.testimonial-card__client {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .9375rem;
  color: var(--color-accent);
  margin: 0 0 .125rem;
}

.testimonial-card__role {
  font-family: var(--font-sans);
  font-size: .8125rem;
  color: var(--color-text-muted);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-card,
  .testimonial-card::before { transition: none; }
}

/* ─── Clients ───────────────────────────────────────────────────────────────── */
.clients {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 6rem 0;
  text-align: center;
}

.clients__title { font-size: clamp(1.5rem, 2.5vw, 2rem); letter-spacing: -.01em; margin-top: .75rem; }

.clients-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: 3.5rem;
}

.client-chip {
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  padding: .5rem 1.125rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  white-space: nowrap;
  cursor: default;
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.client-chip:hover { color: var(--color-accent); border-color: var(--color-accent); transform: scale(1.03); }

/* ─── CTA ───────────────────────────────────────────────────────────────────── */
.cta-section {
  background: var(--color-accent-dark);
  padding: 8rem 0;
  position: relative;
  overflow: hidden;
}

.cta-section__grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.cta-section__blob {
  position: absolute;
  top: -10%;
  right: -5%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(0,166,81,.15);
  filter: blur(80px);
  pointer-events: none;
}

.cta-section__inner {
  position: relative;
  z-index: 2;
  max-width: 680px;
}

.cta-section__eyebrow {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(255,255,255,.5);
  margin-bottom: 1.5rem;
  display: block;
}

.cta-section__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: 1.5rem;
}

.cta-section__text {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: rgba(255,255,255,.7);
  margin-bottom: 2.5rem;
  max-width: 480px;
}

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

.btn-white {
  display: inline-flex;
  align-items: center;
  padding: .875rem 2.25rem;
  background: #fff;
  color: var(--color-accent-dark);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .9375rem;
  border-radius: var(--radius-sm);
  letter-spacing: .02em;
  transition: background .2s ease, transform .15s ease;
}
.btn-white:hover { background: var(--color-bg-alt); color: var(--color-accent-dark); transform: translateY(-2px); }

.btn-outline-white {
  display: inline-flex;
  align-items: center;
  padding: .875rem 2rem;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .9375rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.25);
  letter-spacing: .02em;
  transition: background .2s ease, transform .15s ease;
}
.btn-outline-white:hover { background: rgba(255,255,255,.18); color: #fff; transform: translateY(-2px); }

/* ─── Footer ────────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  padding: 3.5rem 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer-brand__name {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-bottom: .5rem;
}
.footer-brand__name span { color: var(--color-accent); }

.footer-brand__tagline {
  font-family: var(--font-sans);
  font-size: .875rem;
  font-style: italic;
  color: var(--color-text-muted);
  margin: 0;
}

.footer-col__heading {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
  display: block;
}

.footer-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.footer-nav a {
  font-family: var(--font-sans);
  font-size: .9375rem;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color .2s;
}
.footer-nav a:hover { color: var(--color-accent); }

.footer-contact { display: flex; flex-direction: column; gap: .4rem; }
.footer-contact a, .footer-contact address {
  font-family: var(--font-sans);
  font-size: .9375rem;
  color: var(--color-text-muted);
  text-decoration: none;
  font-style: normal;
  transition: color .2s;
}
.footer-contact a:hover { color: var(--color-accent); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.footer-bottom p {
  font-family: var(--font-sans);
  font-size: .875rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* ─── Keyframes ─────────────────────────────────────────────────────────────── */
@keyframes wordReveal {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  to { opacity: 1; }
}

@keyframes scrollPulse {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
  50% { transform: translateX(-50%) translateY(10px); opacity: .5; }
}

/* ─── GSAP JS-ready overrides ────────────────────────────────────────────────── */
.js-ready .hero__title .word { animation: none; }

/* ─── Reduced motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__label, .hero__text, .hero__actions { opacity: 1; }
  .hero__title .word { opacity: 1; transform: none; }
  .nav-menu a { opacity: 1; transform: none; }
}

/* ─── Project value badge ────────────────────────────────────────────────────── */
.project-card__media { position: relative; }

.project-card__value-badge {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: .35em .75em;
  border-radius: var(--radius-sm);
  z-index: 2;
}

.project-card__location {
  font-family: var(--font-sans);
  font-size: .8125rem;
  color: var(--color-accent);
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: .75rem;
}

/* ─── Team section ───────────────────────────────────────────────────────────── */
.team {
  padding: 6rem 0;
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
}

.team__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 400;
  color: var(--color-primary);
  margin-top: .75rem;
  margin-bottom: 0;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 3.5rem;
}

@media (max-width: 768px) {
  .team-grid { grid-template-columns: 1fr; }
}

.team-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow .3s ease, transform .3s ease;
}
.team-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

.team-card__accent {
  height: 4px;
  background: var(--color-accent);
}

.team-card__body {
  padding: 2rem 2rem 2.25rem;
}

.team-card__name {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-primary);
  margin: 0 0 .25rem;
}

.team-card__role {
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-accent);
  margin: 0 0 1.25rem;
}

.team-card__bio {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}

.team-card__credentials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  border-top: 1px solid var(--color-border);
  padding-top: 1.25rem;
}

.team-card__credentials li {
  font-family: var(--font-sans);
  font-size: .875rem;
  color: var(--color-text-muted);
  padding-left: 1rem;
  position: relative;
}

.team-card__credentials li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
}

.team-card__photo {
  width: 100%;
  height: 440px;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.team-card__photo-placeholder {
  width: 100%;
  height: 440px;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-card__photo-placeholder::after {
  content: 'Photo coming soon';
  font-family: var(--font-sans);
  font-size: .75rem;
  color: var(--color-text-muted);
  letter-spacing: .08em;
}

/* ─── Other project experience ────────────────────────────────────────── */
.other-experience {
  background: var(--color-primary);
  padding: 7rem 0 8rem;
  position: relative;
  overflow: hidden;
}

/* Faint blueprint grid, same texture language as the CTA section. */
.other-experience__grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.other-experience .container {
  position: relative;
  z-index: 1;
}

.other-experience__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: 1rem;
}

.other-experience__sub {
  font-size: 1.0625rem;
  line-height: var(--lh-body);
  color: rgba(255,255,255,.55);
  max-width: 560px;
  margin: 0 0 3.5rem;
}

.oe-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  overflow: hidden;
}

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

.oe-card {
  background: var(--color-primary);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: background .25s ease;
}

/* Accent line sweeps in along the bottom edge on hover. */
.oe-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width .35s var(--ease-out);
}

.oe-card:hover {
  background: var(--color-primary-light);
}

.oe-card:hover::after {
  width: 100%;
}

.oe-card__cat {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.45);
  margin: 0 0 .625rem;
}

.oe-card__name {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 400;
  color: #fff;
  margin: 0;
  flex: 1;
  line-height: 1.3;
}

.oe-card__value {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.875rem;
  font-weight: 400;
  color: var(--color-accent);
  margin-top: 1.5rem;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .oe-card,
  .oe-card::after {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PORTFOLIO ARCHIVE
═══════════════════════════════════════════════════════════════════════════ */

/* ── Portfolio hero ─────────────────────────────────────────────────────── */
.portfolio-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  padding: 8rem 0 4rem;
  overflow: hidden;
}

.portfolio-hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('assets/projects/snowy-hydro-head-office.jpg');
  background-size: cover;
  background-position: center;
  will-change: transform;
}

.portfolio-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,.75) 40%, rgba(0,0,0,.35) 100%);
}

.portfolio-hero__content {
  position: relative;
  z-index: 2;
  max-width: 680px;
}

.portfolio-hero__label {
  color: var(--color-accent);
  margin-bottom: 1rem;
}

.portfolio-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 400;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 1.25rem;
}

.portfolio-hero__lead {
  font-size: 1.125rem;
  color: rgba(255,255,255,.75);
  line-height: 1.65;
  margin-bottom: 2.5rem;
}

.portfolio-hero__stats {
  display: flex;
  gap: 3rem;
}

.portfolio-stat__num {
  display: block;
  font-family: var(--font-heading);
  font-size: 2rem;
  color: #fff;
  line-height: 1;
  margin-bottom: .25rem;
}

.portfolio-stat__label {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-accent);
}

/* ── Portfolio grid ─────────────────────────────────────────────────────── */
.portfolio-grid-section { padding: 4rem 0 0; }

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 0 1.5rem 4rem;
  max-width: var(--container-max);
  margin: 0 auto;
}

@media (max-width: 1024px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .portfolio-grid { grid-template-columns: 1fr; gap: 1rem; padding: 0 1rem 3rem; } }

/* ── Portfolio card ─────────────────────────────────────────────────────── */
.portfolio-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  isolation: isolate; /* Safari border-radius + overflow fix */
  background: var(--color-primary);
  cursor: pointer;
  transition: box-shadow .35s var(--ease-out);
}
@media (hover: hover) {
  .portfolio-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 64px rgba(0,0,0,.28);
    transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
  }
}

.portfolio-card--featured {
  grid-column: span 2;
}
@media (max-width: 1024px) { .portfolio-card--featured { grid-column: span 2; } }
@media (max-width: 640px)  { .portfolio-card--featured { grid-column: span 1; } }

.portfolio-card__media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.portfolio-card--featured .portfolio-card__media { aspect-ratio: 16/9; }

.portfolio-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease-out);
}
@media (hover: hover) {
  .portfolio-card:hover .portfolio-card__img { transform: scale(1.05); }
}

.portfolio-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.95) 0%,
    rgba(0,0,0,.82) 30%,
    rgba(0,0,0,.55) 55%,
    rgba(0,0,0,.2)  80%,
    transparent     100%
  );
  transition: opacity .35s ease;
}
/* Taller info block on featured card needs deeper coverage for legibility. */
.portfolio-card--featured .portfolio-card__overlay {
  background: linear-gradient(
    to top,
    rgba(0,0,0,.95) 0%,
    rgba(0,0,0,.85) 40%,
    rgba(0,0,0,.6)  65%,
    rgba(0,0,0,.3)  85%,
    transparent     100%
  );
}
@media (hover: hover) {
  .portfolio-card:hover .portfolio-card__overlay { opacity: .9; }
}

.portfolio-card__value {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--color-accent);
  color: #000;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: .3em .75em;
  border-radius: var(--radius-sm);
  z-index: 2;
}

.portfolio-card__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.75rem 1.5rem 1.5rem;
  z-index: 2;
  transition: transform .35s var(--ease-out);
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
@media (hover: hover) {
  .portfolio-card:hover .portfolio-card__info { transform: translateY(-4px); }
}

.portfolio-card__cat {
  display: block;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.65);
  margin-bottom: .5rem;
}

.portfolio-card__title {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 400;
  color: #fff;
  margin: 0 0 .4rem;
  line-height: 1.2;
}
.portfolio-card--featured .portfolio-card__title { font-size: clamp(1.5rem, 3vw, 2.25rem); }

.portfolio-card__meta {
  font-family: var(--font-sans);
  font-size: .8125rem;
  color: rgba(255,255,255,.78);
  margin: 0 0 .75rem;
}

.portfolio-card__excerpt {
  font-size: .9375rem;
  color: #fff;
  line-height: 1.65;
  margin: 0 0 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.portfolio-card__link {
  position: relative;
  display: inline-block;
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  padding-bottom: 2px;
}
.portfolio-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3; /* stretched link — makes full card clickable */
}
.portfolio-card__link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width .25s var(--ease-out);
}
@media (hover: hover) {
  .portfolio-card:hover .portfolio-card__link::before { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SINGLE PROJECT
═══════════════════════════════════════════════════════════════════════════ */

.project-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: flex-end;
  padding: 8rem 0 4rem;
  overflow: hidden;
}

.project-hero__bg {
  position: absolute;
  inset: 0;
  background-color: var(--color-primary);
  background-size: cover;
  background-position: center 30%;
  will-change: transform;
}

.project-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 50%, rgba(0,0,0,.2) 100%);
}

.project-hero__content { position: relative; z-index: 2; max-width: 800px; }

.project-hero__back {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  margin-bottom: 1.5rem;
  transition: color .2s ease;
  text-decoration: none;
}
.project-hero__back:hover { color: #fff; }

.project-hero__label { color: var(--color-accent); margin-bottom: .75rem; }

.project-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 400;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 2rem;
}

.project-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.project-detail-pill {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 2rem;
  padding: .5em 1.1em;
  backdrop-filter: blur(8px);
}

.project-detail-pill__label {
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-accent);
  margin-right: .4em;
}

.project-detail-pill__value {
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 600;
  color: #fff;
}

/* ── Project content ─────────────────────────────────────────────────────── */
.project-content { padding: 5rem 0; }

.project-content__grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 4rem;
  align-items: start;
}

@media (max-width: 900px) {
  .project-content__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.project-content__lead {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 2rem;
  border-left: 3px solid var(--color-accent);
  padding-left: 1.5rem;
}

.project-content__text { font-size: 1.0625rem; line-height: 1.8; color: var(--color-text-muted); }
.project-content__text p { margin-bottom: 1.25rem; }

/* ── Project sidebar ─────────────────────────────────────────────────────── */
.project-sidebar-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}

.project-sidebar-card__heading {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--color-text-muted);
  margin: 0 0 1.25rem;
}

.project-detail-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .6rem 1rem;
  margin: 0;
}

.project-detail-list dt {
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.project-detail-list dd {
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
}

.project-sidebar-cta {
  background: var(--color-primary);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  text-align: center;
}

.project-sidebar-cta p {
  font-family: var(--font-sans);
  font-size: .9375rem;
  color: rgba(255,255,255,.75);
  margin-bottom: 1.25rem;
}

.project-sidebar-cta__btn { display: block; text-align: center; }

/* ── Related projects ────────────────────────────────────────────────────── */
.related-projects {
  padding: 5rem 0;
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
}

.related-projects__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 400;
  margin: .5rem 0 2.5rem;
}

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

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

.related-card {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-primary);
  text-decoration: none;
  transition: transform .3s var(--ease-out), box-shadow .3s ease;
}
.related-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }

.related-card__media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}

.related-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease-out);
}
.related-card:hover .related-card__img { transform: scale(1.05); }

.related-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 60%);
}

.related-card__body { padding: 1.25rem; background: var(--color-bg); }

.related-card__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--color-primary);
  margin: .3rem 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INNER PAGE SHARED
═══════════════════════════════════════════════════════════════════════════ */

.inner-hero {
  position: relative;
  min-height: 55vh;
  display: flex;
  align-items: flex-end;
  padding: 8rem 0 4.5rem;
  overflow: hidden;
}

.inner-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  will-change: transform;
}

.inner-hero__bg--about {
  background-image: url('https://images.unsplash.com/photo-1486325212027-8081e485255e?w=1800&q=80&auto=format&fit=crop');
}

.inner-hero__bg--services {
  background-image: url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=1800&q=80&auto=format&fit=crop');
}

.inner-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,.78) 40%, rgba(0,0,0,.4) 100%);
}

.inner-hero__content { position: relative; z-index: 2; max-width: 720px; }

.inner-hero__eyebrow { color: var(--color-accent); margin-bottom: 1rem; }

.inner-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 400;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 1.25rem;
}

.inner-hero__lead {
  font-size: 1.125rem;
  color: rgba(255,255,255,.78);
  line-height: 1.65;
  max-width: 580px;
}

/* Generic page */
.page-hero--simple {
  padding: 9rem 0 3rem;
  background: var(--color-primary);
}
.page-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: #fff;
  font-weight: 400;
  margin: 0;
}
.page-content { padding: 4rem 0 5rem; }
.page-content__body { max-width: 780px; font-size: 1.0625rem; line-height: 1.8; }

/* ═══════════════════════════════════════════════════════════════════════════
   ABOUT PAGE
═══════════════════════════════════════════════════════════════════════════ */

.about-story { padding: 6rem 0; }

.about-story__grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 5rem;
  align-items: start;
}

@media (max-width: 960px) {
  .about-story__grid { grid-template-columns: 1fr; gap: 3rem; }
}

.about-story__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  margin: .5rem 0 1.75rem;
}

.about-story__text p { font-size: 1.0625rem; line-height: 1.8; color: var(--color-text-muted); margin-bottom: 1.25rem; }

.about-aside-card {
  background: var(--color-primary);
  border-radius: var(--radius-md);
  padding: 2rem;
  margin-bottom: 1.5rem;
}

.about-aside-card__quote {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-style: italic;
  color: rgba(255,255,255,.9);
  line-height: 1.65;
  margin: 0 0 1rem;
  border: none;
  padding: 0;
}

.about-aside-card__attr {
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: .06em;
  margin: 0;
}

.about-stats-stack {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.about-stat {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.about-stat__num {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--color-accent);
  line-height: 1;
  min-width: 80px;
}

.about-stat__label {
  font-family: var(--font-sans);
  font-size: .875rem;
  color: var(--color-text-muted);
}

/* Values */
.about-values {
  padding: 6rem 0;
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.about-values__header { margin-bottom: 3.5rem; }

.about-values__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  margin: .5rem 0 0;
}

.about-values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-bottom: 3rem;
}

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

.about-value-card__number {
  display: block;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: .14em;
  margin-bottom: 1rem;
}

.about-value-card__title {
  font-family: var(--font-heading);
  font-size: 1.625rem;
  font-weight: 400;
  color: var(--color-primary);
  margin: 0 0 1rem;
}

.about-value-card__desc {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin: 0;
}

.about-values__tagline {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-style: italic;
  color: var(--color-primary);
  border-left: 3px solid var(--color-accent);
  padding-left: 1.5rem;
  margin: 0;
}

/* Team */
.about-team { padding: 6rem 0; }

.about-team__header { margin-bottom: 3.5rem; }

.about-team__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  margin: .5rem 0 .75rem;
}

.about-team__lead {
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0;
}

.about-team__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
}

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

.about-person {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: 2.25rem;
}

.about-person__header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.about-person__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: .04em;
}

.about-person__photo {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  flex-shrink: 0;
  display: block;
  border: 3px solid var(--color-primary);
}

.about-person__name {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--color-primary);
  margin: 0 0 .2rem;
}

.about-person__role {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-accent);
  margin: 0;
}

.about-person__bio {
  font-size: .9375rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

.about-person__credentials {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.about-person__credentials li {
  font-family: var(--font-sans);
  font-size: .875rem;
  color: var(--color-text-muted);
  padding-left: 1rem;
  position: relative;
}

.about-person__credentials li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* Accreditations */
.about-accreditations {
  padding: 6rem 0;
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
}

.about-accreditations__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 400;
  margin: .5rem 0 3rem;
}

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

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

.accreditation-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2rem 1.5rem;
  transition: box-shadow .3s ease, transform .3s ease;
}
.accreditation-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.accreditation-card__icon {
  color: var(--color-accent);
  margin-bottom: 1.25rem;
}

.accreditation-card__title {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 .6rem;
}

.accreditation-card__desc {
  font-size: .875rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WHAT WE DO PAGE
═══════════════════════════════════════════════════════════════════════════ */

.services-overview { padding: 6rem 0 3rem; }

.services-overview__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  margin: .5rem 0 1rem;
}

.services-overview__lead {
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 680px;
  margin: 0 0 4rem;
}

.services-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}

@media (max-width: 768px) { .services-detail-grid { grid-template-columns: 1fr; } }

.service-detail-card {
  padding: 2.5rem;
  border-top: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  transition: background-color .25s ease;
}

.service-detail-card:nth-child(even) { border-right: none; }

@media (max-width: 768px) {
  .service-detail-card { border-right: none; }
}

.service-detail-card__num {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: .14em;
  margin-bottom: 1rem;
}

.service-detail-card__title {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--color-primary);
  margin: 0 0 .75rem;
}

.service-detail-card__desc {
  font-size: .9375rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin-bottom: 1.25rem;
}

.service-detail-card__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.service-detail-card__points li {
  font-family: var(--font-sans);
  font-size: .875rem;
  color: var(--color-text-muted);
  padding-left: 1rem;
  position: relative;
}

.service-detail-card__points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* Expertise section */
.expertise-section {
  padding: 6rem 0;
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
}

.expertise-section__header { margin-bottom: 3.5rem; }

.expertise-section__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  margin: .5rem 0 0;
}

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

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

.expertise-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.expertise-card__media {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.expertise-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease-out);
}
.expertise-card:hover .expertise-card__img { transform: scale(1.04); }

.expertise-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 60%);
}

.expertise-card__label {
  position: absolute;
  bottom: 1rem;
  left: 1.25rem;
  font-family: var(--font-heading);
  font-size: 1.375rem;
  color: #fff;
  z-index: 2;
}

.expertise-card__body {
  padding: 2rem;
}

.expertise-card__body p {
  font-size: .9375rem;
  line-height: 1.8;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}
.expertise-card__body p:last-child { margin-bottom: 0; }

/* Why DevCon */
.why-devcon {
  padding: 6rem 0;
  border-top: 1px solid var(--color-border);
}

.why-devcon__header { margin-bottom: 3.5rem; }

.why-devcon__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  margin: .5rem 0 0;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

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

.why-card {
  padding: 2.25rem 2rem;
  border-top: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  transition: background-color .25s ease;
}
.why-card:nth-child(3n) { border-right: none; }
.why-card:hover { background: var(--color-bg-alt); }

.why-card__icon {
  color: var(--color-accent);
  margin-bottom: 1.25rem;
}

.why-card__title {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 .75rem;
}

.why-card__desc {
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SERVICES PAGE (template-services.php)
═══════════════════════════════════════════════════════════════════════════ */

/* ── Service tiles ──────────────────────────────────────────────────────── */
.svc-section { padding: 6rem 0; background: var(--color-bg); }

.svc-intro { margin-bottom: 4rem; }
.svc-intro__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 400;
  color: var(--color-primary);
  margin: .5rem 0 0;
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--color-border);
}
@media (max-width: 640px) { .svc-grid { grid-template-columns: 1fr; } }

.svc-tile {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  padding: 2.5rem 2rem 2.5rem 0;
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  transition: background .25s ease;
  overflow: hidden;
}
.svc-tile:nth-child(even) { border-right: none; padding-left: 2.5rem; padding-right: 0; }
@media (max-width: 640px) {
  .svc-tile { border-right: none; padding: 2rem 0; }
  .svc-tile:nth-child(even) { padding-left: 0; }
}

@media (hover: hover) {
  .svc-tile:hover { background: var(--color-surface); }
  .svc-tile:hover .svc-tile__num { opacity: .06; }
  .svc-tile:hover .svc-tile__tag { opacity: 1; transform: translateY(0); }
}

.svc-tile__num {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-family: var(--font-heading);
  font-size: 6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-primary);
  opacity: .04;
  transition: opacity .3s ease;
  pointer-events: none;
  user-select: none;
}

.svc-tile__body { flex: 1; }

.svc-tile__title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--color-primary);
  margin: 0 0 .75rem;
  line-height: 1.25;
}

.svc-tile__desc {
  font-family: var(--font-sans);
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0;
}

.svc-tile__tag {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-accent);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
}
.svc-tile:nth-child(even) .svc-tile__tag { right: 1rem; }
@media (max-width: 640px) { .svc-tile__tag { opacity: 1; transform: none; } }

/* ── Process ─────────────────────────────────────────────────────────────── */
.svc-process {
  padding: 6rem 0;
  background: var(--color-primary);
  color: #fff;
}

.svc-process__header {
  max-width: 640px;
  margin-bottom: 4rem;
}
.svc-process__header .section-label { color: var(--color-accent); }

.svc-process__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 400;
  color: #fff;
  margin: .5rem 0 1rem;
}

.svc-process__lead {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255,255,255,.65);
  margin: 0;
}

.svc-process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 900px)  { .svc-process__steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .svc-process__steps { grid-template-columns: 1fr; } }

.svc-step {
  padding: 2.5rem 2rem 2.5rem 0;
  border-top: 1px solid rgba(255,255,255,.12);
  position: relative;
}
@media (max-width: 900px)  { .svc-step { padding-right: 1.5rem; } }

.svc-step__num {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--color-accent);
  margin-bottom: 1.25rem;
}

.svc-step__connector {
  display: none; /* decorative only on large screens */
}

.svc-step__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 400;
  color: #fff;
  margin: 0 0 .75rem;
  line-height: 1.2;
}

.svc-step__desc {
  font-family: var(--font-sans);
  font-size: .9rem;
  line-height: 1.7;
  color: rgba(255,255,255,.6);
  margin: 0;
}

/* ── Expertise ───────────────────────────────────────────────────────────── */
.svc-expertise { padding: 6rem 0; background: var(--color-surface); }

.svc-expertise__header { margin-bottom: 3.5rem; }
.svc-expertise__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 400;
  color: var(--color-primary);
  margin: .5rem 0 0;
}

.svc-expertise__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
@media (max-width: 768px) { .svc-expertise__grid { grid-template-columns: 1fr; } }

.svc-exp-card {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  isolation: isolate;
}

.svc-exp-card__media {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.svc-exp-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease-out);
}
@media (hover: hover) {
  .svc-exp-card:hover .svc-exp-card__img { transform: scale(1.04); }
}

.svc-exp-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.35) 0%, transparent 60%);
}

.svc-exp-card__body {
  padding: 2rem;
}
.svc-exp-card__body .section-label { margin-bottom: .75rem; }

.svc-exp-card__title {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 400;
  color: var(--color-primary);
  margin: 0 0 1rem;
  line-height: 1.2;
}

.svc-exp-card__body p {
  font-family: var(--font-sans);
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0 0 .75rem;
}
.svc-exp-card__body p:last-child { margin: 0; }

/* ── Credentials strip ───────────────────────────────────────────────────── */
.svc-creds {
  padding: 5rem 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.svc-creds__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 768px) { .svc-creds__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 0; } }
@media (max-width: 400px) { .svc-creds__grid { grid-template-columns: 1fr; } }

.svc-cred {
  text-align: center;
  padding: 0 2rem;
  border-right: 1px solid var(--color-border);
}
.svc-cred:last-child { border-right: none; }
@media (max-width: 768px) {
  .svc-cred:nth-child(even) { border-right: none; }
  .svc-cred:nth-child(2) { border-right: none; }
}

.svc-cred__num {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 400;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: .5rem;
}

.svc-cred__label {
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT PAGE (template-contact.php)
═══════════════════════════════════════════════════════════════════════════ */

/* ── Compact hero variant ────────────────────────────────────────────────── */
.inner-hero--compact { min-height: 45vh; padding: 7rem 0 3.5rem; }

.inner-hero__bg--contact {
  background-image: url('https://images.unsplash.com/photo-1486325212027-8081e485255e?w=1800&q=80&auto=format&fit=crop');
}

/* ── Contact layout ──────────────────────────────────────────────────────── */
.contact-section { padding: 5rem 0 7rem; background: var(--color-bg); }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 5rem;
  align-items: start;
}
@media (max-width: 1024px) { .contact-grid { grid-template-columns: 1fr 320px; gap: 3rem; } }
@media (max-width: 768px)  { .contact-grid { grid-template-columns: 1fr; gap: 3rem; } }

/* ── Form ────────────────────────────────────────────────────────────────── */
.form-row { display: grid; gap: 1.25rem; }
.form-row--half { grid-template-columns: 1fr 1fr; }
@media (max-width: 540px) { .form-row--half { grid-template-columns: 1fr; } }

.form-group { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.25rem; }

.form-label {
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--color-primary);
}
.form-label span { color: var(--color-accent); }

.form-input {
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-sans);
  font-size: .9375rem;
  color: var(--color-primary);
  transition: border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
.form-input::placeholder { color: var(--color-text-muted); opacity: .6; }
.form-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(34,197,94,.12);
}

.form-select-wrap { position: relative; }
.form-select { padding-right: 2.5rem; cursor: pointer; }
.form-select-arrow {
  position: absolute;
  right: .85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}

.form-textarea { min-height: 160px; resize: vertical; line-height: 1.6; }

.form-submit-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: .5rem;
  flex-wrap: wrap;
}

.contact-form__submit {
  padding: .9rem 2.25rem;
  font-size: 1rem;
}

.form-privacy {
  font-family: var(--font-sans);
  font-size: .8125rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.contact-success,
.contact-error {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-sm);
  margin-bottom: 2rem;
}
.contact-success {
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.3);
  color: #166534;
}
.contact-error {
  background: rgba(239,68,68,.06);
  border: 1px solid rgba(239,68,68,.25);
  color: #991b1b;
}
.contact-success svg, .contact-error svg { flex-shrink: 0; margin-top: 1px; }
.contact-success strong, .contact-error strong { display: block; margin-bottom: .2rem; }
.contact-success p, .contact-error p { font-size: .9rem; margin: 0; }
.contact-error p a { color: inherit; }

/* ── Contact detail card ─────────────────────────────────────────────────── */
.contact-detail-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 2rem;
  margin-bottom: 1.5rem;
}

.contact-detail-card__heading {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--color-primary);
  margin: 0 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.contact-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.contact-detail-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.contact-detail-item__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(34,197,94,.1);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  flex-shrink: 0;
}

.contact-detail-item__label {
  display: block;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-text-muted);
  margin-bottom: .2rem;
}

.contact-detail-item__value {
  font-family: var(--font-sans);
  font-size: .9375rem;
  color: var(--color-primary);
  text-decoration: none;
  line-height: 1.5;
}
a.contact-detail-item__value:hover { color: var(--color-accent); }

/* ── Contact person card ─────────────────────────────────────────────────── */
.contact-person-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  color: #fff;
}

.contact-person-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #000;
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-person-card__name {
  display: block;
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: .2rem;
}

.contact-person-card__role {
  display: block;
  font-family: var(--font-sans);
  font-size: .75rem;
  color: rgba(255,255,255,.55);
  margin-bottom: .75rem;
}

.contact-person-card__note {
  font-family: var(--font-sans);
  font-size: .85rem;
  line-height: 1.6;
  color: rgba(255,255,255,.7);
  margin: 0;
}

/* ── Hours card ──────────────────────────────────────────────────────────── */
.contact-hours-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 1.5rem;
}

.contact-hours-card__heading {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-text-muted);
  margin: 0 0 1rem;
}

.contact-hours-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.contact-hours-list li {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: .875rem;
  color: var(--color-primary);
}

.contact-hours-list li span:last-child {
  font-weight: 600;
  color: var(--color-accent);
}

/* ── Client Gallery ─────────────────────────────────────────────────────── */
.client-gallery {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  padding: 6rem 0;
}

.client-gallery__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  letter-spacing: -.02em;
  margin-bottom: 3rem;
}

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

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

.gallery-item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 3;
}

.gallery-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.gallery-item:hover .gallery-item__img {
  transform: scale(1.05);
}

.gallery-item__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.5rem 1.25rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 100%);
}

.gallery-item__client {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

.gallery-item__desc {
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--color-accent-muted);
  opacity: 1;
}

/* ─── Capability statement: home band + page ──────────────────────────────── */
.capability-band {
  background: var(--color-primary);
  padding: 6rem 0;
}

.capability-band__title {
  color: #fff;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  margin-bottom: 1rem;
}

.capability-band__text {
  color: rgba(255, 255, 255, .75);
  max-width: 60ch;
  font-size: 1.0625rem;
  line-height: var(--lh-loose);
  margin: 0 0 2rem;
}

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

.inner-hero__bg--capability {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-dark) 100%);
}

.inner-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.capability-section {
  padding: 5.5rem 0;
}

.capability-section--alt {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.capability-section__title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  margin-bottom: 1.25rem;
}

.capability-prose {
  max-width: 65ch;
  font-size: 1.0625rem;
  line-height: var(--lh-loose);
}

.capability-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: .5rem 3rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  font-size: 1.0625rem;
  max-width: 760px;
}

.capability-list li {
  position: relative;
  padding-left: 1.5rem;
}

.capability-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: .6rem;
  height: .15rem;
  background: var(--color-accent);
}

.capability-download {
  background: var(--color-accent-dark);
  padding: 5rem 0;
}

.capability-download__title {
  color: #fff;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  margin-bottom: 1.75rem;
}

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

/* ─── Footer reception line ──────────────────────────────────────────────────── */
.footer-contact__reception {
  display: block;
  margin-top: .35rem;
  font-size: .95rem;
  opacity: .85;
}

/* ─── Project gallery collage ────────────────────────────────────────────────── */
.project-gallery {
  padding: 5rem 0 6rem;
  background: var(--color-bg-alt);
}
.project-gallery__title {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3.5vw, 2.75rem);
  color: var(--color-primary);
  margin: .25rem 0 2.25rem;
}
.project-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.project-gallery__item {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #d9d9d9;
  aspect-ratio: 4 / 3;
}
/* First photo spans two columns for a hero-of-set feel */
.project-gallery__item[data-index="0"] {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}
.project-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease-out);
}
.project-gallery__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,166,81,0);
  transition: background .3s ease;
}
.project-gallery__item:hover .project-gallery__img { transform: scale(1.06); }
.project-gallery__item:hover::after { background: rgba(0,166,81,.14); }
.project-gallery__item:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

@media (max-width: 720px) {
  .project-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .project-gallery__item[data-index="0"] { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; }
}

/* ─── Lightbox ───────────────────────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,.92);
  backdrop-filter: blur(2px);
}
.lightbox__stage {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 90vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
.lightbox__img {
  max-width: 90vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.lightbox__count {
  color: rgba(255,255,255,.8);
  font-family: var(--font-sans);
  font-size: .9rem;
  letter-spacing: .05em;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: 3;
  border: 0;
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: var(--color-accent); }
.lightbox__close {
  top: 1.25rem;
  right: 1.25rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 1.25rem;
}
.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 2rem;
  line-height: 1;
}
.lightbox__nav--prev { left: 1.5rem; }
.lightbox__nav--next { right: 1.5rem; }

@media (max-width: 720px) {
  .lightbox__nav { width: 44px; height: 44px; font-size: 1.5rem; }
  .lightbox__nav--prev { left: .5rem; }
  .lightbox__nav--next { right: .5rem; }
  .lightbox__close { top: .75rem; right: .75rem; }
}

/* ─── Feedback rev 2.20 — prominent green box borders + brand logos ──────────── */
/* Client feedback: boxes across the site looked bland. Give every content box a
   prominent solid green border (site-wide, incl. the menu-linked pages) so the
   layout reads with more definition. */
:root { --border-green: 2px solid var(--color-accent); }

.service-card,
.oe-card,
.testimonial-card,
.team-card,
.accreditation-card,
.about-value-card,
.about-aside-card,
.expertise-card,
.service-detail-card,
.why-card {
  border: var(--border-green) !important;
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

/* Keep the service grid from collapsing the new borders into hairlines */
.service-card { border-right: var(--border-green) !important; }
@media (min-width: 768px) {
  .service-card:nth-child(3n) { border-right: var(--border-green) !important; }
}

/* Hover: deepen the green rather than removing the border */
.service-card:hover,
.oe-card:hover,
.testimonial-card:hover,
.team-card:hover,
.accreditation-card:hover,
.about-value-card:hover,
.expertise-card:hover,
.service-detail-card:hover,
.why-card:hover {
  border-color: var(--color-accent-hover) !important;
  box-shadow: var(--shadow-md);
}

/* ─── Testimonial brand logos + attributed person ───────────────────────────── */
.testimonial-card__logo {
  height: 44px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  margin-bottom: 1.25rem;
  align-self: flex-start;
}
.testimonial-card__person {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .9375rem;
  color: var(--color-primary);
  margin: 0 0 .125rem;
}
.testimonial-card__client {
  font-weight: 600;
  color: var(--color-accent);
}

/* ─── Client brand logos (bold, strong chips) ───────────────────────────────── */
.client-chip {
  border: var(--border-green);
  font-weight: 700;
  color: var(--color-primary);
}
.client-chip:hover { transform: scale(1.04); border-color: var(--color-accent-hover); }
/* Dark plate, matching the testimonial brand plates — the logo files in
   assets/clients/ are reversed for a dark ground, so a white chip hides them. */
.client-chip--logo {
  padding: .75rem 1.25rem;
  background: linear-gradient(180deg, #242424 0%, #131313 100%);
  border-color: transparent;
  min-height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.client-chip--logo:hover { border-color: var(--color-accent); }
.client-chip__logo {
  height: 48px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  display: block;
}

/* ─── Feedback rev 2.20 — fill empty grid space with photos ──────────────────── */
.service-photo {
  grid-column: span 2;
  margin: 0;
  border: var(--border-green);
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 220px;
}
.service-photo__img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block; }
@media (max-width: 767px) {
  .service-photo { grid-column: span 1; min-height: 200px; }
}

.oe-photo {
  margin: 3.5rem 0 0;
  border: var(--border-green);
  border-radius: var(--radius-md);
  overflow: hidden;
  max-height: 420px;
}
.oe-photo__img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; display: block; }

/* ─── Feedback rev 2.20 — homepage About Us section ─────────────────────────── */
.home-about { padding: 6rem 0; background: var(--color-bg); }
.home-about__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.home-about__title { font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -.01em; margin: .75rem 0 1.25rem; }
.home-about__lead { font-size: 1.125rem; color: var(--color-primary-light); margin-bottom: 1.25rem; }
.home-about__text p { color: var(--color-text-muted); line-height: 1.75; margin-bottom: 1.25rem; }
.home-about__btn { margin-top: .5rem; }
@media (max-width: 900px) {
  .home-about__grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ─── Home About aside — capability statement preview card ─────────────────── */
/* The card sits on --color-bg (see the green-border block above), so the quote
   needs dark text; it inherited white from the original dark-card styling. */
.about-aside-card__quote { color: var(--color-primary); }

.about-aside-card--doc {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .3s ease, box-shadow .3s ease;
}
.about-aside-card--doc:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
}
.about-aside-card--doc:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

.doc-preview {
  position: relative;
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto 1.5rem;
}

/* Sheets peeking out behind the cover, so the card reads as a document. */
.doc-preview::before,
.doc-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .10);
  border-radius: 3px;
  transform-origin: 50% 100%;
  transition: transform .3s ease;
}
.doc-preview::before { transform: rotate(3deg)   translate(6px, -2px); }
.doc-preview::after  { transform: rotate(1.5deg) translate(3px, -1px); }
.about-aside-card--doc:hover .doc-preview::before { transform: rotate(5deg) translate(9px, -3px); }
.about-aside-card--doc:hover .doc-preview::after  { transform: rotate(2.5deg) translate(5px, -2px); }

.doc-preview__page {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 3px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
}

.doc-preview__badge {
  position: absolute;
  z-index: 2;
  top: -.65rem;
  left: -.65rem;
  padding: .3rem .6rem;
  background: var(--color-accent);
  color: #fff;
  border-radius: 3px;
  font-family: var(--font-sans);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.about-aside-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.25rem;
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-accent);
}
.about-aside-card__arrow { transition: transform .25s ease; }
.about-aside-card--doc:hover .about-aside-card__arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .about-aside-card--doc,
  .doc-preview::before,
  .doc-preview::after,
  .about-aside-card__arrow { transition: none; }
  .about-aside-card--doc:hover { transform: none; }
  .about-aside-card--doc:hover .about-aside-card__arrow { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEEDBACK REV 2.21.2 — review.txt
   1. Home: separate About Us from What We Do
   2. Testimonials: brand lockups instead of initials, hero attribution
   3. About page: rebuild the Listen / Understand / Respect cards
   4. What We Do page: break up the white in the opening section
   5. Projects page: make Other Project Experience read well at rest
═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Home — About Us / What We Do delineation ─────────────────────────── */
/* Both sections sat on plain white with no divider, so they ran together as one
   block of copy. About Us now takes the tinted band and What We Do keeps the
   white, giving the page a clear dark → tint → white → tint rhythm. */
.home-about {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  padding: 6.5rem 0;
}

.what-we-do {
  position: relative;
  padding-top: 7rem;
}

/* Short accent rule anchoring the top of the What We Do band. */
.what-we-do::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 4px;
  background: var(--color-accent);
  border-radius: 0 0 3px 3px;
}

/* ── 2. Testimonials — brand lockup + hero attribution ───────────────────── */
.testimonial-card { padding-top: 0; }

/* Full-bleed brand plate at the head of each card. Every plate uses the same
   dark ground so the row reads as one consistent set whether the client is
   represented by supplied logo artwork or by a typographic wordmark — logo
   files in assets/clients/ are therefore the white / reversed versions. */
.testimonial-card__brand {
  flex: 0 0 auto;
  margin: 0 -2rem 1.75rem;
  padding: 1.5rem 2rem;
  /* 112px = a 64px content box plus the 1.5rem padding either side. Both logo
     caps below fit inside that box, so every plate on the row is the same
     height no matter which treatment a given mark gets. */
  min-height: 112px;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, #242424 0%, #131313 100%);
  border-bottom: 2px solid var(--color-accent);
}

.testimonial-card__logo {
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 56px;
  object-fit: contain;
  margin: 0;
  align-self: center;
}

/* Near-square marks run taller so they carry the same optical weight as the
   wide wordmarks beside them. All four current logos are wide, so nothing uses
   this today — it is here so a square mark added later still sits correctly. */
.testimonial-card__logo--tall { max-height: 64px; }

.testimonial-card__wordmark {
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: #fff;
}

/* Attribution reads as a signature block rather than a caption. */
.testimonial-card__attr {
  display: block;
  border-top: 0;
  padding-top: 0;
}

.testimonial-card__rule {
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-accent);
  margin-bottom: 1.125rem;
}

.testimonial-card__person {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-primary);
  margin: 0 0 .4rem;
}

.testimonial-card__role {
  display: block;
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-text-muted);
  margin: 0;
}

.testimonial-card__sep { margin: 0 .45rem; color: var(--color-border); }

/* Sits inline inside __role, so it has to inherit that line's sizing. */
.testimonial-card__client {
  font-size: inherit;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--color-accent);
}

/* ── 3. About page — Listen / Understand / Respect ───────────────────────── */
/* These carried the site-wide 2px green border but had no padding of their own,
   so the copy sat hard against the rule. Rebuilt as proper cards with a single
   accent edge and a display numeral. */
.about-values__grid { gap: 1.75rem; }

.about-value-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 2.5rem 2rem 2.75rem;
  background: var(--color-bg) !important;
  border: 1px solid var(--color-border) !important;
  border-top: 4px solid var(--color-accent) !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}

.about-value-card:hover {
  border-color: var(--color-border) !important;
  border-top-color: var(--color-accent) !important;
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.about-value-card__number {
  position: absolute;
  top: .75rem;
  right: 1.25rem;
  font-family: var(--font-heading);
  font-size: 5rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-primary);
  opacity: .06;
  margin: 0;
  pointer-events: none;
  user-select: none;
}

.about-value-card__title {
  position: relative;
  font-size: 1.75rem;
  margin: 0 0 1rem;
  padding-right: 3rem;
}

.about-value-card__title::after {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  background: var(--color-accent);
  opacity: .35;
  margin-top: .875rem;
}

@media (prefers-reduced-motion: reduce) {
  .about-value-card { transition: none; }
  .about-value-card:hover { transform: none; }
}

/* ── 4. What We Do page — opening section ────────────────────────────────── */
/* Was a flat white field of hairline-ruled tiles. Now a tinted-to-white wash,
   an anchored intro and alternating tile fills so the grid has texture. */
.services-overview {
  position: relative;
  padding: 6rem 0 4.5rem;
  background:
    radial-gradient(900px 380px at 8% -8%, rgba(0, 166, 81, .09), transparent 62%),
    linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 58%);
}

.services-overview__intro {
  padding-left: 1.75rem;
  border-left: 3px solid var(--color-accent);
  max-width: 780px;
}

.services-overview__lead { margin-bottom: 3.5rem; }

.services-detail-grid { gap: 1.25rem; }

.service-detail-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}

/* Checkerboard the two-column grid so the section stops reading as one white
   sheet. Falls back to a single alternating column on narrow screens. */
.service-detail-card:nth-child(4n+1),
.service-detail-card:nth-child(4n+4) { background: var(--color-bg-alt) !important; }

@media (max-width: 768px) {
  .service-detail-card:nth-child(4n+1),
  .service-detail-card:nth-child(4n+4) { background: var(--color-bg) !important; }
  .service-detail-card:nth-child(even) { background: var(--color-bg-alt) !important; }
}

.service-detail-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.service-detail-card__num {
  position: absolute;
  top: .5rem;
  right: 1.25rem;
  font-family: var(--font-heading);
  font-size: 4.5rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-primary);
  opacity: .07;
  margin: 0;
  pointer-events: none;
  user-select: none;
}

.service-detail-card__title { padding-right: 3.5rem; }

@media (prefers-reduced-motion: reduce) {
  .service-detail-card { transition: none; }
  .service-detail-card:hover { transform: none; }
}

/* ── 5. Other project experience — resting state ─────────────────────────── */
/* The site-wide white/green box rule was landing on these tiles, so a dark
   section was filled with white blocks that only looked right on hover. They
   are now glass panels built for the dark ground, with a landmark row on top. */
.oe-grid {
  gap: 1rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.oe-card {
  padding: 1.75rem 1.5rem 1.5rem 1.875rem;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.02) 100%) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  transition: transform .3s var(--ease-out), background .3s ease, border-color .3s ease;
}

/* Accent edge sits at rest and extends on hover, replacing the bottom sweep
   that left the tile looking unfinished when idle. */
.oe-card::after { display: none; }

.oe-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.75rem;
  bottom: 1.75rem;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--color-accent);
  opacity: .45;
  transition: opacity .3s ease, top .3s var(--ease-out), bottom .3s var(--ease-out);
}

.oe-card:hover {
  background: rgba(255,255,255,.085) !important;
  border-color: rgba(0,166,81,.55) !important;
  transform: translateY(-3px);
}

.oe-card:hover::before { opacity: 1; top: 0; bottom: 0; }

.oe-card__cat { color: rgba(255,255,255,.5); }

.oe-card__value {
  margin-top: 1.25rem;
  font-size: 1.75rem;
}

/* Landmark row: the three largest builds lead the grid. */
.oe-card--feature {
  background: linear-gradient(180deg, rgba(0,166,81,.16) 0%, rgba(0,166,81,.05) 100%) !important;
  border-color: rgba(0,166,81,.40) !important;
  padding-top: 1.5rem;
}

.oe-card--feature::before { opacity: 1; top: 0; bottom: 0; }

.oe-card--feature .oe-card__flag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--color-accent-muted);
  border: 1px solid rgba(0,166,81,.45);
  border-radius: 100px;
  padding: .25rem .625rem;
  margin-bottom: .875rem;
}

.oe-card--feature .oe-card__name { font-size: 1.375rem; }
.oe-card--feature .oe-card__value { font-size: 2.5rem; color: var(--color-accent-muted); }

@media (prefers-reduced-motion: reduce) {
  .oe-card { transition: none; }
  .oe-card:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEEDBACK REV 2.21.8 — Our Approach pillars
   The three Listen / Understand / Respect blocks were bare text sitting on the
   section's own --color-bg-alt ground, so they read as one undifferentiated
   slab. They are now cards: white panel, green rule across the top that draws
   itself in as the section reveals, and a lift on hover. Appended at the end of
   the file so it out-orders the rev 2.20 !important card block above.
   ═══════════════════════════════════════════════════════════════════════════ */

.pillars-grid { gap: 1.75rem; }

@media (max-width: 768px) {
  .pillars-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

.pillar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 3rem 2.25rem 2.5rem;
  background: var(--color-bg);
  border: 1px solid rgba(0,166,81,.28);
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  transition:
    transform .45s var(--ease-out),
    box-shadow .45s var(--ease-out),
    border-color .45s var(--ease-out);
}

/* Soft accent wash that grows out of the top-left corner on hover. Sits behind
   the content via z-index, hence the isolation on the card. */
.pillar::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(520px 240px at 0% 0%, rgba(0,166,81,.10), transparent 66%);
  opacity: 0;
  transition: opacity .45s var(--ease-out);
}

.pillar:hover {
  transform: translateY(-6px);
  border-color: rgba(0,166,81,.75);
  box-shadow: 0 18px 40px -18px rgba(0,166,81,.45), 0 2px 6px rgba(0,0,0,.05);
}

.pillar:hover::after { opacity: 1; }

/* Top rule. Held at scaleX(0) until the card's .reveal lands, then wipes left
   to right; the per-card delay staggers the three of them across the row. */
.pillar__bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-accent) 0%, #00c962 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .8s var(--ease-out), height .35s var(--ease-out);
}

.pillar.is-visible .pillar__bar { transform: scaleX(1); }
.pillar.reveal-delay-2 .pillar__bar { transition-delay: .25s; }
.pillar.reveal-delay-3 .pillar__bar { transition-delay: .4s; }
.pillar:hover .pillar__bar { height: 6px; }

/* Number becomes a filled chip so each card opens on a piece of green rather
   than on small muted type. */
.pillar .pillar__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  padding: .4rem .6rem;
  margin-bottom: 1.5rem;
  background: var(--color-accent);
  color: #fff;
  font-size: .6875rem;
  letter-spacing: .14em;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}

.pillar:hover .pillar__number {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -6px rgba(0,166,81,.8);
}

.pillar .pillar__title { transition: color .3s var(--ease-out); }
.pillar:hover .pillar__title { color: var(--color-accent); }

.pillar .pillar__desc { position: relative; }

@media (max-width: 768px) {
  .pillar { padding: 2.5rem 1.75rem 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pillar,
  .pillar__bar,
  .pillar .pillar__number,
  .pillar::after { transition: none; }
  .pillar:hover { transform: none; }
  .pillar:hover .pillar__number { transform: none; }
  .pillar__bar { transform: scaleX(1); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEEDBACK REV 2.21.10 — What We Do photo tile placement
   The tile asked for `span 2`, but the eight service cards leave exactly one
   free column in the last row, so auto-placement pushed the photo onto a row of
   its own: an empty cell above-right of it and dead space to its right. At three
   columns it now takes the single remaining cell, closing the grid as a clean
   3x3. The narrower breakpoints keep the full-width band, which is a whole row
   there and so never left a hole to begin with.
   ═══════════════════════════════════════════════════════════════════════════ */

.service-photo {
  grid-column: auto;
  min-height: 240px;
}

/* Centre of the frame is the reception desk and the feature wall behind it, so
   the default 50% 50% is the right crop. Stated rather than implied because the
   tile's aspect ratio changes at every breakpoint. */
.service-photo__img { object-position: center center; }

/* Two-column grid: the photo is the whole final row. */
@media (max-width: 900px) {
  .service-photo { grid-column: span 2; min-height: 260px; }
}

/* Single column: one card wide, same as everything else. */
@media (max-width: 640px) {
  .service-photo { grid-column: span 1; min-height: 220px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEEDBACK REV 2.21.11 — "Who we work with" logo chips
   The strip was mostly text chips because only three logo files existed. The
   remaining eleven marks have been reversed out of the capability statement's
   client wall, so the whole row is now artwork on the same dark plate the
   testimonial brand lockups use.
   ═══════════════════════════════════════════════════════════════════════════ */

.client-chip--logo {
  /* 96px = a 72px content box plus the .75rem padding either side, so a chip
     holding a portrait mark is the same height as one holding a wordmark. */
  min-height: 96px;
  width: 190px;
}

/* Cap by height AND width rather than fixing the height. A fixed height turned
   the portrait lockups (HarperCollins, St Vincent de Paul) into 27px slivers
   next to the 150px-wide wordmarks. */
.client-chip__logo {
  height: auto;
  width: auto;
  max-height: 48px;
  max-width: 150px;
}

/* Squarer than 1.8:1 — these need the extra height to hold their own on the
   row. Still inside the 72px content box, so the chip height does not change. */
.client-chip__logo--tall { max-height: 72px; max-width: 110px; }

@media (max-width: 600px) {
  .client-chip--logo { width: 45%; min-height: 84px; }
  .client-chip__logo { max-height: 40px; max-width: 120px; }
  .client-chip__logo--tall { max-height: 60px; max-width: 90px; }
}

/* FEEDBACK REV 2.21.14 — extended project write-up */
/* The lead paragraph keeps its green rule; the extended copy below it is set as
   a separate, quieter block so the two do not read as one long slab. */
.project-content__detail {
  margin-top: 2.75rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--color-border, rgba(0,0,0,.1));
}
.project-content__detail-label {
  display: block;
  margin-bottom: 1rem;
}
.project-content__detail .project-content__text p:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
  .project-content__detail { margin-top: 2rem; padding-top: 1.75rem; }
}

/* FEEDBACK REV 2.21.15 — completion year on the portfolio cards */
/* The home strip already showed a year next to the category; the archive did
   not, so the two listings labelled the same project differently. */
.portfolio-card__topline {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin-bottom: .5rem;
}
.portfolio-card__topline .portfolio-card__cat { margin-bottom: 0; }
.portfolio-card__year {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--color-accent);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEEDBACK REV 2.21.19 — Capability Statement page
   1. Preview the actual PDF, the way the home page About aside does
   2. Break up the white: the page was four prose slabs in a row
═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. The document ─────────────────────────────────────────────────────── */
.capability-doc {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  padding: 5.5rem 0;
}

.capability-doc__grid {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 3.5rem;
  align-items: center;
}
@media (max-width: 860px) {
  .capability-doc__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .capability-doc__cover { max-width: 240px; }
}

.capability-doc__title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  margin-bottom: 1rem;
}

.capability-doc__text {
  max-width: 58ch;
  font-size: 1.0625rem;
  line-height: var(--lh-loose);
  color: var(--color-text-muted);
  margin: 0 0 2rem;
}

.capability-doc__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  list-style: none;
  margin: 0 0 2.25rem;
  padding: 0;
}
.capability-doc__facts li { display: flex; flex-direction: column; gap: .3rem; }
.capability-doc__facts strong {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-primary);
}
.capability-doc__facts span {
  font-family: var(--font-sans);
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-text-muted);
}

/* Bigger cover, with its own hover. The stacked-sheet rules further up are keyed
   to .about-aside-card--doc, the home page's wrapper, which is not present here. */
.doc-preview--lg { max-width: 300px; margin: 0; }
.doc-preview--lg:hover::before { transform: rotate(5deg) translate(9px, -3px); }
.doc-preview--lg:hover::after  { transform: rotate(2.5deg) translate(5px, -2px); }
.doc-preview--lg .doc-preview__page {
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.doc-preview--lg:hover .doc-preview__page {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .20);
}

/* Page strip. Six real pages from the PDF, each opening the full document. */
.capability-pages {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
  margin-top: 4rem;
}
@media (max-width: 1024px) { .capability-pages { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
@media (max-width: 560px)  { .capability-pages { grid-template-columns: repeat(2, 1fr); } }

.capability-page { display: block; text-decoration: none; }

.capability-page__img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
}
.capability-page:hover .capability-page__img {
  transform: translateY(-6px);
  border-color: rgba(0, 166, 81, .65);
  box-shadow: 0 18px 34px -14px rgba(0, 166, 81, .45), 0 4px 10px rgba(0, 0, 0, .10);
}

.capability-page__caption {
  display: block;
  margin-top: .75rem;
  font-family: var(--font-sans);
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-text-muted);
  transition: color .3s var(--ease-out);
}
.capability-page:hover .capability-page__caption { color: var(--color-accent); }

/* ── 2. Breaking up the prose slabs ──────────────────────────────────────── */

/* The Expertise cards carried the pillar__ child classes but not .pillar, so
   they rendered as bare text on white: the same "looks bland" problem the home
   page pillars had before 2.21.8. They now take that card treatment. The fill is
   flipped because this section sits on white, the inverse of the home page's
   tinted Our Approach band, so a white card would vanish into its ground. */
.capability-section:not(.capability-section--alt) .pillar {
  background: var(--color-bg-alt);
}

/* Vision statement, lifted out of the About paragraphs it was buried in. */
.capability-quote {
  margin: 2.5rem 0 0;
  padding: 1.5rem 0 1.5rem 2rem;
  border-left: 4px solid var(--color-accent);
  max-width: 60ch;
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 2vw, 1.4375rem);
  line-height: 1.5;
  color: var(--color-primary);
}

/* Accreditations as chips rather than a second run-on paragraph. */
.credential-list {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}
.credential {
  padding: .6rem 1.1rem;
  background: var(--color-bg);
  border: 1px solid rgba(0, 166, 81, .45);
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--color-primary);
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.credential:hover {
  border-color: var(--color-accent);
  box-shadow: 0 6px 16px -8px rgba(0, 166, 81, .6);
}

@media (prefers-reduced-motion: reduce) {
  .capability-page__img,
  .capability-page__caption,
  .credential,
  .doc-preview--lg .doc-preview__page { transition: none; }
  .capability-page:hover .capability-page__img { transform: none; }
  .doc-preview--lg:hover .doc-preview__page { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEEDBACK REV 2.21.22 — Perpetual brand colour + project scope type size
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Perpetual's mark is a navy (#004A8D) wordmark and the brand suite has no
      white-out version, so reversing it to white (as the other marks are) shows
      the wrong logo. Navy ink measures ~1.8:1 against the near-black plate, so
      it is invisible untreated. The fix lives in the artwork, not here:
      assets/clients/perpetual.png now carries a 3px white keyline around the
      glyphs, which reads at ~15:1 on the plate and carries the mark while the
      fill stays the real brand navy. No CSS override needed — the chip and the
      testimonial plate keep the same dark ground as every other client. */

/* 2. The "Scope & delivery" write-up was set at 1.0625rem while the lead
      paragraph above it ran at 1.25rem, so body copy changed size partway down
      a project page — and projects with no extended write-up showed only the
      larger lead, making the size look inconsistent from job to job as well.
      Both blocks now share the lead's size and leading; the extended copy stays
      visually secondary through its muted colour and the rule above it rather
      than through a smaller type size. */
.project-content__lead,
.project-content__detail .project-content__text {
  font-size: 1.25rem;
  line-height: 1.7;
}
.project-content__detail .project-content__text p { margin-bottom: 1.5rem; }