/* Anniversary page upgrades (light theme) — loads after main.css/responsive.css */

/* --- Intro bolt: power-on glow --- */
.company-intro-shape {
	will-change: opacity, filter;
}
.company-intro-shape.bolt-live {
	animation: boltGlow 3.4s ease-in-out infinite;
}
@keyframes boltGlow {
	0%, 100% { filter: drop-shadow(0 0 6px rgba(252, 207, 2, 0.28)); }
	50% { filter: drop-shadow(0 0 26px rgba(252, 207, 2, 0.6)); }
}

/* --- Final-milestone gold glitter canvas --- */
.tl-celebrate-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 6;
	pointer-events: none;
}
.tl-celebrate-canvas--full {
	position: fixed;
	z-index: 90; /* above content, below the fixed header (99) */
}

/* --- Georgia prefab photos (item 23): stagger without covering people --- */
.company-timeline-item-23 .company-timeline-img-item img:nth-child(2) {
	max-width: clamp(170px, 29vw, 275px);
	margin-left: clamp(24px, 6vw, 64px);
	margin-top: clamp(8px, 1.5vw, 14px);
	z-index: 2;
}

/* --- Next 20 CTA --- */
.next20-cta .cta-content-wrapper {
	max-width: 1100px;
}
.next20-cta .cta-content-wrapper h2 {
	margin-bottom: clamp(20px, 4vw, 36px) !important;
	color: #fff !important;
}
.next20-cta .cta-content-wrapper h2 span {
	color: #fff !important;
}

/* --- Consistent mobile fill --- */
@media (max-width: 575.98px) {
	/* collapse collage overlaps into a clean stacked column */
	.company-timeline-item .company-timeline-img-item {
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		display: block;
	}
	.company-timeline-item .company-timeline-img-item img {
		position: static !important;
		max-width: min(74vw, 340px) !important;
		margin: 0 auto 12px !important;
		padding: 0 !important;
		transform: none !important;
		display: block;
	}
	.company-timeline-item {
		padding-bottom: clamp(20px, 8vw, 40px) !important;
	}
	.company-timeline-wrapper {
		margin: clamp(40px, 10vw, 70px) 0 clamp(20px, 8vw, 40px);
	}
	.company-timeline-content {
		padding: 0 4px;
	}
	.founder-gallery {
		gap: 8px;
	}
	.founder-gallery .item-6,
	.founder-gallery .item-3 {
		height: auto;
	}
	.voices-slider-img {
		max-width: min(74vw, 320px);
		margin: 0 auto;
	}
}

/* --- Finale hold: sticky lock while the celebration plays --- */
/* main carries overflow:hidden sitewide, which makes it a scroll container
   and defeats the finale's position:sticky; clip clips identically without
   the scroll-container side effect. Scoped to this page only. */
body.page-template-anniversary main {
	overflow: clip !important;
}

