/* ============================================================
   NORTHWORKS — London Construction Studio
   Design system: Neon Studio palette, editorial typography,
   motion primitives, illustration containers
   ============================================================ */

:root{
  /* Palette */
  --ink: #1a1612;
  --ink-deep: #0a0807;
  --ink-soft: #2d2620;
  --cream: #faf7f0;
  --cream-warm: #f3eddc;
  --paper: #fdfcf7;
  --lime: #cdf02c;
  --lime-deep: #a8c41a;
  --lime-glow: rgba(205, 240, 44, 0.45);
  --coral: #ff6b4a;
  --coral-bright: #ff8568;
  --tan: #d4b896;
  --tan-deep: #b89a73;
  --gray-soft: #8b8478;
  --gray-line: #d4cfc3;
  --line: #e5dfd3;
  --whatsapp: #25D366;
  --star: #f4b942;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);

  /* Shadows — softer, more diffused */
  --shadow-sm: 0 2px 12px rgba(26, 22, 18, 0.06);
  --shadow-md: 0 12px 36px rgba(26, 22, 18, 0.10);
  --shadow-lg: 0 30px 80px -10px rgba(26, 22, 18, 0.18);
  --shadow-xl: 0 50px 120px -20px rgba(26, 22, 18, 0.25);
  --shadow-lime: 0 12px 40px -8px rgba(205, 240, 44, 0.55);
  --shadow-coral: 0 12px 40px -8px rgba(255, 107, 74, 0.45);

  /* Gradients */
  --grad-lime: linear-gradient(135deg, #cdf02c 0%, #d8f548 50%, #cdf02c 100%);
  --grad-coral: linear-gradient(135deg, #ff6b4a 0%, #ff8568 50%, #ff6b4a 100%);
  --grad-ink: linear-gradient(135deg, #1a1612 0%, #2d2620 100%);
}

/* ============ RESET ============ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{
  font-family:'Manrope', system-ui, sans-serif;
  font-weight:400; line-height:1.55; color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:0; background:0}
img{max-width:100%; display:block}
input, select, textarea{font-family:inherit}

/* ============ ANIMATED BACKGROUND TEXTURE ============ */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(circle at 25% 15%, rgba(205,240,44,0.08) 0%, transparent 35%),
    radial-gradient(circle at 80% 80%, rgba(255,107,74,0.06) 0%, transparent 40%);
  opacity:0.9;
}

.container{max-width:1280px; margin:0 auto; padding:0 32px; position:relative}
@media(max-width:720px){.container{padding:0 20px}}

/* ============ TOP BAR ============ */
.topbar{
  background:var(--ink);
  color:var(--cream);
  font-size:13px;
  padding:10px 0;
  border-bottom:1px solid rgba(205,240,44,0.12);
}
.topbar-row{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap}
.topbar-left, .topbar-right{display:flex; gap:24px; align-items:center; flex-wrap:wrap}
.topbar a{color:var(--cream); transition:.2s}
.topbar a:hover{color:var(--lime)}
.pulse{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--lime);
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%, 100%{box-shadow:0 0 0 0 var(--lime-glow)}
  50%{box-shadow:0 0 0 8px transparent}
}

/* ============ HEADER ============ */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,247,240,0.85);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--line);
  transition:.3s var(--ease);
}
.header-row{display:flex; justify-content:space-between; align-items:center; padding:18px 0; gap:24px}
.logo{display:flex; align-items:center; gap:12px; transition:.3s var(--ease)}
.logo:hover{transform:translateY(-1px)}
.logo-mark{
  width:42px; height:42px;
  background:var(--ink);
  border-radius:12px;
  display:grid; place-items:center;
  position:relative;
  box-shadow:0 4px 12px rgba(26,22,18,.20), inset 0 1px 0 rgba(205,240,44,.10);
}
.logo-mark svg{position:relative; z-index:2}
.logo-mark::after{
  content:""; position:absolute; inset:2px; border-radius:10px;
  background:radial-gradient(circle at 30% 30%, rgba(205,240,44,0.20) 0%, transparent 60%);
  pointer-events:none;
}
.logo-text strong{
  display:block;
  font-family:'Bricolage Grotesque', serif;
  font-weight:700;
  font-size:18px;
  letter-spacing:-0.02em;
  color:var(--ink);
  line-height:1;
}
.logo-text small{
  font-size:9.5px;
  letter-spacing:1.5px;
  color:var(--gray-soft);
  font-weight:600;
  text-transform:uppercase;
  display:block; margin-top:3px;
}

.main-nav{display:flex; gap:34px; align-items:center}
.main-nav a{
  font-size:14px; font-weight:600; color:var(--ink);
  position:relative; padding:6px 0;
  transition:.2s;
}
.main-nav a:hover, .main-nav a.active{color:var(--ink-deep)}
.main-nav a::after{
  content:""; position:absolute; bottom:0; left:0; right:0;
  height:2px; background:var(--lime);
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.main-nav a:hover::after, .main-nav a.active::after{transform:scaleX(1)}

.header-cta{display:flex; gap:12px; align-items:center}
.menu-toggle{display:none; flex-direction:column; gap:5px; padding:8px}
.menu-toggle span{display:block; width:22px; height:2px; background:var(--ink); border-radius:2px}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px;
  font-size:14px; font-weight:700;
  border-radius:100px;
  text-align:center; white-space:nowrap;
  position:relative; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s;
  letter-spacing:0.02em;
}
.btn-primary{
  background:var(--ink);
  color:var(--cream);
  box-shadow:0 8px 24px -4px rgba(26,22,18,.30);
}
.btn-primary:hover{
  background:var(--ink-deep);
  transform:translateY(-2px);
  box-shadow:0 14px 36px -6px rgba(26,22,18,.40);
}
.btn-lime{
  background:var(--lime);
  color:var(--ink);
  box-shadow:var(--shadow-lime);
  font-weight:800;
}
.btn-lime:hover{
  background:var(--lime-deep);
  transform:translateY(-2px);
  box-shadow:0 18px 44px -6px var(--lime-glow);
}
.btn-coral{
  background:var(--coral);
  color:#fff;
  box-shadow:var(--shadow-coral);
}
.btn-coral:hover{
  background:var(--coral-bright);
  transform:translateY(-2px);
  box-shadow:0 18px 44px -6px rgba(255,107,74,.55);
}
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border:1.5px solid var(--ink);
}
.btn-ghost:hover{
  background:var(--ink); color:var(--cream);
  transform:translateY(-2px);
}
.btn-lg{padding:18px 30px; font-size:15px}
.btn-arrow{transition:transform .3s var(--ease)}
.btn:hover .btn-arrow{transform:translateX(4px)}

/* Magnetic button container — JS adds .is-magnetic */
.is-magnetic{transition:transform .25s cubic-bezier(0.2, 1, 0.5, 1)}

/* ============ HERO ============ */
.hero{
  padding:60px 0 80px;
  position:relative;
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:60px;
  align-items:center;
  position:relative;
}
.hero-content{position:relative; z-index:2}
.hero-illustration{position:relative; z-index:1}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px;
  background:rgba(26,22,18,0.06);
  border:1px solid rgba(26,22,18,0.10);
  border-radius:100px;
  font-size:11px; letter-spacing:1.5px; font-weight:700;
  color:var(--ink); text-transform:uppercase;
  margin-bottom:24px;
}
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 10px var(--lime-glow);
}

.hero-title{
  font-family:'Bricolage Grotesque', serif;
  font-size:clamp(48px, 7vw, 92px);
  font-weight:700;
  line-height:0.95;
  letter-spacing:-0.04em;
  color:var(--ink);
  margin-bottom:24px;
}
.hero-title em{font-style:italic; font-weight:400}
.hero-title .accent{
  color:var(--ink);
  background:var(--lime);
  padding:0 12px;
  display:inline-block;
  border-radius:8px;
  transform:rotate(-1.5deg);
  box-shadow:var(--shadow-lime);
  position:relative;
}
.hero-title .accent::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), transparent 50%);
  pointer-events:none;
}

