/* ==========================================================================
   Avaroa Cables Limited — Statement of Corporate Intent 2026–2028
   Shared stylesheet. Loaded after Bootstrap 5.
   ========================================================================== */

:root {
  /* Brand palette — derived from the SCI cover and section headers */
  --acl-teal-900: #063f3c;
  --acl-teal-700: #0c6560;
  --acl-teal-500: #128377;
  --acl-teal-100: #d7eae6;
  --acl-teal-050: #f2f8f7;

  /* Deep-water neutrals, from the cover photograph */
  --acl-abyss:    #1e2a30;
  --acl-slate:    #3d4c54;
  --acl-mist:     #8fa3ab;
  --acl-paper:    #ffffff;

  /* Accent — the copper conductor in the cable cross-section */
  --acl-copper:   #b4713d;

  --acl-radius:   4px;
  --acl-maxw:     1180px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--acl-abyss);
  background: var(--acl-paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .display-face {
  font-family: "Barlow Condensed", "Inter", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.06; }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.14; }
h3 { font-size: 1.28rem; }

p { line-height: 1.68; }

a { color: var(--acl-teal-700); }
a:hover { color: var(--acl-teal-500); }

.container-acl {
  max-width: var(--acl-maxw);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* Focus visibility — keyboard users */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible {
  outline: 3px solid var(--acl-copper);
  outline-offset: 2px;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Signature: the fibre-strand rule
   Two hairlines and a copper core, echoing the cable cross-section.
   Used to open every major section.
   -------------------------------------------------------------------------- */

/* The fibre rule: a cross-section of the cable — a solid teal bar with a
   copper core running through it. Built from solid contiguous bands: an
   earlier version used 1px strands separated by `transparent`, which lets the
   page background through as white gaps and washes the mark out. Separators are
   painted a pale tint instead, keeping the three-strand look intact. An
   literal white gaps and reads as a faint scribble (verified in-browser at
   DPR 1 and 2). Never reintroduce transparent gaps here. */
.fibre-rule {
  height: 4px;
  width: 160px;
  max-width: 100%;
  border-radius: 2px;
  background:
    linear-gradient(to bottom,
      var(--acl-teal-500) 0 1.5px,
      var(--acl-copper)  1.5px 2.5px,
      var(--acl-teal-500) 2.5px 4px);
  margin-bottom: 1.1rem;
}

.fibre-rule--short { width: 96px; }

.fibre-rule--light {
  background:
    linear-gradient(to bottom,
      #fff 0 1.5px,
      var(--acl-copper) 1.5px 2.5px,
      #fff 2.5px 4px);
}

/* Text-attached variant: the same mark, but sized to the label it underlines
   rather than sitting as a separate block. Wrap the text in a span:
     <p class="eyebrow"><span class="acl-underline">Purpose</span></p> */
.acl-underline {
  display: inline-block;
  text-decoration: none;
  background:
    linear-gradient(to bottom,
      var(--acl-teal-500) 0 1px,
      var(--acl-teal-100) 1px 2px,
      var(--acl-copper) 2px 3px,
      var(--acl-teal-100) 3px 4px,
      var(--acl-teal-500) 4px 5px);
  background-position: bottom;
  background-size: 100% 5px; 
  background-repeat: no-repeat;
  padding-bottom: 12px; /* Adds space between text and underline */
}

/* Under a large heading the mark needs a little more air than under a small
   uppercase eyebrow, and a touch of space beneath before the body copy. */
.acl-underline--heading {
  padding-bottom: 14px;
  margin-bottom: .6rem;
}

/* Card headings carrying the text-attached mark. The mark hugs the words, so
   wrapped headings keep the rule under the last line instead of stranding a
   detached bar below the block. */
.h3-underline {
  margin-bottom: 1.1rem;
}
.h3-underline .acl-underline {
  padding-bottom: 10px;
}

/* On dark headers the teal strands would disappear, so swap to white. */
.eyebrow--light .acl-underline,
.page-head .acl-underline {
  background-image:
    linear-gradient(to bottom,
      #fff 0 1px,
      rgba(255,255,255,.28) 1px 2px,
      var(--acl-copper) 2px 3px,
      rgba(255,255,255,.28) 3px 4px,
      #fff 4px 5px);
}

.eyebrow {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--acl-teal-500);
}

.eyebrow--light { color: var(--acl-teal-100); }

/* Cook Islands Māori sub-headings sit alongside the English */
.te-reo {
  font-style: italic;
  font-weight: 400;
  color: var(--acl-slate);
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.acl-nav {
  background: var(--acl-teal-900);
  padding-block: 0.4rem;
}

.acl-nav .navbar-brand {
  padding-block: 0;
  margin-right: 1.25rem;
  display: flex;
  align-items: center;
}

/* Logo artwork is white-on-transparent, so it reads on the dark navbar.
   Height-constrained; width follows the ~2:1 artwork ratio. */
.navbar-brand__logo {
  height: 68px;
  width: auto;
  display: block;
}

.acl-nav .nav-link {
  color: rgba(255,255,255,.82);
  font-size: 0.92rem;
  padding-inline: 0.85rem;
  border-bottom: 2px solid transparent;
}

.acl-nav .nav-link:hover { color: #fff; }

.acl-nav .nav-link.active {
  color: #fff;
  border-bottom-color: var(--acl-copper);
}

.acl-nav .navbar-toggler {
  border-color: rgba(255,255,255,.3);
  box-shadow: none;
}

/* Bootstrap adds a large box-shadow ring on :focus — suppress it, but keep a
   visible focus indicator for keyboard users via the :focus-visible rule below. */
.acl-nav .navbar-toggler:focus {
  box-shadow: none;
  outline: none;
}

.acl-nav .navbar-toggler:focus-visible {
  outline: 3px solid var(--acl-copper);
  outline-offset: 2px;
}

.acl-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Below the lg breakpoint the menu collapses behind the toggler. Force the
   dropped panel to span the full navbar width and stack left-aligned, so it
   can never render as a narrow box clipped off the right edge (which happens
   if a justify-content-end lands on the collapsed container). Also gives the
   links breathing room and a divider from the bar above. */
@media (max-width: 991.98px) {
  /* The nav row uses .d-flex (logo | toggler | collapse) which, without
     wrapping, keeps the collapsed panel on the same line as the logo and
     squeezes it off the right edge. Allow the row to wrap and let the logo
     take the full first line, so the opened menu drops onto the next line —
     directly beneath the logo. */
  .acl-nav .container-acl {
    flex-wrap: wrap;
    align-items: center;
  }
  .acl-nav .navbar-brand {
    margin-right: auto;   /* push the toggler to the far right of line one */
  }
  .acl-nav .navbar-collapse {
    flex-basis: 100%;     /* force onto its own line under the logo/toggler */
    width: 100%;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255,255,255,.15);
  }
  .acl-nav .navbar-nav {
    width: 100%;
    align-items: flex-start;
  }
  .acl-nav .nav-link {
    padding-block: 0.6rem;
  }
}

/* --------------------------------------------------------------------------
   Page header — the subsea-depth gradient
   -------------------------------------------------------------------------- */

.page-head {
  background: linear-gradient(170deg, var(--acl-teal-900) 0%, var(--acl-abyss) 100%);
  color: #fff;
  padding-block: 3.4rem 3rem;
  position: relative;
  overflow: hidden;
}

.page-head::after {
  /* A single fibre tracing across the depth field.
     Sits low in the band, clear of the headline, and always behind content. */
  content: "";
  position: absolute;
  right: -8%;
  bottom: 1.75rem;
  width: 45%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--acl-teal-500), var(--acl-copper), transparent);
  opacity: .4;
  z-index: 0;
  pointer-events: none;
}

/* Keep header content above the decorative fibre. */
.page-head > * {
  position: relative;
  z-index: 1;
}

.page-head h1 { color: #fff; margin-bottom: .35rem; }
.page-head .te-reo { color: var(--acl-teal-100); }
.page-head .lead { color: rgba(255,255,255,.82); max-width: 46rem; }

/* Home hero — taller, image-backed */
.hero {
  height: 500px;
  box-sizing: border-box;   /* 500px total, padding included — not 500px + padding */
  display: flex;
  align-items: flex-end;
  background:
    linear-gradient(180deg, rgba(6,63,60,.55) 0%, rgba(30,42,48,.92) 100%),
    var(--acl-abyss);
  background-size: cover;
  background-position: center;
  color: #fff;
  padding-block: 4rem 3rem;
}

.hero .vision {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(2.3rem, 5.2vw, 4.2rem);
  line-height: 1.02;
  font-weight: 600;
  max-width: 18ch;
}

.hero .vision em {
  font-style: normal;
  color: var(--acl-teal-100);
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section       { padding-block: 4rem; }
.section--tint { background: var(--acl-teal-050); }
.section--deep { background: var(--acl-teal-900); color: #fff; }
.section--deep h2, .section--deep h3 { color: #fff; }
.section--deep p { color: rgba(255,255,255,.84); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.acl-card {
  background: #fff;
  border: 1px solid var(--acl-teal-100);
  border-radius: var(--acl-radius);
  padding: 1.6rem;
  transition: border-color .18s ease, transform .18s ease;
}

/* Opt in to equal-height only where a card is the sole child of a grid column
   and should match its siblings. Applying height:100% to every .acl-card makes
   standalone cards overflow their auto-height parent. */
.acl-card--fill { height: 100%; }

/* Long unbroken strings (URLs, part numbers) must not force a card wider than
   its column and push it over the neighbouring one. */
.acl-card, .pillar { min-width: 0; overflow-wrap: break-word; }

.acl-card:hover {
  border-color: var(--acl-teal-500);
  transform: translateY(-2px);
}

.acl-card h3 { margin-bottom: .6rem; }

/* News cards carry full headlines rather than the short labels used elsewhere,
   so they wrap to 2–3 lines. Tighten the leading and let the link inherit the
   heading colour so the card reads as a headline, not a list of links. */
.acl-card h3 { line-height: 1.18; }

.acl-card h3 a {
  color: inherit;
  text-decoration: none;
}

.acl-card h3 a:hover,
.acl-card h3 a:focus-visible {
  color: var(--acl-teal-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.acl-card p:last-child { margin-bottom: 0; }

/* News lead story. The headline is a link but now carries the fibre mark on an
   inner span, so a hover text-decoration would collide with the mark. The
   colour shift alone signals the affordance; the mark stays untouched. */
.news-lead h2 a {
  color: inherit;
  text-decoration: none;
}

.news-lead h2 a:hover,
.news-lead h2 a:focus-visible {
  color: var(--acl-teal-700);
  text-decoration: none;
}

/* Org chart nodes: tinted fill so the reporting-line boxes read as a single
   connected diagram rather than as separate content cards. */
.acl-card--node {
  background: var(--acl-teal-100);
  border-color: var(--acl-teal-500);
  padding: .7rem 1rem;
}
.acl-card--node:hover {
  border-color: var(--acl-teal-700);
  transform: none;
}

.acl-card__num {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--acl-teal-100);
  font-weight: 600;
}

/* Pillar cards — OPERATE / MAXIMISE / CONTRIBUTE */
.pillar {
  border-top: 4px solid var(--acl-teal-500);
  background: #fff;
  border-radius: var(--acl-radius);
  padding: 1.75rem;
  box-shadow: 0 1px 3px rgba(30,42,48,.06);
}

/* As with .acl-card--fill: equal-height is opt-in, for pillars sharing a row. */
.pillar--fill { height: 100%; }

.pillar__name {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  font-size: 1.45rem;
  color: var(--acl-teal-700);
  margin-bottom: .9rem;
}

.pillar ol { padding-left: 1.1rem; margin-bottom: 1.2rem; }
.pillar ol li { margin-bottom: .45rem; line-height: 1.55; }
.pillar h4 {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--acl-slate);
  margin-bottom: .55rem;
}

/* --------------------------------------------------------------------------
   Lists
   -------------------------------------------------------------------------- */

.tick-list { list-style: none; padding-left: 0; }

.tick-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .6rem;
  line-height: 1.6;
}

.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 2px;
  background: var(--acl-copper);
}

.tick-list--light li::before { background: var(--acl-teal-100); }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.acl-table { width: 100%; border-collapse: collapse; }

.acl-table thead th {
  background: var(--acl-teal-700);
  color: #fff;
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
  padding: .7rem .9rem;
  font-size: .9rem;
}

.acl-table td {
  border-bottom: 1px solid var(--acl-teal-100);
  padding: .75rem .9rem;
  vertical-align: top;
  font-size: .94rem;
}

.acl-table tbody tr:hover { background: var(--acl-teal-050); }

.acl-table .pillar-cell {
  background: var(--acl-teal-050);
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  color: var(--acl-teal-700);
  white-space: nowrap;
}

/* Desktop column proportions for the KPI table (mobile overrides these in the
   max-width block below, where the first two columns rotate to vertical). */
.kpi-table .col-pillar { width: 14%; }
.kpi-table .col-goal   { width: 20%; }

/* --------------------------------------------------------------------------
   Timeline — milestones
   -------------------------------------------------------------------------- */

.timeline { position: relative; padding-left: 2.4rem; }

.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: .5rem;
  bottom: .5rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--acl-teal-500), var(--acl-copper));
}

.timeline__item { position: relative; padding-bottom: 2rem; }

.timeline__item::before {
  content: "";
  position: absolute;
  left: -2.4rem;
  top: .45rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--acl-teal-500);
}

.timeline__year {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--acl-teal-700);
  line-height: 1;
  margin-bottom: .5rem;
}

