/*
	TENET / Hamilton-inspired redesign
	Deep navy cinematic palette, red/blue accents, warm editorial typography
	Palette inspired by hamiltonwatch.com/en-us/tenet
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,600&family=Inter:wght@300;400;500;600&display=swap');

/*
  ── Colour tokens ──
  --bg-deep:    primary background (deep navy)
  --bg-alt:     alternate section bg (slightly lighter navy)
  --bg-surface: cards / text panels
  --text-warm:  warm off-white for headings
  --text-body:  warm off-white for body copy
  --accent-red: TENET red
  --accent-blue:TENET blue
*/

/* Override when TENET style is active */
body.tenet-style {
	background: #0c0e18;
	color: rgba(232, 228, 218, 0.84);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 400;
}

body.tenet-style #sidebar {
	display: none;
}

body.tenet-style #sidebar + #wrapper,
body.tenet-style #sidebar + #wrapper + #footer {
	margin-left: 0;
}

/* Top navigation - minimal, fixed */
.tenet-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10000;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.5rem 3rem;
	background: linear-gradient(to bottom, rgba(12,14,24,0.95) 0%, transparent 100%);
	transition: background 0.3s ease;
}

.tenet-nav.scrolled {
	background: rgba(12, 14, 24, 0.94);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid rgba(196, 30, 58, 0.12);
}

.tenet-nav .tenet-logo {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #eee8dc;
	text-decoration: none;
	border: none;
}

.tenet-nav ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 2.5rem;
}

.tenet-nav a {
	color: rgba(232, 228, 218, 0.6);
	text-decoration: none;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	border: none;
	transition: color 0.2s ease;
}

.tenet-nav a:hover,
.tenet-nav a.active {
	color: #eee8dc;
}

/* Subtle red underline on active nav link */
.tenet-nav a.active {
	border-bottom: 1px solid rgba(196, 30, 58, 0.6);
	padding-bottom: 0.2em;
}

@media (max-width: 736px) {
	.tenet-nav {
		padding: 1rem 1.5rem;
		flex-wrap: wrap;
		gap: 1rem;
	}
	.tenet-nav ul {
		gap: 1.25rem;
	}
	.tenet-nav a {
		font-size: 0.65rem;
	}
}

/* Hero - full viewport, bold headline */
.tenet-hero {
	background: #0c0e18;
	background-image: linear-gradient(180deg, rgba(12,14,24,0.75) 0%, rgba(12,14,24,0.4) 50%, #0c0e18 100%),
		url("images/LP.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 6rem 2rem 4rem;
	position: relative;
}

/* Subtle red ambient glow at the bottom of the hero */
.tenet-hero::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 40%;
	background: radial-gradient(ellipse at 50% 100%, rgba(196, 30, 58, 0.08) 0%, transparent 70%);
	pointer-events: none;
	z-index: 0;
}

.tenet-hero .inner {
	max-width: 32em;
}

.tenet-hero h1 {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0.02em;
	color: #eee8dc;
	margin: 0 0 0.4em;
}

.tenet-hero .tagline {
	font-size: 1rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: rgba(196, 30, 58, 0.55);
	margin-bottom: 2.5em;
}

.tenet-hero .button,
.tenet-hero .btn-discover {
	display: inline-block;
	padding: 0 2.2em;
	font-size: 0.65rem;
	font-weight: 500;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: #eee8dc;
	text-decoration: none;
	border: 1px solid rgba(196, 30, 58, 0.5);
	background: transparent;
	transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
	text-align: center;
	margin-right: -0.25em;
}

.tenet-hero .button:hover,
.tenet-hero .btn-discover:hover {
	border-color: #c41e3a;
	color: #eee8dc;
	background: rgba(196, 30, 58, 0.12);
}

/* Anchor offset for fixed nav */
body.tenet-style #intro,
body.tenet-style #one,
body.tenet-style #two,
body.tenet-style #three {
	scroll-margin-top: 5rem;
}

/* Section blocks - full width, alternating feel */
body.tenet-style .wrapper {
	background: #0c0e18 !important;
}

body.tenet-style .wrapper.style1 {
	background: #0c0e18 !important;
}

body.tenet-style .wrapper.style2 {
	background: #10121e !important;
}

