/*
Theme Name: TechAssist
Theme URI: https://techassist.com.au
Author: TechAssist MSP Pty Ltd
Author URI: https://techassist.com.au
Description: Custom WordPress theme for TechAssist — Melbourne's Trusted IT Partner. Features constellation mesh art, scroll-reveal animations, and a modern purple brand palette.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
License URI: https://techassist.com.au
Text Domain: techassist
*/

/* ═══ RESET & VARIABLES ═══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --purple:#491CB1;--purple-light:#6B3FD4;--purple-lighter:#8B5CF6;
  --purple-dark:#33127A;--purple-darker:#1E0A4E;
  --purple-50:#F5F0FF;--purple-100:#E8DEFF;--purple-200:#D4BFFF;
  --slate-900:#0F172A;--slate-800:#1E293B;--slate-700:#334155;
  --slate-500:#64748B;--slate-400:#94A3B8;--slate-300:#CBD5E1;
  --slate-200:#E2E8F0;--slate-100:#F1F5F9;--slate-50:#F8FAFC;
  --white:#FFFFFF;
}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;color:var(--slate-900);background:var(--white);overflow-x:hidden;line-height:1.7;-webkit-font-smoothing:antialiased}

/* ═══ GLOBAL COMPONENTS ═══ */
.container{max-width:1180px;margin:0 auto;padding:0 2rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 2.25rem;font-weight:700;font-size:.9rem;text-decoration:none;border:none;cursor:pointer;border-radius:8px;transition:all .4s cubic-bezier(.4,0,.2,1);letter-spacing:.01em}
.btn-primary{background:var(--purple);color:var(--white);box-shadow:0 2px 8px rgba(73,28,177,.2)}
.btn-primary:hover{background:var(--purple-light);transform:translateY(-2px);box-shadow:0 8px 30px rgba(73,28,177,.3)}
.btn-white{background:var(--white);color:var(--purple);font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.12)}
.btn-outline{background:transparent;color:var(--purple);border:1.5px solid var(--purple-200)}
.btn-outline:hover{background:var(--purple-50);border-color:var(--purple)}
.btn-light{background:rgba(255,255,255,.12);color:var(--white);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(10px)}
.btn-light:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.35)}
.overline{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--purple);margin-bottom:.75rem;display:inline-block}
.overline-light{color:var(--purple-200)}
.section-heading{font-size:clamp(2rem,4vw,2.75rem);font-weight:800;line-height:1.15;letter-spacing:-.03em;margin-bottom:1rem}
.section-sub{font-size:1.05rem;color:var(--slate-500);max-width:550px;line-height:1.75}

/* ═══ NAV ═══ */
nav.site-nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,.88);backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,0,0,.05);padding:.65rem 0}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.logo-mark{width:34px;height:34px;background:var(--purple);border-radius:8px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.logo-mark::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.25),transparent);pointer-events:none}
.logo-mark svg{width:18px;height:18px;fill:var(--white);position:relative;z-index:1}
.logo-text{font-size:1.25rem;font-weight:800;color:var(--slate-900);letter-spacing:-.02em}
.nav-links{display:flex;align-items:center;gap:2.25rem;list-style:none}
.nav-links a{color:var(--slate-500);text-decoration:none;font-size:.875rem;font-weight:500;transition:color .3s}
.nav-links a:hover,.nav-links .current-menu-item a,.nav-links a.active{color:var(--purple);font-weight:600}
.nav-phone{font-weight:700;color:var(--slate-900);font-size:.875rem;letter-spacing:.01em}
.nav-cta .btn{padding:.55rem 1.5rem;font-size:.8rem}

/* ═══ HERO (shared base) ═══ */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;background:linear-gradient(170deg,var(--white) 0%,var(--purple-50) 40%,var(--white) 100%);padding:7rem 0 4rem}
.hero-constellation{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-constellation svg{position:absolute;top:0;right:0;width:100%;height:100%}
.hero-content{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:.6rem;padding:.45rem 1.1rem;background:var(--white);border:1px solid var(--purple-100);border-radius:100px;font-size:.78rem;font-weight:600;color:var(--purple);margin-bottom:1.75rem;box-shadow:0 1px 4px rgba(73,28,177,.06)}
.hero-badge-dot{width:7px;height:7px;background:var(--purple);border-radius:50%;animation:dotPulse 2s ease-in-out infinite}
@keyframes dotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.hero h1{font-size:clamp(2.5rem,5vw,3.75rem);font-weight:900;line-height:1.07;letter-spacing:-.04em;color:var(--slate-900);margin-bottom:1.5rem}
.hero h1 em{font-style:normal;color:var(--purple)}
.hero-desc{font-size:1.1rem;color:var(--slate-500);max-width:500px;margin-bottom:2.5rem;line-height:1.8}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}

/* Hero visual — shield + floating cards */
.hero-visual-wrap{position:relative}
.hero-visual{position:relative;width:100%;aspect-ratio:1;max-width:520px;margin:0 auto}
.hero-visual svg{width:100%;height:100%}
.hero-shield{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:160px;height:160px;background:var(--white);border-radius:24px;box-shadow:0 20px 60px rgba(73,28,177,.12),0 0 0 1px rgba(73,28,177,.08);display:flex;align-items:center;justify-content:center}
.hero-shield svg{width:64px;height:64px;fill:var(--purple)}
.hero-float{position:absolute;background:var(--white);border-radius:14px;padding:.75rem 1.1rem;display:flex;align-items:center;gap:.75rem;box-shadow:0 4px 20px rgba(73,28,177,.08),0 0 0 1px rgba(73,28,177,.05);animation:hFloat 4s ease-in-out infinite}
@keyframes hFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hf-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hf-icon svg{width:16px;height:16px;fill:var(--white)}
.hf-label{font-size:.65rem;color:var(--slate-400);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.hf-value{font-size:.82rem;font-weight:800;color:var(--slate-900)}
.hf-1{top:5%;left:-5%;animation-delay:0s}.hf-1 .hf-icon{background:var(--purple)}
.hf-2{top:15%;right:-8%;animation-delay:.5s}.hf-2 .hf-icon{background:#059669}
.hf-3{bottom:25%;left:-10%;animation-delay:1s}.hf-3 .hf-icon{background:#2563EB}
.hf-4{bottom:10%;right:-5%;animation-delay:1.5s}.hf-4 .hf-icon{background:#D97706}

/* Subpage hero variants */
.hero--subpage{min-height:auto;padding:10rem 0 6rem;text-align:center}
.hero--subpage .hero-content{display:block}
.hero--subpage h1{font-size:clamp(2.25rem,4.5vw,3.25rem);margin-bottom:1.25rem}
.hero--dark{background:linear-gradient(170deg,var(--purple-darker) 0%,var(--purple-dark) 100%)}
.hero--dark h1{color:var(--white)}
.hero--dark .overline{color:var(--purple-200)}
.hero--dark .hero-desc,.hero--dark .hero-sub{color:rgba(255,255,255,.6)}
.hero-sub{font-size:1.1rem;color:rgba(255,255,255,.6);max-width:560px;margin:0 auto;line-height:1.8}
.hero-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(60px)}
.hero-orb-1{width:300px;height:300px;background:rgba(120,80,220,.2);top:-80px;left:-60px;animation:orbFloat 8s ease-in-out infinite}
.hero-orb-2{width:220px;height:220px;background:rgba(100,60,200,.15);bottom:-60px;right:5%;animation:orbFloat 10s ease-in-out infinite 2s}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(15px,-20px) scale(1.05)}50%{transform:translate(-10px,15px) scale(.95)}75%{transform:translate(20px,10px) scale(1.03)}}

/* ═══ CLIENT LOGOS ═══ */
.logos{padding:3rem 0;border-bottom:1px solid var(--slate-200)}
.logos-inner{display:flex;align-items:center;justify-content:center;gap:3rem;flex-wrap:wrap}
.logos-label{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-400);white-space:nowrap}
.logo-item{height:28px;opacity:.35;transition:opacity .4s;filter:grayscale(1)}
.logo-item:hover{opacity:.7;filter:grayscale(0)}
.logo-placeholder{display:flex;align-items:center;gap:.5rem;padding:.5rem 1.25rem;background:var(--slate-100);border-radius:8px;font-size:.78rem;font-weight:600;color:var(--slate-400);letter-spacing:.01em}

