/* ==========================================================================
   REALCOGNITA — PREMIUM ENHANCEMENT LAYER
   Loaded on every page, after main.css / inner-pages.css / css/pages/*.css.
   Purpose: unify visual polish site-wide (depth, motion, focus, scrollbars)
   and upgrade the dark/light theme switcher — WITHOUT introducing any new
   brand colors. Every rule below reads the same --color-* / --radius-* /
   --ease-* custom properties already defined in css/main.css, so it just
   raises the finish of the existing design system rather than replacing it.
   ========================================================================== */

/* WP core/group blocks with nested children render an extra
   .wp-block-group__inner-container wrapper at render time (not present in
   post_content), breaking any CSS that targets a group's DIRECT children for
   grid/flex layout -- collapsing that wrapper out of the box model site-wide
   restores the intended parent/child relationship for every such block. */
.wp-block-group__inner-container {
  display: contents;
}

/* Careers page: the dev reference wraps every section's content in a
   .container div (max-width: var(--container-width); margin: 0 auto;
   padding: 0 var(--container-pad) -- the same values as css/main.css's real
   .container), but on this page's compiled post_content no such wrapper
   exists: each section's blocks render straight into the single
   .wp-block-group__inner-container above, which is display:contents
   site-wide, so the open-roles grid, growth card, apply-steps row, tools
   pill list, and FAQ/CTA content all bleed edge-to-edge at wide viewports
   instead of sitting in the site's usual centered column. Restoring a real
   box on just that one per-section wrapper -- with the site's real
   container values -- recreates the missing inset without touching any of
   the narrower widths already set on individual pieces (growth-card,
   faq-list, etc.); they simply sit inset inside the restored column, same
   as the dev reference's nested .container > .growth-card. */
/* Homepage sections: restore the .container the block markup lost.
   ------------------------------------------------------------------
   Every one of these sections wraps its content in <div class="container">
   on the dev site, but the compiled post_content has no such wrapper — the
   only thing between the section and its content is
   .wp-block-group__inner-container, which is display:contents sitewide and
   so constrains nothing. The result is content running edge-to-edge.

   That is usually just a missing inset, but for auto-fit grids it changes
   the layout outright: the business-impact cards use
   `repeat(auto-fit, minmax(320px, 1fr))`, so given the full viewport six
   cards fit FIVE per row and strand the sixth. At the real container width
   (88rem less 2rem padding = 1344px of content, where a fourth 320px
   column plus gaps would need 1364px) they lay out three per row — the
   intended 3 x 2.

   Verified against the dev markup section by section. The hero is
   deliberately NOT in this list: it is full-bleed by design, with a video
   background and its own inner wrapper.

   `.inner-section` is the shared section wrapper used across the homepage,
   the service pages and the category hubs, and on the dev site EVERY one
   of them wraps its content in a .container -- verified by counting: 2 of
   2 on a service page, 4 of 4 on each hub. So the general rule is the
   accurate translation, not a list of individual class names. The few
   sections that do not carry `.inner-section` are named after it. */
.inner-section > .wp-block-group__inner-container,
.home-split > .wp-block-group__inner-container,
.home-testimonial > .wp-block-group__inner-container,
.locations-section > .wp-block-group__inner-container,
.careers-section > .wp-block-group__inner-container {
  display: block !important;
  width: 100% !important;
  max-width: var(--container-width) !important;
  margin: 0 auto !important;
  padding: 0 var(--container-pad) !important;
  box-sizing: border-box !important;
}

/* .faq-section and .inner-cta are shared sitewide components (used by many
   pages' FAQ/CTA blocks), so this same inset is scoped to the Careers page
   only -- other pages weren't part of this audit and are left untouched. */
body.page-id-9 .faq-section > .wp-block-group__inner-container,
body.page-id-9 .inner-section.inner-cta > .wp-block-group__inner-container {
  display: block !important;
  width: 100% !important;
  max-width: var(--container-width) !important;
  margin: 0 auto !important;
  padding: 0 var(--container-pad) !important;
  box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   1. GLOBAL FEEL: smoother theme swaps, refined selection & scrollbars
   -------------------------------------------------------------------------- */
/* GLOBAL SINGLE SCROLLBAR FIX */
html {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-color: rgba(var(--color-accent-rgb), 0.6) transparent !important;
}
/* FEATURE ICON BOX STYLING */
.feature-icon,
.sector-body .feature-icon {
  width: 48px !important;
  height: 48px !important;
  background: rgba(18, 185, 129, 0.12) !important;
  color: #12b981 !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
  border: 1px solid rgba(18, 185, 129, 0.25) !important;
  box-shadow: 0 4px 12px rgba(18, 185, 129, 0.1) !important;
  flex-shrink: 0 !important;
}

.feature-icon svg,
.sector-body .feature-icon svg {
  width: 24px !important;
  height: 24px !important;
  stroke: #12b981 !important;
  stroke-width: 2px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none !important;
}

body {
  overflow-x: visible !important;
  overflow-y: visible !important;
}
body::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}
::-webkit-scrollbar-track {
  background: transparent !important;
}
::-webkit-scrollbar-thumb {
  background: rgba(var(--color-accent-rgb), 0.55) !important;
  border-radius: 999px !important;
  border: 2px solid transparent !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--color-accent-rgb), 0.85) !important;
}

/* Brand-palette scrollbar: while the page is actively being scrolled
   (html.is-scrolling, toggled in main.js) the thumb lights up with the
   Realcognita accent → teal gradient instead of the neutral ink tone. */
html.is-scrolling {
  scrollbar-color: var(--color-accent-hover) transparent;
}

html.is-scrolling::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
  border-color: var(--color-bg);
  box-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.45);
}

html.is-scrolling::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
}

/* Light/dark switch: theme.js swaps the theme inside a View Transition, so
   the browser crossfades one snapshot of the page on the compositor and
   theme.js animates a circular reveal from the toggle. The default root
   crossfade is turned off here -- the reveal replaces it. (This used to put
   a 0.45s colour transition on every element on the page at once, which
   restyled and repainted the whole document each frame -- the lag.) */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* For the instant of the swap only, no element runs its own transition.
   Otherwise every card, border and link with a colour transition (~270 on
   the homepage) animated separately for half a second, restyling the page
   each frame underneath the reveal. theme.js removes the class next frame. */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
}

/* Consistent, brand-colored keyboard focus ring everywhere (buttons, links,
   cards) instead of the mismatched browser default. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Removes the default gray flash Android/iOS paints on tap for interactive
   elements — the custom focus ring and hover states above already give
   clear feedback, so the native highlight just looks like a rendering
   glitch on top of them. */
