/* ==========================================================================
   Vanessa Caetano Translations & Interpreting — Shared Stylesheet
   ========================================================================== */

:root {
  --navy: #0A2540;
  --navy-light: #123863;
  --navy-soft: #E8EDF3;
  --gold: #C6A15B;
  --gold-soft: #F3E9D6;
  --white: #FFFFFF;
  --bg-soft: #F5F7FA;
  --text: #16212E;
  --text-muted: #5B6472;
  --border: #E3E7ED;
  --success-bg: #EAF6EE;
  --success-text: #1E6B3C;
  --dev-bg: #FFF7E6;
  --dev-border: #E3B341;
  --dev-text: #7A5B00;
  --whatsapp: #25D366;
  --whatsapp-dark: #1DA851;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 10px rgba(10, 37, 64, 0.06);
  --shadow-md: 0 12px 30px rgba(10, 37, 64, 0.10);
  --shadow-lg: 0 20px 50px rgba(10, 37, 64, 0.16);
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Manrope', 'Inter', sans-serif;
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 0.6em;
}

p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--navy);
  color: var(--white);
  padding: 12px 20px;
  z-index: 999;
  border-radius: var(--radius-sm);
}
.skip-link:focus {
  left: 24px;
  top: 12px;
}

section { padding: 96px 0; }
@media (max-width: 768px) {
  section { padding: 44px 0; }
}

.section-head {
  max-width: 640px;
  margin: 0 0 48px;
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 6px;
  margin-bottom: 16px;
}
.section-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.section-head p { color: var(--text-muted); font-size: 1.05rem; }

.bg-soft { background: var(--bg-soft); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
  white-space: normal;
}
.btn-primary {
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--navy-light); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--gold);
}
.btn-secondary:hover { background: var(--gold-soft); }
.btn-block { width: 100%; }

/* Shorter CTA label on narrow phones so the button never forces
   the hero to grow wider than the viewport. */
.btn-text-short { display: none; }
@media (max-width: 480px) {
  .btn-text-full { display: none; }
  .btn-text-short { display: inline; }
}

/* Secondary "Request by Form" CTA — kept in the markup for when the
   form backend goes live, hidden from visitors until then. */
.is-pending-feature { display: none !important; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  max-width: var(--container);
  margin: 0 auto;
}
.logo-link { display: flex; align-items: center; flex-shrink: 0; }
.logo-frame {
  height: 42px;
  width: 150px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
}
.logo-frame img {
  width: 150px;
  height: auto;
  object-fit: cover;
  object-position: top;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  justify-content: center;
  min-width: 0;
}
.main-nav a {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.main-nav a:hover { border-bottom-color: var(--gold); color: var(--navy); }

.lang-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}
.lang-switch a { padding: 3px 4px; border-radius: var(--radius-sm); }
.lang-switch a.active { color: var(--navy); background: var(--navy-soft); }
.lang-switch a:hover { color: var(--navy); }
.lang-sep { color: var(--border); }

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-actions .btn-primary {
  padding: 11px 18px;
  font-size: 0.85rem;
  white-space: nowrap;
}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  margin: 5px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (max-width: 1100px) {
  .main-nav { display: none; }
  .lang-switch.desktop-only { display: none; }
  .nav-toggle { display: block; }
  .header-actions .btn-primary.desktop-only { display: none; }
}

