/* ============================================================
   UD BIM Consultancy — Apple-style light theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  /* ---- surfaces ---- */
  --bg:        #ffffff;
  --bg-alt:    #f5f5f7;   /* Apple's signature light gray panel */
  --bg-alt-2:  #fbfbfd;
  --line:      #d2d2d7;   /* hairline divider */
  --line-soft: #e8e8ed;

  /* ---- text ---- */
  --text-1:    #1d1d1f;   /* near-black */
  --text-2:    #424245;
  --text-3:    #6e6e73;
  --text-4:    #86868b;

  /* ---- brand ---- */
  --yellow:    #F9FE28;
  --yellow-text:#6b6f00;  /* accessible text-on-yellow */
  --black:     #000000;

  /* ---- type ---- */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --container: 1180px;
  --pad: clamp(24px, 5vw, 64px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text-1);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--pad);
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  margin:0;
  font-weight:600;
  letter-spacing:-0.025em;
  line-height:1.07;
  color:var(--text-1);
}
/* Inter weight hierarchy: Extra Bold → Bold → SemiBold → Medium → Regular */
.h0{ font-size:clamp(40px,6.2vw,84px); font-weight:800; letter-spacing:-0.03em; line-height:1.04; }
.h1{ font-size:clamp(34px,5vw,58px); font-weight:700; }
.h2{ font-size:clamp(28px,3.4vw,42px); font-weight:600; }
.h3{ font-size:21px; font-weight:500; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:14px;
}
.eyebrow::before{
  content:""; width:18px; height:2px; background:var(--yellow); border-radius:2px;
}
.eyebrow.on-dark{ color:rgba(255,255,255,0.65); }
.eyebrow.on-dark::before{ background:var(--yellow); }

p{ color:var(--text-3); line-height:1.72; font-size:18px; margin:0 0 1em; }
.lead{ font-size:clamp(20px,2.2vw,24px); color:var(--text-2); line-height:1.52; font-weight:400; }
.fine{ font-size:13px; color:var(--text-4); }

strong{ color:var(--text-1); font-weight:600; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font);
  font-size:16px; font-weight:500;
  padding:13px 26px;
  border-radius:980px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn:active{ transform:scale(0.97); }
