/* Kia Forest Green theme: the accent system is shared across every section. */
:root {
  --electric:#647c37;
  --electric-deep:#4f642b;
  --electric-bright:#8eaa50;
  --electric-glow:rgba(100,124,55,.28);
  --forest-soft:rgba(100,124,55,.14);
  --forest-line:rgba(100,124,55,.34);
  --proof-size:clamp(42px,5.2vw,78px);
  --proof-size-small:clamp(34px,4.2vw,60px);
}

/* Mobile safety cards: match the compact card rhythm used by the rest of the site. */
@media (max-width:560px) {
  .gallery-security .safety-tip-grid > .tip-card {
    flex-basis:calc((100% - 18px) / 2.35);
    min-height:250px;
    height:250px;
  }
  .safety-section .safety-card-front h3 { font-size:18px; }
  .safety-section .safety-card-front p,
  .safety-section .safety-card-front p b { font-size:10px; }
}

/* Shared accent roles */
.kia-proof,
.section-heading h2 em,
.range-intro h2 em,
.charging-copy h2 em,
.support-content h2 em { color:var(--electric) !important; }
.section-heading h2 .kia-proof,
.charging-copy h2 .kia-proof,
.range-intro h2 .kia-proof,
.support-content h2 .kia-proof,
.safety-head h2 .kia-proof { display:inline-block; font-size:var(--proof-size); line-height:.9; letter-spacing:-.055em; }
.safety-subsection-heading h3 .kia-proof { display:inline-block; font-size:var(--proof-size-small); line-height:.9; letter-spacing:-.055em; }
.hero .kia-proof { color:var(--electric-bright) !important; text-shadow:0 2px 7px rgba(0,0,0,.88),0 0 20px color-mix(in srgb,var(--electric) 42%,transparent) !important; }
.hero .hero-lede { color:#fff !important; }
.charging-copy h2 em { color:inherit !important; }
.charging-copy h2 em .kia-proof { color:var(--electric) !important; }
.journey-item::after { background:var(--electric); }
.journey-item:hover,.journey-item.is-active { color:var(--electric-deep); }
.button-light:hover,.button-light:focus-visible { background:var(--electric); color:var(--dark); }
.button-dark:hover,.button-dark:focus-visible { box-shadow:0 0 0 3px var(--electric-glow); }
.section-cta .button { box-shadow:0 12px 28px rgba(7,16,22,.15),0 0 0 1px var(--forest-line); }
.section-cta .button:hover,.section-cta .button:focus-visible { box-shadow:0 16px 32px rgba(7,16,22,.2),0 0 0 3px var(--electric-glow); }
.status-dot { border-color:var(--electric); box-shadow:0 0 0 3px var(--forest-soft),0 0 16px var(--electric-glow); }

/* Portfolio */
.portfolio-section { border-top-color:var(--forest-soft); }
.portfolio-section .section-heading > p { border-left-color:var(--electric) !important; }
.portfolio-section::before { background:repeating-radial-gradient(ellipse at 50% 118%,transparent 0 11%,color-mix(in srgb,var(--electric) 8%,transparent) 11.15% 11.3%,transparent 11.55% 16%),linear-gradient(108deg,transparent 18%,color-mix(in srgb,var(--electric) 5.5%,transparent) 18.2%,transparent 18.45% 64%,color-mix(in srgb,var(--electric) 4.5%,transparent) 64.2%,transparent 64.5%); }
.portfolio-highlight-icon,.portfolio-highlight.is-active .portfolio-highlight-icon { color:var(--electric-deep); }
.portfolio-highlight { border-color:var(--forest-soft); }
.portfolio-progress-button.is-active span { background:var(--electric); box-shadow:0 0 10px var(--electric-glow); }
.portfolio-section .vehicle-card:hover { border-color:var(--forest-line); }
.portfolio-section .vehicle-meta b i { color:var(--electric); }
.portfolio-section .section-cta .button { border-color:var(--electric); box-shadow:0 12px 28px rgba(7,16,22,.22),0 0 18px var(--forest-soft); }
.portfolio-section .section-cta .button::after { color:var(--electric); }
.portfolio-section .vehicle-grid { scrollbar-color:color-mix(in srgb,var(--electric) 65%,transparent) transparent; }

/* Charging */
.charging-section { background:radial-gradient(circle at 18% 48%,color-mix(in srgb,var(--electric) 15%,transparent),transparent 34%),linear-gradient(135deg,color-mix(in srgb,var(--electric-deep) 22%,#04101a) 0%,var(--dark) 58%,color-mix(in srgb,var(--electric) 14%,#081d28) 100%); }
.charging-section::before { border-color:var(--forest-soft); }
.charging-section::after { background:repeating-radial-gradient(ellipse at 50% 100%,transparent 0 9%,color-mix(in srgb,var(--electric) 10%,transparent) 9.15% 9.35%,transparent 9.6% 14%),linear-gradient(0deg,color-mix(in srgb,var(--electric) 13%,transparent),transparent 64%); }
.charging-kicker::after { background:linear-gradient(90deg,var(--electric-bright),transparent); }
.charging-kicker .status-dot { background:var(--electric-bright); box-shadow:0 0 0 4px var(--forest-soft),0 0 16px var(--electric-glow); }
.charging-visual::before { background:repeating-radial-gradient(ellipse at 49% 49%,transparent 0 8%,color-mix(in srgb,var(--electric) 10%,transparent) 8.15% 8.35%,transparent 8.7% 13%); }
.charging-visual::after { background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--electric) 20%,transparent)),repeating-linear-gradient(90deg,color-mix(in srgb,var(--electric) 15%,transparent) 0 1px,transparent 1px 54px); }
.charging-map-image { filter:brightness(1.12) contrast(1.12) drop-shadow(0 0 26px color-mix(in srgb,var(--electric) 22%,transparent)); }
.charging-label { border-color:var(--forest-line); }
.charging-network-badge { border-color:var(--forest-line); box-shadow:0 12px 30px rgba(0,0,0,.2),0 0 20px var(--forest-soft); }
.network-pulse { border-color:var(--electric-bright); box-shadow:0 0 0 4px var(--forest-soft),0 0 18px var(--electric-glow); }
.charging-network-badge b { color:var(--electric-bright); }
.charging-copy .charge-stat-item { border-color:var(--forest-line); box-shadow:inset 3px 0 0 var(--electric),0 0 22px var(--forest-soft); }
.charging-copy .charge-stat-item strong { color:var(--electric-bright); }
.charging-copy .charge-stat-icon { filter:drop-shadow(0 0 9px var(--electric-glow)); }
.charging-copy .button-light { box-shadow:0 12px 30px var(--forest-soft); }

/* Autonomy */
.range-section { border-top-color:var(--forest-soft); }
.range-section::before { background:repeating-radial-gradient(ellipse at 75% 110%,transparent 0 7%,color-mix(in srgb,var(--electric) 9%,transparent) 7.1% 7.25%,transparent 7.5% 11%),linear-gradient(135deg,transparent 0 57%,color-mix(in srgb,var(--electric) 6%,transparent) 57.2% 57.35%,transparent 57.6% 100%); }
.range-section::after { background:repeating-radial-gradient(ellipse at 72% 100%,transparent 0 8%,color-mix(in srgb,var(--electric) 16%,transparent) 8.1% 8.25%,transparent 8.55% 12%),linear-gradient(0deg,color-mix(in srgb,var(--electric-bright) 12%,transparent),transparent 70%); }
.range-section .range-intro > div::before { background:var(--electric); box-shadow:0 0 14px var(--electric-glow); }
.range-section .range-intro > p { border-left-color:var(--electric); }
.range-detail-card:hover { border-color:var(--forest-line); }
.range-detail-copy::after { border-color:var(--forest-line); box-shadow:0 0 0 15px var(--forest-soft),0 0 0 31px color-mix(in srgb,var(--electric) 7%,transparent); }
.range-detail-copy h3::after { background:var(--electric); box-shadow:0 0 10px var(--electric-glow); }
.range-blog-kicker { color:var(--electric); }
.range-blog-link { border-color:var(--electric); }
.range-blog-link span { color:var(--electric); }
.range-blog-link:hover,.range-blog-link:focus-visible { background:var(--electric); box-shadow:0 0 20px var(--electric-glow); }
.range-section .range-carousel { border-color:var(--forest-line); }

/* Support */
.support-kicker,.safety-kicker,.safety-subsection-heading > span { color:var(--electric-deep); }
.support-kicker svg { color:var(--electric); }
.support-content .button-light:hover,.support-content .button-light:focus-visible { background:var(--electric); color:var(--dark); }
.support-proof-rail { border-color:var(--forest-line); }
.support-proof-icon { color:var(--electric-deep); }
.support-content::before { border-color:var(--electric) !important; }

/* Safety and technology cards */
.safety-section { border-top-color:var(--forest-soft); }
.safety-kicker { color:var(--electric-deep); }
.safety-kicker i { background:linear-gradient(90deg,var(--electric),color-mix(in srgb,var(--electric) 12%,transparent)); }
.safety-kicker i::before,.safety-kicker i::after { background:var(--electric-bright); }
.safety-head>p { border-left-color:var(--electric); }
.safety-swipe { color:var(--electric-deep); }
.safety-card-front { background:radial-gradient(circle at 76% 24%,color-mix(in srgb,var(--electric) 20%,transparent) 0 1px,transparent 2px 100px),linear-gradient(145deg,#fff 0%,color-mix(in srgb,var(--electric) 7%,#fff) 100%); }
.safety-card-front::after { border-color:var(--forest-line); box-shadow:0 0 0 18px var(--forest-soft),0 0 0 38px color-mix(in srgb,var(--electric) 7%,transparent); }
.safety-card-front .adas-icon,.safety-card-front .tip-icon { border-color:var(--forest-line); background:radial-gradient(circle,#fff 35%,color-mix(in srgb,var(--electric) 8%,#fff) 36%,#fff 68%); }
.safety-card-front .adas-icon::before,.safety-card-front .tip-icon::before { border-color:color-mix(in srgb,var(--electric) 40%,transparent); }
.safety-view-button:hover,.safety-view-button:focus-visible,.safety-back-button:hover,.safety-back-button:focus-visible { border-color:var(--electric); }
.safety-track-progress-button.is-active span,.safety-track-progress-button:hover span,.safety-track-progress-button:focus-visible span { background:var(--electric); box-shadow:0 0 12px var(--electric-glow); }
.safety-track-progress-button:focus-visible { outline-color:var(--electric); }
.safety-track-button:hover,.safety-track-button:focus-visible { background:var(--electric); }

/* Desktop support composition: keep the technician in the visible side of the frame. */
@media (min-width:901px) {
  .support-image {
    right:0;
    left:20px;
    background-position:right center;
    background-size:cover;
  }
  .support-image video { object-fit:cover; object-position:right center; }
  .support-overlay {
    background:linear-gradient(90deg,rgba(247,249,248,.78) 0%,rgba(247,249,248,.58) 28%,rgba(247,249,248,.28) 56%,rgba(247,249,248,.06) 100%),linear-gradient(0deg,rgba(247,249,248,.2),transparent 64%);
  }
}

/* Shared card system: the three feature rails use one height and one type scale. */
.gallery-security .adas-card,
.gallery-security .safety-tip-grid > .tip-card,
.gallery-amenities .tips-grid > .tip-card {
  height:390px;
  min-height:390px;
}
.gallery-security .adas-card h3,
.gallery-amenities .tip-card h3 {
  font-family:"Kia Signature",Arial,sans-serif;
  font-size:21px;
  font-weight:700;
  line-height:.98;
  letter-spacing:-.045em;
}
.gallery-security .adas-card p,
.gallery-amenities .tip-card p {
  font-family:"Kia Signature",Arial,sans-serif;
  font-size:12px;
  line-height:1.5;
}

/* Mobile support rail */
@media (max-width:560px) {
  :root { --proof-size:clamp(36px,12.5vw,52px); --proof-size-small:clamp(32px,10.5vw,44px); }
  .hero-content { padding-top:58px; }
  .hero .hero-copy { margin-top:-10px; }
  .hero-primary-title { font-size:clamp(44px,12.5vw,64px); line-height:.88; }
  .hero .hero-secondary-title { text-shadow:0 2px 7px rgba(0,0,0,.85),0 1px 2px rgba(0,0,0,.95); }
  .hero .hero-secondary-title .kia-proof { font-weight:700; }
  .hero .button { min-width:0; min-height:42px; padding:0 12px 0 14px; gap:14px; font-size:10px; }
  .hero .button span { font-size:15px; }
  .support-proof-rail { border-color:var(--forest-line); box-shadow:0 14px 30px rgba(7,16,22,.08),0 0 0 5px var(--forest-soft); }
  .support-proof-icon { border-color:var(--forest-line); color:var(--electric-deep); background:color-mix(in srgb,var(--electric) 8%,#fff); }
}

/* Mobile autonomy carousel: reveal the next blog and make horizontal discovery explicit. */
@media (max-width:560px) {
  .range-details {
    gap:12px;
    padding-right:12px;
    scroll-padding-inline:1px;
    scroll-behavior:smooth;
    touch-action:pan-x pan-y;
    cursor:grab;
  }
  .range-details:active { cursor:grabbing; }
  .range-detail-card {
    flex-basis:min(76vw,320px);
    scroll-snap-stop:always;
  }
}

/* Keep all three mobile card rails compact and visually consistent. */
@media (max-width:560px) {
  .gallery-security .adas-card,
  .gallery-security .safety-tip-grid > .tip-card,
  .gallery-amenities .tips-grid > .tip-card {
    height:250px;
    min-height:250px;
  }
  .gallery-security .adas-card h3,
  .gallery-amenities .tip-card h3 {
    font-size:18px;
    line-height:.98;
  }
  .gallery-security .adas-card p,
  .gallery-amenities .tip-card p {
    font-size:10px;
    line-height:1.35;
  }
}

/* Kia palette accents: use the supplied Kia color system by story. */
:root {
  --kia-live-red:#ee0038;
  --kia-live-red-deep:#b9002d;
  --kia-live-red-bright:#ff4a70;
  --kia-live-red-glow:rgba(238,0,56,.28);
  --kia-live-red-soft:rgba(238,0,56,.13);
  --kia-live-red-line:rgba(238,0,56,.42);
  --kia-afternoon-yellow:#f2c500;
  --kia-afternoon-yellow-deep:#9b7900;
  --kia-afternoon-yellow-bright:#ffda46;
  --kia-afternoon-yellow-glow:rgba(242,197,0,.28);
  --kia-afternoon-yellow-soft:rgba(242,197,0,.14);
  --kia-afternoon-yellow-line:rgba(242,197,0,.42);
  --kia-city-gray:#a5a9ab;
  --kia-city-gray-deep:#657075;
  --kia-city-gray-bright:#d5d8da;
  --kia-city-gray-glow:rgba(165,169,171,.3);
  --kia-city-gray-soft:rgba(165,169,171,.16);
  --kia-city-gray-line:rgba(165,169,171,.48);
}

.hero,
.portfolio-section,
.charging-section,
.range-section,
.support-section,
.safety-section,
.gallery-amenities {
  --section-accent:var(--electric);
  --section-accent-deep:var(--electric-deep);
  --section-accent-bright:var(--electric-bright);
  --section-accent-glow:var(--electric-glow);
  --section-accent-soft:var(--forest-soft);
  --section-accent-line:var(--forest-line);
}

.hero,
.safety-section {
  --section-accent:var(--kia-live-red);
  --section-accent-deep:var(--kia-live-red-deep);
  --section-accent-bright:var(--kia-live-red-bright);
  --section-accent-glow:var(--kia-live-red-glow);
  --section-accent-soft:var(--kia-live-red-soft);
  --section-accent-line:var(--kia-live-red-line);
}

.portfolio-section,
.gallery-amenities {
  --section-accent:var(--kia-afternoon-yellow);
  --section-accent-deep:var(--kia-afternoon-yellow-deep);
  --section-accent-bright:var(--kia-afternoon-yellow-bright);
  --section-accent-glow:var(--kia-afternoon-yellow-glow);
  --section-accent-soft:var(--kia-afternoon-yellow-soft);
  --section-accent-line:var(--kia-afternoon-yellow-line);
}

.range-section {
  --section-accent:var(--kia-city-gray);
  --section-accent-deep:var(--kia-city-gray-deep);
  --section-accent-bright:var(--kia-city-gray-bright);
  --section-accent-glow:var(--kia-city-gray-glow);
  --section-accent-soft:var(--kia-city-gray-soft);
  --section-accent-line:var(--kia-city-gray-line);
}

.hero .hero-secondary-title .kia-proof,
.portfolio-section .kia-proof,
.charging-section .kia-proof,
.range-section .kia-proof,
.support-section .kia-proof,
.safety-section .kia-proof,
.gallery-amenities .kia-proof {
  color:var(--section-accent) !important;
  text-shadow:0 1px 0 rgba(0,0,0,.08),0 0 18px var(--section-accent-glow) !important;
}

.hero .hero-secondary-title .kia-proof {
  text-shadow:0 2px 7px rgba(0,0,0,.88),0 0 20px var(--section-accent-glow) !important;
}

.portfolio-section .section-heading > p,
.range-section .range-intro > p,
.safety-section .safety-head > p,
.gallery-amenities .safety-subsection-heading > p {
  border-left-color:var(--section-accent) !important;
}

.portfolio-section .portfolio-highlight-icon,
.portfolio-section .vehicle-meta b i,
.portfolio-section .section-cta .button::after,
.portfolio-section .section-cta .button,
.portfolio-section .portfolio-progress i.is-active,
.charging-section .charging-kicker::after,
.charging-section .charging-kicker .status-dot,
.charging-section .charging-network-badge b,
.charging-section .charge-stat-copy strong,
.range-section .section-kicker,
.range-section .range-detail-copy .card-index,
.range-section .range-detail-copy h3::after,
.range-section .range-detail-link,
.support-section .support-kicker,
.support-section .support-proof-icon,
.safety-section .safety-kicker,
.safety-section .safety-swipe,
.safety-section .safety-progress-button.is-active span,
.gallery-amenities .safety-subsection-heading > span,
.gallery-amenities .tip-card .watch-link {
  color:var(--section-accent-deep) !important;
}

.portfolio-section .portfolio-highlight-icon,
.portfolio-section .section-cta .button,
.portfolio-section .portfolio-progress i.is-active,
.charging-section .charging-kicker::after,
.charging-section .charging-kicker .status-dot,
.charging-section .charge-stat-item,
.range-section .range-detail-link,
.range-section .range-detail-copy h3::after,
.support-section .support-kicker svg,
.support-section .support-proof-icon,
.safety-section .safety-progress-button.is-active span,
.gallery-amenities .tip-card .watch-link {
  border-color:var(--section-accent) !important;
}

.portfolio-section .portfolio-progress i.is-active,
.charging-section .charging-kicker::after,
.charging-section .charging-kicker .status-dot,
.safety-section .safety-progress-button.is-active span {
  background-color:var(--section-accent) !important;
  box-shadow:0 0 16px var(--section-accent-glow);
}

.portfolio-section .vehicle-card:hover {
  border-color:var(--section-accent-line) !important;
  box-shadow:0 14px 30px rgba(7,16,22,.1),0 0 22px var(--section-accent-soft);
}

.portfolio-section .section-cta .button {
  box-shadow:0 12px 28px rgba(7,16,22,.22),0 0 18px var(--section-accent-soft);
}

.charging-section .charging-visual::before {
  border-color:var(--section-accent-soft) !important;
}

.charging-section .charging-map-image {
  filter:brightness(1.12) contrast(1.12) drop-shadow(0 0 26px var(--section-accent-glow));
}

.charging-section .charge-stat-item {
  border-left-color:var(--section-accent) !important;
  box-shadow:inset 3px 0 0 var(--section-accent),0 0 20px var(--section-accent-soft);
}

.range-section .range-detail-card,
.gallery-amenities .tip-card {
  border-color:var(--section-accent-line) !important;
}

.range-section .range-detail-copy .card-index,
.gallery-amenities .tip-card .card-index {
  color:var(--section-accent-deep) !important;
}

.support-section .support-kicker svg {
  color:var(--section-accent) !important;
  filter:drop-shadow(0 0 8px var(--section-accent-glow));
}

.support-section .support-proof-rail {
  border-color:var(--section-accent-line) !important;
  box-shadow:0 18px 38px rgba(7,16,22,.12),0 0 0 5px var(--section-accent-soft) !important;
}

.support-section .support-proof-icon {
  border-color:var(--section-accent-line) !important;
  background:color-mix(in srgb,var(--section-accent) 12%,white) !important;
}

.safety-section .safety-kicker i,
.gallery-amenities .safety-subsection-heading::before {
  background:var(--section-accent) !important;
  box-shadow:0 0 15px var(--section-accent-glow);
}

.safety-section .safety-progress-button.is-active span,
.gallery-amenities .tips-progress i.is-active {
  background:var(--section-accent) !important;
  box-shadow:0 0 15px var(--section-accent-glow);
}

/* Standalone color links: ?color=verde|rojo|amarillo|gris applies one palette to the full page. */
html[data-kia-palette="verde"] {
  --electric:#647c37;
  --electric-deep:#4f642b;
  --electric-bright:#8eaa50;
  --electric-glow:rgba(100,124,55,.28);
  --forest-soft:rgba(100,124,55,.14);
  --forest-line:rgba(100,124,55,.34);
}

html[data-kia-palette="rojo"] {
  --electric:var(--kia-live-red);
  --electric-deep:var(--kia-live-red-deep);
  --electric-bright:var(--kia-live-red-bright);
  --electric-glow:var(--kia-live-red-glow);
  --forest-soft:var(--kia-live-red-soft);
  --forest-line:var(--kia-live-red-line);
}

html[data-kia-palette="amarillo"] {
  --electric:var(--kia-afternoon-yellow);
  --electric-deep:var(--kia-afternoon-yellow-deep);
  --electric-bright:var(--kia-afternoon-yellow-bright);
  --electric-glow:var(--kia-afternoon-yellow-glow);
  --forest-soft:var(--kia-afternoon-yellow-soft);
  --forest-line:var(--kia-afternoon-yellow-line);
}

html[data-kia-palette="gris"] {
  --electric:var(--kia-city-gray);
  --electric-deep:var(--kia-city-gray-deep);
  --electric-bright:var(--kia-city-gray-bright);
  --electric-glow:var(--kia-city-gray-glow);
  --forest-soft:var(--kia-city-gray-soft);
  --forest-line:var(--kia-city-gray-line);
}

/* Official Kia brand palette option. */
html[data-kia-palette="kia"] {
  --kia-midnight:#05141f;
  --ink:#05141f;
  --ink-soft:#6d6e71;
  --paper:#fff;
  --white:#fff;
  --mist:#c7c8ca;
  --line:rgba(5,20,31,.16);
  --muted:#6d6e71;
  --dark:#05141f;
  --dark-soft:#0b202b;
  --electric:#05141f;
  --electric-deep:#05141f;
  --electric-bright:#05141f;
  --electric-glow:rgba(5,20,31,.22);
  --forest-soft:rgba(5,20,31,.12);
  --forest-line:rgba(5,20,31,.3);
}

html[data-kia-palette="verde"] :is(.hero,.portfolio-section,.charging-section,.range-section,.support-section,.safety-section,.gallery-amenities),
html[data-kia-palette="rojo"] :is(.hero,.portfolio-section,.charging-section,.range-section,.support-section,.safety-section,.gallery-amenities),
html[data-kia-palette="amarillo"] :is(.hero,.portfolio-section,.charging-section,.range-section,.support-section,.safety-section,.gallery-amenities),
html[data-kia-palette="gris"] :is(.hero,.portfolio-section,.charging-section,.range-section,.support-section,.safety-section,.gallery-amenities),
html[data-kia-palette="kia"] :is(.hero,.portfolio-section,.charging-section,.range-section,.support-section,.safety-section,.gallery-amenities) {
  --section-accent:var(--electric);
  --section-accent-deep:var(--electric-deep);
  --section-accent-bright:var(--electric-bright);
  --section-accent-glow:var(--electric-glow);
  --section-accent-soft:var(--forest-soft);
  --section-accent-line:var(--forest-line);
}

/* Recolor the raster charging icons too; otherwise their original green pixels bypass the palette. */
html[data-kia-palette="verde"] .charging-copy .charge-stat-icon {
  filter:drop-shadow(0 0 9px var(--electric-glow)) !important;
}

html[data-kia-palette="rojo"] .charging-copy .charge-stat-icon {
  filter:brightness(0) saturate(100%) invert(11%) sepia(99%) saturate(7381%) hue-rotate(345deg) brightness(98%) contrast(113%) drop-shadow(0 0 9px var(--electric-glow)) !important;
}

html[data-kia-palette="amarillo"] .charging-copy .charge-stat-icon {
  filter:brightness(0) saturate(100%) invert(75%) sepia(99%) saturate(1166%) hue-rotate(3deg) brightness(101%) contrast(100%) drop-shadow(0 0 9px var(--electric-glow)) !important;
}

html[data-kia-palette="gris"] .charging-copy .charge-stat-icon {
  filter:brightness(0) saturate(100%) invert(72%) sepia(5%) saturate(89%) hue-rotate(166deg) brightness(90%) contrast(85%) drop-shadow(0 0 9px var(--electric-glow)) !important;
}

html[data-kia-palette="kia"] .charging-copy .charge-stat-icon {
  filter:brightness(0) saturate(100%) invert(100%) drop-shadow(0 0 9px rgba(255,255,255,.18)) !important;
}

html[data-kia-palette="kia"] .charging-section {
  --electric:#fff;
  --electric-deep:#fff;
  --electric-bright:#fff;
  --electric-glow:rgba(255,255,255,.22);
  --forest-soft:rgba(255,255,255,.12);
  --forest-line:rgba(255,255,255,.38);
}

/* In the official option, Live Red is reserved exclusively for each “Kia lo tiene” proof. */
html[data-kia-palette="kia"] .kia-proof {
  color:var(--kia-live-red) !important;
  text-shadow:0 1px 0 rgba(0,0,0,.08),0 0 18px var(--kia-live-red-glow) !important;
}
html[data-kia-palette="kia"] .charging-copy h2 em .kia-proof {
  color:var(--kia-live-red) !important;
  text-shadow:0 1px 0 rgba(0,0,0,.08),0 0 18px var(--kia-live-red-glow) !important;
}
html[data-kia-palette="kia"] .hero .hero-secondary-title .kia-proof {
  color:var(--kia-live-red) !important;
  text-shadow:0 2px 7px rgba(0,0,0,.88),0 0 20px var(--kia-live-red-glow) !important;
}

/* Keep the official option free of legacy cyan/green accents in secondary controls. */
html[data-kia-palette="kia"] .portfolio-section .vehicle-grid::-webkit-scrollbar-thumb,
html[data-kia-palette="kia"] .portfolio-section .vehicle-grid {
  scrollbar-color:var(--electric) transparent;
}
html[data-kia-palette="kia"] .portfolio-section .vehicle-grid::-webkit-scrollbar-thumb {
  background:var(--electric) !important;
}
html[data-kia-palette="kia"] .portfolio-highlight,
html[data-kia-palette="kia"] .charging-label,
html[data-kia-palette="kia"] .charging-network-badge,
html[data-kia-palette="kia"] .support-services-viewport,
html[data-kia-palette="kia"] .support-service-control,
html[data-kia-palette="kia"] .support-service-icon,
html[data-kia-palette="kia"] .support-service-dot span,
html[data-kia-palette="kia"] .safety-track-progress-button.is-active span,
html[data-kia-palette="kia"] .safety-track-progress-button:hover span,
html[data-kia-palette="kia"] .safety-track-progress-button:focus-visible span {
  border-color:var(--electric) !important;
}
html[data-kia-palette="kia"] .support-service-icon,
html[data-kia-palette="kia"] .support-service-dot.is-active span,
html[data-kia-palette="kia"] .safety-track-progress-button.is-active span,
html[data-kia-palette="kia"] .safety-track-progress-button:hover span,
html[data-kia-palette="kia"] .safety-track-progress-button:focus-visible span {
  background:var(--electric) !important;
}
html[data-kia-palette="kia"] :is(.support-services-kicker,.support-services-head em,.support-service-index,.support-services-counter b,.support-kicker,.safety-kicker,.safety-swipe,.safety-subsection-heading > span) {
  color:var(--electric) !important;
}
html[data-kia-palette="kia"] .support-service-icon,
html[data-kia-palette="kia"] .support-service-control:hover,
html[data-kia-palette="kia"] .support-service-control:focus-visible,
html[data-kia-palette="kia"] .safety-track-button:hover,
html[data-kia-palette="kia"] .safety-track-button:focus-visible {
  background:var(--electric) !important;
  color:#fff !important;
}

/* Official option: replace the remaining legacy cyan details with Midnight Black. */
html[data-kia-palette="kia"] .support-services-viewport {
  border-color:rgba(5,20,31,.2) !important;
}
html[data-kia-palette="kia"] .support-service-card::after {
  border-color:rgba(5,20,31,.32) !important;
  box-shadow:0 0 0 15px rgba(5,20,31,.06) !important;
}
html[data-kia-palette="kia"] .support-service-icon {
  border-color:var(--electric) !important;
  color:var(--electric) !important;
  background:rgba(255,255,255,.72) !important;
  box-shadow:0 0 18px rgba(5,20,31,.1) !important;
}
html[data-kia-palette="kia"] .support-service-control {
  border-color:rgba(5,20,31,.26) !important;
  color:var(--electric) !important;
}
html[data-kia-palette="kia"] .support-service-control:hover,
html[data-kia-palette="kia"] .support-service-control:focus-visible {
  border-color:var(--electric) !important;
  background:var(--electric) !important;
  color:#fff !important;
}
html[data-kia-palette="kia"] .support-service-dot span {
  border-color:var(--electric) !important;
}
html[data-kia-palette="kia"] .support-service-dot.is-active span {
  background:var(--electric) !important;
}
html[data-kia-palette="kia"] :is(.support-services-kicker,.support-services-head em,.support-service-index,.support-services-counter b) {
  color:var(--electric) !important;
}
html[data-kia-palette="kia"] .safety-kicker i,
html[data-kia-palette="kia"] .safety-kicker i::before,
html[data-kia-palette="kia"] .safety-kicker i::after {
  background:var(--electric) !important;
}

/* Official Kia option: the card system uses Midnight Black for every neutral
   ornament and control. Live Red remains reserved for .kia-proof only. */
html[data-kia-palette="kia"] .gallery-security .adas-card,
html[data-kia-palette="kia"] .gallery-security .tip-card,
html[data-kia-palette="kia"] .gallery-amenities .tip-card {
  border-color:#05141f !important;
  background:#fff !important;
  box-shadow:0 12px 28px rgba(5,20,31,.08) !important;
}
html[data-kia-palette="kia"] .gallery-security .adas-card:hover,
html[data-kia-palette="kia"] .gallery-security .tip-card:hover,
html[data-kia-palette="kia"] .gallery-amenities .tip-card:hover {
  border-color:#05141f !important;
  box-shadow:0 18px 34px rgba(5,20,31,.13) !important;
}
html[data-kia-palette="kia"] .safety-card-front {
  background:
    radial-gradient(circle at 76% 24%,rgba(5,20,31,.15) 0 1px,transparent 2px 100px),
    linear-gradient(145deg,#fff 0%,color-mix(in srgb,#05141f 3%,#fff) 100%) !important;
}
html[data-kia-palette="kia"] .safety-card-front::after {
  border-color:rgba(5,20,31,.12) !important;
  box-shadow:0 0 0 18px rgba(5,20,31,.04),0 0 0 38px rgba(5,20,31,.02) !important;
}
html[data-kia-palette="kia"] .safety-card-front .adas-icon,
html[data-kia-palette="kia"] .safety-card-front .tip-icon {
  border-color:#05141f !important;
  background:#fff !important;
}
html[data-kia-palette="kia"] .safety-card-front .adas-icon::before,
html[data-kia-palette="kia"] .safety-card-front .tip-icon::before {
  border-color:#05141f !important;
}
html[data-kia-palette="kia"] .safety-view-button {
  border-color:#05141f !important;
  color:#05141f !important;
  box-shadow:0 7px 14px rgba(5,20,31,.08) !important;
}
html[data-kia-palette="kia"] .safety-view-button:hover,
html[data-kia-palette="kia"] .safety-view-button:focus-visible {
  border-color:#05141f !important;
  background:#05141f !important;
  color:#fff !important;
}
html[data-kia-palette="kia"] .safety-track-progress-button span {
  background:#05141f !important;
}
html[data-kia-palette="kia"] .safety-track-progress-button.is-active span,
html[data-kia-palette="kia"] .safety-track-progress-button:hover span,
html[data-kia-palette="kia"] .safety-track-progress-button:focus-visible span {
  background:#05141f !important;
  box-shadow:0 0 12px rgba(5,20,31,.2) !important;
}
html[data-kia-palette="kia"] .safety-track-progress-button:focus-visible {
  outline-color:#05141f !important;
}

/* The portfolio CTA keeps its dark surface in the official option, so its
   label and arrow must use Polar White for reliable contrast. */
html[data-kia-palette="kia"] .portfolio-section .section-cta .button,
html[data-kia-palette="kia"] .portfolio-section .section-cta .button::after {
  color:#fff !important;
}

/* Official Kia option: use the approved gray pair to make carousel navigation
   distinct without competing with the Live Red proof labels. */
html[data-kia-palette="kia"] .safety-track-progress-button span {
  background:#939598 !important;
}
html[data-kia-palette="kia"] .safety-track-progress-button.is-active span,
html[data-kia-palette="kia"] .safety-track-progress-button:hover span,
html[data-kia-palette="kia"] .safety-track-progress-button:focus-visible span {
  background:#6d6e71 !important;
  box-shadow:0 0 12px rgba(109,110,113,.24) !important;
}

html[data-kia-palette="kia"] .hero .hero-secondary-title .kia-proof {
  font-size:calc(1em + 2px) !important;
  font-weight:700 !important;
}

/* Official Kia option: every proof label uses the same Afternoon Yellow. */
html[data-kia-palette="kia"] .hero .hero-secondary-title .kia-proof,
html[data-kia-palette="kia"] .portfolio-section .kia-proof,
html[data-kia-palette="kia"] .charging-copy h2 em .kia-proof,
html[data-kia-palette="kia"] .range-section #range-title em.kia-proof,
html[data-kia-palette="kia"] .range-section .kia-proof,
html[data-kia-palette="kia"] .support-section .kia-proof,
html[data-kia-palette="kia"] .safety-section .kia-proof,
html[data-kia-palette="kia"] .gallery-amenities .kia-proof {
  color:#f2c500 !important;
  text-shadow:none !important;
}

/* Keep the yellow proof clean on light editorial sections: no dark halo or
   edge around the letters competing with the background linework. */
html[data-kia-palette="kia"] .portfolio-section .kia-proof,
html[data-kia-palette="kia"] .range-section .kia-proof,
html[data-kia-palette="kia"] .support-section .kia-proof,
html[data-kia-palette="kia"] .safety-section .kia-proof,
html[data-kia-palette="kia"] .gallery-amenities .kia-proof {
  text-shadow:none !important;
}

/* Kia official visual rhythm: the Afternoon Yellow proof is the signature,
   while the rest of the interface echoes it with restrained, low-contrast
   details. This keeps the page premium and avoids a full yellow wash. */
html[data-kia-palette="kia"] {
  --kia-proof:#f2c500;
  --kia-proof-soft:rgba(242,197,0,.12);
  --kia-proof-line:rgba(242,197,0,.46);
  --kia-proof-glow:rgba(242,197,0,.18);
}

html[data-kia-palette="kia"] .kia-proof {
  color:var(--kia-proof) !important;
  font-weight:700 !important;
  text-shadow:0 1px 0 rgba(5,20,31,.48),0 3px 9px rgba(5,20,31,.2) !important;
}

/* A quiet signature line makes every proof lockup belong to the same system. */
html[data-kia-palette="kia"] :is(.hero,.portfolio-section,.charging-section,.range-section,.support-section,.safety-section,.gallery-amenities) .kia-proof::after {
  display:block;
  width:clamp(38px,5vw,76px);
  height:3px;
  margin-top:.12em;
  border-radius:999px;
  background:linear-gradient(90deg,var(--kia-proof),rgba(242,197,0,0));
  content:"";
  opacity:.72;
}

/* Repeat the signature only in interaction states and structural guides. */
html[data-kia-palette="kia"] .portfolio-section .portfolio-progress i.is-active,
html[data-kia-palette="kia"] .safety-track-progress-button.is-active span,
html[data-kia-palette="kia"] .gallery-amenities .tips-progress i.is-active {
  background:var(--kia-proof) !important;
  box-shadow:0 0 13px var(--kia-proof-glow) !important;
}

html[data-kia-palette="kia"] .portfolio-section .section-heading > p,
html[data-kia-palette="kia"] .range-section .range-intro > p,
html[data-kia-palette="kia"] .safety-section .safety-head > p,
html[data-kia-palette="kia"] .gallery-amenities .safety-subsection-heading > p {
  border-left-color:var(--kia-proof-line) !important;
}

html[data-kia-palette="kia"] .portfolio-section .vehicle-card:hover,
html[data-kia-palette="kia"] .range-section .range-detail-card:hover,
html[data-kia-palette="kia"] .gallery-amenities .tip-card:hover,
html[data-kia-palette="kia"] .gallery-security .adas-card:hover,
html[data-kia-palette="kia"] .gallery-security .tip-card:hover {
  border-color:var(--kia-proof-line) !important;
  box-shadow:0 16px 34px rgba(5,20,31,.11),0 0 20px var(--kia-proof-soft) !important;
}

html[data-kia-palette="kia"] :is(.portfolio-section,.range-section,.safety-section,.gallery-amenities) .button:focus-visible,
html[data-kia-palette="kia"] :is(.portfolio-section,.range-section,.safety-section,.gallery-amenities) .range-control:focus-visible {
  outline-color:var(--kia-proof) !important;
  box-shadow:0 0 0 3px var(--kia-proof-soft) !important;
}

/* The workshop wheel is high-key and textured, so give the support proof a
   subtle white optical cushion without adding a visible box. */
html[data-kia-palette="kia"] .support-content h2 .kia-proof {
  padding:0;
  margin-left:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  text-shadow:0 1px 0 rgba(5,20,31,.48),0 3px 9px rgba(5,20,31,.2) !important;
}

html[data-kia-palette="kia"] .support-content h2 .kia-proof::after {
  margin-top:.08em;
  opacity:.58;
}

/* Keep the small support description readable over the workshop image while
   preserving the open composition and avoiding a heavy text container. */
html[data-kia-palette="kia"] .support-content > p {
  padding:12px 17px 13px;
  border-left:3px solid var(--kia-proof-line);
  border-radius:0 10px 10px 0;
  background:rgba(255,255,255,.82);
  box-shadow:0 8px 22px rgba(5,20,31,.08);
  backdrop-filter:blur(8px);
}

/* Keep the proof lockup clean: its color is the differentiator, not an
   underline. */
html[data-kia-palette="kia"] :is(.hero,.portfolio-section,.charging-section,.range-section,.support-section,.safety-section,.gallery-amenities) .kia-proof::after {
  display:none;
  content:none;
}