/* ==========================================================================
   United Legal — Lemon Law landing page PREVIEW
   Local, standalone recreation of the live site's design for review only.
   Every value below was measured from the live California Lemon Law page
   (Elementor global kit 45 + page styles). No new colors or fonts.
   ========================================================================== */

:root {
  /* Elementor global colors (kit 45) */
  --primary: #0C1D55;   /* --e-global-color-primary */
  --secondary: #FFFFFF; /* --e-global-color-secondary */
  --text: #202020;      /* --e-global-color-text */
  --accent: #F9E900;    /* --e-global-color-accent */
  --blue: #0072C7;      /* --e-global-color-a0e054a */
  --sky: #CCE1F6;       /* --e-global-color-9a31ff9 */
  /* Values used by individual widgets on the template page */
  --panel: #EBF2F7;     /* "Are you driving a lemon?" card panel */
  --input-bg: #F7FAFD;  /* form fields */
  --acc-bg: #F2F4F8;    /* FAQ items */
  --acc-border: #DBE3EC;
  --acc-title: #1F2124;
  --eyebrow-light: #6DB5FF; /* "WHY UNITED LEGAL" eyebrow */
  --hero-p: #D8D8D8;    /* hero paragraph */

  /* Elementor global typography */
  --f-primary: "Barlow Condensed", sans-serif; /* primary + accent, 500 */
  --f-secondary: "Bebas Neue", sans-serif;     /* secondary, 400 */
  --f-text: "Montserrat", sans-serif;          /* text, 400 */
  --f-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--text); font-family: var(--f-text); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Preview notice (not part of the real page) ---------- */
