/*
Theme Name: Sane'3 Consulting
Theme URI: https://sane3consulting.com
Author: Sane'3 Consulting
Author URI: https://sane3consulting.com
Description: Full-width parallax business theme for Sane'3 Consulting — a strategic technology advisory. Fully editable through the custom "Sane'3 Options" admin panel: hero, executive profile, services, standards, roadmap, stats, portfolio projects, clients and contact details all update without touching code.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sane3
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */

:root{
	--s3-navy: #060F2B;
	--s3-navy-soft: #0B1836;
	--s3-navy-light: #10204a;
	--s3-orange: #ED7C15;
	--s3-orange-light: #F5A05C;
	--s3-white: #FFFFFF;
	--s3-off-white: #E8ECF4;
	--s3-muted: #A9B2C9;
	--s3-border: rgba(255,255,255,0.12);
	--s3-radius: 6px;
	--s3-container: 1180px;
	--s3-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
	margin:0;
	font-family:var(--s3-font);
	color:var(--s3-navy);
	background:var(--s3-white);
	line-height:1.65;
	font-size:16px;
	overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,h6{ margin:0 0 .5em; font-weight:700; line-height:1.2; }
p{ margin:0 0 1em; }
button{ font-family:inherit; cursor:pointer; }
.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden; }

.container{
	max-width:var(--s3-container);
	margin:0 auto;
	padding:0 24px;
}

.section-tag{
	display:inline-block;
	color:var(--s3-orange);
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
	font-size:13px;
	margin-bottom:14px;
}
.section-title{
	font-size:clamp(28px,4vw,42px);
	font-weight:800;
	letter-spacing:-.01em;
}
.section-title.light{ color:var(--s3-white); }
.section-sub{
	max-width:640px;
	color:#5b6379;
	font-size:17px;
}
.section-sub.light{ color:var(--s3-muted); }
.section-head{ margin-bottom:52px; }
.section-head.center{ text-align:center; margin-left:auto; margin-right:auto; }
.section-head.center .section-sub{ margin-left:auto; margin-right:auto; }

.btn{
	display:inline-flex;
	align-items:center;
	gap:10px;
	padding:15px 32px;
	border-radius:var(--s3-radius);
	font-weight:700;
	font-size:14px;
	letter-spacing:.04em;
	text-transform:uppercase;
	border:2px solid transparent;
	transition:all .25s ease;
}
.btn-primary{
	background:var(--s3-orange);
	color:var(--s3-white);
}
.btn-primary:hover{ background:#d76c09; transform:translateY(-2px); }
.btn-outline{
	border-color:rgba(255,255,255,.4);
	color:var(--s3-white);
}
.btn-outline:hover{ border-color:var(--s3-orange); background:rgba(237,124,21,.12); }
.btn-outline-dark{
	border-color:var(--s3-navy);
	color:var(--s3-navy);
}
.btn-outline-dark:hover{ background:var(--s3-navy); color:var(--s3-white); }

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */

.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.1s; }
.reveal-delay-2{ transition-delay:.2s; }
.reveal-delay-3{ transition-delay:.3s; }
.reveal-delay-4{ transition-delay:.4s; }

/* ==========================================================================
   Site header
   ========================================================================== */

