/* Peak Protocol Rx - "coming soon" page. Colors and fonts follow brand version 5.
   The owner's direction: light, vibrant, active, welcoming. No dark ground on this page. */
@font-face { font-family: "Manrope"; src: url("Manrope-var.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("Inter-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
	--carbon: #111418;
	--ember: #EF762F;
	--ember-text: #A8410A;
	--copper: #8F4423;
	--ivory: #F7F5F0;
	--champagne: #E3D7C6;
	--grey-on-light: #5F6670;
	--grey-on-warm: #4F5660;
	--gutter: clamp(20px, 5vw, 56px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--ivory);
	color: var(--carbon);
	font-family: "Inter", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.55;
}
img { display: block; max-width: 100%; height: auto; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

h1, h2 { font-family: "Manrope", Arial, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: clamp(36px, 5.4vw, 64px); line-height: 1.04; }
h2 { font-size: clamp(28px, 4.2vw, 48px); line-height: 1.06; }
.eyebrow { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; padding-bottom: 22px; }
.logo { height: 40px; width: auto; }
.status {
	margin: 0;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--ember);
	color: var(--carbon);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Hero: text beside a bright photograph, with an Ember block behind it */
.hero { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; padding-top: 12px; padding-bottom: clamp(36px, 5vw, 56px); }
.hero .eyebrow { color: var(--ember-text); }
.lead { margin: 20px 0 0; max-width: 30em; font-size: clamp(17px, 2vw, 20px); color: var(--grey-on-light); }
.hero-photo { position: relative; margin: 0 14px 14px 0; }
.hero-photo::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; border-radius: 22px; background: var(--ember); }
.hero-photo img { position: relative; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 62% 50%; border-radius: 22px; }

/* Black Friday: a full-width Ember band. On Ember, all text is Carbon (brand rule). */
.sale { background: var(--ember); color: var(--carbon); }
.sale-inner { padding-top: clamp(30px, 4.5vw, 52px); padding-bottom: clamp(30px, 4.5vw, 52px); }
.sale h2 { font-size: clamp(32px, 6vw, 68px); }
.sale p { margin: 12px 0 0; font-size: clamp(17px, 2vw, 20px); }
.sale .eyebrow { margin-bottom: 10px; }

/* Welcome: a warm Champagne band with 2 lifestyle photographs */
.welcome { background: var(--champagne); }
.welcome-inner { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(36px, 5vw, 64px); }
.welcome .eyebrow { color: var(--copper); }
.welcome-text p:last-child { margin: 16px 0 0; max-width: 28em; font-size: clamp(17px, 2vw, 19px); color: var(--grey-on-warm); }
.welcome-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.welcome-photos img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 22px; }
.photo-a { object-position: 70% 50%; }
.photo-b { object-position: 60% 50%; }

/* Footer */
.foot { padding-top: 26px; padding-bottom: 34px; }
.foot p { margin: 0 0 8px; max-width: 70em; font-size: 13px; color: var(--grey-on-light); }

@media (min-width: 900px) {
	.logo { height: 46px; }
	.hero { grid-template-columns: 1.05fr 0.95fr; gap: 56px; padding-top: 20px; }
	.hero-photo img { aspect-ratio: 5 / 4; }
	.welcome-inner { grid-template-columns: 0.9fr 1.1fr; gap: 56px; }
	.photo-b { margin-top: 44px; }
}