/* Triotech Site: additions on top of the design system for real WordPress content. */

/* admin bar */
.admin-bar .hdr{top:32px}
.admin-bar .mobile-menu{padding-top:calc(128px + env(safe-area-inset-top,0px))}
@media (max-width:782px){.admin-bar .hdr{top:46px}html #wpadminbar{position:fixed}}
html{margin-top:0!important}
body.admin-bar{padding-top:0}

/* page-change curtain covers the first paint when arriving from another page */
.ttr-cover .curtain i{transform:scaleY(1)!important;transition:none!important}

/* images inside the design */
.post .art.has-img img,.featured-post .fart.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92;transition:transform .8s var(--ease),opacity .4s}
.post:hover .art.has-img img,.featured-post:hover .fart img{transform:scale(1.04);opacity:1}
.post .art.has-img::after,.featured-post .fart.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(2,2,5,.55));pointer-events:none}
.post .art{height:150px}
.avatar.has-img::after{display:none}
.avatar.has-img{padding:2px}
.avatar.has-img img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.mono.has-img{padding:2px;overflow:hidden}
.mono.has-img::after{display:none}
.mono.has-img img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;border-radius:12px}
.fig{margin:0;border-radius:18px;border:1px solid var(--line-2);background:rgba(2,2,5,.55);padding:clamp(12px,2vw,22px);overflow:hidden}
.fig img{display:block;width:100%;height:auto;border-radius:10px}
.fig figcaption{font-family:var(--font-mono);font-size:.74rem;color:var(--fg-3);margin-top:12px;line-height:1.5}
.fig-sm{max-width:420px}
.fig-wide{margin-top:clamp(36px,5vw,56px)}
.fig.portrait{max-width:360px;margin-inline:auto}
.glance-logo{max-width:140px;max-height:56px;object-fit:contain;filter:brightness(1.1)}
.pf-img{margin:-6px -6px 4px;border-radius:14px;overflow:hidden;aspect-ratio:16/10;background:rgba(2,2,5,.6)}
.pf-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.pf-card:hover .pf-img img{transform:scale(1.04)}
.post-hero-img{margin:0 0 32px;border-radius:18px;overflow:hidden;border:1px solid var(--line-2)}
.post-hero-img img{display:block;width:100%;height:auto}

