/* One Aviation Intelligence — website stylesheet
   Typography revised to M2 One_AI_Brand_Manual_V1, section 2.6 Typography.
   Point sizes mapped proportionally at ratio 1.636. Body and Subheading
   raised from 11pt to 12pt, giving 20px. All other levels unchanged.
   Colour values from section 2.5 Colour System.
   Layout, structure and content unchanged.
   Refresh v17, 6 November 2026: navy hero bands, simplified header, stage
   strip, dashboard preview and page sections. See the block at the end. */

:root {
  --navy: #1B2A4A;
  --teal: #347F84;
  --ink: #1D2733;
  --light: #F0F2F5;
  --mid: #E2E8F0;
  --white: #FFFFFF;
  --gold: #B08A2E;
  --muted: #1D2733;
  --tealbg: #F0F2F5;
  --maxw: 1400px;

  /* Type scale, brand manual 2.6, ratio 1.636 px per pt */
  --t-title: 36px;      /* Title, 22pt */
  --t-subtitle: 26px;   /* Cover Subtitle, 16pt */
  --t-chapter: 26px;    /* Chapter Heading, 16pt */
  --t-section: 23px;    /* Section Heading, 14pt */
  --t-sub: 20px;        /* Subheading, 12pt */
  --t-body: 20px;       /* Body Text, 12pt */
  --t-note: 15px;       /* Header, Footer and Notes, 9pt */
  --t-nav: 17px;        /* Site navigation, page furniture, not a manual level */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }

/* ---------- Fixed header band ---------- */

header.site {
  position: sticky;
  top: 0;
  z-index: 300;
  background: var(--white);
  border-bottom: 1px solid var(--mid);
}

.bar {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px 40px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brandlogo { height: 100px; width: auto; display: block; flex-shrink: 0; }
.hdiv { width: 1px; height: 64px; background: var(--mid); flex-shrink: 0; }
.htext { display: flex; flex-direction: column; gap: 4px; }
.htitle { font-size: var(--t-section); font-weight: 700; color: var(--navy); line-height: 1.3; margin: 0; }
.htag { font-size: var(--t-sub); font-style: italic; color: var(--teal); line-height: 1.4; margin: 0; text-align: left; }

nav.site { margin-left: auto; display: flex; align-items: center; }

nav.site a {
  color: var(--muted);
  text-decoration: none;
  font-size: var(--t-nav);
  margin-left: 22px;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

nav.site a:hover { color: var(--navy); }
nav.site a.current { color: var(--navy); font-weight: 700; border-bottom-color: var(--teal); }

/* ---------- Typography ---------- */
/* h1  = Title,           22pt, bold, navy
   h2  = Chapter Heading, 16pt, bold, teal, thin teal rule
   h3  = Subheading,      12pt, bold, navy
   p   = Body Text,       12pt, regular, ink, justified */

h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--t-title);
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy);
  margin: 0 0 18px;
}

h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--t-chapter);
  font-weight: 700;
  line-height: 1.3;
  color: var(--teal);
  margin: 0 0 18px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--teal);
}

h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--t-sub);
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy);
  margin: 0 0 9px;
}

p { margin: 0 0 12px; text-align: justify; hyphens: none; -webkit-hyphens: none; }

/* h2 and h3 justify to the same right edge as body prose.
   h1 stays left aligned: too few words per line to justify without large gaps. */
h1 { text-align: left; }
h2, h3 { text-align: justify; hyphens: none; -webkit-hyphens: none; }

/* Prose runs to the full container width so justified blocks share one right edge */
a { color: var(--teal); }

.lede {
  font-size: var(--t-subtitle);
  line-height: 1.45;
  color: var(--navy);
  text-align: justify;
  hyphens: none;
  -webkit-hyphens: none;
}

.rule { width: 64px; height: 1px; background: var(--teal); border: 0; margin: 0 0 26px; }

.label {
  font-size: var(--t-note);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 12px;
  text-align: left;
}

/* Narrow columns are left aligned. Justification needs a wide measure to
   avoid word gaps, so it is reserved for full width prose. */
