/* ==========================================================================
   Graphite Strategy — premium editorial design system
   Loaded alongside style.css on frontend pages only (see layouts/header.php)
   ========================================================================== */

:root {
	/* No pure black anywhere in the system — dark sections use dark GRAY, not black. */
	--graphite-black: #2A2C30;
	--graphite-dark: #34373C;
	--graphite-navy: #3F4247;
	--graphite-blue: #55585D;
	--graphite-blue-invert: #C9CBCE;
	--graphite-light-blue: #EDEEEF;
	--graphite-white: #FFFFFF;
	--graphite-gray: #F4F4F5;
	--graphite-border: #DBDCDE;
	--graphite-text: #26282B;
	--graphite-muted: #6B6E73;

	--gs-font: Helvetica, "Helvetica Neue", Arial, sans-serif;

	--gs-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--gs-header-h: 96px;
	--gs-header-h-scrolled: 72px;
	--gs-container: 1320px;
}

/* ---- base / typography ---------------------------------------------- */

body.gs-body {
	font-family: var(--gs-font);
	color: var(--graphite-text);
	background: var(--graphite-white);
	-webkit-font-smoothing: antialiased;
}

.gs-body h1, .gs-body h2, .gs-body h3, .gs-body h4, .gs-body h5, .gs-body h6,
.gs-body .btn, .gs-body nav, .gs-body form, .gs-body input, .gs-body textarea, .gs-body button {
	font-family: var(--gs-font);
}

.gs-container {
	width: 100%;
	max-width: var(--gs-container);
	margin: 0 auto;
	padding: 0 32px;
}

.gs-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--graphite-blue);
	margin-bottom: 18px;
}

.gs-eyebrow.on-dark { color: var(--graphite-blue-invert); }

.gs-h1 {
	font-size: clamp(2.6rem, 5vw, 5rem);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.02em;
	margin: 0;
}

.gs-h2 {
	font-size: clamp(2rem, 3.4vw, 3.2rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 0 0 20px;
}

.gs-lead {
	font-size: clamp(1.05rem, 1.3vw, 1.35rem);
	line-height: 1.6;
	color: var(--graphite-muted);
	max-width: 640px;
}

.gs-section {
	padding: 120px 0;
	position: relative;
}

.gs-section-tight { padding: 80px 0; }

.gs-section.on-dark {
	background: var(--graphite-black);
	color: var(--graphite-white);
}

.gs-section.on-navy {
	background: var(--graphite-navy);
	color: var(--graphite-white);
}

.gs-section.on-soft { background: var(--graphite-gray); }

/* Subtle dot-grid texture for light sections — a cheap but real way to stop
   large white sections from reading as flat/empty. */
.gs-section-textured {
	background-image: radial-gradient(circle, var(--graphite-border) 1px, transparent 1px);
	background-size: 28px 28px;
	background-position: -14px -14px;
}
.gs-section-textured::before {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, var(--graphite-white) 0%, rgba(255,255,255,0.4) 40%, var(--graphite-white) 100%);
	pointer-events: none;
}
.gs-section-textured > .gs-container { position: relative; z-index: 1; }

.gs-section.on-dark .gs-muted,
.gs-section.on-navy .gs-muted { color: #9A9DA2; }

.gs-muted { color: var(--graphite-muted); }

.gs-rule {
	height: 1px;
	width: 100%;
	background: var(--graphite-border);
	border: 0;
	transform: scaleX(0);
	transform-origin: left;
}

.gs-section.on-dark .gs-rule,
.gs-section.on-navy .gs-rule { background: rgba(255,255,255,0.14); }

.gs-section-head {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-bottom: 64px;
}

@media (min-width: 992px) {
	.gs-section-head.gs-split {
		grid-template-columns: 1fr 2fr;
		align-items: end;
	}
}

.gs-num {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--graphite-muted);
}

/* ---- buttons ----------------------------------------------------------- */

.gs-btn {
	font-family: var(--gs-font);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 30px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	border: 1px solid currentColor;
	border-radius: 2px;
	color: var(--graphite-black);
	background: transparent;
	position: relative;
	overflow: hidden;
	transition: color 0.4s var(--gs-ease);
	cursor: pointer;
}

.gs-btn span.gs-btn-fill {
	position: absolute;
	inset: 0;
	background: var(--graphite-black);
	transform: translateY(101%);
	transition: transform 0.4s var(--gs-ease);
	z-index: 0;
}

.gs-btn span.gs-btn-label,
.gs-btn .bi { position: relative; z-index: 1; transition: transform 0.35s var(--gs-ease); }

