/*
Theme Name: Beamglow
Author: AllDesignOnline
Description: Bespoke Theme for Beamglow
Version: 1.0
*/

/* ==========================================================================
   TABLE OF CONTENTS

   1.  Reset & Base Styles
   2.  Typography
   3.  Layout & Containers
   4.  Navigation
   5.  Breadcrumbs & Post Meta
   6.  Content Lists
   7.  Buttons & Links
   8.  Images & Media Alignment
   9.  Home Page — Hero Slider
   10. Home Page — News Section
   11. Home Page — Project Slider
   12. Home Page — Scrolling Text Banner
   13. Home Page — Capabilities Section
   14. Home Page — Lux Background Blobs
   15. Custom Page Header (Hero Banner)
   16. Staff Grid (Key Staff Page)
   17. Sustainability Background
   18. FAQs Page
   19. Contact Form 7
   20. 404 Page
   21. Search Results & Pagination (shared with Archive pages)
   22. Footer
   23. Responsive / Media Queries
   ========================================================================== */


/* ==========================================================================
   1. RESET & BASE STYLES
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.6;
    background-color: #FFFFFF;
    color: #111717;
	font-size: 16px;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
}


/* ==========================================================================
   2. TYPOGRAPHY
   ========================================================================== */

h1 {
    font-weight: 700;
    font-style: normal;
    font-size: clamp(32px, 4vw + 1rem, 80px);
    margin-bottom: 20px;
}



h1::after {
  content: "";
  display: block;
  width: 120px;
  height: 3px;
  background-color: #6cc7e0;
  margin-top: 0px;
    margin-bottom: 20px;
}

h2 {
    font-weight: 700;
    font-style: normal;
    font-size: clamp(26px, 3vw + 0.8rem, 52px);
    margin-bottom: 20px;
}

h2::after {
  content: "";
  display: block;
  width: 120px;
  height: 3px;
  background-color: #6cc7e0;
  margin-top: 0px;
    margin-bottom: 20px;
}

h2.white-after-title-line::after {
  content: "";
  display: block;
  width: 120px;
  height: 3px;
  background-color: #FFFFFF;
  margin-top: 0px;
    margin-bottom: 20px;
}

h3 {
    font-weight: 700;
	font-style: normal;
	font-size: 2.25em;
    margin-bottom: 20px; /* Adds spacing below the title */
}

h4 {
    font-weight: 700;
	font-style: normal;
	font-size: 1.85em;
    margin-bottom: 20px; /* Adds spacing below the title */
}

h5 {
    font-weight: 700;
	font-style: normal;
	font-size: 1.25em;
    margin-bottom: 20px; /* Adds spacing below the title */
}

p {
	padding-bottom: 25px;
}

a {
	color: #6cc7e0;
}

.footer-header {
	font-size: 2.85em;
	color: #FFFFFF;
    font-weight: 700;
}

.footer-header::after {
  content: "";
  display: block;
  width: 120px;
  height: 3px;
  background-color: #6cc7e0;
  margin-top: 12px;
    margin-bottom: 20px;
}

.sub-heading-main {
	font-family: "Cormorant Upright", serif;
	font-size: clamp(24px, 5vw, 36px);
	font-weight: 400;
	font-style: normal;
	text-transform: uppercase;
}

.sub-heading-general {
	font-family: "Cormorant Upright", serif;
	font-size: clamp(24px, 4vw, 30px);
	font-weight: 400;
	font-style: normal;
	text-transform: uppercase;
}

/* ONLY ONE TRUE LEAD BLOCK PER PAGE */
body:not(.home):not(.front-page) .intro-para p:first-of-type {
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.45;
  margin-top: 0;
}

body:not(.home):not(.front-page) .intro-para p:first-of-type::first-letter {
  font-family: "Cormorant Upright", serif;
  color: #6cc7e0;
  font-size: 1.85em;
  font-weight: 700;
	line-height: 0.45;
}


/* ==========================================================================
   3. LAYOUT & CONTAINERS
   ========================================================================== */

/* Main content container */
main {
  display: flex;
  justify-content: center;
}

main .container {
    width: 100%;
    max-width: 1685px;  /* Max width for main content */
    margin: 0 auto;     /* Center the content */
    padding-left: 15px;
    padding-right: 15px;
	padding-top: 80px;
	padding-bottom: 160px;
    box-sizing: border-box;
}

body.home main .container {
	padding-top: 0 !important;
}

.row-inner-custom-width {
    width: 100%;
    max-width: 1685px !important;  /* Max width for main content */
    margin: 0 auto;     /* Center the content */
    padding-left: 27.5px;
    padding-right:27.5px;
    box-sizing: border-box;
}