.btn-primary{ background:var(--text-1); color:#fff; }
.btn-primary:hover{ background:#000; }
.btn-accent{ background:var(--yellow); color:#1d1d1f; }
.btn-accent:hover{ background:#eef200; }
.btn-outline{ background:transparent; color:var(--text-1); border-color:var(--line); }
.btn-outline:hover{ border-color:var(--text-1); }
.btn-ghost-dark{ background:rgba(255,255,255,0.1); color:#fff; border-color:rgba(255,255,255,0.3); backdrop-filter:blur(6px); }
.btn-ghost-dark:hover{ background:rgba(255,255,255,0.18); }
.btn-sm{ padding:10px 20px; font-size:14px; }
.btn-link{ display:inline-flex; align-items:center; gap:6px; font-size:16px; font-weight:500; color:var(--text-1); }
.btn-link::after{ content:"→"; transition:transform .2s ease; }
.btn-link:hover::after{ transform:translateX(3px); }

.btn-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

/* ---------- Navbar ---------- */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:52px;
  display:flex; align-items:center;
  background:rgba(255,255,255,0.8);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease;
}
.navbar.scrolled{ border-bottom-color:var(--line-soft); }
.navbar .container{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo img{ height:32px; width:auto; }
.nav-links{
  list-style:none; display:flex; gap:34px; margin:0; padding:0;
  position:absolute; left:50%; transform:translateX(-50%);
}
.nav-links a{
  font-size:13px; font-weight:500; color:var(--text-1);
  padding:6px 2px; border-bottom:2px solid transparent;
}
.nav-links a:hover{ color:var(--text-3); }
.nav-links a.active{ border-bottom-color:var(--yellow); }
.nav-cta{
  font-size:13px; font-weight:600; color:var(--text-1);
  background:var(--yellow); padding:7px 16px; border-radius:980px;
}
.nav-cta:hover{ background:#eef200; }
.nav-hamburger{ display:none; }

.nav-mobile{
  display:none; position:fixed; top:52px; left:0; right:0; z-index:999;
  background:#fff; border-bottom:1px solid var(--line-soft);
  flex-direction:column; padding:8px 0;
}
.nav-mobile a{
  padding:14px var(--pad); font-size:17px; font-weight:500; color:var(--text-1);
  border-bottom:1px solid var(--line-soft);
}
.nav-mobile a.active{ color:var(--yellow-text); }

@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-hamburger{
    display:flex; flex-direction:column; gap:4px; justify-content:center;
    width:32px; height:32px; background:none; border:none; cursor:pointer;
  }
  .nav-hamburger span{ width:100%; height:2px; background:var(--text-1); border-radius:2px; transition:.2s; }
  .nav-mobile.open{ display:flex; }
}

/* ---------- Sections / spacing ---------- */
section{ position:relative; }
.sec{ padding:80px 0; }
.sec-lg{ padding:120px 0; }
.sec-sm{ padding:56px 0; }
.bg-alt{ background:var(--bg-alt); }
.bg-dark{ background:#000; color:#fff; }
.bg-dark p{ color:rgba(255,255,255,0.62); }
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4{ color:#fff; }

.divider{ height:1px; background:var(--line-soft); border:none; margin:0; }

.center{ text-align:center; }
.max-w{ max-width:680px; }
.mx-auto{ margin-left:auto; margin-right:auto; }

/* ---------- Hero (page top, white/light, Apple product-page style) ---------- */
.hero{
  padding:168px 0 0;
  text-align:center;
  background:linear-gradient(180deg,#fff 0%, var(--bg-alt) 100%);
}
.hero .eyebrow{ justify-content:center; }
.hero .eyebrow::before{ display:none; }
.hero h1{ margin-bottom:18px; }
.hero .lead{ max-width:620px; margin:0 auto 36px; }
.hero .btn-row{ justify-content:center; margin-bottom:56px; }

.hero-shot{
  margin:0 auto; max-width:var(--container);
  padding:0 var(--pad) 0;
}
.hero-shot img{
  width:100%; height:clamp(280px,52vw,560px); object-fit:cover;
  border-radius:28px 28px 0 0;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.25);
}

/* simple page hero (sub-pages) */
.page-hero{
  padding:160px 0 64px;
  background:var(--bg-alt);
  text-align:center;
}
.page-hero .lead{ max-width:600px; margin:0 auto; }

/* ---------- Stat strip ---------- */
.stat-strip{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.stat{ text-align:center; padding:40px 16px; border-right:1px solid var(--line-soft); }
.stat:last-child{ border-right:none; }
.stat .num{ font-size:clamp(28px,4vw,40px); font-weight:700; letter-spacing:-0.02em; color:var(--text-1); }
.stat .lbl{ font-size:13px; color:var(--text-3); margin-top:4px; text-transform:uppercase; letter-spacing:.06em; }

/* ---------- Card grid (services / values) ---------- */
.grid{ display:grid; gap:16px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-3,.grid-2,.grid-4{ grid-template-columns:1fr; } }

.photo-banner{ border-radius:20px; overflow:hidden; margin-bottom:32px; }
.photo-banner img{ width:100%; height:260px; object-fit:cover; }
.thumb-card .thumb{ width:100%; height:110px; object-fit:cover; border-radius:14px 14px 0 0; }

.card{
  background:#fff; border:1px solid var(--line-soft); border-radius:18px;
  padding:32px; transition:box-shadow .25s ease, transform .25s ease;
}
.card:hover{ box-shadow:0 12px 28px rgba(0,0,0,0.08); transform:translateY(-2px); }
.card .num{ font-size:13px; font-weight:700; color:var(--text-4); letter-spacing:.05em; margin-bottom:14px; }
.card h3{ margin-bottom:10px; }
.card p{ margin-bottom:0; font-size:16px; }

.card-photo{
  border-radius:18px; overflow:hidden; background:#fff; border:1px solid var(--line-soft);
}
.card-photo img{ width:100%; height:170px; object-fit:cover; }
.card-photo .body{ padding:26px; }
.tag-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.tag{
  font-size:12px; font-weight:600; color:var(--text-3); background:var(--bg-alt);
  padding:5px 11px; border-radius:980px;
}

/* ---------- Two column layout ---------- */
.split{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:center; }
.split.rev{ grid-template-columns:0.95fr 1.05fr; }
.split.rev .split-media{ order:2; }
@media (max-width:900px){
  .split,.split.rev{ grid-template-columns:1fr; gap:36px; }
  .split.rev .split-media{ order:0; }
}
.split-media img{ width:100%; border-radius:20px; object-fit:cover; }

/* ---------- Steps (process / how it works) ---------- */
.steps{ display:flex; flex-direction:column; }
.step{
  display:grid; grid-template-columns:64px 1fr; gap:24px;
  padding:30px 0; border-top:1px solid var(--line-soft);
}
.step:first-child{ border-top:none; }
.step .step-num{ font-size:15px; font-weight:700; color:var(--text-4); }
.step h3{ margin-bottom:6px; }
.step p{ margin-bottom:0; }

/* ---------- Quote / pull ---------- */
.pull{
  font-size:clamp(22px,2.6vw,32px); font-weight:600; letter-spacing:-0.015em; line-height:1.35;
  color:var(--text-1); max-width:760px;
}
.pull .accent{ color:var(--yellow-text); background:linear-gradient(180deg,transparent 62%,var(--yellow) 62%); padding:0 2px; }

/* ---------- Project rows (portfolio) ---------- */
.proj{
  display:grid; grid-template-columns:280px 1fr; gap:32px; align-items:flex-start;
  padding:34px 0; border-top:1px solid var(--line-soft);
}
.proj:first-child{ border-top:none; }
.proj img{ width:100%; height:170px; object-fit:cover; border-radius:16px; }
.proj .meta{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-4); margin-bottom:6px; }
.proj h3{ margin-bottom:8px; }
.proj p{ margin-bottom:0; }
@media (max-width:760px){ .proj{ grid-template-columns:1fr; } .proj img{ height:200px; } }

/* ---------- Contact cards ---------- */
.cc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:640px){ .cc-grid{ grid-template-columns:1fr; } }
.cc{
  background:var(--bg-alt); border-radius:16px; padding:24px 26px;
}
.cc .k{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-4); margin-bottom:6px; }
.cc .v{ font-size:18px; font-weight:600; color:var(--text-1); }

.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--text-2); margin-bottom:6px; }
.field input, .field textarea, .field select{
  width:100%; padding:13px 16px; border-radius:12px; border:1px solid var(--line);
  font-family:var(--font); font-size:16px; color:var(--text-1); background:#fff;
  outline:none; transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color:var(--text-1); box-shadow:0 0 0 4px rgba(0,0,0,0.05);
}

/* ---------- Footer ---------- */
.footer{ background:#000; color:rgba(255,255,255,0.5); padding:56px 0 28px; }
.footer .top{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:32px;
  padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,0.12);
}
.footer .top img{ height:20px; margin-bottom:14px; }
.footer .col h4{ color:#fff; font-size:13px; font-weight:600; margin-bottom:14px; letter-spacing:.04em; }
.footer .col a, .footer .col p{ display:block; font-size:14px; color:rgba(255,255,255,0.5); margin-bottom:8px; }
.footer .col a:hover{ color:#fff; }
.footer .bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  padding-top:20px; font-size:12px;
}
.footer .bottom a{ color:rgba(255,255,255,0.5); }
.footer .bottom a:hover{ color:#fff; }

/* ---------- Reveal-on-scroll ----------
   Default state is fully visible so content never depends on JS.
   JS adds .pre (hidden) right before observing, then swaps to .in. */
.reveal{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease; }
.reveal.pre{ opacity:0; transform:translateY(16px); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Utility ---------- */
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.flex{ display:flex; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; }
.gap-8{gap:8px;} .gap-16{gap:16px;}

/* ============================================================
   PROJECT PAGES — New styles
   ============================================================ */

/* --- Breadcrumb --- */
.breadcrumb{
  padding:16px 0 0;
  font-size:13px; font-weight:500; color:var(--text-4);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.breadcrumb a{ color:var(--text-4); transition:color .15s; }
.breadcrumb a:hover{ color:var(--text-1); }
.breadcrumb-sep{ color:var(--line); }
.breadcrumb-current{ color:var(--text-2); font-weight:600; }

/* --- Project hero (full-width photo + overlay) --- */
.proj-hero{
  position:relative; overflow:hidden;
  height:clamp(320px,48vw,560px);
  margin-top:52px; /* below navbar */
}
.proj-hero img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.proj-hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,0.72) 0%,rgba(0,0,0,0.25) 55%,transparent 100%);
}
.proj-hero-content{
  position:absolute; bottom:0; left:0; right:0;
  padding:clamp(24px,4vw,48px) var(--pad);
  color:#fff;
}
.proj-hero-tag{
  display:inline-block;
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:var(--yellow); color:#1d1d1f;
  padding:5px 14px; border-radius:980px;
  margin-bottom:14px;
}
.proj-hero-content h1{
  color:#fff; font-weight:800;
  font-size:clamp(32px,5.5vw,68px);
  letter-spacing:-0.03em; line-height:1.04;
  margin-bottom:10px; text-shadow:0 2px 12px rgba(0,0,0,0.3);
}
.proj-hero-content .proj-location{
  font-size:16px; color:rgba(255,255,255,0.72); font-weight:400;
}

/* --- Project metric strip --- */
.proj-stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--line-soft);
}
.proj-stat{
  padding:32px 20px; text-align:center;
  border-right:1px solid var(--line-soft);
}
.proj-stat:last-child{ border-right:none; }
.proj-stat .ps-val{
  font-size:clamp(20px,3vw,30px); font-weight:800;
  letter-spacing:-0.02em; color:var(--text-1); line-height:1.1;
  margin-bottom:4px;
}
.proj-stat .ps-lbl{
  font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-4);
}
@media(max-width:640px){
  .proj-stats{ grid-template-columns:repeat(2,1fr); }
  .proj-stat:nth-child(2){ border-right:none; }
}

/* --- Challenge / Solution boxes --- */
.cs-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  margin-top:32px;
}
@media(max-width:760px){ .cs-grid{ grid-template-columns:1fr; } }
.cs-box{ background:var(--bg-alt); border-radius:18px; padding:28px 30px; }
.cs-box .cs-label{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-4); margin-bottom:10px;
}
.cs-box.cs-solution{ background:var(--text-1); }
.cs-box.cs-solution .cs-label{ color:rgba(255,255,255,0.5); }
.cs-box.cs-solution h4,.cs-box.cs-solution p{ color:#fff; }
.cs-box.cs-solution p{ color:rgba(255,255,255,0.72); }
.cs-box h4{ font-size:17px; font-weight:600; margin-bottom:10px; line-height:1.3; }
.cs-box p{ font-size:15px; line-height:1.65; margin-bottom:0; color:var(--text-3); }

/* --- Scope list --- */
.scope-list{ list-style:none; padding:0; margin:0; }
.scope-list li{
  display:flex; align-items:flex-start; gap:14px;
  padding:14px 0; border-bottom:1px solid var(--line-soft);
  font-size:16px; color:var(--text-2); line-height:1.5;
}
.scope-list li:last-child{ border-bottom:none; }
.scope-list li::before{
  content:""; flex-shrink:0;
  width:6px; height:6px; border-radius:50%;
  background:var(--yellow); margin-top:8px;
  box-shadow:0 0 0 3px rgba(249,254,40,0.25);
}

/* --- Tech box --- */
.tech-box{
  background:var(--bg-alt); border-radius:18px; padding:28px 32px;
}
.tech-box .tech-row{
  display:grid; grid-template-columns:130px 1fr; gap:8px 20px;
  padding:10px 0; border-bottom:1px solid var(--line-soft); align-items:baseline;
}
.tech-box .tech-row:last-child{ border-bottom:none; }
.tech-box .tech-key{
  font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-4);
}
.tech-box .tech-val{
  font-size:15px; font-weight:500; color:var(--text-1);
}

