/* ==========================================================================
   TechLance Global — design system CSS v2 "Sage & Gold"
   (child theme, loaded after Elementor's Kit CSS)

   Brand palette (client): Sage #8FA28A · Light Sage #C7D3C0 · Cream #F7F4ED · Gold #C8A96B
   Every colour below references an Elementor Global Colour (var(--e-global-color-*)),
   so editing a swatch in Site Settings › Global Colors updates the whole site.
   Text-safe shades (Deep Sage, Forest Ink, Gold Text) are derived from the brand hues
   and checked for WCAG AA in kit/scripts/builder/kit.py.

   Contents
     1. Tokens            8. Header & navigation
     2. Base              9. Footer
     3. Section variants 10. Forms & search
     4. Buttons          11. Dynamic cards, pagination, post fields
     5. Cards & media    12. Testimonials, FAQ, marquee
     6. Small components 13. Motion & reveal
     7. Hero             14. Responsive & reduced motion

   No content lives here. Classes are documented in kit/README.md › "CSS classes".
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root {
  /* spacing (4px base) */
  --tlg-space-1: 4px;  --tlg-space-2: 8px;  --tlg-space-3: 12px; --tlg-space-4: 16px;
  --tlg-space-5: 20px; --tlg-space-6: 24px; --tlg-space-8: 32px; --tlg-space-10: 40px;
  --tlg-space-12: 48px; --tlg-space-16: 64px; --tlg-space-24: 96px;
  /* radius */
  --tlg-radius-xs: 8px; --tlg-radius-sm: 12px; --tlg-radius-md: 16px; --tlg-radius-lg: 22px;
  --tlg-radius-xl: 32px; --tlg-radius-pill: 999px;
  /* z-index scale */
  --tlg-z-base: 1; --tlg-z-raised: 10; --tlg-z-dropdown: 90; --tlg-z-header: 100; --tlg-z-sheet: 110; --tlg-z-skip: 100000;
  /* motion */
  --tlg-ease: cubic-bezier(.22, .8, .24, 1);
  --tlg-ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --tlg-dur-fast: 180ms; --tlg-dur: 320ms; --tlg-dur-slow: 700ms;
  /* layout */
  --tlg-header-h: 76px;       /* JS keeps this in sync with the real header height */
  --tlg-gutter: clamp(16px, 4vw, 32px);
}
body {
  /* colour-derived tokens (on body so they can read the Kit's globals) */
  --tlg-sage: var(--e-global-color-tlgsage, #8FA28A);
  --tlg-sage-light: var(--e-global-color-tlgsagelight, #C7D3C0);
  --tlg-gold: var(--e-global-color-accent);
  --tlg-hairline: 1px solid var(--e-global-color-tlgborder);
  --tlg-shadow-xs: 0 1px 2px color-mix(in srgb, var(--e-global-color-secondary) 5%, transparent);
  --tlg-shadow-1: 0 1px 2px color-mix(in srgb, var(--e-global-color-secondary) 5%, transparent),
                  0 6px 16px -6px color-mix(in srgb, var(--e-global-color-secondary) 8%, transparent);
  --tlg-shadow-2: 0 2px 4px color-mix(in srgb, var(--e-global-color-secondary) 4%, transparent),
                  0 24px 48px -16px color-mix(in srgb, var(--e-global-color-primary) 26%, transparent);
  --tlg-shadow-3: 0 2px 6px color-mix(in srgb, var(--e-global-color-secondary) 6%, transparent),
                  0 32px 64px -20px color-mix(in srgb, var(--e-global-color-secondary) 30%, transparent);
  --tlg-ring: 0 0 0 4px color-mix(in srgb, var(--e-global-color-primary) 18%, transparent);
  --tlg-glass: color-mix(in srgb, var(--e-global-color-tlgbg) 78%, transparent);
  --tlg-grad-brand: linear-gradient(135deg, var(--tlg-sage) 0%, var(--tlg-gold) 100%);
}

/* ---- 2. Base ------------------------------------------------------------ */
html { scroll-padding-top: calc(var(--tlg-header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip; font-feature-settings: "cv11", "ss01"; }
::selection { background: var(--e-global-color-tlgsagelight, #C7D3C0); color: var(--e-global-color-tlgheading); }
img { height: auto; }
.elementor-heading-title, h1, h2, h3 { text-wrap: balance; }
.elementor-widget-text-editor p, .tlg-prose p { text-wrap: pretty; }

/* Visible, consistent focus for keyboard users */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible,
.elementor-button:focus-visible, .elementor-tab-title:focus-visible {
  outline: 3px solid var(--e-global-color-primary); outline-offset: 3px; border-radius: 8px;
}
.tlg-main:focus-visible { outline: none; }

/* ---- 3. Section variants (toggle with a container class) ---------------- */
/* .tlg-dark remaps the semantic globals locally, so every widget inside
   (which already references those globals) flips automatically. */
.tlg-dark {
  --e-global-color-tlgheading: var(--e-global-color-tlgondark);
  --e-global-color-text: var(--e-global-color-tlgondarkmuted);
  --e-global-color-tlgmuted: var(--e-global-color-tlgondarkmuted);
  --e-global-color-primary: var(--e-global-color-tlgmint);          /* light sage highlight */
  --e-global-color-tlgonprimary: var(--e-global-color-secondary);   /* ink text on light-sage buttons */
  --e-global-color-tlgsurface: var(--e-global-color-tlgink2);
  --e-global-color-tlgsurface2: var(--e-global-color-tlgink3);
  --e-global-color-tlgborder: var(--e-global-color-tlgborderdark);
  --e-global-color-tlginputborder: color-mix(in srgb, var(--e-global-color-tlgondark) 42%, transparent);
  --tlg-hairline: 1px solid var(--e-global-color-tlgborderdark);
  background-color: var(--e-global-color-secondary);
  color: var(--e-global-color-text);
  position: relative; isolation: isolate;
}
/* Ambient glow on every top-level dark band (sage top-right, gold bottom-left) */
.tlg-dark.e-parent:not(.tlg-header) {
  background-image:
    radial-gradient(60% 70% at 92% 0%, color-mix(in srgb, var(--tlg-sage) 22%, transparent) 0%, transparent 70%),
    radial-gradient(45% 60% at 0% 100%, color-mix(in srgb, var(--tlg-gold) 10%, transparent) 0%, transparent 70%);
}
.tlg-dark.tlg-brand {
  background-color: var(--e-global-color-tlgprimarydeep);
  background-image:
    radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--tlg-sage) 38%, transparent) 0%, transparent 65%),
    radial-gradient(50% 80% at 0% 100%, color-mix(in srgb, var(--tlg-gold) 22%, transparent) 0%, transparent 70%);
}
.tlg-dark .tlg-search input { background: var(--e-global-color-tlgink2); }
.tlg-light { background-color: var(--e-global-color-tlgbg); }
.tlg-sand {
  background-color: var(--e-global-color-tlgsurface2);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--tlg-sage-light) 28%, transparent), transparent 320px);
}

/* Section rhythm. Elementor gives sections 128 / 104 / 88 / 64px vertical padding, which
   stacked to ~256px between neighbours. Cap it fluidly (32px @360 → 52px @1440) without
   touching page data: Elementor pads with --padding-block-* = var(--padding-top/-bottom),
   so min() keeps any smaller, deliberate padding and only trims the large ones.
   Applies to nested saved-section templates too (.tlg-main .e-parent). */
:root {
  --tlg-section-y: clamp(32px, 22px + 2.2vw, 52px);
  --tlg-hero-y: clamp(56px, 40px + 4.4vw, 104px);
}
.tlg-main .e-parent, .tlg-site-footer .e-parent {
  --padding-block-start: min(var(--padding-top, 0px), var(--tlg-section-y));
  --padding-block-end: min(var(--padding-bottom, 0px), var(--tlg-section-y));
}
.tlg-main > .elementor > .e-parent:first-child {
  --padding-block-start: min(var(--padding-top, 0px), var(--tlg-hero-y));
}

