/**
 * Sustainability page (/about/sustainability/) — 17-SDG fly-in hero +
 * per-SDG bento "invisible table" sections.
 *
 * Scoped to body.tory-seo-sustainability-page so it never bleeds into
 * landing/campaign/about pages. Loads ON TOP of landing-refresh.css, whose
 * shared .tory-seo-btn-* rules we reuse for the CTA (tokens redefined below).
 */

/* ── 1. Tokens (re-define --tsl-* so shared buttons resolve) ───────────── */
body.tory-seo-sustainability-page {
	--tsl-teal: #00737d;
	--tsl-teal-2: #00B9BC;
	--tsl-ink: #1a1a1a;
	--tsl-slate: #2e3a52;
	--tsl-line: #e5e7eb;

	--ts-sus-bg: #ffffff;
	--ts-sus-bg-soft: #f6f8f9;
	--ts-sus-ink: #1a1a1a;
	--ts-sus-slate: #2e3a52;
	--ts-sus-muted: #5b6b80;
	--ts-sus-line: #e5e7eb;
	--ts-sus-radius: 18px;

	--ts-sus-font-display: "Geist", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ts-sus-font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

	background: var(--ts-sus-bg);
	color: var(--ts-sus-ink);
	font-family: var(--ts-sus-font-body);
}

/* Theme layout reset (mirrors landing-refresh body-class reset). Kill the
   odd top whitespace above the breadcrumb (fake-post entry header etc.). */
body.tory-seo-sustainability-page #primary,
body.tory-seo-sustainability-page .site-main,
body.tory-seo-sustainability-page .content-area,
body.tory-seo-sustainability-page .entry-content,
body.tory-seo-sustainability-page article,
body.tory-seo-sustainability-page .entry-header {
	padding: 0 !important;
	margin: 0 !important;
}
body.tory-seo-sustainability-page .entry-header,
body.tory-seo-sustainability-page .entry-title,
body.tory-seo-sustainability-page .page-header,
body.tory-seo-sustainability-page .qodef-page-header {
	display: none !important;
}

.ts-sus * { box-sizing: border-box; }
.ts-sus-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	width: 100%;
}
@media (max-width: 640px) { .ts-sus-container { padding: 0 18px; } }

.ts-sus-h1, .ts-sus-sdg-h, .ts-sus-intro-h, .ts-sus-commit-h, .ts-sus-cta-h, .ts-sus-faq-h {
	font-family: var(--ts-sus-font-display);
	color: var(--ts-sus-slate);
	letter-spacing: -0.01em;
	line-height: 1.12;
	margin: 0;
}

/* ── 2. Breadcrumb ─────────────────────────────────────────────────────── */
.ts-sus-breadcrumb {
	max-width: 1200px;
	margin: 0 auto;
	padding: 14px 24px 0;
	font-size: 13px;
	color: var(--ts-sus-muted);
}
.ts-sus-breadcrumb ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	margin: 0;
	padding: 0;
}
.ts-sus-breadcrumb li[aria-current="page"] { color: var(--ts-sus-slate); font-weight: 600; }
.ts-sus-breadcrumb li::after { content: "/"; margin-left: 8px; color: var(--ts-sus-line); }
.ts-sus-breadcrumb li:last-child::after { content: ""; }
.ts-sus-breadcrumb a { color: var(--ts-sus-muted); text-decoration: none; }
.ts-sus-breadcrumb a:hover { color: var(--tsl-teal); }

