/* Thorn Homepage Redesign — black/white base, single vivid teal metallic
   accent, bold type, scroll-triggered reveals. No diamonds anywhere — the
   recurring shape here is the arrow. */

:root {
	--th-black: #0a0a0a;
	--th-white: #ffffff;
	--th-off: #f4f4f2;
	/* Vivid modern teal accent. */
	--th-accent: #007DCC;
	--th-accent-light: #59ABDE;
	--th-accent-dark: #005185;
	--th-grey: #8a8a8a;
}

body.thorn-home {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	background: var(--th-white);
	color: var(--th-black);
	-webkit-font-smoothing: antialiased;
}
body.thorn-home * { box-sizing: border-box; }

.th-container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

.th-arrow { display: inline-block; transition: transform 0.25s ease; }

/* ── Nav ── */
.th-nav {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100;
	display: flex; align-items: center; justify-content: space-between;
	padding: 26px 40px;
	background: transparent;
	transition: background 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}
.th-nav.th-nav-scrolled {
	background: rgba(10,10,10,0.92); backdrop-filter: blur(8px);
	padding: 16px 40px;
	box-shadow: 0 2px 20px rgba(0,0,0,0.25);
}
.th-nav-logo { display: block; line-height: 0; }
.th-nav-logo img { height: 38px; width: auto; display: block; }
.th-footer-inner .th-nav-logo img { height: 46px; }
.th-nav-links { display: flex; align-items: center; gap: 34px; }
.th-nav-item { position: relative; }
/* Light text by default — the hero underneath is permanently black. Stays
   light once .th-nav-scrolled kicks in too (solid dark bar behind it). */