a,
button,
[role="button"],
.card,
.service-card,
.sector-card,
.news-card,
.feature-card,
.office-card,
.case-card,
.value-card,
.team-card,
.stat-card {
  -webkit-tap-highlight-color: transparent;
}

/* --------------------------------------------------------------------------
   2. TYPOGRAPHY & SURFACE POLISH
   -------------------------------------------------------------------------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

/* Any card-like surface across pages gets a slightly richer, layered
   shadow + a soft brand-tinted ring on hover — reads as "premium" without
   touching a single color value. */
.card,
.service-card,
.sector-card,
.news-card,
.feature-card,
.office-card,
.case-card,
.value-card,
.team-card,
.stat-card {
  transition: transform 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out),
    border-color 0.45s var(--ease-out);
}

.card:hover,
.service-card:hover,
.sector-card:hover,
.news-card:hover,
.feature-card:hover,
.office-card:hover,
.case-card:hover,
.value-card:hover,
.team-card:hover,
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -20px rgba(var(--ink-rgb), 0.22),
    0 0 0 1px rgba(var(--color-accent-rgb), 0.12);
}

/* Touchscreens fire :hover on tap and then hold it until the next tap
   elsewhere, which reads as a stuck/glitchy card. Devices with a real
   pointer (mouse/trackpad) keep the lift; touch devices just get the
   resting state plus their own :active feedback below. */
@media (hover: none) {

  .card:hover,
  .service-card:hover,
  .sector-card:hover,
  .news-card:hover,
  .feature-card:hover,
  .office-card:hover,
  .case-card:hover,
  .value-card:hover,
  .team-card:hover,
  .stat-card:hover {
    transform: none;
    box-shadow: none;
  }

  .card:active,
  .service-card:active,
  .sector-card:active,
  .news-card:active,
  .feature-card:active,
  .office-card:active,
  .case-card:active,
  .value-card:active,
  .team-card:active,
  .stat-card:active {
    transform: scale(0.98);
  }
}

/* Primary CTA gets a subtle sheen sweep + deeper resting shadow */
.btn-contact,
.drawer-cta,
.btn-primary {
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 24px -8px rgba(var(--color-accent-rgb), 0.45);
}

.btn-contact::before {
  display: none !important;
  content: none !important;
}

.drawer-cta::before,
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.35) 40%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 0.6s var(--ease-out);
  pointer-events: none;
}

.drawer-cta:hover::before,
.btn-primary:hover::before {
  transform: translateX(120%);
}

.btn-contact:hover,
.drawer-cta:hover,
.btn-primary:hover {
  box-shadow: 0 14px 32px -8px rgba(var(--color-accent-rgb), 0.55);
  transform: translateY(-2px);
}

@media (hover: none) {

  .drawer-cta:hover::before,
  .btn-primary:hover::before {
    transform: translateX(-120%);
  }

  .btn-contact:hover,
  .drawer-cta:hover,
  .btn-primary:hover {
    box-shadow: 0 10px 24px -8px rgba(var(--color-accent-rgb), 0.45);
    transform: none;
  }

  .btn-contact:active,
  .drawer-cta:active,
  .btn-primary:active {
    transform: scale(0.97);
  }
}

/* --------------------------------------------------------------------------
   3. THEME TOGGLE — refined, premium switch styling
   Markup/IDs unchanged (#themeToggleBtn / #drawerThemeToggleBtn, .icon-sun /
   .icon-moon) — this only upgrades the finish: more depth, a soft brand-
   tinted focus/hover halo, and a matched crossfade for both icons.
   -------------------------------------------------------------------------- */
.theme-toggle-btn {
  position: relative;
  box-shadow: 0 1px 2px rgba(var(--ink-rgb), 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.theme-toggle-btn::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.28), transparent 72%);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  pointer-events: none;
}

.theme-toggle-btn:hover,
.theme-toggle-btn:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-accent-dim);
  box-shadow: 0 6px 18px -6px rgba(var(--color-accent-rgb), 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.theme-toggle-btn:hover::after,
.theme-toggle-btn:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}

.theme-toggle-btn:active {
  transform: scale(0.92);
}

@media (hover: none) {
  .theme-toggle-btn:hover {
    border-color: inherit;
    background: inherit;
    box-shadow: 0 1px 2px rgba(var(--ink-rgb), 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  .theme-toggle-btn:hover::after {
    opacity: 0;
    transform: scale(0.6);
  }
}

.theme-toggle-btn svg {
  position: relative;
  z-index: 1;
}

/* Symmetric, matched crossfade for both icons (previously only the moon
   animated in; the sun now mirrors it so the swap feels intentional in
   both directions). */
.theme-toggle-btn .icon-sun,
.theme-toggle-btn .icon-moon {
  transition: opacity 0.3s var(--ease-out), transform 0.45s var(--ease-out);
}

.theme-toggle-btn .icon-sun {
  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 row: give the label + switch a proper card-like housing so it
   reads as one cohesive control rather than a bare button next to text. */
.drawer-theme-row {
  box-shadow: inset 0 0 0 1px var(--color-border);
  transition: box-shadow 0.3s var(--ease-out);
}

.drawer-theme-row:hover {
  box-shadow: inset 0 0 0 1px rgba(var(--color-accent-rgb), 0.4);
}

.drawer-theme-row .theme-toggle-btn {
  background: var(--color-bg);
}

/* --------------------------------------------------------------------------
   4. MOTION SAFETY
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  .theme-toggle-btn .icon-sun,
  .theme-toggle-btn .icon-moon,
  .card,
  .service-card,
  .sector-card,
  .news-card,
  .feature-card,
  .office-card,
  .case-card,
  .value-card,
  .team-card,
  .stat-card {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   5. MARKET / REGION SWITCHER (US / AU) — header pill + dropdown
   Same token set as the rest of this file: no new brand colors introduced.
   -------------------------------------------------------------------------- */
.market-switch-wrap {
  position: relative;
}

.market-switch-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.market-switch-toggle:hover {
  border-color: rgba(var(--color-accent-rgb), 0.4);
  transform: translateY(-1px);
}

.market-switch-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.market-switch-flag,
.region-flag {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
}

/* Hero region badge (e.g. "UNITED STATES" pill above a page-hero-title) */
.region-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: var(--color-accent-dim);
  border: 1px solid rgba(var(--color-accent-rgb), 0.28);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.market-switch-toggle svg {
  width: 12px;
  height: 12px;
  color: var(--color-text-dim);
  transition: transform 0.3s var(--ease-out);
}

.market-switch-wrap.is-open .market-switch-toggle svg {
  transform: rotate(180deg);
}

.market-switch-wrap.is-open .market-switch-toggle {
  border-color: var(--color-accent);
  background: var(--color-accent-dim);
}

.market-switch-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 190px;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 40px -14px rgba(var(--ink-rgb), 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top right;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0.25s;
  z-index: 300;
}

.market-switch-wrap.is-open .market-switch-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.market-switch-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.market-switch-item:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

.market-switch-item.is-active {
  background: var(--color-accent-dim);
  color: var(--color-accent);
}

@media (max-width: 1024px) {
  .market-switch-wrap {
    display: none;
  }
}

/* ---------- mobile drawer variant ---------- */
.drawer-market-row {
  display: flex;
  gap: 8px;
  padding: 14px 20px 4px;
}

.drawer-market-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out), color 0.25s var(--ease-out);
}

.drawer-market-btn.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent-dim);
  color: var(--color-accent);
}

