/*
Theme Name: Wise ElecProTech
Theme URI: https://wiseelecprotech.com.au
Author: Wise ElecProTech
Description: Premium dark electrical, security and smart-tech contractor theme for Sydney-based Wise ElecProTech
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wise-elecprotech
*/

/* === Custom Properties === */
:root {
  --color-bg:          #030e20;
  --color-surface:     #0b1a2f;
  --color-surface-high:#152640;
  --color-primary:     #f8a826;
  --color-secondary:   #739aff;
  --color-tertiary:    #81ecff;
  --color-text:        #dae6ff;
  --color-text-muted:  #a0abc3;
  --color-border:      rgba(255,255,255,0.08);
  --radius-sm:         0.5rem;
  --radius-lg:         1rem;
}

/* === Base === */
*, *::before, *::after { box-sizing: border-box; }
body { background-color: var(--color-bg); color: var(--color-text); }
.wp-site-blocks > footer { margin-block-start: 0; }

/* === Header === */
.site-header {
  background: rgba(3,14,32,0.88) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.site-header .wp-block-site-title a,
.site-header .wp-block-site-title a:visited {
  font-family: 'Sora', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.25rem !important;
  color: var(--color-text) !important;
  text-decoration: none !important;
  letter-spacing: -0.01em;
}
.site-header .wp-block-navigation a {
  color: var(--color-text-muted) !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}
.site-header .wp-block-navigation a:hover { color: var(--color-primary) !important; }

/* === Section badges (Space Grotesk label) === */
.section-badge {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary) !important;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1rem !important;
}
.section-badge::before {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 2px;
  background: var(--color-primary);
  flex-shrink: 0;
}

.section-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
  color: var(--color-text) !important;
}
.section-subtitle {
  color: var(--color-text-muted) !important;
  max-width: 560px;
  margin-bottom: 3rem !important;
}

/* === Hero === */
.hero-section {
  background-color: var(--color-bg);
  position: relative;
  overflow: hidden;
  min-height: 90vh;
  display: flex;
  align-items: center;
}
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(248,168,38,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248,168,38,0.035) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}
.hero-section::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--color-surface));
  pointer-events: none;
  z-index: 1;
}
.hero-section > .wp-block-group__inner-container { position: relative; z-index: 2; }

/* Radial glow in hero */
.hero-glow {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248,168,38,0.08) 0%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.hero-badge {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-primary) !important;
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem !important;
}
.hero-badge::before, .hero-badge::after {
  content: '';
  display: block;
  width: 2.5rem; height: 1px;
  background: var(--color-primary);
  opacity: 0.5;
}

.hero-headline {
  font-size: clamp(2.5rem, 5vw, 4rem) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em;
  color: var(--color-text) !important;
  margin-bottom: 1.5rem !important;
}

.hero-subtext {
  font-size: 1.125rem !important;
  color: var(--color-text-muted) !important;
  max-width: 520px;
  margin-bottom: 2rem !important;
  line-height: 1.7;
}

/* Hero inline stats */
.hero-stats-row {
  display: flex !important;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2.5rem !important;
}
.hero-stat-item {
  font-size: 0.9375rem !important;
  color: var(--color-text-muted) !important;
  margin: 0 !important;
  line-height: 1.4;
}
.hero-stat-item strong {
  display: block;
  font-family: 'Sora', sans-serif;
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.1;
}

/* === Buttons === */
.btn-amber-glow .wp-block-button__link {
  background-color: var(--color-primary) !important;
  color: #1a1200 !important;
  font-weight: 700;
  border: none !important;
  box-shadow: 0 0 24px rgba(248,168,38,0.35);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}
.btn-amber-glow .wp-block-button__link:hover {
  box-shadow: 0 0 40px rgba(248,168,38,0.55);
  transform: translateY(-2px);
}

.btn-ghost-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.btn-ghost-outline .wp-block-button__link:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

.btn-link-amber .wp-block-button__link {
  background: transparent !important;
  color: var(--color-primary) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border: none !important;
  font-weight: 600;
  box-shadow: none !important;
  transition: letter-spacing 0.2s ease;
}
.btn-link-amber .wp-block-button__link:hover { letter-spacing: 0.02em; }

