/* ==========================================================================
   TruXVisuals — scoped to #tx so nothing collides with GoHighLevel's CSS
   ========================================================================== */
#tx *,#tx *::before,#tx *::after{box-sizing:border-box}
#tx{
  --bg:#0a0a0a; --bg-2:#101010; --line:rgba(255,255,255,.10);
  --ink:#f4f2ef; --ink-2:#a8a29a; --ink-3:#6e6a64;
  --gold:#d2a24c; --gold-dim:rgba(210,162,76,.35);
  --display:'Oswald',Impact,sans-serif;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --pad:clamp(20px,5vw,80px);
  position:relative; z-index:1;
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
#tx img,#tx video{display:block;max-width:100%}
#tx a{color:inherit;text-decoration:none}
#tx p{margin:0 0 1em}
#tx h1,#tx h2,#tx h3,#tx h4{margin:0;font-weight:400;line-height:1.05}
#tx ul{margin:0;padding:0;list-style:none}
#tx button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#tx :focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* full-bleed inside GHL's constrained row */
#tx .tx-bleed{width:100vw;margin-left:calc(50% - 50vw);max-width:100vw}
#tx .tx-wrap{max-width:1440px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

#tx .tx-eyebrow{
  font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold);margin:0 0 18px
}
#tx .tx-h2{font-family:var(--display);font-weight:500;text-transform:uppercase;
  letter-spacing:.04em;font-size:clamp(30px,4.4vw,58px)}
#tx .tx-lede{font-family:var(--serif);font-weight:300;font-size:clamp(19px,2.1vw,26px);
  line-height:1.5;color:var(--ink-2);max-width:62ch}
#tx .tx-rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- buttons ---------- */
#tx .tx-btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:400;
  padding:15px 30px;border:1px solid var(--gold);color:var(--gold);
  transition:background .3s,color .3s
}
#tx .tx-btn:hover{background:var(--gold);color:#0a0a0a}
#tx .tx-btn--solid{background:var(--gold);color:#0a0a0a}
#tx .tx-btn--solid:hover{background:transparent;color:var(--gold)}
#tx .tx-btn--ghost{border-color:var(--line);color:var(--ink)}
#tx .tx-btn--ghost:hover{background:var(--ink);color:#0a0a0a;border-color:var(--ink)}

/* ---------- nav ---------- */
#tx .tx-nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:0 var(--pad);height:74px;
  background:rgba(10,10,10,0);border-bottom:1px solid transparent;
  transition:background .35s,border-color .35s,height .35s
}
#tx .tx-nav.is-stuck{background:rgba(10,10,10,.94);border-bottom-color:var(--line);height:64px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#tx .tx-logo{display:block;flex:none;line-height:0}
#tx .tx-logo img{width:auto;height:62px;transition:height .35s,opacity .3s}
#tx .tx-nav.is-stuck .tx-logo img{height:50px}
#tx .tx-logo:hover img{opacity:.82}
#tx .tx-foot .tx-logo img{height:62px}
#tx .tx-links{display:flex;align-items:center;gap:30px}
#tx .tx-links a{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);
  transition:color .25s;position:relative;padding:6px 0}
#tx .tx-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--gold);transition:right .3s}
#tx .tx-links a:hover{color:var(--ink)}
#tx .tx-links a:hover::after{right:0}
#tx .tx-nav-cta{display:flex;align-items:center;gap:18px}
#tx .tx-tel{font-size:12px;letter-spacing:.1em;color:var(--ink-2)}
#tx .tx-tel:hover{color:var(--gold)}
#tx .tx-burger{display:none;width:40px;height:40px;position:relative}
#tx .tx-burger b{position:absolute;left:9px;right:9px;height:1px;background:var(--ink);transition:.3s}
#tx .tx-burger b:nth-child(1){top:15px}
#tx .tx-burger b:nth-child(2){bottom:15px}
#tx .tx-nav.is-open .tx-burger b:nth-child(1){top:19px;transform:rotate(45deg)}
#tx .tx-nav.is-open .tx-burger b:nth-child(2){bottom:20px;transform:rotate(-45deg)}

/* ---------- hero ---------- */
#tx .tx-hero{position:relative;min-height:100svh;display:flex;align-items:center;
  justify-content:center;text-align:center;overflow:hidden;background:#000}
