@charset "UTF-8";
:root{color-scheme:dark;--black:#101010;--white:#f4f3ef;--muted:#aaa9a5;--line:#333;--gutter:clamp(22px,4.2vw,72px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--black);color:var(--white);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
img{display:block;max-width:100%}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:6px}
::selection{background:#fff;color:#111}
.skip-link{position:fixed;top:10px;left:20px;z-index:100;background:var(--white);color:var(--black);padding:14px;transform:translateY(-160%)}
.skip-link:focus{transform:none}
.site-header{height:88px;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;background:var(--black);border-bottom:1px solid var(--line);position:relative;z-index:20}
.brand img{width:260px;height:auto;filter:invert(1)}
#navigation{display:flex;align-items:center;gap:42px;font-size:12px;letter-spacing:.11em;text-transform:uppercase;font-weight:700}
#navigation a{padding:12px 0;transition:opacity .2s}
#navigation a:hover{opacity:.6}
#navigation .nav-contact{border-bottom:1px solid #777;padding-bottom:9px;display:flex;gap:24px;align-items:center}
.nav-contact span{font-size:19px;font-weight:400}
.menu-toggle{display:none}
.hero{position:relative;height:calc(100svh - 88px);min-height:660px;max-height:1000px;overflow:hidden;background:#242424}
.hero-picture,.hero-picture img,.hero-shade{position:absolute;inset:0;width:100%;height:100%}
.hero-picture img{object-fit:cover;object-position:50% 67%;filter:grayscale(1)}
.hero-shade{background:linear-gradient(180deg,rgba(0,0,0,.42),transparent 54%,rgba(0,0,0,.78)),linear-gradient(90deg,rgba(0,0,0,.18),transparent 70%);pointer-events:none}
.hero-heading{position:relative;padding:48px var(--gutter) 0}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;display:flex;align-items:center;gap:12px;margin:0 0 16px}
.status-dot{width:6px;height:6px;background:var(--white);display:block;flex-shrink:0}
h1{font-family:Arial,Helvetica,sans-serif;font-size:clamp(100px,13.2vw,205px);line-height:.9;letter-spacing:-.07em;font-weight:900;font-style:italic;margin:0 0 28px;transform:translateX(-.02em)}
h1 span{font-style:normal;letter-spacing:-.02em}
.hero-link{display:inline-flex;align-items:center;gap:30px;text-transform:uppercase;font-size:11px;font-weight:700;letter-spacing:.13em;border-bottom:1px solid #a8a8a8;padding:12px 0}
.hero-link span{font-size:21px;font-weight:400;line-height:1}
.hero-bottom{position:absolute;bottom:0;left:0;width:100%;padding:24px var(--gutter);display:flex;align-items:center;justify-content:space-between;text-transform:uppercase;font-size:10px;letter-spacing:.16em}
.hero-bottom b{font-size:16px;margin-left:14px}
.hero-bottom a{font-size:24px;position:absolute;left:50%;transform:translateX(-50%);padding:10px}
.hero-number{color:#c9c9c9}
.services{background:var(--white);color:var(--black);display:grid;grid-template-columns:repeat(3,1fr);padding:0 var(--gutter);color-scheme:light}
.service{min-height:156px;display:grid;grid-template-columns:24px 1fr 22px;align-items:center;gap:14px;padding:25px 28px;border-right:1px solid #d0cfca;transition:background .2s}
.service:first-child{padding-left:0}
.service:last-child{border-right:0;padding-right:0}
.service:hover h2{transform:translateX(5px)}
.service-number{font-size:10px;align-self:start;padding-top:9px;color:#6b6b66;letter-spacing:.05em}
.service h2{font-size:clamp(18px,2vw,31px);letter-spacing:-.055em;font-weight:800;text-transform:uppercase;font-style:italic;line-height:1.05;margin:0;transition:transform .2s}
.service-arrow{font-size:25px}
.gallery-section{padding:76px var(--gutter) 80px;max-width:1600px;margin:auto}
.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:28px}
.section-heading h2,.contact h2{font-size:clamp(58px,6.2vw,96px);font-style:italic;font-weight:900;letter-spacing:-.065em;line-height:.95;margin:0}
.section-heading h2 span,.contact h2 span{font-style:normal}
.section-heading>span{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);padding-bottom:5px}
.gallery{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:clamp(260px,26vw,380px) clamp(220px,20vw,300px);gap:14px}
.photo{border:0;padding:0;position:relative;overflow:hidden;background:#252525;isolation:isolate}
.photo:focus-visible{z-index:1}
.photo-wide{grid-column:1 / 3;grid-row:1}
.photo-tall{grid-column:3;grid-row:1 / 3}
.photo-profile{grid-column:1;grid-row:2}
.photo-road{grid-column:2;grid-row:2}
.photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .5s,transform .6s}
.photo-wide img{object-position:center 65%}
.photo-tall img{object-position:50% 58%}
.photo-profile img{object-position:50% 55%}
.photo-road img{object-position:50% 54%}
.photo:hover img,.photo:focus-visible img{filter:grayscale(0);transform:scale(1.025)}
.photo::after{content:"";position:absolute;inset:55% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.65));pointer-events:none}
.photo-caption{position:absolute;left:20px;right:20px;bottom:17px;display:flex;align-items:center;justify-content:space-between;z-index:1;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;text-align:left}
.photo-caption>span{font-size:24px;font-weight:400;line-height:1}
.contact{border-top:1px solid var(--line);padding:48px var(--gutter) 54px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:50px}
.contact h2{font-size:clamp(45px,5vw,78px)}
.contact-heading p{font-size:12px;color:var(--muted);margin:14px 0 0}
.contact-channels{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.channel{border-bottom:1px solid #525252;padding:10px 0 16px;min-width:0}
.channel-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;display:block;margin-bottom:14px}
.channel-value{font-size:14px;color:var(--muted);display:flex;justify-content:space-between;gap:10px;overflow-wrap:anywhere}
a.channel:hover .channel-value{color:var(--white)}
.site-footer{padding:22px var(--gutter);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.03em;color:var(--muted)}
.site-footer a{font-size:24px;padding:0 10px;color:var(--white)}
.lightbox{background:rgba(10,10,10,.97);color:var(--white);border:0;padding:70px 70px 35px;position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;overflow:hidden}
.lightbox::backdrop{background:rgba(0,0,0,.9)}
.lightbox[open]{display:flex;align-items:center;justify-content:center}
.lightbox figure{margin:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.lightbox-image{height:calc(100% - 40px);width:100%;object-fit:contain;pointer-events:auto}
.lightbox figcaption{width:min(100%,1000px);padding:15px 0 0;display:flex;justify-content:space-between;text-transform:uppercase;font-size:10px;letter-spacing:.12em;color:#ccc}
.lightbox button{position:absolute;background:transparent;border:1px solid #666;width:42px;height:42px;font-size:23px;display:grid;place-items:center;z-index:2}
.lightbox button:hover{background:var(--white);color:var(--black)}
.lightbox-close{top:18px;right:22px}
.lightbox-prev{top:50%;left:16px}
.lightbox-next{top:50%;right:16px}
body.lightbox-open{overflow:hidden}
@media(min-width:1600px){.hero-heading{padding-top:70px}}
@media(max-width:1024px){.brand img{width:220px}#navigation{gap:26px}.service{padding:26px 16px;gap:9px}.services{padding:0 28px}.hero{min-height:620px}.contact{gap:30px}.contact-channels{gap:20px}}
@media(max-width:780px){
  html{scroll-padding-top:20px}
  .site-header{height:76px}
  .brand img{width:200px}
  .js .menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:7px;width:42px;height:42px;border:0;background:none;padding:9px}
  .menu-toggle span{height:1px;background:var(--white);width:24px;transition:transform .2s}
  .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
  .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
  #navigation{gap:18px;font-size:10px}
  .js #navigation{display:none;position:absolute;top:75px;left:0;width:100%;padding:26px var(--gutter);background:var(--black);border-bottom:1px solid var(--line);gap:26px;align-items:stretch;flex-direction:column;font-size:17px}
  .js #navigation.is-open{display:flex}
  #navigation .nav-contact{justify-content:space-between}
  .hero{height:calc(100svh - 76px);min-height:620px;max-height:900px}
  .hero-picture img{object-position:50% 60%}
  .hero-shade{background:linear-gradient(180deg,rgba(0,0,0,.44),transparent 50%,rgba(0,0,0,.66))}
  .hero-heading{padding-top:32px}
  .eyebrow{font-size:9px;letter-spacing:.16em;gap:8px;margin-bottom:18px}
  h1{font-size:clamp(72px,18vw,138px);margin-bottom:18px}
  .hero-link{font-size:10px;gap:24px}
  .hero-bottom{padding-bottom:22px;font-size:9px;letter-spacing:.1em}
  .hero-bottom b{font-size:13px;margin-left:8px}
  .hero-number{display:none}
  .hero-bottom a{position:static;transform:none}
  .services{padding:0 var(--gutter);grid-template-columns:1fr}
  .service,.service:first-child,.service:last-child{min-height:88px;padding:20px 0;border-right:0;border-bottom:1px solid #d0cfca;grid-template-columns:26px 1fr 28px;gap:10px}
  .service:last-child{border-bottom:0}
  .service h2{font-size:27px}
  .service-number{align-self:center;padding:0}
  .gallery-section{padding-top:48px;padding-bottom:48px}
  .section-heading{margin-bottom:22px}
  .section-heading h2{font-size:64px}
  .section-heading>span{font-size:8px;letter-spacing:.09em;max-width:100px;text-align:right;line-height:1.6}
  .gallery{grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:10px}
  .photo-wide{grid-column:1 / 3;grid-row:1;aspect-ratio:1.42}
  .photo-tall{grid-column:1;grid-row:2 / 4}
  .photo-profile{grid-column:2;grid-row:2;aspect-ratio:1}
  .photo-road{grid-column:2;grid-row:3;aspect-ratio:1}
  .photo-caption{left:12px;right:12px;bottom:12px;font-size:8px;letter-spacing:.07em}
  .photo-caption>span{font-size:20px}
  .contact{grid-template-columns:1fr;gap:28px;padding-top:34px;padding-bottom:34px}
  .contact h2{font-size:58px}
  .contact-heading p{font-size:11px;margin-top:12px}
  .channel-value{font-size:12px}
  .lightbox{padding:70px 18px 85px}
  .lightbox-image{height:calc(100% - 35px)}
  .lightbox-prev,.lightbox-next{top:auto;bottom:20px}
  .lightbox-prev{left:calc(50% - 53px)}
  .lightbox-next{right:calc(50% - 53px)}
}
@media(max-width:360px){.brand img{width:175px}.eyebrow{font-size:8px;letter-spacing:.12em}.contact h2{font-size:49px}.photo-caption{font-size:7px}.photo-caption>span{font-size:17px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
