/* ==========================================================================
   TBG LANDS — "NEXT LEVEL" UI LAYER
   --------------------------------------------------------------------------
   Loaded last, after the theme CSS and the inline tbg-custom-css block, so it
   wins on cascade order. Uses #id selectors where possible to beat the
   existing class-level rules without spraying !important everywhere.

   Rules of engagement for this file:
     - Never change copy. Only presentation.
     - Never reorder or hide content.
     - The hero video section (#home-hero-video) is deliberately untouched.
     - Palette stays inside the brand family: deep teal + warm gold + cream.
       No neon, no pure black, no high-saturation accents.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Deep emerald — the structural colour. Richer and less "corporate teal"
     than the original #2C9297, which read flat and cheap at large sizes. */
  --nl-teal-900: #06231F;
  --nl-teal-800: #0A342D;
  --nl-teal-700: #10493F;
  --nl-teal-600: #175E51;
  --nl-teal-500: #1F7A66;
  --nl-teal-400: #3E9C85;
  --nl-teal-300: #74BFA9;
  --nl-teal-100: #CFE7DF;
  --nl-teal-050: #EAF4EF;

  /* Antique gold — the accent. Warmer and less brassy than #D4AF37. */
  --nl-gold-800: #63481A;
  --nl-gold-700: #836226;
  --nl-gold-600: #A5822F;
  --nl-gold-500: #C09B45;
  --nl-gold-400: #D6B463;
  --nl-gold-300: #E7D194;
  --nl-gold-100: #F6EEDA;

  /* Warm stone neutrals — a touch less yellow than the old cream. */
  --nl-cream: #F8F4EA;
  --nl-cream-2: #F1EAD9;
  --nl-sand: #FAF7F0;
  --nl-white: #FFFFFF;
  --nl-ink: #13201B;
  --nl-ink-2: #2A3A34;
  --nl-muted: #5B6B64;
  --nl-muted-2: #7C8A83;

  /* Lines & shadows — deeper, softer, more "lifted". */
  --nl-line: rgba(31, 122, 102, .16);
  --nl-line-gold: rgba(165, 130, 47, .28);
  --nl-line-light: rgba(255, 255, 255, .14);

  --nl-shadow-xs: 0 1px 2px rgba(19, 32, 27, .05), 0 2px 8px rgba(19, 32, 27, .04);
  --nl-shadow-sm: 0 6px 18px rgba(19, 32, 27, .07), 0 1px 3px rgba(19, 32, 27, .05);
  --nl-shadow-md: 0 18px 44px rgba(10, 52, 45, .12), 0 4px 14px rgba(10, 52, 45, .07);
  --nl-shadow-lg: 0 38px 84px rgba(10, 52, 45, .20), 0 10px 26px rgba(10, 52, 45, .10);
  --nl-shadow-xl: 0 60px 120px rgba(6, 35, 31, .30), 0 18px 40px rgba(6, 35, 31, .16);
  --nl-shadow-gold: 0 18px 44px rgba(165, 130, 47, .22);

  /* Motion */
  --nl-ease: cubic-bezier(.16, 1, .3, 1);
  --nl-ease-soft: cubic-bezier(.22, .61, .36, 1);
  --nl-ease-spring: cubic-bezier(.34, 1.4, .64, 1);

  /* Geometry */
  --nl-r-sm: 10px;
  --nl-r-md: 16px;
  --nl-r-lg: 22px;
  --nl-r-xl: 30px;

  /* Fluid type — keeps headings proportionate from 360px to 1920px.
     NOTE: this build sets html{font-size:62.5%}, so 1rem === 10px here, NOT
     16px. Authoring these in rem silently shrank every heading by ~40%.
     Everything below is expressed in px-based clamp() so it is unambiguous. */
  --nl-fs-display: clamp(36px, 21px + 3.2vw, 68px);
  --nl-fs-h2: clamp(28px, 19px + 1.8vw, 46px);
  --nl-fs-h3: clamp(19px, 16.5px + .8vw, 27px);
  --nl-fs-lead: clamp(15.5px, 14.5px + .35vw, 18px);
  --nl-fs-eyebrow: 11.5px;

  /* Type families — Prata for display, Roboto Slab for section headings,
     Raleway for UI/eyebrows, Fira Sans for body. All shipped with the site. */
  --nl-font-display: "Prata", "PT Serif", Georgia, serif;
  --nl-font-slab: "Roboto Slab", "Roboto", Georgia, serif;
  --nl-font-ui: "Raleway", "Fira Sans", system-ui, sans-serif;
  --nl-font-body: "Fira Sans", system-ui, -apple-system, sans-serif;
}

/* --------------------------------------------------------------------------
   2. GLOBAL TYPE, RHYTHM & SURFACES
   -------------------------------------------------------------------------- */

/* Serif display headings get optical refinements the theme never set. */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Section headings: consistent optical weight + tighter leading for serif. */
.elementor-heading-title {
  letter-spacing: -.005em;
}

/* Body copy reads better with a slightly cooler, less muddy grey. */
.elementor-widget-text-editor p,
.elementor-widget-text-editor .elementor-text-editor {
  color: var(--nl-muted);
}

/* Selection colour, on brand. */
::selection {
  background: rgba(44, 146, 151, .22);
  color: var(--nl-ink);
}

/* A calmer, on-brand focus ring than the browser default. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.elementor-button:focus-visible {
  outline: 2px solid var(--nl-teal-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Scroll progress bar: thin, gold→teal, with a soft bloom. */
#tbg-scroll-progress {
  height: 2px !important;
  background: linear-gradient(90deg, var(--nl-gold-600), var(--nl-gold-400) 45%, var(--nl-teal-500)) !important;
  box-shadow: 0 0 12px rgba(212, 175, 55, .55) !important;
  z-index: 100000 !important;
}

/* --------------------------------------------------------------------------
   3. MOTION PRIMITIVES
   --------------------------------------------------------------------------
   The reveal engine (inline script + [data-tbg-reveal] CSS) already exists and
   works. js/tbg-nextlevel.js feeds it more elements using the same
   .tbg-rv-hide / .tbg-rv-in convention, so nothing here needs to re-implement
   the transitions. These rules only add refinements on top.
   -------------------------------------------------------------------------- */

/* Give reveals a touch more physicality without going theatrical. */
[data-tbg-reveal] {
  will-change: opacity, transform;
}

/* Once revealed, drop the hint so the browser stops compositing layers. */
[data-tbg-reveal].tbg-rv-in {
  will-change: auto;
}

/* Parallax targets are driven from JS via a custom property. */
[data-nl-parallax] {
  will-change: transform;
  transform: translate3d(0, var(--nl-py, 0px), 0);
}

/* Hover-lift primitive reused by cards, frames and buttons. */
.nl-lift {
  transition: transform .55s var(--nl-ease), box-shadow .55s var(--nl-ease),
              border-color .4s ease, background-color .4s ease;
}
.nl-lift:hover {
  transform: translateY(-6px);
}

/* --------------------------------------------------------------------------
   4. NAVBAR
   --------------------------------------------------------------------------
   The header shipped at 101px tall (60px logo box + 20px padding top/bottom)
   around a 26px logo — mostly empty space, and it read as heavy and cheap.
   Tighten it to ~66px and give the bar a real treatment: hairline, frosted
   sticky state, and a gold wipe on the menu.
   -------------------------------------------------------------------------- */
#site-header {
  background: rgba(248, 244, 234, .88);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid rgba(31, 122, 102, .12);
  transition: box-shadow .4s ease, border-color .4s ease, background-color .4s ease;
}

/* --- Bar height: the whole chain -------------------------------------------
   The header was stuck at 139px because of three separate rules, all of them
   inherited from OceanWP's "60px logo box" assumption:
     a) #site-header #site-logo #site-logo-inner { height: 60px }
     b) #site-navigation-wrap .dropdown-menu > li > a { line-height: 60px }
     c) the CTA <span> inherited that 60px line-height ON TOP of its own
        11px padding, inflating its line box to 84px and its <li> to 112px.
   Reset all three so the bar is driven by a 36px logo + a 40px menu row. */
#site-header #site-logo,
#site-header #site-logo #site-logo-inner {
  height: auto !important;
  min-height: 0 !important;
}
#site-header #site-logo #site-logo-inner a {
  line-height: 0;
}
#site-header #site-logo #site-logo-inner a img,
#site-header #site-logo #site-logo-inner a .sticky-logo {
  display: block;
  max-height: 36px !important;
  max-width: 280px !important;
  width: auto !important;
  height: auto !important;
}

