/* =============================================================================
   SHARDA SCIENTIFIC — theme.css
   Design source: Sharda Scientific.dc.html, Sharda Logo System.dc.html,
   Sharda Type Master.dc.html (Option A / "Current" scale).
   Language: blueprint + rubber-stamp. Hard 1px ink borders, offset shadows,
   corner tick marks, paper ground, Archivo display + IBM Plex Mono data.

   Spacing is on a 4-point grid (8px preferred at larger steps). Font sizes are
   a modular scale (Type Master) — not forced onto the grid.

   All repeated values live in :root — colours, faint tints, hairline-rule
   shorthands (--rule*), the two drop shadows, and the full type scale.
   ========================================================================== */

:root {
	/* Paper + ink */
	--paper:      #EFEBE2;
	--card:       #FAF8F3;
	--white:      #FFFFFF;
	--ink:        #15212B;
	--ink-hover:  #0D1620;               /* .btn:hover */
	--ink-80:     rgba(21, 33, 43, 0.80);
	--ink-30:     rgba(21, 33, 43, 0.30);
	--ink-18:     rgba(21, 33, 43, 0.18);
	--ink-14:     rgba(21, 33, 43, 0.14);
	--ink-06:     rgba(21, 33, 43, 0.06);

	/* Accents */
	--blueprint:   #2E5266;
	--stamp:       #B3272D;
	--stamp-hover: #8F1F24;              /* .btn--primary:hover */
	--amber:       #C99A3E;
	--amber-ink:   #7A5A17;              /* amber text on a light ground — plain --amber fails WCAG AA there (2.57:1) */
	--success:     #3C7A5C;
	--doc-green:   #1B6B4E;              /* invoices only — not used on the public site */

	--cream:      #FAF8F3;
	--cream-72:   rgba(250, 248, 243, 0.72);
	--cream-50:   rgba(250, 248, 243, 0.50);
	--cream-22:   rgba(250, 248, 243, 0.22);
	--cream-14:   rgba(250, 248, 243, 0.14);

	/* Faint wash backgrounds */
	--tint-blueprint: rgba(46, 82, 102, 0.05);
	--tint-amber:     rgba(201, 154, 62, 0.08);

	/* Hairline rules — use as `border: var(--rule)` / `border-top: var(--rule-18)` */
	--rule:    1px solid var(--ink);
	--rule-30: 1px solid var(--ink-30);
	--rule-18: 1px solid var(--ink-18);
	--rule-14: 1px solid var(--ink-14);

	/* Type */
	--font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	/* Size scale from Type Master, nudged one step up from "Current" */
	--fs-3xs:   10px;
	--fs-2xs:   11px;
	--fs-xs:    12px;
	--fs-md:    14px;
	--fs-small: 15px;
	--fs-body:  16px;
	--fs-label: 16px;   /* kicker / eyebrow — semantic alias of --fs-body */
	--fs-lg:    18px;
	--fs-xl:    20px;
	--fs-h3:    21px;
	--fs-data:  24px;
	--fs-h2:    clamp(22px, 2.6vw, 28px);
	--fs-h1:    clamp(32px, 4.6vw, 52px);

	/* Spacing scale — 4-point grid */
	--s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
	--s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

	/* Layout */
	--wrap: 1920px;
	--gap:  clamp(20px, 2.4vw, 32px);
	--shadow-offset: 12px 12px 0 rgba(21, 33, 43, 0.10);   /* panels */
	--shadow-pop:     8px  8px 0 rgba(21, 33, 43, 0.18);   /* popovers */
}

/* -----------------------------------------------------------------------------
   Breakpoints (CSS can't read vars inside @media, so these are the reference):
     mobile   : max-width 767px
     tablet   : min-width 768px  and  max-width 1199px
     desktop  : min-width 1200px
   Fluid `repeat(auto-fit, minmax(…))` grids wrap on their own between these.
   -------------------------------------------------------------------------- */

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

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-display);
	font-size: var(--fs-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

a { color: var(--blueprint); text-decoration: none; }
a:hover { color: var(--stamp); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.025em; line-height: 1.06; margin: 0 0 0.4em; text-wrap: pretty; }
h2 { font-weight: 700; letter-spacing: -0.015em; }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
p { margin: 0 0 1em; }

::selection { background: var(--amber); color: var(--ink); }
:focus-visible { outline: 2px solid var(--stamp); outline-offset: 2px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--ink); color: var(--cream);
	font-family: var(--font-mono); font-size: var(--fs-xs); padding: 12px 16px;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- Shared primitives -------------------------------------------- */

#main { margin: 12px 32px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }

.mono { font-family: var(--font-mono); }

/* Kicker / eyebrow — mono, uppercase, tracked, stamp-red. */
.kicker {
	display: inline-block;
	font-family: var(--font-mono); font-size: var(--fs-label);
	letter-spacing: 0.16em; text-transform: uppercase; color: var(--stamp);
}
/* A kicker standing in as a real section heading (not just a label above one)
   needs to be an h2 for screen-reader navigation, but shouldn't pick up the
   bold-display h1–h4 base style below — keep its own mono/label look. */
h2.kicker { font-weight: 400; margin: 0; }
.kicker--amber     { color: var(--amber); }
.kicker--blueprint { color: var(--blueprint); }

/* A full-bleed band: vertical padding only. Its left/right edge lines up with
   the #main layout box (same as .hero / .pdp / .sharda-section). Templates
   usually put .wrap on the same element for the max-width cap + centring — keep
   that, but drop the wrap gutter so nothing double-insets. */
.section { padding-block: clamp(28px, 4vw, 52px); border-bottom: var(--rule); }
.section:last-child { border-bottom: 0; }
.section.wrap { padding-inline: 0; }
.section__head {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.section__head h2 { margin: 8px 0 0; }

/* Panel = bordered card + corner ticks + offset shadow */
.panel { position: relative; background: var(--card); border: var(--rule); box-shadow: var(--shadow-offset); }
.panel--flush { box-shadow: none; }

.tick { position: absolute; width: 8px; height: 8px; z-index: 2; }
.tick--tl { top: 4px; left: 4px;  border-left: 2px solid var(--stamp); border-top: 2px solid var(--stamp); }
.tick--tr { top: 4px; right: 4px; border-right: 2px solid var(--stamp); border-top: 2px solid var(--stamp); }
.tick--bl { bottom: 4px; left: 4px;  border-left: 2px solid var(--stamp); border-bottom: 2px solid var(--stamp); }
.tick--br { bottom: 4px; right: 4px; border-right: 2px solid var(--stamp); border-bottom: 2px solid var(--stamp); }

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

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--font-mono); font-size: var(--fs-body);
	letter-spacing: 0.1em; text-transform: uppercase;
	min-height: 48px; padding: 0 24px;
	border: var(--rule); background: var(--ink); color: var(--cream);
	cursor: pointer; border-radius: 0; white-space: nowrap;
	transition: background-color 0.12s ease, color 0.12s ease;
}
.btn:hover { color: var(--cream); background: var(--ink-hover); }
.btn--primary { background: var(--stamp); border-color: var(--stamp); }
.btn--primary:hover { background: var(--stamp-hover); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }
.btn--sm { min-height: 44px; font-size: var(--fs-md); padding: 0 16px; }
.btn--block { width: 100%; }

