/*
Theme Name: Uptime
Theme URI: https://example.com/uptime
Author: iConnect Technologies
Author URI: https://iconnecttechnologies.com
Description: A premium WordPress theme for managed IT, cloud, cybersecurity and AI automation providers. Built around an operations-console visual language, with a layered service stack, customizer-driven front page sections, and custom post types for Services, Industries and Client proof.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: uptime
Tags: business, technology, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, blog, editor-style, block-styles, right-sidebar, threaded-comments, translation-ready
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	/* Surfaces — deep teal-black reading as a dark operations room */
	--up-ink:        #0C1A1F;
	--up-ink-2:      #12252B;
	--up-ink-3:      #173037;
	--up-hair:       rgba(255, 255, 255, 0.09);
	--up-hair-2:     rgba(255, 255, 255, 0.16);

	/* Light surfaces — a hair of warmth so they read as paper, not a lab bench */
	--up-porcelain:  #F3F2EE;
	--up-porcelain-2:#EAE7E1;
	--up-line:       #DAD8D1;

	/* Brand accent — iConnect blue (#1B89E2). White + black + this blue only. */
	--up-accent:     #1B89E2;
	--up-accent-deep:#0E5FAE;
	--up-accent-soft:rgba(27, 137, 226, 0.14);
	--up-accent-bright:#3BA3EF;

	/* Operational signal — the second accent. Green = live / up / operational,
	   used only for genuine status (never decoration). Deep variant for text
	   on light surfaces. */
	--up-ok:         #4ED8A0;
	--up-ok-deep:    #17A672;
	--up-warn:       #F0A830;
	--up-crit:       #FF6B5B;

	/* Type colours */
	--up-text:       #0C1A1F;
	--up-text-soft:  #4E656C;
	--up-text-inv:   #E9EFEE;
	--up-text-inv-soft: #90A9AF;

	/* Typography */
	--up-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--up-body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--up-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Scale */
	--up-step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
	--up-step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
	--up-step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
	--up-step-2:  clamp(1.45rem, 1.3rem + 0.75vw, 1.85rem);
	--up-step-3:  clamp(1.8rem, 1.5rem + 1.4vw, 2.6rem);
	--up-step-4:  clamp(2.3rem, 1.7rem + 2.8vw, 4rem);
	--up-step-5:  clamp(2.8rem, 1.8rem + 4.4vw, 5.2rem);

	/* Structure */
	--up-maxw: 1220px;
	--up-gut: clamp(1.25rem, 4vw, 2.75rem);
	--up-radius: 4px;
	--up-radius-sm: 2px;
	--up-section: clamp(4.5rem, 9vw, 8rem);
	--up-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--up-porcelain);
	color: var(--up-text);
	font-family: var(--up-body);
	font-size: var(--up-step-0);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

a { color: var(--up-accent-deep); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--up-text); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--up-display);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.022em;
	margin: 0 0 0.5em;
	text-wrap: balance;
}

h1 { font-size: var(--up-step-4); }
h2 { font-size: var(--up-step-3); }
h3 { font-size: var(--up-step-2); }
h4 { font-size: var(--up-step-1); }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.15rem; }

blockquote {
	margin: 2rem 0;
	padding: 0.2rem 0 0.2rem 1.5rem;
	border-left: 3px solid var(--up-accent);
	font-size: var(--up-step-1);
	line-height: 1.45;
	font-style: normal;
}

code, kbd, pre { font-family: var(--up-mono); font-size: 0.9em; }
pre {
	background: var(--up-ink);
	color: var(--up-text-inv);
	padding: 1.25rem;
	border-radius: var(--up-radius);
	overflow-x: auto;
}
:not(pre) > code {
	background: var(--up-porcelain-2);
	padding: 0.15em 0.4em;
	border-radius: var(--up-radius-sm);
}

hr { border: 0; border-top: 1px solid var(--up-line); margin: 2.5rem 0; }

table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
th, td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--up-line); text-align: left; }
th { font-family: var(--up-mono); font-size: var(--up-step--1); text-transform: uppercase; letter-spacing: 0.06em; }

::selection { background: var(--up-accent); color: var(--up-ink); }

:focus-visible {
	outline: 2px solid var(--up-accent);
	outline-offset: 3px;
	border-radius: var(--up-radius-sm);
}

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; word-wrap: normal !important;
}
.skip-link {
	position: absolute; left: 1rem; top: -100px; z-index: 999;
	background: var(--up-accent); color: var(--up-ink);
	padding: 0.7rem 1.1rem; font-family: var(--up-mono); font-size: var(--up-step--1);
	border-radius: var(--up-radius); transition: top 0.2s var(--up-ease);
}
.skip-link:focus { top: 1rem; }

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */

.up-wrap {
	width: 100%;
	max-width: var(--up-maxw);
	margin-inline: auto;
	padding-inline: var(--up-gut);
}
.up-wrap--narrow { max-width: 760px; }

.up-section { padding-block: var(--up-section); position: relative; }
.up-section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.up-dark {
	background: var(--up-ink);
	color: var(--up-text-inv);
}
.up-dark h1, .up-dark h2, .up-dark h3, .up-dark h4 { color: var(--up-text-inv); }
.up-dark a:not(.up-btn) { color: var(--up-accent); }

/* Rack rail — hairline markings borrowed from equipment racks, used to
   separate major bands and carry the section index. */
.up-rail {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	font-family: var(--up-mono);
	font-size: var(--up-step--1);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--up-text-soft);
	margin-bottom: 1.4rem;
}
.up-dark .up-rail { color: var(--up-text-inv-soft); }
.up-rail::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--up-line);
}
.up-dark .up-rail::after { background: var(--up-hair); }

.up-dot {
	width: 7px; height: 7px; border-radius: 50%;
	margin-top: 0.1em;
	background: var(--up-ok);
	box-shadow: 0 0 0 3px rgba(78, 216, 160, 0.18);
	flex: none;
}
.up-dot--accent { background: var(--up-accent); box-shadow: 0 0 0 3px var(--up-accent-soft); }
/* Live operational signal — a green dot that breathes, the site's status
   signature (hero eyebrow, footer status). Stilled under reduced-motion. */
.up-dot--live { animation: up-dot-live 2.4s ease-in-out infinite; }
@keyframes up-dot-live {
	0%, 100% { box-shadow: 0 0 0 3px rgba(78, 216, 160, 0.18); }
	50%      { box-shadow: 0 0 0 5px rgba(78, 216, 160, 0.04), 0 0 12px 2px rgba(78, 216, 160, 0.6); }
}

/* "Active" pulse on the operations-deck accent dot (Firewall & VPN) — a gentle
   blue glow that breathes, so the row reads as live. Disabled under
   prefers-reduced-motion by the global rule. */
.up-console .up-dot--accent { animation: up-dot-pulse 1.8s ease-in-out infinite; }
@keyframes up-dot-pulse {
	0%, 100% { box-shadow: 0 0 0 3px var(--up-accent-soft), 0 0 5px 0 rgba(27, 137, 226, 0.45); }
	50%      { box-shadow: 0 0 0 5px rgba(27, 137, 226, 0.05), 0 0 13px 3px rgba(27, 137, 226, 0.75); }
}

.up-lede {
	font-size: var(--up-step-1);
	line-height: 1.5;
	color: var(--up-text-soft);
	max-width: 58ch;
}
.up-dark .up-lede { color: var(--up-text-inv-soft); }

.up-head { max-width: 62ch; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.up-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.5rem;
	font-family: var(--up-mono);
	font-size: var(--up-step--1);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--up-radius);
	cursor: pointer;
	transition: transform 0.18s var(--up-ease), background-color 0.18s var(--up-ease), color 0.18s var(--up-ease), border-color 0.18s var(--up-ease);
}
.up-btn:hover { transform: translateY(-2px); }
.up-btn:active { transform: translateY(0); }