/* ═══ STATS ═══ */
.stats{padding:4rem 0;position:relative}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.stat{text-align:center;padding:1.5rem;position:relative}
.stat:not(:last-child)::after{content:'';position:absolute;right:0;top:20%;height:60%;width:1px;background:var(--slate-200)}
.stat-num{font-size:clamp(2rem,3.5vw,2.75rem);font-weight:900;color:var(--purple);letter-spacing:-.03em}
.stat-label{font-size:.78rem;color:var(--slate-400);text-transform:uppercase;letter-spacing:.1em;font-weight:600;margin-top:.2rem}
.google-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--white);border:1px solid var(--slate-200);border-radius:100px;box-shadow:0 2px 8px rgba(0,0,0,.04);margin-top:.35rem}
.google-badge svg{width:18px;height:18px}
.google-stars{display:flex;gap:1px}
.google-stars svg{width:14px;height:14px;fill:#FBBC04}
.google-rating{font-size:.85rem;font-weight:800;color:var(--slate-900)}
.google-count{font-size:.72rem;color:var(--slate-400)}

/* ═══ SERVICES — dark purple section ═══ */
.services{padding:6rem 0;background:linear-gradient(170deg,var(--purple-darker) 0%,var(--purple-dark) 100%);position:relative;overflow:hidden}
.services-constellation{position:absolute;inset:0;pointer-events:none}
.services-constellation svg{position:absolute;width:100%;height:100%;opacity:.06}
.services .overline{color:var(--purple-200)}
.services .section-heading{color:var(--white)}
.services .section-sub{color:rgba(255,255,255,.6)}
.services-header{text-align:center;margin-bottom:4rem;position:relative;z-index:1}
.services-header .section-sub{margin:0 auto}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;position:relative;z-index:1}
.svc{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:2.25rem;transition:all .5s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;backdrop-filter:blur(4px)}
.svc:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);transform:translateY(-6px);box-shadow:0 20px 60px rgba(0,0,0,.2)}
.svc-icon{width:48px;height:48px;background:rgba(255,255,255,.08);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}
.svc-icon svg{width:22px;height:22px;fill:var(--purple-200)}
.svc h3{font-size:1.05rem;font-weight:700;margin-bottom:.5rem;color:var(--white)}
.svc p{font-size:.88rem;color:rgba(255,255,255,.55);line-height:1.7}
.svc-link{display:inline-flex;align-items:center;gap:.35rem;margin-top:1rem;font-size:.78rem;font-weight:600;color:var(--purple-200);text-decoration:none;opacity:0;transform:translateX(-6px);transition:all .4s}
.svc:hover .svc-link{opacity:1;transform:translateX(0)}

/* ═══ WHY US ═══ */
.why{padding:7rem 0;position:relative;overflow:hidden}
.why-bg-art{position:absolute;left:-10%;top:0;width:50%;height:100%;pointer-events:none;opacity:.06}
.why-bg-art svg{width:100%;height:100%}
.why-layout{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;position:relative;z-index:1}
.why-visual{position:relative}
.why-card-stack{position:relative;height:490px;max-width:520px}
.wc{position:absolute;background:var(--white);border:1px solid var(--slate-200);border-radius:16px;padding:1.6rem 1.75rem;box-shadow:0 4px 20px rgba(73,28,177,.06);transition:all .5s cubic-bezier(.4,0,.2,1);overflow:hidden;width:min(280px,80%)}
.wc:hover{transform:translateY(-8px) !important;box-shadow:0 16px 50px rgba(73,28,177,.12);z-index:10}
.wc::before{content:'';position:absolute;top:0;right:0;width:80px;height:80px;background:var(--purple-50);border-radius:0 0 0 80px;opacity:.6}
.wc-1{top:0;left:0;z-index:3}
.wc-2{top:165px;right:0;z-index:2}
.wc-3{top:330px;left:30px;z-index:1}
.wc-stat{font-size:2.25rem;font-weight:900;color:var(--purple);letter-spacing:-.02em}
.wc-label{font-size:.85rem;color:var(--slate-500);margin-top:.2rem;font-weight:500}
.wc-bar{height:5px;background:var(--slate-100);border-radius:3px;margin-top:1rem;overflow:hidden}
.wc-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--purple),var(--purple-lighter))}
.wc-1 .wc-bar-fill{width:95%;animation:barGrow 2s ease-out forwards}
.wc-2 .wc-bar-fill{width:100%;animation:barGrow 2s ease-out .3s forwards}
.wc-3 .wc-bar-fill{width:88%;animation:barGrow 2s ease-out .6s forwards}
@keyframes barGrow{from{width:0}}
.why-features{display:flex;flex-direction:column;gap:1.5rem;margin-top:2.5rem}
.wf{display:flex;gap:1rem;align-items:flex-start}
.wf-icon{flex-shrink:0;width:38px;height:38px;background:var(--purple-50);border-radius:10px;display:flex;align-items:center;justify-content:center;transition:background .3s}
.wf:hover .wf-icon{background:var(--purple-100)}
.wf-icon svg{width:18px;height:18px;fill:var(--purple)}
.wf h4{font-size:.95rem;font-weight:700;color:var(--slate-900);margin-bottom:.15rem}
.wf p{font-size:.85rem;color:var(--slate-500);line-height:1.65}

/* ═══ INDUSTRIES ═══ */
.industries{padding:6rem 0;background:var(--slate-50);position:relative;overflow:hidden}
.industries-constellation{position:absolute;right:-5%;top:-10%;width:40%;height:120%;pointer-events:none;opacity:.04}
.ind-header{text-align:center;margin-bottom:3.5rem;position:relative;z-index:1}
.ind-header .section-sub{margin:0 auto}
.ind-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;position:relative;z-index:1}
.ind{text-align:center;padding:2rem 1.25rem;background:var(--white);border:1px solid var(--slate-200);border-radius:16px;transition:all .4s;position:relative;overflow:hidden}
.ind:hover{border-color:var(--purple);transform:translateY(-6px);box-shadow:0 12px 40px rgba(73,28,177,.1)}
.ind::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--purple);transform:scaleX(0);transition:transform .4s;transform-origin:left}
.ind:hover::before{transform:scaleX(1)}
.ind-icon{width:52px;height:52px;margin:0 auto .9rem;background:var(--purple-50);border-radius:12px;display:flex;align-items:center;justify-content:center;transition:all .3s}
.ind:hover .ind-icon{background:var(--purple);transform:scale(1.05)}
.ind-icon svg{width:24px;height:24px;fill:var(--purple);transition:fill .3s}
.ind:hover .ind-icon svg{fill:var(--white)}
.ind h3{font-size:.88rem;font-weight:700;color:var(--slate-700)}
.ind-desc{font-size:.78rem;color:var(--slate-400);line-height:1.6;margin-top:.4rem}

/* ═══ TRUST BADGES ═══ */
.trust{padding:4rem 0;border-top:1px solid var(--slate-200)}
.trust-inner{display:flex;align-items:center;justify-content:center;gap:2.5rem;flex-wrap:wrap}
.trust-badge{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.5rem;background:var(--white);border:1px solid var(--slate-200);border-radius:12px;transition:all .3s}
.trust-badge:hover{border-color:var(--purple-200);box-shadow:0 4px 16px rgba(73,28,177,.06)}
.trust-icon{width:40px;height:40px;background:var(--purple-50);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.trust-icon svg{width:20px;height:20px;fill:var(--purple)}
.trust-text{font-size:.78rem;font-weight:700;color:var(--slate-700);line-height:1.3}
.trust-sub{font-size:.68rem;color:var(--slate-400);font-weight:500}

/* ═══ CASE STUDY TEASER ═══ */
.case-study{padding:5rem 0;background:var(--white);position:relative;overflow:hidden}
.cs-card{display:grid;grid-template-columns:1fr 1.4fr;border:1px solid var(--slate-200);border-radius:20px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.04);transition:all .4s}
.cs-card:hover{box-shadow:0 12px 40px rgba(73,28,177,.08);transform:translateY(-4px)}
.cs-visual{background:linear-gradient(135deg,var(--purple-darker),var(--purple));padding:3rem;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative;overflow:hidden}
.cs-visual-constellation{position:absolute;inset:0;pointer-events:none;opacity:.1}
.cs-visual svg.cs-icon{width:64px;height:64px;fill:rgba(255,255,255,.8);margin-bottom:1rem}
.cs-visual .cs-tag{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--purple-200);background:rgba(255,255,255,.1);padding:.35rem 1rem;border-radius:100px;border:1px solid rgba(255,255,255,.15)}
.cs-body{padding:3rem}
.cs-body .overline{color:var(--purple)}
.cs-body h3{font-size:1.35rem;font-weight:800;color:var(--slate-900);margin-bottom:.75rem;line-height:1.25;letter-spacing:-.02em}
.cs-body p{font-size:.95rem;color:var(--slate-500);line-height:1.75;margin-bottom:1.5rem}
.cs-stats{display:flex;gap:2rem;margin-bottom:1.5rem}
.cs-stat-item{text-align:center}
.cs-stat-num{font-size:1.25rem;font-weight:900;color:var(--purple)}
.cs-stat-label{font-size:.68rem;color:var(--slate-400);text-transform:uppercase;letter-spacing:.08em;font-weight:600}

