@font-face{font-family:'Archivo'; font-weight:300 800; font-stretch:72% 100%; font-display:swap; src:url(fonts/archivo.woff2) format('woff2');}

/*
  The page is the CAD viewport: --viewport is the exact background of every render,
  so machines sit directly on the page with no frame around them.
  Colour rule: yellow means "act", and only ever sits on graphite.
*/
:root{
  --viewport:#C3C9D2;
  --sheet:#D3D8DF;
  --frame:#26292D;
  --frame-hover:#3A3E44;
  --steel:#4A525D;
  --signal:#F5C518;
  --rule:rgba(38,41,45,0.2);
  --on-frame-muted:#9AA2AD;
  --font:'Archivo', system-ui, sans-serif;
  --condensed:72%;
  --nav-h:68px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px; --s12:96px; --s16:128px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:var(--nav-h); -webkit-text-size-adjust:100%;}
html:has(dialog[open]){overflow:hidden;}
body{min-height:100vh; display:flex; flex-direction:column; background:var(--viewport); color:var(--frame); font:400 17px/1.55 var(--font); -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
img, svg{display:block; max-width:100%;}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;}
ul, ol{list-style:none;}
main{flex:1;}
:focus-visible{outline:2px solid var(--frame); outline-offset:3px;}
h1, h2, h3{font-weight:760; font-stretch:var(--condensed); line-height:1; letter-spacing:-0.005em; text-wrap:balance;}
p{text-wrap:pretty;}

/* Width comes from `width`, not padding, so no other rule can knock out the side gutters */
.wrap{width:min(100% - 40px, 1200px); margin-inline:auto;}
@media (min-width: 700px){ .wrap{width:min(100% - 64px, 1200px);} }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 26px 17px; border-radius:3px;
  background:var(--frame); color:var(--viewport); box-shadow:inset 0 -3px 0 var(--signal);
  font-size:16px; font-weight:600;
  transition:background-color .2s;
}
.btn:hover{background:var(--frame-hover);}
.link{font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; transition:text-decoration-thickness .15s;}
.link:hover{text-decoration-thickness:3px;}

/* HEADER */
.site-header{
  position:fixed; inset:0 0 auto; z-index:10; view-transition-name:site-header;
  background:rgba(195,201,210,0.88); border-bottom:1px solid var(--rule);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.site-header .wrap{height:var(--nav-h); display:flex; align-items:center; justify-content:space-between;}
.logo{display:flex; align-items:flex-end; gap:10px; line-height:1; white-space:nowrap;}
.logo-mark{width:61px; height:28px; fill:var(--frame);}
.logo span{padding-bottom:1px; font-size:13px; font-weight:700; font-stretch:var(--condensed); letter-spacing:0.04em;}
.nav{display:flex; align-items:center; gap:var(--s4);}
.nav a{font-size:15px; font-weight:500; text-underline-offset:6px;}
.nav a:hover, .nav a[aria-current]{text-decoration:underline; text-decoration-thickness:2px;}
.nav .nav-cta{padding:9px 16px 10px; border-radius:3px; background:var(--frame); color:var(--viewport); box-shadow:inset 0 -2px 0 var(--signal); transition:background-color .2s;}
.nav .nav-cta:hover{background:var(--frame-hover); text-decoration:none;}
.menu-btn{display:none; width:44px; height:44px; margin-right:-10px; flex-direction:column; align-items:center; justify-content:center; gap:5px;}
.menu-btn span{width:22px; height:2px; background:var(--frame); transition:transform .2s, opacity .2s;}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* HERO: copy on the left, the renders float on the page to the right */
.hero{padding:calc(var(--nav-h) + var(--s6)) 0 var(--s8);}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"copy" "show"; gap:var(--s4);}
.hero-copy{grid-area:copy;}
.hero h1{font-size:clamp(46px, 6vw, 84px); line-height:.92; letter-spacing:-0.015em;}
.hero .lead{margin-top:var(--s3); max-width:46ch; font-size:19px; color:var(--steel);}
.hero-actions{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s4); margin-top:var(--s4);}

