/*
 * Premier Consultancy
 * Global Design System
 *
 * @package Premier_Consultancy
 */

/* =========================================================
   1. LOCAL FONTS
   ========================================================= */

/* =========================================================
   2. RESET / BASE
   ========================================================= */

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;

	background:
		var(--pc-white);

	color:
		var(--pc-body);

/* 	font-family:
		"Inter",
		sans-serif; */

	font-size:
		16px;

	font-weight:
		400;

	line-height:
		var(--pc-lh-body);

	font-synthesis:
		none;

	-webkit-font-smoothing:
		antialiased;

	-moz-osx-font-smoothing:
		grayscale;

	text-rendering:
		optimizeLegibility;
}

img,
svg {
	display:
		block;

	max-width:
		100%;
}

img {
	height:
		auto;
}

button,
input,
select,
textarea {
	font:
		inherit;
}

button,
a {
	-webkit-tap-highlight-color:
		transparent;
}

a {
	color:
		inherit;

	text-decoration:
		none;
}

button {
	border:
		0;

	background:
		none;

	cursor:
		pointer;
}

/* =========================================================
   3. DESIGN TOKENS
   ========================================================= */

:root {

	/* =====================================================
	   BRAND
	   ===================================================== */

	--pc-green-950: #0a221a;
	--pc-green-900: #103b2f;
	--pc-green-700: #1b5a48;

	--pc-gold-500: #c9a34a;
	--pc-gold-400: #bf9a3e;

	--pc-navy-900: #0f2240;
	--pc-navy-800: #162b4d;


	/* =====================================================
	   SURFACES
	   ===================================================== */

	--pc-white: #ffffff;
	--pc-parchment: #f8f5ee;
	--pc-surface-warm: #f8f6f1;


	/* =====================================================
	   TEXT
	   ===================================================== */

	--pc-body: #6b7b74;
	--pc-body-alt: #6b7b8d;
	--pc-ink: #222222;


	/* =====================================================
	   BORDERS
	   ===================================================== */

	--pc-border: #e8e3d8;
	--pc-border-alt: #e2ddd6;
	--pc-border-light: #e6e3dc;


	/* =====================================================
	   FUNCTIONAL
	   ===================================================== */

	--pc-whatsapp: #25d366;


	/* =====================================================
	   Table
	   ===================================================== */

	--pc-amber-500: #d3911c;
	--pc-amber-500-15: rgba(211, 145, 28, 0.15);


	/* =====================================================
	   LAYOUT
	   ===================================================== */

	--pc-container: 1200px;

	--pc-gutter:
		clamp(32px,
			3.333vw,
			40px);


	/* =====================================================
	   FLUID SECTION SPACING
	   ===================================================== */

	--pc-space-section:
		clamp(72px,
			6.667vw,
			96px);

	--pc-space-section-compact:
		clamp(56px,
			5.833vw,
			80px);

	--pc-space-content:
		clamp(32px,
			4vw,
			48px);

	--pc-space-large:
		clamp(48px,
			5.333vw,
			64px);


	/* =====================================================
	   FLUID TYPOGRAPHY

	   LARGE DESKTOP REFERENCE
	   -----------------------

	   Hero             62px
	   Section H2       44px
	   H3 / medium      24px
	   Card heading     18px
	   Large body       17px
	   Standard body    16px
	   Card body        15px
	   Small body       14px
	   Small button     13px
	   Metadata         12px
	   Eyebrow          12px
	   
	   RESPONSIVE RULE
	   ---------------

	   900px viewport height = Figma/original maximum.

	   720px viewport height = approximately 80%
	   of the large-screen Hero scale.

	   This makes the entire typography hierarchy
	   contract together instead of leaving individual
	   section types artificially large.
	   ===================================================== */


	/* -----------------------------------------------------
	   HERO
	   ----------------------------------------------------- */

	--pc-type-hero:
		clamp(49.6px,
			6.8889svh,
			62px);


	/* -----------------------------------------------------
	   STANDARD SECTION HEADING
	   
	   44px at 900px height
	   35.2px at 720px height
	   ----------------------------------------------------- */

	--pc-type-section:
		clamp(35.2px,
			4.8889svh,
			44px);


	/* -----------------------------------------------------
	   LARGE FEATURED / BANNER HEADING
	   
	   Figma reference = 76px
	   Scaled proportionally with the same system.
	   ----------------------------------------------------- */

	--pc-type-banner:
		clamp(60.8px,
			8.4444svh,
			76px);

	/* Banner subheading: 26px reference → proportional short-desktop reduction. */
	--pc-type-banner-subheading:
		clamp(20.8px,
			2.8889svh,
			26px);

	/* Banner eyebrow: 13px reference → proportional reduction. */
	--pc-type-banner-eyebrow:
		clamp(11px,
			1.4444svh,
			13px);

	/* -----------------------------------------------------
	   MEDIUM HEADING
	   
	   24px → 19.2px
	   ----------------------------------------------------- */

	--pc-type-heading-md:
		clamp(19.2px,
			2.6667svh,
			24px);


	/* -----------------------------------------------------
	   SMALL HEADING
	   
	   19px → 16px approximately
	   ----------------------------------------------------- */

	--pc-type-heading-sm:
		clamp(16px,
			calc(4px + 1.6667svh),
			19px);


	/* -----------------------------------------------------
	   LARGE BODY
	   
	   Figma:
	   17px → approximately 14px
	   ----------------------------------------------------- */

	--pc-type-body-lg:
		clamp(14px,
			calc(2px + 1.6667svh),
			17px);


	/* -----------------------------------------------------
	   STANDARD BODY
	   
	   Figma:
	   16px → approximately 13.2px
	   ----------------------------------------------------- */

	--pc-type-body:
		clamp(13px,
			calc(3px + 1.4444svh),
			16px);


	/* -----------------------------------------------------
	   CARD BODY
	   
	   Figma:
	   15px → 13px
	   ----------------------------------------------------- */

	--pc-type-body-card:
		clamp(13px,
			calc(5px + 1.1111svh),
			15px);


	/* -----------------------------------------------------
	   SMALL BODY
	   
	   Figma:
	   14px → approximately 12px
	   ----------------------------------------------------- */

	--pc-type-body-sm:
		clamp(12px,
			calc(4px + 1.3889svh),
			14px);


	/* -----------------------------------------------------
	   BUTTON
	   
	   Figma primary button = 15px.
	   
	   Smaller desktop target = approximately 13px.
	   ----------------------------------------------------- */

	--pc-type-button:
		clamp(13px,
			calc(5px + 1.1111svh),
			15px);


	/* -----------------------------------------------------
	   FILTER / TAB
	   
	   Figma = 14px.
	   ----------------------------------------------------- */

	--pc-type-tab:
		clamp(12px,
			calc(4.8px + 1.1111svh),
			14px);


	/* -----------------------------------------------------
	   META
	   
	   Figma = 12px.
	   ----------------------------------------------------- */

	--pc-type-meta:
		clamp(11px,
			calc(4.6px + 0.8222svh),
			12px);


	/* -----------------------------------------------------
	   EYEBROW
	   
	   Figma = 12px.
	   ----------------------------------------------------- */

	--pc-type-eyebrow:
		clamp(11px,
			calc(4.6px + 0.8222svh),
			12px);


	/* -----------------------------------------------------
	   NAVIGATION
	   
	   Navigation remains intentionally stable because
	   it is part of the persistent header system.
	   ----------------------------------------------------- */

	--pc-type-nav:
		clamp(13px,
			calc(7px + 0.8889svh),
			15px);


	/* =====================================================
	   LINE HEIGHTS
	   ===================================================== */

	--pc-lh-display:
		1.08;

	--pc-lh-heading:
		1.18;

	--pc-lh-heading-sm:
		1.35;

	--pc-lh-body-lg:
		1.7;

	--pc-lh-body:
		1.5;

	--pc-lh-body-sm:
		1.5;

	--pc-lh-meta:
		1.5;

	--pc-lh-eyebrow:
		1.5;
	--pc-lh-button:
		1.5;


	/* =====================================================
	   RADII
	   ===================================================== */

	--pc-radius-sm: 6px;
	--pc-radius-md: 10px;
	--pc-radius-base: 12px;
	--pc-radius-lg: 14px;
	--pc-radius-xl: 16px;
	--pc-radius-2xl: 20px;
	--pc-radius-3xl: 24px;
	--pc-radius-banner: 30px;
	--pc-radius-passport: 32px;
}

