/* ==========================================================================
   Second Soul Media — home.css
   Front page only. Conditionally enqueued in inc/enqueue.php so interior
   pages never download these bytes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.ssm-hero {
	position: relative;
	z-index: var(--ssm-z-content);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 128px var(--ssm-gutter) clamp(28px, 4vw, 56px);
}

.ssm-hero__title {
	margin-top: 26px;
	font-size: var(--ssm-fs-h1);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.028em;
}

.ssm-hero__title .ssm-line-mask {
	display: block;
	overflow: hidden;
	padding-bottom: 0.09em;
}

/* Hand-drawn gold underline beneath the accent phrase. */
.ssm-hero__accent {
	position: relative;
	display: inline-block;
}

.ssm-hero__underline {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.12em;
	width: 100%;
	height: 0.22em;
	overflow: visible;
	pointer-events: none;
}

.ssm-hero__underline path {
	stroke: var(--ssm-gold-500);
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.is-visible .ssm-hero__underline path,
.ssm-hero__accent.is-visible .ssm-hero__underline path {
	animation: ssmDraw 1.1s var(--ssm-ease) 0.35s forwards;
}

.ssm-hero__sparkle path {
	fill: var(--ssm-gold-300);
}

.ssm-hero__sparkle {
	position: absolute;
	top: -0.35em;
	right: -0.55em;
	width: 0.32em;
	height: 0.32em;
	animation: ssmTwinkle 3.2s ease-in-out infinite;
}

.ssm-hero__lead {
	margin-top: 30px;
	max-width: 40rem;
	font-size: clamp(1rem, 1.4vw, 1.22rem);
	color: var(--ssm-body);
}

.ssm-hero__actions {
	margin-top: 38px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.ssm-hero__foot {
	margin-top: clamp(48px, 8vw, 96px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
}

.ssm-hero__scroll {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: var(--ssm-fs-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ssm-muted);
}

.ssm-hero__scroll-rail {
	position: relative;
	width: 1px;
	height: 42px;
	background: rgba(201, 162, 75, 0.28);
	overflow: hidden;
}

.ssm-hero__scroll-rail span {
	position: absolute;
	inset-inline: 0;
	height: 40%;
	background: var(--ssm-gold-500);
	animation: ssmScroll 2.4s var(--ssm-ease) infinite;
}

.ssm-pillars {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: var(--ssm-fs-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ssm-muted);
}

.ssm-pillars__sep {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--ssm-gold-500);
	opacity: 0.7;
}

@media (max-width: 640px) {
	.ssm-pillars {
		display: none;
	}
}

@media (max-width: 600px) {
	.ssm-hero {
		padding-top: 112px;
	}
}

/* --------------------------------------------------------------------------
   CREDIBILITY / STATS
   -------------------------------------------------------------------------- */
.ssm-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
	gap: clamp(20px, 3vw, 44px);
}

.ssm-stat__value {
	font-family: var(--ssm-font-display);
	font-size: clamp(2.1rem, 4.6vw, 3.4rem);
	font-weight: 600;
	color: var(--ssm-gold-300);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.ssm-stat__label {
	margin-top: 12px;
	font-size: var(--ssm-fs-xs);
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--ssm-muted);
}

/* --------------------------------------------------------------------------
   MANIFESTO
   -------------------------------------------------------------------------- */
.ssm-manifesto {
	max-width: 58rem;
	margin-inline: auto;
	text-align: center;
}

.ssm-manifesto__text {
	margin-top: 26px;
	font-family: var(--ssm-font-display);
	font-size: clamp(1.4rem, 3vw, 2.5rem);
	font-weight: 400;
	line-height: 1.28;
	letter-spacing: -0.015em;
	color: var(--ssm-cream);
}

/* --------------------------------------------------------------------------
   SERVICES — hover-swap panel
   -------------------------------------------------------------------------- */
.ssm-svc-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(28px, 4vw, 64px);
	margin-top: clamp(34px, 5vw, 60px);
	align-items: start;
}

.ssm-svc-list {
	display: flex;
	flex-direction: column;
}

.ssm-svc-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 18px;
	padding: clamp(18px, 2.4vw, 28px) 4px;
	border-top: 1px solid var(--ssm-hairline);
	transition: padding-left 0.45s var(--ssm-ease);
}

.ssm-svc-row:last-child {
	border-bottom: 1px solid var(--ssm-hairline);
}

.ssm-svc-row:hover,
.ssm-svc-row.is-active {
	padding-left: 14px;
}