.gs-btn:hover { color: var(--graphite-white); }
.gs-btn:hover span.gs-btn-fill { transform: translateY(0); }
.gs-btn:hover .bi { transform: translateX(4px); }

.gs-btn-solid {
	color: var(--graphite-white);
	background: var(--graphite-black);
	border-color: var(--graphite-black);
	transition: color 0.4s var(--gs-ease), box-shadow 0.4s var(--gs-ease), transform 0.3s var(--gs-ease);
}
.gs-btn-solid span.gs-btn-fill { background: var(--graphite-blue); }
.gs-btn-solid:hover { color: var(--graphite-white); box-shadow: 0 8px 28px rgba(37,99,235,0.35); transform: translateY(-2px); }

.gs-section.on-dark .gs-btn,
.gs-section.on-navy .gs-btn { color: var(--graphite-white); }
.gs-section.on-dark .gs-btn span.gs-btn-fill,
.gs-section.on-navy .gs-btn span.gs-btn-fill { background: var(--graphite-white); }
.gs-section.on-dark .gs-btn:hover,
.gs-section.on-navy .gs-btn:hover { color: var(--graphite-black); }

.gs-section.on-dark .gs-btn-solid,
.gs-section.on-navy .gs-btn-solid {
	background: var(--graphite-white);
	border-color: var(--graphite-white);
	color: var(--graphite-black);
}
.gs-section.on-dark .gs-btn-solid span.gs-btn-fill,
.gs-section.on-navy .gs-btn-solid span.gs-btn-fill { background: var(--graphite-blue-invert); }
.gs-section.on-dark .gs-btn-solid:hover,
.gs-section.on-navy .gs-btn-solid:hover { color: var(--graphite-black); }

/* ---- header -------------------------------------------------------------- */

.gs-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1000;
	height: var(--gs-header-h);
	display: flex;
	align-items: center;
	background: transparent;
	transition: height 0.4s var(--gs-ease), background-color 0.4s var(--gs-ease), box-shadow 0.4s var(--gs-ease), backdrop-filter 0.4s var(--gs-ease);
}

/* Top border line — a fixed brand accent strip along the very top edge of every page. */
.gs-header::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--graphite-blue-invert);
	z-index: 2;
	transition: background-color 0.4s var(--gs-ease);
}
.gs-header.is-scrolled::before { background: var(--graphite-black); }

.gs-header .gs-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.gs-header.is-scrolled {
	height: var(--gs-header-h-scrolled);
	background: rgba(255,255,255,0.92);
	backdrop-filter: saturate(180%) blur(10px);
	box-shadow: 0 1px 0 var(--graphite-border);
}

/* Every frontend page opens with a dark intro/hero band, so the transparent
   pre-scroll header always uses light text; it switches to dark text once it
   goes solid (see .is-scrolled below). */
.gs-header:not(.is-scrolled) { color: var(--graphite-white); }
.gs-header:not(.is-scrolled) .gs-nav-link { color: rgba(255,255,255,0.88); }

.gs-logo {
	text-decoration: none;
	color: inherit;
	display: flex;
	align-items: center;
}
/* Two-line stacked wordmark reproducing the brand's actual logo lockup
   (GRAPHITE / STRATEGY), set in Helvetica so it needs no image asset and
   always matches the header/footer's current text color. */
.gs-logo-word {
	display: flex;
	flex-direction: column;
	line-height: 1.02;
}
.gs-logo-word span {
	font-weight: 900;
	font-size: 17px;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	white-space: nowrap;
}
.gs-footer .gs-logo-word span { font-size: 19px; }

.gs-nav {
	display: none;
	align-items: center;
	gap: 40px;
	list-style: none;
	margin: 0; padding: 0;
}

.gs-nav-link {
	font-size: 14px;
	font-weight: 600;
	color: var(--graphite-text);
	text-decoration: none;
	position: relative;
	padding-bottom: 4px;
}
.gs-nav-link::after {
	content: "";
	position: absolute; left: 0; right: 100%; bottom: 0;
	height: 1px; background: currentColor;
	transition: right 0.35s var(--gs-ease);
}
.gs-nav-link:hover::after { right: 0; }

.gs-header-actions { display: flex; align-items: center; gap: 20px; }

