/* ===== UTILITIES ===== */
.u-action-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--green-d);
  transition: border-color 0.22s var(--ease), gap 0.22s var(--ease), color 0.22s var(--ease);
}
.u-action-link svg {
  transition: transform 0.22s var(--ease);
  width: 1em;
  height: 1em;
}
@media(hover: hover) {
  .u-action-link:hover {
    gap: 0.68rem;
  }
  .u-action-link:hover svg {
    transform: translateX(4px);
  }
}
/* ===== WALLZA — Hero (full-bleed cinematic, warm, single-focus) ===== */
*,*::before,*::after{box-sizing:border-box;margin:0}
:root{
  --green:#1E4B3A; --green-2:#163A2B; --green-d:#0E2018; --green-soft:#E9F0EC;
  --cream:#F6F0E4; --bone:#FCFAF3; --gold:#C29B45; --gold-d:#9C7C2E; --gold-l:#E7C878;
  --ink:#17221C; --muted:#586759; --line:#E7DFCE; --wa:#25D366;
  --ff:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --fh:'Fraunces',Georgia,serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--ff);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;background:var(--green-d)}
video,svg,img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--gold-l);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:1rem;top:-60px;background:var(--green);color:#fff;padding:.6rem 1rem;border-radius:10px;z-index:1000}
.skip:focus{top:1rem}

/* ---- Hero shell ---- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;color:#fff}

/* ---- Full-bleed media (the stage) ---- */
.hero__media{position:absolute;inset:0;z-index:-1}
.hero__media video{width:100%;height:100%;object-fit:cover;object-position:78% center;transform:scale(1.03);
  animation:kb 32s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.03)}to{transform:scale(1.1)}}
.hero__scrim{position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(9,20,15,.74) 0%,rgba(9,20,15,.4) 32%,rgba(9,20,15,.06) 58%,transparent 78%),
    linear-gradient(0deg,rgba(9,20,15,.6) 0%,transparent 42%),
    radial-gradient(120% 85% at 88% 6%,rgba(231,200,120,.14),transparent 52%)}

/* ---- Top bar ---- */
.hbar{position:relative;z-index:3;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:clamp(1.3rem,2.8vh,2rem) clamp(1.6rem,5vw,4rem)}
.brand{font-family:var(--fh);font-weight:700;font-size:clamp(1.85rem,2.4vw,2.35rem);letter-spacing:-.02em;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.4)}
.brand span{color:var(--gold-l)}
.hbar__nav{display:flex;gap:2.6rem}
.hbar__nav a{font-weight:600;font-size:.94rem;letter-spacing:.01em;color:rgba(255,255,255,.92);position:relative;transition:color .2s}
.hbar__nav a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:2px;background:var(--gold-l);transition:width .25s var(--ease)}
.hbar__nav a:hover{color:#fff}.hbar__nav a:hover::after{width:100%}
.hbar__right{display:flex;align-items:center;gap:1.2rem}
.hbar__phone{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:.95rem;color:#fff}
.hbar__phone svg{width:18px;height:18px;color:var(--gold-l)}

/* ---- Body: lockup + human voice ---- */
.hero__body{position:relative;z-index:2;flex:1 1 auto;display:flex;align-items:flex-end;justify-content:space-between;gap:2.5rem;
  padding:clamp(1.6rem,4vh,3.2rem) clamp(1.6rem,5vw,4rem) clamp(2.2rem,6vh,4rem)}

.hero__lockup{max-width:min(42rem,90%)}
.hero__lockup>*{animation:rise .7s var(--ease) both}
.hero__lockup>*:nth-child(2){animation-delay:.06s}
.hero__lockup>*:nth-child(3){animation-delay:.12s}
.hero__lockup>*:nth-child(4){animation-delay:.18s}
.hero__lockup>*:nth-child(5){animation-delay:.24s}
.hero__lockup>*:nth-child(6){animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.hero__eyebrow{display:inline-flex;align-items:center;gap:.65rem;font-size:.8rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-l);margin-bottom:1.4rem}
.hero__eyebrow::before{content:"";width:30px;height:1.5px;background:linear-gradient(90deg,var(--gold-l),transparent)}
.hero__title{font-family:var(--fh);font-weight:600;letter-spacing:-.025em;line-height:1.06;color:#fff;
  font-size:clamp(2.4rem,1rem+4.4vw,4.7rem);text-shadow:0 3px 30px rgba(0,0,0,.45)}
.hero__title em{font-style:normal;color:var(--gold-l);position:relative;white-space:nowrap}
.hero__title em::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.12em;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-l),var(--gold));opacity:.65;transform:scaleX(0);transform-origin:left;
  animation:uline 1s var(--ease) .4s forwards}
@keyframes uline{to{transform:scaleX(1)}}
.hero__sub{margin-top:1.4rem;font-size:clamp(1.02rem,.95rem+.5vw,1.26rem);line-height:1.6;color:rgba(255,255,255,.9);max-width:42ch}
.hero__sub strong{color:var(--gold-l);font-weight:700}
.hero__promise{margin-top:1rem;font-family:var(--fh);font-style:italic;font-weight:500;
  font-size:clamp(1rem,.95rem+.4vw,1.18rem);color:var(--gold-l);max-width:38ch;line-height:1.45}

