/* ============================================================
   Empire Vein & Vascular — shared landing-page stylesheet.
   Every rule that was identical across the standalone landers lives
   here (identity tokens, Inter, base reset, buttons, top bar, lead form,
   reviews band, FAQ, map + offices, closing band, footer, the scroll
   reveal and gradient wipe). Each lander keeps only its page-specific
   sections, loaded AFTER this file so they can override it: lander-1 and
   lander-2 inline, lander-3 (and its Spanish twin) in assets/lander-3.css.
   The landers stay independent of the React site — this file is theirs.
   ============================================================ */
  @import url("tokens-lite.css");
  @import url("lander-reveal.css");

/* Reviews band: the main site GoogleReviews element (as on lander-3). */
  .reviews { background: var(--purple-900); color: #ede4f6; }

  .rev-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 32px; }

  .rev-head h2 { color: #fff; max-width: 620px; }

  .rev-score { display: flex; align-items: center; gap: 12px; }

  .rev-score .num { font-size: 34px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }

  .rev-score .stars { color: var(--amber-400); letter-spacing: 3px; font-size: 18px; }

  .rev-score .line { font-size: 15px; color: rgba(255,255,255,.7); }

  .rev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 20px; }

  .rev { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 12px; }

  .rev .stars { color: var(--amber-400); letter-spacing: 2px; font-size: 15px; }

  .rev q { font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,.92); flex: 1; quotes: "“" "”"; }

  .rev-who { display: flex; align-items: center; gap: 12px; padding-top: 4px; }

  .rev-who .av { flex-shrink: 0; width: 40px; height: 40px; border-radius: 999px; color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

  .rev-who .name { font-size: 14.5px; font-weight: 700; color: #fff; line-height: 1.2; }

  .rev-who .meta { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 2px; }

  /* Inter, the site typeface, self-hosted (variable, latin subset) from the
     landers' own assets/fonts/. The root-relative /assets/fonts/ path 404'd
     on WordPress (rewritten to /en/…/), leaving every lander in the system
     fallback font. Relative to this stylesheet. */
  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/inter-var-latin.woff2") format("woff2");
  }

  /* ── EVVS identity, self-contained (no shared runtime with the main site).
     Single deliberate light theme; system fonts only for speed. ─────────── */
  /* Identity tokens come from tokens-lite.css (generated from the main
     site tokens by scripts/generate-tokens-lite.mjs). */

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    margin: 0; background: var(--page); color: var(--body);
    font: 400 18px/1.6 "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  img { max-width: 100%; display: block; }

  h1, h2, h3 { color: var(--ink); letter-spacing: -0.02em; line-height: 1.12; margin: 0; text-wrap: balance; }

  p { margin: 0; }

  a { color: var(--purple-700); }

  /* Brand gradient for emphasis keywords in headings (same ramp as the
     main site's ev-gradient-text). The -light variant reads on dark plum. */
  .gx, .gxl {
    -webkit-background-clip: text; background-clip: text;
    /* Only the fill is transparent: currentColor stays the surrounding text
       color, which the reveal wipes from. */
    -webkit-text-fill-color: transparent;
    padding-block: .1em; margin-block: -.1em;
  }

  /* Ramps mirror the site tokens exactly: --gradient-brand and
     --gradient-brand-light (the "ADVANCED" treatment on the homepage). */
  .gx { --gx-ramp: linear-gradient(95deg, #6a2497 0%, #c0397a 52%, #e8771f 100%); background-image: var(--gx-ramp); }

  .gxl { --gx-ramp: linear-gradient(95deg, #782eb9 0%, #c0397a 52%, #e8771f 100%); background-image: var(--gx-ramp); }

  :focus-visible { outline: 3px solid var(--amber-500); outline-offset: 2px; border-radius: 4px; }

  /* Same content width as the main site (--container-max: 1660px). */
  .wrap { max-width: 1660px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }

  section { padding: clamp(48px, 7vw, 86px) 0; }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 52px; padding: 0 26px; border: none; border-radius: 999px;
    font-family: inherit; font-weight: 700; font-size: 16.5px; line-height: 1; font-family: inherit; cursor: pointer; text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  }

  .btn-amber { background: var(--amber-500); color: #fff; box-shadow: 0 10px 22px -10px rgba(232,119,31,.55); }

  .btn-amber:hover { background: var(--amber-600); transform: translateY(-1px); }

  .btn-ghost { background: transparent; color: var(--purple-700); box-shadow: inset 0 0 0 2px var(--purple-100); }

  .btn-ghost:hover { background: var(--purple-50); }

  .topbar .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 66px; }

  .topbar img { height: 44px; width: auto; }

  .topbar a.phone {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
    font-weight: 800; font-size: 17px; color: var(--purple-700); text-decoration: none;
  }

  .topbar a.phone small { display: block; font-weight: 600; font-size: 11.5px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }

  /* The number reads as a call at every width: the phone glyph beside it,
     amber like the one under the forms (2026-09-21). */
  .topbar a.phone .ic { display: block; width: 18px; height: 18px; flex: none; color: var(--amber-500); }

  .topbar-actions { display: flex; align-items: center; gap: 12px; }

  /* On mobile the sticky bar carries both actions: call number + book. */
  .topbar-cta { display: none; }

  @media (max-width: 960px) {
    .topbar-cta { display: inline-flex; min-height: 42px; padding: 0 16px; font-size: 14px; }
    .topbar img { height: 38px; }
    .topbar a.phone small { display: none; }
    .topbar a.phone { font-size: 15px; }
  }

  .fld { margin-top: 12px; }

  .fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }

  .fld label { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 5px; }

  .fld label small { font-weight: 600; color: var(--muted); }

  .fld .err { display: none; font-size: 13px; color: #b3261e; margin-top: 4px; }

  .fld.bad input { border-color: #b3261e; }

  .fld.bad .err { display: block; }

  .form-card .btn { width: 100%; margin-top: 18px; min-height: 60px; font-size: 18.5px; font-weight: 800; }

  .assure { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--muted); margin-top: 12px; line-height: 1.5; }

  .assure::before { content: "🔒"; font-size: 14px; }

  .consent { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-top: 14px; }

  .consent a { color: var(--muted); }

  .success { text-align: center; padding: 26px 6px; }

  .success .mark { width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 999px; background: #eefaf1; color: var(--success); font-size: 26px; display: flex; align-items: center; justify-content: center; }

  .success h2 { font-size: 24px; font-weight: 800; }

  .success p { margin-top: 10px; font-size: 15.5px; color: var(--body); }

  .ba { display: flex; gap: 2px; background: var(--line); border-radius: var(--radius); overflow: hidden; }

  .ba > div { position: relative; flex: 1; background: var(--photo); }

  .ba span {
    position: absolute; top: 10px; left: 10px; font-size: 10.5px; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase; color: #fff; padding: 4px 10px; border-radius: 999px;
    background: rgba(20,8,30,.72);
  }

  .ba .after span { background: var(--success); }

  /* Steps: three columns divided by hairlines, plain oversized numerals. */
  .steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 30px; }

  .step { padding: 6px 28px; border-left: 1px solid var(--line); }

  .step:first-child { border-left: none; padding-left: 0; }

  .step .n { font-weight: 700; font-size: 15.5px; letter-spacing: .1em; color: #8c4cb0; border-bottom: 2px solid #d8c4e7; padding-bottom: 12px; margin-bottom: 14px; }

  .step h3 { font-size: 19px; margin-bottom: 8px; }

  .step p { font-size: 15.5px; }

  .step p b { color: var(--ink); }

  /* FAQ: hairline-divided rows, no boxes. */
  .faq .wrap { max-width: 800px; }

  .faq details { border-bottom: 1px solid var(--line); }

  .faq details:first-of-type { border-top: 1px solid var(--line); margin-top: 26px; }

  .faq summary {
    list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px;
    padding: 18px 2px; font-weight: 700; font-size: 17px; color: var(--ink); cursor: pointer; min-height: 44px;
  }

  .faq summary::-webkit-details-marker { display: none; }

  .faq summary::after { content: "+"; font-size: 22px; font-weight: 600; color: var(--purple-500); flex-shrink: 0; transition: transform .15s ease; }

  .faq details[open] summary::after { transform: rotate(45deg); }

  .faq details p { padding: 0 2px 20px; font-size: 16px; max-width: 66ch; }

  .loc-sub { color: var(--muted); margin-top: 8px; max-width: 60ch; }

  .loc-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 3.5vw, 56px); margin-top: 30px; align-items: stretch; }

  .map > div { width: 100%; height: 100%; position: absolute; inset: 0; }

  .office:hover { background: var(--purple-50); }

  .office h3 { font-size: 17px; margin-bottom: 4px; }

  .office p { font-size: 14px; color: var(--muted); line-height: 1.5; }

  .office a { font-weight: 700; font-size: 14.5px; text-decoration: none; }

  /* Final CTA: full-bleed plum band, no rounded panel. */
  .final { text-align: center; padding: clamp(52px, 7vw, 84px) 0; background: linear-gradient(135deg, var(--purple-900), var(--purple-700)); color: #ede4f6; }

  .final h2 { color: #fff; font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin-bottom: 10px; }

  .final p { margin-bottom: 26px; }

  .final .row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

  /* Footer: legally required items only */
  footer { padding: 34px 0 44px; }

  footer .wrap { font-size: 12px; color: var(--muted); line-height: 1.6; max-width: 880px; text-align: center; }

  footer p + p { margin-top: 10px; }

  /* ── Language switcher (2026-09-20) ─────────────────────────────
     The site's own flag-and-code dropdown, rebuilt for the landers so a
     visitor recognises it as one: <details>/<summary> (opens on click and
     on Enter/Space, works without JavaScript), the current language's
     flag and code in the bar, both languages listed below with the
     current one checked. The flags are TranslatePress's own images,
     copied here so the landers stay independent of the site. The page
     script adds closing on Escape or an outside press, nothing more. */
  .topbar .lang { position: relative; flex-shrink: 0; z-index: 60; }
  .topbar .lang > summary { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 7px; list-style: none; cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: .05em; line-height: 1; color: var(--purple-700); border-radius: 999px; transition: background .15s ease, color .15s ease; }
  .topbar .lang > summary .lang-flag { width: 16px; height: 11px; }
  .topbar .lang > summary .lang-caret { width: 9px; height: 9px; }
  .topbar .lang > summary::-webkit-details-marker { display: none; }
  .topbar .lang > summary::marker { content: ""; }
  .topbar .lang > summary:hover, .topbar .lang[open] > summary { background: var(--purple-50); }
  .topbar .lang > summary:focus-visible { outline: 2px solid var(--amber-500); outline-offset: 2px; }
  .topbar .lang[open] .lang-caret { transform: rotate(180deg); }
  .lang-caret { flex: none; transition: transform .18s ease; }
  .lang-flag { display: block; width: 18px; height: 12px; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.18); }
  /* The bar's logo rule (.topbar img) outranks the class; the rows' flags
     say their size again with a stronger selector (2026-09-21). */
  .topbar .lang-menu .lang-flag { width: 18px; height: 12px; }
  .topbar .lang:not([open]) .lang-menu { display: none; }
  .lang-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1; min-width: 190px; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(42,14,61,.18); }
  .lang-menu li { margin: 0; }
  .lang-menu a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; font-size: 14.5px; font-weight: 600; line-height: 1.2; color: var(--ink); text-decoration: none; border-radius: 8px; white-space: nowrap; }
  .lang-menu a:hover, .lang-menu a[aria-current="true"] { background: var(--purple-50); }
  /* The current language is checked as well as tinted, so colour is not doing the work alone. */
  .lang-menu a[aria-current="true"]::after { content: ""; width: 12px; height: 7px; margin-left: auto; flex: none; border-left: 2px solid var(--purple-700); border-bottom: 2px solid var(--purple-700); transform: rotate(-45deg) translate(1px, -2px); }