.btn-cta-dark .wp-block-button__link {
  background: #030e20 !important;
  color: var(--color-primary) !important;
  font-weight: 700;
  border: none !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-cta-dark .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.btn-ghost-dark .wp-block-button__link {
  background: transparent !important;
  color: #030e20 !important;
  border: 2px solid rgba(3,14,32,0.35) !important;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.btn-ghost-dark .wp-block-button__link:hover {
  background: rgba(3,14,32,0.08) !important;
  border-color: rgba(3,14,32,0.6) !important;
}

/* === Services === */
.services-section {
  background-color: var(--color-surface);
}

.service-card {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
  height: 100%;
}
.service-card:hover {
  border-color: var(--color-primary) !important;
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.service-icon-electrical,
.service-icon-security,
.service-icon-smart,
.service-icon-data {
  width: 3.5rem !important;
  height: 3.5rem !important;
  border-radius: 0.75rem;
  margin-bottom: 1.25rem !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.75rem;
  display: block;
}
.service-icon-electrical {
  background-color: rgba(248,168,38,0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f8a826'%3E%3Cpath d='M13 3L4 14h7l-2 7 9-11h-7l2-7z'/%3E%3C/svg%3E");
}
.service-icon-security {
  background-color: rgba(115,154,255,0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23739aff'%3E%3Cpath d='M12 2L3 7v6c0 4.97 3.87 9.42 9 10.93C17.13 22.42 21 17.97 21 13V7L12 2zm-1 13l-3-3 1.41-1.41L11 13.17l4.59-4.58L17 10l-6 6z'/%3E%3C/svg%3E");
}
.service-icon-smart {
  background-color: rgba(129,236,255,0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2381ecff'%3E%3Cpath d='M17 8C8 10 5.9 16.17 3.82 19.82L5.71 21l1-1.71A4.94 4.94 0 009 20a5 5 0 005-5 5 5 0 015-5V8zM9 18a3 3 0 01-2.83-2h.5A2.5 2.5 0 009 13.5v-.5a3 3 0 013 3A3 3 0 019 18z'/%3E%3C/svg%3E");
}
.service-icon-data {
  background-color: rgba(115,154,255,0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23739aff'%3E%3Cpath d='M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h16v2H4v-2z'/%3E%3C/svg%3E");
}

.service-card-title {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.75rem !important;
  color: var(--color-text) !important;
}
.service-card-desc {
  color: var(--color-text-muted) !important;
  font-size: 0.9375rem !important;
  line-height: 1.65 !important;
  flex-grow: 1;
  margin-bottom: 1.5rem !important;
}

/* === Stats Band === */
.stats-section {
  background: linear-gradient(160deg, #030e20 0%, #0b1a2f 50%, #030e20 100%);
  position: relative;
}
.stats-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(248,168,38,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248,168,38,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}
.stat-item {
  text-align: center;
  padding: 2rem 1rem;
  border-right: 1px solid var(--color-border);
  position: relative;
  z-index: 1;
}
.stat-item:last-child { border-right: none; }
.stat-number {
  font-family: 'Sora', sans-serif !important;
  font-size: clamp(2.25rem, 3.5vw, 3rem) !important;
  font-weight: 800 !important;
  color: var(--color-primary) !important;
  line-height: 1.1 !important;
  margin-bottom: 0.5rem !important;
}
.stat-label {
  font-size: 0.9375rem !important;
  color: var(--color-text-muted) !important;
  margin: 0 !important;
}

/* === Why Choose Us === */
.why-section { background-color: var(--color-surface-high); }

.trust-item {
  background: rgba(255,255,255,0.02) !important;
  border-left: 3px solid var(--color-primary) !important;
  border-radius: var(--radius-sm) !important;
  padding: 1.25rem !important;
  margin-bottom: 1rem !important;
}
.trust-check {
  flex-shrink: 0;
  width: 1.5rem !important;
  height: 1.5rem !important;
  border-radius: 50%;
  background: rgba(248,168,38,0.15);
  color: var(--color-primary) !important;
  font-size: 0.8rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700 !important;
  margin: 0 !important;
}
.trust-heading {
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.25rem !important;
  color: var(--color-text) !important;
}
.trust-desc {
  color: var(--color-text-muted) !important;
  font-size: 0.9rem !important;
  margin: 0 !important;
}

/* === Projects === */
.projects-section { background-color: var(--color-bg); }

.project-card {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease !important;
  height: 100%;
}
.project-card:hover {
  transform: translateY(-4px);
  border-color: rgba(248,168,38,0.4) !important;
}
.project-visual {
  height: 180px !important;
  width: 100%;
  position: relative;
  flex-shrink: 0;
  min-height: 180px;
}
.project-visual-1 {
  background: linear-gradient(135deg, #0f2040 0%, #1a3058 50%, #0a1628 100%);
}
.project-visual-1::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 25% 50%, rgba(248,168,38,0.3) 0%, transparent 55%);
}
.project-visual-2 {
  background: linear-gradient(135deg, #0a1e38 0%, #0d2545 100%);
}
.project-visual-2::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 75% 35%, rgba(115,154,255,0.35) 0%, transparent 55%);
}
.project-visual-3 {
  background: linear-gradient(135deg, #061226 0%, #102038 100%);
}
.project-visual-3::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 65%, rgba(129,236,255,0.25) 0%, transparent 55%);
}
.project-card-content { padding: 1.5rem; }
.project-category-badge {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary) !important;
  margin-bottom: 0.75rem !important;
}
.project-title {
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
  color: var(--color-text) !important;
}
.project-desc {
  color: var(--color-text-muted) !important;
  font-size: 0.9rem !important;
  margin: 0 !important;
}

/* === Testimonials === */
.testimonials-section { background-color: var(--color-surface); }

.testimonial-card {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  position: relative;
  transition: border-color 0.3s ease !important;
  height: 100%;
  overflow: hidden;
}
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: 0.5rem; right: 1.5rem;
  font-size: 6rem;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.12;
  font-family: 'Sora', sans-serif;
  pointer-events: none;
}
.testimonial-card:hover { border-color: rgba(248,168,38,0.3) !important; }
.testimonial-stars {
  color: var(--color-primary) !important;
  font-size: 0.9375rem !important;
  letter-spacing: 0.1em;
  margin-bottom: 1rem !important;
}
.testimonial-quote {
  color: var(--color-text) !important;
  font-size: 0.9375rem !important;
  line-height: 1.7 !important;
  font-style: italic;
  margin-bottom: 1.5rem !important;
  flex-grow: 1;
}
.testimonial-author {
  font-weight: 600 !important;
  color: var(--color-text) !important;
  font-size: 0.9375rem !important;
  margin-bottom: 0.2rem !important;
}
.testimonial-role {
  color: var(--color-text-muted) !important;
  font-size: 0.8125rem !important;
  margin: 0 !important;
}

/* === CTA Band === */
.cta-band {
  background: linear-gradient(135deg, #f8a826 0%, #e89b14 60%, #df9305 100%) !important;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta-band::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
}
.cta-band-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
  font-weight: 800 !important;
  color: #030e20 !important;
  margin-bottom: 0.75rem !important;
  position: relative; z-index: 1;
}
.cta-band-subtitle {
  color: rgba(3,14,32,0.65) !important;
  font-size: 1.0625rem !important;
  margin-bottom: 2rem !important;
  position: relative; z-index: 1;
}

/* === Footer === */
.site-footer {
  background-color: #020b18 !important;
  border-top: 1px solid var(--color-border);
}
.footer-brand-name a {
  font-family: 'Sora', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.25rem !important;
  color: var(--color-text) !important;
  text-decoration: none !important;
}
.footer-tagline {
  color: var(--color-text-muted) !important;
  font-size: 0.9rem !important;
  max-width: 240px;
  line-height: 1.65 !important;
  margin-top: 0.75rem !important;
  margin-bottom: 0 !important;
}
.footer-col-heading {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary) !important;
  margin-bottom: 1.25rem !important;
}
.footer-list { margin: 0 !important; padding-left: 0 !important; list-style: none !important; }
.footer-list li { margin-bottom: 0.625rem !important; }
.footer-list li a {
  color: var(--color-text-muted) !important;
  font-size: 0.9rem !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}
.footer-list li a:hover { color: var(--color-primary) !important; }
.footer-contact-item {
  color: var(--color-text-muted) !important;
  font-size: 0.9rem !important;
  margin-bottom: 0.5rem !important;
}
.footer-divider {
  border: none !important;
  border-top: 1px solid var(--color-border) !important;
  margin: 2.5rem 0 1.5rem !important;
}
.footer-copyright {
  color: var(--color-text-muted) !important;
  font-size: 0.8125rem !important;
  margin: 0 !important;
}

/* === Page title section === */
.page-title-section {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.page-heading {
  font-size: clamp(1.75rem, 3.5vw, 3rem) !important;
  font-weight: 800 !important;
  color: var(--color-text) !important;
  margin: 0 !important;
}

/* === Equal-cards layout === */
.equal-cards > .wp-block-column {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
}
.equal-cards > .wp-block-column > .wp-block-group {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.equal-cards .cta-bottom {
  margin-top: auto;
  justify-content: flex-start;
}

/* === Hover lift === */
.hover-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.hover-lift:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 32px rgba(0,0,0,0.25) !important;
}

/* === Scroll-triggered animations === */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.6s ease forwards;
}
.stagger-children > *:nth-child(1) { animation-delay: 0.08s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.18s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.28s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.38s; }

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Pulse glow for service icons */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248,168,38,0.3); }
  50%       { box-shadow: 0 0 0 8px rgba(248,168,38,0); }
}
.pulse-glow { animation: pulseGlow 2.5s ease-in-out infinite; }

