@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --ink: #111111;
  --muted: #686866;
  --line: #dcdcd8;
  --paper: #f5f5f1;
  --white: #fbfbf8;
  --soft: #e9e9e4;
  --max: 1240px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, Arial, sans-serif; font-weight: 400; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(calc(100% - 64px), var(--max)); margin: 0 auto; }
.site-header { position: sticky; top: 0; z-index: 10; background: var(--ink); color: var(--white); }
.nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand-mark { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 0; }
.brand-mark img { height: 42px; width: auto; display: block; } /* Century 21 lockup */
.brand-mark--footer img { height: 36px; } /* Century 21 lockup */
.nav-links { display: flex; align-items: center; gap: 30px; font-size: 13px; color: #d4d4d0; }
.nav-links a { transition: color .2s ease; }
.nav-links a:hover, .nav-links a[aria-current] { color: #fff; }
.nav-cta, .button { display: inline-flex; align-items: center; justify-content: center; min-height: 45px; padding: 0 22px; border: 1px solid var(--ink); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; transition: background .2s, color .2s, border .2s; }
.nav-cta { min-height: 40px; border-color: #ededeb; color: var(--white); }
.nav-cta:hover { background: var(--white); color: var(--ink); }
.button-dark { background: var(--ink); color: var(--white); }
.button-dark:hover { background: #3b3b38; border-color: #3b3b38; }
.button-light { background: transparent; color: var(--ink); }
.button-light:hover { background: var(--ink); color: var(--white); }
.menu-toggle { display:none; border:0; background:none; color: white; padding: 10px 0; font: inherit; font-size: 12px; letter-spacing:.12em; text-transform:uppercase; }
.eyebrow { margin: 0 0 23px; color: var(--muted); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.hero { padding: 122px 0 126px; border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(260px, .78fr); gap: 90px; align-items: end; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 850px; margin-bottom: 31px; font-size: clamp(43px, 6vw, 76px); line-height: .99; font-weight: 300; letter-spacing: -.055em; }
.hero-lead { max-width: 570px; color: #464643; font-size: 17px; line-height: 1.65; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 33px; }
.hero-note { align-self: end; border-top: 1px solid var(--ink); padding-top: 17px; color: var(--muted); font-size: 13px; }
.hero-note strong { display: block; margin-bottom: 8px; color: var(--ink); font-weight: 500; }
.section { padding: 105px 0; border-bottom: 1px solid var(--line); }
.section-compact { padding: 78px 0; }
.section-head { display: grid; grid-template-columns: minmax(190px, .35fr) 1fr; gap: 80px; margin-bottom: 55px; }
.section-head h2 { max-width: 730px; margin: 0; font-size: clamp(29px, 4vw, 50px); line-height: 1.05; font-weight: 300; letter-spacing: -.045em; }
.section-kicker { color: var(--muted); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; }
.numbered-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px; border-top: 1px solid var(--ink); }
.list-item { padding-top: 17px; border-top: 0; }
.list-number { margin-bottom: 35px; color: var(--muted); font-size: 12px; }
.list-item h3, .card h3 { margin-bottom: 10px; font-size: 16px; line-height: 1.2; font-weight: 500; }
.list-item p, .card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.card { min-height: 285px; padding: 28px; background: var(--paper); display: flex; flex-direction: column; justify-content: space-between; }
.card-index { margin-bottom: 70px; color: var(--muted); font-size: 12px; }
.card h3 { font-size: 22px; font-weight: 400; letter-spacing: -.02em; }
.card p { max-width: 290px; }
.people-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.person { padding: 25px 23px 29px; min-height: 220px; background: var(--paper); }
.person h3 { max-width: 190px; margin: 54px 0 13px; font-size: 18px; line-height: 1.15; font-weight: 400; letter-spacing: -.02em; }
.person p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; }
.split h2 { max-width: 510px; margin-bottom: 24px; font-size: clamp(30px, 4vw, 51px); font-weight: 300; line-height: 1.04; letter-spacing: -.05em; }
.split p { max-width: 550px; color: var(--muted); font-size: 16px; }
.path { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.path li { display: grid; grid-template-columns: 42px 1fr; gap: 16px; padding: 17px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.path li span { color: var(--muted); font-size: 12px; }
.fee-box { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: center; padding: 48px; background: var(--ink); color: var(--white); }
.fee-box .eyebrow { color: #a8a8a3; }
.fee-box h2 { margin: 0; font-size: clamp(30px, 4vw, 52px); line-height: 1; font-weight: 300; letter-spacing: -.05em; }
.fee-box p { max-width: 570px; margin: 0; color: #cacac5; font-size: 15px; }
.cta-section { padding: 112px 0 132px; }
.cta-section h2 { max-width: 650px; margin-bottom: 20px; font-size: clamp(38px, 5vw, 64px); line-height: 1; font-weight: 300; letter-spacing: -.06em; }
.cta-section p { max-width: 470px; color: var(--muted); }
.site-footer { padding: 33px 0 35px; background: var(--ink); color: #c3c3be; font-size: 11px; }
.footer-top { display:flex; justify-content:space-between; gap:30px; padding-bottom: 32px; border-bottom:1px solid #353533; }
.footer-links { display:flex; flex-wrap:wrap; gap:18px; color:#e6e6e2; }
.footer-bottom { display:flex; justify-content:space-between; gap:30px; padding-top: 18px; }
.footer-legal { color:#8f8f8b; }
.page-hero { padding: 112px 0 105px; border-bottom: 1px solid var(--line); }
.page-hero-grid { display:grid; grid-template-columns: minmax(0, .95fr) minmax(280px, .65fr); gap: 100px; align-items:end; }
.page-hero h1 { max-width: 760px; margin-bottom: 24px; font-size: clamp(45px, 6.5vw, 80px); }
.page-hero .lead { max-width: 550px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.page-aside { border-top: 1px solid var(--ink); padding-top: 18px; font-size: 13px; color: var(--muted); }
.page-aside strong { display:block; margin-bottom: 8px; color:var(--ink); font-weight:500; }
.service-body { display:grid; grid-template-columns: .62fr 1fr; gap: 110px; }
.service-body h2 { margin:0; font-size: 31px; font-weight:300; line-height:1.05; letter-spacing:-.04em; }
.service-body p { color:var(--muted); font-size:15px; }
.service-list { margin:0; padding:0; list-style:none; border-top:1px solid var(--ink); }
.service-list li { display:grid; grid-template-columns: 34px 1fr; gap:15px; padding:20px 0; border-bottom:1px solid var(--line); }
.service-list span { color:var(--muted); font-size:12px; }
.service-list strong { display:block; margin-bottom:6px; font-size:15px; font-weight:500; }
.service-list p { margin:0; font-size:14px; }
.quote { padding: 80px 0; background: var(--soft); }
.quote p { max-width: 840px; margin:0; font-size: clamp(25px, 3.2vw, 42px); line-height:1.12; font-weight:300; letter-spacing:-.04em; }
.about-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:100px; }
.about-grid h2 { font-size:30px; font-weight:300; letter-spacing:-.04em; line-height:1.08; }
.about-grid p { color:var(--muted); font-size:16px; }
.standards { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; margin-top:50px; padding-top:17px; border-top:1px solid var(--ink); }
.standard { font-size:13px; }
.standard span { display:block; margin-bottom:15px; color:var(--muted); font-size:11px; }
.form-wrap { display:grid; grid-template-columns:.65fr 1.35fr; gap:110px; }
.form-intro h2 { margin:0 0 20px; font-size:35px; font-weight:300; line-height:1.05; letter-spacing:-.045em; }
.form-intro p { color:var(--muted); font-size:15px; }
form { border-top:1px solid var(--ink); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field { padding:22px 0 0; }
label { display:block; margin-bottom:8px; font-size:11px; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; }
input, select, textarea { width:100%; border:1px solid #bebeba; border-radius:0; background:transparent; color:var(--ink); padding:13px 12px; font:inherit; font-size:14px; outline:none; }
input:focus, select:focus, textarea:focus { border-color:var(--ink); }
textarea { min-height:145px; resize:vertical; }
.form-note { margin:17px 0 0; color:var(--muted); font-size:12px; }
.form-submit { margin-top:25px; }
.stub { max-width:740px; padding:100px 0 130px; }
.stub h1 { font-size:55px; }
.stub p { color:var(--muted); }
@media (max-width: 900px) {
  .container { width:min(calc(100% - 40px), var(--max)); }
  .nav { min-height:78px; }
  .menu-toggle { display:block; }
  .brand-mark img { height: 34px; }
  .brand-mark--footer img { height: 30px; }
  .nav-links { display:none; position:absolute; left:0; right:0; top:78px; padding:20px; background:var(--ink); flex-direction:column; align-items:flex-start; gap:18px; border-top:1px solid #30302f; }
  .nav-links.open { display:flex; }
  .hero-grid, .page-hero-grid, .split, .about-grid, .form-wrap, .service-body { grid-template-columns:1fr; gap:45px; }
  .hero { padding:85px 0 90px; }
  .section { padding:80px 0; }
  .section-head { grid-template-columns:1fr; gap:20px; margin-bottom:38px; }
  .numbered-list { grid-template-columns:1fr 1fr; }
  .people-grid { grid-template-columns:1fr 1fr; }
  .fee-box { grid-template-columns:1fr; gap:28px; padding:32px; }
  .standards { grid-template-columns:repeat(3,1fr); row-gap:28px; }
  .page-hero { padding:80px 0; }
}
@media (max-width: 560px) {
  .container { width:min(calc(100% - 32px), var(--max)); }
  h1, .page-hero h1 { font-size:45px; }
  .numbered-list, .people-grid, .cards { grid-template-columns:1fr; }
  .card { min-height:220px; }
  .card-index { margin-bottom:45px; }
  .person { min-height:180px; }
  .person h3 { margin-top:35px; }
  .form-row { grid-template-columns:1fr; gap:0; }
  .footer-top, .footer-bottom { flex-direction:column; }
  .standards { grid-template-columns:1fr 1fr; }
}

/* v0.3 enquiry form and credentials (draft) */
.next-steps { list-style:none; margin:30px 0 0; padding:0; border-top:1px solid var(--line); }
.next-steps li { display:grid; grid-template-columns:34px 1fr; gap:10px; padding:14px 0; border-bottom:1px solid var(--line); font-size:14px; color:var(--muted); }
.next-steps li span { font-size:11px; letter-spacing:.12em; color:var(--muted); padding-top:2px; }
.next-steps strong { color:var(--ink); font-weight:500; }
.checks { display:grid; gap:12px; }
label.check { display:flex; gap:12px; align-items:flex-start; margin:0; font-size:13px; letter-spacing:0; text-transform:none; color:var(--ink); line-height:1.5; }
label.check input { width:18px; height:18px; flex:0 0 18px; margin:2px 0 0; padding:0; accent-color:var(--ink); }
label.check a, .form-note a, .cred a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.cred { max-width:860px; padding:90px 0 120px; }
.cred h1 { font-size:55px; margin-bottom:18px; }
.cred h2 { margin:52px 0 14px; font-size:24px; font-weight:400; letter-spacing:-.02em; }
.cred p, .cred li { color:var(--muted); }
.cred table { width:100%; border-collapse:collapse; margin-top:10px; font-size:14px; }
.cred th, .cred td { text-align:left; padding:13px 10px 13px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.cred th { width:38%; font-weight:500; color:var(--ink); }
.cred .tbc { color:var(--ink); background:#f1f1ee; padding:1px 6px; font-size:12px; }