:root {
  /* Alternating bands: near-black and a distinctly blue navy. Kept far enough
     apart in value that the seam between two sections is actually visible. */
  --ink: #04060c;
  --ink-2: #0d1a30;
  --ink-3: #02040a;
  --navy: #14243d;

  /* Shading washes, one per band, so no surface is a flat fill. */
  --wash-left: radial-gradient(105% 75% at 12% 0%, rgba(104, 146, 210, 0.13) 0%, rgba(104, 146, 210, 0) 62%);
  --wash-right: radial-gradient(95% 70% at 88% 6%, rgba(104, 146, 210, 0.09) 0%, rgba(104, 146, 210, 0) 66%);
  --wash-center: radial-gradient(120% 90% at 50% 0%, rgba(120, 160, 220, 0.10) 0%, rgba(120, 160, 220, 0) 68%);

  /* Fractal-noise grain, blended soft-light over each band. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");

  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.10);
  --line-soft: rgba(255, 255, 255, 0.07);
  --white: #ffffff;
  --text: #e9edf3;
  --text-muted: rgba(233, 237, 243, 0.66);
  --text-dim: rgba(233, 237, 243, 0.42);
  --accent: #7f9cc4;
  --accent-deep: #2f4a75;
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wrap: 1180px;

  /* One easing family for the whole site. Long, decelerating curves read as
     considered; linear or bouncy easing reads as cheap. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Every photograph is graded identically so the imagery reads as one
     commissioned set rather than assorted stock. */
  --grade: saturate(0.62) brightness(0.82) contrast(1.06);
  --grade-hover: saturate(0.86) brightness(0.95) contrast(1.02);

  /* Hairlines that fade at the ends instead of stopping dead. */
  --rule: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.14) 12%, rgba(255,255,255,0.14) 88%, rgba(255,255,255,0) 100%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

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

::selection { background: var(--accent-deep); color: var(--white); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- Type ---------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--white);
  margin: 0;
  /* Large serif needs negative tracking to close the gaps that only appear at
     display size, and balanced wrapping so no line is left with one orphan. */
  letter-spacing: -0.018em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.6rem, 6.2vw, 5.15rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
}

h1 em, h2 em {
  font-style: italic;
  color: var(--accent);
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.95rem, 3.7vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
}

h3 {
  font-size: 1.4rem;
  line-height: 1.22;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 20px;
}

/* A short rule beside the label, the way a print masthead sets a standfirst. */
.eyebrow:not(.center)::before {
  content: '';
  display: inline-block;
  width: 26px;
  height: 1px;
  margin: 0 12px 0.32em 0;
  background: var(--accent);
  opacity: 0.65;
  vertical-align: middle;
}

.center { text-align: center; }

.lede, .section-lede {
  font-size: 1.07rem;
  line-height: 1.68;
  color: var(--text-muted);
  max-width: 62ch;
  margin: 24px 0 0;
  text-wrap: pretty;
}

p { text-wrap: pretty; }

.section-lede.center { margin-inline: auto; }

/* ---------- Buttons ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 32px;
  border: 1px solid var(--white);
  background: var(--white);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  transition: color .45s var(--ease-out), border-color .45s var(--ease-out),
              transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}

/* The hover state wipes in from the bottom rather than snapping colour. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform .5s var(--ease-out);
}

.btn:hover::before,
.btn:focus-visible::before { transform: translateY(0); }

.btn:hover {
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.9);
}

.btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.34);
}

.btn-ghost::before { background: var(--white); }

.btn-ghost:hover { color: var(--ink); border-color: var(--white); }

/* Keyboard users get the same considered treatment as mouse users. */
:where(a, button, [tabindex]):focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

.btn-sm { padding: 10px 22px; font-size: 0.72rem; }

.btn-lg { padding: 17px 38px; }

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}

.nav.is-scrolled {
  background: rgba(4, 6, 12, 0.88);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 26px;
  transition: padding-block .5s var(--ease-out);
}

/* The bar tightens as you leave the hero, so the page feels like it settles. */
.nav.is-scrolled .nav-inner { padding-block: 14px; }

.brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* The supplied logo is navy artwork. Invert it to white so it reads on the dark
   theme, and screen out the black that inversion leaves behind if the source
   file has a solid white background rather than transparency. */
