/* IT Support Hub site styles (one file).
   1 Tokens  2 Base  3 Layout  4 Buttons  5 Shell  6 Fallback template
   7 Content: sub-nav and FAQ  8 Hero  9 Components  10 Templates */

/* ============================== 1. Tokens ============================== */
:root {
	--accent: #0E7A50;
	--accent-deep: #07402B;
	--ink: #121916;
	--ink-2: #33403B;
	--muted: #4F5C57;
	--charcoal: #111816;
	--charcoal-2: #121916;
	--charcoal-3: #1A2220;
	--mint: #EAF3EE;
	--grey: #F3F5F4;
	--line: #DDE3E0;
	--line-strong: #C9D2CE;
	--field: #7E8B86; /* form control borders: 3.5:1 on white */
	--amber: #B7791F;
	--red: #B42318;
	--red-pale: #FBEDEB;
	--amber-pale: #FBF1E2;
	--white: #FFFFFF;
	--on-dark: #E6ECE9;
	--on-dark-2: #AEBBB5;
	--live: #3FCB85;

	--font: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
	--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--maxw: 1240px;
	--gut: max(16px, 4vw);
	--r-sm: 8px;
	--r: 10px;
	--r-lg: 16px;
	--pill: 999px;

	--shadow-panel: 0 18px 40px rgba(18, 25, 22, .16), 0 2px 6px rgba(18, 25, 22, .08);
	--shadow-tile: 0 14px 30px rgba(18, 25, 22, .14);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ============================== 2. Base ============================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	caret-color: var(--accent);
	accent-color: var(--accent);
}
[hidden] { display: none !important; }
img, video { max-width: 100%; height: auto; }
svg { flex-shrink: 0; }

h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 800; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); line-height: 1.06; letter-spacing: -.025em; }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); }
h3 { font-size: 1.1875rem; line-height: 1.3; letter-spacing: -.01em; }
p { margin: 0 0 1em; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--accent); }
::selection { background: #CDE7D9; color: var(--ink); }
::placeholder { color: #5F6B66; opacity: 1; }
:focus-visible { outline: 3px solid var(--focus, var(--accent)); outline-offset: 2px; }
main:focus { outline: none; }

/* Tabular figures only on mono runs (prices, phone numbers, counts). Schibsted
   Grotesk's tabular set also widens the comma, full stop and colon to figure
   width, so applying it to table text put a gap before every comma and full stop. */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Icons: 1.4px line in currentColor, one detail stroke in the accent.
   Dark or coloured surfaces set --ic-accent to keep the detail visible. */
.ic { display: block; }
.ic-accent { stroke: var(--ic-accent, var(--accent)); }

/* Dark surfaces: lighter focus ring so it stays visible on charcoal. */
.on-dark { --focus: var(--live); --ic-accent: var(--live); }

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

/* ============================== 3. Layout ============================== */
.wrap { max-width: var(--maxw); margin: 0 auto; }
.gut { padding-inline: var(--gut); }

/* ============================== 4. Buttons ============================== */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 0 24px;
	border: 2px solid transparent; border-radius: var(--pill);
	font: inherit; font-size: 14px; font-weight: 800; line-height: 1.1;
	letter-spacing: .05em; text-transform: uppercase; text-align: center; text-decoration: none;
	cursor: pointer;
	transition: background-color .15s, color .15s, border-color .15s;
}
.btn .ic { width: 18px; height: 18px; stroke-width: 1.8; }
.btn--accent { background: var(--accent); color: var(--white); }
.btn--accent:hover { background: var(--accent-deep); color: var(--white); }
.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { background: var(--mint); color: var(--ink); }
.btn--ghost-light { background: transparent; border-color: var(--white); color: var(--white); }
.btn--ghost-light:hover { background: rgba(255, 255, 255, .12); color: var(--white); }
.btn--ghost { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--white); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 13px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn[aria-busy="true"] { cursor: progress; opacity: .8; }

/* ============================== 5. Shell ============================== */

/* Skip link */
.skip {
	position: absolute; left: 12px; top: -100px; z-index: 100;
	padding: 12px 18px; border-radius: var(--r-sm);
	background: var(--white); color: var(--ink); font-weight: 600; text-decoration: none;
	box-shadow: var(--shadow-panel);
}
.skip:focus { top: 12px; }

/* Utility bar */
.utility {
	--focus: var(--live);
	padding-inline: var(--gut);
	background: var(--charcoal); color: var(--on-dark);
	font-size: 13px;
}
.utility__in { min-height: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 16px; }
.utility a { color: var(--on-dark); text-decoration: none; }
.utility a:hover { color: var(--white); text-decoration: underline; }
.utility__line { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; white-space: nowrap; }
.itsh-dot { position: static; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--live); flex-shrink: 0; }
.utility__links { display: flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.utility__links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 8px; }
.utility__search {
	display: inline-grid; place-items: center; width: 40px; height: 40px; margin-right: -10px; padding: 0;
	border: 0; border-radius: var(--r-sm); background: none; color: var(--on-dark); cursor: pointer;
}
.utility__search .ic { stroke-width: 2; }
.utility__search:hover, .utility__search[aria-expanded="true"] { color: var(--white); background: rgba(255, 255, 255, .1); }