.card p, .card li, .navycard p, .note p, .ph p, .valuegrid p,
.stagerow p, .stagerow li, .grid.three p, .grid.four p,
.meta { text-align: left; }

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

section { padding: 56px 0; }
section.tight { padding: 40px 0; }
section.grey { background: var(--light); }
section.navy { background: var(--navy); color: var(--white); }
section.navy h2 { color: var(--white); border-bottom-color: rgba(255,255,255,0.25); }
section.navy h3 { color: var(--white); }
section.navy .label { color: #FFFFFF; }
section.navy a { color: #FFFFFF; }
section.navy .lede { color: var(--white); }
.hero { padding: 64px 0 52px; }


/* ---------- Lists ---------- */
/* Bullet Points, 12pt, teal angle bracket, justified,
   3pt between items, 8pt after the list */

ul.brand { list-style: none; margin: 0 0 12px; padding: 0; font-size: var(--t-body); }
ul.brand li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 5px;
  text-align: justify;
  hyphens: none;
  -webkit-hyphens: none;
 
}
ul.brand li::before { content: ">"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }

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

.grid { display: grid; gap: 18px; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid.four { grid-template-columns: repeat(4, 1fr); }

.card { background: var(--light); border: 1px solid var(--mid); padding: 22px; }
.card h3 { font-size: var(--t-sub); }

/* Card copy is Body Text: 12pt, ink. Brand manual 2.6 and 2.8. */
.card p, .card li, .card .meta {
  font-size: var(--t-body);
  color: var(--ink);
  margin-bottom: 5px;
}
.card p:last-child, .card ul:last-child, .card .meta { margin-bottom: 0; }
.meta { font-size: var(--t-body); color: var(--ink); }
section.grey .card { background: var(--white); }

.note {
  background: var(--tealbg);
  border: 1px solid #E2E8F0;
  border-left: 3px solid var(--teal);
  padding: 18px 24px;
  font-size: var(--t-note);
  color: var(--muted);
}
.note p { margin-bottom: 5px; }
.note p:last-child { margin-bottom: 0; }

/* ---------- Pathway band ---------- */

.pathband {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding: 16px 20px;
  font-size: var(--t-note);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pathway { border: 1px solid var(--mid); border-top: 0; }

.stagerow {
  display: grid;
  grid-template-columns: 118px 1.15fr 1.35fr;
  gap: 26px;
  align-items: start;
  padding: 26px 28px;
  border-bottom: 1px solid var(--mid);
  background: var(--white);
}

.stagerow:last-child { border-bottom: 0; }
.stagerow:nth-child(even) { background: #F0F2F5; }
.stagerow .icon { width: 96px; height: 96px; display: block; }
.stagerow .num {
  font-size: var(--t-note);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 6px;
  text-align: left;
}
.stagerow h3 { font-size: var(--t-sub); margin-bottom: 6px; }
.stagerow .sub { font-size: var(--t-body); color: var(--muted); margin: 0 0 12px; }
.stagerow .dur { font-size: var(--t-note); color: var(--navy); margin: 0; text-align: left; }
.stagerow .dur span { color: var(--muted); }
.stagerow .getlabel {
  font-size: var(--t-note);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 10px;
  text-align: left;
}
.stagerow ul.brand li { font-size: var(--t-body); margin-bottom: 5px; }
.stagerow ul.brand { margin-bottom: 0; }
.stagerow.twocol { grid-template-columns: 118px 1fr; }

/* ---------- Value block ---------- */

.valuehead {
  background: var(--navy);
  color: var(--white);
  padding: 22px 28px;
}
.valuehead p { margin: 0; text-align: left; }
.valuehead .t {
  font-size: var(--t-note);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.valuegrid { display: grid; grid-template-columns: 1fr 1fr; }
.valuegrid div { border: 1px solid var(--mid); border-top: 0; padding: 30px 28px 32px; background: var(--white); text-align: center; }
.valuegrid img { width: 84px; height: 84px; object-fit: contain; display: block; margin: 0 auto 16px; }
.valuegrid div:nth-child(odd) { border-right: 0; }
.valuegrid h3 {
  text-align: center;
  font-size: var(--t-note);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
}
.valuegrid p { margin: 0; font-size: var(--t-body); color: var(--muted); text-align: center; }

/* ---------- Table ---------- */

table.brand { width: 100%; border-collapse: collapse; font-size: var(--t-body); }
table.brand th {
  background: var(--navy);
  color: var(--white);
  text-align: left;
  vertical-align: top;
  font-weight: 700;
  padding: 10px 14px;
  border: 1px solid var(--mid);
}
table.brand td { padding: 10px 14px; border: 1px solid var(--mid); vertical-align: top; background: var(--white); }
table.brand td p { text-align: left; margin-bottom: 5px; }

/* ---------- Call to action ---------- */

.cta {
  display: inline-block;
  background: var(--teal);
  color: var(--white);
  text-decoration: none;
  padding: 13px 26px;
  font-size: var(--t-body);
  font-weight: 700;
}
.cta:hover { background: #1B2A4A; }
/* Single button style site wide: teal rectangle, white text, no variants.
   The navy section inversion and the ghost variant were removed on 30 August 2026. */

.btnrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Navy card ---------- */

.navycard {
  background: var(--navy);
  color: var(--white);
  padding: 26px 28px;
}
.navycard h3 { color: var(--white); font-size: var(--t-sub); }
.navycard p { font-size: var(--t-body); color: #FFFFFF; margin-bottom: 5px; }
.navycard p:last-child { margin-bottom: 0; }

/* ---------- Placeholders ---------- */

.ph {
  border: 1px dashed #E2E8F0;
  background: var(--white);
  padding: 20px 22px;
  color: var(--muted);
  font-size: var(--t-note);
}
.ph p { margin: 0; text-align: left; }
section.grey .ph { background: var(--light); }

.phinline { color: #1D2733; font-size: var(--t-note); font-style: italic; text-align: left; }

/* ---------- Form ---------- */

form.enquiry { max-width: 34em; }
form.enquiry label {
  display: block;
  font-size: var(--t-body);
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 6px;
}
form.enquiry input, form.enquiry textarea {
  width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: var(--t-body); color: var(--ink);
  padding: 10px 12px; border: 1px solid var(--mid); background: var(--white); margin-bottom: 16px;
}
form.enquiry textarea { min-height: 140px; resize: vertical; }
form.enquiry input:focus, form.enquiry textarea:focus { outline: 2px solid var(--teal); outline-offset: -2px; }
button.cta { border: 0; cursor: pointer; font-family: Arial, Helvetica, sans-serif; }

/* ---------- Contact table ---------- */

table.contact { width: 100%; border-collapse: collapse; font-size: var(--t-body); }
table.contact th {
  text-align: left; vertical-align: top; font-weight: 700; color: var(--navy);
  width: 120px; padding: 10px 0; border-bottom: 1px solid var(--mid);
}
table.contact td { padding: 10px 0; border-bottom: 1px solid var(--mid); vertical-align: top; }
table.contact td p { text-align: left; margin-bottom: 5px; }
table.contact tr:last-child th, table.contact tr:last-child td { border-bottom: 0; }

/* ---------- Footer ---------- */
/* Header, Footer and Notes, 9pt regular ink */

footer.site { background: var(--navy); color: var(--white); padding: 18px 0; font-size: var(--t-note); line-height: 1.55; }
footer.site img { height: 30px; width: auto; display: block; margin-bottom: 10px; }
footer.site a { color: #FFFFFF; }
footer.site .cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; }
footer.site .frow { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 36px; }
footer.site .fbrand { display: flex; align-items: center; gap: 12px; }
footer.site .fbrand img { margin-bottom: 0; }
footer.site p { margin: 0; text-align: left; }
footer.site .fine { margin-top: 14px; color: #1D2733; font-size: var(--t-note); }

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .htext, .hdiv { display: none; }
}

@media (max-width: 860px) {
  :root {
    --t-title: 28px;
    --t-subtitle: 20px;
    --t-chapter: 22px;
    --t-section: 20px;
    --t-sub: 18px;
    --t-body: 18px;
    --t-note: 14px;
    --t-nav: 15px;
  }
  .brandlogo { height: 62px; }
  .bar { padding: 12px 20px; flex-wrap: wrap; gap: 12px; }
  nav.site { margin-left: auto; flex-wrap: wrap; }
  nav.site a { margin-left: 18px; }
  .grid.two, .grid.three, .grid.four, footer.site .cols, .valuegrid { grid-template-columns: 1fr; }

  .valuegrid div:nth-child(odd) { border-right: 1px solid var(--mid); }
  .valuegrid img { width: 72px; height: 72px; }
  .stagerow { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; }
  .stagerow.twocol { grid-template-columns: 1fr; }
  .stagerow .icon { width: 72px; height: 72px; }
  .hero { padding: 40px 0 32px; }
  section { padding: 40px 0; }
  /* Mobile guard: columns are too narrow to justify without large word gaps */
  p, ul.brand li, .lede, h2, h3 { text-align: left; }
  table.contact th { width: 96px; }
}

/* ---------- Home stage flow ---------- */
/* Horizontal three step process used on Home only. The detailed stage rows
   on What We Do continue to use .pathway and .stagerow. */

.flow {
  border: 1px solid var(--mid);
  border-top: 0;
  background: var(--white);
  display: grid;
  grid-template-columns: 1fr 72px 1fr 72px 1fr;
  align-items: start;
  padding: 40px 28px 34px;
}

.flow .step { text-align: center; padding: 0 10px; }

.flow .disc {
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flow .disc img { width: 96px; height: 96px; display: block; object-fit: contain; }

.flow .num {
  font-size: var(--t-note);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 6px;
  text-align: center;
}

.flow h3 { font-size: var(--t-sub); margin: 0 0 8px; text-align: center; }
.flow .sub { font-size: var(--t-body); color: var(--muted); margin: 0; text-align: center; }

/* Connector between steps, sits level with the centre of the disc */
.flow .link {
  position: relative;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow .link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--mid);
}
.flow .link::after {
  content: "";
  position: relative;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--teal);
  border-right: 2px solid var(--teal);
  transform: rotate(45deg);
  background: var(--white);
}

@media (max-width: 860px) {
  .flow {
    grid-template-columns: 1fr;
    padding: 30px 20px 26px;
  }
  .flow .link {
    height: 34px;
  }
  .flow .link::before {
    left: 50%;
    right: auto;
    top: 0;
    bottom: 0;
    height: auto;
    width: 1px;
  }
  .flow .link::after {
    transform: rotate(135deg);
  }
  .flow .disc { width: 76px; height: 76px; margin-bottom: 14px; }
  .flow .disc img { width: 76px; height: 76px; }
}

/* ---------- Closing call to action band ---------- */
/* Light teal, so it does not merge into the navy footer directly beneath it. */

/* One light tone across the whole site, alternating strictly with white.
   Where a grey section already sits above it, the closing band takes white
   and a hairline, so two tinted bands never touch. */

section.closeband { background: var(--light); }
section.grey + section.closeband {
  background: var(--white);
  border-top: 1px solid var(--mid);
}

/* ---------- How We Work ---------- */
/* Same disc language as the Home stage flow, without numbering or connectors,
   because these are attributes rather than a sequence. */

.works {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  margin-top: 30px;
}

.works .item { text-align: center; }

.works .disc {
  width: 96px;
  height: 96px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.works .disc img { width: 96px; height: 96px; display: block; object-fit: contain; }

.works p {
  font-size: var(--t-body);
  color: var(--navy);
  text-align: center;
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 860px) {
  .works { grid-template-columns: 1fr 1fr; gap: 22px; }
  .works .disc { width: 76px; height: 76px; margin-bottom: 12px; }
  .works .disc img { width: 76px; height: 76px; }
}

@media (max-width: 520px) {
  .works { grid-template-columns: 1fr; }
}

/* ---------- Stage columns, What We Do ---------- */
/* Three columns so the stages can be compared, under the same navy band
   used by the Home stage flow. Durations only, no fees. */

.stagecols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--mid);
  border-top: 0;
  background: var(--white);
}

.stagecols .col {
  padding: 32px 30px 34px;
  border-right: 1px solid var(--mid);
}

.stagecols .col:last-child { border-right: 0; }

.stagecols .colhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.stagecols .snum {
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  color: var(--teal);
  margin: 0;
  text-align: left;
}

.stagecols .icon {
  width: 62px;
  height: 62px;
  object-fit: contain;
  display: block;
}

.stagecols h3 {
  font-size: var(--t-sub);
  margin: 0 0 10px;
  min-height: 2.6em;
}

.stagecols .sub {
  font-size: var(--t-body);
  color: var(--muted);
  text-align: left;
  margin: 0 0 22px;
  min-height: 4.4em;
}

.stagecols .dur {
  font-size: var(--t-note);
  font-weight: 700;
  color: var(--navy);
  text-align: left;
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--mid);
  border-bottom: 1px solid var(--mid);
}

.stagecols .getlabel {
  font-size: var(--t-note);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 20px 0 12px;
  text-align: left;
}

ul.ticks { list-style: none; margin: 0; padding: 0; }

ul.ticks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 9px;
  font-size: var(--t-body);
  color: var(--ink);
  text-align: left;
  line-height: 1.4;
}

ul.ticks li:last-child { margin-bottom: 0; }

ul.ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.42em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}

@media (max-width: 860px) {
  .stagecols { grid-template-columns: 1fr; }
  .stagecols .col {
    border-right: 0;
    border-bottom: 1px solid var(--mid);
    padding: 26px 22px 28px;
  }
  .stagecols .col:last-child { border-bottom: 0; }
  .stagecols h3, .stagecols .sub { min-height: 0; }
  .stagecols .icon { width: 54px; height: 54px; }
}

/* ---------- Operator segments, Who We Help ---------- */

.segments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--mid);
  background: var(--white);
}

.segments .seg {
  padding: 28px 28px 30px;
  border-right: 1px solid var(--mid);
}

.segments .seg:last-child { border-right: 0; }
.segments h3 { font-size: var(--t-sub); margin: 0 0 10px; min-height: 2.6em; }
.segments p { font-size: var(--t-body); color: var(--muted); text-align: left; margin: 0; }

.scope {
  font-size: var(--t-note);
  color: var(--muted);
  text-align: left;
  margin: 16px 0 0;
}

/* ---------- Self check list ---------- */

ul.checks { list-style: none; margin: 0; padding: 0; }

ul.checks li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 14px;
  font-size: var(--t-body);
  color: var(--navy);
  text-align: left;
  line-height: 1.4;
}