/* Section headings: comfortable measure for intros */
.tlg-section-head .elementor-widget-text-editor { max-width: 60ch; }

/* ---- 4. Buttons (Kit › Buttons = Deep Sage pill; hover Forest Ink) ------- */
.elementor-button, .tlg-form__submit, .tlg-search button {
  min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  letter-spacing: -.005em; position: relative; isolation: isolate; overflow: hidden;
  transition: background-color var(--tlg-dur) var(--tlg-ease), color var(--tlg-dur) var(--tlg-ease),
              border-color var(--tlg-dur) var(--tlg-ease), transform var(--tlg-dur) var(--tlg-ease-spring),
              box-shadow var(--tlg-dur) var(--tlg-ease);
}
/* Soft sheen that sweeps across on hover */
.elementor-widget-button:not(.tlg-btn-link) .elementor-button::after, .tlg-form__submit::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 700ms var(--tlg-ease);
}
@media (hover: hover) {
  .elementor-button:hover, .tlg-form__submit:hover, .tlg-search button:hover {
    transform: translateY(-2px); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--e-global-color-secondary) 45%, transparent); }
  .elementor-widget-button:not(.tlg-btn-link) .elementor-button:hover::after, .tlg-form__submit:hover::after { transform: translateX(120%); }
}
.elementor-button:active, .tlg-form__submit:active { transform: translateY(0) scale(.98); box-shadow: none; }
/* Primary button inside dark bands: light sage → gold on hover (ink text, AA) */
.tlg-dark .elementor-widget-button:not([class*="tlg-btn-"]) .elementor-button:hover,
.tlg-dark .elementor-widget-button:not([class*="tlg-btn-"]) .elementor-button:focus,
.tlg-dark .tlg-form__submit:hover, .tlg-dark .tlg-search button:hover {
  background-color: var(--e-global-color-accent); border-color: var(--e-global-color-accent); color: var(--e-global-color-tlgonaccent); }

/* Secondary = outline */
.elementor-widget-button.tlg-btn-secondary .elementor-button {
  background-color: transparent; color: var(--e-global-color-tlgheading);
  border: 1.5px solid color-mix(in srgb, var(--e-global-color-tlgheading) 28%, transparent); }
.elementor-widget-button.tlg-btn-secondary .elementor-button:hover {
  background-color: var(--e-global-color-tlgheading); border-color: var(--e-global-color-tlgheading); color: var(--e-global-color-tlgbg); }
.tlg-dark .elementor-widget-button.tlg-btn-secondary .elementor-button {
  background-color: color-mix(in srgb, var(--e-global-color-tlgondark) 6%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* Hover fills cream with ink text; the fill must be restated here, or the 6% tint above wins and the ink text sits on the dark band */
.tlg-dark .elementor-widget-button.tlg-btn-secondary .elementor-button:hover {
  background-color: var(--e-global-color-tlgondark); border-color: var(--e-global-color-tlgondark); color: var(--e-global-color-secondary); }

/* Ghost = tinted fill */
.elementor-widget-button.tlg-btn-ghost .elementor-button {
  background-color: var(--e-global-color-tlgsurface2); color: var(--e-global-color-tlgheading); border: 1.5px solid transparent; }
.elementor-widget-button.tlg-btn-ghost .elementor-button:hover {
  border-color: var(--e-global-color-primary); background-color: var(--e-global-color-tlgsurface); }

/* Link = text + animated arrow */
.elementor-widget-button.tlg-btn-link .elementor-button {
  background: none; padding: 0; min-height: 44px; border: 0; box-shadow: none; transform: none; overflow: visible;
  color: var(--e-global-color-primary); text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1.5px;
  background-position: 0 calc(100% - 10px); background-repeat: no-repeat;
  transition: background-size var(--tlg-dur) var(--tlg-ease), color var(--tlg-dur-fast) var(--tlg-ease); }
.elementor-widget-button.tlg-btn-link .elementor-button:hover { background-size: 0% 1.5px; background-position: 100% calc(100% - 10px); color: var(--e-global-color-tlgheading); }
.elementor-widget-button.tlg-btn-link .elementor-button-text::after {
  content: "\2192"; display: inline-block; margin-inline-start: .45em; transition: transform var(--tlg-dur) var(--tlg-ease-spring); }
.elementor-widget-button.tlg-btn-link .elementor-button:hover .elementor-button-text::after { transform: translateX(5px); }

/* ---- 5. Cards & media ---------------------------------------------------- */
.tlg-card {
  background-color: var(--e-global-color-tlgsurface); border: var(--tlg-hairline);
  border-radius: var(--tlg-radius-lg); box-shadow: var(--tlg-shadow-1); position: relative; isolation: isolate;
  transition: transform var(--tlg-dur) var(--tlg-ease), box-shadow var(--tlg-dur) var(--tlg-ease),
              border-color var(--tlg-dur) var(--tlg-ease), background-color var(--tlg-dur) var(--tlg-ease); }
/* Gradient border that fades in on hover (sage → gold) */
.tlg-card--hover::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: var(--tlg-grad-brand); opacity: 0; transition: opacity var(--tlg-dur) var(--tlg-ease);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
@media (hover: hover) {
  .tlg-card--hover:hover, .tlg-card--hover:focus-within { transform: translateY(-6px); box-shadow: var(--tlg-shadow-2); border-color: transparent; }
  .tlg-card--hover:hover::before, .tlg-card--hover:focus-within::before { opacity: 1; }
}
.tlg-card--flat { box-shadow: none; }
.tlg-card--accent { border-top: 0; }
.tlg-card--accent::after { content: ""; position: absolute; top: -1px; left: 24px; right: 24px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--tlg-grad-brand); }
.tlg-dark .tlg-card { background-color: color-mix(in srgb, var(--e-global-color-tlgink2) 72%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: none; }

/* Whole-card click target: the card's heading link stretches over the card */
.tlg-card--link .elementor-heading-title a::after,
.tlg-card--link .elementor-icon-box-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 3; }
.tlg-card--link .elementor-heading-title a:focus-visible { outline: none; }
.tlg-card--link:focus-within { outline: 3px solid var(--e-global-color-primary); outline-offset: 4px; }
.tlg-card--link:has(a:focus:not(:focus-visible)) { outline: none; }

/* "Explore …" affordance inside cards: arrow slides on card hover */
.tlg-more .elementor-heading-title, .tlg-cards__more {
  display: inline-flex; align-items: center; gap: .4em; color: var(--e-global-color-primary); font-weight: 600; }
.tlg-more .elementor-heading-title::after, .tlg-cards__more::after {
  content: "\2192"; transition: transform var(--tlg-dur) var(--tlg-ease-spring); }
@media (hover: hover) {
  .tlg-card--hover:hover .tlg-more .elementor-heading-title::after, .tlg-card--hover:hover .tlg-cards__more::after { transform: translateX(6px); }
}

/* Media inside cards: fixed ratio prevents layout shift, gentle zoom on hover */
.tlg-media, .tlg-media .elementor-widget-container { overflow: hidden; border-radius: var(--tlg-radius-md); }
.tlg-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
  transition: transform var(--tlg-dur-slow) var(--tlg-ease), filter var(--tlg-dur-slow) var(--tlg-ease); }
@media (hover: hover) { .tlg-card--hover:hover .tlg-media img { transform: scale(1.06); filter: saturate(1.08); } }
.tlg-rounded img { border-radius: var(--tlg-radius-lg); }

/* Team cards (About): round avatar with a soft brand ring */
.tlg-team .elementor-widget-image img { border-radius: 50%; box-shadow: 0 0 0 4px var(--e-global-color-tlgsurface), 0 0 0 5px var(--tlg-sage-light); }

