/* Dallas Apartment Locator Team brand layer (October 28, 2026).
   Loaded after the compiled Astro CSS on every page and overrides its navy and
   gold look so the site reads as its own brand, apart from the second-chance
   sites. Direction: warm limestone background, ink text, one brick accent,
   system type, flat hairline cards. Change a value here, not in the pages.
   Deployment adds a content version so browsers refresh changed assets. */

/* Type: Newsreader (display) over Public Sans (text), self-hosted, SIL Open Font License (public/fonts/OFL-*.txt) */
@font-face { font-family: "Newsreader DAL"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/fonts/newsreader-display-wght-normal.woff2?v=8431fe7b9f) format("woff2-variations"), url(/fonts/newsreader-display-wght-normal.woff2?v=8431fe7b9f) format("woff2"); }
@font-face { font-family: "Public Sans DAL"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/fonts/public-sans-latin-wght-normal.woff2?v=fd76a14fbb) format("woff2-variations"), url(/fonts/public-sans-latin-wght-normal.woff2?v=fd76a14fbb) format("woff2"); }
@font-face { font-family: "Public Sans DAL"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url(/fonts/public-sans-latin-wght-italic.woff2?v=ae10f7f4de) format("woff2-variations"), url(/fonts/public-sans-latin-wght-italic.woff2?v=ae10f7f4de) format("woff2"); }

:root {
  --dal-bg: #f1f0ec;          /* limestone page background, low chroma */
  --dal-surface: #f8f7f4;     /* sections that sit on the page */
  --dal-card: #fdfcfa;        /* cards and form panels */
  --dal-sand: #e4e1da;        /* quiet call-to-action bands */
  --dal-ink: #1d1c19;         /* body text and headings */
  --dal-muted: #46423b;       /* secondary text, 9:1 on the page */
  --dal-line: #d6d2c9;        /* hairlines */
  --dal-dark: #22201c;        /* footer and dark sections */
  --dal-dark-2: #2d2a25;      /* raised areas inside dark sections */
  --dal-on-dark: #f4f1ea;
  --dal-on-dark-muted: #c9c2b5;
  --dal-accent: #9a3b20;      /* brick: buttons, links, eyebrows, 6.6:1 on the page */
  --dal-accent-hover: #7f2f18;
  --dal-accent-soft: #f3e4dc; /* tinted backgrounds */
  --dal-cta: #c24a22;         /* primary buttons only: 3.2:1 on charcoal, 4.3:1 on limestone, white text 4.9:1 */
  --dal-cta-hover: #a63e1c;
  --dal-accent-on-dark: #e9a68b; /* brick tint for text on charcoal, 8:1 */
  --dal-radius: 4px;
  --dal-radius-control: 6px;
  --dal-font: "Public Sans DAL", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --dal-display: "Newsreader DAL", Georgia, "Times New Roman", serif;
  --dal-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dal-focus: 0 0 0 3px rgba(154, 59, 32, 0.35);

  /* the compiled CSS reads these */
  --brand-primary: var(--dal-ink);
  --brand-primary-container: var(--dal-dark);
  --brand-accent: var(--dal-accent);
  --brand-text-dark: var(--dal-ink);
  --brand-text-muted: var(--dal-muted);
  --brand-background: var(--dal-bg);
  --brand-surface: var(--dal-card);
  --brand-outline: var(--dal-line);
}

/* ---------- type ----------
   Display: Newsreader 500, display optical size 32, for h1 and h2.
   Text: Public Sans 400 at 17px / 1.6; h3 and card titles in Public Sans 600. */