.up-btn--primary { background: var(--up-accent); color: #fff; }
.up-btn--primary:hover { background: var(--up-accent-deep); color: #fff; }

.up-btn--ghost {
	background: transparent;
	color: var(--up-text-inv);
	border-color: var(--up-hair-2);
}
.up-btn--ghost:hover { border-color: var(--up-accent); color: var(--up-accent); }

.up-btn--dark { background: var(--up-ink); color: var(--up-text-inv); }
.up-btn--dark:hover { background: var(--up-ink-3); color: var(--up-text-inv); }

.up-btn--line { background: transparent; color: var(--up-text); border-color: var(--up-line); }
.up-btn--line:hover { border-color: var(--up-ink); color: var(--up-text); }

.up-btn__arrow { transition: transform 0.18s var(--up-ease); }
.up-btn:hover .up-btn__arrow { transform: translateX(3px); }

.up-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* ==========================================================================
   5. Site header
   ========================================================================== */

.up-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--up-ink);
	border-bottom: 1px solid var(--up-hair);
	transition: box-shadow 0.25s var(--up-ease);
}
.up-header.is-stuck { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.32); }

.up-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 74px;
}

.up-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; flex: none; }
.up-brand img { max-height: 42px; width: auto; }
.up-brand__name {
	font-family: var(--up-display);
	font-weight: 800;
	font-size: 1.22rem;
	letter-spacing: -0.02em;
	color: var(--up-text-inv);
	line-height: 1.1;
}
.up-brand__tag {
	display: block;
	font-family: var(--up-mono);
	font-size: 0.62rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--up-accent);
	margin-top: 3px;
	font-weight: 400;
}

/* Navigation */
.up-nav { margin-left: auto; }
.up-nav ul { list-style: none; margin: 0; padding: 0; }
.up-nav > ul { display: flex; align-items: center; gap: 0.35rem; }
.up-nav li { position: relative; }
.up-nav a {
	display: block;
	padding: 0.6rem 0.85rem;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--up-text-inv-soft);
	text-decoration: none;
	border-radius: var(--up-radius-sm);
	transition: color 0.18s var(--up-ease);
}
.up-nav a:hover, .up-nav .current-menu-item > a, .up-nav .current_page_item > a { color: var(--up-text-inv); }
.up-nav .current-menu-item > a { position: relative; }
.up-nav .current-menu-item > a::after {
	content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.28rem;
	height: 2px; background: var(--up-accent);
}

/* Dropdowns */
.up-nav ul ul {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 230px;
	background: var(--up-ink-2);
	border: 1px solid var(--up-hair);
	border-radius: var(--up-radius);
	padding: 0.4rem;
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s var(--up-ease), transform 0.18s var(--up-ease), visibility 0.18s;
}
.up-nav li:hover > ul,
.up-nav li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.up-nav ul ul a { padding: 0.55rem 0.75rem; font-size: 0.9rem; }
.up-nav ul ul ul { top: -0.4rem; left: 100%; }

.up-header__cta { flex: none; }

/* Mobile toggle */
.up-burger {
	display: none;
	width: 44px; height: 44px;
	background: transparent;
	border: 1px solid var(--up-hair-2);
	border-radius: var(--up-radius);
	cursor: pointer;
	padding: 0;
	align-items: center;
	justify-content: center;
	flex: none;
}
.up-burger span { display: block; width: 18px; height: 1.5px; background: var(--up-text-inv); position: relative; transition: background 0.18s; }
.up-burger span::before, .up-burger span::after {
	content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--up-text-inv);
	transition: transform 0.22s var(--up-ease), top 0.22s var(--up-ease);
}
.up-burger span::before { top: -6px; }
.up-burger span::after { top: 6px; }
.up-burger[aria-expanded="true"] span { background: transparent; }
.up-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.up-burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1000px) {
	.up-burger { display: flex; }
	.up-header__cta { display: none; }
	.up-nav {
		position: fixed;
		inset: 74px 0 auto 0;
		background: var(--up-ink);
		border-bottom: 1px solid var(--up-hair);
		padding: 1rem var(--up-gut) 2rem;
		max-height: calc(100vh - 74px);
		overflow-y: auto;
		display: none;
	}
	.up-nav.is-open { display: block; }
	.up-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
	.up-nav a { padding: 0.9rem 0; border-bottom: 1px solid var(--up-hair); font-size: 1.05rem; }
	.up-nav .current-menu-item > a::after { display: none; }
	.up-nav ul ul {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; background: transparent; padding: 0 0 0 1rem;
	}
	.up-nav ul ul a { font-size: 0.95rem; color: var(--up-text-inv-soft); }
}

/* ==========================================================================
   6. Hero — the operations deck
   ========================================================================== */

.up-hero {
	position: relative;
	background: var(--up-ink);
	color: var(--up-text-inv);
	padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(4rem, 8vw, 7rem);
	overflow: hidden;
}
.up-hero::before {
	/* Faint rack-unit grid, the room the console sits in */
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(var(--up-hair) 1px, transparent 1px);
	background-size: 100% 56px;
	opacity: 0.5;
	pointer-events: none;
	mask-image: radial-gradient(ellipse 90% 70% at 30% 40%, #000 20%, transparent 78%);
	-webkit-mask-image: radial-gradient(ellipse 90% 70% at 30% 40%, #000 20%, transparent 78%);
}
.up-hero::after {
	/* Subtle brand-blue glow — a premium "electric" depth without a loud
	   background. Sits behind the content (.up-hero__inner is z-index:1). */
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(46% 42% at 82% 16%, rgba(27, 137, 226, 0.22), transparent 62%),
		radial-gradient(52% 46% at 6% 98%, rgba(27, 137, 226, 0.10), transparent 60%);
}
.up-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
}
@media (max-width: 940px) {
	.up-hero__inner { grid-template-columns: 1fr; }
}

.up-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--up-mono);
	font-size: var(--up-step--1);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--up-text-inv-soft);
	border: 1px solid var(--up-hair);
	border-radius: 100px;
	padding: 0.4rem 0.95rem 0.4rem 0.7rem;
	margin-bottom: 1.6rem;
}

.up-hero__title {
	font-size: var(--up-step-5);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 0.98;
	margin-bottom: 1.1rem;
}
.up-hero__title em {
	font-style: normal;
	color: var(--up-accent);
}
.up-hero__text {
	font-size: var(--up-step-1);
	line-height: 1.5;
	color: var(--up-text-inv-soft);
	max-width: 48ch;
	margin-bottom: 2rem;
}

.up-hero__trust {
	margin-top: 2.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--up-hair);
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2.5rem;
}
.up-hero__trust-item { font-family: var(--up-mono); font-size: var(--up-step--1); color: var(--up-text-inv-soft); letter-spacing: 0.04em; }
.up-hero__trust-item strong { display: block; color: var(--up-text-inv); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; }

/* The console panel — signature element */
.up-console {
	background: linear-gradient(180deg, var(--up-ink-2), #0E2027);
	border: 1px solid var(--up-hair-2);
	border-radius: 8px;
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
	overflow: hidden;
}
.up-console__bar {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.8rem 1.1rem;
	border-bottom: 1px solid var(--up-hair);
	background: rgba(0, 0, 0, 0.22);
}
.up-console__title {
	font-family: var(--up-mono);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--up-text-inv-soft);
}
.up-console__clock { margin-left: auto; font-family: var(--up-mono); font-size: 0.72rem; color: var(--up-text-inv-soft); letter-spacing: 0.08em; }

