/* =========================================================================
   ACC Service Station — Home design system + sections
   -------------------------------------------------------------------------
   "THE SHOWROOM": ivory plaster / walnut / brushed bronze (tokens live in
   acc-global.css). The brand moved off dark-industrial in July 2026 — there
   is no red and no black band mid-page.

   Theming model = CONTEXTUAL SEMANTIC TOKENS.
   Each section sets a context (light by default, walnut for the closing band
   + footer). Components reference the --c-* tokens, so the SAME card/chip/
   button adapts to whichever surface it sits on, including for RTL (logical
   properties throughout).

   Section rhythm — bright the whole way down, walnut only at the exit:
     hero(ivory) · strip · identity(ivory) · parts-hub(limestone)
     · products(surface) · services(limestone) · trust(ivory)
     · network(ivory) · ecosystem(limestone) · cta(WALNUT) · footer(WALNUT)

   Three motifs carry the showroom, and nothing else is invented:
     1. the ARCH   — display niches and hero imagery (--acc-arch)
     2. the HAIRLINE — 1px bronze frame around anything precious
     3. the WARM GLOW — soft LED wash inside a niche, never neon
   ====================================================================== */

/* ---- Contextual tokens: LIGHT is the default ------------------------- */
.acc-home {
	--c-surface: var(--acc-bg);
	--c-surface-2: var(--acc-bg-soft);
	--c-card: var(--acc-surface);
	--c-text: var(--acc-ink);
	--c-muted: var(--acc-muted);
	--c-border: var(--acc-hairline);
	--c-border-metal: var(--acc-hairline-bz);
	--c-accent: var(--acc-bronze);
	--c-accent-text: var(--acc-bronze-text); /* bronze as TEXT on ivory — 4.5:1 */

	background-color: var(--acc-bg);
	color: var(--c-text);
	font-family: var(--acc-font-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

/* WALNUT contexts — the closing band and the footer. Together they read as the
   exit of the showroom, which is why a page is allowed to go dark exactly once,
   at the very bottom.

   CONTRACT: every dark surface in the theme MUST be listed here. Components
   colour themselves from --c-text / --c-muted / --c-border rather than from
   hard-coded values, so a dark band that sets `color` on itself but skips this
   list leaves its children resolving --c-text to walnut-on-walnut. That is
   exactly how the WhatsApp button on the About page ended up with a brown
   label on a brown band. Adding the band here fixes every child at once. */
.acc-section--walnut,
.acc-cta,
.acc-about-cta,
.acc-pg-close,
.acc-sitefoot {
	--c-surface: var(--acc-walnut-deep);
	--c-surface-2: var(--acc-black-2);
	--c-card: rgba(246, 240, 228, 0.04);
	--c-text: #f6f0e4;
	--c-muted: var(--acc-muted-dark);
	--c-border: var(--acc-border-dark);
	--c-border-metal: rgba(201, 180, 140, 0.3);
	--c-accent: var(--acc-bronze-soft);
	--c-accent-text: var(--acc-bronze-soft); /* brass as TEXT on walnut — 4.5:1 */

	/* Buttons invert here: the primary becomes the brightest object in the
	   band, and the ghost outlines in brass rather than stark ivory. */
	--c-btn-primary-bg: var(--acc-bg);
	--c-btn-primary-bg-hover: #fffdf7;
	--c-btn-primary-fg: var(--acc-walnut-deep);
	--c-btn-primary-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.5);
	--c-btn-ghost-line: var(--acc-bronze-soft);
}

/* Legacy alias: the old design flipped whole sections to black mid-page. That
   is retired, so any markup still carrying it renders as a limestone band
   rather than punching a dark hole in the middle of the showroom. */
.acc-section--dark { background-color: var(--acc-bg-soft); }

/* Hide Blocksy's default footer site-wide — the rich ACC footer replaces it
   (rendered via wp_footer on every page). */
#footer.ct-footer { display: none; }

/* ---- Base / reset (scoped) ------------------------------------------- */
.acc-home *,
.acc-home *::before,
.acc-home *::after { box-sizing: border-box; }

.acc-home img { max-width: 100%; height: auto; display: block; }

/* Display-heading defaults, wrapped in :where() so they carry ZERO
   specificity and any component can set its own size, leading, or spacing
   without fighting the cascade.

   This used to be a plain `.acc-home h1, h2, h3 { margin: 0 }` rule. At (0,1,1)
   it outranked every component's single-class `margin-block-end`, so those
   declarations were silently dead and headings sat flush against their body
   copy right across the theme. One component had already worked around it by
   double-scoping its selector; the rest just looked cramped. Resetting through
   :where() keeps the UA margins gone and gives components their spacing back.

   The two rules below look similar and are deliberately NOT the same weight.

   The display face sits at (0,1,0) — the class carries the specificity, :where()
   stops the element selectors adding to it. That is the narrow band that works:
   high enough to beat the parent theme's bare `h2 {}` element rule, exactly
   level with a component's own single-class rule so source order decides, and
   every component file loads after this one. Putting the family inside :where()
   as well (which it was) drops it to (0,0,0), so Blocksy won and every
   .acc-section__title on the site rendered in the system sans at 1.5 leading.
   Raising it to `.acc-home :is(...)` (0,1,1) fails the other way: it would
   outrank .acc-hero__title's own leading. Leave it at (0,1,0).

   The margin reset stays fully zero-specificity, because that one has to lose
   to every component. */
.acc-home :where(h1, h2, h3) {
	font-family: var(--acc-font-head);
	line-height: 1.14;
	letter-spacing: 0.005em;
	text-wrap: balance;
}

:where(.acc-home) :where(h1, h2, h3, p) { margin: 0; }

/* Weight is deliberately NOT in :where(). Marcellus ships one weight, so this
   stays at real specificity: no component can ask for a bold that does not
   exist (see the font-face range note in acc-global.css). */
.acc-home h1,
.acc-home h2,
.acc-home h3 { font-weight: 400; }

/* ---- Layout ---------------------------------------------------------- */
.acc-container {
	width: 100%;
	max-width: var(--acc-maxw);
	margin-inline: auto;
	padding-inline: var(--acc-gutter);
}

.acc-section {
	position: relative;
	padding-block: clamp(68px, 10vw, 128px);
	scroll-margin-block-start: 84px;
	background-color: var(--c-surface);
	color: var(--c-text);
}

.acc-section--alt { background-color: var(--acc-bg-soft); }

/* The products band sits on the raised surface tone and is closed top and
   bottom by a hairline — the parts are literally framed. */
.acc-section--surface {
	background-color: var(--acc-surface);
	border-block: 1px solid var(--acc-hairline);
}

.acc-section__head {
	max-width: 64ch;
	margin-block-end: clamp(32px, 5vw, 60px);
}

/* The boutique label. Rationed on purpose: an eyebrow above EVERY section is
   the template tell, so this appears at most once per few sections. */
.acc-section__eyebrow {
	display: block;
	font-family: var(--acc-font-body);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--c-accent-text);
	margin-block-end: 16px;
}