/* Centered rows for WPBakery */
.vc_row.wpb_row:not(.vc_row-no-padding):not(.vc_row-stretch) {
    width: 100%;
    max-width: 1985px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Full-width rows – allow full width */
.vc_row.vc_row-stretch {
    width: 100%;
    max-width: 100%;   /* Full width */
    padding-left: 0;
    padding-right: 0;
}

.row-spacing-general-top {
	margin-top: 8vh;
}

.row-spacing-general-bottom {
	margin-bottom: 8vh;
}




/* ==========================================================================
   4. NAVIGATION
   ========================================================================== */

/* NAVBAR RESET (CRITICAL FIX) */
.gm-navbar-nav,
.gm-navbar-nav ul,
.gm-dropdown-menu,
.gm-dropdown-menu ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.gm-navbar-nav li::before,
.gm-dropdown-menu li::before {
  content: none !important;
}

.menu-strapline {
	width: 100%;
	font-size: 0.82em;
	font-weight: 300;
	text-transform: uppercase;
	text-align: center;
	margin-top: auto;
	margin-bottom: 20px;
}

.gm-container {
    margin-left: 35px !important;
    margin-right: 35px !important;
}

.gm-navbar .gm-menu-btn.hamburger {
	align-self: flex-end;
	margin-top: auto !important;
	margin-bottom: 20px !important;
}

.hamburger-box {
	width: 48px !important;
	height: 48px !important;
	border: 2px solid #6cc7e0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.hamburger-inner {
	top: 12px !important;
	margin-top: 0px !important;
}

.gm-navbar-sticky-toggle .gm-menu-btn.hamburger {
	margin-bottom: 10px !important;
}


/* ==========================================================================
   5. BREADCRUMBS & POST META
   ========================================================================== */

.breadcrumb {
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 25px;
	padding: 10px 0;
	font-size: 0.75em;
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #999;
	border-bottom: 1px solid #eaeaea;
}

.breadcrumb a {
	font-weight: 500;
	color: #555;
	text-decoration: none;
	transition: color 0.2s ease;
}

.breadcrumb a:hover {
	color: #6cc7e0;
}

.breadcrumb span {
	color: #6cc7e0;
	font-weight: 500;
}

.post-date {
	margin-bottom: 45px;
	margin-left: 15px;
}

.post-date p {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 0.8em;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #999;
}

.post-date p::before {
	content: "\f133";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	line-height: 1;
	color: #6cc7e0;
	font-size: 1.1em;
}


/* ==========================================================================
   6. CONTENT LISTS
   ========================================================================== */

/* =========================
   BASE TYPOGRAPHY (SAFE GLOBAL)
   → applies to FAQs + general UI
========================= */
.container:not(.home):not(.front-page) p {
  color: #111717;
  line-height: 1.6;
}

/* GLOBAL LISTS (FIXS FAQ ISSUE) */
.container:not(.home):not(.front-page) ul {
  list-style: none;
  padding-left: 0;
}

.container:not(.home):not(.front-page) ul li {
  position: relative;
  padding-left: 20px;
  line-height: 1.6;
}

.container:not(.home):not(.front-page) ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  background: #6cc7e0;
  border-radius: 50%;
}

/* =========================
   CONTENT LISTS ONLY (SAFE)
========================= */
.container:not(.home):not(.front-page) .wpb_text_column ul {
  list-style: none;
  padding-left: 0;
  margin: 1.2em 0;
}

.container:not(.home):not(.front-page) .wpb_text_column ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

.container:not(.home):not(.front-page) .wpb_text_column ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  background: #6cc7e0;
  border-radius: 50%;
}


/* ==========================================================================
   7. BUTTONS & LINKS
   ========================================================================== */

.vc_btn3-container button {
	color: #111717 !important;
	font-weight: 600;
}

.beamglow-button a {
	color: #111717 !important;
	font-weight: 600 !important;
}

/* Latest Updates — Load More button (WPBakery grid button override) */
#load-more-news .vc_general.vc_btn3,
.vc_grid-btn-load_more .vc_general.vc_btn3 {
  display: inline-block;
  background: #fff !important;
  text-transform: uppercase;
  color: #000 !important;
  border: 2px solid #6cc7e0 !important;
  padding: 14px 28px !important;
  border-radius: 999px !important;
  font-weight: 600;
  font-size: 15px;
  font-family: "Montserrat", sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: none !important;
}

#load-more-news .vc_general.vc_btn3:hover,
.vc_grid-btn-load_more .vc_general.vc_btn3:hover {
  background: #6cc7e0 !important;
  color: #fff !important;
  transform: translateY(-2px);
}

.beamglow-read-more-btn {
  display: inline-block;
  background: #fff;
  text-transform: uppercase;
  color: #000;
  border: 2px solid #6cc7e0;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.beamglow-read-more-btn:hover {
  background: #6cc7e0;
  color: #fff;
  transform: translateY(-2px);
}

.beamglow-for-blue-bkg-btn button {
	color: #111717 !important;
	font-weight: 600;
}

.beamglow-for-blue-bkg-btn a {
	color: #111717 !important;
	font-weight: 600 !important;
}

.beamglow-for-blue-bkg-btn a:hover {
	border-color: #111717 !important;
	background: transparent !important;
	color: #FFFFFF !important;
}


/* ==========================================================================
   8. IMAGES & MEDIA ALIGNMENT
   ========================================================================== */

.vc_single_image-wrapper:has(.main-image-content-page) img,
.wpb_wrapper:has(.main-image-content-page) img,
.wpb_single_image:has(.main-image-content-page) img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