/* --- Photo gallery --- */
.proj-gallery{
  display:grid; gap:12px;
  grid-template-columns:1fr 1fr;
}
.proj-gallery.cols-3{ grid-template-columns:1fr 1fr 1fr; }
.proj-gallery img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:16px; display:block;
}
.proj-gallery .gallery-main{
  grid-column:span 2;
  aspect-ratio:16/7;
}
.proj-gallery.cols-3 .gallery-main{ grid-column:span 3; }
@media(max-width:640px){
  .proj-gallery,.proj-gallery.cols-3{ grid-template-columns:1fr; }
  .proj-gallery .gallery-main,.proj-gallery.cols-3 .gallery-main{ grid-column:span 1; }
}

/* --- Value box ("What this means for you") --- */
.value-box{
  background:var(--yellow); border-radius:20px; padding:36px 40px;
  margin-top:12px;
}
.value-box .vb-label{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--yellow-text); margin-bottom:12px;
}
.value-box p{
  font-size:clamp(18px,2vw,22px); font-weight:600; letter-spacing:-0.01em;
  color:#1d1d1f; line-height:1.45; margin:0;
}
@media(max-width:640px){ .value-box{ padding:28px 24px; } }

/* --- Related projects grid --- */
.related-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
@media(max-width:640px){ .related-grid{ grid-template-columns:1fr; } }
.related-card{
  border-radius:18px; overflow:hidden; background:#fff;
  border:1px solid var(--line-soft); text-decoration:none;
  transition:box-shadow .25s ease, transform .25s ease;
  display:block;
}
.related-card:hover{ box-shadow:0 14px 32px rgba(0,0,0,0.09); transform:translateY(-2px); }
.related-card img{ width:100%; height:160px; object-fit:cover; display:block; }
.related-card .rc-body{ padding:22px 24px; }
.related-card .rc-tag{
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--text-4); margin-bottom:6px;
}
.related-card h4{ font-size:18px; font-weight:700; margin-bottom:6px; color:var(--text-1); }
.related-card p{ font-size:14px; color:var(--text-3); margin:0; line-height:1.55; }