.showcase{grid-area:show;}
/* Slides stack in one grid cell and crossfade */
.slides{display:grid;}
.slides img{grid-area:1/1; width:100%; height:auto; aspect-ratio:1; opacity:0; transition:opacity .9s ease-in-out;}
.slides img.is-active{opacity:1;}
.showcase figcaption{display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; transition:opacity .3s;}
.showcase figcaption.swapping{opacity:0;}
.showcase-title{font-size:21px; font-weight:760; font-stretch:var(--condensed);}
.showcase-tag{font-size:15px; color:var(--steel);}


/* SECTIONS */
.section{padding:var(--s12) 0;}
.section + .section{border-top:1px solid var(--rule);}
.section-title{font-size:clamp(34px, 4.6vw, 56px); margin-bottom:var(--s6);}

/* Services, grouped by discipline. The heavy top rule marks each group. */
.disciplines{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:var(--s6) var(--s4);}
.discipline{border-top:3px solid var(--frame); padding-top:var(--s2);}
.discipline h3{font-size:26px; margin-bottom:var(--s1);}
.discipline dt{margin-top:var(--s3); font-weight:650;}
.discipline dd{margin-top:2px; max-width:42ch; font-size:16px; color:var(--steel);}

.industries{display:flex; flex-wrap:wrap; gap:var(--s1) 0;}
.industries li{font-size:clamp(30px, 5vw, 64px); font-weight:760; font-stretch:var(--condensed); line-height:1.05; letter-spacing:-0.01em;}
.industries li:not(:last-child)::after{content:","; margin-right:.32em;}
.note{margin-top:var(--s4); max-width:52ch; font-size:19px; color:var(--steel);}

/* About: the project steps are a real sequence, so they are numbered */
.about{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s6) var(--s8);}
.about-copy p{max-width:52ch; color:var(--steel);}
.about-copy p:first-of-type{font-size:20px; color:var(--frame);}
.about-copy p + p{margin-top:var(--s2);}
.steps{counter-reset:step; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap:var(--s4) var(--s3); align-content:start;}
.steps li{counter-increment:step; padding-top:var(--s2); border-top:1px solid var(--rule); font-size:16px; color:var(--steel);}
.steps li::before{content:counter(step); display:block; margin-bottom:var(--s2); font-size:44px; font-weight:300; font-stretch:var(--condensed); line-height:1; color:var(--frame); font-variant-numeric:tabular-nums;}
.steps strong{display:block; margin-bottom:2px; font-size:19px; font-weight:700; color:var(--frame);}

/* CONTACT + FOOTER: the one graphite surface, where the yellow lives */
.site-footer{background:var(--frame); color:var(--viewport); padding-top:var(--s12);}
.contact{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s6) var(--s8);}
.contact h2{font-size:clamp(34px, 4.6vw, 56px);}
.contact .lead{margin-top:var(--s2); max-width:40ch; color:var(--on-frame-muted);}
.contact-list > div{display:grid; grid-template-columns:96px minmax(0,1fr); gap:var(--s2); align-items:baseline; padding:var(--s2) 0; border-bottom:1px solid rgba(195,201,210,0.16);}
.contact-list > div:first-child{border-top:1px solid rgba(195,201,210,0.16);}
.contact-list dt{font-size:14px; font-weight:600; color:var(--on-frame-muted);}
.contact-list dd a{display:block; width:fit-content; overflow-wrap:anywhere; text-underline-offset:4px;}
.contact-list dd a:hover{text-decoration:underline;}
.contact-list .contact-email a{font-size:clamp(28px, 3.6vw, 44px); font-weight:760; font-stretch:var(--condensed); line-height:1.1; color:var(--signal);}
.contact-list .contact-email a:hover{text-decoration-thickness:2px;}
.legal{display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s1) var(--s3); margin-top:var(--s12); padding:var(--s3) 0; border-top:1px solid rgba(195,201,210,0.16); font-size:14px; color:var(--on-frame-muted);}

