/* Page: style.css */
/*
Theme Name: Watts Insight Group Cyber Theme
Theme URI: https://wattsinsightgroup.com.au/
Author: Jeremy Bowman
Description: Premium responsive WordPress theme for Watts Insight Group private investigation services.
Version: 5.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: watts-insight-group
*/

/* =========================================================
   WATTS INSIGHT GROUP - PREMIUM RESPONSIVE CSS V5
   Font loading note: load Google Fonts with <link> tags or wp_enqueue_style(), not @import.
   - Mobile-first
   - Breadcrumbs hidden from screen
   - Performance-aware selectors and animation
   - Existing PHP class names retained
   ========================================================= */

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root{
	/* Brand / surface colours */
	--wig-navy-950:#050b14;
	--wig-navy-900:#08101d;
	--wig-navy-850:#0b1322;
	--wig-navy-800:#0d1528;
	--wig-navy-750:#10192b;
	--wig-navy-700:#142038;

	--wig-white:#ffffff;
	--wig-ice:#f7f9fd;
	--wig-ice-2:#edf3fa;
	--wig-slate-50:#f8fafc;
	--wig-slate-100:#eef4fb;
	--wig-slate-200:#dbe7f4;
	--wig-slate-500:#64748b;
	--wig-slate-600:#52637a;
	--wig-slate-700:#334155;
	--wig-slate-900:#101827;

	--wig-cyan:#63f0ff;
	--wig-cyan-soft:#9ff7ff;
	--wig-violet:#7c5cff;
	--wig-warm:#ff9f6b;

	/* Semantic colours */
	--surface-body:var(--wig-navy-900);
	--surface-dark:var(--wig-navy-850);
	--surface-dark-2:var(--wig-navy-800);
	--surface-card:#ffffff;
	--surface-light:var(--wig-ice);
	--surface-light-2:var(--wig-ice-2);
	--surface-glass:rgba(17,26,45,.86);

	--text-dark:var(--wig-slate-900);
	--text-dark-soft:#56677f;
	--text-light:#e8edf6;
	--text-light-soft:#c8d7ea;
	--text-light-muted:#9fb1ca;

	--border-dark:rgba(255,255,255,.09);
	--border-dark-strong:rgba(255,255,255,.16);
	--border-light:rgba(15,23,42,.08);
	--border-light-strong:rgba(15,23,42,.13);

	/* Gradients */
	--grad-body:linear-gradient(180deg,#050b14 0%,#0b1322 54%,#08101d 100%);
	--grad-hero:
		radial-gradient(circle at 12% 18%,rgba(99,240,255,.18),transparent 30%),
		radial-gradient(circle at 86% 64%,rgba(124,92,255,.16),transparent 32%),
		linear-gradient(180deg,#09111e 0%,#0d1426 72%,#08101d 100%);
	--grad-panel:linear-gradient(180deg,rgba(17,26,45,.88),rgba(8,14,26,.78));
	--grad-panel-strong:linear-gradient(180deg,rgba(17,26,45,.94),rgba(8,14,26,.86));
	--grad-cyan:linear-gradient(135deg,var(--wig-cyan),var(--wig-cyan-soft));
	--grad-cyan-soft:linear-gradient(135deg,rgba(99,240,255,.12),rgba(124,92,255,.13));
	--grad-dark-section:linear-gradient(180deg,#0b1322 0%,#0e1729 100%);
	--grad-soft-section:linear-gradient(180deg,#edf3fa 0%,#f7f9fd 100%);
	--grad-icon:
		radial-gradient(circle at 34% 28%,rgba(99,240,255,.95),rgba(99,240,255,.16) 58%,transparent 62%),
		linear-gradient(135deg,#17243b,#0e1524);
	--grad-signal:
		linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)),
		linear-gradient(135deg,rgba(99,240,255,.08),rgba(124,92,255,.10));

	/* Type */
	--font-body:'Manrope',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
	--font-heading:'Space Grotesk',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

	/* Layout */
	--max-width:1200px;
	--measure:72ch;
	--measure-narrow:58ch;
	--shell-pad:1rem;
	--section-pad:clamp(3rem,6vw,5rem);
	--section-pad-tight:clamp(2.5rem,5vw,4rem);

	/* Radius */
	--radius-sm:14px;
	--radius-md:18px;
	--radius-lg:24px;
	--radius-xl:30px;
	--radius-pill:999px;

	/* Shadows - lighter for mobile paint performance */
	--shadow-card:0 12px 28px rgba(15,23,42,.08);
	--shadow-panel:0 20px 52px rgba(3,9,19,.26);
	--shadow-hover:0 16px 34px rgba(15,23,42,.11);

	/* Motion */
	--ease:cubic-bezier(.2,.8,.2,1);
	--fast:.18s;
	--normal:.26s;
}

/* Backward compatibility with existing snippets/classes */
:root{
	--bg:var(--wig-navy-900);
	--bg-2:var(--wig-navy-800);
	--bg-3:var(--wig-navy-750);
	--panel:var(--surface-glass);
	--panel-soft:var(--surface-glass);
	--panel-border:var(--border-dark);
	--text:var(--text-light);
	--muted:var(--text-light-muted);
	--muted-2:var(--text-light-soft);
	--darktext:var(--text-dark);
	--bodytext:var(--text-dark-soft);
	--lightbg:var(--surface-light);
	--white:var(--wig-white);
	--cyan:var(--wig-cyan);
	--cyan-soft:var(--wig-cyan-soft);
	--violet:var(--wig-violet);
	--copper:var(--wig-warm);
	--shadow:var(--shadow-panel);
	--shadow-soft:var(--shadow-card);
	--max:var(--max-width);
}

/* =========================================================
   2. RESET / BASE
   ========================================================= */
*,
*::before,
*::after{
	box-sizing:border-box;
}

html{
	scroll-behavior:smooth;
	-webkit-text-size-adjust:100%;
}

body{
	margin:0;
	min-width:320px;
	background:var(--grad-body);
	color:var(--text-light);
	font-family:var(--font-body);
	font-size:16px;
	line-height:1.6;
	overflow-x:hidden;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
}

img,
svg,
video{
	display:block;
	max-width:100%;
	height:auto;
}

a{
	color:inherit;
	text-decoration:none;
}

button,
input,
select,
textarea{
	font:inherit;
}

button{
	border:0;
}

ul,
ol{
	margin:0;
	padding:0;
}

main{
	display:block;
}

.shell{
	width:min(var(--max-width),calc(100% - var(--shell-pad)));
	margin-inline:auto;
}

/* =========================================================
   3. TYPOGRAPHY
   ========================================================= */
h1,
h2,
h3,
h4{
	margin:0 0 .75rem;
	font-family:var(--font-heading);
	font-weight:700;
	color:inherit;
	letter-spacing:-.025em;
	text-wrap:balance;
}

h1{
	font-size:clamp(2.25rem,10.5vw,3.35rem);
	line-height:1.04;
	max-width:16ch;
}

h2{
	font-size:clamp(1.75rem,7vw,2.6rem);
	line-height:1.1;
	max-width:18ch;
}

h3{
	font-size:clamp(1.12rem,3vw,1.35rem);
	line-height:1.24;
}

p{
	margin:0;
}

p,
li{
	line-height:1.74;
}

.eyebrow{
	margin:0 0 .85rem;
	color:var(--wig-cyan);
	font:800 .72rem/1.4 var(--font-heading);
	letter-spacing:.15em;
	text-transform:uppercase;
}

small{
	font-size:.88rem;
}

/* =========================================================
   4. ACCESSIBILITY
   ========================================================= */
.screen-reader-text{
	position:absolute !important;
	clip:rect(1px,1px,1px,1px);
	width:1px !important;
	height:1px !important;
	padding:0 !important;
	border:0 !important;
	overflow:hidden;
}

:focus-visible{
	outline:3px solid rgba(99,240,255,.78);
	outline-offset:3px;
}

/* =========================================================
   5. BUTTONS
   ========================================================= */
.button,
.nav-cta,
input[type="submit"],
button[type="submit"],
.cf7-wrap input.wpcf7-submit{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:.55rem;
	width:100%;
	min-height:52px;
	padding:.95rem 1.1rem;
	border:1px solid transparent;
	border-radius:var(--radius-pill);
	background:transparent;
	color:inherit;
	font-weight:800;
	line-height:1.2;
	text-align:center;
	cursor:pointer;
	box-shadow:none;
	transition:
		transform var(--normal) var(--ease),
		filter var(--normal) var(--ease),
		border-color var(--normal) var(--ease),
		background-color var(--normal) var(--ease),
		color var(--normal) var(--ease);
}

.button-primary,
input[type="submit"],
button[type="submit"],
.cf7-wrap input.wpcf7-submit{
	background:var(--grad-cyan);
	color:#061019;
}

.button-secondary{
	border-color:var(--border-dark-strong);
	color:var(--wig-white);
	background:rgba(255,255,255,.02);
}

.button:hover,
.nav-cta:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.cf7-wrap input.wpcf7-submit:hover{
	transform:translateY(-2px);
	filter:saturate(1.06);
}

.button-secondary:hover{
	border-color:rgba(99,240,255,.46);
	color:var(--wig-cyan);
	background:rgba(99,240,255,.045);
}

/* =========================================================
   6. HEADER / NAVIGATION
   ========================================================= */
.site-header{
	position:sticky;
	top:0;
	z-index:1000;
	background:#02132d;
	backdrop-filter:blur(18px);
	border-bottom:1px solid #02132d;
}

.header-inner{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:.75rem;
	min-height:74px;
	padding:.75rem 0;
	background:#02132d;
}

.brand{
	display:flex;
	align-items:center;
	gap:.75rem;
	min-width:0;
	flex:1 1 auto;
}

.brand img{
	width:auto;
	height:52px;
	max-width:176px;
	object-fit:contain;
	flex-shrink:0;
	filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));
}

.brand-copy{
	min-width:0;
}

.brand strong{
	display:block;
	color:var(--wig-white);
	font:800 1rem/1.15 var(--font-heading);
	letter-spacing:-.02em;
}

.brand em{
	display:block;
	color:var(--text-light-soft);
	font-size:.8rem;
	font-style:normal;
	line-height:1.25;
}

.menu-toggle{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
	padding:.55rem .8rem;
	border:1px solid rgba(255,255,255,.13);
	border-radius:var(--radius-sm);
	background:rgba(255,255,255,.025);
	color:var(--wig-white);
	font-size:1.1rem;
	cursor:pointer;
}

.site-nav{
	display:none;
	position:absolute;
	inset-inline:0;
	top:calc(100% + .55rem);
	max-height:76vh;
	padding:1rem;
	overflow-y:auto;
	border:1px solid rgba(255,255,255,.08);
	border-radius:22px;
	background:#0f182b;
	box-shadow:var(--shadow-panel);
}

.site-nav.open{
	display:block;
}

.nav-menu,
.nav-menu ul{
	list-style:none;
}

.nav-menu{
	display:flex;
	flex-direction:column;
	align-items:stretch;
	gap:.5rem;
	width:100%;
}

.nav-menu > li{
	position:relative;
}

.nav-menu a{
	display:flex;
	align-items:center;
	width:100%;
	border-radius:12px;
	color:#d8e2f0;
	font-weight:700;
	transition:color var(--fast) var(--ease),background-color var(--fast) var(--ease);
}

.nav-menu > li > a{
	padding:.75rem .25rem;
}

.nav-menu a:hover,
.nav-menu > li.current-menu-item > a,
.nav-menu > li.current-menu-ancestor > a{
	color:var(--wig-cyan);
}

.nav-menu .sub-menu{
	display:grid;
	gap:.15rem;
	padding:.25rem 0 .25rem .75rem;
}

.nav-menu .sub-menu a{
	padding:.62rem .65rem;
	color:#dbe7f9;
	font-size:.95rem;
}

.nav-menu .sub-menu a:hover,
.nav-menu .sub-menu li.current-menu-item > a{
	background:rgba(99,240,255,.075);
	color:var(--wig-white);
}

.nav-menu .nav-cta,
.nav-menu > li > .nav-cta,
.nav-cta-item{
	width:100%;
	margin-inline-start:0;
}

/* =========================================================
   7. BREADCRUMBS - HIDDEN FROM SCREEN
   ========================================================= */
.breadcrumb-wrap,
.wig-service-page .breadcrumb-wrap{
	display:none !important;
	visibility:hidden !important;
	height:0 !important;
	margin:0 !important;
	padding:0 !important;
	border:0 !important;
	overflow:hidden !important;
}

/* =========================================================
   8. HERO
   ========================================================= */
.hero{
	position:relative;
	overflow:hidden;
	background:var(--grad-hero);
}

.hero::before{
	content:"";
	position:absolute;
	inset:0;
	background-image:var(--hero-image);
	background-size:cover;
	background-position:center;
	opacity:.5;
	mix-blend-mode:screen;
	pointer-events:none;
}

.hero::after{
	content:"";
	position:absolute;
	inset:auto 0 0;
	height:34%;
	background:linear-gradient(180deg,transparent,rgba(8,16,29,.88));
	pointer-events:none;
}

.hero-grid{
	position:relative;
	z-index:1;
	display:grid;
	grid-template-columns:1fr;
	gap:1rem;
	align-items:start;
	padding:1.15rem 0 2.75rem;
}

.glass{
	background:var(--grad-panel);
	border:1px solid var(--border-dark);
	border-radius:var(--radius-lg);
	backdrop-filter:blur(16px);
	box-shadow:var(--shadow-panel);
}

.hero-copy{
	display:flex;
	flex-direction:column;
	justify-content:center;
	min-height:0;
	height:100%;
	padding:clamp(1.25rem,4vw,2rem);
}

.hero-copy h1,
.wig-hero .hero-copy h1{
	max-width:16ch;
	margin-bottom:1rem;
	color:var(--wig-white);
}

.hero-text{
	max-width:var(--measure);
	color:#d3dfef;
	font-size:clamp(1rem,1.4vw,1.1rem);
	line-height:1.78;
}

.hero-actions{
	display:flex;
	flex-direction:column;
	align-items:stretch;
	gap:.8rem;
	margin-top:1.55rem;
}

.hero-proof{
	display:flex;
	flex-wrap:wrap;
	gap:.55rem;
	margin-top:1rem;
}

.hero-proof span{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:100%;
	min-height:34px;
	padding:.45rem .75rem;
	border:1px solid rgba(255,255,255,.11);
	border-radius:var(--radius-pill);
	background:rgba(255,255,255,.025);
	color:#d5e1ef;
	font-size:.88rem;
	font-weight:700;
	text-align:center;
}

.hero-side-stack{
	display:grid;
	gap:1rem;
	align-content:start;
	align-self:stretch;
}

.hero-card,
.hero-image-panel{
	width:100%;
}

.hero-card{
	padding:clamp(1.15rem,3vw,1.4rem);
	margin-top:0;
}

.hero-card > .hero-card{
	padding:0;
	margin:0;
	border:0;
	border-radius:0;
	background:transparent;
	box-shadow:none;
	backdrop-filter:none;
}

.hero-card h2,
.hero-card h3,
.hero-card-title{
	color:var(--wig-white);
}

.hero-card-title{
	margin:0 0 .9rem;
	font-size:1.08rem;
	line-height:1.25;
}

.hero-image-panel{
	display:flex;
	align-items:stretch;
	justify-content:stretch;
	min-height:210px;
	overflow:hidden;
	border-radius:var(--radius-lg);
}

.hero-side-image{
	width:100%;
	height:100%;
	min-height:210px;
	object-fit:cover;
	object-position:center;
	border-radius:var(--radius-lg);
}

.hero-image-panel--primary .hero-side-image{
	aspect-ratio:16/9;
}

.hero-side-image--contain{
	object-fit:contain;
	padding:.85rem;
	background:var(--wig-white);
}

.metric-row{
	display:grid;
	grid-template-columns:1fr;
	gap:.75rem;
	margin-top:1rem;
}

.metric-row div{
	padding:.85rem;
	border:1px solid rgba(255,255,255,.065);
	border-radius:var(--radius-md);
	background:rgba(255,255,255,.035);
}

.metric-row strong{
	display:block;
	color:var(--wig-cyan);
	font:800 1.12rem var(--font-heading);
	letter-spacing:-.015em;
}

.metric-row small{
	color:var(--text-light-muted);
}

.hero-bullets{
	list-style:none;
	display:grid;
	gap:.72rem;
	margin-top:1rem;
}

.hero-bullets li{
	position:relative;
	padding-inline-start:1.2rem;
	color:#d6e2f1;
	font-size:.97rem;
	line-height:1.58;
}

.hero-bullets li::before{
	content:"";
	position:absolute;
	inset-inline-start:0;
	top:.66rem;
	width:7px;
	height:7px;
	border-radius:50%;
	background:var(--wig-warm);
}

.hero-card-note{
	margin-top:1rem;
	color:#d5e0ef;
	line-height:1.7;
}

/* Signal bar - home page style, softened */
.signal{
	position:relative;
	height:clamp(88px,11vw,124px);
	overflow:hidden;
	border:1px solid rgba(255,255,255,.065);
	border-radius:18px;
	background:var(--grad-signal);
}

.signal span{
	position:absolute;
	inset-inline-start:-46%;
	display:block;
	width:44%;
	height:2px;
	background:linear-gradient(90deg,transparent,rgba(99,240,255,.58),transparent);
	animation:signalScan 5.2s linear infinite;
}

.signal span:nth-child(1){top:24%; animation-delay:0s;}
.signal span:nth-child(2){top:42%; animation-delay:.8s; opacity:.55;}
.signal span:nth-child(3){top:60%; animation-delay:1.6s; opacity:.78;}
.signal span:nth-child(4){top:76%; animation-delay:2.4s; opacity:.45;}

.signal::before,
.signal::after{
	content:none;
}

/* Compatibility for older signal--bar snippets */
.signal.signal--bar span{
	display:block;
}

/* =========================================================
   9. SECTIONS
   ========================================================= */
.section{
	padding:var(--section-pad) 0;
	background:var(--surface-light);
	color:var(--text-dark);
}

.section--dark{
	background:var(--grad-dark-section);
	color:var(--text-light);
}

.section--soft-slate{
	background:var(--grad-soft-section);
	color:var(--text-dark);
}

.section-heading{
	max-width:860px;
	margin:0 auto clamp(1.75rem,3.4vw,2.45rem);
	text-align:center;
}

.section-heading.left{
	margin-inline-start:0;
	text-align:start;
}

.section-heading.narrow{
	max-width:760px;
}

.section-heading h2{
	max-width:18ch;
	margin-inline:auto;
	color:var(--text-dark);
}

.section-heading.left h2{
	margin-inline:0;
}

.section--dark .section-heading h2{
	color:var(--wig-white);
}

.section-heading p{
	max-width:var(--measure);
	margin-inline:auto;
	color:var(--text-dark-soft);
	font-size:clamp(1rem,1.2vw,1.08rem);
	line-height:1.8;
}

.section-heading.left p{
	margin-inline:0;
}

.section--dark .section-heading p{
	color:#c5d3e7;
}

/* =========================================================
   10. GRIDS + CARDS
   ========================================================= */
.card-grid,
.contact-grid,
.faq-shell,
.form-row{
	display:grid;
	gap:1rem;
}

.card-grid.two,
.card-grid.three,
.card-grid.four,
.contact-grid,
.faq-shell,
.form-row.two{
	grid-template-columns:1fr;
}

.card,
.feature-card,
.service-card,
.step-card,
.testimonial-card,
.faq-item,
.intake-form,
.generic-page .entry-content{
	background:var(--surface-card);
	border:1px solid var(--border-light);
	border-radius:var(--radius-lg);
	padding:clamp(1.15rem,3vw,1.55rem);
	color:var(--text-dark);
	box-shadow:var(--shadow-card);
}

.feature-card,
.service-card,
.step-card,
.testimonial-card{
	transition:transform var(--normal) var(--ease),box-shadow var(--normal) var(--ease),border-color var(--normal) var(--ease);
}

.feature-card:hover,
.service-card:hover,
.step-card:hover,
.testimonial-card:hover{
	transform:translateY(-2px);
	box-shadow:var(--shadow-hover);
	border-color:var(--border-light-strong);
}

.feature-card h2,
.feature-card h3,
.service-card h2,
.service-card h3,
.step-card h3,
.testimonial-card h3{
	margin:0 0 .9rem;
	color:var(--text-dark);
	line-height:1.25;
}

.feature-card p,
.service-card p,
.step-card p,
.testimonial-card p,
.faq-item p{
	max-width:68ch;
	color:var(--text-dark-soft);
	font-size:1rem;
	line-height:1.78;
}

.feature-card p + p,
.service-card p + p,
.step-card p + p,
.testimonial-card p + p{
	margin-top:1rem;
}

.section--dark .feature-card,
.section--dark .service-card{
	background:var(--grad-panel);
	border-color:var(--border-dark);
	color:var(--text-light);
	box-shadow:none;
}

.section--dark .feature-card:hover,
.section--dark .service-card:hover{
	border-color:rgba(99,240,255,.2);
	box-shadow:0 14px 34px rgba(0,0,0,.16);
}

.section--dark .feature-card h2,
.section--dark .feature-card h3,
.section--dark .service-card h2,
.section--dark .service-card h3{
	color:var(--wig-white);
}

.section--dark .feature-card p,
.section--dark .service-card p{
	color:#c7d4e8;
}

.service-card a,
.service-link{
	display:inline-flex;
	align-items:center;
	margin-top:.9rem;
	color:var(--wig-cyan);
	font-weight:800;
}

.service-icon{
	width:56px;
	height:56px;
	margin-bottom:1rem;
	border-radius:18px;
	background:var(--grad-icon);
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}

.step-card span{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:38px;
	height:38px;
	margin-bottom:1rem;
	border-radius:var(--radius-sm);
	background:var(--grad-cyan);
	color:#08101d;
	font:800 .92rem var(--font-heading);
}

.testimonial-card footer{
	margin-top:1rem;
	color:var(--wig-slate-700);
	font-weight:800;
}

.services-grid{
	display:grid;
	grid-template-columns:1fr;
	gap:1rem;
	align-items:stretch;
}

.services-grid .service-card,
.service-card-wide{
	display:flex;
	flex-direction:column;
	height:100%;
}

.services-grid p,
.service-card-wide p{
	max-width:64ch;
	margin-bottom:1rem;
	line-height:1.74;
}

.services-grid .service-link,
.service-card-wide .service-link{
	margin-top:auto;
}

.services-wide-wrap{
	margin-top:1.25rem;
}

.service-card-wide{
	display:grid;
	grid-template-columns:1fr;
	gap:1rem;
	align-items:start;
}

.service-card-wide .service-icon{
	margin-bottom:0;
}

.service-card-wide-content{
	display:flex;
	flex-direction:column;
	min-height:100%;
}

/* =========================================================
   11. IMAGES
   ========================================================= */
.image-card{
	overflow:hidden;
}

.service-image{
	width:100%;
	height:clamp(205px,42vw,260px);
	margin-bottom:1rem;
	border-radius:var(--radius-md);
	object-fit:cover;
	background:var(--wig-slate-200);
}

.image-card .service-image + h3{
	margin-top:.15rem;
}

.featured-hero-image{
	margin-bottom:1rem;
	border-radius:var(--radius-lg);
	overflow:hidden;
}

.page-image-banner{
	margin-top:1.5rem;
}

.image-placeholder-card{
	padding:0;
	overflow:hidden;
}

.image-placeholder,
.hero-image-placeholder{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:220px;
	padding:1rem;
	border:2px dashed rgba(99,240,255,.22);
	border-radius:var(--radius-lg);
	background:linear-gradient(180deg,rgba(17,26,45,.06),rgba(17,26,45,.02)),var(--wig-white);
	text-align:center;
}

.image-placeholder p,
.hero-image-placeholder p{
	color:#425166;
	line-height:1.5;
}

/* =========================================================
   12. LISTS + FAQ
   ========================================================= */
.bullet-list{
	display:grid;
	gap:.8rem;
	padding-inline-start:1.25rem;
	color:var(--text-dark-soft);
	line-height:1.75;
}

.bullet-list li{
	padding-inline-start:.15rem;
}

.section--dark .bullet-list{
	color:#c7d4e8;
}

.faq-list{
	display:grid;
	gap:.85rem;
}

.faq-item summary{
	position:relative;
	padding-inline-end:1.6rem;
	color:var(--text-dark);
	font:800 1rem/1.5 var(--font-body);
	list-style:none;
	cursor:pointer;
}

.faq-item summary::-webkit-details-marker{
	display:none;
}

.faq-item summary::after{
	content:"+";
	position:absolute;
	inset-inline-end:0;
	top:0;
	color:var(--wig-cyan);
	font-weight:800;
}

.faq-item[open] summary::after{
	content:"–";
}

.faq-item div{
	padding-top:1rem;
}

/* =========================================================
   13. FORMS
   ========================================================= */
label span{
	display:block;
	margin:0 0 .45rem;
	color:var(--text-dark);
	font-weight:800;
}

input,
select,
textarea,
.cf7-wrap .wpcf7 input[type="text"],
.cf7-wrap .wpcf7 input[type="email"],
.cf7-wrap .wpcf7 input[type="tel"],
.cf7-wrap .wpcf7 select,
.cf7-wrap .wpcf7 textarea{
	width:100%;
	min-height:50px;
	padding:.95rem 1rem;
	border:1px solid rgba(17,24,39,.13);
	border-radius:var(--radius-sm);
	background:var(--wig-slate-50);
	color:var(--text-dark);
	outline:none;
	font:inherit;
	font-size:16px;
	transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease),background-color var(--fast) var(--ease);
}

