/* =====================================================================
   creditcorponline.co.uk — style.css (v1.0)
   The punchier, customer-facing FRONT DOOR for the new "Creditcorp" name.

   PART A is a faithful clone of the creditcorpgroup.co.uk design system and
   component set (the template). SAME tokens, SAME class names, IDENTICAL
   chrome — zero patchwork. Do not rename these; page agents rely on them.

   PART B appends a small creditcorponline.co.uk-specific layer (extra classes,
   all prefixed .cc-*) for a richer photo hero, product/feature cards, the
   "Credi" mascot block, a trade-mark comparison block, and a teal/gold
   skeuomorphic polish. ONE radius scale, ONE type scale, ONE shadow
   vocabulary — depth from light/gradient, not heavy coloured glows.
   ===================================================================== */

/* Self-hosted Latin-subset Open Sans (variable). No third-party request.
   Source Code Pro is not shipped on this mini-site, so --font-mono falls
   back to system monospace — the token name is kept identical to the
   group's so components that reference it still work. */
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('/assets/fonts/open-sans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Brand */
	--teal:            #11676a;
	--teal-deep:       #0d5356;
	--teal-darker:     #073f42;
	--teal-light:      #2a8588;
	--teal-mist:       #d6e8e9;
	--teal-wash:       #eaf2f3;

	/* Secondary accent — a restrained brass/gold, used sparingly for warmth */
	--gold:            #c08a2d;
	--gold-deep:       #a4731f;
	--gold-soft:       #d9a945;
	--gold-wash:       #f6efe0;

	/* Elevation */
	--shadow-sm:       0 1px 3px rgba(7,63,66,.06), 0 1px 2px rgba(7,63,66,.04);
	--shadow-md:       0 8px 24px rgba(7,63,66,.10);
	--shadow-lg:       0 20px 48px rgba(7,63,66,.16);
	--radius-lg:       16px;

	/* Neutrals — classic palette */
	--gray-50:         #fafafa;
	--gray-100:        #f5f5f5;
	--gray-200:        #ebebeb;
	--gray-300:        #d8d8d8;
	--gray-400:        #b3b3b3;
	--gray-500:        #777777;
	--gray-600:        #555555;
	--gray-700:        #333333;
	--gray-800:        #222222;

	/* Type — Open Sans for everything */
	--font-body:       "Open Sans", "Segoe UI", -apple-system, Arial, sans-serif;
	--font-mono:       "Source Code Pro", "SFMono-Regular", "Menlo", "Consolas", "Courier New", monospace;

	--container:       1170px;
	--gutter:          15px;
	--radius:          8px;

	/* --- creditcorponline.co.uk skeuo vocabulary (layered, teal-tinted) ----- */
	--sk-hi:           inset 0 1px 0 rgba(255,255,255,.7);
	--sk-hi-strong:    inset 0 1px 0 rgba(255,255,255,.92);
	--sk-raised:       var(--sk-hi), 0 1px 2px rgba(7,63,66,.10), 0 3px 6px rgba(7,63,66,.10), 0 10px 22px rgba(7,63,66,.09);
	--sk-raised-lg:    var(--sk-hi), 0 2px 4px rgba(7,63,66,.10), 0 10px 22px rgba(7,63,66,.12), 0 28px 54px rgba(7,63,66,.16);
	--sk-hover:        var(--sk-hi-strong), 0 3px 8px rgba(7,63,66,.12), 0 18px 38px rgba(7,63,66,.16);
	--sk-inset:        inset 0 2px 4px rgba(7,63,66,.14), inset 0 1px 2px rgba(7,63,66,.09);
	--sk-cta:          inset 0 1px 0 rgba(255,255,255,.28), 0 1px 2px rgba(7,63,66,.18), 0 6px 16px rgba(7,63,66,.20);
	--sk-cta-hover:    inset 0 1px 0 rgba(255,255,255,.34), 0 2px 4px rgba(7,63,66,.18), 0 12px 24px rgba(7,63,66,.24);
}

/* =====================================================================
   PART A — CLONED GROUP DESIGN SYSTEM + COMPONENTS
   (identical class names + behaviour to creditcorpgroup.co.uk)
   ===================================================================== */

/* ----- Reset -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--teal); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--teal-darker); text-decoration: underline; }
button { font: inherit; cursor: pointer; }

/* ----- Base body -------------------------------------------------- */
body {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.65;
	color: var(--gray-700);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: 760px; }

/* ----- Typography ------------------------------------------------- */
h1, h2, h3, h4 {
	font-family: var(--font-body);
	font-weight: 300;
	color: var(--gray-800);
	line-height: 1.25;
	margin: 0 0 16px;
}
h1 { font-size: 44px; }
h2 { font-size: 32px; }
h3 { font-size: 22px; font-weight: 400; }
h4 { font-size: 18px; font-weight: 600; }
@media (max-width: 768px) {
	h1 { font-size: 32px; }
	h2 { font-size: 26px; }
}
p { margin: 0 0 16px; }
strong { font-weight: 600; color: var(--gray-800); }

.lead {
	font-size: 19px;
	font-weight: 300;
	line-height: 1.55;
	color: var(--gray-600);
	margin-bottom: 24px;
}

.cc-article-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0 0 22px;
	padding: 14px 0;
	border-top: 1px solid var(--gray-200);
	border-bottom: 1px solid var(--gray-200);
	color: var(--gray-600);
	font-size: 13px;
}

.cc-article-meta .btn {
	padding: 8px 14px;
	font-size: 12px;
}

code, .mono { font-family: var(--font-mono); font-size: 13px; background: var(--gray-100); padding: 1px 6px; border-radius: 3px; }

.plain-list { list-style: disc; padding-left: 22px; margin: 0 0 20px; }
.plain-list li { margin-bottom: 10px; }