/* Search panel (opened from the utility bar) */
.search-panel { --focus: var(--live); padding: 16px var(--gut); background: var(--charcoal-3); color: var(--on-dark); }
.search-panel__form { max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.search-panel label { font-size: 14px; font-weight: 600; }
.search-panel input {
	flex: 1 1 260px; min-height: 48px; padding: 0 18px;
	border: 1.5px solid transparent; border-radius: var(--pill);
	font: inherit; font-size: 16px; color: var(--ink); background: var(--white);
}

/* Header */
.site-header { position: relative; z-index: 40; padding-inline: var(--gut); background: var(--white); border-bottom: 1px solid #E3E8E6; }
.site-header__in { max-width: var(--maxw); margin: 0 auto; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; text-decoration: none; }
/* Logo artwork: assets/img/logo.svg (dark wordmark) and logo-light.svg (white wordmark for charcoal). */
.brand__logo { display: block; width: auto; height: 38px; }
.btn--head { min-height: 44px; padding: 0 22px; font-size: 15px; letter-spacing: 0; text-transform: none; white-space: nowrap; }

/* Main nav and dropdowns */
.nav__list { display: flex; align-items: center; gap: clamp(0px, .5vw, 8px); margin: 0; padding: 0; list-style: none; }
.nav__li { position: relative; }
.nav-item {
	display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
	border: 0; border-radius: var(--r-sm); background: none;
	font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.nav-item .ic { width: 12px; height: 12px; stroke-width: 2.6; transition: transform .2s var(--ease-out); }
.nav-item:hover, .nav-item[aria-expanded="true"] { color: var(--accent); }
.nav-item[aria-expanded="true"] .ic { transform: rotate(180deg); }
.nav-item[data-current="true"], .nav-item[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 10px; }
.nav-panel {
	position: absolute; top: calc(100% + 14px); left: -8px; min-width: 280px; padding: 10px;
	background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-panel);
	animation: panel-in .22s var(--ease-out);
}
.nav__li:last-child .nav-panel { left: auto; right: -8px; }
.nav-panel ul { margin: 0; padding: 0; list-style: none; }
.nav-panel--services { width: min(600px, calc(100vw - 32px)); }
.nav-panel--services ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
/* Industries: two columns with icons, centred under its menu item so it stays on screen. */
.nav-panel--industries { width: min(500px, calc(100vw - 32px)); left: 50%; margin-left: -250px; }
.nav-panel--industries ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
.nav-panel--industries a .ic, .mm-group a .ic { flex: 0 0 24px; }
.nav-panel a {
	display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: var(--r);
	font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); text-decoration: none;
}
.nav-panel a:hover { background: var(--grey); color: var(--ink); }
.nav-panel a[aria-current="page"] { background: var(--mint); }
.nav-panel__foot { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
.nav-panel__foot a { justify-content: space-between; color: var(--accent); }
.nav-panel__foot a:hover { color: var(--accent-deep); }
.nav-panel__foot .ic { stroke-width: 1.8; }
@keyframes panel-in { from { opacity: .4; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Mobile menu */
.menu-toggle {
	display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px;
	border: 1.5px solid var(--line-strong); border-radius: var(--pill); background: var(--white);
	font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.menu-toggle .ic { width: 20px; height: 20px; stroke-width: 1.8; }
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] { border-color: var(--ink); }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }
.mobile-menu { max-width: var(--maxw); margin: 0 auto; padding: 4px 0 20px; border-top: 1px solid var(--line); }
.mm-group, .mm-link { border-bottom: 1px solid var(--line); }
.mm-group summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; font-size: 18px; font-weight: 600; cursor: pointer; list-style: none; }
.mm-group summary::-webkit-details-marker { display: none; }
.mm-group summary .ic { width: 18px; height: 18px; stroke-width: 2; transition: transform .2s var(--ease-out); }
.mm-group[open] summary .ic { transform: rotate(180deg); }
.mm-group ul { margin: 0 0 12px; padding: 0; list-style: none; }
.mm-group a { display: flex; align-items: center; gap: 12px; min-height: 48px; font-size: 16px; color: var(--ink); text-decoration: none; }
.mm-group a[aria-current="page"] { font-weight: 600; color: var(--accent); }
.mm-group .mm-all { justify-content: space-between; font-weight: 600; color: var(--accent); }
.mm-all .ic { stroke-width: 1.8; }
.mm-link { display: flex; align-items: center; min-height: 56px; font-size: 18px; font-weight: 600; color: var(--ink); text-decoration: none; }

/* Quick-action tabs: fixed to the right edge on desktop. Labels run
   horizontally when there is room beside the 1240px column (the widest tab,
   "Emergency line", is about 185px, so from 1640px), and vertically (44px
   wide) below that so the tabs never cover page content. They layer above
   the sticky in-page menu (35), whose band would otherwise slide over them
   while it scrolls up to the top, and below the header and its menus (40). */
.quick-tabs { position: fixed; right: 0; top: 50%; z-index: 36; display: flex; flex-direction: column; align-items: stretch; gap: 6px; transform: translateY(-50%); }
.qt {
	display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 12px 16px 12px 14px;
	border-radius: 12px 0 0 12px; box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
	font-size: 13px; font-weight: 800; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
	color: var(--white); text-decoration: none;
	transition: background-color .15s;
}
.qt:hover { color: var(--white); }
.qt .ic { width: 18px; height: 18px; stroke-width: 1.8; }
.qt--ticket { background: var(--accent); }
.qt--ticket:hover { background: #0B6542; }
.qt--pricing { background: var(--accent-deep); }
.qt--pricing:hover { background: #05301F; }
.qt--call { --ic-accent: var(--live); background: var(--ink); }
.qt--call:hover { background: #000; }
@media (max-width: 1639px) {
	.quick-tabs { align-items: flex-end; }
	.qt { writing-mode: vertical-rl; width: 44px; padding: 14px 0; gap: 8px; }
}
/* While the tabs show, the side gutter stays wider than a tab (44px), so the
   column's right edge never runs under them. */
@media (min-width: 1021px) and (max-width: 1639px) and (min-height: 561px) {
	:root { --gut: max(52px, 4vw); }
}
@media (max-height: 560px) { .quick-tabs { display: none; } }

/* Mobile bar: phone width only */
.mobile-bar { display: none; }
.mobile-bar a {
	display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: var(--pill);
	font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--white); text-decoration: none;
}
.mobile-bar .ic { width: 20px; height: 20px; stroke-width: 1.8; }
.mobile-bar__call { --ic-accent: var(--live); background: var(--ink); }
.mobile-bar__ticket { background: var(--accent); }

/* Footer */
.site-footer {
	--focus: var(--live); --ic-accent: var(--live);
	padding: 64px var(--gut) 0; background: var(--charcoal); color: var(--on-dark-2); font-size: 15px;
}
.site-footer__in { max-width: var(--maxw); margin: 0 auto; }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer .brand { text-decoration: none; }
.site-footer .brand__logo { height: 40px; }
.site-footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.site-footer__top p { margin: 0; max-width: 56ch; }
.site-footer__cols { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 40px 36px; padding: 40px 0 48px; }
.site-footer h2 { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--white); }
.f-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.f-list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.f-list a { display: inline-flex; align-items: center; min-height: 36px; line-height: 1.35; }
.f-list + h2 { margin-top: 28px; }
.f-note { margin: 8px 0 0; font-size: 14px; }
.f-note .mono { color: var(--white); }
.f-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.site-footer .f-phone { font-size: 22px; font-weight: 800; color: var(--white); }
.f-hours { margin: 6px 0 -6px; color: var(--on-dark); }
.f-emerg { display: flex; align-items: center; gap: 8px; margin: 6px 0 14px; color: var(--on-dark); }
.site-footer .btn--accent, .site-footer .btn--accent:hover { color: var(--white); text-decoration: none; }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 20px 0 24px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; }
.site-footer__bottom p { margin: 0; }
.site-footer__bottom p a { text-decoration: underline; text-underline-offset: 3px; }
.f-top { display: inline-flex; align-items: center; min-height: 44px; }

/* Shell breakpoints */
@media (min-width: 1021px) {
	.mobile-menu { display: none !important; }
}
@media (max-width: 1180px) {
	.site-header__in { gap: 16px; }
	.nav-item { padding: 0 9px; font-size: 15px; }
	.site-header .brand__logo { height: 35px; }
}
/* Six top-level items: tighten further just above the mobile breakpoint. */
@media (min-width: 1021px) and (max-width: 1120px) {
	.nav__list { gap: 0; }
	.nav-item { padding: 0 6px; }
	.btn--head { padding: 0 16px; }
}
@media (max-width: 1020px) {
	.nav, .quick-tabs { display: none; }
	.menu-toggle { display: inline-flex; }
	.brand { margin-right: auto; }
	.site-header .brand__logo { height: 38px; }
	.site-header__in { gap: 12px; min-height: 64px; }
	.site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.f-col--services { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	html { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
	body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
	.btn--head, .utility .utility__opt, .utility__long { display: none; }
	.utility__in { column-gap: 8px; }
	.utility__links a { padding: 0 6px; }
	.site-header .brand__logo { height: 32px; }
	.mobile-bar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
		display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
		padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
		background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(18, 25, 22, .1);
	}
	/* While a ticket form is on screen (site.js sets the attribute) the bar keeps
	   only the emergency line: "Open a ticket" would point at the form in view. */
	.mobile-bar[data-ticket-in-view] { grid-template-columns: minmax(0, 1fr); }
	.mobile-bar[data-ticket-in-view] .mobile-bar__ticket { display: none; }
	/* A focused field stops clear of the bar. */
	.fld :is(input, select, textarea) { scroll-margin-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
	.site-footer { padding-top: 48px; }
	.site-footer__cols { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
/* "Emergency line" keeps clear of the pill's rounded ends on the narrowest phones. */
@media (max-width: 380px) {
	.mobile-bar a { gap: 6px; font-size: 13px; letter-spacing: .02em; }
}

/* ============================== 6. Fallback template ============================== */
.fallback { padding: 64px var(--gut) 88px; }
.fallback__in { max-width: 760px; margin: 0 auto; }
.fallback__item { padding: 24px 0; border-bottom: 1px solid var(--line); }
.fallback__item h2 { margin: 0 0 .4em; font-size: 1.5rem; }
.fallback__item h2 a { text-decoration: none; }

/* ============================== 7. Content: sub-nav and FAQ ============================== */

/* In-page menu (parts/subnav.php). Sticks to the top of the viewport; site.js
   sets aria-current="true" on the link for the section being read. The links
   scroll sideways when they do not fit, and the row fades out at the side
   where more links wait (site.js sets data-more), so the last visible link
   ends in a fade before the button instead of a hard cut. Article menus use
   short labels (single.php); any label still too long stops at 24em with an
   ellipsis. At phone width the button is dropped, because the mobile bar
   already carries the ticket action. */
.subnav {
	position: sticky; top: 0; z-index: 35;
	padding-inline: var(--gut);
	background: var(--grey); border-bottom: 1px solid var(--line);
}
.admin-bar .subnav { top: 32px; }
.subnav__in { display: flex; align-items: center; gap: 16px; }
.subnav__links {
	position: relative; display: flex; flex: 1 1 auto; gap: 4px; min-width: 0;
	overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.subnav__links::-webkit-scrollbar { display: none; }
.subnav__links[data-more="end"] { -webkit-mask-image: linear-gradient(to left, transparent, #000 56px); mask-image: linear-gradient(to left, transparent, #000 56px); }
.subnav__links[data-more="start"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 56px); mask-image: linear-gradient(to right, transparent, #000 56px); }
.subnav__links[data-more="start end"] {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
	mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}
.subnav__links a {
	display: block; flex: none; max-width: 24em; padding: 0 18px;
	border-bottom: 4px solid transparent;
	font-size: 15px; font-weight: 600; line-height: 52px; color: var(--ink-2); text-decoration: none;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	transition: color .15s, border-color .15s;
}
.subnav__links a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.subnav a[aria-current="true"] { border-bottom-color: var(--accent); color: var(--ink); }
/* The scroll box would clip an outside ring, so the ring sits inside the link. */
.subnav__links a:focus-visible { outline-offset: -4px; }
/* The button has its own cell beside the scrolling row, behind a rule, so the
   row ends where the rule is and links never run under the pill. */
.subnav__cta { flex: none; align-self: stretch; display: flex; align-items: center; padding-left: 20px; border-left: 1px solid var(--line-strong); }

/* Anchor jumps stop below the sticky menu. */
html:has(.subnav) { scroll-padding-top: 72px; }
@media (prefers-reduced-motion: no-preference) {
	html:has(.subnav) { scroll-behavior: smooth; }
}
@media (max-width: 782px) { .admin-bar .subnav { top: 46px; } }
@media (max-width: 600px) { .admin-bar .subnav { top: 0; } }
@media (max-width: 640px) {
	.subnav__cta { display: none; }
	/* Links run to the screen edges, so a clipped link shows there is more to scroll to. */
	.subnav__links { margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
}

/* FAQ (parts/faq.php). Heading beside the list on wide screens. */
.faq { padding-block: clamp(56px, 7vw, 88px); }
.faq__inner { display: grid; gap: 28px 64px; }
.faq h2 { margin: 0; }
.faq__list { border-bottom: 1px solid var(--line); }
.faq__item { border-top: 1px solid var(--line); }
.faq__item summary {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	min-height: 56px; padding: 14px 0;
	font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--ink);
	cursor: pointer; list-style: none;
	transition: color .15s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent); }
.faq__item summary:focus-visible { border-radius: var(--r-sm); }
/* Plus drawn from two bars; the upright bar collapses when the item is open. */
.faq__item summary::after {
	content: ""; flex: none; width: 20px; height: 20px; color: var(--accent);
	background:
		linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
}
.faq__item[open] summary::after { background-size: 100% 2px, 0 0; }
.faq__a { max-width: 68ch; padding: 0 40px 24px 0; color: var(--ink-2); }
.faq__a > :last-child { margin-bottom: 0; }
.faq__a ul, .faq__a ol { margin: 0 0 1em; padding-left: 1.25em; }
.faq__a a { color: var(--accent); }
.faq__a a:hover { color: var(--accent-deep); }
@media (min-width: 900px) {
	.faq__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}
@media (max-width: 640px) {
	.faq__a { padding-right: 0; }
}

/* ============================== 8. Hero ============================== */

/* Page hero (parts/hero.php). The rounded shapes are ::before and ::after on
   the section, painted under the content (isolation keeps them inside it).
   home: charcoal, two green quarter-circles, ticket panel on the right.
   charcoal: inner pages. green: service pages, deep-to-accent gradient.
   article: guides, dot grid and an accent bar, breadcrumb above the title. */
.hero {
	--focus: var(--live); --ic-accent: var(--live);
	position: relative; overflow: hidden; isolation: isolate;
	padding: clamp(48px, 6vw, 72px) var(--gut) clamp(56px, 7vw, 80px);
	background: var(--charcoal-2); color: var(--white);
}
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.hero__in { display: grid; gap: 40px 56px; align-items: center; }
.hero__in--split { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; }
.hero__eyebrow { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.hero__title { margin: 0; max-width: 20ch; }
.hero__lede { margin: 0; max-width: 56ch; font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.6; color: rgba(255, 255, 255, .86); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 6px; }
.hero__aside { min-width: 0; }
/* Featured image in the right column (itsh_hero_image_html). 4:3 frame so every
   page's hero is the same height whatever the source ratio; the ring and
   shadow lift it off the dark background. */
.hero__media { margin: 0; position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); }
.hero__media .hero__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .18) 100%); }

.hero--home::before { background: var(--accent-deep); opacity: .9; }
.hero--home::after { background: var(--accent); opacity: .55; }
/* Desktop: each quarter-circle curves round beside the ticket panel, clear of
   it, as in the mockup. --panel-x is the distance from the hero's right edge to
   the panel's left edge: the wrap's right margin plus the panel column (.85 of
   the 2fr split, after the 56px column gap). The deep shape hangs from the top
   and its curve ends at the panel's edge above the text; the lighter shape
   rises from the bottom and its curve starts at the panel's edge below the
   buttons. The clamps keep each curve between the text and the hero's edge
   from 1021px up; past 1440px the column stops growing and so do they. */
@media (min-width: 1021px) {
	.hero--home {
		--wrap-r: max(var(--gut), (100% - var(--maxw)) / 2);
		--panel-x: calc(var(--wrap-r) + (100% - 2 * var(--wrap-r) - 56px) * .425);
	}
	.hero--home::before {
		--r: clamp(170px, 17.3vw, 250px);
		left: calc(100% - var(--panel-x) - var(--r)); right: -160px;
		top: -400px; height: calc(400px + clamp(88px, 17.8vw - 94px, 162px));
		border-radius: 0 0 0 var(--r);
	}
	.hero--home::after {
		--r: clamp(160px, 15.6vw, 225px);
		left: calc(100% - var(--panel-x) - var(--r)); right: -80px;
		top: calc(100% - clamp(96px, 17.3vw - 79px, 170px)); height: calc(var(--r) + 200px);
		border-radius: var(--r) 0 0 0;
	}
}

.hero--charcoal::before {
	right: -140px; top: -180px; width: 560px; height: 560px;
	border-radius: 0 0 0 280px; background: var(--accent-deep); opacity: .85;
}
.hero--charcoal::after {
	right: 12%; bottom: -150px; width: 260px; height: 260px;
	border-radius: 130px 0 0 0; border: 2px solid rgba(255, 255, 255, .12);
}

.hero--green { background: linear-gradient(105deg, var(--accent-deep) 0%, var(--accent) 78%); padding-top: clamp(48px, 5.5vw, 64px); padding-bottom: clamp(56px, 6vw, 72px); }
.hero--green::before {
	right: -120px; top: 40px; width: 560px; height: 560px;
	border-radius: 280px 0 0 0; background: rgba(255, 255, 255, .08);
}
.hero--green::after {
	right: 180px; top: -200px; width: 360px; height: 360px;
	border-radius: 0 0 180px 0; background: rgba(0, 0, 0, .14);
}
.hero--green .hero__title { max-width: 17ch; font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.125rem); }
/* Copy may run over the lighter end of the gradient, so text stays full white here. */
.hero--green .hero__eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .1em; color: var(--white); }
.hero--green .hero__lede { color: var(--white); }

.hero--article { background: var(--charcoal-3); padding-top: clamp(32px, 4vw, 44px); padding-bottom: clamp(44px, 5vw, 56px); }
.hero--article::before {
	right: 0; top: 0; width: 46%; height: 100%;
	background-image: radial-gradient(circle, rgba(255, 255, 255, .22) 1.6px, transparent 2.2px);
	background-size: 26px 26px;
}
.hero--article::after { right: 6%; bottom: 46px; width: 220px; height: 10px; background: var(--accent); }
.hero--article .hero__text { gap: 16px; }
.hero--article .hero__title { max-width: 24ch; font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); }

/* Breadcrumb: one treatment in every hero (pages, the blog, archives and
   articles), sentence case in the text face. The separator is decoration, so
   it carries empty alt text. */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .78); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "\203A"; content: "\203A" / ""; margin: 0 9px; color: rgba(255, 255, 255, .55); }
.crumbs a { display: inline-flex; align-items: center; min-height: 24px; color: rgba(255, 255, 255, .86); text-underline-offset: 3px; }
.crumbs a:hover { color: var(--white); }
/* A long current-page crumb (an article title) stays on one line; the h1 below carries it in full.
   The nav takes the column's width, so the no-wrap crumb cannot size it past the column. */
.crumbs { width: 100%; min-width: 0; }
.crumbs li:last-child { min-width: 0; max-width: 100%; }
.crumbs [aria-current="page"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Green heroes: the trail may run over the lighter end of the gradient, so it is full white there. */
.hero--green .crumbs ol, .hero--green .crumbs a, .hero--green .crumbs a:hover { color: var(--white); }
.hero--green .crumbs li + li::before { color: rgba(255, 255, 255, .8); }

@media (max-width: 1020px) {
	.hero__in--split { grid-template-columns: minmax(0, 1fr); }
	.hero__media { max-width: 640px; aspect-ratio: 16 / 10; }
	.hero--home::before { right: -260px; top: -200px; width: 600px; height: 600px; border-radius: 0 0 0 300px; }
	.hero--home::after { right: -160px; top: auto; bottom: -120px; width: 420px; height: 420px; border-radius: 210px 0 0 0; }
}
@media (max-width: 640px) {
	.hero--home::before { right: -220px; top: -180px; width: 420px; height: 420px; border-radius: 0 0 0 210px; }
	.hero--home::after { right: -200px; bottom: -140px; width: 360px; height: 360px; border-radius: 180px 0 0 0; }
	.hero--charcoal::before { right: -220px; top: -220px; width: 400px; height: 400px; border-radius: 0 0 0 200px; }
	.hero--green::before { right: -260px; top: auto; bottom: -260px; width: 420px; height: 420px; border-radius: 210px 0 0 0; }
	.hero--green::after { right: -60px; top: -220px; width: 280px; height: 280px; border-radius: 0 0 140px 0; }
	.hero--article::before { width: 34%; }
	.hero--article::after { bottom: 24px; width: 120px; height: 8px; }
	.hero__actions { width: 100%; }
	.hero__actions .btn { flex: 1 1 220px; }
}

/* ============================== 9. Components ============================== */

/* ---------- Ticket form (parts/ticket-form.php) ----------
   hero: white panel in the home hero. page: two columns in a ticket band,
   urgency and the call-now block on the left, fields on the right.
   site.js mirrors the checked urgency onto form[data-urgency]. */
.ticket { --focus: var(--accent); --ic-accent: var(--accent); color: var(--ink); }
.ticket--hero {
	display: flex; flex-direction: column; gap: 14px; padding: 26px;
	background: var(--white); border-radius: var(--r-lg);
	box-shadow: 0 30px 60px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .2);
}
.ticket--page {
	display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 28px 56px; align-items: start;
	padding: clamp(20px, 4vw, 40px);
	background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.ticket--page .ticket__status { grid-column: 1 / -1; }
.ticket__status:empty { display: none; }
.ticket__side, .ticket__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ticket__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.ticket__head h2 { margin: 0; font-size: 21px; letter-spacing: -.01em; }
.ticket__live {
	display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px;
	border-radius: var(--pill); background: var(--mint); color: var(--accent-deep);
	font-size: 12px; white-space: nowrap;
}
.ticket__live .itsh-dot { width: 7px; height: 7px; background: var(--accent); animation: live-pulse 2.4s var(--ease-out) infinite; }
@keyframes live-pulse {
	0% { box-shadow: 0 0 0 0 rgba(14, 122, 80, .45); }
	70%, 100% { box-shadow: 0 0 0 7px rgba(14, 122, 80, 0); }
}

/* Result after sending (from ?ticket=), announced politely. */
.ticket__status { padding: 12px 14px; border: 1px solid; border-radius: var(--r-sm); font-size: 15px; line-height: 1.5; }
.ticket__status p { margin: 0; }
.ticket__status[data-state="ok"] { border-color: var(--accent); background: var(--mint); }
.ticket__status[data-state="error"] { border-color: var(--red); background: var(--red-pale); }
.ticket__status a { color: var(--ink); font-weight: 600; }

/* Urgency choice: each option is a tile; the radio stays in the tile for
   keyboard and screen readers, and the tile shows its state. */
.urg { min-width: 0; margin: 0; padding: 0; border: 0; }
.urg__legend { margin-bottom: 8px; padding: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.urg__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.urg__opt { position: relative; display: flex; cursor: pointer; }
.urg__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.urg__opt input + span {
	flex: 1; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 12px;
	border: 1.5px solid var(--field); border-radius: var(--r); background: var(--white);
	font-size: 14px; font-weight: 600; line-height: 1.25;
	transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.urg__opt:hover input + span { border-color: var(--ink); }
.urg__opt input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.urg__opt input[value="down"]:checked + span { background: var(--red-pale); }
.urg__opt input[value="broken"]:checked + span { background: var(--amber-pale); }
.urg__opt input[value="question"]:checked + span { background: var(--mint); }
.urg__opt input:focus-visible + span { outline: 3px solid var(--focus, var(--accent)); outline-offset: 2px; }
/* Forced colours drop backgrounds and shadows, and the radio itself is hidden,
   so the chosen tile needs a system-colour outline to stay visible. Focus
   then draws a dashed ring further out, so a focused tile never looks chosen
   and a chosen, focused tile shows both. */
@media (forced-colors: active) {
	.urg__opt input:checked + span { outline: 3px solid Highlight; outline-offset: 2px; }
	.urg__opt input + span { position: relative; }
	.urg__opt input:focus-visible + span { outline: none; }
	.urg__opt input:checked:focus-visible + span { outline: 3px solid Highlight; }
	.urg__opt input:focus-visible + span::after {
		content: ""; position: absolute; inset: -9px; pointer-events: none;
		border: 2px dashed CanvasText; border-radius: 18px;
	}
}
.urg__hint { display: block; font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--muted); }
.itsh-dot--down { background: var(--red); }
.itsh-dot--broken { background: var(--amber); }
.itsh-dot--question { background: var(--accent); }
.urg .itsh-dot { width: 10px; height: 10px; }
.ticket--page .urg__opts { grid-template-columns: minmax(0, 1fr); }
.ticket--page .urg__opt input + span { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 2px 12px; padding: 14px 16px; font-size: 16px; }
.ticket--page .urg .itsh-dot { margin-top: .4em; align-self: start; }
.ticket--page .urg__hint { grid-column: 2; }

/* Fields */
.ticket__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
.fld { min-width: 0; }
.fld--wide { grid-column: 1 / -1; }
.fld label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--ink-2); }
.fld__opt { font-weight: 400; color: var(--muted); }
.fld input, .fld select, .fld textarea {
	display: block; width: 100%; min-height: 44px; padding: 9px 12px;
	border: 1.5px solid var(--field); border-radius: var(--r-sm); background: var(--white);
	font: inherit; font-size: 16px; line-height: 1.4; color: var(--ink);
	transition: border-color .15s;
}
.fld textarea { min-height: 88px; resize: vertical; }
.fld select {
	appearance: none; padding-right: 40px; cursor: pointer;
	background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23121916' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
}
.fld input:hover, .fld select:hover, .fld textarea:hover { border-color: var(--ink-2); }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--accent); }
.fld input:user-invalid, .fld textarea:user-invalid { border-color: var(--red); }
/* A field the server refused (from ?tk=): red border and its message right under it. */
.fld input[aria-invalid="true"], .fld textarea[aria-invalid="true"] { border-color: var(--red); }
.fld__err { margin: 6px 0 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--red); }
.urg .fld__err { margin-top: 10px; }
/* Fields sit on their bottom edge so wrapped labels line up; a message under one field would push its row-mate down, so the grid sits on the top edge while one shows. */
.ticket__fields:has(.fld__err) { align-items: start; }
.ticket__submit { width: 100%; font-size: 15px; }