.acc-section__title {
	font-size: clamp(2rem, 1.42rem + 2.3vw, 3.15rem);
	color: var(--c-text);
}

.acc-section__intro {
	margin-block-start: 16px;
	color: var(--c-muted);
	font-size: clamp(1rem, 1.4vw, 1.08rem);
	line-height: 1.65;
	max-width: 56ch;
	text-wrap: pretty;
}

/* ---- Buttons, links, icons ------------------------------------------- */
.acc-icon { inline-size: 1.15em; block-size: 1.15em; flex: 0 0 auto; }

.acc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 1.05em 2.1em;
	border-radius: var(--acc-radius-pill);
	border: 1px solid transparent;
	font-family: var(--acc-font-body);
	font-size: 0.84rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--acc-trans), background-color var(--acc-trans),
		border-color var(--acc-trans), box-shadow var(--acc-trans), color var(--acc-trans);
}

.acc-btn:hover { transform: translateY(-2px); }
.acc-btn:active { transform: translateY(0) scale(0.985); }

.acc-btn--sm { padding: 0.8em 1.5em; font-size: 0.76rem; }

/* Primary = walnut. Dark on ivory reads as the most expensive thing on the
   page; a coloured button would just be shouting.

   Every variant below resolves its colours from --c-btn-* tokens rather than
   from `.acc-cta .acc-btn--x` context selectors. The old approach needed each
   dark band to be added to four selector lists by hand, and any band that was
   missed rendered walnut-on-walnut. Tokens cascade, so a new dark band only
   has to join the walnut block above. */