/* ═══ TESTIMONIAL ═══ */
.testimonial{padding:7rem 0;position:relative}
.test-layout{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.test-card{background:var(--white);border:1px solid var(--slate-200);border-radius:20px;padding:3rem;position:relative;box-shadow:0 4px 20px rgba(0,0,0,.04)}
.test-card::before{content:'';position:absolute;top:-1px;left:2rem;right:2rem;height:3px;background:linear-gradient(90deg,var(--purple),var(--purple-lighter));border-radius:0 0 3px 3px}
.test-quote-mark{font-size:4rem;line-height:1;color:var(--purple-200);font-family:Georgia,serif;margin-bottom:.5rem}
.test-text{font-size:1.1rem;color:var(--slate-700);line-height:1.8;font-style:italic;margin-bottom:1.5rem}
.test-divider{width:36px;height:2px;background:var(--purple);border-radius:1px;margin-bottom:1rem}
.test-author{font-weight:700;color:var(--slate-900);font-size:.95rem}
.test-role{color:var(--slate-400);font-size:.85rem;margin-top:.15rem}
.test-right{position:relative}
.test-metrics{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.tm{background:var(--purple-50);border:1px solid var(--purple-100);border-radius:16px;padding:1.75rem;text-align:center;transition:all .4s}
.tm:hover{background:var(--white);border-color:var(--purple-200);transform:translateY(-4px);box-shadow:0 10px 30px rgba(73,28,177,.08)}
.tm-num{font-size:1.5rem;font-weight:900;color:var(--purple);letter-spacing:-.02em}
.tm-label{font-size:.72rem;color:var(--slate-500);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-top:.2rem}

/* ═══ CTA ═══ */
.cta{padding:6rem 0}
.cta-card{background:linear-gradient(135deg,var(--purple-dark) 0%,var(--purple) 50%,var(--purple-light) 100%);border-radius:24px;padding:5rem 3rem;text-align:center;position:relative;overflow:hidden}
.cta-constellation{position:absolute;inset:0;pointer-events:none}
.cta-constellation svg{width:100%;height:100%;opacity:.08}
.cta-glow{position:absolute;width:400px;height:400px;border-radius:50%;background:rgba(255,255,255,.06);filter:blur(80px)}
.cta-glow-1{top:-20%;right:-5%}
.cta-glow-2{bottom:-30%;left:-10%}
.cta-card h2{font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:800;color:var(--white);margin-bottom:1rem;position:relative;z-index:1;letter-spacing:-.02em}
.cta-card p{color:rgba(255,255,255,.7);font-size:1.05rem;max-width:500px;margin:0 auto 2rem;position:relative;z-index:1}
.cta-actions{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;position:relative;z-index:1}

/* ═══ FOOTER ═══ */
footer.site-footer{padding:4rem 0 2rem;border-top:1px solid var(--slate-200);background:var(--slate-50)}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(5, 1fr);gap:2rem;margin-bottom:3rem}
.footer-brand p{color:var(--slate-400);font-size:.875rem;margin-top:1rem;max-width:280px;line-height:1.7}
.footer-col h4{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);margin-bottom:1rem}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:.5rem}
.footer-col a{color:var(--slate-500);text-decoration:none;font-size:.875rem;transition:color .3s}
.footer-col a:hover{color:var(--purple)}
.footer-bottom{border-top:1px solid var(--slate-200);background:#f5f3fb;padding:1.4rem 0;font-size:.78rem;color:var(--slate-400);margin-top:1rem}
.footer-bottom-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem}

/* ═══ SERVICES DETAIL PAGE ═══ */
.services-detail{padding:5rem 0}
.svc-block{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;padding:4rem 0;border-bottom:1px solid var(--slate-200)}
.svc-block:last-child{border-bottom:none}
.svc-block:nth-child(even){direction:rtl}
.svc-block:nth-child(even) > *{direction:ltr}
.svc-block .overline{margin-bottom:.5rem}
.svc-block h2{font-size:1.5rem;font-weight:800;color:var(--slate-900);margin-bottom:1rem;letter-spacing:-.02em}
.svc-block p{color:var(--slate-500);line-height:1.8;margin-bottom:1.5rem}
.svc-features{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.svc-feat{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--slate-600);font-weight:500}
.svc-feat svg{width:16px;height:16px;fill:var(--purple);flex-shrink:0}
.svc-visual{position:relative;background:var(--purple-50);border-radius:20px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--purple-100)}
.svc-visual svg{width:80px;height:80px;fill:var(--purple);opacity:.2}
.how-works{padding:6rem 0;background:var(--purple-50)}
.how-header{text-align:center;margin-bottom:4rem}
.how-header .section-sub{margin:0 auto}
.how-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.how-step{text-align:center;position:relative;padding:2rem 1.5rem}
.how-num{width:48px;height:48px;background:var(--purple);color:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;margin:0 auto 1.25rem;position:relative;z-index:1}
.how-step:not(:last-child)::after{content:'';position:absolute;top:24px;left:calc(50% + 30px);width:calc(100% - 60px);height:2px;background:var(--purple-200);opacity:.4}
.how-step h3{font-size:1rem;font-weight:700;color:var(--slate-900);margin-bottom:.5rem}
.how-step p{font-size:.85rem;color:var(--slate-500);line-height:1.65}

/* ═══ BLOG / INSIGHTS ═══ */
.blog-hero{min-height:40vh;padding:8rem 0 4rem}
.blog-hero .hero-content{display:block;text-align:center}
.featured-post{margin:0 auto 3rem;max-width:900px;display:grid;grid-template-columns:1.2fr 1fr;border:1px solid var(--slate-200);border-radius:20px;overflow:hidden;background:var(--white);box-shadow:0 4px 20px rgba(0,0,0,.04);transition:all .4s}
.featured-post:hover{box-shadow:0 12px 40px rgba(73,28,177,.08);transform:translateY(-4px)}
.featured-thumb{background:linear-gradient(135deg,var(--purple-darker),var(--purple));display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;min-height:280px}
.featured-thumb img{width:100%;height:100%;object-fit:cover}
.featured-thumb .featured-overlay{position:absolute;inset:0;background:linear-gradient(135deg,var(--purple-darker),var(--purple));display:flex;align-items:center;justify-content:center}
.featured-body{padding:2.5rem}
.featured-badge{display:inline-flex;padding:.3rem .8rem;background:var(--purple-50);color:var(--purple);font-size:.72rem;font-weight:700;border-radius:100px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.75rem}
.featured-body h2{font-size:1.35rem;font-weight:800;color:var(--slate-900);line-height:1.25;margin-bottom:.75rem;letter-spacing:-.02em}
.featured-body h2 a{color:inherit;text-decoration:none;transition:color .3s}
.featured-body h2 a:hover{color:var(--purple)}
.featured-body p{font-size:.92rem;color:var(--slate-500);line-height:1.75;margin-bottom:1rem}
.featured-meta{display:flex;gap:1rem;font-size:.78rem;color:var(--slate-400)}

/* Category pills */
.category-filter{padding:1.5rem 0;border-bottom:1px solid var(--slate-200);position:sticky;top:52px;z-index:100;background:var(--white)}
.filter-inner{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap}
.pill{padding:.45rem 1.25rem;border:1px solid var(--slate-200);border-radius:100px;font-size:.78rem;font-weight:600;color:var(--slate-500);background:var(--white);cursor:pointer;transition:all .3s;text-decoration:none}
.pill:hover,.pill.active{background:var(--purple);color:var(--white);border-color:var(--purple)}

/* Article grid */
.articles{padding:4rem 0}
.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.article-card{background:var(--white);border:1px solid var(--slate-200);border-radius:16px;overflow:hidden;transition:all .4s}
.article-card:hover{border-color:var(--purple);transform:translateY(-6px);box-shadow:0 12px 40px rgba(73,28,177,.08)}
.article-card.hidden{display:none}
.article-thumb{height:180px;background:linear-gradient(135deg,var(--purple-50),var(--purple-100));display:flex;align-items:center;justify-content:center;overflow:hidden}
.article-thumb img{width:100%;height:100%;object-fit:cover}
.article-thumb svg{width:40px;height:40px;fill:var(--purple);opacity:.2}
.article-body{padding:1.5rem}
.article-cat{display:inline-flex;padding:.2rem .6rem;background:var(--purple-50);color:var(--purple);font-size:.68rem;font-weight:700;border-radius:4px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem}
.article-body h3{font-size:1rem;font-weight:700;color:var(--slate-900);margin-bottom:.4rem;line-height:1.35}
.article-body h3 a{color:inherit;text-decoration:none;transition:color .3s}
.article-body h3 a:hover{color:var(--purple)}
.article-body p{font-size:.82rem;color:var(--slate-500);line-height:1.65;margin-bottom:.75rem}
.article-meta{font-size:.72rem;color:var(--slate-400);display:flex;gap:1rem}

/* Newsletter CTA */
.newsletter{padding:4rem 0;background:var(--purple-50);text-align:center}
.newsletter h2{font-size:1.5rem;font-weight:800;margin-bottom:.5rem}
.newsletter p{color:var(--slate-500);margin-bottom:1.5rem}
.newsletter-form{display:flex;gap:.5rem;max-width:450px;margin:0 auto}
.newsletter-form input{flex:1;padding:.75rem 1.25rem;border:1px solid var(--slate-200);border-radius:8px;font-size:.9rem;outline:none;transition:border-color .3s}
.newsletter-form input:focus{border-color:var(--purple)}