.mobile-panel {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px 24px 24px;
  border-top: 1px solid var(--border);
  background: var(--white);
}
.mobile-panel.open { display: flex; }
.mobile-panel a {
  padding: 12px 4px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.mobile-panel .lang-switch { padding: 12px 4px 4px; font-size: 0.95rem; }
.mobile-panel .btn { margin-top: 12px; }

/* Hero */
.hero {
  padding: 72px 0 88px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
  max-width: 100%;
}
.hero-grid > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.hero-copy h1 {
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  margin-bottom: 0.5em;
}
.hero-copy .subtitle {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 540px;
}
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 34px;
}
.hero-badges li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy);
  background: var(--navy-soft);
  padding: 9px 16px;
  border-radius: 999px;
}
.hero-badges li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
.hero-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* Desktop-only Hero fix (v5): .hero-grid carries both "container" and
   "hero-grid" classes. .hero-grid's own `max-width: 100%` has the same
   specificity as .container's `max-width: var(--container)` and comes
   later in the cascade, so it silently won across the whole site — the
   Hero content rendered edge-to-edge instead of centered/capped like the
   header. Re-asserting the container width here (desktop only; at mobile
   widths neither value ever binds, so this is a no-op there) restores the
   same left/right edges as the header. Badges also move to a firm 2x2
   grid instead of letting flex-wrap fall 3+1. */
@media (min-width: 1024px) {
  .hero-grid { max-width: var(--container); }
  .hero-badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* Shared contact block: WhatsApp + Email buttons side by side, phone
   number centered below. Used in the hero and the final CTA so both
   present the same contact order (WhatsApp, Email, phone). */
.contact-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.phone-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--navy);
  text-decoration: none;
}
.phone-link:hover { color: var(--navy-light); text-decoration: underline; }
.phone-link .phone-prompt {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
}
.text-link-quiet {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.text-link-quiet:hover { color: var(--navy); }
.email-line {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.email-line a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.email-line a:hover { color: var(--navy-light); }

/* Quote-request options (WhatsApp / Email / Phone) — request-quote pages */
.quote-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 8px;
}
.quote-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
}
.quote-option h2 { font-size: 1.1rem; margin: 0; color: var(--navy); }
.quote-option p { color: var(--text-muted); font-size: 0.95rem; margin: 0; }
.quote-option p a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.quote-option p a:hover { color: var(--navy-light); }
.quote-option .btn { margin-top: 4px; }
/* Hotfix (2026-09-07, revised): .email-line's overflow-wrap:anywhere
   (needed for the footer's narrow columns) let the browser break the
   address at the worst possible point inside these wider quote-option
   cards, leaving a lone "m" on its own line. Scoped to .quote-option
   only — .email-line elsewhere (Hero, final CTA, footer) is untouched.
   The smaller size (measured against the card's actual content width)
   applies at every width so the address fits on one line from ~375px
   up without forcing it; overflow-wrap:break-word (not "anywhere")
   only breaks the word when a line truly has nowhere else to put it,
   avoiding the single-character-orphan case even at 320px. Desktop
   additionally forces a single line since there is always room. */
.quote-option .email-line {
  overflow-wrap: break-word;
  word-break: normal;
  font-size: 0.8rem;
}
@media (min-width: 1024px) {
  .quote-option .email-line { white-space: nowrap; }
}

/* Discreet "Back to Home" link at the top of every internal page's main
   content, so visitors don't have to open the menu to get back. */
.back-home-wrap { padding-top: 22px; }
.back-home-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
}
.back-home-link:hover { color: var(--navy); }
.back-home-link:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
@media (max-width: 600px) {
  .contact-buttons { flex-direction: column; width: 100%; }
  .contact-buttons .btn { width: 100%; }
  .phone-link { font-size: 1.15rem; }
}

.hero-photo-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}
.hero-photo-blob {
  position: absolute;
  inset: -6% -6% 8% -6%;
  background: linear-gradient(160deg, var(--gold-soft), var(--navy-soft));
  border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
  z-index: 0;
}
.hero-photo-frame {
  position: relative;
  z-index: 1;
  width: min(100%, 380px);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 6px solid var(--white);
  background: var(--bg-soft);
}
.hero-photo-frame img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg-soft);
}

/* Caption sits BELOW the photo (its own bar), never overlapping the
   image, so it can never cover the face, hair or hands. */
