/* Hero 2 - second hero section (additive, injected after the existing hero/manual-search section). */
#hero-2 .ef-manual-search { --ef-blue: #004DBA; --ef-blue-dark: #003a8c; }
#hero-2 .vehicle-inp::placeholder { color: black !important; opacity: 1; font-weight: bold; }
/* .ef-manual-search's base stylesheet sets `input,select{font:inherit}`, which
   silently overrides Tailwind's text-[40px] utility on the plate input since it
   now lives inside .ef-manual-search (homepage's copy never had this conflict
   because its plate sits in a separate box outside .ef-manual-search). */
#hero-2 .ef-manual-search .vehicle-inp { font-size: 40px !important; font-weight: 800 !important; }

/* ---------- hero section 2 ---------- */
#hero-2 { position: relative; overflow: hidden; background: #0a1e46; }
.hero-2-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-2-scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(6,16,40,.97) 0%, rgba(6,16,40,.88) 32%, rgba(8,20,50,.55) 62%, rgba(8,20,50,.35) 100%); }
.hero-2-inner { position: relative; z-index: 1; max-width: 1200px; width: 90%; margin: 0 auto; padding: 24px 0 24px; }
@media (min-width: 768px) { .hero-2-inner { padding: 56px 0 40px; } }

.hero-2-eyebrow { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.78); font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; margin: 0 0 2px; }
.hero-2-eyebrow-bar { width: 34px; height: 2px; background: #004DBA; }

.hero-2-h1 { color: #fff; font-weight: 800; line-height: 1.08; font-size: 30px; letter-spacing: -.01em; margin: 12px 0 0; }
.hero-2-h1 .gold { color: #ffcb05; display: block; margin-top: 2px; }
@media (min-width: 768px) { .hero-2-h1 { font-size: 52px; margin-top: 0; } .hero-2-h1 .gold { margin-top: 4px; } }

.hero-2-sub { margin-top: 6px; color: #e6ecf7; font-size: 15px; font-weight: 600; }
@media (min-width: 768px) { .hero-2-sub { margin-top: 14px; font-size: 18px; } }

.hero-2-desc { margin-top: 8px; color: #b9c6de; font-size: 14px; line-height: 1.6; max-width: 46ch; }
@media (min-width: 768px) { .hero-2-desc { margin-top: 16px; font-size: 16px; } }

/* CTA row (Get a Free Quote / Watch How It Works) removed from this hero on
   both mobile and desktop — the reg/make-model/engine-code search card below
   is the only call to action now. */
.hero-2-ctas { display: none !important; }
/* !important needed: the site's global stylesheet sets `a { color: #2d567c !important; }`,
   which otherwise beats these buttons' white text since both are <a> tags. */
.hero-2-cta-primary { background: linear-gradient(90deg,#1a63d1 0%,#004DBA 60%,#003a8c 100%); color: #fff !important; font-weight: 800; font-size: 14px; padding: 12px 16px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 10px 22px rgba(6,108,223,.35); flex: 1 1 0; min-width: 0; }
@media (min-width: 768px) { .hero-2-cta-primary { font-size: 15px; padding: 14px 24px; flex: 0 0 auto; } }
.hero-2-cta-ghost { border: 1.5px solid rgba(255,255,255,.4); color: #fff !important; font-weight: 700; font-size: 14px; padding: 11px 14px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 0; min-width: 0; }
@media (min-width: 768px) { .hero-2-cta-ghost { font-size: 15px; padding: 13px 22px; flex: 0 0 auto; } }
.hero-2-cta-ghost .play { width: 24px; height: 24px; border-radius: 999px; background: rgba(255,255,255,.14); display: grid; place-items: center; flex: none; }
@media (min-width: 768px) { .hero-2-cta-ghost .play { width: 26px; height: 26px; } }

.hero-2-grid { margin-top: 0; display: block; }
@media (min-width: 1024px) { .hero-2-grid { margin-top: 44px; } }
.hero-2-content-col { width: 100%; }
.hero-2-search-col { width: 100%; margin-top: 40px; }

/* The 3-tab hero2 widget is a single box, not a "search pair" (reg-card + manual
   search side by side) like the old 2-box design. v4/v5.js still force-adds
   .ef-search-pair to the widget's parent element, which pulls in the base
   stylesheet's !important 3-column grid rule and crushes this widget into a
   narrow auto-sized track. That class gets added asynchronously (after v5.js
   fetches makes.json), so it lands after page load and any one-time JS cleanup
   loses the race — neutralise it here at the CSS level instead, for both
   wrapper patterns the widget is used inside. */
#getquote.ef-search-pair,
.hero-2-search-col.ef-search-pair {
  display: block !important;
}
@media (min-width: 1024px) {
  .hero-2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .hero-2-content-col { width: auto; }
  .hero-2-search-col { width: auto; margin-top: 0; }
}

.hero-2-trustbar { margin-top: 48px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 12px; }
@media (min-width: 900px) { .hero-2-trustbar { grid-template-columns: repeat(5,minmax(0,1fr)); } }
.hero-2-trust-item { display: flex; align-items: center; gap: 10px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.14); }
.hero-2-trust-item:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 899px) { .hero-2-trust-item:nth-child(odd) { border-left: 0; padding-left: 0; } }
.hero-2-trust-item svg { width: 26px; height: 26px; flex: none; color: #004DBA; filter: drop-shadow(0 0 7px rgba(43,143,255,.95)); }
.hero-2-trust-item .t-title { color: #fff; font-weight: 700; font-size: 13px; display: block; }
.hero-2-trust-item .t-sub { color: #9fb0cc; font-weight: 500; font-size: 11px; display: block; }

.hero-2-scroll { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: rgba(255,255,255,.55); font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.hero-2-scroll svg { width: 16px; height: 16px; animation: ef-bounce 1.6s infinite; }
@keyframes ef-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

.hero-2-sidevert { position: absolute; right: 24px; top: 20px; z-index: 1; display: none; flex-direction: column; gap: 2px; color: rgba(255,255,255,.5); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; text-align: right; }
@media (min-width: 1280px) { .hero-2-sidevert { display: flex; } }
.hero-2-sidevert .bar { width: 26px; height: 2px; background: rgba(255,255,255,.35); margin: 8px 0 0 auto; }

.hero-2-search-col { position: relative; }
.hero-2-scrawl { position: absolute; right: -104px; bottom: 0; z-index: 1; display: none; color: rgba(255,255,255,.7); font-family: "Brush Script MT", cursive; font-style: italic; font-size: 20px; line-height: 1.15; text-align: right; }
@media (min-width: 1280px) { .hero-2-scrawl { display: block; } }
.hero-2-scrawl .underline { display: block; width: 60px; height: 2px; background: #004DBA; margin: 4px 0 0 auto; }

/* ---------- unified 3-tab glassmorphism search box ---------- */
/* Match the home hero (.ef-manual-search) pattern: fixed min/max-height on
   desktop so swapping tabs doesn't resize the whole box. The base
   stylesheet's .ef-search-panel is `flex:1; overflow-y:auto` which lets
   any tab taller than the box scroll inside the panel. */
.ef-manual-search.ef-3tab {
  width: 100% !important;
  max-width: none !important;
  min-height: 420px !important;
  max-height: 420px !important;
  background: rgba(8,15,30,.45);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 20px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25);
  border-radius: 20px;
  padding: 10px;
}
/* Hero2 panels must fill the fixed-height box so tabs all share the same
   outer dimensions. v10.css sets `flex:1; overflow-y:auto` on
   .ef-search-panel which is exactly what we want — keep it. */
.ef-3tab > .ef-search-panel {
  flex: 1 1 auto !important;
}
/* On mobile the box keeps a fixed height too (matches desktop pattern) so
   swapping tabs doesn't resize the whole hero. Mobile panel content has
   been compacted below (smaller tile sizes, tighter gaps, smaller input
   height) so all three tabs — including the 3-step configurator — fit
   inside 400px without triggering internal scroll. */
@media (max-width: 760px) {
  .ef-manual-search.ef-3tab {
    min-height: 400px !important;
    max-height: 400px !important;
  }
  /* Tighten the inner padding so the panel has more room for content. */
  .ef-manual-search.ef-3tab { padding: 8px !important; }
  /* Tab 1 (registration) — enlarged to match Tab 2's vertical real estate. */
  .ef-3tab .ef-reg-tab1 { padding: 22px 18px !important; gap: 18px !important; }
  .ef-3tab .ef-reg-tab1 h2 { font-size: 22px !important; line-height: 1.25 !important; }
  .ef-3tab .ef-reg-tab1 h2 .block { font-size: 14px !important; margin-top: 4px !important; }
  /* Wider wrapper so the plate input has room for the UK flag + REG text.
     Original .w-[88%] was clipping the placeholder text. */
  .ef-3tab .ef-reg-tab1 .relative.inline-block { width: 96% !important; max-width: 100% !important; }
  /* Plate input needs enough left padding so the UK flag image doesn't
     overlap the placeholder text. pl-12 = 3rem = 48px. */
  .ef-3tab .ef-reg-tab1 .vehicle-inp { height: 72px !important; font-size: 28px !important; padding: 6px 6px 6px 48px !important; letter-spacing: 1px !important; }
  .ef-3tab .ef-reg-tab1 button { padding: 12px 28px !important; font-size: 15px !important; }
  .ef-3tab .ef-reg-tab1 .mt-4 { margin-top: 14px !important; }
  /* Tab 3 (engine code) — has only 2 steps instead of 3, so make its tiles
     and step headings taller to fill the same vertical space as Tab 2. */
  .ef-3tab #ef-engine-code-panel-2 .ef-step { margin-bottom: 18px !important; }
  .ef-3tab #ef-engine-code-panel-2 .ef-tile-strip .ef-choice-tile,
  .ef-3tab #ef-engine-code-panel-2 .ef-tile-strip .ef-year-tile { min-height: 60px !important; padding: 6px !important; font-size: 12px !important; }
  .ef-3tab #ef-engine-code-panel-2 .ef-step-heading { font-size: 15px !important; margin: 0 0 6px !important; }
  /* The make grid needs its own (smaller) image/text sizing — the default
     68x40 logo + 12px text doesn't fit the 60px tile and gets clipped. */
  .ef-3tab #ef-engine-code-panel-2 .ef-make-grid > .ef-choice-tile { aspect-ratio: auto !important; gap: 1px !important; }
  .ef-3tab #ef-engine-code-panel-2 .ef-make-tile img { width: 34px !important; height: 24px !important; }
  .ef-3tab #ef-engine-code-panel-2 .ef-make-tile span { font-size: 9.5px !important; line-height: 1.1 !important; }
  /* Compact the configurator tiles so the 3 steps fit in the box. */
  .ef-3tab .ef-tile-strip .ef-choice-tile,
  .ef-3tab .ef-tile-strip .ef-year-tile { min-height: 40px !important; padding: 2px !important; font-size: 9px !important; }
  .ef-3tab .ef-step-heading { font-size: 12px !important; margin: 0 0 1px !important; }
  .ef-3tab .ef-step { margin-bottom: 2px !important; }
  .ef-3tab .ef-find-button { min-height: 32px !important; font-size: 12px !important; padding: 4px 10px !important; }
  .ef-3tab .ef-search-tabs { margin: 0 0 6px !important; }
  .ef-3tab .ef-search-tab { min-height: 48px !important; padding: 6px 4px !important; }
  /* Make sure no internal scroll appears inside the panel. */
  .ef-3tab > .ef-search-panel { overflow: visible !important; }
  /* v10.css's mobile override sets .ef-search-panel to justify-content:
     flex-start (hugs the top of the box). Now that panel content is
     compact enough to leave breathing room, center it vertically. */
  .ef-3tab > .ef-search-panel { justify-content: center !important; }
}
.ef-3tab .ef-glass-panel-card { background: #fff; border-radius: 14px; padding: 18px 16px; }

/* Match home hero left div style: REG tab 1 mirrors the animated-box-left exactly */
.ef-3tab .ef-reg-tab1 {
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(26px) saturate(155%);
  backdrop-filter: blur(26px) saturate(155%);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 10px 25px rgba(4,30,72,.20), inset 0 1px 0 rgba(255,255,255,.9);
}
.ef-3tab .ef-reg-tab1 .vehicle-inp {
  font-size: 40px !important;
  font-weight: 800 !important;
}
.ef-3tab .ef-search-tabs { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: transparent; box-shadow: none; margin: 0 0 10px; padding: 0; overflow: hidden; }
.ef-3tab .ef-search-tab { justify-content: center; gap: 6px; padding: 10px 6px; border-radius: 0; border-right: 1px solid rgba(255,255,255,.16); background: transparent; min-height: 64px; font-size: 11px; min-width: 0; overflow: hidden; }
.ef-3tab .ef-search-tab:last-child { border-right: 0; }
.ef-3tab .ef-search-tab.is-active { border-right-color: transparent; }
.ef-3tab .ef-search-tab:first-child, .ef-3tab .ef-search-tab:last-child { padding-inline: 8px; }
.ef-3tab .ef-search-tab .ef-tab-cap { display: none; }
.ef-3tab .ef-search-tab .ef-tab-icon { width: 20px; height: 20px; flex: none; color: rgba(255,255,255,.85); }
.ef-3tab .ef-search-tab .ef-tab-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.2; min-width: 0; overflow: hidden; max-width: 100%; }
.ef-3tab .ef-search-tab .ef-tab-title, .ef-3tab .ef-search-tab .ef-tab-sub { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; overflow-wrap: normal !important; word-break: normal !important; }
.ef-3tab .ef-search-tab .ef-tab-title { font-size: 10px; font-weight: 800; color: #fff; }
.ef-3tab .ef-search-tab .ef-tab-sub { font-size: 8.5px; font-weight: 600; color: rgba(255,255,255,.48); }
.ef-3tab .ef-search-tab.is-active { background: linear-gradient(135deg,#004DBA 0%,#003a8c 100%); }
.ef-3tab .ef-search-tab.is-active .ef-tab-icon { color: #fff; }
.ef-3tab .ef-search-tab.is-active .ef-tab-sub { color: rgba(255,255,255,.75); }
@media (min-width: 400px) { .ef-3tab .ef-search-tab { font-size: 12px; gap: 8px; padding: 10px 8px; } .ef-3tab .ef-search-tab .ef-tab-title { font-size: 13px; } .ef-3tab .ef-search-tab .ef-tab-sub { font-size: 10.5px; } }

.ef-glass-panel-card { background: #fff; border-radius: 14px; padding: 18px 16px; }

.ef-reg-panel-heading { text-align: center; margin-bottom: 12px; }
.ef-reg-panel-heading h3 { font-size: 17px; font-weight: 800; color: #0b1d40; }
.ef-reg-panel-heading p { font-size: 12px; color: #60718c; margin-top: 2px; }

.ef-reg-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: #8493ab; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; }
.ef-reg-divider::before, .ef-reg-divider::after { content: ""; flex: 1; height: 1px; background: #dbe4ef; }

.ef-reg-selects { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 14px; }
@media (min-width: 420px) { .ef-reg-selects { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.ef-reg-select { position: relative; }
.ef-reg-select select { width: 100%; height: 42px; padding: 0 30px 0 12px; border: 1px solid #d6e0ec; border-radius: 8px; background: #fff; color: #33415c; font-size: 12.5px; font-weight: 600; appearance: none; }
.ef-reg-select svg { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: #8493ab; pointer-events: none; }

.ef-reg-submit { width: 100%; min-height: 46px; border: 0; border-radius: 999px; background: linear-gradient(90deg,#1a63d1 0%,#004DBA 65%,#003a8c 100%); color: #fff; font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 10px 20px rgba(5,96,205,.28); cursor: pointer; }

.ef-reg-microtrust { margin-top: 10px; text-align: center; color: #8493ab; font-size: 10.5px; font-weight: 600; }

/* Ticker — matches the home hero's animation. The Tailwind arbitrary class
   `animate-[ticker_25s_linear_infinite]` compiles to a reference of the
   `ticker` keyframe, which must exist somewhere on the page. Index.html
   declares it inline; every other model page loads hero2.v1.css, so the
   keyframe lives here. */
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.hero-2-ticker-inner { animation: ticker 25s linear infinite; display: inline-block; white-space: nowrap; }

/* Wide screens: larger, centred tab labels (matches reference) */
@media (min-width: 1000px) {
  .ef-3tab .ef-search-tab { gap: 10px; padding: 10px 10px; min-height: 64px; }
  .ef-3tab .ef-search-tab .ef-tab-icon { width: 24px; height: 24px; }
  .ef-3tab .ef-search-tab .ef-tab-title { font-size: 13px; }
  .ef-3tab .ef-search-tab .ef-tab-sub { font-size: 10.5px; }
}

/* Secure enquiry line under the registration ticker */
.ef-secure-line{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin:8px 0 0;text-align:center;color:#3b4a63;font-size:12px;font-weight:600;line-height:1.3}
.ef-secure-line svg{flex:none;color:#1E3A8A}
@media (max-width:420px){.ef-secure-line{font-size:11px}}

/* Tab 1: tighten spacing so the panel never scrolls */
.ef-3tab .ef-reg-tab1{padding:12px 16px!important;gap:10px!important}
.ef-3tab .ef-reg-tab1>div:first-child{margin-bottom:0!important}
.ef-3tab .ef-reg-tab1 .mt-4{margin-top:2px!important}

/* "Get Free Quote" button: same raised, bevelled effect as the active toggle tab */
#fetch-button-hero2{background:linear-gradient(180deg,#1a63d0 0%,#004DBA 50%,#003a8c 100%)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 6px rgba(0,0,30,.35),0 4px 10px rgba(0,20,80,.45)!important}
.ef-3tab .ef-reg-tab1 .ef-secure-line{margin-top:0!important}

/* Redesign pass: right card may grow with content (Make > Model > Variant > Year) */
.ef-manual-search.ef-3tab{max-height:none!important;padding-top:6px!important}
@media (max-width:760px){.ef-manual-search.ef-3tab{max-height:none!important}}
.ef-3tab > .ef-search-panel{overflow:visible!important}
.ef-3tab .ef-search-tab.is-active{background:linear-gradient(180deg,#1a63d0 0%,#004DBA 50%,#003a8c 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 6px rgba(0,0,30,.35),0 4px 10px rgba(0,20,80,.45)}
.ef-3tab .ef-search-tab:not(.is-active){box-shadow:inset 0 2px 5px rgba(0,0,0,.25)}

/* ===== Mobile pass (hero2): override the compact mobile sizes above ===== */
@media (max-width:760px){
  .ef-3tab .ef-tile-strip .ef-make-tile,.ef-3tab .ef-tile-strip .ef-model-tile,.ef-3tab .ef-tile-strip .ef-view-all{min-height:76px !important;padding:3px !important;font-size:10px !important}
  .ef-3tab .ef-tile-strip .ef-year-tile{min-height:36px !important;font-size:12px !important}
  .ef-3tab .ef-tile-strip .ef-variant-tile{min-height:40px !important;font-size:11px !important}
  .ef-3tab .ef-tile-strip .ef-view-all{font-weight:600 !important}
  .ef-3tab .ef-year-grid .ef-view-all,.ef-3tab .ef-variant-grid .ef-view-all{min-height:0 !important}
  .ef-3tab .ef-step-heading{font-size:14px !important;margin:4px 0 4px !important}
  .ef-3tab .ef-step{margin-bottom:4px !important}
  .ef-3tab .ef-search-tabs{margin:0 0 12px !important}
  .ef-3tab .ef-search-tab{min-height:52px !important;padding:6px 6px !important;justify-content:center !important;text-align:center}
  .ef-3tab .ef-search-tab .ef-tab-icon{display:none}
  .ef-3tab .ef-search-tab .ef-tab-stack{align-items:center;text-align:center}
  .ef-3tab .ef-search-tab .ef-tab-title{font-size:11px;white-space:normal !important;overflow:visible;text-overflow:clip;line-height:1.15}
  .ef-3tab .ef-search-tab .ef-tab-sub{font-size:9px;white-space:normal !important}
  .ef-manual-search.ef-3tab{padding-top:10px !important}
}
@media (max-width:760px){ .ef-3tab .ef-tile-strip .ef-view-all{font-size:9.5px !important} }

/* hero2: minimal space above the title (the removed eyebrow line used to sit here) */
.hero-2-inner{padding-top:20px}
.hero-2-grid{margin-top:8px}
@media (max-width:760px){.hero-2-inner{padding-top:16px}.hero-2-grid{margin-top:0}}
.hero-2-inner{padding-bottom:16px}
.hero-2-scroll{margin-top:20px}

/* Mobile Engine Code tab: logo box keeps the 17:10 shape (34x24 cut the logos), sized to fit the small tile */
@media (max-width: 760px) {
  .ef-3tab #ef-engine-code-panel-2 .ef-make-tile img { width: 52px !important; height: auto !important; max-width: none !important; aspect-ratio: 17 / 10; }
}

/* Mobile: same breathing room around selected tiles */
@media (max-width:760px){
  .ef-3tab .ef-step{margin-bottom:8px !important}
  .ef-3tab .ef-step-heading{margin:6px 0 8px !important}
}

/* Phones: a proper margin of hero background below the search card */
@media (max-width:760px){ .hero-2-inner{padding-bottom:30px} }

/* Mobile Engine Code tab = same sizes and spacing as the Make & Model tab (the older compact rules above are overridden) */
@media (max-width: 760px) {
  .ef-3tab #ef-engine-code-panel-2 .ef-step { margin-bottom: 8px !important; }
  .ef-3tab #ef-engine-code-panel-2 .ef-step-heading { font-size: 14px !important; margin: 6px 0 8px !important; }
  .ef-3tab #ef-engine-code-panel-2 .ef-tile-strip .ef-choice-tile { min-height: 76px !important; padding: 3px !important; font-size: 10px !important; }
  .ef-3tab #ef-engine-code-panel-2 .ef-make-tile span { font-size: 10px !important; line-height: 1.1 !important; }
  .ef-3tab #ef-engine-code-panel-2 .ef-make-tile img { width: 60px !important; }
}

/* Desktop: all three tabs share one card height (sized to Make & Model), tab 2 gap under the tabs matches hero1 */
@media (min-width:1024px){
  .ef-manual-search.ef-3tab{min-height:0!important}
  .ef-3tab #ef-make-model-panel-2 .ef-glass-panel-card{padding:2px 16px 8px}
  .ef-manual-search.ef-3tab .ef-search-tabs{margin:0!important}
  .ef-manual-search.ef-3tab .ef-search-panel{justify-content:space-evenly}
  /* Engine page: image column hugs the title and the hero has less dead space below */
  .text-center.fade-in-on-scroll:has(+ div .ef-3tab):has(+ div img){margin-bottom:20px!important}
  div.lg\:flex-row:has(> div > .ef-3tab):has(> div img){align-items:flex-start}
  section:has(.ef-3tab){padding-bottom:24px!important}
  /* engine photos are square with ~9% transparent margin top and bottom: trim it so the engine starts level with the card */
  div.lg\:flex-row:has(> div > .ef-3tab) > div > img{margin-top:-9.4%;margin-bottom:-8.6%}
}

/* Mobile/tablet engine page: same trimming as desktop (title gap, transparent photo margin, spacing before the card) */
@media (max-width:1023px){
  .text-center.fade-in-on-scroll:has(+ div .ef-3tab):has(+ div img){margin-bottom:0!important}
  div.lg\:flex-row:has(> div > .ef-3tab) > div > img{margin-top:-9.4%;margin-bottom:-8.6%}
  div.lg\:flex-row:has(> div > .ef-3tab):has(> div img){row-gap:0;--tw-space-y-reverse:0}
  div.lg\:flex-row:has(> div > .ef-3tab):has(> div img)>*+*{margin-top:8px!important}
}

/* Mobile: scroll-reveal panels start translated off-screen to the right; never let them create a horizontal scrollbar */
@media (max-width:1023px){ html,body{overflow-x:clip} }

/* Hero2 H1: the site-wide heading colour rule made it dark blue on the dark hero. Light, lighter weight. */
#hero-2 .hero-2-h1{color:#fff!important;font-weight:600!important}
#hero-2 .hero-2-h1 .gold{color:#fff!important;font-weight:600!important}

/* Mobile: each tab's card sizes to its own content (registration / engine code are shorter than make & model) */
@media (max-width:760px){
  .ef-manual-search.ef-3tab{min-height:0!important;max-height:none!important;padding-bottom:10px!important}
  .ef-3tab > .ef-search-panel{flex:0 0 auto!important;justify-content:flex-start!important}
  .ef-3tab .ef-search-tabs{margin:0 0 8px!important}
}

/* Desktop: title + description block is vertically centred against the search card */
@media (min-width:1024px){ .hero-2-grid{align-items:center} }

/* Desktop: equal space above and below the tab content (was tight above, loose below) */
@media (min-width:1024px){
  .ef-manual-search.ef-3tab{padding:10px!important}
  .ef-manual-search.ef-3tab .ef-search-panel{justify-content:center!important}
  .ef-manual-search.ef-3tab .ef-search-tabs{margin:0 0 10px!important}
  .ef-manual-search.ef-3tab .ef-search-panel{flex:0 0 auto!important;justify-content:flex-start!important}
}

/* Desktop: the script reserves ~76px of extra hero height (so the background doesn't jump when a variant row appears).
   Centre the content in the hero so that reserved space splits above and below instead of all landing underneath. */
@media (min-width:761px){
  #hero-2{display:flex!important;flex-direction:column;justify-content:center;align-items:stretch!important;padding:0!important}
  #hero-2 .hero-2-inner{width:90%;padding-bottom:28px}
}

/* Hero2: title and description centred on mobile only (desktop keeps them left-aligned beside the card) */
@media (max-width:1023px){
  #hero-2 .hero-2-content-col{text-align:center}
  #hero-2 .hero-2-h1,#hero-2 .hero-2-h1 .gold,#hero-2 .hero-2-sub,#hero-2 .hero-2-desc{text-align:center}
  #hero-2 .hero-2-desc{margin-left:auto;margin-right:auto}
}

/* Desktop hero2 "Variation 1": tighter H1 that breaks before the last word, blue accent word, bold subline, narrower description */
@media (min-width:1024px){
  #hero-2 .hero-2-h1{font-size:clamp(34px,2.9vw,46px);line-height:1.12;font-weight:700!important;max-width:13em;letter-spacing:-.01em}
  #hero-2 .hero-2-h1 .accent{display:block;color:#2b7fff!important;font-weight:700!important}
  #hero-2 .hero-2-h1 .gold{display:block;font-size:clamp(16px,1.25vw,20px)!important;line-height:1.3;font-weight:700!important;margin-top:16px!important;letter-spacing:0}
  #hero-2 .hero-2-desc{font-size:clamp(13px,.88vw,14px);line-height:1.55;max-width:500px;margin-top:18px;color:rgba(255,255,255,.86)}
}

/* Variation 1 accent bar under the subline (desktop: left aligned, mobile: centred) */
#hero-2 .hero-2-h1 .gold::after{content:"";display:block;width:48px;height:3px;border-radius:2px;background:#2b7fff;margin-top:12px}
/* Same look on mobile, scaled down */
@media (max-width:1023px){
  #hero-2 .hero-2-h1{font-size:28px;line-height:1.15;font-weight:700!important}
  #hero-2 .hero-2-h1 .accent{display:block;color:#2b7fff!important;font-weight:700!important}
  #hero-2 .hero-2-h1 .gold{display:block;font-size:16px!important;line-height:1.3;font-weight:700!important;margin-top:10px!important}
  #hero-2 .hero-2-h1 .gold::after{margin-left:auto;margin-right:auto}
}

/* Hero2 uses the same background photo + blue wash as the Jaguar (two-card) hero */
#hero-2{background:#1e3a8a url("/asset/img/new-banner.webp") center/cover no-repeat}
#hero-2 .hero-2-bg{display:none}
#hero-2 .hero-2-scrim{background:rgba(30,58,138,.7)}

/* Hero2 desktop: equal space above/below the content inside the Make & Model and Engine Code cards (heights unchanged) */
@media (min-width:1024px){
  .ef-3tab #ef-make-model-panel-2 .ef-glass-panel-card{padding:7px 16px 3px}
  .ef-3tab #ef-engine-code-panel-2 .ef-glass-panel-card{padding:20px 16px 16px}
}

/* Hero2 phones/tablets: equal space above/below content in the Make & Model and Engine Code cards (heights unchanged) */
@media (max-width:1023px){
  .ef-3tab #ef-make-model-panel-2 .ef-glass-panel-card,
  .ef-3tab #ef-engine-code-panel-2 .ef-glass-panel-card{padding-top:15px;padding-bottom:21px}
}

/* Engine-page title block (above the 3-tab card): same title/subtitle rhythm as the two-card hero
   (14px from the top, 1.05 line height, 16px between title and each subtitle line, 20px before the card) */
@media (min-width:768px){
  .text-center.fade-in-on-scroll:has(+ div .ef-3tab){padding:0 8px!important;margin:-50px 0 20px!important}
  .text-center.fade-in-on-scroll:has(+ div .ef-3tab) h1{line-height:1.05!important;margin:0 0 16px!important}
  .text-center.fade-in-on-scroll:has(+ div .ef-3tab) h1 + p{margin:0!important;padding:0!important}
  .text-center.fade-in-on-scroll:has(+ div .ef-3tab) h1 + p + p{margin:16px 0 0!important}
}

/* Hero2 stacked (phones/tablets): minimal gap between the description and the search card */
@media (max-width:1023px){
  .hero-2-search-col{margin-top:8px}
}

/* Phones only: darker, soft-edged shade behind the title/subtitle/description so the text stays readable on the photo */
@media (max-width:767px){
  #hero-2 .hero-2-content-col{position:relative}
  #hero-2 .hero-2-content-col::before{content:"";position:absolute;z-index:-1;inset:-6px -10px;border-radius:24px;background:rgba(6,16,45,.55);box-shadow:0 0 34px 22px rgba(6,16,45,.55);pointer-events:none}
}

/* Hero2 phones: Make & Model and Engine Code cards use one even gap (20px) above every heading, above Find My Engine, and top/bottom */
@media (max-width:760px){
  .ef-3tab #ef-make-model-panel-2 .ef-glass-panel-card,
  .ef-3tab #ef-engine-code-panel-2 .ef-glass-panel-card{padding-top:14px;padding-bottom:20px}
  .ef-3tab #ef-make-model-panel-2 .ef-step,
  .ef-3tab #ef-engine-code-panel-2 .ef-step{margin-bottom:0!important}
  .ef-3tab #ef-make-model-panel-2 .ef-inline-status:empty,
  .ef-3tab #ef-engine-code-panel-2 .ef-inline-status:empty{display:none}
  .ef-3tab #ef-make-model-panel-2 .ef-find-button,
  .ef-3tab #ef-engine-code-panel-2 .ef-find-button{margin-top:6px!important}
}