.ssm-svc-row__num {
	font-size: var(--ssm-fs-xs);
	color: var(--ssm-gold-500);
	font-variant-numeric: tabular-nums;
	opacity: 0.75;
	transition: opacity 0.35s;
}

.ssm-svc-row__title {
	font-family: var(--ssm-font-display);
	font-size: clamp(1.35rem, 2.8vw, 2.15rem);
	font-weight: 500;
	color: var(--ssm-cream);
	transition: color 0.4s;
}

.ssm-svc-row:hover .ssm-svc-row__title,
.ssm-svc-row.is-active .ssm-svc-row__title {
	color: var(--ssm-gold-300);
}

.ssm-svc-row:hover .ssm-svc-row__num,
.ssm-svc-row.is-active .ssm-svc-row__num {
	opacity: 1;
}

.ssm-svc-row__arrow {
	color: var(--ssm-gold-500);
	opacity: 0;
	transform: translateX(-10px);
	transition: opacity 0.4s var(--ssm-ease), transform 0.4s var(--ssm-ease);
}

.ssm-svc-row:hover .ssm-svc-row__arrow,
.ssm-svc-row.is-active .ssm-svc-row__arrow {
	opacity: 1;
	transform: translateX(0);
}

/* Inline description — mobile only (panel is hidden there). */
.ssm-svc-row__desc {
	display: none;
	grid-column: 2 / -1;
	margin-top: 8px;
	font-size: var(--ssm-fs-sm);
	color: var(--ssm-body);
}

/* Preview panel */
.ssm-svc-preview {
	position: sticky;
	top: 120px;
	border: 1px solid var(--ssm-glass-border);
	border-radius: var(--ssm-radius-card-lg);
	background: var(--ssm-glass-bg);
	backdrop-filter: var(--ssm-blur);
	-webkit-backdrop-filter: var(--ssm-blur);
	padding: clamp(24px, 3vw, 40px);
	overflow: hidden;
	min-height: 340px;
}

.ssm-svc-preview__watermark {
	position: absolute;
	top: -0.12em;
	right: 0.1em;
	font-family: var(--ssm-font-display);
	font-size: clamp(6rem, 12vw, 11rem);
	font-weight: 700;
	line-height: 1;
	color: rgba(201, 162, 75, 0.09);
	pointer-events: none;
	user-select: none;
}

.ssm-svc-preview__tag {
	font-size: var(--ssm-fs-eyebrow);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ssm-gold-500);
}

.ssm-svc-preview__name {
	margin-top: 14px;
	font-family: var(--ssm-font-display);
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
}

.ssm-svc-preview__desc {
	margin-top: 16px;
	color: var(--ssm-body);
	font-size: var(--ssm-fs-sm);
}

.ssm-svc-preview__tags {
	margin-top: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.ssm-svc-preview__body {
	position: relative;
	z-index: 1;
	transition: opacity 0.35s var(--ssm-ease), transform 0.35s var(--ssm-ease);
}

.ssm-svc-preview__body.is-swapping {
	opacity: 0;
	transform: translateY(10px);
}

@media (max-width: 860px) {
	.ssm-svc-grid {
		grid-template-columns: 1fr;
	}

	.ssm-svc-preview {
		display: none;
	}

	.ssm-svc-row__desc {
		display: block;
	}
}

/* --------------------------------------------------------------------------
   WORK
   -------------------------------------------------------------------------- */
.ssm-work-list {
	margin-top: clamp(30px, 4vw, 54px);
	border-top: 1px solid var(--ssm-hairline);
}

.ssm-work-row {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: clamp(14px, 2.4vw, 32px);
	padding: clamp(22px, 3vw, 38px) var(--ssm-gutter);
	border-bottom: 1px solid var(--ssm-hairline);
	overflow: hidden;
}

.ssm-work-row__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	transition: opacity 0.7s var(--ssm-ease);
}

.ssm-work-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform 0.9s var(--ssm-ease);
	filter: saturate(0.85);
}

.ssm-work-row:hover .ssm-work-row__media {
	opacity: 0.26;
}

.ssm-work-row:hover .ssm-work-row__media img {
	transform: scale(1.06);
}

.ssm-work-row__idx {
	font-size: var(--ssm-fs-xs);
	color: var(--ssm-muted);
	font-variant-numeric: tabular-nums;
	transition: color 0.4s;
}

.ssm-work-row__title {
	font-family: var(--ssm-font-display);
	font-size: clamp(1.3rem, 2.6vw, 2.1rem);
	font-weight: 500;
	transition: color 0.4s;
}