/* 14px of breathing room + a 40px row = a 68px bar. */
#site-header #site-header-inner,
#site-header .container {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
/* OceanWP drops the padding to 0 once sticky, which would crush the bar;
   give the sticky state a slightly smaller version instead of none.
   Three selectors because the theme is inconsistent about where it puts
   `is-sticky` (sometimes the <body>, sometimes #site-header itself). */
#site-header.is-sticky #site-header-inner,
body.is-sticky #site-header #site-header-inner,
body.is-sticky #site-header.fixed-scroll #site-header-inner {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
/* Sticky keeps the same mark, a touch smaller.
   NOTE: scope this to .is-sticky only — the header permanently carries
   `fixed-scroll fixed-header` in its class list, so matching .fixed-scroll
   here would shrink the logo in the normal state too. */
#site-header.is-sticky #site-logo #site-logo-inner a img,
body.is-sticky #site-header #site-logo #site-logo-inner a img {
  max-height: 34px !important;
}

/* Frosted, softly separated bar once the page has scrolled. */
#site-header.is-sticky,
#site-header.fixed-scroll.is-sticky {
  background: rgba(248, 244, 234, .94) !important;
  -webkit-backdrop-filter: saturate(170%) blur(16px);
  backdrop-filter: saturate(170%) blur(16px);
  box-shadow: 0 1px 0 rgba(31, 122, 102, .10), 0 14px 40px rgba(10, 52, 45, .10);
  border-bottom-color: transparent;
}

/* Menu links: a 40px row, tighter type, gold hairline that wipes in. */
#site-navigation-wrap .dropdown-menu > li > a {
  position: relative;
  line-height: 40px !important;
  font-family: var(--nl-font-ui);
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .13em;
  text-transform: uppercase;
  transition: color .35s ease;
}
#site-navigation-wrap .dropdown-menu > li > a > .text-wrap {
  position: relative;
  display: inline-block;
}
#site-navigation-wrap .dropdown-menu > li > a > .text-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--nl-gold-600), var(--nl-gold-400));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s var(--nl-ease);
}
#site-navigation-wrap .dropdown-menu > li > a:hover > .text-wrap::after,
#site-navigation-wrap .dropdown-menu > li.tbg-nav-on > a > .text-wrap::after {
  transform: scaleX(1);
}

/* The existing tbg-nav-on rule paints a hard 2px block; soften it. */
#site-navigation-wrap .main-menu > li.tbg-nav-on > a::after {
  display: none !important;
}

/* Sub-menus: quieter shadow, gold top edge. */
#site-navigation-wrap .dropdown-menu ul.sub-menu,
.dropdown-menu .sub-menu {
  border-top: 2px solid var(--nl-gold-400);
  box-shadow: var(--nl-shadow-lg);
  border-radius: 0 0 var(--nl-r-md) var(--nl-r-md);
  overflow: hidden;
}
.dropdown-menu ul li a.menu-link {
  font-family: var(--nl-font-ui);
  transition: padding-left .35s var(--nl-ease), color .3s ease, background-color .3s ease;
}
.dropdown-menu ul li a.menu-link:hover {
  padding-left: 20px;
}

/* "Get in touch" CTA: a proper pill — emerald fill, gold rim, gold sweep on
   hover. The <a> is turned into a flex box so nothing can inflate it via
   line-height, and the pill is a fixed 40px to match the menu row exactly. */
#site-navigation-wrap .dropdown-menu > li.btn > a,
li.btn.menu-item > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}
#site-navigation-wrap .dropdown-menu > li.btn > a > span,
li.btn.menu-item a span {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  line-height: 1 !important;
  overflow: hidden;
  isolation: isolate;
  border-radius: 999px;
  padding: 0 24px !important;
  background: linear-gradient(135deg, var(--nl-teal-600), var(--nl-teal-800)) !important;
  border: 1px solid rgba(214, 180, 99, .45);
  box-shadow: 0 8px 22px rgba(10, 52, 45, .24), inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: box-shadow .45s ease, transform .45s var(--nl-ease), border-color .45s ease;
}
#site-navigation-wrap .dropdown-menu > li.btn > a > span::before,
li.btn.menu-item a span::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, var(--nl-gold-500), var(--nl-gold-400));
  transform: translateY(101%);
  transition: transform .5s var(--nl-ease);
}
#site-navigation-wrap .dropdown-menu > li.btn > a > span:hover,
li.btn.menu-item a span:hover {
  transform: translateY(-2px);
  border-color: var(--nl-gold-400);
  box-shadow: 0 14px 32px rgba(165, 130, 47, .34), inset 0 1px 0 rgba(255, 255, 255, .2);
}
#site-navigation-wrap .dropdown-menu > li.btn > a > span:hover::before,
li.btn.menu-item a span:hover::before {
  transform: translateY(0);
}
#site-navigation-wrap .dropdown-menu > li.btn > a > span:hover,
#site-navigation-wrap .dropdown-menu > li.btn > a > span:hover * {
  color: var(--nl-teal-900) !important;
}

/* Mobile hamburger: brand colour instead of flat black. */
.mobile-menu .hamburger-inner,
.mobile-menu .hamburger-inner::before,
.mobile-menu .hamburger-inner::after {
  background-color: var(--nl-teal-700) !important;
}
/* OceanWP gives the burger / close button / after-header links the same 60px
   line-height as the desktop menu. Below the menu breakpoint the burger is
   the tallest thing in the bar, so it — not the logo — was setting the mobile
   header height (84px at 390px wide). Match the desktop row instead. */
.oceanwp-mobile-menu-icon a,
.oceanwp-mobile-menu-icon .mobile-menu,
.mobile-menu-close,
.after-header-content-inner > a {
  line-height: 40px !important;
}
.oceanwp-mobile-menu-icon a {
  display: flex !important;
  align-items: center;
  height: 40px;
}
.oceanwp-mobile-menu-icon .hamburger,
.oceanwp-mobile-menu-icon .hamburger-box {
  line-height: 1;
}
/* --------------------------------------------------------------------------
   5. EXPERIENCE — #tbg-experience  ("Welcome to TBG Lands")
   --------------------------------------------------------------------------
   The h1 shipped with mix-blend-mode:color-burn, which turned it into an
   illegible blue smear over the photograph. Replace with a legible treatment
   plus a scrim so the type holds at any image crop.
   -------------------------------------------------------------------------- */
#tbg-experience {
  position: relative;
  margin-bottom: 0 !important;
}

/* Left column carries the photograph. Add a directional scrim.
   The solid colour is the safety net: a sized background-image can under-fill
   when flex stretches the column, and without it the page background shows as a
   band at the bottom of the section. */
#tbg-experience #about-hero-col-1 > .elementor-widget-wrap {
  position: relative;
  background-color: #0B3038 !important;
  background-position: center center !important;
  background-size: cover !important;
}
#tbg-experience #about-hero-col-1 > .elementor-widget-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(10, 50, 54, .62) 0%, rgba(10, 50, 54, .28) 46%, rgba(10, 50, 54, 0) 78%),
    linear-gradient(0deg, rgba(10, 50, 54, .34) 0%, rgba(10, 50, 54, 0) 42%);
  z-index: 1;
  pointer-events: none;
}
#tbg-experience #about-hero-col-1 > .elementor-widget-wrap > * {
  position: relative;
  z-index: 2;
}

/* The heading itself. */
#tbg-experience .color-burn .elementor-heading-title,
#tbg-experience h1.elementor-heading-title {
  mix-blend-mode: normal !important;
  color: var(--nl-white) !important;
  font-family: "Prata", serif !important;
  font-size: var(--nl-fs-display) !important;
  line-height: 1.06 !important;
  letter-spacing: -.015em !important;
  text-shadow: 0 2px 26px rgba(6, 32, 35, .45);
  max-width: 11ch;
}
/* Gold rule under the display heading. Anchored to the heading box itself so it
   lines up with the first letter rather than the widget's outer edge. */
#tbg-experience .color-burn .elementor-heading-title::after {
  content: "";
  display: block;
  width: 76px;
  height: 2px;
  margin-top: 26px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--nl-gold-400), rgba(212, 175, 55, 0));
}

/* Right column: the reading panel. */
#tbg-experience #about-hero-col-2 > .elementor-element-populated {
  position: relative;
  background: var(--nl-teal-050) !important;
  padding: clamp(48px, 6vw, 96px) clamp(28px, 4vw, 72px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
/* Vertical gold hairline separating panel from photo. */
#tbg-experience #about-hero-col-2 > .elementor-element-populated::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(212, 175, 55, 0) 0%,
    rgba(212, 175, 55, .55) 30%,
    rgba(212, 175, 55, .55) 70%,
    rgba(212, 175, 55, 0) 100%);
}

