/* Zebulon Homes & Properties — design system */

:root{
  --ink: #17150f;
  --ink-soft: #55503f;
  --ink-faint: #8a8471;
  --paper: #f8f5ec;
  --paper-alt: #efe8d6;
  --paper-deep: #e7ded1;
  --white: #ffffff;
  --rust: #b8481f;
  --rust-dark: #8f3616;
  --forest: #2f4a34;
  --forest-light: #4c6b4f;
  --line: rgba(23,21,15,0.12);
  --line-strong: rgba(23,21,15,0.22);
  --shadow-sm: 0 2px 10px rgba(23,21,15,0.06);
  --shadow-md: 0 14px 40px rgba(23,21,15,0.12);
  --shadow-lg: 0 30px 70px rgba(23,21,15,0.18);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --container: 1240px;
  --ff-display: 'Fraunces', 'Georgia', serif;
  --ff-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.22,.68,.19,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; max-width:100%; }
body{
  margin:0;
  font-family: var(--ff-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
  position: relative;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--ff-display); font-weight:600; line-height:1.08; margin:0; color:var(--ink); }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
.container{ width:100%; max-width: var(--container); margin:0 auto; padding: 0 24px; }

/* ---------- utility ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size: 12.5px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--rust); font-weight:600; margin-bottom: 18px;
}
.eyebrow::before{ content:""; width:26px; height:1.5px; background: var(--rust); display:block; }
.eyebrow.light{ color: #e7c8a8; }
.eyebrow.light::before{ background:#e7c8a8; }

.section{ padding: clamp(64px, 9vw, 128px) 0; }
.section-head{ max-width: 640px; margin-bottom: clamp(36px,5vw,64px); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size: clamp(30px, 4vw, 46px); }
.section-head p{ margin-top:16px; color: var(--ink-soft); font-size:17px; line-height:1.7; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 15px 28px; border-radius: 999px;
  font-size:14.5px; font-weight:600; letter-spacing:.2px;
  border:1.5px solid transparent;
  transition: all .35s var(--ease);
}
.btn svg{ width:16px; height:16px; transition: transform .35s var(--ease); flex-shrink:0; }
.btn:hover svg{ transform: translateX(4px); }
.btn-primary{ background: var(--ink); color: var(--paper); }
.btn-primary:hover{ background: var(--rust); }
.btn-outline{ border-color: var(--line-strong); color: var(--ink); background:transparent; }
.btn-outline:hover{ border-color: var(--ink); background: var(--ink); color: var(--paper); }
.btn-light{ background: var(--paper); color: var(--ink); }
.btn-light:hover{ background: var(--rust); color:#fff; }
.btn-sm{ padding: 10px 18px; font-size:13px; }

.pill-tag{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--white); border:1px solid var(--line);
  padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:600;
  color: var(--ink-soft);
}

/* reveal-on-scroll */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-stagger > *{ transition-delay: calc(var(--i,0) * 90ms); }