/* --- Filter tabs (projects overview) --- */
.filter-wrap{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:40px; }
.filter-btn{
  font-size:13px; font-weight:600; padding:8px 18px;
  border-radius:980px; border:1.5px solid var(--line);
  background:#fff; color:var(--text-2); cursor:pointer;
  transition:all .18s ease;
}
.filter-btn:hover{ border-color:var(--text-1); color:var(--text-1); }
.filter-btn.active{
  background:var(--text-1); color:#fff; border-color:var(--text-1);
}

/* --- Project cards (overview grid) --- */
.proj-card{
  border-radius:20px; overflow:hidden; background:#fff;
  border:1px solid var(--line-soft);
  transition:box-shadow .25s ease, transform .25s ease;
  display:flex; flex-direction:column;
}
.proj-card:hover{ box-shadow:0 16px 40px rgba(0,0,0,0.1); transform:translateY(-3px); }
.proj-card a{ display:block; color:inherit; text-decoration:none; flex:1; }
.proj-card img{ width:100%; height:220px; object-fit:cover; display:block; }
.proj-card .pc-body{ padding:26px 28px; }
.proj-card .pc-tag{
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--text-4); margin-bottom:8px;
}
.proj-card h3{ font-size:20px; font-weight:700; margin-bottom:8px; color:var(--text-1); }
.proj-card p{ font-size:14px; color:var(--text-3); margin:0 0 16px; line-height:1.6; }
.proj-card .pc-arrow{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:var(--text-1);
}
.proj-card .pc-arrow::after{ content:"→"; transition:transform .2s; }
.proj-card:hover .pc-arrow::after{ transform:translateX(3px); }