.up-console__rows { padding: 0.35rem 0; }
.up-console__row {
	display: grid;
	grid-template-columns: 14px minmax(0, 1fr) auto;
	align-items: start;
	gap: 0.85rem;
	padding: 0.72rem 1.1rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.045);
	font-size: 0.9rem;
}
.up-console__row:last-child { border-bottom: 0; }
.up-console__label { color: var(--up-text-inv); min-width: 0; line-height: 1.35; }
.up-console__value {
	font-family: var(--up-mono);
	font-size: 0.8rem;
	line-height: 1.5;
	letter-spacing: 0.05em;
	color: var(--up-ok);
	white-space: nowrap;
	text-align: right;
}
.up-console__value--warn { color: var(--up-warn); }

.up-console__foot {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--up-hair);
	background: rgba(0, 0, 0, 0.22);
}
.up-console__stat { padding: 1rem 1.1rem; border-right: 1px solid var(--up-hair); }
.up-console__stat:last-child { border-right: 0; }
.up-console__stat b {
	display: block;
	font-family: var(--up-display);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--up-text-inv);
	line-height: 1;
}
.up-console__stat span {
	display: block;
	font-family: var(--up-mono);
	font-size: 0.64rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--up-text-inv-soft);
	margin-top: 0.45rem;
}

@media (max-width: 480px) {
	.up-console__stat { padding: 0.85rem 0.7rem; }
	.up-console__stat b { font-size: 1.2rem; }
	.up-console__stat span { font-size: 0.64rem; letter-spacing: 0.09em; }
	.up-console__row { grid-template-columns: 10px minmax(0, 1fr); row-gap: 0.25rem; }
	.up-console__value { grid-column: 2; }
}

/* Page-load stagger for console rows */
.up-console__row, .up-console__stat { opacity: 0; animation: up-row-in 0.5s var(--up-ease) forwards; }
@keyframes up-row-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }


/* ==========================================================================
   7. Service stack — layered, because the stack really is layered
   ========================================================================== */

.up-stack { display: grid; gap: 0.7rem; }

.up-layer {
	position: relative;
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	padding: clamp(1.5rem, 3vw, 2.1rem) clamp(1.35rem, 3vw, 2.1rem);
	background: var(--up-ink-2);
	border: 1px solid var(--up-hair);
	border-left: 3px solid var(--up-ink-3);
	border-radius: var(--up-radius);
	text-decoration: none;
	color: inherit;
	transition: border-left-color 0.22s var(--up-ease), background-color 0.22s var(--up-ease), transform 0.22s var(--up-ease);
}
.up-layer:hover, .up-layer:focus-visible {
	background: var(--up-ink-3);
	border-left-color: var(--up-accent);
	transform: translateX(4px);
	color: inherit;
}
.up-layer__tier {
	font-family: var(--up-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--up-text-inv-soft);
	transition: color 0.22s var(--up-ease);
}
.up-layer:hover .up-layer__tier { color: var(--up-accent); }
.up-layer__tier b {
	display: block;
	font-size: 1.9rem;
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var(--up-hair-2);
	line-height: 1;
	margin-bottom: 0.4rem;
	transition: color 0.22s var(--up-ease);
}
.up-layer:hover .up-layer__tier b { color: var(--up-accent); }

.up-layer__body { display: block; min-width: 0; }
.up-layer__title {
	display: block;
	font-family: var(--up-display);
	font-weight: 700;
	letter-spacing: -0.022em;
	line-height: 1.1;
	font-size: var(--up-step-2);
	margin: 0 0 0.4rem;
	color: var(--up-text-inv);
}
.up-layer__text { display: block; color: var(--up-text-inv-soft); margin: 0 0 0.9rem; max-width: 62ch; font-size: 0.98rem; line-height: 1.6; }

.up-layer__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.up-layer__tags > span,
.up-layer__tags li {
	font-family: var(--up-mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--up-text-inv-soft);
	border: 1px solid var(--up-hair);
	border-radius: 100px;
	padding: 0.24rem 0.7rem;
}
.up-layer__go {
	font-family: var(--up-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--up-accent);
	display: flex;
	align-items: center;
	gap: 0.4rem;
	white-space: nowrap;
}
/* Careers — why-join grid. */
.up-why {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}
.up-why__item { padding-top: 1.4rem; border-top: 1px solid var(--up-hair-2); }
.up-why__item h3 { font-size: 1.1rem; color: var(--up-text-inv); margin: 0 0 0.5rem; }
.up-why__item p { color: var(--up-text-inv-soft); line-height: 1.65; margin: 0; font-size: 0.95rem; }

/* Careers — job listings. */
.up-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.up-job {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--up-line);
	border-radius: 14px;
	padding: 1.6rem;
	transition: transform 0.2s var(--up-ease), border-color 0.2s var(--up-ease), box-shadow 0.2s var(--up-ease);
}
.up-job:hover { transform: translateY(-3px); border-color: var(--up-accent); box-shadow: 0 24px 50px -30px rgba(9, 20, 25, 0.4); }
.up-job__dept {
	align-self: flex-start;
	font-family: var(--up-mono);
	font-size: 0.66rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--up-accent-deep);
	background: var(--up-accent-soft);
	border-radius: 100px;
	padding: 0.28rem 0.7rem;
	margin-bottom: 0.9rem;
}
.up-job__title { font-size: 1.2rem; margin: 0 0 0.5rem; color: var(--up-text); }
.up-job__desc { color: var(--up-text-soft); font-size: 0.92rem; line-height: 1.6; margin: 0 0 1.3rem; flex: 1; }
.up-job__apply {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--up-mono);
	font-size: 0.74rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--up-accent-deep);
	text-decoration: none;
	transition: gap 0.18s var(--up-ease);
}
.up-job:hover .up-job__apply { gap: 0.7rem; color: var(--up-accent); }

/* Leadership / team cards. */
.up-people {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}
.up-people--lead {
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	max-width: 720px;
}
.up-person { margin: 0; }
.up-person__photo {
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	border: 1px solid var(--up-line);
	aspect-ratio: 1 / 1;
	background: var(--up-porcelain);
}
.up-dark .up-person__photo { border-color: var(--up-hair-2); background: var(--up-ink-2); }
.up-person__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 22%;
	display: block;
	transition: transform 0.5s var(--up-ease), filter 0.5s var(--up-ease);
	filter: grayscale(0.15);
}
.up-person:hover .up-person__photo img { transform: scale(1.05); filter: grayscale(0); }
.up-person__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 14px;
	box-shadow: inset 0 -60px 60px -40px rgba(9, 20, 25, 0.55);
	opacity: 0;
	transition: opacity 0.4s var(--up-ease);
	pointer-events: none;
}
.up-person:hover .up-person__photo::after { opacity: 1; }
.up-person figcaption { display: block; padding-top: 0.9rem; }
.up-person__name {
	display: block;
	font-family: var(--up-display);
	font-weight: 600;
	font-size: 1.02rem;
	letter-spacing: -0.01em;
	color: var(--up-text);
}
.up-dark .up-person__name { color: var(--up-text-inv); }
.up-person__role {
	display: block;
	margin-top: 0.2rem;
	font-family: var(--up-mono);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--up-text-soft);
}
.up-dark .up-person__role { color: var(--up-accent); }
.up-people--lead .up-person__name { font-size: 1.2rem; }

/* ---- Blog / Insights index ---- */
.up-bfeatured {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
	padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
	border-bottom: 1px solid var(--up-line);
	text-decoration: none;
}
.up-bfeatured__thumb { display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--up-porcelain); }
.up-bfeatured__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--up-ease); }
.up-bfeatured:hover .up-bfeatured__thumb img { transform: scale(1.04); }
.up-bfeatured__body { display: flex; flex-direction: column; }
.up-bfeatured__title { font-family: var(--up-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--up-text); margin: 0.7rem 0; }
.up-bfeatured:hover .up-bfeatured__title { color: var(--up-accent-deep); }
.up-bfeatured__excerpt { color: var(--up-text-soft); line-height: 1.6; margin-bottom: 1rem; }
@media (max-width: 780px) { .up-bfeatured { grid-template-columns: 1fr; } }