.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:56px;padding:.9rem 1.7rem;
  border-radius:999px;font-weight:700;font-size:1rem;border:2px solid transparent;transition:.22s var(--ease);white-space:nowrap}
.btn svg{width:1.1em;height:1.1em}
.btn--primary{background:linear-gradient(180deg,var(--gold-l),var(--gold));color:var(--green-d);
  box-shadow:0 14px 30px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.4)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 22px 42px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.5)}
.btn--primary svg{transition:transform .22s var(--ease)}
.btn--primary:hover svg{transform:translateX(4px)}
.btn--wa{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.42);backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.btn--wa:hover{background:var(--wa);border-color:var(--wa);color:#06310f;transform:translateY(-2px);box-shadow:0 14px 30px rgba(37,211,102,.32)}
.btn:active{transform:translateY(0)}

.hero__risk{display:inline-flex;align-items:center;gap:.55rem;margin-top:1.4rem;font-size:.92rem;font-weight:600;color:rgba(255,255,255,.86)}
.hero__risk svg{width:18px;height:18px;color:var(--gold-l);flex-shrink:0}

.hero__proof{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:1.8rem;
  padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.16)}
.hero__proof-main{display:flex;align-items:baseline;gap:.5rem}
.hero__proof-main b{font-family:var(--fh);font-weight:600;font-size:1.5rem;line-height:1;color:#fff}
.hero__proof-sub{font-size:.86rem;font-weight:500;color:rgba(255,255,255,.72);max-width:9ch;line-height:1.15}
.hero__stars{color:var(--gold-l);letter-spacing:.05em;font-size:.9rem;align-self:center}
.hero__pipe{width:1px;height:30px;background:rgba(255,255,255,.2)}
.hero__areas{flex:1 1 100%;margin-top:.4rem;font-size:.82rem;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.6)}

/* ---- Human voice card — real Google-review styling ---- */
.hero__voice{flex:0 0 auto;width:300px;align-self:flex-end;margin-bottom:.3rem;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.24);border-radius:18px;padding:1.15rem 1.25rem;
  backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 20px 50px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.22);
  animation:rise .7s var(--ease) .38s both;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.hero__voice:hover{transform:translateY(-4px);box-shadow:0 28px 60px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.28)}
.hero__voice-top{display:flex;align-items:center;gap:.7rem}
.hero__face{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--c);color:#2a1e08;
  font-weight:800;font-size:1.05rem;font-family:var(--fh);flex-shrink:0;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.hero__voice-name{font-size:.95rem;color:#fff;font-weight:700;line-height:1.1}
.hero__voice-loc{font-size:.78rem;color:rgba(255,255,255,.65);font-weight:500}
.hero__gmark{margin-left:auto;width:22px;height:22px}
.hero__gmark svg{width:22px;height:22px}
.hero__voice-stars{display:block;margin:.7rem 0 .1rem;color:#FBBC05;letter-spacing:.06em;font-size:.9rem}
.hero__voice blockquote{margin:.45rem 0 .6rem;font-size:.96rem;line-height:1.5;color:rgba(255,255,255,.95);font-weight:500}
.hero__voice-proj{display:inline-block;font-size:.76rem;font-weight:600;letter-spacing:.01em;color:var(--gold-l);
  background:rgba(231,200,120,.12);border:1px solid rgba(231,200,120,.24);border-radius:999px;padding:.28rem .7rem}

/* ---- Mute ---- */
.hero__mute{position:absolute;right:clamp(1.2rem,4vw,3.4rem);top:clamp(4.4rem,10vh,6rem);z-index:3;width:40px;height:40px;
  border-radius:50%;background:rgba(9,20,15,.5);color:#fff;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);
  display:grid;place-items:center;cursor:pointer;font-size:.95rem;transition:.2s}
.hero__mute:hover{background:rgba(9,20,15,.72);transform:scale(1.06)}

/* ---- Tablet ---- */
@media (max-width:900px){
  .hbar__nav{display:none}
  .hero__media video{object-position:70% center}
  .hero__body{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:1.8rem}
  .hero__voice{width:100%;max-width:26rem}
}
@media (max-width:560px){
  .hbar__phone span{display:none}
  .hero__cta{width:100%}
  .hero__cta .btn{flex:1 1 100%}
  .hero__sub{font-size:1.04rem}
  .hero__proof{gap:.5rem 1.1rem}
  .hero__areas{font-size:.78rem}
  .hero__voice{max-width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .hero__media video{transform:scale(1.04)}
  .hero__lockup>*,.hero__voice{opacity:1!important;transform:none!important}
  .hero__title em::after{transform:none!important}
}

/* ===== Section — Featured Project (dark, editorial, mobile-first) ===== */
.fp{background:var(--green-d);color:#fff;
  padding:clamp(3rem,8vh,5.5rem) clamp(1.2rem,5vw,2rem) clamp(3.5rem,9vh,6rem)}

.fp__inner{max-width:1140px;margin:0 auto;
  display:flex;flex-direction:column;gap:clamp(2rem,5vh,2.8rem);
  transition:transform .4s var(--ease)}

/* Photo link — entire image is the primary tap target */
.fp__photo-link{display:block;border-radius:20px;overflow:hidden;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.7);text-decoration:none}

/* Photo */
.fp__media{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;
  background:linear-gradient(160deg,var(--green-2),var(--green-d))}
.fp__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .75s var(--ease)}
.fp__media img.is-empty{opacity:0}
.fp__media::after{content:"Real project photo";position:absolute;inset:0;
  display:grid;place-items:center;
  font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(231,200,120,.4);z-index:0}
.fp__media img:not(.is-empty){position:relative;z-index:1}

/* Gradient scrim — badge readability */
.fp__media-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(0deg,rgba(9,20,15,.68) 0%,rgba(9,20,15,.1) 38%,transparent 55%),
             linear-gradient(180deg,rgba(9,20,15,.38) 0%,transparent 24%);
  transition:background .4s var(--ease)}

