/* SS006_TIMELINE_START: scoped to #ss006-timeline only, no bare tag/body/html resets */

#ss006-timeline {
	position: relative;
	background: #fbfaf8;
	color: #171615;
	padding: 48px 0 0;
	overflow: hidden;
}

#ss006-timeline .ss006-timeline__skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 20;
	background: #fbfaf8;
	color: #171615;
	padding: 8px 14px;
	border-radius: 4px;
	font-family: var(--ss6-inter, "Inter Variable", sans-serif);
	font-size: 14px;
}

#ss006-timeline .ss006-timeline__skip:focus {
	left: 16px;
	top: 16px;
	outline: 2px solid #171615;
	outline-offset: 2px;
}

/*
 * ACTUAL-QA-1.md item 4: --ss006-unit is written by timeline.js as
 * root.clientWidth/1440 (desktop) or root.clientWidth/390 (phone), so
 * every Figma local px value below can scale coherently with calc()
 * instead of independent vw guesses. Default 1 covers pre-JS/no-JS.
 */
#ss006-timeline {
	--ss006-unit: 1;
	min-height: 100svh;
	box-sizing: border-box;
}

#ss006-timeline .ss006-timeline__stage {
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	padding: 0 20px;
}

#ss006-timeline .ss006-timeline__text {
	position: relative;
	z-index: 2;
	max-width: 558.125px;
}

#ss006-timeline .ss006-timeline__eyebrow {
	font-family: var(--ss6-inter, "Inter Variable", sans-serif);
	font-weight: 600;
	font-size: calc(14.6875px * var(--ss006-unit));
	line-height: calc(16.156px * var(--ss006-unit));
	letter-spacing: 0.04em;
	margin: 0 0 calc(37px * var(--ss006-unit));
}

#ss006-timeline .ss006-timeline__year-display {
	font-family: var(--ss6-mont, "Montserrat Variable", sans-serif);
	font-weight: 700;
	font-size: calc(260px * var(--ss006-unit));
	line-height: calc(286px * var(--ss006-unit));
	margin: 0 0 calc(60px * var(--ss006-unit));
}

#ss006-timeline .ss006-timeline__event-title {
	font-family: var(--ss6-mont, "Montserrat Variable", sans-serif);
	font-weight: 600;
	font-size: max(16px, calc(35.25px * var(--ss006-unit)));
	line-height: calc(38.775px * var(--ss006-unit));
	margin: 0 0 calc(12px * var(--ss006-unit));
}

#ss006-timeline .ss006-timeline__event-body {
	font-family: var(--ss6-inter, "Inter Variable", sans-serif);
	font-weight: 400;
	font-size: max(15px, calc(23.5px * var(--ss006-unit)));
	line-height: calc(25.85px * var(--ss006-unit));
	margin: 0;
	max-width: 558.125px;
}

/*
 * CORRECTION-1 (CODE-REVIEW-1.md item 4): arc-region height is now an
 * owned viewport-fit value written inline by timeline.js (measureStage);
 * this is only the pre-JS/no-JS fallback height. overflow:hidden here is
 * what makes the camera-window clipping in item 4 actually work.
 */
#ss006-timeline .ss006-timeline__arc-region {
	position: relative;
	width: 100%;
	height: 448px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

/*
 * CORRECTION-1 (CODE-REVIEW-1.md item 4): no width:100%/height:100%
 * stretching of the SVG -- native 561.0625x820 / 350x448 root dimensions
 * are preserved via the <img> width/height attributes, and only the
 * wrapper's transform (translate + scale) set by timeline.js changes the
 * on-screen size/position, never the SVG's own intrinsic dimensions.
 */
#ss006-timeline .ss006-timeline__arc-frame {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}

#ss006-timeline .ss006-timeline__arc-frame--mobile {
	display: block;
}

#ss006-timeline .ss006-timeline__arc-svg {
	display: block;
}

#ss006-timeline .ss006-timeline__active-overlay {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	pointer-events: none;
	z-index: 3;
}

#ss006-timeline .ss006-timeline__markers {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	z-index: 2;
}

