/**
 * SiebeSol Visuals — Brand Overrides
 * Cinematic dark/light theme. Clean & responsible.
 */

/* =====================================================================
   Brand Design Tokens
   ===================================================================== */

:root {
	/* Layout */
	--ss-max-width:    132rem;
	--ss-gutter:       2.4rem;

	/* Brand colours */
	--ss-navy:         #0c1e38;
	--ss-navy-mid:     #07121f;
	--ss-dark:         #060d1c;
	--ss-dark-mid:     #08111f;
	--ss-blue:         #0a4c8d;
	--ss-blue-faint:   rgba(10, 76, 141, 0.08);
	--ss-accent:       rgba(160, 210, 255, 0.6);

	/* Surface */
	--ss-page-bg:      #e4ebf6;
	--ss-glass-bg:     rgba(255, 255, 255, 0.76);
	--ss-glass-border: rgba(255, 255, 255, 0.84);
	--ss-glass-shine:  rgba(255, 255, 255, 0.95);

	/* Text */
	--ss-text:         #1b2a40;
	--ss-text-muted:   rgba(11, 27, 47, 0.78);
	--ss-heading:      #0a1a31;
	--ss-white:        #ffffff;
	--ss-on-dark:      rgba(228, 242, 255, 0.88);
	--ss-on-dark-dim:  rgba(190, 220, 255, 0.6);

	/* Dark section */
	--ss-border-dark:  rgba(255, 255, 255, 0.06);
	--ss-border-light: rgba(255, 255, 255, 0.72);

	/* Easing */
	--ease-spring: cubic-bezier(0.22, 0.88, 0.36, 1);
	--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Keep base vars in sync so components work */
	--clr-primary:   var(--ss-navy);
	--clr-secondary: var(--ss-navy-mid);
	--clr-text:      var(--ss-text);
}

/* =====================================================================
   Base
   ===================================================================== */

body {
	font-family: 'Plus Jakarta Sans', sans-serif;
	background:
		radial-gradient(circle at 6% 8%,   rgba(130, 170, 255, 0.18), transparent 30%),
		radial-gradient(circle at 94% 14%,  rgba(117, 236, 220, 0.14), transparent 28%),
		radial-gradient(circle at 84% 88%,  rgba(217, 149, 255, 0.14), transparent 30%),
		linear-gradient(155deg, #e9eef7 0%, var(--ss-page-bg) 34%, #dfe8f4 100%);
	background-attachment: fixed;
	color: var(--ss-text);
}

h1, h2, h3, h4, h5, h6 { font-family: 'Sora', sans-serif; }
h1 { letter-spacing: -0.04em; }
h2 { letter-spacing: -0.03em; }

/* =====================================================================
   Page sections wrapper
   ===================================================================== */

.tw-page-sections {
	display: flex;
	flex-direction: column;
	gap: clamp(3.2rem, 4vw, 6.4rem);
}

.tw-page-sections > * { margin: 0; width: 100%; }

.tw-section--spacing-small  { padding-block: 1.2rem; }
.tw-section--spacing-medium { padding-block: 2rem; }
.tw-section--spacing-large  { padding-block: 2.8rem; }

.tw-main {
	padding-top: 0;
	padding-bottom: 4.8rem;
}

.tw-section[id] { scroll-margin-top: 10rem; }

/* =====================================================================
   Navigation — glassmorphism pill
   ===================================================================== */

.tw-header {
	position: fixed;
	top: 1.4rem;
	left: 50%;
	transform: translateX(-50%);
	width: min(var(--ss-max-width), calc(100% - (var(--ss-gutter) * 2)));
	border-radius: 999px;
	background: linear-gradient(135deg, var(--ss-glass-bg), rgba(228, 241, 255, 0.56));
	border: 1px solid var(--ss-glass-border);
	box-shadow:
		0 16px 48px rgba(15, 28, 52, 0.14),
		0 4px 12px rgba(15, 28, 52, 0.07),
		inset 0 1px 0 var(--ss-glass-shine);
	backdrop-filter: blur(40px) saturate(200%);
	-webkit-backdrop-filter: blur(40px) saturate(200%);
	transition: background 0.3s ease, box-shadow 0.3s ease;
}

.tw-header::before {
	content: '';
	position: absolute;
	inset: 1px;
	border-radius: inherit;
	background: linear-gradient(110deg,
		rgba(255, 255, 255, 0.38) 0%,
		rgba(255, 255, 255, 0.08) 42%,
		rgba(255, 255, 255, 0) 68%);
	pointer-events: none;
	z-index: 0;
}

.tw-header__main,
.tw-header__inner { position: relative; z-index: 1; }

.tw-header__inner {
	min-height: 6.4rem;
	padding-block: 0.8rem;
	padding-inline: 2rem;
}

.tw-header__brand .tw-logo__image {
	height: 4.4rem;
	max-height: 4.4rem;
	max-width: 26rem;
	width: auto;
	transition: opacity 0.2s ease;
}

.tw-header__brand .tw-logo__image:hover { opacity: 0.72; }

.tw-header--scrolled {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(228, 241, 255, 0.74));
	box-shadow:
		0 20px 56px rgba(15, 32, 56, 0.18),
		0 6px 16px rgba(15, 32, 56, 0.09),
		inset 0 1px 0 var(--ss-white);
}