/* Call-now block. "Down now" makes it the loudest thing in the form; the
   submit button stays available so the visitor can still send. */
.callnow { padding: 10px 12px; border: 2px solid transparent; border-radius: var(--r-sm); background: var(--red-pale); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.callnow p { margin: 0; }
.callnow a { font-family: var(--mono); font-weight: 700; color: var(--ink); white-space: nowrap; }
.callnow a:hover { color: var(--red); }
form.ticket[data-urgency="down"] .callnow { font-size: 1.15rem; background: #FBEDEB; border: 2px solid var(--red); padding: 16px; color: var(--ink); }

/* ---------- Buyer-path tiles [itsh_paths] ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tile {
	position: relative; overflow: hidden; isolation: isolate;
	display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
	min-height: 260px; padding: 32px;
	border-radius: var(--r-lg); box-shadow: var(--shadow-tile); text-decoration: none;
	transition: background-color .15s;
}
.tile::before { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.tile__kicker { font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; }
.tile__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: clamp(1.625rem, 1.4rem + .8vw, 1.875rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.tile__title .ic { width: 28px; height: 28px; stroke-width: 2; }
.tile:hover .tile__title > span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.tile__text { font-size: 16px; line-height: 1.5; }
.tile--accent { --ic-accent: var(--white); background: var(--accent); color: var(--white); }
.tile--accent:hover { background: #0B6542; color: var(--white); }
/* The shape stays faint (white text on it is 4.6:1), since at phone width it sits behind the copy. */
.tile--accent::before { right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 0 0 0 120px; background: rgba(255, 255, 255, .08); }
.tile--dark { --ic-accent: var(--live); background: var(--charcoal-3); color: var(--white); }
.tile--dark:hover { background: var(--charcoal); color: var(--white); }
.tile--dark::before { right: -40px; top: -80px; width: 220px; height: 260px; border-radius: 110px 0 0 110px; background: var(--accent-deep); opacity: .8; }
.tile--dark .tile__kicker, .tile--dark .tile__text { color: rgba(255, 255, 255, .88); }
.tile--mint { background: var(--mint); color: var(--ink); }
.tile--mint:hover { background: #DDEDE4; color: var(--ink); }
.tile--mint::before { right: -50px; top: -50px; width: 200px; height: 200px; border-radius: 50%; border: 28px solid rgba(14, 122, 80, .14); }
.tile--mint .tile__kicker { color: var(--ink-2); }
.tile--mint .mono { font-weight: 700; }

/* ---------- Services grid [itsh_services_grid] ----------
   The title link stretches over the whole item, so the item is one target. */
.svc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 32px; margin: 0; padding: 0; list-style: none; }
.svc__item { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.svc__item .ic { width: 44px; height: 44px; color: var(--ink); }
.svc__item h3 { margin: 0; font-size: 19px; }
.svc__item h3 a { color: var(--ink); text-decoration: none; }
.svc__item h3 a::after { content: ""; position: absolute; inset: -12px; border-radius: var(--r); }
.svc__item:hover h3 a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.svc__item h3 a:focus-visible { outline: none; }
.svc__item h3 a:focus-visible::after { outline: 3px solid var(--focus, var(--accent)); outline-offset: 2px; }
.svc__item p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }

/* Industries hub cards (.ind, [itsh_industries]). White cards on the grey band,
   two per row; the facts list carries the software and rule keywords. */
.ind { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.ind__item { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 26px 26px 22px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); }
.ind__head { display: flex; align-items: flex-start; gap: 16px; }
.ind__head .ic { flex: 0 0 40px; width: 40px; height: 40px; color: var(--ink); }
.ind__head h3 { margin: 0; font-size: 21px; line-height: 1.25; }
.ind__head h3 a { color: var(--ink); text-decoration: none; }
.ind__head h3 a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.ind__kicker { margin: 4px 0 0; font-size: 13px; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ind__pain { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.ind__facts { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
.ind__facts > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; font-size: 14px; line-height: 1.45; }
.ind__facts dt { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.ind__facts dd { margin: 0; color: var(--ink-2); }
.ind__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; font-weight: 600; color: var(--accent); text-decoration: none; }
.ind__more:hover { text-decoration: underline; text-underline-offset: 4px; }
.ind__more .ic { width: 18px; height: 18px; }
.ind__more--soon { color: var(--muted); font-weight: 500; }
@media (max-width: 760px) {
	.ind { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.ind__item { padding: 22px 20px 18px; }
}

/* Product cards (ul.prod) for model lists on hardware pages. Four across
   (three with .prod--3); grey cards on white bands, white cards elsewhere.
   A .prod__item--cta card closes a grid with a quote prompt. */
.prod { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.prod--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prod__item { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 22px 22px 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); }
.band--white .prod__item { background: var(--grey); border-color: transparent; }
.prod__item h3 { margin: 0; font-size: 19px; line-height: 1.25; letter-spacing: -.01em; }
.prod__item p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.prod__item .prod__for { font-family: var(--mono); font-size: 12px; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.prod__item .prod__spec { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-strong); font-size: 13px; line-height: 1.45; color: var(--muted); }
.prod .prod__item--cta { justify-content: center; background: var(--accent-deep); border-color: transparent; color: var(--white); }
.prod__item--cta h3 { color: var(--white); }
.prod__item--cta p { color: var(--on-dark); }
.prod__item--cta .btn { align-self: flex-start; margin-top: 6px; }
@media (max-width: 1020px) {
	.prod, .prod--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 640px) {
	.prod, .prod--3 { grid-template-columns: minmax(0, 1fr); }
	.prod__item { padding: 20px 20px 18px; }
}

/* ---------- Plans [itsh_plans] ----------
   The managed plan in full on the left; the three quoted ways stacked beside it. */
.plans { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 24px; }
.plan { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px 28px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); }
.plan h3 { margin: 0; font-size: 1.3125rem; }
.plan__for { margin: 0; color: var(--ink-2); }
.plan__price { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.3; }
.plan__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: auto; font-weight: 600; color: var(--accent); text-decoration: none; }
.plan__link:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 4px; }
.plan__link .ic { width: 18px; height: 18px; stroke-width: 1.8; }
.plan--featured {
	--focus: var(--live); --ic-accent: var(--live);
	position: relative; overflow: hidden; isolation: isolate; grid-row: span 3; gap: 14px; padding: clamp(28px, 3.5vw, 40px);
	border: 0; background: var(--charcoal-2); color: var(--white);
}
.plan--featured::before { content: ""; position: absolute; z-index: -1; right: -90px; top: -90px; width: 240px; height: 240px; border-radius: 0 0 0 120px; background: var(--accent-deep); pointer-events: none; }
.plan--featured h3 { font-size: 1.5rem; }
.plan--featured .plan__for { color: var(--on-dark-2); }
.plan--featured .plan__price { display: flex; flex-direction: column; gap: 4px; padding: 8px 0 6px; }
.plan__amount { font-family: var(--mono); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.plan__unit { font-size: 15px; font-weight: 400; color: var(--on-dark-2); }
.plan__list { display: grid; gap: 10px; margin: 0; padding: 18px 0 0; border-top: 1px solid rgba(255, 255, 255, .14); list-style: none; }
.plan__list li { position: relative; padding-left: 28px; line-height: 1.45; color: var(--on-dark); }
.plan__list li::before { content: ""; position: absolute; left: 2px; top: .3em; width: 6px; height: 11px; border: solid var(--live); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.plan__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: auto; padding-top: 12px; }
.plan__note { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--on-dark-2); }

/* ---------- Comparison table [itsh_compare] ----------
   Scrolls sideways at tablet width with the row labels held in place. At
   phone width each row becomes a block and every cell shows its column name
   (from data-col), so nothing has to scroll. */
/* Square at rest: a rounded scroll box clips its content at the corners, which
   cut the ends off the last row's rule. The radius only shapes the focus ring. */
.table-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.table-scroll:focus-visible { border-radius: var(--r-sm); }
.cmp { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.cmp th, .cmp td { padding: 18px 20px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cmp thead th, .cmp thead td { border-bottom: 3px solid var(--ink); }
.cmp thead th { font-size: 19px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.cmp tbody th { width: 16%; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cmp td.mono { font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; }
@media (max-width: 760px) {
	.cmp { min-width: 680px; }
	.cmp tbody th, .cmp thead td { position: sticky; left: 0; z-index: 1; width: 120px; background: var(--table-bg, var(--white)); box-shadow: 1px 0 0 var(--line); }
	.cmp th, .cmp td { padding: 16px 14px; }
}
@media (max-width: 640px) {
	.cmp { min-width: 0; }
	.cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.cmp tbody, .cmp tr, .cmp tbody th, .cmp td { display: block; }
	.cmp tbody tr { padding: 18px 0 14px; border-bottom: 1px solid var(--line); }
	.cmp tbody tr:first-child { border-top: 3px solid var(--ink); }
	.cmp tbody th { position: static; width: auto; padding: 0 0 8px; border: 0; background: none; box-shadow: none; }
	.cmp td { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4px 16px; padding: 6px 0; border: 0; }
	.cmp td::before { content: attr(data-col); font-family: var(--font); font-size: 15px; font-weight: 600; color: var(--ink); }
	.cmp td.mono { white-space: normal; }
}

/* ---------- Testimonials [itsh_testimonials] ---------- */
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
.quote { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; margin: 0; padding-top: 28px; border-top: 3px solid var(--ink); }
.quote blockquote { margin: 0; }
.quote blockquote::before { content: "\201C"; content: "\201C" / ""; display: block; height: .5em; margin-bottom: 12px; font-size: 64px; font-weight: 800; line-height: 1; color: var(--accent); }
.quote blockquote p { margin: 0; max-width: 60ch; font-size: 18px; line-height: 1.65; color: var(--ink); }
.quote figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.45; }
.quote__who { font-weight: 600; }
.quote__topic { font-size: 14px; color: var(--muted); }

/* ---------- Network diagram [itsh_diagram] ---------- */
.diagram { display: flex; flex-direction: column; gap: 14px; padding: clamp(18px, 3vw, 28px); border-radius: var(--r-lg); background: var(--grey); }
.diagram__row { display: flex; justify-content: center; }
.diagram__row .box { width: min(260px, 100%); }
.diagram__link { width: 2px; height: 18px; margin: 0 auto; background: var(--field); }
.diagram__zone { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px 18px 18px; border: 2px dashed var(--accent); border-radius: 14px; }
.diagram__tag { position: absolute; top: -11px; left: 16px; padding: 0 8px; background: var(--grey); font-family: var(--mono); font-size: 12px; font-weight: 700; line-height: 20px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.diagram__fan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 14px; border-top: 2px solid var(--field); }
.diagram__remote { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.box { display: flex; align-items: center; justify-content: center; padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--white); font-size: 14px; font-weight: 600; line-height: 1.3; text-align: center; }
.box--accent { border-color: var(--accent); background: var(--accent); color: var(--white); }
.box--dashed { border-style: dashed; border-color: var(--field); }

/* ---------- Project list [itsh_jobs] ---------- */
.jobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; margin: 0; padding: 0; list-style: none; }
.jobs__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(18, 25, 22, .14); font-size: 17px; line-height: 1.45; }
.jobs__note { flex: 0 1 auto; max-width: 45%; font-family: var(--mono); font-size: 14px; color: var(--ink-2); text-align: right; }

/* ---------- Resources by topic [itsh_resources] ---------- */
.res { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 56px; align-items: start; }
.res__group { scroll-margin-top: 88px; }
.res__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding-bottom: 12px; border-bottom: 3px solid var(--ink); }
.res__head h3 { margin: 0; font-size: 1.5rem; }
.res__count { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.res__svc { flex-basis: 100%; margin: 0; font-size: 15px; color: var(--muted); }
.res__svc a { color: var(--accent); }
.res__svc a:hover { color: var(--accent-deep); }
.res__list { margin: 0; padding: 0; list-style: none; }
.res__list a { display: flex; align-items: center; min-height: 52px; padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 600; line-height: 1.35; color: var(--ink); text-decoration: none; }
.res__list a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Closing band [itsh_cta] ---------- */
.cta-band {
	--focus: var(--live); --ic-accent: var(--live);
	position: relative; overflow: hidden; isolation: isolate;
	padding: clamp(56px, 7vw, 80px) var(--gut);
	background: var(--accent-deep); color: var(--white);
}
.cta-band::before { content: ""; position: absolute; z-index: -1; right: -120px; bottom: -220px; width: 520px; height: 520px; border-radius: 260px 0 0 0; background: var(--accent); opacity: .55; pointer-events: none; }
.cta-band__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 56px; }
.cta-band__text { max-width: 640px; }
.cta-band h2 { margin: 0 0 12px; color: var(--white); }
.cta-band p { margin: 0; font-size: 18px; color: rgba(255, 255, 255, .88); }
.cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.cta-band__phone { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font-family: var(--mono); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 700; color: var(--white); text-decoration: none; white-space: nowrap; }
.cta-band__phone:hover { color: var(--white); text-decoration: underline; text-underline-offset: 6px; }
.cta-band__phone .ic { width: 28px; height: 28px; stroke-width: 1.6; }

/* Components: breakpoints */
@media (max-width: 1020px) {
	.tiles { grid-template-columns: minmax(0, 1fr); }
	.tile { min-height: 200px; }
	.svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jobs { grid-template-columns: minmax(0, 1fr); }
	.ticket--page { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
	.plans, .quotes, .res { grid-template-columns: minmax(0, 1fr); }
	.plan--featured { grid-row: auto; }
}
@media (max-width: 560px) {
	.svc { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.svc__item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; align-items: start; }
	.svc__item .ic { grid-row: span 2; }
	.ticket--hero { padding: 20px; }
	.tile { padding: 26px; }
	.plan { padding: 22px; }
	.diagram__fan .box, .diagram__remote .box { padding: 10px 8px; font-size: 13px; }
}
@media (max-width: 360px) {
	.ticket__fields { grid-template-columns: minmax(0, 1fr); }
}

/* ============================== 10. Templates ============================== */

/* ---------- Content bands (page copy, inside .prose-sections) ----------
   Page HTML is authored as <section class="band band--white|grey|mint"><div class="wrap">,
   so the copy sets the rhythm. Inside a band the text runs at a reading measure
   and components (grids, tables, the diagram, the form) take the full width.
   A band of prose only comes back from itsh_split_bands() (inc/content.php) as
   .band--split with its children in two .band__col columns, and the two halves
   of a .pair are columns too: the rhythm and text rules below apply inside
   each of them as they do inside the wrap. */
.prose-sections { display: block; }
.band { padding: clamp(56px, 7vw, 88px) var(--gut); background: var(--white); }
.band--grey { --table-bg: var(--grey); background: var(--grey); }
.band--mint { --table-bg: var(--mint); background: var(--mint); }
:is(.band .wrap, .band__col, .pair > div) > * { margin-block: 0; }
:is(.band .wrap, .band__col, .pair > div) > * + * { margin-top: 18px; }
:is(.band .wrap, .band__col, .pair > div) > h2 { max-width: 28ch; }
:is(.band .wrap, .band__col, .pair > div) > h2 + * { margin-top: 20px; }
:is(.band .wrap, .band__col, .pair > div) > * + h3 { margin-top: 48px; }
:is(.band .wrap, .band__col, .pair > div) > h3 + * { margin-top: 10px; }
/* Text rules reach only the copy's own paragraphs and plain lists; component
   lists (.svc, .jobs) carry a class and keep their own layout. */
:is(.band .wrap, .band__col, .pair > div) > :is(p, ul:not([class]), ol:not([class])) { max-width: 68ch; font-size: 18px; line-height: 1.65; color: var(--ink-2); }
:is(.band .wrap, .band__col, .pair > div) > :is(ul, ol):not([class]) { padding-left: 1.3em; }
:is(.band .wrap, .band__col, .pair > div) > :is(ul, ol):not([class]) li + li { margin-top: 8px; }
:is(.band .wrap, .band__col, .pair > div) > :is(ul, ol):not([class]) li::marker { color: var(--accent); }
:is(.band .wrap, .band__col, .pair > div) > :is(p, ul:not([class]), ol:not([class])) strong { font-weight: 600; color: var(--ink); }
:is(.band .wrap, .band__col, .pair > div) > :is(p, ul:not([class]), ol:not([class])) a:not([class]) { color: var(--accent); text-underline-offset: .18em; }
:is(.band .wrap, .band__col, .pair > div) > :is(p, ul:not([class]), ol:not([class])) a:not([class]):hover { color: var(--accent-deep); }
/* Tables in the copy keep a readable width; the comparison table spans the band. */
:is(.band .wrap, .band__col) > :is(table, .table-scroll:not(:has(.cmp))) { max-width: 980px; }
/* Components sit apart from the text around them. */
:is(.band .wrap, .band__col) > :is(.tiles, .svc, .ind, .prod, .table-scroll, table, .plans, .quotes, .diagram, .jobs, .res, .ticket, .pair) { margin-top: 36px; }
:is(.band .wrap, .band__col) > :is(.tiles, .svc, .ind, .prod, .table-scroll, table, .plans, .quotes, .diagram, .jobs, .res, .ticket, .pair) + * { margin-top: 40px; }
:is(.band .wrap, .band__col) > :is(.tiles, .svc, .ind, .prod, .table-scroll, table, .plans, .quotes, .diagram, .jobs, .res, .ticket, .pair) + h3 { margin-top: 64px; }
/* A band holding the network diagram puts it beside the text on wide screens. */
@media (min-width: 1021px) {
	.band .wrap:has(> .diagram) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 56px; align-content: start; }
	.band .wrap:has(> .diagram) > * { grid-column: 1; }
	.band .wrap:has(> .diagram) > .diagram { grid-column: 2; grid-row: 1 / span 12; align-self: center; margin-top: 0; }
}
/* Prose bands: the heading and its answer on the left (5 of 12), the rest of
   the band on the right (7 of 12) from 1021px; one column below that. */
@media (min-width: 1021px) {
	.band--split .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: start; }
	.band--split .wrap > .band__col { margin-top: 0; }
	.band--split .band__col--lead > h2 { max-width: none; }
	/* Closing paragraphs moved to a tail column sit under the lead while the body
	   runs down the right (itsh_band_balance()); below 1021px they follow the body. */
	.band--split .wrap:has(> .band__col--tail) { grid-template-rows: auto 1fr; }
	.band--split .wrap > .band__col--lead { grid-column: 1; grid-row: 1; }
	.band--split .wrap:has(> .band__col--tail) > .band__col--body { grid-column: 2; grid-row: 1 / span 2; }
	.band--split .wrap > .band__col--tail { grid-column: 1; grid-row: 2; margin-top: 18px; }
	/* When the body still runs longer (a long list or table), the lead stays in
	   view beside it, under the sticky in-page menu, instead of leaving a hole. */
	.band--split .wrap > .band__col--lead { position: sticky; top: 96px; }
	.admin-bar .band--split .wrap > .band__col--lead { top: 128px; }
}
/* A hyphenated word in a lead heading stays on one line (inc/content.php wraps it). */
.nobr { white-space: nowrap; }
@media (max-width: 1020px) {
	.band__col--lead + .band__col--body:has(> h3:first-child) { margin-top: 48px; }
}
/* Plain lists in a split band read as a panel: white, a light rule round it
   and between items, the accent dot in place of the marker. */
.band--split .band__col > ul:not([class]) { padding: 6px 24px; list-style: none; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); }
.band--split .band__col > ul:not([class]) > li { position: relative; padding: 14px 0 14px 22px; }
.band--split .band__col > ul:not([class]) > li + li { margin-top: 0; border-top: 1px solid var(--line); }
.band--split .band__col > ul:not([class]) > li::before { content: ""; position: absolute; left: 1px; top: calc(14px + .825em - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
/* Two short pieces of copy side by side, each under a rule (home: small offices and mid-size teams). */
.pair { display: grid; gap: 36px 56px; }
.pair > div { min-width: 0; padding-top: 24px; border-top: 3px solid var(--ink); }
@media (min-width: 901px) {
	.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tables written in the copy and in articles (the comparison table has its own rules). */
:is(.band, .art__body) table:not(.cmp) { width: 100%; table-layout: auto; border-collapse: collapse; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
:is(.band, .art__body) table:not(.cmp) :is(th, td) { padding: 14px 16px; border: 0; border-bottom: 1px solid var(--line-strong); text-align: left; vertical-align: top; overflow-wrap: normal; word-break: normal; }
:is(.band, .art__body) table:not(.cmp) thead th,
.art__body table:not(:has(thead)) tr:first-child th { border-bottom: 3px solid var(--ink); font-size: 13px; font-weight: 600; line-height: 1.35; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
:is(.band, .art__body) table:not(.cmp) tbody td:first-child { font-weight: 600; color: var(--ink); }
:is(.band, .art__body) table:not(.cmp) td a { color: var(--accent); }

/* ---------- Ticket band (parts/ticket-band.php) ---------- */
.ticket-band { padding-block: clamp(56px, 7vw, 88px); background: var(--grey); }
.ticket-band__in { display: grid; gap: 28px; }
.ticket-band__head { max-width: 720px; }
.ticket-band__head h2 { margin: 0 0 12px; }
.ticket-band__head p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.ticket-band__head a { font-weight: 700; color: var(--ink); white-space: nowrap; }
.ticket-band__head a:hover { color: var(--accent); }

/* ---------- Article (single.php) ---------- */
.article { padding-block: clamp(40px, 5vw, 56px) clamp(56px, 7vw, 80px); }
.article__cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
.art { min-width: 0; }
.art__byline { margin: 0 0 28px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.art__body { font-size: 18px; line-height: 1.7; color: #25302C; }
.art__body > * { max-width: 68ch; margin: 0 0 22px; }
.art__body > :is(figure, table, hr, .table-scroll) { max-width: none; }
.art__body p:empty { display: none; }
.art__body h2 { margin: 52px 0 22px; font-size: clamp(1.625rem, 1.3rem + 1vw, 1.875rem); line-height: 1.2; letter-spacing: -.015em; color: var(--ink); }
.art__body h2::after { content: ""; display: block; width: 64px; height: 4px; margin-top: 16px; border-radius: 2px; background: var(--accent); }
.art__body > h2:first-child { margin-top: 0; }
.art__body h3 { margin: 34px 0 10px; font-size: 1.3125rem; line-height: 1.3; color: var(--ink); }
.art__body :is(h2, h3) strong { font-weight: inherit; }
.art__body strong { font-weight: 600; color: var(--ink); }
.art__body :is(ul, ol) { padding-left: 1.3em; }
.art__body li + li { margin-top: 8px; }
.art__body li > :is(ul, ol) { margin-top: 8px; }
.art__body li::marker { color: var(--accent); }
.art__body a { color: var(--accent); text-underline-offset: .18em; }
.art__body a:hover { color: var(--accent-deep); }
.art__body hr { height: 0; margin: 44px 0; border: 0; border-top: 1px solid var(--line); }
.art__body figure { margin-inline: 0; overflow-x: auto; }
.art__body blockquote { margin-inline: 0; padding-left: 20px; border-left: 1px solid var(--line-strong); }
.art__body > blockquote:has(figure) { max-width: none; }
/* Code: inline runs wrap with the text; a block scrolls sideways inside itself,
   never the page (inc/content.php gives <pre> keyboard focus). */
.art__body code { padding: .1em .35em; border-radius: 4px; background: var(--grey); font-family: var(--mono); font-size: .88em; overflow-wrap: anywhere; }
.art__body pre {
	max-width: 100%; overflow-x: auto; padding: 18px 20px;
	border-radius: var(--r-sm); background: var(--charcoal-2); color: var(--on-dark);
	font-family: var(--mono); font-size: 15px; line-height: 1.6; tab-size: 4; white-space: pre;
}
.art__body pre code { padding: 0; background: none; color: inherit; font-size: inherit; overflow-wrap: normal; }
/* Old posts can hold an empty heading block (one was an empty h1, now an h2). */
.art__body :is(h2, h3):empty { display: none; }

/* ---------- Block content in old posts ----------
   Core block styles are off (one CSS file, see inc/setup.php), so the block
   patterns old posts use are covered here: embeds, images, alignments,
   captions, buttons and columns. */
iframe { max-width: 100%; }
.wp-block-embed { margin-inline: 0; }
.wp-block-embed__wrapper { position: relative; }
.wp-has-aspect-ratio .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; }
.wp-embed-aspect-21-9 .wp-block-embed__wrapper { aspect-ratio: 21 / 9; }
.wp-embed-aspect-18-9 .wp-block-embed__wrapper { aspect-ratio: 2 / 1; }
.wp-embed-aspect-16-9 .wp-block-embed__wrapper { aspect-ratio: 16 / 9; }
.wp-embed-aspect-4-3 .wp-block-embed__wrapper { aspect-ratio: 4 / 3; }
.wp-embed-aspect-1-1 .wp-block-embed__wrapper { aspect-ratio: 1 / 1; }
.wp-embed-aspect-9-16 .wp-block-embed__wrapper { aspect-ratio: 9 / 16; }
.wp-embed-aspect-1-2 .wp-block-embed__wrapper { aspect-ratio: 1 / 2; }
/* Portrait embeds would fill the whole column height; keep them phone-sized. */
:is(.wp-embed-aspect-9-16, .wp-embed-aspect-1-2) .wp-block-embed__wrapper { max-width: 360px; }
.wp-has-aspect-ratio .wp-block-embed__wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--r-sm); background: var(--charcoal); }
.wp-block-image { margin-inline: 0; }
.wp-block-image img { display: block; max-width: 100%; height: auto; border-radius: var(--r-sm); }
.art__body :is(figcaption, .wp-element-caption) { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.alignleft { float: left; margin: 6px 28px 16px 0; }
.alignright { float: right; margin: 6px 0 16px 28px; }
.art__body > :is(.alignleft, .alignright) { max-width: 50%; }
.aligncenter { clear: both; margin-inline: auto; text-align: center; }
:is(.aligncenter img, img.aligncenter) { display: block; margin-inline: auto; }
.art__body::after { content: ""; display: table; clear: both; }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.wp-block-buttons.is-content-justification-center { justify-content: center; }
.art__body a.wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
	border: 2px solid var(--accent); border-radius: var(--pill); background: var(--accent);
	font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--white); text-decoration: none;
}
.art__body a.wp-block-button__link:hover { border-color: var(--accent-deep); background: var(--accent-deep); color: var(--white); }
.art__body .is-style-outline a.wp-block-button__link { background: transparent; color: var(--accent); }
.wp-block-columns { display: flex; gap: 24px 32px; }
.wp-block-column { flex: 1 1 0; min-width: 0; }
.wp-block-column > :first-child { margin-top: 0; }
@media (max-width: 640px) {
	.alignleft, .alignright { float: none; margin: 0 0 20px; }
	.art__body > :is(.alignleft, .alignright) { max-width: 100%; }
	.wp-block-columns { flex-direction: column; }
}

/* Sidebar: related guides and the help card. Sticks below the in-page menu when it fits the screen. */
.aside { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
@media (min-width: 1021px) and (min-height: 760px) {
	.aside { position: sticky; top: 88px; }
}
.aside__related h2 { margin: 0 0 6px; font-size: 1.25rem; }
.aside__related ul { margin: 0; padding: 0; list-style: none; }
.aside__related li a { display: block; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); text-decoration: none; }
.aside__related li a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.aside__all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--accent); text-decoration: none; }
.aside__all:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 4px; }
.aside__all .ic { width: 18px; height: 18px; stroke-width: 1.8; }
.help-card {
	--focus: var(--live); --ic-accent: var(--live);
	display: flex; flex-direction: column; gap: 12px; padding: 24px;
	border-radius: var(--r-lg); background: var(--charcoal-2); color: var(--white);
}
.help-card p { margin: 0; }
.help-card__label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #9FE0C0; }
.help-card__text { font-size: 18px; font-weight: 700; line-height: 1.35; }
.help-card__phone { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 22px; font-weight: 700; color: var(--white); text-decoration: none; }
.help-card__phone:hover { color: var(--white); text-decoration: underline; text-underline-offset: 5px; }
.help-card__phone .ic { width: 22px; height: 22px; stroke-width: 1.6; }
.help-card__note { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--on-dark-2); }
.help-card .btn { margin-top: 4px; }