/* GALLERY: renders sit straight on the page, no cards */
.page-head{padding:calc(var(--nav-h) + var(--s8)) 0 var(--s4);}
.page-head h1{font-size:clamp(52px, 8vw, 104px); line-height:.92; margin-bottom:var(--s3);}
.page-head p{max-width:50ch; font-size:19px; color:var(--steel);}
.gallery-section{padding-bottom:var(--s12);}
.gallery{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap:var(--s4) var(--s3);}
.shot{display:block; width:100%; text-align:center; cursor:zoom-in;}
/* The frame clips the hover zoom so it can never cover the caption. Clipping is invisible: the frame is page-coloured. */
.shot-frame{display:block; overflow:hidden;}
.shot img{width:100%; height:auto; aspect-ratio:1; transition:transform .35s cubic-bezier(.2,.7,.2,1);}
.shot-title{display:block; margin-top:var(--s1); font-size:21px; font-weight:760; font-stretch:var(--condensed); line-height:1.15; text-underline-offset:4px;}
.shot-tag{display:block; margin-top:2px; font-size:15px; color:var(--steel);}
@media (hover:hover){
  .shot:hover img{transform:scale(1.04);}
  .shot:hover .shot-title{text-decoration:underline; text-decoration-thickness:2px;}
}

.lightbox{width:100%; height:100%; max-width:none; max-height:none; padding:var(--s3); border:0; background:transparent; color:var(--frame);}
.lightbox[open]{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s1);}
.lightbox::backdrop{background:var(--viewport);}
.lightbox img{max-height:80vh; max-height:80svh; width:auto;}
.lightbox p{font-size:24px; font-weight:760; font-stretch:var(--condensed); text-align:center;}
.lightbox-close{position:absolute; top:var(--s2); right:var(--s2); padding:10px 18px; border-radius:3px; background:var(--frame); color:var(--viewport); font-size:15px; font-weight:600;}
.lightbox-close:hover{background:var(--frame-hover);}

/* DESKTOP */
@media (min-width: 960px){
  .hero{min-height:min(100vh, 960px); min-height:min(100svh, 960px); display:flex; align-items:center;}
  .hero-grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr); grid-template-areas:"copy show"; align-items:center; column-gap:var(--s4);}
  .showcase{margin-right:-4%;}
  .about{grid-template-columns:minmax(0,5fr) minmax(0,7fr);}
  .about .section-title{margin-bottom:var(--s4);}
  .contact{grid-template-columns:minmax(0,5fr) minmax(0,7fr);}
}

/* PHONE */
@media (max-width: 760px){
  .menu-btn{display:flex;}
  .nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    padding:8px 20px 20px; background:var(--viewport); border-bottom:1px solid var(--rule);
  }
  .nav.open{display:flex;}
  .nav a{padding:14px 0; font-size:17px; border-bottom:1px solid var(--rule);}
  .nav .nav-cta{margin-top:var(--s2); padding:14px; text-align:center; border-bottom:0;}
  .hero{padding-top:calc(var(--nav-h) + var(--s4));}
  .section{padding:var(--s8) 0;}
  .section-title{margin-bottom:var(--s4);}
  .site-footer{padding-top:var(--s8);}
  .legal{margin-top:var(--s8);}
  .page-head{padding:calc(var(--nav-h) + var(--s6)) 0 var(--s3);}
}
@media (max-width: 520px){
  .contact-list > div{grid-template-columns:1fr; gap:2px;}
}

/* MOTION: one load sequence in the hero, plus responses to clicks. Off for reduced-motion users. */
@media (prefers-reduced-motion: no-preference){
  @keyframes rise{from{opacity:0; transform:translateY(16px);}}
  @keyframes settle{from{opacity:0; transform:scale(.96);}}
  .hero-copy > *{animation:rise .7s cubic-bezier(.2,.7,.2,1) both;}
  .hero-copy > :nth-child(2){animation-delay:.08s;}
  .hero-copy > :nth-child(3){animation-delay:.16s;}
  .hero .slides{animation:settle 1s .1s cubic-bezier(.2,.7,.2,1) both;}

  /* Page-to-page cross-fade; the header stays put */
  @view-transition{navigation:auto;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .slides img, .showcase figcaption{transition:none;}
}