.up-bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.up-bcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--up-line); border-radius: 14px; overflow: hidden; transition: transform 0.2s var(--up-ease), border-color 0.2s var(--up-ease), box-shadow 0.2s var(--up-ease); }
.up-bcard:hover { transform: translateY(-4px); border-color: var(--up-accent); box-shadow: 0 26px 50px -30px rgba(12, 26, 31, 0.35); }
.up-bcard__thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--up-porcelain); }
.up-bcard__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--up-ease); }
.up-bcard:hover .up-bcard__thumb img { transform: scale(1.05); }
.up-bcard__body { display: flex; flex-direction: column; padding: 1.3rem 1.4rem; flex: 1; }
.up-bcard__cat { align-self: flex-start; font-family: var(--up-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--up-accent-deep); background: var(--up-accent-soft); border-radius: 100px; padding: 0.28rem 0.7rem; margin-bottom: 0.85rem; }
.up-bcard__title { font-family: var(--up-display); font-weight: 700; font-size: 1.1rem; line-height: 1.28; letter-spacing: -0.01em; margin: 0 0 0.5rem; }
.up-bcard__title a { color: var(--up-text); text-decoration: none; }
.up-bcard:hover .up-bcard__title a { color: var(--up-accent-deep); }
.up-bcard__excerpt { color: var(--up-text-soft); font-size: 0.88rem; line-height: 1.6; margin: 0 0 1.1rem; flex: 1; }
.up-bcard__meta { font-family: var(--up-mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--up-text-soft); }

/* Feature — a real photo paired asymmetrically with copy (About story, homepage office band). */
.up-feature {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
.up-feature--reverse .up-feature__media { order: -1; }
.up-feature__copy { min-width: 0; }
.up-feature__media {
	position: relative;
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--up-hair-2);
	box-shadow: 0 40px 80px -48px rgba(0, 0, 0, 0.7);
}
.up-feature__media img { display: block; width: 100%; height: auto; }
.up-feature__cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 1.4rem 1.1rem 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--up-mono);
	font-size: 0.66rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(to top, rgba(9, 20, 25, 0.8), rgba(9, 20, 25, 0));
}
@media ( max-width: 820px ) {
	.up-feature { grid-template-columns: 1fr; }
	.up-feature--reverse .up-feature__media { order: 0; }
}

/* About — real team band (asymmetric, real faces). */
.up-team__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
.up-team__copy .up-btn { margin-top: 1.4rem; }
.up-team__faces { display: flex; align-items: center; padding: 1.2rem 0 1.2rem 20px; flex-wrap: wrap; }
.up-face {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 20%;
	border: 3px solid var(--up-ink);
	box-shadow: 0 0 0 1px var(--up-hair-2), 0 10px 26px rgba(0, 0, 0, 0.35);
	margin-left: -20px;
	background: var(--up-ink-2);
	transition: transform 0.3s var(--up-ease);
}
.up-face:nth-child(2n) { transform: translateY(-14px); }
.up-team__faces:hover .up-face { transform: none; }
.up-face--count {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--up-accent), var(--up-accent-deep));
	color: #fff;
	font-family: var(--up-mono);
	font-size: 0.92rem;
	letter-spacing: 0.02em;
}
@media ( max-width: 780px ) {
	.up-team__inner { grid-template-columns: 1fr; }
	.up-face { width: 68px; height: 68px; }
}

/* Industry stat callout. */
.up-statline {
	display: flex;
	align-items: baseline;
	gap: 1.1rem;
	max-width: 640px;
	margin-top: 2.2rem;
	padding: 1.4rem 1.6rem;
	background: var(--up-porcelain);
	border-left: 3px solid var(--up-accent);
	border-radius: 0 12px 12px 0;
}
.up-statline b { font-family: var(--up-display); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--up-accent-deep); }
.up-statline span { color: var(--up-text-soft); font-size: 0.95rem; line-height: 1.5; }

/* Narrative prose block (About page and similar). */
.up-prose { max-width: 68ch; display: grid; gap: 1.1rem; }
.up-prose p { margin: 0; font-size: 1.05rem; line-height: 1.75; }
.up-dark .up-prose p { color: var(--up-text-inv-soft); }

/* Explore link inside a solution card (sits below the tag chips). */
.up-layer__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 1rem;
	font-family: var(--up-mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: gap 0.18s var(--up-ease);
}
.up-layer__link:hover { gap: 0.7rem; }

@media (max-width: 820px) {
	.up-layer { grid-template-columns: 1fr; gap: 1rem; }
	.up-layer__tier { display: flex; align-items: baseline; gap: 0.6rem; }
	.up-layer__tier b { font-size: 1.15rem; margin: 0; }
}

/* ==========================================================================
   8. Cards, grids, proof
   ========================================================================== */

.up-grid { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); }
.up-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.up-grid--3 { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.up-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.up-card {
	background: #fff;
	border: 1px solid var(--up-line);
	border-radius: var(--up-radius);
	padding: clamp(1.5rem, 2.6vw, 2.1rem);
	transition: border-color 0.2s var(--up-ease), transform 0.2s var(--up-ease), box-shadow 0.2s var(--up-ease);
	height: 100%;
}
.up-card:hover { border-color: var(--up-ink); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(12, 26, 31, 0.08); }
.up-card h3 { font-size: var(--up-step-1); margin-bottom: 0.5rem; }
.up-card p { color: var(--up-text-soft); font-size: 0.98rem; margin: 0; }
.up-card__idx {
	font-family: var(--up-mono);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--up-accent-deep);
	display: block;
	margin-bottom: 1rem;
}
.up-card__icon { width: 34px; height: 34px; margin-bottom: 1.1rem; color: var(--up-accent-deep); }

/* Process steps — genuinely sequential, so they are numbered */
.up-steps { counter-reset: up-step; display: grid; gap: 0; }
.up-step {
	counter-increment: up-step;
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr);
	gap: clamp(1rem, 3vw, 2rem);
	padding: clamp(1.5rem, 3vw, 2.2rem) 0;
	border-top: 1px solid var(--up-line);
}
.up-step:last-child { border-bottom: 1px solid var(--up-line); }
.up-step::before {
	content: counter(up-step, decimal-leading-zero);
	font-family: var(--up-mono);
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	color: var(--up-accent-deep);
	padding-top: 0.35rem;
}
.up-step h3 { font-size: var(--up-step-1); margin-bottom: 0.35rem; }
.up-step p { color: var(--up-text-soft); margin: 0; max-width: 66ch; }

/* Metric band */
.up-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	border: 1px solid var(--up-hair);
	border-right: 0;
	border-bottom: 0;
	border-radius: var(--up-radius);
	overflow: hidden;
}
.up-metric { padding: clamp(1.5rem, 3vw, 2.2rem); border-right: 1px solid var(--up-hair); border-bottom: 1px solid var(--up-hair); }
.up-metric b {
	display: block;
	font-family: var(--up-display);
	font-size: clamp(2.1rem, 4vw, 3.1rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1;
	color: var(--up-accent);
}
.up-metric span {
	display: block;
	font-family: var(--up-mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--up-text-inv-soft);
	margin-top: 0.7rem;
}

/* Industries */
.up-chiplist { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; margin: 0; }
.up-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--up-mono);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 1px solid var(--up-line);
	background: #fff;
	border-radius: 100px;
	padding: 0.5rem 1rem;
	color: var(--up-text-soft);
}

