/* ==========================================================================
   Flowers at the Pearls — single-screen landing page
   Palette sampled directly from the brand logo:
     cerise  #D53D6E   forest  #3F6B5B   blush  #FAEBEE
   ========================================================================== */

:root {
	--cerise:       #D53D6E;
	--cerise-deep:  #B92C5B;
	--cerise-soft:  #F3C9D6;
	--forest:       #3F6B5B;
	--forest-deep:  #2E5245;
	--ink:          #432E34;
	--ink-soft:     #6B535A;
	--blush:        #FAEBEE;
	--blush-lift:   #FDF4F6;
	--cream:        #FFFCFD;

	--card-radius:  clamp(18px, 2.4vw, 30px);
	--shadow-card:  0 2px 6px rgba(67, 46, 52, .06),
	                0 18px 40px -12px rgba(67, 46, 52, .28),
	                0 40px 90px -30px rgba(67, 46, 52, .35);

	--font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
	--font-ui:      "Jost", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-ui);
	font-weight: 400;
	color: var(--ink);
	background-color: var(--blush);
	/* The screen is fixed height — nothing should ever scroll. */
	overflow: hidden;
	overscroll-behavior: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

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

.fatp-skip {
	position: absolute;
	top: -100px;
	left: 12px;
	z-index: 100;
	padding: .6rem 1rem;
	font-size: .85rem;
	color: var(--cream);
	background: var(--forest-deep);
	border-radius: 0 0 8px 8px;
	transition: top .2s ease;
}

.fatp-skip:focus {
	top: 0;
}

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

/* --------------------------------------------------------------------------
   Stage — exactly one viewport tall
   -------------------------------------------------------------------------- */

.fatp-stage {
	position: relative;
	display: grid;
	grid-template-rows: 1fr auto;
	width: 100%;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	isolation: isolate;
}

/* --------------------------------------------------------------------------
   Video background
   -------------------------------------------------------------------------- */

.fatp-video {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--blush);
}

.fatp-video__el {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* The footage is a pale cream watercolour, so the scrim's job is to *deepen*
   it — a green vignette that pushes the frame back, lets the blush card come
   forward, and darkens the lower edge enough for the footer credit to read. */
.fatp-video__scrim {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(130% 105% at 50% 42%, rgba(46, 82, 69, 0) 30%, rgba(46, 82, 69, .34) 100%),
		linear-gradient(to bottom, rgba(46, 82, 69, .14) 0%, rgba(46, 82, 69, .06) 32%, rgba(46, 82, 69, .30) 100%);
}

/* --------------------------------------------------------------------------
   Centred information card
   -------------------------------------------------------------------------- */

.fatp-main {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	min-height: 0;
	padding: clamp(14px, 3vh, 40px) clamp(14px, 4vw, 40px) 0;
}

.fatp-card {
	position: relative;
	width: min(460px, 100%);
	max-height: 100%;
	padding: 0 clamp(20px, 5vw, 40px) clamp(20px, 3.4vh, 34px);
	text-align: center;
	background: var(--blush);
	border-radius: var(--card-radius);
	box-shadow: var(--shadow-card);
	animation: fatp-rise .9s cubic-bezier(.2, .7, .25, 1) both;
}

/* A hairline of brand colour riding the very top of the card. */
.fatp-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 12%;
	right: 12%;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--cerise) 30%, var(--forest) 70%, transparent);
	border-radius: 3px;
	z-index: 2;
}

@keyframes fatp-rise {
	from { opacity: 0; transform: translateY(18px) scale(.985); }
	to   { opacity: 1; transform: none; }
}

/* --- Logo ---------------------------------------------------------------- */

.fatp-card__brand {
	position: relative;
	margin: 0;
	/* Pull the artwork out to the card edges so it reads as one surface. */
	margin-inline: calc(clamp(20px, 5vw, 40px) * -1);
	border-radius: var(--card-radius) var(--card-radius) 0 0;
	overflow: hidden;
}

/* The card background is set to the logo artwork's own background colour
   (#FAEBEE, sampled from its edges), so the image dissolves into the card
   with no visible seam and the watercolour bleeds off the rounded corner. */

/* Sized by width first, capped by height. Never object-fit: contain here —
   that would letterbox the artwork inside a wider box on short screens. */
.fatp-card__logo {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 23svh;
	margin-inline: auto;
}

/* --- Tagline and rule ---------------------------------------------------- */

.fatp-card__tagline {
	margin: -0.4rem 0 0;
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(.95rem, 2.4vw, 1.2rem);
	line-height: 1.35;
	color: var(--forest);
}