/* ----- Top breadcrumb / utility bar ------------------------------ */
.utility-bar {
	background: linear-gradient(180deg, var(--teal-darker) 0%, var(--teal-deep) 100%);
	color: rgba(255,255,255,.78);
	font-size: 12.5px;
	padding: 6px 0;
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.utility-bar a {
	color: #fff;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.utility-bar a:hover { color: var(--teal-mist); text-decoration: none; }
.utility-bar__inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; align-items: center; }
.utility-bar .crumbs { color: rgba(255,255,255,.5); font-size: 12px; }
.utility-bar .crumbs span { color: rgba(255,255,255,.92); }
.utility-bar__links { display: inline-flex; align-items: center; gap: 14px; }
.utility-bar__links a { color: #fff; }
.utility-bar__links a:hover { color: var(--teal-mist); text-decoration: none; }
@media (max-width: 640px) {
	.utility-bar__links a:not([href^="https://credicorp.co.uk"]) { display: inline; }
}
/* Customer-site link → a subtle premium pill */
.utility-bar__links a[href^="https://credicorp.co.uk"] {
	padding: 4px 13px;
	border: 1px solid rgba(255,255,255,.22);
	border-radius: 999px;
	background: rgba(255,255,255,.07);
	transition: background .15s ease, border-color .15s ease;
}
.utility-bar__links a[href^="https://credicorp.co.uk"]:hover {
	background: rgba(255,255,255,.16);
	border-color: rgba(255,255,255,.42);
	color: #fff;
}

/* Tiny header search bar (top utility bar) */
.utility-search { display: inline-flex; align-items: center; gap: 6px;
	background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
	border-radius: 999px; padding: 3px 10px;
	box-shadow: inset 0 1px 3px rgba(0,0,0,.30);
	transition: background .15s ease, border-color .15s ease; }
.utility-search:focus-within { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); }
.utility-search__icon { width: 13px; height: 13px; color: rgba(255,255,255,.7); flex: none; }
.utility-search input {
	background: transparent; border: 0; outline: none; color: #fff;
	font: inherit; font-size: 12.5px; width: 92px; padding: 1px 0;
}
.utility-search input::placeholder { color: rgba(255,255,255,.6); }
.utility-search input:focus { width: 130px; }
@media (max-width: 600px) { .utility-search input { width: 72px; } .utility-search input:focus { width: 100px; } }

/* ----- Header / nav ---------------------------------------------- */
.site-header {
	background: rgba(255,255,255,.86);
	-webkit-backdrop-filter: saturate(180%) blur(8px);
	        backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid var(--gray-200);
	box-shadow: 0 1px 0 rgba(7,63,66,.06), var(--shadow-sm);
	padding: 13px 0;
	position: sticky;
	top: 0;
	z-index: 30;
}
.site-header .container { max-width: 1320px; }
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.brand {
	display: flex;
	align-items: center;
	text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand__lockup { display: inline-flex; align-items: flex-start; }
.brand__logo { height: 48px; width: auto; flex-shrink: 0; max-width: none; }
.brand { flex-shrink: 0; }
.brand__lockup { flex-shrink: 0; }
.brand { flex-shrink: 0; }
@media (max-width: 600px) { .brand__logo { height: 32px; } }

.brand__tm {
	font-size: 8px; font-weight: 700; color: var(--gray-400);
	line-height: 1; margin: 3px 0 0 3px; letter-spacing: .02em;
}
.brand__sub {
	margin-left: 14px; padding-left: 14px;
	border-left: 1px solid var(--gray-300);
	font-size: 11.5px; font-weight: 700; color: var(--gray-500);
	text-transform: uppercase; letter-spacing: .15em;
}
@media (max-width: 600px) { .brand__sub { display: none; } }

.header-nav { display: flex; align-items: center; gap: 16px; flex-shrink: 1; }
.header-nav a { color: var(--gray-600); font-size: 13px; }
.header-nav a:hover { color: var(--teal-deep); }
.header-nav .nav-link { position: relative; font-weight: 500; padding-block: 4px; }
.site-header .btn--lg { padding: 10px 16px; font-size: 13px; }
.header-nav .nav-link::after {
	content: ""; position: absolute; left: 2px; right: 2px; bottom: -2px; height: 2px;
	background: var(--teal); border-radius: 2px;
	transform: scaleX(0); transform-origin: center; transition: transform .18s ease;
}
.header-nav .nav-link:hover::after,
.header-nav .nav-link.is-current::after { transform: scaleX(1); }
.header-nav .nav-link.is-current { color: var(--teal-deep); font-weight: 600; }

/* ----- Desktop dropdown menus (CSS-only, hover + keyboard) -------- */
.nav-item--has-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-caret { font-size: 9px; color: var(--gray-400); margin-left: 3px; display: inline-block; transition: transform .15s ease; }
.nav-dropdown {
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	transform: translate(-50%, -6px);
	min-width: 210px;
	background: #fff;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	padding: 6px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
	z-index: 40;
}
.nav-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-item--has-dropdown:hover .nav-dropdown,
.nav-item--has-dropdown:focus-within .nav-dropdown {
	opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.nav-item--has-dropdown:hover .nav-caret,
.nav-item--has-dropdown:focus-within .nav-caret { transform: rotate(180deg); color: var(--teal); }
.nav-dropdown a {
	display: block; padding: 9px 14px; color: var(--gray-700);
	font-size: 14px; border-radius: 5px; white-space: nowrap;
}
.nav-dropdown a:hover { background: var(--teal-wash); color: var(--teal-deep); text-decoration: none; }

/* ----- CSS-only mobile menu (<details>) -------------------------- */
.nav-menu { display: none; position: relative; }
.nav-menu > summary {
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--teal-deep);
	border: 1px solid var(--gray-300);
	border-radius: var(--radius);
	cursor: pointer;
	user-select: none;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary svg { width: 20px; height: 20px; }
.nav-menu .nav-menu__close { display: none; }
.nav-menu[open] > summary .nav-menu__open { display: none; }
.nav-menu[open] > summary .nav-menu__close { display: block; }
.nav-menu__panel {
	position: absolute;
	right: 0;
	top: calc(100% + 12px);
	width: min(82vw, 280px);
	background: #fff;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius);
	box-shadow: 0 10px 30px rgba(0,0,0,.14);
	padding: 8px;
	z-index: 40;
}
.nav-menu__link {
	display: block;
	padding: 11px 14px;
	color: var(--gray-700);
	font-size: 15px;
	border-radius: 3px;
}
.nav-menu__link:hover { background: var(--teal-wash); color: var(--teal-deep); text-decoration: none; }
.nav-menu__link.is-current { color: var(--teal-deep); font-weight: 600; background: var(--teal-wash); }
.nav-menu__cta { width: 100%; justify-content: center; margin-top: 8px; }

@media (max-width: 767px) {
	.header-nav { display: none; }
	.nav-menu { display: block; }
}

/* ----- Buttons --------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: var(--radius);
	border: 1px solid transparent;
	cursor: pointer;
	transition: all .15s ease;
	text-decoration: none;
	line-height: 1.4;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(7,63,66,.30); }
a.btn,
a.btn:link,
a.btn:visited,
a.btn:hover,
a.btn:active,
a.btn:focus { text-decoration: none; }

.btn--primary,
.btn--primary:link,
.btn--primary:visited {
	background: linear-gradient(180deg, var(--teal-light), var(--teal) 55%, var(--teal-deep));
	color: #fff;
	border-color: var(--teal-deep);
	box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(7,63,66,.25);
}
.btn--primary:hover,
.btn--primary:active,
.btn--primary:focus {
	background: linear-gradient(180deg, var(--teal), var(--teal-deep) 55%, var(--teal-darker));
	color: #fff;
	border-color: var(--teal-darker);
	box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(7,63,66,.30);
}

.btn--ghost,
.btn--ghost:link,
.btn--ghost:visited {
	background: transparent;
	color: var(--teal-deep);
	border-color: var(--teal);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.btn--ghost:hover,
.btn--ghost:active,
.btn--ghost:focus {
	background: var(--teal-wash);
	color: var(--teal-darker);
}

.btn--white,
.btn--white:link,
.btn--white:visited {
	background: #fff;
	color: var(--teal-darker);
	border-color: #fff;
	box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.9);
}
.btn--white:hover,
.btn--white:active,
.btn--white:focus {
	background: var(--gray-100);
	color: var(--teal-darker);
}

.btn--outline-light,
.btn--outline-light:link,
.btn--outline-light:visited {
	background: transparent;
	color: #fff;
	border-color: rgba(255,255,255,.6);
}
.btn--outline-light:hover,
.btn--outline-light:active,
.btn--outline-light:focus {
	background: rgba(255,255,255,.1);
	color: #fff;
}

.btn--lg { padding: 13px 28px; font-size: 15px; }

/* ----- Hero ------------------------------------------------------ */
.hero {
	position: relative;
	color: #fff;
	overflow: hidden;
	padding: 128px 0 116px;
	background:
		radial-gradient(120% 120% at 85% 8%, rgba(42,133,136,.55), transparent 55%),
		radial-gradient(90% 90% at 8% 95%, rgba(192,138,45,.20), transparent 50%),
		linear-gradient(150deg, #06363a 0%, #0d5356 60%, #11676a 100%);
}
.hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url('/assets/img/photos/hero-bg.jpg');
	opacity: 0.16;
	mix-blend-mode: luminosity;
}
@supports (background-image: image-set(url('x.webp') type('image/webp'))) {
	.hero__bg { background-image: image-set(url('/assets/img/photos/hero-bg.webp') type('image/webp'), url('/assets/img/photos/hero-bg.jpg') type('image/jpeg')); }
}
.hero__overlay {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent);
	        mask-image: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent);
}
.hero::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--gold), var(--teal-light) 60%, transparent);
}
.hero__inner { position: relative; z-index: 1; text-align: center; }
.hero__eyebrow {
	display: inline-block;
	padding: 5px 12px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.25);
	color: #fff;
	border-radius: 3px;
	margin-bottom: 24px;
}
.hero h1 {
	color: #fff;
	font-size: 52px;
	font-weight: 300;
	margin-bottom: 20px;
	max-width: 22ch;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 768px) { .hero h1 { font-size: 34px; } }
.hero h1 strong { color: #fff; font-weight: 700; }
.hero p.lead {
	color: rgba(255,255,255,.88);
	font-size: 20px;
	max-width: 640px;
	margin: 0 auto 32px;
}
.hero p.lead strong,
.hero__inner strong,
.hero blockquote strong { color: #fff; font-weight: 600; }
.hero__cta {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
}

/* Interior page heros */
.hero--page h1   { font-size: 42px; max-width: 28ch; }
.hero--legal h1  { font-size: 38px; max-width: 22ch; }
.hero--article h1 { font-size: 30px; max-width: none; line-height: 1.25; text-align: left; }
.hero--article .hero__inner { text-align: left; }
.hero--article .hero__eyebrow { display: inline-block; }
@media (max-width: 768px) {
	.hero--page h1, .hero--legal h1 { font-size: 28px; }
	.hero--article h1 { font-size: 24px; }
}

/* ----- Trust strip ---------------------------------------------- */
.trust-strip {
	background: #fff;
	border-bottom: 1px solid var(--gray-200);
	padding: 20px 0;
	font-size: 12.5px;
	color: var(--gray-600);
	text-align: center;
}
.trust-strip__items {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 36px;
}
.trust-strip__items span {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
	color: var(--gray-600);
}
.trust-strip__items code { background: none; color: var(--teal-deep); font-size: 12.5px; padding: 0; }
.trust-strip__items .dot {
	width: 7px; height: 7px; border-radius: 50%;
	display: inline-block;
	background: var(--gold);
	background-image: radial-gradient(circle at 35% 30%, #e7c477, var(--gold) 65%);
	box-shadow: 0 0 0 3px var(--gold-wash), inset 0 -1px 1px rgba(120,80,10,.45);
}

/* ----- Section ---------------------------------------------------- */
section { padding: 46px 0; }
@media (max-width: 768px) { section { padding: 34px 0; } }
section.section-gray { background: var(--gray-100); border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); box-shadow: inset 0 1px 0 #fff; }
section.section-dark {
	position: relative;
	color: rgba(255,255,255,.85);
	background:
		radial-gradient(90% 140% at 85% 0%, rgba(42,133,136,.35), transparent 55%),
		linear-gradient(150deg, #06363a, #0d5356);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
section.section-dark::before {
	content: "";
	position: absolute; left: 0; right: 0; top: 0; height: 3px;
	background: linear-gradient(90deg, var(--gold), var(--teal-light) 60%, transparent);
}
section.section-dark h2, section.section-dark h3 { color: #fff; }

.section-head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 40px;
}
.section-head p { color: var(--gray-500); font-size: 17px; font-weight: 300; }
.section-head .accent-line {
	width: 54px; height: 3px;
	background: linear-gradient(90deg, var(--teal), var(--gold));
	margin: 16px auto 24px; border-radius: 2px;
}

/* ----- Feature grid --------------------------------------------- */
.features {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
}
@media (min-width: 768px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .features { grid-template-columns: repeat(4, 1fr); } }

.feature {
	text-align: left;
	padding: 30px 28px;
	background: #fff;
	background-image: linear-gradient(177deg, #ffffff, #f6f9f9);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	position: relative;
	overflow: hidden;
}
.feature::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--teal), var(--gold));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s ease;
}
.feature--link {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.feature--link:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: var(--teal-mist);
	text-decoration: none;
	color: inherit;
}
.feature--link:hover::before { transform: scaleX(1); }
.feature__icon {
	display: inline-flex;
	width: 58px;
	height: 58px;
	border-radius: 14px;
	background: linear-gradient(140deg, var(--teal-wash), #fff);
	border: 1px solid var(--teal-mist);
	color: var(--teal-deep);
	align-items: center;
	justify-content: center;
	margin: 0 0 18px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(7,63,66,.10);
}
.feature__icon svg { width: 28px; height: 28px; }
.feature h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--gray-800);
	margin-bottom: 10px;
}
.feature p {
	color: var(--gray-600);
	font-size: 14.5px;
	line-height: 1.65;
	margin: 0;
}
.feature__more {
	display: inline-block;
	margin-top: 10px;
	color: var(--teal);
	font-weight: 600;
	font-size: 14px;
}
.feature--link:hover .feature__more { color: var(--teal-deep); }

/* ----- Backlinks panels ----------------------------------------- */
.backlink-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media (min-width: 720px)  { .backlink-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .backlink-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

.backlink-panel {
	background: #fff;
	background-image: linear-gradient(177deg, #ffffff, #f6f9f9);
	border: 1px solid var(--gray-200);
	border-top: 3px solid var(--teal);
	border-radius: var(--radius);
	padding: 28px 24px;
	box-shadow: var(--shadow-sm);
}
.backlink-panel h3 {
	font-size: 17px;
	font-weight: 700;
	color: var(--gray-800);
	margin: 0 0 16px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--gray-200);
}
.backlink-panel ul { list-style: none; margin: 0; padding: 0; }
.backlink-panel li { border-bottom: 1px dotted var(--gray-200); }
.backlink-panel li:last-child { border-bottom: 0; }
.backlink-panel a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	color: var(--gray-700);
	font-size: 14px;
}
.backlink-panel a:hover { color: var(--teal-deep); text-decoration: none; }
.backlink-panel a::after {
	content: "›";
	color: var(--gray-400);
	font-size: 18px;
	transition: transform .2s ease, color .2s ease;
}
.backlink-panel a:hover::after { color: var(--teal); transform: translateX(3px); }
.backlink-panel .desc {
	display: block;
	font-size: 12px;
	color: var(--gray-500);
	margin-top: 2px;
	font-weight: 400;
}

/* ----- FAQ accordion ------------------------------------------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq-item {
	background-image: linear-gradient(177deg, #fff, #f6f9f9);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius);
	margin-bottom: 14px;
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: box-shadow .15s ease, border-color .15s ease;
}
.faq-item[open] { box-shadow: var(--shadow-md); border-color: var(--teal-mist); }
.faq-item summary {
	padding: 18px 22px;
	font-weight: 600;
	color: var(--gray-800);
	font-size: 16px;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	list-style: none;
	user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: "+";
	flex: none;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--teal-wash);
	color: var(--teal-deep);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
.faq-item[open] summary::after { content: "−"; background: var(--teal); color: #fff; transform: rotate(180deg); }
.faq-item:hover summary { color: var(--teal-deep); }
.faq-item:hover summary::after { background: var(--teal-mist); }
.faq-item__body {
	padding: 0 22px 20px;
	color: var(--gray-600);
	font-size: 15px;
	line-height: 1.65;
}
.faq-item__body p:last-child { margin-bottom: 0; }

/* ----- Comparison block ----------------------------------------- */
.compare {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: center;
}
@media (min-width: 768px) { .compare { grid-template-columns: 1fr auto 1fr; gap: 28px; } }
.compare__card {
	background: #fff;
	background-image: linear-gradient(177deg, #ffffff, #f6f9f9);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius);
	padding: 32px 24px;
	text-align: center;
	min-height: 220px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-shadow: var(--shadow-sm);
	transition: transform .15s ease, box-shadow .15s ease;
}
.compare__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.compare__card img { max-width: 220px; margin: 0 auto 16px; height: auto; }
.compare__card .label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--gray-500);
	margin-bottom: 8px;
}
.compare__card .meta {
	font-size: 12.5px;
	color: var(--gray-500);
	font-family: var(--font-mono);
	margin-top: 8px;
}
.compare__arrow {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--teal);
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.compare__arrow .icon {
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--teal); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 22px; margin-bottom: 8px;
}