ul.checks li:last-child { margin-bottom: 0; }

ul.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 18px;
  height: 18px;
  border: 2px solid var(--teal);
  background: var(--white);
}

@media (max-width: 860px) {
  .segments { grid-template-columns: 1fr; }
  .segments .seg {
    border-right: 0;
    border-bottom: 1px solid var(--mid);
    padding: 24px 22px 26px;
  }
  .segments .seg:last-child { border-bottom: 0; }
  .segments h3 { min-height: 0; }
}

/* Two column variant of the segment container, used on About */
.segments.two { grid-template-columns: 1.35fr 1fr; }
.segments.two h3 { min-height: 0; margin-bottom: 14px; }
.segments.two p { color: var(--ink); margin-bottom: 12px; }
.segments.two ul.brand { margin-bottom: 0; }


/* ==========================================================================
   Refresh v17, 6 November 2026
   Navy hero bands with two tone headlines, logo and navigation only in the
   header, and the section layouts used by the refreshed pages. Arial and the
   M2 Colour System throughout. --tealtint is the 60 percent lighter tint of
   logo teal, permitted under M2 Word Theme, used only on navy for contrast.
   ========================================================================== */

:root { --tealtint: #ADCBCE; }

/* ---------- Header ---------- */
.bar { padding: 14px 40px; }
.brandlogo { height: 88px; }
nav.site a { margin-left: 28px; }

/* ---------- Shared ---------- */
.eyebrow {
  font-size: var(--t-note);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 14px;
  text-align: left;
}
.left, .left p { text-align: left; }
.textlink {
  color: var(--white);
  font-weight: 700;
  font-size: var(--t-note);
  text-decoration: none;
  border-bottom: 1px solid var(--tealtint);
  padding-bottom: 2px;
}
.textlink:hover { color: var(--tealtint); }
a.more { font-size: var(--t-note); font-weight: 700; text-decoration: none; color: var(--teal); white-space: nowrap; }
a.more:hover { color: var(--navy); }

/* Section heading with a short note on the right and one hairline below */
.sechead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--mid);
  padding-bottom: 12px;
  margin-bottom: 30px;
}
.sechead h2 { border: 0; padding: 0; margin: 0; text-align: left; }
.sechead .note2 { font-size: var(--t-note); color: var(--ink); margin: 0; text-align: right; white-space: nowrap; }

