@import url("styles.css");

:root {
  --navy: #25272c;
  --blue: #d6533f;
  --blue-dark: #b83d2b;
  --orange: #d6533f;
  --ink: #24262b;
  --muted: #696a6e;
  --line: #dedbd4;
  --paper: #fcfaf5;
  --wash: #f0ece4;
  --success: #357563;
  --shadow: 0 24px 60px rgba(37,39,44,.12);
  --radius: 0;
}

body { background: var(--paper); font-family: "Trebuchet MS", Arial, sans-serif; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.04em; }
h3 { letter-spacing: -.02em; }
.topbar { color: #fff; background: var(--blue); }
.site-header { position: relative; background: var(--paper); border-bottom: 1px solid #cfcbc2; }
.nav-wrap { min-height: 98px; }
.brand { color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; }
.brand-mark { width: 45px; height: 45px; color: #fff; background: var(--ink); border-radius: 50%; }
.nav-links { gap: 31px; }
.nav-links > a, .nav-drop > button { font-size: .82rem; letter-spacing: .075em; text-transform: uppercase; }
.phone-btn, .primary-btn { color: #fff; background: var(--blue); border-radius: 0; box-shadow: none; letter-spacing: .04em; text-transform: uppercase; font-size: .84rem; }
.phone-btn:hover, .primary-btn:hover { background: #aa3828; }
.secondary-btn { color: var(--ink); background: transparent; border-color: var(--ink); border-radius: 0; letter-spacing: .04em; text-transform: uppercase; font-size: .84rem; }

.hero { color: var(--ink); background: var(--wash); }
.hero::before, .hero::after { display: none; }
.hero.compact .hero-bg { left: 0; right: auto; width: 46%; opacity: 1; }
.hero.compact .container { grid-template-columns: 46% 54%; min-height: 560px; padding-block: 70px; }
.hero.compact .container > div { grid-column: 2; padding-left: 70px; }
.hero h1 { color: var(--ink); }
.hero.compact h1 { font-size: clamp(2.5rem, 4.3vw, 4.3rem); }
.hero-copy { color: #57595e; }
.eyebrow { color: var(--blue); letter-spacing: .16em; }
.hero-points { color: #52545a; }
.hero-points li::before { color: var(--blue); }
.hero .secondary-btn { color: var(--ink); background: transparent; border-color: var(--ink); }

.home-hero { min-height: 810px; background: #eae6de; }
.home-hero .hero-bg { inset: auto 5% 0 5%; width: 90%; height: 43%; object-position: center 55%; }
.home-hero .container { min-height: 810px; display: block; padding-top: 70px; text-align: center; }
.home-hero .container > div { max-width: 910px; margin: 0 auto; }
.home-hero h1 { max-width: 900px; margin-inline: auto; font-size: clamp(3rem, 6vw, 6.2rem); }
.home-hero .hero-copy { max-width: 720px; margin-inline: auto; }
.home-hero .hero-actions, .home-hero .hero-points { justify-content: center; }

.trust-strip { background: var(--ink); border: 0; }
.trust-item { border-color: rgba(255,255,255,.16); }
.trust-item strong { color: #fff; font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.trust-item span { color: #c8c8c8; }
.section { padding-block: 104px; }
.section.alt { background: var(--wash); }
.section-intro { max-width: 740px; margin-left: 0; text-align: left; }
.section-intro h2 { font-size: clamp(2.5rem, 4vw, 4rem); }
.service-card, .info-card, .step-card { border-radius: 0; border-color: var(--line); box-shadow: none; }
.service-card img { filter: grayscale(.25); }
.info-card { border-top: 4px solid var(--blue); }
.icon-box { color: #fff; background: var(--ink); border-radius: 50%; }
.split-image { border-radius: 0; box-shadow: -18px 18px 0 #d6533f; }
.check-list li::before { background: var(--blue); border-radius: 50%; }
.step-card::before { background: var(--ink); }
.call-panel { background: var(--ink); border-radius: 0; box-shadow: none; }
.page-banner { color: var(--ink); background: #e9e4da; border-bottom: 1px solid var(--line); }
.page-banner h1 { color: var(--ink); }
.page-banner p { color: #58595e; }
.site-footer { background: #202126; }
.site-footer .brand-mark { background: var(--blue); }
.mobile-call { background: var(--blue); border-radius: 0; }

.availability-box { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; padding: 34px 40px; color: #fff; background: var(--blue); }
.availability-box h2 { margin: 0 0 6px; color: #fff; font-size: 2rem; }
.availability-box p { margin: 0; color: #ffe8e3; }
.availability-box .phone-btn { color: var(--ink); background: #fff; }

.pathway { border-top: 1px solid #bbb6ad; }
.pathway-head { display: grid; grid-template-columns: 110px minmax(220px, .8fr) 1.5fr; gap: 30px; align-items: start; padding: 46px 0 35px; }
.pathway-number { color: var(--blue); font-family: Georgia, "Times New Roman", serif; font-size: 4.8rem; line-height: .85; }
.pathway-head h2 { margin: 0; font-size: 2.45rem; }
.pathway-head p { margin: 0; color: var(--muted); font-size: 1.04rem; }
.service-directory { border-bottom: 1px solid var(--line); }
.directory-link { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 30px; min-height: 104px; border-top: 1px solid var(--line); text-decoration: none; transition: background .2s ease, padding .2s ease; }
.directory-link:hover { padding-inline: 18px; background: #fff; }
.directory-icon { width: 52px; height: 52px; display: grid; place-items: center; color: #fff; background: var(--ink); border-radius: 50%; font-weight: 900; }
.directory-link h3 { margin: 0 0 4px; font-family: Georgia, "Times New Roman", serif; font-size: 1.45rem; font-weight: 500; }
.directory-link p { margin: 0; color: var(--muted); }
.directory-arrow { color: var(--blue); font-size: 1.65rem; }

.photo-story { display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: 260px 260px; gap: 18px; }
.photo-story img { height: 100%; object-fit: cover; }
.photo-story img:first-child { grid-row: span 2; }
.guide-card { background: transparent; border-top: 1px solid #bdb9b0; padding: 26px 0 0; }
.guide-card img { height: 210px; margin-bottom: 22px; object-fit: cover; filter: grayscale(.2); }
.guide-card p { color: var(--muted); }
.article-meta { color: var(--blue); font-weight: 900; letter-spacing: .09em; text-transform: uppercase; font-size: .76rem; }
.prose blockquote { margin: 28px 0; padding: 22px 26px; background: #eee8de; border-left: 4px solid var(--blue); }

@media (max-width: 920px) {
  .site-header { position: sticky; }
  .hero.compact .container > div { padding-left: 38px; }
  .home-hero .container { grid-template-columns: 1fr; }
  .pathway-head { grid-template-columns: 80px 1fr; }
  .pathway-head p { grid-column: 2; }
  .directory-link { grid-template-columns: 80px 1fr auto; }
}

@media (max-width: 640px) {
  .home-hero { min-height: 760px; }
  .home-hero .container { min-height: 760px; padding-top: 55px; }
  .home-hero .hero-bg { left: 0; width: 100%; height: 34%; }
  .home-hero h1 { font-size: 3.15rem; }
  .hero.compact .hero-bg { width: 100%; opacity: .18; }
  .hero.compact .container { grid-template-columns: 1fr; min-height: 570px; }
  .hero.compact .container > div { grid-column: 1; padding-left: 0; }
  .availability-box { grid-template-columns: 1fr; padding: 28px 24px; }
  .pathway-head { grid-template-columns: 65px 1fr; gap: 18px; }
  .pathway-number { font-size: 3.5rem; }
  .directory-link { grid-template-columns: 54px 1fr auto; gap: 14px; padding-block: 15px; }
  .directory-icon { width: 42px; height: 42px; }
  .directory-link p { display: none; }
  .photo-story { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 180px; }
  .photo-story img:first-child { grid-column: span 2; grid-row: auto; }
}