input:focus,
select:focus,
textarea:focus,
.cf7-wrap .wpcf7 input[type="text"]:focus,
.cf7-wrap .wpcf7 input[type="email"]:focus,
.cf7-wrap .wpcf7 input[type="tel"]:focus,
.cf7-wrap .wpcf7 select:focus,
.cf7-wrap .wpcf7 textarea:focus{
	border-color:rgba(99,240,255,.7);
	background:var(--wig-white);
	box-shadow:0 0 0 4px rgba(99,240,255,.13);
}

textarea,
.cf7-wrap .wpcf7 textarea{
	min-height:155px;
	resize:vertical;
}

.form-wrap{
	max-width:900px;
}

.form-row{
	margin-bottom:1rem;
}

.checkbox{
	display:flex;
	align-items:flex-start;
	gap:.65rem;
	margin:1rem 0;
}

.checkbox input{
	width:auto;
	min-height:0;
	margin-top:.35rem;
}

.cf7-wrap .wpcf7 form{
	margin:0;
}

.cf7-wrap .wpcf7-form-control-wrap{
	display:block;
	width:100%;
}

.wpcf7-not-valid-tip,
.form-error,
.error-message{
	display:block;
	margin-top:.45rem;
	color:#b84a24;
	font-weight:800;
}

.section--dark .wpcf7-not-valid-tip,
.section--dark .form-error,
.section--dark .error-message{
	color:#ffd3c2;
}

