/*
 * Component styles: one section per partial in src/_includes/partials/, ported
 * from the <style> block of the matching component in web/src/components/ in Shady-C/kiwisan-group-website.
 * Astro scoped those styles; here every class in a section starts with its
 * partial's name instead (ADR-0003). Mobile-first: 640, 960 and 1280 px.
 */

/* ===================================================================== logo */
/*
 * The kit's minimum widths: 260 px for the compact logo, 48 px for the monogram.
 * The header and menu show the monogram below 960 px (a <picture> swaps in the
 * compact logo above that, 84 px tall = 260 px wide). The footer always shows
 * the compact logo.
 */
.logo { display: flex; align-items: center; flex: none; }
.logo__img { width: auto; height: 48px; }

@media (min-width: 960px) {
  .logo__img { height: 84px; }
}

.logo__img--compact { width: 260px; height: auto; }

/* ============================================================ site-header */
.site-header {
  position: relative; z-index: 3;
  background: var(--navy); border-bottom: 1px solid var(--rule-navy);
}
.site-header__bar { display: flex; align-items: center; justify-content: space-between; height: 76px; }

/* menu button (narrow screens) */
.site-header__menu-btn {
  display: flex; flex-direction: column; justify-content: center; gap: 7px;
  width: 44px; height: 44px; padding: 0 8px; margin-right: -8px; /* 28 px lines in a 44 px target */
}
.site-header__menu-btn span { height: 1.5px; background: #fff; }
.site-header__menu-btn span:last-child { width: 18px; align-self: flex-end; background: var(--orange); }

/* primary nav (wide screens) */
.site-nav { display: none; align-items: center; gap: 36px; }
.site-nav a:not(.btn) {
  font: 500 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #fff;
  padding: 10px 0; border-bottom: 1px solid transparent;
}
.site-nav a[aria-current="page"]:not(.btn) { border-bottom-color: var(--orange); }
.site-nav .btn { height: 46px; padding: 0 24px; }
.site-nav .btn[aria-current="page"] { background: var(--orange); color: var(--navy); }

.site-nav__item { position: relative; display: flex; align-items: stretch; }
/*
 * The caret button continues the link's underline, as in the design. Its box is
 * 24 px wide (WCAG 2.5.8): 6 px sit in the nav gap (negative margin), and the
 * underline is drawn by ::after so it still stops at the caret.
 */
.site-nav__toggle {
  position: relative; display: inline-flex; align-items: center;
  margin: 0 -6px 0 0; padding: 0 6px 0 9px; border: 0; border-bottom-color: transparent;
  background: none; color: var(--silver); cursor: pointer;
}
.site-nav__toggle::after {
  content: ""; position: absolute; left: 0; right: 6px; bottom: 0;
  border-bottom: 1px solid; border-bottom-color: inherit;
}
/* 44 x 44 px hit area, extended to the right only, so it never covers the link */
.site-nav__toggle::before { content: ""; position: absolute; top: -6px; bottom: -6px; left: 0; right: -20px; }
.site-nav__toggle:focus-visible { outline-offset: 0; }
.site-nav__item > a[aria-current="page"] + .site-nav__toggle { border-bottom-color: var(--orange); }
.site-nav__caret { width: 9px; height: 6px; transition: transform .15s ease; }

.site-nav__sub {
  position: absolute; top: calc(100% + 35px); left: -28px; min-width: 300px;
  background: var(--navy-2); border-top: 1px solid var(--orange); padding: 14px 28px 18px;
  box-shadow: 0 24px 48px rgba(0, 8, 24, .35);
  visibility: hidden; opacity: 0;
  transition: opacity .15s ease .2s, visibility 0s linear .35s; /* grace period before closing */
}
/* invisible bridge over the gap between the label and the panel */
.site-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 36px; }
.site-nav__sub li + li { border-top: 1px solid var(--rule-navy); }
.site-nav .site-nav__sub a {
  display: block; padding: 16px 0; border: 0;
  font: 400 19px/1.3 var(--serif); letter-spacing: 0; text-transform: none; color: #fff;
}
.site-nav .site-nav__sub a:hover { color: var(--silver); }