/* "Real Project" label — top right */
.fp__badge-live{position:absolute;top:1rem;right:1rem;z-index:4;
  font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-l);background:rgba(9,20,15,.62);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:999px;padding:.22rem .7rem;
  border:1px solid rgba(231,200,120,.22);pointer-events:none}

/* Metadata badges — bottom left cluster */
.fp__badges{position:absolute;bottom:1rem;left:1rem;z-index:4;
  display:flex;flex-wrap:wrap;gap:.35rem;pointer-events:none}
.fp__badge{font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.8);background:rgba(9,20,15,.54);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:999px;padding:.22rem .65rem;
  border:1px solid rgba(255,255,255,.1)}

/* Text column */
.fp__content{display:flex;flex-direction:column;gap:1rem}
.fp__eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-l)}
.fp__title{font-family:var(--fh);font-weight:600;letter-spacing:-.025em;line-height:1.1;
  font-size:clamp(2.4rem,9vw,4.5rem);color:#fff;margin:0}
.fp__hook{font-size:clamp(.94rem,.9rem+.28vw,1.04rem);line-height:1.62;
  color:rgba(255,255,255,.6);max-width:38ch}
.fp__meta{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.26);line-height:2}
.fp__meta span{opacity:.45}
.fp__cta{display:inline-flex;align-items:center;gap:.5rem;margin-top:.4rem;
  font-size:1rem;font-weight:700;color:#fff;letter-spacing:.01em;
  transition:color .22s var(--ease)}
.fp__cta svg{width:1.1em;height:1.1em;transition:transform .22s var(--ease)}
.fp__cta:hover{color:var(--gold-l)}
.fp__cta:hover svg{transform:translateX(5px)}

/* Desktop — large photo left (~66 %), slim text column right (~34 %) */
@media (min-width:780px){
  .fp__inner{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:clamp(3.5rem,5vw,6rem);
    align-items:center
  }
  .fp__photo-link{border-radius:24px}
  .fp__media{aspect-ratio:auto;align-self:stretch;min-height:580px}
  .fp__media img{height:100%}
  .fp__content{gap:1.2rem}
  .fp__title{font-size:clamp(2rem,3vw+.6rem,4rem)}
}
@media (min-width:1080px){
  .fp__inner{grid-template-columns:2fr 1fr}
  .fp__title{font-size:clamp(2.2rem,3.4vw,4.5rem)}
}

/* Hover — desktop only (devices that support true hover) */
@media (hover:hover){
  .fp__inner:hover{transform:translateY(-5px)}
  .fp__photo-link:hover .fp__media img{transform:scale(1.04)}
  .fp__photo-link:hover .fp__media-scrim{
    background:linear-gradient(0deg,rgba(9,20,15,.82) 0%,rgba(9,20,15,.22) 38%,rgba(9,20,15,.05) 55%),
               linear-gradient(180deg,rgba(9,20,15,.42) 0%,transparent 24%)
  }
}

/* =====================================================
   GOOGLE REVIEWS  (.rv)
   ===================================================== */

.rv{background:var(--cream);padding:clamp(4rem,10vh,7rem) clamp(1.2rem,5vw,2rem)}
.rv__inner{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(2.8rem,6vh,4.5rem)}