/* Testimonials */
.up-quote {
	background: #fff;
	border: 1px solid var(--up-line);
	border-radius: var(--up-radius);
	padding: clamp(1.6rem, 3vw, 2.2rem);
	height: 100%;
	display: flex;
	flex-direction: column;
}
.up-quote__mark { font-family: var(--up-display); font-size: 2.6rem; line-height: 0.6; color: var(--up-accent); margin-bottom: 1rem; }
.up-quote p { font-size: 1.06rem; line-height: 1.55; margin-bottom: 1.5rem; }
.up-quote__by { margin-top: auto; display: flex; align-items: center; gap: 0.85rem; padding-top: 1.1rem; border-top: 1px solid var(--up-line); }
.up-quote__by img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; }
.up-quote__name { font-weight: 600; font-size: 0.95rem; line-height: 1.25; }
.up-quote__role { font-family: var(--up-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--up-text-soft); text-transform: uppercase; }

/* Insights cards */
.up-insights__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}
.up-insights__cta { flex: none; padding-bottom: 0.35rem; }

.up-note {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--up-line);
	border-radius: var(--up-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	height: 100%;
	transition: border-color 0.2s var(--up-ease), transform 0.2s var(--up-ease), box-shadow 0.2s var(--up-ease);
}
.up-note:hover, .up-note:focus-visible {
	border-color: var(--up-ink);
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(12, 26, 31, 0.08);
	color: inherit;
}

.up-note__media {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--up-ink);
	overflow: hidden;
}
.up-note__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--up-ease); }
.up-note:hover .up-note__media img { transform: scale(1.04); }

/* Without a featured image, fall back to the month set in mono rather than a
   grey placeholder box. */
.up-note__blank {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-family: var(--up-mono);
	font-size: 1.6rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--up-hair-2);
}

.up-note__body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.25rem, 2.4vw, 1.7rem); }
.up-note__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	font-family: var(--up-mono);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--up-text-soft);
	margin-bottom: 0.85rem;
}
.up-note__title {
	display: block;
	font-family: var(--up-display);
	font-size: var(--up-step-1);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin-bottom: 0.55rem;
}
.up-note__excerpt { display: block; color: var(--up-text-soft); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.25rem; }
.up-note__go {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	font-family: var(--up-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--up-accent-deep);
}
.up-note:hover .up-btn__arrow { transform: translateX(3px); }

/* Logo strip */
.up-logos { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
.up-logos img { max-height: 34px; width: auto; opacity: 0.55; filter: grayscale(1); transition: opacity 0.2s, filter 0.2s; }
.up-logos img:hover { opacity: 1; filter: none; }

/* CTA band */
.up-cta {
	background: var(--up-ink);
	color: var(--up-text-inv);
	border-radius: var(--up-radius);
	padding: clamp(2.25rem, 5vw, 3.75rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	position: relative;
	overflow: hidden;
}
.up-cta::after {
	content: "";
	position: absolute;
	right: -60px; top: -60px;
	width: 260px; height: 260px;
	border: 1px solid var(--up-hair);
	border-radius: 50%;
	pointer-events: none;
}
.up-cta h2 { font-size: var(--up-step-3); margin-bottom: 0.5rem; }
.up-cta p { color: var(--up-text-inv-soft); margin: 0; max-width: 52ch; }
@media (max-width: 780px) { .up-cta { grid-template-columns: 1fr; } }

/* ==========================================================================
   9. Page headers, blog, single
   ========================================================================== */

.up-pagehead {
	background: var(--up-ink);
	color: var(--up-text-inv);
	padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem);
	border-bottom: 1px solid var(--up-hair);
}
.up-pagehead h1 { font-size: var(--up-step-4); margin-bottom: 0.6rem; }
.up-pagehead .up-lede { color: var(--up-text-inv-soft); }

.up-crumbs { font-family: var(--up-mono); font-size: var(--up-step--1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--up-text-inv-soft); margin-bottom: 1.2rem; }
.up-crumbs a { color: var(--up-text-inv-soft); text-decoration: none; }
.up-crumbs a:hover { color: var(--up-accent); }
.up-crumbs span { opacity: 0.45; margin: 0 0.45rem; }

.up-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: clamp(2rem, 5vw, 4rem); }
.up-layout--full { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .up-layout { grid-template-columns: 1fr; } }

.up-post { border-bottom: 1px solid var(--up-line); padding-bottom: 2.25rem; margin-bottom: 2.25rem; }
.up-post:last-child { border-bottom: 0; }
.up-post__thumb { display: block; margin-bottom: 1.25rem; border-radius: var(--up-radius); overflow: hidden; }
.up-post__thumb img { width: 100%; transition: transform 0.5s var(--up-ease); }
.up-post__thumb:hover img { transform: scale(1.03); }
.up-post__meta { font-family: var(--up-mono); font-size: var(--up-step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--up-text-soft); margin-bottom: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }
.up-post__title { font-size: var(--up-step-2); margin-bottom: 0.55rem; }
.up-post__title a { color: inherit; text-decoration: none; }
.up-post__title a:hover { color: var(--up-accent-deep); }
.up-post__excerpt { color: var(--up-text-soft); margin-bottom: 1rem; }

.up-entry > * { margin-bottom: 1.35rem; }
.up-entry h2 { font-size: var(--up-step-2); margin-top: 2.5rem; }
.up-entry h3 { font-size: var(--up-step-1); margin-top: 2rem; }
.up-entry img { border-radius: var(--up-radius); }
.up-entry ul, .up-entry ol { padding-left: 1.35rem; }
.up-entry li { margin-bottom: 0.4rem; }
.up-entry figcaption { font-family: var(--up-mono); font-size: var(--up-step--1); color: var(--up-text-soft); margin-top: 0.6rem; }

.up-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 2rem; }
.up-tags a {
	font-family: var(--up-mono); font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase;
	border: 1px solid var(--up-line); border-radius: 100px; padding: 0.32rem 0.8rem; text-decoration: none; color: var(--up-text-soft);
}
.up-tags a:hover { border-color: var(--up-ink); color: var(--up-text); }

.up-sharebar { display: flex; gap: 0.5rem; align-items: center; margin-top: 1.5rem; }

.up-pager { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 3rem; }
.up-pager .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 0.75rem;
	border: 1px solid var(--up-line); border-radius: var(--up-radius);
	font-family: var(--up-mono); font-size: 0.85rem; text-decoration: none; color: var(--up-text);
}
.up-pager .page-numbers:hover { border-color: var(--up-ink); }
.up-pager .page-numbers.current { background: var(--up-ink); color: var(--up-text-inv); border-color: var(--up-ink); }

.up-postnav { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 3rem; }
.up-postnav a {
	display: block; padding: 1.25rem 1.4rem; border: 1px solid var(--up-line); border-radius: var(--up-radius);
	text-decoration: none; color: var(--up-text);
}
.up-postnav a:hover { border-color: var(--up-ink); }
.up-postnav span { display: block; font-family: var(--up-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--up-text-soft); margin-bottom: 0.45rem; }
.up-postnav strong { font-family: var(--up-display); font-size: 1.05rem; font-weight: 600; line-height: 1.25; }

/* Sidebar / widgets */
.up-widget { margin-bottom: 2.25rem; }
.up-widget__title {
	font-family: var(--up-mono); font-size: var(--up-step--1); letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--up-text-soft); padding-bottom: 0.7rem; border-bottom: 1px solid var(--up-line); margin-bottom: 1.1rem;
}
.up-widget ul { list-style: none; padding: 0; margin: 0; }
.up-widget li { padding: 0.45rem 0; border-bottom: 1px solid var(--up-line); }
.up-widget li:last-child { border-bottom: 0; }
.up-widget a { color: var(--up-text); text-decoration: none; }
.up-widget a:hover { color: var(--up-accent-deep); }

