:root {
  --ink: #10212b;
  --ink-soft: #273b43;
  --navy: #102c3d;
  --navy-deep: #091c29;
  --ivory: #f4efe5;
  --paper: #fbf8f1;
  --white: #fffdf8;
  --teal: #3f7f78;
  --teal-deep: #255e5b;
  --sea-glass: #b8d4ca;
  --sea-pale: #deebe5;
  --amber: #dfa65e;
  --amber-soft: #f0c98e;
  --line: rgba(16, 33, 43, .15);
  --line-light: rgba(255, 253, 248, .15);
  --shadow: 0 28px 70px rgba(9, 28, 41, .13);
  --sans: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: Iowan Old Style, Baskerville, "Times New Roman", Georgia, serif;
  --shell: 1240px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 108px;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }

button, a { -webkit-tap-highlight-color: transparent; }

a { color: inherit; text-decoration: none; }

button { font: inherit; }

svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.shell {
  width: min(var(--shell), calc(100% - 72px));
  margin-inline: auto;
}

.section { padding-block: 128px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  z-index: 200;
  top: 12px;
  left: 12px;
  transform: translateY(-160%);
  padding: 10px 14px;
  border-radius: 4px;
  background: var(--white);
  color: var(--navy-deep);
  box-shadow: var(--shadow);
  font-size: 13px;
  font-weight: 700;
}

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

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

.review-banner {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 7px 20px;
  background: var(--navy-deep);
  color: rgba(255, 253, 248, .75);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.review-banner strong { color: var(--white); font-weight: 750; }

.review-banner__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(223, 166, 94, .14);
}

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  background: rgba(251, 248, 241, .92);
  border-bottom: 1px solid rgba(16, 33, 43, .10);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  transition: box-shadow .2s ease;
}

.site-header--scrolled { box-shadow: 0 10px 28px rgba(9, 28, 41, .08); }

.header-inner {
  min-height: 84px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 36px;
}

.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.brand-mark {
  width: 75px;
  height: 34px;
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  flex: 0 0 auto;
  border: 1px solid var(--navy);
}

.brand-mark span {
  display: grid;
  place-items: center;
  border-right: 1px solid var(--navy);
  color: var(--navy);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
}

.brand-mark span:last-child { border-right: 0; }

.brand-name {
  overflow: hidden;
  max-width: 190px;
  color: var(--navy-deep);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .105em;
  line-height: 1.35;
  text-transform: uppercase;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 29px;
}

.desktop-nav a {
  position: relative;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 580;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 1px;
  background: var(--teal-deep);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .24s ease;
}

.desktop-nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  padding: 12px 19px;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .055em;
  transition: transform .22s ease, background-color .22s ease, border-color .22s ease, color .22s ease;
}

.button:hover { transform: translateY(-2px); }

.button--login {
  min-height: 42px;
  padding: 10px 16px;
  border-color: var(--navy);
  background: transparent;
  color: var(--navy);
}

.button--login:hover { background: var(--navy); color: var(--white); }

.button--login svg { width: 18px; height: 18px; }

.login-short { display: none; }

.button--primary {
  min-height: 54px;
  padding-inline: 23px;
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 13px 28px rgba(16, 44, 61, .14);
}

.button--primary:hover { background: var(--teal-deep); }

.button--amber {
  min-height: 54px;
  background: var(--amber);
  color: var(--navy-deep);
}

.button--amber:hover { background: var(--amber-soft); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  border: 0;
  border-bottom: 1px solid rgba(16, 33, 43, .4);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .055em;
  line-height: 2;
}

.text-link span { transition: transform .2s ease; }
.text-link:hover span { transform: translateX(3px); }
.text-link--light { border-bottom-color: rgba(255, 253, 248, .4); color: var(--white); }

.menu-toggle {
  width: 43px;
  height: 42px;
  display: none;
  place-items: center;
  border: 1px solid var(--navy);
  border-radius: 2px;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
}