.fatp-rule {
	width: clamp(60px, 22%, 110px);
	height: 0;
	margin: clamp(12px, 2.2vh, 22px) auto;
	border: 0;
	border-top: 1px solid var(--cerise-soft);
	position: relative;
}

.fatp-rule::after {
	content: "✿";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0 .5em;
	font-size: .7rem;
	line-height: 1;
	color: var(--cerise);
	background: var(--blush);
}

/* --- Shop photos --------------------------------------------------------- */

/* Photos are shown whole — never cropped. Each one is scaled down until it
   fits the height the one-viewport budget allows, and the frame shrinks to
   the picture rather than the picture being cut to fill a frame. */
.fatp-photos {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: clamp(6px, 1.2vw, 10px);
	margin: 0 0 clamp(14px, 2.4vh, 24px);
}

.fatp-photo {
	position: relative;
	display: block;
	/* Hug the picture: no letterbox bars, no cropping. */
	flex: 0 1 auto;
	min-width: 0;
	padding: 0;
	overflow: hidden;
	line-height: 0;
	cursor: pointer;
	background: var(--blush-lift);
	border: 1px solid var(--cerise-soft);
	border-radius: clamp(10px, 1.6vw, 16px);
	box-shadow: 0 4px 14px -8px rgba(67, 46, 52, .5);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* No width/height of its own — the intrinsic ratio drives the box, and the
   two maximums scale the whole picture down until it fits. */
.fatp-photo__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 24svh;
	transition: filter .3s ease;
}

/* With two or three photos the column width does the limiting, so lift the
   height cap and let each picture keep its own proportions. */
.fatp-photos--grid .fatp-photo {
	flex: 1 1 0;
}

.fatp-photos--grid .fatp-photo__img {
	width: 100%;
	max-height: none;
}

.fatp-photo:hover,
.fatp-photo:focus-visible {
	transform: translateY(-2px);
	border-color: var(--cerise);
	box-shadow: 0 10px 22px -10px rgba(67, 46, 52, .55);
}

/* Brightness rather than a zoom — a scale would crop the picture on hover,
   which is exactly what this gallery is meant to avoid. */
.fatp-photo:hover .fatp-photo__img,
.fatp-photo:focus-visible .fatp-photo__img {
	filter: brightness(1.06) saturate(1.05);
}

/* Magnifier badge, revealed on hover and always visible on touch. */
.fatp-photo__zoom {
	position: absolute;
	right: 8px;
	bottom: 8px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	color: var(--cream);
	background: rgba(46, 82, 69, .72);
	border-radius: 50%;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .2s ease, transform .2s ease;
}

.fatp-photo__zoom svg {
	width: 16px;
	height: 16px;
}

.fatp-photo:hover .fatp-photo__zoom,
.fatp-photo:focus-visible .fatp-photo__zoom {
	opacity: 1;
	transform: none;
}

@media (hover: none) {
	.fatp-photo__zoom {
		opacity: 1;
		transform: none;
	}
}

/* --- Lightbox ------------------------------------------------------------ */

.fatp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: grid;
	place-items: center;
	padding: clamp(16px, 4vw, 48px);
	background: rgba(30, 54, 45, .88);
	opacity: 0;
	transition: opacity .28s ease;
}

.fatp-lightbox.is-open {
	opacity: 1;
}

.fatp-lightbox[hidden] {
	display: none;
}

.fatp-lightbox__figure {
	max-width: min(1100px, 100%);
	max-height: 100%;
	margin: 0;
	text-align: center;
}

.fatp-lightbox__img {
	max-width: 100%;
	/* Leave room for the caption beneath. */
	max-height: calc(100svh - clamp(96px, 18vh, 150px));
	margin: 0 auto;
	object-fit: contain;
	border-radius: clamp(8px, 1.2vw, 14px);
	box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6);
	transform: scale(.97);
	transition: transform .28s cubic-bezier(.2, .7, .25, 1);
}

.fatp-lightbox.is-open .fatp-lightbox__img {
	transform: none;
}

.fatp-lightbox__caption {
	margin-top: clamp(10px, 1.8vh, 16px);
	font-family: var(--font-display);
	font-style: italic;
	font-size: clamp(.9rem, 2.2vw, 1.1rem);
	letter-spacing: .01em;
	color: var(--cream);
}

.fatp-lightbox__caption[hidden] {
	display: none;
}