/* Forms */
input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="search"], input[type="password"], input[type="number"], textarea, select {
	width: 100%;
	font-family: inherit;
	font-size: 0.98rem;
	color: var(--up-text);
	background: #fff;
	border: 1px solid var(--up-line);
	border-radius: var(--up-radius);
	padding: 0.75rem 0.9rem;
	transition: border-color 0.18s var(--up-ease);
}
textarea { min-height: 150px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--up-accent); outline: none; box-shadow: 0 0 0 3px var(--up-accent-soft); }
label { display: block; font-family: var(--up-mono); font-size: var(--up-step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--up-text-soft); margin-bottom: 0.4rem; }
input[type="submit"], button[type="submit"] {
	width: auto; background: var(--up-ink); color: var(--up-text-inv); border: 0; cursor: pointer;
	font-family: var(--up-mono); font-size: var(--up-step--1); letter-spacing: 0.08em; text-transform: uppercase;
	padding: 0.9rem 1.6rem; border-radius: var(--up-radius); transition: background 0.18s var(--up-ease);
}
input[type="submit"]:hover, button[type="submit"]:hover { background: var(--up-accent); color: var(--up-ink); }

/* Native theme contact form (no plugin). */
.up-formwrap { max-width: 640px; margin: 2rem 0; padding: clamp(1.5rem, 3vw, 2.25rem); }
.up-formwrap__title { color: var(--up-text-inv); font-size: var(--up-step-1); margin: 0 0 0.5rem; }
.up-formwrap__intro { color: var(--up-text-inv-soft); margin: 0 0 1.5rem; line-height: 1.6; }
.up-form { display: grid; gap: 1.1rem; }
.up-form .up-field { display: grid; gap: 0; }
.up-form .up-btn { justify-self: start; margin-top: 0.4rem; }
.up-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.up-formnote { margin: 0 0 1.25rem; padding: 0.85rem 1.1rem; border-radius: var(--up-radius); font-size: 0.92rem; line-height: 1.5; }
.up-formnote--ok { background: rgba(45, 190, 96, 0.12); border: 1px solid rgba(45, 190, 96, 0.4); color: #d7f4e2; }
.up-formnote--err { background: rgba(226, 74, 74, 0.12); border: 1px solid rgba(226, 74, 74, 0.4); color: #f6d9d9; }

/* Contact — building photo beside the map. */
.up-officegrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1rem, 2vw, 1.5rem);
	margin-top: 2rem;
}
.up-officephoto {
	position: relative;
	margin: 0;
	height: 460px;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--up-line);
}
.up-officephoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.up-officegrid .up-map { margin-top: 0; height: 460px; }
@media ( max-width: 820px ) {
	.up-officegrid { grid-template-columns: 1fr; }
	.up-officephoto { height: 300px; }
	.up-officegrid .up-map { height: 340px; }
	.up-officegrid .up-map iframe { height: 340px; }
}

/* Office map on the Contact page. */
.up-map {
	margin-top: 2rem;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--up-line);
	background: var(--up-porcelain);
	line-height: 0;
}
.up-map iframe { width: 100%; height: 460px; border: 0; display: block; }
@media (max-width: 640px) { .up-map iframe { height: 360px; } }

/* Forms sitting on a dark surface, e.g. the contact panel or the 404 search.
   Third-party form plugins render their own markup here, so these rules target
   the elements rather than any plugin class. */
.up-dark label,
.up-console label { color: var(--up-text-inv-soft); }

.up-dark input[type="text"], .up-dark input[type="email"], .up-dark input[type="url"],
.up-dark input[type="tel"], .up-dark input[type="search"], .up-dark input[type="number"],
.up-dark textarea, .up-dark select,
.up-console input[type="text"], .up-console input[type="email"], .up-console input[type="url"],
.up-console input[type="tel"], .up-console input[type="search"], .up-console input[type="number"],
.up-console textarea, .up-console select {
	background: rgba(255, 255, 255, 0.045);
	border-color: var(--up-hair-2);
	color: var(--up-text-inv);
}
.up-dark ::placeholder, .up-console ::placeholder { color: var(--up-text-inv-soft); opacity: 1; }