.wpcf7 form .wpcf7-response-output,
.form-message,
.validation-message{
	margin:1rem 0 0;
	padding:1rem;
	border-radius:var(--radius-sm);
	line-height:1.6;
}

.cf7-wrap .wpcf7-spinner{
	margin-top:.75rem;
}

/* =========================================================
   14. CASE STUDY
   ========================================================= */
.case-study-section{
	padding-top:var(--section-pad-tight);
	padding-bottom:var(--section-pad-tight);
}

.case-study-section .section-heading h2{
	max-width:20ch;
}

.case-study-flow{
	display:grid;
	gap:clamp(1.15rem,2.6vw,1.85rem);
}

.card-grid.case-study-grid{
	gap:clamp(1.15rem,2.6vw,1.85rem) !important;
	align-items:stretch;
}

.case-study-flow .feature-card{
	height:100%;
}

.case-study-flow .feature-card p,
.case-study-wide p{
	max-width:74ch;
}

.case-study-flow .feature-card p + p,
.case-study-flow .feature-card p + ul,
.case-study-flow .feature-card .bullet-list{
	margin-top:1.05rem;
}

.case-study-flow .bullet-list{
	margin-bottom:0;
}

.flow-gap{
	margin-top:1rem;
}

/* =========================================================
   15. CTA
   ========================================================= */
