/*
Theme Name: iCharge
Theme URI: https://icharge.sg
Author: iCharge
Author URI: https://iwow.com.sg
Description: Custom block theme for iCharge — Turnkey Smart EV Charging Infrastructure. Built for Full Site Editing with no-code client editing.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: icharge
Tags: full-site-editing, block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, wide-blocks
*/

:root {
  --icharge-transition: 0.3s ease;
  --icharge-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --icharge-shadow-md: 0 4px 24px rgba(0, 0, 0, 0.12);
  --icharge-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.16);
  --icharge-radius-sm: 8px;
  --icharge-radius-md: 12px;
  --icharge-radius-lg: 16px;
}

/* Block style: card */
.is-style-card {
  background: var(--wp--preset--color--white);
  border-radius: var(--icharge-radius-md);
  box-shadow: var(--icharge-shadow-sm);
  padding: var(--wp--preset--spacing--50);
  transition: box-shadow var(--icharge-transition), transform var(--icharge-transition);
  overflow: hidden;
}

.is-style-card:hover {
  box-shadow: var(--icharge-shadow-md);
  transform: translateY(-2px);
}

/* Card with image on top — remove image margin */
.is-style-card > .wp-block-image:first-child,
.is-style-card-bordered > .wp-block-image:first-child {
  margin-bottom: 0;
}

.is-style-card > .wp-block-image:first-child img,
.is-style-card-bordered > .wp-block-image:first-child img {
  width: 100%;
  display: block;
}

/* Block style: card-bordered */
.is-style-card-bordered {
  background: var(--wp--preset--color--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--icharge-radius-md);
  padding: var(--wp--preset--spacing--50);
  overflow: hidden;
}

/* Equal-height cards in a columns row, with buttons pinned to the bottom.
   Scoped to cards that live inside a column AND contain a buttons block,
   so single/standalone cards elsewhere are unaffected.

   Three things have to be true for buttons to align across cards:
   1. The column must stretch to the row's height — make it flex-column itself,
      so the inner card can `flex: 1` instead of relying on `height: 100%`
      (more reliable across browsers).
   2. The middle content group must absorb leftover space (`flex-grow: 1`).
   3. The buttons block needs `margin-top: auto` to win over the inline
      `style="margin-top:1rem"` that the pattern sets — so use !important. */
.wp-block-columns .wp-block-column:has(> .is-style-card-bordered:has(.wp-block-buttons)) {
  display: flex;
  flex-direction: column;
}

.wp-block-columns .wp-block-column > .is-style-card-bordered:has(.wp-block-buttons) {
  flex: 1;
  justify-content: flex-start;
}

.wp-block-columns .wp-block-column > .is-style-card-bordered:has(.wp-block-buttons) > .wp-block-group {
  flex-grow: 1;
}

.wp-block-columns .wp-block-column > .is-style-card-bordered:has(.wp-block-buttons) > .wp-block-buttons {
  margin-top: auto !important;
}

/* Why Choose iCharge cards — uniform image dimensions across the row so card
   header heights match even when source images have different aspect ratios. */
.home-why-choose-cards .wp-block-image {
  margin: 0;
}

.home-why-choose-cards .wp-block-image img {
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.home-why-choose-cards .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-self: stretch;
  width: 100%;
  padding: 1.5rem 1.5rem 0;
  margin-top: auto !important;
}

/* Turnkey "Our Process" 6-step cards — uniform 16:10 thumbnails so the row
   reads consistently even when source images come from different aspects. */
.turnkey-process-grid .wp-block-image,
.smart-infra-benefits-grid .wp-block-image,
.fleet-services-cards .wp-block-image {
  margin: 0;
}

.turnkey-process-grid .wp-block-image img,
.smart-infra-benefits-grid .wp-block-image img,
.fleet-services-cards .wp-block-image img {
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
  width: 100%;
}

/* About iWOW logo card — center the partner logo with breathing room.
   Sized to display at 240px wide with crisp rendering even though the
   source PNG is small. */
.icharge-iwow-logo-card {
  min-height: 320px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: var(--icharge-shadow-sm);
}

.icharge-iwow-logo {
  margin: 0;
}