.preview-note { background: var(--primary); color: #fff; font: 500 13px/1.4 var(--f-text); padding: 8px 46px 8px 16px; text-align: center; position: relative; }
.preview-note strong { color: var(--accent); font-weight: 600; }
.preview-note a { color: var(--accent); font-weight: 600; }
mark.todo { background: #FFE58A; color: #1F2124; padding: 0 4px; border-radius: 3px; }   /* draft placeholder to fill before launch */
.scene-pick { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-left: 10px; }
.scene-pick button { background: transparent; border: 1px solid rgba(255, 255, 255, .5); border-radius: 99px; color: #fff; font: 600 12px/1 var(--f-text); padding: 5px 10px; cursor: pointer; }
.scene-pick button.on { background: var(--accent); border-color: var(--accent); color: var(--primary); }
.scene-pick small { color: var(--sky); font-size: 11px; }
.preview-note > button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px; }

/* ---------- Logo intro (logo-intro.js): plays in the middle, then flies into the header ---------- */
.logo-intro { display: none; }
.intro-active .logo-intro { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; z-index: 1000; overflow: hidden; cursor: pointer; animation: introFailsafe .4s 6s forwards; }
.logo-intro.is-running { animation: none; }   /* the script is in charge; the 6s fallback only matters if it never loads */
@keyframes introFailsafe { to { opacity: 0; visibility: hidden; } }
.logo-intro__veil { position: absolute; inset: 0; background: radial-gradient(ellipse 75% 65% at 50% 50%, #fff 40%, #EEF2FA 100%); }
/* The animation frame is 16:9 and the finished logo fills 53.7% of its width, so this sizes the logo itself. */
.logo-intro__anim { position: relative; flex: 0 0 auto; width: calc(clamp(250px, 72vw, 580px) / .537); aspect-ratio: 16 / 9; transform-origin: 0 0; will-change: transform, opacity; }
.logo-intro__anim svg { display: block; }
.logo-intro__skip { position: absolute; right: 18px; bottom: 16px; background: none; border: 0; padding: 8px 10px; color: var(--primary); opacity: .5; font: 600 12px/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.logo-intro__skip:hover { opacity: .9; }
.intro-lock { overflow: hidden; scrollbar-gutter: stable; }   /* no scrolling mid-intro, and no layout jump when it ends */
.intro-lock .ula-header .logo img { opacity: 0; }           /* the flying logo lands here, then this one takes over */

/* ---------- Buttons (Elementor button widget, "push" hover) ---------- */
@keyframes push { 50% { transform: scale(.9); } 100% { transform: scale(1); } }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 500 18px/18px var(--f-primary); text-transform: uppercase; text-decoration: none; text-align: center; padding: 14px 29px 16px; border-radius: 99px; border: 2px solid var(--accent); background: var(--accent); color: var(--primary); cursor: pointer; white-space: nowrap; }
.btn:hover, .btn:focus-visible { animation: push .3s linear 1; }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.btn--outline { background: transparent; border-color: #fff; color: #fff; }
.btn svg { width: 16px; height: 16px; fill: currentColor; }

/* ---------- Header (template 1557) ---------- */
.ula-header { position: sticky; top: 0; z-index: 99; }
.topbar { background: var(--accent); height: 36px; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; }
.topbar .call { font: 500 16px/16px var(--f-primary); color: var(--primary); text-decoration: none; }
.icons { display: flex; gap: 6px; align-items: center; }
.icons a { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.icons a:hover { animation: push .3s linear 1; }
.icons svg { width: 17px; height: 17px; fill: var(--primary); }
.mainbar { background: #fff; border-radius: 0 0 33px 33px; height: 81px; padding: 0 30px; display: flex; align-items: center; gap: 24px; position: relative; }
.logo { flex: 0 0 auto; }
.logo img { width: 240px; }
.main-nav { margin-left: auto; }
.main-nav > ul { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.main-nav > ul > li { position: relative; }
.main-nav > ul > li > a { display: inline-flex; align-items: center; gap: 6px; font: 600 17px/20px var(--f-text); letter-spacing: 1px; color: var(--primary); text-decoration: none; padding: 12px 0; margin-right: 19px; position: relative; cursor: pointer; }
.main-nav > ul > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.main-nav > ul > li > a:hover::after, .main-nav > ul > li > a[aria-current="page"]::after, .main-nav > ul > li.current > a::after { transform: scaleX(1); }
.main-nav .caret { width: 10px; height: 14px; fill: currentColor; }
.sub-menu { display: none; position: absolute; left: 0; top: 100%; margin: 12px 0 0; padding: 0; list-style: none; min-width: 300px; background: #fff; border: 1px solid var(--sky); border-radius: 8px; overflow: hidden; z-index: 100; }
.sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.main-nav li:hover > .sub-menu, .main-nav li:focus-within > .sub-menu, .main-nav li.open > .sub-menu { display: block; }
.sub-menu a { display: block; padding: 15px 20px; font: 600 16px/20px var(--f-text); color: var(--primary); text-decoration: none; }
.sub-menu a:hover, .sub-menu a[aria-current="page"] { background: var(--panel); }
.btn-contact { font-size: 20px; line-height: 20px; padding: 13px 32px; }
.burger { display: none; background: none; border: 0; padding: 6px; cursor: pointer; color: var(--primary); }
.burger svg { width: 30px; height: 30px; fill: currentColor; display: block; }
.mobile-nav { display: none; }

/* ---------- Generic section shells ---------- */
.sec { padding: 0 30px; }
.sec__inner { max-width: 1400px; margin: 0 auto; }
.sec-head { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.h2 { font: 600 55px/55px var(--f-primary); color: var(--primary); }
.h2--light { color: #fff; font-size: 46px; line-height: 46px; }
.dots { font: 600 55px/55px var(--f-primary); color: var(--accent); margin-top: -54px; }
.eyebrow-blue { font: 500 24px/28.8px var(--f-primary); color: var(--blue); }
.lead { font: 400 17px/25.5px var(--f-text); color: var(--text); max-width: 550px; }

/* ---------- 1. Hero ---------- */
.hero { padding: 10px; }
/* Navy hero (homepage gradient). */
.hero__box { position: relative; isolation: isolate; overflow: hidden; background: var(--primary); border-radius: 32px; }
.hero__bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 55% at 50% 90%, #1A2C72 0%, rgba(26, 44, 114, 0) 70%), linear-gradient(#0A1848, var(--primary)); }
.hero__split { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 10px; }
.hero__cta { flex: 0 0 auto; max-width: 100%; display: flex; flex-direction: column; gap: 20px; align-items: inherit; }
/* Lemon tow-truck illustration: its own row under the buttons, so nothing (like the form) covers it.
   Same 3:2 shape as the file; the negative margins trim the file's empty top and bottom. */
.hero__car { flex: 1 1 100%; width: 100%; max-width: 640px; aspect-ratio: 3 / 2; position: relative; margin: -6% 0 -4%; }
.hero__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Live smoke from the open hood (hero-fx.js), drawn in front of the art. Extra room above for the plume; it fades out at the edges. */
.hero__smoke { position: absolute; inset: -14% -4% -4% -4%; z-index: 1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 22%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 22%, #000 90%, transparent);
  mask-composite: intersect; }
.hero__smoke canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Pulsing amber lights on the tow truck's cab light bar. */
.beacon { position: absolute; left: 16.3%; top: 22.7%; width: 7%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 196, 64, .95) 0%, rgba(255, 140, 0, .55) 32%, rgba(255, 140, 0, 0) 70%); animation: beacon 1.2s ease-in-out infinite; }
.beacon + .beacon { left: 30.3%; top: 23%; animation-delay: .6s; }
@keyframes beacon { 0%, 100% { opacity: .1; transform: translate(-50%, -50%) scale(.75); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .beacon { animation: none; opacity: .5; } }
.hero__grid { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 70px 30px; max-width: 1405px; margin: 0 auto; }
.hero__left { flex: 0 1 825px; display: flex; flex-direction: column; gap: 20px; }
.hero__eyebrow { font: 500 24px/24px var(--f-primary); color: var(--accent); text-transform: uppercase; }
.hero h1 { font: 600 68px/1.1 var(--f-primary); color: #fff; }
.hl { color: var(--accent); }
.hero__p { font: 500 20px/30px var(--f-text); color: var(--hero-p); max-width: 620px; }
.hero__p strong { color: #fff; font-weight: 600; }
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; font: 600 18px/27px var(--f-text); color: #fff; }
.checks svg { flex: 0 0 22px; width: 22px; height: 22px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.mini-list { display: flex; align-items: center; gap: 8px; font: 400 15px/22.5px var(--f-text); color: #fff; }
.mini-list svg { flex: 0 0 14px; width: 14px; height: 14px; fill: var(--accent); }
.mini-list--bold { font-weight: 600; }

/* glass card + form (Elementor form widget) */
.hero__right { flex: 0 0 500px; display: flex; flex-direction: column; gap: 26px; }
.glass { display: flex; flex-direction: column; justify-content: center; gap: 32px; padding: 30px; border-radius: 22px; background: rgba(0, 0, 0, .18); -webkit-backdrop-filter: blur(30px) saturate(1.3); backdrop-filter: blur(30px) saturate(1.3); border: 1px solid rgba(204, 225, 246, .18); scroll-margin-top: 130px; }
.glass h2 { font: 500 31px/31px var(--f-primary); color: var(--accent); }
.fields { display: flex; flex-wrap: wrap; margin: 0 -7.5px -18px; }
.field { width: 100%; padding: 0 7.5px; margin-bottom: 18px; }
.field--50 { width: 50%; }
.field label { display: block; padding-bottom: 8px; font: 600 12px/12px var(--f-text); text-transform: uppercase; color: #fff; }
.field input, .field textarea { width: 100%; height: 40px; padding: 8px 16px; border: 1px solid var(--input-bg); border-radius: 6px; background: var(--input-bg); font: 400 13px/18.2px var(--f-text); color: var(--text); }
.field textarea { height: 84px; padding: 5px 14px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--text); opacity: .6; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.field input:user-invalid { border-color: var(--accent); }
.consent { display: flex; gap: 10px; align-items: flex-start; }
.consent input { flex: 0 0 auto; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); }
.consent label { padding: 0; font: 400 13px/19.5px var(--f-text); text-transform: none; }
.submit { width: 100%; height: 45px; border: 0; border-radius: 99px; background: var(--accent); color: var(--primary); font: 500 19px/19px var(--f-secondary); padding: 14px 14px 12px; cursor: pointer; letter-spacing: .3px; }
.submit:hover { animation: push .3s linear 1; }
.secure svg { fill: none; }
.form-success { display: none; padding: 20px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(204, 225, 246, .18); color: #fff; font: 500 16px/24px var(--f-text); }
.form-success strong { color: var(--accent); font: 600 22px/1.2 var(--f-primary); display: block; margin-bottom: 6px; }
.form-success small { display: block; margin-top: 10px; color: var(--sky); font-size: 12px; }
.form-error { margin-top: 16px; padding: 12px 16px; border-radius: 10px; background: rgba(249, 233, 0, .08); border: 1px solid rgba(249, 233, 0, .45); color: #fff; font: 500 14px/1.5 var(--f-text); }
.form-error[hidden] { display: none; }
.form-error a { color: var(--accent); font-weight: 600; }
.glass.sending .submit { opacity: .6; cursor: progress; }
.glass.sent form { display: none; }
.glass.sent .form-success { display: block; }
/* Trust badges under the form: white BBB + ABA marks, as in the homepage hero. Only the BBB one is a link (to the firm's BBB profile). */
.trust { display: flex; align-items: center; justify-content: center; gap: 26px; }
.trust img { display: block; width: 140px; height: auto; }
.trust a { display: block; border-radius: 10px; transition: transform .2s ease; }
.trust a:hover { transform: translateY(-2px); }
.trust a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.trust__sep { width: 1px; height: 40px; background: rgba(204, 225, 246, .28); }

/* ---------- 2. Does this sound like your car? ---------- */
.sec-signs .sec__inner { padding: 60px 0; }
.signs-panel { margin-top: 20px; padding: 40px; border-radius: 32px; background: var(--panel); }
.signs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sign { display: flex; flex-direction: column; align-items: center; gap: 15px; padding: 25px; border-radius: 16px; background: rgba(255, 255, 255, .9); text-align: center; }
.badge { width: 70px; height: 70px; border-radius: 50%; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.badge svg { width: 30px; height: 30px; fill: var(--primary); }
.sign h3 { font: 500 24px/28.8px var(--f-primary); color: var(--primary); }
.sign p { font: 400 15px/22.5px var(--f-text); color: var(--text); max-width: 300px; }
.cta-center { display: flex; justify-content: center; margin-top: 30px; }

/* ---------- 3. Three simple steps (navy box) ---------- */
.sec-steps .sec__inner { padding: 0; }
.navy-box { background: var(--primary); border-radius: 32px; }
.steps-box { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; padding: 60px; }
.steps-left { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-bottom: 60px; }
.steps-left p { font: 400 17px/25.5px var(--f-text); color: #fff; max-width: 400px; }
.steps-left .small { font-size: 13px; line-height: 19.5px; max-width: 320px; }
.steps-right { display: flex; flex-direction: column; gap: 20px; justify-content: center; }
.step { display: flex; gap: 20px; align-items: flex-start; }
.step img { width: 52px; flex: 0 0 52px; }
.step h3 { font: 500 24px/28.8px var(--f-primary); color: #fff; margin-bottom: 8px; }
.step p { font: 400 16px/24px var(--f-text); color: #fff; }

/* ---------- 4. What you may be able to get ---------- */
.sec-outcomes .sec__inner { max-width: 1200px; padding: 70px 0 60px; }
.outcomes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-top: 20px; align-items: center; }
.outcomes-list { display: flex; flex-direction: column; gap: 28px; }
.outcome { display: flex; gap: 15px; align-items: flex-start; }
.outcome svg { flex: 0 0 22px; width: 22px; height: 22px; fill: var(--blue); margin-top: 6px; }
.outcome h3 { font: 500 28px/33.6px var(--f-primary); color: var(--primary); margin-bottom: 4px; }
.outcome p { font: 400 16px/24px var(--f-text); color: var(--text); }
.outcomes-art { width: 100%; }
.outcomes-art img { width: 100%; height: auto; }

/* ---------- 5. Call band (shared animated headline) ---------- */
.band { padding: 44px 10px; border-radius: 33px; text-align: center; display: flex; flex-direction: column; gap: 20px; }
.band__line { font: 600 66px/79.2px var(--f-primary); color: #fff; text-decoration: none; display: block; }
.band__word { color: var(--accent); display: inline-block; min-width: 1ch; }
.band__word::after { content: ""; display: inline-block; width: 3px; height: .8em; margin-left: 4px; background: var(--accent); vertical-align: -0.05em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.band__phone { font: 700 99px/99px var(--f-primary); color: var(--sky); text-decoration: none; }

/* ---------- 6. Why United Legal (navy box) ---------- */
.sec-why { padding-top: 60px; }
.why-box { display: flex; flex-direction: column; gap: 50px; padding: 50px; }
.eyebrow-light { font: 500 24px/24px var(--f-primary); color: var(--eyebrow-light); }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.why { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.why h3 { font: 500 28px/33.6px var(--f-primary); color: #fff; margin-bottom: 8px; }
.why p { font: 400 16px/24px var(--f-text); color: #fff; }

/* ---------- 7. FAQ + final CTA ---------- */
.sec-faq .sec__inner { max-width: 860px; padding: 80px 0; display: flex; flex-direction: column; gap: 52px; }
.faq-head .h2 { font-size: 42px; line-height: 42px; }
.faq-head .lead { max-width: 720px; }
.faq { max-width: 650px; width: 100%; margin: 0 auto; }
.faq details { background: var(--acc-bg); border: 1px solid var(--acc-border); border-radius: 12px; margin-bottom: 16px; }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 20px; cursor: pointer; font: 600 18px/27px var(--f-system); color: var(--acc-title); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 13px; height: 15px; fill: var(--acc-title); flex: 0 0 13px; }
.faq summary .i-minus, .faq details[open] summary .i-plus { display: none; }
.faq details[open] summary .i-minus { display: block; }
.faq .answer { padding: 10px 20px 20px; font: 400 17px/25.5px var(--f-text); color: var(--text); }
.final { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.final h3 { font: 500 38px/45.6px var(--f-primary); color: var(--primary); }
.final p { font: 400 16px/24px var(--f-text); }
.disclosure { font: 400 12.5px/19px var(--f-text); color: var(--text); text-align: center; max-width: 760px; margin: 0 auto; opacity: .85; }

/* ---------- Footer (template 1561) ---------- */
.ula-footer { padding: 0 30px 20px; }
.footer-box { background: var(--primary); border-radius: 33px; padding: 60px 45px; display: flex; flex-direction: column; align-items: center; gap: 20px; color: #fff; }
.footer-box .f-logo img { width: 300px; }
.footer-lang { font: 500 16px/20px var(--f-primary); color: #fff; background: none; border: 0; padding: 5px 20px; cursor: pointer; text-decoration: none; }
.footer-cols { display: flex; gap: 60px; margin: 60px 0 40px; width: 100%; max-width: 1275px; }
.footer-cols > div { display: flex; flex-direction: column; gap: 20px; }
.fcol-1 { flex: 0 1 460px; }
.fcol-2 { flex: 0 1 351px; padding-left: 60px; }
.fcol-3 { flex: 0 1 345px; }
.footer-cols h4 { font: 600 18px/18px var(--f-primary); color: var(--accent); }
.footer-cols p, .footer-cols li { font: 400 13px/1.6 var(--f-text); color: #fff; }
.footer-cols .yellow { color: var(--accent); }
.quick { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.quick a, .fcontact a { color: #fff; text-decoration: none; font-size: 15px; }
.quick a:hover, .fcontact a:hover { color: var(--accent); }
.fcontact p { font-size: 15px; }
.icons--lg a { width: 44px; height: 44px; }
.icons--lg svg { width: 22px; height: 22px; }
/* BBB dynamic seal in the contact column (as in the site footer). */
.bbb-seal { width: fit-content; margin-top: 4px; }
.bbb-seal img { display: block; width: 160px; height: auto; }
.footer-bar { margin-top: 20px; background: var(--accent); border-radius: 33px; padding: 10px 45px 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 400 10.5px/1.5 var(--f-text); color: #000; }
.footer-bar a { color: #000; text-decoration: none; }

/* ---------- Mobile floating call bar (template 2162) ---------- */
.float-call { display: none; }

/* ---------- Scroll entrance animations (fadeIn / fadeInUp) ---------- */
.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s ease, transform .9s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .icons a:hover, .submit:hover { animation: none; }
  .band__word::after { animation: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Tablet (Elementor breakpoint: max 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  .main-nav { display: none; }
  .mainbar { justify-content: space-between; }
  .header-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
  .burger { display: block; }
  .mobile-nav { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-radius: 0 0 24px 24px; box-shadow: 0 12px 24px rgba(12, 29, 85, .12); padding: 8px 0 14px; }
  .mobile-nav.open { display: block; }
  .mobile-nav ul { list-style: none; margin: 0; padding: 0; }
  .mobile-nav a, .mobile-nav .group-label { display: block; padding: 13px 30px; font: 600 16px/20px var(--f-text); color: var(--primary); text-decoration: none; }
  .mobile-nav .group-label { color: var(--blue); }
  .mobile-nav ul ul a { padding-left: 50px; font-weight: 500; }
  .mobile-nav a[aria-current="page"] { background: var(--panel); }

  /* Stacked hero: the animated car sits between the buttons and the form. */
  .hero__grid { flex-direction: column; align-items: stretch; padding: 50px 30px; }
  .hero__left { flex: none; }
  .hero__right { flex: none; }
  .signs-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-box { grid-template-columns: 1fr; gap: 40px; padding: 50px 40px; }
  .steps-left { padding-bottom: 0; }
  .outcomes-grid { grid-template-columns: 1fr; gap: 40px; }
  .outcomes-art { max-width: 520px; margin: 0 auto; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-cols { flex-wrap: wrap; gap: 40px; }
  .fcol-2 { padding-left: 0; }
}

/* ==========================================================================
   Mobile (Elementor breakpoint: max 767px) — sizes measured at 375px
   ========================================================================== */
@media (max-width: 767px) {
  .topbar { padding: 0 15px; }
  .topbar .icons { gap: 2px; }
  .mainbar { padding: 0 15px; height: 78px; }
  .logo img { width: 170px; }
  .btn-contact { font-size: 18px; padding: 11px 20px; }
  .mobile-nav a, .mobile-nav .group-label { padding-left: 20px; padding-right: 20px; }
  .mobile-nav ul ul a { padding-left: 36px; }

  .hero__box { border-radius: 18px; }
  .hero__grid { padding: 40px 20px; }
  .hero__left { align-items: center; text-align: center; }
  .hero__split, .hero__cta { width: 100%; }
  .hero__cta { align-items: center; }
  .hero__eyebrow { font-size: 18px; line-height: 18px; }
  .hero h1 { font-size: 52.5px; line-height: 57.8px; }
  .hero__p { font-size: 18px; line-height: 25.2px; }
  .checks { text-align: left; }
  .checks li { font-size: 15px; line-height: 22.5px; padding-bottom: 15px; }
  .btn-row { flex-direction: column; align-items: center; }
  .btn-row .btn { width: 240px; }
  .glass { padding: 16px; border-radius: 16px; gap: 24px; }
  .glass h2 { font-size: 28px; line-height: 28px; text-align: center; }
  .field--50 { width: 100%; }
  .trust { gap: 18px; }
  .trust img { width: 118px; }

  .sec { padding: 0 10px; }
  .sec-signs .sec__inner { padding: 50px 0; }
  .h2 { font-size: 36px; line-height: 36px; }
  .h2--light { font-size: 38px; line-height: 38px; }
  .dots { font-size: 55px; }
  .signs-panel { padding: 16px; border-radius: 18px; }
  .signs-grid { grid-template-columns: 1fr; }
  .sign { padding: 20px; border-radius: 14px; }

  .sec-steps .sec__inner { padding-bottom: 50px; }
  .navy-box { border-radius: 18px; }
  .steps-box { padding: 32px 16px; }
  .step { flex-direction: column; align-items: center; text-align: center; gap: 14px; }

  .sec-outcomes .sec__inner { padding: 0 0 50px; }
  .outcome { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  .outcome h3 { font-size: 24px; line-height: 28.8px; }

  .band { border-radius: 18px; }
  .band__line { font-size: 36px; line-height: 43.2px; }
  .band__phone { font-size: 50px; line-height: 50px; }

  .sec-why { padding-top: 50px; }
  .why-box { padding: 32px 16px; gap: 42px; }
  .why-grid { grid-template-columns: 1fr; }
  .why h3 { font-size: 24px; line-height: 28.8px; }

  .sec-faq .sec__inner { padding: 30px 0 110px; gap: 40px; }
  .faq-head .h2 { font-size: 36px; line-height: 36px; }
  .final h3 { font-size: 24px; line-height: 28.8px; }

  .ula-footer { padding: 0 10px 96px; }
  .footer-box { padding: 50px 15px; border-radius: 16px; }
  .footer-box .f-logo img { width: 240px; }
  .footer-cols { flex-direction: column; gap: 30px; margin: 30px 0 20px; text-align: center; align-items: center; }
  .footer-cols > div { align-items: center; flex: none; }
  .footer-bar { flex-direction: column; border-radius: 16px; padding: 10px 16px; text-align: center; }

  /* Floating call bar: phones only, 80% width, 33px radius (site custom CSS) */
  .float-call { display: flex; position: fixed; z-index: 20; left: 0; right: 0; bottom: 12px; width: 80%; margin: auto; border-radius: 33px; background: var(--accent); box-shadow: 0 6px 20px rgba(12, 29, 85, .25); }
  .float-call a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 36px 12px 16px; font: 500 30px/1 var(--f-primary); color: var(--primary); text-decoration: none; }
  .float-call a svg { width: 30px; height: 30px; fill: var(--primary); }
  .float-call button { position: absolute; right: 12px; top: 8px; background: none; border: 0; font: 600 18px/1 var(--f-system); color: var(--primary); cursor: pointer; padding: 4px; }
  .float-call.hidden { display: none; }
}