.acc-btn--primary {
	background: var(--c-btn-primary-bg, var(--acc-walnut-deep));
	color: var(--c-btn-primary-fg, #f6f0e4);
	box-shadow: var(--c-btn-primary-shadow, 0 12px 28px -14px rgba(42, 33, 24, 0.55));
}

.acc-btn--primary:hover {
	background: var(--c-btn-primary-bg-hover, var(--acc-walnut));
	color: var(--c-btn-primary-fg, #fff6ea);
	box-shadow: 0 18px 34px -14px rgba(42, 33, 24, 0.55);
}

/* Ghost = a hairline outline that adapts to whichever surface it sits on */
.acc-btn--ghost {
	background: transparent;
	border-color: var(--c-btn-ghost-line, var(--c-text));
	color: var(--c-text);
}

.acc-btn--ghost:hover {
	background: var(--c-btn-ghost-line, var(--c-text));
	color: var(--c-surface);
}

/* WhatsApp = green recognition accent (the one saturated thing we keep).
   The label is the surface's own text colour, so it reads ivory on walnut and
   walnut on ivory; the green stays in the tint, the border, and the glyph. */
.acc-btn--wa {
	background: rgba(37, 211, 102, 0.1);
	border-color: rgba(37, 211, 102, 0.45);
	color: var(--c-text);
}

.acc-btn--wa .acc-icon { color: var(--acc-wa); }

.acc-btn--wa:hover {
	color: var(--c-text);
	background: rgba(37, 211, 102, 0.18);
	border-color: rgba(37, 211, 102, 0.7);
}

/* The quiet link: a bronze-underlined caps label, the showroom's "more" */
.acc-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-block-start: auto;
	padding-block-start: 14px;
	color: var(--c-accent-text);
	font-family: var(--acc-font-body);
	font-weight: 500;
	font-size: 0.76rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	text-decoration: none;
}

.acc-link .acc-icon { transition: transform var(--acc-trans); }
.acc-link:hover { color: var(--c-text); }
.acc-link:hover .acc-icon { transform: translateX(4px); }

/* ---- Grid ------------------------------------------------------------ */
.acc-grid { display: grid; gap: clamp(14px, 1.8vw, 22px); }
.acc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.acc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.acc-grid--4 { grid-template-columns: repeat(4, 1fr); }
.acc-grid--auto { grid-template-columns: repeat(auto-fit, minmax(264px, 1fr)); }
.acc-grid--eco { grid-template-columns: repeat(3, 1fr); }

ul.acc-grid { list-style: none; margin: 0; padding: 0; }

/* ---- Cards = VITRINES ------------------------------------------------
   Near-sharp corners and a hairline: a glass case edge, not a rounded app
   card. Lift on hover is small; the shadow is warm, never neutral grey. */
.acc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--c-card);
	border: 1px solid var(--c-border);
	border-radius: var(--acc-radius);
	padding: clamp(18px, 2.4vw, 26px);
	transition: transform var(--acc-trans), border-color var(--acc-trans),
		box-shadow var(--acc-trans);
}

.acc-card:hover {
	transform: translateY(-5px);
	border-color: var(--c-border-metal);
	box-shadow: var(--acc-shadow);
}

/* Icon in a bronze ring — the shelf-mounted marker in the showroom photos */
.acc-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: 50px;
	block-size: 50px;
	border-radius: 50%;
	color: var(--c-accent-text);
	background: transparent;
	border: 1px solid var(--c-border-metal);
	transition: background var(--acc-trans), color var(--acc-trans);
}

.acc-card:hover .acc-card__icon { background: rgba(160, 122, 76, 0.09); }

.acc-card__icon .acc-icon { inline-size: 22px; block-size: 22px; }

.acc-card__title { font-family: var(--acc-font-head); font-size: 1.28rem; color: var(--c-text); }
.acc-card__title--sm { font-size: 1.1rem; }

.acc-card__text { color: var(--c-muted); font-size: 0.95rem; line-height: 1.65; text-wrap: pretty; }
.acc-card__text--sm { font-size: 0.88rem; }

.acc-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }

.acc-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-start: auto;
	padding-block-start: 6px;
}

/* Service cards: icon-led (no photo) — visually distinct from the photo cards
   so the page never repeats one card shape three times. */
.acc-card--service { border: 0; background: transparent; padding: 0; gap: 0; }
.acc-card--service:hover { transform: none; box-shadow: none; }
.acc-card--service .acc-card__icon { margin-block-end: 16px; }
.acc-card--service .acc-card__body { gap: 8px; }
.acc-card--service .acc-card__title::after {
	content: "";
	display: block;
	inline-size: 26px;
	block-size: 1px;
	background: var(--acc-bronze);
	margin-block: 12px 10px;
}
.acc-card--service.is-linked .acc-link--stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Identity cards: the three rooms of the showroom, photo-led */
.acc-card--identity { padding: 0; overflow: hidden; }
.acc-card--identity .acc-card__media { aspect-ratio: 3 / 2; }
.acc-card--identity .acc-card__body { padding: clamp(18px, 2.2vw, 26px); gap: 10px; }
.acc-card--identity.is-linked .acc-link--stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Engraved numeral — set in the display face on the plaster, no coloured chip */
.acc-card__num {
	position: absolute;
	inset-block-start: 14px;
	inset-inline-start: 16px;
	z-index: 2;
	font-family: var(--acc-font-head);
	font-weight: 400;
	font-size: 1.15rem;
	line-height: 1;
	letter-spacing: 0.1em;
	color: #f6f0e4;
	text-shadow: 0 1px 10px rgba(42, 33, 24, 0.6);
}

/* Product / featured media area.
   Square, because the product line is shot 1:1 — a 4:3 frame cropped the top
   of every arch off and lost the lit niche that makes the shot work. */
.acc-card--product { padding: 0; overflow: hidden; }
.acc-card--product .acc-card__media { aspect-ratio: 1; }

/* Product photography is now shot inside real limestone niches, so the frame
   is a light one: a walnut case behind an ivory photograph only showed up as a
   dark rim while the image loaded. Limestone is the seamless backdrop. */
.acc-card__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background: var(--acc-bg-soft);
	border-block-end: 1px solid var(--c-border);
	overflow: hidden;
}

.acc-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--acc-ease);
}