.icharge-iwow-logo img {
  display: block;
  max-width: 240px;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Equal-height cards (responsive). Each .wp-block-column becomes a vertical
   flex container; the card stretches to fill it; the inner content group
   absorbs leftover space so buttons sit at the bottom regardless of how
   long each card's text is. Works on every breakpoint where the columns
   block sits in a row, and degrades gracefully when stacked on mobile
   (each card just takes its content height). Avoids :has() so it works
   on older Safari/Firefox. */
.home-why-choose-cards {
  align-items: stretch;
}

.home-why-choose-cards .wp-block-column {
  display: flex;
  flex-direction: column;
}

.home-why-choose-cards .is-style-card-bordered {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.home-why-choose-cards .is-style-card-bordered > .wp-block-group {
  flex-grow: 1;
}

/* Block style: dark-section */
.is-style-dark-section {
  background-color: var(--wp--preset--color--dark-navy);
  color: var(--wp--preset--color--white);
}

.is-style-dark-section a {
  color: var(--wp--preset--color--primary-turquoise);
}

.is-style-dark-section h1,
.is-style-dark-section h2,
.is-style-dark-section h3,
.is-style-dark-section h4,
.is-style-dark-section h5,
.is-style-dark-section h6,
.is-style-dark-section p {
  color: var(--wp--preset--color--white);
}

/* Block style: overline heading */
.is-style-overline {
  color: var(--wp--preset--color--primary-blue) !important;
  font-family: var(--wp--preset--font-family--gibson) !important;
  font-size: clamp(18px, 1.5vw, 35px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 1.5rem !important;
}

/* Keep the brand's leading "i" lowercase inside uppercased eyebrows
   (e.g. "iCHARGE PLATFORM", "iFLEET 360"). Wrap the i in <span class="brand-lower-i">. */
.is-style-overline .brand-lower-i,
.icharge-hero-overline .brand-lower-i {
  text-transform: lowercase !important;
}

/* Default below-heading gap (fallback for legal pages / any h2 not
   handled in a pattern). Section patterns set the gap explicitly via
   margin-top: 2.5rem on the item directly under the h2. */
h2.wp-block-heading {
  margin-bottom: 2.5rem;
}

/* Balanced line breaking — avoids orphans/awkward wraps on big headings */
h1,
h2,
h3 {
  text-wrap: pretty;
}

/* Cap heading line length so long titles don't stretch full-width */
h1,
h2 {
  max-width: 1000px;
}

/* Keep centered headings centered within the capped width */
h1.has-text-align-center,
h2.has-text-align-center {
  margin-left: auto;
  margin-right: auto;
}

/* Inline emphasis — semibold (500 = SemiBold face), not the browser-default bold */
strong,
b {
  font-weight: 500;
}

/* Block style: icon-box */
.is-style-icon-box {
  background: var(--wp--preset--color--off-white);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 80px;
  overflow: hidden;
}

.is-style-icon-box img {
  object-fit: contain;
  width: 48px;
  height: 48px;
}

/* Block style: checkmark list */
.is-style-checkmark {
  list-style: none;
  padding-left: 0;
}

.is-style-checkmark li {
  padding-left: 2em;
  position: relative;
  margin-bottom: 0.5em;
}

.is-style-checkmark li::before {
  content: "\2713";
  color: var(--wp--preset--color--accent-green);
  font-weight: 700;
  position: absolute;
  left: 0;
}

/* Unify card-list typography. When a checkmark list lives inside an
   is-style-card (e.g., turnkey "What's Included" cards) or
   is-style-card-bordered (e.g., idle-fees card), the label matches the
   sectors-grid label typography so all card-lists across the theme read
   the same: 1rem, weight 500, dark-text, tight line-height. */
.is-style-card .is-style-checkmark li,
.is-style-card-bordered .is-style-checkmark li {
  font-size: 1rem;
  font-weight: 500;
  color: var(--wp--preset--color--dark-text);
  line-height: 1.3;
}

/* Block style: services-table */
.is-style-services-table table {
  border-collapse: collapse;
  width: 100%;
}

.is-style-services-table thead {
  background: var(--wp--preset--color--primary-blue);
  color: var(--wp--preset--color--white);
}

.is-style-services-table thead th {
  padding: 1rem 1.5rem;
  text-align: left;
  font-weight: 500;
}

.is-style-services-table tbody tr:nth-child(even) {
  background: var(--wp--preset--color--off-white);
}

.is-style-services-table tbody td {
  padding: 0.875rem 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Block style: process-steps connector */
.is-style-process-steps {
  position: relative;
}

.is-style-process-steps > .wp-block-column {
  text-align: center;
  position: relative;
}

.is-style-process-steps > .wp-block-column:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 40px;
  right: -16px;
  width: 32px;
  height: 2px;
  background: var(--wp--preset--color--primary-turquoise);
}

/* Header CTA button — bolder weight to match the rest of the buttons.
   The chained selector with .wp-element-button is needed to outweigh
   theme.json-generated styles. */
.icharge-header .wp-block-buttons .wp-block-button__link.wp-element-button,
.icharge-header-transparent .wp-block-buttons .wp-block-button__link.wp-element-button {
  font-weight: 400;
}

/* iCharge branded elements — iWOW accent green */
.icharge-badge {
  background-color: var(--wp--preset--color--primary-blue);
  color: var(--wp--preset--color--white);
}

.icharge-card-btn .wp-block-button__link.wp-element-button,
.icharge-card-btn .wp-block-button__link {
  font-size: 0.875rem;
}

.icharge-card-btn .wp-block-button__link.wp-element-button {
  background-color: var(--wp--preset--color--primary-blue);
  color: var(--wp--preset--color--white);
}

.icharge-card-btn .wp-block-button__link.wp-element-button:hover {
  background-color: var(--wp--preset--color--dark-teal);
  color: var(--wp--preset--color--white);
}

/* Shared arrow animation for all iCharge button variants.
   Arrow slides forward on hover — "progressional" motion for a forward action. */
.icharge-cta-btn .wp-block-button__link::after,
.icharge-card-btn .wp-block-button__link::after,
.icharge-outline-btn .wp-block-button__link::after {
  content: " \2192";
  transition: transform 0.25s ease;
  display: inline-block;
  margin-left: 0.25em;
}

.icharge-cta-btn .wp-block-button__link:hover::after,
.icharge-card-btn .wp-block-button__link:hover::after,
.icharge-outline-btn .wp-block-button__link:hover::after {
  transform: translateX(4px);
}

.icharge-cta-btn .wp-block-button__link.wp-element-button {
  background-color: var(--wp--preset--color--primary-blue);
  color: var(--wp--preset--color--white);
}

.icharge-cta-btn .wp-block-button__link.wp-element-button:hover {
  background-color: var(--wp--preset--color--dark-teal);
  color: var(--wp--preset--color--white);
}

/* Inverse CTA — used on solid blue sections (e.g., bottom homepage CTA) */
.icharge-cta-btn-inverse .wp-block-button__link.wp-element-button {
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--primary-blue);
}

.icharge-cta-btn-inverse .wp-block-button__link.wp-element-button:hover {
  background-color: var(--wp--preset--color--dark-text);
  color: var(--wp--preset--color--white);
}

.icharge-cta-btn-inverse .wp-block-button__link::after {
  content: " \2192";
  transition: transform 0.25s ease;
  display: inline-block;
}

.icharge-cta-btn-inverse .wp-block-button__link:hover::after {
  transform: translateX(4px);
}

/* Muted note inside the bottom CTA */
.icharge-cta-note {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9375rem;
}

/* Dark CTA — corporate dark-navy panel over a low-opacity infrastructure
   photo backdrop. The backdrop is now a core/cover block (image = media
   library attachment), so the photo and dark-navy overlay come from block
   markup, not CSS. */
.icharge-cta-dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Slight blue rim accent on top edge for brand anchor without going blue-heavy */
.icharge-cta-dark::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  background-color: var(--wp--preset--color--primary-blue);
  border-radius: 0 0 4px 4px;
  z-index: 3;
}

/* FAQ Accordion */
.wp-block-details {
  border-bottom: 1px solid var(--wp--preset--color--light-gray);
  padding: 1.25rem 0;
  transition: background-color 0.2s ease;
}

.wp-block-details[open] {
  border-bottom-color: transparent;
}

.wp-block-details summary {
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--wp--preset--color--dark-text);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0;
  transition: color 0.2s ease;
}

.wp-block-details summary:hover {
  color: var(--wp--preset--color--primary-blue);
}

.wp-block-details summary::-webkit-details-marker {
  display: none;
}

