/* ==========================================================================
   Crown Office Supplies — modern homepage
   Everything is scoped under .cos-page so it cannot leak into Electro /
   Bootstrap 4 / WooCommerce styles anywhere else on the site.
   Brand: #FED700 (yellow)  ·  #2E094E (deep violet)
   ========================================================================== */

.cos-page {
	/* --- brand ------------------------------------------------------- */
	--cos-yellow: #fed700;
	--cos-yellow-600: #e5c000;
	--cos-yellow-soft: #fff9d6;
	--cos-navy: #2e094e;
	--cos-navy-800: #3d1266;
	--cos-navy-700: #4d1c7d;

	/* --- neutrals (warm, so the yellow doesn't read cheap) ------------ */
	--cos-ink: #16091f;
	--cos-text: #4a4155;
	--cos-muted: #7a7188;
	--cos-line: #ece8f0;
	--cos-line-strong: #ddd6e4;
	--cos-surface: #ffffff;
	--cos-surface-2: #faf8fc;
	--cos-surface-3: #f4f1f7;

	/* --- type -------------------------------------------------------- */
	--cos-font-display: "Poppins", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--cos-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* --- shape ------------------------------------------------------- */
	--cos-r-sm: 10px;
	--cos-r: 16px;
	--cos-r-lg: 24px;
	--cos-r-xl: 32px;

	/* --- elevation (layered, low-opacity = the "expensive" look) ------ */
	--cos-shadow-sm: 0 1px 2px rgba(22, 9, 31, .04), 0 1px 3px rgba(22, 9, 31, .06);
	--cos-shadow: 0 2px 4px rgba(22, 9, 31, .04), 0 8px 24px rgba(22, 9, 31, .07);
	--cos-shadow-lg: 0 4px 8px rgba(22, 9, 31, .04), 0 18px 48px rgba(22, 9, 31, .11);
	--cos-shadow-yellow: 0 10px 30px rgba(254, 215, 0, .35);

	--cos-ease: cubic-bezier(.22, 1, .36, 1);

	font-family: var(--cos-font-body);
	color: var(--cos-text);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   Full-bleed inside Electro's .container
   --------------------------------------------------------------------------
   This template renders inside #content > .container, so section backgrounds
   would otherwise stop at ~1140px. We break out with a negative inline margin
   that is immediately cancelled by an equal inline padding.

   Why this and not `margin-inline: calc(50% - 50vw); width: 100vw`:
     - 100vw INCLUDES the scrollbar, so that approach centres our content on a
       different axis than the header (a ~7px misalignment on a page that is
       supposed to look expensive), and overflows the viewport horizontally.
     - Here the CONTENT box is left exactly where it was, so .cos-wrap lines up
       pixel-perfect with the site header. Only the background travels.

   The 100vmax overhang is clipped by body.cos-modern-home below, so it never
   produces a horizontal scrollbar.
   -------------------------------------------------------------------------- */
.cos-bleed {
	margin-inline: -100vmax;
	padding-inline: 100vmax;
}

/* Contains the bleed overhang. Scoped to a body class that only this template
   adds, so it can never affect another page. `clip` is preferred where
   supported because it does not create a scroll container. */
body.cos-modern-home { overflow-x: hidden; }

@supports (overflow-x: clip) {
	body.cos-modern-home { overflow-x: clip; }
}

/* Electro styles #primary.content-area as a Bootstrap 75% column because the
   default page layout expects a sidebar, and only grants 100% to its OWN
   homepage template via the .page-template-template-homepage-v1-php body class.
   This template has no sidebar, so without this rule a quarter of the page is
   dead space and every section renders ~870px wide instead of ~1170px. */
body.cos-modern-home .content-area {
	flex: 0 0 100%;
	max-width: 100%;
}

.cos-wrap {
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
}

/* padding-block, NOT the `padding` shorthand — the shorthand would reset the
   padding-inline that .cos-bleed depends on. */
.cos-section {
	padding-block: clamp(56px, 7vw, 104px);
	position: relative;
}

.cos-section--tight { padding-block: clamp(40px, 4.5vw, 64px); }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

/* :where() keeps these base rules at single-class specificity (0,1,0) so the
   component rules below can override them. Without it, `.cos-page h2` is
   (0,1,1) and silently beats every `.cos-*` margin further down the file. */
.cos-page :where(h1, h2, h3, h4) {
	font-family: var(--cos-font-display);
	color: var(--cos-ink);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.08;
	margin: 0 0 .5em;
	text-transform: none;
	/* Avoids orphans like "Everything the office runs on / on" */
	text-wrap: balance;
}

.cos-h1 { font-size: clamp(2.2rem, 5.2vw, 4rem); }
.cos-h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
.cos-h3 { font-size: clamp(1.1rem, 1.6vw, 1.3rem); letter-spacing: -.02em; line-height: 1.25; }

.cos-lead {
	font-size: clamp(1.02rem, 1.35vw, 1.18rem);
	line-height: 1.7;
	color: var(--cos-text);
	max-width: 62ch;
	margin: 0 0 1.5rem;
}

.cos-page :where(p) { margin: 0 0 1rem; }
.cos-page :where(p:last-child) { margin-bottom: 0; }

/* Inline links in body copy. Electro/Bootstrap default these to a generic blue
   that fights the brand palette, so we claim them explicitly. */
.cos-page :where(.cos-lead, .cos-intro__note, .cos-faq__a, .cos-credit) a {
	color: var(--cos-navy);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--cos-yellow);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color .25s ease, text-decoration-color .25s ease;
}
.cos-page :where(.cos-lead, .cos-intro__note, .cos-faq__a, .cos-credit) a:hover {
	color: var(--cos-navy-700);
	text-decoration-color: var(--cos-navy);
}

/* ...and their equivalents on the dark bands. */
.cos-page :where(.cos-net30, .cos-cta) :where(.cos-lead, .cos-intro__note) a {
	color: #fff;
	text-decoration-color: var(--cos-yellow);
}
.cos-page :where(.cos-net30, .cos-cta) :where(.cos-lead, .cos-intro__note) a:hover {
	color: var(--cos-yellow);
}

/* Eyebrow label above section headings */
.cos-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--cos-font-body);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cos-navy);
	margin-bottom: 14px;
}

.cos-eyebrow::before {
	content: "";
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: var(--cos-yellow);
}

.cos-eyebrow--light { color: var(--cos-yellow); }
.cos-eyebrow--light::before { background: var(--cos-yellow); }

.cos-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: clamp(28px, 3.5vw, 48px);
}

.cos-section-head__copy { max-width: 60ch; }
.cos-section-head .cos-h2 { margin-bottom: .25em; }
.cos-section-head p { color: var(--cos-muted); margin: 0; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.cos-page .cos-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--cos-font-body);
	font-size: .97rem;
	font-weight: 650;
	line-height: 1;
	padding: 16px 28px;
	border-radius: 999px;
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: transform .35s var(--cos-ease), box-shadow .35s var(--cos-ease),
		background-color .25s ease, color .25s ease, border-color .25s ease;
	will-change: transform;
}

.cos-page .cos-btn:hover,
.cos-page .cos-btn:focus-visible { text-decoration: none; transform: translateY(-2px); }

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

.cos-page .cos-btn--primary {
	background: var(--cos-yellow);
	color: var(--cos-navy);
	box-shadow: 0 4px 14px rgba(254, 215, 0, .34);
}
.cos-page .cos-btn--primary:hover,
.cos-page .cos-btn--primary:focus-visible {
	background: #ffe23d;
	color: var(--cos-navy);
	box-shadow: var(--cos-shadow-yellow);
}

.cos-page .cos-btn--dark {
	background: var(--cos-navy);
	color: #fff;
	box-shadow: 0 4px 14px rgba(46, 9, 78, .28);
}
.cos-page .cos-btn--dark:hover,
.cos-page .cos-btn--dark:focus-visible {
	background: var(--cos-navy-800);
	color: #fff;
	box-shadow: 0 12px 32px rgba(46, 9, 78, .32);
}

