/* public/css/tl.css */
:root {
/* Brand board tokens — Coutts/Turner Little luxury palette */
--tl-purple: #D4AF37; /* warm gold (primary) */
--tl-purple-dark: #B8902B; /* deep gold */
--tl-teal: #E6C667; /* light gold (highlight)*/
--tl-teal-dark: #C9A233; /* mid gold */
--tl-dark: #1A1A1D; /* charcoal */
--tl-dark-2: #0B0B0D; /* near-black */
--tl-gray: #F5F2EA; /* cream */
--tl-gold: #D4AF37;
--tl-gold-light: #E6C667;
--tl-gold-deep: #B8902B;
--tl-charcoal: #1A1A1D;
--tl-black: #0B0B0D;
--tl-cream: #F5F2EA;
/* ---- Type scale ----------------------------------------------------
Named tokens for the sizes tl.css already uses, so pages stop inventing
their own. Values are lifted verbatim from the existing rules noted. */
--fs-hero: var(--cx-fs-hero); /* page-hero title only */
--fs-h1: var(--cx-fs-h1); /* h1 */
--fs-section: var(--cx-fs-h2); /* .lux-heading */
--fs-h2: var(--cx-fs-h2); /* h2 */
--fs-h3: var(--cx-fs-h3); /* h3 */
--fs-h4: var(--cx-fs-h4); /* h4 */
--fs-lead: var(--cx-fs-lead); /* .premium-cta p */
--fs-body: var(--cx-fs-body); /* body */
--fs-sm: var(--cx-fs-sm); /* most-used size in tl.css */
--fs-card-title: var(--cx-fs-sm); /* .journey-card h3 / .juris-card h3 */
--fs-xs: var(--cx-fs-sm); /* .related-link */
--fs-2xs: var(--cx-fs-meta);
--fs-3xs: var(--cx-fs-meta);
--fs-input: var(--cx-fs-input); /* form inputs — below 16px iOS Safari zooms on focus */
--fs-label-form: var(--cx-fs-form-label);/* form field labels (14px) */
--fs-label: var(--cx-fs-label); /* .section-eyebrow */
--fs-micro: var(--cx-fs-micro);
/* ---- Coutts Global Scale & Proportion Standard ----------------------
Site-wide density tokens. Extends the type scale above rather than
duplicating it — --fs-card-title/--fs-body/--fs-3xs/--fs-label already
sit inside the brief's card-heading/body/metadata/eyebrow guardrails,
so typography isn't re-defined here, only the dimensions that weren't
tokenised anywhere yet: section spacing, gaps, card padding, and the
two Hero ceilings. Any page can use these, not just the homepage —
home.css's own `.hp { --navy; --card; ... }` block is scoped to `.hp`
only, which is why Insights/Guides/Services pages couldn't share it. */
--coutts-content-max: var(--cx-container-wide);
--coutts-section-compact: var(--cx-section-compact);
--coutts-section-standard: var(--cx-section-standard);
--coutts-section-feature: var(--cx-section-feature);
--coutts-gap-sm: var(--cx-space-3);
--coutts-gap-md: var(--cx-space-4);
--coutts-gap-lg: var(--cx-space-6);
--coutts-card-padding-compact: var(--cx-card-pad-compact);
--coutts-card-padding-standard: var(--cx-card-pad);
--coutts-card-padding-feature: var(--cx-card-pad-feature);
/* Ceilings, not fixed heights — content still determines actual height up
to these caps (§54: prefer aspect-ratio/min-max/clamp over rigid
fixed-height boxes). No min-height: 100vh anywhere in this system. */
--coutts-home-hero-max: 580px;
--coutts-page-hero-max: 380px;
--coutts-insight-card-max: 300px;
--coutts-insight-image-max: 130px;
--coutts-guide-card-max: 340px;
--coutts-guide-cover-max: 210px;
--coutts-panel-max: 320px;
/* ---- Extension: site-wide containers, Hero hierarchy, radii ----------
Added for the site-wide migration (Services/Country/Insights-landing/Insight
templates first, as a checkpoint, per the phased brief). Everything here
either reuses a value already dominant elsewhere in this file, or is derived
directly from the approved Homepage implementation — nothing invented. */
/* CONTAINERS — three widths, matching what the Homepage and the Insight
article already independently converged on, now named so other templates
stop picking their own. */
--coutts-container-standard: 1440px; /* listings, grids, general page content */
--coutts-container-wide: var(--cx-container-wide); /* = home.css .hp-wrap; selected Hero content only */
--coutts-container-reading: 760px; /* = --kins-measure; long-form article body */
/* HERO HIERARCHY — four types, all bounded (clamp, never 100vh):
A. Flagship (Homepage only) → --coutts-home-hero-max (existing, untouched)
B. Primary Landing (Services/Jurisdictions/Knowledge Centre landing)
C. Content/Category (country pages, individual service category, Guides/
Insights landing) → --coutts-page-hero-max (existing; already the right size)
D. Article/Detail (individual Insight/Guide/listing) — compact editorial
header, not a photographic Hero at all in most cases. */
--coutts-hero-landing: clamp(360px, 45vh, 460px);
--coutts-hero-article-max: 200px;
/* RADII — 12px is already the dominant value site-wide (33 uses vs the next
most common at 11); this names what's already the de facto standard rather
than introducing a new one. */
--coutts-radius-lg: 14px;
--coutts-radius-md: 12px;
--coutts-radius-sm: 8px;
}
* {
scroll-behavior: smooth;
}
body {
font-family: var(--cx-sans);
color: #4A4A4A;
overflow-x: hidden;
/* Without this, any gap between two explicitly-coloured sections (e.g. the homepage's own
stats band and the global footer CTA directly below it) falls back to plain browser
white — a mismatched tone against the surrounding sections. --paper is defined inside
the homepage's own .hp scope (home.css), hence the fallback here so this still resolves
correctly on every other page too. */
background: var(--paper, #F7F8FA);
}
h1, h2, h3, h4, h5 {
font-family: var(--cx-display);
}
h2 {
color: var(--tl-purple);
text-transform: uppercase;
letter-spacing: .5px;
}
a {
color: var(--tl-purple);
}
a:hover {
color: var(--tl-purple-dark);
text-decoration: none;
}
.btn-primary {
background: var(--tl-purple);
border-color: var(--tl-purple);
border-radius: 0;
padding: .5rem 1.6rem;
font-weight: 500;
}
.btn-primary:hover {
background: var(--tl-purple-dark);
border-color: var(--tl-purple-dark);
}
.btn-secondary {
background: var(--tl-dark);
border-color: var(--tl-dark);
border-radius: 0;
}
hr.accent {
width: 60px;
border-top: 3px solid var(--tl-purple);
margin: 1rem 0;
}
/* =====================================================================
LUXURY GLASS NAVIGATION — Apple Vision Pro style floating capsule
Palette: black / charcoal / warm gold / cream / white only.
Gold: #C5A044 Gold-light: #D8BE6E
Charcoal: #161616 Charcoal-2: #0D0D0D Cream: #F5F1E8
===================================================================== */
/* Floating container: holds the logo object + the glass capsule as two
separate floating elements. Fixed, never touches the top of the browser. */
#wrapper-navbar {
position: fixed;
top: 52px;
left: 25px;
right: 25px; /* sits below the slim top bar */
z-index: 1040;
display: flex;
align-items: center;
justify-content: space-between;
gap: 46px; /* the breathing room between logo & nav */
background: transparent;
box-shadow: none;
transition: top .5s ease;
}
/* ---------- Slim top utility bar (floats above the glass nav) ---------- */
.tl-topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1041;
height: 42px;
display: flex;
align-items: center;
background: linear-gradient(180deg, rgba(13, 13, 15, .74) 0%, rgba(13, 13, 15, .52) 100%);
-webkit-backdrop-filter: blur(16px) saturate(130%);
backdrop-filter: blur(16px) saturate(130%);
border-bottom: 1px solid rgba(255, 255, 255, .06);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
font-family: var(--cx-sans);
font-size: .82rem;
letter-spacing: .02em;
}
.tl-topbar .container {
display: flex;
justify-content: center;
align-items: center;
gap: 1.8rem;
}
.tl-topbar a {
display: inline-flex;
align-items: center;
line-height: 1;
gap: .7rem;
color: rgba(245, 241, 232, .82);
transition: color .5s ease;
}
.tl-topbar a:hover {
color: var(--tl-teal);
text-decoration: none;
}
.tl-topbar i {
color: var(--tl-purple);
font-size: 1.05rem;
}
/* ---- The logo: its own floating object, the signature of the site ---- */
.nav-logo {
display: flex;
align-items: center;
flex: 0 0 auto;
padding: 0;
}
.nav-logo img {
height: 70px;
width: auto !important;
display: block; /* larger, more presence */
/* soft lift so the logo stays clear over any background image */
filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .45)) drop-shadow(0 1px 2px rgba(0, 0, 0, .4));
transition: filter .5s ease, transform .5s ease;
}
.nav-logo:hover img {
transform: translateY(var(--cx-hover-lift));
filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .5)) drop-shadow(0 0 14px rgba(197, 160, 68, .25));
}
/* ---- The glass capsule (the navigation) ---- */
.nav-capsule {
position: relative;
flex: 0 1 auto;
display: flex;
align-items: center;
min-height: 58px; /* slimmer, lighter */
padding: 0 14px 0 34px;
border-radius: 999px; /* capsule */
/* thin, almost-invisible white border */
border: 1px solid rgba(255, 255, 255, .10);
/* soft shadow underneath + inset top highlight + very subtle gold glow */
box-shadow: 0 22px 48px -16px rgba(0, 0, 0, .58),
0 4px 12px rgba(0, 0, 0, .28),
inset 0 1px 0 rgba(255, 255, 255, .16),
0 0 26px rgba(197, 160, 68, .08);
transition: box-shadow .5s ease, border-color .5s ease;
}
/* The glass MATERIAL lives on its own clipped layer so the moving sheen and
blur stay inside the pill, while dropdown menus can still overflow below. */
.nav-glass {
position: absolute;
inset: 0;
border-radius: inherit;
overflow: hidden;
pointer-events: none;
z-index: 0;
/* dark charcoal transparent tint */
background: linear-gradient(180deg, rgba(34, 34, 38, .34) 0%, rgba(16, 16, 20, .40) 100%);
-webkit-backdrop-filter: blur(16px) saturate(125%);
backdrop-filter: blur(16px) saturate(125%);
}
/* soft white highlight across the top — the polished-crystal curve */
.nav-glass::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(180deg,
rgba(255, 255, 255, .16) 0%,
rgba(255, 255, 255, .05) 16%,
rgba(255, 255, 255, 0) 40%,
rgba(255, 255, 255, 0) 86%,
rgba(255, 255, 255, .03) 100%);
}
/* very subtle light reflection that drifts across roughly every 26s */
.nav-glass::after {
content: "";
position: absolute;
top: -20%;
bottom: -20%;
left: -65%;
width: 42%;
pointer-events: none;
background: linear-gradient(100deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, .05) 42%,
rgba(255, 255, 255, .10) 50%,
rgba(255, 255, 255, .05) 58%,
rgba(255, 255, 255, 0) 100%);
filter: blur(7px);
transform: skewX(-14deg);
animation: nav-sheen 26s ease-in-out infinite;
}
@keyframes nav-sheen {
0% {
left: -65%;
opacity: 0;
}
4% {
opacity: 1;
}
26% {
left: 130%;
opacity: 0;
}
/* slow sweep over ~6s, then idle */
100% {
left: 130%;
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.nav-glass::after {
animation: none;
}
}
/* ---- Warm "lights" glinting along the top rim of the capsule ---- */
.nav-capsule::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 1; /* above the glass, below the menu text */
background: /* soft downward gold beams */ radial-gradient(ellipse 16px 52px at 12% -4%, rgba(212, 175, 55, .45), rgba(212, 175, 55, 0) 72%),
radial-gradient(ellipse 14px 44px at 30% -4%, rgba(230, 198, 103, .38), rgba(230, 198, 103, 0) 72%),
radial-gradient(ellipse 16px 54px at 50% -4%, rgba(212, 175, 55, .48), rgba(212, 175, 55, 0) 72%),
radial-gradient(ellipse 14px 44px at 70% -4%, rgba(230, 198, 103, .38), rgba(230, 198, 103, 0) 72%),
radial-gradient(ellipse 16px 50px at 88% -4%, rgba(212, 175, 55, .45), rgba(212, 175, 55, 0) 72%),
/* bright gold cores sitting on the rim */ radial-gradient(circle 2.5px at 12% 1px, rgba(245, 222, 140, .98), rgba(245, 222, 140, 0)),
radial-gradient(circle 2px at 30% 1px, rgba(240, 212, 120, .9), rgba(240, 212, 120, 0)),
radial-gradient(circle 2.5px at 50% 1px, rgba(245, 222, 140, .98), rgba(245, 222, 140, 0)),
radial-gradient(circle 2px at 70% 1px, rgba(240, 212, 120, .9), rgba(240, 212, 120, 0)),
radial-gradient(circle 2.5px at 88% 1px, rgba(245, 222, 140, .98), rgba(245, 222, 140, 0));
background-repeat: no-repeat;
animation: nav-lights 7s ease-in-out infinite alternate; /* very slow, gentle */
}
@keyframes nav-lights {
0% {
opacity: .78;
}
100% {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.nav-capsule::before {
animation: none;
}
}
/* scrolled state: deepen the float very slightly */
#wrapper-navbar.is-fixed .nav-capsule {
box-shadow: 0 26px 54px -16px rgba(0, 0, 0, .62),
0 6px 16px rgba(0, 0, 0, .30),
inset 0 1px 0 rgba(255, 255, 255, .18),
0 0 28px rgba(197, 160, 68, .10);
border-color: rgba(255, 255, 255, .13);
}
/* ---- Menu items: spacious, medium weight, gentle gold underline ---- */
.nav-capsule .navbar-nav {
position: relative;
z-index: 2;
align-items: center;
}
/* Nav items switched off until their pages exist — present, legible, plainly not clickable. */
.nav-capsule .nav-link.is-disabled {
color: rgba(245, 241, 232, .38);
cursor: default;
pointer-events: none;
}
.nav-capsule .nav-link {
position: relative;
color: rgba(245, 241, 232, .84) !important; /* cream/white */
font-family: var(--cx-sans);
font-weight: 500; /* medium */
font-size: .9rem;
letter-spacing: .055em; /* slightly increased */
text-transform: none;
padding: .55rem .2rem !important;
margin: 0 19px; /* room to breathe between items */
transition: color .5s ease, text-shadow .5s ease;
}
.nav-capsule .nav-link.dropdown-toggle::after {
margin-left: .5rem;
opacity: .55;
transition: opacity .5s ease, transform .5s ease;
}
.nav-capsule .nav-link:hover.dropdown-toggle::after {
opacity: .9;
}
/* thin gold underline that fades in left→right, with a soft gold glow */
.nav-capsule .nav-link::before {
content: "";
position: absolute;
left: .2rem;
right: 100%;
bottom: .35rem;
height: 1px;
background: linear-gradient(90deg, var(--tl-purple), var(--tl-teal));
box-shadow: 0 0 8px rgba(197, 160, 68, .5);
opacity: 0;
transition: right .5s ease, opacity .5s ease;
}
.nav-capsule .nav-link:hover {
color: #fff !important;
text-shadow: 0 0 12px rgba(197, 160, 68, .4);
}
.nav-capsule .nav-link:hover::before {
right: .2rem;
opacity: 1;
}
/* ---- Enquire button: warm gold pill that belongs to the glass ---- */
.nav-capsule .btn-enquire {
margin-left: 14px;
background: linear-gradient(180deg, #EAD18A 0%, #D4AF37 45%, #B8902B 100%);
color: #1a1305 !important;
border-radius: var(--cx-radius-lg);
padding: .7rem 1.5rem;
font-weight: 600;
letter-spacing: .05em;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65),
inset 0 -2px 3px rgba(120, 85, 10, .30),
0 6px 16px -4px rgba(212, 175, 55, .45),
0 3px 8px rgba(0, 0, 0, .20);
transition: box-shadow .5s ease, transform .5s ease, background .5s ease;
}
.nav-capsule .btn-enquire:hover {
background: radial-gradient(ellipse 75% 85% at 50% 72%, rgba(255, 247, 212, .78) 0%, rgba(255, 233, 168, .30) 44%, rgba(255, 233, 168, 0) 78%),
linear-gradient(180deg, #F2DD9E 0%, #E0BE52 45%, #C9A233 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8),
inset 0 -6px 14px rgba(255, 236, 170, .35),
0 12px 26px -8px rgba(212, 175, 55, .65),
0 5px 12px rgba(0, 0, 0, .24);
transform: translateY(var(--cx-hover-lift));
}
.nav-capsule .btn-enquire:active {
transform: translateY(0);
background: linear-gradient(180deg, #C9A233 0%, #B8902B 60%, #A67D22 100%);
box-shadow: inset 0 2px 5px rgba(90, 62, 8, .45),
inset 0 1px 0 rgba(255, 255, 255, .45),
0 2px 6px rgba(0, 0, 0, .28);
}
/* ---- Dropdowns: matching dark glass panels ---- */
.nav-capsule .dropdown-menu {
margin-top: 18px;
border: 1px solid rgba(255, 255, 255, .10);
border-radius: var(--cx-radius-lg);
padding: .5rem;
background: linear-gradient(180deg, rgba(30, 30, 32, .78) 0%, rgba(16, 16, 18, .84) 100%);
-webkit-backdrop-filter: blur(22px) saturate(135%);
backdrop-filter: blur(22px) saturate(135%);
box-shadow: 0 22px 48px -16px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .12);
}
/* invisible bridge fills the gap between the link and the menu so the mouse
never leaves the item while travelling down — keeps the menu open */
.nav-capsule .dropdown-menu::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -22px;
height: 24px;
background: transparent;
}
/* keep the parent item "hovered" while the menu is open */
.nav-capsule .nav-item.dropdown {
padding-bottom: 0;
}
.nav-capsule .nav-item.dropdown.show > .nav-link,
.nav-capsule .nav-item.dropdown:hover > .nav-link {
color: #fff !important;
text-shadow: 0 0 12px rgba(197, 160, 68, .4);
}
.nav-capsule .nav-item.dropdown.show > .nav-link::before,
.nav-capsule .nav-item.dropdown:hover > .nav-link::before {
right: .2rem;
opacity: 1;
}
.nav-capsule .dropdown-item {
color: rgba(245, 241, 232, .82);
font-size: .86rem;
letter-spacing: .03em;
border-radius: var(--cx-radius-lg);
padding: .6rem .9rem;
transition: background .5s ease, color .5s ease;
}
.nav-capsule .dropdown-item:hover,
.nav-capsule .dropdown-item:active {
background: rgba(212, 175, 55, .10);
color: var(--tl-purple);
}
/* ---------- Hero carousel ---------- */
.hero {
position: relative;
background: #fff;
}
.hero .carousel-item {
height: 80vh;
min-height: 540px;
background: #fff;
}
.hero-bg {
position: absolute;
top: 0;
right: 0;
left: 18%;
bottom: 0;
background-size: cover;
background-position: center;
}
.hero .slide-1 {
background-image: linear-gradient(rgba(15, 14, 18, .35), rgba(15, 14, 18, .35)), url('https://picsum.photos/id/1062/1600/900');
}
.hero .slide-2 {
background-image: linear-gradient(rgba(15, 14, 18, .35), rgba(15, 14, 18, .35)), url('https://picsum.photos/id/1067/1600/900');
}
.hero .slide-3 {
background-image: linear-gradient(rgba(15, 14, 18, .35), rgba(15, 14, 18, .35)), url('https://picsum.photos/id/1071/1600/900');
}
.hero .slide-4 {
background-image: linear-gradient(rgba(15, 14, 18, .35), rgba(15, 14, 18, .35)), url('https://picsum.photos/id/1080/1600/900');
}
.hero-panel {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-38%);
width: 50%;
max-width: 940px;
background: rgba(245, 241, 232, .85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-right: 6px solid var(--tl-purple);
color: var(--tl-dark);
padding: 2.6rem 3rem 3.4rem 4.5rem;
}
.hero-panel h2 {
color: var(--tl-dark);
font-size: 1.7rem;
margin: 0 0 .4rem;
}
.hero-panel hr {
border-top: 2px solid var(--tl-purple);
width: 34px;
margin: .6rem 0 1.4rem;
}
.hero-panel p {
font-size: 1.05rem;
line-height: 1.6;
max-width: 92%;
}
.hero-btn {
position: absolute;
bottom: -24px;
left: 56%;
background: var(--tl-purple);
color: #161616;
padding: .85rem 2rem;
font-weight: 600;
display: inline-block;
}
.hero-btn:hover {
background: var(--tl-purple-dark);
color: #161616;
}
/* dots bottom-left */
.hero .carousel-indicators {
left: 18%;
right: auto;
bottom: 22px;
margin: 0;
}
.hero .carousel-indicators li {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, .55);
border: none;
opacity: 1;
margin: 0 6px;
box-sizing: border-box;
}
.hero .carousel-indicators li.active {
background: var(--tl-purple);
}
/* arrows bottom-right */
.hero-nav {
position: absolute;
right: 18px;
bottom: 96px;
display: flex;
z-index: 15;
}
.hero-nav button {
width: 56px;
height: 56px;
background: #fff;
border: 1px solid #e6e6e6;
color: var(--tl-dark);
font-size: 1.15rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: .2s;
}
.hero-nav button:hover {
background: var(--tl-purple);
color: #fff;
border-color: var(--tl-purple);
}
@media (max-width: 767px) {
.hero .carousel-item {
height: auto;
min-height: 0;
}
.hero-bg {
position: relative;
left: 0;
height: 240px;
}
.hero-panel {
position: relative;
top: 0;
transform: none;
width: 100%;
max-width: 100%;
padding: 2rem 1.5rem 3rem;
}
.hero-btn {
left: 1.5rem;
}
.hero-nav {
display: none;
}
.hero .carousel-indicators {
left: 50%;
transform: translateX(-50%);
}
}
/* ---------- Mission ---------- */
.mission {
background: var(--tl-gray);
padding: 6.5rem 0;
}
.mission h2 {
font-size: 1.292rem;
line-height: 1.3;
}
/* ---------- Video ---------- */
.home-video {
position: relative;
background: #111;
min-height: 55vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .45)), url('https://picsum.photos/id/1076/1600/700') center/cover;
}
.play-btn {
width: 90px;
height: 90px;
border-radius: 50%;
border: 3px solid #fff;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
opacity: .85;
transition: var(--cx-duration);
cursor: pointer;
}
.play-btn:hover {
opacity: 1;
transform: scale(var(--cx-hover-scale));
color: #fff;
}
/* ---------- Services tabs (teal accent) ---------- */
.services {
padding: 6.5rem 0;
}
.services .nav-tabs {
border-bottom: 1px solid #e3e3e3;
justify-content: center;
margin-bottom: 2.5rem;
flex-wrap: wrap;
}
.services .nav-tabs .nav-link {
border: none;
color: var(--tl-teal);
font-weight: 600;
font-family: var(--cx-sans);
padding: .6rem 1rem;
}
.services .nav-tabs .nav-link:hover {
color: var(--tl-teal-dark);
}
.services .nav-tabs .nav-link.active {
color: var(--tl-teal);
border-bottom: 3px solid var(--tl-teal);
background: transparent;
}
.services .tab-pane h2 {
color: var(--tl-teal);
font-size: 1.768rem;
line-height: 1.08;
}
.services .tab-pane p {
color: #444;
font-size: 1.05rem;
}
.services .btn-primary {
background: var(--tl-teal);
border-color: var(--tl-teal);
}
.services .btn-primary:hover {
background: var(--tl-teal-dark);
border-color: var(--tl-teal-dark);
}
/* ---------- Stats ---------- */
.stats {
background: var(--tl-dark);
color: #cfcdd6;
padding: 6.5rem 0;
}
.stats .stat {
margin-bottom: 2rem;
}
.stats .stat .icon {
font-size: 2rem;
color: var(--tl-purple);
margin-bottom: .8rem;
}
.stats .stat h5 {
color: #fff;
font-size: 1.1rem;
}
.stats .stat hr {
border-top: 2px solid var(--tl-purple);
width: 40px;
margin: .8rem 0;
}
.stats .stat p {
font-size: .9rem;
color: #b3b1bd;
}
/* ---------- Pricing table ---------- */
.popular {
padding: 6.5rem 0;
background: var(--tl-gray);
}
.popular h2 {
text-align: center;
margin-bottom: 2rem;
}
.popular table {
background: #fff;
}
.popular td {
vertical-align: middle !important;
padding: 1rem 1.2rem;
}
.popular .country {
font-weight: 600;
color: var(--tl-dark);
}
.popular .price {
font-weight: 700;
color: var(--tl-purple);
}
.popular .order-now a {
background: var(--tl-purple);
color: #fff;
padding: .35rem 1rem;
display: inline-block;
}
.popular .order-now a:hover {
background: var(--tl-purple-dark);
}
.more-companies {
display: inline-block;
margin-top: 1rem;
font-weight: 600;
}
/* ---------- Jurisdiction ---------- */
.jurisdiction {
padding: 6.5rem 0;
}
.jurisdiction h2 {
font-size: 1.292rem;
}
.map-wrap {
position: relative;
text-align: center;
}
.map-wrap .fa-earth-americas {
font-size: 14rem;
color: var(--tl-purple);
opacity: .9;
}
.map-wrap .pin {
position: absolute;
color: var(--tl-dark);
font-size: 1.3rem;
}
/* ---------- Case studies (horizontal scroller, 2 per view) ---------- */
.case-studies {
padding: 6.5rem 0;
background: #fff;
}
.case-studies h2 {
text-align: center;
margin-bottom: 2.5rem;
}
.cs-scroller-wrap {
position: relative;
}
.cs-scroller {
display: flex;
gap: 30px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: 10px;
-ms-overflow-style: none;
scrollbar-width: none;
}
.cs-scroller::-webkit-scrollbar {
display: none;
}
.cs-slide {
flex: 0 0 calc(50% - 15px);
scroll-snap-align: start;
}
@media (max-width: 767px) {
.cs-slide {
flex: 0 0 100%;
}
}
.case-card {
display: block;
color: inherit;
}
.case-card .thumb {
height: 240px;
background-size: cover;
background-position: center;
}
.case-card .body {
padding: 1.2rem 0;
}
.case-card .title {
font-family: var(--cx-display);
font-weight: 700;
color: var(--tl-dark);
text-transform: uppercase;
font-size: 1.45rem;
margin-bottom: .4rem;
}
.case-card p {
color: #444;
}
.case-card:hover .title {
color: var(--tl-dark-2);
}
.cs-arrow {
position: absolute;
top: 42%;
transform: translateY(-50%);
width: 46px;
height: 46px;
border-radius: 50%;
border: none;
background: var(--tl-dark);
color: #fff;
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
opacity: .9;
transition: var(--cx-duration-sm);
}
.cs-arrow:hover {
background: var(--tl-purple);
opacity: 1;
}
.cs-arrow.prev {
left: -14px;
}
.cs-arrow.next {
right: -14px;
}
@media (max-width: 575px) {
.cs-arrow {
display: none;
}
}
/* ---------- Latest news ---------- */
.latest-news {
padding: 6.5rem 0;
background: var(--tl-gray);
}
.twitter-block {
background: #fff;
padding: 1.5rem;
border-radius: var(--cx-radius-xs);
}
.twitter-block .fa-twitter {
color: #1da1f2;
font-size: 1.6rem;
}
.news-tile {
min-height: 200px;
border-radius: var(--cx-radius-xs);
display: flex;
align-items: flex-end;
padding: 1.2rem;
color: #fff;
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url('https://picsum.photos/id/1037/700/400') center/cover;
}
.news-tile.wide {
min-height: 240px;
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url('https://picsum.photos/id/1043/900/400') center/cover;
}
.news-tile h3 a {
color: #fff;
font-size: 0.816rem;
}
/* ---------- Contact ---------- */
.contact {
padding: 6.5rem 0;
}
.contact .form-control {
border-radius: 0;
border: 1px solid #ddd;
padding: .7rem 1rem;
margin-bottom: 1rem;
}
.contact-address h6 {
font-weight: 700;
color: var(--tl-dark);
}
.contact-address div span {
font-weight: 600;
}
/* ---------- Newsletter + disclaimer band ---------- */
.post-content-band {
background: #F7F8FA;
display: flow-root;
}
.newsletter {
padding: 0;
}
.newsletter .signup-box {
background: var(--tl-dark);
color: #fff;
margin-top: -45px;
padding: 2.2rem 3rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1.2rem;
}
.newsletter .signup-box h2 {
color: #fff;
margin: 0;
font-size: 1.292rem;
}
.newsletter .signup-box form {
display: flex;
flex-wrap: wrap;
}
.newsletter .signup-box .form-control {
border-radius: 0;
border: none;
padding: .7rem 1rem;
min-width: 280px;
height: auto;
}
.newsletter .signup-box .btn {
background: #C5A044;
border: none;
border-radius: 0;
color: #fff;
padding: .7rem 1.7rem;
font-weight: 600;
}
.newsletter .signup-box .btn:hover {
background: #9E7E2C;
color: #fff;
}
@media (max-width: 767px) {
.newsletter .signup-box {
margin-top: -30px;
padding: 1.6rem 1.3rem;
flex-direction: column;
align-items: flex-start;
}
.newsletter .signup-box form {
width: 100%;
}
.newsletter .signup-box .form-control {
min-width: 0;
flex: 1;
}
}
/* ---------- Disclaimer ---------- */
.disclaimer {
background: transparent;
color: #7a7a7a;
font-size: .72rem;
line-height: 1.55;
padding: 1rem 0 1.2rem;
}
/* ---------- Footer ---------- */
footer.site-footer {
background: var(--tl-dark);
color: #cfcdd6;
padding: 3rem 0 1rem;
}
footer .footer-logo {
font-family: var(--cx-display);
font-weight: 800;
color: #fff;
font-size: 1.5rem;
letter-spacing: 1px;
}
footer h3 {
color: #fff;
font-size: 0.66rem;
font-family: var(--cx-sans);
font-weight: 600;
margin-bottom: .8rem;
}
footer h3.footer-subhead {
margin-top: 1.3rem;
padding-top: 1rem;
border-top: 1px solid rgba(255,255,255,.1);
}
footer ul {
list-style: none;
padding: 0;
}
footer ul li a {
color: #b3b1bd;
font-size: .78rem;
line-height: 1.9;
}
footer ul li a:hover {
color: var(--tl-teal);
}
footer address {
font-size: .78rem;
color: #b3b1bd;
font-style: normal;
}
.footer-social {
display: flex;
gap: .6rem;
padding: 0;
margin-top: 1rem;
}
.footer-social li a {
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255, 255, 255, .1);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.footer-social li a:hover {
background: var(--tl-teal);
color: #fff;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, .1);
margin-top: 2rem;
padding-top: 1rem;
font-size: .8rem;
color: #8d8b97;
}
/* =========================================================
INNER PAGE (category / UK Company Formation) styles
========================================================= */
/* Breadcrumbs */
.breadcrumbs {
padding: 1rem 0;
font-size: .85rem;
}
.breadcrumbs a {
color: var(--tl-purple);
}
.breadcrumbs .sep {
color: #bbb;
margin: 0 .4rem;
}
.breadcrumbs .current {
color: #777;
}
/* Category banner — image with an overlapping dark panel + purple edge bar */
.category-header {
position: relative;
background: #fff;
overflow: hidden;
}
.category-header .header-image {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 50%;
background-size: cover;
background-position: center;
}
.category-header .header-content {
position: relative;
margin-left: 28%;
width: 71%;
background: var(--tl-dark);
border-left: 10px solid var(--tl-purple);
color: #fff;
padding: 4.2rem 4.8rem;
margin-top: 60px;
margin-bottom: 60px;
}
.category-header .header-content h1 {
color: var(--tl-teal);
text-transform: uppercase;
font-size: 1.482rem;
margin-bottom: 1.5rem;
}
.category-header .header-content p {
font-size: .92rem;
line-height: 1.8;
margin-bottom: .7rem;
}
.category-header .header-content ul {
list-style: none;
padding: 0;
margin: 0;
}
.category-header .header-content ul li {
position: relative;
padding-left: 1.1rem;
margin-bottom: .6rem;
font-size: .95rem;
}
.category-header .header-content ul li::before {
content: "\2022";
color: var(--tl-teal);
position: absolute;
left: 0;
}
@media (max-width: 991px) {
.category-header .header-image {
width: 42%;
}
.category-header .header-content {
margin-left: 36%;
width: 64%;
}
}
@media (max-width: 767px) {
.category-header {
overflow: visible;
}
.category-header .header-image {
position: relative;
width: 100%;
height: 220px;
}
.category-header .header-content {
position: static;
margin: 0;
width: 100%;
border-left: none;
border-top: 6px solid var(--tl-purple);
padding: 2rem 1.5rem;
}
}
/* Company name checker */
.companyname-checker {
background: var(--tl-gray);
padding: 2.6rem 0;
margin: 3.6rem 0;
}
.companyname-checker h3 {
font-size: 0.952rem;
color: var(--tl-dark);
margin-bottom: .3rem;
}
.companyname-checker p {
color: #666;
margin-bottom: 1rem;
}
.companyname-checker .checker-fields {
display: flex;
flex-wrap: wrap;
gap: .6rem;
align-items: center;
}
.companyname-checker .checker-fields .form-control {
flex: 1 1 280px;
border-radius: 0;
border: 1px solid #ddd;
padding: .7rem 1rem;
}
.companyname-checker .checker-fields .btn {
background: var(--tl-teal);
border-color: var(--tl-teal);
border-radius: 0;
padding: .7rem 1.8rem;
color: #fff;
}
.companyname-checker .checker-fields .btn:hover {
background: var(--tl-teal-dark);
border-color: var(--tl-teal-dark);
}
.companyname-checker .alert {
display: none;
width: 100%;
margin: .8rem 0 0;
border-radius: 0;
}
/* Sub-categories grid */
.sub-categories {
padding: 3.4rem 0 4.6rem;
}
.sub-categories .child-item {
margin-bottom: 4rem;
}
.sub-categories .child-item h2 {
font-size: 1.02rem;
margin-bottom: .9rem;
text-transform: none;
}
.sub-categories .child-item h2 a {
color: var(--tl-teal);
}
.sub-categories .child-item h2 a:hover {
color: var(--tl-teal-dark);
}
.sub-categories .sub-description {
color: #555;
margin-bottom: .8rem;
}
.sub-categories .child-item h4 {
font-size: 0.68rem;
font-family: var(--cx-sans);
margin: .25rem 0;
font-weight: 400;
}
.sub-categories .child-item h4 a {
color: var(--tl-teal);
}
.sub-categories .child-item h4 a:hover {
color: var(--tl-teal-dark);
text-decoration: underline;
}
.sub-categories .view-more {
display: inline-block;
margin-top: .7rem;
color: var(--tl-teal);
font-weight: 600;
}
/* Related posts reuse the case-studies scroller, but with PURPLE titles */
.related-posts .case-card .title {
color: var(--tl-purple);
}
.related-posts .case-card:hover .title {
color: var(--tl-purple-dark);
}
/* =========================================================
UK READY-MADE COMPANIES page
========================================================= */
/* This page's banner heading is purple (vs teal on the parent page) */
.category-header.heading-purple .header-content h1 {
color: var(--tl-purple);
}
.category-header.heading-coral .header-content {
border-left-color: #C5A044;
}
.category-header.heading-coral .header-content h1 {
color: #C5A044;
}
/* Intro + spec list under the banner */
.rm-description {
padding: 3.6rem 0 1.5rem;
line-height: 1.75;
}
.rm-description p {
margin-bottom: 1rem;
}
.rm-description ul {
padding-left: 1.4rem;
margin-top: .3rem;
}
.rm-description li {
margin-bottom: .45rem;
color: #444;
}
/* Post-banner description block (intro copy + inclusion lists) */
.description {
padding: 2.6rem 0 1rem;
line-height: 1.7;
}
.description p {
margin-bottom: 1rem;
}
.description ul {
padding-left: 1.4rem;
margin: .3rem 0 1.3rem;
}
.description li {
margin-bottom: .8rem;
color: #444;
}
/* Products listing table */
.products-listing {
background: #ededed;
padding: 3.6rem 0;
}
.page-uk-ready-made-companies .products-listing .listing-table {
max-height: 620px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #9a9a9a #d8d8d8;
}
.page-uk-ready-made-companies .products-listing .listing-table::-webkit-scrollbar {
width: 10px;
}
.page-uk-ready-made-companies .products-listing .listing-table::-webkit-scrollbar-track {
background: #d8d8d8;
}
.page-uk-ready-made-companies .products-listing .listing-table::-webkit-scrollbar-thumb {
background: #9a9a9a;
border-radius: var(--cx-radius-sm);
}
.products-listing table {
background: transparent;
margin: 0;
}
.products-listing td {
vertical-align: middle !important;
padding: 1.4rem 1rem;
border-top: 1px solid #d8ceb8;
}
.products-listing .table-hover tbody tr:hover {
background: #fcfcfc;
}
.products-listing .country {
font-weight: 600;
color: var(--tl-dark);
font-size: 1.02rem;
}
.products-listing .country .sub-desc {
display: block;
font-weight: 400;
color: #a8a195;
font-size: .82rem;
margin-top: .28rem;
}
.products-listing .more-details a {
color: var(--tl-purple);
}
.products-listing .more-details a:hover {
color: var(--tl-purple-dark);
}
.products-listing .price {
font-weight: 700;
color: #a67d22;
white-space: nowrap;
}
.products-listing .order-now a {
color: var(--tl-purple);
font-weight: 600;
}
.products-listing .order-now a:hover {
color: var(--tl-purple-dark);
}
/* Featured packages — dark band */
.featured-products {
padding: 3.6rem 0 1rem;
}
.featured-products .featured-inner {
background: var(--tl-dark);
padding: .25rem 2rem;
}
.featured-products table {
background: transparent;
margin: 0;
width: 100%;
}
.featured-products td {
vertical-align: middle;
padding: 2.1rem 1rem;
border-top: 1px solid rgba(255, 255, 255, .2);
}
.featured-products tr:first-child td {
border-top: none;
}
.featured-products .company-name h5 {
color: #fff;
font-family: var(--cx-display);
font-weight: 600;
margin: 0 0 .7rem;
font-size: 1.2rem;
}
.featured-products .company-name p {
color: #c9c8d0;
font-size: .85rem;
line-height: 1.75;
margin: 0;
max-width: 680px;
}
.featured-products .more-details a {
color: var(--tl-teal);
white-space: nowrap;
}
.featured-products .more-details a:hover {
color: var(--tl-teal-dark);
}
.featured-products .price {
font-weight: 700;
color: #fff;
white-space: nowrap;
}
.featured-products .order-now a {
color: var(--tl-teal);
font-weight: 600;
white-space: nowrap;
}
.featured-products .order-now a:hover {
color: #fff;
}
@media (max-width: 767px) {
.featured-products .featured-inner {
padding: .25rem 1rem;
}
.featured-products td {
display: block;
padding: .4rem 0;
border-top: none;
}
.featured-products tr {
display: block;
border-top: 1px solid rgba(255, 255, 255, .12);
padding: 1.2rem 0;
}
.featured-products tr:first-child {
border-top: none;
}
}
/* Info tooltip on each company name */
.product-tooltip {
position: relative;
display: inline-block;
margin-left: .4rem;
color: var(--tl-purple);
cursor: pointer;
}
.product-tooltip .product-tooltiptext {
visibility: hidden;
opacity: 0;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 150%;
background: var(--tl-dark);
color: #fff;
padding: .5rem .7rem;
border-radius: var(--cx-radius-xs);
font-size: .8rem;
min-width: 190px;
text-align: center;
z-index: 6;
transition: var(--cx-duration-sm);
}
.product-tooltip .product-tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: var(--tl-dark);
}
.product-tooltip:hover .product-tooltiptext {
visibility: visible;
opacity: 1;
}
.product-tooltip .product-tooltiptext p, .product-tooltip .product-tooltiptext ul {
margin: 0;
padding: 0;
list-style: none;
}
/* "exclusive of VAT" note */
.lower-banner {
padding: 2.4rem 0 3.4rem;
}
.lower-banner .content {
font-style: italic;
color: #777;
margin: 0;
}
.lower-banner.bank-intro {
padding: 3.6rem 0;
}
.lower-banner.bank-intro .content {
font-style: normal;
color: #444;
font-size: .95rem;
line-height: 1.75;
max-width: 980px;
}
.lower-banner.bank-intro .content a {
color: var(--tl-purple);
}
.lower-banner.bank-intro .content a:hover {
color: var(--tl-purple-dark);
}
/* Teal "exclusive of VAT" cross-sell band */
.cross-sell-vat {
background: var(--tl-teal);
width: 83.333%;
color: #fff;
padding: 3rem 0;
margin-top: 1.5rem;
}
.cross-sell-vat p {
margin: 0;
color: #fff;
padding-left: 20%;
}
@media (max-width: 767px) {
.cross-sell-vat {
width: 100%;
}
.cross-sell-vat p {
padding-left: 1.25rem;
}
}
/* ===== Interactive Jurisdiction Map page ===== */
.offshore-map {
padding: 2.8rem 0 1rem;
}
.offshore-map .intro-block h2 {
font-family: var(--cx-display);
text-transform: uppercase;
color: var(--tl-dark);
margin-bottom: 1rem;
}
.offshore-map .wysiwyg p {
color: #444;
line-height: 1.75;
margin-bottom: 1rem;
}
.map-controls {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 1.5rem;
margin: 1.75rem 0 0;
}
#filterbar ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 1rem;
max-width: 620px;
}
#filterbar li {
flex: 0 0 calc(50% - .5rem);
}
#filterbar a {
display: block;
text-align: center;
border: 1px solid var(--tl-purple);
color: var(--tl-purple);
background: #fff;
padding: .85rem 1rem;
font-size: .82rem;
letter-spacing: .03em;
text-transform: uppercase;
cursor: pointer;
transition: var(--cx-duration-sm);
}
#filterbar a:hover, #filterbar a.active {
background: var(--tl-purple);
color: #fff;
}
.select-location {
position: relative;
align-self: flex-start;
}
.select-location select {
appearance: none;
-webkit-appearance: none;
border: 1px solid var(--tl-purple);
color: var(--tl-purple);
background: #fff;
padding: .85rem 2.6rem .85rem 1rem;
font-size: .82rem;
letter-spacing: .03em;
text-transform: uppercase;
cursor: pointer;
border-radius: 0;
}
.select-location::after {
content: "\f078";
font-family: "Font Awesome 6 Free";
font-weight: 800;
color: var(--tl-purple);
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
font-size: .7rem;
}
.worldmap-wrap {
max-width: 1000px;
margin: 2.5rem auto 0;
}
.worldmap-wrap svg {
width: 100%;
height: auto;
display: block;
}
.worldmap-wrap svg polygon {
fill: var(--tl-purple);
stroke: #fff;
stroke-width: 1.5;
transition: var(--cx-duration-sm);
}
.worldmap-wrap svg polygon:hover {
fill: var(--tl-purple-dark);
}
.btn--map {
display: block;
width: max-content;
margin: 2.25rem auto 0;
background: var(--tl-purple);
color: #fff;
padding: .9rem 2.6rem;
text-transform: none;
letter-spacing: .04em;
font-size: .85rem;
}
.btn--map:hover {
background: var(--tl-purple-dark);
color: #fff;
text-decoration: none;
}
/* flex-html two-col (video + text) */
.flex-html-section {
padding: 3.5rem 0;
}
.flex-html-section .video-frame {
position: relative;
background: #000000;
overflow: hidden;
aspect-ratio: 16/10;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.flex-html-section .video-frame i {
color: #fff;
font-size: 3.4rem;
opacity: .85;
}
.flex-html-section .text__flex-html h2 {
font-family: var(--cx-display);
color: var(--tl-purple);
text-transform: uppercase;
margin-bottom: 1.2rem;
}
.flex-html-section .text__flex-html p {
color: #444;
line-height: 1.75;
margin-bottom: 1rem;
}
/* flex-one-col plain copy */
.flex-one-col-section {
padding: .5rem 0 2.5rem;
}
.flex-one-col-section p {
color: #444;
line-height: 1.75;
margin-bottom: 1rem;
}
/* purple action block */
.action-block {
padding: 1rem 0 4rem;
}
.action-block-bg.purple {
background: var(--tl-purple);
color: #fff;
text-align: center;
padding: 3.5rem 2rem;
}
.action-block-bg.purple h2 {
font-family: var(--cx-display);
color: #fff;
margin-bottom: 1rem;
}
.action-block-bg.purple p {
color: #fff;
margin: 1.25rem 0;
}
.action-block-bg .btn {
display: inline-block;
border: 1px solid #fff;
color: #fff;
background: transparent;
padding: .8rem 2.2rem;
text-transform: none;
letter-spacing: .04em;
font-size: .85rem;
}
.action-block-bg .btn:hover {
background: #fff;
color: var(--tl-purple);
text-decoration: none;
}
@media (max-width: 767px) {
#filterbar li {
flex: 0 0 100%;
}
.map-controls {
flex-direction: column;
}
}
/* ===== Company Formations landing page ===== */
.cat-description {
padding: 2.2rem 0 .5rem;
}
.cat-description p {
color: #444;
line-height: 1.75;
margin: 0;
}
/* find-best-jurisdiction promo (text + purple map) */
.find-jurisdiction {
padding: 3rem 0 1rem;
overflow: hidden;
}
.find-jurisdiction .fj-text h2 {
font-family: var(--cx-display);
color: var(--tl-dark);
margin-bottom: 1.2rem;
}
.find-jurisdiction .fj-text p {
color: #444;
line-height: 1.75;
margin-bottom: 1.5rem;
}
.find-jurisdiction .fj-text .btn-find {
display: inline-block;
background: var(--tl-purple);
color: #fff;
padding: .7rem 1.8rem;
text-transform: none;
letter-spacing: .03em;
font-size: .85rem;
}
.find-jurisdiction .fj-text .btn-find:hover {
background: var(--tl-purple-dark);
color: #fff;
text-decoration: none;
}
.find-jurisdiction .fj-map svg {
width: 100%;
height: auto;
display: block;
}
.find-jurisdiction .fj-map svg polygon {
fill: var(--tl-purple);
stroke: #fff;
stroke-width: 1.2;
}
/* Offshore bank-account cross-sell band (heading + content) */
.cross-sell-bank {
background: var(--tl-teal);
width: 83.333%;
color: #fff;
padding: 2.8rem 0;
margin-top: 1.5rem;
}
.cross-sell-bank .inner {
padding-left: 16.66%;
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.cross-sell-bank h5 {
flex: 0 0 22%;
min-width: 200px;
font-family: var(--cx-display);
color: #fff;
margin: 0;
font-size: 1.15rem;
}
.cross-sell-bank .content {
flex: 1;
min-width: 260px;
}
.cross-sell-bank .content p {
margin: 0;
color: #fff;
}
.cross-sell-bank .content a {
color: #fff;
text-decoration: underline;
}
@media (max-width: 767px) {
.cross-sell-bank {
width: 100%;
}
.cross-sell-bank .inner {
padding-left: 1.25rem;
}
}
/* ===== ENQUIRE NOW MODAL ===== */
/* ===== Enquire modal =========================================================
Dark, on the type scale, with a sticky header and footer so the submit button
is never scrolled out of reach. Inputs are tinted rather than stark white —
raw white boxes on a black panel were the harshest thing on the site. */
.enquire-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 2000;
background: rgba(8, 8, 10, .72);
backdrop-filter: blur(3px);
padding: 4vh 16px;
overflow-y: auto;
}
.enquire-overlay.open {
display: flex;
align-items: flex-start;
justify-content: center;
}
.enquire-modal {
position: relative;
width: 100%;
max-width: 520px;
margin: auto;
background: #131315;
border: 1px solid rgba(212, 175, 55, .18);
border-radius: var(--cx-radius-xl);
color: #fff;
max-height: 92vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: var(--cx-shadow-4);
/* The select popup and the scrollbar are drawn by the OS, not by this stylesheet.
color-scheme is the only way to reach them — it makes the browser use its dark
palette for its own widgets. Without it you get a white popup on a black panel. */
color-scheme: dark;
}
/* hairline of gold along the top instead of the old 10px slab down the side */
.enquire-modal::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--tl-gold, #D4AF37), transparent);
}
.enquire-close {
position: absolute;
top: 12px;
right: 14px;
z-index: 2;
background: none;
border: 0;
color: rgba(255, 255, 255, .5);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
transition: color var(--cx-duration-sm);
}
.enquire-close:hover {
color: #fff;
}
.enquire-head {
padding: 1.5rem 1.75rem 1rem;
border-bottom: 1px solid rgba(255, 255, 255, .07);
flex: 0 0 auto;
}
.enquire-body {
padding: 1.4rem 1.75rem;
overflow-y: auto;
flex: 1 1 auto;
}
.enquire-foot {
padding: 1.1rem 1.75rem 1.4rem;
border-top: 1px solid rgba(255, 255, 255, .07);
background: #131315;
flex: 0 0 auto;
}
.enquire-heading {
font-family: var(--cx-display);
font-weight: 700;
color: #fff;
font-size: var(--fs-h3, clamp(1.02rem, 1.45vw, 1.12rem));
margin: 0 0 .35rem;
}
.enquire-desc {
font-family: var(--cx-sans);
color: rgba(245, 241, 232, .6);
font-size: var(--fs-2xs, .82rem);
line-height: 1.55;
margin: 0;
}
.enquire-field {
margin-bottom: 1.15rem;
}
.enquire-field > label {
display: block;
font-family: var(--cx-sans);
font-size: var(--fs-label, .72rem);
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(245, 241, 232, .55);
margin-bottom: .45rem;
}
.enquire-field .req {
color: var(--tl-gold, #D4AF37);
}
.enquire-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .7rem;
}
.enquire-field input,
.enquire-field select {
width: 100%;
border: 1px solid rgba(255, 255, 255, .14);
background: rgba(255, 255, 255, .04);
color: #fff;
border-radius: var(--cx-radius);
padding: .6rem .75rem;
font-family: var(--cx-sans);
font-size: var(--fs-2xs, .82rem);
transition: border-color var(--cx-duration-sm), background var(--cx-duration-sm), box-shadow var(--cx-duration-sm);
}
.enquire-field input::placeholder {
color: rgba(245, 241, 232, .5); /* .35 measured 3.00:1 on #131315 — below AA */
}
.enquire-field input:focus,
.enquire-field select:focus {
outline: 0;
border-color: var(--tl-gold, #D4AF37);
background: rgba(255, 255, 255, .07);
box-shadow: 0 0 0 3px rgba(212, 175, 55, .14);
}
.enquire-field select {
appearance: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23D4AF37' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .8rem center;
background-size: 10px;
padding-right: 2rem;
}
.enquire-field select option {
background-color: #1A1A1D;
color: #F5F1E8;
}
/* the modal body scrollbar — the light track was as loud as the popup */
.enquire-body::-webkit-scrollbar {
width: 8px;
}
.enquire-body::-webkit-scrollbar-track {
background: transparent;
}
.enquire-body::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, .14);
border-radius: var(--cx-radius-xs);
}
.enquire-body::-webkit-scrollbar-thumb:hover {
background: rgba(212, 175, 55, .5);
}
.enquire-body {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
.enquire-single {
max-width: 100%;
}
.enquire-submit {
display: block;
width: 100%;
background: linear-gradient(180deg, #EAD18A, #D4AF37 55%, #B8902B);
color: #1a1305;
border: 0;
border-radius: var(--cx-radius-lg);
padding: .62rem 1.4rem;
font-family: var(--cx-display);
font-weight: 700;
font-size: var(--fs-3xs, .78rem);
letter-spacing: .05em;
cursor: pointer;
transition: filter var(--cx-duration-sm);
}
.enquire-submit:hover {
filter: brightness(1.06);
}
.enquire-fine {
font-family: var(--cx-sans);
font-size: var(--fs-micro, .7rem);
color: rgba(245, 241, 232, .5); /* .38 measured 3.29:1 — below AA */
text-align: center;
line-height: 1.5;
margin: .7rem 0 0;
}
.enquire-note {
margin-top: .8rem;
color: #D8BE6E;
font-size: var(--fs-2xs, .82rem);
text-align: center;
}
@media (max-width: 575px) {
.enquire-row {
flex-direction: column;
gap: 1rem;
}
.enquire-single {
max-width: 100%;
}
}
/* ===== Old top utility bar retired in favour of the floating glass nav ===== */
.top-bar {
display: none !important;
}
/* ===== PAGE CLEARANCE for the fixed top bar + floating navigation ===== */
body {
/*padding-top: 156px;*/
}
/* inner pages clear top bar + nav */
body.home {
padding-top: 0;
}
/* home hero sits full-bleed under it */
/* ===== HOMEPAGE: nav floats over the hero; keep the logo legible ===== */
.home #wrapper-navbar {
position: fixed;
}
.home .hero-panel {
z-index: 3;
}
/* subtle top scrim so the floating logo + glass never get lost on a bright hero */
.home .hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 230px;
background: linear-gradient(180deg, rgba(13, 13, 13, .40) 0%, rgba(13, 13, 13, .12) 55%, rgba(13, 13, 13, 0) 100%);
z-index: 1;
pointer-events: none;
}
/* ===== NAVBAR TOGGLER (hamburger) — light, for the dark capsule ===== */
.navbar-toggler {
position: relative;
z-index: 3;
border: 1px solid rgba(255, 255, 255, .20);
padding: .45rem .7rem;
border-radius: var(--cx-radius-lg);
background: rgba(255, 255, 255, .05);
}
.navbar-toggler:focus {
outline: none;
box-shadow: none;
}
.navbar-toggler-icon {
width: 1.6em;
height: 1.6em;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23F5F1E8' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* ===== MOBILE (<992px): logo + capsule stack cleanly, menu opens as glass ===== */
@media (max-width: 991.98px) {
.tl-topbar {
height: 38px;
font-size: .78rem;
}
.tl-topbar .container {
justify-content: center;
gap: 1.6rem;
padding-left: 18px;
padding-right: 18px;
}
#wrapper-navbar {
top: 48px;
left: 16px;
right: 16px;
gap: 14px;
justify-content: space-between;
}
/* NOTE: no `body { padding-top }` here — the current header (partials/navbar.blade.php,
.cc-header in nav.css) is `position: sticky`, which already reserves its own space in
normal document flow. A fixed 120px body padding was left over from a retired
#wrapper-navbar/.tl-topbar header implementation that no longer exists in the markup, and
was stacking on top of the sticky header's own space, producing the extra gap on mobile. */
.nav-logo img {
height: 66px;
}
/* capsule shrinks to a tidy pill around just the hamburger (no empty stretch) */
.nav-capsule {
min-height: 58px;
width: auto;
flex: 0 0 auto;
padding: 0 7px;
justify-content: center;
}
.navbar-toggler {
margin: 0;
}
/* menu drops as a right-anchored glass panel with its own width */
.nav-capsule .navbar-collapse {
position: absolute;
top: calc(100% + 14px);
right: 0;
left: auto;
width: min(82vw, 340px);
max-height: calc(100vh - 140px); /* never taller than the screen */
overflow-y: auto; /* scroll the items */
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
background: linear-gradient(180deg, rgba(26, 26, 28, .94) 0%, rgba(14, 14, 16, .96) 100%);
-webkit-backdrop-filter: blur(22px) saturate(135%);
backdrop-filter: blur(22px) saturate(135%);
border: 1px solid rgba(255, 255, 255, .10);
border-radius: var(--cx-radius-xl);
box-shadow: var(--cx-shadow-4);
padding: .6rem .5rem;
z-index: 5;
}
/* slim, understated gold scrollbar */
.nav-capsule .navbar-collapse::-webkit-scrollbar {
width: 6px;
}
.nav-capsule .navbar-collapse::-webkit-scrollbar-thumb {
background: rgba(197, 160, 68, .35);
border-radius: var(--cx-radius-sm);
}
.nav-capsule .navbar-collapse::-webkit-scrollbar-track {
background: transparent;
}
.nav-capsule .navbar-collapse {
scrollbar-width: thin;
scrollbar-color: rgba(197, 160, 68, .35) transparent;
}
.nav-capsule .navbar-nav {
align-items: stretch;
width: 100%;
}
.nav-capsule .nav-link {
margin: 0;
padding: .62rem .85rem !important;
}
.nav-capsule .nav-link::before {
display: none;
}
.nav-capsule .btn-enquire {
margin: .6rem 1rem;
text-align: center;
}
.nav-capsule .dropdown-menu::before {
display: none;
}
.nav-capsule .dropdown-menu {
background: rgba(255, 255, 255, .03);
box-shadow: none;
border-color: rgba(255, 255, 255, .07);
margin-top: .2rem;
}
}
@media (max-width: 480px) {
.tl-topbar a span {
display: none;
}
/* icons only on the smallest screens */
.tl-topbar i {
font-size: 1.2rem;
}
.tl-topbar .container {
gap: 1.5rem;
}
}
/* =====================================================================
LUXURY PASS — typography · gold buttons · cards · spacing · hero
Appended last so it governs the cascade. Palette unchanged:
gold #C5A044 / #D8BE6E · charcoal #161616 · cream #F5F1E8 · white.
===================================================================== */
/* ---------- 1. TYPOGRAPHY: brand board — Playfair headings, Inter body ---------- */
h1, h2, h3, h4, h5, h6 {
line-height: 1.2;
}
h1{
font-family: var(--cx-display);
font-weight: 600;
font-size: clamp(1.35rem, 2.45vw, 1.8rem);
line-height: 1.15;
margin: 0 0 1.6rem;
letter-spacing: normal;
}
h2{
font-family: var(--cx-display);
font-weight: 600;
font-size: clamp(1.15rem, 1.85vw, 1.42rem);
line-height: 1.25;
letter-spacing: normal;
margin: 0 0 1.6rem;
}
h3{
font-family: var(--cx-sans);
font-weight: 500;
font-size: clamp(1.02rem, 1.45vw, 1.12rem);
line-height: 1.4;
margin: 0 0 1rem;
letter-spacing: 1px;
}
h4{
font-family: var(--cx-sans);
font-weight: 600;
font-size: .98rem;
letter-spacing: .5px;
margin: 0 0 1rem;
}
p {
line-height: 1.8;
letter-spacing: .2px;
margin-bottom: 1.5rem;
}
.lead, p.lead {
font-size: 1.2rem;
line-height: 1.85;
font-weight: 400;
}
/* a little more room around the gold section sub-rules */
section + section {
margin-top: 0;
}
/* ---------- 2. POLISHED GOLD BUTTONS — one style: default / hover / pressed ---------- */
.btn-gold,
.btn,
.btn-primary,
.btn-secondary,
.btn-enquire,
.enquire-submit,
.hero-cta,
.hero-btn,
.btn--map,
.find-jurisdiction .fj-text .btn-find,
.newsletter .signup-box .btn,
.companyname-checker .checker-fields .btn,
.services .btn-primary,
.action-block-bg .btn,
.popular .order-now a {
display: inline-block;
background: linear-gradient(180deg, #EAD18A 0%, #D4AF37 45%, #B8902B 100%);
color: #1a1305 !important;
border: none !important;
border-radius: 12px; /* board spec: 12px */
padding: .5rem 1.5rem;
font-family: var(--cx-sans);
font-weight: 600;
font-size: .95rem;
letter-spacing: .06em;
text-transform: none;
text-decoration: none;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), /* top highlight */ inset 0 -2px 3px rgba(120, 85, 10, .30), /* inner bottom shade */ 0 9px 22px -7px rgba(212, 175, 55, .50), /* soft gold glow */ 0 3px 8px rgba(0, 0, 0, .20); /* bottom shadow */
transition: transform .5s ease, box-shadow .5s ease, background .5s ease;
}
/* HOVER — lifts 2–3px, brighter, deeper shadow */
.btn-gold:hover, .btn:hover, .btn-primary:hover, .btn-secondary:hover, .btn-enquire:hover,
.enquire-submit:hover, .hero-cta:hover, .hero-btn:hover, .btn--map:hover,
.find-jurisdiction .fj-text .btn-find:hover, .newsletter .signup-box .btn:hover,
.companyname-checker .checker-fields .btn:hover, .services .btn-primary:hover,
.action-block-bg .btn:hover, .popular .order-now a:hover {
transform: translateY(-3px);
background: radial-gradient(ellipse 72% 82% at 50% 72%, rgba(255, 247, 212, .78) 0%, rgba(255, 233, 168, .32) 44%, rgba(255, 233, 168, 0) 78%),
linear-gradient(180deg, #F2DD9E 0%, #E0BE52 45%, #C9A233 100%);
color: #1a1305 !important;
text-decoration: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8),
inset 0 -6px 16px rgba(255, 236, 170, .35), /* inner glow seat */ 0 16px 34px -9px rgba(212, 175, 55, .7),
0 6px 14px rgba(0, 0, 0, .26);
}
/* PRESSED — top highlight + bottom shadow, pressed in */
.btn-gold:active, .btn:active, .btn-primary:active, .btn-secondary:active, .btn-enquire:active,
.enquire-submit:active, .hero-cta:active, .hero-btn:active, .btn--map:active,
.find-jurisdiction .fj-text .btn-find:active, .newsletter .signup-box .btn:active,
.companyname-checker .checker-fields .btn:active, .services .btn-primary:active,
.action-block-bg .btn:active, .popular .order-now a:active {
transform: translateY(0);
background: linear-gradient(180deg, #C9A233 0%, #B8902B 60%, #A67D22 100%);
box-shadow: inset 0 2px 5px rgba(90, 62, 8, .45), /* pressed-in shade */ inset 0 1px 0 rgba(255, 255, 255, .45), /* top highlight kept */ 0 2px 6px rgba(0, 0, 0, .28); /* tight bottom shadow */
}
.btn-gold--lg {
padding: .5rem 1.7rem;
font-size: .8rem;
letter-spacing: .08em;
border-radius: var(--cx-radius-lg);
}
/* ---------- 3. LUXURY CARDS ---------- */
.lux-card {
background: #fff;
border-radius: var(--cx-radius-xl);
padding: 2.4rem;
border: 1px solid rgba(20, 20, 22, .05);
box-shadow: var(--cx-shadow-3);
transition: transform .5s ease, box-shadow .5s ease;
}
.lux-card:hover {
transform: translateY(var(--cx-hover-lift));
box-shadow: 0 24px 48px -18px rgba(20, 20, 22, .30),
0 0 0 1px rgba(197, 160, 68, .14),
0 0 34px rgba(197, 160, 68, .12);
}
.lux-card .lux-card__icon {
width: 64px;
height: 64px;
border-radius: var(--cx-radius-lg);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--tl-purple);
background: linear-gradient(180deg, rgba(216, 190, 110, .16), rgba(197, 160, 68, .10));
margin-bottom: 1.6rem;
}
.lux-card h3 {
margin-bottom: .9rem;
}
.lux-card p {
color: #555;
margin-bottom: 0;
}
/* retrofit existing case-study cards to the premium feel */
.case-card {
border-radius: var(--cx-radius-lg);
overflow: hidden;
transition: transform .5s ease, box-shadow .5s ease;
background: #fff;
box-shadow: var(--cx-shadow-3);
}
.case-card:hover {
transform: translateY(var(--cx-hover-lift));
box-shadow: 0 24px 46px -18px rgba(20, 20, 22, .30), 0 0 28px rgba(197, 160, 68, .12);
}
.case-card .body {
padding: 1.6rem 1.6rem 2rem;
}
/* ---------- 4. EXTRA BREATHING ROOM ---------- */
.mission, .services, .stats, .popular, .jurisdiction, .case-studies, .latest-news, .contact {
padding-top: 7rem;
padding-bottom: 7rem;
}
.mission h2, .services .tab-pane h2 {
margin-bottom: 1.6rem;
}
.row {
row-gap: 1.5rem;
}
/* ---------- 5. CINEMATIC HERO ---------- */
.hero {
position: relative;
height: 100vh;
min-height: 680px;
max-height: 1000px;
background: #0c0c0d;
overflow: hidden;
}
.hero .carousel, .hero .carousel-inner, .hero .carousel-item {
height: 100%;
border: 0;
}
.hero .carousel-item {
background: #0c0c0d;
}
.hero-bg {
position: absolute;
inset: 0;
left: 0;
background-size: cover;
background-position: center;
animation: heroZoom 20s ease-out infinite alternate;
will-change: transform;
}
/* cinematic scrim: darker low-left for text, soft vignette.
NOTE: these are premium placeholders (London / financial architecture).
Replace the URLs with your own licensed photography in assets/images/frontend/hero/. */
.hero .slide-1 {
background-image: linear-gradient(100deg, rgba(6, 6, 8, .86) 0%, rgba(6, 6, 8, .64) 30%, rgba(6, 6, 8, .30) 60%, rgba(6, 6, 8, 0) 100%), url('https://images.unsplash.com/photo-1529655683826-aba9b3e77383?w=1920&q=80&auto=format&fit=crop');
}
.hero .slide-2 {
background-image: linear-gradient(100deg, rgba(6, 6, 8, .86) 0%, rgba(6, 6, 8, .64) 30%, rgba(6, 6, 8, .30) 60%, rgba(6, 6, 8, 0) 100%), url('https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?w=1920&q=80&auto=format&fit=crop');
}
.hero .slide-3 {
background-image: linear-gradient(100deg, rgba(6, 6, 8, .86) 0%, rgba(6, 6, 8, .64) 30%, rgba(6, 6, 8, .30) 60%, rgba(6, 6, 8, 0) 100%), url('https://images.unsplash.com/photo-1496568816309-51d7c20e3b21?w=1920&q=80&auto=format&fit=crop');
}
@keyframes heroZoom {
from {
transform: scale(1.0);
}
to {
transform: scale(var(--cx-hover-scale));
}
}
@media (prefers-reduced-motion: reduce) {
.hero-bg {
animation: none;
}
}
.hero-overlay {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
align-items: center;
}
.hero-content {
max-width: 780px;
padding: 0 clamp(25px, 8vw, 120px);
color: #f5f1e8;
}
.hero-eyebrow {
display: inline-block;
text-transform: uppercase;
letter-spacing: .48em;
font-family: var(--cx-sans);
font-weight: 500;
font-size: .72rem;
color: var(--tl-teal);
margin-bottom: 1.4rem;
}
.hero-title {
font-family: var(--cx-display);
font-weight: 700;
color: #fff;
font-size: clamp(1.292rem, 2.992vw, 2.312rem);
line-height: 1.12;
letter-spacing: .5px;
margin: 0 0 1.6rem;
text-shadow: 0 2px 30px rgba(0, 0, 0, .45);
overflow-wrap: break-word;
word-wrap: break-word;
}
.hero-sub {
font-size: 1.05rem;
line-height: 1.8;
color: rgba(245, 241, 232, .84);
max-width: 440px;
margin: 0 0 1.6rem;
}
.hero-rule {
display: block;
width: 90px;
height: 2px;
margin: 0 0 2.1rem;
border-radius: 2px;
background: linear-gradient(90deg, var(--tl-purple), var(--tl-teal));
box-shadow: 0 0 14px rgba(212, 175, 55, .4);
}
.hero-cta {
font-size: 1rem;
padding: 1rem 2.6rem;
border-radius: 14px;
transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.hero-cta:hover {
transform: translateY(-3px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8),
0 14px 30px -8px rgba(212, 175, 55, .75),
0 0 30px rgba(212, 175, 55, .38),
0 6px 14px rgba(0, 0, 0, .26);
}
/* hero content sits a little lower; items fade in one after another */
.hero-content {
margin-top: 16px;
animation: heroRise 1s ease-out both;
}
@keyframes heroRise {
from {
transform: translateY(24px);
}
to {
transform: translateY(0);
}
}
.hero-content > * {
opacity: 0;
animation: heroFade .9s ease-out forwards;
}
.hero-eyebrow {
animation-delay: .2s;
}
.hero-title {
animation-delay: .35s;
}
.hero-sub {
animation-delay: .55s;
}
.hero-rule {
animation-delay: .7s;
}
.hero-cta {
animation-delay: .85s;
}
@keyframes heroFade {
to {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.hero-content, .hero-content > * {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
@media (max-width: 767px) {
/* hero height is driven by its content so the CTA can never be clipped */
.hero {
height: auto;
min-height: 0;
}
.hero .carousel {
position: absolute;
inset: 0;
height: 100%;
z-index: 1;
}
.hero-overlay {
position: relative;
inset: auto;
display: block;
z-index: 3;
padding: 150px 28px 72px;
min-height: 90vh;
}
.hero-content {
max-width: 100%;
padding: 0;
}
.hero-title {
font-size: clamp(1.36rem, 5.78vw, 2.04rem);
}
.hero-sub {
font-size: 1.05rem;
}
.hero-cta {
width: 100%;
text-align: center;
}
}
/* =====================================================================
REFINEMENT LAYER — photography grade · gold line icons · detail kit
· slow reveals · premium mobile. Palette unchanged.
===================================================================== */
/* ---------- A. PHOTOGRAPHY GRADE ----------
Makes ANY image look expensive and consistent: charcoal base, a whisper
of warm gold, and a soft vignette. Wrap an image area in .img-grade and
put the photo on .img-grade__src (or a background). */
.img-grade {
position: relative;
overflow: hidden;
background: #0c0c0d;
}
.img-grade__src, .img-grade > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover; object-position: var(--img-pos, 50% 50%);
}
.img-grade::after { /* the grade */
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(120% 100% at 50% 0%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .28) 100%), /* vignette */ linear-gradient(180deg, rgba(12, 12, 14, .18) 0%, rgba(12, 12, 14, .30) 100%), /* depth */ linear-gradient(0deg, rgba(197, 160, 68, .06), rgba(197, 160, 68, .06)); /* warm gold cast */
mix-blend-mode: normal;
}
/* darker grade for hero / banners where text sits on top */
.img-grade--deep::after {
background: linear-gradient(105deg, rgba(8, 8, 10, .74) 0%, rgba(8, 8, 10, .46) 42%, rgba(8, 8, 10, .22) 100%),
radial-gradient(120% 120% at 50% 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .35) 100%),
linear-gradient(0deg, rgba(197, 160, 68, .05), rgba(197, 160, 68, .05));
}
/* ---------- B. PREMIUM LINE ICONS (Phosphor, gold, consistent) ---------- */
/* default weight = thin; one consistent style site-wide */
i[class^="ph-"], i[class*=" ph-"], i[class^="ph-thin"], i[class*=" ph-thin"] {
color: var(--tl-purple);
line-height: 1;
display: inline-flex;
vertical-align: middle;
}
.icon-gold {
color: var(--tl-purple) !important;
}
/* gold "coin" tile that holds a line icon — used on cards & feature lists */
.icon-tile {
width: 66px;
height: 66px;
border-radius: var(--cx-radius-lg);
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.7rem;
color: var(--tl-purple);
background: linear-gradient(180deg, rgba(216, 190, 110, .16), rgba(197, 160, 68, .07));
border: 1px solid rgba(197, 160, 68, .18);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 20px -12px rgba(197, 160, 68, .5);
transition: transform .6s ease, box-shadow .6s ease;
}
.lux-card:hover .icon-tile, .feature:hover .icon-tile {
transform: translateY(var(--cx-hover-lift));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 26px -12px rgba(197, 160, 68, .6);
}
/* rebuild the card icon on the same system */
.lux-card .lux-card__icon {
width: 66px;
height: 66px;
border-radius: var(--cx-radius-lg);
font-size: 1.7rem;
border: 1px solid rgba(197, 160, 68, .18);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 20px -12px rgba(197, 160, 68, .5);
}
/* ---------- C. PREMIUM DETAIL KIT ---------- */
/* thin gold divider line */
.gold-divider {
height: 1px;
border: 0;
width: 100%;
background: linear-gradient(90deg, rgba(197, 160, 68, 0), rgba(197, 160, 68, .55), rgba(197, 160, 68, 0));
margin: 0;
}
.gold-divider--short {
width: 54px;
height: 2px;
margin: 1.4rem 0;
background: linear-gradient(90deg, var(--tl-teal), var(--tl-purple));
border-radius: var(--cx-radius-xs);
}
.gold-divider--center {
margin-left: auto;
margin-right: auto;
}
/* centred ornament: line · diamond · line */
.gold-ornament {
display: flex;
align-items: center;
justify-content: center;
gap: .9rem;
margin: 1.4rem 0;
color: var(--tl-purple);
}
.gold-ornament::before, .gold-ornament::after {
content: "";
height: 1px;
width: 64px;
background: linear-gradient(90deg, rgba(197, 160, 68, 0), rgba(197, 160, 68, .6));
}
.gold-ornament::after {
transform: scaleX(-1);
}
.gold-ornament i, .gold-ornament span {
font-size: .7rem;
letter-spacing: .3em;
text-transform: uppercase;
}
/* section eyebrow + heading pattern */
.section-eyebrow {
display: inline-block;
text-transform: uppercase;
letter-spacing: .42em;
font-family: var(--cx-sans);
font-weight: 500;
font-size: .72rem;
color: var(--tl-purple);
margin-bottom: 1.1rem;
}
.section-head {
max-width: 760px;
margin-bottom: 3rem;
}
.section-head.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* soft top "lighting" that can sit on dark bands */
.soft-light {
position: relative;
}
.soft-light::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 70%;
height: 160px;
pointer-events: none;
background: radial-gradient(60% 100% at 50% 0%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 70%);
}
/* refined card shadow on dark stats band */
.stats {
position: relative;
}
.stats .stat h5 {
letter-spacing: .5px;
}
/* ---------- D. SLOW REVEAL (fade only, no sliding) ---------- */
[data-reveal] {
opacity: 0;
transform: translateY(16px);
transition: opacity .8s ease, transform .8s ease;
will-change: opacity, transform;
}
[data-reveal].is-revealed {
opacity: 1;
transform: none;
}
[data-reveal="fade"] {
transform: none;
}
/* pure fade, no movement */
[data-reveal-delay="1"] {
transition-delay: .12s;
}
[data-reveal-delay="2"] {
transition-delay: .24s;
}
[data-reveal-delay="3"] {
transition-delay: .36s;
}
@media (prefers-reduced-motion: reduce) {
[data-reveal] {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ---------- E. GLOBAL MOTION CALM: nothing fast, nothing flashy ---------- */
a, button, .btn, .nav-link, .dropdown-item, .lux-card, .case-card, .icon-tile, img {
transition-timing-function: ease;
}
/* ---------- F. PREMIUM MOBILE (preserve spacing, type, luxury feel) ---------- */
@media (max-width: 991.98px) {
.mission, .services, .stats, .popular, .jurisdiction, .case-studies, .latest-news, .contact {
padding-top: 5rem;
padding-bottom: 5rem; /* generous, not cramped */
}
.demo-band, .section-head {
padding-left: 0;
padding-right: 0;
}
.lux-card {
padding: 2.2rem;
}
.section-head {
margin-bottom: 2.4rem;
}
}
@media (max-width: 767px) {
h2 {
letter-spacing: 1.2px;
}
.hero-content {
padding: 0 30px;
}
.hero-eyebrow {
letter-spacing: .36em;
}
.hero-sub {
max-width: 100%;
}
.row {
row-gap: 1.4rem;
}
/* keep generous outer breathing room on small screens */
.container {
padding-left: 24px;
padding-right: 24px;
}
/* cards never shrink to feel cheap */
.lux-card {
padding: 2.2rem 1.9rem;
border-radius: var(--cx-radius-lg);
}
.btn-gold, .btn-primary {
padding: .42rem 1.5rem;
}
}
/* ===== MULTI-OFFICE CONTACT BLOCKS ===== */
.contact-address .office {
margin: .85rem 0 0;
line-height: 1.65;
}
.contact-address .office strong {
color: var(--tl-purple);
font-weight: 600;
letter-spacing: .3px;
}
.contact-address .office span {
color: #9a8f78;
}
.site-footer .footer-contact {
font-style: normal;
line-height: 1.55;
}
.site-footer .footer-contact > a {
color: var(--tl-purple);
}
.site-footer .footer-contact .office {
display: block;
margin-top: .65rem;
font-size: .76rem;
color: rgba(245, 242, 234, .8);
}
.site-footer .footer-contact .office strong {
color: #fff;
font-weight: 600;
}
.site-footer .footer-contact .office a {
color: var(--tl-purple);
}
/* ===== HERO REFINEMENT: navigation + top bar slide down on load ===== */
.tl-topbar {
animation: navDrop 1s cubic-bezier(.2, .7, .2, 1) both;
}
#wrapper-navbar {
animation: navDrop 1s cubic-bezier(.2, .7, .2, 1) .08s both;
}
@keyframes navDrop {
from {
transform: translateY(-130%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.tl-topbar, #wrapper-navbar {
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
}
/* ===== PREMIUM JURISDICTION DIRECTORY (homepage) ===== */
.popular h2 {
font-size: clamp(1.156rem, 1.836vw, 1.36rem);
margin-bottom: 1.9rem;
}
/* item 5: −10% */
.popular > .container > p {
max-width: 760px;
margin: 0 auto 3.4rem;
color: #5d584f;
}
/* items 6 + 12 */
/* filters */
.dir-filter {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .7rem;
justify-content: center;
margin: 0 auto 2.8rem;
max-width: 920px;
}
.dir-filter-label {
font-family: var(--cx-sans);
font-size: .72rem;
letter-spacing: .22em;
text-transform: uppercase;
color: #8a8378;
margin-right: .3rem;
}
.dir-chips {
display: flex;
flex-wrap: wrap;
gap: .6rem;
justify-content: center;
}
.dir-chip {
font-family: var(--cx-sans);
font-size: .74rem;
font-weight: 500;
color: var(--tl-dark);
background: #fff;
border: 1px solid #e6dcc4;
padding: .38rem .85rem;
border-radius: 999px;
cursor: pointer;
transition: all var(--cx-duration) ease;
}
.dir-chip:hover {
border-color: var(--tl-purple);
}
.dir-chip.active {
background: linear-gradient(180deg, #F2DD9E, #D4AF37);
color: #1a1305;
border-color: transparent;
box-shadow: 0 8px 20px -10px rgba(212, 175, 55, .6);
}
/* directory rows */
.dir {
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1rem;
}
.dir-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.4rem;
background: #fff;
border: 1px solid #ece6d6;
border-radius: var(--cx-radius-lg);
padding: 1.9rem 2rem;
transition: background var(--cx-duration) ease, box-shadow var(--cx-duration) ease, border-color var(--cx-duration) ease, transform var(--cx-duration) ease;
}
/* item 3: taller rows */
.dir-row:hover {
background: #faf7ee;
border-color: rgba(212, 175, 55, .4);
box-shadow: var(--cx-shadow-3);
transform: translateY(var(--cx-hover-lift));
}
/* item 9: understated cream */
.dir-main {
display: flex;
align-items: flex-start;
gap: 1.2rem;
min-width: 0;
}
.dir-row .dir-flag.fi {
width: 38px;
height: 28px;
background-size: cover;
background-position: center;
border-radius: var(--cx-radius-sm);
}
.dir-row .dir-flag {
flex: 0 0 auto;
margin-top: .15rem;
box-shadow: 0 1px 4px rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(0, 0, 0, .06);
}
/* item 8: SVG flags */
.office .flag-inline.fi, .footer-contact .flag-inline.fi {
width: 22px;
height: 16px;
background-size: cover;
background-position: center;
border-radius: var(--cx-radius-xs);
}
.office .flag-inline, .footer-contact .flag-inline {
display: inline-block;
vertical-align: -2px;
margin-right: .5rem;
box-shadow: var(--cx-shadow-1);
}
.dir-text {
min-width: 0;
}
.dir-text h3 {
font-family: var(--cx-display);
font-weight: 600;
font-size: 0.884rem;
color: var(--tl-dark);
margin: 0 0 .35rem;
letter-spacing: .3px;
text-transform: none;
}
.dir-text > p {
margin: 0 0 .85rem;
color: #6b665d;
font-size: .92rem;
line-height: 1.55;
max-width: 560px;
}
/* item 10: description */
.dir-badges {
display: flex;
flex-wrap: wrap;
gap: .45rem;
}
.dir-badges span {
font-family: var(--cx-sans);
font-size: .66rem;
font-weight: 600;
letter-spacing: .02em;
color: var(--tl-purple-dark);
background: rgba(212, 175, 55, .10);
border: 1px solid rgba(212, 175, 55, .28);
padding: .18rem .5rem;
border-radius: 999px;
}
.dir-btn {
flex: 0 0 auto;
align-self: center;
background: linear-gradient(180deg, #EAD18A, #D4AF37 55%, #B8902B);
color: #1a1305 !important;
font-family: var(--cx-sans);
font-weight: 600;
font-size: .82rem;
letter-spacing: .03em;
padding: .6rem 1.3rem;
border-radius: var(--cx-radius-lg);
text-decoration: none;
white-space: nowrap;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 14px -6px rgba(212, 175, 55, .5);
transition: transform var(--cx-duration) ease, box-shadow var(--cx-duration) ease, filter var(--cx-duration) ease;
}
/* item 2: smaller button */
.dir-btn:hover {
transform: translateY(var(--cx-hover-lift));
filter: brightness(1.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 20px -7px rgba(212, 175, 55, .6);
color: #1a1305 !important;
}
.dir-row.is-hidden {
display: none;
}
.dir-more {
display: block;
text-align: center;
margin-top: 2.4rem;
}
@media (max-width: 680px) {
.dir-row {
flex-direction: column;
align-items: flex-start;
gap: 1.1rem;
padding: 1.6rem 1.4rem;
}
.dir-btn {
align-self: stretch;
text-align: center;
}
}
/* ===== CONTACT SECTION — executive redesign (form-first + office cards) ===== */
.contact {
padding-top: 7rem;
padding-bottom: 7rem;
}
/* item 3: −10%, more line spacing */
/* items 15 + 4 */
.contact-div {
max-width: 120px;
margin: 3.2rem auto;
}
/* items 13 + 4 */
/* the form is the hero (items 2 + 16) */
/* item 10 */
/* item 9 */
/* item 2: taller message */
/* item 8: ~15% wider + "Send Enquiry" */
/* item 12 */
/* three office cards (items 1 + 5 + 14) */
.office-cards {
display: grid;
grid-template-columns:repeat(3, 1fr);
gap: 1.4rem;
max-width: 1020px;
margin: 0 auto;
}
.office-card {
background: #fff;
border: 1px solid #ece6d6;
border-radius: var(--cx-radius-lg);
padding: 1.9rem 1.7rem;
transition: transform var(--cx-duration) ease, box-shadow var(--cx-duration) ease, border-color var(--cx-duration) ease;
}
.office-card:hover {
transform: translateY(var(--cx-hover-lift));
border-color: rgba(212, 175, 55, .4);
box-shadow: var(--cx-shadow-4);
}
.office-card .oc-head {
display: flex;
align-items: center;
gap: .6rem;
margin-bottom: 1rem;
}
.office-card .oc-head .fi {
width: 26px;
height: 19px;
border-radius: var(--cx-radius-xs);
background-size: cover;
background-position: center;
box-shadow: var(--cx-shadow-1);
flex: 0 0 auto;
}
.office-card .oc-head h4 {
font-family: var(--cx-display);
font-weight: 600;
font-size: 0.802rem;
color: var(--tl-dark);
margin: 0;
}
.office-card address {
font-style: normal;
color: #6b665d;
font-size: .92rem;
line-height: 1.7;
margin: 0 0 .95rem;
}
.office-card .oc-row {
display: flex;
align-items: flex-start;
gap: .5rem;
font-size: .92rem;
color: #524e47;
margin-bottom: .55rem;
}
.office-card .oc-row i {
color: var(--tl-purple-dark);
font-size: 1.1rem;
margin-top: .05rem;
}
.office-card .oc-row a {
color: var(--tl-purple-dark);
}
.office-card .oc-maps {
display: inline-flex;
align-items: center;
gap: .35rem;
font-family: var(--cx-sans);
font-size: .78rem;
font-weight: 600;
color: var(--tl-purple-dark);
}
.office-card .oc-maps i {
font-size: 1rem;
}
.office-card .oc-maps:hover {
color: var(--tl-purple);
text-decoration: none;
}
/* main line · email · hours (items 6 + 7 + 11) */
.contact-foot {
display: grid;
grid-template-columns:repeat(3, 1fr);
gap: 1.4rem;
max-width: 1020px;
margin: 0 auto;
text-align: center;
}
.contact-foot h6 {
font-family: var(--cx-sans);
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
color: #8a8378;
margin: 0 0 .6rem;
font-weight: 600;
}
.contact-foot a, .contact-foot p {
font-size: .98rem;
color: #3d3a34;
margin: 0;
line-height: 1.75;
}
.contact-foot .main-line {
font-family: var(--cx-display);
font-size: 1.3rem;
color: var(--tl-dark);
}
.contact-foot .main-line:hover {
color: var(--tl-purple);
}
.contact-email {
display: inline-flex;
align-items: center;
gap: .45rem;
color: var(--tl-dark);
transition: color var(--cx-duration) ease;
}
/* item 7 */
.contact-email i {
color: var(--tl-purple-dark);
}
.contact-email:hover {
color: var(--tl-purple);
text-decoration: none;
}
@media (max-width: 767px) {
.office-cards, .contact-foot {
grid-template-columns:1fr;
}
}
/* ===== UK COMPANY FORMATION — page refinements (Simon) ===== */
/* item 2: 56px search field + matching button + magnifying-glass icon inside box */
.companyname-checker .checker-fields {
gap: .7rem;
}
.companyname-checker .checker-fields .cn-input {
position: relative;
flex: 1 1 280px;
display: flex;
}
.companyname-checker .checker-fields .cn-input i {
position: absolute;
left: 1.05rem;
top: 50%;
transform: translateY(-50%);
color: var(--tl-purple);
font-size: 1.2rem;
pointer-events: none;
}
.companyname-checker .checker-fields .cn-input .form-control {
flex: 1 1 auto;
width: 100%;
height: 56px;
margin: 0;
padding: .7rem 1rem .7rem 2.9rem;
}
.companyname-checker .checker-fields .btn {
height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
padding-top: 0;
padding-bottom: 0;
}
/* item 5: Stay Informed intro line (heading + intro stack left, form stays right) */
.newsletter .signup-box .nl-copy {
flex: 1 1 360px;
max-width: 580px;
}
.newsletter .signup-box .nl-copy h2 {
margin: 0 0 .55rem;
}
.newsletter .signup-box .newsletter-intro {
margin: 0;
color: rgba(255, 255, 255, .72);
font-size: .9rem;
line-height: 1.65;
}
/* ===== OFFSHORE COMPANY FORMATION — page refinements (Simon) ===== */
/* item 3: AVAILABLE JURISDICTIONS heading -5% + space before the list */
.products-listing h2 {
font-size: clamp(1.122rem, 1.972vw, 1.394rem);
}
.products-listing .listing-table {
margin-top: 1.7rem;
}
/* item 3: premium row hover — warm wash, gold name, arrow drifts right */
.products-listing tbody tr {
transition: background var(--cx-duration) ease;
}
.products-listing .table-hover tbody tr:hover {
background: #faf7ee;
}
.products-listing tbody tr:hover .country {
color: var(--tl-purple-dark);
}
.products-listing .more-details a span {
display: inline-block;
transition: transform var(--cx-duration) ease;
}
.products-listing tbody tr:hover .more-details a span {
transform: translateX(5px);
}
/* item 4: Can't-find block — smaller heading, gold rule above, wider button */
.products-listing .cant-find {
margin-top: 1.2rem;
}
.products-listing .cant-find h2 {
font-size: clamp(0.986rem, 1.632vw, 1.224rem);
}
.cant-find-rule {
width: 100px;
height: 2px;
border: 0;
margin: 0 0 1.5rem;
border-radius: var(--cx-radius-xs);
background: linear-gradient(90deg, var(--tl-teal), var(--tl-purple));
}
.products-listing .cant-find .btn {
padding-left: 2.9rem;
padding-right: 2.9rem;
}
/* item 6: final CTA — gold global-network illustration replaces the flat globe */
.map-wrap .globe-net {
width: 100%;
max-width: 360px;
height: auto;
display: block;
margin: 0 auto;
filter: drop-shadow(0 16px 36px rgba(212, 175, 55, .18));
}
.map-wrap .gn-orbit {
transform-origin: 210px 210px;
animation: gnSpin 34s linear infinite;
}
@keyframes gnSpin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.map-wrap .gn-orbit {
animation: none;
}
}
/* item 4 (licence page): richer-gold link hover on jurisdiction tables */
.products-listing .more-details a:hover {
color: #a67d22;
}
/* ===== OFFSHORE READY-MADE COMPANIES — page refinements (Simon) ===== */
/* item 2: taller rows on this page only + darker-gold links on row hover */
.page-offshore-ready-made-companies .products-listing td {
padding: 1.85rem 1rem;
}
.products-listing tbody tr:hover .more-details a,
.products-listing tbody tr:hover .order-now a {
color: #a67d22;
}
/* item 3: VAT notice as a subtle light-grey info pill */
.lower-banner--vat {
text-align: center;
}
.vat-note {
display: inline-flex;
align-items: center;
gap: .6rem;
background: #f4f3ef;
border: 1px solid #e7e4dc;
border-radius: var(--cx-radius-lg);
padding: .75rem 1.2rem;
color: #6f6a62;
font-size: .9rem;
font-style: normal;
}
.vat-note i {
color: var(--tl-purple-dark);
font-size: 1.15rem;
}
/* item 5: premium statistics strip */
.stats-strip {
padding: var(--coutts-section-feature, 64px) 0;
background: #fff;
}
.stats-grid {
display: grid;
grid-template-columns:repeat(4, 1fr);
gap: 1.5rem;
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
.stat-cell {
padding: .6rem 1rem;
position: relative;
}
.stat-cell + .stat-cell::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 52px;
background: #ece6d6;
}
.stat-cell .num {
font-family: var(--cx-display);
font-weight: 600;
font-size: clamp(1.9rem, 3vw, 2.6rem);
color: var(--tl-purple-dark);
line-height: 1.05;
margin-bottom: .55rem;
}
.stat-cell .lbl {
font-family: var(--cx-sans);
font-size: .78rem;
letter-spacing: .14em;
text-transform: uppercase;
color: #6f6a62;
}
@media (max-width: 680px) {
.stats-grid {
grid-template-columns:repeat(2, 1fr);
gap: 2rem 1rem;
}
.stat-cell + .stat-cell::before {
display: none;
}
}
/* item 6: reusable dark premium CTA band (mirrors the licence-page CTA) */
.premium-cta {
position: relative;
overflow: hidden;
padding: 4rem 0;
background: radial-gradient(ellipse 60% 120% at 50% 0%, #242429 0%, var(--tl-dark) 55%, var(--tl-dark-2) 100%);
}
.premium-cta::before {
content: "";
position: absolute;
left: 50%;
top: -32%;
width: 620px;
height: 620px;
transform: translateX(-50%);
pointer-events: none;
background: radial-gradient(circle, rgba(212, 175, 55, .16) 0%, rgba(212, 175, 55, 0) 62%);
}
.premium-cta-inner {
position: relative;
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.premium-cta-inner::before {
content: "";
position: absolute;
top: -14%;
left: 50%;
transform: translateX(-50%);
width: 480px;
height: 240px;
pointer-events: none;
background: radial-gradient(ellipse at center, rgba(212, 175, 55, .12), rgba(212, 175, 55, 0) 70%);
}
.premium-cta .eyebrow {
color: var(--tl-teal);
margin-bottom: 1rem;
}
.premium-cta h2 {
position: relative;
font-family: var(--cx-display);
font-weight: 600;
line-height: 1.25;
letter-spacing: .4px;
font-size: var(--fs-h2, clamp(1.15rem, 1.85vw, 1.42rem));
color: #fff;
margin: 0 0 1.1rem;
}
.premium-cta .rule {
position: relative;
width: 90px;
height: 2px;
margin: 0 auto 1.4rem;
background: linear-gradient(90deg, transparent, var(--tl-purple), transparent);
}
.premium-cta p {
position: relative;
color: rgba(245, 242, 234, .8);
font-size: 1.06rem;
line-height: 1.9;
max-width: 640px;
margin: 0 auto 2.3rem;
}
/* item 4: subscription band — taller aligned input + wider button + slightly larger heading */
.newsletter .signup-box form {
align-items: center;
}
.newsletter .signup-box .form-control {
height: 55px;
}
.newsletter .signup-box .btn {
padding: .9rem 2.7rem;
height: 55px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.newsletter .signup-box .nl-copy h2 {
font-size: 1.394rem;
}
/* ===== USA COMPANY FORMATIONS — page refinements (Simon) ===== */
/* item 2: View Jurisdiction slightly bolder (richer-gold hover already global) + taller rows here */
.products-listing .more-details a {
font-weight: 600;
}
.page-usa-company-formations .products-listing td {
padding: 1.75rem 1rem;
}
/* item 3: gold state-code monogram badge beside each state */
.products-listing .country .state-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 24px;
margin-right: .7rem;
border: 1px solid rgba(212, 175, 55, .5);
border-radius: var(--cx-radius-sm);
background: linear-gradient(160deg, #fbf6e8, #f3e8c8);
color: var(--tl-purple-dark);
font-family: var(--cx-sans);
font-weight: 700;
font-size: .66rem;
letter-spacing: .04em;
vertical-align: middle;
}
/* item 4 + 5: search field + popular-state shortcuts toolbar */
.states-toolbar-wrap {
padding: .5rem 0 0;
}
.states-toolbar {
max-width: 1000px;
margin: 0 auto;
}
.states-search {
position: relative;
margin-bottom: 1.15rem;
}
.states-search i {
position: absolute;
left: 1.1rem;
top: 50%;
transform: translateY(-50%);
color: var(--tl-purple-dark);
font-size: 1.2rem;
pointer-events: none;
}
.states-search input {
width: 100%;
height: 54px;
border: 1px solid #e3ddcd;
border-radius: var(--cx-radius-lg);
background: #fff;
padding: 0 1.1rem 0 2.9rem;
font-family: var(--cx-sans);
font-size: .98rem;
color: #333;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05);
transition: border-color var(--cx-duration) ease, box-shadow var(--cx-duration) ease;
}
.states-search input::placeholder {
color: #b3ad9f;
}
.states-search input:focus {
outline: none;
border-color: var(--tl-purple);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 0 0 3px rgba(212, 175, 55, .14);
}
.pop-states {
display: flex;
flex-wrap: wrap;
gap: .6rem;
align-items: center;
}
.pop-states-label {
font-family: var(--cx-sans);
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
color: #8a8378;
margin-right: .2rem;
}
.pop-state {
font-family: var(--cx-sans);
font-size: .84rem;
font-weight: 500;
color: var(--tl-dark);
background: #fff;
border: 1px solid #e6dcc4;
padding: .5rem 1.1rem;
border-radius: 999px;
cursor: pointer;
transition: all var(--cx-duration) ease;
}
.pop-state:hover {
border-color: var(--tl-purple);
color: var(--tl-purple-dark);
}
.pop-state.active {
background: linear-gradient(180deg, #F2DD9E, #D4AF37);
color: #1a1305;
border-color: transparent;
box-shadow: 0 8px 20px -10px rgba(212, 175, 55, .6);
}
.states-empty {
text-align: center;
color: #8a8378;
padding: 1.8rem 0 0;
font-style: italic;
}
/* item 6: long-text stat cells render smaller than numeric ones */
.stat-cell .num--sm {
font-size: clamp(1.15rem, 1.9vw, 1.5rem);
line-height: 1.2;
}
/* item 7: light advisory panel (reusable) */
.advisory-wrap {
padding: 2.6rem 0;
}
.advisory-box {
max-width: 1000px;
margin: 0 auto;
background: #f6f5f1;
border: 1px solid #e7e4dc;
border-radius: var(--cx-radius-lg);
padding: 2.4rem 2.6rem;
display: flex;
align-items: center;
gap: 1.8rem;
flex-wrap: wrap;
}
.advisory-box .ab-ic {
flex: 0 0 auto;
width: 60px;
height: 60px;
border-radius: var(--cx-radius-xl);
display: grid;
place-items: center;
font-size: 1.7rem;
color: var(--tl-purple-dark);
background: linear-gradient(160deg, #fbf6e8, #f3e8c8);
border: 1px solid rgba(212, 175, 55, .4);
}
.advisory-box .ab-tx {
flex: 1 1 380px;
min-width: 0;
}
.advisory-box h3 {
font-family: var(--cx-display);
font-weight: 600;
font-size: 0.952rem;
color: var(--tl-dark);
margin: 0 0 .5rem;
letter-spacing: .3px;
text-transform: none;
}
.advisory-box p {
margin: 0;
color: #5d584f;
font-size: .95rem;
line-height: 1.7;
}
.advisory-box .ab-btn {
flex: 0 0 auto;
}
@media (max-width: 767px) {
.advisory-box {
padding: 2rem 1.6rem;
}
.advisory-box .ab-btn {
width: 100%;
}
.advisory-box .ab-btn .btn-gold {
display: block;
width: 100%;
text-align: center;
}
}
/* ===== OTHER CORPORATE SERVICES — premium advisory sections (Simon) ===== */
/* title-case section heading (overrides global uppercase h2) */
.lux-heading {
font-family: var(--cx-display);
font-weight: 600;
text-transform: none;
letter-spacing: .3px;
color: var(--tl-dark);
font-size: clamp(1.65rem, 2.8vw, 2.15rem);
line-height: 1.25;
margin: .2rem 0 .2rem;
}
/* item 2: premium intro */
.ocs-intro {
padding: 5.5rem 0 2rem;
}
.ocs-head {
max-width: 760px;
margin: 0 auto 2.6rem;
text-align: center;
}
.ocs-head .gold-divider--short {
margin-top: 1.1rem;
margin-bottom: 1.3rem;
}
.ocs-head p {
color: #5d584f;
line-height: 1.85;
font-size: 1rem;
margin: 0;
}
/* item 3: service category cards */
.cat-section {
padding: 1.5rem 0 2.5rem;
}
.cat-cards {
display: grid;
grid-template-columns:repeat(4, 1fr);
gap: 1.4rem;
max-width: 1120px;
margin: 0 auto;
}
.cat-card {
background: #fff;
border: 1px solid #ece6d6;
border-radius: var(--cx-radius-lg);
padding: 2rem 1.6rem;
transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.cat-card:hover {
transform: translateY(var(--cx-hover-lift));
border-color: rgba(212, 175, 55, .4);
box-shadow: var(--cx-shadow-3);
}
.cat-card .cc-ic {
width: 58px;
height: 58px;
border-radius: var(--cx-radius-xl);
display: grid;
place-items: center;
font-size: 1.6rem;
color: var(--tl-purple-dark);
background: linear-gradient(160deg, #fbf6e8, #f3e8c8);
border: 1px solid rgba(212, 175, 55, .4);
margin-bottom: 1.2rem;
}
.cat-card h4 {
font-family: var(--cx-display);
font-weight: 600;
font-size: 0.782rem;
color: var(--tl-dark);
margin: 0 0 1rem;
text-transform: none;
letter-spacing: .3px;
}
.cat-card ul {
list-style: none;
padding: 0;
margin: 0;
}
.cat-card li {
position: relative;
padding-left: 1.1rem;
margin-bottom: .55rem;
color: #5d584f;
font-size: .88rem;
line-height: 1.5;
}
.cat-card li::before {
content: "";
position: absolute;
left: 0;
top: .55em;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--tl-purple);
}
/* item 7: why-choose-us */
.why-wrap {
padding: 2rem 0 1rem;
}
.why-grid {
display: grid;
grid-template-columns:repeat(4, 1fr);
gap: 1.5rem;
max-width: 1120px;
margin: 0 auto;
}
.why-cell {
text-align: center;
padding: 1.2rem 1rem;
}
.why-cell .wi {
width: 66px;
height: 66px;
margin: 0 auto 1.05rem;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 1.95rem;
color: var(--tl-purple-dark);
background: linear-gradient(160deg, #fbf6e8, #f0e3c2);
border: 1px solid rgba(212, 175, 55, .42);
}
.why-cell h4 {
font-family: var(--cx-sans);
font-weight: 600;
font-size: .667rem;
color: var(--tl-dark);
margin: 0 0 .45rem;
}
.why-cell p {
margin: 0;
font-size: .84rem;
line-height: 1.55;
color: #726c62;
}
/* item 5: gold service icon beside each row */
.products-listing .country .svc-row-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
margin-right: .8rem;
border-radius: var(--cx-radius);
color: var(--tl-purple-dark);
background: linear-gradient(160deg, #fbf6e8, #f3e8c8);
border: 1px solid rgba(212, 175, 55, .35);
vertical-align: middle;
font-size: 1.05rem;
flex: 0 0 auto;
}
/* item 4: taller rows here + right-aligned prices that line up */
.page-other-corporate-services .products-listing td {
padding: 1.55rem 1rem;
}
.page-other-corporate-services .products-listing .price {
text-align: right;
}
/* item 8: VAT note tucked under the table */
.table-vat-note {
max-width: 1000px;
margin: 1.2rem auto 0;
text-align: right;
color: #9a948a;
font-size: .82rem;
}
@media (max-width: 991px) {
.cat-cards, .why-grid {
grid-template-columns:repeat(2, 1fr);
}
}
@media (max-width: 520px) {
.cat-cards, .why-grid {
grid-template-columns:1fr;
}
}
/* item 10: newsletter — more breathing room between heading, field and button */
.newsletter .signup-box {
gap: 1.8rem;
}
.newsletter .signup-box form {
gap: 1rem;
}
.newsletter .signup-box .nl-copy {
margin-bottom: .2rem;
}
/* ===== INTERNATIONAL CORPORATE SERVICES — full redesign (Simon) ===== */
/* hero subheading under the banner H1 */
.page-other-corporate-services .header-content .hc-sub {
font-family: var(--cx-display);
font-weight: 600;
text-transform: none;
color: var(--tl-teal);
font-size: 1.18rem;
letter-spacing: .3px;
margin: 0 0 1.1rem;
line-height: 1.35;
}
/* shared block padding + optional sub line under a section heading */
.ics-block {
padding: 3.6rem 0 1.2rem;
}
.ocs-head p.sub {
color: #5d584f;
line-height: 1.8;
margin: .6rem auto 0;
max-width: 660px;
}
/* 8 professional-service cards (built on .lux-card + .icon-tile) */
.pro-grid {
display: grid;
grid-template-columns:repeat(4, 1fr);
gap: 1.4rem;
}
.pro-card {
padding: 2rem 1.7rem;
border-radius: var(--cx-radius-lg);
}
.pro-card .icon-tile {
margin-bottom: 1.3rem;
}
.pro-card h3 {
font-family: var(--cx-display);
font-weight: 600;
font-size: 0.802rem;
color: var(--tl-dark);
text-transform: none;
letter-spacing: .3px;
margin: .2rem 0 1rem;
line-height: 1.3;
}
.pro-card ul {
list-style: none;
padding: 0;
margin: 0;
}
.pro-card li {
position: relative;
padding-left: 1.1rem;
margin-bottom: .5rem;
color: #5d584f;
font-size: .86rem;
line-height: 1.5;
}
.pro-card li::before {
content: "";
position: absolute;
left: 0;
top: .55em;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--tl-purple);
}
/* popular corporate services — premium, price-free */
.pop-corp-grid {
display: grid;
grid-template-columns:repeat(3, 1fr);
gap: 1.4rem;
max-width: 1120px;
margin: 0 auto;
}
.corp-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #ece6d6;
border-radius: var(--cx-radius-lg);
padding: 1.9rem 1.7rem;
transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.corp-card:hover {
transform: translateY(var(--cx-hover-lift));
border-color: rgba(212, 175, 55, .4);
box-shadow: var(--cx-shadow-4);
}
.corp-card .cc-head {
display: flex;
align-items: center;
gap: .7rem;
margin-bottom: .9rem;
}
.corp-card .cc-head i {
color: var(--tl-purple-dark);
font-size: 1.4rem;
flex: 0 0 auto;
}
.corp-card h4 {
font-family: var(--cx-display);
font-weight: 600;
font-size: 0.748rem;
color: var(--tl-dark);
margin: 0;
letter-spacing: .3px;
line-height: 1.3;
}
.corp-card p {
color: #6b665d;
font-size: .9rem;
line-height: 1.6;
margin: 0 0 1.3rem;
}
.corp-card .corp-link {
margin-top: auto;
align-self: flex-start;
font-family: var(--cx-sans);
font-weight: 600;
font-size: .82rem;
letter-spacing: .03em;
color: var(--tl-purple-dark);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: .4rem;
transition: color var(--cx-duration) ease;
}
.corp-card .corp-link span {
transition: transform var(--cx-duration) ease;
}
.corp-card .corp-link:hover {
color: var(--tl-purple);
}
.corp-card .corp-link:hover span {
transform: translateX(4px);
}
.corp-note {
text-align: center;
color: #9a948a;
font-style: italic;
font-size: .9rem;
margin: 2.2rem auto 0;
max-width: 680px;
line-height: 1.6;
}
/* why-choose 6 (3-col) */
.why-grid.cols-3 {
grid-template-columns:repeat(3, 1fr);
max-width: 980px;
}
/* stats: 3-col + worldwide locations line */
.stats-grid.cols-3 {
grid-template-columns:repeat(3, 1fr);
max-width: 820px;
}
.stats-locations {
text-align: center;
font-family: var(--cx-sans);
font-size: .9rem;
letter-spacing: .16em;
text-transform: uppercase;
color: #8a8378;
margin: 2.4rem 0 0;
}
.stats-locations strong {
color: var(--tl-purple-dark);
font-weight: 600;
}
@media (max-width: 991px) {
.pro-grid {
grid-template-columns:repeat(2, 1fr);
}
.pop-corp-grid {
grid-template-columns:repeat(2, 1fr);
}
.why-grid.cols-3 {
grid-template-columns:repeat(2, 1fr);
}
.stats-grid.cols-3 {
grid-template-columns:1fr;
}
.stats-grid.cols-3 .stat-cell + .stat-cell::before {
display: none;
}
}
@media (max-width: 560px) {
.pro-grid, .pop-corp-grid, .why-grid.cols-3 {
grid-template-columns:1fr;
}
}
/* =====================================================================
TYPOGRAPHY PROPORTION PASS (Simon) — smaller headings/body/menu/buttons,
larger top-bar contact text, bigger logo. Appended last to win cascade.
===================================================================== */
/* ---- Headlines: scaled down ~12% ---- */
h1{
font-size: clamp(1.35rem, 2.45vw, 1.8rem);
letter-spacing: 1.5px;
margin-bottom: 1.4rem;
}
h2{
font-size: clamp(1.15rem, 1.85vw, 1.42rem);
letter-spacing: 1px;
margin-bottom: 1.4rem;
}
h3{
font-size: clamp(1.02rem, 1.45vw, 1.12rem);
}
h4{
font-size: .98rem;
}
.lux-heading {
font-size: clamp(1.45rem, 2.5vw, 1.9rem);
}
/* ---- Body text: tidier reading size ---- */
body {
font-size: .94rem;
}
.lead, p.lead {
font-size: 1.08rem;
}
/* ---- Menu items ---- */
.nav-capsule .nav-link {
font-size: .82rem;
letter-spacing: .05em;
margin: 0 16px;
}
.nav-capsule .dropdown-item {
font-size: .8rem;
}
/* ---- Text on buttons ---- */
.btn-gold, .btn, .btn-primary, .btn-secondary, .btn-enquire, .enquire-submit, .hero-cta, .hero-btn,
.btn--map, .find-jurisdiction .fj-text .btn-find, .newsletter .signup-box .btn,
.companyname-checker .checker-fields .btn, .services .btn-primary, .action-block-bg .btn,
.popular .order-now a, .dir-btn {
font-size: .78rem;
letter-spacing: .04em;
}
.btn-gold--lg {
font-size: .78rem;
letter-spacing: .05em;
}
/* ---- Hero (homepage) ---- */
.hero-title {
font-size: clamp(1.088rem, 2.448vw, 1.632rem);
}
.hero-sub {
font-size: .92rem;
}
/* ---- Inner-page banner ---- */
.category-header .header-content h1 {
font-size: 1.326rem;
}
.page-other-corporate-services .header-content .hc-sub {
font-size: 1.05rem;
}
/* ---- Top bar: WhatsApp + phone larger & easier to tap ---- */
.tl-topbar {
font-size: .95rem;
}
.tl-topbar a {
gap: .55rem;
}
.tl-topbar i {
font-size: 1.28rem;
}
/* ---- Logo: larger (per spec) ---- */
.nav-logo img {
height: 120px !important;
width: 120px !important;
object-fit: contain;
}
/* ---- Footer legal line ---- */
.footer-bottom .footer-legal {
font-size: .7rem;
color: #9a98a3;
margin: 0 0 .35rem;
line-height: 1.5;
}
.footer-bottom .footer-copy {
font-size: .72rem;
color: #8d8b97;
margin: 0;
}
/* ===== NAVIGATION REORG — Coutts divisions (Simon) ===== */
/* tighter item spacing to fit more top-level divisions on one row */
.nav-capsule .navbar-nav > .nav-item > .nav-link {
margin: 0 10px;
}
/* featured star on Ready Made Companies */
.nav-star {
color: var(--tl-teal);
margin-left: .35rem;
font-size: .8em;
}
/* subtle "Soon" tag for future-direction items */
.nav-soon {
display: inline-block;
margin-left: .45rem;
font-family: var(--cx-sans);
font-size: .56rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--tl-purple-dark);
background: rgba(212, 175, 55, .14);
border: 1px solid rgba(212, 175, 55, .32);
border-radius: 999px;
padding: .06rem .4rem;
vertical-align: middle;
line-height: 1.4;
}
.nav-capsule .dropdown-item .nav-soon {
margin-left: .5rem;
}
/* roomier dropdowns for the longer division lists */
.nav-capsule .dropdown-menu {
min-width: 250px;
}
@media (min-width: 992px) {
/* if the row ever runs long on mid-size screens, items wrap neatly instead of overflowing */
.nav-capsule .navbar-nav {
flex-wrap: wrap;
justify-content: flex-end;
row-gap: .2rem;
}
}
/* ===== NAV V2 — logo integrated into the capsule, taller premium bar (Simon) ===== */
#wrapper-navbar {
gap: 0;
}
.nav-capsule {
flex: 1 1 auto;
width: 100%;
min-height: 60px;
padding: 0 16px 0 26px;
justify-content: flex-start;
}
.nav-capsule .nav-logo {
display: flex;
align-items: center;
flex: 0 0 auto;
margin: 0;
padding: 0;
position: relative;
z-index: 2;
}
.nav-capsule .nav-logo img {
height: 46px !important;
width: auto !important;
object-fit: contain;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .4));
transition: transform .5s ease, filter .5s ease;
}
.nav-capsule .nav-logo:hover img {
transform: translateY(var(--cx-hover-lift));
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)) drop-shadow(0 0 12px rgba(197, 160, 68, .22));
}
.nav-capsule .navbar-collapse {
position: relative;
z-index: 2;
}
/* fewer items now — restore comfortable single-row spacing */
.nav-capsule .navbar-nav {
flex-wrap: nowrap;
}
.nav-capsule .navbar-nav > .nav-item > .nav-link {
margin: 0 14px;
}
@media (max-width: 991.98px) {
.nav-capsule {
min-height: 54px;
width: 100%;
flex: 1 1 auto;
padding: 0 12px 0 16px;
justify-content: space-between;
}
.nav-capsule .nav-logo img {
height: 40px !important;
}
.nav-capsule .navbar-nav {
flex-wrap: wrap;
}
}
/* ===== NAV V3 — premium mega menus + deeper bar + larger logo (Simon v2) ===== */
/* deeper bar, larger & more visible logo, more space between items */
.nav-capsule {
min-height: 70px;
}
.nav-capsule .nav-logo img {
height: 58px !important;
width: auto !important;
filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .5));
}
.nav-capsule .navbar-nav > .nav-item > .nav-link {
margin: 0 18px;
}
body {
/*padding-top: 160px;*/
}
/* active page highlight (persistent gold underline) */
.nav-capsule .nav-link.active {
color: #fff !important;
}
.nav-capsule .nav-link.active::before {
right: .2rem;
opacity: 1;
}
/* each dropdown/mega anchors under its own item */
.nav-capsule .nav-item.dropdown {
position: relative;
}
.nav-capsule .dropdown-menu {
transform: none !important;
z-index: 1050;
}
/* desktop: open on hover for a fluid, premium feel */
@media (min-width: 992px) {
.nav-capsule .nav-item.dropdown:hover > .dropdown-menu {
display: block;
}
}
/* ---- MEGA MENU PANEL ---- */
.nav-capsule .mega-menu {
margin-top: 0;
top: calc(100% + 16px);
right: 0;
left: auto;
width: min(92vw, 720px);
padding: 1.7rem 2rem;
}
.nav-capsule .mega-menu.mega-menu-2 {
width: min(92vw, 540px);
}
.mega-inner {
display: grid;
gap: 1.4rem 2.4rem;
}
.mega-inner.mega-3 {
grid-template-columns:repeat(3, 1fr);
}
.mega-inner.mega-2 {
grid-template-columns:repeat(2, 1fr);
}
.mega-col .mega-title {
font-family: var(--cx-sans);
font-size: .64rem;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--tl-teal);
margin: 0 0 .9rem;
padding-bottom: .6rem;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.mega-link {
display: flex;
align-items: center;
gap: .7rem;
padding: .5rem .6rem;
border-radius: var(--cx-radius-lg);
color: rgba(245, 241, 232, .82) !important;
font-family: var(--cx-sans);
font-size: .86rem;
letter-spacing: .02em;
text-decoration: none;
transition: background var(--cx-duration) ease, color var(--cx-duration) ease, transform var(--cx-duration) ease;
}
.mega-link:hover {
background: rgba(212, 175, 55, .10);
color: #fff !important;
transform: translateX(3px);
}
.mega-link .fi {
width: 22px;
height: 16px;
border-radius: var(--cx-radius-xs);
background-size: cover;
background-position: center;
box-shadow: var(--cx-shadow-1);
flex: 0 0 auto;
}
.mega-link i {
color: var(--tl-teal);
font-size: 1.15rem;
flex: 0 0 auto;
width: 22px;
text-align: center;
}
.mega-link .nav-soon {
margin-left: auto;
}
/* ---- icon dropdowns (Knowledge Centre, Contact) ---- */
.nav-capsule .dropdown-icons {
min-width: 256px;
top: calc(100% + 16px);
right: 0;
left: auto;
padding: .6rem;
margin-top: 0;
}
.nav-capsule .dropdown-icons .dropdown-item {
display: flex;
align-items: center;
gap: .65rem;
}
.nav-capsule .dropdown-icons .dropdown-item i {
color: var(--tl-teal);
font-size: 1.1rem;
width: 20px;
text-align: center;
flex: 0 0 auto;
}
/* ---- mid-desktop: tighten so the row never overflows ---- */
@media (min-width: 992px) and (max-width: 1199.98px) {
.nav-capsule .navbar-nav > .nav-item > .nav-link {
margin: 0 10px;
}
.nav-capsule .nav-logo img {
height: 50px !important;
}
}
/* ---- mobile: mega + icon menus flatten into the slide-down panel ---- */
@media (max-width: 991.98px) {
.nav-capsule .mega-menu, .nav-capsule .dropdown-icons {
position: static !important;
width: auto !important;
padding: .3rem .2rem;
background: rgba(255, 255, 255, .03);
border: 0;
box-shadow: none;
}
.mega-inner {
display: block !important;
}
.mega-col {
margin-bottom: .5rem;
}
.mega-col .mega-title {
margin: .7rem .6rem .3rem;
border-bottom: 0;
}
.mega-link {
padding: .7rem 1rem;
}
}
/* ===== NAV V4 — hero mega menus: featured panels, descriptions, gold dividers (Simon v3) ===== */
/* item 10: logo +8%; deeper bar */
.nav-capsule {
min-height: 74px;
}
.nav-capsule .nav-logo img {
height: 96px !important;
}
body {
/*padding-top: 164px;*/
}
/* mega panel is a flex row (link columns + a featured card) WHEN OPEN. It must stay
hidden until the item is hovered/opened, so display:flex is applied only in the shown
state — never unconditionally, or the panel sits open on page load. */
.nav-capsule .mega-menu {
gap: 1.8rem;
align-items: stretch;
width: min(94vw, 900px);
padding: 1.8rem 2rem;
}
/* item 5: ~20% wider */
.nav-capsule .mega-menu.mega-menu-2 {
width: min(94vw, 700px);
}
.mega-inner {
flex: 1 1 auto;
display: grid;
gap: 1.5rem 2.2rem;
}
.mega-inner.mega-3 {
grid-template-columns:repeat(3, 1fr);
}
.mega-inner.mega-2 {
grid-template-columns:repeat(2, 1fr);
}
/* item 7: metallic gold divider under each heading */
.mega-col .mega-title {
position: relative;
font-family: var(--cx-sans);
font-size: .64rem;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--tl-teal);
margin: 0 0 .9rem;
padding: 0;
border: 0;
}
.mega-col .mega-title::after {
content: "";
display: block;
height: 1px;
margin-top: .5rem;
background: linear-gradient(90deg, rgba(212, 175, 55, .85), rgba(230, 198, 103, .4), rgba(212, 175, 55, 0));
}
/* item 6: more vertical breathing room between items; item 8: two-line links w/ descriptions */
.mega-link {
display: flex;
align-items: center;
gap: .7rem;
padding: .72rem .6rem;
border-radius: var(--cx-radius-lg);
color: rgba(245, 241, 232, .82) !important;
text-decoration: none;
transition: background var(--cx-duration) ease, color var(--cx-duration) ease, transform var(--cx-duration) ease;
}
.mega-link:hover {
background: rgba(212, 175, 55, .10);
transform: translateX(3px);
}
.mega-link > i, .mega-link > .fi {
flex: 0 0 auto;
}
.mega-link > i {
color: var(--tl-teal);
font-size: 1.2rem;
width: 22px;
text-align: center;
}
.mega-link > .fi {
width: 22px;
height: 16px;
border-radius: var(--cx-radius-xs);
background-size: cover;
background-position: center;
box-shadow: var(--cx-shadow-1);
}
.mega-link .ml-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.mega-link .ml-title {
font-family: var(--cx-sans);
font-size: .86rem;
letter-spacing: .02em;
line-height: 1.3;
color: rgba(245, 241, 232, .86);
transition: color var(--cx-duration) ease;
}
.mega-link:hover .ml-title {
color: #fff;
}
.mega-link .mega-desc {
font-family: var(--cx-sans);
font-size: .7rem;
color: rgba(245, 241, 232, .5);
line-height: 1.35;
margin-top: .14rem;
}
.mega-link .nav-soon {
margin-left: .4rem;
}
/* item 9: featured panel */
.mega-featured {
flex: 0 0 208px;
display: flex;
flex-direction: column;
border-radius: var(--cx-radius-xl);
padding: 1.3rem 1.2rem;
background: linear-gradient(165deg, rgba(212, 175, 55, .18), rgba(212, 175, 55, .05));
border: 1px solid rgba(212, 175, 55, .32);
}
.mega-featured .mf-top {
display: flex;
align-items: center;
gap: .5rem;
margin-bottom: .9rem;
}
.mf-badge {
font-family: var(--cx-sans);
font-size: .56rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: #1a1305;
background: linear-gradient(180deg, #EAD18A, #D4AF37);
border-radius: 999px;
padding: .14rem .5rem;
}
.mf-label {
font-family: var(--cx-sans);
font-size: .6rem;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--tl-teal);
}
.mega-featured .mf-title {
font-family: var(--cx-display);
font-weight: 600;
font-size: 1.05rem;
color: #fff;
margin: 0 0 .5rem;
line-height: 1.3;
text-transform: none;
letter-spacing: .3px;
}
.mega-featured .mf-desc {
font-family: var(--cx-sans);
font-size: .76rem;
color: rgba(245, 241, 232, .7);
line-height: 1.5;
margin: 0 0 1.2rem;
}
.mega-featured .mf-btn {
margin-top: auto;
align-self: flex-start;
background: linear-gradient(180deg, #EAD18A, #D4AF37 55%, #B8902B);
color: #1a1305 !important;
font-family: var(--cx-sans);
font-weight: 600;
font-size: .78rem;
letter-spacing: .04em;
padding: .5rem 1.3rem;
border-radius: var(--cx-radius-lg);
text-decoration: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 14px -6px rgba(212, 175, 55, .5);
transition: transform var(--cx-duration) ease, filter var(--cx-duration) ease;
}
.mega-featured .mf-btn:hover {
transform: translateY(var(--cx-hover-lift));
filter: brightness(1.06);
}
/* item 6 also applies to the icon dropdowns */
.nav-capsule .dropdown-icons .dropdown-item {
padding: .7rem .9rem;
}
/* mobile: flatten mega (columns + featured stack) */
@media (max-width: 991.98px) {
.nav-capsule .mega-menu {
flex-direction: column;
gap: .6rem;
}
.mega-featured {
flex: 1 1 auto;
}
}
/* ===== NAV V4 FIX — mega panels were permanently visible (display:flex out-specified
Bootstrap's display:none). Hide by default; show flex only when open. ===== */
.nav-capsule .mega-menu {
display: none;
}
@media (min-width: 992px) {
.nav-capsule .nav-item.dropdown:hover > .mega-menu {
display: flex;
}
}
.nav-capsule .mega-menu.show {
display: flex;
}
@media (max-width: 991.98px) {
.nav-capsule .mega-menu {
display: flex;
flex-direction: column;
gap: .6rem;
}
}
/* ===== NAV V4 FIX 2 — mega menus ran off-screen for left-side items.
Anchor them to the menu area (not the narrow item) and make them full-width
with centered content: always on-screen, and every trigger sits above the
panel so hover-intent stays intact. ===== */
.nav-capsule .nav-item.has-mega {
position: static;
}
.nav-capsule .mega-menu {
/* Centre the panel within the nav and cap its width so it never overflows the
viewport on narrower windows (which was clipping the first column and pushing the
featured card off the right edge). 96vw keeps a small margin on both sides. */
left: 50%;
right: auto;
width: min(96vw, 1120px);
max-width: 96vw;
transform: translateX(-50%) !important;
justify-content: flex-start;
}
.mega-inner {
flex: 0 0 auto;
}
.mega-inner.mega-3 {
width: 660px;
}
.mega-inner.mega-2 {
width: 440px;
}
@media (max-width: 991.98px) {
.nav-capsule .mega-menu {
/* on mobile the menu is a normal stacked panel — undo the desktop centring */
left: 0;
transform: none !important;
width: auto;
max-width: none;
justify-content: flex-start;
}
.mega-inner.mega-3, .mega-inner.mega-2 {
width: auto;
}
}
/* ===== HOMEPAGE JOURNEY — "What Would You Like To Do?" (Simon) ===== */
.journey {
padding: 5.5rem 0 4rem;
background: var(--tl-gray);
}
.journey-cards {
display: grid;
grid-template-columns:repeat(3, 1fr);
gap: 1.6rem;
max-width: 1080px;
margin: 0 auto;
}
.journey-card {
background: #fff;
border: 1px solid #ece6d6;
border-radius: var(--cx-radius-lg);
padding: 2.6rem 2rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.journey-card:hover {
transform: translateY(var(--cx-hover-lift));
border-color: rgba(212, 175, 55, .4);
box-shadow: var(--cx-shadow-4);
}
.journey-card .jc-ic {
width: 78px;
height: 78px;
border-radius: var(--cx-radius-xl);
display: grid;
place-items: center;
font-size: 2.15rem;
color: var(--tl-purple-dark);
background: linear-gradient(160deg, #fbf6e8, #f3e8c8);
border: 1px solid rgba(212, 175, 55, .4);
margin-bottom: 1.5rem;
}
.journey-card h3 {
font-family: var(--cx-display);
font-weight: 600;
font-size: 0.884rem;
color: var(--tl-dark);
margin: 0 0 .7rem;
text-transform: none;
letter-spacing: .3px;
}
.journey-card p {
color: #6b665d;
font-size: .95rem;
line-height: 1.6;
margin: 0 0 1.6rem;
}
.journey-card .jc-link {
margin-top: auto;
font-family: var(--cx-sans);
font-weight: 600;
font-size: .85rem;
letter-spacing: .03em;
color: var(--tl-purple-dark);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: .4rem;
transition: color var(--cx-duration) ease;
}
.journey-card .jc-link span {
transition: transform var(--cx-duration) ease;
}
.journey-card .jc-link:hover {
color: var(--tl-purple);
}
.journey-card .jc-link:hover span {
transform: translateX(4px);
}
@media (max-width: 820px) {
.journey-cards {
grid-template-columns:1fr;
}
}
/* ===== HOMEPAGE WHY-CHOOSE ===== */
.home-why {
padding: 5.5rem 0;
}
/* ===== FREE GUIDE band (replaces newsletter) ===== */
.free-guide {
padding: 0;
}
.free-guide .guide-box {
position: relative;
overflow: hidden;
background: var(--tl-dark);
color: #fff;
margin-top: -4px;
padding: 1.4rem 1.8rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
.free-guide .guide-box::before {
content: "";
position: absolute;
right: -40px;
top: -60px;
width: 280px;
height: 280px;
pointer-events: none;
background: radial-gradient(circle, rgba(212, 175, 55, .18), rgba(212, 175, 55, 0) 65%);
}
.guide-copy {
position: relative;
flex: 1 1 460px;
}
.guide-kicker {
display: inline-block;
font-family: var(--cx-sans);
font-size: .62rem;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--tl-teal);
margin-bottom: .4rem;
}
.free-guide .guide-copy h2 {
color: #fff;
margin: 0 0 .4rem;
font-size: clamp(0.95rem, 1.5vw, 1.2rem);
}
.free-guide .guide-copy p {
color: rgba(245, 242, 234, .75);
margin: 0;
font-size: .82rem;
line-height: 1.5;
max-width: 560px;
}
.guide-btn {
position: relative;
flex: 0 0 auto;
white-space: nowrap;
/* had no metrics of its own — matched to .btn-gold so it sits at the same depth. */
padding: .38rem 1.3rem;
font-size: .74rem;
line-height: 1.4;
}
@media (max-width: 767px) {
.free-guide .guide-box {
margin-top: -30px;
padding: 1.8rem 1.4rem;
flex-direction: column;
align-items: flex-start;
}
}
/* ===== FOOTER refinements ===== */
.footer-tag {
color: #9a9486;
font-size: .74rem;
line-height: 1.5;
margin-top: .8rem;
max-width: 220px;
}
.footer-links {
margin: .3rem 0;
font-size: .7rem;
}
.footer-links a {
color: #b3b1bd;
}
.footer-links a:hover {
color: var(--tl-teal);
}
/* ===== ABOUT / WHY COUTTS page (Simon) ===== */
.about-who {
padding: 5.5rem 0 1.5rem;
}
.about-who .who-body {
max-width: 820px;
margin: 1.4rem auto 0;
}
.about-who .who-body p {
color: #5d584f;
line-height: 1.9;
margin: 0 0 1.1rem;
}
/* values — six cards */
.value-cards {
display: grid;
grid-template-columns:repeat(3, 1fr);
gap: 1.5rem;
max-width: 1080px;
margin: 0 auto;
}
.value-card {
background: #fff;
border: 1px solid #ece6d6;
border-radius: var(--cx-radius-lg);
padding: 2.1rem 1.9rem;
transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.value-card:hover {
transform: translateY(var(--cx-hover-lift));
border-color: rgba(212, 175, 55, .4);
box-shadow: var(--cx-shadow-4);
}
.value-card .v-ic {
width: 60px;
height: 60px;
border-radius: var(--cx-radius-xl);
display: grid;
place-items: center;
font-size: 1.65rem;
color: var(--tl-purple-dark);
background: linear-gradient(160deg, #fbf6e8, #f3e8c8);
border: 1px solid rgba(212, 175, 55, .4);
margin-bottom: 1.2rem;
}
.value-card h4 {
font-family: var(--cx-display);
font-weight: 600;
font-size: 0.816rem;
color: var(--tl-dark);
margin: 0 0 .6rem;
text-transform: none;
letter-spacing: .3px;
}
.value-card p {
color: #6b665d;
font-size: .9rem;
line-height: 1.6;
margin: 0;
}
@media (max-width: 900px) {
.value-cards {
grid-template-columns:repeat(2, 1fr);
}
}
@media (max-width: 560px) {
.value-cards {
grid-template-columns:1fr;
}
}
/* how we work — timeline */
.timeline-wrap {
max-width: 760px;
margin: 0 auto;
}
.timeline {
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.timeline::before {
content: "";
position: absolute;
left: 23px;
top: 10px;
bottom: 10px;
width: 2px;
background: linear-gradient(180deg, var(--tl-purple), rgba(212, 175, 55, .2));
}
.timeline li {
position: relative;
padding: 0 0 2.1rem 4.4rem;
}
.timeline li:last-child {
padding-bottom: 0;
}
.timeline .tl-node {
position: absolute;
left: 0;
top: 0;
width: 48px;
height: 48px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 1.35rem;
color: var(--tl-purple-dark);
background: linear-gradient(160deg, #fbf6e8, #f3e8c8);
border: 1px solid rgba(212, 175, 55, .5);
box-shadow: 0 6px 16px -8px rgba(212, 175, 55, .5);
z-index: 1;
}
.timeline .tl-title {
font-family: var(--cx-display);
font-weight: 600;
font-size: 1.15rem;
color: var(--tl-dark);
margin: .35rem 0 .3rem;
text-transform: none;
letter-spacing: .3px;
}
.timeline .tl-desc {
color: #6b665d;
font-size: .9rem;
line-height: 1.6;
margin: 0;
}
/* services — 4-col journey cards on this page */
.journey-cards.cols-4 {
grid-template-columns:repeat(4, 1fr);
}
@media (max-width: 900px) {
.journey-cards.cols-4 {
grid-template-columns:repeat(2, 1fr);
}
}
@media (max-width: 520px) {
.journey-cards.cols-4 {
grid-template-columns:1fr;
}
}
/* global presence — dark band + flag chips */
.presence {
position: relative;
overflow: hidden;
padding: 5.5rem 0;
background: radial-gradient(ellipse 70% 120% at 50% 0%, #242429 0%, var(--tl-dark) 60%, var(--tl-dark-2) 100%);
}
.presence .lux-heading {
color: #fff;
}
.presence .section-eyebrow {
color: var(--tl-teal);
}
.presence .ocs-head p {
color: rgba(245, 242, 234, .72);
}
.presence-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .9rem;
max-width: 900px;
margin: 2.2rem auto 0;
}
.presence-chip {
display: inline-flex;
align-items: center;
gap: .6rem;
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(212, 175, 55, .28);
border-radius: 999px;
padding: .45rem .95rem;
color: #f5f2ea;
font-family: var(--cx-sans);
font-size: .8rem;
transition: border-color var(--cx-duration) ease, background var(--cx-duration) ease, transform var(--cx-duration) ease;
}
.presence-chip:hover {
border-color: rgba(212, 175, 55, .6);
background: rgba(212, 175, 55, .08);
transform: translateY(var(--cx-hover-lift));
}
.presence-chip .fi {
width: 24px;
height: 17px;
border-radius: var(--cx-radius-xs);
background-size: cover;
background-position: center;
box-shadow: var(--cx-shadow-1);
flex: 0 0 auto;
}
.presence-cta {
text-align: center;
margin-top: 2.6rem;
}
/* ghost gold button (secondary CTA) */
.btn-ghost {
display: inline-block;
border: 1px solid rgba(212, 175, 55, .6);
color: var(--tl-teal) !important;
background: transparent;
border-radius: var(--cx-radius-lg);
padding: .42rem 1.5rem;
font-family: var(--cx-sans);
font-weight: 600;
font-size: .85rem;
letter-spacing: .04em;
text-decoration: none;
transition: background var(--cx-duration) ease, border-color var(--cx-duration) ease, color var(--cx-duration) ease, transform var(--cx-duration) ease;
}
.btn-ghost:hover {
background: rgba(212, 175, 55, .12);
border-color: var(--tl-purple);
color: #fff !important;
transform: translateY(var(--cx-hover-lift));
}
.premium-cta .cta-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: .5rem;
}
/* ===== COMPANY FORMATION HUB (Simon three-pillar) ===== */
/* hero */
.hub-hero {
position: relative;
/* Hero Type B (Primary Landing) — Company Formation and the 13 other pages sharing this
class are top-level Service destinations, the same tier as Jurisdictions/Knowledge
Centre. Was clamp(430px, 58vh, 560px), exceeding the 40–55vh / ~360–460px target for
this Hero tier — a single fix here migrates all 14 pages using it at once. */
min-height: var(--coutts-hero-landing, clamp(360px, 45vh, 460px));
display: flex;
align-items: center;
background-size: cover;
background-position: center;
}
.hub-hero .hub-hero-inner {
max-width: 680px;
color: #fff;
padding: 2.5rem 0;
}
.market-hero .hub-hero-inner {
padding-bottom: 3rem;
}
.hub-eyebrow {
display: inline-block;
text-transform: uppercase;
letter-spacing: .4em;
font-family: var(--cx-sans);
font-weight: 500;
font-size: .72rem;
color: var(--tl-teal);
margin-bottom: 1.1rem;
}
.hub-hero h1 {
color: #fff;
font-family: var(--cx-display);
font-weight: 700;
font-size: clamp(1.36rem, 2.72vw, 2.04rem);
line-height: 1.12;
letter-spacing: .5px;
margin: 0 0 1.2rem;
text-shadow: 0 2px 30px rgba(0, 0, 0, .4);
}
.hub-hero p {
color: rgba(245, 241, 232, .85);
font-size: 1.02rem;
line-height: 1.8;
max-width: 540px;
margin: 0 0 1.9rem;
}
.hub-hero-btns {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
/* why incorporate — image + icon points */
.why-incorporate {
padding: 5.5rem 0;
}
.wi-grid {
display: grid;
grid-template-columns:1fr 1fr;
gap: 3rem;
align-items: center;
max-width: 1100px;
margin: 0 auto;
}
.wi-media .img-grade {
aspect-ratio: 4/3;
border-radius: var(--cx-radius-lg);
}
.wi-media img {
width: 100%;
height: 100%;
object-fit: cover; object-position: var(--img-pos, 50% 50%);
display: block;
}
.wi-text .lux-heading {
margin-bottom: .4rem;
}
.wi-text .gold-divider--short {
margin: 1rem 0 1.2rem;
}
.wi-text > p {
color: #5d584f;
line-height: 1.8;
margin: 0 0 1.6rem;
}
.wi-points {
display: grid;
grid-template-columns:1fr 1fr;
gap: .95rem 1.4rem;
}
.wi-point {
display: flex;
align-items: center;
gap: .7rem;
color: #3d3a34;
font-family: var(--cx-sans);
font-size: .9rem;
font-weight: 500;
}
.wi-point i {
color: var(--tl-purple-dark);
font-size: 1.3rem;
flex: 0 0 auto;
}
@media (max-width: 820px) {
.wi-grid {
grid-template-columns:1fr;
gap: 2rem;
}
}
@media (max-width: 520px) {
.wi-points {
grid-template-columns:1fr;
}
}
/* jurisdiction cards */
.juris-section {
padding: var(--coutts-section-feature, 64px) 0;
background: var(--tl-gray);
}
.juris-cards {
display: grid;
grid-template-columns:repeat(3, 1fr);
gap: 1.6rem;
max-width: 1120px;
margin: 0 auto;
}
.juris-card {
background: #fff;
border: 1px solid #ece6d6;
border-radius: var(--cx-radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.juris-card:hover {
transform: translateY(var(--cx-hover-lift));
border-color: rgba(212, 175, 55, .4);
box-shadow: var(--cx-shadow-4);
}
.juris-card .jc-img {
position: relative;
height: 180px;
background-size: cover;
background-position: center;
}
.juris-card .jc-img::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .35));
}
.juris-card .jc-flag {
position: absolute;
top: 14px;
left: 14px;
width: 34px;
height: 24px;
border-radius: var(--cx-radius-xs);
background-size: cover;
background-position: center;
box-shadow: var(--cx-shadow-2);
z-index: 1;
}
.juris-card .jc-body {
padding: 1.6rem 1.6rem 1.8rem;
display: flex;
flex-direction: column;
flex: 1;
}
.juris-card .jc-body h3 {
font-family: var(--cx-display);
font-weight: 600;
font-size: 0.884rem;
color: var(--tl-dark);
margin: 0 0 .6rem;
text-transform: none;
letter-spacing: .3px;
}
.juris-card .jc-body p {
color: #6b665d;
font-size: .9rem;
line-height: 1.6;
margin: 0 0 1.3rem;
}
.juris-card .jc-more {
margin-top: auto;
align-self: flex-start;
font-family: var(--cx-sans);
font-weight: 600;
font-size: .84rem;
color: var(--tl-purple-dark);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: .4rem;
}
.juris-card .jc-more span {
transition: transform var(--cx-duration) ease;
}
.juris-card .jc-more:hover {
color: var(--tl-purple);
}
.juris-card .jc-more:hover span {
transform: translateX(4px);
}
.juris-note {
text-align: center;
color: #8a8378;
font-size: .88rem;
font-style: italic;
margin: 2.4rem auto 0;
}
@media (max-width: 900px) {
.juris-cards {
grid-template-columns:repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.juris-cards {
grid-template-columns:1fr;
}
}
/* service tiles */
.svc-tiles {
display: grid;
grid-template-columns:repeat(4, 1fr);
gap: 1rem;
max-width: 1120px;
margin: 0 auto;
}
.svc-tile {
display: flex;
align-items: center;
gap: .9rem;
background: #fff;
border: 1px solid #ece6d6;
border-radius: var(--cx-radius-xl);
padding: 1.2rem 1.3rem;
text-decoration: none;
transition: transform var(--cx-duration) ease, box-shadow var(--cx-duration) ease, border-color var(--cx-duration) ease;
}
.svc-tile:hover {
transform: translateY(var(--cx-hover-lift));
border-color: rgba(212, 175, 55, .4);
box-shadow: var(--cx-shadow-4);
}
.svc-tile .st-ic {
width: 44px;
height: 44px;
border-radius: var(--cx-radius-lg);
display: grid;
place-items: center;
font-size: 1.3rem;
color: var(--tl-purple-dark);
background: linear-gradient(160deg, #fbf6e8, #f3e8c8);
border: 1px solid rgba(212, 175, 55, .35);
flex: 0 0 auto;
}
.svc-tile .st-name {
font-family: var(--cx-sans);
font-weight: 600;
font-size: .9rem;
color: var(--tl-dark);
flex: 1;
line-height: 1.3;
}
.svc-tile .st-arrow {
color: var(--tl-purple-dark);
font-size: 1.1rem;
opacity: 0;
transform: translateX(-4px);
transition: opacity var(--cx-duration) ease, transform var(--cx-duration) ease;
}
.svc-tile:hover .st-arrow {
opacity: 1;
transform: translateX(0);
}
@media (max-width: 900px) {
.svc-tiles {
grid-template-columns:repeat(2, 1fr);
}
}
@media (max-width: 520px) {
.svc-tiles {
grid-template-columns:1fr;
}
}
/* horizontal process timeline */
.hprocess-section {
padding: var(--coutts-section-feature, 64px) 0;
background: var(--tl-gray);
}
.hprocess {
display: flex;
justify-content: space-between;
gap: 1rem;
max-width: 1080px;
margin: 0 auto;
position: relative;
}
.hprocess::before {
content: "";
position: absolute;
top: 28px;
left: 6%;
right: 6%;
height: 2px;
background: linear-gradient(90deg, rgba(212, 175, 55, .2), var(--tl-purple), rgba(212, 175, 55, .2));
z-index: 0;
}
.hp-step {
position: relative;
z-index: 1;
flex: 1 1 140px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: .8rem;
}
.hp-num {
width: 56px;
height: 56px;
border-radius: 50%;
display: grid;
place-items: center;
font-family: var(--cx-display);
font-weight: 700;
font-size: 1.3rem;
color: var(--tl-purple-dark);
background: #fff;
border: 2px solid rgba(212, 175, 55, .5);
box-shadow: 0 8px 20px -10px rgba(212, 175, 55, .5);
transition: transform var(--cx-duration) ease, box-shadow var(--cx-duration) ease;
}
.hp-step:hover .hp-num {
transform: translateY(var(--cx-hover-lift));
box-shadow: 0 14px 28px -10px rgba(212, 175, 55, .6);
}
.hp-label {
font-family: var(--cx-sans);
font-weight: 600;
font-size: .86rem;
color: var(--tl-dark);
max-width: 130px;
line-height: 1.35;
}
@media (max-width: 760px) {
.hprocess {
flex-direction: column;
align-items: flex-start;
gap: 0;
}
.hprocess::before {
left: 27px;
right: auto;
top: 6%;
bottom: 6%;
width: 2px;
height: auto;
}
.hp-step {
flex-direction: row;
text-align: left;
padding: .9rem 0;
gap: 1.1rem;
}
.hp-label {
max-width: none;
}
}
/* comparison cards */
.compare-section {
padding: 5.5rem 0;
}
.compare-cards {
display: grid;
grid-template-columns:repeat(5, 1fr);
gap: 1.1rem;
max-width: 1160px;
margin: 0 auto;
}
.cmp-card {
background: #fff;
border: 1px solid #ece6d6;
border-radius: var(--cx-radius-lg);
padding: 1.4rem 1.2rem;
transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.cmp-card:hover {
transform: translateY(var(--cx-hover-lift));
border-color: rgba(212, 175, 55, .4);
box-shadow: var(--cx-shadow-4);
}
.cmp-head {
display: flex;
align-items: center;
gap: .5rem;
padding-bottom: .9rem;
margin-bottom: .9rem;
border-bottom: 1px solid #efeadd;
}
.cmp-head .fi {
width: 26px;
height: 19px;
border-radius: var(--cx-radius-xs);
background-size: cover;
background-position: center;
box-shadow: var(--cx-shadow-1);
flex: 0 0 auto;
}
.cmp-head h4 {
font-family: var(--cx-display);
font-weight: 600;
font-size: 0.68rem;
color: var(--tl-dark);
margin: 0;
letter-spacing: .2px;
line-height: 1.2;
}
.cmp-row {
display: flex;
flex-direction: column;
gap: .15rem;
margin-bottom: .7rem;
}
.cmp-row:last-child {
margin-bottom: 0;
}
.cmp-k {
font-family: var(--cx-sans);
font-size: .62rem;
letter-spacing: .08em;
text-transform: uppercase;
color: #9a948a;
}
.cmp-v {
font-family: var(--cx-sans);
font-size: .86rem;
color: #3d3a34;
font-weight: 500;
}
.cmp-stars {
color: var(--tl-purple);
letter-spacing: 1px;
}
.cmp-stars .off {
color: rgba(212, 175, 55, .3);
}
.cmp-note {
text-align: center;
color: #9a948a;
font-size: .8rem;
font-style: italic;
margin: 1.6rem auto 0;
}
.cmp-cta {
text-align: center;
margin-top: 1.8rem;
}
@media (max-width: 980px) {
.compare-cards {
grid-template-columns:repeat(2, 1fr);
}
}
@media (max-width: 520px) {
.compare-cards {
grid-template-columns:1fr;
}
}
/* ready made promo */
.rm-promo {
padding: 2rem 0 5.5rem;
}
.rm-inner {
display: grid;
grid-template-columns:1fr 1fr;
max-width: 1120px;
margin: 0 auto;
border-radius: var(--cx-radius-xl);
overflow: hidden;
border: 1px solid #ece6d6;
box-shadow: var(--cx-shadow-4);
}
.rm-media {
min-height: 340px;
background-size: cover;
background-position: center;
}
.rm-text {
background: var(--tl-dark);
color: #fff;
padding: 3rem 2.8rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.rm-text .section-eyebrow {
color: var(--tl-teal);
}
.rm-text .lux-heading {
color: #fff;
}
.rm-text p {
color: rgba(245, 242, 234, .78);
line-height: 1.8;
margin: 1rem 0 1.8rem;
}
.rm-text .btn-gold {
align-self: flex-start;
}
@media (max-width: 820px) {
.rm-inner {
grid-template-columns:1fr;
}
.rm-media {
min-height: 220px;
}
}
/* image CTA variant */
.premium-cta--image {
background: linear-gradient(rgba(10, 10, 12, .82), rgba(10, 10, 12, .86)), var(--cta-img);
background-size: cover;
background-position: center;
}
/* ===== START A NEW COMPANY — process step description, jurisdiction quiz, FAQ accordion ===== */
.hp-desc {
font-family: var(--cx-sans);
font-weight: 400;
font-size: .78rem;
color: #8a857a;
max-width: 150px;
line-height: 1.5;
margin-top: -.4rem;
}
.quiz-section {
padding: 5.5rem 0;
}
.quiz-grid {
display: grid;
grid-template-columns:1fr 1.15fr;
gap: 3rem;
align-items: center;
max-width: 1120px;
margin: 0 auto;
}
.quiz-media {
position: relative;
border-radius: var(--cx-radius-lg);
overflow: hidden;
aspect-ratio: 4/5;
}
.quiz-media img {
width: 100%;
height: 100%;
object-fit: cover; object-position: var(--img-pos, 50% 50%);
display: block;
}
.quiz-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(11, 11, 13, 0) 55%, rgba(11, 11, 13, .55));
}
.quiz-text .lux-heading {
margin-bottom: .4rem;
}
.quiz-text .gold-divider--short {
margin: 1rem 0 1.4rem;
}
.quiz-text > p {
color: #5d584f;
line-height: 1.8;
margin: 0 0 1.6rem;
}
.quiz-prompt {
font-family: var(--cx-sans);
font-weight: 600;
font-size: .95rem;
color: var(--tl-dark);
margin: 0 0 1.1rem;
}
.quiz-cards {
display: grid;
grid-template-columns:1fr 1fr;
gap: .85rem;
}
.quiz-card {
display: flex;
align-items: center;
gap: .7rem;
background: #fff;
border: 1px solid #ece6d6;
border-radius: var(--cx-radius-lg);
padding: .9rem 1.1rem;
font-family: var(--cx-sans);
font-weight: 500;
font-size: .86rem;
color: var(--tl-dark);
cursor: pointer;
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.quiz-card i {
color: var(--tl-purple-dark);
font-size: 1.15rem;
flex: 0 0 auto;
}
.quiz-card:hover {
transform: translateY(var(--cx-hover-lift));
border-color: rgba(212, 175, 55, .5);
box-shadow: var(--cx-shadow-3);
}
.faq-section {
padding: var(--coutts-section-feature, 64px) 0;
background: var(--tl-gray);
}
.faq-list {
max-width: 820px;
margin: 0 auto;
}
.faq-item {
background: #fff;
border: 1px solid #ece6d6;
border-radius: var(--cx-radius-xl);
margin-bottom: .9rem;
overflow: hidden;
}
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
text-align: left;
background: none;
border: 0;
padding: 1.2rem 1.5rem;
cursor: pointer;
font-family: var(--cx-sans);
font-weight: 600;
font-size: .95rem;
color: var(--tl-dark);
}
.faq-question .faq-plus {
flex: 0 0 auto;
width: 26px;
height: 26px;
border-radius: 50%;
display: grid;
place-items: center;
border: 1px solid rgba(212, 175, 55, .5);
color: var(--tl-purple-dark);
font-size: .9rem;
transition: transform var(--cx-duration) ease;
}
.faq-question[aria-expanded="true"] .faq-plus {
transform: rotate(45deg);
background: var(--tl-purple);
color: #fff;
border-color: var(--tl-purple);
}
.faq-answer {
padding: 0 1.5rem 1.4rem;
color: #5d584f;
line-height: 1.75;
font-size: .92rem;
}
@media (max-width: 820px) {
.quiz-grid {
grid-template-columns:1fr;
}
.quiz-cards {
grid-template-columns:1fr;
}
}
/* ===== REGISTERED OFFICE SERVICES page ===== */
/* reversed split (image on the right) */
.wi-grid.reverse .wi-media {
order: 2;
}
.wi-grid.reverse .wi-text {
order: 1;
}
.wi-text .btn-gold {
margin-top: .4rem;
}
/* offshore globe badge in jurisdiction card (no single flag) */
.juris-card .jc-flag.jc-globe {
width: 34px;
height: 34px;
border-radius: 50%;
display: grid;
place-items: center;
background: linear-gradient(160deg, #fbf6e8, #f3e8c8);
border: 1px solid rgba(212, 175, 55, .5);
color: var(--tl-purple-dark);
font-size: 1.15rem;
}
/* FAQ accordion (native details/summary — no JS needed) */
.faq-section {
padding: 5.5rem 0;
}
.faq-wrap {
max-width: 820px;
margin: 0 auto;
}
.faq-item {
background: #fff;
border: 1px solid #ece6d6;
border-radius: var(--cx-radius-lg);
margin-bottom: .9rem;
overflow: hidden;
transition: border-color var(--cx-duration) ease, box-shadow var(--cx-duration) ease;
}
.faq-item[open] {
border-color: rgba(212, 175, 55, .4);
box-shadow: var(--cx-shadow-4);
}
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 1.15rem 1.4rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
font-family: var(--cx-sans);
font-weight: 600;
font-size: .98rem;
color: var(--tl-dark);
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary::after {
content: "+";
font-size: 1.5rem;
line-height: 1;
color: var(--tl-purple-dark);
transition: transform var(--cx-duration) ease;
flex: 0 0 auto;
}
.faq-item[open] summary::after {
content: "\2212";
}
.faq-item .faq-a {
padding: 0 1.4rem 1.3rem;
color: #6b665d;
font-size: .92rem;
line-height: 1.7;
}
/* related services strip */
.related-section {
padding: .8rem 0 4rem;
}
.related-strip {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .8rem;
max-width: 900px;
margin: 0 auto;
}
.related-link {
display: inline-flex;
align-items: center;
gap: .5rem;
background: #fff;
border: 1px solid #ece6d6;
border-radius: 999px;
padding: .7rem 1.3rem;
font-family: var(--cx-sans);
font-weight: 600;
font-size: .86rem;
color: var(--tl-dark);
text-decoration: none;
transition: border-color var(--cx-duration) ease, color var(--cx-duration) ease, transform var(--cx-duration) ease, box-shadow var(--cx-duration) ease;
}
.related-link span {
color: var(--tl-purple-dark);
transition: transform var(--cx-duration) ease;
}
.related-link:hover {
border-color: rgba(212, 175, 55, .5);
color: var(--tl-purple-dark);
transform: translateY(var(--cx-hover-lift));
box-shadow: var(--cx-shadow-3);
}
.related-link:hover span {
transform: translateX(3px);
}
/* ===== compliance note band (Nominee Directors) ===== */
.compliance-note {
background: linear-gradient(180deg, #fbf7ec, #f5efdf);
border-top: 1px solid rgba(212, 175, 55, .35);
border-bottom: 1px solid rgba(212, 175, 55, .35);
padding: 1.4rem 0;
}
.compliance-note p {
max-width: 960px;
margin: 0 auto;
display: flex;
align-items: flex-start;
gap: .8rem;
color: #6a6252;
font-size: .9rem;
line-height: 1.65;
}
.compliance-note p i {
color: var(--tl-purple-dark);
font-size: 1.4rem;
flex: 0 0 auto;
margin-top: .05rem;
}
/* ===== READY MADE MARKETPLACE (Simon flagship) ===== */
.market-hero {
min-height: clamp(400px, 52vh, 520px);
}
/* search panel — glass, floats up over the hero */
.market-search-section {
position: relative;
padding: 2.6rem 0 1rem;
}
.market-search {
position: relative;
margin-top: 0;
z-index: 5;
border-radius: var(--cx-radius-xl);
padding: 2.1rem 2.2rem 1.5rem;
background: linear-gradient(160deg, rgba(26, 26, 29, .94), rgba(11, 11, 13, .96));
border: 1px solid rgba(212, 175, 55, .32);
box-shadow: var(--cx-shadow-4);
backdrop-filter: blur(12px);
}
.ms-head {
display: flex;
align-items: center;
gap: .7rem;
margin-bottom: 1.3rem;
}
.ms-head i {
color: var(--tl-teal);
font-size: 1.5rem;
}
.ms-head h2 {
font-family: var(--cx-display);
font-weight: 600;
font-size: 1.35rem;
color: #fff;
margin: 0;
letter-spacing: .3px;
text-transform: none;
}
.ms-grid {
display: grid;
grid-template-columns:repeat(4, 1fr);
gap: 1rem 1.1rem;
}
.ms-field {
display: flex;
flex-direction: column;
gap: .4rem;
}
.ms-field label {
font-family: var(--cx-sans);
font-size: .64rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--tl-teal);
}
.ms-field select {
appearance: none;
-webkit-appearance: none;
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(212, 175, 55, .28);
border-radius: var(--cx-radius-lg);
color: #f5f2ea;
font-family: var(--cx-sans);
font-size: .9rem;
padding: .7rem 2.2rem .7rem .9rem;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right .8rem center;
transition: border-color var(--cx-duration) ease;
}
.ms-field select:focus {
outline: none;
border-color: rgba(212, 175, 55, .7);
}
.ms-field select option {
background: #1a1a1d;
color: #f5f2ea;
}
.ms-actions {
justify-content: flex-end;
}
.ms-btn {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: .75rem 1rem;
border: 0;
cursor: pointer;
}
.ms-btn i {
font-size: 1.1rem;
}
.sample-note {
display: flex;
align-items: flex-start;
gap: .5rem;
margin: 1.2rem 0 0;
font-size: .78rem;
color: rgba(245, 242, 234, .6);
line-height: 1.5;
}
.sample-note i {
color: var(--tl-teal);
font-size: 1rem;
flex: 0 0 auto;
margin-top: .05rem;
}
@media (max-width: 900px) {
.ms-grid {
grid-template-columns:repeat(2, 1fr);
}
}
@media (max-width: 520px) {
.ms-grid {
grid-template-columns:1fr;
}
.market-search {
margin-top: 0;
padding: 1.5rem 1.2rem;
}
}
/* type cards */
.type-cards {
display: grid;
grid-template-columns:repeat(5, 1fr);
gap: 1.2rem;
max-width: 1160px;
margin: 0 auto;
}
.type-card {
background: #fff;
border: 1px solid #ece6d6;
border-radius: var(--cx-radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.type-card:hover {
transform: translateY(var(--cx-hover-lift));
border-color: rgba(212, 175, 55, .4);
box-shadow: var(--cx-shadow-4);
}
.type-card .tc-img {
position: relative;
height: 120px;
background-size: cover;
background-position: center;
}
.type-card .tc-img::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .5));
}
.type-card .tc-ic {
position: absolute;
bottom: -20px;
right: 16px;
width: 44px;
height: 44px;
border-radius: var(--cx-radius-lg);
display: grid;
place-items: center;
z-index: 1;
background: linear-gradient(160deg, #fbf6e8, #f3e8c8);
border: 1px solid rgba(212, 175, 55, .45);
color: var(--tl-purple-dark);
font-size: 1.25rem;
box-shadow: var(--cx-shadow-3);
}
.type-card .tc-body {
padding: 1.5rem 1.3rem 1.4rem;
display: flex;
flex-direction: column;
flex: 1;
}
.type-card .tc-body h4 {
font-family: var(--cx-display);
font-weight: 600;
font-size: 1.08rem;
color: var(--tl-dark);
margin: 0 0 .5rem;
text-transform: none;
letter-spacing: .2px;
}
.type-card .tc-body p {
color: #6b665d;
font-size: .82rem;
line-height: 1.55;
margin: 0 0 1.1rem;
}
.type-card .tc-browse {
margin-top: auto;
align-self: flex-start;
font-family: var(--cx-sans);
font-weight: 600;
font-size: .8rem;
color: var(--tl-purple-dark);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: .4rem;
}
.type-card .tc-browse span {
transition: transform var(--cx-duration) ease;
}
.type-card .tc-browse:hover span {
transform: translateX(3px);
}
@media (max-width: 980px) {
.type-cards {
grid-template-columns:repeat(2, 1fr);
}
}
@media (max-width: 520px) {
.type-cards {
grid-template-columns:1fr;
}
}
/* listings */
.listings-section {
padding: var(--coutts-section-feature, 64px) 0;
background: var(--tl-gray);
}
.results-bar {
display: flex;
align-items: center;
gap: .6rem;
max-width: 1160px;
margin: 0 auto 1.4rem;
color: #6b665d;
font-family: var(--cx-sans);
font-size: .85rem;
}
.results-bar #results-count {
font-weight: 700;
color: var(--tl-dark);
}
.reset-btn {
margin-left: auto;
background: none;
border: 1px solid #dcd5c4;
border-radius: 999px;
padding: .4rem 1rem;
font-family: var(--cx-sans);
font-size: .78rem;
color: #6b665d;
cursor: pointer;
transition: all var(--cx-duration) ease;
}
.reset-btn:hover {
border-color: var(--tl-purple);
color: var(--tl-purple-dark);
}
.listing-grid {
display: grid;
grid-template-columns:repeat(3, 1fr);
gap: 1.4rem;
max-width: 1160px;
margin: 0 auto;
}
.listing-card {
background: #fff;
border: 1px solid #ece6d6;
border-radius: var(--cx-radius-lg);
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.1rem;
transition: transform var(--cx-duration) ease, box-shadow var(--cx-duration) ease, border-color var(--cx-duration) ease;
}
.listing-card:hover {
transform: translateY(var(--cx-hover-lift));
border-color: rgba(212, 175, 55, .45);
box-shadow: var(--cx-shadow-4);
}
.lc-top {
display: flex;
align-items: center;
gap: .6rem;
}
.lc-flag {
width: 28px;
height: 20px;
border-radius: var(--cx-radius-xs);
background-size: cover;
background-position: center;
box-shadow: var(--cx-shadow-1);
flex: 0 0 auto;
}
.lc-country {
font-family: var(--cx-sans);
font-weight: 600;
font-size: .9rem;
color: var(--tl-dark);
}
.lc-badge {
margin-left: auto;
font-family: var(--cx-sans);
font-size: .62rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--tl-purple-dark);
background: linear-gradient(180deg, #fbf6e8, #f3e8c8);
border: 1px solid rgba(212, 175, 55, .4);
border-radius: 999px;
padding: .2rem .55rem;
}
.lc-facts {
display: grid;
grid-template-columns:1fr 1fr;
gap: .8rem;
padding: 1rem 0;
border-top: 1px solid #f0ebde;
border-bottom: 1px solid #f0ebde;
}
.lc-facts > div {
display: flex;
flex-direction: column;
gap: .15rem;
}
.lc-k {
font-family: var(--cx-sans);
font-size: .6rem;
letter-spacing: .08em;
text-transform: uppercase;
color: #a49d90;
}
.lc-v {
font-family: var(--cx-sans);
font-size: .9rem;
font-weight: 600;
color: #3d3a34;
}
.lc-foot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
}
.lc-price {
font-family: var(--cx-display);
font-weight: 700;
font-size: 1.45rem;
color: var(--tl-dark);
}
.lc-price-k {
display: block;
font-family: var(--cx-sans);
font-weight: 500;
font-size: .6rem;
letter-spacing: .1em;
text-transform: uppercase;
color: #a49d90;
}
.lc-reserve {
display: inline-flex;
align-items: center;
gap: .4rem;
background: linear-gradient(180deg, #EAD18A, #D4AF37 55%, #B8902B);
color: #1a1305 !important;
font-family: var(--cx-sans);
font-weight: 600;
font-size: .82rem;
letter-spacing: .03em;
padding: .6rem 1.2rem;
border-radius: var(--cx-radius-lg);
text-decoration: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 8px 16px -8px rgba(212, 175, 55, .5);
transition: transform var(--cx-duration) ease, filter var(--cx-duration) ease;
}
.lc-reserve span {
transition: transform var(--cx-duration) ease;
}
.lc-reserve:hover {
transform: translateY(var(--cx-hover-lift));
filter: brightness(1.05);
}
.lc-reserve:hover span {
transform: translateX(3px);
}
.no-results {
text-align: center;
max-width: 520px;
margin: 2rem auto 0;
color: #6b665d;
}
.no-results i {
font-size: 2.4rem;
color: #c9c0ab;
display: block;
margin-bottom: .8rem;
}
.no-results a {
color: var(--tl-purple-dark);
font-weight: 600;
}
@media (max-width: 900px) {
.listing-grid {
grid-template-columns:repeat(2, 1fr);
}
}
@media (max-width: 560px) {
.listing-grid {
grid-template-columns:1fr;
}
}
.ics-block--alt {
background: #fff;
}
/* need something specific */
.need-specific {
padding: 4.5rem 0;
background: radial-gradient(ellipse 80% 130% at 50% 0%, #242429, var(--tl-dark) 60%, var(--tl-dark-2));
}
.need-specific .ns-inner {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.need-specific .section-eyebrow {
color: var(--tl-teal);
}
.need-specific .lux-heading {
color: #fff;
}
.need-specific p {
color: rgba(245, 242, 234, .75);
line-height: 1.7;
margin: 1rem 0 1.6rem;
}
.need-specific .cta-actions {
justify-content: center;
}
/* ===== Enquire Now moved into the top utility bar ===== */
/* ===== SEARCH ALL COMPANIES (results engine) ===== */
.search-hero {
min-height: clamp(260px, 34vh, 340px);
}
.search-hero .hub-hero-inner {
padding: 1.5rem 0;
}
/* sticky filter toolbar */
.search-scope {
position: relative;
}
.search-toolbar-wrap {
z-index: 30;
padding: .9rem 0;
}
@media (max-width: 991.98px) {
.search-toolbar-wrap {
top: 120px;
}
}
.search-toolbar {
border-radius: var(--cx-radius-lg);
padding: 1.3rem 1.5rem;
background: linear-gradient(160deg, rgba(26, 26, 29, .96), rgba(11, 11, 13, .97));
border: 1px solid rgba(212, 175, 55, .3);
box-shadow: var(--cx-shadow-4);
backdrop-filter: blur(12px);
}
.st-grid {
display: grid;
grid-template-columns:repeat(5, 1fr);
gap: .85rem 1rem;
}
.st-field {
display: flex;
flex-direction: column;
gap: .32rem;
}
.st-field label {
font-family: var(--cx-sans);
font-size: .6rem;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--tl-teal);
}
.st-field select {
appearance: none;
-webkit-appearance: none;
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(212, 175, 55, .26);
border-radius: var(--cx-radius);
color: #f5f2ea;
font-family: var(--cx-sans);
font-size: .84rem;
padding: .6rem 2rem .6rem .8rem;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right .7rem center;
transition: border-color var(--cx-duration) ease;
}
.st-field select:focus {
outline: none;
border-color: rgba(212, 175, 55, .7);
}
.st-field select option {
background: #1a1a1d;
color: #f5f2ea;
}
.st-actions {
display: flex;
gap: .8rem;
margin-top: 1rem;
align-items: center;
}
.st-actions .btn-gold {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .6rem 1.4rem;
border: 0;
cursor: pointer;
}
.st-clear {
display: inline-flex;
align-items: center;
gap: .45rem;
background: none;
border: 1px solid rgba(212, 175, 55, .4);
color: var(--tl-teal);
border-radius: 999px;
padding: .55rem 1.2rem;
font-family: var(--cx-sans);
font-size: .82rem;
cursor: pointer;
transition: all var(--cx-duration) ease;
}
.st-clear:hover {
border-color: var(--tl-teal);
color: #fff;
}
@media (max-width: 1000px) {
.st-grid {
grid-template-columns:repeat(3, 1fr);
}
}
@media (max-width: 640px) {
.st-grid {
grid-template-columns:repeat(2, 1fr);
}
.st-actions {
flex-wrap: wrap;
}
}
/* results */
.results-section {
padding: 2.4rem 0 4rem;
background: var(--tl-gray);
}
.sample-note--light {
color: #8a8272;
}
.sample-note--light i {
color: var(--tl-purple-dark);
}
.results-bar {
max-width: 1160px;
margin: .4rem auto 1.4rem;
font-family: var(--cx-sans);
font-size: .9rem;
color: #6b665d;
}
.results-bar #results-count {
font-weight: 700;
color: var(--tl-dark);
}
.result-grid {
display: grid;
grid-template-columns:repeat(2, 1fr);
gap: 1.4rem;
max-width: 1160px;
margin: 0 auto;
}
.result-card {
background: #fff;
border: 1px solid #ece6d6;
border-radius: var(--cx-radius-lg);
padding: 1.6rem;
display: flex;
flex-direction: column;
gap: 1.1rem;
transition: transform var(--cx-duration) ease, box-shadow var(--cx-duration) ease, border-color var(--cx-duration) ease;
}
.result-card:hover {
transform: translateY(var(--cx-hover-lift));
border-color: rgba(212, 175, 55, .45);
box-shadow: var(--cx-shadow-4);
}
.rc-head {
display: flex;
align-items: flex-start;
gap: .8rem;
}
.rc-flag {
width: 34px;
height: 24px;
border-radius: var(--cx-radius-xs);
background-size: cover;
background-position: center;
box-shadow: var(--cx-shadow-1);
flex: 0 0 auto;
margin-top: .15rem;
}
.rc-title {
flex: 1;
min-width: 0;
}
.rc-title h3 {
font-family: var(--cx-display);
font-weight: 600;
font-size: 1.12rem;
color: var(--tl-dark);
margin: 0;
line-height: 1.25;
letter-spacing: .2px;
}
.rc-juris {
font-family: var(--cx-sans);
font-size: .76rem;
color: #9a9384;
}
.rc-badge {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: .3rem;
font-family: var(--cx-sans);
font-size: .6rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--tl-purple-dark);
background: linear-gradient(180deg, #fbf6e8, #f3e8c8);
border: 1px solid rgba(212, 175, 55, .42);
border-radius: 999px;
padding: .2rem .5rem;
}
.rc-badge i {
font-size: .76rem;
}
.rc-badge--new {
color: #2c6e49;
background: linear-gradient(180deg, #eef7f0, #dceede);
border-color: rgba(44, 110, 73, .35);
}
.rc-facts {
display: grid;
grid-template-columns:repeat(3, 1fr);
gap: .85rem;
padding: 1rem 0;
border-top: 1px solid #f0ebde;
border-bottom: 1px solid #f0ebde;
}
.rc-facts--mini {
grid-template-columns:repeat(3, 1fr);
}
.rc-facts > div {
display: flex;
flex-direction: column;
gap: .15rem;
}
.rc-k {
font-family: var(--cx-sans);
font-size: .58rem;
letter-spacing: .08em;
text-transform: uppercase;
color: #a49d90;
}
.rc-v {
font-family: var(--cx-sans);
font-size: .86rem;
font-weight: 600;
color: #3d3a34;
}
.rc-desc {
color: #6b665d;
font-size: .86rem;
line-height: 1.55;
margin: 0;
}
.rc-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: auto;
}
.rc-price {
font-family: var(--cx-display);
font-weight: 700;
font-size: 1.4rem;
color: var(--tl-dark);
white-space: nowrap;
}
.rc-price-k {
display: block;
font-family: var(--cx-sans);
font-weight: 500;
font-size: .58rem;
letter-spacing: .1em;
text-transform: uppercase;
color: #a49d90;
}
.rc-btns {
display: flex;
gap: .5rem;
}
.rc-view {
display: inline-flex;
align-items: center;
font-family: var(--cx-sans);
font-weight: 600;
font-size: .8rem;
color: var(--tl-purple-dark);
border: 1px solid rgba(212, 175, 55, .5);
border-radius: var(--cx-radius);
padding: .55rem .9rem;
text-decoration: none;
transition: all var(--cx-duration) ease;
}
.rc-view:hover {
background: rgba(212, 175, 55, .1);
color: var(--tl-purple-dark);
}
.rc-reserve {
display: inline-flex;
align-items: center;
background: linear-gradient(180deg, #EAD18A, #D4AF37 55%, #B8902B);
color: #1a1305 !important;
font-family: var(--cx-sans);
font-weight: 600;
font-size: .8rem;
padding: .55rem 1.1rem;
border-radius: var(--cx-radius);
text-decoration: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 6px 14px -6px rgba(212, 175, 55, .5);
transition: transform var(--cx-duration) ease, filter var(--cx-duration) ease;
}
.rc-reserve:hover {
transform: translateY(var(--cx-hover-lift));
filter: brightness(1.05);
}
@media (max-width: 820px) {
.result-grid {
grid-template-columns:1fr;
}
}
/* browse-by-country map placeholder */
.browse-map {
padding: 4rem 0;
background: #fff;
}
.map-panel {
max-width: 1000px;
margin: 0 auto;
}
.map-globe {
display: flex;
flex-direction: column;
align-items: center;
gap: .6rem;
padding: 2.6rem;
border: 1px dashed rgba(212, 175, 55, .5);
border-radius: var(--cx-radius-lg);
background: linear-gradient(180deg, #fbf9f3, #f5f0e4);
color: #9a9384;
}
.map-globe i {
font-size: 2.8rem;
color: var(--tl-purple);
}
.map-globe span {
font-family: var(--cx-sans);
font-size: .85rem;
letter-spacing: .04em;
}
.country-chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .7rem;
margin-top: 1.6rem;
}
.cc-chip {
display: inline-flex;
align-items: center;
gap: .5rem;
background: #fff;
border: 1px solid #e6dfce;
border-radius: 999px;
padding: .38rem .85rem;
font-family: var(--cx-sans);
font-size: .76rem;
color: #3d3a34;
cursor: pointer;
transition: all var(--cx-duration) ease;
}
.cc-chip .fi {
width: 22px;
height: 15px;
border-radius: var(--cx-radius-xs);
}
.cc-chip:hover {
border-color: var(--tl-purple);
color: var(--tl-purple-dark);
transform: translateY(var(--cx-hover-lift));
box-shadow: 0 10px 20px -12px rgba(212, 175, 55, .5);
}
/* horizontal scrollers */
.scroller-section {
padding: 4rem 0;
background: var(--tl-gray);
}
.scroller-section--alt {
background: #fff;
}
.hscroll {
display: flex;
gap: 1.2rem;
overflow-x: auto;
padding: .5rem .2rem 1.4rem;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.hscroll::-webkit-scrollbar {
height: 8px;
}
.hscroll::-webkit-scrollbar-thumb {
background: rgba(212, 175, 55, .4);
border-radius: 999px;
}
.hscroll .rc-mini {
flex: 0 0 300px;
scroll-snap-align: start;
padding: 1.3rem;
}
.rc-mini .rc-title h3 {
font-size: 1rem;
}
.value-cards--4 {
grid-template-columns:repeat(4, 1fr);
}
@media (max-width: 960px) {
.value-cards--4 {
grid-template-columns:repeat(2, 1fr);
}
}
/* ===== UK READY MADE (country marketplace tweaks) ===== */
.st-grid--uk {
grid-template-columns:repeat(4, 1fr);
}
@media (max-width: 1000px) {
.st-grid--uk {
grid-template-columns:repeat(3, 1fr);
}
}
@media (max-width: 640px) {
.st-grid--uk {
grid-template-columns:repeat(2, 1fr);
}
}
.rc-facts--uk {
grid-template-columns:repeat(3, 1fr);
}
.rc-facts--uk > div:last-child {
grid-column: 1 / -1;
}
.rc-badge--tag {
color: var(--tl-purple-dark);
background: linear-gradient(180deg, #fbf6e8, #f3e8c8);
border-color: rgba(212, 175, 55, .45);
}
.hub-eyebrow .fi {
width: 20px;
height: 14px;
border-radius: var(--cx-radius-xs);
margin-right: .4rem;
vertical-align: middle;
}
/* ===== Typography standardisation — Manrope + Inter (premium direction) ===== */
body {
font-family: var(--cx-sans);
color: #4A4A4A;
}
h1, h2, h3, h4, h5, h6, .lux-heading {
font-family: var(--cx-display);
}
.lux-heading {
font-weight: 600;
color: #111111;
}
.btn, .btn-gold, .btn-ghost, .btn-gold--lg, button.btn, .nav-capsule .btn-enquire {
font-family: var(--cx-sans);
font-weight: 500;
text-transform: none;
letter-spacing: normal;
}
/* ===== Enquire modal: the choice step =====
Re-done for the dark panel — the first pass was styled light and landed on black. */
.enquire-regarding {
font-family: var(--cx-sans);
font-size: var(--fs-label, .72rem);
color: rgba(245, 241, 232, .62);
background: rgba(212, 175, 55, .07);
border: 1px solid rgba(212, 175, 55, .2);
border-radius: var(--cx-radius);
padding: .5rem .7rem;
margin: .7rem 0 0;
}
.enquire-regarding strong {
color: var(--tl-gold-light, #E6C667);
font-weight: 600;
}
.enquire-choices {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .45rem;
}
.enquire-choice {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .3rem;
font-family: var(--cx-sans);
font-size: var(--fs-label, .72rem);
font-weight: 500;
color: rgba(245, 241, 232, .7);
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .14);
border-radius: var(--cx-radius-lg);
padding: .7rem .4rem;
cursor: pointer;
text-align: center;
transition: border-color var(--cx-duration-sm), background var(--cx-duration-sm), color var(--cx-duration-sm);
}
.enquire-choice i {
font-size: 1.05rem;
color: rgba(245, 241, 232, .5);
transition: color var(--cx-duration-sm);
}
.enquire-choice:hover {
border-color: rgba(212, 175, 55, .5);
color: #fff;
}
.enquire-choice.is-active {
border-color: var(--tl-gold, #D4AF37);
background: rgba(212, 175, 55, .12);
color: #fff;
box-shadow: 0 0 0 2px rgba(212, 175, 55, .16);
}
.enquire-choice.is-active i {
color: var(--tl-gold, #D4AF37);
}
/* ============================================================================
COUTTS STANDARD FORM — Spec v1.0
One system for every form on the site. Values are taken from the spec
verbatim; where the spec offers a choice, the accessible option is used and
noted. Nothing here is page-specific — a new form uses these classes and is
consistent by construction.
============================================================================ */
:root {
--cf-container-bg: #1E1E1E;
--cf-input-bg: #2A2A2A;
--cf-input-border: #5B4A17;
--cf-subtitle: #A8A8A8;
--cf-placeholder: #8E8E8E; /* spec says #7E7E7E — 3.54:1, below AA. See notes. */
--cf-consent: #A0A0A0;
--cf-privacy: #8A8A8A;
--cf-error: #E4736B;
--cf-success: #5FBF8B;
--cf-row-gap: 16px;
--cf-label-gap: 7px;
}
/* ---- container ---- */
.cf {
max-width: 920px;
margin: 0 auto;
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
}
/* ---- heading + subtitle ---- */
.cf-title {
font-family: var(--cx-display);
font-size: 26px;
font-weight: 600;
color: #fff;
line-height: 1.15;
margin: 0 0 20px;
}
.cf-sub {
font-family: var(--cx-sans);
font-size: 14px;
font-weight: 400;
color: var(--cf-subtitle);
line-height: 1.5;
margin: 0 0 32px;
max-width: 620px;
}
/* ---- layout ---- */
.cf-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--cf-row-gap);
}
.cf-field {
display: flex;
flex-direction: column;
min-width: 0;
}
.cf-field--full {
grid-column: 1 / -1;
}
/* ---- labels ---- */
.cf-field > label {
font-family: var(--cx-sans);
font-size: 11.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .8px;
color: #7A5C12;
margin-bottom: var(--cf-label-gap);
}
/* ---- inputs, selects, date pickers — identical by rule, not by coincidence ---- */
.cf-field input,
.cf-field select,
.cf-field textarea {
width: 100%;
/* Light default — the form blends into a pale section. */
background: #fff;
border: 1px solid rgba(0, 0, 0, .16);
border-radius: var(--cx-radius);
color: #1a1a1a;
font-family: var(--cx-sans);
font-size: 16px;
font-weight: 400;
padding: 0 18px;
outline: 0;
transition: border-color var(--cx-duration-sm), box-shadow var(--cx-duration-sm);
color-scheme: dark; /* native select popup + date picker render dark */
}
.cf-field input,
.cf-field select {
height: 44px;
}
.cf-field textarea {
height: 104px;
padding: 18px;
line-height: 1.55;
resize: vertical;
}
.cf-field input::placeholder,
.cf-field textarea::placeholder {
font-size: 14px;
color: #767676;
}
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
border-color: var(--tl-gold, #D4AF37);
box-shadow: 0 0 0 3px rgba(212, 175, 55, .16);
}
.cf-field select {
appearance: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23D4AF37' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 18px center;
background-size: 10px;
padding-right: 42px;
}
.cf-field select option {
background-color: var(--cf-input-bg);
color: #fff;
}
/* ---- dark-section variant: fields on a #0d0d0f / charcoal section ---- */
.cf-on-dark .cf-field > label { color: var(--tl-gold, #D4AF37); }
.cf-on-dark .cf-title { color: #fff; }
.cf-on-dark .cf-field input,
.cf-on-dark .cf-field select,
.cf-on-dark .cf-field textarea {
background: rgba(255, 255, 255, .04);
border-color: rgba(212, 175, 55, .28);
color: #fff;
}
.cf-on-dark .cf-field input::placeholder,
.cf-on-dark .cf-field textarea::placeholder {
color: rgba(245, 241, 232, .5);
}
.cf-on-dark .cf-consent { color: rgba(245, 241, 232, .6); }
/* ---- buttons ---- */
.cf-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 34px;
min-width: 200px;
max-width: 320px;
padding: 0 40px;
border: 1px solid transparent;
border-radius: var(--cx-radius-lg);
font-family: var(--cx-display);
font-size: 14px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: filter var(--cx-duration-sm), transform var(--cx-duration-sm), background var(--cx-duration-sm), color var(--cx-duration-sm);
}
.cf-btn--primary {
background: linear-gradient(180deg, #EAD18A, #D4AF37 55%, #B8902B);
/* Spec allows "white or very dark". White on gold measures 2.10:1 — far below
AA — so very dark it is. 8.77:1. */
color: #1A1305;
box-shadow: 0 3px 10px -6px rgba(184, 144, 43, .4);
}
.cf-btn--primary:hover {
filter: brightness(1.06);
transform: translateY(var(--cx-hover-lift));
color: #1A1305;
}
.cf-btn--secondary {
background: transparent;
border-color: var(--tl-gold, #D4AF37);
color: var(--tl-gold, #D4AF37);
}
.cf-btn--secondary:hover {
background: var(--tl-gold, #D4AF37);
color: #1A1305; /* spec says white — 2.10:1. See notes. */
transform: translateY(var(--cx-hover-lift));
}
/* ---- consent, privacy, messages ---- */
.cf-consent {
display: flex;
align-items: flex-start;
gap: 10px;
font-family: var(--cx-sans);
font-size: 13px;
color: var(--cf-consent);
line-height: 1.5;
}
.cf-consent input[type=checkbox] {
width: 16px;
height: 16px;
margin-top: 2px;
flex: 0 0 auto;
accent-color: var(--tl-gold, #D4AF37);
}
.cf-consent a {
color: var(--tl-gold, #D4AF37);
text-decoration: underline;
}
.cf-privacy {
max-width: 700px;
margin: 16px auto 0;
text-align: center;
font-family: var(--cx-sans);
font-size: 13px;
color: var(--cf-privacy);
line-height: 1.5;
}
.cf-error {
font-family: var(--cx-sans);
font-size: 13px;
color: var(--cf-error);
margin-top: 6px;
}
.cf-field.has-error input,
.cf-field.has-error select,
.cf-field.has-error textarea {
border-color: var(--cf-error);
}
.cf-success {
font-family: var(--cx-sans);
font-size: 14px;
color: var(--cf-success);
background: rgba(95, 191, 139, .1);
border: 1px solid rgba(95, 191, 139, .3);
border-radius: var(--cx-radius-lg);
padding: 12px 16px;
}
/* ---- mobile: single column, full-width fields and button ---- */
@media (max-width: 768px) {
.cf {
padding: 24px;
}
.cf-grid {
grid-template-columns: 1fr;
}
.cf-title {
font-size: 22px;
}
.cf-sub {
font-size: 16px;
}
.cf-btn {
width: 100%;
min-width: 0;
max-width: 100%;
}
}
/* ============================================================
MARKETPLACE HOMEPAGE — dynamic sections
============================================================ */
.mp-search{margin:1.8rem auto 0;max-width:780px;text-align:center}
.mp-search-label{display:block;color:#fff;font-size:1.05rem;font-weight:600;margin-bottom:.7rem;letter-spacing:.01em}
.mp-search-row{display:flex;gap:.5rem;background:#fff;border-radius: var(--cx-radius-xl);padding:.5rem;box-shadow: var(--cx-shadow-4)}
.mp-search-input{flex:1;border:0;outline:0;padding:.85rem 1rem;font-size:1rem;font-family:inherit;border-radius: var(--cx-radius-lg);color:#1b1b1b}
.mp-search-btn{border:0;background:var(--tl-gold-deep,#B8902B);color:#fff;font-weight:700;padding:.85rem 1.6rem;border-radius: var(--cx-radius-lg);cursor:pointer;display:flex;align-items:center;gap:.4rem;white-space:nowrap;transition:background .15s}
.mp-search-btn:hover{background:#9a7722}
.mp-search-tags{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:.9rem}
.mp-tag{color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);padding:.35rem .8rem;border-radius: var(--cx-radius-pill);font-size:.82rem;text-decoration:none;transition:background .15s}
.mp-tag:hover{background:rgba(255,255,255,.24);color:#fff}
@media(max-width:640px){.mp-search-row{flex-direction:column}.mp-search-btn{justify-content:center}}
.mp-block{padding:3.4rem 0}
.mp-block--alt{background:#faf9f6}
.mp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.6rem;flex-wrap:wrap}
.mp-head .lux-heading{margin:.2rem 0 0}
.mp-seeall{color:var(--tl-gold-deep,#B8902B);font-weight:700;text-decoration:none;white-space:nowrap}
.mp-seeall:hover{text-decoration:underline}
.mp-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.mp-quick-card{display:flex;flex-direction:column;align-items:center;gap:.7rem;text-align:center;padding:1.6rem 1rem;background:#fff;border:1px solid #ececec;border-radius: var(--cx-radius-xl);text-decoration:none;color:#1b1b1b;transition:transform .15s,box-shadow .15s,border-color .15s}
.mp-quick-card:hover{transform:translateY(var(--cx-hover-lift));box-shadow: var(--cx-shadow-4);border-color:var(--tl-gold-deep,#B8902B)}
.mp-quick-card i{font-size:2rem;color:var(--tl-gold-deep,#B8902B)}
.mp-quick-card span{font-weight:600;font-size:.95rem}
.mp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.1rem}
.mp-card{display:flex;flex-direction:column;justify-content:space-between;background:#fff;border:1px solid #ececec;border-radius: var(--cx-radius-xl);overflow:hidden;text-decoration:none;color:#1b1b1b;transition:transform .15s,box-shadow .15s}
.mp-card:hover{transform:translateY(var(--cx-hover-lift));box-shadow: var(--cx-shadow-4)}
.mp-card-body{padding:1.2rem 1.2rem .6rem}
.mp-card-cat{font-size:.8rem;color:#777;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}
.mp-card-name{font-size:1.08rem;font-weight:800;margin:0 0 .35rem;line-height:1.3}
.mp-card-type{font-size:.88rem;color:#555}
.mp-card-go{display:block;padding:.7rem 1.2rem;color:var(--tl-gold-deep,#B8902B);font-weight:700;font-size:.9rem;border-top:1px solid #f2f2f2}
.mp-flags{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.9rem}
.mp-flag{display:flex;align-items:center;gap:.7rem;padding:.9rem 1.1rem;background:#fff;border:1px solid #ececec;border-radius: var(--cx-radius-lg);text-decoration:none;color:#1b1b1b;transition:border-color .15s,transform .15s}
.mp-flag:hover{border-color:var(--tl-gold-deep,#B8902B);transform:translateY(var(--cx-hover-lift))}
.mp-flag .fi{font-size:1.5rem;border-radius: var(--cx-radius-xs)}
.mp-flag-name{font-weight:700;flex:1}
.mp-flag-count{font-size:.78rem;color:#888}
.mp-cats{display:flex;flex-wrap:wrap;gap:.7rem}
.mp-cat{display:flex;align-items:center;gap:.6rem;padding:.7rem 1.2rem;background:#fff;border:1px solid #ececec;border-radius: var(--cx-radius-pill);text-decoration:none;color:#1b1b1b;font-weight:600;transition:border-color .15s,background .15s}
.mp-cat:hover{border-color:var(--tl-gold-deep,#B8902B);background:#fffdf7}
.mp-cat-count{background:var(--tl-gold-deep,#B8902B);color:#fff;font-size:.75rem;font-weight:700;min-width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius: var(--cx-radius-pill);padding:0 .4rem}
.mp-stats{padding:3rem 0;background:#111;color:#fff}
.mp-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center}
.mp-stat-n{display:block;font-size:2.6rem;font-weight:800;color:var(--tl-gold,#d4af37);line-height:1}
.mp-stat-l{display:block;margin-top:.4rem;font-size:.9rem;letter-spacing:.05em;text-transform:uppercase;color:#cfcfcf}
@media(max-width:640px){.mp-stats-row{grid-template-columns:repeat(2,1fr);gap:1.6rem}}
.mp-spotlight{text-align:center;padding:1rem}
.mp-spotlight-logo{max-height:70px;margin:.8rem auto 0;display:block}
.mp-spotlight-name{font-size:1.5rem;font-weight:800;margin:.6rem 0 .2rem}
.mp-spotlight-sub{color:#777;margin:0}
/* ============================================================
HOMEPAGE HERO — clear the fixed navbar + roomier search
(overrides earlier .hero-overlay / .hero-content rules)
============================================================ */
.home .hero-overlay{
align-items:flex-start; /* top-align, don't vertically centre under the navbar */
padding-top:clamp(180px, 24vh, 260px); /* extra breathing room between the menu and the heading (Simon) */
padding-bottom:3rem;
}
.home .hero-content{
max-width:820px;
}
.home .hero-sub{
max-width:560px; /* was 440px — less cramped */
}
/* search bar: full width of the hero column, left-aligned, breathing room */
.home .mp-search{
margin:1.3rem 0 0;
max-width:420px; /* ~35% smaller than 640px */
text-align:left;
}
.home .mp-search-label{
font-size:.95rem;
margin-bottom:.55rem;
}
.home .mp-search-row{
padding:.32rem;
border-radius: var(--cx-radius-lg);
box-shadow: var(--cx-shadow-4);
}
.home .mp-search-input{font-size:.9rem;padding:.65rem .8rem}
.home .mp-search-btn{padding:.65rem 1.1rem;font-size:.9rem}
.home .mp-search-tags{justify-content:flex-start;gap:.4rem;margin-top:.7rem}
.home .mp-tag{font-size:.75rem;padding:.28rem .65rem}
.home .mp-tag{
background:rgba(255,255,255,.14);
border-color:rgba(255,255,255,.28);
backdrop-filter:blur(4px);
}
/* give the hero a bit more height so the taller content isn't clipped */
.home .hero .carousel-item{min-height:720px}
@media(max-width:768px){
.home .hero-overlay{padding-top:clamp(150px, 26vh, 200px)}
.home .hero .carousel-item{min-height:600px}
.home .mp-search-row{flex-direction:column}
.home .mp-search-btn{justify-content:center}
}
/* ---- refined homepage: prominent stats band + 6-up jurisdictions ---- */
.mp-stats{padding:4rem 0;background:linear-gradient(135deg,#14110a 0%,#1e1810 55%,#0f0d09 100%);position:relative}
.mp-stats::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% -20%,rgba(197,160,68,.18),transparent 60%);pointer-events:none}
.mp-stats-head{text-align:center;margin-bottom:2.2rem;position:relative}
.section-eyebrow--light{color:var(--tl-gold,#d4af37)}
.mp-stats-title{color:#fff;font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800;margin:.4rem 0 0}
.mp-stats-row{position:relative}
.mp-stat-n{font-size:clamp(2.4rem,4vw,3.4rem)}
.mp-stat-l{font-size:.82rem}
.mp-stat{padding:.5rem 0;position:relative}
.mp-stats-row .mp-stat:not(:last-child)::after{content:'';position:absolute;right:0;top:20%;height:60%;width:1px;background:rgba(255,255,255,.12)}
@media(max-width:640px){.mp-stats-row .mp-stat::after{display:none}}
.mp-flags--home{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.mp-flags--home{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.mp-flags--home{grid-template-columns:1fr}}
/* ---- mega-menu: keep long jurisdiction lists on-screen with a scroll ---- */
/* Do NOT set display or overflow on .mega-menu / .mega-inner — the panel's show/hide is
owned by the .dropdown-menu rules, and scrolling the whole columns block detaches the
first column and the featured card from the panel. Cap the panel height, then scroll
ONLY the country list inside its own column so every column keeps the panel background. */
.nav-capsule .mega-menu{
max-height:min(82vh, 680px);
}
/* the mega panel is large and its outer columns are sparse — a near-solid background
stops the bright hero bleeding through and makes all columns read as one panel. */
.nav-capsule .mega-menu.mega-menu,
.nav-capsule .mega-menu.dropdown-menu{
background:linear-gradient(180deg, rgba(22,22,26,.975) 0%, rgba(12,12,15,.985) 100%);
-webkit-backdrop-filter:blur(26px) saturate(140%);
backdrop-filter:blur(26px) saturate(140%);
}
.mega-col .mega-links{
max-height:min(56vh, 420px);
overflow-y:auto;
overscroll-behavior:contain;
padding-right:.3rem;
}
.mega-col .mega-links::-webkit-scrollbar{width:6px;}
.mega-col .mega-links::-webkit-scrollbar-thumb{background:rgba(197,160,68,.45);border-radius: var(--cx-radius);}
.mega-col .mega-links::-webkit-scrollbar-track{background:transparent;}
.mega-col .mega-links{scrollbar-width:thin;scrollbar-color:rgba(197,160,68,.45) transparent;}
/* ============================================================
POPULAR SEARCHES + SEARCH AUTOCOMPLETE
============================================================ */
.pop-searches{padding:3.2rem 0;background:#faf9f6;text-align:center}
.pop-head{margin-bottom:1.4rem}
.pop-tags{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;max-width:760px;margin:0 auto}
.pop-tag{padding:.6rem 1.3rem;border-radius: var(--cx-radius-pill);background:#fff;border:1px solid #e6e3dc;color:#2a2a2a;font-weight:600;font-size:.92rem;text-decoration:none;transition:border-color .15s,background .15s,transform .12s}
.pop-tag:hover{border-color:var(--tl-gold-deep,#B8902B);background:#fffdf7;transform:translateY(var(--cx-hover-lift))}
/* autocomplete dropdown under the hero search */
.mp-search-row{position:relative}
.mp-suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border-radius: var(--cx-radius-lg);box-shadow: var(--cx-shadow-4);overflow:hidden;z-index:40;max-height:340px;overflow-y:auto;text-align:left}
.mp-suggest[hidden]{display:none}
.mp-sug-group{padding:.35rem 0}
.mp-sug-head{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#999;padding:.5rem 1rem .25rem}
.mp-sug-item{display:flex;align-items:center;gap:.65rem;padding:.6rem 1rem;color:#1b1b1b;text-decoration:none;cursor:pointer;font-size:.94rem}
.mp-sug-item:hover,.mp-sug-item.active{background:#faf6ec}
.mp-sug-item .fi{border-radius: var(--cx-radius-xs);flex:0 0 auto}
.mp-sug-item i{color:var(--tl-gold-deep,#B8902B);font-size:1.05rem}
.mp-sug-item .mp-sug-type{margin-left:auto;font-size:.72rem;color:#aaa;text-transform:capitalize}
.mp-sug-empty{padding:.9rem 1rem;color:#999;font-size:.9rem}
.mp-suggest::-webkit-scrollbar{width:7px}
.mp-suggest::-webkit-scrollbar-thumb{background:rgba(0,0,0,.16);border-radius: var(--cx-radius)}
/* Explore the Right Jurisdiction — global CTA (replaces the old Free Guide band) */
.fg-jx-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; flex: 0 0 auto; }
.free-guide .fg-jx-secondary,
.fg-jx .fg-jx-secondary {
position: relative; white-space: nowrap; padding: .42rem 1.5rem; font-size: .8rem; line-height: 1.4;
background: transparent; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px;
}
.free-guide .fg-jx-secondary:hover,
.fg-jx .fg-jx-secondary:hover { border-color: var(--cc-gold, #C9A227); color: #ffffff !important; }
@media (max-width: 767px) {
.fg-jx-actions { width: 100%; }
.fg-jx-actions .btn { width: 100%; text-align: center; }
}