.wp-block-details summary::after {
  content: "+";
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  color: var(--wp--preset--color--primary-blue);
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  border: 2px solid var(--wp--preset--color--primary-blue);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.wp-block-details[open] summary::after {
  content: "\2212";
  background-color: var(--wp--preset--color--primary-blue);
  color: var(--wp--preset--color--white);
}

.wp-block-details summary strong {
  font-weight: 500;
}

/* WPForms — on-brand styling */
.wpforms-container .wpforms-form .wpforms-field-label {
  font-family: var(--wp--preset--font-family--gibson);
  font-weight: 500;
  color: var(--wp--preset--color--dark-text);
  font-size: 0.9375rem;
  margin-bottom: 0.5rem;
}

.wpforms-container .wpforms-form .wpforms-field input,
.wpforms-container .wpforms-form .wpforms-field textarea,
.wpforms-container .wpforms-form .wpforms-field select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.wpforms-container .wpforms-form .wpforms-field-row {
  max-width: 100% !important;
}

.wpforms-container .wpforms-form .wpforms-field-row .wpforms-field-row-block {
  width: 50% !important;
  max-width: none !important;
  box-sizing: border-box;
}

.wpforms-container .wpforms-form input[type="text"],
.wpforms-container .wpforms-form input[type="email"],
.wpforms-container .wpforms-form input[type="tel"],
.wpforms-container .wpforms-form input[type="url"],
.wpforms-container .wpforms-form textarea,
.wpforms-container .wpforms-form select {
  border: 1.5px solid #d7e2ea;
  border-radius: var(--icharge-radius-sm);
  padding: 0.875rem 1rem;
  font-size: 1rem;
  font-family: var(--wp--preset--font-family--gibson);
  color: var(--wp--preset--color--dark-text);
  background: var(--wp--preset--color--white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wpforms-container .wpforms-form input:focus,
.wpforms-container .wpforms-form textarea:focus,
.wpforms-container .wpforms-form select:focus {
  border-color: var(--wp--preset--color--primary-blue);
  box-shadow: 0 0 0 3px rgba(0, 163, 228, 0.15);
  outline: none;
}

.wpforms-container .wpforms-form .wpforms-field {
  margin-bottom: 1rem;
  padding-bottom: 0;
}

.wpforms-container .wpforms-form .wpforms-field-container {
  margin-bottom: 0.5rem;
}

.wpforms-container .wpforms-form .wpforms-submit-container {
  margin-top: 0.5rem;
  padding-top: 0;
}

/* Prevent p+p spacing from affecting form internals */
.wpforms-container p + p {
  margin-top: 0;
}

.wpforms-container .wpforms-form .wpforms-field-sublabel {
  font-size: 0.8125rem;
  color: var(--wp--preset--color--body-text);
}

.wpforms-container .wpforms-form .wpforms-required-label {
  color: var(--wp--preset--color--primary-blue);
}

.wpforms-container .wpforms-form button[type="submit"],
.wpforms-container .wpforms-form .wpforms-submit-container button {
  background-color: var(--wp--preset--color--primary-blue) !important;
  color: var(--wp--preset--color--white) !important;
  border: none !important;
  border-radius: var(--icharge-radius-sm) !important;
  padding: 0.75rem 2rem !important;
  font-size: 1.125rem !important;
  font-weight: 400 !important;
  font-family: var(--wp--preset--font-family--gibson) !important;
  cursor: pointer;
  transition: background-color 0.2s ease;
  width: 100%;
  height: auto !important;
  line-height: 1.5 !important;
  box-sizing: border-box;
}

.wpforms-container .wpforms-form button[type="submit"]:hover,
.wpforms-container .wpforms-form .wpforms-submit-container button:hover {
  background-color: var(--wp--preset--color--dark-teal);
}

/* Contact sidebar */
.icharge-contact-sidebar {
  position: sticky;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + 80px);
}

.icharge-contact-sidebar .wp-block-separator {
  margin: 0.75rem 0;
  opacity: 0.5;
}

.icharge-contact-item {
  gap: 1rem;
}

.icharge-contact-item .has-medium-font-size {
  color: var(--wp--preset--color--dark-text);
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.icharge-contact-item .has-small-font-size {
  color: var(--wp--preset--color--dark-text);
}

.icharge-contact-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wp--preset--color--white);
  border-radius: 50%;
}

.icharge-contact-sidebar a {
  color: var(--wp--preset--color--primary-blue);
  text-decoration: none;
}

.icharge-contact-sidebar a:hover {
  color: var(--wp--preset--color--dark-teal);
}

/* Paragraph spacing — add gap between consecutive paragraphs */
p + p {
  margin-top: 1rem;
}

/* Also add gap after large font paragraph followed by regular paragraph */
.has-large-font-size + p:not(.has-large-font-size) {
  margin-top: 1.25rem;
}

/* Cap paragraph measure for readability; keep centered ones centered
   (a capped centered paragraph would otherwise left-align in a wider section). */
p {
  max-width: 1000px;
}

p.has-text-align-center,
.has-text-align-center > p {
  margin-inline: auto;
}

/* Legal pages — spacing for privacy/terms content */
h2 + p {
  margin-top: 1rem;
}

p + ul,
p + ol {
  margin-top: 0.75rem;
}

ul + p,
ol + p {
  margin-top: 1rem;
}

ul + h2,
ol + h2,
p + h2 {
  margin-top: 2.5rem;
}

ul li,
ol li {
  margin-bottom: 0.375rem;
}

/* ISO certification badge in footer */
.icharge-iso-badge {
  max-width: 180px;
  background: #fff;
  border-radius: 6px;
  padding: 4px 8px;
}

.icharge-iso-badge img {
  display: block;
  width: 100%;
  height: auto;
}

/* Footer styling */
.icharge-footer,
.icharge-footer p,
.icharge-footer ul li,
.icharge-footer a {
  font-size: 0.875rem;
  line-height: 1.6;
}

.icharge-footer a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s ease;
}

.icharge-footer a:hover {
  color: var(--wp--preset--color--primary-blue);
}

.icharge-footer ul {
  list-style: none;
  padding-left: 0;
}

.icharge-footer ul li {
  padding-left: 0;
}

.icharge-footer ul li::marker {
  content: none;
}

.icharge-footer h4 {
  color: var(--wp--preset--color--white);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.icharge-footer .wp-block-separator {
  opacity: 0.15;
}

/* Hero outline button */
.icharge-outline-btn .wp-block-button__link.wp-element-button,
.icharge-outline-btn .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--white);
  border: 2px solid #ffffff;
  border-radius: 8px;
  padding: 0.75rem 2rem;
}