/* proj-card hidden by filter */
.proj-card.hidden{ display:none; }

/* ============================================================
   END PROJECT PAGES
   ============================================================ */

/* ============================================================
   HOME PAGE — Redesigned layout
   ============================================================ */

/* -- Split hero -- */
.hh-wrap{
  display:grid;
  grid-template-columns:55fr 45fr;
  min-height:100svh;
  padding-top:52px;
}
.hh-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(52px,8vw,96px) clamp(32px,4vw,72px);
}
.hh-company{
  font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text-4); margin-bottom:44px;
  display:flex; align-items:center; gap:12px;
}
.hh-company::before{
  content:""; width:24px; height:2px; background:var(--yellow); border-radius:2px; flex-shrink:0;
}
.hh-headline{
  font-size:clamp(36px,4.8vw,64px); font-weight:800;
  letter-spacing:-0.03em; line-height:1.05;
  color:var(--text-1); margin:0 0 28px;
}
.hh-sub{
  font-size:clamp(16px,1.5vw,19px); color:var(--text-3);
  line-height:1.7; margin:0 0 44px; max-width:400px;
}
.hh-img{ position:relative; overflow:hidden; }
.hh-img img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }

@media(max-width:900px){
  .hh-wrap{ grid-template-columns:1fr; min-height:auto; }
  .hh-img{ height:60vw; min-height:280px; max-height:480px; }
  .hh-text{ padding:52px var(--pad); }
}
@media(max-width:560px){
  .hh-headline{ font-size:clamp(32px,9vw,48px); }
  .hh-img{ height:72vw; }
}

