/* ==========================================================================
   DEO AG — "Die Schleife"
   Base: tokens, typography, header, buttons, cards, footer, motion.
   Colours come from the DEO logo: ink, red, gold on warm paper.
   ========================================================================== */

:root {
	--ink: #14110f;
	--ink-soft: #4a433d;
	--paper: #f7f2ea;
	--paper-deep: #efe6d8;
	--white: #fff;
	--red: #c8202a;
	--red-deep: #a3141d;
	--gold: #f2b705;
	--night: #1c1714;
	--line: rgb(20 17 15 / 0.12);
	--radius: 22px;
	--radius-sm: 14px;
	--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--shadow: 0 1px 2px rgb(20 17 15 / 0.06), 0 14px 34px -14px rgb(20 17 15 / 0.28);
	--shadow-lift: 0 2px 4px rgb(20 17 15 / 0.06), 0 28px 50px -18px rgb(20 17 15 / 0.38);
	--gutter: clamp(1rem, 4vw, 2.5rem);
	--wide: 1240px;
	--header-h: 76px;
	--font-display: var(--wp--preset--font-family--display, "Bricolage Grotesque", system-ui, sans-serif);
	--font-body: var(--wp--preset--font-family--body, "Figtree", system-ui, sans-serif);

	/* One logo colour per AG afternoon. */
	--day-mon: var(--red);
	--day-tue: var(--gold);
	--day-wed: var(--ink);
	--day-thu: #6b5f55;
}

[data-day="mon"] { --day: var(--day-mon); --day-on: var(--white); }
[data-day="tue"] { --day: var(--day-tue); --day-on: var(--ink); }
[data-day="wed"] { --day: var(--day-wed); --day-on: var(--paper); }
[data-day="thu"] { --day: var(--day-thu); --day-on: var(--white); }

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 1rem);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	overflow-x: clip;
	background-color: var(--paper);
	/* Fine paper grain, 1 KB, no request. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.07 0 0 0 0 0.06 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	color: var(--ink);
	font-family: var(--font-body);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
}

::selection {
	background: var(--gold);
	color: var(--ink);
}

:focus-visible {
	outline: 3px solid var(--red);
	outline-offset: 3px;
	border-radius: 6px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link.screen-reader-text:focus {
	clip: auto;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.8rem 1.2rem;
	z-index: 1000;
	top: 0.5rem;
	left: 0.5rem;
	background: var(--ink);
	color: var(--paper);
	border-radius: 999px;
}

h1, h2, h3, h4 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

.deo-icon {
	width: 1.15em;
	height: 1.15em;
	flex: none;
	vertical-align: -0.2em;
}

.deo-muted {
	color: var(--ink-soft);
	font-size: 0.95em;
}

.deo-main {
	margin-block: 0 !important;
	min-height: 60vh;
	/* Tilted bands and floating shapes never cause sideways scrolling. */
	overflow-x: clip;
}

/* Kicker / eyebrow ------------------------------------------------------- */

.deo-kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.75rem;
	color: var(--red);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.deo-kicker::before {
	content: "";
	width: 2rem;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--ink) 0 33%, var(--red) 33% 66%, var(--gold) 66%);
}

/* Emphasis inside display headings: red, with a gold marker underneath. */
.deo-section__title em,
.deo-hero__title em,
.deo-footer__headline em {
	position: relative;
	z-index: 0;
	color: var(--red);
	font-style: normal;
	white-space: nowrap;
}

.deo-section__title em::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: -0.06em;
	right: -0.06em;
	bottom: 0.06em;
	height: 0.28em;
	border-radius: 0.2em;
	background: var(--gold);
	opacity: 0.55;
	transform: scaleX(var(--mark, 1));
	transform-origin: left;
	transition: transform 0.9s var(--ease) 0.25s;
}

.js .deo-section__title em::after { --mark: 0; }
.js .is-in .deo-section__title em::after,
.js .deo-section__title.is-in em::after { --mark: 1; }

/* Buttons --------------------------------------------------------------- */

.deo-btn,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	min-height: 48px;
	padding: 0.8em 1.45em;
	border: 2px solid transparent;
	border-radius: 999px;
	font-family: var(--font-body);
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.35s var(--ease-spring), box-shadow 0.3s;
}

.deo-btn .deo-icon {
	transition: transform 0.35s var(--ease-spring);
}

.deo-btn:hover .deo-icon:last-child {
	transform: translateX(3px);
}

.deo-btn:active,
.wp-block-button__link:active {
	transform: scale(0.97);
}

.deo-btn--primary,
.deo-btn-red .wp-block-button__link {
	background: var(--red);
	color: var(--white);
	box-shadow: 0 10px 24px -12px rgb(200 32 42 / 0.75);
}

