:root {
			/* Colour system (brief-mandated) */
			--color-bg: #FFFFFF;
			--color-text: #222222;
			--color-text-soft: #6b6b6b;
			--color-accent: #FF7A00;
			--color-accent-dark: #E56600;
			--color-accent-light: #FFA24D;
			--color-hairline: #ECECEC;
			--color-surface: #FAFAFA;

			/* Typography */
			--font-display: 'Cormorant Garamond', Georgia, serif;
			--font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

			/* Geometry */
			--header-h: 88px;
			--header-h-scrolled: 66px;
			--radius-lg: 22px;
			--radius-md: 14px;
			--radius-pill: 999px;
			--container-max: 1360px;
			--gutter: clamp(20px, 4vw, 56px);

			/* Motion */
			--ease-premium: cubic-bezier(.22, .61, .36, 1);
			--dur-fast: 180ms;
			--dur-med: 320ms;
			--dur-slow: 480ms;

			/* Shadows */
			--shadow-soft: 0 8px 30px -12px rgba(20, 20, 20, .12);
			--shadow-panel: 0 24px 60px -20px rgba(20, 20, 20, .22), 0 4px 16px -4px rgba(20, 20, 20, .08);
			--shadow-scrolled: 0 6px 24px -10px rgba(20, 20, 20, .14);
		}

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

		html {
			scroll-behavior: smooth;
		}

		body {
			margin: 0;
			font-family: var(--font-body);
			color: var(--color-text);
			background: var(--color-bg);
			-webkit-font-smoothing: antialiased;
			overflow-x: hidden;
		}

		a {
			color: inherit;
			text-decoration: none;
		}

		ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}

		button {
			font: inherit;
			background: none;
			border: none;
			cursor: pointer;
			color: inherit;
		}

		img {
			max-width: 100%;
			display: block;
		}

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

		/* =========================================================
   HEADER — separate section, never overlaps hero
========================================================= */
		.site-header {
			position: sticky;
			top: 0;
			z-index: 1000;
			width: 100%;
			background: var(--color-bg);
			border-bottom: 1px solid transparent;
			transition: box-shadow var(--dur-med) var(--ease-premium),
				border-color var(--dur-med) var(--ease-premium);
		}

		.site-header.is-scrolled {
			box-shadow: var(--shadow-scrolled);
			border-bottom-color: var(--color-hairline);
		}

		.header-inner {
			max-width: var(--container-max);
			margin: 0 auto;
			height: var(--header-h);
			padding-inline: var(--gutter);
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: clamp(16px, 3vw, 40px);
			transition: height var(--dur-med) var(--ease-premium);
		}

		.site-header.is-scrolled .header-inner {
			height: var(--header-h-scrolled);
		}

		/* =========================================================
   BRAND / LOGO
========================================================= */
		.brand {
			display: flex;
			align-items: center;
			flex-shrink: 0;
		}

		.brand-logo {
			height: 90px;
			width: auto;
			display: block;
		}

		@media (max-width:480px) {
			.brand-logo {
				height: 90px;
			}
		}

		/* =========================================================
   PRIMARY NAV (desktop, centered)
========================================================= */
		.main-nav {
			flex: 1;
			display: flex;
			justify-content: center;
		}

		.nav-list {
			display: flex;
			align-items: center;
			gap: clamp(6px, 1.6vw, 14px);
		}

		.nav-item {
			position: relative;
		}

		.nav-link {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			padding: 10px 16px;
			font-size: 15px;
			font-weight: 600;
			color: var(--color-text);
			border-radius: var(--radius-md);
			position: relative;
			transition: color var(--dur-fast) var(--ease-premium);
		}

		/* Elegant underline-grow effect */
		.nav-link::after {
			content: '';
			position: absolute;
			left: 16px;
			right: 16px;
			bottom: 6px;
			height: 2px;
			border-radius: 2px;
			background: var(--color-accent);
			transform: scaleX(0);
			transform-origin: left;
			transition: transform var(--dur-med) var(--ease-premium);
		}

		.nav-link:hover,
		.nav-link:focus-visible {
			color: var(--color-accent);
		}

		.nav-link:hover::after,
		.nav-link:focus-visible::after {
			transform: scaleX(1);
		}

		.nav-link .chevron {
			transition: transform var(--dur-fast) var(--ease-premium);
			color: currentColor;
		}

		.nav-item--dropdown.is-open .nav-link .chevron {
			transform: rotate(180deg);
		}

		.nav-item--dropdown.is-open .nav-link {
			color: var(--color-accent);
		}

		/* =========================================================
   SERVICES MEGA DROPDOWN — glassmorphism, elegant
========================================================= */
		.services-panel {
			position: absolute;
			top: calc(100% + 16px);
			left: 50%;
			transform: translateX(-50%) translateY(8px);
			width: min(880px, 86vw);
			background: rgba(255, 255, 255, 0.82);
			backdrop-filter: blur(22px) saturate(160%);
			-webkit-backdrop-filter: blur(22px) saturate(160%);
			border: 1px solid rgba(255, 255, 255, .6);
			border-radius: var(--radius-lg);
			box-shadow: var(--shadow-panel);
			padding: 30px 30px 0;
			opacity: 0;
			visibility: hidden;
			pointer-events: none;
			transition: opacity var(--dur-med) var(--ease-premium),
				transform var(--dur-med) var(--ease-premium),
				visibility var(--dur-med);
			z-index: 900;
		}

		.nav-item--dropdown.is-open .services-panel {
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
			transform: translateX(-50%) translateY(0);
		}

		.services-panel-inner {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 8px 28px;
		}

		.services-col+.services-col {
			border-left: 1px solid rgba(34, 34, 34, .07);
			padding-left: 28px;
		}

		.services-col-title {
			font-family: var(--font-display);
			font-style: italic;
			font-weight: 600;
			font-size: 16px;
			color: var(--color-accent-dark);
			margin: 0 0 10px;
			padding-bottom: 8px;
			border-bottom: 1px dashed rgba(255, 122, 0, .3);
		}

		.service-row {
			display: flex;
			align-items: center;
			gap: 10px;
			padding: 9px 10px;
			margin-inline: -10px;
			border-radius: 10px;
			font-size: 13.5px;
			font-weight: 500;
			color: var(--color-text);
			transition: background var(--dur-fast) var(--ease-premium),
				color var(--dur-fast) var(--ease-premium),
				padding-left var(--dur-fast) var(--ease-premium);
		}

		.service-dot {
			width: 5px;
			height: 5px;
			border-radius: 50%;
			background: rgba(34, 34, 34, .28);
			flex-shrink: 0;
			transition: background var(--dur-fast) var(--ease-premium), transform var(--dur-fast) var(--ease-premium);
		}

		.service-row:hover,
		.service-row:focus-visible {
			background: rgba(255, 122, 0, .09);
			color: var(--color-accent-dark);
			padding-left: 14px;
		}

		.service-row:hover .service-dot,
		.service-row:focus-visible .service-dot {
			background: var(--color-accent);
			transform: scale(1.3);
		}

		.services-panel-footer {
			margin-top: 22px;
			padding: 16px 4px;
			border-top: 1px solid rgba(34, 34, 34, .08);
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 13px;
			color: var(--color-text-soft);
		}

		.services-panel-cta {
			font-weight: 700;
			color: var(--color-accent);
			transition: gap var(--dur-fast) var(--ease-premium), opacity var(--dur-fast);
		}

		.services-panel-cta:hover {
			color: var(--color-accent-dark);
		}

		/* =========================================================
   CALL NOW BUTTON
========================================================= */
		.header-actions {
			display: flex;
			align-items: center;
			gap: 14px;
			flex-shrink: 0;
		}

		.call-btn {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			padding: 9px 22px 9px 16px;
			border-radius: var(--radius-pill);
			background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
			color: #fff;
			box-shadow: 0 10px 24px -8px rgba(255, 122, 0, .55);
			transition: transform var(--dur-fast) var(--ease-premium),
				box-shadow var(--dur-fast) var(--ease-premium),
				filter var(--dur-fast) var(--ease-premium);
			position: relative;
		}

		.call-btn-icon {
			width: 32px;
			height: 32px;
			border-radius: 50%;
			background: rgba(255, 255, 255, .22);
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			position: relative;
		}

		.call-btn-icon::before {
			content: '';
			position: absolute;
			inset: -4px;
			border-radius: 50%;
			border: 1.5px solid rgba(255, 255, 255, .55);
			opacity: 0;
			transform: scale(.7);
			transition: opacity var(--dur-med), transform var(--dur-med);
		}

		.call-btn:hover .call-btn-icon::before {
			opacity: 1;
			transform: scale(1);
		}

		.call-btn-text {
			display: flex;
			flex-direction: column;
			line-height: 1.1;
			text-align: left;
		}

		.call-btn-label {
			font-size: 10.5px;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 1.2px;
			opacity: .9;
		}

		.call-btn-number {
			font-size: 14.5px;
			font-weight: 800;
			letter-spacing: .2px;
			white-space: nowrap;
		}

		.call-btn:hover,
		.call-btn:focus-visible {
			transform: translateY(-2px);
			box-shadow: 0 14px 30px -8px rgba(255, 122, 0, .7);
			filter: brightness(1.04);
		}

		.call-btn:active {
			transform: translateY(0);
		}

		.call-btn--mobile {
			display: none;
		}

		/* =========================================================
   HAMBURGER (mobile trigger)
========================================================= */
		.hamburger {
			display: none;
			width: 44px;
			height: 44px;
			align-items: center;
			justify-content: center;
			border-radius: 12px;
			flex-shrink: 0;
		}

		.hamburger:hover {
			background: var(--color-surface);
		}

		.hamburger-box {
			position: relative;
			width: 22px;
			height: 16px;
			display: block;
		}

		.hamburger-line {
			position: absolute;
			left: 0;
			width: 100%;
			height: 2px;
			border-radius: 2px;
			background: var(--color-text);
			transition: transform var(--dur-med) var(--ease-premium), opacity var(--dur-fast) var(--ease-premium), top var(--dur-med) var(--ease-premium);
		}

		.hamburger-line:nth-child(1) {
			top: 0;
		}

		.hamburger-line:nth-child(2) {
			top: 7px;
		}

		.hamburger-line:nth-child(3) {
			top: 14px;
		}

		.hamburger[aria-expanded="true"] .hamburger-line:nth-child(1) {
			top: 7px;
			transform: rotate(45deg);
			background: var(--color-accent);
		}

		.hamburger[aria-expanded="true"] .hamburger-line:nth-child(2) {
			opacity: 0;
		}

		.hamburger[aria-expanded="true"] .hamburger-line:nth-child(3) {
			top: 7px;
			transform: rotate(-45deg);
			background: var(--color-accent);
		}

		/* =========================================================
   MOBILE OVERLAY
========================================================= */
		.mobile-overlay {
			position: fixed;
			inset: 0;
			background: rgba(15, 12, 10, .45);
			backdrop-filter: blur(2px);
			z-index: 1100;
			opacity: 0;
			transition: opacity var(--dur-med) var(--ease-premium);
		}

		.mobile-overlay.is-visible {
			opacity: 1;
		}

		/* =========================================================
   MOBILE FULL-SCREEN SLIDE MENU
========================================================= */
		.mobile-menu {
			position: fixed;
			top: 0;
			left: 0;
			height: 100vh;
			height: 100dvh;
			width: min(390px, 88vw);
			background: var(--color-bg);
			z-index: 1200;
			transform: translateX(-100%);
			transition: transform var(--dur-slow) var(--ease-premium);
			box-shadow: 30px 0 60px -20px rgba(0, 0, 0, .25);
			display: flex;
			flex-direction: column;
			overflow-y: auto;
		}

		.mobile-menu.is-open {
			transform: translateX(0);
		}

		.mobile-menu-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 22px var(--gutter);
			border-bottom: 1px solid var(--color-hairline);
			flex-shrink: 0;
		}

		.mobile-close {
			width: 38px;
			height: 38px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			color: var(--color-text);
		}

		.mobile-close:hover {
			background: var(--color-surface);
			color: var(--color-accent);
		}

		.mobile-nav {
			padding: 8px var(--gutter) 32px;
			flex: 1;
		}

		.mobile-link {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding: 17px 4px;
			font-size: 17px;
			font-weight: 700;
			border-bottom: 1px solid var(--color-hairline);
			color: var(--color-text);
			text-align: left;
		}

		.mobile-link:hover,
		.mobile-link:focus-visible {
			color: var(--color-accent);
		}

		.mobile-accordion-toggle .chevron {
			transition: transform var(--dur-fast) var(--ease-premium);
		}

		.mobile-accordion.is-open .mobile-accordion-toggle .chevron {
			transform: rotate(180deg);
		}

		.mobile-accordion.is-open .mobile-accordion-toggle {
			color: var(--color-accent);
		}

		.mobile-accordion-panel {
			display: grid;
			grid-template-rows: 0fr;
			transition: grid-template-rows var(--dur-med) var(--ease-premium);
		}

		.mobile-accordion.is-open .mobile-accordion-panel {
			grid-template-rows: 1fr;
		}

		.mobile-accordion-inner {
			overflow: hidden;
		}

		.mobile-services-group-title {
			font-family: var(--font-display);
			font-style: italic;
			font-weight: 600;
			font-size: 14px;
			color: var(--color-accent-dark);
			margin: 16px 0 6px;
		}

		.mobile-service-row {
			display: block;
			padding: 10px 12px;
			margin-inline: -12px;
			border-radius: 10px;
			font-size: 14.5px;
			font-weight: 500;
			color: var(--color-text-soft);
			transition: background var(--dur-fast), color var(--dur-fast), padding-left var(--dur-fast);
		}

		.mobile-service-row:hover,
		.mobile-service-row:focus-visible {
			background: rgba(255, 122, 0, .08);
			color: var(--color-accent-dark);
			padding-left: 18px;
		}

		.mobile-nav .call-btn--mobile {
			display: flex;
			justify-content: center;
			margin-top: 26px;
			width: 100%;
		}

		/* =========================================================
   BREAKPOINTS
========================================================= */

		/* Tablets / iPad and below → collapse to hamburger */
		@media (max-width: 1024px) {
			.main-nav {
				display: none;
			}

			.hamburger {
				display: flex;
			}

			.call-btn-text {
				display: none;
			}

			.call-btn {
				padding: 11px;
			}

			.call-btn-icon {
				width: 34px;
				height: 34px;
			}
		}

		/* Small phones (iPhone SE etc.) */
		@media (max-width: 380px) {
			.header-inner {
				padding-inline: 16px;
			}

			.mobile-nav,
			.mobile-menu-header {
				padding-inline: 20px;
			}
		}

		/* Ultra-wide screens: keep content from over-stretching */
		@media (min-width: 1800px) {
			:root {
				--container-max: 1520px;
			}
		}

		/* Reduced motion */
		@media (prefers-reduced-motion: reduce) {

			*,
			*::before,
			*::after {
				animation-duration: 0.001ms !important;
				transition-duration: 0.001ms !important;
			}

			html {
				scroll-behavior: auto;
			}
		}