/* ----- Header ----- */
.rv__hd{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.rv__eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-d)}
.rv__score{display:inline-flex;align-items:center;gap:1.1rem}
.rv__score-num{font-family:var(--fh);font-weight:600;font-size:clamp(3.5rem,8vw,5.5rem);letter-spacing:-.03em;color:var(--ink);line-height:1}
.rv__score-meta{display:flex;flex-direction:column;gap:.22rem;text-align:left}
.rv__score-stars{color:#f59e0b;font-size:1.05rem;letter-spacing:.08em}
.rv__score-count{font-size:.78rem;font-weight:600;color:var(--muted)}
.rv__heading{font-family:var(--fh);font-weight:600;letter-spacing:-.022em;line-height:1.18;font-size:clamp(1.6rem,1rem+3vw,2.6rem);color:var(--ink);margin:0;max-width:30ch}

/* ----- Grid — mobile: stack ----- */
.rv__grid{display:flex;flex-direction:column;gap:clamp(.9rem,2vh,1.2rem)}

/* ----- Item types ----- */

/* Base card chrome shared by featured, review, compact */
.rv__item--feat,
.rv__item--review,
.rv__item--compact{
  background:#fff;
  border-radius:16px;
  padding:clamp(1.3rem,3vw,1.8rem);
  box-shadow:0 2px 16px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.04);
  display:flex;
  flex-direction:column;
  gap:.85rem
}
.rv__item--feat{
  box-shadow:0 4px 28px rgba(0,0,0,.09),0 0 0 1px rgba(0,0,0,.04)
}
.rv__item--compact{
  padding:clamp(1rem,2.4vw,1.4rem);
  gap:.65rem
}

/* Photo item — no card chrome, full-bleed image */
.rv__item--photo{
  margin:0;
  border-radius:16px;
  overflow:hidden;
  aspect-ratio:4/3;
  position:relative;
  background:linear-gradient(135deg,var(--green-2),var(--green-d))
}
.rv__item--photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease)
}
.rv__item--photo::after{
  content:"Real project photo";
  position:absolute;inset:0;
  display:grid;place-items:center;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(231,200,120,.4);pointer-events:none
}
.rv__photo-cap{
  position:absolute;bottom:0;left:0;right:0;
  padding:.7rem 1rem;
  background:linear-gradient(transparent,rgba(9,20,15,.68));
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.72)
}
@media(hover:hover){
  .rv__item--photo:hover img{transform:scale(1.03)}
}

/* Pull quote — dark green, large editorial typography */
.rv__item--pull{
  background:var(--green-d);
  border-radius:16px;
  padding:clamp(2rem,5vw,3rem) clamp(1.6rem,4vw,2.4rem);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1.2rem
}
.rv__pull-text{
  font-family:var(--fh);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.5rem,1rem+3.5vw,2.8rem);
  line-height:1.35;
  letter-spacing:-.018em;
  color:#fff;
  margin:0
}
.rv__pull-attr{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.36);
  font-style:normal
}

/* ----- Card internals (shared) ----- */
.rv__card-hd{display:flex;align-items:flex-start;gap:.75rem}
.rv__avatar{width:38px;height:38px;min-width:38px;border-radius:50%;background:var(--av,var(--green-2));color:#fff;display:grid;place-items:center;font-size:.86rem;font-weight:700}
.rv__name{font-size:.9rem;font-weight:700;color:var(--ink);font-style:normal;display:block;line-height:1.3}
.rv__badge-row{display:flex;align-items:center;gap:.45rem;margin-top:.18rem}
.rv__gbadge{display:flex;align-items:center}
.rv__date{font-size:.7rem;color:var(--muted);font-weight:500}
.rv__stars{color:#f59e0b;font-size:.9rem;letter-spacing:.1em;line-height:1}
.rv__text{font-size:clamp(.92rem,.88rem+.2vw,1rem);line-height:1.7;color:var(--ink);margin:0;font-style:normal}
.rv__text--lg{font-size:clamp(1rem,.92rem+.4vw,1.12rem);line-height:1.72}

/* Inline review photo inside featured card */
.rv__card-img{margin:0;border-radius:10px;overflow:hidden;aspect-ratio:16/9}
.rv__card-img img{width:100%;height:100%;object-fit:cover;display:block}

/* ----- Footer CTA ----- */
.rv__foot{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.rv__cta{display:inline-flex;align-items:center;gap:.55rem;font-size:.96rem;font-weight:700;color:var(--green-d);text-decoration:none;border-bottom:2px solid rgba(30,75,58,.18);padding-bottom:3px;transition:border-color .22s var(--ease),gap .22s var(--ease)}
.rv__cta svg{transition:transform .22s var(--ease)}
.rv__cta-sub{font-size:.72rem;font-weight:600;letter-spacing:.06em;color:var(--muted);margin:0}
@media(hover:hover){
  .rv__cta:hover{border-color:var(--green-d)}
  .rv__cta:hover svg{transform:translateX(5px)}
}

/* ----- Desktop — editorial 3-column grid ----- */
@media(min-width:780px){
  .rv__grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-template-areas:
      "a a b"
      "c d d"
      "e f g";
    gap:clamp(.9rem,1.4vw,1.2rem);
    align-items:stretch
  }
  .rv__item:nth-child(1){grid-area:a}
  .rv__item:nth-child(2){grid-area:b}
  .rv__item:nth-child(3){grid-area:c}
  .rv__item:nth-child(4){grid-area:d}
  .rv__item:nth-child(5){grid-area:e}
  .rv__item:nth-child(6){grid-area:f}
  .rv__item:nth-child(7){grid-area:g}

  /* Photo items fill the row height naturally */
  .rv__item--photo{aspect-ratio:auto;height:100%;min-height:240px}

  /* Pull quote takes its full 2-col space */
  .rv__item--pull{padding:clamp(2.2rem,4vw,3.2rem) clamp(2rem,4vw,2.8rem)}

  /* Featured: larger padding, room to breathe */
  .rv__item--feat{padding:clamp(1.8rem,3vw,2.4rem)}
}

@media(min-width:1080px){
  .rv__heading{font-size:2.6rem}
  .rv__item--feat{padding:2.4rem}
  .rv__pull-text{font-size:2.8rem}
}

/* =====================================================
   SERVICES  (.sv)
   Four distinct editorial entries — not cards.
   ===================================================== */

.sv{background:var(--bone);padding:clamp(4rem,10vh,7rem) clamp(1.2rem,5vw,2rem)}
.sv__inner{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(3rem,8vh,5.5rem)}

/* --- Section header --- */
.sv__hd{display:flex;flex-direction:column;gap:.9rem}
.sv__eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-d)}
.sv__heading{font-family:var(--fh);font-weight:600;letter-spacing:-.022em;line-height:1.15;font-size:clamp(1.8rem,1.2rem+3vw,3rem);color:var(--ink);margin:0}