.cta-band{
	padding:clamp(3rem,5vw,4.25rem) 0;
	background:var(--grad-cyan-soft),var(--wig-navy-800);
	color:var(--wig-white);
}

.cta-panel{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:1rem;
	padding:clamp(1.25rem,3vw,1.8rem);
	border:1px solid var(--border-dark);
	border-radius:var(--radius-xl);
	background:rgba(255,255,255,.045);
}

.cta-panel h2{
	color:var(--wig-white);
}

.cta-panel p{
	color:#d4e0ee;
	line-height:1.75;
}

/* =========================================================
   16. FOOTER
   ========================================================= */
.site-footer{
	padding-top:3rem;
	background:#050b14;
	color:var(--text-light-soft);
	border-top:1px solid #02132d;
}

.footer-grid{
	display:grid;
	grid-template-columns:1fr;
	gap:1.35rem;
	align-items:start;
}

.footer-brand{
	display:flex;
	align-items:center;
	gap:1rem;
}

.footer-brand img{
	width:auto;
	height:58px;
	max-width:176px;
	object-fit:contain;
	flex-shrink:0;
	filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));
}

.footer-brand-copy h3,
.site-footer h3{
	margin:0 0 .9rem;
	color:var(--wig-white);
	font-size:1rem;
	line-height:1.2;
}

