/* ==========================================================================
   Homepage-only sections
   ========================================================================== */

.cod-hero {
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(ellipse at 15% 10%, rgba(30, 99, 216, .35), transparent 55%),
		linear-gradient(135deg, var(--cod-navy) 0%, var(--cod-navy-soft) 100%);
	color: #fff;
	padding-block: clamp(40px, 7vw, 88px);
	overflow: hidden;
}

/* --- Hero media -----------------------------------------------------------
 *
 * The image sits behind the content and carries its own quiet zone, so the
 * headline sits on the composition rather than in a column beside it. A split
 * layout would crop the products away at the widths where the split collapses.
 */

.cod-hero__picture {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
}

.cod-hero__picture img {
	width: 100%;
	height: 100%;
	/* Cover, because the hero's height is driven by its content and the
	   composition has margin designed for exactly this. */
	object-fit: cover;
	object-position: 72% center;
	display: block;
}

/* A scrim under the text only. Without it the headline sits on whatever
   happens to be behind it, which changes as the hero grows. */
.cod-hero--media::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	/*
	 * Dense enough to carry text for the whole width the copy occupies, then
	 * released. The previous ramp thinned out at 58%, which is inside the
	 * copy column at desktop widths -- the last lines of the paragraph sat on
	 * the artwork rather than on the scrim.
	 */
	background: linear-gradient(
		100deg,
		rgba(var(--cod-scrim-rgb), .95) 0%,
		rgba(var(--cod-scrim-rgb), .92) 40%,
		rgba(var(--cod-scrim-rgb), .72) 62%,
		rgba(var(--cod-scrim-rgb), .18) 100%
	);
}

.cod-hero__content { max-width: 680px; position: relative; }

@media (max-width: 767px) {
	/*
	 * On a phone the hero stacks: copy first, then the composition full
	 * bleed beneath it.
	 *
	 * Putting the image behind the copy at this width means either the text
	 * is unreadable or the scrim is so heavy the devices are invisible --
	 * which is the useless phone image the brief warns about, just produced
	 * by a scrim instead of a crop.
	 */
	.cod-hero--media {
		display: flex;
		flex-direction: column;
		padding-top: clamp(28px, 6vw, 40px);
		padding-bottom: 0;
		overflow: hidden;
	}

	.cod-hero--media::after { display: none; }

	/*
	 * Copy first, image second. The picture is earlier in the DOM because it
	 * is a background on desktop, so on mobile it is ordered after the content
	 * -- which keeps the headline and both CTAs above the fold and makes the
	 * composition the payoff rather than the obstacle.
	 */
	.cod-hero--media .cod-hero__inner { order: 1; }
	.cod-hero--media .cod-hero__picture { order: 2; }

	.cod-hero__picture {
		position: relative;
		inset: auto;
		z-index: 0;
		margin-top: 24px;
		width: 100%;
	}

	.cod-hero__picture img {
		width: 100%;
		height: auto;
		/*
		 * Shallower than the source 9:10 so the hero does not consume the
		 * whole screen, but deep enough that the devices keep their bases.
		 */
		aspect-ratio: 5 / 4;
		object-fit: cover;
		object-position: center 46%;
	}
}

@media (min-width: 768px) {
	.cod-hero--media { min-height: 460px; display: grid; align-items: center; }
}

@media (min-width: 1440px) {
	.cod-hero--media { min-height: 560px; }
}

/* --- Hero brand lineup --------------------------------------------------
 *
 * One tile per brand on sale, fronted by that brand's own product photo. The
 * photos come from different studios -- white sweeps, a coloured set, fruit --
 * so each sits in the same square white frame rather than being cut out onto
 * the violet, where the mismatch would show.
 */

.cod-hero--brands {
	background:
		radial-gradient(ellipse at 85% 30%, rgba(192, 38, 211, .28), transparent 55%),
		radial-gradient(ellipse at 10% 0%, rgba(109, 40, 217, .45), transparent 60%),
		linear-gradient(135deg, var(--cod-navy) 0%, var(--cod-navy-soft) 100%);
}

