/*
 * Officina core.
 *
 * Every colour, size and shape here comes from a token that theme.json defines
 * and WordPress emits. Nothing in this file names a colour. That is the rule
 * that lets a second design be one more JSON file rather than a second
 * stylesheet, and it is checked by a test.
 *
 * The fallbacks after each var() are the Clinical values, so the page still
 * renders sensibly if global styles are slow, missing or being edited.
 */

/* ------------------------------------------------------------- aliases */

:root {
	--c-base:      var(--wp--preset--color--base, #F7F9FA);
	--c-surface:   var(--wp--preset--color--surface, #FFFFFF);
	--c-band:      var(--wp--preset--color--surface-alt, #ECF2F3);
	--c-text:      var(--wp--preset--color--contrast, #101E24);
	--c-muted:     var(--wp--preset--color--muted, #566A71);
	--c-primary:   var(--wp--preset--color--primary, #12303D);
	--c-accent:    var(--wp--preset--color--accent, #0B6B6E);
	--c-onAccent:  var(--wp--preset--color--on-accent, #FFFFFF);
	--c-line:      var(--wp--preset--color--line, #D3DEE1);
	--c-dark:      var(--wp--preset--color--dark, #0C1E26);
	--c-onDark:    var(--wp--preset--color--on-dark, #E8F0F1);

	/* The variant chooses these. Never name a family here: doing so is how a
	 * design variant silently fails to change the typography. */
	--f-body:      var(--wp--custom--font--body, system-ui, sans-serif);
	--f-head:      var(--wp--custom--font--head, Georgia, serif);

	--t-xs:        var(--wp--preset--font-size--x-small, 0.8125rem);
	--t-sm:        var(--wp--preset--font-size--small, 0.9375rem);
	--t-md:        var(--wp--preset--font-size--medium, 1.0625rem);
	--t-lg:        var(--wp--preset--font-size--large, 1.25rem);
	--t-xl:        var(--wp--preset--font-size--x-large, 1.75rem);
	--t-2xl:       var(--wp--preset--font-size--xx-large, 2.5rem);
	--t-display:   var(--wp--preset--font-size--display, 3.5rem);

	--s-1:         var(--wp--preset--spacing--20, 0.5rem);
	--s-2:         var(--wp--preset--spacing--30, 0.875rem);
	--s-3:         var(--wp--preset--spacing--40, 1.25rem);
	--s-4:         var(--wp--preset--spacing--50, 2rem);
	--s-5:         var(--wp--preset--spacing--60, 3rem);
	--s-6:         var(--wp--preset--spacing--70, 4.5rem);
	--s-7:         var(--wp--preset--spacing--80, 6.5rem);

	--r-sm:        var(--wp--custom--radius--sm, 4px);
	--r-md:        var(--wp--custom--radius--md, 6px);
	--r-lg:        var(--wp--custom--radius--lg, 10px);
	--r-pill:      var(--wp--custom--radius--pill, 999px);

	--stroke:      var(--wp--custom--stroke--width, 1px);
	--stroke-str:  var(--wp--custom--stroke--strong, 1px);

	--shade-card:  var(--wp--custom--shade--card, 0 1px 2px rgba(16,30,36,.05));
	--shade-up:    var(--wp--custom--shade--raised, 0 4px 16px rgba(16,30,36,.08));

	--measure:     var(--wp--custom--measure, 68ch);
	--wrap:        1200px;
	--gutter:      clamp(1rem, 4vw, 2.5rem);

	--focus:       var(--c-accent);
}

/* ---------------------------------------------------------------- base */

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

html { -webkit-text-size-adjust: 100%; }

/*
 * Full-bleed bands are sized against the viewport, which on a classic scrollbar
 * is wider than the content box. Clip rather than scroll. `clip` is deliberate:
 * unlike `hidden` it does not create a scroll container, so sticky and fixed
 * positioning keep working.
 */
html:has(.officina) { overflow-x: clip; }

body {
	margin: 0;
	background: var(--c-base);
	color: var(--c-text);
	font-family: var(--f-body);
	font-size: var(--t-md);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
svg { fill: none; }

h1, h2, h3, h4 {
	font-family: var(--f-head);
	color: var(--c-primary);
	font-weight: 600;
	line-height: 1.15;
	margin: 0;
	text-wrap: balance;
}
h1 { font-size: var(--t-display); letter-spacing: -0.02em; }
h2 { font-size: var(--t-2xl); letter-spacing: -0.015em; }
h3 { font-size: var(--t-lg); letter-spacing: -0.005em; }

p { margin: 0; }

a { color: var(--c-accent); }
a:hover { text-decoration: none; }

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}

/* ----------------------------------------------------------- utilities */

.ofc-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.ofc-wrap--narrow { max-width: 860px; }

.ofc-flow > * + * { margin-block-start: var(--s-3); }

.ofc-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip-path: inset(50%);
	overflow: hidden; white-space: nowrap;
}

.ofc-skip {
	position: absolute; left: var(--s-3); top: -100%;
	z-index: 100;
	background: var(--c-accent); color: var(--c-onAccent);
	padding: var(--s-2) var(--s-3);
	border-radius: 0 0 var(--r-sm) var(--r-sm);
	text-decoration: none;
}
.ofc-skip:focus { top: 0; }

.ofc-eyebrow {
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-accent);
	margin: 0 0 var(--s-2);
}
.ofc-eyebrow--onDark { color: inherit; opacity: .72; }

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

.ofc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-1);
	min-height: 48px;
	padding: 0.75rem 1.5rem;
	border: var(--stroke-str) solid transparent;
	border-radius: var(--r-sm);
	background: var(--c-accent);
	color: var(--c-onAccent);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.ofc-btn:hover { background: color-mix(in srgb, var(--c-accent) 86%, black); color: var(--c-onAccent); }

.ofc-btn--ghost {
	background: transparent;
	color: var(--c-accent);
	border-color: var(--c-line);
}
.ofc-btn--ghost:hover { background: var(--c-band); color: var(--c-accent); border-color: var(--c-accent); }

.ofc-btn--onDark { background: var(--c-onDark); color: var(--c-dark); }
.ofc-btn--onDark:hover { background: #fff; color: var(--c-dark); }

.ofc-btn--ghostDark {
	background: transparent;
	color: var(--c-onDark);
	border-color: color-mix(in srgb, var(--c-onDark) 45%, transparent);
}
.ofc-btn--ghostDark:hover { background: color-mix(in srgb, var(--c-onDark) 14%, transparent); color: var(--c-onDark); }

.ofc-btn--sm { min-height: 44px; padding: 0.625rem 1rem; font-size: var(--t-sm); }

/* --------------------------------------------------------------- header */

.ofc-header { background: var(--c-surface); border-bottom: var(--stroke) solid var(--c-line); }

.ofc-header__strip {
	background: var(--c-dark);
	color: var(--c-onDark);
	font-size: var(--t-xs);
}
.ofc-header__strip-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--s-1) var(--s-4);
	min-height: 40px;
	padding-block: var(--s-1);
}
.ofc-strip-item { display: inline-flex; align-items: center; gap: .4em; }
.ofc-strip-item--email { color: inherit; text-decoration: none; }
.ofc-strip-item--email:hover { text-decoration: underline; }
.ofc-countdown strong { font-weight: 600; }
.ofc-countdown[hidden] { display: none; }
/* The toolkit's countdown, when it has the job, takes the strip's colours. */
.ofc-header__strip .oft-scope.oft-countdown { margin: 0; font-size: inherit; color: inherit; }

.ofc-header__main-inner {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	min-height: 76px;
	padding-block: var(--s-2);
}

.ofc-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	text-decoration: none;
	color: var(--c-primary);
	flex-shrink: 1;
	min-width: 0;
}
.ofc-brand__mark {
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	flex: none;
	border-radius: var(--r-md);
	background: var(--c-accent);
	color: var(--c-onAccent);
}
.ofc-brand__mark svg { width: 21px; height: 21px; }
.ofc-brand__logo { max-height: 46px; width: auto; }
.ofc-brand__name {
	font-family: var(--f-head);
	font-size: var(--t-lg);
	font-weight: 600;
	letter-spacing: -0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.ofc-search {
	position: relative;
	flex: 1 1 auto;
	max-width: 480px;
	margin-inline: auto;
}
.ofc-search__icon {
	position: absolute; left: 14px; top: 50%;
	width: 18px; height: 18px;
	transform: translateY(-50%);
	color: var(--c-muted);
	pointer-events: none;
}
.ofc-search__field {
	width: 100%;
	min-height: 46px;
	padding: 0 var(--s-3) 0 42px;
	border: var(--stroke) solid var(--c-line);
	border-radius: var(--r-pill);
	background: var(--c-base);
	color: var(--c-text);
	font: inherit;
	font-size: var(--t-sm);
}
.ofc-search__field::placeholder { color: var(--c-muted); }
.ofc-search__field:focus { border-color: var(--c-accent); background: var(--c-surface); }

.ofc-header__actions {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin-inline-start: auto;
	flex: none;
}
.ofc-action {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 48px;
	min-height: 48px;
	justify-content: center;
	padding-inline: var(--s-1);
	color: var(--c-primary);
	text-decoration: none;
	font-size: var(--t-xs);
	position: relative;
}
.ofc-action svg { width: 21px; height: 21px; }
.ofc-action:hover { color: var(--c-accent); }
.ofc-action--phone { flex-direction: row; gap: var(--s-1); font-size: var(--t-sm); font-weight: 600; }
.ofc-action--phone svg { width: 17px; height: 17px; }

.ofc-basket-count {
	position: absolute;
	top: 2px; right: 2px;
	min-width: 18px; height: 18px;
	display: grid; place-items: center;
	padding-inline: 4px;
	border-radius: var(--r-pill);
	background: var(--c-accent);
	color: var(--c-onAccent);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}
.ofc-basket-count[hidden] { display: none; }   /* display:grid above would otherwise override hidden */
.ofc-basket-count.is-dot { min-width: 10px; width: 10px; height: 10px; padding: 0; top: 5px; right: 5px; }

.ofc-burger {
	display: none;
	width: 48px; height: 48px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.ofc-burger span[aria-hidden] {
	display: block;
	width: 21px; height: 2px;
	background: var(--c-primary);
	border-radius: 2px;
}

.ofc-nav { border-top: var(--stroke) solid var(--c-line); }
.ofc-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-4);
	list-style: none;
	margin: 0;
	padding: 0;
}
.ofc-nav__list a {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	color: var(--c-primary);
	font-size: var(--t-sm);
	font-weight: 500;
	text-decoration: none;
}
.ofc-nav__list a:hover { color: var(--c-accent); }

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

.ofc-hero {
	background: var(--c-dark);
	color: var(--c-onDark);
	padding-block: clamp(3rem, 8vw, 6rem);
}
.ofc-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}
.ofc-hero__copy { max-width: 36rem; }

/* The panel beside the hero copy is the shop's real front door: people arrive
   knowing the complaint, not the product. Live categories, not decoration. */
.ofc-hero__panel {
	background: var(--c-surface);
	border-radius: var(--r-lg);
	padding: var(--s-3);
	box-shadow: var(--shade-up);
}
.ofc-hero__panel-title {
	font-family: var(--f-head);
	font-size: var(--t-md);
	font-weight: 600;
	color: var(--c-primary);
	margin: 0 0 var(--s-2);
	padding-inline: var(--s-1);
}
.ofc-hero__panel-list { list-style: none; margin: 0; padding: 0; }
.ofc-hero__panel-list li + li { border-top: var(--stroke) solid var(--c-line); }
.ofc-hero__panel-link {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	min-height: 52px;
	padding-inline: var(--s-1);
	color: var(--c-primary);
	text-decoration: none;
	font-size: var(--t-sm);
	font-weight: 500;
}
.ofc-hero__panel-link:hover { color: var(--c-accent); }
.ofc-hero__panel-count { margin-inline-start: auto; font-size: var(--t-xs); font-weight: 400; color: var(--c-muted); }
.ofc-hero__panel-link svg { width: 16px; height: 16px; flex: none; color: var(--c-muted); }
.ofc-hero__panel-more {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: var(--s-1);
	margin-top: var(--s-1);
	font-size: var(--t-sm);
	font-weight: 600;
}
.ofc-hero__title {
	color: inherit;
	font-size: var(--t-display);
	margin: 0 0 var(--s-3);
}
.ofc-hero__text {
	font-size: var(--t-lg);
	line-height: 1.5;
	max-width: 40rem;
	opacity: .88;
	margin: 0 0 var(--s-4);
}
.ofc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-bottom: var(--s-5);
}
.ofc-hero__promises {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-4);
	list-style: none;
	margin: 0;
	padding: var(--s-3) 0 0;
	border-top: var(--stroke) solid color-mix(in srgb, var(--c-onDark) 22%, transparent);
	font-size: var(--t-sm);
}
.ofc-hero__promises li { display: inline-flex; align-items: center; gap: var(--s-1); opacity: .92; }
.ofc-hero__promises svg { width: 16px; height: 16px; flex: none; }

/* ------------------------------------------------------------ trust bar */

.ofc-trust { background: var(--c-surface); border-bottom: var(--stroke) solid var(--c-line); }
.ofc-trust__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--s-3) var(--s-4);
	list-style: none;
	margin: 0;
	padding: var(--s-4) 0;
}
.ofc-trust__item { display: flex; align-items: center; gap: var(--s-2); }
.ofc-trust__icon { width: 26px; height: 26px; flex: none; color: var(--c-accent); }
.ofc-trust__body { display: flex; flex-direction: column; min-width: 0; }
.ofc-trust__label { font-size: var(--t-sm); font-weight: 600; color: var(--c-primary); }
.ofc-trust__number { font-size: var(--t-xs); color: var(--c-muted); }
a.ofc-trust__number { color: var(--c-accent); }

/* -------------------------------------------------------------- section */

.ofc-section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.ofc-section--band { background: var(--c-band); }
.ofc-section--dark { background: var(--c-dark); color: var(--c-onDark); }
.ofc-section--dark h2, .ofc-section--dark h3 { color: inherit; }

.ofc-head { margin-bottom: var(--s-5); }
.ofc-head--center { text-align: center; }
.ofc-head--center .ofc-head__text { margin-inline: auto; }
.ofc-head--left { text-align: left; }
.ofc-head__title { margin: 0; }
.ofc-head__text {
	margin: var(--s-2) 0 0;
	max-width: 52ch;
	color: var(--c-muted);
	font-size: var(--t-lg);
}
.ofc-section--dark .ofc-head__text { color: inherit; opacity: .82; }

.ofc-section__more { margin: var(--s-5) 0 0; text-align: center; }

/* ---------------------------------------------------- category tiles */

.ofc-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--s-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.ofc-tile { display: flex; }
.ofc-tile__link {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	width: 100%;
	min-height: 76px;
	padding: var(--s-2);
	border: var(--stroke) solid var(--c-line);
	border-radius: var(--r-md);
	background: var(--c-surface);
	color: var(--c-primary);
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.ofc-tile__link:hover { border-color: var(--c-accent); box-shadow: var(--shade-card); }
.ofc-tile__media {
	display: grid;
	place-items: center;
	width: 52px; height: 52px;
	flex: none;
	overflow: hidden;
	border-radius: var(--r-sm);
	background: var(--c-band);
}
.ofc-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.ofc-tile__initial {
	font-family: var(--f-head);
	font-size: var(--t-lg);
	font-weight: 600;
	color: var(--c-accent);
}
.ofc-tile__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ofc-tile__name { font-weight: 600; font-size: var(--t-sm); line-height: 1.3; }
.ofc-tile__count { font-size: var(--t-xs); color: var(--c-muted); }
.ofc-tile__chevron { width: 18px; height: 18px; flex: none; color: var(--c-muted); }

/* -------------------------------------------------------------- products */

.ofc-products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
	gap: var(--s-3);
	list-style: none;
	margin: 0;
	padding: 0;
}
.ofc-product {
	display: flex;
	flex-direction: column;
	border: var(--stroke) solid var(--c-line);
	border-radius: var(--r-md);
	background: var(--c-surface);
	overflow: hidden;
}
.ofc-product__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--c-band);
}
.ofc-product__media img { width: 100%; height: 100%; object-fit: cover; }
.ofc-product__body { padding: var(--s-3) var(--s-3) var(--s-2); flex: 1; }
.ofc-product__name { font-size: var(--t-md); line-height: 1.35; margin: 0 0 var(--s-1); }
.ofc-product__name a { color: var(--c-primary); text-decoration: none; }
.ofc-product__name a:hover { color: var(--c-accent); }
.ofc-product__price { font-weight: 600; color: var(--c-text); }
.ofc-product__price del { color: var(--c-muted); font-weight: 400; margin-inline-end: .4em; }
.ofc-product__stock { font-size: var(--t-xs); color: var(--c-muted); margin-top: var(--s-1); }
.ofc-product__actions {
	display: flex;
	gap: var(--s-1);
	padding: 0 var(--s-3) var(--s-3);
}
.ofc-product__actions .ofc-btn { flex: 1; }

