:root {
  color-scheme:light;
  --ink:#172027;
  --paper:#f7f8f6;
  --white:#fff;
  --steel:#52636d;
  --line:#ccd5d7;
  --blue:#6d9aff;
  --blue-strong:#2658c7;
  --steel-strong:#33424b;
  --max:1180px}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.55}
a {
  color:inherit;
  text-decoration:none}
a:hover {
  text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:3px solid var(--blue-strong);
  outline-offset:4px}
button,input,textarea {
  font:inherit}
h1,h2,h3,p {
  margin-top:0}
h1,h2 {
  font-weight:400}
h1 {
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-size:clamp(3.25rem,6.2vw,6.6rem);
  line-height:1.02;
  letter-spacing:-.03em}
h1 em {
  font-weight:500;
  font-style:italic;
  color:#c5d4f5}
h2 {
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-size:clamp(2.5rem,4vw,4.5rem);
  line-height:1.1;
  letter-spacing:-.03em}
h3 {
  font-size:1.35rem;
  line-height:1.3;
  letter-spacing:-.02em}
.container {
  width:min(calc(100% - 48px),var(--max));
  margin-inline:auto}
.skip-link {
  position:absolute;
  z-index:10;
  top:-100px;
  left:20px;
  padding:10px 15px;
  background:#fff;
  color:#000}
.skip-link:focus {
  top:10px}
.eyebrow {
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.14em;
  line-height:1.3;
  color:#476178}
.eyebrow.light {
  color:#9eb6d0}
.site-header {
  background:var(--paper);
  border-bottom:1px solid var(--line)}
.header-inner {
  height:76px;
  display:flex;
  align-items:center;
  gap:36px}
.brand {
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-size:1.03rem;
  letter-spacing:.18em;
  font-weight:800;
  white-space:nowrap}
.brand-mark {
  width:28px;
  height:28px;
  display:block;
  flex:none}
.desktop-nav {
  display:flex;
  gap:32px;
  margin-left:auto;
  font-size:.89rem;
  font-weight:600}
.desktop-nav a:hover,.text-link:hover {
  color:var(--blue-strong)}
.nav-cta {
  border:1px solid var(--ink);
  padding:11px 16px;
  font-size:.87rem;
  font-weight:700;
  white-space:nowrap}
.nav-cta:hover {
  background:var(--ink);
  color:#fff}
.mobile-menu {
  display:none}
.hero {
  background:var(--ink);
  color:#fff;
  min-height:690px;
  display:flex;
  align-items:center}
.hero-grid {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:70px;
  align-items:center;
  padding-block:100px 112px}
.hero h1 {
  max-width:800px;
  margin:32px 0}
.hero-lede {
  max-width:650px;
  color:#cfdbdc;
  font-size:1.16rem;
  line-height:1.55}
.hero-actions {
  display:flex;
  align-items:center;
  gap:30px;
  margin-top:40px}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  padding:14px 18px;
  min-height:52px;
  font-weight:700;
  font-size:.9rem;
  transition:background .18s ease,color .18s ease,transform .18s ease}
.button:hover {
  transform:translateY(-2px)}
.button-primary {
  background:#e9edf0;
  color:var(--ink)}
.button-primary:hover {
  background:#fff}
.text-link {
  font-weight:700;
  font-size:.9rem}
.text-link-light {
  color:#e7ecec}
.text-link-light:hover {
  color:#fff}
.hero-diagram {
  position:relative;
  overflow:hidden;
  border:1px solid #52636d;
  align-self:stretch;
  max-height:445px;
  margin-top:26px;
  display:flex;
  flex-direction:column}
#hero-scene {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none}
.hero-diagram>* {
  position:relative;
  z-index:1}
.diagram-head,.diagram-foot {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  padding:16px 18px;
  font-size:.65rem;
  letter-spacing:.12em;
  color:#9eb6d0}
.diagram-head {
  border-bottom:1px solid #52636d}
.diagram-row {
  display:grid;
  grid-template-columns:42px 1fr;
  gap:12px;
  border-bottom:1px solid #52636d;
  padding:21px 18px}
.diagram-row strong {
  display:block;
  font-size:1.25rem;
  font-weight:500;
  line-height:1.2}
.diagram-row small {
  display:block;
  color:#aebfc7;
  margin-top:6px;
  font-size:.73rem}
.diagram-index {
  color:var(--blue);
  font-family:'JetBrains Mono',Consolas,monospace;
  font-size:.78rem}
.diagram-foot {
  margin-top:auto;
  justify-content:flex-end}
.diagram-foot-line {
  height:1px;
  background:var(--blue);
  flex:1}
.section {
  padding-block:112px}
.section-heading {
  max-width:700px;
  margin-bottom:54px}
.section-heading h2 {
  margin:18px 0 20px}
.section-heading>p:last-child {
  max-width:630px;
  font-size:1.06rem;
  color:var(--steel)}
.service-list {
  border-top:1px solid #98a8ad}
.service-row {
  display:grid;
  grid-template-columns:70px minmax(220px,.9fr) minmax(280px,1.1fr);
  gap:24px;
  align-items:start;
  border-bottom:1px solid var(--line);
  padding:30px 0}
.service-row h3,.service-row p {
  margin:0}
.service-row p {
  color:var(--steel);
  max-width:500px}
.row-number {
  font-family:'JetBrains Mono',Consolas,monospace;
  color:var(--blue-strong);
  font-size:.8rem}
.approach-preview {
  background:#e9eef0}
.approach-grid {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:60px}
.approach-grid h2 {
  max-width:760px;
  font-weight:700}
.approach-grid p:last-child {
  max-width:630px;
  font-size:1.08rem;
  color:var(--steel-strong)}
.contact-preview {
  background:var(--ink);
  color:#fff;
  padding-block:95px;
  border-top:1px solid #52636d}
.contact-grid {
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:70px;
  align-items:end}
.contact-grid h2 {
  margin:18px 0 0}
.contact-grid>p {
  color:#cfdbdc;
  margin:0;
  font-size:1.05rem}
.site-footer {
  background:var(--ink);
  color:#fff;
  border-top:1px solid #52636d;
  padding-top:58px}
.footer-top {
  display:flex;
  justify-content:space-between;
  gap:30px;
  padding-bottom:60px}
.footer-top p {
  color:#aebfc7;
  margin:24px 0 0;
  font-size:.92rem}
.brand-light {
  color:#fff}
.footer-top>a {
  align-self:start;
  font-weight:700;
  border-bottom:1px solid #b5c5d0;
  padding-bottom:7px}
.footer-bottom {
  border-top:1px solid #52636d;
  display:flex;
  justify-content:space-between;
  gap:30px;
  padding-block:20px;
  color:#aebfc7;
  font-size:.73rem;
  letter-spacing:.03em}
@media(max-width:980px) {
  .desktop-nav {
  gap:18px}
.hero-grid {
  gap:35px;
  grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr)}
.hero h1 {
  font-size:clamp(3.1rem,6.8vw,5rem)}
}
@media(max-width:760px) {
  .container {
  width:min(calc(100% - 36px),var(--max))}
.header-inner {
  height:66px}
.desktop-nav,.nav-cta {
  display:none}
.mobile-menu {
  display:block;
  margin-left:auto;
  position:relative}
.mobile-menu summary {
  cursor:pointer;
  list-style:none;
  font-size:.85rem;
  font-weight:700}
.mobile-menu summary::-webkit-details-marker {
  display:none}
.mobile-menu summary span {
  margin-left:8px}
.mobile-menu nav {
  position:absolute;
  z-index:4;
  right:0;
  top:39px;
  width:min(82vw,260px);
  display:flex;
  flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 20px 30px #17202725}
.mobile-menu nav a {
  padding:15px;
  border-bottom:1px solid var(--line)}
.hero {
  min-height:auto}
.hero-grid {
  grid-template-columns:1fr;
  gap:45px;
  padding-block:80px}
.hero h1 {
  font-size:clamp(3.05rem,10vw,5rem)}
.hero-diagram {
  max-height:none;
  margin:0}
.hero-actions {
  flex-wrap:wrap}
.section {
  padding-block:78px}
.service-row {
  grid-template-columns:45px 1fr;
  gap:12px 15px}
.service-row p {
  grid-column:2}
.approach-grid,.contact-grid {
  grid-template-columns:1fr;
  gap:15px}
.contact-preview {
  padding-block:78px}
.footer-top {
  display:block}
.footer-top>a {
  display:inline-block;
  margin-top:28px}
.footer-bottom {
  display:block}
.footer-bottom span {
  display:block;
  margin-bottom:6px}
}
@media(max-width:420px) {
  .hero-actions {
  display:grid;
  gap:22px}
.button {
  width:100%}
.hero h1 {
  font-size:3rem}
.diagram-row {
  padding-block:17px}
}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
.button {
  transition:none}
.button:hover {
  transform:none}
}