.footer-brand-copy p{
	color:var(--text-light-soft);
	line-height:1.65;
}

.footer-links{
	display:grid;
	gap:.65rem;
	list-style:none;
}

.footer-links .menu-item{
	list-style:none;
}

.footer-links a{
	color:var(--text-light-soft);
	transition:color var(--fast) var(--ease);
}

.footer-links a:hover{
	color:var(--wig-cyan);
}

.footer-bottom{
	margin-top:1.75rem;
	padding:1.5rem 0 1.8rem;
	border-top:1px solid rgba(255,255,255,.06);
	color:#8fa4bf;
	font-size:.88rem;
	line-height:1.55;
}

.footer-bottom--center{
	text-align:center;
}

.footer-bottom--center p{
	margin:0;
}

/* =========================================================
   17. GENERIC WORDPRESS PAGES
   ========================================================= */
body.page-template-default .generic-page{
	background:var(--surface-light);
	color:var(--text-dark);
}

.generic-page .shell{
	padding:4rem 0;
}

.generic-page h1{
	color:var(--text-dark);
	max-width:20ch;
}

.generic-page .entry-content p,
.generic-page .entry-content li{
	color:var(--text-dark-soft);
	line-height:1.8;
}

/* Performance: skip rendering lower sections until near viewport */
.section,
.cta-band,
.site-footer{
	content-visibility:auto;
	contain-intrinsic-size:1px 900px;
}