#tx .tx-hero-bg{position:absolute;inset:0}
#tx .tx-hero-bg video,#tx .tx-hero-bg img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.35) contrast(1.05)}
#tx .tx-hero-scrim{position:absolute;inset:0;
  background:
    radial-gradient(ellipse 62% 44% at 50% 46%,rgba(0,0,0,.62) 0%,rgba(0,0,0,.28) 55%,rgba(0,0,0,0) 78%),
    linear-gradient(180deg,rgba(10,10,10,.72) 0%,rgba(10,10,10,.18) 32%,rgba(10,10,10,.45) 70%,rgba(10,10,10,.92) 100%),
    radial-gradient(ellipse at center,rgba(0,0,0,0) 35%,rgba(0,0,0,.55) 100%)}
#tx .tx-hero-in{position:relative;z-index:2;padding:120px var(--pad) 130px}
#tx .tx-hero h1{margin:0;line-height:0}
#tx .tx-hero h1 img{width:clamp(270px,42vw,620px);height:auto;margin:0 auto;
  filter:drop-shadow(0 6px 34px rgba(0,0,0,.6))}
#tx .tx-hero .tx-sub{font-family:var(--sans);font-weight:400;text-transform:uppercase;
  font-size:clamp(10px,1.25vw,14px);letter-spacing:.52em;line-height:1;
  color:var(--gold);margin:30px 0 0 .52em;
  display:flex;align-items:center;justify-content:center;gap:18px}
#tx .tx-hero .tx-sub::before,#tx .tx-hero .tx-sub::after{content:"";width:clamp(24px,5vw,64px);
  height:1px;background:var(--gold-dim);margin-left:-.52em}
#tx .tx-hero .tx-tag{margin:16px 0 0;font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink-2)}
#tx .tx-hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px}
#tx .tx-scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-3);
  display:flex;flex-direction:column;align-items:center;gap:10px}
#tx .tx-scroll i{width:1px;height:46px;background:linear-gradient(180deg,var(--gold),transparent);
  animation:tx-drop 2.4s ease-in-out infinite}
@keyframes tx-drop{0%,100%{opacity:.25;transform:scaleY(.5);transform-origin:top}
  50%{opacity:1;transform:scaleY(1);transform-origin:top}}

/* ---------- credits marquee ---------- */
#tx .tx-credits{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg-2);padding:24px 0;overflow:hidden}
#tx .tx-credits-label{text-align:center;font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:16px}
#tx .tx-track{display:flex;gap:60px;width:max-content;animation:tx-slide 38s linear infinite}
#tx .tx-credits:hover .tx-track{animation-play-state:paused}
#tx .tx-track span{font-family:var(--display);font-weight:400;font-size:clamp(15px,1.7vw,21px);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
  transition:color .3s}
#tx .tx-track span:hover{color:var(--ink)}
@keyframes tx-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- section shell ---------- */
#tx .tx-sec{padding:clamp(70px,9vw,140px) 0}
#tx .tx-sec-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:40px;flex-wrap:wrap;margin-bottom:clamp(34px,4vw,58px)}
#tx .tx-sec-head p{margin:0;max-width:44ch;color:var(--ink-2);font-size:15px}

/* ---------- work grid ---------- */
#tx .tx-work{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,26px)}
#tx .tx-work .tx-card:nth-child(1),#tx .tx-work .tx-card:nth-child(6){grid-column:span 2}
#tx .tx-card{position:relative;display:block;width:100%;overflow:hidden;background:#000;
  border:1px solid var(--line);text-align:left}
#tx .tx-card-media{position:relative;aspect-ratio:16/9;overflow:hidden}
#tx .tx-card-media img,#tx .tx-card-media video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover}
#tx .tx-card-media img{transition:transform 1.1s cubic-bezier(.2,.6,.2,1),opacity .5s;
  filter:grayscale(.5) brightness(.82);transition:filter .6s,transform 1.1s cubic-bezier(.2,.6,.2,1)}
#tx .tx-card-media video{opacity:0;transition:opacity .5s}
#tx .tx-card.is-playing .tx-card-media video{opacity:1}
#tx .tx-card:hover .tx-card-media img{filter:grayscale(0) brightness(1);transform:scale(1.04)}
#tx .tx-card-grad{position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.82) 100%)}
#tx .tx-card-body{position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:clamp(16px,2.2vw,30px);display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
#tx .tx-card-kicker{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
  margin-bottom:8px}
#tx .tx-card-title{font-family:var(--display);font-weight:400;text-transform:uppercase;
  letter-spacing:.05em;font-size:clamp(17px,2.1vw,30px);line-height:1.1}
