/* ===================== TOKENS ===================== */
:root{
  --ink:#14151A;
  --ink-soft:#1D1F26;
  --paper:#F1EDE5;
  --paper-soft:#E7E1D4;
  --cream:#ECE7DD;
  --charcoal:#1C1B18;
  --steel:#6B7680;
  --steel-soft:#9AA3A8;
  --brass:#B8862E;
  --border-dark: rgba(236,231,221,0.14);
  --border-light: rgba(28,27,24,0.14);
  --font-head:'Archivo Expanded', sans-serif;
  --font-body:'Inter', sans-serif;
  --max: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:90px;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--cream);
  background:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:var(--font-head);
  font-weight:700;
  line-height:1.08;
  margin:0;
  letter-spacing:-0.01em;
}
p{margin:0 0 1em;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
img,svg{display:block;max-width:100%;}
button{font-family:inherit;}

:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

/* ===================== SHARED ===================== */
.eyebrow{
  font-size:0.78rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--steel-soft);
  margin-bottom:1.1rem;
}
.eyebrow-dark{color:var(--steel);}

.section{
  padding:6.5rem 6vw;
}
.section-light{background:var(--paper); color:var(--charcoal);}
.section-dark{background:var(--ink); color:var(--cream);}

.section-head{
  max-width:640px;
  margin:0 auto 3.5rem;
  text-align:center;
}
.section-head h2{font-size:clamp(1.8rem,3.2vw,2.6rem);}
.section-sub{margin-top:1rem; color:var(--steel-soft); font-size:1.05rem;}
.section-light .section-sub{color:var(--steel);}

.btn{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.85rem 1.6rem;
  font-size:0.92rem;
  font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-primary{background:var(--ink); color:var(--cream);}
.btn-primary:hover{background:var(--ink-soft);}
.btn-light{background:var(--cream); color:var(--ink);}
.btn-light:hover{background:#fff;}
.btn-ghost{background:transparent; color:var(--cream); border-color:var(--border-dark);}
.btn-ghost:hover{border-color:var(--steel-soft);}

/* ===================== TOP BAR ===================== */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.2rem 3vw;
  background:linear-gradient(to bottom, rgba(20,21,26,0.85), rgba(20,21,26,0));
  color:var(--cream);
  transition:background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  border-bottom:1px solid transparent;
}
.topbar.is-scrolled{
  background:var(--ink);
  border-bottom-color:var(--border-dark);
  box-shadow:0 8px 24px rgba(0,0,0,0.25);
}
.brand{display:flex; align-items:center; gap:0.6rem;}
.brand-mark{color:var(--cream); display:flex;}
.brand-name{font-family:var(--font-head); font-size:0.95rem; font-weight:700; letter-spacing:-0.01em;}
.top-nav{display:flex; gap:1.8rem; font-size:0.9rem;}
.top-nav a{opacity:0.85;}
.top-nav a:hover{opacity:1;}
.topbar-actions{display:flex; align-items:center; gap:1.2rem;}
.phone-link{font-size:0.88rem; opacity:0.85;}
.phone-link:hover{opacity:1;}

@media (max-width:900px){
  .top-nav{display:none;}
  .phone-link{display:none;}
  .topbar .btn-primary{padding:0.7rem 1rem; font-size:0.82rem; white-space:nowrap;}
}

/* ===================== HERO ===================== */
.hero{
  min-height:100vh;
  background:var(--ink);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:9rem 6vw 3rem;
  position:relative;
  overflow:hidden;
}

.hero-media{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(20,21,26,0.55) 0%, rgba(20,21,26,0.72) 55%, rgba(20,21,26,0.92) 100%);
}
@media (prefers-reduced-motion: reduce){
  .hero-video{display:none;}
}

.hero-inner{max-width:760px; position:relative; z-index:1;}
.hero-title{font-size:clamp(2.4rem,6vw,4.6rem);}
.hero-sub{
  margin-top:1.4rem;
  max-width:520px;
  font-size:1.1rem;
  color:var(--steel-soft);
}
.hero-actions{display:flex; gap:1rem; margin-top:2.2rem; flex-wrap:wrap;}

/* ===================== TRUST BAND ===================== */
.trust-band{
  background:var(--ink);
  border-top:1px solid var(--border-dark);
  border-bottom:1px solid var(--border-dark);
  text-align:center;
  padding:2.4rem 6vw;
}
.trust-words{
  font-family:var(--font-head);
  font-size:clamp(1rem,2vw,1.3rem);
  letter-spacing:0.08em;
  color:var(--cream);
  margin-bottom:0.6rem;
}
.trust-words{text-transform:uppercase; font-size:clamp(0.85rem,1.6vw,1.1rem);}
.trust-words span{white-space:nowrap;}
.trust-words .dot{color:var(--brass); margin:0 0.6em;}
.trust-sub{color:var(--steel-soft); font-size:0.98rem; margin:0;}