/*
 * Open states. Hover opens everywhere. Without JavaScript, keyboard focus inside
 * the item opens it too; once menu.js has run (data-enhanced) the disclosure
 * button drives it instead, so Escape can close it while focus stays on the
 * button. .is-quiet holds a just-closed panel shut under the pointer.
 */
.site-nav__item:hover:not(.is-quiet) .site-nav__sub,
.site-header:not([data-enhanced]) .site-nav__item:focus-within .site-nav__sub,
.site-nav__item.is-open .site-nav__sub {
  visibility: visible; opacity: 1; transition: opacity .15s ease, visibility 0s;
}
.site-nav__item:hover:not(.is-quiet) > *:not(.site-nav__sub),
.site-header:not([data-enhanced]) .site-nav__item:focus-within > *:not(.site-nav__sub),
.site-nav__item.is-open > *:not(.site-nav__sub) { border-bottom-color: var(--orange); }
.site-nav__item:hover:not(.is-quiet) .site-nav__caret,
.site-header:not([data-enhanced]) .site-nav__item:focus-within .site-nav__caret,
.site-nav__item.is-open .site-nav__caret { transform: rotate(180deg); }

@media (min-width: 960px) {
  .site-header__bar { height: 100px; }
}

/* The full nav needs about 1,000 px beside the logo; below that the menu button stands in. */
@media (min-width: 1280px) {
  .site-nav { display: flex; }
  .site-header__menu-btn { display: none; }
}

/* ============================================================ mobile-menu */
.menu-sheet {
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--navy); color: var(--silver);
}
.menu-sheet[open] { display: flex; flex-direction: column; }
.menu-sheet::backdrop { background: var(--navy); }
/* the page behind the open menu does not scroll */
html:has(dialog[data-menu][open]) { overflow: hidden; }
.menu-sheet > * { width: 100%; }

.menu-sheet__head { border-bottom: 1px solid var(--rule-navy); }
.menu-sheet__bar { display: flex; align-items: center; justify-content: space-between; height: 76px; }

.menu-sheet__close {
  position: relative; width: 44px; height: 44px; margin-right: -8px; /* 28 px cross in a 44 px target */
  background: none; border: 0; cursor: pointer;
}
.menu-sheet__close span {
  position: absolute; left: 8px; top: 21px; width: 28px; height: 1.5px;
  background: #fff; transform: rotate(45deg);
}
.menu-sheet__close span + span { transform: rotate(-45deg); background: var(--orange); }

.menu-sheet__list { display: flex; flex-direction: column; padding-top: 28px; padding-bottom: 40px; }
.menu-sheet__item { border-bottom: 1px solid var(--rule-navy); }
.menu-sheet__row { display: flex; align-items: center; }
.menu-sheet__row > a {
  flex: 1; display: flex; align-items: baseline; gap: 18px; padding: 20px 0;
  font: 400 28px/1.2 var(--serif); color: #fff;
}

.menu-sheet__toggle {
  width: 44px; height: 44px; margin-right: -10px; flex: none;
  background: none; border: 0; cursor: pointer;
  font: 300 24px/1 var(--sans); color: var(--orange);
}
.menu-sheet__toggle span::before { content: "+"; }
.menu-sheet__toggle[aria-expanded="true"] span::before { content: "–"; }

