:root{
  --black:#111;
  --white:#fff;
  --muted:#626262;
  --serif:"Italiana",Georgia,serif;
  --sans:"DM Sans",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--black);font-family:var(--sans);font-size:16px;-webkit-font-smoothing:antialiased}
body.menu-open,body.modal-open{overflow:hidden}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:#cfcfcf;color:#111}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.skip-link{position:fixed;z-index:200;left:16px;top:-80px;background:#fff;color:#111;padding:12px 18px}
.skip-link:focus{top:16px}
section[id],article[id]{scroll-margin-top:82px}
article[id]{scroll-margin-top:160px}

.site-header{height:86px;position:fixed;z-index:100;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,5vw,80px);color:#fff;transition:background .35s,color .35s,height .35s,box-shadow .35s}
.site-header.scrolled,.site-header.menu-active{height:74px;color:#111;background:rgba(255,255,255,.96);box-shadow:0 8px 30px rgba(0,0,0,.06);backdrop-filter:blur(16px)}
.brand{display:inline-flex;align-items:center;flex:none}
.brand img{height:47px;width:auto;filter:invert(1);transition:filter .35s}
.site-header.scrolled .brand img,.site-header.menu-active .brand img{filter:none}
.desktop-nav{display:flex;align-items:center;gap:clamp(22px,2.7vw,44px);font-size:14px;font-weight:400}
.desktop-nav>a,.desktop-nav summary{position:relative;padding:8px 0;white-space:nowrap}
.desktop-nav>a::after,.desktop-nav summary::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .3s}
.desktop-nav>a:hover::after,.desktop-nav summary:hover::after,.services-menu[open] summary::after{transform:scaleX(1);transform-origin:left}
.services-menu{position:relative}
.services-menu summary{list-style:none;display:flex;align-items:center;gap:11px;cursor:pointer}
.services-menu summary::-webkit-details-marker,.mobile-nav summary::-webkit-details-marker{display:none}
.chevron{display:inline-block;width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s}
details[open] .chevron{transform:rotate(225deg) translate(-2px,-1px)}
.services-dropdown{position:absolute;right:-36px;top:calc(100% + 15px);width:250px;padding:13px;background:#fff;color:#111;box-shadow:0 15px 45px rgba(0,0,0,.18)}
.services-dropdown a{display:block;padding:12px 14px;font-size:14px;transition:background .2s}
.services-dropdown a:hover,.services-dropdown a:focus-visible{background:#f0f0f0}
.menu-toggle{display:none;background:none;color:inherit;border:0;width:44px;height:44px;cursor:pointer}
.menu-toggle span{display:block;width:26px;height:1px;background:currentColor;margin:7px auto;transition:transform .3s}
.site-header.menu-active .menu-toggle span:first-child{transform:translateY(4px) rotate(45deg)}
.site-header.menu-active .menu-toggle span:last-child{transform:translateY(-4px) rotate(-45deg)}
.mobile-nav{display:none}

.hero{position:relative;height:100svh;min-height:690px;background:#000;color:#fff;overflow:hidden}
.hero-image,.hero-scrim{position:absolute;inset:0;width:100%;height:100%}
.hero-image{object-fit:cover;object-position:center 47%;animation:hero-settle 1.5s ease-out both}
.hero-scrim{background:linear-gradient(90deg,rgba(0,0,0,.69),rgba(0,0,0,.25) 68%,rgba(0,0,0,.12)),linear-gradient(0deg,rgba(0,0,0,.58),transparent 55%)}
.hero-content{position:relative;z-index:1;min-height:100%;padding:160px clamp(24px,7vw,110px) 95px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end}
.eyebrow{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.16em;line-height:1.45}
.hero h1{font-family:var(--serif);font-size:clamp(80px,10vw,156px);font-weight:400;line-height:.9;letter-spacing:-.043em;max-width:1100px;margin:22px 0 27px;animation:rise-in .8s .15s both}
.hero p{max-width:460px;font-size:18px;font-weight:400;line-height:1.65;margin:0;animation:rise-in .8s .3s both}
.hero-actions{display:flex;align-items:center;gap:29px;margin-top:36px;animation:rise-in .8s .45s both}
.button{min-height:49px;display:inline-flex;align-items:center;justify-content:center;padding:12px 25px;border-radius:100px;font-family:var(--sans);font-size:14px;font-weight:500;white-space:nowrap;transition:background .25s,color .25s,transform .25s,border-color .25s}
.button:hover{transform:translateY(-3px)}
.button-light{background:#fff;color:#111;border:1px solid #fff}
.button-light:hover{background:transparent;color:#fff}
.quiet-link{font-size:14px;font-weight:400;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.7)}
.quiet-link:hover{border-bottom-color:#fff}

.section-pad{padding:clamp(90px,10vw,150px) clamp(24px,7vw,110px)}
.services{color:#fff;background:#000}
.section-intro{max-width:900px;margin-bottom:67px}
.section-intro h2,.portfolio-heading h2,.about h2,.contact h2{font-family:var(--serif);font-size:clamp(65px,7vw,110px);font-weight:400;line-height:1.02;letter-spacing:-.045em;margin:22px 0}
.section-intro h2 em,.about h2 em{font-style:normal}
.section-intro p{max-width:630px;margin:0;color:#d5d5d5;font-size:18px;line-height:1.7}
.featured-service{background:#000}
.featured-image{margin:0}
.featured-image a{display:block;overflow:hidden;aspect-ratio:2.35;background:#000}
.featured-image img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.22,.8,.2,1)}
.featured-image a:hover img,.featured-image a:focus-visible img{transform:scale(1.025)}
.featured-image figcaption{padding-top:13px;color:#bdbdbd;font-size:11px;font-weight:500;letter-spacing:.13em}
.featured-copy{display:grid;grid-template-columns:1fr 1fr;gap:clamp(35px,6vw,100px);align-items:start;padding:46px 0 63px}
.featured-copy h3{font-family:var(--serif);font-size:clamp(59px,5vw,84px);font-weight:400;line-height:1.02;letter-spacing:-.035em;margin:19px 0 0}
.featured-details{padding-top:4px}
.featured-copy p{max-width:540px;font-size:17px;line-height:1.7;color:#d1d1d1;margin:0 0 17px}
.featured-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:27px}
.featured-enquiry{font-size:14px;text-decoration:underline;text-underline-offset:5px}
.featured-enquiry:hover{text-decoration-thickness:2px}
.button-outline-light{border:1px solid #fff;color:#fff}
.button-outline-light:hover{background:#fff;color:#111}
.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:58px clamp(45px,6vw,100px);padding-top:80px}
.service-item{display:grid;grid-template-rows:112px 1fr auto;align-items:start;min-height:285px}
.service-item h3{font-family:var(--serif);font-size:clamp(39px,3.4vw,56px);font-weight:400;letter-spacing:-.025em;line-height:1.04;margin:0 0 22px}
.service-item p{color:#c9c9c9;font-size:16px;line-height:1.72;margin:0 0 25px}
.service-item a{font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.service-item a:hover{text-decoration-thickness:2px}
.service-actions{display:flex;align-items:center;gap:25px;flex-wrap:wrap}
.service-actions a:last-child{color:#bdbdbd}
.service-item-heading{width:100%;display:block}
.service-item-heading h3{margin-bottom:0}
.service-item-heading span{display:block;font-family:var(--serif);font-size:31px;line-height:1;margin-top:2px}

.portfolio{background:#fff;padding-bottom:70px}
.portfolio-heading{display:flex;align-items:end;justify-content:space-between;gap:50px;margin-bottom:55px}
.portfolio-heading h2{margin-bottom:0}
.portfolio-heading p{max-width:320px;font-size:17px;line-height:1.65;color:#5a5a5a;margin:0 0 8px}
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.project-card{display:block;border:0;padding:0;background:none;color:#111;text-align:left;cursor:pointer;min-width:0}
.project-image{display:block;overflow:hidden;aspect-ratio:1.42;background:#e4e4e4}
.project-image img{width:100%;height:100%;object-fit:cover;transition:transform .85s cubic-bezier(.22,.8,.2,1),filter .6s}
.project-card:hover img,.project-card:focus-visible img{transform:scale(1.045);filter:brightness(.9)}
.project-caption{display:grid;gap:7px;padding-top:18px}
.project-caption span:first-child{font-family:var(--serif);font-size:38px;line-height:1.05}
.project-caption span:last-child{font-size:11px;font-weight:500;letter-spacing:.12em;white-space:nowrap}
.project-card.reveal{opacity:1;transform:none}

.about{background:#fff;padding-top:70px}
.about-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:10%;align-items:start}
.about h2{margin-bottom:0}
.about-copy p{font-size:18px;line-height:1.7;color:#3f3f3f;margin:0 0 22px}
.about-copy p:first-child{font-size:21px;color:#111}
.about-link{display:inline-block;margin-top:11px;font-size:15px;font-weight:500;text-decoration:underline;text-underline-offset:6px}
.about-link:hover{text-decoration-thickness:2px}
.contact{color:#fff;background:#000}
.contact-layout{max-width:850px}
.contact h2{font-size:clamp(85px,9vw,145px);margin:30px 0 24px}
.contact p{font-size:18px;line-height:1.65;color:#d7d7d7;margin:0 0 34px}
.email-link{display:block;width:max-content;max-width:100%;margin-top:32px;font-size:15px;color:#e0e0e0;word-break:break-word}
.email-link:hover{text-decoration:underline}
.instagram-link{display:inline-block;margin-top:24px;font-size:14px;color:#e0e0e0;text-decoration:underline;text-underline-offset:5px}
.instagram-link:hover{text-decoration-thickness:2px}
.footer{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:27px clamp(24px,7vw,110px);background:#000;color:#e6e6e6;font-size:11px;letter-spacing:.1em}
.footer-brand img{height:42px;width:auto;filter:invert(1)}
.footer>a:last-child{font-size:13px;letter-spacing:0}
.footer>a:last-child:hover{text-decoration:underline}

.detail-hero{min-height:670px;min-height:84svh;display:flex;align-items:end;background:radial-gradient(ellipse at 84% 17%,#292929 0,#090909 47%,#000 78%);color:#fff}
.detail-hero-inner{width:100%;max-width:1560px;margin:0 auto;padding:155px clamp(24px,7vw,110px) 95px}
.detail-breadcrumb{display:flex;gap:14px;align-items:center;margin:0 0 clamp(65px,9vh,120px);font-size:13px;color:#bdbdbd}
.detail-breadcrumb a:hover{text-decoration:underline;text-underline-offset:4px}
.detail-hero h1{max-width:1100px;font-family:var(--serif);font-size:clamp(76px,9vw,145px);font-weight:400;letter-spacing:-.045em;line-height:.94;margin:20px 0 30px;animation:rise-in .8s .1s both}
.detail-lead{max-width:660px;font-size:20px;line-height:1.6;color:#e0e0e0;margin:0 0 35px;animation:rise-in .8s .2s both}
.detail-hero .button{animation:rise-in .8s .3s both}
.detail-intro{max-width:1560px;margin:auto}
.detail-intro-grid,.detail-process-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:8%;align-items:start}
.detail-intro-copy{max-width:750px}
.detail-intro-copy p{font-size:19px;line-height:1.7;margin:0 0 25px;color:#424242}
.detail-intro-copy p:first-child{font-size:25px;line-height:1.55;color:#111}
.service-page-image{margin:80px 0 0}
.service-page-image img{width:100%;max-height:680px;aspect-ratio:1.8;object-fit:cover}
.service-page-image figcaption{font-size:11px;letter-spacing:.13em;margin-top:15px}
.detail-benefits{background:#000;color:#fff}
.detail-benefits h2,.detail-process h2,.detail-note h2,.detail-contact h2{font-family:var(--serif);font-weight:400;font-size:clamp(62px,6.4vw,100px);line-height:1.02;letter-spacing:-.04em;margin:20px 0 60px}
.detail-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,70px)}
.detail-card{border-top:1px solid #656565;padding-top:19px}
.detail-number{font-size:12px;letter-spacing:.12em;color:#bbb}
.detail-card h3{font-family:var(--serif);font-weight:400;font-size:clamp(35px,3vw,52px);line-height:1.08;margin:55px 0 20px}
.detail-card p{font-size:16px;line-height:1.7;color:#ccc;margin:0;max-width:390px}
.detail-process{background:#fff}
.detail-process h2{max-width:480px;margin-bottom:0}
.detail-process ol{list-style:none;margin:0;padding:0}
.detail-process li{display:grid;grid-template-columns:50px 1fr;gap:30px;border-top:1px solid #bdbdbd;padding:29px 0 37px}
.detail-process li span{font-size:13px;letter-spacing:.12em;padding-top:8px}
.detail-process li h3{font-family:var(--serif);font-size:40px;line-height:1.1;font-weight:400;margin:0 0 11px}
.detail-process li p{font-size:16px;color:#555;line-height:1.7;margin:0;max-width:540px}
.detail-note{display:grid;grid-template-columns:.7fr 1.3fr;gap:8%;border-top:1px solid #d4d4d4;background:#fff}
.detail-note>div{max-width:760px}
.detail-note h2{font-size:clamp(50px,5vw,77px);margin:0 0 24px}
.detail-note p{font-size:19px;line-height:1.7;color:#444;margin:0 0 30px}
.detail-note a{display:inline-block;text-decoration:underline;text-underline-offset:6px;font-size:15px}
.detail-note a:hover{text-decoration-thickness:2px}
.detail-contact{background:#000;color:#fff}
.detail-contact h2{max-width:1000px;margin-bottom:25px}
.detail-contact p{max-width:620px;font-size:18px;line-height:1.7;color:#ccc;margin:0 0 35px}
.detail-related{display:flex;justify-content:space-between;align-items:start;gap:40px;background:#fff}
.detail-related>div{display:flex;flex-wrap:wrap;gap:20px 45px;max-width:850px}
.detail-related a{font-family:var(--serif);font-size:clamp(29px,3vw,46px);line-height:1.1;border-bottom:1px solid #111;padding-bottom:4px}
.detail-related a:hover{opacity:.55}

.lightbox{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:22px clamp(18px,4vw,60px);border:0;background:#000;color:#fff;overflow:hidden}
.lightbox::backdrop{background:rgba(0,0,0,.9)}
.lightbox[open]{display:flex;flex-direction:column;animation:lightbox-in .25s ease both}
.lightbox-top,.lightbox-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;flex:none}
.lightbox-top{min-height:69px}
.lightbox-top h2{font-family:var(--serif);font-size:32px;font-weight:400;margin:2px 0 0}
.lightbox-close,.lightbox-nav{background:none;color:#fff;border:1px solid #a0a0a0;border-radius:100px;cursor:pointer;transition:background .2s,color .2s}
.lightbox-close{padding:11px 20px;font-size:14px}
.lightbox-close:hover,.lightbox-nav:hover{background:#fff;color:#111}
.lightbox-stage{position:relative;min-height:0;flex:1;display:flex;align-items:center;justify-content:center}
.lightbox-stage img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
.lightbox-nav{position:absolute;z-index:2;top:50%;transform:translateY(-50%);padding:13px 18px;font-size:14px;background:rgba(0,0,0,.5)}
.lightbox-nav.prev{left:12px}.lightbox-nav.next{right:12px}
.lightbox-bottom{height:42px;font-size:11px;letter-spacing:.13em}
.reveal{opacity:0;transform:translateY(25px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.75,.2,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
@keyframes hero-settle{from{opacity:.55;transform:scale(1.065)}to{opacity:1;transform:scale(1)}}
@keyframes rise-in{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}
@keyframes lightbox-in{from{opacity:0}to{opacity:1}}

@media(max-width:1000px){
  .desktop-nav{gap:22px}
  .service-grid{gap:30px}
  .service-item{grid-template-rows:145px 1fr auto}
}
@media(max-width:820px){
  .site-header{height:74px}
  .desktop-nav{display:none}
  .menu-toggle{display:block}
  .mobile-nav{display:flex;flex-direction:column;position:fixed;z-index:90;inset:74px 0 0;background:#fff;color:#111;padding:30px clamp(24px,7vw,70px) 60px;visibility:hidden;opacity:0;overflow-y:auto;transform:translateY(-10px);transition:visibility .3s,opacity .3s,transform .3s}
  .mobile-nav.open{visibility:visible;opacity:1;transform:translateY(0)}
  .mobile-nav>a,.mobile-nav summary{display:flex;align-items:center;justify-content:space-between;padding:14px 0;font-family:var(--serif);font-size:43px;list-style:none;cursor:pointer}
  .mobile-services{padding:0 0 14px 16px}
  .mobile-services a{display:block;padding:10px 0;font-size:16px}
  .featured-copy{grid-template-columns:1fr;gap:27px}
  .service-grid{grid-template-columns:1fr 1fr}
  .service-item{min-height:0}
  .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}
  .project-card:first-child{grid-column:span 2}
  .project-card:first-child .project-image{aspect-ratio:1.9}
  .about-layout{grid-template-columns:1fr;gap:48px}
  .detail-intro-grid,.detail-process-grid,.detail-note{grid-template-columns:1fr;gap:38px}
  .detail-card-grid{grid-template-columns:1fr;gap:45px}
  .detail-card h3{margin-top:30px}
}
@media(max-width:600px){
  section[id],article[id]{scroll-margin-top:70px}
  article[id]{scroll-margin-top:106px}
  .brand img{height:40px}
  .hero{min-height:660px}
  .hero-image{object-position:57% center}
  .hero-scrim{background:linear-gradient(90deg,rgba(0,0,0,.67),rgba(0,0,0,.25)),linear-gradient(0deg,rgba(0,0,0,.64),transparent 60%)}
  .hero-content{padding:120px 24px 82px}
  .hero h1{font-size:clamp(52px,13vw,76px);line-height:.98;margin:19px 0 24px}
  .hero p{font-size:16px;max-width:330px}
  .hero-actions{gap:20px;flex-wrap:wrap}
  .button{font-size:13px}
  .quiet-link{font-size:13px}
  .section-pad{padding:88px 24px}
  .section-intro{margin-bottom:48px}
  .section-intro h2,.portfolio-heading h2,.about h2{font-size:clamp(57px,12vw,76px)}
  .section-intro p{font-size:16px}
  .featured-image a{aspect-ratio:1.48}
  .featured-copy{padding:35px 0 53px}
  .featured-copy h3{font-size:59px}
  .featured-copy p{font-size:16px}
  .featured-actions{align-items:flex-start;flex-direction:column;gap:20px}
  .service-grid{grid-template-columns:1fr;gap:45px;padding-top:62px}
  .service-item{grid-template-rows:auto auto auto;gap:0}
  .service-item h3{font-size:45px;margin-bottom:14px}
  .service-item-heading span{font-size:33px;margin:0 0 15px}
  .portfolio-heading{display:block;margin-bottom:34px}
  .portfolio{padding-bottom:55px}
  .about{padding-top:55px}
  .portfolio-heading p{font-size:16px;margin:20px 0 0}
  .project-grid{display:block}
  .project-card{width:100%;margin-bottom:34px}
  .project-card:last-child{margin-bottom:0}
  .project-image,.project-card:first-child .project-image{aspect-ratio:1.17}
  .project-caption{padding-top:13px}
  .project-caption span:first-child{font-size:27px}
  .project-caption span:last-child{font-size:10px}
  .about-copy p,.contact p{font-size:16px}
  .about-copy p:first-child{font-size:19px}
  .contact h2{font-size:clamp(68px,13vw,90px)}
  .footer{flex-wrap:wrap;gap:20px;padding:32px 24px}
  .footer>*{flex-basis:43%}
  .footer-brand img{height:39px}
  .lightbox{padding:14px}
  .lightbox-top h2{font-size:26px}
  .lightbox-nav{top:auto;bottom:10px;transform:none}
  .detail-hero{min-height:680px;min-height:87svh}
  .detail-hero-inner{padding:120px 24px 70px}
  .detail-breadcrumb{margin-bottom:65px}
  .detail-hero h1{font-size:clamp(57px,13vw,76px);line-height:.99;margin:18px 0 24px}
  .detail-lead{font-size:16px;line-height:1.6}
  .detail-intro-copy p{font-size:16px}
  .detail-intro-copy p:first-child{font-size:20px}
  .service-page-image{margin-top:48px}
  .service-page-image img{aspect-ratio:1.13}
  .detail-benefits h2,.detail-process h2,.detail-contact h2{font-size:clamp(59px,12vw,76px);margin-bottom:45px}
  .detail-card h3{font-size:41px}
  .detail-process li{grid-template-columns:35px 1fr;gap:16px}
  .detail-process li h3{font-size:32px}
  .detail-note h2{font-size:52px}
  .detail-note p,.detail-contact p{font-size:16px}
  .detail-related{display:block}
  .detail-related>div{margin-top:32px;gap:22px}
  .detail-related a{font-size:32px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}