.menu-toggle > span:not(.sr-only) {
  position: absolute;
  width: 17px;
  height: 1px;
  background: currentColor;
  transition: transform .2s ease;
}

.menu-toggle > span:last-child { transform: translateY(5px); }
.menu-toggle[aria-expanded="true"] > span:nth-of-type(2) { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] > span:last-child { transform: rotate(-45deg); }

.mobile-nav {
  position: absolute;
  right: 0;
  left: 0;
  top: 100%;
  overflow: auto;
  max-height: calc(100vh - 84px);
  background: var(--ivory);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
  overscroll-behavior: contain;
}

.mobile-nav__inner { padding-block: 15px 24px; }

.mobile-nav a,
.mobile-nav button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--navy-deep);
  cursor: pointer;
  font-family: var(--serif);
  font-size: 24px;
  text-align: left;
}

.mobile-nav a span,
.mobile-nav button span {
  color: var(--teal-deep);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
}

.hero {
  position: relative;
  overflow: hidden;
  padding-block: 104px 31px;
  background:
    linear-gradient(rgba(63, 127, 120, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 127, 120, .04) 1px, transparent 1px),
    var(--ivory);
  background-size: 44px 44px;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 42%;
  height: 1px;
  background: var(--amber);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: 68px;
}

.eyebrow,
.section-index,
.micro-label {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .165em;
  line-height: 1.45;
  text-transform: uppercase;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--teal-deep);
}

.eyebrow > span {
  width: 28px;
  height: 1px;
  background: currentColor;
}

.hero h1 {
  max-width: 690px;
  margin: 25px 0 26px;
  font-family: var(--serif);
  font-size: clamp(60px, 5.15vw, 76px);
  font-weight: 400;
  letter-spacing: -.046em;
  line-height: .99;
}

em { color: var(--teal-deep); font-weight: 400; }

.hero-lead {
  max-width: 620px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.67;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 35px;
}

.hero-note {
  max-width: 550px;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: start;
  gap: 14px;
  margin-top: 55px;
}

.hero-note__rule { height: 1px; margin-top: 13px; background: var(--amber); }

.hero-note p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }
.hero-note strong { color: var(--ink); }

.hero-visual {
  position: relative;
  min-height: 630px;
  display: grid;
  place-items: center;
}

.hero-visual::before {
  content: "";
  position: absolute;
  width: 490px;
  height: 490px;
  border-radius: 50%;
  background: rgba(184, 212, 202, .31);
}

.orbit {
  position: absolute;
  border: 1px solid rgba(63, 127, 120, .22);
  border-radius: 50%;
}

.orbit--one { width: 575px; height: 575px; }
.orbit--two { width: 420px; height: 420px; border-style: dashed; }

.orbit::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
}

.system-card {
  position: relative;
  z-index: 2;
  width: min(510px, 92%);
  overflow: hidden;
  border: 1px solid rgba(16, 44, 61, .17);
  background: rgba(255, 253, 248, .94);
  box-shadow: 0 35px 80px rgba(9, 28, 41, .17);
}

.system-card__head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 27px 22px;
  border-bottom: 1px solid var(--line);
}

.system-card__head .micro-label { color: var(--teal-deep); }

.system-card__head h2 {
  margin: 6px 0 0;
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.live-pill {
  height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 0 9px;
  border: 1px solid rgba(63, 127, 120, .25);
  background: var(--sea-pale);
  color: var(--teal-deep);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .06em;
}

.live-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}

.system-flow { padding: 10px 27px; }

.flow-row {
  min-height: 86px;
  display: grid;
  grid-template-columns: 38px 1fr 30px;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
}

.flow-row:last-child { border-bottom: 0; }

.flow-number {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(16, 44, 61, .2);
  border-radius: 50%;
  color: var(--teal-deep);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
}

.flow-row div { display: flex; flex-direction: column; gap: 2px; }
.flow-row small { color: #68777d; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.flow-row strong { font-family: var(--serif); font-size: 18px; font-weight: 400; }
.flow-row svg { width: 22px; color: var(--teal-deep); }

.system-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 27px;
  background: var(--navy);
  color: var(--white);
}

