/* ==========================================================================
   Simian Enterprises — public site stylesheet ("Trusted Slate")
   Token-driven layer over Bootstrap 5.3. Loaded only by the public pages
   via /templates/_publicLayout.cfm. The legacy /css/*.css files are left
   untouched for the admin system.
   ========================================================================== */

:root{
	/* Brand */
	--brand-primary:#1E2A52; --brand-primary-strong:#16203F; --brand-primary-tint:#EEF2FB;
	--accent:#4F7CFF; --accent-strong:#2F5BE0; --accent-tint:#E8EEFF;

	/* Neutrals */
	--ink:#16203A; --body:#48536B; --muted:#7A8499;
	--surface:#FFFFFF; --surface-2:#F5F7FB; --card:#FFFFFF; --line:#E4E8F0;

	/* Secondary accents (a splash of colour) */
	--teal:#0B8E89; --teal-tint:#D6F3F0; --amber:#C77B0A; --amber-tint:#FDEFD3;

	/* Shape & depth */
	--r-sm:10px; --r:16px; --r-lg:22px; --r-pill:999px;
	--shadow-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.06);
	--shadow:0 10px 30px rgba(30,42,82,.08);
	--shadow-lg:0 24px 60px rgba(30,42,82,.16);

	/* Type */
	--font-head:'Poppins',system-ui,-apple-system,sans-serif;
	--font-body:'Inter',system-ui,-apple-system,sans-serif;
}

/* Keep the page locked to the viewport width. overflow-x:clip is sticky-safe. */
html,body{overflow-x:clip}
html{scroll-behavior:smooth}

