/* =========================================================================
   phpp.eu — light design system  v3 (complete component coverage)
   Loaded last in includes/header.php. Delete that <link> to revert.
   No page file is modified.

   Covers every phpp-* class present in the markup (70 of them), not just
   the ones that happened to look wrong in a screenshot. Page <style>
   blocks load AFTER this file, so !important is structural.
   ========================================================================= */

:root {
	--pn-bg:        #F5F7FA;
	--pn-surface:   #FFFFFF;
	--pn-sunken:    #FAFBFD;

	--pn-ink:       #0B1220;
	--pn-body:      #2E3B52;
	--pn-muted:     #64748B;

	--pn-line:      #DDE3EC;
	--pn-line-soft: #EBEFF5;
	--pn-line-strong:#C7D0DD;

	--pn-accent:      #0D9488;
	--pn-accent-deep: #0B7A70;
	--pn-accent-tint: #EAF9F6;
	--pn-accent-line: rgba(13,148,136,0.28);

	--pn-danger:  #B91C1C;
	--pn-warn:    #B45309;
	--pn-success: #047857;

	--pn-r-sm: 6px;
	--pn-r:    10px;
	--pn-r-lg: 14px;

	--pn-shadow:       0 1px 2px rgba(11,18,32,0.04);
	--pn-shadow-lift:  0 1px 2px rgba(11,18,32,0.05), 0 8px 24px rgba(11,18,32,0.07);
}

/* 1 — CANVAS ------------------------------------------------------------ */
html, body, #wrapper { background-color: var(--pn-bg) !important; }
body { color: var(--pn-body) !important; -webkit-font-smoothing: antialiased; }
p, li { color: var(--pn-body) !important; }
h1, h2, h3, h4, h5, h6 { color: var(--pn-ink) !important; letter-spacing: -0.012em !important; }
h1 { letter-spacing: -0.022em !important; }
h2 { letter-spacing: -0.018em !important; }
strong, b { color: var(--pn-ink) !important; }
small, .small { color: var(--pn-muted) !important; }

.text-white, .text-white h1, .text-white h2, .text-white h3, .text-white h4,
h1.text-white, h2.text-white, h3.text-white, h4.text-white,
h5.text-white, h6.text-white { color: var(--pn-ink) !important; }
.text-white-50 { color: var(--pn-muted) !important; opacity: 1 !important; }
.text-dark { color: var(--pn-ink) !important; }

a:not(.button):not(.btn):not(.menu-link):not([class*="phpp-btn"]):not([class*="cookie-btn"]) {
	color: var(--pn-accent) !important; text-decoration: none !important;
}
a:not(.button):not(.btn):not(.menu-link):hover { color: var(--pn-accent-deep) !important; }

/* 2 — CONTENT MUST NOT DEPEND ON JS ------------------------------------- */
/* .phpp-reveal sets opacity:0 on 790 elements and waits for an
   IntersectionObserver. If it never fires the content is gone with no
   recovery. Not a trade worth making on a site built to be read. */
.phpp-reveal, [class*="phpp-reveal-delay"] {
	opacity: 1 !important; transform: none !important; transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* 3 — HEADER ------------------------------------------------------------ */
#header.phpp-header, #header.phpp-header #header-wrap,
#header.phpp-header #header-wrap::before, #header.phpp-header #header-wrap::after {
	background: var(--pn-surface) !important;
}
#header.phpp-header { border-bottom: 1px solid var(--pn-line) !important; }
body.phpp-scrolled #header.phpp-header { box-shadow: var(--pn-shadow-lift) !important; }
#header #logo a, #header #logo a span:first-child { color: var(--pn-ink) !important; }
#header #logo span:last-child, .phpp-tagline {
	color: var(--pn-muted) !important; opacity: 1 !important; font-weight: 500 !important;
}
.primary-menu .menu-link, .primary-menu .menu-link div {
	color: var(--pn-body) !important; font-weight: 600 !important;
	font-size: .82rem !important; letter-spacing: .04em !important; text-transform: uppercase !important;
}
.primary-menu .menu-link:hover div { color: var(--pn-accent) !important; }
.primary-menu .menu-item.current > .menu-link div { color: var(--pn-accent) !important; font-weight: 700 !important; }
#primary-menu-trigger .svg-trigger path { stroke: var(--pn-ink) !important; }
@media (max-width:1050px){
	.primary-menu { background: var(--pn-surface) !important; border-top:1px solid var(--pn-line) !important; box-shadow: var(--pn-shadow-lift) !important; }
	.primary-menu .menu-link { border-bottom:1px solid var(--pn-line-soft) !important; }
}
@media (max-width:1199.98px){
	#header.transparent-header #header-wrap, #header.phpp-header #header-wrap { background: var(--pn-surface) !important; }
}