/* ── 3. Hero ───────────────────────────────────────────────────────────── */
.ts-sus-hero {
	padding: 40px 24px 56px;
	background: #ffffff;
}
.ts-sus-hero-inner {
	max-width: 980px;
	margin: 0 auto 36px;
	text-align: center;
}
.ts-sus-eyebrow {
	display: inline-block;
	margin: 0 0 18px;
	padding: 7px 14px;
	border-radius: 999px;
	background: rgba(0,115,125,0.08);
	color: var(--tsl-teal);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.ts-sus-h1 {
	font-size: clamp(30px, 5vw, 52px);
	font-weight: 700;
}
.ts-sus-lede {
	margin: 18px auto 0;
	max-width: 720px;
	font-size: clamp(15px, 1.7vw, 18px);
	line-height: 1.6;
	color: var(--ts-sus-slate);
}

/* ── 4. 17-SDG grid (fly-in) ───────────────────────────────────────────── */
.ts-sus-grid--hero {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
	gap: 12px;
	max-width: 1080px;
	margin: 0 auto;
}
.ts-sus-goal {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 116px;
	padding: 14px 13px 12px;
	border-radius: 14px;
	background: var(--sdg-color);
	color: #fff;
	text-decoration: none;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(31,53,86,0.10), 0 1px 2px rgba(31,53,86,0.06);
	will-change: transform, opacity;
	/* Visible by default — so a tile stays visible after FLIP moves it out of
	   the hero grid into a section anchor. The hidden fly-in state is scoped
	   to grid tiles whose grid hasn't received .is-in yet (rule below). */
	opacity: 1;
	transform: none;
}
/* Fly-in: tiles are hidden only while their grid hasn't started animating. */
.ts-sus-grid--hero:not(.is-in) .ts-sus-goal {
	opacity: 0;
	transform: translateY(26px) scale(0.95);
}
.ts-sus-grid--hero.is-in .ts-sus-goal {
	opacity: 1;
	transform: none;
	transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: calc(var(--i, 0) * 38ms);
}
.ts-sus-goal-num {
	font-family: var(--ts-sus-font-display);
	font-weight: 700;
	font-size: 22px;
	line-height: 1;
	text-shadow: 0 1px 2px rgba(0,0,0,0.22);
}
.ts-sus-goal-glyph {
	display: flex;
	justify-content: flex-end;
}
.ts-sus-goal-glyph svg { width: 26px; height: 26px; stroke: #fff; opacity: 0.95; }
.ts-sus-goal-name {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.22;
	text-shadow: 0 1px 2px rgba(0,0,0,0.28);
}
.ts-sus-goal--linked { cursor: pointer; }
.ts-sus-goal--linked::after {
	content: "";
	position: absolute;
	left: 13px;
	bottom: 12px;
	width: 14px;
	height: 2px;
	border-radius: 2px;
	background: rgba(255,255,255,0.85);
}
.ts-sus-goal--linked .ts-sus-goal-name { padding-bottom: 8px; }
.ts-sus-goal--linked:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(31,53,86,0.18), 0 2px 4px rgba(31,53,86,0.08);
	/* Subtle dim instead of the theme's accent (teal) link hover. */
	color: rgba(255,255,255,0.82);
}
.ts-sus-goal--linked:hover .ts-sus-goal-num,
.ts-sus-goal--linked:hover .ts-sus-goal-name { color: rgba(255,255,255,0.82); }
.ts-sus-grid--hero.is-in .ts-sus-goal--linked:hover {
	transition-delay: 0s; /* hover is immediate, not staggered */
}
.ts-sus-goal--linked.is-current {
	outline: 3px solid #fff;
	outline-offset: -8px;
}

/* ── 4b. Under-goals mood banner + #Greentech Made in Germany ─────────── */
.ts-sus-under-goals { padding: 8px 0 0; }
.ts-sus-mood-band { margin: 0; }
.ts-sus-mood-band img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 20px;
	box-shadow: 0 16px 44px rgba(31,53,86,0.18);
}
.ts-sus-greentech {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 30px 0 8px;
}
.ts-sus-greentech-flag { display: inline-flex; line-height: 0; }
.ts-sus-greentech-text {
	font-family: var(--ts-sus-font-display);
	font-size: clamp(20px, 3vw, 30px);
	font-weight: 700;
	letter-spacing: -0.01em;
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: center;
}
.ts-sus-greentech-hash { color: var(--ts-sus-slate); }
.ts-sus-greentech-made { color: var(--ts-sus-slate); font-weight: 600; }
.ts-sus-greentech-word {
	/* Palindrome gradient (start color = end color) + background-repeat lets the
	   shimmer loop seamlessly forever: the last frame is identical to the first. */
	background-image: linear-gradient(90deg, #00737d, #2E7D32, #4C9F38, #00C853, #4C9F38, #2E7D32, #00737d);
	background-size: 200% 100%;
	background-repeat: repeat;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	animation: ts-sus-greentech-shimmer 3s linear infinite;
	will-change: background-position;
}
@keyframes ts-sus-greentech-shimmer {
	from { background-position: 0% 0; }
	to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.ts-sus-greentech-word { animation: none; background-position: 0 0; }
}
.ts-sus-under-goals--commit { padding-top: 24px; }

/* ── 5. Intro band ─────────────────────────────────────────────────────── */
.ts-sus-intro { padding: 72px 0 8px; }
.ts-sus-intro-h {
	text-align: center;
	font-size: clamp(24px, 3.4vw, 34px);
	font-weight: 700;
}
.ts-sus-intro-p {
	max-width: 760px;
	margin: 16px auto 0;
	text-align: center;
	font-size: clamp(15px, 1.6vw, 17px);
	line-height: 1.65;
	color: var(--ts-sus-slate);
}

/* ── 6. Per-SDG section — "invisible table" ────────────────────────────── */
.ts-sus-sections { padding-top: 64px; }
.ts-sus-sdg { padding: 44px 0; }
.ts-sus-sdg:nth-child(even) { background: var(--ts-sus-bg-soft); }

.ts-sus-sdg-table {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr) minmax(0, 320px);
	gap: 36px;
	align-items: center;
}