/* --- Shared atoms --- */
.sv__label{font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:block}
.sv__label--gold{color:var(--gold-l)}
.sv__link{display:inline-flex;align-items:center;gap:.42rem;font-size:.84rem;font-weight:700;color:var(--green-d);transition:gap .22s var(--ease)}
.sv__link svg{flex-shrink:0;transition:transform .22s var(--ease)}
.sv__link--inv{color:rgba(255,255,255,.78)}
@media(hover:hover){
  .sv__link:hover{gap:.68rem}
  .sv__link:hover svg{transform:translateX(4px)}
}

/* shared image placeholder treatment */
.sv__feat-fig,
.sv__banner-fig,
.sv__villa-fig,
.sv__wp-fig{
  position:relative;
  background:linear-gradient(135deg,var(--green-2),var(--green-d))
}
.sv__feat-fig img,
.sv__banner-fig img,
.sv__villa-fig img,
.sv__wp-fig img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)}
.sv__feat-fig img.is-empty,
.sv__banner-fig img.is-empty,
.sv__villa-fig img.is-empty,
.sv__wp-fig img.is-empty{opacity:0}
.sv__feat-fig::after,
.sv__banner-fig::after,
.sv__villa-fig::after,
.sv__wp-fig::after{
  content:"Real project photo";position:absolute;inset:0;
  display:grid;place-items:center;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(231,200,120,.38);pointer-events:none
}

/* ===========================================
   1. INTERIOR — editorial feature spread
   Mobile: photo (16:9) → label → heading → desc → link
   Desktop: photo full width + two-column footer
   =========================================== */
.sv__feat{display:flex;flex-direction:column;gap:clamp(1.2rem,3vh,2rem)}
.sv__feat-fig{overflow:hidden;border-radius:16px;aspect-ratio:16/9}
.sv__feat-foot{display:flex;flex-direction:column;gap:1rem}
.sv__feat-title-col{display:flex;flex-direction:column;gap:.55rem}
.sv__feat-name{font-family:var(--fh);font-weight:600;letter-spacing:-.026em;line-height:1.08;font-size:clamp(2.2rem,1rem+5vw,4.8rem);color:var(--ink);margin:0}
.sv__feat-aside{display:flex;flex-direction:column;gap:.9rem}
.sv__feat-desc{font-size:clamp(.9rem,.86rem+.18vw,1rem);line-height:1.72;color:var(--muted)}

@media(hover:hover){
  .sv__feat:hover .sv__feat-fig img{transform:scale(1.04)}
}

/* ===========================================
   2. EXTERIOR — cinematic banner
   Mobile: photo (16:9) → label → heading → desc → link
   Desktop: photo (21:9) + two-column caption row
   =========================================== */
.sv__banner{display:flex;flex-direction:column;gap:clamp(1.2rem,3vh,2rem)}
.sv__banner-fig{overflow:hidden;border-radius:16px;aspect-ratio:16/9}
.sv__banner-cap{display:flex;flex-direction:column;gap:1rem}
.sv__banner-title-col{display:flex;flex-direction:column;gap:.55rem}
.sv__banner-name{font-family:var(--fh);font-weight:600;letter-spacing:-.022em;line-height:1.12;font-size:clamp(1.5rem,1rem+3vw,2.8rem);color:var(--ink);margin:0}
.sv__banner-aside{display:flex;flex-direction:column;gap:.9rem}
.sv__banner-desc{font-size:clamp(.86rem,.82rem+.18vw,.96rem);line-height:1.7;color:var(--muted)}

@media(hover:hover){
  .sv__banner:hover .sv__banner-fig img{transform:scale(1.04)}
}

/* ===========================================
   3+4. PAIR — Villa card + Waterproofing panel
   Mobile: stacked
   Desktop: villa 54% left, waterproofing 46% right
   =========================================== */
.sv__pair{display:flex;flex-direction:column;gap:clamp(.9rem,2vh,1.2rem)}

