/* ============ Base & Design Tokens ============ */
:root{
  --walnut:#4B352A; --walnut-600:#3D2B22; --walnut-700:#2E211A;
  --beige:#F8F5F2; --beige-2:#EFE8E0;
  --copper:#C87B43; --copper-2:#DE9761; --copper-light:#F4DCC4;
  --forest:#2D6A4F; --forest-600:#245740;
  --charcoal:#2A2A2A;
  --border:#E9E1D8;
  --shadow-luxe: 0 30px 80px -30px rgba(75,53,42,.35);
  --shadow-sm:  0 10px 30px -12px rgba(75,53,42,.18);
  --shadow-copper: 0 20px 45px -20px rgba(200,123,67,.55);
  --header-h: 132px; /* urgency 34 + nav 78 (approx) */
  --nav-h: 78px;
  --urg-h: 40px;
  --radius: 20px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--charcoal);
  background: #fff;
  line-height:1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
button, select, input, textarea{ font-family: inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
em{ font-style: italic; }

.container{ max-width: 1280px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 768px){ .container{ padding: 0 20px; } }

.eyebrow{
  font-size: 11px; letter-spacing:.28em; text-transform: uppercase; color: var(--copper);
  font-weight: 500;
}
.eyebrow.copper-light{ color: #E9B98A; }

.section-title{
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500; font-size: clamp(38px, 5vw, 62px); line-height:1;
  color: var(--walnut); margin: 12px 0 0;
  letter-spacing:-.01em;
}
.section-title em{ font-style: italic; color: var(--walnut); }
.section-title.white{ color:#fff; }
.section-title.white em{ color:#fff; }
.section-sub{ color: rgba(42,42,42,.7); margin-top: 16px; font-size: 16px; }

.divider{
  height:1px; width: 96px; margin: 32px 0;
  background: linear-gradient(90deg, transparent, rgba(75,53,42,.35), transparent);
}
.divider.dark{ background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); }

.section-head{ display:flex; align-items:flex-end; justify-content: space-between; gap: 24px; margin-bottom: 56px; flex-wrap:wrap; }
.section-head.center{ display:block; text-align:center; max-width: 720px; margin: 0 auto 72px; }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px; color: var(--walnut); font-size:14px;
  transition: color .3s;
}
.link-arrow:hover{ color: var(--copper); }
.link-arrow i{ transition: transform .3s; }
.link-arrow:hover i{ transform: rotate(45deg); }


.brand-logo {
  height: 60px;
  width: auto;
  display: block;
}


/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height: 46px; padding: 0 22px; border-radius: 10px;
  font-weight: 600; font-size: 14px; letter-spacing:.01em;
  border: none; cursor: pointer; transition: all .3s cubic-bezier(.22,1,.36,1);
  white-space: nowrap;
}
.btn.btn-lg{ height: 56px; padding: 0 30px; font-size: 15px; }
.btn.full{ width: 100%; }
.btn.grow{ flex: 2; }
.btn-round{ border-radius: 999px; }

.btn-forest{ background: var(--forest); color:#fff; border-radius: 999px; }
.btn-forest:hover{ background: var(--forest-600); box-shadow: var(--shadow-copper); transform: translateY(-2px); }

.btn-copper{ background: var(--copper); color:#fff; border-radius: 999px; }
.btn-copper:hover{ background: #a56333; box-shadow: var(--shadow-copper); transform: translateY(-2px); }

.btn-walnut{ background: var(--walnut); color:#fff; border-radius: 999px; }
.btn-walnut:hover{ background: var(--walnut-600); transform: translateY(-2px); }

.btn-ghost{ background: transparent; color:#fff; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; }
.btn-ghost:hover{ background: rgba(255,255,255,.08); }

.btn-outline-walnut{
  background:#fff; color: var(--walnut); border: 1px solid rgba(75,53,42,.2); border-radius: 999px; height:46px; padding: 0 22px;
}
.btn-outline-walnut:hover{ border-color: var(--walnut); background: var(--beige); }

/* ============ Icons (inline SVG injected by JS) ============ */
[class^="icon-"], [class*=" icon-"]{
  display: inline-flex; align-items: center; justify-content: center;
  width: 1em; height: 1em; line-height: 1; flex-shrink: 0;
  color: currentColor;
  vertical-align: -0.125em;
}
[class^="icon-"] svg, [class*=" icon-"] svg{
  width: 100%; height: 100%; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.icon-star svg{ fill: currentColor; stroke-width: 1; }

/* ============ Header (stacked, fixed) ============ */
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  transition: box-shadow .4s, transform .4s;
}
.urgency-bar{
  background: var(--forest); color:#fff; text-align: center; font-size: 12px; letter-spacing:.02em;
  padding: 10px 20px; position: relative; z-index: 1;
  transition: max-height .5s, padding .5s, opacity .5s;
  overflow: hidden;
}
.urgency-bar .urg-inner{ display:inline-flex; align-items:center; gap: 10px; }
.urgency-bar i{ color: #F4DCC4; font-size: 14px; }
.urgency-bar a{ text-decoration: underline; text-underline-offset: 3px; }
.site-header.scrolled .urgency-bar{ max-height: 0; padding: 0; opacity: 0; }

.main-nav{
  background: transparent; transition: background .4s, backdrop-filter .4s, border-color .4s, box-shadow .4s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled .main-nav{
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(75,53,42,.08);
  box-shadow: var(--shadow-sm);
}
.nav-inner{
  display:flex; align-items:center; justify-content: space-between; height: 78px;
}
.brand{ display:flex; align-items:center; gap: 10px; }
.brand-mark{
  width: 40px; height: 40px; border-radius: 12px; background: var(--walnut); color: var(--beige);
  display:flex; align-items:center; justify-content:center;
  font-family: 'Cormorant Garamond', serif; font-size: 20px;
}
.brand-mark.light{ background: var(--beige); color: var(--walnut); }
.brand-text{ display:flex; flex-direction: column; line-height:1; }
.brand-title{ font-family: 'Cormorant Garamond', serif; font-size: 22px; color:#fff; text-shadow: 0 1px 3px rgba(0,0,0,.3); }
.brand-sub{ font-size: 10px; letter-spacing:.3em; color: rgba(255,255,255,.85); margin-top: 4px; }
.brand-title.light{ color: var(--beige); }
.brand-sub.light{ color: rgba(248,245,242,.5); }

.site-header.scrolled .brand-title{ color: var(--walnut); text-shadow:none; }
.site-header.scrolled .brand-sub{ color: rgba(75,53,42,.6); }

.nav-links{ display:flex; gap: 28px; list-style:none; margin:0; padding:0; }
.nav-links a{
  font-size: 13.5px; font-weight: 500; color:#fff; letter-spacing:.02em;
  text-shadow: 0 1px 3px rgba(0,0,0,.3); transition: color .3s;
}
.nav-links a:hover{ color: var(--copper-light); }
.site-header.scrolled .nav-links a{ color: var(--charcoal); text-shadow: none; }
.site-header.scrolled .nav-links a:hover{ color: var(--copper); }

.nav-right{ display:flex; align-items:center; gap: 16px; }
.nav-phone{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#fff; text-shadow: 0 1px 3px rgba(0,0,0,.3); }
.site-header.scrolled .nav-phone{ color: var(--walnut); text-shadow:none; }

.nav-toggle{
  display:none; width: 42px; height: 42px; background: transparent; border: 1px solid rgba(255,255,255,.4); border-radius: 12px;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer;
}
.nav-toggle span{ display:block; width: 18px; height: 1.5px; background:#fff; }
.site-header.scrolled .nav-toggle{ border-color: rgba(75,53,42,.25); }
.site-header.scrolled .nav-toggle span{ background: var(--walnut); }

@media (max-width: 1024px){
  .nav-links{
    position: absolute; top: 78px; right: 20px; left: 20px;
    background:#fff; box-shadow: var(--shadow-luxe); border-radius: 16px; padding: 20px;
    flex-direction: column; gap: 8px;
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ color: var(--charcoal); text-shadow:none; padding: 8px 0; }
  .nav-toggle{ display:flex; }
  .nav-phone, .nav-right .btn{ display:none; }
}

/* ============ HERO ============ */
.hero{
  position: relative; min-height: 100vh; overflow: hidden;
  padding-top: calc(var(--nav-h) + var(--urg-h) + 60px);
  padding-bottom: 120px;
  background: var(--walnut);
  color: #fff;
}
.hero-bg{ position: absolute; inset: 0; z-index: 0; }
.hero-bg img{ width: 100%; height: 115%; object-fit: cover; will-change: transform; }
.hero-overlay{
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(75,53,42,.85), rgba(75,53,42,.55) 45%, rgba(75,53,42,.05) 80%),
    linear-gradient(180deg, rgba(75,53,42,.3), transparent 30%, rgba(75,53,42,.75));
}
.hero-content{
  position: relative; z-index: 2; max-width: 900px;
}
.hero-badge{
  display:inline-flex; align-items:center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  background: rgba(30,20,15,.45); backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 11px; letter-spacing:.28em; text-transform: uppercase; color: var(--beige);
}
.hero-badge i{ color: var(--copper-light); font-size: 13px; }

.hero-title{
  font-family: 'Cormorant Garamond', serif; font-weight: 500;
  font-size: clamp(56px, 8vw, 92px); line-height: .95; margin: 24px 0 0;
  letter-spacing:-.015em; color:#fff;
}
.hero-title em{ color: var(--copper-light); font-style: italic; }

.hero-sub{
  max-width: 560px; font-size: 17px; line-height: 1.6; margin: 28px 0 0; color: rgba(248,245,242,.85);
}

.hero-ctas{ margin-top: 40px; display:flex; gap: 20px; align-items:center; flex-wrap: wrap; }
.btn-play{ display:inline-flex; align-items:center; gap: 14px; color: #fff; font-size: 14px; letter-spacing:.02em; }
.play-circle{
  width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4);
  display:inline-flex; align-items:center; justify-content:center;
  transition: background .3s, border-color .3s;
}
.play-circle i{ color: #fff; font-size: 16px; }
.btn-play:hover .play-circle{ background: rgba(255,255,255,.1); border-color: #fff; }

.hero-stats{
  margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; max-width: 640px;
}
.stat-card{
  background: rgba(30,20,15,.45); backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 16px 18px;
  transition: transform .3s;
}
.stat-card:hover{ transform: translateY(-4px); }
.stat-k{ font-family: 'Cormorant Garamond', serif; font-size: 30px; color: var(--copper-light); line-height:1; }
.stat-v{ font-size: 11px; letter-spacing:.2em; text-transform: uppercase; color: rgba(248,245,242,.7); margin-top: 8px; }

.hero-corner-cta{
  position: absolute; right: 40px; bottom: 40px; z-index: 3;
  display:flex; align-items:center; gap: 14px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px; padding: 10px 16px 10px 10px;
  box-shadow: var(--shadow-luxe);
  cursor: pointer; transition: transform .3s, box-shadow .3s;
}
.hero-corner-cta:hover{ transform: translateY(-3px); box-shadow: 0 40px 100px -30px rgba(75,53,42,.5); }
.cc-icon{
  width: 44px; height: 44px; border-radius: 50%; background: var(--forest); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.cc-text{ text-align: left; padding-right: 8px; }
.cc-eyebrow{ display:block; font-size: 10px; letter-spacing:.28em; text-transform: uppercase; color: var(--copper); margin-bottom: 2px; }
.cc-title{ font-family: 'Cormorant Garamond', serif; font-size: 17px; color: var(--walnut); line-height: 1.1; display:block; }
.cc-arrow{ color: var(--walnut); font-size: 14px; }
@media (max-width: 640px){ .hero-corner-cta{ display:none; } }

/* ============ Brand Marquee ============ */
.brand-strip{ background: var(--beige); border-top: 1px solid rgba(75,53,42,.05); border-bottom: 1px solid rgba(75,53,42,.05); padding: 44px 0; overflow: hidden; }
.brand-strip-inner{ display:flex; gap: 40px; align-items:center; flex-wrap: nowrap; }
.brand-strip-label{ flex-shrink: 0; width: 220px; }
.brand-strip-title{ font-family: 'Cormorant Garamond', serif; font-size: 26px; color: var(--walnut); margin-top: 6px; }
.marquee-wrap{ position: relative; flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track{
  display: flex; gap: 60px; white-space: nowrap; animation: marquee 30s linear infinite;
  font-family: 'Cormorant Garamond', serif; font-size: 24px; color: rgba(75,53,42,.6);
}
.marquee-track span{ display:inline-flex; align-items: center; gap: 8px; }
.marquee-track span::before{ content:''; width: 6px; height: 6px; border-radius: 50%; background: var(--copper); display:inline-block; }
@keyframes marquee{ to { transform: translateX(-50%); } }

/* ============ WHY WOODBUZZ ============ */
.why{ padding: 140px 0; }
.why-inner{ display:grid; grid-template-columns: 5fr 7fr; gap: 60px; }
.why-left p{ color: rgba(42,42,42,.7); font-size: 16px; max-width: 420px; margin: 0 0 32px; }
.why-right{ position: relative; min-height: 620px; }
.feat{
  background:#fff; border: 1px solid rgba(75,53,42,.1);
  border-radius: 26px; padding: 26px;
  box-shadow: var(--shadow-sm); transition: transform .3s, box-shadow .3s;
  display:flex; gap: 16px; align-items: flex-start;
}
.feat:hover{ transform: translateY(-6px); box-shadow: var(--shadow-luxe); }
.feat-icon{
  width: 48px; height: 48px; border-radius: 14px; background: rgba(200,123,67,.1);
  display:flex; align-items:center; justify-content:center; flex-shrink: 0;
  transition: background .3s, color .3s;
}
.feat-icon i{ color: var(--copper); font-size: 18px; transition: color .3s; }
.feat:hover .feat-icon{ background: var(--copper); }
.feat:hover .feat-icon i{ color:#fff; }
.feat h4{ font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 24px; color: var(--walnut); margin: 0 0 6px; }
.feat p{ font-size: 13.5px; color: rgba(42,42,42,.65); margin: 0; line-height: 1.55; }

@media (min-width: 1024px){
  .feat-1{ position: absolute; top: 0; left: 0; width: 58%; }
  .feat-2{ position: absolute; top: 60px; right: 0; width: 42%; }
  .feat-3{ position: absolute; top: 260px; left: 12px; width: 46%; }
  .feat-4{ position: absolute; top: 280px; right: 20px; width: 48%; }
  .feat-5{ position: absolute; top: 480px; left: 15%; width: 70%; }
}
@media (max-width: 1023px){
  .why-inner{ grid-template-columns: 1fr; }
  .why-right{ min-height: auto; display: grid; gap: 16px; }
}

/* ============ FEATURED SPACES (Magazine) ============ */
.spaces{ padding: 140px 0; background: var(--beige); }
.spaces-grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; grid-auto-rows: 280px;
}
.sp{
  position: relative; overflow: hidden; border-radius: 26px; display:block;
  background:#eee; transition: transform .4s;
}
.sp img{ position:absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22,1,.36,1); }
.sp::after{
  content:''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(75,53,42,.85), rgba(75,53,42,.1) 60%, transparent);
}
.sp:hover img{ transform: scale(1.1); }
.sp:hover{ transform: translateY(-6px); }
.sp-info{
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px; z-index: 2;
  display:flex; align-items: flex-end; justify-content: space-between; gap: 20px;
}
.sp-info h3{ font-family: 'Cormorant Garamond', serif; font-weight: 500; color:#fff; margin: 0; font-size: 26px; line-height: 1.1; }
.sp-info p{ color: rgba(255,255,255,.75); font-size: 13px; margin: 6px 0 0; }
.sp-info::after{
  content:'';
  width: 42px; height: 42px; border-radius: 50%; background:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234B352A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 7h10v10'/><path d='M7 17 17 7'/></svg>");
  background-repeat: no-repeat; background-position: center;
  flex-shrink: 0; transition: background-color .3s;
  opacity: .95;
}
.sp:hover .sp-info::after{
  background-color: var(--copper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 7h10v10'/><path d='M7 17 17 7'/></svg>");
}

.sp-xl{ grid-column: span 2; grid-row: span 2; }
.sp-xl .sp-info h3{ font-size: 46px; }
.sp-md{ grid-column: span 2; grid-row: span 2; }
.sp-sm{ grid-column: span 1; }
.sp-lg{ grid-column: span 2; }
@media (max-width: 900px){
  .spaces-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .sp-xl, .sp-md, .sp-lg{ grid-column: span 2; grid-row: auto; }
  .sp-xl .sp-info h3{ font-size: 36px; }
}

/* ============ PROCESS TIMELINE ============ */
.process{ padding: 140px 0; }
.timeline{ position: relative; }
.timeline-svg{ position:absolute; inset: 0; width: 100%; height: 100px; top: 50%; transform: translateY(-50%); display:none; }
@media (min-width: 900px){ .timeline-svg{ display:block; } }
.timeline-steps{ position: relative; display:grid; grid-template-columns: repeat(7, 1fr); gap: 20px; }
@media (max-width: 900px){ .timeline-steps{ grid-template-columns: repeat(2, 1fr); gap: 40px 20px; } }
.ts{ text-align: center; display:flex; flex-direction: column; align-items: center; }
.ts-icon{
  width: 64px; height: 64px; border-radius: 50%; background: var(--beige);
  border: 1px solid rgba(75,53,42,.1); box-shadow: var(--shadow-sm);
  display:inline-flex; align-items:center; justify-content:center; position: relative;
}
.ts-icon i{ color: var(--copper); font-size: 22px; }
.ts-num{
  position: absolute; top: -10px; right: -10px;
  width: 28px; height: 28px; border-radius: 50%; background: var(--walnut); color:#fff;
  font-family: 'Cormorant Garamond', serif; font-size: 13px;
  display:inline-flex; align-items:center; justify-content:center;
}
.ts h4{ font-family: 'Cormorant Garamond', serif; font-weight: 500; color: var(--walnut); font-size: 20px; margin: 20px 0 6px; }
.ts p{ font-size: 12px; color: rgba(42,42,42,.6); max-width: 140px; margin: 0; }

.ts-icon{ position: relative; }
.ts{ position: relative; }
.ts .ts-num{ position: absolute; top: -10px; right: calc(50% - 42px); }

/* ============ PORTFOLIO ============ */
.portfolio{ padding: 140px 0; background: var(--beige); }
.port-filters{ display:flex; gap: 8px; flex-wrap: wrap; }
.chip{
  padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(75,53,42,.15);
  background:#fff; color: var(--walnut); font-size: 13px; cursor: pointer; transition: all .3s;
}
.chip:hover{ border-color: var(--walnut); }
.chip.active{ background: var(--walnut); color:#fff; border-color: var(--walnut); }
.masonry{
  columns: 3 280px; column-gap: 24px;
}
.mas-item{
  break-inside: avoid; position: relative; overflow: hidden; border-radius: 26px;
  margin-bottom: 24px; box-shadow: var(--shadow-sm);
  transition: transform .3s;
  cursor: pointer;
}
.mas-item img{ width: 100%; height: 280px; object-fit: cover; transition: transform 1s; }
.mas-item.tall img{ height: 420px; }
.mas-item:hover img{ transform: scale(1.08); }
.mas-info{
  position: absolute; inset: 0; padding: 24px;
  background: linear-gradient(to top, rgba(75,53,42,.85), transparent 60%);
  color:#fff; opacity: 0; transition: opacity .4s; display:flex; flex-direction:column; justify-content: flex-end;
}
.mas-item:hover .mas-info{ opacity: 1; }
.mas-e{ font-size: 10px; letter-spacing:.28em; text-transform:uppercase; color: var(--copper-light); }
.mas-info h4{ font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 24px; margin: 6px 0 4px; }
.mas-info span{ font-size: 12px; color: rgba(255,255,255,.75); }

/* ============ BEFORE / AFTER ============ */
.before-after{ padding: 140px 0; background:#fff; }
.ba-wrap{
  position: relative; height: 540px; border-radius: 28px; overflow: hidden;
  box-shadow: var(--shadow-luxe); user-select: none; cursor: ew-resize;
}
.ba-before, .ba-after img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-before{ filter: grayscale(1) contrast(.9); }
.ba-after{ position: absolute; inset: 0; width: 50%; overflow: hidden; }
.ba-after img{ width: calc(100vw); max-width: 1200px; }
.ba-handle{ position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: rgba(255,255,255,.9); }
.ba-knob{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%; background:#fff;
  display:flex; align-items:center; justify-content:center; gap: 2px;
  box-shadow: var(--shadow-luxe);
}
.ba-knob i{ color: var(--walnut); font-size: 14px; }
.ba-tag{
  position: absolute; top: 24px; padding: 6px 14px; border-radius: 999px; font-size: 11px; letter-spacing:.28em; text-transform: uppercase;
}
.ba-tag-l{ left: 24px; background: rgba(255,255,255,.92); color: var(--walnut); }
.ba-tag-r{ right: 24px; background: var(--walnut); color:#fff; }

/* ============ TESTIMONIALS ============ */
.testimonials{ padding: 140px 0; background: var(--beige); }
.testi-head{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 64px; align-items: end; }
@media (max-width: 900px){ .testi-head{ grid-template-columns: 1fr; } }
.rating-badge{ display:flex; align-items:center; gap: 16px; }
.rating-badge .stars i{ color: var(--copper); font-size: 18px; margin-right: 2px; }
.rb-num{ font-family: 'Cormorant Garamond', serif; font-size: 28px; color: var(--walnut); }
.rb-cap{ font-size: 12px; color: rgba(42,42,42,.6); }

.reviews-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px){ .reviews-grid{ grid-template-columns: 1fr; } }
.review{
  background:#fff; border: 1px solid rgba(75,53,42,.08); border-radius: 26px; padding: 30px;
  box-shadow: var(--shadow-sm); transition: transform .3s;
  display:flex; flex-direction:column;
}
.review:hover{ transform: translateY(-6px); }
.review.offset{ transform: translateY(28px); }
.review.offset:hover{ transform: translateY(22px); }
.review-top{ display:flex; align-items:center; gap: 12px; margin-bottom: 20px; }
.review-top img{ width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.review-top h5{ font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 18px; color: var(--walnut); margin: 0; line-height:1.1; }
.review-top span{ font-size: 12px; color: rgba(42,42,42,.6); }
.rev-stars{ margin-left: auto; }
.rev-stars i{ color: var(--copper); font-size: 12px; margin-right: 1px; }
.review p{ font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 18px; line-height: 1.55; color: rgba(42,42,42,.8); margin: 0 0 20px; flex: 1; }
.rev-video{ display:flex; align-items:center; gap: 10px; font-size: 12px; color: rgba(42,42,42,.65); padding-top: 20px; border-top: 1px solid rgba(75,53,42,.08); }
.pv{ width: 30px; height: 30px; border-radius: 50%; background: rgba(45,106,79,.12); display:inline-flex; align-items:center; justify-content:center; }
.pv i{ color: var(--forest); font-size: 12px; }

/* ============ ACHIEVEMENTS ============ */
.achieve{ padding: 96px 0; background: var(--walnut); position: relative; overflow: hidden; color: var(--beige); }
.achieve-blur{ position: absolute; width: 400px; height: 400px; border-radius: 50%; filter: blur(80px); opacity: .3; }
.a1{ top: -100px; left: -100px; background: var(--copper); }
.a2{ bottom: -100px; right: -100px; background: var(--forest); }
.achieve-grid{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 32px; position: relative; z-index: 1; }
@media (max-width: 900px){ .achieve-grid{ grid-template-columns: repeat(2, 1fr); gap: 40px; } }
.ac{ text-align: left; }
@media (max-width: 900px){ .ac{ text-align: center; } }
.ac-num{ font-family: 'Cormorant Garamond', serif; font-size: 60px; color: var(--copper-light); line-height:1; display:inline-block; }
.ac-lab{ font-size: 11px; letter-spacing:.28em; text-transform: uppercase; color: rgba(248,245,242,.7); margin-top: 14px; }

/* ============ PACKAGES ============ */
.packages{ padding: 140px 0; }
.pkg-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
@media (max-width: 900px){ .pkg-grid{ grid-template-columns: 1fr; } }
.pkg{
  background: var(--beige); border: 1px solid rgba(75,53,42,.1);
  border-radius: 28px; padding: 40px 36px; display:flex; flex-direction:column;
  transition: transform .3s;
  position: relative;
}
.pkg:hover{ transform: translateY(-8px); }
.pkg.featured{
  background: var(--walnut); color: var(--beige); border-color: var(--walnut); box-shadow: var(--shadow-luxe);
}
@media (min-width: 900px){
  .pkg.featured{ transform: translateY(-24px); }
  .pkg.featured:hover{ transform: translateY(-32px); }
}
.pkg-badge{
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  background: var(--copper); color:#fff; font-size: 10px; letter-spacing:.28em; text-transform: uppercase;
  padding: 6px 16px; border-radius: 999px;
}
.pkg-tag{ font-size: 11px; letter-spacing:.28em; text-transform: uppercase; color: var(--copper); }
.pkg.featured .pkg-tag{ color: var(--copper-light); }
.pkg h3{ font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 34px; margin: 8px 0 24px; color: var(--walnut); }
.pkg.featured h3{ color:#fff; }
.pkg-from{ font-size: 12px; color: rgba(42,42,42,.6); }
.pkg.featured .pkg-from{ color: rgba(248,245,242,.6); }
.pkg-price{
  font-family: 'Cormorant Garamond', serif; font-size: 46px; color: var(--walnut); line-height:1;
  display:flex; align-items: baseline; gap: 8px;
}
.pkg-price span{ font-size: 14px; font-family: 'Inter', sans-serif; color: rgba(42,42,42,.55); }
.pkg.featured .pkg-price{ color: var(--copper-light); }
.pkg.featured .pkg-price span{ color: rgba(248,245,242,.65); }
.pkg ul{ list-style:none; padding: 0; margin: 0 0 32px; flex: 1; }
.pkg li{ display:flex; gap: 10px; padding: 6px 0; font-size: 14px; color: rgba(42,42,42,.8); }
.pkg li i{ color: var(--forest); font-size: 14px; margin-top: 3px; flex-shrink: 0; }
.pkg.featured li{ color: rgba(248,245,242,.9); }
.pkg.featured li i{ color: var(--copper-light); }

/* ============ DARK CTA ============ */
.dark-cta{ position: relative; overflow: hidden; padding: 140px 0; color:#fff; }
.dc-bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.dc-overlay{
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, rgba(46,33,26,.95), rgba(75,53,42,.85) 55%, rgba(75,53,42,.65));
}
.dc-inner{ position: relative; z-index: 2; display:grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 900px){ .dc-inner{ grid-template-columns: 1fr; } }
.dc-sub{ color: rgba(248,245,242,.75); max-width: 500px; margin-top: 20px; font-size: 16px; }
.dc-actions{ display:flex; flex-direction:column; gap: 12px; }
.dc-actions .btn-lg{ width: 100%; }
.copper-light{ color: #E9B98A !important; }

/* ============ FAQ ============ */
.faq{ padding: 140px 0; background: var(--beige); }
.faq-inner{ display:grid; grid-template-columns: 5fr 7fr; gap: 60px; }
@media (max-width: 900px){ .faq-inner{ grid-template-columns: 1fr; } }
.faq-left p{ color: rgba(42,42,42,.7); max-width: 380px; margin: 24px 0 24px; }
.faq-item{
  background:#fff; border: 1px solid rgba(75,53,42,.08); border-radius: 20px; padding: 4px 26px;
  box-shadow: var(--shadow-sm); margin-bottom: 12px; overflow: hidden;
}
.faq-item summary{
  list-style: none; cursor: pointer;
  display:flex; align-items:center; justify-content: space-between;
  font-family: 'Cormorant Garamond', serif; font-size: 20px; color: var(--walnut); padding: 20px 0;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary i{ transition: transform .3s; color: var(--copper); }
.faq-item[open] summary i{ transform: rotate(45deg); }
.faq-a{ padding: 0 0 22px; color: rgba(42,42,42,.7); font-size: 15px; line-height: 1.6; }

/* ============ SERVICE AREAS ============ */
.areas{ padding: 140px 0; background:#fff; }
.areas-inner{ display:grid; grid-template-columns: 5fr 7fr; gap: 60px; align-items:center; }
@media (max-width: 900px){ .areas-inner{ grid-template-columns: 1fr; } }
.areas p{ color: rgba(42,42,42,.7); max-width: 420px; margin: 20px 0 30px; }
.area-chips{ display:flex; flex-wrap: wrap; gap: 10px; }
.chip-area{
  display:inline-flex; align-items:center; gap: 6px; padding: 9px 16px; border-radius: 999px;
  background: var(--beige); border: 1px solid rgba(75,53,42,.1); color: var(--walnut); font-size: 13px;
}
.chip-area i{ color: var(--copper); font-size: 12px; }
.areas-map{ position: relative; border-radius: 26px; overflow: hidden; box-shadow: var(--shadow-luxe); border: 1px solid rgba(75,53,42,.1); }
.areas-map iframe{ width: 100%; height: 460px; border: 0; filter: grayscale(35%) contrast(1.05); }
.map-badge{
  position: absolute; top: 22px; left: 22px; padding: 12px 18px; border-radius: 18px;
  background: rgba(255,255,255,.85); backdrop-filter: blur(14px);
}
.mb-city{ font-family: 'Cormorant Garamond', serif; font-size: 18px; color: var(--walnut); }

/* ============ FOOTER ============ */
.site-footer{ background: var(--walnut-700); color: rgba(248,245,242,.8); padding: 100px 0 24px; }
.footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 40px; }
/* Mobile Only */
@media (max-width: 768px){

    .footer-grid{
        grid-template-columns:1fr;
        gap:32px;
    }

    /* Keep newsletter first */
    .foot-brand{
        order:1;
    }

    /* Company below newsletter */
    .footer-grid .foot-col:nth-child(2){
        order:2;
    }

    /* Services below company */
    .footer-grid .foot-col:nth-child(3){
        order:3;
    }

    /* Contact at last */
    .footer-grid .foot-col:nth-child(4){
        order:4;
    }

    .foot-col{
        width:100%;
    }

    .foot-addr{
        max-width:100%;
        word-break:break-word;
    }

    .foot-line{
        flex-wrap:wrap;
    }

    .foot-bottom{
        flex-direction:column;
        text-align:center;
        gap:10px;
    }

}
.foot-brand p{ font-size: 14px; margin: 20px 0 28px; max-width: 260px; }
.newsletter{ background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 18px; }
.nl-title{ font-family: 'Cormorant Garamond', serif; font-size: 18px; color: var(--beige); margin: 4px 0 12px; }
.nl-form{ display:flex; gap: 8px; }
.nl-form input{ flex: 1; height: 40px; background: transparent; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; padding: 0 12px; color:#fff; font-size: 13px; }
.nl-form input::placeholder{ color: rgba(255,255,255,.4); }
.nl-form button{ height: 40px; padding: 0 16px; border-radius: 10px; background: var(--copper); color:#fff; border: none; font-weight: 600; cursor: pointer; }
.nl-ok{ color: var(--copper-light); font-size: 12px; margin-left: 8px; }
.foot-col{ display:flex; flex-direction:column; gap: 10px; }
.foot-col a{ color: rgba(248,245,242,.75); font-size: 14px; margin-top: 6px; transition: color .3s; }
.foot-col a:hover{ color:#fff; }
.foot-col .eyebrow{ margin-bottom: 8px; }
.foot-line{ display:flex; align-items:center; gap: 8px; font-size: 13px; margin-top: 6px; }
.foot-line i{ font-size: 14px; }
.foot-addr{ font-size: 14px; }
.foot-bottom{
  border-top: 1px solid rgba(248,245,242,.1); margin-top: 60px; padding-top: 20px;
  display:flex; justify-content: space-between; align-items:center; gap: 12px;
  font-size: 12px; color: rgba(248,245,242,.5); flex-wrap: wrap;
}

/* ============ STICKY BOTTOM BAR ============ */
.sticky-bar{
  position: fixed; left: 20px; right: 20px; bottom: 16px; z-index: 80; pointer-events: none;
}
.sb-inner{
  max-width: 1240px; margin: 0 auto;
  background: rgba(255,255,255,.85); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 22px; padding: 12px 16px;
  box-shadow: var(--shadow-luxe);
  display:flex; align-items:center; justify-content: space-between; gap: 12px;
  pointer-events: auto;
}
.sb-left{ display:flex; align-items:center; gap: 12px; }
.sb-icon{ width: 42px; height: 42px; border-radius: 12px; background: var(--forest); color:#fff; display:inline-flex; align-items:center; justify-content:center; }
.sb-title{ font-family: 'Cormorant Garamond', serif; font-size: 18px; color: var(--walnut); line-height:1.1; }
.sb-sub{ font-size: 12px; color: rgba(42,42,42,.6); margin-top: 2px; }
.sb-actions{ display:flex; gap: 8px; align-items:center; }
.sb-btn{
  display:inline-flex; align-items:center; gap: 8px;
  height: 44px; padding: 0 14px; border-radius: 999px;
  color:#fff; font-size: 13px; font-weight: 500;
}
.sb-wa{ background: var(--forest); }
.sb-call{ background: var(--walnut); }
@media (max-width: 768px){
  .sb-left{ display:none; }
  .sb-btn span{ display:none; }
  .sb-btn{ width: 44px; padding: 0; justify-content:center; }
  .sb-inner .btn{ padding: 0 14px; font-size: 12px; }
}

/* ============ MODAL ============ */
.modal{
  position: fixed; inset: 0; z-index: 100; display:none;
  align-items: center; justify-content: center;
}
.modal.open{ display:flex; animation: fadeIn .3s ease-out; }
.modal-backdrop{
  position: absolute; inset: 0; background: rgba(30,20,15,.7); backdrop-filter: blur(6px);
  cursor: pointer;
}
.modal-panel{
  position: relative; background:#fff; border-radius: 28px; overflow: hidden;
  width: min(960px, 94vw); max-height: 92vh; overflow-y: auto;
  display:grid; grid-template-columns: 5fr 7fr;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,.5);
  animation: slideUp .4s cubic-bezier(.22,1,.36,1);
}
@media (max-width: 768px){ .modal-panel{ grid-template-columns: 1fr; } .modal-side{ display:none; } }
.modal-side{ position: relative; background: var(--walnut); color:#fff; min-height: 500px; }
.modal-side img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.modal-side::after{ content:''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(75,53,42,.5), rgba(30,20,15,.9)); }
.ms-content{ position: relative; z-index: 2; padding: 40px; display:flex; flex-direction:column; justify-content: flex-end; height: 100%; }
.ms-title{ font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 36px; line-height:1.05; color:#fff; margin: 14px 0 20px; }
.ms-title em{ color: var(--copper-light); font-style: italic; }
.ms-list{ list-style:none; padding: 0; margin: 0 0 24px; }
.ms-list li{ display:flex; gap: 10px; padding: 6px 0; font-size: 14px; color: rgba(255,255,255,.9); }
.ms-list li i{ color: var(--copper-light); font-size: 14px; }
.ms-trust{ padding-top: 20px; border-top: 1px solid rgba(255,255,255,.15); font-size: 12px; color: rgba(255,255,255,.7); }
.ms-stars{ margin-bottom: 6px; }
.ms-stars i{ color: var(--copper-light); font-size: 14px; margin-right: 1px; }

.modal-close{
  position: absolute; top: 16px; right: 16px; z-index: 5;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.9); backdrop-filter: blur(10px);
  border: none; cursor: pointer; display:inline-flex; align-items:center; justify-content:center;
  transition: background .3s;
}
.modal-close:hover{ background:#fff; }
.modal-close i{ color: var(--walnut); font-size: 16px; }

.modal-body{ padding: 40px; }
.modal-head{ margin-bottom: 20px; }
.modal-title{ font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 32px; color: var(--walnut); margin: 6px 0 8px; line-height:1.1; }
.modal-title em{ color: var(--copper); font-style: italic; }
.modal-sub{ color: rgba(42,42,42,.65); font-size: 14px; margin: 0; }

.modal-progress{ display:flex; gap: 6px; margin: 16px 0 20px; }
.mp{ height: 3px; flex: 1; background: rgba(75,53,42,.1); border-radius: 3px; transition: background .3s; }
.mp-active{ background: var(--copper); }

.modal-form{ position: relative; }
.step{ display:none; animation: fadeIn .3s ease-out; }
.step.active{ display:block; }
.field{ margin-bottom: 12px; }
.field label{ display:block; font-size: 12px; color: rgba(42,42,42,.65); margin-bottom: 6px; letter-spacing:.02em; }
.field .opt{ color: rgba(42,42,42,.4); font-size: 11px; }
.field input, .field select, .field textarea{
  width: 100%; height: 48px; border: 1px solid rgba(75,53,42,.15); background:#fff;
  border-radius: 12px; padding: 0 14px; font-size: 14.5px; color: var(--charcoal);
  transition: border-color .3s, box-shadow .3s;
}
.field textarea{ height: auto; padding: 12px 14px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none; border-color: var(--copper); box-shadow: 0 0 0 3px rgba(200,123,67,.12);
}
.step-actions{ display:flex; gap: 10px; margin-top: 4px; }
.step-actions .btn-outline-walnut{ flex: 1; }

.step.success{ text-align: center; padding: 20px 0; }
.success-tick{ width: 60px; height: 60px; border-radius: 50%; background: rgba(45,106,79,.12); color: var(--forest); display:inline-flex; align-items:center; justify-content:center; margin-bottom: 16px; font-size: 24px; }
.success-tick i{ font-size: 24px; }
.step.success h3{ font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 30px; color: var(--walnut); margin: 0 0 8px; }
.step.success p{ color: rgba(42,42,42,.65); margin: 0 0 20px; }

.modal-safe{ margin-top: 16px; display:flex; align-items:center; gap: 6px; font-size: 11px; color: rgba(42,42,42,.5); }
.modal-safe i{ font-size: 13px; }

@keyframes fadeIn{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes slideUp{ from{ opacity: 0; transform: translateY(30px); } to{ opacity: 1; transform: translateY(0); } }

/* ============ Reveal on Scroll ============ */
.reveal{ opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.reveal.in{ opacity: 1; transform: translateY(0); }

/* Extra bottom padding so sticky bar doesn't overlap footer */
body{ padding-bottom: 100px; }

/* Small responsive tweaks */
@media (max-width: 640px){
  .hero{ padding-top: calc(var(--nav-h) + var(--urg-h) + 40px); padding-bottom: 60px; }
  .hero-stats{ grid-template-columns: repeat(2, 1fr); }
  .btn.btn-lg{ height: 52px; font-size: 14px; }
  .why, .spaces, .process, .portfolio, .before-after, .testimonials, .packages, .faq, .areas{ padding: 90px 0; }
  .achieve{ padding: 60px 0; }
  .ba-wrap{ height: 380px; }
  .modal-body{ padding: 30px 22px; }
}




.gallery-modal{

position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.75);
display:flex;
justify-content:center;
align-items:center;
opacity:0;
visibility:hidden;
transition:.35s;
z-index:9999;

}

.gallery-modal.show{

opacity:1;
visibility:visible;

}

.gallery-content{
    width:92%;
    max-width:1200px;
    max-height:90vh;
    overflow:auto;

    padding:40px;
    border-radius:24px;

    /* Warm wooden glass */
    background:rgba(250, 245, 236, 0.88);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(193, 154, 107, 0.25);

    box-shadow:
        0 20px 60px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.35);

    position:relative;
}

.gallery-close{

position:absolute;
top:18px;
right:25px;
font-size:38px;
border:none;
background:none;
cursor:pointer;

}

.gallery-content h2{

font-size:34px;
margin-bottom:30px;

}

.gallery-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;

}

.gallery-grid img{

width:100%;
height:280px;
object-fit:cover;
border-radius:16px;
transition:.35s;
cursor:pointer;

}

.gallery-grid img:hover{

transform:scale(1.04);

}

@media(max-width:991px){

.gallery-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

.gallery-grid{

grid-template-columns:1fr;

}

.gallery-content{

padding:25px;

}

.gallery-content h2{

font-size:26px;

}

}