.cos-page .cos-btn--ghost {
	background: transparent;
	color: var(--cos-ink);
	border-color: var(--cos-line-strong);
}
.cos-page .cos-btn--ghost:hover,
.cos-page .cos-btn--ghost:focus-visible {
	color: var(--cos-navy);
	border-color: var(--cos-navy);
	background: #fff;
}

.cos-page .cos-btn--on-dark {
	background: rgba(255, 255, 255, .08);
	color: #fff;
	border-color: rgba(255, 255, 255, .28);
	backdrop-filter: blur(6px);
}
.cos-page .cos-btn--on-dark:hover,
.cos-page .cos-btn--on-dark:focus-visible {
	background: rgba(255, 255, 255, .16);
	border-color: rgba(255, 255, 255, .5);
	color: #fff;
}

/* arrow nudges on hover */
.cos-btn__arrow { transition: transform .35s var(--cos-ease); }
.cos-page .cos-btn:hover .cos-btn__arrow { transform: translateX(4px); }

.cos-page .cos-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 650;
	font-size: .95rem;
	color: var(--cos-navy);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: border-color .25s ease, gap .25s var(--cos-ease);
}
.cos-page .cos-link-arrow:hover {
	color: var(--cos-navy);
	border-bottom-color: var(--cos-yellow);
	gap: 11px;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   1 — Intro / H1 band
   -------------------------------------------------------------------------- */

.cos-intro {
	background:
		radial-gradient(1000px 480px at 88% -12%, rgba(254, 215, 0, .16), transparent 62%),
		radial-gradient(760px 420px at 2% 108%, rgba(46, 9, 78, .07), transparent 60%),
		var(--cos-surface);
	border-bottom: 1px solid var(--cos-line);
}

/* Single column since the stat cards moved out into their own band (§2).

   The headline is deliberately allowed to run the full width rather than being
   held to a reading measure. A first attempt capped it at 46ch, which broke
   "Everything the office runs on," across three short lines down the left edge
   and left the right half of the section visibly empty — it read as a layout
   that had lost its second column, which is exactly what had happened. At full
   width the line breaks where the markup's <br> says it should, and the
   section reads as an intentional full-bleed opener.

   The LEAD still gets a measure — .cos-lead caps itself at 62ch — so only the
   display type spans the section. */
.cos-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.cos-intro__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 26px;
}

.cos-intro__note {
	font-size: .88rem;
	color: var(--cos-muted);
	margin: 0;
}

/* highlighted words inside the H1 */
/* The highlight bar is absolutely positioned against this box, so the phrase
   must stay on ONE line — if it wraps, the bar stretches across both lines. */
.cos-mark {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	color: var(--cos-navy);
	z-index: 0;
}
.cos-mark::after {
	content: "";
	position: absolute;
	left: -.06em;
	right: -.06em;
	bottom: .06em;
	height: .34em;
	background: var(--cos-yellow);
	border-radius: 3px;
	z-index: -1;
	transform: scaleX(0);
	transform-origin: left center;
	animation: cos-mark-in .9s var(--cos-ease) .35s forwards;
}

@keyframes cos-mark-in { to { transform: scaleX(1); } }

/* stat card cluster */
.cos-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.cos-stat {
	background: var(--cos-surface);
	border: 1px solid var(--cos-line);
	border-radius: var(--cos-r-lg);
	padding: 26px 22px;
	box-shadow: var(--cos-shadow-sm);
	transition: transform .5s var(--cos-ease), box-shadow .5s var(--cos-ease), border-color .3s ease;
}
.cos-stat:hover {
	transform: translateY(-4px);
	box-shadow: var(--cos-shadow);
	border-color: var(--cos-line-strong);
}

.cos-stat__num {
	font-family: var(--cos-font-display);
	font-weight: 800;
	font-size: clamp(1.7rem, 2.6vw, 2.25rem);
	letter-spacing: -.035em;
	color: var(--cos-navy);
	line-height: 1;
	display: block;
	margin-bottom: 8px;
	white-space: nowrap; /* keeps "88,000+" from breaking to "88,00 / 0+" */
}
.cos-stat__label {
	font-size: .82rem;
	color: var(--cos-muted);
	line-height: 1.45;
	display: block;
}

.cos-stat--accent {
	background: linear-gradient(145deg, var(--cos-navy) 0%, var(--cos-navy-700) 100%);
	border-color: transparent;
}
.cos-stat--accent .cos-stat__num { color: var(--cos-yellow); }
.cos-stat--accent .cos-stat__label { color: rgba(255, 255, 255, .74); }

/* --------------------------------------------------------------------------
   2 — The figures band

   Replaced the trust strip. See the template comment for why. The .cos-stat
   card rules above are kept: nothing on the homepage uses them any more, but
   they are part of the shared design system and other templates may.
   -------------------------------------------------------------------------- */

.cos-figures {
	background: var(--cos-surface-2);
	border-bottom: 1px solid var(--cos-line);
}

.cos-figures__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 48px);
}

/* Hairline dividers rather than cards. `border-left` on every item but the
   first keeps the rule BETWEEN the figures instead of fencing them in. */
.cos-figure {
	padding-left: clamp(20px, 3vw, 48px);
	border-left: 1px solid var(--cos-line-strong);
}

.cos-figure:first-child {
	padding-left: 0;
	border-left: 0;
}

.cos-figure__num {
	display: block;
	font-family: var(--cos-font-display);
	font-weight: 800;
	/* Roughly h1 scale — the point of the section is that these read as the
	   biggest thing on the screen after the headline itself. */
	font-size: clamp(2.4rem, 5vw, 3.9rem);
	line-height: 1;
	letter-spacing: -.045em;
	color: var(--cos-navy);
	margin-bottom: 12px;
	white-space: nowrap; /* keeps "88,000+" off two lines as "88,00 / 0+" */
}

.cos-figure__label {
	display: block;
	font-size: .95rem;
	line-height: 1.5;
	color: var(--cos-muted);
	max-width: 26ch;
}

.cos-trust__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 22px 20px;
	background: var(--cos-surface);
	border: 1px solid var(--cos-line);
	border-radius: var(--cos-r);
	transition: transform .45s var(--cos-ease), box-shadow .45s var(--cos-ease);
}
.cos-trust__item:hover { transform: translateY(-3px); box-shadow: var(--cos-shadow-sm); }

.cos-trust__icon {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: var(--cos-yellow-soft);
	color: var(--cos-navy);
}
.cos-trust__icon svg { width: 21px; height: 21px; display: block; }

.cos-trust__t {
	font-family: var(--cos-font-display);
	font-weight: 700;
	font-size: .96rem;
	letter-spacing: -.02em;
	color: var(--cos-ink);
	display: block;
	line-height: 1.3;
	margin-bottom: 3px;
}
.cos-trust__d { font-size: .83rem; color: var(--cos-muted); line-height: 1.5; display: block; }
.cos-page a.cos-trust__item { text-decoration: none; }
.cos-page a.cos-trust__item:hover .cos-trust__t { color: var(--cos-navy); }

/* --------------------------------------------------------------------------
   3 — Category tiles
   -------------------------------------------------------------------------- */

.cos-cats { background: var(--cos-surface); }

.cos-cats__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

/* --------------------------------------------------------------------------
   Category cards — "editorial gallery"

   The design problem these solve: the tile photography is BORROWED from
   whatever product happens to be newest in each category, so the backgrounds
   are wildly inconsistent (white studio cut-outs, a wood desk, open sky, flat
   grey). Any layout that shows those photos as neat little swatches puts that
   inconsistency front and centre, which is exactly what made the previous
   image-on-top / text-below cards read as a stock template.

   So the photo stops being the subject and becomes atmosphere: it fills the
   whole card, gets unified by a brand-tinted multiply layer plus a heavy
   bottom scrim, and the CATEGORY NAME becomes the hero. Wildly different
   source images end up sharing one palette and one focal structure.
   -------------------------------------------------------------------------- */