.site-header{
	position:fixed;
	top:0; left:0; right:0;
	z-index:999;
	padding:22px 0;
	transition:background .3s ease, padding .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled{
	background:var(--s3-navy);
	padding:12px 0;
	box-shadow:0 6px 24px rgba(0,0,0,.25);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.site-logo{ display:flex; align-items:center; }
.site-logo img{ height:38px; width:auto; }
.site-logo .site-title-text{ color:var(--s3-white); font-size:22px; font-weight:800; }
.site-logo .site-title-text span{ color:var(--s3-orange); }

.main-nav ul{ display:flex; align-items:center; gap:34px; }
.main-nav a{
	color:var(--s3-white);
	font-weight:600;
	font-size:14.5px;
	letter-spacing:.02em;
	position:relative;
	padding:6px 0;
}
.main-nav a::after{
	content:"";
	position:absolute; left:0; bottom:0;
	width:0; height:2px;
	background:var(--s3-orange);
	transition:width .25s ease;
}
.main-nav a:hover::after{ width:100%; }
.header-cta{ display:flex; align-items:center; gap:22px; }
.header-cta .btn{ padding:12px 26px; }

.nav-toggle{
	display:none;
	flex-direction:column;
	gap:5px;
	background:none;
	border:0;
	padding:8px;
}
.nav-toggle span{ width:26px; height:2px; background:var(--s3-white); display:block; transition:.3s; }

@media (max-width:900px){
	.main-nav{
		position:fixed; inset:0 0 0 auto;
		width:78%; max-width:340px;
		background:var(--s3-navy);
		padding:110px 34px 40px;
		transform:translateX(100%);
		transition:transform .35s ease;
		box-shadow:-10px 0 40px rgba(0,0,0,.35);
	}
	.main-nav.is-open{ transform:translateX(0); }
	.main-nav ul{ flex-direction:column; align-items:flex-start; gap:22px; }
	.nav-toggle{ display:flex; }
	.header-cta .btn-outline{ display:none; }
	.nav-overlay{
		position:fixed; inset:0; background:rgba(0,0,0,.5);
		opacity:0; pointer-events:none; transition:opacity .3s ease;
		z-index:998;
	}
	.nav-overlay.is-open{ opacity:1; pointer-events:auto; }
}

/* ==========================================================================
   Parallax section base
   ========================================================================== */

.parallax{
	position:relative;
	background-color:var(--s3-navy);
	background-size:cover;
	background-position:center;
	background-attachment:fixed;
	background-repeat:no-repeat;
}
@media (max-width:900px){
	.parallax{ background-attachment:scroll; }
}
.parallax-overlay{
	position:absolute; inset:0;
	background:linear-gradient(180deg, rgba(6,15,43,.94) 0%, rgba(6,15,43,.9) 100%);
}
.parallax > .container,
.parallax > .rel{ position:relative; z-index:2; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
	min-height:100vh;
	display:flex;
	align-items:center;
	padding-top:120px;
	padding-bottom:80px;
}
.hero .parallax-overlay{ background:linear-gradient(160deg, rgba(6,15,43,.96) 10%, rgba(6,15,43,.82) 100%); }
.hero-inner{ max-width:760px; }
.hero-eyebrow{
	color:var(--s3-orange);
	text-transform:uppercase;
	letter-spacing:.18em;
	font-weight:700;
	font-size:14px;
	margin-bottom:22px;
}
.hero-logo{ max-width:340px; margin-bottom:26px; }
.hero h1{
	color:var(--s3-white);
	font-size:clamp(30px,5vw,50px);
	letter-spacing:-.01em;
	margin-bottom:22px;
}
.hero h1 em{
	font-style:normal;
	color:var(--s3-orange);
}
.hero p{
	color:var(--s3-muted);
	font-size:18px;
	max-width:640px;
	margin-bottom:34px;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-scroll{
	position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
	display:flex; flex-direction:column; align-items:center; gap:8px;
	color:var(--s3-muted); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
	z-index:2;
}
.hero-scroll .dot-line{ width:1px; height:36px; background:var(--s3-muted); position:relative; overflow:hidden; }
.hero-scroll .dot-line::after{
	content:""; position:absolute; top:-100%; left:0; width:100%; height:100%;
	background:var(--s3-orange); animation:scrollDown 1.8s infinite;
}
@keyframes scrollDown{ to{ top:100%; } }

/* ==========================================================================
   Executive profile
   ========================================================================== */

.profile{ padding:120px 0; background:var(--s3-white); }
.profile-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:start; }
.profile-card{
	background:var(--s3-navy);
	border-radius:14px;
	padding:44px 38px;
	color:var(--s3-white);
	position:relative;
	overflow:hidden;
}
.profile-card::before{
	content:"";
	position:absolute; top:-40px; right:-40px; width:160px; height:160px;
	background:radial-gradient(circle, rgba(237,124,21,.25), transparent 70%);
}
.profile-card .role{ color:var(--s3-orange); text-transform:uppercase; letter-spacing:.12em; font-size:13px; font-weight:700; margin-bottom:10px; }
.profile-card h3{ font-size:26px; margin-bottom:22px; }
.profile-quote{
	font-size:18px; line-height:1.6; font-style:italic; color:var(--s3-off-white);
	border-left:3px solid var(--s3-orange); padding-left:18px; margin:0;
}
.profile-body p{ color:#3b4260; font-size:16.5px; }
.profile-lede{ font-size:19px; color:var(--s3-navy); font-weight:600; margin-bottom:22px; }
.profile-checks{ margin:26px 0; display:grid; gap:14px; }
.profile-checks li{ display:flex; gap:12px; align-items:flex-start; font-weight:600; color:var(--s3-navy); }
.profile-checks li svg{ flex:none; margin-top:3px; color:var(--s3-orange); }

/* ==========================================================================
   Services
   ========================================================================== */

.services{ padding:120px 0; background:#F5F7FB; }
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.service-card{
	background:var(--s3-white);
	border-radius:14px;
	padding:38px 30px;
	box-shadow:0 10px 30px rgba(15,25,60,.06);
	transition:transform .3s ease, box-shadow .3s ease;
	border:1px solid #EAEDF5;
}
.service-card:hover{ transform:translateY(-8px); box-shadow:0 18px 40px rgba(15,25,60,.12); }
.service-icon{
	width:60px; height:60px; border-radius:14px;
	background:linear-gradient(135deg, var(--s3-navy), var(--s3-navy-light));
	display:flex; align-items:center; justify-content:center;
	margin-bottom:22px; color:var(--s3-orange);
}
.service-icon svg{ width:28px; height:28px; }
.service-card h3{ font-size:20px; margin-bottom:10px; }
.service-card p{ color:#5b6379; font-size:15px; margin-bottom:0; }

/* ==========================================================================
   Standards
   ========================================================================== */

.standards{ padding:130px 0 150px; }
.standards-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:10px; }
.standard-item{ text-align:center; }
.standard-hex{
	width:150px; height:150px; margin:0 auto 26px;
	position:relative; display:flex; align-items:center; justify-content:center;
	clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	border:2px solid var(--s3-orange);
}
.standard-hex::before{
	content:"";
	position:absolute; inset:2px;
	clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	background:var(--s3-navy-soft);
}
.standard-hex span{ position:relative; z-index:1; color:var(--s3-white); font-weight:800; font-size:15px; padding:0 12px; }
.standard-item p{ color:var(--s3-muted); font-size:14.5px; max-width:230px; margin:0 auto; }

/* ==========================================================================
   Roadmap
   ========================================================================== */

.roadmap{ padding:120px 0; background:#F5F7FB; }
.roadmap-track{ position:relative; margin-top:70px; }
.roadmap-line{
	position:absolute; top:50%; left:0; right:0; height:2px;
	background:linear-gradient(90deg, var(--s3-orange), var(--s3-orange-light));
	transform:translateY(-50%);
	display:none;
}
.roadmap-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; position:relative; }
.roadmap-step{ background:var(--s3-white); border-radius:14px; padding:34px 26px; box-shadow:0 10px 30px rgba(15,25,60,.06); position:relative; }
.roadmap-step .num{
	display:inline-flex; align-items:center; justify-content:center;
	width:44px; height:44px; border-radius:50%;
	background:var(--s3-navy); color:var(--s3-orange); font-weight:800; margin-bottom:18px;
}
.roadmap-step h3{ font-size:18px; margin-bottom:10px; color:var(--s3-navy); }
.roadmap-step p{ color:#5b6379; font-size:14.5px; margin:0; }

/* ==========================================================================
   Stats / Operational velocity
   ========================================================================== */

.stats{ padding:130px 0; }
.stats-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:center; }
.stats-figure{ text-align:center; border:1px solid var(--s3-border); border-radius:18px; padding:50px 20px; background:rgba(255,255,255,.03); }
.stats-figure .num{ font-size:clamp(56px,7vw,84px); font-weight:800; color:var(--s3-orange); line-height:1; }
.stats-figure .label{ color:var(--s3-white); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:13px; margin-top:12px; }
.stats-body h3{ color:var(--s3-white); font-size:26px; margin-bottom:18px; }
.stats-body p{ color:var(--s3-muted); font-size:16.5px; }
.stats-list{ margin-top:22px; display:grid; gap:14px; }
.stats-list li{ display:flex; gap:12px; align-items:flex-start; color:var(--s3-off-white); font-weight:600; }
.stats-list li svg{ flex:none; margin-top:3px; color:var(--s3-orange); }

/* ==========================================================================
   Portfolio
   ========================================================================== */

.portfolio{ padding:120px 0; background:#F5F7FB; }
.portfolio-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px; }
.portfolio-filters button{
	background:var(--s3-white); border:1px solid #E1E5F0; color:var(--s3-navy);
	padding:10px 20px; border-radius:30px; font-size:13.5px; font-weight:600; transition:.25s;
}
.portfolio-filters button.is-active,
.portfolio-filters button:hover{ background:var(--s3-navy); border-color:var(--s3-navy); color:var(--s3-white); }
.portfolio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.portfolio-card{
	background:var(--s3-white); border-radius:14px; overflow:hidden;
	box-shadow:0 10px 30px rgba(15,25,60,.07);
	transition:transform .3s ease;
}
.portfolio-card:hover{ transform:translateY(-6px); }
.portfolio-thumb{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--s3-navy); }
.portfolio-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.portfolio-card:hover .portfolio-thumb img{ transform:scale(1.08); }
.portfolio-tag{
	position:absolute; top:14px; left:14px; background:var(--s3-orange); color:var(--s3-white);
	font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
	padding:6px 12px; border-radius:30px;
}
.portfolio-info{ padding:24px; }
.portfolio-info h3{ font-size:18px; margin-bottom:8px; }
.portfolio-info p{ color:#5b6379; font-size:14.5px; margin-bottom:14px; }
.portfolio-info a{ color:var(--s3-orange); font-weight:700; font-size:13.5px; text-transform:uppercase; letter-spacing:.04em; }

/* Single project */
.project-hero{ padding:180px 0 90px; }
.project-hero .section-tag{ color:var(--s3-orange-light); }
.project-hero h1{ color:var(--s3-white); font-size:clamp(28px,4.5vw,44px); max-width:800px; }
.project-meta{ display:flex; gap:34px; flex-wrap:wrap; margin-top:26px; }
.project-meta div{ color:var(--s3-white); }
.project-meta span{ display:block; color:var(--s3-muted); font-size:12px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:6px; }
.project-body{ padding:90px 0; }
.project-body .content{ max-width:820px; margin:0 auto 60px; font-size:17px; color:#3b4260; }
.project-gallery{ display:grid; gap:24px; }
.project-gallery img{ border-radius:14px; box-shadow:0 20px 50px rgba(15,25,60,.15); }
.project-nav{ display:flex; justify-content:space-between; padding:40px 0 100px; border-top:1px solid #EAEDF5; margin-top:40px; }
.project-nav a{ font-weight:700; color:var(--s3-navy); }
.project-nav a:hover{ color:var(--s3-orange); }

/* ==========================================================================
   Clients
   ========================================================================== */

.clients{ padding:100px 0 110px; background:var(--s3-white); }
.clients-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:#EAEDF5; border:1px solid #EAEDF5; }
.clients-grid .client-logo{
	background:var(--s3-white); display:flex; align-items:center; justify-content:center;
	padding:30px 24px; min-height:120px;
	filter:grayscale(1); opacity:.65; transition:.3s;
}
.clients-grid .client-logo:hover{ filter:grayscale(0); opacity:1; }
.clients-grid img{ max-height:52px; width:auto; object-fit:contain; }

/* ==========================================================================
   Contact
   ========================================================================== */

.contact{ padding:130px 0; }
.contact-inner{ text-align:center; max-width:760px; margin:0 auto; }
.contact h2{ color:var(--s3-white); font-size:clamp(28px,4.5vw,44px); margin-bottom:18px; }
.contact p{ color:var(--s3-muted); font-size:18px; margin-bottom:44px; }
.contact-cards{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:44px; }
.contact-card{
	border:1px solid var(--s3-border); border-radius:14px; padding:30px 26px;
	display:flex; align-items:center; gap:18px; text-align:left; background:rgba(255,255,255,.03);
	transition:.25s;
}
.contact-card:hover{ border-color:var(--s3-orange); background:rgba(237,124,21,.08); }
.contact-card .icon{
	width:52px; height:52px; border-radius:12px; background:var(--s3-orange); color:var(--s3-white);
	display:flex; align-items:center; justify-content:center; flex:none;
}
.contact-card span{ display:block; color:var(--s3-muted); font-size:12px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:6px; }
.contact-card strong{ color:var(--s3-white); font-size:16px; font-weight:700; word-break:break-word; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer{ background:#040A1C; padding:70px 0 30px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:50px; padding-bottom:50px; border-bottom:1px solid var(--s3-border); }
.footer-logo img{ height:34px; margin-bottom:18px; }
.footer-top p{ color:var(--s3-muted); font-size:14.5px; max-width:320px; }
.footer-col h4{ color:var(--s3-white); font-size:14px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:20px; }
.footer-col ul{ display:grid; gap:12px; }
.footer-col a{ color:var(--s3-muted); font-size:14.5px; }
.footer-col a:hover{ color:var(--s3-orange); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; flex-wrap:wrap; gap:14px; }
.footer-bottom p{ color:#5c6685; font-size:13px; margin:0; }
.footer-social{ display:flex; gap:12px; }
.footer-social a{
	width:38px; height:38px; border-radius:50%; border:1px solid var(--s3-border);
	display:flex; align-items:center; justify-content:center; color:var(--s3-white);
}
.footer-social a:hover{ background:var(--s3-orange); border-color:var(--s3-orange); }

/* ==========================================================================
   Misc pages (page.php / single.php / 404)
   ========================================================================== */

.generic-page{ padding:180px 0 120px; }
.generic-page .entry-content{ max-width:820px; margin:0 auto; font-size:17px; color:#3b4260; }
.generic-page .entry-content img{ border-radius:12px; margin:20px 0; }
.page-hero{ padding:160px 0 70px; }
.page-hero h1{ color:var(--s3-white); font-size:clamp(30px,5vw,46px); }

.profile-checks svg,
.stats-list svg{ width:20px; height:20px; }
.contact-card .icon svg{ width:22px; height:22px; }
.back-to-top svg{ width:20px; height:20px; transform:rotate(-90deg); }

/* Back to top */
.back-to-top{
	position:fixed; right:26px; bottom:26px; width:48px; height:48px; border-radius:50%;
	background:var(--s3-orange); color:var(--s3-white); display:flex; align-items:center; justify-content:center;
	border:0; opacity:0; pointer-events:none; transform:translateY(10px); transition:.3s; z-index:900;
	box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.back-to-top.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1000px){
	.profile-grid{ grid-template-columns:1fr; gap:44px; }
	.services-grid{ grid-template-columns:repeat(2,1fr); }
	.standards-grid{ grid-template-columns:repeat(2,1fr); gap:40px; }
	.roadmap-grid{ grid-template-columns:repeat(2,1fr); }
	.stats-grid{ grid-template-columns:1fr; gap:40px; }
	.portfolio-grid{ grid-template-columns:repeat(2,1fr); }
	.clients-grid{ grid-template-columns:repeat(3,1fr); }
	.contact-cards{ grid-template-columns:1fr; }
	.footer-top{ grid-template-columns:1fr; gap:34px; }
}
@media (max-width:600px){
	.services-grid,
	.standards-grid,
	.roadmap-grid,
	.portfolio-grid{ grid-template-columns:1fr; }
	.clients-grid{ grid-template-columns:repeat(2,1fr); }
	.hero{ padding-top:130px; }
	.profile,.services,.standards,.roadmap,.stats,.portfolio,.clients,.contact{ padding-top:80px; padding-bottom:80px; }
}