.signal-line { display: flex; align-items: end; gap: 3px; height: 18px; }
.signal-line i { width: 3px; border-radius: 2px; background: var(--sea-glass); }
.signal-line i:nth-child(1), .signal-line i:nth-child(7) { height: 5px; }
.signal-line i:nth-child(2), .signal-line i:nth-child(6) { height: 10px; }
.signal-line i:nth-child(3), .signal-line i:nth-child(5) { height: 15px; }
.signal-line i:nth-child(4) { height: 18px; background: var(--amber); }
.context-chips { display: flex; align-items: center; gap: 8px; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.context-chips span { padding: 6px 8px; border: 1px solid var(--line-light); }
.context-chips b { color: var(--amber); font-weight: 400; }

.campaign-card {
  position: absolute;
  z-index: 3;
  right: -9px;
  bottom: 30px;
  width: 260px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid rgba(16, 44, 61, .15);
  background: var(--white);
  box-shadow: 0 20px 50px rgba(9, 28, 41, .18);
}

.campaign-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--amber);
  color: var(--navy-deep);
}

.campaign-icon svg { width: 25px; }
.campaign-card div:last-child { display: flex; flex-direction: column; }
.campaign-card small { color: #68777d; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.campaign-card strong { font-size: 11px; line-height: 1.45; }

.hero-bottom-line {
  display: flex;
  justify-content: space-between;
  margin-top: 76px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: rgba(16, 33, 43, .52);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2em;
}

.editorial-intro { background: var(--paper); }

.intro-grid {
  display: grid;
  grid-template-columns: .55fr 1.2fr .8fr;
  align-items: start;
  gap: 60px;
}

.section-index { padding-top: 10px; color: var(--teal-deep); }
.kicker { margin: 0 0 19px; color: var(--ink-soft); font-size: 13px; }

.intro-grid h2,
.section-heading h2,
.how-heading h2,
.principles h2,
.cta h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.08;
}

.intro-copy {
  margin: 41px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.8;
}

.services {
  background: var(--ivory);
  border-top: 1px solid rgba(16, 33, 43, .08);
}

.services-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: start;
  gap: 68px;
}

.section-heading { position: sticky; top: 120px; }
.section-heading h2 { margin-top: 27px; font-size: 47px; }
.section-heading > p:not(.section-index) { margin: 22px 0 28px; color: var(--ink-soft); font-size: 14px; line-height: 1.75; }

.service-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.service-card {
  min-height: 392px;
  display: flex;
  flex-direction: column;
  padding: 31px;
  border: 1px solid rgba(16, 33, 43, .12);
  background: var(--white);
  box-shadow: 0 14px 35px rgba(9, 28, 41, .05);
}

.service-card:last-child { grid-column: 1 / -1; min-height: 330px; }

.service-card--teal {
  background: var(--teal-deep);
  color: var(--white);
}

.service-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.service-number { color: var(--teal-deep); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.service-card--teal .service-number { color: var(--sea-glass); }

.service-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--teal-deep);
}

.service-card--teal .service-icon { border-color: var(--line-light); color: var(--amber-soft); }
.service-icon svg { width: 26px; height: 26px; }

.service-card h3 {
  margin: 45px 0 14px;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.1;
}

.service-card > p { max-width: 390px; margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.service-card--teal > p { color: rgba(255, 253, 248, .74); }

.service-card ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: auto 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.service-card:last-child ul { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.service-card--teal ul { border-top-color: var(--line-light); }

.service-card li {
  position: relative;
  padding-left: 17px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 620;
  line-height: 1.55;
}

.service-card--teal li { color: var(--white); }

.service-card li::before {
  content: "";
  position: absolute;
  top: .65em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber);
}

.operating-band {
  overflow: hidden;
  padding-block: 82px;
  background: var(--navy);
  color: var(--white);
}

.band-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 45px; }
.band-head p { margin: 0; font-family: var(--serif); font-size: 29px; }
.eyebrow--light { color: var(--sea-glass); }

