.c-red { color: #db0a15; }
.c-blue { color: #014EA3; }
.c-yellow { color: #f5c400; }
.c-gold { color: #fac12b; }

.about-wrap {
	width: min(var(--wrap), calc(100% - 48px));
	margin-inline: auto;
	position: relative;
	z-index: 1;
}

.about-kicker {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 0 18px;
	font-family: "Linotte", "Linotte-Bold", "Fredoka", sans-serif;
	font-size: 25px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #111;
	line-height: 1;
}

.about-hero-copy .about-kicker,
.about-story-copy .about-kicker {
	justify-content: flex-start;
}

.about-kicker--light {
	color: #fff;
}

.about-spark {
	width: 18px;
	height: 18px;
	object-fit: contain;
	flex-shrink: 0;
}

.about-spark-left {
	transform: rotate(-137deg);
}

.about-spark-right {
	transform: rotate(45deg);
}

.about-kicker--gold .about-spark {
	filter: brightness(0) saturate(100%) invert(77%) sepia(54%) saturate(748%) hue-rotate(359deg) brightness(101%) contrast(96%);
}

/* Hero — Figma frame 1920×727, photo is a right-edge D (rounded left only) */
.about-hero {
	position: relative;
	overflow: hidden;
	background: #fff;
	height: 727px;
	min-height: 727px;
	padding: 0;
}

.about-hero .about-wrap {
	z-index: 3;
	height: 100%;
	display: flex;
	align-items: center;
}

.about-hero-copy {
	position: relative;
	z-index: 3;
	padding: 48px 0;
	max-width: 540px;
}

.about-hero-copy .about-kicker {
	font-size: 16px;
	margin-bottom: 14px;
}

.about-hero-copy h1 {
	margin: 0 0 14px;
	font-family: "Linotte", "Fredoka", sans-serif;
	font-size: clamp(2.4rem, 4.8vw, 64px);
	line-height: 1.08;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #111;
	text-transform: uppercase;
}

.about-hero-copy h1 strong {
	font-weight: 900;
}

.about-hero-role,
.about-hero-tagline {
	margin: 0;
	font-family: "Linotte", "Fredoka", sans-serif;
	font-size: clamp(1.25rem, 2.2vw, 32px);
	line-height: 1.28;
	font-weight: 700;
}

.about-hero-role { color: #014EA3; }
.about-hero-tagline { color: #111; margin-bottom: 22px; }

.about-hero-text {
	max-width: 520px;
	margin: 0 0 28px;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: 0;
	color: #111;
}

.about-hero-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 51px;
	padding: 12px 18px 12px 16px;
	border-radius: 10px;
	background: #db0a15;
	color: #fff;
	font-family: "Inter", "Poppins", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.about-hero-btn:hover { color: #fff; filter: brightness(0.92); }
.about-hero-btn img { width: 20px; height: 20px; object-fit: contain; }

.about-hero-photo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	width: 58%;
	height: 100%;
	margin: 0;
	overflow: hidden;
	border-radius: 363px 0 0 363px;
}

.about-hero-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 55% 48%;
	border-radius: 0;
	display: block;
}

.about-doodle {
	position: absolute;
	pointer-events: none;
	z-index: 1;
	object-fit: contain;
}

.about-doodle-star-red { left: 4%; top: 18%; width: 32px; transform: rotate(-19deg); }
.about-doodle-star-blue { left: 22%; top: 10%; width: 22px; }
.about-doodle-spiral { left: 42%; top: 16%; width: 22px; height: 64px; transform: rotate(28deg); }
.about-doodle-spark { left: 38%; top: 58%; width: 18px; transform: rotate(37deg); }
.about-doodle-star-yellow { left: 5%; bottom: 10%; width: 36px; }
.about-doodle-star-blue-2 { left: 8%; bottom: 18%; width: 20px; }
.about-doodle-blob { left: -70px; bottom: -40px; width: 160px; height: 210px; z-index: 0; }

/* Story */
.about-story {
	position: relative;
	overflow: hidden;
	color: #fff;
	padding: 72px 0 80px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
}

.about-story-grid {
	display: grid;
	grid-template-columns: minmax(280px, 621px) minmax(0, 1fr);
	gap: 48px 40px;
	align-items: center;
}

.about-story-copy h2 {
	margin: 0 0 28px;
	font-size: clamp(2.1rem, 4vw, 60px);
	line-height: 1.18;
	color: #fff;
}

.about-story-copy p {
	margin: 0 0 1.1em;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.81;
	letter-spacing: 0.54px;
	color: #fff;
}

.about-story-collage {
	position: relative;
	min-height: 540px;
}

.about-story-shot {
	position: absolute;
	margin: 0;
}

.about-story-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 10px solid #fff;
	border-radius: 38px;
	display: block;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.about-story-shot-1 {
	left: 0;
	top: 0;
	width: 42%;
	height: 86%;
	transform: rotate(-3.11deg);
	z-index: 1;
}

.about-story-shot-2 {
	right: 0;
	top: 0;
	width: 48%;
	height: 52%;
	transform: rotate(2.82deg);
	z-index: 2;
}

.about-story-shot-3 {
	right: 2%;
	bottom: 2%;
	width: 54%;
	height: 50%;
	transform: rotate(3.53deg);
	z-index: 3;
}

/* Journey */
.about-journey {
	background: #fff;
	padding: 72px 0 80px;
	text-align: center;
}

.about-journey h2 {
	margin: 0 0 48px;
	font-size: clamp(2.1rem, 4vw, 60px);
	line-height: 1.15;
	color: #111;
}

.about-journey-track {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	padding-top: 8px;
}

.about-journey-line {
	position: absolute;
	left: calc((100% - 48px) / 10);
	top: 8px;
	width: calc(80% + 9.6px);
	height: 137px;
	z-index: 0;
	pointer-events: none;
	max-width: none;
}

.about-journey-track::before {
	display: none;
}

.about-milestone {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.about-milestone-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 137px;
	height: 137px;
	border-radius: 50%;
	margin-bottom: 18px;
	flex-shrink: 0;
}

.about-milestone-1 .about-milestone-icon,
.about-milestone-4 .about-milestone-icon { background: #014EA3; }
.about-milestone-2 .about-milestone-icon,
.about-milestone-5 .about-milestone-icon { background: #db0a15; }
.about-milestone-3 .about-milestone-icon { background: #fac12b; }

.about-milestone-icon img {
	width: 62px;
	height: 62px;
	object-fit: contain;
}

.about-milestone strong {
	display: block;
	margin: 0 0 8px;
	font-family: "Poppins", sans-serif;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 0.9px;
	color: #111;
}

.about-milestone p {
	margin: 0;
	max-width: 224px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.48;
	letter-spacing: 0.54px;
	color: #111;
}

/* Why choose */
.about-why {
	padding: 72px 0 80px;
	text-align: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
}

.about-why h2 {
	margin: 0 0 48px;
	font-size: clamp(2.1rem, 4vw, 60px);
	line-height: 1.15;
	color: #fff;
}

.about-why-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 23px;
}

.about-why-card {
	background: #fff;
	border-radius: 30px;
	box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
	padding: 28px 16px 22px;
	min-height: 330px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.about-why-icon {
	width: auto;
	height: 90px;
	max-width: 129px;
	object-fit: contain;
	margin-bottom: 18px;
}

.about-why-card h3 {
	margin: 0 0 12px;
	font-family: "Linotte", "Linotte-Bold", "Fredoka", sans-serif;
	font-size: clamp(1.15rem, 1.7vw, 33px);
	line-height: 1.11;
	font-weight: 700;
	color: #111;
}

.about-why-card p {
	margin: 0;
	font-size: 16px;
	line-height: 1.49;
	letter-spacing: 0.48px;
	color: #111;
}

/* Occasions */
.about-occasions {
	background: #fff;
	padding: 72px 0 80px;
	text-align: center;
}

.about-occasions h2 {
	margin: 0 0 48px;
	font-size: clamp(1.85rem, 3.6vw, 60px);
	line-height: 1.15;
	color: #111;
}

.about-occasions-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px 20px;
}

.about-occasion {
	flex: 0 0 calc((100% - 60px) / 4);
	width: calc((100% - 60px) / 4);
	max-width: none;
	background: #fff;
	border: 1px solid #bdbdbd;
	border-radius: 30px;
	overflow: hidden;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
	text-align: center;
}

.about-occasion img {
	width: 100%;
	height: auto;
	aspect-ratio: 397 / 263;
	object-fit: cover;
	border-radius: 30px 30px 0 0;
}

.about-occasion h3 {
	margin: 0;
	padding: 22px 12px 26px;
	font-family: "Linotte", "Linotte-Bold", "Fredoka", sans-serif;
	font-size: clamp(1.15rem, 1.8vw, 30px);
	line-height: 1.11;
	color: #111;
}

/* Gallery */
.about-gallery {
	padding: 72px 0 80px;
	text-align: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
}

.about-gallery h2 {
	margin: 0 0 48px;
	font-size: clamp(2.1rem, 4vw, 60px);
	line-height: 1.15;
	color: #fff;
}

.about-gallery-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-bottom: 40px;
}

.about-gallery-shot {
	margin: 0;
	flex: 1 1 0;
	max-width: 278px;
	background: #fff;
	border-radius: 10px;
	padding: 8px;
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
}

.about-gallery-shot img {
	width: 100%;
	aspect-ratio: 256 / 272;
	object-fit: cover;
	border-radius: 8px;
}

.about-gallery-shot-1 { transform: rotate(-4.89deg); }
.about-gallery-shot-2 { transform: rotate(4.66deg); }
.about-gallery-shot-3 { transform: rotate(-1.84deg); }
.about-gallery-shot-4 { transform: rotate(6.35deg); }
.about-gallery-shot-5 { transform: rotate(-1.84deg); }
.about-gallery-shot-6 { transform: rotate(-4.31deg); }

.about-gallery-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 215px;
	min-height: 51px;
	padding: 12px 20px;
	border: 0;
	border-radius: 10px;
	background: #db0a15;
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	cursor: pointer;
}

.about-gallery-more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 40px;
}

.about-gallery-more[hidden] {
	display: none !important;
}

.about-gallery-more .about-gallery-shot {
	flex: 0 1 calc((100% - 90px) / 6);
	width: calc((100% - 90px) / 6);
	max-width: 278px;
}

.about-gallery-btn:hover { color: #fff; filter: brightness(0.92); }
.about-gallery-btn img { width: 22px; height: 20px; object-fit: contain; }

/* Testimonials */
.about-quotes {
	background: #fff;
	padding: 72px 0 140px;
	text-align: center;
	position: relative;
	z-index: 1;
}

.about-quotes h2 {
	margin: 0 0 48px;
	font-size: clamp(2.1rem, 4vw, 60px);
	line-height: 1.15;
	color: #111;
}

.about-quotes-viewport {
	overflow: hidden;
	width: 100%;
}

.about-quotes-track {
	display: flex;
	gap: 18px;
	align-items: stretch;
	transition: transform 0.5s ease;
	will-change: transform;
}

.about-quote {
	position: relative;
	flex: 0 0 calc((100% - 36px) / 3);
	width: calc((100% - 36px) / 3);
	max-width: none;
	min-width: 0;
	background: #fff;
	border-radius: 35px;
	box-shadow: 0 3px 11.3px rgba(0, 0, 0, 0.25);
	padding: 28px 32px 24px;
	text-align: left;
	min-height: 309px;
	color: #111;
	box-sizing: border-box;
}

.about-quote.is-featured {
	background: #014EA3;
	color: #fff;
}

.about-quote-mark {
	position: absolute;
	top: 20px;
	right: 24px;
	width: 53px;
	height: 53px;
	opacity: 0.6;
}

.about-quote.is-featured .about-quote-mark {
	filter: brightness(10);
	opacity: 0.85;
}

.about-quote h3 {
	margin: 0;
	font-family: "Poppins", sans-serif;
	font-size: 27px;
	font-weight: 500;
	line-height: 1.2;
}

.about-quote-role {
	margin: 4px 0 16px;
	font-size: 16px;
}

.about-quote p {
	margin: 0 0 18px;
	font-size: 17px;
	line-height: 28px;
	max-width: 446px;
}

.about-quote-stars {
	display: block;
	width: 127px;
	height: 28px;
	margin-left: auto;
	background-color: #014EA3;
	-webkit-mask: url("../img/about/stars.png") right center / contain no-repeat;
	mask: url("../img/about/stars.png") right center / contain no-repeat;
}

.about-quote.is-featured .about-quote-stars {
	background-color: #fff;
}

.about-quotes-nav {
	display: flex;
	justify-content: center;
	gap: 18px;
	margin-top: 28px;
}

.about-quotes-btn {
	width: 57px;
	height: 57px;
	border: 0;
	border-radius: 50%;
	background: #f3a3a8;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
}

.about-quotes-next { background: #db0a15; }
.about-quotes-prev img { transform: rotate(180deg); filter: brightness(10); }
.about-quotes-next img { filter: brightness(10); }
.about-quotes-btn:hover { filter: brightness(0.95); }

/* CTA */
.about-cta {
	position: relative;
	z-index: 2;
	overflow: visible;
	background: #db0a15;
	color: #fff;
	height: 357px;
	padding: 0;
	margin: 0 0 56px;
}

.about-cta-inner {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-right: max(16px, calc(380px - (100vw - min(var(--wrap), calc(100% - 48px))) / 2));
}

.about-cta-title {
	margin: 0 0 14px;
	font-family: "Linotte", "Linotte-Bold", "Fredoka", sans-serif;
	font-size: clamp(26px, 2.4vw, 40px);
	line-height: 1.1;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0;
	white-space: nowrap;
}

.about-cta-row {
	display: flex;
	align-items: center;
	gap: 28px 36px;
}

.about-cta-text {
	margin: 0;
	flex: 1 1 auto;
	max-width: 34em;
	font-family: "Poppins", sans-serif;
	font-size: clamp(14px, 1.05vw, 18px);
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: 0;
	color: #fff;
}

.about-cta-action {
	position: relative;
	flex: 0 0 auto;
}

.about-cta-spark {
	position: absolute;
	right: -18px;
	top: -46px;
	width: 56px;
	height: 58px;
	object-fit: contain;
	pointer-events: none;
	filter: brightness(0) invert(1);
}

.about-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 280px;
	min-height: 72px;
	padding: 16px 26px;
	border-radius: 12px;
	background: #fac12b;
	color: #111;
	font-family: "Inter", "Poppins", sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}

.about-cta-btn:hover { color: #111; filter: brightness(0.96); }
.about-cta-btn img { width: 28px; height: 12px; object-fit: contain; }

.about-cta-portrait {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 0;
	width: 367px;
	height: 471px;
	z-index: 3;
	pointer-events: none;
	overflow: visible;
}

.about-cta-portrait img {
	max-width: none;
	width: 110%;
	height: 100%;
	object-fit: contain;
	object-position: right bottom;
	display: block;
}

@media (max-width: 1200px) {
	.about-hero { height: 640px; min-height: 640px; }
	.about-hero-photo { width: 54%; border-radius: 320px 0 0 320px; }
	.about-occasions-grid { gap: 24px 16px; }
	.about-occasion { flex-basis: calc((100% - 48px) / 4); width: calc((100% - 48px) / 4); }
	.about-cta-title { font-size: clamp(22px, 2.2vw, 32px); }
	.about-why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.about-journey-track { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
	.about-journey-line { display: none; }
	.about-cta-portrait { width: 300px; height: 390px; }
	.about-cta-btn { min-width: 250px; min-height: 64px; font-size: 16px; }
}

@media (max-width: 980px) {
	.about-hero-grid,
	.about-story-grid {
		grid-template-columns: 1fr;
	}

	.about-hero {
		height: auto;
		min-height: 0;
		padding-bottom: 0;
		display: flex;
		flex-direction: column;
	}
	.about-hero .about-wrap {
		height: auto;
		display: block;
		order: 1;
	}
	.about-hero-photo { order: 2; }
	.about-hero-copy { max-width: none; padding: 40px 0 24px; }
	.about-hero-photo {
		position: relative;
		width: 100%;
		height: 420px;
		min-height: 420px;
		margin: 0;
		border-radius: 80px 0 0 80px;
	}
	.about-doodle-blob { display: none; }
	.about-doodle { display: none; }
	.about-cta-title { white-space: normal; }
	.about-occasions-grid { gap: 24px 20px; }
	.about-occasion { flex-basis: calc((100% - 20px) / 2); width: calc((100% - 20px) / 2); }
	.about-story-collage { min-height: 460px; }
	.about-gallery-row { flex-wrap: wrap; }
	.about-gallery-shot { max-width: calc(33% - 12px); flex: 1 1 calc(33% - 12px); }
	.about-gallery-more .about-gallery-shot {
		width: auto;
		max-width: calc(33% - 12px);
		flex: 1 1 calc(33% - 12px);
	}
	.about-quotes-viewport { max-width: 560px; margin-inline: auto; }
	.about-quote {
		flex-basis: 100%;
		width: 100%;
		min-height: 0;
	}
	.about-cta {
		height: auto;
		display: block;
		padding: 48px 24px 0;
		overflow: visible;
		text-align: center;
	}
	.about-cta-inner {
		height: auto;
		padding-right: 0;
		align-items: center;
	}
	.about-cta-title {
		white-space: normal;
		font-size: clamp(1.4rem, 6vw, 32px);
	}
	.about-cta-row {
		flex-direction: column;
		align-items: center;
	}
	.about-cta-text { max-width: 36rem; }
	.about-cta-action { justify-self: center; }
	.about-cta-portrait {
		position: relative;
		right: auto;
		bottom: auto;
		width: min(280px, 70vw);
		height: auto;
		margin: 12px auto 0;
	}
	.about-cta-portrait img {
		width: 100%;
		height: auto;
		max-width: 100%;
	}
}

@media (max-width: 760px) {
	.about-why-grid,
	.about-journey-track { grid-template-columns: 1fr 1fr; }
	.about-gallery-shot,
	.about-gallery-shot-1,
	.about-gallery-shot-2,
	.about-gallery-shot-3,
	.about-gallery-shot-4,
	.about-gallery-shot-5,
	.about-gallery-shot-6 {
		transform: none;
		max-width: calc(50% - 8px);
		flex: 1 1 calc(50% - 8px);
	}
	.about-gallery-more .about-gallery-shot {
		width: auto;
		max-width: calc(50% - 8px);
		flex: 1 1 calc(50% - 8px);
	}
	.about-cta-btn { min-width: 0; width: 100%; font-size: 18px; min-height: 64px; }
	.about-hero-photo { height: 280px; min-height: 280px; }
	.about-hero-copy { padding-bottom: 24px; }
	.about-story-shot-1,
	.about-story-shot-2,
	.about-story-shot-3 {
		position: relative;
		width: 100%;
		height: auto;
		left: auto;
		right: auto;
		top: auto;
		bottom: auto;
		transform: none;
		margin-bottom: 16px;
	}
	.about-story-collage { min-height: 0; }
	.about-story-shot img { height: 240px; }
}

@media (max-width: 520px) {
	.about-why-grid,
	.about-journey-track { grid-template-columns: 1fr; }
	.about-wrap { width: min(var(--wrap), calc(100% - 28px)); }
	.about-kicker { font-size: 16px; }
	.about-occasion { flex-basis: 100%; width: 100%; }
	.about-hero-btn { width: 100%; }
}