/* =============================================================================
   TEN DIGITALS - GLOBAL HEADER, MEGA MENU, MOBILE DRAWER
   Spec 2: pinned to the top of the viewport at every breakpoint. It starts
   transparent over the hero and becomes semi-opaque on scroll; it never hides.
   The primary CTA stays visually dominant at every state and breakpoint.
   ========================================================================== */

.td-skip-link { position: absolute; }

.td-header {
	inset-inline: 0;
	position: fixed;
	top: 0;
	transition:
		background-color var(--td-t-standard) var(--td-ease),
		border-color var(--td-t-standard) var(--td-ease),
		box-shadow var(--td-t-standard) var(--td-ease);
	z-index: var(--td-z-header);
}

/* Overlay state: page content runs underneath the bar. */
.td-header--overlay { border-bottom: 1px solid transparent; }

/* Solid state, applied by nav.js past the scroll threshold. */
.td-header.is-stuck {
	background: var(--td-header-bg);
	-webkit-backdrop-filter: var(--td-header-blur);
	backdrop-filter: var(--td-header-blur);
	border-bottom: 1px solid var(--td-header-line);
	box-shadow: 0 18px 40px -34px rgba(0, 0, 0, 0.8);
}

/* While a mega panel or the drawer is open the bar is always solid. */
.td-header.is-open {
	background: var(--td-header-bg);
	-webkit-backdrop-filter: var(--td-header-blur);
	backdrop-filter: var(--td-header-blur);
	border-bottom-color: var(--td-header-line);
}

.td-header__inner {
	align-items: center;
	display: flex;
	gap: var(--td-s-5);
	height: var(--td-header-h);
	justify-content: space-between;
}

/* -- Brand ------------------------------------------------------------------ */

.td-brand {
	align-items: center;
	display: inline-flex;
	flex: none;
	gap: 12px;
	text-decoration: none;
}

.td-brand__logo {
	height: clamp(30px, 3vw, 38px);
	transition: transform var(--td-t-standard) var(--td-ease-spring);
	width: auto;
}

.td-brand:hover .td-brand__logo { transform: scale(1.03); }

/* Only one lockup is ever visible; the other is display:none, not just faded,
   so assistive tech and print never see a duplicate. */
.td-brand__logo--dark  { display: none; }
[data-theme="dark"] .td-brand__logo--dark,
.td-tone-dark .td-brand__logo--dark { display: block; }
[data-theme="dark"] .td-brand__logo--light,
.td-tone-dark .td-brand__logo--light { display: none; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .td-brand__logo--dark  { display: block; }
	:root:not([data-theme="light"]) .td-brand__logo--light { display: none; }
}

/* Over a dark hero the header is transparent, so force the dark-field lockup. */
.td-header--on-dark:not(.is-stuck):not(.is-open) .td-brand__logo--dark { display: block; }
.td-header--on-dark:not(.is-stuck):not(.is-open) .td-brand__logo--light { display: none; }
.td-header--on-dark:not(.is-stuck):not(.is-open) {
	--td-ink: #F6F3EF;
	--td-ink-2: #C7C1B8;
	--td-ink-3: #948D83;
	--td-line: rgba(255, 255, 255, 0.12);
	--td-well-bg: rgba(255, 255, 255, 0.05);
	--td-accent: #FF8A2B;
	color: #F6F3EF;
}

/* -- Primary navigation ----------------------------------------------------- */

.td-nav { display: none; }

@media (min-width: 1080px) {
	.td-nav { align-items: center; display: flex; gap: 2px; }
}

.td-nav__item { position: relative; }

.td-nav__link {
	align-items: center;
	border-radius: var(--td-r-btn);
	color: var(--td-ink-2);
	display: inline-flex;
	font-size: var(--td-fs-xs);
	font-weight: 500;
	gap: 6px;
	letter-spacing: 0.02em;
	padding: 10px 14px;
	position: relative;
	text-decoration: none;
	transition: color var(--td-t-micro) var(--td-ease);
	white-space: nowrap;
}

.td-nav__link::after {
	background: var(--td-grad-brand);
	border-radius: 2px;
	bottom: 2px;
	content: "";
	height: 2px;
	left: 14px;
	position: absolute;
	right: 14px;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--td-t-standard) var(--td-ease-out);
}

.td-nav__link:hover,
.td-nav__link:focus-visible,
.td-nav__item.is-active > .td-nav__link,
.td-nav__link[aria-expanded="true"] { color: var(--td-ink); }

.td-nav__link:hover::after,
.td-nav__link:focus-visible::after,
.td-nav__item.is-active > .td-nav__link::after,
.td-nav__link[aria-expanded="true"]::after { transform: scaleX(1); }

.td-nav__caret {
	height: 8px;
	opacity: 0.6;
	transition: transform var(--td-t-standard) var(--td-ease-spring);
	width: 8px;
}

.td-nav__link[aria-expanded="true"] .td-nav__caret { transform: rotate(180deg); }