.menu-sheet__sub { padding: 0 0 20px 38px; margin-top: -4px; }
.menu-sheet__sub a {
  display: flex; align-items: center; min-height: 44px;
  font: 500 12px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--silver);
}
.menu-sheet__sub a:hover { color: #fff; }

.menu-sheet__foot { margin-top: auto; padding-bottom: 40px; }
.menu-sheet__foot .btn { width: 100%; }
.menu-sheet__foot .small { margin-top: 28px; }

@media (min-width: 960px) {
  .menu-sheet__bar { height: 100px; }
}

/* ============================================================ site-footer */
.site-footer { background: var(--navy); color: var(--silver); padding: 72px 0 0; }

.site-footer__top {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "tag" "nav";
  padding-bottom: 56px;
}
.site-footer__top .logo { grid-area: logo; justify-self: start; }
.site-footer__tag {
  grid-area: tag; margin-top: 26px;
  font: 600 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: #fff;
}
.site-footer__nav {
  grid-area: nav; display: flex; flex-direction: column; align-items: flex-start; margin-top: 24px;
  scroll-margin-top: 24px;
}
/* 44 px rows on phones */
.site-footer__nav a {
  display: block; padding: 16.25px 0;
  font: 500 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #fff;
}
.site-footer__nav a:hover { color: var(--silver); }

.site-footer__base {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
  padding: 30px 0 34px; border-top: 1px solid var(--rule-navy); font-size: 12.5px;
}
.site-footer__base nav { display: flex; gap: 28px; }
.site-footer__base a { display: inline-block; padding: 12px 0; margin: -12px 0; }
.site-footer__base a:hover { color: #fff; }

@media (min-width: 960px) {
  .site-footer { padding-top: 88px; }
  /* logo on its own row; tagline and nav share one baseline beneath it */
  .site-footer__top {
    grid-template-columns: auto 1fr; grid-template-areas: "logo ." "tag nav";
    align-items: baseline; column-gap: 48px; padding-bottom: 72px;
  }
  .site-footer__nav { flex-direction: row; flex-wrap: wrap; justify-self: end; gap: 14px 36px; margin-top: 0; }
  .site-footer__nav a { padding: 0; }
  .site-footer__base { grid-template-columns: 1fr auto 1fr; gap: 24px; }
  .site-footer__base p:last-child { text-align: right; }
}

/* ================================================================== slash */
/*
 * The K/G slash: an orange hairline at 29° (--slash) across a navy band.
 * Hidden below 960 px so it never crosses reading text. The parent band must be
 * `position: relative` with `overflow: hidden`; it sets `--slash-x`.
 */
.slash {
  display: none;
  position: absolute; top: 0; bottom: 0; right: var(--slash-x, 6%); width: 0;
  border-left: 1.25px solid var(--orange);
  transform-origin: 0 0;
  transform: skewX(calc(-1 * var(--slash)));
  pointer-events: none;
}
@media (min-width: 960px) {
  .slash { display: block; }
}

/* ============================================================= not-found */
.not-found { --slash-x: 5.5%; background: var(--navy); position: relative; overflow: hidden; }
.not-found__inner { padding-top: 96px; padding-bottom: 112px; }
.not-found__lead { margin-top: 32px; max-width: 720px; }
.not-found__acts { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 32px 40px; }

@media (min-width: 960px) {
  .not-found__inner { padding-top: 140px; padding-bottom: 160px; }
}

/* ============================================================= breadcrumb */
.breadcrumb {
  display: flex; flex-wrap: wrap;
  font: 600 11px/1.8 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--silver);
}
.breadcrumb li { min-width: 0; overflow-wrap: anywhere; }
/* 44 px tall hit area without changing the line box */
.breadcrumb a { display: inline-block; padding: 12px 0; margin: -12px 0; color: var(--silver); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb__current { color: #fff; }
/* orange on navy (the hero ground); --orange-text would be too dark here */
.breadcrumb__sep { color: var(--orange); margin: 0 .5em; }

/* =================================================================== hero */
.hero { --slash-x: 5.5%; background: var(--navy); position: relative; overflow: hidden; }
.hero__inner { padding-top: 64px; padding-bottom: 80px; }
.hero__crumbs { margin-bottom: 30px; }
.hero h1 { max-width: 900px; }
.hero__lead { margin-top: 32px; max-width: 720px; }
.hero__index { font: 400 18px/1 var(--serif); color: var(--orange); margin-bottom: 18px; letter-spacing: .02em; }

@media (min-width: 960px) {
  .hero__inner { padding-top: 96px; padding-bottom: 112px; }
}

/* ========================================================== section-label */
.section-label { display: flex; align-items: flex-start; gap: 18px; }
.section-label::before {
  content: ""; width: 30px; height: 1px; margin-top: 7px; flex: none;
  background: var(--orange);
}

/* ======================================================== capability-band */
.capability-band__num { font: 400 32px/1 var(--serif); color: var(--orange-text); }
.capability-band__title { margin-top: 14px; max-width: 12em; overflow-wrap: anywhere; }
.capability-band__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.capability-band__focus-label { margin-bottom: 14px; }
.capability-band__links { display: flex; align-items: center; padding-top: 12px; }

@media (min-width: 960px) {
  .capability-band__num { font-size: 40px; }
  .capability-band__title { margin-top: 22px; }
}

/* ========================================================= areas-of-focus */
/* A list with orange slash bullets. */
.areas { display: grid; grid-template-columns: minmax(0, 1fr); }
.areas li {
  display: grid; grid-template-columns: 28px minmax(0, 1fr);
  padding: 22px 0; border-bottom: 1px solid var(--rule);
  font: 400 19px/1.45 var(--serif); color: var(--navy);
  overflow-wrap: anywhere;
}
.areas li:first-child { border-top: 1px solid var(--rule); }
.areas li::before { content: "/"; color: var(--orange-text); font-family: var(--sans); font-size: 15px; padding-top: 2px; }
.areas--2 li { font-size: 17px; padding: 18px 0; }
.areas--sm li { font: 400 14.5px/1.5 var(--sans); color: var(--ink); padding: 13px 0; grid-template-columns: 22px minmax(0, 1fr); }
.areas--sm li::before { font-size: 13px; padding-top: 0; }

@media (min-width: 960px) {
  .areas--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .areas--2 li:nth-child(2) { border-top: 1px solid var(--rule); }
}

/* ===================================================== numbered-links */
/* Linked rows with a number and arrow: Who We Are links, Other Capabilities. */
.numbered-links { border-top: 1px solid var(--rule); }
.numbered-links li { border-bottom: 1px solid var(--rule); }
.numbered-links a {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center;
  padding: 22px 0;
}
.numbered-links__num { font: 500 11.5px/1 var(--sans); letter-spacing: .14em; color: var(--ink-soft); }
.numbered-links .title { overflow-wrap: anywhere; padding-right: 16px; }
.numbered-links a:hover .title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

@media (min-width: 960px) {
  .numbered-links a { grid-template-columns: 56px minmax(0, 1fr) auto; padding: 24px 0; }
}

/* =============================================================== cta-band */
.cta-band__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: end; }
.cta-band__statement { font-size: 27px; }
.cta-band__act { display: flex; justify-content: flex-start; padding-bottom: 6px; }

@media (min-width: 960px) {
  .cta-band__inner { grid-template-columns: minmax(0, 760px) 1fr; gap: 64px; }
  .cta-band__statement { font-size: 38px; }
  .cta-band__act { justify-content: flex-end; }
}

/* ============================================================ insight-card */
.insight-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.insight-card { border-top: 1.5px solid var(--navy); padding-top: 22px; display: flex; flex-direction: column; }
.insight-card__cat { min-height: 32px; }
.insight-card__title { font: 400 22px/1.32 var(--serif); color: var(--navy); margin-top: 14px; overflow-wrap: anywhere; }
.insight-card:hover .insight-card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.insight-card__meta { margin-top: 18px; font-size: 12.5px; color: var(--ink-soft); }

@media (min-width: 960px) {
  .insight-cards { gap: 32px; }
  .insight-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insight-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================== body-copy */
/* Paragraphs rendered from a Markdown front-matter block (`perspectiveBody: |`). */
.body-copy > * + * { margin-top: 14px; }
.body-copy p { max-width: 62ch; text-wrap: pretty; }
.body-copy a { color: var(--navy); border-bottom: 1px solid var(--orange); }
.on-navy .body-copy a { color: #fff; }

/* ============================================================== home-hero */
.home-hero { --slash-x: 4%; background: var(--navy); position: relative; overflow: hidden; }
.home-hero .slash { top: 120px; bottom: 120px; }
.home-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 64px; padding-bottom: 72px; }

.home-hero__tagline {
  font: 600 11px/1.8 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: #fff;
}
.home-hero__copy .display { font-size: 48px; margin-top: 30px; }
.home-hero__lead { margin-top: 28px; max-width: 600px; }
.home-hero__ctas { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 36px; }

.home-hero__art { margin-top: 56px; width: 80%; justify-self: start; }

@media (min-width: 640px) {
  .home-hero__ctas { flex-direction: row; align-items: center; gap: 16px; }
  .home-hero__art { width: 62%; }
}

@media (min-width: 960px) {
  .home-hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px;
    padding-top: 112px; padding-bottom: 128px;
  }
  .home-hero__copy .display { font-size: clamp(52px, 5.55vw, 80px); }
  .home-hero__lead { margin-top: 40px; font-size: 21px; }
  .home-hero__ctas { margin-top: 48px; }
  .home-hero__art { align-self: center; margin-top: 10px; width: 92%; justify-self: center; }
}

/* ======================================================== numbered-points */
.points { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.points__item {
  display: grid; grid-template-columns: 44px minmax(0, 1fr);
  border-top: 1.5px solid var(--navy); padding-top: 18px;
}
.points__num { padding-top: 7px; }
.points__title { font: 400 21px/1.3 var(--serif); color: var(--navy); }
.points__text { grid-column: 2; margin-top: 8px; font-size: 14.5px; line-height: 1.7; max-width: 38ch; }
.on-navy .points__item { border-top-color: rgba(255, 255, 255, .6); }
.on-navy .points__title { color: #fff; }

@media (min-width: 960px) {
  .points { gap: 48px 32px; }
  .points--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 40px; }
  .points--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .points--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .points__item { display: block; padding-top: 22px; }
  .points__num { padding-top: 0; }
  .points__title { font-size: 23px; margin-top: 16px; }
  .points__text { margin-top: 12px; }
}

/* ========================================================= capability-row */
.capability-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 10px 16px; align-items: center;
  padding: 28px 0; border-bottom: 1px solid var(--rule);
}
.capability-row__num { grid-column: 1 / -1; }
.capability-row__title { font-size: 23px; grid-column: 1; }
.capability-row__short { grid-column: 1 / -1; }
.capability-row .arrow { grid-column: 2; grid-row: 2; justify-self: end; }
.capability-row:hover .capability-row__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

@media (min-width: 960px) {
  .capability-row { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.1fr) 40px; gap: 32px; padding: 34px 0; }
  .capability-row__num { grid-column: auto; }
  .capability-row__title { font-size: 26px; grid-column: auto; }
  .capability-row__short { grid-column: auto; }
  .capability-row .arrow { grid-column: auto; grid-row: auto; }
}

/* ================================================================ dot-map */
/* The kit's Tanzania dot map with its Dar es Salaam label. Decorative. */
.dot-map { position: relative; }
.dot-map img { width: 100%; height: auto; }

/* ============================================================ where-we-work */
.where-we-work__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.where-we-work__copy .statement { margin-top: 28px; }
.where-we-work__copy .body-copy { margin-top: 24px; }
.where-we-work .dot-map { width: 80%; margin-top: 24px; justify-self: start; }

@media (min-width: 960px) {
  .where-we-work__inner { grid-template-columns: 1fr 1fr; gap: 48px; }
  .where-we-work .dot-map { width: 92%; margin-top: 0; justify-self: center; }
}

/* ========================================================= person-profile */
.leadership-team { border-top: 1.5px solid var(--navy); }
.person-profile {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px;
  padding: 32px 0; border-bottom: 1px solid var(--rule);
}
.person-profile__name { font: 400 25px/1.25 var(--serif); color: var(--navy); overflow-wrap: anywhere; }
.person-profile__position { margin-top: 12px; }
.person-profile__bio { max-width: 62ch; text-wrap: pretty; }
.person-profile__bio + .person-profile__focus { margin-top: 20px; }
.person-profile__focus { font-size: 14px; color: var(--ink-soft); overflow-wrap: anywhere; }
.person-profile__focus-label { font-weight: 600; color: var(--navy); }

@media (min-width: 960px) {
  .person-profile { grid-template-columns: minmax(0, 260px) minmax(0, 620px); gap: 48px; padding: 40px 0; }
  .person-profile__name { font-size: 28px; }
}

/* ======================================================== case-study-card */
.case-studies { margin-top: 44px; display: grid; gap: 24px; }
.case-study-card {
  background: #fff; border-top: 2px solid var(--navy); padding: 28px 22px 30px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px;
}
.case-study-card__heading { font: 400 22px/1.35 var(--serif); color: var(--navy); margin-top: 14px; overflow-wrap: anywhere; }
.case-study-card dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.case-study-card dl > div { border-top: 1px solid var(--rule); padding-top: 16px; }
.case-study-card dt { font: 600 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--navy); }
.case-study-card dd { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); overflow-wrap: anywhere; }