.fatp-lightbox__close {
	position: absolute;
	top: clamp(10px, 2.5vw, 22px);
	right: clamp(10px, 2.5vw, 22px);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--cream);
	cursor: pointer;
	background: rgba(255, 252, 253, .14);
	border: 1px solid rgba(255, 252, 253, .3);
	border-radius: 50%;
	transition: background-color .2s ease, transform .2s ease;
}

.fatp-lightbox__close svg {
	width: 20px;
	height: 20px;
}

.fatp-lightbox__close:hover {
	background: var(--cerise);
	border-color: var(--cerise);
	transform: rotate(90deg);
}

body.fatp-lightbox-open {
	overflow: hidden;
}

/* --- Address ------------------------------------------------------------- */

.fatp-address {
	font-style: normal;
	margin: 0 0 clamp(14px, 2.4vh, 24px);
}

.fatp-address__link {
	display: inline-flex;
	align-items: flex-start;
	justify-content: center;
	gap: .5em;
	max-width: 38ch;
	margin: 0 auto;
	font-size: clamp(.82rem, 2.1vw, .95rem);
	font-weight: 300;
	line-height: 1.55;
	letter-spacing: .012em;
	color: var(--ink-soft);
	transition: color .2s ease;
}

.fatp-address__link:hover {
	color: var(--cerise-deep);
}

.fatp-address__pin {
	flex: none;
	width: 1.05em;
	height: 1.05em;
	margin-top: .18em;
	color: var(--cerise);
}

/* --- Contact buttons ----------------------------------------------------- */

.fatp-contact {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(8px, 1.6vw, 14px);
}

.fatp-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	min-height: 48px;
	padding: clamp(9px, 1.5vh, 13px) clamp(10px, 2vw, 18px);
	color: var(--cream);
	border-radius: 999px;
	box-shadow: 0 6px 16px -6px rgba(67, 46, 52, .45);
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.fatp-btn--whatsapp { background-color: var(--forest); }
.fatp-btn--phone    { background-color: var(--cerise); }

.fatp-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -8px rgba(67, 46, 52, .5);
}

.fatp-btn--whatsapp:hover { background-color: var(--forest-deep); }
.fatp-btn--phone:hover    { background-color: var(--cerise-deep); }

.fatp-btn:active {
	transform: translateY(0);
}

.fatp-btn__icon {
	flex: none;
	width: clamp(18px, 4.4vw, 22px);
	height: clamp(18px, 4.4vw, 22px);
}

.fatp-btn__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.15;
	text-align: left;
}

.fatp-btn__label {
	font-size: clamp(.58rem, 1.5vw, .66rem);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .78;
}

.fatp-btn__value {
	font-size: clamp(.8rem, 2.2vw, .95rem);
	font-weight: 500;
	letter-spacing: .015em;
	white-space: nowrap;
}

/* --- Social -------------------------------------------------------------- */

.fatp-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(8px, 2vw, 14px);
	margin-top: clamp(12px, 2.2vh, 22px);
}