.ofc-badge {
	position: absolute;
	top: var(--s-2); left: var(--s-2);
	padding: 3px 8px;
	border-radius: var(--r-sm);
	background: var(--c-surface);
	color: var(--c-primary);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	box-shadow: var(--shade-card);
}

/* ----------------------------------------------------------------- steps */

.ofc-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--s-4);
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: ofc-step;
}
.ofc-step__number {
	display: grid;
	place-items: center;
	width: 42px; height: 42px;
	margin-bottom: var(--s-2);
	border-radius: var(--r-pill);
	background: var(--c-accent);
	color: var(--c-onAccent);
	font-family: var(--f-head);
	font-size: var(--t-md);
	font-weight: 600;
}
.ofc-step__title { margin: 0 0 var(--s-1); font-size: var(--t-md); }
.ofc-step__text { color: var(--c-muted); font-size: var(--t-sm); max-width: 34ch; }

/* ------------------------------------------------------------------ usps */

.ofc-usps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--s-4);
	list-style: none;
	margin: 0;
	padding: 0;
}
.ofc-usp__icon { width: 28px; height: 28px; margin-bottom: var(--s-2); color: var(--c-accent); }
.ofc-usp__title { margin: 0 0 var(--s-1); font-size: var(--t-md); }
.ofc-usp__text { color: var(--c-muted); font-size: var(--t-sm); max-width: 32ch; }