/* Hero grid cells stay in place (hold the grid shape) when their tile flies
   down into its section. An emptied cell shows a faint ghost placeholder. */
.ts-sus-cell { min-height: 116px; }
.ts-sus-cell:not(:has(.ts-sus-goal)) {
	border-radius: 14px;
	background: rgba(46,58,82,0.04);
	border: 1.5px dashed rgba(46,58,82,0.16);
}

/* The section anchor is a SLOT — the real hero tile flies into it via FLIP
   (sustainability.js). Transparent until the tile lands; reserves its space. */
.ts-sus-sdg-anchor {
	position: sticky;
	top: 96px;
	min-height: 168px;
	display: flex;
	align-items: stretch;
}
/* Flown-in grid tile becomes the section badge (medium size). */
.ts-sus-sdg-anchor .ts-sus-goal {
	width: 100%;
	min-height: 168px;
	padding: 20px 18px;
	border-radius: var(--ts-sus-radius);
	box-shadow: 0 14px 36px rgba(31,53,86,0.16), 0 2px 6px rgba(31,53,86,0.08);
}
.ts-sus-sdg-anchor .ts-sus-goal-num { font-size: 30px; }
.ts-sus-sdg-anchor .ts-sus-goal-glyph svg { width: 32px; height: 32px; }
.ts-sus-sdg-anchor .ts-sus-goal-name { font-size: 14px; }
.ts-sus-sdg-anchor .ts-sus-goal--linked::after { display: none; }

.ts-sus-sdg-body {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2,0.7,0.2,1);
}
.ts-sus-sdg.is-active .ts-sus-sdg-body {
	opacity: 1;
	transform: none;
	transition-delay: 0.12s;
}
.ts-sus-sdg-h { font-size: clamp(21px, 2.6vw, 28px); font-weight: 700; }
.ts-sus-sdg-h::before {
	content: "";
	display: block;
	width: 44px;
	height: 4px;
	border-radius: 4px;
	background: var(--sdg-color);
	margin-bottom: 16px;
}
.ts-sus-sdg-p {
	margin: 16px 0 0;
	font-size: clamp(15px, 1.5vw, 16.5px);
	line-height: 1.68;
	color: var(--ts-sus-slate);
}

/* Mood figure — real photo + colored scrim for legible caption. */
.ts-sus-sdg-figure {
	position: relative;
	margin: 0;
	min-height: 220px;
	border-radius: var(--ts-sus-radius);
	overflow: hidden;
	background: var(--sdg-color); /* fallback while the photo loads */
	color: #fff;
	box-shadow: 0 14px 36px rgba(31,53,86,0.16);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 22px;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2,0.7,0.2,1);
}
.ts-sus-sdg.is-active .ts-sus-sdg-figure {
	opacity: 1;
	transform: none;
	transition-delay: 0.2s;
}
.ts-sus-sdg-figure-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	display: block;
}
/* Scrim: tint with the SDG color + darken toward the bottom so the caption
   stays readable over any photo. */
.ts-sus-sdg-figure::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--sdg-color) 30%, transparent) 0%, transparent 40%),
		linear-gradient(0deg, rgba(0,0,0,0.62) 0%, transparent 55%);
	z-index: 1;
	pointer-events: none;
}
.ts-sus-sdg-figure-glyph { z-index: 2; }
.ts-sus-sdg-figure-cap { position: relative; z-index: 2; }
.ts-sus-sdg-figure-glyph {
	position: absolute;
	top: 16px;
	right: 16px;
	opacity: 0.85;
}
.ts-sus-sdg-figure-glyph svg { width: 64px; height: 64px; stroke: #fff; opacity: 0.92; }
.ts-sus-sdg-figure-cap {
	font-family: var(--ts-sus-font-display);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.25;
	text-shadow: 0 1px 3px rgba(0,0,0,0.25);
	position: relative;
}

/* ── 7. Commitments band ───────────────────────────────────────────────── */
.ts-sus-commit { padding: 88px 0 72px; background: var(--ts-sus-bg-soft); }
.ts-sus-commit-h {
	text-align: center;
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 700;
}
.ts-sus-commit-p {
	max-width: 720px;
	margin: 14px auto 32px;
	text-align: center;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--ts-sus-slate);
}
.ts-sus-commit-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
	max-width: 1000px;
	margin: 0 auto;
}
.ts-sus-commit-chip {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--ts-sus-line);
	border-radius: 12px;
}
.ts-sus-commit-num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--sdg-color);
	color: #fff;
	font-family: var(--ts-sus-font-display);
	font-weight: 700;
	font-size: 14px;
}
.ts-sus-commit-name { font-size: 13.5px; font-weight: 600; color: var(--ts-sus-slate); line-height: 1.25; }