/* -- Stats row -- */
.home-stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.hs-item{
  padding:28px 0; text-align:center;
  border-right:1px solid var(--line-soft);
}
.hs-item:last-child{ border-right:none; }
.hs-num{ font-size:clamp(28px,3.4vw,42px); font-weight:800; letter-spacing:-0.02em; color:var(--text-1); line-height:1; }
.hs-lbl{ font-size:11px; font-weight:600; color:var(--text-4); letter-spacing:0.08em; text-transform:uppercase; margin-top:8px; }
@media(max-width:640px){
  .home-stats{ grid-template-columns:repeat(2,1fr); }
  .hs-item:nth-child(2){ border-right:none; }
  .hs-item:nth-child(3){ border-top:1px solid var(--line-soft); }
  .hs-item:nth-child(4){ border-top:1px solid var(--line-soft); border-right:none; }
}

/* -- Section header pattern (label + title) -- */
.sh-row{
  display:grid; grid-template-columns:180px 1fr;
  gap:48px; align-items:baseline;
  padding-bottom:0; margin-bottom:0;
}
.sh-label{
  font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-4);
  padding-top:6px;
}
.sh-title{ font-size:clamp(26px,3.2vw,42px); font-weight:700; letter-spacing:-0.025em; color:var(--text-1); margin:0; }
.sh-desc{ font-size:17px; color:var(--text-3); line-height:1.65; margin:12px 0 0; }
@media(max-width:760px){ .sh-row{ grid-template-columns:1fr; gap:8px; } }

/* -- Featured project (full-width horizontal card) -- */
.feat-proj-link{
  display:grid; grid-template-columns:1fr 1fr;
  text-decoration:none; color:inherit;
  border-top:1px solid var(--line-soft);
  overflow:hidden; transition:background 0.2s;
}
.feat-proj-link:hover{ background:var(--bg-alt); }
.fp-img{ overflow:hidden; }
.fp-img img{
  width:100%; height:100%; min-height:400px;
  object-fit:cover; display:block;
  transition:transform 0.6s ease;
}
.feat-proj-link:hover .fp-img img{ transform:scale(1.04); }
.fp-body{
  padding:clamp(40px,5vw,72px);
  display:flex; flex-direction:column; justify-content:center;
}
.fp-meta{
  font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-4); margin-bottom:20px;
}
.fp-title{
  font-size:clamp(26px,3vw,44px); font-weight:800;
  letter-spacing:-0.03em; line-height:1.04; color:var(--text-1); margin:0 0 16px;
}
.fp-desc{ font-size:17px; color:var(--text-3); line-height:1.65; margin:0 0 0; }
.fp-kv{
  display:flex; gap:32px; flex-wrap:wrap;
  padding-top:28px; border-top:1px solid var(--line-soft); margin-top:32px;
}
.kv-val{ font-size:22px; font-weight:700; color:var(--text-1); letter-spacing:-0.02em; line-height:1; }
.kv-lbl{ font-size:11px; color:var(--text-4); font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-top:6px; }
.fp-cta{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; color:var(--text-1); margin-top:28px;
  transition:gap 0.2s;
}
.feat-proj-link:hover .fp-cta{ gap:14px; }
@media(max-width:860px){
  .feat-proj-link{ grid-template-columns:1fr; }
  .fp-img img{ min-height:52vw; height:52vw; }
}

/* -- 2-col project grid -- */
.proj-2up{
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line-soft);
}
.p2c{
  display:block; text-decoration:none; color:inherit;
  border-right:1px solid var(--line-soft); overflow:hidden;
  transition:background 0.2s;
}
.p2c:last-child{ border-right:none; }
.p2c:hover{ background:var(--bg-alt); }
.p2c-img{ overflow:hidden; aspect-ratio:3/2; }
.p2c-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s ease; }
.p2c:hover .p2c-img img{ transform:scale(1.04); }
.p2c-body{ padding:26px 32px 36px; }
.p2c-meta{
  font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-4); margin-bottom:10px;
}
.p2c-title{ font-size:21px; font-weight:700; letter-spacing:-0.02em; color:var(--text-1); margin:0 0 10px; }
.p2c-desc{ font-size:15px; color:var(--text-3); line-height:1.6; margin:0; }
@media(max-width:680px){
  .proj-2up{ grid-template-columns:1fr; }
  .p2c{ border-right:none; border-bottom:1px solid var(--line-soft); }
  .p2c:last-child{ border-bottom:none; }
}