/* Desktop nav links */
.tw-header .tw-nav__link {
	font-size: 1.5rem;
	padding: 0.56rem 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ss-navy);
	transition: color 0.2s ease;
}

.tw-header .tw-nav__link:hover,
.tw-header .tw-nav__item--active > .tw-nav__link,
.tw-header .tw-nav__item--scroll-active > .tw-nav__link,
.tw-header .tw-nav__link--scroll-active { color: var(--ss-blue); }

/* CTA button in nav */
.btn--nav {
	font-size: 1.46rem;
	padding-block: 0.7rem;
	padding-inline: 2rem;
	border-radius: 999px;
	min-height: 0;
}

/* Hamburger toggle */
.tw-nav__toggle {
	background: rgba(8, 20, 42, 0.82);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 1.2rem;
	color: var(--ss-white);
	width: 4.4rem;
	height: 4.4rem;
}

/* Mobile drawer — scoped to mobile only */
@media (max-width: 991.98px) {
	.tw-nav__collapse {
		background: linear-gradient(160deg, var(--ss-dark), var(--ss-dark-mid));
		border-left: 1px solid var(--ss-border-dark);
	}

	.tw-nav__collapse-header {
		border-bottom: 1px solid var(--ss-border-dark);
	}

	.tw-nav__collapse-header img { filter: brightness(0) invert(1); opacity: 0.88; }

	.tw-nav__close {
		background: rgba(255, 255, 255, 0.08);
		border: 1px solid rgba(255, 255, 255, 0.12);
		color: var(--ss-on-dark);
		border-radius: 999px;
	}

	.tw-nav__close:hover { background: rgba(255, 255, 255, 0.15); }

	.tw-nav__collapse-body .tw-nav__link {
		color: var(--ss-on-dark);
		font-size: 1.8rem;
		padding-block: 1.2rem;
		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	}

	.tw-nav__collapse-body .tw-nav__link:hover { color: var(--ss-white); }

	.tw-nav__collapse-body .tw-nav__item--active > .tw-nav__link,
	.tw-nav__collapse-body .tw-nav__item--scroll-active > .tw-nav__link {
		color: var(--ss-accent);
	}
}

.admin-bar .tw-header { top: calc(32px + 1.4rem); }

/* =====================================================================
   Buttons
   ===================================================================== */

.btn--primary,
.tw-btn--primary {
	background: linear-gradient(125deg, var(--ss-navy), #16345d);
	border-color: #0c2546;
	color: #f2f8ff;
	box-shadow: 0 16px 30px rgba(13, 36, 68, 0.28);
}

.btn--primary:hover,
.tw-btn--primary:hover {
	background: linear-gradient(125deg, #071427, #1a3b67);
	color: var(--ss-white);
}

/* Buttons inside prose: override the .tw-text__content a link color */
.tw-text__content a.btn--primary,
.tw-text-media__content a.btn--primary {
	color: #f2f8ff;
}

.tw-text__content a.btn--primary:hover,
.tw-text-media__content a.btn--primary:hover {
	color: var(--ss-white);
}

.tw-text__content a.btn--outline,
.tw-text-media__content a.btn--outline {
	color: #0f2b4d;
}

.btn--outline,
.tw-btn--outline {
	border-color: rgba(13, 35, 63, 0.25);
	color: #0f2b4d;
	background: rgba(255, 255, 255, 0.34);
}

.btn--outline:hover,
.tw-btn--outline:hover {
	background: rgba(12, 33, 58, 0.95);
	border-color: rgba(10, 31, 56, 0.95);
	color: #f2f8ff;
}

/* =====================================================================
   Hero (homepage)
   ===================================================================== */

.tw-header-home {
	min-height: 100vh;
	min-height: 100dvh;
	width: 100%;
	position: relative;
	overflow: hidden;
}

.tw-header-home__media--video { background: #040914; }

.tw-header-home__media-cover {
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(180deg, rgba(4, 11, 22, 0.48) 0%, rgba(4, 11, 22, 0.26) 36%, rgba(4, 11, 22, 0.42) 100%),
		radial-gradient(circle at 78% 14%, rgba(12, 36, 67, 0.34), transparent 42%);
	pointer-events: none;
}

.tw-header-home__media-cover::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: clamp(8rem, 13vh, 14rem);
	background: linear-gradient(180deg, rgba(4, 11, 22, 0.78) 0%, rgba(4, 11, 22, 0) 100%);
}

.tw-header-home__media-cover::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: clamp(7rem, 12vh, 12rem);
	background: linear-gradient(180deg,
		rgba(4, 11, 22, 0) 0%,
		rgba(4, 11, 22, 0.42) 45%,
		rgba(4, 11, 22, 0.92) 100%);
}

.tw-header-home__media--video iframe {
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate3d(-50%, -52%, 0) scale(1.62);
	width: 100vw;
	height: 56.25vw;
	min-width: 177.78vh;
	min-height: 100vh;
	border: 0;
	pointer-events: none;
	z-index: 1;
	will-change: transform;
}

.tw-header-home--overlay::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 16, 30, 0.2) 0%, rgba(7, 16, 29, 0.66) 100%);
	z-index: 0;
}

.tw-header-home--has-video.tw-header-home--overlay::before {
	background:
		linear-gradient(180deg,
			rgba(4, 11, 22, 0.14) 0%,
			rgba(4, 11, 22, 0.62) 68%,
			rgba(4, 11, 22, 0.84) 100%),
		radial-gradient(circle at 70% 18%, rgba(151, 214, 255, 0.22), transparent 42%);
}

