/* Hallmark · shape: Marquee Hero · genre: editorial · theme: Editorial (deal 3/3) · job: hire · draw: 666b18
 * hero: Stage, swapped from Corridor for the cat photograph · nav: masthead · footer: colophon · imagery: AI-generated photographs · signature: the orange tabby at home
 * axes: light/display-condensed/chromatic-green · posture: restrained · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V5 · weakest: S, missing contact details are stated plainly */
/* Hallmark · dismissed 58 · a few extra words appear across the FAQ and footer; the three answers stay closed until requested */
/* Hallmark · dismissed 25 · the neighborhood paragraph is a short local statement beside the photograph */
@import url("./tokens.css");
@import url("./base.css");

:root { --color-green-deep: #244f3a; --color-green-soft: #dbe7d8; --color-footer: #173c2c; --color-footer-text: #f4f2e8; --color-footer-muted: #d4e0d4; --color-photo-label: #f6f4ec; --color-footer-focus: #f4f2e8; }
body { color: var(--color-ink); }
a { text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
h1, h2, h3 { font-variation-settings: "wdth" 85, "opsz" 96; }
.skip-link { position: absolute; z-index: var(--z-toast); transform: translateY(-200%); background: var(--color-paper); color: var(--color-ink); padding: var(--space-sm); }
.skip-link:focus { transform: translateY(0); }
.site-header { border-bottom: 1px solid var(--color-rule); }
.header-inner { min-height: 95px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.wordmark, nav, .header-link, .button, .text-link, .location, figcaption { font-family: var(--font-display); font-variation-settings: "opsz" 12; }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 800; font-size: 19px; line-height: .9; letter-spacing: -0.045em; }
.wordmark-icon { color: var(--color-green-deep); width: 34px; height: 34px; flex: none; }
.wordmark-period { color: var(--color-green-deep); }
nav { display: flex; align-items: center; gap: 36px; font-size: 14px; font-weight: 600; }
nav a, .text-link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; }
nav a:hover, .text-link:hover { text-decoration-color: var(--color-green-deep); }
.header-link { font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--color-ink); padding: var(--space-sm) 0; white-space: nowrap; }
.header-link span { margin-left: var(--space-sm); }
.hero { display: grid; grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr); gap: clamp(36px, 5vw, 76px); align-items: center; min-height: calc(100svh - 95px); padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.lead-copy { padding-bottom: var(--space-sm); }
.location { display: flex; align-items: center; gap: var(--space-xs); font-size: 13px; font-weight: 600; margin-bottom: var(--space-lg); }
.location-rule { width: 27px; height: 2px; background: var(--color-green-deep); }
.hero h1 { font-size: clamp(4.3rem, 6.3vw, 6.8rem); line-height: .91; letter-spacing: -.025em; max-width: none; }
.hero-description { margin-top: 28px; font-size: clamp(1.15rem, 1.4vw, 1.4rem); max-width: 25ch; line-height: 1.4; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 32px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 32px; min-height: 52px; padding: 0 var(--space-lg); font-size: 14px; font-weight: 600; white-space: nowrap; }
.button-primary { background: var(--color-green-deep); color: var(--color-footer-text); }
.button-primary:hover { background: var(--color-ink); }
.button-primary:active { transform: translateY(1px); }
.text-link { font-size: 14px; font-weight: 600; }
.hero-visual { margin: 0; min-width: 0; position: relative; }
.hero-visual img { width: 100%; height: clamp(430px, 47vw, 590px); object-fit: cover; object-position: 66% center; }
.hero-visual figcaption { display: flex; justify-content: space-between; gap: var(--space-md); padding-top: var(--space-sm); color: var(--color-ink-2); font-size: 12px; font-weight: 600; }
.intro { background: var(--color-paper-2); padding: 112px 0; }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: var(--gap-columns); }
.section-note, .footer-note { font-family: var(--font-display); font-size: 14px; font-weight: 600; margin-bottom: var(--space-lg); }
.intro h2, .neighborhood h2, .questions h2 { font-size: clamp(3rem, 5vw, 5.5rem); line-height: .98; letter-spacing: -.02em; }
.intro-copy { align-self: end; max-width: 470px; }
.intro-statement { font-size: clamp(1.6rem, 2.2vw, 2rem); line-height: 1.25; margin-bottom: var(--space-lg); }
.intro-copy > p:not(.intro-statement), .neighborhood-copy > p:not(.section-note) { color: var(--color-ink-2); font-size: 18px; line-height: 1.6; }
.inline-link { display: inline-block; margin-top: var(--space-xl); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--color-ink); font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.inline-link span { margin-left: var(--space-lg); }
.inline-link:hover { border-color: var(--color-accent); }
.service-section { padding-top: 128px; padding-bottom: 128px; }
.section-top { display: flex; justify-content: space-between; align-items: end; gap: var(--gap-columns); padding-bottom: var(--space-xl); border-bottom: 4px solid var(--color-ink); }
.section-top h2 { max-width: 9ch; font-size: clamp(3.2rem, 5vw, 5.25rem); line-height: .97; letter-spacing: -.02em; }
.section-top p { font-size: 18px; max-width: 28ch; }
.service-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, .8fr); gap: var(--gap-columns); align-items: baseline; padding: 32px 0; border-bottom: 1px solid var(--color-rule-2); }
.row-number { font-family: var(--font-display); color: var(--color-green-deep); font-size: 14px; font-weight: 600; }
.service-row h3 { font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1; }
.service-row p { max-width: 38ch; font-size: 17px; color: var(--color-ink-2); }
.neighborhood { background: var(--color-paper-2); padding: 112px 0; }
.neighborhood-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .75fr); align-items: center; gap: clamp(var(--space-xl), 8vw, 112px); }
.window-photo { margin: 0; }
.window-photo img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: center; }
.window-photo figcaption { color: var(--color-ink-2); font-size: 12px; padding-top: var(--space-sm); }
.neighborhood-copy h2 { max-width: 9ch; margin-bottom: var(--space-lg); }
.neighborhood-copy > p:not(.section-note) { max-width: 32ch; }
.questions { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(var(--space-xl), 8vw, 112px); padding-top: 128px; padding-bottom: 128px; }
.questions-intro { margin-top: var(--space-lg); font-size: 18px; }
.faq-list { border-top: 4px solid var(--color-ink); }
.faq-list details { border-bottom: 1px solid var(--color-rule-2); }
.faq-list summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 88px; font-family: var(--font-display); font-size: 19px; font-weight: 600; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--color-green-deep); font-size: 28px; font-weight: 600; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { max-width: 48ch; padding: 0 var(--space-xl) var(--space-lg) 0; font-size: 17px; color: var(--color-ink-2); }
.site-footer { padding: 112px 0 32px; background: var(--color-footer); color: var(--color-footer-text); }
.site-footer a:focus-visible { outline-color: var(--color-footer-focus); }
.site-footer h2 { max-width: 10ch; color: var(--color-footer-text); font-size: clamp(4rem, 7.5vw, 7.5rem); line-height: .91; letter-spacing: -.045em; }
.footer-main { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: var(--gap-columns); align-items: end; padding-bottom: 112px; }
.footer-note { color: var(--color-footer-muted); }
.footer-contact { max-width: 330px; font-size: 21px; }
.contact-pending { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-footer-muted); font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); border-top: 1px solid var(--color-footer-muted); padding-top: var(--space-lg); font-family: var(--font-display); font-size: 13px; }
.footer-wordmark { font-weight: 800; font-size: 19px; letter-spacing: -.04em; }
.footer-bottom p { color: var(--color-footer-muted); }
.footer-bottom a:last-child { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 800px) { .intro, .neighborhood { padding: 80px 0; } .intro-grid, .neighborhood-grid, .questions, .footer-main { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .intro-copy { max-width: 600px; } .service-section, .questions { padding-top: 80px; padding-bottom: 80px; } .neighborhood-copy h2 { max-width: 12ch; } .footer-main { padding-bottom: 80px; } }
@media (max-width: 480px) { .intro, .neighborhood { padding: var(--space-2xl) 0; } .section-top { display: block; } .section-top p { margin-top: var(--space-lg); } .service-row { grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-md); padding: var(--space-lg) 0; } .service-row p { grid-column: 2; } .questions { gap: var(--space-xl); } .site-footer { padding-top: 80px; } .footer-main { gap: var(--space-xl); } .footer-bottom { align-items: start; flex-direction: column; gap: var(--space-md); } }
@media (max-width: 800px) { .header-inner { min-height: 78px; } nav { display: none; } .hero { grid-template-columns: minmax(0, 1fr); gap: 32px; min-height: 0; padding-top: 56px; padding-bottom: 48px; } .hero h1 { font-size: clamp(3.9rem, 11vw, 6.5rem); } .hero-visual img { height: auto; aspect-ratio: 4 / 3; } }
@media (max-width: 480px) { .header-inner { gap: var(--space-sm); } .wordmark { font-size: 17px; } .wordmark-icon { width: 30px; height: 30px; } .header-link { font-size: 13px; } .hero { padding-top: 44px; } .location { margin-bottom: var(--space-lg); } .hero h1 { font-size: clamp(3.3rem, 12.8vw, 4.6rem); } .hero-description { margin-top: 20px; } .hero-actions { margin-top: var(--space-lg); gap: 20px; } .hero-visual figcaption { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }

/* A warmer, more expressive evolution of the original neighborhood identity. */
:root {
  --color-paper: #f8f7ef;
  --color-paper-2: #e5eee1;
  --color-ink: #163c2e;
  --color-ink-2: #304e40;
  --color-rule: #ccd8c9;
  --color-rule-2: #a2b7a6;
  --color-green-deep: #173e2d;
  --color-green-soft: #c8dfc4;
  --color-footer: #173e2d;
  --color-footer-text: #f8f7ef;
  --color-footer-muted: #dcebd9;
  --color-hero-ground: #edf3e8;
  --color-image-ground: #c3d9b9;
  --color-focus: #226b43;
}
body { background: var(--color-paper); color: var(--color-ink); }
h1, h2, h3 { color: var(--color-ink); font-variation-settings: "wdth" 100, "opsz" 96; }
.site-header { background: var(--color-hero-ground); border-bottom: 1px solid var(--color-rule); }
.header-inner { min-height: 82px; }
.wordmark { font-size: 20px; line-height: .94; }
.wordmark-icon { width: 38px; height: 38px; }
nav { gap: var(--space-xl); }
nav a, .header-link, .text-link, .inline-link { transition: text-decoration-color 180ms ease, border-color 180ms ease, opacity 180ms ease; }
nav a:hover, .header-link:hover, .text-link:hover, .inline-link:hover { opacity: .7; }
.hero { position: relative; isolation: isolate; min-height: min(770px, calc(100svh - 82px)); grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(var(--space-xl), 5vw, 80px); padding-top: 44px; padding-bottom: 44px; }
.hero-wrap { background: var(--color-hero-ground); }
.lead-copy { padding-bottom: 0; }
.location { color: var(--color-ink-2); font-size: 14px; margin-bottom: 32px; }
.location-rule { width: 36px; background: var(--color-green-deep); }
.hero h1 { font-size: clamp(4rem, 5.5vw, 5.9rem); line-height: .98; letter-spacing: -.055em; }
.hero-description { max-width: 29ch; margin-top: 28px; font-size: clamp(1.2rem, 1.5vw, 1.45rem); line-height: 1.45; }
.hero-actions { margin-top: 36px; gap: 32px; }
.button { min-height: 52px; border-radius: 999px; padding-inline: 28px; gap: 32px; transition: background-color 180ms ease, transform 180ms ease; }
.button-primary { background: var(--color-green-deep); }
.button-primary:hover { background: var(--color-ink-2); transform: translateY(-2px); }
.hero-visual img { width: 100%; height: clamp(440px, 44vw, 570px); object-position: center; border-radius: 260px 260px 18px 18px; background: var(--color-image-ground); }
.hero-visual figcaption { padding: var(--space-md) var(--space-2xs) 0; font-size: 13px; font-weight: 600; }
.intro { background: var(--color-paper-2); padding: 136px 0; }
.intro-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .75fr); gap: 80px; }
.intro h2, .neighborhood h2, .questions h2 { font-size: clamp(3.5rem, 5.8vw, 5.8rem); line-height: .99; letter-spacing: -.055em; }
.intro-copy { max-width: 470px; }
.intro-statement { font-size: clamp(1.8rem, 2.4vw, 2.3rem); line-height: 1.18; }
.inline-link { border-color: var(--color-green-deep); white-space: nowrap; }
.service-section { padding-top: 152px; padding-bottom: 152px; }
.section-top { align-items: end; border-color: var(--color-green-deep); }
.section-top h2 { max-width: 11ch; font-size: clamp(3.4rem, 5.7vw, 5.5rem); letter-spacing: -.05em; }
.section-top p { font-size: 20px; }
.service-row { grid-template-columns: 80px minmax(0, 1fr) minmax(0, .8fr); padding: 36px 0; }
.row-number { font-size: 16px; }
.service-row h3 { font-size: clamp(1.8rem, 2.8vw, 2.6rem); letter-spacing: -.04em; }
.service-row p { font-size: 18px; }
.neighborhood { background: var(--color-paper-2); padding: 128px 0; }
.window-photo img { border-radius: 18px 18px 200px 18px; }
.window-photo figcaption { font-size: 13px; }
.neighborhood-copy h2 { max-width: 10ch; }
.questions { padding-top: 152px; padding-bottom: 152px; }
.faq-list { border-color: var(--color-green-deep); }
.faq-list summary { font-size: 20px; }
.faq-list summary:hover { color: var(--color-ink-2); }
.site-footer { padding-top: 128px; }
.site-footer h2 { font-size: clamp(4.5rem, 7.5vw, 7.4rem); letter-spacing: -.06em; }
.footer-main { padding-bottom: 128px; }
@media (max-width: 800px) {
  .header-inner { min-height: 78px; }
  .hero { min-height: 0; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-top: var(--space-2xl); padding-bottom: 48px; }
  .hero h1 { font-size: clamp(3.8rem, 10vw, 5.5rem); }
  .hero-visual { max-width: 650px; width: 100%; }
  .hero-visual img { height: auto; aspect-ratio: 1.12 / 1; border-radius: 260px 260px 16px 16px; }
  .intro, .neighborhood { padding: 88px 0; }
  .intro-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .service-section, .questions { padding-top: 88px; padding-bottom: 88px; }
  .footer-main { padding-bottom: 80px; }
}
@media (max-width: 480px) {
  .wordmark { font-size: 17px; }
  .wordmark-icon { width: 32px; height: 32px; }
  .hero { gap: 32px; padding-top: 48px; }
  .location { margin-bottom: var(--space-lg); }
  .hero h1 { font-size: clamp(3rem, 12vw, 4.2rem); letter-spacing: -.055em; }
  .hero-description { margin-top: 20px; }
  .hero-actions { margin-top: 28px; gap: 20px; }
  .hero-visual img { border-radius: 160px 160px 14px 14px; }
  .hero-visual figcaption { font-size: 11px; }
  .intro, .neighborhood { padding: 72px 0; }
  .intro h2, .neighborhood h2, .questions h2 { font-size: clamp(3.1rem, 12vw, 4.4rem); }
  .service-section, .questions { padding-top: 72px; padding-bottom: 72px; }
  .section-top h2 { font-size: clamp(3.1rem, 12vw, 4.3rem); }
  .service-row { grid-template-columns: 36px minmax(0, 1fr); padding: 28px 0; }
  .site-footer { padding-top: 88px; }
  .site-footer h2 { font-size: clamp(3.8rem, 15vw, 5.2rem); }
}
@media (prefers-reduced-motion: reduce) { .button, nav a, .header-link, .text-link, .inline-link { transition: none; } .button-primary:hover { transform: none; } }