.hero-photo-caption {
  position: relative;
  background: var(--navy);
  color: var(--white);
  padding: 12px 18px 13px;
  text-align: center;
}
.hero-photo-caption::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 2px;
  background: var(--gold);
}
.hero-photo-caption .caption-name {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
}
.hero-photo-caption .caption-role {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 2px;
  line-height: 1.4;
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-photo-wrap { order: 2; }
  .hero-copy { order: 1; }
  .hero-photo-frame { width: min(100%, 320px); margin: 0 auto; }
}

/* Services */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
/* Desktop: force the six service cards into a balanced 3x2 grid instead of
   letting auto-fit pack as many 260px+ columns as fit (which produced an
   uneven 4+2 layout on wide screens). Mobile/tablet keep the auto-fit
   behavior above (1 column narrow, 2 columns mid-width) untouched. */
@media (min-width: 900px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin: 0 auto; }
  .services-links, .services-extra, .languages-inline { max-width: 900px; margin-left: auto; margin-right: auto; }
}
.service-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 24px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
  color: inherit;
}
.service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.service-card:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.service-card h3 {
  font-size: 1.02rem;
  margin: 0;
}
a.service-card h3 { color: var(--navy); }
a.service-card .service-card-link { display: inline-block; margin-top: 8px; font-size: 0.85rem; font-weight: 700; color: var(--gold); }
.services-links {
  margin-top: 14px;
  text-align: center;
  font-size: 0.92rem;
  color: var(--text-muted);
}
.services-links a { font-weight: 600; }
@media (min-width: 1024px) {
  .services-links a { white-space: nowrap; }
}
.reviews-more { text-align: center; margin-top: 28px; }
.services-note {
  margin-top: 28px;
  padding: 18px 22px;
  background: var(--navy-soft);
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  color: var(--navy-light);
}

/* Small additional-services row (Notarization, Interpreting) — a
   lighter-weight mention rather than full cards. */
.services-extra {
  margin-top: 18px;
  text-align: center;
  font-size: 0.92rem;
  color: var(--text-muted);
}
.services-extra strong { color: var(--navy); font-weight: 700; }

/* Compact Languages line — replaces the old full-width Languages
   section; sits directly under Services. */
.languages-inline {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.98rem;
  color: var(--navy-light);
}
.languages-inline strong { color: var(--navy); }

/* How it works */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: 20px; }
}
.step-card {
  padding: 6px 4px;
}
.step-number {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  color: var(--navy);
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.step-card h3 { font-size: 1.02rem; margin-bottom: 6px; }
.step-card p { color: var(--text-muted); font-size: 0.95rem; margin: 0; }

/* About */
.about-copy {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

/* Final CTA — replaces the on-page quote form. WhatsApp is the primary
   action; the secondary "request by form" link stays hidden (see
   .is-pending-feature) until the standalone form has a working backend. */
.final-cta {
  text-align: center;
  padding: 64px 0;
}
.final-cta h2 { margin-bottom: 0.4em; }
.final-cta p {
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto 28px;
}
.final-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
@media (max-width: 768px) {
  .final-cta { padding: 44px 0; }
}
.about-copy .credential-badge {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.about-copy .ata-logo {
  width: 110px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* Desktop-only: a bit larger and explicitly centered (belt-and-suspenders
   alongside the flex-column parent) so the logo can never end up hugging
   the left edge of the credential band regardless of how the image tag's
   own width/height attributes get involved in sizing. Mobile keeps the
   already-approved 110px/90px sizing untouched. */
@media (min-width: 1024px) {
  .about-copy .ata-logo {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
}
.about-copy .credential-line {
  margin-top: 0;
  font-weight: 700;
  color: var(--navy);
  font-size: 0.95rem;
  padding: 12px 16px;
  background: var(--gold-soft);
  border-radius: var(--radius-sm);
  display: inline-block;
}
@media (max-width: 480px) {
  .about-copy .ata-logo { width: 90px; }
}

/* Reviews (placeholder) */
.reviews-placeholder {
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
  background: var(--bg-soft);
}
.dev-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--dev-bg);
  color: var(--dev-text);
  border: 1px solid var(--dev-border);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

/* Reviews (real) */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 860px) {
  .reviews-grid { grid-template-columns: 1fr; gap: 16px; }
}
.review-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 22px 20px;
  box-shadow: var(--shadow-sm);
}
.review-stars {
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.review-quote {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 16px;
  flex: 1;
}
.review-translation-note {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--text-muted);
  margin: -8px 0 16px;
}
.review-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy-soft);
  color: var(--navy);
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.review-identity { line-height: 1.3; }
.review-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--navy);
}
.review-source {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.reviews-more {
  margin-top: 32px;
  text-align: center;
}
.reviews-more .btn[data-pending="true"] {
  cursor: default;
}
.reviews-pending-note {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Quote form */
.quote-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  min-width: 0;
  box-sizing: border-box;
}
.quote-wrap > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
.dev-notice {
  background: var(--dev-bg);
  border: 1px solid var(--dev-border);
  color: var(--dev-text);
  padding: 16px 20px;
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.dev-notice strong { display: block; margin-bottom: 2px; }

.quote-form {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-sm);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  min-width: 0;
}
.form-row > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
@media (max-width: 700px) {
  .form-row { grid-template-columns: 1fr; }
  .quote-form { padding: 20px; }
}
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy);
  margin-bottom: 7px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--white);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.field textarea { resize: vertical; min-height: 100px; }