/* ---------- Tooltip ------------------------------------------------------- */
/* Add data-tooltip="..." to any element. Shows on hover and keyboard focus.
   Sits above by default; data-tooltip-pos="bottom" flips it below. */

[data-tooltip] { position: relative; }
[data-tooltip]::before,
[data-tooltip]::after {
	position: absolute; left: 50%; opacity: 0; pointer-events: none; z-index: 80;
	transition: opacity 0.12s ease, transform 0.12s ease;
}
[data-tooltip]::after {  /* bubble */
	content: attr(data-tooltip);
	bottom: calc(100% + 8px); transform: translate(-50%, 4px);
	width: max-content; max-width: 220px; white-space: normal; text-align: center;
	font-family: var(--font-mono); font-size: var(--fs-2xs); line-height: 1.4;
	letter-spacing: 0.02em; text-transform: none;
	padding: 6px 10px; background: var(--ink); color: var(--cream);
	border: var(--rule); box-shadow: 4px 4px 0 rgba(21, 33, 43, 0.18);
}
[data-tooltip]::before {  /* caret */
	content: ""; bottom: calc(100% + 3px); transform: translate(-50%, 4px);
	border: 5px solid transparent; border-top-color: var(--ink);
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::before,
[data-tooltip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

[data-tooltip][data-tooltip-pos="bottom"]::after  { bottom: auto; top: calc(100% + 8px); }
[data-tooltip][data-tooltip-pos="bottom"]::before {
	bottom: auto; top: calc(100% + 3px);
	border-top-color: transparent; border-bottom-color: var(--ink);
}
@media (hover: none) {
	[data-tooltip]::before,
	[data-tooltip]::after { display: none; }
}

/* ---------- Forms ------------------------------------------------------------ */

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.field > label {
	font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: 0.1em;
	text-transform: uppercase; color: var(--blueprint);
}
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="password"], textarea, select {
	font-family: var(--font-mono); font-size: var(--fs-md);
	padding: 12px; border: var(--rule); background: var(--card); color: var(--ink);
	border-radius: 0;
}
textarea { min-height: 120px; resize: vertical; }

/* =============================================================================
   HEADER
   ========================================================================== */

.site-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--card); border-bottom: var(--rule);
}
/* Uniform 3-zone header at every breakpoint: logo always centred, a grid (not
   flex) so it sits on the true centre line regardless of how wide the two
   flanking zones are — each pair of flanks below shares one reserved minimum
   width so neither one "wins" more space than the other. What occupies the
   flanks changes by breakpoint: desktop is nav-links / call+enquire, mobile
   is the hamburger / a call icon (see the two @media blocks). */
.site-header__inner {
	max-width: var(--wrap); margin-inline: auto;
	display: grid;
	/* The centre column is minmax(0, 1fr), not auto — an auto track sizes to
	   its content's full natural width and simply overflows the row if that's
	   more than what's left after the flanks, rather than shrinking. minmax(0,…)
	   makes it a genuinely flexible track, so the logo actually compresses
	   (triggering .brand__name/.brand__tag's ellipsis) instead of spilling
	   past the header's edge. Flanks are a fixed 72px each here (both hold a
	   same-size icon button on mobile); desktop widens them for nav links. */
	grid-template-columns: 72px minmax(0, 1fr) 72px;
	align-items: center;
}

/* Brand lockup — shared by the header and the footer: logo left, name + tag right. */
.brand,
.site-footer__brand { display: flex; align-items: center; gap: 12px; }
.brand {
	/* stretch (grid's default), not justify-self:center — centering the item
	   itself lets it size to its content and overflow past the track since
	   nothing then constrains it to the track's width; stretching it to fill
	   the track and centering its *content* instead (justify-content) is what
	   actually lets the name/tag's min-width:0 + ellipsis engage when squeezed. */
	grid-column: 2; grid-row: 1; justify-content: center;
	min-width: 0; padding: 16px clamp(16px, 4vw, 24px);
	color: var(--ink);
}
.brand:hover { color: var(--ink); }
.brand__mark,
.site-footer__mark { width: 42px; flex: none; display: block; }
.brand__mark img, .brand__mark .sharda-mark,
.site-footer__mark img, .site-footer__mark .sharda-mark { width: 100%; height: auto; display: block; }
/* Name + tag each stay on their own single line — ellipsis rather than wrap
   or overflow once the centred logo column gets squeezed by the flanks. */