.up-dark input[type="submit"], .up-dark button[type="submit"],
.up-console input[type="submit"], .up-console button[type="submit"] {
	background: var(--up-accent);
	color: #fff;
}
.up-dark input[type="submit"]:hover, .up-dark button[type="submit"]:hover,
.up-console input[type="submit"]:hover, .up-console button[type="submit"]:hover { background: var(--up-accent-deep); color: #fff; }

/* Comments */
.up-comments { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--up-line); }
.comment-list { list-style: none; padding: 0; margin: 0 0 2.5rem; }
.comment-list ul.children { list-style: none; padding-left: clamp(1rem, 4vw, 2.5rem); }
.comment-body { padding: 1.35rem 0; border-bottom: 1px solid var(--up-line); }
.comment-author { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.comment-author img { border-radius: 50%; }
.comment-metadata { font-family: var(--up-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--up-text-soft); }
.comment-metadata a { color: inherit; text-decoration: none; }
.comment-reply-link { font-family: var(--up-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }

/* 404 / no results */
.up-blank { text-align: center; padding-block: clamp(4rem, 10vw, 8rem); }
.up-blank__code { font-family: var(--up-mono); font-size: clamp(3rem, 12vw, 7rem); letter-spacing: -0.03em; color: var(--up-accent); line-height: 1; margin-bottom: 1rem; }

/* ==========================================================================
   10. Footer
   ========================================================================== */

.up-footer { background: var(--up-ink); color: var(--up-text-inv-soft); }
.up-footer a { color: var(--up-text-inv-soft); text-decoration: none; }
.up-footer a:hover { color: var(--up-accent); }
.up-footer__top {
	display: grid;
	/* brand | 3 nav columns | wider "Get in touch" column for the address */
	grid-template-columns: minmax(0, 1.05fr) repeat(3, minmax(0, 0.9fr)) minmax(0, 1.4fr);
	gap: clamp(1.5rem, 2.6vw, 2.75rem);
	padding-block: clamp(3rem, 6vw, 4.5rem);
}
/* The contact column reads as an address block, not a link list. */
.up-footer__top > div:last-child li { line-height: 1.5; }
@media (max-width: 1120px) { .up-footer__top { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
/* Column headings stay on one line; nav labels are kept short enough to fit without wrapping. */
.up-footer__title { white-space: nowrap; }
.up-footer__title {
	font-family: var(--up-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--up-text-inv); margin-bottom: 1.1rem;
}
.up-footer ul { list-style: none; padding: 0; margin: 0; }
.up-footer li { margin-bottom: 0.55rem; font-size: 0.95rem; }
.up-footer__bottom {
	border-top: 1px solid var(--up-hair);
	padding-block: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	font-family: var(--up-mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
}
.up-social { display: flex; gap: 0.5rem; }
.up-social a {
	width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--up-hair); border-radius: var(--up-radius);
	transition: border-color 0.18s var(--up-ease), color 0.18s var(--up-ease);
}
.up-social a:hover { border-color: var(--up-accent); color: var(--up-accent); }
.up-social svg { width: 17px; height: 17px; }

.up-status {
	display: inline-flex; align-items: center; gap: 0.5rem;
	font-family: var(--up-mono); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase;
	white-space: nowrap;
	color: var(--up-ok);
	padding: 0.42rem 0.85rem 0.42rem 0.72rem;
	border: 1px solid rgba(78, 216, 160, 0.28);
	border-radius: 100px;
	background: rgba(78, 216, 160, 0.06);
	transition: border-color 0.2s var(--up-ease), background-color 0.2s var(--up-ease);
	text-decoration: none;
}
.up-status:hover { color: var(--up-ok); border-color: rgba(78, 216, 160, 0.5); background: rgba(78, 216, 160, 0.1); }

/* ==========================================================================
   11. Motion
   ========================================================================== */

.up-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--up-ease), transform 0.6s var(--up-ease); }
.up-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	.up-reveal { opacity: 1; transform: none; }
	.up-console__row, .up-console__stat { opacity: 1; }
}

/* ==========================================================================
   12. WordPress core classes
   ========================================================================== */

.alignleft { float: left; margin: 0.4rem 1.75rem 1.25rem 0; }
.alignright { float: right; margin: 0.4rem 0 1.25rem 1.75rem; }
.aligncenter { margin-inline: auto; display: block; }
.alignwide { width: min(1140px, 92vw); margin-inline: auto; }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.wp-caption { max-width: 100%; }
.wp-caption-text, .gallery-caption { font-family: var(--up-mono); font-size: var(--up-step--1); color: var(--up-text-soft); }
.sticky .up-post__title::before { content: "★ "; color: var(--up-accent); }
.bypostauthor > .comment-body { border-left: 2px solid var(--up-accent); padding-left: 1rem; }
.up-entry .wp-block-image { margin-block: 2rem; }
.up-entry .wp-block-button__link { border-radius: var(--up-radius); font-family: var(--up-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; }

/* Utilities */
.up-mono { font-family: var(--up-mono); }
.up-accent { color: var(--up-accent); }
.up-mt-0 { margin-top: 0; }
.up-center { text-align: center; margin-inline: auto; }

/* ==========================================================================
   13. Page template helpers
   ========================================================================== */

.up-full { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.up-full > * { max-width: min(760px, calc(100vw - 2 * var(--up-gut))); margin-inline: auto; }
.up-full > .alignwide { max-width: min(1140px, calc(100vw - 2 * var(--up-gut))); }
.up-full > .alignfull { max-width: none; width: 100%; margin-inline: 0; }

.up-sidebar { position: sticky; top: 96px; align-self: start; }
@media (max-width: 900px) { .up-sidebar { position: static; } }

.up-caret { font-size: 0.68em; opacity: 0.6; }

/* Service chips reused on the single service header, which sits on a dark band */
.up-pagehead .up-layer__tags li { color: var(--up-text-inv-soft); border-color: var(--up-hair); }

/* ---- Products section — category tiles, brand names as text (no logos) ---- */
.up-products__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 1rem;
	margin-top: 2.2rem;
}
.up-products__card {
	display: block;
	padding: 1.3rem 1.4rem;
	background: #fff;
	border: 1px solid var(--up-line);
	border-radius: 8px;
	text-decoration: none;
	transition: transform 0.18s var(--up-ease), border-color 0.18s var(--up-ease), box-shadow 0.18s var(--up-ease);
}
.up-products__card:hover {
	transform: translateY(-3px);
	border-color: var(--up-accent);
	box-shadow: 0 18px 40px rgba(12, 26, 31, 0.10);
}
.up-products__cat {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6rem;
	margin-bottom: 0.6rem;
}
.up-products__name {
	font-family: var(--up-display);
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: -0.01em;
	color: var(--up-text);
}
.up-products__count {
	font-family: var(--up-mono);
	font-size: 0.66rem;
	letter-spacing: 0.05em;
	color: var(--up-accent);
	border: 1px solid var(--up-line);
	border-radius: 20px;
	padding: 0.12rem 0.55rem;
	white-space: nowrap;
	flex: none;
}
.up-products__brands {
	display: block;
	font-family: var(--up-mono);
	font-size: 0.78rem;
	line-height: 1.7;
	color: var(--up-text-soft);
}
.up-products__foot {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-top: 2.2rem;
}
/* Ghost button sits on this light section — the default ghost is styled for dark
   bands (light text), so give it dark text + a visible border here. */
.up-products .up-btn--ghost { color: var(--up-text); border-color: var(--up-line); }
.up-products .up-btn--ghost:hover { color: var(--up-accent); border-color: var(--up-accent); }

/* ---- Case-study cards (Selected work on the AI & Automation page) ---- */
.up-cases {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1rem;
	margin-top: 2.2rem;
}
.up-case {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--up-line);
	border-radius: 10px;
	padding: 1.5rem;
	transition: transform 0.18s var(--up-ease), border-color 0.18s var(--up-ease), box-shadow 0.18s var(--up-ease);
}
.up-case:hover {
	transform: translateY(-3px);
	border-color: var(--up-accent);
	box-shadow: 0 18px 40px rgba(12, 26, 31, 0.08);
}
.up-case__cat {
	align-self: flex-start;
	font-family: var(--up-mono);
	font-size: 0.64rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--up-accent-deep);
	background: rgba(27, 137, 226, 0.08);
	border-radius: 20px;
	padding: 0.3rem 0.7rem;
	margin-bottom: 0.9rem;
}
.up-case__name {
	font-family: var(--up-display);
	font-weight: 700;
	font-size: 1.2rem;
	letter-spacing: -0.01em;
	color: var(--up-text);
	margin: 0 0 0.5rem;
}
.up-case__desc {
	color: var(--up-text-soft);
	font-size: 0.9rem;
	line-height: 1.55;
	margin: 0 0 1.1rem;
	flex: 1;
}
.up-case__facts {
	font-family: var(--up-mono);
	font-size: 0.72rem;
	letter-spacing: 0.02em;
	color: var(--up-text-soft);
	border-top: 1px solid var(--up-line);
	padding-top: 0.85rem;
}
/* Card is a link to the detail page. */
a.up-case { text-decoration: none; color: inherit; }
.up-case__name { display: block; }
.up-case__more {
	display: inline-flex;
	gap: 0.35rem;
	margin-top: 0.9rem;
	font-family: var(--up-mono);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--up-accent-deep);
	transition: gap 0.18s var(--up-ease);
}
.up-case:hover .up-case__more { gap: 0.6rem; color: var(--up-accent); }

/* ---- Case-study detail page ---- */
.up-pagehead__cat {
	font-family: var(--up-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--up-accent);
	margin: 0 0 0.4rem;
}
.up-case-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 1.8rem 0 0;
	font-family: var(--up-mono);
	font-size: 0.75rem;
	letter-spacing: 0.03em;
	color: var(--up-text-soft);
}
.up-case-body { max-width: 760px; }
.up-case-block { margin-bottom: 2.6rem; }
.up-case-block:last-child { margin-bottom: 0; }
.up-case-block h2 { font-size: clamp(1.4rem, 2.5vw, 1.85rem); margin-bottom: 0.9rem; }
.up-case-block > p { color: var(--up-text-soft); line-height: 1.75; margin: 0; }
.up-case-list { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: 0.65rem; }
.up-case-list li { position: relative; padding-left: 1.6rem; color: var(--up-text-soft); line-height: 1.55; }
.up-case-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--up-accent);
}
.up-case-list--check li::before {
	content: "✓";
	top: 0;
	width: auto;
	height: auto;
	background: none;
	color: var(--up-accent);
	font-weight: 700;
}
.up-case-note {
	margin: 1.6rem 0 0;
	padding: 1rem 1.2rem;
	background: var(--up-porcelain);
	border-left: 3px solid var(--up-accent);
	border-radius: 0 8px 8px 0;
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--up-text-soft);
}
.up-case-tech { margin-top: 1.3rem; }