/* -- Header actions --------------------------------------------------------- */

.td-header__actions {
	align-items: center;
	display: flex;
	flex: none;
	gap: var(--td-s-3);
}

@media (max-width: 1079.98px) {
	.td-header__actions .td-btn--ghost { display: none; }
}

@media (max-width: 639.98px) {
	.td-header__actions .td-btn--primary { display: none; }
}

/* -- Mega menu -------------------------------------------------------------- */

.td-mega {
	background: var(--td-overlay);
	-webkit-backdrop-filter: blur(22px) saturate(160%);
	backdrop-filter: blur(22px) saturate(160%);
	border-bottom: 1px solid var(--td-line);
	box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.9);
	inset-inline: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 100%;
	transform: translate3d(0, -10px, 0);
	transition:
		opacity var(--td-t-standard) var(--td-ease),
		transform var(--td-t-standard) var(--td-ease-out),
		visibility 0s linear var(--td-t-standard);
	visibility: hidden;
	z-index: var(--td-z-mega);
}

.td-mega.is-open {
	opacity: 1;
	pointer-events: auto;
	transform: none;
	transition-delay: 0s;
	visibility: visible;
}

.td-mega__inner {
	display: grid;
	gap: var(--td-s-7);
	grid-template-columns: minmax(0, 1fr) 300px;
	padding-block: clamp(36px, 3.4vw, 56px);
}

/* Each entry is a page, so each entry is given the weight of one: an icon, a
   name and the sentence that says what it is. The old panel was four columns of
   thirty-four one-word links, which read as a sitemap and pointed at fragments
   that did not exist. */

.td-mega__main {
	display: grid;
	align-content: start;
	gap: var(--td-s-5);
}

.td-mega__lede {
	color: var(--td-ink-4);
	font-size: var(--td-fs-eyebrow);
	letter-spacing: var(--td-tracking-eyebrow);
	margin: 0;
	text-transform: uppercase;
}