.gs-burger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px; height: 32px;
	padding: 0;
	background: none; border: 0; cursor: pointer;
	color: inherit;
	z-index: 1201;
}
.gs-burger span { display: block; width: 100%; height: 2px; background: currentColor; transition: transform 0.3s var(--gs-ease), opacity 0.3s var(--gs-ease); flex: 0 0 auto; }
.gs-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gs-burger.is-open span:nth-child(2) { opacity: 0; }
.gs-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 992px) {
	.gs-nav { display: flex; }
	.gs-burger { display: none; }
}

.gs-mobile-overlay {
	position: fixed; inset: 0;
	background: var(--graphite-black);
	color: #fff;
	z-index: 1150;
	display: flex; flex-direction: column;
	justify-content: center;
	padding: 32px;
	transform: translateY(-100%);
	visibility: hidden;
}
.gs-mobile-overlay.js-ready { transform: none; }
.gs-mobile-overlay.is-open { visibility: visible; }
.gs-mobile-overlay ul { list-style: none; margin: 0 0 32px; padding: 0; }
.gs-mobile-overlay li { overflow: hidden; margin-bottom: 6px; }
.gs-mobile-overlay a {
	display: inline-block;
	color: #fff; text-decoration: none;
	font-size: 34px; font-weight: 700;
	letter-spacing: -0.01em;
}

/* ---- hero ---------------------------------------------------------------- */

.gs-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: flex-end;
	background: var(--graphite-black);
	color: #fff;
	overflow: hidden;
	padding: 160px 0 90px;
}

.gs-hero-bg {
	position: absolute; inset: 0;
	background-size: cover;
	background-position: center;
	clip-path: inset(100% 0 0 0);
	transform: scale(1.12);
}
.gs-hero-bg::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(42,44,48,0.35) 0%, rgba(42,44,48,0.88) 100%);
}

/* Soft ambient glow behind the hero headline — the one deliberate spot of
   colour on an otherwise monochrome page, echoing the cube accent colors. */
.gs-hero::before {
	content: "";
	position: absolute;
	top: 10%; left: 10%;
	width: 46vw; height: 46vw;
	max-width: 640px; max-height: 640px;
	background: radial-gradient(circle, rgba(37,99,235,0.16) 0%, rgba(37,99,235,0) 70%);
	pointer-events: none;
	z-index: 1;
}

.gs-hero-accent {
	background: linear-gradient(100deg, #93C5FD 0%, #2563EB 60%, #93C5FD 100%);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	animation: gsAccentSheen 6s linear infinite;
}
@keyframes gsAccentSheen { to { background-position: 200% center; } }

/* Decorative background illustration behind a text-heavy dark section
   (Carbon Doctrine, Why Graphite) — sits fully behind the content column. */
.gs-doctrine-bg {
	position: absolute; inset: 0;
	overflow: hidden;
	pointer-events: none;
	opacity: 0.9;
}

/* Contact page: a quiet network illustration behind the "Get In Touch" copy. */
.gs-contact-bg {
	position: absolute;
	top: -60px; right: -80px;
	width: 420px; height: 420px;
	pointer-events: none;
	opacity: 0.55;
	z-index: 0;
}
@media (max-width: 991px) { .gs-contact-bg { display: none; } }

.gs-hero-inner { position: relative; z-index: 2; width: 100%; }

.gs-hero-head { max-width: 900px; }

.gs-hero h1 .word-outer { overflow: hidden; display: inline-block; vertical-align: top; }
.gs-hero h1 .word-inner { display: inline-block; transform: translateY(100%); }

.gs-hero-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }

/* Hero always sits on a dark background, so its buttons use the same
   light-on-dark treatment as .gs-section.on-dark (see buttons block above). */
.gs-hero .gs-btn { color: var(--graphite-white); }
.gs-hero .gs-btn span.gs-btn-fill { background: var(--graphite-white); }
.gs-hero .gs-btn:hover { color: var(--graphite-black); }
.gs-hero .gs-btn-solid {
	background: var(--graphite-white);
	border-color: var(--graphite-white);
	color: var(--graphite-black);
}
.gs-hero .gs-btn-solid span.gs-btn-fill { background: var(--graphite-blue-invert); }
.gs-hero .gs-btn-solid:hover { color: var(--graphite-black); }

/* ---- split-title word reveal (global) ------------------------------------ */

.split-title .word-outer { overflow: hidden; display: inline-block; vertical-align: top; }
.split-title .word-inner { display: inline-block; transform: translateY(100%); opacity: 0; }

/* ---- image reveal ---------------------------------------------------------- */

/* The reveal mask always targets the .image-reveal wrapper itself (not the
   img/svg inside) — this way it never fights with the tilt effect's direct
   transform writes on .gs-tilt-inner, or with .gs-parallax's scroll-scrub
   tween, both of which can live on the very same element. */