.operating-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-light);
  list-style: none;
}

.operating-steps li {
  position: relative;
  min-height: 176px;
  display: flex;
  flex-direction: column;
  padding: 27px 26px;
  border-right: 1px solid var(--line-light);
}

.operating-steps li:last-child { border-right: 0; }
.operating-steps li::before { content: ""; position: absolute; top: -2px; left: 0; width: 30%; height: 3px; background: var(--amber); }
.operating-steps span { margin-bottom: auto; color: var(--sea-glass); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.operating-steps strong { font-family: var(--serif); font-size: 24px; font-weight: 400; }
.operating-steps small { margin-top: 4px; color: rgba(255, 253, 248, .62); font-size: 11px; }

.harbor {
  position: relative;
  overflow: hidden;
  padding-block: 145px 118px;
  background: var(--navy-deep);
  color: var(--white);
}

.harbor-texture {
  position: absolute;
  inset: 0;
  opacity: .6;
  background:
    radial-gradient(circle at 78% 15%, rgba(63, 127, 120, .18), transparent 30%),
    linear-gradient(rgba(184, 212, 202, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184, 212, 202, .028) 1px, transparent 1px);
  background-size: auto, 54px 54px, 54px 54px;
}

.harbor-shell { position: relative; }
.section-index--dark { padding: 0 0 23px; border-bottom: 1px solid var(--line-light); color: var(--sea-glass); }

.harbor-title-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 30px;
  margin-top: 43px;
}

.eyebrow--amber { margin-bottom: 23px; color: var(--amber-soft); }

.harbor h2 {
  max-width: 850px;
  margin: 0;
  font-family: var(--serif);
  font-size: 71px;
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .98;
}

.harbor h2 em { color: var(--sea-glass); }

.harbor-mark {
  position: relative;
  width: 105px;
  height: 105px;
  display: grid;
  place-items: center;
}

.harbor-mark__ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(184, 212, 202, .4);
  border-radius: 50%;
}

.harbor-mark__ring::before,
.harbor-mark__ring::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(184, 212, 202, .19);
  border-radius: 50%;
}

.harbor-mark__ring::before { inset: 10px; }
.harbor-mark__ring::after { inset: -9px; border-style: dashed; }
.harbor-mark__core { color: var(--amber-soft); font-family: var(--serif); font-size: 37px; }

.harbor-intro {
  max-width: 700px;
  margin: 31px 0 0;
  color: rgba(255, 253, 248, .72);
  font-size: 17px;
  line-height: 1.75;
}

.harbor-story {
  display: grid;
  grid-template-columns: 1.55fr .75fr;
  align-items: stretch;
  gap: 18px;
  margin-top: 69px;
}

.day-panel {
  border: 1px solid var(--line-light);
  background: rgba(255, 253, 248, .035);
}

.day-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 0 28px;
  border-bottom: 1px solid var(--line-light);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.voice-chip { display: flex; align-items: center; gap: 3px; color: var(--sea-glass); }
.voice-chip i { width: 2px; border-radius: 3px; background: currentColor; }
.voice-chip i:nth-child(1), .voice-chip i:nth-child(5) { height: 5px; }
.voice-chip i:nth-child(2), .voice-chip i:nth-child(4) { height: 10px; }
.voice-chip i:nth-child(3) { height: 15px; background: var(--amber); }

.day-timeline { padding: 12px 28px 24px; }

.day-timeline article {
  position: relative;
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 25px;
  padding: 25px 0;
  border-bottom: 1px solid var(--line-light);
}

.day-timeline article:last-child { border-bottom: 0; }

.day-timeline article::before {
  content: "";
  position: absolute;
  top: 37px;
  left: 62px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--sea-glass);
  border-radius: 50%;
  background: var(--navy-deep);
}

.day-timeline time { padding-top: 6px; color: var(--sea-glass); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.day-timeline div { padding-left: 17px; border-left: 1px solid rgba(184, 212, 202, .22); }
.day-timeline h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 22px; font-weight: 400; }
.day-timeline p { margin: 0; color: rgba(255, 253, 248, .64); font-size: 12px; line-height: 1.7; }