.cod-hero--brands .cod-hero__inner {
	display: grid;
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
}

.cod-hero--brands .cod-hero__actions { margin-bottom: 0; }

.cod-hero__brands {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: clamp(10px, 1.6vw, 18px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * More than four brands: rows of four instead of one long row, smaller
 * names, and no stepped tiles (a stagger across two rows reads as a mistake).
 */
.cod-hero__brands--many {
	grid-auto-flow: row;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	row-gap: clamp(14px, 2vw, 22px);
}

.cod-hero__brands--many .cod-hero__brand-name { font-size: var(--cod-step-0); }
.cod-hero__brands--many .cod-hero__brand-product { font-size: .75rem; }

.cod-hero__brand-link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: #fff;
	text-decoration: none;
}

.cod-hero__brand-media {
	display: block;
	aspect-ratio: 1;
	margin-bottom: 10px;
	border-radius: var(--cod-radius-lg);
	background: #fff;
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(8, 3, 20, .45), 0 0 0 1px rgba(255, 255, 255, .14);
	transition: transform .2s ease, box-shadow .2s ease;
}

.cod-hero__brand-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cod-hero__brand-name {
	font-family: var(--cod-font-heading, inherit);
	font-size: var(--cod-step-1);
	font-weight: 700;
	line-height: 1.2;
}

.cod-hero__brand-product {
	color: var(--cod-on-dark-soft);
	font-size: var(--cod-step--1);
	line-height: 1.35;
}

.cod-hero__brand-link:hover .cod-hero__brand-media,
.cod-hero__brand-link:focus-visible .cod-hero__brand-media {
	transform: translateY(-4px);
	box-shadow: 0 24px 48px rgba(8, 3, 20, .55), 0 0 0 2px var(--cod-accent);
}

.cod-hero__brand-link:focus-visible { outline: none; }
.cod-hero__brand-link:hover .cod-hero__brand-name { text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.cod-hero__brand-media { transition: none; }
	.cod-hero__brand-link:hover .cod-hero__brand-media,
	.cod-hero__brand-link:focus-visible .cod-hero__brand-media { transform: none; }
}

@media (max-width: 767px) {
	.cod-hero__brand-media { margin-bottom: 8px; border-radius: var(--cod-radius); }
	.cod-hero__brand-name { font-size: 1rem; }
	.cod-hero__brand-product { font-size: .75rem; }
}

@media (min-width: 768px) and (max-width: 1023px) {
	/* Stacked under the copy, the row would otherwise stretch three tiles to a
	   third of a tablet each and push the next section off the screen. */
	.cod-hero__brands { max-width: 600px; }
}

@media (min-width: 1024px) {
	/*
	 * Side by side from here: the copy keeps the left, as it did over the
	 * old composition, and the brands take the place the products stood in.
	 * The middle tiles step down so the row reads as a lineup, not a table.
	 */
	.cod-hero--brands { min-height: 520px; display: grid; align-items: center; }
	.cod-hero--brands .cod-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
	.cod-hero__brands { padding-bottom: 28px; }
	.cod-hero__brand:nth-child(even) { transform: translateY(28px); }
	.cod-hero__brands--many { padding-bottom: 0; }
	.cod-hero__brands--many .cod-hero__brand:nth-child(even) { transform: none; }
}

.cod-hero__kicker {
	display: inline-block;
	margin: 0 0 14px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.cod-hero__title {
	margin: 0 0 14px;
	color: #fff;
	font-size: var(--cod-step-4);
	line-height: 1.1;
}

/*
 * When the kicker is the page's H1 it must still look like the kicker: the
 * base h1 rule would otherwise make it navy, 2.75rem and balanced. And the
 * slogan, now a paragraph, keeps the h1's weight and wrapping.
 */
h1.cod-hero__h1 {
	color: inherit;
	font-family: inherit;
	font-size: 12px;
	line-height: 1.4;
	text-wrap: wrap;
}

p.cod-hero__title {
	font-weight: 700;
	text-wrap: balance;
}

.cod-hero__copy {
	margin: 0 0 24px;
	color: var(--cod-on-dark-soft);
	font-size: var(--cod-step-1);
	max-width: 48ch;
}

.cod-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 28px;
}

.cod-hero__actions .cod-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .5); }
.cod-hero__actions .cod-btn--ghost:hover { background: rgba(255, 255, 255, .12); }