.main-image-content-page {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

.border-left-right {
	border-left: 50px solid #FFFFFF;
	border-right: 50px solid #FFFFFF;
}

.separator-small-blue {
	max-width: 120px;
}

/* -----------------------------------------
   LEFT ALIGN
----------------------------------------- */

.alignleft,
img.alignleft,
.wp-caption.alignleft,
.wpb_single_image.vc_align_left {
    float: left;
    text-align: left;
    margin: 0 20px 20px 0;
    display: block;
    width: auto;
}

/* -----------------------------------------
   RIGHT ALIGN
----------------------------------------- */

.alignright,
img.alignright,
.wp-caption.alignright,
.wpb_single_image.vc_align_right {
    float: right;
    text-align: right;
    margin: 0 0 20px 20px;
    display: block;
    width: auto;
}

/* -----------------------------------------
   CENTER ALIGN
----------------------------------------- */

.aligncenter,
img.aligncenter,
.wp-caption.aligncenter,
.wpb_single_image.vc_align_center {
    display: block;
    margin: 0 auto 20px auto;
    text-align: center;
    float: none;
    width: auto;
}

/* -----------------------------------------
   NO ALIGN
----------------------------------------- */

.alignnone,
img.alignnone,
.wp-caption.alignnone {
    display: block;
    margin: 0 0 20px 0;
    float: none;
    width: auto;
}

/* -----------------------------------------
   WPBakery Image Fixes
----------------------------------------- */

.wpb_single_image img {
    width: auto;
    max-width: 100%;
    display: inline-block;
}

/* -----------------------------------------
   Caption Handling
----------------------------------------- */

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

.wp-caption img {
    margin-bottom: 10px;
}

.wp-caption-text {
    font-size: 0.9em;
    line-height: 1.4;
}

/* -----------------------------------------
   Clear Floats
----------------------------------------- */

.entry-content::after,
.vc_row::after,
.wpb_wrapper::after {
    content: "";
    display: table;
    clear: both;
}

/* -----------------------------------------
   Animated Line Icons
----------------------------------------- */

.line-icon {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
	padding-left: 15px;
	background: url('https://www.alldesignonline.com/beamglow2026/wp-content/uploads/2026/05/icons-blue-circle-bkg-b.webp') no-repeat left bottom;
}
.line-icon.appeared {
  opacity: 1;
  transform: translateY(0);
}


/* ==========================================================================
   9. HOME PAGE — HERO SLIDER
   ========================================================================== */

:root {
  --hero-h: clamp(520px, 78vh, 900px);
}
@supports (height: 1svh) {
  :root { --hero-h: clamp(520px, 78svh, 900px); }
}

@media (max-width: 1024px) {
  :root {
    --hero-h: clamp(460px, 85vh, 820px);
  }
  @supports (height: 1svh) {
    :root { --hero-h: clamp(460px, 85svh, 820px); }
  }
}

/* ── Beamglow Hero: make the slider section the stacking context ── */
.bgs-slider-section {
  position: relative !important;
  z-index: 1;
  margin-bottom: calc(var(--hero-h) * -1) !important;  /* pulls the text section up into it */
  padding-bottom: 0 !important;
}

/* ── The text section floats above the slider ── */
.bgs-text-section {
  position: absolute !important;
	top: 0;
  z-index: 10;
	height: var(--hero-h) !important;
  background: transparent !important;
  pointer-events: none;  /* clicks pass through empty space */
  align-items: center;              /* desktop default */
  padding-bottom: 56px !important;  /* guaranteed clearance above the dots, ALL sizes */
}

@media (max-width: 1024px) {
  .bgs-text-section {
    align-items: flex-end !important;
    padding-bottom: clamp(56px, 7vh, 90px) !important;
  }
}

/* Re-enable clicks on actual content inside */
.bgs-text-section .wpb_column,
.bgs-text-section .vc_column-inner,
.bgs-text-section h1,
.bgs-text-section h2,
.bgs-text-section p,
.bgs-text-section a {
  pointer-events: auto;
}

p.home-slider-main-text {
	display:inline-block;
    font-size: 2.65em;
	display: inline;
    text-shadow: none;
    line-height: 1.38em !important;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    letter-spacing: 2.65px;
    text-transform: none;
    font-weight: 500;
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.home-slider-main-tagline {
    font-size: 1.65em;
    letter-spacing: 2.85px;
	margin-top: 38px !important;
    font-weight: 100;
}

.home-page-slider-buttons a {
	color: #FFFFFF !important;	
    font-weight: 600 !important;
}

.home-page-slider-buttons a:hover {
	color: #000000 !important;	
}

/* Frosted glass panel behind the hero text for legibility
   over bright/busy areas of the slider images */
.bgs-text-section .wpb_column:nth-child(2) .wpb_wrapper {
  background: rgba(10,10,10,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 4px;
  padding: 24px 32px;
}


/* ==========================================================================
   10. HOME PAGE — NEWS SECTION
   ========================================================================== */

.home-news-first-item-category {
	color: #FFFFFF;
	font-weight: 700;
}

.home-news-first-item-title {
	font-size: 1.85em;
	line-height: 1.25em;
	font-weight: 700;
	text-transform: uppercase;
}

.home-news-first-item-excerpt-read-more-link {
	font-weight: 700;
	color: #FFFFFF !important;
}

.home-news-other-item-category {
	font-weight: 700;
	color: #6cc7e0;
}

.home-news-other-item-title {
	font-size: 1.25em;
	line-height: 1.25em;
	font-weight: 700;
	text-transform: uppercase;
}

.home-news-other-item-excerpt-read-more-link {
	font-weight: 700;
	color: #6cc7e0 !important;
}


/* ==========================================================================
   11. HOME PAGE — PROJECT SLIDER
   ========================================================================== */

.home-project-slider-images {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    cursor: grab;
}

.home-project-slider-images:active {
    cursor: grabbing;
}

.home-project-image-track {
    position: relative;
}

/* -----------------------------
SLIDE BASE / CROSSFADE
----------------------------- */
.home-project-image-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: visible; /* keep all slides visible for crossfade */
    pointer-events: none;
    z-index: 1;
    transition: opacity 1.5s ease, transform 1s ease; /* silky smooth fade */
}

/* ACTIVE SLIDE ON TOP */
.home-project-image-slide.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

/* -----------------------------
LARGE IMAGE (IMAGE 1)
----------------------------- */
.home-project-image-large {
    width: 100%;
    overflow: hidden;
    max-height: 600px; /* adjust for design */
}

.home-project-image-large img {
    width: 100%;
    height: auto;
    display: block;
    transform: scale(1);
    transition: transform 0.5s ease;
}

/* Hover / parallax for large image */
.home-project-image-slide.active .home-project-image-large img:hover {
    transform: scale(1.05) translateY(-5px);
}

/* -----------------------------
BOTTOM ROW (IMAGES 2 & 3)
----------------------------- */
.home-project-image-row {
    display: flex;
    gap: 2px;
    margin-top: 2px;
}

.home-project-image-half {
    width: 50%;
    opacity: 0;
    transform: translateY(20px);
    overflow: hidden;
    transition: opacity 1.5s ease, transform 1.5s ease; /* slower fade for elegance */
}

.home-project-image-half img {
    width: 100%;
    display: block;
    transition: transform 0.5s ease;
}

/* Staggered fade in for bottom images */
.home-project-image-slide.active .home-project-image-half:first-child {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

.home-project-image-slide.active .home-project-image-half:last-child {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.7s;
}

/* Hover / parallax for bottom images */
.home-project-image-half:hover img {
    transform: scale(1.05) translateY(-5px);
}

/* -----------------------------
CONTENT SIDE (TITLE + DESCRIPTION)
----------------------------- */
.home-project-content-track {
    position: relative;
}

.home-project-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease;
}

.home-project-slide.active {
    opacity: 1;
    visibility: visible;
    position: relative;
}

/* Title animation */
.home-project-slide h3 {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
	text-align: right;
}

.home-project-slide.active h3 {
    opacity: 1;
    transform: translateY(0);
	text-align: right;
	text-transform: uppercase;
	font-size: 1.25em;
	margin-bottom: 0px;
}

/* Description animation */
.home-project-description {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease .2s, transform .6s ease .2s;
	text-align: right;
}

.home-project-slide.active .home-project-description {
    opacity: 1;
    transform: translateY(0);
	text-align: right;
}

/* -----------------------------
CONTROLS
----------------------------- */
.home-project-controls {
    margin-top: 25px;
    display: flex;
    gap: 10px;
	justify-content: flex-end;
}

.home-project-prev,
.home-project-next {
    cursor: pointer;
    padding: 0x;
    border: none;
}

.home-project-controls button {
    background: transparent; /* Ensure no default color shows through */
    border: none;            /* Optional: removes default button border */
    padding: 0;              /* Optional: remove extra spacing around image */
}


/* ==========================================================================
   12. HOME PAGE — SCROLLING TEXT BANNER
   ========================================================================== */

.scroll-text-wrapper {
  width: 100vw;                  /* full viewport width */
  overflow: hidden;               /* hide scroll overflow */
  display: flex;
  align-items: center;            /* vertical centering */
  justify-content: flex-start;    /* start text from left */
  position: relative;
  padding-top: 5em;
	  padding-bottom: 3em;
	padding-left: 10px;
	padding-right: 10px;
	background: rgba(0, 0, 0, .48);    /*  70% opaque green */
  z-index: 2;
}

.scroll-text {
  display: inline-block;
  white-space: nowrap;
  line-height: 1;
  margin: 0;                      /* remove default <p> margin */
  transform-origin: left center;  /* scale from left while vertically centered */
  font-size: 10vw;                /* initial size, overridden by JS scaling */
  background: -webkit-linear-gradient(#FFFFFF, #58c8df);
	opacity: 0.58;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	font-weight: 800;
}


/* ==========================================================================
   13. HOME PAGE — CAPABILITIES SECTION
   ========================================================================== */

.home-capabilities-container {
    position: relative;
    background: url('https://www.alldesignonline.com/beamglow2026/wp-content/uploads/2026/03/capabilities-desktop-bkg.webp') no-repeat center center;
    background-size: cover;

    /* Parallax effect */
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
}

/* overlay covers from bottom of scroll-text-wrapper to end of container */
.home-capabilities-container .overlay {
    position: absolute;
    top: 0; /* will be set dynamically */
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.93);
    z-index: 1;
}


/* ==========================================================================
   14. HOME PAGE — LUX BACKGROUND BLOBS
   ========================================================================== */

/* row container */
.lux-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#faf7f4;
  z-index:0;
}

/* blobs */
.lux-blob{
  position:absolute;
  width:900px;
  height:900px;
  border-radius:50%;
  filter:blur(140px);
  opacity:.6;
  pointer-events:none;
  will-change:transform;
}

/* blob colors */
.b1{
  background:radial-gradient(circle, #58c8df 0%, rgba(88,200,223,0) 65%);
  top:-250px;
  left:-200px;
  animation:luxMove1 8s ease-in-out infinite alternate;
}

.b2{
  background:radial-gradient(circle, #58c8df 0%, rgba(88,200,223,0) 65%);
  bottom:-300px;
  right:-250px;
  animation:luxMove2 10s ease-in-out infinite alternate;
}

.b3{
  background:radial-gradient(circle, #58c8df 0%, rgba(88,200,223,0) 65%);
  top:30%;
  left:35%;
  animation:luxMove3 6s ease-in-out infinite alternate;
}

/* ultra smooth drifting */

@keyframes luxMove1{
  0%{transform:translate(0,0) scale(1);}
  50%{transform:translate(160px,80px) scale(1.08);}
  100%{transform:translate(-120px,200px) scale(1.12);}
}

@keyframes luxMove2{
  0%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-180px,-60px) scale(1.06);}
  100%{transform:translate(120px,-160px) scale(1.1);}
}

@keyframes luxMove3{
  0%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-100px,120px) scale(1.05);}
  100%{transform:translate(140px,-80px) scale(1.09);}
}