/* =========================================================
   SHARED HERO SURFACES
   Used by homepage/investment hero variants.
   ========================================================= */

/* ---------------------------------------------------------
   Shared hero badge
   --------------------------------------------------------- */

.pc-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding-block: 6px;
	border-radius: var(--pc-radius-banner);
	font-family: "Inter", sans-serif;
	font-size: clamp(10px, 0.78vw, 12px);
	font-weight: 600;
	line-height: var(--pc-lh-eyebrow);
	letter-spacing: 0.72px;
	text-transform: uppercase;
	white-space: nowrap;
}

.pc-hero__badge--approved {
	padding-left: 8px;
	padding-right: 14px;
	border: 1px solid rgba(201, 163, 74, 0.45);
	background: rgba(201, 163, 74, 0.18);
	color: var(--pc-gold-500);
}

.pc-hero__badge--licensed {
	padding-left: 14px;
	padding-right: 14px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.07);
	color: rgba(255, 255, 255, 0.65);
}

.pc-hero__badge-icon {
	display: inline-grid;
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	place-items: center;
	border-radius: 50%;
	background: var(--pc-gold-500);
	color: var(--pc-white);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.pc-hero__certificate-icon {
	display: inline-grid;
	width: 12px;
	height: 12px;
	flex: 0 0 12px;
	place-items: center;
	opacity: 0.72;
}

.pc-hero__certificate-icon img {
	display: block;
	width: 8px;
	height: 10px;
	object-fit: contain;
}

/* ---------------------------------------------------------
   Shared Figma-style glass surface

   Figma Glass mapping:
   - Light -45deg / 80% -> diagonal upper-left highlight
   - Frost 4             -> backdrop blur(4px)
   - White 10%           -> translucent white surface layer
   - #222 tint           -> subtle dark material tint

   Figma's Refraction / Depth / Dispersion are shader controls and
   do not have direct cross-browser CSS equivalents. The inset light,
   dark edge and backdrop filtering below reproduce the same visual
   character without relying on experimental browser-only shaders.
   --------------------------------------------------------- */

.pc-glass-surface {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.10) 0%,
			rgba(255, 255, 255, 0.055) 38%,
			rgba(34, 34, 34, 0.10) 100%
		),
		rgba(34, 34, 34, 0.18);
	-webkit-backdrop-filter: blur(4px) saturate(115%);
	backdrop-filter: blur(4px) saturate(115%);
	box-shadow:
		0 8px 24px rgba(0, 0, 0, 0.14),
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		inset 0 -1px 0 rgba(34, 34, 34, 0.24);
}