/* ==========================================================================
   5. MOBILE FUNCTIONALITY & LAYOUT FIXES
   No new colors/brand values introduced — this section only corrects
   sizing, overflow, stacking and tap-target issues that surface on small
   viewports. Every rule is additive and scoped with media queries so
   desktop/tablet layouts are untouched.
   ========================================================================== */

/* 5.1 — Hard guard against horizontal scroll caused by any oversized child
   (fixed-width decorative blocks, wide grids, long unbroken strings). */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Long unbroken strings (emails, URLs, long product/company names) can
   force the page wider than the viewport on small phones. */
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
li {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* 5.2 — iOS Safari auto-zooms the whole page when a focused input's
   font-size is below 16px. The contact form fields use 0.9rem (~14.4px),
   which triggers that zoom. Bump to 16px only at mobile widths so the
   desktop type scale is unaffected. */
@media (max-width: 768px) {

  .field-input,
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* 5.3 — Auto-fit grids whose minimum track (300px) is wider than a small
   phone's usable width (320px screen minus container padding) will force
   a horizontal scrollbar instead of collapsing to one column. */
@media (max-width: 380px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}

/* 5.4 — Two-column "roster" style rows (fixed 140px photo column) get too
   cramped once padding is subtracted from very small viewports; stack
   them like the rest of the site's card layouts do below 768px. */
@media (max-width: 480px) {
  .roster-panel-inner {
    grid-template-columns: 1fr;
  }

  .roster-photo {
    max-width: 200px;
  }
}

/* 5.5 — Large, fixed (non-clamped) headline sizes in the client-ticker /
   collaboration section can look oversized and crowd the header row on
   phones; scale them down in step with the rest of the responsive type. */
@media (max-width: 768px) {
  .testimonial-header .collaboration-title {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }

  .testimonial-header .header-right {
    max-width: 100%;
  }
}

/* 5.6 — Ensure small icon-only controls meet the ~44x44px minimum tap
   target recommended for touch, without changing how they look. Uses an
   invisible expanded hit-area instead of resizing the visible icon. */
@media (max-width: 1024px) {
  .hamburger {
    position: relative;
  }

  .hamburger::after {
    content: "";
    position: absolute;
    inset: -13px -10px;
  }
}

@media (max-width: 768px) {
  .modal-close {
    width: 44px;
    height: 44px;
  }
}

/* 5.7 — Contact modal padding is generous (2.5rem) which eats a lot of
   the usable width on small phones; tighten it responsively so form
   fields get more breathing room without changing the desktop design. */
@media (max-width: 640px) {
  .modal-window {
    padding: 1.5rem;
    border-radius: var(--radius-md);
  }

  .modal-overlay {
    padding: 1rem;
  }
}

/* 5.8 — Respect notches / home-indicator areas for fixed UI so controls
   never sit under the OS gesture bar on modern phones. */
@media (max-width: 768px) {
  .mobile-drawer {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .scroll-top-btn {
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  .chatbot-launcher {
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
}

/* 5.9 — Prevent any element carrying an explicit fixed pixel width from
   exceeding the viewport on very narrow phones. */
@media (max-width: 480px) {

  img,
  video,
  iframe,
  svg,
  table {
    max-width: 100%;
    height: auto;
  }
}

/* ==========================================================================
   6. SCROLL-AWARE FLOATING CONTROLS
   Scroll-to-top and the chat launcher share one bottom-right "zone":
   scrolling down reveals scroll-to-top, scrolling up reveals the chat
   launcher instead. chatbot.js toggles the shared .is-visible class on
   both buttons in direct response to scroll direction; this layer only
   defines what "hidden" / "visible" looks like so the swap can fade and
   slide instead of snapping, matching the chatbot launcher's own motion.
   ========================================================================== */
.scroll-top-btn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(16px) scale(0.85);
}

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

/* Safety net: if an older page still ships the static `hidden` attribute
   instead of JS-driven classes, don't let it hard-hide the button behind
   display:none — let opacity/visibility above govern it instead. */
.scroll-top-btn[hidden] {
  display: flex !important;
}

/* Stop the "new message" pulse ring once the visitor has opened the chat
   at least once (mirrors the badge's own was-opened behavior) so the
   launcher settles down instead of pulsing indefinitely every session. */
.chatbot-launcher.was-opened::after {
  animation: none;
  opacity: 0;
}

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

  .scroll-top-btn,
  .chatbot-launcher {
    transition-duration: 0.01ms !important;
  }
}

/* Inline follow-up suggestion chips rendered inside the chat transcript
   after a bot reply. Deliberately reuses .chatbot-quick-btn's pill look
   (same colors/shape) so no new visual language is introduced — just a
   smaller, in-flow variant. */
.chatbot-msg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 88%;
  align-self: flex-start;
  margin-top: -4px;
  animation: chatbot-msg-in 0.3s var(--ease-out);
}

.chatbot-msg-chips .chatbot-quick-btn {
  font-size: 0.72rem;
  padding: 0.35rem 0.7rem;
}



/* --------------------------------------------------------------------------
   7. CTA BANNER — DARK MODE POLISH
   Reuses existing --ink-rgb / --color-* tokens; no new brand colors.
   -------------------------------------------------------------------------- */
[data-theme="dark"] .cta-glow {
  opacity: 0.22;
}

[data-theme="dark"] .cta-glow-b {
  opacity: 0.16;
}

[data-theme="dark"] .cta-card {
  box-shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .cta-card:hover {
  box-shadow: 0 26px 55px -18px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .btn-submit:hover:not(:disabled) {
  box-shadow: 0 8px 20px -6px rgba(var(--color-accent-rgb), 0.35);
}

[data-theme="dark"] .region-menu {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

/* --------------------------------------------------------------------------
   8. "SOFTWARE WE WORK IN" — DARK MODE LOGO VISIBILITY
   The multiply blend mode needs a light backdrop to read correctly;
   swap in a white card behind brand logos when dark mode is active.
   -------------------------------------------------------------------------- */
[data-theme="dark"] .sw-frame--logo {
  background-color: #ffffff;
  border-radius: 12px;
}

[data-theme="dark"] .sw-frame--logo .sw-showcase-img {
  mix-blend-mode: normal;
  filter: none;
  padding: 24px;
  width: calc(100% - 48px);
  height: calc(100% - 48px);
}

/* ==========================================================================
   9. HERO TEXT ENHANCEMENT — original full-bleed video hero is unchanged
   (.hero / .hero-video-wrap / .hero-overlay / .hero-content / .hero-title /
   .hero-desc / .hero-subtitle / .btn-hero all keep their existing rules in
   main.css). This only styles the new elements added inside .hero-content:
   the CTA row (primary button + secondary text link) and the quick-stats row.
   ========================================================================== */
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  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);
  transition-delay: 0.4s;
}

.hero-content.reveal-active .hero-cta-row {
  opacity: 1;
  transform: translateY(0);
}

#heroContactTrigger.btn-hero {
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.hero-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transition: border-color 0.25s ease, color 0.25s ease, gap 0.25s ease;
}

.hero-cta-secondary:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  gap: 10px;
}











@media (max-width: 640px) {
  .hero-cta-row {
    gap: 14px;
  }
}

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

  .hero-cta-row,
  .hero-quick-stats {
    transition: none !important;
  }
}