/* cinematic film grain */
.lux-noise{
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
  pointer-events:none;
}


/* ==========================================================================
   15. CUSTOM PAGE HEADER (HERO BANNER)
   ========================================================================== */

.custom-page-header {
  width: 100%;          /* change from 100vw */
  max-width: 100%;      /* ensure it doesn't exceed viewport */
  margin: 0;            /* remove negative margin */
  overflow: hidden;     /* clip blobs and images */
  position: relative;
}

/* Background image */
.custom-page-header picture,
.custom-page-header img {
  width: 100%;
  height: auto;
  display: block;
}

/* Lux blobs overlay */
.custom-page-header .lux-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Below the H1 */
  pointer-events: none; /* So it doesn't block interactions */
}

.custom-page-header .lux-bg .lux-blob,
.custom-page-header .lux-bg .lux-noise {
  position: absolute;
  /* You can set your own positions, colors, animation here */
}

/* Wrap for title */
.custom-page-header .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: absolute; 
  top: auto;    
	bottom: 0px;
  left: 50%;          
  transform: translate(-50%, -50%);
  z-index: 2; /* Above blobs */
}

/* Page title */
.page-header-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 400 !important;
  color: #FFFFFF;
  font-size: clamp(1.8em, 2.8vw, 2.25em);
  background: rgba(0, 0, 0, 0.85);
  padding: 8px 20px;
  display: inline-block;
  border-top: 2px solid #6cc7e0;
  border-bottom: 2px solid #6cc7e0;
	text-align: center !important;
}

