/* Layout: one page, two paths (clients, firm owners), opened by how XLN works. XLN brand board: charcoal, burnt orange, light gray, white; Montserrat.
   Deliberately single-theme: the brand system is light, so every color is set explicitly. */
:root {
  --charcoal: #1F1F1F;
  --orange: #D14A00;
  --orange-dark: #B83F00;
  --gray: #E9E9E9;
  --white: #FFFFFF;
  --soft: #5A5A5A;
  --rule: #D9D9D9;
  --tint: #F5F5F4;
  --field: #BDBDBD;
  --ok: #1E6B3A;

  --font: "Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --wrap: 1120px;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--white); color: var(--charcoal); font-family: var(--font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--white); }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
[id] { scroll-margin-top: 84px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 760px) { .wrap { padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)); } }

.logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--charcoal); }
.logo svg { height: 26px; width: auto; aspect-ratio: 116 / 40; display: block; }
.label { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); }

/* Header */
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: var(--white); border-bottom: 1px solid var(--rule); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.site-nav { display: flex; align-items: center; gap: 26px; font-size: 0.9rem; font-weight: 500; }
.site-nav a:not(.btn) { text-decoration: none; color: var(--soft); }
.site-nav a:not(.btn):hover { color: var(--charcoal); }
@media (max-width: 860px) { .site-nav a:not(.btn) { display: none; } }

/* Buttons */
.btn { display: inline-block; font: 700 0.92rem var(--font); letter-spacing: 0.01em; text-decoration: none; padding: 13px 22px; border-radius: 2px; border: 2px solid var(--orange); background: var(--orange); color: var(--white); cursor: pointer; text-align: center; }
.btn:hover { background: var(--orange-dark); border-color: var(--orange-dark); }
.btn.ghost { background: transparent; color: var(--charcoal); border-color: var(--charcoal); }
.btn.ghost:hover { background: var(--charcoal); color: var(--white); }
.btn.small { padding: 9px 16px; font-size: 0.85rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Hero */
.hero .wrap { display: grid; gap: 44px; padding-block: 64px 72px; }
@media (min-width: 920px) { .hero .wrap { padding-block: 96px 96px; } }
.hero-copy { display: grid; gap: 20px; max-width: 820px; }
.hero h1 { font-size: clamp(2.3rem, 1.5rem + 3.4vw, 3.8rem); line-height: 1.04; font-weight: 800; letter-spacing: -0.02em; }
.hero h1 .accent { color: var(--orange); }
.hero .lede { font-size: 1.12rem; color: var(--soft); max-width: 38em; }
.doors { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .doors { grid-template-columns: 1fr 1fr; } }
.door { border: 1px solid var(--rule); border-top: 4px solid var(--charcoal); padding: 26px; display: grid; gap: 10px; align-content: start; text-decoration: none; background: var(--white); min-width: 0; }
.door:hover { border-top-color: var(--orange); }
.door .who { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); }
.door h2 { font-size: 1.35rem; font-weight: 700; }
.door p { color: var(--soft); }
.door .go { font-weight: 700; font-size: 0.92rem; }

/* Sections */
.section { border-top: 1px solid var(--rule); }
.section.tinted { background: var(--tint); border-top: 0; }
.section > .wrap { padding-block: 64px; display: grid; gap: 36px; }
@media (min-width: 920px) { .section > .wrap { padding-block: 88px; } }
.section-head { display: grid; gap: 12px; max-width: 48em; }
.section-head h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.section-head p { color: var(--soft); font-size: 1.05rem; }

.items { display: grid; grid-template-columns: 1fr; gap: 0 40px; }
@media (min-width: 640px) { .items.two { grid-template-columns: 1fr 1fr; } .items.three { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .items.three { grid-template-columns: repeat(3, 1fr); } }
.item { border-top: 2px solid var(--charcoal); padding-block: 18px 26px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.item h3 { font-size: 1.05rem; font-weight: 700; }
.item p { color: var(--soft); font-size: 0.97rem; }

/* Model */
.model { display: grid; grid-template-columns: 1fr; gap: 28px 56px; align-items: start; }
@media (min-width: 920px) { .model { grid-template-columns: 1fr 1fr; } }
.split { display: grid; grid-template-columns: 1fr; border: 1px solid var(--rule); background: var(--white); min-width: 0; }
@media (min-width: 520px) { .split { grid-template-columns: 1fr 1fr; } }
.split > div { padding: 22px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.split > div + div { border-top: 1px solid var(--rule); }
@media (min-width: 520px) { .split > div + div { border-top: 0; border-left: 1px solid var(--rule); } }
.split .who { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.split .tech { background: var(--tint); }
.split .tech .who { color: var(--soft); }
.split .people .who { color: var(--orange); }
.split ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.95rem; font-weight: 500; }
.split li { padding-left: 16px; position: relative; }
.split li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 8px; border-top: 2px solid currentColor; opacity: 0.4; }
.split .people li::before { border-color: var(--orange); opacity: 1; }
.benefits { border-top: 2px solid var(--charcoal); }
.benefits .item { border-top: 0; }
.benefits .item h3 { font-family: var(--mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); }
.benefits .item p { color: var(--charcoal); font-weight: 500; font-size: 1.02rem; }

/* Services + steps */
.services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0 32px; }
@media (min-width: 640px) { .services { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .services { grid-template-columns: repeat(3, 1fr); } }
.services li { border-top: 1px solid var(--rule); padding-block: 14px 16px; display: grid; gap: 2px; }
.services strong { font-weight: 700; }
.services span { color: var(--soft); font-size: 0.93rem; }
.fineprint { font-size: 0.85rem; color: var(--soft); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 0 28px; } }
.steps li { counter-increment: step; border-top: 2px solid var(--charcoal); padding-block: 16px 24px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--mono); font-size: 0.8rem; font-weight: 500; color: var(--orange); }
.steps h3 { font-size: 1rem; font-weight: 700; }
.steps p { color: var(--soft); font-size: 0.94rem; }

