/* SITE WIDE - Technology Reflections, Inc. */

/* Get Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Roboto:Bold,Regular');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:Bold,Regular');
@import url('https://fonts.googleapis.com/css?family=DM+Sans:Bold,Regular');

/* Brand palette pulled from the logo */
:root {
	--tr-blue:    #2E5E93;
	--tr-blue2:   #4A88C4;
	--tr-navy:    #1F4470;
	--tr-orange:  #D9772E;
	--tr-orange2: #E8955A;
	--tr-red:     #C23A2B;
	--tr-red2:    #E2543F;
	--tr-text:    #3A3A3A;
	--tr-gray:    #666666;
	--tr-light:   #F3F6FA;
	--tr-line:    #DDE4EC;
}

HTML { height:100%; }
BODY { background-color: #FFFFFF; color: #3A3A3A; height:100%; font-size: 16px; font-family: DM Sans !important; }

a { color: #2E5E93; }
a:hover{ color:#D9772E; text-decoration:underline; }

.Warn {font-family: DM Sans, Verdana, Arial; font-size:18px; font-weight:bold; color:#C23A2B;}
.BigWarn {font-family: DM Sans, Verdana, Arial; font-size:20px; font-weight:bold; color:#C23A2B;}
.Green {font-family: DM Sans, Verdana, Arial; font-size:18px; color:#2E7D32;}
.Red {font-family: DM Sans, Verdana, Arial; font-size:18px; color:#C23A2B;}
.BoldGreen {font-family: DM Sans, Verdana, Arial; font-size:18px; font-weight:bold; color:#2E7D32;}
.BoldRed {font-family: DM Sans, Verdana, Arial; font-size:18px; font-weight:bold; color:#C23A2B;}
.Fade {font-family: DM Sans, Verdana, Arial; font-size:18px; color:#999999; }

/* CUSTOM */
.TopBar {font-family: DM Sans, Arial; font-size:16px; color: #FFFFFF; font-weight:bold;}
.TopBar A:link {text-decoration: none; color: #FFFFFF;}
.TopBar A:active {text-decoration: none; color: #FFFFFF;}
.TopBar A:visited {text-decoration: none; color: #FFFFFF;}
.TopBar A:hover {text-decoration: underline; color: #E8955A;}

.Sideline {font-family: DM Sans, Verdana, Arial; font-size:18px; color: #2E5E93; font-weight:bold;}
.Sideline A:link {text-decoration: underline; color: #2E5E93;}
.Sideline A:active {text-decoration: underline; color: #2E5E93;}
.Sideline A:visited {text-decoration: underline; color: #2E5E93;}
.Sideline A:hover {text-decoration: none; color: #D9772E;}

.SidelineBold {font-family: DM Sans, Verdana, Arial; font-size:18px; color: #2E5E93; font-weight:bold;}
.SidelineBold A:link {text-decoration: underline; color: #2E5E93;}
.SidelineBold A:active {text-decoration: underline; color: #2E5E93;}
.SidelineBold A:visited {text-decoration: underline; color: #2E5E93;}
.SidelineBold A:hover {text-decoration: none; color: #D9772E;}

.White {font-family: DM Sans, Verdana, Arial; font-size:18px; color: #FFFFFF;}
.White A:link {text-decoration: underline; color: #FFFFFF;}
.White A:active {text-decoration: underline; color: #FFFFFF;}
.White A:visited {text-decoration: underline; color: #FFFFFF;}
.White A:hover {text-decoration: none; color: #E8955A;}

.BoldWhite {font-family: DM Sans, Verdana, Arial; font-size:18px; color: #FFFFFF; font-weight:bold;}
.BoldWhite A:link {text-decoration: underline; color: #FFFFFF;}
.BoldWhite A:active {text-decoration: underline; color: #FFFFFF;}
.BoldWhite A:visited {text-decoration: underline; color: #FFFFFF;}
.BoldWhite A:hover {text-decoration: none; color: #E8955A;}

/* NAVIGATION */

.NavText {font-family: DM Sans, Verdana, Arial; font-size:16px; color:#3A3A3A; font-weight:bold;}
.NavText A {text-decoration: none; color: #2E5E93;}
.NavText A:link {text-decoration: none; color: #2E5E93;}
.NavText A:visited {text-decoration: none; color: #2E5E93;}
.NavText A:hover {text-decoration: underline; color: #D9772E;}

.NavFade {font-family: DM Sans, Verdana, Arial; font-size:16px; color:#999999; font-weight:bold;}
.NavFade A {text-decoration: none; color: #2E5E93;}
.NavFade A:link {text-decoration: none; color: #2E5E93;}
.NavFade A:visited {text-decoration: none; color: #2E5E93;}
.NavFade A:hover {text-decoration: underline; color: #D9772E;}

.UserText {font-family: DM Sans, Verdana, Arial; font-size:18px; color:#3A3A3A;}
.UserText A {text-decoration: none; color: #2E5E93;}
.UserText A:link {text-decoration: none; color: #2E5E93;}
.UserText A:visited {text-decoration: none; color: #2E5E93;}
.UserText A:hover {text-decoration: underline; color: #D9772E;}

/* VIEWS */

.HallTD {font-family: Verdana; font-size:18px; font-weight:bold; color:#3A3A3A; background-color:#EEEEEE;}
.HallBook {font-family: Verdana; font-size:18px; font-weight:bold; color:#FFFFFF; background-color:#2E5E93;}
.HallBook A {font-family: Verdana; font-size:18px; font-weight:bold; color:#FFFFFF; background-color:#2E5E93;}
.CurrentPubRow {background-color:#F3F6FA;}
.AlternatePubRow {background-color:#E6ECF3;}
.IncidentLog {font-family: Verdana; font-size:18px; font-weight:bold; color:#FFFFFF; background-color:#2E5E93;}
.GuestBorder {font-family: Verdana; font-size:18px; color:#FFFFFF; background-color:#2E5E93;}
.GuestBG {background-color:#F3F6FA;}

/* PUBLIC FONTS */

.Headline {font-family: DM Sans, Verdana, Arial; font-size:24px; font-weight:bold; color: #2E5E93;}
.Headline A:link {text-decoration: none; color: #2E5E93;}
.Headline A:active {text-decoration: none; color: #2E5E93;}
.Headline A:visited {text-decoration: none; color: #2E5E93;}
.Headline A:hover {text-decoration: underline; color: #D9772E;}

.Title {font-family: DM Sans, Verdana, Arial; font-size:21px; font-weight:bold; color: #3A3A3A;}
.Title A:link {text-decoration: underline; font-weight:bold; color: #2E5E93;}
.Title A:active {text-decoration: underline; font-weight:bold; color: #2E5E93;}
.Title A:visited {text-decoration: underline; font-weight:bold; color: #2E5E93;}
.Title A:hover {text-decoration: none; font-weight:bold; color: #D9772E;}

.Heading {font-family: DM Sans, Verdana, Arial; font-size:25px; font-weight:bold; color:#3A3A3A;}
.Heading A:link {text-decoration: underline; color:#2E5E93;}
.Heading A:active {text-decoration: underline; color:#2E5E93;}
.Heading A:visited {text-decoration: underline; color:#2E5E93;}
.Heading A:hover {text-decoration: none; color:#D9772E;}

.Regular {font-family: Open Sans, Verdana, Arial; font-size:18px; color:#3A3A3A; line-height: 1.55; }
.Regular A {text-decoration: underline; color: #2E5E93;}
.Regular A:link {text-decoration: underline; color: #2E5E93;}
.Regular A:visited {text-decoration: underline; color: #2E5E93;}
.Regular A:hover {text-decoration: none; color: #D9772E;}

.Bold {font-family: DM Sans, Verdana, Arial; font-size:18px; font-weight:bold; color: #3A3A3A;}
.Bold A:link {text-decoration: underline; color: #2E5E93;}
.Bold A:active {text-decoration: underline; color: #2E5E93;}
.Bold A:visited {text-decoration: underline; color: #2E5E93;}
.Bold A:hover {text-decoration: none; color: #D9772E;}

.Small {font-family: DM Sans, Verdana, Arial; font-size:16px; color:#3A3A3A; }
.Small A {text-decoration: underline; color: #2E5E93;}
.Small A:link {text-decoration: underline; color: #2E5E93;}
.Small A:visited {text-decoration: underline; color: #2E5E93;}
.Small A:hover {text-decoration: none; color: #D9772E;}

.SmallBold {font-family: DM Sans, Verdana, Arial; font-size:16px; font-weight:bold; color:#3A3A3A; }
.SmallBold A {text-decoration: underline; color: #2E5E93;}
.SmallBold A:link {text-decoration: underline; color: #2E5E93;}
.SmallBold A:visited {text-decoration: underline; color: #2E5E93;}
.SmallBold A:hover {text-decoration: none; color: #D9772E;}

.StatsBoxTable {width:93%; border:1px;}
.StatsBoxTitle {font-family: DM Sans, Verdana, Arial; font-size:18px; font-weight:bold; color: #FFFFFF; background-color:#2E5E93}
.StatsBoxCell {font-family: DM Sans, Verdana, Arial; font-size:18px; font-weight:bold; color: #3A3A3A; background-color:rgba(46, 94, 147, 0.08);}

/* FORM STYLES */

.fsField {font-family:DM Sans, Verdana, Arial; font-size:18px; color:#3A3A3A; font-weight:normal; border:1px solid #C9D3DE; border-radius:4px; padding:6px 8px; background-color:#FFFFFF; }
.fsField:focus {outline:none; border-color:#4A88C4; box-shadow:0 0 0 3px rgba(74,136,196,0.2); }
.fsButton {font-family:DM Sans, Verdana, Arial; font-size:18px; color:#FFFFFF; font-weight:bold; background-color:#2E5E93; border-width:1px; border-style:solid; border-color:#1F4470; border-radius:4px; padding:8px 18px; cursor:pointer; }
.fsButton:hover {background-color:#D9772E; border-color:#C23A2B; }

/* ====================================================================
   TECHNOLOGY REFLECTIONS - corporate page components
   ==================================================================== */

/* Page content typography (white background, dark gray text) */
.tr-page { color: #3A3A3A; line-height: 1.6; font-size: 18px; font-family: 'Open Sans', DM Sans, Verdana, Arial; }
.tr-page h1, .tr-page h2, .tr-page h3 { font-family: DM Sans, Verdana, Arial; color: #2E5E93; margin: 0 0 12px 0; line-height: 1.2; }
.tr-page h1 { font-size: 38px; }
.tr-page h2 { font-size: 28px; }
.tr-page h3 { font-size: 21px; color: #3A3A3A; }
.tr-page p { margin: 0 0 16px 0; }
.tr-page ul { margin: 0 0 16px 22px; padding: 0; }
.tr-page li { margin-bottom: 6px; }

/* Section wrapper */
.tr-section { padding: 40px 0; }
.tr-section.alt { background-color: #F3F6FA; }
.tr-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }

/* Section heading with the tri-color accent bar */
.tr-title { font-family: DM Sans, Verdana, Arial; font-size: 32px; font-weight: bold; color: #2E5E93; text-align: center; margin: 0 0 8px 0; }
.tr-subtitle { font-family: 'Open Sans', DM Sans, Verdana, Arial; font-size: 18px; color: #666666; text-align: center; max-width: 820px; margin: 0 auto 26px auto; line-height: 1.5; }
.tr-bar { width: 120px; height: 4px; margin: 0 auto 22px auto; border-radius: 2px;
	background: linear-gradient(90deg, #2E5E93 0%, #4A88C4 33%, #D9772E 66%, #C23A2B 100%); }
.tr-bar.left { margin-left: 0; }

/* Eyebrow label */
.tr-eyebrow { font-family: DM Sans, Verdana, Arial; font-size: 14px; letter-spacing: 3px; text-transform: uppercase; color: #D9772E; font-weight: bold; margin-bottom: 8px; }

/* Buttons */
.tr-btn { display: inline-block; font-family: DM Sans, Verdana, Arial; font-size: 17px; font-weight: bold; color: #FFFFFF !important; background: linear-gradient(180deg, #4A88C4 0%, #2E5E93 100%);
	padding: 12px 28px; border-radius: 6px; text-decoration: none !important; border: 1px solid #1F4470; box-shadow: 0 4px 12px rgba(46,94,147,0.25); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.tr-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(46,94,147,0.35); background: linear-gradient(180deg, #E8955A 0%, #D9772E 100%); border-color: #C23A2B; }
.tr-btn.ghost { background: #FFFFFF; color: #2E5E93 !important; border: 2px solid #2E5E93; box-shadow: none; }
.tr-btn.ghost:hover { background: #F3F6FA; color: #1F4470 !important; }

/* Card grid (services, values, etc.) */
.tr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tr-grid.two { grid-template-columns: repeat(2, 1fr); }
.tr-grid.four { grid-template-columns: repeat(4, 1fr); }
.tr-card { background: #FFFFFF; border: 1px solid #DDE4EC; border-radius: 10px; padding: 26px 24px; box-shadow: 0 2px 10px rgba(31,68,112,0.06); position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.tr-card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(31,68,112,0.14); }
.tr-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: linear-gradient(90deg, #2E5E93, #4A88C4 40%, #D9772E 75%, #C23A2B); }
.tr-card .icon { width: 64px; height: 64px; margin-bottom: 14px; }
.tr-card .icon svg { width: 64px; height: 64px; display: block; }
.tr-card h3 { font-family: DM Sans, Verdana, Arial; font-size: 21px; color: #2E5E93; margin: 0 0 10px 0; }
.tr-card p { font-family: 'Open Sans', DM Sans, Verdana, Arial; font-size: 16px; color: #3A3A3A; line-height: 1.55; margin: 0; }

/* Stats band */
.tr-stats { background: linear-gradient(135deg, #1F4470 0%, #2E5E93 55%, #4A88C4 100%); color: #FFFFFF; position: relative; overflow: hidden; }
.tr-stats .tr-inner { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 20px; position: relative; z-index: 1; }
.tr-stat { text-align: center; flex: 1 1 200px; padding: 10px; }
.tr-stat .num { font-family: DM Sans, Verdana, Arial; font-size: 46px; font-weight: bold; color: #FFFFFF; line-height: 1; }
.tr-stat .num span { color: #E8955A; }
.tr-stat .lbl { font-family: 'Open Sans', DM Sans, Verdana, Arial; font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-top: 8px; }

/* Two column feature row (text + graphic) */
.tr-split { display: flex; align-items: center; gap: 40px; }
.tr-split > div { flex: 1 1 0; min-width: 0; }
.tr-split img, .tr-split svg { max-width: 100%; height: auto; display: block; }
.tr-split.rev { flex-direction: row-reverse; }

/* Check list */
.tr-checks { list-style: none; margin: 0 0 16px 0 !important; padding: 0; }
.tr-checks li { position: relative; padding-left: 34px; margin-bottom: 10px; font-size: 17px; }
.tr-checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%;
	background: linear-gradient(135deg, #4A88C4, #2E5E93); }
.tr-checks li::after { content: ""; position: absolute; left: 8px; top: 7px; width: 5px; height: 10px; border: solid #FFFFFF; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

/* Water reflection effect - mirrors the element below itself and fades */
.tr-reflect { -webkit-box-reflect: below 2px linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,0.28)); }

/* Fly-in animations. Elements start hidden and animate when .in is added
   (IntersectionObserver in the header script). If JS is unavailable the
   .no-js fallback keeps everything visible. */
.fly { opacity: 0; transition: opacity .8s ease, transform .8s cubic-bezier(.22,.9,.3,1); will-change: opacity, transform; }
.fly.left  { transform: translateX(-80px); }
.fly.right { transform: translateX(80px); }
.fly.up    { transform: translateY(60px); }
.fly.down  { transform: translateY(-60px); }
.fly.zoom  { transform: scale(.85); }
.fly.in    { opacity: 1; transform: none; }
.fly.d1 { transition-delay: .12s; } .fly.d2 { transition-delay: .24s; } .fly.d3 { transition-delay: .36s; }
.fly.d4 { transition-delay: .48s; } .fly.d5 { transition-delay: .60s; } .fly.d6 { transition-delay: .72s; }
html.no-js .fly { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fly { transition: none; opacity: 1; transform: none; } }

/* Quote / testimonial */
.tr-quote { background: #FFFFFF; border-left: 5px solid #D9772E; padding: 18px 22px; border-radius: 0 8px 8px 0; font-style: italic; color: #3A3A3A; box-shadow: 0 2px 10px rgba(31,68,112,0.06); }
.tr-quote .who { display: block; margin-top: 10px; font-style: normal; font-weight: bold; font-size: 15px; color: #2E5E93; }

/* Contact cards: wider middle column so email addresses stay on one line at
   full width. Below 1100px the text may wrap normally. */
.tr-contact-grid { grid-template-columns: 1fr 1.7fr 1fr; }
@media screen and (min-width: 1100px) {
	.tr-nowrap { white-space: nowrap; }
}

/* Responsive */
@media screen and (max-width: 900px) {
	.tr-contact-grid { grid-template-columns: repeat(2, 1fr); }
	.tr-grid, .tr-grid.four { grid-template-columns: repeat(2, 1fr); }
	.tr-split, .tr-split.rev { flex-direction: column; }
}
@media screen and (max-width: 600px) {
	.tr-grid, .tr-grid.two, .tr-grid.four, .tr-contact-grid { grid-template-columns: 1fr; }
	.tr-title { font-size: 26px; }
	.tr-page h1 { font-size: 30px; }
	.tr-stat .num { font-size: 36px; }
}