/* Phase 3 responsive UX refinements. Desktop layout remains governed by style.css. */
@media (max-width: 1024px) {
  html,
  body {
    overflow-x: hidden;
  }

  body {
    font-size: 1rem;
    line-height: 1.62;
  }

  main.wp-block-group {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .alignwide {
    max-width: 94vw !important;
  }

  .hero,
  .hero-page,
  .section-dark,
  .cta-band {
    max-width: 94vw !important;
    border-radius: 26px;
  }

  .hero,
  .hero-page {
    background-position: center 48% !important;
  }

  .hero > .wp-block-columns,
  .hero-page > .wp-block-columns {
    gap: 1.6rem !important;
  }

  .hero h1,
  .hero-page h1,
  .has-huge-font-size {
    font-size: 3rem !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
  }

  h2,
  .has-xx-large-font-size {
    font-size: 2.25rem !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
  }

  h3,
  .has-x-large-font-size {
    font-size: 1.55rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }

  .lead,
  .has-large-font-size {
    font-size: 1.08rem !important;
    line-height: 1.58 !important;
  }

  .svc-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
  }

  .svc-card {
    min-height: 260px;
    padding: 1.65rem 1.5rem;
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem;
  }

  .client-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .site-footer > .wp-block-columns {
    display: grid !important;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 2rem !important;
  }

  .site-footer > .wp-block-columns > .wp-block-column {
    flex-basis: auto !important;
  }

  .contact-aside .blob {
    display: none;
  }
}

