/* ==========================================================================
   REALCOGNITA – MAIN STYLESHEET
   Structure:
   1.  CSS Custom Properties (Variables)
   2.  Reset & Base
   3.  Typography
   4.  Layout Utilities
   5.  Ambient Background (Canvas + Blueprint Grid)
   6.  Preloader
   7.  Header & Navigation
   8.  Mobile Drawer
   9.  Contact Modal
   10. Hero Section
   11. Features Section
   12. Services / Groups Section
   13. News Section
   14. CTA Banner
   15. Office Locations
   16. Footer
   17. Scroll-to-Top Button
   18. Scroll Reveal Animations
   19. Responsive Breakpoints
   20. Client Ticker
   ========================================================================== *//* ==========================================================================
   1. CSS CUSTOM PROPERTIES
   ========================================================================== */
:root {
  /* ── Realcognita Brand Palette ──────────────────────────────────────────
     Spring Green  #26D07C  (PANTONE 7479 C)   → primary accent
     Teal          #00A499  (PANTONE 3272 C)   → secondary / hover accent
     Black         #000000                     → base dark
     Black 50%     #808080                     → muted / borders
     Stone         #B6ADA5  (web only)         → warm surface / light bg
     ──────────────────────────────────────────────────────────────────── */

  /* Brand Colors */
  --color-bg:           #faf9f7;        /* near-white with warm stone hint */
  --color-surface:      #f0eeeb;        /* stone-tinted surface */
  --color-surface2:     #e4e0db;        /* slightly darker stone */
  --color-border:       rgba(0, 0, 0, 0.1);
  --color-accent:       #26D07C;        /* Spring Green – PANTONE 7479 C */
  --color-accent-dim:   rgba(38, 208, 124, 0.12);
  --color-accent-hover: #00A499;        /* Teal – PANTONE 3272 C */
  --color-teal:         #00A499;        /* secondary brand accent */
  --bg-master:          #faf9f7;
  --bg-master-end:      #f0eeeb;

  /* Text */
  --color-text:       #0d0d0d;          /* near-black, brand-true */
  --color-text-muted: #4a4a4a;          /* dark stone-grey */
  /* Was #808080 (Black 50%), which measured 3.94:1 on white and 3.75:1 on
     --bg-master -- under the 4.5:1 WCAG AA needs for body-size text, and it
     carries post dates, reading times and empty states. #6e6e6e is the
     nearest grey that clears 4.5 on both surfaces (5.1 / 4.85). Dark mode
     keeps #808080, which already passes at 5.1:1 on its near-black. */
  --color-text-dim:   #6e6e6e;

  /* Residential & Commercial accent colors */
  --color-res:  #26D07C;               /* Spring Green for residential */
  --color-comm: #00A499;               /* Teal for commercial */
  --res-soft:   rgba(38, 208, 124, 0.14);
  --comm-soft:  rgba(0, 164, 153, 0.14);

  /* Ink RGB triplet */
  --ink-rgb: 13, 13, 13;

  /* RGB triplets */
  --color-accent-rgb: 38, 208, 124;
  --color-bg-rgb: 250, 249, 247;

  /* Glass / frosted panel surfaces */
  --glass-bg:     rgba(250, 249, 247, 0.96);
  --glass-border: rgba(255, 255, 255, 0.5);

  /* Card surfaces */
  --card-bg:      #ffffff;
  --card-border:  #e4e0db;
  --frame-border: #ffffff;

  /* Layout */
  --container-width: 88rem;
  --container-pad:   2rem;
  --section-gap:     6rem;

  /* Nav */
  --header-height: 5rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.28s;
}

/* ==========================================================================
   1B. DARK THEME OVERRIDES
   Toggled by [data-theme="dark"] on <html>, set/persisted by js/theme.js.
   Every existing rule already reads these same custom properties, so
   flipping this block re-themes the whole site with zero rule duplication.
   ========================================================================== */
[data-theme="dark"] {
  /* Dark mode: true black base, Spring Green accent, stone-tinted surfaces */
  --color-bg:           #080808;        /* near-true black */
  --color-surface:      #111211;        /* very dark surface */
  --color-surface2:     #1a1c1a;        /* dark card bg */
  --color-border:       rgba(182, 173, 165, 0.12);  /* stone-tinted border */
  --color-accent:       #26D07C;        /* Spring Green stays vibrant in dark */
  --color-accent-dim:   rgba(38, 208, 124, 0.18);
  --color-accent-hover: #00A499;        /* Teal on hover */
  --color-teal:         #00A499;
  --bg-master:          #050505;
  --bg-master-end:      #0d0d0d;

  --color-text:       #f2eeea;          /* warm off-white (stone-derived) */
  --color-text-muted: #b6ada5;          /* Stone – warm mid-grey */
  --color-text-dim:   #808080;          /* Black 50% */

  --ink-rgb: 242, 238, 234;

  --color-accent-rgb: 38, 208, 124;
  --color-bg-rgb: 8, 8, 8;

  --glass-bg:     rgba(10, 11, 10, 0.95);
  --glass-border: rgba(182, 173, 165, 0.1);

  --card-bg:      #111211;
  --card-border:  rgba(182, 173, 165, 0.12);
  --frame-border: #111211;
}

html {
  background-color: var(--color-bg);
  color-scheme: light;
}
[data-theme="dark"] {
  color-scheme: dark;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--color-bg);
}

[data-theme="dark"] .logo-marquee-track .logo-capsule-tile img {
  filter: brightness(0) invert(1) opacity(0.65);
}
[data-theme="dark"] .logo-marquee-track .logo-capsule-tile:hover img {
  filter: brightness(0) invert(1) opacity(0.95);
}

/* Global safety-net: force base text elements to the dark-mode text
   variable (near-white) even if a component sets its own literal color
   value instead of reading var(--color-text). Scoped to elements with no
   class so it never fights a component's own (already theme-aware) muted
   or accent color — e.g. .ct-role, .home-testimonial-author, .ct-stars. */
[data-theme="dark"] body,
[data-theme="dark"] h1:not([class]),
[data-theme="dark"] h2:not([class]),
[data-theme="dark"] h3:not([class]),
[data-theme="dark"] h4:not([class]),
[data-theme="dark"] h5:not([class]),
[data-theme="dark"] h6:not([class]),
[data-theme="dark"] p:not([class]),
[data-theme="dark"] li:not([class]),
[data-theme="dark"] span:not([class]),
[data-theme="dark"] label:not([class]),
[data-theme="dark"] td:not([class]),
[data-theme="dark"] th:not([class]) {
  color: var(--color-text);
}

/* Generic card / tile / panel safety-net: any component using these
   common utility or component class names will pick up the themed
   card surface even if an older rule still sets a literal color. */
[data-theme="dark"] .card,
[data-theme="dark"] .cta-card,
[data-theme="dark"] .exp-case-card,
[data-theme="dark"] .exp-featured-card,
[data-theme="dark"] .location-card,
[data-theme="dark"] .metric-grid-card,
[data-theme="dark"] .pane-tile,
[data-theme="dark"] .service-card,
[data-theme="dark"] .service-display-card,
[data-theme="dark"] .stat-counter-card,
[data-theme="dark"] .team-profile-card,
[data-theme="dark"] .tile {
  background-color: var(--card-bg);
  border-color: var(--card-border);
}

/* Form fields: inputs/selects/textareas commonly default to a literal
   white background, which stays white and unreadable in dark mode. */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--color-text-dim);
}

/* Tables and horizontal rules */
[data-theme="dark"] hr,
[data-theme="dark"] table,
[data-theme="dark"] tr {
  border-color: var(--color-border);
}

html { transition: background-color 0.3s var(--ease-out); }
body, .site-header, .site-footer, .mobile-drawer {
  transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}html {
  scroll-behavior: smooth !important; 
}

@media (prefers-reduced-motion: reduce) {html {
    scroll-behavior: auto !important;
  }}body {
  font-family: "Komet", -apple-system, "Segoe UI", sans-serif;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}img, video {
  display: block;
  max-width: 100%;
}a {
  color: inherit;
  text-decoration: none;
}ul {
  list-style: none;
}button {
  cursor: pointer;
  font-family: inherit;
  background: none;
  border: none;
}/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
.section-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
  letter-spacing: -0.02em;
}.section-desc {
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 52rem;
  margin-top: 0.75rem;
}.accent {
  color: var(--color-accent);
}.accent-comm { color: var(--color-comm); }.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}.badge-hiring {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--color-accent);
  border: 1px solid rgba(var(--color-accent-rgb), 0.3);
  background: rgba(var(--color-accent-rgb), 0.05);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: 0.5rem;
  vertical-align: middle;
}/* ==========================================================================
   4. LAYOUT UTILITIES
   ========================================================================== */
.container {
  width: 100% !important;
  max-width: var(--container-width) !important;
  margin: 0 auto !important;
  padding: 0 var(--container-pad) !important;
}.section-header {
  margin-bottom: 3rem;
}/* ==========================================================================
   5. AMBIENT BACKGROUND
   ========================================================================== */
.canvas-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg-master) 0%, var(--bg-master-end) 100%) !important;
}.blueprint-grid {
  position: absolute;
  inset: 0;
  mask-image: linear-gradient(to right, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 80%);
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 80%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://w3.org' width='1600' height='1200' viewBox='0 0 1600 1200'%3E%3Cdefs%3E%3Cpattern id='subGrid' width='30' height='30' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 30 0 L 0 0 0 30' fill='none' stroke='rgba(var(--color-accent-rgb), 0.05)' stroke-width='0.5'/%3E%3C/pattern%3E%3Cpattern id='mainGrid' width='150' height='150' patternUnits='userSpaceOnUse'%3E%3Crect width='150' height='150' fill='url(%23subGrid)'/%3E%3Cpath d='M 150 0 L 0 0 0 150' fill='none' stroke='rgba(var(--color-accent-rgb), 0.12)' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23mainGrid)'/%3E%3Cg stroke='rgba(var(--color-accent-rgb), 0.14)' stroke-width='0.75' fill='none'%3E%3Cpath d='M100,200 L1100,700 L1500,400 L500,-100 Z' /%3E%3Cpath d='M100,600 L1100,1100 L1500,800 L500,300 Z' /%3E%3Cpath d='M100,200 L100,600 M1100,700 L1100,1100 M1500,400 L1500,800 M500,-100 L500,300' /%3E%3Cpath d='M-100,400 L1700,900 M200,-100 L1200,1300' /%3E%3Cpath d='M600,250 L950,425 L800,650 L450,475 Z' stroke-dasharray='4,4' /%3E%3Cpath d='M600,250 L600,400 M950,425 L950,575 M800,650 L800,800 M450,475 L450,625' stroke-dasharray='2,2' /%3E%3Ccircle cx='600' cy='250' r='4' fill='rgba(var(--color-accent-rgb), 0.25)' /%3E%3Ccircle cx='950' cy='425' r='4' fill='rgba(var(--color-accent-rgb), 0.25)' /%3E%3Ccircle cx='800' cy='650' r='4' fill='rgba(var(--color-accent-rgb), 0.25)' /%3E%3Ccircle cx='450' cy='475' r='4' fill='rgba(var(--color-accent-rgb), 0.25)' /%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 1200px auto;
  opacity: 0.8;
}
/*
 * The drift is a transform on an oversized ::before, not background-position
 * on the grid itself. background-position cannot run on the compositor, so the
 * old loop repainted the whole viewport of masked SVG pattern every frame, on
 * every page, for as long as it stayed open. Same path and speed as before --
 * -1200px, -600px over 80s -- and the mask stays on the parent, so the fade
 * does not travel with the pattern.
 *
 * The parent override is two classes deep on purpose. The service-page
 * stylesheets carry a stale merged copy of this file that reapplies the old
 * background and animation to .blueprint-grid at one class, AFTER this file
 * loads; one class here would lose to it and draw the grid twice.
 */