/* Quote form */
.quote { display: grid; grid-template-columns: 1fr; gap: 32px 56px; align-items: start; }
@media (min-width: 1000px) { .quote { grid-template-columns: 0.7fr 1.3fr; } }
.quote-intro { display: grid; gap: 16px; min-width: 0; }
@media (min-width: 1000px) { .quote-intro { position: sticky; top: 100px; } }
.quote-intro h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem); font-weight: 800; line-height: 1.12; }
.quote-intro p { color: var(--soft); font-size: 1.02rem; }
.quote-intro .ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.quote-intro .ticks li { padding-left: 24px; position: relative; font-weight: 500; font-size: 0.95rem; }
.quote-intro .ticks li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 11px; height: 11px; border: 2px solid var(--orange); }

form.qf { background: var(--white); border: 1px solid var(--rule); padding: 8px 24px 28px; display: grid; gap: 4px; min-width: 0; }
@media (min-width: 640px) { form.qf { padding: 12px 32px 32px; } }
fieldset { border: 0; margin: 0; padding: 20px 0 22px; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 1fr; gap: 16px 18px; min-width: 0; }
@media (min-width: 640px) { fieldset { grid-template-columns: repeat(6, 1fr); } }
legend { float: left; width: 100%; padding: 0 0 4px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); grid-column: 1 / -1; }
legend + * { clear: both; }
.field { display: grid; gap: 6px; min-width: 0; grid-column: 1 / -1; align-content: start; }
@media (min-width: 640px) {
  .c2 { grid-column: span 2; } .c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c6 { grid-column: 1 / -1; }
}
.field > label, .field > .flabel { font-size: 0.86rem; font-weight: 600; }
.opt { font-weight: 400; color: var(--soft); }
.hint { font-size: 0.8rem; color: var(--soft); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="date"], .field select, .field textarea {
  font: 500 16px var(--font); color: var(--charcoal); background: var(--white);
  border: 1px solid var(--field); border-radius: 2px; padding: 11px 12px; width: 100%; min-width: 0;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input[type="file"] { font: 500 0.88rem var(--font); padding: 10px; border: 1px dashed var(--field); background: var(--tint); width: 100%; }
.field.bad input, .field.bad select, .field.bad textarea { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.err { font-size: 0.8rem; color: var(--orange-dark); font-weight: 600; }

.choice { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 560px) { .choice { grid-template-columns: repeat(3, 1fr); } }
.choice label { position: relative; display: grid; gap: 2px; border: 1px solid var(--field); padding: 12px 14px 12px 40px; cursor: pointer; border-radius: 2px; }
.choice input { position: absolute; left: 14px; top: 15px; accent-color: var(--orange); width: 16px; height: 16px; margin: 0; }
.choice b { font-weight: 700; font-size: 0.92rem; }
.choice span { font-size: 0.8rem; color: var(--soft); }
.choice label:has(input:checked) { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }

.or { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }

.submit-row { display: grid; gap: 14px; padding-top: 22px; }
.consent { font-size: 0.82rem; color: var(--soft); }
.consent a { color: var(--charcoal); }
.submit-row .btn { justify-self: start; min-width: 200px; }
.form-msg { font-size: 0.92rem; padding: 12px 14px; border-left: 3px solid var(--orange); background: var(--tint); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.done { border: 1px solid var(--rule); padding: 32px; display: grid; gap: 14px; background: var(--white); }
.done h3 { font-size: 1.4rem; font-weight: 800; }
.done p { color: var(--soft); }
.done .note { font-size: 0.85rem; border-left: 3px solid var(--orange); padding-left: 12px; }

/* Owners */
.track { display: grid; grid-template-columns: 1fr; gap: 28px 56px; }
@media (min-width: 920px) { .track { grid-template-columns: 0.9fr 1.1fr; } }
.track > div { min-width: 0; display: grid; gap: 16px; align-content: start; }
.track h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem); font-weight: 700; line-height: 1.15; }
.track p { color: var(--soft); font-size: 1.05rem; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ticks li { position: relative; padding-left: 26px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 12px; height: 12px; border: 2px solid var(--orange); }
.ticks li strong { display: block; font-weight: 700; }
.ticks li span { color: var(--soft); font-size: 0.95rem; }
.mini-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; counter-reset: s; border-top: 2px solid var(--charcoal); }
@media (min-width: 640px) { .mini-steps { grid-template-columns: repeat(5, 1fr); gap: 0 20px; } }
.mini-steps li { counter-increment: s; padding-block: 14px 8px; display: grid; gap: 4px; align-content: start; font-weight: 600; font-size: 0.92rem; min-width: 0; }
.mini-steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--mono); font-weight: 500; font-size: 0.78rem; color: var(--orange); }