#tbg-experience #about-hero-col-2 h3 {
  font-family: "Raleway", sans-serif !important;
  font-weight: 800 !important;
  font-size: var(--nl-fs-h3) !important;
  line-height: 1.25 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nl-teal-700) !important;
  text-align: left !important;
  margin: 0 0 26px !important;
}
#tbg-experience #about-hero-col-2 p {
  font-size: var(--nl-fs-lead) !important;
  line-height: 1.85 !important;
  color: var(--nl-ink-2) !important;
  text-align: left !important;
  margin: 0 0 18px !important;
}
#tbg-experience #about-hero-col-2 p:last-child {
  margin-bottom: 0 !important;
}

/* Drop cap, restyled from the blunt 7em Georgia to something intentional. */
#tbg-experience .has-dropcap2 p:first-child::first-letter {
  font-family: "Prata", serif !important;
  font-size: 3.6em !important;
  line-height: .84 !important;
  float: left;
  padding: 4px 12px 0 0 !important;
  color: var(--nl-gold-600);
}

/* --------------------------------------------------------------------------
   6. PHILOSOPHY — section .elementor-element-3a515c3
   --------------------------------------------------------------------------
   Rebuilt as a cinematic split: full-bleed photograph on the left, a deep
   emerald field on the right carrying a floating glass card, a large ghosted
   wordmark for depth, and the gold signature as a sign-off.

   Two things this section needs care with:
   - It ships as elementor-section-height-min-height, so Elementor puts a 100vh
     min-height on the container. That stretches the columns without stretching
     their painted backgrounds, leaving a band of the section background at the
     bottom. Kill it and let the section size to content.
   - Every sized background-image gets a solid background-color underneath, so
     that even if the image under-fills, the gap is invisible rather than cream.
   -------------------------------------------------------------------------- */
section.elementor-element-3a515c3 {
  position: relative;
  background: var(--nl-cream) !important;
  overflow: hidden;
}
section.elementor-element-3a515c3 > .elementor-container {
  min-height: 0 !important;
}

/* ---------- Left column: the photograph ---------- */
section.elementor-element-3a515c3 .elementor-element-0fa860e > .elementor-widget-wrap {
  position: relative;
  background-color: #0E2E24 !important;
  background-position: center center !important;
  background-size: cover !important;
  overflow: hidden;
}
/* fade the photo into the emerald panel on its right edge */
section.elementor-element-3a515c3 .elementor-element-0fa860e > .elementor-widget-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
      rgba(6, 35, 31, .30) 0%,
      rgba(6, 35, 31, 0) 38%,
      rgba(10, 52, 45, .62) 84%,
      rgba(10, 52, 45, .98) 100%);
}
/* thin gold frame that tightens on hover */
section.elementor-element-3a515c3 .elementor-element-0fa860e > .elementor-widget-wrap::after {
  content: "";
  position: absolute;
  inset: 30px;
  z-index: 1;
  border: 1px solid rgba(214, 180, 99, .40);
  pointer-events: none;
  transition: inset .8s var(--nl-ease), border-color .8s ease;
}
section.elementor-element-3a515c3 .elementor-element-0fa860e > .elementor-widget-wrap:hover::after {
  inset: 18px;
  border-color: rgba(214, 180, 99, .82);
}

/* ---------- Right column: the emerald field ----------
   Elementor's generated CSS pins this wrap to align-items:flex-start through a
   [data-element_type="column"] selector at a higher specificity, so the layout
   properties below need !important to take effect. */
section.elementor-element-3a515c3 .elementor-element-838c296 > .elementor-widget-wrap {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(24px, 2.8vw, 38px) !important;
  padding: clamp(56px, 5.8vw, 96px) clamp(22px, 4.5vw, 76px) !important;
  background-color: var(--nl-teal-700) !important;
  background-image: linear-gradient(140deg,
      rgba(6, 35, 31, .97) 0%,
      rgba(10, 52, 45, .94) 44%,
      rgba(23, 94, 81, .90) 100%) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}
/* gold + emerald bloom and a fine grain for depth */
section.elementor-element-3a515c3 .elementor-element-838c296 > .elementor-widget-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 78% at 100% 0%, rgba(214, 180, 99, .20), transparent 56%),
    radial-gradient(100% 72% at 0% 100%, rgba(62, 156, 133, .24), transparent 58%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
/* large ghosted wordmark behind the card */
section.elementor-element-3a515c3 .elementor-element-838c296 > .elementor-widget-wrap::after {
  content: "TBG";
  position: absolute;
  right: -2%;
  bottom: -6%;
  z-index: 0;
  font-family: var(--nl-font-display);
  font-size: clamp(48px, 17vw, 150px);
  line-height: .8;
  letter-spacing: -.03em;
  color: rgba(255, 255, 255, .035);
  pointer-events: none;
  user-select: none;
}
section.elementor-element-3a515c3 .elementor-element-838c296 > .elementor-widget-wrap > * {
  position: relative;
  z-index: 1;
}

/* ---------- The glass card ---------- */
section.elementor-element-3a515c3 .elementor-element-ad8f484 {
  width: 700px !important;
  max-width: 100% !important;
  align-self: center !important;
  margin: 0 !important;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #FFFDF8 0%, var(--nl-cream-2) 100%) !important;
  border-radius: var(--nl-r-xl) !important;
  box-shadow:
    0 50px 90px -40px rgba(3, 20, 17, .85),
    0 0 0 1px rgba(255, 255, 255, .10),
    inset 0 1px 0 rgba(255, 255, 255, .9) !important;
  transition: transform .7s var(--nl-ease), box-shadow .7s ease;
}
section.elementor-element-3a515c3 .elementor-element-ad8f484:hover {
  transform: translateY(-4px);
  box-shadow:
    0 64px 110px -42px rgba(3, 20, 17, .9),
    0 0 0 1px rgba(214, 180, 99, .28),
    inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}
/* gold hairline along the top edge */
section.elementor-element-3a515c3 .elementor-element-ad8f484::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg, var(--nl-gold-400) 0%, var(--nl-gold-300) 42%, rgba(214, 180, 99, 0) 100%);
}
section.elementor-element-3a515c3 .elementor-element-59df16e > .elementor-widget-wrap {
  display: block !important;
  justify-content: flex-start !important;
  padding: clamp(34px, 4vw, 60px) clamp(30px, 3.6vw, 60px) !important;
}

/* the two widgets inside the card are plain blocks now */
section.elementor-element-3a515c3 .elementor-element-838c296 .elementor-widget-heading,
section.elementor-element-3a515c3 .elementor-element-838c296 .elementor-widget-text-editor {
  width: 100%;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
  background: none;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* eyebrow — shipped with mix-blend-mode:color-burn, which washed it out */
section.elementor-element-3a515c3 .elementor-element-838c296 .color-burn .elementor-heading-title,
section.elementor-element-3a515c3 .elementor-element-838c296 h2.elementor-heading-title {
  mix-blend-mode: normal !important;
  font-family: var(--nl-font-ui) !important;
  font-weight: 700 !important;
  font-size: var(--nl-fs-eyebrow) !important;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--nl-gold-600) !important;
  text-align: left !important;
  margin: 0 !important;
}
section.elementor-element-3a515c3 .elementor-element-838c296 .elementor-widget-heading .elementor-widget-container::after {
  content: "";
  display: block;
  width: 52px;
  height: 2px;
  margin-top: 15px;
  background: linear-gradient(90deg, var(--nl-gold-400), rgba(214, 180, 99, 0));
}

/* the statement — its inline text-align:center has to be beaten */
section.elementor-element-3a515c3 .elementor-element-838c296 h3 {
  font-family: var(--nl-font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(26px, 18px + 1.7vw, 42px) !important;
  line-height: 1.18 !important;
  letter-spacing: -.012em;
  color: var(--nl-teal-800) !important;
  text-align: left !important;
  margin: 22px 0 18px !important;
  text-wrap: balance;
}
section.elementor-element-3a515c3 .elementor-element-838c296 .elementor-widget-text-editor p {
  font-family: var(--nl-font-body) !important;
  font-size: var(--nl-fs-lead) !important;
  line-height: 1.9 !important;
  color: var(--nl-ink-2) !important;
  text-align: left !important;
  margin: 0 !important;
}

/* ---------- Gold brand mark, aligned under the card ----------
   Elementor gives this widget container width:140% + margin-left:-40%, which
   is exactly what threw the mark left of the panel. Reset it. */
section.elementor-element-3a515c3 .elementor-element-e6532b6 {
  width: 700px !important;
  max-width: 100% !important;
  align-self: center !important;
  margin: 0 !important;
}
section.elementor-element-3a515c3 .elementor-element-e6532b6 > .elementor-container {
  justify-content: flex-start !important;
  gap: 0 !important;
}
section.elementor-element-3a515c3 .elementor-element-2487e39 {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}
section.elementor-element-3a515c3 .elementor-element-b80d3c2 {
  display: none !important;
}
section.elementor-element-3a515c3 .elementor-element-2487e39 > .elementor-widget-wrap {
  display: block !important;
  padding: 0 !important;
}
section.elementor-element-3a515c3 .elementor-element-d320b9b,
section.elementor-element-3a515c3 .elementor-element-d320b9b > .elementor-widget-container {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
section.elementor-element-3a515c3 .elementor-element-d320b9b img {
  display: block !important;
  width: clamp(118px, 9.5vw, 156px) !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  opacity: .95;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .45));
}
/* --------------------------------------------------------------------------
   7. VISION & MISSION — #tbg-vision
   --------------------------------------------------------------------------
   "Twin pillars". Two glass plaques on a blueprint field, with a gold seam
   between them, an animated border-beam that runs the perimeter on hover, and
   a gold spotlight that tracks the cursor.

   The 21st.dev-style touches that port cleanly to vanilla CSS:
     - gradient border-beam via the mask-composite ring trick
     - pointer-tracked spotlight (reuses --tbg-mx / --tbg-my that the tilt
       layer already writes on the column; custom properties inherit, so the
       card can read them without any extra JS)
     - concentric "compass" rings radiating from the card corner
   -------------------------------------------------------------------------- */