.timeline__item ul { padding-left: 0; list-style: none; margin: 0; }
.timeline__item ul li { margin-bottom: .35rem; line-height: 1.55; }
.timeline__item ul li::before {
  content: "— ";
  color: var(--acl-copper);
}

/* --------------------------------------------------------------------------
   People
   -------------------------------------------------------------------------- */

/* Portraits are supplied already square and pre-cropped, so the image sizes
   itself — no forced aspect-ratio box (which would letterbox and reveal a
   background strip) and no object-fit needed. */
.person__photo {
  display: block;
  width: 132px;
  max-width: 100%;
  height: auto;
  border-radius: var(--acl-radius);
}

/* A larger variant for feature placements (foreword portrait), where the
   photo carries the column rather than sitting beside a bio. */
.person__photo--feature { width: 200px; }

/* Each board member sits in a bordered card. The border lives on the card
   rather than the grid column, so the row gutter stays outside it. */
.person-card {
  border: 1px solid var(--acl-teal-100);
  border-left: 3px solid var(--acl-teal-500);
  border-radius: var(--acl-radius);
  padding: 1.5rem;
  height: 100%;
  background: #fff;
  transition: border-color .18s ease;
}

.person-card:hover {
  border-color: var(--acl-teal-500);
}

.person__name {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--acl-teal-700);
  margin-bottom: .1rem;
}

