/* TimeRolling front-end refresh 04: isolated public presentation layer. */
:root { --tr-red:#e31b23; --tr-yellow:#ffc400; --tr-charcoal:rgb(74, 74, 74); --tr-gray:#f4f4f4; --tr-line:#e6e6e6; --tr-copy:rgb(74, 74, 74); }
* { box-sizing:border-box; }
html, body { margin:0 !important; padding:0 !important; background:#fff; color:var(--tr-charcoal); font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:1.55; }
body { min-width:0; }
img { max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--tr-red); }
.tr-shell { width:min(1180px, calc(100% - 48px)); margin:0 auto; }
body > .tr-site-header { display:block; margin:0 !important; padding:0 !important; top:0 !important; }
.tr-site-header { background:#fff; border-bottom:1px solid var(--tr-line); position:relative; z-index:5; }
.tr-utility { height:34px; background:#f3f3f3; color:#555; font-size:12px; }
.tr-utility .tr-shell { height:34px; display:flex; align-items:center; justify-content:flex-end; gap:11px; }
.tr-globe { font-size:15px; color:rgb(74, 74, 74); }
.tr-utility-separator { color:#aaa; }
.tr-main-nav { min-height:78px; display:flex; align-items:center; gap:28px; }
.tr-brand { width:192px; display:block; flex:0 0 auto; }
.tr-brand img { display:block; width:100%; height:46px; object-fit:contain; object-position:left center; }
.tr-nav { display:flex; align-self:stretch; align-items:center; justify-content:center; gap:28px; flex:1; }
.tr-nav a { height:78px; display:flex; align-items:center; position:relative; white-space:nowrap; font-size:14px; font-weight:600; color:rgb(74, 74, 74); }
.tr-nav a:hover { color:var(--tr-red); }
.tr-nav a.active { color:var(--tr-red) !important; }
.tr-nav a.active::after { content:""; display:block; position:absolute; height:4px; left:0; right:0; bottom:0; background:var(--tr-red); }
/* Keep previously generated static pages in sync with the revised navigation. */
.tr-nav a:nth-child(3)[href="/product/"] { display:none; }
.tr-nav a[href="/Time-Rolling/"] { font-size:0; }
.tr-nav a[href="/Time-Rolling/"]::before { content:"Who we are"; font-size:14px; }
.tr-quote, .tr-button { display:inline-flex; align-items:center; justify-content:center; border-radius:5px; letter-spacing:.01em; font-size:12px; font-weight:700; }
.tr-quote { background:var(--tr-yellow); color:rgb(74, 74, 74); padding:11px 14px; white-space:nowrap; }
.tr-quote:hover, .tr-button:hover { background:var(--tr-red); color:#fff; }
.tr-home { overflow:hidden; color:rgb(74, 74, 74); }
.tr-hero { min-height:480px; background:linear-gradient(90deg, rgba(255,246,231,.76) 0%, rgba(255,246,231,.28) 50%, rgba(134,82,34,.10) 100%), url('/static/images/timerolling-refinery-hero-hd.png') center center/cover no-repeat; display:flex; align-items:center; }
.tr-hero-inner { display:flex; align-items:center; min-height:480px; }
.tr-hero-copy { max-width:530px; padding:46px 0; }
.tr-hero h1 { margin:0 0 18px; font-size:clamp(34px, 4vw, 54px); letter-spacing:-.04em; line-height:1.04; color:rgb(74, 74, 74); }
.tr-hero p { max-width:455px; margin:0 0 26px; color:rgb(74, 74, 74); font-size:16px; font-weight:500; }
.tr-button-yellow { min-width:124px; padding:12px 16px; background:var(--tr-yellow); color:rgb(74, 74, 74); }
.tr-section { padding:66px 0; }
.tr-section-heading { text-align:center; margin-bottom:30px; }
.tr-section-heading h2 { margin:0; font-size:29px; line-height:1.18; letter-spacing:-.03em; }
.tr-section-heading p { margin:7px auto 0; color:#666; font-size:14px; }
.tr-section-heading-left { text-align:left; }
.tr-business { background:#fff; }
.tr-business-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.tr-business-card, .tr-product-card, .tr-interest-grid article { background:#fff; border:1px solid var(--tr-line); border-radius:9px; overflow:hidden; box-shadow:0 5px 18px rgba(0,0,0,.04); position:relative; }
.tr-card-image { display:block; aspect-ratio:1.48; overflow:hidden; background:#e9e9e9; }
.tr-card-image img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.tr-business-card:hover img, .tr-product-card:hover img, .tr-interest-grid article:hover img { transform:scale(1.03); }
.tr-card-body { padding:18px 18px 38px; min-height:155px; }
.tr-card-body h3, .tr-product-card h3, .tr-interest-grid h3 { margin:0 0 8px; font-size:17px; line-height:1.25; }
.tr-card-body p, .tr-product-card p, .tr-interest-grid p { margin:0; color:#666; font-size:13px; }
.tr-card-arrow { position:absolute; right:17px; bottom:13px; color:var(--tr-red); font-size:24px; line-height:1; }
.tr-benefits { background:#f7f7f7; border-top:1px solid #ededed; border-bottom:1px solid #ededed; }
.tr-benefit-grid { display:grid; grid-template-columns:repeat(4, 1fr); }
.tr-benefit { min-height:112px; padding:25px 20px; display:flex; align-items:center; gap:14px; border-right:1px solid #dedede; }
.tr-benefit:last-child { border-right:0; }
.tr-benefit-icon { color:var(--tr-red); font-size:32px; line-height:1; }
.tr-benefit strong, .tr-benefit small { display:block; }
.tr-benefit strong { font-size:14px; }
.tr-benefit small { color:#555; line-height:1.35; font-size:12px; margin-top:3px; }
.tr-products { background:linear-gradient(180deg,#fafafa 0,#fff 100%); }
.tr-product-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; }
.tr-product-card { padding:14px 14px 18px; }
.tr-product-card > a { display:block; background:#fff; aspect-ratio:1.15; overflow:hidden; }
.tr-product-card img { display:block; width:100%; height:100%; object-fit:contain; }
.tr-product-card h3 { margin-top:13px; }
.tr-news { padding-top:52px; }
.tr-news-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.tr-news-card { min-height:145px; background:#f5f5f5; border-radius:8px; padding:22px 19px; }
.tr-news-card h3 { margin:0 0 24px; font-size:15px; line-height:1.35; text-decoration:underline; }
.tr-news-card time { color:#666; font-size:12px; }
.tr-interest { padding-top:30px; padding-bottom:52px; }
.tr-interest-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; border-bottom:11px solid #f3f3f3; padding-bottom:14px; }
.tr-interest-grid article img { display:block; width:100%; aspect-ratio:1.9; object-fit:cover; }
.tr-interest-grid h3, .tr-interest-grid p { margin-left:16px; margin-right:16px; }
.tr-interest-grid h3 { margin-top:13px; }
.tr-interest-grid p { margin-bottom:18px; }
.tr-site-footer { margin-top:58px; background:#fff; border-top:1px solid #e4e4e4; color:rgb(74, 74, 74); }
.tr-footer-grid { padding:45px 0 30px; display:grid; grid-template-columns:1.2fr 1.35fr 1fr; gap:50px; }
.tr-footer-grid > * + * { border-left:1px solid #dedede; padding-left:43px; }
.tr-footer-promise { font-size:17px; line-height:1.35; }
.tr-footer-promise strong { font-weight:700; }
.tr-footer-grid h2 { font-size:16px; margin:0 0 10px; }
.tr-footer-links a, .tr-footer-social a { display:block; color:rgb(74, 74, 74); font-size:12px; line-height:2.1; }
.tr-footer-social a { margin-bottom:4px; }
.tr-footer-copy { border-top:1px solid #e1e1e1; text-align:center; color:rgb(74, 74, 74); padding:13px 24px; font-size:12px; }
/* Existing content pages: keep every content element and link, improve reading width and hierarchy. */
.w { width:min(1180px, calc(100% - 48px)) !important; margin-left:auto !important; margin-right:auto !important; }
.w > .l1 { width:250px; margin:38px 34px 55px 0; background:#f5f5f5; border-radius:8px; padding:18px; }
.l1 .l2, .l1 .l3 { display:block; float:none; width:auto; min-height:0; background:none !important; padding:8px 4px !important; color:rgb(74, 74, 74); font-size:14px; line-height:1.3; }
.l1 .l2 { font-weight:700; border-bottom:1px solid #ddd; }
.l1 .l3 { padding-left:13px !important; color:#5a5a5a; }
.s1 { width:calc(100% - 284px); margin:38px 0 55px; font-size:15px; }
.s1 img { max-width:100%; height:auto; }
.s1 [style*="color:#000000"], .s1 [style*="color: #000000"], .s1 [style*="color:#000;"], .s1 [style*="color: #000;"] { color:rgb(74, 74, 74) !important; }
.s2 { border-bottom:1px solid #e5e5e5; color:#666; font-size:13px; line-height:1.5; margin-bottom:22px; padding-bottom:12px; }
.s5, .s8_1, .l { color:rgb(74, 74, 74) !important; font-size:18px !important; font-weight:700 !important; }
.s6 { width:100%; min-height:168px; border-bottom:1px solid #e5e5e5; padding:18px 0; }
.s7 { width:174px; height:130px; object-fit:cover; border:0 !important; border-radius:6px; }
.s8 { width:calc(100% - 200px); margin-left:24px; }
.s8_2, .s9_2 { color:#666; font-size:14px; line-height:1.6; margin-top:8px; }
.tab_con { margin:0; padding:0; list-style:none; }
.tab_con > li { display:block !important; }
.tab_con > li:nth-child(2) { display:none !important; }
#pages a, #pages span { display:inline-block; border:1px solid #e1e1e1 !important; border-radius:4px; color:rgb(74, 74, 74); margin:4px !important; padding:6px 10px !important; }
@media (max-width:980px) { .tr-main-nav { gap:16px; } .tr-brand { width:168px; } .tr-nav { gap:15px; } .tr-nav a { font-size:13px; } .tr-quote { display:none; } .tr-business-grid, .tr-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .tr-benefit-grid { grid-template-columns:repeat(2,1fr); } .tr-benefit:nth-child(2) { border-right:0; } .tr-footer-grid { gap:25px; } }
@media (max-width:680px) { .tr-shell, .w { width:calc(100% - 30px) !important; } .tr-utility { height:30px; } .tr-utility .tr-shell { height:30px; gap:7px; font-size:11px; } .tr-main-nav { min-height:64px; flex-wrap:wrap; padding:10px 0; } .tr-brand { width:155px; } .tr-brand img { height:34px; } .tr-nav { order:3; width:100%; overflow:auto; justify-content:flex-start; gap:18px; } .tr-nav a { height:34px; font-size:12px; } .tr-nav a.active::after { height:3px; } .tr-hero, .tr-hero-inner { min-height:390px; } .tr-hero { background-position:60% center; } .tr-hero h1 { font-size:36px; } .tr-hero p { font-size:14px; max-width:340px; } .tr-section { padding:45px 0; } .tr-section-heading h2 { font-size:25px; } .tr-business-grid, .tr-product-grid, .tr-news-grid, .tr-interest-grid { grid-template-columns:1fr; } .tr-benefit-grid { grid-template-columns:1fr; } .tr-benefit { min-height:84px; border-right:0; border-bottom:1px solid #dedede; } .tr-footer-grid { grid-template-columns:1fr; padding:36px 0 23px; } .tr-footer-grid > * + * { border-left:0; border-top:1px solid #dedede; padding-left:0; padding-top:24px; } .w > .l1, .s1 { float:none; width:100%; margin:28px 0; } .s7 { float:none; width:100%; height:auto; } .s8 { width:100%; margin:15px 0 0; } }