/* ---------- topbar ---------- */
.topbar{
  background: var(--ink); color: rgba(248,245,236,.75);
  font-size: 13px;
}
.topbar .container{ display:flex; align-items:center; justify-content:space-between; padding-top:10px; padding-bottom:10px; gap:20px; }
.topbar-info{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.topbar-info a{ color: rgba(248,245,236,.85); display:inline-flex; align-items:center; gap:8px; transition: color .25s; }
.topbar-info a:hover{ color:#fff; }
.topbar-info svg{ width:14px; height:14px; opacity:.8; }
.topbar-cac{ letter-spacing:.5px; font-weight:600; color:#e7c8a8; }

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index:200;
  background: rgba(248,245,236,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom:1px solid transparent;
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.site-header.scrolled{ border-color: var(--line); box-shadow: var(--shadow-sm); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:14px; padding-bottom:14px; min-width:0; }
.brand{ min-width:0; }
.header-actions{ min-width:0; flex-shrink:0; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:52px; width:auto; }

.main-nav{ display:flex; align-items:center; gap:2px; }
.main-nav > li{ position:relative; }
.main-nav > li > a{
  display:flex; align-items:center; gap:6px;
  padding: 12px 16px; font-size:14.5px; font-weight:600; color: var(--ink);
  border-radius: 999px; transition: background .25s, color .25s;
}
.main-nav > li > a:hover, .main-nav > li.open > a{ background: var(--paper-deep); color: var(--rust); }
.main-nav > li > a svg{ width:10px; height:10px; transition: transform .25s; }
.main-nav > li.has-drop:hover > a svg, .main-nav > li.open > a svg{ transform: rotate(180deg); }

.dropdown{
  position:absolute; top: calc(100% + 6px); left:0; min-width:240px;
  background: var(--white); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); border:1px solid var(--line);
  padding:8px; opacity:0; visibility:hidden; transform: translateY(8px);
  transition: all .25s var(--ease);
}
.main-nav > li.has-drop:hover .dropdown{ opacity:1; visibility:visible; transform:none; }
.dropdown li a{ display:block; padding:11px 14px; border-radius:8px; font-size:14px; color:var(--ink-soft); }
.dropdown li a:hover{ background: var(--paper-alt); color: var(--rust); }

.header-actions{ display:flex; align-items:center; gap:14px; }
.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px;
}
.nav-toggle span{ width:22px; height:2px; background: var(--ink); border-radius:2px; transition: all .3s var(--ease); }

/* ---------- hero ---------- */
.hero{ position:relative; padding: clamp(48px,7vw,90px) 0 clamp(70px,8vw,120px); overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:-10% -10% auto -10%; height:70%;
  background: radial-gradient(60% 60% at 30% 0%, rgba(184,72,31,.10), transparent 70%);
  pointer-events:none;
}
.hero-grid{ position:relative; display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items:center; }
.hero-grid > *{ min-width:0; }
.hero-copy h1{ font-size: clamp(40px, 5.4vw, 74px); letter-spacing:-.5px; }
.hero-copy h1 em{ font-style: italic; color: var(--rust); }
.hero-copy p.lead{ margin-top:22px; font-size:18px; line-height:1.7; color: var(--ink-soft); max-width:480px; }
.hero-cta{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.hero-meta{ display:flex; gap:34px; margin-top:48px; padding-top:28px; border-top:1px solid var(--line); flex-wrap:wrap; }
.hero-meta div b{ display:block; font-family:var(--ff-display); font-size:22px; color:var(--ink); }
.hero-meta div span{ font-size:12.5px; color: var(--ink-faint); text-transform:uppercase; letter-spacing:1.5px; }

.hero-visual{ position:relative; }
.hero-visual .frame{
  border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg);
  aspect-ratio: 4/4.6; position:relative;
}
.hero-visual .frame img{ width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--ease); }
.hero-visual:hover .frame img{ transform: scale(1.05); }
.hero-float{
  position:absolute; left:-40px; bottom:-36px; width:230px;
  background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding:18px; display:flex; gap:12px; align-items:center; border:1px solid var(--line);
}
.hero-float img{ width:56px; height:56px; border-radius:12px; object-fit:cover; flex-shrink:0; }
.hero-float b{ display:block; font-size:14px; font-family: var(--ff-display); }
.hero-float span{ font-size:12px; color: var(--ink-faint); }
.hero-badge{
  position:absolute; top:24px; right:24px; background: var(--forest); color:#fff;
  padding:10px 16px; border-radius:999px; font-size:12.5px; font-weight:600; letter-spacing:.4px;
  box-shadow: var(--shadow-sm);
}

/* ---------- marquee strip ---------- */
.strip{ background: var(--ink); overflow:hidden; padding:16px 0; }
.strip-track{ display:flex; gap:56px; white-space:nowrap; animation: scroll-strip 32s linear infinite; width:max-content; }
.strip-track span{ color: rgba(248,245,236,.55); font-size:14px; letter-spacing:2px; text-transform:uppercase; display:flex; align-items:center; gap:56px; }
.strip-track span b{ color:#e7c8a8; font-weight:600; }
@keyframes scroll-strip{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- about ---------- */
.about-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap:64px; align-items:center; }
.about-grid > *{ min-width:0; }
.about-media{ position:relative; }
.about-media img{ border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width:100%; aspect-ratio:1/1.05; object-fit:cover; }
.about-media .about-tag{
  position:absolute; bottom:-28px; right:-28px; background: var(--rust); color:#fff;
  width:150px; height:150px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  text-align:center; font-family:var(--ff-display); font-size:15px; line-height:1.3; padding:14px;
  box-shadow: var(--shadow-md); transform: rotate(-6deg);
}
.about-copy p.body{ font-size:16.5px; line-height:1.8; color: var(--ink-soft); margin-top:18px; }
.value-cards{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:36px; }
.value-card{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius-md); padding:22px; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.value-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.value-card h4{ font-size:16px; margin-bottom:8px; }
.value-card p{ font-size:13.8px; color: var(--ink-soft); line-height:1.6; }

/* ---------- core values ---------- */
.values{ background: var(--paper); }
.values-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap:16px; }
.values-grid .value-card{ text-align:left; }
.values-grid .service-icon{ margin-bottom:16px; }

/* ---------- services ---------- */
.services{ background: var(--paper-alt); }
.service-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap:18px; }
.service-card{
  background: var(--white); border-radius: var(--radius-md); padding:28px 22px;
  border:1px solid var(--line); transition: all .4s var(--ease); position:relative; overflow:hidden;
}
.service-card:hover{ background: var(--ink); transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.service-card:hover h3, .service-card:hover p{ color: var(--paper); }
.service-card:hover .service-num{ color: rgba(248,245,236,.25); }
.service-card:hover .service-icon{ background: var(--rust); color:#fff; }
.service-num{ font-family: var(--ff-display); font-size:34px; color: var(--paper-deep); transition: color .4s; }
.service-icon{
  width:46px; height:46px; border-radius:12px; background: var(--paper-alt); color: var(--rust);
  display:flex; align-items:center; justify-content:center; margin:14px 0 18px; transition: all .4s;
}
.service-icon svg{ width:22px; height:22px; }
.service-card h3{ font-size:18px; margin-bottom:10px; transition: color .4s; }
.service-card p{ font-size:13.8px; color: var(--ink-soft); line-height:1.6; transition: color .4s; }
.service-card .arrow-link{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:13px; font-weight:600; color: var(--rust); }
.service-card:hover .arrow-link{ color:#e7c8a8; }

/* ---------- projects ---------- */
.project-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
.project-card{ border-radius: var(--radius-md); overflow:hidden; background: var(--white); box-shadow: var(--shadow-sm); transition: box-shadow .4s var(--ease), transform .4s var(--ease); }
.project-card:hover{ box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.project-media{ position:relative; aspect-ratio: 4/3; overflow:hidden; }
.project-media img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.project-card:hover .project-media img{ transform: scale(1.08); }
.project-price{
  position:absolute; top:16px; left:16px; background: rgba(23,21,15,.85); backdrop-filter: blur(6px);
  color:#fff; padding:8px 14px; border-radius:999px; font-size:13px; font-weight:600;
}
.project-status{
  position:absolute; top:16px; right:16px; background: var(--forest); color:#fff;
  padding:6px 12px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.4px; text-transform:uppercase;
}
.project-body{ padding:22px; }
.project-body h3{ font-size:19px; margin-bottom:8px; }
.project-loc{ display:flex; align-items:center; gap:6px; font-size:13.5px; color: var(--ink-faint); margin-bottom:16px; }
.project-loc svg{ width:14px; height:14px; color: var(--rust); }
.project-body .arrow-link{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color: var(--ink); padding-top:14px; border-top:1px solid var(--line); width:100%; }
.project-body .arrow-link svg{ width:15px; height:15px; transition: transform .3s; }
.project-card:hover .arrow-link svg{ transform: translateX(5px); color: var(--rust); }

/* ---------- why choose (dark) ---------- */
.why{ background: var(--ink); color: var(--paper); position:relative; overflow:hidden; }
.why::after{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image: radial-gradient(1px 1px at 20px 20px, rgba(248,245,236,.15) 1px, transparent 0);
  background-size: 34px 34px; pointer-events:none;
}
.why-grid{ position:relative; display:grid; grid-template-columns: 0.8fr 1.2fr; gap:60px; }
.why-grid > *{ min-width:0; }
.why-head h2{ color:#fff; font-size: clamp(30px,4vw,44px); }
.why-head p{ margin-top:18px; color: rgba(248,245,236,.65); line-height:1.7; font-size:16px; }
.why-list{ display:grid; gap:0; }
.why-item{ display:grid; grid-template-columns:64px 1fr; gap:20px; padding:26px 0; border-top:1px solid rgba(248,245,236,.14); }
.why-item:last-child{ border-bottom:1px solid rgba(248,245,236,.14); }
.why-item .num{ font-family: var(--ff-display); font-size:26px; color:#e7c8a8; }
.why-item h4{ color:#fff; font-size:18px; margin-bottom:8px; }
.why-item p{ color: rgba(248,245,236,.62); font-size:14.5px; line-height:1.7; }

/* ---------- testimonials ---------- */
.testi-wrap{ position:relative; }
.testi-track{
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type: x mandatory; padding-bottom:8px;
  scrollbar-width:none;
}
.testi-track::-webkit-scrollbar{ display:none; }
.testi-card{
  scroll-snap-align:start; flex:0 0 auto; width:min(560px,86vw);
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding:40px; position:relative;
}
.testi-quote{ font-family: var(--ff-display); font-size:44px; color: var(--paper-deep); line-height:1; }
.testi-card p.msg{ font-size:17px; line-height:1.75; color: var(--ink); margin-top:8px; }
.testi-person{ display:flex; align-items:center; gap:14px; margin-top:26px; }
.testi-avatar{ width:48px; height:48px; border-radius:50%; background: var(--paper-deep); display:flex; align-items:center; justify-content:center; font-family:var(--ff-display); font-weight:600; color:var(--rust); }
.testi-person b{ display:block; font-size:15px; }
.testi-person span{ font-size:12.5px; color: var(--ink-faint); }
.testi-nav{ display:flex; gap:12px; margin-top:30px; justify-content:center; }
.testi-nav button{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong); background:var(--white);
  display:flex; align-items:center; justify-content:center; transition: all .3s;
}
.testi-nav button:hover{ background: var(--ink); border-color:var(--ink); color:#fff; }
.testi-nav button svg{ width:16px; height:16px; }

/* ---------- cta banner ---------- */
.cta-banner{
  background: linear-gradient(120deg, var(--forest), #1f3226);
  border-radius: var(--radius-lg); padding: clamp(40px,6vw,72px); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.cta-banner::before{
  content:""; position:absolute; width:420px; height:420px; border-radius:50%;
  background: rgba(184,72,31,.35); filter:blur(60px); top:-160px; right:-120px;
}
.cta-banner h2{ color:#fff; font-size: clamp(26px,3.4vw,38px); max-width:520px; position:relative; }
.cta-banner p{ color: rgba(248,245,236,.7); margin-top:12px; max-width:460px; position:relative; }
.cta-banner .btn-primary{ background:#fff; color: var(--ink); position:relative; }
.cta-banner .btn-primary:hover{ background: var(--rust); color:#fff; }

/* ---------- footer ---------- */
.site-footer{ background: var(--ink); color: rgba(248,245,236,.7); padding-top: clamp(56px,7vw,96px); }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 0.8fr 0.8fr 1.1fr; gap:48px; padding-bottom:56px; border-bottom:1px solid rgba(248,245,236,.12); }
.footer-brand img{ height:50px; margin-bottom:18px; filter: brightness(0) invert(1); opacity:.92; }
.footer-brand p{ font-size:14px; line-height:1.75; color: rgba(248,245,236,.55); max-width:300px; }
.footer-rc{ margin-top:16px; display:inline-flex; }
.footer-col h5{ color:#fff; font-family: var(--ff-display); font-size:16px; margin-bottom:20px; font-weight:600; }
.footer-col ul li{ margin-bottom:12px; }
.footer-col ul li a{ font-size:14px; color: rgba(248,245,236,.6); transition: color .25s; }
.footer-col ul li a:hover{ color:#e7c8a8; }
.footer-contact li{ display:flex; gap:10px; font-size:14px; color: rgba(248,245,236,.6); align-items:flex-start; }
.footer-contact svg{ width:16px; height:16px; color:#e7c8a8; flex-shrink:0; margin-top:2px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:24px 0; font-size:13px; color: rgba(248,245,236,.45); flex-wrap:wrap; gap:10px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px){
  .service-grid{ grid-template-columns: repeat(3,1fr); }
  .values-grid{ grid-template-columns: repeat(3,1fr); }
  .why-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
  .about-grid{ grid-template-columns:1fr; }
  .value-cards{ grid-template-columns: 1fr 1fr; }
  .values-grid{ grid-template-columns: 1fr 1fr; }
  .project-grid{ grid-template-columns:1fr 1fr; }
  .topbar-info{ display:none; }
}
@media (max-width: 760px){
  .main-nav{ position:fixed; inset:0 0 0 auto; width:min(320px,86vw); height:100vh; background: var(--paper);
    flex-direction:column; align-items:stretch; padding:100px 26px 26px; gap:6px; box-shadow: var(--shadow-lg);
    transform: translateX(100%); transition: transform .4s var(--ease); overflow-y:auto; z-index:120; }
  .main-nav.open{ transform:none; }
  .main-nav > li > a{ padding:14px 10px; width:100%; }
  .dropdown{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; display:none; margin-left:10px; }
  .main-nav > li.open .dropdown{ display:block; }
  .nav-toggle{ display:flex; }
  .header-actions .btn-outline{ display:none; }
  .service-grid{ grid-template-columns: 1fr 1fr; }
  .value-cards{ grid-template-columns: 1fr; }
  .values-grid{ grid-template-columns: 1fr; }
  .project-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .hero-float{ position:static; width:100%; margin-top:16px; box-sizing:border-box; }
  .about-media .about-tag{ display:none; }
  .brand img{ height:38px; }
  .header-actions{ gap:8px; }
  .header-actions .btn-primary{ padding:9px 14px; font-size:12.5px; gap:6px; }
  .header-actions .btn-primary svg{ width:13px; height:13px; }
}
.nav-open-lock{ overflow:hidden; }
.nav-scrim{ position:fixed; inset:0; background:rgba(23,21,15,.4); opacity:0; visibility:hidden; transition:opacity .3s; z-index:110; }
.nav-scrim.show{ opacity:1; visibility:visible; }

/* ============ INTERIOR PAGES ============ */

/* page banner */
.page-hero{ position:relative; background: var(--ink); color:#fff; padding: 64px 0 56px; overflow:hidden; }
.page-hero .container{ position:relative; }
.page-hero-bg{ position:absolute; inset:0; }
.page-hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:.28; }
.page-hero-bg::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(23,21,15,.55), var(--ink) 92%); }
.breadcrumb{ position:relative; display:flex; align-items:center; gap:8px; font-size:13px; color: rgba(248,245,236,.6); margin-bottom:18px; }
.breadcrumb a{ color: rgba(248,245,236,.85); }
.breadcrumb a:hover{ color:#e7c8a8; }
.page-hero h1{ position:relative; color:#fff; font-size: clamp(32px,4.4vw,54px); max-width:760px; }
.page-hero p.lead{ position:relative; color: rgba(248,245,236,.68); margin-top:16px; max-width:600px; font-size:16.5px; line-height:1.7; }
.page-hero-meta{ position:relative; display:flex; gap:28px; margin-top:28px; flex-wrap:wrap; }
.page-hero-meta div{ display:flex; align-items:center; gap:8px; font-size:13.5px; color: rgba(248,245,236,.75); }
.page-hero-meta svg{ width:16px; height:16px; color:#e7c8a8; flex-shrink:0; }
.page-hero .pill-tag{ position:relative; background: rgba(248,245,236,.1); border-color: rgba(248,245,236,.2); color:#e7c8a8; }

/* generic two-col content block */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap:64px; align-items:center; }
.split > *{ min-width:0; }
.split img{ border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width:100%; aspect-ratio:6/5; object-fit:cover; }
.split .body{ color: var(--ink-soft); line-height:1.8; font-size:16.5px; margin-top:16px; }
.split .body + .body{ margin-top:12px; }

/* approach / process grid (6-up) */
.approach-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.approach-card{ padding:28px; border-radius: var(--radius-md); background: var(--white); border:1px solid var(--line); transition: all .35s var(--ease); }
.approach-card:hover{ transform:translateY(-6px); box-shadow: var(--shadow-md); }
.approach-card .num{ font-family:var(--ff-display); font-size:28px; color: var(--paper-deep); }
.approach-card h4{ font-size:17px; margin:12px 0 8px; }
.approach-card p{ font-size:14px; color: var(--ink-soft); line-height:1.65; }

/* team */
.team-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:28px; }
.team-card{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius-lg); padding:36px; transition: all .35s var(--ease); }
.team-card:hover{ box-shadow: var(--shadow-md); transform:translateY(-4px); }
.team-avatar{
  width:74px; height:74px; border-radius:50%; background: var(--ink); color:#e7c8a8;
  display:flex; align-items:center; justify-content:center; font-family:var(--ff-display); font-size:26px; margin-bottom:20px;
}
.team-card h3{ font-size:21px; margin-bottom:4px; }
.team-role{ color: var(--rust); font-size:13.5px; font-weight:600; text-transform:uppercase; letter-spacing:1px; margin-bottom:16px; }
.team-card .body{ font-size:14.5px; color: var(--ink-soft); line-height:1.75; }
.team-card .body + .body{ margin-top:12px; }

/* property / project detail */
.spec-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap:1px; background: var(--line); border:1px solid var(--line); border-radius: var(--radius-md); overflow:hidden; }
.spec-item{ background: var(--white); padding:22px; }
.spec-item span{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:1px; color: var(--ink-faint); margin-bottom:8px; }
.spec-item b{ font-family: var(--ff-display); font-size:20px; color: var(--ink); }

.price-tiers{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.price-card{ background: var(--ink); color:#fff; border-radius: var(--radius-md); padding:28px; text-align:center; }
.price-card span{ font-size:12.5px; text-transform:uppercase; letter-spacing:1.5px; color:#e7c8a8; }
.price-card b{ display:block; font-family: var(--ff-display); font-size:30px; margin-top:10px; }

.landmark-list{ display:grid; grid-template-columns: repeat(2,1fr); gap:14px 28px; }
.landmark-list li{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color: var(--ink-soft); line-height:1.6; }
.landmark-list svg{ width:18px; height:18px; color: var(--rust); flex-shrink:0; margin-top:2px; }

/* gallery */
.gallery-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.gallery-grid img{ width:100%; height:220px; object-fit:cover; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: transform .4s var(--ease); }
.gallery-grid img:hover{ transform: scale(1.03); }
.gallery-grid .wide{ grid-column: span 2; }

/* returns table */
.returns-table{ width:100%; border-collapse:collapse; background: var(--white); border-radius: var(--radius-md); overflow:hidden; border:1px solid var(--line); }
.returns-table th, .returns-table td{ padding:14px 18px; text-align:left; font-size:14px; border-bottom:1px solid var(--line); }
.returns-table th{ background: var(--ink); color:#fff; font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.8px; }
.returns-table tr:last-child td{ border-bottom:none; }
.returns-table td.total{ font-weight:700; color: var(--rust); }
.returns-table tr.total-row td{ background: var(--paper-alt); font-weight:700; }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius: var(--radius-md); }
.phase-badge{ display:inline-flex; align-items:center; gap:8px; background: var(--forest); color:#fff; font-size:12.5px; font-weight:600; letter-spacing:.5px; padding:6px 16px; border-radius:999px; margin-bottom:14px; }

@media (max-width: 900px){
  .gallery-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .gallery-grid{ grid-template-columns: 1fr; }
  .gallery-grid .wide{ grid-column: span 1; }
}

.reasons-list{ display:grid; gap:16px; }
.reasons-list li{ display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-top:1px solid var(--line); }
.reasons-list li:last-child{ border-bottom:1px solid var(--line); }
.reasons-list .num{ font-family:var(--ff-display); font-size:22px; color: var(--rust); flex-shrink:0; width:34px; }
.reasons-list p{ color: var(--ink-soft); font-size:15px; line-height:1.7; }

/* service detail */
.process-steps{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; }
.process-step{ position:relative; padding:26px 22px; background: var(--white); border:1px solid var(--line); border-radius: var(--radius-md); }
.process-step .num{ font-family: var(--ff-display); font-size:30px; color: var(--rust); }
.process-step h4{ font-size:15.5px; margin:12px 0 6px; }
.process-step p{ font-size:13.5px; color: var(--ink-soft); line-height:1.6; }

.feature-list{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:22px; }
.feature-list li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color: var(--ink-soft); line-height:1.6; }
.feature-list svg{ width:18px; height:18px; color: var(--forest); flex-shrink:0; margin-top:2px; }

.related-services{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.related-card{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius-md); padding:22px; transition: all .3s; }
.related-card:hover{ background: var(--ink); }
.related-card:hover span, .related-card:hover b{ color:#fff; }
.related-card span{ font-size:11.5px; text-transform:uppercase; letter-spacing:1.5px; color: var(--ink-faint); }
.related-card b{ display:block; font-family:var(--ff-display); font-size:16px; margin-top:8px; color: var(--ink); }

/* contact page */
.contact-grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap:56px; align-items:start; }
.contact-grid > *{ min-width:0; }
.contact-info-card{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius-lg); padding:32px; margin-bottom:16px; }
.contact-info-card h4{ font-size:15px; margin-bottom:6px; }
.contact-info-card p, .contact-info-card a{ font-size:14.5px; color: var(--ink-soft); line-height:1.7; }
.contact-info-card svg{ width:22px; height:22px; color: var(--rust); margin-bottom:14px; }

.form-card{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius-lg); padding:40px; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-bottom:16px; }
.form-row.full{ grid-template-columns: 1fr; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color: var(--ink-faint); }
.field input, .field select, .field textarea{
  border:1.5px solid var(--line); border-radius:10px; padding:13px 15px; font-family:inherit; font-size:14.5px;
  color:var(--ink); background: var(--paper); transition: border-color .25s;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--rust); }
.field textarea{ resize:vertical; min-height:120px; }

/* general helpers */
.tag-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.divider-line{ height:1px; background: var(--line); margin: 48px 0; }

@media (max-width: 1080px){
  .approach-grid{ grid-template-columns: repeat(2,1fr); }
  .process-steps{ grid-template-columns: repeat(2,1fr); }
  .related-services{ grid-template-columns: repeat(2,1fr); }
  .price-tiers{ grid-template-columns: 1fr; }
}
@media (max-width: 900px){
  .split{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:1fr; }
  .landmark-list{ grid-template-columns:1fr; }
  .feature-list{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  .approach-grid{ grid-template-columns:1fr; }
  .process-steps{ grid-template-columns:1fr; }
  .related-services{ grid-template-columns:1fr; }
  .spec-grid{ grid-template-columns: 1fr 1fr; }
  .form-row{ grid-template-columns:1fr; }
}