.icharge-outline-btn .wp-block-button__link.wp-element-button:hover,
.icharge-outline-btn .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--wp--preset--color--white);
}

/* ─────────────────────────────────────────────────────────────────
   Editorial hero treatment (homepage)
   Replaces the flat-gray dim with a left dark panel that fades into
   the underlying photo, giving the hero an editorial / corporate
   composition rather than a generic image-with-overlay. The photo
   remains visible on the right side as quiet atmosphere.
   ───────────────────────────────────────────────────────────────── */

.icharge-hero-editorial.wp-block-icharge-hero-slider {
  min-height: 86vh !important;
}

/* The block renders an .icharge-slider-overlay div whose opacity is set
   inline from the dimRatio attribute. We restyle it as a left panel on
   desktop and keep it full-cover on mobile so text always stays legible.
   Specificity is doubled (chained classes) so this beats the block's
   compiled CSS regardless of stylesheet enqueue order. */
.icharge-hero-editorial.wp-block-icharge-hero-slider .icharge-slider-overlay {
  background: var(--wp--preset--color--dark-navy);
}

/* Panel mode kicks in at "real desktop" widths. The width / mask values
   are calibrated so the content stack's right edge always sits inside
   the fully-opaque region of the panel at every viewport breakpoint.
   Below 1024px we fall back to full-cover so text stays legible on
   tablets / phones in landscape. */
@media (min-width: 1024px) {
  .icharge-hero-editorial.wp-block-icharge-hero-slider .icharge-slider-overlay {
    right: auto;
    width: 78%;
    -webkit-mask-image: linear-gradient(to right, black 82%, transparent 100%);
            mask-image: linear-gradient(to right, black 82%, transparent 100%);
  }
}

/* On very wide screens, pull the panel in so more of the underlying
   photograph shows on the right side. */
@media (min-width: 1600px) {
  .icharge-hero-editorial.wp-block-icharge-hero-slider .icharge-slider-overlay {
    width: 60%;
    -webkit-mask-image: linear-gradient(to right, black 78%, transparent 100%);
            mask-image: linear-gradient(to right, black 78%, transparent 100%);
  }
}

/* Content stack — max-width 580 keeps the text within the panel's
   opaque zone on a 1024px viewport, while remaining a comfortable
   reading measure. */
.icharge-hero-editorial .icharge-slider-content {
  max-width: 800px;
  margin-left: clamp(1rem, 4vw, 4rem);
  padding-left: clamp(1.25rem, 2vw, 1.75rem) !important;
}

/* ── Typography refinements for the editorial hero ── */

/* Overline — matches the .is-style-overline eyebrow used elsewhere
   (e.g., "What We Do") for cross-section consistency. */
h6.icharge-hero-overline {
  font-size: clamp(18px, 1.5vw, 27px);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

/* H1 — tighter line-height, slightly bolder weight expression via
   keeping size large but compressing leading. */
.icharge-hero-heading {
  font-size: clamp(32px, 4.21875vw, 67.5px);
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin: 0;
}

/* Non-home h1s render regular — the h1 element default is 400 (theme.json).
   Only the home hero keeps semibold, via .icharge-hero-heading above. */

/* Stats strip — replaces the old "No capex. No opex." tagline with a
   structured value-prop ribbon: NO CAPEX • NO OPEX • 24/7 SUPPORT.
   Each item is a paragraph; primary-blue dots are CSS pseudo-elements. */
.icharge-hero-stats {
  align-items: center;
  gap: 0 !important;
  /* Fine top rule to separate this from the H1 — editorial detail */
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 1.25rem !important;
}

.icharge-hero-stat {
  font-family: var(--wp--preset--font-family--gibson), sans-serif;
  font-size: calc(var(--wp--preset--font-size--small) * 1.764);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0 !important;
  padding-right: 1.5rem;
  position: relative;
  line-height: 1;
}

.icharge-hero-stat:not(:last-child) {
  margin-right: 1.5rem !important;
}

.icharge-hero-stat:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
  width: 5px;
  height: 5px;
  background: var(--wp--preset--color--primary-blue);
  border-radius: 50%;
}

/* Mobile: stack the stats vertically so dots never dangle at the end of
   a wrapped line. Margin-left from the base rule's clamp resolves to
   1rem on small viewports, which is the right safe-area inset. */
@media (max-width: 600px) {
  .icharge-hero-stats {
    flex-direction: column;
    align-items: flex-start;
  }

  .icharge-hero-stat:not(:last-child) {
    margin-right: 0 !important;
    margin-bottom: 0.5rem;
    padding-right: 0;
  }

  .icharge-hero-stat:not(:last-child)::after {
    display: none;
  }
}

.icharge-hero-body {
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88) !important;
  max-width: 520px;
}

/* ── Refined hero button hierarchy ──
   Primary button keeps its solid-blue treatment (defined elsewhere).
   Ghost (secondary) is a quieter outline — thinner border, low-opacity
   white, fills in subtly on hover. Less visual weight than the old
   2px solid white outline so the primary CTA wins the eye. */
.icharge-hero-ghost-btn .wp-block-button__link.wp-element-button,
.icharge-hero-ghost-btn .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--white);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  padding: 0.75rem 2rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.icharge-hero-ghost-btn .wp-block-button__link::after {
  content: " \2192";
  display: inline-block;
  margin-left: 0.4em;
  transition: transform 0.25s ease;
}

.icharge-hero-ghost-btn .wp-block-button__link:hover::after {
  transform: translateX(4px);
}

.icharge-hero-ghost-btn .wp-block-button__link.wp-element-button:hover,
.icharge-hero-ghost-btn .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--wp--preset--color--white);
}

/* Preset body sizes render at their theme.json values (Swift-aligned: Large 18px, Small 16px).
   The old 1.2x bump was removed so Large/Small match Swift's measured paragraph sizes. */

/* Impact stat numbers */
.icharge-stat-number {
  font-size: 4.5rem;
  font-weight: 700;
}

/* What's Included — tight row treatment for included services list */
.wp-block-columns.icharge-services-included {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* Sectors grid — full-width 6×2 tile grid */
.icharge-sectors-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
  width: 100%;
  padding-inline: clamp(1.5rem, 4vw, 4rem);
  box-sizing: border-box;
}

.icharge-sector-tile {
  background: var(--wp--preset--color--white);
  border-radius: 10px;
  padding: 0.7rem 0.55rem;
  box-shadow: var(--icharge-shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.4rem;
  min-height: 100px;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  border: 1px solid transparent;
}

.icharge-sector-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--icharge-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.08));
  border-color: var(--wp--preset--color--primary-blue);
}