.cos-page .cos-cat {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none;
	isolation: isolate;
	/* Fallback for a category whose product has no photo — the card still
	   reads as a designed object rather than a black hole. */
	background: linear-gradient(150deg, var(--cos-navy-700) 0%, var(--cos-navy) 58%, #1d0533 100%);
	box-shadow: 0 1px 2px rgba(22, 9, 31, .10), 0 10px 24px -12px rgba(22, 9, 31, .30);
	transition: transform .6s var(--cos-ease), box-shadow .6s var(--cos-ease);
}

.cos-page .cos-cat:hover {
	transform: translateY(-8px);
	box-shadow: 0 6px 12px rgba(22, 9, 31, .10), 0 34px 60px -22px rgba(46, 9, 78, .55);
	text-decoration: none;
}

.cos-page .cos-cat:focus-visible {
	outline: 3px solid var(--cos-yellow);
	outline-offset: 3px;
}

/* --- media ---------------------------------------------------------------- */
.cos-cat__media {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	z-index: 0;
}

.cos-cat__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Counteracts the tint below. Without it the already-dark source photos
	   (Office Accessories, Electronics) sink to near-black once the multiply
	   layer lands on them. */
	filter: saturate(1.1) brightness(1.04);
	transform: scale(1.01); /* hides sub-pixel edges while the image scales */
	transition: transform .9s var(--cos-ease);
}

.cos-page .cos-cat:hover .cos-cat__media img { transform: scale(1.08); }

/* Layer 1 — colour normaliser. `multiply` pulls every source photo toward the
   same violet cast, so a white cut-out and a blue sky stop fighting.
   Deliberately light: at .22 it flattened the brighter photos into grey mush.
   The job is to relate the images, not to repaint them. */
.cos-cat__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--cos-navy);
	opacity: .12;
	mix-blend-mode: multiply;
	transition: opacity .5s ease;
}

/* Layer 2 — contrast scrim. Two stacked gradients rather than one long fade:
   a DENSE, SHORT pedestal under the text (dark enough for white type over a
   bright photo, but done by ~60% height so the product stays lit), plus a
   faint top vignette purely so the index numeral survives on pale images.
   The earlier single full-height fade darkened the whole card and read murky. */
.cos-cat__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(
			to top,
			rgba(14, 3, 26, .93) 0%,
			rgba(14, 3, 26, .74) 17%,
			rgba(14, 3, 26, .36) 33%,
			rgba(14, 3, 26, .10) 48%,
			rgba(14, 3, 26, 0) 62%
		),
		linear-gradient(
			to bottom,
			rgba(14, 3, 26, .34) 0%,
			rgba(14, 3, 26, .10) 12%,
			rgba(14, 3, 26, 0) 24%
		);
	transition: opacity .5s ease;
}

.cos-page .cos-cat:hover .cos-cat__media::before { opacity: .18; }

/* Crisp 1px inner edge — stops the rounded corner looking soft on dark. */
.cos-page .cos-cat::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
	pointer-events: none;
}

/* --- editorial index numeral --------------------------------------------- */
.cos-cat__index {
	position: absolute;
	top: 16px;
	left: 18px;
	z-index: 3;
	font-family: var(--cos-font-display);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, .62);
	/* The top vignette is deliberately faint, so on the brightest photos
	   (the BIC pack, the sky shot) the numeral still needs its own backing. */
	text-shadow: 0 1px 6px rgba(10, 2, 18, .65);
	transition: color .35s ease;
}

.cos-page .cos-cat:hover .cos-cat__index { color: var(--cos-yellow); }

/* --- body ----------------------------------------------------------------- */
.cos-cat__body {
	position: absolute;
	right: 18px;
	bottom: 17px;
	left: 18px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
}

/* Yellow rule that draws in on hover — the one piece of pure decoration, and
   what makes the grid feel deliberate when you sweep across it. */
.cos-cat__rule {
	display: block;
	width: 34px;
	height: 2px;
	margin-bottom: 9px;
	background: var(--cos-yellow);
	border-radius: 2px;
	/* At .34 of 30px this rendered as a ~10px stub that read as a stray dot.
	   It needs to look like a deliberate rule at rest and simply extend. */
	transform: scaleX(.55);
	transform-origin: left center;
	transition: transform .55s var(--cos-ease);
}

.cos-page .cos-cat:hover .cos-cat__rule { transform: scaleX(1); }

.cos-page .cos-cat .cos-cat__name {
	font-family: var(--cos-font-display);
	font-weight: 700;
	font-size: 1.06rem;
	line-height: 1.2;
	letter-spacing: -.022em;
	color: #fff;
	text-wrap: balance;
	text-shadow: 0 1px 12px rgba(10, 2, 18, .5);
}

.cos-page .cos-cat .cos-cat__count {
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .68);
}

/* --- arrow ---------------------------------------------------------------- */
.cos-cat__go {
	position: absolute;
	top: 13px;
	right: 13px;
	z-index: 3;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--cos-yellow);
	color: #2b0a45;
	opacity: 0;
	transform: translate(-4px, 4px) scale(.82);
	transition: opacity .4s ease, transform .5s var(--cos-ease);
}

.cos-cat__go svg { width: 16px; height: 16px; }

