/* Yovy’s Upholstery — brand tokens from the Brand & Design Guide (pp. 6–7) */
:root {
  --navy: #091521;
  --ivory: #F5EFE5;
  --tan: #DEBD93;
  --oxblood: #751D1D;
  --oxblood-dark: #5c1616;
  --gold: #B77D32;
  --paper: #FFFDF8;
  --ink: #091521;
  --muted: #3C4450;
  --line: rgba(9, 21, 33, 0.18);
  --serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", Arial, Helvetica, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--oxblood); }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.2; margin: 0 0 0.6em; color: var(--ink); }
h1 { font-size: clamp(2.5rem, 1.6rem + 3.2vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); }
h3 { font-family: var(--sans); font-weight: 700; font-size: 1.2rem; }
p { margin: 0 0 1em; max-width: 68ch; }
.wrap { width: min(1120px, calc(100% - 32px)); margin-inline: auto; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 8px; z-index: 10; background: var(--ivory); color: var(--navy); padding: 8px 12px; font-weight: 700; }
:focus-visible { outline: 3px solid var(--oxblood); outline-offset: 3px; }
.site-header :focus-visible, .hero :focus-visible, .site-footer :focus-visible, .cta-band :focus-visible, .landing :focus-visible { outline-color: var(--tan); }
main:focus { outline: none; }

/* Header */
.site-header { background: var(--navy); color: var(--ivory); padding: 18px 0; }
.head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.brand { display: block; flex: 0 0 auto; line-height: 0; }
.brand img { width: 180px; height: 180px; }
.head-right { flex: 1 1 360px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 28px; }
.nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; list-style: none; margin: 0; padding: 0; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ivory); font-weight: 700; text-decoration: none; white-space: nowrap; }
.nav a:hover { text-decoration: underline; text-decoration-color: var(--tan); text-underline-offset: 4px; }
.nav a[aria-current="page"] { color: var(--tan); text-decoration: underline; text-underline-offset: 6px; }
.head-actions { display: flex; align-items: center; flex: 0 0 auto; }
.lang { color: var(--ivory); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.lang a, .lang span[lang] { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: var(--ivory); text-decoration: none; font-weight: 700; }
.lang a:hover { text-decoration: underline; }
.lang span[aria-current] { color: var(--tan); text-decoration: underline; text-underline-offset: 6px; }
.lang .sep { opacity: 0.6; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border: 2px solid transparent; border-radius: 2px; font: 700 1rem/1.2 var(--sans); text-decoration: none; cursor: pointer; }
.btn-primary { background: var(--oxblood); color: var(--ivory); }
.btn-primary:hover { background: var(--oxblood-dark); color: var(--ivory); }
.btn-ghost { background: transparent; color: var(--ivory); border-color: var(--tan); }
.btn-ghost:hover { background: rgba(222, 189, 147, 0.12); }
.text-link { font-weight: 700; color: var(--oxblood); display: inline-flex; min-height: 44px; align-items: center; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Hero */
.hero { background: var(--navy); color: var(--ivory); padding: 48px 0 56px; }
.hero h1 { color: var(--ivory); }
.hero .lead { font-size: 1.125rem; color: var(--ivory); max-width: 60ch; margin-bottom: 1.5rem; }
.hero .text-link { color: var(--tan); }
.hero-grid { display: grid; gap: 32px; align-items: center; }
.hero-grid.has-fig { grid-template-columns: 1fr; }
.eyebrow { font-family: var(--serif); font-style: italic; color: var(--tan); font-size: 1.125rem; margin-bottom: 14px; }
.hero-fig { margin: 0; background: var(--ivory); padding: 10px; border: 1px solid rgba(222, 189, 147, 0.5); }
.hero-fig img { width: 100%; height: auto; }
.hero-slides { position: relative; }
.hero-slides picture { display: block; }
.hero-slides picture + picture { position: absolute; inset: 10px; opacity: 0; transition: opacity 2.4s ease-in-out; }
.hero-slides picture + picture img { height: 100%; object-fit: cover; }
.hero-slides picture.is-active { opacity: 1; }
.hero .actions { gap: 14px 16px; }

/* Content */
.prose { padding: 48px 0 56px; }
.prose > h2 { margin-top: 44px; }
.prose > h2:first-child { margin-top: 0; }
.prose > h2:not(:first-child)::before { content: ""; display: block; border-top: 2px dashed var(--gold); opacity: 0.7; margin-bottom: 28px; }
.list { padding-left: 1.25em; margin: 0 0 1.25em; }
.list li { margin-bottom: 0.45em; max-width: 68ch; }
.cards { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 8px 0 8px; }
.card { display: block; background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--oxblood); padding: 20px; color: var(--ink); text-decoration: none; }
.card:hover { border-top-color: var(--gold); }
.card h3 { color: var(--navy); margin-bottom: 6px; }
.card p { color: var(--muted); margin: 0; }
.steps { list-style: none; counter-reset: step; margin: 0 0 8px; padding: 0; display: grid; gap: 16px; }
.steps li { counter-increment: step; background: var(--paper); border-left: 4px solid var(--tan); padding: 16px 20px; }
.steps li::before { content: counter(step); display: block; font-family: var(--serif); font-size: 1.5rem; color: var(--oxblood); line-height: 1; margin-bottom: 8px; }
.steps h3 { margin-bottom: 6px; }
.steps p { margin: 0; color: var(--muted); }
.gallery { display: grid; gap: 20px; grid-template-columns: 1fr; margin: 8px 0 32px; }
.tile { margin: 0; background: var(--paper); padding: 10px; border: 1px solid var(--line); }
.tile img { width: 100%; height: auto; }
.photo { margin: 8px 0 32px; max-width: 480px; background: var(--paper); padding: 10px; border: 1px solid var(--line); }
.photo img { width: 100%; height: auto; }
.photo figcaption { margin: 10px 2px 0; font-size: 0.95rem; color: var(--muted); }
.photo figcaption strong { font-weight: 700; color: var(--ink); }
.photo-desc { display: block; margin-top: 4px; }
.photo-link { display: block; cursor: zoom-in; }
.photo-link:hover img { opacity: 0.92; }

/* Enlarged photo viewer (js/lightbox.js) */
dialog.lightbox { border: 0; padding: 0; margin: auto; background: transparent; color: var(--ivory); max-width: min(96vw, 1240px); max-height: 96vh; overflow: visible; }
dialog.lightbox::backdrop { background: rgba(9, 21, 33, 0.9); }
dialog.lightbox figure { margin: 0; }
dialog.lightbox img { display: block; width: auto; max-width: 100%; max-height: calc(96vh - 72px); margin: 0 auto; background: var(--paper); border: 4px solid var(--paper); }
dialog.lightbox figcaption { margin: 12px 4px 0; text-align: center; font-size: 1rem; }
.lightbox-close { position: absolute; top: -8px; right: -8px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--paper); color: var(--navy); cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.lightbox-close svg { width: 22px; height: 22px; }
.lightbox-close:hover { background: var(--tan); }
dialog.lightbox :focus-visible { outline-color: var(--tan); }
body:has(dialog.lightbox[open]) { overflow: hidden; }
.hours { border-collapse: collapse; margin: 0 0 24px; max-width: 480px; width: 100%; }
.hours caption { text-align: left; font-weight: 700; padding: 0 0 6px; }
.hours th, .hours td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); font-weight: 400; vertical-align: top; }
.hours th { width: 50%; }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { font-weight: 700; cursor: pointer; min-height: 48px; display: flex; align-items: center; }
.faq details p { margin: 0 0 14px; color: var(--muted); }
.communities { columns: 1; list-style: none; padding: 0; margin: 0 0 24px; }
.communities li { padding: 6px 0; border-bottom: 1px dotted var(--line); break-inside: avoid; }
.launch-note { background: var(--tan); color: var(--navy); font-weight: 700; padding: 12px 16px; max-width: 68ch; }