/* ── 7b. FAQ (native <details> accordion) ──────────────────────────────── */
.ts-sus-faq { padding: 80px 0; }
.ts-sus-faq-h {
	text-align: center;
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 700;
	margin-bottom: 30px;
}
.ts-sus-faq-list {
	max-width: 820px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ts-sus-faq-item {
	background: #fff;
	border: 1px solid var(--ts-sus-line);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(31,53,86,0.04);
	overflow: hidden;
}
.ts-sus-faq-item[open] {
	box-shadow: 0 6px 20px rgba(31,53,86,0.08);
	border-color: rgba(0,115,125,0.28);
}
.ts-sus-faq-q {
	list-style: none;
	cursor: pointer;
	padding: 18px 22px;
	font-weight: 600;
	font-size: 16px;
	color: var(--ts-sus-slate);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
.ts-sus-faq-q::-webkit-details-marker { display: none; }
.ts-sus-faq-q::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	color: var(--tsl-teal);
}
.ts-sus-faq-item[open] .ts-sus-faq-q { color: var(--tsl-teal); }
.ts-sus-faq-item[open] .ts-sus-faq-q::after { content: "–"; }
.ts-sus-faq-a { padding: 0 22px 18px; }
.ts-sus-faq-a p { margin: 0; color: var(--ts-sus-slate); line-height: 1.6; font-size: 15px; }

/* ── 8. Closing CTA ────────────────────────────────────────────────────── */
.ts-sus-cta { padding: 80px 0; }
.ts-sus-cta-inner {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
	padding: 56px 32px;
	border-radius: 24px;
	background: linear-gradient(155deg, #203556 0%, #075f66 55%, #00737d 100%);
	box-shadow: 0 24px 60px rgba(7,95,102,0.28);
}
.ts-sus-cta-h { color: #fff; font-size: clamp(24px, 3.2vw, 32px); font-weight: 700; }
.ts-sus-cta-p {
	max-width: 600px;
	margin: 14px auto 28px;
	color: rgba(255,255,255,0.9);
	font-size: 16px;
	line-height: 1.6;
}
.ts-sus-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
/* On the dark gradient band the shared teal primary would vanish — invert. */
.ts-sus-cta-actions .tory-seo-btn-primary {
	background: #fff !important;
	color: var(--tsl-teal) !important;
}
.ts-sus-cta-actions .tory-seo-btn-primary:hover {
	background: #f0fbfc !important;
}
.ts-sus-cta-actions .tory-seo-btn-outline {
	background: rgba(255,255,255,0.10) !important;
	color: #fff !important;
	border: 1.5px solid rgba(255,255,255,0.55) !important;
}
.ts-sus-cta-actions .tory-seo-btn-outline:hover {
	background: rgba(255,255,255,0.20) !important;
	border-color: #fff !important;
}

/* ── 9. Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.ts-sus-sdg-table {
		grid-template-columns: 150px minmax(0, 1fr);
		gap: 24px;
	}
	.ts-sus-sdg-figure { grid-column: 1 / -1; min-height: 170px; }
	.ts-sus-sdg-anchor { position: static; min-height: 150px; }
}
@media (max-width: 620px) {
	.ts-sus-sdg-table { grid-template-columns: 1fr; gap: 18px; }
	.ts-sus-sdg-anchor {
		flex-direction: row;
		align-items: center;
		min-height: 0;
		padding: 14px 16px;
		gap: 14px;
	}
	.ts-sus-sdg-anchor-num { font-size: 26px; }
	.ts-sus-sdg-anchor-glyph svg { width: 28px; height: 28px; }
	.ts-sus-sdg-anchor-name { font-size: 14px; }
	.ts-sus-grid--hero { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
	.ts-sus-hero { padding: 28px 18px 40px; }
	.ts-sus-intro { padding-top: 48px; }
	.ts-sus-sections { padding-top: 40px; }
	.ts-sus-sdg { padding: 32px 0; }
	.ts-sus-commit { padding: 56px 0 48px; }
	.ts-sus-cta { padding: 56px 0; }
	.ts-sus-cta-inner { padding: 40px 20px; }
}

/* ── 10. Reduced motion — show everything statically ───────────────────── */
@media (prefers-reduced-motion: reduce) {
	.ts-sus-goal,
	.ts-sus-sdg-anchor,
	.ts-sus-sdg-body,
	.ts-sus-sdg-figure {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.ts-sus-goal--linked:hover { transform: none !important; }
	.ts-sus-sdg-anchor { position: static; }
}