/* === prefers-reduced-motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .animate-on-scroll,
  .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* === Editor: keep animated content visible === */
.editor-styles-wrapper .animate-on-scroll,
.editor-styles-wrapper .stagger-children > * {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* === Extended service icons (all 9 services) === */
.service-icon-ev,
.service-icon-ac,
.service-icon-smoke,
.service-icon-comms,
.service-icon-automation,
.service-icon-lighting {
  width: 3.5rem !important;
  height: 3.5rem !important;
  border-radius: 0.75rem;
  margin-bottom: 1.25rem !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.75rem;
  display: block;
}
.service-icon-ev {
  background-color: rgba(248,168,38,0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f8a826'%3E%3Cpath d='M20 12.5h-2.28l-1.72-5H5L3.28 12.5H2v5h1v2h2v-2h14v2h2v-2h1v-5h-2zM7 16c-.83 0-1.5-.67-1.5-1.5S6.17 13 7 13s1.5.67 1.5 1.5S7.83 16 7 16zm10 0c-.83 0-1.5-.67-1.5-1.5S16.17 13 17 13s1.5.67 1.5 1.5S17.83 16 17 16zm-9.5-5 1.17-3.5h8.66L18.5 11h-11z'/%3E%3C/svg%3E");
}
.service-icon-ac {
  background-color: rgba(129,236,255,0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2381ecff'%3E%3Cpath d='M22 11h-4.17l3.24-3.24-1.41-1.42L15 11h-2V9l4.66-4.66-1.42-1.41L13 6.17V2h-2v4.17L7.76 2.93 6.34 4.34 11 9v2H9L4.34 6.34 2.93 7.76 6.17 11H2v2h4.17l-3.24 3.24 1.41 1.42L9 13h2v2l-4.66 4.66 1.42 1.41L11 17.83V22h2v-4.17l3.24 3.24 1.42-1.41L13 15v-2h2l4.66 4.66 1.41-1.42L17.83 13H22v-2z'/%3E%3C/svg%3E");
}
.service-icon-smoke {
  background-color: rgba(115,154,255,0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23739aff'%3E%3Cpath d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5S10.5 3.17 10.5 4v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-6-3c-.83 0-1.5-.67-1.5-1.5S11.17 11 12 11s1.5.67 1.5 1.5S12.83 13 12 13z'/%3E%3C/svg%3E");
}
.service-icon-comms {
  background-color: rgba(248,168,38,0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f8a826'%3E%3Cpath d='M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8 3 3 3-3a4.237 4.237 0 0 0-6 0zm-4-4 2 2a7.074 7.074 0 0 1 10 0l2-2C15.14 9.14 8.87 9.14 5 13z'/%3E%3C/svg%3E");
}
.service-icon-automation {
  background-color: rgba(129,236,255,0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2381ecff'%3E%3Cpath d='M12 15.5a3.5 3.5 0 0 1-3.5-3.5A3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5m7.43-2.92c.04-.3.07-.61.07-.93s-.03-.64-.07-1l2.04-1.6c.18-.14.23-.41.12-.62l-1.93-3.34c-.12-.21-.38-.28-.6-.21l-2.41.97c-.5-.38-1.04-.7-1.62-.94l-.36-2.55c-.04-.24-.24-.41-.48-.41h-3.86c-.24 0-.43.17-.47.41l-.36 2.55c-.58.24-1.12.56-1.61.94l-2.42-.97c-.22-.07-.48 0-.6.21L2.46 9.48c-.11.21-.07.47.13.62l2.04 1.6c-.04.36-.08.71-.08 1.08s.04.72.08 1.08l-2.04 1.6c-.18.14-.24.41-.13.62l1.93 3.33c.12.22.38.28.6.21l2.42-.97c.5.38 1.03.7 1.61.94l.36 2.56c.04.24.23.41.47.41h3.86c.24 0 .44-.17.47-.41l.36-2.56c.58-.24 1.12-.56 1.62-.94l2.41.97c.22.07.48 0 .6-.21l1.93-3.33c.11-.21.06-.48-.12-.62l-2.04-1.6z'/%3E%3C/svg%3E");
}
.service-icon-lighting {
  background-color: rgba(248,168,38,0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f8a826'%3E%3Cpath d='M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7z'/%3E%3C/svg%3E");
}

/* === Process timeline === */
.process-section { background-color: var(--color-surface-high); }
.process-step {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  transition: border-color 0.3s ease, transform 0.3s ease !important;
}
.process-step:hover {
  border-color: rgba(248,168,38,0.4) !important;
  transform: translateX(4px);
}
.process-number {
  font-family: 'Sora', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--color-primary) !important;
  min-width: 3rem;
  line-height: 1 !important;
  margin: 0 !important;
}
.process-title {
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
  margin-bottom: 0.25rem !important;
}
.process-desc {
  color: var(--color-text-muted) !important;
  font-size: 0.9rem !important;
  margin: 0 !important;
}

/* === Contact page === */
.contact-hero { background-color: var(--color-surface); }
.contact-info-card {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
}
.contact-info-label {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary) !important;
  margin-bottom: 0.375rem !important;
}
.contact-info-value {
  font-size: 1rem !important;
  color: var(--color-text) !important;
  margin: 0 !important;
  font-weight: 500 !important;
}
.contact-info-value a {
  color: var(--color-text) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}
.contact-info-value a:hover { color: var(--color-primary) !important; }

/* === Filter pills (projects page) === */
.filter-pills-row {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-bottom: 2.5rem !important;
}
.filter-pill {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 1.25rem !important;
  border-radius: 9999px !important;
  border: 1px solid var(--color-border) !important;
  background: rgba(255,255,255,0.03) !important;
  color: var(--color-text-muted) !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
  cursor: default;
}
.filter-pill.active-pill {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  background: rgba(248,168,38,0.08) !important;
}

/* === About page === */
.about-hero { background-color: var(--color-surface); }
.credential-item {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--color-border) !important;
  border-left: 3px solid var(--color-primary) !important;
  border-radius: var(--radius-sm) !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 0.75rem !important;
}
.credential-label {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary) !important;
  margin-bottom: 0.2rem !important;
}
.credential-value {
  color: var(--color-text-muted) !important;
  font-size: 0.875rem !important;
  margin: 0 !important;
}

/* === Service detail pages === */
.service-hero { background-color: var(--color-surface); }
.feature-item {
  padding: 0.875rem 0 !important;
  border-bottom: 1px solid var(--color-border) !important;
}
.feature-item:last-child { border-bottom: none !important; }
.feature-check {
  flex-shrink: 0;
  width: 1.5rem !important;
  height: 1.5rem !important;
  border-radius: 50%;
  background: rgba(248,168,38,0.15);
  color: var(--color-primary) !important;
  font-size: 0.8rem !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-weight: 700 !important;
  margin: 0 !important;
}
.feature-text {
  color: var(--color-text) !important;
  font-size: 0.9375rem !important;
  margin: 0 !important;
}

/* === Responsive === */
@media (max-width: 768px) {
  .hero-section { min-height: 70vh; }
  .stat-item { border-right: none; border-bottom: 1px solid var(--color-border); }
  .hero-stats-row { gap: 1.25rem; }
  .filter-pills-row { gap: 0.375rem; }
}