/* ===================== TABS (Services) ===================== */
.tabs{
  display:flex;
  justify-content:center;
  gap:0.6rem;
  flex-wrap:wrap;
  margin-bottom:2.6rem;
}
.tab{
  background:transparent;
  border:1px solid var(--border-light);
  color:var(--charcoal);
  padding:0.7rem 1.1rem;
  font-size:0.84rem;
  cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease;
  white-space:nowrap;
}
.tab.is-active{background:var(--charcoal); color:var(--paper); border-color:var(--charcoal);}

.tab-panels{max-width:820px; margin:0 auto;}
.tab-panel{display:none;}
.tab-panel.is-active{display:block;}
.panel-lede{font-size:1.1rem; margin-bottom:1.8rem; color:var(--charcoal);}

.service-rows{display:flex; flex-direction:column;}
.service-row{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:2rem;
  padding:1.3rem 0;
  border-top:1px solid var(--border-light);
}
.service-rows .service-row:last-child{border-bottom:1px solid var(--border-light);}
.service-row h4{
  font-family:var(--font-head);
  font-size:1.02rem;
  font-weight:600;
  margin:0;
  color:var(--charcoal);
}
.service-row p{
  margin:0;
  color:var(--steel);
  font-size:0.96rem;
}
@media (max-width:640px){
  .service-row{grid-template-columns:1fr; gap:0.4rem;}
}

/* ===================== OUR APPROACH ===================== */
.approach-full{background:var(--ink); padding-bottom:4.5rem;}

.approach-media-wrap{
  position:relative;
  height:200vh;
}
.approach-media-full{
  position:sticky;
  top:0;
  width:100%;
  height:100vh;
  overflow:hidden;
  --reveal:0;
}
.approach-photo{
  position:absolute;
  top:-6%;
  left:0;
  width:100%;
  height:112%;
  object-fit:cover;
  z-index:2;
  clip-path:inset(calc((1 - var(--reveal)) * 100%) 0 0 0);
  transform:translateY(calc((1 - var(--reveal)) * 4%));
}
.approach-sketch{
  position:absolute;
  top:-6%;
  left:0;
  width:100%;
  height:112%;
  object-fit:cover;
  z-index:1;
  transform:translateY(calc(var(--reveal) * -3%));
}

@media (prefers-reduced-motion: reduce){
  .approach-media-wrap{height:auto;}
  .approach-media-full{position:relative; height:auto; aspect-ratio:16/9; --reveal:1 !important;}
  .approach-photo, .approach-sketch{top:0; height:100%; transform:none !important;}
  .approach-photo{clip-path:inset(0 0 0 0) !important;}
}

/* ===================== PROJECTS ===================== */
.project-grid{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.4rem;
}
.project-tile{margin:0;}
.project-media{
  aspect-ratio:4/3;
  background:
    repeating-linear-gradient(45deg, rgba(236,231,221,0.05) 0 2px, transparent 2px 14px),
    var(--ink-soft);
  border:1px solid var(--border-dark);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0.6rem;
  color:var(--steel-soft);
}
.camera-icon{width:34px; height:34px;}
.project-media span{font-size:0.8rem; letter-spacing:0.05em;}
figcaption{
  margin-top:0.8rem;
  font-size:0.9rem;
  color:var(--steel-soft);
}

/* -- real project tile (clickable, opens lightbox) -- */
.project-media-real{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  padding:0;
  border:1px solid var(--border-dark);
  background:var(--ink-soft);
  cursor:pointer;
  overflow:hidden;
  display:block;
  font-family:inherit;
}
.project-media-real img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.4s ease;
}
.project-media-real:hover img{transform:scale(1.04);}
.project-media-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(20,21,26,0.45);
  color:var(--cream);
  font-size:0.88rem;
  font-weight:600;
  letter-spacing:0.04em;
  opacity:0;
  transition:opacity 0.25s ease;
}
.project-media-real:hover .project-media-overlay,
.project-media-real:focus-visible .project-media-overlay{opacity:1;}
.project-tile-real figcaption{color:var(--cream);}

.project-note{
  text-align:center;
  max-width:520px;
  margin:2.6rem auto 0;
  color:var(--steel-soft);
  font-size:0.88rem;
}
@media (max-width:860px){
  .project-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .project-grid{grid-template-columns:1fr;}
}