.page-header-title::after {
	display: none;
}

/* row container */
.header-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* removed background color */
  z-index: 0;
}

/* blobs */
.header-blob {
  position: absolute;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.6;
  pointer-events: none;
  will-change: transform;
}

/* blob colors and positions */
.header-b1 {
  background: radial-gradient(circle, #58c8df 0%, rgba(88,200,223,0) 65%);
  top: -250px;
  left: -200px;
  animation: headerMove1 8s ease-in-out infinite alternate;
}

.header-b2 {
  background: radial-gradient(circle, #58c8df 0%, rgba(88,200,223,0) 65%);
  bottom: -300px;
  right: -250px;
  animation: headerMove2 10s ease-in-out infinite alternate;
}

.header-b3 {
  background: radial-gradient(circle, #58c8df 0%, rgba(88,200,223,0) 65%);
  top: 30%;
  left: 35%;
  animation: headerMove3 6s ease-in-out infinite alternate;
}

/* ultra smooth drifting animations */
@keyframes headerMove1 {
  0% { transform: translate(0,0) scale(1); }
  50% { transform: translate(160px,80px) scale(1.08); }
  100% { transform: translate(-120px,200px) scale(1.12); }
}

@keyframes headerMove2 {
  0% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-180px,-60px) scale(1.06); }
  100% { transform: translate(120px,-160px) scale(1.1); }
}

@keyframes headerMove3 {
  0% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-100px,120px) scale(1.05); }
  100% { transform: translate(140px,-80px) scale(1.09); }
}

/* cinematic film grain */
.header-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* turn off the blue blobs and noise on the case studies */
body.case_studies-template-default .header-blob.header-b1,
body.case_studies-template-default .header-blob.header-b2,
body.case_studies-template-default .header-blob.header-b3,
body.case_studies-template-default .header-noise {
    display: none;
}


/* ==========================================================================
   16. STAFF GRID (KEY STAFF PAGE)
   ========================================================================== */

/* ================================
   BEAMGLOW STAFF GRID WRAPPER
================================ */

.beamglow-staff-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    align-items: stretch;
}

/* ================================
   GRID ITEMS (DESKTOP = 3 COL) + CARD STYLING
================================ */

.beamglow-staff-card {
    width: calc(33.333% - 7px);
    padding: 15px;
    box-sizing: border-box;

    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;

    opacity: 0;
    transform: translateY(25px);
    transition: all 0.4s ease;
}

/* Fade-in active state */
.beamglow-staff-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hover effect */
.beamglow-staff-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}

/* ================================
   IMAGE (FIX MASSIVE IMAGE ISSUE)
================================ */

.beamglow-staff-image {
    width: 100%;
    margin-bottom: 15px;
}

.beamglow-staff-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

/* ================================
   NAME (UNDER IMAGE)
================================ */

.beamglow-staff-name {
    font-size: 1.45em;
    margin: 0 0 15px 0;
}

/* ================================
   META ROWS
================================ */

.beamglow-meta {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    line-height: 1.4;
}

.beamglow-meta i {
    color: #6cc7e0;
    margin-right: 8px;
    width: 18px;
    flex-shrink: 0;
}

/* Links inside meta (email only now) */
.beamglow-meta a {
    color: #6cc7e0;
	font-weight: 600;
    text-decoration: none;
}

.beamglow-meta a:hover {
    text-decoration: underline;
}

/* ================================
   CONTENT
================================ */

.beamglow-staff-content {
    margin-top: 15px;
    font-size: 14px;
    line-height: 1.6;
}

/* push content spacing if needed */
.beamglow-staff-card > *:last-child {
    margin-bottom: 0;
}

/* ================================
   STAGGER ANIMATION (30+ STAFF SAFE)
================================ */