.icharge-sector-tile-icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--primary-blue);
}

.icharge-sector-tile-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
}

.icharge-sector-tile-label {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--wp--preset--color--dark-text);
  line-height: 1.3;
}

@media (max-width: 1279px) {
  .icharge-sectors-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 767px) {
  .icharge-sectors-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .icharge-sector-tile {
    padding: 0.55rem 0.5rem;
    min-height: 85px;
  }
  .icharge-sector-tile-icon {
    width: 40px;
    height: 40px;
  }
  .icharge-sector-tile-label {
    font-size: 1rem;
  }
}

/* App platform features — responsive 4 → 2 → 1 column grid */
.icharge-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--preset--spacing--40);
}

/* "For All Your Charging Needs" (app features) — card headings at regular
   weight 400 (overrides the inline fontWeight:500 on each card h3). */
.icharge-feature-grid h3 {
  font-weight: 400 !important;
}

@media (max-width: 1023px) {
  .icharge-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .icharge-feature-grid {
    grid-template-columns: 1fr;
  }
}

.icharge-feature-card {
  height: 100%;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.icharge-feature-card:hover {
  box-shadow: var(--icharge-shadow-md, 0 10px 30px rgba(0, 0, 0, 0.06));
  transform: translateY(-2px);
}

.icharge-feature-icon {
  width: 6.5rem;
  height: 6.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8f4f8;
  border-radius: 10px;
  color: var(--wp--preset--color--primary-blue);
  margin: 0 auto;
}

.icharge-feature-card {
  text-align: center;
}

.icharge-feature-icon svg {
  width: 3.5rem;
  height: 3.5rem;
  stroke: currentColor;
  fill: none;
}

/* Turnkey "We Handle Everything" — six process cards in one row */
.turnkey-steps-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--wp--preset--spacing--40);
}

@media (max-width: 1280px) {
  .turnkey-steps-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 781px) {
  .turnkey-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .turnkey-steps-grid {
    grid-template-columns: 1fr;
  }
}

/* Turnkey "What's Included" — each checklist item is a card */
.icharge-included-grid {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.icharge-included-grid li {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1.05rem 1.2rem;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  line-height: 1.3;
  color: var(--wp--preset--color--dark-text);
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--light-blue-gray);
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.icharge-included-grid li:hover {
  border-color: var(--wp--preset--color--primary-blue);
  box-shadow: 0 12px 28px -14px rgba(0, 120, 170, 0.45);
  transform: translateY(-3px);
}

.icharge-included-check {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.45rem;
  box-sizing: border-box;
  color: var(--wp--preset--color--accent-green);
  background: rgba(101, 188, 123, 0.12);
  border-radius: 50%;
}

@media (max-width: 1024px) {
  .icharge-included-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 781px) {
  .icharge-included-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .icharge-included-grid {
    grid-template-columns: 1fr;
  }
}

/* About Us award cards */
.icharge-award-card {
  text-align: center;
}

.icharge-award-icon {
  width: 4rem;
  height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--primary-blue);
  margin: 0 auto;
}

.icharge-award-icon svg {
  width: 2.5rem;
  height: 2.5rem;
  stroke: currentColor;
  fill: none;
}

/* About — "Making Real-World Impact" awards collage + recognition thumbnails */
.icharge-impact-feature {
  margin: 0;
}

.icharge-impact-feature img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: 0 30px 60px -30px rgba(0, 120, 170, 0.45);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.icharge-impact-feature img:hover {
  transform: translateY(-4px);
  box-shadow: 0 38px 70px -32px rgba(0, 120, 170, 0.55);
}

.icharge-recognition-row {
  gap: 1.5rem;
  align-items: flex-start;
}

/* each award becomes a polished full-bleed photo tile with a hover accent */
.icharge-recognition-img {
  flex: 0 1 300px;
  min-width: 180px;
  max-width: 300px;
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--light-blue-gray);
  border-radius: 14px;
  box-shadow: 0 12px 34px -22px rgba(0, 120, 170, 0.4);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.icharge-recognition-img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2;
  background: var(--wp--preset--color--primary-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s ease;
}

.icharge-recognition-img:hover {
  transform: translateY(-6px);
  border-color: var(--wp--preset--color--primary-blue);
  box-shadow: 0 24px 48px -22px rgba(0, 120, 170, 0.55);
}

.icharge-recognition-img:hover::before {
  transform: scaleX(1);
}

.icharge-recognition-img img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  transition: transform 0.4s ease;
}

.icharge-recognition-img:hover img {
  transform: scale(1.03);
}

/* About — "Some of Our Clients" logo wall */
.icharge-clients-logos {
  margin-left: auto;
  margin-right: auto;
}

.icharge-clients-logos img {
  max-width: 1380px;
  width: 100%;
  height: auto;
  display: block;
}

/* Partner logo row */
.icharge-partners-row {
  gap: 2.5rem !important;
  align-items: center;
}

.icharge-partner-logo img {
  max-height: 56px;
  width: auto;
  opacity: 0.8;
  filter: grayscale(0.2);
  transition: opacity 0.2s ease;
}

.icharge-partner-logo img:hover {
  opacity: 1;
}

/* Smart Infrastructure system architecture diagram */
/* Peak shaving before/after diagram */
.icharge-peakshave {
  max-width: 1000px;
  margin: 0 auto;
}

.icharge-peakshave__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--wp--preset--color--dark-text);
}

.icharge-peakshave__legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.icharge-peakshave__legend i {
  width: 24px;
  height: 0;
  border-top: 3px solid;
  flex: 0 0 auto;
}

.icharge-peakshave__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
}

.icharge-peakshave__panel {
  background: #fff;
  border: 1px solid rgba(0, 163, 228, 0.15);
  border-radius: 14px;
  padding: 1rem 1rem 0.5rem;
  box-shadow: var(--icharge-shadow-sm, 0 4px 16px rgba(0, 0, 0, 0.05));
}

.icharge-peakshave__panel svg {
  display: block;
  width: 100%;
  height: auto;
}

.icharge-peakshave__cap {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--wp--preset--color--body-text);
  margin: 0.5rem 0 0.25rem;
}

.icharge-peakshave__mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.icharge-peakshave__plus {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--wp--preset--color--dark-text);
  line-height: 1;
}

.icharge-peakshave__cms {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  max-width: 150px;
  text-align: center;
}

