@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #fafafa;
  --bg-alt: #f2f3f5;
  --surface: #ffffff;
  --ink: #333333;
  --text: #555555;
  --faint: #8a8a8a;
  --rule: #e2e4e8;
  --accent: #325d80;
  --accent-hover: #284b68;
  --bar: 4.5rem;
  color-scheme: light only;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* Desktop: scale the whole layout (all sizes are rem) with screen height so each section fits one screen. */
@media (min-width: 860px) {
  html { font-size: clamp(12px, min(calc(100vh / var(--fit-h)), calc(100vw / var(--fit-w))), 16px); }
}
:root { --fit-h: 54; --fit-w: 90; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
strong { font-weight: 600; color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 0.25rem; }

/* Top bar */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  height: var(--bar);
  background: rgba(250, 250, 250, 0.88);
  -webkit-backdrop-filter: saturate(160%) blur(0.625rem);
  backdrop-filter: saturate(160%) blur(0.625rem);
  border-bottom: 1px solid var(--rule);
}
.topbar-inner {
  max-width: 1400px; height: 100%; margin: 0 auto; padding: 0 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
@media (min-width: 700px) { .topbar-inner { padding: 0 2rem; } }
.brand { color: var(--ink); font-size: 1.05rem; font-weight: 600; text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
.brand:hover { color: var(--ink); }
.nav { display: flex; gap: 2.125rem; list-style: none; margin: 0; padding: 0; font-size: 1rem; font-weight: 400; }
.nav a { color: var(--text); text-decoration: none; padding: 0.375rem 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current] { color: var(--accent); border-bottom-color: var(--accent); }
@media (max-width: 600px) {
  .brand { display: none; }
  .topbar-inner { justify-content: center; }
  .nav { gap: 1.375rem; }
}

/* Full-screen sections */
.screen {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--bar) + 2.25rem) 0 3.25rem;
}
.screen-alt { background: var(--bg-alt); border-top: 1px solid var(--rule); }
.inner { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 700px) { .inner { padding: 0 2rem; } }

.eyebrow {
  margin: 0 0 1.125rem; color: var(--accent); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.175rem; text-transform: uppercase;
}
h1, h2, h3 { color: var(--ink); letter-spacing: -0.015em; }
h1 { font-weight: 500; font-size: clamp(2.3rem, 5.5vw, 3.3rem); line-height: 1.1; margin: 0 0 1.75rem; }
h2 { font-weight: 500; font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1.2; margin: 0; }
h3 { font-weight: 600; font-size: 1.3rem; line-height: 1.3; margin: 0 0 1rem; }

/* Home */
.home-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 860px) {
  .home-grid { grid-template-columns: 24rem minmax(0, 1fr); gap: 2.25rem 5rem; }
}
.portrait { margin: 0; width: min(100%, 24rem); }
@media (max-width: 859px) { .portrait { width: 10rem; } }
.portrait img {
  border-radius: 0.875rem; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%;
  box-shadow: 0 18px 40px rgba(30, 45, 60, 0.12);
}
@media (max-width: 859px) { .portrait img { aspect-ratio: 1 / 1; border-radius: 50%; box-shadow: none; } }
.home-copy { max-width: none; }
.home-copy p { margin: 0 0 1.125rem; }
.home-copy .lead { font-size: 1.3rem; color: var(--ink); font-weight: 400; line-height: 1.55; margin-bottom: 1.5rem; }

.next {
  position: absolute; left: 50%; bottom: 1.375rem; transform: translateX(-50%);
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%;
}
.next span {
  width: 0.625rem; height: 0.625rem; border-right: 1.5px solid var(--faint); border-bottom: 1.5px solid var(--faint);
  transform: translateY(-3px) rotate(45deg);
}
.next:hover span { border-color: var(--accent); }
@media (max-height: 900px), (max-width: 859px) { .next { display: none; } }

/* Advisory */
.section-head { margin-bottom: 2rem; }
.section-head h2 { margin-bottom: 0.625rem; }
.section-head p { margin: 0; color: var(--text); }
.section-head .approach-line { margin-top: 0.25rem; color: var(--ink); font-weight: 400; }
.offers { display: grid; gap: 1.5rem; }
@media (min-width: 860px) { .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem; } }
.offer {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 0.75rem;
  padding: 2rem 2.25rem;
}
@media (max-width: 600px) { .offer { padding: 1.625rem 1.375rem; } }
.offer { line-height: 1.6; }
.offer p { margin: 0 0 0.875rem; }
.offer .who { margin: 1.125rem 0 0; padding-top: 1.125rem; border-top: 1px solid var(--rule); }

ul { list-style: none; margin: 0; padding: 0; }
li { position: relative; padding-left: 1.5rem; margin-bottom: 0.625rem; }
li::before {
  content: ""; position: absolute; left: 3px; top: 0.66em;
  width: 0.4375rem; height: 0.4375rem; background: var(--accent); transform: rotate(45deg);
}
.nav li { padding: 0; margin: 0; }
.nav li::before { content: none; }

.offer .how { margin: 0.75rem 0 0; }


/* Buttons */
.home-cta { grid-column: 1 / -1; justify-content: center; margin-top: 0; }
.adv-cta { justify-content: center; margin-top: 3rem; }
.buttons { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 2.25rem; }
.btn {
  display: inline-flex; align-items: center; gap: 0.625rem;
  min-height: 3.125rem; padding: 0 1.625rem; border-radius: 0.375rem;
  background: var(--accent); color: #fff; text-decoration: none;
  font-weight: 500; font-size: 1.02rem; border: 1px solid var(--accent);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }


/* 404 */
.notfound { max-width: 35rem; margin: 0 auto; min-height: 100vh; padding: 0 1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.notfound h1 { margin-bottom: 0.75rem; }
.notfound p { margin: 0 0 0.25rem; }