/* 404 Network Ninjas — theme stylesheet */

:root{
	--dojo:#10131A;
	--ember:#D9612F;
	--amber:#F0A94E;
	--paper:#F2EEE5;
	--ink:#1E1C1A;
	--steel:#6E93BC;
	--line:rgba(255,255,255,.12);
}

body{ background:var(--paper); }

/* ---------- Motion ---------- */
@keyframes drift{ 0%{transform:translate(0,0);} 100%{transform:translate(-60px,-40px);} }
@keyframes pulse{ 0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(217,97,47,.55);} 50%{opacity:.55; box-shadow:0 0 0 6px rgba(217,97,47,0);} }
@keyframes shimmer{ 0%{background-position:-120% 0;} 100%{background-position:220% 0;} }
@keyframes fadeUp{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }
@keyframes spinSlow{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

/* Entrance animations are opt-in for users who don't mind motion. Base state for
   h1/.sub/.promo/.cta-row/.stat/.step is always fully visible (opacity:1, no transform
   offset) so content never depends on an animation actually running — important for
   prefers-reduced-motion users, crawlers, and any tab/context where CSS animations
   get paused (e.g. a backgrounded browser tab freezes at the animation's start frame). */
@media (prefers-reduced-motion: no-preference){
	.hero h1{ opacity:0; animation:fadeUp .7s .1s ease forwards; }
	.hero .sub{ opacity:0; animation:fadeUp .7s .22s ease forwards; }
	.promo{ opacity:0; animation:fadeUp .7s .3s ease forwards; }
	.cta-row{ opacity:0; animation:fadeUp .7s .38s ease forwards; }
	.stat{ opacity:0; animation:fadeUp .6s ease forwards; }
	.stat:nth-child(2){ animation-delay:.15s; }
	.stat:nth-child(3){ animation-delay:.3s; }
	.step{ opacity:0; transform:translateY(16px); }
	.step.in{ opacity:1; transform:translateY(0); }
}
.step{ transition:opacity .6s ease, transform .6s ease; }

/* ---------- Site header ---------- */
.site-header{
	background:var(--dojo); color:#EDE9E2; position:sticky; top:0; z-index:40;
	border-bottom:1px solid var(--line);
}
.site-header .wp-block-group{ padding:16px 24px; }
.site-header a{ color:#EDE9E2; text-decoration:none; }
.site-header .custom-logo-link img{ height:34px; width:auto; display:block; }
.site-header nav a{
	font-family:'Inter',sans-serif; font-size:14px; font-weight:500; color:#CBC4B6; margin-left:28px;
	transition:color .15s ease;
}
.site-header nav a:hover{ color:var(--amber); }
.site-header .header-cta{
	font-family:'Inter',sans-serif; font-weight:700; font-size:13.5px; color:#fff !important;
	background:var(--ember); padding:11px 20px; border-radius:2px; margin-left:28px !important;
}
.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:32px; height:32px; background:none; border:none; cursor:pointer; padding:0; }
.nav-toggle span{ display:block; width:100%; height:2px; background:#EDE9E2; transition:transform .2s ease, opacity .2s ease; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (max-width:900px){
	.nav-toggle{ display:flex; }
	#primary-nav{
		display:none; flex-direction:column; align-items:flex-start; gap:2px;
		position:absolute; left:0; right:0; top:100%; background:var(--dojo); border-top:1px solid var(--line);
		padding:8px 24px 20px;
	}
	#primary-nav.is-open{ display:flex; }
	#primary-nav a{ margin-left:0 !important; padding:12px 0; width:100%; }
	#primary-nav .header-cta{ margin-top:10px !important; text-align:center; }
	.site-header .wp-block-group{ position:relative; }
}

