/* tg-motion.css: Triad Global's own motion system for the three home pages.
   Same file in solutions-public, realestate-public and estate-public; edit all three together.
   Driven by /tg-motion.js. Everything is prefixed tgm- so nothing else on the pages changes.
   Brand: navy #21385B / deep #0a1730, green #2E7D4F, gold #C2A24C / #e8c77a, Playfair + Inter. */
.tgm {
  --tm-bg: #0a1730; --tm-panel: 16 32 60; --tm-tint: 214 228 255;
  --tm-gold: #e8c77a; --tm-gold-rgb: 232 199 122; --tm-gold-deep: 194 162 76;
  --tm-grad-gold: linear-gradient(180deg, #edd18c, #c2a24c); --tm-on-gold: #0a1730;
  --tm-green: 46 125 79; --tm-mint: #79cfa6; --tm-mint-soft: #c2ecd7; --tm-navy: 33 56 91; --tm-navy-hi: #2a4d7a;
  position: relative; overflow: hidden; isolation: isolate; color: #fff; background: var(--tm-bg);
  font-family: 'Inter', system-ui, sans-serif; padding: 0 22px 72px;
}
.tgm *, .tgm *::before, .tgm *::after { box-sizing: border-box; }

/* ---------- Background: light, moving grid, the brand mark ---------- */
.tgm-glow { position: absolute; inset: 0; z-index: -2; pointer-events: none; background:
  radial-gradient(60% 50% at 82% 0%, rgb(var(--tm-green) / .26), transparent 60%),
  radial-gradient(65% 55% at 4% 8%, rgb(42 82 136 / .62), transparent 64%),
  radial-gradient(45% 32% at 50% 100%, rgb(var(--tm-gold-deep) / .16), transparent 70%); }
.tgm-grid { position: absolute; inset: -56px 0 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgb(var(--tm-tint) / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--tm-tint) / .045) 1px, transparent 1px);
  background-size: 56px 56px; animation: tmGrid 26s linear infinite;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 18%, #000 30%, transparent 78%); mask-image: radial-gradient(70% 60% at 50% 18%, #000 30%, transparent 78%); }
@keyframes tmGrid { to { background-position: 56px 56px, 56px 56px; } }

/* The three facets fly in, lock together, then breathe and turn very slowly behind the stage. */
.tgm-mark { position: absolute; z-index: 0; left: 50%; top: 40px; width: min(760px, 120vw); aspect-ratio: 1; transform: translateX(-50%); pointer-events: none; opacity: .2; filter: blur(1.5px) drop-shadow(0 0 80px rgb(var(--tm-gold-deep) / .35)); }
.tgm-mark .tgm-spin { position: absolute; inset: 0; animation: tmSpin 120s linear infinite; }
.tgm-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.tgm-mark .f1 { animation: tmF1 1.4s cubic-bezier(.2, .8, .2, 1) .1s forwards; }
.tgm-mark .f2 { animation: tmF2 1.4s cubic-bezier(.2, .8, .2, 1) .25s forwards; }
.tgm-mark .f3 { animation: tmF3 1.4s cubic-bezier(.2, .8, .2, 1) .4s forwards; }
@keyframes tmF1 { from { opacity: 0; transform: translate(-18%, -12%) rotate(-14deg); } to { opacity: 1; transform: none; } }
@keyframes tmF2 { from { opacity: 0; transform: translate(18%, -12%) rotate(14deg); } to { opacity: 1; transform: none; } }
@keyframes tmF3 { from { opacity: 0; transform: translateY(22%); } to { opacity: 1; transform: none; } }
@keyframes tmSpin { to { transform: rotate(360deg); } }

/* ---------- Hero words ---------- */
.tgm-in { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding-top: 78px; text-align: center; }
.tgm-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  color: var(--tm-gold); padding: 6px 13px; border-radius: 999px; background: rgb(var(--tm-gold-deep) / .1); border: 1px solid rgb(var(--tm-gold-deep) / .32); }
.tgm-ping { width: 7px; height: 7px; border-radius: 99px; background: var(--tm-gold); flex: none; animation: tmPing 2s infinite; }
@keyframes tmPing { 0% { box-shadow: 0 0 0 0 rgb(var(--tm-gold-rgb) / .6); } 80%, 100% { box-shadow: 0 0 0 10px rgb(var(--tm-gold-rgb) / 0); } }
.tgm h1.tgm-h1 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; color: #fff; font-size: clamp(40px, 6.4vw, 80px);
  line-height: 1.03; letter-spacing: -.012em; margin: 20px auto 0; max-width: 17ch; }