.brand-logo {
  width: auto;
  height: 34px;
  filter: invert(1) grayscale(1) brightness(1.9);
  mix-blend-mode: screen;
}

.footer .brand-logo { height: 40px; }

/* Text wordmark, shown only while the logo file is missing. */
.brand:has(.brand-logo) .brand-fallback { display: none; }

.brand-fallback { display: block; }

.brand-name {
  display: block;
  font-family: var(--serif);
  font-size: 1.32rem;
  line-height: 1;
  color: var(--white);
}

.brand-sub {
  display: block;
  margin-top: 3px;
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}

.nav-links { display: flex; gap: 32px; }

.nav-links a {
  position: relative;
  font-size: 0.76rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  padding-block: 4px;
  transition: color .35s var(--ease-out);
}

/* Underline grows from the left edge instead of appearing all at once. */
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-out);
}

.nav-links a:hover { color: var(--white); }

.nav-links a:hover::after { transform: scaleX(1); }

.nav .btn {
  border-color: rgba(255, 255, 255, 0.45);
  background: transparent;
  color: var(--white);
}

.nav .btn:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.55) brightness(0.66) contrast(1.08);
  /* An imperceptible drift keeps the hero from feeling like a dead JPEG. */
  animation: hero-drift 26s var(--ease-in-out) infinite alternate;
  transform-origin: 62% 45%;
  will-change: transform;
}

@keyframes hero-drift {
  from { transform: scale(1.015); }
  to   { transform: scale(1.085); }
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 6, 12, 0.74) 0%, rgba(4, 6, 12, 0.34) 38%, rgba(4, 6, 12, 0.97) 100%),
    linear-gradient(90deg, rgba(4, 6, 12, 0.74) 0%, rgba(4, 6, 12, 0) 62%);
}

.hero-content {
  position: relative;
  padding-bottom: 96px;
  padding-top: 160px;
}

.hero-content .lede { color: rgba(255, 255, 255, 0.78); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

.hero-stats {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 52px;
  margin: 68px 0 0;
  padding-top: 32px;
  border-top: 0;
}

.hero-stats::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--rule);
  background-position: left;
}

.hero-stats dt {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
}

.hero-stats dd {
  margin: 8px 0 0;
  font-family: var(--serif);
  font-size: 1.95rem;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--white);
}

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

.section { padding: clamp(80px, 11vw, 140px) 0; }

/* Every band gets a grain layer and a hairline seam. `isolation` keeps the
   soft-light blend from reaching the band underneath. */
.section,
.cta,
.footer {
  position: relative;
  isolation: isolate;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.section::before,
.cta::before,
.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 180px 180px;
  /* Normal blending, not soft-light: mid-grey noise blended soft-light over a
     near-black band cancels out to nothing. A low flat opacity is what actually
     reads as grain on dark surfaces. */
  opacity: 0.065;
  pointer-events: none;
  z-index: 0;
}

.section > *,
.cta > *,
.footer > * {
  position: relative;
  z-index: 1;
}

/* Bands alternate black, navy, black, navy down the page, landing on the navy
   CTA and the deepest black in the footer. */
.approach {
  background-color: var(--ink);
  background-image: var(--wash-right);
}

.formula {
  background-color: var(--ink-2);
  background-image: var(--wash-left);
}

.how {
  background-color: var(--ink);
  background-image: var(--wash-center);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 58px;
}

/* Five offerings on a six-column track: three across the top row, then two
   wider cards below, so the last row fills instead of leaving a hole. */
.grid-offer {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  margin-top: 58px;
}

.grid-offer .card { grid-column: span 2; padding: 32px 26px 30px; }

.grid-offer .card:nth-child(4),
.grid-offer .card:nth-child(5) { grid-column: span 3; }

.grid-offer .card h3 { font-size: 1.22rem; }

.grid-offer .card p { font-size: 0.92rem; }

.card {
  position: relative;
  padding: 38px 32px 34px;
  background-color: transparent;
  background-image: linear-gradient(158deg, rgba(255, 255, 255, 0.062) 0%, rgba(255, 255, 255, 0.014) 58%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid var(--line);
  border-top: 0;
  transition: transform .6s var(--ease-out), background-color .6s var(--ease-out),
              border-color .6s var(--ease-out), box-shadow .6s var(--ease-out);
}

/* The accent cap draws itself across on hover instead of sitting static. */
.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--accent);
  opacity: 0.5;
  transform: scaleX(1);
  transform-origin: left;
  transition: opacity .6s var(--ease-out), transform .7s var(--ease-out);
}