.deo-btn--primary:hover,
.deo-btn--primary:focus-visible,
.deo-btn-red .wp-block-button__link:hover {
	background: var(--ink);
	color: var(--paper);
	box-shadow: 0 14px 28px -12px rgb(20 17 15 / 0.6);
}

.deo-btn--ghost,
.is-style-outline .wp-block-button__link {
	border-color: currentColor;
	background: transparent;
	color: var(--ink);
}

.deo-btn--ghost:hover,
.is-style-outline .wp-block-button__link:hover {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--paper);
}

.deo-btn--sm {
	min-height: 40px;
	padding: 0.55em 1.1em;
	font-size: 0.92rem;
}

.deo-btn--lg {
	min-height: 56px;
	padding: 1em 1.8em;
	font-size: 1.08rem;
}

.deo-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--ink);
	font-weight: 700;
	text-decoration: none;
}

.deo-link-arrow:hover {
	color: var(--red);
}

.deo-link-arrow:hover .deo-icon {
	transform: translateX(3px);
}

.deo-link-arrow .deo-icon {
	transition: transform 0.3s var(--ease-spring);
}

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

.deo-header-wrap {
	position: sticky;
	top: 0;
	z-index: 50;
	transition: transform 0.45s var(--ease);
}

.admin-bar .deo-header-wrap {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.deo-header-wrap.is-hidden {
	transform: translateY(-110%);
}

.deo-header {
	background: rgb(247 242 234 / 0.82);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s, background-color 0.3s;
}

.is-scrolled .deo-header {
	border-bottom-color: var(--line);
	background: rgb(247 242 234 / 0.92);
}

.deo-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	max-width: calc(var(--wide) + 2 * var(--gutter));
	height: var(--header-h);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.deo-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-right: auto;
	text-decoration: none;
}

.deo-brand img {
	display: block;
	width: auto;
	height: 36px;
}

.deo-brand__ag {
	display: inline-grid;
	place-items: center;
	height: 30px;
	padding: 0 0.6rem;
	border-radius: 9px;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	transition: background-color 0.3s, transform 0.4s var(--ease-spring);
}

.deo-brand:hover .deo-brand__ag {
	background: var(--red);
	transform: rotate(-6deg);
}

.deo-nav {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.deo-nav__list {
	display: flex;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.deo-nav__list a {
	position: relative;
	display: block;
	padding: 0.55rem 0.85rem;
	border-radius: 999px;
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s;
}

.deo-nav__list a::after {
	content: "";
	position: absolute;
	left: 0.85rem;
	right: 0.85rem;
	bottom: 0.3rem;
	height: 2px;
	border-radius: 2px;
	background: var(--red);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.35s var(--ease);
}

.deo-nav__list a:hover::after,
.deo-nav__list a[aria-current="page"]::after {
	transform: scaleX(1);
	transform-origin: left;
}

.deo-nav__actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.deo-nav__logout {
	color: var(--ink-soft);
	font-size: 0.9rem;
	font-weight: 600;
}

.deo-menu-toggle {
	display: none;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ink);
	color: var(--paper);
	cursor: pointer;
}

.deo-menu-toggle .deo-icon {
	width: 22px;
	height: 22px;
}

.deo-menu-toggle .is-close-icon,
.deo-menu-toggle[aria-expanded="true"] .is-open-icon {
	display: none;
}

.deo-menu-toggle[aria-expanded="true"] .is-close-icon {
	display: block;
}

@media (max-width: 960px) {
	:root { --header-h: 66px; }

	.deo-brand img { height: 30px; }

	.deo-menu-toggle {
		display: grid;
		position: relative;
		z-index: 2;
	}

	.deo-nav {
		position: fixed;
		inset: 0;
		z-index: 1;
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
		gap: 2rem;
		padding: calc(var(--header-h) + 1rem) var(--gutter) 2rem;
		background: var(--night);
		clip-path: circle(0 at calc(100% - 2.6rem) 2.1rem);
		visibility: hidden;
		transition: clip-path 0.6s var(--ease), visibility 0s linear 0.6s;
	}

	.is-menu-open .deo-nav {
		clip-path: circle(150% at calc(100% - 2.6rem) 2.1rem);
		visibility: visible;
		transition: clip-path 0.7s var(--ease), visibility 0s;
	}

	.is-menu-open .deo-brand {
		position: relative;
		z-index: 2;
	}

	.is-menu-open .deo-brand img {
		filter: invert(1) hue-rotate(180deg) brightness(1.4);
	}

	.deo-nav__list {
		flex-direction: column;
	}

	.deo-nav__list a {
		padding: 0.35rem 0;
		color: var(--paper);
		font-family: var(--font-display);
		font-size: clamp(2rem, 9vw, 3rem);
		font-weight: 700;
		line-height: 1.15;
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 0.4s, transform 0.5s var(--ease);
	}

	.deo-nav__list a::after { display: none; }

	.deo-nav__list a[aria-current="page"] { color: var(--gold); }

	.is-menu-open .deo-nav__list a {
		opacity: 1;
		transform: none;
	}

	.is-menu-open .deo-nav__list li:nth-child(1) a { transition-delay: 0.15s; }
	.is-menu-open .deo-nav__list li:nth-child(2) a { transition-delay: 0.21s; }
	.is-menu-open .deo-nav__list li:nth-child(3) a { transition-delay: 0.27s; }
	.is-menu-open .deo-nav__list li:nth-child(4) a { transition-delay: 0.33s; }
	.is-menu-open .deo-nav__list li:nth-child(5) a { transition-delay: 0.39s; }

	.deo-nav__actions {
		flex-wrap: wrap;
	}

	.deo-nav__actions .deo-btn--ghost {
		border-color: var(--paper);
		color: var(--paper);
	}

	.deo-nav__logout {
		color: var(--paper);
	}

	.is-menu-open {
		overflow: hidden;
	}
}

/* Day tag + badges -------------------------------------------------------- */

.deo-day-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.35em 0.8em;
	border-radius: 999px;
	background: var(--day, var(--ink));
	color: var(--day-on, var(--paper));
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1.1;
}

