/*
 * OAW home — the one-page landing layout.
 *
 * From drafts/landing-page-draft.html. Three differences from that file, all
 * because this runs inside WordPress rather than standing alone:
 *
 *   1. Every selector is scoped to .oaw-home. The draft styled bare `body`,
 *      `section`, `a`, `h1..h3` and `img`, which inside Neve would repaint the
 *      header, the footer and every other page.
 *   2. No webfont is loaded here. Neve now serves Fraunces and Public Sans
 *      site-wide from the Customizer, so asking again would be a second
 *      request for faces the page already has.
 *   3. No dark-mode block. The draft carried one for the artifact viewer, but
 *      the shop, cart and account pages are light-only, and a home page that
 *      went dark on its own would be the one page out of step. Dark mode is a
 *      separate job across the whole site.
 *
 * The palette is a copy of lt-shop-tokens.css, which is the source of truth —
 * if a value changes there it has to change here. Copied rather than shared
 * because that file declares its tokens on .lt-st and the shop's body classes,
 * none of which exist on this page.
 */

.oaw-home {
	--ground: #f4f6f9;
	--surface: #ffffff;
	--ink: #1d2a38;
	--ink-soft: #4c5b6d;
	--line: #dce3ec;
	--brand: #2f5aae;
	--deep: #132c54;
	--deep-2: #0e2140;
	--on-deep: #eef3fb;
	--on-deep-soft: #b9c8e2;
	--amber: #d98a2b;
	--amber-soft: #f8ecdb;
	--amber-ink: #8a5410;
	--chip: #ffffff;
	--shadow: 0 1px 2px rgba(19, 44, 84, .06), 0 8px 24px rgba(19, 44, 84, .09);
	--display: "Fraunces", Georgia, serif;

	background: var(--ground);
	color: var(--ink);
	font-size: 16.5px;
	line-height: 1.6;
}

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

/*
 * The header menu now carries links to the sections below (#supply, #story,
 * #team, #contact), and an instant jump between them reads as a page reload
 * rather than movement down one page. scroll-behavior has to sit on the
 * scrolling element — the root, not .oaw-home — so this reaches it through the
 * body class the plugin adds, which keeps it off every other page.
 *
 * Inside prefers-reduced-motion: no-preference, so anyone who has asked their
 * system for less movement still gets the instant jump.
 */
@media (prefers-reduced-motion: no-preference) {
	html:has(body.oaw-home-page) {
		scroll-behavior: smooth;
	}
}

.oaw-home img {
	max-width: 100%;
	display: block;
}

.oaw-home a {
	color: var(--brand);
}

/*
 * 600, not the draft's 640: Fraunces reaches the browser as static weights and
 * CSS matching resolves anything above 500 upwards first, so 640 rendered at
 * 700. See the note in lt-shop-tokens.css.
 */
.oaw-home h1,
.oaw-home h2,
.oaw-home h3 {
	font-family: var(--display);
	font-weight: 600;
	line-height: 1.12;
	text-wrap: balance;
	margin: 0;
}

.oaw-home p {
	margin: 0;
}

.oaw-home :focus-visible {
	outline: 3px solid var(--amber);
	outline-offset: 2px;
	border-radius: 4px;
}

/*
 * 1100px, while the shop runs to min(94vw, 2200px). Deliberate: the shop is
 * scanning a table of hundreds of rows and wants every pixel, this is reading
 * prose and wants a comfortable measure. The full-bleed bands below — hero,
 * photo strip, section grounds — still span the whole viewport, so the page
 * reads as wide as the rest of the site.
 */
.oaw-home .wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
}

.oaw-home .eyebrow {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--amber);
}

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

.oaw-home .btn {
	display: inline-block;
	text-decoration: none;
	font-weight: 700;
	font-size: 15px;
	/* 9px is the shop's button radius (.lt-st-backbtn, .lt-st-checkout). */
	padding: 10px 18px;
	border-radius: 9px;
	border: 1.5px solid transparent;
}

.oaw-home .btn-light {
	background: #ffffff;
	color: #132c54;
}

.oaw-home .btn-light:hover,
.oaw-home .btn-light:focus {
	color: #132c54;
}

.oaw-home .btn-outline-light {
	border-color: rgba(255, 255, 255, .45);
	color: #ffffff;
}

.oaw-home .btn-outline-light:hover,
.oaw-home .btn-outline-light:focus {
	border-color: #ffffff;
	color: #ffffff;
}

/* ---------- hero ---------- */

.oaw-home .hero {
	position: relative;
	color: var(--on-deep);
	background: var(--deep-2) url("https://www.oawholesale.com/wp-content/uploads/2020/11/MG_0016.jpg") center 35% / cover no-repeat;
}

.oaw-home .hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(10, 24, 48, .92) 8%, rgba(10, 24, 48, .72) 46%, rgba(10, 24, 48, .28) 100%);
}

.oaw-home .hero-inner {
	position: relative;
	padding: 96px 0 104px;
	max-width: 640px;
}

.oaw-home .hero .eyebrow {
	color: #ecc186;
}

.oaw-home .hero h1 {
	font-size: clamp(42px, 6.5vw, 68px);
	font-weight: 600;
	margin: 14px 0 20px;
	color: #ffffff;
}

.oaw-home .hero .lede {
	font-size: 18.5px;
	line-height: 1.65;
	color: var(--on-deep-soft);
	max-width: 56ch;
}

.oaw-home .hero .lede strong {
	color: var(--on-deep);
}

.oaw-home .hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

.oaw-home .hero .aside {
	margin-top: 26px;
	font-size: 14.5px;
	color: var(--on-deep-soft);
}