.card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 26px 60px -34px rgba(0, 0, 0, 0.95);
}

.card:hover::before { opacity: 1; }

.card-num {
  font-family: var(--serif);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.card h3 { margin: 15px 0 11px; }

.card p { margin: 0; color: var(--text-muted); font-size: 0.97rem; }

/* ---------- How it works ---------- */

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

.steps li {
  padding: 34px 28px 10px 0;
  border-right: 1px solid var(--line-soft);
  padding-right: 28px;
}

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

.steps li:not(:first-child) { padding-left: 28px; }

.step-num {
  font-family: var(--serif);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.steps h3 { margin: 12px 0 10px; font-size: 1.3rem; }

.steps p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }

/* ---------- Underwriting split ---------- */

.underwriting {
  background-color: var(--ink-2);
  background-image: var(--wash-center);
}

.fineprint {
  margin: 0;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--text-dim);
  font-family: var(--serif);
  font-size: 1.05rem;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.ticks {
  list-style: none;
  margin: 32px 0 38px;
  padding: 0;
}

.ticks li {
  position: relative;
  padding: 14px 0 14px 26px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-muted);
  font-size: 0.97rem;
}

.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 23px;
  width: 10px;
  height: 1px;
  background: var(--accent);
}

.ticks strong { color: var(--white); font-weight: 500; }

.split-media { position: relative; }

.split-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: var(--grade);
}

.metric-card {
  position: absolute;
  right: -22px;
  bottom: -28px;
  width: min(272px, 72%);
  padding: 24px 26px;
  background: rgba(8, 16, 30, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
}

.metric-label {
  margin: 0 0 14px;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.metric-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 0.88rem;
}

.metric-row span:first-child { color: var(--text-muted); }

.metric-row span:last-child { color: var(--white); font-variant-numeric: tabular-nums; }

/* ---------- The formula ---------- */

.formula-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 76px);
  margin-top: 56px;
}

.formula-col > h3 {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.4rem, 2.1vw, 1.75rem);
}

.formula-col > p {
  margin: 18px 0 0;
  color: var(--text-muted);
  font-size: 0.97rem;
}

.formula-col .ticks { margin-bottom: 0; }

.flow {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}

.flow li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 15px 0;
  border-top: 1px solid var(--line-soft);
}

.flow-num {
  font-family: var(--serif);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  padding-top: 3px;
}

.flow h4 {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.14rem;
  line-height: 1.25;
  color: var(--white);
}

.flow p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.91rem;
}

.fineprint-sm {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--text-dim);
}

/* ---------- Everything in house ---------- */

.inhouse {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px);
  margin-top: clamp(56px, 7vw, 92px);
  padding-top: 36px;
  border-top: 1px solid var(--line);
}

.inhouse-head h3 { font-size: clamp(1.5rem, 2.3vw, 1.95rem); }

.inhouse-head p {
  margin: 14px 0 0;
  color: var(--text-muted);
  font-size: 0.97rem;
}

.inhouse-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-content: start;
}

.inhouse-list li {
  position: relative;
  padding: 11px 0 11px 22px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.92rem;
  color: var(--text);
}

.inhouse-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 21px;
  width: 9px;
  height: 1px;
  background: var(--accent);
}

/* ---------- Illustrative underwriting panel ---------- */

.uw-wrap { margin-top: clamp(64px, 8vw, 104px); }

.uw-head {
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}

.uw-head h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }

.uw-head p {
  margin: 12px 0 0;
  max-width: 68ch;
  color: var(--text-muted);
  font-size: 0.97rem;
}

.uw-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.uw-group {
  padding: 30px 26px 26px 0;
  border-right: 1px solid var(--line-soft);
}

.uw-group:not(:first-child) { padding-left: 26px; }

.uw-group:last-child { border-right: 0; padding-right: 0; }

.uw-group h4 {
  margin: 0 0 6px;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.uw-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 0.86rem;
}

.uw-row span:first-child { color: var(--text-muted); }

.uw-row span:last-child {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.uw-row.is-total span {
  color: var(--white);
  font-weight: 500;
}

.uw-row.is-total { border-top-color: var(--line); }

.uw-note {
  margin: 30px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.78rem;
  color: var(--text-dim);
  max-width: 78ch;
}

/* ---------- Services ---------- */

.services { background: var(--ink-2); }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 58px;
}