.cos-page .cos-cat:hover .cos-cat__go,
.cos-page .cos-cat:focus-visible .cos-cat__go {
	opacity: 1;
	transform: translate(0, 0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.cos-page .cos-cat,
	.cos-cat__media img,
	.cos-cat__rule,
	.cos-cat__go,
	.cos-cat__index {
		transition: none;
	}
	.cos-page .cos-cat:hover { transform: none; }
	.cos-page .cos-cat:hover .cos-cat__media img { transform: scale(1.01); }
	.cos-cat__rule { transform: scaleX(1); }
	.cos-cat__go { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   4 — Net 30 feature band (the money section)
   -------------------------------------------------------------------------- */

.cos-net30 {
	background:
		radial-gradient(900px 480px at 85% 0%, rgba(254, 215, 0, .17), transparent 58%),
		radial-gradient(700px 500px at 8% 100%, rgba(254, 215, 0, .07), transparent 60%),
		linear-gradient(160deg, var(--cos-navy) 0%, #24063d 100%);
	color: rgba(255, 255, 255, .82);
	position: relative;
}

/* Faint grid texture — adds depth without an image request.
   `inset: 0 100vmax` pins it to the CONTENT column rather than the 200vmax-wide
   bleed padding box, so the mask stays centred on what the visitor sees. */
.cos-net30::before {
	content: "";
	position: absolute;
	inset: 0 100vmax;
	background-image:
		linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
	background-size: 64px 64px;
	/* Percentage mask, not a fixed px radius: a 900px radius on a 390px phone
	   never reaches its falloff, so the grid read as hard noise behind the copy.
	   Percentages are relative to this element, which is pinned to the content
	   column, so the fade lands correctly at every width. */
	mask-image: radial-gradient(85% 65% at 50% 32%, #000 8%, transparent 74%);
	-webkit-mask-image: radial-gradient(85% 65% at 50% 32%, #000 8%, transparent 74%);
	pointer-events: none;
}

.cos-net30 > * { position: relative; z-index: 1; }
.cos-net30 .cos-h2 { color: #fff; }
.cos-net30 .cos-lead { color: rgba(255, 255, 255, .78); }

.cos-net30__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(36px, 5vw, 72px);
	align-items: center;
}

/* numbered steps */
.cos-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.cos-steps__item {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding: 20px 22px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--cos-r);
	backdrop-filter: blur(8px);
	transition: background-color .4s ease, border-color .4s ease, transform .5s var(--cos-ease);
}
.cos-steps__item:hover {
	background: rgba(255, 255, 255, .09);
	border-color: rgba(254, 215, 0, .45);
	transform: translateX(5px);
}

.cos-steps__n {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--cos-yellow);
	color: var(--cos-navy);
	font-family: var(--cos-font-display);
	font-weight: 800;
	font-size: .9rem;
	line-height: 1;
}

.cos-steps__t {
	display: block;
	font-family: var(--cos-font-display);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: -.02em;
	color: #fff;
	margin-bottom: 3px;
	line-height: 1.3;
}
.cos-steps__d { display: block; font-size: .88rem; color: rgba(255, 255, 255, .68); line-height: 1.55; }

.cos-net30__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

.cos-net30__fine {
	font-size: .8rem;
	color: rgba(255, 255, 255, .5);
	margin-top: 18px;
	max-width: 52ch;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   5 — Product rail
   -------------------------------------------------------------------------- */

.cos-products { background: var(--cos-surface-2); }

.cos-products__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

/* --------------------------------------------------------------------------
   Product cards — "specimen on a lit stage"

   Deliberately the OPPOSITE of the category tiles, because the job is
   different. A category tile is a doorway: the photo is atmosphere, so it is
   cropped edge to edge and darkened under a scrim. A product card is a
   decision: the shopper is judging THIS item, so nothing may be cropped,
   nothing may be darkened, and the price has to be unambiguous.

   Hence: light card, product CONTAINED on a soft lit stage, grounded by a real
   contact shadow, and a hover that picks the item up off the shelf rather than
   pushing a scrim over it.
   -------------------------------------------------------------------------- */
.cos-page .cos-prod {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--cos-surface);
	border: 1px solid var(--cos-line);
	border-radius: var(--cos-r-lg);
	overflow: hidden;
	text-decoration: none;
	transition: transform .5s var(--cos-ease), box-shadow .5s var(--cos-ease), border-color .35s ease;
}

.cos-page .cos-prod:hover {
	transform: translateY(-6px);
	box-shadow: 0 4px 10px rgba(22, 9, 31, .05), 0 26px 50px -20px rgba(46, 9, 78, .30);
	border-color: var(--cos-line-strong);
	text-decoration: none;
}

.cos-page .cos-prod:focus-visible {
	outline: 3px solid var(--cos-yellow);
	outline-offset: 3px;
}

/* --- the stage ------------------------------------------------------------
   A soft top-lit gradient rather than flat white. Most of this catalogue is
   shot on white, and on a white card those products dissolve into the
   background — the faint tint is what makes them read as objects sitting on
   a surface. */
.cos-prod__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background:
		radial-gradient(115% 80% at 50% 12%, #ffffff 0%, #fdfcfe 42%, #f2eef7 100%);
}

/* The bottom padding is not decorative — it RESERVES the strip the "View item"
   bar slides into. Without it a tall product (the Promarx highlighter pack)
   reaches the floor of the stage and the bar slides straight over the thing the
   shopper is trying to look at. */
.cos-prod__stage {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px 18px 50px;
}

/* The product photo is presented as a MOUNTED TILE, not a floating cut-out.
 *
 * A drop-shadow() contact shadow was tried first and rejected: it only traces
 * the product's silhouette when the source has an alpha channel, and almost
 * everything in this catalogue is an opaque JPEG/WEBP shot on white. So it
 * drew a hard rectangle around every photo — the exact "pasted in" look it was
 * meant to prevent. Rounding and lighting the rectangle instead makes it read
 * as a deliberate mount, and because most shots are on white the tile fuses
 * with the product's own background. */
.cos-prod__media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	background: #fff;
	border-radius: 14px;
	box-shadow:
		0 1px 2px rgba(22, 9, 31, .06),
		0 12px 22px -10px rgba(22, 9, 31, .26);
	transform: translateY(0) scale(1);
	transition: transform .65s var(--cos-ease), box-shadow .65s var(--cos-ease);
}

/* Picked up off the shelf: it rises while the shadow drops further and
   softens, which reads as real lift rather than a flat zoom. */
.cos-page .cos-prod:hover .cos-prod__media img {
	transform: translateY(-6px) scale(1.045);
	box-shadow:
		0 2px 4px rgba(22, 9, 31, .06),
		0 26px 34px -14px rgba(22, 9, 31, .30);
}

/* --- slide-up action bar --------------------------------------------------
   A full-width bar, chosen specifically so it does NOT repeat the category
   card's floating circular arrow — the two sections should not share a tell. */
.cos-prod__view {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 12px;
	background: var(--cos-navy);
	color: #fff;
	font-size: .78rem;
	font-weight: 650;
	letter-spacing: .02em;
	transform: translateY(101%);
	transition: transform .45s var(--cos-ease);
}

.cos-prod__view svg { width: 15px; height: 15px; }

.cos-page .cos-prod:hover .cos-prod__view,
.cos-page .cos-prod:focus-visible .cos-prod__view {
	transform: translateY(0);
}

/* --- sale badge ----------------------------------------------------------- */
.cos-prod__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 6px 10px;
	border-radius: 999px;
	background: var(--cos-yellow);
	color: var(--cos-navy);
	line-height: 1;
	box-shadow: 0 2px 8px rgba(22, 9, 31, .12);
	z-index: 3;
}

/* --- body ----------------------------------------------------------------- */
.cos-prod__body {
	padding: 15px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
	border-top: 1px solid var(--cos-line);
}

.cos-prod__name {
	font-size: .91rem;
	font-weight: 600;
	color: var(--cos-ink);
	line-height: 1.42;
	/* keep every card the same height regardless of title length */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color .25s ease;
}

.cos-page .cos-prod:hover .cos-prod__name { color: var(--cos-navy); }

/* Price and terms share a baseline row: the price is the answer to "how much",
   the terms line is the answer to "how do I pay for it" — which on this site
   is the whole proposition. */
.cos-prod__meta {
	margin-top: auto;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.cos-prod__price {
	font-family: var(--cos-font-display);
	font-weight: 700;
	font-size: 1.12rem;
	letter-spacing: -.025em;
	color: var(--cos-navy);
}

.cos-prod__terms {
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cos-muted);
	white-space: nowrap;
}

.cos-prod__price del { color: var(--cos-muted); font-weight: 400; font-size: .85rem; margin-right: 6px; }
.cos-prod__price ins { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
	.cos-page .cos-prod,
	.cos-prod__media img,
	.cos-prod__view { transition: none; }
	.cos-page .cos-prod:hover { transform: none; }
	.cos-page .cos-prod:hover .cos-prod__media img { transform: none; }
}

.cos-products__foot { margin-top: 40px; text-align: center; }

/* --------------------------------------------------------------------------
   6 — Credit / assurance split
   -------------------------------------------------------------------------- */

.cos-credit { background: var(--cos-surface); }

.cos-credit__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 4.5vw, 64px);
	align-items: center;
	background: linear-gradient(150deg, var(--cos-surface-2) 0%, var(--cos-yellow-soft) 140%);
	border: 1px solid var(--cos-line);
	border-radius: var(--cos-r-xl);
	padding: clamp(32px, 4.5vw, 64px);
}

.cos-bureaus { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }

.cos-bureaus li {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--cos-surface);
	border: 1px solid var(--cos-line);
	border-radius: var(--cos-r-sm);
	padding: 13px 16px;
	font-size: .9rem;
	font-weight: 600;
	color: var(--cos-ink);
}

.cos-bureaus svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--cos-navy); }

/* --------------------------------------------------------------------------
   7 — FAQ
   -------------------------------------------------------------------------- */

.cos-faq { background: var(--cos-surface-2); }

.cos-faq__list { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }

.cos-faq__item {
	background: var(--cos-surface);
	border: 1px solid var(--cos-line);
	border-radius: var(--cos-r);
	overflow: hidden;
	transition: border-color .3s ease, box-shadow .4s var(--cos-ease);
}
.cos-faq__item[open] { border-color: var(--cos-line-strong); box-shadow: var(--cos-shadow-sm); }

.cos-faq__q {
	list-style: none;
	cursor: pointer;
	padding: 20px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	font-family: var(--cos-font-display);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: -.02em;
	color: var(--cos-ink);
	line-height: 1.4;
	transition: color .25s ease;
}
.cos-faq__q::-webkit-details-marker { display: none; }
.cos-faq__q:hover { color: var(--cos-navy); }