/* ═══ CONTACT PAGE ═══ */
.contact-section{padding:4rem 0}
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:3rem;align-items:start}
.form-card{background:var(--white);border:1px solid var(--slate-200);border-radius:20px;padding:2.5rem;box-shadow:0 4px 20px rgba(0,0,0,.04)}
.form-card h2{font-size:1.25rem;font-weight:800;margin-bottom:.25rem}
.form-card .form-sub{color:var(--slate-500);font-size:.88rem;margin-bottom:2rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.form-group{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}
.form-group label{font-size:.78rem;font-weight:600;color:var(--slate-700)}
.form-group input,.form-group select,.form-group textarea{padding:.75rem 1rem;border:1px solid var(--slate-200);border-radius:8px;font-size:.9rem;font-family:inherit;outline:none;transition:all .3s;background:var(--white);color:var(--slate-900)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(73,28,177,.08)}
.form-group textarea{min-height:120px;resize:vertical}
.form-checkbox{display:flex;align-items:center;gap:.5rem;margin-bottom:1.5rem;font-size:.85rem;color:var(--slate-600)}
.form-checkbox input{accent-color:var(--purple);width:16px;height:16px}
.form-success{text-align:center;padding:3rem}
.form-success.active{display:block}
.form-success svg{width:64px;height:64px;fill:var(--purple);margin-bottom:1rem}
.form-success h3{font-size:1.25rem;font-weight:800;margin-bottom:.5rem}
.form-success p{color:var(--slate-500)}

/* Contact info cards */
.contact-info{display:flex;flex-direction:column;gap:1rem}
.info-card{display:flex;align-items:center;gap:1rem;padding:1.25rem 1.5rem;background:var(--white);border:1px solid var(--slate-200);border-radius:14px;transition:all .3s}
.info-card:hover{border-color:var(--purple-200);box-shadow:0 4px 16px rgba(73,28,177,.06)}
.info-icon{width:44px;height:44px;background:var(--purple-50);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.info-icon svg{width:20px;height:20px;fill:var(--purple)}
.info-card h3{font-size:.92rem;font-weight:700;color:var(--slate-900)}
.info-card h3 a{color:inherit;text-decoration:none;transition:color .3s}
.info-card h3 a:hover{color:var(--purple)}
.info-card p{font-size:.78rem;color:var(--slate-400)}
.why-reach{padding:4rem 0}
.why-reach-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.why-card{text-align:center;padding:2rem 1.5rem;background:var(--purple-50);border:1px solid var(--purple-100);border-radius:16px;transition:all .3s}
.why-card:hover{background:var(--white);transform:translateY(-4px);box-shadow:0 10px 30px rgba(73,28,177,.06)}
.why-card-icon{width:48px;height:48px;background:var(--purple);border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
.why-card-icon svg{width:22px;height:22px;fill:var(--white)}
.why-card h3{font-size:.92rem;font-weight:700;margin-bottom:.35rem}
.why-card p{font-size:.82rem;color:var(--slate-500);line-height:1.6}

/* Map placeholder */
.map-placeholder{margin-top:1.5rem;height:200px;background:var(--slate-100);border:1px solid var(--slate-200);border-radius:14px;overflow:hidden;position:relative;display:grid;grid-template-columns:repeat(20,1fr);grid-template-rows:repeat(10,1fr)}
.map-placeholder div{border:1px solid var(--slate-200)}
.map-placeholder::after{content:'Melbourne, VIC';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.85rem;font-weight:600;color:var(--slate-400);background:var(--white);padding:.5rem 1rem;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.08)}

/* ═══ SINGLE POST ═══ */
.single-post-content{max-width:760px;margin:0 auto;padding:2rem 0 4rem}
.single-post-content h1{font-size:clamp(2rem,4vw,2.75rem);font-weight:900;line-height:1.15;letter-spacing:-.03em;margin-bottom:1rem;color:var(--slate-900)}
.single-post-content .post-meta{color:var(--slate-400);font-size:.85rem;margin-bottom:2rem;display:flex;gap:1rem}
.single-post-content .post-body{font-size:1.05rem;line-height:1.85;color:var(--slate-700)}
.single-post-content .post-body h2{font-size:1.5rem;font-weight:800;margin:2.5rem 0 1rem;color:var(--slate-900)}
.single-post-content .post-body h3{font-size:1.2rem;font-weight:700;margin:2rem 0 .75rem;color:var(--slate-900)}
.single-post-content .post-body p{margin-bottom:1.25rem}
.single-post-content .post-body ul,.single-post-content .post-body ol{margin:1rem 0 1.5rem 1.5rem}
.single-post-content .post-body li{margin-bottom:.5rem}
.single-post-content .post-body img{max-width:100%;height:auto;border-radius:12px;margin:1.5rem 0}
.single-post-content .post-body blockquote{border-left:3px solid var(--purple);padding:1rem 1.5rem;margin:1.5rem 0;background:var(--purple-50);border-radius:0 12px 12px 0;font-style:italic;color:var(--slate-600)}

/* ═══ PAGINATION ═══ */
.pagination{display:flex;justify-content:center;gap:.5rem;padding:2rem 0}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--slate-200);border-radius:8px;font-size:.85rem;font-weight:600;color:var(--slate-500);text-decoration:none;transition:all .3s}
.pagination a:hover,.pagination .current{background:var(--purple);color:var(--white);border-color:var(--purple)}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1024px){
  .hero-content{grid-template-columns:1fr;text-align:center}
  .hero-desc{margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
  .hero-visual-wrap{display:none}
  .why-layout{grid-template-columns:1fr}
  .why-visual{display:none}
  .test-layout{grid-template-columns:1fr}
  .test-right{margin-top:2rem}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .ind-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr 1fr}
  .cs-card{grid-template-columns:1fr}
  .cs-visual{padding:2rem}
  .trust-inner{gap:1.5rem}
  .svc-block{grid-template-columns:1fr}
  .svc-block:nth-child(even){direction:ltr}
  .svc-visual{display:none}
  .how-steps{grid-template-columns:repeat(2,1fr)}
  .how-step::after{display:none}
  .featured-post{grid-template-columns:1fr}
  .articles-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .why-reach-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2)::after{display:none}
  .services-grid{grid-template-columns:1fr}
  .ind-grid{grid-template-columns:repeat(2,1fr)}
  .test-metrics{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .cta-card{padding:3rem 2rem}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom-inner{flex-direction:column;align-items:flex-start;gap:.5rem}
  .logos-inner{gap:1.5rem}
  .trust-inner{flex-direction:column;align-items:stretch}
  .cs-stats{flex-wrap:wrap;gap:1rem}
  .svc-features{grid-template-columns:1fr}
  .how-steps{grid-template-columns:1fr}
  .articles-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .why-reach-grid{grid-template-columns:1fr 1fr}
  .newsletter-form{flex-direction:column}
  .hero--subpage{padding:8rem 0 4rem}
}

/* ═══ SCROLL ANIMATIONS ═══ */
.js-ready .reveal{opacity:0;transform:translateY(28px);transition:all .7s cubic-bezier(.4,0,.2,1)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ═══ WORDPRESS OVERRIDES ═══ */
.wp-block-image img{border-radius:12px}
.alignwide{max-width:1180px;margin-left:auto;margin-right:auto}
.alignfull{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}

/* ═══ NAV DROPDOWNS (added by Phase 2 build) ═══ */
.nav-links { position: relative; }
.nav-links li { position: relative; list-style: none; }

/* Parent items with children: chevron indicator */
.nav-links > li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .55;
  transition: transform .2s, opacity .2s;
  vertical-align: middle;
}
.nav-links > li.menu-item-has-children:hover > a::after,
.nav-links > li.menu-item-has-children:focus-within > a::after {
  transform: rotate(-135deg) translateY(0);
  opacity: 1;
}

/* Submenu container — hidden by default, dropdown on hover */
.nav-links .sub-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: -1rem;
  min-width: 240px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  padding: .5rem;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .12), 0 4px 12px -4px rgba(15, 23, 42, .08);
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: 100;
}
.nav-links > li:hover > .sub-menu,
.nav-links > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
}

/* Submenu items */
.nav-links .sub-menu li {
  list-style: none;
}
.nav-links .sub-menu a {
  display: block;
  padding: .55rem .85rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--slate-700);
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.nav-links .sub-menu a:hover,
.nav-links .sub-menu a:focus {
  background: var(--purple-50);
  color: var(--purple);
  font-weight: 600;
}

/* Tiny invisible bridge so the dropdown doesn't disappear when moving cursor down */
.nav-links > li.menu-item-has-children::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}

/* Mobile: collapse into stacked list */
@media (max-width: 768px) {
  .nav-links .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    padding: .25rem 0 .25rem 1rem;
    background: transparent;
    min-width: 0;
  }
  .nav-links > li.menu-item-has-children > a::after {
    display: none;
  }
}

/* ═══ CLIENT LOGOS — uniform display + pretty hover ═══ */
.logos-inner {
  gap: 2.5rem;
}
.client-logo {
  /* Uniform display box - all logos sit in same visual rhythm */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 56px;
  flex: 0 0 auto;
}
.client-logo .logo-item {
  /* Constrain image inside the box - contain preserves aspect */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Default state - readable greyscale */
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter .45s ease, opacity .45s ease, transform .45s ease;
}
.client-logo:hover .logo-item,
.client-logo:focus-within .logo-item {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.04);
}

/* Mobile: smaller boxes, still uniform */
@media (max-width: 768px) {
  .logos-inner { gap: 1.5rem; }
  .client-logo {
    width: 110px;
    height: 44px;
  }
}



/* ═══ MOBILE HAMBURGER + DRAWER (Phase 2) ═══ */
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--slate-900);
  border-radius: 1px;
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .nav-toggle { display: flex; }

  /* When .nav-links has .open, show it as a vertical drawer */
  .nav-links {
    display: none !important;
  }
  .nav-links.open {
    display: flex !important;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    padding: 1.5rem 1.5rem 3rem;
    gap: .25rem;
    z-index: 99;
    overflow-y: auto;
    box-shadow: 0 8px 24px -8px rgba(15,23,42,.12);
    border-top: 1px solid var(--slate-200);
  }
  .nav-links.open > li {
    width: 100%;
    border-bottom: 1px solid var(--slate-100);
  }
  .nav-links.open > li > a {
    display: block;
    padding: 1rem .25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--slate-900);
  }
  .nav-links.open .nav-phone {
    display: block;
    padding: 1rem .25rem;
    color: var(--purple);
    font-size: 1.1rem;
  }
  .nav-links.open .nav-cta { margin-top: .75rem; border-bottom: 0; }
  .nav-links.open .nav-cta .btn { width: 100%; padding: .85rem 1.5rem; }

  /* Sub-menu styling already exists; just ensure it shows in drawer */
  .nav-links.open .sub-menu {
    padding-left: 1rem;
    padding-bottom: .5rem;
  }
  .nav-links.open .sub-menu a {
    font-weight: 500;
    color: var(--slate-600);
    padding: .55rem .25rem;
    font-size: .9rem;
  }
}