.image-reveal { overflow: hidden; position: relative; clip-path: inset(100% 0 0 0); transform: scale(1.12); }
.image-reveal img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- carbon doctrine ------------------------------------------------------- */

.gs-doctrine-statement {
	font-size: clamp(1.6rem, 3vw, 2.6rem);
	font-weight: 700;
	line-height: 1.3;
	max-width: 980px;
	margin-bottom: 80px;
}

.gs-pillar {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 32px;
	padding: 36px 0;
	border-top: 1px solid rgba(255,255,255,0.14);
	align-items: start;
}
.gs-pillar:last-child { border-bottom: 1px solid rgba(255,255,255,0.14); }
.gs-pillar .num { font-size: 15px; font-weight: 700; color: var(--graphite-blue-invert); opacity: 0; }
.gs-pillar h3 { font-size: 1.5rem; font-weight: 700; margin: 0 0 10px; transform: translateX(-40px); opacity: 0; }
.gs-pillar p { margin: 0; color: #9A9DA2; max-width: 560px; transform: translateY(24px); opacity: 0; }

/* ---- services -------------------------------------------------------------- */

.gs-service-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: center;
	padding: 70px 0;
	border-top: 1px solid var(--graphite-border);
}
.gs-service-row:last-child { border-bottom: 1px solid var(--graphite-border); }

@media (min-width: 992px) {
	.gs-service-row { grid-template-columns: 1fr 1fr; gap: 80px; }
	.gs-service-row.reverse .gs-service-media { order: 2; }
}

.gs-service-media { aspect-ratio: 4/3; overflow: hidden; }
.gs-service-media img { transition: transform 0.6s var(--gs-ease); }
.gs-service-row:hover .gs-service-media img { transform: scale(1.05); }

.gs-service-num { font-size: 14px; font-weight: 700; color: var(--graphite-blue); letter-spacing: 0.05em; margin-bottom: 16px; display: block; }
.gs-service-title { font-size: clamp(1.7rem, 2.4vw, 2.4rem); font-weight: 700; margin-bottom: 16px; transition: transform 0.35s var(--gs-ease); }
.gs-service-row:hover .gs-service-title { transform: translateX(8px); }
.gs-service-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; color: var(--graphite-black); margin-top: 20px; }
.gs-service-link .bi { transition: transform 0.35s var(--gs-ease); }
.gs-service-row:hover .gs-service-link .bi { transform: translateX(10px); }

/* ---- quote / embedded-content card ------------------------------------------- */

.gs-quote-card {
	border: 1px solid var(--graphite-border);
	padding: 56px;
	position: relative;
}
.gs-quote-card .gs-quote-icon {
	font-size: 4rem;
	line-height: 1;
	color: var(--graphite-blue);
	font-weight: 700;
	margin-bottom: 8px;
	display: block;
}
.gs-quote-card blockquote { margin: 0; font-size: 1.5rem; font-weight: 500; line-height: 1.5; }
.gs-quote-card cite { display: block; margin-top: 24px; font-style: normal; font-size: 14px; font-weight: 700; color: var(--graphite-muted); }

/* ---- team -------------------------------------------------------------------- */

.gs-team-photo {
	aspect-ratio: 3/4;
	background: var(--graphite-gray);
	margin-bottom: 24px;
	overflow: hidden;
}
.gs-team-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--gs-ease); }
.gs-team-card:hover .gs-team-photo img { transform: scale(1.04); }
.gs-team-name { font-size: 1.4rem; font-weight: 700; margin-bottom: 4px; }
.gs-team-role { color: var(--graphite-blue); font-weight: 600; font-size: 14px; margin-bottom: 14px; }
.gs-team-bio { color: var(--graphite-muted); }

/* ---- why graphite pillars ----------------------------------------------------- */