/* ---------- Navy hero ---------- */
section.hero.navyhero {
  background: var(--navy);
  color: var(--white);
  padding: 60px 0 58px;
}
.navyhero .eyebrow { color: var(--tealtint); }
.navyhero h1 {
  color: var(--white);
  font-size: 50px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
}
.navyhero h1 .accent { display: block; color: var(--tealtint); }
.navyhero .lede {
  color: var(--white);
  font-size: var(--t-sub);
  line-height: 1.55;
  text-align: left;
  max-width: 38em;
  margin: 0;
}
.navyhero .btnrow { margin-top: 32px; gap: 28px; }
.navyhero .cta:hover { background: var(--white); color: var(--navy); }

.herogrid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start; }
.herogrid figure.dash { justify-self: end; }
.herogrid figure.dash img { max-width: 100%; }

figure.dash { margin: 0; }
figure.dash img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--white);
  border: 1px solid var(--mid);
}
.navyhero figure.dash img { border: 6px solid var(--white); box-shadow: 0 18px 40px rgba(0,0,0,0.28); }
figure.dash figcaption {
  font-size: 13px;
  color: var(--ink);
  margin-top: 10px;
  text-align: right;
}
.navyhero figure.dash figcaption { color: var(--tealtint); }

/* ---------- Statement and founder strip, Home ---------- */
section.statement { padding: 44px 0 40px; }
.statement p {
  font-size: var(--t-subtitle);
  line-height: 1.45;
  color: var(--navy);
  text-align: left;
  max-width: 40em;
  margin: 0;
}
section.strip { background: var(--light); padding: 18px 0; }
.strip .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.strip p { margin: 0; font-size: var(--t-body); color: var(--ink); text-align: left; }
.strip a.more { font-size: var(--t-body); }
.strip strong { color: var(--navy); }