#ss006-timeline .ss006-timeline__nav-item {
	display: contents; /* li is purely structural; the button inside positions itself */
}

/*
 * Each marker is now the real interactive year control (CODE-REVIEW-1.md
 * item 5): a plain <button> reset, positioned by the same transform the
 * old decorative <li> used, with a >=40px hit area centered on the
 * visible dot so the touch target is larger than the artwork without
 * shifting the artwork itself.
 */
#ss006-timeline .ss006-timeline__marker {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 40px;
	min-height: 40px;
	padding: 0;
	margin: -17px 0 0 -17px; /* center the >=40px hit area on the dot */
	background: transparent;
	border: 0;
	cursor: pointer;
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

#ss006-timeline .ss006-timeline__marker-dot {
	display: block;
	flex: 0 0 auto;
	margin-left: 17px; /* offset back so the dot itself still sits at the Figma-exact point */
}

#ss006-timeline .ss006-timeline__marker-label {
	font-family: var(--ss6-inter, "Inter Variable", sans-serif);
	font-weight: 400;
	font-size: 13px;
	color: #5e5a55;
	white-space: nowrap;
	margin-left: 4px;
}

#ss006-timeline .ss006-timeline__marker.is-active .ss006-timeline__marker-label {
	font-weight: 600;
	color: #171615;
}

#ss006-timeline .ss006-timeline__marker:focus-visible {
	outline: 2px solid #171615;
	outline-offset: 2px;
}

/* Baseline/no-JS/reduced-motion readable fallback list of all 11 events */
#ss006-timeline .ss006-timeline__fallback-list {
	position: relative;
	z-index: 2;
	max-width: 1440px;
	margin: 32px auto 0;
	padding: 0 24px 48px;
	list-style: none;
	display: none;
}

#ss006-timeline .ss006-timeline__fallback-item {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 8px 24px;
	padding: 16px 0;
	border-top: 1px solid rgba(23, 22, 21, 0.1);
}

#ss006-timeline .ss006-timeline__fallback-year {
	font-family: var(--ss6-mont, "Montserrat Variable", sans-serif);
	font-weight: 700;
	font-size: 20px;
}

#ss006-timeline .ss006-timeline__fallback-title {
	font-family: var(--ss6-mont, "Montserrat Variable", sans-serif);
	font-weight: 600;
	font-size: 16px;
	display: block;
}

#ss006-timeline .ss006-timeline__fallback-body {
	font-family: var(--ss6-inter, "Inter Variable", sans-serif);
	font-size: 14px;
	color: #5e5a55;
	display: block;
	grid-column: 2;
}

/* Before JS finishes init (data-motion-mode="init") and whenever motion is
   disabled (data-motion-mode="static"): show the full readable list, hide
   the single-arc animated view instead of relying on opacity-0 timing. */
#ss006-timeline[data-motion-mode="init"] .ss006-timeline__fallback-list,
#ss006-timeline[data-motion-mode="static"] .ss006-timeline__fallback-list {
	display: block;
}

/* Year navigation now lives inside .ss006-timeline__arc-region itself
   (CODE-REVIEW-1.md item 5), so hiding this one element also hides the
   nav -- there is no separate .ss006-timeline__nav element any more. */
#ss006-timeline[data-motion-mode="static"] .ss006-timeline__arc-region {
	display: none;
}

#ss006-timeline .ss6-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * ACTUAL-QA-1.md item 4: actual Figma desktop local anchors -- left
 * gutter 66.25 (was wrongly 24 from the shared 20px mobile gutter),
 * content columns 690 + gap 41.4375 + 561.0625, measured from left 66.25.
 * Also covers short-landscape tablet/phone (844x390 etc) per item 4's
 * "wide-short needs 2-column layout even if width<1024".
 */