.th-nav-item > a {
	color: rgba(255,255,255,0.85); text-decoration: none; font-size: 14px;
	font-weight: 600; letter-spacing: 0.02em; padding: 8px 0; position: relative;
	transition: color 0.3s ease;
}
.th-nav-item > a::after {
	content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
	background: var(--th-accent); transition: width 0.25s ease;
}
.th-nav-item:hover > a::after { width: 100%; }
.th-nav-item:hover > a { color: var(--th-white); }
.th-sub {
	position: absolute; top: 100%; left: 0; padding-top: 14px;
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	display: flex; flex-direction: column; min-width: 240px;
	background: var(--th-black); border-top: 2px solid var(--th-accent);
}
.th-nav-item:hover .th-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.th-sub a {
	color: rgba(255,255,255,0.8); text-decoration: none; font-size: 13px;
	padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.th-sub a:hover { color: var(--th-accent); background: rgba(255,255,255,0.03); }
.th-nav-cta {
	display: flex; align-items: center; gap: 8px;
	color: var(--th-white); text-decoration: none; font-weight: 700; font-size: 13px;
	letter-spacing: 0.03em; text-transform: uppercase;
	border: 1.5px solid rgba(255,255,255,0.35); padding: 10px 20px; border-radius: 2px;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.3s ease;
}
.th-nav-cta:hover { border-color: var(--th-accent); background: var(--th-accent); color: var(--th-black); }
.th-nav-cta:hover .th-arrow { transform: translateX(3px); }
.th-nav-burger { display: none; }
.th-nav-burger span { background: var(--th-white); }

/* ── Hero ── */
/* Permanently black. JS adds th-hero-lit once the ring circles have been
   fully drawn and the sweep line has retracted, which fades the text in. */
.th-hero {
	min-height: 100vh; background: var(--th-black); color: var(--th-white);
	display: flex; align-items: center;
	position: relative; overflow: hidden;
	padding: 140px 40px 100px 100px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Intro sweep line: grows from the left edge to exactly where the ring
   graphic sits (JS measures the real pixel position so it lines up at any
   viewport width), then hands off directly into the rings drawing
   themselves in via stroke-dashoffset — same line, same motion, one
   continuous stroke — before retracting. See script.js. */
.th-hero-intro-line {
	position: absolute; top: 50%; left: 0; width: 0; height: 2px;
	background: var(--th-accent); z-index: 2; pointer-events: none;
	transition: opacity 0.5s ease;
}

/* Three broken-ring circles, spinning continuously in alternating
   directions, with several real website screenshots — kept as rectangles —
   zooming in and out from different spots within the circle on staggered,
   independent cycles. See script.js for the timing sequence. */
.th-hero-graphic-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.th-circle-graphic {
	position: absolute; top: 50%; right: 4%; width: 660px; height: 660px;
	transform: translateY(-50%);
}
.th-circle-rings {
	position: absolute; inset: 0; width: 100%; height: 100%;
	fill: none;
}
.th-ring-outer, .th-ring-middle, .th-ring-inner {
	fill: none; stroke: var(--th-accent);
	transform-box: view-box; transform-origin: 50% 50%;
	/* Rotation is driven from script.js (continuously reverses direction
	   and alternates fast/slow every 3s) — no CSS animation here. */
}
.th-ring-middle { stroke: var(--th-accent-light); }
.th-ring-inner  { stroke: var(--th-accent-dark); }

/* Single tile, large enough to nearly touch the innermost ring (r=120 in a
   300-unit viewBox, i.e. 240px radius at this container's 2x scale).
   Static position — just a fade between screenshots, no zoom/rotate. */
.th-circle-tile {
	position: absolute; top: 50%; left: 50%; width: 380px; height: 285px;
	transform: translate(-50%, -50%);
	border-radius: 6px; background-color: var(--th-off);
	background-size: cover; background-position: center;
	box-shadow: 0 20px 44px rgba(10,10,10,0.24);
	opacity: 0;
	transition: opacity 0.6s ease;
}
.th-circle-tile.th-circle-tile-in { opacity: 1; }

.th-hero-inner {
	position: relative; z-index: 1; max-width: 560px;
	opacity: 0;
	transition: opacity 0.7s ease;
}
.th-hero.th-hero-lit .th-hero-inner { opacity: 1; }
.th-eyebrow {
	color: var(--th-accent); font-weight: 700; font-size: 13px; letter-spacing: 0.14em;
	text-transform: uppercase; margin: 0 0 20px;
}
/* !important guards: the first slide renders as a real <h1> (for SEO —
   see the template) while the other two render as <div>s with this same
   class. Uncode's theme stylesheet (still loaded via wp_head — nothing
   here dequeues it) carries its own generic `h1 { font-size: ... }` rule
   that otherwise wins on specificity against the h1 specifically, making
   just that one slide's title render smaller than the div-based ones. */
.th-hero-title {
	font-size: clamp(34px, 5vw, 64px) !important; font-weight: 800; line-height: 1.08;
	margin: 0 0 24px; letter-spacing: -0.02em;
}
.th-hero-title-lg { font-size: clamp(40px, 6vw, 78px) !important; }
.th-hero-sub {
	font-size: clamp(16px, 1.6vw, 18px); line-height: 1.6; color: rgba(255,255,255,0.7);
	max-width: 520px; margin: 0 0 8px;
}

/* Hero slide crossfade — stacked absolutely, only the active one visible.
   min-height reserves space for the tallest slide so nothing jumps. */
.th-hero-slides { position: relative; min-height: 320px; margin-bottom: 28px; }
.th-hero-slide {
	position: absolute; inset: 0 auto auto 0; width: 100%;
	opacity: 0; visibility: hidden; transform: translateY(14px);
	transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s;
}
.th-hero-slide-active { position: relative; opacity: 1; visibility: visible; transform: translateY(0); }
.th-hero-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.th-hero-tag {
	border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.85);
	font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 100px;
}
.th-hero-dots { display: flex; gap: 10px; margin-bottom: 34px; }
.th-hero-dot {
	width: 26px; height: 3px; padding: 0; border: none; cursor: pointer;
	background: rgba(255,255,255,0.25); transition: background 0.25s ease;
}
.th-hero-dot-active, .th-hero-dot:hover { background: var(--th-accent); }

.th-btn {
	display: inline-flex; align-items: center; gap: 10px;
	background: var(--th-accent);
	color: var(--th-black); text-decoration: none;
	font-weight: 700; font-size: 14px; letter-spacing: 0.03em; text-transform: uppercase;
	padding: 16px 30px; border-radius: 2px; transition: transform 0.2s ease, background 0.2s ease;
}
.th-btn:hover { background: var(--th-accent-light); transform: translateY(-2px); }
.th-btn:hover .th-arrow { transform: translateX(4px); }
.th-btn-dark { background: var(--th-black); color: var(--th-white); }
.th-btn-dark:hover { background: #1a1a1a; color: var(--th-white); }
.th-hero-scroll {
	position: absolute; bottom: 40px; left: 40px;
	width: 1px; height: 60px; background: rgba(255,255,255,0.25);
	overflow: hidden;
}
.th-hero-scroll span {
	display: block; width: 100%; height: 40%; background: var(--th-accent);
	animation: th-scroll-line 1.8s ease-in-out infinite;
}
@keyframes th-scroll-line {
	0% { transform: translateY(-100%); }
	100% { transform: translateY(250%); }
}

/* ── Section theming ── */
.th-light { background: var(--th-white); color: var(--th-black); }
.th-dark { background: var(--th-black); color: var(--th-white); }
.th-light .th-eyebrow, .th-dark .th-eyebrow { color: var(--th-accent); }

/* ── Capabilities ── */
.th-capabilities { padding: 120px 0; text-align: center; }
.th-capabilities h2 {
	font-size: clamp(30px, 4vw, 52px); font-weight: 800; margin: 0 0 26px; letter-spacing: -0.01em;
}
.th-capabilities-body {
	font-size: 18px; line-height: 1.7; color: #444; max-width: 640px; margin: 0 auto;
}

/* ── Services ── */
.th-services { padding: 100px 0; }
.th-service-row {
	display: flex; align-items: flex-start; gap: 36px;
	padding: 36px 0; border-bottom: 1px solid rgba(255,255,255,0.1);
	transition: padding-left 0.3s ease;
}
.th-service-row:hover { padding-left: 14px; }
.th-service-row:first-child { border-top: 1px solid rgba(255,255,255,0.1); }
.th-service-num {
	font-size: 15px; font-weight: 800; color: var(--th-accent);
	letter-spacing: 0.05em; padding-top: 6px; flex-shrink: 0; width: 40px;
}
.th-service-body h3 {
	font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; margin: 0 0 10px;
	display: flex; align-items: center; gap: 12px;
}
.th-service-arrow { color: var(--th-accent); opacity: 0; transform: translateX(-6px); }
.th-service-row:hover .th-service-arrow { opacity: 1; transform: translateX(0); }
.th-service-body p {
	font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.62); max-width: 640px; margin: 0;
}

/* ── Work / Portfolio ── */
.th-work { padding: 120px 0; }
.th-work h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; max-width: 700px; margin: 0 0 60px; letter-spacing: -0.01em; }
.th-work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.th-work-item { text-decoration: none; color: inherit; display: block; }
.th-work-img-wrap {
	position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #eee;
}
.th-work-img-wrap img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 0.5s ease;
}
.th-work-item:hover .th-work-img-wrap img { transform: scale(1.06); }
.th-work-overlay {
	position: absolute; inset: 0; background: rgba(201,169,78,0.9);
	display: flex; align-items: center; justify-content: center;
	opacity: 0; transition: opacity 0.3s ease;
}
.th-work-item:hover .th-work-overlay { opacity: 1; }
.th-work-overlay .th-arrow { color: var(--th-black); font-size: 32px; }
.th-work-name { display: block; margin-top: 16px; font-weight: 700; font-size: 16px; }