body.tenet-style .wrapper.style3 {
	background: #0c0e18 !important;
}

body.tenet-style .wrapper.style1-alt,
body.tenet-style #footer.wrapper.style1-alt {
	background: #10121e !important;
}

body.tenet-style .wrapper > .inner {
	padding: 5em 3em 4em;
	max-width: 52em;
	margin-left: auto;
	margin-right: auto;
}

/* Typography overrides */
body.tenet-style h1,
body.tenet-style h2,
body.tenet-style h3 {
	font-family: 'Cormorant Garamond', Georgia, serif;
	color: #eee8dc;
	font-weight: 600;
}

body.tenet-style h1 {
	font-size: 2.25em;
	letter-spacing: 0.02em;
}

body.tenet-style h2 {
	font-size: 1.85em;
	margin-bottom: 0.6em;
}

/* Red accent line above section headings (not inside reel slides) */
body.tenet-style .wrapper > .inner > h2::before {
	content: '';
	display: block;
	width: 2em;
	height: 2px;
	background: #c41e3a;
	margin-bottom: 0.8em;
}

body.tenet-style h3 {
	font-size: 1.15em;
}

body.tenet-style p {
	color: rgba(232, 228, 218, 0.78);
	line-height: 1.7;
}

body.tenet-style a {
	color: rgba(232, 228, 218, 0.9);
	border-bottom: 1px solid rgba(232, 228, 218, 0.30);
}

body.tenet-style a:hover {
	color: #eee8dc;
	border-bottom-color: #c41e3a;
}

/* Accent colours (TENET red/blue duality) */
.tenet-accent-red {
	color: #c41e3a;
	border-color: #c41e3a;
}

.tenet-accent-blue {
	color: #1e3a5f;
	border-color: #1e3a5f;
}

/* Buttons - discover style */
body.tenet-style .button {
	background: transparent !important;
	border: 1px solid rgba(196, 30, 58, 0.35) !important;
	border-radius: 3em !important;
	color: #eee8dc !important;
	font-family: 'Inter', sans-serif;
	font-size: 0.6rem !important;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}

body.tenet-style .button:hover {
	border-color: #c41e3a !important;
	background: rgba(196, 30, 58, 0.10) !important;
}

body.tenet-style .button.primary {
	background: rgba(196, 30, 58, 0.15) !important;
	color: #eee8dc !important;
	border-color: #c41e3a !important;
}

body.tenet-style .button.primary:hover {
	background: rgba(196, 30, 58, 0.25) !important;
}

/* Section intro (About) - two-column layout: 30% portrait, 70% text */
body.tenet-style #intro .tenet-about-inner {
	max-width: 1200px;
	padding-left: 2.5rem;
	padding-right: 2.5rem;
}

.tenet-about-inner {
	display: flex;
	align-items: flex-start;
	gap: 4.5rem;
	max-width: 100%;
}

.tenet-about-portrait {
	flex: 0 0 30%;
	max-width: 30%;
	aspect-ratio: 5/6;
	overflow: hidden;
	border-radius: 4px;
}

.tenet-portrait-img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
	border-radius: 4px;
	filter: grayscale(100%);
	opacity: 0.7;
	transition: opacity 2.4s ease;
}

body.tenet-style #intro.in-view .tenet-portrait-img {
	opacity: 1;
}

.tenet-about-text {
	flex: 0 0 70%;
	min-width: 0;
	max-width: 70%;
}

.tenet-section-intro .tenet-about-text h2 {
	font-style: italic;
	font-weight: 400;
	margin-bottom: 1em;
	opacity: 0.97;
	transform: translateY(4px);
	transition: opacity 1s ease, transform 1s ease;
}

body.tenet-style #intro.in-view .tenet-section-intro .tenet-about-text h2 {
	opacity: 1;
	transform: translateY(0);
}

.tenet-section-intro .tenet-about-text p {
	font-size: 1.05em;
	line-height: 1.7;
	margin-bottom: 1.25em;
	opacity: 0.97;
	transform: translateY(4px);
	transition: opacity 1s ease, transform 1s ease;
}

.tenet-section-intro .tenet-about-text p:nth-of-type(1) { transition-delay: 0.2s; }
.tenet-section-intro .tenet-about-text p:nth-of-type(2) { transition-delay: 0.4s; }
.tenet-section-intro .tenet-about-text p:nth-of-type(3) { transition-delay: 0.6s; }

