:root {
  --color-primary: #0f3f2e;
  --color-primary-2: #15583f;
  --color-primary-3: #1f6a4c;
  --color-accent: #dfe9df;
  --color-accent-2: #eef4ed;
  --color-ink: #14231b;
  --color-muted: #637068;
  --color-line: #d9e1d8;
  --color-bg: #fbfcf8;
  --color-bg-soft: #f2f6f0;
  --color-white: #ffffff;
  --shadow-sm: 0 8px 24px rgba(15, 63, 46, .08);
  --shadow-md: 0 18px 48px rgba(15, 63, 46, .14);
  --radius: 20px;
  --radius-sm: 14px;
  --container: 1160px;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family: var(--font-sans); color: var(--color-ink); background: var(--color-bg); line-height:1.6; }
a { color: inherit; text-decoration: none; }
img { max-width:100%; display:block; }
.container { width:min(var(--container), calc(100% - 40px)); margin-inline:auto; }
.narrow { max-width:820px; }
.section { padding:76px 0; }
.section-tight { padding:54px 0 42px; }
.section-soft { background: var(--color-bg-soft); }
.section-heading { text-align:center; margin-bottom:36px; }
.section-heading.compact { max-width:780px; margin-inline:auto; }
.eyebrow { margin:0 0 10px; color:var(--color-primary-3); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.77rem; }
h1,h2,h3 { line-height:1.1; margin:0 0 16px; color:var(--color-primary); }
h1 { font-family:var(--font-serif); font-size:clamp(2.4rem, 5vw, 5.1rem); letter-spacing:-.045em; }
h2 { font-family:var(--font-serif); font-size:clamp(2rem, 3.3vw, 3.2rem); letter-spacing:-.035em; }
h3 { font-size:1.18rem; }
p { margin:0 0 16px; }
.lead { font-size:1.12rem; color:var(--color-muted); max-width:640px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 20px; border-radius:999px; font-weight:700; border:1px solid transparent; transition:.2s ease; gap:8px; cursor:pointer; white-space:nowrap; }
.btn-primary { background:var(--color-primary); color:#fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background:var(--color-primary-2); transform:translateY(-1px); }
.btn-secondary { border-color:var(--color-primary); color:var(--color-primary); background:#fff; }
.btn-secondary:hover { background:var(--color-accent-2); }
.btn-light { background:#fff; color:var(--color-primary); border-color:rgba(255,255,255,.6); }
.button-row { display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.site-header { position:sticky; top:0; z-index:50; background:rgba(251,252,248,.9); backdrop-filter: blur(16px); border-bottom:1px solid rgba(217,225,216,.85); }
.nav-wrap { display:flex; align-items:center; justify-content:space-between; min-height:82px; gap:24px; }
.brand img { width:215px; height:auto; }
.site-nav { display:flex; align-items:center; gap:8px; }
.nav-link { color:#293b31; font-weight:650; padding:10px 12px; border-radius:999px; font-size:.94rem; }
.nav-link:hover,.nav-link.is-active { background:var(--color-accent-2); color:var(--color-primary); }
.nav-cta { margin-left:8px; }
.nav-toggle { display:none; width:44px; height:44px; border:1px solid var(--color-line); background:#fff; border-radius:12px; padding:10px; }
.nav-toggle span { display:block; height:2px; background:var(--color-primary); margin:5px 0; border-radius:999px; }
.hero { overflow:hidden; background: radial-gradient(circle at 85% 15%, rgba(31,106,76,.11), transparent 36%), linear-gradient(180deg, #fff 0%, var(--color-bg) 100%); }
.hero-grid { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(320px, .95fr); gap:54px; align-items:center; }
.hero-panel { min-height:440px; border-radius:30px; padding:26px; position:relative; background:linear-gradient(145deg, var(--color-primary) 0%, #173c2e 54%, #e7eee8 54%, #fff 100%); box-shadow:var(--shadow-md); overflow:hidden; }
.hero-panel:after { content:""; position:absolute; width:260px; height:260px; right:-60px; top:-70px; border-radius:50%; background:rgba(255,255,255,.17); }
.panel-card { position:relative; z-index:2; background:rgba(255,255,255,.94); border:1px solid rgba(255,255,255,.7); border-radius:22px; padding:28px; max-width:390px; box-shadow:var(--shadow-md); }
.panel-card-main h2 { font-family:var(--font-serif); font-size:2rem; color:var(--color-primary); }
.mini-label { text-transform:uppercase; color:var(--color-primary-3); letter-spacing:.12em; font-weight:800; font-size:.75rem; }
.strategy-lines { display:grid; gap:10px; margin-top:18px; }
.strategy-lines span { border:1px solid var(--color-line); border-radius:999px; padding:10px 14px; background:#fff; color:var(--color-primary); font-weight:700; }
.panel-badge { position:absolute; z-index:3; right:24px; bottom:98px; background:#fff; border-radius:999px; padding:12px 18px; color:var(--color-primary); font-weight:800; box-shadow:var(--shadow-sm); }
.panel-badge-alt { bottom:34px; right:74px; background:var(--color-primary); color:#fff; border:1px solid rgba(255,255,255,.2); }
.lender-strip { padding:28px 0 34px; background:#fff; border-top:1px solid var(--color-line); border-bottom:1px solid var(--color-line); }
.lender-strip p { text-align:center; color:var(--color-primary); font-weight:750; margin-bottom:20px; }
.lender-strip .lender-note { margin:18px 0 0; color:var(--color-muted); font-weight:600; font-size:.94rem; }
.lender-grid { display:grid; grid-template-columns:repeat(7, minmax(90px,1fr)); gap:14px; align-items:center; }
.lender-logo { height:74px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--color-line); border-radius:16px; padding:12px 16px; filter:saturate(.9); opacity:.82; transition:.2s ease; }
.lender-logo:hover { opacity:1; transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.lender-logo img { max-height:42px; max-width:136px; object-fit:contain; }
.card-grid { display:grid; gap:20px; }
.services-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
.card { background:#fff; border:1px solid var(--color-line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm); }
.service-card { position:relative; overflow:hidden; min-height:230px; }
.service-card:before { content:""; position:absolute; right:-42px; top:-42px; width:118px; height:118px; border-radius:50%; background:var(--color-accent-2); }
.card-number { display:inline-flex; width:40px; height:40px; border-radius:50%; align-items:center; justify-content:center; background:var(--color-primary); color:#fff; font-weight:800; margin-bottom:18px; }
.process-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.process-card { background:#fff; border:1px solid var(--color-line); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow-sm); position:relative; }
.process-card span { display:inline-grid; place-items:center; width:44px; height:44px; border-radius:14px; background:var(--color-primary); color:#fff; font-weight:900; margin-bottom:18px; }
.cta-section { padding:68px 0; }
.cta-section.slim { padding-top:42px; }
.cta-card { background:linear-gradient(135deg, var(--color-primary), var(--color-primary-2)); color:#fff; border-radius:28px; padding:38px; display:flex; justify-content:space-between; align-items:center; gap:28px; box-shadow:var(--shadow-md); }
.cta-card h2, .cta-card .eyebrow { color:#fff; }
.cta-card p { color:rgba(255,255,255,.82); max-width:680px; }
.site-footer { background:#0f251d; color:rgba(255,255,255,.78); padding:52px 0 28px; }
.footer-grid { display:grid; grid-template-columns:1.3fr .8fr 1.25fr 1fr; gap:34px; }
.footer-brand img { width:190px; margin-bottom:18px; filter:brightness(0) invert(1); opacity:.92; }
.footer-col h3 { color:#fff; font-size:1rem; margin-bottom:12px; }
.footer-col a { display:block; margin:8px 0; color:rgba(255,255,255,.82); }
.footer-col a:hover { color:#fff; }
.footer-col p { font-size:.92rem; }
.footer-disclaimer { border-top:1px solid rgba(255,255,255,.12); margin-top:38px; padding-top:22px; font-size:.78rem; color:rgba(255,255,255,.58); }
.page-hero { padding:70px 0 54px; background:linear-gradient(180deg, #fff 0%, var(--color-bg-soft) 100%); text-align:center; }
.page-hero p { font-size:1.1rem; color:var(--color-muted); }
.split-cards { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px; }
.goal-card { min-height:420px; }
.goal-card.dark-accent { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.goal-card.dark-accent h3 { color:#fff; }
.goal-card.dark-accent p,.goal-card.dark-accent li { color:rgba(255,255,255,.86); }
.check-list { list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px; }
.check-list li { position:relative; padding-left:28px; }
.check-list li:before { content:"✓"; position:absolute; left:0; top:0; color:var(--color-primary-3); font-weight:900; }
.dark-accent .check-list li:before { color:#b9ddc4; }
.two-column { display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; align-items:center; }
.reverse-on-mobile { grid-template-columns:1.15fr .85fr; }
.section-copy p { color:var(--color-muted); }
.tile-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.tile-list li { background:#fff; border:1px solid var(--color-line); border-radius:16px; padding:16px 18px; font-weight:750; color:var(--color-primary); box-shadow:var(--shadow-sm); }
.support-panel { background:#fff; border:1px solid var(--color-line); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow-sm); }
.check-list.large li { padding:14px 14px 14px 42px; border-bottom:1px solid var(--color-line); }
.check-list.large li:last-child { border-bottom:0; }
.check-list.large li:before { left:12px; top:14px; }
.calculator-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.calculator-card { background:#fff; border:1px solid var(--color-line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm); }
.calc-form, .contact-form { display:grid; gap:14px; }
.calc-form label, .contact-form label { display:grid; gap:7px; font-weight:700; color:var(--color-primary); font-size:.94rem; }
input, select, textarea { width:100%; border:1px solid var(--color-line); border-radius:12px; padding:12px 13px; font:inherit; background:#fff; color:var(--color-ink); }
input:focus, select:focus, textarea:focus { outline:3px solid rgba(31,106,76,.16); border-color:var(--color-primary-3); }
input.is-invalid, textarea.is-invalid { border-color:#b84a3b; background:#fffafa; }
input.is-invalid:focus, textarea.is-invalid:focus { outline-color:rgba(184,74,59,.16); border-color:#b84a3b; }
.calc-result { margin-top:18px; padding:16px; border-radius:16px; background:var(--color-accent-2); color:var(--color-primary); display:none; }
.calc-result.is-visible { display:block; }
.calc-result strong { display:block; font-size:1.4rem; margin:4px 0; }
.notice-box { margin-top:22px; background:var(--color-accent-2); border:1px solid var(--color-line); border-radius:var(--radius); padding:24px; }
.faq-list { display:grid; gap:12px; }
.faq-item { background:#fff; border:1px solid var(--color-line); border-radius:16px; padding:0 18px; box-shadow:var(--shadow-sm); }
.faq-item summary { cursor:pointer; font-weight:800; color:var(--color-primary); padding:17px 0; }
.faq-item p { color:var(--color-muted); padding-bottom:18px; }
.contact-hero .btn { margin-top:16px; }
.contact-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:start; }
.contact-card h2 { font-family:var(--font-serif); font-size:2.2rem; }
.contact-field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.contact-form .btn { justify-self:start; }
.contact-side { display:grid; gap:18px; }
.info-card { background:#fff; border:1px solid var(--color-line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm); }
.info-card a { color:var(--color-primary); font-weight:700; overflow-wrap:anywhere; }
.form-note { margin:6px 0 0; color:var(--color-primary-3); font-weight:700; }
.form-errors { border:1px solid rgba(184,74,59,.34); border-radius:14px; padding:14px 16px; background:#fff7f5; color:#7d2f25; font-weight:650; }
.form-errors p { margin:0 0 8px; color:#7d2f25; }
.form-errors ul { margin:0; padding-left:20px; }
.form-errors li { margin:3px 0; }
@media (max-width: 980px) {
  .nav-toggle { display:block; }
  .site-nav { position:absolute; inset:82px 20px auto 20px; display:none; flex-direction:column; align-items:stretch; background:#fff; border:1px solid var(--color-line); border-radius:20px; padding:18px; box-shadow:var(--shadow-md); }
  .site-nav.is-open { display:flex; }
  .nav-link { padding:13px 14px; }
  .nav-cta { margin:8px 0 0; }
  .hero-grid, .two-column, .reverse-on-mobile, .contact-grid { grid-template-columns:1fr; }
  .hero-panel { min-height:360px; }
  .services-grid, .process-grid, .calculator-grid { grid-template-columns:1fr; }
  .lender-grid { grid-template-columns:repeat(4, minmax(80px,1fr)); }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .cta-card { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 640px) {
  .container { width:min(100% - 28px, var(--container)); }
  .section { padding:56px 0; }
  .nav-wrap { min-height:74px; }
  .brand img { width:168px; }
  .site-nav { inset:74px 14px auto 14px; }
  h1 { font-size:2.45rem; }
  .hero-panel { padding:18px; min-height:330px; }
  .panel-card-main h2 { font-size:1.5rem; }
  .panel-badge { position:static; display:inline-flex; margin:16px 10px 0 0; }
  .lender-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .split-cards, .tile-list, .footer-grid { grid-template-columns:1fr; }
  .cta-card { padding:28px; border-radius:22px; }
  .contact-field-row { grid-template-columns:1fr; }
  .contact-card, .info-card { padding:22px; }
  .contact-form .btn { justify-self:stretch; }
  .button-row .btn, .cta-card > .btn, .contact-hero .btn { max-width:100%; padding-inline:16px; font-size:.93rem; }
}

@media (max-width: 360px) {
  .container { width:min(100% - 20px, var(--container)); }
  h1 { font-size:2.18rem; }
  .button-row { gap:10px; }
  .button-row .btn, .cta-card > .btn, .contact-hero .btn { padding-inline:12px; font-size:.84rem; }
  .card, .contact-card, .info-card { padding:20px; }
}

/* Calculator update: expandable panels, right-side results and chart */
.calculator-accordion { display:grid; gap:18px; }
.calculator-panel { padding:0; overflow:hidden; }
.calculator-panel[open] { box-shadow:var(--shadow-md); }
.calculator-summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:24px 28px; color:var(--color-primary); }
.calculator-summary::-webkit-details-marker { display:none; }
.calculator-summary strong { display:block; font-size:1.22rem; margin-bottom:5px; color:var(--color-primary); }
.calculator-summary small { display:block; color:var(--color-muted); font-weight:600; line-height:1.45; }
.summary-action { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:0 14px; border:1px solid var(--color-line); border-radius:999px; font-size:.86rem; font-weight:800; background:var(--color-accent-2); color:var(--color-primary); }
.calculator-panel[open] .summary-action { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.calculator-panel[open] .summary-action::before { content:"Close "; }
.calculator-body { border-top:1px solid var(--color-line); padding:28px; display:grid; grid-template-columns:minmax(280px, .82fr) minmax(360px, 1.18fr); gap:24px; align-items:start; background:linear-gradient(180deg, #fff 0%, rgba(242,246,240,.42) 100%); }
.calculator-body > *, .calc-result-panel, .income-table-wrap { min-width:0; max-width:100%; }
.calc-entry { background:#fff; border:1px solid var(--color-line); border-radius:18px; padding:20px; box-shadow:var(--shadow-sm); }
.calc-output { display:grid; gap:16px; }
.field-row { display:grid; gap:14px; }
.field-row.two-up { grid-template-columns:1fr 1fr; }
.calc-result-panel { margin-top:0; display:block; background:#fff; border:1px solid var(--color-line); color:var(--color-primary); box-shadow:var(--shadow-sm); }
.calc-result-panel.is-placeholder { color:var(--color-muted); background:var(--color-accent-2); }
.calc-result-panel .result-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.result-item { border:1px solid var(--color-line); border-radius:14px; padding:14px; background:var(--color-accent-2); }
.result-item.full { grid-column:1 / -1; }
.result-item span { display:block; font-size:.8rem; color:var(--color-muted); font-weight:800; text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; }
.result-item strong { color:var(--color-primary); font-size:1.2rem; margin:0; }
.result-item.highlight { background:linear-gradient(135deg, var(--color-primary), var(--color-primary-2)); border-color:var(--color-primary); box-shadow:0 14px 30px rgba(15, 63, 46, .18); }
.result-item.highlight span, .result-item.highlight strong { color:#fff; }
.result-item.highlight strong { font-size:1.38rem; }
.result-note { margin:12px 0 0; color:var(--color-muted); font-size:.9rem; }
.chart-card { display:none; position:relative; background:#fff; border:1px solid var(--color-line); border-radius:18px; padding:18px; box-shadow:var(--shadow-sm); }
.chart-card.is-visible { display:block; }
.chart-heading { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; margin-bottom:12px; }
.chart-heading h4 { color:var(--color-primary); margin:0; font-size:1rem; }
.chart-heading p { color:var(--color-muted); font-size:.88rem; margin:0; max-width:420px; }
.chart-card canvas { width:100%; height:280px; display:block; border-radius:14px; background:linear-gradient(180deg, var(--color-bg) 0%, #fff 100%); }
.chart-legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; color:var(--color-muted); font-size:.86rem; font-weight:700; }
.chart-legend span { display:inline-flex; align-items:center; gap:7px; }
.chart-legend i { display:inline-block; width:14px; height:8px; border-radius:999px; }
.legend-principal { background:var(--color-primary); }
.legend-interest { background:#9b6a38; }
.chart-tooltip { position:absolute; z-index:5; min-width:190px; padding:12px 14px; border-radius:14px; background:#fff; border:1px solid var(--color-line); box-shadow:var(--shadow-md); color:var(--color-primary); font-size:.86rem; pointer-events:none; opacity:0; transform:translateY(4px); transition:opacity .12s ease, transform .12s ease; }
.chart-tooltip.is-visible { opacity:1; transform:translateY(0); }
.chart-tooltip strong { display:block; margin-bottom:6px; font-size:.92rem; color:var(--color-primary); }
.chart-tooltip span { display:block; color:var(--color-muted); font-weight:700; margin-top:3px; }
@media (max-width: 980px) {
  .calculator-body { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  .calculator-summary { align-items:flex-start; flex-direction:column; padding:22px; }
  .calculator-body { padding:18px; }
  .field-row.two-up, .calc-result-panel .result-grid { grid-template-columns:1fr; }
  .result-item.full { grid-column:auto; }
  .chart-card canvas { height:230px; }
}
.calculator-panel[open] .summary-action { font-size:0; }
.calculator-panel[open] .summary-action::before { content:"Close calculator"; font-size:.86rem; }


/* Income calculator */
.income-range { accent-color: var(--color-primary-3); padding:0; border:0; height:30px; background:transparent; }
.segmented-control { border:0; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:0; }
.segmented-control legend { grid-column:1 / -1; font-weight:700; color:var(--color-primary); font-size:.94rem; margin-bottom:7px; }
.segmented-control label { display:flex; justify-content:center; align-items:center; min-height:44px; border:1px solid var(--color-line); background:#fff; color:var(--color-primary); font-weight:800; cursor:pointer; }
.segmented-control label:first-of-type { border-radius:12px 0 0 12px; }
.segmented-control label:last-of-type { border-radius:0 12px 12px 0; border-left:0; }
.segmented-control input { width:auto; margin-right:8px; accent-color:var(--color-primary); }
.income-result-hero { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; margin-bottom:18px; padding:18px 20px; background:var(--color-accent-2); border:1px solid var(--color-line); border-radius:16px; }
.income-result-hero span { color:var(--color-primary); font-weight:850; }
.income-result-hero strong { color:var(--color-primary-3); font-size:clamp(1.7rem, 4vw, 2.6rem); line-height:1; margin:0; }
.income-table-wrap { overflow-x:auto; border:1px solid var(--color-line); border-radius:16px; background:#fff; }
.income-table { width:100%; border-collapse:collapse; min-width:580px; }
.income-table th, .income-table td { padding:15px 16px; border-bottom:1px solid var(--color-line); text-align:right; white-space:nowrap; }
.income-table th:first-child, .income-table td:first-child { text-align:left; }
.income-table thead th { color:var(--color-primary); font-weight:900; background:var(--color-accent-2); }
.income-table tbody th { color:var(--color-primary); font-weight:850; }
.income-table tbody tr:last-child th, .income-table tbody tr:last-child td { border-bottom:0; }

/* Income calculator tax year badge */
.calc-result-panel { position:relative; }
.calc-meta-corner {
  position:absolute;
  top:12px;
  right:14px;
  font-size:.73rem;
  line-height:1;
  letter-spacing:.03em;
  color:var(--color-muted);
  background:rgba(255,255,255,.76);
  border:1px solid var(--color-line);
  border-radius:999px;
  padding:6px 9px;
  font-weight:800;
}
.income-result-hero { padding-right:140px; }
@media (max-width:640px) {
  .calc-meta-corner { position:static; display:inline-flex; margin-bottom:12px; }
  .income-result-hero { padding-right:20px; }
}