/* Villa editorial card */
.sv__villa{
  background:#fff;border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 2px 16px rgba(0,0,0,.06);
  transition:transform .44s var(--ease),box-shadow .44s var(--ease)
}
.sv__villa-fig{overflow:hidden;aspect-ratio:4/3;flex-shrink:0}
.sv__villa-body{padding:clamp(1.2rem,2.5vw,1.8rem);display:flex;flex-direction:column;gap:.55rem}
.sv__villa-name{font-family:var(--fh);font-weight:600;letter-spacing:-.02em;line-height:1.2;font-size:clamp(1.3rem,1rem+1.5vw,1.8rem);color:var(--ink);margin:0}
.sv__villa-desc{font-size:clamp(.86rem,.82rem+.18vw,.96rem);line-height:1.65;color:var(--muted)}

@media(hover:hover){
  .sv__villa:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(0,0,0,.1)}
  .sv__villa:hover .sv__villa-fig img{transform:scale(1.05)}
}

/* Waterproofing dark editorial panel */
.sv__wp{
  background:var(--green-d);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;color:#fff
}
.sv__wp-body{padding:clamp(1.8rem,4vw,2.8rem);display:flex;flex-direction:column;gap:clamp(.9rem,2vh,1.4rem)}
.sv__wp-name{font-family:var(--fh);font-weight:600;letter-spacing:-.022em;line-height:1.18;font-size:clamp(1.5rem,1rem+2.5vw,2.4rem);color:#fff;margin:0}
.sv__wp-desc{font-size:clamp(.86rem,.82rem+.18vw,.96rem);line-height:1.68;color:rgba(255,255,255,.58)}
.sv__wp-fig{overflow:hidden;aspect-ratio:16/9;flex-shrink:0;margin-top:auto}

@media(hover:hover){
  .sv__wp:hover .sv__wp-fig img{transform:scale(1.04)}
}

/* ===========================================
   VIEW ALL
   =========================================== */
.sv__more{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem;padding-top:.5rem}
.sv__more-also{font-size:.78rem;font-weight:600;letter-spacing:.06em;color:var(--muted)}
.sv__more-cta{display:inline-flex;align-items:center;gap:.5rem;font-size:.96rem;font-weight:700;color:var(--green-d);border-bottom:2px solid rgba(30,75,58,.18);padding-bottom:3px;transition:border-color .22s var(--ease),gap .22s var(--ease)}
.sv__more-cta svg{transition:transform .22s var(--ease)}
@media(hover:hover){
  .sv__more-cta:hover{border-color:var(--green-d)}
  .sv__more-cta:hover svg{transform:translateX(5px)}
}

/* ===========================================
   DESKTOP (780px+)
   =========================================== */
@media(min-width:780px){

  /* 1. Interior: two-column editorial footer */
  .sv__feat-foot{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(2.5rem,5vw,5rem);
    align-items:start
  }
  .sv__feat-name{font-size:clamp(3rem,1.5rem+3.5vw,4.8rem)}

  /* 2. Exterior: 21:9 cinematic + two-column caption */
  .sv__banner-fig{aspect-ratio:21/9}
  .sv__banner-cap{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(2.5rem,5vw,5rem);
    align-items:start
  }
  .sv__banner-name{font-size:clamp(1.8rem,1rem+2.2vw,2.8rem)}

  /* 3+4. Pair: side-by-side, aligned height */
  .sv__pair{flex-direction:row;align-items:stretch;min-height:500px}
  .sv__villa{flex:0 0 54%}
  .sv__villa-fig{aspect-ratio:unset;flex:1 1 0;min-height:0}
  .sv__villa-body{flex-shrink:0;padding:1.8rem 2rem 2.2rem}
  .sv__villa-name{font-size:1.75rem}

  .sv__wp{flex:1 1 0}
  .sv__wp-body{flex:1 1 auto;padding:2.4rem 2.8rem}
  .sv__wp-fig{aspect-ratio:unset;height:210px;flex-shrink:0}
  .sv__wp-name{font-size:clamp(1.7rem,1rem+1.8vw,2.4rem)}
}

@media(min-width:1080px){
  .sv__heading{font-size:3rem}
  .sv__feat-name{font-size:4.8rem}
  .sv__pair{min-height:540px}
  .sv__wp-fig{height:230px}
}

/* =====================================================
   PACKAGES / FINISH LEVELS  (.pk)
   Four editorial entries. No cards. No pricing.
   Photography bleeds edge-to-edge within each entry.
   ===================================================== */

.pk{overflow:hidden}

/* --- Section header --- */
.pk__hd{background:var(--bone);padding:clamp(4rem,10vh,7rem) clamp(1.6rem,5vw,4rem) clamp(2.5rem,6vh,4rem)}
.pk__hd-inner{max-width:600px;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:1rem}
.pk__eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-d)}
.pk__heading{font-family:var(--fh);font-weight:600;letter-spacing:-.024em;line-height:1.1;font-size:clamp(2.2rem,1rem+4.5vw,4rem);color:var(--ink);margin:0}
.pk__subhead{font-size:clamp(.88rem,.84rem+.18vw,.98rem);line-height:1.72;color:var(--muted);margin:0}