.control-card {
  display: flex;
  flex-direction: column;
  padding: 35px;
  background: var(--sea-pale);
  color: var(--navy-deep);
}

.control-card__icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 46px;
  background: var(--amber);
}

.control-card__icon svg { width: 33px; height: 33px; }
.control-card .micro-label { color: var(--teal-deep); }
.control-card h3 { margin: 12px 0 18px; font-family: var(--serif); font-size: 31px; font-weight: 400; letter-spacing: -.025em; line-height: 1.12; }
.control-card > p:not(.micro-label) { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.control-card ul { display: grid; gap: 11px; margin: auto 0 0; padding: 26px 0 0; border-top: 1px solid rgba(16, 33, 43, .14); list-style: none; }
.control-card li { display: flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.control-card li span { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }

.capability-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-top: 18px;
  border: 1px solid var(--line-light);
}

.capability-row span {
  min-height: 72px;
  display: grid;
  place-items: center;
  padding: 12px;
  border-right: 1px solid var(--line-light);
  color: rgba(255, 253, 248, .68);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .07em;
  text-align: center;
  text-transform: uppercase;
}

.capability-row span:last-child { border-right: 0; }

.how { background: var(--paper); }

.how-heading {
  display: grid;
  grid-template-columns: 1fr .75fr;
  align-items: end;
  gap: 80px;
}

.how-heading h2 { margin-top: 25px; font-size: 61px; }
.how-heading > p { margin: 0 0 4px; color: var(--ink-soft); font-size: 15px; line-height: 1.8; }

.how-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 75px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.how-cards li {
  min-height: 360px;
  padding: 29px 31px;
  border-right: 1px solid var(--line);
}

.how-cards li:last-child { border-right: 0; }

.how-number {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin-bottom: 70px;
  border: 1px solid var(--teal);
  border-radius: 50%;
}

.how-number span { color: var(--teal-deep); font-family: var(--serif); font-size: 17px; }
.how-cards .micro-label { color: var(--teal-deep); }
.how-cards h3 { margin: 14px 0 13px; font-family: var(--serif); font-size: 29px; font-weight: 400; letter-spacing: -.02em; }
.how-cards p:last-child { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.75; }

.principles {
  display: grid;
  grid-template-columns: 110px 1.2fr .9fr;
  align-items: center;
  gap: 45px;
  margin-top: 86px;
  padding: 57px 64px;
  background: var(--ivory);
}

.principles-mark { position: relative; width: 90px; height: 90px; display: grid; place-items: center; }
.principles-mark span { position: absolute; border: 1px solid var(--teal); border-radius: 50%; }
.principles-mark span:nth-child(1) { width: 90px; height: 90px; }
.principles-mark span:nth-child(2) { width: 60px; height: 60px; }
.principles-mark span:nth-child(3) { width: 16px; height: 16px; background: var(--amber); border: 0; }
.principles .micro-label { margin-bottom: 16px; color: var(--teal-deep); }
.principles h2 { font-size: 39px; }
.principles > p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.75; }

.cta {
  overflow: hidden;
  padding-block: 110px;
  background: var(--teal-deep);
  color: var(--white);
}