.brand__text { min-width: 0; }
.brand__name,
.site-footer__name {
	display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
	font-weight: 800; font-size: clamp(16px, 1.8vw, 21px); letter-spacing: -0.01em; line-height: 1.1;
}
.brand__tag,
.site-footer__tag {
	display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
	margin-top: 4px;
	font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--blueprint);
}

.site-nav {
	position: relative;
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	padding: 16px clamp(16px, 4vw, 24px);
}
.nav__list { display: flex; gap: 16px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.nav__list li { list-style: none; }
.nav__list a,
.nav__item > a {
	font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--ink); padding: 8px 0; display: inline-block;
}
.nav__list .current-menu-item > a,
.nav__list .current_page_item > a,
.nav__item.current-menu-item > a,
.nav__list a:hover { color: var(--stamp); }

.nav-toggle {
	display: none;
	flex-direction: column; justify-content: center; gap: 4px;
	width: 48px; min-height: 44px; padding: 0 12px;
	background: transparent; border: var(--rule); cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--ink); }

.header-actions {
	position: relative; display: flex; gap: 8px; align-items: center;
	grid-column: 3; grid-row: 1; justify-self: end;
	padding: 16px clamp(16px, 4vw, 24px);
}
.btn--icon { width: 44px; padding: 0; flex: none; }

/* Desktop (≥1200): nav links occupy the left flank, in place of the hamburger. */
@media (min-width: 1200px) {
	.site-header__inner { grid-template-columns: minmax(260px, 1fr) minmax(0, 1fr) minmax(260px, 1fr); }
	.site-nav { grid-column: 1; grid-row: 1; justify-self: start; }
}

/* Call-us popover — phone number + WhatsApp / email actions. Anchored from the
   right, not the left: .header-actions (its positioned ancestor) always sits
   in the header's right-hand zone now, so a left-anchored popover would run
   off the edge of the viewport. */
.callbox {
	position: absolute; top: calc(100% - 4px); right: 0;
	z-index: 40; width: 264px; max-width: calc(100vw - 32px);
	background: var(--ink); color: var(--cream);
	border: 1px solid var(--amber); padding: 16px; box-shadow: var(--shadow-pop);
}
.callbox[hidden] { display: none; }
.callbox__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.callbox__head .kicker { color: var(--amber); }
.callbox__close { cursor: pointer; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--cream-50); background: none; border: 0; }
.callbox__num { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: 600; color: var(--cream); }
.callbox__num:hover { color: var(--amber); }
.callbox__hours { margin: 8px 0 0; font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.7; color: var(--cream-72); }
.callbox__alt { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cream-22); display: flex; flex-direction: column; gap: 8px; }
.callbox__alt .btn { justify-content: flex-start; min-height: 40px; font-size: var(--fs-3xs); }
.callbox__alt .btn--wa { background: var(--success); border-color: var(--success); }

/* Mobile menu panel */
.mobile-menu {
	position: absolute; top: calc(100% - 1px); left: 0; right: 0; z-index: 45;
	background: var(--card); border-top: var(--rule); box-shadow: var(--shadow-pop);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a {
	display: block; padding: 16px 20px; border-bottom: var(--rule-14);
	font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
}
.mobile-menu a:hover { background: var(--ink); color: var(--cream); }
.mobile-menu a.mobile-menu__cta { background: var(--stamp); color: var(--cream); border-bottom: 0; }

/* Hamburger on mobile + tablet; full nav on desktop (≥1200).
   Three-column logo row: hamburger left, logo centred, call icon right.
   Enquire lives in the dropdown's own CTA instead of duplicating it here —
   desktop has no dropdown, so its Enquire button in .header-actions stays
   visible there. */
@media (max-width: 1199px) {
	.nav__list.nav__list--primary { display: none; }
	.nav-toggle {
		display: flex; flex: none;
		grid-column: 1; grid-row: 1; justify-self: start; margin-left: clamp(16px, 4vw, 24px);
	}
	.header-actions {
		grid-column: 3; grid-row: 1; justify-self: end;
		padding: 0; margin-right: clamp(16px, 4vw, 24px);
	}
	.header-actions .btn--primary { display: none; }
	.brand { padding-block: 16px; }
	/* Its only visible content here is .nav__list--primary (hidden above) and
	   .mobile-menu (absolutely positioned, hidden until toggled, and draws its
	   own border/shadow) — so .site-nav itself should take no space and show
	   no border of its own, or it leaves an empty bordered strip under the logo
	   row even when the dropdown is closed. */
	.site-nav { grid-column: 1 / -1; grid-row: 2; align-items: flex-start; padding: 0; border-top: 0; min-height: 0; }
}

/* =============================================================================
   FOOTER
   ========================================================================== */

.site-footer {
	background: var(--ink); color: var(--cream-72);
	border-top: 2px solid var(--stamp);
	padding-block: clamp(24px, 3vw, 32px);
}
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 24px; }
.site-footer__name { color: var(--cream); }
.site-footer__tag { color: var(--cream-50); }
/* An uploaded logo renders light on the dark footer; the bundled cream PNG is
   already light so it is left alone. */
.site-footer__mark .footer-logo-img { filter: brightness(0) invert(0.96); }
.site-footer__idblock { display: flex; flex-direction: column; }
.footer__label {
	display: block; font-family: var(--font-mono); font-size: var(--fs-md);
	letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); margin-bottom: 8px;
}
.site-footer a { color: var(--cream-72); font-family: var(--font-mono); font-size: var(--fs-xs); }
.site-footer a:hover { color: var(--amber); }
.site-footer__col p { font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.8; }
.site-footer__links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }  /* one link per row */
.site-footer__links a { display: block; }
.site-footer__legal {
	margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--cream-22);
	font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em; color: var(--cream-50);
	display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

/* =============================================================================
   HOMEPAGE
   ========================================================================== */