/* ----------------------------------------------------------------- stats */

.ofc-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: var(--s-4);
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}
.ofc-stat { display: flex; flex-direction: column; gap: var(--s-1); }
.ofc-stat__value {
	font-family: var(--f-head);
	font-size: var(--t-2xl);
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.ofc-stat__label { font-size: var(--t-sm); opacity: .78; }

/* --------------------------------------------------------------- reviews */

.ofc-reviews {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--s-3);
	list-style: none;
	margin: 0;
	padding: 0;
}
.ofc-review {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	padding: var(--s-4);
	border: var(--stroke) solid var(--c-line);
	border-radius: var(--r-md);
	background: var(--c-surface);
}
.ofc-review__rating { display: flex; gap: 2px; }
.ofc-star { width: 17px; height: 17px; fill: var(--c-line); }
.ofc-star.is-on { fill: var(--c-accent); }
.ofc-review__text {
	margin: 0;
	font-family: var(--f-head);
	font-size: var(--t-lg);
	line-height: 1.45;
	color: var(--c-primary);
}
.ofc-review__meta { display: flex; flex-wrap: wrap; gap: .5em; font-size: var(--t-xs); color: var(--c-muted); margin-top: auto; }
.ofc-review__author { font-weight: 600; color: var(--c-text); }

