@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
:root{--navy:#142a40;--gold:#d99438;--ice:#93d6ed;--ink:#273544;--paper:#faf9f6}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;font-family:Montserrat,Arial,sans-serif;color:var(--ink);line-height:1.8}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}img{max-width:100%;display:block}button,a,input,textarea,select{outline-offset:5px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(31px,3.1vw,48px);line-height:1.35;font-weight:700}h2{font-size:32px;line-height:1.3}h3{font-size:18px;line-height:1.45}.wrap{width:min(1160px,90%);margin:auto}.header{position:absolute;z-index:10;top:35px;left:0;width:100%;color:white}.header-inner{display:flex;align-items:start;justify-content:space-between;gap:25px;padding:22px 0}.brand{width:330px;flex-shrink:0}.header-right{text-align:right;flex:1}.web{font-size:13px;border-bottom:1px solid #ffffff55;padding:3px 0 13px;display:block}.web span{color:var(--gold);margin-right:10px}.nav{display:flex;justify-content:flex-end;align-items:center;gap:27px;margin-top:17px;font-size:12px;font-weight:500;white-space:nowrap}.nav a:hover{color:var(--ice)}.nav .contact-link{background:var(--gold);padding:7px 15px;color:#142a40}.menu{display:none}.hero{min-height:740px;display:flex;align-items:center;color:white;background:linear-gradient(90deg,#10283e12,#10283e55 35%,#10283edb 65%),url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=2200&q=85') center/cover}.hero-copy{width:53%;margin-left:auto;padding:165px 0 90px}.rule{display:block;width:120px;height:3px;background:var(--gold);margin:0 0 25px -35px}.hero p{font-size:16px;max-width:580px;color:#e7ecf0}.button{display:inline-block;padding:10px 24px;border:1px solid var(--gold);font-size:12px;font-weight:600;letter-spacing:.4px;cursor:pointer;background:transparent;color:inherit;transition:.2s}.button:hover{background:var(--gold);color:var(--navy)}.hero .button{float:right;margin-top:22px}.section{padding:90px 0}.eyebrow{text-transform:uppercase;color:#8d672f;font-size:12px;font-weight:600;letter-spacing:2px;margin-bottom:9px}.heading{display:flex;align-items:center;gap:22px;margin-bottom:48px}.heading h2{margin:0}.heading:after{content:'';height:2px;width:90px;background:var(--gold)}.two{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.two img{width:100%;height:380px;object-fit:cover}.body-copy{font-size:14px;color:#65707a}.about-title{font-size:27px;line-height:1.5}.values{padding:80px 0;background:var(--navy);color:white}.values .eyebrow{color:var(--ice)}.values h2{font-size:clamp(25px,3vw,42px);letter-spacing:1px}.values p{max-width:800px;color:#c1ced7;font-size:15px;margin-bottom:0}.services{background:var(--paper)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.service img{height:235px;width:100%;object-fit:cover;margin-bottom:26px}.service p{font-size:14px;color:#65707a}.service h3{border-left:3px solid var(--gold);padding-left:15px}.at-glance{border-top:1px solid #d7dce0;margin-top:45px;padding-top:30px}.at-glance p{font-size:14px;margin-bottom:0}.clients{text-align:center}.clients h2{font-size:21px}.client-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:35px}.client-slots div{padding:30px 10px;border:1px dashed #c4cbd1;color:#7c8790;font-size:12px}.note{font-size:12px;color:#7a858e}.location{background:#e8f1f5;padding:55px 0;text-align:center}.location h2{font-size:28px;margin-bottom:8px}.location p{margin:0;font-size:12px;letter-spacing:2px}.footer{background:var(--navy);color:#c8d3dc;padding:55px 0 20px}.footer-grid{display:grid;grid-template-columns:1.2fr .7fr 1.2fr;gap:65px;font-size:13px}.footer h3{color:#fff}.footer a{display:block}.footer a:hover{color:var(--gold)}.copyright{border-top:1px solid #ffffff22;padding-top:20px;margin-top:35px;font-size:10px;display:flex;justify-content:space-between;gap:20px}.page-head{background:linear-gradient(100deg,#142a40,#254660);padding:195px 0 65px;color:white}.page-head h1{margin-bottom:12px}.page-head p{max-width:650px;color:#ccd8e0}.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:35px}.filter{border:1px solid #ccd4db;background:white;padding:8px 17px;cursor:pointer;font-size:12px}.filter.active{background:var(--navy);color:white;border-color:var(--navy)}.project{border-bottom:2px solid var(--gold);padding-bottom:20px}.project img{width:100%;height:250px;object-fit:cover}.project small{display:block;color:#8d672f;margin:20px 0 5px;font-size:10px;letter-spacing:1px;text-transform:uppercase}.project h3{margin-bottom:10px}.project p{font-size:13px;color:#65707a}.project[hidden]{display:none}.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:80px}.contact-grid h3{margin-top:28px}.form{background:var(--paper);padding:35px}.form label{display:block;font-size:12px;font-weight:600;margin-bottom:17px}.form input,.form textarea,.form select{display:block;width:100%;padding:11px;border:1px solid #c7cfd4;background:white;margin-top:7px;border-radius:0}.form textarea{resize:vertical;min-height:125px}.form .button{background:var(--navy);color:white}.form-status{font-size:13px;margin:15px 0 0;color:#315e47}.skip{position:absolute;top:-100px;background:white;color:black;padding:10px;z-index:100}.skip:focus{top:0} @media(max-width:1000px){.brand{width:260px}.nav{gap:15px;font-size:10px}.hero-copy{width:56%}.two{gap:35px}.footer-grid{gap:30px}}@media(max-width:720px){.header{top:34px}.header-inner{align-items:center;padding-top:12px}.brand{width:235px}.web{display:none}.menu{display:block;background:none;border:1px solid #ffffff66;color:white;padding:7px 12px;font-size:12px}.nav{display:none;position:absolute;left:5%;right:5%;top:90px;background:var(--navy);padding:24px;box-shadow:0 10px 30px #0004;flex-direction:column;align-items:stretch;text-align:left;font-size:13px}.nav.open{display:flex}.hero{min-height:710px;background-position:38% center;background-image:linear-gradient(#142a4077,#142a40e8),url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1100&q=85')}.hero-copy{width:100%;padding:155px 0 65px}.hero p{font-size:14px}.rule{margin-left:0}.hero .button{float:none}.section{padding:60px 0}.two,.grid,.contact-grid,.footer-grid{grid-template-columns:1fr;gap:35px}.two img{height:300px}.heading{margin-bottom:30px}.client-slots{grid-template-columns:1fr 1fr;gap:15px}.values{padding:55px 0}.values h2{font-size:28px}.page-head{padding-top:155px}.contact-grid{gap:25px}.form{padding:25px}.copyright{display:block}.service img{height:260px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Keep navigation visible while preserving the transparent hero header. */
html{scroll-padding-top:155px}
.header{position:fixed;top:0;background:rgba(20,42,64,.94);box-shadow:0 3px 18px #0003;transition:background-color .25s ease,box-shadow .25s ease;}
.header.scrolled{background:rgba(20,42,64,.93);box-shadow:0 3px 18px #0002;backdrop-filter:blur(8px)}
@media(max-width:720px){html{scroll-padding-top:110px}.header{top:0}}

/* Fixed scenery lets the following sections pass over it, as in the reference. */
.hero{background-attachment:fixed;background-position:center top}
#about{position:relative;background:#fff}
#services{background-color:#f4f4f1;background-image:linear-gradient(#ffffff55,#ffffff55),url('assets/architecture.svg');background-size:cover;background-position:center;background-attachment:fixed}
.clients{position:relative;background:#fff}
@media(prefers-reduced-motion:reduce),(hover:none) and (pointer:coarse){
  .hero,#services{background-attachment:scroll}
}

/* Fill the opening screen, including on taller desktop displays. */
.hero{min-height:100vh;min-height:100svh;background-size:cover}

/* Contact layout: map alongside details, with the page passing under the header. */
.contact-page .header.scrolled{background:rgba(20,42,64,.76);backdrop-filter:none}
.contact-page .contact-grid{grid-template-columns:1.25fr 1fr;gap:40px;align-items:start}
.contact-map iframe{display:block;width:100%;height:650px;border:0;background:#e8f1f5}
.contact-map>a{display:inline-block;margin-top:12px;font-size:12px;text-decoration:underline}
.contact-details .form{background:transparent;padding:18px 0 0}
.contact-details h2{font-size:27px}
.contact-details h3{margin-top:16px}
@media(max-width:720px){.contact-page .contact-grid{grid-template-columns:1fr}.contact-map iframe{height:380px}}

/* Match the map height to the simplified contact column. */
.contact-page .contact-grid{align-items:stretch;grid-template-columns:1.15fr 1fr}
.contact-map{position:relative;min-height:480px}
.contact-map iframe{position:absolute;inset:0;height:100%;width:100%}
.contact-details h2{font-size:25px;line-height:1.5;margin-bottom:18px}
.contact-details .form{padding-top:5px}
.contact-details .form h3{font-size:26px;font-weight:500;margin:0 0 18px}
.contact-details .form-status:empty{display:none}
@media(max-width:720px){.contact-page .contact-grid{grid-template-columns:1fr}.contact-map{min-height:360px}.contact-map iframe{height:100%}}

/* Reuse the Home photograph in the shorter Contact banner. */
.contact-page .page-head{background:linear-gradient(90deg,rgba(20,42,64,.78),rgba(20,42,64,.35)),url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=2200&q=85') center 45%/cover no-repeat;background-attachment:scroll}
.contact-page .page-head .eyebrow{color:var(--ice)}

/* A lighter translucent header lets the page remain visible underneath. */
.header.scrolled,.contact-page .header.scrolled{background:rgba(20,42,64,.94);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 3px 18px #0003}

/* Client logos keep their original proportions and colours. */
.client-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;list-style:none;padding:12px 0 20px;margin:28px 0 0;scrollbar-width:thin;scrollbar-color:#d99438 #edf0f2}
.client-card{flex:0 0 calc((100% - 72px)/4);height:180px;display:flex;align-items:center;justify-content:center;scroll-snap-align:start;border:1px solid #e4e8eb;border-radius:4px;background:#fff;padding:14px}
.client-card img{width:auto;height:auto;max-width:100%;max-height:150px;object-fit:contain}
.client-controls{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:22px}
.client-controls button{border:1px solid #d6dde3;background:white;color:var(--navy);cursor:pointer;padding:8px 16px;min-height:44px}
.client-controls button:hover{border-color:var(--gold);background:#faf6ef}
.client-play{font-size:12px;min-width:145px}
@media(max-width:900px){.client-card{flex-basis:calc((100% - 48px)/3)}}
@media(max-width:600px){.client-track{gap:16px}.client-card{flex-basis:calc((100% - 16px)/2);height:150px;padding:10px}.client-card img{max-height:125px}}

.client-carousel{position:relative;padding:0 44px}.client-track{scrollbar-width:none;scroll-snap-type:none}.client-track::-webkit-scrollbar{display:none}.client-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:1;border:1px solid #d6dde3;background:#fff;color:var(--navy);width:38px;height:46px;cursor:pointer}.client-prev{left:0}.client-next{right:0}.client-arrow:hover{border-color:var(--gold);background:#faf6ef}

.client-arrow,.client-arrow:hover{border:0;background:transparent;box-shadow:none}
.client-arrow{font-size:27px}


/* Keep the full company name legible against the Home photograph. */
.header:not(.scrolled) .brand{background:linear-gradient(90deg,rgba(20,42,64,.62),rgba(20,42,64,0));padding:10px 16px 10px 0;border-radius:3px}


.brand{width:390px}
@media(max-width:1000px){.brand{width:295px}}
@media(max-width:720px){.brand{width:245px}}
.header:not(.scrolled) .brand{background:linear-gradient(90deg,rgba(20,42,64,.86),rgba(20,42,64,.30));padding:12px 18px 12px 8px}


/* Show the bold Heritage mark directly over the photo. */
.header:not(.scrolled) .brand{background:none;padding:0}


/* Heritage construction photograph used on Home and Contact. */
.hero{background-image:linear-gradient(90deg,rgba(20,42,64,.38),rgba(20,42,64,.78)),url('assets/heritage-construction-site.jpeg');background-position:center center}
.contact-page .page-head{background-image:linear-gradient(90deg,rgba(20,42,64,.70),rgba(20,42,64,.42)),url('assets/heritage-construction-site.jpeg');background-position:center 45%}
@media(max-width:720px){.hero{background-image:linear-gradient(rgba(20,42,64,.48),rgba(20,42,64,.85)),url('assets/heritage-construction-site.jpeg');background-position:52% center}}


.project-offerings .body-copy,.product-range .body-copy{max-width:780px;margin-bottom:32px}.offering-grid{row-gap:45px}.offering-art{height:250px;display:grid;place-items:center;background:linear-gradient(135deg,#193b54,#8cbed2);color:#fff;letter-spacing:3px;font-weight:700}.room-art{background:linear-gradient(135deg,#22546a,#b5d8df)}.climate-art{background:linear-gradient(135deg,#1b344a,#95abc0)}.product-range{background:#f5f8f8}.product-list{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:36px}.product-list>div{background:#fff;border-left:3px solid var(--gold);padding:24px}.product-list h3{margin-bottom:8px}.product-list p{font-size:14px;color:#65707a;margin:0}@media(max-width:720px){.product-list{grid-template-columns:1fr}}


.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.gallery-grid figure{margin:0}.gallery-grid img{width:100%;height:190px;object-fit:cover}.gallery-grid figcaption{font-size:12px;color:#65707a;margin-top:7px}@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.gallery-grid{grid-template-columns:1fr 1fr;gap:10px}.gallery-grid img{height:135px}}


.product-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:0 0 36px}.product-examples figure{margin:0;background:#fff}.product-examples img{display:block;width:100%;height:320px;object-fit:contain;padding:20px;box-sizing:border-box}.product-examples figcaption{display:flex;justify-content:space-between;gap:12px;padding:0 24px 22px;font-weight:700}.product-examples figcaption span{font-size:12px;font-weight:400;color:#65707a}.product-examples a{color:inherit;text-decoration:underline}@media(max-width:720px){.product-examples{grid-template-columns:1fr}.product-examples img{height:260px}.product-examples figcaption{flex-wrap:wrap}}

.product-examples .photo{object-fit:cover;padding:0}

.product-list{align-items:stretch}.product-list .product-card{padding:0;overflow:hidden}.product-card>img{display:block;width:100%;height:260px;object-fit:contain;background:#fff}.product-card:nth-child(2)>img{object-fit:cover}.product-card-copy{padding:24px}.product-card-copy small{display:block;margin-top:16px;color:#77838b;font-size:11px}.product-card-copy p{line-height:1.6}

.product-list .product-card{background:#fff;border-left:3px solid var(--gold)}

/* Service descriptions: three lines with an ellipsis, expanded on click. */
.services .intro{font-size:14px;color:#65707a;margin:-28px 0 34px}
.service-text{font-size:14px;color:#65707a;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;cursor:pointer}
.service-text p{margin-bottom:10px}
.service:not(.open) .service-text p{display:inline;margin:0}
.service.open .service-text{display:block;cursor:auto}
.service .more{background:none;border:0;padding:0;color:#8d672f;font-size:12px;font-weight:600;letter-spacing:.4px;cursor:pointer}
.service .more:hover{color:var(--navy)}

/* Product categories: an overview grid below the services. */
.products{background:#fff}
.products .intro{font-size:14px;color:#65707a;margin:-28px 0 34px}
.product-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.product{background:var(--paper);border-top:3px solid var(--gold);padding:28px 24px 26px}
.product svg{width:44px;height:44px;color:var(--navy);margin-bottom:16px}
.product h3{font-size:15px;letter-spacing:.5px;margin-bottom:8px}
.product p{font-size:13px;line-height:1.7;color:#65707a;margin:0}
.product-cta{background:var(--navy);color:#fff;border-top-color:var(--ice);display:flex;flex-direction:column;justify-content:center}
.product-cta p{color:#c8d3dc;margin-bottom:18px}
.product-cta .button{align-self:flex-start}
@media(max-width:1000px){.product-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.product-grid{gap:12px}.product{padding:20px 16px}.product h3{font-size:13px}.product p{font-size:12px}.product svg{width:36px;height:36px;margin-bottom:12px}}

/* Refrigeration and cooling lead: hero photo, featured service card. */
.hero{background-image:linear-gradient(90deg,#10283e30,#10283e66 35%,#10283ee0 65%),url('https://images.unsplash.com/photo-1698479603408-1a66a6d9e80f?auto=format&fit=crop&w=2200&q=85')}
.hero-tag{display:inline-block;color:var(--ice)!important;font-size:12px!important;font-weight:600;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px}
.service-grid{grid-template-columns:repeat(2,1fr)}
.service.featured{grid-column:1/-1;display:grid;grid-template-columns:1.15fr 1fr;background:var(--navy);color:#fff;border-top:3px solid var(--ice)}
.service.featured img{contain:size;height:100%;min-height:360px;margin:0}
.service-body{padding:36px 40px 34px}
.service.featured h3{font-size:24px;border-left-color:var(--ice)}
.service.featured .service-text{color:#c8d3dc;font-size:15px;-webkit-line-clamp:5;line-clamp:5}
.service.featured .service-text p{color:#c8d3dc}
.service.featured .more{color:var(--ice)}
.service.featured .more:hover{color:#fff}
.at-glance strong{font-weight:600;color:var(--navy)}
@media(max-width:720px){
  .hero{background-image:linear-gradient(#142a4088,#142a40e8),url('https://images.unsplash.com/photo-1698479603408-1a66a6d9e80f?auto=format&fit=crop&w=1100&q=85')}
  .service-grid,.service.featured{grid-template-columns:1fr}
  .service.featured img{min-height:0;height:240px}
  .service-body{padding:26px 22px 28px}
  .service.featured h3{font-size:20px}
}

/* Email addresses in the footer and on the contact page. */
.footer-mail{margin:-4px 0 14px}
.footer-mail a{overflow-wrap:anywhere}
.contact-emails{list-style:none;margin:0 0 22px;padding:0;font-size:14px}
.contact-emails li{display:flex;flex-wrap:wrap;gap:2px 12px;padding:5px 0}
.contact-emails span{min-width:140px;color:#65707a}
.contact-emails a{color:var(--navy);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px;overflow-wrap:anywhere}
@media(max-width:720px){.copyright span{display:block}.copyright span+span{margin-top:6px}}

.form-status[data-state="error"]{color:#9a2e2e}.form-status[data-state="pending"]{color:#465c70}.form .button:disabled{opacity:.6;cursor:wait}