.canvas-bg .blueprint-grid {
  overflow: hidden;
  background-image: none;
  animation: none;
  will-change: auto;
}
.canvas-bg .blueprint-grid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + 1200px);
  height: calc(100% + 600px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://w3.org' width='1600' height='1200' viewBox='0 0 1600 1200'%3E%3Cdefs%3E%3Cpattern id='subGrid' width='30' height='30' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 30 0 L 0 0 0 30' fill='none' stroke='rgba(var(--color-accent-rgb), 0.05)' stroke-width='0.5'/%3E%3C/pattern%3E%3Cpattern id='mainGrid' width='150' height='150' patternUnits='userSpaceOnUse'%3E%3Crect width='150' height='150' fill='url(%23subGrid)'/%3E%3Cpath d='M 150 0 L 0 0 0 150' fill='none' stroke='rgba(var(--color-accent-rgb), 0.12)' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23mainGrid)'/%3E%3Cg stroke='rgba(var(--color-accent-rgb), 0.14)' stroke-width='0.75' fill='none'%3E%3Cpath d='M100,200 L1100,700 L1500,400 L500,-100 Z' /%3E%3Cpath d='M100,600 L1100,1100 L1500,800 L500,300 Z' /%3E%3Cpath d='M100,200 L100,600 M1100,700 L1100,1100 M1500,400 L1500,800 M500,-100 L500,300' /%3E%3Cpath d='M-100,400 L1700,900 M200,-100 L1200,1300' /%3E%3Cpath d='M600,250 L950,425 L800,650 L450,475 Z' stroke-dasharray='4,4' /%3E%3Cpath d='M600,250 L600,400 M950,425 L950,575 M800,650 L800,800 M450,475 L450,625' stroke-dasharray='2,2' /%3E%3Ccircle cx='600' cy='250' r='4' fill='rgba(var(--color-accent-rgb), 0.25)' /%3E%3Ccircle cx='950' cy='425' r='4' fill='rgba(var(--color-accent-rgb), 0.25)' /%3E%3Ccircle cx='800' cy='650' r='4' fill='rgba(var(--color-accent-rgb), 0.25)' /%3E%3Ccircle cx='450' cy='475' r='4' fill='rgba(var(--color-accent-rgb), 0.25)' /%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 1200px auto;
  animation: blueprintDrift 80s linear infinite;
  will-change: transform;
}
@keyframes blueprintDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-1200px, -600px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .canvas-bg .blueprint-grid::before { animation: none; }
}
#particleCanvas {
  display: none !important;
}.hero, main, section, .group-block {
  position: relative;
  z-index: 10;
  background: transparent !important;
}/* ==========================================================================
   6. PRELOADER
   ========================================================================== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  gap: 1.75rem;
  background:
    radial-gradient(120% 120% at 50% 38%, #0c0f0e 0%, #060706 55%, #000000 100%);
  clip-path: circle(150% at 50% 50%);
  transition: clip-path 1.1s cubic-bezier(.76,0,.24,1);
}
.preloader.is-hidden {
  clip-path: circle(0% at 50% 50%);
}

/* subtle film-grain noise for a premium, non-flat black */
.preloader-noise {
  position: absolute;
  inset: -20%;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* central vignette glow that breathes behind the mark */
.preloader-glow {
  position: absolute;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.16) 0%, rgba(var(--color-accent-rgb), 0.05) 40%, transparent 72%);
  filter: blur(10px);
  animation: glow-breathe 4.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes glow-breathe {
  0%, 100% { transform: scale(0.94); opacity: 0.75; }
  50%      { transform: scale(1.06); opacity: 1; }
}

/* two soft floating orbs for depth */
.preloader-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  will-change: transform;
}
.preloader-orb--a {
  width: 380px;
  height: 380px;
  left: 8%;
  top: 18%;
  background: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.20) 0%, transparent 70%);
  animation: orb-drift-a 12s ease-in-out infinite;
}
.preloader-orb--b {
  width: 300px;
  height: 300px;
  right: 10%;
  bottom: 16%;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.14) 0%, transparent 70%);
  animation: orb-drift-b 14s ease-in-out infinite;
}
@keyframes orb-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(30px, 24px) scale(1.08); }
}
@keyframes orb-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-26px, -20px) scale(1.06); }
}

/* ------------------------------------------------------------------------
   Center mark: radar ping rings + self-drawing hex outline + logo reveal
   ------------------------------------------------------------------------ */

@keyframes mark-rise {
  0%   { opacity: 0; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes ping-burst {
  0%   { transform: scale(0.55); opacity: 0; }
  12%  { opacity: 0.85; }
  100% { transform: scale(2.15); opacity: 0; }
}

/* hexagon mark drawing itself in, like a wireframe forming */

@keyframes hex-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes logo-reveal {
  to { opacity: 1; transform: scale(1); }
}

/* tracked-out wordmark that spreads into place beneath the mark */

@keyframes letter-in {
  to { opacity: 1; transform: translateY(0); letter-spacing: 0.05em; }
}

/* bright energy flash that fires right before the iris wipe uncovers the site */

@keyframes burst-flash {
  0%   { opacity: 0;   transform: scale(1); }
  35%  { opacity: 0.9; transform: scale(6); }
  100% { opacity: 0;   transform: scale(16); }
}

@media (prefers-reduced-motion: reduce) {.preloader-glow, .preloader-orb, .ping, .hex-outline,
  .preloader-mark-logo, .preloader-wordmark span, .preloader-burst {
    animation: none !important;
    opacity: 1;
  }}/* ==========================================================================
   7. HEADER & NAVIGATION
   ========================================================================== */

/* Anchor links must clear the fixed header. Without this, jumping to a
   section lands with its heading tucked under the bar the moment the header
   reappears. Values track the header heights set below (80 / 72 / 64px). */
html {
  scroll-padding-top: 92px;
}
@media (max-width: 1024px) {
  html { scroll-padding-top: 84px; }
}
@media (max-width: 768px) {
  html { scroll-padding-top: 76px; }
}

.site-header {
  /* Fixed, not absolute. The scroll-up reveal toggles translateY on this
     element, but an absolutely positioned header leaves with the document —
     by the time anyone scrolled, it was already a thousand pixels above the
     viewport and removing .nav-hidden brought back nothing. */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  z-index: 1000;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease,
              height 0.3s ease;
}
.site-header.nav-hidden {
  transform: translateY(-100%);
}

/* --------------------------------------------------------------------------
   WordPress admin bar

   Nothing in the theme accounted for it, so for anyone logged in the fixed
   header rendered underneath WordPress's own bar and the two sat on top of
   each other. Anything pinned to the top of the viewport has to start below
   it instead.

   The breakpoints here are WordPress's, not the theme's, because they track
   the bar's height rather than the layout: core sets it to 32px, 46px below
   782px, and switches it to position: absolute below 600px -- at which point
   it scrolls away with the document, so a fixed element belongs back at the
   top edge. Hence the 0px at the bottom breakpoint rather than a taller
   offset.

   .nav-hidden hides the header with translateY(-100%), which is unaffected:
   from top: 32px an 80px-tall header lands with its bottom edge at 32px,
   exactly under the bar, which paints over it at a higher z-index.
   -------------------------------------------------------------------------- */
body.admin-bar {
  --rcn-adminbar: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar { --rcn-adminbar: 46px; }
}
@media screen and (max-width: 600px) {
  body.admin-bar { --rcn-adminbar: 0px; }
}

body.admin-bar .site-header {
  top: var(--rcn-adminbar, 0px);
}

/* The drawer is z-index 100000, above the bar's 99999, so without this it
   covers the bar completely and an editor cannot reach it while the menu is
   open. Height has to come down by the same amount or the panel overflows. */
body.admin-bar .mobile-drawer {
  top: var(--rcn-adminbar, 0px);
  height: calc(100% - var(--rcn-adminbar, 0px));
}

/* Anchor offsets, tracking the scroll-padding values set above. `html` is not
   inside `body`, so the class has to be matched upward from it. Without
   :has() support this simply keeps today's values -- anchors land where they
   already do, so it degrades rather than breaks. */
html:has(body.admin-bar) {
  scroll-padding-top: calc(92px + 32px);
}
@media (max-width: 1024px) {
  html:has(body.admin-bar) { scroll-padding-top: calc(84px + 32px); }
}
@media screen and (max-width: 782px) {
  html:has(body.admin-bar) { scroll-padding-top: calc(84px + 46px); }
}
@media (max-width: 768px) {
  html:has(body.admin-bar) { scroll-padding-top: calc(76px + 46px); }
}
@media screen and (max-width: 600px) {
  html:has(body.admin-bar) { scroll-padding-top: 76px; }
}

/* --------------------------------------------------------------------------
   Header: solid backing once the page has scrolled.
   The bar is designed to sit transparently over the hero. Once it is pinned
   over ordinary page content it needs its own background, and it needs the
   dark link treatment too — the homepage nav is white, which would vanish
   against a pale bar. JS adds .light-header alongside this class.
   -------------------------------------------------------------------------- */
.site-header.scrolled-solid {
  background-color: var(--bg-master);
  border-bottom-color: var(--card-border);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .site-header.scrolled-solid {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}
.header-inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  height: 100%;
  gap: 1rem;
}
.header-logo {
  display: flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
  flex-shrink: 0;
}
.header-logo img {
  height: 47px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
  transition: transform 0.25s ease;
}
.header-logo:hover img {
  transform: scale(1.02);
}
.nav-list {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-item {
  position: relative;
}
.nav-link {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: color var(--duration) var(--ease-std), background-color var(--duration) var(--ease-std);
}
.nav-link:hover, .nav-item:hover > .nav-link {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.04);
}
.nav-chevron {
  width: 12px;
  height: 12px;
  opacity: 0.5;
  transition: transform var(--duration) var(--ease-std);
}
.nav-item:hover > .nav-link .nav-chevron {
  transform: rotate(180deg);
  opacity: 1;
  color: var(--color-accent);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
/* Buttons */
.btn-contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  height: 42px;
}
.btn-contact svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}
.btn-contact:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--color-accent-rgb), 0.2);
}

/* Homepage hero's secondary CTA reuses .btn-contact for its click behavior
   (opens the contact modal) but should read as the lower-emphasis action
   next to "Explore Our Services" -- outlined/transparent by default,
   filling in with the same accent gradient only on hover. Scoped to this
   specific button combo so every other .btn-contact sitewide (nav,
   service-page CTAs) is unaffected. */
.hero-cta-row .hero-cta-secondary.btn-contact {
  background: transparent !important;
  border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
}

.hero-cta-row .hero-cta-secondary.btn-contact:hover {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%) !important;
  border-color: transparent !important;
}

/* A generic sitewide rule (inner-pages.css, @media max-width:992px) forces
   every .btn-contact to width:100% on tablet/mobile -- meant for single-
   button contexts like the CTA box. Because only the hero's secondary
   button carries the .btn-contact class (for its modal-opening behavior),
   it alone was going full-width while its "Explore Our Services" sibling
   stayed content-sized, an inconsistent, mismatched pair. Matching the
   primary button to the same full-width treatment at the same breakpoint
   so both buttons transition together. */
@media (max-width: 992px) {
  .hero-cta-row .btn-hero {
    width: 100%;
    max-width: 320px;
  }
}
@media (max-width: 480px) {
  .hero-cta-row .btn-hero {
    max-width: 100%;
  }
}

/* ==========================================================================
   HEADER — responsive tiers
   Desktop >1200 · Laptop 1024–1200 · Tablet 768–1024 · Mobile <768 · Small <480
   ========================================================================== */

/* Laptop / small desktop */
@media (max-width: 1200px) {.nav-link { padding: 0.55rem 0.8rem; font-size: 0.8rem; }}

/* Tablet / iPad — nav collapses into the hamburger drawer below 1024px
   (see .desktop-nav / .hamburger swap further down); this tier just tunes
   header chrome so the logo + actions row doesn't feel oversized once the
   nav links are gone. */
@media (max-width: 1024px) {.site-header { height: 72px; }.header-inner { padding: 0 1.25rem; }.header-logo img { height: 40px; }}

/* Mobile */
@media (max-width: 768px) {.site-header { height: 64px; }.header-inner { padding: 0 1rem; gap: 0.75rem; }.header-logo img { height: 34px; }.header-actions { gap: 0.6rem; }}

/* Small mobile */
@media (max-width: 480px) {header img {
    height: 32px;
    width: auto;
  }.header-inner, header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px;
  }.btn-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    gap: 4px;
    white-space: nowrap;
    margin: 0;
  }.btn-contact svg {
    width: 12px;
    height: 12px;
    stroke-width: 3;
  }}
nav#mobileDrawer .accordion .accordion-body, .mobile-drawer .accordion-body {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  transition: opacity 0.2s ease;
}nav#mobileDrawer .accordion button.accordion-trigger[aria-expanded="true"] + .accordion-body, .mobile-drawer .accordion-trigger[aria-expanded="true"] + .accordion-body {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  padding: 0.75rem 0.5rem 1.25rem 0.5rem !important;
}.mobile-drawer .drawer-link, nav#mobileDrawer .drawer-link {
  color: var(--color-text) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: block !important;
  padding: 0.6rem 0.5rem !important;
  border-radius: 6px !important;
  transition: color 0.15s ease, background-color 0.15s ease !important;
}.mobile-drawer .drawer-sector-title, nav#mobileDrawer .drawer-sector-title {
  display: block !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--color-text-dim) !important;
  margin: 1rem 0 0.25rem 0 !important;
  padding-left: 0.5rem !important;
}