/* ------------------------------------------------------------------- faq */

.ofc-faq { border-top: var(--stroke) solid var(--c-line); }
.ofc-faq__item { border-bottom: var(--stroke) solid var(--c-line); }
.ofc-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	min-height: 60px;
	padding-block: var(--s-2);
	cursor: pointer;
	list-style: none;
	font-family: var(--f-head);
	font-size: var(--t-md);
	font-weight: 600;
	color: var(--c-primary);
}
.ofc-faq__q::-webkit-details-marker { display: none; }
.ofc-faq__q svg { width: 20px; height: 20px; flex: none; color: var(--c-muted); transition: transform .2s ease; }
.ofc-faq__item[open] .ofc-faq__q svg { transform: rotate(180deg); }
.ofc-faq__a { padding-bottom: var(--s-3); color: var(--c-muted); max-width: var(--measure); }

/* ------------------------------------------------------------------- cta */

.ofc-cta__inner { text-align: center; display: flex; flex-direction: column; gap: var(--s-3); align-items: center; }
.ofc-cta__title { font-size: var(--t-2xl); margin: 0; }
.ofc-cta__text { max-width: 44ch; opacity: .85; margin: 0; }

/* ---------------------------------------------------------------- footer */

.ofc-footer {
	background: var(--c-dark);
	color: var(--c-onDark);
	padding-block: var(--s-6) var(--s-4);
	font-size: var(--t-sm);
}
.ofc-footer__top {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-5);
	justify-content: space-between;
	padding-bottom: var(--s-5);
}
.ofc-footer__brand { flex: 1 1 280px; max-width: 34rem; }
.ofc-brand__name--footer {
	font-family: var(--f-head);
	font-size: var(--t-lg);
	font-weight: 600;
	color: inherit;
	display: block;
	margin-bottom: var(--s-1);
}
.ofc-footer__tagline { opacity: .78; margin-bottom: var(--s-3); }
.ofc-footer__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; opacity: .78; }
.ofc-footer__contact a { color: inherit; }