.hero-sub{
  font-size:clamp(16px, 1.5vw, 19px);
  color:var(--ink-soft);
  line-height:1.6;
  max-width:540px;
  margin-bottom:32px;
}
.hero-sub strong{color:var(--ink); font-weight:700}

.trust-row{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin-bottom:32px;
}
.trust-item{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--ink-soft);
}
.trust-item .check{
  width:20px; height:20px; border-radius:50%;
  background:var(--lime); color:var(--ink);
  display:grid; place-items:center;
  font-size:11px; font-weight:900;
  box-shadow:0 0 0 3px rgba(205,240,44,0.25);
}
.divider{width:4px; height:4px; border-radius:50%; background:var(--gray-line)}

.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:40px}

.review-strip{
  display:flex; align-items:center; gap:16px;
  padding:14px 0;
  border-top:1px solid var(--line);
}
.avatars{display:flex}
.avatars img{
  width:36px; height:36px; border-radius:50%;
  border:2.5px solid var(--cream);
  margin-left:-10px;
  object-fit:cover;
}
.avatars img:first-child{margin-left:0}
.stars{color:var(--star); font-size:14px; letter-spacing:2px}
.review-text{font-size:13px; color:var(--ink-soft); margin-left:8px}
.review-text b{color:var(--ink)}

/* ============ HERO ILLUSTRATION ============ */
.hero-svg-wrap{
  position:relative;
  aspect-ratio:1/1;
  max-width:560px;
  margin-left:auto;
}
.hero-svg-wrap svg{width:100%; height:100%; display:block}

/* Floating decoration shapes around illustration */
.deco-blob{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.deco-blob.b1{
  top:5%; right:10%;
  width:80px; height:80px;
  background:var(--lime);
  filter:blur(0px);
  animation:floatY 6s ease-in-out infinite;
}
.deco-blob.b2{
  bottom:8%; left:5%;
  width:50px; height:50px;
  background:var(--coral);
  animation:floatY 4s ease-in-out infinite -2s;
}
.deco-blob.b3{
  top:40%; left:-5%;
  width:30px; height:30px;
  background:var(--tan);
  animation:floatX 5s ease-in-out infinite;
}
@keyframes floatY{
  0%, 100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-20px) rotate(8deg)}
}
@keyframes floatX{
  0%, 100%{transform:translateX(0)}
  50%{transform:translateX(15px)}
}

/* Squiggle underline */
.squiggle{
  display:inline-block;
  position:relative;
}
.squiggle::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-4px;
  height:8px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 8'%3E%3Cpath d='M0 4 Q 10 0, 20 4 T 40 4 T 60 4 T 80 4' stroke='%23ff6b4a' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-size:80px 8px;
}

/* ============ PRICE TAG (signature element) ============ */
.price-tag{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  padding:10px 16px;
  background:var(--lime);
  color:var(--ink);
  border-radius:8px;
  font-family:'Bricolage Grotesque', serif;
  font-weight:700;
  position:relative;
  transform:rotate(-2deg);
  box-shadow:0 8px 24px -4px var(--lime-glow);
}
.price-tag::before{
  content:""; position:absolute; left:-6px; top:50%;
  transform:translateY(-50%);
  width:12px; height:12px;
  background:var(--cream);
  border-radius:50%;
  box-shadow:inset 0 0 0 2px var(--lime);
}
.price-tag .from{font-size:10px; letter-spacing:1.5px; text-transform:uppercase; font-weight:800}
.price-tag .amt{font-size:22px; letter-spacing:-0.02em}
.price-tag .unit{font-size:11px; font-weight:600; opacity:0.7}

.price-tag.coral{background:var(--coral); color:#fff; box-shadow:0 8px 24px -4px rgba(255,107,74,.45)}
.price-tag.coral::before{box-shadow:inset 0 0 0 2px var(--coral)}

.price-tag.flat{transform:rotate(0deg); box-shadow:none}

/* ============ MARQUEE ============ */
.marquee{
  background:var(--ink);
  color:var(--cream);
  padding:24px 0;
  overflow:hidden;
  border-top:1px solid rgba(205,240,44,0.15);
  border-bottom:1px solid rgba(205,240,44,0.15);
  position:relative;
}
.marquee-track{
  display:flex; gap:48px;
  animation:marquee 40s linear infinite;
  white-space:nowrap;
  width:max-content;
}
.marquee-item{
  font-family:'Bricolage Grotesque', serif;
  font-size:24px; font-weight:600;
  display:flex; align-items:center; gap:48px;
  letter-spacing:-0.01em;
}
.marquee-item .star{color:var(--lime); font-size:14px}
@keyframes marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* ============ SECTIONS ============ */
section{padding:100px 0; position:relative}
@media(max-width:720px){section{padding:60px 0}}

.section-head{
  text-align:center;
  max-width:760px; margin:0 auto 60px;
}
.section-head .eyebrow{margin-bottom:18px}
.section-head h2{
  font-family:'Bricolage Grotesque', serif;
  font-size:clamp(38px, 5.5vw, 64px);
  font-weight:700;
  line-height:0.98;
  letter-spacing:-0.03em;
  color:var(--ink);
  margin-bottom:18px;
}
.section-head h2 em{font-style:italic; font-weight:400; color:var(--ink)}
.section-head h2 .accent{
  display:inline-block;
  background:var(--lime);
  padding:0 10px;
  border-radius:6px;
  transform:rotate(-1deg);
}
.section-head p{
  font-size:17px; color:var(--ink-soft); max-width:600px; margin:0 auto;
  line-height:1.6;
}

/* ============ SERVICE CARDS — with prominent prices ============ */
.services-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.service-card{
  background:var(--paper);
  border-radius:24px;
  border:1px solid var(--line);
  overflow:hidden;
  position:relative;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .25s;
}
.service-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-lg);
  border-color:var(--ink);
}
.service-illust{
  aspect-ratio:4/3;
  background:var(--cream-warm);
  position:relative;
  overflow:hidden;
  display:grid; place-items:center;
}
.service-illust svg{
  width:65%; height:65%;
  transition:transform .5s var(--ease);
}
.service-card:hover .service-illust svg{transform:scale(1.08) rotate(-2deg)}
.service-illust .price-tag{
  position:absolute;
  top:14px; right:14px;
  z-index:2;
}
.service-num{
  position:absolute;
  top:14px; left:14px;
  font-family:'Bricolage Grotesque', serif;
  font-size:11px; font-weight:700;
  letter-spacing:2px;
  color:var(--ink-soft);
  background:rgba(250,247,240,0.85);
  padding:6px 10px;
  border-radius:100px;
  z-index:2;
}
.service-body{padding:24px}
.service-body h3{
  font-family:'Bricolage Grotesque', serif;
  font-size:22px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:8px;
  letter-spacing:-0.01em;
  line-height:1.15;
}
.service-body p{
  font-size:14px;
  color:var(--ink-soft);
  line-height:1.55;
  margin-bottom:16px;
}
.service-meta{
  display:flex; gap:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
  margin-bottom:14px;
}
.service-meta-item{
  font-size:11px;
  color:var(--gray-soft);
}
.service-meta-item strong{
  display:block;
  font-family:'Bricolage Grotesque', serif;
  font-size:13px;
  color:var(--ink);
  font-weight:700;
  letter-spacing:-0.01em;
}
.service-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700;
  color:var(--ink);
  border-bottom:2px solid var(--lime);
  padding-bottom:2px;
  transition:.2s;
}
.service-link:hover{color:var(--coral); border-color:var(--coral)}
.service-link svg{transition:transform .3s var(--ease)}
.service-link:hover svg{transform:translateX(4px)}