/* ---------- Site footer ---------- */
.site-footer{ background:#0C0E13; color:#8f8a7c; padding:56px 24px 28px; }
.site-footer a{ color:#C7C0B2; text-decoration:none; }
.site-footer a:hover{ color:var(--amber); }
.site-footer .footer-eyebrow{
	font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#6f6a5e;
}

/* ---------- Hero ---------- */
.hero{ background:var(--dojo); color:#EDE9E2; position:relative; overflow:hidden; }
.grid-bg{
	position:absolute; inset:-10%; background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.4px);
	background-size:34px 34px; animation:drift 26s linear infinite alternate; pointer-events:none;
}
.glow{
	position:absolute; left:var(--gx, 78%); top:var(--gy, -5%); width:640px; height:640px; border-radius:50%;
	transform:translate(-50%,-50%);
	background:radial-gradient(circle, rgba(217,97,47,.16), transparent 68%); pointer-events:none;
	transition:left .5s cubic-bezier(.2,.6,.2,1), top .5s cubic-bezier(.2,.6,.2,1);
}
@media (prefers-reduced-motion: reduce){ .glow{ transition:none; } }
.shuriken{ position:absolute; right:4%; top:8%; width:220px; height:220px; opacity:.07; animation:spinSlow 60s linear infinite; pointer-events:none; }

.hero-grid{ max-width:1160px; margin:0 auto; position:relative; display:grid; grid-template-columns:1.5fr 1fr; gap:0; align-items:stretch; }
.hero-copy{ padding:88px 32px 80px 24px; }
.live-tag{
	display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:11.5px;
	letter-spacing:.08em; color:var(--steel); text-transform:uppercase; margin:0 0 22px;
	border:1px solid var(--line); padding:6px 12px 6px 10px; border-radius:2px;
}
.dot{ width:6px; height:6px; border-radius:50%; background:#5FD98A; animation:pulse 2.2s ease-in-out infinite; }
.hero h1{
	font-family:'Space Grotesk',sans-serif; font-weight:600;
	font-size:clamp(34px,3.8vw,50px); line-height:1.12; letter-spacing:-.015em; margin:0 0 22px; max-width:13.5ch; color:#F7F4EE;
}
.hero .sub{ font-size:16.5px; line-height:1.68; color:#BDB6A9; max-width:44ch; margin:0 0 30px; }
.promo{
	display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:11.5px;
	letter-spacing:.04em; color:var(--amber); margin:0 0 20px;
}
.promo::before{ content:""; width:6px; height:6px; background:var(--amber); border-radius:50%; animation:pulse 1.8s ease-in-out infinite; }
.cta-row{ display:flex; flex-wrap:wrap; gap:20px; align-items:center; }
.btn{
	position:relative; overflow:hidden; font-family:'Inter',sans-serif; font-weight:700; font-size:14.5px;
	padding:16px 30px; background:var(--ember); color:#fff !important; text-decoration:none; display:inline-block;
	box-shadow:0 8px 24px -8px rgba(217,97,47,.6); transition:transform .18s ease, box-shadow .18s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(217,97,47,.75); }
.btn::after{
	content:""; position:absolute; inset:0; background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 60%);
	background-size:250% 100%; animation:shimmer 3.2s ease-in-out infinite;
}
.phone-link{
	font-family:'IBM Plex Mono',monospace; font-size:13.5px; color:#CBC4B6 !important; text-decoration:none;
	display:inline-flex; align-items:center; gap:9px; transition:color .15s ease;
}
.phone-link svg{ width:13px; height:13px; flex:none; opacity:.8; }
.phone-link:hover{ color:var(--amber) !important; }

.hero-lead-wrap{ display:flex; align-items:center; padding:56px 24px; }
.hero-lead{
	background:#fff; border-radius:4px; padding:28px 26px 26px; width:100%;
	box-shadow:0 24px 48px -16px rgba(0,0,0,.45);
}
.hero-lead-person{ display:flex; align-items:center; gap:14px; margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid #EFE8D6; }
.hero-lead-person img{ width:56px; height:56px; border-radius:50%; object-fit:cover; flex:none; }
.hero-lead-person .name{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; color:var(--ink); line-height:1.2; }
.hero-lead-person .role{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:#8a7c5c; text-transform:uppercase; letter-spacing:.04em; margin-top:2px; }
.hero-lead h4{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:17px; margin:0 0 4px; color:var(--ink); }
.hero-lead .lead-sub{ font-size:13px; color:#5b564c; margin:0 0 18px; }
.hero-lead .wpcf7-form p{ margin:0 0 12px; }
.hero-lead .wpcf7-form input{ max-width:100%; padding:11px 13px; font-size:13.5px; }
.hero-lead .wpcf7-form input[type=submit]{ width:100%; font-size:13.5px; padding:13px 20px; }
.hero-badge{
	display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:11px;
	color:#8a7c5c; text-transform:uppercase; letter-spacing:.05em; margin-top:16px;
}
.hero-badge strong{ color:var(--ember); font-size:13px; }

.stats{ border-left:1px solid var(--line); padding:88px 24px 88px 40px; display:flex; flex-direction:column; justify-content:center; position:relative; }
.stats .label{ display:flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.12em; color:#8D8878; text-transform:uppercase; margin:0 0 26px; }
.stat{ padding:19px 0; border-top:1px solid var(--line); }
.stat:nth-child(3){ border-bottom:1px solid var(--line); }
.stat .n{ font-family:'IBM Plex Mono',monospace; font-size:27px; color:var(--ember); font-weight:500; }
.stat .d{ font-size:13px; color:#B8B1A3; margin-top:4px; }

@media (max-width:760px){
	.hero-grid{ grid-template-columns:1fr; }
	.stats{ border-left:none; border-top:1px solid var(--line); padding:44px 24px; }
	.hero-copy{ padding:60px 24px 44px; }
}

/* ---------- Interior page hero (shorter, for non-home pages) ---------- */
.page-hero{ background:var(--dojo); color:#EDE9E2; padding:64px 24px; position:relative; overflow:hidden; }
.page-hero .inner{ max-width:1160px; margin:0 auto; position:relative; }
.page-hero .tag2{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--amber); margin:0 0 14px; }
.page-hero h1{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(28px,3.2vw,40px); color:#F7F4EE; margin:0 0 12px; max-width:20ch; }
.page-hero p{ color:#BDB6A9; max-width:55ch; margin:0; }

/* ---------- Trust strip ---------- */
.trust{ background:#1A1E27; border-top:1px solid var(--line); padding:28px 24px; }
.trust-inner{ max-width:1160px; margin:0 auto; display:flex; flex-wrap:wrap; gap:28px 44px; align-items:center; }
.trust-label{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:#8f8a7c; letter-spacing:.1em; text-transform:uppercase; }
.trust-logos{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.trust-logos .chip{
	background:var(--paper); padding:8px 16px; border-radius:3px; display:flex; align-items:center;
	height:34px; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .15s ease, box-shadow .15s ease;
}
.trust-logos .chip:hover{ transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.35); }
.trust-logos img{ height:100%; width:auto; max-width:110px; object-fit:contain; display:block; }

/* ---------- How we work / process ---------- */
.way{ max-width:1160px; margin:0 auto; padding:92px 24px; }
.way-head{ max-width:52ch; margin:0 0 60px; }
.tag2{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ember); margin:0 0 14px; }
.way h2{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:30px; margin:0; color:var(--ink); }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:48px; }
.step{ position:relative; padding-top:6px; }
.step .ghost{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:64px; color:transparent; -webkit-text-stroke:1px #DDD4C0; line-height:1; margin:0 0 18px; display:block; }
.step h3{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:19px; margin:0 0 10px; }
.step p{ font-size:14px; line-height:1.65; color:#5b564c; margin:0; max-width:32ch; }

@media (max-width:760px){ .steps{ grid-template-columns:1fr; gap:40px; } }

/* ---------- Generic section utilities ---------- */
.section-light{ max-width:1160px; margin:0 auto; padding:80px 24px; }
.section-dark{ background:var(--dojo); color:#EDE9E2; }
.card{ background:#fff; border:1px solid #E3DAC5; padding:28px; }
.card h3{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:19px; margin:0 0 10px; }
.card p{ font-size:14px; line-height:1.65; color:#5b564c; margin:0; }

/* ---------- Forms (Contact Form 7) ---------- */
.wpcf7-form p{ margin:0 0 18px; font-family:'Inter',sans-serif; font-size:14px; color:var(--ink); }
.wpcf7-form label{ display:block; font-weight:500; margin-bottom:6px; }
.wpcf7-form input[type=text], .wpcf7-form input[type=email], .wpcf7-form input[type=tel], .wpcf7-form textarea{
	width:100%; max-width:480px; font-family:'Inter',sans-serif; font-size:14px; padding:12px 14px;
	border:1px solid #D9CFB8; border-radius:2px; background:#fff; color:var(--ink);
}
.wpcf7-form textarea{ min-height:120px; }
.wpcf7-form input[type=submit]{
	font-family:'Inter',sans-serif; font-weight:700; font-size:14.5px; padding:14px 28px;
	background:var(--ember); color:#fff; border:none; border-radius:2px; cursor:pointer;
	transition:transform .15s ease;
}
.wpcf7-form input[type=submit]:hover{ transform:translateY(-2px); }
.wpcf7-not-valid-tip{ color:var(--ember); font-size:12.5px; margin-top:4px; }
.wpcf7-response-output{ border-radius:2px; padding:12px 16px !important; font-size:13.5px; }

/* ---------- Tilted badge overlay ---------- */
.tilt-badge{
	position:absolute; top:118px; right:2%; background:var(--amber); color:var(--dojo);
	font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:11.5px; letter-spacing:.03em;
	padding:9px 16px; border-radius:2px; transform:rotate(-4deg);
	box-shadow:0 10px 22px -8px rgba(0,0,0,.4); z-index:2; white-space:nowrap;
}
@media (max-width:900px){ .tilt-badge{ position:static; display:inline-block; transform:rotate(-2deg); margin-bottom:18px; } }

/* ---------- Scroll-linked text reveal ---------- */
.reveal-section{ background:var(--dojo); padding:100px 24px; }
.reveal-inner{ max-width:900px; margin:0 auto; }
.reveal-text{
	font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(22px,3vw,34px);
	line-height:1.5; color:#F7F4EE;
}
/* Base state is fully legible (no JS / crawlers / reduced motion). JS progressively
   dims not-yet-scrolled-to words rather than starting everything hidden. */
.reveal-text .word{ transition:color .25s ease; }
.reveal-text .word.dim{ color:#3A3F4A; }
@media (prefers-reduced-motion: reduce){ .reveal-text .word.dim{ color:#F7F4EE; } }

/* ---------- Service grid (homepage "what we do") ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:36px 0 0; }
@media (max-width:760px){ .svc-grid{ grid-template-columns:1fr; } }

/* ---------- Packages ---------- */
.pkg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:36px 0 0; align-items:start; }
@media (max-width:900px){ .pkg-grid{ grid-template-columns:1fr; } }
.pkg{ background:#fff; border:1px solid #E3DAC5; padding:32px 28px; position:relative; }
.pkg.featured{ border:2px solid var(--ember); box-shadow:0 12px 28px -12px rgba(217,97,47,.35); }
.pkg-badge{
	position:absolute; top:-13px; left:28px; background:var(--ember); color:#fff;
	font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
	padding:5px 12px; border-radius:2px;
}
.pkg h3{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:21px; margin:0 0 6px; }
.pkg .pkg-sub{ font-size:13.5px; color:#8a7c5c; margin:0 0 20px; }
.pkg ul{ list-style:none; margin:0 0 24px; padding:0; }
.pkg li{ font-size:14px; color:#5b564c; padding:8px 0 8px 22px; border-top:1px solid #EFE8D6; position:relative; }
.pkg li:first-child{ border-top:none; }
.pkg li::before{ content:"\2713"; position:absolute; left:0; color:var(--ember); font-weight:700; }
.pkg .btn{ width:100%; text-align:center; box-shadow:none; }
.pkg .btn::after{ display:none; }

/* ---------- Funnel-style CTA band ---------- */
.cta-band{ background:var(--ember); color:#fff; padding:56px 24px; text-align:center; }
.cta-band h2{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:26px; margin:0 0 16px; color:#fff; }
.cta-band .btn{ background:#fff; color:var(--ember) !important; box-shadow:none; }
.cta-band .btn::after{ display:none; }