/* Registers --vm-ang so the border-beam can be interpolated. Browsers without
   @property simply hold the beam at 0deg — still a clean static highlight. */
@property --vm-ang {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes tbg-vm-beam {
  to { --vm-ang: 360deg; }
}

/* --- The field ----------------------------------------------------------- */
#tbg-vision {
  position: relative;
  padding: clamp(74px, 8vw, 124px) 0 !important;
  overflow: hidden;
  background:
    radial-gradient(940px 540px at 88% 4%, rgba(214, 180, 99, .15), rgba(214, 180, 99, 0) 64%),
    radial-gradient(820px 560px at 4% 98%, rgba(31, 122, 102, .11), rgba(31, 122, 102, 0) 64%),
    linear-gradient(180deg, var(--nl-cream) 0%, #FCF9F1 48%, var(--nl-cream) 100%) !important;
}
/* Faint blueprint grid, masked so it fades out toward the edges. */
#tbg-vision::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(31, 122, 102, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 122, 102, .075) 1px, transparent 1px);
  background-size: 70px 70px;
  -webkit-mask-image: radial-gradient(125% 92% at 50% 42%, #000 26%, transparent 76%);
  mask-image: radial-gradient(125% 92% at 50% 42%, #000 26%, transparent 76%);
}
/* Gold hairline along the top edge, so the emerald Philosophy band above
   terminates cleanly. */
#tbg-vision::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(184, 134, 11, 0), rgba(184, 134, 11, .42) 22%,
    rgba(184, 134, 11, .42) 78%, rgba(184, 134, 11, 0));
}

/* A very slow gold aurora drifting across the field. */
@keyframes tbg-vm-aurora {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .7; }
  50%      { transform: translate3d(-3%, 2%, 0) scale(1.08); opacity: 1; }
}
#tbg-vision > .elementor-container::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: -14%;
  height: 62%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(closest-side, rgba(214, 180, 99, .17), rgba(214, 180, 99, 0) 72%);
  filter: blur(14px);
  animation: tbg-vm-aurora 17s ease-in-out infinite;
}

/* --- The gold seam between the two pillars (desktop only) ---------------- */
#tbg-vision > .elementor-container {
  position: relative;
}
@media (max-width: 1024px) {
  #tbg-vision > .elementor-container::before,
  #tbg-vision > .elementor-container::after {
    display: none;
  }
}
#tbg-vision > .elementor-container::before {
  content: "";
  position: absolute;
  left: calc(40% + 5px);
  top: 10%;
  bottom: 10%;
  width: 15px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
  background-image:
    radial-gradient(circle at 50% 50%,
      rgba(184, 134, 11, .85) 0 2.5px, rgba(184, 134, 11, 0) 2.6px),
    linear-gradient(180deg,
      rgba(184, 134, 11, 0), rgba(184, 134, 11, .34) 28%,
      rgba(184, 134, 11, .34) 72%, rgba(184, 134, 11, 0));
  background-size: 15px 15px, 1px 100%;
  background-position: 50% 50%, 50% 0;
  background-repeat: no-repeat, no-repeat;
}

/* --- The plaques ---------------------------------------------------------
   40/60, not 50/50. The Vision is one sentence and the Mission is a long
   explanation, so equal columns left the Vision plaque with a dead bottom
   half. Narrowing the left column makes its pull-quote wrap taller while
   widening the right one makes the Mission copy wrap shorter — the two
   plaques converge on the same height without faking anything. */
@media (min-width: 1025px) {
  #tbg-vision > .elementor-container > .elementor-column:first-child {
    width: 40% !important;
  }
  #tbg-vision > .elementor-container > .elementor-column:last-child {
    width: 60% !important;
  }
}
#tbg-vision > .elementor-container > .elementor-column {
  position: relative;
  display: flex;
  padding: 1px;                     /* becomes the 1px ring */
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(184, 134, 11, .30), rgba(31, 122, 102, .20));
  box-shadow: 0 18px 44px rgba(19, 32, 27, .09), 0 2px 6px rgba(19, 32, 27, .05);
  transition: box-shadow .6s var(--nl-ease);
}
#tbg-vision > .elementor-container > .elementor-column:hover {
  box-shadow: 0 40px 90px rgba(19, 32, 27, .17), 0 10px 28px rgba(131, 98, 38, .16);
}

/* The animated border-beam: a masked conic ring, revealed on hover. */
#tbg-vision > .elementor-container > .elementor-column::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .55s ease;
  background: conic-gradient(from var(--vm-ang),
    rgba(214, 180, 99, 0) 0deg,
    rgba(214, 180, 99, .95) 42deg,
    rgba(255, 255, 255, .95) 54deg,
    rgba(214, 180, 99, .95) 66deg,
    rgba(214, 180, 99, 0) 118deg,
    rgba(214, 180, 99, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: tbg-vm-beam 4.6s linear infinite;
  animation-play-state: paused;
}
#tbg-vision > .elementor-container > .elementor-column:hover::before {
  opacity: 1;
  animation-play-state: running;
}
/* The tilt layer puts a white spotlight on the column; the plaque is opaque,
   so swap it for a gold one painted on the card itself. */
#tbg-vision > .elementor-container > .elementor-column.tbg-shine::after {
  display: none !important;
}

/* The plaque face. */
#tbg-vision > .elementor-container > .elementor-column > .elementor-widget-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  padding: clamp(36px, 3.6vw, 58px) clamp(30px, 3.2vw, 52px) !important;
  background: linear-gradient(168deg, #FFFFFF 0%, #FEFCF7 58%, #FBF6EA 100%);
  border: 0;
  border-radius: 25px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 0 0 1px rgba(184, 134, 11, .10);
  overflow: hidden;
}
/* Concentric "compass" rings radiating out of the bottom-right corner. */
#tbg-vision > .elementor-container > .elementor-column > .elementor-widget-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: repeating-radial-gradient(circle at 100% 100%,
    rgba(184, 134, 11, .22) 0 1px,
    rgba(184, 134, 11, 0) 1px 32px);
  -webkit-mask-image: radial-gradient(520px circle at 100% 100%, #000, transparent 78%);
  mask-image: radial-gradient(520px circle at 100% 100%, #000, transparent 78%);
}
/* Gold spotlight that tracks the pointer. --tbg-mx / --tbg-my are written on
   the column by the depth layer and inherit down to here. */
#tbg-vision > .elementor-container > .elementor-column > .elementor-widget-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .55s ease;
  background: radial-gradient(380px circle at var(--tbg-mx, 50%) var(--tbg-my, 50%),
    rgba(214, 180, 99, .30), rgba(214, 180, 99, 0) 64%);
}
#tbg-vision > .elementor-container > .elementor-column:hover > .elementor-widget-wrap::after {
  opacity: 1;
}

/* --- The medallion + heading --------------------------------------------- */
#tbg-vision .tbg-vm-icon {
  position: relative;
  padding-left: 78px;
  margin-bottom: 26px;
}
#tbg-vision .tbg-vm-icon::before {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border-radius: 50%;
  color: #FFFDF8;
  background: linear-gradient(142deg, var(--nl-gold-400) 0%, var(--nl-gold-600) 55%, var(--nl-gold-800) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 0 0 1px rgba(255, 255, 255, .7),
    0 0 0 7px rgba(184, 134, 11, .09),
    0 12px 26px rgba(131, 98, 38, .30);
  transition: transform .55s var(--nl-ease-spring), box-shadow .55s ease;
}
/* Vision = eye, Mission = bullseye. */
#tbg-vision .elementor-column:first-child .tbg-vm-icon::before {
  content: "\f06e";
}
#tbg-vision .elementor-column:last-child .tbg-vm-icon::before {
  content: "\f140";
  background: linear-gradient(142deg, var(--nl-teal-400) 0%, var(--nl-teal-600) 55%, var(--nl-teal-800) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 0 0 1px rgba(255, 255, 255, .7),
    0 0 0 7px rgba(31, 122, 102, .09),
    0 12px 26px rgba(10, 52, 45, .28);
}
#tbg-vision > .elementor-container > .elementor-column:hover .tbg-vm-icon::before {
  transform: translateY(-50%) scale(1.07) rotate(-4deg);
}