.cta-shell { position: relative; }
.cta-shell::before { content: ""; position: absolute; right: -120px; bottom: -210px; width: 490px; height: 490px; border: 1px solid rgba(255, 253, 248, .12); border-radius: 50%; box-shadow: 0 0 0 60px rgba(255, 253, 248, .03), 0 0 0 120px rgba(255, 253, 248, .025); }
.cta-kicker { position: relative; display: flex; align-items: center; gap: 18px; margin-bottom: 46px; color: var(--sea-glass); font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.cta-kicker i { width: 100px; height: 1px; background: rgba(255, 253, 248, .3); }
.cta-main { position: relative; display: grid; grid-template-columns: 1.25fr .75fr; align-items: start; gap: 85px; }
.cta h2 { max-width: 690px; font-size: 62px; line-height: 1; }
.cta h2 em { color: var(--amber-soft); }
.cta-main > div > p { margin: 5px 0 27px; color: rgba(255, 253, 248, .75); font-size: 14px; line-height: 1.75; }
.cta-actions { display: flex; align-items: center; gap: 26px; }
.cta-main small { display: block; margin-top: 18px; color: rgba(255, 253, 248, .48); font-size: 9px; letter-spacing: .04em; }

.site-footer { padding-block: 58px 27px; background: var(--navy-deep); color: var(--white); }
.footer-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-bottom: 48px; }
.brand--footer .brand-mark { border-color: var(--sea-glass); }
.brand--footer .brand-mark span { border-color: var(--sea-glass); color: var(--sea-glass); }
.brand--footer .brand-name { color: var(--white); }
.footer-main > p { margin: 0; font-family: var(--serif); font-size: 20px; }
.footer-main > p em { color: var(--amber-soft); }
.footer-links { justify-self: end; display: flex; gap: 25px; align-items: center; }
.footer-links a, .footer-links button { padding: 0; border: 0; background: transparent; color: rgba(255, 253, 248, .67); cursor: pointer; font-size: 11px; }
.footer-meta { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; border-top: 1px solid var(--line-light); color: rgba(255, 253, 248, .42); font-size: 8px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.footer-meta span:last-child { color: var(--amber-soft); }

.username:focus,
.password:focus { background-color: yellow; }

.modal {
  position: fixed;
  z-index: 300;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.modal__backdrop { position: absolute; inset: 0; background: rgba(9, 28, 41, .82); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }

.modal__panel {
  position: relative;
  width: min(510px, 100%);
  padding: 48px;
  background: var(--paper);
  box-shadow: 0 35px 90px rgba(0, 0, 0, .35);
}

.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--navy-deep);
  cursor: pointer;
}

.modal__close svg { width: 19px; height: 19px; }
.modal__mark { width: 62px; height: 62px; display: grid; place-items: center; margin-bottom: 35px; background: var(--sea-pale); color: var(--teal-deep); }
.modal__mark svg { width: 31px; height: 31px; }
.modal__panel .micro-label { color: var(--teal-deep); }
.modal__panel h2 { margin: 13px 0 18px; font-family: var(--serif); font-size: 37px; font-weight: 400; letter-spacing: -.03em; line-height: 1.08; }
.modal__panel > p:not(.micro-label) { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.75; }
.modal__button { width: 100%; margin-top: 30px; }
.modal__panel small { display: block; margin-top: 15px; color: #68777d; font-size: 10px; text-align: center; }

.reveal { animation: rise-in .7s cubic-bezier(.2, .7, .2, 1) both; }
.service-card:nth-child(2), .how-cards li:nth-child(2) { animation-delay: .08s; }
.service-card:nth-child(3), .how-cards li:nth-child(3) { animation-delay: .16s; }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1160px) {
  .desktop-nav { gap: 19px; }
  .desktop-nav a { font-size: 12px; }
  .brand-name { display: none; }
  .hero-grid { gap: 35px; }
  .hero h1 { font-size: 60px; }
  .campaign-card { right: 0; }
  .services-layout { grid-template-columns: 265px 1fr; gap: 42px; }
  .principles { padding-inline: 40px; gap: 30px; }
  .harbor h2 { font-size: 63px; }
}

