:root {
  --ink: #0b0b0b;
  --emerald: #111111;
  --green: #1b1b1b;
  --gold: #c7060a;
  --cream: #ffffff;
  --paper: #ffffff;
  --muted: #a7afa8;
  --line: rgba(255,255,255,.18);
  --display: "Barlow Condensed", Arial Narrow, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--display); overflow-x: hidden; }
a { color: inherit; }
.site-header { height: 104px; padding: 0 clamp(24px, 4vw, 72px); display: grid; grid-template-columns: minmax(245px, 1fr) auto minmax(300px, 1fr); align-items: center; gap: 32px; color: #fff; background: rgba(0,0,0,.97); position: relative; z-index: 50; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand { display: block; width: 245px; height: 78px; }
.brand img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.desktop-nav { display: flex; align-items: center; gap: clamp(12px, 1.5vw, 28px); }
.desktop-nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 7px; color: #dce2de; text-decoration: none; font-size: 16px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; }
.desktop-nav a:hover { color: var(--gold); }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 20px; }
.schedule-link { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; padding-bottom: 5px; border-bottom: 1px solid var(--gold); white-space: nowrap; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; padding: 16px 22px; border-radius: 999px; text-decoration: none; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; transition: transform .3s ease, box-shadow .3s ease, background .3s ease; }
.button-call { background: var(--gold); color: #fff; min-width: 190px; font-size: 16px; letter-spacing: .03em; box-shadow: 0 8px 30px rgba(199,6,10,.2); }
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(0,0,0,.18); }
.arrow-icon { display: inline-block; width: 11px; height: 11px; flex: 0 0 11px; position: relative; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; font-size: 0; }
.arrow-icon::after { content: ""; width: 15px; height: 1.5px; position: absolute; top: -1px; right: -1px; background: currentColor; transform: rotate(-45deg); transform-origin: right center; }
.arrow-icon.arrow-right { height: 9px; border-top: 0; }
.arrow-icon.arrow-right::after { top: 4px; transform: none; }
.menu-toggle, .mobile-menu { display: none; }

