/* Brochure page, on top of lp.css. Follows Figma "Brochure v2": Cormorant Garamond headings, Poppins body, spreads of photo + page. */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/cormorant.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/cormorant-italic.woff2) format('woff2'); }

.wlb {
	--sand: #e3e0db;
	--gold: #f6d49f;
	--serif: 'Cormorant Garamond', Georgia, serif;
}
.wlb h1, .wlb h2, .wlb h3 { font-family: var(--serif); font-weight: 400; color: var(--ch); line-height: 1.1; text-wrap: balance; }
.wlb h2 { font-size: 50px; }
.wlb .wlb-xl { font-size: 60px; line-height: 1.05; }
.wlb-h { font-size: 40px; }
.wlb p { font-size: 15px; line-height: 1.85; }

.wlb-label { display: block; font: 500 12px/1.4 'poppins', sans-serif; letter-spacing: .02em; color: var(--cu); }
.wlb-gold { color: var(--gold); }
.wlb-cream { background: var(--sand); }
.wlb-dark { background: var(--ch); color: var(--sand); }
.wlb-dark h2, .wlb-dark h3 { color: #fff; }

/* Sentence case, like the brochure (no all-caps labels) */
.wlb .wlp-btn { text-transform: none; letter-spacing: .02em; font-size: 13px; }
.wlb .wlp-btn-lg { font-size: 14px; }
.wlb .wlp-call { letter-spacing: .02em; }
.wlb .wlp-call span { text-transform: none; }

.wlb-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.wlb-link { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1.4 'poppins', sans-serif; text-decoration: none; }
.wlb-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Cover */
.wlb-cover { min-height: min(92vh, 960px); display: flex; align-items: flex-end; }
.wlb-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 80%; } /* portrait photo: keep the kitchen, not the ceiling */
.wlb-cover::before { background: linear-gradient(180deg, rgba(52,53,63,.05) 30%, rgba(52,53,63,.75) 100%); }
.wlb-cover-inner { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 22px; max-width: 900px; padding: 0 120px 100px; color: #fff; }
.wlb-cover h1 { color: #fff; font-size: 84px; line-height: 1; }
.wlb-cover .wlb-actions { margin-top: 14px; }

/* Spreads: a full-bleed photo beside a page of text, like the PDF */
.wlb-spread { display: grid; grid-template-columns: 1fr 1fr; }
.wlb-page { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 100px 90px; }
.wlb-page > * { max-width: 600px; }
.wlb-bleed { position: relative; margin: 0; min-height: 720px; background: var(--ch); overflow: hidden; }
.wlb-bleed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wlb-bleed::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(52,53,63,.55) 0%, rgba(52,53,63,0) 35%, rgba(52,53,63,0) 80%, rgba(52,53,63,.5) 100%);
}
.wlb-over { position: absolute; z-index: 1; top: 60px; left: 60px; right: 60px; display: flex; flex-direction: column; gap: 14px; }
.wlb-over .wlb-label { color: var(--sand); }
.wlb-over h2 { color: #fff; }
.wlb-bleed figcaption { position: absolute; z-index: 1; left: 40px; right: 40px; bottom: 30px; font-size: 12px; color: #fff; }
/* Phones show the photo after the text, so photo headlines move into the page (only one copy is ever displayed) */
.wlb-m-head { display: none; }
.wlb-sign { font-family: var(--serif); font-style: italic; font-size: 24px !important; }

.wlb-points { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; }
.wlb-points.wlb-one { grid-template-columns: 1fr; }
.wlb-points .wlb-label { margin-bottom: 6px; }
.wlb-points p { font-size: 14px; line-height: 1.8; }

.wlb-fig { margin: 0; }
.wlb-fig img { width: 100%; height: auto; object-fit: cover; }
.wlb-fig.wlb-wide img { aspect-ratio: 656 / 280; }
.wlb-fig figcaption { margin-top: 10px; font-size: 12px; line-height: 1.5; }
.wlb-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wlb-pair img { aspect-ratio: 1; }

.wlb-quote { margin: 0; }
.wlb-quote p { font: italic 400 25px/1.35 var(--serif); }
.wlb-quote cite { display: block; margin-top: 10px; font: normal 500 12px/1.4 'poppins', sans-serif; color: var(--cu); }

/* How it works: timeline, across on desktop, down the left on mobile */
.wlb-band { padding: 100px 90px; }
.wlb-band-head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; max-width: 1400px; margin: 0 auto 60px; }
.wlb-band-head > div { display: flex; flex-direction: column; gap: 18px; }
.wlb-band-head .wlb-quote { padding-top: 30px; }
.wlb-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; max-width: 1400px; margin: 0 auto; padding: 0; list-style: none; }
.wlb-steps li { position: relative; display: flex; flex-direction: column; }
.wlb-steps img { width: 100%; aspect-ratio: 1; object-fit: cover; }
/* A dot under each photo, on a copper line that runs on across the gap to the next step */
.wlb-tick { position: relative; display: block; height: 11px; margin: 26px 0 24px; }
.wlb-tick::before { content: ''; position: absolute; left: 0; right: -40px; top: 5px; height: 1px; background: var(--cu); }
.wlb-tick::after { content: ''; position: absolute; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--cu); }
.wlb-steps li:last-child .wlb-tick::before { right: 0; }
.wlb-num { font: 400 64px/1 var(--serif); color: var(--cu); }
.wlb-steps h3 { margin: 14px 0 10px; font-size: 26px; font-weight: 600; }
.wlb-steps p { font-size: 14px; line-height: 1.8; }

