/* ===========================================================
   HIIA Development Centre Limited — Global Stylesheet
   =========================================================== */

:root {
  --green-950: #0b2019;
  --green-900: #102b21;
  --green-800: #163a2c;
  --green-700: #1c4a37;
  --green-600: #235c44;
  --green-100: #e7efe9;
  --green-50: #f2f6f3;

  --gold-700: #9c7a2e;
  --gold-600: #b5913d;
  --gold-500: #c9a350;
  --gold-400: #d9bc73;
  --gold-100: #f6ecd4;

  --cream: #faf7f0;
  --white: #ffffff;
  --ink: #1c2420;
  --ink-soft: #4a564d;
  --ink-faint: #7c8a80;
  --border: #e4ddc9;

  --shadow-sm: 0 1px 3px rgba(11, 32, 25, 0.08);
  --shadow-md: 0 8px 24px rgba(11, 32, 25, 0.10);
  --shadow-lg: 0 20px 50px rgba(11, 32, 25, 0.16);

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

  --font-head: "Playfair Display", "Georgia", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

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

/* height: auto matters as much as max-width here. Without it an image whose
   width gets constrained keeps its intrinsic height and renders distorted. */
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--green-900);
  line-height: 1.2;
  margin: 0 0 0.5em;
  font-weight: 700;
}

h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.35rem; }

p { margin: 0 0 1em; color: var(--ink-soft); }

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

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--gold-500);
  display: inline-block;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--gold-500);
  color: var(--green-950);
}
.btn-primary:hover { background: var(--gold-400); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn-outline {
  background: transparent;
  border-color: rgba(255,255,255,0.55);
  color: var(--white);
}
.btn-outline:hover { background: rgba(255,255,255,0.12); border-color: var(--white); }

.btn-dark {
  background: var(--green-900);
  color: var(--white);
}
.btn-dark:hover { background: var(--green-800); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn-ghost {
  background: transparent;
  border-color: var(--green-800);
  color: var(--green-900);
}
.btn-ghost:hover { background: var(--green-900); color: var(--white); }

.btn-block { width: 100%; }

/* ---------- Top utility bar ---------- */
.topbar {
  background: var(--green-950);
  color: var(--gold-100);
  font-size: 0.82rem;
}
.topbar .container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  gap: 28px;
  flex-wrap: wrap;
}
.topbar-item { display: inline-flex; align-items: center; gap: 6px; color: rgba(246,236,212,0.85); }
.topbar-item svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ---------- Navbar ---------- */
.navbar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* The firm's mark is a photographed emblem, so it is sized by height and
   lets its own 0.88:1 proportion set the width. */
.brand-mark {
  height: 46px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.brand-mark img {
  height: 100%;
  width: auto;
  display: block;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text .name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.18rem;
  color: var(--green-900);
  letter-spacing: 0.01em;
}
.brand-text .sub {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-700);
  font-weight: 600;
  margin-top: 2px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav-links a {
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--ink);
  position: relative;
  padding: 6px 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 0;
  background: var(--gold-500);
  transition: width 0.2s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }
.nav-links a.active { color: var(--green-800); }

.nav-cta { display: flex; align-items: center; gap: 18px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 26px;
  height: 2px;
  background: var(--green-900);
  display: block;
  transition: all 0.25s ease;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(201,163,80,0.16), transparent 55%),
    linear-gradient(160deg, var(--green-950) 0%, var(--green-800) 55%, var(--green-700) 100%);
  color: var(--white);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(11,32,25,0.35), rgba(11,32,25,0.55)),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 90px);
  pointer-events: none;
}
.hero .container {
  position: relative;
  padding-top: 96px;
  padding-bottom: 100px;
}
.hero-inner { max-width: 700px; }
.hero .eyebrow { color: var(--gold-400); }
.hero .eyebrow::before { background: var(--gold-400); }
.hero h1 { color: var(--white); }
.hero p.lead {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.82);
  max-width: 560px;
}
.hero-actions { display: flex; gap: 16px; margin-top: 34px; flex-wrap: wrap; }