@media (min-width: 640px) {
  .case-study-card { padding: 34px 40px 38px; }
}
@media (min-width: 960px) {
  .case-studies { margin-top: 56px; }
  .case-study-card { grid-template-columns: 300px minmax(0, 1fr); gap: 40px; }
  /* 2x2, never four across: at 960 the dl is 380 px wide (800 - 2x40 padding - 300 - 40 gap), so four
     columns would leave 54 px of text; two give (380 - 28) / 2 - 20 = 156 px. At 1280 four columns would
     give (700 - 3x28) / 4 - 20 = 134 px, still under 150, so the 2x2 grid stays. */
  .case-study-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .case-study-card dl > div { border-top: 0; padding-top: 0; border-left: 1px solid var(--rule); padding-left: 20px; }
}

/* ============================================================ page layouts */
/* Spacing between a section's statement row and the block beneath it (Home). */
.section-block { margin-top: 64px; }
.section-block--rows { border-top: 1px solid var(--rule); }
.section-more { margin-top: 48px; }
.stack .section-more { margin-top: 40px; }

/* ============================================================ focus-areas */
.focus-areas { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.focus-areas li { border-top: 1.5px solid var(--navy); padding-top: 20px; }
.focus-areas__name { font: 400 22px/1.3 var(--serif); color: var(--navy); overflow-wrap: anywhere; }
.focus-areas .small { margin-top: 10px; max-width: 34ch; }

@media (min-width: 640px) {
  .focus-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 32px; }
}
@media (min-width: 960px) {
  .focus-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =========================================================== focus-filter */
/* A single row that scrolls sideways on narrow screens, so no chip is ever out of reach. */
.focus-filter {
  display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
  margin-top: 28px; margin-right: calc(-1 * var(--gutter));
  padding: 3px var(--gutter) 3px 3px; margin-left: -3px; /* room for the focus ring */
}
.focus-filter::-webkit-scrollbar { display: none; }
.focus-filter__chip {
  flex: none; height: 44px; padding: 0 18px; display: inline-flex; align-items: center;
  border: 1px solid var(--rule); background: #fff; color: var(--navy);
  font: 500 13px/1 var(--sans);
}
.focus-filter__chip:hover { border-color: var(--navy); }
.focus-filter__chip[aria-current="page"] { background: var(--navy); color: #fff; border-color: var(--navy); }

@media (min-width: 640px) {
  .focus-filter { flex-wrap: wrap; overflow: visible; margin-right: 0; padding: 0; margin-left: 0; }
  .focus-filter__chip { height: 40px; }
}

/* ============================================================ insight-list */
.insight-list { margin-top: 48px; border-top: 1.5px solid var(--navy); }
.insight-list li[hidden] { display: none; }
.insight-list a { display: grid; grid-template-columns: minmax(0, 1fr); padding: 30px 0; border-bottom: 1px solid var(--rule); }
.insight-list__meta { grid-row: 2; margin-top: 16px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.insight-list__meta span + span::before { content: " · "; }
.insight-list__title { font: 400 23px/1.3 var(--serif); color: var(--navy); margin-top: 12px; overflow-wrap: anywhere; }
.insight-list__standfirst { margin-top: 14px; max-width: 62ch; text-wrap: pretty; }
.insight-list__read {
  margin-top: 20px; display: inline-flex; align-items: center; gap: 12px;
  font: 600 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--navy);
}
.insight-list a:hover .insight-list__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

@media (min-width: 960px) {
  .insight-list a { grid-template-columns: 200px minmax(0, 700px); gap: 24px; padding: 38px 0; }
  .insight-list__meta { grid-row: auto; margin-top: 0; padding-top: 2px; }
  .insight-list__meta span { display: block; }
  .insight-list__meta span + span::before { content: none; }
  .insight-list__title { font-size: 28px; }
}
@media (min-width: 1280px) {
  .insight-list a { grid-template-columns: 200px minmax(0, 700px) 1fr; }
}

/* ================================================================== prose */
/* Markdown bodies: Insight articles and the legal pages, in the 840 px column. */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 20px; }
.prose h2 { font: 400 27px/1.3 var(--serif); margin-top: 56px; }
.prose h3 { font: 400 21px/1.35 var(--serif); margin-top: 40px; }
.prose h2 + *, .prose h3 + * { margin-top: 16px; }
.prose ul { list-style: none; }
.prose ul li { position: relative; padding-left: 28px; }
.prose ul li + li { margin-top: 8px; }
.prose ul li::before { content: "/"; position: absolute; left: 0; color: var(--orange-text); }
.prose ol { list-style: decimal; padding-left: 1.4em; }
.prose ol li + li { margin-top: 8px; }
.prose a { color: var(--navy); border-bottom: 1px solid var(--orange); }
.prose strong { color: var(--navy); font-weight: 600; }
.prose blockquote {
  margin: 40px 0; padding-left: 24px; border-left: 2px solid var(--orange);
  font: 300 22px/1.5 var(--serif); color: var(--navy);
}
.prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--rule); }
.prose th { font-weight: 600; color: var(--navy); }