.pc-glass-surface::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	border-radius: inherit;
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.20) 0%,
		rgba(255, 255, 255, 0.06) 24%,
		rgba(255, 255, 255, 0) 52%
	);
	opacity: 0.80;
}

.pc-glass-surface > * {
	position: relative;
	z-index: 1;
}

/* =========================================================
   4. GLOBAL LAYOUT
   ========================================================= */

.pc-container {
	width:
		min(calc(100% - (var(--pc-gutter) * 2)),
			var(--pc-container));

	margin-inline:
		auto;
}

.pc-section {
	position:
		relative;

	width:
		100%;
}

.pc-section--white {
	background:
		var(--pc-white);
}

.pc-section--parchment {
	background:
		var(--pc-parchment);
}

.pc-section--warm {
	background:
		var(--pc-surface-warm);
}

.pc-section--green {
	background:
		var(--pc-green-900);
}

.pc-section--navy {
	background:
		var(--pc-navy-900);
}

/* =========================================================
   5. GLOBAL TYPOGRAPHY ROLES
   ========================================================= */

/*
 * Standard section heading.
*
 * Used by:
 * - About
 * - Services
 * - Programmes
 * - FAQ
 * - Blog
 * - other major content sections
 */

.pc-heading-section {
	margin:
		0;

	color:
		var(--pc-green-900);

	font-family:
		"Playfair Display",
		Georgia,
		serif;

	font-size:
		var(--pc-type-section);

	font-weight:
		700;

	line-height:
		var(--pc-lh-heading);

	letter-spacing:
		normal;
}


/*
 * Hero display heading.
 */