.service {
  background-image: linear-gradient(158deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.014) 60%);
  border: 1px solid var(--line);
  overflow: hidden;
}

.service img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  filter: var(--grade);
}

.service-body { padding: 34px 34px 38px; }

.service-body h3 { margin-bottom: 10px; }

.service-body p { color: var(--text-muted); margin: 0 0 20px; font-size: 0.97rem; }

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

.mini li {
  padding: 10px 0 10px 22px;
  position: relative;
  border-top: 1px solid var(--line-soft);
  font-size: 0.92rem;
  color: var(--text);
}

.mini li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20px;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

/* ---------- Portfolio ---------- */

.portfolio {
  background-color: var(--ink);
  background-image: var(--wash-left);
}

.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 58px;
}

.tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--ink-3);
  border: 1px solid var(--line-soft);
}

.tile-wide { grid-column: span 2; }

.tile-full { grid-column: 1 / -1; }

.tile img {
  height: 320px;
  width: 100%;
  object-fit: cover;
  filter: var(--grade);
  transition: transform .7s cubic-bezier(.2, .7, .2, 1), filter .5s ease;
}

.tile-full img { height: 400px; }

.tile:hover img { transform: scale(1.055); filter: var(--grade-hover); }

.tile figcaption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 24px;
  background: linear-gradient(180deg, rgba(4, 6, 12, 0) 0%, rgba(4, 6, 12, 0.6) 45%, rgba(4, 6, 12, 0.95) 100%);
  color: var(--white);
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: -0.012em;
  transform: translateY(6px);
  transition: transform .7s var(--ease-out);
}

.tile:hover figcaption { transform: translateY(0); }

/* Hairline frame inset from the edge, the way a printed plate is trimmed. */
.tile::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s var(--ease-out), inset .7s var(--ease-out);
  z-index: 1;
}

.tile:hover::after { opacity: 1; inset: 16px; }

.tile-meta {
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/* ---------- Service area ---------- */

.markets {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  margin-top: clamp(56px, 7vw, 88px);
  padding-top: 36px;
  border-top: 1px solid var(--line);
}

.markets-head h3 { font-size: clamp(1.5rem, 2.3vw, 1.95rem); }

.markets-head p {
  margin: 14px 0 0;
  color: var(--text-muted);
  font-size: 0.97rem;
}

.markets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  align-content: start;
}

.market {
  padding: 4px 20px 4px 0;
  border-right: 1px solid var(--line-soft);
}

.market:last-child { border-right: 0; padding-right: 0; }

.market:not(:first-child) { padding-left: 20px; }

.market h4 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--white);
}

.market p {
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ---------- CTA ---------- */

.cta {
  padding: clamp(84px, 11vw, 150px) 0;
  background-color: var(--navy);
  background-image:
    radial-gradient(115% 105% at 18% 0%, rgba(66, 108, 172, 0.42) 0%, rgba(66, 108, 172, 0) 58%),
    radial-gradient(90% 80% at 85% 100%, rgba(20, 36, 61, 0.75) 0%, rgba(20, 36, 61, 0) 60%);
  text-align: center;
}

.cta .section-lede { margin-inline: auto; }

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 40px;
}

.cta .btn-ghost { text-transform: none; letter-spacing: 0.02em; }

.cta-note {
  margin: 26px 0 0;
  font-size: 0.82rem;
  color: var(--text-dim);
}

/* ---------- Footer ---------- */

.footer {
  background-color: var(--ink-3);
  color: var(--text-muted);
  padding: 66px 0 26px;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  justify-content: space-between;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--line-soft);
}

.footer-tag { margin: 16px 0 0; font-size: 0.9rem; color: var(--text-dim); max-width: 34ch; }

.footer-cols { display: flex; gap: 72px; }