.ofc-footer__list, .ofc-footer__legal-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-1) var(--s-4);
}
.ofc-footer__list { flex-direction: column; gap: var(--s-1); }
.ofc-footer__list a, .ofc-footer__legal-list a {
	color: inherit;
	opacity: .82;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}
.ofc-footer__list a:hover, .ofc-footer__legal-list a:hover { opacity: 1; text-decoration: underline; }

.ofc-footer__regulatory {
	padding-block: var(--s-4);
	border-block: var(--stroke) solid color-mix(in srgb, var(--c-onDark) 18%, transparent);
}
.ofc-reg-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--s-2) var(--s-4);
	list-style: none;
	margin: 0;
	padding: 0;
}
.ofc-reg-list__item { display: flex; flex-direction: column; }
.ofc-reg-list__label { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; opacity: .62; }
.ofc-reg-list__number { font-weight: 600; color: inherit; }

.ofc-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-4);
	justify-content: space-between;
	align-items: center;
	padding-top: var(--s-4);
	font-size: var(--t-xs);
	opacity: .72;
}
.ofc-footer__copyright { margin: 0; }

/* ------------------------------------------------------------- to top */

.ofc-to-top {
	position: fixed;
	right: var(--s-3);
	bottom: var(--s-3);
	z-index: 40;
	width: 48px; height: 48px;
	display: grid;
	place-items: center;
	border: var(--stroke) solid var(--c-line);
	border-radius: var(--r-pill);
	background: var(--c-surface);
	color: var(--c-primary);
	cursor: pointer;
	box-shadow: var(--shade-up);
}
.ofc-to-top[hidden] { display: none; }   /* its display value would otherwise override hidden */
.ofc-to-top svg { width: 20px; height: 20px; }