/* Rounded panel + orbit line motif (CTA bands, heroes) */
.tlg-panel { border-radius: var(--tlg-radius-xl); overflow: hidden; position: relative; isolation: isolate; }
.tlg-orbit-bg::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: repeating-radial-gradient(circle at 88% 40%, transparent 0 87px, color-mix(in srgb, var(--e-global-color-tlgondark) 9%, transparent) 88px 89px);
  -webkit-mask-image: radial-gradient(70% 90% at 88% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(70% 90% at 88% 40%, #000 30%, transparent 75%); }

/* ---- 6. Small components ------------------------------------------------- */
/* Icon boxes: soft gradient tile, icon tilts on hover. (Doubled class beats per-widget CSS.) */
.tlg-iconbox.tlg-iconbox .elementor-icon {
  border-radius: var(--tlg-radius-md);
  background: linear-gradient(145deg, color-mix(in srgb, var(--tlg-sage-light) 70%, var(--e-global-color-tlgsurface)), color-mix(in srgb, var(--tlg-sage-light) 25%, var(--e-global-color-tlgsurface)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tlg-sage) 22%, transparent);
  color: var(--e-global-color-primary); transition: transform var(--tlg-dur) var(--tlg-ease-spring); }
.tlg-iconbox.tlg-iconbox .elementor-icon svg { fill: var(--e-global-color-primary); }
.tlg-dark .tlg-iconbox.tlg-iconbox .elementor-icon {
  background: color-mix(in srgb, var(--tlg-sage) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tlg-sage-light) 22%, transparent); }
@media (hover: hover) {
  .tlg-card--hover:hover .tlg-iconbox .elementor-icon, .tlg-iconbox:hover .elementor-icon { transform: translateY(-2px) rotate(-6deg) scale(1.06); }
}

/* Eyebrow = pill badge with a glowing gold dot */
.tlg-eyebrow .elementor-heading-title {
  display: inline-flex; align-items: center; gap: .6em; padding: 6px 14px 6px 12px; border-radius: var(--tlg-radius-pill);
  background: color-mix(in srgb, var(--tlg-sage-light) 40%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tlg-sage) 35%, transparent); }
.tlg-eyebrow .elementor-heading-title::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--tlg-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tlg-gold) 28%, transparent); }
.tlg-dark .tlg-eyebrow .elementor-heading-title {
  background: color-mix(in srgb, var(--tlg-sage-light) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tlg-sage-light) 24%, transparent); }
.tlg-eyebrow[class*="elementor-align-center"] .elementor-heading-title, .elementor-widget-heading.tlg-eyebrow .elementor-heading-title[style*="center"] { margin-inline: auto; }

/* Process steps */
.tlg-step-num .elementor-heading-title { color: var(--e-global-color-tlggoldtext, #7D6329); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tlg-dark .tlg-step-num .elementor-heading-title { color: var(--tlg-gold); }
.tlg-step { border-top: 1px solid var(--e-global-color-tlgborder); position: relative; }
.tlg-step::before { content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 0; border-radius: 2px;
  background: var(--tlg-grad-brand); transition: width 1100ms var(--tlg-ease); }
.tlg-step.animated::before, .tlg-step:not(.elementor-invisible)::before { width: 72px; }
@media (hover: hover) { .tlg-step:hover::before { width: 100%; } }

/* Stats: left-aligned, gradient numerals, hairline above */
.tlg-stat { border-left: 0 !important; border-top: 1px solid var(--e-global-color-tlgborder); --padding-left: 0px !important; --padding-top: 24px !important; position: relative; }
.tlg-stat::before { content: ""; position: absolute; top: -1px; left: 0; width: 40px; height: 2px; background: var(--tlg-gold); }
.tlg-counter .elementor-counter { align-items: flex-start; text-align: left; }
.tlg-counter .elementor-counter-number-wrapper { justify-content: flex-start; }
.tlg-counter .elementor-counter-title { text-align: left; }
.tlg-counter .elementor-counter-number-wrapper > span {
  background: linear-gradient(160deg, var(--e-global-color-tlgheading) 30%, var(--e-global-color-primary) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; }
.tlg-dark .tlg-counter .elementor-counter-number-wrapper > span { background-image: linear-gradient(160deg, var(--e-global-color-tlgondark) 30%, var(--tlg-sage-light) 100%); }

/* Chips (industries, tags) */
.tlg-chip .elementor-button { background: var(--e-global-color-tlgsurface); color: var(--e-global-color-tlgheading);
  border: var(--tlg-hairline); padding: 10px 18px; min-height: 44px; font-weight: 500; }
.tlg-chip .elementor-button:hover { border-color: var(--tlg-sage); background: color-mix(in srgb, var(--tlg-sage-light) 45%, var(--e-global-color-tlgsurface)); color: var(--e-global-color-tlgheading); box-shadow: none; }

/* Long-form content (post body, legal pages) */
.tlg-prose { max-width: 68ch; font-size: 1.125rem; line-height: 1.75; color: var(--e-global-color-text); }
.tlg-prose > :first-child { margin-top: 0; }
.tlg-prose :is(h2, h3) { margin-top: 1.9em; margin-bottom: .55em; color: var(--e-global-color-tlgheading); scroll-margin-top: calc(var(--tlg-header-h) + 24px); }
.tlg-prose h2 { font-size: clamp(1.5rem, 1.3rem + .9vw, 2rem); line-height: 1.2; }
.tlg-prose h3 { font-size: clamp(1.25rem, 1.15rem + .45vw, 1.5rem); line-height: 1.3; }
.tlg-prose p { margin-bottom: 1.15em; }
.tlg-prose :is(ul, ol) { padding-inline-start: 1.3em; margin-bottom: 1.2em; }
.tlg-prose li { margin-bottom: .5em; padding-inline-start: .2em; }
.tlg-prose li::marker { color: var(--tlg-sage); font-weight: 700; }
.tlg-prose strong { color: var(--e-global-color-tlgheading); font-weight: 600; }
.tlg-prose blockquote { margin: 1.8em 0; padding: 20px 24px; border-left: 3px solid var(--tlg-gold);
  background: color-mix(in srgb, var(--tlg-sage-light) 30%, transparent); border-radius: 0 var(--tlg-radius-md) var(--tlg-radius-md) 0;
  font-family: var(--e-global-typography-tlgquote-font-family), sans-serif; font-size: 1.2rem; color: var(--e-global-color-tlgheading); }
.tlg-prose img { border-radius: var(--tlg-radius-md); }
.tlg-prose hr { border: 0; height: 1px; background: var(--e-global-color-tlgborder); margin: 2.5em 0; }
.tlg-prose a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--e-global-color-primary) 45%, transparent);
  text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: text-decoration-color var(--tlg-dur-fast); }
.tlg-prose a:hover { text-decoration-color: currentColor; }

/* Breadcrumbs */
.tlg-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; padding: 0;
  font-size: .875rem; color: var(--e-global-color-tlgmuted); }
.tlg-breadcrumbs li { display: inline-flex; align-items: center; min-width: 0; }
.tlg-breadcrumbs li + li::before { content: ""; flex: none; display: inline-block; width: 6px; height: 6px; margin-inline-end: 10px;
  border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: translateY(-1px) rotate(45deg); opacity: .5; }
.tlg-breadcrumbs a { color: inherit; text-decoration: none; display: inline-block; padding-block: 10px; transition: color var(--tlg-dur-fast); }
.tlg-breadcrumbs a:hover { color: var(--e-global-color-primary); text-decoration: underline; text-underline-offset: 4px; }
.tlg-breadcrumbs [aria-current] { color: var(--e-global-color-tlgheading); font-weight: 500; padding-block: 10px; display: inline-block; }

/* ---- 7. Hero ------------------------------------------------------------- */
/* Mesh gradient + faint grid, both behind the content */
.tlg-hero { overflow: hidden; }
.tlg-hero.tlg-dark {
  background-image:
    radial-gradient(55% 75% at 85% 30%, color-mix(in srgb, var(--tlg-sage) 34%, transparent) 0%, transparent 70%),
    radial-gradient(40% 55% at 8% 105%, color-mix(in srgb, var(--tlg-gold) 18%, transparent) 0%, transparent 70%),
    radial-gradient(30% 40% at 45% -10%, color-mix(in srgb, var(--tlg-sage-light) 14%, transparent) 0%, transparent 70%); }
