*{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#0d0d0d;
  --ink:#171717;
  --paper:#f3f1ec;
  --white:#fff;
  --muted:#777;
  --line:rgba(13,13,13,.14);
  --accent:#55d6e6;
  --max:1400px;
  --accent-dark:#35b9cb;
}
html{scroll-behavior:smooth}
body{font-family:"DM Sans",Arial,sans-serif;background:var(--paper);color:var(--ink);line-height:1.5}
body.menu-open{overflow:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
.site-header{
  position:fixed;z-index:50;top:0;left:0;right:0;height:82px;
  padding:0 4vw;display:flex;align-items:center;justify-content:space-between;
  color:#fff;background:linear-gradient(to bottom,rgba(0,0,0,.48),transparent);
  transition:.3s ease
}
.site-header.scrolled{background:rgba(13,13,13,.96);backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:11px;color:#fff}
.brand-logo{width:230px;height:70px}
.brand-logo img{width:100%;height:100%;object-fit:contain}
.brand-mark{
  width:38px;height:38px;border:1.5px solid currentColor;border-radius:50%;
  display:grid;place-items:center;font-family:"Space Grotesk";font-size:12px;font-weight:700;letter-spacing:-.06em
}
.brand-name{font-family:"Space Grotesk";font-size:20px;font-weight:700;letter-spacing:.08em}
.brand-name span{font-weight:500;opacity:.55}
.desktop-nav{display:flex;align-items:center;gap:34px;font-size:13px;font-weight:600;letter-spacing:.04em}
.desktop-nav>a:not(.nav-cta){opacity:.82}
.desktop-nav>a:not(.nav-cta):hover{opacity:1}
.nav-cta{padding:12px 19px;border:1px solid rgba(255,255,255,.6);border-radius:100px}
.nav-cta:hover{background:var(--accent);border-color:var(--accent);color:#111}
.menu-toggle{display:none;background:none;border:0;color:#fff;width:42px;height:42px;position:relative}
.menu-toggle span{position:absolute;width:22px;height:1.5px;background:currentColor;left:10px;transition:.25s}
.menu-toggle span:first-child{top:17px}.menu-toggle span:last-child{top:25px}
.mobile-menu{display:none}

.hero{height:100vh;min-height:680px;position:relative;background:#111;color:#fff;overflow:hidden}
.hero-image{position:absolute;inset:0}
.hero-image img{object-position:center 42%;filter:saturate(.92)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.76) 0%,rgba(0,0,0,.4) 47%,rgba(0,0,0,.08) 100%),linear-gradient(0deg,rgba(0,0,0,.4),transparent 55%)}
.hero-content{position:absolute;left:7vw;bottom:12vh;max-width:790px}
.eyebrow,.section-label{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.hero .eyebrow{margin-bottom:25px;color:var(--accent)}
.hero h1{font-family:"Space Grotesk";font-size:clamp(54px,7.1vw,110px);line-height:.92;letter-spacing:-.065em;font-weight:600}
.hero h1 em,.statement h2 em{font-style:normal;color:var(--accent)}
.hero-copy{font-size:16px;max-width:560px;color:rgba(255,255,255,.76);margin:30px 0 34px}
.hero-actions{display:flex;align-items:center;gap:27px}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;padding:16px 20px;border-radius:100px;border:1px solid transparent;font-size:13px;font-weight:700;cursor:pointer;transition:.25s}
.button span{font-size:17px}
.button-light{background:#fff;color:#111}
.button-light:hover{background:var(--accent);transform:translateY(-2px)}
.button-dark{background:#111;color:#fff}
.button-dark:hover{background:var(--accent);color:#111}
.text-link{font-size:13px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:5px}
.text-link span{margin-left:8px}
.hero-meta{position:absolute;bottom:28px;left:7vw;right:4vw;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}

.section{max-width:var(--max);margin:auto;padding:130px 5vw}
.intro{display:grid;grid-template-columns:1fr 2fr;gap:7vw}
.section-label{color:#777}
.intro h2,.section-head h2,.about h2,.quote h2{
  font-family:"Space Grotesk";font-size:clamp(42px,5.5vw,76px);line-height:.98;letter-spacing:-.055em;font-weight:600
}
.intro h2 span,.section-head h2 span,.about h2 span,.quote h2 span{opacity:.32}
.intro-copy>p{max-width:570px;font-size:17px;color:#5f5f5f;margin-top:34px}

.marquee{overflow:hidden;background:var(--black);color:#fff;border-top:1px solid #222;border-bottom:1px solid #222;padding:20px 0}
.marquee-track{width:max-content;display:flex;gap:28px;align-items:center;animation:scroll 30s linear infinite;font-family:"Space Grotesk";font-size:14px;letter-spacing:.1em}
.marquee b{color:var(--accent);font-size:14px}
@keyframes scroll{to{transform:translateX(-50%)}}

.section-head{display:flex;justify-content:space-between;gap:60px;align-items:end;margin-bottom:55px}
.section-head>p{max-width:350px;color:#707070;font-size:14px}
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:230px;gap:12px}
.gallery-item{position:relative;min-height:0;overflow:hidden;background:#ddd;cursor:zoom-in;border-radius:2px}
.gallery-item.gallery-feature{grid-column:span 2;grid-row:span 2}
.gallery-item.gallery-feature-secondary{grid-column:span 2;grid-row:span 2}
.gallery-item img{transition:transform .7s cubic-bezier(.2,.7,.2,1);filter:saturate(.96)}
.gallery-item:hover img{transform:scale(1.035)}
.gallery-item:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.72),transparent 48%);opacity:.8;transition:.25s}
.gallery-item:hover:after{opacity:.92}
.gallery-item figcaption{position:absolute;z-index:2;bottom:16px;left:17px;right:17px;color:#fff;display:flex;justify-content:space-between;align-items:end;gap:14px}
.gallery-item figcaption span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.gallery-item figcaption b{font-family:"Space Grotesk";font-size:14px;text-align:right}
.gallery-note{display:flex;justify-content:space-between;margin-top:18px;color:#888;font-size:10px;text-transform:uppercase;letter-spacing:.13em}

.services{background:var(--paper)}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:55px}
.service{min-height:390px;border-right:1px solid var(--line);padding:28px 28px 25px;position:relative;transition:.3s}
.service:first-child{border-left:1px solid var(--line)}
.service:hover{background:#fff}
.service-number{font-size:11px;color:#888}
.service h3{font-family:"Space Grotesk";font-size:28px;line-height:1.02;letter-spacing:-.04em;margin-top:90px}
.service p{font-size:13px;color:#777;max-width:230px;margin-top:20px}
.service-arrow{position:absolute;bottom:25px;right:27px;font-size:24px}

.statement{background:var(--accent);padding:140px 7vw}
.statement-inner{max-width:var(--max);margin:auto}
.statement .eyebrow{color:#111;margin-bottom:28px}
.statement h2{font-family:"Space Grotesk";font-size:clamp(50px,7vw,100px);line-height:.92;letter-spacing:-.06em}
.statement h2 em{color:#111}
.statement .button{margin-top:45px}

.about{background:#111;color:#fff;max-width:none;padding-left:7vw;padding-right:7vw}
.about .section-label{color:#888}
.about-grid{max-width:var(--max);margin:55px auto 0;display:grid;grid-template-columns:1.1fr .9fr;gap:12vw}
.about h2{font-size:clamp(44px,5.8vw,78px)}
.about h2 span{color:#fff;opacity:.4}
.about-copy{max-width:470px}
.about-copy p{color:#aaa;font-size:16px;margin-bottom:20px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #333;margin-top:55px;padding-top:20px;gap:15px}
.facts strong{font-family:"Space Grotesk";font-size:27px;color:var(--accent);display:block;margin-bottom:9px}
.facts span{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#999}

.quote{display:grid;grid-template-columns:1fr 1fr;gap:9vw}
.quote-heading p{max-width:410px;color:#777;font-size:15px;margin-top:30px}
.quote-form{display:grid;grid-template-columns:1fr 1fr;gap:25px 18px}
.quote-form label{display:flex;flex-direction:column;gap:9px}
.quote-form label span{font-size:10px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:#666}
.quote-form input,.quote-form textarea,.quote-form select{
  border:0;border-bottom:1px solid #aaa;background:transparent;border-radius:0;padding:10px 0;font-size:15px;outline:0;color:#111
}
.quote-form input:focus,.quote-form textarea:focus,.quote-form select:focus{border-color:var(--accent-dark)}
.quote-form textarea{resize:vertical}
.quote-form .full{grid-column:1/-1}
.quote-form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#111 50%),linear-gradient(135deg,#111 50%,transparent 50%);background-position:calc(100% - 8px) 55%,100% 55%;background-size:8px 8px,8px 8px;background-repeat:no-repeat}
.submit{border:0;justify-self:start;margin-top:8px;padding-left:23px;padding-right:20px}
.hidden-field{display:none!important}
.form-error{grid-column:1/-1;color:#c94a3f;font-size:13px;margin-top:-8px}

.quote-confirm{grid-column:1/-1;justify-self:start}
.quote-confirm-icon{
  width:46px;height:46px;border-radius:50%;background:var(--accent);color:#111;
  display:grid;place-items:center;font-size:20px;font-weight:700;margin-bottom:22px
}
.quote-confirm h3{font-family:"Space Grotesk";font-size:clamp(28px,3vw,38px);line-height:1.05;letter-spacing:-.03em;font-weight:600;margin-bottom:14px}
.quote-confirm p{max-width:380px;color:#777;font-size:15px}

.footer{background:#111;color:#fff;padding:55px 5vw 25px}
.footer-top{display:flex;justify-content:space-between;align-items:start;max-width:var(--max);margin:auto}
.footer-links{display:flex;gap:28px;font-size:12px;color:#aaa}
.footer-links a:hover{color:#fff}
.footer-bottom{max-width:var(--max);margin:70px auto 0;padding-top:20px;border-top:1px solid #2c2c2c;display:flex;justify-content:space-between;color:#666;font-size:10px;text-transform:uppercase;letter-spacing:.12em}

.lightbox{position:fixed;z-index:100;inset:0;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center;padding:5vh 5vw}
.lightbox.open{display:flex}
.lightbox img{width:auto;height:auto;max-width:92vw;max-height:90vh;object-fit:contain}
.lightbox-close{position:absolute;right:28px;top:18px;background:none;border:0;color:#fff;font-size:40px;line-height:1;cursor:pointer}

@media(max-width:900px){
  .site-header{height:70px;padding:0 22px;background:rgba(13,13,13,.88)}
  .brand-logo{width:200px;height:60px}
  .desktop-nav{display:none}.menu-toggle{display:block}
  .mobile-menu{position:fixed;z-index:49;top:70px;left:0;right:0;background:#111;color:#fff;padding:20px 22px 30px;display:flex;flex-direction:column;gap:0;transform:translateY(-130%);transition:.35s}
  .mobile-menu.open{transform:translateY(0)}
  .mobile-menu a{font-family:"Space Grotesk";font-size:28px;padding:15px 0;border-bottom:1px solid #333}
  .hero{min-height:700px}
  .hero-content{left:22px;right:22px;bottom:11vh}
  .hero h1{font-size:clamp(48px,13vw,76px)}
  .hero-copy{font-size:14px}
  .hero-meta{left:22px;right:22px}
  .section{padding:85px 22px}
  .intro{grid-template-columns:1fr;gap:35px}
  .section-head{display:block;margin-bottom:38px}
  .section-head>p{margin-top:25px}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:190px;gap:10px}
  .gallery-item.gallery-feature,.gallery-item.gallery-feature-secondary{grid-column:span 2;grid-row:span 1;min-height:0}
  .gallery-note{font-size:9px}
  .service-grid{grid-template-columns:1fr 1fr}
  .service{min-height:330px}
  .service:first-child{border-left:1px solid var(--line)}
  .statement{padding:95px 22px}
  .about{padding-left:22px;padding-right:22px}
  .about-grid{grid-template-columns:1fr;gap:45px}
  .quote{grid-template-columns:1fr;gap:55px}
  .footer{padding-left:22px;padding-right:22px}
}
@media(max-width:580px){
  .brand-logo{width:195px;height:60px}
  .brand-name{font-size:18px}
  .hero-actions{flex-direction:column;align-items:flex-start;gap:20px}
  .button{padding:14px 18px}
  .service-grid{grid-template-columns:1fr}
  .service{border-left:1px solid var(--line)!important;border-bottom:1px solid var(--line)}
  .service h3{margin-top:65px}
  .quote-form{grid-template-columns:1fr}
  .quote-form .full{grid-column:auto}
  .submit{width:100%}
  .footer-top{flex-direction:column;gap:35px}
  .footer-links{flex-wrap:wrap}
  .footer-bottom{flex-direction:column;gap:10px;margin-top:45px}
}