/*
Theme Name: Energize Industries
Theme URI: https://energizeindustries.com
Author: Energize Industries
Author URI: https://energizeindustries.com
Description: Custom Full Site Editing (FSE) block theme with strict schematic wireframe styling for commercial electrical contracting and compliance. Based on Figma kit design tokens.
Version: 1.6.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
Text Domain: energize-theme
*/

/* Google Fonts: Geist, Geist Mono, Geist Pixel */
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&family=Geist:wght@400;500;600;700;800;900&display=swap');

/* Strict Schematic Aesthetics: 0px border-radius system-wide (except buttons with 2px corner radius from Figma tokens) */
*,
*::before,
*::after {
  border-radius: 0px;
}

.wp-block-button__link,
.wp-element-button {
  border-radius: 2px !important;
}

/* CSS Variables matching Figma Design Tokens */
:root {
  /* Brand Core */
  --color-black: #060505;
  --color-pitch-dark: #060505;
  --color-white: #FFF9F7;
  --color-orange: #FD5404;
  --color-orange-primary: #FD5404;

  /* Black Solids & Alphas */
  --color-black-93-solid: #181717;
  --color-black-75-solid: #454344;
  --color-black-50-solid: #828282;
  --color-black-25-solid: #C1BFC0;
  --color-black-12-solid: #E1E1E1;
  --color-black-7-solid: #EDEDED;

  --color-black-93: rgba(6, 5, 5, 0.93);
  --color-black-75: rgba(6, 5, 5, 0.75);
  --color-black-50: rgba(6, 5, 5, 0.50);
  --color-black-25: rgba(6, 5, 5, 0.25);
  --color-black-12: rgba(6, 5, 5, 0.12);
  --color-black-7: rgba(6, 5, 5, 0.07);

  /* White Alphas */
  --color-white-93: rgba(255, 249, 247, 0.93);
  --color-white-75: rgba(255, 249, 247, 0.75);
  --color-white-50: rgba(255, 249, 247, 0.50);
  --color-white-25: rgba(255, 249, 247, 0.25);
  --color-white-12: rgba(255, 249, 247, 0.12);
  --color-white-7: rgba(255, 249, 247, 0.07);

  /* Orange Tints (Up Solid) */
  --color-orange-93-up-solid: #FD6016;
  --color-orange-93-up: #FD6016;
  --color-orange-75-up-solid: #FD7F44;
  --color-orange-75-up: #FD7F44;
  --color-orange-50-up-solid: #FEA982;
  --color-orange-50-up: #FEA982;
  --color-orange-25-up-solid: #FED3C0;
  --color-orange-25-up: #FED3C0;
  --color-orange-12-up-solid: #FEEAE1;
  --color-orange-12-up: #FEEAE1;
  --color-orange-7-up-solid: #FFF3ED;
  --color-orange-7-up: #FFF3ED;

  /* Orange Shades (Down Solid) */
  --color-orange-93-down-solid: #EB4E04;
  --color-orange-93-down: #EB4E04;
  --color-orange-75-down-solid: #BF4004;
  --color-orange-75-down: #BF4004;
  --color-orange-50-down-solid: #812D05;
  --color-orange-50-down: #812D05;
  --color-orange-25-down-solid: #441905;
  --color-orange-25-down: #441905;
  --color-orange-12-down-solid: #240E05;
  --color-orange-12-down: #240E05;
  --color-orange-7-down-solid: #170B05;
  --color-orange-7-down: #170B05;

  /* Orange Alphas */
  --color-orange-93: rgba(253, 84, 4, 0.93);
  --color-orange-75: rgba(253, 84, 4, 0.75);
  --color-orange-50: rgba(253, 84, 4, 0.50);
  --color-orange-25: rgba(253, 84, 4, 0.25);
  --color-orange-12: rgba(253, 84, 4, 0.12);
  --color-orange-7: rgba(253, 84, 4, 0.07);

  /* Spacing Scale (Figma Token Slugs & T-Shirt Aliases) */
  --spacing-0: 0px;
  --spacing-30: 4px;
  --spacing-40: 6px;
  --spacing-50: 8px;
  --spacing-60: 12px;
  --spacing-70: 16px;
  --spacing-80: 24px;
  --spacing-90: 32px;
  --spacing-100: 48px;
  --spacing-110: 64px;

  --spacing-3xs: 4px;
  --spacing-2xs: 6px;
  --spacing-xs: 8px;
  --spacing-s: 12px;
  --spacing-m: 16px;
  --spacing-l: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 128px;

  /* Border Radius Tokens */
  --radius-none: 0px;
  --radius-button: 2px;
  --radius-tag: 2px;
  --radius-badge: 2px;
  --radius-card: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;

  /* Border Width Tokens */
  --border-width-hairline: 1px;
  --border-width-standard: 1px;
  --border-width-thick: 2px;

  /* Layout Tokens */
  --width-narrow: 768px;
  --width-medium: 896px;
  --width-content: 1152px;
  --width-wide: 1440px;

  /* Typography Families */
  --font-geist: 'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  --font-mono: var(--font-geist-mono);
  --font-geist-pixel: 'Geist Pixel', Geist, sans-serif;

  /* Typography Font Sizes */
  --font-size-body-small: 12px;
  --font-size-body: 16px;
  --font-size-callout-small: 24px;
  --font-size-callout-medium: 32px;
  --font-size-callout-large: 48px;
  --font-size-display: 60px;

  /* Typography Line Heights */
  --line-height-16: 16px;
  --line-height-20: 20px;
  --line-height-28: 28px;
  --line-height-40: 40px;
  --line-height-48: 48px;
  --line-height-52: 52px;
  --line-height-64: 64px;
  --line-height-72: 72px;

  /* Typography Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ========================================================================
     WordPress FSE Preset Aliases (Enables seamless prototype & block support)
     ======================================================================== */
  --wp--preset--color--black: var(--color-black);
  --wp--preset--color--pitch-dark: var(--color-pitch-dark);
  --wp--preset--color--white: var(--color-white);
  --wp--preset--color--orange: var(--color-orange);
  --wp--preset--color--orange-primary: var(--color-orange-primary);
  --wp--preset--color--black-93-solid: var(--color-black-93-solid);
  --wp--preset--color--black-75-solid: var(--color-black-75-solid);
  --wp--preset--color--black-50-solid: var(--color-black-50-solid);
  --wp--preset--color--black-25-solid: var(--color-black-25-solid);
  --wp--preset--color--black-12-solid: var(--color-black-12-solid);
  --wp--preset--color--black-7-solid: var(--color-black-7-solid);
  --wp--preset--color--black-93: var(--color-black-93);
  --wp--preset--color--black-75: var(--color-black-75);
  --wp--preset--color--black-50: var(--color-black-50);
  --wp--preset--color--black-25: var(--color-black-25);
  --wp--preset--color--black-12: var(--color-black-12);
  --wp--preset--color--black-7: var(--color-black-7);
  --wp--preset--color--white-93: var(--color-white-93);
  --wp--preset--color--white-75: var(--color-white-75);
  --wp--preset--color--white-50: var(--color-white-50);
  --wp--preset--color--white-25: var(--color-white-25);
  --wp--preset--color--white-12: var(--color-white-12);
  --wp--preset--color--white-7: var(--color-white-7);
  --wp--preset--color--orange-93-up-solid: var(--color-orange-93-up-solid);
  --wp--preset--color--orange-75-up-solid: var(--color-orange-75-up-solid);
  --wp--preset--color--orange-50-up-solid: var(--color-orange-50-up-solid);
  --wp--preset--color--orange-25-up-solid: var(--color-orange-25-up-solid);
  --wp--preset--color--orange-12-up-solid: var(--color-orange-12-up-solid);
  --wp--preset--color--orange-7-up-solid: var(--color-orange-7-up-solid);
  --wp--preset--color--orange-93-down-solid: var(--color-orange-93-down-solid);
  --wp--preset--color--orange-75-down-solid: var(--color-orange-75-down-solid);
  --wp--preset--color--orange-50-down-solid: var(--color-orange-50-down-solid);
  --wp--preset--color--orange-25-down-solid: var(--color-orange-25-down-solid);
  --wp--preset--color--orange-12-down-solid: var(--color-orange-12-down-solid);
  --wp--preset--color--orange-7-down-solid: var(--color-orange-7-down-solid);
  --wp--preset--color--orange-93: var(--color-orange-93);
  --wp--preset--color--orange-75: var(--color-orange-75);
  --wp--preset--color--orange-50: var(--color-orange-50);
  --wp--preset--color--orange-25: var(--color-orange-25);
  --wp--preset--color--orange-12: var(--color-orange-12);
  --wp--preset--color--orange-7: var(--color-orange-7);

  --wp--preset--font-family--geist: var(--font-geist);
  --wp--preset--font-family--geist-mono: var(--font-geist-mono);
  --wp--preset--font-family--mono: var(--font-geist-mono);
  --wp--preset--font-family--geist-pixel: var(--font-geist-pixel);

  --wp--preset--font-size--body-small: var(--font-size-body-small);
  --wp--preset--font-size--body: var(--font-size-body);
  --wp--preset--font-size--callout-small: var(--font-size-callout-small);
  --wp--preset--font-size--callout-medium: var(--font-size-callout-medium);
  --wp--preset--font-size--callout-large: var(--font-size-callout-large);
  --wp--preset--font-size--display: var(--font-size-display);

  --wp--preset--spacing--0: var(--spacing-0);
  --wp--preset--spacing--30: var(--spacing-30);
  --wp--preset--spacing--40: var(--spacing-40);
  --wp--preset--spacing--50: var(--spacing-50);
  --wp--preset--spacing--60: var(--spacing-60);
  --wp--preset--spacing--70: var(--spacing-70);
  --wp--preset--spacing--80: var(--spacing-80);
  --wp--preset--spacing--90: var(--spacing-90);
  --wp--preset--spacing--100: var(--spacing-100);
  --wp--preset--spacing--110: var(--spacing-110);

  --wp--custom--spacing--0: var(--spacing-0);
  --wp--custom--spacing--3xs: var(--spacing-3xs);
  --wp--custom--spacing--2xs: var(--spacing-2xs);
  --wp--custom--spacing--xs: var(--spacing-xs);
  --wp--custom--spacing--s: var(--spacing-s);
  --wp--custom--spacing--m: var(--spacing-m);
  --wp--custom--spacing--l: var(--spacing-l);
  --wp--custom--spacing--xl: var(--spacing-xl);
  --wp--custom--spacing--2xl: var(--spacing-2xl);
  --wp--custom--spacing--3xl: var(--spacing-3xl);

  --wp--custom--radius--none: var(--radius-none);
  --wp--custom--radius--button: var(--radius-button);
  --wp--custom--radius--tag: var(--radius-tag);
  --wp--custom--radius--badge: var(--radius-badge);
  --wp--custom--radius--card: var(--radius-card);
  --wp--custom--radius--sm: var(--radius-sm);
  --wp--custom--radius--md: var(--radius-md);

  --wp--custom--border-width--hairline: var(--border-width-hairline);
  --wp--custom--border-width--standard: var(--border-width-standard);
  --wp--custom--border-width--thick: var(--border-width-thick);

  --wp--custom--layout--content: var(--width-content);
  --wp--custom--layout--wide: var(--width-wide);
  --wp--custom--layout--narrow: var(--width-narrow);
}

body {
  font-family: var(--font-geist);
  background-color: var(--color-white);
  color: var(--color-black);
  margin: 0;
}

/* Base Link Styles: eliminate default browser and WordPress core underlines */
a,
a:where(:not(.wp-element-button)) {
  text-decoration: none;
}

/* Blueprint Grid Background Pattern (Dark & Light) */
.blueprint-grid-dark {
  background-color: var(--color-black);
  background-image: radial-gradient(rgba(255, 249, 247, 0.08) 1px, transparent 1px);
  background-size: 16px 16px;
}