.tlg-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(color-mix(in srgb, var(--e-global-color-tlgondark) 5%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--e-global-color-tlgondark) 5%, transparent) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(70% 70% at 70% 35%, #000 10%, transparent 75%); mask-image: radial-gradient(70% 70% at 70% 35%, #000 10%, transparent 75%); }
.tlg-hero h1.elementor-heading-title { letter-spacing: -.04em; }
/* Hero check-list ticks pick up the gold */
.tlg-hero .elementor-icon-list-icon svg { fill: var(--tlg-gold); }

/* Page header (inner pages start on cream): soft brand wash at the top */
.tlg-main > .elementor > .e-parent:first-child:not(.tlg-dark) {
  background-image: radial-gradient(50% 120% at 100% 0%, color-mix(in srgb, var(--tlg-sage-light) 45%, transparent) 0%, transparent 70%),
                    radial-gradient(35% 90% at 0% 0%, color-mix(in srgb, var(--tlg-gold) 10%, transparent) 0%, transparent 70%); }

/* Hero visual: gentle scroll parallax where scroll-driven animations are supported */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1025px) {
    .tlg-parallax { animation: tlgParallax linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes tlgParallax { from { transform: translate3d(0, 40px, 0); } to { transform: translate3d(0, -40px, 0); } }
  }
}

/* ---- 8. Header & navigation --------------------------------------------- */
/* Full-width sticky bar in deep forest (constant height; scrolling only adds a shadow). The semantic globals are remapped (as in .tlg-dark),
   so the nav, dropdown and mobile sheet inside all flip to light-on-dark automatically.
   Its content stays on the 1280px page grid (Elementor boxed .e-con-inner). */
.tlg-site-header { position: sticky; top: 0; z-index: var(--tlg-z-header); }
.admin-bar .tlg-site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .tlg-site-header { top: 0; } }
.tlg-site-header .tlg-header {
  --e-global-color-tlgheading: var(--e-global-color-tlgondark);
  --e-global-color-text: var(--e-global-color-tlgondarkmuted);
  --e-global-color-tlgmuted: var(--e-global-color-tlgondarkmuted);
  --e-global-color-primary: var(--e-global-color-tlgmint);
  --e-global-color-tlgonprimary: var(--e-global-color-secondary);
  --e-global-color-tlgsurface: var(--e-global-color-tlgink2);
  --e-global-color-tlgsurface2: var(--e-global-color-tlgink3);
  --e-global-color-tlgborder: var(--e-global-color-tlgborderdark);
  --e-global-color-tlgbg: var(--e-global-color-secondary);
  --tlg-hairline: 1px solid var(--e-global-color-tlgborderdark);
  --tlg-tint: color-mix(in srgb, var(--e-global-color-tlgondark) 8%, transparent);
  width: 100%; max-width: none; margin: 0; border-radius: 0;
  background-color: color-mix(in srgb, var(--e-global-color-secondary) 94%, transparent) !important;
  background-image: radial-gradient(40% 220% at 100% 0%, color-mix(in srgb, var(--tlg-sage) 16%, transparent), transparent 70%),
                    radial-gradient(30% 200% at 0% 100%, color-mix(in srgb, var(--tlg-gold) 7%, transparent), transparent 70%);
  -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--e-global-color-tlgondark) 8%, transparent);
  --padding-top: 14px !important; --padding-bottom: 14px !important;
  --padding-left: var(--tlg-gutter) !important; --padding-right: var(--tlg-gutter) !important;
  transition: background-color var(--tlg-dur) var(--tlg-ease), box-shadow var(--tlg-dur) var(--tlg-ease), padding var(--tlg-dur) var(--tlg-ease); }
/* Hairline in brand gradient along the bottom edge */
.tlg-site-header .tlg-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tlg-sage) 55%, transparent) 25%, color-mix(in srgb, var(--tlg-gold) 60%, transparent) 75%, transparent); opacity: .7; }
.tlg-site-header.is-scrolled .tlg-header {
  background-color: color-mix(in srgb, var(--e-global-color-secondary) 97%, transparent) !important;
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .55); }
/* Header CTA: gold pill, ink text; hover light sage */
.tlg-site-header .elementor-widget-button .elementor-button {
  background-color: var(--e-global-color-accent); border-color: var(--e-global-color-accent); color: var(--e-global-color-tlgonaccent); }
.tlg-site-header .elementor-widget-button .elementor-button:hover {
  background-color: var(--e-global-color-tlgsagelight, #C7D3C0); border-color: var(--e-global-color-tlgsagelight, #C7D3C0); color: var(--e-global-color-secondary);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); }

.tlg-logo { display: inline-flex; align-items: center; min-height: 44px; }
.tlg-logo img { display: block; max-width: 100%; transition: transform var(--tlg-dur) var(--tlg-ease); transform-origin: left center; }
/* Logo v3 (swoosh + wordmark) is wider and thinner than v2, so it is shown larger than the [tlg_logo] widths */
.tlg-site-header .tlg-logo img { width: 280px !important; }
.tlg-site-footer .tlg-logo img { width: 300px !important; }
@media (max-width: 767px) { .tlg-site-header .tlg-logo img { width: 200px !important; } }
.tlg-site-header .elementor-widget-button .elementor-button { min-height: 46px; }

/* Primary navigation ([tlg_nav]).
   "body .tlg-nav" outranks the Kit's global button style (.elementor-kit-N button). */
body .tlg-nav .tlg-nav__sub-toggle, body .tlg-nav .tlg-nav__sub-toggle:hover, body .tlg-nav .tlg-nav__sub-toggle:focus,
body .tlg-nav .tlg-nav__toggle, body .tlg-nav .tlg-nav__toggle:hover, body .tlg-nav .tlg-nav__toggle:focus {
  border: 0; border-radius: var(--tlg-radius-sm); box-shadow: none; transform: none; padding: 0; min-height: 0;
  color: var(--e-global-color-tlgheading); font-size: 0; line-height: 1; overflow: visible; }
body .tlg-nav .tlg-nav__sub-toggle, body .tlg-nav .tlg-nav__sub-toggle:hover, body .tlg-nav .tlg-nav__sub-toggle:focus { background: transparent; }
body .tlg-nav .tlg-nav__toggle, body .tlg-nav .tlg-nav__toggle:hover, body .tlg-nav .tlg-nav__toggle:focus { background: var(--tlg-tint, color-mix(in srgb, var(--tlg-sage-light) 45%, transparent)); box-shadow: inset 0 0 0 1px var(--e-global-color-tlgborder); }
body .tlg-nav .tlg-nav__sub-toggle::after, body .tlg-nav .tlg-nav__toggle::after { display: none; }
body .tlg-nav .tlg-nav__sub-toggle:focus-visible, body .tlg-nav .tlg-nav__toggle:focus-visible { outline: 3px solid var(--e-global-color-primary); outline-offset: 2px; }

.tlg-nav { position: relative; display: flex; justify-content: flex-end; }
.tlg-nav__list, .tlg-nav__list .sub-menu { list-style: none; margin: 0; padding: 0; }
.tlg-nav__list { display: flex; align-items: center; gap: 2px; }
.tlg-nav__list > li { position: relative; display: flex; align-items: center; }
.tlg-nav__list a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; text-decoration: none; position: relative;
  border-radius: var(--tlg-radius-pill); color: var(--e-global-color-tlgheading);
  font-family: var(--e-global-typography-tlgnav-font-family), sans-serif;
  font-size: var(--e-global-typography-tlgnav-font-size); font-weight: var(--e-global-typography-tlgnav-font-weight);
  transition: background-color var(--tlg-dur-fast) var(--tlg-ease), color var(--tlg-dur-fast) var(--tlg-ease); }
.tlg-nav__list > li > a:hover { background-color: var(--tlg-tint, color-mix(in srgb, var(--tlg-sage-light) 45%, transparent)); }
.tlg-nav__list > li.current-menu-item > a, .tlg-nav__list > li.current-menu-ancestor > a, .tlg-nav__list > li.current-page-ancestor > a {
  color: var(--e-global-color-primary); font-weight: 600; }
.tlg-nav__list > li.current-menu-item > a::after, .tlg-nav__list > li.current-menu-ancestor > a::after, .tlg-nav__list > li.current-page-ancestor > a::after {
  content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--tlg-gold); }