.beamglow-staff-card:nth-child(1){transition-delay:.03s}
.beamglow-staff-card:nth-child(2){transition-delay:.06s}
.beamglow-staff-card:nth-child(3){transition-delay:.09s}
.beamglow-staff-card:nth-child(4){transition-delay:.12s}
.beamglow-staff-card:nth-child(5){transition-delay:.15s}
.beamglow-staff-card:nth-child(6){transition-delay:.18s}
.beamglow-staff-card:nth-child(7){transition-delay:.21s}
.beamglow-staff-card:nth-child(8){transition-delay:.24s}
.beamglow-staff-card:nth-child(9){transition-delay:.27s}
.beamglow-staff-card:nth-child(10){transition-delay:.30s}
.beamglow-staff-card:nth-child(11){transition-delay:.33s}
.beamglow-staff-card:nth-child(12){transition-delay:.36s}
.beamglow-staff-card:nth-child(13){transition-delay:.39s}
.beamglow-staff-card:nth-child(14){transition-delay:.42s}
.beamglow-staff-card:nth-child(15){transition-delay:.45s}
.beamglow-staff-card:nth-child(16){transition-delay:.48s}
.beamglow-staff-card:nth-child(17){transition-delay:.51s}
.beamglow-staff-card:nth-child(18){transition-delay:.54s}
.beamglow-staff-card:nth-child(19){transition-delay:.57s}
.beamglow-staff-card:nth-child(20){transition-delay:.60s}
.beamglow-staff-card:nth-child(21){transition-delay:.63s}
.beamglow-staff-card:nth-child(22){transition-delay:.66s}
.beamglow-staff-card:nth-child(23){transition-delay:.69s}
.beamglow-staff-card:nth-child(24){transition-delay:.72s}
.beamglow-staff-card:nth-child(25){transition-delay:.75s}
.beamglow-staff-card:nth-child(26){transition-delay:.78s}
.beamglow-staff-card:nth-child(27){transition-delay:.81s}
.beamglow-staff-card:nth-child(28){transition-delay:.84s}
.beamglow-staff-card:nth-child(29){transition-delay:.87s}
.beamglow-staff-card:nth-child(30){transition-delay:.90s}


/* ==========================================================================
   17. SUSTAINABILITY BACKGROUND
   ========================================================================== */

/* row container */
.sustainability-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#faf7f4;
  z-index:0;
}

/* blobs */
.sustainability-blob{
  position:absolute;
  width:900px;
  height:900px;
  border-radius:50%;
  filter:blur(140px);
  opacity:.6;
  pointer-events:none;
  will-change:transform;
}

/* blob colors */
.sustainability-b1{
  background:radial-gradient(circle, #52b53e 0%, rgba(82,181,62,0) 65%);
  top:-250px;
  left:-200px;
  animation:sustainabilityMove1 8s ease-in-out infinite alternate;
}

.sustainability-b2{
  background:radial-gradient(circle, #52b53e 0%, rgba(82,181,62,0) 65%);
  bottom:-300px;
  right:-250px;
  animation:sustainabilityMove2 10s ease-in-out infinite alternate;
}

.sustainability-b3{
  background:radial-gradient(circle, #52b53e 0%, rgba(82,181,62,0) 65%);
  top:30%;
  left:35%;
  animation:sustainabilityMove3 6s ease-in-out infinite alternate;
}

/* ultra smooth drifting */

@keyframes sustainabilityMove1{
  0%{transform:translate(0,0) scale(1);}
  50%{transform:translate(160px,80px) scale(1.08);}
  100%{transform:translate(-120px,200px) scale(1.12);}
}

@keyframes sustainabilityMove2{
  0%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-180px,-60px) scale(1.06);}
  100%{transform:translate(120px,-160px) scale(1.1);}
}

@keyframes sustainabilityMove3{
  0%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-100px,120px) scale(1.05);}
  100%{transform:translate(140px,-80px) scale(1.09);}
}

/* cinematic film grain */
.sustainability-noise{
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
  pointer-events:none;
}


/* ==========================================================================
   18. FAQs PAGE
   ========================================================================== */

/* =========================
   BASE CARD
========================= */
.main-faq-block .vc_toggle {
  position: relative;
  background: linear-gradient(
    145deg,
    rgba(108,199,224,0.08),
    rgba(255,255,255,1)
  );
  border-radius: 18px;
  margin-bottom: 18px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,0.06);

  transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: top center;

  border: none !important; /* 👈 kills WPBakery borders */
}

/* hover lift */
.main-faq-block .vc_toggle:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.08);
}

/* =========================
   OUTER HAIRLINE BORDER (ONLY ONE)
========================= */
.main-faq-block .vc_toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;

  border: 1px solid rgba(17, 23, 23, 0.03);

  /* subtle inner light so it doesn't feel flat */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

/* =========================
   LIQUID INK ACCENT LINE (LEFT ONLY)
========================= */
.main-faq-block .vc_toggle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;

  transform: scaleY(0);
  transform-origin: top;

  background: linear-gradient(
    180deg,
    #6cc7e0,
    rgba(108,199,224,0.4)
  );

  opacity: 0.95;
  filter: blur(0.2px);

  transition: transform 0.55s cubic-bezier(0.22, 1, 0.46, 1),
              opacity 0.3s ease;
}

.main-faq-block .vc_toggle_active::before {
  transform: scaleY(1);
}

/* =========================
   TITLE AREA
========================= */
.main-faq-block .vc_toggle_title {
  padding: 18px 48px 18px 36px;
  position: relative;
  z-index: 2;
}

/* heading */
.main-faq-block .vc_toggle_title h4 {
  margin: 0;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.2px;
  line-height: 1.4;
  color: #111717;
}