.pc-heading-hero {
	margin:
		0;

	color:
		var(--pc-green-900);

	font-family:
		"Playfair Display",
		Georgia,
		serif;

	font-size:
		var(--pc-type-hero);

	font-weight:
		700;

	line-height:
		var(--pc-lh-display);
}


/*
 * Large featured / banner heading.
 */

.pc-heading-banner {
	margin:
		0;

	color:
		var(--pc-white);

	font-family:
		"Playfair Display",
		Georgia,
		serif;

	font-size:
		var(--pc-type-banner);

	font-weight:
		700;

	line-height:
		var(--pc-lh-display);
}

/*
 * Featured/banner subheading.
 * Used by dark featured programme/banner compositions.
 */

.pc-banner-subheading {
	margin:
		0;

	color:
		var(--pc-white);

	font-family:
		"Playfair Display",
		Georgia,
		serif;

	font-size:
		var(--pc-type-banner-subheading);

	font-style:
		italic;

	font-weight:
		600;

	line-height:
		1.5;
}

/*
 * Light inverse large body text for dark homepage banners.
 */

.pc-body-lg--inverse {
	color:
		var(--pc-white);
}

/*
 * Banner eyebrow/overline role.
 * Section-specific geometry remains local.
 */

.pc-banner-eyebrow {
	margin:
		0;

	color:
		var(--pc-white);

	font-family:
		"Inter",
		sans-serif;

	font-size:
		var(--pc-type-banner-eyebrow);

	font-weight:
		600;

	line-height:
		var(--pc-lh-eyebrow);

	text-align:
		center;

	text-transform:
		uppercase;
}


/*
 * Medium heading.
 */

.pc-heading-md {
	margin:
		0;

	color:
		var(--pc-green-900);

	font-family:
		"Playfair Display",
		Georgia,
		serif;

	font-size:
		var(--pc-type-heading-md);

	font-weight:
		700;

	line-height:
		var(--pc-lh-heading-sm);
}


/*
 * Small heading.
 */

.pc-heading-sm {
	margin:
		0;

	color:
		var(--pc-green-900);

	font-family:
		"Playfair Display",
		Georgia,
		serif;

	font-size:
		var(--pc-type-heading-sm);

	font-weight:
		700;

	line-height:
		var(--pc-lh-heading-sm);
}


/*
 * Standard body text.
 */

.pc-body {
	margin:
		0;

	color:
		var(--pc-body);

	font-family:
		"Inter",
		sans-serif;

	font-size:
		var(--pc-type-body);

	font-weight:
		400;

	line-height:
		var(--pc-lh-body);
}


/*
 * Large section body text.
 */

.pc-body-lg {
	margin:
		0;

	color:
		var(--pc-body);

	font-family:
		"Inter",
		sans-serif;

	font-size:
		var(--pc-type-body-lg);

	font-weight:
		400;

	line-height:
		var(--pc-lh-body-lg);
}


/*
 * Card body text.
 *
 * This separates the Figma 15px card-body role from
 * the standard 16px body role.
 */

.pc-body-card {
	margin:
		0;

	color:
		var(--pc-body);

	font-family:
		"Inter",
		sans-serif;

	font-size:
		var(--pc-type-body-card);

	font-weight:
		400;

	line-height:
		var(--pc-lh-body);
}


/*
 * Small body text.
 */

.pc-body-sm {
	margin:
		0;

	color:
		var(--pc-body);

	font-family:
		"Inter",
		sans-serif;

	font-size:
		var(--pc-type-body-sm);

	font-weight:
		400;

	line-height:
		var(--pc-lh-body-sm);
}


/*
 * Metadata.
 */

.pc-meta {
	margin:
		0;

	color:
		var(--pc-body);

	font-family:
		"Inter",
		sans-serif;

	font-size:
		var(--pc-type-meta);

	font-weight:
		500;

	line-height:
		var(--pc-lh-meta);
}

/* =========================================================
   TRUST / METRIC LABEL
   ========================================================= */

.pc-trust-label {
	display: block;

	color: var(--pc-ink);

	font-family:
		"Inter",
		sans-serif;

	font-size:
		var(--pc-type-button);

	font-weight:
		600;

	line-height:
		var(--pc-lh-button);

	text-decoration: none;
}

/* =========================================================
   6. GLOBAL EYEBROW
   ========================================================= */