/* ==========================================================================
   10. NAV ALIGNMENT — tighten vertical rhythm across the header row so the
   logo, nav links, market switch, theme toggle and contact button all sit
   on the same optical baseline regardless of viewport width.
   ========================================================================== */
.header-inner,
.header-actions {
  display: flex;
  align-items: center;
}

.header-actions {
  gap: 14px;
}

.desktop-nav .nav-list {
  display: flex;
  align-items: center;
  gap: 6px;
}

.market-switch-toggle,
.theme-toggle-btn,
#contactTrigger {
  align-items: center;
}

@media (max-width: 1180px) {
  .header-actions {
    gap: 10px;
  }
}

/* ==========================================================================
   11. MOBILE CONTACT — hide the header's "Contact Us" button once the nav
   collapses into the hamburger drawer; the drawer's own Contact Us button
   (renamed from "Get a Scoped Quote") replaces it as the single mobile CTA.
   ========================================================================== */
@media (max-width: 1024px) {
  #contactTrigger {
    display: none;
  }
}

/* the drawer CTA is now a <button>, not an <a> — reset default button
   chrome so it inherits the exact same look it had before */
button.drawer-cta {
  font-family: inherit;
  border: none;
  cursor: pointer;
  width: 100%;
}

/* ==========================================================================
   HOMEPAGE SECTIONS — Intro / Split / Offerings / Testimonial / Upcoming /
   Newsletter. All colors/spacing/radii come from the existing --color-* /
   --radius-* / --ease-out tokens, so this adapts to light + dark theme
   automatically with no new brand colors.
   ========================================================================== */

/* shared bits (skip redeclaring if your main.css already defines these
   exact selectors — safe to keep either way since specificity is equal) */
.home-text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
  transition: gap 0.25s var(--ease-out), color 0.25s var(--ease-out);
}

.home-text-link::after {
  content: "→";
  transition: transform 0.25s var(--ease-out);
}

.home-text-link:hover {
  gap: 10px;
  color: var(--color-accent-hover);
}

.home-text-link:hover::after {
  transform: translateX(2px);
}

.home-outline-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  text-decoration: none;
  transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out),
    color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.home-outline-btn:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-dim);
  color: var(--color-accent);
  transform: translateY(-2px);
}

/* ==========================================================================
   1. INTRO SECTION — "Our Approach"
   Card-style sector items, paginated 3-per-page carousels (one per
   sector group), fully driven by --color-* / --radius-* / --ease-out
   tokens so it inherits light/dark theme automatically.
   ========================================================================== */
.home-intro {
  position: relative;
  overflow: hidden;
  padding: 6rem 0;
}

/* soft ambient glow, top-right */
.home-intro::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -160px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, var(--color-accent-dim) 0%, rgba(var(--color-accent-rgb), 0) 70%);
  pointer-events: none;
  z-index: 0;
}

.home-intro-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.home-intro-left {
  position: sticky;
  top: 7rem;
}

.home-intro-left .eyebrow {
  display: inline-flex;
  background: var(--color-accent-dim);
  border: 1px solid rgba(var(--color-accent-rgb), 0.25);
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  margin-bottom: 1.375rem;
}

.home-intro-left .section-title {
  margin-bottom: 1.25rem;
  max-width: 20ch;
}

.home-intro-left .section-desc {
  margin-bottom: 1.5rem;
  max-width: 46ch;
}

/* small stat row under the CTA link */






.home-intro-right .section-desc {
  margin-bottom: 2.5rem;
  max-width: 52ch;
}

.home-feature-group-actions {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.home-view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  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);
}

.home-view-all-btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #06120c;
  transform: translateY(-1px);
}

.home-feature-group+.home-feature-group {
  margin-top: 2.5rem;
}

.home-feature-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.125rem;
}

.home-feature-group-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin: 0;
}

/* ----- carousel nav: dots + prev/next arrows ----- */
.home-carousel-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.home-carousel-dots {
  display: flex;
  gap: 6px;
}

.home-carousel-dots button {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--color-border);
  transition: background-color 0.25s var(--ease-out), width 0.25s var(--ease-out);
}

.home-carousel-dots button.is-active {
  background: var(--color-accent);
  width: 18px;
  border-radius: 4px;
}









/* ----- carousel track: pages of 3 cards, sliding via transform ----- */
.home-carousel-viewport {
  overflow: hidden;
}

.home-carousel-track {
  display: flex;
  transition: transform 0.45s var(--ease-out);
}

.home-feature-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  flex: 0 0 100%;
  min-width: 100%;
}

.home-feature-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  position: relative;
  padding: 1.375rem 1.25rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}

.home-feature-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -18px rgba(var(--ink-rgb), 0.25);
  border-color: rgba(var(--color-accent-rgb), 0.35);
}