/* ============ MOTION REVEAL ============ */
.reveal{
  opacity:0; transform:translateY(40px);
  transition:opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.in{opacity:1; transform:translateY(0)}
.reveal-stagger > *{
  opacity:0; transform:translateY(40px);
  transition:opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal-stagger.in > *{opacity:1; transform:translateY(0)}
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.in > *:nth-child(2){transition-delay:.12s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.19s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.26s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.33s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.40s}
.reveal-stagger.in > *:nth-child(7){transition-delay:.47s}
.reveal-stagger.in > *:nth-child(8){transition-delay:.54s}
.reveal-stagger.in > *:nth-child(9){transition-delay:.61s}

/* ============ STATS ============ */
.stats-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  background:var(--ink);
  color:var(--cream);
  border-radius:24px;
  padding:40px;
  position:relative;
  overflow:hidden;
}
.stats-row::before{
  content:""; position:absolute; top:-100px; right:-100px;
  width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, var(--lime) 0%, transparent 65%);
  opacity:0.12;
}
.stat{position:relative; text-align:center}
.stat strong{
  display:block;
  font-family:'Bricolage Grotesque', serif;
  font-size:48px;
  font-weight:700;
  color:var(--lime);
  line-height:1;
  letter-spacing:-0.02em;
  margin-bottom:6px;
}
.stat span{
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-weight:600;
  opacity:0.85;
}

/* ============ QUOTE CARD ============ */
.quote-card{
  background:var(--paper);
  border-radius:24px;
  padding:30px;
  position:relative;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--line);
}
.quote-card .ribbon{
  position:absolute;
  top:-12px; left:30px;
  background:var(--lime);
  color:var(--ink);
  padding:6px 14px;
  border-radius:100px;
  font-size:11px; font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
  box-shadow:var(--shadow-sm);
}
.quote-card h3{
  font-family:'Bricolage Grotesque', serif;
  font-size:26px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:6px;
  margin-top:8px;
  line-height:1.15;
  letter-spacing:-0.02em;
}
.quote-card h3 span{color:var(--coral)}
.form-sub{font-size:13px; color:var(--ink-soft); margin-bottom:20px}

.form-row{margin-bottom:14px}
.form-row label{
  display:block;
  font-size:11px;
  letter-spacing:1px;
  font-weight:700;
  color:var(--ink-soft);
  text-transform:uppercase;
  margin-bottom:6px;
}
.form-row input, .form-row select, .form-row textarea{
  width:100%;
  padding:14px 16px;
  border:1.5px solid var(--line);
  border-radius:12px;
  background:var(--cream);
  font-size:14px;
  color:var(--ink);
  transition:.2s;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline:0;
  border-color:var(--ink);
  background:var(--paper);
}
.form-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px}
.form-grid-2 .form-row{margin-bottom:0}

.form-submit{
  width:100%;
  padding:16px;
  background:var(--ink);
  color:var(--cream);
  border-radius:12px;
  font-size:14px; font-weight:700;
  letter-spacing:0.02em;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:.3s var(--ease);
  position:relative; overflow:hidden;
  margin-top:6px;
}
.form-submit:hover{
  background:var(--lime);
  color:var(--ink);
  transform:translateY(-2px);
  box-shadow:var(--shadow-lime);
}

.form-foot{
  display:flex; justify-content:space-between; gap:12px;
  margin-top:14px;
  font-size:11px; color:var(--gray-soft);
  flex-wrap:wrap;
}

.form-reviews{
  display:grid; grid-template-columns:auto auto 1fr auto;
  gap:14px; align-items:center;
  padding:16px;
  background:var(--cream-warm);
  border-radius:14px;
  margin-top:18px;
}
.form-reviews strong{
  font-family:'Bricolage Grotesque', serif;
  font-size:20px;
  color:var(--ink);
  font-weight:700;
}
.rev-text{font-size:11px; color:var(--ink-soft)}
.rev-text span{display:block; font-weight:700; color:var(--ink); font-size:12px}
.rev-text small{letter-spacing:1px; font-weight:600; font-size:9px}
.verified-tick{
  width:32px; height:32px; border-radius:50%;
  background:var(--lime); color:var(--ink);
  display:grid; place-items:center;
  font-weight:900; font-size:14px;
  box-shadow:0 0 0 3px rgba(205,240,44,0.25);
}

.float-badge{
  position:absolute;
  background:var(--paper);
  border:1.5px solid var(--ink);
  border-radius:14px;
  padding:10px 14px;
  display:flex; gap:10px; align-items:center;
  box-shadow:var(--shadow-md);
  font-size:11px;
  z-index:10;
  animation:bobBadge 4s ease-in-out infinite;
}
.fb-1{top:30px; left:-20px; transform:rotate(-3deg)}
.fb-2{bottom:80px; right:-30px; transform:rotate(3deg); animation-delay:-2s}
.fb-icon{font-size:20px}
.fb-text strong{
  display:block; font-size:12px; font-weight:800; color:var(--ink);
  font-family:'Bricolage Grotesque', serif;
}
.fb-text small{font-size:10px; color:var(--gray-soft)}
@keyframes bobBadge{
  0%, 100%{transform:rotate(-3deg) translateY(0)}
  50%{transform:rotate(-3deg) translateY(-6px)}
}
.fb-2{animation-name:bobBadge2}
@keyframes bobBadge2{
  0%, 100%{transform:rotate(3deg) translateY(0)}
  50%{transform:rotate(3deg) translateY(-6px)}
}

/* ============ HERO INNER (sub-pages) ============ */
.hero-inner{
  padding:50px 0 60px;
  background:var(--cream);
}
.hero-inner .container > .reveal{margin-top:20px}
.breadcrumbs{
  display:flex; gap:8px;
  font-size:13px; color:var(--ink-soft);
  margin-bottom:30px; flex-wrap:wrap;
}
.breadcrumbs a{font-weight:600; transition:.2s}
.breadcrumbs a:hover{color:var(--coral)}
.breadcrumbs .sep{color:var(--gray-line)}
.breadcrumbs .curr{color:var(--ink); font-weight:700}

/* ============ WHY US ============ */
.why-us{padding:120px 0; background:var(--paper); position:relative; overflow:hidden}
.why-grid{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:60px;
  align-items:center;
}
.why-content h2{
  font-family:'Bricolage Grotesque', serif;
  font-size:clamp(38px, 5vw, 60px);
  font-weight:700;
  line-height:0.98;
  letter-spacing:-0.03em;
  color:var(--ink);
  margin-bottom:18px;
}
.why-content h2 em{font-style:italic; font-weight:400}
.why-content > p{font-size:17px; color:var(--ink-soft); margin-bottom:32px; line-height:1.6}
.why-list{display:flex; flex-direction:column; gap:24px; margin-bottom:32px}
.why-item{display:flex; gap:18px; align-items:flex-start}
.why-icon{
  width:52px; height:52px;
  background:var(--lime);
  border-radius:14px;
  display:grid; place-items:center;
  font-family:'Bricolage Grotesque', serif;
  font-size:22px; font-weight:800;
  color:var(--ink);
  flex-shrink:0;
  box-shadow:var(--shadow-sm);
  transition:.3s var(--ease);
}
.why-item:hover .why-icon{
  transform:rotate(-8deg) scale(1.05);
  box-shadow:var(--shadow-lime);
}
.why-item h4{
  font-family:'Bricolage Grotesque', serif;
  font-size:19px; font-weight:700;
  color:var(--ink); margin-bottom:4px;
  letter-spacing:-0.01em;
}
.why-item p{font-size:14px; color:var(--ink-soft); line-height:1.55}