.file-field {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.consent-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.consent-field input { margin-top: 4px; }
.form-preview-alert {
  display: none;
  margin-top: 16px;
  padding: 14px 18px;
  background: var(--dev-bg);
  border: 1px solid var(--dev-border);
  color: var(--dev-text);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.form-preview-alert.show { display: block; }

/* Footer */
.site-footer {
  background: var(--navy);
  color: rgba(255,255,255,0.82);
  padding: 64px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) repeat(3, minmax(160px, 1fr));
  align-items: start;
  gap: 32px;
  margin-bottom: 40px;
}
/* Desktop: give Contact enough room for the email address on one line
   (measured: 241px forced it to wrap; ~280px+ does not) and trim the
   gap so four columns still fit without overflow at 1024px. */
@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: minmax(240px, 1.25fr) minmax(125px, 0.65fr) minmax(190px, 0.9fr) minmax(280px, 1.2fr);
    gap: 24px;
  }
}
/* This fallback used to trigger up to 1100px, which caught 1024px — one
   of the required desktop test widths — and dropped Contact (plus Site
   and Resources) to a second row below the brand column instead of the
   intended single-row 4-column desktop layout. Narrowed to under 1024px
   so the 4-column rule above now owns the full desktop range. */
@media (max-width: 1023px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-brand { grid-column: auto; }
}
.footer-brand .logo-frame { height: 40px; width: 150px; }
.footer-brand .logo-frame img { width: 150px; filter: brightness(0) invert(1); }
.footer-brand p { color: rgba(255,255,255,0.68); font-size: 0.9rem; margin-top: 14px; max-width: 320px; }
@media (min-width: 1024px) {
  .footer-brand p { font-size: 0.85rem; max-width: none; }
}
.footer-col h4 {
  color: var(--white);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: rgba(255,255,255,0.78); font-size: 0.92rem; overflow-wrap: anywhere; word-break: break-word; }
/* Desktop only: once the Contact column above is wide enough, let the
   email address sit on one line instead of wrapping mid-word. Mobile
   keeps the safe wrap (overflow-wrap/word-break above) untouched. */
@media (min-width: 1024px) {
  .footer-col a[href^="mailto:"] { white-space: nowrap; }
}
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: 24px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}
.footer-legal-note {
  margin-top: 18px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6);
  max-width: 720px;
}
@media (min-width: 1024px) {
  .footer-legal-note { font-size: 0.8rem; max-width: none; }
}