/* ----- Companies block ------------------------------------------ */
.companies {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media (min-width: 768px) { .companies { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) { .companies--3 { grid-template-columns: repeat(3, 1fr); } }
.company-card {
	background: #fff;
	background-image: linear-gradient(177deg, #ffffff, #f6f9f9);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg);
	padding: 28px 26px;
	box-shadow: var(--shadow-sm);
	transition: transform .15s ease, box-shadow .15s ease;
}
.company-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.company-card h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--gray-800);
	margin: 0 0 6px;
}
.company-card .role {
	font-size: 13px;
	color: var(--teal);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 16px;
}
.company-card address {
	font-style: normal;
	font-size: 14px;
	color: var(--gray-600);
	line-height: 1.65;
	margin-bottom: 14px;
}
.company-card .ch {
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--gray-500);
	padding-top: 14px;
	border-top: 1px solid var(--gray-200);
}
.company-card .ch a { color: var(--teal-deep); }

/* ----- CTA strip ------------------------------------------------ */
.cta-strip {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(80% 130% at 12% 100%, rgba(192,138,45,.22), transparent 55%),
		linear-gradient(135deg, var(--teal-darker), var(--teal-deep));
	color: #fff;
	padding: 64px 0;
	text-align: center;
}
.cta-strip::before {
	content: "";
	position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 22px 22px;
}
.cta-strip .container { position: relative; }
.cta-strip h2 { color: #fff; font-weight: 300; margin-bottom: 12px; }
.cta-strip p { color: rgba(255,255,255,.85); font-size: 17px; margin-bottom: 24px; }
.cta-strip__buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }

/* ----- Media + depth components --------------------------------- */
.card-photo {
	margin: -28px -26px 18px;
	border-radius: var(--radius) var(--radius) 0 0;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--gray-100);
	background-image: linear-gradient(177deg, #ffffff, #f6f9f9);
}
.card-photo img { width: 100%; height: 100%; object-fit: cover; }

.media-figure { margin: 32px 0; }
.media-figure img {
	width: 100%;
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(7,63,66,.04);
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background-image: linear-gradient(177deg, #ffffff, #f6f9f9);
}
.media-figure figcaption {
	margin-top: 10px;
	font-size: 13px;
	color: var(--gray-500);
	text-align: center;
}

.split { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 860px) { .split { grid-template-columns: 1fr 1fr; } .split--media-first .split__media { order: -1; } }
.split__media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(7,63,66,.04); aspect-ratio: 16 / 9; object-fit: cover; }

.usecases { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 8px; }
@media (min-width: 720px) { .usecases { grid-template-columns: repeat(3, 1fr); } }
.usecase {
	background: #fff;
	background-image: linear-gradient(177deg, #ffffff, #f6f9f9);
	border: 1px solid var(--gray-200);
	border-top: 3px solid var(--teal);
	border-radius: var(--radius);
	padding: 24px 22px;
}
.usecase h3 { font-size: 17px; font-weight: 600; margin: 0 0 8px; }
.usecase p { font-size: 14.5px; color: var(--gray-600); margin: 0 0 12px; }
.usecase .usecase__pick { font-size: 13px; font-weight: 700; color: var(--teal-deep); text-transform: uppercase; letter-spacing: .04em; }

.ct { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14.5px; }
.ct th, .ct td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--gray-200); vertical-align: top; }
.ct thead th { border-bottom: 2px solid var(--teal); font-weight: 700; color: var(--gray-800); background-image: linear-gradient(180deg, #fff, #f3f7f7); }
.ct tbody th { font-weight: 600; color: var(--gray-700); width: 30%; }
.ct tr:last-child td, .ct tr:last-child th { border-bottom: 0; }
.ct--zebra tbody tr:nth-child(even) { background: var(--gray-50); }
.table-wrap { overflow-x: auto; }

.stat-band { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; text-align: center; }
@media (min-width: 760px) {
	.stat-band { grid-template-columns: repeat(4, 1fr); }
	.stat-band .stat + .stat { border-left: 1px solid rgba(255,255,255,.10); }
}
.stat { position: relative; padding-top: 14px; }
.stat::before {
	content: "";
	position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	width: 26px; height: 3px; border-radius: 2px;
	background: var(--gold);
}
.stat .stat__num { font-size: 40px; font-weight: 700; color: var(--teal-deep); line-height: 1.1; font-family: var(--font-mono); }
.stat .stat__label { font-size: 13px; color: var(--gray-600); margin-top: 6px; }
.section-dark .stat__num { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.28); }
.section-dark .stat__label { color: rgba(255,255,255,.7); }

.diagram {
	margin: 28px 0;
	background: #fff;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius);
	padding: 22px;
	box-shadow: var(--shadow-sm);
	background-image: linear-gradient(177deg, #ffffff, #f6f9f9);
}
.diagram svg { width: 100%; height: auto; display: block; }
.diagram figcaption { margin-top: 12px; font-size: 13px; color: var(--gray-500); text-align: center; }
.diagram--flow { padding: 14px 18px; }

/* ----- News tag pill -------------------------------------------- */
.news-tag {
	display: inline-block;
	background: var(--teal);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 3px;
	line-height: 1;
}

/* ----- Footer --------------------------------------------------- */
.site-footer {
	position: relative;
	background:
		radial-gradient(80% 120% at 90% 0%, rgba(42,133,136,.30), transparent 55%),
		linear-gradient(180deg, #062f32, #05282b);
	color: rgba(255,255,255,.72);
	padding: 60px 0 28px;
	font-size: 13.5px;
}
.site-footer::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--gold), var(--teal-light) 60%, transparent);
}
/* ----- Estate directory band (routes into the live credicorp.co.uk estate) --- */
.site-footer__estate {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	padding: 20px 22px;
	margin-bottom: 30px;
	background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
	border: 1px solid rgba(255,255,255,.14);
	border-radius: var(--radius-lg);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
@media (min-width: 860px) {
	.site-footer__estate {
		grid-template-columns: minmax(220px, 1fr) auto;
		align-items: center;
		gap: 20px 32px;
	}
	.site-footer__estate-links { grid-column: 1 / -1; }
}
.site-footer__estate-copy h4 {
	margin: 0 0 6px;
	color: #fff;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.site-footer__estate-copy p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: rgba(255,255,255,.72);
	max-width: 46ch;
}
.site-footer__estate-copy a { color: var(--gold-soft); text-decoration: none; }
.site-footer__estate-copy a:hover { color: #fff; text-decoration: underline; }
.site-footer__estate-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.estate-chip {
	display: inline-flex;
	align-items: center;
	padding: 7px 13px;
	border-radius: 999px;
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.16);
	color: rgba(255,255,255,.86) !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none !important;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.estate-chip:hover {
	background: var(--teal-light);
	border-color: var(--teal-light);
	color: #fff !important;
}
.site-footer__estate-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.site-footer__estate-btn { white-space: nowrap; }

/* ----- Small content-spacing utilities (replace former inline styles) ------- */
.cc-lead--tight { margin-bottom: 14px; }
.cc-text--sm { font-size: 15px; }
.cc-text--flush { margin-bottom: 0; }
.cc-note-cta { text-align: center; margin: 22px 0 0; font-size: 14px; }
.cc-media-band__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.site-footer__brand-lede { margin: 0; }

.site-footer__brand {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	padding-bottom: 28px;
	margin-bottom: 28px;
	border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (min-width: 700px) {
	.site-footer__brand { grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
}
.site-footer__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	padding-bottom: 24px;
	margin-bottom: 22px;
	border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (min-width: 720px) {
	.site-footer__nav { grid-template-columns: repeat(4, 1fr); gap: 28px; }
}
.site-footer__reg { margin-top: 10px; font-size: 12.5px; color: rgba(255,255,255,.55); }
.site-footer h4 {
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0 0 14px;
}
.site-footer a { color: rgba(255,255,255,.75); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 6px; line-height: 1.6; }
.site-footer address { font-style: normal; line-height: 1.6; color: rgba(255,255,255,.7); }
.site-footer__logo {
	background: #fff;
	padding: 8px 12px;
	border-radius: 4px;
	display: inline-block;
	margin-bottom: 14px;
	position: relative;
}
.site-footer__logo img { height: 32px; width: auto; }
.site-footer__tm { position: absolute; top: 5px; right: 4px; font-size: 9px; font-weight: 700; color: var(--gold-deep); line-height: 1; }
.legal-bar {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 18px;
	font-size: 12.5px;
	color: rgba(255,255,255,.5);
}

/* ----- Accessibility -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; animation: none !important; }
}

/* ----- Print --------------------------------------------------- */
@media print {
	.site-header, .site-footer, .utility-bar, .hero__cta, .cta-strip { display: none; }
	body { background: #fff; color: #000; }
	.hero { padding: 24px 0; background: none; color: #000; }
	.hero h1, .hero p.lead { color: #000; }
	.hero__bg, .hero__overlay { display: none; }
	.cc-hero, .cc-mascot, .cc-tm { box-shadow: none !important; }
}

/* =====================================================================
   PART B — creditcorponline.co.uk FRONT-DOOR LAYER (.cc-* extensions)
   Richer photo hero, product cards, the "Credi" mascot block, a
   trade-mark comparison block, and a teal/gold skeuo polish. These
   extend the cloned chrome above; they never rename group classes.
   ===================================================================== */

/* ----- Richer photo hero (extends .hero) ------------------------ */
/* Use on the home hero as: <section class="hero cc-hero"> ... with a
   <picture>/<img class="cc-hero__photo"> for the right-hand image. */
.cc-hero { padding: 96px 0 88px; }
@media (max-width: 768px) { .cc-hero { padding: 56px 0 52px; } }
.cc-hero .hero__inner { text-align: left; }
.cc-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: center;
}
@media (min-width: 900px) { .cc-hero__grid { grid-template-columns: 1.05fr .95fr; gap: 56px; } }
.cc-hero h1 { margin-left: 0; margin-right: 0; max-width: 16ch; font-size: 50px; }
@media (max-width: 768px) { .cc-hero h1 { font-size: 32px; } }
.cc-hero p.lead { margin-left: 0; margin-right: 0; max-width: 54ch; }
.cc-hero .hero__cta { justify-content: flex-start; }

/* The brass eyebrow pill — warmer than the base .hero__eyebrow */
.cc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	margin-bottom: 22px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #f3e2c2;
	background: rgba(192,138,45,.18);
	border: 1px solid rgba(217,169,69,.5);
	border-radius: 999px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.cc-eyebrow .dot {
	width: 7px; height: 7px; border-radius: 50%; flex: none;
	background: var(--gold-soft);
	box-shadow: 0 0 0 3px rgba(217,169,69,.2);
}

/* Hero photo: framed, layered teal-tinted depth (light, not glow) */
.cc-hero__media { position: relative; }
.cc-hero__photo {
	width: 100%;
	border-radius: var(--radius-lg);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 1px solid rgba(255,255,255,.16);
	box-shadow:
		0 2px 4px rgba(7,63,66,.20),
		0 18px 40px rgba(7,63,66,.30),
		inset 0 1px 0 rgba(255,255,255,.22);
}
@media (min-width: 900px) { .cc-hero__photo { aspect-ratio: 5 / 4; } }
/* A small floating brass caption chip over the photo corner */
.cc-hero__chip {
	position: absolute;
	left: 16px; bottom: 16px;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 14px;
	background: rgba(7,63,66,.78);
	-webkit-backdrop-filter: blur(6px);
	        backdrop-filter: blur(6px);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 999px;
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	box-shadow: 0 6px 16px rgba(7,63,66,.30);
}
.cc-hero__chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-soft); flex: none; }

/* Full-bleed photo band with overlaid caption (reusable, like the splash) */
.cc-shot { margin: 0; position: relative; line-height: 0; }
.cc-shot img { width: 100%; height: clamp(200px, 24vw, 360px); object-fit: cover; object-position: center 32%; display: block; }
.cc-shot::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(7,63,66,0) 34%, rgba(7,63,66,.55) 66%, rgba(7,63,66,.92) 100%);
}
.cc-shot figcaption {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	padding: 18px 30px 20px; max-width: 52ch; line-height: 1.45;
	color: #fff; font-size: 1.02rem; font-weight: 700;
	text-shadow: 0 1px 10px rgba(0,16,18,.6);
}
.cc-shot--container figcaption { left: 50%; transform: translateX(-50%); width: var(--container); max-width: 100%; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ----- Product / feature cards (.cc-pcard) ---------------------- */
/* A punchier product card with a top photo strip + icon + go-link. */
.cc-pgrid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 680px)  { .cc-pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .cc-pgrid--3 { grid-template-columns: repeat(3, 1fr); } }

.cc-pcard {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	background: #fff;
	background-image: linear-gradient(177deg, #ffffff, #f6f9f9);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--sk-raised);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cc-pcard:hover {
	transform: translateY(-4px);
	box-shadow: var(--sk-hover);
	border-color: var(--teal-mist);
	text-decoration: none;
	color: inherit;
}
.cc-pcard__photo {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--gray-100);
}
.cc-pcard__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.cc-pcard:hover .cc-pcard__photo img { transform: scale(1.04); }
.cc-pcard__photo::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(7,63,66,0) 55%, rgba(7,63,66,.42) 100%);
}
.cc-pcard__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cc-pcard__icon {
	width: 46px; height: 46px; border-radius: 12px;
	display: inline-flex; align-items: center; justify-content: center;
	margin-top: -44px; position: relative; z-index: 2;
	background: linear-gradient(180deg, #fff, var(--teal-wash));
	color: var(--teal-deep);
	border: 1px solid var(--teal-mist);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(7,63,66,.16);
}
.cc-pcard:hover .cc-pcard__icon {
	background: linear-gradient(180deg, var(--gold-wash), #f2e6cb);
	color: var(--gold-deep);
	border-color: #ecdcb6;
}
.cc-pcard__icon svg { width: 22px; height: 22px; }
.cc-pcard__meta {
	font-size: 11px; font-weight: 700; letter-spacing: .07em;
	text-transform: uppercase; color: var(--teal-light);
}
.cc-pcard h3 { margin: 0; font-size: 19px; font-weight: 700; color: var(--gray-800); letter-spacing: -.01em; }
.cc-pcard p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--gray-600); flex: 1; }
.cc-pcard__go {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 13.5px; font-weight: 700; color: var(--teal);
	text-transform: uppercase; letter-spacing: .03em;
	margin-top: 4px;
}
.cc-pcard:hover .cc-pcard__go { color: var(--teal-darker); }
.cc-pcard__go svg { width: 14px; height: 14px; transition: transform .15s ease; }
.cc-pcard:hover .cc-pcard__go svg { transform: translateX(3px); }