.acc-card:hover .acc-card__media img { transform: scale(1.04); }

.acc-card__placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 62px;
	block-size: 62px;
	border-radius: 50%;
	color: var(--acc-bronze-soft);
	background: transparent;
	border: 1px solid rgba(201, 180, 140, 0.3);
}

.acc-card__placeholder .acc-icon { inline-size: 28px; block-size: 28px; }

/* A media panel with no photograph is a LIT NICHE, not an empty dark box:
   warm light on limestone with the bronze ring. This is what the ecosystem
   cards and any not-yet-photographed product fall back to, so a missing
   image still looks like part of the showroom. */
.acc-card__media:has(.acc-card__placeholder) {
	background:
		radial-gradient(72% 52% at 50% 14%, rgba(230, 188, 122, 0.5), rgba(230, 188, 122, 0.08) 58%, transparent 76%),
		var(--acc-bg-soft);
}

.acc-card__media:has(.acc-card__placeholder) .acc-card__placeholder {
	color: var(--acc-bronze-text);
	border-color: var(--acc-hairline-bz);
}

/* Museum caption tag, not a sale sticker */
.acc-card__tag {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	z-index: 2;
	padding: 6px 12px;
	border-radius: var(--acc-radius-sm);
	font-family: var(--acc-font-body);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--acc-walnut-deep);
	background: rgba(250, 247, 240, 0.92);
	border: 1px solid var(--acc-hairline-bz);
}

.acc-card--product .acc-card__body { padding: clamp(16px, 2vw, 22px); }

.acc-card__price {
	color: var(--c-text);
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
}
.acc-card__price--muted { color: var(--c-muted); font-weight: 500; font-size: 0.9rem; }

/* Eco cards: image + small badge + copy */
.acc-card--eco { padding: 0; overflow: hidden; }
.acc-card--eco .acc-card__media { aspect-ratio: 3 / 2; }
.acc-card--eco .acc-card__body { padding: clamp(18px, 2vw, 24px); gap: 8px; }

/* ---- Ecosystem cards WITHOUT a photograph ----------------------------
   These are ventures (car care, cafeteria, technology, coin), not products,
   and there is no photography for them. Reserving a 3:2 photo frame and
   filling it with a lit-niche gradient read as a broken image well: a big
   empty box with an icon floating in it, six times in a row.

   With no photo the card drops the frame entirely and becomes icon-led, like
   the service cards: a bronze-ringed mark, then the title. It is then a
   deliberate composition rather than a placeholder waiting for an asset.
   Drop a filename into acc_get_ecosystem() and the photo layout returns. */
.acc-card--eco:not(:has(img)) .acc-card__media {
	aspect-ratio: auto;
	background: none;
	border-block-end: 0;
	padding: clamp(20px, 2.2vw, 26px) clamp(18px, 2vw, 24px) 0;
	justify-content: flex-start;
}

.acc-card--eco:not(:has(img)) .acc-card__placeholder {
	inline-size: 52px;
	block-size: 52px;
	border-radius: 50%;
	color: var(--c-accent-text);
	background: transparent;
	border: 1px solid var(--c-border-metal);
	transition: background var(--acc-trans);
}

.acc-card--eco:not(:has(img)):hover .acc-card__placeholder {
	background: rgba(160, 122, 76, 0.09);
}

.acc-card--eco:not(:has(img)) .acc-card__placeholder .acc-icon {
	inline-size: 22px;
	block-size: 22px;
}

.acc-card--eco:not(:has(img)) .acc-card__body { padding-block-start: 16px; }

/* Badge over the image: brass ring on a smoked plate, not a solid colour chip */
.acc-card__icon--badge {
	position: absolute;
	inset-block-end: 12px;
	inset-inline-start: 12px;
	z-index: 2;
	inline-size: 38px;
	block-size: 38px;
	border-radius: 50%;
	background: rgba(42, 33, 24, 0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(201, 180, 140, 0.45);
	color: var(--acc-bronze-soft);
}

.acc-card__icon--badge .acc-icon { inline-size: 18px; block-size: 18px; color: var(--acc-bronze-soft); }

/* Stretched link: makes the whole linked card clickable */
.acc-link--stretch { margin-block-start: 6px; }

.acc-card--eco.is-linked .acc-link--stretch::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.acc-card--eco.is-linked:hover { cursor: pointer; }

/* Partner card */
.acc-card--partner { gap: 14px; }

.acc-partner__location {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--c-accent-text);
	font-family: var(--acc-font-body);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.acc-partner__location .acc-icon { inline-size: 15px; block-size: 15px; }

.acc-badge {
	display: inline-block;
	align-self: flex-start;
	padding: 6px 12px;
	border-radius: var(--acc-radius-sm);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-accent-text);
	background: transparent;
	border: 1px solid var(--c-border-metal);
}

/* ---- Trust / reviews ------------------------------------------------- */
.acc-trust__card { gap: 14px; }
/* Stars are text glyphs carrying the rating, so they take the text-grade
   bronze (decorative --acc-bronze measured 3.06:1 on the tint band). */