.icharge-peakshave__cms-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  background: var(--wp--preset--color--primary-blue);
  color: #fff;
  border-radius: 22px;
  box-shadow: 0 18px 34px -10px rgba(0, 120, 170, 0.65);
}

.icharge-peakshave__cms-icon svg {
  width: 58px;
  height: 58px;
  stroke: currentColor;
  fill: none;
}

.icharge-peakshave__cms-label {
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--wp--preset--color--dark-text);
}

.icharge-peakshave__arrow {
  color: var(--wp--preset--color--primary-blue);
  stroke: currentColor;
}

@media (max-width: 860px) {
  .icharge-peakshave__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .icharge-peakshave__arrow {
    transform: rotate(90deg);
  }
}

/* Two-column checkmark list */
.icharge-checkmark-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 2rem;
}

@media (max-width: 600px) {
  .icharge-checkmark-2col {
    grid-template-columns: 1fr;
  }
}

.icharge-smart-diagram {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--wp--preset--color--primary-blue);
}

.icharge-smart-diagram__col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex: 1 1 0;
}

.icharge-smart-diagram__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding: 1.5rem 1rem;
  background: var(--wp--preset--color--off-white);
  border: 1px solid rgba(0, 163, 228, 0.2);
  border-radius: 14px;
  color: var(--wp--preset--color--dark-text);
  font-weight: 400;
  line-height: 1.25;
}

.icharge-smart-diagram__core {
  flex: 1.25 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  padding: 1.75rem 1.5rem;
  background: var(--wp--preset--color--primary-blue);
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 32px -16px rgba(0, 120, 170, 0.6);
}

.icharge-smart-diagram__core strong {
  font-size: 1.15rem;
  line-height: 1.2;
  font-weight: 500;
}

.icharge-smart-diagram__core small {
  font-size: 0.85rem;
  opacity: 0.92;
  line-height: 1.5;
}

.icharge-smart-diagram__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  border-radius: 14px;
  background: rgba(0, 163, 228, 0.12);
  color: var(--wp--preset--color--primary-blue);
}

.icharge-smart-diagram__core .icharge-smart-diagram__icon {
  width: 5rem;
  height: 5rem;
  border-radius: 18px;
}

.icharge-smart-diagram__icon--on-dark {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.icharge-smart-diagram__icon svg {
  stroke: currentColor;
  fill: none;
  width: 2rem;
  height: 2rem;
}

.icharge-smart-diagram__core .icharge-smart-diagram__icon svg {
  width: 2.5rem;
  height: 2.5rem;
}

svg.icharge-smart-diagram__arrow {
  flex: 0 0 auto;
  display: block;
  width: 40px;
  height: 28px;
  stroke: currentColor;
  fill: none;
  color: var(--wp--preset--color--primary-blue);
}

@media (max-width: 782px) {
  .icharge-smart-diagram {
    flex-direction: column;
  }
  .icharge-smart-diagram__col {
    flex-direction: row;
    width: 100%;
  }
  .icharge-smart-diagram__col > * {
    flex: 1 1 0;
  }
  svg.icharge-smart-diagram__arrow {
    transform: rotate(90deg);
  }
}

@media (max-width: 480px) {
  .icharge-smart-diagram__col {
    flex-direction: column;
  }
}

/* Flush image columns — image bleeds to viewport edge */
.icharge-flush-right {
  overflow: visible;
}

.icharge-flush-right .wp-block-columns {
  max-width: none;
}

.icharge-flush-right .wp-block-column:last-child .wp-block-image {
  margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px));
  border-radius: 16px 0 0 16px;
}

.icharge-flush-right .wp-block-column:last-child .wp-block-image img {
  width: 100%;
  border-radius: 16px 0 0 16px;
}

.icharge-flush-left {
  overflow: visible;
}

.icharge-flush-left .wp-block-columns {
  max-width: none;
}

.icharge-flush-left .wp-block-column:first-child .wp-block-image {
  margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px));
  border-radius: 0 16px 16px 0;
}

.icharge-flush-left .wp-block-column:first-child .wp-block-image img {
  width: 100%;
  border-radius: 0 16px 16px 0;
}

/* App screenshot lightbox */
.icharge-app-screens .wp-block-image img {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.icharge-app-screens .wp-block-image img:hover {
  transform: scale(1.05) translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.icharge-lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icharge-lightbox.active {
  display: flex;
}

.icharge-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

.icharge-lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.5rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.icharge-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* App screenshots — staggered layout */
.icharge-app-screens {
  align-items: center;
}

.icharge-app-screens .wp-block-image img {
  border-radius: 12px;
}

.icharge-screen-sm {
  width: 140px;
  flex-shrink: 0;
}

.icharge-screen-lg {
  width: 170px;
  flex-shrink: 0;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.1));
}

/* Platform hero dashboard shot */
.icharge-platform-shot img {
  border-radius: 14px;
  box-shadow: 0 24px 48px -20px rgba(0, 40, 70, 0.35);
}

/* Platform features — 2 rows of 5 */
.icharge-feature-grid--5 {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1200px) {
  .icharge-feature-grid--5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 781px) {
  .icharge-feature-grid--5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .icharge-feature-grid--5 {
    grid-template-columns: 1fr;
  }
}

/* Mobile app — phone screenshots */
.icharge-app-phones {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  align-items: end;
  margin: 0 auto;
  max-width: 900px;
}

.icharge-app-phone {
  margin: 0;
  width: 100%;
  padding: 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 24px;
  box-shadow: 0 18px 40px -18px rgba(0, 40, 70, 0.3);
}

.icharge-app-phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

@media (max-width: 781px) {
  .icharge-app-phones {
    grid-template-columns: repeat(2, 1fr);
    max-width: 440px;
  }
}

/* App store badges */
.icharge-store-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: var(--wp--preset--spacing--50);
}

.icharge-store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.1rem;
  background: #222222;
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.icharge-store-badge:hover {
  background: #000;
  color: #fff;
}

.icharge-store-badge svg {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
}

