/* ============================================================
   2R HOMES — Design . Build . Live
   Design system: warm cream / midnight charcoal / terracotta
   Family resemblance to surfacetek-inc.com (same type system,
   spacing scale, and component grammar) — distinct palette.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  /* --- palette: 60% cream / 30% charcoal / 10% terracotta --- */
  --cream:      #F1E7D8;   /* primary background, warm cream (60%) */
  --paper:      #FAF5EC;   /* raised surfaces, cards */
  --charcoal:   #1B1B1F;   /* midnight charcoal — text + dark bands (30%) */
  --charcoal-2: #26262B;   /* slightly lighter charcoal for dark-band surfaces */
  --slate:      #6E6459;   /* muted warm text */
  --line:       #DED0B6;   /* hairline borders on cream */
  --line-dark:  #3A3A40;   /* hairline borders on charcoal */
  --terra:      #C1603C;   /* terracotta accent (10%) */
  --terra-d:    #96432A;   /* terracotta, darker (hover/active) */
  --terra-tint: #C1603C1A; /* terracotta at low opacity, for washes */
  --cream-on-dark: #F1E7D8;

  /* --- spacing scale (8pt-ish) --- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 80px; --s9: 128px;

  /* --- layout --- */
  --measure: 66ch;
  --gutter: 24px;
  --maxw: 1180px;

  /* --- type --- */
  --f-head: 'Archivo', system-ui, sans-serif;
  --f-body: 'IBM Plex Sans', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--charcoal);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--f-head); margin:0 0 var(--s3); line-height:1.15; letter-spacing:-0.01em; }
h1{ font-weight:800; font-size:clamp(2.1rem, 4.2vw, 3.4rem); }
h2{ font-weight:700; font-size:clamp(1.6rem, 2.8vw, 2.3rem); }
h3{ font-weight:700; font-size:1.25rem; }
p{ margin:0 0 var(--s4); }
.eyebrow{
  font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--terra-d); font-weight:500; display:block; margin-bottom:var(--s3);
}
.lede{ font-size:1.15rem; color:var(--slate); max-width:var(--measure); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-family:var(--f-mono); font-size:0.85rem; letter-spacing:0.04em; text-transform:uppercase;
  padding:14px 26px; border-radius:2px; border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--terra); color:var(--paper); }
.btn-primary:hover{ background:var(--terra-d); }
.btn-outline{ background:transparent; border-color:var(--charcoal); color:var(--charcoal); }
.btn-outline:hover{ background:var(--charcoal); color:var(--cream); }
.btn-outline-light{ background:transparent; border-color:var(--cream-on-dark); color:var(--cream-on-dark); }
.btn-outline-light:hover{ background:var(--cream-on-dark); color:var(--charcoal); }

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(241,231,216,0.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; padding-top:var(--s4); padding-bottom:var(--s4); }
.brand{ display:flex; align-items:center; gap:var(--s3); font-family:var(--f-head); font-weight:800; font-size:1.15rem; letter-spacing:-0.01em; }
.brand .mark{
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.brand .mark img{ width:100%; height:100%; object-fit:contain; display:block; }
.brand .tag{ display:block; font-family:var(--f-mono); font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--slate); font-weight:500; }

.nav{ display:flex; align-items:center; gap:var(--s6); }
.nav-links{ display:flex; gap:var(--s5); list-style:none; margin:0; padding:0; }
.nav-links a{ font-family:var(--f-mono); font-size:0.85rem; letter-spacing:0.02em; padding:6px 2px; border-bottom:2px solid transparent; transition:border-color .15s ease, color .15s ease; }
.nav-links a:hover, .nav-links a.active{ border-color:var(--terra); color:var(--terra-d); }
.nav-phone{ display:flex; align-items:center; gap:var(--s2); }
.nav-phone a{ font-family:var(--f-mono); font-weight:500; }
.nav-toggle{ display:none; background:none; border:1px solid var(--charcoal); border-radius:2px; padding:8px 10px; cursor:pointer; }
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--charcoal); margin:4px 0; }