.acc-trust__stars { color: var(--acc-bronze-text); font-size: 0.95rem; letter-spacing: 4px; line-height: 1; }
.acc-trust__quote {
	margin: 0;
	color: var(--c-text);
	font-family: var(--acc-font-head);
	font-size: 1.16rem;
	line-height: 1.5;
	text-wrap: pretty;
}
.acc-trust__by { display: flex; flex-direction: column; gap: 2px; margin-block-start: auto; padding-block-start: 10px; }
.acc-trust__name { font-family: var(--acc-font-body); font-weight: 600; color: var(--c-text); letter-spacing: 0.02em; }
.acc-trust__src { color: var(--c-muted); font-size: 0.8rem; }

/* =========================================================================
   HERO — the arrival. The showroom arcade runs FULL-BLEED off the end edge
   of the screen; the headline sits on the ivory plaster beside it. The photo
   is deliberately outside the container so it can reach the viewport edge —
   a contained image would read as a card, not as architecture.
   ====================================================================== */
.acc-hero {
	position: relative;
	overflow: hidden;
	background: var(--acc-bg);
	color: var(--acc-ink);
	padding-block: clamp(36px, 5vh, 76px) clamp(44px, 7vh, 96px);
}

/* Warm light spilling out of the arcade across the plaster */
.acc-hero__glow {
	position: absolute;
	inset-block-start: -14%;
	inset-inline-end: 22%;
	inline-size: 46vw;
	block-size: 46vw;
	max-inline-size: 620px;
	max-block-size: 620px;
	z-index: 0;
	background: radial-gradient(circle, rgba(226, 186, 128, 0.3), transparent 68%);
	pointer-events: none;
}

/* `auto` on the art column so it takes exactly the arch's width — a fr unit
   reserves more than the capped arch uses and opens a dead gap mid-hero. */
.acc-hero__inner {
	position: relative;
	z-index: 2; /* copy sits above the bleeding photograph */
	width: 100%;
	display: grid;
	/* One column: the art is out of flow, so the copy just reserves the
	   inline-start half of the band and never collides with it. */
	grid-template-columns: minmax(0, min(46%, 620px));
	align-items: center;
	min-block-size: calc(86dvh - var(--acc-header-h));
}

.acc-hero__copy { min-width: 0; }

.acc-hero__title {
	font-family: var(--acc-font-head);
	font-size: clamp(2.6rem, 1.7rem + 3.9vw, 4.4rem);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: 0.005em;
	color: var(--acc-ink);
	max-width: 15ch; /* holds the headline to two generous lines */
}

.acc-hero__subtitle {
	margin-block-start: clamp(16px, 2.4vh, 24px);
	font-family: var(--acc-font-body);
	font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.18rem);
	font-weight: 400;
	line-height: 1.6;
	color: var(--acc-ink-2);
	max-width: 44ch;
	text-wrap: pretty;
}

.acc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(16px, 2.4vw, 28px);
	margin-block-start: clamp(26px, 4vh, 40px);
}

/* ---- The full-bleed arcade ---- */
.acc-hero__art {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	inline-size: min(56%, 980px);
	z-index: 0;
	pointer-events: none;
}

.acc-hero__arch {
	position: absolute;
	inset: 0;
	overflow: hidden;
	/* Only the leading corners are eased, so the photograph reads as an
	   opening in the wall rather than as a floating card. */
	border-start-start-radius: clamp(80px, 12vw, 180px);
	border-end-start-radius: 3px;
}

/* The photo layer keeps its old class so the JS parallax still finds it —
   the extra block insets are the room it drifts in. */
.acc-hero__media {
	position: absolute;
	inset-block: -6% -6%;
	inset-inline: 0;
	background-image: url("../img/showroom/hero-arcade.webp");
	background-size: cover;
	background-position: 62% 50%;
	will-change: transform;
}

/* Melt the photograph into the plaster on its leading edge — a hard vertical
   seam would look pasted on; this makes the room feel continuous with the
   page. Masked rather than overlaid so it works on any image. */
.acc-hero__arch::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to inline-start, transparent 55%, var(--acc-bg) 99%);
}

/* =========================================================================
   PROVENANCE STRIP — established / network / products. A maker's mark line,
   closed top and bottom by bronze hairlines. Numbers tick up via acc-nav.js.
   ====================================================================== */
.acc-statband {
	padding-block: 0;
	background: var(--acc-bg);
	border-block: 1px solid var(--acc-hairline-bz);
}

.acc-statband__inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	text-align: center;
}

.acc-statband__item {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0.5em;
	padding-block: 22px;
	padding-inline: clamp(12px, 2vw, 24px);
	border-inline-start: 1px solid var(--acc-hairline-bz);
}

.acc-statband__item:first-child { border-inline-start: 0; }

.acc-statband__num {
	font-family: var(--acc-font-body);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	color: var(--acc-bronze-text);
	line-height: 1;
}

