/* TR TECHNOLOGY SOLUTIONS | 2026 sitewide art direction
   Brand: ocean blue #0274a6 / orange #f8871d. Existing semantic HTML remains intact.
   All motion is progressive enhancement, and uses compositor-friendly properties. */
:root {
  --blue:#0274a6;--blue-d:#03628c;--blue-dd:#064e70;
  --orange:#f8871d;--orange-d:#dc7313;--navy:#073b55;--navy-d:#042e46;
  --bg:#ffffff;--bg-alt:#f5f9fb;--card:#ffffff;--lb:#edf7fb;--lo:#fff4e9;
  --tp:#152e3d;--ts:#607588;--tm:#8ba0ad;--border:rgba(7,59,85,.12);
  --nav-bg:rgba(255,255,255,.90);--sh-sm:0 1px 3px rgba(7,59,85,.045);
  --sh-md:0 4px 13px rgba(7,59,85,.07);--sh-lg:0 6px 18px rgba(7,59,85,.09);
  --ff-h:'Space Grotesk','Inter',system-ui,sans-serif;--ff-b:'Inter',system-ui,sans-serif;
  --ff-m:'DM Mono',ui-monospace,monospace;
  --mw:1220px;--pg:clamp(17px,3.1vw,36px);--nav-h:86px;
  --sec-y:clamp(56px,7vw,95px);--sec-y-sm:clamp(38px,5vw,66px);
  --r-xs:6px;--r-sm:10px;--r-md:14px;--r-lg:18px;--r-xl:24px;
  --display:clamp(36px,5.3vw,66px);--h1:clamp(30px,4.3vw,54px);
  --h2:clamp(25px,3.3vw,42px);--h3:clamp(18px,2vw,25px);
  --ease-out:cubic-bezier(.22,1,.36,1);--ease-smooth-out:cubic-bezier(.22,1,.36,1)
}
[data-theme="dark"] {
 --bg:#091825;--bg-alt:#102330;--card:#10293a;--nav-bg:rgba(10,29,43,.91);
 --tp:#eaf4f9;--ts:#abc1cf;--tm:#8ca4b3;--border:rgba(167,207,230,.17);
 --lb:#122f42;--lo:#322718;--blue:#48b6e3;--blue-d:#218db8;
 --orange:#ffa24c;--orange-d:#f8871d;--navy:#0c2d43;
 --sh-sm:0 1px 3px rgba(0,0,0,.12);--sh-md:0 4px 12px rgba(0,0,0,.16);--sh-lg:0 6px 18px rgba(0,0,0,.2)
}
html{scroll-padding-top:100px} body{letter-spacing:-.006em;line-height:1.7}::selection{background:#fbd5b1;color:#102a39}
img,video,svg{max-width:100%}p,li,a,h1,h2,h3,h4{overflow-wrap:break-word}button,input,select,textarea{min-width:0}
.container{max-width:var(--mw)}main,section{max-width:100%}
/* Quiet typography: editorial but highly readable. */
h1,h2,h3,h4,.display{font-family:var(--ff-h);letter-spacing:-.039em;line-height:1.16;text-wrap:balance}
h1{font-weight:650}h2{font-weight:630}h3{font-weight:620}
.main-content p,main p{max-width:76ch}
.eyebrow{border-color:rgba(248,135,29,.2);background:var(--lo);color:var(--orange-d);border-radius:6px;
  letter-spacing:.115em;font:500 10px/1.4 var(--ff-m);padding:7px 10px;margin-bottom:16px}
[data-theme="dark"] .eyebrow{color:#ffb67a}
/* Floating global header, aligned with the reference homepage. */
.navbar{top:13px;left:50%;transform:translateX(-50%);width:min(1260px,calc(100% - 28px));max-width:none;height:66px;
 padding:0 clamp(12px,2.1vw,26px);background:var(--nav-bg);border:1px solid var(--border);border-radius:14px;
 box-shadow:0 5px 17px rgba(7,59,85,.075);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.navbar.scrolled{box-shadow:0 6px 20px rgba(7,59,85,.12)}
.nav-inner{max-width:100%;gap:22px;min-width:0}.nav-logo-img{height:37px;width:auto;max-width:188px;object-fit:contain}
.nav-links{gap:clamp(10px,1.5vw,25px)}.nav-links a{font-size:12px;font-weight:640;transition:color .24s ease}
.nav-links a:hover,.nav-links a.act,.nav-links a.active{color:var(--blue)}
.nav-actions{gap:8px}.nav-actions .btn{white-space:nowrap}
.theme-toggle{border-radius:10px!important;border:1px solid var(--border)!important;background:var(--bg-alt)!important;color:var(--tp)!important;
 min-width:37px;height:37px;display:grid;place-items:center}
.hamburger{border-radius:9px}
.mobile-nav{top:87px;left:14px;width:calc(100% - 28px);max-width:none;background:var(--card);
 border:1px solid var(--border);border-radius:14px;padding:13px 20px 22px;box-shadow:var(--sh-lg);
 max-height:calc(100dvh - 104px);overflow-y:auto}
.mobile-nav a{padding:11px 0;font-weight:560}
.revamp-skip{position:fixed;top:-80px;left:18px;z-index:11000;background:var(--blue);color:#fff;
 padding:10px 18px;border-radius:8px;font-size:14px}.revamp-skip:focus{top:8px}
/* CTA and outline button system. */
.btn,.btn-sm,.btn-lg{min-height:42px;border-radius:10px;gap:9px;justify-content:center;line-height:1.25;
 padding:11px 18px;font-weight:630;font-size:13px;box-shadow:none!important;transition:color .25s,background-color .25s,border-color .25s,transform .25s var(--ease-out)}
.btn-sm{min-height:36px;padding:9px 13px;font-size:12px}.btn-lg{min-height:48px;padding:14px 21px;font-size:14px}
.btn-blue,.btn-primary{background:var(--blue)!important;color:#fff!important;border:1px solid transparent}
.btn-blue:hover,.btn-primary:hover{background:var(--blue-d)!important;transform:translateY(-1px)}
.btn-orange{background:var(--orange)!important;color:#132c3b!important}
.btn-orange:hover{background:#ff9f46!important}
.btn-outline,.btn-white,.btn-ghost{border-radius:10px}
.btn:active{transform:scale(.985)}
@media(hover:hover) and (pointer:fine){a[href] .fa-arrow-right,a[href] .fa-arrow-up-right{transition:transform .23s var(--ease-out)}a[href]:hover .fa-arrow-right{transform:translateX(3px)}}
:where(a,button,input,textarea,select,summary):focus-visible{outline:2px solid var(--orange)!important;outline-offset:3px}
/* Page headers: brand gradient, visual rhythm and consistent content positioning. */
.page-hero{padding:clamp(126px,13vw,172px) 0 clamp(50px,6vw,82px);margin-bottom:0;
 background:radial-gradient(ellipse 50% 90% at 4% 0%,rgba(2,116,166,.11),transparent 75%),
 radial-gradient(ellipse 45% 110% at 100% 100%,rgba(248,135,29,.095),transparent 75%),var(--bg-alt);
 border-bottom:1px solid var(--border);isolation:isolate;overflow:hidden}
.page-hero:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
 background-image:linear-gradient(rgba(2,116,166,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(2,116,166,.035) 1px,transparent 1px);
 background-size:46px 46px;mask-image:linear-gradient(90deg,#000,transparent 77%)}
.page-hero h1,.page-hero .display{color:var(--tp);font-weight:660;font-size:clamp(34px,4.6vw,62px);
 letter-spacing:-.055em;line-height:1.08;max-width:1000px;text-wrap:balance}
.page-hero-lead,.page-hero p{color:var(--ts);font-size:clamp(15px,1.3vw,18px);line-height:1.7}
.page-hero .hero-orb{opacity:.27;filter:blur(30px)}
.page-hero .hero-pattern{opacity:.12}
.page-hero .breadcrumb,.page-hero .breadcrumb a{color:var(--ts)}.page-hero .breadcrumb a:hover{color:var(--blue)}
.page-hero .breadcrumb{font-size:11px;letter-spacing:.015em;margin-bottom:23px;gap:9px}
/* The existing markup uses tiny inline padding on many services sections: normalize spacing. */
main>section[style*="padding:8px"],main>section[style*="padding: 8px"]{padding-top:var(--sec-y-sm)!important;padding-bottom:var(--sec-y-sm)!important}
main>section:not(.page-hero):not(.guide-hero):not(.article-hero):not(.hero-section):not(.final-cta-section):not(.ratings-section):not(.filter-section):not(.portfolio-section):not(.portfolio-cta){scroll-margin-top:90px}
.section-heading{letter-spacing:-.045em}
.grid-2,.grid-3,.grid-4{gap:clamp(14px,2.1vw,30px)}
/* Modern gradient corners, very small shadows, crisp borders. */
.svc-card,.blog-card,.industry-card,.pricing-card,.review-card,.process-card,.faq-item,.included-card,.pf-card,
.work-card,.stat-card,.feature-card,.tech-card,.guide-aside-cta,.form-card,.service-card,.industry-guide-card,.portfolio-card,
.case-card,.testimonial-card,.contact-card,.value-card,.about-stat{border:1px solid var(--border);border-radius:var(--r-md);
 box-shadow:var(--sh-sm);transition:transform .32s var(--ease-out),border-color .25s,background .25s,box-shadow .25s}
:where(.svc-card,.blog-card,.industry-card,.pricing-card,.review-card,.process-card,.included-card,.pf-card,.work-card,.feature-card,.tech-card,.guide-aside-cta,.case-card,.testimonial-card,.contact-card,.value-card):hover{
 border-color:rgba(2,116,166,.34);box-shadow:0 4px 13px rgba(7,59,85,.075)}
@media(hover:hover) and (pointer:fine){:where(.svc-card,.blog-card,.industry-card,.pf-card,.work-card,.case-card):hover{transform:translateY(-3px)}}
.svc-card,.included-card,.feature-card,.pricing-card{background-image:radial-gradient(ellipse at 0% 0%,rgba(2,116,166,.075),transparent 54%),radial-gradient(ellipse at 100% 100%,rgba(248,135,29,.045),transparent 44%)}
[data-theme="dark"] :where(.svc-card,.included-card,.feature-card,.pricing-card){background-image:radial-gradient(ellipse at 0% 0%,rgba(72,182,227,.10),transparent 52%),radial-gradient(ellipse at 100% 100%,rgba(248,135,29,.07),transparent 44%)}
.svc-card{padding:clamp(18px,2.1vw,27px)}.blog-card{overflow:hidden;background:var(--card)}
.blog-card-img,.pf-card img{aspect-ratio:16/10;object-fit:cover}
/* Services: less text density per row, more air between sections, still compact. */
.services-header{gap:30px;align-items:center}.svc-card h3{font-size:clamp(18px,2vw,23px);line-height:1.25}
.included-section .grid-4,.services-section .grid-3{align-items:stretch}
.process-detail-section .container,.case-detail-section .container{position:relative}
.faq-q,summary{cursor:pointer}
.faq-item{overflow:hidden}.faq-q{padding:19px 21px;line-height:1.4}.faq-a{padding-inline:20px}
/* Blog index, articles and deep industry guides: unobstructed reading and hierarchy. */
.article-hero{padding:145px 0 40px;position:relative;
 background:radial-gradient(ellipse at 12% 15%,rgba(2,116,166,.07),transparent 55%),var(--bg-alt);border-bottom:1px solid var(--border)}
.article-hero .container{max-width:980px}.article-hero h1{font-weight:650;font-size:clamp(32px,4.3vw,58px);line-height:1.13;letter-spacing:-.054em;max-width:900px;margin-inline:auto}
.article-meta{font-family:var(--ff-b);font-size:12px;letter-spacing:0;gap:9px 16px;color:var(--ts)}
.article-featured{margin-top:20px}.article-featured img{height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:15px}
.article-body,.guide-main{font:400 clamp(15px,1.26vw,17px)/1.86 var(--ff-b);color:var(--ts);letter-spacing:0;
 max-width:820px;overflow-wrap:break-word;word-break:normal}
.article-body p,.guide-main p{max-width:75ch;margin-bottom:1.25em}
.article-body :is(h2,h3,h4),.guide-main :is(h2,h3,h4){font-family:var(--ff-h);color:var(--tp);letter-spacing:-.035em;text-wrap:balance;line-height:1.25}
.article-body h2,.guide-main h2{font-size:clamp(24px,2.4vw,32px);margin-top:2.0em;margin-bottom:.65em;scroll-margin-top:105px}
.article-body h3,.guide-main h3{font-size:clamp(19px,1.9vw,24px);margin-top:1.5em;margin-bottom:.5em;scroll-margin-top:105px}
.article-body :is(ul,ol),.guide-main :is(ul,ol){padding-left:1.15em;margin:1em 0 1.5em;list-style:revert}
.article-body li,.guide-main li{margin-bottom:.48em;line-height:1.7;padding-left:.2em}
.article-body a,.guide-main a{color:var(--blue);text-underline-offset:3px;overflow-wrap:anywhere}
.article-body a:hover,.guide-main a:hover{text-decoration:underline}
.article-body strong,.guide-main strong{font-weight:670;color:var(--tp)}
.article-body blockquote,.guide-main blockquote{border-left:3px solid var(--blue);background:var(--lb);border-radius:0 10px 10px 0;padding:20px 25px}
.article-body img,.guide-main img{width:auto;max-width:100%;height:auto;border-radius:10px;margin-inline:auto}
.article-toc,.guide-side-toc{border:1px solid var(--border);border-radius:12px;background:var(--bg-alt);padding:21px}
.article-toc a,.guide-side-toc a{line-height:1.55;display:inline-block}
.article-body table,.guide-main table,.guide-table{max-width:100%;font-size:14px;border-collapse:collapse}
.article-body table th,.article-body table td,.guide-table th,.guide-table td{padding:12px 15px;vertical-align:top;min-width:80px}
.article-body table,.guide-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:normal}
.guide-hero{padding:140px 0 35px;background:radial-gradient(ellipse at 90% 5%,rgba(248,135,29,.07),transparent 65%),var(--bg-alt);
 border-bottom:1px solid var(--border)}
.guide-hero h1{font-size:clamp(31px,4.3vw,56px);max-width:920px;letter-spacing:-.054em}
.guide-standfirst{font-size:clamp(15px,1.5vw,19px);max-width:750px;color:var(--ts)}
.guide-layout{max-width:1250px;gap:clamp(26px,4vw,56px)}
.guide-main{min-width:0}
.guide-figure{margin-block:26px}.guide-figure img{border-radius:12px;height:auto}
.guide-meta{font:500 12px/1.5 var(--ff-b);letter-spacing:0}
.guide-table thead th{background:#073b55;color:#fff}
.guide-toc-inline{border-radius:12px}
/* Forms and lead contact pages: reduced visual noise and larger target sizes. */
:where(.form-card,.contact-card,.contact-form){border-radius:16px}
input:not([type="checkbox"]):not([type="radio"]),textarea,select{max-width:100%;border-radius:9px;min-height:44px}
textarea{min-height:120px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:2px solid rgba(2,116,166,.28);outline-offset:1px}
/* Calm footer matching dark editorial call-to-action. */
.site-footer{background:#061d2c;padding:clamp(54px,6vw,80px) var(--pg) 0;color:rgba(228,240,247,.78)}
.footer-grid{gap:clamp(26px,4vw,55px);margin-bottom:42px}
.footer-col h4{font-size:13px;color:#fff;margin-bottom:17px}
.footer-col ul li a{color:rgba(228,240,247,.7);font-size:13px}
.footer-col ul li a:hover{color:#90d8f5}
.footer-desc{color:rgba(228,240,247,.7);line-height:1.7;font-size:13px;max-width:38ch}
.footer-socials a{border:1px solid rgba(255,255,255,.18);border-radius:9px}
.footer-bottom{border-color:rgba(255,255,255,.12)}
.final-cta-section{background:#073b55;overflow:hidden}
/* Scroll-triggered reveals: JS adds classes only when observer is available. */
.motion-ready .motion-item{opacity:0;transform:translate3d(0,17px,0);
 transition:opacity .67s var(--ease-out),transform .67s var(--ease-out);transition-delay:var(--motion-delay,0ms)}
.motion-ready .motion-item.is-visible{opacity:1;transform:none}
/* Rich but lightweight decoration for select page types. */
.page-hero .container:after{content:"✳";position:absolute;right:1%;top:10%;font:400 clamp(70px,13vw,170px)/1 var(--ff-h);
 color:rgba(2,116,166,.065);pointer-events:none;z-index:-1}
[data-theme="dark"] .page-hero .container:after{color:rgba(121,204,245,.08)}
/* Prevent overflow and cramped captions on smaller layouts. */
@media(max-width:1100px){.nav-links{gap:11px}.nav-links a{font-size:11px}.nav-logo-img{max-width:158px}}
@media(max-width:992px){.navbar{height:62px}.nav-actions .btn-sm{font-size:11px;padding:9px 11px}
 .mobile-nav{top:85px}.grid-2{gap:clamp(18px,3vw,35px)}}
@media(max-width:768px){:root{--pg:18px;--sec-y:56px;--sec-y-sm:42px}
 .navbar{top:10px;width:calc(100% - 20px);border-radius:12px;height:59px}.mobile-nav{left:10px;width:calc(100% - 20px);top:79px}
 .nav-logo-img{height:33px;max-width:155px}.page-hero{padding:120px 0 48px}.page-hero h1{font-size:clamp(31px,7vw,46px)}
 .page-hero .breadcrumb{margin-bottom:15px}.page-hero-lead,.page-hero p{font-size:15px}
 .article-hero{padding:116px 0 33px}.article-hero h1{font-size:clamp(29px,6vw,42px)}
 .article-body,.guide-main{font-size:15.5px;line-height:1.85}
 .article-body h2,.guide-main h2{font-size:clamp(22px,5vw,29px)}
 .guide-hero{padding:115px 0 30px}.guide-standfirst{font-size:16px}
 .site-footer{padding-top:51px}.footer-grid{gap:27px}
 .btn{padding:10px 15px;font-size:12px}.btn-lg{font-size:13px}
 main>section[style*="padding:8px"],main>section[style*="padding: 8px"]{padding-top:42px!important;padding-bottom:42px!important}
}
@media(max-width:480px){:root{--pg:16px}.navbar{padding:0 12px}
 .nav-logo-img{height:29px;max-width:132px}.nav-actions{gap:5px}.nav-actions .btn{min-height:34px;font-size:10px;padding:8px}
 .page-hero{padding:112px 0 39px}.page-hero h1{font-size:clamp(29px,8.5vw,40px)}
 .article-hero h1{font-size:clamp(27px,8vw,38px)}.article-meta{font-size:11px}
 .article-body,.guide-main{font-size:15px;line-height:1.85}
 .guide-hero h1{font-size:clamp(28px,8vw,39px)}.guide-table{font-size:12px}
 .site-footer .footer-grid{gap:28px 16px}.btn{white-space:normal;text-align:center}
 .eyebrow{letter-spacing:.07em;font-size:9px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;
 animation-iteration-count:1!important;transition-duration:.01ms!important}
 .motion-ready .motion-item{opacity:1!important;transform:none!important}.motion-item{transition:none!important}}

/* Final contrast and text flow corrections for the light interior hero. */
.page-hero .hero-ctas{position:relative;display:flex;gap:11px;flex-wrap:wrap;margin-top:26px;clear:both}
.page-hero .page-hero-lead{margin-bottom:0;max-width:700px}
.page-hero .hero-sub{max-width:750px}
.page-hero .hero-title{font-size:clamp(34px,4.6vw,62px)!important;letter-spacing:-.055em}
.page-hero.portfolio-hero .portfolio-stats{border-top:1px solid var(--border);gap:20px 35px}
.page-hero.portfolio-hero .pf-stat-value{color:var(--tp)}
.page-hero.portfolio-hero .pf-stat-label{color:var(--ts)}
.article-toc ol,.guide-toc-inline ol,.guide-side-toc ol{list-style:none!important;padding-left:0!important}
.article-toc li,.guide-toc-inline li,.guide-side-toc li{padding-left:0!important}
.article-toc ol li::marker,.guide-side-toc ol li::marker{content:''}
@media(max-width:480px){.page-hero .hero-ctas{gap:10px;margin-top:22px}.page-hero .hero-ctas .btn{flex:1 1 0;min-width:0;padding:10px 7px;font-size:11px}}

/* Top-of-page content is visible immediately; scroll motion belongs to subsequent content. */
.page-hero .hero-title,.page-hero .hero-sub,.page-hero .hero-ctas,
.page-hero .hero-eyebrow{opacity:1!important;animation:none!important;transform:none!important}
.article-toc ol li,.guide-side-toc ol li{display:flex;align-items:baseline;gap:10px}
.article-toc ol li::before,.guide-side-toc ol li::before{flex:0 0 auto;margin-right:0}
.article-toc ol li a,.guide-side-toc ol li a{min-width:0;flex:1}

/* Floating support CTA: intentionally compact on narrow reading layouts. */
.whatsapp-float{box-shadow:0 2px 9px rgba(0,0,0,.13)!important;transition:transform .25s var(--ease-out),box-shadow .25s}
@media(max-width:600px){.whatsapp-float{width:44px!important;height:44px!important;bottom:14px!important;right:12px!important;font-size:20px!important}}