.cod-hero__ladder-label {
	display: block;
	margin-bottom: 10px;
	font-size: var(--cod-step--1);
	font-weight: 700;
	color: #9fb5d9;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.cod-hero__ladder .cod-ladder__item { background: rgba(255, 255, 255, .12); }
.cod-hero__ladder .cod-ladder__qty { color: var(--cod-on-dark-soft); }
.cod-hero__ladder .cod-ladder__pct { color: #fff; }

/* --- Brand and puff navigation ----------------------------------------- */

.cod-brand-grid,
.cod-puff-grid {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cod-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cod-puff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.cod-brand-card__link,
.cod-puff-card__link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	padding: 18px 16px;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius);
	background: var(--cod-surface);
	text-align: center;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.cod-brand-card__link:hover,
.cod-puff-card__link:hover {
	border-color: var(--cod-blue);
	box-shadow: var(--cod-shadow);
	text-decoration: none;
	transform: translateY(-2px);
}

.cod-brand-card__name,
.cod-puff-card__name {
	font-weight: 800;
	color: var(--cod-navy);
	font-size: var(--cod-step-0);
	letter-spacing: .01em;
}

.cod-brand-card__count,
.cod-puff-card__count {
	font-size: var(--cod-step--1);
	color: var(--cod-muted);
}

/* --- Category cards with imagery ------------------------------------------
 *
 * The image is the card. The label sits on it rather than beside it, so the
 * section reads as a set of products to browse instead of a list of words --
 * which is the whole point of giving discovery imagery.
 */

.cod-brand-card.has-image .cod-brand-card__link,
.cod-puff-card.has-image .cod-puff-card__link {
	position: relative;
	padding: 0;
	overflow: hidden;
	border: 0;
	justify-content: flex-end;
	gap: 2px;
	min-height: 168px;
	text-align: left;
	isolation: isolate;
}

.cod-brand-card__image,
.cod-puff-card__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.cod-brand-card.has-image .cod-brand-card__link::after,
.cod-puff-card.has-image .cod-puff-card__link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Only as dark as the label needs. The artwork is the point. */
	background: linear-gradient(to top, rgba(6, 12, 24, .82) 0%, rgba(6, 12, 24, .35) 42%, rgba(6, 12, 24, .08) 100%);
}

.cod-brand-card.has-image .cod-brand-card__link:hover .cod-brand-card__image,
.cod-puff-card.has-image .cod-puff-card__link:hover .cod-puff-card__image { transform: scale(1.05); }

.cod-brand-card.has-image .cod-brand-card__name,
.cod-puff-card.has-image .cod-puff-card__name {
	position: relative;
	padding: 0 14px;
	color: #fff;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}

.cod-brand-card.has-image .cod-brand-card__count,
.cod-puff-card.has-image .cod-puff-card__count {
	position: relative;
	padding: 0 14px 14px;
	color: rgba(255, 255, 255, .8);
}

@media (prefers-reduced-motion: reduce) {
	.cod-brand-card__image, .cod-puff-card__image { transition: none; }
	.cod-brand-card.has-image .cod-brand-card__link:hover .cod-brand-card__image,
	.cod-puff-card.has-image .cod-puff-card__link:hover .cod-puff-card__image { transform: none; }
}

@media (min-width: 768px) {
	.cod-brand-card.has-image .cod-brand-card__link,
	.cod-puff-card.has-image .cod-puff-card__link { min-height: 200px; }
}

.cod-puff-card__count::after {
	content: " ";
}

/* --- COD explainer steps ----------------------------------------------- */

.cod-steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: cod-step;
}

.cod-steps__item {
	position: relative;
	padding: 22px 18px 18px;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius);
	background: var(--cod-surface);
}

.cod-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-bottom: 10px;
	border-radius: 50%;
	background: var(--cod-blue);
	color: #fff;
	font-weight: 800;
	font-size: var(--cod-step--1);
}