.why-images{position:relative; aspect-ratio:1/1.05}
.why-img{
  position:absolute;
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.why-img img{width:100%; height:100%; object-fit:cover}
.why-img-1{top:0; left:0; width:55%; aspect-ratio:3/4; transform:rotate(-3deg); z-index:2}
.why-img-2{top:8%; right:0; width:48%; aspect-ratio:1/1; transform:rotate(2deg); z-index:1}
.why-img-3{bottom:0; left:8%; width:60%; aspect-ratio:3/2; transform:rotate(2deg); z-index:3}
.why-stat{
  position:absolute;
  bottom:30%; right:5%;
  background:var(--lime);
  color:var(--ink);
  padding:18px 22px;
  border-radius:18px;
  z-index:5;
  transform:rotate(-4deg);
  box-shadow:var(--shadow-lime);
  text-align:center;
}
.why-stat strong{
  display:block;
  font-family:'Bricolage Grotesque', serif;
  font-size:36px; font-weight:800;
  line-height:1;
  letter-spacing:-0.02em;
}
.why-stat span{font-size:11px; letter-spacing:1px; font-weight:700; text-transform:uppercase}

/* ============ PROCESS ============ */
.process{
  background:var(--ink);
  color:var(--cream);
  position:relative;
  overflow:hidden;
}
.process-bg-text{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-family:'Bricolage Grotesque', serif;
  font-size:clamp(180px, 25vw, 360px);
  font-weight:700;
  color:rgba(205,240,44,0.04);
  letter-spacing:-0.04em;
  pointer-events:none;
  z-index:0;
}
.process .container{position:relative; z-index:1}
.process .section-head h2{color:var(--cream)}
.process .section-head h2 em{color:var(--lime)}
.process .section-head p{color:rgba(250,247,240,0.7)}
.process .section-head .eyebrow{
  background:rgba(205,240,44,0.10);
  border-color:rgba(205,240,44,0.20);
  color:var(--lime);
}
.process-steps{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:32px;
  position:relative;
}
.step{
  position:relative;
  text-align:center;
}
.step-num{
  font-family:'Bricolage Grotesque', serif;
  font-size:80px;
  font-weight:700;
  color:var(--lime);
  line-height:1;
  letter-spacing:-0.04em;
  margin-bottom:16px;
  transition:.4s var(--ease);
}
.step:hover .step-num{transform:scale(1.1) rotate(-2deg)}
.step h3{
  font-family:'Bricolage Grotesque', serif;
  font-size:22px;
  font-weight:700;
  color:var(--cream);
  margin-bottom:8px;
  letter-spacing:-0.01em;
}
.step p{font-size:14px; color:rgba(250,247,240,0.75); line-height:1.55}
.step-line{
  position:absolute;
  top:32px;
  right:-24px;
  font-size:24px;
  color:var(--lime);
  opacity:0.5;
}

/* ============ AREAS ============ */
.areas{
  background:var(--cream);
  padding:120px 0;
  position:relative;
  overflow:hidden;
}
.areas-bg{
  position:absolute;
  top:0; right:-200px;
  width:600px; height:100%;
  background-size:cover;
  background-position:center;
  opacity:0.07;
  filter:saturate(0);
}
.areas-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:14px;
  margin-bottom:40px;
}
.area-pill{
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:14px;
  padding:18px;
  text-align:center;
  transition:.3s var(--ease);
  position:relative;
  display:block;
}
.area-pill:hover{
  background:var(--lime);
  border-color:var(--ink);
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}
.area-pill.featured{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--cream);
}
.area-pill.featured:hover{background:var(--ink-deep)}
.area-pill strong{
  display:block;
  font-family:'Bricolage Grotesque', serif;
  font-size:16px;
  font-weight:700;
  margin-bottom:2px;
  letter-spacing:-0.01em;
}
.area-pill small{
  font-size:11px;
  color:var(--gray-soft);
  font-weight:600;
}
.area-pill.featured small{color:rgba(250,247,240,0.65)}
.area-pill.featured strong{color:var(--lime)}
.areas-cta{text-align:center; margin-top:40px}
.areas-cta p{margin-bottom:20px; color:var(--ink-soft); font-size:16px}

/* ============ GALLERY ============ */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:200px;
  gap:14px;
}
.g-item{
  border-radius:18px;
  overflow:hidden;
  position:relative;
  cursor:pointer;
  transition:transform .4s var(--ease);
}
.g-item:hover{transform:scale(1.02)}
.g-item img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.g-item:hover img{transform:scale(1.08)}
.g-1{grid-column:span 2; grid-row:span 2}
.g-2{grid-column:span 1}
.g-3{grid-column:span 1}
.g-4{grid-column:span 2; grid-row:span 1}
.g-5{grid-column:span 1; grid-row:span 1}
.g-6{grid-column:span 1; grid-row:span 1}
.g-cap{
  position:absolute;
  bottom:0; left:0; right:0;
  padding:32px 20px 20px;
  background:linear-gradient(to top, rgba(26,22,18,0.85) 0%, transparent 100%);
  color:var(--cream);
  font-family:'Bricolage Grotesque', serif;
  font-size:14px;
  font-weight:600;
  letter-spacing:-0.01em;
}
.g-cap small{
  display:block;
  font-size:10px;
  letter-spacing:1.5px;
  font-weight:700;
  color:var(--lime);
  text-transform:uppercase;
  margin-bottom:4px;
}

/* ============ TESTIMONIALS ============ */
.testimonials{
  padding:100px 0;
  background:var(--cream-warm);
}
.test-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.test-grid.extended{grid-template-columns:repeat(3, 1fr)}
.test-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  padding:32px 28px;
  position:relative;
  transition:.35s var(--ease);
}
.test-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:var(--ink);
}
.test-quote{
  font-family:'Bricolage Grotesque', serif;
  font-size:80px;
  color:var(--lime);
  line-height:0.6;
  margin-bottom:8px;
  letter-spacing:-0.04em;
}
.test-stars{color:var(--star); font-size:14px; margin-bottom:12px; letter-spacing:2px}
.test-text{font-size:15px; color:var(--ink); line-height:1.55; margin-bottom:24px}
.test-meta{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px; align-items:center;
  padding-top:20px;
  border-top:1px solid var(--line);
}
.test-avatar{
  width:44px; height:44px; border-radius:50%;
  background:var(--ink);
  color:var(--lime);
  display:grid; place-items:center;
  font-family:'Bricolage Grotesque', serif;
  font-weight:700;
  font-size:14px;
  letter-spacing:-0.01em;
}
.test-name strong{
  display:block;
  font-family:'Bricolage Grotesque', serif;
  font-size:14px;
  font-weight:700;
  color:var(--ink);
}
.test-name small{font-size:11px; color:var(--gray-soft); font-weight:500}
.test-verified{
  font-size:10px;
  color:var(--lime-deep);
  font-weight:700;
  letter-spacing:0.5px;
  background:rgba(205,240,44,0.15);
  padding:4px 8px;
  border-radius:6px;
}

/* ============ FAQ ============ */
.faq{padding:100px 0; background:var(--cream)}
.faq-grid{
  display:grid;
  grid-template-columns:0.8fr 1.2fr;
  gap:60px;
}
.faq-side h2{
  font-family:'Bricolage Grotesque', serif;
  font-size:clamp(36px, 4.5vw, 52px);
  font-weight:700;
  line-height:0.98;
  letter-spacing:-0.03em;
  margin:18px 0 16px;
}
.faq-side h2 em{font-style:italic; font-weight:400}
.faq-side > p{color:var(--ink-soft); margin-bottom:32px; line-height:1.6}

.help-card{
  background:var(--ink);
  color:var(--cream);
  border-radius:20px;
  padding:30px;
  position:relative; overflow:hidden;
}
.help-card::before{
  content:""; position:absolute; top:-50px; right:-50px;
  width:200px; height:200px; border-radius:50%;
  background:var(--lime); opacity:0.10;
}
.help-card h4{
  font-family:'Bricolage Grotesque', serif;
  font-size:22px;
  font-weight:700;
  margin-bottom:6px;
  position:relative;
  letter-spacing:-0.01em;
}
.help-card p{
  color:rgba(250,247,240,0.8);
  margin-bottom:18px;
  font-size:14px;
  position:relative;
}
.help-actions{display:flex; gap:10px; flex-wrap:wrap; position:relative}