#tx .tx-card-meta{font-size:12px;color:var(--ink-2);margin-top:6px}
#tx .tx-play{flex:none;width:52px;height:52px;border:1px solid rgba(255,255,255,.5);
  border-radius:50%;display:grid;place-items:center;transition:background .3s,border-color .3s}
#tx .tx-play::before{content:"";border-left:11px solid #fff;border-top:7px solid transparent;
  border-bottom:7px solid transparent;margin-left:3px;transition:border-left-color .3s}
#tx .tx-card:hover .tx-play{background:var(--gold);border-color:var(--gold)}
#tx .tx-card:hover .tx-play::before{border-left-color:#0a0a0a}

/* ---------- vertical rail ---------- */
#tx .tx-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(228px,1fr);
  gap:clamp(12px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:14px;scrollbar-width:thin;scrollbar-color:var(--gold) #1a1a1a}
#tx .tx-rail::-webkit-scrollbar{height:3px}
#tx .tx-rail::-webkit-scrollbar-track{background:#1a1a1a}
#tx .tx-rail::-webkit-scrollbar-thumb{background:var(--gold)}
#tx .tx-vcard{scroll-snap-align:start;position:relative;display:block;width:100%;
  aspect-ratio:9/16;overflow:hidden;background:#000;border:1px solid var(--line);text-align:left}
#tx .tx-vcard img,#tx .tx-vcard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#tx .tx-vcard video{opacity:0;transition:opacity .6s}
#tx .tx-vcard.is-playing video{opacity:1}
#tx .tx-vcard-grad{position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.85) 100%)}
#tx .tx-vcard-body{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:18px}
#tx .tx-vcard-body h3{font-family:var(--display);font-weight:400;text-transform:uppercase;
  letter-spacing:.06em;font-size:15px}
#tx .tx-vcard-body span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* ---------- about ---------- */
#tx .tx-about{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,80px);align-items:center}
#tx .tx-about-media{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line)}
#tx .tx-about-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35)}
#tx .tx-sig{font-family:var(--serif);font-style:italic;font-size:26px;color:var(--gold);margin-top:28px}
#tx .tx-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;
  border-top:1px solid var(--line);padding-top:28px}
#tx .tx-stats b{display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(28px,3.4vw,46px);line-height:1;color:var(--ink)}
#tx .tx-stats span{display:block;margin-top:8px;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}

/* ---------- services ---------- */
#tx .tx-svc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
#tx .tx-svc li{background:var(--bg);padding:clamp(26px,3vw,44px);transition:background .4s}
#tx .tx-svc li:hover{background:var(--bg-2)}
#tx .tx-svc .n{font-family:var(--display);font-size:12px;letter-spacing:.2em;color:var(--gold);
  display:block;margin-bottom:20px}
#tx .tx-svc h3{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.05em;
  font-size:20px;margin-bottom:12px}
#tx .tx-svc p{font-size:14.5px;color:var(--ink-2);margin:0}

/* ---------- process ---------- */
#tx .tx-proc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,50px)}
#tx .tx-proc li{border-top:1px solid var(--gold-dim);padding-top:24px}
#tx .tx-proc b{font-family:var(--display);display:block;font-size:11px;letter-spacing:.28em;
  color:var(--gold);text-transform:uppercase;margin-bottom:14px}
#tx .tx-proc h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:22px;
  letter-spacing:.04em;margin-bottom:10px}
#tx .tx-proc p{font-size:14.5px;color:var(--ink-2);margin:0}

/* ---------- contact ---------- */
#tx .tx-contact{position:relative;background:var(--bg-2);border-top:1px solid var(--line)}
#tx .tx-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);align-items:start}
#tx .tx-detail{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
#tx .tx-detail dt{flex:none;width:96px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-3);padding-top:5px}
#tx .tx-detail dd{margin:0;font-size:17px;letter-spacing:.02em}
#tx .tx-detail dd a:hover{color:var(--gold)}
#tx .tx-formwrap{border:1px solid var(--line);background:var(--bg);padding:clamp(22px,3vw,38px)}
#tx .tx-formwrap h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;
  font-size:22px;margin-bottom:8px}