.hero,
.site-header{
	content-visibility:visible;
}

/* =========================================================
   18. RESPONSIVE BREAKPOINTS
   ========================================================= */
@media only screen and (min-width:600px){
	:root{
		--shell-pad:1.4rem;
	}

	.header-inner{
		min-height:82px;
		padding:.9rem 0;
	}

	.brand img{
		height:60px;
		max-width:205px;
	}

	.brand strong{
		font-size:1.05rem;
	}

	.brand em{
		font-size:.84rem;
	}

	.hero-grid{
		padding:1.4rem 0 3.2rem;
	}

	.hero-proof span{
		width:auto;
	}

	.footer-brand img{
		height:66px;
		max-width:205px;
	}
}

@media only screen and (min-width:768px){
	:root{
		--shell-pad:1.6rem;
	}

	.button,
	.nav-cta,
	input[type="submit"],
	button[type="submit"],
	.cf7-wrap input.wpcf7-submit{
		width:auto;
		padding:.95rem 1.25rem;
	}

	.hero-actions{
		flex-direction:row;
		align-items:center;
	}

	.hero-actions .button{
		min-width:220px;
	}

	.metric-row{
		grid-template-columns:repeat(3,1fr);
	}

	.card-grid.two,
	.contact-grid,
	.form-row.two{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}

	.card-grid.three,
	.card-grid.four,
	.services-grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}

	.service-card-wide{
		grid-template-columns:56px minmax(0,1fr);
	}

	.footer-grid{
		grid-template-columns:1.35fr 1fr 1fr;
	}

	.footer-brand{
		align-items:flex-start;
	}
}