.gs-why-item {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	padding: 40px 0;
	border-top: 1px solid rgba(255,255,255,0.14);
	overflow: hidden;
	transition: padding-left 0.4s var(--gs-ease);
}
.gs-why-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.14); }
@media (min-width: 768px) {
	.gs-why-item { grid-template-columns: 120px 1fr; align-items: center; gap: 24px; }
}
.gs-why-item .gs-why-num {
	font-size: clamp(3rem, 6vw, 4.5rem);
	font-weight: 700;
	line-height: 1;
	color: rgba(255,255,255,0.09);
	transition: color 0.4s var(--gs-ease);
}
.gs-why-item h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; transition: transform 0.4s var(--gs-ease); }
.gs-why-item p { color: #9A9DA2; margin: 0; max-width: 560px; }
.gs-why-item:hover { padding-left: 12px; }
.gs-why-item:hover .gs-why-num { color: rgba(37,99,235,0.5); }
.gs-why-item:hover h3 { transform: translateX(6px); }

/* ---- insights / editorial ------------------------------------------------------ */

.gs-insight-featured { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 56px; }
@media (min-width: 992px) { .gs-insight-featured { grid-template-columns: 1.3fr 1fr; align-items: center; } }
.gs-insight-media { aspect-ratio: 16/10; background: var(--graphite-gray); }
.gs-insight-cat { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite-blue); margin-bottom: 12px; display: block; }
.gs-insight-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 12px; }
/* Empty-state block (e.g. no Insights posts published yet) — centered and
   framed like a real component, not a stray sentence in blank space. The
   blue is a deliberate one-off exception to the site's monochrome palette,
   so it actually catches the eye. */
.gs-empty-state {
	position: relative;
	max-width: 560px;
	margin: 0 auto;
	padding: 64px 40px;
	text-align: center;
	border: 1px solid var(--graphite-border);
	background: linear-gradient(180deg, rgba(37,99,235,0.05) 0%, rgba(37,99,235,0) 65%);
	overflow: hidden;
}
.gs-empty-state::before {
	content: "";
	position: absolute; top: 0; left: 50%;
	width: 120px; height: 1px;
	background: #2563EB;
	transform: translateX(-50%) scaleX(0);
	transform-origin: center;
	animation: gsEmptyLine 1.4s 0.3s var(--gs-ease) forwards;
}
@keyframes gsEmptyLine { to { transform: translateX(-50%) scaleX(1); } }
.gs-empty-state .bi {
	display: inline-block;
	font-size: 2rem;
	color: #2563EB;
	margin-bottom: 22px;
	animation: gsEmptyIconPulse 2.6s ease-in-out infinite;
}
@keyframes gsEmptyIconPulse {
	0%, 100% { opacity: 0.7; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.15); }
}
.gs-coming-soon {
	color: #2563EB;
	font-size: clamp(1.3rem, 2.2vw, 1.7rem);
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
}

.gs-insight-list { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 768px) { .gs-insight-list { grid-template-columns: repeat(3,1fr); } }
.gs-insight-card a { text-decoration: none; color: inherit; }
.gs-insight-card .gs-insight-media { margin-bottom: 20px; }

/* ---- final CTA ------------------------------------------------------------------ */

.gs-final-cta { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 992px) { .gs-final-cta { grid-template-columns: 1fr 1fr; } }

.gs-form-field { margin-bottom: 18px; }
.gs-form-field label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; color: var(--graphite-muted); }
.gs-form-field input, .gs-form-field textarea {
	width: 100%;
	border: 0; border-bottom: 1px solid var(--graphite-border);
	background: transparent;
	padding: 10px 2px;
	font-family: var(--gs-font);
	font-size: 15px;
	color: var(--graphite-text);
}
.gs-form-field input:focus, .gs-form-field textarea:focus { outline: none; border-color: var(--graphite-blue); }

/* ---- footer ------------------------------------------------------------------- */