@media (prefers-reduced-motion: no-preference) {
	.oaw-home .hero-inner > * {
		animation: oaw-home-rise .7s ease both;
	}

	.oaw-home .hero-inner > *:nth-child(2) { animation-delay: .08s; }
	.oaw-home .hero-inner > *:nth-child(3) { animation-delay: .16s; }
	.oaw-home .hero-inner > *:nth-child(4) { animation-delay: .24s; }
	.oaw-home .hero-inner > *:nth-child(5) { animation-delay: .32s; }

	@keyframes oaw-home-rise {
		from { opacity: 0; transform: translateY(14px); }
		to   { opacity: 1; transform: none; }
	}
}

/* ---------- sections ---------- */

.oaw-home section {
	padding: 76px 0;
}

.oaw-home .section-head {
	max-width: 640px;
	margin-bottom: 40px;
}

.oaw-home .section-head h2 {
	font-size: clamp(30px, 4vw, 40px);
	margin: 12px 0 14px;
}

.oaw-home .section-head p {
	color: var(--ink-soft);
}

/* ---------- what we supply ---------- */

.oaw-home .supply {
	background: var(--surface);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.oaw-home .cards {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.oaw-home .card {
	background: var(--ground);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 24px 24px 26px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.oaw-home .card h3 {
	font-size: 21px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.oaw-home .card p {
	color: var(--ink-soft);
	font-size: 15.5px;
}

.oaw-home .card .more {
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
	margin-top: auto;
	padding-top: 6px;
}

.oaw-home .card .more:hover {
	text-decoration: underline;
}

.oaw-home .flag {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	background: var(--amber-soft);
	color: var(--amber-ink);
	border-radius: 99px;
	padding: 3px 10px;
}

/* ---------- photo strip ---------- */

.oaw-home .strip {
	padding: 0;
	background: var(--deep-2);
}

.oaw-home .strip-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.oaw-home .strip-grid img {
	width: 100%;
	height: 240px;
	object-fit: cover;
}

.oaw-home .strip-caption {
	text-align: center;
	color: var(--on-deep-soft);
	font-size: 13.5px;
	padding: 12px 16px 14px;
	background: var(--deep-2);
}

@media (max-width: 720px) {
	.oaw-home .strip-grid { grid-template-columns: 1fr; }
	.oaw-home .strip-grid img:nth-child(n+2) { display: none; }
}

/* ---------- our story ---------- */

.oaw-home .timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	max-width: 720px;
}

.oaw-home .timeline::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: var(--line);
}

.oaw-home .timeline li {
	position: relative;
	padding: 0 0 30px 40px;
}

.oaw-home .timeline li:last-child {
	padding-bottom: 0;
}

.oaw-home .timeline li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--surface);
	border: 3px solid var(--brand);
}

.oaw-home .timeline li.milestone::before {
	border-color: var(--amber);
}

.oaw-home .timeline .year {
	font-family: var(--display);
	font-weight: 600;
	font-size: 19px;
}

.oaw-home .timeline p {
	color: var(--ink-soft);
	margin-top: 4px;
	font-size: 15.5px;
	max-width: 62ch;
}

/* ---------- the team ---------- */

.oaw-home .team {
	background: var(--surface);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.oaw-home .team-grid {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.oaw-home .person {
	background: var(--ground);
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: var(--shadow);
}

.oaw-home .person figure {
	margin: 0;
	position: relative;
}

.oaw-home .person figure img {
	width: 100%;
	height: 280px;
	object-fit: cover;
}

/*
 * A square headshot in a landscape frame: centring it vertically would crop
 * the top of the head, so the window is pulled up towards the face. Only for
 * a portrait — Max's photograph is landscape and needs no help.
 */
.oaw-home .person figure img.headshot {
	object-position: center 20%;
}

.oaw-home .person figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 8px 16px;
	font-size: 12.5px;
	color: #e8eef8;
	background: linear-gradient(transparent, rgba(10, 24, 48, .85));
}

.oaw-home .person .body {
	padding: 22px 24px 26px;
}

.oaw-home .person h3 {
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 4px;
}

.oaw-home .person .role {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-bottom: 12px;
}

.oaw-home .person p {
	color: var(--ink-soft);
	font-size: 15.5px;
	margin-bottom: 10px;
}

.oaw-home .person p:last-child {
	margin-bottom: 0;
}

/* ---------- contact ---------- */

.oaw-home .contact {
	background: var(--deep);
	color: var(--on-deep);
}

.oaw-home .contact .eyebrow {
	color: #ecc186;
}

.oaw-home .contact h2 {
	color: #ffffff;
	font-size: clamp(30px, 4vw, 40px);
	margin: 12px 0 14px;
}

.oaw-home .contact p {
	color: var(--on-deep-soft);
	max-width: 56ch;
}

.oaw-home .contact-grid {
	display: grid;
	gap: 40px;
	grid-template-columns: 1.2fr 1fr;
	align-items: start;
}

.oaw-home .contact-card {
	background: var(--deep-2);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 14px;
	padding: 26px 28px;
	display: grid;
	gap: 18px;
}

.oaw-home .contact-card .label {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--on-deep-soft);
}

.oaw-home .contact-card a.big {
	color: #ffffff;
	text-decoration: none;
	font-family: var(--display);
	font-size: clamp(19px, 2.6vw, 25px);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.oaw-home .contact-card a.big:hover {
	text-decoration: underline;
	color: #ffffff;
}

.oaw-home .contact-card .sub {
	font-size: 14px;
	color: var(--on-deep-soft);
}

@media (max-width: 860px) {
	.oaw-home .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	.oaw-home .hero-inner { padding: 72px 0 80px; }
	.oaw-home section { padding: 60px 0; }
}