/* IT Support Hub: the office-signage look (November 2026). Loaded after site.css on
   every page. It resets the section 1 tokens to the sign palette, adds the sign
   tokens home.css uses, and restyles the shell and shared components. City pages
   (body.city) keep their own dark heroes from city.css, so every inner-hero rule
   here is scoped to body:not(.city). */

:root {
	--sign-yellow: #FFCD00;
	--sign-green: #00843D;
	--sign-blue: #0057B8;
	--sign-red: #D52B1E;
	--sign-orange: #F26A21;
	--hwy: #00653A;
	--asphalt: #2A2B2D;
	--wall: #ECEDEA;
	--post: #8E9089;
	--yellow-ink: #3B3000;
	--display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
	--shadow-sign: 0 2px 2px rgba(0, 0, 0, .16), 0 16px 30px -18px rgba(0, 0, 0, .45);

	--accent: #000000;
	--accent-deep: #000000;
	--ink: #000000;
	--ink-2: #26271F;
	--muted: #45463F;
	--charcoal: #000000;
	--charcoal-2: #000000;
	--charcoal-3: #1B1B1A;
	--mint: #FFF6CC;
	--grey: #ECEDEA;
	--line: #D5D6D0;
	--line-strong: #B6B7B0;
	--field: #6E6F68;
	--amber: #F26A21;
	--red: #D52B1E;
	--red-pale: #FBE3E0;
	--amber-pale: #FDE6D8;
	--on-dark: #ECEAE0;
	--on-dark-2: #CFCBB8;
	--live: #FFCD00;

	--font: "Overpass", "Helvetica Neue", Arial, sans-serif;
	--mono: "Overpass", "Helvetica Neue", Arial, sans-serif;

	--r-sm: 6px;
	--r: 8px;
	--r-lg: 12px;
	--pill: 6px;
	--shadow-panel: 0 18px 40px rgba(0, 0, 0, .2), 0 2px 6px rgba(0, 0, 0, .1);
	--shadow-tile: var(--shadow-sign);
}