.faq-list{display:flex; flex-direction:column; gap:14px}
.faq-item{
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  transition:.3s var(--ease);
}
.faq-item.open{
  border-color:var(--ink);
  box-shadow:var(--shadow-md);
}
.faq-q{
  width:100%; text-align:left;
  padding:20px 24px;
  font-family:'Bricolage Grotesque', serif;
  font-weight:600;
  font-size:16px;
  color:var(--ink);
  display:flex; justify-content:space-between; gap:20px;
  letter-spacing:-0.01em;
  transition:.2s;
}
.faq-q:hover{color:var(--coral)}
.faq-icon{
  width:28px; height:28px;
  border-radius:50%;
  background:var(--lime);
  color:var(--ink);
  display:grid; place-items:center;
  font-weight:900;
  font-size:14px;
  flex-shrink:0;
  transition:.4s var(--ease);
}
.faq-item.open .faq-icon{
  background:var(--coral);
  color:#fff;
  transform:rotate(45deg);
}
.faq-a{
  max-height:0; overflow:hidden;
  transition:max-height .5s var(--ease), padding .3s var(--ease);
  padding:0 24px;
  font-size:14px; color:var(--ink-soft); line-height:1.65;
}
.faq-item.open .faq-a{
  max-height:320px;
  padding:0 24px 22px;
}

.faq-cats{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-bottom:50px;
  justify-content:center;
}
.faq-cat{
  padding:10px 18px;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:100px;
  font-size:13px;
  font-weight:700;
  color:var(--ink);
  transition:.25s;
}
.faq-cat:hover, .faq-cat.active{
  background:var(--ink);
  color:var(--cream);
  border-color:var(--ink);
}
.faq-cat-section{margin-bottom:50px}
.cat-title{
  font-family:'Bricolage Grotesque', serif;
  font-size:32px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:24px;
  padding-bottom:14px;
  border-bottom:2px solid var(--lime);
  letter-spacing:-0.02em;
}
.cat-title em{font-style:italic; font-weight:400}

/* ============ QUOTE BAND ============ */
.quote-band{
  background:var(--ink);
  color:var(--cream);
  padding:60px 0;
  position:relative;
  overflow:hidden;
}
.quote-band::before{
  content:""; position:absolute;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:120%; height:300%;
  background:radial-gradient(ellipse at center, var(--lime) 0%, transparent 50%);
  opacity:0.06;
  pointer-events:none;
}
.quote-band-row{
  display:flex; justify-content:space-between; align-items:center; gap:40px;
  flex-wrap:wrap;
  position:relative;
}
.quote-band h3{
  font-family:'Bricolage Grotesque', serif;
  font-size:clamp(28px, 3.5vw, 42px);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-0.02em;
  flex:1; min-width:280px;
}
.quote-band h3 em{font-style:italic; color:var(--lime); font-weight:400}
.qb-actions{display:flex; gap:14px; flex-wrap:wrap}

/* ============ CTA FINAL ============ */
.cta-final{
  padding:120px 0;
  background:var(--ink);
  color:var(--cream);
  position:relative;
  overflow:hidden;
  text-align:center;
}
.cta-final-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0.20;
  filter:contrast(1.1);
}
.cta-final::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(26,22,18,0.92) 0%, rgba(26,22,18,0.85) 100%);
}
.cta-final .container{position:relative; z-index:1}
.cta-final h2{
  font-family:'Bricolage Grotesque', serif;
  font-size:clamp(40px, 6vw, 80px);
  font-weight:700;
  line-height:0.98;
  letter-spacing:-0.03em;
  margin-bottom:20px;
  max-width:900px; margin-left:auto; margin-right:auto;
}
.cta-final h2 em{font-style:italic; font-weight:400; color:var(--lime)}
.cta-final p{
  font-size:18px;
  color:rgba(250,247,240,0.80);
  max-width:600px; margin:0 auto 40px;
  line-height:1.6;
}
.cta-final .btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ============ FOOTER ============ */
footer{
  background:var(--ink-deep);
  color:rgba(250,247,240,0.85);
  padding:80px 0 30px;
  position:relative;
}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:60px;
  padding-bottom:50px;
  border-bottom:1px solid rgba(205,240,44,0.10);
}
.footer-brand .logo-text strong{color:var(--cream)}
.footer-brand .logo-text small{color:var(--gray-soft)}
.footer-brand p{margin:20px 0; line-height:1.6; font-size:14px}
.footer-socials{display:flex; gap:10px}
.footer-socials a{
  width:40px; height:40px;
  background:rgba(250,247,240,0.06);
  border:1px solid rgba(205,240,44,0.15);
  border-radius:12px;
  display:grid; place-items:center;
  font-weight:700;
  font-size:14px;
  transition:.3s var(--ease);
}
.footer-socials a:hover{
  background:var(--lime); color:var(--ink);
  border-color:var(--lime);
  transform:translateY(-3px);
}
.footer-col h5{
  font-family:'Bricolage Grotesque', serif;
  font-size:13px;
  letter-spacing:1.5px;
  color:var(--lime);
  text-transform:uppercase;
  margin-bottom:18px;
  font-weight:700;
}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:8px}
.footer-col a{
  font-size:14px;
  color:rgba(250,247,240,0.65);
  transition:.2s;
}
.footer-col a:hover{color:var(--lime)}
.footer-areas-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; font-size:13px}
.footer-areas-grid a{font-size:13px}
.footer-seo{
  padding:30px 0;
  font-size:12px;
  color:rgba(250,247,240,0.45);
  line-height:1.7;
  border-bottom:1px solid rgba(205,240,44,0.10);
}
.footer-seo strong{color:rgba(250,247,240,0.80); font-weight:700}
.footer-bottom{
  padding-top:24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  font-size:12px;
  color:rgba(250,247,240,0.50);
}
.footer-bottom a{color:rgba(250,247,240,0.50)}

/* ============ FAB STACK ============ */
.fab-stack{
  position:fixed;
  right:20px; bottom:20px;
  z-index:999;
  display:flex; flex-direction:column; gap:12px;
}
.fab{
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  color:#fff;
  box-shadow:var(--shadow-lg);
  transition:.3s var(--ease);
  position:relative;
  cursor:pointer;
}
.fab:hover{transform:scale(1.08) translateY(-3px)}
.fab-whatsapp{background:var(--whatsapp)}
.fab-call{background:var(--ink)}
.fab-chat{background:var(--coral)}
.fab-pulse::after{
  content:""; position:absolute; inset:-2px;
  border-radius:50%;
  border:2px solid var(--whatsapp);
  animation:fabPulse 2s ease-out infinite;
}
@keyframes fabPulse{
  0%{transform:scale(1); opacity:0.8}
  100%{transform:scale(1.4); opacity:0}
}
.fab-tooltip{
  position:absolute;
  right:calc(100% + 14px); top:50%;
  transform:translateY(-50%) translateX(8px);
  background:var(--ink);
  color:var(--cream);
  padding:8px 14px;
  border-radius:8px;
  font-size:12px; font-weight:600;
  white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:.3s var(--ease);
}
.fab:hover .fab-tooltip{opacity:1; transform:translateY(-50%) translateX(0)}