/* =========================
   CONTENT (SOFT UNFOLD)
========================= */
.main-faq-block .vc_toggle_content {
  padding: 0 24px 22px 36px;
  color: #111717;
  font-size: 14px;
  line-height: 1.6;

  opacity: 0;
  transform: translateY(-6px);
  max-height: 0;
  overflow: hidden;

  transition:
    opacity 0.3s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.main-faq-block .vc_toggle_active .vc_toggle_content {
  opacity: 1;
  transform: translateY(0);
  max-height: 500px;
}

/* =========================
   OPEN STATE LIFT
========================= */
.main-faq-block .vc_toggle_active {
  background: linear-gradient(
    180deg,
    #ffffff,
    rgba(108,199,224,0.12)
  );
  box-shadow: 0 20px 45px rgba(0,0,0,0.1);
  animation: softUnfold 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes softUnfold {
  0% { transform: scale(0.985); }
  60% { transform: scale(1.01); }
  100% { transform: scale(1); }
}

/* =========================
   OPTIONAL TEXT POLISH
========================= */
.main-faq-block .vc_toggle_content p {
  opacity: 0;
  transform: translateY(4px);
  animation: textFade 0.4s ease forwards;
  animation-delay: 0.1s;
}

@keyframes textFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ==========================================================================
   19. CONTACT FORM 7
   ========================================================================== */

.wpcf7 {
  max-width: 700px;
  margin: 0 auto;
  font-family: inherit;
}

/* Labels */
.wpcf7 label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: #222;
  letter-spacing: 0.3px;
}

/* Inputs, selects, textarea */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #ddd;
  background: #fff;
  font-size: 15px;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

/* Focus glow effect */
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: #6fe7dd;
  box-shadow: 0 0 0 3px rgba(111, 231, 221, 0.25),
              0 6px 18px rgba(0,0,0,0.08);
}

/* Textarea */
.wpcf7 textarea {
  min-height: 140px;
  resize: vertical;
}

/* Placeholder styling */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
  color: #aaa;
}

/* Submit button – outlined style (matches homepage) */
.wpcf7 input[type="submit"] {
  display: inline-block;
  background: #fff;
	text-transform: uppercase;
  color: #000;
  border: 2px solid #6cc7e0;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: none;
}

/* Hover effect */
.wpcf7 input[type="submit"]:hover {
  background: #6cc7e0;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(124, 140, 255, 0.25);
}

/* Active */
.wpcf7 input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 5px 10px rgba(124, 140, 255, 0.2);
}

/* Optional subtle glow on focus (keyboard users) */
.wpcf7 input[type="submit"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(124, 140, 255, 0.25);
}

/* Checkbox & radio */
.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] {
  accent-color: #7c8cff;
  margin-right: 6px;
}

/* File upload */
.wpcf7 input[type="file"] {
  border: none;
  background: none;
  padding: 10px 0;
}

/* Form spacing */
.wpcf7 p {
  margin-bottom: 20px;
}

/* Validation errors */
.wpcf7-not-valid {
  border-color: #ff6b6b !important;
  box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2);
}

/* Error message */
.wpcf7-not-valid-tip {
  font-size: 13px;
  color: #ff6b6b;
  margin-top: 4px;
}

/* Success message */
.wpcf7-mail-sent-ok {
  border-radius: 12px;
  background: #e9fff8;
  color: #0a7f5a;
  padding: 14px 18px;
  border: 1px solid #b8f5df;
}

/* Error message box */
.wpcf7-response-output {
  margin-top: 20px;
  border-radius: 12px;
  padding: 14px 18px;
}

/* Loading spinner alignment */
.wpcf7-spinner {
  margin-left: 10px;
}

/* Optional: glass card wrapper */
.form-card {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(10px);
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}


/* ==========================================================================
   20. 404 PAGE
   ========================================================================== */

.error-404-container {
}

.error-404-container p {
  margin-bottom: 30px;
}

.error-404-home-link {
  display: inline-block;
  background: #fff;
  text-transform: uppercase;
  color: #000;
  border: 2px solid #6cc7e0;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-bottom: 40px;
}

.error-404-home-link:hover {
  background: #6cc7e0;
  color: #fff;
  transform: translateY(-2px);
}

/* 404 search form */
.error-404-search-form {
  display: flex;
  gap: 10px;
  max-width: 420px;
  margin: 0 auto;
}

.error-404-search-input {
  flex: 1;
  padding: 14px 20px;
  border: 2px solid #6cc7e0;
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  outline: none;
}

.error-404-search-button {
  background: #fff;
  text-transform: uppercase;
  color: #000;
  border: 2px solid #6cc7e0;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.error-404-search-button:hover {
  background: #6cc7e0;
  color: #fff;
  transform: translateY(-2px);
}


/* ==========================================================================
   21. SEARCH RESULTS & PAGINATION (shared with Archive pages)
   ========================================================================== */

.search-results-list {
}

.search-result-item {
  padding: 24px 0;
  border-bottom: 1px solid #e5e5e5;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item h4 {
  font-size: 1.3em;
  margin-bottom: 10px;
}

.search-result-item h4 a {
  color: #111717;
  text-decoration: none;
}

.search-result-item h4 a:hover {
  color: #6cc7e0;
}

.search-result-read-more {
  display: inline-block;
  background: #fff;
  text-transform: uppercase;
  color: #000;
  border: 2px solid #6cc7e0;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  margin-top: 10px;
  transition: all 0.3s ease;
}

.search-result-read-more:hover {
  background: #6cc7e0;
  color: #fff;
  transform: translateY(-2px);
}

/* Pagination */
.search-results-pagination {
  margin-top: 40px;
}