body.tenet-style #intro.in-view .tenet-section-intro .tenet-about-text p {
	opacity: 1;
	transform: translateY(0);
}

.tenet-section-intro .tenet-about-text p:last-of-type {
	margin-bottom: 1.5em;
}

/* About: single column on narrow screens */
@media (max-width: 736px) {
	.tenet-about-inner {
		flex-direction: column;
		gap: 2rem;
		align-items: center;
	}
	.tenet-about-portrait,
	.tenet-about-text {
		flex: none;
		max-width: 100%;
	}
	.tenet-about-portrait {
		width: 200px;
	}
}

/* ============================================================
   TENET Reels – opposing-scroll two-column layout
   The section is 600vh tall (6 slides × 100vh).
   A sticky viewport pins the two columns to the screen.
   Left strip moves DOWN (images enter from top).
   Right strip moves UP (text enters from bottom).
   Symbol halves are the first visible slides and split naturally.
   ============================================================ */

body.tenet-style #one.tenet-reels {
	display: block;
	height: 600vh;
	padding: 0;
	overflow: visible;
	position: relative;
}

/* Hide any default .inner from the template */
body.tenet-style #one.tenet-reels > .inner {
	display: none;
}

/* Sticky viewport – stays pinned while section scrolls behind */
.reel-viewport {
	position: sticky;
	top: 0;
	height: 100vh;
	width: 100%;
	display: flex;
	overflow: hidden;
	z-index: 1;
}

/* Each column = half the viewport */
.reel-col {
	width: 50%;
	height: 100vh;
	overflow: hidden;
	position: relative;
}

/* The content strip: 6 slides stacked = 600vh tall */
.reel-strip {
	width: 100%;
	height: 600vh; /* 6 × 100vh */
	will-change: transform;
}

/* Each slide = one full viewport height */
.reel-slide {
	display: block;
	width: 100%;
	height: 100vh;
	box-sizing: border-box;
}

/* ---- Left column: image slides ---- */
.reel-slide.reel-img {
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #0c0e18;
	text-decoration: none;
	border: none;
	position: relative;
	/*
	  background-clip: content-box makes the image stop at the
	  content edge. The padding area shows the dark background-color,
	  creating actual dark gaps between consecutive images.
	*/
	background-clip: content-box;
	padding: 8vh 0;
}

/*
  Gradient fades at the image edges — smooth the transition
  from the image into the dark gap areas.
*/
.reel-slide.reel-img::before,
.reel-slide.reel-img::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 15vh;
	pointer-events: none;
	z-index: 1;
}