.tlg-nav__list > li.menu-item-has-children > a { padding-right: 6px; }
.tlg-nav__sub-toggle { width: 28px; height: 44px; margin-left: -4px; padding: 0; border: 0; background: none; color: var(--e-global-color-tlgheading); cursor: pointer; min-height: 0; box-shadow: none; }
.tlg-nav__sub-toggle::before { content: ""; display: block; width: 7px; height: 7px; margin: auto; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--tlg-dur) var(--tlg-ease); }
.tlg-nav__sub-toggle[aria-expanded="true"]::before, .tlg-nav li:hover > .tlg-nav__sub-toggle::before { transform: translateY(1px) rotate(-135deg); }
.tlg-nav .sub-menu { position: absolute; top: calc(100% + 10px); left: -8px; min-width: 272px; padding: 8px; z-index: var(--tlg-z-dropdown);
  background: color-mix(in srgb, var(--e-global-color-tlgsurface) 94%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: var(--tlg-hairline); border-radius: var(--tlg-radius-lg); box-shadow: var(--tlg-shadow-3);
  opacity: 0; visibility: hidden; transform: translateY(8px) scale(.98); transform-origin: top left;
  transition: opacity var(--tlg-dur) var(--tlg-ease), transform var(--tlg-dur) var(--tlg-ease), visibility 0s linear var(--tlg-dur); }
.tlg-nav .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* hover bridge */
.tlg-nav .sub-menu a { width: 100%; border-radius: var(--tlg-radius-sm); padding: 12px 14px; }
.tlg-nav .sub-menu a:hover, .tlg-nav .sub-menu .current-menu-item > a { background: var(--tlg-tint, color-mix(in srgb, var(--tlg-sage-light) 40%, transparent)); color: var(--e-global-color-primary); }
.tlg-nav li:hover > .sub-menu, .tlg-nav li:focus-within > .sub-menu, .tlg-nav li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.tlg-nav__toggle { display: none; width: 48px; height: 48px; padding: 0; border-radius: var(--tlg-radius-sm); border: 0; min-height: 0;
  color: var(--e-global-color-tlgheading); align-items: center; justify-content: center; }
.tlg-nav__bars, .tlg-nav__bars::before, .tlg-nav__bars::after { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform var(--tlg-dur) var(--tlg-ease), opacity var(--tlg-dur-fast), background-color var(--tlg-dur-fast); }
.tlg-nav__bars { position: relative; }
.tlg-nav__bars::before, .tlg-nav__bars::after { content: ""; position: absolute; left: 0; }
.tlg-nav__bars::before { top: -6px; } .tlg-nav__bars::after { top: 6px; width: 14px; }
.tlg-nav.is-open .tlg-nav__bars { background: transparent; }
.tlg-nav.is-open .tlg-nav__bars::before { transform: translateY(6px) rotate(45deg); }
.tlg-nav.is-open .tlg-nav__bars::after { transform: translateY(-6px) rotate(-45deg); width: 20px; }
.tlg-nav__list > li.tlg-nav__cta { display: none; } /* mobile-sheet CTA, cloned in by tlg.js */

@media (max-width: 1024px) {
  .tlg-nav__toggle { display: inline-flex; }
  /* Full-height sheet under the floating bar */
  .tlg-nav__list { display: flex; visibility: hidden; opacity: 0; transform: translateY(-8px);
    position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; overflow-y: auto; overscroll-behavior: contain;
    flex-direction: column; align-items: stretch; gap: 0; padding: calc(var(--tlg-nav-top, 88px) + 16px) 24px 32px;
    background-color: var(--e-global-color-tlgbg);
    background-image: radial-gradient(80% 50% at 100% 0%, color-mix(in srgb, var(--tlg-sage) 20%, transparent), transparent 70%),
                      radial-gradient(60% 40% at 0% 100%, color-mix(in srgb, var(--tlg-gold) 9%, transparent), transparent 70%);
    transition: opacity var(--tlg-dur) var(--tlg-ease), transform var(--tlg-dur) var(--tlg-ease), visibility 0s linear var(--tlg-dur); }
  .tlg-nav.is-open .tlg-nav__list { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .tlg-nav__list > li { flex-wrap: wrap; border-bottom: var(--tlg-hairline); }
  .tlg-nav__list > li > a { flex: 1; min-height: 64px; padding: 12px 4px; border-radius: 0; background: none !important;
    font-family: var(--e-global-typography-tlgh3-font-family), sans-serif; font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; }
  .tlg-nav__list > li.current-menu-item > a::after, .tlg-nav__list > li.current-menu-ancestor > a::after, .tlg-nav__list > li.current-page-ancestor > a::after {
    left: auto; right: 4px; bottom: auto; top: 50%; margin: -3px 0 0; width: 6px; height: 6px; }
  .tlg-nav__sub-toggle { width: 48px; height: 64px; margin: 0; }
  .tlg-nav li:hover > .tlg-nav__sub-toggle::before { transform: translateY(-2px) rotate(45deg); }
  .tlg-nav__sub-toggle[aria-expanded="true"]::before { transform: translateY(1px) rotate(-135deg) !important; }
  .tlg-nav .sub-menu { position: static; display: none; width: 100%; min-width: 0; padding: 0 0 16px; border: 0; box-shadow: none; background: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .tlg-nav .sub-menu::before { display: none; }
  .tlg-nav .sub-menu a { font-size: 1.0625rem; min-height: 48px; padding: 10px 12px; color: var(--e-global-color-text); }
  .tlg-nav li.is-open > .sub-menu { display: block; }
  .tlg-nav li:hover > .sub-menu, .tlg-nav li:focus-within > .sub-menu { display: none; }
  .tlg-nav li.is-open:hover > .sub-menu, .tlg-nav li.is-open:focus-within > .sub-menu { display: block; }
  .tlg-nav__list > li.tlg-nav__cta { display: block; border: 0; margin-top: auto; padding-top: 32px; }
  .tlg-nav__cta a.tlg-nav__cta-btn { display: flex; justify-content: center; min-height: 56px; border-radius: var(--tlg-radius-pill);
    background: var(--e-global-color-accent) !important; color: var(--e-global-color-tlgonaccent); font-family: inherit; font-size: 1rem; font-weight: 600; }
  .tlg-nav__cta-meta { margin: 16px 0 0; text-align: center; font-size: .875rem; color: var(--e-global-color-tlgmuted); }
  /* Staggered entrance for sheet items */
  .tlg-nav.is-open .tlg-nav__list > li { animation: tlgRise 480ms var(--tlg-ease) both; }
  .tlg-nav.is-open .tlg-nav__list > li:nth-child(2) { animation-delay: 40ms; }
  .tlg-nav.is-open .tlg-nav__list > li:nth-child(3) { animation-delay: 80ms; }
  .tlg-nav.is-open .tlg-nav__list > li:nth-child(4) { animation-delay: 120ms; }
  .tlg-nav.is-open .tlg-nav__list > li:nth-child(5) { animation-delay: 160ms; }
  .tlg-nav.is-open .tlg-nav__list > li:nth-child(6) { animation-delay: 200ms; }
  .tlg-nav.is-open .tlg-nav__list > li:nth-child(7) { animation-delay: 240ms; }
  .tlg-nav.is-open .tlg-nav__list > li:nth-child(n+8) { animation-delay: 280ms; }
  body.tlg-nav-open { overflow: hidden; }
  /* While the sheet is open the bar sits flush on the sheet */
  /* backdrop-filter would make the bar the containing block of the fixed sheet, so drop it while open */
  body.tlg-nav-open .tlg-site-header .tlg-header { background-color: var(--e-global-color-tlgbg) !important; box-shadow: 0 1px 0 var(--e-global-color-tlgborder);
    -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---- 9. Footer ---------------------------------------------------------- */
.tlg-footer { position: relative; }
.tlg-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tlg-sage) 70%, transparent) 30%, color-mix(in srgb, var(--tlg-gold) 80%, transparent) 70%, transparent); }
.tlg-footer .elementor-icon-list-item a { min-height: 32px; transition: color var(--tlg-dur-fast) var(--tlg-ease), transform var(--tlg-dur-fast) var(--tlg-ease); }
.tlg-footer .elementor-icon-list-item a:hover { color: var(--e-global-color-tlgondark); transform: translateX(3px); }
.tlg-footer .elementor-icon-list-item a:hover .elementor-icon-list-text { color: inherit; }
.tlg-footer-legal .elementor-icon-list-item a { min-height: 44px; }
.tlg-footer-legal .elementor-icon-list-item a:hover { transform: none; }
.tlg-footer .elementor-icon-list-icon svg { fill: var(--tlg-gold); }
.tlg-social .elementor-social-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px var(--e-global-color-tlgborder);
  transition: transform var(--tlg-dur) var(--tlg-ease-spring), background-color var(--tlg-dur-fast) var(--tlg-ease); }