@keyframes drawerSlideDown {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Default (transparent-over-hero) nav text — only meaningful while
   .site-header does NOT have .light-header applied. Once .light-header
   is present, the rules further below (GLOBAL WHITE & BLACK HEADER)
   take over and this no longer applies. */
.site-header:not(.light-header) .nav-list .nav-item .nav-link {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: color var(--duration, 0.25s) ease;
}
.site-header:not(.light-header) .nav-list .nav-item:hover > .nav-link {
  color: var(--color-accent);
  text-shadow: none;
}
.site-header:not(.light-header) .nav-chevron {
  color: #ffffff;
  opacity: 0.8;
}
.site-header:not(.light-header) .hamburger .bar {
  background-color: var(--color-accent);
}
.site-header:not(.light-header) .nav-item:hover .nav-chevron {
  color: var(--color-accent);
  opacity: 1;
}/* END */
/* --------------------------------------------------------------------------
   Nav link colour, decided in CSS rather than by JavaScript.

   The white treatment above is only correct in one situation: the bar sitting
   transparently over the homepage's dark hero video. Everywhere else the bar
   is either solid (painted with --bg-master, which is near-white in light
   mode) or over ordinary page content, and white links vanish.

   Until now that was handled entirely by JS adding .light-header. That put the
   whole thing at the mercy of main.js -- a stale cached copy, or a script
   error earlier in the file, left white links on a near-white bar. These two
   rules reach the same result from the markup alone, so the nav is legible
   before any script runs and stays legible if none ever does.
   -------------------------------------------------------------------------- */

/* 1. Any page that is not the homepage: the header is never over the hero
      video, so links take the page text colour from the outset. */
body:not(.home):not(.front-page) .site-header .nav-list .nav-item .nav-link,
body:not(.home):not(.front-page) .site-header nav .nav-link,
/* 2. Any page at all, once the bar has a solid background under it. */
.site-header.scrolled-solid .nav-list .nav-item .nav-link,
.site-header.scrolled-solid nav .nav-link {
	color: var(--color-text) !important;
	text-shadow: none !important;
}

body:not(.home):not(.front-page) .site-header .nav-chevron,
.site-header.scrolled-solid .nav-chevron {
	color: var(--color-text) !important;
	opacity: 0.7;
}

body:not(.home):not(.front-page) .site-header .nav-list .nav-item:hover > .nav-link,
body:not(.home):not(.front-page) .site-header .nav-item:hover .nav-chevron,
.site-header.scrolled-solid .nav-list .nav-item:hover > .nav-link,
.site-header.scrolled-solid .nav-item:hover .nav-chevron {
	color: var(--color-accent) !important;
	opacity: 1;
}

body:not(.home):not(.front-page) .site-header .hamburger .bar,
.site-header.scrolled-solid .hamburger .bar {
	background-color: var(--color-text) !important;
}
/* END nav link colour */

/* NEW DESIGN FOR MEGA MENU FOR RESIDENTAL AND COMMERCIAL NAVIGATION BAR */

.nav-item.has-premium-menu {
  position: static !important; 
}.premium-mega-menu {
  position: absolute !important;
  top: 100% !important; 
  left: 50% !important;
  transform: translateX(-50%) translateY(8px) scale(0.995) !important;
  width: 95vw !important;
  max-width: 1280px !important; 
  background-color: var(--glass-bg) !important;
  border: 1px solid rgba(var(--ink-rgb), 0.06) !important;
  border-radius: 14px !important;
  box-shadow: 0 40px 80px -15px rgba(var(--ink-rgb), 0.08), 
              0 15px 30px -10px rgba(var(--ink-rgb), 0.03) !important;
  padding: 2.5rem !important; 
  box-sizing: border-box !important;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
              visibility 0.3s !important;
  will-change: transform, opacity;
}.nav-item.has-premium-menu:hover .premium-mega-menu, .nav-item.has-premium-menu:focus-within .premium-mega-menu, .nav-item.has-premium-menu.active .premium-mega-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(12px) scale(1) !important;
  pointer-events: auto !important;
}.premium-mega-menu::before {
  content: "" !important;
  position: absolute !important;
  top: -7px !important; 
  left: var(--arrow-left, 245px) !important;
  transform: rotate(45deg) !important;
  width: 14px !important;
  height: 14px !important;
  background-color: var(--glass-bg) !important; 
  border-top: 1px solid rgba(var(--ink-rgb), 0.06) !important;
  border-left: 1px solid rgba(var(--ink-rgb), 0.06) !important;
  z-index: 1001 !important;
}.premium-mega-menu::after {
  content: "" !important;
  position: absolute !important;
  top: -24px !important;
  left: 0 !important;
  width: 100% !important;
  height: 24px !important;
  background: transparent !important;
  z-index: 999 !important;
}.orascom-mega-container {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  max-width: 100% !important; 
  padding: 0 !important; 
  gap: 3.5rem !important; 
}.sector-tabs-sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  min-width: 200px !important;
  flex-shrink: 0 !important;
}.sector-tab-btn {
  background: transparent !important;
  border: none !important;
  text-align: left !important;
  padding: 0.85rem 1.25rem !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--color-text-muted) !important;
  cursor: pointer !important;
  border-radius: 8px !important; 
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
}.sector-tab-btn:hover {
  color: var(--color-text) !important;
  background-color: rgba(var(--ink-rgb), 0.04) !important; 
}.sector-tab-btn.active {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%) !important; 
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(var(--color-accent-rgb), 0.22) !important;
}.sector-panels-wrapper {
  flex: 1 !important;
  width: 100% !important;
}.orascom-layout-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1rem 1.25rem !important;
  width: 100% !important;
}.orascom-feature-col {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  position: relative !important;
  padding: 0.65rem !important;
  border-radius: 11px !important;
  transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
  border: 1px solid transparent !important;
}.orascom-feature-col:hover {
  background-color: rgba(var(--ink-rgb, 255, 255, 255), 0.04) !important;
  border-color: rgba(var(--color-accent-rgb, 0, 180, 150), 0.2) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-2px) !important;
}.orascom-img-frame {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 0.7rem !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
  background-color: rgba(var(--ink-rgb, 255, 255, 255), 0.03) !important;
}.orascom-img-frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}.orascom-feature-col:hover .orascom-img-frame img {
  transform: scale(1.06) !important;
}.orascom-feature-col h3 {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.32 !important;
}.orascom-feature-col h3 a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}.orascom-feature-col:hover h3 a {
  color: var(--color-accent) !important;
}.orascom-feature-col p {
  margin: 0 !important;
  font-size: 0.78rem !important;
  line-height: 1.42 !important;
  color: var(--color-text-muted) !important;
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, margin-top 0.35s ease !important;
}
.orascom-feature-col:hover p,
.orascom-feature-col:focus-within p {
  max-height: 130px !important;
  opacity: 1 !important;
  margin-top: 0.4rem !important;
}.orascom-feature-list {
  margin: 0.45rem 0 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
  color: var(--color-text-muted) !important;
}.orascom-feature-list li {
  position: relative !important;
  padding-left: 0.85rem !important;
}.orascom-feature-list li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.6em !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background-color: var(--color-accent) !important;
}.orascom-directory-col {
  display: flex !important;
  flex-direction: column !important;
  padding-left: 1.75rem !important;
  border-left: 1px solid rgba(var(--ink-rgb), 0.06) !important;
  text-align: left !important;
}.directory-heading {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--color-text-dim) !important;
  margin-bottom: 1.5rem !important;
}.directory-links-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
}.directory-links-list a {
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: var(--color-text-muted) !important;
  text-decoration: none !important;
  transition: color 0.15s ease, transform 0.15s ease !important;
  display: inline-block !important;
}.directory-links-list a:hover {
  color: var(--color-accent) !important; 
  transform: translateX(3px) !important; 
}.sector-content-panel {
  display: none; 
}.sector-content-panel.active {
  display: block !important;
  animation: panelFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

@keyframes panelFadeIn {
  from { 
    opacity: 0; 
    transform: translateY(6px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}.nav-item.has-dropdown {
  position: relative !important; 
}.standard-dropdown.profile-dropdown-box {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(14px) scale(0.99) !important;
  width: 580px !important; 
  background-color: var(--glass-bg) !important;
  backdrop-filter: blur(24px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(130%) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 40px 80px -15px rgba(var(--ink-rgb), 0.06) !important;
  padding: 1.75rem !important;
  box-sizing: border-box !important;
  z-index: 10000 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
              visibility 0.25s !important;
  will-change: transform, opacity;
}.standard-dropdown.profile-dropdown-box::before {
  content: "" !important;
  position: absolute !important;
  top: -7px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(45deg) !important; 
  width: 14px !important;
  height: 14px !important;
  background-color: inherit !important;
  backdrop-filter: inherit !important;
  -webkit-backdrop-filter: inherit !important;
  border-top: 1px solid var(--glass-border) !important;
  border-left: 1px solid var(--glass-border) !important;
  z-index: -1 !important;
}.site-header.light-header .standard-dropdown.profile-dropdown-box::before {
  border-top: 1px solid rgba(var(--ink-rgb), 0.06) !important;
  border-left: 1px solid rgba(var(--ink-rgb), 0.06) !important;
}.standard-dropdown.profile-dropdown-box::after {
  content: "" !important;
  position: absolute !important;
  top: -24px !important;
  left: 0 !important;
  width: 100% !important;
  height: 24px !important;
  background: transparent !important; 
  z-index: -2 !important;
}.nav-item.has-dropdown:hover .standard-dropdown.profile-dropdown-box, .nav-item.has-dropdown:focus-within .standard-dropdown.profile-dropdown-box, .nav-item.has-dropdown.active .standard-dropdown.profile-dropdown-box {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(4px) scale(1) !important;
  pointer-events: auto !important; 
}.dropdown-split-container {
  display: flex !important;
  gap: 2rem !important;
  align-items: stretch !important;
}
.dropdown-teaser-pane {
  position: relative !important;
  flex: 1.1 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border-radius: var(--radius-md, 10px) !important;
  padding: 1.4rem !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: 0 10px 28px -14px rgba(var(--ink-rgb), 0.22) !important;
  background-color: var(--color-surface) !important;
  transition: box-shadow 0.4s var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
              transform 0.4s var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
              border-color 0.4s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) !important;
}

.teaser-media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
}

.teaser-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transform: scale(1.05) !important;
  transition: transform 0.7s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) !important;
}

.teaser-media::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: linear-gradient(180deg,
    rgba(var(--color-bg-rgb), 0.45) 0%,
    rgba(var(--color-bg-rgb), 0.72) 45%,
    rgba(var(--color-bg-rgb), 0.97) 100%) !important;
  pointer-events: none !important;
}

[data-theme="dark"] .teaser-media::after {
  background: linear-gradient(180deg,
    rgba(var(--color-bg-rgb), 0.55) 0%,
    rgba(var(--color-bg-rgb), 0.78) 45%,
    rgba(var(--color-bg-rgb), 0.98) 100%) !important;
}

.dropdown-teaser-pane::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  border-radius: inherit !important;
  box-shadow: inset 0 0 0 1px rgba(var(--color-accent-rgb), 0) !important;
  transition: box-shadow 0.4s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) !important;
  pointer-events: none !important;
}

/* thin accent hairline along the top edge that draws in on hover */
.dropdown-teaser-pane .teaser-media::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  height: 2px !important;
  width: 32% !important;
  background: linear-gradient(90deg, var(--color-accent), transparent) !important;
  z-index: 2 !important;
  transition: width 0.5s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) !important;
}
.dropdown-teaser-pane:hover .teaser-media::before {
  width: 100% !important;
}

.dropdown-teaser-pane:hover {
  box-shadow: 0 20px 40px -16px rgba(var(--ink-rgb), 0.3),
              0 0 0 1px rgba(var(--color-accent-rgb), 0.14) !important;
  transform: translateY(-3px) !important;
  border-color: rgba(var(--color-accent-rgb), 0.3) !important;
}
.dropdown-teaser-pane:hover::after {
  box-shadow: inset 0 0 0 1px rgba(var(--color-accent-rgb), 0.25) !important;
}

.teaser-heading {
  position: relative !important;
  z-index: 3 !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 0.55rem !important;
  text-shadow: 0 1px 12px rgba(var(--color-bg-rgb), 0.6) !important;
}