.tw-header-home__inner {
	padding-block: clamp(8rem, 12vh, 13rem) clamp(11rem, 16vh, 17rem);
	gap: 2.2rem;
}

.tw-header-home__badge {
	background: rgba(248, 251, 255, 0.17);
	border: 1px solid rgba(255, 255, 255, 0.32);
	font-weight: 700;
	letter-spacing: 0.13em;
}

.tw-header-home__title {
	max-width: 13ch;
	font-size: clamp(4.4rem, 7.2vw, 9rem);
	font-weight: 900;
	text-wrap: balance;
	letter-spacing: -0.035em;
	line-height: 1;
	text-shadow: 0 16px 56px rgba(0, 0, 0, 0.38);
}

.tw-header-home__subtitle {
	max-width: 64rem;
	font-size: clamp(1.8rem, 2.3vw, 2.4rem);
	color: rgba(243, 248, 255, 0.92);
	text-wrap: balance;
}

.tw-header-home__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
}

.tw-header-home__actions .btn {
	min-height: 5.6rem;
	padding-inline: 3.4rem;
}

.tw-header-home__actions .btn--outline-white {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.tw-header-home__actions .btn--outline-white:hover {
	background: rgba(255, 255, 255, 0.94);
	color: var(--ss-navy-mid);
}

/* Marquee pinned to hero bottom */
.tw-header-home__marquee {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 3;
}

/* =====================================================================
   Clients marquee
   ===================================================================== */

.tw-clients-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

.tw-clients-marquee--hero {
	width: 100%;
	border-top: 1px solid var(--ss-border-dark);
	-webkit-mask-image: none;
	mask-image: none;
}

.tw-clients-marquee__track {
	display: flex;
	width: max-content;
	animation: marqueeScroll 28s linear infinite;
	will-change: transform;
}

.tw-clients-marquee:hover .tw-clients-marquee__track { animation-play-state: paused; }

@keyframes marqueeScroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.tw-clients-marquee__track span {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4.8rem;
	height: 8rem;
	white-space: nowrap;
	font-family: 'Sora', sans-serif;
	font-size: clamp(1.3rem, 1.2vw, 1.6rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(200, 228, 255, 0.42);
	position: relative;
	transition: color 0.22s ease;
}

.tw-clients-marquee__track span::after {
	content: '·';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(255, 255, 255, 0.12);
	font-size: 2.4rem;
	line-height: 1;
}

.tw-clients-marquee__track span:hover { color: rgba(220, 242, 255, 0.82); }

.tw-clients-marquee--hero .tw-clients-marquee__track span {
	color: rgba(255, 255, 255, 0.30);
	font-size: clamp(1.1rem, 1vw, 1.4rem);
	padding: 0 3.6rem;
	height: 5.2rem;
}

.tw-clients-marquee--hero .tw-clients-marquee__track span::after { color: rgba(255, 255, 255, 0.15); }

@media (prefers-reduced-motion: reduce) {
	.tw-clients-marquee__track { animation: none; }
}

/* =====================================================================
   Text sections
   ===================================================================== */

.tw-text__badge {
	display: inline-block;
	margin-bottom: 1.6rem;
	background: rgba(10, 30, 62, 0.07);
	border: 1px solid rgba(10, 30, 62, 0.16);
	color: var(--ss-blue);
	font-size: 1.2rem;
	padding: 0.5rem 1.4rem;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.13em;
	font-weight: 700;
}

.tw-text__content {
	min-width: 0;
	max-width: 84ch;
	font-size: clamp(1.6rem, 1.2vw, 1.9rem);
	line-height: 1.8;
}

/* Decorative repeated wordmark — centered display band */
.tw-brand-spread {
	position: relative;
	display: block;
	max-width: 100%;
	margin-inline: auto;
	padding-block: clamp(1rem, 2vw, 2.4rem);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.tw-brand-spread__track {
	display: inline-flex;
	width: max-content;
	min-width: max-content;
	gap: clamp(1.6rem, 3vw, 4rem);
	animation: brandSpreadScroll 20s linear infinite;
	will-change: transform;
}

.tw-brand-spread.is-js-marquee .tw-brand-spread__track {
	animation: none !important;
}

.tw-brand-spread__group {
	display: inline-flex;
	align-items: center;
	gap: clamp(1.6rem, 3vw, 4rem);
	padding-right: clamp(1.6rem, 3vw, 4rem);
	flex: 0 0 auto;
	min-width: max-content;
}

@keyframes brandSpreadScroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.tw-brand-spread span {
	font-family: 'Sora', sans-serif;
	font-size: clamp(2.8rem, 7vw, 7.6rem);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--ss-blue);
	user-select: none;
	flex-shrink: 0;
	white-space: nowrap;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.tw-brand-spread span {
		background: none;
		-webkit-background-clip: unset;
		background-clip: unset;
		-webkit-text-fill-color: var(--ss-blue);
		color: var(--ss-blue);
	}

	.tw-brand-spread span:nth-child(even) {
		background: none;
		-webkit-background-clip: unset;
		background-clip: unset;
		-webkit-text-fill-color: var(--ss-blue);
	}
}

.tw-brand-spread span:nth-child(even) { opacity: 1; }

.tw-brand-spread span:nth-child(odd) { opacity: 1; }

.tw-text__content h2 {
	margin-bottom: 1.4rem;
	font-size: clamp(3.2rem, 4vw, 5rem);
	line-height: 1.02;
	color: var(--ss-heading);
}

.tw-text__content p {
	max-width: 72ch;
	color: var(--ss-text-muted);
}

.tw-text__actions { margin-top: 2rem; }

/* Text + media layout */
.tw-text--has-media .tw-text__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(26rem, 0.8fr);
	gap: clamp(2rem, 3.5vw, 4.8rem);
	align-items: stretch;
}

.tw-text__media {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 34rem;
}

.tw-text__image {
	flex: 1;
	width: 100%;
	min-height: 34rem;
	display: block;
	border-radius: 1.6rem;
	border: 1px solid var(--ss-border-light);
	box-shadow: 0 18px 38px rgba(8, 23, 44, 0.18);
	object-fit: cover;
	object-position: center;
}

.tw-text__image--placeholder {
	flex: 1;
	min-height: 34rem;
	display: grid;
	place-items: center;
	padding: 2rem;
	background: linear-gradient(145deg, rgba(15, 31, 56, 0.15), rgba(19, 46, 80, 0.28));
	border: 1px dashed rgba(180, 210, 255, 0.38);
	border-radius: 1.6rem;
	color: rgba(120, 160, 210, 0.6);
	text-align: center;
}

.tw-media-placeholder__label {
	background: rgba(7, 23, 41, 0.55);
	color: #eef6ff;
	border: 1px solid rgba(200, 225, 255, 0.3);
	border-radius: 0.8rem;
	padding: 0.6rem 1.4rem;
	font-size: 1.3rem;
}

/* Intro: full-bleed */
.tw-text#intro {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* About: centered decorative wordmark band (no media) */
.tw-text:has(.tw-brand-spread) .tw-text__content {
	max-width: none;
	width: 100%;
	text-align: center;
}

/* Lets-create: boxed content card */
.tw-text#lets-create .tw-text__content {
	max-width: 64ch;
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.86);
	border-radius: 1.6rem;
	padding: clamp(2rem, 3vw, 3.2rem);
	box-shadow: 0 14px 30px rgba(13, 34, 58, 0.08);
}