.cod-steps__title { margin: 0 0 6px; font-size: var(--cod-step-1); }
.cod-steps__copy { margin: 0; color: var(--cod-ink-soft); font-size: var(--cod-step--1); }

/* --- Contact CTA ------------------------------------------------------- */

.cod-contact-cta__inner {
	padding: clamp(28px, 5vw, 44px);
	border-radius: var(--cod-radius-lg);
	background: var(--cod-surface-deep);
	text-align: center;
}

.cod-contact-cta__title { margin: 0 0 8px; }
.cod-contact-cta__copy { margin: 0 auto 20px; max-width: 52ch; color: var(--cod-ink-soft); }

@media (min-width: 640px) {
	.cod-brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.cod-puff-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.cod-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.cod-brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.cod-steps { grid-template-columns: repeat(4, 1fr); }
}

/* --- Campaign banner ------------------------------------------------------
 *
 * A second visual beat partway down the page, so the rhythm is not
 * text-grid-text-grid all the way to the footer.
 */

.cod-campaign__inner {
	position: relative;
	display: block;
	border-radius: var(--cod-radius-lg, 16px);
	overflow: hidden;
	isolation: isolate;
	text-decoration: none;
	min-height: 260px;
}

.cod-campaign__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.cod-campaign__inner::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(95deg, rgba(8, 16, 32, .92) 0%, rgba(8, 16, 32, .74) 38%, rgba(8, 16, 32, .18) 74%, transparent 100%);
}

.cod-campaign__inner:hover .cod-campaign__image { transform: scale(1.03); }

.cod-campaign__content {
	position: relative;
	max-width: 520px;
	padding: clamp(24px, 4vw, 44px);
	color: #fff;
}

.cod-campaign__title {
	margin: 0 0 8px;
	color: #fff;
	font-size: var(--cod-step-2);
	line-height: 1.15;
}

.cod-campaign__text {
	margin: 0 0 18px;
	color: rgba(255, 255, 255, .84);
	font-size: var(--cod-step-0);
}

@media (prefers-reduced-motion: reduce) {
	.cod-campaign__image { transition: none; }
	.cod-campaign__inner:hover .cod-campaign__image { transform: none; }
}

@media (max-width: 767px) {
	/* Stacked, for the same reason the hero stacks: a scrim heavy enough to
	   carry this much copy at 390px would hide the artwork completely. */
	.cod-campaign__inner { min-height: 0; display: flex; flex-direction: column-reverse; background: var(--cod-navy); }
	.cod-campaign__image { position: relative; inset: auto; z-index: 0; aspect-ratio: 16 / 9; height: auto; }
	.cod-campaign__inner::after { display: none; }
	.cod-campaign__content { max-width: none; }
}

/* --- COD explainer visual ------------------------------------------------- */

.cod-explainer__media {
	margin: 0 0 clamp(20px, 3vw, 32px);
	border-radius: var(--cod-radius-lg, 16px);
	overflow: hidden;
	max-width: 760px;
	margin-inline: auto;
}

.cod-explainer__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

/* --- Product lines --------------------------------------------------------
 *
 * With a handful of lines, each gets a full row: banner on one side, selling
 * points and a route in on the other, alternating.
 */

.cod-lines__list { display: grid; gap: clamp(20px, 3vw, 36px); }

.cod-line {
	display: grid;
	gap: clamp(16px, 2.5vw, 28px);
	align-items: center;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius-lg);
	background: var(--cod-surface);
	overflow: hidden;
}

.cod-line__media { display: block; }

/* A product photograph standing in for a banner: whole, on a soft ground. */
.cod-line__media--photo { background: var(--cod-surface-soft); align-self: stretch; }

.cod-line__media img {
	width: 100%;
	height: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	display: block;
}

.cod-line__media--photo img {
	object-fit: contain;
	padding: clamp(12px, 2vw, 24px);
	box-sizing: border-box;
}

.cod-line__body { padding: clamp(18px, 3vw, 32px); }

