/* Original PEV Labs identity, shared across the retained page templates.
   Glass is reserved for navigation and controls. Reading surfaces remain
   opaque so the original photographs, forms and content stay legible. */

body.pev-refined {
  --pev-panel: linear-gradient(145deg, #16212c, #101820 78%);
  --pev-glass: #121c26;
  --pev-glass-scrolled: #101923;
  --pev-edge: rgba(207, 228, 243, .16);
  --pev-edge-bright: rgba(207, 228, 243, .25);
  --pev-depth: inset 0 1px 0 rgba(255, 255, 255, .065), 0 10px 30px rgba(0, 0, 0, .16);
  --pev-control-radius: 12px;
  --pev-dock: #121c26;
  --pev-dock-scrolled: #101923;
  --pev-dock-engaged: #101923;
  --pev-dock-link: #101923;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  background: radial-gradient(ellipse at 88% 0%, rgba(23, 162, 255, .085), transparent 38%),
    radial-gradient(ellipse at 2% 65%, rgba(103, 232, 166, .025), transparent 32%), var(--bg);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.pev-refined {
    --pev-glass: rgba(15, 23, 32, .81);
    --pev-glass-scrolled: rgba(12, 20, 28, .92);
    /* The desktop shell lets the hero show through; compact link surfaces
       preserve a readable foreground even over the lightest photograph. */
    --pev-dock: rgba(12, 20, 28, .32);
    --pev-dock-scrolled: rgba(12, 20, 28, .52);
    --pev-dock-engaged: rgba(12, 20, 28, .58);
    --pev-dock-link: rgba(7, 14, 22, .58);
  }
}

.pev-refined :is(h1, h2, h3) { font-kerning: normal; }
.pev-refined :is(.hei, .job-hero) h1 { font-size: clamp(2.2rem, 4.3vw, 3.7rem); font-weight: 600; letter-spacing: -.035em; }
.pev-refined :is(.header-title, .mv-header h2, .card-header h1, .policy-frame h1, .terms-header h1) { font-weight: 600; }
.pev-refined :is(.step-description, .product-description, .standard-card p) { color: #bac8d3; }
.pev-refined :is(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--accent-2); outline-offset: 4px; }
.pev-refined :is(input[type='checkbox'], input[type='radio']) { accent-color: var(--accent); }

/* Consistent, comfortably sized controls without changing their behaviour. */
.pev-refined :is(.btn, .read-btn, .service-btn, .shop-btn, .apply-btn, .submit-btn, .cta-button,
  .product-quote-btn, .catalogue-quote-link, .pev-page-button, .pev-motion-toggle, .back-link) {
  border-radius: var(--pev-control-radius);
  letter-spacing: -.01em;
}
.pev-refined :is(.btn-primary, .read-btn, .submit-btn, .apply-btn, .cta-button, .shop-btn,
  .product-quote-btn, .catalogue-quote-link) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 12px rgba(0, 0, 0, .12);
}
.pev-refined :is(.btn-secondary, .pev-page-button) { border-color: var(--pev-edge); background: #17232f; }
.pev-refined .pev-motion-toggle { background: var(--pev-glass-scrolled); box-shadow: var(--pev-depth); }
.pev-refined :is(.btn, .read-btn, .service-btn, .apply-btn, .shop-btn, .product-quote-btn):active { transform: translateY(0); }
.pev-refined button:disabled { transform: none; }
.pev-refined .nav-menu > li > a { border-radius: 11px; }
.pev-refined .nav-menu > li > a.active { background: rgba(23, 162, 255, .12); }
.pev-refined .nav-menu > li > a:not(.shop-btn)::after { left: 14px; bottom: 4px; width: calc(100% - 28px); height: 1px; }

/* A common panel material across services, company pages, careers and shop. */
.pev-refined :is(.details-column, .step-card, .mv-row, .job-card, .job-content, .product-card,
  .product-hero, .product-details, .full-row, .standard-card) {
  background: var(--pev-panel);
  border-color: var(--pev-edge);
  box-shadow: var(--pev-depth);
}
.pev-refined :is(.feature-card, .spec-category, .document-item, .policy-frame .section) {
  background: #111b25;
  border-color: var(--pev-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}
.pev-refined .solution-cta { background: radial-gradient(ellipse at 100% 0%, rgba(23, 162, 255, .09), transparent 65%), #111b25; border-color: var(--pev-edge); box-shadow: var(--pev-depth); }
.pev-refined .pev-service-tabs { border-radius: 16px; background: #121d27; border-color: var(--pev-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055); }
.pev-refined .pev-service-tab { border-radius: 11px; font-weight: 600; }
.pev-refined .pev-service-tab[aria-selected='true'] { background: linear-gradient(180deg, #48b5ff, var(--accent)); }
.pev-refined .icon-box { background: linear-gradient(145deg, rgba(23, 162, 255, .14), rgba(23, 162, 255, .045)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
.pev-refined .sidebar { background: #111b25; border-color: var(--pev-edge); box-shadow: var(--pev-depth); }
.pev-refined .categories-list li { border-radius: 10px; }
.pev-refined .categories-list li.active { color: #cceaff; background: #163047; }
.pev-refined .vertical-tabs-container { border-color: var(--pev-edge); box-shadow: var(--pev-depth); }
.pev-refined .tab-content { background: #111b25; }
.pev-refined .tab-btn.active { color: #cceaff; background: #163047; }
.pev-refined .product-title { font-weight: 600; }
.pev-refined .product-category { font-size: .69rem; }
.pev-refined .product-description { font-size: .84rem; line-height: 1.7; }

/* Forms use quiet inset controls, with the same focus treatment as navigation. */
.pev-refined .main-content > .container > .card { background: #111b25; border: 1px solid var(--pev-edge); box-shadow: var(--pev-depth); }
.pev-refined .form-group label { font-size: .82rem; font-weight: 550; color: #d9e3eb; }
.pev-refined .form-group :is(input, select, textarea),
.pev-refined .form-type-select { border-color: var(--pev-edge); background: #0d161f; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .16); }
.pev-refined .form-group :is(input, select, textarea):focus { background: #132331; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(23, 162, 255, .12); }
.pev-refined .form-type-select:focus { border-color: var(--accent); }
.pev-refined .form-group :is(input, textarea)::placeholder { color: #9babb8; }
.pev-refined .search-container { border: 1px solid var(--pev-edge); border-radius: 12px; background: rgba(6, 13, 19, .65); }
.pev-refined .search-container:focus-within { border-color: var(--accent); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pev-refined :is(.product-card, .job-card):hover { border-color: rgba(103, 232, 166, .32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 14px 32px rgba(0, 0, 0, .22); transform: translateY(-2px); }
  .pev-refined .details-column:hover { background: var(--pev-panel); border-color: var(--pev-edge-bright); transform: translateY(-2px); }
  .pev-refined .pev-service-panel.details-column:hover { transform: none; }
}

/* A transparent pointer bridge keeps a desktop submenu reachable across its
   visual gap. Keyboard disclosure behavior remains in refinements.js. */
@media (min-width: 881px) {
  .pev-refined .navbar, .pev-refined > header {
    border-color: var(--pev-edge-bright);
    background: var(--pev-dock);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 10px 28px rgba(0, 0, 0, .12);
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
  }
  .pev-refined .navbar.scrolled { background: var(--pev-dock-scrolled); }
  .pev-refined .navbar:focus-within,
  .pev-refined > header:focus-within { background: var(--pev-dock-engaged); }
  .pev-refined .navbar .nav-menu > li > a:not(.shop-btn),
  .pev-refined > header .nav-menu > li > a:not(.shop-btn) {
    background: var(--pev-dock-link);
    color: var(--text);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  }
  .pev-refined .navbar .nav-menu > li > a.active:not(.shop-btn),
  .pev-refined > header .nav-menu > li > a.active:not(.shop-btn) { color: var(--accent-2); }
  .pev-refined .navbar .nav-menu > li > a:not(.shop-btn):is(:hover, :focus-visible, [aria-expanded='true']),
  .pev-refined > header .nav-menu > li > a:not(.shop-btn):is(:hover, :focus-visible, [aria-expanded='true']) {
    background: #152b39;
    color: #b5f5d4;
  }
  .pev-refined .navbar .dropdown, .pev-refined > header .dropdown {
    border-color: var(--pev-edge-bright);
    background: var(--pev-glass-scrolled);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 42px rgba(0, 0, 0, .32);
    backdrop-filter: blur(28px) saturate(140%);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
  }
  .pev-refined .navbar .dropdown::before,
  .pev-refined > header .dropdown::before {
    content: '';
    position: absolute;
    left: -1px;
    right: -1px;
    top: -15px;
    height: 15px;
  }

  /* The shop keeps its own search and quote tools, inside the same glass
     navigation silhouette used by the company pages. */
  .pev-refined > header {
    top: 16px;
    width: min(calc(100% - 48px), 1320px);
    min-height: 78px;
    margin: 16px auto 0;
    padding: 10px 24px;
    gap: 12px;
    border: 1px solid var(--pev-edge-bright);
    border-radius: 23px;
  }
  .pev-refined > header > .logo { flex-shrink: 0; padding: 0; }
  .pev-refined > header > nav { margin: 0 auto; min-width: 0; }
  .pev-refined > header .nav-menu { gap: 0; }
  .pev-refined > header .nav-menu > li { flex-shrink: 0; }
  .pev-refined > header .nav-menu > li > a { padding: 10px; font-size: 13px; }
  .pev-refined > header .dropdown { top: calc(100% + 14px); }
  .pev-refined > header .header-right { gap: 10px; min-width: 0; }
  .pev-refined > header .search-container { padding: 3px 9px; min-width: 0; }
  .pev-refined > header .search-container input { width: clamp(95px, 12vw, 180px); min-width: 0; }
  .pev-refined > header .catalogue-quote-link { flex-shrink: 0; white-space: nowrap; }
}

@media (min-width: 881px) and (max-width: 1100px) {
  .pev-refined > header { padding-left: 16px; padding-right: 16px; gap: 8px; }
  .pev-refined > header .nav-menu > li > a { padding-left: 7px; padding-right: 7px; font-size: 12px; }
  .pev-refined > header .header-right { gap: 7px; }
  .pev-refined > header .catalogue-quote-link { padding-left: 12px; padding-right: 12px; font-size: 11px; }
}

/* The shared navbar changes at 880px. Align both catalogue templates with
   that boundary so tablet widths never lose both navigation controls. */
@media (max-width: 880px) {
  /* Keep the closed drawer inside the viewport. Its former translateX(100%)
     extended the document width on templates without root overflow clipping.
     The existing .open, inert and aria-hidden contracts remain authoritative. */
  .pev-refined .navbar .nav-menu {
    transform: none;
    clip-path: inset(0 0 0 100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: clip-path 320ms var(--ease-out), opacity 180ms ease, visibility 0s 320ms;
  }
  .pev-refined .navbar .nav-menu.open {
    clip-path: inset(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .pev-refined > header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20000;
    width: 100%;
    min-height: 76px;
    margin: 0;
    padding: 10px 20px;
    display: grid;
    grid-template-columns: minmax(60px, 1fr) auto 44px;
    gap: 10px;
    border: 0;
    border-bottom: 1px solid var(--stroke);
    border-radius: 0;
    background: #0f151c;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .pev-refined > header > .logo { grid-column: 1; grid-row: 1; padding: 0; }
  .pev-refined > header > nav { display: none; }
  .pev-refined > header > .header-right { grid-column: 2; grid-row: 1; margin: 0; }
  .pev-refined > header > .menu-toggle {
    grid-column: 3;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
  }
  .pev-refined > header .search-container { display: none; }
  .pev-refined > header ~ #main-content { margin-top: 88px; }
  .pev-refined .mobile-nav-links { display: flex !important; padding-top: 96px; }
  .pev-refined .mobile-nav-links .dropdown {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    min-width: 0;
    margin: 8px 0 12px;
    padding: 8px 0;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: var(--bg-2);
    border: 0;
    box-shadow: none;
  }
  .pev-refined .mobile-nav-links .has-dropdown.open > .dropdown { display: block; }
  .pev-refined .mobile-search-container { display: block; margin-bottom: 12px; }
  .pev-refined .mobile-search-container .search-container { display: flex !important; }
}

/* The retained powertrain explorer now sits below the company navigation.
   Its rendering, controls and component relationships are unchanged. */
body.powertrain-page .hero { padding-top: 130px; }
@media (min-width: 651px) {
  body.powertrain-page .hero .hero-intro { padding-top: 130px; }
  body.powertrain-page .studio-motion { top: 105px; }
}
@media (max-width: 650px) {
  body.powertrain-page .hero { height: 940px; min-height: 940px; }
  body.powertrain-page .hero .hero-intro { padding-top: 0; }
  body.powertrain-page .studio-model-wrap { top: 425px; }
}

/* Use the content viewport width: 100vw includes the scrollbar and caused
   horizontal scrolling in templates that do not clip the page body. */
.pev-refined footer {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background: radial-gradient(ellipse at 50% 0%, rgba(23, 162, 255, .035), transparent 70%), #0c131b;
  border-top-color: var(--pev-edge);
}
.pev-refined .footer-section h3 { font-family: inherit; font-size: .72rem; font-weight: 650; letter-spacing: .065em; }
.pev-refined .footer-links a, .pev-refined .footer-contact-info { font-size: .82rem; line-height: 1.75; }
.pev-refined .copyright { font-size: .75rem; color: #a6b6c3; }
.pev-refined .social-icon { border-radius: 12px; border: 1px solid var(--pev-edge); }

.powertrain-page .home-social-link { font-size: .75rem; text-decoration: none; color: var(--muted); }
.powertrain-page .home-social-link:hover { color: var(--accent-2); }

/* Accessibility preferences keep material effects optional. No backdrop-filter
   support uses the opaque --pev-glass defaults declared above. */
@media (prefers-reduced-transparency: reduce) {
  body.pev-refined { --pev-glass: #121c26; --pev-glass-scrolled: #101923; --pev-dock: #121c26; --pev-dock-scrolled: #101923; --pev-dock-engaged: #101923; --pev-dock-link: #101923; }
  .pev-refined :is(.navbar, .dropdown, .pev-motion-toggle), .pev-refined > header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  body.pev-refined { --pev-edge: #788c9e; --pev-edge-bright: #a6b9c9; --pev-glass: #101923; --pev-glass-scrolled: #101923; --pev-dock: #101923; --pev-dock-scrolled: #101923; --pev-dock-engaged: #101923; --pev-dock-link: #101923; }
  .pev-refined :is(.step-description, .product-description, .standard-card p, .copyright) { color: #e2eaf0; }
}
@media (forced-colors: active) {
  body.pev-refined { --pev-panel: Canvas; --pev-glass: Canvas; --pev-glass-scrolled: Canvas; --pev-dock: Canvas; --pev-dock-scrolled: Canvas; --pev-dock-engaged: Canvas; --pev-dock-link: Canvas; --pev-edge: CanvasText; --pev-edge-bright: CanvasText; --pev-depth: none; }
  .pev-refined :is(.navbar, .dropdown, .pev-motion-toggle), .pev-refined > header { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .pev-refined .nav-menu > li > a { color: LinkText !important; background: Canvas !important; text-shadow: none !important; }
  .pev-refined :is(.pev-service-tab[aria-selected='true'], .tab-btn.active, .categories-list li.active) { border: 1px solid Highlight; outline: 1px solid Highlight; outline-offset: -2px; }
  .pev-refined :is(a, button, input, select, textarea, summary):focus-visible { outline-color: Highlight; }
}