.teaser-text {
  position: relative !important;
  z-index: 3 !important;
  margin: 0 0 1.35rem 0 !important;
  font-size: 0.82rem !important;
  line-height: 1.55 !important;
  color: var(--color-text-muted) !important;
}

.teaser-action-link {
  position: relative !important;
  z-index: 3 !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
  text-decoration: none !important;
  margin-top: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: fit-content !important;
  transition: color 0.25s var(--ease-out, ease), gap 0.25s var(--ease-out, ease) !important;
}

[data-theme="dark"] .teaser-heading,
[data-theme="dark"] .teaser-action-link {
  color: #fff !important;
}
[data-theme="dark"] .teaser-heading {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}
[data-theme="dark"] .teaser-text {
  color: rgba(255, 255, 255, 0.78) !important;
}

.teaser-action-link::after {
  content: "→" !important;
  display: inline-block !important;
  transition: transform 0.3s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) !important;
}

.teaser-action-link:hover {
  color: var(--color-accent) !important;
  gap: 8px !important;
}
.teaser-action-link:hover::after {
  transform: translateX(3px) !important;
}

@media (prefers-reduced-motion: reduce) {.dropdown-teaser-pane,
  .dropdown-teaser-pane:hover,
  .teaser-media img,
  .teaser-media::before,
  .teaser-action-link::after {
    transition: none !important;
    transform: none !important;
  }}

.dropdown-links-pane {
  flex: 1.3 !important;
  display: flex !important;
  flex-direction: column !important;
}.pane-heading {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--color-text-dim) !important;
  margin-bottom: 1rem !important;
}.pane-links-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
}.pane-tile-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.15rem !important;
  text-decoration: none !important;
  padding: 0.65rem 0.75rem !important;
  border-radius: 8px !important;
  background-color: transparent !important;
  transition: background-color 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}.pane-tile-item:hover {
  background-color: rgba(var(--ink-rgb), 0.03) !important;
  transform: translateX(3px) !important;
}.tile-item-title {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
  transition: color 0.15s ease !important;
}.pane-tile-item:hover .tile-item-title {
  color: var(--color-accent) !important;
}.tile-item-desc {
  font-size: 0.78rem !important;
  color: var(--color-text-muted) !important;
  line-height: 1.35 !important;
}
/* ==========================================================================
   "OUR EXPERIENCE" SUB-FLYOUT — Our Team / Our Values
   Inline expand (not an absolutely-positioned popover) so it can never get
   clipped by a mega-panel with overflow:hidden. Sits right after the
   existing .pane-tile-item / .tile-item-desc block above.
   ========================================================================== */
.pane-tile-item-wrap {
  list-style: none !important;
}

.pane-tile-item-wrap .tile-item-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.tile-subflyout-chevron {
  width: 14px !important;
  height: 14px !important;
  color: var(--color-text-dim) !important;
  transition: transform 0.3s var(--ease-out), color 0.2s ease !important;
  flex-shrink: 0 !important;
}

.has-subflyout:hover .tile-subflyout-chevron,
.has-subflyout:focus-within .tile-subflyout-chevron,
.has-subflyout.is-open .tile-subflyout-chevron {
  transform: rotate(90deg) !important;
  color: var(--color-accent) !important;
}

.sub-flyout {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.35s var(--ease-out), opacity 0.25s var(--ease-out) !important;
  opacity: 0 !important;
}

.has-subflyout:hover .sub-flyout,
.has-subflyout:focus-within .sub-flyout,
.has-subflyout.is-open .sub-flyout {
  max-height: 120px !important;
  opacity: 1 !important;
}

.sub-flyout-link {
  display: block !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--color-text-muted) !important;
  text-decoration: none !important;
  padding: 0.5rem 0.75rem 0.5rem 1.5rem !important;
  border-radius: 8px !important;
  position: relative !important;
  transition: background-color 0.2s ease, color 0.15s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sub-flyout-link::before {
  content: "" !important;
  position: absolute !important;
  left: 0.75rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--color-border) !important;
  transition: background-color 0.2s ease !important;
}

.sub-flyout-link:hover {
  background-color: rgba(var(--ink-rgb), 0.03) !important;
  color: var(--color-accent) !important;
  transform: translateX(3px) !important;
}

.sub-flyout-link:hover::before {
  background: var(--color-accent) !important;
}

@media (prefers-reduced-motion: reduce) {.sub-flyout,
  .tile-subflyout-chevron {
    transition: none !important;
  }}

.nav-item.has-dropdown:hover .nav-chevron {
  transform: rotate(180deg) !important;
  color: var(--color-accent) !important;
}/* RESIDENTIAL SECTOR (END)*/

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 100001;
}.hamburger .bar {
  width: 100%;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 0.3s ease, 
              background-color 0.3s ease;
}.hamburger.is-open .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}.hamburger.is-open .bar:nth-child(2) {
  opacity: 0;
}.hamburger.is-open .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1024px) {.desktop-nav {
    display: none; 
  }.hamburger {
    display: flex; 
  }}

/* ==========================================================================
   MOBILE DRAWER
   ========================================================================== */

   .drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 13, 14, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-out), visibility 0.4s;
}

.drawer-overlay.open { opacity: 1; visibility: visible; }

/* ---------- Panel shell ---------- */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 400px;
  height: 100%;
  background-color: var(--bg-master, #faf9f7);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.12);
  z-index: 100000;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;

  transform: translateX(100%);
  transition: transform 0.45s var(--ease-out);
}

.mobile-drawer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--color-accent), transparent 60%);
  opacity: 0.7;
}

.mobile-drawer.open,
.mobile-drawer[aria-hidden="false"] {
  transform: translateX(0);
}

/* ---------- Top bar: logo + close ---------- */
.drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.5rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.drawer-logo img {
  height: 28px;
  width: auto;
  object-fit: contain;
}

.drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-surface);
  border: none;
  color: var(--color-text);
  cursor: pointer;
  transition: transform 0.3s var(--ease-out), background 0.25s var(--ease-out), color 0.25s var(--ease-out);
}

.drawer-close:hover {
  background: var(--color-accent);
  color: #ffffff;
  transform: rotate(90deg);
}

.drawer-close svg { width: 18px; height: 18px; }

/* ---------- Scrollable link area ---------- */
.drawer-links {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.drawer-links::-webkit-scrollbar { width: 4px; }
.drawer-links::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }

/* ---------- Accordion ---------- */
.accordion {
  border-bottom: 1px solid var(--color-border);
}

.accordion:last-child { border-bottom: none; }

.accordion-trigger {
  width: 100%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 1.1rem 0.5rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  border-radius: var(--radius-sm);
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out);
}

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

.accordion-trigger-label {
  display: flex;
  align-items: center;
  gap: 12px;
}

.accordion-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-accent-dim);
  color: var(--color-accent);
  flex-shrink: 0;
  transition: background 0.25s var(--ease-out), transform 0.3s var(--ease-out);
}

.accordion-icon svg { width: 16px; height: 16px; }

.accordion-trigger[aria-expanded="true"] .accordion-icon {
  background: var(--color-accent);
  color: #ffffff;
  transform: scale(1.05);
}

.accordion-chevron {
  width: 16px;
  height: 16px;
  color: var(--color-text-dim);
  flex-shrink: 0;
  transition: transform 0.35s var(--ease-out), color 0.25s var(--ease-out);
}

.accordion-trigger[aria-expanded="true"] .accordion-chevron {
  transform: rotate(180deg);
  color: var(--color-accent);
}

/* smooth height animation via grid-template-rows (no more display:none snap) */
.accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease-out);
}

.accordion-body-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 0.5rem;
}

.accordion-trigger[aria-expanded="true"] + .accordion-body {
  grid-template-rows: 1fr;
}

.accordion-trigger[aria-expanded="true"] + .accordion-body .accordion-body-inner {
  padding-bottom: 0.75rem;
}

/* ---------- Sector groups ---------- */
.drawer-sector-group {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 1rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--color-accent-dim);
}

.drawer-sector-group:first-child { margin-top: 0.25rem; }

.drawer-sector-title {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-dim);
  margin-bottom: 0.4rem;
}

/* ---------- Links ---------- */
.drawer-link {
  position: relative;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0.55rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out), padding-left 0.2s var(--ease-out);
}

.drawer-link:hover,
.drawer-link:focus-visible {
  color: var(--color-text);
  background: var(--color-surface);
  padding-left: 0.85rem;
}

/* ---------- Fixed footer CTA ---------- */
.drawer-footer {
  flex-shrink: 0;
  padding: 1.25rem 1.5rem 1.5rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: linear-gradient(180deg, transparent, rgba(var(--color-accent-rgb), 0.03));
}

.drawer-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 0.85rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
  background: var(--color-accent);
  border-radius: 999px;
  transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out), gap 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.drawer-cta:hover {
  background: var(--color-accent-hover);
  transform: translateY(-2px);
  gap: 12px;
  box-shadow: 0 12px 28px rgba(var(--color-accent-rgb), 0.28);
}

.drawer-cta svg { width: 16px; height: 16px; }

.drawer-socials { display: flex; justify-content: center; gap: 0.6rem; }

.drawer-social-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-dim);
  transition: transform 0.3s var(--ease-out), background 0.25s var(--ease-out), color 0.25s var(--ease-out);
}

.drawer-social-pill svg { width: 16px; height: 16px; }

.drawer-social-pill:hover {
  background: var(--color-accent);
  color: #ffffff;
  transform: translateY(-3px);
}

/* ---------- Staggered reveal for panel content on open ---------- */
.mobile-drawer.open .accordion {
  animation: drawer-item-rise 0.45s var(--ease-out) backwards;
}

.mobile-drawer.open .accordion:nth-child(1) { animation-delay: 0.05s; }
.mobile-drawer.open .accordion:nth-child(2) { animation-delay: 0.1s; }
.mobile-drawer.open .accordion:nth-child(3) { animation-delay: 0.15s; }
.mobile-drawer.open .accordion:nth-child(4) { animation-delay: 0.2s; }