.home-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--color-accent-dim);
  color: var(--color-accent);
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.home-feature-item:hover .home-feature-icon {
  background: var(--color-accent);
  color: #ffffff;
  transform: scale(1.06);
}

.home-feature-icon svg {
  width: 20px;
  height: 20px;
}

.home-feature-item-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.home-feature-item-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  transition: color 0.25s var(--ease-out);
}

.home-feature-item:hover .home-feature-item-title {
  color: var(--color-accent);
}

.home-feature-item-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.home-feature-arrow {
  position: absolute;
  top: 1.25rem;
  right: 1.125rem;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-dim);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

.home-feature-arrow svg {
  width: 14px;
  height: 14px;
}

.home-feature-item:hover .home-feature-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--color-accent);
}

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

  .home-intro-left {
    position: static;
  }

  .home-feature-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .home-intro {
    padding: 4rem 0;
  }

  .home-feature-group-header {
    align-items: flex-start;
  }
}

/* ==========================================================================
   2. SPLIT (IMAGE + TEXT) SECTION
   ========================================================================== */
.home-split {
  padding: 5.5rem 0;
}

.home-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.home-split-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.home-split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease-out);
}

.home-split-media:hover img {
  transform: scale(1.06);
}

.home-split-body .section-title {
  margin: 14px 0 18px;
  max-width: 18ch;
}

.home-split-body .section-desc {
  margin-bottom: 24px;
}

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

  .home-split-media {
    order: -1;
  }
}

/* ==========================================================================
   3. OFFERINGS GRID — "Who We Work With" client-logo showcase
   Each card presents a client's logo on a clean plate (object-fit: contain
   so logos never crop/stretch), plus a project-type tag and a link through
   to that client's individual testimonial. The whole card is clickable.
   ========================================================================== */
















/* full-card click target; keeps the inner text link for keyboard/SR users
   while making the whole tile clickable for mouse/touch */








/* placeholder plate for logos not yet supplied — keeps grid rhythm intact
   without implying a real client until one is confirmed */






















/* ==========================================================================
   4. TESTIMONIAL SLIDER — "Who We Work With"
   ========================================================================== */
.home-testimonial {
  padding: 6.5rem 0;
  text-align: left;
  overflow: hidden;
}

/* -- Header row: eyebrow + big title on the left, lead copy on the right -- */




.ct-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
}

.ct-title {
  margin: 0;
  max-width: 560px;
}



/* -- Scrolling client logo strip -- */
.ct-logo-strip {
  position: relative;
  margin: 3.25rem 0 3.75rem;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ct-logo-track {
  display: flex;
  width: max-content;
  animation: ct-logo-scroll 45s linear infinite;
}

.ct-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 92px;
  padding: 0 2.5rem;
  border-right: 1px solid var(--color-border);
  opacity: 0.75;
  transition: opacity 0.3s var(--ease-out);
}

.ct-logo:hover {
  opacity: 1;
}

.ct-logo img {
  max-width: 140px;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* These logo files are white artwork on a transparent background (made
     for dark surfaces). Invert them to black by default so they read
     against the light theme's pale background. */
  filter: invert(1) opacity(0.8);
  transition: filter 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}

.ct-logo:hover img {
  filter: invert(1) opacity(1);
}

/* In dark mode the site background is already dark, so the white artwork
   is used as-is (no invert) instead of being flipped to black-on-black. */
[data-theme="dark"] .ct-logo img {
  filter: opacity(0.8);
}

[data-theme="dark"] .ct-logo:hover img {
  filter: opacity(1);
}

/*
 * Goodall Homes is the only stacked lockup here -- a shield over a tagline,
 * 4:3 -- where every other logo is a wide wordmark. The 40px height cap is
 * what those wordmarks need, but it is the WIDTH cap they actually hit, so
 * they come out 85-133px across. Goodall hits the height cap first and
 * lands at 53px, visibly the runt of the row, with its tagline crushed to
 * about 3px.
 *
 * Given more height it settles at ~83px wide, which sits between M/I Homes
 * and Rivergum -- i.e. this is matching the others optically rather than
 * making an exception of it. Still inside the 140px width cap, so the row
 * geometry is unchanged.
 *
 * Matched on alt text because this block outputs no per-logo class; the alt
 * is set by the content (see _migration-tools/add-goodall-homes-client-logo.php)
 * and renaming it there would silently drop this rule.
 */
.ct-logo img[alt="Goodall Homes"] {
  max-height: 62px;
}

/*
 * A logo with its own real light-mode and dark-mode files (currently only
 * Rivergum Homes -- rcn_render_client_logo_block() in inc/blocks.php).
 * These are already the right colour, so the invert-for-light-mode /
 * plain-in-dark-mode rules above must NOT apply -- overridden back to no
 * filter at all, on both variants, then one of the two is hidden by
 * [data-theme] below. The hover opacity bump still comes from .ct-logo
 * itself (opacity 0.75 -> 1), so hover still reads the same as every
 * other logo without needing its own rule here.
 */
/*
 * `.ct-logo img` above is (0,1,1) -- element + class. A bare
 * `.ct-logo-img--light` is only (0,1,0) and LOSES to it regardless of
 * source order, which is exactly the bug this had on the first deploy:
 * the invert filter kept winning and Rivergum's green logo rendered
 * inverted instead of plain. `.ct-logo .ct-logo-img--light` is (0,2,0),
 * which beats it outright rather than depending on rule order.
 */
.ct-logo .ct-logo-img--light,
.ct-logo .ct-logo-img--dark,
.ct-logo:hover .ct-logo-img--light,
.ct-logo:hover .ct-logo-img--dark {
  filter: none;
}
/* [data-theme="dark"] .ct-logo img is (0,2,1) -- an attribute selector counts
   as a class for specificity, so it still beat the (0,2,0) rule above.
   Same fix, scoped to dark mode explicitly rather than relying on it to
   somehow not apply. */
[data-theme="dark"] .ct-logo .ct-logo-img--light,
[data-theme="dark"] .ct-logo .ct-logo-img--dark {
  filter: none;
}
.ct-logo-img--dark { display: none; }
[data-theme="dark"] .ct-logo-img--light { display: none; }
[data-theme="dark"] .ct-logo-img--dark { display: block; }

.ct-logo-fallback {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--color-text-muted);
}

@keyframes ct-logo-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ct-logo-track {
    animation: none;
  }
}

/* -- Carousel: arrow column + content column -- */
.ct-carousel {
  display: flex;
  align-items: flex-start;
  gap: 2.75rem;
}