/* --- Shared atoms --- */
.pk__label{font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:block}
.pk__label--gold{color:var(--gold-l)}
.pk__name{font-family:var(--fh);font-weight:600;letter-spacing:-.022em;line-height:1.1;font-size:clamp(2rem,1rem+3.5vw,3.8rem);color:var(--ink);margin:0}
.pk__name--inv{color:#fff}
.pk__desc{font-size:clamp(.88rem,.84rem+.18vw,.98rem);line-height:1.72;color:var(--muted)}
.pk__desc--inv{color:rgba(255,255,255,.6)}
.pk__for{font-size:clamp(.84rem,.8rem+.14vw,.92rem);line-height:1.6;color:var(--muted)}
.pk__for--inv{color:rgba(255,255,255,.46)}
.pk__for strong{color:var(--ink);font-weight:700}
.pk__for--inv strong{color:rgba(255,255,255,.82)}
.pk__link{display:inline-flex;align-items:center;gap:.42rem;font-size:.84rem;font-weight:700;color:var(--green-d);transition:gap .22s var(--ease)}
.pk__link svg{flex-shrink:0;transition:transform .22s var(--ease)}
.pk__link--inv{color:rgba(255,255,255,.78)}
@media(hover:hover){
  .pk__link:hover{gap:.68rem}
  .pk__link:hover svg{transform:translateX(4px)}
}

/* --- Shared figure --- */
.pk__fig{margin:0;overflow:hidden;position:relative}
.pk__fig img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)}
.pk__fig img.is-empty{opacity:0}
.pk__fig::after{content:"Real project photo";position:absolute;inset:0;display:grid;place-items:center;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(231,200,120,.38);pointer-events:none}
@media(hover:hover){
  .pk__entry:hover .pk__fig img{transform:scale(1.04)}
}

/* ─────────────────────────────────────────
   MOBILE BASE — all entries: photo → text, stacked
   ───────────────────────────────────────── */
.pk__entry{display:flex;flex-direction:column}

/* Mobile: body padding + flex column */
.pk__body{display:flex;flex-direction:column;gap:clamp(.75rem,2vh,1.1rem);padding:clamp(1.6rem,5vw,2.4rem) clamp(1.4rem,5vw,2.4rem) clamp(2.2rem,6vh,3.5rem)}

/* Mobile: split (Premium two-col) stays stacked */
.pk__split{display:flex;flex-direction:column;gap:.85rem}

/* Mobile figure aspect ratios */
.pk__fig--a{aspect-ratio:3/2;background:linear-gradient(135deg,var(--green-2),var(--green-d))}
.pk__fig--b{aspect-ratio:3/2;background:linear-gradient(135deg,var(--green-2),var(--green-d))}
.pk__fig--c{aspect-ratio:3/2;background:linear-gradient(135deg,var(--green-2),var(--green-d))}
.pk__fig--d{aspect-ratio:3/2;background:linear-gradient(135deg,var(--green-2),var(--green-d))}

/* Entry backgrounds */
.pk__entry--a{background:var(--bone)}
.pk__entry--b{background:#fff}
.pk__entry--c{background:var(--cream)}
.pk__entry--d{background:var(--green-d)}

/* ─────────────────────────────────────────
   DESKTOP (780px+) — each entry its own composition
   ───────────────────────────────────────── */
@media(min-width:780px){

  /* 1. ESSENTIAL — text left (40%) · photo right (60%)
     DOM: figure first. CSS places body in left column via grid-areas. */
  .pk__entry--a{
    display:grid;
    grid-template-columns:40% 60%;
    grid-template-areas:"body fig";
    min-height:560px
  }
  .pk__fig--a{grid-area:fig;aspect-ratio:unset;height:100%}
  .pk__body--a{
    grid-area:body;
    padding:clamp(3rem,8vh,6rem) clamp(3rem,5vw,5rem);
    justify-content:center
  }
  .pk__entry--a .pk__name{font-size:clamp(2.6rem,1rem+3vw,4rem)}

  /* 2. PREMIUM — full-width 16:9 photo + editorial two-col text strip below */
  .pk__fig--b{aspect-ratio:16/9}
  .pk__body--b{
    max-width:1100px;width:100%;margin:0 auto;
    padding:clamp(2rem,5vh,3.5rem) clamp(2rem,5vw,4rem)
  }
  .pk__split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(2.5rem,5vw,6rem);
    align-items:start
  }
  .pk__entry--b .pk__name{font-size:clamp(2.4rem,1rem+3vw,4rem)}

  /* 3. ROYALE — photo left (58%) · text right (42%)
     DOM: figure first, naturally goes into left column. */
  .pk__entry--c{
    display:grid;
    grid-template-columns:58% 42%;
    min-height:580px
  }
  .pk__fig--c{aspect-ratio:unset;height:100%}
  .pk__body--c{
    padding:clamp(3rem,8vh,6rem) clamp(3rem,5vw,5rem);
    justify-content:center
  }
  .pk__entry--c .pk__name{font-size:clamp(2.6rem,1rem+3vw,4rem)}

  /* 4. LUXURY DESIGNER — full-width 16:9 photo + dark centered text below */
  .pk__fig--d{aspect-ratio:16/9}
  .pk__body--d{
    max-width:680px;width:100%;margin:0 auto;
    padding:clamp(2.8rem,7vh,5rem) clamp(2rem,5vw,4rem);
    text-align:center;
    align-items:center
  }
  .pk__entry--d .pk__name{font-size:clamp(2.6rem,1rem+3vw,4rem)}
}