@keyframes drawer-item-rise {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (max-width: 380px) {.mobile-drawer { max-width: 100%; }}

   /* ==========================================================================
   9. CONTACT MODAL
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}.modal-overlay.is-active {
  opacity: 1;
  visibility: visible;
}.modal-window {
  position: relative;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  transform: translateY(12px);
  transition: transform 0.3s var(--ease-out);
}.modal-overlay.is-active .modal-window {
  transform: translateY(0);
}.modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  transition: color var(--duration), background var(--duration);
}.modal-close:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.05);
}.modal-close svg { width: 18px; height: 18px; }.modal-inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}.modal-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}/* Contact Form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 540px) {.form-row { grid-template-columns: 1fr; }}.field-group {
  position: relative;
}.field-input {
  width: 100%;
  padding: 1rem 0.9rem 0.6rem;
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  transition: border-color var(--duration);
}.field-input:focus {
  border-color: var(--color-accent);
}.field-label {
  position: absolute;
  top: 50%;
  left: 0.9rem;
  transform: translateY(-50%);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  pointer-events: none;
  transition: top 0.2s, font-size 0.2s, color 0.2s;
}.field-input:focus + .field-label, .field-input:not(:placeholder-shown) + .field-label {
  top: 0.45rem;
  font-size: 0.65rem;
  color: var(--color-accent);
  transform: none;
}/* Phone Picker */
.phone-group {
  display: flex;
  gap: 0.5rem;
}.phone-picker {
  position: relative;
  flex-shrink: 0;
}.phone-picker-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.75rem;
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.85rem;
  white-space: nowrap;
  height: 100%;
  transition: border-color var(--duration);
}.phone-picker-toggle:hover { border-color: var(--color-accent); }.phone-picker-toggle svg { width: 12px; height: 12px; }.phone-picker-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  min-width: 180px;
  padding: 0.4rem;
  z-index: 50;
  display: none;
}.phone-picker-list.is-open { display: block; }.picker-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--duration), color var(--duration);
}.picker-option:hover {
  background: var(--color-accent-dim);
  color: var(--color-accent);
}.picker-option strong { margin-left: auto; }.phone-input {
  flex: 1;
  padding: 0.7rem 0.9rem;
}/* Service Selector */
.service-select-wrap { position: relative; }.service-select-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.85rem 0.9rem;
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-dim);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-align: left;
  transition: border-color var(--duration);
}.service-select-trigger:hover { border-color: var(--color-accent); }.service-select-trigger svg { width: 14px; height: 14px; }.service-select-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.4rem;
  z-index: 50;
  display: none;
}.service-select-list.is-open { display: block; }.service-option {
  padding: 0.65rem 0.9rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--duration), color var(--duration);
}.service-option:hover {
  background: var(--color-accent-dim);
  color: var(--color-accent);
}.btn-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-bg);
  background: var(--color-accent);
  border-radius: var(--radius-sm);
  transition: background var(--duration), opacity var(--duration), transform var(--duration), box-shadow var(--duration);
}.btn-submit svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  transition: transform var(--duration);
}.btn-submit:hover:not(:disabled) {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px var(--color-accent-dim);
}.btn-submit:hover:not(:disabled) svg {
  transform: translateX(3px);
}.btn-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}/* ==========================================================================
   10. HERO SECTION
   ========================================================================== */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
}.hero-video-wrap {
  position: absolute;
  inset: 0;
}.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.25) 0%,
      rgba(0, 0, 0, 0.0) 30%,
      rgba(0, 0, 0, 0.0) 60%,
      rgba(0, 0, 0, 0.5) 100%
    ),
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.6) 55%,
      rgba(0, 0, 0, 0.18) 100%
    );
}
.hero-overlay::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-teal, #00A499) 50%, transparent 100%);
  opacity: 0.7;
}.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--container-width);
  width: 100%;
  margin: 0 auto;
  padding: calc(var(--header-height) + 2rem) var(--container-pad) 2rem;
  background-color: transparent;
}.hero-subtitle {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 1.5rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}.hero-content.reveal-active .hero-subtitle {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: 0.05s;
}.hero-title {
  font-size: clamp(2.5rem, 5.5vw, 4.5rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  font-weight: 700;
  max-width: 820px !important; 
  margin-bottom: 1.75rem !important;
  color: #ffffff;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}.hero-title .accent {
  /* Sized down from the main heading -- the accent line here is a full
     descriptive sentence, not a short highlighted word/phrase, so at the
     same size/weight as the heading it visually competes with (and
     overwhelms) the heading above it. Mirrors .page-hero-title .accent's
     sizing rationale used on every inner service page. */
  display: block;
  font-size: 0.55em;
  font-weight: 500;
  line-height: 1.35;
  margin-top: 0.5rem;
  color: var(--color-accent);
}.hero-desc {
  font-size: 1.15rem !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.82) !important; /* fixed light tone: .hero-overlay is always a dark gradient regardless of theme, same reasoning as .hero-title's hardcoded #ffffff */
  margin: 0 !important;
  font-weight: 400;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}.hero-content.reveal-active .hero-desc {
  opacity: 1 !important;
  transform: translateY(0) !important;
}.hero-content.reveal-active .hero-title, .hero-content.reveal-active .hero-desc {
  opacity: 1 !important;
  transform: translateY(0) !important;
}/* --- 3. THE CASCADING DELAY MATRIX (Staggers items left-to-right/top-to-bottom) --- */
.hero-content.reveal-active .hero-title { 
  transition-delay: 0.1s; /* Title rises first */
}.hero-content.reveal-active .hero-desc:nth-child(1) { 
  transition-delay: 0.25s; /* Primary paragraph follows second */
}.hero-content.reveal-active .hero-desc:nth-child(2) { 
  transition-delay: 0.4s; /* Secondary metadata text slides in third */
}.btn-hero {
  margin-top: 2rem !important; 
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
  padding: 0.8rem 1.6rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  color: #ffffff !important; 
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
  border-radius: var(--radius-sm, 4px) !important;
  
  transition: background-color var(--duration, 0.25s) ease, 
              transform var(--duration, 0.25s) ease, 
              box-shadow var(--duration, 0.25s) ease !important;
}.btn-hero:hover {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
  transform: translateY(-2px) !important; 
  box-shadow: 0 8px 20px rgba(var(--color-accent-rgb), 0.3) !important; 
}.btn-hero:active {
  transform: translateY(0) !important; 
}.btn-hero svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  transition: transform var(--duration, 0.25s) ease !important;
}.btn-hero:hover svg { 
  transform: translateX(4px) !important;
}/* Hero Controls */
.hero-controls {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}.pager-dots {
  display: flex;
  gap: 0.5rem;
}.pager-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--duration), transform var(--duration);
}.pager-dot.active {
  background: var(--color-accent);
  transform: scale(1.25);
}.video-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: #fff;
  transition: border-color var(--duration), background var(--duration);
}.video-toggle:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-dim);
}.video-toggle svg { width: 14px; height: 14px; }.feature-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-dim);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  flex-shrink: 0;
}.feature-icon svg { width: 20px; height: 20px; }/* ==========================================================================
   12. RESIDENTIAL & COMMERCIAL GROUPS SECTION
   ========================================================================== */

/* --- Layout Header (Title Left, Button Right) --- */
.header-split-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 70px;
  gap: 40px;
}.header-left-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}.section-tag-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--color-text-muted);
}.section-title {
  font-size: 46px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--color-text);
  max-width: 750px;
}.explore-btn {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
  color: #ffffff;
  text-decoration: none;
  padding: 16px 28px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}.explore-btn:hover {
  transform: translateY(-2px);
  opacity: 0.95;
}.square-dot {
  margin-left: 12px;
  font-size: 8px;
}.service-row-item {
  display: grid;
  grid-template-columns: 140px 1.1fr 1fr;
  gap: 50px;
  padding: 50px;
  align-items: start;
  position: relative;
  margin-bottom: 24px; /* Creates spacing between sticky items */
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), 
              opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}.service-row-item.reveal-item {
  opacity: 0.3;
  transform: translateY(60px) scale(0.96);
}/* Fully visible state when scrolled into active view position */
.service-row-item.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}/* Collapsing background state when a lower element rolls up over it */
.service-row-item.reveal-item.is-stacked-behind {
  opacity: 0.15;
  transform: translateY(-20px) scale(0.98);
  filter: blur(1px); /* Subtly softens older background elements */
}/* Column 2: Center Image Preview */
/* Column 3: Narrative Text & Tag Badges */
/* Tag Pill Lists */
/* --- Scroll Fade-Up Mechanics --- */
.reveal-item, .reveal-section {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
}.reveal-item.is-visible, .reveal-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}/* --- Responsive Media Viewport Breaks --- */
@media (max-width: 1024px) {.service-row-item {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 30px;
  }.header-split-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }}/* ==========================================================================
   13. NEWS SECTION
   ========================================================================== */
/* Uppercase category flag configuration */
/* Large editorial headline styling rules */

.arrow-btn {
  width: 44px; 
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #edf2f7);
  color: var(--color-text-dim, #52525b);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}.arrow-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.5;
  display: block;
}.arrow-btn:hover {
  background-color: var(--color-surface2, #f4f4f5);
  color: var(--color-accent, var(--color-accent)); 
  border-color: rgba(var(--color-accent-rgb), 0.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}.arrow-btn:active {
  transform: translateY(0);
}

.news-thumb {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 250px;
  overflow: hidden;
}.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}.news-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background-color: var(--card-bg);
  color: var(--color-text);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 4px;
}.news-body {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}.news-body::after {
  content: "READ POST  →";
  display: inline-flex;
  align-items: center;
  margin-top: 24px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--color-text);
}.news-body h3 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text);
  margin: 0 0 auto 0;
}.news-meta {
  order: -1;
  font-size: 11px;
  color: var(--color-text-dim);
  letter-spacing: 0.5px;
  margin-bottom: 14px;
  display: flex;
  gap: 6px;
}.news-source {
  color: var(--color-text);
  font-weight: 600;
  text-transform: uppercase;
}.news-date {
  font-size: 0.75rem;
  color: var(--color-text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 1024px) {.news-body {
    padding: 22px;
  }.news-body h3 {
    font-size: 18px;
  }}

@media (max-width: 640px) {.news-thumb {
    min-height: 180px;
  }}.reveal-header-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), 
              transform 1s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
}.reveal-header-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}.grid-image-element {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1), 
              transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  will-change: transform, opacity;
}.grid-image-element.animate-up {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   14. CTA BANNER
   ========================================================================== */
.cta-section {
  position: relative;
  padding: var(--section-gap) 0;
  isolation: isolate;
}

.cta-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);
  opacity: 0.14;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.cta-glow-a { width: 480px; height: 480px; top: -180px; right: -120px; }
.cta-glow-b { width: 360px; height: 360px; bottom: -160px; left: -100px; opacity: 0.1; }

.cta-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.cta-left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cta-title {
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.cta-card {
  position: relative;
  z-index: 5;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  box-shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.18);
  transition: transform var(--duration), box-shadow var(--duration);
}
.cta-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 55px -18px rgba(0, 0, 0, 0.22);
}

.cta-card h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.cta-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cta-field-wrap {
  position: relative;
}
/* --- Responsive tuning: laptop / small desktop --- */
@media (max-width: 1180px) {.cta-inner { grid-template-columns: 1fr 0.95fr; gap: 3rem; }}

@media (max-width: 1024px) {.cta-inner {
    grid-template-columns: 1fr;
    gap: 2.75rem;
    text-align: center;
  }.cta-left { align-items: center; }.cta-card { max-width: 480px; margin: 0 auto; width: 100%; }.cta-glow-a { width: 360px; height: 360px; top: -140px; right: -160px; }.cta-glow-b { width: 280px; height: 280px; }}

/* --- Responsive tuning: mobile --- */
@media (max-width: 800px) {.cta-inner {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }.region-dropdown-wrap.is-open { margin-bottom: 220px; }}

/* --- Responsive tuning: small mobile --- */
@media (max-width: 480px) {.cta-card { padding: 1.25rem; gap: 1.25rem; }.cta-title { font-size: clamp(1.7rem, 7vw, 2.1rem); }.cta-glow { display: none; }.region-dropdown-wrap.is-open { margin-bottom: 260px; }}

/* --- Responsive tuning: small mobile --- */
@media (max-width: 480px) {.cta-inner { padding: 1.5rem 1.25rem; }.cta-card { padding: 1.25rem; gap: 1.25rem; }.cta-title { font-size: clamp(1.7rem, 7vw, 2.1rem); }.cta-glow { display: none; }}.region-dropdown-wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin-top: 1rem !important;
}.region-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  width: 100% !important;
  font-size: 0.8rem !important;
  color: var(--color-text-muted) !important;
  padding: 0.85rem 0.5rem !important;
  border-top: 1px solid var(--color-border) !important;
  background: transparent !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  cursor: pointer !important;
  transition: color var(--duration) !important;
  text-align: left !important;
  box-sizing: border-box !important;
}.region-toggle:hover { 
  color: var(--color-text) !important; 
}.region-toggle svg { 
  width: 14px !important; 
  height: 14px !important; 
  flex-shrink: 0 !important; 
  transition: transform var(--duration) var(--ease-std, ease) !important;
}.region-menu {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  top: 100% !important; 
  left: 0 !important;
  bottom: auto !important; 
  
  width: 100% !important; 
  background: var(--color-surface, #ffffff) !important;
  border: 1px solid var(--color-border, #edf2f7) !important;
  border-radius: var(--radius-md, 8px) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
  padding: 0.5rem !important;
  box-sizing: border-box !important;
  z-index: 200 !important; 
  transition: opacity var(--duration) var(--ease-std, ease), 
              transform var(--duration) var(--ease-std, ease) !important;
}.region-dropdown-wrap.is-open .region-menu {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
  opacity: 1 !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
}.region-dropdown-wrap.is-open .region-toggle svg {
  transform: rotate(180deg) !important;
}.region-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0.65rem 0.85rem !important;
  font-size: 0.85rem !important;
  color: var(--color-text-muted) !important;
  background: var(--color-surface2) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  text-decoration: none !important;
  transition: background var(--duration), color var(--duration) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}.region-item:hover {
  background: var(--color-accent-dim) !important;
  color: var(--color-accent) !important;
}.region-item strong { 
  color: var(--color-text) !important; 
  font-size: 0.85rem !important; 
}/* ==========================================================================
   15. OFFICE LOCATIONS
   ========================================================================== */
.section-title.left-aligned {
  text-align: left;
  margin-left: 0;
  margin-right: auto;
  font-size: 44px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--color-text);
  margin-bottom: 50px; 
}.locations-section {
  padding: var(--section-gap) 0;
}.locations-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

@media (min-width: 1100px) {.locations-grid { grid-template-columns: repeat(4, 1fr); }}