.pc-eyebrow {
	display:
		inline-flex;

	align-items:
		center;

	gap:
		8px;

	margin:
		0;

	color:
		var(--pc-gold-500);

	font-family:
		"Inter",
		sans-serif;

	font-size:
		var(--pc-type-eyebrow);

	font-weight:
		600;

	line-height:
		var(--pc-lh-eyebrow);

	letter-spacing:
		1.44px;

	text-transform:
		uppercase;
}

.pc-eyebrow__line {
	display:
		block;

	width:
		28px;

	height:
		2px;

	flex:
		0 0 28px;

	border-radius:
		2px;

	background:
		currentColor;
}

.pc-eyebrow--centered {
	justify-content:
		center;
}

/* =========================================================
   7. GLOBAL BUTTONS
   ========================================================= */

.pc-button {
	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	min-height:
		52px;

	padding:
		0 32px;

	border-radius:
		var(--pc-radius-lg);

	font-family:
		'Poppins';

	font-size:
		var(--pc-type-button);

	font-weight:
		600;

	line-height:
		1.5;

	letter-spacing:
		0.15px;

	transition:
		transform 180ms ease,
		background-color 180ms ease,
		border-color 180ms ease,
		color 180ms ease;
}

.pc-button:hover {
	transform:
		translateY(-1px);
}

.pc-button--primary {
	background:
		var(--pc-gold-500);

	color:
		var(--pc-white);
}

.pc-button--primary:hover {
	background:
		var(--pc-gold-400);
}

.pc-button--outline {
	border:
		1.5px solid rgba(255,
			255,
			255,
			0.35);

	color:
		var(--pc-white);
}

.pc-button--outline:hover {
	border-color:
		rgba(255,
			255,
			255,
			0.6);
}

.pc-button--secondary {
	border:
		1px solid var(--pc-gold-500);

	background:
		var(--pc-white);

	color:
		var(--pc-gold-400);
}

/*
 * WhatsApp action button used by featured banner/contact CTAs.
 */

.pc-button--whatsapp {
	gap:
		9px;

	padding-inline:
		26px;

	background:
		var(--pc-whatsapp);

	color:
		var(--pc-white);
}

.pc-button--whatsapp:hover {
	background:
		var(--pc-whatsapp);
}

/* =========================================================
   8. COMMON UTILITIES
   ========================================================= */

.pc-text-center {
	text-align:
		center;
}

.pc-flex-center {
	display:
		flex;

	align-items:
		center;

	justify-content:
		center;
}

.pc-hidden {
	display:
		none !important;
}

/* =========================================================
   9. ACCESSIBILITY
   ========================================================= */

:focus-visible {
	outline:
		2px solid var(--pc-gold-500);

	outline-offset:
		3px;
}

.pc-skip-link {
	position:
		fixed;

	top:
		10px;

	left:
		10px;

	z-index:
		2000;

	padding:
		10px 14px;

	border-radius:
		var(--pc-radius-md);

	background:
		var(--pc-white);

	color:
		var(--pc-green-900);

	font-size:
		14px;

	font-weight:
		600;

	transform:
		translateY(-150%);

	transition:
		transform 160ms ease;
}

.pc-skip-link:focus {
	transform:
		translateY(0);
}

.screen-reader-text {
	position:
		absolute;

	width:
		1px;

	height:
		1px;

	padding:
		0;

	margin:
		-1px;

	overflow:
		hidden;

	clip:
		rect(0,
			0,
			0,
			0);

	white-space:
		nowrap;

	border:
		0;
}

/* =========================================================
   10. WORDPRESS CORE
   ========================================================= */

.alignleft {
	float:
		left;

	margin:
		0 1.5rem 1rem 0;
}

.alignright {
	float:
		right;

	margin:
		0 0 1rem 1.5rem;
}

.aligncenter {
	display:
		block;

	margin-inline:
		auto;
}

.wp-caption {
	max-width:
		100%;
}

.wp-caption-text {
	margin-top:
		0.5rem;

	color:
		var(--pc-body);

	font-size:
		0.875rem;
}

.gallery {
	display:
		grid;

	gap:
		1rem;
}

/* =========================================================
   11. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior:
			auto;
	}

	.pc-button,
	.pc-skip-link {
		transition:
			none;
	}
}