.hero-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 70px;
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-top: 34px;
}
.hero-stats .stat { padding-right: 20px; }
.hero-stats .stat .num {
  font-family: var(--font-head);
  font-size: 2rem;
  color: var(--gold-400);
  font-weight: 700;
}
.hero-stats .stat .label {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.72);
  margin-top: 4px;
}

/* Simple page header (non-home pages) */
.page-header {
  background:
    linear-gradient(160deg, var(--green-950) 0%, var(--green-800) 60%, var(--green-700) 100%);
  color: var(--white);
  padding: 70px 0 60px;
  position: relative;
  overflow: hidden;
}
.page-header::after {
  content: "";
  position: absolute;
  right: -80px; top: -80px;
  width: 320px; height: 320px;
  border: 1px solid rgba(201,163,80,0.28);
  border-radius: 50%;
}
.page-header .eyebrow { color: var(--gold-400); }
.page-header .eyebrow::before { background: var(--gold-400); }
.page-header h1 { color: var(--white); margin-bottom: 12px; }
.page-header p { color: rgba(255,255,255,0.78); max-width: 640px; font-size: 1.05rem; }
.breadcrumb {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 18px;
}
.breadcrumb a { color: rgba(255,255,255,0.85); }
.breadcrumb a:hover { color: var(--gold-400); }

/* ---------- Sections ---------- */
.section { padding: 88px 0; }
.section-tight { padding: 60px 0; }
.section-alt { background: var(--white); }
.section-dark {
  background: var(--green-950);
  color: rgba(255,255,255,0.85);
}
.section-dark h2, .section-dark h3 { color: var(--white); }
.section-dark p { color: rgba(255,255,255,0.68); }

.section-head { max-width: 640px; margin-bottom: 52px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Grid / Cards ---------- */
.grid { display: grid; gap: 30px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 34px 28px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* Shown in place of a list that the CMS has not been given entries for yet.
   grid-column makes it span the full row rather than sit in the first cell. */
.empty-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 34px 28px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--ink-soft);
  text-align: center;
  text-wrap: pretty;
}
.empty-note a { color: var(--gold-700); font-weight: 600; text-decoration: underline; }
.empty-note a:hover { color: var(--green-800); }

.pillar-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}
.pillar-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.pillar-media {
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.pillar-media svg { width: 54px; height: 54px; color: var(--white); }
.pillar-media.construction { background: linear-gradient(135deg, var(--green-800), var(--green-600)); }
.pillar-media.agri { background: linear-gradient(135deg, #2d5a3d, #4c8158); }
.pillar-media.training { background: linear-gradient(135deg, var(--gold-700), var(--gold-500)); }
.pillar-body { padding: 28px; flex: 1; display: flex; flex-direction: column; }
.pillar-body h3 { margin-bottom: 10px; }
.pillar-body p { flex: 1; }
.pillar-link {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--green-800);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}
.pillar-link svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.pillar-card:hover .pillar-link svg { transform: translateX(4px); }

.icon-badge {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--green-100);
  color: var(--green-800);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.icon-badge svg { width: 26px; height: 26px; }
.icon-badge.gold { background: var(--gold-100); color: var(--gold-700); }

/* ---------- Split / About blocks ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.split-media {
  border-radius: var(--radius-lg);
  min-height: 380px;
  background: linear-gradient(150deg, var(--green-800), var(--green-600));
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.split-media .pattern {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 26px);
}
.split-media .glyph { width: 130px; height: 130px; color: rgba(255,255,255,0.9); position: relative; }

.check-list { list-style: none; margin: 24px 0; padding: 0; }
.check-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
  color: var(--ink-soft);
}
.check-list svg {
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: var(--gold-600);
  margin-top: 2px;
}

/* ---------- Values ---------- */
.value-item { display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--border); }
.value-item:last-child { border-bottom: none; }
.value-num {
  font-family: var(--font-head);
  font-size: 1.6rem;
  color: var(--gold-500);
  font-weight: 700;
  width: 46px;
  flex-shrink: 0;
}

/* ---------- Team ---------- */
.team-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 30px;
  text-align: center;
}
.team-avatar {
  width: 92px; height: 92px;
  border-radius: 50%;
  margin: 0 auto 18px;
  background: linear-gradient(150deg, var(--green-700), var(--green-900));
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-400);
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 700;
  border: 3px solid var(--gold-100);
}
.team-card h3 { margin-bottom: 4px; }
.team-role { color: var(--gold-700); font-weight: 600; font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; }