.ct-arrows {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  padding-top: 4px;
}

.ct-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  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);
}

.ct-arrow svg {
  width: 18px;
  height: 18px;
}

.ct-arrow:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #06120c;
  transform: translateY(-2px);
}

.ct-content {
  flex: 1;
  min-width: 0;
}

.home-testimonial-track {
  position: relative;
  min-height: 190px;
}

.home-testimonial-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  pointer-events: none;
}

.home-testimonial-slide.is-active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ct-tenure {
  position: absolute;
  top: 2px;
  right: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-dim);
}

.home-testimonial-quote-icon {
  width: 26px;
  height: 26px;
  color: var(--color-accent);
  margin-bottom: 1.1rem;
}

.home-testimonial-slide p {
  font-size: 22px;
  line-height: 1.65;
  color: var(--color-text);
  margin: 0 0 2rem;
  max-width: 640px;
  font-family: Georgia, "Times New Roman", serif;
}

.ct-slide-meta {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ct-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #06120c;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
}

.ct-meta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-right: auto;
}

.home-testimonial-author {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-text);
  text-transform: none;
}

.ct-role {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}

.ct-stars {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.ct-stars svg {
  width: 15px;
  height: 15px;
  color: var(--color-accent);
}

.home-testimonial-dots {
  display: flex;
  gap: 10px;
  margin-top: 2.5rem;
}

.home-testimonial-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: var(--color-border);
  cursor: pointer;
  transition: background-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.home-testimonial-dot.is-active {
  background: var(--color-accent);
  transform: scale(1.25);
}

.home-testimonial-dot:hover {
  background: var(--color-accent-hover);
}

@media (max-width: 900px) {
  .ct-header-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .ct-carousel {
    flex-direction: column;
    gap: 1.5rem;
  }

  .ct-arrows {
    order: 2;
  }

  .home-testimonial-slide p {
    font-size: 19px;
  }

  .ct-tenure {
    position: static;
    display: block;
    margin-bottom: 0.75rem;
  }
}

/* ==========================================================================
   5. UPCOMING GRID
   ========================================================================== */
.home-upcoming {
  padding: 5.5rem 0;
}

.home-upcoming .section-title {
  margin: 10px 0 2.75rem;
}

.home-upcoming-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.home-upcoming-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.home-upcoming-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -22px rgba(var(--ink-rgb), 0.2);
}

.home-upcoming-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}

.home-upcoming-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
  filter: saturate(0.9);
}

.home-upcoming-card:hover .home-upcoming-media img {
  transform: scale(1.08);
  filter: saturate(1);
}



.home-upcoming-card--profile {
  display: flex;
  flex-direction: column;
}

.home-upcoming-profile-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.home-upcoming-profile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
}

.home-upcoming-card--profile:hover .home-upcoming-profile-img img {
  transform: scale(1.08);
}

.home-upcoming-profile-body {
  padding: 1.25rem;
}

.home-upcoming-profile-body h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 4px;
}



.home-upcoming-profile-body p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 0 10px;
}

.home-upcoming-cta {
  text-align: center;
  margin-top: 2.75rem;
}

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

/* ==========================================================================
   6. NEWSLETTER
   ========================================================================== */
























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

  .home-feature-item,
  .home-split-media img,
  .home-offering-card,
  .home-offering-media img,
  .home-testimonial-slide,
  .home-upcoming-card,
  .home-upcoming-media img,
  .home-newsletter-submit,
  .home-newsletter-success {
    transition: none !important;
  }
}

/* ==========================================================================
   RC – REGION-BASED SERVICE SECTOR FILTER
   Hides the sector that isn't relevant to the active market (US / AU) in
   the "Our Services" mega menu, its sidebar tab, and the mobile drawer
   accordion group. Toggled by region-switch.js via .rc-region-hidden.
   ========================================================================== */
.rc-region-hidden,
.footer-col.rc-region-hidden,
.sector-tab-btn.rc-region-hidden,
.sector-content-panel.rc-region-hidden,
.drawer-sector-group.rc-region-hidden {
  display: none !important;
}

/* When only one sector tab remains visible, drop the sidebar's fixed
   min-width fight and let it size to content so the mega menu doesn't
   leave a hollow gap where the hidden tab used to sit. */
.sector-tabs-sidebar:has(> .sector-tab-btn.rc-region-hidden) {
  min-width: 0 !important;
}

/* ==========================================================================
   RC – CTA BOX & BUTTON TEXT WRAPPING FIX
   Prevents CTA button text truncation and clips across all viewport sizes.
   ========================================================================== */
.inner-cta-box {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
  padding: 50px 40px !important;
}

.inner-cta-box-content {
  flex: 1 1 55% !important;
  max-width: 650px !important;
}

.inner-cta-box .btn-contact {
  grid-column: auto !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 440px !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  text-align: center !important;
  line-height: 1.4 !important;
  padding: 16px 26px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 1100px) {
  .inner-cta-box {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 38px 26px !important;
  }

  .inner-cta-box .btn-contact {
    width: 100% !important;
    max-width: 440px !important;
    margin-top: 10px !important;
  }
}

/* ==========================================================================
   RC – PROCESS LINE CONNECTORS FIX
   ========================================================================== */
.steel-process-item {
  position: relative !important;
}

.steel-process-item:last-child .steel-process-line {
  display: none !important;
}

.steel-process-line {
  position: absolute !important;
  top: 52px !important;
  bottom: 0 !important;
  left: 25px !important;
  width: 2px !important;
  height: auto !important;
  background: var(--color-accent, #12b981) !important;
  opacity: 0.4 !important;
  z-index: 1 !important;
}

/* ==========================================================================
   SOFTWARE WE WORK IN - UNIFIED PREMIUM STYLING
   Standardizes UI/UX across all subpages to match production-scheduling-estimating
   ========================================================================== */
#software {
  position: relative;
  isolation: isolate;
}

#software::before,
#software::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);
  opacity: 0.08;
  z-index: -1;
  pointer-events: none;
}

#software::before {
  width: 460px;
  height: 460px;
  top: -160px;
  left: -140px;
}

#software::after {
  width: 380px;
  height: 380px;
  bottom: -180px;
  right: -120px;
  opacity: 0.06;
}

.software-split-wrapper {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 60px !important;
  align-items: stretch !important;
  margin-top: 48px !important;
}