/* ===================== PROJECT LIGHTBOX ===================== */
.project-lightbox{
  position:fixed;
  inset:0;
  z-index:70;
  display:none;
  align-items:center;
  justify-content:center;
  padding:4vh 4vw;
}
.project-lightbox.is-open{display:flex;}
.project-lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(10,10,13,0.88);
}
.project-lightbox-panel{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1040px;
  max-height:92vh;
  overflow-y:auto;
  background:var(--ink);
  border:1px solid var(--border-dark);
  box-shadow:0 30px 80px rgba(0,0,0,0.5);
}
.project-lightbox-close{
  position:absolute;
  top:1rem;
  right:1rem;
  z-index:3;
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(20,21,26,0.7);
  border:1px solid var(--border-dark);
  color:var(--cream);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.project-lightbox-media{
  position:relative;
  background:#000;
  aspect-ratio:16/10;
}
.project-lightbox-image{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:#000;
}
.lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(20,21,26,0.6);
  border:1px solid var(--border-dark);
  color:var(--cream);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.lightbox-prev{left:1rem;}
.lightbox-next{right:1rem;}
.lightbox-counter{
  position:absolute;
  bottom:0.9rem;
  right:1rem;
  font-size:0.8rem;
  color:var(--steel-soft);
  background:rgba(20,21,26,0.6);
  padding:0.3rem 0.7rem;
  border-radius:100px;
}

.project-lightbox-thumbs{
  display:flex;
  gap:0.5rem;
  padding:0.9rem 1.4rem;
  overflow-x:auto;
  border-bottom:1px solid var(--border-dark);
}
.lightbox-thumb-wrap{
  position:relative;
  flex:0 0 auto;
  width:64px;
  height:48px;
  cursor:pointer;
  border:2px solid transparent;
  opacity:0.5;
  transition:opacity 0.2s ease, border-color 0.2s ease;
  display:block;
}
.lightbox-thumb-wrap.is-active{opacity:1; border-color:var(--brass);}
.lightbox-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.lightbox-thumb-wrap.is-video-thumb::after{
  content:'';
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:0; height:0;
  border-style:solid;
  border-width:6px 0 6px 9px;
  border-color:transparent transparent transparent rgba(255,255,255,0.9);
}

.project-lightbox-info{padding:1.4rem;}
.project-lightbox-info h3{
  font-family:var(--font-head);
  font-size:1.2rem;
  color:var(--cream);
  margin:0 0 0.4rem;
}
.project-lightbox-meta{
  color:var(--brass);
  font-size:0.82rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  margin:0 0 0.8rem;
}
.project-lightbox-info p:last-child{
  color:var(--steel-soft);
  font-size:0.98rem;
  margin:0;
}

@media (max-width:640px){
  .project-lightbox{padding:0;}
  .project-lightbox-panel{max-width:100%; max-height:100vh; height:100%;}
  .project-lightbox-media{aspect-ratio:4/3;}
  .lightbox-nav{width:38px; height:38px;}
}

/* ===================== ABOUT ===================== */
.about-layout{
  max-width:1060px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(260px,400px) 1fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.about-portrait{margin:0;}
.about-portrait img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:50% 20%;
  border-radius:4px;
}
.about-portrait figcaption{
  display:flex;
  flex-direction:column;
  gap:0.2rem;
  margin-top:1rem;
  padding-left:0.9rem;
  border-left:2px solid var(--brass);
}
.about-name{
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.05rem;
  color:var(--charcoal);
}
.about-role{
  font-size:0.8rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--steel);
}
.about-body{
  font-size:1.05rem;
  color:var(--charcoal);
}
.about-body p:first-child{margin-top:0;}
.about-body p:last-child{margin-bottom:0;}
.about-trust{
  font-size:0.9rem;
  color:var(--steel);
  padding-top:1rem;
  border-top:1px solid rgba(20,21,26,0.12);
}
@media (max-width:860px){
  .about-layout{grid-template-columns:1fr; gap:2rem;}
  .about-portrait{max-width:360px; margin:0 auto;}
}

/* ===================== QUOTE FORM ===================== */
.quote-form{
  max-width:640px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:1.3rem;
}
.form-row label{
  display:block;
  font-size:0.82rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--steel-soft);
  margin-bottom:0.5rem;
}
.form-row input,
.form-row select,
.form-row textarea{
  width:100%;
  background:var(--ink-soft);
  border:1px solid var(--border-dark);
  color:var(--cream);
  padding:0.85rem 1rem;
  font-family:var(--font-body);
  font-size:0.98rem;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
  outline:none;
  border-color:var(--brass);
}
.form-row-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.3rem;
}
@media (max-width:560px){
  .form-row-split{grid-template-columns:1fr;}
}
.form-fine{font-size:0.82rem; color:var(--steel); margin:0;}
.form-fine a{text-decoration:underline;}
.form-photo-note{
  margin:-0.3rem 0 0;
  font-size:0.92rem;
  color:var(--steel-soft);
}
.form-photo-note a{white-space:nowrap; color:var(--cream); text-decoration:underline; text-underline-offset:3px;}
.form-photo-note a:hover{color:var(--brass);}
.form-status{font-size:0.9rem; color:var(--brass); min-height:1.2em;}