.acc-statband__label {
	font-family: var(--acc-font-body);
	font-weight: 500;
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--acc-ink-2);
}

/* ---- Parts Hub: arch niches + brand wall ----------------------------- */
.acc-block { margin-block-start: clamp(44px, 5vw, 68px); }

/* Scoped with .acc-home so the margin out-specifies the .acc-home h3 reset */
.acc-home .acc-block__title {
	font-family: var(--acc-font-body);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--c-accent-text);
	margin-block-end: clamp(24px, 3vw, 38px);
}

.acc-logos { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0; padding: 0; }

.acc-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 64px;
	padding: 14px 22px;
	border-radius: var(--acc-radius-sm);
	background: var(--c-card);
	border: 1px solid var(--c-border);
	transition: border-color var(--acc-trans), transform var(--acc-trans);
}

.acc-logo:hover { transform: translateY(-2px); border-color: var(--c-border-metal); }

.acc-logo img { max-block-size: 36px; width: auto; }
.acc-logo__text { font-family: var(--acc-font-head); font-size: 1.05rem; color: var(--c-text); }

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

.acc-chip {
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	border-radius: var(--acc-radius-pill);
	font-family: var(--acc-font-body);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--c-text);
	background: transparent;
	border: 1px solid var(--c-border);
	transition: border-color var(--acc-trans), background var(--acc-trans), color var(--acc-trans);
}

.acc-chip:hover {
	color: #f6f0e4;
	border-color: var(--acc-walnut-deep);
	background: var(--acc-walnut-deep);
}

/* Shop-by-category = PHOTOGRAPHED DISPLAY NICHES. Each part is shot standing
   in a lit arched alcove, so the card itself is a plain vitrine frame — an
   arch-shaped card on top of a photographed arch would fight itself. The
   caption sits under the picture like a museum label. */
.acc-catgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(14px, 1.8vw, 22px);
}

.acc-catcard {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var(--acc-radius);
	overflow: hidden;
	border: 1px solid var(--acc-hairline);
	background: var(--acc-surface);
	text-decoration: none;
	transition: transform var(--acc-trans), box-shadow var(--acc-trans), border-color var(--acc-trans);
}

.acc-catcard:hover {
	transform: translateY(-5px);
	border-color: var(--acc-hairline-bz);
	box-shadow: var(--acc-shadow);
}

.acc-catcard__img {
	inline-size: 100%;
	aspect-ratio: 3 / 3.5;
	object-fit: cover;
	/* bias down the frame: the plinth and the part matter, the empty
	   plaster above the arch does not */
	object-position: 50% 64%;
	transition: transform 0.7s var(--acc-ease);
}

.acc-catcard:hover .acc-catcard__img { transform: scale(1.04); }

/* Drawn fallback when a category has no photograph yet — the arch is then
   the card's own shape, lit from the top like the real niches. */
.acc-catcard__ph {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	aspect-ratio: 3 / 3.5;
	border-radius: var(--acc-arch);
	background:
		radial-gradient(74% 46% at 50% 16%, rgba(230, 188, 122, 0.55), rgba(230, 188, 122, 0.1) 58%, transparent 76%),
		var(--acc-bg-soft);
	color: var(--acc-bronze-text);
}

.acc-catcard__ph .acc-icon { inline-size: 26%; block-size: 26%; }

.acc-catcard__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 16px clamp(14px, 1.4vw, 20px) 18px;
	border-block-start: 1px solid var(--acc-hairline);
	color: var(--acc-ink);
	font-family: var(--acc-font-head);
	font-size: 1.02rem;
	letter-spacing: 0.015em;
}

.acc-catcard__label .acc-icon { color: var(--acc-bronze); transition: transform var(--acc-trans); }
.acc-catcard:hover .acc-catcard__label .acc-icon { transform: translateX(4px); }

/* Breathing room between the niches and the secondary chips */
.acc-chips--more { margin-block-start: 28px; }

/* Brand wall — a single framed sheet, hairline-divided */
.acc-brandwall {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1px;
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--c-border);
	border: 1px solid var(--c-border);
	border-radius: var(--acc-radius);
	overflow: hidden;
}

.acc-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 84px;
	padding: 16px;
	background: var(--c-card);
	transition: background var(--acc-trans);
}

.acc-brand:hover { background: var(--acc-bg-soft); }

.acc-brand img {
	max-block-size: 40px;
	width: auto;
	filter: grayscale(1);
	opacity: 0.65;
	transition: filter var(--acc-trans), opacity var(--acc-trans);
}

.acc-brand:hover img { filter: none; opacity: 1; }

.acc-brand__text {
	font-family: var(--acc-font-head);
	font-size: 1.02rem;
	letter-spacing: 0.04em;
	color: var(--c-text);
	transition: color var(--acc-trans);
}

.acc-brand:hover .acc-brand__text { color: var(--c-accent-text); }