/* ----------------------------------------------------------- long-form */

.ofc-prose { max-width: var(--measure); }
.ofc-prose > * + * { margin-block-start: 1em; }
.ofc-prose h2, .ofc-prose h3 { margin-block-start: 1.6em; }
.ofc-page { padding-block: var(--s-6); }
.ofc-entry { padding-block: var(--s-4); border-bottom: var(--stroke) solid var(--c-line); }
.ofc-entry__title { font-size: var(--t-xl); margin-bottom: var(--s-1); }
.ofc-entry__title a { color: var(--c-primary); text-decoration: none; }

/* -------------------------------------------------------------- narrow */

@media (max-width: 1023.98px) {
	.ofc-search { order: 3; flex-basis: 100%; max-width: none; margin-inline: 0; }
	.ofc-header__main-inner { flex-wrap: wrap; }
	.ofc-action__label { display: none; }
	.ofc-action--phone span { display: none; }
}

@media (max-width: 959.98px) {
	.ofc-hero__inner { grid-template-columns: 1fr; }
	.ofc-hero__copy { max-width: none; }
}

@media (max-width: 767.98px) {
	.ofc-burger { display: flex; }
	.ofc-nav { display: none; }
	.ofc-header__main-inner { min-height: 64px; }
	.ofc-brand__name { font-size: var(--t-md); }
	.ofc-hero__actions .ofc-btn { flex: 1 1 100%; }
	.ofc-footer__top { gap: var(--s-4); }
}

@media (max-width: 479.98px) {
	.ofc-products { grid-template-columns: 1fr; }
	.ofc-header__strip-inner { justify-content: flex-start; }
}

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}