.search-results-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.search-results-pagination a,
.search-results-pagination span {
  display: inline-block;
  padding: 8px 16px;
  border: 2px solid #6cc7e0;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  color: #000;
  transition: all 0.3s ease;
}

.search-results-pagination a:hover {
  background: #6cc7e0;
  color: #fff;
}

.search-results-pagination .current {
  background: #6cc7e0;
  color: #fff;
}


/* ==========================================================================
   22. FOOTER
   ========================================================================== */

.universal-footer {
	color: #FFFFFF;
}

.footer-medium-text {
	font-size: 14px;
}

.footer-copyright-text {
	font-size: 0.8em;
}

.footer-social-icons .wpb_wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.footer-social-icons .wpb_wrapper p {
    margin: 0;
    padding: 0;
}

.footer-social-icons .wpb_wrapper br {
    display: none;
}

.footer-social-icons .wpb_wrapper img {
    display: block;
}

.footer-policies a {
    display: block;
    margin-bottom: 0px;
}

.footer-policies a::before {
    font-family: "Font Awesome 5 Free";
    content: "\f08e";
    font-weight: 900;
    margin-right: 8px;
	color: #FFFFFF !important;
	text-decoration: none !important;
}


/* ==========================================================================
   23. RESPONSIVE / MEDIA QUERIES
   (all breakpoints collected here, ordered widest → narrowest)
   ========================================================================== */

/* ============================================================
   Hero slider — tablet & mobile overrides
   Add to: theme stylesheet (Section 23) or Additional CSS
   NOTE: -85vh below must match whatever height you set .bgs
   to in the raw HTML block. If you change one, change both.
   ============================================================ */

@media (max-width: 1024px) {

  /* This MUST match the .bgs height in the raw HTML block, or
     the text section will misalign with the slider image. */
  :root {
    --hero-h: clamp(460px, 85vh, 820px);
  }
  @supports (height: 1svh) {
    :root { --hero-h: clamp(460px, 85svh, 820px); }
  }

  .bgs-slider-section {
    margin-bottom: calc(var(--hero-h) * -1) !important;
  }

  /* Give the text section an explicit height instead of relying
     on 100% (which can resolve against the viewport rather than
     the slider), and push its content to the bottom. */
  .bgs-text-section {
    height: var(--hero-h) !important;
    align-items: flex-end !important;
    padding-bottom: clamp(56px, 7vh, 90px) !important;
  }

  /* Typography — fluid sizing so it scales smoothly across
     iPad and phone widths instead of jumping at a breakpoint. */
  p.home-slider-main-text {
    font-size: clamp(22px, 5vw, 32px) !important;
    line-height: 1.3 !important;
    letter-spacing: 1px !important;
  }

  .home-slider-main-tagline {
    font-size: clamp(14px, 3.4vw, 18px) !important;
    letter-spacing: 1px !important;
    margin-top: 16px !important;
  }

  .home-page-slider-buttons {
    margin-top: 6px !important;
  }
	
  .home-page-slider-button-case-studies {
    display: none !important;
  }
}


/* Header fix for Smaller Screen and Mobiles */

@media (max-width: 1024px) {
  .custom-page-header {
    overflow: visible;
    min-height: 0;
  }
  .custom-page-header .wrap {
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    display: flex;
    justify-content: center;
    padding: 20px 20px 24px;
    margin-top: -30px;
  }
  .page-header-title {
    font-size: clamp(1.3em, 5vw, 1.8em);
    line-height: 1.3;
    margin-bottom: 0;
  }
}

  /* Feature news box stack */

@media (max-width: 981px) {
  .news-feature-left-side,
  .news-feature-right-side {
    width: 100% !important;
    float: none !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    display: block !important;
  }

.vc_grid-item-zone-c-right .vc_gitem-animated-block {
    float: none !important;
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  /* Extra-small phones: stack the two buttons instead of
     squeezing them side by side. */
  .home-page-slider-buttons .vc_btn3-container {
    display: block;
    margin-bottom: 10px;
  }
}


/* Staff grid — tablet = 2 columns */
@media (max-width: 1024px) {
    .beamglow-staff-card {
        width: calc(50% - 5px);
    }
	
.gm-navbar .gm-menu-btn.hamburger {
	margin-bottom: 10px !important;
}	
	
}

/* white borders */
@media (max-width: 920px) {
  .border-left-right {
    border-left: 15px solid #FFFFFF;
    border-right: 15px solid #FFFFFF;
  }

  .gm-container {
    margin-left: 5px !important;
    margin-right: 5px !important;
  }
}

/* General mobile behaviour — image alignment resets */
@media (max-width: 768px) {

    .alignleft,
    .alignright,
    .aligncenter,
    .wp-caption.alignleft,
    .wp-caption.alignright,
    .wp-caption.aligncenter,
    .wpb_single_image.vc_align_left,
    .wpb_single_image.vc_align_right,
    .wpb_single_image.vc_align_center {

        float: none !important;
        display: block;
        margin: 0 auto 20px auto !important;
        text-align: center !important;
    }

    .wpb_single_image img,
    .wp-caption img,
    img.alignleft,
    img.alignright,
    img.aligncenter {
        width: 100%;
        max-width: 100%;
    }

/* Timeline center align */
.bold_timeline_item_override_alignment_inherit {
    text-align: center !important;
}	
	
}


/* Staff grid — mobile = 1 column */
@media (max-width: 640px) {
    .beamglow-staff-card {
        width: 100%;
    }
}

/* Footer — small mobile (reserved for future rules) */
@media only screen and (max-width: 468px) {


}