@media (max-width: 900px) {
	.acc-catgrid { grid-template-columns: repeat(2, 1fr); }
	.acc-brandwall { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 520px) {
	.acc-catgrid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.acc-brandwall { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Regional Network: tabs ------------------------------------------ */
.acc-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-end: clamp(24px, 4vw, 40px);
	padding-block-end: 6px;
}

.acc-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: var(--acc-radius-pill);
	font-family: var(--acc-font-body);
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-muted);
	background: transparent;
	border: 1px solid var(--c-border);
	cursor: pointer;
	transition: color var(--acc-trans), border-color var(--acc-trans),
		background var(--acc-trans), transform var(--acc-trans);
}

.acc-tab .acc-icon { inline-size: 15px; block-size: 15px; color: var(--c-accent-text); }
.acc-tab:hover { color: var(--c-text); border-color: var(--c-border-metal); }

.acc-tab.is-active {
	color: #f6f0e4;
	background: var(--acc-walnut-deep);
	border-color: var(--acc-walnut-deep);
}

.acc-tab.is-active .acc-icon { color: var(--acc-bronze-soft); }

.acc-tabs__panel { outline: none; }
.acc-tabs__panel[hidden] { display: none; }
.acc-tabs__panel + .acc-tabs__panel { margin-block-start: clamp(16px, 2.4vw, 26px); }

/* ---- Final CTA — the walnut closing band ----------------------------- */
.acc-cta {
	overflow: hidden;
	text-align: center;
	background: var(--acc-walnut-deep);
	color: var(--c-text);
}

/* Warm ceiling wash instead of the old red glow */
.acc-cta__glow {
	position: absolute;
	inset-block-start: -40%;
	inset-inline-start: 50%;
	left: 50%;
	transform: translateX(-50%);
	inline-size: 80vw;
	max-inline-size: 820px;
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(201, 180, 140, 0.16), transparent 62%);
	pointer-events: none;
}

.acc-cta__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: clamp(16px, 2.2vw, 26px);
}

.acc-cta__title {
	font-family: var(--acc-font-head);
	font-size: clamp(2rem, 1.5rem + 2.3vw, 3.1rem);
	font-weight: 400;
	max-width: 26ch;
	margin: 0;
	color: var(--c-text);
}

.acc-cta__text {
	margin: 0;
	max-width: 52ch;
	color: var(--c-muted);
	font-size: clamp(1rem, 1.5vw, 1.1rem);
	line-height: 1.65;
	text-wrap: pretty;
}

.acc-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-block-start: clamp(8px, 1.4vw, 16px);
}

/* ---- Site footer block ----------------------------------------------- */
.acc-sitefoot {
	background: var(--acc-black-2);
	border-block-start: 1px solid var(--acc-border-dark);
	padding-block: clamp(44px, 6vw, 76px);
	color: var(--c-text);
}

.acc-sitefoot__top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 28px;
}

.acc-sitefoot__name {
	font-family: var(--acc-font-head);
	font-size: 1.45rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--c-text);
}

.acc-sitefoot__tag {
	margin-block-start: 10px;
	color: var(--c-accent-text);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.acc-sitefoot__loc {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-block-start: 14px;
	color: var(--c-muted);
	font-size: 0.9rem;
}

.acc-sitefoot__loc .acc-icon { inline-size: 16px; block-size: 16px; color: var(--acc-bronze-soft); }

.acc-sitefoot__social { display: flex; flex-wrap: wrap; gap: 10px; }

.acc-social {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border-radius: var(--acc-radius-pill);
	text-decoration: none;
	font-family: var(--acc-font-body);
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-text);
	background: transparent;
	border: 1px solid var(--c-border);
	transition: border-color var(--acc-trans), background var(--acc-trans), transform var(--acc-trans);
}

.acc-social .acc-icon { color: var(--acc-bronze-soft); }

.acc-social:hover {
	color: var(--acc-walnut-deep);
	transform: translateY(-2px);
	border-color: var(--acc-bronze-soft);
	background: var(--acc-bronze-soft);
}

.acc-social:hover .acc-icon { color: var(--acc-walnut-deep); }