@media (max-width: 600px) {.locations-grid { grid-template-columns: 1fr; }}.location-card {
  position: relative; 
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 32px;
  overflow: hidden;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}.location-card .loc-bg {
  position: absolute;
  inset: 0; /* Stretches across all four edges of the box */

  /* Inherits the exact file URL path provided inline inside your HTML */
  background-image: var(--city-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Initial hidden state: completely transparent and zoomed out */
  opacity: 0;
  transform: scale(1.12);
  z-index: -1; /* Safeguards image texture behind text elements */

  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.4s ease;
}.loc-flag, .loc-body {
  position: relative;
  z-index: 2;
}.loc-body h3, .loc-body p, .loc-phone, .loc-map-btn {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}.location-card:hover {
  background: var(--card-bg);
  border-color: var(--color-accent); /* Highlights into your signature green accent color */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
  transform: translateY(-8px); /* Lifts the card upwards */
}.loc-bg {
  position: absolute;
  inset: 0;
  background-image: var(--city-bg);
  background-size: cover;
  background-position: center;
  opacity: 0.05;
  transition: opacity var(--duration);
}.location-card:hover .loc-bg {
  opacity: 0.25; /* Standard backdrop visibility level. Increase to 0.30 if too faint */
  transform: scale(1); /* Smoothly scales down into crisp visual alignment focus */
  
  /* ADJUST BACKGROUND IMAGE BRIGHTNESS HERE IF NEEDED */
  filter: brightness(1.3) contrast(1.3); 
}.location-card:hover .loc-body h3, .location-card:hover .loc-body p, .location-card:hover .loc-phone, .location-card:hover .loc-map-btn {
  transform: translateX(6px);
}.loc-flag {
  position: relative;
  width: 36px;
  height: 24px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}.loc-flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}.loc-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}.loc-body h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}.loc-body p {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}.loc-phone {
  font-size: 0.85rem;
  color: var(--color-accent);
  font-weight: 500;
  transition: color var(--duration);
}.loc-phone:hover { color: var(--color-accent-hover); }.loc-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-muted);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-top: 0.25rem;
  width: fit-content;
  transition: color var(--duration), border-color var(--duration), background var(--duration);
}.loc-map-btn:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: var(--color-accent-dim);
}.loc-map-btn svg { width: 13px; height: 13px; }/* ==========================================================================
   16. FOOTER
   ========================================================================== */
.site-footer {
  margin-top: auto;
  position: relative;
  background: #0c0d0e;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 4.5rem 0 2.5rem;
  overflow: hidden;
}

/* soft ambient brand glow, top-left */
.footer-glow {
  position: absolute;
  top: -180px;
  left: -120px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.14), transparent 70%);
  pointer-events: none;
}

/* thin animated accent line across the very top edge */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  opacity: 0.5;
}

/* ---------- Newsletter strip ---------- */

/* ---------- Columns ---------- */
.footer-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3.5rem;
}

/* AU: commercial is hidden → 3 visible children fill 3 columns */
[data-region="au"] .footer-grid {
  grid-template-columns: 1.5fr 1fr 1fr;
}

@media (max-width: 900px) {.footer-grid { grid-template-columns: 1fr 1fr; }}
@media (max-width: 540px) {.footer-grid { grid-template-columns: 1fr; }}

.footer-logo {
  width: 170px;
  height: auto;
  object-fit: contain;
  mix-blend-mode: screen;
  margin-bottom: 1rem;
}

.footer-brand p {
  font-size: 0.85rem;
  color: var(--color-text-dim);
  line-height: 1.65;
  max-width: 22rem;
  margin-bottom: 1.4rem;
}

.footer-socials {
  display: flex;
  gap: 0.65rem;
}
 
.social-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  overflow: visible;
  transition: transform 0.35s var(--ease-out),
              border-color 0.35s var(--ease-out),
              background 0.35s var(--ease-out),
              color 0.35s var(--ease-out),
              box-shadow 0.35s var(--ease-out);
}

.social-icon-svg {
  width: 18px;
  height: 18px;
  transition: transform 0.35s var(--ease-out);
}
 
.social-pill:hover,
.social-pill:focus-visible {
  transform: translateY(-4px);
  border-color: var(--color-accent);
  background: rgba(var(--color-accent-rgb), 0.14);
  color: var(--color-accent);
  box-shadow: 0 10px 24px rgba(var(--color-accent-rgb), 0.2);
}
 
.social-pill:hover .social-icon-svg { transform: scale(1.12); }
 
.social-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.35);
}
 
/* tiny tooltip on hover */
.social-pill::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--color-text);
  background: var(--card-bg);
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
 
.social-pill:hover::after,
.social-pill:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.social-pill:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
  background: rgba(var(--color-accent-rgb), 0.12);
  box-shadow: 0 10px 24px rgba(var(--color-accent-rgb), 0.18);
}

.footer-heading {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 1.1rem;
}

.footer-heading-spaced { margin-top: 2rem; }

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.footer-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.65);
  transition: color var(--duration) var(--ease-out), padding-left var(--duration) var(--ease-out);
}

.footer-links a::before {
  content: "";
  position: absolute;
  left: -14px;
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width var(--duration) var(--ease-out);
}

.footer-links a:hover {
  color: #ffffff;
  padding-left: 14px;
}

.footer-links a:hover::before { width: 10px; }

.badge-hiring {
  margin-left: 0.5rem;
  padding: 0.15rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--color-text);
  background: var(--color-accent);
  border-radius: 999px;
  animation: badge-pulse 2.4s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(var(--color-accent-rgb), 0); }
}

/* ---------- Bottom bar ---------- */
.footer-bottom {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-legal { display: flex; gap: 1.5rem; flex-wrap: wrap; }

.footer-legal a {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
  transition: color var(--duration) var(--ease-out);
}

.footer-legal a:hover { color: rgba(255, 255, 255, 0.75); }

.footer-copy { font-size: 0.8rem; color: rgba(255, 255, 255, 0.35); }

.scroll-top-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 90;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: opacity var(--duration) var(--ease-out),
              transform var(--duration) var(--ease-out),
              border-color var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out);
}

.scroll-top-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(var(--color-accent-rgb), 0.22);
}

.scroll-top-btn[hidden] { display: none; }

.scroll-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring-track { stroke: var(--color-border); stroke-width: 2; }

.ring-progress {
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-dasharray: 150.796;
  stroke-dashoffset: 150.796;
  stroke-linecap: round;
  /* No transition: js/chatbot.js already writes it once per frame, and a
     transition restarted on every frame repainted the SVG for nothing. */
}

.scroll-arrow {
  width: 18px;
  height: 18px;
  position: relative;
  z-index: 1;
  transition: transform 0.3s var(--ease-out);
}

.scroll-top-btn:hover .scroll-arrow { transform: translateY(-2px); }

/* ==========================================================================
   18. SCROLL REVEAL ANIMATIONS
   ========================================================================== */
.reveal-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}.reveal-item.is-visible {
  opacity: 1;
  transform: none;
}.locations-grid .reveal-item:nth-child(1) { transition-delay: 0ms; }.locations-grid .reveal-item:nth-child(2) { transition-delay: 80ms; }.locations-grid .reveal-item:nth-child(3) { transition-delay: 160ms; }.locations-grid .reveal-item:nth-child(4) { transition-delay: 240ms; }/* ==========================================================================
   19. RESPONSIVE BREAKPOINTS
   ========================================================================== */

@media (max-width: 768px) {:root {
    --section-gap: 4rem;
    --container-pad: 1.25rem;
  }}

@media (max-width: 500px) {.hero-title {
    font-size: 2rem;
  }}/* ==========================================================================
   CLIENT TICKER STYLES 
   ========================================================================== */
.collaboration-section {
  padding: 100px 0;
  background-color: var(--color-surface);
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  font-family: system-ui, -apple-system, sans-serif;
}.collaboration-inner-wrap {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}/* Header Columns */
.testimonial-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 60px;
}.testimonial-header .header-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
}.section-tag-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--color-text-muted);
}.testimonial-header .collaboration-title {
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -1.5px;
  color: var(--color-text);
  margin: 0;
}.testimonial-header .header-right {
  max-width: 380px;
  margin-top: 24px;
}.header-context-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0;
}.logo-marquee-wrapper {
  width: 100%;
  position: relative;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin: 60px 0 80px 0;
  overflow: hidden;
}.logo-marquee-track {
  display: flex;
  width: max-content;
  animation: runInfiniteTicker 30s linear infinite; 
}.logo-marquee-track .logo-capsule-tile {
  min-width: 280px;
  height: 140px;    
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 50px; 
  background-color: transparent;
  border-right: 1px solid var(--color-border); 
  box-sizing: border-box;
}.logo-marquee-track .logo-capsule-tile img {
  max-width: 100%;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: brightness(0) saturate(100%) opacity(0.65); 
  transition: opacity 0.3s ease;
}.logo-marquee-track .logo-capsule-tile:hover img {
  filter: brightness(0) saturate(100%);
  opacity: 0.95;
}.matrix-logo-fallback {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-dim);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

@keyframes runInfiniteTicker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes runInfiniteTicker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}.testimonial-slider-block {
  display: grid;
  grid-template-columns: 120px 1.3fr 1fr;
  gap: 50px;
  align-items: start;
}.slider-left-controls {
  display: flex;
  gap: 8px;
}.slider-left-controls .arrow-btn {
  width: 42px;
  height: 42px;
  background-color: var(--color-surface2);
  border: none;
  border-radius: 4px;
  font-size: 16px;
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}.slider-left-controls .arrow-btn:hover {
  background-color: var(--color-accent);
  color: #ffffff;
}.slider-center-body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}.testimonial-quote-text {
  font-size: 21px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-text);
  margin: 0;
  letter-spacing: -0.2px;
  transition: opacity 0.25s ease-in-out;
}.testimonial-author-profile {
  display: flex;
  align-items: center;
  gap: 14px;
}.author-avatar-wrap {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-surface2);
}.author-avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}.author-meta-info {
  display: flex;
  flex-direction: column;
}.author-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 2px 0;
}.author-role {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--color-text-dim);
}.slider-right-details {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  height: 100%;
  min-height: 100px;
}.timeline-stamp {
  font-family: monospace;
  font-size: 12px;
  color: var(--color-text-dim);
}.rating-stars-row {
  color: var(--color-accent);
  font-size: 14px;
  letter-spacing: 2px;
}

@media (max-width: 968px) {.testimonial-slider-block {
    grid-template-columns: 1fr;
    gap: 35px;
  }.slider-right-details {
    align-items: flex-start;
    min-height: auto;
    gap: 12px;
  }.testimonial-header {
    flex-direction: column;
    gap: 16px;
  }}.editorial-headline {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 2rem 0;
}.pillar-text-node {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}.pillar-text-node.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   RESPONSIVE LAYOUT BREAKPOINTS
   ========================================================================== */

/* ==========================================================================
   RESPONSIVE DESIGN BREAKPOINTS
   ========================================================================== */

/* ==========================================================================
   WHO WE WORK WITH
   Sits directly below the "Why Choose Us" split section (.skender-split-section)
   and reuses its established visual language: same editorial-headline
   typography, same check-icon-wrapper concept (24px accent circle) used
   across the detail/vision/promise checklists elsewhere in this file, and
   the same card hover lift used by premium-enhancements.css's .card family.
   ========================================================================== */
.who-we-work-with-section {
  padding: 6.5rem 0;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.who-we-work-with-section.reveal-active {
  opacity: 1;
  transform: translateY(0);
}

/* Progressive enhancement only: if no scroll-reveal JS ever attaches to this
   section, it stays fully visible by default instead of getting stuck at
   opacity:0. Only pages whose JS explicitly flags itself as reveal-aware
   (adds .js-reveal-ready to <html>) get the hidden starting state above. */

.wwww-inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  box-sizing: border-box;
  text-align: center;
}

.wwww-inner .editorial-headline {
  margin: 0 auto 3rem;
  text-align: center;
}

.wwww-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 2rem;
  text-align: left;
}

.wwww-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem 1.75rem;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 16px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.wwww-item:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--color-accent-rgb), 0.35);
  box-shadow: 0 24px 48px -24px rgba(var(--ink-rgb), 0.22);
}

.wwww-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--color-accent-dim);
  color: var(--color-accent);
}

.wwww-icon svg {
  width: 14px;
  height: 14px;
}

.wwww-item p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   RESPONSIVE BREAKPOINTS — matches the site's existing tablet/mobile scale
   (1024px tablet fold, 768px stacked rows, 640px mobile, 380px small phones)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {.who-we-work-with-section { padding: 5rem 0; }.wwww-list { gap: 1.1rem 1.5rem; }.wwww-item { padding: 1.35rem 1.5rem; }}

@media (max-width: 768px) {.wwww-inner .editorial-headline { margin-bottom: 2.25rem; }}

