/* ============================================================================
   Template 4 — AGENCY, COMMISSION & BOARD   ★ the flagship

   For bodies that are NOT ministries and have no commissioner: agencies,
   commissions, boards, bureaux. Their principal is an MD/CEO, a Chairman, a
   Director-General or an SPAD — so the lead officer's TITLE is content, and
   the leadership block is built around one feature card rather than a
   "Commissioner" heading.

   This is the most visually ambitious of the four, per the brief. The single
   bold move is the hero: a live signal field drawn on canvas, because an
   agency's own material is the network it runs — not a stock photograph of a
   building. Everything else stays quiet so that one moment carries the page.

   Palette: midnight navy with an electric cyan and a warm amber. The cyan is
   the accent; the amber appears only on the index numerals and the CTA, so it
   reads as a second voice rather than a competing one.
   ========================================================================= */

:root {
  --primary:      #0a1f3d;
  --primary-dark: #05132a;
  --accent:       #00b4d8;
  --amber:        #f4a300;
  --ink-dark:     #eaf2fb;
}

/* ---- typography ---------------------------------------------------------
   Agency & Commission: the modern UI stack, with the display face carrying the
   tightest tracking of the four. A technology agency should read as current. */
:root {
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "SF Pro Display", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- hero -------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 15% 0%, #123a63 0%, transparent 60%),
    radial-gradient(90% 80% at 95% 20%, #0b3550 0%, transparent 55%),
    var(--primary-dark);
  color: #fff;
  padding-block: clamp(3.5rem, 9vw, 7.5rem) clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
}
.hero-canvas {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  opacity: .55;
}
/* Softens the seam into the next section. Kept SHORT and weighted to the last
   third — a tall fade washed the hero buttons out, which is the opposite of
   what a hero is for. */
.hero-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
  background: linear-gradient(to bottom, transparent 0%, rgb(255 255 255 / .35) 62%, var(--panel) 100%);
  pointer-events: none;
}

.hero-inner { display: grid; gap: var(--s-5); align-items: center; position: relative; }
@media (min-width: 1040px) {
  .hero-inner { grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: var(--s-6); }
}
.hero .eyebrow { color: var(--accent); }
.hero h1 {
  color: #fff;
  font-size: var(--t-4xl);
  max-width: 15ch;
  margin-bottom: var(--s-3);
}
/* The one gradient on the page, on three words only. */
.grad {
  background: linear-gradient(100deg, var(--accent) 0%, #7ee8fa 55%, var(--amber) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero .lede {
  font-size: var(--t-lg); color: rgb(255 255 255 / .82);
  max-width: 52ch; margin-bottom: var(--s-4);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Figures as a definition list — the label IS the term. */
.hero-figures {
  display: grid; gap: 1px;
  background: rgb(255 255 255 / .14);
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0;
}
@media (min-width: 620px) and (max-width: 1039px) {
  .hero-figures { grid-template-columns: repeat(3, 1fr); }
}
.hero-figures > div {
  background: rgb(5 19 42 / .72);
  backdrop-filter: blur(10px);
  padding: var(--s-3);
}
.hero-figures dt {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: rgb(255 255 255 / .62);
  margin-bottom: .3rem;
}
.hero-figures dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-2xl); font-weight: 800; line-height: 1;
  color: var(--accent); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

/* ---- about ------------------------------------------------------------- */
.about-grid { display: grid; gap: var(--s-5); }
@media (min-width: 960px) {
  .about-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
}
.lead-p { font-size: var(--t-lg); color: var(--ink); font-weight: 600; margin-block: var(--s-2); }

.values { display: grid; gap: var(--s-2); }
.value-item {
  display: flex; gap: var(--s-2); align-items: flex-start;
  background: var(--ground); border-radius: var(--radius); padding: var(--s-3);
}
.value-item .icon-badge { margin-bottom: 0; flex: none; width: 50px; height: 50px; }
.value-item .icon-badge .i { width: 23px; height: 23px; }
.value-item h3 { font-size: var(--t-lg); margin-bottom: .2rem; }
.value-item p { font-size: var(--t-sm); }

/* ---- services on a dark band ------------------------------------------ */
/* The dark band is where the agency states its remit — it separates the two
   halves of the page and gives the numerals somewhere to sit. */
.section.dark {
  background: var(--primary);
  color: rgb(255 255 255 / .78);
}
.section.dark h2, .section.dark h3 { color: #fff; }
.section.dark .eyebrow { color: var(--accent); }
.section.dark .section-head p { color: rgb(255 255 255 / .74); }

.pillar-grid {
  display: grid; gap: var(--s-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr));
}
.pillar-card {
  position: relative;
  background: rgb(255 255 255 / .05);
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: var(--radius);
  padding: var(--s-3);
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.pillar-card:hover {
  transform: translateY(-4px);
  border-color: rgb(0 180 216 / .55);
  background: rgb(255 255 255 / .08);
}
/* Numbered because these four ARE an ordered remit, in the agency's own
   priority order — not decoration. */
.pillar-index {
  position: absolute; top: .4rem; right: .9rem;
  font-family: var(--font-mono); font-size: 3.2rem; font-weight: 700;
  color: rgb(244 163 0 / .22); line-height: 1; letter-spacing: -.04em;
}
.pillar-card .icon-badge {
  background: rgb(0 180 216 / .14);
  color: var(--accent);
}
.pillar-card h3 { font-size: var(--t-lg); margin-bottom: .35rem; }
.pillar-card p { font-size: var(--t-sm); color: rgb(255 255 255 / .74); }

/* ---- leadership -------------------------------------------------------- */
.principal {
  display: grid; gap: var(--s-3);
  background: var(--ground);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--s-4);
}
@media (min-width: 820px) {
  .principal { grid-template-columns: minmax(260px, .8fr) minmax(0, 1.6fr); gap: 0; align-items: stretch; }
}
.principal img {
  width: 100%; height: 100%; min-height: 280px;
  object-fit: cover; object-position: center top;
  background: var(--line);
}
.principal-body { padding: var(--s-4) var(--s-3); align-self: center; }
@media (min-width: 820px) { .principal-body { padding: var(--s-4); } }

/* The TITLE leads, above the name — because on an agency site the office is
   the fact a visitor is checking, and it is not "Commissioner". */
.principal-role {
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .4rem;
}
.principal-body h3 { font-size: var(--t-2xl); margin-bottom: var(--s-2); }
.principal blockquote {
  margin: 0 0 var(--s-2);
  padding-left: var(--s-2);
  border-left: 4px solid var(--amber);
  font-size: var(--t-lg); font-weight: 600; font-style: italic;
  color: var(--ink); text-wrap: pretty;
}
.principal-body > p { font-size: var(--t-sm); }
.team-grid { margin-top: var(--s-3); }

/* ---- CTA band ---------------------------------------------------------- */
.cta-band {
  background: linear-gradient(105deg, var(--primary-dark) 0%, var(--primary) 55%, #12456b 100%);
  color: #fff;
  padding-block: var(--s-5);
}
.cta-band .wrap {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  align-items: center; justify-content: space-between;
}
.cta-band h2 { color: #fff; font-size: var(--t-xl); margin-bottom: .3rem; }
.cta-band p { color: rgb(255 255 255 / .78); font-size: var(--t-sm); }
.cta-band .btn-accent { background: var(--amber); color: var(--primary-dark); }
.cta-band .btn-accent:hover { color: var(--primary-dark); }

/* Amber, not cyan, for the officer role here — it ties the leadership block
   to the CTA and keeps cyan reserved for structural accents. */
#leadership .officer .role { color: #b8770a; }