.tlg-social .elementor-social-icon:hover { transform: translateY(-3px); background-color: var(--tlg-gold) !important; box-shadow: none; }
.tlg-social .elementor-social-icon:hover i, .tlg-social .elementor-social-icon:hover svg { color: var(--e-global-color-tlgonaccent); fill: var(--e-global-color-tlgonaccent); }
/* Newsletter row in the footer reads as a glass panel */
.tlg-footer .tlg-form--inline { padding: 0; }

/* ---- 10. Forms ([tlg_form]) & search ------------------------------------ */
.tlg-form__fields { display: flex; flex-wrap: wrap; gap: 20px 16px; }
.tlg-form__field { flex: 1 1 100%; display: flex; flex-direction: column; gap: 8px; }
.tlg-form__field--half { flex-basis: calc(50% - 8px); }
@media (max-width: 767px) { .tlg-form__field--half { flex-basis: 100%; } }
.tlg-form label { font-family: var(--e-global-typography-tlgsmallstrong-font-family), sans-serif; font-size: var(--e-global-typography-tlgsmallstrong-font-size); font-weight: var(--e-global-typography-tlgsmallstrong-font-weight); color: var(--e-global-color-tlgheading); }
.tlg-form__req { color: var(--e-global-color-tlgerror); }
.tlg-dark .tlg-form__req { color: var(--tlg-gold); }
body .tlg-form.tlg-form input:not([type="checkbox"]), body .tlg-form.tlg-form textarea, body .tlg-form.tlg-form select {
  width: 100%; min-height: 52px; padding: 13px 16px; border: 1px solid var(--e-global-color-tlginputborder, #7E8A7C); border-radius: var(--tlg-radius-sm);
  background: var(--e-global-color-tlgsurface); color: var(--e-global-color-tlgheading); font: inherit; box-shadow: var(--tlg-shadow-xs);
  transition: border-color var(--tlg-dur-fast) var(--tlg-ease), box-shadow var(--tlg-dur-fast) var(--tlg-ease), background-color var(--tlg-dur-fast); }
body .tlg-form.tlg-form textarea { min-height: 148px; resize: vertical; }
.tlg-form ::placeholder, .tlg-search ::placeholder { color: var(--e-global-color-tlgmuted); opacity: .85; }
body .tlg-form.tlg-form input:not([type="checkbox"]):hover, body .tlg-form.tlg-form textarea:hover, body .tlg-form.tlg-form select:hover { border-color: var(--e-global-color-tlgheading); }
body .tlg-form.tlg-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
body .tlg-form.tlg-form input:focus, body .tlg-form.tlg-form textarea:focus, body .tlg-form.tlg-form select:focus { outline: none; border-color: var(--e-global-color-primary); box-shadow: var(--tlg-ring); }
body .tlg-form.tlg-form input:user-invalid, body .tlg-form.tlg-form textarea:user-invalid, body .tlg-form.tlg-form select:user-invalid { border-color: var(--e-global-color-tlgerror); }
/* Custom checkbox (native input, keyboard + screen-reader friendly) */
.tlg-form__field--consent { flex-direction: row; align-items: flex-start; gap: 12px; }
body .tlg-form.tlg-form .tlg-form__field--consent input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 1px 0 0; flex: none; cursor: pointer; padding: 0; min-height: 0;
  border: 1.5px solid var(--e-global-color-tlginputborder, #7E8A7C); border-radius: 7px; background: var(--e-global-color-tlgsurface) center / 14px no-repeat;
  transition: background-color var(--tlg-dur-fast) var(--tlg-ease), border-color var(--tlg-dur-fast) var(--tlg-ease), transform var(--tlg-dur-fast) var(--tlg-ease-spring); }
body .tlg-form.tlg-form .tlg-form__field--consent input:checked { background-color: var(--e-global-color-primary); border-color: var(--e-global-color-primary); transform: scale(1.04);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F7F4ED' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E"); }
body .tlg-dark .tlg-form.tlg-form .tlg-form__field--consent input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23161D18' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E"); }
body .tlg-form.tlg-form .tlg-form__field--consent input:focus-visible { outline: 3px solid var(--e-global-color-primary); outline-offset: 2px; }
.tlg-form__field--consent label { font-weight: 400; font-size: .875rem; line-height: 1.5; color: var(--e-global-color-text); cursor: pointer; }
.tlg-form__submit { margin-top: 24px; width: 100%; min-height: 54px; cursor: pointer; }
.tlg-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.tlg-form__message { border-radius: var(--tlg-radius-sm); padding: 14px 18px 14px 44px; margin: 0 0 20px; font-weight: 600; position: relative; }
.tlg-form__message::before { content: ""; position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: currentColor; opacity: .9; }
.tlg-form__message--success { color: var(--e-global-color-tlgsuccess); background: color-mix(in srgb, var(--e-global-color-tlgsuccess) 10%, var(--e-global-color-tlgsurface)); }
.tlg-form__message--error { color: var(--e-global-color-tlgerror); background: color-mix(in srgb, var(--e-global-color-tlgerror) 8%, var(--e-global-color-tlgsurface)); }
.tlg-dark .tlg-form__message--success, .tlg-dark .tlg-form__message--error { color: var(--e-global-color-tlgondark); }
.tlg-form--inline .tlg-form__fields { align-items: flex-start; }
.tlg-form--inline .tlg-form__field:first-child { flex: 1 1 260px; }
.tlg-form--inline .tlg-form__submit { width: auto; margin-top: 0; padding-inline: 28px; }
.tlg-form--inline { display: grid; grid-template-columns: 1fr auto; gap: 14px 12px; align-items: start; }
.tlg-form--inline .tlg-form__message { grid-column: 1 / -1; }
.tlg-form--inline .tlg-form__fields { grid-column: 1; }
body .tlg-form--inline.tlg-form--inline input:not([type="checkbox"]) { border-radius: var(--tlg-radius-pill); padding-inline: 22px; min-height: 54px; }
@media (max-width: 767px) { .tlg-form--inline { grid-template-columns: 1fr; } .tlg-form--inline .tlg-form__submit { width: 100%; } }
body .tlg-dark .tlg-form.tlg-form input:not([type="checkbox"]) { background: color-mix(in srgb, var(--e-global-color-tlgink2) 80%, transparent); color: var(--e-global-color-tlgondark); box-shadow: none; }
body .tlg-dark .tlg-form.tlg-form input:not([type="checkbox"]):hover { border-color: var(--e-global-color-tlgondarkmuted); }
body .tlg-dark .tlg-form.tlg-form .tlg-form__field--consent input { background-color: transparent; }

/* Search ([tlg_search]) */
.tlg-search { display: flex; gap: 8px; max-width: 580px; padding: 6px; border-radius: var(--tlg-radius-pill);
  background: var(--e-global-color-tlgsurface); border: 1px solid var(--e-global-color-tlginputborder, #7E8A7C); box-shadow: var(--tlg-shadow-1);
  transition: box-shadow var(--tlg-dur-fast) var(--tlg-ease), border-color var(--tlg-dur-fast) var(--tlg-ease); }
.tlg-search:focus-within { border-color: var(--e-global-color-primary); box-shadow: var(--tlg-ring), var(--tlg-shadow-1); }
body .tlg-search.tlg-search input:not([type="submit"]) { flex: 1; min-width: 0; min-height: 48px; padding: 10px 16px; border-radius: var(--tlg-radius-pill); border: 0;
  background: transparent; color: var(--e-global-color-tlgheading); font: inherit; }
body .tlg-search.tlg-search input:not([type="submit"]):focus { outline: none; box-shadow: none; }
.tlg-search button { min-height: 48px; padding-inline: 24px; }
.tlg-dark .tlg-search { background: var(--e-global-color-tlgink2); }

/* ---- 11. Dynamic cards ([tlg_cards]), pagination, post fields ----------- */
.tlg-cards { display: grid; gap: 24px; grid-template-columns: repeat(var(--tlg-cols, 3), minmax(0, 1fr)); }
.tlg-cards--cols-1 { --tlg-cols: 1; } .tlg-cards--cols-2 { --tlg-cols: 2; } .tlg-cards--cols-3 { --tlg-cols: 3; } .tlg-cards--cols-4 { --tlg-cols: 4; }
@media (max-width: 1024px) { .tlg-cards--cols-3, .tlg-cards--cols-4 { --tlg-cols: 2; } }
@media (max-width: 767px) { .tlg-cards { --tlg-cols: 1 !important; gap: 16px; } }
.tlg-cards__item { display: flex; flex-direction: column; padding: 10px; }
.tlg-cards__item--tlg_industry { padding: 28px; }
.tlg-cards__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 14px 14px; flex: 1; }
.tlg-cards__item--tlg_industry .tlg-cards__body { padding: 0; }
.tlg-cards__meta { margin: 0; font-size: .8125rem; color: var(--e-global-color-tlgmuted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tlg-cards__item--post .tlg-cards__meta { font-weight: 500; }
.tlg-cards__eyebrow { margin: 0; align-self: flex-start; padding: 4px 10px; border-radius: var(--tlg-radius-pill);
  font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--e-global-color-primary);
  background: color-mix(in srgb, var(--tlg-sage-light) 45%, transparent); }
.tlg-cards__title { margin: 0; font-family: var(--e-global-typography-tlgh4-font-family), sans-serif; font-size: var(--e-global-typography-tlgh4-font-size);
  font-weight: var(--e-global-typography-tlgh4-font-weight); line-height: var(--e-global-typography-tlgh4-line-height); letter-spacing: -.015em; text-wrap: balance; }
.tlg-cards__title a { color: var(--e-global-color-tlgheading); text-decoration: none; transition: color var(--tlg-dur-fast); }
.tlg-cards__title a:hover { color: var(--e-global-color-primary); }
.tlg-card--link .tlg-cards__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 3; }
.tlg-card--link .tlg-cards__title a:focus-visible { outline: none; }
.tlg-cards__result { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--e-global-color-primary); }
.tlg-cards__result::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tlg-gold); flex: none; }
.tlg-cards__excerpt { margin: 0; color: var(--e-global-color-text); font-size: .975rem; line-height: 1.6; }
.tlg-cards__more { margin: auto 0 0; padding-top: 12px; font-size: .9375rem; }
.tlg-cards__empty { color: var(--e-global-color-tlgmuted); }
.tlg-pagination { margin-top: 56px; }
.tlg-pagination ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; }
.tlg-pagination a, .tlg-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; min-height: 46px; padding: 0 16px;
  border-radius: var(--tlg-radius-pill); border: var(--tlg-hairline); background: var(--e-global-color-tlgsurface); color: var(--e-global-color-tlgheading); text-decoration: none; font-weight: 500;
  transition: border-color var(--tlg-dur-fast), background-color var(--tlg-dur-fast), transform var(--tlg-dur-fast) var(--tlg-ease); }