@media (max-width: 640px) {.who-we-work-with-section { padding: 4rem 0; }.wwww-inner { padding: 0 1.25rem; }.wwww-list {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }.wwww-item { padding: 1.25rem 1.4rem; }.wwww-item p { font-size: 0.9rem; }}

@media (max-width: 380px) {.who-we-work-with-section { padding: 3rem 0; }.wwww-item { gap: 0.75rem; padding: 1.1rem 1.15rem; }}

/* ==========================================================================
   WHY PARTNER WITH ONE CONSULTING TEAM
   Single-statement callout band. Sits between "Who We Work With" and the
   CTA banner. Reuses the same reveal-on-scroll pattern (with the same
   no-js safety net) as the section above it, plus its own icon glow pulse
   and a draw-in underline for a bit more visual interest on a text-only band.
   ========================================================================== */

@keyframes oneTeamPulse {
  0%, 100% { transform: scale(0.9); opacity: 0.55; }
  50%      { transform: scale(1.18); opacity: 1; }
}

/* --------------------------------------------------------------------------
   RESPONSIVE BREAKPOINTS
   -------------------------------------------------------------------------- */

/* ==========================================================================
   CONSULTING VALUE CHECKLIST ITEM
   Single bold-lead-in + running description row (e.g. "One Consultant,
   Multiple Disciplines — ..."). Same 24px accent-circle icon language as
   .check-icon-wrapper / .wwww-icon elsewhere in this file, enhanced with a
   checkmark stroke "draw-in" animation and a soft glow, matching the
   pulse treatment used on .one-team-icon-glow above.
   ========================================================================== */

/* No-js safety net: if the reveal engine never attaches, draw the check
   immediately instead of leaving it stuck at dashoffset:24 (invisible). */

@keyframes consultCheckDraw {
  to { stroke-dashoffset: 0; }
}

/* ==========================================================================
   GLOBAL WHITE & BLACK HEADER FOR NAVIGATION
========================================================================== */

.site-header.light-header .nav-list .nav-item .nav-link, .site-header.light-header nav .nav-link {
  color: var(--color-text) !important;
  text-shadow: none !important;
  transition: color 0.2s ease !important;
}.site-header.light-header .nav-list .nav-item:hover > .nav-link {
  color: var(--color-accent) !important;
}.site-header.light-header .header-actions .hamburger .bar, .site-header.light-header .hamburger .bar {
  background-color: var(--color-text) !important;
}

/* ==========================================================================
   GLOBAL WHITE & BLACK HEADER FOR NAVIGATION END
   ========================================================================== */

   /* ==========================================================================
   FAQ SECTION — accordion with smooth expand/collapse + reveal animation
   Uses shared design tokens from main.css (:root)
   ========================================================================== */

.faq-section { padding: var(--section-gap) 0; background: var(--color-bg); }

.faq-section .group-header { margin-bottom: 40px; }

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 820px;
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.faq-item:hover {
  border-color: rgba(var(--color-accent-rgb), 0.35);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.05);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  background: none;
  border: none;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: color 0.25s var(--ease-out);
}

.faq-question:hover { color: var(--color-accent); }

.faq-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-accent);
  transition: transform 0.4s var(--ease-out);
}

.faq-item.open .faq-icon { transform: rotate(135deg); }

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease-out);
}

.faq-answer > p {
  overflow: hidden;
  min-height: 0;
  margin: 0;
  padding: 0 24px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out) 0s, padding-bottom 0.4s var(--ease-out);
}

.faq-item.open .faq-answer { grid-template-rows: 1fr; }

.faq-item.open .faq-answer > p {
  padding-bottom: 24px;
  opacity: 1;
  transition: opacity 0.35s var(--ease-out) 0.1s, padding-bottom 0.4s var(--ease-out);
}

/* the answer wrapper needs display:grid on a single grid-row child to animate height */
.faq-answer { display: grid; }
.faq-answer > p { grid-row: 1 / 2; grid-column: 1 / 2; }

/* ----- progressive reveal: show first 3, "Load more" reveals the rest ----- */
.faq-item--hidden {
  display: none;
}
.faq-item--revealed {
  display: block;
  animation: faq-item-fade-in 0.5s var(--ease-out);
}
@keyframes faq-item-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.faq-load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  max-width: 820px;
}

.faq-load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out),
              color 0.25s var(--ease-out), transform 0.2s var(--ease-out);
}
.faq-load-more-btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #06120c;
  transform: translateY(-1px);
}
.faq-load-more-btn[hidden] { display: none; }

@media (max-width: 640px) {.faq-question { padding: 18px 20px; font-size: 15px; }.faq-answer > p { padding: 0 20px; font-size: 14px; }.faq-item.open .faq-answer > p { padding-bottom: 20px; }}

/* ==========================================================================
   NEW: SKIP-TO-CONTENT LINK (accessibility, invisible until focused)
   ========================================================================== */
.skip-link {
  position: fixed;
  top: -60px;
  left: 1rem;
  z-index: 100002;
  padding: 0.75rem 1.25rem;
  background: var(--color-accent);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
  transition: top 0.25s var(--ease-out);
}

.skip-link:focus {
  top: 1rem;
}

/* ==========================================================================
   NEW: THEME TOGGLE BUTTON
   ========================================================================== */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--duration) var(--ease-out),
              border-color var(--duration) var(--ease-out),
              transform var(--duration) var(--ease-out);
}

.theme-toggle-btn:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.theme-toggle-btn svg {
  width: 18px;
  height: 18px;
  transition: opacity 0.25s var(--ease-out), transform 0.4s var(--ease-out);
}

.theme-toggle-btn .icon-moon { display: none; }

[data-theme="dark"] .theme-toggle-btn .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle-btn .icon-moon {
  display: block;
  animation: theme-icon-pop 0.4s var(--ease-out);
}

@keyframes theme-icon-pop {
  from { transform: scale(0.5) rotate(-45deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}

/* Drawer variant (mobile footer) */
.drawer-theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  background: var(--color-surface);
  border-radius: var(--radius-md);
}

.drawer-theme-row span {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* ==========================================================================
   NEW: SCROLL-REVEALED AI CHATBOT LAUNCHER + PANEL
   Sits above the scroll-to-top button. Hidden until the user scrolls past
   the hero, then fades/scales in. Click expands into the chat panel.
   ========================================================================== */
.chatbot-launcher {
  position: fixed;
  bottom: 2rem;
  right: 5.75rem;
  z-index: 91;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #ffffff;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(var(--color-accent-rgb), 0.32);
  opacity: 0;
  transform: scale(0.6) translateY(20px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), visibility 0.4s, box-shadow 0.3s var(--ease-out);
}

.chatbot-launcher.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  visibility: visible;
  pointer-events: auto;
}

.chatbot-launcher:hover {
  box-shadow: 0 14px 34px rgba(var(--color-accent-rgb), 0.45);
  transform: scale(1.06) translateY(0);
}

.chatbot-launcher .cb-icon-chat,
.chatbot-launcher .cb-icon-close { width: 24px; height: 24px; transition: opacity 0.2s var(--ease-out), transform 0.3s var(--ease-out); }
.chatbot-launcher .cb-icon-close { position: absolute; opacity: 0; transform: rotate(-90deg) scale(0.6); }
.chatbot-launcher.is-open .cb-icon-chat { opacity: 0; transform: rotate(90deg) scale(0.6); position: absolute; }
.chatbot-launcher.is-open .cb-icon-close { opacity: 1; transform: rotate(0) scale(1); }

.chatbot-launcher::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  opacity: 0.5;
  animation: chatbot-pulse-ring 2.4s ease-out infinite;
}

.chatbot-launcher.is-open::after { animation: none; opacity: 0; }

@keyframes chatbot-pulse-ring {
  0%   { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.5); opacity: 0; }
}

.chatbot-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid var(--color-bg);
}

.chatbot-launcher.is-open .chatbot-badge,
.chatbot-launcher.was-opened .chatbot-badge { display: none; }

.chatbot-panel {
  position: fixed;
  bottom: 6.5rem;
  right: 2rem;
  z-index: 92;
  width: 360px;
  max-width: calc(100vw - 2.5rem);
  height: 480px;
  max-height: calc(100vh - 9rem);
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.92) translateY(24px);
  transform-origin: bottom right;
  transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out), visibility 0.32s;
}

.chatbot-panel.open {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
}

.chatbot-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1rem 1.1rem;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
  color: #ffffff;
  flex-shrink: 0;
}

/* Maximize / Expand Chat Window Mode */
.chatbot-panel.is-maximized {
  width: min(850px, calc(100vw - 2.5rem)) !important;
  height: min(720px, calc(100vh - 5rem)) !important;
  max-height: calc(100vh - 5rem) !important;
  bottom: 2rem !important;
  right: 2rem !important;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.35) !important;
}

.chatbot-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chatbot-action-btn {
  background: rgba(255, 255, 255, 0.18);
  border: none;
  color: #ffffff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.chatbot-action-btn:hover {
  background: rgba(255, 255, 255, 0.32);
  transform: scale(1.05);
}

.chatbot-action-btn svg {
  width: 16px;
  height: 16px;
  stroke: #ffffff;
}

.chatbot-action-btn .icon-compress {
  display: none;
}

.chatbot-panel.is-maximized .chatbot-action-btn .icon-expand {
  display: none;
}

.chatbot-panel.is-maximized .chatbot-action-btn .icon-compress {
  display: block;
}

/* Chatbot Markdown Response Formatting (ChatGPT-style) */
.chatbot-heading {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  margin: 0.8rem 0 0.35rem 0 !important;
  color: var(--color-accent, #12b981) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
}
.chatbot-msg.bot > .chatbot-heading:first-child,
.chatbot-msg.bot > p:first-child .chatbot-heading {
  margin-top: 0 !important;
}
.chatbot-msg.bot p {
  margin: 0 0 0.5rem 0;
  line-height: 1.55;
}
.chatbot-msg.bot p:last-child {
  margin-bottom: 0;
}
.chatbot-ol, .chatbot-ul {
  margin: 0.4rem 0 0.6rem 1.2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.chatbot-ol {
  list-style-type: decimal;
}
.chatbot-ul {
  list-style-type: disc;
}
.chatbot-ol li, .chatbot-ul li {
  line-height: 1.5;
}
.chatbot-msg.bot strong {
  font-weight: 700;
  color: inherit;
}
.chatbot-code {
  background: rgba(0, 0, 0, 0.08);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.88em;
}
[data-theme="dark"] .chatbot-code {
  background: rgba(255, 255, 255, 0.15);
}

.chatbot-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.chatbot-avatar svg { width: 18px; height: 18px; }

.chatbot-header-text h4 { font-size: 0.9rem; font-weight: 700; margin: 0; }
.chatbot-header-text p { font-size: 0.72rem; margin: 2px 0 0; opacity: 0.85; display: flex; align-items: center; gap: 5px; }

.chatbot-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  display: inline-block;
  animation: chatbot-status-blink 2s ease-in-out infinite;
}

@keyframes chatbot-status-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--color-surface);
}

.chatbot-messages::-webkit-scrollbar { width: 4px; }
.chatbot-messages::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }

.chatbot-msg {
  max-width: 82%;
  padding: 0.6rem 0.85rem;
  font-size: 0.82rem;
  line-height: 1.55;
  border-radius: var(--radius-md);
  animation: chatbot-msg-in 0.3s var(--ease-out);
}

@keyframes chatbot-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chatbot-msg a { color: inherit; font-weight: 700; text-decoration: underline; }

.chatbot-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 1rem 0.75rem;
  background: var(--color-surface);
}

.chatbot-quick-btn {
  padding: 0.4rem 0.75rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-accent);
  background: var(--color-accent-dim);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.chatbot-quick-btn:hover { background: var(--color-accent); color: #ffffff; transform: translateY(-1px); }

.chatbot-typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 0.7rem 0.9rem;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  border-bottom-left-radius: 4px;
}

.chatbot-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-dim);
  animation: chatbot-typing-bounce 1.2s ease-in-out infinite;
}

.chatbot-typing span:nth-child(2) { animation-delay: 0.15s; }
.chatbot-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes chatbot-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

.chatbot-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.75rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
  flex-shrink: 0;
}

.chatbot-input-row input {
  flex: 1;
  padding: 0.65rem 0.9rem;
  font-size: 0.82rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  outline: none;
  transition: border-color 0.2s var(--ease-out);
}

.chatbot-input-row input:focus { border-color: var(--color-accent); }

.chatbot-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #ffffff;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.chatbot-send-btn:hover { background: var(--color-accent-hover); transform: scale(1.06); }
.chatbot-send-btn svg { width: 16px; height: 16px; }