/* ---------- Type ---------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; letter-spacing: 0; line-height: 1.02; }
h1 { font-size: clamp(2.75rem, 1.8rem + 3.4vw, 4.5rem); font-weight: 900; line-height: .95; letter-spacing: 0; }
h2 { font-size: clamp(2.125rem, 1.5rem + 2.2vw, 3.375rem); font-weight: 900; }
h3 { font-size: 1.5rem; line-height: 1.1; letter-spacing: 0; }
.mono { font-weight: 700; }
::selection { background: #FFE680; color: #000; }
a:hover { color: #000; }

/* ---------- Buttons: sentence case, square sign corners ---------- */
.btn { font-size: 16px; letter-spacing: 0; text-transform: none; }
.btn--sm { font-size: 15px; }
.btn--accent:hover { background: var(--asphalt); }
.btn--light { border-color: #000; }
/* Dark surfaces: the primary button turns yellow so it stays visible on black. */
:is(.site-footer, .search-panel, .help-card, .plan--featured, .prod__item--cta, .tile--dark, body.city .hero) .btn--accent,
.site-header .btn--head { background: var(--sign-yellow); color: #000; }
:is(.site-footer, .search-panel, .help-card, .plan--featured, .prod__item--cta, .tile--dark, body.city .hero) .btn--accent:hover,
.site-header .btn--head:hover { background: #FFE14D; color: #000; }
body.city .hero .btn--light { border-color: transparent; }

/* ---------- Shell ---------- */
.utility { background: var(--asphalt); }
.site-header { --focus: var(--sign-yellow); --ic-accent: var(--sign-yellow); background: #000; border-bottom: 0; color: #fff; }
.site-header .btn--head { font-size: 16px; }
.nav-item { color: #fff; }
.nav-item:hover, .nav-item[aria-expanded="true"] { color: var(--sign-yellow); }
.nav-item[data-current="true"], .nav-item[aria-current="page"] { text-decoration-color: var(--sign-yellow); text-decoration-thickness: 4px; }
.nav-panel { --focus: #000; --ic-accent: #000; border: 2px solid #000; }
.menu-toggle { border-color: rgba(255, 255, 255, .55); background: transparent; color: #fff; }
.menu-toggle[aria-expanded="true"] { border-color: var(--sign-yellow); }
.mobile-menu { border-top-color: rgba(255, 255, 255, .2); }
.mm-group, .mm-link { border-bottom-color: rgba(255, 255, 255, .2); }
.mm-group summary, .mm-group a, .mm-link { color: #fff; }
.mm-group a[aria-current="page"], .mm-group .mm-all { color: var(--sign-yellow); }

.qt { border-radius: 6px 0 0 6px; }
.qt--ticket { background: var(--sign-yellow); color: #000; --ic-accent: #000; }
.qt--ticket:hover { background: #FFE14D; color: #000; }
.qt--pricing { background: #000; box-shadow: inset 0 0 0 2px var(--sign-yellow), 0 6px 16px rgba(0, 0, 0, .2); }
.qt--pricing:hover { background: var(--asphalt); }
.qt--call { background: var(--sign-green); --ic-accent: #fff; }
.qt--call:hover { background: #006F33; }

@media (max-width: 640px) {
	.mobile-bar { background: #000; border-top: 0; }
	.mobile-bar__call { background: var(--sign-green); --ic-accent: #fff; }
	.mobile-bar__ticket { background: var(--sign-yellow); color: #000; --ic-accent: #000; }
	.mobile-bar a:hover { color: inherit; }
}

.site-footer h2 { font-family: var(--display); font-size: 22px; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--sign-yellow); }
.site-footer .f-phone { font-family: var(--display); font-size: 32px; font-weight: 900; }
.site-footer__top, .site-footer__bottom { border-color: rgba(255, 255, 255, .16); }

/* ---------- Inner-page heroes: the yellow wall (articles on the grey wall) ---------- */
body:not(.city) .hero { --focus: #000; --ic-accent: #000; background: var(--sign-yellow); color: #000; }
body:not(.city) .hero::before, body:not(.city) .hero::after { display: none; }
body:not(.city) .hero--article { background: var(--wall); }
body:not(.city) .hero .hero__title { max-width: 18ch; font-size: clamp(2.75rem, 1.8rem + 3.4vw, 4.75rem); line-height: .95; }
body:not(.city) .hero--article .hero__title { max-width: 26ch; font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); line-height: 1; }
body:not(.city) .hero .hero__eyebrow {
	align-self: flex-start; padding: 5px 10px 3px; border-radius: 4px; background: #000; color: var(--sign-yellow);
	font-family: var(--display); font-size: 16px; font-weight: 800; letter-spacing: .06em;
}
body:not(.city) .hero .hero__lede { color: var(--yellow-ink); }
body:not(.city) .hero--article .hero__lede { color: var(--ink-2); }
body:not(.city) .hero .crumbs ol, body:not(.city) .hero .crumbs a, body:not(.city) .hero .crumbs a:hover { color: #000; }
body:not(.city) .hero .crumbs li + li::before { color: var(--yellow-ink); }
body:not(.city) .hero .btn--light { background: #000; border-color: #000; color: #fff; }
body:not(.city) .hero .btn--light:hover { background: var(--asphalt); color: #fff; }
body:not(.city) .hero .btn--ghost-light { border-color: #000; color: #000; }
body:not(.city) .hero .btn--ghost-light:hover { background: #000; color: #fff; }
body:not(.city) .hero__media { padding: 6px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-sign); }
body:not(.city) .hero__media .hero__img { border: 2px solid #000; border-radius: 8px; }
body:not(.city) .hero__media::after { display: none; }
body:not(.city) .hero .ticket--hero { border: 2px solid #000; box-shadow: var(--shadow-sign); }

/* ---------- Components ---------- */
.ticket__head h2 { font-size: 28px; }
.ticket--page { border: 2px solid #000; }
.ticket__live .itsh-dot { background: #000; }
@keyframes live-pulse {
	0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, .35); }
	70%, 100% { box-shadow: 0 0 0 7px rgba(0, 0, 0, 0); }
}
.itsh-dot--question { background: var(--sign-blue); }
.urg__opt input[value="question"]:checked + span { background: #E3EDF8; }

.tile::before { display: none; }
.tile__title { font-family: var(--display); font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem); font-weight: 900; letter-spacing: 0; }
.tile--accent:hover { background: var(--asphalt); }
.tile--mint { border: 2px solid #000; }
.tile--mint:hover { background: #FFEFA3; }

.svc__item h3 { font-size: 24px; }
.ind__item, .prod__item, .plan, .posts__empty { border: 2px solid #000; }
.band--white .prod__item { border-color: #000; }
.ind__head h3 { font-size: 26px; }
.prod__item h3 { font-size: 24px; }
.prod__item .prod__for { font-family: var(--font); font-weight: 800; color: #000; }
.plan h3 { font-size: 1.75rem; }
.plan--featured { border: 0; }
.plan--featured::before { display: none; }
.plan--featured h3 { font-size: 2rem; color: var(--sign-yellow); }
.plan__amount { font-family: var(--display); font-size: clamp(2.75rem, 2.2rem + 1.6vw, 3.5rem); font-weight: 900; }
.help-card__label { color: var(--sign-yellow); }
.help-card__phone { font-family: var(--display); font-size: 30px; font-weight: 900; }
.cmp thead th { font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: 0; }
.quote blockquote::before { font-family: var(--display); font-size: 80px; font-weight: 900; }
.diagram__zone { border-color: #000; }
.diagram__tag { font-family: var(--display); font-size: 15px; font-weight: 800; color: #000; }
.box--accent { background: #000; border-color: #000; }
.card { border-top-width: 4px; }
.card__topic { font-family: var(--font); font-weight: 800; color: #000; }
.card__title { font-size: 1.75rem; line-height: 1.05; }
.card:hover .card__title a { text-decoration-color: var(--sign-yellow); text-decoration-thickness: 4px; }
.lost__title { font-family: var(--display); font-size: 1.875rem; font-weight: 900; letter-spacing: 0; }
.lost__title .ic { color: #000; }
.res__head h3 { font-size: 1.875rem; }
.topics a[aria-current="page"], .page-numbers.current { background: #000; color: var(--sign-yellow); }

/* FAQ: question rows under a 2px rule, the plus inside a blue information square. */
.faq__list { border-bottom: 2px solid #000; }
.faq__item { border-top: 2px solid #000; }
.faq__item summary { min-height: 64px; padding: 18px 0; font-family: var(--display); font-size: 26px; font-weight: 800; line-height: 1.1; }
.faq__item summary:hover { color: #000; text-decoration: underline; text-decoration-color: var(--sign-yellow); text-decoration-thickness: 4px; text-underline-offset: 5px; }
.faq__item summary::after {
	width: 32px; height: 32px; border-radius: 4px;
	background:
		linear-gradient(#fff, #fff) center / 14px 3px no-repeat,
		linear-gradient(#fff, #fff) center / 3px 14px no-repeat,
		var(--sign-blue);
}
.faq__item[open] summary::after { background-size: 14px 3px, 0 0; }

/* Closing band: the yellow wall again. */
.cta-band { --focus: #000; --ic-accent: #000; background: var(--sign-yellow); color: #000; }
.cta-band::before { display: none; }
.cta-band h2 { color: #000; font-size: clamp(2.5rem, 1.7rem + 2.8vw, 4.25rem); line-height: .95; }
.cta-band p { color: var(--yellow-ink); }
.cta-band__phone { font-family: var(--display); font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); font-weight: 900; color: #000; }
.cta-band__phone:hover { color: #000; }
.cta-band .btn--light { background: #000; border-color: #000; color: #fff; }
.cta-band .btn--light:hover { background: var(--asphalt); color: #fff; }

/* Copy: black links that light up yellow on hover; the article rule is a short yellow stripe. */
:is(.band, .art__body, .faq__a, .posts__empty) a:not([class]):hover { background: #FFE680; color: #000; }
.art__body h2::after { width: 72px; height: 6px; border-radius: 0; background: var(--sign-yellow); box-shadow: 0 0 0 1px #000; }
.band--split .band__col > ul:not([class]) { border: 2px solid #000; }
.band--split .band__col > ul:not([class]) > li::before { border-radius: 1px; background: var(--sign-yellow); box-shadow: 0 0 0 1.5px #000; }
.pair > div { border-top-width: 4px; }
/* A wide table in the copy scrolls inside itself on a phone instead of widening the page. */
@media (max-width: 640px) {
	:is(.band, .art__body) table:not(.cmp) { display: block; max-width: 100%; overflow-x: auto; }
}
/* Urgency options carry their level colour down the left edge. */
.urg__opt input[value="down"] + span { border-left: 8px solid var(--sign-red); }
.urg__opt input[value="broken"] + span { border-left: 8px solid var(--sign-orange); }
.urg__opt input[value="question"] + span { border-left: 8px solid var(--sign-blue); }
.ticket--sign .urg__opt input + span { border-left-width: 2px; }