.tlg-pagination a:hover { border-color: var(--tlg-sage); transform: translateY(-2px); }
.tlg-pagination .current { background: var(--e-global-color-primary); color: var(--e-global-color-tlgonprimary, #F7F4ED); border-color: transparent; }

.tlg-post-title, .tlg-archive-title { margin: 0; }
.tlg-post-excerpt { margin: 0; max-width: 60ch; font-size: var(--e-global-typography-tlglead-font-size); line-height: var(--e-global-typography-tlglead-line-height); color: var(--e-global-color-tlgmuted); }
.tlg-post-meta, .tlg-post-date { margin: 0; font-size: .875rem; color: var(--e-global-color-tlgmuted); }
.tlg-post-custom { margin: 0; font-weight: 600; color: var(--e-global-color-tlgheading); }
.tlg-post-terms { margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--e-global-color-primary); }
.tlg-featured { margin: 0; }
.tlg-featured img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--tlg-radius-xl); display: block; box-shadow: var(--tlg-shadow-1); }
@media (max-width: 767px) { .tlg-featured img { aspect-ratio: 16 / 10; border-radius: var(--tlg-radius-lg); } }

/* Sticky sidebar column (desktop) */
@media (min-width: 1025px) { .tlg-sticky { position: sticky !important; top: calc(var(--tlg-header-h) + 32px); align-self: flex-start; } }

/* ---- 12. Testimonials, FAQ, marquee ------------------------------------- */
/* Scroll-snap slider — no JS required, keyboard scrollable; tlg.js adds prev/next buttons */
.tlg-snap { overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  padding: 8px 4px 16px !important; margin-inline: -4px; scroll-padding-inline: 4px; }
.tlg-snap::-webkit-scrollbar { display: none; }
.tlg-snap > .e-con, .tlg-snap > .elementor-element { scroll-snap-align: start; flex: 0 0 min(520px, 86%) !important; }
.tlg-snap:focus-visible { outline: 3px solid var(--e-global-color-primary); outline-offset: 4px; border-radius: var(--tlg-radius-lg); }
.tlg-snap > .tlg-card::after { content: "\201D"; position: absolute; bottom: -22px; right: 24px; pointer-events: none;
  font-family: var(--e-global-typography-tlgdisplay-font-family), serif; font-size: 6rem; line-height: 1; font-weight: 800;
  color: color-mix(in srgb, var(--tlg-gold) 45%, transparent); }
.tlg-testimonial .elementor-testimonial-content { font-family: var(--e-global-typography-tlgquote-font-family), sans-serif; letter-spacing: -.01em; }
.tlg-testimonial .elementor-testimonial-image img { width: 52px !important; height: 52px !important; box-shadow: 0 0 0 3px var(--e-global-color-tlgsurface), 0 0 0 4px var(--tlg-sage-light); }
.tlg-testimonial .elementor-testimonial-name { font-weight: 600; }
.tlg-snap-controls { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
body .tlg-snap-controls button { width: 48px; height: 48px; min-height: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--e-global-color-tlgborder); background: var(--e-global-color-tlgsurface); color: var(--e-global-color-tlgheading);
  box-shadow: var(--tlg-shadow-1); cursor: pointer; transition: background-color var(--tlg-dur-fast), color var(--tlg-dur-fast), transform var(--tlg-dur) var(--tlg-ease-spring), opacity var(--tlg-dur-fast); }