.software-image-block {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  width: 100% !important;
  height: 460px !important;
  padding: 24px !important;
  border-radius: 24px !important;
  box-sizing: border-box !important;
  background: linear-gradient(160deg, var(--color-surface) 0%, var(--color-bg) 100%) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: 0 30px 60px -32px rgba(0, 0, 0, 0.25) !important;
  transition: box-shadow 0.4s ease, transform 0.4s ease !important;
}

.software-image-block:hover {
  box-shadow: 0 36px 70px -30px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-2px) !important;
}

.sw-frame {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.sw-frame--logo {
  background-color: var(--color-bg) !important;
  border: 1px solid var(--color-border) !important;
}

.software-image-block:hover .sw-frame--logo {
  transform: scale(1.015) !important;
}

.sw-frame--sample {
  background-color: var(--color-bg) !important;
  border: 1px solid var(--color-border) !important;
}

.sw-frame--sample::before {
  content: "" !important;
  position: absolute !important;
  inset: -40% !important;
  background: radial-gradient(circle, var(--sw-accent, var(--color-accent)) 0%, transparent 65%) !important;
  opacity: 0.18 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  transition: background 0.4s ease !important;
}

.sw-frame--sample::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.06), transparent 40%) !important;
}

.sw-showcase-img {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  opacity: 1 !important;
  transition: opacity 0.28s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.sw-showcase-img.sw-fade-out {
  opacity: 0 !important;
}

@media (max-width: 992px) {
  .software-split-wrapper {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .software-image-block {
    height: 380px !important;
  }
}

@media (max-width: 600px) {
  .software-image-block {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 480px !important;
  }
}

/* FIXED FLOATING WIDGET POSITION */
.chatbot-launcher,
.scroll-top-btn {
  position: fixed !important;
  right: 2rem !important;
  bottom: 2rem !important;
  z-index: 999 !important;
}
.chatbot-panel {
  position: fixed !important;
  right: 2rem !important;
  bottom: 6rem !important;
  z-index: 1000 !important;
}

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

/* LIGHT MODE REFINEMENTS */
html:not([data-theme="dark"]) .chatbot-panel,
[data-theme="light"] .chatbot-panel {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.18), 0 8px 20px -5px rgba(15, 23, 42, 0.08) !important;
}

html:not([data-theme="dark"]) .chatbot-header,
[data-theme="light"] .chatbot-header {
  background: linear-gradient(135deg, #0f4c45 0%, #0d3833 100%) !important;
  color: #ffffff !important;
}

html:not([data-theme="dark"]) .chatbot-avatar,
[data-theme="light"] .chatbot-avatar {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

html:not([data-theme="dark"]) .chatbot-status-dot,
[data-theme="light"] .chatbot-status-dot {
  background: #34d399 !important;
}

html:not([data-theme="dark"]) .chatbot-messages,
[data-theme="light"] .chatbot-messages {
  background: #f8fafc !important;
}

html:not([data-theme="dark"]) .chatbot-msg.bot,
[data-theme="light"] .chatbot-msg.bot {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

html:not([data-theme="dark"]) .chatbot-msg.user,
[data-theme="light"] .chatbot-msg.user {
  background: #0f766e !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.25) !important;
}

html:not([data-theme="dark"]) .chatbot-quick-replies,
[data-theme="light"] .chatbot-quick-replies {
  background: #f8fafc !important;
}

html:not([data-theme="dark"]) .chatbot-quick-btn,
[data-theme="light"] .chatbot-quick-btn {
  background: #ffffff !important;
  color: #0f766e !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  font-weight: 600 !important;
}

html:not([data-theme="dark"]) .chatbot-quick-btn:hover,
[data-theme="light"] .chatbot-quick-btn:hover {
  background: #0f766e !important;
  color: #ffffff !important;
  border-color: #0f766e !important;
}

html:not([data-theme="dark"]) .chatbot-input-row,
[data-theme="light"] .chatbot-input-row {
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
}

html:not([data-theme="dark"]) .chatbot-input-row input,
[data-theme="light"] .chatbot-input-row input {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

html:not([data-theme="dark"]) .chatbot-input-row input::placeholder,
[data-theme="light"] .chatbot-input-row input::placeholder {
  color: #64748b !important;
}

html:not([data-theme="dark"]) .chatbot-send-btn,
[data-theme="light"] .chatbot-send-btn {
  background: #0f766e !important;
  color: #ffffff !important;
}

html:not([data-theme="dark"]) .chatbot-send-btn:hover,
[data-theme="light"] .chatbot-send-btn:hover {
  background: #115e59 !important;
}

html:not([data-theme="dark"]) .chatbot-launcher,
[data-theme="light"] .chatbot-launcher {
  background: #0f766e !important;
  box-shadow: 0 10px 28px rgba(15, 118, 110, 0.35) !important;
}

html:not([data-theme="dark"]) .chatbot-launcher:hover,
[data-theme="light"] .chatbot-launcher:hover {
  background: #115e59 !important;
  box-shadow: 0 14px 34px rgba(15, 118, 110, 0.45) !important;
}


/* CHATBOT EYE-FRIENDLY LIGHT & DARK MODE THEME REFINEMENTS */
html:not([data-theme="dark"]) .chatbot-panel,
[data-theme="light"] .chatbot-panel {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.18), 0 8px 20px -5px rgba(15, 23, 42, 0.08) !important;
}

html:not([data-theme="dark"]) .chatbot-header,
[data-theme="light"] .chatbot-header {
  background: linear-gradient(135deg, #0f4c45 0%, #0d3833 100%) !important;
  color: #ffffff !important;
}

html:not([data-theme="dark"]) .chatbot-avatar,
[data-theme="light"] .chatbot-avatar {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

html:not([data-theme="dark"]) .chatbot-status-dot,
[data-theme="light"] .chatbot-status-dot {
  background: #34d399 !important;
}

html:not([data-theme="dark"]) .chatbot-messages,
[data-theme="light"] .chatbot-messages {
  background: #f8fafc !important;
}

html:not([data-theme="dark"]) .chatbot-msg.bot,
[data-theme="light"] .chatbot-msg.bot {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

html:not([data-theme="dark"]) .chatbot-msg.user,
[data-theme="light"] .chatbot-msg.user {
  background: #0f766e !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.25) !important;
}

html:not([data-theme="dark"]) .chatbot-quick-replies,
[data-theme="light"] .chatbot-quick-replies {
  background: #f8fafc !important;
}

html:not([data-theme="dark"]) .chatbot-quick-btn,
[data-theme="light"] .chatbot-quick-btn {
  background: #ffffff !important;
  color: #0f766e !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  font-weight: 600 !important;
}

html:not([data-theme="dark"]) .chatbot-quick-btn:hover,
[data-theme="light"] .chatbot-quick-btn:hover {
  background: #0f766e !important;
  color: #ffffff !important;
  border-color: #0f766e !important;
}

html:not([data-theme="dark"]) .chatbot-input-row,
[data-theme="light"] .chatbot-input-row {
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
}

html:not([data-theme="dark"]) .chatbot-input-row input,
[data-theme="light"] .chatbot-input-row input {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

html:not([data-theme="dark"]) .chatbot-input-row input::placeholder,
[data-theme="light"] .chatbot-input-row input::placeholder {
  color: #64748b !important;
}

html:not([data-theme="dark"]) .chatbot-send-btn,
[data-theme="light"] .chatbot-send-btn {
  background: #0f766e !important;
  color: #ffffff !important;
}

html:not([data-theme="dark"]) .chatbot-send-btn:hover,
[data-theme="light"] .chatbot-send-btn:hover {
  background: #115e59 !important;
}

html:not([data-theme="dark"]) .chatbot-launcher,
[data-theme="light"] .chatbot-launcher {
  background: #0f766e !important;
  box-shadow: 0 10px 28px rgba(15, 118, 110, 0.35) !important;
}

html:not([data-theme="dark"]) .chatbot-launcher:hover,
[data-theme="light"] .chatbot-launcher:hover {
  background: #115e59 !important;
  box-shadow: 0 14px 34px rgba(15, 118, 110, 0.45) !important;
}

/* Sticky Footer Layout Fix */
body {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}
.site-footer {
  margin-top: auto !important;
}


/* Premium Mega Menu Hover Bridge Fix */
.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;
}

/* ==========================================================================
   MASTER FLUID PRELOADER & ZERO-OVERFLOW RESPONSIVE OVERRIDES
   ========================================================================== */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  position: relative !important;
}

*, *::before, *::after {
  max-width: 100vw;
  box-sizing: border-box;
}

h1, h2, .hero-title, .page-hero-title, .section-title {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

@media (max-width: 640px) {
  .hero-title, .page-hero-title {
    font-size: clamp(1.75rem, 6.5vw, 2.5rem) !important;
  }
}

.preloader {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  width: 100vw !important;
  max-width: 100vw !important;
  padding: 1.5rem !important;
  box-sizing: border-box !important;
}

.preloader-content {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 480px !important;
  padding: 0 1rem !important;
  box-sizing: border-box !important;
}

.preloader-logo-mask {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 auto !important;
}

.preloader-logo {
  display: block !important;
  width: 100% !important;
  max-width: 440px !important;
  height: auto !important;
  max-height: 40vh !important;
  object-fit: contain !important;
}

@media (max-width: 640px) {
  .preloader-content {
    max-width: 90vw !important;
    padding: 0 0.5rem !important;
  }
  .preloader-logo {
    max-width: 82vw !important;
  }
}

/* ==========================================================================
   OUR VALUES PAGE -- CONTAINER INSET FIX (same root cause as Why Choose Us:
   this page's post_content renders without any wrapping ".container" div,
   so its top-level blocks bleed edge-to-edge instead of sitting in the same
   centered column every other section on the site uses). Rather than
   reconstructing a literal .container div inside post_content, these
   elements get .container's own width/max-width/margin math (see the
   --container-width / --container-pad tokens in main.css :root) applied
   directly, so each one lands on the exact edges a real .container child
   would -- e.g. at a 1440px viewport this resolves to x:48/width:1344,
   matching .container's own inset exactly. */
.metrics-display-matrix,
.wp-block-media-text.page-hero {
  width: calc(100% - (var(--container-pad) * 2)) !important;
  max-width: calc(var(--container-width) - (var(--container-pad) * 2)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* .inner-cta-box already carries its own 50px/40px content padding (see
   inner-pages.css) on top of a content-box model -- box-sizing:border-box
   here makes max-width cap the box's full visible edge (padding included)
   instead of adding padding on top of it, so its rounded corners land on
   the same edges as the grid above instead of just floating narrower
   inside a still-full-bleed box. */
.inner-cta-box {
  width: calc(100% - (var(--container-pad) * 2)) !important;
  max-width: calc(var(--container-width) - (var(--container-pad) * 2)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* .faq-list already carries its own intentional max-width:820px (main.css)
   -- it only needs centering, not a width change. */
.faq-list {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==========================================================================
   WHY CHOOSE US PAGE -- CONTAINER INSET FIX, PART 2 (collage sections)
   The generic .inner-cta-box / .faq-list / .wp-block-media-text.page-hero
   fixes above already cover three of this page's six affected elements
   (same missing-".container" root cause described above). The remaining
   gap is its 5 vision/purpose/promise collage sections (#our-vision-1,
   #our-purpose-1, #why-choose-us-markets, #why-choose-us-discipline,
   #our-promise-1): their post_content also renders with no wrapping
   .container div, so .vision-split-layout / .purpose-split-layout /
   .promise-split-layout bleed edge-to-edge instead of sitting in the same
   centered column. Same .container width/max-width/margin math as above.
   Scoped to body.page-id-11 because, unlike .inner-cta-box/.faq-list, these
   class names are not yet shared by any other live page -- scoping avoids
   surprises if a future page migration (e.g. Our Experience) reuses them
   with its own, already-correct markup. */
body.page-id-11 .vision-split-layout,
body.page-id-11 .purpose-split-layout,
body.page-id-11 .promise-split-layout {
  width: calc(100% - (var(--container-pad) * 2)) !important;
  max-width: calc(var(--container-width) - (var(--container-pad) * 2)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* WHY CHOOSE US PAGE -- COLLAGE IMAGE FILL FIX. Each collage <img> lost its
   vision-img/purpose-img/promise-img className during the HTML->Gutenberg
   conversion (core/image blocks don't carry custom classNames unless one is
   explicitly re-added in the editor), so the only existing rule that gave
   these photos width:100%/height:100%/object-fit:cover (.vision-img /
   .purpose-img / .promise-img in main.css/inner-pages.css) no longer
   matches, leaving a visible grey gap below each photo inside its frame.
   Scoping the same box-fill rule to the parent frame class instead (which
   both the "--main" and "--inset" frame variants keep regardless of the
   image block's own classes) fixes this robustly, including against a
   future re-upload via the block editor's normal UI dropping the class
   again. Scoped to body.page-id-11 for the same reason as above. */
body.page-id-11 .vision-frame img,
body.page-id-11 .purpose-frame img,
body.page-id-11 .promise-frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.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;
}