@media (max-width: 960px) {
  .shell { width: min(var(--shell), calc(100% - 48px)); }
  .section { padding-block: 100px; }
  .header-inner { grid-template-columns: 1fr auto; }
  .desktop-nav { display: none; }
  .menu-toggle { display: grid; }
  .hero { padding-top: 75px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 750px; }
  .hero h1 { max-width: 760px; font-size: 66px; }
  .hero-visual { min-height: 610px; }
  .intro-grid { grid-template-columns: .45fr 1fr; }
  .intro-copy { grid-column: 2; margin-top: 0; }
  .services-layout { grid-template-columns: 1fr; }
  .section-heading { position: static; max-width: 570px; }
  .service-card:last-child { min-height: 350px; }
  .harbor-story { grid-template-columns: 1fr; }
  .control-card { min-height: 470px; }
  .capability-row { grid-template-columns: repeat(3, 1fr); }
  .capability-row span:nth-child(3) { border-right: 0; }
  .capability-row span:nth-child(-n+3) { border-bottom: 1px solid var(--line-light); }
  .harbor h2 { font-size: 58px; }
  .how-heading { grid-template-columns: 1fr; gap: 30px; }
  .principles { grid-template-columns: 90px 1fr; }
  .principles > p { grid-column: 2; }
  .cta-main { grid-template-columns: 1fr; gap: 42px; }
  .cta-main > div { max-width: 590px; }
}