/* Contact: centered detail cards (no form) */
.tw-text#contact .tw-text__content {
	max-width: 62rem;
	margin-inline: auto;
	text-align: center;
}

.tw-text#contact h2 {
	margin-bottom: 2.8rem;
	font-size: clamp(3.2rem, 4.5vw, 5.2rem);
	letter-spacing: -0.03em;
}

.tw-text#contact h2::before {
	content: 'Get in touch';
	display: block;
	margin-bottom: 1.2rem;
	font-family: 'Sora', sans-serif;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ss-blue);
}

.tw-text#contact .tw-text__content > p {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	max-width: none;
	margin: 1.2rem auto 0;
	padding: 1.6rem 2.4rem;
	background: var(--ss-glass-bg);
	border: 1px solid var(--ss-glass-border);
	border-radius: 1.4rem;
	box-shadow: 0 12px 30px rgba(15, 35, 63, 0.07);
	font-weight: 600;
	color: var(--ss-text);
	transition: transform 0.22s var(--ease-spring), box-shadow 0.22s ease;
}

.tw-text#contact .tw-text__content > p:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 44px rgba(15, 35, 63, 0.13);
}

.tw-text#contact .tw-text__content > p a {
	color: var(--ss-blue);
	font-weight: 700;
	text-decoration: none;
}

.tw-text#contact .tw-text__content > p a:hover { text-decoration: underline; }

/* =====================================================================
   Text-Media component
   ===================================================================== */

.tw-text-media__content,
.tw-text-media__media {
	background: rgba(255, 255, 255, 0.82);
	border: 1px solid var(--ss-border-light);
	box-shadow: 0 16px 42px rgba(15, 35, 63, 0.09);
	border-radius: 1.8rem;
	padding: clamp(2rem, 3vw, 3.2rem);
}

.tw-text-media__content h2 { color: var(--ss-heading); }
.tw-text-media__content p  { color: var(--ss-text-muted); }

.tw-text-media__image { border-radius: 1.2rem; }

/* =====================================================================
   Work Grid — cinematic bento
   ===================================================================== */

.tw-work-grid {
	padding-block: clamp(4.8rem, 8vw, 10rem);
	background:
		radial-gradient(ellipse at 20% 10%, rgba(60, 120, 220, 0.1), transparent 50%),
		radial-gradient(ellipse at 80% 90%, rgba(100, 60, 200, 0.07), transparent 50%),
		linear-gradient(155deg, #03060e 0%, #040c1c 50%, #050f1e 100%);
	border-top: 1px solid rgba(120, 180, 255, 0.12);
	border-bottom: 1px solid rgba(120, 180, 255, 0.10);
	overflow: hidden;
}

.tw-work-grid__header::before {
	content: '— Selected work';
	display: block;
	margin-bottom: 1.2rem;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ss-accent);
	font-family: 'Sora', sans-serif;
}