.icharge-store-badge span {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.icharge-store-badge small {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.icharge-store-badge strong {
  font-size: 1.05rem;
  font-weight: 500;
}

/* iFleet360 ecosystem ring */
.ifleet-ring {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 1;
  margin: 3.5rem auto;
  border-radius: 50%;
  /* soft tinted plate for depth (flat tint, not a gradient) */
  background: rgba(0, 163, 228, 0.04);
  border: 2px solid var(--wp--preset--color--primary-blue);
  box-shadow:
    0 26px 60px -34px rgba(0, 120, 170, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

/* concentric dashed orbit inside the solid ring */
.ifleet-ring::before {
  content: "";
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  border: 1.5px dashed rgba(0, 163, 228, 0.32);
  animation: ifleet-orbit 60s linear infinite;
}

@keyframes ifleet-orbit {
  to { transform: rotate(360deg); }
}

.ifleet-ring__center {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.35rem, 4vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--primary-blue);
}

/* raised white badge behind the wordmark — sized to clear the dashed orbit */
.ifleet-ring__center::before {
  content: "";
  position: absolute;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0, 163, 228, 0.28);
  box-shadow:
    0 16px 36px -16px rgba(0, 120, 170, 0.55),
    0 0 0 8px rgba(255, 255, 255, 0.9);
  z-index: -1;
}

.ifleet-ring__node {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  width: 116px;
  text-align: center;
}

/* linked nodes — clickable, blue icon, interactive on hover/focus */
a.ifleet-ring__node {
  text-decoration: none;
  cursor: pointer;
}

a.ifleet-ring__node .ifleet-ring__label {
  text-decoration: underline;
  text-decoration-color: rgba(0, 163, 228, 0.35);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a.ifleet-ring__node:hover .ifleet-ring__label,
a.ifleet-ring__node:focus-visible .ifleet-ring__label {
  color: var(--wp--preset--color--primary-blue);
  text-decoration-color: var(--wp--preset--color--primary-blue);
}

a.ifleet-ring__node:focus-visible {
  outline: none;
}

a.ifleet-ring__node:focus-visible .ifleet-ring__icon {
  box-shadow:
    0 10px 22px -10px rgba(0, 120, 170, 0.55),
    0 0 0 7px #fff,
    0 0 0 10px var(--wp--preset--color--primary-blue);
}

/* non-link node — its own distinct identity: solid filled "anchor" icon
   (not clickable, no underline), differentiating it from the outlined links */
div.ifleet-ring__node {
  cursor: default;
}

div.ifleet-ring__node .ifleet-ring__icon {
  background: var(--wp--preset--color--primary-blue);
  border-color: var(--wp--preset--color--primary-blue);
  color: #fff;
  box-shadow:
    0 12px 24px -10px rgba(0, 120, 170, 0.7),
    0 0 0 7px #fff;
}

div.ifleet-ring__node .ifleet-ring__label {
  color: var(--wp--preset--color--dark-text);
  font-weight: 500;
}

.ifleet-ring__node--top    { top: 0;    left: 50%; transform: translate(-50%, -50%); }
.ifleet-ring__node--bottom { bottom: 0; left: 50%; transform: translate(-50%, 50%); }
.ifleet-ring__node--left   { left: 0;   top: 50%;  transform: translate(-50%, -50%); }
.ifleet-ring__node--right  { right: 0;  top: 50%;  transform: translate(50%, -50%); }

.ifleet-ring__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.25rem;
  background: #fff;
  border: 2px solid var(--wp--preset--color--primary-blue);
  border-radius: 50%;
  color: var(--wp--preset--color--primary-blue);
  /* white halo masks the ring + orbit passing behind each station */
  box-shadow:
    0 10px 22px -10px rgba(0, 120, 170, 0.55),
    0 0 0 7px #fff;
  transition: transform 0.25s ease, background-color 0.25s ease,
    color 0.25s ease, box-shadow 0.25s ease;
}

a.ifleet-ring__node:hover .ifleet-ring__icon {
  background: var(--wp--preset--color--primary-blue);
  color: #fff;
  transform: translateY(-3px);
  box-shadow:
    0 16px 28px -10px rgba(0, 120, 170, 0.7),
    0 0 0 7px #fff;
}

.ifleet-ring__icon svg {
  width: 2rem;
  height: 2rem;
  stroke: currentColor;
  fill: none;
}

.ifleet-ring__label {
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--wp--preset--color--dark-text);
  /* Solid backing so the ring line never cuts through the label text. */
  display: inline-block;
  background: #fff;
  padding: 0.1rem 0.45rem;
  border-radius: 6px;
}

@media (max-width: 600px) {
  .ifleet-ring {
    width: min(100%, 280px);
    margin: 2.5rem auto;
  }
  .ifleet-ring__node {
    width: 100px;
  }
  .ifleet-ring__icon {
    width: 3.4rem;
    height: 3.4rem;
    box-shadow:
      0 8px 18px -10px rgba(0, 120, 170, 0.55),
      0 0 0 5px #fff;
  }
  .ifleet-ring__node:hover .ifleet-ring__icon {
    box-shadow:
      0 12px 22px -10px rgba(0, 120, 170, 0.7),
      0 0 0 5px #fff;
  }
  .ifleet-ring__icon svg {
    width: 1.7rem;
    height: 1.7rem;
  }
  .ifleet-ring__label {
    font-size: 0.72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ifleet-ring::before { animation: none; }
}

/* Home — Turnkey End-to-end Solutions section */
.icharge-turnkey-list {
  /* 9 short items pack better in two columns */
  columns: 2;
  column-gap: 2rem;
}

.icharge-turnkey-list li {
  break-inside: avoid;
  font-size: 1.3rem;
}

.icharge-turnkey-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.icharge-turnkey-grid .icharge-turnkey-tile {
  margin: 0;
}

.icharge-turnkey-grid .icharge-turnkey-tile img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.icharge-turnkey-grid .icharge-turnkey-tile img:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

@media (max-width: 781px) {
  .icharge-turnkey-list {
    columns: 1;
  }
  .icharge-turnkey-grid {
    grid-template-columns: 1fr;
  }
}

/* Skip navigation link */
.skip-to-content {
  background: var(--wp--preset--color--primary-blue);
  color: var(--wp--preset--color--white);
  left: 50%;
  padding: 0.5rem 1rem;
  position: fixed;
  top: -100%;
  transform: translateX(-50%);
  transition: top 0.2s ease;
  z-index: 9999;
  border-radius: var(--icharge-radius-sm);
  text-decoration: none;
  font-weight: 500;
}

.skip-to-content:focus {
  top: 1rem;
}

/* ============================================================
   News & Promo (blog) — listing, single post, related grid
   ============================================================ */

/* Hero band shared by home.html (posts page) + archive.html */
.icharge-blog-hero h1 {
  line-height: 1.1;
}

/* Category filter chips */
.icharge-blog-filters {
  gap: 0.5rem;
}

.icharge-blog-chip {
  margin: 0;
}

.icharge-blog-chip a {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--dark-text);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid #d7e2ea;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.icharge-blog-chip a:hover {
  background: var(--wp--preset--color--primary-blue);
  color: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--primary-blue);
}