/* 4 — HERO, SECTIONS, DIVIDERS ------------------------------------------ */
.phpp-hero {
	background:
		radial-gradient(760px 380px at 8% 0%, var(--pn-accent-tint), transparent 60%),
		linear-gradient(180deg,#FFFFFF 0%, var(--pn-bg) 100%) !important;
	border-bottom: 1px solid var(--pn-line-soft) !important;
}
.phpp-section { background: transparent !important; border-top: 1px solid var(--pn-line-soft) !important; border-bottom: none !important; }
.phpp-section-divider {
	background: var(--pn-line) !important; height: 1px !important; opacity: 1 !important;
}
hr, .phpp-divider { border-color: var(--pn-line) !important; opacity: 1 !important; }

/* 5 — CARDS ------------------------------------------------------------- */
.phpp-glass, .phpp-glass-enhanced {
	background: var(--pn-surface) !important;
	border: 1px solid var(--pn-line) !important;
	border-radius: var(--pn-r-lg) !important;
	box-shadow: var(--pn-shadow) !important;
	backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.phpp-glass-enhanced:hover { border-color: var(--pn-line-strong) !important; box-shadow: var(--pn-shadow-lift) !important; }
.phpp-inner-card, .phpp-contact-method, .phpp-faq-item, .phpp-legal-content, .phpp-split-card {
	background: var(--pn-sunken) !important;
	border: 1px solid var(--pn-line-soft) !important;
	border-radius: var(--pn-r) !important;
	box-shadow: none !important;
}
.phpp-inner-card:hover, .phpp-contact-method:hover { background: var(--pn-surface) !important; border-color: var(--pn-line) !important; }
.phpp-split-card { border: none !important; border-bottom: 1px solid var(--pn-line-soft) !important; border-radius: 0 !important; background: transparent !important; }
.phpp-example-box {
	background: var(--pn-accent-tint) !important;
	border: 1px solid var(--pn-accent-line) !important;
	border-radius: var(--pn-r) !important;
}
.phpp-value-card, .phpp-partner-model, .phpp-process-step {
	background: var(--pn-surface) !important;
	border: 1px solid var(--pn-line) !important;
	border-radius: var(--pn-r) !important;
}

/* 6 — LABELS, BADGES, TAGS ---------------------------------------------- */
.phpp-accent-label {
	color: var(--pn-accent) !important; font-weight: 700 !important;
	font-size: .68rem !important; letter-spacing: .12em !important; text-transform: uppercase !important;
}
.phpp-badge {
	background: var(--pn-surface) !important; border: 1px solid var(--pn-line) !important;
	color: var(--pn-body) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.phpp-badge:hover { border-color: var(--pn-line-strong) !important; }
.phpp-deliverable-tag {
	background: var(--pn-accent-tint) !important; border: 1px solid var(--pn-accent-line) !important;
	color: var(--pn-accent-deep) !important; font-weight: 600 !important; border-radius: var(--pn-r-sm) !important;
}

/* 7 — ICONS, LISTS ------------------------------------------------------ */
.phpp-icon-box {
	background: var(--pn-accent-tint) !important; border: 1px solid var(--pn-accent-line) !important;
	border-radius: var(--pn-r) !important;
}
.phpp-icon-box i, .phpp-icon-box svg { color: var(--pn-accent-deep) !important; }
.phpp-icon-box svg [stroke] { stroke: var(--pn-accent-deep) !important; }
.phpp-icon-box svg [fill]:not([fill="none"]) { fill: var(--pn-accent-deep) !important; }
.phpp-list li { color: var(--pn-body) !important; }
.phpp-list li::before { color: var(--pn-accent) !important; }

/* 8 — NUMBERS (gradient-clipped text) ------------------------------------ */
/* These use background-clip:text with color:transparent. The source
   gradients were pale teal/blue for a dark canvas and wash out on white. */
.phpp-stat-number, .phpp-usecase-number, .phpp-404-number {
	background: linear-gradient(135deg, var(--pn-accent) 0%, #1D4ED8 100%) !important;
	-webkit-background-clip: text !important; background-clip: text !important;
	-webkit-text-fill-color: transparent !important; color: transparent !important;
}
.phpp-500-number {
	background: linear-gradient(135deg, var(--pn-danger) 0%, var(--pn-warn) 100%) !important;
	-webkit-background-clip: text !important; background-clip: text !important;
	-webkit-text-fill-color: transparent !important; color: transparent !important;
}
.phpp-stat-label {
	color: var(--pn-muted) !important; font-weight: 600 !important;
	letter-spacing: .07em !important; text-transform: uppercase !important; font-size: .7rem !important;
}

/* 9 — BUTTONS ------------------------------------------------------------ */
.button.phpp-btn-primary, .phpp-btn-primary, .btn.primary, .phpp-form-submit {
	background: var(--pn-accent) !important; background-image: none !important;
	border: 1px solid var(--pn-accent) !important; color: #FFFFFF !important;
	font-weight: 600 !important; border-radius: var(--pn-r) !important; text-shadow: none !important;
}
.button.phpp-btn-primary:hover, .phpp-btn-primary:hover, .btn.primary:hover, .phpp-form-submit:hover {
	background: var(--pn-accent-deep) !important; border-color: var(--pn-accent-deep) !important; color: #FFF !important;
}
.phpp-btn-outline, .button-border.button-light, .btn2, .btn:not(.primary) {
	background: transparent !important; color: var(--pn-accent) !important;
	border: 1px solid var(--pn-accent-line) !important; font-weight: 600 !important; border-radius: var(--pn-r) !important;
}
.phpp-btn-outline:hover, .button-border.button-light:hover, .btn2:hover, .btn:not(.primary):hover {
	background: var(--pn-accent-tint) !important; color: var(--pn-accent-deep) !important; border-color: var(--pn-accent) !important;
}

/* 10 — FORMS ------------------------------------------------------------- */
/* Source had color:#fff on labels and rgba(255,255,255,0.05) fills — the
   entire enquiry form was invisible on a light background. */
.phpp-form-label {
	color: var(--pn-ink) !important; font-weight: 600 !important; font-size: .85rem !important;
}
.phpp-form-input, .phpp-form-select, .phpp-form-textarea,
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select, textarea {
	background: var(--pn-surface) !important;
	border: 1px solid var(--pn-line-strong) !important;
	color: var(--pn-ink) !important;
	border-radius: var(--pn-r) !important;
	box-shadow: none !important;
}
.phpp-form-input::placeholder, .phpp-form-textarea::placeholder,
input::placeholder, textarea::placeholder { color: #94A3B8 !important; opacity: 1 !important; }
.phpp-form-input:focus, .phpp-form-select:focus, .phpp-form-textarea:focus,
input:focus, select:focus, textarea:focus {
	border-color: var(--pn-accent) !important;
	box-shadow: 0 0 0 3px rgba(13,148,136,0.14) !important;
	outline: none !important;
}
.phpp-form-select option { background: var(--pn-surface) !important; color: var(--pn-ink) !important; }
.phpp-form-note { color: var(--pn-muted) !important; }
.phpp-form-group, .phpp-form-row { background: transparent !important; }

/* 11 — FAQ, ALERTS, WARNINGS --------------------------------------------- */
.phpp-faq-question { color: var(--pn-ink) !important; font-weight: 600 !important; }
.phpp-faq-answer { color: var(--pn-body) !important; }
.phpp-alert { border-radius: var(--pn-r) !important; }
.phpp-alert-success { background:#ECFDF5 !important; border:1px solid #A7F3D0 !important; color: var(--pn-success) !important; }
.phpp-alert-error   { background:#FEF2F2 !important; border:1px solid #FECACA !important; color: var(--pn-danger) !important; }
.phpp-warning-box   { background:#FFFBEB !important; border:1px solid #FDE68A !important; color: var(--pn-warn) !important; border-radius: var(--pn-r) !important; }
.phpp-warning-box p, .phpp-warning-box li { color:#78350F !important; }

/* 12 — DIAGRAMS ---------------------------------------------------------- */
.phpp-diagram, .phpp-infog-wrap { background: transparent !important; }
.phpp-diagram-box, .phpp-diagram-box-1, .phpp-diagram-box-2, .phpp-diagram-box-3 {
	background: var(--pn-surface) !important; border: 1px solid var(--pn-line) !important;
	border-radius: var(--pn-r) !important; color: var(--pn-ink) !important;
}
.phpp-diagram-line, .phpp-diagram-line-1, .phpp-diagram-line-2 { background: var(--pn-line-strong) !important; }
.phpp-diagram-text, .phpp-diagram-text-1, .phpp-diagram-text-2, .phpp-diagram-text-3 { fill: var(--pn-ink) !important; color: var(--pn-ink) !important; }

/* 13 — CLIENT LOGOS ------------------------------------------------------ */
/* -mono.png files are white, made for #0f1720. brightness(0) renders any
   solid PNG black regardless of source colour — no re-export needed. */
.phpp-logo-tile { background: var(--pn-surface) !important; border: 1px solid var(--pn-line) !important; border-radius: var(--pn-r) !important; }
.phpp-logo-tile:hover { border-color: var(--pn-line-strong) !important; box-shadow: var(--pn-shadow-lift) !important; }
.phpp-logo-mono { filter: brightness(0) !important; opacity: .45 !important; transition: opacity .25s ease !important; }
.phpp-logo-tile:hover .phpp-logo-mono { opacity: 0 !important; }
.phpp-logo-glow { display: none !important; }

/* 14 — COOKIE BANNER ----------------------------------------------------- */
.phpp-cookie-banner {
	background: var(--pn-ink) !important;
	border-top: 1px solid rgba(255,255,255,.12) !important;
	box-shadow: 0 -8px 32px rgba(11,18,32,.18) !important;
}
.phpp-cookie-banner-text, .phpp-cookie-banner-text p { color: rgba(255,255,255,.82) !important; }
.phpp-cookie-banner-text a { color: #5EEAD4 !important; text-decoration: underline !important; }
.phpp-cookie-btn-accept {
	background: var(--pn-accent) !important; background-image: none !important;
	color: #FFFFFF !important; border: 1px solid var(--pn-accent) !important; font-weight: 600 !important;
}
.phpp-cookie-btn-accept:hover { background: var(--pn-accent-deep) !important; }
.phpp-cookie-btn-settings {
	background: transparent !important; color: rgba(255,255,255,.9) !important;
	border: 1px solid rgba(255,255,255,.3) !important;
}
.phpp-cookie-btn-settings:hover { background: rgba(255,255,255,.1) !important; }
.phpp-cookie-table, .phpp-cookie-table td, .phpp-cookie-table th {
	color: var(--pn-body) !important; border-color: var(--pn-line) !important;
}
.phpp-cookie-table th { color: var(--pn-ink) !important; background: var(--pn-sunken) !important; }

/* 15 — ERROR PAGES ------------------------------------------------------- */
.phpp-404-section, .phpp-500-section { background: transparent !important; }

/* 16 — INLINE DARK-THEME STYLES IN MARKUP -------------------------------- */
[style*="rgba(255,255,255,0.02)"], [style*="rgba(255, 255, 255, 0.02)"],
[style*="rgba(255,255,255,0.03)"], [style*="rgba(255, 255, 255, 0.03)"],
[style*="rgba(255,255,255,0.04)"], [style*="rgba(255, 255, 255, 0.04)"],
[style*="rgba(255,255,255,0.05)"], [style*="rgba(255, 255, 255, 0.05)"],
[style*="rgba(255,255,255,0.07)"], [style*="rgba(255, 255, 255, 0.07)"] {
	background-color: var(--pn-sunken) !important; border-color: var(--pn-line) !important;
}
[style*="rgba(255,255,255,0.1)"],  [style*="rgba(255, 255, 255, 0.1)"],
[style*="rgba(255,255,255,0.12)"], [style*="rgba(255, 255, 255, 0.12)"],
[style*="rgba(255,255,255,0.15)"], [style*="rgba(255, 255, 255, 0.15)"] { border-color: var(--pn-line) !important; }
[style*="#4fd1c5"], [style*="rgba(79, 209, 197"], [style*="rgba(79,209,197"],
[style*="#2aa84a"], [style*="rgba(42, 168, 74"], [style*="rgba(42,168,74"],
[style*="#63b3ed"] { color: var(--pn-accent-deep) !important; }

/* 17 — SITE NAVIGATION BLOCK --------------------------------------------- */
/* A 31-link block reads as a wall of teal if every link is accented.
   Group headings carry the accent; the links themselves stay body ink. */
#site-nav, .site-nav { background: var(--pn-bg) !important; border-top: 1px solid var(--pn-line) !important; }
#site-nav h2, .site-nav h2 { color: var(--pn-ink) !important; }
#site-nav h3, #site-nav h4, .site-nav h3, .site-nav h4 { color: var(--pn-ink) !important; }
#site-nav a, .site-nav a { color: var(--pn-body) !important; font-weight: 500 !important; }
#site-nav a:hover, .site-nav a:hover { color: var(--pn-accent) !important; }
#site-nav .text-white, .site-nav .text-white { color: var(--pn-ink) !important; }
#site-nav .text-white-50, .site-nav .text-white-50 { color: var(--pn-muted) !important; }

/* 18 — FOOTER ------------------------------------------------------------ */
#footer { background: var(--pn-surface) !important; border-top: 1px solid var(--pn-line) !important; color: var(--pn-muted) !important; }
#footer h3, #footer h4, #footer .text-white { color: var(--pn-ink) !important; }
#footer h3, #footer h4 { font-size: .7rem !important; letter-spacing: .12em !important; text-transform: uppercase !important; font-weight: 700 !important; }
#footer a, #footer .text-white-50, #footer p, #footer li { color: var(--pn-muted) !important; }
#footer a:hover { color: var(--pn-accent) !important; }
#footer [style*="border-top"] { border-top-color: var(--pn-line) !important; }


/* =========================================================================
   19 — HEADER REFINEMENT + DROPDOWNS
   Dropdowns open on :hover and :focus-within in CSS only — no dependence
   on Canvas menu JS, for the same reason .phpp-reveal was retired.
   ========================================================================= */

/* Tighter bar, real hierarchy between logo and tagline */
#header.phpp-header #header-wrap { padding: 14px 0 !important; }
body.phpp-scrolled #header.phpp-header #header-wrap { padding: 8px 0 !important; }

#header #logo a { gap: 0 !important; align-items: center !important; }
#header #logo a span:first-child {
	font-size: 1.32rem !important; font-weight: 800 !important; letter-spacing: -0.035em !important;
}
.phpp-tagline {
	position: relative; margin-left: 14px !important; padding-left: 14px !important;
	font-size: .78rem !important; font-weight: 500 !important; letter-spacing: .005em !important;
	color: var(--pn-muted) !important;
}
.phpp-tagline::before {
	content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	width: 1px; height: 18px; background: var(--pn-line-strong);
}
@media (max-width: 1200px) { .phpp-tagline { display: none !important; } }

/* Menu items */
.primary-menu .menu-container { gap: 2px !important; align-items: center !important; }
.primary-menu .menu-link { padding: 10px 12px !important; border-radius: var(--pn-r-sm) !important; }
.primary-menu .menu-link div {
	font-size: .78rem !important; letter-spacing: .045em !important; display: flex !important;
	align-items: center !important; gap: 6px !important;
}
.primary-menu .menu-item:not(.pn-cta-item) > .menu-link:hover { background: var(--pn-accent-tint) !important; }

/* Active state: colour plus a rule, not colour alone */
.primary-menu .menu-item.current > .menu-link { position: relative; }
.primary-menu .menu-item.current > .menu-link::after {
	content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px;
	height: 2px; border-radius: 2px; background: var(--pn-accent);
}

/* Caret */
.pn-caret {
	width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
	border-top: 4px solid currentColor; opacity: .5; transition: transform .18s ease, opacity .18s ease;
}
.pn-has-drop:hover .pn-caret, .pn-has-drop:focus-within .pn-caret { transform: rotate(180deg); opacity: 1; }

/* CTA */
.primary-menu .pn-cta-item { margin-left: 10px !important; }
.primary-menu .menu-link.pn-cta {
	background: var(--pn-accent) !important; border-radius: var(--pn-r) !important;
	padding: 10px 18px !important;
}
.primary-menu .menu-link.pn-cta div {
	color: #FFFFFF !important; font-weight: 700 !important; text-transform: none !important;
	font-size: .82rem !important; letter-spacing: .005em !important;
}
.primary-menu .menu-link.pn-cta:hover { background: var(--pn-accent-deep) !important; }

/* Dropdown panel */
.pn-has-drop { position: relative !important; }
.pn-drop {
	position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
	min-width: 520px; z-index: 6000;
	background: var(--pn-surface); border: 1px solid var(--pn-line);
	border-radius: var(--pn-r-lg); box-shadow: 0 16px 44px rgba(11,18,32,.13);
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.pn-has-drop:hover > .pn-drop, .pn-has-drop:focus-within > .pn-drop {
	opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
/* Hover bridge so the panel does not close in the gap */
.pn-has-drop::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }

.pn-drop-inner { display: grid; grid-template-columns: repeat(3, minmax(168px, 1fr)); gap: 4px 28px; padding: 22px 24px 18px; }
.pn-drop-col { display: flex; flex-direction: column; }
.pn-drop-head {
	font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--pn-muted); margin: 10px 0 6px;
}
.pn-drop-link {
	display: block; padding: 5px 0; font-size: .855rem; font-weight: 500;
	color: var(--pn-body) !important; text-transform: none; letter-spacing: 0; line-height: 1.35;
}
.pn-drop-link:hover { color: var(--pn-accent) !important; }
.pn-drop-foot {
	border-top: 1px solid var(--pn-line-soft); padding: 12px 24px;
	background: var(--pn-sunken); border-radius: 0 0 var(--pn-r-lg) var(--pn-r-lg);
}
.pn-drop-foot a { font-size: .78rem; font-weight: 700; color: var(--pn-accent) !important; }

/* Industries has a single column — do not stretch it to three */
.pn-has-drop.current .pn-drop-inner, .pn-drop-inner:has(> .pn-drop-col:only-child) {
	grid-template-columns: minmax(200px, 1fr);
}
.pn-drop:has(.pn-drop-col:only-child) { min-width: 240px; }

/* -------------------------------------------------------------------------
   Mobile menu
   Canvas positions .primary-menu absolutely with no max-height and no
   scroll, so a long list simply runs off the bottom of the screen with no
   way to reach it. Two fixes: cap the height and let it scroll, and drop
   the mega-panels entirely on small screens. The 31 deep links already
   appear in the site-nav block on every page, so repeating them inside a
   thumb-sized menu costs usability and buys nothing.
   ------------------------------------------------------------------------- */
@media (max-width: 1050px) {

	.primary-menu {
		max-height: calc(100vh - 72px) !important;
		max-height: calc(100dvh - 72px) !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
		overscroll-behavior: contain !important;
		padding: 6px 0 14px !important;
	}

	/* Top-level items only */
	.pn-drop { display: none !important; }
	.pn-caret { display: none !important; }

	.primary-menu .menu-container { gap: 0 !important; }
	.primary-menu .menu-link {
		padding: 15px 20px !important;
		border-radius: 0 !important;
		border-bottom: 1px solid var(--pn-line-soft) !important;
	}
	.primary-menu .menu-link div {
		font-size: .9rem !important;
		letter-spacing: .01em !important;
		text-transform: none !important;
		font-weight: 600 !important;
	}
	.primary-menu .menu-item:not(.pn-cta-item) > .menu-link:hover { background: transparent !important; }
	.primary-menu .menu-item.current > .menu-link { background: var(--pn-accent-tint) !important; }
	.primary-menu .menu-item.current > .menu-link::after { display: none !important; }
	.primary-menu .menu-item.current > .menu-link div { color: var(--pn-accent) !important; }

	/* CTA is a real button, not another row */
	.primary-menu .pn-cta-item { margin: 14px 20px 4px !important; }
	.primary-menu .menu-link.pn-cta {
		display: block !important; text-align: center !important;
		padding: 14px 18px !important; border-bottom: 0 !important;
		border-radius: var(--pn-r) !important;
	}
	.primary-menu .menu-link.pn-cta div { font-size: .9rem !important; }

	/* Pointer to the full index rather than cramming it in here */
	.primary-menu .menu-container::after {
		content: "All services and guides are listed at the foot of every page.";
		display: block; padding: 14px 20px 2px;
		font-size: .72rem; line-height: 1.45; color: var(--pn-muted);
	}
}

/* Very short viewports — landscape phones */
@media (max-width: 1050px) and (max-height: 520px) {
	.primary-menu .menu-link { padding: 11px 20px !important; }
	.primary-menu .menu-container::after { display: none; }
}