.deo-badge {
	display: inline-block;
	padding: 0.35em 0.7em;
	border-radius: 8px;
	background: var(--white);
	color: var(--ink);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	line-height: 1.1;
	text-transform: uppercase;
	box-shadow: 0 4px 12px -6px rgb(20 17 15 / 0.4);
}

.deo-badge--new { background: var(--gold); }
.deo-badge--new_provider { background: var(--ink); color: var(--paper); }
.deo-badge--new_equipment { background: var(--paper); }
.deo-badge--direct { background: var(--red); color: var(--white); }

/* AG card ------------------------------------------------------------------ */

.deo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
	gap: clamp(1rem, 2.2vw, 1.75rem);
}

.deo-grid--3 {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.deo-card {
	--tilt-x: 0deg;
	--tilt-y: 0deg;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--white);
	box-shadow: var(--shadow);
	transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--lift, 0));
	transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
	will-change: transform;
}

.deo-card:hover,
.deo-card:focus-within {
	--lift: -6px;
	box-shadow: var(--shadow-lift);
}

.deo-card:focus-within {
	outline: 3px solid var(--red);
	outline-offset: 3px;
}

.deo-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--paper-deep);
}

.deo-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.01);
	transition: transform 0.9s var(--ease), filter 0.6s;
}

.deo-card:hover .deo-card__media img {
	transform: scale(1.07);
}

.deo-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(20 17 15 / 0.25) 0%, transparent 35%);
	pointer-events: none;
}

.deo-card__media .deo-day-tag {
	position: absolute;
	z-index: 1;
	top: 0.85rem;
	left: 0.85rem;
}

.deo-card__badges {
	position: absolute;
	z-index: 1;
	top: 0.85rem;
	right: 0.85rem;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.35rem;
}

.deo-card__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: var(--paper-deep);
}

.deo-card__placeholder .deo-loop {
	width: 55%;
}

.deo-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.45rem;
	padding: 1.1rem 1.2rem 1.15rem;
}

.deo-card__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.32rem;
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.015em;
}

.deo-card__link {
	color: inherit;
	text-decoration: none;
}

.deo-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.deo-card__link:focus-visible {
	outline: none;
}

.deo-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	color: var(--ink-soft);
	font-size: 0.9rem;
}

.deo-card__meta .deo-icon {
	color: var(--red);
}

.deo-card__sep {
	opacity: 0.5;
}

.deo-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 0.75rem;
	border-top: 1px dashed var(--line);
}

.deo-card__fee {
	font-weight: 800;
}

.deo-card__fee.is-free {
	color: var(--red);
}

.deo-card__go {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--paper);
	transition: background-color 0.3s, color 0.3s, transform 0.45s var(--ease-spring);
}

.deo-card:hover .deo-card__go {
	background: var(--red);
	color: var(--white);
	transform: rotate(-45deg);
}

/* The DEO loop -------------------------------------------------------------- */

.deo-loop {
	display: block;
	overflow: visible;
}

.deo-loop__line {
	fill: none;
	stroke-linecap: round;
	stroke-width: 7;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}

.deo-loop__line--ink { stroke: var(--ink); }
.deo-loop__line--red { stroke: var(--red); transform: translate(5px, 6px); }
.deo-loop__line--gold { stroke: var(--gold); transform: translate(10px, 12px); }