.footer-cols h4 {
  margin: 0 0 14px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.footer-cols a {
  display: block;
  padding: 5px 0;
  font-size: 0.92rem;
  color: var(--text-muted);
  transition: color .2s ease;
}

.footer-cols a:hover { color: var(--white); }

.footer-static {
  display: block;
  padding: 5px 0;
  font-size: 0.92rem;
  color: var(--text-muted);
}

.disclaimer {
  padding-top: 26px;
}

.disclaimer p {
  margin: 0;
  max-width: 88ch;
  font-size: 0.74rem;
  line-height: 1.7;
  color: rgba(233, 237, 243, 0.34);
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding-top: 22px;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.footer-base p { margin: 0; }

/* ---------- Reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
}

.reveal.is-visible { opacity: 1; transform: none; }

/* Children rise in sequence rather than the whole block appearing at once.
   The index is set as --i by the reveal observer. */
.stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.stagger.is-visible > * { opacity: 1; transform: none; }

/* Hero copy resolves on load, line by line. */
.hero-content > * {
  opacity: 0;
  transform: translateY(24px);
  animation: rise 1.2s var(--ease-out) forwards;
}

.hero-content > .eyebrow  { animation-delay: .15s; }
.hero-content > h1        { animation-delay: .3s; }
.hero-content > .lede     { animation-delay: .5s; }
.hero-content > .hero-actions { animation-delay: .68s; }
.hero-content > .hero-stats   { animation-delay: .84s; }

@keyframes rise {
  to { opacity: 1; transform: none; }
}

/* Reading-progress hairline across the top of the viewport. */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  z-index: 60;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .stagger > * { opacity: 1; transform: none; transition: none; }
  .hero-content > * { opacity: 1; transform: none; animation: none; }
  .hero-img { animation: none; }
  .tile img, .tile figcaption, .tile::after, .card, .btn, .btn::before { transition: none; }
}

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

@media (max-width: 960px) {
  .nav-links { display: none; }
  .grid-3, .grid-2, .split { grid-template-columns: 1fr; }
  .grid-offer { grid-template-columns: repeat(2, 1fr); }
  .grid-offer .card,
  .grid-offer .card:nth-child(4),
  .grid-offer .card:nth-child(5) { grid-column: span 1; }
  .formula-grid { grid-template-columns: 1fr; }
  .inhouse { grid-template-columns: 1fr; }
  .markets { grid-template-columns: 1fr; }
  .uw-panel { grid-template-columns: repeat(2, 1fr); }
  .uw-group:nth-child(2n) { border-right: 0; padding-right: 0; }
  .uw-group:nth-child(odd) { padding-left: 0; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps li:nth-child(2n) { border-right: 0; }
  .steps li:nth-child(3), .steps li:nth-child(4) { border-top: 1px solid var(--line-soft); }
  .steps li:nth-child(odd) { padding-left: 0; }
  .split-media { order: -1; }
  .metric-card { position: static; width: 100%; margin-top: 16px; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tile-wide { grid-column: span 2; }
  .tile img { height: 260px; }
  .tile-full img { height: 300px; }
}

@media (max-width: 620px) {
  .wrap { padding: 0 20px; }
  .nav .brand-name { font-size: 1.1rem; }
  .nav .brand-sub { font-size: 0.48rem; letter-spacing: 0.15em; }
  .nav .btn-sm { padding: 9px 16px; font-size: 0.66rem; }
  .hero-content { padding-bottom: 64px; padding-top: 130px; }
  /* Hard breaks tuned for desktop leave ragged short lines on a phone. Let the
     headings wrap on their own at this width. */
  h1 br, h2 br { display: none; }
  /* Four stats at display size stack one per row on a phone. A 2x2 grid at a
     smaller size keeps the strip compact. */
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 18px;
    margin-top: 44px;
  }
  .hero-stats dd { font-size: 1.18rem; }
  .tiles { grid-template-columns: 1fr; }
  .tile-wide { grid-column: span 1; }
  .grid-offer { grid-template-columns: 1fr; }
  .inhouse-list { grid-template-columns: 1fr; }
  .markets-grid { grid-template-columns: 1fr; }
  .market { border-right: 0; padding: 14px 0; border-top: 1px solid var(--line-soft); }
  .market:not(:first-child) { padding-left: 0; }
  .uw-panel { grid-template-columns: 1fr; }
  .uw-group { border-right: 0; padding: 26px 0 20px; }
  .uw-group:not(:first-child) { padding-left: 0; }
  .steps { grid-template-columns: 1fr; }
  .steps li { border-right: 0; padding-left: 0 !important; }
  .steps li:not(:first-child) { border-top: 1px solid var(--line-soft); }
  .service img { height: 210px; }
  .footer-cols { gap: 44px; }
  .btn, .btn-lg { width: 100%; }
}