/* Floating "Request a Quote" button — links to the internal quote-options
   page, not directly to WhatsApp, so it uses the site's own navy accent
   rather than the WhatsApp brand green. */
.whatsapp-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--navy);
  color: var(--white);
  padding: 11px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.22);
  transition: transform 0.15s ease, background 0.15s ease, opacity 0.2s ease;
}
.whatsapp-fab:hover { background: var(--navy-light); transform: translateY(-2px); }
/* Applied via JS (main.js) whenever the button's fixed bottom-right
   corner would otherwise overlap a labeled element (photo identification,
   step 4, review cards, form fields). Keeps the button reachable via
   keyboard/SR at all times (no display:none), just visually cleared. */
.whatsapp-fab.fab-hidden {
  opacity: 0;
  transform: translateY(8px) scale(0.9);
  pointer-events: none;
}
.whatsapp-fab svg { width: 19px; height: 19px; flex-shrink: 0; }

/* Below 600px: icon-only circular button so it never displays the full
   "Request a Quote" label and keeps the smallest possible footprint. */
@media (max-width: 600px) {
  .whatsapp-fab {
    right: 16px;
    bottom: 16px;
    width: 46px;
    height: 46px;
    padding: 0;
    gap: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .whatsapp-fab span { display: none; }
  .whatsapp-fab svg { width: 20px; height: 20px; }
}

/* Reserve clear space at the bottom of the page so the fixed WhatsApp
   button never rests on top of footer content. */
.site-footer { padding-bottom: 88px; }
@media (min-width: 601px) {
  .site-footer { padding-bottom: 56px; }
}

/* Legal draft pages */
.legal-page { padding: 64px 0 100px; }
.legal-page .container { max-width: 820px; }
/* The "How It Works" block embedded in service pages sits inside
   .legal-page (the same wrapper used for the long-form article content
   above it), so it inherited the 820px article width and rendered the
   four steps noticeably narrower than the identical section on the
   home page (1180px container). The extra "wide" class (added only to
   this block's container) restores the home's width without touching
   the 820px cap that the surrounding article text still needs. */
.legal-page .container.wide { max-width: var(--container); }
.draft-banner {
  background: var(--dev-bg);
  border: 1px solid var(--dev-border);
  color: var(--dev-text);
  padding: 16px 20px;
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  margin-bottom: 36px;
}
.legal-page h1 { font-size: 2rem; margin-bottom: 0.3em; }
.legal-page h2 { font-size: 1.2rem; margin-top: 2em; }
.legal-page p, .legal-page li { color: var(--text-muted); font-size: 0.98rem; overflow-wrap: anywhere; }
.legal-page ul { list-style: disc; padding-left: 1.4em; margin-bottom: 1em; }
.legal-page ol { list-style: decimal; padding-left: 1.4em; margin-bottom: 1em; }
.legal-page ol li, .legal-page ul li { margin-bottom: 0.4em; }
.apostille-subtitle { font-size: 1.1rem; color: var(--text-muted); margin-top: -0.4em; }
.apostille-address {
  background: var(--bg-soft);
  border-left: 3px solid var(--gold);
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 1em;
}
.apostille-verified { font-size: 0.88rem; color: var(--text-muted); margin-top: 2.5em; }

/* Language chooser (root) */
.lang-chooser {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  padding: 40px 20px;
}
.lang-chooser-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  text-align: center;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow-lg);
}
.lang-chooser-card .logo-frame { height: 50px; width: 180px; margin: 0 auto 28px; }
.lang-chooser-card .logo-frame img { width: 180px; }
.lang-chooser-links { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.lang-chooser-links a {
  display: block;
  padding: 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  font-weight: 700;
  color: var(--navy);
}
.lang-chooser-links a:hover { border-color: var(--gold); background: var(--gold-soft); }

/* Focus visibility for keyboard nav */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}