/* -- All projects link row -- */
.all-proj-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 0; border-top:1px solid var(--line-soft);
  text-decoration:none; color:var(--text-1);
  transition:background 0.15s, padding 0.15s;
}
.all-proj-row:hover{ background:var(--bg-alt); padding-left:20px; padding-right:20px; margin:0 -20px; }
.apr-count{ font-size:13px; color:var(--text-4); font-weight:500; }
.apr-link{ font-size:15px; font-weight:600; color:var(--text-1); display:flex; align-items:center; gap:8px; }
.apr-link .arr{ transition:transform 0.2s; }
.all-proj-row:hover .arr{ transform:translateX(5px); }

/* -- Services list -- */
.svc-section{
  padding:clamp(72px,10vw,112px) 0;
  background:var(--bg-alt);
}
.svc-head-block{
  padding-bottom:32px;
  border-bottom:1px solid var(--line);
  margin-bottom:0;
}
.svc-items-list{ }
.svc-list-item{
  display:grid;
  grid-template-columns:60px 1fr 28px;
  gap:24px; align-items:start;
  padding:20px 0;
  border-bottom:1px solid var(--line-soft);
  text-decoration:none; color:inherit;
  transition:background 0.15s, padding 0.15s;
}
.svc-list-item:hover{
  background:var(--bg);
  padding-left:16px; padding-right:16px; margin:0 -16px;
}
.sli-n{ font-size:12px; font-weight:700; color:var(--text-4); letter-spacing:0.06em; padding-top:3px; }
.sli-name{ font-size:18px; font-weight:600; color:var(--text-1); letter-spacing:-0.01em; margin-bottom:3px; }
.sli-desc{ font-size:14px; color:var(--text-3); line-height:1.5; margin:0; }
.sli-arr{ font-size:16px; color:var(--text-4); margin-top:3px; transition:transform 0.2s, color 0.2s; }
.svc-list-item:hover .sli-arr{ transform:translateX(4px); color:var(--text-1); }
@media(max-width:640px){
  .svc-list-item{ grid-template-columns:36px 1fr 20px; gap:14px; }
  .sli-name{ font-size:17px; }
}

/* -- Named engagements -- */
.engagements-section{ padding:clamp(72px,10vw,112px) 0; }
.eng-head-block{ padding-bottom:32px; border-bottom:1px solid var(--line-soft); margin-bottom:0; }
.eng-row{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:48px; align-items:start;
  padding:28px 0;
  border-bottom:1px solid var(--line-soft);
}
.eng-client-col{ display:flex; flex-direction:column; gap:10px; }
.eng-logo{
  height:28px; width:auto; max-width:140px;
  object-fit:contain; object-position:left center;
  display:block;
  filter:grayscale(1); opacity:0.65;
  transition:opacity 0.25s, filter 0.25s;
}
.eng-row:hover .eng-logo{ filter:grayscale(0); opacity:1; }
.eng-client{ font-size:14px; font-weight:700; color:var(--text-3); letter-spacing:0.04em; text-transform:uppercase; }
.eng-text{ font-size:16px; color:var(--text-3); line-height:1.65; margin:0; }
@media(max-width:760px){ .eng-row{ grid-template-columns:1fr; gap:10px; } }

/* -- Founder section -- */
.founder-section{
  padding:clamp(72px,10vw,112px) 0;
  background:var(--bg-alt);
  border-top:1px solid var(--line-soft);
}
.founder-inner{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:clamp(36px,6vw,80px); align-items:start;
}
.founder-photo{
  border-radius:12px; overflow:hidden; aspect-ratio:2/3;
}
.founder-photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.fnd-label{ font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-4); margin-bottom:14px; }
.fnd-name{ font-size:clamp(24px,2.8vw,36px); font-weight:700; letter-spacing:-0.025em; color:var(--text-1); margin:0 0 4px; }
.fnd-role{ font-size:16px; color:var(--text-3); margin:0 0 24px; }
.fnd-bio{ font-size:17px; color:var(--text-2); line-height:1.7; margin:0 0 28px; }
.fnd-creds{
  border-top:1px solid var(--line-soft); padding-top:24px;
  display:flex; flex-direction:column; gap:10px;
}
.fnd-cred{
  display:flex; gap:12px; align-items:flex-start;
  font-size:15px; color:var(--text-3); line-height:1.45;
}
.fnd-cred-dot{
  width:6px; height:6px; border-radius:50%; background:var(--yellow);
  flex-shrink:0; margin-top:6px;
}
@media(max-width:760px){
  .founder-inner{ grid-template-columns:1fr; }
  .founder-photo{ width:160px; height:200px; aspect-ratio:auto; }
}