.hero {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	border-bottom: var(--rule);
}
.hero__copy {
	padding: clamp(28px, 4vw, 48px) var(--gap);
	display: flex; flex-direction: column; gap: 20px;
	border-right: var(--rule-18);
}
.hero__copy h1 { margin: 0; font-size: var(--fs-h1); }
.hero__lead { margin: 0; font-size: var(--fs-body); color: var(--ink-80); max-width: 46ch; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__figure {
	padding: var(--gap);
	display: flex; align-items: center; justify-content: center;
	background: var(--tint-blueprint);
}
.hero__figure .well { width: 100%; }

/* Hero stats — the classic-render (.hero__stats) and block-render
   (.sharda-hero-stats) markups share one look. */
.hero__stats,
.sharda-hero-stats {
	display: flex; gap: 24px; flex-wrap: wrap;
	padding-top: 12px; border-top: 1px dashed var(--ink-30);
}
.stat,
.sharda-hero-stats .stat { display: flex; flex-direction: column; }
.stat__value,
.sharda-hero-stats .stat__value { font-family: var(--font-mono); font-size: var(--fs-data); font-weight: 600; }
.stat__label,
.sharda-hero-stats .stat__label {
	font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: 0.1em;
	text-transform: uppercase; color: var(--blueprint);
}

/* Category grid */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.cat-card {
	position: relative; display: flex; flex-direction: column; gap: 12px;
	border: var(--rule); background: var(--card); padding: 20px 16px; color: var(--ink);
}
.cat-card:hover { background: var(--ink); color: var(--cream); }
.cat-card__code { font-family: var(--font-mono); font-size: var(--fs-body); letter-spacing: 0.12em; color: var(--stamp); }
.cat-card:hover .cat-card__code { color: var(--amber-ink); }
.cat-card__name { font-weight: 700; font-size: var(--fs-data); line-height: 1.2; }
.cat-card__count { font-family: var(--font-mono); font-size: var(--fs-md); }

/* Process steps (classic render) */
.process { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border: var(--rule); }
.process__step { padding: 16px; border-right: var(--rule-18); display: flex; flex-direction: column; gap: 8px; }
.process__step:last-child { border-right: 0; }
.process__no { font-family: var(--font-mono); font-size: var(--fs-data); font-weight: 600; color: var(--amber-ink); }
.process__title { font-weight: 700; font-size: var(--fs-data); }
.process__body { font-size: var(--fs-md); line-height: 1.55; color: var(--ink-80); }
.process__meta { font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blueprint); }

/* Calibration + clients split (classic render) */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); border-bottom: var(--rule); }
.split:last-child { border-bottom: 0; }
.split__dark { padding: clamp(24px, 3vw, 32px) var(--gap); background: var(--ink); color: var(--cream); }
.split__dark .kicker { color: var(--amber); }
.split__dark h2 { color: var(--cream); font-size: var(--fs-h2); }
.split__dark p { color: var(--cream-72); max-width: 44ch; }
.cal-list { display: flex; flex-direction: column; border-top: 1px solid var(--cream-22); }
.cal-list a {
	display: flex; justify-content: space-between; gap: 16px; padding: 8px 0;
	border-bottom: 1px solid var(--cream-14);
	font-family: var(--font-mono); font-size: var(--fs-body); color: var(--cream);
}
.cal-list a:hover { color: var(--amber); }
.cal-list .price { color: var(--amber); }
.split__light { padding: clamp(24px, 3vw, 32px) var(--gap); display: flex; flex-direction: column; gap: 16px; }
.client-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.client-chip {
	border: var(--rule-30); padding: 16px; background: var(--cream-72);
	font-family: var(--font-mono); font-size: var(--fs-2xs); line-height: 1.45;
}
.quote-box { border: 1px solid var(--amber); padding: 16px; background: var(--tint-amber); }
.quote-box p { margin: 0; font-size: var(--fs-body); line-height: 1.6; }
.quote-box cite { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: var(--fs-2xs); font-style: normal; color: var(--blueprint); }
.quote-box .draft-flag { margin: 8px 0 0; font-family: var(--font-mono); font-size: var(--fs-3xs); color: var(--stamp); }
.addr-grid { border-top: 1px dashed var(--ink-30); padding-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.addr__label { font-family: var(--font-mono); font-size: var(--fs-md); letter-spacing: 0.12em; text-transform: uppercase; color: var(--stamp); }
.addr p { margin: 8px 0 0; font-size: var(--fs-md); line-height: 1.55; }

/* =============================================================================
   HOMEPAGE — block editor content
   Full-bleed stacked sections divided by 1px rules — design screen 1.
   ========================================================================== */

.sharda-home { max-width: var(--wrap); margin-inline: auto; }
.sharda-home > * { margin: 0 !important; }
.sharda-home .alignwide,
.sharda-home .alignfull { max-width: none; width: auto; }

/* generic section band */
.sharda-section { padding: clamp(24px, 2.6vw, 32px) 0; border-bottom: var(--rule); }
.sharda-section > * { margin: 0 !important; max-width: none; }
.sharda-section > * + * { margin-top: 16px !important; }
.sharda-section h2 {
	font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2);
	letter-spacing: -0.015em;
}
.sharda-section__bar {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 16px; flex-wrap: wrap;
}
.sharda-section__bar > * { margin: 0 !important; }
.sharda-section__note { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--blueprint); }

/* "Kicker" block style (Styles → Kicker) — look only; size follows the block. */
.sharda-kicker,
.is-style-sharda-kicker {
	font-family: var(--font-mono); letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--stamp); margin: 0 !important;
}

/* Hero: text left, image right, split by a 1px rule */
.sharda-hero.wp-block-columns {
	gap: 0 !important; align-items: stretch;
	border: var(--rule); background: var(--card);
}
.sharda-hero .wp-block-column { margin: 0; }
.sharda-hero__text {
	border-right: var(--rule-18);
	padding: clamp(28px, 3.2vw, 48px) clamp(20px, 2.4vw, 32px);
	display: flex; flex-direction: column; gap: 20px;
}
.sharda-hero__text > * { margin: 0 !important; max-width: none; }
.sharda-hero__text h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -0.025em; }
.sharda-hero__text p:not(.sharda-kicker) { font-size: var(--fs-body); line-height: 1.6; color: var(--ink-80); max-width: 46ch; }
.sharda-hero__text .wp-block-buttons { display: flex; gap: 12px; flex-wrap: wrap; }