/* ===================== FOOTER ===================== */
.footer{
  background:var(--ink);
  border-top:1px solid var(--border-dark);
  padding:4.5rem 6vw 8rem;
  color:var(--steel-soft);
}
.footer-top{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:2.5rem;
}
.footer-brand .brand-mark{color:var(--cream); margin-bottom:0.8rem;}
.footer-brand p{margin:0.2rem 0; color:var(--cream); font-family:var(--font-head); font-size:1rem;}
.footer-slogan{color:var(--steel-soft) !important; font-family:var(--font-body) !important; font-size:0.9rem !important;}
.footer-heading{color:var(--cream); font-size:0.82rem; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:0.9rem;}
.footer-col a, .footer-col p{display:block; margin-bottom:0.6rem; font-size:0.92rem;}
.footer-col a:hover{color:var(--cream);}

.footer-bottom{
  max-width:var(--max);
  margin:3rem auto 0;
  padding-top:2rem;
  border-top:1px solid var(--border-dark);
  display:flex;
  justify-content:space-between;
  font-size:0.85rem;
  flex-wrap:wrap;
  gap:1rem;
}
.footer-legal{display:flex; gap:1.5rem;}

@media (max-width:860px){
  .footer-top{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .footer-top{grid-template-columns:1fr;}
}

/* ===================== BOTTOM STICKY NAV ===================== */
.bottom-nav{
  position:fixed;
  bottom:1.4rem;
  left:50%;
  transform:translateX(-50%);
  z-index:50;
  display:flex;
  align-items:center;
  gap:1rem;
  background:var(--ink);
  color:var(--cream);
  border:1px solid var(--border-dark);
  border-radius:100px;
  padding:0.55rem 0.6rem 0.55rem 1.1rem;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
}
.bottom-nav-mark{color:var(--cream); display:flex;}
.bottom-nav-label{
  font-size:0.85rem;
  letter-spacing:0.03em;
  min-width:64px;
}
.bottom-nav-toggle{
  background:var(--cream);
  color:var(--ink);
  border:none;
  border-radius:50%;
  width:38px; height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

/* ===================== NAV OVERLAY ===================== */
.nav-overlay{
  position:fixed;
  inset:0;
  background:var(--ink);
  color:var(--cream);
  z-index:60;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:8vh 8vw;
  transform:translateY(100%);
  transition:transform 0.35s ease;
}
.nav-overlay.is-open{transform:translateY(0);}
.nav-overlay nav{display:flex; flex-direction:column; gap:1rem;}
.nav-overlay-link{
  font-family:var(--font-head);
  font-size:clamp(1.6rem,5vw,2.6rem);
  font-weight:700;
  opacity:0.85;
}
.nav-overlay-link:hover{opacity:1; color:var(--brass);}
.nav-overlay-close{
  position:absolute;
  top:2rem; right:2rem;
  background:transparent;
  border:1px solid var(--border-dark);
  color:var(--cream);
  border-radius:50%;
  width:44px; height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.nav-overlay-foot{
  margin-top:3rem;
  display:flex;
  gap:2rem;
  font-size:0.95rem;
  color:var(--steel-soft);
}

@media (max-width:640px){
  .bottom-nav-label{display:none;}
}

/* Quote form photo upload */
.file-input{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; pointer-events:none;}
.form-row .file-drop{
  display:flex; flex-direction:column; gap:0.2rem; align-items:center; text-align:center;
  padding:1.2rem 1rem; margin:0;
  border:1px dashed var(--steel); background:var(--ink-soft);
  color:var(--cream); text-transform:none; letter-spacing:0; cursor:pointer;
  transition:border-color .2s;
}
.form-row .file-drop:hover,.file-input:focus-visible + .file-list,.form-row .file-drop.is-drag{border-color:var(--brass);}
.file-drop-main{font-size:0.98rem;}
.file-drop-sub{font-size:0.82rem; color:var(--steel-soft);}
.file-list{list-style:none; margin:0.6rem 0 0; padding:0; display:flex; flex-direction:column; gap:0.4rem;}
.file-list li{display:flex; justify-content:space-between; align-items:center; gap:1rem; font-size:0.9rem; color:var(--cream); padding:0.45rem 0.8rem; background:var(--ink-soft); border:1px solid var(--border-dark);}
.file-list li span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.file-list button{background:none; border:0; color:var(--steel-soft); cursor:pointer; font-size:1.1rem; line-height:1; padding:0 0.2rem;}
.file-list button:hover{color:var(--brass);}
.file-error{color:#e0a07a; font-size:0.85rem; margin:0.5rem 0 0;}
.trust-words{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; row-gap:0.4rem;}
.form-row{position:relative;}
@media (max-width:700px){.trust-words .dot{display:none;} .trust-words span{margin:0 0.6em;}}