.cos-faq__sign {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--cos-yellow-soft);
	color: var(--cos-navy);
	display: grid;
	place-items: center;
	font-size: 1.05rem;
	line-height: 1;
	transition: transform .4s var(--cos-ease), background-color .3s ease;
}
.cos-faq__item[open] .cos-faq__sign { transform: rotate(45deg); background: var(--cos-yellow); }

.cos-faq__a { padding: 0 24px 22px; font-size: .93rem; color: var(--cos-text); line-height: 1.7; }
.cos-faq__a a { color: var(--cos-navy); font-weight: 600; text-decoration: underline; }

.cos-faq__item[open] .cos-faq__a { animation: cos-fade-in .45s var(--cos-ease); }
@keyframes cos-fade-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   8 — Closing CTA
   -------------------------------------------------------------------------- */

.cos-cta {
	background: linear-gradient(140deg, var(--cos-navy) 0%, #24063d 100%);
	position: relative;
	text-align: center;
}

/* Slow breathing glow. Pinned to the content column (see .cos-net30::before). */
.cos-cta::before {
	content: "";
	position: absolute;
	inset: 0 100vmax;
	background: radial-gradient(780px 780px at 50% 50%, rgba(254, 215, 0, .2) 0%, transparent 62%);
	pointer-events: none;
	animation: cos-pulse 9s ease-in-out infinite;
}

@keyframes cos-pulse {
	0%, 100% { opacity: .75; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.09); }
}

.cos-cta > * { position: relative; z-index: 1; }
.cos-cta .cos-h2 { color: #fff; max-width: 22ch; margin-left: auto; margin-right: auto; }
.cos-cta .cos-lead { color: rgba(255, 255, 255, .74); margin-left: auto; margin-right: auto; text-align: center; }
.cos-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

.cos-cta__contact {
	margin-top: 30px;
	font-size: .88rem;
	color: rgba(255, 255, 255, .58);
}
.cos-cta__contact a { color: var(--cos-yellow); text-decoration: none; font-weight: 600; }
.cos-cta__contact a:hover { color: var(--cos-yellow); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Scroll-reveal motion
   -------------------------------------------------------------------------- */

.cos-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .8s var(--cos-ease), transform .8s var(--cos-ease);
	transition-delay: var(--cos-delay, 0ms);
	will-change: opacity, transform;
}
.cos-reveal.is-in { opacity: 1; transform: none; }

/* If JS never runs (or errors), content must still be visible. */
.cos-page.no-js .cos-reveal { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

.cos-page :focus-visible {
	outline: 3px solid var(--cos-navy);
	outline-offset: 3px;
	border-radius: 4px;
}

.cos-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.cos-page *,
	.cos-page *::before,
	.cos-page *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.cos-reveal { opacity: 1; transform: none; }
	.cos-mark::after { transform: scaleX(1); }
}

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

@media (max-width: 1199px) {
	.cos-cats__grid,
	.cos-products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
	.cos-net30__grid,
	.cos-credit__card { grid-template-columns: minmax(0, 1fr); }
	.cos-cats__grid,
	.cos-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cos-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	/* Three big numerals side by side stop reading below this width — the
	   labels wrap to four lines each. Stack, and turn the vertical dividers
	   into horizontal ones so the rhythm survives the reflow. */
	.cos-figures__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.cos-figure {
		padding: 22px 0;
		border-left: 0;
		border-top: 1px solid var(--cos-line-strong);
	}
	.cos-figure:first-child { padding-top: 0; border-top: 0; }
	.cos-figure:last-child { padding-bottom: 0; }
	.cos-figure__num { margin-bottom: 6px; }
	.cos-figure__label { max-width: none; }

	/* .cos-wrap needs no inline padding — Electro's .container already supplies
	   it, and inheriting it is what keeps us aligned with the site header. */
	.cos-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cos-section-head { align-items: flex-start; }
	.cos-page .cos-btn { padding: 15px 24px; font-size: .93rem; }
	.cos-intro__actions .cos-btn { flex: 1 1 100%; }
}

@media (max-width: 575px) {
	.cos-cats__grid,
	.cos-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.cos-cat__body { padding: 14px 14px 16px; }
	.cos-prod__body { padding: 4px 14px 16px; }
	.cos-faq__q { padding: 16px 18px; font-size: .94rem; }
	.cos-faq__a { padding: 0 18px 18px; }
}

/* --------------------------------------------------------------------------
   7b — Why Crown

   Sits between the product rail and the FAQ, both of which use --cos-surface-2.
   This one is deliberately WHITE: three tinted bands in a row would read as one
   long undifferentiated block, and this section is meant to feel like the page
   pausing to make its argument.

   The treatment is also deliberately unlike the other "list of good things" on
   the page — the trust strip is icons in a row, the Net 30 steps are circular
   numerals on navy. Here it is large ghosted editorial numerals over a hairline
   rule, the same motif as the department cards, so the page has one visual
   language rather than four.
   -------------------------------------------------------------------------- */

.cos-why { background: var(--cos-surface); }

.cos-why__head {
	max-width: 720px;
	margin: 0 auto 46px;
	text-align: center;
}

.cos-why__head .cos-eyebrow { justify-content: center; }

.cos-why__head .cos-h2 { margin-bottom: 14px; }

.cos-why__head .cos-lead { margin-inline: auto; }

.cos-why__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 34px 48px;
	max-width: 960px;
	margin: 0 auto;
}

.cos-why__item {
	padding-top: 20px;
	border-top: 1px solid var(--cos-line-strong);
}

.cos-why__n {
	display: block;
	font-family: var(--cos-font-display);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .14em;
	color: var(--cos-yellow-600);
	margin-bottom: 10px;
	font-variant-numeric: tabular-nums;
}

.cos-why__t {
	font-family: var(--cos-font-display);
	font-size: clamp(1.05rem, 1.8vw, 1.22rem);
	font-weight: 700;
	letter-spacing: -.022em;
	line-height: 1.3;
	color: var(--cos-ink);
	margin: 0 0 8px;
}

.cos-why__d {
	font-size: .95rem;
	line-height: 1.7;
	color: var(--cos-text);
	margin: 0;
	max-width: 44ch;
}

.cos-why__d a {
	color: var(--cos-navy);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--cos-yellow);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.cos-why__foot {
	margin: 44px 0 0;
	text-align: center;
}

@media (max-width: 860px) {
	.cos-why__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.cos-why__head { margin-bottom: 34px; }
	.cos-why__d { max-width: none; }
}

/* ==========================================================================
   REBALANCE 2026-07-22 — the page sells the catalog, not the payment terms.

   Prompted by the user's read of quill.com: their homepage is paper, chairs
   and K-Cups, and net-30 terms get one line in a sign-in flyout. Crown's had
   the terms as the centrepiece and the merchandise as supporting material.
   Three new components below, plus the Net 30 section demoted to a band.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Department quick-links  (.cos-quick)

   Quill runs a row of icon links under its hero. Deliberately NOT icons here:
   Crown has no icon set, and inventing twelve glyphs for "Kim's Holiday
   Corner" or "Arts & Crafts" produces the generic-clipart look the whole
   redesign is trying to escape. The live in-stock count does the work an icon
   would — it is specific, it is true, and it is the thing a buyer wants.
   -------------------------------------------------------------------------- */
.cos-quick {
	background: var(--cos-surface);
	border-bottom: 1px solid var(--cos-line);
}

.cos-quick__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.cos-page a.cos-quick__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 18px;
	border: 1px solid var(--cos-line);
	border-radius: 999px;
	background: var(--cos-surface);
	text-decoration: none;
	transition: border-color .25s ease, background-color .25s ease, transform .35s var(--cos-ease);
}

.cos-page a.cos-quick__item:hover,
.cos-page a.cos-quick__item:focus-visible {
	border-color: var(--cos-navy);
	background: var(--cos-surface-2);
	transform: translateY(-2px);
}

.cos-quick__name {
	font-family: var(--cos-font-display);
	font-weight: 700;
	font-size: .92rem;
	letter-spacing: -.01em;
	color: var(--cos-ink);
	line-height: 1.2;
}