.blueprint-grid-light,
.blueprint-grid {
  background-color: var(--color-white);
  background-size: 24px 24px;
  background-image: 
    linear-gradient(to right, rgba(6, 5, 5, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(6, 5, 5, 0.06) 1px, transparent 1px);
}

/* Technical Specification Badges & Tags */
.badge-spec {
  font-family: var(--font-geist-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Hairline borders matching Figma tokens */
.border-schematic {
  border: 1px solid var(--color-black-12-solid);
}

.border-schematic-subtle {
  border: 1px solid var(--color-black-7-solid);
}

.border-schematic-dark {
  border: 1px solid var(--color-black-75-solid);
}

/* Interactive Philosophy Cards */
.philosophy-card {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.philosophy-card.is-active {
  background-color: var(--color-black) !important;
  color: var(--color-white) !important;
  border-color: var(--color-orange) !important;
}

.philosophy-card.is-active .philosophy-title {
  color: var(--color-white) !important;
}

.philosophy-card.is-active .philosophy-num {
  color: var(--color-orange) !important;
}

.philosophy-card.is-active .philosophy-body {
  display: block !important;
  color: var(--color-black-25-solid) !important;
}

.philosophy-card:not(.is-active) .philosophy-body {
  display: none;
}

/* ==========================================================================
   Header & Navigation (Figma Nodes 167:1810, 167:1811, 167:1994)
   ========================================================================== */

/* Overall Site Header Shell */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background-color: #060505;
  border-bottom: 1px solid var(--color-black-93-solid);
}

/* 1. Top Credential Bar (Figma Node 167:1810) */
.top-credential-bar {
  background-color: #060505;
  color: #FFF9F7;
  font-family: var(--font-geist-mono);
  font-size: 12px;
  line-height: 16px;
  border-bottom: 1px solid var(--color-black-93-solid);
  padding: 0;
  box-sizing: border-box;
  width: 100%;
}

.top-credential-bar__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 6px 48px;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.top-credential-bar__left,
.top-credential-bar__right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.top-credential-item {
  color: #FFF9F7;
  white-space: nowrap;
}

.top-credential-phone {
  color: #FD5404;
  font-family: var(--font-geist-mono);
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.top-credential-phone:hover {
  color: #FD6016;
}

/* 2. Main Navigation Bar (Figma Node 167:1811 & 167:1994) */
.site-navbar {
  background-color: #060505;
  width: 100%;
  box-sizing: border-box;
}

.site-navbar__inner {
  max-width: 1440px;
  margin: 0 auto;
  height: 88px;
  padding: 24px 48px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logo */

/* Desktop Nav Links */

/* Nav Action Buttons */
.site-nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* Hamburger Button (Hidden on Desktop) */

/* Mobile Drawer (Hidden on Desktop) */

/* ==========================================================================
   Responsive Navigation (Breakpoint: <= 1024px, Figma Node 167:1994)
   ========================================================================== */
@media (max-width: 1024px) {
  /* Preheader Credential Bar: adapt padding and hide optional accreditation on <= 1024px */
  .top-credential-bar {
    padding: 0;
  }

  .top-credential-bar__inner {
    padding: 6px 20px;
    gap: 12px;
  }

  .top-credential-item--accreditation {
    display: none;
  }

  /* Compact Navbar Height 72px */
  .site-navbar__inner {
    height: 72px;
    padding: 16px 20px;
  }

  /* Show Hamburger Button */

  /* Compact Logo on mobile */

  /* Hide Desktop Nav Links */

  /* Hide Secondary CTA from mobile bar per Figma Node 167:1994 */

  /* Compact Primary CTA (128px width, "Request quote", no arrow) */

  /* Mobile Drawer Menu */
}

/* ==========================================================================
   Preheader Credential Bar: Tablet Portrait and Below (<= 834px)
   Per Figma spec: hide everything but the Geebung location and phone number
   ========================================================================== */
@media (max-width: 834px) {
  .top-credential-bar {
    padding: 0;
  }

  .top-credential-bar__inner {
    padding: 6px 16px;
    justify-content: center;
    gap: 0;
  }

  /* Hide licence, ABN, and accreditations */
  .top-credential-bar__left {
    display: none !important;
  }

  /* Center Geebung location and phone number */
  .top-credential-bar__right {
    justify-content: center;
    width: 100%;
    gap: 12px;
  }
}

@media (max-width: 360px) {
  .top-credential-bar {
    padding: 0;
  }

  .top-credential-bar__inner {
    font-size: 11px;
    padding: 6px 8px;
  }

  .top-credential-bar__right {
    gap: 8px;
  }
}

/* Container query support for preview iframe / responsive containers */
@container (max-width: 1024px) {
  /* Preheader Credential Bar: adapt padding and hide optional accreditation on <= 1024px */
  .top-credential-bar {
    padding: 0;
  }

  .top-credential-bar__inner {
    padding: 6px 20px;
    gap: 12px;
  }

  .top-credential-item--accreditation {
    display: none;
  }

  .site-navbar__inner {
    height: 72px;
    padding: 16px 20px;
  }
}

/* ==========================================================================
   Preheader Credential Bar Container Queries (Preview Workshop Support)
   Tablet Portrait and Below (<= 834px): hide everything but Geebung HQ & Phone
   ========================================================================== */
@container (max-width: 834px) {
  .top-credential-bar {
    padding: 0;
  }

  .top-credential-bar__inner {
    padding: 6px 16px;
    justify-content: center;
    gap: 0;
  }

  /* Hide licence, ABN, and accreditations */
  .top-credential-bar__left {
    display: none !important;
  }

  /* Center Geebung location and phone number */
  .top-credential-bar__right {
    justify-content: center;
    width: 100%;
    gap: 12px;
  }
}

@container (max-width: 360px) {
  .top-credential-bar {
    padding: 0;
  }

  .top-credential-bar__inner {
    font-size: 11px;
    padding: 6px 8px;
  }

  .top-credential-bar__right {
    gap: 8px;
  }
}

/* ==========================================================================
   Hero Header (Figma Node 162:1673 — Reverted Schematic Grid & Container)
   ========================================================================== */

.hero-cinematic-container,
section.hero-cinematic-container,
div.hero-cinematic-container {
  position: relative;
  background-color: #060505;
  color: #FFF9F7;
  overflow: hidden;
  box-sizing: border-box;
  padding: clamp(64px, 7vw, 112px) clamp(24px, 6vw, 144px) !important;
  border-bottom: 1px solid var(--color-black-75-solid, #292524);
}

.hero-bg-photo,
figure.hero-bg-photo,
figure.hero-bg-photo img,
img.hero-bg-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  z-index: 1;
  margin: 0 !important;
}

/* Fade only the img — applying opacity to the figure too compounds it (0.18 × 0.18 ≈ 3%) */
figure.hero-bg-photo {
  opacity: 1;
}

figure.hero-bg-photo img,
img.hero-bg-photo {
  opacity: 0.12;
}

/* Persistent Schematic 45deg Dot Grid Overlay for Hero Header */
.hero-cinematic-container::before {
  content: "";
  position: absolute;
  inset: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 2;
  background-image: radial-gradient(circle, #FD5404 1.5px, transparent 1.5px);
  background-size: 16px 16px;
  background-position: 0 0;
  mask-image: linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.75) 18%,
    rgba(0, 0, 0, 0) 38%,
    rgba(0, 0, 0, 0) 62%,
    rgba(0, 0, 0, 0.75) 82%,
    rgba(0, 0, 0, 0.95) 100%
  );
  -webkit-mask-image: linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.75) 18%,
    rgba(0, 0, 0, 0) 38%,
    rgba(0, 0, 0, 0) 62%,
    rgba(0, 0, 0, 0.75) 82%,
    rgba(0, 0, 0, 0.95) 100%
  );
}

.hero-content-wrap {
  position: relative;
  z-index: 3;
  width: 100%;
}

/* Hero CTA Buttons */
.hero-cta-buttons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  align-items: center !important;
  margin-top: 32px !important;
}

.hero-cta-buttons a {
  text-decoration: none !important;
}

/* Philosophy Stack Structure */
.hero-philosophy-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 420px;
  margin-left: auto;
}

.hero-philosophy-item {
  display: flex;
  flex-direction: column;
  border-left: 2px solid rgba(253, 84, 4, 0.25);
  padding: 8px 0 8px 18px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
}

.hero-philosophy-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-philosophy-num {
  font-family: var(--font-geist-mono);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: rgba(253, 84, 4, 0.75);
  transition: color 0.25s ease;
}

.hero-philosophy-title {
  font-family: var(--font-geist-mono);
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 400;
  line-height: 1.25;
  color: #FFF9F7;
  margin: 0;
  letter-spacing: -0.02em;
  transition: color 0.25s ease;
}

/* Desktop Hover Interaction (min-width: 1025px): Expand text smoothly on hover */
@media (min-width: 1025px) {
  .hero-philosophy-desc {
    font-family: var(--font-geist-mono);
    font-size: 0.875rem;
    line-height: 1.65;
    color: #C1BFC0;
    margin: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-4px);
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.25s ease,
                transform 0.25s ease,
                margin-top 0.25s ease;
  }

  .hero-philosophy-item:hover {
    border-left-color: #FD5404;
    background-color: rgba(253, 84, 4, 0.05);
    padding-left: 22px;
  }

  .hero-philosophy-item:hover .hero-philosophy-num {
    color: #FD5404;
  }

  .hero-philosophy-item:hover .hero-philosophy-title {
    color: #FD5404;
  }

  .hero-philosophy-item:hover .hero-philosophy-desc {
    max-height: 120px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 10px;
  }
}

/* Tablet & Mobile (max-width: 1024px): Heading-Only Version & Left Alignment */
@media (max-width: 1024px) {
  .hero-cinematic-container .wp-block-columns,
.hero-content-wrap .wp-block-columns {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 40px !important;
  }

  .hero-cinematic-container .wp-block-column,
.hero-content-wrap .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: flex-start !important;
    text-align: left !important;
  }

  .hero-philosophy-container {
    margin-left: 0 !important;
    margin-right: auto !important;
    max-width: 576px !important;
    width: 100% !important;
    gap: 20px !important;
    margin-top: 0 !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .hero-philosophy-item {
    border-left: 2px solid rgba(253, 84, 4, 0.4) !important;
    padding: 6px 0 6px 16px !important;
    width: 100% !important;
    align-self: flex-start !important;
    text-align: left !important;
  }

  /* Strictly hide description text on tablet & mobile */
  .hero-philosophy-desc {
    display: none !important;
  }

  .hero-cinematic-container,
section.hero-cinematic-container,
div.hero-cinematic-container {
    padding: 64px 24px !important;
  }

  .hero-philosophy-title {
    font-size: clamp(26px, 6vw, 36px) !important;
    text-align: left !important;
  }
}

@media (max-width: 640px) {
  .hero-cinematic-container,
section.hero-cinematic-container,
div.hero-cinematic-container {
    padding: 48px 16px !important;
  }

  .hero-cta-buttons {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 320px !important;
    gap: 12px !important;
  }
}

/* Container query support for nested/preview environments */
@container (max-width: 1024px) {
  .hero-cinematic-container,
section.hero-cinematic-container,
div.hero-cinematic-container {
    padding: 64px 24px !important;
  }

  .hero-cinematic-container .wp-block-columns,
.hero-content-wrap .wp-block-columns {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 40px !important;
  }

  .hero-cinematic-container .wp-block-column,
.hero-content-wrap .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: flex-start !important;
    text-align: left !important;
  }

  .hero-philosophy-container {
    margin-left: 0 !important;
    margin-right: auto !important;
    max-width: 576px !important;
    width: 100% !important;
    gap: 20px !important;
    margin-top: 0 !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .hero-philosophy-item {
    border-left: 2px solid rgba(253, 84, 4, 0.4) !important;
    padding: 6px 0 6px 16px !important;
    width: 100% !important;
    align-self: flex-start !important;
    text-align: left !important;
  }

  .hero-philosophy-desc {
    display: none !important;
  }

  .hero-philosophy-title {
    font-size: clamp(26px, 6vw, 36px) !important;
    text-align: left !important;
  }
}

@container (max-width: 640px) {
  .hero-cinematic-container,
section.hero-cinematic-container,
div.hero-cinematic-container {
    padding: 48px 16px !important;
  }

  .hero-cta-buttons {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 320px !important;
    gap: 12px !important;
  }
}

/* ==========================================================================
   Modular Schematic Card Component (Figma Node 166:1787 / 135:2162)
   ========================================================================== */

/* Section Container */
.section-separates {
  background-color: #060505;
  color: #FFF9F7;
  padding: clamp(32px, 3.5vw, 48px) clamp(24px, 6vw, 144px);
  box-sizing: border-box;
  width: 100%;
}

.section-separates__inner {
  max-width: 1152px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.section-separates__title {
  font-family: var(--font-geist);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  line-height: 1.25;
  color: #FFF9F7;
  margin: 0 0 24px 0;
  letter-spacing: -0.02em;
}

/* Schematic Grid */
.schematic-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  box-sizing: border-box;
}

/* Base Card */
.schematic-card {
  position: relative;
  background-color: transparent;
  border: none;
  padding: 20px;
  box-sizing: border-box;
  transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
}

.schematic-card:hover {
  background-color: rgba(253, 84, 4, 0.03);
}

/* Vertical Variant (layout=vert) */
.schematic-card--vert {
  flex-direction: column;
  gap: 16px;
  justify-content: flex-start;
}

.schematic-card--vert .schematic-card__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Horizontal Variant (layout=horiz) */
.schematic-card--horiz {
  flex-direction: row;
  gap: 20px;
  align-items: flex-start;
}

