:root{
  --ink:#14171b;
  --paper:#e9eae3;
  --paper-bright:#f6f6f1;
  --signal:#e14e1d;
  --steel:#3d4a5c;
  --safety:#f0b429;
  --line: rgba(20,23,27,0.14);
  --max: 1180px;
  --pad: clamp(20px, 5vw, 64px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', Arial, sans-serif;
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3{
  font-family:'Anton', 'Inter', sans-serif;
  font-weight:400;
  line-height:0.95;
  letter-spacing:0.2px;
  margin:0;
}
p{margin:0;}
.wrap{max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad);}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
:focus-visible{outline:3px solid var(--signal); outline-offset:3px;}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:18px; padding-bottom:18px;
}
.brand{
  font-family:'Anton', sans-serif;
  font-size:clamp(18px,2.4vw,24px);
  letter-spacing:0.3px;
}
.brand span{color:var(--signal);}
nav.links{display:flex; gap:32px; align-items:center;}
nav.links a{
  text-decoration:none;
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  padding:6px 2px;
  border-bottom:2px solid transparent;
  transition:border-color .2s ease;
}
nav.links a:hover{border-color:var(--signal);}
.nav-cta{
  background:var(--ink); color:var(--paper-bright);
  padding:10px 18px;
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  border:1px solid var(--ink);
}
.nav-cta:hover{background:var(--signal); border-color:var(--signal); color:var(--ink);}
.menu-toggle{
  display:none;
  position:relative;
  width:44px; height:44px;
  flex:none;
  background:none;
  border:1px solid var(--line);
  cursor:pointer;
  padding:0;
}
.menu-toggle .bar{
  position:absolute;
  left:11px; right:11px;
  height:2px;
  background:var(--ink);
  transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.menu-toggle .bar:nth-child(1){top:15px;}
.menu-toggle .bar:nth-child(2){top:21px;}
.menu-toggle .bar:nth-child(3){top:27px;}
.menu-toggle[aria-expanded="true"]{border-color:var(--ink);}
.menu-toggle[aria-expanded="true"] .bar:nth-child(1){top:21px; transform:rotate(45deg);}
.menu-toggle[aria-expanded="true"] .bar:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] .bar:nth-child(3){top:21px; transform:rotate(-45deg);}