.ssm-work-row:hover .ssm-work-row__title,
.ssm-work-row:hover .ssm-work-row__idx {
	color: var(--ssm-gold-300);
}

.ssm-work-row__meta {
	font-size: var(--ssm-fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ssm-muted);
}

.ssm-work-row__cta {
	color: var(--ssm-gold-500);
	opacity: 0;
	transform: translateX(-12px);
	transition: opacity 0.45s var(--ssm-ease), transform 0.45s var(--ssm-ease);
}

.ssm-work-row:hover .ssm-work-row__cta {
	opacity: 1;
	transform: translateX(0);
}

@media (hover: none) {
	.ssm-work-row__cta {
		opacity: 1;
		transform: none;
	}

	.ssm-work-row__media {
		opacity: 0.18;
	}
}

@media (max-width: 760px) {
	.ssm-work-row {
		grid-template-columns: auto 1fr;
	}

	.ssm-work-row__meta,
	.ssm-work-row__cta {
		display: none;
	}
}

/* Work grid cards (archive + related) ------------------------------------ */
.ssm-work-card {
	display: block;
	border-radius: var(--ssm-radius-card-lg);
	overflow: hidden;
	background: var(--ssm-navy-700);
	border: 1px solid var(--ssm-glass-border);
}

.ssm-work-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.ssm-work-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: center;
	transition: transform 0.8s var(--ssm-ease);
}

.ssm-work-card:hover .ssm-work-card__media img {
	transform: scale(1.07);
}

.ssm-work-card__overlay {
	position: absolute;
	inset: auto 0 0 0;
	padding: 20px;
	background: linear-gradient(transparent, rgba(4, 6, 15, 0.92));
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.45s var(--ssm-ease), transform 0.45s var(--ssm-ease);
}

.ssm-work-card:hover .ssm-work-card__overlay {
	opacity: 1;
	transform: translateY(0);
}

.ssm-work-card__body {
	padding: 22px;
}

@media (hover: none) {
	.ssm-work-card__overlay {
		opacity: 1;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   WHY US / PROCESS / TECH
   -------------------------------------------------------------------------- */
.ssm-process {
	position: relative;
	margin-top: clamp(34px, 5vw, 60px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: clamp(22px, 3vw, 40px);
}

.ssm-process__line {
	position: absolute;
	left: 0;
	right: 0;
	top: 26px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(201, 162, 75, 0.35), transparent);
	pointer-events: none;
}

.ssm-process__step {
	position: relative;
}

.ssm-process__num {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 1px solid var(--ssm-glass-border);
	border-radius: 50%;
	background: var(--ssm-navy-800);
	font-family: var(--ssm-font-display);
	color: var(--ssm-gold-300);
	font-size: var(--ssm-fs-sm);
}

.ssm-process__title {
	margin-top: 20px;
	font-size: var(--ssm-fs-h4);
}

.ssm-process__text {
	margin-top: 10px;
	font-size: var(--ssm-fs-sm);
	color: var(--ssm-body);
}

@media (max-width: 860px) {
	.ssm-process__line {
		display: none;
	}
}

.ssm-tech-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
	gap: 14px;
	margin-top: clamp(30px, 4vw, 50px);
}

.ssm-tech-tile {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 18px;
	border: 1px solid var(--ssm-glass-border);
	border-radius: var(--ssm-radius-card);
	background: var(--ssm-glass-bg);
	font-size: var(--ssm-fs-sm);
	transition: transform 0.4s var(--ssm-ease), border-color 0.4s, background 0.4s;
}

.ssm-tech-tile:hover {
	transform: translateY(-4px);
	border-color: rgba(201, 162, 75, 0.5);
	background: rgba(201, 162, 75, 0.07);
}

.ssm-tech-tile__mark {
	color: var(--ssm-gold-500);
	opacity: 0.7;
	transition: color 0.35s, opacity 0.35s;
}

.ssm-tech-tile:hover .ssm-tech-tile__mark {
	color: var(--ssm-gold-300);
	opacity: 1;
}

/* --------------------------------------------------------------------------
   TESTIMONIALS
   -------------------------------------------------------------------------- */
.ssm-testi {
	position: relative;
	margin-top: clamp(30px, 4vw, 54px);
	max-width: 60rem;
	margin-inline: auto;
	text-align: center;
}

.ssm-testi__viewport {
	position: relative;
	min-height: 220px;
}

.ssm-testi__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity 0.55s var(--ssm-ease), transform 0.55s var(--ssm-ease), visibility 0.55s;
}