@media (max-width: 880px){
  .nav-links{
    position:fixed; inset:64px 0 0 0; background:var(--cream); flex-direction:column;
    padding:var(--s6) var(--gutter); gap:var(--s5); transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease; border-top:1px solid var(--line);
  }
  body.nav-open .nav-links{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav-links a{ font-size:1.1rem; }
  .nav-toggle{ display:block; }
  .nav-phone .btn-primary span.label{ display:none; }
}

@media (max-width: 460px){
  .nav-phone .btn-primary{ padding:12px 14px; font-size:0; gap:0; width:44px; height:44px; justify-content:center; }
  .nav-phone .btn-primary::before{
    content:""; display:block; width:18px; height:18px; background-color:var(--paper);
    -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>') no-repeat center / contain;
    mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>') no-repeat center / contain;
  }
}

/* ---------- hero (no photography — blueprint / architectural line motif) ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 520px at 82% -10%, #2a2a30 0%, var(--charcoal) 55%),
    var(--charcoal);
  color:var(--cream-on-dark);
  padding:var(--s9) 0 var(--s8);
}
.hero .blueprint{
  position:absolute; inset:0; opacity:0.16; pointer-events:none;
  background-image:
    linear-gradient(var(--terra) 1px, transparent 1px),
    linear-gradient(90deg, var(--terra) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg, transparent, black 30%, black 70%, transparent);
}
.hero .blueprint-lines{ position:absolute; right:-6%; top:-8%; width:62%; opacity:0.5; pointer-events:none; }

/* ---------- hero photo: full-bleed layer with slow Ken Burns zoom ---------- */
.hero-photo{ }
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center 65%;
  animation:heroZoom 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroZoom{
  from{ transform:scale(1); }
  to{ transform:scale(1.1); }
}
@media (prefers-reduced-motion: reduce){
  .hero-bg{ animation:none; }
}
.hero-photo::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg, rgba(15,14,13,0.94) 0%, rgba(15,14,13,0.86) 32%, rgba(15,14,13,0.55) 62%, rgba(15,14,13,0.28) 100%),
    linear-gradient(0deg, rgba(15,14,13,0.5), rgba(15,14,13,0) 45%);
  pointer-events:none;
}

/* ---------- hero pencil-sketch background layer (drawn from the page's own hero photo) ---------- */
.hero-sketch{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:cover; background-position:center 38%;
  opacity:0.22;
  mask-image:linear-gradient(100deg, transparent 0%, transparent 42%, black 78%, black 100%);
  -webkit-mask-image:linear-gradient(100deg, transparent 0%, transparent 42%, black 78%, black 100%);
}
/* subtle sketch texture layered into the dark gradient zone of a photographic hero (index/portfolio) */
.hero-photo .hero-sketch{
  z-index:1; opacity:0.16; mix-blend-mode:screen;
  mask-image:linear-gradient(100deg, black 0%, black 45%, transparent 78%);
  -webkit-mask-image:linear-gradient(100deg, black 0%, black 45%, transparent 78%);
}