/* ============ CHATBOT ============ */
.chatbot{
  position:fixed;
  right:20px; bottom:90px;
  width:340px;
  max-width:calc(100vw - 40px);
  background:var(--paper);
  border-radius:20px;
  box-shadow:var(--shadow-xl);
  z-index:1000;
  overflow:hidden;
  display:none;
  flex-direction:column;
  max-height:560px;
}
.chatbot.open{display:flex; animation:chatIn .35s var(--ease)}
@keyframes chatIn{
  0%{opacity:0; transform:translateY(20px) scale(0.95)}
  100%{opacity:1; transform:translateY(0) scale(1)}
}
.chat-head{
  background:var(--ink);
  color:var(--cream);
  padding:18px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
}
.chat-avatar{
  width:38px; height:38px; border-radius:50%;
  background:var(--lime); color:var(--ink);
  display:grid; place-items:center;
  font-family:'Bricolage Grotesque', serif;
  font-weight:800; font-size:16px;
}
.chat-info strong{display:block; font-family:'Bricolage Grotesque', serif; font-size:14px; font-weight:700}
.chat-info small{font-size:11px; color:rgba(250,247,240,0.7)}
.chat-close{
  width:30px; height:30px; border-radius:50%;
  background:rgba(250,247,240,0.10);
  color:var(--cream);
  font-size:18px; line-height:1;
  display:grid; place-items:center;
}
.chat-close:hover{background:var(--coral)}
.chat-body{
  flex:1; overflow-y:auto;
  padding:18px;
  display:flex; flex-direction:column; gap:10px;
  background:var(--cream);
  min-height:280px;
  max-height:380px;
}
.chat-msg{
  padding:12px 14px;
  border-radius:14px;
  font-size:14px; line-height:1.5;
  max-width:85%;
}
.chat-msg.bot{background:var(--paper); border:1px solid var(--line); align-self:flex-start}
.chat-msg.user{background:var(--ink); color:var(--cream); align-self:flex-end}
.chat-msg.bot .chat-options{margin-top:10px; display:flex; flex-direction:column; gap:6px}
.chat-msg.bot .chat-options button{
  text-align:left; font-size:13px;
  padding:8px 12px;
  background:var(--lime); color:var(--ink);
  border-radius:8px; font-weight:700;
  transition:.2s;
}
.chat-msg.bot .chat-options button:hover{background:var(--lime-deep)}
.chat-input-wrap{
  display:grid; grid-template-columns:1fr auto;
  gap:8px; padding:14px;
  border-top:1px solid var(--line);
  background:var(--paper);
}
.chat-input{
  padding:10px 14px;
  border:1.5px solid var(--line);
  border-radius:10px;
  font-size:13px;
}
.chat-input:focus{outline:0; border-color:var(--ink)}
.chat-send{
  width:40px; height:40px;
  background:var(--ink); color:var(--cream);
  border-radius:10px;
  display:grid; place-items:center;
  transition:.2s;
}
.chat-send:hover{background:var(--lime); color:var(--ink)}

/* ============ FILTER BAR (projects) ============ */
.filter-bar{
  display:flex; gap:10px; flex-wrap:wrap;
  margin:0 0 40px;
  padding:0 0 20px;
  border-bottom:1px solid var(--line);
}
.filter-btn{
  padding:10px 18px;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:100px;
  font-size:13px; font-weight:700; color:var(--ink);
  transition:.25s;
  display:flex; gap:8px; align-items:center;
}
.filter-btn:hover{border-color:var(--ink)}
.filter-btn.active{background:var(--ink); color:var(--cream); border-color:var(--ink)}
.filter-btn .count{
  background:var(--lime); color:var(--ink);
  padding:2px 8px;
  border-radius:100px;
  font-size:11px; font-weight:800;
}

/* ============ PROJECT CARDS ============ */
.project-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.project-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  transition:.4s var(--ease);
}
.project-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:var(--ink);
}
.project-img{
  aspect-ratio:4/3;
  position:relative;
  overflow:hidden;
}
.project-img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.project-card:hover .project-img img{transform:scale(1.06)}
.project-tag{
  position:absolute;
  top:14px; left:14px;
  background:var(--lime);
  color:var(--ink);
  padding:6px 12px;
  border-radius:8px;
  font-size:11px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
}
.project-body{padding:22px}
.proj-loc{
  font-size:11px;
  letter-spacing:1.5px;
  color:var(--coral);
  font-weight:700;
  text-transform:uppercase;
  margin-bottom:6px;
}
.project-body h3{
  font-family:'Bricolage Grotesque', serif;
  font-size:20px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:14px;
  letter-spacing:-0.01em;
}
.project-meta{
  display:flex; justify-content:space-between; gap:12px; align-items:center;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-size:13px;
}
.project-meta span{color:var(--ink-soft)}
.project-meta strong{
  font-family:'Bricolage Grotesque', serif;
  font-size:18px;
  color:var(--ink);
  font-weight:700;
  letter-spacing:-0.01em;
}

/* ============ CASE STUDY (projects page) ============ */
.case-study{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:60px;
  align-items:center;
  padding:60px 0;
}
.case-images{
  position:relative;
  aspect-ratio:1/1;
}
.case-img{
  position:absolute;
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.case-img img{width:100%; height:100%; object-fit:cover}
.case-img-1{top:0; left:0; width:75%; aspect-ratio:4/3; transform:rotate(-2deg); z-index:2}
.case-img-2{bottom:0; right:0; width:50%; aspect-ratio:1/1; transform:rotate(3deg); z-index:1}
.case-content h3{
  font-family:'Bricolage Grotesque', serif;
  font-size:clamp(32px, 4vw, 44px);
  font-weight:700;
  letter-spacing:-0.03em;
  line-height:1.05;
  margin:18px 0 16px;
}
.case-content h3 em{font-style:italic; font-weight:400}
.case-content > p{font-size:16px; color:var(--ink-soft); line-height:1.65; margin-bottom:26px}
.case-meta-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  padding:24px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-bottom:30px;
}
.case-meta-item{text-align:center}
.case-meta-item strong{
  display:block;
  font-family:'Bricolage Grotesque', serif;
  font-size:24px;
  font-weight:700;
  color:var(--ink);
  letter-spacing:-0.01em;
}
.case-meta-item span{font-size:11px; color:var(--gray-soft); letter-spacing:1px; font-weight:600; text-transform:uppercase}

/* ============ AREAS DETAIL ============ */
.area-cards{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
}
.area-detail{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  transition:.35s var(--ease);
}
.area-detail:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  border-color:var(--ink);
}
.area-detail-head{
  background:var(--ink);
  color:var(--cream);
  padding:24px 28px;
  display:flex; justify-content:space-between; align-items:center;
}
.area-detail-head h3{
  font-family:'Bricolage Grotesque', serif;
  font-size:24px;
  font-weight:700;
  color:var(--cream);
  letter-spacing:-0.02em;
}
.area-detail-head small{
  color:var(--lime);
  font-size:11px; letter-spacing:1.5px; font-weight:700; text-transform:uppercase;
}
.area-detail-body{padding:26px 28px}
.area-postcodes{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px}
.area-postcode{
  background:var(--lime);
  color:var(--ink);
  padding:4px 10px;
  border-radius:6px;
  font-size:11px;
  font-weight:800;
  letter-spacing:0.5px;
}
.area-detail-body > p{font-size:14px; color:var(--ink-soft); line-height:1.6; margin-bottom:18px}
.area-detail-stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.area-stat{text-align:center}
.area-stat strong{
  display:block;
  font-family:'Bricolage Grotesque', serif;
  font-size:18px;
  color:var(--ink);
  font-weight:700;
  letter-spacing:-0.01em;
  margin-bottom:2px;
}
.area-stat span{font-size:10px; color:var(--gray-soft); letter-spacing:1px; font-weight:600; text-transform:uppercase}

/* ============ AREA MAP ============ */
.area-map-section{
  padding:100px 0;
  background:var(--ink);
  color:var(--cream);
}
.area-map-content{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:60px;
  align-items:center;
}
.area-map-content h2{
  font-family:'Bricolage Grotesque', serif;
  font-size:clamp(36px, 4.5vw, 56px);
  font-weight:700;
  line-height:0.98;
  letter-spacing:-0.03em;
  color:var(--cream);
  margin-bottom:18px;
}
.area-map-content h2 em{font-style:italic; color:var(--lime); font-weight:400}
.area-map-content > div > p{color:rgba(250,247,240,0.75); margin-bottom:30px; line-height:1.65; font-size:16px}
.area-map-stats{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
}
.area-map-stat strong{
  display:block;
  font-family:'Bricolage Grotesque', serif;
  font-size:36px;
  font-weight:700;
  color:var(--lime);
  letter-spacing:-0.02em;
  line-height:1;
  margin-bottom:6px;
}
.area-map-stat span{font-size:11px; letter-spacing:1.5px; font-weight:600; text-transform:uppercase; opacity:0.85}

.map-svg-wrap{
  position:relative;
}
.map-svg-wrap svg{width:100%; height:auto}
.map-pin{
  fill:var(--lime);
  stroke:var(--ink); stroke-width:1.5;
  filter:drop-shadow(0 0 12px rgba(205,240,44,0.6));
  cursor:pointer;
  transition:.3s var(--ease);
}
.map-pin:hover{fill:var(--coral); transform-origin:center; transform:scale(1.5)}
.map-label{
  fill:var(--cream); font-size:10px; font-weight:700;
  font-family:'Bricolage Grotesque', serif;
}