.company-timeline-section.overflow-hidden {
	/* clip like overflow-hidden but without creating a scroll container,
	   which would break position: sticky on the finale */
	overflow: clip !important;
}
.company-timeline-wrapper::after {
	/* real in-flow block: sticky travel room must live inside the
	   container's content box (padding does not count) */
	content: "";
	display: block;
	height: 90vh;
}
.company-timeline-wrapper .company-timeline-item.position-relative:last-child {
	position: sticky !important;
	top: 170px;
}
@media (max-width: 991.98px) {
	.company-timeline-wrapper::after {
		height: 55vh;
	}
	.company-timeline-wrapper .company-timeline-item.position-relative:last-child {
		top: 130px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.company-timeline-wrapper::after {
		display: none;
	}
	.company-timeline-wrapper .company-timeline-item.position-relative:last-child {
		position: relative !important;
		top: auto;
	}
}

/* --- Year odometer counters: steady digit widths while counting --- */
.company-timeline-title {
	font-variant-numeric: tabular-nums;
}

/* --- Full bolt graphic in the hero: never crop or distort --- */
.company-intro-shape {
	object-fit: contain;
	object-position: top center;
}

/* --- Hero bolt reel window: rest looks like the original crop, the full
       graphic (tip + tail) slides through during the sweep --- */
.company-intro-shape-window {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 2;
	height: 100%;
	transform: translateX(-50%);
	margin-left: clamp(-652px, -45vw, -100px);
	aspect-ratio: 533 / 780;
	max-width: clamp(240px, 42vw, 534px);
}
.company-intro-shape {
	position: absolute;
	width: 115.38%;   /* 615/533 of the window */
	height: 182.95%;  /* 1427/780 of the window */
	top: -12.44%;     /* -97/780 */
	left: -14.07%;    /* -75/533 */
	max-width: none;
	margin-left: 0;
	transform: none;
	object-fit: fill;
}

/* --- Intro headline: line-by-line entrance wrappers --- */
.intro-line {
	display: block;
}
.intro-logo {
	will-change: transform, opacity;
}

/* --- Action-title entrance: crisp scaling, own transform planes --- */
.intro-line {
	will-change: transform, opacity, filter;
	transform-origin: 50% 50%;
}

/* --- Electric zap flicker: small timeline bolts + two big side bolts --- */
@keyframes boltZap {
	0%, 84%, 100% { filter: drop-shadow(0 0 0 rgba(255, 194, 14, 0)) brightness(1); }
	86% { filter: drop-shadow(0 0 6px rgba(255, 194, 14, 0.9)) brightness(1.4); }
	89% { filter: drop-shadow(0 0 2px rgba(255, 194, 14, 0.35)) brightness(1.05); }
	92% { filter: drop-shadow(0 0 9px rgba(255, 194, 14, 1)) brightness(1.55); }
	97% { filter: drop-shadow(0 0 3px rgba(255, 194, 14, 0.3)) brightness(1.1); }
}

/* --- Illustration life --- */
@keyframes animRumble {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	20% { transform: translate(0.6px, -0.9px) rotate(-0.4deg); }
	40% { transform: translate(-0.5px, 0.7px) rotate(0.35deg); }
	60% { transform: translate(0.5px, 0.5px) rotate(-0.3deg); }
	80% { transform: translate(-0.6px, -0.6px) rotate(0.4deg); }
}
@keyframes animRock {
	0%, 100% { transform: rotate(-5deg); }
	50% { transform: rotate(5deg); }
}
@keyframes animBob {
	0%, 100% { transform: translateY(0) rotate(-3deg); }
	50% { transform: translateY(-7px) rotate(3deg); }
}

@media (prefers-reduced-motion: no-preference) {
	.timeline-power-icon svg {
		animation: boltZap 3.6s infinite;
	}
	.company-timeline-item:nth-child(2n) .timeline-power-icon svg {
		animation-delay: 1.3s;
	}
	.company-timeline-item:nth-child(3n) .timeline-power-icon svg {
		animation-delay: 2.2s;
	}
	.timeline-shape-01 {
		animation: boltZap 5.2s infinite;
	}
	.timeline-shape-04 {
		animation: boltZap 5.2s 2.6s infinite;
	}
	.anim-rumble {
		animation: animRumble 0.42s linear infinite;
	}
	.anim-rock {
		animation: animRock 2.4s ease-in-out infinite;
		transform-origin: 50% 85%;
	}
	.anim-bob {
		animation: animBob 1.6s ease-in-out infinite;
		transform-origin: 50% 80%;
	}
}

/* --- Albion note overlay: geometry set inline by JS from the building's box --- */
.company-timeline-img-item .anniv-note-overlay {
	position: absolute;
	max-width: none;
	z-index: 4;
}
/* --- Founder collage, tablet + phone: release desktop grid placements
   (they force broken implicit columns below 992px) and reflow cleanly --- */
@media (max-width: 991.98px) {
	.founder-gallery {
		grid-template-columns: 1fr 1fr;
	}
	.founder-gallery .founder-gallery-item {
		grid-column: auto !important;
		grid-row: auto !important;
		height: clamp(160px, 26vw, 260px);
	}
	.founder-gallery .item-main {
		grid-column: 1 / -1 !important;
		height: clamp(260px, 48vw, 470px);
	}
}
@media (max-width: 575.98px) {
	.founder-gallery {
		grid-template-columns: 1fr;
	}
	.founder-gallery .founder-gallery-item {
		height: clamp(180px, 44vw, 240px);
	}
	.founder-gallery .item-main {
		height: clamp(300px, 90vw, 420px);
	}
}

/* --- Content-refresh fixes (client edits round) --- */

/* Plane pair: head tops sit at 39% of the photo (plane above). 76% starts
   the visible band at ~31%, clearing the crowns with a strip of plane for
   context; 100% (bottom) was clipping the heads. */
.founder-gallery-item img[src*="Container-13"] {
	object-position: 50% 76%;
}
/* Ballgame group shot: the 7 faces span 18%-66% of the photo's height and
   the wide cell shows a ~57% band. 37% centers that window on the faces —
   skips the ballfield above, keeps the front row's chins in frame. Top (0)
   showed field + cut the front row; bottom (100%) beheaded the back row.
   The 108.7% width over-fills the cell so its overflow clips the photo's
   right 8%, hiding a stranger's half-out-of-frame head baked into the
   source file at the right edge. */
.founder-gallery-item img[src*="Container-9"] {
	object-position: 50% 37%;
	width: 108.7% !important;
	max-width: none !important;
}

/* Daisy: tub tucks up against the rendering like the other collages */
.company-timeline-img-item > img[src*="0007342000006"] {
	position: absolute !important;
	top: auto !important;
	left: auto !important;
	right: -6% !important;
	bottom: -8% !important;
	max-width: clamp(120px, 16vw, 190px) !important;
	margin: 0 !important;
	padding: 0 !important;
	z-index: 4;
}

/* Peninsula: seal overlaps the aerial like the other collages */
.company-timeline-img-item:has(> img[src*="hospitality-stock-photo"]) {
	position: relative;
}
.company-timeline-img-item > img[src*="hospitality-project-photo-2026"] {
	position: absolute !important;
	top: 0 !important;
	left: auto !important;
	/* the aerial fills the column, so 100% = its left edge: badge kisses the
	   photo's corner by 48px at every width, never covers it */
	right: calc(100% - 48px) !important;
	bottom: auto !important;
	max-width: clamp(110px, 15vw, 170px) !important;
	max-height: none !important;
	margin: 0 !important;
	z-index: 4;
}
.company-timeline-img-item > img[src*="hospitality-stock-photo"] {
	max-width: clamp(300px, 36vw, 440px) !important;
	margin: clamp(40px, 7vw, 90px) 0 0 auto !important;
}

/* Big Ass Fans: shield sits bottom-right beside the tire/fan sketch */
.company-timeline-img-item > img[src*="big-ass-fans-logo"] {
	position: absolute !important;
	top: auto !important;
	left: auto !important;
	right: -5% !important;
	bottom: 2% !important;
	max-width: clamp(130px, 17vw, 200px) !important;
	margin: 0 !important;
	padding: 0 !important;
	z-index: 4;
}

/* Joe Scott's guitar: scaled to the badge cluster, tucked slightly
   behind his portrait like the other accents */
.company-timeline-img-item > img[src*="Acoustic-Guitar"] {
	max-width: clamp(90px, 13vw, 130px) !important;
	right: clamp(28px, 2.8vw, 42px) !important;
	bottom: -6px !important;
	top: auto !important;
	z-index: 0 !important;
}

/* Big Ass Fans item: pin the composition regardless of item renumbering */
.company-timeline-img-item > img[src*="discount-tire-logo"] {
	position: static !important;
	top: auto !important;
	right: auto !important;
	max-width: clamp(160px, 22vw, 250px) !important;
	max-height: none !important;
	margin: 0 0 14px 0 !important;
	padding: 0 !important;
}
.company-timeline-img-item > img[src*="industrial-fan-photo"] {
	position: static !important;
	top: auto !important;
	right: auto !important;
	max-width: clamp(300px, 42vw, 480px) !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Daisy logo: restore its original modest size */
.company-timeline-img-item > img[src*="daisy-brand-logo"] {
	position: static !important;
	max-width: clamp(120px, 20vw, 190px) !important;
	max-height: none !important;
	margin: 0 auto 16px !important;
	padding: 0 !important;
}

/* Charlotte High-Rise: restore the original composition (crown behind
   top-right, rendering mid, partner logo tucked lower-left) */
.company-timeline-img-item:has(> img[src*="charlotte-project-photo"]) {
	position: relative;
}
.company-timeline-img-item > img[src*="charlotte-crown-overlay"] {
	position: absolute !important;
	top: clamp(24px, 5vw, 50px) !important;
	right: 0 !important;
	left: auto !important;
	bottom: auto !important;
	max-width: clamp(140px, 24vw, 231px) !important;
	max-height: none !important;
	margin: 0 !important;
	z-index: -1;
}
.company-timeline-img-item > img[src*="charlotte-project-photo"] {
	position: static !important;
	max-width: clamp(160px, 28vw, 270px) !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.company-timeline-img-item > img[src*="logo-titan-header"] {
	position: static !important;
	max-width: clamp(140px, 23vw, 226px) !important;
	max-height: none !important;
	margin: clamp(6px, 1.5vw, 11px) 0 0 clamp(12px, 3vw, 29px) !important;
	padding: 0 !important;
}

/* --- Titan Georgia Goes Big in Atlanta: Centennial Yards cluster ---
   Client: the logo + two photos were oddly stacked (stale position-based
   item-17 sizing after the row moves). Rebuilt filename-scoped like the
   other collages: logo above, the two project photos overlapped. */
.company-timeline-item .company-timeline-img-item:has(> img[src*="cy-logo"]) {
	position: relative;
	max-width: min(100%, 500px) !important;
}
.company-timeline-img-item:has(> img[src*="cy-logo"]) > img[src*="cy-logo"] {
	display: block;
	position: static !important;
	width: auto !important;
	max-width: clamp(180px, 26vw, 250px) !important;
	max-height: none !important;
	margin: 0 auto 12px !important;
	padding: 0 !important;
}
.company-timeline-img-item:has(> img[src*="cy-logo"]) > img[src*="hotel-phoenix"] {
	display: block;
	position: relative !important;
	z-index: 1;
	width: 76% !important;
	max-width: 76% !important;
	max-height: none !important;
	margin: 0 0 0 auto !important;
	padding: 0 !important;
}
.company-timeline-img-item:has(> img[src*="cy-logo"]) > img[src*="cosm-building"] {
	display: block;
	position: relative !important;
	z-index: 2;
	width: 78% !important;
	max-width: 78% !important;
	max-height: none !important;
	/* corner-kiss only: both photos stay clearly visible */
	margin: -2% auto 0 0 !important;
	padding: 0 !important;
}

/* ===== Page-wide image scale pass (client, Aug 21 2026) =====
   Reference: the Centennial Yards cluster (photos ~380-420px). Undersized
   photos across the timeline are brought up to that scale; accent graphics
   get proportional nudges. min(..., 100%) keeps small screens safe. */

/* 2006: founding trio */
.company-timeline-img-item > img[src*="corporate-electric-building"] {
	max-width: min(370px, 100%) !important;
}
.company-timeline-img-item > img[src*="ceo-portrait-2006"] {
	max-width: min(300px, 100%) !important;
}

/* 2018 hospitality breakthrough: both photos up to reference */
.company-timeline-img-item > img[src*="hospitality-project-photo-01"] {
	max-width: min(370px, 100%) !important;
}
.company-timeline-img-item > img[src*="hospitality-project-photo-02"] {
	max-width: min(400px, 100%) !important;
}
.company-timeline-img-item > img[src*="centennial-park-graphic"] {
	max-width: min(250px, 100%) !important;
}

/* 2021 data centers */
.company-timeline-img-item > img[src*="project-photo-2021"] {
	max-width: min(390px, 100%) !important;
}

/* Nashville Yards */
.company-timeline-img-item > img[src*="nashville-yards-project-photo"] {
	max-width: min(400px, 100%) !important;
}

/* Team Charlotte Win: hotel pair up from 166px, restaggered so both read */
.company-timeline-img-item > img[src*="beckworth-hotel-exterior"] {
	max-width: min(210px, 48%) !important;
}
.company-timeline-img-item > img[src*="beckworth-hotel-interior"] {
	max-width: min(210px, 48%) !important;
	margin-left: 45% !important;
}
.company-timeline-img-item > img[src*="charlotte-crown-graphic"] {
	max-width: min(190px, 100%) !important;
}

/* New president announcement */
.company-timeline-img-item > img[src*="states-expansion-graphic"] {
	max-width: min(290px, 100%) !important;
}
.company-timeline-img-item > img[src*="Ellipse-6"] {
	max-width: min(290px, 100%) !important;
}

/* 2024 healthcare milestone */
.company-timeline-img-item > img[src*="healthcare-project-photo-2024"] {
	max-width: min(390px, 100%) !important;
}

/* Charlotte high-rise completed */
.company-timeline-img-item > img[src*="charlotte-project-photo"] {
	max-width: min(330px, 100%) !important;
}
.company-timeline-img-item > img[src*="charlotte-crown-overlay"] {
	max-width: min(260px, 100%) !important;
}
.company-timeline-img-item > img[src*="logo-titan-header"] {
	max-width: min(250px, 100%) !important;
}

/* Prefab expansion: restacked like Centennial — barely overlapped, both
   photos read fully */
.company-timeline-img-item > img[src*="prefab-photo-secondary"] {
	position: relative !important;
	z-index: 1;
	display: block;
	width: auto !important;
	max-width: min(330px, 76%) !important;
	margin: 0 auto 0 0 !important;
}
.company-timeline-img-item > img[src*="prefab-photo-primary"] {
	position: relative !important;
	z-index: 2;
	display: block;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	width: auto !important;
	max-width: min(360px, 82%) !important;
	margin: -3% 0 0 auto !important;
}

/* ATL5 data center */
.company-timeline-img-item > img[src*="databank-atl5-photo-1"] {
	max-width: min(400px, 100%) !important;
}

/* Finale office photo */
.company-timeline-img-item > img[src*="office-photo"] {
	max-width: min(370px, 100%) !important;
}