.tw-work-grid__title {
	font-size: clamp(3.6rem, 5vw, 6.4rem);
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1;
	margin: 0 0 clamp(2.4rem, 3.5vw, 4.4rem);
	background: linear-gradient(130deg,
		rgba(255, 255, 255, 0.90) 0%,
		rgba(200, 230, 255, 0.50) 60%,
		rgba(150, 200, 255, 0.25) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.tw-work-pillars {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: clamp(15rem, 17vw, 24rem);
	gap: 1rem;
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: work-item;
}

.tw-work-pillars li:nth-child(1) { grid-column: span 7; grid-row: span 2; }
.tw-work-pillars li:nth-child(2) { grid-column: span 5; }
.tw-work-pillars li:nth-child(3) { grid-column: span 5; }
.tw-work-pillars li:nth-child(4) { grid-column: span 4; }
.tw-work-pillars li:nth-child(5) { grid-column: span 4; }
.tw-work-pillars li:nth-child(6) { grid-column: span 4; }

/* Fallback images — used when no image is uploaded in WP */
/* 1: Aftermovies — cinema camera */
.tw-work-pillars li:nth-child(1) { --tw-work-bg: url('https://images.pexels.com/photos/2873486/pexels-photo-2873486.jpeg?auto=compress&cs=tinysrgb&w=1200'); }
/* 2: Sports — voetbalstadion */
.tw-work-pillars li:nth-child(2) { --tw-work-bg: url('https://images.pexels.com/photos/46798/the-ball-stadion-football-the-pitch-46798.jpeg?auto=compress&cs=tinysrgb&w=800'); }
/* 3: Social Media Branding — content creator / phone */
.tw-work-pillars li:nth-child(3) { --tw-work-bg: url('https://images.pexels.com/photos/3987020/pexels-photo-3987020.jpeg?auto=compress&cs=tinysrgb&w=800'); }
/* 4: Art & Galeries — art gallery interior */
.tw-work-pillars li:nth-child(4) { --tw-work-bg: url('https://images.pexels.com/photos/1674049/pexels-photo-1674049.jpeg?auto=compress&cs=tinysrgb&w=800'); }
/* 5: Bands & Artists — live concert crowd */
.tw-work-pillars li:nth-child(5) { --tw-work-bg: url('https://images.pexels.com/photos/1763075/pexels-photo-1763075.jpeg?auto=compress&cs=tinysrgb&w=800'); }
/* 6: Podcasts — podcast microfoon setup */
.tw-work-pillars li:nth-child(6) { --tw-work-bg: url('https://images.pexels.com/photos/3784221/pexels-photo-3784221.jpeg?auto=compress&cs=tinysrgb&w=800'); }

.tw-work-pillars li {
	counter-increment: work-item;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	padding: clamp(1.8rem, 2.4vw, 3rem);
	isolation: isolate;
	overflow: hidden;
	background-color: #040a14;
	background-image: linear-gradient(180deg,
		rgba(4, 10, 20, 0) 25%,
		rgba(4, 10, 20, 0.5) 62%,
		rgba(4, 10, 20, 0.92) 100%);
	border: 1px solid rgba(188, 223, 255, 0.12);
	border-radius: 1.6rem;
	transition:
		transform 0.44s var(--ease-spring),
		border-color 0.32s ease,
		box-shadow 0.44s ease;
	will-change: transform;
}

.tw-work-pillars li::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--tw-work-bg);
	background-size: cover;
	background-position: center;
	z-index: -1;
	border-radius: inherit;
	transition: transform 0.72s var(--ease-spring);
}

.tw-work-pillars li::after {
	content: counter(work-item, decimal-leading-zero);
	position: absolute;
	top: 1.6rem;
	right: 1.8rem;
	font-size: 1.1rem;
	font-family: 'Sora', sans-serif;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.30);
	z-index: 2;
	transition: color 0.28s ease;
}

.tw-work-pillars li:hover {
	transform: scale(1.018) translateY(-3px);
	border-color: rgba(200, 230, 255, 0.38);
	box-shadow:
		0 28px 72px rgba(3, 9, 20, 0.72),
		0 0 0 1px rgba(180, 220, 255, 0.24),
		inset 4px 0 0 rgba(100, 180, 255, 0.65);
}

.tw-work-pillars li:hover::before { transform: scale(1.10); }
.tw-work-pillars li:hover::after  { color: rgba(255, 255, 255, 0.62); }