.td-mega__grid {
	display: grid;
	gap: var(--td-s-3);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.td-mega__item {
	align-items: start;
	border: 1px solid transparent;
	border-radius: var(--td-r-card);
	color: inherit;
	display: grid;
	gap: var(--td-s-3);
	grid-template-columns: auto minmax(0, 1fr) auto;
	overflow: hidden;
	padding: var(--td-s-4);
	position: relative;
	text-decoration: none;
	transition:
		background-color var(--td-t-micro) var(--td-ease),
		border-color var(--td-t-micro) var(--td-ease),
		transform var(--td-t-micro) var(--td-ease-out);
}

/* The panel opens as one thing, then the entries arrive behind it. The delay is
   set per item in the template so the stagger survives a CMS reorder. */
.td-mega.is-open .td-mega__item {
	animation: td-mega-in 420ms var(--td-ease-out) both;
	animation-delay: var(--td-mega-delay, 0ms);
}

@keyframes td-mega-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

.td-mega__item:hover,
.td-mega__item:focus-visible {
	background: var(--td-card-bg-2);
	border-color: var(--td-line);
	transform: translateY(-2px);
}

.td-mega__item:focus-visible {
	outline: 2px solid var(--td-accent);
	outline-offset: 2px;
}

.td-mega__icon {
	align-items: center;
	background: color-mix(in oklab, var(--td-accent) 12%, transparent);
	border-radius: var(--td-r-btn);
	color: var(--td-accent);
	display: inline-flex;
	height: 34px;
	justify-content: center;
	transition: background-color var(--td-t-micro) var(--td-ease);
	width: 34px;
}

.td-mega__item:hover .td-mega__icon {
	background: color-mix(in oklab, var(--td-accent) 20%, transparent);
}

.td-mega__text {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.td-mega__title {
	font-family: var(--td-font-display);
	font-size: var(--td-fs-sm);
	font-weight: 600;
	letter-spacing: var(--td-tracking-head);
}

.td-mega__desc {
	color: var(--td-ink-3);
	font-size: var(--td-fs-xs);
	line-height: 1.5;
}

.td-mega__go {
	color: var(--td-ink-4);
	opacity: 0;
	transition:
		opacity var(--td-t-micro) var(--td-ease),
		transform var(--td-t-micro) var(--td-ease-out);
	transform: translate(-4px, 4px);
}

.td-mega__item:hover .td-mega__go,
.td-mega__item:focus-visible .td-mega__go {
	color: var(--td-accent);
	opacity: 1;
	transform: none;
}

/* The same hairline the homepage cards wipe in on hover. */
.td-mega__rule {
	background: var(--td-grad-brand);
	bottom: 0;
	height: 2px;
	left: 0;
	position: absolute;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--td-t-standard) var(--td-ease-out);
	width: 100%;
}

.td-mega__item:hover .td-mega__rule,
.td-mega__item:focus-visible .td-mega__rule { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
	.td-mega.is-open .td-mega__item { animation: none; }
	.td-mega__item:hover { transform: none; }
}

/* Promo rail on the right of the panel. */
.td-mega__aside {
	border-left: 1px solid var(--td-line);
	display: flex;
	flex-direction: column;
	gap: var(--td-s-4);
	padding-left: var(--td-s-6);
}

.td-mega__promo {
	border-radius: var(--td-r-card);
	display: block;
	padding: var(--td-s-5);
	text-decoration: none;
}

.td-mega__promo-title {
	font-family: var(--td-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: var(--td-tracking-head);
	margin-bottom: 6px;
}

.td-mega__promo-copy { color: var(--td-ink-3); font-size: var(--td-fs-xs); line-height: 1.55; }

@media (max-width: 1279.98px) {
	.td-mega__inner { grid-template-columns: minmax(0, 1fr); }
	.td-mega__aside { border-left: 0; border-top: 1px solid var(--td-line); padding-left: 0; padding-top: var(--td-s-5); flex-direction: row; }
	.td-mega__promo { flex: 1; }
}

/* Scrim behind an open panel. It must sit *below* the header, or it would
   cover the bar and the panel that live in the header's stacking context. */
.td-mega-scrim {
	background: var(--td-scrim);
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	transition: opacity var(--td-t-standard) var(--td-ease);
	z-index: calc(var(--td-z-header) - 1);
}

.td-mega-scrim.is-open { opacity: 1; pointer-events: auto; }

/* -----------------------------------------------------------------------------
   MOBILE DRAWER - full-screen menu, spec 34
   -------------------------------------------------------------------------- */

.td-burger {
	align-items: center;
	border: 1px solid var(--td-line);
	border-radius: var(--td-r-btn);
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	flex: none;
	height: 44px;
	justify-content: center;
	text-decoration: none;
	transition: border-color var(--td-t-micro) var(--td-ease);
	width: 44px;
}

.td-burger:hover { border-color: var(--td-hairline-accent); color: inherit; }

@media (min-width: 1080px) { .td-burger { display: none; } }

.td-burger__box { display: block; height: 12px; position: relative; width: 20px; }

.td-burger__bar {
	background: currentColor;
	border-radius: 2px;
	height: 1.5px;
	left: 0;
	position: absolute;
	transition: transform var(--td-t-standard) var(--td-ease-spring),
	            opacity var(--td-t-micro) var(--td-ease);
	width: 100%;
}

.td-burger__bar:nth-child(1) { top: 0; }
.td-burger__bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
.td-burger__bar:nth-child(3) { bottom: 0; }

.td-burger[aria-expanded="true"] .td-burger__bar:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.td-burger[aria-expanded="true"] .td-burger__bar:nth-child(2) { opacity: 0; }
.td-burger[aria-expanded="true"] .td-burger__bar:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

.td-drawer {
	background: var(--td-bg);
	display: flex;
	flex-direction: column;
	inset: 0;
	opacity: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-top: var(--td-header-h);
	position: fixed;
	transform: translate3d(0, -2%, 0);
	transition:
		opacity var(--td-t-standard) var(--td-ease),
		transform var(--td-t-standard) var(--td-ease-out),
		visibility 0s linear var(--td-t-standard);
	visibility: hidden;
	z-index: calc(var(--td-z-header) - 1);
}

.td-drawer.is-open {
	opacity: 1;
	transform: none;
	transition-delay: 0s;
	visibility: visible;
}

.td-drawer__inner { padding-block: var(--td-s-6) var(--td-s-9); }

.td-drawer__group + .td-drawer__group { border-top: 1px solid var(--td-line); }

.td-drawer__link {
	align-items: center;
	display: flex;
	font-family: var(--td-font-display);
	font-size: 1.375rem;
	font-weight: 600;
	gap: var(--td-s-3);
	justify-content: space-between;
	letter-spacing: var(--td-tracking-head);
	padding: 18px 0;
	text-decoration: none;
	width: 100%;
}

.td-drawer__sub { display: grid; gap: 2px; padding: 0 0 var(--td-s-5) var(--td-s-4); }

.td-drawer__sub-link {
	color: var(--td-ink-2);
	font-size: var(--td-fs-sm);
	padding: 8px 0;
	text-decoration: none;
}

.td-drawer__sub-link:hover { color: var(--td-accent); }

.td-drawer__cta {
	display: grid;
	gap: var(--td-s-3);
	margin-top: var(--td-s-7);
}

.td-drawer__meta {
	border-top: 1px solid var(--td-line);
	color: var(--td-ink-3);
	display: flex;
	flex-wrap: wrap;
	gap: var(--td-s-4);
	font-size: var(--td-fs-xs);
	margin-top: var(--td-s-7);
	padding-top: var(--td-s-5);
}

/* Lock the page behind the drawer without losing scroll position. */
html.td-scroll-locked { overflow: hidden; }
html.td-scroll-locked body { overflow: hidden; }