.schematic-card--horiz .schematic-card__header {
  flex-shrink: 0;
  width: 52px;
}

/* Card Elements (Supporting Boolean Toggles) */
.schematic-card__icon,
.schematic-card figure.schematic-card__icon {
  display: inline-flex;
  align-items: center;
  color: #FD5404;
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 !important;
}

.schematic-card--vert .schematic-card__icon,
.schematic-card--vert figure.schematic-card__icon {
  height: 64px;
  max-width: 80px;
  margin-bottom: 4px !important;
}

.schematic-card--horiz .schematic-card__icon,
.schematic-card--horiz figure.schematic-card__icon {
  width: 52px;
  height: 52px;
}

.schematic-card__icon img,
.schematic-card figure.schematic-card__icon img {
  width: auto;
  height: auto;
  max-height: 56px;
  display: block;
  object-fit: contain;
}

.schematic-card__digit {
  font-family: var(--font-geist-mono);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  color: #FD5404;
  margin: 0;
}

.schematic-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.schematic-card__head {
  font-family: var(--font-geist-mono);
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 400;
  line-height: 1.25;
  color: #FFF9F7;
  letter-spacing: -0.02em;
  margin: 0;
}

.schematic-card__subhead {
  font-family: var(--font-geist-mono);
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 400;
  line-height: 1.35;
  color: #FFF9F7;
  margin: 0;
  letter-spacing: -0.01em;
}

.schematic-card__desc {
  font-family: var(--font-geist);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: #C1BFC0;
  margin: 0;
}

/* Responsive Grid Breakpoints */
@media (max-width: 1024px) {
  .schematic-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .schematic-card-grid {
    grid-template-columns: 1fr;
  }
  .schematic-card {
    padding: 20px 16px;
  }
}

/* Container query support for preview iframe */
@container (max-width: 1024px) {
  .schematic-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container (max-width: 640px) {
  .schematic-card-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Modular Schematic Card Component (Figma Nodes 173:1854 / 24:242)
   Supports all 9 Boolean Options:
   1. header | 2. subheader | 3. label | 4. ICON | 5. img top |
   6. img background | 7. tag grid | 8. cta 1 | 9. cta 2
   ========================================================================== */

/* Section Shells */
.section-capability,
.section-featured-work {
  background-color: #060505;
  color: #FFF9F7;
  padding: clamp(32px, 3.5vw, 48px) clamp(24px, 6vw, 144px);
  box-sizing: border-box;
  width: 100%;
  position: relative;
  border-bottom: 1px solid var(--color-black-75-solid);
}

.section-inner-1152 {
  max-width: 1152px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.section-heading-48 {
  font-family: var(--font-geist);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  line-height: 1.25;
  color: #FFF9F7;
  margin: 0 0 20px 0;
  letter-spacing: -0.02em;
}

/* Section Header Split (Title + Subtitle + Action Button) */
.section-header-split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 24px;
}

.section-header-split__titles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.section-header-split__title {
  font-family: var(--font-geist);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  color: #FFF9F7;
  margin: 0;
  letter-spacing: -0.02em;
}

.section-header-split__subtitle {
  font-family: var(--font-geist);
  font-size: 1rem;
  line-height: 1.5;
  color: #C1BFC0;
  margin: 0;
}

/* 2-Column Responsive Card Grid (Frame 14) */
.modular-cards-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  width: 100%;
  box-sizing: border-box;
}

/* Base Modular Card Container */
.schematic-modular-card {
  position: relative;
  background-color: #060505;
  border: 0px solid transparent !important;
  border-width: 0px !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Core capabilities and schematic modular cards: 0px border width across all viewports & states */
.schematic-modular-card,
.schematic-modular-card:hover,
.schematic-modular-card:focus-within,
.schematic-modular-card:active {
  border: 0px solid transparent !important;
  border-width: 0px !important;
  box-shadow: none !important;
}

.section-capability .schematic-modular-card,
.section-capability .schematic-modular-card:hover,
.section-capability .schematic-modular-card:focus-within,
.section-capability .schematic-modular-card:active,
#services .schematic-modular-card,
#services .schematic-modular-card:hover,
#services .schematic-modular-card:focus-within,
#services .schematic-modular-card:active,
#section-capability .schematic-modular-card,
#section-capability .schematic-modular-card:hover,
#section-capability .schematic-modular-card:focus-within,
#section-capability .schematic-modular-card:active {
  border: 0px solid transparent !important;
  border-width: 0px !important;
  box-shadow: none !important;
}

/* Top Media Header Frame (img top) */
.modular-card__top-media {
  width: 100%;
  height: 260px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(253, 84, 4, 0.12);
  background-color: #181717;
  flex-shrink: 0;
}

.modular-card__top-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.35s ease;
}

.schematic-modular-card:hover .modular-card__top-img {
  transform: scale(1.02);
}

/* Card Body */
.modular-card__body {
  position: relative;
  padding: 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  box-sizing: border-box;
}

/* Atmospheric Background Image & Gradient (img background) */
.modular-card__bg-photo,
figure.modular-card__bg-photo,
.modular-card__bg-photo img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 0.22 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: opacity 0.3s ease !important;
}

.schematic-modular-card:hover .modular-card__bg-photo,
.schematic-modular-card:hover figure.modular-card__bg-photo img {
  opacity: 0.28 !important;
}

/* Card Content Container (Above Background Overlays) */
.modular-card__content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}

/* Icon (ICON) */
.modular-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  color: #FD5404;
  margin-bottom: 16px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.modular-card__icon svg {
  width: 32px;
  height: 32px;
  display: block;
}

/* Header Title (header) */
.modular-card__title {
  font-family: var(--font-geist);
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 700;
  line-height: 1.25;
  color: #FFF9F7;
  margin: 0 0 12px 0;
  letter-spacing: -0.02em;
}

/* Subheader Title (subheader) */
.modular-card__subheader {
  font-family: var(--font-geist-mono);
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 500;
  line-height: 1.3;
  color: #FFF9F7;
  margin: 0 0 12px 0;
  letter-spacing: -0.01em;
}

/* Description Text (label) */
.modular-card__desc {
  font-family: var(--font-geist-mono);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: #C1BFC0;
  margin: 0 0 24px 0;
}

/* Tag Grid (tag grid) */
.modular-card__tag-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0 0 24px 0;
}

.modular-card__tag {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(253, 84, 4, 0.4);
  padding: 10px 12px;
  background: rgba(6, 5, 5, 0.5);
  box-sizing: border-box;
}

.modular-card__tag-icon {
  color: #FD5404;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.modular-card__tag-icon svg {
  width: 18px;
  height: 18px;
}

.modular-card__tag-text {
  font-family: var(--font-geist);
  font-size: 14px;
  font-weight: 700;
  color: #FFF9F7;
  line-height: 1.25;
  margin: 0;
}

/* Action Buttons Row (HorizontalBorder) */
.modular-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  border-top: 1px solid rgba(253, 84, 4, 0.25);
  padding-top: 24px;
  margin-top: auto;
}

/* ==========================================================================
   9 Discrete Boolean Visibility Modifiers
   ========================================================================== */
.schematic-modular-card.hide-header .modular-card__title { display: none !important; }
.schematic-modular-card.hide-subheader .modular-card__subheader { display: none !important; }
.schematic-modular-card.hide-label .modular-card__desc { display: none !important; }
.schematic-modular-card.hide-icon .modular-card__icon { display: none !important; }
.schematic-modular-card.hide-img-top .modular-card__top-media { display: none !important; }
.schematic-modular-card.hide-img-bg .modular-card__bg-photo { display: none !important; }
.schematic-modular-card.hide-tag-grid .modular-card__tag-grid { display: none !important; }

/* ==========================================================================
   Responsive Breakpoints for Modular Cards (<= 1024px & container queries)
   ========================================================================== */
@media (max-width: 1024px) {
  .modular-cards-grid-2col {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .modular-card__body {
    padding: 24px 20px;
  }

  .modular-card__top-media {
    height: 220px;
  }

  .modular-card__tag-grid {
    grid-template-columns: 1fr;
  }

  .section-header-split {
    flex-direction: column;
    align-items: flex-start;
  }
}

@container (max-width: 1024px) {
  .modular-cards-grid-2col {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .modular-card__body {
    padding: 24px 20px;
  }

  .modular-card__top-media {
    height: 220px;
  }

  .modular-card__tag-grid {
    grid-template-columns: 1fr;
  }

  .section-header-split {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   Logo Strip / Head Contractor Trust Strip (Figma Node 167:2038)
   ========================================================================== */

/* Outer Section Wrapper */
.logo-strip {
  background-color: var(--color-black); /* #060505 */
  border-bottom: 1px solid var(--color-black-93-solid); /* #181717 */
  padding: 24px clamp(24px, 6vw, 144px);
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

/* Inner Centered Container */
.logo-strip__inner {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

/* Eyebrow Label */
.logo-strip__eyebrow {
  font-family: var(--font-geist-mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-black-50-solid); /* #828282 */
  text-align: center;
  margin: 0 0 16px 0;
}

/* 6-Column Grid */
.logo-strip__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  align-items: center;
  width: 100%;
}

/* Individual Logo Item (No boxes, no background, no padding) */
.logo-strip__item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0px !important;
  height: 54px;
  min-height: 54px;
  padding: 0;
  box-sizing: border-box;
}

/* Base Logo Image Styling */

/* Optical Proportional Balance per Logo (+12%) */
.logo-strip__img--coles {
  max-height: 38px;
}

.logo-strip__img--brc {
  max-height: 49px;
}

.logo-strip__img--woolworths {
  max-height: 47px;
}

.logo-strip__img--besix {
  max-height: 36px;
}

.logo-strip__img--mcnab {
  max-height: 45px;
}

.logo-strip__img--suncorp {
  max-height: 27px;
}

/* ==========================================================================
   Logo Strip: Tablet Intermediate (<= 834px)
   Maintain 6 logos with compact spacing (+12%)
   ========================================================================== */
@media (max-width: 834px) {
  .logo-strip {
    padding: 20px 20px;
  }

  .logo-strip__grid {
    gap: 10px;
  }

  .logo-strip__item {
    height: 50px;
    min-height: 50px;
    padding: 0;
  }

  .logo-strip__img--woolworths {
    max-height: 40px;
  }

  .logo-strip__img--brc {
    max-height: 43px;
  }

  .logo-strip__img--suncorp {
    max-height: 22px;
  }
}

@container (max-width: 834px) {
  .logo-strip {
    padding: 20px 20px;
  }

  .logo-strip__grid {
    gap: 10px;
  }

  .logo-strip__item {
    height: 50px;
    min-height: 50px;
    padding: 0;
  }

  .logo-strip__img--woolworths {
    max-height: 40px;
  }

  .logo-strip__img--brc {
    max-height: 43px;
  }

  .logo-strip__img--suncorp {
    max-height: 22px;
  }
}

/* ==========================================================================
   Logo Strip: Mobile (<= 640px)
   Constraint: Restrict strictly to 3 logos (Coles, Brisbane Racing Club, Woolworths) (+12%)
   ========================================================================== */
@media (max-width: 640px) {
  .logo-strip {
    padding: 16px 16px;
  }

  .logo-strip__eyebrow {
    font-size: 11px;
    margin-bottom: 12px;
  }

  .logo-strip__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  /* Hide BESIX Watpac, McNab, Suncorp Stadium on mobile */
  .logo-strip__item--desktop-only {
    display: none !important;
  }

  .logo-strip__item {
    height: 50px;
    min-height: 50px;
    padding: 0;
  }

  .logo-strip__img--coles {
    max-height: 29px;
  }

  .logo-strip__img--brc {
    max-height: 40px;
  }

  .logo-strip__img--woolworths {
    max-height: 38px;
  }
}

@container (max-width: 640px) {
  .logo-strip {
    padding: 16px 16px;
  }

  .logo-strip__eyebrow {
    font-size: 11px;
    margin-bottom: 12px;
  }

  .logo-strip__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  /* Hide BESIX Watpac, McNab, Suncorp Stadium on mobile */
  .logo-strip__item--desktop-only {
    display: none !important;
  }

  .logo-strip__item {
    height: 50px;
    min-height: 50px;
    padding: 0;
  }

  .logo-strip__img--coles {
    max-height: 29px;
  }

  .logo-strip__img--brc {
    max-height: 40px;
  }

  .logo-strip__img--woolworths {
    max-height: 38px;
  }
}

/* ==========================================================================
   Logo Strip: Ultra-compact Mobile (<= 360px) (+12%)
   ========================================================================== */
@media (max-width: 360px) {
  .logo-strip {
    padding: 24px 12px;
  }

  .logo-strip__grid {
    gap: 6px;
  }

  .logo-strip__item {
    height: 40px;
    min-height: 40px;
    padding: 0;
  }

  .logo-strip__img--coles {
    max-height: 22px;
  }

  .logo-strip__img--brc {
    max-height: 31px;
  }

  .logo-strip__img--woolworths {
    max-height: 29px;
  }
}

@container (max-width: 360px) {
  .logo-strip {
    padding: 24px 12px;
  }

  .logo-strip__grid {
    gap: 6px;
  }

  .logo-strip__item {
    height: 40px;
    min-height: 40px;
    padding: 0;
  }

  .logo-strip__img--coles {
    max-height: 22px;
  }

  .logo-strip__img--brc {
    max-height: 31px;
  }

  .logo-strip__img--woolworths {
    max-height: 29px;
  }
}

/* ==========================================================================
   Why Energize - Zig-Zag Card Component & Set (Figma Nodes 173:2212 & 173:2305)
   Alternating proof cards: 'img left' and 'img right' variants
   ========================================================================== */

/* Outer Section */
.section-why-energize {
  background-color: #060505;
  color: #FFF9F7;
  padding: clamp(48px, 5.5vw, 64px) clamp(24px, 6vw, 144px);
  box-sizing: border-box;
  width: 100%;
  position: relative;
  border-bottom: 1px solid var(--color-black-75-solid);
}

/* Card Stack */
.zigzag-card-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 80px);
  width: 100%;
}

/* Base Card Container */
.zigzag-card {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
}

/* Direction Variants (Figma: direction='img left' | 'img right') */
.zigzag-card--img-left {
  flex-direction: row;
}

.zigzag-card--img-right {
  flex-direction: row-reverse;
}

/* Media Column (Figma: width 576px, height 360px, ratio 1.6) */
.zigzag-card__media {
  flex: 1 1 576px;
  max-width: 576px;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #060505;
  border-radius: 0 !important;
  flex-shrink: 0;
}

.zigzag-card__img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
}

/* Content Column (Figma Frame 40: width 552px) */
.zigzag-card__content {
  flex: 1 1 552px;
  max-width: 552px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
}

/* Header Frame (Figma Frame 39: 01/ + title + bottom border) */
.zigzag-card__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid rgba(253, 84, 4, 0.5);
  padding-bottom: 16px;
  margin-bottom: 20px;
  width: 100%;
}