/* ---------- Stage strip, Home ---------- */
.stagestrip {
  display: grid;
  grid-template-columns: 1fr 64px 1fr 64px 1fr;
  align-items: start;
}
.stagestrip .st { text-align: center; padding: 0 8px 22px; }
.stagestrip .st.first { border-bottom: 2px solid var(--teal); }
.stagestrip img { width: 92px; height: 92px; object-fit: contain; display: block; margin: 0 auto 18px; }
.stagestrip .num {
  font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--teal); margin: 0 0 8px; text-align: center;
}
.stagestrip h3 { text-align: center; margin: 0 0 8px; }
.stagestrip .sub { font-size: var(--t-note); color: var(--ink); text-align: center; margin: 0; }
.stagestrip .arrow { color: var(--teal); font-size: 30px; text-align: center; padding-top: 34px; }
.stagenote { font-size: var(--t-note); color: var(--ink); margin: 18px 0 0; text-align: left; }

/* ---------- How We Work, refreshed ---------- */
.works { margin-top: 0; }
.works p { font-size: var(--t-note); color: var(--ink); line-height: 1.5; }
.works .disc, .works .disc img { width: 72px; height: 72px; }

/* ---------- Closing band, refreshed ---------- */
section.closeband .wrap.split { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
section.closeband h2 { color: var(--navy); border: 0; padding: 0; margin: 0 0 8px; text-align: left; }
section.closeband .split p { margin: 0; text-align: left; }
section.closeband .split .lede { font-size: var(--t-sub); color: var(--ink); }

/* ---------- Stage 1 block, What We Do ---------- */
.s1grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.s1head { display: flex; align-items: center; gap: 22px; margin-bottom: 20px; }
.s1head img { width: 84px; height: 84px; object-fit: contain; }
.s1head .eyebrow { margin: 0; }
.s1grid h2.big { font-size: 32px; border: 0; padding: 0; text-align: left; margin: 0 0 16px; }
.s1grid .desc { text-align: left; }
.facts { display: flex; flex-wrap: wrap; gap: 0; margin: 18px 0 26px; padding: 0; list-style: none; }
.facts li { font-size: var(--t-note); color: var(--teal); font-weight: 700; padding: 0 16px; border-left: 1px solid var(--mid); }
.facts li:first-child { padding-left: 0; border-left: 0; }

ol.receive { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mid); }
ol.receive li {
  display: grid; grid-template-columns: 46px 1fr; gap: 6px;
  padding: 16px 0; border-bottom: 1px solid var(--mid);
}
ol.receive .n { font-size: var(--t-note); color: var(--teal); font-weight: 700; padding-top: 3px; }
ol.receive h3 { margin: 0 0 4px; text-align: left; }
ol.receive p { margin: 0; font-size: var(--t-note); text-align: left; }