.gs-footer { background: var(--graphite-black); color: #B7BEC7; padding: 90px 0 32px; border-top: 3px solid var(--graphite-blue-invert); }
.gs-footer h5 { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 20px; }
.gs-footer a { color: #B7BEC7; text-decoration: none; }
.gs-footer a:hover { color: var(--graphite-blue-invert); }
.gs-footer .gs-footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 56px; padding-top: 24px; font-size: 13px; }

/* ---- inline decorative SVG system: colored isometric 3D illustrations --------------
   Every brand illustration is inlined as real <svg> markup (not <img>), each scoped to
   its own accent color via a wrapper class, so one shared set of classes drives every
   section's artwork. The "3D" read comes from two layers: (1) isometric shading — each
   cube has a light top face, mid-tone left face, dark right face, the classic flat-3D
   illusion — and (2) a real interactive tilt: .gs-tilt containers rotate in actual 3D
   (perspective + rotateX/rotateY) toward the cursor, wired in graphite-main.js. */

.gs-accent-blue      { --accent: #3B82F6; --accent-light: #93C5FD; --accent-dark: #1D4ED8; }
.gs-accent-teal       { --accent: #14B8A6; --accent-light: #5EEAD4; --accent-dark: #0F766E; }
.gs-accent-indigo    { --accent: #6366F1; --accent-light: #A5B4FC; --accent-dark: #4338CA; }
.gs-accent-amber     { --accent: #F59E0B; --accent-light: #FCD34D; --accent-dark: #B45309; }
.gs-accent-emerald   { --accent: #10B981; --accent-light: #6EE7B7; --accent-dark: #047857; }
.gs-accent-rose      { --accent: #FB7185; --accent-light: #FDA4AF; --accent-dark: #BE123C; }
.gs-accent-violet    { --accent: #8B5CF6; --accent-light: #C4B5FD; --accent-dark: #6D28D9; }
.gs-accent-cyan      { --accent: #22D3EE; --accent-light: #A5F3FC; --accent-dark: #0E7490; }

.gs-svg { display: block; width: 100%; height: 100%; }

.gs-cube-group {
	transform-box: fill-box;
	transform-origin: center;
	animation: gs3DFloat 6s ease-in-out infinite;
}
.gs-cube-top { fill: var(--accent-light); }
.gs-cube-left { fill: var(--accent); }
.gs-cube-right { fill: var(--accent-dark); }

.gs-svg-line { stroke: var(--accent); stroke-dasharray: 5 5; animation: gsDashFlow 7s linear infinite; }
.gs-svg-node {
	fill: var(--accent);
	transform-box: fill-box;
	transform-origin: center;
	animation: gsNodePulse 3.2s ease-in-out infinite;
}
.gs-svg-node:nth-child(2n) { animation-delay: -0.6s; }
.gs-svg-node:nth-child(3n) { animation-delay: -1.4s; }
.gs-svg-ring {
	stroke: var(--accent);
	transform-box: fill-box;
	transform-origin: center;
	animation: gsRingExpand 4.5s ease-out infinite;
}

@keyframes gs3DFloat {
	0%, 100% { transform: translateY(0) rotate(-2deg); }
	50% { transform: translateY(-14px) rotate(2deg); }
}
@keyframes gsDashFlow { to { stroke-dashoffset: -120; } }
@keyframes gsNodePulse {
	0%, 100% { opacity: 0.6; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.5); }
}
@keyframes gsRingExpand {
	0% { opacity: 0.5; transform: scale(0.85); }
	100% { opacity: 0; transform: scale(1.3); }
}

/* Hover: the section/card's own illustration speeds up and floats faster. */
.gs-service-row:hover .gs-cube-group,
.gs-hero:hover .gs-cube-group { animation-duration: 2.5s; }
.gs-service-row:hover .gs-svg-line { animation-duration: 2.2s; }
.gs-service-row:hover .gs-svg-node { animation-duration: 1.1s; }
.gs-service-media { border: 1px solid transparent; transition: border-color 0.4s var(--gs-ease), box-shadow 0.4s var(--gs-ease); }
.gs-service-row:hover .gs-service-media {
	border-color: var(--accent, var(--graphite-border));
	box-shadow: 0 20px 48px -20px var(--accent, transparent);
}
.gs-service-row:hover .gs-service-num { color: var(--accent, var(--graphite-blue)); }

/* Real 3D tilt: rotates toward the cursor. JS sets rotateX/rotateY inline;
   this just establishes the perspective and a smooth settle-back transition. */
/* Flex/grid columns holding a .gs-tilt won't respect their set width unless
   forced to ignore their content's intrinsic min-content size (the classic
   Bootstrap flex-overflow gotcha). */
.gs-tilt { perspective: 1000px; min-width: 0; max-width: 100%; }
.gs-tilt-inner {
	position: relative;
	width: 100%; height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.4s var(--gs-ease);
	will-change: transform;
	overflow: hidden;
}

@media (max-width: 768px) {
	.gs-svg-line, .gs-svg-ring { animation: none; }
	.gs-cube-group { animation-duration: 8s; }
	.gs-svg-node { animation-duration: 5s; }
}
@media (hover: none), (pointer: coarse) {
	.gs-tilt-inner { transform: none !important; }
}

/* ---- reduced motion ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.split-title .word-inner,
	.gs-hero h1 .word-inner,
	.gs-pillar .num, .gs-pillar h3, .gs-pillar p,
	.image-reveal,
	.gs-hero-bg,
	.gs-cube-group, .gs-svg-line, .gs-svg-node, .gs-svg-ring, .gs-tilt-inner {
		transform: none !important;
		opacity: 1 !important;
		clip-path: none !important;
		animation: none !important;
	}
}