html { background: var(--dal-bg); }
body { font-family: var(--dal-font); background-color: var(--dal-bg); color: var(--dal-ink); font-size: 17px; line-height: 1.6; }
h1, h2, h1.font-heading, h2.font-heading { font-family: var(--dal-display); font-weight: 500; font-optical-sizing: auto; letter-spacing: -0.015em; }
h1.font-heading { font-size: clamp(2.2rem, 2.6vw + 1.1rem, 3.2rem); line-height: 1.08; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
h2.font-heading.text-3xl, h2.font-heading.text-4xl, h2.font-heading.lg\:text-4xl { font-size: clamp(1.9rem, 2.2vw + 1.05rem, 2.75rem); line-height: 1.1; }
h3, h4, .font-heading:not(h1):not(h2) { font-family: var(--dal-font); font-weight: 600; letter-spacing: -0.01em; }
#site-header .font-heading, footer .font-heading { font-family: var(--dal-display); font-weight: 600; letter-spacing: -0.01em; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.leading-relaxed { line-height: 1.6; }
::selection { background: var(--dal-accent-soft); color: var(--dal-ink); }

/* ---------- surfaces ---------- */
.bg-white { background-color: var(--dal-surface); }
.bg-brand-background { background-color: var(--dal-bg); }
.bg-primary-500, .card.bg-primary-500 { background-color: var(--dal-dark); }
.bg-brand-container { background-color: var(--dal-dark); }
.bg-primary-500\/40 { background-color: rgba(34, 32, 28, 0.4); }
.bg-brand-gold { background-color: var(--dal-sand); }
.bg-accent-50 { background-color: var(--dal-accent-soft); }
.card { background-color: var(--dal-card); border-color: transparent; border-radius: var(--dal-radius); }
.card.bg-white { background-color: var(--dal-card); }
.card.bg-brand-background { background-color: var(--dal-bg); }
/* No borders on cards: they read by background against the section instead */
.bg-white .card, .bg-white .card.bg-white { background-color: var(--dal-bg); }
.bg-brand-background .card, .bg-brand-background .card.bg-white { background-color: var(--dal-card); }
.card.bg-primary-500, .bg-primary-500 .card { background-color: var(--dal-dark-2); }
.card:hover, .card.border-white\/20, .card.border-white\/20:hover { border-color: transparent; }
a.card:hover { background-color: #ebe9e3; }
.bg-brand-background a.card:hover { background-color: #fff; }
.rounded-card, .rounded-b-card { border-radius: var(--dal-radius); }
.rounded-b-card { border-top-left-radius: 0; border-top-right-radius: 0; }
.shadow-card, .card-elevated { box-shadow: none; }
.card-elevated { border-color: transparent; }

/* ---------- service list (was a grid of image cards) ---------- */
.svc-list { display: grid; grid-template-columns: 1fr; column-gap: 3.5rem; row-gap: 0.5rem; }
@media (min-width: 768px) { .svc-list { grid-template-columns: 1fr 1fr; } }
.svc-row { display: block; padding: 1rem 0 1.25rem; color: inherit; text-decoration: none; }
.svc-row h3 { font-size: 1.2rem; line-height: 1.3; margin-bottom: 0.4rem; }
.svc-row p { font-size: 0.97rem; color: var(--dal-muted); line-height: 1.55; }
.svc-row:hover h3, .svc-row:focus-visible h3 { color: var(--dal-accent); }

/* ---------- no pills, badges or number circles ---------- */
li.rounded-full.bg-brand-background { background: none; border: 0; border-radius: 0; padding: 0; font-weight: 500; color: var(--dal-ink); }
span.rounded-full.border-brand-outline { background: none; border: 0; border-radius: 0; padding: 0; font-size: 0.85rem; color: var(--dal-muted); }
div.w-14.h-14.rounded-full.border-2 { width: auto; height: auto; border: 0; border-radius: 0; justify-content: flex-start; font-family: var(--dal-display); font-size: 2.25rem; font-weight: 500; line-height: 1; margin-bottom: 0.75rem; color: inherit; }
span.w-1\.5.h-1\.5.rounded-full { display: none; }

/* Photo heroes: a warm charcoal tint, 80% behind the text on the left easing
   to 55% on the right so the photo still reads. Phones get a flat 72% because
   the text spans the full width. White text stays above 7:1 on any photo. */
.hero-gradient, .bg-gradient-to-r, .dal-scrim {
  background-color: transparent;
  background-image: linear-gradient(90deg, rgba(24, 22, 19, 0.80) 0%, rgba(24, 22, 19, 0.74) 40%, rgba(24, 22, 19, 0.55) 100%);
}
@media (max-width: 767px) {
  .hero-gradient, .bg-gradient-to-r, .dal-scrim { background-image: none; background-color: rgba(24, 22, 19, 0.72); }
}

/* ---------- text colors ---------- */
.text-primary-500, .text-brand-ink { color: var(--dal-ink); }
.text-primary-500\/80 { color: rgba(29, 28, 25, 0.8); }
.text-brand-slate { color: var(--dal-muted); }
/* One accent, one role: brick marks things you can click. Other text that used the gold accent becomes ink. */
.text-accent-700, .text-accent-600 { color: var(--dal-ink); }
a.text-accent-700, a .text-accent-700, a.text-accent-600, .text-accent-700 a, button.text-accent-700 { color: var(--dal-accent); }
.hover\:text-accent-700:hover, .focus\:text-primary-500:focus { color: var(--dal-accent); }
.text-brand-gold { color: var(--dal-on-dark); }
a.text-brand-gold, a .text-brand-gold { color: var(--dal-accent-on-dark); }
.hover\:text-brand-gold:hover { color: var(--dal-accent-on-dark); }
.border-brand-outline { border-color: var(--dal-line); }
.border-brand-gold, .hover\:border-brand-gold:hover { border-color: var(--dal-accent); }
.border-accent-500 { border-color: var(--dal-accent); }
.focus\:bg-brand-gold:focus { background-color: var(--dal-accent); color: #fff; }
.focus\:ring-primary-500:focus { --tw-ring-color: var(--dal-accent); }
a { text-underline-offset: 0.18em; }

/* ---------- buttons ---------- */
.btn { border-radius: var(--dal-radius-control); text-transform: none; letter-spacing: 0; font-size: 0.95rem; font-weight: 600; padding: 14px 22px; }
.btn-gold { background-color: var(--dal-accent); color: #fff; border-color: var(--dal-accent); }
.btn-gold:hover { background-color: var(--dal-accent-hover); border-color: var(--dal-accent-hover); color: #fff; }
.btn-outline-gold { color: var(--dal-on-dark); border-color: rgba(244, 241, 234, 0.55); }
.btn-outline-gold:hover { background-color: rgba(244, 241, 234, 0.08); color: #fff; border-color: var(--dal-on-dark); }
.btn-navy { background-color: var(--dal-ink); border-color: var(--dal-ink); color: var(--dal-bg); }
.btn-navy:hover { background-color: #000; }
.btn-outline-navy { color: var(--dal-ink); border-color: var(--dal-ink); }
.btn-outline-navy:hover { background-color: var(--dal-ink); color: var(--dal-bg); }
/* a gold band became sand, so its buttons need ink */
.bg-brand-gold .btn-navy { background-color: var(--dal-ink); }

/* ---------- rules the compiled CSS hardcodes ---------- */
.prose-brand h2 { font-family: var(--dal-display); font-weight: 500; color: var(--dal-ink); letter-spacing: -0.015em; }
.prose-brand h3 { font-family: var(--dal-font); font-weight: 600; color: var(--dal-ink); }
.prose-brand a { color: var(--dal-accent); }
.prose-brand a:hover { color: var(--dal-accent-hover); text-decoration-color: currentColor; }
.prose-brand blockquote { border-left-color: var(--dal-accent); background-color: var(--dal-card); border-radius: 0; }
.prose-brand th { background-color: var(--dal-dark); color: var(--dal-on-dark); }
.prose-brand strong { color: var(--dal-ink); }
.text-gold { color: var(--dal-accent-on-dark); }
.bg-gold { background-color: var(--dal-accent); }
.border-gold, .hover\:border-accent-700:hover { border-color: var(--dal-accent); }
.border-primary-500 { border-color: var(--dal-ink); }
.data-dossier-header { background-color: var(--dal-dark); }
.focus-ring:focus-visible { box-shadow: 0 0 0 2px var(--dal-bg), 0 0 0 4px var(--dal-accent); }
.btn-outline-navy:hover, .btn-navy:hover { border-color: var(--dal-ink); }

/* the trust bar under each hero: plain text, no check marks */
section.bg-brand-container > .container-max > ul > li > svg,
section.border-y.border-brand-outline > .container-max > ul > li.flex.gap-3 > svg,
li.flex.gap-3.card > svg:first-child,
li.flex.gap-3.text-sm.text-brand-slate > svg:first-child { display: none; }
/* plain list marker where the check marks were */
li.flex.gap-3.text-sm.text-brand-slate::before { content: ""; flex: 0 0 6px; height: 6px; margin-top: 0.62em; background: var(--dal-muted); }

/* ---------- focus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--dal-accent); outline-offset: 2px; box-shadow: none;
}
.bg-primary-500 a:focus-visible, .bg-primary-500 button:focus-visible, footer a:focus-visible { outline-color: var(--dal-accent-on-dark); }

/* ---------- header: light, hairline ---------- */
#site-header { background-color: rgba(241, 240, 236, 0.94); border-bottom: 1px solid transparent; transition: border-color 200ms var(--dal-ease); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
#site-header .text-white, #site-header .text-white\/80, #site-header .text-white\/75 { color: var(--dal-ink); }
#site-header .hover\:text-brand-gold:hover, #site-header .hover\:text-white:hover { color: var(--dal-accent); }
#site-header .btn-outline-gold { color: var(--dal-accent); border-color: var(--dal-accent); }
#site-header .btn-outline-gold:hover { background-color: var(--dal-accent); color: #fff; }
#site-header .font-heading { font-weight: 700; letter-spacing: -0.02em; }
#site-header .bg-white { background-color: var(--dal-card); }
#mobile-menu { background-color: var(--dal-surface); border-top-color: var(--dal-line); }
#mobile-menu .text-white, #mobile-menu .text-white\/80, #mobile-menu .text-white\/75, #mobile-menu .text-white\/70 { color: var(--dal-ink); }
#mobile-menu .hover\:text-brand-gold:hover, #mobile-menu .hover\:text-white:hover { color: var(--dal-accent); }
#mobile-menu .hover\:bg-white\/5:hover { background-color: rgba(29, 28, 25, 0.04); }
#mobile-menu .border-white\/10 { border-color: var(--dal-line); }
#mobile-menu .btn-outline-gold { color: var(--dal-accent); border-color: var(--dal-accent); }

/* ---------- footer ---------- */
footer.bg-primary-500 { background-color: var(--dal-dark); }
footer .text-white\/75, footer .text-white\/70, footer .text-white\/60, footer .text-white\/50 { color: var(--dal-on-dark-muted); }

/* ---------- the lead form (copied from the second-chance site) ----------
   Its own <style> sits in the page body, after this file, so these rules carry
   one extra class of weight. */
body .sca-form {
  --bg: transparent; --text: var(--dal-ink); --muted: var(--dal-muted); --accent: var(--dal-accent);
  --accent-hover: var(--dal-accent-hover); --border: #cfc6b6; --field-bg: #fff; --font: var(--dal-font); --radius: var(--dal-radius-control);
  font-family: var(--dal-font); background: transparent;
}
body .sca-form .sca-form-title { font-weight: 650; letter-spacing: -0.02em; font-size: 24px; }
body .sca-form select:focus, body .sca-form input:focus, body .sca-form textarea:focus { border-color: var(--dal-accent); box-shadow: var(--dal-focus); }
body .sca-form .cb-label input[type="checkbox"] { accent-color: var(--dal-accent); }
body .sca-form .btn-submit { background: var(--dal-accent); color: #fff; font-weight: 600; }
body .sca-form .btn-submit:hover { background: var(--dal-accent-hover); }
body .sca-form .consent-text a { color: var(--dal-accent); }
body .sca-form .form-wrap { padding-left: 0; padding-right: 0; }

/* ---------- live rates module ---------- */
.ar-module table thead tr { background-color: var(--dal-dark); }

/* ---------- floating call and list buttons ----------
   On phones they become one slim bar along the bottom edge, and the page gets
   matching padding so the bar never covers text. */
@media (max-width: 1023px) {
  body { padding-bottom: 72px; }
  .fixed.bottom-4.right-4.z-40 {
    left: 0; right: 0; bottom: 0; flex-direction: row; align-items: stretch; gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--dal-bg);
    border-top: 1px solid var(--dal-line);
  }
  .fixed.bottom-4.right-4.z-40 > a { flex: 1 1 0; min-height: 48px; margin: 0; box-shadow: none; }
  .fixed.bottom-4.right-4.z-40 > a[href^="tel:"] {
    width: auto; height: auto; border-radius: var(--dal-radius-control); background: var(--dal-card);
    color: var(--dal-ink); border-color: var(--dal-ink); gap: 8px; font-weight: 600; font-size: 0.95rem;
  }
  .fixed.bottom-4.right-4.z-40 > a[href^="tel:"]::after { content: "Call"; }
  .fixed.bottom-4.right-4.z-40 > a[href^="tel:"] svg { width: 18px; height: 18px; }
  .fixed.bottom-4.right-4.z-40 > .btn { font-size: 0.95rem; padding: 12px 16px; }
}
@media (min-width: 1024px) {
  .fixed.bottom-4.right-4.z-40 > .btn { box-shadow: none; }
}

/* ---------- reading comfort (taste-skill inspection) ----------
   Running text in full ink, nothing under 13px, paragraphs capped near 70
   characters, no tracked uppercase labels, plain links instead of pin chips. */
.text-brand-slate { color: var(--dal-muted); }
.text-xs { font-size: 13px; line-height: 1.45; }
.text-\[10px\], .text-\[11px\] { font-size: 13px !important; }
.uppercase { text-transform: none; }
.tracking-wide, .tracking-wider, .tracking-widest { letter-spacing: 0; }
main p { max-width: 70ch; }
.text-center p, p.text-center, .mx-auto > p { margin-inline: auto; }
a.flex.items-center.gap-2.rounded.bg-brand-background { background: none; border: 0; padding: 0.25rem 0; font-weight: 500; color: var(--dal-accent); }
a.flex.items-center.gap-2.rounded.bg-brand-background > svg { display: none; }
.btn, .btn:hover, .btn-gold, .btn-gold:hover { box-shadow: none; }

/* ---------- primary calls to action ----------
   One look for every "Get my list": brighter brick, solid, 56px tall. The
   header button is solid too, so the action is in view on every screen.
   Secondary buttons stay outlined so each screen has one obvious primary. */
.btn-gold, .sca-form .btn-submit, body .sca-form .btn-submit,
.bg-brand-gold .btn-navy, #site-header .btn-outline-gold, #mobile-menu .btn-outline-gold {
  background-color: var(--dal-cta); border-color: var(--dal-cta); color: #fff;
}
.btn-gold:hover, body .sca-form .btn-submit:hover, .bg-brand-gold .btn-navy:hover,
#site-header .btn-outline-gold:hover, #mobile-menu .btn-outline-gold:hover {
  background-color: var(--dal-cta-hover); border-color: var(--dal-cta-hover); color: #fff;
}
main .btn-gold, .bg-brand-gold .btn-navy { min-height: 56px; padding: 16px 28px; font-size: 1.0625rem; }
body .sca-form .btn-submit { min-height: 56px; font-size: 1.0625rem; }
#site-header .btn-outline-gold { font-weight: 600; }

/* ---------- motion ----------
   One entrance: the opening heading and the blocks after it rise 12px and fade
   in, 600ms, 80ms apart. One scroll behavior: the header's hairline appears
   once the page scrolls (brand-v1.js). Nothing else animates. */
#site-header.is-scrolled { border-bottom-color: var(--dal-line); }
@keyframes dal-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  main section:first-of-type h1 { animation: dal-rise 600ms var(--dal-ease) both; }
  main section:first-of-type h1 + * { animation: dal-rise 600ms var(--dal-ease) 80ms both; }
  main section:first-of-type h1 + * + * { animation: dal-rise 600ms var(--dal-ease) 160ms both; }
  main section:first-of-type h1 + * + * + * { animation: dal-rise 600ms var(--dal-ease) 240ms both; }
  .home-hero #start { animation: dal-rise 600ms var(--dal-ease) 160ms both; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- area photos (Wikimedia Commons, credited on /photo-credits/) ---------- */
.area-photo { margin: 0; }
.area-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--dal-radius); display: block; }
.area-photo figcaption { margin-top: 0.6rem; font-size: 0.78rem; color: var(--dal-muted); line-height: 1.4; }
.area-photo figcaption a { color: inherit; text-decoration: underline; }
.home-hero { min-height: 0; }

/* /get-my-list/: one centered column. Heading, the form, then what happens next.
   The first field starts near 270px on a 390x664 phone, so it is on the first screen. */
.gml { background: var(--dal-bg); padding: 20px 16px 56px; }
.gml-col { max-width: 560px; margin: 0 auto; }
.gml-h1 { margin: 0; font-family: var(--dal-display); font-weight: 600; font-size: 1.75rem; line-height: 1.12; letter-spacing: -0.015em; color: var(--dal-ink); }
.gml-sub { margin: 6px 0 14px; font-size: 15px; line-height: 1.45; color: var(--dal-muted); }
.gml-card { background: var(--dal-card); border: 1px solid var(--dal-line); border-radius: 8px; padding: 18px 16px 22px; }
body .gml .sca-form .form-wrap { padding: 0; max-width: none; }
.gml-next, .gml-faq { margin-top: 40px; }
.gml-next h2, .gml-faq h2 { margin: 0 0 14px; font-family: var(--dal-display); font-weight: 600; font-size: 1.5rem; line-height: 1.2; color: var(--dal-ink); }
.gml-next ol { list-style: none; counter-reset: gml; margin: 0; padding: 0; display: grid; gap: 14px; }
.gml-next li { counter-increment: gml; position: relative; padding-left: 44px; font-size: 16px; line-height: 1.5; color: var(--dal-ink); }
.gml-next li::before { content: counter(gml); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--dal-ink); color: #fff; font-weight: 700; font-size: 15px; line-height: 30px; text-align: center; }
.gml-next li strong { display: block; }
.gml-small { margin-top: 18px; font-size: 14px; line-height: 1.5; color: var(--dal-muted); }
.gml-small a { color: var(--dal-accent); text-decoration: underline; }
.gml-faq details summary { cursor: pointer; }
@media (min-width: 768px) {
  .gml { padding: 48px 24px 80px; }
  .gml-h1 { font-size: 2.5rem; }
  .gml-sub { font-size: 17px; margin: 10px 0 22px; }
  .gml-card { padding: 28px 32px 32px; }
}

/* Lead forms: what the renter already did (lead-form-v1.js), the phone hint, the bot trap */
.sca-form .lf-memory { margin: 0 0 18px; padding: 12px 14px; background: var(--dal-accent-soft); border-left: 3px solid var(--dal-accent); border-radius: var(--dal-radius-control); font-size: 14px; line-height: 1.45; color: var(--dal-ink); }
.sca-form .lf-memory p { margin: 0; }
.sca-form .lf-memory p + p, .sca-form .lf-memory ul + p { margin-top: 6px; }
.sca-form .lf-memory .lf-mem-h { font-weight: 700; font-size: 15px; }
.sca-form .lf-memory ul { list-style: none; margin: 6px 0 0; padding: 0; }
.sca-form .lf-memory li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 0; border-top: 1px solid rgba(29, 28, 25, 0.1); }
.sca-form .lf-memory li:first-child { border-top: 0; }
.sca-form .lf-memory li span { min-width: 0; overflow-wrap: anywhere; }
body .sca-form .lf-memory .lf-mem-x { flex: none; background: none; border: 0; padding: 6px 0 6px 4px; min-height: 32px; font: inherit; font-size: 13px; font-weight: 600; color: var(--dal-accent); text-decoration: underline; cursor: pointer; }
.sca-form .lf-err { color: #991b1b; font-size: 14px; line-height: 1.4; margin: 4px 0 0; }
.lf-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* "Areas we cover" on area pages: each sub-area with its own short description */
.sub-areas { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 1.5rem 2.25rem; }
@media (min-width: 640px) { .sub-areas { grid-template-columns: 1fr 1fr; } }
.sub-areas p { max-width: none; }

/* Logo (brand kit, cropped to its artwork). Charcoal on the light header, reversed in the footer. */
.dal-logo { display: block; height: 68px; width: auto; max-width: 62vw; object-fit: contain; object-position: left center; }
/* Desktop: a taller bar so the bigger logo keeps breathing room above and below */
@media (min-width: 1024px) { .dal-logo { height: 84px; max-width: none; } #site-header nav.h-20 { height: 6rem; } }
.dal-logo-footer { display: block; height: 72px; width: auto; }

/* Breadcrumb to title: room to breathe on every page that stacks them */
nav[aria-label="Breadcrumb"] + h1 { margin-top: 1.5rem; }

/* Area and money page heroes: keep the CTA above the fold on phones */
@media (max-width: 639px) {
  .hero-section[data-hero] { min-height: 0; }
  .hero-section[data-hero] > .container-max { padding-top: 1.5rem; padding-bottom: 2rem; }
  .hero-section[data-hero] nav[aria-label="Breadcrumb"] + h1 { margin-top: .75rem; font-size: 1.75rem; line-height: 1.2; margin-bottom: .75rem; }
  .hero-section[data-hero] nav[aria-label="Breadcrumb"] ~ p.text-lg { font-size: 1rem; line-height: 1.5; margin-bottom: 1.25rem; }
}
@media (max-width: 399px) {
  main > section:first-of-type .container-max.py-16 { padding-top: 2.5rem; }
  main > section:first-of-type h1.text-4xl { font-size: 1.875rem; }
}

/* Areas we cover: tap-to-open cards beside the area photo */
.sa-wrap { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .sa-wrap { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; } .sa-photo { position: sticky; top: 104px; } }
.sa-list.sub-areas { grid-template-columns: 1fr; gap: .6rem; margin: 0; }
.sa { background: var(--dal-card, #fdfcfa); border: 1px solid rgba(29,28,25,.08); border-radius: 14px; }
.sa summary { list-style: none; cursor: pointer; padding: 1rem 3rem 1rem 1.1rem; position: relative; display: flex; flex-direction: column; gap: .25rem; }
.sa summary::-webkit-details-marker { display: none; }
.sa summary::after { content: "+"; position: absolute; right: 1.1rem; top: 1rem; font-size: 1.25rem; font-weight: 700; color: var(--dal-cta, #c24a22); }
.sa[open] summary::after { content: "\2212"; }
.sa-n { font-weight: 700; font-size: 1.0625rem; color: var(--dal-ink, #1d1c19); }
.sa-t { font-size: .9375rem; line-height: 1.5; color: var(--dal-muted, #46423b); }
.sa p { padding: 0 1.1rem 1rem; font-size: .9375rem; line-height: 1.6; color: var(--dal-ink, #1d1c19); margin: 0; }
.sa-photo { margin: 0; border-radius: 16px; overflow: hidden; }
.sa-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 1024px) { .lg\:col-span-7:has(> .sa-wrap) { grid-column: 1 / -1; } }

/* Read more on long area page sections */
section.fold { --fold-bg: #f8f7f4; }
section.fold.bg-white { --fold-bg: #ffffff; }
.fold-btn { display: block; margin: 1rem auto 0; font: inherit; font-weight: 700; color: var(--dal-cta, #c24a22); background: #fff; border: 1.5px solid currentColor; border-radius: 99px; padding: .65rem 1.4rem; min-height: 44px; cursor: pointer; }

/* Drive time to work in the deal finder */
.fd-work { margin: 0 0 .75rem; background: var(--dal-card, #fdfcfa); border: 1px solid rgba(29,28,25,.08); border-radius: 14px; padding: 1rem; }
.fd-work label { display: block; font-size: .75rem; font-weight: 700; color: var(--dal-muted, #46423b); margin-bottom: .35rem; }
.fd-work div { display: flex; gap: .5rem; flex-wrap: wrap; }
.fd-work input { flex: 1 1 14rem; font: inherit; font-size: .9375rem; padding: .6rem .7rem; border: 1px solid rgba(29,28,25,.2); border-radius: 10px; min-height: 44px; background: #fff; }
.fd-work button { font: inherit; font-weight: 700; color: #fff; background: var(--dal-ink, #1d1c19); border: 0; border-radius: 10px; padding: .6rem 1rem; min-height: 44px; cursor: pointer; }
.fd-work-note { font-size: .8125rem; color: var(--dal-muted, #46423b); margin: .4rem 0 0; min-height: 1rem; }
.d-drive { color: var(--dal-ink, #1d1c19); font-weight: 700; }
.df .d-drive { color: #fff; }

/* Shared property sizing lives outside the weekly generated page styles.
   Equal grid tracks grow for long copy rather than hiding rental details. */
body .deals:not(:has(.deal-feature)) { grid-auto-rows: 1fr; }
body .deals > li > .dr { height: 100%; box-sizing: border-box; }
body .deals .dr-has-ph { align-content: start; }
body .deals .dr-ph { flex-shrink: 0; }
body .opc ul { grid-auto-rows: 1fr; }
body .opc .op-li { display: flex; }
body .opc .op { width: 100%; }
body .opc .op-go { margin-top: auto; padding-top: .4rem; }
body .opc .op-ph { flex-shrink: 0; aspect-ratio: 16 / 9; max-height: none; }
@media (min-width: 900px) {
  body .deals > li > .dr { min-height: 20rem; }
  body .deals .dr-has-ph {
    grid-template-columns: minmax(230px, 35%) minmax(0, 1.3fr) minmax(0, 1fr) auto auto;
    align-content: stretch;
  }
  body .deals .dr-ph { min-height: 20rem; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  body .deals .dr-has-ph {
    grid-template-columns: minmax(230px, 35%) minmax(0, 1fr) auto;
    grid-template-areas: "ph main price" "ph deal go";
    padding-right: 1.25rem;
    column-gap: 1rem;
  }
  body .deals .dr-has-ph .dr-go { align-self: start; padding-bottom: 3rem; }
  body .deals > li:has(.dr-has-ph) .sv { top: auto; bottom: 1rem; transform: none; }
}

/* Native card images keep the reserved photo box and gallery controls. */
.df-photo,.dr-ph,.op-ph { position:relative; overflow:hidden; }
.dal-card-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; user-select:none; }
.df-nav,.df-count { z-index:1; }
@media (pointer:coarse) { .df-nav { min-width:44px; min-height:44px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto !important; } *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }
footer a[href^="/documents/"] { display:inline-flex; align-items:center; min-height:44px; }
.dal-picture { display:contents; }

/* Keep metric labels first in reading order, with values first visually. */
.dal-stats > div { display:flex; flex-direction:column; }
.dal-stats dt { order:1; }
.dal-stats dd:first-of-type { order:0; }
.dal-stats dd + dd { order:2; }
@media (pointer:coarse) {
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size:16px !important; }
}
body .sz .sz-off { opacity:1; color:var(--dal-muted); background:var(--dal-surface); }

body h2.calculator-followup { font-family:var(--dal-font); font-weight:600; letter-spacing:-.01em; }