.person__role {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .74rem;
  color: var(--acl-slate);
  margin-bottom: .9rem;
}

/* Photo and bio are siblings in a row; kill the leading paragraph margin so
   the first line of text sits flush with the top of the portrait. */
.person__bio > p:first-child { margin-top: 0; }

/* A portrait inside a <figure> must keep its own sizing: the generic
   `.figure-acl img` rule (width:100% + teal background) would otherwise win on
   specificity and reintroduce the letterbox strip. */
.figure-acl img.person__photo {
  width: 132px;
  background: none;
}

.figure-acl img.person__photo--feature { width: 200px; }

/* --------------------------------------------------------------------------
   Image placeholders
   Swap the <img src> for a real asset; the caption stays.
   -------------------------------------------------------------------------- */

.figure-acl {
  /* Bootstrap's .figure sets a left margin; zero it so figures align flush
     with the body copy in the same column. */
  margin-inline: 0;
  margin-bottom: 1.5rem;
}

.figure-acl img {
  width: 100%;
  border-radius: var(--acl-radius);
  display: block;
  background: var(--acl-teal-100);
}

.figure-acl figcaption {
  font-size: .78rem;
  color: var(--acl-slate);
  padding-top: .5rem;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Band figure
   A wide closing image held to the text column width. Crops the 4:3 source to
   a letterbox band via object-fit rather than distorting it.
   -------------------------------------------------------------------------- */

.figure-acl img.figure-acl__band {
  height: 380px;
  object-fit: cover;
  object-position: center 60%;
}

@media (max-width: 767.98px) {
  .figure-acl img.figure-acl__band { height: 220px; }
}

/* --------------------------------------------------------------------------
   Tall figure
   A fixed-height image that stands beside a column of body copy, cropping the
   landscape source to a near-square portrait. `.figure-acl img` sets
   width:100%, so only the height and crop need overriding here.
   -------------------------------------------------------------------------- */

.figure-acl img.figure-acl__tall {
  height: 500px;
  /* Constrain the width so the crop stays near-square rather than stretching
     into a letterbox across the full column. 4/5 gives a portrait-ish block
     that fills the column height beside the body copy. */
  aspect-ratio: 4 / 5;
  width: auto;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 991.98px) {
  /* Stacked under the text on narrow screens: let it span the column as a
     landscape band instead of a tall tower. */
  .figure-acl img.figure-acl__tall {
    height: 320px;
    aspect-ratio: auto;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Stats strip
   -------------------------------------------------------------------------- */

.stat__value {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.1rem);
  font-weight: 600;
  line-height: 1;
  color: #fff;
}

.stat__label {
  font-size: .82rem;
  color: var(--acl-teal-100);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: .4rem;
}

/* --------------------------------------------------------------------------
   Pull quote
   -------------------------------------------------------------------------- */

.pull-quote {
  border-left: 3px solid var(--acl-copper);
  padding-left: 1.5rem;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--acl-teal-700);
}

/* Blockquote form, used for attributed quotes in the press releases. Unlike
   the display pull-quote, these carry ordinary spoken copy and often run to
   several sentences, so they sit at body size in the body face and lean on the
   copper rule alone to mark them off. The <footer> drops a step further so the
   speaker's name reads as attribution rather than as part of the quote. */
blockquote.pull-quote {
  margin-block: 1.75rem;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--acl-abyss);
}