.cos-quick__n {
	font-size: .74rem;
	color: var(--cos-muted);
	line-height: 1.2;
}

/* --------------------------------------------------------------------------
   Bento department grid  (.cos-cats__grid--bento)

   Twelve identical tiles read as a spreadsheet — every department claiming
   equal importance, which is both untrue and visually flat. Quill's grid is
   deliberately uneven, and the unevenness is what makes it scan as a shop
   rather than a directory.

   Only the FIRST tile is promoted (2×2). One focal point per grid: promoting
   two produces a checkerboard with no clear entry point, and the tile order
   already follows 90-day revenue, so tile 1 is genuinely the biggest earner.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
	.cos-cats__grid--bento {
		grid-auto-flow: dense; /* lets the smaller tiles backfill around the big one */
	}

	.cos-cats__grid--bento > :first-child {
		grid-column: span 2;
		grid-row: span 2;
	}

	/* The promoted tile is twice the width, so its 4/5 portrait ratio would
	   make it enormously tall. Let the grid rows size it instead. */
	.cos-cats__grid--bento > :first-child .cos-cat__media,
	.cos-cats__grid--bento > :first-child {
		aspect-ratio: auto;
		height: 100%;
	}

	/* Type scales up with the tile — a hero-sized card with body-sized type on
	   it looks like a mistake rather than a decision. */
	.cos-cats__grid--bento > :first-child .cos-cat__name { font-size: 1.5rem; }
	.cos-cats__grid--bento > :first-child .cos-cat__n { font-size: .9rem; }
}

/* --------------------------------------------------------------------------
   Best-seller rail  (.cos-products--best)

   Same card as the arrivals rail — deliberately. They are the same kind of
   object doing the same job, and a second card style would say "these are
   different things" when the only difference is the sort order.
   -------------------------------------------------------------------------- */
.cos-products--best { background: var(--cos-surface); }

/* Rank badges on the top three. Navy rather than the sale badge's colour so
   the two can never be confused at a glance. */
.cos-prod__badge--rank {
	background: var(--cos-navy);
	color: #fff;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Net 30 band  (.cos-terms) — replaces the old full .cos-net30 section

   One band, copy left, actions right. The old section's four-step explainer
   moved to /net-30-office-supplies/, which exists to carry exactly that.
   .cos-net30 rules are kept above: no template uses them now, but they are
   still valid components of the system.
   -------------------------------------------------------------------------- */
.cos-terms {
	background:
		radial-gradient(80% 180% at 15% 0%, var(--cos-navy-700) 0%, rgba(77, 28, 125, 0) 62%),
		var(--cos-navy);
}

.cos-terms__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(20px, 4vw, 56px);
}

.cos-terms__copy { flex: 1 1 420px; }

.cos-page .cos-terms .cos-h2 {
	color: #fff;
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	margin-bottom: .4em;
}

.cos-page .cos-terms p {
	color: rgba(255, 255, 255, .78);
	margin: 0;
	max-width: 62ch;
	font-size: .98rem;
}

.cos-terms__actions {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

@media (max-width: 575px) {
	.cos-terms__actions { width: 100%; }
	.cos-terms__actions .cos-btn { flex: 1 1 100%; }
}

/* ==========================================================================
   PREMIUM PASS — 2026-07-22
   "give more life to the mock homepage, specially the backgrounds … more
   branding, background designs, movement … make it look expensive"

   Four systems, in the order they matter:
     1. GRAIN      — the single biggest upgrade for flat colour bands
     2. AURORA     — soft drifting brand-colour light, per section
     3. CROWN      — the brand mark as a masked watermark
     4. MARQUEE    — the one piece of literal movement

   RULES OBSERVED THROUGHOUT (see the .cos-bleed docs at the top of this file):
     - Decorative layers on a .cos-bleed section MUST use `inset: 0 100vmax`.
       Plain `inset: 0` spans the 200vmax padding box, so any % positioning
       lands somewhere off-screen.
     - Every layer is pointer-events: none and aria-hidden / pseudo-element,
       so none of it is reachable by keyboard or screen reader.
     - All motion sits inside @media (prefers-reduced-motion: no-preference).
       Nothing here is load-bearing; with motion off the page is simply static.
     - No layer animates a property that triggers layout. Only transform and
       opacity, so each stays on the compositor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 — Grain

   A flat #2e094e band reads as "a coloured div". The same band with ~3% noise
   reads as a printed surface. It is one gradient's worth of bytes: an inline
   SVG feTurbulence, no HTTP request, no image asset to maintain.

   Applied with ::after so the section's own ::before stays free for aurora.
   -------------------------------------------------------------------------- */
.cos-grain { position: relative; }

.cos-grain::after {
	content: "";
	position: absolute;
	inset: 0 100vmax;
	pointer-events: none;
	z-index: 0;
	opacity: .035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 160px 160px;
}

/* On dark bands the grain has to be lighter than the surface to be visible at
   all; on light bands it must be darker. Same layer, inverted blend. */
.cos-grain--dark::after { mix-blend-mode: overlay; opacity: .07; }
.cos-grain--light::after { mix-blend-mode: multiply; opacity: .028; }

/* Section content must sit above both decorative layers. */
.cos-grain > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   2 — Aurora

   Two or three oversized, heavily-blurred brand-colour ellipses drifting
   slowly behind a section. The blur is what stops them reading as "gradient
   blobs" — at 80px+ they become light rather than shapes.

   Scoped per section rather than one shared component because the useful
   position differs each time (behind the headline, behind the numerals…).
   -------------------------------------------------------------------------- */
.cos-aurora { position: relative; overflow: hidden; }

.cos-aurora > * { position: relative; z-index: 1; }

/* `inset: 0 100vmax` pins this to the CONTENT column, not the 200vmax padding
   box, so the blob percentages below mean what they look like they mean (see
   the .cos-bleed docs at the top of this file).

   It must NOT have its own `overflow: hidden`. The first build did, and a
   90px-blurred blob was then sliced off flat at the content column edge — a
   hard-edged glowing rectangle sitting in the middle of the section, which is
   the exact opposite of the intended effect. The section's own overflow
   (`.cos-aurora`) clips at the padding box instead, which is off-screen. */
.cos-aurora__layer {
	position: absolute;
	inset: 0 100vmax;
	pointer-events: none;
	z-index: 0;
}

.cos-aurora__blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .5;
	will-change: transform;
}

.cos-aurora__blob--y {
	width: 46vw;
	height: 46vw;
	max-width: 720px;
	max-height: 720px;
	background: radial-gradient(circle, rgba(254, 215, 0, .55) 0%, rgba(254, 215, 0, 0) 70%);
}

.cos-aurora__blob--v {
	width: 40vw;
	height: 40vw;
	max-width: 640px;
	max-height: 640px;
	background: radial-gradient(circle, rgba(109, 40, 173, .5) 0%, rgba(109, 40, 173, 0) 70%);
}

/* On the navy bands the violet blob would vanish — lift it toward magenta so
   there is actually a hue difference to see. */
.cos-aurora--dark .cos-aurora__blob--v {
	background: radial-gradient(circle, rgba(150, 60, 220, .55) 0%, rgba(150, 60, 220, 0) 70%);
	opacity: .6;
}

.cos-aurora--dark .cos-aurora__blob--y { opacity: .22; }

@media (prefers-reduced-motion: no-preference) {
	.cos-aurora__blob--y { animation: cos-drift-a 26s ease-in-out infinite alternate; }
	.cos-aurora__blob--v { animation: cos-drift-b 32s ease-in-out infinite alternate; }
}

/* Deliberately small travel. Big movement makes a page feel restless; this is
   meant to be noticed only if you stop and look. */
@keyframes cos-drift-a {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(4%, -6%, 0) scale(1.12); }
}

@keyframes cos-drift-b {
	from { transform: translate3d(0, 0, 0) scale(1.08); }
	to   { transform: translate3d(-5%, 5%, 0) scale(1); }
}