/* Call-to-action band (navy) */
.cta-band { background: var(--navy); color: var(--ivory); padding: 36px 28px; margin: 40px 0 0; border-top: 4px solid var(--gold); }
.cta-band h2 { color: var(--ivory); }
.cta-band h2::before { display: none; }
.cta-band p { color: var(--ivory); }
.cta-band .btn-ghost { color: var(--ivory); }

/* Quote form */
.form-intro { font-weight: 700; }
.quote-form { background: var(--paper); border: 1px solid var(--line); padding: 22px; max-width: 680px; }
.field { margin: 0 0 20px; }
.field label, .field legend { display: block; font-weight: 700; margin-bottom: 6px; padding: 0; }
fieldset.field { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; font: 400 1rem/1.4 var(--sans); color: var(--ink);
  background: #fff; border: 1.5px solid #6B7480; border-radius: 2px;
}
textarea { min-height: 150px; resize: vertical; }
input[type="file"] { font: 400 1rem var(--sans); min-height: 44px; max-width: 100%; }
.choice { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-right: 24px; font-weight: 400; }
.choice input { width: 20px; height: 20px; margin: 0; }
.hint { font-size: 0.95rem; color: var(--muted); margin: -2px 0 8px; }
.form-required { margin: 0 0 16px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.status { max-width: 680px; padding: 16px 20px; margin: 0 0 24px; background: var(--paper); border-left: 5px solid var(--navy); color: var(--ink); }
.status--error { border-left-color: var(--oxblood); }
.form-links { margin-top: 20px; }

/* Landing and 404 */
.landing { background: var(--navy); color: var(--ivory); min-height: 100vh; padding: 56px 0; display: flex; }
.landing-inner { margin: auto; text-align: center; max-width: 720px; }
.landing h1 { color: var(--ivory); margin: 12px 0 8px; }
.landing-logo { width: 300px; height: 300px; margin: 0 auto; }
.landing-slogan { font-family: var(--serif); font-size: 1.25rem; color: var(--tan); margin: 0 auto 4px; max-width: 46ch; }
.landing-es { font-style: italic; }
.landing-where, .landing-contact { color: var(--ivory); }
.landing-contact a { color: var(--tan); }
.landing .choose { margin: 40px 0 28px; }
.landing .choose h2 { font-family: var(--sans); font-size: 1.1rem; color: var(--tan); }
.landing .actions { justify-content: center; }
.landing .btn-primary { min-width: 180px; }
.landing .btn-ghost { min-width: 180px; }

/* Footer */
.site-footer { background: var(--navy); color: var(--ivory); padding: 48px 0 24px; border-top: 4px solid var(--gold); }
.footer-grid { display: grid; gap: 28px; }
.footer-brand { font-family: var(--serif); font-size: 1.5rem; margin-bottom: 8px; color: var(--ivory); }
.site-footer p { margin-bottom: 0.6em; }
.site-footer a { color: var(--tan); }
.site-footer h2 { font-family: var(--sans); font-size: 0.95rem; font-weight: 700; color: var(--tan); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.copyright { width: min(1120px, calc(100% - 32px)); margin: 32px auto 0; padding-top: 16px; border-top: 1px dashed var(--gold); font-size: 0.9rem; color: var(--tan); }

/* Breakpoints: mobile-first, 16px gutters, no horizontal scroll */
/* Google reviews carousel (data: build/reviews.json, buttons: js/reviews.js) */
.reviews { margin: 8px 0 32px; }
.reviews-summary { text-align: center; margin: 0 auto 20px; }
.reviews-summary p { margin: 0 auto; max-width: none; }
.reviews-excellent { font-family: var(--serif); font-size: 1.6rem; letter-spacing: 0.06em; color: var(--navy); }
.reviews-summary .stars { justify-content: center; margin: 6px 0 4px; }
.reviews-summary .stars svg { width: 30px; height: 30px; }
.reviews-count { color: var(--muted); }
.reviews-count, .reviews-google { font-size: 1rem; }
.reviews-google { font-weight: 700; color: var(--navy); margin-top: 2px; }
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 20px; height: 20px; fill: #F4B400; }
.reviews-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 4px; padding: 4px 4px 14px; margin: 0 -4px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--tan) transparent; }
.review { flex: 0 0 min(100%, 340px); scroll-snap-align: start; background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--gold); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.review-head { display: flex; align-items: center; gap: 12px; }
.avatar { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ivory); font-family: var(--serif); font-size: 1.2rem; }
.review-who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.review-name { font-size: 1.05rem; color: var(--ink); overflow-wrap: anywhere; }
.review-when { font-size: 0.9rem; color: var(--muted); }
.review-source { flex: 0 0 auto; align-self: flex-start; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.review-text { margin: 0; max-width: none; white-space: pre-line; }
.reviews-nav { display: flex; gap: 10px; justify-content: center; margin: 2px 0 0; }
.reviews-nav button { width: 44px; height: 44px; border: 2px solid var(--oxblood); border-radius: 50%; background: var(--paper); color: var(--oxblood); font-size: 1.2rem; cursor: pointer; display: grid; place-items: center; }
.reviews-nav button:hover { background: var(--oxblood); color: var(--ivory); }
.reviews-nav button:disabled { opacity: 0.35; cursor: default; background: var(--paper); color: var(--oxblood); }
.reviews-more { text-align: center; margin: 8px 0 0; max-width: none; }

@media (min-width: 600px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .communities { columns: 2; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .landing-logo { width: 360px; height: 360px; }
}
@media (min-width: 760px) {
  .quote-form { padding: 32px; }
}
@media (min-width: 900px) {
  .hero-grid.has-fig { grid-template-columns: 1.05fr 0.95fr; }
  .head-right { flex-wrap: nowrap; }
  .nav ul { justify-content: flex-end; }
}
@media (min-width: 960px) {
  .cards { grid-template-columns: repeat(4, 1fr); }
  .review { flex-basis: calc((100% - 32px) / 3); }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1.2fr 1.2fr; }
  .communities { columns: 3; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Language selector: globe + language names, divided by thin rules */
.lang { display: inline-flex; align-items: center; gap: 14px; color: var(--ivory); font-weight: 700; }
.lang .globe { width: 22px; height: 22px; flex: 0 0 auto; color: var(--ivory); }
.lang a, .lang span[lang] { display: inline-flex; align-items: center; min-height: 44px; color: var(--ivory); text-decoration: none; }
.lang a:hover { text-decoration: underline; text-underline-offset: 5px; }
.lang span[aria-current] { color: var(--tan); }
.divider { display: inline-block; width: 1px; height: 22px; align-self: center; background: rgba(245, 239, 229, 0.45); flex: 0 0 auto; }
.divider-tall { height: 30px; margin: 0 6px; }
.lang-head { gap: 12px; }
/* "En español" / "English" link inside the phone menu only */
.nav-lang { display: none; }
/* Phone menu button: hidden on wide screens; shown below 900px once js/nav.js has run */
.nav-toggle { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; margin-left: auto; border: 1px solid var(--tan); border-radius: 2px; background: transparent; color: var(--ivory); font: 700 1rem/1 var(--sans); cursor: pointer; }
.nav-toggle .cross { display: none; }
.nav-open .nav-toggle .bars { display: none; }
.nav-open .nav-toggle .cross { display: block; }
@media (max-width: 899px) {
  /* Phones and small tablets: logo + "Menu" button on one row; the links open as a list below.
     The header quote button is dropped - the hero's "Request a Quote" is right under it. */
  .head-actions { display: none; }
  .head-row { gap: 12px 16px; }
  .has-toggle .nav-toggle { display: inline-flex; }
  .has-toggle .head-right { display: none; flex: 1 1 100%; }
  .has-toggle.nav-open .head-right { display: flex; }
  .has-toggle .nav { width: 100%; border-top: 1px dashed var(--gold); padding-top: 8px; }
  .has-toggle .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .has-toggle .nav a { min-height: 50px; width: 100%; white-space: normal; }
  .has-toggle .nav-lang { display: inline-flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--gold); color: var(--tan); font-weight: 700; text-decoration: none; }
  .has-toggle .nav-lang svg { width: 22px; height: 22px; flex: 0 0 auto; }
  .has-toggle .nav-lang:hover span { text-decoration: underline; text-underline-offset: 4px; }
  /* Without JavaScript the links stay visible as a single row that scrolls sideways */
  .site-header:not(.has-toggle) .nav { width: 100%; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .site-header:not(.has-toggle) .nav::-webkit-scrollbar { display: none; }
  .site-header:not(.has-toggle) .nav ul { flex-wrap: nowrap; gap: 20px; }
}

/* Footer bar: social icons | globe + languages, centered, above the copyright line */
.footer-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 18px; margin-top: 36px; padding-top: 24px; border-top: 1px dashed var(--gold); }
.socials { display: flex; gap: 10px; }
.social { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--tan); border-radius: 50%; color: var(--tan); }
.social svg { width: 22px; height: 22px; }
.social:hover { background: rgba(222, 189, 147, 0.14); }
.copyright { border-top: 0; margin-top: 18px; padding-top: 0; text-align: center; }
.copyright a { color: var(--tan); }
.copyright .sep { margin: 0 6px; }
.legal-links { width: min(1120px, calc(100% - 32px)); margin: 6px auto 0; text-align: center; font-size: 0.9rem; color: var(--tan); }
.legal-links a { color: var(--tan); }
.legal-links .sep { margin: 0 6px; }

/* Footer "Cookie preferences" control is a <button> (it opens a panel, it does not navigate) styled like the legal links */
.link-button { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.legal-links .link-button { color: var(--tan); }

/* Footer on phones: social icons and the language switch stacked and centered (no divider between them),
   the legal links one per line, and room at the bottom so the accessibility widget does not cover them */
@media (max-width: 599px) {
  .site-footer { padding-bottom: 96px; }
  html.show--consent .site-footer { padding-bottom: calc(96px + var(--cc-bar-h, 120px)); }
  .footer-bar { flex-direction: column; gap: 18px; }
  .footer-bar .divider-tall { display: none; }
  .legal-links { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 14px; }
  .legal-links .sep { display: none; }
  .legal-links a, .legal-links .link-button { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Cookie consent banner (vanilla-cookieconsent) in brand colors. The library sets its variables on #cc-main, so override there;
   css/cookieconsent.css is linked before site.css so these win. */
#cc-main {
  --cc-font-family: var(--sans);
  --cc-bg: var(--paper);
  --cc-primary-color: var(--ink);
  --cc-secondary-color: var(--muted);
  --cc-link-color: var(--oxblood);
  --cc-btn-border-radius: 2px;
  --cc-modal-border-radius: 2px;
  --cc-pm-toggle-border-radius: 999px;
  --cc-btn-primary-bg: var(--oxblood);
  --cc-btn-primary-border-color: var(--oxblood);
  --cc-btn-primary-color: var(--ivory);
  --cc-btn-primary-hover-bg: var(--oxblood-dark);
  --cc-btn-primary-hover-border-color: var(--oxblood-dark);
  --cc-btn-primary-hover-color: var(--ivory);
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-border-color: var(--navy);
  --cc-btn-secondary-color: var(--navy);
  --cc-btn-secondary-hover-bg: var(--ivory);
  --cc-btn-secondary-hover-border-color: var(--navy);
  --cc-btn-secondary-hover-color: var(--navy);
  --cc-toggle-on-bg: var(--oxblood);
  --cc-toggle-readonly-bg: var(--navy);
  --cc-cookie-category-block-bg: var(--ivory);
  --cc-cookie-category-block-border: var(--ivory);
  --cc-cookie-category-block-hover-bg: #efe6d6;
  --cc-cookie-category-block-hover-border: #efe6d6;
  --cc-cookie-category-expanded-block-bg: transparent;
  --cc-cookie-category-expanded-block-hover-bg: #efe6d6;
  --cc-separator-border-color: var(--line);
  --cc-footer-bg: var(--ivory);
  --cc-footer-border-color: var(--line);
  --cc-footer-color: var(--muted);
  --cc-overlay-bg: rgba(9, 21, 33, 0.6);
}
#cc-main .cm__title, #cc-main .pm__title { font-family: var(--serif); font-weight: 400; }
#cc-main .cm { border-top: 4px solid var(--gold); }
#cc-main .pm__section-arrow { background: var(--tan); }
#cc-main .pm__section-arrow svg { stroke: var(--navy); }
#cc-main :focus-visible { outline: 3px solid var(--oxblood); outline-offset: 2px; }
/* While the consent bar is up it covers the bottom of the page, so give the footer enough extra bottom padding that the
   social icons, language switch and legal links can scroll above it. --cc-bar-h is the measured bar height, set by
   js/cookieconsent-config.js (fallback: a desktop-sized guess if the script has not measured yet). */
html.show--consent .site-footer { padding-bottom: calc(24px + var(--cc-bar-h, 120px)); }

/* Breadcrumbs: small trail above the page title on every inner page (matches the BreadcrumbList data). */
.crumbs { font-size: 0.95rem; margin: -16px 0 22px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.crumbs li { color: var(--tan); }
.crumbs li + li::before { content: "›"; margin: 0 8px; color: var(--tan); opacity: 0.8; }
.crumbs a { color: var(--ivory); text-decoration-color: var(--tan); text-underline-offset: 3px; }
.crumbs a:hover { color: var(--tan); }
.crumbs li[aria-current="page"] { color: var(--ivory); opacity: 0.85; }

/* Language suggestion bar (English pages; js/langbar.js shows it when the browser prefers Spanish). */
.langbar { background: var(--tan); color: var(--navy); border-bottom: 1px solid rgba(9, 21, 33, 0.25); }
.langbar-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding: 10px 0; }
.langbar p { margin: 0; max-width: none; }
.langbar-actions { display: flex; align-items: center; gap: 16px; }
.langbar .btn { min-height: 40px; padding: 8px 16px; }
.langbar .link-button { color: var(--navy); min-height: 40px; display: inline-flex; align-items: center; }
.langbar :focus-visible { outline-color: var(--oxblood); }