/* Number Index (Figma Geist Pixel / Geist Mono 16px, letter-spacing 4px) */
.zigzag-card__index {
  font-family: var(--font-geist-mono);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.25em;
  color: #FD5404;
  display: block;
}

/* Title (Figma Geist Bold 32px, line-height 48px / 1.25) */
.zigzag-card__title {
  font-family: var(--font-geist);
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #FFF9F7;
  margin: 0;
}

/* Card Body (Figma Frame 32: itemSpacing 20px-32px) */
.zigzag-card__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

/* Description Text (Figma Geist 16px, line-height 28px / 1.75, color #C1BFC0) */
.zigzag-card__desc {
  font-family: var(--font-geist);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: #C1BFC0;
  margin: 0;
}

/* Testimonial Panel (Figma Text-on-panel: 7% orange fill, 12% orange border, 16px padding) */
.zigzag-card__panel {
  background-color: rgba(253, 84, 4, 0.07);
  border: 1px solid rgba(253, 84, 4, 0.12);
  border-left: 2px solid rgba(253, 84, 4, 0.6);
  padding: 16px;
  box-sizing: border-box;
  border-radius: 0 !important;
  margin-top: 4px;
}

.zigzag-card__panel-quote {
  font-family: var(--font-geist-mono);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: #FFF9F7;
  margin: 0 0 10px 0;
  font-style: normal;
}

.zigzag-card__panel-quote cite {
  font-family: var(--font-geist);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  color: #FD5404;
  font-style: normal;
  display: block;
}

/* CTA Row (Figma HorizontalBorder: 50% orange top border, pad 24px, 2 buttons) */
.zigzag-card__cta-row {
  border-top: 1px solid rgba(253, 84, 4, 0.5);
  padding-top: 24px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

/* Ghost Link Button */

/* Solid Orange Primary Button */

/* Modular Tag Grid (Supporting tags=true boolean option) */
.zigzag-card__tag-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.zigzag-card__tag {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(253, 84, 4, 0.5);
  padding: 10px 12px;
  background: rgba(6, 5, 5, 0.5);
  box-sizing: border-box;
}

.zigzag-card__tag-text {
  font-family: var(--font-geist);
  font-size: 13px;
  font-weight: 600;
  color: #FFF9F7;
  line-height: 1.25;
  margin: 0;
}

/* ==========================================================================
   Responsive Breakpoints for Zig-Zag Cards (<= 860px)
   Image stays strictly on top, text stacks neatly below with 2:1 crop
   ========================================================================== */
@media (max-width: 860px) {
  .section-why-energize {
    padding: clamp(36px, 5vw, 48px) 20px;
  }

  .zigzag-card-stack {
    gap: 48px;
  }

  .zigzag-card,
.zigzag-card--img-left,
.zigzag-card--img-right {
    flex-direction: column !important;
    gap: 20px;
  }

  .zigzag-card__media {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }

  .zigzag-card__img {
    aspect-ratio: 2 / 1;
    width: 100%;
    height: auto;
  }

  .zigzag-card__content {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }

  .zigzag-card__header {
    margin-bottom: 16px;
    padding-bottom: 12px;
  }

  .zigzag-card__cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
}

@container (max-width: 860px) {
  .section-why-energize {
    padding: clamp(36px, 5vw, 48px) 20px;
  }

  .zigzag-card-stack {
    gap: 48px;
  }

  .zigzag-card,
.zigzag-card--img-left,
.zigzag-card--img-right {
    flex-direction: column !important;
    gap: 20px;
  }

  .zigzag-card__media {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }

  .zigzag-card__img {
    aspect-ratio: 2 / 1;
    width: 100%;
    height: auto;
  }

  .zigzag-card__content {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }

  .zigzag-card__header {
    margin-bottom: 16px;
    padding-bottom: 12px;
  }

  .zigzag-card__cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
}

/* ==========================================================================
   Compliance Credentials Block (Figma Node 180:2442)
   Licences & Accreditations (Contractor Licence 70739 & Master Electricians)
   ========================================================================== */

/* Outer Section */
.section-credentials {
  background-color: #181717; /* Black 93 Solid */
  color: #FFF9F7;
  padding: clamp(48px, 5.5vw, 64px) clamp(24px, 6vw, 144px);
  box-sizing: border-box;
  width: 100%;
  position: relative;
  border-bottom: 1px solid rgba(253, 84, 4, 0.12);
}

/* Inner Layout */
.credentials-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: 1152px;
  margin: 0 auto;
}

/* Header Container */
.credentials-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  width: 100%;
}

/* Tag Badge (tag-2: 50% orange background, 2px radius, uppercase) */
.credentials-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background-color: rgba(253, 84, 4, 0.5);
  border-radius: 2px !important;
  font-family: var(--font-geist-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #FFF9F7;
}

/* Heading 2 (Figma: #FD5404 orange title) */
.credentials-title {
  font-family: var(--font-geist);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.5;
  color: #FD5404;
  margin: 0;
  letter-spacing: -0.01em;
  text-align: center;
}

/* 2-Column Grid */
.credentials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
}

/* Individual Credential Card */
.credential-card {
  background-color: transparent;
  border-left: 3px solid rgba(253, 84, 4, 0.5);
  border-top: none;
  border-right: none;
  border-bottom: none;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
  border-radius: 0 !important;
  transition: border-left-color 0.2s ease, background-color 0.2s ease;
}

.credential-card:hover {
  border-left-color: #FD5404;
  background-color: rgba(253, 84, 4, 0.04);
}