.sharda-hero__media {
	padding: clamp(20px, 2.4vw, 32px);
	display: flex; align-items: center; justify-content: center;
}
/* Image sits inside a fixed 4:3 frame on clinical white and is contained —
   it never drives the column height. */
.sharda-hero__media .wp-block-image,
.sharda-hero__media figure {
	margin: 0; width: 100%; position: relative; background: var(--white);
	display: flex; align-items: center; justify-content: center; padding: 20px;
}
.sharda-hero__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sharda-hero__media figcaption {
	position: absolute; bottom: 8px; left: 8px; margin: 0;
	font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: 0.12em; text-transform: uppercase;
	background: var(--card); border: var(--rule); padding: 4px 8px; color: var(--ink);
}

@media (min-width: 768px) {
	.sharda-hero.wp-block-columns { flex-wrap: nowrap; }
}
@media (max-width: 767px) {
	.sharda-hero.wp-block-columns { flex-wrap: wrap; }
	.sharda-hero .wp-block-column { flex-basis: 100% !important; }
	.sharda-hero__text { border-right: 0; border-bottom: var(--rule-18); }
}

/* Button block styles → mirror .btn / .btn--primary */
.wp-block-button.is-style-sharda-dark .wp-block-button__link,
.wp-block-button.is-style-sharda-red .wp-block-button__link {
	font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase;
	min-height: 48px; display: inline-flex; align-items: center;
	padding: 0 24px; border-radius: 0; border: var(--rule);
}
.wp-block-button.is-style-sharda-dark .wp-block-button__link { background: var(--ink); color: var(--cream); }
.wp-block-button.is-style-sharda-red .wp-block-button__link { background: var(--stamp); border-color: var(--stamp); color: var(--cream); }

/* Calibration panel (dynamic block renders <section class="split">) */
.sharda-home > .split { border-bottom: var(--rule); }