/* ---------- Post lists: blog index, archives, search (parts/post-list.php) ---------- */
.posts { padding-block: clamp(40px, 5vw, 64px) clamp(56px, 7vw, 88px); }
.topics { margin-bottom: 40px; }
.topics ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.topics a {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
	border: 1.5px solid var(--line-strong); border-radius: var(--pill);
	font-size: 15px; font-weight: 600; color: var(--ink-2); text-decoration: none;
	transition: border-color .15s, background-color .15s, color .15s;
}
.topics a:hover { border-color: var(--ink); color: var(--ink); }
.topics a[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: var(--white); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; margin: 0; padding: 0; list-style: none; }
/* The title link stretches over the card, so the whole card is one target. */
.card { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-top: 20px; border-top: 3px solid var(--ink); }
.card__topic { font-family: var(--mono); font-size: 12px; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.card__title { margin: 0; font-size: 1.375rem; line-height: 1.25; letter-spacing: -.01em; }
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: -8px; border-radius: var(--r); }
.card:hover .card__title a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.card__title a:focus-visible { outline: none; }
.card__title a:focus-visible::after { outline: 3px solid var(--focus, var(--accent)); outline-offset: 2px; }
.card__text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted); }
.card__date { margin-top: auto; padding-top: 6px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.posts__empty { max-width: 68ch; padding: 28px 32px; border-radius: var(--r-lg); background: var(--grey); font-size: 18px; line-height: 1.6; }
.posts__empty p { margin: 0; }
.posts__empty a:not(.mono) { color: var(--accent); }

/* Search box in the search results and on the 404 page. */
.search-form { display: grid; gap: 8px; max-width: 640px; margin-bottom: 40px; }
.search-form label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.search-form__row { display: flex; flex-wrap: wrap; gap: 10px; }
.search-form input {
	flex: 1 1 240px; min-width: 0; min-height: 48px; padding: 0 18px;
	border: 1.5px solid var(--field); border-radius: var(--pill); background: var(--white);
	font: inherit; font-size: 16px; color: var(--ink);
}
.search-form input:hover { border-color: var(--ink-2); }
.search-form input:focus { border-color: var(--accent); }

/* Pagination from the_posts_pagination(). Its heading is for screen readers. */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pagination { margin-top: 56px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px;
	border: 1.5px solid var(--line-strong); border-radius: var(--pill);
	font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); text-decoration: none;
}
a.page-numbers:hover { border-color: var(--ink); color: var(--ink); }
.page-numbers.current { border-color: var(--ink); background: var(--ink); color: var(--white); }
.page-numbers.dots { border-color: transparent; }

/* ---------- Not found (404.php) ---------- */
.lost { padding-block: clamp(40px, 5vw, 64px) clamp(56px, 7vw, 88px); }
.lost__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; margin: 0 0 56px; padding: 0; list-style: none; border-top: 3px solid var(--ink); }
.lost__link { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 22px 0 24px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.lost__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 1.5rem; font-weight: 800; line-height: 1.2; letter-spacing: -.015em; }
.lost__title .ic { width: 22px; height: 22px; stroke-width: 1.8; color: var(--accent); }
.lost__text { font-size: 16px; line-height: 1.5; color: var(--muted); }
.lost__link:hover .lost__title { color: var(--accent); text-decoration: underline; text-underline-offset: 5px; }

/* Templates: breakpoints */
@media (max-width: 1020px) {
	.article__cols { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.cards, .lost__list { grid-template-columns: minmax(0, 1fr); }
	.cards { gap: 36px; }
	:is(.band .wrap, .band__col, .pair > div) > :is(p, ul:not([class]), ol:not([class])), .art__body { font-size: 17px; }
	.ticket-band__head p { font-size: 17px; }
	:is(.band, .art__body) table:not(.cmp) :is(th, td) { padding: 12px 10px; }
}