.hero-inner{ position:relative; z-index:2; max-width:760px; }
.hero .tagline{
  font-family:var(--f-mono); font-size:0.95rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--terra); margin-bottom:var(--s5);
}
.hero h1{ color:var(--cream-on-dark); }
.hero .lede{ color:#C9BFAF; }
.hero-cta{ display:flex; gap:var(--s4); margin-top:var(--s6); flex-wrap:wrap; }
.hero-stats{ display:flex; gap:var(--s7); margin-top:var(--s8); flex-wrap:wrap; }
.hero-stats .stat b{ display:block; font-family:var(--f-head); font-size:1.7rem; color:var(--terra); }
.hero-stats .stat span{ font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.06em; text-transform:uppercase; color:#B8AE9E; }

.hero-credit{
  position:absolute; right:var(--gutter); bottom:var(--s5); z-index:3;
  font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:#C9BFAF;
}
.hero-page{ padding:var(--s7) 0 var(--s7); }
.hero-page h1{ font-size:clamp(1.9rem, 3.4vw, 2.7rem); }
.hero-page .hero-inner{ max-width:680px; }

/* ---------- bands / sections ---------- */
.band{ padding:var(--s8) 0; }
.band-elevated{ position:relative; z-index:2; }
.band-tight{ padding:var(--s7) 0; }
.band-paper{ background:var(--paper); }
.band-dark{ position:relative; overflow:hidden; isolation:isolate; background:var(--charcoal); color:var(--cream-on-dark); }
.band-dark > .wrap{ position:relative; z-index:1; }
.band-dark .slate{ color:#B8AE9E; }
.band-dark h2{ color:var(--cream-on-dark); }
.band-dark .eyebrow{ color:var(--terra); }
.section-head{ max-width:640px; margin-bottom:var(--s7); }

/* pencil-sketch texture behind a dark band, topically tied to that section (different image than the page's hero sketch) */
.band-sketch{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:cover; background-position:center 42%;
  opacity:0.1; mix-blend-mode:screen;
  mask-image:linear-gradient(180deg, transparent 0%, transparent 17%, black 55%, black 92%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, transparent 17%, black 55%, black 92%, transparent 100%);
}

/* ---------- cards / process steps ---------- */
.grid{ display:grid; gap:var(--s5); }
.grid-3{ grid-template-columns:repeat(3, 1fr); }
.grid-4{ grid-template-columns:repeat(4, 1fr); }
.grid-2{ grid-template-columns:repeat(2, 1fr); }
@media (max-width:900px){ .grid-3, .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid-3, .grid-4, .grid-2{ grid-template-columns:1fr; } }

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:4px;
  padding:var(--s6); transition:border-color .15s ease, transform .15s ease;
  position:relative;
}
.card:hover{ border-color:var(--terra); transform:translateY(-2px); }
.card .num{ font-family:var(--f-mono); color:var(--terra); font-size:0.8rem; letter-spacing:0.08em; margin-bottom:var(--s3); display:block; }
.card h3{ margin-bottom:var(--s2); color:var(--charcoal); }
.card p{ color:var(--slate); margin:0; font-size:0.97rem; }

/* ---------- card hover/focus detail popup ---------- */
.card[tabindex]{ outline:none; }
.card .card-pop{
  position:absolute; left:0; right:0; top:calc(100% + var(--s3)); z-index:40;
  background:var(--charcoal); color:var(--cream-on-dark); border-radius:4px; padding:var(--s5);
  box-shadow:0 18px 40px rgba(15,14,13,0.32);
  opacity:0; visibility:hidden; transform:translateY(-6px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  font-size:0.92rem; line-height:1.55; color:#D9D0C2;
}
.card .card-pop::before{
  content:""; position:absolute; left:28px; top:-6px; width:12px; height:12px;
  background:var(--charcoal); transform:rotate(45deg);
}
.card:hover .card-pop, .card:focus-within .card-pop, .card:focus .card-pop{
  opacity:1; visibility:visible; transform:translateY(0);
}
@media (max-width:900px){
  .card .card-pop{ position:static; margin-top:var(--s4); opacity:1; visibility:visible; transform:none; box-shadow:none; display:none; }
  .card:hover .card-pop, .card:focus-within .card-pop, .card:focus .card-pop{ display:block; }
}

.step{ display:flex; gap:var(--s5); align-items:flex-start; }
.step .step-num{
  flex:none; width:52px; height:52px; border-radius:50%; border:2px solid var(--terra);
  display:flex; align-items:center; justify-content:center; font-family:var(--f-head); font-weight:800; color:var(--terra);
}
.step h3{ margin-bottom:var(--s2); }
.step p{ color:var(--slate); margin:0; }
.step-list{ display:flex; flex-direction:column; gap:var(--s6); counter-reset:step; }

/* ---------- scope / checklist ---------- */
.scope{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); grid-template-columns:repeat(2,1fr); }
@media (max-width:620px){ .scope{ grid-template-columns:1fr; } }
.scope li{ display:flex; gap:var(--s3); align-items:flex-start; font-size:0.97rem; }
.scope li::before{ content:"—"; color:var(--terra); font-family:var(--f-mono); flex:none; }

/* ---------- projects / gallery ---------- */
.project{
  border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--paper);
}
.project figure{ margin:0; aspect-ratio:4/3; background:var(--charcoal); position:relative; overflow:hidden; }
.project img{ width:100%; height:100%; object-fit:cover; }
.project .body{ padding:var(--s5); }
.project .tag{ font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--terra-d); }
.project h3{ margin:var(--s2) 0 var(--s2); color:var(--charcoal); }
.project p{ color:var(--slate); font-size:0.95rem; margin:0; }

.placeholder-photo{
  width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s2);
  background:
    repeating-linear-gradient(135deg, #2a2a30 0px, #2a2a30 2px, transparent 2px, transparent 14px),
    var(--charcoal);
  color:#8b8378; text-align:center; padding:var(--s5);
}
.placeholder-photo .ph-icon{ font-family:var(--f-mono); font-size:1.6rem; color:var(--terra); }
.placeholder-photo span{ font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; }

/* ---------- split tiles (two-way service teaser) ---------- */
.split-tile{ border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--paper); display:flex; flex-direction:column; }
.split-tile figure{ margin:0; aspect-ratio:16/10; overflow:hidden; }
.split-tile img{ width:100%; height:100%; object-fit:cover; }
.split-tile .body{ padding:var(--s6); flex:1; display:flex; flex-direction:column; color:var(--charcoal); }
.split-tile .body h3{ color:var(--charcoal); }
.split-tile .body p{ flex:1; }