.js .deo-loop__line {
	stroke-dashoffset: 1;
}

.js .deo-loop.is-drawn .deo-loop__line {
	animation: deo-draw 2.2s var(--ease) forwards;
}

.js .deo-loop.is-drawn .deo-loop__line--red { animation-delay: 0.18s; }
.js .deo-loop.is-drawn .deo-loop__line--gold { animation-delay: 0.36s; }

@keyframes deo-draw {
	to { stroke-dashoffset: 0; }
}

.wp-block-deo-ag-theme-loop,
.deo-loop--deco {
	width: clamp(90px, 12vw, 150px);
}

/* Reveal on scroll ------------------------------------------------------------ */

.js [data-deo-reveal],
.js .deo-card,
.js .deo-section__head,
.js .deo-steps > li,
.js .deo-pillar,
.js .deo-timeline > li {
	opacity: 0;
	translate: 0 26px;
	transition: opacity 0.8s var(--ease), translate 0.9s var(--ease), transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
	transition-delay: calc(var(--i, 0) * 70ms);
}

.js .is-in[data-deo-reveal],
.js .deo-card.is-in,
.js .deo-section__head.is-in,
.js .deo-steps > li.is-in,
.js .deo-pillar.is-in,
.js .deo-timeline > li.is-in {
	opacity: 1;
	translate: 0 0;
}

.js .deo-card.is-in:hover {
	transition-delay: 0s;
}

/* Footer ---------------------------------------------------------------- */

.deo-footer {
	position: relative;
	margin-top: 0 !important;
	padding: clamp(3rem, 7vw, 5.5rem) var(--gutter) 1.5rem !important;
	background: var(--night);
	color: rgb(247 242 234 / 0.8);
	overflow: hidden;
}

.deo-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	background: linear-gradient(90deg, var(--red) 0 33.3%, var(--gold) 33.3% 66.6%, var(--paper) 66.6%);
}

/* No gap between main content and the footer / header template parts. */
.wp-site-blocks > * + * {
	margin-block-start: 0 !important;
}

.deo-footer a {
	color: var(--paper);
	text-decoration-color: rgb(242 183 5 / 0.6);
	text-underline-offset: 3px;
}

.deo-footer a:hover {
	color: var(--gold);
}

.deo-footer__cta {
	gap: 1.5rem;
	padding-bottom: clamp(2rem, 5vw, 3.5rem);
	border-bottom: 1px solid rgb(247 242 234 / 0.14);
}

.deo-footer__headline {
	max-width: 15ch;
	margin: 0;
	color: var(--paper);
	font-size: var(--wp--preset--font-size--xx-large);
}

.deo-footer__headline em {
	color: var(--gold);
}

.deo-btn-gold .wp-block-button__link {
	background: var(--gold);
	color: var(--ink);
}

.deo-btn-gold .wp-block-button__link:hover {
	background: var(--paper);
	color: var(--ink);
}

.deo-btn-light .wp-block-button__link {
	border-color: rgb(247 242 234 / 0.5);
	color: var(--paper);
}

.deo-btn-light .wp-block-button__link:hover {
	border-color: var(--paper);
	background: var(--paper);
	color: var(--ink);
}

.deo-footer__cols {
	gap: clamp(1.5rem, 4vw, 3rem) !important;
	margin-top: clamp(2rem, 5vw, 3.5rem) !important;
}

.deo-footer__brand {
	display: inline-block;
	padding: 1rem 1.25rem;
	border-radius: var(--radius-sm);
	background: var(--paper);
}

.deo-footer__brand img {
	display: block;
	width: 190px;
	height: auto;
}

.deo-footer__about {
	max-width: 34ch;
	font-size: 0.95rem;
}

.deo-footer__title {
	margin: 0 0 0.9rem;
	color: var(--paper);
	font-size: 1rem;
	letter-spacing: 0.02em;
}

.deo-footer__list {
	display: grid;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	font-size: 0.95rem;
	list-style: none;
}

.deo-footer__base {
	margin-top: clamp(2rem, 5vw, 3rem) !important;
	padding-top: 1.25rem;
	border-top: 1px solid rgb(247 242 234 / 0.14);
	font-size: 0.85rem;
}

.deo-footer__base p {
	margin: 0;
}

.deo-term {
	font-weight: 600;
}

/* Reduced motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}

	.js [data-deo-reveal],
	.js .deo-card,
	.js .deo-section__head,
	.js .deo-steps > li,
	.js .deo-pillar,
	.js .deo-timeline > li {
		opacity: 1;
		translate: none;
	}

	.js .deo-loop__line {
		stroke-dashoffset: 0;
	}

	.deo-card {
		transform: none !important;
	}
}