@media only screen and (min-width:992px){
	:root{
		--shell-pad:2rem;
	}

	.header-inner{
		min-height:96px;
		padding:1rem 0;
		gap:1rem;
	}

	.brand{
		gap:1rem;
	}

	.brand img{
		height:72px;
		max-width:240px;
	}

	.brand strong{
		font-size:1.2rem;
		line-height:1.12;
	}

	.brand em{
		font-size:.98rem;
	}

	.menu-toggle{
		display:none;
	}

	.site-nav{
		position:static;
		display:flex;
		align-items:center;
		max-height:none;
		padding:0;
		overflow:visible;
		border:0;
		border-radius:0;
		background:transparent;
		box-shadow:none;
	}

	.nav-menu{
		flex-direction:row;
		align-items:center;
		gap:1.25rem;
		width:auto;
	}

	.nav-menu > li > a{
		width:auto;
		padding:.3rem 0;
		border-radius:0;
		white-space:nowrap;
	}

	.nav-menu .sub-menu{
		position:absolute;
		inset-inline-start:0;
		top:calc(100% + .8rem);
		display:none;
		min-width:270px;
		padding:.75rem;
		border:1px solid var(--border-dark);
		border-radius:20px;
		background:var(--wig-navy-750);
		box-shadow:var(--shadow-panel);
		z-index:20;
	}

	.nav-menu li:hover > .sub-menu,
	.nav-menu li:focus-within > .sub-menu{
		display:grid;
	}

	.nav-menu .sub-menu a{
		padding:.72rem .85rem;
	}

	.nav-menu .nav-cta,
	.nav-menu > li > .nav-cta,
	.nav-cta-item{
		width:auto;
		margin-inline-start:.35rem;
	}

	h1{
		font-size:clamp(3rem,4.2vw,4.55rem);
		max-width:15ch;
	}

	h2{
		font-size:clamp(2.05rem,3.1vw,3rem);
	}

	.hero-grid{
		grid-template-columns:minmax(0,1.13fr) minmax(340px,.87fr);
		gap:1.35rem;
		align-items:stretch;
		padding:2.1rem 0 4.4rem;
	}

	.hero-side-stack{
		grid-template-rows:auto 1fr;
		height:100%;
	}

	.hero-image-panel,
	.hero-image-panel--primary,
	.hero-side-image,
	.hero-image-panel--primary .hero-side-image{
		min-height:245px;
	}

	.section-heading{
		margin-bottom:2.35rem;
	}

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

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

	.faq-shell{
		grid-template-columns:.85fr 1.15fr;
		gap:2rem;
	}

	.card-grid.two{
		gap:1.35rem;
	}

	.card-grid.three,
	.card-grid.four,
	.services-grid{
		gap:1.25rem;
	}

	.cta-panel{
		flex-direction:row;
		align-items:center;
		justify-content:space-between;
	}

	.footer-brand img{
		height:72px;
		max-width:220px;
	}
}