/* ── Clients ── */
.th-clients { padding: 110px 0; }
.th-clients h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; max-width: 620px; margin: 0 0 60px; }
.th-clients-grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
	background: rgba(255,255,255,0.08);
}
.th-client-logo {
	background: var(--th-black); aspect-ratio: 3 / 2;
	display: flex; align-items: center; justify-content: center; padding: 28px;
}
.th-client-logo img {
	max-width: 100%; max-height: 100%; object-fit: contain;
	filter: grayscale(1) brightness(2.2); opacity: 0.55;
	transition: filter 0.3s ease, opacity 0.3s ease;
}
.th-client-logo:hover img { filter: none; opacity: 1; }

/* ── CTA band ── */
.th-cta { padding: 110px 0; }
.th-cta-inner { text-align: center; }
.th-cta h2 { font-size: clamp(30px, 4.4vw, 54px); font-weight: 800; margin: 0 0 34px; letter-spacing: -0.02em; }

/* ── Footer ── */
.th-footer { background: var(--th-black); color: rgba(255,255,255,0.6); padding: 60px 0 34px; }
.th-footer-inner { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
.th-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.th-footer-links a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 13px; font-weight: 600; }
.th-footer-links a:hover { color: var(--th-accent); }
.th-footer-copy { font-size: 12px; color: rgba(255,255,255,0.35); margin: 0; }

/* ── Scroll reveals ── */
.th-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.th-reveal.th-in { opacity: 1; transform: translateY(0); }

/* ── Responsive ── */
@media (max-width: 900px) {
	.th-nav-links, .th-nav-cta { display: none; }
	.th-nav-burger {
		display: flex; flex-direction: column; gap: 5px; background: none; border: none;
		cursor: pointer; padding: 6px; z-index: 101; position: relative;
	}
	.th-nav-burger span { width: 24px; height: 2px; display: block; transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease; }
	/* Menu-open overlay is always solid black regardless of scroll state,
	   so the burger-turned-X needs to stay white while it's open. */
	.th-nav-open .th-nav-burger span { background: var(--th-white) !important; }
	.th-nav-open .th-nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.th-nav-open .th-nav-burger span:nth-child(2) { opacity: 0; }
	.th-nav-open .th-nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	.th-nav-open .th-nav-links,
	.th-nav-open .th-nav-cta {
		display: flex; position: fixed; inset: 0; z-index: 100;
		background: var(--th-black); flex-direction: column; align-items: center;
		justify-content: center; gap: 28px;
	}
	.th-nav-open .th-nav-cta { top: auto; bottom: 60px; height: auto; inset: auto 0 60px 0; }
	.th-nav-open .th-sub {
		position: static; opacity: 1; visibility: visible; transform: none;
		border-top: none; align-items: center; background: transparent; padding-top: 10px;
	}
	.th-nav-open .th-nav-item { text-align: center; }

	.th-work-grid { grid-template-columns: 1fr; }
	.th-clients-grid { grid-template-columns: repeat(2, 1fr); }
	.th-service-row { flex-direction: column; gap: 10px; }
	.th-hero { padding: 120px 24px 80px; }
	.th-circle-graphic {
		top: auto; bottom: 6%; right: 50%; transform: translateX(50%);
		width: 220px; height: 220px;
	}
	.th-circle-tile { width: 140px; height: 105px; }
	.th-hero-inner { max-width: 100%; }
	.th-container { padding: 0 22px; }
}