/* Process — core columns block as the design's bordered grid: 4 / 2 / 1 up */
.sharda-process.wp-block-columns {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px !important;
	background: var(--ink-18); border: var(--rule); align-items: stretch;
}
@media (max-width: 1199px) { .sharda-process.wp-block-columns { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .sharda-process.wp-block-columns { grid-template-columns: 1fr; } }
.sharda-process .wp-block-column {
	padding: 16px; margin: 0; background: var(--card);
	display: flex; flex-direction: column; gap: 8px;
}
.sharda-process .wp-block-column > * { margin: 0 !important; }
.sharda-process .sharda-step-no { font-family: var(--font-mono); font-size: var(--fs-data); font-weight: 600; color: var(--amber-ink); }
.sharda-process .process__title,
.sharda-process h3 { font-weight: 700; font-size: var(--fs-small); line-height: 1.2; color: var(--ink); }  /* h3: legacy content pre-swap */
.sharda-process p { font-size: var(--fs-md); line-height: 1.55; color: var(--ink-80); }

/* CTA band */
.sharda-cta { text-align: center; }
.sharda-cta h2 { font-size: var(--fs-h2); }
.sharda-cta p { max-width: 52ch; margin-inline: auto !important; }
.sharda-cta .wp-block-buttons { justify-content: center; }

/* =============================================================================
   CATALOG (PLP)
   ========================================================================== */

.catalog-back { padding-top: 16px; }
.catalog-back a { font-family: var(--font-mono); font-size: var(--fs-md); letter-spacing: 0.06em; text-transform: uppercase; color: var(--blueprint); }
.catalog-back a:hover { color: var(--stamp); }

.plp-head { padding-block: clamp(20px, 3vw, 28px) 16px; border-bottom: var(--rule-30); }
.plp-head__meta { font-family: var(--font-mono); font-size: var(--fs-md); color: var(--blueprint); margin: 0; }

/* PLP + category-header h1 share a size */
.plp-head h1,
.cat-head__body h1 { font-size: clamp(27px, 3.4vw, 38px); letter-spacing: -0.02em; }
.plp-head h1 { margin: 12px 0 4px; }
.cat-head__body h1 { margin: 0; }

/* Homepage category cards (3 + "more") — reuses .cat-grid / .cat-card */
.product-grid--cats { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cat-card__desc { font-size: var(--fs-md); line-height: 1.5; color: var(--ink-80); }
.cat-card--all { background: var(--ink); color: var(--cream); }
.cat-card--all .cat-card__code { color: var(--amber); }
.cat-card--all:hover { background: var(--stamp); border-color: var(--stamp); }
.cat-card--all:hover .cat-card__code { color: var(--cream); }

/* Category Listing page — one-column list */
.cat-list { padding-block: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 16px; }
.cat-list__item {
	position: relative;
	display: grid; grid-template-columns: clamp(220px, 32%, 360px) 1fr;
	border: var(--rule); background: var(--card); color: var(--ink);
	box-shadow: var(--shadow-offset);
}
.cat-list__item:hover { background: var(--ink); color: var(--cream); }
.cat-list__media { border-right: var(--rule); }
.cat-list__item:hover .cat-list__media { border-color: var(--cream-22); }
.cat-list__media .well { height: 100%; min-height: 180px; border-bottom: 0; }
.cat-list__body { padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 12px; }
.cat-list__code { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.12em; color: var(--stamp); }
.cat-list__item:hover .cat-list__code { color: var(--amber-ink); }
.cat-list__name { margin: 0; font-weight: 700; font-size: clamp(20px, 2.2vw, 25px); line-height: 1.15; letter-spacing: -0.015em; }
.cat-list__desc { margin: 0; font-size: var(--fs-md); line-height: 1.6; color: var(--ink-80); max-width: 60ch; }
.cat-list__item:hover .cat-list__desc { color: var(--cream-72); }
.cat-list__cta { margin-top: auto; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.cat-list__item--all { grid-template-columns: 1fr; background: var(--ink); color: var(--cream); }
.cat-list__item--all .cat-list__code { color: var(--amber); }
.cat-list__item--all:hover { background: var(--stamp); border-color: var(--stamp); }
@media (max-width: 767px) {
	.cat-list__item { grid-template-columns: 1fr; }
	.cat-list__media { border-right: 0; border-bottom: var(--rule); }
	.cat-list__media .well { min-height: 160px; }
}

/* Category header on the product list (PLP) */
.cat-head {
	display: grid; grid-template-columns: clamp(220px, 34%, 380px) 1fr;
	border: var(--rule); background: var(--card); margin-top: 16px;
}
.cat-head__media { border-right: var(--rule); }
.cat-head__media .well { height: 100%; min-height: 200px; border-bottom: 0; }
.cat-head__body { padding: clamp(20px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 12px; }
.cat-head__desc { margin: 0; font-size: var(--fs-small); line-height: 1.6; color: var(--ink-80); max-width: 64ch; }
@media (max-width: 767px) {
	.cat-head { grid-template-columns: 1fr; }
	.cat-head__media { border-right: 0; border-bottom: var(--rule); }
}

/* 4-column product tiles on the PLP (specificity beats .product-grid) */
.product-grid.product-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1199px) { .product-grid.product-grid--4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .product-grid.product-grid--4 { grid-template-columns: 1fr; } }

.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; padding-block: 16px; border-bottom: var(--rule-30); }
.chip {
	font-family: var(--font-mono); font-size: var(--fs-body); letter-spacing: 0.06em; text-transform: uppercase;
	min-height: 44px; padding: 0 16px;
	display: inline-flex; align-items: center;
	border: var(--rule); background: transparent; color: var(--ink);
}
.chip:hover { color: var(--ink); background: var(--ink-06); }
.chip[aria-current="true"] { background: var(--ink); color: var(--cream); }

.product-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px;
	padding-block: 20px clamp(24px, 3vw, 32px);
}

.product-card { position: relative; display: flex; flex-direction: column; border: var(--rule); background: var(--card); }
.product-card__body { padding: 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.product-card__media { position: relative; display: block; }
/* Tag over the image, top-left (corner ticks are tr / bl, so it stays clear). */
.product-card__tag {
	position: absolute; top: 0; left: 0; z-index: 2;
	font-family: var(--font-mono); font-size: var(--fs-md); letter-spacing: 0.1em;
	text-transform: uppercase; color: var(--cream); background: var(--ink); padding: 4px 8px;
}
.product-card__name { font-weight: 700; font-size: var(--fs-body); line-height: 1.28; flex: 1; }
.product-card__name a { color: var(--ink); font-size: 22px; }
.product-card__name a:hover { color: var(--stamp); }
.product-card__price { font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 600; }
.product-card__price.is-request { color: var(--stamp); }
.product-card__actions { display: flex; gap: 8px; }
.product-card__actions .btn { flex: 1; padding: 0 8px; font-size: var(--fs-md); }

/* Image well */
.well {
	position: relative; display: flex; align-items: center; justify-content: center;
	background: var(--white); overflow: hidden;
	border-bottom: var(--rule-30); color: var(--blueprint);
}
.product-card .well { aspect-ratio: 4 / 3; }
.well__img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.well--empty { min-height: 152px; }
.product-card .well--empty { min-height: 0; }
.well__stripes { position: absolute; inset: 0; width: 100%; height: 100%; }
.well__label { position: relative; font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: 0.12em; text-transform: uppercase; }

/* =============================================================================
   PRODUCT (PDP)
   ========================================================================== */

.breadcrumb {
	padding: 16px 0; border-bottom: var(--rule-30);
	font-family: var(--font-mono); font-size: var(--fs-md); text-transform: uppercase; color: var(--blueprint);
}
.breadcrumb a { color: var(--blueprint); }
.breadcrumb a:hover { color: var(--stamp); }

/* Cap the PDP band at the site width so sections don't spread on wide screens. */
.pdp,
.svc-hero,
.svc-body { max-width: var(--wrap); margin-inline: auto; }

.pdp { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.pdp__media {
	--pdp-media-w: 600px;   /* image well cap on wide screens */
	padding: clamp(20px, 3vw, 32px) var(--gap); border-right: var(--rule-30);
	display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.pdp__media .well { aspect-ratio: 4 / 3; border: var(--rule); width: 100%; max-width: var(--pdp-media-w); }
.pdp__media .well--empty { min-height: 0; }
.pdp__thumbs { display: flex; gap: 12px; width: 100%; max-width: var(--pdp-media-w); }
.pdp__thumb {
	flex: 1; border: var(--rule-30); aspect-ratio: 4 / 3;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blueprint);
}
.pdp__info { padding: clamp(20px, 3vw, 32px) var(--gap); display: flex; flex-direction: column; gap: 16px; }
.pdp__head { display: flex; flex-direction: column; gap: 8px; }
.pdp__head .kicker { margin: 0; }
.pdp__info h1 { margin: 0; font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; }
.pdp__sku { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; color: var(--blueprint); }

.price-box {
	display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
	padding: 16px; border: var(--rule); background: var(--card);
}
.price-box__main { display: flex; flex-direction: column; gap: 4px; }
.price-box__label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blueprint); }
.price-box__value { font-family: var(--font-mono); font-size: var(--fs-data); font-weight: 600; }
.price-box__value.is-request { color: var(--stamp); }
.price-box__note { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--blueprint); line-height: 1.5; }