/* ============================================================
   END HOME PAGE REDESIGN
   ============================================================ */

/* ---------- Gallery / Work page ---------- */

.gallery-hero{ padding: clamp(80px,12vw,140px) 0 clamp(48px,6vw,80px); border-bottom:1px solid var(--line-soft); }
.gallery-hero .eyebrow{ margin-bottom:20px; }
.gallery-hero h1{ font-size:clamp(36px,5vw,64px); font-weight:800; letter-spacing:-0.03em; line-height:1.05; margin:0 0 20px; max-width:700px; }
.gallery-hero p.lead{ max-width:560px; }

.gallery-section{ padding: clamp(56px,8vw,96px) 0; }
.gallery-section + .gallery-section{ border-top:1px solid var(--line-soft); }
.gallery-section-header{ margin-bottom:40px; }
.gallery-section-header .eyebrow{ margin-bottom:12px; }
.gallery-section-header h2{ font-size:clamp(22px,2.8vw,32px); font-weight:700; letter-spacing:-0.02em; margin:0 0 10px; }
.gallery-section-header p{ font-size:15px; color:var(--text-3); max-width:520px; line-height:1.6; }

/* Masonry columns */
.gallery-masonry{
  columns: 3;
  column-gap: 3px;
}
@media(max-width:900px){ .gallery-masonry{ columns:2; } }
@media(max-width:560px){ .gallery-masonry{ columns:1; } }

.gallery-item{
  break-inside: avoid;
  margin-bottom: 3px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: block;
  background: var(--bg-alt);
}
.gallery-item img{
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.45s ease;
}
.gallery-item:hover img{ transform: scale(1.04); }

.gallery-caption{
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 28px 16px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.22s;
}
.gallery-item:hover .gallery-caption{ opacity:1; }
.gallery-caption-tag{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 4px;
}
.gallery-caption-title{
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  line-height: 1.35;
}

/* Lightbox */
.lb-overlay{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.94);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 24px;
}
.lb-overlay.open{ display:flex; }
.lb-overlay img{
  max-width: min(90vw, 1200px);
  max-height: 82vh;
  object-fit: contain;
  border-radius: 6px;
}
.lb-caption{
  margin-top: 16px;
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
}
.lb-close{
  position: absolute;
  top: 20px; right: 24px;
  color: rgba(255,255,255,0.7);
  font-size: 28px;
  font-weight: 300;
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s;
  background: none;
  border: none;
  font-family: inherit;
}
.lb-close:hover{ color:#fff; }
.lb-nav{
  position: absolute;
  top: 50%; transform: translateY(-50%);
  color: rgba(255,255,255,0.6);
  font-size: 36px;
  font-weight: 300;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  padding: 8px 20px;
  transition: color 0.15s;
  user-select: none;
}
.lb-nav:hover{ color:#fff; }
.lb-prev{ left:0; }
.lb-next{ right:0; }

/* ---------- Print ---------- */
@media print{
  .navbar,.nav-mobile,.nav-hamburger,.btn,.btn-row,.form-status{ display:none !important; }
  body{ color:#000; background:#fff; font-size:11pt; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  p{ font-size:11pt !important; line-height:1.6; color:#333 !important; }
  .lead{ font-size:13pt !important; }
  .h0{ font-size:28pt !important; }
  .h1{ font-size:22pt !important; }
  .h2{ font-size:18pt !important; }
  .h3{ font-size:13pt !important; }
  .card,.card-photo{ box-shadow:none !important; border:1px solid #d0d0d0 !important; break-inside:avoid; }
  .photo-banner img,.hero-shot img{ max-height:240px; object-fit:cover; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .page-hero,.hero{ padding-top:48pt; }
  .sec{ padding:32pt 0; }
  a[href]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#666; }
  a.btn::after, .nav-cta::after{ content:""; }
}

/* ---------- Mobile typography ---------- */
@media (max-width:640px){
  p{ font-size:17px; }
  .lead{ font-size:19px; }
  .card p{ font-size:16px; }
  .fine{ font-size:13px; }
  .step p{ font-size:16px; }
  .nav-mobile a{ font-size:18px; padding:16px var(--pad); }
}