.reel-slide.reel-img::before {
	top: 8vh; /* start at the content edge (where image begins) */
	background: linear-gradient(to bottom, #0c0e18 0%, transparent 100%);
}

.reel-slide.reel-img::after {
	bottom: 8vh; /* start at the content edge (where image ends) */
	background: linear-gradient(to top, #0c0e18 0%, transparent 100%);
}

.reel-slide.reel-img:hover {
	opacity: 0.95;
}

/* ---- Right column: text slides ---- */
.reel-slide.reel-txt {
	display: flex;
	align-items: center;
	padding: 4em 4em 4em 5em;
	background: #10121e;
	border-left: 1px solid rgba(232, 228, 218, 0.05);
}

.reel-slide.reel-txt .inner {
	max-width: 36em;
	padding: 0;
}

.reel-slide.reel-txt h2 {
	font-size: 1.5em;
	margin-bottom: 0.5em;
}

/* Subtle red accent line before reel slide headings */
.reel-slide.reel-txt h2::before {
	content: '';
	display: block;
	width: 1.5em;
	height: 2px;
	background: rgba(196, 30, 58, 0.6);
	margin-bottom: 0.6em;
}

.reel-slide.reel-txt p {
	font-size: 0.95em;
	color: rgba(232, 228, 218, 0.72);
	margin-bottom: 1.5em;
}

/* Reel text slides: buttons in a 2-column grid, more vertical space */
.reel-slide.reel-txt ul.actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25em 2em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.reel-slide.reel-txt ul.actions li {
	padding: 0;
}

/* ---- Symbol slides ---- */
.reel-slide.reel-symbol {
	display: flex;
	align-items: center;
	/*
	  IMPORTANT: justify-content must be flex-start, NOT center.
	  The inner container is 200% wide (= full viewport width).
	  If we center it, both halves of the symbol become visible.
	  flex-start keeps the inner left-aligned so overflow: hidden
	  clips the right portion in the left column.
	*/
	justify-content: flex-start;
	background: #0c0e18;
	background-image: radial-gradient(ellipse at center, rgba(196, 30, 58, 0.06) 0%, transparent 60%);
	overflow: hidden;
}

/*
  The symbol must appear centred across the FULL viewport, but each
  column only shows its own half.  We make the inner container 200%
  wide (= full viewport width) and centre the icon inside it.
  The left column naturally clips the right 50% (overflow: hidden).
  The right column shifts the inner left by −100% so it clips the left 50%.
*/
.reel-symbol-inner {
	width: 200%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.reel-symbol-left .reel-symbol-inner {
	margin-left: 0;
	clip-path: inset(0 50% 0 0);  /* clip right half → only left half visible */
}

.reel-symbol-right .reel-symbol-inner {
	margin-left: -100%;
	clip-path: inset(0 0 0 50%);  /* clip left half → only right half visible */
}

.reel-symbol-icon {
	font-size: 5rem;
	color: rgba(196, 30, 58, 0.35);
	letter-spacing: 0.1em;
	line-height: 1;
}

/* ---- Responsive: stack columns on narrow screens ---- */
@media (max-width: 980px) {
	body.tenet-style #one.tenet-reels {
		height: auto;
	}

	.reel-viewport {
		position: relative;
		flex-direction: column;
		height: auto;
		overflow: visible;
	}

	.reel-col {
		width: 100%;
		height: auto;
		overflow: visible;
	}

	.reel-strip {
		height: auto;
		transform: none !important;
	}

	.reel-slide {
		height: auto;
		min-height: 60vh;
	}

	.reel-slide.reel-symbol {
		display: none; /* hide symbol on mobile */
	}

	.reel-slide.reel-txt {
		border-left: 0;
		border-top: 1px solid rgba(196, 30, 58, 0.15);
		padding: 3em 2em;
	}
}

/* Features (Skills) - grid, minimal borders */
body.tenet-style .features {
	background: transparent !important;
	border: 1px solid rgba(196, 30, 58, 0.12) !important;
	border-radius: 0;
	position: relative;
}

/* Red-to-blue gradient line at top of features grid */
body.tenet-style .features::before {
	content: '';
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, #c41e3a, rgba(196,30,58,0.3) 45%, rgba(30,58,95,0.3) 55%, #1e3a5f);
}

body.tenet-style .features section {
	border-color: rgba(196, 30, 58, 0.08) !important;
	padding: 2.5em 2.5em 2em 2.5em;
}

body.tenet-style .features section h3 {
	font-family: 'Inter', sans-serif;
	font-size: 0.9em;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 0.5em;
}

body.tenet-style .features section p {
	font-size: 0.9em;
	color: rgba(232, 228, 218, 0.60);
}

/* Contact section */
body.tenet-style #three .inner {
	text-align: center;
}

body.tenet-style ul.contact {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 2rem;
}

body.tenet-style ul.contact .icons {
	display: flex;
	gap: 1.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

body.tenet-style ul.contact .icons a {
	border: none;
	color: rgba(232, 228, 218, 0.55);
	font-size: 1.5rem;
	transition: color 0.2s ease;
}

body.tenet-style ul.contact .icons a:hover {
	color: #c41e3a;
}

/* Footer */
body.tenet-style #footer {
	border-top: 1px solid rgba(196, 30, 58, 0.15);
}

body.tenet-style #footer .menu {
	color: rgba(232, 228, 218, 0.32);
	font-size: 0.75em;
}

body.tenet-style #footer a {
	border-bottom-color: rgba(232, 228, 218, 0.18);
}

/* Front page specific - no gradient on mobile if no image */
@media (max-width: 736px) {
	.tenet-hero {
		background-image: linear-gradient(180deg, rgba(12,14,24,0.88) 0%, #0c0e18 100%),
			url("images/LP.png");
	}
	body.tenet-style .spotlights > section > .content {
		padding: 3em 2em 2em 2em;
	}
}