/* About */
.statement { display: grid; grid-template-columns: 1fr; gap: 20px 56px; align-items: start; }
@media (min-width: 920px) { .statement { grid-template-columns: 1fr 1fr; } }
.statement h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 700; line-height: 1.18; }
.facts { margin: 0; display: grid; border-top: 1px solid var(--rule); }
.facts > div { display: grid; grid-template-columns: 1fr; gap: 2px 24px; padding-block: 12px; border-bottom: 1px solid var(--rule); }
@media (min-width: 560px) { .facts > div { grid-template-columns: 170px 1fr; } }
.facts dt { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); padding-top: 3px; }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }

/* Band + footer */
.band { background: var(--charcoal); color: var(--white); }
.band .wrap { padding-block: 72px 80px; display: grid; gap: 20px; }
.band .label { color: #FF7A33; }
.band h2 { font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.7rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; max-width: 22em; }
.band p { color: #C9C9C9; max-width: 40em; font-size: 1.05rem; }
.band .actions .btn.ghost { color: var(--white); border-color: var(--white); }
.band .actions .btn.ghost:hover { background: var(--white); color: var(--charcoal); }
.mail { font-family: var(--mono); font-size: clamp(1rem, 0.9rem + 0.6vw, 1.25rem); user-select: all; border-bottom: 2px solid var(--orange); padding-bottom: 2px; justify-self: start; overflow-wrap: anywhere; }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 28px; padding-block: 26px 32px; font-size: 0.85rem; color: var(--soft); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--charcoal); }

/* ---- Multi-page additions ---- */
.logo img { height: 26px; width: auto; display: block; }
.site-nav a[aria-current="page"] { color: var(--charcoal); font-weight: 700; }

.page-hero .wrap { display: grid; gap: 18px; padding-block: 56px 48px; }
@media (min-width: 920px) { .page-hero .wrap { padding-block: 80px 56px; } }
.page-hero h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); line-height: 1.06; font-weight: 800; letter-spacing: -0.02em; max-width: 18em; }
.page-hero h1 .accent { color: var(--orange); }
.page-hero .lede { font-size: 1.1rem; color: var(--soft); max-width: 40em; }

.hero.split-hero .wrap { grid-template-columns: 1fr; align-items: center; }
@media (min-width: 920px) { .hero.split-hero .wrap { grid-template-columns: 1.1fr 0.9fr; gap: 64px; } }
.panel { min-width: 0; border: 1px solid var(--rule); background: var(--tint); padding: 28px; display: grid; gap: 16px; }
.panel h2 { font-size: 1.05rem; font-weight: 700; }

.ledger { display: grid; grid-template-columns: 1fr; gap: 28px 48px; }
@media (min-width: 640px) { .ledger { grid-template-columns: 1fr 1fr; } }
.ledger > div { display: grid; gap: 12px; align-content: start; min-width: 0; }
.ledger h3 { font-family: var(--mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding-bottom: 10px; border-bottom: 2px solid var(--charcoal); }
.ledger ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ledger li { padding-left: 22px; position: relative; }
.ledger li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 12px; border-top: 2px solid var(--orange); }

@media (min-width: 760px) { .steps.five { grid-template-columns: repeat(5, 1fr); gap: 0 24px; } }

.teaser .wrap { display: grid; grid-template-columns: 1fr; gap: 20px 56px; padding-block: 64px; align-items: center; }
@media (min-width: 920px) { .teaser .wrap { grid-template-columns: 1.2fr 0.8fr; padding-block: 80px; } }
.teaser h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem); font-weight: 700; line-height: 1.15; }
.teaser p { color: var(--soft); font-size: 1.05rem; max-width: 38em; }
.teaser .actions { justify-content: flex-start; }
@media (min-width: 920px) { .teaser .actions { justify-content: flex-end; } }

.doc .wrap { padding-block: 24px 88px; }
.doc article { max-width: 720px; display: grid; gap: 14px; }
.doc h2 { font-size: 1.2rem; font-weight: 700; margin-top: 22px; }
.doc p, .doc li { color: #333333; }
.doc ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.doc .meta { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); }