87.1
median 87.1 · spread 1.3
Correctness
82.0× 35%
deterministic
788887
Completeness
96.0× 25%
judge panel
929696
Quality
86.0× 40%
judge panel
868290
- Cost
- $0.078
- Time
- 1m 55s
- Tokens
- 495 in · 15,567 out · 5,234 reasoning
- Provider
- –
Response
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Harbor & Lane LLP | Estate Planning, Probate & Elder Law</title>
<meta name="description" content="Harbor & Lane LLP provides deliberate, enduring counsel in estate planning, probate administration, and elder law. Serving families and individuals with discretion.">
<!-- Google Fonts: Cormorant Garamond (editorial serif) & Plus Jakarta Sans (clean modern sans) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,400;1,600&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
/* ==========================================================================
CSS VARIABLES & RESET
========================================================================== */
:root {
--color-bg: #FBF9F5;
--color-surface: #FFFFFF;
--color-surface-subtle: #F4EFEB;
--color-navy: #15222E;
--color-navy-hover: #0E1821;
--color-text-main: #172129;
--color-text-muted: #4B5660;
--color-text-light: #6E7983;
--color-brass: #8C6F42;
--color-brass-light: #B49667;
--color-brass-bg: #F7F3EC;
--color-border: #E5DFC4;
--color-border-subtle: #EBE5DB;
--color-error: #B91C1C;
--color-error-bg: #FEF2F2;
--color-focus: #15222E;
--font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
--font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--shadow-sm: 0 1px 3px rgba(21, 34, 46, 0.05);
--shadow-md: 0 8px 24px rgba(21, 34, 46, 0.06);
--shadow-lg: 0 16px 36px rgba(21, 34, 46, 0.08);
--container-max: 1140px;
--section-spacing: 5.5rem;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
background-color: var(--color-bg);
color: var(--color-text-main);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
min-width: 320px;
overflow-x: hidden;
background-color: var(--color-bg);
}
/* Skip link for accessibility */
.skip-to-content {
position: absolute;
top: -60px;
left: 1rem;
background: var(--color-navy);
color: #fff;
padding: 0.75rem 1.25rem;
font-weight: 600;
text-decoration: none;
z-index: 9999;
border-radius: 0 0 4px 4px;
transition: top 0.2s ease;
}
.skip-to-content:focus {
top: 0;
outline: 3px solid var(--color-brass-light);
}
/* Universal Focus Styling (WCAG AA Compliant) */
:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 3px;
}
a {
color: inherit;
text-decoration: none;
}
/* ==========================================================================
LAYOUT UTILITIES
========================================================================== */
.container {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 1.5rem;
}
.section-header {
text-align: center;
max-width: 680px;
margin: 0 auto 3.5rem auto;
}
.section-eyebrow {
display: inline-block;
font-family: var(--font-sans);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-brass);
margin-bottom: 0.75rem;
}
.section-title {
font-family: var(--font-serif);
font-size: clamp(2rem, 3.2vw, 2.75rem);
line-height: 1.15;
font-weight: 600;
color: var(--color-navy);
letter-spacing: -0.01em;
}
.section-subtitle {
margin-top: 1rem;
font-size: 1.0625rem;
color: var(--color-text-muted);
line-height: 1.6;
}
/* ==========================================================================
BUTTONS
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.625rem;
font-family: var(--font-sans);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0.02em;
padding: 0.875rem 1.875rem;
border-radius: 2px;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
text-decoration: none;
min-height: 48px;
}
.btn-primary {
background-color: var(--color-navy);
color: #FFFFFF;
border-color: var(--color-navy);
box-shadow: 0 4px 12px rgba(21, 34, 46, 0.12);
}
.btn-primary:hover {
background-color: var(--color-navy-hover);
border-color: var(--color-navy-hover);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(21, 34, 46, 0.18);
}
.btn-primary:active {
transform: translateY(0);
}
/* ==========================================================================
STICKY HEADER
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 1000;
background-color: rgba(251, 249, 245, 0.94);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--color-border-subtle);
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 74px;
padding: 0 1.5rem;
max-width: var(--container-max);
margin: 0 auto;
}
.brand {
display: flex;
flex-direction: column;
text-decoration: none;
color: var(--color-navy);
}
.brand-title {
font-family: var(--font-serif);
font-size: 1.4375rem;
font-weight: 700;
letter-spacing: 0.03em;
line-height: 1.1;
text-transform: uppercase;
color: var(--color-navy);
}
.brand-subtitle {
font-family: var(--font-sans);
font-size: 0.6875rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-brass);
font-weight: 600;
margin-top: 1px;
}
.nav-menu {
display: flex;
align-items: center;
list-style: none;
gap: 1.75rem;
}
.nav-link {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-muted);
letter-spacing: 0.02em;
position: relative;
padding: 0.35rem 0;
transition: color 0.2s ease;
}
.nav-link:hover {
color: var(--color-navy);
}
.nav-link::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 1.5px;
background-color: var(--color-brass);
transition: width 0.2s ease;
}
.nav-link:hover::after,
.nav-link:focus-visible::after {
width: 100%;
}
.header-cta {
margin-left: 0.5rem;
padding: 0.55rem 1.15rem;
font-size: 0.8125rem;
min-height: 38px;
}
/* ==========================================================================
HERO SECTION
========================================================================== */
.hero-section {
position: relative;
padding: 5.5rem 0 5rem 0;
background: radial-gradient(circle at 50% 20%, rgba(180, 150, 103, 0.08) 0%, rgba(251, 249, 245, 0) 70%);
border-bottom: 1px solid var(--color-border-subtle);
}
.hero-content {
max-width: 820px;
margin: 0 auto;
text-align: center;
}
.hero-eyebrow-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.hero-rule {
width: 32px;
height: 1px;
background-color: var(--color-brass-light);
}
.hero-eyebrow {
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-brass);
}
.hero-headline {
font-family: var(--font-serif);
font-size: clamp(2.4rem, 4.6vw, 4rem);
line-height: 1.12;
font-weight: 600;
color: var(--color-navy);
letter-spacing: -0.015em;
margin-bottom: 1.5rem;
}
.hero-subhead {
font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
line-height: 1.65;
color: var(--color-text-muted);
max-width: 640px;
margin: 0 auto 2.5rem auto;
font-weight: 400;
}
.hero-cta-group {
display: flex;
justify-content: center;
align-items: center;
gap: 1.25rem;
flex-wrap: wrap;
}
.hero-notes {
margin-top: 2.25rem;
display: flex;
justify-content: center;
gap: 2rem;
font-size: 0.8125rem;
color: var(--color-text-light);
letter-spacing: 0.01em;
}
.hero-note-item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.hero-note-item svg {
color: var(--color-brass);
}
/* ==========================================================================
"HOW WE HELP" (SERVICES) SECTION
========================================================================== */
.services-section {
padding: var(--section-spacing) 0;
background-color: var(--color-bg);
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.service-card {
background-color: var(--color-surface);
border: 1px solid var(--color-border-subtle);
padding: 2.75rem 2.25rem;
border-radius: 3px;
position: relative;
display: flex;
flex-direction: column;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.service-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--color-border);
}
.service-number {
font-family: var(--font-serif);
font-size: 1.5rem;
font-style: italic;
color: var(--color-brass-light);
margin-bottom: 1.25rem;
font-weight: 500;
}
.service-title {
font-family: var(--font-serif);
font-size: 1.625rem;
font-weight: 600;
color: var(--color-navy);
line-height: 1.25;
margin-bottom: 1rem;
}
.service-blurb {
font-size: 0.9375rem;
color: var(--color-text-muted);
line-height: 1.68;
}
/* Subtle top accent bar on cards */
.service-card::before {
content: "";
position: absolute;
top: 0;
left: 2rem;
right: 2rem;
height: 2px;
background-color: var(--color-brass-bg);
transition: background-color 0.2s ease;
}
.service-card:hover::before {
background-color: var(--color-brass);
}
/* ==========================================================================
ATTORNEYS SECTION
========================================================================== */
.attorneys-section {
padding: var(--section-spacing) 0;
background-color: var(--color-surface);
border-top: 1px solid var(--color-border-subtle);
border-bottom: 1px solid var(--color-border-subtle);
}
.attorneys-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.5rem;
max-width: 980px;
margin: 0 auto;
}
.attorney-card {
background-color: var(--color-bg);
border: 1px solid var(--color-border-subtle);
border-radius: 3px;
padding: 2.5rem 2rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.attorney-card:hover {
border-color: var(--color-border);
box-shadow: var(--shadow-sm);
}
/* Monogram placeholder avatar (No external image) */
.attorney-avatar {
width: 88px;
height: 88px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-navy) 0%, #25394b 100%);
color: var(--color-brass-light);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
position: relative;
box-shadow: 0 4px 12px rgba(21, 34, 46, 0.15);
border: 2px solid var(--color-surface);
outline: 1px solid var(--color-border);
}
.avatar-initials {
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 600;
letter-spacing: 0.1em;
margin-left: 0.1em;
}
.attorney-name {
font-family: var(--font-serif);
font-size: 1.625rem;
font-weight: 600;
color: var(--color-navy);
line-height: 1.2;
margin-bottom: 0.35rem;
}
.attorney-title {
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-brass);
margin-bottom: 1.25rem;
}
.attorney-bio {
font-size: 0.9375rem;
color: var(--color-text-muted);
line-height: 1.65;
max-width: 380px;
}
/* ==========================================================================
CONSULTATION FORM SECTION
========================================================================== */
.consultation-section {
padding: var(--section-spacing) 0;
background-color: var(--color-bg);
}
.form-wrapper {
max-width: 720px;
margin: 0 auto;
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 3px;
padding: 3rem 3rem;
box-shadow: var(--shadow-md);
position: relative;
}
.form-intro {
margin-bottom: 2.25rem;
padding-bottom: 1.75rem;
border-bottom: 1px solid var(--color-border-subtle);
}
.form-intro p {
color: var(--color-text-muted);
font-size: 0.9375rem;
line-height: 1.6;
}
.form-grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.form-group {
margin-bottom: 1.5rem;
display: flex;
flex-direction: column;
}
.form-label {
font-size: 0.84375rem;
font-weight: 600;
color: var(--color-navy);
margin-bottom: 0.45rem;
letter-spacing: 0.01em;
display: flex;
justify-content: space-between;
align-items: center;
}
.required-indicator {
color: var(--color-brass);
font-weight: 700;
margin-left: 0.25rem;
}
.form-control {
width: 100%;
padding: 0.75rem 0.95rem;
font-family: var(--font-sans);
font-size: 0.9375rem;
color: var(--color-text-main);
background-color: #FFFFFF;
border: 1px solid #CCD2D8;
border-radius: 2px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
min-height: 46px;
}
.form-control:hover {
border-color: #9EACB8;
}
.form-control:focus {
border-color: var(--color-navy);
outline: 2px solid var(--color-navy);
outline-offset: 1px;
}
select.form-control {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234B5660' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.5rem;
cursor: pointer;
}
textarea.form-control {
resize: vertical;
min-height: 110px;
}
/* Radio Group Styling */
.radio-fieldset {
border: none;
padding: 0;
margin: 0 0 1.5rem 0;
}
.radio-legend {
font-size: 0.84375rem;
font-weight: 600;
color: var(--color-navy);
margin-bottom: 0.5rem;
letter-spacing: 0.01em;
display: block;
width: 100%;
}
.radio-options-wrapper {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
margin-top: 0.35rem;
}
.radio-label {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-size: 0.875rem;
color: var(--color-text-main);
cursor: pointer;
min-height: 38px;
}
.radio-input {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
border: 1.5px solid #8C99A5;
border-radius: 50%;
outline: none;
background-color: #fff;
display: grid;
place-content: center;
cursor: pointer;
margin: 0;
transition: border-color 0.2s ease;
}
.radio-input::before {
content: "";
width: 9px;
height: 9px;
border-radius: 50%;
transform: scale(0);
transition: transform 0.15s ease-in-out;
background-color: var(--color-navy);
}
.radio-input:checked {
border-color: var(--color-navy);
}
.radio-input:checked::before {
transform: scale(1);
}
.radio-input:focus-visible {
outline: 2px solid var(--color-navy);
outline-offset: 3px;
}
/* Form Validation Error States */
.form-group.has-error .form-control {
border-color: var(--color-error);
background-color: #FFFDFD;
}
.form-group.has-error .form-control:focus {
outline-color: var(--color-error);
}
.error-message {
display: none;
font-size: 0.775rem;
color: var(--color-error);
margin-top: 0.4rem;
font-weight: 500;
align-items: center;
gap: 0.35rem;
}
.form-group.has-error .error-message,
.radio-fieldset.has-error .error-message {
display: flex;
}
.form-submit-row {
margin-top: 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.form-privacy-note {
font-size: 0.75rem;
color: var(--color-text-light);
line-height: 1.5;
}
/* Confirmation Box Replacement */
.confirmation-card {
display: none;
text-align: center;
padding: 3.5rem 2rem;
}
.confirmation-card.is-visible {
display: block;
animation: fadeIn 0.4s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.confirmation-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background-color: var(--color-brass-bg);
color: var(--color-brass);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
border: 1px solid var(--color-border);
}
.confirmation-title {
font-family: var(--font-serif);
font-size: 2.125rem;
font-weight: 600;
color: var(--color-navy);
margin-bottom: 1rem;
line-height: 1.2;
}
.confirmation-text {
font-size: 1rem;
color: var(--color-text-muted);
max-width: 520px;
margin: 0 auto 1.5rem auto;
line-height: 1.65;
}
.confirmation-details {
background-color: var(--color-bg);
border: 1px solid var(--color-border-subtle);
border-radius: 2px;
padding: 1.25rem 1.5rem;
max-width: 440px;
margin: 0 auto 2rem auto;
font-size: 0.875rem;
color: var(--color-text-main);
text-align: left;
}
/* ==========================================================================
SITE FOOTER
========================================================================== */
.site-footer {
background-color: var(--color-navy);
color: #ECE7DE;
padding: 4.5rem 0 2.5rem 0;
border-top: 3px solid var(--color-brass);
}
.footer-top {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 3rem;
padding-bottom: 3.5rem;
border-bottom: 1px solid rgba(235, 229, 219, 0.14);
}
.footer-brand-title {
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #FFFFFF;
margin-bottom: 0.35rem;
}
.footer-brand-tagline {
font-size: 0.8125rem;
color: var(--color-brass-light);
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 600;
margin-bottom: 1rem;
}
.footer-desc {
font-size: 0.875rem;
line-height: 1.65;
color: #B2BDC7;
max-width: 340px;
}
.footer-heading {
font-family: var(--font-serif);
font-size: 1.125rem;
color: #FFFFFF;
margin-bottom: 1.25rem;
letter-spacing: 0.02em;
}
.footer-contact-list {
list-style: none;
font-size: 0.875rem;
color: #B2BDC7;
line-height: 1.7;
}
.footer-contact-list li {
margin-bottom: 0.5rem;
}
.footer-contact-list a {
color: #ECE7DE;
text-decoration: underline;
text-underline-offset: 3px;
}
.footer-contact-list a:hover {
color: var(--color-brass-light);
}
.footer-hours-list {
list-style: none;
font-size: 0.875rem;
color: #B2BDC7;
line-height: 1.7;
}
.footer-bottom {
padding-top: 2rem;
font-size: 0.775rem;
line-height: 1.65;
color: #8C99A5;
}
.disclaimer-text {
margin-bottom: 1.25rem;
font-style: italic;
}
.copyright-row {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(235, 229, 219, 0.08);
}
/* ==========================================================================
RESPONSIVE ADJUSTMENTS (Down to 390px)
========================================================================== */
@media (max-width: 992px) {
.services-grid {
grid-template-columns: 1fr;
max-width: 580px;
margin: 0 auto;
}
.footer-top {
grid-template-columns: 1fr;
gap: 2.25rem;
}
}
@media (max-width: 768px) {
:root {
--section-spacing: 4rem;
}
.header-inner {
height: auto;
padding: 0.875rem 1.25rem;
flex-wrap: wrap;
gap: 0.75rem;
}
.nav-menu {
gap: 1.15rem;
width: 100%;
order: 3;
padding-top: 0.65rem;
border-top: 1px solid var(--color-border-subtle);
justify-content: space-between;
}
.nav-link {
font-size: 0.8125rem;
}
.header-cta {
display: none; /* Relies on nav consultation link on small viewports */
}
.hero-section {
padding: 3.5rem 0 3.75rem 0;
}
.attorneys-grid {
grid-template-columns: 1fr;
max-width: 480px;
}
.form-wrapper {
padding: 2rem 1.5rem;
}
.form-grid-2 {
grid-template-columns: 1fr;
gap: 0;
}
}
@media (max-width: 480px) {
.container {
padding: 0 1.125rem;
}
.hero-notes {
flex-direction: column;
align-items: center;
gap: 0.65rem;
}
.service-card {
padding: 2.25rem 1.5rem;
}
.attorney-card {
padding: 2rem 1.25rem;
}
.radio-options-wrapper {
flex-direction: column;
gap: 0.5rem;
}
}
</style>
</head>
<body>
<!-- Accessible skip navigation -->
<a href="#main-content" class="skip-to-content">Skip to primary content</a>
<!-- STICKY SITE HEADER -->
<header class="site-header" role="banner">
<div class="header-inner">
<a href="#hero" class="brand" aria-label="Harbor and Lane LLP - Home">
<span class="brand-title">Harbor & Lane</span>
<span class="brand-subtitle">Attorneys at Law • LLP</span>
</a>
<nav class="site-nav" aria-label="Main Navigation">
<ul class="nav-menu">
<li><a href="#services" class="nav-link">How We Help</a></li>
<li><a href="#attorneys" class="nav-link">Attorneys</a></li>
<li><a href="#consultation" class="nav-link">Consultation</a></li>
<li><a href="#contact" class="nav-link">Contact</a></li>
</ul>
</nav>
<a href="#consultation" class="btn btn-primary header-cta">Request Consult</a>
</div>
</header>
<main id="main-content">
<!-- HERO SECTION -->
<section id="hero" class="hero-section" aria-labelledby="hero-heading">
<div class="container">
<div class="hero-content">
<div class="hero-eyebrow-wrap">
<span class="hero-rule" aria-hidden="true"></span>
<span class="hero-eyebrow">Estate Planning & Legacy Counsel</span>
<span class="hero-rule" aria-hidden="true"></span>
</div>
<h1 id="hero-heading" class="hero-headline">
Protecting your family’s legacy with deliberate, enduring care.
</h1>
<p class="hero-subhead">
Harbor & Lane LLP provides bespoke estate planning, probate administration, and elder law counsel tailored to your family's enduring security.
</p>
<div class="hero-cta-group">
<a href="#consultation" class="btn btn-primary" id="hero-cta-btn">
<span>Schedule a Consultation</span>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
</a>
</div>
<div class="hero-notes" aria-label="Firm Highlights">
<span class="hero-note-item">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
Confidential & Fiduciary Counsel
</span>
<span class="hero-note-item">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
Prompt In-Person & Virtual Reviews
</span>
</div>
</div>
</div>
</section>
<!-- "HOW WE HELP" SECTION -->
<section id="services" class="services-section" aria-labelledby="services-heading">
<div class="container">
<header class="section-header">
<span class="section-eyebrow">Practice Areas</span>
<h2 id="services-heading" class="section-title">How We Help</h2>
<p class="section-subtitle">
Thoughtful legal frameworks designed to navigate life's critical transitions with clarity and composure.
</p>
</header>
<div class="services-grid">
<!-- Item 1: Wills & Trusts -->
<article class="service-card" aria-labelledby="service-1-title">
<span class="service-number" aria-hidden="true">01</span>
<h3 id="service-1-title" class="service-title">Wills & Trusts</h3>
<p class="service-blurb">
We structure custom revocable trusts, wills, powers of attorney, and healthcare directives that protect multi-generational assets and avoid unnecessary estate friction.
</p>
</article>
<!-- Item 2: Probate -->
<article class="service-card" aria-labelledby="service-2-title">
<span class="service-number" aria-hidden="true">02</span>
<h3 id="service-2-title" class="service-title">Probate</h3>
<p class="service-blurb">
Our firm guides executors, personal representatives, and beneficiaries through court proceedings, asset valuation, and creditor resolution with discretion and efficiency.
</p>
</article>
<!-- Item 3: Elder Law -->
<article class="service-card" aria-labelledby="service-3-title">
<span class="service-number" aria-hidden="true">03</span>
<h3 id="service-3-title" class="service-title">Elder Law</h3>
<p class="service-blurb">
We help seniors and their adult children safeguard hard-earned life savings through proactive Medicaid planning, asset protection strategies, and compassionate guardianship advocacy.
</p>
</article>
</div>
</div>
</section>
<!-- ATTORNEY SECTION -->
<section id="attorneys" class="attorneys-section" aria-labelledby="attorneys-heading">
<div class="container">
<header class="section-header">
<span class="section-eyebrow">Experienced Partners</span>
<h2 id="attorneys-heading" class="section-title">Attorneys Dedicated to Your Legacy</h2>
<p class="section-subtitle">
Decades of dedicated private client counsel, bringing measured judgment to every conversation.
</p>
</header>
<div class="attorneys-grid">
<!-- Attorney 1 -->
<article class="attorney-card" aria-labelledby="attorney-1-name">
<div class="attorney-avatar" aria-hidden="true">
<span class="avatar-initials">EVL</span>
</div>
<h3 id="attorney-1-name" class="attorney-name">Eleanor Vance Lane</h3>
<span class="attorney-title">Managing Partner</span>
<p class="attorney-bio">
With over twenty years specializing in complex trust architectures and succession planning, Eleanor brings calm precision to family wealth preservation.<br>
She serves as a trusted fiduciary advisor to generations of regional families and business owners.
</p>
</article>
<!-- Attorney 2 -->
<article class="attorney-card" aria-labelledby="attorney-2-name">
<div class="attorney-avatar" aria-hidden="true">
<span class="avatar-initials">TMH</span>
</div>
<h3 id="attorney-2-name" class="attorney-name">Thomas M. Harbor</h3>
<span class="attorney-title">Partner</span>
<p class="attorney-bio">
Thomas focuses his practice on estate administration, contested probate matters, and comprehensive long-term care advocacy.<br>
Clients rely on his pragmatic problem-solving and patient, reassuring guidance during challenging family transitions.
</p>
</article>
</div>
</div>
</section>
<!-- CONSULTATION REQUEST FORM SECTION -->
<section id="consultation" class="consultation-section" aria-labelledby="consultation-heading">
<div class="container">
<header class="section-header">
<span class="section-eyebrow">Begin The Conversation</span>
<h2 id="consultation-heading" class="section-title">Schedule a Consultation</h2>
<p class="section-subtitle">
Tell us about your estate or probate needs. We will review your inquiry confidentially and respond within one business day.
</p>
</header>
<div class="form-wrapper">
<!-- Initial Form -->
<form id="consultation-form" novalidate aria-label="Consultation Request Form">
<div class="form-intro">
<p>
Please complete the form below. For urgent matters or immediate questions, you may also reach our office directly at <strong>(617) 555-0184</strong>.
</p>
</div>
<div class="form-grid-2">
<!-- Name -->
<div class="form-group" id="group-name">
<label for="fullName" class="form-label">
Full Name <span class="required-indicator" aria-hidden="true">*</span>
</label>
<input
type="text"
id="fullName"
name="fullName"
class="form-control"
placeholder="e.g., Jonathan Sterling"
autocomplete="name"
aria-required="true"
aria-describedby="fullName-error"
>
<div class="error-message" id="fullName-error" role="alert">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
<span>Please enter your full legal name.</span>
</div>
</div>
<!-- Email -->
<div class="form-group" id="group-email">
<label for="email" class="form-label">
Email Address <span class="required-indicator" aria-hidden="true">*</span>
</label>
<input
type="email"
id="email"
name="email"
class="form-control"
placeholder="name@example.com"
autocomplete="email"
aria-required="true"
aria-describedby="email-error"
>
<div class="error-message" id="email-error" role="alert">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
<span>Please enter a valid email address.</span>
</div>
</div>
</div>
<div class="form-grid-2">
<!-- Phone -->
<div class="form-group" id="group-phone">
<label for="phone" class="form-label">
Phone Number <span class="required-indicator" aria-hidden="true">*</span>
</label>
<input
type="tel"
id="phone"
name="phone"
class="form-control"
placeholder="(617) 555-0123"
autocomplete="tel"
aria-required="true"
aria-describedby="phone-error"
>
<div class="error-message" id="phone-error" role="alert">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
<span>Please provide a valid 10-digit telephone number.</span>
</div>
</div>
<!-- Matter Type (Select) -->
<div class="form-group" id="group-matter">
<label for="matterType" class="form-label">
Matter Type <span class="required-indicator" aria-hidden="true">*</span>
</label>
<select
id="matterType"
name="matterType"
class="form-control"
aria-required="true"
aria-describedby="matterType-error"
>
<option value="">Select practice area...</option>
<option value="Wills & Trusts">Wills & Living Trusts</option>
<option value="Probate Administration">Probate & Estate Administration</option>
<option value="Elder Law">Elder Law & Medicaid Planning</option>
<option value="General Consultation">General Estate Planning Review</option>
<option value="Other">Other Legal Inquiry</option>
</select>
<div class="error-message" id="matterType-error" role="alert">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
<span>Please choose the area that best describes your needs.</span>
</div>
</div>
</div>
<!-- Preferred Contact Method (Radio) -->
<fieldset class="radio-fieldset" id="group-contact-method" aria-describedby="contactMethod-error">
<legend class="radio-legend">
Preferred Contact Method <span class="required-indicator" aria-hidden="true">*</span>
</legend>
<div class="radio-options-wrapper">
<label class="radio-label">
<input
type="radio"
name="preferredContact"
value="Email"
class="radio-input"
>
<span>Email</span>
</label>
<label class="radio-label">
<input
type="radio"
name="preferredContact"
value="Phone Call"
class="radio-input"
>
<span>Phone call</span>
</label>
<label class="radio-label">
<input
type="radio"
name="preferredContact"
value="No Preference"
class="radio-input"
>
<span>Either is fine</span>
</label>
</div>
<div class="error-message" id="contactMethod-error" role="alert">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
<span>Please select your preferred contact method.</span>
</div>
</fieldset>
<!-- Message (Textarea) -->
<div class="form-group" id="group-message">
<label for="message" class="form-label">
Brief Overview of Your Needs <span class="required-indicator" aria-hidden="true">*</span>
</label>
<textarea
id="message"
name="message"
class="form-control"
placeholder="Please share key details regarding your family situation, assets, or specific estate goals..."
rows="4"
aria-required="true"
aria-describedby="message-error"
></textarea>
<div class="error-message" id="message-error" role="alert">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
<span>Please provide a brief summary (at least 15 characters).</span>
</div>
</div>
<!-- Submit Button & Note -->
<div class="form-submit-row">
<button type="submit" class="btn btn-primary" id="submit-btn">
<span>Submit Consultation Request</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<line x1="22" y1="2" x2="11" y2="13"></line>
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
</svg>
</button>
<p class="form-privacy-note">
Submission of this request does not establish an attorney-client relationship. Please refrain from submitting confidential financial account identifiers.
</p>
</div>
</form>
<!-- Confirmation Card (Hidden by default, shown upon valid submission) -->
<div id="confirmation-card" class="confirmation-card" tabindex="-1" aria-live="polite">
<div class="confirmation-icon" aria-hidden="true">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
<h3 class="confirmation-title">Thank You for Reaching Out</h3>
<p class="confirmation-text">
We have received your consultation request. An attorney or senior paralegal from Harbor & Lane LLP will review your matter and contact you by the end of the next business day.
</p>
<div class="confirmation-details" id="confirmation-summary">
<!-- Dynamically populated summary -->
</div>
<p style="font-size: 0.8125rem; color: var(--color-text-light);">
If your matter is an urgent time-sensitive probate filing, please contact our intake desk directly at (617) 555-0184.
</p>
</div>
</div>
</div>
</section>
</main>
<!-- SITE FOOTER -->
<footer id="contact" class="site-footer" role="contentinfo">
<div class="container">
<div class="footer-top">
<!-- Col 1: Firm Overview -->
<div>
<div class="footer-brand-title">Harbor & Lane LLP</div>
<div class="footer-brand-tagline">Counselors at Law</div>
<p class="footer-desc">
A boutique private client law firm counseling individuals and families through estate planning, wealth stewardship, and probate administration.
</p>
</div>
<!-- Col 2: Office & Contact -->
<div>
<h4 class="footer-heading">Office Location</h4>
<ul class="footer-contact-list">
<li>
<strong>Harbor & Lane LLP</strong><br>
One Beacon Court, Suite 1420<br>
Boston, Massachusetts 02108
</li>
<li>
<strong>Telephone:</strong> <a href="tel:6175550184">(617) 555-0184</a>
</li>
<li>
<strong>Email:</strong> <a href="mailto:inquiries@harborlanelaw.com">inquiries@harborlanelaw.com</a>
</li>
</ul>
</div>
<!-- Col 3: Hours & Accessibility -->
<div>
<h4 class="footer-heading">Office Hours</h4>
<ul class="footer-hours-list">
<li>Monday – Thursday: 8:30 AM – 5:30 PM</li>
<li>Friday: 8:30 AM – 5:00 PM</li>
<li>Saturday & Sunday: By prior appointment</li>
<li style="margin-top: 0.75rem; font-size: 0.8125rem; color: var(--color-brass-light);">
Confidential in-office and encrypted video conferences available.
</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p class="disclaimer-text">
<strong>Bar Association Legal Notice & Disclaimer:</strong> The information provided on this website is for general informational purposes only and does not constitute formal legal advice. Viewing this site, submitting a consultation request, or communicating with Harbor & Lane LLP via internet email does not create an attorney-client relationship. An attorney-client relationship is formed only after an initial conflict check is completed and a formal written engagement letter is signed by both client and partner. Past results do not guarantee similar outcomes in subsequent matters. Harbor & Lane LLP is registered under the Rules of the Supreme Judicial Court of the Commonwealth of Massachusetts.
</p>
<div class="copyright-row">
<span>© <span id="current-year">2026</span> Harbor & Lane LLP. All rights reserved.</span>
<span>Attorney Advertising under Massachusetts SJC Rule 3:07.</span>
</div>
</div>
</div>
</footer>
<!-- CLIENT-SIDE SCRIPTS -->
<script>
(function () {
'use strict';
// Set copyright year safely
const yearEl = document.getElementById('current-year');
if (yearEl) {
yearEl.textContent = new Date().getFullYear();
}
const form = document.getElementById('consultation-form');
const confirmationCard = document.getElementById('confirmation-card');
const confirmationSummary = document.getElementById('confirmation-summary');
// Input elements
const nameInput = document.getElementById('fullName');
const emailInput = document.getElementById('email');
const phoneInput = document.getElementById('phone');
const matterInput = document.getElementById('matterType');
const messageInput = document.getElementById('message');
const contactRadios = document.querySelectorAll('input[name="preferredContact"]');
// Containers for error states
const groupName = document.getElementById('group-name');
const groupEmail = document.getElementById('group-email');
const groupPhone = document.getElementById('group-phone');
const groupMatter = document.getElementById('group-matter');
const groupMessage = document.getElementById('group-message');
const groupContact = document.getElementById('group-contact-method');
let hasAttemptedSubmit = false;
// Validation Helper Functions
function isValidEmail(email) {
// Standard practical email regex
return /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email.trim());
}
function isValidPhone(phone) {
// Must contain at least 10 digits
const digits = phone.replace(/\D/g, '');
return digits.length >= 10;
}
function getSelectedRadio() {
for (const radio of contactRadios) {
if (radio.checked) {
return radio.value;
}
}
return null;
}
function validateField(input, group, isValid) {
if (!isValid) {
group.classList.add('has-error');
input.setAttribute('aria-invalid', 'true');
return false;
} else {
group.classList.remove('has-error');
input.removeAttribute('aria-invalid');
return true;
}
}
function validateRadioGroup() {
const selected = getSelectedRadio();
if (!selected) {
groupContact.classList.add('has-error');
groupContact.setAttribute('aria-invalid', 'true');
return false;
} else {
groupContact.classList.remove('has-error');
groupContact.removeAttribute('aria-invalid');
return true;
}
}
function runValidation() {
let isFormValid = true;
// Name validation
const nameVal = nameInput.value.trim();
if (!validateField(nameInput, groupName, nameVal.length >= 2)) {
isFormValid = false;
}
// Email validation
const emailVal = emailInput.value.trim();
if (!validateField(emailInput, groupEmail, isValidEmail(emailVal))) {
isFormValid = false;
}
// Phone validation
const phoneVal = phoneInput.value.trim();
if (!validateField(phoneInput, groupPhone, isValidPhone(phoneVal))) {
isFormValid = false;
}
// Matter validation
if (!validateField(matterInput, groupMatter, matterInput.value !== '')) {
isFormValid = false;
}
// Contact method radio validation
if (!validateRadioGroup()) {
isFormValid = false;
}
// Message validation (minimum 15 characters)
const msgVal = messageInput.value.trim();
if (!validateField(messageInput, groupMessage, msgVal.length >= 15)) {
isFormValid = false;
}
return isFormValid;
}
// Live validation after first submit attempt
const inputs = [nameInput, emailInput, phoneInput, matterInput, messageInput];
inputs.forEach(input => {
input.addEventListener('input', () => {
if (hasAttemptedSubmit) runValidation();
});
input.addEventListener('blur', () => {
if (hasAttemptedSubmit) runValidation();
});
});
contactRadios.forEach(radio => {
radio.addEventListener('change', () => {
if (hasAttemptedSubmit) validateRadioGroup();
});
});
// Form submission handler
form.addEventListener('submit', function (event) {
event.preventDefault();
hasAttemptedSubmit = true;
const isAllValid = runValidation();
if (!isAllValid) {
// Find first erroneous element and focus it
const firstError = form.querySelector('.has-error input, .has-error select, .has-error textarea');
if (firstError) {
firstError.focus();
}
return;
}
// Collect sanitized values for presentation
const clientName = nameInput.value.trim();
const clientEmail = emailInput.value.trim();
const clientPhone = phoneInput.value.trim();
const clientMatter = matterInput.value;
const clientContactMethod = getSelectedRadio();
// Build summary in confirmation message
confirmationSummary.innerHTML = `
<p style="margin-bottom: 0.35rem;"><strong>Client Name:</strong> ${escapeHtml(clientName)}</p>
<p style="margin-bottom: 0.35rem;"><strong>Practice Area:</strong> ${escapeHtml(clientMatter)}</p>
<p style="margin-bottom: 0.35rem;"><strong>Contact Preference:</strong> ${escapeHtml(clientContactMethod)}</p>
<p style="margin-bottom: 0;"><strong>Confirmation Sent To:</strong> ${escapeHtml(clientEmail)} • ${escapeHtml(clientPhone)}</p>
`;
// Hide form and display confirmation
form.style.display = 'none';
confirmationCard.classList.add('is-visible');
// Focus the confirmation panel for assistive screen reader announcement
confirmationCard.focus();
});
function escapeHtml(string) {
const div = document.createElement('div');
div.textContent = string;
return div.innerHTML;
}
})();
</script>
</body>
</html>
Artifacts
project-file · sandboxed previewopen raw
Judge rationales
Correctness
- deterministic · html-valid100
Single-file HTML parses with html and body; no disallowed external requests.
detail
{ "external": [], "problems": [] } - deterministic · console-clean100
No console or page errors while rendering.
detail
{ "errors": [] } - deterministic · responsive-screenshots100
No horizontal overflow at 1440 or 390 px.
detail
{ "overflow": { "mobile": false, "desktop": false }, "screenshots": [ "artifacts/screenshot-desktop.png", "artifacts/screenshot-mobile.png" ] } - deterministic · axe-core95
1 serious/critical accessibility violation(s): color-contrast
detail
{ "violations": [ { "id": "color-contrast", "help": "Elements must meet minimum color contrast ratio thresholds", "nodes": 9, "impact": "serious" }, { "id": "heading-order", "help": "Heading levels should only increase by one", "nodes": 1, "impact": "moderate" } ] } - anthropic/claude-sonnet-578
Validation logic (name length, email regex, phone digit count, matter select, radio group, message length) is implemented correctly and the submit handler cleanly swaps the form for a confirmation panel (form.style.display='none'; confirmationCard.classList.add('is-visible')). Anchor links (#services, #attorneys, #consultation, #contact) match section ids and scroll-behavior:smooth works, and the responsive screenshots show no overflow at 390px. However, the axe-core check flags a serious color-contrast violation, which directly violates the brief's explicit WCAG AA requirement (likely candidates being --color-text-light #6E7983 on --color-bg #FBF9F5 or the footer's #8C99A5 on navy), so it is not fully correct against the stated spec.
- openai/gpt-5.4-mini88
The page appears to function as specified: the HTML is single-file, the form validation logic checks empty/malformed fields, and on valid submit it swaps the form for a confirmation card via `form.style.display = 'none';` and `confirmationCard.classList.add('is-visible')`. The screenshot context and code show anchor links in the sticky header (`#services`, `#attorneys`, `#consultation`, `#contact`) and the layout is responsive with no overflow noted in the deterministic checks. The main correctness issue is accessibility/color contrast: the deterministic axe result reports a serious `color-contrast` violation, so it is not fully correct against the WCAG AA requirement.
- x-ai/grok-4.687
The page is a valid single-file HTML document with working client-side validation (empty name, email regex, 10-digit phone, required select/radio, 15-character message), inline `.has-error` messages, `preventDefault`, and a form-to-`#confirmation-card` swap that does not send data. Sticky `#services`/`#attorneys`/`#consultation`/`#contact` anchors and `scroll-behavior: smooth` are present; deterministic checks report no overflow at 390px and a clean console. The remaining miss is the required WCAG AA contrast: axe-core flagged one serious color-contrast violation (likely brass/muted text such as `--color-brass` `#8C6F42` or `--color-text-light` `#6E7983` on cream).
Completeness
- anthropic/claude-sonnet-592
Every explicit requirement is present: hero with headline/subhead/CTA (#hero-cta-btn), three 'How we help' cards with blurbs, two attorney cards with name/title/2-line bio and initials-only avatars (no <img> tags), a full consultation form with all six required fields plus inline error messages and aria-describedby wiring, sticky header with anchor nav, and a footer with address, phone, and a detailed bar-association disclaimer ('Bar Association Legal Notice & Disclaimer...SJC Rule 3:07'). Implicit expectations like a skip-link, aria-live confirmation region, and mobile-specific radio/nav collapsing are also covered, leaving only minor gaps (e.g. the flagged contrast issue) short of a perfect score.
- openai/gpt-5.4-mini96
All explicit brief items are present in the code: hero with headline/subhead/primary CTA, the three-item “How we help” section, two-attorney section with initials avatars and bios, a consultation form with the requested fields, sticky header anchor links, footer address/phone/disclaimer, and inline CSS/JS in a single file. The form also includes inline error messages and a post-submit confirmation message, which matches the behavioral requirement. The only slight miss is that the footer includes extra items like hours and email, but that does not reduce completeness for the stated ask.
- x-ai/grok-4.696
Every explicit brief item is present: hero headline, one-sentence subhead, and “Schedule a Consultation” CTA; a three-card How We Help block for Wills & Trusts, Probate, and Elder Law; two attorneys with names, titles, two-line bios, and initials avatars (EVL/TMH) and no photos; the full consultation form (name, email, phone, radio contact method, matter select, message) with inline errors and confirmation replacement; sticky header with section anchors; footer address, phone, and bar-association disclaimer. Responsive rules down to 480px/390px, skip link, and `:focus-visible` styles are included. The only implicit gap is reliance on an external Google Fonts stylesheet rather than fully self-contained type.
Quality
- anthropic/claude-sonnet-586
The visual language (Cormorant Garamond serif headlines paired with Plus Jakarta Sans, navy/brass/cream palette, restrained card and footer styling) reads calm and credible rather than templated, and the screenshots show a coherent typographic hierarchy and spacing rhythm consistent with a boutique law firm. Custom focus-visible outlines, a skip link, and styled radio/select controls show real attention to accessibility and premium feel; the only quality deduction is the contrast miss caught by the deterministic check, which a senior designer would fix before shipping.
- openai/gpt-5.4-mini82
Visually and structurally this is strong for a law-firm landing page: the serif/sans pairing, restrained navy/brass palette, centered hero, card spacing, and premium editorial styling all fit the audience well, as reflected in the screenshots. Keyboard focus styling is explicitly implemented with `:focus-visible`, and the layout reads as polished rather than template-like. The main quality flaw is the documented color-contrast issue, which keeps it from being senior-ship-ready as-is.
- x-ai/grok-4.690
The rendered page matches a calm, premium firm: cream/navy/brass palette, Cormorant Garamond display with Plus Jakarta Sans, measured section rhythm, and card treatment that does not look like a purple-gradient template. Hierarchy, spacing, and copy register as credible estate-planning counsel; buttons meet 48px min-height and `:focus-visible` outlines are defined. A senior designer would still fix the flagged contrast pair and perhaps tighten footer disclaimer length, but the visual system is otherwise shippable.