.tw-work-pillars__label {
	display: inline-block;
	position: relative;
	z-index: 2;
	color: var(--ss-white);
	font-size: clamp(1.7rem, 1.6vw, 2.6rem);
	font-weight: 800;
	letter-spacing: 0.05em;
	line-height: 1.1;
	text-transform: uppercase;
	padding: 0.6em 1.1em;
	border-radius: 999px;
	background: rgba(8, 14, 28, 0.52);
	backdrop-filter: blur(10px) saturate(160%);
	-webkit-backdrop-filter: blur(10px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* =====================================================================
   CTA — dark full-bleed
   ===================================================================== */

.tw-cta {
	position: relative;
	overflow: hidden;
	padding-block: clamp(6.4rem, 12vw, 14rem);
}

.tw-cta--dark {
	background:
		radial-gradient(ellipse at 8% -10%, rgba(10, 76, 141, 0.32), transparent 46%),
		radial-gradient(ellipse at 100% 120%, rgba(60, 120, 220, 0.16), transparent 50%),
		linear-gradient(160deg, var(--ss-dark) 0%, #050b18 60%, #060d1e 100%);
	border-top: 1px solid var(--ss-border-dark);
	border-bottom: 1px solid var(--ss-border-dark);
	color: #f0f7ff;
}

.tw-cta--dark::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
	opacity: 0.024;
	pointer-events: none;
	z-index: 0;
}

.tw-cta--dark .container {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: center;
	gap: clamp(4rem, 8vw, 10rem);
	position: relative;
	z-index: 1;
}

.tw-cta__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.tw-cta__content { max-width: 52rem; }

.tw-cta--dark .tw-cta__content::before {
	content: 'READY TO SHOOT?';
	display: block;
	margin-bottom: 2rem;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ss-accent);
	font-family: 'Sora', sans-serif;
}

.tw-cta--dark .tw-cta__content h2 {
	font-size: clamp(3.6rem, 5vw, 6.4rem);
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1;
	margin: 0 0 1.6rem;
	color: var(--ss-white);
}

.tw-cta--dark .tw-cta__content p {
	font-size: clamp(1.6rem, 1.6vw, 1.9rem);
	color: var(--ss-on-dark-dim);
	margin: 0 0 3.2rem;
	line-height: 1.6;
}

.tw-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem;
}

.tw-cta--dark .tw-cta__actions .btn,
.tw-cta--dark .tw-cta__actions .btn:hover { color: var(--ss-white) !important; }

.tw-cta--dark .tw-cta__actions .btn--primary {
	min-height: 5.6rem;
	padding-inline: 3.6rem;
	font-size: 1.7rem;
	font-weight: 700;
	border-radius: 999px;
	background: var(--ss-white);
	color: var(--ss-dark) !important;
	border-color: transparent;
	box-shadow: 0 10px 36px rgba(0, 0, 0, 0.4);
	transition:
		background 0.22s ease,
		box-shadow 0.22s ease,
		transform 0.26s var(--ease-bounce);
}

.tw-cta--dark .tw-cta__actions .btn--primary:hover {
	background: rgba(230, 240, 255, 0.94);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
	transform: translateY(-3px) scale(1.02);
}

.tw-cta__contact {
	position: relative;
	padding: clamp(2.8rem, 4vw, 4rem);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 2.2rem;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.tw-cta__contact::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(160deg, rgba(160, 210, 255, 0.4), transparent 60%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.tw-cta__contact-label {
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ss-accent);
	font-family: 'Sora', sans-serif;
	margin: 0 0 2.4rem;
}

.tw-cta__contact-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.tw-cta__contact-item {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	padding: 0.6rem;
	margin: -0.6rem;
	border-radius: 1.2rem;
	transition: background 0.22s ease;
}

.tw-cta__contact-item:hover { background: rgba(255, 255, 255, 0.05); }

.tw-cta__contact-icon {
	width: 4.2rem;
	height: 4.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(180, 220, 255, 0.85);
	transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.26s var(--ease-bounce);
}

.tw-cta__contact-item:hover .tw-cta__contact-icon {
	background: var(--ss-blue);
	border-color: transparent;
	color: var(--ss-white);
	transform: translateY(-2px);
}

.tw-cta__contact-item a,
.tw-cta__contact-item span {
	font-size: clamp(1.5rem, 1.5vw, 1.8rem);
	color: rgba(210, 232, 255, 0.75);
	text-decoration: none;
	transition: color 0.2s ease;
	line-height: 1.4;
}

.tw-cta__contact-item a:hover { color: var(--ss-white); }

/* ---- CTA light variant (contrasts with the dark footer) ---- */

.tw-cta--light {
	background: transparent;
	color: var(--ss-text);
}

.tw-cta--light .container {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: center;
	gap: clamp(4rem, 8vw, 10rem);
	position: relative;
	z-index: 1;
}

.tw-cta--light .tw-cta__content::before {
	content: 'READY TO SHOOT?';
	display: block;
	margin-bottom: 2rem;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ss-blue);
	font-family: 'Sora', sans-serif;
}

.tw-cta--light .tw-cta__content h2 {
	font-size: clamp(3.6rem, 5vw, 6.4rem);
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1;
	margin: 0 0 1.6rem;
	color: var(--ss-heading);
}

.tw-cta--light .tw-cta__content p {
	font-size: clamp(1.6rem, 1.6vw, 1.9rem);
	color: var(--ss-text-muted);
	margin: 0 0 3.2rem;
	line-height: 1.6;
}

.tw-cta--light .tw-cta__actions .btn--primary {
	min-height: 5.6rem;
	padding-inline: 3.6rem;
	font-size: 1.7rem;
	font-weight: 700;
	border-radius: 999px;
}

.tw-cta--light .tw-cta__contact {
	background: var(--ss-glass-bg);
	border: 1px solid var(--ss-glass-border);
	box-shadow: 0 24px 60px rgba(12, 30, 56, 0.12);
}

.tw-cta--light .tw-cta__contact::before {
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), transparent 60%);
}

.tw-cta--light .tw-cta__contact-label { color: var(--ss-blue); }

.tw-cta--light .tw-cta__contact-item:hover { background: rgba(10, 76, 141, 0.06); }

.tw-cta--light .tw-cta__contact-icon {
	background: rgba(10, 76, 141, 0.08);
	border-color: rgba(10, 76, 141, 0.16);
	color: var(--ss-blue);
}

