@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/manrope-latin-ext-variable-v20.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/manrope-latin-variable-v20.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Sora';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/sora-latin-ext-variable-v17.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Sora';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/sora-latin-variable-v17.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} :root{--navy:#202341;--blue:#2375b8;--red:#d8192a;--ink:#22263c;--muted:#626a78;--line:#e1e5e9;--paper:#fbfcfd;--pale:#edf3f8;--font:'Manrope',Arial,sans-serif} *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:116px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:15px;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}img{display:block;max-width:100%}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-weight:650}p{line-height:1.8}a,button{touch-action:manipulation}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:5px}input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px}::selection{background:#cfe6f8;color:var(--navy)}[hidden]{display:none!important}.container{width:min(1280px,calc(100% - 112px));margin-inline:auto}.section{padding-top:112px;padding-bottom:112px}.icon{display:block;width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:-70px;left:20px;z-index:50;background:white;padding:16px;border:2px solid var(--blue)}.skip-link:focus{top:10px}.topline{background:var(--navy);color:#fff}.topline-inner{display:flex;align-items:center;justify-content:space-between;height:36px;font-size:10px;font-weight:600;letter-spacing:1.1px}.topline-inner>span:first-child{display:flex;align-items:center;gap:9px}.topline-inner>span:nth-child(2){color:#bfc4d7;font-size:11px;font-weight:400;letter-spacing:.1px}.topline a{display:flex;align-items:center;gap:10px;letter-spacing:.6px}.topline .icon{width:14px;height:14px}.status-dot{width:6px;height:6px;background:#62acd9;border-radius:50%;display:inline-block;flex:none}.header{position:sticky;top:0;z-index:20;background:rgba(251,252,253,.96);transition:box-shadow .3s;backdrop-filter:blur(18px)}.header.scrolled{box-shadow:0 3px 24px #20234108}.nav-wrap{height:105px;display:flex;align-items:center;justify-content:space-between;gap:30px}.brand{flex:none}.brand img{width:138px;height:84px;object-fit:contain}.navigation{display:flex;align-items:center;gap:31px}.navigation a{font-size:12px;font-weight:650;position:relative;padding-block:15px;white-space:nowrap}.navigation a:after{content:'';position:absolute;bottom:8px;left:0;width:0;height:2px;background:var(--blue);transition:width .25s}.navigation a:hover:after{width:100%}.button{min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:25px;padding:15px 24px;border:0;border-radius:7px;font-size:12px;font-weight:750;transition:background .25s,transform .25s,box-shadow .25s}.button .icon{width:19px;height:19px}.button:hover{transform:translateY(-2px)}.button-nav{min-height:45px;padding:12px 19px;background:var(--navy);color:#fff;gap:20px;font-size:11px}.button-nav:hover{background:var(--blue)}.button-red{background:var(--red);color:white;box-shadow:0 7px 20px #d8192a13}.button-red:hover{background:#bd1524;box-shadow:0 8px 20px #d8192a26}.button-white{background:white;color:var(--navy)}.button-white:hover{background:#dfeefa}.menu-toggle{display:none;background:none;border:0;width:42px;height:42px;position:relative}.menu-toggle span{position:absolute;width:24px;height:2px;background:var(--navy);left:9px;top:15px;transition:transform .2s}.menu-toggle span+span{top:24px}.menu-toggle[aria-expanded=true] span{transform:translateY(4.5px) rotate(45deg)}.menu-toggle[aria-expanded=true] span+span{transform:translateY(-4.5px) rotate(-45deg)} .hero{display:grid;grid-template-columns:1fr 1.04fr;gap:62px;padding-top:33px;padding-bottom:62px;align-items:center}.eyebrow{display:flex;align-items:center;gap:11px;font-size:10px;font-weight:750;letter-spacing:1.9px;line-height:1.5;color:var(--navy)}.eyebrow-line{width:27px;height:2px;display:block;background:var(--red);flex:none}.hero h1{font-size:clamp(54px,5.1vw,76px);letter-spacing:-3.8px;line-height:1.1;margin-top:28px}.hero h1 span,h2 span{color:var(--blue)}.hero-description{font-size:15px;line-height:1.9;color:#626a78;max-width:435px;margin-top:27px}.hero-actions{display:flex;align-items:center;gap:27px;margin-top:31px}.text-link{display:inline-flex;align-items:center;gap:13px;font-size:12px;font-weight:750;transition:color .2s}.text-link .icon{width:17px;height:17px;transition:transform .2s}.text-link:hover{color:var(--blue)}.text-link:hover .icon{transform:translate(2px,-2px)}.hero-note{display:flex;align-items:center;gap:15px;margin-top:58px}.mini-symbol{height:43px;width:43px;background:#eaf2f9;border-radius:50%;display:grid;place-items:center;color:var(--blue)}.mini-symbol .icon{height:22px;width:22px}.hero-note strong,.hero-note span:not(.mini-symbol){display:block}.hero-note strong{font-size:12px;font-weight:700;margin-bottom:4px}.hero-note div>span{font-size:10px;color:var(--muted)}.hero-visual{height:560px;position:relative;border-radius:25px;overflow:hidden;background:#e8e7e2}.hero-visual>img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}.photo-badge{position:absolute;top:23px;left:23px;padding:12px 15px;background:#ffffffeb;border:1px solid #fff;border-radius:5px;display:flex;align-items:center;gap:9px;font-size:8px;font-weight:800;letter-spacing:1.4px;backdrop-filter:blur(12px)}.photo-badge .status-dot{background:var(--blue)}.photo-caption{position:absolute;left:22px;right:22px;bottom:22px;border:1px solid #fff7;background:#fffdf1ec;backdrop-filter:blur(16px);padding:19px 20px;border-radius:11px;display:flex;gap:15px;align-items:center}.caption-icon{width:43px;height:43px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--blue);flex:none}.caption-icon .icon{height:24px;width:24px}.photo-caption div:nth-child(2){flex:1}.photo-caption span{font-size:8px;letter-spacing:1.3px;font-weight:650;color:#626a78;display:block;margin-bottom:6px}.photo-caption strong{font-size:16px;letter-spacing:-.5px;font-weight:650}.photo-caption>.icon{height:21px;width:21px;color:var(--blue)} .value-strip{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line);padding:25px 0;gap:20px}.value-strip>div{display:flex;align-items:center;justify-content:center;gap:15px;font-size:12px;font-weight:650;border-right:1px solid var(--line)}.value-strip>div:last-child{border:0}.value-strip .icon{color:var(--blue);height:23px;width:23px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:60px;margin-bottom:48px}.section-heading h2,h2{font-size:clamp(34px,3.3vw,47px);letter-spacing:-1.8px;line-height:1.22;margin-top:20px}.section-heading>p{width:345px;max-width:40%;font-size:13px;color:var(--muted);padding-bottom:6px}.solution-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:51px;align-items:start}.solution-selector{padding-top:5px}.solution-tab{background:transparent;border:0;border-bottom:1px solid var(--line);width:100%;display:flex;align-items:center;text-align:left;gap:20px;padding:27px 15px 27px 0;transition:background .3s,padding .3s;border-radius:0;color:var(--ink)}.solution-tab.active{background:#edf3f8;border-radius:10px;border-color:transparent;padding-left:21px;padding-right:22px}.tab-number{align-self:flex-start;font-size:10px;color:#626a78;line-height:26px;font-weight:700}.active .tab-number{color:var(--blue)}.tab-copy{flex:1}.tab-copy strong{display:block;font-size:19px;font-weight:650;letter-spacing:-.6px}.tab-copy>span{display:block;font-size:11px;color:var(--muted);margin-top:10px}.solution-tab>.icon{width:23px;height:23px;color:#8e99a8;transition:transform .25s}.solution-tab.active>.icon{color:var(--blue)}.solution-tab:hover>.icon{transform:translate(2px,-2px)}.selector-help{display:flex;gap:14px;margin-top:34px;padding-right:30px;color:var(--muted)}.selector-help .icon{color:var(--blue);margin-top:4px;width:22px;height:22px}.selector-help p{font-size:11px}.selector-help a{color:var(--navy);display:block;text-decoration:underline;text-underline-offset:4px}.solution-showcase{border-radius:16px;overflow:hidden;background:#edf3f8;border:1px solid #e8edf1}.product-visual{height:285px;position:relative;background:var(--pale);overflow:hidden}.product-visual>img{width:100%;height:100%;object-fit:contain;object-position:50% 51%}.product-category{position:absolute;top:20px;left:25px;font-size:8px;font-weight:750;letter-spacing:1.8px;z-index:1;color:#57647a}.visual-note{position:absolute;right:16px;bottom:12px;font-size:8px;color:#667b8a;background:#edf3f8cc;padding:4px 7px;border-radius:3px}.solution-panel{padding:26px 30px 25px;background:#fff;min-height:242px;animation:panel-in .35s ease}.panel-title{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.panel-title h3{font-size:23px;letter-spacing:-.7px;line-height:1.35}.system-pill{color:var(--blue);background:#edf3f8;padding:7px 10px;border-radius:4px;font-size:8px;font-weight:750;letter-spacing:.5px;white-space:nowrap;margin-top:5px}.solution-panel p{font-size:12px;color:var(--muted);margin-top:14px;max-width:520px}.panel-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;padding-top:20px;margin-top:18px;border-top:1px solid var(--line)}.panel-bottom>span{font-size:9px;color:var(--muted)}.panel-bottom .text-link{font-size:10px;gap:8px}.panel-bottom .icon{width:16px;height:16px}@keyframes panel-in{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}} .approach{background:var(--navy);color:white;overflow:hidden}.approach-inner{display:grid;grid-template-columns:1fr 1fr;gap:100px;padding-block:85px}.light{color:#d3dded}.approach-copy{position:relative}.approach h2{font-size:51px;line-height:1.16;letter-spacing:-2px;margin-top:26px}.approach h2 span{color:#7ab5e1}.approach-copy>p{color:#b4bbd0;font-size:13px;margin-top:24px;max-width:350px;line-height:1.9}.approach .button{margin-top:29px;position:relative;z-index:1}.approach-wordmark{position:absolute;bottom:-100px;left:-3px;font-size:77px;letter-spacing:-5px;font-weight:800;color:#ffffff04;white-space:nowrap;pointer-events:none}.process-step{display:grid;grid-template-columns:34px 1fr 28px;gap:20px;padding:29px 0;border-bottom:1px solid #ffffff1c}.process-step:first-child{padding-top:3px}.process-step:last-child{border-bottom:0;padding-bottom:0}.process-number{color:#8091b0;font-size:11px;font-weight:600;line-height:28px}.process-step h3{font-size:20px;letter-spacing:-.5px;line-height:1.5}.process-step p{font-size:12px;line-height:1.8;color:#aeb8ce;margin-top:10px;max-width:330px}.process-step>.icon{color:#84bce4;width:25px;height:25px;margin-top:3px} .application-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:21px}.application-card{border-top:2px solid var(--line);padding:27px 19px 22px 0;display:flex;flex-direction:column;transition:border-color .3s,transform .3s}.application-card:hover{border-color:var(--blue);transform:translateY(-4px)}.application-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:31px}.application-top .icon{color:var(--blue);width:31px;height:31px;stroke-width:1.25}.application-top>span{font-size:9px;color:#626a78;font-weight:600}.application-card h3{font-size:22px;letter-spacing:-.7px;line-height:1.45;margin-bottom:14px}.application-card p{font-size:11px;color:var(--muted);line-height:1.9;flex:1;margin-bottom:27px}.application-link{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:9px;font-weight:700}.application-link .icon{width:17px;height:17px;color:var(--blue)}.applications{padding-bottom:85px}.faq{border-top:1px solid var(--line);padding-top:85px;display:grid;grid-template-columns:.85fr 1.15fr;gap:80px}.faq h2{font-size:41px}.faq-intro>p{font-size:12px;color:var(--muted);max-width:300px;margin-top:20px}.faq-intro>.text-link{margin-top:23px}.faq-list details{border-bottom:1px solid var(--line)}.faq-list details:first-child{border-top:1px solid var(--line)}.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:25px;padding-block:24px;font-size:13px;font-weight:650;line-height:1.6}.faq-list summary::-webkit-details-marker{display:none}.faq-plus{width:16px;height:16px;position:relative;flex:none}.faq-plus:before,.faq-plus:after{content:'';height:1.5px;width:12px;background:var(--blue);position:absolute;top:7px;left:2px;transition:transform .25s}.faq-plus:after{transform:rotate(90deg)}details[open] .faq-plus:after{transform:rotate(0)}.faq-list details>p{font-size:12px;color:var(--muted);line-height:1.9;padding:0 35px 24px 0} .contact-section{background:#edf3f8;padding-block:87px}.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center}.contact-copy h2{font-size:43px;letter-spacing:-1.7px}.contact-copy>p{color:var(--muted);font-size:12px;max-width:360px;margin-top:23px}.contact-phone{display:flex;align-items:center;gap:17px;margin-top:34px;max-width:410px;padding-bottom:25px;border-bottom:1px solid #d6dfe6}.contact-icon{display:grid;place-items:center;width:43px;height:43px;background:#fff;border-radius:50%;flex:none;color:var(--blue)}.contact-icon .icon{width:20px;height:20px}.contact-phone>span:nth-child(2){flex:1}.contact-copy small{font-size:8px;letter-spacing:1.3px;font-weight:750;color:var(--muted);display:block;margin-bottom:8px}.contact-phone strong{font-size:23px;letter-spacing:-.8px;font-weight:650}.contact-phone>.icon{color:var(--blue);height:20px;width:20px}.address-block{display:flex;gap:17px;margin-top:25px}.address-block address{font-style:normal;font-size:13px;line-height:1.9;font-weight:600}.metro-note{display:block;color:var(--muted);font-size:10px;margin-top:6px}.address-block .text-link{margin-top:15px;font-size:10px;color:var(--blue)}.contact-form{padding:35px;background:white;border:1px solid #e5ebf0;border-radius:14px;box-shadow:0 12px 40px #20234104}.form-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.form-heading h3{font-size:24px;letter-spacing:-.8px}.form-heading>span{display:flex;align-items:center;gap:6px;font-size:9px;color:#467a70}.form-heading .icon{width:15px;height:15px}.form-description{font-size:11px;color:var(--muted);margin-top:9px;margin-bottom:24px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{margin-bottom:18px}.field label{display:block;font-size:10px;font-weight:750;margin-bottom:8px}.field label>span{color:var(--red)}.field label>span.optional{color:#858b94;font-size:8px;font-weight:400}.field input,.field select,.field textarea{width:100%;padding:13px 12px;font-size:11px;color:var(--navy);background:#fafbfd;border:1px solid #e3e7ec;border-radius:5px;min-height:43px;transition:border-color .2s}.field textarea{resize:vertical;min-height:95px;line-height:1.7}.field input::placeholder,.field textarea::placeholder{color:#626a78}.form-submit{width:100%;justify-content:space-between;min-height:49px}.form-note{margin-top:13px;font-size:9px;line-height:1.7;color:#626a78}.form-status{padding:13px;margin-top:15px;border-radius:5px;background:var(--pale);font-size:11px;line-height:1.7}.form-status a{font-weight:750;color:var(--blue);text-decoration:underline;text-underline-offset:3px} .footer{background:#fff;padding-top:40px}.footer-top{display:flex;justify-content:space-between;gap:40px;align-items:center;padding-bottom:36px}.footer-brand img{height:86px;width:141px;object-fit:contain}.footer-brand p{font-size:10px;color:var(--muted);margin-top:9px}.footer-links{display:grid;grid-template-columns:1fr 1fr;column-gap:42px;row-gap:18px;font-size:10px;font-weight:650}.footer-links a:hover{color:var(--blue)}.footer-cta>span{font-size:10px;color:var(--muted);display:block;margin-bottom:12px}.footer-cta strong{display:flex;align-items:center;gap:25px;font-size:19px;font-weight:650;letter-spacing:-.5px}.footer-cta .icon{width:18px;height:18px;color:var(--blue)}.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:23px;border-top:1px solid var(--line);font-size:8px;color:#626a78}.footer-bottom>a{display:flex;align-items:center;gap:9px;color:var(--navy);font-weight:700}.footer-bottom .icon{width:13px;height:13px}.whatsapp-float{position:fixed;right:25px;bottom:23px;z-index:18;border-radius:50%;width:49px;height:49px;color:#fff;background:var(--navy);box-shadow:0 5px 22px #20234122;display:grid;place-items:center;transition:background .2s,transform .2s}.whatsapp-float>.icon{width:23px;height:23px}.whatsapp-float>span{position:absolute;right:60px;white-space:nowrap;color:var(--navy);background:#fff;padding:9px 12px;border:1px solid var(--line);border-radius:5px;font-size:10px;opacity:0;transform:translateX(5px);transition:opacity .2s,transform .2s;pointer-events:none}.whatsapp-float:hover{background:var(--blue);transform:translateY(-2px)}.whatsapp-float:hover>span,.whatsapp-float:focus-visible>span{opacity:1;transform:translateX(0)}.reveal{opacity:1;transform:none}.motion-ready .reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}.motion-ready .reveal.visible{opacity:1;transform:none}.application-card:nth-child(2){transition-delay:.05s}.application-card:nth-child(3){transition-delay:.1s}.application-card:nth-child(4){transition-delay:.15s} @media(min-width:1600px){.hero{gap:75px}.hero h1{font-size:78px}.hero-visual{height:580px}} @media(max-width:1190px){.container{width:calc(100% - 72px)}.navigation{gap:21px}.navigation a{font-size:11px}.nav-wrap{gap:20px}.hero{gap:35px}.hero h1{font-size:61px;letter-spacing:-3px}.hero-actions{gap:20px}.button{padding-inline:20px;gap:16px}.hero-visual{height:515px}.hero-description{font-size:13px}.hero-note{margin-top:40px}.hero .eyebrow{font-size:8px;letter-spacing:1.4px}.approach-inner,.contact-layout{gap:60px}.solution-layout{gap:35px}.panel-bottom{flex-wrap:wrap}.application-card h3{font-size:20px}.form-row{grid-template-columns:1fr}.contact-form{padding:29px}.contact-copy h2{font-size:39px}} @media(max-width:960px){.container{width:calc(100% - 56px)}.navigation{gap:19px}.navigation a{font-size:10px}.button-nav{display:none}.hero{gap:25px;padding-top:26px}.hero h1{font-size:53px;letter-spacing:-2.8px}.hero-description{font-size:12px}.hero-actions{flex-wrap:wrap;gap:20px}.hero-visual{height:505px}.hero-note{margin-top:30px}.photo-caption{left:16px;right:16px;padding:16px 13px;gap:10px}.photo-caption strong{font-size:13px}.photo-caption span{font-size:6px}.caption-icon{width:33px;height:33px}.photo-caption>.icon{width:17px;height:17px}.value-strip{gap:10px}.value-strip>div{font-size:10px;gap:10px}.value-strip .icon{height:20px;width:20px}.section{padding-block:80px}.section-heading{gap:35px}.section-heading>p{font-size:12px}.solution-layout{grid-template-columns:.85fr 1.15fr;gap:25px}.tab-copy strong{font-size:16px}.tab-copy>span{font-size:10px}.solution-tab{gap:12px;padding-block:23px}.solution-tab.active{padding-left:15px;padding-right:15px}.product-visual{height:255px}.solution-panel{padding:25px}.panel-title h3{font-size:20px}.system-pill{font-size:7px}.approach-inner{gap:45px;padding-block:70px}.approach h2{font-size:43px}.process-step{grid-template-columns:25px 1fr 23px;gap:14px}.process-step h3{font-size:18px}.process-step p{font-size:11px}.application-grid{grid-template-columns:repeat(2,1fr);gap:25px}.application-card h3{font-size:23px}.application-card p{max-width:300px}.faq{gap:45px}.faq h2{font-size:35px}.faq-list summary{font-size:12px}.contact-layout{gap:30px}.contact-copy h2{font-size:34px}.contact-phone strong{font-size:20px}.form-heading h3{font-size:21px}.footer-links{column-gap:25px}.footer-cta strong{font-size:16px}.footer-top{gap:25px}} @media(max-width:720px){html{scroll-padding-top:87px}.container{width:calc(100% - 40px)}.topline-inner{height:31px;font-size:8px;letter-spacing:.6px}.topline-inner>span:nth-child(2){display:none}.topline a{font-size:8px;gap:5px}.topline .icon{height:11px;width:11px}.nav-wrap{height:83px;gap:15px}.brand img{width:110px;height:67px}.menu-toggle{display:block}.navigation{position:absolute;left:0;right:0;top:83px;background:var(--paper);padding:12px 24px 24px;display:none;flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid var(--line);box-shadow:0 12px 16px #20234108}.navigation.open{display:flex}.navigation a{font-size:14px;padding:15px 0;border-bottom:1px solid var(--line)}.navigation a:after{display:none}.button-nav{display:flex;margin-left:auto;min-height:37px;padding:10px 13px;font-size:9px;gap:12px}.button-nav .icon{width:15px;height:15px}.hero{display:flex;flex-direction:column;align-items:stretch;gap:31px;padding-top:26px;padding-bottom:36px}.hero .eyebrow{font-size:8px;letter-spacing:1.3px}.hero h1{font-size:clamp(44px,10.5vw,68px);line-height:1.13;letter-spacing:-2.7px;margin-top:23px}.hero-description{font-size:13px;max-width:420px;line-height:1.85;margin-top:21px}.hero-actions{gap:23px;margin-top:24px}.button{font-size:11px;min-height:48px}.hero-actions .text-link{font-size:11px}.hero-note{margin-top:29px;gap:12px}.mini-symbol{height:36px;width:36px}.hero-note strong{font-size:11px}.hero-note div>span{font-size:9px}.hero-visual{height:390px;border-radius:17px}.hero-visual>img{object-position:50% 50%}.photo-badge{top:18px;left:18px;font-size:7px;padding:11px 13px}.photo-caption{left:17px;right:17px;bottom:17px;padding:17px;gap:13px}.photo-caption strong{font-size:15px}.photo-caption span{font-size:7px}.caption-icon{width:39px;height:39px}.value-strip{grid-template-columns:repeat(2,1fr);row-gap:22px;padding-block:22px}.value-strip>div{font-size:10px;justify-content:flex-start;padding-left:10px}.value-strip>div:nth-child(2){border:0}.value-strip>div:nth-child(3){border-right:1px solid var(--line)}.section{padding-block:64px}.section-heading{display:block;margin-bottom:30px}.eyebrow{font-size:8px;letter-spacing:1.6px}.section-heading h2,h2{font-size:34px;letter-spacing:-1.4px;margin-top:17px}.section-heading>p{max-width:400px;width:auto;padding:0;margin-top:21px;font-size:12px}.solution-layout{grid-template-columns:1fr;gap:25px}.solution-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0}.solution-tab{border:1px solid var(--line);padding:16px 11px;border-radius:7px;align-items:start;gap:0;flex-direction:column;justify-content:start;min-height:120px}.solution-tab.active{padding:16px 11px;border:1px solid #d4e3ee;border-radius:7px}.tab-number{font-size:8px;line-height:1;margin-bottom:13px}.tab-copy strong{font-size:12px;letter-spacing:-.2px;line-height:1.5}.tab-copy>span{display:none}.solution-tab>.icon{width:15px;height:15px;align-self:flex-end;margin-top:12px}.selector-help{grid-column:1/-1;padding:0;margin-top:11px;align-items:center;gap:12px}.selector-help p{font-size:10px;line-height:1.8}.selector-help a{display:inline}.selector-help .icon{width:18px;height:18px;margin:0}.product-visual{height:270px}.product-category{top:18px;left:20px;font-size:7px;letter-spacing:1.3px}.solution-panel{padding:23px;min-height:260px}.panel-title h3{font-size:23px}.solution-panel p{font-size:11px}.panel-bottom{gap:15px}.panel-bottom>span{font-size:9px}.panel-bottom .text-link{font-size:10px}.approach-inner{grid-template-columns:1fr;gap:47px;padding-block:62px}.approach h2{font-size:43px;letter-spacing:-1.8px}.approach-copy>p{max-width:410px;font-size:12px}.approach-wordmark{display:none}.process-step{grid-template-columns:29px 1fr 24px;padding-block:25px;gap:15px}.process-step h3{font-size:19px}.process-step p{font-size:11px;max-width:390px}.application-grid{gap:17px}.application-card{padding-top:23px;padding-right:0}.application-top{margin-bottom:23px}.application-top .icon{width:27px;height:27px}.application-card h3{font-size:18px;letter-spacing:-.45px}.application-card p{font-size:10px;margin-bottom:21px}.application-link{font-size:8px;gap:4px}.application-link .icon{width:14px;height:14px}.faq{grid-template-columns:1fr;gap:29px}.faq h2{font-size:34px}.faq-intro>p{max-width:390px;font-size:12px}.faq-intro>.text-link{font-size:11px}.faq-list summary{font-size:12px;gap:20px;padding-block:21px}.faq-list details>p{font-size:11px;padding-right:20px}.contact-section{padding-block:62px}.contact-layout{grid-template-columns:1fr;gap:35px}.contact-copy h2{font-size:35px}.contact-copy>p{font-size:12px;max-width:410px}.contact-phone{max-width:none;margin-top:27px}.contact-phone strong{font-size:23px}.contact-form{padding:24px;border-radius:12px}.form-heading h3{font-size:23px}.form-row{grid-template-columns:1fr 1fr;gap:13px}.field label{font-size:9px}.field label>span.optional{font-size:7px}.field input,.field select,.field textarea{font-size:11px}.footer{padding-top:30px}.footer-top{flex-wrap:wrap;align-items:start;padding-bottom:30px;row-gap:32px}.footer-brand{width:46%}.footer-brand img{width:115px;height:70px}.footer-links{font-size:9px;grid-template-columns:1fr;row-gap:13px;min-width:120px}.footer-cta{width:100%;padding-top:23px;border-top:1px solid var(--line)}.footer-cta strong{font-size:20px;justify-content:space-between}.footer-bottom{flex-wrap:wrap;gap:15px;font-size:8px}.footer-bottom>span:nth-child(2){display:none}.whatsapp-float{height:44px;width:44px;right:16px;bottom:17px}.whatsapp-float>span{display:none}} @media(max-width:380px){.container{width:calc(100% - 32px)}.button-nav{display:none}.hero h1{font-size:42px}.hero-actions{gap:18px}.hero-visual{height:335px}.photo-caption strong{font-size:13px}.form-row{grid-template-columns:1fr}.application-card h3{font-size:16px}.solution-panel{padding:20px}.panel-title h3{font-size:20px}.tab-copy strong{font-size:11px}.solution-tab{padding-inline:9px}.solution-tab.active{padding-inline:9px}.contact-copy h2{font-size:31px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;transition-delay:0ms!important}.motion-ready .reveal{opacity:1;transform:none}.button:hover,.application-card:hover,.whatsapp-float:hover{transform:none}} @media(max-width:720px){.field input,.field select,.field textarea{font-size:16px}.field input::placeholder,.field textarea::placeholder{font-size:13px}.field input,.field select{min-height:47px}.panel-title{display:block}.system-pill{display:inline-block;margin-top:12px}.brand img{mix-blend-mode:multiply}} /* Architectural direction: generous type, open engineering layouts and an interactive climate scene. */ :root{--paper:#f8f9fa;--pale:#edf2f6;--muted:#626a78;--display:'Sora','Manrope',Arial,sans-serif}body{background:var(--paper)}h1,h2,h3{font-family:var(--display)}.container{width:min(1360px,calc(100% - 80px))}.topline{background:var(--paper);color:var(--navy);border-bottom:1px solid #dfe4e8}.topline-inner{height:32px;font-size:9px}.topline-inner>span:nth-child(2){color:var(--muted)}.topline .status-dot{background:var(--red)}.header{background:#f8f9faf5}.nav-wrap{height:96px}.brand img{width:124px;height:76px;mix-blend-mode:multiply}.navigation a{font-size:11px}.button{border-radius:2px;box-shadow:none;min-height:52px}.button-nav{background:none;color:var(--navy);border:1px solid #ccd3dd;min-height:43px}.button-nav:hover{background:var(--navy);color:#fff}.eyebrow{font-size:9px;letter-spacing:1.9px}.eyebrow-line{width:6px;height:6px;border-radius:50%}.section{padding-block:110px}.section-heading{align-items:flex-start}.section-heading h2,h2{font-size:52px;font-weight:500;letter-spacing:-2.4px;line-height:1.2}.section-heading>p{padding-top:43px;max-width:350px;font-size:13px}.hero{height:700px;padding:0;display:block;position:relative;overflow:hidden;margin-bottom:0;background:#e9edf0;border-radius:3px}.scene-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}.scene-shade{position:absolute;inset:0;background:linear-gradient(90deg,#f1f4f7 0%,#f1f4f7e0 29%,#f1f4f72e 60%,transparent 100%);transition:background .5s}.hero-copy{position:relative;z-index:2;padding:76px 0 0 64px;width:67%}.hero .eyebrow{font-size:8px;letter-spacing:1.8px}.hero h1{font-family:var(--display);font-size:clamp(75px,8.7vw,124px);font-weight:500;line-height:.99;letter-spacing:-7px;margin-top:31px;position:relative}.hero h1>span:first-child{color:var(--navy)}.headline-dot{position:absolute;display:block!important;background:var(--red);width:15px;height:15px;border-radius:50%;left:0;top:-20px;opacity:0}.hero-description{font-size:14px;line-height:1.8;margin-top:27px;color:#555f71;max-width:330px}.hero-actions{margin-top:27px}.hero-actions .button{font-size:10px;letter-spacing:.3px;gap:28px;background:var(--navy)}.hero-actions .button:hover{background:var(--red)}.scene-coordinate{position:absolute;top:31px;right:34px;z-index:2;text-align:right;font-family:var(--display);font-size:7px;font-weight:600;letter-spacing:1.9px;color:#4f5d6c;display:grid;gap:7px}.scene-coordinate span:first-child{font-size:13px;letter-spacing:3px}.airflow{position:absolute;width:77%;height:100%;right:-4%;top:0;color:var(--blue);opacity:.27;pointer-events:none;z-index:1}.airflow path{stroke:currentColor;stroke-width:.6;stroke-dasharray:1800;stroke-dashoffset:1800;animation:air-in 2.2s ease forwards}.airflow path:nth-child(2){animation-delay:.12s}.airflow path:nth-child(3){animation-delay:.24s}@keyframes air-in{to{stroke-dashoffset:0}}.hero-baseline{position:absolute;left:0;right:0;bottom:0;z-index:4;min-height:78px;background:var(--navy);color:white;display:flex;align-items:center;padding-inline:44px;gap:0}.hero-system{display:flex;align-items:center;gap:14px;width:29%;font-size:9px;letter-spacing:1.1px;font-weight:700;padding:9px 29px 9px 0;border-right:1px solid #ffffff26;margin-right:28px}.hero-system>span{font-size:8px;color:#9aa8c4}.hero-system>.icon{margin-left:auto;color:#87badf;width:15px;height:15px}.hero-system:hover{color:#99cff6}.scroll-cue{height:35px;width:35px;display:grid;place-items:center;margin-left:auto;flex:none}.scroll-cue>.icon{height:22px;width:22px}.climate-control{position:absolute;right:45px;bottom:116px;z-index:3;width:213px;padding:16px 12px 13px;background:#ffffffde;backdrop-filter:blur(18px);border:1px solid #ffffffc7;border-radius:110px 110px 17px 17px;box-shadow:0 12px 60px #20324a0a}.control-label{display:flex;align-items:center;justify-content:center;gap:7px;font-size:7px;letter-spacing:1.1px;font-weight:800;margin-top:7px}.control-label .status-dot{width:5px;height:5px}.temperature-dial{position:relative;height:181px;width:181px;margin:6px auto 0;text-align:center}.dial-ring{position:absolute;inset:0;height:100%;width:100%;transform:rotate(130deg)}.dial-ring circle{fill:none;stroke-width:1.5;stroke-linecap:round}.ring-track{stroke:#bdc7d1;stroke-dasharray:375 110}.ring-value{stroke:var(--blue);stroke-width:3!important;stroke-dasharray:230 255;transition:stroke-dasharray .45s,stroke .45s}.dial-top{position:absolute;top:23px;left:0;right:0;font-size:6px;letter-spacing:1.4px;color:var(--muted)}.temperature{display:flex;justify-content:center;align-items:flex-start;position:absolute;top:40px;left:0;right:0;font-family:var(--display);font-size:61px;letter-spacing:-4px;line-height:1.2;font-weight:400}.temperature>span{font-size:32px;letter-spacing:0;margin-left:3px;margin-top:3px;color:var(--blue)}.temperature-caption{position:absolute;top:116px;left:0;right:0;font-size:5px;letter-spacing:1.2px;font-weight:750;color:var(--muted)}.temperature-buttons{position:absolute;bottom:6px;left:27px;right:27px;display:flex;align-items:center;justify-content:space-between}.temperature-buttons button{border:1px solid #dce3e9;background:#fff;width:30px;height:30px;border-radius:50%;font-size:18px;color:var(--navy);line-height:1;display:grid;place-items:center;transition:background .2s}.temperature-buttons button:hover{background:#e9f4fc}.temperature-buttons button:disabled{opacity:.4;cursor:default}.temperature-buttons>span{font-size:8px;color:var(--muted)}.climate-modes{display:flex;margin:8px 7px 0;background:#edf2f6;border-radius:5px;padding:3px}.climate-modes button{width:50%;border:0;background:none;border-radius:3px;padding:8px 3px;font-size:8px;font-weight:650;color:#626a78}.climate-modes button[aria-pressed=true]{background:#fff;color:var(--blue)}.climate-scene[data-mode=warm] .ring-value{stroke:var(--red)}.climate-scene[data-mode=warm] .temperature>span{color:var(--red)}.climate-scene[data-mode=warm] .climate-modes button[aria-pressed=true]{color:var(--red)}.climate-scene[data-mode=warm] .airflow{color:var(--red)}.climate-scene[data-mode=warm] .scene-shade{background:linear-gradient(90deg,#f5f2ef 0%,#f5f2efe0 29%,#f5f2ef2e 60%,transparent 100%)} .value-strip{border:0;border-bottom:1px solid var(--line);padding-block:30px}.value-strip>div{border:0;font-size:10px;letter-spacing:.1px}.value-strip .icon{width:19px;height:19px}.solution-layout{display:block}.solution-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;padding:0;margin-bottom:27px}.solution-tab{border:0;border-top:1px solid #cbd4de;border-radius:0!important;background:none;padding:23px 0!important;gap:18px;position:relative;align-items:flex-start}.solution-tab.active{background:none;border-color:var(--blue)}.solution-tab:before{content:'';position:absolute;top:-1px;left:0;width:0;height:2px;background:var(--blue);transition:width .4s}.solution-tab.active:before{width:100%}.tab-number{font-size:28px;color:#b3c0ce;line-height:1.2;letter-spacing:-1px;font-family:var(--display);font-weight:400}.active .tab-number{color:var(--blue)}.tab-copy strong{font-family:var(--display);font-size:17px;line-height:1.5;letter-spacing:-.6px;font-weight:500}.tab-copy>span{font-size:10px;margin-top:7px}.solution-tab>.icon{width:19px;height:19px;margin-top:2px}.selector-help{display:none}.solution-showcase{display:grid;grid-template-columns:1fr 1fr;border-radius:2px;border:0;background:var(--pale);min-height:395px}.product-visual{order:2;height:100%;min-height:395px;background:#edf3f8}.product-visual>img{object-fit:contain;padding:22px}.product-category{font-size:7px;letter-spacing:1.4px;top:27px;left:28px}.visual-note{font-size:7px}.solution-panel{order:1;background:#e9eef3;min-height:395px;padding:42px;display:flex;flex-direction:column;justify-content:center}.panel-title{display:block}.panel-title h3{font-size:31px;font-weight:500;line-height:1.35;letter-spacing:-1.4px}.system-pill{display:inline-block;margin-top:16px;background:#fff;color:var(--blue);font-size:8px}.solution-panel p{max-width:400px;font-size:12px;margin-top:21px}.panel-bottom{display:block;border-top:1px solid #ced8e2;margin-top:25px;padding-top:19px}.panel-bottom>span{display:block;font-size:9px}.panel-bottom .text-link{margin-top:15px;font-size:11px}.solutions{padding-bottom:100px}.approach{background:#226daa}.approach-inner{display:flex;flex-direction:column;gap:62px;padding-block:80px}.approach-copy{display:grid;grid-template-columns:1.2fr .8fr;column-gap:90px;row-gap:20px;align-items:start}.approach-copy>.eyebrow{grid-column:1/-1;color:#d6e8f7}.approach h2{grid-column:1;grid-row:2/5;font-size:67px;line-height:1.16;letter-spacing:-3px;margin-top:3px;font-weight:500}.approach h2 span{color:#afd5f3}.approach-copy>p{grid-column:2;font-size:14px;color:#e1edf6;margin-top:9px;max-width:380px;line-height:1.9}.approach .button{grid-column:2;margin-top:3px;width:fit-content;font-size:10px}.approach-wordmark{display:none}.process{display:grid;grid-template-columns:repeat(4,1fr);gap:35px}.process-step{display:block;border:0!important;border-top:1px solid #ffffff44!important;padding:22px 0 0!important;position:relative}.process-number{font-family:var(--display);font-size:30px;letter-spacing:-1.3px;color:#afd5f3;display:block;margin-bottom:23px}.process-step h3{font-family:var(--font);font-size:16px;letter-spacing:-.4px;font-weight:650}.process-step p{font-size:11px;color:#d5e8f6;line-height:1.9;margin-top:12px}.process-step>.icon{position:absolute;right:0;top:25px;color:#afd5f3;width:22px;height:22px} .applications .section-heading{margin-bottom:40px}.application-grid{display:block;border-top:1px solid #d6dde4}.application-card{display:grid;grid-template-columns:135px 1.1fr 1fr 180px;gap:35px;align-items:center;border:0;border-bottom:1px solid #d6dde4;padding:30px 0;transition:background .3s,padding .3s}.application-card:hover{transform:none;padding-inline:15px;background:#edf2f6}.application-top{margin:0;display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:26px}.application-top>span{font-family:var(--display);font-size:34px;color:#a5b7c8;letter-spacing:-2px}.application-top>.icon{height:27px;width:27px}.application-card h3{font-size:23px;line-height:1.4;font-weight:500;letter-spacing:-1px;margin:0}.application-card h3 br{display:none}.application-card p{font-size:11px;line-height:1.9;margin:0;max-width:300px}.application-link{font-size:9px;font-weight:650;gap:20px;justify-content:flex-end}.application-link .icon{width:22px;height:22px}.faq{padding-top:70px;border-top:0;gap:110px}.faq h2{font-size:45px}.faq-list summary{font-size:13px;padding-block:27px}.contact-section{background:var(--navy);color:#fff;padding-block:85px}.contact-layout{gap:90px}.contact-copy .eyebrow{color:#c0cedf}.contact-copy h2{font-size:47px;font-weight:500;letter-spacing:-2px}.contact-copy h2 span{color:#8dbde3}.contact-copy>p{font-size:12px;color:#bec8da}.contact-phone{border-color:#ffffff26;padding-bottom:28px}.contact-phone strong{font-family:var(--display);font-size:25px;font-weight:400;letter-spacing:-1.1px}.contact-copy small{color:#b3bdd0}.contact-icon{border:1px solid #ffffff24;background:transparent;color:#9fc8e7;border-radius:50%}.address-block address{font-size:12px;font-weight:400}.metro-note{color:#b1bace}.address-block .text-link{color:#a7d3f5}.contact-form{color:var(--navy);border-radius:3px;box-shadow:none;border:0;padding:35px}.contact-form h3{font-size:22px;font-weight:500}.field input,.field select,.field textarea{border-radius:1px;background:#f8fafb}.form-submit{background:var(--red);border-radius:1px}.form-row{grid-template-columns:1fr 1fr}.footer{background:var(--paper);padding-top:38px}.footer-brand img{mix-blend-mode:multiply;width:127px;height:77px}.footer-top{padding-bottom:30px}.footer-bottom{padding-bottom:18px}.footer-giant{font-family:var(--display);font-size:clamp(48px,11.2vw,170px);letter-spacing:-.075em;line-height:1.1;font-weight:500;text-align:center;color:#dce3ea;overflow:hidden;padding-block:15px 6px;user-select:none}.whatsapp-float{background:var(--red);border-radius:5px;width:46px;height:46px;right:20px;bottom:20px;box-shadow:none} @media(max-width:1100px){.container{width:calc(100% - 56px)}.hero{height:650px}.hero-copy{padding-left:45px;padding-top:73px}.hero h1{font-size:94px;letter-spacing:-5.5px}.climate-control{right:32px;bottom:108px;width:194px;padding-inline:8px}.temperature-dial{width:171px;height:171px}.temperature{font-size:56px;top:39px}.temperature-caption{top:111px}.dial-top{top:21px}.temperature-buttons{bottom:3px}.hero-baseline{padding-inline:30px}.hero-system{font-size:8px;margin-right:21px;gap:10px;padding-right:20px}.solution-panel{padding:32px}.panel-title h3{font-size:28px}.approach-copy{column-gap:50px}.approach h2{font-size:56px}.process{gap:25px}.application-card{grid-template-columns:90px 1.1fr 1fr 140px;gap:25px}.application-top{gap:15px}.application-top>span{font-size:29px}.application-top>.icon{width:23px;height:23px}.application-card h3{font-size:20px}.application-link{font-size:8px;gap:12px}.contact-layout{gap:50px}.contact-copy h2{font-size:40px}.contact-phone strong{font-size:22px}.section-heading h2,h2{font-size:46px}} @media(max-width:900px){.nav-wrap{height:85px}.brand img{width:113px;height:68px}.navigation{gap:22px}.navigation a{font-size:10px}.button-nav{display:none}.hero{height:650px}.hero h1{font-size:83px;letter-spacing:-5px}.hero-copy{padding-left:35px;padding-top:64px;width:75%}.hero-description{font-size:12px;max-width:260px}.hero .eyebrow{font-size:7px;letter-spacing:1.2px}.climate-control{right:24px;bottom:116px;transform:scale(.83);transform-origin:bottom right}.hero-baseline{min-height:77px;padding-inline:24px}.hero-system{font-size:7px;letter-spacing:.4px;margin-right:17px;width:30%;padding-right:16px;gap:8px}.hero-system>span{font-size:7px}.section{padding-block:80px}.section-heading h2,h2{font-size:39px;letter-spacing:-1.8px}.section-heading>p{font-size:12px;padding-top:35px;max-width:280px}.tab-copy strong{font-size:14px;letter-spacing:-.3px}.tab-copy>span{font-size:9px}.solution-tab{gap:12px}.tab-number{font-size:24px}.solution-selector{gap:20px}.solution-panel{padding:27px}.panel-title h3{font-size:25px;letter-spacing:-1px}.product-visual{min-height:375px}.product-visual>img{padding:8px}.approach h2{font-size:47px}.approach-copy>p{font-size:12px}.process{gap:19px}.process-step h3{font-size:13px}.process-step p{font-size:10px}.process-number{font-size:27px}.application-card{grid-template-columns:70px 1fr 1fr 25px;gap:22px}.application-top>.icon{display:none}.application-card h3{font-size:18px}.application-card p{font-size:10px}.application-link{font-size:0}.faq{gap:50px}.faq h2{font-size:36px}.contact-layout{gap:32px}.contact-copy h2{font-size:33px}.contact-form{padding:25px}.contact-phone strong{font-size:19px}.form-row{grid-template-columns:1fr}.footer-links{font-size:10px}} @media(max-width:720px){html{scroll-padding-top:83px}.container{width:calc(100% - 32px)}.topline-inner{height:28px;font-size:7px}.topline a{font-size:7px}.header{background:#f8f9faf8}.nav-wrap{height:78px}.brand img{width:106px;height:64px}.navigation{top:78px;background:var(--paper)}.navigation a{font-size:13px}.menu-toggle{display:block}.hero{height:740px;display:block;gap:0;overflow:hidden;border-radius:2px;margin-bottom:0}.scene-image{object-fit:cover;object-position:63% 50%;height:67%;top:33%}.scene-shade{background:linear-gradient(180deg,#f1f4f7 0%,#f1f4f7 33%,#f1f4f7aa 45%,transparent 69%)}.climate-scene[data-mode=warm] .scene-shade{background:linear-gradient(180deg,#f5f2ef 0%,#f5f2ef 33%,#f5f2efaa 45%,transparent 69%)}.hero-copy{padding:38px 24px 0;width:100%;z-index:2}.hero .eyebrow{font-size:6px;letter-spacing:1.2px;gap:8px}.hero h1{font-size:clamp(60px,14.7vw,98px);letter-spacing:-4px;margin-top:26px;line-height:1.03}.hero-description{font-size:11px;max-width:265px;margin-top:17px;line-height:1.8}.hero-actions{margin-top:20px}.hero-actions .button{min-height:44px;font-size:9px;padding:12px 15px;gap:20px}.scene-coordinate{display:none}.airflow{top:200px;right:-170px;width:650px;height:500px}.climate-control{right:18px;bottom:102px;transform:scale(.74);transform-origin:bottom right}.hero-baseline{min-height:78px;padding-inline:17px;gap:0}.hero-system{display:block;width:33.33%;padding:3px 11px 3px 0;margin-right:11px;font-size:6px;letter-spacing:.2px;line-height:1.6}.hero-system>span{display:block;font-size:7px;margin-bottom:4px}.hero-system>.icon{display:none}.hero-system:nth-child(3){margin:0;padding-right:0;border:0}.scroll-cue{display:none}.value-strip{padding-block:22px;grid-template-columns:repeat(2,1fr);gap:19px}.value-strip>div{padding-left:2px;font-size:9px;border:0!important;gap:10px}.value-strip .icon{width:17px;height:17px}.section{padding-block:61px}.section-heading{display:block;margin-bottom:28px}.section-heading h2,h2{font-size:31px;letter-spacing:-1.4px;line-height:1.3}.section-heading>p{padding-top:0;max-width:360px;font-size:11px;margin-top:18px}.eyebrow{font-size:7px;letter-spacing:1.3px}.solution-selector{gap:13px;margin-bottom:16px}.solution-tab{display:block;padding:17px 0!important;min-height:104px;border:0;border-top:1px solid #cbd4de!important;border-radius:0!important}.solution-tab.active{border-top-color:var(--blue)!important}.tab-number{font-size:23px;line-height:1.2;margin-bottom:12px;display:block}.tab-copy strong{font-size:11px;letter-spacing:-.3px;line-height:1.6}.tab-copy>span{display:none}.solution-tab>.icon{display:none}.solution-showcase{grid-template-columns:1fr;min-height:0}.product-visual{order:1;min-height:0;height:245px}.product-visual>img{padding:0;object-fit:contain}.product-category{top:20px;left:20px;font-size:6px}.solution-panel{order:2;padding:27px;min-height:340px}.panel-title h3{font-size:27px;line-height:1.35}.system-pill{font-size:7px;margin-top:15px}.solution-panel p{font-size:11px;margin-top:17px}.panel-bottom{margin-top:19px;padding-top:18px}.panel-bottom .text-link{font-size:10px}.approach-inner{padding-block:58px;gap:35px}.approach-copy{display:block}.approach h2{font-size:43px;letter-spacing:-2px;margin-top:24px}.approach-copy>p{font-size:11px;max-width:360px;margin-top:23px}.approach .button{margin-top:24px;font-size:9px;min-height:46px}.process{grid-template-columns:1fr 1fr;gap:30px 22px}.process-step{padding-top:18px!important}.process-number{font-size:25px;margin-bottom:15px}.process-step h3{font-size:12px}.process-step p{font-size:9px;line-height:1.9}.process-step>.icon{width:17px;height:17px;top:21px}.application-card{grid-template-columns:35px 1fr 22px;gap:17px;padding-block:22px}.application-card:hover{padding-inline:0;background:none}.application-top>span{font-size:25px;letter-spacing:-1px}.application-card h3{font-size:17px;letter-spacing:-.6px;line-height:1.5}.application-card p{grid-column:2;grid-row:2;font-size:10px;margin-top:-9px}.application-link{grid-column:3;grid-row:1/3}.application-link .icon{width:20px;height:20px}.faq{gap:25px}.faq h2{font-size:32px}.faq-intro>p{font-size:11px}.faq-list summary{font-size:11px;padding-block:22px}.faq-list details>p{font-size:10px}.contact-section{padding-block:60px}.contact-layout{gap:32px}.contact-copy h2{font-size:33px;letter-spacing:-1.3px}.contact-copy>p{font-size:11px}.contact-phone strong{font-size:21px}.contact-copy small{font-size:7px}.contact-icon{height:39px;width:39px}.contact-phone{gap:13px}.address-block{gap:13px}.contact-form{padding:25px}.form-heading h3{font-size:21px}.form-heading>span{font-size:8px}.form-row{grid-template-columns:1fr}.field input,.field select,.field textarea{font-size:16px}.field input::placeholder,.field textarea::placeholder{font-size:12px}.form-submit{font-size:10px}.footer-brand{width:45%}.footer-links{font-size:9px}.footer-brand img{width:108px;height:65px}.footer-cta strong{font-size:18px}.footer-giant{font-size:11vw;letter-spacing:-.07em;padding-bottom:18px}.whatsapp-float{width:41px;height:41px;right:14px;bottom:15px}.whatsapp-float>.icon{height:21px;width:21px}} @media(max-width:380px){.hero-copy{padding-inline:20px}.hero{height:720px}.hero h1{font-size:60px;letter-spacing:-3.7px}.hero .eyebrow{font-size:5px;letter-spacing:.8px}.hero-description{font-size:10px}.hero-system{font-size:5px;padding-right:6px;margin-right:9px}.scene-image{height:65%;top:35%}.climate-control{right:13px;bottom:98px;transform:scale(.68)}.section-heading h2,h2{font-size:28px}.panel-title h3{font-size:24px}.solution-panel{padding:23px}.application-card h3{font-size:15px}.contact-copy h2{font-size:29px}.contact-phone strong{font-size:18px}.tab-copy strong{font-size:10px}} @media(prefers-reduced-motion:reduce){.airflow path{animation:none;stroke-dashoffset:0}.climate-control,.scene-shade{transition:none}} @media(max-width:720px){.climate-control{transform:none;width:160px;padding:13px 8px 10px;right:18px;bottom:102px}.control-label{font-size:6px;letter-spacing:.8px}.temperature-dial{width:140px;height:160px;margin-top:7px}.dial-ring{width:140px;height:140px}.dial-top{top:15px;font-size:5px}.temperature{top:29px;font-size:47px;letter-spacing:-3px}.temperature>span{font-size:24px}.temperature-caption{top:91px;font-size:5px;letter-spacing:.5px}.temperature-buttons{left:6px;right:6px;bottom:0}.temperature-buttons button{width:40px;height:40px;font-size:19px}.temperature-buttons>span{font-size:8px}.climate-modes{margin:8px 3px 0}.climate-modes button{min-height:36px;padding:8px 2px;font-size:8px}} @media(max-width:720px){.hero-system{font-size:8px;letter-spacing:0}.hero .eyebrow{font-size:7px;letter-spacing:.5px}.control-label{font-size:7px}.temperature-caption{font-size:6px}} /* The main view opens edge to edge, with a compact brand header. */ html{scroll-padding-top:84px} .topline-inner{height:25px} .nav-wrap{height:72px} .brand img{width:94px;height:57px} .navigation a{font-size:12px} .button-nav{min-height:39px;padding-block:10px} .hero.container{width:100%;max-width:none;margin:0;border-radius:0;height:calc(100svh - 97px);min-height:620px} .hero-copy{padding-left:max(40px,calc((100vw - 1360px)/2));padding-top:60px} .hero-baseline{padding-inline:max(40px,calc((100vw - 1360px)/2))} .climate-control{right:max(40px,calc((100vw - 1360px)/2))} .scene-coordinate{right:max(40px,calc((100vw - 1360px)/2))} .brand-partners{background:#fff;padding-block:57px 49px;border-bottom:1px solid var(--line)} .brands-intro{display:flex;justify-content:space-between;align-items:center;gap:50px;margin-bottom:32px} .brands-intro h2{font-size:29px;letter-spacing:-1.2px;line-height:1.3;margin-top:14px} .brands-intro>p{font-size:12px;color:var(--muted);max-width:420px} .brand-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:27px;align-items:center} .brand-item{height:78px;display:flex;align-items:center;justify-content:center;min-width:0} .brand-item img{width:100%;height:auto;max-width:142px;max-height:58px;object-fit:contain;filter:none} .brand-item:nth-child(4) img{max-width:118px}.brand-item:nth-child(5) img{max-width:121px}.brand-item:nth-child(6) img{max-width:126px} body.design-studio .topline-inner{height:25px} body.design-studio .nav-wrap{height:72px} body.design-studio .brand img{width:94px;height:57px;mix-blend-mode:multiply} body.design-studio .navigation a{text-transform:none;font-size:12px;letter-spacing:0} body.design-studio .button-nav{min-height:39px;padding-block:10px;font-size:10px} body.design-studio .hero.container{height:calc(100svh - 97px);min-height:680px} body.design-studio .hero-copy{padding-top:60px} body.design-studio .brand-partners{background:#f4f5f3;color:var(--navy)} body.design-studio .brands-intro .eyebrow{color:var(--navy)} body.design-studio .brands-intro h2{font-size:29px;letter-spacing:-1.2px;line-height:1.3;text-transform:none} @media(max-width:1100px){.navigation{gap:23px}.navigation a{font-size:11px}.hero-copy{padding-left:32px}.hero-baseline{padding-inline:32px}.climate-control{right:32px}.brand-grid{gap:23px}.brand-partners{padding-block:45px}} @media(max-width:900px){.navigation{gap:19px}.navigation a{font-size:10px}.brand-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:15px 30px}.brand-item{height:65px}.brands-intro>p{max-width:320px}.brands-intro{gap:35px}body.design-studio .navigation a{font-size:10px}} @media(max-width:720px){html{scroll-padding-top:70px}.topline-inner{height:23px}.nav-wrap{height:62px}.brand img{width:84px;height:51px}.navigation{top:62px}.navigation a{font-size:13px}.hero.container{height:calc(100svh - 85px);min-height:730px}.hero-copy{padding:35px 24px 0}.hero-baseline{padding-inline:20px}.climate-control{right:20px}.brand-partners{padding-block:35px}.brands-intro{display:block;margin-bottom:23px}.brands-intro h2{font-size:26px}.brands-intro>p{font-size:11px;max-width:380px;margin-top:19px}.brand-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 25px}.brand-item{height:70px}.brand-item:last-child{grid-column:1/-1}.brand-item img{max-width:136px}.brand-item:nth-child(5) img{max-width:112px}body.design-studio .topline-inner{height:23px}body.design-studio .nav-wrap{height:62px}body.design-studio .brand img{width:84px;height:51px}body.design-studio .navigation{top:62px}body.design-studio .navigation a{font-size:13px}body.design-studio .hero.container{height:calc(100svh - 85px);min-height:820px}body.design-studio .hero-copy{padding:42px 24px 0}body.design-studio .brands-intro h2{font-size:26px}} @media(max-width:380px){.hero-copy{padding-left:20px;padding-right:20px}.hero.container{min-height:710px}.hero .eyebrow{font-size:6px}body.design-studio .hero-copy{padding-inline:20px}.brand-grid{gap:6px 20px}.brand-item img{max-width:126px}} .button,body.design-studio .button{border-radius:12px} .button-nav,body.design-studio .button-nav{border-radius:9px} .form-submit,body.design-studio .form-submit{border-radius:10px} .climate-modes,body.design-studio .climate-modes{border-radius:8px} .climate-modes button,body.design-studio .climate-modes button{border-radius:6px} .solution-tab,body.design-studio .solution-tab{border-radius:8px!important} .whatsapp-float,body.design-studio .whatsapp-float{border-radius:13px} /* A calm brand gallery: balanced optical sizes and restrained movement. */ .brand-partners,body.design-studio .brand-partners{background:#f2f5f9;padding-block:65px} .brands-intro{margin-bottom:31px} .brand-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:17px;align-items:stretch} .brand-item{grid-column:span 3;position:relative;height:151px;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:27px 24px 20px;background:#fff;border:1px solid #e2e8f0;border-radius:17px;box-shadow:0 4px 15px #20234103;overflow:hidden;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;cursor:default} .brand-item:nth-child(n+5){grid-column:span 4} .brand-item:after{content:'';position:absolute;left:24px;right:24px;bottom:0;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .35s ease} .brand-item:hover{transform:translateY(-5px);border-color:#b9d4e9;box-shadow:0 14px 28px #2023410b} .brand-item:hover:after{transform:scaleX(1)} .brand-index{position:absolute;top:14px;left:17px;font-size:8px;letter-spacing:.8px;font-weight:600;color:#8b98a9} .brand-logo{width:100%;height:61px;display:grid;place-items:center} .brand-logo img{height:auto;width:100%;max-width:170px;max-height:61px;object-fit:contain;filter:none} .brand-item:nth-child(2) img{max-width:180px} .brand-item:nth-child(3) img{max-width:142px;max-height:60px} .brand-item:nth-child(4) img{max-width:143px} .brand-item:nth-child(5) img{max-width:121px} .brand-item:nth-child(6) img{max-width:148px} .brand-item:nth-child(7) img{max-width:142px} .brand-name{font-size:10px;line-height:1.5;font-weight:650;letter-spacing:.1px;color:#657286;text-align:center} /* Image-led application areas retain their direct project-contact links. */ .application-grid,body.design-studio .application-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:27px;border:0} .application-card,body.design-studio .application-card{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;min-width:0;min-height:0;padding:0;border:1px solid #e0e6ec;border-radius:18px;overflow:hidden;background:#fff;color:var(--navy);box-shadow:none;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease} .application-card:hover,body.design-studio .application-card:hover{padding:0;transform:translateY(-5px);background:#fff;border-color:#bdd2e3;box-shadow:0 17px 35px #2023410c} .application-image,body.design-studio .application-image{width:100%;height:285px;object-fit:cover;object-position:center 33%;display:block;transition:transform .65s ease} .application-card:hover .application-image,body.design-studio .application-card:hover .application-image{transform:scale(1.025)} .application-card:first-child .application-image{object-position:center 24%} .application-top,body.design-studio .application-top{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:0;position:absolute;top:19px;left:20px;right:20px;margin:0;padding:0;z-index:1} .application-top>.icon,body.design-studio .application-top>.icon{display:block;width:41px;height:41px;padding:10px;background:#ffffffef;backdrop-filter:blur(8px);border:1px solid #fff;border-radius:12px;color:var(--blue);stroke-width:1.5} .application-top>span,body.design-studio .application-top>span{font-family:var(--font);font-size:9px;font-weight:700;letter-spacing:.8px;color:var(--navy);background:#fffffff0;border:1px solid #fff;border-radius:8px;padding:8px 10px} .application-card h3,body.design-studio .application-card h3{position:relative;z-index:2;font-size:24px;font-weight:500;letter-spacing:-.8px;line-height:1.4;text-transform:none;color:var(--navy);margin:0;padding:25px 28px 11px;background:#fff} .application-card h3 br,body.design-studio .application-card h3 br{display:none} .application-card p,body.design-studio .application-card p{position:relative;z-index:2;color:#626a78;font-size:12px;line-height:1.8;max-width:none;margin:0;padding:0 28px 23px;flex:1;background:#fff} .application-link,body.design-studio .application-link{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:10px;font-weight:650;color:var(--blue);padding:18px 28px;border-top:1px solid #e7edf2;background:#fff;margin:0} .application-link>.icon,body.design-studio .application-link>.icon{height:19px;width:19px;transition:transform .25s ease} .application-card:hover .application-link>.icon{transform:translate(2px,-2px)} @media(max-width:1100px){.brand-item{padding-inline:18px}.brand-logo img{max-width:155px}.brand-item:nth-child(2) img{max-width:162px}.application-image,body.design-studio .application-image{height:255px}.application-card h3,body.design-studio .application-card h3{font-size:22px;padding-inline:25px}.application-card p,body.design-studio .application-card p,.application-link,body.design-studio .application-link{padding-inline:25px}} @media(max-width:900px){.brand-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:15px}.brand-item,.brand-item:nth-child(n+5){grid-column:span 2;height:145px}.brand-item:last-child{grid-column:3/span 2}.application-grid,body.design-studio .application-grid{gap:22px}.application-image,body.design-studio .application-image{height:230px}.application-card h3,body.design-studio .application-card h3{font-size:20px}.application-card p,body.design-studio .application-card p{font-size:11px}} @media(max-width:720px){.brand-partners,body.design-studio .brand-partners{padding-block:40px}.brand-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.brand-item,.brand-item:nth-child(n+5){grid-column:span 2;height:133px;padding:25px 15px 17px;gap:13px;border-radius:14px}.brand-item:last-child{grid-column:2/span 2}.brand-logo{height:57px}.brand-logo img{max-width:133px;max-height:51px}.brand-item:nth-child(2) img{max-width:140px}.brand-item:nth-child(3) img{max-width:119px;max-height:51px}.brand-item:nth-child(4) img{max-width:115px}.brand-item:nth-child(5) img{max-width:112px}.brand-item:nth-child(6) img{max-width:125px}.brand-item:nth-child(7) img{max-width:130px}.brand-name{font-size:9px;letter-spacing:0;min-height:27px;display:flex;align-items:center;justify-content:center}.brand-index{font-size:7px;top:11px;left:12px}.application-grid,body.design-studio .application-grid{grid-template-columns:minmax(0,1fr);gap:25px}.application-card,body.design-studio .application-card,.application-card:hover,body.design-studio .application-card:hover{padding:0;border-radius:15px}.application-image,body.design-studio .application-image{height:235px}.application-top,body.design-studio .application-top{top:16px;left:17px;right:17px}.application-top>.icon,body.design-studio .application-top>.icon{width:37px;height:37px;padding:9px}.application-card h3,body.design-studio .application-card h3{font-size:22px;padding:22px 23px 10px}.application-card p,body.design-studio .application-card p{font-size:11px;padding:0 23px 22px}.application-link,body.design-studio .application-link{font-size:10px;padding:17px 23px}} @media(max-width:380px){.brand-item,.brand-item:nth-child(n+5){padding-inline:12px}.brand-name{font-size:8px}.application-image,body.design-studio .application-image{height:215px}.application-card h3,body.design-studio .application-card h3{font-size:20px}} @media(prefers-reduced-motion:reduce){.brand-item,.brand-item:after,.application-card,.application-image,.application-link>.icon{transition:none!important}.brand-item:hover,.application-card:hover,body.design-studio .application-card:hover,.application-card:hover .application-image,body.design-studio .application-card:hover .application-image,.application-card:hover .application-link>.icon{transform:none}} /* Compact, logo-only partner cards. */ .brand-partners,body.design-studio .brand-partners{padding-block:55px} .brand-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:1180px;margin-inline:auto} .brand-item,.brand-item:nth-child(n+5),.brand-item:last-child{grid-column:auto;height:110px;padding:20px 24px;border-radius:14px;gap:0} .brand-logo{height:65px} .brand-logo img{max-width:155px;max-height:53px} .brand-item:nth-child(2) img{max-width:170px} .brand-item:nth-child(3) img{max-width:125px;max-height:53px} .brand-item:nth-child(4) img{max-width:137px} .brand-item:nth-child(5) img{max-width:112px} .brand-item:nth-child(6) img{max-width:145px} .brand-item:nth-child(7) img{max-width:133px} .brand-item:nth-child(8) img{max-width:145px} body.motion-ready .application-card.visible:hover{transform:translateY(-5px)} @media(max-width:720px){.brand-partners,body.design-studio .brand-partners{padding-block:39px}.brand-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.brand-item,.brand-item:nth-child(n+5),.brand-item:last-child{grid-column:auto;height:100px;padding:17px 15px;border-radius:12px}.brand-logo{height:58px}.brand-logo img{max-height:49px}.brand-item:nth-child(3) img{max-height:49px}.brand-item:nth-child(5) img{max-width:108px}} @media(prefers-reduced-motion:reduce){body.motion-ready .application-card.visible:hover{transform:none}} .solution-showcase,body.design-studio .solution-showcase{border-radius:20px;overflow:hidden} .product-image-frame{position:absolute;inset:56px 24px 32px;border-radius:15px;overflow:hidden;background:#e4eef5} .product-image-frame img,body.design-studio .product-image-frame img{display:block;width:100%;height:100%;padding:0;object-fit:contain;object-position:center;border-radius:15px} .system-pill,body.design-studio .system-pill{border-radius:7px} @media(max-width:720px){.solution-showcase,body.design-studio .solution-showcase{border-radius:16px}.product-image-frame{inset:45px 18px 24px;border-radius:12px}.product-image-frame img,body.design-studio .product-image-frame img{border-radius:12px}} /* Filled brand glyphs do not inherit the line-icon stroke treatment. */ .brand-item:nth-child(3) img{max-width:190px;max-height:60px} .solution-selector{grid-template-columns:repeat(4,minmax(0,1fr))} @media(max-width:900px){.solution-selector{grid-template-columns:repeat(2,minmax(0,1fr))}} .icon.icon--whatsapp{fill:currentColor;stroke:none;stroke-width:0} .product-image-frame{background:#eef1f3} .brand-item:focus-visible{outline:3px solid var(--blue);outline-offset:4px} .image-load-status{position:absolute;bottom:12px;left:24px;right:24px;font-size:13px;color:var(--muted);margin:0} .product-image-frame img{transition:opacity .15s ease} .product-image-frame.is-changing img{opacity:0} @media(prefers-reduced-motion:reduce){.product-image-frame img{transition:none}} .whatsapp-float>.icon.icon--whatsapp{width:24px;height:24px} @media(max-width:720px){.whatsapp-float>.icon.icon--whatsapp{width:23px;height:23px}} /* One bounded type scale and content width across phones and large monitors. */ html { scroll-padding-top: 104px; } .responsive-layout { --content-max: 1760px; --gutter: clamp(20px, 3.2vw, 72px); --nav-height: clamp(76px, 3.5vw, 88px); --topline-height: 30px; --body-size: clamp(1rem, .88rem + .22vw, 1.25rem); --small-size: clamp(.875rem, .8rem + .15vw, 1rem); --label-size: clamp(.75rem, .68rem + .12vw, .875rem); --section-space: clamp(64px, 6vw, 128px); font-size: var(--body-size); } .responsive-layout .container { width: min(var(--content-max), calc(100% - 2 * var(--gutter))); } .responsive-layout .topline-inner { height: var(--topline-height); font-size: var(--label-size); } .responsive-layout .topline-inner > span:nth-child(2), .responsive-layout .topline a { font-size: var(--label-size); } .responsive-layout .nav-wrap { height: var(--nav-height); gap: 24px; } .responsive-layout .brand img { width: clamp(104px, 4.8vw, 128px); height: auto; } .responsive-layout .navigation { gap: clamp(20px, 1.6vw, 36px); } .responsive-layout .navigation a { font-size: clamp(.9375rem, .84rem + .14vw, 1.0625rem); } .responsive-layout .navigation a[aria-current="page"] { color: var(--blue); } .responsive-layout .navigation a[aria-current="page"]::after { transform: scaleX(1); } .responsive-layout .button, .responsive-layout .text-link { font-size: clamp(.9375rem, .85rem + .18vw, 1.125rem); line-height: 1.5; } .responsive-layout .button { min-height: 52px; padding: 14px 24px; gap: 22px; } .responsive-layout .button-nav { min-height: 48px; padding: 12px 20px; font-size: .9375rem; } .responsive-layout .eyebrow { font-size: var(--label-size); letter-spacing: .14em; } .responsive-layout .section { padding-block: var(--section-space); } .responsive-layout .section-heading { gap: clamp(32px, 4vw, 96px); margin-bottom: clamp(36px, 3.2vw, 64px); } .responsive-layout h2, .responsive-layout .section-heading h2 { font-size: clamp(2.125rem, 1.2rem + 2.6vw, 4.75rem); letter-spacing: -.045em; line-height: 1.2; } .responsive-layout .section-heading > p { font-size: var(--body-size); width: 42%; max-width: 46ch; padding-top: 28px; } .responsive-layout .hero.container { width: 100%; max-width: none; height: clamp(680px, calc(100svh - var(--nav-height) - var(--topline-height)), 1120px); min-height: 680px; } .responsive-layout .hero-copy { padding: clamp(48px, 5.2vw, 128px) 0 0 max(var(--gutter), calc((100vw - var(--content-max)) / 2)); width: 68%; } .responsive-layout .hero h1 { font-size: clamp(80px, 8.7vw, 184px); letter-spacing: -.06em; line-height: 1.02; margin-top: 32px; } .responsive-layout .hero .eyebrow { font-size: var(--label-size); } .responsive-layout .hero-description { font-size: clamp(1.0625rem, .94rem + .25vw, 1.375rem); line-height: 1.7; max-width: 38ch; margin-top: 30px; } .responsive-layout .hero-actions { margin-top: 32px; } .responsive-layout .hero-actions .button { font-size: clamp(.9375rem, .85rem + .18vw, 1.125rem); } .responsive-layout .hero-baseline { padding-inline: max(var(--gutter), calc((100vw - var(--content-max)) / 2)); min-height: clamp(84px, 5vw, 104px); } .responsive-layout .hero-system { flex: 1; min-width: 0; width: auto; font-size: var(--small-size); letter-spacing: .05em; } .responsive-layout .hero-system > span { font-size: var(--label-size); } .responsive-layout .scene-coordinate, .responsive-layout .climate-control { right: max(var(--gutter), calc((100vw - var(--content-max)) / 2)); } .responsive-layout .scene-coordinate { font-size: 11px; top: 36px; } .responsive-layout .scene-coordinate span:first-child { font-size: 18px; } .responsive-layout .climate-control { --dial-size: clamp(196px, 14vw, 248px); width: clamp(228px, 17vw, 288px); padding: 18px 14px 14px; bottom: 136px; transform: none; } .responsive-layout .control-label { font-size: 11px; letter-spacing: .07em; } .responsive-layout .temperature-dial { width: var(--dial-size); height: var(--dial-size); } .responsive-layout .dial-ring { width: 100%; height: 100%; } .responsive-layout .dial-top { font-size: 10px; top: calc(var(--dial-size) * .13); } .responsive-layout .temperature { font-size: clamp(68px, 5.3vw, 92px); top: calc(var(--dial-size) * .23); letter-spacing: -.05em; } .responsive-layout .temperature > span { font-size: .5em; } .responsive-layout .temperature-caption { font-size: 9px; top: calc(var(--dial-size) * .67); letter-spacing: .08em; } .responsive-layout .temperature-buttons { bottom: 2px; left: 14%; right: 14%; } .responsive-layout .temperature-buttons button { width: 44px; height: 44px; font-size: 24px; } .responsive-layout .temperature-buttons > span { font-size: 12px; } .responsive-layout .climate-modes button { font-size: 12px; padding: 10px 3px; min-height: 38px; } .responsive-layout .value-strip { padding-block: 32px; } .responsive-layout .value-strip > div { font-size: var(--small-size); gap: 14px; } .responsive-layout .brand-partners { padding-block: clamp(40px, 4vw, 72px); } .responsive-layout .brands-intro h2 { font-size: clamp(1.875rem, 1.2rem + 1.5vw, 3rem); letter-spacing: -.04em; } .responsive-layout .brands-intro > p { font-size: var(--body-size); max-width: 48ch; } .responsive-layout .brand-grid { max-width: 1520px; gap: 18px; } .responsive-layout .brand-item { height: clamp(110px, 8.5vw, 150px); padding: 20px 24px; } .responsive-layout .brand-logo { height: 76px; } .responsive-layout .brand-logo img { max-width: 190px; max-height: 65px; } .responsive-layout .brand-item:nth-child(2) img { max-width: 210px; } .responsive-layout .brand-item:nth-child(3) img { max-width: 210px; max-height: 65px; } .responsive-layout .brand-item:nth-child(4) img { max-width: 170px; } .responsive-layout .brand-item:nth-child(5) img { max-width: 140px; } .responsive-layout .brand-item:nth-child(6) img { max-width: 180px; } .responsive-layout .brand-item:nth-child(7) img { max-width: 170px; } .responsive-layout .brand-item:nth-child(8) img { max-width: 180px; } .responsive-layout .solution-selector { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-bottom: 30px; } .responsive-layout .solution-tab { min-width: 0; gap: 18px; padding-block: 24px !important; } .responsive-layout .tab-number { font-size: clamp(28px, 2vw, 40px); } .responsive-layout .tab-copy { min-width: 0; } .responsive-layout .tab-copy strong { font-size: clamp(1rem, .85rem + .45vw, 1.5625rem); letter-spacing: -.03em; } .responsive-layout .tab-copy > span { font-size: var(--small-size); line-height: 1.7; } .responsive-layout .solution-tab > .icon { width: 24px; height: 24px; } .responsive-layout .solution-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: clamp(440px, 27vw, 620px); } .responsive-layout .solution-panel { min-width: 0; min-height: 440px; padding: clamp(28px, 3vw, 64px); } .responsive-layout .panel-title h3 { font-size: clamp(1.75rem, 1.2rem + 1.5vw, 3rem); letter-spacing: -.04em; } .responsive-layout .system-pill { font-size: var(--label-size); padding: 9px 14px; margin-top: 22px; } .responsive-layout .solution-panel p { font-size: var(--body-size); max-width: 52ch; margin-top: 26px; line-height: 1.75; } .responsive-layout .panel-bottom { padding-top: 24px; margin-top: 28px; } .responsive-layout .panel-bottom > span { font-size: var(--small-size); } .responsive-layout .panel-bottom .text-link { font-size: var(--body-size); margin-top: 18px; } .responsive-layout .product-visual { min-height: 440px; } .responsive-layout .product-category { font-size: var(--label-size); letter-spacing: .12em; left: 34px; top: 30px; } .responsive-layout .product-image-frame { inset: 66px 30px 42px; } .responsive-layout .approach-inner { padding-block: var(--section-space); gap: 64px; } .responsive-layout .approach-copy { grid-template-columns: 1.1fr .9fr; column-gap: 80px; } .responsive-layout .approach h2 { font-size: clamp(2.5rem, 1.5rem + 3vw, 5.5rem); letter-spacing: -.045em; } .responsive-layout .approach-copy > p { font-size: var(--body-size); max-width: 46ch; } .responsive-layout .approach .button { font-size: var(--small-size); } .responsive-layout .process-number { font-size: clamp(30px, 2.2vw, 44px); } .responsive-layout .process-step h3 { font-size: clamp(1.125rem, .95rem + .3vw, 1.5rem); } .responsive-layout .process-step p { font-size: var(--body-size); max-width: 40ch; line-height: 1.75; } .responsive-layout .application-image { height: clamp(240px, 21vw, 390px); } .responsive-layout .application-card h3 { font-size: clamp(1.375rem, 1rem + .85vw, 2rem); padding: 28px 32px 12px; } .responsive-layout .application-card p { font-size: var(--body-size); padding: 0 32px 28px; line-height: 1.75; } .responsive-layout .application-link { font-size: var(--small-size); padding: 22px 32px; } .responsive-layout .application-top > span { font-size: 12px; } .responsive-layout .faq { gap: clamp(32px, 5vw, 100px); padding-block: var(--section-space); } .responsive-layout .faq h2 { font-size: clamp(2.125rem, 1.2rem + 2.6vw, 4.75rem); } .responsive-layout .faq-intro > p { font-size: var(--body-size); max-width: 42ch; } .responsive-layout .faq-list summary { font-size: var(--body-size); padding-block: 28px; } .responsive-layout .faq-list details > p { font-size: var(--body-size); line-height: 1.75; } .responsive-layout .contact-section { padding-block: var(--section-space); } .responsive-layout .contact-layout { gap: clamp(40px, 5vw, 96px); grid-template-columns: repeat(2, minmax(0, 1fr)); } .responsive-layout .contact-copy h2 { font-size: clamp(2.125rem, 1.2rem + 2.6vw, 4.75rem); letter-spacing: -.045em; } .responsive-layout .contact-copy > p { font-size: var(--body-size); max-width: 48ch; } .responsive-layout .contact-phone { max-width: 100%; } .responsive-layout .contact-phone strong { font-size: clamp(1.25rem, 1.2rem + .6vw, 2rem); letter-spacing: -.03em; } .responsive-layout .contact-copy small { font-size: var(--label-size); } .responsive-layout .address-block address { font-size: var(--body-size); } .responsive-layout .metro-note, .responsive-layout .address-block .text-link { font-size: var(--small-size); } .responsive-layout .contact-form { min-width: 0; padding: clamp(24px, 2.8vw, 48px); } .responsive-layout .form-heading h3 { font-size: clamp(1.375rem, 1rem + .7vw, 1.875rem); } .responsive-layout .form-heading > span { font-size: var(--label-size); } .responsive-layout .form-heading .icon { width: 20px; height: 20px; } .responsive-layout .form-description, .responsive-layout .form-note, .responsive-layout .form-status { font-size: var(--small-size); } .responsive-layout .field label { font-size: var(--small-size); } .responsive-layout .field label > span.optional { font-size: var(--label-size); } .responsive-layout .field input, .responsive-layout .field select, .responsive-layout .field textarea { font-size: max(16px, var(--body-size)); padding: 14px; min-height: 50px; } .responsive-layout .field input::placeholder, .responsive-layout .field textarea::placeholder { font-size: 1em; } .responsive-layout .form-submit { font-size: var(--body-size); } .responsive-layout .footer-top { gap: 32px; } .responsive-layout .footer-brand p, .responsive-layout .footer-links, .responsive-layout .footer-cta > span { font-size: var(--small-size); } .responsive-layout .footer-cta strong { font-size: clamp(1.25rem, 1rem + .6vw, 2rem); } .responsive-layout .footer-bottom { font-size: var(--label-size); flex-wrap: wrap; row-gap: 16px; } .responsive-layout .footer-giant { font-size: clamp(48px, 11.2vw, 248px); } .responsive-layout .whatsapp-float { width: 54px; height: 54px; right: 24px; bottom: 24px; } .responsive-layout .whatsapp-float > .icon.icon--whatsapp { width: 28px; height: 28px; } .responsive-layout .whatsapp-float > span { font-size: var(--small-size); right: 66px; } @media (max-width: 1100px) { .responsive-layout .solution-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); } .responsive-layout .navigation { position: absolute; top: var(--nav-height); left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--gutter) 24px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 12px 16px #20234108; } .responsive-layout .navigation.open { display: flex; } .responsive-layout .navigation a { font-size: 16px; padding-block: 16px; border-bottom: 1px solid var(--line); } .responsive-layout .navigation a:after { display: none; } .responsive-layout .menu-toggle { display: block; flex: none; width: 44px; height: 44px; } .responsive-layout .button-nav { display: inline-flex; margin-left: auto; } .responsive-layout .hero-copy { width: 73%; } .responsive-layout .hero h1 { font-size: clamp(76px, 10vw, 110px); } .responsive-layout .hero-system { font-size: 12px; margin-right: 18px; padding-right: 18px; } .responsive-layout .scroll-cue { display: none; } .responsive-layout .approach-copy { gap: 28px 40px; } .responsive-layout .process { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; } .responsive-layout .contact-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; } .responsive-layout .contact-form { max-width: 760px; width: 100%; } .responsive-layout .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .responsive-layout .brands-intro { display: block; } .responsive-layout .brands-intro > p { margin-top: 22px; max-width: 52ch; } .responsive-layout .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .responsive-layout .brand-item { height: 116px; } .responsive-layout .hero-description { max-width: 30ch; } .responsive-layout .hero-system { font-size: 11px; letter-spacing: 0; } .responsive-layout .section-heading { display: block; } .responsive-layout .section-heading > p { width: auto; max-width: 54ch; padding-top: 0; margin-top: 22px; } .responsive-layout .solution-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .responsive-layout .solution-tab { gap: 12px; } .responsive-layout .tab-copy > span { font-size: 14px; } .responsive-layout .solution-showcase { grid-template-columns: minmax(0, 1fr); min-height: 0; } .responsive-layout .product-visual { order: 1; display: flex; flex-direction: column; height: auto; min-height: 0; padding: 20px 20px 0; } .responsive-layout .product-category { position: static; display: block; margin-bottom: 12px; } .responsive-layout .product-image-frame { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 3 / 2; flex: none; border-radius: 14px; overflow: hidden; } .responsive-layout .product-image-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: inherit; } .responsive-layout .image-load-status { position: static; inset: auto; margin: 10px 0 0; font-size: 13px; line-height: 1.6; } .responsive-layout .solution-panel { order: 2; min-height: 0; padding-top: 24px; } .responsive-layout .approach-copy { display: block; } .responsive-layout .approach h2 { margin-top: 24px; } .responsive-layout .approach-copy > p { margin-top: 24px; max-width: 54ch; } .responsive-layout .approach .button { margin-top: 28px; } .responsive-layout .faq { grid-template-columns: minmax(0, 1fr); } .responsive-layout .footer-top { flex-wrap: wrap; } } @media (max-width: 720px) { html { scroll-padding-top: 80px; } .responsive-layout { --nav-height: 64px; --topline-height: 28px; --gutter: 20px; } .responsive-layout .brand img { width: 94px; } .responsive-layout .topline-inner { font-size: 10px; letter-spacing: .05em; } .responsive-layout .topline a { font-size: 10px; } .responsive-layout .button-nav { min-height: 44px; font-size: 12px; padding: 10px 14px; gap: 12px; } .responsive-layout .hero.container { height: max(820px, calc(100svh - 92px)); min-height: 820px; } .responsive-layout .hero-copy { width: 100%; padding: 34px var(--gutter) 0; } .responsive-layout .hero h1 { font-size: clamp(56px, 16vw, 88px); margin-top: 24px; } .responsive-layout .hero-description { font-size: 16px; max-width: 34ch; margin-top: 22px; } .responsive-layout .hero-actions { margin-top: 24px; } .responsive-layout .hero-actions .button { min-height: 50px; padding: 12px 18px; font-size: 14px; } .responsive-layout .scene-image { top: 41%; height: 59%; } .responsive-layout .scene-shade { background: linear-gradient(180deg, #f1f4f7 0%, #f1f4f7 41%, #f1f4f7ad 59%, transparent 76%); } .responsive-layout .climate-scene[data-mode=warm] .scene-shade { background: linear-gradient(180deg, #f5f2ef 0%, #f5f2ef 41%, #f5f2efad 59%, transparent 76%); } .responsive-layout .hero-baseline { min-height: 84px; padding-inline: 20px; } .responsive-layout .hero-system { display: block; font-size: 10px; line-height: 1.6; padding-right: 12px; margin-right: 12px; } .responsive-layout .hero-system > span { font-size: 10px; } .responsive-layout .hero-system:last-of-type { border: 0; margin: 0; padding: 0; } .responsive-layout .climate-control { --dial-size: 180px; width: 212px; right: 20px; bottom: 108px; padding: 12px 10px; } .responsive-layout .temperature { font-size: 62px; } .responsive-layout .temperature-caption { font-size: 8px; } .responsive-layout .control-label { font-size: 10px; } .responsive-layout .dial-top { font-size: 9px; } .responsive-layout .value-strip { gap: 22px 14px; padding-block: 28px; } .responsive-layout .value-strip > div { justify-content: flex-start; font-size: 13px; gap: 10px; } .responsive-layout .eyebrow { font-size: 11px; letter-spacing: .1em; } .responsive-layout .brand-grid { gap: 12px; } .responsive-layout .brand-item { height: 106px; padding: 16px 14px; } .responsive-layout .brand-logo { height: 64px; } .responsive-layout .brand-logo img { max-height: 53px; } .responsive-layout .solution-tab { display: block; min-height: 0; } .responsive-layout .tab-number { margin-bottom: 12px; } .responsive-layout .tab-copy strong { font-size: 16px; line-height: 1.5; } .responsive-layout .tab-copy > span { display: none; } .responsive-layout .product-visual { padding: 16px 16px 0; } .responsive-layout .product-category { font-size: 10px; letter-spacing: .08em; } .responsive-layout .solution-panel { padding: 24px 28px 28px; } .responsive-layout .system-pill { font-size: 12px; } .responsive-layout .panel-bottom > span { font-size: 14px; } .responsive-layout .application-grid { grid-template-columns: minmax(0, 1fr); } .responsive-layout .application-image { height: clamp(220px, 56vw, 340px); } .responsive-layout .application-card h3 { padding: 24px 24px 12px; } .responsive-layout .application-card p { padding: 0 24px 24px; } .responsive-layout .application-link { padding: 20px 24px; font-size: 14px; } .responsive-layout .faq-list summary { padding-block: 24px; } .responsive-layout .form-heading { align-items: flex-start; flex-wrap: wrap; gap: 12px; } .responsive-layout .form-row { grid-template-columns: minmax(0, 1fr); } .responsive-layout .contact-form { padding: 24px; } .responsive-layout .contact-phone { gap: 12px; } .responsive-layout .contact-icon { width: 42px; height: 42px; } .responsive-layout .footer-top { align-items: flex-start; } .responsive-layout .footer-brand { width: 100%; } .responsive-layout .footer-links { column-gap: 32px; } .responsive-layout .footer-cta strong { flex-wrap: wrap; gap: 16px; } .responsive-layout .footer-bottom { font-size: 12px; } .responsive-layout .whatsapp-float { width: 50px; height: 50px; right: 16px; bottom: 16px; } .responsive-layout .whatsapp-float > span { display: none; } } @media (max-width: 600px) { .responsive-layout .solution-selector { grid-template-columns: minmax(0, 1fr); gap: 12px; } .responsive-layout .solution-tab { display: grid; grid-template-columns: 28px minmax(0, 1fr) 20px; align-items: center; gap: 12px; min-height: 76px; padding: 18px 16px !important; border: 1px solid #dce4ed !important; border-radius: 12px !important; background: #fff; transition: background .2s, border-color .2s; } .responsive-layout .solution-tab.active { background: #edf5fb; border-color: #8ebada !important; } .responsive-layout .solution-tab:before { display: none; } .responsive-layout .solution-tab:focus-visible { outline-width: 2px; outline-offset: 3px; } .responsive-layout .tab-number { align-self: center; min-width: 0; width: auto; margin: 0; font-size: 20px; line-height: 1; } .responsive-layout .tab-copy { min-width: 0; } .responsive-layout .tab-copy strong { font-size: 15px; line-height: 1.5; } .responsive-layout .solution-tab > .icon { display: block; align-self: center; justify-self: end; width: 20px; height: 20px; margin: 0; transform: none; } .responsive-layout .process { grid-template-columns: minmax(0, 1fr); gap: 32px; } } @media (max-width: 420px) { .responsive-layout .button-nav { display: none; } .responsive-layout .menu-toggle { margin-left: auto; } .responsive-layout .contact-phone > .icon { display: none; } .responsive-layout .brand-logo img { max-height: 49px; } .responsive-layout .brand-item:nth-child(3) img { max-height: 49px; } } /* Interactive thermostat: shared geometry, restrained seasonal color. */ .climate-scene { --climate-accent: #2375b8; --climate-soft: #e8f2fa; --climate-border: #b7d3e8; --climate-panel-top: #f4fafff2; --climate-panel-bottom: #fffffff0; } .climate-scene[data-mode="warm"] { --climate-accent: #d7102b; --climate-soft: #fff1f3; --climate-border: #f1bcc5; --climate-panel-top: #fffffff2; --climate-panel-bottom: #fffffff0; } .climate-scene .scene-image { filter: saturate(.97) hue-rotate(2deg); transition: filter .55s ease; } .climate-scene .climate-control { --dial-size: 160px; display: block; width: 212px; height: auto; padding: 14px 12px 8px; border-radius: 20px; max-width: calc(100% - 32px); background: linear-gradient(180deg, var(--climate-panel-top), var(--climate-panel-bottom)); border-color: var(--climate-border); transition: background .35s ease, border-color .35s ease; } .climate-scene .control-label, body.design-studio .climate-scene .control-label { justify-content: center; margin: 0; font-size: 10px; line-height: 15px; letter-spacing: .06em; } .climate-scene .control-label .status-dot { background: var(--climate-accent); } .climate-scene .temperature-dial, body.design-studio .climate-scene .temperature-dial { isolation: isolate; width: var(--dial-size); height: var(--dial-size); margin: 4px auto 0; } .climate-scene .dial-ring { z-index: 1; width: 100%; height: auto; aspect-ratio: 1; overflow: visible; pointer-events: none; outline: none; /* The existing 130-degree rotation is part of the JS arc geometry. */ transform: rotate(130deg); } .climate-scene .dial-ring .ring-track, .climate-scene .dial-ring .ring-value, .climate-scene .dial-ring .dial-knob { pointer-events: none; } .climate-scene .dial-ring .ring-track { stroke: #b6c4d0; stroke-width: 1.5; } .climate-scene .dial-ring .ring-value { stroke: var(--climate-accent); stroke-width: 3; transition: stroke .3s ease; /* JS owns dasharray; it must remain synchronized with the thumb. */ } .climate-scene .dial-ring .dial-touch { fill: none; stroke: transparent; stroke-width: 20; stroke-linecap: round; pointer-events: stroke; touch-action: none; cursor: grab; } .climate-scene .dial-ring .dial-knob { fill: var(--climate-accent); stroke: #fff; stroke-width: 1.8; transition: fill .3s ease; } .climate-scene .temperature-dial.is-dragging .dial-touch { cursor: grabbing; } .climate-scene .temperature-dial.is-dragging .ring-value, .climate-scene .temperature-dial.is-dragging .dial-knob { transition: none; } .climate-scene .temperature-dial:has(.dial-ring:focus-visible)::before { content: ""; position: absolute; inset: 1% auto auto 1%; width: 98%; aspect-ratio: 1; border: 2px dashed var(--climate-accent); border-radius: 50%; pointer-events: none; z-index: 0; } .climate-scene .dial-ring:focus-visible .ring-track { stroke: var(--climate-accent); } .climate-scene .temperature, .climate-scene .dial-top, .climate-scene .temperature-caption { z-index: 2; pointer-events: none; } .climate-scene .temperature, body.design-studio .climate-scene .temperature { top: calc(var(--dial-size) * .21); font-size: 54px; font-weight: 400; line-height: 1.2; letter-spacing: -.055em; } .climate-scene .temperature > span, body.design-studio .climate-scene .temperature > span { font-size: .5em; margin-top: 3px; } .climate-scene .temperature > span, .climate-scene[data-mode="warm"] .temperature > span { color: var(--climate-accent); transition: color .3s ease; } .climate-scene .dial-top, body.design-studio .climate-scene .dial-top { font-weight: 650; font-size: 8px; top: calc(var(--dial-size) * .11); } .climate-scene .temperature-caption, body.design-studio .climate-scene .temperature-caption { letter-spacing: .07em; font-size: 7px; top: calc(var(--dial-size) * .63); } .climate-scene .temperature-buttons, body.design-studio .climate-scene .temperature-buttons { z-index: 4; bottom: 0; left: 6px; right: 6px; } .climate-scene .temperature-buttons button { min-width: 40px; min-height: 40px; width: 40px; height: 40px; font-size: 20px; background: #fff; color: var(--navy); border-color: #cbd6df; transition: border-color .2s ease, background .2s ease; } .climate-scene .temperature-buttons button:hover:not(:disabled) { background: var(--climate-soft); border-color: var(--climate-accent); } .climate-scene .temperature-buttons button:disabled { opacity: .45; cursor: default; } .climate-scene .temperature-buttons button:focus-visible, .climate-scene .climate-modes button:focus-visible, .climate-scene .climate-plan:focus-visible { outline: 2px solid var(--climate-accent); outline-offset: 3px; } .climate-scene .climate-modes, body.design-studio .climate-scene .climate-modes { display: flex; flex-direction: row; margin: 6px 0 0; padding: 3px; gap: 0; border-radius: 8px; background: var(--climate-soft); } .climate-scene .climate-modes button, body.design-studio .climate-scene .climate-modes button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 50%; min-height: 36px; padding: 7px 3px; border: 0; border-radius: 6px; font-size: 11px; line-height: 1.3; white-space: nowrap; transition: color .25s ease, background .25s ease; } .climate-scene .climate-modes button > svg { width: 15px; height: 15px; flex: none; } .climate-scene .climate-modes button[aria-pressed="true"], .climate-scene[data-mode="warm"] .climate-modes button[aria-pressed="true"] { background: #fff; color: var(--climate-accent); box-shadow: 0 1px 5px #20324a0a; } .climate-scene .climate-feedback { margin: 0; padding: 0; border: 0; text-align: center; } .climate-scene .climate-summary, .climate-scene .climate-hint { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; } .climate-scene .climate-plan { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 32px; max-width: 100%; padding: 6px 0; color: var(--navy); font-size: 10px; font-weight: 750; line-height: 1.5; text-decoration: underline; text-decoration-color: var(--climate-border); text-underline-offset: 4px; } .climate-scene .climate-plan:hover { color: var(--climate-accent); text-decoration-color: currentColor; } .climate-scene .climate-plan > svg { width: 15px; height: 15px; flex: none; } .contact-form .comfort-preference { margin: 20px 0; padding: 12px 14px; color: #185887; background: #e8f2fa; border: 1px solid #b7d3e8; border-radius: 5px; font-size: 13px; font-weight: 600; line-height: 1.6; } .contact-form .comfort-preference[data-mode="warm"] { color: #d7102b; background: #fff1f3; border-color: #f1bcc5; } /* The alternate view uses the same mini control with a dark surface. */ body.design-studio .climate-scene { --climate-accent: #98cbed; --climate-soft: #293e58; --climate-border: #93c2e850; } body.design-studio .climate-scene[data-mode="warm"] { --climate-accent: #ff8e99; --climate-soft: #3a2431; --climate-border: #ff8e9960; } body.design-studio .climate-scene .scene-image { filter: brightness(.66) saturate(.73) hue-rotate(2deg); } body.design-studio .climate-scene .climate-control { --dial-size: 160px; display: block; width: 212px; height: auto; padding: 14px 12px 8px; border-radius: 20px; transform: none; background: #171b32e3; border-color: var(--climate-border); } body.design-studio .climate-scene .temperature-dial { width: var(--dial-size); height: var(--dial-size); } body.design-studio .climate-scene .climate-feedback { margin: 0; padding: 0; border: 0; } body.design-studio .climate-scene .control-label .status-dot { background: var(--climate-accent); } body.design-studio .climate-scene .dial-ring .ring-track { stroke: #697b93; } body.design-studio .climate-scene .dial-ring .ring-value { stroke: var(--climate-accent); } body.design-studio .climate-scene .dial-ring .dial-knob { fill: var(--climate-accent); stroke: #171b32; } body.design-studio .climate-scene .temperature > span, body.design-studio .climate-scene[data-mode="warm"] .temperature > span { color: var(--climate-accent); } body.design-studio .climate-scene .temperature-buttons button { color: #fff; border-color: #72829b; background: #29344c; } body.design-studio .climate-scene .temperature-buttons button:hover:not(:disabled) { background: var(--climate-soft); border-color: var(--climate-accent); } body.design-studio .climate-scene .climate-modes button[aria-pressed="true"], body.design-studio .climate-scene[data-mode="warm"] .climate-modes button[aria-pressed="true"] { color: #172039; background: var(--climate-accent); border-color: var(--climate-accent); box-shadow: none; } body.design-studio .climate-scene .climate-summary { color: var(--climate-accent); } body.design-studio .climate-scene .climate-hint { color: #c1cede; } body.design-studio .climate-scene .climate-plan { color: #f0f5fc; } body.design-studio .climate-scene .climate-plan:hover { color: var(--climate-accent); } @media (max-width: 720px) { .climate-scene.hero { height: 820px; min-height: 820px; } .responsive-layout .climate-scene.hero.container { height: max(820px, calc(100svh - 92px)); min-height: 820px; } .climate-scene .climate-control { --dial-size: 144px; width: 192px; padding: 12px 10px 7px; transform: none; } .climate-scene .temperature, body.design-studio .climate-scene .temperature { font-size: 48px; } .climate-scene .climate-feedback { margin: 0; padding: 0; } .climate-scene .climate-plan { font-size: 10px; min-height: 32px; gap: 6px; } .climate-scene .climate-modes button { gap: 5px; } .climate-scene .climate-modes button > svg { width: 14px; height: 14px; } .climate-scene .temperature-dial:has(.dial-ring:focus-visible)::before { border-width: 1.5px; } body.design-studio .climate-scene.hero.container { height: max(950px, calc(100svh - 92px)); min-height: 950px; } body.design-studio .climate-scene .climate-control { --dial-size: 144px; width: 192px; height: auto; padding: 12px 10px 7px; } body.design-studio .climate-scene .climate-modes button { min-height: 36px; font-size: 11px; padding-inline: 3px; } body.design-studio .climate-scene .scene-image { filter: brightness(.6) saturate(.74) hue-rotate(2deg); } } @media (max-width: 380px) { .responsive-layout .climate-scene.hero.container { height: max(850px, calc(100svh - 92px)); min-height: 850px; } body.design-studio .climate-scene.hero.container { height: max(950px, calc(100svh - 92px)); min-height: 950px; } body.design-studio .climate-scene .climate-control { --dial-size: 144px; } body.design-studio .climate-scene .temperature-dial { height: var(--dial-size); } .climate-scene .climate-plan { gap: 5px; font-size: 10px; } } /* Heating keeps the white page and uses Megatherm red for blue accents. */ body[data-climate-mode="warm"] { --blue: #d7102b; --red: #d7102b; --navy: #202341; --ink: #22263c; --paper: #fff; --pale: #fff1f3; --muted: #626a78; --line: #e1e5e9; background: #fff; color: var(--ink); } body[data-climate-mode="warm"] .header, body[data-climate-mode="warm"] .topline, body[data-climate-mode="warm"] .navigation, body[data-climate-mode="warm"] .brand-partners, body[data-climate-mode="warm"] .brand-item, body[data-climate-mode="warm"] .solutions, body[data-climate-mode="warm"] .applications, body[data-climate-mode="warm"] .application-card:nth-child(n), body[data-climate-mode="warm"] .application-card h3, body[data-climate-mode="warm"] .application-card p, body[data-climate-mode="warm"] .application-link, body[data-climate-mode="warm"] .contact-form, body[data-climate-mode="warm"] .footer { background: #fff; border-color: var(--line); } body[data-climate-mode="warm"] .header, body[data-climate-mode="warm"] .topline, body[data-climate-mode="warm"] .navigation, body[data-climate-mode="warm"] .brands-intro, body[data-climate-mode="warm"] .brands-intro .eyebrow, body[data-climate-mode="warm"] .tab-copy strong, body[data-climate-mode="warm"] .application-card:nth-child(n), body[data-climate-mode="warm"] .application-card h3, body[data-climate-mode="warm"] .applications .eyebrow, body[data-climate-mode="warm"] .contact-form, body[data-climate-mode="warm"] .field label, body[data-climate-mode="warm"] .footer { color: var(--ink); } body[data-climate-mode="warm"] .topline-inner > span:nth-child(2), body[data-climate-mode="warm"] .hero-description, body[data-climate-mode="warm"] .tab-number, body[data-climate-mode="warm"] .tab-copy > span, body[data-climate-mode="warm"] .solution-panel p, body[data-climate-mode="warm"] .panel-bottom > span, body[data-climate-mode="warm"] .product-category, body[data-climate-mode="warm"] .visual-note, body[data-climate-mode="warm"] .application-card p, body[data-climate-mode="warm"] .field label > span.optional, body[data-climate-mode="warm"] .field input::placeholder, body[data-climate-mode="warm"] .field textarea::placeholder, body[data-climate-mode="warm"] .form-description, body[data-climate-mode="warm"] .form-note, body[data-climate-mode="warm"] .footer-brand p, body[data-climate-mode="warm"] .footer-cta > span, body[data-climate-mode="warm"] .footer-bottom { color: var(--muted); } body[data-climate-mode="warm"] .topline .status-dot { background: var(--blue); } body[data-climate-mode="warm"] .hero { background: #f1f4f7; } body[data-climate-mode="warm"]:not(.design-studio) .climate-scene .scene-shade { background: linear-gradient(90deg, #f1f4f7 0%, #f1f4f7e0 29%, #f1f4f72e 60%, transparent 100%); } body[data-climate-mode="warm"] .hero-baseline, body[data-climate-mode="warm"] .approach { background: #d7102b; color: #fff; } body[data-climate-mode="warm"] .hero-system > span, body[data-climate-mode="warm"] .hero-system > .icon, body[data-climate-mode="warm"] .hero-system:hover { color: #fff; } .climate-scene[data-mode="warm"] .hero-copy h1 > span:first-of-type, .climate-scene[data-mode="warm"] .airflow { color: var(--climate-accent); } body[data-climate-mode="warm"] .brand-item:hover { border-color: #f1bcc5; box-shadow: 0 12px 28px #2023410a; } body[data-climate-mode="warm"] .solution-tab { color: var(--ink); border-color: var(--line) !important; } body[data-climate-mode="warm"] .solution-tab.active { background: #fff1f3; border-color: #d7102b !important; } body[data-climate-mode="warm"] .solution-tab.active .tab-number, body[data-climate-mode="warm"] .solution-tab.active > .icon { color: #d7102b; } body[data-climate-mode="warm"] .solution-showcase, body[data-climate-mode="warm"] .solution-panel, body[data-climate-mode="warm"] .product-visual { background: #fff1f3; color: var(--ink); border-color: var(--line); } body[data-climate-mode="warm"] .product-image-frame { background: #fff; } body[data-climate-mode="warm"] .panel-bottom, body[data-climate-mode="warm"] .value-strip, body[data-climate-mode="warm"] .faq-list details, body[data-climate-mode="warm"] .footer-bottom { border-color: var(--line); } body[data-climate-mode="warm"] .visual-note { background: #ffffffdf; } body[data-climate-mode="warm"] .system-pill { color: #d7102b; background: #fff; } body[data-climate-mode="warm"] .approach .eyebrow, body[data-climate-mode="warm"] .approach h2 span, body[data-climate-mode="warm"] .approach-copy > p, body[data-climate-mode="warm"] .process-number, body[data-climate-mode="warm"] .process-step > .icon, body[data-climate-mode="warm"] .process-step h3, body[data-climate-mode="warm"] .process-step p { color: #fff; } body[data-climate-mode="warm"] .approach .button { color: #d7102b; background: #fff; } body[data-climate-mode="warm"] .approach .button:hover { background: #fff1f3; } body[data-climate-mode="warm"] .application-card:nth-child(n):hover { background: #fff; border-color: #f1bcc5; } body[data-climate-mode="warm"] .application-link, body[data-climate-mode="warm"] .application-link > .icon { color: #d7102b; } body[data-climate-mode="warm"] .contact-section { background: #202341; color: #fff; } body[data-climate-mode="warm"] .contact-copy .eyebrow, body[data-climate-mode="warm"] .contact-copy > p { color: #bec8da; } body[data-climate-mode="warm"] .contact-copy h2 span, body[data-climate-mode="warm"] .contact-icon, body[data-climate-mode="warm"] .address-block .text-link { color: #ff96a6; } body[data-climate-mode="warm"] .contact-copy small, body[data-climate-mode="warm"] .metro-note { color: #b3bdd0; } body[data-climate-mode="warm"] .contact-phone { border-color: #ffffff26; } body[data-climate-mode="warm"] .contact-icon { background: transparent; border-color: #ffffff26; } body[data-climate-mode="warm"] .address-block address { color: #fff; } body[data-climate-mode="warm"] .field input, body[data-climate-mode="warm"] .field select, body[data-climate-mode="warm"] .field textarea { background: #f8fafb; border-color: #e3e7ec; color: var(--navy); } body[data-climate-mode="warm"] .form-heading > span { color: #467a70; } body[data-climate-mode="warm"] .footer-giant { color: #dce3ea; } /* The alternate view retains neutral navy surfaces and red highlights. */ body.design-studio[data-climate-mode="warm"] { background: #171b32; color: #f7f8fa; } body.design-studio[data-climate-mode="warm"] .hero, body.design-studio[data-climate-mode="warm"] .value-strip, body.design-studio[data-climate-mode="warm"] .footer { background: #171b32; } body.design-studio[data-climate-mode="warm"] .climate-scene[data-mode="warm"] .scene-shade { background: linear-gradient(90deg, #171b32f5 0%, #171b32da 30%, #171b326b 62%, #171b3240 100%), linear-gradient(0deg, #171b32 0%, transparent 35%); } body.design-studio[data-climate-mode="warm"] .hero-description { color: #d0d8e4; } body.design-studio[data-climate-mode="warm"] .value-strip > div { color: #d8e2ed; } body.design-studio[data-climate-mode="warm"] .value-strip .icon, body.design-studio[data-climate-mode="warm"] .faq h2 span, body.design-studio[data-climate-mode="warm"] .faq-intro > .text-link, body.design-studio[data-climate-mode="warm"] .footer-cta .icon, body.design-studio[data-climate-mode="warm"] .footer-links a:hover { color: #ff8e99; } body.design-studio[data-climate-mode="warm"] .faq, body.design-studio[data-climate-mode="warm"] .faq-list summary, body.design-studio[data-climate-mode="warm"] .footer { color: #f7f8fa; } body.design-studio[data-climate-mode="warm"] .faq-intro > p, body.design-studio[data-climate-mode="warm"] .faq-list details > p, body.design-studio[data-climate-mode="warm"] .footer-brand p, body.design-studio[data-climate-mode="warm"] .footer-cta > span, body.design-studio[data-climate-mode="warm"] .footer-bottom { color: #bbc7d8; } body.design-studio[data-climate-mode="warm"] .faq-list details, body.design-studio[data-climate-mode="warm"] .footer-bottom { border-color: #ffffff2f; } body.design-studio[data-climate-mode="warm"] .faq-plus:before, body.design-studio[data-climate-mode="warm"] .faq-plus:after { background: #ff8e99; } body.design-studio[data-climate-mode="warm"] .footer-brand img { background: #fff; } body.design-studio[data-climate-mode="warm"] .footer-giant { color: #ffffff14; } @media (max-width: 720px) { body[data-climate-mode="warm"]:not(.design-studio) .climate-scene .scene-shade { background: linear-gradient(180deg, #f1f4f7 0%, #f1f4f7 41%, #f1f4f7ad 59%, transparent 76%); } body.design-studio[data-climate-mode="warm"] .climate-scene[data-mode="warm"] .scene-shade { background: linear-gradient(180deg, #171b32dc 0%, #171b32c9 30%, #171b3266 62%, #171b32ed 100%); } } @media (prefers-reduced-motion: reduce) { .climate-scene .scene-image, .climate-scene .climate-control, .climate-scene .ring-value, .climate-scene .dial-knob, .climate-scene .temperature > span, .climate-scene .temperature-buttons button, .climate-scene .climate-modes button { transition: none; } } /* Homepage case studies share the site's climate palette and type scale. */ .home-projects{background:#fff;border-block:1px solid var(--line)} .home-projects .hp-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(30px,3vw,52px)} .home-projects .hp-heading h2{margin-top:20px;max-width:22ch} .home-projects .hp-heading h2 span{color:var(--blue)} .home-projects .hp-intro{max-width:46ch;color:var(--muted);font-size:var(--body-size);margin-top:22px} .home-projects .hp-all{flex:none;white-space:nowrap;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:14px} .home-projects .hp-all:hover{background:var(--pale);border-color:var(--blue)} .home-projects .hp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,32px)} .home-projects .hp-card{min-width:0;height:100%} .home-projects .hp-link{display:flex;flex-direction:column;height:100%;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:22px;transition:border-color .25s,box-shadow .25s,transform .25s} .home-projects .hp-link:hover{border-color:var(--blue);box-shadow:0 14px 32px #2023410c;transform:translateY(-4px)} .home-projects .hp-link:focus-visible{outline:3px solid var(--blue);outline-offset:5px} .home-projects .hp-media{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--pale)} .home-projects .hp-media img{width:100%;height:100%;object-fit:cover;object-position:50% 43%;transition:transform .45s ease} .home-projects .hp-link:hover .hp-media img{transform:scale(1.035)} .home-projects .hp-category{position:absolute;top:18px;left:18px;padding:7px 12px;border-radius:99px;background:#fffffff2;color:var(--navy);font-size:var(--label-size);line-height:1.5;font-weight:700} .home-projects .hp-copy{display:flex;flex:1;flex-direction:column;padding:clamp(20px,1.8vw,30px)} .home-projects .hp-location{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:var(--small-size);line-height:1.5} .home-projects .hp-location .icon{width:16px;height:16px;color:var(--blue)} .home-projects .hp-copy h3{font-size:clamp(22px,1.5vw,29px);letter-spacing:-.035em;line-height:1.3;margin-top:12px;color:var(--navy)} .home-projects .hp-system{font-size:var(--small-size);line-height:1.6;color:var(--muted);margin:11px 0 24px} .home-projects .hp-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--line);padding-top:18px;margin-top:auto;color:var(--navy);font-size:var(--small-size);font-weight:750} .home-projects .hp-open{display:grid;place-items:center;width:38px;height:38px;flex:none;background:var(--pale);color:var(--blue);border-radius:50%;transition:color .25s,background .25s} .home-projects .hp-open .icon{width:20px;height:20px} .home-projects .hp-link:hover .hp-open{background:var(--blue);color:#fff} @media(max-width:1100px){.home-projects .hp-heading{align-items:flex-start}.home-projects .hp-category{top:12px;left:12px;font-size:11px}.home-projects .hp-copy{padding:20px}.home-projects .hp-copy h3{font-size:22px}} @media(max-width:760px){.home-projects .hp-heading{flex-direction:column;gap:24px}.home-projects .hp-grid{grid-template-columns:1fr;gap:24px}.home-projects .hp-link{border-radius:19px}.home-projects .hp-media{aspect-ratio:16/9}.home-projects .hp-heading h2{margin-top:18px}.home-projects .hp-intro{margin-top:18px}.home-projects .hp-copy h3{font-size:clamp(23px,5vw,28px)}.home-projects .hp-copy{padding:22px}.home-projects .hp-bottom{margin-top:20px;padding-top:16px}.home-projects .hp-category{font-size:12px;top:14px;left:14px}.home-projects .hp-all{width:100%;justify-content:space-between}} @media(prefers-reduced-motion:reduce){.home-projects .hp-link,.home-projects .hp-media img,.home-projects .hp-open{transition:none}.home-projects .hp-link:hover,.home-projects .hp-link:hover .hp-media img{transform:none}} /* A single real project, presented as an editorial case study on the homepage. */ .ref-project{background:var(--pale);scroll-margin-top:110px} .ref-project .ref-project-eyebrow{margin-bottom:28px} .ref-project-card{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);overflow:hidden;border:1px solid var(--line);border-radius:28px;background:#fff;box-shadow:0 16px 48px #20234106} .ref-project-copy{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(30px,3.8vw,64px);min-width:0} .ref-project-location{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:var(--small-size);line-height:1.6;margin:0 0 28px} .ref-project-location>.icon{width:19px;height:19px;flex:none;color:var(--blue)} .ref-project #ref-project-title{font-family:'Sora',var(--font);font-size:clamp(36px,3.25vw,60px);font-weight:550;letter-spacing:-.055em;line-height:1.18;margin:0;color:var(--navy)} .ref-project #ref-project-title>span{display:block;color:inherit} .ref-project-copy>h3{font-family:var(--font);font-size:clamp(22px,1.7vw,30px);font-weight:750;letter-spacing:-.03em;line-height:1.4;margin:23px 0 0;color:var(--navy)} .ref-project-description{display:grid;gap:15px;margin-top:26px} .ref-project-description>p{font-size:clamp(16px,1.05vw,20px);line-height:1.85;color:var(--muted);margin:0} .ref-project-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%;padding:24px 0;margin:29px 0 0;border-block:1px solid var(--line)} .ref-project-metrics>div{display:flex;flex-direction:column;gap:9px;min-width:0} .ref-project-metrics dt{font-size:clamp(12px,.85vw,15px);line-height:1.6;color:var(--muted)} .ref-project-metrics dd{order:-1;font-family:'Sora',var(--font);font-size:clamp(30px,2.3vw,43px);font-weight:550;letter-spacing:-.04em;line-height:1.1;color:var(--navy);margin:0} .ref-project-metrics dd>span{font-size:15px;margin-left:4px} .ref-project-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:25px 0 26px;padding:0} .ref-project-tags li{border:1px solid var(--line);border-radius:8px;padding:8px 11px;color:var(--blue);background:var(--pale);font-size:12px;font-weight:650;line-height:1.5} .ref-project .ref-project-cta{border-radius:13px;margin-top:auto;gap:22px;font-size:clamp(14px,.95vw,17px);padding:17px 21px;min-height:54px;background:var(--navy);color:#fff} .ref-project-gallery{display:flex;flex-direction:column;min-width:0;border-left:1px solid var(--line);background:#fff} .ref-project-stage{position:relative;flex:1;min-height:490px;margin:0;overflow:hidden;touch-action:pan-y pinch-zoom;background:var(--pale)} .ref-project-stage>.ref-project-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%} .ref-project-badge{position:absolute;left:26px;top:26px;display:inline-flex;align-items:center;gap:10px;background:#fffffff0;border:1px solid #ffffff80;border-radius:10px;padding:13px 17px;color:var(--navy);font-size:11px;font-weight:750;letter-spacing:.11em;line-height:1.6} .ref-project-badge>span{height:6px;width:6px;flex:none;border-radius:50%;background:var(--red)} .ref-project-caption{position:absolute;inset:auto 22px 22px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 17px;border:1px solid #ffffffa6;border-radius:12px;background:#fffffff2;color:var(--navy)} .ref-project-caption>p{font-size:clamp(12px,.85vw,15px);font-weight:650;line-height:1.6;margin:0;max-width:43ch} .ref-project-controls{display:flex;align-items:center;gap:10px;flex:none} .ref-project-controls>button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);transition:background .2s,border-color .2s} .ref-project-controls>button:hover{background:var(--pale);border-color:var(--blue)} .ref-project-controls .icon{width:19px;height:19px} .ref-project-controls [data-reference-prev]>.icon{transform:rotate(180deg)} .ref-project-controls>span{min-width:45px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)} .ref-project-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px;background:#fff} .ref-project-thumbs>button{position:relative;min-width:0;aspect-ratio:16/10;overflow:hidden;border:2px solid transparent;border-radius:10px;padding:0;background:var(--pale);transition:border-color .2s,opacity .2s;opacity:.65} .ref-project-thumbs>button[aria-pressed="true"]{border-color:var(--blue);opacity:1} .ref-project-thumbs>button:hover{opacity:1} .ref-project-thumbs img{display:block;width:100%;height:100%;object-fit:cover} .ref-project :is(.ref-project-controls>button,.ref-project-thumbs>button):focus-visible{outline:3px solid var(--blue);outline-offset:3px} .ref-project-error{margin:0;padding:0 18px 16px;color:var(--muted);font-size:13px} .ref-project [hidden]{display:none!important} @media(max-width:1100px){.ref-project-copy{padding:32px}.ref-project #ref-project-title{font-size:38px}.ref-project-copy>h3{font-size:23px}.ref-project-caption{inset:auto 15px 15px;flex-wrap:wrap}.ref-project-stage{min-height:460px}.ref-project-controls{margin-left:auto}.ref-project-badge{top:18px;left:18px}} @media(max-width:980px){.ref-project-card{grid-template-columns:1fr;border-radius:22px}.ref-project-gallery{border-left:0;border-top:1px solid var(--line)}.ref-project-stage{min-height:0;aspect-ratio:3/2;flex:none}.ref-project-copy{padding:38px}.ref-project-description{max-width:67ch}.ref-project-metrics{max-width:650px}.ref-project .ref-project-cta{margin-top:0}.ref-project-thumbs{padding:16px;gap:12px}.ref-project-thumbs>button{aspect-ratio:16/9}} @media(max-width:600px){.ref-project .ref-project-eyebrow{margin-bottom:22px;font-size:10px;letter-spacing:.11em}.ref-project-card{border-radius:18px}.ref-project-copy{padding:27px 23px}.ref-project-location{font-size:13px;margin-bottom:23px}.ref-project #ref-project-title{font-size:clamp(30px,8vw,42px)}.ref-project-copy>h3{font-size:23px;margin-top:20px}.ref-project-description{margin-top:21px;gap:13px}.ref-project-description>p{font-size:16px;line-height:1.8}.ref-project-metrics{gap:12px;margin-top:25px;padding:22px 0}.ref-project-metrics dd{font-size:32px}.ref-project-metrics dt{font-size:12px}.ref-project-tags{margin:22px 0;gap:7px}.ref-project-tags li{font-size:10px;padding:7px 8px}.ref-project .ref-project-cta{width:100%;justify-content:space-between;padding:15px 17px;font-size:13px;gap:10px}.ref-project-stage{aspect-ratio:auto;overflow:visible;touch-action:auto}.ref-project-stage>.ref-project-image{position:relative;display:block;height:auto;aspect-ratio:4/3;object-fit:cover}.ref-project-badge{font-size:9px;left:14px;top:14px;padding:9px 11px;gap:7px}.ref-project-caption{position:relative;inset:auto;display:flex;flex-direction:column;align-items:stretch;gap:13px;padding:17px 15px;border-radius:0;border:0;border-bottom:1px solid var(--line);background:#fff}.ref-project-caption>p{max-width:none;font-size:12px}.ref-project-controls{margin-left:0;justify-content:space-between;gap:13px}.ref-project-controls>span{font-size:12px}.ref-project-thumbs{padding:12px;gap:7px}.ref-project-thumbs>button{border-radius:7px;aspect-ratio:1.12}} @media(prefers-reduced-motion:reduce){.ref-project-controls>button,.ref-project-thumbs>button{transition:none}} /* Shared compact navigation. Use after each page's stylesheet. */ .header .nav-wrap { gap: 24px; } .header .brand { flex: none; } .header .navigation { display: flex; align-items: center; gap: 6px; } .header .navigation .nav-link { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 7px 11px 7px 7px; border: 1px solid #e6ebf0; border-radius: 13px; background: #fff; color: var(--ink); font-size: clamp(15px, .9rem + .1vw, 17px); font-weight: 650; line-height: 1.4; text-decoration: none; box-shadow: 0 2px 6px #20234104; transition: color .2s, background .2s, border-color .2s, box-shadow .2s; } .header .navigation .nav-link::after { display: none; } .header .nav-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border: 1px solid #e2e8ee; border-radius: 9px; background: #fff; color: #647486; box-shadow: 0 2px 4px #20234104; transition: color .2s, background .2s, border-color .2s; } .header .nav-icon .icon { width: 17px; height: 17px; stroke-width: 1.65; } .header .navigation .nav-link:hover, .header .navigation .nav-link.is-active { color: var(--blue); background: color-mix(in srgb, var(--blue) 7%, white); border-color: color-mix(in srgb, var(--blue) 19%, white); box-shadow: 0 3px 9px #20234105; } .header .nav-link:hover .nav-icon, .header .nav-link.is-active .nav-icon { background: var(--blue); border-color: var(--blue); color: #fff; } .header .nav-link:focus-visible, .header .button-nav:focus-visible, .header .menu-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; } .header .navigation .nav-chevron { display: none; } .header .button-nav { flex: none; gap: 18px; min-height: 46px; padding: 10px 12px 10px 19px; border: 1px solid var(--navy, #202341); border-radius: 13px; background: var(--navy, #202341); color: #fff; box-shadow: 0 4px 12px #20234112; font-size: 14px; } .header .button-nav > .icon { box-sizing: content-box; width: 18px; height: 18px; padding: 4px; border: 1px solid #ffffff33; border-radius: 8px; transition: background .2s; } .header .button-nav:hover { background: var(--blue); border-color: var(--blue); } .header .button-nav:hover > .icon { background: #ffffff18; } .header .menu-toggle { border: 1px solid var(--line); border-radius: 12px; background: #fff; } @media (min-width: 1281px) { .header .menu-toggle { display: none; } } @media (max-width: 1280px) { .header .navigation { position: absolute; top: calc(100% + 10px); left: 0; right: 0; width: min(640px, calc(100% - 2 * var(--gutter, 20px))); max-height: calc(100dvh - 120px); margin-inline: auto; padding: 12px; display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 8px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #e2e8ee; border-radius: 20px; background: #fff; box-shadow: 0 18px 50px #20234118, 0 4px 12px #20234108; } .header .navigation.open { display: grid; } .header .navigation .nav-link { min-height: 58px; padding: 10px; gap: 10px; border: 1px solid #e7ecf1; border-radius: 12px; background: #f8fafc; font-size: 15px; white-space: normal; } .header .navigation .nav-link:last-child { grid-column: 1 / -1; } .header .navigation .nav-link.is-active, .header .navigation .nav-link:hover { background: color-mix(in srgb, var(--blue) 7%, white); border-color: color-mix(in srgb, var(--blue) 22%, white); } .header .nav-label { flex: 1; } .header .navigation .nav-chevron { display: block; width: 14px; height: 14px; flex: none; color: #9aa8b7; } .header .nav-link.is-active .nav-chevron { color: var(--blue); } .header .menu-toggle { display: block; flex: none; width: 44px; height: 44px; } .header .button-nav { display: inline-flex; margin-left: auto; } } @media (max-width: 600px) { .header .navigation { grid-template-columns: minmax(0, 1fr); } .header .navigation .nav-link { min-height: 54px; } } @media (max-width: 420px) { .header .button-nav { display: none; } .header .menu-toggle { margin-left: auto; } } @media (prefers-reduced-motion: reduce) { .header .navigation .nav-link, .header .nav-icon, .header .button-nav > .icon { transition: none; } }