blockquote.pull-quote p {
  font-size: inherit;
  line-height: inherit;
  margin-bottom: .6rem;
}

blockquote.pull-quote p:last-of-type { margin-bottom: 0; }

blockquote.pull-quote footer {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--acl-slate);
  margin-top: .7rem;
}

blockquote.pull-quote footer::before { content: "— "; }

/* News article back-links. The top one is a quiet text link — it sits above the
   headline artwork and must not compete with it — while the bottom one is the
   outline button, since by then it is the reader's main way onward. */
.news-back--top a {
  font-family: "Barlow Condensed", sans-serif;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acl-teal-700);
  text-decoration: none;
}

.news-back--top a:hover,
.news-back--top a:focus-visible {
  color: var(--acl-teal-500);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The bottom link uses .btn-acl-outline, whose white text and translucent
   white border are designed for a dark backdrop (as in the home page hero).
   The article footer sits on the plain white page background, so re-colour
   the outline in teal here and keep the hover inversion legible. */
.news-back--bottom .btn-acl-outline {
  color: var(--acl-teal-700);
  border-color: var(--acl-teal-700);
}

.news-back--bottom .btn-acl-outline:hover,
.news-back--bottom .btn-acl-outline:focus-visible {
  background: var(--acl-teal-700);
  color: #fff;
  border-color: var(--acl-teal-700);
}

/* --------------------------------------------------------------------------
   Contact — office photo
   -------------------------------------------------------------------------- */

/* The photo sits in the right-hand third beside the detail cards. Below the
   lg breakpoint the columns stack and a plain width:100% image would render
   larger than it does on desktop, so cap it and centre it once stacked. */
.contact-photo img {
  background: none;
}

@media (max-width: 991.98px) {
  .contact-photo {
    max-width: 420px;
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------------------
   Definition list — glossary
   -------------------------------------------------------------------------- */

.glossary dt {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--acl-teal-700);
  font-size: 1.05rem;
}

.glossary dd {
  margin-bottom: .9rem;
  color: var(--acl-slate);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.acl-footer {
  background: var(--acl-abyss);
  color: rgba(255,255,255,.72);
  padding-block: 3rem 1.5rem;
  font-size: .9rem;
}

.acl-footer h5 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .8rem;
  margin-bottom: 1rem;
}

.acl-footer__logo {
  height: 88px;
  width: auto;
  display: block;
  margin-bottom: 1.1rem;
}

.acl-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.acl-footer a:hover { color: #fff; text-decoration: underline; }

.acl-footer ul { list-style: none; padding-left: 0; }
.acl-footer ul li { margin-bottom: .4rem; }

.acl-footer__base {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 2rem;
  padding-top: 1.5rem;
  font-size: .8rem;
  color: rgba(255,255,255,.5);
}

.mb-1{
  font-size: 0.7em;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn-acl {
  background: var(--acl-teal-500);
  color: #fff;
  border-radius: var(--acl-radius);
  padding: .65rem 1.5rem;
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  border: none;
}

.btn-acl:hover { background: var(--acl-teal-700); color: #fff; }

.btn-acl-outline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: var(--acl-radius);
  padding: .65rem 1.5rem;
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
}

.btn-acl-outline:hover {
  background: #fff;
  color: var(--acl-teal-900);
  border-color: #fff;
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  /* Keep 500px as a floor, but let the band grow if the vision statement
     wraps to more lines on a narrow screen rather than clipping it. */
  .hero { height: auto; min-height: 500px; }
  .section { padding-block: 2.75rem; }
  .acl-table { font-size: .88rem; }
  .table-scroll { overflow-x: auto; }

  /* On mobile the Key performance indicator column needs the width, so the
     narrow Pillar and Goal cells are rotated to read bottom-to-top. This
     reclaims horizontal space so the KPI list fits without the table
     scrolling off the side.

     NB: selectors key off cell CLASSES, not :nth-child — the Pillar cells use
     rowspan, which shifts the column index of cells in continuation rows, so
     nth-child(n) does not reliably identify a column here. */
  .kpi-table {
    table-layout: fixed;
    width: 100%;
  }

  .kpi-table .pillar-cell,
  .kpi-table .goal-cell {
    writing-mode: vertical-rl;
    transform: rotate(180deg);   /* vertical-rl reads top-down; flip to bottom-up */
    vertical-align: middle;
    text-align: center;
    padding: .9rem .3rem;
  }

  .kpi-table .col-pillar,
  .kpi-table .pillar-cell {
    width: 2rem;
    white-space: nowrap;         /* single word — one vertical line */
  }

  /* Goal cells hold full phrases; let them wrap into a couple of vertical
     lines rather than one extremely tall column. */
  .kpi-table .col-goal,
  .kpi-table .goal-cell {
    width: 3rem;
    white-space: normal;
  }

  /* KPI cell (and its list) takes the remaining width and wraps. Applying the
     wrap to the list items too, or a long line keeps the <ul> from shrinking. */
  .kpi-table .kpi-cell,
  .kpi-table thead th:last-child {
    width: auto;
  }
  .kpi-table .kpi-cell,
  .kpi-table .kpi-cell .tick-list,
  .kpi-table .kpi-cell .tick-list li {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Hide the "Pillar" and "Goal" header labels on mobile: the rotated column
     cells below already read as their own labels, so the header text is
     redundant and would show as tiny vertical words in the teal bar. The <th>
     cells stay in place (preserving column widths and the scope="col"
     association) — only their text is visually suppressed, and it remains
     available to screen readers. */
  .kpi-table thead .col-pillar,
  .kpi-table thead .col-goal {
    font-size: 0;
    letter-spacing: 0;
    color: transparent;
  }
}

/* --------------------------------------------------------------------------
   Click-to-enlarge map
   The source map is a tall 3:4 portrait. Left at full column width it dwarfs
   the accompanying copy and drags the section height out, so it is capped
   here and opened full size in a modal instead.
   -------------------------------------------------------------------------- */

/* Shrink-wrap the link to the image rather than the column: with a contained
   3:4 map in a wide column the anchor would otherwise stretch full width and
   strand the hint badge in the empty space beside the map. */
.map-zoom {
  display: block;
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  border-radius: var(--acl-radius);
  overflow: hidden;
}

.map-zoom__img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 30rem;
}

/* .figure-acl img forces width:100% and fills unused space with teal, which
   would re-stretch the map and frame it in a green box. */
.figure-acl a.map-zoom img.map-zoom__img {
  width: auto;
  max-width: 100%;
  background: none;
}

.map-zoom__hint {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  background: rgba(6, 63, 60, .85);
  color: #fff;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .3rem .6rem;
  border-radius: var(--acl-radius);
  pointer-events: none;
}

.map-zoom:hover .map-zoom__hint { background: var(--acl-teal-500); }

/* --------------------------------------------------------------------------
   Org chart
   Connectors are drawn with borders rather than box-drawing glyphs, which
   render at inconsistent heights across fonts and leave visible gaps.
   -------------------------------------------------------------------------- */

.org-chart__link {
  width: 0;
  height: 1.1rem;
  margin: 0 auto;
  border-left: 2px solid var(--acl-teal-500);
}

.org-chart__split {
  display: flex;
  gap: 1rem;
}

.org-chart__branch {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  padding-top: 1.1rem;
}

/* Horizontal rail: each branch draws the half-span reaching back to the
   centre, so the two halves meet under the parent node whatever the gap. */
.org-chart__branch::before {
  content: "";
  position: absolute;
  top: 0;
  height: 0;
  border-top: 2px solid var(--acl-teal-500);
}

.org-chart__branch:first-child::before {
  left: 50%;
  right: calc(-.5rem - 1px);
}

.org-chart__branch:last-child::before {
  right: 50%;
  left: calc(-.5rem - 1px);
}

/* Vertical drop from the rail into each child node. */
.org-chart__branch::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 1.1rem;
  border-left: 2px solid var(--acl-teal-500);
  transform: translateX(-1px);
}