/* ---------- spotlight (large featured project) ---------- */
.spotlight{ display:grid; grid-template-columns:1.1fr 1fr; gap:var(--s7); align-items:center; }
@media (max-width:900px){ .spotlight{ grid-template-columns:1fr; } }
.spotlight figure{ margin:0; border-radius:4px; overflow:hidden; border:1px solid var(--line); }
.spotlight img{ width:100%; display:block; }

/* ---------- quote / testimonial style block ---------- */
.pull{
  border-left:3px solid var(--terra); padding-left:var(--s5); font-family:var(--f-head);
  font-size:1.3rem; font-weight:600; color:var(--charcoal); max-width:var(--measure);
}

/* ---------- stat row ---------- */
.statrow{ display:flex; gap:var(--s8); flex-wrap:wrap; }
.statrow .stat b{ display:block; font-family:var(--f-head); font-size:2.1rem; color:var(--terra-d); }
.statrow .stat span{ font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--slate); }

/* ---------- forms ---------- */
.form-grid{ display:grid; gap:var(--s4); grid-template-columns:1fr 1fr; }
.form-grid .full{ grid-column:1 / -1; }
@media (max-width:620px){ .form-grid{ grid-template-columns:1fr; } }
label{ display:block; font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--slate); margin-bottom:var(--s2); }
input, textarea, select{
  width:100%; font-family:var(--f-body); font-size:1rem; padding:12px 14px; border:1px solid var(--line);
  border-radius:2px; background:var(--paper); color:var(--charcoal);
}
input:focus, textarea:focus, select:focus{ outline:2px solid var(--terra); outline-offset:1px; border-color:var(--terra); }
textarea{ resize:vertical; min-height:120px; }

/* ---------- contact list ---------- */
.contact-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s3); }
.contact-list a{ display:flex; align-items:center; gap:var(--s3); }
.contact-list .k{ font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--terra); width:76px; flex:none; }

/* ---------- CTA band ---------- */
.cta-band{ text-align:center; }
.cta-band h2{ margin-bottom:var(--s3); }
.cta-band .lede{ margin:0 auto var(--s6); }

/* ---------- footer ---------- */
.site-foot{ background:var(--charcoal); color:#B8AE9E; padding:var(--s8) 0 var(--s6); }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--s6); margin-bottom:var(--s7); }
@media (max-width:820px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }
.site-foot h4{ font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--cream-on-dark); margin-bottom:var(--s4); }
.site-foot .brand{ color:var(--cream-on-dark); margin-bottom:var(--s3); }
.site-foot p{ color:#9C9284; font-size:0.92rem; }
.foot-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s3); }
.foot-links a:hover{ color:var(--terra); }
.social-row{ display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s4); }
.social-row a{
  width:36px; height:36px; border:1px solid var(--line-dark); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:0.72rem;
  transition:border-color .15s ease, color .15s ease;
}
.social-row a:hover{ border-color:var(--terra); color:var(--terra); }
.foot-bottom{ border-top:1px solid var(--line-dark); padding-top:var(--s5); display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; font-size:0.85rem; color:#8b8378; }
.foot-bottom .legal{ max-width:640px; }

/* ---------- lightbox (project photo pop-up) ---------- */
.lightbox-trigger{ cursor:zoom-in; position:relative; }
.lightbox-hidden{ display:none; }
.lightbox-trigger::after{
  content:""; position:absolute; right:var(--s3); bottom:var(--s3); width:30px; height:30px; border-radius:50%;
  background:rgba(15,14,13,0.55); opacity:0; transition:opacity .15s ease; pointer-events:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>');
  background-repeat:no-repeat; background-position:center; background-size:16px;
}
.lightbox-trigger:hover::after{ opacity:1; }

.lightbox-overlay{
  position:fixed; inset:0; z-index:300; background:rgba(15,14,13,0.94);
  display:flex; align-items:center; justify-content:center; padding:var(--s7) var(--s6);
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s;
}
.lightbox-overlay.is-open{ opacity:1; visibility:visible; }
.lightbox-box{ position:relative; max-width:min(1100px,90vw); }
.lightbox-box img{ max-width:100%; max-height:78vh; width:auto; height:auto; border-radius:4px; display:block; margin:0 auto; box-shadow:0 24px 64px rgba(0,0,0,0.5); }
.lightbox-caption{ text-align:center; color:var(--cream-on-dark); font-family:var(--f-mono); font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase; margin-top:var(--s4); }
.lightbox-close{
  position:absolute; top:-48px; right:0; width:38px; height:38px; border:1px solid var(--line-dark); border-radius:50%;
  background:transparent; color:var(--cream-on-dark); font-size:1.3rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-close:hover{ border-color:var(--terra); color:var(--terra); }
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line-dark); background:rgba(27,27,31,0.65); color:var(--cream-on-dark);
  font-size:1.5rem; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.lightbox-nav:hover{ border-color:var(--terra); color:var(--terra); }
.lightbox-prev{ left:calc(-56px); } .lightbox-next{ right:calc(-56px); }
@media (max-width:860px){
  .lightbox-prev{ left:var(--s3); } .lightbox-next{ right:var(--s3); }
  .lightbox-close{ top:var(--s3); right:var(--s3); background:rgba(27,27,31,0.7); }
}

/* ---------- before / after comparison modal ---------- */
.ba-trigger{
  display:inline-flex; align-items:center; gap:var(--s2); margin-top:var(--s4);
  font-family:var(--f-mono); font-size:0.8rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--terra-d); cursor:pointer; background:transparent; border:1px solid var(--terra-d); border-radius:2px; padding:10px 18px;
  transition:background .15s ease, color .15s ease;
}
.ba-trigger:hover{ background:var(--terra-d); color:var(--paper); }
.ba-box{ position:relative; max-width:min(980px,90vw); width:100%; }
.ba-frame{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:4px; overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,0.5); background:#000; user-select:none;
}
.ba-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.ba-frame .ba-after-wrap{ position:absolute; inset:0; clip-path:inset(0 0 0 50%); -webkit-clip-path:inset(0 0 0 50%); }
.ba-handle{ position:absolute; top:0; bottom:0; left:50%; width:0; cursor:ew-resize; touch-action:none; }
.ba-handle::before{ content:""; position:absolute; top:0; bottom:0; left:-1px; width:3px; background:var(--terra); }
.ba-handle::after{
  content:"\2194"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:50%; background:var(--terra); color:var(--paper);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}