.pdp__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.pdp__desc { margin: 0; font-size: var(--fs-lg); line-height: 1.6; color: var(--ink-80); }
.pdp__desc > :first-child { margin-top: 0; }
.pdp__desc > :last-child { margin-bottom: 0; }
.pdp__desc--empty { color: var(--blueprint); }

.pdp__terms { margin: 0; font-family: var(--font-mono); font-size: var(--fs-md); line-height: 1.7; color: var(--blueprint); }

/* Specification — original design (bordered box + dark title bar), collapsible.
   Rows: two label/value pairs per line (4 columns) on tablet and up. */
.spec { border: var(--rule-30); background: var(--card); }
.spec__title {
	padding: 12px 16px; background: var(--ink); color: var(--cream);
	font-family: var(--font-mono); font-size: var(--fs-body); letter-spacing: 0.14em; text-transform: uppercase;
}
details.spec > summary.spec__title {
	list-style: none; cursor: pointer;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
details.spec > summary.spec__title::-webkit-details-marker { display: none; }
details.spec > summary.spec__title::after {
	content: "+"; font-family: var(--font-mono); font-size: var(--fs-lg); line-height: 1; color: var(--amber); flex: none;
}
details.spec[open] > summary.spec__title::after { content: "\2013"; }
.spec__rows { display: grid; grid-template-columns: 1fr 1fr; }
.spec__row { display: flex; gap: 16px; padding: 12px 16px; border-bottom: var(--rule-14); font-family: var(--font-mono); font-size: var(--fs-small); }
.spec__rows > .spec__row:nth-child(odd) { border-right: var(--rule-14); }
.spec__rows > .spec__row:last-child,
.spec__rows > .spec__row:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.spec__k { width: 42%; color: var(--blueprint); font-weight: 800; }
.spec__v { flex: 1; }
@media (max-width: 767px) {
	.spec__rows { grid-template-columns: 1fr; }
	.spec__rows > .spec__row:nth-child(odd) { border-right: 0; }
}

/* Collapsible panels — Specification wrapper, FAQ accordion (native <details>) */
.pdp-panels,
.pdp-faqs,
.pdp-content { padding-block: clamp(20px, 3vw, 32px); }
.pdp-content h2 { font-size: var(--fs-h3); }
.pdp-faqs .kicker { display: block; margin-bottom: 16px; }
.disclosure { border: var(--rule); background: var(--card); }
.disclosure + .disclosure { border-top: 0; }
.disclosure > summary {
	list-style: none; cursor: pointer;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 16px 20px;
	font-family: var(--font-mono); font-size: var(--fs-body); letter-spacing: 0.06em;
	font-weight: 600; color: var(--ink);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after {
	content: "+"; font-family: var(--font-mono); font-size: var(--fs-lg); line-height: 1; color: var(--stamp); flex: none;
}
.disclosure[open] > summary::after { content: "\2013"; }
.disclosure[open] > summary { border-bottom: var(--rule-18); }
.disclosure__panel { padding: 16px 20px 20px; font-size: var(--fs-body); line-height: 1.6; color: var(--ink-80); }
.disclosure__panel > :first-child { margin-top: 0; }
.disclosure__panel > :last-child { margin-bottom: 0; }

/* Service variant */
.svc-hero { padding: clamp(24px, 3vw, 32px) var(--gap); background: var(--ink); color: var(--cream); }
.svc-hero .kicker { color: var(--amber); }
.svc-hero h1 { margin: 12px 0 8px; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; letter-spacing: -0.02em; }
.svc-hero p { margin: 0; color: var(--cream-72); max-width: 46ch; }

.svc-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.svc-col { padding: clamp(20px, 3vw, 32px) var(--gap); display: flex; flex-direction: column; gap: 16px; }
.svc-col--left { border-right: var(--rule-30); }
.svc-col--right { background: var(--tint-blueprint); }

.scope-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.scope-list li { display: flex; gap: 12px; align-items: flex-start; list-style: none; }
.scope-list li::before { content: ""; width: 8px; height: 8px; background: var(--stamp); margin-top: 8px; flex: none; }
.scope-list span { font-size: var(--fs-body); line-height: 1.55; }
ul.scope-list { padding: 0; margin: 12px 0 0; }

.cert { border: var(--rule); background: var(--card); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.cert__head { display: flex; justify-content: space-between; gap: 12px; border-bottom: var(--rule-30); padding-bottom: 12px; }
.cert__head strong { font-weight: 700; font-size: var(--fs-body); }
.cert__head span { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--stamp); }
.cert__row { display: flex; gap: 12px; font-family: var(--font-mono); font-size: var(--fs-xs); }
.cert__row .k { width: 46%; color: var(--blueprint); }
.cert__sig { margin-top: 8px; border: 1px dashed var(--ink-30); padding: 12px; font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--blueprint); text-align: center; text-transform: uppercase; }

/* Up-sell / cross-sell — the PLP product card, one notch smaller */
.related { padding-block: clamp(20px, 3vw, 28px); border-top: var(--rule); }
.related .kicker { display: block; }
.related-grid { margin-top: 16px; padding-block: 0; gap: 12px; }
.related-grid .product-card__body { padding: 12px; gap: 8px; }
.related-grid .product-card__name a { font-size: var(--fs-body); }
.related-grid .product-card__price { font-size: var(--fs-md); }
.related-grid .product-card__tag { font-size: var(--fs-2xs); letter-spacing: 0.08em; padding: 3px 6px; }
.related-grid .product-card__actions { gap: 6px; }
.related-grid .product-card__actions .btn { min-height: 36px; font-size: var(--fs-xs); }

/* =============================================================================
   ENQUIRY
   ========================================================================== */

.enquiry { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.enquiry__main { padding: clamp(24px, 3vw, 32px) var(--gap); border-right: var(--rule-30); display: flex; flex-direction: column; gap: 16px; }
.enquiry__side { padding: clamp(24px, 3vw, 32px) var(--gap); display: flex; flex-direction: column; gap: 20px; background: var(--tint-blueprint); }
.enquiry h1 { margin: 12px 0 8px; font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -0.02em; }

.channel-picker { display: flex; gap: 8px; flex-wrap: wrap; }

.preview { border: var(--rule); }
.preview__bar {
	padding: 12px 16px; background: var(--ink); color: var(--cream);
	display: flex; justify-content: space-between; gap: 12px;
	font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: 0.12em; text-transform: uppercase;
}
.preview__bar .target { color: var(--amber); }
.preview__body { margin: 0; padding: 16px; font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.75; white-space: pre-wrap; color: var(--ink); }

.enquiry-items { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.enquiry-item {
	border: var(--rule-30); background: var(--card); padding: 12px 16px;
	display: flex; justify-content: space-between; gap: 12px; align-items: center;
}
.enquiry-item__name { font-weight: 600; font-size: var(--fs-md); line-height: 1.3; }
.enquiry-item__remove { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--stamp); background: none; border: 0; cursor: pointer; text-transform: uppercase; }
.enquiry-empty { border: 1px dashed var(--ink-30); padding: 16px; font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--blueprint); }

.direct-block p { margin: 8px 0 0; font-family: var(--font-mono); font-size: var(--fs-md); line-height: 1.8; }

/* "Add to enquiry" button feedback */
.js-add-enquiry.is-added { background: var(--success); border-color: var(--success); color: var(--cream); }

/* =============================================================================
   ABOUT / CONTACT / generic pages
   ========================================================================== */

.page-hero { padding-block: clamp(28px, 4vw, 44px); border-bottom: var(--rule); }
.page-hero h1 { margin: 12px 0 16px; font-size: clamp(30px, 4vw, 44px); }
.page-hero p { font-size: var(--fs-body); line-height: 1.65; color: var(--ink-80); max-width: 52ch; }

.fact-list { display: flex; flex-direction: column; gap: 12px; }
.fact { position: relative; border: var(--rule); background: var(--card); padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.fact__k { font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blueprint); }
.fact__v { font-family: var(--font-mono); font-size: var(--fs-body); font-weight: 600; }

.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); border: var(--rule); }
.pillar { padding: 20px 16px; border-right: var(--rule-18); display: flex; flex-direction: column; gap: 8px; }
.pillar:last-child { border-right: 0; }
.pillar__code { font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: 0.12em; color: var(--amber-ink); }
.pillar__title { font-weight: 700; font-size: var(--fs-lg); line-height: 1.2; }
.pillar__body { font-size: var(--fs-small); line-height: 1.6; color: var(--ink-80); }