/* Colours and doors + reviews */
.wlb-even .wlb-page { justify-content: flex-start; }
.wlb-swatches, .wlb-doors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 12px; }
.wlb-swatches span { display: block; aspect-ratio: 1; margin-bottom: 10px; }
.wlb-doors img { width: 100%; aspect-ratio: 154 / 190; object-fit: cover; margin-bottom: 10px; }
.wlb-words { gap: 50px; }
.wlb-words .wlb-label { color: var(--sand); }
.wlb-words .wlb-quote p { font-size: 23px; color: #fff; }
.wlb-words .wlb-big p { font-size: 34px; }
.wlb-words .wlb-quote cite { color: var(--gold); }
.wlb-quotes { display: flex; flex-direction: column; gap: 34px; }

/* Back cover / booking */
.wlb-back { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--ch); color: var(--sand); }
.wlb-back > img { order: 2; width: 100%; height: 100%; min-height: 560px; object-fit: cover; } /* photo on the right, so the text sits under the white page above */
.wlb-back-inner { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 90px; }
.wlb-back h2 { color: #fff; }
.wlb-back-inner > p { max-width: 480px; }
.wlb-back a:not(.wlp-btn) { text-decoration-color: rgba(227,224,219,.4); text-underline-offset: 4px; }
.wlb-back .wlb-actions { margin-top: 10px; }

@media (max-width: 1100px) {
	.wlb-cover-inner { padding: 0 60px 80px; }
	.wlb-cover h1 { font-size: 64px; }
	.wlb-page, .wlb-band, .wlb-back-inner { padding: 72px 48px; }
	.wlb-bleed { min-height: 620px; }
	.wlb h2, .wlb .wlb-xl { font-size: 46px; }
	.wlb-h { font-size: 34px; }
	.wlb-points { grid-template-columns: 1fr; }
	.wlb-steps { grid-template-columns: 1fr 1fr; gap: 50px 40px; }
	.wlb-steps li:nth-child(2n) .wlb-tick::before { right: 0; }
}

/* One column: photo, then its page. The timeline runs down the left. */
@media (max-width: 900px) {
	.wlb p { font-size: 14px; line-height: 1.8; }
	.wlb h2, .wlb .wlb-xl { font-size: 40px; }
	/* The print line breaks leave one or two words on a line at this width; let headings wrap evenly instead */
	.wlb h1 br, .wlb h2 br { display: none; }
	/* Second heading under a section title reads as a subtitle, not a rival title */
	.wlb-h { font-size: 25px; line-height: 1.2; }
	.wlb-m-head + .wlb-h { margin-top: -4px; }
	.wlb-cover { min-height: calc(100svh - 64px); }
	.wlb-cover-inner { gap: 16px; padding: 0 20px 40px; }
	.wlb-cover h1 { font-size: 48px; line-height: 1.02; }
	.wlb-cover .wlb-actions { flex-direction: column; align-items: stretch; gap: 18px; margin-top: 8px; }
	.wlb-cover .wlb-link { justify-content: center; }

	.wlb-spread, .wlb-back { grid-template-columns: 1fr; }
	.wlb-page, .wlb-band, .wlb-back-inner { padding: 52px 20px; gap: 18px; }
	.wlb-bleed { min-height: 0; aspect-ratio: 4 / 5; max-height: 82svh; width: 100%; }
	/* Text then photo in every spread, so the page alternates and never has two photos or two pages in a row */
	.wlb-spread .wlb-bleed { order: 2; }
	.wlb-over { display: none; }
	.wlb-bleed::after { background: linear-gradient(180deg, rgba(52,53,63,0) 75%, rgba(52,53,63,.5) 100%); }
	.wlb-m-head { display: flex; flex-direction: column; gap: 18px; }
	.wlb-bleed figcaption { left: 20px; right: 20px; bottom: 18px; font-size: 11px; }
	.wlb-fig.wlb-wide img { aspect-ratio: 4 / 3; }
	.wlb-pair { grid-template-columns: 1fr; gap: 24px; }
	.wlb-pair img { aspect-ratio: 4 / 3; }
	.wlb-quote p { font-size: 22px; line-height: 1.35; }

	.wlb-band-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
	.wlb-band-head .wlb-quote { padding-top: 0; }
	.wlb-steps { grid-template-columns: 1fr; gap: 44px; }
	.wlb-steps li { padding-left: 34px; }
	.wlb-steps li::before { content: ''; position: absolute; left: 5px; top: 18px; bottom: -62px; width: 1px; background: var(--cu); }
	.wlb-steps li:last-child::before { display: none; }
	.wlb-tick { position: absolute; left: 0; top: 13px; margin: 0; width: 11px; }
	.wlb-tick::before { display: none; }
	.wlb-steps img { margin-bottom: 18px; aspect-ratio: 4 / 3; order: 2; }
	.wlb-steps .wlb-num { order: 0; font-size: 48px; }
	.wlb-steps h3 { order: 1; margin: 6px 0 14px; font-size: 24px; }
	.wlb-steps p { order: 3; }

	.wlb-swatches { gap: 10px; font-size: 11px; }
	.wlb-doors { grid-template-columns: 1fr 1fr; gap: 16px; }
	.wlb-words { gap: 36px; }
	.wlb-words .wlb-big p { font-size: 28px; }
	.wlb-words .wlb-quote p { font-size: 21px; }

	.wlb-back > img { order: 0; min-height: 0; aspect-ratio: 4 / 3; }
	.wlb-back .wlb-actions { flex-direction: column; align-items: stretch; gap: 18px; }
	.wlb-back .wlb-link { justify-content: center; }
}