details.finding { margin-top: 34px; border-top: 1px solid var(--mid); border-bottom: 1px solid var(--mid); }
details.finding summary {
  cursor: pointer; padding: 16px 0; font-size: var(--t-note); font-weight: 700; color: var(--teal);
  list-style: none;
}
details.finding summary::-webkit-details-marker { display: none; }
details.finding summary::before { content: "+"; display: inline-block; width: 22px; font-weight: 700; }
details.finding[open] summary::before { content: "\2212"; }
details.finding .body {
  background: var(--light); border-left: 3px solid var(--teal);
  padding: 18px 24px; margin: 0 0 18px;
}
details.finding .body p { margin: 0 0 8px; text-align: left; }
details.finding .body p:last-child { margin: 0; }
details.finding .tag { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); }

/* ---------- Stages 2 and 3, What We Do ---------- */
.followon { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.followon .fo { display: grid; grid-template-columns: 84px 1fr; gap: 22px; align-items: start; }
.followon img { width: 76px; height: 76px; object-fit: contain; }
.followon .eyebrow { margin-bottom: 8px; }
.followon h3 { font-size: var(--t-section); text-align: left; margin: 0 0 8px; }
.followon .sub { font-size: var(--t-body); text-align: left; margin: 0 0 16px; }

/* ---------- Dashboard lead, What We Do ---------- */
.leadgrid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
.leadgrid h2 { color: var(--navy); border: 0; padding: 0; text-align: left; margin: 0 0 12px; }
.leadgrid p { text-align: left; }

/* Stage 1 starting point, under the stage table */
.s1start { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 34px; }
.s1start p { margin: 0; text-align: left; }
@media (max-width: 860px) { .s1start { flex-direction: column; align-items: flex-start; gap: 16px; } }

/* Stage 3 in practice: five panel view beside the alert email */
.practice { display: grid; grid-template-columns: 1.7fr 1fr; gap: 40px; align-items: start; }
.practiceside p { text-align: left; }
.practiceside figure.dash { margin: 6px 0 26px; }
.practiceside p:first-child { margin-top: 0; }
picture { display: block; }

/* ---------- Who We Help ---------- */
ul.checks.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 56px; margin-top: 8px; }
ul.checks.two li { margin-bottom: 0; }
.intro2 { text-align: left; margin-bottom: 24px; }
.context h3 { font-size: var(--t-section); text-align: left; margin: 26px 0 6px; padding-top: 24px; border-top: 1px solid var(--mid); }
.context p { text-align: left; }