/* Eyebrow Label */
.credential-card__eyebrow {
  font-family: var(--font-geist-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #FFF9F7;
  opacity: 0.85;
  margin: 0;
}

/* Highlight Value (70739 / Master Electricians Australia) */
.credential-card__value {
  font-family: var(--font-geist-mono);
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 500;
  line-height: 1.3;
  color: #FFF9F7;
  margin: 0;
  letter-spacing: -0.01em;
}

/* Subtitle Authority */
.credential-card__authority {
  font-family: var(--font-geist);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: #FFF9F7;
  margin: 0;
}

/* Responsive Breakpoints (<= 768px) */
@media (max-width: 768px) {
  .section-credentials {
    padding: clamp(36px, 5vw, 48px) 20px;
  }

  .credentials-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .credential-card {
    padding: 12px 14px;
  }
}

@container (max-width: 768px) {
  .section-credentials {
    padding: clamp(36px, 5vw, 48px) 20px;
  }

  .credentials-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .credential-card {
    padding: 12px 14px;
  }
}

/* ==========================================================================
   Site Footer Component (Figma Node 173:1999)
   ========================================================================== */

/* Full-width Section & Template Part Wrapper */
.wp-block-template-part:has(.site-footer),
footer.wp-block-template-part,
.site-footer,
footer.site-footer,
div.site-footer {
  background-color: var(--color-black) !important; /* #060505 */
  color: var(--color-white) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  position: relative !important;
}

.site-footer,
footer.site-footer,
div.site-footer {
  border-top: 1px solid var(--color-black-93-solid) !important; /* #181717 */
  padding: 48px clamp(24px, 5vw, 144px) 36px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Inner Centered Container (Figma Frame 27 — 1152px Content Grid) */
.site-footer__inner {
  max-width: 1152px !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 4-Column Main Grid (Figma: 4 equal 260px columns with 36px gap) */
.site-footer__grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 36px !important;
  align-items: flex-start !important;
  margin-bottom: 40px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* General Column Flex */
.site-footer__col {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Corporate Brand Column */
.site-footer__brand {
  gap: 16px !important;
}

.site-footer__legal-entity {
  font-family: var(--font-geist-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--color-black-50-solid) !important; /* #828282 */
  margin: 0 !important;
  padding: 0 !important;
}

.site-footer__bio {
  font-family: var(--font-geist) !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: var(--color-black-50-solid) !important; /* #828282 */
  margin: 0 !important;
  padding: 0 !important;
  max-width: 280px !important;
}

/* Column Headings */
.site-footer__heading,
.site-footer h4.site-footer__heading {
  font-family: var(--font-geist-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 16px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--color-white) !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
}

/* Nav & Credential Lists (Strict reset against WP core ul/ol styles) */
.site-footer__nav-list,
.site-footer__cred-list,
.site-footer ul.site-footer__nav-list,
.site-footer ul.site-footer__cred-list {
  list-style: none !important;
  list-style-type: none !important;
  padding: 0 !important;
  padding-left: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Strict elimination of WP core underlines on all footer links */
.site-footer a,
.site-footer a:visited,
.site-footer a:hover,
.site-footer a:focus,
.site-footer a:active {
  text-decoration: none !important;
  text-decoration-line: none !important;
}

/* Brisbane HQ Column */
.site-footer__address {
  font-style: normal !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: var(--color-black-25-solid) !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
}

.site-footer__contact-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font-geist-mono) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  color: var(--color-black-25-solid) !important;
}

/* Footer CTA Button */
.site-footer__cta {
  margin-top: 14px !important;
}

/* Bottom Legal Bar */
.site-footer__bottom {
  border-top: 1px solid var(--color-black-93-solid) !important;
  padding-top: 24px !important;
  margin-top: 40px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.site-footer__copyright,
.site-footer__meta {
  font-family: var(--font-geist-mono) !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
  color: var(--color-black-50-solid) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   Responsive Breakpoints for Footer (<= 1024px & container queries)
   ========================================================================== */
@media (max-width: 1024px) {
  .site-footer,
footer.site-footer,
div.site-footer {
    padding: 40px 24px 28px 24px !important;
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 36px 32px !important;
    margin-bottom: 36px !important;
  }
}

@container (max-width: 1024px) {
  .site-footer,
footer.site-footer,
div.site-footer {
    padding: 40px 24px 28px 24px !important;
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 36px 32px !important;
    margin-bottom: 36px !important;
  }
}

/* ==========================================================================
   Responsive Breakpoints for Footer: Mobile (<= 640px & container queries)
   ========================================================================== */
@media (max-width: 640px) {
  .site-footer,
footer.site-footer,
div.site-footer {
    padding: 36px 16px 24px 16px !important;
  }

  .site-footer__grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    margin-bottom: 28px !important;
  }

  .site-footer__brand {
    gap: 12px !important;
  }

  .site-footer__bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding-top: 20px !important;
    margin-top: 28px !important;
  }
}

@container (max-width: 640px) {
  .site-footer,
footer.site-footer,
div.site-footer {
    padding: 36px 16px 24px 16px !important;
  }

  .site-footer__grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    margin-bottom: 28px !important;
  }

  .site-footer__brand {
    gap: 12px !important;
  }

  .site-footer__bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding-top: 20px !important;
    margin-top: 28px !important;
  }
}

/* ==========================================================================
   Subpage Header Banner (Figma Node 173:2191 & 238:1585 — Universal Non-Home Header)
   ========================================================================== */

.subpage-header {
  position: relative !important;
  background-color: #060505 !important;
  color: #FFF9F7 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 480px;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: clamp(64px, 8vw, 112px) clamp(24px, 6vw, 144px) !important;
  border-bottom: 1px solid var(--color-black-93-solid, #1c1917);
}

/* User-uploaded native background image support */
.subpage-header[style*="background-image"],
.subpage-header.has-background-image {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.subpage-header[style*="background-image"]::after,
.subpage-header.has-background-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 85% 75% at 50% 50%, rgba(6, 5, 5, 0.72) 0%, rgba(6, 5, 5, 0.88) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Atmospheric Photography Background */
.subpage-header [data-type="core/image"],
.subpage-header .wp-block[data-type="core/image"],
figure.subpage-header__bg-photo,
.subpage-header__bg-photo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

figure.subpage-header__bg-photo img,
img.subpage-header__bg-photo,
.subpage-header [data-type="core/image"] img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 0.28 !important;
  margin: 0 !important;
  display: block !important;
}

/* Atmospheric Vignette Overlay (Neutralized for Figma 238:1585 clean presentation) */

/* Orange Schematic Dot Grid Overlay (Figma Node 238:1585 — grids/8px, 2px dots, 8px gap, 10px step) */
.subpage-header::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='2' height='2' fill='%23FD5404'/%3E%3C/svg%3E");
  background-size: 10px 10px;
  -webkit-mask-image: linear-gradient(187.2deg, #000 0%, transparent 34.6%, transparent 87%, #000 100%);
  mask-image: linear-gradient(187.2deg, #000 0%, transparent 34.6%, transparent 87%, #000 100%);
}

/* Gutenberg Editor & Flow Container Alignment */
.editor-styles-wrapper .subpage-header > .block-editor-block-list__layout,
.subpage-header > .block-editor-block-list__layout {
  width: 100% !important;
  max-width: 1152px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  position: relative !important;
  z-index: 3 !important;
}

.subpage-header__content,
.subpage-header > .subpage-header__content,
.editor-styles-wrapper .subpage-header .subpage-header__content {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  max-width: 1152px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 24px !important;
  box-sizing: border-box !important;
}

.subpage-header__tag,
.subpage-header p.subpage-header__tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background-color: rgba(253, 84, 4, 0.5);
  border-radius: 2px;
  padding: 4px 8px;
  font-family: var(--font-geist-mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #FFF9F7;
  user-select: none;
  text-align: center !important;
}

.subpage-header__title,
.subpage-header h1.subpage-header__title {
  font-family: var(--font-geist, 'Geist', sans-serif);
  font-size: clamp(24px, 4.5vw, 60px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #FFF9F7;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  text-align: center !important;
  align-self: center !important;
  max-width: 1152px !important;
  width: 100% !important;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
}

.subpage-header__actions,
.subpage-header div.subpage-header__actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  max-width: 1152px !important;
  text-align: center !important;
}

.editor-styles-wrapper .subpage-header__actions > .block-editor-block-list__layout,
.subpage-header__actions > .block-editor-block-list__layout {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

@media (max-width: 640px) {
  .subpage-header {
    min-height: 420px;
    padding: 48px 16px !important;
    box-sizing: border-box;
    width: 100%;
    max-width: 100vw;
  }
  .subpage-header__content {
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 0 4px;
    margin: 0 auto !important;
    align-items: center !important;
  }
  .subpage-header__title {
    font-size: clamp(18px, 5vw, 28px) !important;
    line-height: 1.3 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    word-break: normal;
    overflow-wrap: break-word;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  .subpage-header__actions {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 320px !important;
    gap: 10px !important;
    box-sizing: border-box;
    margin: 8px auto 0 auto !important;
    align-self: center !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@container (max-width: 640px) {
  .subpage-header {
    min-height: 420px;
    padding: 48px 16px !important;
    box-sizing: border-box;
    width: 100%;
  }
  .subpage-header__content {
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 0 4px;
    margin: 0 auto !important;
    align-items: center !important;
  }
  .subpage-header__title {
    font-size: clamp(18px, 5vw, 28px) !important;
    line-height: 1.3 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    word-break: normal;
    overflow-wrap: break-word;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  .subpage-header__actions {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 320px !important;
    gap: 10px !important;
    box-sizing: border-box;
    margin: 8px auto 0 auto !important;
    align-self: center !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   CTA STRIP SYSTEM (Figma Nodes 173:1962 & 173:1980)
   ========================================================================== */

.cta-strip {
  position: relative !important;
  background-color: #BD4004 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 64px clamp(24px, 5vw, 144px) !important;
  margin: 0 !important;
}

/* Background Photo Overlay (Luminosity, warm industrial tone matching Figma) */
.cta-strip__bg-photo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  mix-blend-mode: luminosity !important;
  opacity: 0.28 !important;
  filter: contrast(110%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  margin: 0 !important;
}

/* 4px-gap (6px-step) 2px Square Dot Grid Overlay (#812D05 at subtle 35% opacity) */

/* Inner Content Container */
.cta-strip__inner {
  position: relative !important;
  z-index: 3 !important;
  max-width: 1152px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* --- Style 1: Capability Statement Download (Figma 173:1962) --- */
.cta-strip--capability .cta-strip__inner {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: clamp(32px, 5vw, 64px) !important;
}

.cta-strip__copy {
  flex: 1;
  max-width: 742px;
}

.cta-strip__title {
  font-family: var(--font-geist-mono) !important;
  font-size: clamp(24px, 2.5vw, 32px) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: #FFF9F7 !important;
  margin: 0 0 16px 0 !important;
  letter-spacing: -0.01em !important;
}

.cta-strip__desc {
  font-family: var(--font-geist) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #FFF9F7 !important;
  max-width: 576px !important;
  margin: 0 !important;
}

.cta-strip__preview-card {
  width: 266px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 24px !important;
}

.cta-strip__preview-img-wrap {
  width: 256px !important;
  height: 144px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(0, 0, 0, 0.25) !important;
}

.cta-strip__preview-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* --- Style 2: Contact & Quote (Figma 173:1980) --- */
.cta-strip--contact .cta-strip__inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 24px !important;
}

.cta-strip--contact .cta-strip__title {
  max-width: 960px !important;
  margin: 0 !important;
  text-align: center !important;
}

.cta-strip__actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

/* --- Universal Schematic CTA Buttons --- */

/* Outline White / Ghost Button (Figma outline variant: transparent background, white border, white text) */

/* Solid White Button & CTA Capability Download Button (Figma Node 238:1581) */

/* Universal Schematic Button Underline Prevention across all contexts */

/* Responsive Media Queries */
@media (max-width: 900px) {
  .cta-strip--capability .cta-strip__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 36px;
  }
  .cta-strip__preview-card {
    width: 100%;
    max-width: 320px;
  }
  .cta-strip__actions {
    flex-direction: column;
    width: 100%;
    max-width: 340px;
  }
}

@container (max-width: 900px) {
  .cta-strip--capability .cta-strip__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 36px;
  }
  .cta-strip__preview-card {
    width: 100%;
    max-width: 320px;
  }
  .cta-strip__actions {
    flex-direction: column;
    width: 100%;
    max-width: 340px;
  }
}

/* ==========================================================================
   Schematic Grid Matrix Background Elements (WYSIWYG Block Styles)
   ========================================================================== */

/* Top Right Matrix Overlay */
.is-style-matrix-top-right,
.has-matrix-top-right {
  position: relative !important;
  overflow: hidden !important;
}

.is-style-matrix-top-right::before,
.has-matrix-top-right::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: clamp(280px, 42vw, 680px) !important;
  height: clamp(280px, 42vw, 680px) !important;
  background-image: url('assets/images/matrix-grid-top-right.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: top right !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 0.85 !important;
}

/* Bottom Left Matrix Overlay */
.is-style-matrix-bottom-left,
.has-matrix-bottom-left {
  position: relative !important;
  overflow: hidden !important;
}

.is-style-matrix-bottom-left::after,
.has-matrix-bottom-left::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: clamp(280px, 42vw, 680px) !important;
  height: clamp(280px, 42vw, 680px) !important;
  background-image: url('assets/images/matrix-grid-bottom-left.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: bottom left !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 0.85 !important;
}

/* Dual Corner Matrix Overlay (Both Corners) */
.is-style-matrix-dual,
.has-matrix-dual {
  position: relative !important;
  overflow: hidden !important;
}

.is-style-matrix-dual::before,
.has-matrix-dual::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: clamp(280px, 42vw, 680px) !important;
  height: clamp(280px, 42vw, 680px) !important;
  background-image: url('assets/images/matrix-grid-top-right.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: top right !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 0.85 !important;
}

.is-style-matrix-dual::after,
.has-matrix-dual::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: clamp(280px, 42vw, 680px) !important;
  height: clamp(280px, 42vw, 680px) !important;
  background-image: url('assets/images/matrix-grid-bottom-left.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: bottom left !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 0.85 !important;
}

/* Ensure Inner Block Content Stays Above Matrix Overlays */
.is-style-matrix-top-right > *,
.is-style-matrix-bottom-left > *,
.is-style-matrix-dual > *,
.has-matrix-top-right > *,
.has-matrix-bottom-left > *,
.has-matrix-dual > * {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   404 Page (Circuit Interrupted)
   ========================================================================== */
.page-404-main {
  min-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(64px, 10vw, 120px) 24px;
  background-color: var(--color-black, #060505);
  box-sizing: border-box;
}

.page-404-inner {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.page-404-tag {
  font-family: var(--font-geist-mono, 'Geist Mono', monospace);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-orange, #FD5404);
  text-transform: uppercase;
  margin: 0;
}

.page-404-title {
  font-family: var(--font-geist, 'Geist', sans-serif);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 900;
  line-height: 1.1;
  color: #FFF9F7;
  margin: 0;
}

.page-404-desc {
  font-family: var(--font-geist-mono, 'Geist Mono', monospace);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #C1BFC0;
  margin: 0;
  max-width: 520px;
}

/* ==========================================================================
   Services Overview Blocks (Construction & Maintenance) - Figma 180:2465 & 180:2476
   ========================================================================== */

.section-services-overview {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  background-color: var(--color-black, #060505);
}

.services-overview__inner {
  position: relative;
  z-index: 2;
  max-width: 1152px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.services-overview__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 100%;
}

.services-overview__title {
  font-family: var(--font-geist, 'Geist', sans-serif) !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  color: #FFF9F6 !important;
  margin: 0 !important;
}

.services-overview__desc {
  font-family: var(--font-geist-mono, 'Geist Mono', monospace) !important;
  font-size: clamp(14px, 1.25vw, 16px) !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  letter-spacing: 0 !important;
  color: #FFF9F6 !important;
  margin: 0 !important;
  max-width: 820px;
}

/* 3-Column Schematic Services Grid (Figma Frame 52) */
.services-overview__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Service Card (Based on schematic-card--vert) */
.service-card {
  border: none !important;
  border-radius: 0 !important;
  padding: 20px;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: flex-start;
  transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.service-card:hover,
.service-card:focus-within {
  background-color: rgba(253, 84, 4, 0.03);
}

.service-card .schematic-card__header {
  margin-bottom: 0;
}

.service-card .schematic-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.service-card .schematic-card__subhead {
  font-family: var(--font-geist-mono, 'Geist Mono', monospace) !important;
  font-size: clamp(20px, 2vw, 24px) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: #FFF9F6 !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
}

/* Link-Only CTA */

/* Dot Grid Overlays */

.services-overview__dot-grid--left {
  mask-image: radial-gradient(circle 420px at 12% 100%, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: radial-gradient(circle 420px at 12% 100%, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
}

.services-overview__dot-grid--right {
  mask-image: radial-gradient(circle 360px at 88% 100%, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: radial-gradient(circle 360px at 88% 100%, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%);
}

/* Responsive Grid Breakpoints */
@media (max-width: 1024px) {
  .services-overview__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .services-overview__grid {
    grid-template-columns: 1fr;
  }
  .service-card {
    padding: 16px 0;
  }
}

/* Container query support for preview workbench and embeds */
@container (max-width: 1024px) {
  .services-overview__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container (max-width: 640px) {
  .services-overview__grid {
    grid-template-columns: 1fr;
  }
  .service-card {
    padding: 16px 0;
  }
}

/* ==========================================================================
   Service Detail: Heading Left, Copy Right Split - Figma 180:2994
   ========================================================================== */

.section-split-intro {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  background-color: var(--color-black, #060505);
}

.split-intro__inner {
  position: relative;
  z-index: 2;
  max-width: 1152px;
  margin: 0 auto;
}

.split-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

.split-intro__col-left {
  width: 100%;
}

.split-intro__heading {
  font-family: var(--font-geist, "Geist", sans-serif) !important;
  font-size: clamp(32px, 3.5vw, 48px) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  color: #FFF9F6 !important;
  margin: 0 !important;
}

.split-intro__col-right {
  width: 100%;
}

.split-intro__copy {
  font-family: var(--font-geist, "Geist", sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0;
  color: #FFF9F6;
  margin: 0;
}

.split-intro__copy p {
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0;
  color: #FFF9F6;
  margin: 0 0 16px 0;
}

.split-intro__copy p:last-child {
  margin-bottom: 0;
}

/* Atmospheric Dot Grid Overlay (Subtle Corner Ambient Glow) */

/* Responsive Breakpoints */
@media (max-width: 900px) {
  .split-intro__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@container (max-width: 900px) {
  .split-intro__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ==========================================================================
   16. SERVICE DETAIL: HOW WE DO IT & NUMBERED PROOFPOINT
   Figma Nodes 182:3003 (Section) & 182:3142 (Numbered Proofpoint Component)
   ========================================================================== */

.section-how-we-do-it {
  position: relative;
  width: 100%;
  background-color: var(--color-black, #060505);
  color: var(--color-paper-light, #FFF9F6);
  padding: clamp(48px, 5.5vw, 64px) clamp(24px, 6vw, 144px);
  box-sizing: border-box;
  overflow: hidden;
}

.how-we-do-it__inner {
  position: relative;
  z-index: 2;
  max-width: 1152px;
  margin: 0 auto;
  box-sizing: border-box;
}

.how-we-do-it__title {
  font-family: var(--font-geist, "Geist", sans-serif);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.5; /* 72px at 48px */
  letter-spacing: -0.01em;
  color: var(--color-paper-light, #FFF9F6);
  margin: 0 0 24px 0;
}

/* Atmospheric Dot Grid Overlay (Top right / upper center ambient orange glow) */

/* 3-Column Grid for Numbered Proofpoint Cards */
.numbered-proofpoint-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

/* Numbered Proofpoint Card Component (Figma Node 182:3142) */
.numbered-proofpoint {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Giant Dot-Matrix Numeral */
.numbered-proofpoint__number-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 112px;
  height: 88px;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  display: flex;
  align-items: flex-start;
}

/* Content Container (Frame 61: 34px left offset, 32px top padding, 16px gap) */
.numbered-proofpoint__content {
  position: relative;
  z-index: 2;
  margin-left: 34px;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

/* Title (Geist Mono Medium 24px / 31.2px) */
.numbered-proofpoint__title {
  font-family: var(--font-mono, "Geist Mono", monospace);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-orange-brand, #FD5404);
  margin: 0;
}

/* Body Copy (Geist Regular 16px / 28px) */
.numbered-proofpoint__copy {
  font-family: var(--font-geist, "Geist", sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0;
  color: var(--color-paper-light, #FFF9F6);
  margin: 0;
}

.numbered-proofpoint__copy p {
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: inherit;
  margin: 0 0 16px 0;
}

.numbered-proofpoint__copy p:last-child {
  margin-bottom: 0;
}

/* Responsive Breakpoints */
@media (max-width: 900px) {
  .numbered-proofpoint-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

@container (max-width: 900px) {
  .numbered-proofpoint-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* ================================================================= */
/* WORK SHOWCASE CARD COMPONENT (Image Left / Data Right Variation)  */
/* Replaces multi-page /work-detail with a high-impact 1-page format */
/* ================================================================= */

.section-work-showcase {
  background-color: #060505;
  color: #FFF9F7;
  padding: clamp(48px, 5.5vw, 64px) clamp(24px, 6vw, 144px);
  box-sizing: border-box;
  width: 100%;
  position: relative;
  border-bottom: 1px solid var(--color-black-75-solid, rgba(255, 255, 255, 0.08));
}

.work-showcase-header {
  margin-bottom: clamp(32px, 4vw, 48px);
  max-width: 1152px;
  margin-left: auto;
  margin-right: auto;
}

.work-showcase-header__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background-color: rgba(253, 84, 4, 0.12);
  border: 1px solid rgba(253, 84, 4, 0.35);
  border-radius: 2px !important;
  font-family: var(--wp--preset--font-family--mono, "Geist Mono", monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #FD5404;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.work-showcase-header__title {
  font-family: var(--wp--preset--font-family--geist, "Geist", sans-serif);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #FFF9F7;
  margin: 0 0 12px 0;
}

.work-showcase-header__subtitle {
  font-family: var(--wp--preset--font-family--geist, "Geist", sans-serif);
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 400;
  line-height: 1.6;
  color: #C1BFC0;
  margin: 0;
  max-width: 720px;
}

.work-card-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 48px);
  width: 100%;
  max-width: 1152px;
  margin: 0 auto;
}

/* Individual Work Card (Consistent Image Left / Data Right) */
.work-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background-color: #060505;
  border: 1px solid rgba(253, 84, 4, 0.2);
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  position: relative;
  transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-card:hover {
  border-color: rgba(253, 84, 4, 0.2) !important;
  box-shadow: none !important;
}

/* Left Column: Media / Photo (approx 44% - 48%) */
.work-card__media {
  flex: 0 0 clamp(320px, 45%, 520px);
  position: relative;
  overflow: hidden;
  background-color: #0c0a09;
  border-right: 1px solid rgba(253, 84, 4, 0.18);
  min-height: 360px;
  display: flex;
}

.work-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-card:hover .work-card__img {
  transform: scale(1.03);
}

/* Schematic Badge in Top-Left Corner of Photo */
.work-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(6, 5, 5, 0.88);
  border: 1px solid rgba(253, 84, 4, 0.45);
  border-radius: 2px !important;
  padding: 4px 10px;
  font-family: var(--wp--preset--font-family--mono, "Geist Mono", monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #FD5404;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  z-index: 2;
}

/* Right Column: Data, Logo, Narrative, 2-Col Tag Grid */
.work-card__content {
  flex: 1 1 auto;
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  background: #060505;
}

/* Top Header: 32px Logo + Location Meta + Project Title */
.work-card__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-bottom: 1px solid rgba(253, 84, 4, 0.2);
  padding-bottom: 18px;
  margin-bottom: 20px;
  width: 100%;
}

.work-card__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  min-height: 32px;
  width: 100%;
}

.work-card__logo-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
}

.work-card__logo-item,
.wp-block-image.work-card__logo-item {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  height: 32px !important;
  max-height: 32px !important;
}

.work-card__logo,
.work-card__logo-item img,
.wp-block-image.work-card__logo-item img {
  height: 32px !important;
  max-height: 32px !important;
  width: auto !important;
  max-width: 130px !important;
  object-fit: contain !important;
  object-position: left center !important;
  opacity: 0.88;
  display: block;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-card:hover .work-card__logo,
.work-card:hover .work-card__logo-item img {
  opacity: 1;
}

.work-card__logo:hover,
.work-card__logo-item:hover img {
  opacity: 1;
  transform: translateY(-1px);
}

.work-card__location {
  font-family: var(--wp--preset--font-family--mono, "Geist Mono", monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #94a3b8;
  text-transform: uppercase;
  white-space: nowrap;
  margin-left: auto;
}

.work-card__title {
  font-family: var(--wp--preset--font-family--geist, "Geist", sans-serif);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #FFF9F7;
  margin: 0;
}

/* Card Body Sections */
.work-card__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-grow: 1;
}

.work-card__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Section Label (Schematic Eyebrow) */
.work-card__label {
  font-family: var(--wp--preset--font-family--mono, "Geist Mono", monospace);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.14em;
  color: #FD5404;
  text-transform: uppercase;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.work-card__label::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: #FD5404;
  flex-shrink: 0;
}

/* Business Objective Narrative Copy */
.work-card__desc {
  font-family: var(--wp--preset--font-family--geist, "Geist", sans-serif);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #C1BFC0;
  margin: 0;
}

/* Services Used: 2-Column Tag Grid */
.work-card__tag-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 12px;
  margin-top: 4px;
}

.work-card__tag {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(253, 84, 4, 0.28);
  border-radius: 2px !important;
  background-color: rgba(253, 84, 4, 0.05);
  padding: 8px 10px;
  box-sizing: border-box;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-card__tag:hover {
  background-color: rgba(253, 84, 4, 0.14);
  border-color: rgba(253, 84, 4, 0.55);
}

.work-card__tag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: #FD5404;
}

.work-card__tag-icon svg {
  display: block;
  stroke: #FD5404;
}

.work-card__tag-text {
  font-family: var(--wp--preset--font-family--geist, "Geist", sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: #FFF9F7;
  line-height: 1.25;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Responsive Breakpoints: Stack to 1-column on mobile & tablet <= 880px */
@media (max-width: 880px) {
  .work-card {
    flex-direction: column;
  }
  .work-card__media {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-height: 240px;
    aspect-ratio: 16 / 10;
    border-right: none;
    border-bottom: 1px solid rgba(253, 84, 4, 0.18);
  }
  .work-card__content {
    padding: 22px 20px;
  }
  .work-card__tag-grid {
    grid-template-columns: 1fr;
  }
}

/* Container query responsiveness for local workbench frame */
@container (max-width: 880px) {
  .work-card {
    flex-direction: column;
  }
  .work-card__media {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-height: 240px;
    aspect-ratio: 16 / 10;
    border-right: none;
    border-bottom: 1px solid rgba(253, 84, 4, 0.18);
  }
  .work-card__content {
    padding: 22px 20px;
  }
  .work-card__tag-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   NATIVE BLOCK COMPONENTS
   Styles for the core blocks used by the header, footer and patterns
   (Buttons, Navigation, Image). Decorative layers are pseudo-elements so the
   markup stays 100% editable blocks.
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------ */
/* Default (no style) = solid orange. Styles: Outline, Outline + Download,
   White, White + Download, Outline White, Text Link. */
.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.wp-block-button {
  margin: 0;
}

.wp-block-button .wp-block-button__link {
  --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10m0 0L9 4m4 4L9 12'/%3E%3C/svg%3E");
  --btn-icon-color: currentColor;
  --btn-icon-shift: translateX(3px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 12px 16px;
  box-sizing: border-box;
  border: 1px solid var(--color-orange);
  border-radius: 2px;
  background-color: var(--color-orange);
  color: var(--color-black);
  font-family: var(--font-geist-mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.wp-block-button .wp-block-button__link::after {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  background-color: var(--btn-icon-color);
  -webkit-mask: var(--btn-icon) center / contain no-repeat;
  mask: var(--btn-icon) center / contain no-repeat;
  transition: transform 0.2s ease;
}

.wp-block-button .wp-block-button__link:hover {
  background-color: var(--color-orange-93-up, #FD6016);
  border-color: var(--color-orange-93-up, #FD6016);
  color: var(--color-black);
}

.wp-block-button .wp-block-button__link:hover::after {
  transform: var(--btn-icon-shift);
}

.wp-block-button .wp-block-button__link:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

/* Download icon variants */
.wp-block-button.is-style-outline-download .wp-block-button__link,
.wp-block-button.is-style-white-download .wp-block-button__link {
  --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v9m0 0l-3.5-3.5M8 11l3.5-3.5M3 14h10'/%3E%3C/svg%3E");
  --btn-icon-shift: translateY(2px);
}

/* Outline (orange border, light text) */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline-download .wp-block-button__link {
  --btn-icon-color: var(--color-orange);
  padding: 12px 16px;
  border: 1px solid rgba(253, 84, 4, 0.5);
  background-color: transparent;
  color: var(--color-white);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline-download .wp-block-button__link:hover {
  border-color: var(--color-orange);
  background-color: rgba(253, 84, 4, 0.12);
  color: var(--color-white);
}

/* White (solid) */
.wp-block-button.is-style-white .wp-block-button__link,
.wp-block-button.is-style-white-download .wp-block-button__link {
  --btn-icon-color: var(--color-orange);
  border-color: var(--color-white);
  background-color: var(--color-white);
  color: var(--color-black);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.wp-block-button.is-style-white .wp-block-button__link:hover,
.wp-block-button.is-style-white-download .wp-block-button__link:hover {
  border-color: #FFFFFF;
  background-color: #FFFFFF;
  color: var(--color-black);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Outline White */
.wp-block-button.is-style-outline-white .wp-block-button__link {
  border-color: rgba(255, 249, 247, 0.75);
  background-color: transparent;
  color: var(--color-white);
}

.wp-block-button.is-style-outline-white .wp-block-button__link:hover {
  border-color: var(--color-white);
  background-color: rgba(255, 249, 247, 0.12);
  color: #FFFFFF;
}

/* Text Link */
.wp-block-button.is-style-text-link .wp-block-button__link {
  height: auto;
  padding: 4px 0 0;
  border: none;
  background: none;
  color: var(--color-white);
}

.wp-block-button.is-style-text-link .wp-block-button__link:hover {
  background: none;
  color: var(--color-orange);
}

/* Contextual button placement */
.schematic-card__body .wp-block-buttons {
  margin-top: auto;
}

.service-card:hover .is-style-text-link .wp-block-button__link::after {
  transform: translateX(4px);
}

.schematic-modular-card.hide-cta1 .card-cta-primary,
.schematic-modular-card.hide-cta2 .card-cta-secondary {
  display: none !important;
}

.cta-strip__preview-card .wp-block-buttons,
.cta-strip__preview-card .wp-block-button {
  width: 100%;
  justify-content: center;
}

.cta-strip__preview-card .wp-block-button__link {
  width: 100%;
  max-width: 258px;
}

@media (max-width: 640px) {
  .hero-cta-buttons,
  .subpage-header__actions {
    flex-direction: column !important;
    align-items: stretch !important;
    max-width: 320px;
  }

  .zigzag-card__cta-row,
  .cta-strip__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-cta-buttons .wp-block-button__link,
  .subpage-header__actions .wp-block-button__link,
  .zigzag-card__cta-row .wp-block-button__link,
  .cta-strip__actions .wp-block-button__link {
    width: 100%;
    white-space: normal;
    text-align: center;
  }
}

/* --- Header ------------------------------------------------------------- */
header.wp-block-template-part:has(> .site-header) {
  position: sticky;
  top: 0;
  z-index: 100;
}

.admin-bar header.wp-block-template-part:has(> .site-header) {
  top: var(--wp-admin--admin-bar--height, 0px);
}

.site-header {
  position: relative;
}

.top-credential-bar p {
  margin: 0;
}

.top-credential-bar__left > .top-credential-item + .top-credential-item::before,
.top-credential-bar__right > .top-credential-item + .top-credential-item::before {
  content: "•";
  margin-right: 12px;
  color: var(--color-black-50-solid);
}

.top-credential-item strong {
  font-weight: 700;
}

.top-credential-phone a {
  color: var(--color-orange);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease;
}

.top-credential-phone a:hover {
  color: var(--color-orange-93-up, #FD6016);
}

.site-navbar__inner {
  gap: 24px;
}

.site-logo {
  margin: 0;
  flex-shrink: 0;
}

.site-logo img {
  display: block;
  width: auto !important;
  height: 40px;
  max-width: 150px;
}

.site-nav.wp-block-navigation {
  color: var(--color-white);
}

.site-nav.wp-block-navigation .wp-block-navigation__container {
  gap: 10px;
}

.site-nav.wp-block-navigation .wp-block-navigation-item__content {
  padding: 8px 12px;
  border-bottom: 2px solid transparent;
  color: var(--color-white);
  font-family: var(--font-geist);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.site-nav.wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--color-orange);
}

.site-nav.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
  border-bottom-color: var(--color-orange);
}

.site-nav.wp-block-navigation .wp-block-navigation__responsive-container-open,
.site-nav.wp-block-navigation .wp-block-navigation__responsive-container-close {
  color: var(--color-white);
}

.site-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
  padding: 24px 20px 32px;
  background-color: var(--color-black);
  color: var(--color-white);
}

.site-nav.wp-block-navigation .is-menu-open .wp-block-navigation__container {
  gap: 4px;
  width: 100%;
}

.site-nav.wp-block-navigation .is-menu-open .wp-block-navigation-item {
  width: 100%;
}

.site-nav.wp-block-navigation .is-menu-open .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-black-93-solid);
  font-size: 18px;
}

.site-nav.wp-block-navigation .is-menu-open .current-menu-item > .wp-block-navigation-item__content {
  color: var(--color-orange);
}

.site-nav-actions {
  flex-wrap: nowrap;
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  /* Core switches to the hamburger at 600px; the design switches at 1024px. */
  .site-nav.wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }

  .site-nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }

  .site-nav {
    order: -1;
  }

  .site-logo {
    margin: 0 auto;
  }

  .site-logo img {
    height: 32px;
    max-width: 120px;
  }

  .site-nav-actions > .site-nav-secondary {
    display: none;
  }

  .site-nav-primary .wp-block-button__link::after {
    display: none;
  }
}

/* --- Footer ------------------------------------------------------------- */
.site-footer p {
  margin: 0;
}

.site-footer__logo {
  margin: 0;
}

.site-footer__logo img {
  display: block;
  width: auto !important;
  height: 38px;
  max-width: 160px;
}

.site-footer__nav-list li,
.site-footer__cred-list li {
  margin: 0;
  padding: 0;
  color: var(--color-black-25-solid);
  font-size: 12px;
  line-height: 1.5;
  list-style: none;
}

.site-footer__cred-list li {
  font-family: var(--font-geist-mono);
}

.site-footer__cred-list strong {
  color: var(--color-white);
  font-weight: 700;
}

.site-footer__nav-list a,
.site-footer__contact-row a[href^="mailto:"] {
  color: var(--color-black-25-solid);
  transition: color 0.2s ease;
}

.site-footer__nav-list a:hover,
.site-footer__contact-row a[href^="mailto:"]:hover {
  color: var(--color-orange);
}

.site-footer__contact-row a[href^="tel:"] {
  color: var(--color-orange);
  font-weight: 700;
}

.site-footer__cta {
  margin-top: 14px;
}

/* --- Images inside components ------------------------------------------ */
.schematic-card__icon,
.numbered-proofpoint__number-wrap,
.logo-strip__item {
  margin: 0;
}

.service-card .schematic-card__icon img {
  display: block;
  width: auto;
  max-height: 36px;
  opacity: 0.5;
  transition: opacity 0.25s ease;
}

.service-card:hover .schematic-card__icon img,
.service-card:focus-within .schematic-card__icon img {
  opacity: 1;
}

.numbered-proofpoint__number-wrap img {
  display: block;
  width: auto;
  height: 88px;
  max-width: 112px;
  pointer-events: none;
  user-select: none;
}

.logo-strip__item img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: inherit;
  object-fit: contain;
  opacity: 0.82;
  transition: opacity 0.2s ease;
}

.logo-strip__item:hover img {
  opacity: 1;
}

.logo-strip__item { max-height: 43px; }
.logo-strip__img--coles { max-height: 38px; }
.logo-strip__img--brc { max-height: 49px; }
.logo-strip__img--woolworths { max-height: 47px; }
.logo-strip__img--besix { max-height: 36px; }
.logo-strip__img--mcnab { max-height: 45px; }
.logo-strip__img--suncorp { max-height: 27px; }

@media (max-width: 834px) {
  .logo-strip__item { max-height: 36px; }
  .logo-strip__img--woolworths { max-height: 40px; }
  .logo-strip__img--brc { max-height: 43px; }
}

.work-card__logo-item img {
  width: auto;
  height: 32px;
}

/* --- Decorative layers (formerly empty HTML divs) ----------------------- */
.modular-card__body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(6, 5, 5, 0.96) 20%, rgba(6, 5, 5, 0.75) 100%);
}

.schematic-modular-card.hide-img-bg .modular-card__body::after,
.schematic-modular-card:not(:has(.modular-card__bg-photo)) .modular-card__body::after {
  display: none;
}

.section-services-overview::before,
.section-split-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}


.section-services-overview::before,
.section-split-intro::before {
  background-image: radial-gradient(circle, #FD5404 1.5px, transparent 1.5px);
  background-size: 16px 16px;
}

.section-services-overview--construction::before {
  -webkit-mask-image: radial-gradient(circle 420px at 12% 100%, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(circle 420px at 12% 100%, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
}

.section-services-overview--maintenance::before {
  -webkit-mask-image: radial-gradient(circle 360px at 88% 100%, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(circle 360px at 88% 100%, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%);
}

.section-split-intro::before {
  -webkit-mask-image: radial-gradient(circle 380px at 90% 100%, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(circle 380px at 90% 100%, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
}

/* --- Service detail: photo-background panel sections --------------------- */
/* (Figma 182:3032 / 182:3055 — these sections previously had no styles.) */
.section-detail-panels {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  padding: clamp(64px, 8vw, 120px) clamp(24px, 6vw, 144px);
  background-color: var(--color-black);
  color: var(--color-white);
}

/* Background photo. !important + the data-type selectors are needed so the
   block editor's image wrappers don't turn it back into a normal inline image
   (same approach as .subpage-header__bg-photo). */
figure.section-detail-panels__bg,
.section-detail-panels__bg,
.section-detail-panels > .wp-block[data-type="core/image"],
.section-detail-panels > .block-editor-block-list__layout > .wp-block[data-type="core/image"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.section-detail-panels__bg img,
.section-detail-panels__bg .components-resizable-box__container,
.section-detail-panels > .wp-block[data-type="core/image"] img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 0.45;
}

/* Dark wash over the photo */
.section-detail-panels::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(6, 5, 5, 0.55), rgba(6, 5, 5, 0.8));
}

/* Subtle light dot grid that fades in towards the bottom (per Figma 182:3032 / 182:3055) */
.section-detail-panels::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='2' height='2' fill='%23FFF9F7' fill-opacity='0.35'/%3E%3C/svg%3E");
  background-size: 10px 10px;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 30%);
  mask-image: linear-gradient(to top, #000 0%, transparent 30%);
}

.section-detail-panels__inner {
  position: relative !important;
  z-index: 2 !important;
  max-width: 1152px;
  margin: 0 auto;
}

.section-detail-panels__title {
  margin: 0 0 32px;
  color: var(--color-white);
  font-family: var(--font-geist);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.3;
}

.section-detail-panels__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.text-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(24px, 3vw, 40px);
  box-sizing: border-box;
  border: 1px solid rgba(253, 84, 4, 0.5);
  background-color: rgba(23, 11, 5, 0.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.text-panel--white {
  border-color: rgba(255, 249, 247, 0.25);
  background-color: rgba(6, 5, 5, 0.8);
}

.text-panel__title {
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-geist-mono);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 500;
  line-height: 1.3;
}

.text-panel--orange .text-panel__title {
  color: var(--color-orange);
}

.text-panel__body p {
  margin: 0;
  color: var(--color-black-25-solid);
  font-size: 16px;
  line-height: 1.6;
}

.text-panel__body p + p {
  margin-top: 12px;
}

@media (max-width: 834px) {
  .section-detail-panels__grid {
    grid-template-columns: 1fr;
  }
}

/* --- Forms (contact / quote pages, Contact Form 7) ---------------------- */
.section-form {
  position: relative;
  box-sizing: border-box;
  padding: clamp(48px, 6vw, 96px) clamp(24px, 6vw, 144px);
  background-color: var(--color-black);
  color: var(--color-white);
}

.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
  max-width: 1152px;
  margin: 0 auto;
}

.form-layout__title {
  margin: 0 0 12px;
  color: var(--color-white);
  font-family: var(--font-geist);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.3;
}

.form-layout__intro {
  margin: 0 0 32px;
  color: var(--color-black-25-solid);
  font-size: 16px;
  line-height: 1.6;
}

.form-layout__placeholder {
  padding: 24px;
  border: 1px dashed rgba(253, 84, 4, 0.5);
  color: var(--color-orange);
  font-family: var(--font-geist-mono);
  font-size: 14px;
}

/* Info card (aside) */
.info-card {
  position: sticky;
  top: 180px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(24px, 3vw, 32px);
  box-sizing: border-box;
  border: 1px solid rgba(253, 84, 4, 0.35);
  background-color: var(--color-black-93-solid);
}

.info-card__title {
  margin: 0 0 8px;
  color: var(--color-white);
  font-family: var(--font-geist-mono);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
}

.info-card__label {
  margin: 16px 0 0;
  color: var(--color-black-50-solid);
  font-family: var(--font-geist-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 16px;
  text-transform: uppercase;
}

.info-card__text {
  margin: 0;
  color: var(--color-white);
  font-size: 15px;
  line-height: 1.6;
}

.info-card__text a {
  color: var(--color-white);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.info-card__text a:hover {
  color: var(--color-orange);
}

.info-card__text--phone a {
  color: var(--color-orange);
  font-family: var(--font-geist-mono);
  font-weight: 700;
}

.info-card__meta {
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 249, 247, 0.12);
  color: var(--color-black-50-solid);
  font-family: var(--font-geist-mono);
  font-size: 12px;
  line-height: 1.6;
}

.info-card__steps {
  margin: 0;
  padding-left: 20px;
  color: var(--color-black-25-solid);
  font-size: 15px;
  line-height: 1.6;
}

.info-card__steps li + li {
  margin-top: 12px;
}

.info-card__steps li::marker {
  color: var(--color-orange);
  font-family: var(--font-geist-mono);
  font-weight: 700;
}

.info-card__steps strong {
  color: var(--color-white);
}

.info-card__urgent {
  margin-top: 16px;
  padding: 16px;
  border-left: 3px solid var(--color-orange);
  background-color: rgba(253, 84, 4, 0.12);
}

.info-card__urgent .info-card__label {
  margin-top: 0;
  color: var(--color-white);
}

/* Form fields */
.energize-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.energize-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.energize-form .ef-section {
  margin: 12px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(253, 84, 4, 0.25);
  color: var(--color-orange);
  font-family: var(--font-geist-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.energize-form .ef-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.energize-form .ef-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.energize-form .ef-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.energize-form .ef-label,
.energize-form legend {
  margin: 0 0 8px;
  padding: 0;
  color: var(--color-white);
  font-family: var(--font-geist-mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.energize-form .ef-field > .ef-label {
  margin: 0;
}

.energize-form .ef-req {
  color: var(--color-orange);
}

.energize-form .ef-hint {
  margin: 0;
  color: var(--color-black-50-solid);
  font-size: 13px;
  line-height: 1.5;
}

.energize-form input[type="text"],
.energize-form input[type="email"],
.energize-form input[type="tel"],
.energize-form input[type="date"],
.energize-form select,
.energize-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid rgba(255, 249, 247, 0.16);
  border-radius: 2px;
  background-color: var(--color-black-93-solid);
  color: var(--color-white);
  font-family: var(--font-geist);
  font-size: 16px;
  line-height: 1.4;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.energize-form textarea {
  min-height: 160px;
  resize: vertical;
}

.energize-form select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FD5404' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: 14px;
}

.energize-form input::placeholder,
.energize-form textarea::placeholder {
  color: var(--color-black-50-solid);
}

.energize-form input:focus,
.energize-form select:focus,
.energize-form textarea:focus {
  border-color: var(--color-orange);
  outline: none;
  box-shadow: 0 0 0 3px rgba(253, 84, 4, 0.25);
}

/* Radio / checkbox lists */
.energize-form .wpcf7-radio,
.energize-form .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.energize-form .wpcf7-list-item {
  margin: 0;
}

.energize-form .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 249, 247, 0.16);
  border-radius: 2px;
  background-color: var(--color-black-93-solid);
  color: var(--color-white);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.energize-form .wpcf7-list-item label:hover {
  border-color: rgba(253, 84, 4, 0.6);
}

.energize-form .wpcf7-list-item label:has(input:checked) {
  border-color: var(--color-orange);
  background-color: rgba(253, 84, 4, 0.12);
}

.energize-form input[type="radio"],
.energize-form input[type="checkbox"] {
  margin: 0;
  accent-color: var(--color-orange);
}

/* Consent checkbox: plain, not a chip */
.energize-form .wpcf7-acceptance .wpcf7-list-item label {
  align-items: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-black-25-solid);
  font-size: 13px;
  line-height: 1.5;
}

.energize-form .wpcf7-acceptance .wpcf7-list-item label:has(input:checked) {
  background: none;
}

.energize-form .wpcf7-acceptance input {
  margin-top: 3px;
}

/* File upload */
.energize-form input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 16px;
  border: 1px dashed rgba(253, 84, 4, 0.5);
  border-radius: 2px;
  background-color: rgba(253, 84, 4, 0.05);
  color: var(--color-black-25-solid);
  font-family: var(--font-geist-mono);
  font-size: 13px;
  cursor: pointer;
}

.energize-form input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 12px;
  border: 1px solid var(--color-orange);
  border-radius: 2px;
  background: transparent;
  color: var(--color-white);
  font-family: var(--font-geist-mono);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* Submit (matches the primary button) */
.energize-form .ef-submit {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 8px 0 0;
}

.energize-form .wpcf7-submit {
  height: 44px;
  padding: 12px 20px;
  border: 1px solid var(--color-orange);
  border-radius: 2px;
  background-color: var(--color-orange);
  color: var(--color-black);
  font-family: var(--font-geist-mono);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.energize-form .wpcf7-submit:hover {
  border-color: var(--color-orange-93-up, #FD6016);
  background-color: var(--color-orange-93-up, #FD6016);
}

.energize-form .wpcf7-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Validation + response messages */
.energize-form .wpcf7-not-valid {
  border-color: #FF6B4A !important;
}

.wpcf7 .wpcf7-not-valid-tip {
  margin-top: 6px;
  color: #FF8A70;
  font-family: var(--font-geist-mono);
  font-size: 12px;
}

.wpcf7 form .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 16px;
  border: 1px solid var(--color-orange);
  border-radius: 2px;
  color: var(--color-white);
  font-size: 15px;
  line-height: 1.5;
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: #4FB286;
  background-color: rgba(79, 178, 134, 0.1);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  border-color: #FF6B4A;
  background-color: rgba(255, 107, 74, 0.08);
}

.wpcf7-spinner {
  background-color: var(--color-orange);
}

@media (max-width: 900px) {
  .form-layout {
    grid-template-columns: 1fr;
  }

  .info-card {
    position: static;
  }
}

@media (max-width: 640px) {
  .energize-form .ef-row {
    grid-template-columns: 1fr;
  }
}

/* --- CTA strip backgrounds ------------------------------------------------ */
/* The strip images are finished artwork (orange tint + dot grid baked in), so
   show them as-is: no fade, blend or extra dot overlay. !important + the
   data-type selectors keep the block editor from resizing the image inline. */
figure.cta-strip__bg-photo,
.cta-strip > .wp-block[data-type="core/image"],
.cta-strip > .block-editor-block-list__layout > .wp-block[data-type="core/image"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  pointer-events: none !important;
}

.cta-strip__bg-photo img,
.cta-strip__bg-photo .components-resizable-box__container,
.cta-strip > .wp-block[data-type="core/image"] img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* --- Plain modular cards (Energize core capabilities) --------------------- */
/* No card background, overlay or inner padding, so the card text lines up with
   the section heading. Add the class "modular-cards-grid-2col--plain" to any
   modular card grid to use this look. */
.modular-cards-grid-2col--plain {
  column-gap: clamp(32px, 5vw, 64px);
  margin-top: 32px;
}

.modular-cards-grid-2col--plain .schematic-modular-card {
  background: none;
  overflow: visible;
}

.modular-cards-grid-2col--plain .modular-card__body {
  padding: 0 !important;
  overflow: visible;
}

.modular-cards-grid-2col--plain .modular-card__body::after {
  display: none;
}

.site-footer__legal a {
  color: var(--color-black-50-solid);
  font-family: var(--font-geist-mono);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.site-footer__legal a:hover {
  color: var(--color-orange);
}

/* --- Service detail (simple): spacing for split intro sections ------------ */
/* The split intro had no padding of its own (only core's small has-background
   padding). Matches the "How we do it" section. */
.section-split-intro {
  padding: clamp(48px, 5.5vw, 64px) clamp(24px, 6vw, 144px);
}

/* Service page sections are all black; a thin rule separates them. */
.section-split-intro--outcome,
.section-service-reasons,
.section-process {
  border-top: 1px solid var(--color-black-93-solid);
}

/* --- Reasons why: 2-4 cards share the row evenly ------------------------- */
/* Add "schematic-card-grid--fit" to a schematic card grid so the cards fill
   the row whatever the count, instead of the fixed 3 columns. */
.schematic-card-grid--fit {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

@media (max-width: 640px) {
  .schematic-card-grid--fit {
    grid-template-columns: 1fr;
  }
}

/* --- Service process timeline -------------------------------------------- */
/* Steps number themselves with a CSS counter, so editors can duplicate,
   delete or reorder steps without touching the numbers. */
.section-process {
  position: relative;
  width: 100%;
  background-color: var(--color-black);
  color: var(--color-paper-light, #FFF9F6);
  padding: clamp(48px, 5.5vw, 64px) clamp(24px, 6vw, 144px);
  box-sizing: border-box;
}

.process__title {
  font-family: var(--font-geist);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--color-paper-light, #FFF9F6);
  margin: 0 0 32px 0;
}

.process-steps {
  counter-reset: process-step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 24px;
  width: 100%;
}

.process-step {
  counter-increment: process-step;
  position: relative;
  padding: 32px 0 0 0;
  border-top: 1px solid var(--color-orange-50, #FD540480);
  box-sizing: border-box;
}

/* Square node on the timeline */
.process-step::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  background-color: var(--color-orange, #FD5404);
}

.process-step::before {
  content: counter(process-step, decimal-leading-zero);
  display: block;
  font-family: var(--font-geist-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-orange, #FD5404);
  margin-bottom: 12px;
}

.process-step__title {
  font-family: var(--font-geist-mono);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-paper-light, #FFF9F6);
  margin: 0 0 12px 0;
}

.process-step p {
  font-family: var(--font-geist);
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-black-25-solid, #C1BFC0);
  margin: 0 0 12px 0;
}

.process-step p:last-child {
  margin-bottom: 0;
}

/* Below 900px the timeline runs down the left edge. */
@media (max-width: 900px) {
  .process-steps {
    grid-template-columns: 1fr;
  }

  .process-step {
    border-top: none;
    border-left: 1px solid var(--color-orange-50, #FD540480);
    padding: 0 0 40px 28px;
  }

  .process-step:last-child {
    padding-bottom: 0;
  }

  .process-step::after {
    top: 4px;
    left: -5px;
  }
}

/* --- Services by category ------------------------------------------------- */
.section-services-category {
  padding: clamp(48px, 5.5vw, 64px) clamp(24px, 6vw, 144px);
  border-top: 1px solid var(--color-black-93-solid);
}

/* Dot grid only as a soft glow in the bottom-left corner */
.section-services-category::before {
  -webkit-mask-image: radial-gradient(circle 420px at 8% 100%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(circle 420px at 8% 100%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
}

.services-overview__header .work-showcase-header__tag {
  align-self: flex-start;
  margin: 0 0 8px;
}

.service-card--detailed .schematic-card__desc {
  font-size: 15px;
}

/* Australian Standard reference above the card link */
.service-card__standard {
  font-family: var(--font-geist-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-black-50-solid);
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-black-93-solid);
}

/* --- Work: case study link on featured cards ------------------------------ */
.work-card__content > .wp-block-buttons {
  margin-top: 24px;
}

/* Photos added in the editor have no class, so size them from the figure. */
.work-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Work: completed projects grid ---------------------------------------- */
.section-work-completed {
  padding: clamp(48px, 5.5vw, 64px) clamp(24px, 6vw, 144px);
  border-top: 1px solid var(--color-black-93-solid);
}

.project-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.project-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border: 1px solid rgba(253, 84, 4, 0.2);
  box-sizing: border-box;
}

.project-card__meta {
  font-family: var(--font-geist-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-black-50-solid);
  margin: 0;
}

.project-card__title {
  font-family: var(--font-geist);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-white);
  margin: 0;
}

.project-card__desc {
  font-family: var(--font-geist);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-black-25-solid);
  margin: 0 0 8px;
}

.project-card .work-card__tag {
  align-self: flex-start;
  margin: auto 0 0;
  font-family: var(--font-geist-mono);
  font-size: 12px;
}

/* --- Case study ----------------------------------------------------------- */
.section-case-facts {
  padding: 32px clamp(24px, 6vw, 144px);
}

.case-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.case-facts__value {
  font-family: var(--font-geist);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-white);
  margin: 8px 0 0;
}

.section-case-services,
.section-case-gallery {
  padding: clamp(48px, 5.5vw, 64px) clamp(24px, 6vw, 144px);
  border-top: 1px solid var(--color-black-93-solid);
}

.case-services__tags {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.case-services__tags .work-card__tag {
  margin: 0;
  font-family: var(--font-geist);
  font-size: 14px;
  color: var(--color-white);
}

/* Simple 3-up grid (any number of photos), 1 column on mobile */
.wp-block-gallery.case-gallery {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px !important;
  margin: 0 0 48px !important;
}

.wp-block-gallery.case-gallery > figure.wp-block-image {
  width: auto !important;
  margin: 0 !important;
}

.wp-block-gallery.case-gallery img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover !important;
}

@media (max-width: 640px) {
  .wp-block-gallery.case-gallery {
    grid-template-columns: 1fr;
  }
}

.case-quote {
  margin: 0;
  padding: 0 0 0 24px;
  border-left: 2px solid var(--color-orange);
  max-width: 820px;
}

.case-quote p {
  font-family: var(--font-geist);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.45;
  color: var(--color-white);
  margin: 0 0 16px;
}

.case-quote cite {
  font-family: var(--font-geist-mono);
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0.04em;
  color: var(--color-black-50-solid);
}