.flow { display: flex; flex-direction: column; }
.flow__row { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--cream-22); }
.flow__n { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--amber); width: 24px; flex: none; }
.flow__row span:last-child { font-size: var(--fs-small); line-height: 1.55; color: rgba(250, 248, 243, 0.85); }

.contact-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); border-bottom: var(--rule); }
.contact-channel { padding: clamp(20px, 3vw, 28px) var(--gap); border-right: var(--rule-18); display: flex; flex-direction: column; gap: 8px; }
.contact-channel:last-child { border-right: 0; }
.contact-channel__value { font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 600; word-break: break-word; }
.contact-channel__note { font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.6; color: var(--blueprint); }
.contact-channel .btn { align-self: flex-start; margin-top: 8px; }

.locations { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.location { padding: clamp(20px, 3vw, 28px) var(--gap); border-right: var(--rule-18); border-bottom: var(--rule-18); display: flex; flex-direction: column; gap: 12px; }
.location__map {
	border: var(--rule-30); background: var(--tint-blueprint);
	min-height: 120px; display: flex; align-items: center; justify-content: center;
	font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blueprint);
	text-align: center; padding: 16px;
}

/* Configurable Google Map embed */
.map-embed {
	position: relative; aspect-ratio: 16 / 10;
	border: var(--rule-30); background: var(--card); overflow: hidden;
}
.map-embed iframe {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
	filter: grayscale(1) contrast(1.04); transition: filter 0.15s ease;
}
.map-embed:hover iframe,
.map-embed:focus-within iframe { filter: none; }

/* Prose (page.php / post content) */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 1.4em; font-size: var(--fs-h2); }
.prose h3 { margin-top: 1.2em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose img { border: var(--rule); }
.prose blockquote { margin: 1.2em 0; padding: 12px 16px; border-left: 3px solid var(--stamp); background: var(--card); }

/* =============================================================================
   MISC
   ========================================================================== */

.entry-list { display: grid; gap: 20px; }
.entry-card { border: var(--rule); background: var(--card); padding: 20px; }
.entry-card h2 { font-size: var(--fs-h2); }
.entry-meta { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--blueprint); text-transform: uppercase; letter-spacing: 0.06em; }

.pagination { display: flex; gap: 8px; flex-wrap: wrap; padding-block: 24px; font-family: var(--font-mono); font-size: var(--fs-xs); }
.pagination .page-numbers {
	min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
	border: var(--rule); padding: 0 12px;
}
.pagination .page-numbers.current { background: var(--ink); color: var(--cream); }

.error-404 { padding-block: clamp(40px, 8vw, 88px); text-align: center; }
.error-404 .btn { margin-top: 20px; }

/* Print — used if the site ever renders a document view */
@media print {
	.site-header, .site-footer, .no-print { display: none !important; }
	body { background: var(--white); }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/* Mobile: collapse the two-column sections to a single column and turn their
   vertical dividers into horizontal ones. Tablet + desktop keep two columns. */
@media (max-width: 767px) {
	.hero,
	.pdp,
	.svc-body,
	.enquiry,
	.locations,
	.contact-channels { grid-template-columns: 1fr; }

	.hero__copy { border-right: 0; border-bottom: var(--rule-18); }
	.pdp__media,
	.svc-col--left,
	.enquiry__main,
	.location,
	.contact-channel { border-right: 0; border-bottom: var(--rule-30); }
}