#tbg-vision .tbg-vm-icon .elementor-heading-title {
  position: relative;
  font-family: var(--nl-font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 20px + 1.5vw, 42px) !important;
  line-height: 1.12 !important;
  letter-spacing: -.01em !important;
  color: var(--nl-teal-800) !important;
  margin: 0 !important;
}
#tbg-vision .elementor-column:last-child .tbg-vm-icon .elementor-heading-title {
  color: var(--nl-teal-800) !important;
}
/* Retire the theme's blocky underline, replace it with a tapered gold rule. */
#tbg-vision .tbg-vm-icon .elementor-heading-title::after {
  content: "" !important;
  display: block !important;
  position: static !important;
  width: 56px !important;
  height: 2px !important;
  margin-top: 18px !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg, var(--nl-gold-500), rgba(214, 180, 99, 0)) !important;
}
#tbg-vision .elementor-column:last-child .tbg-vm-icon .elementor-heading-title::after {
  background: linear-gradient(90deg, var(--nl-teal-500), rgba(31, 122, 102, 0)) !important;
}

/* --- Body copy -----------------------------------------------------------
   The Vision statement is one short sentence; the Mission is a long
   explanation. Rather than fake a match, lean into it: the Vision reads as a
   pull-quote set in Prata and anchored to the bottom of its plaque. */
#tbg-vision .elementor-widget-text-editor {
  position: relative;
  z-index: 1;
}
#tbg-vision .elementor-widget-text-editor p {
  font-family: var(--nl-font-body) !important;
  font-size: var(--nl-fs-lead) !important;
  line-height: 1.92 !important;
  color: var(--nl-ink-2) !important;
  margin: 0 0 16px !important;
}
/* Card 1 — the Vision statement, set as a pull-quote. */
#tbg-vision .elementor-column:first-child .elementor-widget-text-editor p {
  position: relative;
  font-family: var(--nl-font-display) !important;
  font-size: clamp(24px, 16px + 1.5vw, 40px) !important;
  line-height: 1.4 !important;
  letter-spacing: -.01em !important;
  color: var(--nl-teal-800) !important;
  padding-left: 29px;
  border-left: 2px solid rgba(184, 134, 11, .45);
  text-wrap: balance;
}
#tbg-vision .elementor-column:first-child .elementor-widget-text-editor p::before {
  content: "\201C";
  position: absolute;
  left: 18px;
  top: -34px;
  font-family: var(--nl-font-display);
  font-size: 62px;
  line-height: 1;
  color: rgba(184, 134, 11, .30);
  pointer-events: none;
  user-select: none;
}
#tbg-vision .elementor-widget-text-editor p:last-child {
  margin-bottom: 0 !important;
}
/* A hairline between the two Mission paragraphs. Scoped to p+p so the Vision
   card — which has a single paragraph — never gets a stray rule above it. */
#tbg-vision .elementor-widget-text-editor p + p {
  padding-top: 18px;
  border-top: 1px solid rgba(31, 122, 102, .16);
}

/* --------------------------------------------------------------------------
   8. CHAIRMAN'S MESSAGE — #tbg-chairman
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   8. CHAIRMAN'S MESSAGE — #tbg-chairman
   -------------------------------------------------------------------------- */
#tbg-chairman {
  padding: clamp(56px, 6vw, 92px) 0 !important;
  background: linear-gradient(180deg, var(--nl-cream) 0%, var(--nl-cream-2) 100%);
}

#tbg-chairman .tbg-quote-section .elementor-widget-wrap,
#tbg-chairman > .elementor-container > .elementor-column > .elementor-widget-wrap {
  position: relative;
  isolation: isolate;
  padding: clamp(46px, 5vw, 78px) clamp(30px, 5vw, 84px) !important;
  background: linear-gradient(135deg, var(--nl-teal-800) 0%, var(--nl-teal-700) 48%, var(--nl-teal-600) 100%) !important;
  border-radius: var(--nl-r-xl) !important;
  box-shadow: var(--nl-shadow-lg) !important;
  overflow: hidden;
}
/* Warm bloom in the top-right so the flat gradient gains depth. */
#tbg-chairman > .elementor-container > .elementor-column > .elementor-widget-wrap::before {
  content: "";
  position: absolute;
  right: -14%;
  top: -55%;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, .22), rgba(212, 175, 55, 0) 66%);
  z-index: -1;
  pointer-events: none;
}
/* Hairline gold frame inset from the edge. */
#tbg-chairman > .elementor-container > .elementor-column > .elementor-widget-wrap::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(212, 175, 55, .26);
  border-radius: calc(var(--nl-r-xl) - 8px);
  pointer-events: none;
  z-index: 1;
}

#tbg-chairman .tbg-quote {
  position: relative;
  z-index: 2;
  font-family: "Prata", serif !important;
  font-weight: 400 !important;
  font-size: clamp(19px, 15.5px + 1.05vw, 30px) !important;
  line-height: 1.55 !important;
  letter-spacing: -.005em !important;
  color: var(--nl-white) !important;
  text-wrap: balance;
}

#tbg-chairman .tbg-quote-label {
  position: relative;
  z-index: 2;
  font-family: "Raleway", sans-serif !important;
  font-weight: 700 !important;
  font-size: var(--nl-fs-eyebrow) !important;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--nl-gold-300) !important;
  margin: clamp(28px, 3vw, 40px) 0 0 !important;
}
/* The original rules parked these side rules at 50% +/- 120px, which now
   collides with the wider letterspaced label. Push them further out.
   (The label is a full-width block, so offsets must be measured from 50%.) */
#tbg-chairman .tbg-quote-label::before,
#tbg-chairman .tbg-quote-label::after {
  top: 50% !important;
  width: 54px !important;
  height: 1px !important;
}
#tbg-chairman .tbg-quote-label::before {
  left: calc(50% - 152px) !important;
  right: auto !important;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0), rgba(212, 175, 55, .7)) !important;
}
#tbg-chairman .tbg-quote-label::after {
  right: calc(50% - 152px) !important;
  left: auto !important;
  background: linear-gradient(90deg, rgba(212, 175, 55, .7), rgba(212, 175, 55, 0)) !important;
}

/* --------------------------------------------------------------------------
   9. HIGHLIGHTS — #tbg-features
   -------------------------------------------------------------------------- */
#tbg-features {
  padding: clamp(72px, 8vw, 120px) 0 !important;
  background: linear-gradient(180deg, var(--nl-sand) 0%, var(--nl-cream-2) 100%) !important;
}

#tbg-features .tbg-features-grid {
  gap: clamp(20px, 2.2vw, 32px);
}

#tbg-features .tbg-feature-card {
  position: relative;
  overflow: hidden;
  padding: clamp(38px, 3.6vw, 58px) clamp(24px, 2.4vw, 40px) clamp(34px, 3.2vw, 52px);
  background: linear-gradient(180deg, #FFFFFF 0%, #FDFBF6 100%);
  border: 1px solid var(--nl-line-gold);
  border-radius: var(--nl-r-lg);
  box-shadow: var(--nl-shadow-xs);
  transition: transform .55s var(--nl-ease), box-shadow .55s var(--nl-ease),
              border-color .45s ease;
}
/* Gold hairline that draws across the top on hover. */
#tbg-features .tbg-feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--nl-gold-600), var(--nl-gold-400) 50%, var(--nl-teal-500));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s var(--nl-ease);
}
/* Corner bracket — a quiet nod to architectural drawings. */
#tbg-features .tbg-feature-card::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 22px;
  height: 22px;
  border-right: 1px solid var(--nl-line-gold);
  border-bottom: 1px solid var(--nl-line-gold);
  opacity: 0;
  transition: opacity .5s ease, transform .5s var(--nl-ease);
  transform: translate(-4px, -4px);
}
#tbg-features .tbg-feature-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--nl-shadow-gold);
  border-color: rgba(184, 134, 11, .40);
}
#tbg-features .tbg-feature-card:hover::before {
  transform: scaleX(1);
}
#tbg-features .tbg-feature-card:hover::after {
  opacity: 1;
  transform: translate(0, 0);
}

