/* ============================================================================
   360 GEOMATICS — DARK THEME REFRESH
   ----------------------------------------------------------------------------
   Additive theme layer loaded AFTER css/combined.min.css. It re-skins the
   shared header, footer and the homepage into a layered charcoal + brand-red
   design without altering site markup, routes, content or functionality.

   - Header / navigation / footer rules apply site-wide.
   - Body/content rules are scoped to `body.home` so internal page bodies are
     left untouched in this phase.

   Brand red is the site's established #c12929.
   ========================================================================== */

:root {
	--bg-deep:        #070a0d;
	--bg-main:        #0b0f13;
	--bg-section:     #0e1419;
	--bg-panel:       #12181e;
	--bg-panel-2:     #151d24;
	--bg-panel-hover: #1a232b;

	--text-main: #f2f3f4;
	--text-soft: #c7ccd0;
	--text-muted:#939ba2;

	--line-soft:   rgba(255,255,255,0.08);
	--line-medium: rgba(255,255,255,0.14);

	--brand-red:        #c12929; /* official 360G red */
	--brand-red-dark:   #8f1c20;
	--brand-red-bright: #e0353a;
	--warm-glow:        #b94b32;

	--shadow-panel: 0 18px 40px -20px rgba(0,0,0,0.75);
}

/* Global heading colour for the refreshed dark site. */
h1, h2, h3, h4, h5, h6 { color: #fff; }

/* ==========================================================================
   0. ICON-FONT PATH PORTABILITY
   --------------------------------------------------------------------------
   The base combined CSS references the icon webfonts with domain-root-absolute
   URLs (/css/fonts/… and /iconsets/…). Those resolve correctly when the site
   is deployed at a domain root, but 404 when it is served from a sub-folder
   (e.g. a local http://host/360G/ dev copy), leaving all FontAwesome/Flaticon
   glyphs blank. These @font-face rules re-declare the same families with paths
   RELATIVE to this stylesheet (which lives in /css/), so they resolve to the
   identical files at a domain root AND work from a sub-folder. As this file is
   loaded after combined.min.css, these declarations win.
   ========================================================================== */

@font-face {
	font-family: 'FontAwesome';
	src: url('fonts/fontawesome-webfont.woff2?v=4.6.2') format('woff2'),
	     url('fonts/fontawesome-webfont.woff?v=4.6.2') format('woff'),
	     url('fonts/fontawesome-webfont.ttf?v=4.6.2') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}
@font-face {
	font-family: 'outlined-iconset';
	src: url('fonts/outlined-iconset.woff') format('woff'),
	     url('fonts/outlined-iconset.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}
@font-face {
	font-family: 'Flaticon1';
	src: url('../iconsets/360g/Flaticon.woff') format('woff'),
	     url('../iconsets/360g/Flaticon.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}
@font-face {
	font-family: 'Flaticon-1501376871';
	src: url('../iconsets/1501376871/Flaticon.woff') format('woff'),
	     url('../iconsets/1501376871/Flaticon.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}
@font-face {
	font-family: 'Flaticon-1501372778';
	src: url('../iconsets/1501372778/Flaticon.woff') format('woff'),
	     url('../iconsets/1501372778/Flaticon.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

/* ==========================================================================
   1. GLOBAL PAGE TONE (home only for body; header/footer global)
   ========================================================================== */

body.home {
	background-color: var(--bg-main);
	color: var(--text-soft);
}

body.home .body { background-color: var(--bg-main); }

/* keep decorative overlays from stealing clicks */
body.home .hero-area:before,
body.home .hero-area:after,
body.home .notice-bar:before,
body.home .service-grid .servicelinkbox:before,
body.home .statement-section:before { pointer-events: none; }

/* ==========================================================================
   2. SHARED HEADER  (applies to every page)
   ========================================================================== */

/* --- top utility bar --- */
.topbar {
	background-color: var(--bg-deep);
	border-bottom: 1px solid var(--line-soft);
}
.topbar p,
.topbar p span { color: var(--text-muted) !important; }
.topbar .social-icons li a { color: var(--text-muted); }
.topbar .social-icons li a:hover { color: #fff; }

/* Centre the "Geomatics • Land Surveyors • Measured Building Surveyors" strap
   against the taller Get A Quote / Client Login chips beside it. The row is a
   Bootstrap 3 float grid, so the columns are un-floated to let flex align them;
   they still stack normally below the 768px breakpoint via flex-wrap. */
.topbar .container > .row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.topbar .container > .row > [class*="col-"] { float: none; }
.topbar p { margin: 0; }
/* Below the col-sm- breakpoint Bootstrap gives these columns no width, so as
   flex items they would shrink to their content and sit side by side. Force
   the original stacked layout back. */
@media (max-width: 767px) {
	.topbar .container > .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
}

/* --- main identity row --- */
.site-header {
	background: var(--bg-section) !important;
	box-shadow: 0 1px 0 0 var(--line-soft) !important;
	border-bottom: 1px solid var(--line-soft);
}
.header-style3 .site-header { box-shadow: 0 1px 0 0 var(--line-soft) !important; }

/* The markup ships the dark-ink logo (correct for the original white header).
   This identity row is dark, so swap in the white-ink artwork. The light
   hybrid palettes load after this and point it back at the dark-ink file. */
.site-header .site-logo img.default-logo,
.site-header .site-logo img.retina-logo { content: url(../siteimages/logo-dark.png?v=1); }

/* phone / mobile / email block */
.header-style3 #info-content > li { color: var(--text-soft); }
.header-style3 #info-content > li .ititle { color: var(--text-muted); }
.header-style3 #info-content > li i,
.header-style3 #info-content > li .hi-icon { color: var(--brand-red-bright); }
#info-content li div.ititle span.acontactdetail_header { color: var(--text-main); }
#info-content .acontactdetail_header a,
#info-content a { color: var(--text-main); }
#info-content li:hover div.ititle span.acontactdetail_header,
#info-content li.hovered div.ititle span.acontactdetail_header { color: #fff; }
#info-content li div.ititle span.acontactdetail_header:before { border-bottom-color: var(--brand-red); }

/* search field within topbar */
.topbar .search-form input { color: var(--text-soft); }
.topbar .search-form:before { color: var(--text-muted); }

/* --- navigation band --- */
.header-style3 .main-navigation {
	background-color: var(--bg-panel) !important;
	background-image: none !important;
	border-top: 1px solid var(--line-soft);
	border-bottom: 2px solid var(--brand-red);
	box-shadow: 0 2px 10px rgba(0,0,0,0.45);
}

/* top-level items */
.dd-menu > li > a { color: var(--text-soft); }
.dd-menu > li > a:hover,
.dd-menu > li.active > a,
.dd-menu > li:hover > a { color: #fff; }

/* red active / hover underline under each top item */
.header-style3 .dd-menu > li { position: relative; }
.header-style3 .dd-menu > li:after {
	content: "";
	position: absolute;
	left: 12px; right: 12px; bottom: 0;
	height: 3px;
	background: var(--brand-red);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .25s ease;
	pointer-events: none;
}
.header-style3 .dd-menu > li:hover:after,
.header-style3 .dd-menu > li.active:after { transform: scaleX(1); }

/* menu icons – calmer on dark */
.dd-menu > li i.menuicons { color: var(--text-muted); transition: color .25s ease; }
.dd-menu > li:hover i.menuicons,
.dd-menu > li.active i.menuicons { color: var(--brand-red-bright); }

/* dropdown panels (were bright red) → dark charcoal */
.header-style3 .dd-menu > li ul,
.dd-menu > li ul.menusubpages {
	background-color: var(--bg-panel-2) !important;
	border: 1px solid var(--line-medium);
	box-shadow: var(--shadow-panel);
	border-top: 2px solid var(--brand-red);
}
.dd-menu .menusubpages li a,
.dd-menu > li ul li a { color: var(--text-soft) !important; }
.dd-menu .menusubpages li a:hover,
.dd-menu > li ul li a:hover {
	color: #fff !important;
	background-color: var(--bg-panel-hover) !important;
}
.dd-menu .menusubpages li a i { color: var(--brand-red); }
.dd-menu .menusubpages li a:hover i { color: var(--brand-red-bright); }

/* CICES accreditation mark – align cleanly, no colour damage */
.main-navigation .social-icons-colored img { opacity: .92; }

/* keyboard focus visibility across header */
.dd-menu a:focus-visible,
#info-content a:focus-visible,
.topbar a:focus-visible {
	outline: 2px solid var(--brand-red-bright);
	outline-offset: 2px;
}

/* --- mobile menu toggles --- */
#menu-toggle {
	background: var(--bg-panel-2);
	border: 1px solid var(--line-medium);
	color: var(--text-main);
}
#menu-toggle.opened { background: var(--brand-red) !important; border-color: var(--brand-red); }
#mobile-client-login {
	background: var(--bg-panel-2) !important;
	border: 1px solid var(--line-medium);
	color: var(--text-soft) !important;
}

/* ==========================================================================
   2b. FORM ACTION ROW  (reCAPTCHA beside the send button)
   --------------------------------------------------------------------------
   The captcha used to sit above the button with a <br> between, where it was
   easy to scroll past and miss. It now shares one centred line with the send
   button on the Contact and Get A Quote forms. The widget is a fixed 304x78,
   so the row wraps to two lines on narrow screens rather than overflowing.
   ========================================================================== */
.g360-captcha-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 22px;
}
.g360-captcha-row .g-recaptcha,
.g360-captcha-row .recaptcha-localdev-note { flex: 0 0 auto; line-height: 0; }
.g360-captcha-row .btn { flex: 0 0 auto; margin: 0; }
/* the inline margin-left on the alert divs would double the flex gap */
.g360-captcha-row .alert,
.g360-captcha-row .v_alert_box { margin: 0 !important; }

/* The quote form is not itself inside a padded Bootstrap column, so the -15px
   margins on its .row children escape the layout: every row in it sits 15px
   proud on each side and pushes the page wider than the viewport on mobile.
   Supply the padding the column would have given it, so its rows line up with
   every other row on the page. */
#thequoteform { padding-left: 15px; padding-right: 15px; }

/* ==========================================================================
   3. BUTTONS  (global, restrained squared style)
   ========================================================================== */

.btn-rounded { border-radius: 2px !important; }

.btn-primary {
	background-color: var(--brand-red) !important;
	border-color: var(--brand-red) !important;
	color: #fff !important;
}
/* .btn-primary hover slide is defined once in the site-wide button section (R2.11) */

/* ghost / light buttons: transparent outline at rest; the red-fill slide on
   hover is defined once in the site-wide button section (R2.11) so hover and
   mouse-out animate symmetrically */
body.home .btn-ghost.btn-light,
body.home .btn-default.btn-light {
	border-radius: 2px !important;
	border: 1px solid var(--line-medium);
	color: var(--text-main) !important;
	background-color: transparent;
}

body.home .btn:focus-visible {
	outline: 2px solid var(--brand-red-bright);
	outline-offset: 2px;
}

/* arrow nudge on hover */
body.home .btn .sliderbuttoniconspan i { transition: transform .25s ease; }
body.home .btn:hover .sliderbuttoniconspan i { transform: translateX(2px); }

/* ==========================================================================
   4. HERO  — cinematic dark + warm sunset glow
   ========================================================================== */

body.home .hero-slider,
body.home .hero-slider.flexslider ul.slides li,
body.home .flex-caption-cell { height: 520px; }

body.home .hero-slider { background-color: var(--bg-deep); }
body.home .hero-area { position: relative; }

/* keep photo in colour and vivid; cancel the JS greyscale. Darkening for
   readability is done by the .sliderbgimagediv:after overlay (so it doesn't
   dim the warm glow, which a brightness() filter here would). */
body.home .sliderbgimagediv,
body.home .sliderbgimagediv.isgrey {
	filter: saturate(1.08) contrast(1.05) !important;
}

/* readability + sunset glow + vignette — layered on the IMAGE div (::after) so
   the stack is: photo → overlay → caption text/buttons. The caption paints
   later in the slide than the image div, so text always stays on top. */
body.home .sliderbgimagediv:after {
	content: "";
	position: absolute; inset: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 55% 48%, rgba(185,75,50,0.30), transparent 42%),
		linear-gradient(110deg, transparent 42%, rgba(125,34,28,0.20) 82%),
		linear-gradient(90deg, rgba(5,8,10,0.80) 0%, rgba(5,8,10,0.52) 32%, rgba(5,8,10,0.16) 62%, rgba(5,8,10,0.46) 100%),
		linear-gradient(to top, rgba(5,8,10,0.90) 0%, rgba(5,8,10,0.30) 42%, transparent 70%);
	box-shadow: inset 0 0 220px 40px rgba(0,0,0,0.50);
}
/* right-aligned slides: mirror the readability so the text side (right) is darker */
body.home li.righttext .sliderbgimagediv:after {
	background:
		radial-gradient(circle at 45% 48%, rgba(185,75,50,0.30), transparent 42%),
		linear-gradient(250deg, transparent 42%, rgba(125,34,28,0.20) 82%),
		linear-gradient(270deg, rgba(5,8,10,0.80) 0%, rgba(5,8,10,0.52) 32%, rgba(5,8,10,0.16) 62%, rgba(5,8,10,0.46) 100%),
		linear-gradient(to top, rgba(5,8,10,0.90) 0%, rgba(5,8,10,0.30) 42%, transparent 70%);
}
/* the per-slide dark gradient is now redundant with the image overlay */
body.home li.lefttext .sliderbg,
body.home li.righttext .sliderbg { opacity: .2; }

/* hero typography */
body.home .flex-caption-text h1,
body.home .flex-caption-text h2 {
	color: #fff;
	font-size: 52px;
	line-height: 1.08;
	text-shadow: 0 2px 24px rgba(0,0,0,0.6);
}
body.home .flex-caption-text h3 {
	color: var(--brand-red-bright);
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 14px;
	font-weight: 700;
}
body.home .flex-caption-text p { color: var(--text-soft); }

/* ==========================================================================
   5. NEWS / UPDATE BAND
   ========================================================================== */

body.home .notice-bar {
	background: var(--bg-deep);
	border-top: 1px solid var(--line-soft);
	border-bottom: 1px solid var(--line-soft);
	overflow: hidden; /* clip the 2000px red diagonal :before so it can't cause page overflow */
}
body.home .notice-bar .flexslider,
body.home .notice-bar .flexslider a { color: var(--text-soft); }
body.home .notice-bar .flexslider a:hover { color: #fff; }
body.home .notice-bar .icon-block {
	background-color: var(--brand-red);
	color: #fff;
}
body.home .notice-bar .slides li p { color: var(--text-soft); }
body.home .notice-bar .flexslider .meta-data { color: var(--text-muted); }

/* the red "News & Updates" button already carries the diagonal :before */
body.home .notice-bar .btn-primary {
	background-color: var(--brand-red) !important;
	border-color: var(--brand-red) !important;
}
body.home .notice-bar .btn-primary:before { background-color: var(--brand-red) !important; }

/* ==========================================================================
   6. MAIN CONTENT SHELL
   ========================================================================== */

body.home #main-container,
body.home #main-container .content { background: var(--bg-main); }

body.home hr.fw { border-color: var(--line-soft); }

/* section eyebrow + headings */
body.home .content h2,
body.home .content h3.subtitle { color: var(--text-main); }
body.home .subhead { color: var(--text-muted); }
body.home .subhead.accent-color,
body.home .accent-color { color: var(--brand-red-bright) !important; }

/* the faint decorative section icons */
body.home .homepageicon { color: var(--text-main); }

/* ==========================================================================
   6a. INTRO / "WELCOME TO 360G"
   ========================================================================== */

/* left brick statement block — soften edge into the dark bg */
body.home .block-style1.dgray-bg {
	box-shadow: inset 0 0 120px 20px rgba(7,10,13,0.55);
	border: 1px solid var(--line-soft);
}
body.home .homesidebitdiv h3 { color: #fff; }
body.home .homesidebitdiv h5 em { color: var(--text-soft); }

/* right welcome column */
body.home .introarea,
body.home .introarea p,
body.home .editablediv,
body.home .editablediv p { color: var(--text-soft); }
body.home .introarea a,
body.home .editablediv a { color: var(--brand-red-bright); }
body.home .content h2.accent-color { color: #fff !important; }
body.home h5.subhead.subhead { color: var(--brand-red-bright); }

/* featured "WE CAN HELP" block */
body.home .featured-block { border: 1px solid var(--line-soft); }
body.home .featured-block-content { background: var(--bg-panel); }
body.home .featured-block-info .subtitle { color: var(--brand-red-bright); }
body.home .featured-block-info p { color: var(--text-soft); }
body.home .featured-block-more { background: var(--bg-panel-2); }
body.home .featured-block-more a.basic-link { color: var(--brand-red-bright); }

/* ==========================================================================
   6b. SERVICES  — clean responsive image-card grid
   (the horizontal accordion plugin is neutralised in js/theme-refresh.js)
   ========================================================================== */

/* undo the horizontal-accordion strip sizing (base CSS makes #accul 5000px wide) */
body.home #accordion,
body.home #accordion #accdiv,
body.home #accordion #accul {
	width: 100% !important;
	height: auto !important;
	overflow: visible !important;
	white-space: normal !important;
	position: static !important;
}
body.home #accordion .Controller { display: none !important; }

body.home #accul {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
body.home #accul li.accli {
	position: static !important;
	width: auto !important;
	height: 230px !important;
	margin: 0 !important;
	left: auto !important;
	overflow: visible;
	float: none !important;
}

body.home .accli .servicelinkbox {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 3px;
	border: 1px solid var(--line-soft);
	border-bottom: 3px solid var(--brand-red);
	background: var(--bg-panel);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
body.home .accli .servicelinkbox:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 34px -18px rgba(0,0,0,0.85);
	border-bottom-color: var(--brand-red-bright);
}

/* image layer */
body.home .accli .imgdiv,
body.home .accli .imgwrap {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
}
body.home .accli .imgwrap img {
	position: absolute; inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	filter: grayscale(35%) brightness(.72) contrast(1.05);
	transition: transform .5s ease, filter .4s ease;
}
body.home .accli .servicelinkbox:hover .imgwrap img {
	transform: scale(1.06);
	filter: grayscale(0%) brightness(.82) contrast(1.05);
}

/* dark readability overlay */
body.home .accli .servicelinkbox:before {
	content: "";
	position: absolute; inset: 0;
	z-index: 2;
	background: linear-gradient(to top, rgba(7,10,13,0.92) 0%, rgba(7,10,13,0.45) 45%, rgba(7,10,13,0.15) 100%);
	transition: background .3s ease;
}

/* service icon */
body.home .accli .serviceaccordicondiv {
	display: block !important; /* base CSS hides this at ≤767px in the accordion */
	position: absolute;
	top: 20px; left: 20px;
	z-index: 3;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	background: transparent !important;
}
body.home .accli i.serviceaccordicon {
	font-size: 40px !important;
	line-height: 1 !important;
	color: #fff;
	opacity: .9;
	text-shadow: none !important;
	transition: color .3s ease, transform .3s ease;
}
body.home .accli:hover i.serviceaccordicon,
body.home .accli.hover i.serviceaccordicon {
	font-size: 40px !important;
	line-height: 1 !important;
	color: var(--brand-red-bright);
	transform: translateY(-2px);
	text-shadow: none !important;
}

/* horizontal title at the bottom */
body.home #accordion .accli .short {
	position: absolute !important;
	top: auto !important;
	left: 20px !important;
	right: 20px !important;
	bottom: 18px !important;
	width: auto !important;
	height: auto !important;
	opacity: 1 !important; /* base CSS collapses this to 0 at ≤767px */
	transform: none !important; /* cancel base rotate(-90deg) */
	writing-mode: horizontal-tb !important;
	z-index: 3;
}
body.home #accordion .accli .short p {
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	display: block !important;
}
body.home #accordion .accli .short p span {
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .2px;
	background: transparent !important;
}

/* hide the accordion's expand-only description & button layers */
body.home .accli .text.bottom-right,
body.home .accli .text.top-right { display: none !important; }

/* ==========================================================================
   6c. WHY 360 GEOMATICS  — red-outline icon rows
   ========================================================================== */

body.home .icon-box.ibox-outline { display: table-row; }
body.home .icon-box.ibox-outline .ibox-icon {
	background-color: transparent !important;
	border: 2px solid var(--brand-red);
	border-radius: 50%;
	width: 52px; height: 52px;
	line-height: 48px;
	text-align: center;
	transition: background-color .25s ease, border-color .25s ease;
}
body.home .icon-box.ibox-outline .ibox-icon i {
	color: var(--brand-red-bright) !important;
	background: transparent !important;
	font-size: 20px;
	line-height: 48px;
}
body.home .icon-box.ibox-outline:hover .ibox-icon {
	background-color: rgba(193,41,41,0.14) !important;
	border-color: var(--brand-red-bright);
}
body.home .icon-box.ibox-outline h3 { color: var(--text-soft) !important; }

/* ==========================================================================
   6d. LARGE STATEMENT SECTION  (parallax1) + faint contour texture
   ========================================================================== */

body.home .parallax1.parallax-light {
	position: relative;
	background-color: var(--bg-deep);
}
/* darken the existing photo overlay a touch further for contrast handled inline;
   add an almost-invisible contour texture */
body.home .parallax1:after {
	content: "";
	position: absolute; inset: 0;
	z-index: 1;
	background-image:
		linear-gradient(90deg, rgba(7,10,13,0.72) 0%, rgba(7,10,13,0.5) 45%, rgba(7,10,13,0.35) 100%),
		repeating-radial-gradient(circle at 20% 120%, transparent 0 38px, rgba(255,255,255,0.02) 38px 39px),
		repeating-radial-gradient(circle at 80% -20%, transparent 0 46px, rgba(255,255,255,0.016) 46px 47px);
	pointer-events: none;
}
body.home .parallax1 .container { position: relative; z-index: 2; }
body.home .parallax1 .subhead { color: var(--brand-red-bright); }
body.home .parallax1 h2 { color: #fff; }
body.home .parallax1 .editablediv,
body.home .parallax1 .editablediv p { color: var(--text-soft); }
body.home .parallax1 .editablediv strong,
body.home .parallax1 .editablediv b { color: var(--brand-red-bright); }

/* ==========================================================================
   6e. CALLBACK FORM + FAQ
   ========================================================================== */

/* elevated dark form panel */
body.home .shadow-block {
	background: var(--bg-panel) !important;
	border: 1px solid var(--line-medium);
	box-shadow: var(--shadow-panel) !important;
	border-radius: 4px;
}
body.home .shadow-block h3.accent-color { color: var(--brand-red-bright) !important; }
body.home .shadow-block .editablediv,
body.home .shadow-block .editablediv p { color: var(--text-muted); }

body.home .meeting-form .form-control,
body.home .meeting-form input.form-control,
body.home .meeting-form select.form-control {
	background: var(--bg-deep) !important;
	border: 1px solid var(--line-medium) !important;
	color: var(--text-main) !important;
}
body.home .meeting-form .form-control::placeholder { color: var(--text-muted); }
body.home .meeting-form .form-control:focus {
	border-color: var(--brand-red) !important;
	box-shadow: 0 0 0 2px rgba(193,41,41,0.25) !important;
}
body.home .meeting-form .spinformicon i { color: var(--text-muted); }
body.home .shadow-block .small,
body.home .shadow-block p.small { color: var(--text-muted); }
body.home .shadow-block .small a { color: var(--brand-red-bright); }
/* bootstrap-select button (Service Required) */
body.home .meeting-form .bootstrap-select > .btn,
body.home .meeting-form button.selectpicker {
	background: var(--bg-deep) !important;
	border: 1px solid var(--line-medium) !important;
	color: var(--text-soft) !important;
}
body.home .meeting-form .bootstrap-select .dropdown-menu {
	background: var(--bg-panel-2);
	border: 1px solid var(--line-medium);
}
body.home .meeting-form .bootstrap-select .dropdown-menu li a { color: var(--text-soft); }

/* FAQ list / accordion */
body.home #toggleArea .accordion-group.panel {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--line-soft);
}
body.home .accordion-heading .accordion-toggle h4.aquestion { color: var(--text-main) !important; }
body.home .accordion-heading:hover { background-color: var(--bg-panel) !important; }
body.home .accordion-heading:hover h4.aquestion,
body.home .accordion-heading.active h4.aquestion { color: #fff !important; }
body.home .accordion-heading i.faqicondiv { color: var(--brand-red) !important; opacity: .6; }
body.home .accordion-heading:hover i.faqicondiv,
body.home .accordion-heading.active i.faqicondiv { color: var(--brand-red-bright) !important; opacity: 1; }
body.home .accordion-toggle .fa-plus-circle,
body.home .accordion-toggle .fa-minus-circle { color: var(--brand-red-bright); }
body.home .accordion-body,
body.home .accordion-inner,
body.home .accordion-inner blockquote { color: var(--text-soft); }
body.home .accordion-inner {
	background: var(--bg-panel) !important;
	border: 1px solid var(--line-soft);
	border-radius: 3px;
}
body.home .accordion-inner blockquote:before { color: var(--brand-red); }
body.home #toggleArea + div,
body.home .content h3 { color: var(--text-main); }
body.home .col-md-8 > h3 { color: #fff; }

/* ==========================================================================
   6f. LOWER RED CTA STRIP  (parallax2)
   ========================================================================== */

body.home .parallax2.parallax-light { position: relative; }
body.home .parallax2 .overlay-accent {
	background: linear-gradient(90deg, var(--brand-red-dark) 0%, var(--brand-red) 55%, var(--brand-red-dark) 100%) !important;
	opacity: .96;
}
body.home .parallax2 h3 { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,0.35); }

/* ==========================================================================
   7. FOOTER  (global)
   ========================================================================== */

.site-footer {
	background: var(--bg-deep);
	border-top: 1px solid var(--line-soft);
	color: var(--text-muted);
	font-size: 15px;
}
.site-footer .widgettitle {
	color: var(--text-main);
	font-size: 15px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
.site-footer .widget_links a,
.site-footer .footer_widget a { color: var(--text-muted); transition: color .2s ease; }
.site-footer .widget_links a:hover,
.site-footer .footer_widget a:hover { color: #fff; }
.site-footer .widget_recent_posts .meta-data,
.site-footer .grid-item-meta { color: #6d757c; }
.site-footer .widget_recent_posts ul li { border-bottom: 1px solid var(--line-soft); }
.site-footer .footer-row2 { border-top: 1px solid var(--line-soft); padding-top: 16px; }
.site-footer .footer-menu a { color: var(--text-muted); }
.site-footer .footer-menu a:hover { color: #fff; }
.site-footer .footer-row3 p { color: #6d757c; }

/* QR must stay crisp & fully opaque */
.site-footer .widget img { opacity: 1 !important; filter: none !important; }

/* --------------------------------------------------------------------------
   vCard QR code (footer + contact page)
   The code is black-on-white, so it always sits on its own white tile: that
   guarantees the mandatory quiet zone and keeps it scannable on the dark
   accent panels and on every light hybrid palette alike. Never tint, fade or
   change the aspect ratio of a QR image — it stops scanning.
   -------------------------------------------------------------------------- */
.g360-qr-code {
	display: block;
	width: 100%;
	height: auto;          /* never distort the pattern */
	max-width: 180px;
	opacity: 1 !important;
	filter: none !important;
	image-rendering: -webkit-optimize-contrast; /* keep module edges crisp */
}
.g360-qr-block { margin: 22px 0 4px; }
.g360-qr-title {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .4px;
	line-height: 1.35;
	color: inherit;
}
.g360-qr-tile {
	display: inline-block;
	background: #fff;
	padding: 10px;         /* the QR quiet zone */
	border-radius: 3px;
	line-height: 0;
	box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
/* The contact panel is the brand-red accent block with white copy. Without this
   the hybrid palettes' global `h1–h6 { color: var(--text-main) !important }`
   drags this heading to dark ink on red. Class specificity (0,2,0) beats that
   rule's (0,0,1), so this wins in every theme regardless of load order. */
.accent-bg .g360-qr-title,
.parallax-light .g360-qr-title { color: #fff !important; }

/* --------------------------------------------------------------------------
   FROALA VIDEO EMBEDS (YouTube / Vimeo)
   The editor writes a fixed `<iframe width="640" height="360">` inside a
   `span.fr-video`. Froala's own responsive rule is scoped to `.fr-view`, which
   only exists inside the editor — public content renders in .editablediv /
   .apagecontentdiv, so without this the 640px iframe overflows narrow columns
   and mobile. Deliberately NOT using `width:100%`: the wrapper is an
   inline-block, and a percentage width against a shrink-to-fit parent resolves
   to zero. Capping max-width and deriving height from aspect-ratio avoids that
   and keeps 16:9 at every size. Alignment classes (fr-dvb/fr-fvl/fr-fvr) are
   left alone.
   -------------------------------------------------------------------------- */
.fr-video { max-width: 100%; }
.fr-video iframe,
.fr-video embed,
.fr-video object {
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
}
@media (max-width: 767px) {
	.g360-qr-block { margin: 18px 0 4px; }
	.g360-qr-code { max-width: 150px; }
}

/* ==========================================================================
   8. AI ASSISTANT LAUNCHER  (presentation only — no behaviour change)
   ========================================================================== */

#aisys-chat-launch { z-index: 99998; }
#aisys-chat-label {
	background: var(--bg-panel-2) !important;
	color: var(--text-main) !important;
	border: 1px solid var(--line-medium) !important;
	box-shadow: var(--shadow-panel) !important;
}

/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */

/* wide desktop – allow the 7/8 services a little more room */
@media (min-width: 1400px) {
	body.home #accul { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1199px) {
	body.home #accul { grid-template-columns: repeat(3, 1fr); }
	body.home .flex-caption-text h1,
	body.home .flex-caption-text h2 { font-size: 46px; }
}

@media (max-width: 991px) {
	body.home #accul { grid-template-columns: repeat(3, 1fr); }
	body.home .hero-slider,
	body.home .hero-slider.flexslider ul.slides li,
	body.home .flex-caption-cell { height: 460px; }
	body.home .flex-caption-text h1,
	body.home .flex-caption-text h2 { font-size: 40px; }
	/* nav underline hidden inside stacked mobile menu */
	.header-style3 .dd-menu > li:after { display: none; }
}

@media (max-width: 767px) {
	body.home #accul { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	body.home #accul li.accli { height: 190px !important; }
	body.home .accli i.serviceaccordicon,
	body.home .accli:hover i.serviceaccordicon { font-size: 34px !important; }
	body.home #accordion .accli .short p span { font-size: 13.5px; }
	body.home .hero-slider,
	body.home .hero-slider.flexslider ul.slides li,
	body.home .flex-caption-cell { height: 420px; }
	body.home .flex-caption-text h1,
	body.home .flex-caption-text h2 { font-size: 32px; }
	body.home .flex-caption-text { width: 100% !important; float: none !important; }
	/* stacked mobile nav band */
	.header-style3 .main-navigation { border-bottom: 1px solid var(--line-soft); }
}

@media (max-width: 480px) {
	body.home #accul { grid-template-columns: 1fr 1fr; gap: 10px; }
	body.home #accul li.accli { height: 170px !important; }
	body.home .flex-caption-text h1,
	body.home .flex-caption-text h2 { font-size: 28px; }
	body.home .parallax2 h3 { font-size: 20px; }
}

/* ==========================================================================
   10. MOTION PREFERENCES
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	body.home .accli .servicelinkbox,
	body.home .accli .imgwrap img,
	body.home .btn .sliderbuttoniconspan i,
	.header-style3 .dd-menu > li:after {
		transition: none !important;
	}
	body.home .accli .servicelinkbox:hover { transform: none; }
	body.home .accli .servicelinkbox:hover .imgwrap img { transform: none; }
}

/* ==========================================================================
   ===  ROUND 2 REFINEMENTS  ==============================================
   ========================================================================== */

/* --------------------------------------------------------------------------
   R2.1  ping animation (nav icon hover, etc. — replaces old "tada"/"heartbeat")
   -------------------------------------------------------------------------- */
.ping {
	-webkit-animation: ping 1.6s ease-in-out infinite both;
	        animation: ping 1.6s ease-in-out infinite both;
}
@-webkit-keyframes ping {
	0%   { -webkit-transform: scale(0.2); transform: scale(0.2); opacity: 0.8; }
	80%  { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 0; }
	100% { -webkit-transform: scale(2.2); transform: scale(2.2); opacity: 0; }
}
@keyframes ping {
	0%   { -webkit-transform: scale(0.2); transform: scale(0.2); opacity: 0.8; }
	80%  { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 0; }
	100% { -webkit-transform: scale(2.2); transform: scale(2.2); opacity: 0; }
}

/* --------------------------------------------------------------------------
   R2.2  HERO — stronger left/right caption block, larger heading, buttons
   -------------------------------------------------------------------------- */
body.home .flex-caption-text {
	width: auto !important;
	max-width: 600px;
	display: inline-block;
	float: none !important;
	padding: 26px 30px 30px;
	background: linear-gradient(90deg, rgba(7,10,13,0.55), rgba(7,10,13,0.12));
	border-left: 3px solid var(--brand-red);
}
body.home .text-align-right .flex-caption-text {
	border-left: 0;
	border-right: 3px solid var(--brand-red);
	background: linear-gradient(270deg, rgba(7,10,13,0.55), rgba(7,10,13,0.12));
}
body.home .flex-caption-text h1,
body.home .flex-caption-text h2 {
	font-size: 58px !important;
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: -0.5px;
	margin-bottom: 10px;
}
body.home .flex-caption-text h3 {
	font-size: 13px;
	letter-spacing: 3.5px;
}
body.home .flex-caption-text p { font-size: 17px; line-height: 1.5; }
/* hero buttons: outline at rest; red fill slides in L→R on hover (via R2.11).
   First button carries a red border for primary emphasis. */
body.home .hero-area .flex-caption-text a.btn {
	padding: 12px 24px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1px;
	margin-top: 6px;
}
body.home .hero-area .flex-caption-text a.btn:first-of-type {
	border-color: var(--brand-red);
}

/* --------------------------------------------------------------------------
   R2.3  SERVICES — bigger icons + labels, taller cards, row-2 right-aligned
   -------------------------------------------------------------------------- */
body.home #accul li.accli { height: 290px !important; }
body.home .accli i.serviceaccordicon,
body.home .accli:hover i.serviceaccordicon,
body.home .accli.hover i.serviceaccordicon {
	font-size: 78px !important;
}
body.home .accli .serviceaccordicondiv { top: 26px; left: 26px; }
body.home #accordion .accli .short { left: 26px !important; right: 26px !important; bottom: 24px !important; }
body.home #accordion .accli .short p span {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
/* stronger label: small red rule above the title */
body.home #accordion .accli .short p span:before {
	content: "";
	display: block;
	width: 26px;
	height: 3px;
	background: var(--brand-red-bright);
	margin-bottom: 10px;
	transition: width .3s ease;
}
body.home .accli .servicelinkbox:hover .short p span:before { width: 44px; }

/* row 2 (services 5-8): icon + label right-aligned */
body.home #accul li.accli:nth-child(n+5) .serviceaccordicondiv { left: auto; right: 26px; }
body.home #accordion .accli:nth-child(n+5) .short { text-align: right; }
body.home #accordion .accli:nth-child(n+5) .short p span:before { margin-left: auto; }

/* --------------------------------------------------------------------------
   R2.4  WHY-US — larger tick, nudged up in the circle
   -------------------------------------------------------------------------- */
body.home .icon-box.ibox-outline .ibox-icon i {
	font-size: 24px;
	line-height: 46px;
	position: relative;
	top: -1px;
}

/* --------------------------------------------------------------------------
   R2.6  reCAPTCHA — match the field width (scaled to fit by js/theme-refresh.js
   so it works whether the fixed 304px widget or the localhost error box renders)
   -------------------------------------------------------------------------- */
body.home .shadow-block .g-recaptcha {
	transform-origin: 0 0;
	margin-bottom: 4px;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   R2.8  LOWER CTA STRIP — statement + real Get-a-Quote button
   -------------------------------------------------------------------------- */
body.home .parallax2 .cta-strip-inner {
	display: flex;
	position: relative;
	z-index: 2;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: nowrap;
}
body.home .parallax2 .cta-strip-inner h3 { flex: 1 1 auto; min-width: 0; text-align: left; }
body.home .btn-cta-quote {
	position: relative;
	z-index: 3;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	background: #fff;
	color: var(--brand-red-dark) !important;
	border: 1px solid #fff;
	border-radius: 2px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 14px;
	transition: background .25s ease, color .25s ease, transform .25s ease;
}
body.home .btn-cta-quote:hover {
	background: var(--bg-deep);
	color: #fff !important;
	transform: translateX(3px);
}

/* Keep the CTA content above the strip's decorative colour overlay. */
body.home .parallax2 .overlay-accent { z-index: 1; pointer-events: none; }

/* Lift smaller footer elements that carry explicit legacy font sizes. */
.site-footer .widget,
.site-footer .widget p,
.site-footer .widget li,
.site-footer .widget a,
.site-footer .footer-menu a,
.site-footer .footer-row3 p,
.site-footer .meta-data { font-size: 15px; }
body.home .btn-cta-quote .sliderbuttoniconspan i { transition: transform .25s ease; }
body.home .btn-cta-quote:hover .sliderbuttoniconspan i { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   R2.9  NAV SUBMENU — red left border + slide-in on hover, smooth return
   -------------------------------------------------------------------------- */
.dd-menu .menusubpages li a,
.dd-menu > li ul li a {
	border-left: 2px solid transparent;
	transition: color .2s ease, background-color .2s ease, border-color .25s ease, padding-left .25s ease;
}
.dd-menu .menusubpages li a:hover,
.dd-menu > li ul li a:hover {
	border-left-color: var(--brand-red);
	padding-left: 22px;
}

/* --------------------------------------------------------------------------
   R2.11  SITE-WIDE BUTTONS — reusable hover treatments.
   A pseudo-element slides a red fill in from the left on hover and back out on
   mouse-out (symmetric). Using ::before sidesteps the base theme's
   `.btn-ghost{background:none!important}` / `:hover{background:#fff!important}`
   rules that otherwise turn ghost buttons grey and blocked a gradient fill.
   -------------------------------------------------------------------------- */
.btn-primary,
body.home .btn-ghost.btn-light,
body.home .btn-default.btn-light {
	position: relative;
	overflow: hidden;
	z-index: 0;
	font-weight: 700;
}
.btn-primary > *,
body.home .btn-ghost.btn-light > *,
body.home .btn-default.btn-light > * { position: relative; z-index: 1; }

.btn-primary::before,
body.home .btn-ghost.btn-light::before,
body.home .btn-default.btn-light::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: translateX(-101%);
	transition: transform .42s cubic-bezier(.4,0,.2,1);
	pointer-events: none;
}
/* primary = brighter-red sweep over the solid red; ghost = red sweep over clear */
.btn-primary::before { background: var(--brand-red-bright); }
body.home .btn-ghost.btn-light::before,
body.home .btn-default.btn-light::before { background: var(--brand-red); }

.btn-primary:hover::before,
.btn-primary:focus::before,
body.home .btn-ghost.btn-light:hover::before,
body.home .btn-default.btn-light:hover::before { transform: translateX(0); }

/* neutralise the base white/red instant :hover fills so only the slide shows */
body.home .btn-ghost.btn-light:hover,
body.home .btn-default.btn-light:hover,
body.home .btn-ghost.btn-light:focus,
body.home .btn-default.btn-light:focus {
	background: transparent !important;
	color: #fff !important;
	border-color: var(--brand-red) !important;
}
/* Contact + Quote submit buttons share one size/treatment. */
.btn-contactsend,
.btn-quotesend { font-size: 16px !important; letter-spacing: 1px; }

/* the news band button keeps its diagonal :before + R3.4 fade — no slide there */
body.home .notice-bar .btn-primary { overflow: visible; }
body.home .notice-bar .btn-primary::before { transform: none !important; z-index: 0; }

/* --------------------------------------------------------------------------
   R2.11b  BUTTON COHERENCE ON INNER PAGES
   The ghost swipe (R2.11) is scoped to body.home. Extend the same transparent-
   to-filled interaction to inner-page CTAs, CMS content buttons (btn-default /
   btn-xs authored in page HTML) and the file-upload label so every active
   button shares one 360G interaction system. Admin success/danger buttons and
   the primary red submit (its own site-wide sweep) are untouched.
   -------------------------------------------------------------------------- */
body:not(.home) .btn-default.btn-light,
body:not(.home) .btn-ghost.btn-light,
body:not(.home) .apagecontentdiv .btn-default,
body:not(.home) .faqanswer .btn-default {
	position: relative;
	overflow: hidden;
	z-index: 0;
	border-radius: 2px !important;
	border: 1px solid var(--line-medium);
	color: var(--text-main) !important;
	background-color: transparent;
	font-weight: 700;
}
body:not(.home) .btn-default.btn-light > *,
body:not(.home) .btn-ghost.btn-light > *,
body:not(.home) .apagecontentdiv .btn-default > *,
body:not(.home) .faqanswer .btn-default > * { position: relative; z-index: 1; }
body:not(.home) .btn-default.btn-light::before,
body:not(.home) .btn-ghost.btn-light::before,
body:not(.home) .apagecontentdiv .btn-default::before,
body:not(.home) .faqanswer .btn-default::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--brand-red);
	transform: translateX(-101%);
	transition: transform .42s cubic-bezier(.4,0,.2,1);
	pointer-events: none;
}
body:not(.home) .btn-default.btn-light:hover::before,
body:not(.home) .btn-default.btn-light:focus::before,
body:not(.home) .btn-ghost.btn-light:hover::before,
body:not(.home) .btn-ghost.btn-light:focus::before,
body:not(.home) .apagecontentdiv .btn-default:hover::before,
body:not(.home) .apagecontentdiv .btn-default:focus::before,
body:not(.home) .faqanswer .btn-default:hover::before,
body:not(.home) .faqanswer .btn-default:focus::before { transform: translateX(0); }
body:not(.home) .btn-default.btn-light:hover,
body:not(.home) .btn-default.btn-light:focus,
body:not(.home) .btn-ghost.btn-light:hover,
body:not(.home) .btn-ghost.btn-light:focus,
body:not(.home) .apagecontentdiv .btn-default:hover,
body:not(.home) .apagecontentdiv .btn-default:focus,
body:not(.home) .faqanswer .btn-default:hover,
body:not(.home) .faqanswer .btn-default:focus {
	background: transparent !important;
	color: #fff !important;
	border-color: var(--brand-red) !important;
}
body:not(.home) .btn:focus-visible { outline: 2px solid var(--brand-red-bright); outline-offset: 2px; }
body:not(.home) .btn .sliderbuttoniconspan i { transition: transform .25s ease; }
body:not(.home) .btn:hover .sliderbuttoniconspan i { transform: translateX(2px); }

/* Red CTA strip ("Contact us now"): white-outline -> white-fill swipe, matching
   the home lower-strip Get-a-Quote button (a red sweep would vanish on red). */
body:not(.home) .bottommessage .btn-default.btn-light,
body:not(.home) .bottommessage .btn {
	border-color: rgba(255,255,255,.85) !important;
	color: #fff !important;
}
body:not(.home) .bottommessage .btn-default.btn-light::before,
body:not(.home) .bottommessage .btn::before { background: #fff !important; }
body:not(.home) .bottommessage .btn-default.btn-light:hover,
body:not(.home) .bottommessage .btn-default.btn-light:focus,
body:not(.home) .bottommessage .btn:hover,
body:not(.home) .bottommessage .btn:focus {
	color: var(--brand-red-dark) !important;
	border-color: #fff !important;
	background: transparent !important;
}

/* File-upload label shares the primary red swipe + keyboard/cursor affordances,
   and is sized like the main submit button (was 165px tall because the hidden
   file <input> below must stay absolutely positioned — its huge invisible border
   otherwise occupies layout space). */
body:not(.home) .uploader .browser { text-align: center; }
body:not(.home) .uploader .browser label {
	position: relative;
	overflow: hidden;
	z-index: 0;
	cursor: pointer;
	font-weight: 700;
	background: var(--brand-red);
	color: #fff;
	transition: color .25s ease;
	display: inline-block;
	width: auto;
	min-width: 240px;
	padding: 10px 26px;
	margin: 16px auto 0;
	line-height: 1.4;
	text-align: center;
	box-shadow: none;
}
/* Lift only the visible label text above the swipe; keep the file input absolute. */
body:not(.home) .uploader .browser label > span { position: relative; z-index: 1; }
body:not(.home) .uploader .browser label::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--brand-red-bright);
	transform: translateX(-101%);
	transition: transform .42s cubic-bezier(.4,0,.2,1);
	pointer-events: none;
}
body:not(.home) .uploader .browser label:hover::before,
body:not(.home) .uploader .browser label:focus-within::before { transform: translateX(0); }
body:not(.home) .uploader .browser label:focus-within { outline: 2px solid var(--brand-red-bright); outline-offset: 2px; }

/* Service-required select: muted grey while on the placeholder option, solid
   readable text once a real service is chosen (state class set by theme-refresh.js
   on load + change, so autofill/back-forward restore is handled). */
body:not(.home) select.g360-ph-select.is-placeholder { color: #8a929c; }

/* --------------------------------------------------------------------------
   R2.12  TEXT LINKS — centre-out underline on hover (footer + content links)
   -------------------------------------------------------------------------- */
.site-footer .widget a,
.site-footer .footer-menu a,
body.home .content .editablediv a,
body.home .featured-block-more a.basic-link {
	position: relative;
}
.site-footer .widget a:after,
.site-footer .footer-menu a:after,
body.home .content .editablediv a:after,
body.home .featured-block-more a.basic-link:after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: -2px;
	height: 1px;
	background: currentColor;
	opacity: .85;
	transition: left .28s ease, right .28s ease;
	pointer-events: none;
}
.site-footer .widget a:hover:after,
.site-footer .footer-menu a:hover:after,
body.home .content .editablediv a:hover:after,
body.home .featured-block-more a.basic-link:hover:after {
	left: 0;
	right: 0;
}

/* Inner-page CMS content inline links (pagecontent/page_*.html): keep their red
   colour and add the same centre-out underline motion as footer links. Uses the
   background-size technique (not an absolute ::after) so the underline also grows
   correctly on links that wrap across several lines. Buttons, image links and any
   btn-classed controls are excluded; accordion/nav controls live outside this
   content wrapper and are unaffected. */
body:not(.home) .apagecontentdiv a:not(.btn):not([class*="btn"]) {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 50% 100%;
	background-size: 0% 1px;
	transition: background-size .28s ease;
}
body:not(.home) .apagecontentdiv a:not(.btn):not([class*="btn"]):hover,
body:not(.home) .apagecontentdiv a:not(.btn):not([class*="btn"]):focus-visible {
	background-size: 100% 1px;
}
/* Progressive enhancement: never draw the underline under image links. */
body:not(.home) .apagecontentdiv a:has(img) { background-image: none; }

/* --------------------------------------------------------------------------
   R2 responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
	body.home .flex-caption-text h1,
	body.home .flex-caption-text h2 { font-size: 46px !important; }
	body.home #accul li.accli { height: 250px !important; }
	body.home .accli i.serviceaccordicon,
	body.home .accli:hover i.serviceaccordicon { font-size: 64px !important; }
}
@media (max-width: 767px) {
	body.home .flex-caption-text { max-width: 100%; padding: 20px 20px 22px; }
	body.home .flex-caption-text h1,
	body.home .flex-caption-text h2 { font-size: 34px !important; }
	body.home #accul li.accli { height: 210px !important; }
	body.home .accli i.serviceaccordicon,
	body.home .accli:hover i.serviceaccordicon { font-size: 52px !important; }
	body.home #accordion .accli .short p span { font-size: 15px; }
	body.home .parallax2 .cta-strip-inner { flex-direction: column; align-items: flex-start; gap: 18px; }
	body.home .parallax2 .cta-strip-inner h3 { text-align: left; }
}

/* --------------------------------------------------------------------------
   R2 reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ping { -webkit-animation: none !important; animation: none !important; }
	.btn-primary,
	body.home .btn-ghost.btn-light,
	body.home .btn-default.btn-light,
	.dd-menu .menusubpages li a,
	.site-footer .widget a:after,
	.site-footer .footer-menu a:after { transition: none !important; }
}


/* ==========================================================================
   ===  ROUND 3 REFINEMENTS  ==============================================
   ========================================================================== */

/* --------------------------------------------------------------------------
   R3.1  TOP UTILITY BAR — Get A Quote + Client Login as bold buttons
   -------------------------------------------------------------------------- */
.topbar .social-icons li { margin-left: 8px; }
.topbar .social-icons li .label {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	padding: 6px 13px;
	border-radius: 2px;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.topbar .social-icons .topbar-quote {
	background: var(--brand-red) !important;
	color: #fff !important;
	border: 1px solid var(--brand-red);
}
.topbar .social-icons .topbar-quote:hover {
	background: var(--brand-red-bright) !important;
	border-color: var(--brand-red-bright);
	color: #fff !important;
}
.topbar .social-icons .tooltipsterlogin {
	background: transparent !important;
	border: 1px solid var(--line-medium);
	color: var(--text-soft) !important;
}
.topbar .social-icons .tooltipsterlogin:hover {
	border-color: var(--brand-red);
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   R3.4  NEWS / UPDATES button — red fades to site bg after the arrow;
         "See all" white, larger, with a view icon
   -------------------------------------------------------------------------- */
body.home .notice-bar .btn-primary:before {
	background: linear-gradient(to right, var(--brand-red) 0%, rgba(193,41,41,0.55) 30%, transparent 100%) !important;
	width: 360px !important;
}
body.home .notice-bar .btn em {
	opacity: 1;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}
body.home .notice-bar .btn em:before {
	content: "\f06e"; /* fa-eye */
	font-family: FontAwesome;
	font-weight: normal;
	margin-right: 7px;
	font-size: 13px;
}

/* --------------------------------------------------------------------------
   R3.5  "A Short Introduction" eyebrow — make its rule 360G red
   -------------------------------------------------------------------------- */
body.home .subhead:before { background-color: var(--brand-red-bright) !important; }

/* --------------------------------------------------------------------------
   R3.6  Section separators — soft white instead of stark #eee
   -------------------------------------------------------------------------- */
body.home hr.fw,
body.home hr {
	background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%) !important;
	height: 1px !important;
	border: 0 !important;
}

/* ===========================================================================
   ===  INNER PAGE DARK THEME  ==============================================
   ========================================================================== */

body:not(.home) { background: var(--bg-main); color: var(--text-soft); }
body:not(.home) #main-container,
body:not(.home) #main-container > .content { background: var(--bg-main); }
body:not(.home) #main-container > .content { padding-top: 58px; }

/* Page masthead */
body:not(.home) .hero-area .page-header {
	margin: 0;
	border: 0;
	border-bottom: 1px solid rgba(224,53,58,.55);
	background-color: var(--bg-section);
	background-position: center;
	background-size: cover;
}
body:not(.home) .hero-area .page-header .herooverlay {
	background: linear-gradient(90deg, rgba(7,10,13,.95) 0%, rgba(7,10,13,.78) 48%, rgba(7,10,13,.48) 100%) !important;
}
body:not(.home) .page-header h1 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.7); }
body:not(.home) .breadcrumb { background: transparent; }
body:not(.home) .breadcrumb > li,
body:not(.home) .breadcrumb > li + li:before { color: var(--text-muted); }
body:not(.home) .breadcrumb a { color: var(--brand-red-bright); }
body:not(.home) .toplinkbit { border-color: var(--brand-red) !important; background: rgba(7,10,13,.8) !important; }

/* Main copy */
body:not(.home) .editablediv,
body:not(.home) .apagecontentdiv { color: var(--text-soft); }
body:not(.home) .editablediv h1,
body:not(.home) .editablediv h2,
body:not(.home) .editablediv h3,
body:not(.home) .editablediv h4,
body:not(.home) .editablediv h5,
body:not(.home) .apagecontentdiv h1,
body:not(.home) .apagecontentdiv h2,
body:not(.home) .apagecontentdiv h3,
body:not(.home) .apagecontentdiv h4 { color: var(--text-main); }
body:not(.home) .editablediv a,
body:not(.home) .apagecontentdiv a { color: var(--brand-red-bright); }
body:not(.home) blockquote { color: var(--text-soft); border-color: var(--line-medium); }
body:not(.home) blockquote:before { color: var(--brand-red-bright); }
body:not(.home) hr { border: 0; height: 1px; background: var(--line-soft); }
body:not(.home) .editablediv [style*="color: black"],
body:not(.home) .editablediv [style*="color:#000"],
body:not(.home) .editablediv [style*="color: #000"],
body:not(.home) .editablediv [style*="color:#333"],
body:not(.home) .editablediv [style*="color: #333"],
body:not(.home) .apagecontentdiv [style*="color: black"],
body:not(.home) .apagecontentdiv [style*="color:#000"],
body:not(.home) .apagecontentdiv [style*="color: #000"],
body:not(.home) .apagecontentdiv [style*="color:#333"],
body:not(.home) .apagecontentdiv [style*="color: #333"] { color: var(--text-soft); }
body:not(.home) .editablediv table,
body:not(.home) .apagecontentdiv table { background: var(--bg-panel); color: var(--text-soft); border-color: var(--line-soft); }
body:not(.home) .editablediv td,
body:not(.home) .editablediv th,
body:not(.home) .apagecontentdiv td,
body:not(.home) .apagecontentdiv th { border-color: var(--line-soft); color: var(--text-soft); }
body:not(.home) .editablediv th,
body:not(.home) .apagecontentdiv th { color: var(--text-main); background: var(--bg-panel-2); }

/* Sidebar navigation and quick-contact panel */
body:not(.home) .pages-sub-menu { border-top: 3px solid var(--brand-red); box-shadow: var(--shadow-panel); }
body:not(.home) .pages-sub-menu li { border-color: var(--line-soft); background: var(--bg-panel); }
body:not(.home) .pages-sub-menu li a { background: var(--bg-panel) !important; color: var(--text-soft); transition: background .25s ease, color .25s ease, padding-left .25s ease; }
body:not(.home) .pages-sub-menu li:hover a,
body:not(.home) .pages-sub-menu li.active a { background: var(--bg-panel-hover) !important; color: #fff; padding-left: 23px; }
body:not(.home) .pages-sub-menu li.active a { box-shadow: inset 3px 0 0 var(--brand-red-bright); }
body:not(.home) .pages-sub-menu i { color: var(--brand-red-bright); }
body:not(.home) .widget.fancy_block {
	background: linear-gradient(145deg, var(--bg-panel-2), var(--bg-panel));
	border: 1px solid var(--line-soft);
	box-shadow: var(--shadow-panel);
	color: var(--text-soft);
}
body:not(.home) .widget.fancy_block a { color: var(--brand-red-bright); }
body:not(.home) .widget.fancy_block i { color: var(--brand-red-bright); }

/* "Where next" cards and other inner-page panels */
body:not(.home) .fancy_block2 { min-height: 190px; transition: transform .25s ease, border-color .25s ease, background .25s ease; }
body:not(.home) a:hover .fancy_block2 { transform: translateY(-5px); border-color: rgba(224,53,58,.5); background: var(--bg-panel-hover); }
body:not(.home) .fancy_block2 h3,
body:not(.home) .fancy_block2 h4 { color: var(--text-main); }
body:not(.home) .featured-block,
body:not(.home) .panel,
body:not(.home) .accordion-group { background: var(--bg-panel); border-color: var(--line-soft); color: var(--text-soft); }

/* Shared FAQ treatment, matching the Home FAQ accordions on dark pages. */
body.home #toggleArea .accordion-group,
body:not(.home) .faq-list .accordion-group {
	background: linear-gradient(145deg, var(--bg-panel), var(--bg-panel-2));
	border: 1px solid var(--line-soft);
	border-left: 3px solid var(--brand-red);
	box-shadow: 0 18px 38px rgba(0,0,0,.24);
	margin-bottom: 12px;
	overflow: hidden;
}
body.home #toggleArea .accordion-heading,
body:not(.home) .faq-list .accordion-heading { position: relative; }
body.home #toggleArea .accordion-toggle,
body:not(.home) .faq-list .accordion-toggle {
	align-items: center;
	background: transparent;
	border: 0;
	color: var(--text-main);
	display: flex;
	gap: 14px;
	min-height: 68px;
	padding: 16px 54px 16px 22px;
	position: relative;
	text-align: left;
	text-decoration: none;
	width: 100%;
}
body.home #toggleArea .accordion-toggle:hover,
body.home #toggleArea .accordion-toggle:focus,
body:not(.home) .faq-list .accordion-toggle:hover,
body:not(.home) .faq-list .accordion-toggle:focus {
	background: rgba(255,255,255,.035);
	color: #fff;
	outline: none;
}
body:not(.home) .faq-list .accordion-toggle:focus-visible,
body.home #toggleArea .accordion-toggle:focus-visible {
	box-shadow: inset 0 0 0 2px rgba(224,53,58,.75);
}
/* Hide the question-row question-mark circle on BOTH implementations so each
   closed question is simply: red left border + question text + plus/minus. This
   removes the faded 60px watermark sitting behind the Home question text (its
   inline style otherwise wins, so !important is required) and the faint offset
   mark on the standalone page, giving the two a single shared presentation. */
body.home #toggleArea .faqicondiv,
body:not(.home) .faq-list .faq-mark {
	display: none !important;
}
body.home #toggleArea .accordion-toggle h4,
body:not(.home) .faq-list .faqquestion {
	color: var(--text-main);
	flex: 1 1 auto;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
}
body.home #toggleArea .accordion-toggle > .fa-plus-circle,
body.home #toggleArea .accordion-toggle > .fa-minus-circle,
body:not(.home) .faq-list .accordion-toggle > .fa-plus-circle,
body:not(.home) .faq-list .accordion-toggle > .fa-minus-circle {
	color: var(--brand-red-bright);
	font-size: 21px;
	position: absolute;
	right: 22px;
	top: 50%;
	transform: translateY(-50%);
}
/* Both accordions are keyed off aria-expanded. The HOME rows never receive the
   `.collapsed` class at all, so the old `:not(.collapsed)` form matched every
   row and showed the minus on closed questions (the fault fixed in 84088a8). */
body.home #toggleArea .accordion-toggle[aria-expanded="true"] > .fa-plus-circle,
body.home #toggleArea .accordion-toggle[aria-expanded="false"] > .fa-minus-circle,
body:not(.home) .faq-list .accordion-toggle[aria-expanded="true"] > .fa-plus-circle,
body:not(.home) .faq-list .accordion-toggle[aria-expanded="false"] > .fa-minus-circle { display: none; }
body.home #toggleArea .accordion-inner,
body:not(.home) .faq-list .accordion-inner {
	background: rgba(7,10,13,.45);
	border-top: 1px solid var(--line-soft);
	color: var(--text-soft);
	line-height: 1.75;
	padding: 20px 24px 22px 84px;
}
body.home #toggleArea blockquote,
body:not(.home) .faq-list blockquote,
body:not(.home) .faq-list .accordion-inner p {
	color: var(--text-soft);
}
@media (max-width: 600px) {
	body.home #toggleArea .accordion-toggle,
	body:not(.home) .faq-list .accordion-toggle { min-height: 62px; padding-left: 16px; }
	body.home #toggleArea .faqicondiv,
	body:not(.home) .faq-list .faq-mark { flex-basis: 32px; font-size: 32px; }
	body.home #toggleArea .accordion-inner,
	body:not(.home) .faq-list .accordion-inner { padding: 18px; }
}

/* Standalone FAQ answer gains the same quote icon + vertical rule the Home
   answer gets from its <blockquote> — one shared presentation, CSS-only so the
   editable .faqanswer content is never re-wrapped/double-saved. */
body:not(.home) .faq-list .accordion-inner.faqanswer { position: relative; }
body:not(.home) .faq-list .accordion-inner.faqanswer::before {
	content: "\f10d";
	font-family: FontAwesome;
	font-size: 40px;
	line-height: 1;
	color: var(--brand-red-bright);
	opacity: .55;
	position: absolute;
	left: 26px;
	top: 18px;
	pointer-events: none;
}
body:not(.home) .faq-list .accordion-inner.faqanswer::after {
	content: "";
	position: absolute;
	left: 64px;
	top: 20px;
	bottom: 20px;
	width: 2px;
	background: rgba(255,255,255,.26);
}
@media (max-width: 600px) {
	body:not(.home) .faq-list .accordion-inner.faqanswer::before { left: 14px; font-size: 30px; }
	body:not(.home) .faq-list .accordion-inner.faqanswer::after { display: none; }
}

/* Open FAQ (Home + standalone): red-tinted active header with a white,
   clearly-visible minus icon (was too-dark red). Closed plus stays red-bright.
   The base accordion toggles +/- via a legacy .active class that Bootstrap
   collapse never sets, so the minus stayed display:none when open — we drive its
   visibility from the Bootstrap state (aria-expanded) here. */
body.home #toggleArea .accordion-toggle[aria-expanded="true"],
body:not(.home) .faq-list .accordion-toggle[aria-expanded="true"] {
	background: linear-gradient(90deg, rgba(193,41,41,.26), rgba(193,41,41,.04)) !important;
}
body.home #toggleArea .accordion-toggle[aria-expanded="true"] > .fa-minus-circle,
body:not(.home) .faq-list .accordion-toggle[aria-expanded="true"] > .fa-minus-circle {
	display: block !important;
	visibility: visible !important;
	color: #fff !important;
}
/* ...and hide the plus once open (base only hides it on .active). */
body.home #toggleArea .accordion-toggle[aria-expanded="true"] > .fa-plus-circle,
body:not(.home) .faq-list .accordion-toggle[aria-expanded="true"] > .fa-plus-circle {
	display: none !important;
}

/* Forms, quote uploader and data tables */
body:not(.home) .shadow-block.contact-info-block,
body:not(.home) .quoteblock { background: rgba(11,15,19,.94); border: 1px solid var(--line-medium); box-shadow: 0 24px 60px rgba(0,0,0,.5); }
body:not(.home) .contact-info-block h1,
body:not(.home) .contact-info-block h2,
body:not(.home) .contact-info-block h3,
body:not(.home) .contact-info-block h4,
body:not(.home) .contact-info-block label { color: var(--text-main); }
body:not(.home) .form-control {
	background: var(--bg-panel-2);
	border-color: var(--line-medium);
	color: var(--text-main);
	box-shadow: none;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
body:not(.home) .form-control:focus { background: #182129; border-color: var(--brand-red-bright); box-shadow: 0 0 0 3px rgba(224,53,58,.12); }
body:not(.home) .form-control::placeholder { color: var(--text-muted); }
body:not(.home) select.form-control option { background: var(--bg-panel); color: var(--text-main); }
body:not(.home) .uploader { background: var(--bg-panel); border: 2px dashed var(--line-medium); color: var(--text-soft); }
body:not(.home) .uploader:hover { border-color: var(--brand-red); background: var(--bg-panel-hover); }
body:not(.home) .uploader .browser label { background: var(--brand-red); color: #fff; }
body:not(.home) .table { color: var(--text-soft); background: var(--bg-panel); }
body:not(.home) .table > thead > tr > th,
body:not(.home) .table > tbody > tr > td { border-color: var(--line-soft); }
body:not(.home) .table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255,255,255,.025); }

/* Reuse the smooth two-way button sweep on inner pages */
body:not(.home) .btn-primary { color: #fff !important; border-color: var(--brand-red) !important; background: var(--brand-red) !important; }
body:not(.home) .btn-primary:hover,
body:not(.home) .btn-primary:focus { color: #fff !important; border-color: var(--brand-red-bright) !important; }

/* Bottom call-to-action strip */
body:not(.home) .accent-bg.bottommessage,
body:not(.home) #main-container > .content > .accent-bg {
	background: linear-gradient(100deg, var(--brand-red-dark), var(--brand-red) 55%, #7d181c) !important;
	border-top: 1px solid rgba(255,255,255,.12);
}
body:not(.home) .bottommessage,
body:not(.home) .bottommessage h1,
body:not(.home) .bottommessage h2,
body:not(.home) .bottommessage h3,
body:not(.home) .bottommessage h4,
body:not(.home) .bottommessage p,
body:not(.home) .bottommessage a { color: #fff; }

/* --------------------------------------------------------------------------
   Inner-page supporting / SEO copy — editorial callout aligned to the content
   column (see the site_aicontent block in showpage.php). Replaces the old
   full-width centred paragraph with a restrained left-ruled quotation.
   -------------------------------------------------------------------------- */
body:not(.home) .page-supporting-callout {
	position: relative;
	margin: 46px 0 0;
	padding: 6px 0 6px 26px;
	max-width: 760px;
	border-left: 3px solid var(--brand-red);
	color: var(--text-soft);
	font-size: 17px;
	font-style: italic;
	line-height: 1.75;
}
body:not(.home) .page-supporting-callout::before {
	content: "\f10d";
	font-family: FontAwesome;
	font-style: normal;
	font-size: 22px;
	line-height: 1;
	color: var(--brand-red);
	opacity: .6;
	display: block;
	margin-bottom: 10px;
}
body:not(.home) .page-supporting-callout p { margin: 0 0 10px; }
body:not(.home) .page-supporting-callout p:last-child { margin-bottom: 0; }
body:not(.home) .page-supporting-callout h1,
body:not(.home) .page-supporting-callout h2,
body:not(.home) .page-supporting-callout h3,
body:not(.home) .page-supporting-callout h4 { font-style: normal; color: var(--text-main); }
@media (max-width: 767px) {
	body:not(.home) .page-supporting-callout { margin-top: 30px; padding-left: 18px; font-size: 16px; }
}

@media (max-width: 991px) {
	body:not(.home) #main-container > .content { padding-top: 40px; }
	body:not(.home) .left-sidebar { margin-top: 10px; }
}
@media (max-width: 767px) {
	body:not(.home) .hero-area .page-header .herooverlay { background: rgba(7,10,13,.82) !important; }
	body:not(.home) .contact-info-block.quoteblock .col-md-12[style] { padding: 25px 20px !important; }
}

/* Curated Planning, Property & Project News */
.g360-news-main { background: var(--bg-main); color: var(--text-soft); }
.g360-news-main .content { padding: 62px 0 76px; }
.g360-news-intro { max-width: 820px; margin: 0 0 30px; }
.g360-news-kicker,
.g360-news-source,
.g360-news-meta { color: var(--text-muted); font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.g360-news-kicker { color: var(--brand-red-bright); margin-bottom: 8px; }
.g360-news-intro h2,
.g360-article h2,
.g360-news-empty h2,
.g360-news-empty h3 { color: #fff; }
.g360-news-intro p { color: var(--text-muted); font-size: 17px; line-height: 1.8; }
.g360-news-intro a,
.g360-article a { color: var(--brand-red-bright); }
.g360-topic-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 34px; }
.g360-topic-filter a,
.g360-pagination a,
.g360-pagination span {
	align-items: center;
	border: 1px solid var(--line-soft);
	border-radius: 3px;
	color: var(--text-soft);
	display: inline-flex;
	min-height: 42px;
	padding: 10px 14px;
	transition: all .2s ease;
}
.g360-topic-filter a:hover,
.g360-topic-filter a:focus,
.g360-topic-filter a.is-active,
.g360-pagination a:hover,
.g360-pagination a:focus { background: var(--brand-red); border-color: var(--brand-red); color: #fff; outline: none; text-decoration: none; }
.g360-news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.g360-news-card,
.g360-source-card,
.g360-news-empty,
.g360-why,
.g360-related-services {
	background: linear-gradient(145deg, rgba(16,22,28,.98), rgba(8,11,15,.98));
	border: 1px solid var(--line-soft);
	box-shadow: 0 22px 45px rgba(0,0,0,.28);
}
.g360-news-card { display: flex; flex-direction: column; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.g360-news-card:hover,
.g360-news-card:focus-within { border-color: rgba(193,41,41,.55); box-shadow: 0 26px 52px rgba(0,0,0,.4); transform: translateY(-3px); }
.g360-news-card-media { aspect-ratio: 16 / 9; display: block; overflow: hidden; position: relative; }
.g360-news-card-media--photo { background: #0c1116; }
/* Topic-art fallback (no story image): fill the 16:9 media box rather than the
   full-height panel the old horizontal card used. */
.g360-news-card-media.g360-topic-art { aspect-ratio: 16 / 9; min-height: 0; }
.g360-news-card-media--photo img { display: block; height: 100%; object-fit: cover; transition: transform .3s ease; width: 100%; }
.g360-news-card:hover .g360-news-card-media--photo img { transform: scale(1.04); }
.g360-news-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px 22px 22px; }
.g360-news-card-head { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 12px; }
.g360-news-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.g360-news-card-head .g360-news-meta { margin: 0; }
.g360-news-meta span,
.g360-news-meta time { position: relative; }
.g360-news-meta > span + span:before,
.g360-news-meta > time + span:before { color: var(--brand-red-bright); content: "/"; margin-right: 12px; }
.g360-news-type { color: #fff !important; }
.g360-news-type--external { color: var(--brand-red-bright) !important; }
.g360-news-logo { align-items: center; background: #f4f5f6; border-radius: 4px; display: inline-flex; flex: 0 0 auto; justify-content: center; max-height: 40px; max-width: 96px; padding: 5px 8px; }
.g360-news-logo img { display: block; max-height: 28px; max-width: 82px; object-fit: contain; width: auto; }
.g360-news-logo--lg { max-height: 52px; max-width: 130px; padding: 8px 12px; }
.g360-news-logo--lg img { max-height: 34px; max-width: 108px; }
.g360-news-card h3 { font-size: 20px; line-height: 1.35; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.g360-news-card h3 a { color: #fff; }
.g360-news-card h3 a:hover,
.g360-news-card h3 a:focus { color: var(--brand-red-bright); text-decoration: none; }
.g360-news-card p { color: var(--text-muted); font-size: 15px; line-height: 1.65; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.g360-article p { color: var(--text-muted); font-size: 16px; line-height: 1.75; }
.g360-news-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.g360-news-tag {
	background: rgba(193,41,41,.12);
	border: 1px solid rgba(193,41,41,.4);
	border-radius: 100px;
	color: #f0c3c3;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	padding: 5px 11px;
}
a.g360-news-tag:hover,
a.g360-news-tag:focus { background: var(--brand-red); border-color: var(--brand-red); color: #fff; text-decoration: none; }
.g360-news-tag--more { background: rgba(255,255,255,.05); border-color: var(--line-soft); color: var(--text-muted); }
.g360-news-card-foot { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; margin-top: auto; padding-top: 4px; }
.g360-news-read,
.g360-news-original { align-items: center; display: inline-flex; font-size: 13px; font-weight: 700; gap: 7px; letter-spacing: .5px; text-transform: uppercase; }
.g360-news-read { color: var(--brand-red-bright); }
.g360-news-original { color: var(--text-muted); }
.g360-news-original:hover,
.g360-news-original:focus { color: #fff; }
.g360-topic-art {
	align-items: flex-end;
	aspect-ratio: 16 / 10;
	background-color: #10151b;
	background-image: linear-gradient(135deg, rgba(193,41,41,.72), rgba(193,41,41,0) 42%), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-position: center;
	background-size: auto, 28px 28px, 28px 28px;
	color: #fff;
	display: flex;
	min-height: 100%;
	overflow: hidden;
	padding: 20px;
	position: relative;
	text-decoration: none;
}
.g360-topic-art:before {
	border: 1px solid rgba(255,255,255,.22);
	content: "";
	height: 58%;
	position: absolute;
	right: 20px;
	top: 18px;
	transform: skewX(-13deg);
	width: 46%;
}
.g360-topic-art span {
	background: rgba(0,0,0,.52);
	border-left: 3px solid var(--brand-red-bright);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 1px;
	padding: 8px 10px;
	position: relative;
	text-transform: uppercase;
	z-index: 1;
}
.g360-topic-new-developments { background-color: #121719; }
.g360-topic-infrastructure-utilities { background-color: #111821; }
.g360-topic-flooding-drainage-environment { background-color: #0f1a1b; }
.g360-topic-property-development-land { background-color: #171615; }
.g360-topic-self-build-renovation { background-color: #171319; }
.g360-pagination { display: flex; gap: 12px; justify-content: center; margin-top: 34px; }
.g360-pagination span { background: rgba(255,255,255,.04); color: var(--text-muted); }
.g360-news-empty { padding: 38px; text-align: center; }
.g360-article-head { margin-bottom: 28px; }
.g360-article-headrow { align-items: flex-start; display: flex; gap: 18px; justify-content: space-between; }
.g360-article-headrow .g360-news-meta { margin: 0; }
.g360-article-visual { aspect-ratio: 21 / 7; margin-top: 18px; min-height: 220px; }
.g360-article-lead { margin: 20px 0 0; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 4px; }
.g360-article-lead img { display: block; width: 100%; max-height: 460px; object-fit: cover; }
.g360-article-share { margin-top: 16px; }
.g360-copy-link {
	align-items: center;
	background: rgba(255,255,255,.04);
	border: 1px solid var(--line-soft);
	border-radius: 3px;
	color: var(--text-soft);
	cursor: pointer;
	display: inline-flex;
	font-size: 13px;
	font-weight: 700;
	gap: 8px;
	letter-spacing: .5px;
	padding: 9px 15px;
	text-transform: uppercase;
	transition: all .2s ease;
}
.g360-copy-link:hover,
.g360-copy-link:focus { background: var(--brand-red); border-color: var(--brand-red); color: #fff; outline: none; }
.g360-copy-link.is-copied { background: rgba(193,41,41,.18); border-color: var(--brand-red); color: #fff; }
.g360-article-layout { align-items: start; display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) 330px; }
.g360-article-body section,
.g360-source-card { padding: 30px; }
.g360-article-body section + section { margin-top: 24px; }
.g360-why { border-left: 4px solid var(--brand-red); }
.g360-article-facts { border: 1px solid var(--line-soft); background: rgba(255,255,255,.02); }
.g360-article-facts .g360-news-tags { margin-bottom: 0; }
.g360-article-facts .g360-news-tags + .g360-fact-row { margin-top: 16px; }
.g360-fact-row { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.g360-article-facts .g360-news-tags + .g360-fact-row { border-top: 0; }
.g360-fact-row + .g360-fact-row { border-top: 1px solid var(--line-soft); }
.g360-fact-label { color: var(--brand-red-bright); font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; min-width: 120px; }
.g360-fact-values { color: var(--text-soft); font-size: 15px; }
.g360-service-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; }
.g360-service-card {
	align-items: flex-start;
	background: rgba(255,255,255,.03);
	border: 1px solid var(--line-soft);
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: space-between;
	min-height: 108px;
	padding: 18px;
	transition: all .18s ease;
}
.g360-service-card:hover,
.g360-service-card:focus { background: rgba(193,41,41,.1); border-color: rgba(193,41,41,.55); text-decoration: none; transform: translateY(-2px); }
.g360-service-name { color: #fff; font-size: 16px; font-weight: 700; line-height: 1.35; }
.g360-service-go { align-items: center; color: var(--brand-red-bright); display: inline-flex; font-size: 12px; font-weight: 800; gap: 7px; letter-spacing: 1px; text-transform: uppercase; }
.g360-source-card { position: sticky; top: 120px; }
.g360-source-card .g360-news-logo { margin-bottom: 16px; }
.g360-source-card .btn { display: block; margin: 18px 0 16px; text-align: center; }
.g360-back-link { align-items: center; display: inline-flex; font-weight: 700; gap: 8px; }
.g360-notice-project-link {
	color: #fff;
	display: block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1px;
	margin-top: 8px;
	text-align: center;
	text-transform: uppercase;
}
.g360-notice-project-link:hover,
.g360-notice-project-link:focus { color: #fff; text-decoration: underline; }
/* Authenticated corner controls: quarter-circles stay flush to the viewport and
   expand inward because their outer corner remains fixed. */
#adminbutton,
#adminbutton2 {
	background-color: #c12929;
	background-image: none;
	border: 2px solid rgba(255,255,255,.45);
	bottom: 0;
	box-shadow: 0 6px 20px rgba(0,0,0,.35);
	height: 100px;
	overflow: hidden;
	position: fixed;
	top: auto;
	width: 100px;
	z-index: 9999;
}
#adminbutton {
	border-bottom: 0;
	border-left: 0;
	border-radius: 0 100% 0 0;
	left: 0;
	right: auto;
}
#adminbutton2 {
	border-bottom: 0;
	border-radius: 100% 0 0 0;
	border-right: 0;
	left: auto;
	right: 0;
}
#adminbutton a,
#adminbutton2 a {
	align-items: center;
	color: #fff;
	display: flex;
	font-size: 13px;
	font-weight: 900;
	height: 100%;
	justify-content: center;
	letter-spacing: 1px;
	text-decoration: none;
	width: 100%;
}
#adminbutton a { padding: 20px 20px 0 0; }
#adminbutton2 a { padding: 20px 0 0 20px; }
#adminbutton a:focus-visible,
#adminbutton2 a:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
@media (max-width: 767px) {
	#adminbutton,
	#adminbutton2 { display: none; }
}
@media (max-width: 991px) {
	.g360-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.g360-article-layout { display: block; }
	.g360-source-card { margin-top: 24px; position: static; }
	.g360-article-visual { aspect-ratio: 16 / 9; min-height: 0; width: 100%; }
}
@media (max-width: 600px) {
	.g360-news-main .content { padding: 42px 0 58px; }
	.g360-topic-filter a { width: 100%; }
	.g360-news-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.g360-service-grid { grid-template-columns: minmax(0, 1fr); }
	.g360-article-body section,
	.g360-source-card,
	.g360-news-empty { padding: 22px; }
	.g360-news-card h3 { font-size: 19px; }
	.g360-article-headrow { flex-direction: column; gap: 14px; }
	.g360-pagination { align-items: stretch; flex-direction: column; }
}

/* --------------------------------------------------------------------------
   Responsive nav breakpoint: engage the compact/mobile header at <=1200px so
   the desktop menu never wraps to a second row at intermediate widths (logo +
   labels + ICES logo + contact details stop fitting well before the old 991px
   switch). No !important on .main-navigation so the burger's slideDown can still
   reveal it; custom2.js uses the matching 1200px threshold on resize.
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
	.header-style3 #menu-toggle { display: block; }
	.header-style3 .main-navigation { display: none; }
	/* #info-content carries an inline display:flex, so !important is required to
	   fold it away (matching how the theme hides it at its own <=991 breakpoint). */
	.header-style3 #info-content { display: none !important; }
}

/* --------------------------------------------------------------------------
   Mobile home-hero contrast: the survey image sits too bright behind the intro
   text on small screens. Lay a strong near-black gradient across the caption
   (heavier on the text side, fading toward the image edge) and let the intro
   copy span the full width with a subtle shadow. Desktop is unchanged.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	body.home .hero-slider .flex-caption { position: relative; }
	body.home .hero-slider .flex-caption::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(100deg, rgba(6,9,12,.92) 0%, rgba(6,9,12,.86) 45%, rgba(6,9,12,.55) 72%, rgba(6,9,12,.12) 100%);
	}
	body.home .hero-slider .flex-caption-table,
	body.home .hero-slider .flex-caption-cell { position: relative; z-index: 2; }
	body.home .hero-slider .flex-caption-text {
		width: 100% !important;
		max-width: 100%;
		text-shadow: 0 1px 3px rgba(0,0,0,.65);
	}
}

/* --------------------------------------------------------------------------
   Mobile service-card links: the base CSS sets `.servicelinkbox { pointer-events:
   none !important }` (a desktop hover-accordion affordance), which leaves the
   whole card untappable on touch devices — taps fall through to the <li>. Re-enable
   the wrapping anchor on touch / narrow viewports so the entire visible card is one
   reliable link. Desktop hover behaviour is unchanged.
   -------------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse), (max-width: 991px) {
	#accordion .accli .servicelinkbox,
	.accli .servicelinkbox {
		pointer-events: auto !important;
		cursor: pointer !important;
	}
}

/* CMS editing stays visually close to the live dark page without changing the
   Froala toolbar's own affordances. The old broad content-list rules were
   reaching into popup <ul>/<li> menus, so the reset lives inside Froala only. */
.fr-box.fr-basic .fr-wrapper,
.fr-box.fr-basic .fr-element {
	background: #0b0f13;
	border-color: rgba(232,234,237,.34);
	color: #e8eaed;
}
.fr-box.fr-basic .fr-wrapper { border: 1px solid rgba(232,234,237,.34); box-shadow: none; }
.fr-box.fr-basic .fr-element { min-height: 120px; }
.fr-box.fr-basic .fr-element:focus { box-shadow: inset 0 0 0 1px #e0353a; }
.fr-box .fr-element a { color: #e94b50; }
.fr-box .fr-element h1,
.fr-box .fr-element h2,
.fr-box .fr-element h3,
.fr-box .fr-element h4,
.fr-box .fr-element h5,
.fr-box .fr-element h6 { color: #fff; }
.fr-box .fr-element blockquote { border-color: #e0353a; color: #c9d0d7; }
.fr-box .fr-element table td,
.fr-box .fr-element table th { border-color: #52606d; }
.fr-popup,
.fr-toolbar { color: #1c242d; }
.fr-popup .fr-dropdown-menu,
.fr-popup .fr-dropdown-menu ul,
.fr-popup ul.fr-dropdown-list,
.fr-toolbar .fr-dropdown-menu ul {
	list-style: none;
	margin: 0;
	padding: 4px 0;
}
.fr-popup .fr-dropdown-menu li,
.fr-popup .fr-dropdown-menu li a,
.fr-toolbar .fr-dropdown-menu li,
.fr-toolbar .fr-dropdown-menu li a {
	background: transparent;
	line-height: 1.35;
	margin: 0;
	min-height: 0;
	padding: 7px 12px;
	text-indent: 0;
}
.fr-popup .fr-dropdown-menu li:before,
.fr-toolbar .fr-dropdown-menu li:before { content: none; }
.fr-popup .fr-command:hover,
.fr-popup .fr-command:focus,
.fr-popup .fr-command.fr-active { background: #f0f2f4; color: #c12929; }

/* jQuery Confirm drives the remaining admin/client dialogs. Keep the rules
   scoped to its generated shell so ordinary content panels are untouched. */
.jquery_prompt.plugin .jquery_prompt_box,
.jquery_prompt.plugin .content,
.jquery_prompt.plugin .footer { background: #161c22; color: #e8eaed; }
.jquery_prompt.plugin .header { background: #11171d; border-bottom: 1px solid #3a4551; color: #f4f6f8; }
.jquery_prompt.plugin .footer { border-top: 1px solid #3a4551; }
.jquery_prompt.plugin input.form-control,
.jquery_prompt.plugin select.form-control,
.jquery_prompt.plugin textarea.form-control { background: #11171d; border-color: #3a4551; color: #e8eaed; }
.jquery_prompt.plugin .alertboxerror { background: #3a191b; border: 1px solid #87393d; color: #ffd6d7; padding: 8px; }
.jquery_prompt.plugin .footer button { transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
.jquery_prompt.plugin .footer button:hover,
.jquery_prompt.plugin .footer button:focus { transform: translateY(-1px); }

/* jquery.prompt builds a single form with the message and footer as direct
   children. Theme that real structure centrally so alert, confirm and form
   prompts never fall back to the plugin's light panel. */
.jquery_prompt.plugin { background: rgba(0, 0, 0, .68); color: #e8eaed; }
.jquery_prompt.plugin form {
	background: #161c22;
	border: 1px solid #46525f;
	border-radius: 6px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .75);
	color: #e8eaed;
	min-width: min(460px, calc(100vw - 28px));
	max-width: min(760px, calc(100vw - 28px));
	overflow: hidden;
	padding: 0;
}
.jquery_prompt.plugin form > :first-child {
	background: #161c22;
	color: #f4f6f8;
	margin: 0;
	padding: 20px;
}
.jquery_prompt.plugin form > .alertboxerror:first-child {
	background: #3a191b;
	border: 0;
	border-bottom: 1px solid #87393d;
	color: #ffd6d7;
}
.jquery_prompt.plugin form label { color: #d7dde4; }
.jquery_prompt.plugin form input.form-control,
.jquery_prompt.plugin form select.form-control,
.jquery_prompt.plugin form textarea.form-control {
	background: #11171d;
	border: 1px solid #46525f;
	color: #e8eaed;
}
.jquery_prompt.plugin form input.form-control:focus,
.jquery_prompt.plugin form select.form-control:focus,
.jquery_prompt.plugin form textarea.form-control:focus {
	border-color: #e0353a;
	box-shadow: 0 0 0 2px rgba(224, 53, 58, .2);
}
.jquery_prompt.plugin form .footer {
	display: flex;
	justify-content: center;
	gap: 10px;
	background: #11171d;
	border-top: 1px solid #3a4551;
	padding: 14px 20px 18px;
}
.jquery_prompt.plugin form .footer br,
.jquery_prompt.plugin form .footer > input[type="text"],
.jquery_prompt.plugin form .footer > input[type="checkbox"],
.jquery_prompt.plugin form .footer > label { display: none !important; }
.jquery_prompt.plugin form .footer button {
	border: 1px solid transparent;
	color: #fff;
	min-height: 34px;
	padding: 7px 20px;
}
.jquery_prompt.plugin form .footer .btn-success { background: #5abb5d; border-color: #70ce73; }
.jquery_prompt.plugin form .footer .btn-danger { background: #c94b50; border-color: #e35b60; }
.jquery_prompt.plugin form .footer button:focus-visible { outline: 2px solid #8ecbff; outline-offset: 2px; }
@media (max-width: 767px) {
	.jquery_prompt.plugin form { min-width: calc(100vw - 24px); max-width: calc(100vw - 24px); }
}
.portal-admin-top-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 20px;
}
.portal-admin-bottom-actions {
	border-top: 1px solid rgba(232, 234, 237, .18);
	margin-top: 30px;
	padding-top: 24px;
	text-align: center;
}
@media (max-width: 767px) {
	.portal-admin-top-actions { justify-content: flex-start; }
	.portal-admin-top-actions .btn { flex: 1 1 auto; }
}