.tw-cta--light .tw-cta__contact-item:hover .tw-cta__contact-icon {
	background: var(--ss-blue);
	border-color: transparent;
	color: var(--ss-white);
}

.tw-cta--light .tw-cta__contact-item a,
.tw-cta--light .tw-cta__contact-item span { color: var(--ss-text); }

.tw-cta--light .tw-cta__contact-item a:hover { color: var(--ss-blue); }

/* =====================================================================
   Footer
   ===================================================================== */

.tw-footer {
	margin-top: 3.6rem;
	background:
		radial-gradient(ellipse at 20% 10%, rgba(60, 120, 220, 0.1), transparent 50%),
		radial-gradient(ellipse at 80% 90%, rgba(100, 60, 200, 0.07), transparent 50%),
		linear-gradient(155deg, #03060e 0%, #040c1c 50%, #050f1e 100%);
	border-top: 1px solid rgba(120, 180, 255, 0.12);
	border-radius: 2.6rem 2.6rem 0 0;
}

.tw-footer__heading,
.tw-footer__brand,
.tw-footer__brand--text,
.tw-footer__text,
.tw-footer__contact-item,
.tw-footer__contact-item a,
.tw-footer__copyright,
.tw-footer__madeby,
.tw-nav--footer .tw-nav__link { color: rgba(244, 250, 255, 0.94) !important; }

.tw-footer__contact-icon { color: rgba(226, 240, 255, 0.94) !important; }

.tw-footer__madeby a,
.tw-footer__contact-item a:hover,
.tw-nav--footer .tw-nav__link:hover,
.tw-nav--footer .tw-nav__link:focus-visible { color: var(--ss-white) !important; }

.tw-footer .tw-logo__image {
	filter: brightness(0) invert(1);
	opacity: 0.88;
	transition: opacity 0.22s ease;
}

.tw-footer .tw-logo__image:hover { opacity: 1; }

.tw-social__list--footer .tw-social__link {
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.26);
	color: #f8fcff;
}

.tw-social__list--footer .tw-social__link:hover {
	background: #f8fcff;
	color: #081227;
}

/* =====================================================================
   Subpage header
   ===================================================================== */

.tw-header-subpage {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	text-align: center;
	padding: clamp(7.5rem, 12vw, 13rem) 2.4rem clamp(4rem, 6vw, 6.5rem);
	background:
		radial-gradient(70rem 32rem at 50% -20%, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.00) 70%),
		linear-gradient(180deg, #dff4fb 0%, #c6e9f3 38%, #a7d9e9 100%);
	border: 0;
	box-shadow: none;
	border-radius: 0;
	color: var(--ss-navy, #082536);
}

.tw-header-subpage::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.00) 26%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.00) 42%);
}

.tw-header-subpage::after {
	content: "";
	position: absolute;
	left: -2%;
	bottom: -1px;
	width: 104%;
	height: clamp(5rem, 10vw, 10rem);
	z-index: 0;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23f7fdff' fill-opacity='0.96' d='M0,224L60,208C120,192,240,160,360,165.3C480,171,600,213,720,218.7C840,224,960,192,1080,176C1200,160,1320,160,1380,160L1440,160L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z'/%3E%3C/svg%3E") no-repeat bottom center / cover;
}

