@font-face {
  font-family: "APIIP Montserrat";
  src: url("../fonts/montserrat/montserrat-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "APIIP Montserrat";
  src: url("../fonts/montserrat/montserrat-800.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "APIIP Montserrat";
  src: url("../fonts/montserrat/montserrat-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "APIIP Open Sans";
  src: url("../fonts/opensans/opensans-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "APIIP Open Sans";
  src: url("../fonts/opensans/opensans-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --orange: #fe5900;
  --orange-dark: #d84900;
  --navy: #00053c;
  --navy-2: #08104f;
  --ink: #171c1f;
  --slate: #5b676d;
  --paper: #f7f8f4;
  --white: #ffffff;
  --mist: #e6ece8;
  --rule: #c8d0cc;
  --shell: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --display: "APIIP Montserrat", "Arial Narrow", Arial, sans-serif;
  --body: "APIIP Open Sans", "Segoe UI", Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html,
body {
  overflow-x: clip;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 0;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

body[data-text-scale="small"] { font-size: 15px; }
body[data-text-scale="large"] { font-size: 18px; }

img { max-width: 100%; }
button, a { font: inherit; }
a { color: inherit; }
button { color: inherit; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 12px 18px;
  background: var(--white);
  color: var(--navy);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

.skip-link:focus { transform: translateY(0); }

.shell {
  width: min(100%, calc(var(--shell) + (var(--gutter) * 2)));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.utility-bar {
  background: var(--navy);
  color: rgba(255,255,255,.82);
  font-size: 12px;
}

.utility-bar__inner {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.utility-bar__links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.utility-bar a,
.utility-bar button {
  min-width: 32px;
  min-height: 32px;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.utility-bar a:hover,
.utility-bar button:hover { color: var(--white); }

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  background: rgba(247,248,244,.97);
  border-bottom: 1px solid var(--rule);
}

.identity-bar {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.identity {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--navy);
  text-decoration: none;
}

.identity img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.identity span { display: grid; }
.identity strong {
  max-width: 33ch;
  font-family: var(--display);
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.identity small {
  margin-top: 2px;
  color: var(--slate);
  font-size: 11px;
  letter-spacing: .06em;
}

.primary-nav {
  display: flex;
  align-items: stretch;
  align-self: stretch;
}

.primary-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  color: var(--navy);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .025em;
  text-decoration: none;
}

.primary-nav a::after {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  height: 2px;
  background: var(--orange);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms var(--ease);
}

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after { transform: scaleX(1); }

.menu-toggle { display: none; }

.hero {
  position: relative;
  min-height: 800px;
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
}

.hero__overlay {
  position: relative;
  z-index: 3;
  min-height: 800px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  pointer-events: none;
}

.hero__message {
  position: relative;
  grid-column: 1 / span 6;
  align-self: start;
  min-height: 0;
  margin-top: 72px;
  overflow: hidden;
  display: block;
  background: rgba(0,5,60,.94);
  border-left: 4px solid var(--orange);
}

.hero__message::before { display: none; }

.hero__message-inner {
  position: relative;
  z-index: 2;
  padding: clamp(38px, 4vw, 58px) clamp(30px, 4vw, 56px) clamp(42px, 4vw, 58px);
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--orange-dark);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.eyebrow--light { color: #ff9d69; }

h1, h2, h3 {
  margin-top: 0;
  font-family: var(--display);
  font-weight: 700;
}

h1 {
  max-width: 9ch;
  margin-bottom: 22px;
  font-size: clamp(48px, 4.6vw, 66px);
  line-height: .98;
  letter-spacing: -.055em;
}

.hero__strap {
  margin: 0;
  color: #ff9d69;
  font-family: var(--display);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 600;
  letter-spacing: -.02em;
}

.hero__intro {
  max-width: 51ch;
  margin: 18px 0 0;
  color: rgba(255,255,255,.74);
  font-size: 15px;
  line-height: 1.7;
}

.leadership {
  position: absolute;
  z-index: 1;
  right: var(--gutter);
  bottom: 36px;
  left: auto;
  width: min(36vw, 450px);
  margin: 0;
  padding: 16px 20px 0;
  background: rgba(0,5,60,.94);
  border-top: 3px solid var(--orange);
}

.leadership::before {
  display: none;
}

.leadership img {
  width: min(100%, 560px);
  max-height: 285px;
  margin: 0 auto -2px;
  display: block;
  object-fit: contain;
  object-position: bottom;
}

.leadership figcaption {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 10px 8px 11px;
  border-top: 2px solid rgba(255,255,255,.9);
}

.leadership figcaption span:last-child { text-align: right; }
.leadership strong, .leadership small { display: block; }
.leadership strong {
  font-family: var(--display);
  font-size: 13px;
  line-height: 1.3;
}
.leadership small { margin-top: 2px; color: rgba(255,255,255,.62); font-size: 10px; line-height: 1.3; }

.hero-carousel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  background: #0e3133;
}

.hero-carousel__viewport,
.hero-slide { position: absolute; inset: 0; }

.hero-slide {
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 850ms ease, visibility 850ms ease;
}

.hero-slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(.82) contrast(1.04);
  transform: scale(1.015);
  transition: transform 8s linear;
}

.hero-slide.is-active img { transform: scale(1.045); }

.hero-slide figcaption {
  position: absolute;
  z-index: 2;
  top: 32px;
  right: 32px;
  bottom: auto;
  width: min(32%, 420px);
  min-height: 82px;
  padding: 15px 22px 17px;
  background: rgba(0,5,60,.94);
  border-top: 3px solid var(--orange);
}

.hero-slide figcaption strong,
.hero-slide figcaption span { display: block; }
.hero-slide figcaption strong { font-family: var(--display); font-size: 16px; }
.hero-slide figcaption span { margin-top: 2px; color: rgba(255,255,255,.67); font-size: 12px; }

.hero-carousel__status {
  position: absolute;
  z-index: 4;
  bottom: 34px;
  left: max(var(--gutter), calc(50% - 44px));
  display: flex;
  align-items: center;
  gap: 18px;
}

.hero-carousel__counter {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .08em;
}

.hero-carousel__counter b { color: var(--orange); }
.hero-carousel__counter i { width: 34px; height: 1px; background: rgba(255,255,255,.65); }
.hero-carousel__counter span { color: rgba(255,255,255,.7); }

.hero-carousel__controls {
  display: flex;
  border: 1px solid rgba(255,255,255,.4);
}

.hero-carousel__controls button {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.28);
  background: rgba(0,5,60,.86);
  color: var(--white);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.hero-carousel__controls button:last-child { border-right: 0; }
.hero-carousel__controls button:hover { background: var(--orange); }
.hero-carousel__controls svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.hero-carousel__controls .icon-play { display: none; }
.hero-carousel__controls [aria-pressed="true"] .icon-pause { display: none; }
.hero-carousel__controls [aria-pressed="true"] .icon-play { display: block; }

.section {
  position: relative;
  padding-block: clamp(84px, 9vw, 132px);
}

.section-marker {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(42px, 5vw, 72px);
  color: var(--navy);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
}

.section-marker i {
  position: relative;
  height: 1px;
  background: var(--rule);
}

.section-marker i::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: clamp(60px, 10vw, 132px);
  height: 3px;
  background: var(--orange);
  content: "";
}

.section-marker--light { color: rgba(255,255,255,.8); }
.section-marker--light i { background: rgba(255,255,255,.18); }

.about-grid {
  display: grid;
  /* Two fifths for the artwork, three for the words. The A is a portrait block
     and needs the room; at 3fr/7fr it was too small to read as nine pictures. */
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

.about-visual {
  position: sticky;
  top: var(--ia-header-height, 150px);
  margin: 0;
}

/* Keep the complete lockup inside the available viewport while it follows
   the factfile column. The stacked mobile layout overrides sticky below. */
.about-visual {
  top: calc(var(--ia-header-height, 150px) + 16px);
  max-width: min(100%, calc((100vh - var(--ia-header-height, 150px) - 96px) * .862 + 84px));
}

html:not(.js) .about-visual > img[data-deferred-image] { display: none; }

.about-visual img {
  width: 100%;
  height: min(64vh, 620px);
  min-height: 460px;
  display: block;
  object-fit: cover;
  filter: saturate(.72) contrast(1.06);
}

.about-visual img.about-visual__artwork {
  height: auto;
  min-height: 0;
  /* 1000x1160, the artwork's own shape. It is a cut-out -- a WebP with an alpha
     channel, no ground behind it -- so the section's paper shows through and the
     letter carries no frame, no radius and no shadow. Any of those would draw an
     edge where the picture has none. */
  aspect-ratio: 1000 / 1160;
  object-fit: contain;
  filter: none;
}

/* The name is set on its side, running up the left of the letter, so the two
   read as one block and the letter keeps the full width of the column. Live
   type, never baked into the picture, so it matches the heading opposite and
   can be reworded without rebuilding the artwork. */
.about-lockup {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

.about-lockup__name {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0 0 6px;
  /* rotate(180deg) turns the box end over end, so border-LEFT is what ends up
     drawn on the side facing the letter. */
  border-left: 1px solid var(--rule);
  color: var(--navy);
  font-family: var(--display);
  font-size: clamp(21px, 2.1vw, 29px);
  font-weight: 700;
  letter-spacing: .1em;
  /* set vertically and letterspaced, a normal word space closes up and the two
     words read as one. */
  word-spacing: .5em;
  text-transform: uppercase;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.about-lockup__name span {
  /* the inline axis runs vertically here, so inline-start is the gap between the
     two words -- a plain word space closes up at this letterspacing. */
  margin-inline-start: .34em;
  color: var(--orange-dark);
}

.about-lockup__art {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.about-lockup__line {
  display: block;
  color: var(--slate);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.about-wordmark {
  margin-top: 14px;
  padding-top: 16px;
  border-top: 2px solid var(--navy);
  font-family: var(--display);
}

.about-wordmark strong {
  display: block;
  color: var(--navy);
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.1;
}

.about-wordmark em {
  color: var(--orange-dark);
  font-style: italic;
  font-weight: 600;
}

.about-wordmark span {
  display: block;
  margin-top: 8px;
  color: var(--slate);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.about-visual figcaption {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--slate);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.about-copy h2,
.section-heading h2,
.actions-intro h2,
.why-heading h2 {
  margin-bottom: 28px;
  color: var(--navy);
  font-size: clamp(36px, 4.1vw, 62px);
  line-height: 1.04;
  letter-spacing: -.045em;
}

.about-copy__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 4vw, 52px);
}

.about-copy__columns p {
  margin: 0;
  color: #384349;
  font-size: 15px;
  line-height: 1.8;
}

.production-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 46px 0 0;
  border-top: 2px solid var(--navy);
}

.production-facts div {
  min-height: 94px;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: start;
  gap: 16px;
  padding: 20px 18px 18px 0;
  border-bottom: 1px solid var(--rule);
}

.production-facts div:nth-child(odd) { border-right: 1px solid var(--rule); }
.production-facts div:nth-child(even) { padding-left: 20px; }
.production-facts dt { color: var(--orange-dark); font-family: var(--display); font-size: 12px; font-weight: 700; }
.production-facts dd { margin: 0; font-family: var(--display); font-size: 15px; font-weight: 600; line-height: 1.45; }

.state-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 48px;
  border-top: 1px solid var(--rule);
}

.state-facts p {
  position: relative;
  margin: 0;
  padding: 17px 18px 17px 32px;
  border-bottom: 1px solid var(--rule);
  color: #384349;
  font-size: 14px;
  line-height: 1.55;
}

.state-facts p:nth-child(odd) { border-right: 1px solid var(--rule); }
.state-facts p::before {
  position: absolute;
  top: 26px;
  left: 2px;
  width: 17px;
  height: 2px;
  background: var(--orange);
  content: "";
}

.text-link {
  position: relative;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  color: var(--navy);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.text-link::after {
  position: absolute;
  right: 0;
  bottom: 6px;
  left: 0;
  height: 2px;
  background: var(--orange);
  content: "";
  transform: scaleX(.28);
  transform-origin: left;
  transition: transform 240ms var(--ease);
}

.text-link:hover::after { transform: scaleX(1); }

.pillars {
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
}

.pillars::after {
  position: absolute;
  right: -180px;
  bottom: -180px;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  box-shadow: 0 0 0 72px rgba(255,255,255,.025), 0 0 0 144px rgba(255,255,255,.018);
  content: "";
}

.section-heading { max-width: 760px; }
.section-heading--light h2 { color: var(--white); }

.pillar-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 54px;
  border-top: 1px solid rgba(255,255,255,.25);
  border-bottom: 1px solid rgba(255,255,255,.25);
}

.pillar {
  position: relative;
  min-height: 390px;
  display: flex;
  flex-direction: column;
  padding: 34px clamp(26px, 3vw, 46px) 36px;
  border-right: 1px solid rgba(255,255,255,.2);
  transition: background 260ms ease, transform 260ms var(--ease);
}

.pillar:first-child { padding-left: 0; }
.pillar:last-child { border-right: 0; padding-right: 0; }
.pillar::before {
  position: absolute;
  top: -2px;
  left: 0;
  width: 62px;
  height: 3px;
  background: var(--orange);
  content: "";
  transition: width 300ms var(--ease);
}
.pillar:hover::before { width: 100%; }
.pillar:hover { background: rgba(255,255,255,.025); }
.pillar__number { color: #ff9d69; font-family: var(--display); font-size: 12px; font-weight: 700; }
.pillar h3 { max-width: 12ch; margin: 48px 0 16px; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.1; letter-spacing: -.035em; }
.pillar p { margin: 0; color: rgba(255,255,255,.68); font-size: 14px; line-height: 1.75; }
.pillar a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 26px;
  color: var(--white);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.pillar a span { color: var(--orange); font-size: 18px; transition: transform 220ms var(--ease); }
.pillar a:hover span { transform: translateX(5px); }

.actions {
  overflow: hidden;
  background: var(--white);
}

.actions::before {
  position: absolute;
  top: 0;
  left: 0;
  width: min(34vw, 520px);
  height: 100%;
  background: #edf3f1;
  content: "";
}

.actions-intro {
  position: relative;
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: clamp(40px, 7vw, 96px);
  align-items: start;
}

.apiip-identity {
  position: relative;
  padding: 34px clamp(28px, 3vw, 44px) 40px 0;
  border-top: 3px solid var(--orange);
}

.apiip-identity::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 54px;
  height: 54px;
  border-right: 1px solid rgba(0,5,60,.18);
  border-bottom: 1px solid rgba(0,5,60,.18);
  content: "";
}

.apiip-seal {
  width: clamp(112px, 11vw, 150px);
  aspect-ratio: 1;
  margin-bottom: 30px;
}

.apiip-seal img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 12px 16px rgba(0,5,60,.12));
  transition: transform 420ms var(--ease);
}

.apiip-profile:hover .apiip-seal img { transform: rotate(-2deg) scale(1.025); }

.actions-intro h2 {
  max-width: 13ch;
  margin-bottom: 0;
  font-size: clamp(30px, 3.1vw, 45px);
  line-height: 1.04;
}

.apiip-agency {
  margin: 22px 0 0;
  color: var(--navy);
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.actions-intro__copy {
  padding-top: 34px;
  columns: 2;
  column-gap: clamp(28px, 4vw, 54px);
  color: #384349;
  font-size: 14px;
  line-height: 1.78;
}
.actions-intro__copy p { margin: 0 0 18px; break-inside: avoid; }

.apiip-roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-span: all;
  margin-top: 24px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.apiip-role {
  position: relative;
  min-height: 74px;
  display: flex;
  align-items: center;
  padding: 15px 18px 15px 24px;
  border-left: 1px solid var(--rule);
  color: var(--navy);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.apiip-role:first-child { border-left: 0; }
.apiip-role::before {
  position: absolute;
  left: 10px;
  width: 4px;
  height: 4px;
  background: var(--orange);
  border-radius: 50%;
  content: "";
}

.action-heading {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-top: clamp(70px, 8vw, 110px);
}

.action-heading .eyebrow { margin-bottom: 7px; }
.action-heading h3 {
  max-width: 16ch;
  margin: 0;
  color: var(--navy);
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.04;
  letter-spacing: -.045em;
  text-align: right;
}

.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 28px;
  border-top: 2px solid var(--navy);
  border-left: 1px solid var(--rule);
}

.action {
  position: relative;
  min-height: 190px;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  grid-template-rows: auto 1fr;
  gap: 8px 18px;
  padding: 30px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  color: var(--navy);
  text-decoration: none;
  transition: background 220ms ease, color 220ms ease, transform 220ms var(--ease);
}

.action::after {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 0;
  height: 4px;
  background: var(--orange);
  content: "";
  transition: width 300ms var(--ease);
}

.action:hover { z-index: 2; background: #f0f3ef; transform: translateY(-3px); }
.action:hover::after { width: 100%; }
.action--primary { background: var(--orange); color: var(--navy); }
.action--primary:hover { background: #f06a24; }
.action__index { grid-row: 1 / 3; color: currentColor; font-family: var(--display); font-size: 11px; font-weight: 700; opacity: .64; }
.action__title { font-family: var(--display); font-size: clamp(20px, 2vw, 29px); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; }
.action__description { align-self: end; color: var(--slate); font-size: 13px; }
.action--primary .action__description { color: rgba(0,5,60,.72); }
.action__arrow { grid-column: 3; grid-row: 1 / 3; align-self: center; font-family: var(--display); font-size: 26px; transition: transform 220ms var(--ease); }
.action:hover .action__arrow { transform: translateX(5px); }

.why {
  --investment-sticky-top: var(--ia-header-height, 150px);
  --investment-band-height: 4.25rem;
  background: var(--paper);
}

.why-layout {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: clamp(40px, 7vw, 96px);
  align-items: start;
}

.why-heading {
  position: sticky;
  top: var(--ia-header-height, 150px);
}

.why-heading h2 { max-width: 9ch; }
.why-heading__summary { max-width: 36ch; margin: 0; color: var(--slate); font-size: 15px; }

.investment-case__resources {
  display: grid;
  max-width: 23rem;
  margin-top: 2.25rem;
  border-top: 1px solid var(--rule);
}

.investment-case__resources a {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--navy);
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
}

.investment-case__resources a:hover,
.investment-case__resources a:focus-visible {
  color: var(--orange-dark);
}

.investment-case__resources span {
  color: var(--orange-dark);
  font-size: 1rem;
}

.investment-chapter-stack { min-width: 0; }
.investment-chapter-stack::after { content: none; }

.investment-chapter {
  position: relative;
  min-height: 0;
  margin: 0;
  background: var(--paper);
}

.investment-chapter + .investment-chapter { margin-top: 0; }

.investment-chapter__heading {
  position: sticky;
  z-index: 20;
  top: var(--investment-sticky-top);
  min-height: var(--investment-band-height);
  display: block;
  padding: 0;
  background: var(--paper);
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
}

.investment-chapter__heading::-webkit-details-marker { display: none; }
.investment-chapter__heading::marker { content: ""; }


.investment-reason__sequence {
  color: var(--orange-dark);
  font-family: var(--display);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: .04em;
}

.investment-chapter__heading h3 {
  min-height: var(--investment-band-height);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 3.25rem;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--navy);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  color: var(--navy);
  font-family: var(--display);
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.25;
  transition: background-color 180ms ease-out;
}

.investment-chapter__title { transition: color 180ms ease-out; }

.investment-chapter__heading:hover h3,
.investment-chapter__heading:active h3 {
  background: var(--mist);
}

.investment-chapter__heading:focus-visible {
  outline-color: var(--orange-dark);
  outline-offset: -3px;
  box-shadow: none;
}

.investment-chapter__state {
  color: var(--slate);
  font-family: var(--body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: normal;
  white-space: nowrap;
}

.investment-chapter__state-closed,
.investment-chapter__toggle-closed {
  display: none;
}

.investment-chapter:not([open]) .investment-chapter__state-open,
.investment-chapter:not([open]) .investment-chapter__toggle-open {
  display: none;
}

.investment-chapter:not([open]) .investment-chapter__state-closed,
.investment-chapter:not([open]) .investment-chapter__toggle-closed {
  display: inline;
}

.investment-chapter:not([open]) .investment-chapter__heading h3 {
  border-top-color: var(--rule);
  background: var(--mist);
}

.investment-chapter__toggle {
  width: 3.25rem;
  display: grid;
  align-self: stretch;
  place-items: center;
  border-left: 1px solid var(--rule);
  color: var(--orange-dark);
  font-family: var(--body);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
}

.investment-chapter__reasons {
  padding-bottom: var(--investment-band-height);
  background: var(--paper);
}

.investment-reason {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) minmax(9.5rem, 10.5rem);
  align-items: start;
  gap: clamp(1.25rem, 2vw, 1.75rem);
  padding: clamp(1.85rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--rule);
}

.investment-reason__sequence { padding-top: .28rem; }

.investment-reason__body {
  grid-column: 2;
  grid-row: 1;
}

.investment-reason h4 {
  margin: 0 0 .45rem;
  color: var(--navy);
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.3;
}

.investment-reason p {
  max-width: 68ch;
  margin: 0;
  color: var(--slate);
  font-size: 1rem;
  line-height: 1.6;
}

.investment-reason .investment-reason__proof {
  grid-column: 3;
  grid-row: 1;
  max-width: 11rem;
  color: var(--navy);
  font-family: var(--display);
  line-height: 1.2;
}

.investment-reason__proof strong,
.investment-reason__proof span {
  display: block;
}

.investment-reason__proof strong {
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.05;
}

.investment-reason__proof span {
  margin-top: .5rem;
  color: var(--slate);
  font-family: var(--body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.4;
}

.site-footer { background: var(--navy); color: var(--white); }
.site-footer__grid {
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding-block: 40px;
}
.site-footer__identity { display: flex; align-items: center; gap: 18px; }
.site-footer__identity img { width: 66px; height: 66px; object-fit: contain; }
.site-footer__identity div { display: grid; }
.site-footer__identity strong { max-width: 34ch; font-family: var(--display); font-size: 14px; line-height: 1.35; text-transform: uppercase; }
.site-footer__identity span, .site-footer address span { color: rgba(255,255,255,.6); font-size: 12px; }
.site-footer address { display: grid; text-align: right; font-style: normal; }
.site-footer address a { min-height: 30px; color: var(--white); font-size: 13px; text-decoration: none; }
.site-footer address a:hover { color: #ff9d69; }
.site-footer__bottom {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.55);
  font-size: 11px;
}
.site-footer__bottom a { min-height: 44px; display: inline-flex; align-items: center; color: var(--white); text-decoration: none; }

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1080px) {
  .primary-nav a { padding-inline: 10px; }
  .hero__message { grid-column: 1 / span 7; }
  .leadership { width: min(38vw, 390px); }
  .pillar { padding-inline: 28px; }
  .pillar:first-child { padding-left: 0; }
  .pillar:last-child { padding-right: 0; }
}

@media (max-width: 900px) {
  .identity strong { max-width: 26ch; }
  .menu-toggle {
    min-width: 76px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid var(--rule);
    background: transparent;
    color: var(--navy);
    font-family: var(--display);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
  }
  .menu-toggle__icon { width: 18px; display: grid; gap: 5px; }
  .menu-toggle__icon i { height: 2px; display: block; background: currentColor; transition: transform 220ms ease; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon i:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .primary-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    padding: 12px var(--gutter) 18px;
    background: var(--paper);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .primary-nav.is-open { display: grid; }
  .primary-nav a { min-height: 50px; border-bottom: 1px solid var(--rule); }
  .primary-nav a::after { right: auto; bottom: 0; left: 0; width: 52px; }
  .hero, .hero__overlay { min-height: 850px; }
  .hero__overlay { display: block; }
  .hero__message { width: min(100%, 700px); margin-top: 32px; }
  .leadership { right: var(--gutter); bottom: 28px; width: min(46vw, 360px); }
  .leadership img { max-height: 230px; }
  .hero-slide figcaption { display: none; }
  .hero-carousel__status { right: auto; bottom: 38px; left: var(--gutter); }
  .about-grid, .actions-intro, .why-layout { grid-template-columns: 1fr; }
  .about-visual, .why-heading { position: static; }
  .about-visual { max-width: none; }
  .about-visual img { height: 440px; min-height: 0; }
  /* Stacked, the letter would otherwise run the full width of a phone. It is
     close to square now rather than tall, so it can be wider than the first
     version and still leave the heading in reach. */
  .about-lockup { max-width: min(86vw, 400px); margin-inline: auto; grid-template-columns: 48px minmax(0, 1fr); }
  .about-lockup__name { font-size: 22px; }
  .about-wordmark { text-align: center; }
  .actions::before { display: none; }
  .apiip-identity {
    margin-inline: calc(var(--gutter) * -1);
    padding: 34px var(--gutter) 42px;
    background: #edf3f1;
  }
  .actions-intro h2, .why-heading h2 { max-width: 15ch; }
  .actions-intro__copy { padding-top: 0; }
  .pillar-grid { grid-template-columns: 1fr; }
  .pillar { min-height: 320px; padding-inline: 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.2); }
  .pillar:last-child { border-bottom: 0; }
  .pillar h3 { margin-top: 28px; }
  .actions-intro__copy { columns: 1; }
  .investment-case__resources {
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .investment-case__resources a {
    align-content: center;
    padding: .9rem 1rem;
    border-right: 1px solid var(--rule);
  }
  .investment-case__resources a:first-child { padding-left: 0; }
  .investment-case__resources a:last-child {
    padding-right: 0;
    border-right: 0;
  }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; }
  html { scroll-padding-top: 0; }
  .utility-bar__inner > span { display: none; }
  .utility-bar__inner { justify-content: flex-end; }
  .utility-bar__links a { margin-right: auto; }
  .identity-bar { min-height: 68px; }
  .identity img { width: 42px; height: 42px; }
  .identity strong { max-width: 19ch; font-size: 10px; }
  .identity small { display: none; }
  .menu-toggle { min-width: 48px; padding: 0; }
  .menu-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hero, .hero__overlay { min-height: 820px; }
  .hero__overlay { display: block; padding-inline: 20px; }
  .hero__message { width: 100%; margin-top: 24px; }
  .hero__message-inner { padding: 30px 22px 34px; }
  h1 { font-size: clamp(46px, 14vw, 64px); }
  .leadership { right: 20px; bottom: 22px; left: 20px; width: auto; padding: 12px 14px 0; }
  .leadership img { max-height: 220px; }
  .leadership figcaption { min-height: 78px; padding-inline: 0; }
  .leadership strong { font-size: 11px; }
  .leadership small { font-size: 10px; }
  .hero-slide figcaption { display: none; }
  .hero-carousel__status { right: auto; bottom: 330px; left: 20px; }
  .hero-carousel__controls button { width: 44px; height: 44px; }
  .section { padding-block: 78px; }
  .section-marker { margin-bottom: 42px; }
  .about-visual img { height: 390px; }
  .about-copy h2, .section-heading h2, .actions-intro h2, .why-heading h2 { font-size: 38px; }
  .about-copy__columns, .production-facts, .state-facts { grid-template-columns: 1fr; }
  .production-facts div:nth-child(odd) { border-right: 0; }
  .production-facts div:nth-child(even) { padding-left: 0; }
  .state-facts p:nth-child(odd) { border-right: 0; }
  .pillar { min-height: 350px; }
  .action-grid { grid-template-columns: 1fr; }
  .apiip-seal { width: 108px; margin-bottom: 24px; }
  .apiip-roles { grid-template-columns: 1fr; }
  .apiip-role { min-height: 52px; border-top: 1px solid var(--rule); border-left: 0; }
  .apiip-role:first-child { border-top: 0; }
  .action-heading { align-items: flex-start; flex-direction: column; gap: 10px; margin-top: 72px; }
  .action-heading h3 { max-width: 13ch; font-size: 34px; text-align: left; }
  .action { min-height: 168px; padding: 24px 20px; grid-template-columns: 38px 1fr auto; }
  .why {
    --investment-band-height: 4.75rem;
  }
  .investment-case__resources { grid-template-columns: minmax(0, 1fr); }
  .investment-case__resources a,
  .investment-case__resources a:first-child,
  .investment-case__resources a:last-child {
    min-height: 3.25rem;
    padding: .65rem 0;
    border-right: 0;
  }
  .investment-chapter__heading { min-height: var(--investment-band-height); }
  .investment-chapter__heading h3 {
    min-height: var(--investment-band-height);
    grid-template-columns: minmax(0, 1fr) 3.25rem;
    gap: .15rem .75rem;
    padding: .65rem 0;
  }
  .investment-chapter__title {
    grid-column: 1;
    grid-row: 1;
  }
  .investment-chapter__state {
    grid-column: 1;
    grid-row: 2;
  }
  .investment-chapter__toggle {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .investment-reason {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    padding-right: 0;
    column-gap: .85rem;
    row-gap: .8rem;
  }
  .investment-reason__sequence {
    grid-column: 1;
    grid-row: 1 / span 3;
  }
  .investment-reason .investment-reason__proof {
    grid-column: 2;
    grid-row: 2;
    max-width: none;
  }
  .investment-reason__body { display: contents; }
  .investment-reason__body h4 {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
  }
  .investment-reason__body > p {
    grid-column: 2;
    grid-row: 3;
  }
  .investment-reason__proof strong { font-size: 1.5rem; }
  .site-footer__grid { align-items: flex-start; flex-direction: column; }
  .site-footer address { text-align: left; }
  .site-footer__bottom { align-items: flex-start; flex-direction: column; padding-block: 18px; }
}

/* Standalone-slider direction: cinematic, full-bleed, and CTA-free. */
.hero,
/* Fit the hero to the first screen so the slider controls at its foot are
   visible without scrolling: viewport minus the site header, floored so the
   leaders photo still fits, capped at the design height. */
.hero,
.hero__content {
  min-height: clamp(660px, calc(100vh - var(--ia-header-height, 150px)), 860px);
}

.hero { background: #0b3a2c; }

.hero::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  /* Legibility scrim for the text column only — the rest of the photograph is
     shown untinted. Neutral rather than green so the image keeps its own colour. */
  /* Was a wash across the whole left half of the photograph. Replaced 2026-09-07
     with soft plates that sit behind the text only (see .hero__message::before
     below), so the picture reads clean everywhere the words are not. What stays
     here is a light foot wash: the carousel counter, dots and play button sit at
     the bottom centre over bare photo and have no plate of their own. */
  background: none;
  content: "";
  pointer-events: none;
}


.hero__content {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: clamp(28px, 5vw, 76px);
  padding-top: clamp(28px, 4vh, 66px);
  padding-bottom: 104px;
  pointer-events: none;
}

.hero__message {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  width: auto;
  min-height: 0;
  margin: 0 0 clamp(48px, 8vh, 82px);
  overflow: visible;
  display: block;
  background: transparent;
  border: 0;
}

.hero__message-inner { padding: 0; }

/* The hero runs edge to edge: the text block sits at the left gutter (in line
   with the logo) at its original width, the leaders sit at the right gutter. */
.hero__content.shell { width: auto; max-width: none; }
.hero__message { max-width: 700px; }
.hero .leadership { justify-self: end; width: fit-content; max-width: 570px; }

.hero__badge {
  width: fit-content;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 8px 16px;
  background: rgba(239,239,220,.12);
  border: 1px solid rgba(239,239,220,.34);
  border-radius: 999px;
  color: #f1efdf;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  backdrop-filter: blur(8px);
}

.hero__badge::before {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  background: var(--orange);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(254,89,0,.15);
  content: "";
}

.hero__badge svg { display: none; }

.hero h1 {
  max-width: 13ch;
  margin: 0;
  color: #f4f0df;
  font-family: var(--display);
  font-size: clamp(54px, 6.1vw, 88px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.06em;
  text-wrap: balance;
}

.hero-theme-label {
  margin: 0 0 12px;
  color: rgba(244,240,223,.76);
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.hero-brand-line {
  max-width: 26ch;
  margin: 20px 0 0;
  color: #ff9b68;
  font-family: var(--display);
  font-size: clamp(18px, 1.9vw, 27px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.02em;
}

/* Third brand line — a quiet motto, so it does not compete with the orange. */
.hero-brand-sub {
  margin: 12px 0 0;
  color: rgba(244,240,223,.72);
  font-family: var(--display);
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hero-theme-label.is-changing,
.hero-brand-line.is-changing { animation: hero-title-change 360ms var(--ease); }
/* The fact row is four columns of numbers; sliding it vertically like a single
   line of text reads as a judder. It crossfades in place instead. */
.hero-stats.is-changing { animation: hero-facts-change 360ms var(--ease); }

@keyframes hero-facts-change {
  0% { opacity: 1; }
  45% { opacity: 0; }
  55% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes hero-title-change {
  0% { opacity: 1; transform: translateY(0); }
  45% { opacity: 0; transform: translateY(10px); }
  55% { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}

.hero .leadership {
  position: static;
  z-index: auto;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.hero .leadership img {
  width: min(100%, 570px);
  /* Shrinks on short screens so the whole hero, controls included, fits the first view. */
  max-height: clamp(300px, calc(100vh - 500px), 490px);
  margin: 0 auto -1px;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.26));
}

.hero .leadership figcaption {
  position: relative;
  min-height: 0;
  gap: 16px;
  padding: 11px 16px 12px;
  background: rgba(5,37,29,.96);
  border: 1px solid rgba(239,239,220,.3);
  border-radius: 6px;
}

.hero .leadership figcaption::after {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 50%;
  width: 1px;
  background: rgba(239,239,220,.22);
  content: "";
}

.hero .leadership strong { font-size: 14px; }
.hero .leadership small { margin-top: 3px; color: rgba(244,240,223,.7); font-size: 10px; }

.hero-stats {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(244,240,223,.5);
}

.hero-stats div {
  min-width: 0;
  padding: 0 clamp(11px, 1.4vw, 22px);
  border-left: 1px solid rgba(244,240,223,.22);
}

.hero-stats div:first-child { padding-left: 0; border-left: 0; }
.hero-stats dt {
  color: #f4f0df;
  font-family: var(--display);
  font-size: clamp(18px, 1.5vw, 25px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.hero-stats dd {
  margin: 7px 0 0;
  /* .68 dropped the rightmost label to 3.99:1 over the brighter hero photos --
     below the 4.5:1 WCAG AA floor this 10px text needs. .88 keeps the label
     softer than its <dt> while holding 5.5:1 on the worst slide. */
  color: rgba(244,240,223,.88);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* Reserve three lines. The facts change with the slide and the longest
     labels wrap to three lines while others take one or two; without this the
     block changes height, and because it is anchored to the bottom of the hero
     it jumps 13px every time those slides come round -- which reads as the hero
     shaking. In em so it still holds at every text-size setting. */
  min-height: 3.9em;
}

.hero-slide figcaption { display: none; }
.hero-slide img { filter: none; }
/* Positional, so they shift whenever a slide is inserted or reordered.
   1 dam, 2 kiwi orchard, 3 Ziro wine plant, 4 handloom, 5 river. */
.hero-slide:first-child img { object-position: center 54%; }
.hero-slide:nth-child(2) img { object-position: center; }
.hero-slide:nth-child(3) img { object-position: center; }
.hero-slide:nth-child(5) img { object-position: center 62%; }

.hero-carousel__status {
  right: auto;
  bottom: 22px;
  left: 50%;
  gap: 14px;
  transform: translateX(-50%);
  pointer-events: auto;
}

.hero-carousel__counter { gap: 8px; color: #f4f0df; }
.hero-carousel__counter i { width: 24px; background: rgba(244,240,223,.45); }

.hero-carousel__dots { display: flex; align-items: center; gap: 7px; }
.hero-carousel__dots button {
  width: 38px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.hero-carousel__dots span {
  width: 100%;
  height: 4px;
  display: block;
  overflow: hidden;
  background: rgba(244,240,223,.38);
  border-radius: 4px;
}
.hero-carousel__dots span::after {
  width: 0;
  height: 100%;
  display: block;
  background: var(--orange);
  content: "";
}
.hero-carousel__dots button.is-active span::after { width: 100%; }

.hero-carousel__controls { border: 0; }
.hero-carousel__controls button {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(244,240,223,.4);
  border-radius: 50%;
  background: rgba(5,37,29,.72);
}
.hero-carousel__controls svg { width: 16px; height: 16px; }
.hero-scroll { display: none; }

@media (max-width: 900px) {
  .hero, .hero__content { min-height: 900px; }
  .hero__content {
    grid-template-columns: minmax(0, 1fr) minmax(300px, .75fr);
    column-gap: 22px;
    padding-top: 36px;
  }
  .hero__message { margin-bottom: 48px; }
  .hero h1 { font-size: clamp(48px, 7.4vw, 64px); }
  .hero .leadership img { max-height: 370px; }
  .hero .leadership figcaption { padding-inline: 14px; }
  .hero .leadership strong { font-size: 11px; }
  .hero .leadership small { font-size: 10px; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .hero-stats div:nth-child(3) { padding-left: 0; border-left: 0; }
  .hero-carousel__status { bottom: 21px; }
}

@media (max-width: 640px) {
  .hero, .hero__content { min-height: 890px; }
  .hero__content {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 22px;
    padding: 28px 20px 70px;
  }
  .hero::before {
    background: linear-gradient(180deg,
      rgba(4,20,16,.84) 0%,
      rgba(4,20,16,.62) 34%,
      rgba(4,20,16,.16) 58%,
      rgba(4,20,16,0) 74%);
  }
  .hero__message { grid-column: 1; grid-row: 1; align-self: start; margin: 0; }
  .hero__badge { min-height: 38px; margin-bottom: 18px; padding: 7px 13px; font-size: 10px; }
  .hero-theme-label { margin-bottom: 10px; font-size: 10px; }
  .hero h1 { max-width: 12ch; font-size: clamp(42px, 12.8vw, 52px); line-height: .98; }
  .hero-brand-line { max-width: 24ch; margin-top: 14px; font-size: 16px; }
  .hero-brand-sub { margin-top: 9px; font-size: 11px; letter-spacing: .14em; }
  .hero-stats { grid-column: 1; grid-row: 2; padding-top: 15px; }
  .hero-stats div { padding-inline: 12px; }
  .hero-stats dt { font-size: 19px; }
  .hero-stats dd { font-size: 10px; }
  .hero .leadership { grid-column: 1; grid-row: 3; align-self: end; }
  .hero .leadership img { max-height: 255px; }
  .hero .leadership figcaption { min-height: 72px; gap: 12px; padding: 12px 10px; }
  .hero .leadership figcaption::after { top: 16px; bottom: 16px; }
  .hero .leadership strong { font-size: 12px; }
  .hero .leadership small { font-size: 10px; }
  .hero-carousel__status { bottom: 18px; gap: 9px; }
  .hero-carousel__dots button { width: 27px; }
  .hero-carousel__counter i { width: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .hero-slide img, .hero-slide.is-active img { transform: none; }
}

/* Know Our Districts: one restrained investment index inside section five. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* The investment film, between the Why Invest reasons and Know Our Districts. It spans
   the full content width of the section: the 1280px shell matches the 720p source, so
   the picture plays at its native size rather than enlarged. No frame, radius or
   shadow - this page draws its structure with hairlines only. preload="none" in the
   markup keeps the 24 MB file off the wire until someone presses play; the poster is
   a 58 kB still of the ARUNACHAL letters card. */
.investment-film {
  margin: clamp(76px, 10vw, 144px) 0 0;
}

.investment-film__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--navy);
}

.district-explorer {
  margin-top: clamp(76px, 10vw, 144px);
  padding-top: clamp(44px, 6vw, 78px);
  border-top: 1px solid var(--navy);
}

.district-explorer__header {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 7vw, 96px);
  align-items: end;
  margin-bottom: 40px;
}

.district-explorer__header .eyebrow { margin-bottom: 12px; }
.district-explorer__header h3 {
  max-width: 11ch;
  margin: 0;
  color: var(--navy);
  font-family: var(--display);
  font-size: clamp(42px, 5.3vw, 72px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.055em;
}

.district-explorer__header > p {
  max-width: 54ch;
  margin: 0 0 6px;
  color: var(--slate);
  font-size: 15px;
  line-height: 1.75;
}

.district-explorer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
  background: var(--white);
  border: 1px solid var(--rule);
  /* start-aligned rows are what let the map panel stick instead of stretching.
     The grid itself stays white so the map's column reads as one surface
     while the pinned map travels down it, and the divider is a border rather
     than a coloured gap for the same reason. */
  align-items: start;
}

.district-map-panel,
.district-context-panel { min-width: 0; background: var(--white); }
/* The context panel is much taller than the map once a district loads, so the
   map pins itself below the site header and stays in view while the visitor
   reads down the panel. It sizes to its own content rather than the row. */
.district-map-panel {
  position: sticky;
  top: var(--ia-header-height, 150px);
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 40px);
}
.district-map-viewport { flex: 0 0 auto; }
.district-context-panel { display: flex; flex-direction: column; border-left: 1px solid var(--rule); }

.district-panel-heading {
  min-height: 38px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.district-panel-heading span { color: #bf4400; font-weight: 700; }
.district-panel-heading strong { color: var(--navy); font-family: var(--display); font-size: 10.5px; }

.district-map-viewport {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.district-map-viewport::after {
  position: absolute;
  right: 0;
  bottom: 17px;
  color: #9ba7a1;
  content: "EAST  ·  96°E";
  content: "EAST  ·  96°E" / "";
  font-family: var(--display);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .16em;
}

.district-map {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  overflow: visible;
}

.district-map__paths path {
  fill: #dce5e0;
  stroke: var(--white);
  stroke-width: 1.3;
  opacity: 0;
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  animation: district-path-arrive 420ms var(--ease) forwards;
  animation-delay: calc(var(--district-order) * 16ms);
  transition: fill 180ms ease, opacity 180ms ease, stroke 180ms ease, stroke-width 180ms ease, transform 180ms var(--ease);
}

@keyframes district-path-arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

.district-map__paths path.is-previewed,
.district-map__paths path:hover {
  fill: #ffb58d;
  stroke: var(--navy);
  stroke-width: 2;
}
.district-map__paths path.is-selected,
.district-map__paths path.is-selected:hover {
  fill: var(--orange);
  stroke: var(--navy);
  stroke-width: 2.8;
  opacity: 1;
}
.district-map__paths path:focus-visible {
  outline: none;
  fill: #ffb58d;
  stroke: var(--navy);
  stroke-width: 3.2;
}

/* Base geography ported from the published Key Sectors map (same coordinate
   space), restyled into the landing palette. Decoration only — the district
   paths underneath stay the sole interactive layer. */
.district-map__geography,
.district-map__overlay { pointer-events: none; }

.district-map__neighbours text {
  fill: #9aa8a1;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
}

.district-map__brahmaputra {
  fill: none;
  stroke: #b9d2df;
  stroke-width: 7;
  stroke-linecap: round;
}

.district-map__water-label {
  fill: #8fa9b6;
  font-family: var(--display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
}

.district-map__rivers path {
  fill: none;
  stroke: #6f9fba;
  stroke-linecap: round;
  opacity: .85;
}

.district-map__roads path {
  fill: none;
  stroke: #8b6a52;
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: .72;
}

.district-map__roads path.is-dashed { stroke-dasharray: 6 5; opacity: .55; }

/* District names sit inside their own shape. The white halo keeps a name legible
   where a tight district forces it to overrun its border slightly. */
.district-map__labels { pointer-events: none; }

.district-map__labels text {
  fill: #33424c;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .005em;
  paint-order: stroke fill;
  stroke: rgba(255, 255, 255, .9);
  stroke-width: 2.2px;
  stroke-linejoin: round;
  transition: fill 180ms ease;
}

.district-map__labels text.is-previewed { fill: var(--navy); }

.district-map__labels text.is-selected {
  fill: var(--navy);
  stroke: rgba(255, 255, 255, .96);
  stroke-width: 2.6px;
}

@media (max-width: 820px) {
  .district-map__water-label { display: none; }
  /* At phone widths the viewBox shrinks every label below a readable size, so
     only the district the visitor has actually chosen keeps its name. */
  .district-map__labels text { display: none; }
  .district-map__labels text.is-selected {
    display: block;
    /* The viewBox is scaled right down at phone widths, so the one name still on
       show is sized in user units to land at roughly 12px on screen. */
    font-size: 28px !important;
    stroke-width: 5px;
  }
}

.district-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  color: var(--slate);
  font-size: 10.5px;
  font-weight: 600;
}

.district-map-legend span { display: inline-flex; align-items: center; gap: 7px; }
.district-map-legend__swatch { width: 12px; height: 12px; display: inline-block; background: #dce5e0; border: 1px solid #aab7b0; }
.district-map-legend__swatch--selected { background: var(--orange); border-color: var(--navy); }

.district-map-source {
  max-width: 80ch;
  margin: 18px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--orange);
  color: #6d7772;
  font-size: 10.5px;
  line-height: 1.6;
}

/* The district finder is a tool, not information about the selected district,
   so it sits with the layer filters instead of inside the contextual panel. */
.district-finder-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--rule);
}

.district-finder-bar > label {
  color: var(--slate);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.district-finder-bar input[type="search"] {
  flex: 1 1 auto;
  max-width: 340px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #bac5bf;
  border-radius: 0;
  background: var(--white);
  color: var(--navy);
  font: 600 14px/1.4 var(--body);
  outline: 0;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.district-finder-bar input[type="search"]::placeholder { color: #7f8984; font-weight: 400; }
.district-finder-bar input[type="search"]:focus-visible { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(254,89,0,.18); }

.district-directory-drawer { margin-left: auto; border: 0; }
.district-directory-drawer summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.district-directory-drawer summary::-webkit-details-marker { display: none; }
.district-directory-drawer summary span {
  margin-left: auto;
  color: var(--slate);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.district-directory-drawer summary span strong { color: var(--orange-dark); }
.district-directory-drawer summary::after { color: var(--orange-dark); content: "+"; font-family: var(--display); font-size: 20px; font-weight: 700; line-height: 1; }
.district-directory-drawer[open] summary::after { content: "−"; }
.district-directory-drawer summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

.district-directory {
  position: absolute;
  z-index: 20;
  top: calc(100% + 1px);
  right: 0;
  left: 0;
  max-height: 330px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  column-gap: 26px;
  overflow-y: auto;
  padding: 8px 18px 12px;
  background: var(--white);
  border: 1px solid var(--navy);
  box-shadow: 0 14px 26px rgba(0,5,60,.12);
  scrollbar-color: var(--orange) #edf0ed;
  scrollbar-width: thin;
}

.district-directory button {
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 10px 4px;
  border: 0;
  border-bottom: 1px solid #e4e8e5;
  background: transparent;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, opacity 180ms ease, padding-left 180ms var(--ease);
}
.district-directory button:last-child { border-bottom: 0; }
.district-directory button[hidden] { display: none; }
.district-directory button strong { font-size: 14px; line-height: 1.35; }
.district-directory button:hover,
.district-directory button.is-previewed { padding-left: 10px; background: #edf2ef; }
.district-directory button.is-selected { padding-left: 10px; background: var(--orange); color: var(--navy); opacity: 1; }
.district-directory button:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--orange); outline-offset: -2px; }

.district-selection { flex: 1; display: flex; flex-direction: column; background: var(--navy); color: var(--white); }

.district-selection__identity {
  min-width: 0;
  padding: clamp(28px, 3vw, 38px);
  border-bottom: 1px solid rgba(255,255,255,.18);
}

.district-selection__identity small {
  display: block;
  margin-bottom: 8px;
  color: rgba(255,255,255,.55);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.district-selection__identity h4 {
  margin: 0;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -.035em;
}
.district-selection__identity p { margin: 12px 0 0; color: rgba(255,255,255,.68); font-size: 12px; line-height: 1.6; }

.district-about .district-writeup {
  margin: 0;
  color: rgba(255,255,255,.86);
  font-size: 14px;
  line-height: 1.6;
}

.district-facts {
  padding: clamp(22px, 2.4vw, 30px) clamp(28px, 3vw, 38px);
  border-bottom: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.035);
}

.district-facts__eyebrow {
  margin: 0 0 18px;
  color: rgba(255,255,255,.55);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Labels sit above values: the contextual panel is only ~320px wide, so a
   side-by-side label column starves the value to about 140px. */
.district-facts dl { display: grid; gap: 16px; margin: 0; }
.district-facts dl > div { min-width: 0; }
.district-facts dt {
  margin-bottom: 5px;
  color: #ff9f6c;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.district-facts dd { margin: 0; color: rgba(255,255,255,.86); font-size: 12px; line-height: 1.6; }
.district-facts dd[data-fact="circles"] { color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.65; }
.district-facts__pending { margin: 0; color: rgba(255,255,255,.6); font-size: 12px; line-height: 1.6; }

.district-selection__fields {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
}
.district-selection__fields div { min-width: 0; padding: 18px clamp(28px, 3vw, 38px); border-bottom: 1px solid rgba(255,255,255,.15); }
.district-selection__fields div:last-child { border-bottom: 0; }
.district-selection__fields dt { margin-bottom: 7px; color: #ff9f6c; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.district-selection__fields dd { margin: 0; color: rgba(255,255,255,.78); font-size: 12px; line-height: 1.55; }
.district-selection__fields dd b { color: var(--white); font-weight: 700; }
.district-selection__fields dd .is-absent { color: rgba(255,255,255,.5); font-style: italic; }
.district-selection__fields dd .is-aside { display: inline-block; padding-bottom: 4px; color: rgba(255,255,255,.52); font-size: 10.5px; }

.district-selection__source {
  margin: 0;
  padding: 14px clamp(28px, 3vw, 38px) 20px;
  color: rgba(255,255,255,.5);
  font-size: 10.5px;
  line-height: 1.6;
  border-top: 1px solid rgba(255,255,255,.15);
}

@media (min-width: 1100px) {
  .district-facts dl { grid-template-columns: 1fr 1fr; column-gap: 26px; }
  .district-facts dl > div:last-child { grid-column: 1 / -1; }
  .district-selection__fields { grid-template-columns: 1fr 1fr; }
  .district-selection__fields div:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.15); }
  .district-selection__fields div:last-child { grid-column: 1 / -1; border-right: 0; }
}

@media (max-width: 1080px) {
  .district-explorer__grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr); }
}

@media (max-width: 820px) {
  .district-finder-bar { flex-wrap: wrap; gap: 10px 14px; padding: 12px 0 14px; }
  .district-finder-bar input[type="search"] { flex: 1 1 200px; max-width: none; }
  .district-directory-drawer { margin-left: 0; }
  .district-directory { max-height: 300px; }
  .district-explorer__header { grid-template-columns: 1fr; gap: 22px; }
  .district-explorer__header h3 { max-width: none; }
  .district-explorer__grid { grid-template-columns: 1fr; }
  /* Stacked layout: a pinned map would sit on top of the panel it introduces. */
  .district-map-panel { position: static; }
  .district-context-panel { border-left: 0; border-top: 1px solid var(--rule); }
  .district-map-viewport { min-height: 360px; }
  .district-facts dl { grid-template-columns: 1fr 1fr; column-gap: 26px; }
  .district-facts dl > div:last-child { grid-column: 1 / -1; }
  .district-selection__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .district-selection__fields div { border-right: 1px solid rgba(255,255,255,.15); }
  .district-selection__fields div:nth-child(even) { border-right: 0; }
  .district-selection__fields div:last-child { grid-column: 1 / -1; border-right: 0; }
}

@media (max-width: 520px) {
  .district-explorer { margin-top: 72px; padding-top: 42px; }
  .district-explorer__header h3 { font-size: 42px; }
  .district-finder-bar > label { width: 100%; }
  .district-finder-bar input[type="search"] { flex: 1 1 100%; }
  .district-directory-drawer { width: 100%; }
  .district-directory { grid-template-columns: 1fr; max-height: 280px; }
  .district-map-panel { padding: 20px 16px; }
  .district-map-viewport { min-height: 260px; }
  .district-map-viewport::after { bottom: 8px; }
  .district-map-legend { gap: 8px 14px; }
  .district-selection__identity { padding: 28px 20px; }
  .district-facts { padding: 22px 20px; }
  .district-facts dl { grid-template-columns: 1fr; }
  .district-selection__fields { grid-template-columns: 1fr; }
  .district-selection__fields div:nth-child(n) { padding: 20px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.15); }
  .district-selection__fields div:last-child { border-bottom: 0; }
}

/* Keyboard focus must not recolour the selected district, or the legend stops
   being true. */
.district-explorer .district-map__paths path.is-selected,
.district-explorer .district-map__paths path.is-selected:focus-visible {
  fill: var(--orange);
  stroke: var(--navy);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .district-map__paths path { opacity: 1; animation: none; transform: none !important; }
}

/* ---------------------------------------------------------------------------
   Investor Support and the assistant.
   --------------------------------------------------------------------------- */

.relationship-manager-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  align-items: end;
  gap: clamp(32px, 6vw, 88px);
  margin-top: clamp(72px, 9vw, 128px);
  padding: clamp(34px, 5vw, 64px);
  background: var(--navy);
  border-left: 5px solid var(--orange);
  color: #f4f0df;
}

.relationship-manager-cta__copy .eyebrow { color: #ff9f6c; }

.relationship-manager-cta__copy h3 {
  max-width: 15ch;
  margin: 0 0 16px;
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.04;
  letter-spacing: -.045em;
}

.relationship-manager-cta__copy > p:last-child { max-width: 62ch; margin: 0; color: rgba(244,240,223,.76); font-size: 15px; line-height: 1.7; }

.relationship-manager-cta__link {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 22px;
  background: var(--orange);
  color: #fff;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  transition: background 220ms ease, transform 220ms var(--ease);
}

.relationship-manager-cta__link::after { font-size: 22px; content: "↗"; }
.relationship-manager-cta__link:hover { background: var(--orange-dark); transform: translateY(-3px); }
.relationship-manager-cta__link:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

.chatbot-prototype { position: fixed; z-index: 80; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); display: grid; justify-items: end; gap: 12px; }
.chatbot-trigger { min-height: 64px; display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; background: var(--navy); border: 1px solid rgba(255,255,255,.32); border-radius: 999px; color: #fff; box-shadow: 0 14px 34px rgba(0,5,60,.26); cursor: pointer; }
.chatbot-trigger img { width: 50px; height: 50px; object-fit: contain; }
.chatbot-trigger span { font-size: 12px; font-weight: 700; }
.chatbot-trigger:hover { background: var(--orange); color: var(--navy); }
.chatbot-panel { position: relative; width: min(360px, calc(100vw - 32px)); padding: 28px; background: #fff; border: 1px solid var(--rule); color: var(--ink); box-shadow: 0 20px 54px rgba(0,5,60,.24); }
.chatbot-panel[hidden] { display: none; }
.chatbot-panel__close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; background: transparent; border: 1px solid var(--rule); border-radius: 50%; color: var(--navy); font-size: 24px; cursor: pointer; }
.chatbot-panel__eyebrow { margin: 0 0 10px; color: var(--orange-dark); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.chatbot-panel h2 { max-width: 15ch; margin: 0; color: var(--navy); font-family: var(--display); font-size: 26px; line-height: 1.08; letter-spacing: -.04em; }
.chatbot-panel > p:not(.chatbot-panel__eyebrow) { margin: 16px 0 0; color: var(--slate); font-size: 13px; line-height: 1.65; }
.chatbot-panel__topics { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.chatbot-panel__topics span { padding: 7px 10px; background: #eef2ef; color: var(--navy); font-size: 11px; font-weight: 700; }

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

@media (max-width: 640px) {
  .relationship-manager-cta { padding: 30px 22px; }
  .relationship-manager-cta__link { justify-content: flex-start; }
  .chatbot-trigger span { display: none; }
  .chatbot-trigger { min-width: 64px; padding: 7px; }
}

/* ---- Hero legibility: shadows on the type, nothing over the photograph. --------
   Kept last in the file: this stylesheet overrides itself repeatedly, and
   .hero__message::before is set to display:none earlier on, so anything targeting
   the hero text has to come after it.

   Three stacked shadows per rule rather than one. The tight one gives the glyph a
   hard edge so it stays crisp against detail; the mid one separates it from the
   local background; the wide, faint one darkens the area around the whole word so
   a bright patch behind it cannot swallow it. One shadow alone does only the first
   job and the text still disappears over a bright sky.

   NOTE FOR ANY FUTURE ACCESSIBILITY PASS: WCAG contrast is computed against the
   background pixel and gives no credit for text-shadow, so a formal audit of these
   slides will still flag the 10px labels over the brightest photographs. This is a
   deliberate choice by the site owner (2026-09-07) in favour of keeping the
   photography clean. If a plate or scrim is ever wanted back, the history is in
   commits c6c3c1a and c5c1255. */
/* The small lines are cream on a photograph that is sometimes ALSO cream (the tribes
   collage is printed on paper). A soft drop shadow cannot rescue same-on-same, so
   these get a tight dark halo -- offsets in four directions at 1px -- which works as
   a stroke and keeps the letter readable whatever is behind it. They are also set to
   full opacity: at .72 and .76 they were being asked to be legible while faded. */
.hero-theme-label,
.hero .hero-brand-sub,
.hero-stats dd {
  color: #f4f0df;
  text-shadow:
    0 0 2px rgba(3,16,13,.98),
    0 1px 1px rgba(3,16,13,1),
    1px 0 1px rgba(3,16,13,.92),
    -1px 0 1px rgba(3,16,13,.92),
    0 -1px 1px rgba(3,16,13,.85),
    0 3px 12px rgba(3,16,13,.9),
    0 8px 30px rgba(3,16,13,.7);
}

.hero__badge,
.hero .hero-brand-line,
.hero-stats dt {
  text-shadow:
    0 0 2px rgba(3,16,13,.9),
    0 1px 2px rgba(3,16,13,.98),
    0 2px 9px rgba(3,16,13,.88),
    0 6px 26px rgba(3,16,13,.68);
}

.hero #hero-title {
  text-shadow:
    0 2px 4px rgba(3,16,13,.9),
    0 6px 22px rgba(3,16,13,.72),
    0 14px 52px rgba(3,16,13,.55);
}

/* The carousel controls are shapes, not text, so they take the equivalent as a
   filter. The stats row deliberately gets NO box-shadow: a shadow on the block
   reads as a faint panel, which is the thing being removed here. */
.hero-carousel__status { filter: drop-shadow(0 1px 3px rgba(3,16,13,.9)) drop-shadow(0 3px 14px rgba(3,16,13,.7)); }