/* Icon: gold ring that fills and lifts. */
#tbg-features .tbg-feature-icon {
  position: relative;
  width: 84px;
  height: 84px;
  margin: 0 auto 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 30px;
  color: var(--nl-gold-700);
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 60%),
    rgba(184, 134, 11, .07);
  border: 1px solid rgba(184, 134, 11, .30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
  transition: transform .55s var(--nl-ease), background-color .45s ease,
              border-color .45s ease, box-shadow .45s ease;
}
/* Concentric ring detail. */
#tbg-features .tbg-feature-icon::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px dashed rgba(184, 134, 11, .26);
  transition: transform .8s var(--nl-ease), border-color .5s ease, opacity .5s ease;
}
#tbg-features .tbg-feature-card:hover .tbg-feature-icon {
  transform: translateY(-3px) scale(1.06);
  background-color: rgba(184, 134, 11, .13);
  border-color: rgba(184, 134, 11, .52);
  box-shadow: 0 12px 28px rgba(184, 134, 11, .20), inset 0 1px 0 rgba(255, 255, 255, .9);
}
#tbg-features .tbg-feature-card:hover .tbg-feature-icon::after {
  transform: rotate(45deg) scale(1.05);
  border-color: rgba(44, 146, 151, .42);
}

#tbg-features .tbg-feature-title {
  font-family: "Raleway", sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.02em !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nl-ink) !important;
  line-height: 1.5 !important;
  margin: 0 0 14px !important;
}
#tbg-features .tbg-feature-text {
  font-size: .97em !important;
  line-height: 1.8 !important;
  color: var(--nl-muted) !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   10. GATED COMMUNITY (#tbg-gated) & KARJAT'S SECRET (#tbg-karjat)
   --------------------------------------------------------------------------
   Both are mirrored image/text splits with an icon list.
   -------------------------------------------------------------------------- */
#tbg-gated,
#tbg-karjat {
  padding: clamp(72px, 8vw, 118px) 0 !important;
}
#tbg-gated {
  background: linear-gradient(180deg, var(--nl-cream-2) 0%, var(--nl-teal-050) 100%) !important;
}
#tbg-karjat {
  background: linear-gradient(180deg, var(--nl-teal-050) 0%, var(--nl-cream) 100%) !important;
}

/* Image frames: clipped reveal + slow zoom on hover. */
#tbg-gated .elementor-widget-image .elementor-widget-container,
#tbg-karjat .elementor-widget-image .elementor-widget-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--nl-r-lg) !important;
  box-shadow: var(--nl-shadow-md);
  transition: box-shadow .6s var(--nl-ease);
}
#tbg-gated .elementor-widget-image img,
#tbg-karjat .elementor-widget-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--nl-r-lg) !important;
  transition: transform 1.1s var(--nl-ease), filter .8s ease;
}
#tbg-gated .elementor-widget-image .elementor-widget-container:hover,
#tbg-karjat .elementor-widget-image .elementor-widget-container:hover {
  box-shadow: var(--nl-shadow-lg);
}
#tbg-gated .elementor-widget-image .elementor-widget-container:hover img,
#tbg-karjat .elementor-widget-image .elementor-widget-container:hover img {
  transform: scale(1.055);
}
/* Gold inset hairline, matching the philosophy frame language. */
#tbg-gated .elementor-widget-image .elementor-widget-container::after,
#tbg-karjat .elementor-widget-image .elementor-widget-container::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(212, 175, 55, .55) !important;
  border-radius: calc(var(--nl-r-lg) - 6px) !important;
  opacity: 0 !important;
  transform: scale(.97) !important;
  transition: opacity .5s ease, transform .6s var(--nl-ease) !important;
  pointer-events: none;
  z-index: 2;
}
#tbg-gated .elementor-widget-image .elementor-widget-container:hover::after,
#tbg-karjat .elementor-widget-image .elementor-widget-container:hover::after {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* Headings. */
#tbg-gated .elementor-heading-title,
#tbg-karjat .elementor-heading-title {
  font-family: "Prata", serif !important;
  font-weight: 400 !important;
  font-size: var(--nl-fs-h2) !important;
  line-height: 1.2 !important;
  color: var(--nl-teal-700) !important;
  margin-bottom: 20px !important;
}
/* Replace the flat 4px block with a tapered gold rule. */
#tbg-gated .elementor-heading-title::after,
#tbg-karjat .elementor-heading-title::after {
  content: "" !important;
  position: absolute !important;
  left: 0;
  bottom: 0;
  width: 84px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg, var(--nl-gold-600), rgba(212, 175, 55, 0)) !important;
  transition: width .7s var(--nl-ease) !important;
}
#tbg-karjat .elementor-heading-title::after {
  background: linear-gradient(90deg, var(--nl-teal-600), rgba(44, 146, 151, 0)) !important;
}
#tbg-gated .elementor-col-50:hover .elementor-heading-title::after,
#tbg-karjat .elementor-col-50:hover .elementor-heading-title::after {
  width: 130px !important;
}

#tbg-gated .elementor-widget-text-editor p,
#tbg-karjat .elementor-widget-text-editor p {
  font-size: var(--nl-fs-lead) !important;
  line-height: 1.9 !important;
  color: var(--nl-ink-2) !important;
}

/* Icon list → tidy rows with a soft hover wash. */
#tbg-gated .elementor-icon-list-items,
#tbg-karjat .elementor-icon-list-items {
  margin-top: 6px !important;
}
#tbg-gated .elementor-icon-list-item,
#tbg-karjat .elementor-icon-list-item {
  display: flex;
  align-items: center;
  padding: 11px 14px !important;
  margin-left: -14px !important;
  border-radius: var(--nl-r-sm);
  font-size: 1.02em !important;
  color: var(--nl-ink-2) !important;
  border-bottom: 1px solid rgba(44, 146, 151, .09);
  transition: transform .4s var(--nl-ease), background-color .4s ease, border-color .4s ease;
}
#tbg-gated .elementor-icon-list-item:last-child,
#tbg-karjat .elementor-icon-list-item:last-child {
  border-bottom: 0;
}
#tbg-gated .elementor-icon-list-item:hover,
#tbg-karjat .elementor-icon-list-item:hover {
  transform: translateX(6px);
  background: rgba(44, 146, 151, .07);
  border-color: transparent;
}
#tbg-karjat .elementor-icon-list-item:hover {
  background: rgba(184, 134, 11, .07);
}
#tbg-gated .elementor-icon-list-icon,
#tbg-karjat .elementor-icon-list-icon {
  width: 34px !important;
  font-size: 15px !important;
  margin-right: 14px !important;
  flex-shrink: 0;
  transition: transform .45s var(--nl-ease);
}
#tbg-gated .elementor-icon-list-item:hover .elementor-icon-list-icon,
#tbg-karjat .elementor-icon-list-item:hover .elementor-icon-list-icon {
  transform: scale(1.18);
}

/* --------------------------------------------------------------------------
   11. LEGACY — #tbg-legacy
   --------------------------------------------------------------------------
   A short statement band. Give it depth and a proper display treatment.
   -------------------------------------------------------------------------- */
#tbg-legacy {
  position: relative;
  padding: clamp(70px, 7.5vw, 108px) 0 !important;
  background:
    radial-gradient(120% 160% at 50% 0%, rgba(212, 175, 55, .16) 0%, rgba(212, 175, 55, 0) 58%),
    linear-gradient(120deg, var(--nl-teal-900) 0%, var(--nl-teal-800) 42%, var(--nl-teal-600) 100%) !important;
  overflow: hidden;
}
/* Fine gold hairlines top and bottom. */
#tbg-legacy::before,
#tbg-legacy::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, 86%);
  height: 1px;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0), rgba(212, 175, 55, .55), rgba(212, 175, 55, 0));
}
#tbg-legacy::before { top: 0; }
#tbg-legacy::after { bottom: 0; }

/* The theme painted the inner column with its own flat teal gradient, which
   sat on top of the section background as a visible lighter rectangle.
   Let the section gradient show through instead. */
#tbg-legacy .elementor-widget-wrap,
#tbg-legacy .elementor-element-populated {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* A slow gold bloom behind the statement, so the band is not a flat fill. */
#tbg-legacy .elementor-container {
  position: relative;
}
#tbg-legacy .elementor-container::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(900px, 92%);
  aspect-ratio: 2.4 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(214, 180, 99, .22), rgba(214, 180, 99, 0) 72%);
  pointer-events: none;
  animation: tbg-legacy-bloom 11s ease-in-out infinite;
}
@keyframes tbg-legacy-bloom {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.07); }
}