/* ----- "Credi" mascot block (.cc-mascot) ------------------------ */
/* A friendly signpost block pairing the Credi robot SVG with a CTA.
   Drop the inline <svg class="credi-bot"> from the splash inside
   .cc-mascot__bot. Works on light sections; .cc-mascot--dark for teal. */
.cc-mascot {
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
	align-items: center;
	background: linear-gradient(135deg, var(--teal-wash) 0%, #fff 100%);
	border: 1px solid var(--teal-mist);
	border-radius: var(--radius-lg);
	padding: 30px 32px;
	box-shadow: var(--sk-raised);
}
@media (min-width: 720px) { .cc-mascot { grid-template-columns: auto 1fr auto; gap: 32px; } }
.cc-mascot__bot { display: flex; justify-content: center; align-items: center; }
.cc-mascot__bot .credi-bot,
.cc-mascot__bot svg {
	width: 132px; height: auto; display: block;
	filter: drop-shadow(0 14px 22px rgba(7,63,66,.28));
}
@media (max-width: 720px) { .cc-mascot__bot .credi-bot, .cc-mascot__bot svg { width: 108px; } }
.cc-mascot__copy { min-width: 0; }
.cc-mascot__label {
	font-size: 11px; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: var(--teal-light); margin: 0 0 6px;
}
.cc-mascot__copy h2 { font-size: 24px; font-weight: 700; color: var(--gray-800); margin: 0 0 8px; letter-spacing: -.01em; }
.cc-mascot__copy p { font-size: 15px; color: var(--gray-600); margin: 0; max-width: 50ch; }
.cc-mascot__action { display: flex; justify-content: center; }
/* Dark variant — Credi on a teal slab */
.cc-mascot--dark {
	background:
		radial-gradient(90% 140% at 85% 0%, rgba(42,133,136,.35), transparent 55%),
		linear-gradient(150deg, #06363a, #0d5356);
	border-color: rgba(255,255,255,.10);
	box-shadow: var(--sk-raised), inset 0 1px 0 rgba(255,255,255,.06);
}
.cc-mascot--dark .cc-mascot__label { color: var(--gold-soft); }
.cc-mascot--dark .cc-mascot__copy h2 { color: #fff; }
.cc-mascot--dark .cc-mascot__copy p { color: rgba(255,255,255,.82); }
.cc-mascot--dark .cc-mascot__bot .credi-bot,
.cc-mascot--dark .cc-mascot__bot svg { filter: drop-shadow(0 16px 26px rgba(0,20,20,.42)); }

/* ----- Trade-mark comparison block (.cc-tm) --------------------- */
/* A two-column "registered vs pending" mark comparison with badges. */
.cc-tm {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	background: linear-gradient(135deg, var(--gold-wash) 0%, #fff 120%);
	border: 1px solid #ecdcb6;
	border-radius: var(--radius-lg);
	padding: 28px 30px;
	box-shadow: var(--sk-raised);
}
@media (min-width: 720px) { .cc-tm { grid-template-columns: 1fr 1fr; gap: 22px 30px; } }
.cc-tm__mark {
	background: #fff;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius);
	padding: 20px 22px;
	box-shadow: var(--shadow-sm);
}
.cc-tm__name {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	font-size: 18px; font-weight: 700; color: var(--gray-800); margin: 0 0 10px;
}
.cc-tm__badge {
	display: inline-block;
	font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
	padding: 3px 10px; border-radius: 999px; color: #fff;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.cc-tm__badge--reg  { background: var(--teal); }
.cc-tm__badge--pend { background: var(--gold); }
.cc-tm__row { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px dotted var(--gray-200); font-size: 13.5px; }
.cc-tm__row:last-child { border-bottom: 0; }
.cc-tm__row .k { color: var(--gray-500); font-weight: 600; }
.cc-tm__row .v { color: var(--gray-700); text-align: right; font-family: var(--font-mono); font-size: 12.5px; }
.cc-tm__note {
	grid-column: 1 / -1;
	margin: 4px 0 0;
	font-size: 13.5px; line-height: 1.6; color: var(--gray-600);
}
.cc-tm__note a { color: var(--teal-deep); font-weight: 600; }

/* ----- Disambiguation note (.cc-note) --------------------------- */
/* Recessed "make sure you have the right Credicorp" panel. */
.cc-note {
	background: var(--gray-100);
	border: 1px solid var(--gray-200);
	border-left: 3px solid var(--gold);
	border-radius: var(--radius);
	padding: 20px 22px;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--gray-600);
	box-shadow: var(--sk-inset);
}
.cc-note strong { color: var(--gray-800); }

/* ----- Two-up signpost block (.cc-signpost) --------------------- */
/* "Here to borrow?" routing block — copy left, big CTA right. */
.cc-signpost {
	display: flex;
	gap: 22px;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	background: linear-gradient(135deg, var(--teal-wash) 0%, #fff 100%);
	border: 1px solid var(--teal-mist);
	border-radius: var(--radius-lg);
	padding: 26px 30px;
	box-shadow: var(--sk-raised);
}
.cc-signpost__label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-light); margin: 0 0 5px; }
.cc-signpost h2 { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: var(--gray-800); letter-spacing: -.01em; }
.cc-signpost p { margin: 0; font-size: 15px; color: var(--gray-600); max-width: 52ch; }
.cc-signpost__action { flex: none; }

/* ----- Inline brass divider (.cc-rule) -------------------------- */
.cc-rule { border: 0; height: 1px; background: var(--gray-200); margin: 36px 0; }
/* inline-block so the bar renders on a bare <span> too (inline elements
   ignore width/height) — several pages mark it up as <span class="cc-rule--accent">. */
.cc-rule--accent { display: inline-block; height: 3px; width: 54px; border-radius: 2px; background: linear-gradient(90deg, var(--teal), var(--gold)); margin: 0 0 22px; }
/* ===== UTILITY-BAR + FOOTER-LOGO POLISH (2026-06-19) ===== */
.utility-bar { background: linear-gradient(180deg, var(--teal-darker) 0%, var(--teal-deep) 100%) !important;
  padding: 9px 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.16);
  border-bottom: 1px solid rgba(192,138,45,.30); }
.utility-bar .crumbs { color: rgba(255,255,255,.64); }
.utility-bar .crumbs a { color: rgba(255,255,255,.80); }
.utility-bar .crumbs a:hover { color: #fff; }
.utility-bar__sep { display:inline-block; flex:none; width:1px; height:15px; background:rgba(255,255,255,.22); }
.utility-bar__cta { border:1px solid rgba(255,255,255,.32); background:rgba(255,255,255,.09);
  border-radius:999px; padding:4px 13px; font-weight:600; box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  transition:background .15s ease,border-color .15s ease; }
.utility-bar__cta:hover { background:rgba(255,255,255,.17); border-color:rgba(255,255,255,.55); color:#fff; }
/* footer logo reversed to white so the wordmark reads on the dark teal footer */
.site-footer__logo img { filter: brightness(0) invert(1); }
/* drop the white plate behind the footer logo — reversed-white mark sits on the teal footer */
.site-footer__logo { background: transparent; padding: 0; border-radius: 0; box-shadow: none; margin-bottom: 16px; }
.site-footer__logo img { height: 34px; }
/* nav: keep multi-word items (e.g. "Trade marks") on one line; tighten gap for 7 items + CTA */
.header-nav .nav-link, .header-nav a { white-space: nowrap; }
.header-nav { gap: 12px; font-size: 13px; }
.header-nav .nav-link--modal { font-size: 13px; }
.site-header .header-nav .btn--lg { padding-inline: 12px; }
.cc-source-list { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.cc-source-list li { padding: 12px 14px; border: 1px solid var(--gray-200); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-xs); }
.cc-source-list a { font-weight: 700; color: var(--teal-deep); }
.cc-source-list span { display: block; margin-top: 2px; color: var(--gray-500); font-size: 13px; }

/* =====================================================================
   PART C — BOLD ELEVATION PASS (2026-06-20)
   Purely ADDITIVE. Brings the flagship "bold" depth to the cloned group
   components, which until now used the flat single-layer --shadow-sm.
   It promotes those panels/cards to the site's OWN layered skeuo
   vocabulary (--sk-raised / --sk-hover), deepens the glyph marks (badges,
   the FAQ +/- node, the compare arrow) with a darker brand-colour
   gradient + a faint top inset highlight + white glyph, and adds a thin
   brand keyline to the primary panels. NEUTRAL (teal-tinted) shadows
   only — no coloured glows. No new selectors are renamed; every existing
   rule above still applies and this only layers on top. Hover lift is
   reserved for genuinely interactive cards, never static text blocks.
   ===================================================================== */

/* ----- Local elevation helpers (teal-tinted, neutral) ------------- */
:root {
	/* A thin contact shadow paired with the existing ambient ones, so a
	   raised panel reads as truly lifted off the page, not floated. */
	--cc-contact:     0 1px 1px rgba(7,63,66,.05);
	/* Gloss for circular/pill glyph marks: a soft top inset highlight
	   over a darker brand gradient fill (set per-mark below). */
	--cc-mark-gloss:  inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 1px rgba(7,63,66,.30);
}

/* ----- Panels & cards: flat --shadow-sm -> layered --sk-raised ---- */
/* These were the cloned group components still on the single-layer
   shadow; lift them into the same depth language as the .cc-* cards. */
.company-card,
.backlink-panel,
.usecase,
.diagram,
.cc-tm__mark,
.compare__card,
.feature {
	box-shadow: var(--sk-raised), var(--cc-contact);
}

/* A thin teal->gold brand keyline along the top of the primary panels.
   The .backlink-panel / .usecase already declare a flat 3px teal
   border-top; we keep that selector intact and merely paint a gradient
   over it via a pseudo-element so the colour system is preserved. */
.company-card,
.cc-tm__mark { position: relative; }
.company-card::before,
.cc-tm__mark::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	background: linear-gradient(90deg, var(--teal), var(--gold));
	opacity: .9;
	pointer-events: none;
}
.cc-tm__mark::before { border-radius: var(--radius) var(--radius) 0 0; }

/* Upgrade the flat top border on backlink panels / usecases to a richer
   gradient keyline (same hues, just layered) without removing the rule
   above — a pseudo strip sits exactly over the existing 3px line. */
.backlink-panel,
.usecase { position: relative; }
.backlink-panel::before,
.usecase::before {
	content: "";
	position: absolute;
	top: -3px; left: -1px; right: -1px;
	height: 3px;
	border-radius: var(--radius) var(--radius) 0 0;
	background: linear-gradient(90deg, var(--teal), var(--gold));
	pointer-events: none;
}

/* ----- Interactive cards: gentle hover lift (NOT on static text) -- */
/* .company-card and .cc-tm__mark are clickable / signpost cards; give
   them the same lift the .cc-pcard already has. .usecase and .cc-note
   are static text — deliberately left without a hover transform. */
.company-card,
.cc-tm__mark {
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.company-card:hover,
.cc-tm__mark:hover {
	transform: translateY(-3px);
	box-shadow: var(--sk-hover), var(--cc-contact);
	border-color: var(--teal-mist);
}

/* ----- Glyph marks: real gloss (darker gradient + inset hi + white) */

/* Trade-mark status badges — were a flat single-colour fill. Give them a
   darker brand-colour gradient with a faint top highlight; glyph stays
   white for AA contrast (both teal-deep and gold-deep carry white text). */
.cc-tm__badge {
	background-image: none; /* reset, real fill set per-variant below */
	text-shadow: 0 1px 0 rgba(7,63,66,.28);
	box-shadow: var(--cc-mark-gloss);
}
.cc-tm__badge--reg {
	background: linear-gradient(180deg, var(--teal-light), var(--teal) 55%, var(--teal-deep));
}
.cc-tm__badge--pend {
	background: linear-gradient(180deg, var(--gold-soft), var(--gold) 55%, var(--gold-deep));
}

/* FAQ +/- node — the open-state filled circle gets a glossy teal sphere
   instead of a flat fill; the closed wash node gets a subtle raised edge. */
.faq-item summary::after {
	box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(7,63,66,.10);
}
.faq-item[open] summary::after {
	background: linear-gradient(180deg, var(--teal-light), var(--teal) 55%, var(--teal-deep));
	box-shadow: var(--cc-mark-gloss);
}

/* Compare arrow node — flat teal disc -> glossy teal sphere with a white
   glyph (the .compare block is template parity; elevated for consistency). */
.compare__arrow .icon {
	background: linear-gradient(180deg, var(--teal-light), var(--teal) 55%, var(--teal-deep));
	box-shadow: var(--cc-mark-gloss), 0 4px 10px rgba(7,63,66,.18);
	text-shadow: 0 1px 0 rgba(7,63,66,.30);
}

/* Trust-strip / eyebrow dots — already gold spheres; deepen the dome so
   the small marks read as physical pips rather than flat dots. */
.trust-strip__items .dot {
	background-image: radial-gradient(circle at 35% 28%, #ecca84, var(--gold) 62%, var(--gold-deep));
}

/* ----- Stat marks: lift the number band off the dark slab ---------- */
/* The big stat numbers sit on the dark section; a faint accent cap above
   each already exists. Give the cap a touch more presence and let the
   numerals carry a crisper edge. Colour + contrast unchanged. */
.stat::before {
	background: linear-gradient(90deg, var(--gold-soft), var(--gold));
	box-shadow: 0 1px 2px rgba(0,0,0,.28);
}

/* ----- News tag pill: flat fill -> subtle glossy brand pill -------- */
.news-tag {
	background: linear-gradient(180deg, var(--teal-light), var(--teal) 55%, var(--teal-deep));
	box-shadow: var(--cc-mark-gloss);
	text-shadow: 0 1px 0 rgba(7,63,66,.28);
}

/* ----- Recessed note: a hair more depth on the inset well ---------- */
/* .cc-note is a static text block — no hover, just a slightly deeper
   recess so it reads as genuinely sunken below the page surface. */
.cc-note {
	box-shadow: var(--sk-inset), 0 1px 0 rgba(255,255,255,.6);
}

/* Reduced-motion users already get transitions stripped by the rule in
   PART A; the transforms above simply never animate for them. */

/* ===== NAV DOUBLE-LINE FIX + SEARCH PAGE (2026-06-20) ===== */
/* nav links: only the ::after bar underlines; kill the global a:hover underline (was a double line) */
.header-nav a:hover, .header-nav a:focus, .header-nav .nav-link:hover, .header-nav .nav-link:focus { text-decoration: none; }

.container--narrow { max-width: 760px; }
.search-page { padding-block: clamp(40px, 6vw, 96px); }
.search-page h1 { margin: 6px 0 8px; }
.search-page .lead { color: var(--gray-500, #6a7373); margin: 0 0 26px; }
.search-box { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--gray-200, #dde4e4); border-radius: 14px; padding: 14px 18px; box-shadow: 0 1px 2px rgba(7,63,66,.07), 0 10px 26px rgba(7,63,66,.08); transition: border-color .15s ease, box-shadow .15s ease; }
.search-box:focus-within { border-color: var(--teal-mist, #d6e8e9); box-shadow: 0 0 0 4px rgba(17,103,106,.12), 0 10px 26px rgba(7,63,66,.10); }
.search-box__icon { width: 22px; height: 22px; color: var(--teal, #11676a); flex: none; }
.search-box input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 1.05rem; color: var(--gray-800, #1c2222); }
.search-count { font-size: .85rem; color: var(--gray-500, #6a7373); margin: 18px 2px 12px; font-weight: 600; }
.search-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.search-result a { display: block; text-decoration: none; background: #fff; border: 1px solid var(--gray-200, #dde4e4); border-radius: 12px; padding: 16px 18px; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.search-result a:hover { border-color: var(--teal-mist, #d6e8e9); box-shadow: 0 3px 8px rgba(7,63,66,.09), 0 14px 30px rgba(7,63,66,.11); transform: translateY(-2px); text-decoration: none; }
.search-result__section { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--teal-light, #2a8588); margin-bottom: 3px; }
.search-result__title { display: block; font-size: 1.05rem; font-weight: 700; color: var(--gray-800, #1c2222); letter-spacing: -.01em; }
.search-result a:hover .search-result__title { color: var(--teal-darker, #073f42); }
.search-result__desc { display: block; font-size: .9rem; line-height: 1.55; color: var(--gray-500, #6a7373); margin-top: 4px; }
.search-empty { color: var(--gray-500, #6a7373); padding: 20px 2px; }

/* ===== HERO EYEBROW REDESIGN (2026-06-21) — refined frosted-glass pill (was a loud gold pill) ===== */
.cc-eyebrow {
	color: rgba(255,255,255,.94);
	background: rgba(255,255,255,.10);
	border: 1px solid rgba(255,255,255,.24);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.20);
	-webkit-backdrop-filter: blur(8px) saturate(120%);
	        backdrop-filter: blur(8px) saturate(120%);
	letter-spacing: .1em;
	gap: 9px;
}
.cc-eyebrow .dot { width: 6px; height: 6px; background: var(--gold-soft, #d9a945); box-shadow: 0 0 0 3px rgba(217,169,69,.28); }
.cc-eyebrow__sep { margin: 0 9px; color: rgba(255,255,255,.42); font-weight: 400; }

/* directory/signpost cards: inline icon SVGs ship with viewBox only (no width/height) — constrain them so the arrow/icons do not balloon to fill the card */
.feature__more { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.feature__more svg { width: 16px; height: 16px; flex: none; }
.feature__icon svg { width: 22px; height: 22px; }
.cc-signpost__action svg, .cc-signpost svg { width: 15px; height: 15px; flex: none; }

/* ===== Media cards — photo header, even height, link pinned to bottom ===== */
.feature--media { padding: 0; display: flex; flex-direction: column; height: 100%; }
.feature--media .feature__media {
	position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
	background: linear-gradient(140deg, var(--teal-wash), #eef4f4);
}
.feature--media .feature__media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.feature--media:hover .feature__media img { transform: scale(1.06); }
.feature--media .feature__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(200deg, rgba(7,63,66,0) 52%, rgba(7,63,66,.46));
}
.feature--media .feature__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 0 26px 26px; }
.feature--media .feature__icon {
	margin: -28px 0 15px; position: relative; z-index: 2; background: #fff;
	box-shadow: 0 8px 20px rgba(7,63,66,.16), inset 0 1px 0 rgba(255,255,255,.92);
}
.feature--media .feature__more { margin-top: auto; padding-top: 14px; }
.feature--media::before { z-index: 3; }
@media (min-width: 992px) { .feature--media .feature__media { aspect-ratio: 16 / 11; } }

/* ===== FEATURE PHOTOGRAPHY (2026-06-21) — additive editorial imagery =====
   Two reusable wrappers for the CC0 stock library in /assets/img/lib/.
   They reuse the existing token vocabulary only (--radius-lg, --shadow-md,
   --gray-*, --teal-*, --sk-*) — no new palette. NEUTRAL teal-tinted depth,
   no coloured glows. Both are static editorial figures (no hover lift). */

/* A framed standalone feature figure — sits full-width directly under a
   page hero or inside a content section. Layered, lifted off the page. */
.cc-feature-figure {
	margin: 0 0 8px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: linear-gradient(177deg, #ffffff, #f6f9f9);
	border: 1px solid var(--gray-200);
	box-shadow: var(--sk-raised), var(--cc-contact);
	position: relative;
	line-height: 0;
}
.cc-feature-figure img {
	width: 100%;
	height: clamp(220px, 30vw, 440px);
	object-fit: cover;
	display: block;
}
/* Optional brass keyline cap to tie it to the panels above/below it. */
.cc-feature-figure::before {
	content: "";
	position: absolute; top: 0; left: 0; right: 0;
	height: 3px; z-index: 1;
	background: linear-gradient(90deg, var(--teal), var(--gold));
	opacity: .9; pointer-events: none;
}
/* A soft caption chip, optional, pinned to a lower corner. */
.cc-feature-figure figcaption {
	position: absolute; left: 16px; bottom: 16px; z-index: 2;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 14px; line-height: 1.3;
	background: rgba(7,63,66,.78);
	-webkit-backdrop-filter: blur(6px);
	        backdrop-filter: blur(6px);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 999px;
	color: #fff; font-size: 12.5px; font-weight: 600;
	box-shadow: 0 6px 16px rgba(7,63,66,.30);
}
.cc-feature-figure figcaption .dot {
	width: 7px; height: 7px; border-radius: 50%; flex: none;
	background: var(--gold-soft);
}

/* A side-by-side image + text band — image one side, copy the other.
   Stacks on small screens; reverse the order with --media-first. */
.cc-media-band {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: center;
}
@media (min-width: 860px) {
	.cc-media-band { grid-template-columns: 1fr 1fr; gap: 40px; }
	.cc-media-band--media-first .cc-media-band__media { order: -1; }
}
.cc-media-band__media {
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: linear-gradient(177deg, #ffffff, #f6f9f9);
	border: 1px solid var(--gray-200);
	box-shadow: var(--sk-raised), var(--cc-contact);
	aspect-ratio: 3 / 2;
	line-height: 0;
}
.cc-media-band__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-media-band__copy { min-width: 0; }
.cc-media-band__copy .cc-rule--accent { margin-bottom: 16px; }
.cc-media-band__copy h2,
.cc-media-band__copy h3 { margin-top: 0; }
.cc-media-band__copy p:last-child { margin-bottom: 0; }
/* Paired figures (home "one group, one place" band) — two photos side by side. */
.cc-media-pair { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 560px) { .cc-media-pair { grid-template-columns: 1fr 1fr; } }
.cc-media-pair .cc-media-band__media { aspect-ratio: 4 / 3; }

/* =====================================================================
   DESIGN UPLIFT (2026-06-24) — deep neutral skeuomorphism, matching
   the creditcorp.co.uk and creditcorpgroup.co.uk design bar.
   Overrides the original teal-tinted shadow tokens with neutral navy.
   ===================================================================== */
:root {
	--navy-950: #06131f;
	--navy-900: #0b1f33;
	--navy-850: #102b46;
	--navy-800: #163856;
	--line: rgba(6,19,31,.12);
	--line-strong: rgba(6,19,31,.18);
	--paper: #ffffff;
	--paper-warm: #f8faf9;
	--focus-ring: #0b1f33;
	--shadow-sm: 0 1px 1px rgba(6,19,31,.05), 0 2px 4px rgba(6,19,31,.06);
	--shadow-md: 0 1px 1px rgba(6,19,31,.06), 0 8px 18px rgba(6,19,31,.10), 0 18px 34px rgba(6,19,31,.08);
	--shadow-lg: 0 2px 3px rgba(6,19,31,.08), 0 16px 30px rgba(6,19,31,.13), 0 36px 72px rgba(6,19,31,.12);
	--sk-raised: inset 0 1px 0 rgba(255,255,255,.88), 0 1px 1px rgba(6,19,31,.06), 0 6px 14px rgba(6,19,31,.10), 0 18px 36px rgba(6,19,31,.08);
	--sk-raised-lg: inset 0 1px 0 rgba(255,255,255,.92), 0 2px 3px rgba(6,19,31,.08), 0 14px 28px rgba(6,19,31,.13), 0 34px 68px rgba(6,19,31,.12);
	--sk-hover: inset 0 1px 0 rgba(255,255,255,.95), 0 3px 5px rgba(6,19,31,.08), 0 20px 38px rgba(6,19,31,.15), 0 42px 78px rgba(6,19,31,.12);
	--sk-inset: inset 0 2px 4px rgba(6,19,31,.13), inset 0 1px 2px rgba(6,19,31,.08);
	--sk-cta: inset 0 1px 0 rgba(255,255,255,.26), 0 1px 2px rgba(6,19,31,.18), 0 8px 18px rgba(6,19,31,.18);
	--sk-cta-hover: inset 0 1px 0 rgba(255,255,255,.32), 0 2px 4px rgba(6,19,31,.18), 0 14px 28px rgba(6,19,31,.22);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.nav-menu__link:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 3px;
	box-shadow: none;
}

.site-header {
	background: rgba(255,255,255,.90);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	        backdrop-filter: saturate(160%) blur(14px);
	border-bottom-color: rgba(6,19,31,.12);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 1px 2px rgba(6,19,31,.06), 0 12px 26px rgba(6,19,31,.08);
}
.nav-dropdown,
.nav-menu__panel {
	background: rgba(255,255,255,.94);
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	        backdrop-filter: blur(14px) saturate(150%);
	border-color: var(--line);
	box-shadow: var(--sk-raised-lg);
}

.btn--primary,
.btn--primary:link,
.btn--primary:visited {
	background: linear-gradient(180deg, #1d486c 0%, var(--navy-900) 58%, var(--navy-950) 100%);
	border-color: rgba(6,19,31,.72);
	box-shadow: var(--sk-cta);
}
.btn--primary:hover,
.btn--primary:active,
.btn--primary:focus {
	background: linear-gradient(180deg, #25567e 0%, #102b46 58%, #06131f 100%);
	box-shadow: var(--sk-cta-hover);
}
.btn--white,
.btn--ghost,
.nav-menu > summary {
	box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 1px 1px rgba(6,19,31,.05), 0 6px 14px rgba(6,19,31,.08);
}

section.section-gray {
	background:
		linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,0)),
		#f4f6f6;
	border-color: var(--line);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.86), inset 0 -1px 0 rgba(6,19,31,.05);
}
.section-head p,
.lead {
	color: #4f5e62;
}

.feature,
.backlink-panel,
.faq-item,
.compare__card,
.company-card,
.usecase,
.cc-media-band__media {
	border-color: var(--line);
	box-shadow: var(--sk-raised);
}
.feature,
.backlink-panel,
.faq-item,
.compare__card,
.company-card,
.usecase {
	background-image: linear-gradient(180deg, #fff 0%, #fbfcfc 56%, #f2f6f6 100%);
}
.feature:hover,
.feature--link:hover,
.compare__card:hover,
.company-card:hover {
	box-shadow: var(--sk-hover);
}

.ct,
.table-wrap table {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--sk-raised);
	overflow: hidden;
}
.ct th,
.ct td {
	border-color: rgba(6,19,31,.10);
}
.ct thead th {
	background: linear-gradient(180deg, #fff, #edf3f3);
	border-bottom-color: var(--navy-850);
}

.plain-list li::marker {
	color: var(--navy-850);
}

.site-footer {
	box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 18px 38px rgba(255,255,255,.03);
}

@media (max-width: 768px) {
	.container,
	.container--narrow,
	.site-header__inner,
	.utility-bar__inner,
	.hero__inner {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}
	.btn,
	.btn--lg {
		justify-content: center;
		width: 100%;
		max-width: 100%;
		white-space: normal;
		text-align: center;
	}
	.hero__cta,
	.cta-strip__buttons {
		width: 100%;
	}
	.company-card,
	.feature,
	.backlink-panel {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* =====================================================================
   DESKTOP RECOMPOSE (2026-06-29) — wide-screen reflow + scale calm-down.
   PURELY ADDITIVE. Every rule below lives inside @media (min-width: …)
   tiers >= 1200px, so nothing here can affect the frozen mobile/tablet
   composition (<= 768px is byte-identical in effect; the existing
   <= 1000px breakpoints all still resolve first, then these layer on).

   It addresses the owner brief ("reads slightly too zoomed in / not
   reorganised for desktop / dead side-margins on wide screens"):
     1. widens the single content cap (--container) above 1170px so the
        page actually uses 1440 / 1920 viewports instead of stranding
        135–375px of empty gutter each side;
     2. adds wide-screen grid tiers so the densest sections re-organise
        past ~1000px (where every grid previously hit its final column
        count and then just floated in white space);
     3. re-balances the home hero split + lets the big headline type
        breathe with the wider measure (base px = the desktop size here,
        so we ADD a tier rather than shrinking the base).
   No base / @media(max-width) / clamp-floor is touched anywhere.
   ===================================================================== */

/* ----- DEFECT 1 — widen the content cap on wide screens ------------- */
/* The cap only binds above its own value, so viewports <= 1170px are
   completely unaffected; this purely reclaims the dead side-gutters. */
@media (min-width: 1440px) {
	:root { --container: 1320px; }
}
@media (min-width: 1680px) {
	:root { --container: 1440px; }
}

/* ----- DEFECT 2 — wide-screen grid tiers (re-organise past ~1000px) - */
/* The widened container needs the grids to spread into it, otherwise the
   extra width just becomes more centred white space. All additive. */
@media (min-width: 1280px) {
	/* Product cards reach 3-up a touch earlier and breathe more. */
	.cc-pgrid          { gap: 28px; }
	.cc-pgrid--3       { grid-template-columns: repeat(3, 1fr); }
	/* Open up inter-column gaps so the wider container is genuinely used. */
	.features          { gap: 34px; }
	.backlink-grid     { gap: 28px; }
	.companies         { gap: 30px; }
	.usecases          { gap: 30px; }
	.cc-media-band     { gap: 56px; }
	.cc-media-pair     { gap: 26px; }
	/* The "what is" reading column was capped narrow (760px) and looked
	   lost on a wide page — give the prose a slightly more generous measure. */
	.container--narrow { max-width: 820px; }
}
@media (min-width: 1440px) {
	/* At the 1320px container, push the densest decks one column wider
	   where the content comfortably allows it, and widen gaps again so
	   the 1440/1920 composition reads deliberate rather than scaled-up. */
	.cc-pgrid          { gap: 32px; }
	.companies--3      { grid-template-columns: repeat(4, 1fr); }
	.companies         { gap: 32px; }
	.features          { gap: 40px; }
	.backlink-grid     { gap: 32px; }
	.usecases          { gap: 34px; }
	.cc-media-band     { gap: 64px; }
	/* Calm the over-large vertical rhythm a wide screen exposes. */
	section            { padding: 60px 0; }
	.cta-strip         { padding: 80px 0; }
}
@media (min-width: 1680px) {
	.cc-media-band     { gap: 72px; }
	.container--narrow { max-width: 880px; }
}

/* ----- DEFECT 4 — re-balance the home hero split on wide screens ---- */
/* .cc-hero__grid locks to 1.05fr .95fr @ 900px and never rebalances; on a
   1440/1920 screen the copy column sprawls while the photo stays half.
   Retune the ratio + open the gap so the hero uses the extra width. */
@media (min-width: 1280px) {
	.cc-hero__grid { grid-template-columns: 1.15fr .85fr; gap: 64px; }
}
@media (min-width: 1680px) {
	.cc-hero__grid { grid-template-columns: 1.2fr .8fr; gap: 72px; }
}

/* ----- DEFECT 3 — let the big headline type breathe (don't shrink) -- */
/* Base px IS the desktop size on this mixed-convention file, so the calm
   move is NOT to reduce it but to widen the measure with the container so
   the headline stops crowding its 16–22ch cap and reading "zoomed in".
   A modest size lift is paired with the much wider container at 1440. */
@media (min-width: 1440px) {
	.hero h1         { font-size: 56px; max-width: 20ch; }
	.cc-hero h1      { font-size: 54px; max-width: 19ch; }
	.hero--page h1   { font-size: 46px; max-width: 30ch; }
	.hero p.lead     { max-width: 680px; }
	.cc-hero p.lead  { max-width: 58ch; }
	/* Section intros were capped at 720px — widen so the centred header
	   doesn't sit in a narrow island on a 1320px container. */
	.section-head    { max-width: 800px; }
}


/* =====================================================================
   CTA + ICON POLISH (2026-07-03) — PURELY ADDITIVE, appended at EOF.
   Corrects the design-audit CTA/SVG findings estate-wide from the ONE
   shared stylesheet. No base rule is rewritten; every selector below is
   more specific than, or additive to, what it refines. Uses only the
   existing token vocabulary (--teal-*, --radius, --gray-*, --shadow-*).

   1. .btn svg — the two hero buttons ship inline arrows with viewBox but
      no intrinsic size; on mobile the @media(max-width:768px) .btn{width:100%}
      let them balloon to fill the button. Constrain them, matching the
      pattern already used for .feature__more svg / .cc-signpost svg.
   2. .usecase__pick — was a bare 13px uppercase teal text link with no
      chrome. Promote to a real outline pill control (radius, padding,
      weight, hover) in THIS site's teal language.
   3. .feature__more / .cc-pcard__go — whole-card CTAs; give them a light
      ghost link-control chip so the two card rows + product cards read as
      deliberate controls, consistent with the upgraded usecase tiles.
   ===================================================================== */

/* --- 1. Size ALL inline button icons (the missing .btn svg rule) ------ */
.btn svg { width: 18px; height: 18px; flex: none; }

/* --- 2. usecase__pick → real outline pill control --------------------- */
.usecase { display: flex; flex-direction: column; }
.usecase p { flex: 1 1 auto; }
.usecase .usecase__pick {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	padding: 9px 15px;
	border: 1px solid var(--teal);
	border-radius: var(--radius);
	background: #fff;
	color: var(--teal-deep);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: .04em;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.usecase .usecase__pick:hover,
.usecase .usecase__pick:focus-visible {
	background: var(--teal-wash);
	border-color: var(--teal-deep);
	color: var(--teal-darker);
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.8);
}
.usecase .usecase__pick:active { transform: translateY(0); }

/* --- 3. whole-card CTAs → light ghost link-control chips -------------- */
/* .feature--link and .cc-pcard are themselves the anchor, so these inner
   spans get a subtle bordered chip that lifts with the card's hover. */
.feature--link .feature__more,
.cc-pcard .cc-pcard__go {
	align-self: flex-start;
	gap: 6px;
	padding: 8px 13px;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius);
	background: var(--teal-wash);
	color: var(--teal-deep);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
	transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.feature--link:hover .feature__more,
.feature--link:focus-within .feature__more,
.cc-pcard:hover .cc-pcard__go,
.cc-pcard:focus-within .cc-pcard__go {
	background: #fff;
	border-color: var(--teal);
	color: var(--teal-darker);
	box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.85);
}
/* keep the pinned-to-bottom rhythm on the media cards */
.feature--media .feature__more { display: inline-flex; }

/* --- mobile: chips centre + full-width like the site's .btn pattern ---- */
@media (max-width: 768px) {
	.usecase .usecase__pick,
	.feature--link .feature__more,
	.cc-pcard .cc-pcard__go {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
	/* signpost CTA: the global .btn{width:100%} on a flex:none child overflowed
	   the padded panel by a few px at ~380px. Let the action cell take the full
	   row and trim the panel's side padding so nothing clips off-screen. */
	.cc-signpost { padding-left: 20px; padding-right: 20px; }
	.cc-signpost__action { flex: 1 1 100%; width: 100%; }
}

/* =====================================================================
   ADVERSARIAL RE-FIX PASS (2026-07-03) — remaining critic items.
   PURELY ADDITIVE, this site's own teal vocabulary, no rewrites.

   1. .cc-note-cta link — the last surviving bare-teal CTA on the home
      page ("Verify them on creditcorpgroup.co.uk ↗"). Every sibling CTA
      (usecase__pick, feature__more, cc-pcard__go) was promoted to a
      pill/chip; this one was left as plain text. Promote the anchor to
      the same outline ghost pill, keeping the lead-in ("Need to confirm
      … for yourself?") as body copy so it reads as a deliberate control.
   2. .backlink-panel row labels — at ~380px the label competes with the
      inline "›" chevron for width and wraps mid-phrase ("Apply for a /
      loan"). Float the chevron out of flow on narrow viewports so the
      label + desc take the full panel width and stop wrapping.
   3. .utility-bar link — a deliberate call on the only chrome-level link
      with no control feel: give it a light hover chip so it reads as an
      intentional control beside the search, without turning in-prose
      links into buttons (those stay body links by convention).
   ===================================================================== */

/* --- 1. cc-note-cta bare link → outline ghost pill -------------------- */
.cc-note-cta { line-height: 1.7; }
.cc-note-cta a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	padding: 9px 15px;
	border: 1px solid var(--teal);
	border-radius: var(--radius);
	background: #fff;
	color: var(--teal-deep);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cc-note-cta a:hover,
.cc-note-cta a:focus-visible {
	background: var(--teal-wash);
	border-color: var(--teal-deep);
	color: var(--teal-darker);
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.8);
}
.cc-note-cta a:active { transform: translateY(0); }

/* --- 3. utility-bar link → light hover chip (deliberate, not a button) - */
.utility-bar__links a {
	border-radius: 6px;
	padding: 2px 6px;
	transition: background .15s ease, color .15s ease;
}
.utility-bar__links a:hover,
.utility-bar__links a:focus-visible {
	background: rgba(255,255,255,.10);
}

@media (max-width: 768px) {
	/* cc-note-cta pill centres like the other promoted chips */
	.cc-note-cta a { justify-content: center; }

	/* 2. backlink rows: pull the chevron out of the flex flow so short
	   labels ("Apply for a loan", "Compare the products", "Talk to the
	   team") keep the full width and no longer break mid-phrase. */
	.backlink-panel a {
		position: relative;
		display: block;
		padding-right: 22px;
	}
	.backlink-panel a::after {
		position: absolute;
		top: 10px;
		right: 0;
	}
}

/* =====================================================================
   NAV-FIT (2026-07-12) — desktop widths keep top-level navigation.
   The mobile menu is reserved for phone layouts; laptop/tablet-landscape
   widths use a compact desktop nav instead of falling back to a hamburger.
   ===================================================================== */
@media (min-width: 768px) and (max-width: 1360px) {
	.site-header .container { max-width: 100%; }
	.site-header__inner { gap: 12px; }
	.brand__logo { height: 40px; }
	.brand__sub { display: none; }
	.header-nav {
		display: flex;
		flex: 1 1 auto;
		justify-content: flex-end;
		gap: 9px;
		min-width: 0;
	}
	.header-nav a,
	.header-nav .nav-link,
	.header-nav .nav-link--modal {
		font-size: 12px;
	}
	.site-header .header-nav .btn--lg {
		padding: 8px 10px;
		font-size: 12px;
	}
	.nav-menu { display: none; }
}

/* =====================================================================
   PART C — 2026-07 REDESIGN LAYER (this site's own visual language)
   CM Beyer-inspired, not a reskin: sharp small-radius corners instead of
   pills, flat directional gradients instead of skeuomorphic layering,
   dark-teal-tinted shadows, and tight uppercase eyebrow micro-labels for
   section heads. Brand colour (teal/green, --teal family) is UNCHANGED —
   only the type, the corner language, the shadow tint and a handful of new
   components (mark grid, spelling test, structure grid, disambiguation
   modal) are new. Added for the /which-creditcorp/, /who-can-borrow/,
   /cant-sign-in/ and /security/ rebuild, 2026-07-08.
   ===================================================================== */

/* ----- Typeface: Plus Jakarta Sans, self-hosted -------------------
   TODO(design): Plus Jakarta Sans .woff2 files were not found vendored
   anywhere in this repo (checked build-files/*/assets/fonts and vendor
   dirs). Per the no-CDN / self-host-only rule, we do NOT fetch it from
   Google Fonts here. Source real woff2 files (Latin subset, weights
   400/500/600/700) into /assets/fonts/plus-jakarta-sans-latin.woff2 and
   uncomment the @font-face + --font-heading swap below. Until then this
   layer explicitly falls back to the existing self-hosted Open Sans, so
   nothing regresses and no external request is made. */
/*
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*/
:root {
	/* Falls back to the existing self-hosted Open Sans stack until the
	   Plus Jakarta Sans files above are sourced — see the TODO. */
	--font-heading: "Plus Jakarta Sans", var(--font-body);

	/* Small-radius corner scale (sharp, not pill) for the new components. */
	--radius-sm:  4px;
	--radius-md:  6px;

	/* Dark-teal-tinted shadow, one step deeper than the existing --shadow
	   tokens, used for the new flat-gradient cards/panels only. */
	--shadow-teal-sm: 0 1px 2px rgba(7,63,66,.14), 0 2px 6px rgba(7,63,66,.08);
	--shadow-teal-md: 0 6px 18px rgba(7,63,66,.16);
}

/* ----- Section eyebrow — flat, tracked, small-radius micro-label ---
   Distinct from .cc-eyebrow (the gold pill used only in the dark hero):
   this is the light-background version, used at the top of a content
   section rather than inside a photographic hero. */
.cc-section-eyebrow {
	display: inline-block;
	margin: 0 0 10px;
	padding: 3px 10px;
	font-family: var(--font-heading);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--teal-deep);
	background: var(--teal-wash);
	border-left: 3px solid var(--teal);
	border-radius: var(--radius-sm);
}

/* ----- Mark grid (#1/#2/#3 identification cards, /which-creditcorp/) */
.cc-mark-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr;
}
@media (min-width: 720px) { .cc-mark-grid { grid-template-columns: repeat(3, 1fr); } }
.cc-mark-card {
	padding: 22px 20px;
	background: linear-gradient(165deg, #fff 0%, var(--teal-wash) 130%);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-teal-sm);
}
.cc-mark-card--current {
	border-color: var(--teal-light);
	box-shadow: var(--shadow-teal-md);
}
.cc-mark-card h3 { font-family: var(--font-heading); font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.cc-mark-card__where { font-size: 12px; color: var(--gray-500); font-weight: 600; margin: 0 0 10px; }
.cc-mark-card p:last-child { margin-bottom: 0; }
.cc-mark-swatch {
	display: block;
	width: 34px; height: 34px;
	margin-bottom: 12px;
	border-radius: var(--radius-sm);
}
.cc-mark-swatch--navy  { background: linear-gradient(135deg, #14356b, #2a5aa8); }
.cc-mark-swatch--teal  { background: linear-gradient(135deg, var(--teal-darker), var(--teal-light)); }
.cc-mark-swatch--black { background: linear-gradient(135deg, #101214, #3a3f45); }

/* ----- Spelling test rows (/which-creditcorp/) --------------------- */
.cc-spell-test {
	margin: 18px 0;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: #fff;
}
.cc-spell-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--gray-200);
}
.cc-spell-row:last-child { border-bottom: 0; }
.cc-spell-word { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--gray-800); flex: none; }
.cc-spell-word strong { color: var(--teal-deep); }
.cc-spell-arrow { color: var(--teal-light); flex: none; }
.cc-spell-meaning { font-size: 14px; color: var(--gray-600); flex: 1 1 260px; }

/* ----- Unrelated third parties (/which-creditcorp/) ---------------- */
.cc-unrelated__row {
	padding: 16px 0;
	border-bottom: 1px dotted var(--gray-200);
}
.cc-unrelated__row:last-child { border-bottom: 0; }
.cc-unrelated__row h3 { font-family: var(--font-heading); font-size: 16px; margin: 0 0 6px; }
.cc-unrelated__row p { margin-bottom: 0; }

/* ----- Structure grid (sole trader / partnership / company) -------- */
.cc-structure-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
}
@media (min-width: 720px) { .cc-structure-grid { grid-template-columns: repeat(3, 1fr); } }
.cc-structure-card {
	padding: 20px;
	background: #fff;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-teal-sm);
}
.cc-structure-card h3 { font-family: var(--font-heading); font-size: 16px; margin: 0 0 8px; }
.cc-structure-card p { margin-bottom: 0; font-size: 14px; }
.cc-structure-card--yes {
	background: linear-gradient(165deg, #fff 0%, var(--teal-wash) 140%);
	border-color: var(--teal-light);
	box-shadow: var(--shadow-teal-md);
}

/* ----- Panel variant of the two-up signpost (flat, small-radius) --- */
.cc-signpost--panel {
	background: linear-gradient(120deg, var(--teal-wash), #fff);
	border: 1px solid var(--teal-mist);
	border-radius: var(--radius-md);
	padding: 28px;
	box-shadow: none;
}

/* ----- Header "not the site you meant?" trigger -------------------- */
.nav-link--modal, .nav-menu__link--modal {
	background: none;
	border: 0;
	font: inherit;
	color: var(--teal-deep);
	text-decoration: underline dotted;
	text-underline-offset: 3px;
}
.nav-link--modal:hover, .nav-menu__link--modal:hover { color: var(--teal-darker); }

/* ----- Disambiguation modal (MicroModal) — small-radius, flat ------ */
.micromodal-slide { display: none; }
.micromodal-slide.is-open { display: block; }
.micromodal-slide[aria-hidden="false"] .modal__overlay { animation: cc-modal-fade .2s ease; }
.micromodal-slide[aria-hidden="false"] .modal__container { animation: cc-modal-in .2s cubic-bezier(.2,.7,.3,1); }
.micromodal-slide[aria-hidden="true"] .modal__overlay,
.micromodal-slide[aria-hidden="true"] .modal__container { animation: cc-modal-fade .15s ease reverse; }
.modal__overlay {
	position: fixed; inset: 0; z-index: 1000;
	background: rgba(7,20,22,.55);
	display: flex; align-items: center; justify-content: center;
	padding: 16px;
}
.modal__container {
	width: 100%; max-width: 480px;
	max-height: 90vh; overflow-y: auto;
	background: #fff;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-teal-md), 0 30px 60px rgba(7,63,66,.28);
	padding: 24px 24px 20px;
}
.modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.modal__title { font-family: var(--font-heading); font-size: 19px; font-weight: 700; margin: 0; color: var(--gray-800); }
.modal__close {
	flex: none; width: 30px; height: 30px;
	border: 0; border-radius: var(--radius-sm);
	background: var(--gray-100);
	color: var(--gray-600);
	font-size: 0;
	position: relative;
	cursor: pointer;
}
.modal__close::before, .modal__close::after {
	content: ''; position: absolute; top: 50%; left: 50%;
	width: 14px; height: 2px; background: currentColor;
	transform-origin: center;
}
.modal__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.modal__close:hover { background: var(--gray-200); }
.modal__content p { font-size: 14px; color: var(--gray-600); margin: 0 0 14px; }
.modal__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.modal__list a {
	display: block;
	padding: 12px 14px;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-sm);
	color: var(--gray-800);
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease;
}
.modal__list a:hover { border-color: var(--teal-light); background: var(--teal-wash); text-decoration: none; }
.modal__list a strong { display: block; font-family: var(--font-heading); font-size: 14.5px; color: var(--teal-deep); margin-bottom: 2px; }
.modal__list a span { display: block; font-size: 12.5px; color: var(--gray-500); }
@keyframes cc-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cc-modal-in   { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
	.micromodal-slide .modal__overlay, .micromodal-slide .modal__container { animation: none !important; }
}

/* =====================================================================
   MOBILE UTILITY-BAR FIT (2026-07-09) — at narrow widths the top bar was
   wrapping to three rows (long group link + search). The group link label
   is now short ("Group & legal ↗"); below 480px also drop the breadcrumb
   text so the bar stays one row. Additive only.
   ===================================================================== */
@media (max-width: 480px) {
	.utility-bar .crumbs { display: none; }
}