/* ---- Product category filter bar (pill chips, active = brand blue) ---- */
.up-prodfilter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.6rem;
}
.up-prodfilter__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.95rem;
	border: 1px solid var(--up-line);
	border-radius: 30px;
	background: #fff;
	color: var(--up-text);
	font-family: var(--up-mono);
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: border-color 0.18s var(--up-ease), background-color 0.18s var(--up-ease), color 0.18s var(--up-ease);
}
.up-prodfilter__chip:hover { border-color: var(--up-accent); color: var(--up-accent); }
.up-prodfilter__chip.is-active { background: var(--up-accent); border-color: var(--up-accent); color: #fff; }
.up-prodfilter__n { font-size: 0.68rem; opacity: 0.65; }
.up-prodfilter__chip.is-active .up-prodfilter__n { opacity: 0.9; }

/* ---- WooCommerce archive (shop / product category) — uptime-styled text grid ---- */
.up-section ul.products {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
	gap: 1.25rem;
}
.up-section ul.products::before,
.up-section ul.products::after { content: none; display: none; }
.up-section ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	padding: 0;
}
.up-prod__link {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.5rem;
	background: #fff;
	border: 1px solid var(--up-line);
	border-radius: 14px;
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.2s var(--up-ease), border-color 0.2s var(--up-ease), box-shadow 0.2s var(--up-ease);
}
/* Accent hairline that wipes in along the top on hover. */
.up-prod__link::before {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	height: 3px;
	width: 100%;
	background: linear-gradient(90deg, var(--up-accent), var(--up-accent-deep));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s var(--up-ease);
}
.up-prod__link:hover {
	transform: translateY(-4px);
	border-color: var(--up-accent);
	box-shadow: 0 26px 50px -28px rgba(12, 26, 31, 0.35);
}
.up-prod__link:hover::before { transform: scaleX(1); }
.up-prod__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	margin-bottom: 1.1rem;
}
.up-prod__badge {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--up-accent-soft), #fff);
	border: 1px solid var(--up-line);
	font-family: var(--up-display);
	font-weight: 700;
	font-size: 1.02rem;
	letter-spacing: -0.02em;
	color: var(--up-accent-deep);
	transition: background 0.2s var(--up-ease), color 0.2s var(--up-ease), border-color 0.2s var(--up-ease);
}
.up-prod__link:hover .up-prod__badge {
	background: linear-gradient(135deg, var(--up-accent), var(--up-accent-deep));
	border-color: transparent;
	color: #fff;
}
.up-prod__cat {
	font-family: var(--up-mono);
	font-size: 0.62rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--up-text-soft);
	background: var(--up-porcelain);
	border-radius: 100px;
	padding: 0.3rem 0.7rem;
	text-align: right;
}
.up-prod__name {
	font-family: var(--up-display);
	font-weight: 700;
	font-size: 1.12rem;
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: var(--up-text);
	margin: 0 0 0.5rem;
}
.up-prod__desc {
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--up-text-soft);
	margin: 0 0 1.2rem;
	flex: 1;
}
.up-prod__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	font-family: var(--up-mono);
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--up-accent-deep);
	transition: gap 0.18s var(--up-ease);
}
.up-prod__link:hover .up-prod__cta { gap: 0.7rem; color: var(--up-accent); }

/* ---- Single product — premium, quote-based ---- */
.up-single {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
.up-single__aside { position: sticky; top: 100px; display: grid; gap: 1.5rem; }
.up-single__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 120px;
	border-radius: 24px;
	background: linear-gradient(135deg, var(--up-accent-soft), #fff);
	border: 1px solid var(--up-line);
	font-family: var(--up-display);
	font-weight: 700;
	font-size: 2.8rem;
	letter-spacing: -0.03em;
	color: var(--up-accent-deep);
}
.up-single__panel {
	padding: 1.5rem;
	border: 1px solid var(--up-line);
	border-radius: 14px;
	background: var(--up-porcelain);
}
.up-single__panel-h { font-family: var(--up-display); font-weight: 700; font-size: 1.05rem; margin: 0 0 0.4rem; color: var(--up-text); }
.up-single__panel-t { font-size: 0.88rem; line-height: 1.6; color: var(--up-text-soft); margin: 0 0 1.2rem; }
.up-single__actions { display: grid; gap: 0.6rem; }
.up-single__actions .up-btn { width: 100%; justify-content: center; }
.up-single__lede { font-size: var(--up-step-1); line-height: 1.5; color: var(--up-text); margin: 0 0 1.5rem; }
.up-single__body { color: var(--up-text-soft); line-height: 1.75; max-width: 68ch; }
.up-single__body > :first-child { margin-top: 0; }
.up-single__body p { margin: 0 0 1rem; }
.up-single__body h2, .up-single__body h3, .up-single__body h4 { color: var(--up-text); margin: 1.8rem 0 0.6rem; }
.up-single__body ul, .up-single__body ol { margin: 0 0 1rem 1.2rem; }
.up-single__body li { margin-bottom: 0.4rem; }
.up-single__body a { color: var(--up-accent-deep); }
.up-single__body img { max-width: 100%; height: auto; border-radius: 10px; }
.up-single__related { margin-top: clamp(3rem, 6vw, 5rem); }
@media (max-width: 820px) {
	.up-single { grid-template-columns: 1fr; }
	.up-single__aside { position: static; }
}
/* Result count / ordering / pagination */
.up-section .woocommerce-result-count { float: none; font-family: var(--up-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--up-text-soft); margin: 0 0 0.75rem; }
.up-section .woocommerce-ordering { float: none; margin: 0 0 0.75rem; }
.up-section .woocommerce-ordering select { font-family: var(--up-body); padding: 0.5rem 0.7rem; border: 1px solid var(--up-line); border-radius: 6px; background: #fff; color: var(--up-text); }
.woocommerce-pagination { margin-top: 2rem; }
.woocommerce-pagination ul { list-style: none; display: flex; gap: 0.4rem; padding: 0; margin: 0; flex-wrap: wrap; border: 0 !important; }
.woocommerce-pagination ul li { margin: 0; border: 0 !important; }
.woocommerce-pagination ul li a, .woocommerce-pagination ul li span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 0.6rem;
	border: 1px solid var(--up-line) !important; border-radius: 6px;
	font-family: var(--up-mono); font-size: 0.8rem; text-decoration: none;
	color: var(--up-text); background: #fff;
}
.woocommerce-pagination ul li a:hover { border-color: var(--up-accent) !important; color: var(--up-accent); }
.woocommerce-pagination ul li span.current { background: var(--up-accent); color: #fff; border-color: var(--up-accent) !important; }

/* ---- Single product: the vendor logo sits in a dark well, so white or
   transparent logos stay visible without needing a dark image file. ---- */
.single-product .woocommerce-product-gallery {
	background: var(--up-ink);
	border: 1px solid var(--up-hair);
	border-radius: 10px;
	padding: 2.4rem;
	box-sizing: border-box;
}
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image a { margin: 0; }
.single-product .woocommerce-product-gallery img,
.single-product .wp-post-image {
	display: block;
	width: auto !important;
	max-width: 100%;
	max-height: 240px;
	margin: 0 auto;
	object-fit: contain;
}

/* ---- Internal-link vendor strip (service pages) + product->service link ---- */
.up-vendorgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.9rem; margin-top: 1.6rem; }
.up-vendor { display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--up-line); border-radius: 12px; text-decoration: none; transition: transform 0.2s var(--up-ease), border-color 0.2s var(--up-ease), box-shadow 0.2s var(--up-ease); }
.up-vendor:hover { transform: translateY(-3px); border-color: var(--up-accent); box-shadow: 0 20px 40px -28px rgba(12, 26, 31, 0.35); }
.up-vendor__name { font-family: var(--up-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; color: var(--up-text); }
.up-vendor__cat { font-family: var(--up-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--up-accent-deep); }
.up-vendorgrid__more { margin-top: 1.4rem; font-family: var(--up-mono); font-size: 0.82rem; }
.up-vendorgrid__more a { color: var(--up-accent-deep); text-decoration: none; font-weight: 600; }
.up-vendorgrid__more a:hover { text-decoration: underline; }
.up-single__svc { margin-top: 0.9rem; font-size: 0.85rem; color: var(--up-text-soft); }
.up-single__svc a { color: var(--up-accent-deep); font-weight: 600; text-decoration: none; }
.up-single__svc a:hover { text-decoration: underline; }