/* Who We Help, decluttered */
h2.plainhead { border: 0; padding: 0; margin: 0 0 10px; text-align: left; }
.grey .intro2 { color: var(--ink); margin-bottom: 26px; }
ul.ticks.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 56px; }
ul.ticks.two li { margin-bottom: 0; color: var(--navy); }
.contextgrid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: start; }
.contextgrid .leadline { font-weight: 700; color: var(--navy); font-size: var(--t-sub); margin: 4px 0 8px; text-align: left; }
.contextgrid p { text-align: left; margin-top: 0; }
@media (max-width: 860px) { ul.ticks.two, .contextgrid { grid-template-columns: 1fr; gap: 14px; } }

/* Section headings without rules, used on every page */
h2.plainhead + .intro2 { margin-top: 0; }
h2.plainhead { margin-bottom: 14px; }
.intro2 + .stagestrip, .intro2 + .works { margin-top: 30px; }
h2.plainhead + .practice, h2.plainhead + .expertise { margin-top: 30px; }
.stagecols h3 { text-align: left; }
.tiles .big { font-weight: 700; }

/* ---------- About ---------- */
.aboutgrid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; align-items: start; }
.aboutgrid h2 { border: 0; padding: 0; text-align: left; }
.aboutgrid p { text-align: left; }
.tiles { display: grid; gap: 18px; }
.tiles .tile2 { border-top: 2px solid var(--teal); background: var(--light); padding: 20px 24px; }
.tiles .big { font-size: 34px; color: var(--teal); line-height: 1.1; margin: 0 0 8px; text-align: left; }
.tiles .what { font-size: var(--t-note); margin: 0; text-align: left; }
.whygrid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: start; }
.whygrid h2 { border: 0; padding: 0; text-align: left; line-height: 1.25; }
.whygrid h2 span { display: block; }
.whygrid p { text-align: left; }
.expertise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.expertise h3 { text-align: left; margin-bottom: 14px; }
.expertise ul.brand li { font-size: var(--t-note); text-align: left; margin-bottom: 10px; }