#tx .tx-formwrap>p{font-size:14px;color:var(--ink-2)}
#tx #tx-ghl-form:not(:empty){min-height:520px;margin-top:22px}
#tx #tx-ghl-form iframe{width:100%!important;border:0;display:block}
#tx .tx-fallback{display:grid;gap:14px;margin-top:22px}
#tx .tx-fallback label{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);
  display:block;margin-bottom:7px}
#tx .tx-fallback input,#tx .tx-fallback select,#tx .tx-fallback textarea{
  width:100%;background:#0a0a0a;border:1px solid var(--line);color:var(--ink);
  padding:13px 14px;font:inherit;font-size:15px;border-radius:0}
#tx .tx-fallback input:focus,#tx .tx-fallback select:focus,#tx .tx-fallback textarea:focus{
  border-color:var(--gold);outline:none}
#tx .tx-fallback textarea{min-height:110px;resize:vertical}
#tx .tx-fine{font-size:11.5px;color:var(--ink-3);line-height:1.6;margin:4px 0 0}

/* ---------- footer ---------- */
#tx .tx-foot{border-top:1px solid var(--line);padding:44px 0;background:var(--bg)}
#tx .tx-foot-in{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
#tx .tx-foot small{font-size:11.5px;color:var(--ink-3);letter-spacing:.06em}
#tx .tx-foot nav{display:flex;gap:24px;flex-wrap:wrap}
#tx .tx-foot nav a{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
#tx .tx-foot nav a:hover{color:var(--gold)}

/* ---------- lightbox ---------- */
#tx-lb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(6,6,6,.96);padding:clamp(14px,4vw,54px);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#tx-lb.is-open{display:flex}
#tx-lb .tx-lb-stage{position:relative;width:100%;max-width:1240px;max-height:88svh;display:flex;
  flex-direction:column;gap:16px;align-items:center}
#tx-lb video{width:auto;max-width:100%;max-height:76svh;background:#000;border:1px solid rgba(255,255,255,.12)}
#tx-lb .tx-lb-cap{text-align:center;font-family:'Oswald',sans-serif;text-transform:uppercase;
  letter-spacing:.16em;font-size:13px;color:#a8a29a}
#tx-lb .tx-lb-x{position:absolute;top:-46px;right:0;width:42px;height:42px;
  border:1px solid rgba(255,255,255,.3);color:#fff;font-size:20px;line-height:1;
  display:grid;place-items:center;transition:.3s}
#tx-lb .tx-lb-x:hover{background:#d2a24c;border-color:#d2a24c;color:#0a0a0a}

/* ---------- reveal ---------- */
#tx .tx-rev{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
#tx .tx-rev.is-in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  #tx .tx-about{grid-template-columns:1fr}
  #tx .tx-about-media{aspect-ratio:16/10;order:-1}
  #tx .tx-svc{grid-template-columns:repeat(2,1fr)}
  #tx .tx-contact-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  #tx .tx-links{position:fixed;top:0;right:0;bottom:0;width:min(78vw,340px);
    background:rgba(10,10,10,.985);flex-direction:column;align-items:flex-start;justify-content:center;
    gap:26px;padding:0 34px;transform:translateX(102%);transition:transform .45s cubic-bezier(.4,0,.2,1);
    border-left:1px solid var(--line);z-index:90}
  #tx .tx-nav.is-open .tx-links{transform:none}
  #tx .tx-links a{font-size:15px;letter-spacing:.18em;color:var(--ink)}
  #tx .tx-burger{display:block;position:relative;z-index:95}
  #tx .tx-logo img{height:42px}
  #tx .tx-nav.is-stuck .tx-logo img{height:38px}
  #tx .tx-tel{display:none}
  #tx .tx-nav-cta .tx-btn{display:none}
  #tx .tx-work{grid-template-columns:1fr}
  #tx .tx-work .tx-card:nth-child(1),#tx .tx-work .tx-card:nth-child(6){grid-column:span 1}
  #tx .tx-proc{grid-template-columns:1fr}
  #tx .tx-stats{grid-template-columns:repeat(3,1fr);gap:12px}
}
@media (max-width:560px){
  #tx .tx-svc{grid-template-columns:1fr}
  #tx .tx-detail{flex-direction:column;gap:6px}
  #tx .tx-detail dt{width:auto}
  #tx .tx-rail{grid-auto-columns:minmax(190px,1fr)}
  #tx .tx-hero .tx-tag{letter-spacing:.2em;font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  #tx .tx-rev{opacity:1;transform:none;transition:none}
  #tx .tx-track{animation:none}
  #tx .tx-scroll i{animation:none}
}