/* ============ BEFORE / AFTER ============ */
.before-after{padding:100px 0; background:var(--cream-warm)}
.ba-wrap{max-width:980px; margin:0 auto}
.ba-slider{
  position:relative;
  aspect-ratio:16/9;
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  user-select:none;
}
.ba-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.ba-after-wrap{
  position:absolute; inset:0;
  width:50%; height:100%;
  overflow:hidden;
}
.ba-after-wrap img{
  position:absolute; top:0; left:0;
  width:100vw; height:100%;
  object-fit:cover;
  max-width:none;
}
.ba-handle{
  position:absolute; top:0; bottom:0;
  left:50%; width:4px;
  background:var(--lime);
  cursor:ew-resize;
  z-index:10;
  transform:translateX(-50%);
}
.ba-handle-knob{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:60px; height:60px;
  background:var(--lime);
  border-radius:50%;
  display:grid; place-items:center;
  color:var(--ink);
  font-size:22px;
  font-weight:800;
  box-shadow:var(--shadow-lime);
}
.ba-label{
  position:absolute;
  top:20px;
  background:var(--ink);
  color:var(--cream);
  padding:6px 14px;
  border-radius:100px;
  font-size:11px;
  letter-spacing:1.5px; font-weight:700;
  text-transform:uppercase;
  z-index:5;
}
.ba-label.before{left:20px}
.ba-label.after{right:20px; background:var(--lime); color:var(--ink)}
.ba-meta{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:24px;
  flex-wrap:wrap;
  gap:20px;
}
.ba-meta-info strong{
  display:block;
  font-family:'Bricolage Grotesque', serif;
  font-size:18px;
  color:var(--ink);
  letter-spacing:-0.01em;
}
.ba-meta-info span{font-size:13px; color:var(--ink-soft)}
.ba-thumbs{display:flex; gap:8px}
.ba-thumb{
  width:54px; height:54px;
  border-radius:10px;
  overflow:hidden;
  border:2px solid transparent;
  transition:.3s var(--ease);
  padding:0;
}
.ba-thumb img{width:100%; height:100%; object-fit:cover}
.ba-thumb:hover{transform:translateY(-2px)}
.ba-thumb.active{border-color:var(--ink); box-shadow:var(--shadow-md)}

/* ============ TIER LISTS ============ */
.tier-list{list-style:none; display:flex; flex-direction:column; gap:10px}
.tier-list li{
  font-size:14px;
  padding-left:26px;
  position:relative;
  line-height:1.55;
  color:var(--ink);
}
.tier-list li::before{
  content:"";
  position:absolute; left:0; top:7px;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--lime);
  border:2px solid var(--ink);
}

/* ============ INCLUDED CARDS (services deep dive) ============ */
.included-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.inc-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px 22px;
  transition:.3s var(--ease);
}
.inc-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:var(--ink);
}
.inc-icon{
  width:44px; height:44px;
  background:var(--lime);
  border-radius:12px;
  display:grid; place-items:center;
  font-size:20px;
  margin-bottom:14px;
}
.inc-card h4{
  font-family:'Bricolage Grotesque', serif;
  font-size:17px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:6px;
  letter-spacing:-0.01em;
}
.inc-card p{font-size:13px; color:var(--ink-soft); line-height:1.55}

/* ============ PLATFORM TILES (reviews) ============ */
.platforms-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  margin:30px 0;
}
.platform{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  padding:24px;
  text-align:center;
  transition:.3s var(--ease);
}
.platform:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:var(--ink);
}
.platform-name{
  font-family:'Bricolage Grotesque', serif;
  font-size:14px; font-weight:700;
  color:var(--ink);
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:8px;
}
.platform-rating{
  font-family:'Bricolage Grotesque', serif;
  font-size:42px;
  font-weight:700;
  color:var(--ink);
  line-height:1;
  letter-spacing:-0.02em;
  margin-bottom:6px;
}
.platform-stars{color:var(--star); letter-spacing:2px; font-size:14px; margin-bottom:6px}
.platform-count{font-size:11px; color:var(--gray-soft); font-weight:600}

/* ============ ADVANCED pSEO COMPONENTS (cost/compare/property/borough) ============ */

/* Cost breakdown table */
.cost-table{
  width:100%; border-collapse:collapse;
  background:var(--paper);
  border-radius:18px; overflow:hidden;
  box-shadow:var(--shadow-md);
  border:1px solid var(--line);
}
.cost-table th, .cost-table td{
  padding:18px 22px; text-align:left;
  border-bottom:1px solid var(--line); font-size:14px;
}
.cost-table thead th{
  background:var(--ink); color:var(--cream);
  font-family:'Bricolage Grotesque', serif;
  font-weight:700; font-size:13px;
  letter-spacing:1.5px; text-transform:uppercase;
}
.cost-table tbody tr:last-child td{border-bottom:0}
.cost-table tbody tr:hover{background:var(--cream-warm)}
.cost-table .price{
  font-family:'Bricolage Grotesque', serif;
  font-weight:700; color:var(--coral);
  font-size:15px; letter-spacing:-0.01em;
}
.cost-table .total td{
  background:var(--ink); color:var(--cream);
  font-weight:700; font-size:16px;
}
.cost-table .total .price{color:var(--lime); font-size:22px; letter-spacing:-0.02em}

/* Cost factor bars */
.cost-factors{display:flex; flex-direction:column; gap:18px; max-width:600px}
.cost-factor{display:flex; align-items:center; gap:18px}
.cost-factor-label{flex:0 0 130px; font-size:13px; font-weight:700; color:var(--ink)}
.cost-factor-bar{
  flex:1; height:14px;
  background:var(--cream-warm);
  border-radius:100px; overflow:hidden;
  border:1px solid var(--line);
}
.cost-factor-fill{
  height:100%;
  background:var(--lime);
  border-radius:100px;
  box-shadow:0 0 8px var(--lime-glow);
  transform-origin:left;
  animation:fillBar 1s var(--ease) backwards;
}
@keyframes fillBar{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
.cost-factor-pct{
  flex:0 0 50px; font-size:12px; font-weight:800;
  color:var(--ink); text-align:right;
  font-family:'Bricolage Grotesque', serif;
}

/* Comparison columns */
.compare-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:30px;
  align-items:start;
  margin-top:40px;
}
.compare-col{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:24px;
  padding:32px 28px;
  position:relative;
  transition:.35s var(--ease);
}
.compare-col:hover{box-shadow:var(--shadow-md); transform:translateY(-4px)}
.compare-col.winner{
  background:var(--ink);
  color:var(--cream);
  border-color:var(--lime);
  box-shadow:0 0 0 3px rgba(205,240,44,0.20), var(--shadow-lg);
}
.compare-col.winner h3, .compare-col.winner .compare-list li{color:var(--cream)}
.compare-col h3{
  font-family:'Bricolage Grotesque', serif;
  font-size:30px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:6px;
  letter-spacing:-0.02em;
}
.compare-col .compare-tag{
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:var(--coral); font-weight:800;
  margin-bottom:14px;
}
.compare-col.winner .compare-tag{color:var(--lime)}
.compare-col .compare-price{
  font-family:'Bricolage Grotesque', serif;
  font-size:36px; font-weight:700;
  color:var(--ink); line-height:1;
  margin:14px 0 4px;
  letter-spacing:-0.02em;
}
.compare-col.winner .compare-price{color:var(--lime)}
.compare-col .compare-meta{
  font-size:12px; color:var(--gray-soft); letter-spacing:0.5px;
  margin-bottom:22px;
}
.compare-col.winner .compare-meta{color:rgba(250,247,240,0.7)}
.compare-list{
  list-style:none; display:flex; flex-direction:column;
  gap:10px; padding:0; margin-bottom:24px;
}
.compare-list li{
  font-size:14px;
  display:flex; gap:10px; align-items:flex-start;
  color:var(--ink);
}
.compare-list li::before{
  content:"+"; color:var(--lime-deep);
  font-weight:900; flex-shrink:0; font-size:18px;
}
.compare-col.winner .compare-list li::before{color:var(--lime)}
.compare-list.cons li::before{content:"−"; color:var(--gray-soft)}
.compare-vs{
  font-family:'Bricolage Grotesque', serif;
  font-size:60px; font-weight:700;
  color:var(--coral); font-style:italic;
  align-self:center;
  letter-spacing:-0.04em;
}