.ba-label{
  position:absolute; top:var(--s4); font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
  background:rgba(15,14,13,0.68); color:var(--cream-on-dark); padding:6px 12px; border-radius:2px; pointer-events:none;
}
.ba-label.ba-before{ left:var(--s4); } .ba-label.ba-after{ right:var(--s4); }
.ba-seq{ display:flex; gap:var(--s3); justify-content:center; margin-top:var(--s5); flex-wrap:wrap; }
.ba-seq button{
  font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; padding:9px 18px;
  border:1px solid var(--line-dark); background:transparent; color:var(--cream-on-dark); border-radius:2px; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.ba-seq button.is-active{ background:var(--terra); border-color:var(--terra); color:var(--paper); }
.ba-seq button:hover{ border-color:var(--terra); }

/* ---------- social icons ---------- */
.social-row a .ico{ display:block; width:16px; height:16px; background-color:currentColor; }
.ico-facebook{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.008c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 1.899-.287 1.468h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/></svg>') no-repeat center / contain;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.008c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 1.899-.287 1.468h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/></svg>') no-repeat center / contain;
}
.ico-instagram{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/></svg>') no-repeat center / contain;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/></svg>') no-repeat center / contain;
}
.ico-x{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z"/></svg>') no-repeat center / contain;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z"/></svg>') no-repeat center / contain;
}
.ico-tiktok{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M9 0h1.98c.144.715.54 1.617 1.235 2.512C12.895 3.389 13.797 4 15 4v2c-1.753 0-3.07-.814-4-1.829V11a5 5 0 1 1-5-5v2a3 3 0 1 0 3 3V0Z"/></svg>') no-repeat center / contain;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M9 0h1.98c.144.715.54 1.617 1.235 2.512C12.895 3.389 13.797 4 15 4v2c-1.753 0-3.07-.814-4-1.829V11a5 5 0 1 1-5-5v2a3 3 0 1 0 3 3V0Z"/></svg>') no-repeat center / contain;
}
.ico-nextdoor{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2 2 9.5V22h6v-7h8v7h6V9.5L12 2Z"/></svg>') no-repeat center / contain;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2 2 9.5V22h6v-7h8v7h6V9.5L12 2Z"/></svg>') no-repeat center / contain;
}

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- misc ---------- */
.divider{ height:1px; background:var(--line); border:0; margin:var(--s8) 0; }
.band-dark .divider{ background:var(--line-dark); }
.center{ text-align:center; margin-left:auto; margin-right:auto; }