@media (min-width: 1024px), (min-width: 600px) and (max-height: 500px) {
	#ss006-timeline .ss006-timeline__stage {
		grid-template-columns: 690px 41.4375px 561.0625px;
		align-items: start;
		padding: 0 66.25px;
	}

	#ss006-timeline .ss006-timeline__text {
		grid-column: 1;
	}

	#ss006-timeline .ss006-timeline__arc-region {
		grid-column: 3;
		height: 820px;
	}

	#ss006-timeline .ss006-timeline__arc-frame--mobile {
		display: none;
	}

	#ss006-timeline .ss006-timeline__arc-frame--desktop {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	#ss006-timeline[data-motion-mode] .ss006-timeline__fallback-list {
		display: block;
	}

	#ss006-timeline[data-motion-mode] .ss006-timeline__arc-region {
		display: none;
	}
}


/* Proposed integration finish only: coherent viewport geometry and type. */
#ss006-timeline[data-motion-mode="init"] .ss006-timeline__arc-region { display: none; }
@media (max-width: 1023px) {
 #ss006-timeline { padding-top: calc(34px * var(--ss006-unit)); }
 #ss006-timeline .ss006-timeline__stage { grid-template-columns: minmax(0, 1fr); row-gap: 24px; padding: 0 20px; }
 #ss006-timeline .ss006-timeline__text { grid-column: auto; max-width: none; }
 #ss006-timeline .ss006-timeline__arc-region { grid-column: auto; margin-top: 0; }
 #ss006-timeline .ss006-timeline__eyebrow { font-size: max(11px, calc(12px * var(--ss006-unit))); line-height: 1.1; margin-bottom: calc(24px * var(--ss006-unit)); }
 #ss006-timeline .ss006-timeline__year-display { font-size: calc(120px * var(--ss006-unit)); line-height: calc(132px * var(--ss006-unit)); margin-bottom: calc(27px * var(--ss006-unit)); }
 #ss006-timeline .ss006-timeline__event-title { font-size: max(20px, calc(23.077px * var(--ss006-unit))); line-height: 1.1; margin-bottom: calc(24px * var(--ss006-unit)); }
 #ss006-timeline .ss006-timeline__event-body { font-size: max(15px, calc(15.385px * var(--ss006-unit))); line-height: 1.2; }
 #ss006-timeline .ss006-timeline__arc-frame--desktop { display: none; }
 #ss006-timeline .ss006-timeline__arc-frame--mobile { display: block; }
}
@media (min-width: 1024px), (min-width: 600px) and (max-height: 500px) {
 #ss006-timeline { padding-top: calc(48px * var(--ss006-unit)); }
 #ss006-timeline .ss006-timeline__stage { grid-template-columns: calc(690px * var(--ss006-unit)) calc(41.4375px * var(--ss006-unit)) calc(561.0625px * var(--ss006-unit)); row-gap: 0; padding: 0 calc(66.25px * var(--ss006-unit)); }
 #ss006-timeline .ss006-timeline__text { grid-column: 1; max-width: calc(558.125px * var(--ss006-unit)); }
 #ss006-timeline .ss006-timeline__arc-region { grid-column: 3; margin-top: calc(-8px * var(--ss006-unit)); }
 #ss006-timeline .ss006-timeline__eyebrow { font-size: calc(14.6875px * var(--ss006-unit)); line-height: calc(16.156px * var(--ss006-unit)); margin-bottom: calc(37px * var(--ss006-unit)); }
 #ss006-timeline .ss006-timeline__year-display { font-size: calc(260px * var(--ss006-unit)); line-height: calc(286px * var(--ss006-unit)); margin-bottom: calc(60px * var(--ss006-unit)); }
 #ss006-timeline .ss006-timeline__event-title { font-size: max(20px, calc(35.25px * var(--ss006-unit))); line-height: 1.1; margin-bottom: calc(69px * var(--ss006-unit)); }
 #ss006-timeline .ss006-timeline__event-body { font-size: max(15px, calc(23.5px * var(--ss006-unit))); line-height: max(18px, calc(25.85px * var(--ss006-unit))); }
 #ss006-timeline .ss006-timeline__marker-label { font-size: max(13px, calc(17.625px * var(--ss006-unit))); }
 #ss006-timeline .ss006-timeline__arc-frame--desktop { display: block; }
 #ss006-timeline .ss006-timeline__arc-frame--mobile { display: none; }
}
@media (min-width: 600px) and (max-height: 500px) {
 #ss006-timeline { padding-top: 20px; }
 #ss006-timeline .ss006-timeline__eyebrow { font-size: 12px; line-height: 1.1; margin-bottom: 8px; }
 #ss006-timeline .ss006-timeline__year-display { font-size: clamp(80px, 12vw, 120px); line-height: 1; margin-bottom: 12px; }
 #ss006-timeline .ss006-timeline__event-title { font-size: 22px; line-height: 1.1; margin-bottom: 10px; }
 #ss006-timeline .ss006-timeline__event-body { font-size: 15px; line-height: 1.2; }
}
@media (max-width: 360px), (min-width: 600px) and (max-height: 500px) {
 #ss006-timeline .ss006-timeline__marker { min-height: 28px; margin-top: -11px; }
}