.nav-overlay{
  display:none;
  position:fixed; inset:0;
  background:rgba(20,23,27,0.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  z-index:40;
}
.nav-overlay.open{opacity:1; pointer-events:auto;}

@media (max-width:820px){
  /* Side drawer from the right */
  nav.links{
    position:fixed; top:0; right:0; bottom:0;
    width:min(82vw, 340px);
    background:var(--paper-bright);
    border-left:1px solid var(--line);
    box-shadow:-16px 0 40px rgba(20,23,27,0.18);
    flex-direction:column; align-items:stretch;
    padding:96px 28px calc(28px + env(safe-area-inset-bottom, 0px));
    gap:0;
    overflow-y:auto;
    display:flex;
    opacity:0;
    visibility:hidden;
    transform:translateX(100%);
    transition:transform .38s cubic-bezier(.22,.8,.24,1), opacity .3s ease, visibility 0s linear .38s;
  }
  nav.links.open{
    opacity:1;
    visibility:visible;
    transform:translateX(0);
    transition:transform .38s cubic-bezier(.22,.8,.24,1), opacity .3s ease, visibility 0s;
  }
  /* Links fade in one after another once the drawer opens */
  nav.links > a{opacity:0; transform:translateX(16px); transition:opacity .25s ease, transform .3s ease;}
  nav.links.open > a{opacity:1; transform:none;}
  nav.links.open > a:nth-child(1){transition-delay:.12s;}
  nav.links.open > a:nth-child(2){transition-delay:.17s;}
  nav.links.open > a:nth-child(3){transition-delay:.22s;}
  nav.links.open > a:nth-child(4){transition-delay:.27s;}
  /* Close button stays on top of the drawer */
  .menu-toggle{z-index:46;}
  nav.links a{
    width:100%;
    padding:14px 2px;
    border-bottom:1px solid var(--line);
    font-size:16px;
  }
  nav.links a:hover{border-bottom-color:var(--line);}
  nav.links .nav-cta{
    text-align:center;
    margin-top:14px;
    border-bottom:none;
    padding:14px 18px;
  }
  .menu-toggle{display:block;}
  .nav-overlay{display:block;}
}

@media (max-width:480px){
  .nav-row{padding-top:14px; padding-bottom:14px; gap:12px;}
  .brand{font-size:16px; overflow-wrap:anywhere; max-width:calc(100% - 60px);}
  .menu-toggle{padding:8px 10px; flex:none;}
}

nav.links a[aria-current="page"]{border-color:var(--signal);}
nav.links a.nav-cta{color:var(--paper-bright); border:1px solid var(--ink); padding:10px 18px;}
nav.links a.nav-cta:hover{color:var(--ink); border-color:var(--signal);}
.brand{text-decoration:none;}
@media (max-width:820px){
  nav.links a[aria-current="page"]:not(.nav-cta){border-bottom-color:var(--line); color:var(--signal);}
}

/* ---------- Page headings (inner pages) ---------- */
.section-head h1{font-size:clamp(38px,5.6vw,72px); text-transform:uppercase;}
.more-link{margin-top:32px;}

/* ---------- CTA band ---------- */
.cta-band{background:var(--ink); color:var(--paper-bright); border-bottom:none;}
.cta-band .section-head{margin-bottom:28px;}
.cta-band .section-head p{color:#b9c0c9;}
.cta-band .btn-solid{background:var(--signal); border-color:var(--signal); color:var(--ink);}
.cta-band .btn-solid:hover{background:var(--paper-bright); border-color:var(--paper-bright);}
.cta-band .btn-outline{color:var(--paper-bright); border-color:var(--paper-bright);}
.cta-band .btn-outline:hover{background:var(--paper-bright); color:var(--ink);}

/* ---------- Hero ---------- */
.hero{
  padding-top:clamp(48px,8vw,96px);
  padding-bottom:clamp(48px,8vw,96px);
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.3fr 0.9fr;
  gap:56px;
  align-items:end;
}
.hero h1{
  font-size:clamp(46px, 7vw, 96px);
  text-transform:uppercase;
}
.hero h1 .line2{color:var(--signal);}
.hero-sub{
  margin-top:24px;
  max-width:52ch;
  font-size:clamp(16px,1.8vw,19px);
  color:var(--steel);
}
.hero-actions{margin-top:34px; display:flex; gap:14px; flex-wrap:wrap;}
.btn{
  display:inline-block;
  padding:15px 26px;
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  border:2px solid var(--ink);
}
.btn-solid{background:var(--ink); color:var(--paper-bright);}
.btn-solid:hover{background:var(--signal); border-color:var(--signal); color:var(--ink);}
.btn-outline{background:transparent; color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:var(--paper-bright);}

.hero-panel{
  background:var(--ink);
  color:var(--paper-bright);
  padding:28px;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:260px;
}
.hero-panel .tag{
  font-family:'Anton', sans-serif;
  font-size:clamp(20px,2.4vw,26px);
  color:var(--safety);
  text-transform:uppercase;
}
.hero-logo{
  width:100%;
  max-width:280px;
  height:auto;
  margin-bottom:18px;
}
.hero-panel p{margin-top:14px; color:#c7ccd3; font-size:14.5px;}
.hero-stats{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px;}
.hero-stats div b{
  display:block; font-family:'Anton',sans-serif; font-size:28px; color:var(--paper-bright);
}
.hero-stats div span{font-size:12.5px; color:#9aa2ad;}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
}

@media (max-width:480px){
  .hero{padding-top:36px; padding-bottom:36px;}
  .hero h1{font-size:36px;}
  .hero-actions{flex-direction:column; align-items:stretch;}
  .btn{text-align:center; padding:14px 20px;}
  .hero-panel{min-height:0; padding:22px;}
  .hero-stats{grid-template-columns:1fr; gap:12px;}
}

/* ---------- Section shell ---------- */
section{padding-top:clamp(56px,8vw,100px); padding-bottom:clamp(56px,8vw,100px); border-bottom:1px solid var(--line);}
.kicker{
  font-size:13px; font-weight:700; color:var(--signal); margin-bottom:10px;
}
.section-head{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:44px;}
.section-head h2{font-size:clamp(32px,4.4vw,52px); text-transform:uppercase;}
.section-head p{color:var(--steel); font-size:16px; max-width:46ch;}
@media (max-width:760px){.section-head{grid-template-columns:1fr;}}

@media (max-width:480px){
  section{padding-top:40px; padding-bottom:40px;}
  .section-head{gap:16px; margin-bottom:32px;}
  .about-copy{font-size:15.5px;}
  .goal-row{grid-template-columns:20px 1fr; gap:12px; padding:14px 0;}
  .goal-row p{font-size:14.5px;}
}

/* ---------- About ---------- */
.about-copy{max-width:70ch; font-size:17px; color:#2b2e33;}
.about-copy p + p{margin-top:16px;}

.vm-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  margin-top:48px;
  background:var(--line);
  border:1px solid var(--line);
}
.vm-card{background:var(--paper-bright); padding:34px;}
.vm-card h3{font-size:22px; text-transform:uppercase; margin-bottom:14px;}
.vm-card p{color:var(--steel); font-size:15px;}
@media (max-width:700px){.vm-grid{grid-template-columns:1fr;}}
@media (max-width:480px){.vm-card{padding:22px;}}

.goals{margin-top:48px; border-top:1px solid var(--line);}
.goal-row{
  display:grid; grid-template-columns:28px 1fr;
  gap:18px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  align-items:start;
}
.goal-row .mark{width:12px; height:12px; background:var(--signal); margin-top:6px;}
.goal-row p{font-size:16px;}

/* ---------- Services marquee ---------- */
.marquee{
  border-bottom:1px solid var(--line);
  background:var(--ink);
  overflow:hidden;
  padding:16px 0;
}
.marquee-track{
  display:flex; gap:40px; white-space:nowrap;
  width:max-content;
  animation:scroll 38s linear infinite;
}
@media (prefers-reduced-motion: reduce){ .marquee-track{animation:none;} }
@keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.marquee-track span{
  font-family:'Anton', sans-serif;
  font-size:22px;
  color:var(--paper-bright);
  text-transform:uppercase;
}
.marquee-track span.accent{color:var(--signal);}

@media (max-width:480px){
  .marquee{padding:12px 0;}
  .marquee-track{gap:24px; animation-duration:26s;}
  .marquee-track span{font-size:16px;}
}

/* ---------- Services grid ---------- */
.svc-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.svc-card{
  background:var(--paper-bright);
  padding:28px 24px;
  min-height:168px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.svc-card.fill-ink{background:var(--ink); color:var(--paper-bright);}
.svc-card.fill-ink p{color:#b9c0c9;}
.svc-card.fill-signal{background:var(--signal); color:var(--ink);}
.svc-card.fill-signal p{color:#3a1e10;}
.svc-card.fill-steel{background:var(--steel); color:var(--paper-bright);}
.svc-card.fill-steel p{color:#cfd6de;}
.svc-card h3{font-size:18px; text-transform:uppercase; letter-spacing:0.2px;}
.svc-card p{margin-top:10px; font-size:14px; color:var(--steel);}

@media (max-width:900px){ .svc-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .svc-grid{grid-template-columns:1fr;} }
@media (max-width:480px){
  .svc-card{min-height:0; padding:22px 20px;}
  .svc-card h3{font-size:16.5px;}
  .svc-card p{font-size:13.5px;}
}

/* ---------- Contact ---------- */
.contact-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:56px;
}
.team-card{
  display:flex; gap:18px; align-items:flex-start;
  padding:22px 0;
  border-top:1px solid var(--line);
}
.team-card:last-child{border-bottom:1px solid var(--line);}
.avatar{
  width:56px; height:56px; flex:none;
  background:var(--ink); color:var(--paper-bright);
  display:flex; align-items:center; justify-content:center;
  font-family:'Anton', sans-serif; font-size:20px;
}
.team-card h3{font-size:18px; text-transform:none; font-family:'Inter'; font-weight:700;}
.team-card .role{color:var(--signal); font-size:13.5px; font-weight:600; margin-top:2px;}
.team-card a.phone{display:inline-block; margin-top:8px; font-size:15px; text-decoration:none; border-bottom:1px solid var(--ink);}

.contact-info{
  background:var(--paper-bright);
  border:1px solid var(--line);
  padding:36px;
}
.contact-info h3{font-size:22px; text-transform:uppercase; margin-bottom:6px;}
.contact-info .sub{color:var(--steel); font-size:14.5px; margin-bottom:26px;}
.info-line{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:18px 0;
  border-top:1px solid var(--line);
  text-decoration:none;
  color:var(--ink);
}
.info-line:first-of-type{border-top:none; padding-top:0;}
.icon-badge{
  width:42px; height:42px; flex:none;
  background:var(--ink);
  color:var(--paper-bright);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, color .2s ease;
}
.icon-badge svg{width:19px; height:19px;}
a.info-line:hover .icon-badge, a.info-line:focus-visible .icon-badge{
  background:var(--signal); color:var(--ink);
}
.info-text .i-label{display:block; font-size:12px; color:var(--steel); margin-bottom:3px;}
.info-text .i-value{font-size:16px; font-weight:600; line-height:1.4; word-break:break-word;}
a.info-line .i-value{text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px;}
a.info-line:hover .i-value{text-decoration-color:var(--signal);}

@media (max-width:820px){ .contact-grid{grid-template-columns:1fr;} }

@media (max-width:480px){
  .team-card{gap:14px; padding:18px 0;}
  .avatar{width:46px; height:46px; font-size:16px;}
  .contact-info{padding:24px;}
  .icon-badge{width:38px; height:38px;}
  .icon-badge svg{width:17px; height:17px;}
}

/* ---------- Footer ---------- */
footer{padding:28px var(--pad); border-top:none;}
.footer-row{
  max-width:var(--max); margin:0 auto;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
}
.footer-row p{font-size:13px; color:var(--steel);}

.icon-badge svg{fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}

@media (max-width:480px){
  .footer-row{flex-direction:column; align-items:flex-start; gap:6px;}
}

/* Keep the open mobile menu above its dimming overlay */
@media (max-width:820px){
nav.links{z-index:45;}
nav.links a.nav-cta{padding:14px 18px;}
}

@media (prefers-reduced-motion: reduce){
nav.links, nav.links > a{transition:opacity .2s ease, visibility 0s !important; transform:none !important;}
}

/* ---------- Our work: filters + gallery ---------- */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;}
.filter{
  font:600 14px 'Inter', Arial, sans-serif;
  color:var(--ink);
  padding:10px 16px;
  background:transparent;
  border:1px solid var(--ink);
  cursor:pointer;
}
.filter:hover{background:var(--paper-bright);}
.filter[aria-pressed="true"]{background:var(--ink); color:var(--paper-bright);}
.filter-count{font-size:13.5px; color:var(--steel); margin-bottom:24px;}

.gallery{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:28px 18px;}
.work-item{margin:0;}
.work-item[hidden]{display:none;}
.work-open{display:block; width:100%; padding:0; border:0; background:#d4d6cd; cursor:zoom-in; overflow:hidden;}
.work-open img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; transition:transform .5s ease;}
.work-open:hover img{transform:scale(1.04);}
.work-item figcaption{margin-top:10px; font-size:15px; font-weight:700;}
.work-item figcaption span{display:block; font-size:13px; font-weight:500; color:var(--steel); margin-top:1px;}

@media (max-width:600px){
  .gallery{grid-template-columns:1fr 1fr; gap:18px 10px;}
  .work-item figcaption{font-size:13.5px; margin-top:7px;}
  .work-item figcaption span{font-size:12px;}
  .filters{flex-wrap:nowrap; overflow-x:auto; margin-left:calc(var(--pad) * -1); margin-right:calc(var(--pad) * -1);
    padding:0 var(--pad) 4px; scrollbar-width:none;}
  .filters::-webkit-scrollbar{display:none;}
  .filter{flex:none; padding:9px 14px; font-size:13.5px;}
}

/* ---------- Lightbox ---------- */
.lightbox{
  width:100%; height:100%; max-width:none; max-height:none;
  margin:0; padding:0; border:0;
  background:rgba(14,16,19,0.97);
  color:var(--paper-bright);
}
.lightbox[open]{display:flex; align-items:center; justify-content:center; animation:lbIn .25s ease;}
.lightbox::backdrop{background:rgba(14,16,19,0.7);}
@keyframes lbIn{from{opacity:0;} to{opacity:1;}}
.lb-figure{margin:0; display:flex; flex-direction:column; align-items:center; max-width:calc(100% - 150px);}
.lb-img{max-width:100%; max-height:calc(100vh - 130px); max-height:calc(100dvh - 130px); width:auto; height:auto; object-fit:contain; transition:opacity .2s ease;}
.lb-img.loading{opacity:0;}
.lb-caption{margin-top:14px; display:flex; gap:14px; align-items:baseline; font-size:15px;}
.lb-title{font-weight:700;}
.lb-count{color:#9aa2ad; font-size:13px;}
.lb-btn{
  position:absolute; width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(246,246,241,0.08); border:1px solid rgba(246,246,241,0.25);
  color:var(--paper-bright); cursor:pointer;
}
.lb-btn:hover{background:var(--signal); border-color:var(--signal); color:var(--ink);}
.lb-btn svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.lb-close{top:calc(18px + env(safe-area-inset-top, 0px)); right:18px;}
.lb-prev{left:18px; top:50%; transform:translateY(-50%);}
.lb-next{right:18px; top:50%; transform:translateY(-50%);}
@media (max-width:700px){
  .lb-figure{max-width:100%; padding:0 12px;}
  .lb-img{max-height:calc(100dvh - 190px);}
  .lb-prev, .lb-next{top:auto; transform:none; bottom:calc(22px + env(safe-area-inset-bottom, 0px));}
  .lb-prev{left:calc(50% - 58px);}
  .lb-next{right:calc(50% - 58px);}
}

/* ---------- Home: recent work ---------- */
.recent-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;}
.recent-tile{display:block; text-decoration:none; color:var(--ink);}
.recent-tile img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; background:#d4d6cd;}
.recent-tile span{display:block; margin-top:10px; font-weight:700; font-size:15px;}
.recent-tile:hover span{color:var(--signal);}
@media (max-width:760px){ .recent-grid{grid-template-columns:1fr 1fr; gap:16px 10px;} .recent-tile span{font-size:13.5px;} }

/* ---------- About: photo beside copy ---------- */
.about-split{display:grid; grid-template-columns:1.25fr 1fr; gap:48px; align-items:start;}
.about-photo{margin:0;}
.about-photo img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;}
.about-photo figcaption{margin-top:10px; font-size:13.5px; color:var(--steel);}
@media (max-width:900px){ .about-split{grid-template-columns:1fr; gap:28px;} }

@media (prefers-reduced-motion: reduce){
  .work-open img, .lb-img{transition:none;}
  .lightbox[open]{animation:none;}
}