.cod-line__title { margin: 0 0 12px; font-size: var(--cod-step-2); }
.cod-line__title a { color: var(--cod-ink); text-decoration: none; }
.cod-line__title a:hover { color: var(--cod-blue); }

.cod-line__points { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 6px; }

.cod-line__points li {
	position: relative;
	padding-left: 24px;
	color: var(--cod-ink-soft);
	font-size: var(--cod-step--1);
}

.cod-line__points li::before {
	content: '';
	position: absolute; left: 4px; top: .5em;
	width: 9px; height: 5px;
	border-left: 2px solid var(--cod-blue);
	border-bottom: 2px solid var(--cod-blue);
	transform: rotate(-45deg);
}

.cod-line__price { margin: 0 0 16px; font-size: var(--cod-step-1); font-weight: 700; color: var(--cod-ink); }
.cod-line__price del { color: var(--cod-muted); font-weight: 500; font-size: var(--cod-step-0); }
.cod-line__price ins { text-decoration: none; color: var(--cod-blue); }

.cod-line__actions { margin: 0; }

@media (min-width: 768px) {
	.cod-line { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

	/* Alternate which side the banner sits on, so three rows do not read as
	   one repeated block. */
	.cod-line--flipped .cod-line__media { order: 2; }
	.cod-line--flipped .cod-line__body { order: 1; }

	.cod-line__media img { aspect-ratio: 16 / 10; }

	/* Desktop: the photo fills its half of the card instead of a fixed band. */
	.cod-line__media--photo img { aspect-ratio: auto; max-height: 360px; }
}

/* --- Quantity tiers ------------------------------------------------------- */

.cod-tiers {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cod-tier {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px 18px;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius);
	background: var(--cod-surface);
	text-align: center;
}

.cod-tier__qty { font-size: var(--cod-step--1); color: var(--cod-muted); }

.cod-tier__pct {
	font-family: var(--cod-font-heading);
	font-size: var(--cod-step-2);
	font-weight: 700;
	color: var(--cod-blue);
}

.cod-tier--base .cod-tier__pct { color: var(--cod-muted); font-size: var(--cod-step-0); }

@media (min-width: 768px) {
	.cod-tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Product line overview ------------------------------------------------
 *
 * The compact answer to "what do you sell", directly under the hero. Three
 * lines fit one row on a desktop and stack on a phone. Deliberately plainer
 * than the detailed sections further down: name, price, way in, nothing else.
 */

.cod-linecards__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: clamp(14px, 2.4vw, 24px);
}

.cod-linecard { display: flex; }

.cod-linecard__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius-lg);
	background: var(--cod-surface);
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.cod-linecard__link:hover,
.cod-linecard__link:focus-visible {
	border-color: var(--cod-blue);
	box-shadow: var(--cod-shadow);
	transform: translateY(-2px);
}

.cod-linecard__media {
	display: block;
	background: var(--cod-surface-soft);
}

.cod-linecard__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	display: block;
}

.cod-linecard__body {
	display: grid;
	gap: 6px;
	padding: clamp(14px, 2vw, 20px);
}

.cod-linecard__title {
	font-family: var(--cod-font-heading);
	font-size: var(--cod-step-1);
	font-weight: 700;
	line-height: 1.25;
	color: var(--cod-ink);
}

.cod-linecard__price { font-size: var(--cod-step-0); font-weight: 600; color: var(--cod-ink); }
.cod-linecard__price del { color: var(--cod-muted); font-weight: 500; }
.cod-linecard__price ins { text-decoration: none; color: var(--cod-blue); }

.cod-linecard__cta {
	margin-top: 4px;
	font-size: var(--cod-step--1);
	font-weight: 700;
	color: var(--cod-blue);
}

.cod-linecard__cta::after { content: ' \2192'; }

@media (min-width: 768px) {
	.cod-linecards__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.cod-linecard__link { transition: none; }
	.cod-linecard__link:hover,
	.cod-linecard__link:focus-visible { transform: none; }
}

/* The link to the whole range, under the lines. */
.cod-lines__more {
	margin: clamp(16px, 2vw, 24px) 0 0;
	text-align: center;
	font-weight: 600;
}