/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: 34px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--border);
}
.timeline-item { position: relative; padding-bottom: 34px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -34px; top: 4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--gold-500);
  border: 3px solid var(--cream);
  box-shadow: 0 0 0 2px var(--gold-500);
}
.timeline-item .year { font-weight: 700; color: var(--gold-700); font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 4px; }

/* ---------- Projects ---------- */
.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.filter-btn {
  padding: 9px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--white);
  font-weight: 600;
  font-size: 0.86rem;
  cursor: pointer;
  color: var(--ink-soft);
  transition: all 0.2s ease;
}
.filter-btn:hover { border-color: var(--gold-500); color: var(--green-900); }
.filter-btn.active { background: var(--green-900); border-color: var(--green-900); color: var(--white); }

.project-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.project-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.project-media {
  height: 190px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  background: linear-gradient(160deg, var(--green-700), var(--green-900));
}
.project-media.agri { background: linear-gradient(160deg, #3f7350, #1f4530); }
.project-media.training { background: linear-gradient(160deg, var(--gold-600), var(--gold-700)); }
.project-media .pattern {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 2px, transparent 2px, transparent 22px);
}
.project-tag {
  position: relative;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(4px);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  border-radius: 999px;
}
.project-body { padding: 24px; }
.project-body .loc { font-size: 0.82rem; color: var(--gold-700); font-weight: 700; margin-bottom: 6px; }
.project-status {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  margin-top: 10px;
}
.project-status.ongoing { background: var(--gold-100); color: var(--gold-700); }
.project-status.complete { background: var(--green-100); color: var(--green-800); }

/* ---------- CTA banner ---------- */
.cta-banner {
  background: linear-gradient(135deg, var(--green-900), var(--green-700));
  border-radius: var(--radius-lg);
  padding: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.cta-banner::after {
  content: "";
  position: absolute;
  right: -60px; bottom: -80px;
  width: 240px; height: 240px;
  border-radius: 50%;
  border: 1px solid rgba(201,163,80,0.3);
}
.cta-banner h2 { color: var(--white); margin-bottom: 8px; }
.cta-banner p { color: rgba(255,255,255,0.75); margin: 0; }
.cta-text { max-width: 480px; position: relative; }
.cta-actions { position: relative; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Testimonial / quote ---------- */
.quote-block {
  border-left: 3px solid var(--gold-500);
  padding-left: 26px;
  font-family: var(--font-head);
  font-size: 1.3rem;
  color: var(--green-900);
  font-style: italic;
  margin: 30px 0;
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 50px;
}
.contact-info-card {
  background: var(--green-950);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px;
}
.contact-info-card h2, .contact-info-card h3 { color: var(--white); font-size: 1.35rem; }
.contact-info-card p { color: rgba(255,255,255,0.65); }
.contact-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.contact-row:last-of-type { border-bottom: none; }
.contact-row .icon-badge { background: rgba(201,163,80,0.16); color: var(--gold-400); margin-bottom: 0; flex-shrink: 0; }
.contact-row .label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold-400); font-weight: 700; margin-bottom: 4px; }
.contact-row .value { color: rgba(255,255,255,0.92); font-weight: 500; }

.form-card h2 { font-size: 1.35rem; }
.form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 42px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--green-900);
  margin-bottom: 8px;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--green-50);
  color: var(--ink);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold-500);
  background: var(--white);
}
.field textarea { resize: vertical; min-height: 130px; }