/* --------------------------------------------------------------------------
   3 — Crown watermark

   The brand mark (a Basquiat-ish hand-drawn crown) used as a MASK rather than
   an <img>. The source PNG is a two-tone grey+yellow artwork; dropped in at
   low opacity it goes muddy and fights whatever is behind it. Masking throws
   the artwork's colour away and keeps only its silhouette, which can then be
   painted in a single brand colour at any opacity.
   -------------------------------------------------------------------------- */
.cos-crownmark {
	position: absolute;
	pointer-events: none;
	z-index: 0;
	--cos-crown-src: url("/wp-content/uploads/2020/04/crown-white_crown-icon-copy.png");
	-webkit-mask-image: var(--cos-crown-src);
	mask-image: var(--cos-crown-src);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
}

/* Fallback: if mask-image is unsupported the element would render as a solid
   coloured square, which is far worse than no watermark at all. */
@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
	.cos-crownmark { display: none; }
}

/* --------------------------------------------------------------------------
   4 — Brand marquee

   The one piece of literal movement on the page. Kept honest: it states what
   Crown sells and the terms, nothing promotional.

   Built as two identical spans translating -50% together, which is what makes
   the loop seamless — a single track visibly snaps back at the end.
   -------------------------------------------------------------------------- */
/* No .cos-wrap inside this one — a marquee that starts and stops at the
   content column reads as a broken row rather than a continuous band. */
.cos-ticker {
	background: var(--cos-navy);
	border-block: 1px solid rgba(255, 255, 255, .08);
	overflow: hidden;
	padding-block: 14px;
}

.cos-ticker__track {
	display: flex;
	width: max-content;
}

.cos-ticker__group {
	display: flex;
	align-items: center;
	gap: 34px;
	padding-right: 34px;
	flex: 0 0 auto;
}

.cos-ticker__item {
	font-family: var(--cos-font-display);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
	white-space: nowrap;
}

/* The crown glyph as the separator — the mark doing a job, not decoration. */
.cos-ticker__sep {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	background: var(--cos-yellow);
	--cos-crown-src: url("/wp-content/uploads/2020/04/crown-white_crown-icon-copy.png");
	-webkit-mask: var(--cos-crown-src) center / contain no-repeat;
	mask: var(--cos-crown-src) center / contain no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
	.cos-ticker__track { animation: cos-ticker 46s linear infinite; }
	.cos-ticker:hover .cos-ticker__track { animation-play-state: paused; }
}

