.f21-ev .f21-ev-hero, .f21-price .calculator { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.f21-ev-hero { align-items: center; gap: clamp(20px,4vw,55px); padding: clamp(20px,4vw,58px); border: 1px solid #c4c9c5; background: #f0f1ee; }
.f21-ev-hero h1 { font-size: clamp(34px,5vw,75px); letter-spacing: -.04em; line-height: 1; margin: 12px 0 16px; }
.f21-ev-hero img { width: 100%; height: auto; }
.f21-ev-hero .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.f21-ev-address { font-weight: 700; }
.f21-ev-services { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 24px 0; }
.f21-ev-services h3 { font-size: clamp(20px,2.15vw,29px); line-height: 1.12; margin: 8px 0; }
.f21-ev-services .client-card { min-width: 0; }
.f21-ev-contact { padding: clamp(18px, 3vw, 38px); border: 1px solid #c4c9c5; background: #edeee9; }
.f21-ev-contact p { margin: 8px 0 14px; }
.f21-hybrids { --accent: #a28a53; --accent-strong: #725a2b; }
.f21-hybrids .f21-ev :is(.kicker, .client-card > span) { color: var(--accent-strong); }
.f21-hybrids :is(#hybrid-services, #request, #mesta) { scroll-margin-top: 0; }
.f21-ev-section-head, .f21-ev-related { margin-top: 32px; }
.f21-ev-section-head p:last-child { margin: 8px 0 0; }
.f21-ev-contact-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.f21-ev-contact-actions .btn { min-width: min(100%, 155px); }
.f21-ev-contact-location a { text-decoration: underline; text-underline-offset: .16em; }
.f21-ev-related .f21-ev-services { grid-template-columns: repeat(2,minmax(0,1fr)); margin-bottom: 0; }
.f21-price { color: #171a1a; margin: 0 0 22px; }
.f21-price .calculator { border: 1px solid #c4c9c5; }
.f21-price .calc-fields, .f21-price .calc-result { padding: clamp(14px,3vw,38px); min-width: 0; }
.f21-price .calc-fields { background: #f6f7f3; }
.f21-price .calc-result { color: #fff; background: #191e1e; }
.f21-price h2 { margin: 0 0 13px; font-size: clamp(24px,3vw,38px); }
.f21-price fieldset { padding: 0; margin: 0 0 13px; border: 0; min-width: 0; }
.f21-price fieldset:last-child { margin-bottom: 0; }
.f21-price legend { padding: 0 0 5px; font-weight: 700; }
.f21-price .choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.f21-price .choice-grid.diameters { grid-template-columns: repeat(5,minmax(0,1fr)); }
.f21-price label { display: grid; position: relative; cursor: pointer; }
.f21-price input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.f21-price label span { min-height: 44px; display: grid; place-items: center; padding: 3px; text-align: center; font-size: 14px; font-weight: 700; border: 1px solid #828885; }
.f21-price label input:checked + span { background: #191e1e; border-color: #191e1e; color: #fff; }
.f21-price label input:focus-visible + span { outline: 2px solid #ac1c2a; outline-offset: 2px; }
.f21-price .size-note { margin: -4px 0 13px; font-size: 13px; }
.f21-price .calc-result .eyebrow { color: #ff929a; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.f21-price .calc-result [aria-live] p { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid #626967; }
.f21-price .calc-result strong { white-space: nowrap; font-size: clamp(20px,2.7vw,38px); }
.f21-price .calc-note { margin: 12px 0; font-size: 14px; color: #d3d7d4; }
.f21-slots { display: flex; flex-wrap: wrap; gap: 7px; }
.f21-slots a { padding: 12px; border: 1px solid #f2f2ee; color: #fff; text-decoration: none; font-weight: 700; }
.f21-slots a:hover { background: #f2f2ee; color: #171a1a; }
.f21-price .f21-pdf { color: #fff; display: inline-block; margin-top: 13px; text-decoration: underline; }
#wheels-calc { scroll-margin-top: 80px; }
@media (max-width: 700px) {
  .f21-ev .f21-ev-hero, .f21-ev-services, .f21-ev-related .f21-ev-services, .f21-price .calculator { grid-template-columns: 1fr; }
  .f21-ev-hero .btn { width: 100%; min-width: 0; }
  .f21-ev-contact-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .f21-ev-contact-actions .btn { min-width: 0; padding-inline: 12px; }
  .f21-ev-contact-actions .btn--primary { grid-column: 1 / -1; }
}
.f21-ev-hero h1 { text-wrap: balance; }
.f21-ev .f21-ev-hero .f21-ev-choose { display: inline-flex; }
@media (max-width: 700px) {
  .f21-ev.section { padding-top: 20px; padding-inline: 18px; }
}


/* Keep the EV entry in the same direction rail as the four core services. */
.mode-card--hybrids {
  --card-accent: #c1ac78;
  --card-image: url("./assets/optimized/home-hybrids-480-tone26.webp");
  --card-position: 58% 50%;
}
.mobile-home-prod__tile--hybrids { --tile-accent: #c1ac78; }
.home .creed__item--hybrids { grid-column: 1 / -1; }
.home .creed__item--hybrids::before { background: #a28a53; }
@media (min-width: 981px) {
  body.home .mode-row { grid-template-columns: repeat(5, minmax(0,1fr)); }
  body.home .mode-row .mode-card {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    gap: 8px;
    padding: 13px clamp(10px, 1.25vw, 20px);
  }
  body.home .mode-row .mode-card > div { grid-area: 2 / 1 / 3 / -1; min-width: 0; }
  body.home .mode-row .mode-card > b { grid-area: 1 / 2; }
  body.home .mode-row .mode-card :is(strong, small) { white-space: normal; overflow-wrap: anywhere; }
  body.home .mode-row .mode-card strong { font-size: clamp(16px,1.6vw,25px); line-height: 1.1; }
  body.home .mode-row .mode-card small { line-height: 1.25; }
}
@media (max-width: 980px) {
  body.home main > .first-view { display: none; }
  body.home .mobile-home-prod__hero {
    display: block;
    height: auto;
    min-height: 0;
    background: var(--paper, #f4f5f4);
  }
  body.home .mobile-home-prod__hero > img {
    position: static;
    display: block;
    height: clamp(175px,52vw,300px);
    object-position: 55% 53%;
  }
  body.home .mobile-home-prod__hero::after { content: none; }
  body.home .mobile-home-prod__copy {
    padding: 14px 18px 13px;
    color: #141819;
    border-top: 2px solid var(--red);
  }
  body.home .mobile-home-prod__copy p:not(.mobile-home-prod__title) {
    color: #555b59;
    margin-bottom: 8px;
  }
  body.home .mobile-home-prod__title {
    font-size: clamp(30px,8.7vw,46px);
    line-height: .98;
    letter-spacing: -.035em;
    margin-bottom: 8px;
  }
  body.home .mobile-home-prod__copy strong {
    color: #343b39;
    max-width: 42ch;
    font-size: 14px;
    font-weight: 550;
    line-height: 1.4;
  }
  body.home .mobile-home-prod__facts {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1.05fr) minmax(0, .75fr);
    width: auto;
    inline-size: auto;
    margin: 0 18px;
    border: 1px solid #33393b;
    background: #191e20;
    color: #fff;
    overflow: visible;
  }
  body.home .mobile-home-prod__facts > * {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 55px;
    padding: 7px clamp(6px, 2.2vw, 14px);
    border: 0;
    border-inline-end: 1px solid #444a4b;
    color: inherit;
    text-align: left;
    text-decoration: none;
  }
  body.home .mobile-home-prod__facts > :last-child { border-inline-end: 0; }
  body.home .mobile-home-prod__facts a:hover { background: #292e30; }
  body.home .mobile-home-prod__facts a:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
  body.home .mobile-home-prod__facts span {
    margin: 0;
    color: #cbd0ce;
    font: 700 10px/1.1 var(--mono, sans-serif);
    letter-spacing: .045em;
    text-transform: uppercase;
  }
  body.home .mobile-home-prod__facts b {
    margin: 0;
    color: #fff;
    font: 700 clamp(11px, 3.05vw, 14px)/1.2 var(--sans, sans-serif);
    letter-spacing: -.01em;
  }
  body.home .mobile-home-prod__facts i { color: #f0b674; font-style: normal; }
  body.home .mobile-home-prod__facts > :nth-child(2) b { white-space: nowrap; }
  body.home .mobile-home-prod__tile { min-height: clamp(210px,65vw,272px); }
  body.home .mobile-home-prod__actions .btn { padding-inline: 10px; gap: 6px; white-space: normal; }
  body.home .mobile-home-prod__actions .btn b { flex: 0 0 auto; }
}

body:is(.home, .f21-hybrids) .rail__hybrids span { color: #d5c397; }
@media (max-width: 980px) {
  body.home .mobile-home-prod__hero > img { object-position: 74% 48%; }
}

.f21-wheels #services { scroll-margin-top: 74px; }
.f21-wheels #services .diagnostic-grid article { padding: 0; }
.f21-wheels #services .diagnostic-grid article a {
  position: relative;
  display: block;
  height: 100%;
  padding: 14px 30px 14px 14px;
}
.f21-wheels #services .diagnostic-grid article a:hover { background: #e8ebe7; }
.f21-wheels #services .diagnostic-grid article a:focus-visible { outline: 2px solid #a91623; outline-offset: -2px; }
.f21-wheels #services .diagnostic-grid article a > b { position: absolute; top: 13px; right: 12px; color: #a91623; }
.f21-wheels #services .diagnostic-grid h3 { margin-block: 6px; }
.f21-wheels #services .diagnostic-grid p { margin-bottom: 0; }
.f21-calculator-section .f21-price { max-width: 780px; margin: 0; }
.f21-price .calculator.f21-stepper { grid-template-columns: minmax(0,1fr); }
.f21-price [hidden] { display: none !important; }
.f21-calc-heading {
  position: relative;
  grid-column: 1 / -1;
  padding: 16px clamp(14px,3vw,30px);
  background: #f6f7f3;
  border-bottom: 1px solid #c4c9c5;
}
.f21-calc-heading .eyebrow { margin: 0 0 6px; color: #a91623; font: 700 11px/1.25 var(--mono); letter-spacing: .12em; }
.f21-price .f21-calc-heading h2 { margin: 0; }
.f21-progress { position: absolute; right: clamp(14px,3vw,30px); top: 16px; margin: 0; color: #535a57; font-size: 12px; }
.f21-stepper .calc-fields, .f21-stepper .calc-result { padding: 14px clamp(14px,3vw,30px); }
.f21-stepper .size-note { margin: 7px 0 0; }
.f21-stepper .choice-group { margin: 0; }
.f21-choice-summary { margin-bottom: 8px; color: #e5e8e3; font-size: 13px; }
.f21-calc-controls {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 9px clamp(14px,3vw,30px) 12px;
  background: #f6f7f3;
  border-top: 1px solid #c4c9c5;
}
.f21-calc-controls button {
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid #191e1e;
  background: transparent;
  color: #191e1e;
  font: 700 14px/1.2 var(--sans);
  cursor: pointer;
}
.f21-calc-controls [data-calc-next] { margin-left: auto; background: #191e1e; color: #fff; }
.f21-calc-controls button:focus-visible { outline: 2px solid #a91623; outline-offset: 3px; }
.gadky-branches .gb-message { display: inline-block; margin-top: 9px; padding-block: 6px; color: #f4f5f4; font-size: 13px; text-decoration: underline; }
@media (max-width: 980px) {
  body.f21-wheels.overview-theme .hero--overview .actions .btn--secondary.f21-select-service { display: inline-flex !important; }
  body.f21-wheels.overview-theme .hero--overview .actions a.btn--call-mobile { display: none !important; }
  body.f21-wheels #services + .f21-calculator-section { padding-top: 0; }
  body.f21-wheels #services .diagnostic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .f21-wheels #services .diagnostic-grid article a { padding: 10px 22px 10px 10px; }
  .f21-wheels #services .diagnostic-grid article a > b { right: 8px; top: 10px; }

  /* The document already reserves the sticky header in scroll-padding. */
  body.f21-wheels :is(#services, #wheels-calc) { scroll-margin-top: 8px; }
  .f21-wheels #services.f21-services-ready .diagnostic-grid { display: none; }
  .f21-wheels #services .service-switcher--hero { padding: 0; background: transparent; }
  .f21-wheels #services .service-switcher--hero::before { content: none; }
  .f21-wheels #services .service-switcher--hero a { min-height: 64px; }

  .f21-wheels .calc-result .eyebrow { margin: 0 0 6px; font-size: 12px; }
  .f21-wheels .calc-result [aria-live] p { margin: 0; padding: 10px 0; }
  .f21-wheels .calc-result .calc-note { margin: 10px 0 14px; font-size: 13px; line-height: 1.35; }
  .f21-wheels .f21-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f21-wheels .f21-slots a { min-height: 48px; padding: 8px 5px; text-align: center; font-size: 14px; line-height: 1.2; }
  .f21-wheels .f21-slot-separator { display: none; }
  .f21-wheels .f21-slot-action { display: block; margin-top: 4px; font-size: 11px; font-weight: 500; }
  .f21-wheels .f21-price .f21-pdf { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; }
}