.ssm-testi__slide.is-active {
	position: relative;
	opacity: 1;
	visibility: visible;
	transform: none;
}

.ssm-testi__quote {
	font-family: var(--ssm-font-display);
	font-size: clamp(1.2rem, 2.4vw, 1.85rem);
	font-weight: 400;
	line-height: 1.4;
	color: var(--ssm-cream);
}

.ssm-testi__author {
	margin-top: 24px;
	font-size: var(--ssm-fs-sm);
	color: var(--ssm-gold-300);
	font-weight: 600;
}

.ssm-testi__role {
	margin-top: 4px;
	font-size: var(--ssm-fs-xs);
	color: var(--ssm-muted);
}

.ssm-testi__controls {
	margin-top: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
}

.ssm-testi__arrow {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--ssm-glass-border);
	border-radius: 50%;
	background: none;
	color: var(--ssm-gold-500);
	cursor: pointer;
	transition: border-color 0.3s, background 0.3s;
}

.ssm-testi__arrow:hover {
	border-color: var(--ssm-gold-500);
	background: rgba(201, 162, 75, 0.1);
}

.ssm-testi__dots {
	display: flex;
	gap: 9px;
}

.ssm-testi__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(201, 162, 75, 0.32);
	cursor: pointer;
	transition: background 0.3s, transform 0.3s;
}

.ssm-testi__dot.is-active {
	background: var(--ssm-gold-500);
	transform: scale(1.3);
}

@media (max-width: 600px) {
	.ssm-testi__arrow {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   INSIGHTS TEASER
   -------------------------------------------------------------------------- */
.ssm-insight-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ssm-glass-border);
	border-radius: var(--ssm-radius-card-lg);
	background: var(--ssm-glass-bg);
	overflow: hidden;
	transition: transform 0.4s var(--ssm-ease), border-color 0.4s;
}

.ssm-insight-card:hover {
	transform: translateY(-5px);
	border-color: rgba(201, 162, 75, 0.5);
}

.ssm-insight-card__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--ssm-navy-700);
}

.ssm-insight-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--ssm-ease);
}

.ssm-insight-card:hover .ssm-insight-card__media img {
	transform: scale(1.06);
}

.ssm-insight-card__body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}

.ssm-insight-card__meta {
	font-size: var(--ssm-fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ssm-gold-500);
}

.ssm-insight-card__title {
	font-size: var(--ssm-fs-h4);
	transition: color 0.35s;
}

.ssm-insight-card:hover .ssm-insight-card__title {
	color: var(--ssm-gold-300);
}

.ssm-insight-card__excerpt {
	font-size: var(--ssm-fs-sm);
	color: var(--ssm-body);
}

/* --------------------------------------------------------------------------
   INDUSTRIES
   -------------------------------------------------------------------------- */
.ssm-industry {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 22px;
	border: 1px solid var(--ssm-glass-border);
	border-radius: var(--ssm-radius-card);
	background: var(--ssm-glass-bg);
	transition: transform 0.4s var(--ssm-ease), border-color 0.4s, background 0.4s;
}

.ssm-industry:hover {
	transform: translateY(-4px);
	border-color: rgba(201, 162, 75, 0.5);
	background: rgba(201, 162, 75, 0.07);
}

.ssm-industry__icon {
	flex: 0 0 auto;
	color: var(--ssm-gold-500);
}

.ssm-industry__name {
	font-family: var(--ssm-font-display);
	font-size: var(--ssm-fs-body);
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   LOADER (front page only)
   -------------------------------------------------------------------------- */
.ssm-loader {
	position: fixed;
	inset: 0;
	z-index: var(--ssm-z-loader);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
	background: var(--ssm-navy-900);
	transition: transform 0.9s var(--ssm-ease);
}

.ssm-loader.is-done {
	transform: translateY(-101%);
}

.ssm-loader img {
	height: 54px;
	width: auto;
	animation: ssmLogoGlow 1.7s ease-in-out infinite;
}

.ssm-loader__num {
	font-family: var(--ssm-font-display);
	font-size: clamp(2rem, 5vw, 3rem);
	color: var(--ssm-gold-300);
	font-variant-numeric: tabular-nums;
}

.ssm-loader__bar {
	width: min(280px, 60vw);
	height: 1px;
	background: rgba(201, 162, 75, 0.22);
	overflow: hidden;
}

.ssm-loader__bar span {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--ssm-gold-500);
	transform-origin: left;
	transform: scaleX(0);
	transition: transform 0.3s linear;
}

@media (prefers-reduced-motion: reduce) {
	.ssm-loader {
		display: none;
	}
}