/* Compact mobile scene: keep the full scroll travel, size the scene to its
   real text + scaled arc instead of leaving a viewport-sized empty tail. */
@media (max-width: 767px) {
 #ss006-timeline[data-motion-mode="animated"] { min-height: 0; padding-bottom: 24px; }
}

/* SS006_TIMELINE_END */

/* SS006_TIMELINE_PHONE_START: CC Horizon Dial, Figma 2214:1284 (S1 390x554, N1 320x516, L1 667x375).
   Inert unless timeline-phone.js has mounted (root[data-ss006-layout=phone]) AND viewport <= 767px. */
@media (max-width: 767px) {
 #ss006-timeline[data-ss006-layout=phone] { min-height: 0; padding: 32px 0 0; }
 #ss006-timeline[data-ss006-layout=phone] .ss006-timeline__stage,
 #ss006-timeline[data-ss006-layout=phone] .ss006-timeline__fallback-list { display: none; }

 #ss006-timeline[data-ss006-layout=phone] .ss006-tp { position: relative; display: block; color: #171615; }
 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__text { position: relative; padding: 0 20px; }
 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__eyebrow { margin: 0 0 24px; padding: 0; font: 600 12px/16px var(--ss6-inter, 'Inter Variable', sans-serif); letter-spacing: 0; text-transform: none; color: #171615; }
 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__copy { position: relative; }
 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__year { margin: 0 0 12px; font: 700 96px/100px var(--ss6-mont, 'Montserrat Variable', sans-serif); letter-spacing: 0; color: #171615; }
 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__title { margin: 0 0 12px; font: 600 22px/28px var(--ss6-mont, 'Montserrat Variable', sans-serif); letter-spacing: 0; color: #171615; overflow-wrap: break-word; }
 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__body { margin: 0; font: 400 16px/24px var(--ss6-inter, 'Inter Variable', sans-serif); letter-spacing: 0; color: #171615; overflow-wrap: break-word; }

 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__dial { position: relative; height: 230px; margin-top: 24px; overflow: hidden; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__dial.is-dragging { cursor: grabbing; }
 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__wheel { position: absolute; z-index: 0; border-radius: 50%; background: #efede9; box-shadow: inset 0 0 0 1px rgba(140, 135, 127, 0.6); pointer-events: none; will-change: transform; }
 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__tick { position: absolute; width: 1px; height: 6px; background: #8c877f; }
 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__dot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #5e5a55; }
 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__dot.is-active { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: #f1892e; box-shadow: 0 0 0 2px #fbfaf8; }
 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__pointer { position: absolute; z-index: 2; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #f1892e; pointer-events: none; }

 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__label { position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 56px; height: 44px; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; box-shadow: none; -webkit-appearance: none; appearance: none; font: 400 14px/18px var(--ss6-inter, 'Inter Variable', sans-serif); letter-spacing: 0; text-transform: none; color: #5e5a55; white-space: nowrap; cursor: pointer; pointer-events: auto; touch-action: pan-y; will-change: transform, opacity; }
 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__label.is-active { font: 700 17px/21px var(--ss6-mont, 'Montserrat Variable', sans-serif); color: #171615; }
 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__label.is-hidden { pointer-events: none; }
 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__label:focus { outline: none; }
 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__label:focus-visible { outline: 2px solid #171615; outline-offset: -2px; }

 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__controls { position: absolute; z-index: 4; top: 150px; left: 20px; right: 20px; height: 48px; display: flex; align-items: center; justify-content: space-between; touch-action: manipulation; }
 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__step { display: flex; align-items: center; justify-content: center; flex: 0 0 48px; width: 48px; height: 48px; min-width: 0; margin: 0; padding: 0; border: 1px solid #e2dfda; border-radius: 24px; background: #ffffff; box-shadow: none; -webkit-appearance: none; appearance: none; color: #171615; cursor: pointer; }
 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__step svg { display: block; width: 24px; height: 24px; }
 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__step[aria-disabled=true] { opacity: 0.4; cursor: default; }
 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__step:focus { outline: none; }
 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__step:focus-visible { outline: 2px solid #171615; outline-offset: 1px; }
 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__progress { display: flex; flex-direction: column; align-items: center; gap: 6px; }
 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__count { font: 600 13px/16px var(--ss6-inter, 'Inter Variable', sans-serif); letter-spacing: 0; color: #171615; font-variant-numeric: tabular-nums; }
 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__segments { display: flex; align-items: center; gap: 4px; }
 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__seg { display: block; width: 6px; height: 3px; border-radius: 1.5px; background: #8c877f; }
 #ss006-timeline[data-ss006-layout=phone] .ss006-tp__seg.is-active { width: 18px; background: #171615; }

 /* N1: <= 359px wide (JS sets data-ss006-tp-layout=narrow) */
 #ss006-timeline[data-ss006-tp-layout=narrow] .ss006-tp__text { padding: 0 16px; }
 #ss006-timeline[data-ss006-tp-layout=narrow] .ss006-tp__year { font-size: 80px; line-height: 84px; }
 #ss006-timeline[data-ss006-tp-layout=narrow] .ss006-tp__title { font-size: 20px; line-height: 26px; }
 #ss006-timeline[data-ss006-tp-layout=narrow] .ss006-tp__body { font-size: 15px; line-height: 22px; }
 #ss006-timeline[data-ss006-tp-layout=narrow] .ss006-tp__dial { height: 216px; }
 #ss006-timeline[data-ss006-tp-layout=narrow] .ss006-tp__controls { top: 140px; left: 16px; right: 16px; }

 /* L1: phone landscape <= 767 x <= 500 (JS sets data-ss006-tp-layout=landscape) */
 #ss006-timeline[data-ss006-tp-layout=landscape] { padding-top: 0; }
 #ss006-timeline[data-ss006-tp-layout=landscape] .ss006-tp { display: flex; align-items: flex-start; padding-left: 24px; }
 #ss006-timeline[data-ss006-tp-layout=landscape] .ss006-tp__text { flex: 0 0 300px; width: 300px; padding: 24px 0 0; }
 #ss006-timeline[data-ss006-tp-layout=landscape] .ss006-tp__eyebrow { margin-bottom: 12px; }
 #ss006-timeline[data-ss006-tp-layout=landscape] .ss006-tp__year { font-size: 64px; line-height: 68px; }
 #ss006-timeline[data-ss006-tp-layout=landscape] .ss006-tp__title { font-size: 20px; line-height: 26px; }
 #ss006-timeline[data-ss006-tp-layout=landscape] .ss006-tp__body { font-size: 15px; line-height: 22px; }
 #ss006-timeline[data-ss006-tp-layout=landscape] .ss006-tp__dial { flex: 1 1 auto; min-width: 0; height: 335px; margin: 40px 0 0 16px; }
 #ss006-timeline[data-ss006-tp-layout=landscape] .ss006-tp__wheel { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(140, 135, 127, 0.9); }
 #ss006-timeline[data-ss006-tp-layout=landscape] .ss006-tp__controls { top: 196px; left: 16px; right: 16px; }
}
/* SS006_TIMELINE_PHONE_END */