body{
	font-family:var(--font-body);
	color:var(--body);
	background:var(--surface);
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,.h1,.h2,.h3{
	font-family:var(--font-head);
	color:var(--ink);
	font-weight:700;
	letter-spacing:-.02em;
	line-height:1.14;
}

p{color:var(--body)}
a{color:var(--accent-strong);text-decoration:none}
a:hover{color:var(--brand-primary)}

.eyebrow{
	font-family:var(--font-head);font-weight:600;font-size:.78rem;
	letter-spacing:.14em;text-transform:uppercase;color:var(--accent-strong);
}
.text-muted2{color:var(--muted)!important}
.container{max-width:1140px}
.section{padding:6rem 0}

/* ---- Buttons -------------------------------------------------------------- */
.btn{border-radius:var(--r-sm);font-weight:600;padding:.7rem 1.4rem;font-family:var(--font-head)}
.btn-lg{padding:.85rem 1.7rem}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-accent:hover,.btn-accent:focus{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-strong)}
.btn-light-ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);color:#fff}
.btn-light-ghost:hover{background:rgba(255,255,255,.16);color:#fff}

/* ---- Navbar --------------------------------------------------------------- */
.navbar{background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:.7rem 0}
.navbar-brand img.logo{height:44px;width:auto;display:block}
.navbar .nav-link{color:var(--body);font-weight:500;padding:.4rem .9rem!important;border-radius:8px}
.navbar .nav-link:hover,.navbar .nav-link:focus{color:var(--ink);background:var(--surface-2)}
.navbar .nav-link.active{color:var(--accent-strong)}

/* ---- Hero (home) ---------------------------------------------------------- */
.hero{
	background:
		radial-gradient(55rem 26rem at 88% -12%,rgba(79,124,255,.13),transparent 60%),
		radial-gradient(45rem 26rem at -8% 6%,rgba(14,165,160,.09),transparent 55%),
		linear-gradient(180deg,#fff 0%,var(--brand-primary-tint) 100%);
	padding:5.5rem 0 5rem;border-bottom:1px solid var(--line);
}
.hero h1{font-size:clamp(2.3rem,4.4vw,3.6rem);font-weight:800}
.hero .lead{font-size:1.2rem;color:var(--body);max-width:35rem}
.pill{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--line);color:var(--body);border-radius:var(--r-pill);padding:.4rem .9rem;font-size:.85rem;font-weight:500;box-shadow:var(--shadow-sm)}
.pill i{color:var(--accent-strong)}

/* Decorative dashboard mock in the hero */
.hero-visual{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.browserbar{background:var(--surface-2);border-bottom:1px solid var(--line);padding:.6rem .9rem;display:flex;align-items:center;gap:.4rem}
.browserbar i{width:11px;height:11px;border-radius:50%;display:inline-block}
.dot-r{background:#ff6058}.dot-y{background:#ffbd2e}.dot-g{background:#28c840}
.browserbar .url{margin-left:.6rem;background:#fff;border:1px solid var(--line);border-radius:6px;font-size:.72rem;color:var(--muted);padding:.15rem .6rem}
.dash{padding:1.4rem}
.statline{display:flex;gap:.8rem;flex-wrap:wrap}
.statbox{flex:1;min-width:110px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:1rem}
.statbox .n{font-family:var(--font-head);font-weight:800;color:var(--ink);font-size:1.5rem}

/* ---- Page hero (interior pages) ------------------------------------------- */
.page-hero{
	background:
		radial-gradient(48rem 22rem at 92% -20%,rgba(79,124,255,.12),transparent 60%),
		linear-gradient(180deg,#fff 0%,var(--brand-primary-tint) 100%);
	border-bottom:1px solid var(--line);padding:4.5rem 0 3.5rem;
}
.page-hero h1{font-size:clamp(2.1rem,3.6vw,3rem);font-weight:800}
.page-hero .lead{font-size:1.15rem;max-width:42rem}

/* ---- Two paths ------------------------------------------------------------ */
.paths{background:var(--surface-2)}
.path{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:2.2rem;height:100%;box-shadow:var(--shadow-sm)}
.path .ic{width:54px;height:54px;border-radius:14px;background:var(--brand-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.path .ic.pi-new{background:linear-gradient(135deg,#2440A0,#4F7CFF)}
.path .ic.pi-inherit{background:linear-gradient(135deg,#0E8F8A,#23C3BC)}
.path h3{font-size:1.4rem;margin-bottom:.6rem}
.path .tagchip{display:inline-block;background:var(--accent-tint);color:var(--accent-strong);font-weight:600;font-size:.78rem;border-radius:var(--r-pill);padding:.25rem .75rem;margin-top:1rem}
.path .tagchip.tc-teal{background:var(--teal-tint);color:var(--teal)}

/* ---- Service cards -------------------------------------------------------- */
.svc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.8rem;height:100%;transition:transform .18s,box-shadow .18s,border-color .18s;box-shadow:var(--shadow-sm)}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#d4dcec}
.svc .ic{width:48px;height:48px;border-radius:12px;background:var(--accent-tint);color:var(--accent-strong);display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex:0 0 auto}
.svc .ic.ic-blue{background:var(--accent-tint);color:var(--accent-strong)}
.svc .ic.ic-teal{background:var(--teal-tint);color:var(--teal)}
.svc .ic.ic-amber{background:var(--amber-tint);color:var(--amber)}
.svc h3{font-size:1.18rem;margin-bottom:.5rem}

/* ---- Work / portfolio cards ----------------------------------------------- */
.work{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;height:100%;transition:transform .18s,box-shadow .18s;box-shadow:var(--shadow-sm)}
.work:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.work a.stretched-link{color:inherit}
.shot{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--surface-2)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot.placeholder{display:flex;align-items:flex-end;padding:1.1rem;color:#fff;font-family:var(--font-head);font-weight:700;font-size:1.15rem}
.work .body{padding:1.2rem 1.3rem 1.4rem}
.work .client{font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.work h3{font-size:1.12rem;margin:.15rem 0 .4rem}
.g1{background:linear-gradient(135deg,#1E2A52,#4F7CFF)}.g2{background:linear-gradient(135deg,#0E7490,#22D3EE)}
.g3{background:linear-gradient(135deg,#3730A3,#818CF8)}.g4{background:linear-gradient(135deg,#9A3412,#FB923C)}
.g5{background:linear-gradient(135deg,#7C2D6B,#E879C9)}.g6{background:linear-gradient(135deg,#155E45,#34D399)}

/* ---- About ---------------------------------------------------------------- */
.about{background:var(--surface-2)}
.avatar{width:104px;height:104px;border-radius:50%;background:linear-gradient(135deg,var(--brand-primary),var(--accent));display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-head);font-weight:800;font-size:2rem;box-shadow:var(--shadow)}
.gary-photo{width:160px;height:160px;border-radius:50%;object-fit:cover;border:5px solid #fff;box-shadow:var(--shadow)}
.cms-content :is(h2,h3){margin-top:1.6rem}
.cms-content img{max-width:100%;height:auto;border-radius:var(--r)}

/* ---- CTA ------------------------------------------------------------------ */
.cta{background:var(--brand-primary);color:#fff;border-radius:var(--r-lg);padding:3.2rem;position:relative;overflow:hidden}
.cta h2{color:#fff}
.cta p{color:#c7d2f0}
.cta:after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(79,124,255,.5),transparent 70%)}

/* ---- Contact form --------------------------------------------------------- */
.form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:2rem}
.form-card .form-control,.form-card .form-select{border-radius:var(--r-sm);border-color:var(--line);padding:.7rem .9rem}
.form-card .form-control:focus,.form-card .form-select:focus{border-color:var(--accent);box-shadow:0 0 0 .2rem rgba(79,124,255,.15)}
.form-label{font-weight:600;color:var(--ink);font-size:.9rem}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-detail{display:flex;align-items:center;gap:.85rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.contact-detail .ic{width:44px;height:44px;border-radius:12px;background:var(--accent-tint);color:var(--accent-strong);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex:0 0 auto}

/* ---- Footer --------------------------------------------------------------- */
footer.site-footer{background:var(--brand-primary-strong);color:#aeb8d0;padding:3.5rem 0 2rem}
footer.site-footer a{color:#cfd8ec;overflow-wrap:anywhere}
footer.site-footer a:hover{color:#fff}
footer.site-footer h6{color:#fff;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em}
footer.site-footer .footer-logo{height:48px;width:auto;display:block}
footer.site-footer .reg{font-size:.85rem;color:#8893b3}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width:767.98px){
	.section{padding:3.5rem 0}
	.hero{padding:2.5rem 0 3rem}
	.page-hero{padding:2.75rem 0 2.5rem}
	.cta{padding:2.2rem 1.5rem}
	.hero h1{font-size:2.1rem}
}