/* ---------- Footer, refreshed ---------- */
footer.site .frow { justify-content: space-between; }

/* ---------- Responsive, refreshed ---------- */
@media (max-width: 1100px) {
  .navyhero h1 { font-size: 42px; }
  .herogrid, .s1grid, .leadgrid, .aboutgrid, .whygrid, .practice { grid-template-columns: 1fr; gap: 36px; }
  .herogrid figure.dash { justify-self: stretch; }
  .followon { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 860px) {
  .bar { padding: 10px 20px; }
  .brandlogo { height: 60px; }
  nav.site a { margin-left: 16px; }
  .navyhero h1 { font-size: 32px; }
  section.hero.navyhero { padding: 40px 0 42px; }
  .sechead { flex-direction: column; gap: 6px; align-items: flex-start; }
  .sechead .note2 { text-align: left; white-space: normal; }
  .stagestrip { grid-template-columns: 1fr; }
  .stagestrip .arrow { padding: 0 0 14px; transform: rotate(90deg); }
  .stagestrip .st { padding-bottom: 14px; }
  .strip .wrap, section.closeband .wrap.split { flex-direction: column; align-items: flex-start; }
  ul.checks.two, .expertise { grid-template-columns: 1fr; gap: 14px; }
  .expertise { gap: 26px; }
  .followon .fo { grid-template-columns: 60px 1fr; gap: 16px; }
  .followon img { width: 56px; height: 56px; }
  footer.site .frow { flex-direction: column; align-items: flex-start; }
}

/* ---------- Mobile navigation fit ---------- */
@media (max-width: 860px) { nav.site a:first-child { margin-left: 0; } }
@media (max-width: 380px) { nav.site a { margin-left: 14px; } nav.site a:first-child { margin-left: 0; } }
@media (max-width: 340px) { nav.site a { margin-left: 10px; font-size: 14px; } nav.site a:first-child { margin-left: 0; } }

/* ---------- Stage duration calendar icon ---------- */
.stagecols .dur { display: flex; align-items: center; gap: 8px; }
.stagecols .dur { font-size: var(--t-body); font-weight: 400; gap: 10px; }
.stagecols .dur .calicon { width: 1.1em; height: 1.1em; flex-shrink: 0; }

/* ---------- Logo Only mark on small screens (M2 2.4) ---------- */
@media (max-width: 860px) { .brandlogo { height: 44px; } }