/* Override the conflicting 640px nav-links display:none */
@media (max-width: 640px) {
  .nav-links { display: none; }     /* desktop list hidden */
  .nav-links.open { display: flex; } /* open drawer wins via specificity */
}

/* ═══ STATS GRID FIX — Google badge no longer stretches row ═══ */
.stat { min-height: 90px; }
.google-badge {
  /* Position the badge so it doesn't push the cell taller than its siblings */
  margin-top: .75rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .75rem;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--slate-700);
}
.google-badge svg { width: 14px; height: 14px; }
.google-stars { display: inline-flex; gap: 1px; }
.google-stars svg { width: 11px; height: 11px; fill: #FBBC05; }

@media (max-width: 640px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  /* Hide dividers entirely on the 2-col mobile layout - cleaner */
  .stat::after { display: none !important; }
  .google-badge {
    font-size: .65rem;
    padding: .25rem .55rem;
  }
}

/* ═══ CLIENT LOGOS MOBILE — tidy grid ═══ */
@media (max-width: 768px) {
  .logos-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 1.25rem;
    align-items: center;
    justify-items: center;
  }
  .logos-label {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: .25rem;
  }
  .client-logo {
    width: 100%;
    max-width: 110px;
    height: 44px;
  }
}
@media (max-width: 420px) {
  .logos-inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════
   BLOG / INSIGHTS LISTING - Phase 2 fix
   home.php uses: .article-grid, .article-card,
   .article-card-img, .article-card-body, .featured-post,
   .featured-img, .featured-content
   ═══════════════════════════════════════════════════════════ */

/* Featured (top sticky/most recent) post — full-width card */
.featured-section { padding: 3rem 0 1rem; }
.featured-post {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px -12px rgba(15, 23, 42, .06);
}
.featured-img {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, var(--purple-50), var(--purple-100));
}
.featured-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1.5rem;
  display: block;
}
.featured-content {
  padding: 2.5rem 2.5rem 2.5rem 0;
}
.featured-badge {
  display: inline-block;
  padding: .3rem .75rem;
  background: var(--purple);
  color: var(--white);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-radius: 999px;
  margin-bottom: .75rem;
}
.featured-cat {
  display: inline-block;
  margin-left: .5rem;
  padding: .25rem .6rem;
  background: var(--purple-50);
  color: var(--purple);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-radius: 4px;
  margin-bottom: .75rem;
}
.featured-content h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 800;
  margin: .5rem 0 .75rem;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.featured-content h2 a {
  color: var(--slate-900);
  text-decoration: none;
}
.featured-content h2 a:hover { color: var(--purple); }
.featured-content p {
  font-size: 1rem;
  color: var(--slate-500);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.featured-meta {
  font-size: .82rem;
  color: var(--slate-400);
  display: flex;
  gap: .75rem;
  margin-bottom: 1.25rem;
}

/* Category filter pills */
.filter-bar { padding: 1rem 0 .5rem; border-bottom: 1px solid var(--slate-100); }
.filter-bar .pills {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.filter-bar .pill {
  padding: .45rem 1rem;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--slate-600);
  cursor: pointer;
  transition: all .2s ease;
}
.filter-bar .pill:hover { border-color: var(--purple); color: var(--purple); }
.filter-bar .pill.active {
  background: var(--purple);
  border-color: var(--purple);
  color: var(--white);
}

/* Article grid — 2 columns on desktop */
.articles-section { padding: 2.5rem 0 4rem; }
.article-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.article-grid.hidden { display: none; }

.article-card {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.article-card:hover {
  border-color: var(--purple);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -16px rgba(73, 28, 177, .15);
}
.article-card.hidden { display: none; }

/* Thumbnail — fixed aspect, contained */
.article-card-img {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, var(--purple-50), var(--purple-100));
  text-decoration: none;
}
.article-card-img img,
.article-card-img > div {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  padding: 1rem;
  display: block;
  transition: transform .5s ease;
}
.article-card:hover .article-card-img img { transform: scale(1.03); }

.article-card-body {
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.article-cat {
  display: inline-block;
  align-self: flex-start;
  padding: .22rem .6rem;
  background: var(--purple-50);
  color: var(--purple);
  font-size: .68rem;
  font-weight: 700;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .65rem;
}
.article-card-body h3 {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: .55rem;
  letter-spacing: -.01em;
}
.article-card-body h3 a {
  color: var(--slate-900);
  text-decoration: none;          /* kills the unwanted underline */
  transition: color .25s ease;
}
.article-card-body h3 a:hover { color: var(--purple); }
.article-card-body p {
  font-size: .88rem;
  color: var(--slate-500);
  line-height: 1.65;
  margin-bottom: 1rem;
  flex: 1;
}
.article-meta {
  font-size: .75rem;
  color: var(--slate-400);
  display: flex;
  gap: .5rem;
  align-items: center;
}

/* Pagination */
.pagination {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.pagination .page-numbers {
  padding: .55rem .9rem;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  color: var(--slate-700);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
  transition: all .2s ease;
}
.pagination .page-numbers:hover {
  border-color: var(--purple);
  color: var(--purple);
}
.pagination .page-numbers.current {
  background: var(--purple);
  border-color: var(--purple);
  color: var(--white);
}

/* Newsletter card */
.newsletter { padding: 3rem 0 5rem; }
.newsletter-card {
  background: linear-gradient(135deg, var(--purple-50), var(--white));
  border: 1px solid var(--purple-100);
  border-radius: 20px;
  padding: 2.5rem;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
  align-items: center;
}
.newsletter-content h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--slate-900);
  margin-bottom: .35rem;
}
.newsletter-content p {
  color: var(--slate-500);
  font-size: .95rem;
}
.newsletter-form {
  display: flex;
  gap: .5rem;
}
.newsletter-input {
  flex: 1;
  padding: .75rem 1rem;
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  font-size: .9rem;
}
.newsletter-input:focus {
  outline: none;
  border-color: var(--purple);
}

/* Mobile breakpoint */
@media (max-width: 900px) {
  .article-grid { grid-template-columns: 1fr; }
  .featured-post {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .featured-content { padding: 1.75rem; }
  .newsletter-card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 2rem 1.5rem;
  }
  .newsletter-form { flex-direction: column; }
}
@media (max-width: 480px) {
  .article-card-body { padding: 1.25rem 1.25rem 1.5rem; }
  .article-card-body h3 { font-size: 1.05rem; }
  .featured-content h2 { font-size: 1.3rem; }
}


/* ═══════════════════════════════════════════════════════════
   SERVICE DETAIL TEMPLATE (page-service-detail.php)
   ═══════════════════════════════════════════════════════════ */

/* HERO */
.svc-hero { padding: 8rem 0 5rem; text-align: left; }
.svc-hero h1 {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  line-height: 1.1;
  margin: .75rem 0 1.25rem;
  letter-spacing: -.02em;
  max-width: 720px;
}
.svc-hero .hero-sub {
  font-size: 1.1rem;
  max-width: 640px;
  margin-bottom: 1.75rem;
  color: rgba(255,255,255,.75);
}
.svc-hero .hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

/* HERO BUTTONS */
.btn.btn-teal {
  background: var(--teal-accent, #50BFC3); color: var(--slate-900);
  padding: .85rem 1.5rem; border-radius: 8px; font-weight: 700;
  text-decoration: none; display: inline-flex; align-items: center; gap: .35rem;
  transition: transform .2s, box-shadow .2s;
}
.btn.btn-teal:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(80,191,195,.6); }
.btn.btn-outline-light {
  background: transparent; color: white; border: 1.5px solid rgba(255,255,255,.4);
  padding: .85rem 1.5rem; border-radius: 8px; font-weight: 700; text-decoration: none;
}
.btn.btn-outline-light:hover { border-color: white; background: rgba(255,255,255,.05); }

/* STATS STRIP */
.svc-stats { padding: 1.75rem 0; background: white; border-bottom: 1px solid var(--slate-200); }
.svc-stats .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: center; }
.svc-stats .stat { padding: .5rem; position: relative; }
.svc-stats .stat:not(:last-child)::after {
  content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: var(--slate-200);
}
.svc-stats .stat-num {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 900; color: var(--purple); letter-spacing: -.03em;
}
.svc-stats .stat-label {
  font-size: .7rem; color: var(--slate-400); text-transform: uppercase;
  letter-spacing: .1em; font-weight: 600; margin-top: .15rem;
}

/* BODY */
.svc-body { padding: 4rem 0 5rem; }
.svc-body-inner { max-width: 100%; margin: 0 auto; }

/* Constrain only flowing prose to a comfortable read width — flush LEFT to match structural elements */
.svc-body-inner > p,
.svc-body-inner > h2,
.svc-body-inner > h3,
.svc-body-inner > ul,
.svc-body-inner > ol,
.svc-body-inner > .wp-block-buttons {
  max-width: 820px;
  margin-left: 0;
  margin-right: auto;
}