#tbg-legacy .tbg-legacy-text {
  position: relative;
  z-index: 1;
  font-family: "Prata", serif !important;
  font-weight: 400 !important;
  font-size: clamp(18px, 15px + 1.05vw, 28px) !important;
  line-height: 1.62 !important;
  letter-spacing: -.005em !important;
  color: rgba(255, 255, 255, .96) !important;
  text-wrap: balance;
  max-width: 58ch;
  margin: 0 auto !important;
  padding-top: clamp(38px, 4.4vw, 62px);
}
/* A large, quiet quotation ornament instead of an empty band. */
#tbg-legacy .tbg-legacy-text::before {
  content: "\201C";
  position: absolute;
  top: clamp(-26px, -2vw, -12px);
  left: 50%;
  transform: translateX(-50%);
  font-family: "Prata", Georgia, serif;
  font-size: clamp(72px, 8vw, 128px);
  line-height: 1;
  color: rgba(214, 180, 99, .34);
  pointer-events: none;
  user-select: none;
}
/* Gold rule under the statement, with a diamond at its centre. */
#tbg-legacy .tbg-legacy-text::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: clamp(-30px, -2.2vw, -18px);
  transform: translateX(-50%);
  width: min(260px, 40%);
  height: 1px;
  background: linear-gradient(90deg, rgba(214, 180, 99, 0), rgba(214, 180, 99, .7), rgba(214, 180, 99, 0));
}

/* --------------------------------------------------------------------------
   12. EXPERTISE — #tbg-expertise
   -------------------------------------------------------------------------- */
#tbg-expertise {
  position: relative;
  padding: clamp(72px, 8vw, 118px) 0 !important;
  background: linear-gradient(180deg, var(--nl-cream) 0%, var(--nl-teal-050) 100%) !important;
}

#tbg-expertise .elementor-widget-wrap {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(40px, 4.4vw, 68px) clamp(26px, 4vw, 72px) !important;
  background: rgba(255, 255, 255, .70);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--nl-r-xl);
  box-shadow: var(--nl-shadow-sm);
}
/* Gold corner ticks, top-left and bottom-right. */
#tbg-expertise .elementor-widget-wrap::before,
#tbg-expertise .elementor-widget-wrap::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(184, 134, 11, .45);
  pointer-events: none;
}
#tbg-expertise .elementor-widget-wrap::before {
  top: 14px; left: 14px;
  border-right: 0; border-bottom: 0;
}
#tbg-expertise .elementor-widget-wrap::after {
  bottom: 14px; right: 14px;
  border-left: 0; border-top: 0;
}

#tbg-expertise .elementor-heading-title {
  font-family: "Prata", serif !important;
  font-weight: 400 !important;
  font-size: var(--nl-fs-h2) !important;
  line-height: 1.2 !important;
  color: var(--nl-teal-700) !important;
  text-align: center;
  margin-bottom: 18px !important;
}
#tbg-expertise .elementor-heading-title::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 0 !important;
  width: 74px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg, rgba(184, 134, 11, 0), var(--nl-gold-600), rgba(184, 134, 11, 0)) !important;
}
#tbg-expertise .elementor-widget-text-editor p {
  font-size: var(--nl-fs-lead) !important;
  line-height: 1.95 !important;
  color: var(--nl-ink-2) !important;
  text-align: center;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   13. FOOTER + STICKY ENQUIRE BAR
   -------------------------------------------------------------------------- */
#footer {
  position: relative;
  background:
    radial-gradient(90% 130% at 12% 0%, rgba(44, 146, 151, .18) 0%, rgba(44, 146, 151, 0) 60%),
    linear-gradient(180deg, var(--nl-teal-900) 0%, #08272A 100%) !important;
  color: rgba(255, 255, 255, .80) !important;
  padding-top: clamp(48px, 5vw, 78px);
}
/* Gold hairline along the very top of the footer. */
#footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(184, 134, 11, 0), var(--nl-gold-400) 30%, var(--nl-gold-400) 70%, rgba(184, 134, 11, 0));
}

#footer-widgets {
  background-color: transparent !important;
  position: relative;
  z-index: 1;
}

/* The two footer columns sit far apart (the left block is narrow, the links are
   right-aligned), which left a dead middle. Fill it with a quiet brand
   watermark instead of moving any content. */
#footer::after {
  content: "TBG LANDS";
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  font-family: "Prata", serif;
  font-size: clamp(48px, 8vw, 110px);
  letter-spacing: .05em;
  line-height: 1;
  white-space: nowrap;
  color: rgba(212, 175, 55, .055);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Elementor painted each footer section with its own cream background, which
   hid the dark footer entirely (white text on cream = invisible). Strip those
   backgrounds so the footer gradient shows through. The sticky enquire bar is
   excluded because it carries its own brand gradient. */
#footer .elementor-section:not(.sticky-footer-enquire-now),
#footer .elementor-section:not(.sticky-footer-enquire-now) > .elementor-container,
#footer #custom-footer {
  background-color: transparent !important;
  background-image: none !important;
}

/* Footer copy colours. */
#footer-widgets,
#footer-widgets p,
#footer-widgets li,
#footer-widgets span,
#footer-widgets div {
  color: rgba(255, 255, 255, .74) !important;
}
#footer .elementor-heading-title {
  color: var(--nl-white) !important;
  font-family: "Prata", serif !important;
  font-size: clamp(18px, 16.5px + .7vw, 25px) !important;
  font-style: italic;
  line-height: 1.45 !important;
}
#footer a {
  color: rgba(255, 255, 255, .74) !important;
  transition: color .3s ease;
}
#footer a:hover {
  color: var(--nl-gold-300) !important;
}

/* Inline contact links get a gold underline on hover. */
#footer p a {
  border-bottom: 1px solid rgba(212, 175, 55, .28);
  padding-bottom: 1px;
  text-decoration: none;
}
#footer p a:hover {
  border-bottom-color: var(--nl-gold-300);
}

/* "SEND MESSAGE" button: gold outline that fills on hover. */
#footer .elementor-button {
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: transparent !important;
  border: 1px solid rgba(212, 175, 55, .62) !important;
  color: var(--nl-gold-300) !important;
  border-radius: 999px !important;
  letter-spacing: .18em;
  font-family: "Raleway", sans-serif !important;
  font-weight: 700 !important;
  transition: color .4s ease, border-color .4s ease, transform .4s var(--nl-ease);
}
#footer .elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, var(--nl-gold-600), var(--nl-gold-400));
  transform: translateY(101%);
  transition: transform .5s var(--nl-ease);
}
#footer .elementor-button:hover {
  color: var(--nl-teal-900) !important;
  border-color: var(--nl-gold-400) !important;
  transform: translateY(-2px);
}
#footer .elementor-button:hover::before {
  transform: translateY(0);
}

/* Social icons: quiet discs that lift and take a brand tint. */
#footer .elementor-social-icon {
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .88) !important;
  transition: transform .4s var(--nl-ease), background-color .4s ease,
              border-color .4s ease, color .4s ease, box-shadow .4s ease;
}
#footer .elementor-social-icon:hover {
  transform: translateY(-4px);
  background: rgba(212, 175, 55, .16) !important;
  border-color: rgba(212, 175, 55, .45);
  color: var(--nl-gold-300) !important;
}

/* Footer nav (Privacy / Disclaimer / Cookie). */
#footer .elementor-nav-menu--main .elementor-item {
  color: rgba(255, 255, 255, .68) !important;
  transition: color .3s ease, padding-left .35s var(--nl-ease);
}
#footer .elementor-nav-menu--main .elementor-item:hover {
  color: var(--nl-gold-300) !important;
}

/* Sticky bottom enquire bar: loud flat yellow → on-brand teal gradient. */
.sticky-footer-enquire-now {
  background: linear-gradient(100deg, var(--nl-teal-800) 0%, var(--nl-teal-600) 55%, var(--nl-teal-500) 100%) !important;
  box-shadow: 0 -10px 34px rgba(10, 50, 54, .30);
  border-top: 1px solid rgba(212, 175, 55, .40);
}
.sticky-footer-enquire-now,
.sticky-footer-enquire-now .elementor-container,
.sticky-footer-enquire-now .elementor-widget-wrap {
  background-color: transparent !important;
}
.sticky-footer-enquire-now .elementor-heading-title,
.sticky-footer-enquire-now p,
.sticky-footer-enquire-now span {
  color: var(--nl-white) !important;
}
.sticky-footer-enquire-now a,
.sticky-footer-enquire-now .elementor-button {
  color: var(--nl-gold-300) !important;
  letter-spacing: .2em;
  font-family: "Raleway", sans-serif !important;
  font-weight: 700 !important;
  transition: color .3s ease, letter-spacing .4s var(--nl-ease);
}
.sticky-footer-enquire-now a:hover {
  color: var(--nl-white) !important;
  letter-spacing: .26em;
}