.tw-header-subpage__title {
	position: relative;
	z-index: 1;
	font-size: clamp(3.2rem, 5vw, 6.4rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.05;
	margin: 0;
	color: var(--ss-navy, #082536);
}

.tw-header-subpage__inner {
	position: relative;
	z-index: 2;
	max-width: min(100%, 96rem);
	margin-inline: auto;
	padding: clamp(2.8rem, 4vw, 4.6rem) clamp(2.2rem, 4vw, 4.4rem);
	border-radius: 2.8rem;
	border: 1px solid rgba(8, 37, 54, 0.08);
	background: rgba(255, 255, 255, 0.66);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 2.4rem 4.8rem rgba(8, 37, 54, 0.12);
	border-left: 0.8rem solid var(--ss-accent, #2c8fb2);
}

.tw-header-subpage__inner::after { display: none !important; content: none !important; }

.tw-header-subpage__eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1.2rem;
	margin: 0 0 1.4rem;
	border: 1px solid rgba(8, 37, 54, 0.10);
	border-radius: 10rem;
	background: rgba(255, 255, 255, 0.92);
	color: var(--ss-navy, #082536);
	font-size: 1.2rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.tw-header-subpage__eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1.2rem;
	margin: 0 0 1.4rem;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 10rem;
	background: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.92);
	font-size: 1.2rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

/* =====================================================================
   Misc
   ===================================================================== */

.tw-contact {
	background: transparent;
	border: 0;
	box-shadow: none;
}

.tw-whatsapp { box-shadow: 0 16px 28px rgba(10, 26, 44, 0.34); }

.tw-whatsapp ~ .tw-scroll-top,
body:has(.tw-whatsapp) .tw-scroll-top { bottom: 8.8rem; }

/* =====================================================================
   Responsive — tablet (≤ 991px)
   ===================================================================== */

@media (max-width: 991.98px) {
	.tw-header {
		top: 1rem;
		border-radius: 2rem;
		width: calc(100% - (var(--ss-gutter) * 2));
	}

	.tw-header__inner {
		min-height: 5.8rem;
		padding-inline: 1.6rem;
		padding-block: 0.6rem;
	}

	.tw-header__brand .tw-logo__image {
		height: 4rem;
		max-height: 4rem;
	}

	.tw-header .tw-nav__link { font-size: 1.46rem; }

	.tw-header-home { min-height: 100dvh; }
	.tw-header-home__inner { padding-block: clamp(6.4rem, 10vh, 9rem) 7.4rem; }
	.tw-header-home__title { font-size: clamp(3.8rem, 10vw, 5.6rem); }
	.tw-header-home__subtitle { font-size: clamp(1.6rem, 2.8vw, 2rem); }

	.tw-page-sections { gap: 2.4rem; }

	.tw-text--has-media .tw-text__layout { grid-template-columns: 1fr; }
	.tw-text__media,
	.tw-text__image,
	.tw-text__image--placeholder { min-height: 28rem; min-width: 0; }
	.tw-text#lets-create .tw-text__content { padding: 1.8rem; }

	.tw-text-media .container { display: flex; flex-direction: column; gap: 1.6rem; }

	.tw-footer { border-radius: 1.8rem 1.8rem 0 0; margin-top: 2.4rem; }

	/* Work grid: 2 col */
	.tw-work-pillars {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: clamp(14rem, 24vw, 22rem);
	}

	.tw-work-pillars li:nth-child(1) { grid-column: span 2; grid-row: span 1; }
	.tw-work-pillars li:nth-child(2),
	.tw-work-pillars li:nth-child(3),
	.tw-work-pillars li:nth-child(4),
	.tw-work-pillars li:nth-child(5) { grid-column: span 1; }
	.tw-work-pillars li:nth-child(6) { grid-column: span 2; }

	/* CTA stacked */
	.tw-cta--dark .container,
	.tw-cta--light .container { grid-template-columns: 1fr; gap: 3.2rem; }
}

@media (max-width: 782px) {
	.admin-bar .tw-header { top: calc(46px + 1rem); }
}

/* Hero switches to a stacked layout (video box on top, content below on the
   light page background) at ≤767.98px — recolor text for contrast. */
@media (max-width: 767.98px) {
	.tw-header-home { background: var(--ss-page-bg); }

	.tw-header-home__media--video iframe {
		width: 111.12vw;
		height: 62.5vw;
		min-width: 0;
		min-height: 0;
		transform: translate3d(-50%, -50%, 0) scale(1.5);
	}

	.tw-header-home__title {
		color: var(--ss-heading);
		text-shadow: none;
	}

	.tw-header-home__subtitle { color: var(--ss-text-muted); }

	.tw-header-home__badge {
		background: rgba(10, 30, 62, 0.07);
		border-color: rgba(10, 30, 62, 0.18);
		color: var(--ss-heading);
	}

	.tw-header-home__actions .btn--outline-white {
		background: rgba(12, 33, 58, 0.04);
		border-color: rgba(12, 33, 58, 0.35);
		color: var(--ss-heading);
	}

	.tw-header-home__actions .btn--outline-white:hover {
		background: var(--ss-navy-mid);
		border-color: var(--ss-navy-mid);
		color: var(--ss-white);
	}

	.tw-clients-marquee--hero .tw-clients-marquee__track span { color: rgba(11, 27, 47, 0.55); }

	.tw-clients-marquee--hero .tw-clients-marquee__track span::after { color: rgba(11, 27, 47, 0.22); }
}

/* =====================================================================
   Responsive — mobile (≤ 599px)
   ===================================================================== */

@media (max-width: 599.98px) {
	.tw-header { border-radius: 1.4rem; }

	.tw-header-home__inner { padding-block: clamp(7rem, 14vh, 10rem) 6.4rem; }

	.tw-header-home__badge { font-size: 1rem; padding: 0.4rem 1rem; }

	.tw-header-home__title { font-size: clamp(3.4rem, 12vw, 5rem); }

	.tw-header-home__subtitle { font-size: 1.6rem; max-width: 36ch; }

	.tw-header-home__actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		max-width: 32rem;
	}

	.tw-header-home__actions .btn {
		width: 100%;
		text-align: center;
		justify-content: center;
	}

	.tw-page-sections { gap: 1.6rem; }

	.tw-text__content h2 { font-size: clamp(2.8rem, 8vw, 4rem); }

	.tw-text#lets-create .tw-text__content { padding: 1.4rem; border-radius: 1.2rem; }

	.tw-cta { padding-block: clamp(4.8rem, 10vw, 8rem); }
	.tw-cta--dark .tw-cta__content h2 { font-size: clamp(3rem, 8vw, 4.8rem); }
	.tw-cta__actions { flex-direction: column; align-items: stretch; }
	.tw-cta__actions .btn { width: 100%; text-align: center; justify-content: center; }

	.tw-work-pillars {
		grid-template-columns: 1fr;
		grid-auto-rows: clamp(18rem, 52vw, 28rem);
	}

	.tw-work-pillars li:nth-child(n) { grid-column: span 1; grid-row: span 1; }

	.tw-work-grid { padding-block: clamp(3.6rem, 8vw, 6rem); }
	.tw-work-grid__title { font-size: clamp(3.2rem, 8vw, 5rem); letter-spacing: -0.03em; }

	.tw-footer { border-radius: 1.2rem 1.2rem 0 0; margin-top: 1.6rem; }
}