body .tlg-snap-controls button:hover:not(:disabled) { background: var(--e-global-color-primary); color: var(--e-global-color-tlgonprimary, #F7F4ED); transform: translateY(-2px); border-color: transparent; }
body .tlg-snap-controls button:disabled { opacity: .4; cursor: default; }
.tlg-snap-controls svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* FAQ (Nested Accordion with .tlg-faq). Elementor 4 styles the widget through
   --n-accordion-* variables, so they are re-pointed here. */
.tlg-faq.tlg-faq .e-n-accordion {
  --n-accordion-border-width: 0; --n-accordion-padding: 22px 4px; --n-accordion-border-radius: 0;
  --n-accordion-title-icon-order: 1; --n-accordion-title-flex-grow: 1; --n-accordion-title-justify-content: space-between;
  --n-accordion-item-title-space-between: 0; --n-accordion-item-title-distance-from-content: 0; --n-accordion-icon-gap: 0 0 0 16px;
  --n-accordion-title-normal-color: var(--e-global-color-tlgheading); --n-accordion-title-hover-color: var(--e-global-color-primary);
  --n-accordion-title-active-color: var(--e-global-color-primary); --n-accordion-icon-size: 12px;
  border-top: 1px solid var(--e-global-color-tlgborder); }
.tlg-faq.tlg-faq .e-n-accordion-item { border: 0; border-bottom: 1px solid var(--e-global-color-tlgborder); transition: background-color var(--tlg-dur) var(--tlg-ease); }
.tlg-faq.tlg-faq .e-n-accordion-item-title { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 22px 4px; min-height: 44px; border: 0 !important; background: none !important; cursor: pointer; list-style: none; }
.tlg-faq.tlg-faq .e-n-accordion-item-title::-webkit-details-marker { display: none; }
.tlg-faq.tlg-faq .e-n-accordion-item-title-header { flex: 1; }
.tlg-faq.tlg-faq .e-n-accordion-item-title-text { margin: 0; color: var(--e-global-color-tlgheading);
  font-family: var(--e-global-typography-tlgh5-font-family), sans-serif; font-size: var(--e-global-typography-tlgh5-font-size);
  font-weight: var(--e-global-typography-tlgh5-font-weight); line-height: var(--e-global-typography-tlgh5-line-height); transition: color var(--tlg-dur-fast); }
.tlg-faq.tlg-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-text, .tlg-faq.tlg-faq .e-n-accordion-item[open] .e-n-accordion-item-title-text { color: var(--e-global-color-primary); }
.tlg-faq.tlg-faq .e-n-accordion-item-title-icon { flex: none; order: 2; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: color-mix(in srgb, var(--tlg-sage-light) 45%, transparent); color: var(--e-global-color-tlgheading);
  transition: background-color var(--tlg-dur) var(--tlg-ease), color var(--tlg-dur) var(--tlg-ease), transform var(--tlg-dur) var(--tlg-ease); }
.tlg-faq.tlg-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon { background: var(--e-global-color-primary); color: var(--e-global-color-tlgonprimary, #F7F4ED); transform: rotate(180deg); }
.tlg-faq.tlg-faq .e-n-accordion-item-title-icon span { height: auto; display: inline-flex; }
.tlg-faq.tlg-faq .e-n-accordion-item-title-icon svg { width: 12px; height: 12px; fill: currentColor; }
.tlg-faq.tlg-faq .e-n-accordion-item > .e-con { max-width: 70ch; padding: 0 56px 24px 4px !important; border: 0 !important; background: none !important; }

/* Logo marquee */
.tlg-marquee { overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.tlg-marquee__track { width: max-content; flex-wrap: nowrap !important; animation: tlgMarquee 42s linear infinite; }
.tlg-marquee:hover .tlg-marquee__track, .tlg-marquee:focus-within .tlg-marquee__track { animation-play-state: paused; }
.tlg-marquee__set { flex-wrap: nowrap !important; }
.tlg-marquee img { height: 36px; width: auto; opacity: .55; filter: grayscale(1); transition: opacity var(--tlg-dur) var(--tlg-ease), filter var(--tlg-dur) var(--tlg-ease); }
.tlg-marquee img:hover { opacity: 1; filter: grayscale(0); }
@keyframes tlgMarquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* Links inside running text are underlined (not colour-only) */
.elementor-widget-text-editor a, .tlg-prose a, .tlg-form label a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---- 13. Motion & reveal -------------------------------------------------- */
/* Elementor hides not-yet-animated elements with visibility:hidden, which also removes them
   from the accessibility tree. Hide with opacity instead — and ONLY once JS is confirmed
   (html.tlg-js is set inline in <head>), so content is never blank without JS.
   tlg.js also force-reveals anything Elementor fails to animate. */
.elementor-invisible { visibility: visible !important; }
html.tlg-js .elementor-invisible { opacity: 0; }
.elementor-element.animated { opacity: 1; }
@keyframes tlgRise   { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
@keyframes tlgFade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes tlgScale  { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }
@keyframes tlgSlideL { from { opacity: 0; transform: translate3d(-28px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes tlgSlideR { from { opacity: 0; transform: translate3d(28px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes tlgBlurIn { from { opacity: 0; filter: blur(8px); transform: translate3d(0, 16px, 0); } to { opacity: 1; filter: none; transform: none; } }
.elementor-element.animated.fadeInUp    { animation-name: tlgRise; }
.elementor-element.animated.fadeIn      { animation-name: tlgFade; }
.elementor-element.animated.zoomIn      { animation-name: tlgScale; }
.elementor-element.animated.fadeInLeft  { animation-name: tlgSlideL; }
.elementor-element.animated.fadeInRight { animation-name: tlgSlideR; }
.tlg-hero .elementor-element.animated.fadeInUp { animation-name: tlgBlurIn; }
.elementor-element.animated:is(.fadeInUp, .fadeIn, .zoomIn, .fadeInLeft, .fadeInRight) {
  animation-duration: var(--tlg-dur-slow); animation-timing-function: var(--tlg-ease); }
/* Dynamic card grids: staggered reveal (classes added by tlg.js when in view) */
html.tlg-js .tlg-cards.tlg-reveal > * { opacity: 0; }
.tlg-cards.tlg-reveal.is-in > * { animation: tlgRise var(--tlg-dur-slow) var(--tlg-ease) both; }
.tlg-cards.tlg-reveal.is-in > :nth-child(2) { animation-delay: 80ms; }
.tlg-cards.tlg-reveal.is-in > :nth-child(3) { animation-delay: 160ms; }
.tlg-cards.tlg-reveal.is-in > :nth-child(4) { animation-delay: 240ms; }
.tlg-cards.tlg-reveal.is-in > :nth-child(n+5) { animation-delay: 300ms; }

/* Hero visual: slow float (inner img only; the widget itself carries the scroll parallax) */
@keyframes tlgFloat { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -12px, 0); } }
.tlg-float img { animation: tlgFloat 9s ease-in-out infinite; will-change: transform; }

/* Scroll progress hairline on long reads (single posts) — scroll-driven, CSS only */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .single-post .tlg-site-header::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; transform-origin: 0 50%;
      background: var(--tlg-grad-brand); animation: tlgProgress linear both; animation-timeline: scroll(root); }
    @keyframes tlgProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}

/* ---- 14. Responsive & reduced motion ------------------------------------ */
@media (max-width: 1024px) {
  :root { --tlg-header-h: 76px; }
}
@media (max-width: 767px) {
  :root { --tlg-header-h: 72px; }
  .tlg-marquee img { height: 30px; }
  .tlg-card--hover:hover { transform: none; }
  .tlg-panel { border-radius: var(--tlg-radius-lg); }
  .tlg-faq .e-n-accordion-item > .e-con { padding-right: 4px !important; }
  .tlg-snap-controls { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
  html.tlg-js .elementor-invisible, html.tlg-js .tlg-cards.tlg-reveal > * { opacity: 1 !important; }
  .tlg-marquee__track, .tlg-float img { animation: none !important; }
}
@media print {
  .tlg-site-header, .tlg-snap-controls, .tlg-nav__toggle { display: none !important; }
  .elementor-invisible, .tlg-cards.tlg-reveal > * { opacity: 1 !important; }
}