@media only screen and (min-width:1200px){
	.hero-grid{
		grid-template-columns:minmax(0,1.1fr) minmax(370px,.9fr);
	}
}

@media only screen and (max-width:640px){
	.section-heading,
	.section-heading.narrow,
	.section-heading.left{
		text-align:start;
		margin-inline:0;
	}

	.section-heading h2,
	.section-heading p{
		max-width:100%;
		margin-inline:0;
	}

	.hero-copy h1,
	.wig-hero .hero-copy h1{
		max-width:100%;
	}

	.hero-text{
		line-height:1.7;
	}

	.feature-card p,
	.service-card p,
	.step-card p,
	.testimonial-card p,
	.faq-item p{
		font-size:.98rem;
		line-height:1.72;
	}
}

@media only screen and (orientation:landscape) and (max-width:900px){
	.site-nav{
		max-height:65vh;
	}
}

/* =========================================================
   19. ADMIN BAR
   ========================================================= */
.admin-bar .site-header{
	top:32px;
}

@media (max-width:782px){
	.admin-bar .site-header{
		top:46px;
	}
}

/* =========================================================
   20. ANIMATION / MOTION
   ========================================================= */
@keyframes signalScan{
	0%{transform:translateX(0)}
	100%{transform:translateX(340%)}
}

@media (prefers-reduced-motion:reduce){
	*,
	*::before,
	*::after{
		scroll-behavior:auto !important;
		animation:none !important;
		transition:none !important;
	}
}


/* =========================================================
   21. PERFORMANCE HARDENING
   Based on CSS performance guidance:
   - keep selectors simple
   - avoid @import
   - avoid layout-triggering animations
   - minify/cache production CSS
   ========================================================= */
@media (prefers-reduced-data: reduce){
	.hero::before{
		opacity:.28;
	}

	.signal span{
		animation:none;
	}

	.feature-card:hover,
	.service-card:hover,
	.step-card:hover,
	.testimonial-card:hover{
		transform:none;
	}
}

/* =========================================================
   22. PRINT
   ========================================================= */
@media print{
	.site-header,
	.site-footer,
	.cta-band,
	.hero-actions,
	.menu-toggle,
	.site-nav,
	.signal{
		display:none !important;
	}

	body{
		background:#fff;
		color:#000;
	}

	.section,
	.section--dark,
	.section--soft-slate,
	.hero{
		background:#fff !important;
		color:#000 !important;
		padding:1rem 0;
	}

	.card,
	.feature-card,
	.service-card{
		box-shadow:none;
		border:1px solid #ccc;
	}
}