@media (max-width: 480px) {.chatbot-launcher { right: 5rem; bottom: 1.25rem; }.chatbot-panel { right: 1rem; left: 1rem; width: auto; bottom: 5.5rem; }.scroll-top-btn { right: 1.25rem; bottom: 1.25rem; }}

/* ==========================================================================
   RESPONSIVE — header controls (region selector + theme toggle)
   Desktop: full pill with label. Tablet/laptop: label hides, icon-only.
   Mobile: controls move into the drawer (already built there), so hide
   the desktop versions once the hamburger takes over at 1024px.
   ========================================================================== */

@media (max-width: 1024px) {.region-select-wrap,
  .theme-toggle-btn#themeToggleBtn {
    display: none;
  }}

/* ==========================================================================
   RESPONSIVE — chatbot panel, tablet sizing
   ========================================================================== */
@media (max-width: 640px) and (min-width: 481px) {.chatbot-panel {
    width: 340px;
    height: 440px;
    right: 1.5rem;
    bottom: 6rem;
  }.chatbot-launcher { right: 5.75rem; bottom: 2rem; }.scroll-top-btn { right: 2rem; bottom: 2rem; }}

/* iPad / tablet portrait: keep launcher + scroll-top comfortably tappable
   and never overlapping the drawer's fixed footer CTA */
@media (max-width: 1024px) and (min-width: 641px) {.chatbot-launcher { bottom: 1.75rem; right: 5.5rem; width: 52px; height: 52px; }.scroll-top-btn { bottom: 1.75rem; right: 1.75rem; }}

/* Small phones: stack launcher a little higher so it never sits under
   mobile browser chrome / home-indicator areas */
@media (max-width: 380px) {.chatbot-launcher { width: 48px; height: 48px; right: 4.75rem; bottom: 1rem; }.scroll-top-btn { right: 1rem; bottom: 1rem; }.chatbot-panel { bottom: 5rem; }}

/* GLOBAL SINGLE SCROLLBAR FIX */

/* The scrollbar takes the brand green rather than the browser's grey. The
   colours come from the accent variables, so a change in the Customizer
   carries here too. Kept translucent so it sits on the page instead of
   cutting a hard bar down the edge of it. */
::-webkit-scrollbar-thumb {
  background: rgba(var(--color-accent-rgb), 0.55) !important;
  border-radius: 999px !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--color-accent-rgb), 0.85) !important;
  background-clip: padding-box !important;
}

/* FIXED FLOATING WIDGET POSITION */

/* CHATBOT EYE-FRIENDLY LIGHT & DARK MODE THEME REFINEMENTS */

.chatbot-msg-chips {
  display: none !important;
}

/* ==========================================================================
   PRELOADER RESPONSIVE & FLUID LOGO FIX
   ========================================================================== */

@media (max-width: 640px) {
  
  
}

/* ==========================================================================
   GLOBAL RESPONSIVE OVERFLOW & WHITE SPACE FIX
   ========================================================================== */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  position: relative !important;
}

/* Ensure outer section wrappers don't overflow viewport */
.site-header,
.header-inner,
.hero,
.page-hero,
main,
section,
footer,
.site-footer,
.footer-inner,
.ambient-canvas,
.preloader {
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

/* Desktop navigation breakpoint tuning */
@media (max-width: 1280px) {
  .desktop-nav .nav-link {
    padding: 0.5rem 0.5rem;
    font-size: 0.78rem;
  }
  .header-inner {
    padding: 0 0.75rem;
  }
}

@media (max-width: 1200px) {
  
  
}

.mobile-drawer,
.modal-window,
.modal-overlay {
  max-width: 100vw !important;
}

/* Cursor glow positioning fix */
/* Sticky Footer Layout Fix */

/* Full-bleed ambient radial wash covering the entire footer width and height */

/* Light mode text & links */

/* ── Dark Mode Footer ────────────────────────────────────────────────---- */

.rc-region-hidden,
.footer-col.rc-region-hidden {
  display: none !important;
}

/* ==========================================================================
   SERVICE PAGE HERO BACKGROUNDS (US & AU)
   Base layout rule for .page-hero -- ported from the dev site's css/main.css.
   This was missing from the theme entirely (only the background-image
   modifier rules further below existed here), so every service-page hero
   had no min-height/flex layout or default background sizing until this was
   added. The ".page-hero--{modifier}" background-image rules themselves are
   NOT duplicated here -- they already exist further down this file (see the
   "SERVICE PAGE HERO BACKGROUND PHOTOS" block) using this theme's actual
   "../assets/..." relative path convention instead of the dev site's
   site-root-relative "/assets/..." paths, so this base rule simply reuses
   that existing modifier block instead of shadowing it with a duplicate,
   path-incompatible copy.
   ========================================================================== */

@media (max-width: 768px) {
  
}

@media (max-width: 480px) {
  
}

/* ==========================================================================
   NEW SERVICE PAGE COMPONENTS: BUSINESS SUPPORT & HOW WE WORK
   ========================================================================== */

/* --- SECTION 3: HOW IT SUPPORTS YOUR BUSINESS --- */

/* --- CONSISTENT MODULE: BUILT AROUND THE WAY YOU WORK --- */
/* Ported wholesale from the dev site's css/main.css -- the "Flexible
   Delivery Models" section was never migrated into this theme at all
   (not just the delivery-model card photo/hover styling below). */

/* ==========================================================================
   DELIVERY MODEL CARDS — media header (photo + floating badge/icon)
   .workflow-step-box already has padding:0 + overflow:hidden + a hover lift;
   this adds the photo strip on top and a body wrapper below it, since the
   box no longer has uniform padding around a single row of badge+icon.
   ========================================================================== */
.step-media-header {
  position: relative !important;
  width: 100% !important;
  height: 168px !important;
  overflow: hidden !important;
  background: var(--color-surface, #f0eeeb) !important;
}

.step-media-header img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.workflow-step-box:hover .step-media-header img {
  transform: scale(1.08) !important;
}

.step-media-header::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0) 45%) !important;
  pointer-events: none !important;
}

.step-media-header .step-badge {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  z-index: 2 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}

.step-media-header .step-icon {
  position: absolute !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 2 !important;
  background: var(--color-bg, #ffffff) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.workflow-step-box:hover .step-media-header .step-icon {
  transform: scale(1.08) !important;
}

.step-body-content {
  padding: 30px 26px 28px !important;
}

[data-theme="dark"] .step-media-header .step-badge {
  background: rgba(20, 20, 20, 0.75) !important;
}

[data-theme="dark"] .step-icon {
  background: var(--color-surface, #111211) !important;
}

@media (max-width: 640px) {
  .step-media-header {
    height: 140px !important;
  }
}

@media (max-width: 992px) {
  

  
}

/* ==========================================================================
   SERVICE PAGE HERO BACKGROUND PHOTOS -- ported wholesale from the dev
   site's css/main.css. These ".page-hero--{modifier}" rules were entirely
   missing from this theme mirror (only a handful of body[data-page="..."]
   fallback selectors for slugs that happened to survive the service-list
   consolidation unchanged existed here) -- every service page whose hero
   relies on its modifier class (i.e. most of them) had zero background
   photo on production until this was added. Image paths are relative to
   this css/ folder ("../assets/...") to match this theme's actual file
   layout, not the dev site's site-root-relative ("/assets/...") paths.
   ========================================================================== */
.page-hero--arch-design,
body[data-page="architectural-design"] .page-hero {
  background-image:
    linear-gradient(to right, var(--color-bg) 30%, rgba(var(--color-bg-rgb), 0.82) 58%, rgba(var(--color-bg-rgb), 0.70) 100%),
    url("../assets/images/pages/services/hero/architectural-design-hero.jpg") !important;
}

.page-hero--design-dev,
body[data-page="design-development"] .page-hero {
  background-image:
    linear-gradient(to right, var(--color-bg) 30%, rgba(var(--color-bg-rgb), 0.82) 58%, rgba(var(--color-bg-rgb), 0.70) 100%),
    url("../assets/images/pages/services/hero/design-development-hero.jpg") !important;
}

.page-hero--arch-doc,
body[data-page="architectural-documentation"] .page-hero,
body[data-page="architectural-support-and-documentation"] .page-hero {
  background-image:
    linear-gradient(to right, var(--color-bg) 30%, rgba(var(--color-bg-rgb), 0.82) 58%, rgba(var(--color-bg-rgb), 0.70) 100%),
    url("../assets/images/pages/services/hero/architectural-documentation-hero.jpg") !important;
}

.page-hero--prod-doc,
body[data-page="production-documentation"] .page-hero {
  background-image:
    linear-gradient(to right, var(--color-bg) 30%, rgba(var(--color-bg-rgb), 0.82) 58%, rgba(var(--color-bg-rgb), 0.70) 100%),
    url("../assets/images/pages/services/hero/production-documentation-hero.webp") !important;
}

.page-hero--arch-drafting,
body[data-page="architectural-drafting-and-production-support"] .page-hero,
body[data-page="architectural-design-and-drafting"] .page-hero {
  background-image:
    linear-gradient(to right, var(--color-bg) 30%, rgba(var(--color-bg-rgb), 0.82) 58%, rgba(var(--color-bg-rgb), 0.70) 100%),
    url("../assets/images/pages/services/hero/architectural-drafting-hero.webp") !important;
}

.page-hero--prod-estimating,
body[data-page="production-estimating-and-scheduling"] .page-hero,
body[data-page="production-scheduling-estimating"] .page-hero {
  background-image:
    linear-gradient(to right, var(--color-bg) 30%, rgba(var(--color-bg-rgb), 0.82) 58%, rgba(var(--color-bg-rgb), 0.70) 100%),
    url("../assets/images/pages/services/hero/production-estimating-hero.webp") !important;
}

.page-hero--bim,
body[data-page="bim-modelling-and-coordination"] .page-hero,
body[data-page="bim-modelling-services"] .page-hero {
  background-image:
    linear-gradient(to right, var(--color-bg) 30%, rgba(var(--color-bg-rgb), 0.82) 58%, rgba(var(--color-bg-rgb), 0.70) 100%),
    url("../assets/images/pages/services/hero/bim-modelling-hero.webp") !important;
}

.page-hero--3d,
body[data-page="3d-rendering-visualisation-and-walkthroughs"] .page-hero,
body[data-page="3d-rendering-and-visualizations"] .page-hero {
  background-image:
    linear-gradient(to right, var(--color-bg) 30%, rgba(var(--color-bg-rgb), 0.82) 58%, rgba(var(--color-bg-rgb), 0.70) 100%),
    url("../assets/images/pages/services/hero/3d-rendering-hero.webp") !important;
}

.page-hero--tech-coord,
body[data-page="technical-project-coordination"] .page-hero,
body[data-page="project-management"] .page-hero {
  background-image:
    linear-gradient(to right, var(--color-bg) 30%, rgba(var(--color-bg-rgb), 0.82) 58%, rgba(var(--color-bg-rgb), 0.70) 100%),
    url("../assets/images/pages/services/hero/technical-coordination-hero.webp") !important;
}

.page-hero--proj-admin,
body[data-page="project-administration-and-document-support"] .page-hero,
body[data-page="administrative-support"] .page-hero {
  background-image:
    linear-gradient(to right, var(--color-bg) 30%, rgba(var(--color-bg-rgb), 0.82) 58%, rgba(var(--color-bg-rgb), 0.70) 100%),
    url("../assets/images/pages/services/hero/project-administration-hero.webp") !important;
}

.page-hero--truss,
body[data-page="truss-detailing"] .page-hero,
body[data-page="truss-roof-detailing"] .page-hero,
body[data-page="residential-engineering"] .page-hero {
  background-image:
    linear-gradient(to right, var(--color-bg) 30%, rgba(var(--color-bg-rgb), 0.82) 58%, rgba(var(--color-bg-rgb), 0.70) 100%),
    url("../assets/images/pages/services/hero/truss-detailing-hero.webp") !important;
}

.page-hero--res,
body[data-page="residential-services"] .page-hero {
  background-image:
    linear-gradient(to right, var(--color-bg) 30%, rgba(var(--color-bg-rgb), 0.76) 55%, rgba(var(--color-bg-rgb), 0.70) 100%),
    url("../assets/images/pages/services/hero/residential-services-hero.png") !important;
}

.page-hero--comm,
body[data-page="commercial-services"] .page-hero {
  background-image:
    linear-gradient(to right, var(--color-bg) 30%, rgba(var(--color-bg-rgb), 0.76) 55%, rgba(var(--color-bg-rgb), 0.70) 100%),
    url("../assets/images/pages/services/hero/commercial-services-hero.webp") !important;
}