@media (min-width: 782px) and (max-width: 1024px) {
  [style*="padding-top:6rem"] {
    padding-top: 4.4rem !important;
  }

  [style*="padding-bottom:6rem"] {
    padding-bottom: 4.4rem !important;
  }

  [style*="padding-top:5.5rem"] {
    padding-top: 4rem !important;
  }

  [style*="padding-bottom:5.5rem"] {
    padding-bottom: 4rem !important;
  }

  .hero {
    padding-top: 4.6rem !important;
    padding-bottom: 4.6rem !important;
  }

  .hero-card .wp-block-columns {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.9rem !important;
  }

  .hero-card .wp-block-column {
    flex-basis: calc(50% - 0.45rem) !important;
  }

  .stagger.wp-block-columns {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem !important;
  }

  .stagger.wp-block-columns > .wp-block-column {
    flex-basis: auto !important;
  }

  .contact-card {
    grid-template-columns: 0.9fr 1.1fr !important;
  }

  .contact-form .grid2,
  .contact-form .fgrid,
  .git-panel .wpcf7-form .git-row {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 781px) {
  body {
    padding-bottom: 72px;
  }

  .topbar > .wp-block-group {
    max-width: 94vw !important;
    gap: 0.35rem !important;
    justify-content: center !important;
    text-align: center;
  }

  .site-header > .wp-block-group {
    max-width: 94vw !important;
  }

  .site-logo {
    gap: 0.55rem;
  }

  .brand-text {
    font-size: 1.08rem !important;
    letter-spacing: 0;
  }

  .site-logo .logo-mark {
    height: 44px !important;
  }

  .z-burger {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border-radius: 12px;
  }

  .z-nav-inner {
    width: min(100%, 430px);
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
  }

  .z-nav-links > a,
  .z-acc-head {
    min-height: 44px;
  }

  .hero,
  .hero-page,
  .section-dark,
  .cta-band {
    max-width: 94vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 22px;
  }

  .hero {
    padding: 2.6rem 0 2.75rem !important;
    min-height: auto;
    background-position: center top !important;
  }

  .hero > .wp-block-columns,
  .hero-page > .wp-block-columns {
    max-width: 90vw !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.25rem !important;
  }

  .hero > .wp-block-columns > .wp-block-column,
  .hero-page > .wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
  }

  .hero h1,
  .hero-page h1,
  .has-huge-font-size {
    font-size: 2.35rem !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
  }

  h2,
  .has-xx-large-font-size {
    font-size: 1.9rem !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
  }

  h3,
  .has-x-large-font-size {
    font-size: 1.38rem !important;
    line-height: 1.22 !important;
    letter-spacing: 0 !important;
  }

  .has-large-font-size,
  .lead {
    font-size: 1.02rem !important;
    line-height: 1.56 !important;
  }

  .eyebrow {
    font-size: 0.7rem !important;
    letter-spacing: 0.1em;
  }

  .wp-block-buttons {
    gap: 0.7rem !important;
  }

  .wp-block-button__link,
  .cta-primary,
  .cta-ghost,
  .git-panel .wpcf7-submit,
  .git-form button,
  .contact-form button,
  .mobile-cta a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.82rem 1.1rem !important;
  }

  .hero-card {
    padding: 1.15rem !important;
    border-radius: 16px !important;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .hero-card .wp-block-columns {
    display: contents !important;
  }

  .hero-card .wp-block-column {
    flex-basis: auto !important;
    max-width: none;
  }

  .hero .hero-card .wp-block-columns > .wp-block-column {
    flex-basis: auto !important;
    max-width: none;
  }

  .hero-card .stat-num {
    font-size: 1.65rem !important;
  }

  .hero-card p {
    margin-top: 0.3rem;
    margin-bottom: 0;
  }

  [style*="padding-top:6rem"] {
    padding-top: 3rem !important;
  }

  [style*="padding-bottom:6rem"] {
    padding-bottom: 3rem !important;
  }

  [style*="padding-top:5.5rem"] {
    padding-top: 2.8rem !important;
  }

  [style*="padding-bottom:5.5rem"] {
    padding-bottom: 2.8rem !important;
  }

  [style*="padding-top:4rem"] {
    padding-top: 2.4rem !important;
  }

  [style*="padding-bottom:4rem"] {
    padding-bottom: 2.4rem !important;
  }

  .wp-block-group.alignfull > :where(p, h1, h2, h3, .wp-block-buttons, .wp-block-columns, .svc-carousel, .client-grid, .portfolio-grid, .faq, .git-panel, .contact-split) {
    max-width: 90vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .energy-illustration svg {
    width: 100% !important;
    max-width: 330px !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
  }

  .img-solar,
  .img-wind,
  .img-frame {
    aspect-ratio: 16 / 10;
    min-height: 0 !important;
    background-position: center !important;
  }

  .svc-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 5vw;
    gap: 0.85rem;
    padding: 0.2rem 5vw 0.75rem !important;
    margin-left: -5vw;
    margin-right: -5vw;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  .svc-card {
    flex: 0 0 78%;
    min-height: 248px;
    scroll-snap-align: center;
    padding: 1.35rem 1.2rem !important;
    border-radius: 16px;
  }

  .svc-title {
    font-size: 1.12rem;
    line-height: 1.22;
    margin-bottom: 0.45rem;
  }

  .svc-desc {
    font-size: 0.9rem;
    line-height: 1.52;
    margin-bottom: 0.75rem;
  }

  .svc-card .icon-chip {
    width: 46px;
    height: 46px;
    margin-bottom: 0.8rem;
  }

  .svc-nav {
    margin-top: 0.85rem;
    gap: 0.65rem;
  }

  .svc-prev,
  .svc-next {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }

  .svc-carousel .svc-dots {
    max-width: 48vw;
    overflow: hidden;
    justify-content: center;
  }

  .client-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }

  .client-card {
    padding: 1rem 0.7rem !important;
    min-height: 112px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .client-card strong {
    font-size: 0.92rem;
    line-height: 1.25;
  }

  .client-card span {
    font-size: 0.76rem;
    line-height: 1.35;
  }

  .stagger.wp-block-columns {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem !important;
  }

  .stagger.wp-block-columns > .wp-block-column {
    flex-basis: auto !important;
  }

  .stagger .card {
    padding: 1.05rem !important;
    min-height: 100%;
  }

  .step-no {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
  }

  .stagger h3 {
    font-size: 1rem !important;
    line-height: 1.24 !important;
  }

  .stagger p {
    font-size: 0.82rem !important;
    line-height: 1.45;
  }

  .portfolio-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0.85rem;
    padding: 0.2rem 5vw 0.8rem !important;
    margin-left: -5vw;
    margin-right: -5vw;
    scroll-padding-inline: 5vw;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .portfolio-grid::-webkit-scrollbar {
    display: none;
  }

  .pcard {
    flex: 0 0 78%;
    scroll-snap-align: center;
    padding: 1.25rem !important;
  }

  .pcard-name {
    font-size: 1rem;
    line-height: 1.3;
  }

  .contact-card,
  .contact-split {
    border-radius: 18px !important;
    overflow: hidden;
  }

  .contact-aside .blob {
    display: none;
  }

  .contact-form,
  .git-panel {
    padding: 1.35rem 1.15rem !important;
  }

  .contact-form .grid2,
  .contact-form .fgrid,
  .git-panel .wpcf7-form .git-row {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .ff,
  .fld {
    margin-bottom: 0.85rem;
  }

  .ff input,
  .ff select,
  .ff textarea,
  .fwrap input,
  .fwrap select,
  .fwrap textarea,
  .inquiry-form input,
  .inquiry-form select,
  .inquiry-form textarea {
    min-height: 46px;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    font-size: 1rem;
  }

  .ff textarea,
  .fwrap textarea,
  .inquiry-form textarea {
    min-height: 106px;
  }

  .faq details {
    padding: 0.95rem 1rem;
    margin-bottom: 0.65rem;
    border-radius: 12px;
  }

  .faq summary {
    font-size: 1rem;
    line-height: 1.35;
    min-height: 44px;
  }

  .site-footer {
    padding-top: 3rem !important;
    padding-bottom: 2rem !important;
  }

  .site-footer > .wp-block-columns {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem !important;
    max-width: 90vw !important;
  }

  .site-footer > .wp-block-columns > .wp-block-column:first-child {
    grid-column: 1 / -1;
  }

  .site-footer .foot-brand .logo-mark {
    height: 46px !important;
  }

  .site-footer p {
    font-size: 0.9rem;
    line-height: 1.65 !important;
  }

  .site-footer a {
    min-height: 32px;
  }

  .mobile-cta {
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    gap: 8px;
  }

  .wa-float {
    width: 50px;
    height: 50px;
    right: 14px;
    bottom: 78px;
  }

  .card,
  .svc-card,
  .pcard,
  .rcard,
  .client-card,
  .hero-card {
    will-change: auto;
    transform-style: flat;
  }

  .card.hover-lift:hover,
  .equal-cards .card:hover,
  .svc-card:hover,
  .pcard:hover,
  .img-solar:hover,
  .img-wind:hover,
  .img-frame:hover,
  .energy-illustration:not(.hero-illus):hover {
    transform: none;
  }

  .hero::before,
  .section-dark::before,
  .cta-band::before,
  .mini-cta::before {
    filter: blur(18px);
    animation: none;
  }
}

@media (max-width: 781px) {
  .z-nav-overlay:not(.open) {
    visibility: hidden;
    pointer-events: none;
  }

  .z-nav-overlay.open {
    visibility: visible;
  }

  .z-nav-inner {
    box-sizing: border-box;
    max-width: 100vw;
  }

  .hero {
    padding-top: 2.05rem !important;
    padding-bottom: 2.05rem !important;
  }

  .hero > .wp-block-columns {
    gap: 1rem !important;
  }

  .hero h1,
  .hero-page h1,
  .has-huge-font-size {
    font-size: 2.1rem !important;
    line-height: 1.08 !important;
  }

  .hero .lead {
    font-size: 0.96rem !important;
    line-height: 1.5 !important;
    margin-top: 0.95rem !important;
  }

  .hero .wp-block-buttons {
    margin-top: 1.15rem !important;
  }

  .hero-card {
    margin-top: 0.2rem !important;
    padding: 0.95rem !important;
    gap: 0.55rem;
  }

  .hero-card .eyebrow {
    grid-column: 1 / -1;
    margin-bottom: 0.35rem;
  }

  .hero-card .wp-block-columns {
    display: contents !important;
    gap: 0.55rem !important;
    margin-top: 0.45rem !important;
  }

  .hero-card .wp-block-column {
    min-height: 72px;
    padding: 0.68rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
  }

  .hero-card .stat-num {
    font-size: 1.38rem !important;
  }

  .hero-card .has-small-font-size {
    font-size: 0.72rem !important;
    line-height: 1.28 !important;
  }

  .hero .wp-block-button__link {
    min-height: 42px;
    padding-top: 0.72rem !important;
    padding-bottom: 0.72rem !important;
  }

  .hero .wp-block-button.is-style-outline .wp-block-button__link {
    background: rgba(255, 255, 255, 0.08);
  }

  .hero::after {
    animation: none;
  }

  .reveal {
    transform: translateY(18px);
  }

  .section-dark .wp-block-list {
    padding-left: 1.1rem;
  }

  .section-dark li {
    margin-bottom: 0.45rem;
  }
}

@media (min-width: 600px) and (max-width: 781px) {
  .hero > .wp-block-columns {
    align-items: stretch !important;
  }

  .hero-card .wp-block-columns {
    display: contents !important;
  }

  .hero-card {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero-card .wp-block-column {
    flex-basis: auto !important;
  }

  .svc-card,
  .pcard {
    flex-basis: 58%;
  }
}

@media (min-width: 375px) and (max-width: 781px) {
  .hero .wp-block-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .hero .wp-block-button {
    width: auto;
  }

  .hero .wp-block-button__link {
    width: 100%;
    padding-left: 0.7rem !important;
    padding-right: 0.7rem !important;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .hero h1,
  .hero-page h1,
  .has-huge-font-size {
    font-size: 2.05rem !important;
  }

  h2,
  .has-xx-large-font-size {
    font-size: 1.65rem !important;
  }

  h3,
  .has-x-large-font-size {
    font-size: 1.22rem !important;
  }

  .hero,
  .hero-page,
  .section-dark,
  .cta-band {
    max-width: 94vw !important;
    border-radius: 18px;
  }

  .hero > .wp-block-columns,
  .hero-page > .wp-block-columns,
  .wp-block-group.alignfull > :where(p, h1, h2, h3, .wp-block-buttons, .wp-block-columns, .svc-carousel, .client-grid, .portfolio-grid, .faq, .git-panel, .contact-split) {
    max-width: 90vw !important;
  }

  .wp-block-buttons:not(.is-content-justification-left):not(.is-content-justification-right) {
    justify-content: stretch !important;
  }

  .wp-block-button {
    width: 100%;
  }

  .wp-block-button__link {
    width: 100%;
    white-space: normal;
    text-align: center;
  }

  .svc-card,
  .pcard {
    flex-basis: 84%;
  }

  .client-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .client-card {
    padding: 0.85rem 0.55rem !important;
    min-height: 104px;
  }

  .stagger.wp-block-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem !important;
  }

  .stagger .card {
    padding: 0.9rem !important;
  }

  .site-footer > .wp-block-columns {
    grid-template-columns: 1fr 1fr !important;
  }

  .z-nav-meta {
    font-size: 0.86rem;
    line-height: 1.55;
  }
}

@media (max-width: 480px) {
  .topbar {
    display: none;
  }

  .site-header {
    padding-top: 0.42rem !important;
    padding-bottom: 0.42rem !important;
  }

  .hero {
    margin-top: 0.6rem !important;
  }

  .hero h1,
  .hero-page h1,
  .has-huge-font-size {
    font-size: 1.86rem !important;
  }

  .hero .eyebrow {
    font-size: 0.62rem !important;
    line-height: 1.35;
  }

  .hero-card .wp-block-column {
    min-height: 68px;
    padding: 0.58rem;
  }

  .hero-card .stat-num {
    font-size: 1.22rem !important;
  }

  .hero-card .has-small-font-size {
    font-size: 0.68rem !important;
  }

  .client-card span {
    margin-top: 0.2rem;
  }

  .mobile-cta {
    box-shadow: 0 -8px 24px rgba(10, 46, 69, 0.08);
  }
}

@media (max-width: 360px) {
  .brand-text {
    font-size: 0.96rem !important;
  }

  .site-logo .logo-mark {
    height: 40px !important;
  }

  .hero h1,
  .hero-page h1,
  .has-huge-font-size {
    font-size: 1.9rem !important;
  }

  .lead,
  .has-large-font-size {
    font-size: 0.98rem !important;
  }

  .svc-card,
  .pcard {
    flex-basis: 88%;
  }

  .svc-carousel .svc-dots {
    max-width: 42vw;
  }

  .client-card strong {
    font-size: 0.84rem;
  }

  .client-card span {
    font-size: 0.7rem;
  }

  .mobile-cta a {
    font-size: 0.86rem;
  }
}

@media (max-width: 360px) {
  .hero h1,
  .hero-page h1,
  .has-huge-font-size {
    font-size: 1.72rem !important;
  }

  .hero-card .wp-block-columns {
    gap: 0.45rem !important;
  }

  .hero-card .wp-block-column {
    min-height: 64px;
    padding: 0.5rem;
  }
}

@media (hover: none), (pointer: coarse) {
  .wp-block-button__link:hover,
  .contact-form button:hover,
  .card.hover-lift:hover,
  .svc-card:hover,
  .pcard:hover {
    transform: none;
    box-shadow: inherit;
  }
}

/* ============================================================
   Phase 3.1 — targeted mobile bug fixes (overlap, sliders, legibility)
   ============================================================ */

/* Portfolio scroller controls (injected via JS) — hidden on desktop grid */
@media (min-width: 782px) {
  .portfolio-nav { display: none !important; }
}
@media (max-width: 781px) {
  .portfolio-nav {
    display: flex; align-items: center; justify-content: center;
    gap: 0.65rem; margin-top: 1rem;
  }
  /* subtle right-edge fade so the next card clearly peeks (swipe affordance) */
  .portfolio-grid { position: relative; scroll-snap-type: x mandatory; }
}

/* Floating WhatsApp button: keep clear of the right-side sticky CTA on phones */
@media (max-width: 781px) {
  .wa-float {
    left: 14px; right: auto !important;
    bottom: calc(72px + env(safe-area-inset-bottom) + 14px) !important;
    width: 48px !important; height: 48px !important;
  }
}

/* Legibility: guarantee hero/CTA text stays readable over background imagery */
@media (max-width: 781px) {
  .hero h1, .hero-page h1,
  .hero .lead, .hero-page .lead,
  .hero .eyebrow, .hero-page .eyebrow,
  .cta-card h2, .cta-card p,
  .cta-band h2, .cta-band p {
    text-shadow: 0 1px 14px rgba(6, 24, 38, 0.40);
  }
}

/* ============================================================
   Phase 3.2 — hero legibility + illustration/photo overlap fix
   ============================================================ */

/* (A) HERO: stronger scrim so the headline never washes out on a bright photo */
@media (max-width: 781px) {
  .hero {
    background:
      linear-gradient(180deg, rgba(7, 26, 42, 0.93) 0%, rgba(7, 26, 42, 0.86) 60%, rgba(7, 26, 42, 0.9) 100%),
      url("https://images.unsplash.com/photo-1509391366360-2e959784a276?auto=format&fit=crop&w=760&q=60") center top / cover no-repeat !important;
  }
  .hero-page {
    background:
      linear-gradient(180deg, rgba(7, 26, 42, 0.92) 0%, rgba(7, 26, 42, 0.85) 100%),
      url("https://images.unsplash.com/photo-1509391366360-2e959784a276?auto=format&fit=crop&w=760&q=60") center 40% / cover no-repeat !important;
  }
  .hero h1, .hero-page h1 { color: #fff !important; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5); }
  .hero .lead, .hero .lead.muted,
  .hero-page .lead, .hero-page .lead.muted { color: #dbeaf5 !important; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); }
  .hero .eyebrow, .hero-page .eyebrow { color: #8fd8f2 !important; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); }
}

/* (B) FEATURE ILLUSTRATION: show ONLY the branded animated SVG on a clean card
       (previously the SVG rendered on top of a background photo = overlap) */
@media (max-width: 781px) {
  .energy-illustration:not(.hero-illus) {
    background: linear-gradient(150deg, #eef6fc 0%, #d6e6f8 100%) !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    display: flex; align-items: center; justify-content: center;
    padding: 1.4rem !important;
    border-radius: 20px;
    box-shadow: 0 18px 42px rgba(10, 46, 69, 0.14);
  }
  .energy-illustration:not(.hero-illus) svg {
    display: block !important;
    width: 100% !important;
    max-width: 300px !important;
    height: auto !important;
    margin: 0 auto;
  }
}

/* ============================================================
   Phase 3.3 — compact 2-up layouts on mobile (shorter pages)
   Applies site-wide via shared classes; desktop untouched (>781px).
   ============================================================ */
@media (max-width: 781px) {

  /* Service-page card groups: process steps + "What our X includes" -> 2-up */
  .equal-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.7rem !important;
    align-items: stretch;
  }
  .equal-cards > .wp-block-column {
    flex-basis: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    width: auto !important;
  }
  /* a lone final card spans full width so a row is never half-empty */
  .equal-cards > .wp-block-column:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }
  .equal-cards .card {
    padding: 1.05rem 0.95rem !important;
    min-height: 100%;
    border-radius: 16px;
  }
  .equal-cards .step-no { font-size: 0.95rem !important; margin-bottom: 0.2rem !important; }
  .equal-cards h3 { font-size: 1rem !important; line-height: 1.22 !important; }
  .equal-cards p  { font-size: 0.82rem !important; line-height: 1.42 !important; }

  /* "Explore other services" -> 2-up compact vertical cards */
  .related-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.7rem !important;
  }
  .related-grid .rcard {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1rem 0.9rem 1rem !important;
    min-height: 100%;
  }
  .related-grid .rcard:nth-child(odd):last-child { grid-column: 1 / -1; }
  .related-grid .rcard-ic { width: 42px !important; height: 42px !important; }
  .related-grid .rcard-tx { flex: none; }
  .related-grid .rcard-name { font-size: 0.94rem !important; line-height: 1.24; }
  .related-grid .rcard-sub  { font-size: 0.76rem !important; line-height: 1.34; }
  .related-grid .rcard-go {
    position: absolute; top: 0.9rem; right: 0.9rem;
    font-size: 1.05rem; line-height: 1;
  }
}

@media (max-width: 380px) {
  .equal-cards, .related-grid { gap: 0.55rem !important; }
  .equal-cards p { font-size: 0.78rem !important; }
  .related-grid .rcard-sub { font-size: 0.73rem !important; }
}

/* ============================================================
   Phase 3.4 — tame tall image bands + compact the contact form
   ============================================================ */
@media (max-width: 781px) {
  /* CTA card was ballooning vertically — compact padding, heading, spacing */
  .cta-card {
    padding: 2rem 1.2rem !important;
    border-radius: 20px !important;
  }
  .cta-card h2 {
    font-size: 1.5rem !important;
    line-height: 1.18 !important;
    margin: 0 0 0.55rem !important;
  }
  .cta-card p {
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
    margin: 0 auto 1.1rem !important;
  }
  .cta-card .wp-block-buttons,
  .cta-actions { gap: 0.6rem !important; margin-top: 0 !important; }
  .cta-card .eyebrow { margin-bottom: 0.5rem !important; }
  .cta-card::before { filter: blur(20px); animation: none; }

  /* Keep photo/illustration bands to a tidy aspect ratio (never tall & empty) */
  .img-solar, .img-wind, .img-frame {
    aspect-ratio: 16 / 10 !important;
    min-height: 0 !important;
    max-height: 260px;
  }

  /* Contact info card: tighten vertical rhythm */
  .contact-aside .arow { margin-bottom: 0.7rem !important; }
  .contact-aside { padding: 1.5rem 1.25rem !important; }
}

/* Contact form: pair short fields into 2 columns so it isn't a long stack */
@media (min-width: 360px) and (max-width: 781px) {
  .git-panel .wpcf7-form .git-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.7rem !important;
  }
  .git-panel .wpcf7-form { gap: 0.8rem !important; }
  .git-panel .wpcf7-form-control { padding: 0.85rem 0.9rem !important; }
  .git-panel textarea.wpcf7-form-control { min-height: 104px !important; }
  .git-title { margin-bottom: 1rem !important; font-size: 1.6rem !important; }
}

/* ============================================================
   Phase 3.5 — blog/page breadcrumb sits on a LIGHT background,
   so it must use dark colours (earlier rule forced it light).
   ============================================================ */
.page-crumb { color: #5a7184 !important; }
.page-crumb a { color: #036c99 !important; text-decoration: none !important; }
.page-crumb a:hover { text-decoration: underline !important; }
.page-crumb .sep { color: #9fb2bf !important; }
.page-crumb .cur { color: #0A2E45 !important; }

/* ============================================================
   Phase 3.6 — blog post grid: balanced 2x2 on desktop (fills the
   space with 4 posts), single readable column on phones.
   ============================================================ */
@media (min-width: 782px) {
  .wp-block-post-template.equal-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
    gap: 1.6rem !important;
  }
}
@media (max-width: 781px) {
  .wp-block-post-template.equal-cards {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

/* ============================================================
   Phase 4 — premium finish (subtle, brand-consistent, reversible)
   ============================================================ */

/* 1) Flanked-line section eyebrows — a classic high-end editorial detail.
      Only affects CENTERED section eyebrows; hero/card eyebrows untouched. */
.eyebrow.has-text-align-center {
  display: flex; align-items: center; justify-content: center; gap: 0.7rem;
}
.eyebrow.has-text-align-center::before,
.eyebrow.has-text-align-center::after {
  content: ""; width: 28px; height: 2px; border-radius: 2px; flex: none;
  background: linear-gradient(90deg, transparent, #036c99);
}
.eyebrow.has-text-align-center::after {
  background: linear-gradient(90deg, #036c99, transparent);
}
/* on dark bands the flanking lines pick up the light accent */
.section-dark .eyebrow.has-text-align-center::before,
.cta-card .eyebrow.has-text-align-center::before,
.cta-band .eyebrow.has-text-align-center::before {
  background: linear-gradient(90deg, transparent, #7fd4ef);
}
.section-dark .eyebrow.has-text-align-center::after,
.cta-card .eyebrow.has-text-align-center::after,
.cta-band .eyebrow.has-text-align-center::after {
  background: linear-gradient(90deg, #7fd4ef, transparent);
}

/* 2) Consistent premium hover on the lighter cards (match the tilt cards):
      a soft brand-tinted lift + glow. */
.rcard, .client-card {
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .client-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 46px rgba(10,46,69,0.14);
    border-color: rgba(0,156,210,0.35);
  }
}

/* 3) Refined section heading — a slim gradient accent under each H2 that
      follows the eyebrow, tying sections together. */
.eyebrow.has-text-align-center + h2 {
  position: relative;
}

/* 4) Crisper, more tactile primary buttons (kept on-brand). */
.btn-blue .wp-block-button__link,
.cta-primary,
.git-panel .wpcf7-submit {
  letter-spacing: 0.01em;
}

/* ============================================================
   Phase 4.1 — replace flanked-line eyebrow with a subtle pill badge
   ============================================================ */
.eyebrow.has-text-align-center::before,
.eyebrow.has-text-align-center::after { content: none !important; }

.eyebrow.has-text-align-center {
  display: table !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 0 !important;
  padding: 0.4rem 0.95rem !important;
  border-radius: 999px !important;
  background: rgba(0, 156, 210, 0.10) !important;
  color: #036c99 !important;
  letter-spacing: 0.14em;
  font-size: 0.72rem !important;
}
.section-dark .eyebrow.has-text-align-center,
.cta-card .eyebrow.has-text-align-center,
.cta-band .eyebrow.has-text-align-center {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #cbe9f6 !important;
}

/* ============================================================
   Phase 4.2 — tame the oversized hero on large desktop screens
   ============================================================ */
@media (min-width: 782px) {
  .hero h1,
  .hero .has-huge-font-size {
    font-size: clamp(2.6rem, 3.4vw, 3.3rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.015em !important;
  }
  .hero .lead {
    font-size: 1.08rem !important;
    line-height: 1.6 !important;
  }
}
@media (min-width: 1025px) {
  .hero {
    padding-top: 4.4rem !important;
    padding-bottom: 4.4rem !important;
  }
}

/* ============================================================
   Phase 5 — real illustration image in the feature section
   ============================================================ */
.energy-illustration,
.energy-illustration:not(.hero-illus) {
  background: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  display: block !important;
  box-shadow: 0 26px 54px rgba(10, 46, 69, 0.20), 0 0 0 1px rgba(0, 156, 210, 0.10);
}
.energy-illustration .illus-pic,
.energy-illustration img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.energy-illustration svg { display: none !important; }

@media (hover: hover) and (pointer: fine) {
  .energy-illustration img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
  .energy-illustration:hover img { transform: scale(1.045); }
}
@media (max-width: 781px) {
  .energy-illustration,
  .energy-illustration:not(.hero-illus) {
    aspect-ratio: 16 / 10;
    background: none !important;
    padding: 0 !important;
  }
}

/* ============================================================
   Phase 5.1 — animated hand-coded scene fills the feature frame
   ============================================================ */
.energy-illustration,
.energy-illustration:not(.hero-illus) {
  background: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 3 / 2 !important;
  display: block !important;
  box-shadow: 0 26px 54px rgba(10, 46, 69, 0.20), 0 0 0 1px rgba(0, 156, 210, 0.10);
}
.energy-illustration svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
.energy-illustration .illus-pic,
.energy-illustration img { display: none !important; }

/* ============================================================
   Phase 6 — Contact hero without a background photo (solid brand
   gradient), breadcrumb + text preserved.
   ============================================================ */
.hero-page.hero-noimg {
  background: linear-gradient(150deg, #0a2e45 0%, #0e3a56 55%, #0a2e45 100%) !important;
}

/* Contact: compact breadcrumb-only strip (hero removed) */
.crumb-only .page-crumb { margin: 0 auto !important; }
.crumb-only { margin-top: 0 !important; }

/* ============================================================
   Phase 7 — compact Contact info card + form on desktop
   ============================================================ */
@media (min-width: 782px) {
  #inquiry { padding-top: 2.3rem !important; padding-bottom: 2.6rem !important; }

  .contact-aside { padding: 1.9rem 1.8rem !important; }
  .contact-aside .aside-title { margin: 0 0 0.5rem !important; font-size: 1.55rem !important; }
  .contact-aside p { margin-bottom: 0.5rem !important; line-height: 1.5 !important; }
  .contact-aside .arow { margin-bottom: 0.5rem !important; }
  .contact-aside .aside-map { margin-top: 1rem !important; }
  .contact-aside .aside-map iframe { height: 148px !important; }

  .git-panel { padding: 1.9rem 2rem !important; }
  .git-title { margin: 0 0 1rem !important; font-size: 2rem !important; }
  .git-panel .wpcf7-form { gap: 0.95rem !important; }
  .git-panel .wpcf7-form .git-row { gap: 0.95rem !important; }
  .git-panel .wpcf7-form-control { padding: 0.78rem 1rem !important; }
  .git-panel textarea.wpcf7-form-control { min-height: 92px !important; }
  .git-panel .wpcf7-submit { padding: 0.85rem 2.6rem !important; margin-top: 0.2rem; }
}

/* Phase 7.1 — balance the two contact columns (fixed textarea height, tighter aside) */
@media (min-width: 782px) {
  .git-panel textarea.wpcf7-form-control { height: 120px !important; min-height: 120px !important; }
  .contact-aside { padding: 1.7rem 1.7rem !important; }
  .contact-aside p { margin-bottom: 0.45rem !important; }
  .contact-aside .arow { margin-bottom: 0.42rem !important; }
  .contact-aside .aside-map { margin-top: 0.85rem !important; }
  .contact-aside .aside-map iframe { height: 128px !important; }
}

/* Phase 7.2 — kill leftover min-height on the map box (from the old facade)
   so the info card matches the form height -> uniform two-column card */
.contact-aside .aside-map { min-height: 0 !important; }
@media (min-width: 782px) {
  .contact-aside { display: flex; flex-direction: column; }
  .contact-aside .aside-map { margin-top: 1rem !important; }
  .contact-aside .map-link { margin-top: 0.6rem !important; }
}

/* Phase 7.3 — tighten the info-row gaps (was margin-top:1.4rem) + bigger map */
.contact-aside .arow { margin-top: 0.6rem !important; margin-bottom: 0 !important; }
.contact-aside p { margin-bottom: 0.35rem !important; }
.contact-aside .aside-title { margin-bottom: 0.5rem !important; }
@media (min-width: 782px) {
  .contact-aside .aside-map { margin-top: 1rem !important; }
  .contact-aside .aside-map iframe { height: 184px !important; }
}

/* Phase 7.4 — form fills the column height: textarea auto-grows, Submit anchors bottom */
@media (min-width: 782px) {
  .git-panel { display: flex; flex-direction: column; }
  .git-panel .wpcf7 { flex: 1 1 auto; display: flex; flex-direction: column; }
  .git-panel .wpcf7-form { flex: 1 1 auto; }
  .git-panel .wpcf7-form-control-wrap[data-name="message"] { flex: 1 1 auto; display: flex; }
  .git-panel textarea.wpcf7-form-control { flex: 1 1 auto; height: auto !important; min-height: 130px !important; }
}

/* ============================================================
   Phase 8 — mobile fixes: blog side padding, explore grid, compact hero
   ============================================================ */

/* 1) Blog single post: horizontal padding so text never touches the screen edge */
@media (max-width: 781px) {
  .single main.wp-block-group,
  .single-post main.wp-block-group,
  .blog main.wp-block-group,
  .archive main.wp-block-group {
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
    box-sizing: border-box;
  }
}

/* 2) "Explore other services" — clean equal-height 2-up grid (removes the
      min-height:100% that broke grid stretch and made cards overlap) */
@media (max-width: 781px) {
  .related-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.7rem !important;
    align-items: stretch !important;
  }
  .related-grid .rcard {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.95rem 0.85rem 0.9rem !important;
    position: relative;
  }
  .related-grid .rcard:nth-child(odd):last-child { grid-column: 1 / -1; }
  .related-grid .rcard-go { position: absolute; top: 0.85rem; right: 0.8rem; }
  .related-grid .rcard-name { font-size: 0.92rem; line-height: 1.22; }
  .related-grid .rcard-sub { font-size: 0.75rem; line-height: 1.32; }
}

/* 3) Inner-page hero: shorter + smaller text on phones */
@media (max-width: 781px) {
  .hero-page { padding-top: 1.6rem !important; padding-bottom: 2.1rem !important; }
  .hero-page h1,
  .hero-page .has-huge-font-size,
  .hero-page .has-xx-large-font-size {
    font-size: 1.85rem !important; line-height: 1.15 !important;
  }
  .hero-page .lead { font-size: 0.92rem !important; line-height: 1.5 !important; margin-top: 0.7rem !important; }
  .hero-page .eyebrow { font-size: 0.62rem !important; }
  .hero-page .wp-block-buttons { margin-top: 1rem !important; gap: 0.6rem !important; }
}
@media (max-width: 400px) {
  .hero-page h1,
  .hero-page .has-xx-large-font-size { font-size: 1.66rem !important; }
}