.icharge-blog-chip.is-active a {
  background: var(--wp--preset--color--primary-blue);
  color: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--primary-blue);
}

/* Featured / latest post on the index */
.icharge-blog-featured-card {
  margin-bottom: 0;
}

.icharge-blog-featured-card .wp-block-post-featured-image img {
  border-radius: 16px;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.icharge-blog-featured-card .wp-block-post-title a {
  color: var(--wp--preset--color--dark-text);
  text-decoration: none;
}

.icharge-blog-featured-card .wp-block-post-title a:hover {
  color: var(--wp--preset--color--primary-blue);
}

.icharge-blog-readmore {
  display: inline-block;
  color: var(--wp--preset--color--primary-blue);
  font-weight: 500;
  text-decoration: none;
}

.icharge-blog-readmore:hover {
  color: var(--wp--preset--color--dark-teal);
}

/* Recent grid + related grid — uniform card style */
.icharge-blog-grid .wp-block-post-template.is-layout-grid {
  gap: 1.5rem;
}

.icharge-blog-card {
  overflow: hidden;
  box-shadow: var(--icharge-shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.icharge-blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--icharge-shadow-md);
}

.icharge-blog-card .wp-block-post-featured-image {
  margin: 0;
  display: block;
}

.icharge-blog-card .wp-block-post-featured-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 16 / 10;
  display: block;
  border-radius: 14px 14px 0 0;
}

.icharge-blog-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.icharge-blog-card .wp-block-post-title {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.icharge-blog-card .wp-block-post-title a {
  color: var(--wp--preset--color--dark-text);
  text-decoration: none;
}

.icharge-blog-card .wp-block-post-title a:hover {
  color: var(--wp--preset--color--primary-blue);
}

.icharge-blog-card .wp-block-post-excerpt__excerpt {
  color: var(--wp--preset--color--body-text);
  margin: 0;
}

.icharge-blog-card .wp-block-post-date {
  color: var(--wp--preset--color--body-text);
  margin-top: auto;
  padding-top: 1rem;
}

/* Category badge — shared on featured, card, and single-post header */
.icharge-blog-badge {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgba(0, 163, 228, 0.12);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
}

.icharge-blog-badge a {
  color: var(--wp--preset--color--primary-blue);
  text-decoration: none;
}

.icharge-blog-badge a:hover {
  text-decoration: underline;
}

/* Center the badge on the single-post hero (above the post title).
   Must be `display: block` for auto-margins to take effect — the base rule
   sets `inline-block`, which ignores horizontal auto-margins. */
.icharge-post-hero .icharge-blog-badge {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.icharge-post-hero .wp-block-post-title,
.icharge-post-hero .icharge-post-meta {
  text-align: center;
  justify-content: center;
}

/* Per-category accent — applied via body class on single + archive views */
body.category-promotions .icharge-blog-badge {
  background: rgba(245, 158, 11, 0.15);
}
body.category-promotions .icharge-blog-badge a {
  color: #b45309;
}

body.category-industry-insights .icharge-blog-badge {
  background: rgba(0, 120, 170, 0.15);
}
body.category-industry-insights .icharge-blog-badge a {
  color: var(--wp--preset--color--dark-teal);
}

body.category-case-studies .icharge-blog-badge {
  background: rgba(34, 34, 34, 0.08);
}
body.category-case-studies .icharge-blog-badge a {
  color: var(--wp--preset--color--dark-text);
}

/* Featured/grid cards: tint the badge based on the rendered taxonomy term link.
   WP outputs term anchors with .term-{slug} — tint each. */
.icharge-blog-badge a[href*="/category/promotions"] {
  color: #b45309;
}
.icharge-blog-card .icharge-blog-badge:has(a[href*="/category/promotions"]) {
  background: rgba(245, 158, 11, 0.15);
}
.icharge-blog-badge a[href*="/category/industry-insights"] {
  color: var(--wp--preset--color--dark-teal);
}
.icharge-blog-card .icharge-blog-badge:has(a[href*="/category/industry-insights"]) {
  background: rgba(0, 120, 170, 0.15);
}
.icharge-blog-badge a[href*="/category/case-studies"] {
  color: var(--wp--preset--color--dark-text);
}
.icharge-blog-card .icharge-blog-badge:has(a[href*="/category/case-studies"]) {
  background: rgba(34, 34, 34, 0.08);
}

/* Meta line on single + featured: date + author with separator */
.icharge-blog-meta,
.icharge-post-meta {
  gap: 1rem;
  align-items: center;
  color: var(--wp--preset--color--body-text);
}

.icharge-blog-meta .wp-block-post-author-name::before,
.icharge-post-meta .wp-block-post-author-name::before {
  content: "·";
  margin-right: 1rem;
  color: var(--wp--preset--color--body-text);
}

/* Single-post body — generous prose */
.icharge-post-body {
  font-size: 1.0625rem;
  line-height: 1.7;
}

.icharge-post-body p {
  margin: 1.25rem 0;
}

.icharge-post-body h2 {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  margin: 2.5rem 0 1rem;
}

.icharge-post-body h3 {
  font-size: 1.375rem;
  margin: 2rem 0 0.75rem;
}

.icharge-post-body ul,
.icharge-post-body ol {
  margin: 1.25rem 0;
  padding-left: 1.5rem;
}

.icharge-post-body li {
  margin: 0.5rem 0;
}

.icharge-post-body img {
  border-radius: 12px;
}

.icharge-post-body blockquote {
  border-left: 3px solid var(--wp--preset--color--primary-blue);
  padding: 0.5rem 0 0.5rem 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--wp--preset--color--dark-text);
}

/* Responsive grid → 2 then 1 col */
@media (max-width: 900px) {
  .icharge-blog-featured-card {
    flex-direction: column !important;
  }
  .icharge-blog-featured-card > .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }
  .icharge-blog-grid .wp-block-post-template.is-layout-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .icharge-blog-grid .wp-block-post-template.is-layout-grid {
    grid-template-columns: 1fr;
  }
  .icharge-blog-filters {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    padding-bottom: 0.5rem;
    justify-content: flex-start !important;
  }
  .icharge-blog-chip a {
    white-space: nowrap;
  }
}