/* rich text from WordPress (service definitions, job descriptions, blog posts) */
.define-sub{font-family:var(--font-mono);font-size:.78rem;color:var(--teal);margin:-6px 0 14px;position:relative}
.define-body{position:relative}
.define-body p{color:var(--fg-2);font-size:1.05rem;line-height:1.7;margin:0 0 12px}
.define-body ul,.define-body ol{margin:0 0 12px;padding-left:1.2em;color:var(--fg-2)}
.rich{color:var(--fg-2)}
.rich > *:first-child{margin-top:0}
.rich p,.rich li{font-size:1.06rem;line-height:1.78}
.rich p{margin:0 0 18px}
.rich h2{font-size:var(--step-2);letter-spacing:-.025em;margin:52px 0 14px;color:var(--fg);scroll-margin-top:100px;line-height:1.1}
.rich h3{font-size:var(--step-1);margin:34px 0 10px;color:var(--fg);scroll-margin-top:100px}
.rich h4{font-size:1.05rem;margin:26px 0 8px;color:var(--fg)}
.rich h2 strong,.rich h3 strong{font-weight:inherit}
.rich strong,.rich b{color:var(--fg);font-weight:600}
.rich a{color:var(--orange-hi);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.rich a:hover{color:var(--fg)}
.rich ul,.rich ol{margin:0 0 22px;padding-left:1.3em}
.rich li{margin:6px 0}
.rich li::marker{color:var(--orange)}
.rich img{max-width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.rich figure{margin:28px 0}
.rich figcaption{font-family:var(--font-mono);font-size:.74rem;color:var(--fg-3);margin-top:8px}
.rich blockquote{margin:28px 0;padding:6px 0 6px 22px;border-left:2px solid var(--orange);color:var(--fg)}
.rich table{width:100%;border-collapse:collapse;margin:24px 0;font-size:.94rem;display:block;overflow-x:auto}
.rich th,.rich td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.rich th{font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);border-bottom-color:var(--line-2)}
.rich code{font-family:var(--font-mono);font-size:.88em;background:rgba(255,255,255,.06);padding:2px 6px;border-radius:6px}
.rich pre{background:#05060F;border:1px solid var(--line-2);border-radius:12px;padding:16px;overflow:auto;font-size:.86rem}
.rich hr{border:0;height:1px;background:var(--line);margin:36px 0}
.rich .wp-block-image,.rich .wp-caption{max-width:100%}
.prose.rich{max-width:74ch}

/* case study additions */
.cons-detail{margin-top:22px}
.cons-detail li{color:var(--fg-2)}
.cons-detail b{color:var(--fg)}
.flow-foot{margin-top:16px;font-family:var(--font-mono);font-size:.8rem;color:var(--teal)}

/* SLA severity cards */
.sevgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;perspective:1600px}
.sev{position:relative;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,var(--surface),var(--bg-2));padding:22px;display:grid;gap:14px;align-content:start;min-width:0;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease),border-color .3s}
.sev.is-tilting{transition:transform .12s linear}
.sev::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;border-radius:18px 18px 0 0;background:var(--sev)}
.sev-top{display:flex;align-items:baseline;gap:12px}
.sev-code{font-family:var(--font-display);font-size:2.2rem;font-weight:700;font-stretch:115%;letter-spacing:-.03em;color:var(--sev);line-height:1}
.sev-name{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
.sev-time small{display:block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.sev-time b{font-family:var(--font-display);font-size:1.35rem;font-weight:650}
.sev p{color:var(--fg-2);font-size:.92rem}
.sev .bul li{font-size:.88rem}
@media (max-width:1020px){.sevgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.sevgrid{grid-template-columns:1fr}}

/* family map */
.fam-map{position:relative;border-radius:24px;border:1px solid var(--line-2);padding:clamp(24px,4vw,48px);background:radial-gradient(600px 300px at 50% 0,rgba(241,90,36,.12),transparent 60%),var(--bg-2);display:grid;gap:36px;justify-items:center;overflow:hidden}
.fam-map::before{content:"";position:absolute;left:50%;top:120px;bottom:40px;width:1px;background:linear-gradient(var(--orange),transparent)}
.fam-root{position:relative;display:grid;justify-items:center;gap:6px;padding:20px 28px;border-radius:18px;border:1px solid rgba(241,90,36,.45);background:rgba(241,90,36,.08);text-align:center}
.fam-root .mark{width:44px;height:44px}
.fam-root b{font-family:var(--font-display);font-size:1.4rem;font-weight:700;letter-spacing:-.02em}
.fam-root span{font-family:var(--font-mono);font-size:.7rem;color:var(--fg-3);letter-spacing:.08em;text-transform:uppercase}
.fam-branches{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;width:100%}
.fam-node{display:grid;gap:4px;padding:16px;border-radius:14px;border:1px solid var(--line-2);background:rgba(2,2,5,.6);text-align:center;transition:border-color .3s,transform .5s var(--ease),background-color .3s}
.fam-node:hover{border-color:var(--teal);transform:translateY(-4px);background:rgba(0,169,157,.06)}
.fam-node b{font-family:var(--font-display);font-size:1.1rem;font-weight:650}
.fam-node span{font-family:var(--font-mono);font-size:.68rem;color:var(--teal);letter-spacing:.06em;text-transform:uppercase}

/* thank-you pages */
.thanks{min-height:78vh}
.okmark.big{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:rgba(0,169,157,.12);border:1px solid rgba(0,169,157,.5);color:var(--teal);margin-bottom:6px}
.okmark.big svg{width:34px;height:34px}
.thanks .ph-title{max-width:22ch;margin-inline:auto}
.thanks-steps{max-width:560px;width:100%;text-align:left;margin:16px auto 8px}

/* honeypot and disabled buttons */
.form-card button[disabled]{opacity:.7;cursor:progress}
.map{display:block}

/* keep stray theme/plugin widgets from breaking the layout */
#view .elementor,#view .elementor-section{max-width:100%}

/* section block layout options */
.blk-0{padding-block:0}
.ttr-center .sec-head,.ttr-center .stack,.ttr-center .prose{text-align:center;margin-inline:auto}
.ttr-center .sec-head{grid-template-columns:1fr;justify-items:center}
.ttr-center .sec-head .side{justify-items:center}
.ttr-panel > .wrap{background:linear-gradient(180deg,var(--surface),var(--bg-2));border:1px solid var(--line);border-radius:24px;padding-block:clamp(28px,4vw,56px)}
.media-split{align-items:center}

/* industry stories */
.vname.sub{font-size:var(--step-2);color:var(--fg-2)}
.vbtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.vh{font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin:6px 0 -2px}
.vmore{border-top:1px solid var(--line);padding-top:12px}
.vmore summary{cursor:pointer;list-style:none;font-weight:600;color:var(--orange-hi);display:inline-flex;align-items:center;gap:8px}
.vmore summary::-webkit-details-marker{display:none}
.vmore summary::after{content:"+";font-family:var(--font-mono);font-size:1.1rem;transition:transform .3s var(--ease)}
.vmore[open] summary::after{transform:rotate(45deg)}
.vmore[open] > :not(summary){animation:ttr-fade .5s var(--ease) both}
.vmore p{margin:8px 0 14px;line-height:1.7}
@keyframes ttr-fade{from{opacity:0;transform:translateY(8px)}}

/* partner logos / video */
.plogo{width:auto;max-width:150px;height:44px;object-fit:contain;object-position:left center}
.pvideo{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;border:1px solid var(--line-2);background:#000}
.pcard .bul b{color:var(--fg)}
.statband{grid-template-columns:repeat(var(--sn,3),minmax(0,1fr))}
@media (max-width:680px){.statband{grid-template-columns:repeat(2,minmax(0,1fr))}.statband > div:nth-child(odd){border-left:0}}

/* builder leftovers some plugins print in the footer (popups, off-canvas menus) */
body.ttr .elementor-location-popup,body.ttr [data-elementor-type="popup"],body.ttr .elementor-popup-modal,
body.ttr .elementor-location-header,body.ttr .elementor-location-footer,body.ttr .wpr-template-popup,body.ttr .jkit-offcanvas,
body.ttr .e-floating-buttons{display:none!important}
.statband[style*="--sn:4"] b{font-size:clamp(2rem,1.4rem + 2.2vw,3.4rem)}

/* images added from the dashboard */
.svc-viz.has-img{padding:0;overflow:hidden}
.svc-viz.has-img img{width:100%;height:150px;object-fit:cover;display:block;border-radius:inherit}
.step-img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;border:1px solid var(--line-2);margin-bottom:14px}
.wcard-img{width:calc(100% + 2px);margin:-1px -1px 14px;aspect-ratio:16/9;object-fit:cover;border-radius:14px 14px 0 0;display:block}
.mq-logo{height:34px;width:auto;max-width:160px;object-fit:contain;filter:grayscale(1) brightness(1.6);opacity:.8}
.v.has-img h3,.v.has-img p{text-shadow:0 1px 12px rgba(0,0,0,.6)}
.ico-img{object-fit:contain}
/* GoHighLevel form shown instead of the built-in form */
.ghl-card{padding:0;overflow:hidden;background:transparent}
.ghl-card iframe{display:block;width:100%;min-height:760px;border:0}
/* v1.3.2 */
.ttr-disc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ttr-disc-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.ttr-disc .wcard .more{margin-top:6px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.88rem;color:var(--orange-hi)}
.ttr-disc .wcard .more svg{width:14px;height:14px}
@media (max-width:1100px){.ttr-disc-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.ttr-disc,.ttr-disc-5{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ttr-disc,.ttr-disc-5{grid-template-columns:1fr}}
.pricing .eyebrow-sm{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-hi);margin:10px 0 0}
.pricing .pricing-sub{font-size:.95rem;font-weight:600;margin:14px 0 4px;color:var(--fg)}
.job-hours{font-family:var(--font-mono);font-size:.74rem;color:var(--fg-3);margin-top:6px}
/* Figures: never larger than needed; tall diagrams stay readable without filling the screen */
.fig-wide{max-width:880px;margin-inline:auto}
.fig img{max-height:78vh;object-fit:contain}
/* Elementor-built pages inside the theme */
.ttr-elementor{position:relative;z-index:1;padding-top:clamp(84px,8vw,104px);min-height:40vh}
.ttr-elementor .elementor-section-wrap,.ttr-elementor .e-con{position:relative}
/* Elementor: Triotech widgets span the full width; their sections bring their own .wrap */
.elementor-widget[class*="elementor-widget-ttr-"]{width:100%}
.elementor-widget[class*="elementor-widget-ttr-"]>.elementor-widget-container{margin:0;padding:0}
.ttr-elementor .e-con:has(>.e-con-inner>[class*="elementor-widget-ttr-"]),.ttr-elementor .e-con:has(>[class*="elementor-widget-ttr-"]){--padding-top:0;--padding-bottom:0;--padding-left:0;--padding-right:0}
.elementor-editor-active [data-load]{opacity:1}

/* Page hero with an image (service pages): image fits in its own box on the right, animated */
.ph.has-img{min-height:min(680px,88vh)}
.ph.has-img .ph-copy{max-width:min(760px,54%)}
.ph.has-img .ph-canvas{opacity:.75}
.ph.has-img .ph-img{position:absolute;z-index:0;pointer-events:none;top:calc(132px + env(safe-area-inset-top,0px));bottom:clamp(48px,6vw,88px);right:max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter)));width:min(40%,540px);display:flex;align-items:center;justify-content:center;transform:translate3d(calc(var(--px,0) * -18px),calc(var(--py,0) * -12px),0);transition:transform .2s linear}
.ph.has-img .ph-img::before{content:"";position:absolute;inset:6% 4%;border-radius:50%;background:radial-gradient(closest-side,var(--ph-glow,rgba(2,86,163,.22)),transparent 72%);filter:blur(10px);animation:ttrGlow 6s ease-in-out infinite}
.ph.has-img .ph-img-in{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;animation:ttrHeroIn 1.1s cubic-bezier(.16,1,.3,1) .35s both,ttrFloat 7s ease-in-out 1.5s infinite}
.ph.has-img .ph-img img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;opacity:1}
.ph.has-img .ph-img:not(.is-svg) img{border-radius:18px;border:1px solid rgba(219,217,236,.14);box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 0 6px rgba(255,255,255,.02)}
.ph.has-img .ph-img.is-svg img{width:100%;height:100%}
@keyframes ttrHeroIn{from{opacity:0;transform:translateY(28px) scale(.95)}to{opacity:1;transform:none}}
@keyframes ttrFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes ttrGlow{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.ph.has-img .ph-img-in,.ph.has-img .ph-img::before{animation:none}.ph.has-img .ph-img{transform:none}}
@media (max-width:1020px){
.ph.has-img{min-height:0;display:flex;flex-direction:column;padding-bottom:40px}
.ph.has-img .wrap{order:1;width:100%}
.ph.has-img .ph-copy{max-width:100%}
.ph.has-img .ph-img{order:2;position:relative;inset:auto;right:auto;width:auto;height:min(64vw,340px);margin:32px var(--gutter) 0;transform:none}
}
/* Service and case study pages: one even gap between sections */
.page[data-page="service"] > section:not(.ph),.page[data-page="case"] > section:not(.ph){padding-top:0;padding-bottom:clamp(64px,7.5vw,108px)}
.page[data-page="service"] > section.ph + section,.page[data-page="case"] > section.ph + section{padding-top:clamp(64px,7.5vw,108px)}