/* ===== Home: hero ===== */

/* Full-bleed photograph under a navy scrim (see HeroMedia). The section is navy
   tone, so every token inside it (text, buttons, borders) reads light-on-navy. */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(84svh, 780px);
  padding-block: calc(64px + clamp(48px, 7vw, 96px)) clamp(40px, 4vw, 56px);
  overflow: hidden;
  /* Pull up under the sticky header so the photo runs to the top edge. */
  margin-top: -64px;
}

.hero > .container {
  width: 100%;
}

.hero_copy {
  max-width: 40rem;
}

.hero_copy > * {
  animation: hero-in 900ms var(--ease-out) backwards;
}

.hero_copy > :nth-child(2) {
  animation-delay: 80ms;
}
.hero_copy > :nth-child(3) {
  animation-delay: 160ms;
}
.hero_copy > :nth-child(4) {
  animation-delay: 240ms;
}
.hero_copy > :nth-child(5) {
  animation-delay: 320ms;
}

@keyframes hero-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

.hero .eyebrow {
  color: var(--accent-text);
}

.hero_title {
  max-width: 16ch;
  margin-top: var(--space-4);
  font-size: var(--text-display);
  font-weight: 800;
  font-stretch: 108%;
  line-height: 1.04;
}

.hero_lead {
  max-width: 46ch;
  margin-top: var(--space-5);
}

.hero_actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Secondary button on the photo: a clear outline rather than a white slab. */
.hero_actions .btn_secondary {
  background: transparent;
  border-color: rgb(255 255 255 / 0.5);
  color: var(--text);
}

.hero_actions .btn_secondary:hover {
  border-color: var(--text);
  background: rgb(255 255 255 / 0.08);
  color: var(--text);
}

.hero_trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-6);
}

.hero_trust li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--text-secondary);
}

.hero_trust svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--accent-text);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero_foot {
  display: grid;
  gap: var(--space-4) var(--space-8);
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: var(--space-6);
  border-top: 1px solid rgb(255 255 255 / 0.18);
}

@media (min-width: 769px) {
  .hero_foot {
    grid-template-columns: 1.6fr 1fr;
  }
}

.hero_foot p {
  font-size: var(--text-small);
  line-height: 1.7;
  color: var(--text-secondary);
}

/* ===== Home: who we connect ===== */

.persona_grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .persona_grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1025px) {
  .persona_grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Subgrid: name, intro and list rows line up across every card in a row. */
.persona_card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand-navy);
  border-radius: var(--radius);
  box-shadow: var(--shadow-z1);
  transition:
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.persona_card:hover {
  border-top-color: var(--accent);
  box-shadow: var(--shadow-z2);
}

.persona_name {
  align-self: start;
  font-size: 1.125rem;
  line-height: var(--leading-snug);
}

.persona_intro {
  margin-top: var(--space-2);
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--text-secondary);
}

.persona_uses {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.persona_uses li {
  font-weight: 600;
}

/* ===== Home: outcome ===== */

.outcome_list {
  display: grid;
  max-width: var(--prose);
  margin-top: var(--space-6);
}

/* ===== Home: how it works ===== */

/* Photo behind the section; the step cards and documents band stay white on top. */
.mechanism {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* ----- three steps ----- */

.mech_steps {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 1025px) {
  .mech_steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mech_step {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-z1);
}

.mech_text {
  padding: var(--space-6);
}

.mech_num {
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  color: var(--accent-text);
}

.mech_title {
  margin-top: var(--space-2);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}

.mech_body {
  margin-top: var(--space-3);
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--text-secondary);
}

/* ----- documents band ----- */

.mech_docs {
  display: grid;
  gap: var(--space-5) var(--space-8);
  align-items: center;
  margin-top: var(--space-5);
  padding: clamp(24px, 4vw, 40px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
}

@media (min-width: 1025px) {
  .mech_docs {
    grid-template-columns: 1fr 1.4fr;
  }
}

.mech_callout {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  text-wrap: balance;
}

.mech_docs_body {
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--text-secondary);
}

/* ===== Home: platform ===== */

.section_body {
  max-width: var(--prose);
  margin-top: var(--space-4);
  line-height: 1.6;
  color: var(--text-secondary);
}

.module_grid {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

@media (min-width: 769px) {
  .module_grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1267px) {
  .module_grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.module {
  padding: var(--space-6);
  background: var(--surface);
  transition: background-color var(--dur) var(--ease);
}

.module:hover {
  background: var(--accent-subtle);
}

.module_tag {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-text);
}

.module_name {
  margin-top: var(--space-2);
  font-size: var(--text-h3);
}

.module_body {
  margin-top: var(--space-3);
  font-size: var(--text-small);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ===== Home: benefits ===== */

.benefit_cards {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 769px) {
  .benefit_cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.benefit_card {
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.benefit_card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-z2);
}

.benefit_title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text);
}

.benefit_body {
  margin-top: var(--space-3);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ===== Home: strategic value ===== */

.sovereignty {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.pull {
  max-width: 24ch;
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 700;
  font-stretch: 110%;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  text-wrap: balance;
}

@media (min-width: 769px) {
  .pull {
    max-width: 30ch;
  }
}

.sovereignty_lead {
  max-width: 48ch;
  margin-top: var(--space-5);
  color: var(--text-secondary);
}

.assurance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.assurance + .assurance {
  margin-top: var(--space-6);
}

/* A credential label, not a control: icon and text, no button-like border. */
.seal {
  /* A fixed column, so each row's description starts at the same point. */
  flex: 0 0 16rem;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  white-space: nowrap;
}

.seal svg {
  width: 20px;
  height: 20px;
  color: var(--accent-text);
}

.assurance p {
  flex: 1 1 28rem;
  max-width: 62ch;
  font-size: var(--text-small);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ===== Home: call to action ===== */

/* Always navy, whatever section it sits in: the one closing call to action. */
.cta_inner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  background: var(--canvas);
  border-radius: var(--radius-lg);
  gap: var(--space-6);
  padding: clamp(32px, 5vw, 64px);
  align-items: center;
}

@media (min-width: 1025px) {
  .cta_inner {
    grid-template-columns: 1fr auto;
    gap: var(--space-8);
  }
}

.cta_copy {
  max-width: 54ch;
}

.cta_lead {
  margin-top: var(--space-4);
}

.cta_actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}