/* Property characteristics */
.prop-chars{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  margin-bottom:40px;
}
.prop-char{
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:18px;
  padding:24px;
  text-align:center;
  transition:.3s var(--ease);
}
.prop-char:hover{
  border-color:var(--ink);
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}
.prop-char .pc-icon{font-size:32px; margin-bottom:10px; display:block}
.prop-char strong{
  display:block;
  font-family:'Bricolage Grotesque', serif;
  font-size:18px; font-weight:700;
  color:var(--ink); margin-bottom:4px;
  letter-spacing:-0.01em;
}
.prop-char small{font-size:12px; color:var(--gray-soft); letter-spacing:0.5px}

/* Borough hub specific */
.borough-hero-stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  background:var(--ink);
  color:var(--cream);
  padding:40px;
  border-radius:24px;
  margin:30px 0;
  position:relative; overflow:hidden;
}
.borough-hero-stats::before{
  content:""; position:absolute; top:-100px; right:-100px;
  width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, var(--lime) 0%, transparent 65%);
  opacity:0.18;
}
.borough-hero-stats > div{position:relative; z-index:1; text-align:center}
.borough-hero-stats strong{
  display:block;
  font-family:'Bricolage Grotesque', serif;
  font-size:42px; font-weight:700;
  color:var(--lime);
  line-height:1; letter-spacing:-0.02em;
  margin-bottom:6px;
}
.borough-hero-stats span{
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  opacity:0.85;
}

/* Decision matrix */
.decision-matrix{
  background:var(--paper);
  border-radius:20px; padding:32px;
  border:1px solid var(--line);
}
.decision-row{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:24px; padding:18px 0;
  align-items:center;
  border-bottom:1px solid var(--line);
}
.decision-row:last-child{border-bottom:0}
.decision-cond{font-size:14px; color:var(--ink); font-weight:600}
.decision-arrow{
  font-family:'Bricolage Grotesque', serif;
  color:var(--coral);
  font-size:28px; font-style:italic;
}
.decision-result{font-size:15px; font-weight:800; color:var(--ink); font-family:'Bricolage Grotesque', serif}
.decision-result.alt{color:var(--coral)}

/* Pricing hero block */
.price-hero{
  background:var(--ink);
  color:var(--cream);
  padding:60px;
  border-radius:24px;
  margin-bottom:40px;
  position:relative; overflow:hidden;
  box-shadow:var(--shadow-xl);
}
.price-hero::before{
  content:""; position:absolute; top:-150px; right:-150px;
  width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle, var(--lime) 0%, transparent 60%);
  opacity:0.18;
}
.price-hero-content{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:50px; align-items:center;
}
.price-hero .ph-tag{
  font-size:12px; letter-spacing:2px; text-transform:uppercase;
  color:var(--lime); font-weight:800;
  margin-bottom:14px;
}
.price-hero h2{
  font-family:'Bricolage Grotesque', serif;
  font-size:clamp(40px, 5vw, 60px);
  font-weight:700; line-height:0.98;
  letter-spacing:-0.03em;
  margin-bottom:18px; color:var(--cream);
}
.price-hero h2 em{font-style:italic; color:var(--lime); font-weight:400}
.price-hero .ph-range{
  display:flex; align-items:baseline; gap:14px;
  margin:24px 0 18px;
}
.price-hero .ph-low, .price-hero .ph-high{
  font-family:'Bricolage Grotesque', serif;
  font-size:60px; font-weight:700;
  color:var(--lime);
  line-height:1; letter-spacing:-0.03em;
}
.price-hero .ph-dash{font-size:32px; color:rgba(250,247,240,0.5)}
.price-hero p{font-size:16px; color:rgba(250,247,240,0.85); margin-bottom:0}

/* Borough overview list */
.borough-areas{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin-bottom:50px;
}
.borough-area{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px 20px;
  transition:.3s var(--ease);
  display:block;
}
.borough-area:hover{
  border-color:var(--ink);
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}
.borough-area strong{
  display:block;
  font-family:'Bricolage Grotesque', serif;
  font-size:18px; color:var(--ink);
  font-weight:700; margin-bottom:4px;
  letter-spacing:-0.01em;
}
.borough-area small{
  font-size:11px; color:var(--coral);
  font-weight:800; letter-spacing:1px;
  text-transform:uppercase;
}
.borough-area p{font-size:13px; color:var(--gray-soft); margin-top:6px; line-height:1.5}

/* ============ RESPONSIVE ============ */
@media(max-width:1024px){
  .hero-grid{grid-template-columns:1fr; gap:40px}
  .hero-svg-wrap{max-width:480px; margin:0 auto}
  .services-grid{grid-template-columns:repeat(2, 1fr)}
  .why-grid{grid-template-columns:1fr; gap:50px}
  .why-images{aspect-ratio:1.1/1; max-width:560px; margin:0 auto}
  .process-steps{grid-template-columns:repeat(2, 1fr); gap:40px}
  .step-line{display:none}
  .areas-grid{grid-template-columns:repeat(3, 1fr)}
  .gallery-grid{grid-template-columns:repeat(3, 1fr); grid-auto-rows:160px}
  .test-grid{grid-template-columns:1fr 1fr}
  .faq-grid{grid-template-columns:1fr; gap:40px}
  .footer-top{grid-template-columns:1fr 1fr; gap:40px}
  .stats-row{grid-template-columns:repeat(2,1fr); gap:30px}
  .area-cards{grid-template-columns:1fr}
  .area-map-content{grid-template-columns:1fr}
  .case-study{grid-template-columns:1fr; gap:40px}
  .compare-grid{grid-template-columns:1fr; gap:14px}
  .compare-vs{padding:14px 0}
  .borough-hero-stats{grid-template-columns:repeat(2,1fr)}
  .prop-chars{grid-template-columns:repeat(2,1fr)}
  .price-hero-content{grid-template-columns:1fr; gap:30px}
  .borough-areas{grid-template-columns:repeat(2,1fr)}
  .price-hero{padding:40px 30px}
  .price-hero .ph-low, .price-hero .ph-high{font-size:46px}
  .platforms-row{grid-template-columns:repeat(2,1fr)}
  .included-grid{grid-template-columns:repeat(2,1fr)}
  .project-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .main-nav{display:none}
  .menu-toggle{display:flex}
  .header-cta .btn{padding:10px 16px; font-size:13px}
  .topbar-row{font-size:12px}
  .topbar-left{gap:10px}
  .services-grid{grid-template-columns:1fr}
  .areas-grid{grid-template-columns:repeat(2, 1fr)}
  .gallery-grid{grid-template-columns:repeat(2, 1fr); grid-auto-rows:140px}
  .g-1{grid-column:span 2}
  .g-4{grid-column:span 2}
  .test-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr; gap:30px}
  .stats-row{grid-template-columns:1fr; gap:20px; padding:30px}
  .borough-hero-stats{grid-template-columns:1fr}
  .borough-areas{grid-template-columns:1fr}
  .prop-chars{grid-template-columns:1fr}
  .platforms-row{grid-template-columns:1fr}
  .included-grid{grid-template-columns:1fr}
  .project-grid{grid-template-columns:1fr}
  .test-grid.extended{grid-template-columns:1fr}
  .ba-handle-knob{width:48px; height:48px; font-size:18px}
  .quote-band-row{flex-direction:column; align-items:flex-start}
  .case-meta-row{grid-template-columns:1fr}
}