.acc-sitefoot__copy {
	margin-block-start: 30px;
	padding-block-start: 22px;
	border-block-start: 1px solid var(--acc-border-dark);
	color: var(--c-muted);
	font-size: 0.82rem;
}

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 1024px) {
	.acc-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.acc-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.acc-grid--eco { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
	/* Hero stacks arcade first, then the headline: you look through the
	   doorway, then read. The art is a LATER sibling in the DOM on purpose, so
	   the headline is still the first thing a screen reader and an
	   unstyled render meet; the column is reordered visually only. Safe to do
	   here because the arcade holds nothing focusable. */
	.acc-hero {
		display: flex;
		flex-direction: column;
		padding-block: 0;
	}
	.acc-hero__inner {
		grid-template-columns: 1fr;
		min-block-size: 0;
		padding-block: clamp(26px, 5vh, 44px);
	}
	.acc-hero__title { max-width: 14ch; }

	/* The arcade leaves the absolute layer and becomes a full-bleed band above
	   the copy. */
	.acc-hero__art {
		order: -1;
		position: relative;
		inline-size: 100%;
		inset-block: auto;
	}
	/* Square on mobile, down to the vitrine edge. Curving both top corners of
	   a full-bleed photograph does not read as an arch, it reads as a dome
	   with two wedges of stray plaster in the corners; the arch already lives
	   in the photograph itself and in the category niches below. Same call as
	   the inner-page heroes in acc-pages.css. */
	.acc-hero__arch {
		position: relative;
		inset: auto;
		aspect-ratio: 4 / 3.1;
		border-radius: var(--acc-radius);
	}
	/* No inline fade when the photo spans the full width — nothing to melt into */
	.acc-hero__arch::after { display: none; }
	.acc-hero__glow { inset-inline-end: -10%; inset-block-start: -8%; }
}

@media (max-width: 768px) {
	.acc-grid--2,
	.acc-grid--3,
	.acc-grid--4 { grid-template-columns: 1fr; }

	/* Padding lives on the inner, not the section: the section is now a flex
	   column whose first child is the full-bleed arcade, and top padding there
	   would float the arch away from the header. */
	.acc-hero__inner { padding-block: clamp(24px, 4vh, 40px) clamp(36px, 6vh, 56px); }
	.acc-hero__title { font-size: clamp(2.2rem, 8.6vw, 3rem); }
	.acc-hero__actions { gap: 16px; }
	.acc-hero__arch { aspect-ratio: 4 / 4.4; }

	/* Provenance strip stacks into three engraved lines.
	   The rules below were written for a single column but the grid was never
	   switched, so it stayed 3-up at 390px: "7 Partner garages across the GCC"
	   wrapped four deep, the three items sat at different heights, and the
	   border-block-start hairlines drew above columns 2 and 3 only — a rule
	   hanging in mid-air beside the first item. One line per fact instead. */
	.acc-statband__inner { grid-template-columns: 1fr; }

	.acc-statband__item {
		flex-wrap: nowrap;
		border-inline-start: 0;
		border-block-start: 1px solid var(--acc-hairline-bz);
		padding-block: 16px;
	}
	.acc-statband__item:first-child { border-block-start: 0; }

	.acc-sitefoot__top { flex-direction: column; }
}

@media (max-width: 480px) {
	.acc-card--service { flex-direction: column; }
	.acc-grid--eco { grid-template-columns: 1fr; }
	/* Two arched niches per row on phones — a shelf, not a stack */
	.acc-catgrid { grid-template-columns: repeat(2, 1fr); }
	.acc-catcard__label { font-size: 0.88rem; padding: 14px 10px 18px; }
}

/* ---- Small-screen legibility floor ----------------------------------- */
/* The uppercase tracked micro-labels land at 8.5–10px on a phone, which is
   below what wide letter-spacing survives. They stop shrinking here; a label
   nobody can read is not a smaller label, it is noise. Desktop keeps the
   finer setting, where the label is read at arm's length on a big screen. */
@media (max-width: 900px) {
	.acc-card__tag,
	.acc-sitefoot__tag { font-size: 0.7rem; }
}

/* ---- Touch targets --------------------------------------------------- */
/* Keyed to the pointer rather than the viewport: a touch laptop needs the
   same thumb room a phone does. Buttons keep their padding-driven size on a
   mouse and only grow to a comfortable minimum under a coarse pointer. */
@media (pointer: coarse) {
	.acc-btn { min-block-size: 44px; }
	/* 40px was an arbitrary near-miss; the target is 44. Neither of these adds
	   visible weight — both are transparent text links, so the extra height is
	   hit area only. */
	.acc-link { min-block-size: 44px; align-items: center; }
	.acc-chip { min-block-size: 44px; display: inline-flex; align-items: center; }
}

/* ---- Accessibility + RTL --------------------------------------------- */
/* The focus ring lives once, in acc-global.css. There used to be a duplicate
   here scoped `.acc-home a:focus-visible` — at (0,1,1) it outranked the global
   rule and re-applied `outline: none`, so every link and button on the five
   content pages lost the indicator and fell back to a box-shadow that measured
   2.16:1 on ivory and 1.27:1 on the dark CTA button. Don't reintroduce it. */

@media (prefers-reduced-motion: reduce) {
	.acc-home *,
	.acc-home *::before,
	.acc-home *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.acc-btn:hover,
	.acc-card:hover,
	.acc-catcard:hover,
	.acc-logo:hover,
	.acc-social:hover { transform: none; }
}

/* Mirror only directional arrows for RTL; never non-directional icons. */
[dir="rtl"] .acc-icon--dir { transform: scaleX(-1); }
[dir="rtl"] .acc-link:hover .acc-icon--dir { transform: scaleX(-1) translateX(4px); }

/* RTL: the hero niche moves to the start side, so mirror the offset outline
   and let the photo's focal point follow. */
[dir="rtl"] .acc-hero__media { background-position: 72% 50%; }