/* --------------------------------------------------------------------------
   14. RESPONSIVE
   -------------------------------------------------------------------------- */

/* --- Container gutters ---------------------------------------------------
   These sections use elementor-column-gap-no, and Elementor's boxed container
   only insets itself when the viewport is WIDER than the container max-width
   (1240 / 1024 / 767). On anything narrower the copy ran edge-to-edge. Give
   every content section a real gutter below the desktop width. */
@media (max-width: 1280px) {
  #tbg-gated > .elementor-container,
  #tbg-karjat > .elementor-container,
  #tbg-features > .elementor-container,
  #tbg-legacy > .elementor-container,
  #tbg-expertise > .elementor-container,
  #tbg-vision > .elementor-container,
  #tbg-chairman > .elementor-container,
  section.elementor-element-3a515c3 > .elementor-container,
  #footer > div > .elementor-section:not(.sticky-footer-enquire-now) > .elementor-container {
    padding-left: clamp(20px, 3.4vw, 34px) !important;
    padding-right: clamp(20px, 3.4vw, 34px) !important;
  }
}

@media (max-width: 1024px) {
  #tbg-experience .color-burn .elementor-heading-title {
    max-width: 14ch;
  }
  #tbg-vision .tbg-vm-icon {
    padding-left: 56px;
  }
  #tbg-vision .tbg-vm-icon::before {
    width: 42px;
    height: 42px;
    font-size: 15px;
  }
}

@media (max-width: 767px) {
  /* Phones: the 36px logo ate ~63% of the bar width. Tighten the whole chain
     so the header lands at ~54px and leaves the hamburger real breathing room. */
  #site-header #site-logo #site-logo-inner a img,
  #site-header #site-logo #site-logo-inner a .sticky-logo {
    max-height: 30px !important;
    max-width: 200px !important;
  }
  #site-header #site-header-inner,
  body.is-sticky #site-header #site-header-inner,
  #site-header.is-sticky #site-header-inner {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  /* On phones the stacked photo column still sits behind this line, so keep the
     white treatment but deepen the halo for the smaller, denser crop. */
  #tbg-experience .color-burn .elementor-heading-title,
  #tbg-experience h1.elementor-heading-title {
    color: var(--nl-white) !important;
    text-shadow: 0 2px 22px rgba(6, 32, 35, .8), 0 1px 4px rgba(6, 32, 35, .7);
  }
  /* The footer watermark has no room to breathe on a phone. */
  #footer::after {
    display: none;
  }
  /* Headroom for the stacked Experience column. */
  #tbg-experience > .elementor-container {
    padding-top: 28px !important;
  }
  /* Stacked columns: the gold divider becomes a horizontal rule. */
  #tbg-experience #about-hero-col-2 > .elementor-element-populated::before {
    left: 8%;
    right: 8%;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0), rgba(212, 175, 55, .55), rgba(212, 175, 55, 0));
  }
  #tbg-experience .color-burn .elementor-heading-title {
    max-width: none;
  }
  #tbg-experience #about-hero-col-1 > .elementor-widget-wrap {
    min-height: 320px;
  }
  #tbg-chairman > .elementor-container > .elementor-column > .elementor-widget-wrap::after {
    inset: 10px;
  }
  #tbg-legacy .tbg-legacy-text {
    font-size: 17px !important;
  }
  #tbg-expertise .elementor-widget-wrap::before,
  #tbg-expertise .elementor-widget-wrap::after {
    width: 20px;
    height: 20px;
  }
  #tbg-vision > .elementor-container > .elementor-column {
    margin-bottom: 18px;
  }
}

/* --------------------------------------------------------------------------
   15. THEME v2 — depth, texture, typography
   --------------------------------------------------------------------------
   The finishing layer: a film grain over the whole page, real 3D lift on the
   cards, a shine sweep, and a consistent type system. Kept last in the file so
   it wins the cascade without needing !important everywhere.
   -------------------------------------------------------------------------- */

/* --- Typography system -------------------------------------------------- */
body,
.elementor-widget-text-editor p,
p,
li {
  font-family: var(--nl-font-body);
}
.elementor-heading-title {
  font-family: var(--nl-font-display);
}
/* Small caps labels / eyebrows / buttons read better in the UI face. */
.elementor-button,
.elementor-button-text,
.elementor-nav-menu a,
.elementor-icon-list-text {
  font-family: var(--nl-font-ui);
}

/* --- Film grain over the whole page --------------------------------------
   One fixed, non-interactive layer. Very low opacity with multiply so it reads
   as texture, never as noise. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- 3D depth on cards ----------------------------------------------------
   perspective on the parent, transform-style on the card, and a JS-driven
   rotateX/rotateY. Falls back to a plain lift when JS or hover is unavailable. */
.tbg-tilt-scene {
  perspective: 1100px;
}
.tbg-feature-card,
#tbg-vision > .elementor-container > .elementor-column {
  transform-style: preserve-3d;
  transition: transform .6s var(--nl-ease), box-shadow .6s ease;
}
@media (hover: hover) and (pointer: fine) {
  .tbg-tilt-on {
    transform:
      perspective(1100px)
      rotateX(var(--tbg-rx, 0deg))
      rotateY(var(--tbg-ry, 0deg))
      translateY(-4px) !important;
  }
}

/* Shine sweep that follows the pointer across the card. */
.tbg-shine {
  position: relative;
  overflow: hidden;
}
.tbg-shine::after {
  content: "";
  position: absolute;
  inset: -40%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
  background: radial-gradient(
    340px circle at var(--tbg-mx, 50%) var(--tbg-my, 50%),
    rgba(255, 255, 255, .55),
    rgba(255, 255, 255, 0) 62%);
}
.tbg-shine:hover::after {
  opacity: 1;
}

/* --- Lift + gold rim on the interactive cards --------------------------- */
.tbg-feature-card {
  position: relative;
  transition: transform .6s var(--nl-ease), box-shadow .6s ease,
              border-color .6s ease, background-color .6s ease;
}
.tbg-feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
  box-shadow: inset 0 0 0 1px rgba(214, 180, 99, .55);
}
.tbg-feature-card:hover::before {
  opacity: 1;
}

/* --- Richer light-section backgrounds -----------------------------------
   A soft emerald/gold mesh behind the flat cream sections so they stop reading
   as plain rectangles. Applied as an overlay so each section's own gradient
   still shows through. */
#tbg-vision,
#tbg-features,
#tbg-expertise,
#tbg-gated,
#tbg-karjat {
  position: relative;
  isolation: isolate;
}
#tbg-vision::before,
#tbg-features::before,
#tbg-expertise::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 8% 0%, rgba(31, 122, 102, .10), transparent 62%),
    radial-gradient(60% 50% at 100% 100%, rgba(214, 180, 99, .12), transparent 60%);
}

/* --- Section headings get a touch more presence ------------------------- */
#tbg-features .elementor-heading-title,
#tbg-expertise .elementor-heading-title,
#tbg-vision .elementor-heading-title {
  font-family: var(--nl-font-display) !important;
  letter-spacing: -.012em;
}

/* --- Sticky enquire bar: deeper, with a gold rim ------------------------ */
.sticky-footer-enquire-now {
  background: linear-gradient(100deg, var(--nl-teal-900) 0%, var(--nl-teal-700) 55%, var(--nl-teal-600) 100%) !important;
  box-shadow: 0 -14px 40px rgba(6, 35, 31, .40);
  border-top: 1px solid rgba(214, 180, 99, .45);
}

/* --- Footer: grain + a warmer gold wash -------------------------------- */
#footer {
  background:
    radial-gradient(90% 130% at 12% 0%, rgba(31, 122, 102, .22) 0%, rgba(31, 122, 102, 0) 60%),
    linear-gradient(180deg, var(--nl-teal-900) 0%, #041A17 100%) !important;
}
/* --------------------------------------------------------------------------
   17. REDUCED MOTION
   --------------------------------------------------------------------------
   Honour the OS setting: keep the layout, drop the movement.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-nl-parallax] {
    transform: none !important;
  }
  #tbg-legacy .elementor-container::before,
  #tbg-vision > .elementor-container::before {
    animation: none !important;
    opacity: .8 !important;
  }
  #tbg-features .tbg-feature-card,
  #tbg-gated .elementor-widget-image img,
  #tbg-karjat .elementor-widget-image img,
  #footer .elementor-social-icon {
    transition: none !important;
  }
  #tbg-features .tbg-feature-card:hover,
  #tbg-gated .elementor-widget-image .elementor-widget-container:hover img,
  #tbg-karjat .elementor-widget-image .elementor-widget-container:hover img,
  #footer .elementor-social-icon:hover {
    transform: none !important;
  }
}