:root{color-scheme:dark;--bg:#090909;--text:#ededeb;--muted:#999995;--line:#292928;--accent:#d8e4b8}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}.wrap{max-width:1320px;margin:auto;padding-left:64px;padding-right:64px}.header{display:flex;justify-content:space-between;align-items:center;padding-top:38px;padding-bottom:38px}.brand{font-size:19px;font-weight:800;letter-spacing:-.8px}.brand-dot{font-size:10px;vertical-align:top;margin-left:3px}nav{display:flex;gap:36px;font-size:13px;color:#bcbcb8}nav a:hover{color:white}nav span{margin-left:7px}.hero{padding:110px 0 100px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:500;color:var(--muted);line-height:1.7}.status-dot{display:inline-block;height:6px;width:6px;border-radius:50%;background:var(--accent);margin-right:9px;vertical-align:1px}h1{font-size:clamp(64px,7.7vw,108px);line-height:1.01;letter-spacing:-6px;font-weight:500;margin:35px 0 40px}h1>span{color:var(--accent)}.intro{max-width:540px;margin-left:auto;font-size:16px;line-height:1.8;color:#aaa9a5}.intro p{margin:0 0 14px}.section-heading{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:25px 0}.section-heading h2{font-size:13px;font-weight:400;margin:0}.section-heading>span{font-size:10px;letter-spacing:1px;color:var(--muted)}.label-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.label-card{min-width:0;min-height:298px;padding:27px 30px 25px;display:flex;flex-direction:column;position:relative;background:#101010;border:1px solid #242423;border-radius:2px}.card-top{display:flex;justify-content:space-between;font-size:10px;color:#767673;letter-spacing:1px}.genre{color:#b7b7b1;letter-spacing:.3px}.label-card h3{margin:auto 0;font-weight:500}.label-card>p{font-size:12px;color:#888883;line-height:1.5;margin:16px 0 0}.good h3{font-size:39px;line-height:.9;letter-spacing:-2px;font-weight:800;padding-top:24px}.small-dot{color:var(--accent)}.amenity h3{font-size:57px;font-weight:300;letter-spacing:-3px}.amenity-dot{font-size:24px;color:#b9b7d0;margin-left:3px}.pure h3{font-family:Georgia,'Times New Roman',serif;font-size:50px;font-weight:400;font-style:italic;letter-spacing:-2px}.note-line{display:block;height:1px;background:#c8b99a;width:50px;margin-top:15px}.cloud h3{font-size:40px;font-weight:400;letter-spacing:-2px}.cloud-line{display:block;width:60px;height:9px;margin-top:13px;border-top:2px solid #a7bdc4;border-radius:50%}.contact{padding:108px 0 95px;display:grid;grid-template-columns:1fr 1fr;gap:50px}.contact h2{font-size:44px;line-height:1.12;font-weight:400;letter-spacing:-1.7px;margin:23px 0 0}.contact-details{align-self:end;padding-bottom:3px}.contact-details>p{font-size:13px;color:var(--muted);line-height:1.7}button{background:transparent;border:0;border-bottom:1px solid #77786c;color:var(--accent);padding:12px 0;cursor:pointer;font-size:20px;width:100%;text-align:left;display:flex;justify-content:space-between;gap:12px}button:hover{color:#fff;border-color:#fff}.email-result{min-height:22px;margin-bottom:0}.email-result a{text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}.footer{border-top:1px solid var(--line);padding-top:30px;padding-bottom:35px;display:flex;justify-content:space-between;font-size:11px;line-height:1.8;color:#7f7f7b}.footer strong{color:#b6b6b0;font-weight:400}address{font-style:normal;margin-top:5px}.footer-meta{display:flex;flex-direction:column;justify-content:space-between;text-align:right}.skip{position:absolute;left:20px;top:-100px;background:white;color:black;padding:12px;z-index:10}.skip:focus{top:10px}:focus-visible{outline:2px solid var(--accent);outline-offset:6px}@media(min-width:1500px){.hero{padding-top:135px}}@media(max-width:700px){.wrap{padding-left:24px;padding-right:24px}.header{padding-top:28px;padding-bottom:28px}.brand{font-size:16px}nav{gap:20px;font-size:11px}.hero{padding:72px 0 55px}h1{font-size:clamp(38px,9.5vw,66px);letter-spacing:-3px;margin:28px 0 32px}.eyebrow{font-size:8px;letter-spacing:1.4px}.intro{font-size:14px;margin-left:0;max-width:460px}.label-grid{grid-template-columns:1fr}.label-card{min-height:270px;padding:24px}.contact{grid-template-columns:1fr;gap:26px;padding:70px 0 55px}.contact h2{font-size:38px}.footer{gap:25px;font-size:10px}.footer-meta{max-width:145px}.good h3{font-size:38px}.amenity h3{font-size:54px}.pure h3{font-size:46px}.cloud h3{font-size:38px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Original label symbols; screen blends their black backgrounds into the cards. */
.label-identity{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;flex:1;padding:22px 0 12px;gap:14px}.label-symbol{display:block;width:120px;height:120px;object-fit:contain;mix-blend-mode:screen}.amenity .label-symbol{width:152px;height:152px;margin:-16px}.cloud .label-symbol{width:106px;height:106px;margin:7px}.label-card .label-identity h3{font-size:25px;line-height:1.05;letter-spacing:-.8px;margin:0;padding:0}.label-card{min-height:344px}.note-line,.cloud-line{display:none}

.label-card .amenity-wordmark{width:215px;height:40px;position:relative;overflow:hidden}.amenity-wordmark img{position:absolute;width:260px;height:260px;max-width:none;left:-23px;top:-110px;object-fit:contain}
/* Pair each symbol with its wordmark. */
.label-identity{flex-direction:row;align-items:center;justify-content:flex-start;gap:24px;padding:24px 0}.label-symbol{flex-shrink:0}.label-card .label-identity h3{min-width:0}.label-card .amenity-wordmark{flex-shrink:0}
@media(max-width:1050px) and (min-width:701px){.label-identity{gap:14px}.label-symbol{width:88px;height:88px}.amenity .label-symbol{width:112px;height:112px;margin:-12px}.cloud .label-symbol{width:78px;height:78px;margin:5px}.label-card .label-identity h3{font-size:21px}.label-card .amenity-wordmark{width:162px;height:34px}.amenity-wordmark img{width:200px;height:200px;left:-18px;top:-84px}}
@media(max-width:440px){.label-identity{gap:18px}.label-symbol{width:82px;height:82px}.amenity .label-symbol{width:104px;height:104px;margin:-11px}.cloud .label-symbol{width:72px;height:72px;margin:5px}.label-card .label-identity h3{font-size:22px}.label-card .amenity-wordmark{width:158px;height:32px}.amenity-wordmark img{width:195px;height:195px;left:-17px;top:-82px}.label-card{min-height:280px}}
.label-card .amenity-wordmark{flex:1 1 0;max-width:215px;min-width:0}.amenity-wordmark img{width:125%;height:auto;left:-11%;top:50%;transform:translateY(-50%)}

.label-card .good-wordmark{position:relative;flex:1 1 0;min-width:0;max-width:280px;height:46px;overflow:hidden}.good-wordmark img{position:absolute;width:109.4%;height:auto;max-width:none;left:-4%;top:50%;transform:translateY(-50%)}
/* Align the visible lettering (centre y=317), rather than its 596px canvas. */
.good-wordmark img{transform:translateY(-53.1879%)}
/* Leave a small safety margin around the full visible wordmark. */
.good-wordmark img{width:106%;left:-3%}
.label-card.pure .label-identity h3{font-size:38px}
@media(max-width:1050px) and (min-width:701px){.label-card.pure .label-identity h3{font-size:32px}}
@media(max-width:440px){.label-card.pure .label-identity h3{font-size:32px}}
.label-card.cloud .label-identity h3{font-size:36px}
@media(max-width:1050px) and (min-width:701px){.label-card.cloud .label-identity h3{font-size:30px}}
@media(max-width:440px){.label-card.cloud .label-identity h3{font-size:30px}}

.card-top{justify-content:flex-end}

/* Compact presentation: retain the established colours, type and contact layout. */
.brand-dot{font-size:inherit;font-weight:inherit;vertical-align:baseline;margin-left:0;color:var(--accent)}
.hero{padding:76px 0 74px}
.hero h1{margin-top:0}
.label-card{min-height:258px;padding:22px 26px}
.label-identity{padding:12px 0;gap:20px}
@media(min-width:1500px){.hero{padding-top:96px}}
@media(min-width:701px) and (max-width:1050px){
 .wrap{padding-left:32px;padding-right:32px}
 .label-card{padding:20px}
 .label-identity{gap:14px}
 .label-card.pure .label-identity h3{font-size:clamp(26px,3vw,32px)}
 .label-card.cloud .label-identity h3{font-size:clamp(25px,2.8vw,30px)}
}
@media(max-width:700px){
 .hero{padding:48px 0 44px}
 .label-card{min-height:258px;padding:22px 24px}
}
@media(max-width:440px){
 .label-card{min-height:218px;padding:20px}
 .label-identity{gap:16px}
 .label-card.pure .label-identity h3{font-size:clamp(27px,8vw,32px)}
 .label-card.cloud .label-identity h3{font-size:clamp(25px,7.5vw,30px)}
}

.intro{margin-left:0;text-align:left}
/* Let desktop copy use the available width, with natural wrapping. */
@media(min-width:701px){.intro{max-width:100%}}
.brand .brand-dot{color:var(--accent);vertical-align:baseline}
/* Final spacing and footer legibility adjustments. */
.contact{padding-top:78px;padding-bottom:75px}
.footer{color:#999995}
.footer strong{color:#bcbcb6}
@media(max-width:700px){.contact{padding-top:40px;padding-bottom:35px}}
/* Bring the labels section 35px closer to the company introduction. */
.hero{padding-bottom:39px}
@media(max-width:700px){.hero{padding-bottom:9px}}
/* Balance the space before and after the labels without changing their layout. */
.hero{padding-bottom:64px}
.contact{padding-top:71px}
@media(max-width:700px){.hero{padding-bottom:34px}.contact{padding-top:40px}}

/* Contact dialog: scoped styles preserve the existing page. */
.contact-modal{color:var(--text);background:#101010;border:1px solid #333330;border-radius:3px;padding:0;width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;margin:auto}
.contact-modal::backdrop{background:rgba(0,0,0,.72)}
.modal-content{padding:44px;position:relative}
.contact-modal .modal-close{position:absolute;right:18px;top:14px;width:32px;height:32px;padding:0;display:grid;place-items:center;border:0;color:#aaa;font-size:27px;line-height:1;background:transparent}
.contact-modal .modal-close:hover{color:#fff}
.contact-modal h2{font-size:38px;letter-spacing:-1.5px;font-weight:400;margin:0 28px 14px 0;line-height:1.1}
#modal-description{font-size:13px;color:var(--muted);line-height:1.7;margin:0 0 30px}
.form-field{display:flex;flex-direction:column;gap:9px;margin-bottom:21px}
.form-field label{font-size:12px;color:#c7c7c1}.form-field label span{color:var(--accent)}
.form-field input,.form-field textarea{box-sizing:border-box;width:100%;min-width:0;background:#0b0b0b;border:1px solid #363633;border-radius:2px;color:var(--text);font:inherit;font-size:16px;line-height:1.5;padding:11px 13px}
.form-field textarea{resize:vertical;min-height:120px}
.form-field input:focus-visible,.form-field textarea:focus-visible{outline:1px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.form-honeypot{display:none}
.form-notice{font-size:12px;line-height:1.7;color:#aaa9a5;margin:3px 0 22px}
.contact-modal .send-message{background:var(--accent);color:#141610;border:1px solid var(--accent);padding:14px 17px;font-size:15px;border-radius:2px}
.contact-modal .send-message:disabled{cursor:not-allowed;opacity:.7}
@media(max-width:600px){.modal-content{padding:38px 24px 26px}.contact-modal h2{font-size:32px}.form-field{margin-bottom:17px}}
/* Give the two text wordmarks comparable visual presence to the image wordmarks. */
.label-card.pure .label-identity h3{font-size:46px}
.label-card.cloud .label-identity h3{font-size:44px}
@media(min-width:701px) and (max-width:1050px){
 .label-card.pure .label-identity h3{font-size:clamp(34px,4.7vw,46px)}
 .label-card.cloud .label-identity h3{font-size:clamp(32px,4.5vw,44px)}
}
@media(max-width:440px){
 .label-card.pure .label-identity h3{font-size:clamp(30px,9.2vw,36px)}
 .label-card.cloud .label-identity h3{font-size:clamp(28px,8.7vw,34px)}
}

/* Compact contact form; page layout remains unchanged. */
.contact-modal{width:min(460px,calc(100% - 32px))}
.modal-content{padding:32px}
.contact-modal h2{margin-bottom:10px}
#modal-description{margin-bottom:22px}
.form-field{gap:7px;margin-bottom:15px}
.form-field input{height:52px}
.form-field textarea{height:160px;min-height:160px}
.form-notice{margin:0 0 16px}
.contact-modal .send-message{padding:11px 16px}
@media(max-width:600px){.modal-content{padding:32px 24px 24px}.form-field{margin-bottom:14px}}

/* Contact readability only; existing dimensions and spacing stay in place. */
.form-field label{font-size:14px}
#modal-description{font-size:15px}
#form-status{font-size:13px;line-height:1.7;color:var(--accent);margin:0 0 16px}
#form-status[data-error="true"]{color:#e3b8ab}
#turnstile-container:empty{display:none}