.form-note { font-size: 0.82rem; color: var(--ink-faint); margin-top: 14px; }
.form-success {
  display: none;
  background: var(--green-100);
  color: var(--green-800);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  font-weight: 600;
  margin-bottom: 20px;
  align-items: center;
  gap: 10px;
}
.form-success.show { display: flex; }
.form-error {
  background: #fbe9e7;
  color: #a83b2c;
}
.form-success svg { width: 20px; height: 20px; flex-shrink: 0; }

.map-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  height: 340px;
  filter: grayscale(20%) contrast(1.05);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; }

/* ---------- FAQ ---------- */
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 22px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 1.05rem;
  color: var(--green-900);
  font-weight: 700;
}
.faq-q svg { width: 20px; height: 20px; color: var(--gold-600); transition: transform 0.25s ease; flex-shrink: 0; }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
/* Panel visibility is driven by the [hidden] attribute set in JS, so
   collapsed answers are removed from the accessibility tree entirely
   and long answers are never clipped. */
.faq-a { overflow: hidden; }
.faq-a p { padding: 0 4px 22px; margin: 0; }
.faq-item.open .faq-a { animation: faq-open 0.28s ease both; }
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Footer ---------- */
.footer {
  background: var(--green-950);
  color: rgba(255,255,255,0.62);
  padding-top: 70px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer .brand-text .name { color: var(--white); }
/* The emblem's map is dark green, so on the dark footer it sits on the same
   light ground it was drawn on rather than being recoloured. */
.footer .brand-mark {
  width: 54px;
  height: 54px;
  background: var(--cream);
  border-radius: 50%;
}
.footer .brand-mark img { height: 40px; }
.footer-about p { color: rgba(255,255,255,0.55); font-size: 0.92rem; margin-top: 16px; }
.footer h2 {
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { margin-bottom: 12px; }
.footer ul a { color: rgba(255,255,255,0.62); font-size: 0.92rem; transition: color 0.2s ease; }
.footer ul a:hover { color: var(--gold-400); }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; color: rgba(255,255,255,0.62); font-size: 0.92rem; }
.footer-contact svg { width: 17px; height: 17px; color: var(--gold-400); flex-shrink: 0; margin-top: 2px; }
.social-row { display: flex; gap: 10px; margin-top: 20px; }
.social-row a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
}
.social-row a:hover { background: var(--gold-500); border-color: var(--gold-500); }
.social-row svg { width: 16px; height: 16px; color: rgba(255,255,255,0.8); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  font-size: 0.82rem;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-bottom a { color: rgba(255,255,255,0.5); }
.footer-bottom a:hover { color: var(--gold-400); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split-media { min-height: 280px; order: -1; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
}

/* The desktop nav stops fitting well before the 760px mobile breakpoint:
   from about 950px down the brand wraps onto three lines and the links run
   into it. Switch to the menu button at the same 980px the rest of the
   layout already uses. */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-primary { display: none; }

  .navbar.nav-open .nav-links {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--white);
    flex-direction: column;
    padding: 24px;
    gap: 18px;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
  }
}

/* Below ~420px the brand name wraps and the tagline breaks onto two lines
   of its own. Dropping the tagline keeps the header to a single line. */
@media (max-width: 420px) {
  .brand-text .sub { display: none; }
  .brand-text .name { font-size: 1.02rem; }
  .brand { gap: 10px; }
}

@media (max-width: 760px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .cta-banner { padding: 36px 28px; flex-direction: column; align-items: flex-start; }
  .section { padding: 60px 0; }
  .topbar .container { justify-content: center; text-align: center; }
}