@media (min-width: 960px) {
  .prose h2 { font-size: 30px; }
}

/* ========================================================= insight-meta */
.insight-meta {
  max-width: var(--measure); margin-bottom: 48px; padding-bottom: 20px; border-bottom: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px;
  font-size: 13px; line-height: 1.6; color: var(--ink-soft);
}
.insight-meta__focus { display: inline-flex; align-items: center; min-height: 44px; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.insight-meta__focus:hover { text-decoration: underline; text-underline-offset: 5px; }
.insight-meta span + span::before { content: "·"; margin-right: 20px; }


/* ============================================================= legal-meta */
.legal-meta { margin-bottom: 40px; }

/* ========================================================= contact-details */
.contact-details { margin: 0; }
.contact-details > div { padding: 24px 0; border-bottom: 1px solid var(--rule); }
.contact-details > div:first-child { padding-top: 0; }
.contact-details > div:last-child { border-bottom: 0; }
.contact-details dd { margin: 0; }
.contact-details__value { font: 400 23px/1.35 var(--serif); color: var(--navy); margin-top: 10px; overflow-wrap: anywhere; }
.contact-details > div:first-child > .contact-details__value { margin-top: 0; }
.contact-details__value a { border-bottom: 1px solid var(--orange); }
.contact-details .small { margin-top: 4px; }

/* ================================================================== engage */
/* Get in Touch (details and dot map) beside the enquiry form. One column until 960 px, where the
   form panel takes the rest of the row. On narrow screens the form panel runs edge to edge. */
.engage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: start; }
.engage__details { margin-top: 44px; }
.engage__map { margin-top: 48px; width: 80%; }
.engage__form { background: var(--mist); padding: 36px 22px 40px; margin: 0 calc(-1 * var(--gutter)); }
.engage__heading { font: 400 32px/1.2 var(--serif); }
.engage__helper { margin-top: 12px; }

