:root {
  --ink: #181917;
  --ink-soft: #34352F;
  --paper: #EFEBE1;
  --cream: #F5F2EA;
  --walnut: #B8691F;
  --amber: #B8691F;
  --accent: #B8691F;
  --accent-light: #E0A85C;
  --muted: #7E776C;
  --line: rgba(24,25,23,.12);
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--cream); color: var(--ink); font-family: var(--font); font-weight: 400; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.container--narrow { max-width: 960px; }
.eyebrow { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--muted); }

/* ---------- NAV ---------- */
.nav { padding: 26px 0; background: var(--cream); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.nav--transparent { background: transparent; border-bottom: none; position: absolute; left: 0; right: 0; top: 0; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo-img { height: 38px; width: auto; display: block; }
.logo-img--light { display: none; }
.nav--transparent .logo-img--dark { display: none; }
.nav--transparent .logo-img--light { display: block; }
.site-footer .logo-img--dark { display: none; }
.site-footer .logo-img--light { display: block; }
.site-footer .logo-img { height: 34px; }
.nav--transparent .logo, .nav--transparent .nav-links a { color: var(--paper); }
.nav--transparent .nav-links a { color: rgba(246,239,228,.85); }
.nav--transparent .nav-links a:hover { color: #F6EFE4; }
.nav-links { display: flex; gap: 34px; list-style: none; }
.nav-links a { color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 400; transition: color .2s; }
.nav-links a:hover { color: var(--walnut); }
.nav-links a.active { color: var(--walnut); }
.nav-cta { background: var(--ink); color: var(--paper); padding: 10px 20px; border-radius: 2px; font-size: 13px; font-weight: 500; text-decoration: none; letter-spacing: 0.01em; transition: background .2s; }
.nav--transparent .nav-cta { background: var(--paper); color: var(--ink); }
.nav-cta:hover { background: var(--ink-soft); }
.nav--transparent .nav-cta:hover { background: #fff; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; font-size: 26px; line-height: 1; color: var(--ink); padding: 2px 6px; }
.nav--transparent .nav-toggle { color: var(--paper); }

/* ---------- PAGE HEADER (non-hero pages) ---------- */
.page-header { padding: 80px 0 70px; border-bottom: 1px solid var(--line); }
.page-header .eyebrow { display: block; margin-bottom: 20px; color: var(--walnut); }
.page-header h1 { font-weight: 600; font-size: clamp(44px, 5.5vw, 72px); line-height: 1.02; letter-spacing: -0.025em; max-width: 820px; }
.page-header p.lede { margin-top: 28px; font-size: 19px; line-height: 1.5; max-width: 640px; color: var(--ink-soft); font-weight: 300; }

/* ---------- HERO (homepage only) ---------- */
.hero {
  position: relative;
  min-height: 760px;
  color: #F6EFE4;
  background-size: cover;
  background-position: center right;
  display: flex;
  align-items: center;
  padding: 180px 0 120px;
}
.hero-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; width: 100%; }
.hero-eyebrow { color: rgba(246,239,228,.7); margin-bottom: 24px; }
.hero h1 { font-weight: 600; font-size: clamp(48px, 6.2vw, 82px); line-height: 1.02; letter-spacing: -0.025em; max-width: 820px; margin-bottom: 32px; }
.hero h1 em { font-style: italic; font-weight: 400; color: var(--accent-light); }
.hero p.sub { font-size: 19px; line-height: 1.5; max-width: 560px; margin-bottom: 42px; color: rgba(246,239,228,.88); font-weight: 300; }
.hero-cta-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* ---------- BUTTONS ---------- */
.btn { padding: 16px 28px; border-radius: 2px; font-weight: 500; font-size: 14px; letter-spacing: 0.02em; text-decoration: none; display: inline-block; transition: background .2s, transform .15s, border-color .2s; }
.btn--primary { background: var(--paper); color: var(--ink); }
.btn--primary:hover { background: #fff; transform: translateY(-1px); }
.btn--secondary { background: transparent; color: #F6EFE4; border: 1px solid rgba(246,239,228,.4); font-weight: 400; }
.btn--secondary:hover { border-color: #F6EFE4; background: rgba(246,239,228,.05); }
.btn--dark { background: var(--ink); color: var(--paper); padding: 18px 32px; }
.btn--dark:hover { background: var(--ink-soft); transform: translateY(-1px); }
.btn--outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); font-weight: 400; }
.btn--outline:hover { background: var(--ink); color: var(--paper); }

/* ---------- CRED STRIP ---------- */
.cred-strip { background: var(--ink); color: rgba(246,239,228,.78); padding: 22px 0; font-size: 13px; letter-spacing: 0.02em; }
.cred-inner { display: flex; justify-content: center; align-items: center; gap: 32px; flex-wrap: wrap; text-align: center; max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.cred-inner .dot { color: rgba(246,239,228,.35); }
.cred-inner strong { color: var(--accent-light); font-weight: 500; letter-spacing: 0.05em; }

/* ---------- GENERIC SECTIONS ---------- */
section.block { padding: 120px 0; }
.block--paper { background: var(--paper); }
.block--cream { background: var(--cream); }
.block--dark { background: var(--ink); color: var(--paper); }
.block--walnut { background: var(--ink); color: var(--paper); }

.block-header { margin-bottom: 64px; max-width: 720px; }
.block-header .eyebrow { display: block; margin-bottom: 16px; }
.block-header h2 { font-weight: 500; font-size: clamp(36px, 4.2vw, 54px); line-height: 1.05; letter-spacing: -0.02em; }
.block-header p { margin-top: 20px; font-size: 18px; color: var(--ink-soft); max-width: 620px; font-weight: 300; }
.block--dark .block-header h2 { color: var(--paper); }
.block--dark .block-header p { color: rgba(246,239,228,.72); }
.block--dark .block-header .eyebrow { color: var(--accent-light); }
.block--walnut .block-header h2 { color: var(--paper); }
.block--walnut .block-header p { color: rgba(246,239,228,.82); }
.block--walnut .block-header .eyebrow { color: var(--accent-light); }

/* ---------- WHAT WE BUILD / SERVICES GRID ---------- */
.build-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.build-item { padding-top: 32px; border-top: 1px solid var(--line); }
.build-item .num { font-size: 14px; color: var(--walnut); font-weight: 500; }
.build-item h3 { font-weight: 400; font-size: 24px; line-height: 1.2; margin: 14px 0 16px; letter-spacing: -0.01em; }
.build-item p { font-size: 15px; color: var(--ink-soft); line-height: 1.6; font-weight: 300; }

/* ---------- PROJECT / CASE STUDY ---------- */
.project-main { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: start; margin-bottom: 48px; }
.project-hero-img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.project-meta-col { padding-top: 16px; }
.project-meta-col .eyebrow { display: block; color: var(--walnut); margin-bottom: 16px; }
.project-meta-col h3 { font-weight: 300; font-size: 38px; line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 10px; }
.project-meta-col .address { color: var(--muted); font-size: 14px; margin-bottom: 28px; }
.project-meta-col p { font-size: 16px; color: var(--ink-soft); line-height: 1.65; font-weight: 300; margin-bottom: 16px; }
.project-meta-col dl { display: grid; grid-template-columns: 100px 1fr; gap: 10px 18px; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); font-size: 14px; }
.project-meta-col dt { color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.14em; padding-top: 2px; }
.project-meta-col dd { color: var(--ink); font-weight: 400; }

.project-gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.project-gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/2; }
.project-gallery .g-a { grid-column: span 5; }
.project-gallery .g-b { grid-column: span 4; }
.project-gallery .g-c { grid-column: span 3; aspect-ratio: 2/3; }
.project-gallery--large { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.project-gallery--large img { aspect-ratio: 3/2; }

.spro-teaser { padding: 36px 40px; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-top: 80px; }
.spro-teaser .st-label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-light); margin-bottom: 8px; }
.spro-teaser h4 { font-weight: 400; font-size: 22px; margin-bottom: 4px; letter-spacing: -0.01em; }
.spro-teaser p { font-size: 14px; color: rgba(246,239,228,.7); font-weight: 300; }
.spro-teaser .st-note { font-size: 13px; color: var(--accent-light); font-weight: 400; letter-spacing: 0.02em; white-space: nowrap; }

.work-footer { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.work-footer a { color: var(--ink); text-decoration: none; font-size: 18px; font-weight: 400; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 10px; transition: gap .2s; }
.work-footer a:hover { gap: 16px; }
.work-footer a::after { content: "\2192"; }

/* ---------- SHOP STATS ---------- */
.shop-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 72px; padding-top: 48px; border-top: 1px solid rgba(246,239,228,.15); }
.stat .num { font-weight: 400; font-size: 56px; line-height: 1; color: var(--accent-light); letter-spacing: -0.02em; }
.stat .label { font-size: 13px; color: rgba(246,239,228,.65); margin-top: 12px; letter-spacing: 0.04em; font-weight: 300; line-height: 1.4; }

/* ---------- TRUSTED / TESTIMONIAL ---------- */
.trusted { background: var(--paper); padding: 90px 0; text-align: center; }
.trusted blockquote { font-weight: 300; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.35; max-width: 820px; margin: 0 auto; color: var(--ink); letter-spacing: -0.01em; }

.testimonial { background: var(--cream); padding: 110px 0; }
.test-inner { max-width: 880px; margin: 0 auto; padding: 0 40px; }
.test-inner .eyebrow { color: var(--walnut); margin-bottom: 24px; display: block; }
.test-inner blockquote { font-weight: 300; font-size: clamp(26px, 3vw, 36px); line-height: 1.28; color: var(--ink); letter-spacing: -0.015em; }
.test-inner cite { display: block; margin-top: 28px; font-style: normal; font-size: 14px; color: var(--muted); letter-spacing: 0.02em; }
.placeholder-note { margin-top: 32px; padding: 10px 14px; background: rgba(184,105,31,.08); border-left: 2px solid var(--amber); font-size: 12px; color: var(--walnut); letter-spacing: 0.02em; display: inline-block; }

/* ---------- RESIDENTIAL BRIDGE ---------- */
.rb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.rb-grid .eyebrow { color: var(--accent-light); margin-bottom: 20px; display: block; }
.rb-grid h3 { font-weight: 300; font-size: clamp(32px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 20px; }
.rb-grid p { font-size: 17px; line-height: 1.55; color: rgba(246,239,228,.82); font-weight: 300; margin-bottom: 32px; }
.rb-cta { color: var(--accent-light); font-weight: 400; font-size: 18px; text-decoration: none; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 10px; transition: gap .2s; }
.rb-cta:hover { gap: 16px; }
.rb-cta::after { content: "\2192"; }

/* ---------- FINAL CTA ---------- */
.final-cta { background: var(--cream); padding: 140px 0; text-align: center; border-top: 1px solid var(--line); }
.final-cta .eyebrow { color: var(--walnut); display: block; margin-bottom: 20px; }
.final-cta h2 { font-weight: 500; font-size: clamp(40px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.025em; margin-bottom: 24px; }
.final-cta p { font-size: 18px; color: var(--ink-soft); max-width: 540px; margin: 0 auto 40px; font-weight: 300; }

/* ---------- FOOTER ---------- */
footer.site-footer { background: var(--ink); color: rgba(246,239,228,.7); padding: 80px 0 36px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 64px; max-width: 1280px; margin-left: auto; margin-right: auto; padding: 0 40px; }
.footer-brand .logo { margin-bottom: 22px; }
.footer-brand p { font-size: 14px; line-height: 1.6; font-weight: 300; max-width: 300px; }
.footer-col h5 { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(246,239,228,.5); margin-bottom: 18px; font-weight: 500; }
.footer-col a { color: rgba(246,239,228,.82); text-decoration: none; font-size: 14px; display: block; padding: 4px 0; transition: color .2s; font-weight: 300; }
.footer-col a:hover { color: var(--paper); }
.footer-col p { font-size: 14px; line-height: 1.7; font-weight: 300; }
.footer-bottom { padding-top: 32px; border-top: 1px solid rgba(246,239,228,.12); display: flex; justify-content: space-between; font-size: 12px; color: rgba(246,239,228,.5); flex-wrap: wrap; gap: 12px; max-width: 1280px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }

/* ---------- PLACEHOLDER TILES ---------- */
.placeholder { background: linear-gradient(135deg, #e7ded0 0%, #d6cab7 100%); aspect-ratio: 3/2; display: flex; align-items: center; justify-content: center; color: var(--walnut); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; text-align: center; padding: 20px; }
.placeholder--tall { aspect-ratio: 2/3; }
.placeholder--dark { background: linear-gradient(135deg, #3a2d21 0%, #2a2018 100%); color: var(--accent-light); }

/* ---------- PAGE GRIDS ---------- */
.project-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
.project-card { text-decoration: none; color: inherit; display: block; }
.project-card .img-wrap { overflow: hidden; margin-bottom: 20px; }
.project-card img, .project-card .placeholder { transition: transform .5s ease; }
.project-card:hover img, .project-card:hover .placeholder { transform: scale(1.03); }
.project-card h3 { font-weight: 400; font-size: 22px; letter-spacing: -0.01em; margin-bottom: 6px; }
.project-card .meta { font-size: 13px; color: var(--muted); letter-spacing: 0.02em; }
.project-card .status { display: inline-block; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--walnut); margin-bottom: 10px; font-weight: 500; }
.project-card.coming-soon .status { color: var(--amber); }

/* ---------- COMMERCIAL PAGE SERVICE BLOCKS ---------- */
.service-block { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; padding: 80px 0; border-bottom: 1px solid var(--line); }
.service-block:last-child { border-bottom: none; }
.service-block.reverse { direction: rtl; }
.service-block.reverse > * { direction: ltr; }
.service-block .sb-img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.service-block .sb-body .eyebrow { display: block; color: var(--walnut); margin-bottom: 16px; }
.service-block .sb-body h2 { font-weight: 300; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 20px; }
.service-block .sb-body p { font-size: 16px; color: var(--ink-soft); font-weight: 300; line-height: 1.65; margin-bottom: 16px; }
.service-block .sb-body ul { list-style: none; margin-top: 20px; }
.service-block .sb-body ul li { font-size: 15px; color: var(--ink-soft); font-weight: 300; padding: 8px 0 8px 20px; border-top: 1px solid var(--line); position: relative; }
.service-block .sb-body ul li::before { content: "—"; color: var(--walnut); position: absolute; left: 0; }

/* ---------- PROCESS TIMELINE ---------- */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.process-step { padding-top: 32px; border-top: 2px solid var(--walnut); }
.process-step .n { font-size: 12px; color: var(--walnut); letter-spacing: 0.18em; font-weight: 500; margin-bottom: 10px; }
.process-step h4 { font-weight: 400; font-size: 18px; margin-bottom: 10px; letter-spacing: -0.01em; }
.process-step p { font-size: 14px; color: var(--ink-soft); font-weight: 300; line-height: 1.55; }

/* ---------- RESIDENTIAL TESTIMONIALS ---------- */
.res-testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.res-testimonial { padding: 32px; background: var(--cream); border: 1px solid var(--line); }
.res-testimonial blockquote { font-weight: 300; font-size: 17px; line-height: 1.5; color: var(--ink); margin-bottom: 20px; }
.res-testimonial cite { font-size: 13px; color: var(--muted); font-style: normal; letter-spacing: 0.02em; }

/* ---------- ABOUT / TEAM ---------- */
.team-block { padding: 70px 0; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.team-person { text-align: center; }
.team-person .ph { aspect-ratio: 1/1; background: linear-gradient(135deg, #e7ded0, #d6cab7); margin-bottom: 16px; display: flex; align-items: center; justify-content: center; color: var(--walnut); font-size: 40px; font-weight: 200; }
.team-person h4 { font-weight: 400; font-size: 16px; letter-spacing: -0.01em; }
.team-person .role { font-size: 13px; color: var(--muted); }

.credentials-block { background: var(--ink); color: var(--paper); padding: 90px 0; }
.credentials-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 80px; margin-top: 40px; }
.credential { padding: 24px 0; border-top: 1px solid rgba(246,239,228,.2); }
.credential .label { font-size: 11px; color: rgba(246,239,228,.5); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 10px; font-weight: 500; }
.credential .val { font-size: 17px; font-weight: 300; color: var(--paper); line-height: 1.4; }
.credential .sub { font-size: 13px; color: rgba(246,239,228,.6); margin-top: 6px; font-weight: 300; }

/* ---------- CONTACT ---------- */
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; padding-top: 20px; }
.contact-paths h3 { font-weight: 400; font-size: 20px; margin-bottom: 14px; letter-spacing: -0.01em; }
.contact-path { padding: 30px 0; border-top: 1px solid var(--line); }
.contact-path:first-child { border-top: 2px solid var(--ink); }
.contact-path p { font-size: 15px; color: var(--ink-soft); font-weight: 300; line-height: 1.6; margin-bottom: 14px; }
.contact-path a.inline { color: var(--ink); text-decoration: underline; text-decoration-color: var(--walnut); text-underline-offset: 3px; }
.contact-info { background: var(--paper); padding: 40px; }
.contact-info h4 { font-weight: 500; font-size: 14px; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 20px; color: var(--walnut); }
.contact-info .line { font-size: 15px; line-height: 1.6; font-weight: 300; margin-bottom: 18px; color: var(--ink); }
.contact-info .line strong { font-weight: 500; display: block; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 4px; }

/* ---------- MAKERS ---------- */
.makers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.maker-card { background: var(--paper); padding: 32px; text-decoration: none; color: inherit; transition: transform .2s, background .2s; display: block; }
.maker-card:hover { transform: translateY(-2px); background: #fff; }
.maker-card .tag { font-size: 11px; color: var(--walnut); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 14px; font-weight: 500; }
.maker-card h3 { font-weight: 400; font-size: 22px; margin-bottom: 12px; letter-spacing: -0.01em; line-height: 1.25; }
.maker-card p { font-size: 14px; color: var(--ink-soft); font-weight: 300; line-height: 1.55; }

/* ---------- MOCKUP BANNER ---------- */
.mockup-banner { position: fixed; bottom: 16px; right: 16px; z-index: 999; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 3px; font-size: 12px; letter-spacing: 0.04em; box-shadow: 0 4px 18px rgba(0,0,0,.25); font-weight: 400; }
.mockup-banner strong { color: var(--accent-light); }
.mockup-banner a { color: var(--accent-light); text-decoration: none; font-weight: 500; margin-left: 8px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .container, .hero-inner, .footer-grid, .rb-grid, .cred-inner, .footer-bottom { padding-left: 24px; padding-right: 24px; }
  .build-grid, .project-main, .rb-grid, .service-block, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .service-block.reverse { direction: ltr; }
  .project-gallery, .project-list, .makers-grid { grid-template-columns: 1fr 1fr; }
  .project-gallery .g-a, .project-gallery .g-b, .project-gallery .g-c { grid-column: span 1; aspect-ratio: 3/2; }
  .shop-stats, .process, .team-grid, .res-testimonials, .credentials-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav-cta { display: inline-block; margin-left: auto; margin-right: 8px; padding: 9px 14px; font-size: 12px; }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--cream); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px 24px 16px; box-shadow: 0 14px 28px rgba(24,25,23,.14); }
  .nav--open .nav-links { display: flex; }
  .nav-links a { display: block; padding: 15px 2px; font-size: 16px; border-top: 1px solid var(--line); color: var(--ink); }
  .nav-links li:first-child a { border-top: none; }
  .nav--transparent.nav--open { background: var(--cream); }
  .nav--transparent.nav--open .logo-img--dark { display: block; }
  .nav--transparent.nav--open .logo-img--light { display: none; }
  .nav--transparent.nav--open .nav-toggle { color: var(--ink); }
  .nav--transparent.nav--open .nav-links a { color: var(--ink); }
  section.block { padding: 80px 0; }
  .page-header { padding: 50px 0 40px; }
}