/* Typography */
.svc-body-inner h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800; color: var(--slate-900);
  margin: 2.5rem 0 1rem; letter-spacing: -.02em; line-height: 1.25;
}
.svc-body-inner h2:first-child { margin-top: 0; }
.svc-body-inner h3 { font-size: 1.15rem; font-weight: 700; color: var(--slate-900); margin: 1.5rem 0 .5rem; }
.svc-body-inner p {
  color: var(--slate-700); line-height: 1.75; margin-bottom: 1.1rem; font-size: 1.02rem;
}
.svc-body-inner ul { padding-left: 1.25rem; margin-bottom: 1.5rem; }
.svc-body-inner ul li { margin-bottom: .55rem; line-height: 1.65; color: var(--slate-700); }
.svc-body-inner a { color: var(--purple); text-decoration: underline; text-underline-offset: 2px; }
.svc-body-inner a:hover { color: var(--purple-dark); }
.svc-body-inner .wp-block-buttons { margin: 1.5rem 0 2rem; }

/* Lead paragraph */
.svc-body-inner .is-style-lead {
  font-size: 1.2rem !important;
  color: var(--slate-700);
  line-height: 1.65 !important;
  margin-bottom: 1.5rem;
}

/* ─── 3-STEP PROCESS GRID ────────────────────────────────
   Gutenberg wraps wp:group children in __inner-container.
   We put display:grid on the INNER container only (not the outer)
   so all three cards become direct children of the grid. */
.svc-body-inner .svc-process-grid {
  /* Outer is just a container — block layout, full width */
  display: block;
  width: 100%;
  margin: 1.5rem 0 3rem;
}
.svc-body-inner .svc-process-grid > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  width: 100%;
}
.svc-body-inner .svc-process-grid > .wp-block-group__inner-container > .wp-block-group {
  background: var(--slate-50);
  border-top: 3px solid var(--purple);
  border-radius: 10px;
  padding: 1.75rem 1.5rem;
  margin: 0;
}
.svc-body-inner .svc-process-grid h3 { margin-top: 0; font-size: 1.1rem; }
.svc-body-inner .svc-process-grid p {
  font-size: .92rem; color: var(--slate-500); margin: 0; max-width: none;
}

/* ─── FEATURES BAND (2x4 tile grid on purple background) ─── */
.svc-features-band {
  background: var(--purple-50);
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: 4rem 1.5rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.svc-features-band > .wp-block-group__inner-container {
  max-width: 1116px;       /* match container content width */
  margin: 0 auto;
}
.svc-features-band > .wp-block-group__inner-container > h2,
.svc-features-band > .wp-block-group__inner-container > p {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.svc-features-band h2 { margin-top: 0; }
.svc-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}
.svc-features-grid .feature-tile {
  background: white;
  border-radius: 10px;
  border: 1px solid var(--slate-200);
  padding: 1rem 1.15rem;
}
.svc-features-grid .feature-tile strong {
  color: var(--purple); display: block; margin-bottom: .25rem; font-size: .95rem;
}
.svc-features-grid .feature-tile span {
  color: var(--slate-500); font-size: .85rem; line-height: 1.55; display: block;
}

/* ─── ALTERNATING DETAIL BLOCKS (image + text) ─── */
.svc-detail-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  margin: 2.5rem 0;
}
.svc-detail-block.is-reversed { direction: rtl; }
.svc-detail-block.is-reversed > * { direction: ltr; }
.svc-detail-block .svc-detail-content h2 { margin-top: 0; }
.svc-detail-block .svc-detail-content p { max-width: none; }
.svc-detail-block .svc-detail-visual {
  background: linear-gradient(135deg, var(--purple-50) 0%, var(--purple-100) 100%);
  border-radius: 16px;
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.svc-detail-block .svc-detail-visual img { width: 78%; height: 78%; object-fit: contain; }

/* ─── MOBILE ─── */
@media (max-width: 768px) {
  .svc-hero { padding: 6rem 0 3rem; }
  .svc-hero .hero-actions { flex-direction: column; align-items: flex-start; }
  .svc-hero .hero-actions .btn { width: 100%; text-align: center; justify-content: center; }
  .svc-stats .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-stats .stat::after { display: none; }
  .svc-body-inner .svc-process-grid > .wp-block-group__inner-container { grid-template-columns: 1fr; }
  .svc-features-grid { grid-template-columns: 1fr; }
  .svc-detail-block { grid-template-columns: 1fr; gap: 1.5rem; }
  .svc-detail-block.is-reversed { direction: ltr; }
  .svc-detail-block .svc-detail-visual { aspect-ratio: 16 / 10; }
  .svc-features-band { padding: 3rem 1.25rem; }
}

/* Tablet-ish: 3 cards becomes 2 + 1 stacked */
@media (min-width: 481px) and (max-width: 900px) {
  .svc-body-inner .svc-process-grid > .wp-block-group__inner-container { grid-template-columns: 1fr 1fr; }
  .svc-body-inner .svc-process-grid > .wp-block-group__inner-container > .wp-block-group:nth-child(3) { grid-column: 1 / -1; }
}

/* Industries cards on homepage — now clickable links */
.industries .ind {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.industries .ind:hover {
  transform: translateY(-3px);
  border-color: var(--purple);
  box-shadow: 0 12px 32px -12px rgba(73, 28, 177, .15);
  text-decoration: none;
}
.industries .ind h3 { color: var(--slate-900); }
.industries .ind:hover h3 { color: var(--purple); }

/* Hub grid responsive — overrides inline 3-col styles on mobile */
@media (max-width: 900px) {
  .cs-grid, .ind-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .cs-grid, .ind-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Also ensure ind cards on the homepage industries section collapse */
@media (max-width: 768px) {
  .industries .ind-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .industries .ind-grid {
    grid-template-columns: 1fr;
  }
}

/* /services/ hub — each service block uses a full SVG illustration in the visual column */
.svc-visual--rich img {
  width: 75% !important;
  height: 75% !important;
  object-fit: contain;
  opacity: 1;
  display: block;
}
.svc-visual--rich {
  /* Override theme default svc-visual that uses fill:var(--purple);opacity:.2 */
  padding: 1.5rem;
}
.svc-visual--rich svg {
  width: 100%;
  height: 100%;
  fill: initial;
  opacity: 1;
}

/* /services/ hub — rich SVG illustrations in svc-visual */
.svc-visual--rich img {
  width: 80% !important;
  height: 80% !important;
  object-fit: contain;
  opacity: 1;
  display: block;
}
.svc-visual--rich {
  padding: 1.5rem;
}
.svc-visual--rich svg {
  width: 100%;
  height: 100%;
  fill: initial;
  opacity: 1;
}

/* Eight-services grid: 3 per row on desktop, with the last incomplete row centered.
   Use 6-col base, each card spans 2. For 8 items: 3+3+2 centered (items 7-8 start at col 2). */
@media (min-width: 901px) {
  .services-grid {
    grid-template-columns: repeat(6, 1fr) !important;
  }
  .services-grid > .svc {
    grid-column: span 2;
  }
  /* Center the last row of 2 by offsetting the 7th item by 1 column */
  .services-grid > .svc:nth-last-child(2):nth-child(odd) {
    grid-column: 2 / span 2;
  }
  /* (8th item follows naturally at cols 4-5) */
}

/* ═══ MOBILE DRAWER — collapse sub-menus, tap to expand ═══ */
@media (max-width: 768px) {
  /* Parent items with sub-menus get a chevron toggle on the right */
  .nav-links.open > li.menu-item-has-children > a {
    position: relative;
    padding-right: 2.5rem;
  }
  .nav-links.open > li.menu-item-has-children > a::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--purple);
    border-bottom: 2px solid var(--purple);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .25s ease;
    opacity: .75;
  }
  .nav-links.open > li.menu-item-has-children.is-expanded > a::after {
    transform: translateY(-30%) rotate(-135deg);
    opacity: 1;
  }
  /* Hide sub-menus by default in mobile drawer */
  .nav-links.open > li.menu-item-has-children > .sub-menu {
    display: none !important;
  }
  .nav-links.open > li.menu-item-has-children.is-expanded > .sub-menu {
    display: block !important;
    padding: .25rem 0 .5rem .75rem;
    border-left: 2px solid var(--purple-100);
    margin-left: .25rem;
  }
  /* Tighten the item padding so more fits on screen */
  .nav-links.open > li > a {
    padding: .85rem .5rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   FINAL MOBILE DRAWER OVERRIDE — bulletproof
   This block is intentionally at the bottom + uses !important
   to win all earlier cascade fights. Edit nothing above this.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* Show the hamburger, hide the desktop nav-links */
  .nav-toggle { display: flex !important; }
  .nav-links:not(.open) { display: none !important; }

  /* The open drawer */
  .nav-links.open {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    position: fixed !important;
    top: 72px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-height: calc(100vh - 72px) !important;
    height: calc(100vh - 72px) !important;
    background: #ffffff !important;
    padding: 1rem 1.5rem 3rem !important;
    margin: 0 !important;
    gap: 0 !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: 0 8px 24px -8px rgba(15,23,42,.12) !important;
    border-top: 1px solid #E2E8F0 !important;
    list-style: none !important;
  }

  /* Each top-level item — full width, stacked */
  .nav-links.open > li {
    display: block !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    border-bottom: 1px solid #F1F5F9 !important;
    list-style: none !important;
    position: relative !important;
  }

  /* Top-level item links */
  .nav-links.open > li > a {
    display: block !important;
    width: 100% !important;
    padding: 1rem .5rem 1rem 0 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #0F172A !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
  }
  .nav-links.open > li > a:hover {
    color: #491CB1 !important;
  }

  /* Chevron on parents that have sub-menus */
  .nav-links.open > li.menu-item-has-children > a {
    padding-right: 2.5rem !important;
    position: relative !important;
  }
  .nav-links.open > li.menu-item-has-children > a::after {
    content: '' !important;
    position: absolute !important;
    right: .75rem !important;
    top: 50% !important;
    width: 8px !important;
    height: 8px !important;
    border-right: 2px solid #491CB1 !important;
    border-bottom: 2px solid #491CB1 !important;
    border-top: 0 !important;
    border-left: 0 !important;
    transform: translateY(-65%) rotate(45deg) !important;
    transition: transform .25s ease !important;
    opacity: .85 !important;
    display: block !important;
  }
  .nav-links.open > li.menu-item-has-children.is-expanded > a::after {
    transform: translateY(-35%) rotate(-135deg) !important;
    opacity: 1 !important;
  }

  /* Hide the desktop "hover bridge" pseudo on mobile — it can confuse touch targets */
  .nav-links.open > li.menu-item-has-children::before { display: none !important; }

  /* Sub-menus: collapsed by default, shown when parent is .is-expanded */
  .nav-links.open .sub-menu {
    display: none !important;
    position: static !important;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    list-style: none !important;
  }
  .nav-links.open > li.menu-item-has-children.is-expanded > .sub-menu {
    display: block !important;
    padding: .25rem 0 .75rem .75rem !important;
    border-left: 2px solid #E8DEFF !important;
    margin: 0 0 .5rem .25rem !important;
  }
  .nav-links.open .sub-menu li {
    width: 100% !important;
    border-bottom: 0 !important;
    list-style: none !important;
  }
  .nav-links.open .sub-menu a {
    display: block !important;
    padding: .6rem .25rem !important;
    font-size: .9rem !important;
    font-weight: 500 !important;
    color: #475569 !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
  }
  .nav-links.open .sub-menu a:hover {
    color: #491CB1 !important;
    background: #F5F0FF !important;
    border-radius: 4px !important;
  }

  /* Phone + CTA at the bottom of drawer */
  .nav-links.open .nav-phone {
    display: block !important;
    padding: 1rem .25rem !important;
    color: #491CB1 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
  }
  .nav-links.open .nav-cta {
    margin-top: 1rem !important;
    border-bottom: 0 !important;
  }
  .nav-links.open .nav-cta .btn {
    display: block !important;
    width: 100% !important;
    padding: .9rem 1.5rem !important;
    text-align: center !important;
  }
}

/* ═══ TEAM GRID (About page) ═══ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin: 2rem 0;
}
.team-card {
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  padding: 1.75rem 1.5rem;
}
.team-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-dark) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: .03em;
  margin-bottom: 1rem;
}
.team-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--slate-900);
  margin: 0 0 .15rem;
}
.team-card .team-role {
  font-size: .82rem;
  font-weight: 700;
  color: var(--purple);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 .85rem;
}
.team-card .team-bio {
  font-size: .9rem;
  color: var(--slate-700);
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 768px) {
  .team-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* ═══ CONTACT PAGE REBUILD ═══ */
.contact-body { padding: 4rem 0; }
.contact-grid-v2 {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: start;
}
.contact-form-col h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--slate-900);
  margin: 0 0 .5rem;
}
.contact-intro {
  color: var(--slate-500);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.75rem;
}
.contact-intro a { color: var(--purple); font-weight: 600; }