/* ===========================================================
   COMPONENTS & UTILITIES
   Added so that no inline style="" attributes are required
   anywhere in the markup — this lets us serve a strict
   Content-Security-Policy with style-src 'self' (no
   'unsafe-inline'), which is a meaningful XSS mitigation.
   =========================================================== */

/* ---------- Layout primitives ---------- */
.stack { display: flex; flex-direction: column; gap: 26px; }
.stack-roles { gap: 24px; }

.measure-sm { max-width: 760px; margin-left: auto; margin-right: auto; }
.measure-md { max-width: 860px; margin-left: auto; margin-right: auto; }
.measure-lg { max-width: 900px; margin-left: auto; margin-right: auto; }
.measure-xl { max-width: 940px; margin-left: auto; margin-right: auto; }

.text-center { text-align: center; }
.center-x { justify-content: center; }
.gap-30 { gap: 30px; }
.media-first { order: -1; }
.icon-center { margin-left: auto; margin-right: auto; }
.mb-0 { margin-bottom: 0; }
.mb-8 { margin-bottom: 8px; }
.mb-14 { margin-bottom: 14px; }
.mt-14 { margin: 14px 0 0; }
.actions-center { text-align: center; margin-top: 44px; }

/* ---------- Links ---------- */
.link-plain { color: inherit; }
.link-underline { color: inherit; text-decoration: underline; }
.link-emphasis {
  color: var(--green-800);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-emphasis:hover { color: var(--gold-700); }

/* Headings that sit on the dark section background */
.on-dark { color: var(--white); }

/* ---------- Spam honeypot (must stay invisible to humans) ---------- */

/* ---------- Testimonial cards ---------- */
.tm-quote {
  font-style: italic;
  color: var(--ink);
  font-size: 1.02rem;
}
.tm-name {
  font-size: 1rem;
  margin-top: 18px;
  margin-bottom: 2px;
}

/* ---------- News / newsroom list ---------- */
.news-item {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.news-meta { min-width: 110px; }
.news-date { margin: 10px 0 0; }
.news-body { flex: 1; min-width: 260px; }

/* ---------- Careers / open roles ---------- */
.role-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.role-body { flex: 1; min-width: 260px; }
.role-aside { text-align: right; min-width: 170px; }
.role-badge { display: block; margin-bottom: 10px; }

/* ---------- Bare CTA (already inside a dark section) ---------- */
.cta-bare { background: transparent; padding: 0; }
.cta-bare::after { display: none; }

/* ---------- 404 page ---------- */
.hero-compact { min-height: 60vh; display: flex; align-items: center; }
.hero-compact .container { padding-top: 70px; padding-bottom: 70px; text-align: center; }
.hero-compact .lead { margin: 0 auto 34px; }
.footer-slim { padding-top: 40px; }
.footer-slim .footer-bottom { border-top: none; padding-top: 0; }

/* ===========================================================
   ACCESSIBILITY
   =========================================================== */

/* Skip link — first focusable element on every page */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 999;
  background: var(--green-900);
  color: var(--white);
  padding: 12px 22px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.18s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* Visible, high-contrast focus ring for keyboard users only */
:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 3px;
}
.section-dark :focus-visible,
.hero :focus-visible,
.page-header :focus-visible,
.footer :focus-visible,
.contact-info-card :focus-visible,
.cta-banner :focus-visible {
  outline-color: var(--gold-400);
}

/* Screen-reader-only text */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Hidden state used by the project filter (replaces JS inline styles) */
[hidden], .is-hidden { display: none !important; }

/* ===========================================================
   MOTION — scroll reveal, fully opt-out under reduced motion
   =========================================================== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* If JS never runs, content must still be visible */
.no-js .reveal { opacity: 1; transform: none; }

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

/* ===========================================================
   MOBILE NAV — animated hamburger
   =========================================================== */
.navbar.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.navbar.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===========================================================
   PRINT
   =========================================================== */
@media print {
  .topbar, .navbar, .nav-toggle, .cta-banner, .social-row,
  .map-frame, .filter-bar, .skip-link, .form-card { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section, .section-tight { padding: 18pt 0; }
  .hero, .page-header, .section-dark, .contact-info-card {
    background: #fff !important;
    color: #000 !important;
  }
  .hero h1, .page-header h1, .section-dark h2, .section-dark h3,
  .contact-info-card h3, .on-dark { color: #000 !important; }
  .hero p, .page-header p, .section-dark p, .contact-info-card p { color: #222 !important; }
  .card, .project-card, .pillar-card, .team-card {
    border: 1pt solid #999;
    break-inside: avoid;
    box-shadow: none;
  }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .footer { background: #fff !important; color: #000 !important; padding-top: 12pt; }
  .footer ul a, .footer-contact li, .footer-bottom { color: #000 !important; }
  .footer .brand-mark { background: none; width: auto; }
}

/* ===========================================================
   ORIGINAL BRAND ARTWORK
   All illustrations are drawn in-house as SVG: they are
   resolution-independent, tiny, same-origin (CSP-safe), and
   decorative — they never stand in for photographs of real
   client projects.
   =========================================================== */

/* Hero: illustrated panel anchored right, fading out behind the copy */
.hero::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 58%;
  background: url("../assets/art/hero-panel.svg") right bottom / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%);
  mask-image: linear-gradient(to right, transparent 0%, #000 34%);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}
.hero .container { z-index: 1; }
.hero-inner { position: relative; }

/* Pillar cards now carry full illustrations instead of a lone glyph */
.pillar-media {
  height: 172px;
  padding: 0;
  overflow: hidden;
}
.pillar-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.pillar-card:hover .pillar-media img { transform: scale(1.045); }

/* ===========================================================
   DESIGN REFINEMENTS
   =========================================================== */

/* Tighter optical rhythm on display type */
h1 { letter-spacing: -0.015em; }
h2 { letter-spacing: -0.01em; }
.hero h1 { text-wrap: balance; }
.section-head h2 { text-wrap: balance; }
.section-head p { text-wrap: pretty; }

/* Gold rule under the primary section headings */
.section-head.center { position: relative; }

/* Cards: crisper elevation and a gold edge on hover */
.card, .pillar-card, .project-card, .team-card {
  box-shadow: var(--shadow-sm);
}
.card:hover, .pillar-card:hover, .project-card:hover {
  border-color: var(--gold-400);
}

/* Stat figures get a subtle underline accent */
.hero-stats .stat { position: relative; }
.hero-stats .stat::before {
  content: "";
  position: absolute;
  top: -34px; left: 0;
  width: 28px; height: 2px;
  background: var(--gold-500);
}

/* Buttons: gentler, more premium press feedback */
.btn { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease; }
.btn:active { transform: translateY(0); }


/* Quote block: real italic face now available */
.quote-block { text-wrap: pretty; }

/* Timeline dots align to the gold accent */
.timeline-item .year { letter-spacing: 0.06em; }

/* Selection colour matches the brand */
::selection { background: var(--gold-400); color: var(--green-950); }

/* Respect users who ask for more contrast */
@media (prefers-contrast: more) {
  :root { --ink-soft: #33403a; --ink-faint: #4d5b53; --border: #b9ad8e; }
  .btn-primary { background: var(--gold-600); }
}

@media (max-width: 980px) {
  .hero::after { width: 100%; opacity: 0.30; -webkit-mask-image: none; mask-image: none; }
  .hero-stats .stat::before { display: none; }
}

/* Sticky footer — short pages (e.g. 404) must still fill the viewport */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; display: flex; flex-direction: column; }
body > main > * { flex: 0 0 auto; }
body > main > .hero-compact { flex: 1 0 auto; }
body > .footer { flex-shrink: 0; }

/* Director portrait supplied through the CMS — matches .team-avatar's footprint */
.team-photo {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 18px;
  border: 3px solid var(--gold-100);
  background: var(--green-100);
}