/* Words rise one by one (tg-motion.js wraps them); without the script the heading simply shows. */
.tgm-w { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(6px); animation: tmWord .9s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes tmWord { to { opacity: 1; transform: none; filter: none; } }
.tgm-shine { display: block; background: linear-gradient(90deg, var(--tm-gold), #fff 40%, var(--tm-gold) 60%, #9adbb9); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: tmShine 6s linear infinite; padding-bottom: .06em; }
.tgm-shine .tgm-w { color: inherit; }
@keyframes tmShine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.tgm-line { display: block; width: 84px; height: 3px; border-radius: 3px; margin: 22px auto 0; background: linear-gradient(90deg, #2a4d7a, #2E7D4F 50%, #C2A24C, #2a4d7a); background-size: 200% 100%; animation: tmLine 4s linear infinite; }
@keyframes tmLine { to { background-position: -200% 0; } }
.tgm-sub { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: rgb(255 255 255 / .8); margin: 18px auto 0; max-width: 60ch; }
.tgm-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 28px; }
.tgm a.tgm-gold, .tgm a.tgm-ghost { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px;
  border-radius: 12px; font-weight: 700; font-size: 15px; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s; }
.tgm a.tgm-gold { color: var(--tm-on-gold); background: var(--tm-grad-gold); box-shadow: 0 8px 30px -8px rgb(var(--tm-gold-rgb) / .55); }
.tgm a.tgm-gold::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .55) 50%, transparent 70%); transform: translateX(-120%); animation: tmSweep 5s ease-in-out 2s infinite; }
@keyframes tmSweep { 0%, 70% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.tgm a.tgm-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 38px -8px rgb(var(--tm-gold-rgb) / .75); }
.tgm a.tgm-ghost { color: #fff; font-weight: 600; background: rgb(var(--tm-tint) / .07); border: 1px solid rgb(var(--tm-tint) / .22); }
.tgm a.tgm-ghost:hover { background: rgb(var(--tm-tint) / .14); transform: translateY(-2px); }
.tgm-small { font-size: 13px; color: rgb(255 255 255 / .58); margin-top: 16px; }
.tgm-small b { color: rgb(255 255 255 / .88); font-weight: 600; }
.tgm-small a { color: inherit; }
.tgm-fade { opacity: 0; transform: translateY(14px); animation: tmUp .8s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes tmUp { to { opacity: 1; transform: none; } }

/* ---------- The stage: a living window ---------- */
.tgm-stage { position: relative; width: 100%; max-width: 1120px; margin: 58px auto 0; perspective: 1800px; text-align: left; }
.tgm-stageglow { position: absolute; inset: 8% 6% -6%; border-radius: 40px; filter: blur(42px); z-index: 0; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgb(var(--tm-gold-rgb) / .28), rgb(var(--tm-green) / .2) 45%, transparent 75%); animation: tmBreathe 7s ease-in-out infinite; }
@keyframes tmBreathe { 50% { opacity: .65; transform: scale(.97); } }
.tgm-win { position: relative; z-index: 1; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, #142748, #0d1b36);
  border: 1px solid rgb(var(--tm-tint) / .13); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgb(var(--tm-gold-rgb) / .06), 0 0 80px -20px rgb(var(--tm-green) / .4);
  transform: rotateX(14deg) scale(.96); transform-origin: 50% 0; transition: transform 1s cubic-bezier(.2, .8, .2, 1); --mx: 50%; --my: 0%; }
.tgm-win:hover { transform: none; }
/* A soft light follows the pointer across the window. */
.tgm-win::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(420px circle at var(--mx) var(--my), rgb(var(--tm-gold-rgb) / .08), transparent 60%); }
@supports (animation-timeline: view()) {
  .tgm-win { animation: tmTilt linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; transition: none; }
  @keyframes tmTilt { from { transform: rotateX(18deg) scale(.92); } to { transform: none; } }
}
.tgm-bar { display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-bottom: 1px solid rgb(var(--tm-tint) / .08); font-size: 11.5px; color: rgb(255 255 255 / .5); }
.tgm-bar > i { width: 10px; height: 10px; border-radius: 99px; background: rgb(var(--tm-tint) / .17); display: block; flex: none; }
.tgm-tabs { display: flex; gap: 4px; margin-left: 12px; overflow: hidden; }
.tgm-tab { position: relative; overflow: hidden; border: 0; cursor: pointer; font: 600 12px 'Inter', sans-serif; color: rgb(255 255 255 / .55); background: transparent; padding: 6px 12px; border-radius: 8px; white-space: nowrap; }
.tgm-tab:hover { color: #fff; }
.tgm-tab.on { color: #fff; background: rgb(var(--tm-tint) / .09); }
.tgm-tab .tgm-prog { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--tm-grad-gold); width: 0; }
.tgm-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--tm-mint); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; white-space: nowrap; }
.tgm-live::before { content: ''; width: 7px; height: 7px; border-radius: 99px; background: var(--tm-mint); animation: tmPingG 2s infinite; }
@keyframes tmPingG { 0% { box-shadow: 0 0 0 0 rgb(121 207 166 / .6); } 80%, 100% { box-shadow: 0 0 0 9px rgb(121 207 166 / 0); } }
.tgm-body { display: grid; grid-template-columns: 176px minmax(0, 1fr) 300px; min-height: 430px; }
.tgm-side { border-right: 1px solid rgb(var(--tm-tint) / .07); padding: 12px 10px; display: grid; align-content: start; gap: 3px; }
.tgm-side a, .tgm-side span { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 12.5px; color: rgb(255 255 255 / .58); text-decoration: none; transition: background .3s, color .3s; }
.tgm-side a:hover { color: #fff; background: rgb(var(--tm-tint) / .06); }
.tgm-side i { width: 14px; height: 14px; border-radius: 4px; background: rgb(var(--tm-tint) / .16); flex: none; transition: background .3s; }
.tgm-side .on { background: rgb(var(--tm-gold-rgb) / .14); color: #fff; }
.tgm-side .on i { background: var(--tm-gold); }
.tgm-main { padding: 18px; display: grid; gap: 12px; align-content: start; min-width: 0; animation: tmScene .6s ease; }
@keyframes tmScene { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tgm-head { display: flex; align-items: center; gap: 14px; }
.tgm-pic { width: 92px; height: 64px; border-radius: 10px; flex: none; background: linear-gradient(135deg, #24476f, #2E7D4F) center/cover no-repeat; border: 1px solid rgb(var(--tm-tint) / .14); overflow: hidden; position: relative; }
.tgm-pic img { width: 100%; height: 100%; object-fit: cover; display: block; animation: tmKen 13s ease-out forwards; }
@keyframes tmKen { from { transform: scale(1.15); } to { transform: scale(1); } }
.tgm-title { font-family: 'Playfair Display', Georgia, serif; font-size: 22px; font-weight: 700; line-height: 1.15; }
.tgm-subt { font-size: 12.5px; color: rgb(255 255 255 / .55); margin-top: 3px; }
.tgm-steps { display: flex; gap: 6px; flex-wrap: wrap; }
.tgm-step { font-size: 11px; padding: 4px 10px; border-radius: 99px; background: rgb(var(--tm-tint) / .06); color: rgb(255 255 255 / .45); transition: all .45s; }
.tgm-step.done { background: rgb(var(--tm-green) / .38); color: var(--tm-mint-soft); }
.tgm-step.now { background: var(--tm-grad-gold); color: var(--tm-on-gold); font-weight: 700; box-shadow: 0 0 18px -2px rgb(var(--tm-gold-rgb) / .75); }
.tgm-lines { display: grid; gap: 7px; }
.tgm-ln { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; padding: 9px 12px; border-radius: 10px;
  background: rgb(var(--tm-tint) / .045); border: 1px solid rgb(var(--tm-tint) / .06); opacity: 0; transform: translateY(6px); transition: opacity .45s, transform .45s; }
.tgm-ln.on { opacity: 1; transform: none; }
.tgm-ln b { font-variant-numeric: tabular-nums; font-weight: 600; }
.tgm-ln .ok { color: var(--tm-mint); margin-right: 6px; }
.tgm-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; padding: 4px 12px; color: rgb(255 255 255 / .7); }
.tgm-total b { color: #fff; font-size: 20px; font-variant-numeric: tabular-nums; }
.tgm-note { font-size: 11px; color: rgb(255 255 255 / .4); }
.tgm-pane { border-left: 1px solid rgb(var(--tm-tint) / .08); padding: 16px; display: grid; gap: 12px; align-content: start;
  background: linear-gradient(180deg, rgb(var(--tm-navy) / .45), rgb(var(--tm-green) / .14)); }
.tgm-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tm-gold); font-weight: 700; }
.tgm-ring { display: flex; align-items: center; gap: 14px; }
.tgm-ring svg { width: 92px; height: 92px; flex: none; }
.tgm-ring .bg { fill: none; stroke: rgb(var(--tm-tint) / .12); stroke-width: 9; }
.tgm-ring .fg { fill: none; stroke: url(#tmRingGrad); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 251.3; stroke-dashoffset: 251.3; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1.6s cubic-bezier(.2, .8, .2, 1); }
.tgm-ring b { display: block; font-size: 26px; font-variant-numeric: tabular-nums; line-height: 1; }
.tgm-ring span { font-size: 12px; color: rgb(255 255 255 / .6); }
.tgm-me { justify-self: end; max-width: 95%; padding: 9px 12px; border-radius: 14px 14px 4px 14px; background: #24476f; font-size: 12.5px; line-height: 1.45; min-height: 34px; }
.tgm-caret { display: inline-block; width: 7px; height: 14px; margin-left: 2px; background: var(--tm-gold); vertical-align: -2px; animation: tmBlink 1s steps(1) infinite; }
@keyframes tmBlink { 50% { opacity: 0; } }
.tgm-ans { padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: rgb(var(--tm-tint) / .07); border: 1px solid rgb(var(--tm-tint) / .09); color: #dcf3e7; font-size: 12.5px; line-height: 1.5; opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s; }
.tgm-ans.on { opacity: 1; transform: none; }
.tgm-ans b { color: var(--tm-gold); }
.tgm-dots { display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 14px; background: rgb(var(--tm-tint) / .07); width: fit-content; }
.tgm-dots i { width: 6px; height: 6px; border-radius: 99px; background: rgb(var(--tm-tint) / .55); animation: tmDot 1s infinite; }
.tgm-dots i:nth-child(2) { animation-delay: .15s; } .tgm-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes tmDot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.tgm-bars { display: flex; align-items: flex-end; gap: 5px; height: 64px; }
.tgm-bars span { flex: 1; border-radius: 6px 6px 2px 2px; background: rgb(var(--tm-tint) / .16); height: 8%; transition: height 1.2s cubic-bezier(.2, .8, .2, 1); }
.tgm-bars span:last-child { background: var(--tm-grad-gold); }
.tgm-pane .tgm-gold { min-height: 40px; font-size: 13.5px; margin-top: 2px; }

/* Floating notes */
.tgm-float { position: absolute; z-index: 4; font-size: 12.5px; padding: 9px 13px; border-radius: 12px; color: #fff; text-decoration: none;
  background: rgb(var(--tm-panel) / .95); border: 1px solid rgb(var(--tm-tint) / .16); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .7);
  display: flex; align-items: center; gap: 8px; white-space: nowrap; animation: tmPop .6s cubic-bezier(.2, 1.4, .4, 1) both, tmBob 5s ease-in-out .6s infinite; }
.tgm-float b { color: var(--tm-gold); }
.tgm-float .g { color: var(--tm-mint); font-weight: 700; }
.tgm-floatA { right: 26px; top: -44px; animation-delay: 1.6s, 2.2s; }
.tgm-floatB { left: 200px; bottom: -22px; animation-delay: 2.6s, 3.2s; }
@keyframes tmPop { from { opacity: 0; transform: scale(.7) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes tmBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* ---------- Below the hero: sections rise into view ---------- */
.tgm-rv { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1); }
.tgm-rv.on { opacity: 1; transform: none; }

@media (max-width: 1040px) {
  .tgm-body { grid-template-columns: 52px minmax(0, 1fr); }
  .tgm-pane { display: none; }
  .tgm-side a, .tgm-side span { font-size: 0; padding: 7px; justify-content: center; gap: 0; }
  .tgm-floatB { left: 10px; }
}
@media (max-width: 640px) {
  .tgm { padding: 0 14px 52px; } .tgm-in { padding-top: 50px; }
  .tgm-eyebrow { font-size: 11px; letter-spacing: .05em; }
  .tgm-stage { margin-top: 36px; }
  .tgm-body { grid-template-columns: minmax(0, 1fr); min-height: 0; } .tgm-side { display: none; }
  .tgm-tabs { margin-left: 6px; } .tgm-tab { padding: 6px 8px; font-size: 11px; } .tgm-live { display: none; }
  .tgm-stage .tgm-float { position: relative; inset: auto; width: fit-content; max-width: 100%; margin: 0 auto 14px; white-space: normal; }
  .tgm-stage .tgm-floatB { display: none; }
  .tgm-pic { width: 72px; height: 54px; } .tgm-title { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .tgm *, .tgm *::before, .tgm *::after { animation: none !important; transition: none !important; }
  .tgm-w, .tgm-fade, .tgm-mark img, .tgm-ln, .tgm-ans, .tgm-rv { opacity: 1 !important; transform: none !important; filter: none !important; }
  .tgm-win { transform: none; }
}