.contact-info-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.info-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  transition: border-color .25s ease;
}
.info-row:hover { border-color: var(--purple); }
.info-row.info-row-urgent {
  background: linear-gradient(135deg, var(--purple-darker) 0%, var(--purple-dark) 100%);
  border-color: transparent;
  color: white;
}
.info-row.info-row-urgent .info-row-label,
.info-row.info-row-urgent .info-row-meta { color: rgba(255,255,255,.7); }
.info-row.info-row-urgent .info-row-value { color: white; }

.info-row-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--purple-50);
  color: var(--purple);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.info-row-urgent .info-row-icon {
  background: rgba(255,255,255,.12);
  color: white;
}
.info-row-icon svg { width: 18px; height: 18px; }

.info-row-body { flex: 1; min-width: 0; }
.info-row-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--slate-400);
  margin-bottom: .15rem;
}
.info-row-value {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--slate-900);
  text-decoration: none;
  margin-bottom: .15rem;
  line-height: 1.35;
}
a.info-row-value:hover { color: var(--purple); }
.info-row-meta {
  font-size: .8rem;
  color: var(--slate-500);
  line-height: 1.5;
}

/* What to expect grid */
.contact-expect { padding: 4rem 0 5rem; background: var(--purple-50); }
.contact-expect h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  margin: .5rem 0 2rem;
  color: var(--slate-900);
}
.expect-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.expect-item {
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  padding: 1.5rem 1.25rem;
}
.expect-num {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--purple);
  margin-bottom: .5rem;
  line-height: 1;
}
.expect-item h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0 0 .35rem;
}
.expect-item p {
  font-size: .88rem;
  color: var(--slate-600);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 900px) {
  .contact-grid-v2 { grid-template-columns: 1fr; gap: 2rem; }
  .expect-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .expect-grid { grid-template-columns: 1fr; }
}