.hero { min-height: calc(100vh - 104px); padding: clamp(90px, 10vw, 150px) clamp(24px, 8vw, 140px) 0; color: #fff; background-image: linear-gradient(90deg, rgba(0,0,0,.99) 0%, rgba(0,0,0,.9) 28%, rgba(0,0,0,.52) 48%, rgba(0,0,0,.08) 72%, rgba(0,0,0,.02) 100%), url("assets/family-playing-yard-bw.webp"); background-size: cover; background-position: center, 42% center; background-repeat: no-repeat; position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr; align-content: center; }
.hero::after { content: ""; position: absolute; left: -5%; right: -5%; bottom: -1px; height: 92px; background: var(--paper); clip-path: ellipse(57% 44% at 50% 100%); }
.hero-copy { max-width: 720px; position: relative; z-index: 2; padding-bottom: 100px; text-shadow: 0 2px 22px rgba(0,0,0,.18); }
.eyebrow { margin: 0 0 24px; color: var(--gold); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; }
h1 { margin: 0; font-size: clamp(62px, 7vw, 116px); line-height: 1.02; letter-spacing: -.015em; overflow-wrap: break-word; }
h1 em { color: var(--gold); font-weight: inherit; }
.hero-intro { max-width: 570px; color: #cbd3ce; font-size: clamp(16px, 1.2vw, 20px); line-height: 1.75; margin: 38px 0; }
.hero-actions { display: flex; align-items: center; gap: 38px; }
.button-primary { background: linear-gradient(135deg, #e12529, #9b0004); color: #fff; min-width: 235px; box-shadow: 0 14px 40px rgba(0,0,0,.22); }
.text-link { color: #fff; text-underline-offset: 7px; text-decoration-color: var(--gold); font-size: 13px; }
.text-link span { color: var(--gold); margin-left: 8px; }
.trust-row { grid-column: 1 / -1; display: flex; justify-content: center; gap: clamp(28px, 6vw, 90px); position: relative; z-index: 2; padding-bottom: 70px; }
.trust-row p { margin: 0; padding: 0; color: #aab4ae; text-align: center; text-transform: uppercase; letter-spacing: .16em; font-size: 10px; }
.trust-row p::before { content: "•"; color: var(--gold); margin-right: 12px; }

.intro-section { padding: clamp(100px, 12vw, 185px) clamp(24px, 9vw, 160px) clamp(90px, 10vw, 150px); position: relative; }
.intro-section::before { content: ""; position: absolute; width: 210px; height: 210px; border: 1px solid rgba(0,0,0,.1); border-radius: 50%; right: 5vw; top: 7vw; }
.intro-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(50px, 10vw, 170px); }
.intro-grid h2, .about-copy h2, .contact-copy h2 { font-size: clamp(36px, 4vw, 60px); line-height: 1.1; margin: 0; }
.intro-grid > div { padding-top: 8px; }
.intro-grid p, .about-copy > p { font-size: 17px; line-height: 1.8; color: #4d5852; margin: 0 0 22px; }
.text-link.dark { color: var(--ink); font-weight: 600; }
.why-section { margin: 0 clamp(24px, 9vw, 160px); padding: clamp(55px, 7vw, 95px) 0; display: grid; grid-template-columns: .55fr 1.45fr; gap: clamp(45px, 9vw, 140px); border-top: 1px solid rgba(0,0,0,.18); border-bottom: 1px solid rgba(0,0,0,.18); }
.why-label { display: flex; flex-direction: column; justify-content: space-between; }
.why-label span { display: block; width: 44px; height: 2px; background: var(--gold); }
.why-copy { max-width: 880px; }
.why-copy h2 { max-width: 680px; margin: 0 0 28px; color: var(--emerald); font-size: clamp(36px, 4vw, 58px); line-height: 1.08; }
.why-copy p { margin: 0; color: #53615a; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.85; }
.services { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 78px); padding: clamp(90px, 10vw, 150px) clamp(24px, 9vw, 160px) clamp(120px, 13vw, 210px); margin: 0; background: #ffffff; position: relative; }
.services::before { content: "Solutions designed for real life"; position: absolute; top: 32px; left: 50%; transform: translateX(-50%); color: #8a928d; text-transform: uppercase; letter-spacing: .2em; font-size: 10px; white-space: nowrap; }
.service-card { min-height: 470px; padding: clamp(34px, 4vw, 58px); display: flex; flex-direction: column; justify-content: space-between; color: var(--ink); background: rgba(255,255,255,.52); border: 1px solid rgba(0,0,0,.14); border-radius: 0; box-shadow: 0 30px 80px rgba(0,0,0,.07); transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease; position: relative; cursor: pointer; }
.service-card:nth-child(2) { background: #ffffff; }
.service-card:hover, .service-card:focus-within { transform: translateY(-10px) scale(1.01); box-shadow: 0 38px 90px rgba(0,0,0,.13); border-color: rgba(199,6,10,.7); }
.service-icon { width: 54px; height: 54px; color: var(--gold); }
.service-icon svg { display: block; width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.service-card h3 { font-size: clamp(42px, 4vw, 60px); margin: 0 0 20px; }
.service-card p:not(.eyebrow) { max-width: 480px; color: #53615a; line-height: 1.7; }
.service-card > div:last-child { display: grid; grid-template-rows: auto auto minmax(88px, auto) auto; align-content: end; }
.service-card > div:last-child > p:not(.eyebrow) { margin-top: 0; }
.service-card a { display: flex; justify-content: space-between; padding-top: 22px; margin-top: 40px; border-top: 1px solid rgba(0,0,0,.18); color: var(--ink); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 600; text-decoration: none; }
.service-card a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.service-card:focus-within { outline: 2px solid var(--gold); outline-offset: 5px; }
.service-card a:focus { outline: none; }
.service-card a span { color: var(--gold); }
.service-card a span, .text-link span, .button span { transition: transform .25s ease; }
.service-card a:hover span, .text-link:hover span, .button:hover span { transform: translate(3px, -1px); }
.about-section { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; min-height: 720px; background: #ffffff; overflow: hidden; position: relative; border-radius: 50% 50% 0 0 / 90px 90px 0 0; }
.about-profile { width: min(32vw, 360px); margin: 0 auto; position: relative; z-index: 1; text-align: center; }
.about-profile img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 24px 50px rgba(0,0,0,.14); }
.about-profile p { margin: 0; }
.about-name { padding-top: 18px; font: 600 24px/1.2 var(--display); color: #111; }
.about-title { padding-top: 7px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #111; }
.about-copy { padding: 80px clamp(24px, 9vw, 150px) 80px 30px; }
.about-copy h2 { margin-bottom: 32px; }
.mission-section { padding: clamp(80px, 9vw, 125px) clamp(24px, 12vw, 210px); text-align: center; background: var(--paper); position: relative; }
.mission-section::before { content: "“"; position: absolute; left: 50%; top: 34px; transform: translateX(-50%); font: 120px var(--display); color: rgba(199,6,10,.16); }
.mission-section blockquote { max-width: 920px; margin: 0 auto; font: 500 clamp(28px, 3.2vw, 46px)/1.28 var(--display); color: var(--emerald); }
.contact-section { background: radial-gradient(circle at 85% 15%, #2a2a2a, #111 48%, #000); color: #fff; padding: clamp(100px, 11vw, 160px) clamp(24px, 9vw, 160px); display: grid; grid-template-columns: .8fr 1.2fr; align-items: start; gap: clamp(60px, 9vw, 150px); border-radius: 70px 70px 0 0; }
.contact-copy > p:last-child { max-width: 620px; color: #c7d3ce; line-height: 1.75; }
.button-light { background: var(--cream); color: var(--ink); padding: 22px 26px; }
.appointment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 18px; padding: clamp(28px, 4vw, 48px); background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.16); border-radius: 28px; box-shadow: 0 30px 90px rgba(0,0,0,.14); backdrop-filter: blur(12px); }
.form-field { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.birth-date-field { margin: 0; padding: 0; border: 0; }
.full-width { grid-column: 1 / -1; }
.form-field label, .form-field legend { color: #f4f5f1; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
.form-field input, .form-field select { width: 100%; height: 52px; padding: 0 15px; color: #fff; background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.2); border-radius: 10px; font: 400 17px var(--display); outline: none; color-scheme: dark; transition: border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.form-field select { appearance: auto; cursor: pointer; }
.form-field input::placeholder { color: rgba(255,255,255,.45); }
.form-field input:focus, .form-field select:focus { border-color: var(--gold); background: rgba(0,0,0,.68); box-shadow: 0 0 0 3px rgba(199,6,10,.16); }
.form-field small { color: rgba(255,255,255,.55); font-size: 10px; line-height: 1.4; }
.birth-date-controls { display: grid; grid-template-columns: 1.35fr .75fr .9fr; gap: 8px; }
.birth-date-controls label { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.birth-date-controls label span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.birth-date-controls input, .birth-date-controls select { padding-inline: 10px; }
.form-submit { display: flex; align-items: center; gap: 22px; margin-top: 6px; }
.form-submit button { border: 0; cursor: pointer; white-space: nowrap; }
.form-status { margin: 0; color: #d7e4dd; font-size: 13px; line-height: 1.5; }
footer { min-height: 180px; padding: 45px clamp(24px, 4vw, 72px); background: #020805; color: #87918b; display: flex; align-items: center; justify-content: space-between; gap: 30px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.footer-brand { color: #e8ede9; font: 600 28px var(--display); text-decoration: none; letter-spacing: .12em; }
.footer-brand span { display: block; color: var(--gold); font: 600 9px var(--display); text-align: center; letter-spacing: .4em; margin-top: 7px; }
.solutions-hero { min-height: 620px; padding: clamp(100px, 12vw, 180px) clamp(24px, 9vw, 160px); color: #fff; background: radial-gradient(ellipse at 78% 40%, #292929, #111 32%, #000 76%); display: grid; grid-template-columns: 1fr; align-items: center; position: relative; overflow: hidden; }
.solutions-hero > div { position: relative; z-index: 1; }
.solutions-hero h1 { max-width: 1050px; color: #fff; font-size: clamp(56px, 7vw, 106px); line-height: 1.03; }
.solutions-hero > div > p:last-child { max-width: 650px; margin-top: 36px; color: #c7d2cc; font-size: 17px; line-height: 1.75; }
.solutions-scroll { width: fit-content; position: absolute; left: clamp(24px, 9vw, 160px); bottom: 48px; z-index: 1; color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; }
.solutions-scroll span { color: var(--gold); margin-left: 12px; }
.solution-detail { padding: clamp(100px, 12vw, 180px) clamp(24px, 9vw, 160px); display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(60px, 10vw, 170px); background: var(--paper); scroll-margin-top: 0; }
.solution-heading { position: relative; }
.detail-number { display: block; margin-bottom: 50px; color: rgba(0,0,0,.22); font: 500 48px var(--display); }
.solution-heading h2, .choice-guide h2 { margin: 0 0 30px; color: var(--emerald); font: 600 clamp(46px, 5vw, 74px)/1.05 var(--display); }
.solution-lead { color: #53615a; font-size: 17px; line-height: 1.8; }
.solution-body h3 { margin: 0 0 35px; font: 600 clamp(30px, 3vw, 42px) var(--display); }
.benefit-list { margin: 0; padding: 0; list-style: none; }
.benefit-list li { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 25px 0; border-top: 1px solid rgba(0,0,0,.14); }
.benefit-list li > span { color: var(--gold); font-size: 11px; }
.benefit-list strong { font: 600 24px var(--display); }
.benefit-list p { margin: 8px 0 0; color: #68736d; line-height: 1.6; }
.annuity-detail { background: #ffffff; border-top: 1px solid rgba(0,0,0,.14); }
.choice-guide { padding: clamp(100px, 12vw, 180px) clamp(24px, 16vw, 280px); text-align: center; }
.choice-guide > p:not(.eyebrow) { max-width: 760px; margin: 0 auto; color: #53615a; font-size: 17px; line-height: 1.8; }
.choice-actions { margin: 42px 0 35px; display: flex; align-items: center; justify-content: center; gap: 32px; }
.contact-phone-inline { color: var(--emerald); font-weight: 600; text-underline-offset: 6px; }
.choice-guide small { display: block; max-width: 700px; margin: 0 auto; color: #858e89; line-height: 1.6; }
.why-page-hero { min-height: 620px; padding: clamp(100px, 12vw, 180px) clamp(24px, 9vw, 160px); color: #fff; background: linear-gradient(125deg, #000, #1c1c1c); display: grid; grid-template-columns: 1fr; align-items: center; overflow: hidden; }
.why-page-hero h1 { max-width: 1050px; color: #fff; font-size: clamp(56px, 7vw, 106px); line-height: 1.03; }
.why-page-story { padding: clamp(35px, 4vw, 60px) clamp(24px, 11vw, 190px) clamp(100px, 12vw, 180px); display: block; background: var(--paper); }
.story-copy { max-width: 980px; margin: 0 auto; text-align: center; }
.story-copy p { margin: 0 0 28px; color: #46534c; font-size: clamp(18px, 1.55vw, 23px); line-height: 1.75; }
.values-row { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 clamp(24px, 6vw, 105px) clamp(80px, 10vw, 150px); border-top: 1px solid rgba(0,0,0,.18); border-bottom: 1px solid rgba(0,0,0,.18); }
.values-row article { min-height: 320px; padding: 38px; border-right: 1px solid rgba(0,0,0,.18); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.values-row article:last-child { border-right: 0; }
.values-row h2 { margin: 0 0 15px; color: var(--emerald); font-size: clamp(32px, 3vw, 46px); }
.values-row p { margin: 0; color: #68736d; line-height: 1.65; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s cubic-bezier(.2,.75,.25,1), transform .9s cubic-bezier(.2,.75,.25,1); }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 1120px) {
  .site-header { grid-template-columns: 210px 1fr auto; gap: 18px; }
  .desktop-nav { gap: 8px; }
  .desktop-nav a { min-height: 44px; padding-inline: 4px; font-size: 13px; }
  .schedule-link { display: none; }
}

@media (max-width: 820px) {
  .site-header { height: 82px; padding: 0 20px; grid-template-columns: 1fr auto auto; }
  .brand { width: 165px; height: 58px; }
  .desktop-nav, .header-actions .schedule-link { display: none; }
  .header-actions { gap: 10px; }
  .header-actions .button-call { min-width: 170px; padding: 13px 15px; font-size: 14px; }
  .menu-toggle { display: block; width: 42px; height: 42px; padding: 0; border: 0; background: transparent; position: relative; cursor: pointer; }
  .menu-toggle span { height: 1px; position: absolute; left: 8px; right: 8px; background: #fff; transform-origin: center; transition: top .25s, transform .25s, opacity .2s; }
  .menu-toggle span:first-child { top: 12px; }
  .menu-toggle span:nth-child(2) { top: 20px; }
  .menu-toggle span:last-child { top: 28px; }
  .menu-toggle[aria-expanded="true"] span:first-child { top: 20px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { display: none; }
  .menu-toggle[aria-expanded="true"] span:last-child { top: 20px; transform: rotate(-45deg); }
  .mobile-menu { display: flex; position: absolute; top: 82px; left: 0; right: 0; padding: 28px 24px 34px; background: #020805; border-top: 1px solid rgba(255,255,255,.1); flex-direction: column; gap: 0; transform: translateY(-130%); opacity: 0; pointer-events: none; transition: .3s ease; }
  .mobile-menu.open { transform: none; opacity: 1; pointer-events: auto; }
  .mobile-menu > a:not(.button) { padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.1); text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 25px; }
  .mobile-menu .button { margin-top: 24px; }
  .hero { min-height: calc(100vh - 82px); padding: 90px 24px 0; display: block; background-image: linear-gradient(90deg, rgba(0,0,0,.98) 0%, rgba(0,0,0,.82) 45%, rgba(0,0,0,.22) 100%), url("assets/family-playing-yard-bw.webp"); background-position: center, 45% center; }
  .hero::after { height: 48px; clip-path: ellipse(72% 38% at 50% 100%); }
  .hero-copy { padding-bottom: 50px; }
  .trust-row { margin-top: 35px; }
  .intro-grid, .contact-section { grid-template-columns: 1fr; gap: 44px; }
  .why-section { grid-template-columns: 1fr; gap: 25px; }
  .why-label { gap: 8px; }
  .contact-section { border-radius: 32px 32px 0 0; }
  .services { grid-template-columns: 1fr; padding-inline: 24px; gap: 28px; }
  .service-card { min-height: 450px; border-radius: 0; }
  .about-section { grid-template-columns: 1fr; min-height: auto; border-radius: 32px 32px 0 0; }
  .about-profile { width: min(70vw, 300px); margin-top: 54px; }
  .about-name { font-size: 22px; }
  .about-copy { padding: 40px 24px 90px; }
  footer { flex-direction: column; text-align: center; }
  .solution-detail { grid-template-columns: 1fr; gap: 55px; }
  .why-page-hero { min-height: 560px; grid-template-columns: 1fr; position: relative; }
  .why-page-hero > div { position: relative; z-index: 1; }
  .story-copy { text-align: left; }
  .values-row { grid-template-columns: 1fr; }
  .values-row article { min-height: 240px; border-right: 0; border-bottom: 1px solid rgba(0,0,0,.18); }
  .values-row article:last-child { border-bottom: 0; }
}

@media (max-width: 520px) {
  .brand { width: 138px; height: 50px; }
  .header-actions .button-call { min-width: 160px; gap: 8px; font-size: 13px; }
  h1 { font-size: 58px; }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 22px; }
  .hero-actions .text-link { width: fit-content; }
  .trust-row { grid-template-columns: 1fr; }
  .trust-row { flex-direction: column; align-items: flex-start; gap: 14px; padding: 5px 0 75px; }
  .trust-row p { border: 0; text-align: left; }
  .intro-section { padding-block: 90px; }
  .services { margin-inline: 0; }
  .service-card { padding: 32px 24px; }
  .contact-phone { font-size: 30px; }
  .appointment-form { grid-template-columns: 1fr; }
  .appointment-form .full-width { grid-column: auto; }
  .form-submit { align-items: flex-start; flex-direction: column; }
  .birth-date-controls { grid-template-columns: 1.25fr .75fr .9fr; }
  .solutions-hero { min-height: 560px; }
  .choice-actions { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}