.fatp-social__link {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	min-height: 40px;
	padding: .45em 1.05em .45em .8em;
	font-size: clamp(.75rem, 1.9vw, .85rem);
	font-weight: 500;
	letter-spacing: .05em;
	color: var(--forest-deep);
	background: var(--blush-lift);
	border: 1px solid var(--cerise-soft);
	border-radius: 999px;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.fatp-social__link:hover {
	color: var(--cream);
	background: var(--cerise);
	border-color: var(--cerise);
	transform: translateY(-2px);
}

.fatp-social__icon {
	flex: none;
	width: 1.35em;
	height: 1.35em;
	color: var(--cerise);
	transition: color .2s ease;
}

.fatp-social__link:hover .fatp-social__icon {
	color: var(--cream);
}

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

.fatp-footer {
	position: relative;
	z-index: 1;
	padding: clamp(12px, 2.4vh, 22px) 16px clamp(10px, 2vh, 18px);
	padding-bottom: max(clamp(10px, 2vh, 18px), env(safe-area-inset-bottom));
	text-align: center;
}

/* Its own scrim — the footage runs pale, and cream text needs something to
   sit on no matter which frame is showing. */
.fatp-footer::before {
	content: "";
	position: absolute;
	inset: -40px 0 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(to top, rgba(38, 68, 57, .74) 0%, rgba(38, 68, 57, .42) 55%, rgba(38, 68, 57, 0) 100%);
}

.fatp-footer__credit {
	margin: 0;
	font-size: clamp(.72rem, 1.7vw, .8rem);
	font-weight: 400;
	letter-spacing: .09em;
	color: var(--cream);
	text-shadow: 0 1px 10px rgba(46, 82, 69, .75);
}

.fatp-footer__credit a {
	padding-bottom: 1px;
	border-bottom: 1px solid rgba(255, 252, 253, .4);
	transition: color .2s ease, border-color .2s ease;
}

.fatp-footer__credit a:hover {
	color: var(--cerise-soft);
	border-color: var(--cerise-soft);
}

/* --------------------------------------------------------------------------
   Responsive refinements
   -------------------------------------------------------------------------- */

/* Tablet and up — a touch more room to breathe. */
@media (min-width: 768px) {
	.fatp-card {
		width: min(500px, 100%);
	}

	.fatp-card__logo {
		max-height: 26svh;
	}
}

/* Tall screens (tablet portrait, large desktops) can carry a bigger card,
   and enough spare height to show the photo larger. */
@media (min-width: 700px) and (min-height: 860px) {
	.fatp-card {
		width: min(560px, 100%);
	}

	.fatp-photo__img {
		max-height: 28svh;
	}
}

/* Small phones — stack the two contact buttons. */
@media (max-width: 400px) {
	.fatp-contact {
		grid-template-columns: 1fr;
	}

	.fatp-btn {
		justify-content: flex-start;
		padding-left: clamp(18px, 8vw, 28px);
	}

	.fatp-social__link {
		padding: .4em .85em .4em .7em;
	}
}

/* Short viewports (landscape phones, small laptops) — compress hard so the
   whole card still fits inside one screen without scrolling. */
@media (max-height: 700px) {
	.fatp-card__logo { max-height: 21svh; }
	.fatp-photo__img { max-height: 21svh; }
	.fatp-card__tagline { font-size: clamp(.85rem, 2vw, 1rem); }
	.fatp-rule { margin-block: clamp(8px, 1.6vh, 14px); }
}

@media (max-height: 560px) {
	.fatp-card {
		width: min(560px, 100%);
		padding-bottom: clamp(14px, 3vh, 22px);
	}

	.fatp-card__logo { max-height: 26svh; }
	.fatp-card__tagline { display: none; }
	/* No vertical room for photos here — the lightbox is unreachable, but the
	   address and contact buttons matter more on a short landscape screen.
	   Hiding these also keeps the two-column grid below at four rows. */
	.fatp-photos { display: none; }
	.fatp-rule { margin-block: 8px; }

	.fatp-address__link {
		max-width: 60ch;
		font-size: .78rem;
		line-height: 1.4;
	}

	.fatp-address { margin-bottom: 12px; }
	.fatp-social { margin-top: 10px; }
	.fatp-btn { min-height: 42px; }
	.fatp-social__link { min-height: 36px; }
	.fatp-footer { padding-block: 10px; }
}

/* Short *and* wide — landscape phones and short laptops. Vertical space is the
   scarce resource here, so the logo moves beside the details instead of above
   them. The tagline is already hidden by the rule above, which leaves exactly
   four items (rule, address, buttons, social) to stack in the second column. */
@media (max-height: 560px) and (min-width: 620px) {
	.fatp-card {
		display: grid;
		grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
		align-items: center;
		gap: 0 clamp(18px, 3vw, 32px);
		width: min(780px, 100%);
		padding: clamp(14px, 3vh, 22px) clamp(22px, 3.5vw, 34px);
		text-align: left;
	}

	.fatp-card__brand {
		grid-column: 1;
		grid-row: 1 / span 4;
		margin-inline: 0;
		border-radius: calc(var(--card-radius) - 8px);
	}

	.fatp-card__logo {
		max-height: 66svh;
		max-width: 100%;
	}

	.fatp-rule {
		margin-inline: 0;
		margin-top: 0;
	}

	.fatp-address__link {
		justify-content: flex-start;
		max-width: none;
	}

	.fatp-social {
		justify-content: flex-start;
	}
}

/* --------------------------------------------------------------------------
   Preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	/* Freeze the footage and show the poster instead. */
	.fatp-video__el {
		display: none;
	}

	.fatp-video {
		background-image: var(--poster, none);
		background-size: cover;
		background-position: center;
	}
}

/* Print — the essentials only. */
@media print {
	.fatp-video,
	.fatp-video__scrim {
		display: none;
	}

	.fatp-stage {
		height: auto;
	}

	.fatp-card {
		box-shadow: none;
		border: 1px solid var(--cerise-soft);
	}

	.fatp-footer__credit {
		color: var(--ink);
		text-shadow: none;
	}
}