/* MSP comparison table */
.msp-compare-wrap{overflow-x:auto;margin:2rem 0;border:1px solid #e2e8f0;border-radius:12px}
.msp-compare{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff}
.msp-compare thead th{background:#491CB1;color:#fff;padding:.85rem 1rem;text-align:left;font-weight:700;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase}
.msp-compare tbody td{padding:.75rem 1rem;border-bottom:1px solid #f1f5f9;vertical-align:top}
.msp-compare tbody tr:last-child td{border-bottom:none}
.msp-compare tbody tr:nth-child(odd){background:#fbfaff}
.msp-compare tbody tr:hover{background:#f5f0ff}
.msp-compare a{color:#491CB1;font-weight:700;text-decoration:none}
.msp-compare a:hover{text-decoration:underline}
@media(max-width:768px){
  .msp-compare{font-size:.85rem}
  .msp-compare thead th,.msp-compare tbody td{padding:.6rem .75rem}
}

/* Privacy Policy link in footer bottom strip */
.footer-bottom-inner a{color:var(--slate-500);text-decoration:none;transition:color .2s}
.footer-bottom-inner a:hover{color:var(--purple);text-decoration:underline}

/* Reveal safety — fallback visible state regardless of .js-ready scope */
.reveal.visible{opacity:1;transform:translateY(0)}


/* ============================================================
   Clickable service cards (full-card link) — added 2026-05-25
   Fixes: H2/image/text non-clickable, invisible .svc-link
   ============================================================ */
a.svc-block{
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}
a.svc-block:hover h2{
  color:var(--purple);
  transition:color .25s ease;
}
a.svc-block:hover .svc-visual--rich{
  border-color:var(--purple);
  transition:border-color .25s ease;
}
/* Override original opacity:0 — make Read more always visible inside clickable cards */
a.svc-block .svc-link{
  opacity:1;
  transform:translateX(0);
  color:var(--purple);
}
a.svc-block:hover .svc-link{
  transform:translateX(4px);
  transition:transform .25s ease;
}

/* Constrain the arrow icon inside .svc-link — added 2026-05-25 */
.svc-link svg{
  width:14px;
  height:14px;
  fill:currentColor;
  flex-shrink:0;
  margin-left:.15rem;
}

/* ============================================================
   Locations archive  —  added 2026-05-25
   archive-wpseo_locations.php
   ============================================================ */
.locations-detail{padding:5rem 0;background:var(--slate-50)}
.locations-detail .container{display:flex;flex-direction:column;gap:5rem}

.loc-block{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:3rem;
  align-items:stretch;
  padding:0;
  background:white;
  border:1px solid var(--slate-200);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 4px 24px rgba(15,23,42,.04);
}
.loc-block:nth-child(even){grid-template-columns:1fr 1.1fr}
.loc-block:nth-child(even) .loc-photo{order:3}
.loc-block:nth-child(even) .loc-info{order:1}
.loc-block:nth-child(even) .loc-map{order:2}

.loc-photo{
  position:relative;
  min-height:320px;
  background:var(--purple-50);
  display:flex;align-items:center;justify-content:center;
}
.loc-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.loc-photo-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1rem;color:var(--purple);opacity:.55;
}
.loc-photo-placeholder svg{width:80px;height:80px;fill:currentColor}
.loc-photo-placeholder span{
  font-size:.78rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--purple);
}

.loc-info{padding:2.5rem;display:flex;flex-direction:column;gap:1.25rem}
.loc-info h2{font-size:1.75rem;font-weight:800;color:var(--slate-900);margin:0;letter-spacing:-.02em}
.loc-info .overline{margin:0}

.loc-meta{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1rem}
.loc-meta li{display:flex;gap:.85rem;align-items:flex-start;font-size:.92rem;color:var(--slate-700);line-height:1.55}
.loc-meta li strong{color:var(--slate-900);font-weight:700}
.loc-meta .loc-icon{flex-shrink:0;width:36px;height:36px;border-radius:10px;background:var(--purple-50);display:flex;align-items:center;justify-content:center}
.loc-meta .loc-icon svg{width:18px;height:18px;fill:var(--purple)}
.loc-meta a{color:var(--purple);text-decoration:none;font-weight:600}
.loc-meta a:hover{text-decoration:underline}
.loc-muted{color:var(--slate-500);font-size:.85rem}

.loc-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.5rem}
.loc-actions .btn{font-size:.88rem;padding:.65rem 1.1rem}
.loc-actions .btn svg{width:14px;height:14px;fill:currentColor;margin-left:.25rem;vertical-align:middle}

.loc-map{
  grid-column:1 / -1;
  min-height:380px;
  background:var(--slate-100);
  position:relative;
}
.loc-map iframe{display:block;width:100%;height:100%;border:0}

/* Mobile — stack everything */
@media (max-width: 768px){
  .loc-block,
  .loc-block:nth-child(even){grid-template-columns:1fr}
  .loc-block:nth-child(even) .loc-photo,
  .loc-block:nth-child(even) .loc-info,
  .loc-block:nth-child(even) .loc-map{order:initial}
  .loc-photo{min-height:240px}
  .loc-info{padding:1.75rem}
  .loc-map{min-height:300px}
  .locations-detail{padding:3rem 0}
  .locations-detail .container{gap:3rem}
}

/* Global button SVG sizing — added 2026-05-25 to catch all .btn arrows */
.btn svg{
  width:14px;
  height:14px;
  fill:currentColor;
  flex-shrink:0;
  margin-left:.25rem;
}

/* ============================================================
   Locations layout fix  —  added 2026-05-25
   Replace order-based alternation with grid-template-areas
   ============================================================ */
.loc-block{
  grid-template-columns:1.1fr 1fr;
  grid-template-areas:
    "photo info"
    "map   map";
}
.loc-block:nth-child(even){
  grid-template-columns:1fr 1.1fr;
  grid-template-areas:
    "info photo"
    "map  map";
}
.loc-photo{grid-area:photo}
.loc-info{grid-area:info}
.loc-map{grid-area:map}
/* Reset the previous order: rules so they don't conflict */
.loc-block:nth-child(even) .loc-photo,
.loc-block:nth-child(even) .loc-info,
.loc-block:nth-child(even) .loc-map{order:initial}

@media (max-width: 768px){
  .loc-block,
  .loc-block:nth-child(even){
    grid-template-columns:1fr;
    grid-template-areas:
      "photo"
      "info"
      "map";
  }
}

/* ============================================================
   Single location page — added 2026-05-25
   single-wpseo_locations.php
   ============================================================ */

/* Overview row: details + map side-by-side */
.single-loc-overview{padding:5rem 0 4rem;background:white}
.single-loc-overview h2{font-size:1.5rem;font-weight:800;color:var(--slate-900);margin:0 0 1.5rem;letter-spacing:-.02em}
.loc-overview-grid{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:3rem;
  align-items:stretch;
}
.loc-overview-map{min-height:380px;background:var(--slate-100);border-radius:14px;overflow:hidden}
.loc-overview-map iframe{display:block;width:100%;height:100%}

/* About this office */
.single-loc-about{padding:5rem 0;background:var(--slate-50);border-top:1px solid var(--slate-200);border-bottom:1px solid var(--slate-200)}
.loc-about-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:3rem;
  align-items:start;
}
.loc-about-photo{
  position:relative;border-radius:20px;overflow:hidden;
  background:var(--purple-50);min-height:420px;
  display:flex;align-items:center;justify-content:center;
}
.loc-about-photo img{width:100%;height:100%;object-fit:cover;display:block}
.loc-about-content .overline{margin:0 0 .75rem}
.loc-about-content h2{font-size:2rem;font-weight:800;color:var(--slate-900);margin:0 0 1.5rem;letter-spacing:-.02em;line-height:1.25}
.loc-about-body{color:var(--slate-600);line-height:1.75;font-size:1rem}
.loc-about-body p{margin:0 0 1rem}
.loc-features-list{
  list-style:none;padding:0;margin:1.5rem 0 0;
  display:grid;grid-template-columns:1fr 1fr;gap:.85rem;
}
.loc-features-list li{
  display:flex;gap:.6rem;align-items:flex-start;
  font-size:.92rem;color:var(--slate-700);font-weight:600;
}
.loc-features-list li svg{
  width:18px;height:18px;fill:var(--purple);flex-shrink:0;margin-top:2px;
}

/* Areas served */
.single-loc-areas{padding:5rem 0;background:white;text-align:center}
.single-loc-areas .overline{justify-self:center}
.single-loc-areas h2{font-size:1.75rem;font-weight:800;color:var(--slate-900);margin:.5rem 0 1rem;letter-spacing:-.02em}
.loc-areas-intro{color:var(--slate-600);font-size:1rem;margin:0 auto 2rem;max-width:560px}
.loc-areas-list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;
  max-width:780px;margin-inline:auto;
}
.loc-areas-list li{
  padding:.5rem 1rem;
  background:var(--purple-50);
  color:var(--purple);
  border-radius:999px;
  font-size:.88rem;
  font-weight:600;
}

/* Other location card */
.single-loc-other{padding:4rem 0;background:var(--slate-50);text-align:center}
.single-loc-other .overline{display:inline-block}
.single-loc-other h2{font-size:1.5rem;font-weight:800;color:var(--slate-900);margin:.5rem 0 1.5rem;letter-spacing:-.02em}
.loc-other-card{
  display:inline-flex;align-items:center;gap:1rem;
  background:white;border:1px solid var(--slate-200);border-radius:14px;
  padding:1.25rem 1.5rem;
  text-decoration:none;color:inherit;
  box-shadow:0 2px 12px rgba(15,23,42,.04);
  transition:all .25s ease;
  max-width:520px;text-align:left;
}
.loc-other-card:hover{
  border-color:var(--purple);transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(73,28,177,.08);
}
.loc-other-icon{
  flex-shrink:0;width:48px;height:48px;border-radius:12px;
  background:var(--purple-50);
  display:flex;align-items:center;justify-content:center;
}
.loc-other-icon svg{width:22px;height:22px;fill:var(--purple)}
.loc-other-text{flex:1;display:flex;flex-direction:column}
.loc-other-text strong{color:var(--slate-900);font-weight:800;font-size:1.05rem}
.loc-other-text span{color:var(--slate-600);font-size:.88rem;margin-top:.15rem}
.loc-other-arrow{flex-shrink:0;color:var(--purple)}
.loc-other-arrow svg{width:18px;height:18px;fill:currentColor}

@media (max-width: 768px){
  .loc-overview-grid,.loc-about-grid{grid-template-columns:1fr;gap:2rem}
  .loc-features-list{grid-template-columns:1fr}
  .loc-about-photo{min-height:280px}
  .single-loc-overview,.single-loc-about,.single-loc-areas{padding:3rem 0}
}

/* Footer Locations & Contact column sub-labels — added 2026-05-25 */
.footer-col li.footer-sublabel{
  margin-top:1rem;
  padding-top:.75rem;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(255,255,255,.5);
  list-style:none;
  pointer-events:none;
}
.footer-col li.footer-sublabel:first-of-type{margin-top:.5rem}

/* Single location: services section — added 2026-05-25 */
.single-loc-services{padding:5rem 0;background:white}
.single-loc-services .overline,
.single-loc-services h2{text-align:center}
.single-loc-services h2{font-size:1.75rem;font-weight:800;color:var(--slate-900);margin:.5rem auto 2rem;letter-spacing:-.02em;max-width:680px}

/* Featured city-specific service card */
.loc-svc-featured{
  display:block;
  background:linear-gradient(135deg, var(--purple) 0%, #6b3fc4 100%);
  color:white;
  border-radius:18px;
  padding:2.25rem 2.5rem;
  margin-bottom:2rem;
  text-decoration:none;
  position:relative;overflow:hidden;
  box-shadow:0 8px 32px rgba(73,28,177,.18);
  transition:transform .25s ease, box-shadow .25s ease;
}
.loc-svc-featured:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(73,28,177,.28)}
.loc-svc-featured-tag{
  display:inline-block;
  background:rgba(255,255,255,.18);
  color:white;
  padding:.3rem .75rem;
  border-radius:999px;
  font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:.85rem;
}
.loc-svc-featured h3{font-size:1.5rem;font-weight:800;color:white;margin:0 0 .65rem;letter-spacing:-.01em}
.loc-svc-featured p{color:rgba(255,255,255,.85);margin:0 0 1rem;line-height:1.6;font-size:.95rem;max-width:680px}
.loc-svc-featured-cta{
  display:inline-flex;align-items:center;gap:.35rem;
  font-weight:700;font-size:.92rem;
  color:white;
  border-bottom:2px solid rgba(255,255,255,.3);
  padding-bottom:2px;
  transition:border-color .2s ease;
}
.loc-svc-featured:hover .loc-svc-featured-cta{border-color:white}
.loc-svc-featured-cta svg{width:14px;height:14px;fill:currentColor}

/* Standard service cards */
.loc-svc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:1.25rem;
}
.loc-svc-card{
  display:flex;flex-direction:column;
  background:white;border:1px solid var(--slate-200);border-radius:14px;
  padding:1.5rem 1.5rem 1.65rem;
  text-decoration:none;color:inherit;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.loc-svc-card:hover{
  border-color:var(--purple);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(15,23,42,.06);
}
.loc-svc-card h3{
  font-size:1.05rem;font-weight:800;color:var(--slate-900);
  margin:0 0 .5rem;letter-spacing:-.01em;
}
.loc-svc-card p{
  color:var(--slate-600);font-size:.88rem;line-height:1.55;
  margin:0 0 1rem;flex:1;
}
.loc-svc-card-cta{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.82rem;font-weight:700;color:var(--purple);
}
.loc-svc-card-cta svg{width:12px;height:12px;fill:currentColor}
.loc-svc-card:hover .loc-svc-card-cta{gap:.5rem;transition:gap .2s ease}

@media (max-width: 600px){
  .single-loc-services{padding:3rem 0}
  .loc-svc-featured{padding:1.75rem;border-radius:14px}
  .loc-svc-featured h3{font-size:1.25rem}
}