/* Rheintherm F-Dual Frame brand system */
:root{
  --frame-orange:#f07800;
  --frame-orange-bright:#ff9a00;
  --frame-blue:#00a3e0;
  --frame-slate:#475665;
}

body:before{
  background:
    linear-gradient(90deg,rgba(240,120,0,.025) 1px,transparent 1px),
    linear-gradient(rgba(0,163,224,.02) 1px,transparent 1px),
    radial-gradient(circle at 86% 9%,rgba(0,163,224,.12),transparent 27%),
    radial-gradient(circle at 8% 64%,rgba(240,120,0,.1),transparent 30%);
  background-size:72px 72px,72px 72px,auto,auto;
}

.topbar{border-bottom:1px solid rgba(255,255,255,.08);background:#050c14;color:#91a2b0;font-size:.73rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.topbar-inner{height:34px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.topbar-inner div{display:flex;align-items:center;gap:13px}
.topbar a{color:#dfe8ee;transition:color .2s ease}
.topbar a:hover{color:#fff}

.site-header{background:rgba(7,17,28,.94);box-shadow:0 12px 36px rgba(0,0,0,.16)}
.nav{height:90px;gap:20px}
.brand-header{flex:0 1 292px;min-width:240px}
.brand-header .brand-full{width:292px;height:auto;max-height:72px;object-fit:contain;object-position:left center;border-radius:0}
.brand-header .brand-mark,.brand-mobile-name{display:none}
.nav-links{gap:18px}
.nav-links a{font-size:.82rem;letter-spacing:.01em}
.nav-links a.active:after{height:3px;background:linear-gradient(90deg,var(--frame-orange) 0 46%,var(--frame-blue) 46% 82%,var(--frame-slate) 82%)}
.nav-cta{white-space:nowrap;padding:13px 18px}
.menu-button{width:46px;height:42px;padding:10px;place-items:center;gap:5px}
.menu-button span{display:block;width:22px;height:2px;background:#fff;border-radius:2px}

.btn{border-radius:10px;position:relative;overflow:hidden}
.btn-primary{background:linear-gradient(112deg,var(--frame-orange),var(--frame-orange-bright));color:#160d05}
.btn-primary:after{content:"";position:absolute;right:0;top:0;width:5px;height:100%;background:var(--frame-blue);opacity:.9}
.btn-outline{border-color:rgba(255,255,255,.28);background:rgba(10,25,38,.74)}
.btn-outline:hover{border-color:var(--frame-blue);box-shadow:0 10px 30px rgba(0,163,224,.12)}

.eyebrow{color:#ffbd68}
.eyebrow:before{height:3px;background:linear-gradient(90deg,var(--frame-orange) 0 52%,var(--frame-blue) 52%)}
.gradient-text{background:linear-gradient(96deg,#fff 4%,#ffbd68 48%,#35c5fa 82%);-webkit-background-clip:text;background-clip:text;color:transparent}

.hero{min-height:calc(100vh - 124px);isolation:isolate}
.hero:before{content:"";position:absolute;z-index:-1;right:-68px;top:50px;width:min(38vw,520px);aspect-ratio:1;background:url("rheintherm-mark-dark.svg") center/contain no-repeat;opacity:.035;transform:rotate(-5deg);pointer-events:none}
.hero-grid{grid-template-columns:1.08fr .92fr}
.hero-art{border-radius:6px 32px 6px 32px;border-color:rgba(255,255,255,.18)}
.hero-art:before{content:"";position:absolute;z-index:3;left:0;top:0;width:38%;height:8px;background:var(--frame-orange)}
.hero-art:after{background:linear-gradient(180deg,transparent 28%,rgba(7,17,28,.97));border-right:8px solid var(--frame-blue)}
.hero-badge{border-radius:4px 18px 4px 18px;border-left:4px solid var(--frame-orange);border-right:4px solid var(--frame-blue)}

.page-hero{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(118deg,rgba(240,120,0,.11),transparent 44%,rgba(0,163,224,.1))}
.page-hero:after{content:"";position:absolute;z-index:-1;right:4vw;top:50%;width:330px;aspect-ratio:1;background:url("rheintherm-mark-dark.svg") center/contain no-repeat;opacity:.06;transform:translateY(-50%)}
.page-hero:before{content:"";position:absolute;left:0;bottom:0;width:100%;height:4px;background:linear-gradient(90deg,var(--frame-orange) 0 34%,var(--frame-blue) 34% 68%,var(--frame-slate) 68%)}

.card{border-radius:6px 24px 6px 24px}
.card:hover{border-color:rgba(240,120,0,.52);box-shadow:0 18px 44px rgba(0,0,0,.24),inset 4px 0 0 rgba(240,120,0,.8)}
.card.blue:hover{box-shadow:0 18px 44px rgba(0,0,0,.24),inset 4px 0 0 rgba(0,163,224,.9)}
.service-card{border-top:5px solid var(--frame-orange)}
.service-card.blue{border-top-color:var(--frame-blue)}
.service-card:nth-child(3){border-top-color:var(--frame-slate)}
.service-card a{color:#fff;border-bottom:2px solid currentColor;width:max-content;padding-bottom:3px}

.band{position:relative;border-radius:5px 25px 5px 25px;overflow:hidden}
.band:before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:linear-gradient(180deg,var(--frame-orange) 0 50%,var(--frame-blue) 50%)}
.media{border-radius:5px 28px 5px 28px}
.compare,.calculator,.contact-card,.map{border-radius:5px 26px 5px 26px}
.calculator{border-top:5px solid var(--frame-orange);border-right:5px solid var(--frame-blue)}
.progress span{background:linear-gradient(90deg,var(--frame-orange),var(--frame-orange-bright) 68%,var(--frame-blue))}
.choice{border-radius:4px 14px 4px 14px}
.choice:hover,.choice.selected{box-shadow:inset 4px 0 0 var(--frame-orange)}
.form-notice{margin:18px 0;padding:14px 16px;border-radius:5px 16px 5px 16px;font-weight:700}
.form-notice.success{color:#d9ffe8;background:rgba(30,170,95,.15);border:1px solid rgba(65,220,130,.42)}
.form-notice.error{color:#ffe4dd;background:rgba(255,74,37,.13);border:1px solid rgba(255,111,75,.42)}

.footer{position:relative;background:#050c14}
.footer-brand-rail{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:44px}
.footer-brand-rail i{display:block;height:5px;border-radius:5px;background:var(--frame-orange)}
.footer-brand-rail i:nth-child(2){background:var(--frame-blue)}
.footer-brand-rail i:nth-child(3){background:var(--frame-slate)}
.footer-grid{grid-template-columns:1.4fr .7fr .7fr 1fr}
.footer-brand{display:block;max-width:385px}
.footer-brand img{width:100%;height:auto;max-height:none;object-fit:contain;border-radius:0}
.footer-identity p{max-width:390px;margin-top:22px}
.footer a:hover{color:#fff}

@media(max-width:1180px){
  .brand-header{flex-basis:245px;min-width:220px}
  .brand-header .brand-full{width:245px}
  .nav-links{gap:13px}
  .nav-links a{font-size:.77rem}
  .nav-cta{display:none}
}

@media(max-width:980px){
  .nav{height:78px}
  .nav-links{top:118px}
  .brand-header{flex:0 1 auto;min-width:0}
  .brand-header .brand-full{display:none}
  .brand-header .brand-mark{display:block;width:54px;height:54px;object-fit:contain;border-radius:0}
  .brand-mobile-name{display:block;font-size:1.15rem;font-weight:900;letter-spacing:.035em;color:#fff}
  .menu-button{display:grid}
  .hero{min-height:auto}
}

@media(max-width:640px){
  .topbar-inner{justify-content:center;height:30px}
  .topbar-inner>span,.topbar-inner div span,.topbar-inner a:last-child{display:none}
  .nav{height:72px}
  .nav-links{top:103px}
  .brand-header .brand-mark{width:47px;height:47px}
  .brand-mobile-name{font-size:1rem}
  .page-hero:after{right:-100px;width:270px}
  .footer-brand{max-width:310px}
  .footer-brand-rail{margin-bottom:34px}
}
.rt-trap{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