@media(min-width:1080px){
  .pk__heading{font-size:4rem}
  .pk__entry--a{min-height:620px}
  .pk__entry--c{min-height:640px}
}

/* --- Footer consultation CTA --- */
.pk__foot{background:var(--bone);padding:clamp(3rem,8vh,5.5rem) clamp(1.6rem,5vw,4rem);text-align:center;display:flex;flex-direction:column;align-items:center;gap:.9rem}
.pk__foot-q{font-family:var(--fh);font-style:italic;font-size:clamp(1.1rem,1rem+1.5vw,1.9rem);color:var(--muted);letter-spacing:-.012em;line-height:1.3;margin:0}
.pk__foot-cta{display:inline-flex;align-items:center;gap:.5rem;font-size:.96rem;font-weight:700;color:var(--green-d);border-bottom:2px solid rgba(30,75,58,.18);padding-bottom:3px;transition:border-color .22s var(--ease),gap .22s var(--ease)}
.pk__foot-cta svg{transition:transform .22s var(--ease)}
@media(hover:hover){
  .pk__foot-cta:hover{border-color:var(--green-d)}
  .pk__foot-cta:hover svg{transform:translateX(5px)}
}

/* =====================================================
   WHY WALLZA — Documentary Timeline  (.ww)
   ===================================================== */

.ww{background:#fff;padding:clamp(5rem,12vh,9rem) clamp(1.4rem,5vw,3rem)}
.ww__inner{
  max-width:700px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:clamp(3.5rem,9vh,6rem)
}

/* Section header */
.ww__hd{margin:0}
.ww__eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-d);margin:0 0 .9rem}
.ww__heading{font-family:var(--fh);font-weight:600;letter-spacing:-.026em;line-height:1.08;font-size:clamp(2.1rem,1rem+4vw,3.8rem);color:var(--ink);margin:0 0 1rem}
.ww__sub{font-size:clamp(.9rem,.86rem+.2vw,1.02rem);color:var(--muted);line-height:1.7;margin:0}

/* Vertical timeline */
.ww__timeline{
  --pad:3rem;
  position:relative;
  list-style:none;
  margin:0;
  padding:0 0 0 var(--pad)
}
.ww__timeline::before{
  content:"";
  position:absolute;
  left:0;
  top:.8rem;
  bottom:0;
  width:1px;
  background:var(--line)
}

/* Each stage */
.ww__stage{position:relative;padding-bottom:clamp(2.2rem,6vh,3.2rem)}
.ww__stage--last{padding-bottom:0}

/* Icon dot — centered on the line via transform */
.ww__dot{
  position:absolute;
  left:calc(-1 * var(--pad));
  top:.1rem;
  transform:translateX(-50%);
  width:22px;height:22px;
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:50%;
  display:grid;place-items:center;
  color:var(--green-2);
  transition:border-color .22s var(--ease),color .22s var(--ease)
}
@media(hover:hover){
  .ww__stage:hover .ww__dot{border-color:var(--green-2);color:var(--green)}
}

/* Step number */
.ww__num{display:block;font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem}

/* Stage heading */
.ww__stage-name{font-family:var(--fh);font-weight:600;letter-spacing:-.018em;line-height:1.12;font-size:clamp(1.2rem,1rem+1.4vw,1.75rem);color:var(--ink);margin:0 0 .65rem}

/* One sentence */
.ww__what{font-size:clamp(.88rem,.84rem+.2vw,.98rem);line-height:1.75;color:var(--ink);margin:0 0 .6rem}

/* Why it matters — gold left rule + italic */
.ww__why{font-size:clamp(.84rem,.8rem+.16vw,.92rem);line-height:1.65;color:var(--muted);font-style:italic;padding-left:.9rem;border-left:2px solid var(--gold);margin:0}

/* Closing statement */
.ww__close{display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem;padding-top:clamp(1.5rem,5vh,2.5rem);border-top:1px solid var(--line)}
.ww__close-q{font-family:var(--fh);font-weight:600;font-style:italic;letter-spacing:-.02em;line-height:1.35;font-size:clamp(1.3rem,1rem+2.2vw,2.2rem);color:var(--ink);margin:0}
.ww__cta{display:inline-flex;align-items:center;gap:.5rem;font-size:.96rem;font-weight:700;color:var(--green-d);border-bottom:2px solid rgba(30,75,58,.18);padding-bottom:3px;transition:border-color .22s var(--ease),gap .22s var(--ease)}
.ww__cta svg{transition:transform .22s var(--ease)}
@media(hover:hover){
  .ww__cta:hover{border-color:var(--green-d)}
  .ww__cta:hover svg{transform:translateX(5px)}
}

@media(min-width:780px){
  .ww__timeline{--pad:3.5rem}
}