@media (min-width: 640px) {
  .engage__form { padding: 44px 40px 48px; }
}

@media (min-width: 960px) {
  .engage { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(48px, 7vw, 104px); }
  /* the map's label runs past the 300 px column into the gap, as in the mockup */
  .engage__map { width: 117%; }
  .engage__form { margin: 0; padding: 56px 56px 60px; }
}

/* ================================================================= enquiry */
/* The enquiry form (src/_includes/partials/enquiry-form.njk), on the mist panel. Inputs are 16 px at every width. */
.enquiry__fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px 24px; margin-top: 38px; }
.enquiry__field { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.enquiry__field label, .enquiry__group legend {
  font: 600 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--navy);
}
/* Telephone (ADR-0006): one box, the country code on the left and the number on the right, at every width.
   The script adds .is-enhanced: the native select then lies invisibly over the flag-and-code label, so the
   device's own list opens. Without the script the select shows as is. */
.enquiry__group { border: 0; margin: 0; padding: 0; min-width: 0; }
.enquiry__group legend { padding: 0; margin-bottom: 10px; }
.enquiry__group .enquiry__hint, .enquiry__group .enquiry__error { margin-top: 10px; }
.enquiry__phone { display: flex; height: 52px; background: #fff; border: 1px solid var(--input); }
.enquiry__phone:has([aria-invalid="true"]) { border-color: var(--error); outline: 1px solid var(--error); }
.enquiry__phone:focus-within { outline: 2px solid var(--orange); outline-offset: 2px; }
.enquiry__phone-code {
  position: relative; flex: none; display: flex; align-items: center; padding: 0 38px 0 16px;
  border-right: 1px solid var(--rule); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23001029' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 14px center;
  font: 400 16px/1.4 var(--sans); color: var(--navy); white-space: nowrap;
}
.enquiry__phone-shown { display: none; }
.enquiry__phone-select {
  appearance: none; -webkit-appearance: none; height: 100%; max-width: 11rem; padding: 0; border: 0; background: transparent;
  font: inherit; color: inherit; text-overflow: ellipsis; cursor: pointer;
}
.enquiry__phone-number {
  flex: 1; min-width: 0; padding: 0 16px; border: 0; background: transparent; font: 400 16px/1.4 var(--sans); color: var(--navy);
}
.enquiry__phone-select:focus, .enquiry__phone-number:focus { outline: none; }
.enquiry__phone.is-enhanced .enquiry__phone-shown { display: inline; }
.enquiry__phone.is-enhanced .enquiry__phone-select { position: absolute; inset: 0; width: 100%; max-width: none; opacity: 0; }
.enquiry__hint { margin: 0; font: 400 13px/1.5 var(--sans); color: var(--ink-soft); }
.enquiry__in {
  width: 100%; height: 52px; background: #fff; border: 1px solid var(--input); border-radius: 0; padding: 0 16px;
  font: 400 16px/1.4 var(--sans); color: var(--navy);
}
.enquiry__in--area { height: 160px; padding-top: 14px; resize: vertical; }
.enquiry__in--select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 44px; text-overflow: ellipsis;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23001029' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 16px center;
}
.enquiry__in--select:invalid { color: var(--ink-soft); }
.enquiry__in:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.enquiry__consent { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; margin-top: 28px; font-size: 14px; line-height: 1.6; }
.enquiry__box { width: 22px; height: 22px; margin: 11px 0 0; accent-color: var(--navy); }
.enquiry__consent label { cursor: pointer; padding: 10px 0; min-height: 44px; }
/* 44 px tall hit area for the link without moving its rule */
.enquiry__consent .text-link { display: inline-block; padding: 8px 0 2px; margin: -8px 0 0; }

/* Honeypot: filled only by bots. Off-screen, hidden from assistive technology, never focusable. */
.enquiry__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.enquiry__submit, .enquiry__fallback { margin-top: 34px; }
.enquiry__fallback { font-size: 14px; line-height: 1.6; }
.enquiry__error { margin: 0; font: 500 13px/1.5 var(--sans); color: var(--error); }
.enquiry__consent .enquiry__error { grid-column: 2; margin-top: -6px; }
.enquiry__in[aria-invalid="true"], .enquiry__box[aria-invalid="true"] { border-color: var(--error); outline: 1px solid var(--error); }
.enquiry__status { margin-top: 20px; font-size: 15px; line-height: 1.6; }
.enquiry__status:empty { display: none; }
.enquiry__status:focus { outline: none; }
.enquiry__status p { margin: 0; }
.enquiry__status .is-error { color: var(--error); font-weight: 500; }

@media (min-width: 640px) {
  .enquiry__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enquiry__field--full { grid-column: 1 / -1; }
}