@media (max-width: 720px) {
  html { scroll-padding-top: 82px; }
  .shell { width: calc(100% - 40px); }
  .section { padding-block: 82px; }
  .review-banner { min-height: 30px; gap: 7px; padding-inline: 12px; font-size: 8px; letter-spacing: .11em; }
  .review-banner span:last-child { display: none; }
  .header-inner { min-height: 70px; gap: 9px; }
  .brand-mark { width: 68px; height: 32px; }
  .button--login { min-height: 40px; gap: 8px; padding: 9px 11px; }
  .login-wide { display: none; }
  .login-short { display: inline; }
  .button--login svg { width: 16px; }
  .menu-toggle { width: 40px; height: 40px; }
  .mobile-nav { max-height: calc(100vh - 70px); }
  .mobile-nav {
    height: var(--mobile-nav-height, calc(100dvh - 100px));
    max-height: none;
  }
  .mobile-nav a, .mobile-nav button { font-size: 22px; }
  .hero { padding-block: 62px 24px; background-size: 36px 36px; }
  .hero-grid { gap: 55px; }
  .eyebrow { align-items: flex-start; font-size: 9px; }
  .eyebrow > span { margin-top: 6px; }
  .hero h1 { margin-block: 20px 22px; font-size: clamp(44px, 12.3vw, 56px); line-height: .98; }
  .hero-lead { font-size: 16px; line-height: 1.65; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; margin-top: 30px; }
  .hero-note { grid-template-columns: 30px 1fr; margin-top: 42px; }
  .hero-visual { min-height: auto; display: block; padding-block: 28px 56px; }
  .hero-visual::before { top: 0; left: 50%; width: 360px; height: 360px; transform: translateX(-50%); }
  .orbit { left: 50%; transform: translateX(-50%); }
  .orbit--one { top: -18px; width: 390px; height: 390px; }
  .orbit--two { top: 28px; width: 300px; height: 300px; }
  .system-card { width: 100%; margin: 0; }
  .system-card__head { align-items: flex-start; padding: 21px 19px 18px; }
  .system-card__head h2 { font-size: 21px; }
  .live-pill { display: none; }
  .system-flow { padding-inline: 19px; }
  .flow-row { min-height: 79px; grid-template-columns: 34px 1fr 24px; gap: 10px; }
  .flow-number { width: 30px; height: 30px; }
  .flow-row strong { font-size: 16px; }
  .system-card__foot { align-items: flex-start; flex-direction: column; padding: 18px 19px; }
  .campaign-card { position: relative; right: auto; bottom: auto; width: calc(100% - 28px); margin: -14px 14px 0; }
  .hero-bottom-line { gap: 10px; margin-top: 20px; overflow: hidden; }
  .hero-bottom-line span:nth-child(even) { display: none; }
  .intro-grid { grid-template-columns: 1fr; gap: 28px; }
  .section-index { padding-top: 0; }
  .intro-grid h2, .section-heading h2, .how-heading h2, .cta h2 { font-size: 41px; }
  .intro-copy { grid-column: auto; margin: 0; font-size: 14px; }
  .service-cards { grid-template-columns: 1fr; }
  .service-card, .service-card:last-child { grid-column: auto; min-height: 405px; padding: 27px; }
  .service-card:last-child ul { grid-template-columns: 1fr; gap: 10px; }
  .service-card h3 { margin-top: 38px; font-size: 29px; }
  .operating-band { padding-block: 69px; }
  .band-head { align-items: flex-start; flex-direction: column; gap: 18px; }
  .band-head p { font-size: 27px; }
  .operating-steps { grid-template-columns: 1fr 1fr; }
  .operating-steps li { min-height: 155px; padding: 22px 18px; border-bottom: 1px solid var(--line-light); }
  .operating-steps li:nth-child(2) { border-right: 0; }
  .operating-steps li:nth-child(n+3) { border-bottom: 0; }
  .harbor { padding-block: 92px 78px; }
  .section-index--dark { padding-bottom: 18px; }
  .harbor-title-row { grid-template-columns: 1fr; margin-top: 35px; }
  .harbor h2 { font-size: 46px; }
  .harbor-mark { width: 74px; height: 74px; margin-top: 15px; }
  .harbor-mark__core { font-size: 28px; }
  .harbor-intro { margin-top: 25px; font-size: 15px; }
  .harbor-story { margin-top: 48px; }
  .day-panel__head { min-height: 65px; padding-inline: 18px; }
  .day-timeline { padding-inline: 18px; }
  .day-timeline article { grid-template-columns: 49px 1fr; gap: 17px; padding-block: 22px; }
  .day-timeline article::before { left: 46px; }
  .day-timeline div { padding-left: 14px; }
  .day-timeline h3 { font-size: 20px; }
  .control-card { min-height: 470px; padding: 30px 27px; }
  .control-card__icon { margin-bottom: 36px; }
  .control-card h3 { font-size: 29px; }
  .capability-row { grid-template-columns: repeat(2, 1fr); }
  .capability-row span { min-height: 65px; }
  .capability-row span:nth-child(3) { border-right: 1px solid var(--line-light); }
  .capability-row span:nth-child(even) { border-right: 0; }
  .capability-row span:nth-child(-n+4) { border-bottom: 1px solid var(--line-light); }
  .how-heading { gap: 25px; }
  .how-heading > p { font-size: 14px; }
  .how-cards { grid-template-columns: 1fr; margin-top: 52px; }
  .how-cards li { min-height: 315px; border-right: 0; border-bottom: 1px solid var(--line); }
  .how-cards li:last-child { border-bottom: 0; }
  .how-number { margin-bottom: 52px; }
  .principles { grid-template-columns: 1fr; gap: 27px; margin-top: 58px; padding: 38px 28px; }
  .principles-mark { width: 75px; height: 75px; }
  .principles-mark span:nth-child(1) { width: 75px; height: 75px; }
  .principles-mark span:nth-child(2) { width: 49px; height: 49px; }
  .principles > p { grid-column: auto; }
  .principles h2 { font-size: 34px; }
  .cta { padding-block: 83px; }
  .cta-kicker { margin-bottom: 32px; }
  .cta-main { gap: 32px; }
  .cta-actions { align-items: flex-start; flex-direction: column; gap: 20px; }
  .footer-main { grid-template-columns: 1fr; justify-items: start; gap: 31px; }
  .footer-main > p { grid-row: 2; }
  .footer-links { justify-self: start; flex-wrap: wrap; }
  .footer-meta { align-items: flex-start; flex-direction: column; gap: 10px; }
  .modal { padding: 16px; }
  .modal__panel { padding: 41px 26px 28px; }
  .modal__mark { margin-bottom: 28px; }
  .modal__panel h2 { font-size: 31px; }
}

@media (max-width: 380px) {
  .shell { width: calc(100% - 32px); }
  .brand-mark { width: 63px; }
  .button--login { padding-inline: 9px; }
  .button--login svg { display: none; }
  .hero h1 { font-size: 42px; }
  .context-chips { font-size: 8px; }
  .intro-grid h2, .section-heading h2, .how-heading h2, .cta h2 { font-size: 38px; }
}

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