@keyframes cos-ticker {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* --------------------------------------------------------------------------
   5 — Section-specific application
   -------------------------------------------------------------------------- */

/* Intro: aurora behind the headline, crown bleeding off the right edge. This
   is the first thing below the frozen slider, so it carries the most weight. */
.cos-intro .cos-crownmark {
	width: min(38vw, 520px);
	aspect-ratio: 1;
	right: -6%;
	top: 50%;
	transform: translateY(-50%) rotate(-8deg);
	background: var(--cos-navy);
	opacity: .045;
}

.cos-intro .cos-aurora__blob--y { right: -8%; top: -30%; }
.cos-intro .cos-aurora__blob--v { left: -12%; bottom: -40%; opacity: .28; }

/* Figures: a single wide wash under the numerals so the band is not flat. */
.cos-figures {
	background:
		radial-gradient(1100px 300px at 50% 0%, rgba(109, 40, 173, .07), transparent 70%),
		var(--cos-surface-2);
}

/* --------------------------------------------------------------------------
   Departments — "engineering paper"

   The one section where the background gets to say something. Every other
   surface on this page uses light and colour; this one uses a GRID, because
   the thing being sold is stationery. Ruled paper is the most on-brand texture
   an office-supplies shop has available, and it is not a texture any of the
   competitors use.

   Three things keep it from reading like a cheap tiled background:

     1. TWO grids, not one — a 34px minor rule plus a 170px major rule every
        fifth line. That is what actual graph paper does, and it is the
        difference between "paper" and "table borders".
     2. It is MASKED to fade out radially, so it has no visible edge and never
        collides with the section boundary. An unmasked repeating pattern is
        the tell of a stock background.
     3. It sits at ~5% on white. Legible as texture, invisible as lines.

   The grid renders on ::before, pinned with `inset: 0 100vmax` like every
   other decorative layer here (see the .cos-bleed notes at the top of the
   file). Content is lifted above it below.
   -------------------------------------------------------------------------- */
.cos-cats {
	background:
		radial-gradient(900px 500px at 100% 0%, rgba(254, 215, 0, .10), transparent 65%),
		radial-gradient(700px 600px at 0% 100%, rgba(109, 40, 173, .06), transparent 62%),
		var(--cos-surface);
}

.cos-cats::before {
	content: "";
	position: absolute;
	inset: 0 100vmax;
	pointer-events: none;
	z-index: 0;

	background-image:
		/* major rules */
		linear-gradient(rgba(46, 9, 78, .14) 1px, transparent 1px),
		linear-gradient(90deg, rgba(46, 9, 78, .14) 1px, transparent 1px),
		/* minor rules */
		linear-gradient(rgba(46, 9, 78, .07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(46, 9, 78, .07) 1px, transparent 1px);
	background-size: 170px 170px, 170px 170px, 34px 34px, 34px 34px;
	background-position: center center;

	-webkit-mask-image: radial-gradient(115% 85% at 50% 42%, #000 32%, transparent 82%);
	mask-image: radial-gradient(115% 85% at 50% 42%, #000 32%, transparent 82%);
}

/* The tiles, heading and "view all" link must all sit above the paper. */
.cos-cats > * { position: relative; z-index: 1; }

/* The crown sits low-left, large and rotated, so it reads as a printed mark on
   the paper rather than a logo placement. Kept under the grid's fade so the
   two textures do not compete in the same spot. */
/* Top-right, in the band of white beside the section heading.

   It was first placed bottom-left, which put it entirely behind the tile grid
   — a watermark nobody could ever see. On a section whose content fills the
   full width, the only usable space for a background mark is the header band
   above the grid. Check what actually covers the area before positioning a
   decorative layer. */
.cos-cats .cos-crownmark {
	width: min(22vw, 260px);
	aspect-ratio: 1;
	right: 1%;
	top: -4%;
	transform: rotate(11deg);
	background: var(--cos-navy);
	opacity: .06;
}

@media (max-width: 991px) {
	/* The heading wraps to more lines and the "view all" link moves under it,
	   so there is no longer a clear band of white to sit in. */
	.cos-cats .cos-crownmark { display: none; }
}

/* Best sellers sits between two tinted sections; give it its own light so the
   three do not read as one undifferentiated slab. */
.cos-products--best {
	background:
		radial-gradient(800px 450px at 0% 100%, rgba(109, 40, 173, .06), transparent 66%),
		var(--cos-surface);
}

/* Net 30 band + closing CTA: the two dark moments. Both get aurora, grain and
   a crown, at different scales so they are not the same picture twice. */
.cos-terms .cos-crownmark {
	width: min(30vw, 380px);
	aspect-ratio: 1;
	right: 2%;
	top: 50%;
	transform: translateY(-50%) rotate(6deg);
	background: #fff;
	opacity: .05;
}

.cos-terms .cos-aurora__blob--v { left: -6%; top: -60%; }
.cos-terms .cos-aurora__blob--y { right: 6%; bottom: -70%; }

.cos-cta .cos-crownmark {
	width: min(46vw, 620px);
	aspect-ratio: 1;
	left: 50%;
	top: 46%;
	transform: translate(-50%, -50%);
	background: #fff;
	opacity: .04;
}

.cos-cta .cos-aurora__blob--y { left: 12%; top: -50%; }
.cos-cta .cos-aurora__blob--v { right: 4%; bottom: -60%; }

/* Why Crown: a warm corner so the section reads as the brand moment it is. */
.cos-why {
	background:
		radial-gradient(760px 520px at 8% 8%, rgba(254, 215, 0, .11), transparent 62%),
		var(--cos-surface);
}

/* FAQ closes the light run before the dark CTA. */
.cos-faq {
	background:
		radial-gradient(900px 420px at 50% 100%, rgba(109, 40, 173, .06), transparent 70%),
		var(--cos-surface-2);
}

@media (max-width: 767px) {
	/* Blur at 90px over a near-full-width blob is the most expensive paint on
	   the page; on phones the blobs are cropped anyway, so cut the cost. */
	.cos-aurora__blob { filter: blur(60px); }
	.cos-crownmark { opacity: .03 !important; }
}

/* --------------------------------------------------------------------------
   HERO  (replaced Revolution Slider, 2026-07-22)

   Layout: the classic diagonal split — copy on the normal content column,
   photo bleeding from mid-page to the right edge of the viewport, with an
   angled cut between them. Modelled on a Tailwind Plus hero the owner licenses
   and supplied.

   Hand-built rather than imported for a purely technical reason: this site has
   no Tailwind, and pulling in a utility framework immediately after stripping
   536 KB of Revolution Slider for speed would give the weight straight back.
   The pattern is the same; the implementation is ~90 lines of our own CSS and
   adds no dependency.

   ARTWORK SHAPE — the slot flexes a long way, so the source has to suit it:

       viewport 1265  ->  663x871   0.76:1   (portrait)
       viewport 1425  ->  767x917   0.84:1
       viewport 1905  -> 1007x924   1.09:1
       viewport 2545  -> 1327x924   1.44:1
       tablet   768   ->  768x512   1.50:1
       mobile   485   ->  500x400   1.25:1

   The original 1628x500 banner (3.26:1) could only ever show ~26% of itself
   here. It was replaced 2026-07-22 with `hero-crown-1.png`, a 3:4 portrait
   recomposition, which fills every one of those slots.

   Because the slot ranges 0.76 -> 1.50, a portrait master gets cropped to
   roughly its middle half vertically on the widest screens. Keep the subject
   inside that central band in any replacement artwork.

   The photo is a plain <img> with object-fit, NOT a CSS background, so it can
   carry real alt text and be preloaded as the LCP element — two things a
   background-image cannot do.

   GEOMETRY, and why it is written this way:
     - .cos-hero__mediawrap is `inset: 0 100vmax`, i.e. pinned to the CONTENT
       column (the .cos-bleed padding box is 200vmax wider than the page, so
       percentages against the section itself are meaningless — see the bleed
       notes at the top of this file).
     - Inside it, the media starts at 50% and is pushed out to the viewport
       edge with `right: calc((100% - 100vw) / 2)`. 100% is the content column,
       so that value is exactly the gutter, negated. 100vw includes the
       scrollbar and therefore overshoots by ~7px — harmless, because it is a
       photo bleeding off-screen and body carries `overflow-x: clip`.
   -------------------------------------------------------------------------- */
.cos-hero {
	position: relative;
	background:
		radial-gradient(900px 460px at 20% -20%, rgba(254, 215, 0, .16), transparent 62%),
		radial-gradient(700px 420px at 2% 108%, rgba(46, 9, 78, .06), transparent 60%),
		var(--cos-surface);
	border-bottom: 1px solid var(--cos-line);
	overflow: hidden;
}

.cos-hero__copy { max-width: 34em; }

.cos-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 26px;
}

.cos-hero__note {
	font-size: .88rem;
	color: var(--cos-muted);
	margin: 0;
}

.cos-hero__media { position: relative; }

.cos-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* The subject sits slightly below centre in both photos. */
	object-fit: cover;
	/* Centred horizontally now that the source is a 3:4 portrait rather than a
	   3.26:1 strip. Nudged up vertically because the desk sits at roughly 27-68%
	   of the frame — this keeps it centred in the widest slots, where cover
	   crops to the middle ~half of the height. */
	object-position: 50% 48%;
	display: block;
}

/* Cross-fade with zero JS. `--b` starts transparent so the first paint is
   never a blank box if the animation has not begun.

   ⚠️ GATED ON THERE ACTUALLY BEING A SECOND IMAGE. `cos-hero-fade-a` animates
   opacity 1 -> 0 -> 1, so if it runs with only one photo present the hero
   simply fades to an empty box halfway through the cycle. `:has()` makes the
   fade switch itself on the moment a second <img class="cos-hero__img--b">
   is added, and stay off until then — no CSS edit needed either way. Browsers
   without :has() get a static hero, which is the safe outcome. */
.cos-hero__img--b { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
	.cos-hero__media:has(.cos-hero__img--b) .cos-hero__img--a {
		animation: cos-hero-fade-a 14s ease-in-out infinite;
	}
	.cos-hero__media:has(.cos-hero__img--b) .cos-hero__img--b {
		animation: cos-hero-fade-b 14s ease-in-out infinite;
	}
}

@keyframes cos-hero-fade-a {
	0%, 42% { opacity: 1; }
	50%, 92% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes cos-hero-fade-b {
	0%, 42% { opacity: 0; }
	50%, 92% { opacity: 1; }
	100% { opacity: 0; }
}

/* --- desktop: the split ---------------------------------------------------- */
@media (min-width: 992px) {
	.cos-hero {
		display: flex;
		align-items: center;
		min-height: clamp(400px, 46vh, 520px);

		/* ⚠️ The hero was 918px tall because it was DOUBLE-PADDED: .cos-section
		   contributes clamp(56px, 7vw, 104px) top and bottom, and the copy
		   column was adding another 96px each — 394px of padding around ~524px
		   of actual content. Overriding the section padding here and removing
		   the copy's own (below) is what fixes it; raising or lowering
		   min-height never touched it, because min-height was never binding. */
		padding-block: clamp(36px, 4vw, 56px);
	}

	.cos-hero__mediawrap {
		position: absolute;
		inset: 0 100vmax;
		pointer-events: none;
		z-index: 0;
	}

	.cos-hero__media {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 48%;
		right: calc((100% - 100vw) / 2);
		pointer-events: auto;

		/* The angled cut. Wider at the top than the bottom, so the diagonal
		   leans with the reading direction rather than against it. Falls back
		   to a straight edge where clip-path is unsupported — which is a
		   perfectly acceptable hero, not a broken one. */
		clip-path: polygon(86px 0, 100% 0, 100% 100%, 18px 100%);
	}

	.cos-hero__grid {
		position: relative;
		z-index: 1;
		width: 100%;
	}

	/* Copy must clear the photo's slanted edge at every height. No padding-block
	   here — the section supplies it; see the double-padding note above. */
	.cos-hero__copy {
		max-width: min(46%, 30em);
	}
}

@media (min-width: 1400px) {
	/* On very wide screens a 48% split leaves the copy stranded in the middle
	   of a large empty column; give the photo slightly more. */
	.cos-hero__media { left: 46%; }
}

/* --- below 992px: stacked -------------------------------------------------- */
@media (max-width: 991px) {
	/* No padding above the photo. The desktop rule above overrides
	   .cos-section's padding-block, but that override sits inside a
	   min-width query, so on a phone the section fell back to
	   clamp(56px, 7vw, 104px) = 56px — and because the image is full-bleed
	   edge to edge here, that padding read as a dead gap between the site
	   header and the hero rather than as breathing room. The photo now meets
	   the header directly, which is also the stronger look. */
	.cos-hero { padding-top: 0; }

	.cos-hero__mediawrap {
		/* Full-bleed edge to edge, which reads better than an inset card at
		   phone width and finally gives the hero real height — the slider
		   could only ever manage a 3.26:1 letterbox here. */
		margin-inline: -100vmax;
		padding-inline: 100vmax;
		margin-bottom: clamp(24px, 5vw, 36px);
	}

	.cos-hero__media {
		aspect-ratio: 3 / 2;
		margin-inline: calc((100% - 100vw) / 2);
	}
}

@media (max-width: 575px) {
	/* Squarer again, so the desk photos keep a subject in frame instead of
	   becoming a band of wood grain. */
	.cos-hero__media { aspect-ratio: 5 / 4; }
}