/* ===================================================
   EDI CARPENTER – Main Stylesheet
   =================================================== */

:root {
  /* Wood / accent palette — used selectively for icons, buttons, hover states */
  --wood-dark:   #2C1F14;
  --wood-mid:    #7C5338;
  --wood-warm:   #9E7355;
  --wood-light:  #C49670;
  --wood-gold:   #C9A35B;
  --wood-cream:  #FAF5EE;
  --wood-grain:  #B8875A;
  --black:       #0A0705;
  --white:       #FFFFFF;
  /* Editorial neutrals — modern charcoal/gray instead of warm browns */
  --text:        #1A1A1A;
  --text-light:  #525252;
  --text-muted:  #737373;
  --bg-light:    #FAFAFA;
  --bg-section:  #F5F5F4;
  --border-soft: #E7E5E4;
  --accent:      #C9A35B;
  --radius:      12px;
  --radius-lg:   24px;
  --shadow:      0 4px 24px rgba(20,20,20,0.06);
  --shadow-md:   0 8px 32px rgba(20,20,20,0.08);
  --shadow-lg:   0 16px 56px rgba(20,20,20,0.12);
  --transition:  0.4s cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; overflow-x: clip; }
body { overflow-x: clip; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-light);
  color: var(--text);
  line-height: 1.65;
}

h1,h2,h3,h4 { font-family: 'Playfair Display', serif; line-height: 1.2; }

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===================== REVEAL ANIMATIONS ===================== */
.reveal {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity 0.75s cubic-bezier(0.4,0,0.2,1), transform 0.75s cubic-bezier(0.4,0,0.2,1);
}
.reveal.from-left  { transform: translateX(-60px) translateY(0); }
.reveal.from-right { transform: translateX(60px)  translateY(0); }
.reveal.visible {
  opacity: 1;
  transform: translateY(0) translateX(0);
}
.reveal[data-delay="100"] { transition-delay: 0.1s; }
.reveal[data-delay="200"] { transition-delay: 0.2s; }
.reveal[data-delay="300"] { transition-delay: 0.3s; }
.reveal[data-delay="400"] { transition-delay: 0.4s; }

/* ===================== BUTTONS ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 50px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  transition: var(--transition);
  cursor: pointer;
  border: none;
}
.btn-primary {
  background: linear-gradient(135deg, var(--wood-gold), var(--wood-warm));
  color: var(--white);
  box-shadow: 0 4px 20px rgba(212,168,83,0.4);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(212,168,83,0.5);
}
.btn-outline {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.5);
}
.btn-outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--white);
}
.btn-full { width: 100%; justify-content: center; }
.section-tag {
  display: inline-block;
  background: transparent;
  color: #0F0F0F;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 14px 6px 0;
  border-radius: 0;
  margin-bottom: 18px;
  position: relative;
  font-family: 'Inter', sans-serif;
}
.section-tag::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--wood-gold);
  vertical-align: middle;
  margin-right: 12px;
  margin-bottom: 3px;
}
.section-header {
  text-align: center;
  margin-bottom: 60px;
}
.section-header h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  margin-bottom: 18px;
  color: #0F0F0F;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.section-header p {
  max-width: 580px;
  margin: 0 auto;
  color: #525252;
  font-size: 1.02rem;
  line-height: 1.65;
}

/* ===================== NAVBAR ===================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
  padding: 16px 0;
  background: rgba(10,7,5,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
  transition: padding 0.3s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: block;
}
.navbar.scrolled {
  padding: 10px 0;
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Animated SVG logo */
.logo-animated {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  animation: logoTilt 5s ease-in-out infinite;
}
.logo-svg { width: 100%; height: 100%; overflow: visible; }
.logo-ring {
  transform-origin: 22px 22px;
  animation: ringRotate 10s linear infinite;
}
@keyframes ringRotate { to { transform: rotate(360deg); } }
@keyframes logoTilt {
  0%, 100% { transform: perspective(220px) rotateY(0deg); }
  30%       { transform: perspective(220px) rotateY(14deg); }
  70%       { transform: perspective(220px) rotateY(-14deg); }
}
.logo-chip {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: chipReveal 3s ease-in-out infinite;
}
@keyframes chipReveal {
  0%, 20%   { stroke-dashoffset: 20; opacity: 0; }
  50%       { stroke-dashoffset: 0;  opacity: 1; }
  80%, 100% { stroke-dashoffset: -20; opacity: 0; }
}
.logo-text { display: flex; flex-direction: column; }
.logo-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}
.logo-sub {
  font-size: 0.7rem;
  color: var(--wood-gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-links a {
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.3s;
}
.nav-links a:hover { color: var(--wood-gold); }
.nav-cta {
  background: linear-gradient(135deg, var(--wood-gold), var(--wood-warm));
  color: var(--white) !important;
  padding: 10px 24px;
  border-radius: 50px;
  font-weight: 600 !important;
}
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(212,168,83,0.4);
}
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: var(--transition);
}

/* ===================== HERO ===================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #080e07;
}
.hero-canvas {
  position: absolute;
  inset: 0;
  background:
    /* Warm copper glow — bottom left, like a workshop lamp */
    radial-gradient(ellipse at 15% 80%, rgba(180,95,30,0.30) 0%, transparent 48%),
    /* Forest green shimmer — top right, like wood grain in light */
    radial-gradient(ellipse at 85% 15%, rgba(55,130,70,0.22) 0%, transparent 42%),
    /* Deep mahogany warm spot — center */
    radial-gradient(ellipse at 52% 58%, rgba(130,65,18,0.18) 0%, transparent 40%),
    /* Teal-green accent — mid left */
    radial-gradient(ellipse at 8%  42%, rgba(40,110,85,0.16) 0%, transparent 38%),
    /* Amber highlight — top center */
    radial-gradient(ellipse at 50% 5%,  rgba(200,145,55,0.10) 0%, transparent 40%),
    /* Base: deep forest → dark walnut → deep olive */
    linear-gradient(155deg, #0c1609 0%, #1c0f05 40%, #0a1510 75%, #160c04 100%);
}
/* Animated warm wood-grain lines */
.hero-canvas::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      14deg,
      transparent 0px,
      transparent 38px,
      rgba(196,120,50,0.045) 38px,
      rgba(196,120,50,0.045) 39px
    ),
    repeating-linear-gradient(
      -6deg,
      transparent 0px,
      transparent 55px,
      rgba(100,160,80,0.030) 55px,
      rgba(100,160,80,0.030) 56px
    );
  animation: grainMove 22s linear infinite;
}
@keyframes grainMove {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 200px 100px, -150px 80px; }
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.04) 45%, rgba(0,0,0,0.40) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 120px 24px 80px;
  max-width: 900px;
}
.hero-badge {
  display: inline-block;
  background: rgba(212,168,83,0.15);
  border: 1px solid rgba(212,168,83,0.4);
  color: var(--wood-gold);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 50px;
  margin-bottom: 28px;
  backdrop-filter: blur(8px);
}
.hero-title {
  font-size: clamp(2.5rem, 6vw, 5rem);
  color: var(--white);
  margin-bottom: 24px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.hero-accent {
  background: linear-gradient(135deg, var(--wood-gold), var(--wood-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: rgba(255,255,255,0.8);
  margin-bottom: 40px;
  line-height: 1.7;
}
.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Floating carpentry tools ── */
.tool-float {
  position: absolute;
  pointer-events: none;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Stroke outline makes shapes look thick & defined */
.tool-float svg {
  display: block;
  stroke: currentColor;
  stroke-width: 2.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke fill;
  /* Bob/float animation — independent from the horizontal drift */
  animation: toolBob 5s ease-in-out infinite;
}

/* Each tool bobs at its own offset so they're never in sync */
.tf1 svg { animation-delay:  0s;    animation-duration: 5.2s; }
.tf2 svg { animation-delay: -1.8s;  animation-duration: 6.0s; }
.tf3 svg { animation-delay: -3.4s;  animation-duration: 4.8s; }
.tf4 svg { animation-delay: -0.9s;  animation-duration: 5.6s; }
.tf5 svg { animation-delay: -2.6s;  animation-duration: 4.4s; }
.tf6 svg { animation-delay: -4.1s;  animation-duration: 5.8s; }

@keyframes toolBob {
  0%   { transform: translateY(0px)   rotate(0deg)  scale(1.00); }
  22%  { transform: translateY(-16px) rotate(5deg)  scale(1.06); }
  50%  { transform: translateY(-5px)  rotate(2deg)  scale(1.02); }
  74%  { transform: translateY(12px)  rotate(-4deg) scale(0.96); }
  100% { transform: translateY(0px)   rotate(0deg)  scale(1.00); }
}

/* 6 tools — balanced size, visible but not intrusive */
/* Hammer enters at left edge at t=0 and drifts smoothly to the right. Saw enters from right around the same time. */
.tf1  { width:52px;  top:12%; color:rgba(205,122,52,0.78);  filter:drop-shadow(0 0 10px rgba(205,122,52,0.48));  animation:tdrift1 62s linear infinite; animation-delay: -3s; }
.tf2  { width:86px;  top:38%; color:rgba(212,168,83,0.75);  filter:drop-shadow(0 0 14px rgba(212,168,83,0.45));  animation:tdrift2 76s linear infinite; animation-delay: -3s; }
/* Other tools appear later, after the hammer-saw crossing */
.tf3  { width:56px;  top:24%; color:rgba(72,162,110,0.72);  filter:drop-shadow(0 0 10px rgba(72,162,110,0.42));  animation:tdrift3 68s linear infinite; animation-delay:  6s; }
.tf4  { display: none; }
/* tf5 (hand plane) removed — shape unrecognizable */
.tf6  { width:38px;  top:76%; color:rgba(68,172,142,0.74);  filter:drop-shadow(0 0 10px rgba(68,172,142,0.44));  animation:tdrift6 66s linear infinite; animation-delay: 14s; }


@keyframes tdrift1 {
  /* Off-screen left, fade in at left edge, drift to right edge, fade out */
  0%   { transform: translateX(-30px)               rotate(-3deg); opacity:0; }
  4%   { transform: translateX(0px)                 rotate(-3deg); opacity:1; }
  88%  { transform: translateX(calc(100vw - 60px))  rotate(8deg);  opacity:1; }
  94%  { transform: translateX(calc(100vw + 60px))  rotate(10deg); opacity:0; }
  100% { transform: translateX(-30px)               rotate(-3deg); opacity:0; }
}
@keyframes tdrift2 {
  0%   { transform: translateX(calc(100vw + 110px)) rotate(12deg);  opacity:0; }
  6%   { opacity:1; }
  94%  { opacity:1; }
  100% { transform: translateX(-110px)              rotate(-8deg);  opacity:0; }
}
@keyframes tdrift3 {
  0%   { transform: translateX(-90px)  translateY(30px) rotate(22deg);  opacity:0; }
  6%   { opacity:1; }
  94%  { opacity:1; }
  100% { transform: translateX(calc(100vw + 90px)) translateY(-20px) rotate(-16deg); opacity:0; }
}
@keyframes tdrift4 {
  0%   { transform: translateX(calc(100vw + 80px)) translateY(0)    rotate(-18deg); opacity:0; }
  6%   { opacity:1; }
  94%  { opacity:1; }
  100% { transform: translateX(-80px)              translateY(40px) rotate(12deg);  opacity:0; }
}
@keyframes tdrift5 {
  0%   { transform: translateX(-130px) translateY(-18px) rotate(6deg);  opacity:0; }
  6%   { opacity:1; }
  94%  { opacity:1; }
  100% { transform: translateX(calc(100vw + 130px)) translateY(25px) rotate(-10deg); opacity:0; }
}
@keyframes tdrift6 {
  0%   { transform: translateX(calc(100vw + 90px)) translateY(16px) rotate(-14deg); opacity:0; }
  6%   { opacity:1; }
  94%  { opacity:1; }
  100% { transform: translateX(-90px)              translateY(-28px) rotate(20deg);  opacity:0; }
}

/* ══════════════════════════════════════════════
   HERO SHOWCASE TOOLS — 4 fixed, visible on load
   Each enters from a different direction, then floats
   Negative delay = already mid-animation at page load
   ══════════════════════════════════════════════ */
.hero-tool {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.hero-tool svg {
  display: block;
  stroke: currentColor;
  stroke-width: 2.8px;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke fill;
}

/* ht1 (hammer) removed — shape unrecognizable */
.ht1 { display: none; }
.ht4 { display: none; }
/* ── Hammer — left side, mid-height ── */
.ht1-unused {
  width: 68px;
  left: 3%;
  top: 28%;
  color: rgba(205,122,52,0.88);
  filter: drop-shadow(0 0 16px rgba(205,122,52,0.58)) drop-shadow(0 0 5px rgba(205,122,52,0.32));
  animation: htFloat1 24s ease-in-out -5s infinite;
}
@keyframes htFloat1 {
  0%   { transform: translateX(-130px) rotate(-22deg); opacity: 0; }
  10%  { transform: translateX(0)      rotate(-12deg); opacity: 0.88; }
  38%  { transform: translateX(0) translateY(-18px)   rotate(-9deg);  opacity: 0.88; }
  65%  { transform: translateX(0) translateY(14px)    rotate(-15deg); opacity: 0.88; }
  90%  { transform: translateX(0) translateY(-6px)    rotate(-11deg); opacity: 0.88; }
  97%  { opacity: 0; }
  100% { transform: translateX(-130px) rotate(-22deg); opacity: 0; }
}

/* ── Hand Saw — right side, upper area ── */
.ht2 {
  width: 108px;
  right: 2%;
  top: 10%;
  color: rgba(212,168,83,0.85);
  filter: drop-shadow(0 0 18px rgba(212,168,83,0.52)) drop-shadow(0 0 6px rgba(212,168,83,0.30));
  animation: htFloat2 18s ease-in-out -6s infinite;
}
@keyframes htFloat2 {
  0%   { transform: translateX(160px) rotate(18deg);  opacity: 0; }
  6%   { transform: translateX(0)     rotate(8deg);   opacity: 0.85; }
  35%  { transform: translateX(0) translateY(-14px)  rotate(6deg);  opacity: 0.85; }
  62%  { transform: translateX(0) translateY(16px)   rotate(10deg); opacity: 0.85; }
  88%  { transform: translateX(0) translateY(-8px)   rotate(7deg);  opacity: 0.85; }
  97%  { opacity: 0; }
  100% { transform: translateX(160px) rotate(18deg);  opacity: 0; }
}

/* ── Compass — left side, mid-upper area ── */
.ht3 {
  width: 60px;
  left: 3%;
  top: 30%;
  color: rgba(72,162,110,0.84);
  filter: drop-shadow(0 0 14px rgba(72,162,110,0.52)) drop-shadow(0 0 5px rgba(72,162,110,0.28));
  animation: htFloat3 16s ease-in-out -9s infinite;
}
@keyframes htFloat3 {
  0%   { transform: translateX(-120px) rotate(-15deg); opacity: 0; }
  5%   { transform: translateX(0)      rotate(-5deg);  opacity: 0.84; }
  38%  { transform: translateX(0) translateY(-14px) rotate(-3deg);  opacity: 0.84; }
  65%  { transform: translateX(0) translateY(12px)  rotate(-7deg);  opacity: 0.84; }
  90%  { transform: translateX(0) translateY(-6px)  rotate(-4deg);  opacity: 0.84; }
  97%  { opacity: 0; }
  100% { transform: translateX(-120px) rotate(-15deg); opacity: 0; }
}

/* ── Screwdriver — removed ── */
.ht4-unused {
  width: 38px;
  right: 8%;
  top: 55%;
  color: rgba(68,172,142,0.86);
  filter: drop-shadow(0 0 13px rgba(68,172,142,0.54)) drop-shadow(0 0 5px rgba(68,172,142,0.28));
  animation: htFloat4 20s ease-in-out -7s infinite;
}
@keyframes htFloat4 {
  0%   { transform: translateY(-110px) rotate(-18deg); opacity: 0; }
  10%  { transform: translateY(0)      rotate(-8deg);  opacity: 0.86; }
  35%  { transform: translateY(0) translateX(-12px)  rotate(-6deg);  opacity: 0.86; }
  65%  { transform: translateY(0) translateX(10px)   rotate(-10deg); opacity: 0.86; }
  90%  { transform: translateY(0) translateX(-5px)   rotate(-7deg);  opacity: 0.86; }
  97%  { opacity: 0; }
  100% { transform: translateY(-110px) rotate(-18deg); opacity: 0; }
}

/* Hide hero tools on small screens to avoid cluttering */
@media (max-width: 600px) {
  .hero-tool { display: none; }
}

.hero-scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.5);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.scroll-arrow {
  width: 24px;
  height: 24px;
  border-right: 2px solid rgba(255,255,255,0.4);
  border-bottom: 2px solid rgba(255,255,255,0.4);
  transform: rotate(45deg);
  animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%,100% { transform: rotate(45deg) translateY(0); }
  50% { transform: rotate(45deg) translateY(6px); }
}

/* ===================== STATS BAR ===================== */
.stats-bar {
  background: linear-gradient(135deg, #0e1209, #1c0f05, #0a1510);
  padding: 48px 0;
}
.stats-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 24px;
  flex-wrap: wrap;
}
.stat {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  font-weight: 700;
  color: var(--wood-gold);
  line-height: 1;
}
.stat-plus {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: var(--wood-gold);
}
.stat-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.stat-divider {
  width: 1px;
  height: 60px;
  background: rgba(255,255,255,0.1);
}

/* ===================== SERVICES ===================== */
.services {
  padding: 100px 0;
  background: var(--bg-light);
  position: relative;
  overflow: hidden;
}
.nail-rain-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.nail-rain-back  { z-index: 1; }
.nail-rain-front { z-index: 3; }
.services .container {
  position: relative;
  z-index: 2;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@property --conic-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.service-card {
  background: var(--white);
  border-radius: 6px;
  padding: 36px 28px;
  box-shadow: 0 1px 3px rgba(20,20,20,0.04), 0 4px 16px rgba(20,20,20,0.04);
  transition:
    transform 0.5s cubic-bezier(0.34,1.3,0.64,1),
    box-shadow 0.5s ease,
    background-color 0.5s ease;
  position: relative;
  overflow: visible; /* let conic ring show outside */
  border: 1px solid #ECECEC;
  perspective: 800px;
  transform-style: preserve-3d;
  isolation: isolate;
  z-index: 0;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--wood-gold), var(--wood-warm), var(--wood-gold));
  background-size: 200% 100%;
  transform: scaleX(0);
  transition: transform 0.45s ease;
  z-index: 2;
  border-radius: 6px 6px 0 0;
}
/* Conic gradient rotating ring — sits behind card, visible only as a ring outside card edge */
.service-card::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 8px;
  background: conic-gradient(from var(--conic-angle),
    #C9A35B   0deg,
    #E8C896  60deg,
    #FFF1C4 110deg,
    #FFFCF0 140deg,
    #FFF1C4 170deg,
    #E8C896 220deg,
    #D4B370 280deg,
    #C9A35B 360deg);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
  filter: blur(0.5px);
}
.service-card:hover,
.service-card.is-active {
  background-color: #FFFCF6;
  transform: translateY(-10px) rotateX(3deg) rotateY(-1.5deg);
  box-shadow:
    0 22px 52px rgba(155,107,42,0.20),
    0 8px 22px rgba(201,163,91,0.18);
}
.service-card:hover::before,
.service-card.is-active::before { transform: scaleX(1); animation: shimmerBar 1.4s ease infinite; }
.service-card:hover::after,
.service-card.is-active::after  {
  opacity: 1;
  animation: spinConic 5.5s linear infinite;
}
@keyframes shimmerBar {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}
@keyframes spinConic {
  to { --conic-angle: 360deg; }
}
.service-icon-wrap { margin-bottom: 20px; }
.service-3d-icon {
  width: 64px;
  height: 64px;
  background: #F5F1EA;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  transition: transform 0.5s cubic-bezier(0.34,1.5,0.64,1), box-shadow 0.4s, background 0.3s;
  box-shadow: 0 2px 8px rgba(20,20,20,0.04);
  color: #9B6B2A;
}
.service-card:hover .service-3d-icon,
.service-card.is-active .service-3d-icon {
  transform: rotateY(20deg) rotateX(8deg) scale(1.15) translateZ(10px);
  box-shadow:
    -6px 8px 20px rgba(155,107,42,0.18),
    0 0 0 1px rgba(201,163,91,0.35) inset;
  background: linear-gradient(135deg, #FFF6E0 0%, #F2DEB0 100%);
  color: #6E4A12;
}
.service-3d-icon svg { width: 100%; height: 100%; }
.service-card h3 {
  font-size: 1.2rem;
  margin-bottom: 12px;
  color: #0F0F0F;
  letter-spacing: -0.005em;
}
.service-card p {
  font-size: 0.92rem;
  color: #262626;
  line-height: 1.7;
  margin-bottom: 22px;
}
.service-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: #0F0F0F;
  letter-spacing: 0.01em;
  transition: color 0.3s, transform 0.3s;
  display: inline-block;
}
.service-link:hover { color: var(--wood-gold); transform: translateX(4px); }

/* ===================== ABOUT ===================== */
.about {
  padding: 110px 0;
  background: #FFFFFF;
  position: relative;
  overflow: hidden;
}
.about-bg-wood {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 90% 10%, rgba(201,163,91,0.04) 0%, transparent 55%),
    radial-gradient(ellipse at 5% 90%, rgba(20,20,20,0.025) 0%, transparent 50%);
}
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
}
.about-visual { position: relative; }
.about-photo-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, var(--wood-dark), var(--wood-mid));
  position: relative;
}
.about-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Collage layout (CSS grid, 3 photos) --- */
.about-photo-collage {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  height: 480px;
  width: 100%;
}
.apc-main {
  grid-column: 1;
  grid-row: 1 / 3;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(20,20,20,0.16), 0 4px 12px rgba(20,20,20,0.06);
}
.apc-top {
  grid-column: 2;
  grid-row: 1;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(20,20,20,0.12), 0 2px 8px rgba(20,20,20,0.04);
}
.apc-bot {
  grid-column: 2;
  grid-row: 2;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(20,20,20,0.12), 0 2px 8px rgba(20,20,20,0.04);
}
.apc-main img,
.apc-top img,
.apc-bot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.apc-main:hover img,
.apc-top:hover img,
.apc-bot:hover img { transform: scale(1.04); }

.about-badge-float {
  position: absolute;
  bottom: -22px;
  left: -22px;
  z-index: 10;
  background: #0F0F0F;
  color: var(--white);
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 12px 32px rgba(20,20,20,0.28), 0 0 0 1px rgba(201,163,91,0.4);
  font-family: 'Playfair Display', serif;
  border: 2px solid var(--wood-gold);
}
.about-badge-float span { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--wood-gold); }
.about-badge-float small { font-size: 0.62rem; line-height: 1.3; opacity: 0.95; font-family: 'Inter', sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-top: 4px; }
.about-wood-grain {
  position: absolute;
  top: 24px;
  left: -24px;
  width: 78%;
  height: 80%;
  border: 1px solid rgba(201,163,91,0.35);
  border-radius: 4px;
  z-index: -1;
}
.about-content h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  margin-bottom: 24px;
  color: #0F0F0F;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.about-lead {
  font-size: 1.08rem;
  font-weight: 500;
  color: #2B2B2B;
  margin-bottom: 18px;
  line-height: 1.65;
}
.about-content p {
  color: #525252;
  margin-bottom: 22px;
  line-height: 1.8;
  font-size: 0.98rem;
}
.about-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 36px;
}
.value-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.value-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  color: var(--wood-gold);
  display: flex;
  align-items: center;
}
.value-item strong { display: block; font-size: 0.92rem; color: #0F0F0F; margin-bottom: 2px; }
.value-item span { font-size: 0.82rem; color: #6B6B6B; line-height: 1.5; }

/* ── About specialty chips ── */
.about-specialties {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}
.specialty-chip {
  background: transparent;
  border: 1px solid #E0DDD8;
  color: #3A3A3A;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.74rem;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.015em;
  transition: background 0.22s, border-color 0.22s, color 0.22s;
  cursor: default;
}
.specialty-chip:hover {
  background: var(--wood-gold);
  border-color: var(--wood-gold);
  color: #0F0F0F;
}

/* ── About differentiator block ── */
.about-differentiator {
  background: #FAFAF9;
  border-left: 3px solid #1A1A1A;
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  margin-bottom: 34px;
}
.about-differentiator p {
  margin: 0;
  font-size: 0.92rem;
  color: #3A3A3A;
  line-height: 1.75;
  font-style: italic;
}
.about-differentiator strong {
  color: #0F0F0F;
  font-style: normal;
  font-weight: 600;
}

/* ===================== GALLERY ===================== */
.gallery {
  padding: 100px 0;
  background: var(--bg-light);
}
.gallery-filter {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.filter-btn {
  padding: 8px 22px;
  border-radius: 50px;
  border: 1px solid #DEDCD8;
  background: transparent;
  color: #525252;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: var(--transition);
}
.filter-btn.active,
.filter-btn:hover {
  background: #1A1A1A;
  color: var(--white);
  border-color: #1A1A1A;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 250px;
  gap: 16px;
}
.gallery-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(135deg, var(--wood-dark), var(--wood-mid));
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.gallery-item.large { grid-row: span 2; }
.gallery-item.hidden { display: none; }
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.gallery-item:hover img { transform: scale(1.08); }
.gallery-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255,255,255,0.4);
  background: linear-gradient(135deg, var(--wood-dark), var(--wood-mid));
  pointer-events: none;
}
.gallery-item img[src=""] + .gallery-placeholder,
.gallery-item img:not([src]) + .gallery-placeholder { display: flex; }
.gallery-item img[src]:not([src=""]) + .gallery-placeholder { display: none; }
.gallery-placeholder span { font-size: 2.5rem; }
.gallery-placeholder p { font-size: 0.85rem; font-family: 'Playfair Display', serif; }
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(61,43,31,0.85) 0%, transparent 60%);
  display: flex;
  align-items: flex-end;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-overlay span {
  color: var(--white);
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 600;
}

/* ===================== TESTIMONIALS ===================== */
.testimonials {
  padding: 100px 0;
  background: linear-gradient(160deg, #E6F4EC 0%, #F4FAF7 48%, #E8F5EE 100%);
  position: relative;
  overflow: hidden;
}
.testimonials-wood-bg {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      20deg,
      rgba(72,160,108,0.032) 0px, rgba(72,160,108,0.032) 1px,
      transparent 1px, transparent 55px
    ),
    radial-gradient(ellipse at 15% 50%, rgba(72,180,120,0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 30%, rgba(100,200,150,0.05) 0%, transparent 50%);
}
.testimonials .section-header h2 { color: var(--wood-dark); }
.testimonials .section-header p { color: #5D7A68; }
.testimonials-track {
  display: flex;
  gap: 24px;
  overflow: hidden;
}
.testimonial-card {
  flex: 0 0 calc(33.333% - 16px);
  background: #FFFFFF;
  border: 1px solid rgba(72,155,105,0.14);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: 0 4px 24px rgba(40,110,70,0.08);
  transition: var(--transition);
}
.testimonial-card:hover {
  background: #FAFDFB;
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(40,110,70,0.13);
  border-color: rgba(72,155,105,0.26);
}
.stars {
  color: var(--wood-gold);
  font-size: 1.2rem;
  margin-bottom: 16px;
  letter-spacing: 4px;
}
.testimonial-card p {
  color: #3A5244;
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 24px;
  font-style: italic;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wood-gold), var(--wood-warm));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--white);
  font-size: 0.85rem;
  flex-shrink: 0;
}
.testimonial-author strong { display: block; color: var(--wood-dark); font-size: 0.9rem; }
.testimonial-author span { font-size: 0.8rem; color: #7EA090; }
.testimonials-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}
.testimonials-nav button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(72,155,105,0.35);
  background: rgba(255,255,255,0.7);
  color: #3D7A58;
  font-size: 1.5rem;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.testimonials-nav button:hover {
  background: #3D7A58;
  color: var(--white);
  border-color: #3D7A58;
}
.testimonials-dots {
  display: flex;
  gap: 8px;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(72,155,105,0.28);
  cursor: pointer;
  transition: var(--transition);
}
.dot.active { background: var(--wood-gold); width: 24px; border-radius: 4px; }

/* ===================== CONTACT ===================== */
.contact {
  padding: 100px 0;
  background: var(--bg-section);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.contact-info h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  margin-bottom: 18px;
  color: #0F0F0F;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.contact-info > p {
  color: #525252;
  margin-bottom: 40px;
  line-height: 1.75;
}
.accent { color: var(--wood-gold); }
.contact-details { display: flex; flex-direction: column; gap: 20px; margin-bottom: 36px; }
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  color: inherit;
  transition: transform 0.3s;
}
a.contact-item:hover { transform: translateX(4px); }
.contact-icon { font-size: 1.4rem; flex-shrink: 0; }
.contact-item strong { display: block; font-size: 0.85rem; color: #0F0F0F; margin-bottom: 2px; }
.contact-item span { font-size: 0.95rem; color: #525252; line-height: 1.5; }
.google-rating {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--white);
  border-radius: 8px;
  border: 1px solid #ECECEC;
  box-shadow: 0 1px 3px rgba(20,20,20,0.04), 0 4px 12px rgba(20,20,20,0.04);
}
.rating-stars { font-size: 1.3rem; color: var(--wood-gold); }
.rating-text strong { display: block; color: #0F0F0F; font-size: 0.95rem; }
.rating-text span { font-size: 0.8rem; color: #6B6B6B; }

/* Form */
.contact-form-wrap {
  position: relative;
}
.contact-form {
  background: var(--white);
  border-radius: 8px;
  padding: 40px;
  box-shadow: 0 8px 32px rgba(20,20,20,0.06), 0 2px 8px rgba(20,20,20,0.04);
  border: 1px solid #ECECEC;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-group label { font-size: 0.82rem; font-weight: 600; color: #0F0F0F; letter-spacing: 0.01em; }
.form-group input,
.form-group select,
.form-group textarea {
  padding: 13px 16px;
  border: 1px solid #DEDCD8;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: #1A1A1A;
  background: #FAFAFA;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
  outline: none;
  resize: vertical;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--wood-gold);
  box-shadow: 0 0 0 3px rgba(201,163,91,0.12);
  background: var(--white);
}
.form-note { text-align: center; font-size: 0.8rem; color: var(--text-light); margin-top: 16px; }
.form-success {
  display: none;
  text-align: center;
  padding: 60px 40px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wood-gold), var(--wood-warm));
  color: var(--white);
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.form-success h3 { font-size: 1.5rem; margin-bottom: 8px; color: var(--wood-dark); }
.form-success p { color: var(--text-light); }

/* ===================== FOOTER ===================== */
.footer {
  background:
    radial-gradient(ellipse at 12% 85%, rgba(180,95,30,0.28) 0%, transparent 48%),
    radial-gradient(ellipse at 88% 10%, rgba(55,130,70,0.20) 0%, transparent 42%),
    radial-gradient(ellipse at 55% 55%, rgba(130,65,18,0.16) 0%, transparent 40%),
    radial-gradient(ellipse at 5%  40%, rgba(40,110,85,0.14) 0%, transparent 38%),
    radial-gradient(ellipse at 48% 8%,  rgba(200,145,55,0.09) 0%, transparent 40%),
    linear-gradient(155deg, #0c1609 0%, #1c0f05 40%, #0a1510 75%, #160c04 100%);
  padding: 80px 0 0;
  position: relative;
  overflow: hidden;
}
.footer-wood {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    10deg,
    rgba(200,149,108,0.028) 0px, rgba(200,149,108,0.028) 1px,
    transparent 1px, transparent 50px
  );
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
}
.footer-brand .logo { margin-bottom: 20px; }
.footer-brand p { font-size: 0.9rem; color: rgba(255,255,255,0.5); line-height: 1.7; max-width: 280px; }
.footer h4 {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wood-gold);
  margin-bottom: 20px;
}
.footer-links ul, .footer-services ul { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: rgba(255,255,255,0.5); font-size: 0.9rem; transition: color 0.3s; }
.footer-links a:hover { color: var(--wood-gold); }
.footer-services li { color: rgba(255,255,255,0.5); font-size: 0.9rem; }
.footer-contact p { color: rgba(255,255,255,0.5); font-size: 0.9rem; margin-bottom: 10px; line-height: 1.5; }
.footer-contact a { color: rgba(255,255,255,0.5); transition: color 0.3s; }
.footer-contact a:hover { color: var(--wood-gold); }
.footer-rating {
  display: inline-block;
  background: rgba(212,168,83,0.1);
  border: 1px solid rgba(212,168,83,0.2);
  color: var(--wood-gold);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 50px;
  margin-top: 8px;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  position: relative;
}
.footer-bottom p { font-size: 0.8rem; color: rgba(255,255,255,0.3); }

/* ===================== LIGHTBOX ===================== */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(5,2,1,0.97);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.lightbox.active { display: flex; }
.lightbox-img-wrap {
  position: relative;
  max-width: min(90vw, 1100px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lightbox-img-wrap img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.8);
}
.lightbox-caption {
  margin-top: 14px;
  color: rgba(255,255,255,0.75);
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  text-align: center;
}
.lightbox-counter {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.4);
  font-size: 0.8rem;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.1em;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--white);
  cursor: pointer;
  transition: all 0.25s ease;
  font-size: 1.4rem;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}
.lightbox-close { top: 20px; right: 20px; font-size: 1.1rem; }
.lightbox-prev  { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: var(--wood-gold);
  border-color: var(--wood-gold);
  color: #1a0f07;
  transform: translateY(-50%) scale(1.08);
}
.lightbox-close:hover { transform: scale(1.08); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  .nav-links { display: none; position: fixed; inset: 0; background: rgba(10,7,5,0.98); flex-direction: column; justify-content: center; align-items: center; gap: 32px; z-index: 999; }
  .nav-links.open { display: flex; }
  .nav-links a { font-size: 1.3rem; }
  .hamburger { display: flex; z-index: 1000; }
  .services-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-visual { order: -1; }
  .about-photo-collage { height: 320px; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item.large { grid-row: span 1; }
  .testimonials-track { flex-direction: column; }
  .testimonial-card { flex: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .stats-inner { gap: 32px; }
  .stat-divider { display: none; }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 2rem; }
  .contact-form { padding: 24px; }
}

/* ============================================================
   PORTFOLIO — masonry bento grid, 3D cards, category tabs
   ============================================================ */

.portfolio {
  background:
    repeating-linear-gradient(
      97deg,
      rgba(156,115,70,0.028) 0px,
      rgba(156,115,70,0.028) 1px,
      transparent 1px,
      transparent 28px
    ),
    linear-gradient(175deg, #F8F2EA 0%, #FCF9F5 55%, #F2EAE0 100%);
  padding: 110px 0 90px;
  position: relative;
  overflow: hidden;
}
/* Gold top accent line */
.portfolio::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 5%, var(--wood-gold) 40%, #C49670 70%, transparent 95%);
  opacity: 0.55;
}

.portfolio-bg-word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Playfair Display', serif;
  font-size: clamp(60px, 14vw, 200px);
  font-weight: 700;
  color: rgba(156,114,80,0.055);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: 0.2em;
  user-select: none;
}

.portfolio .section-header h2 { color: var(--wood-dark); }
.portfolio .section-header p  { color: var(--text-light); }
.portfolio .section-tag {
  background: rgba(212,168,83,0.14);
  color: #9E6B2E;
  border: 1px solid rgba(212,168,83,0.4);
}

/* ---- Category tabs ---- */
.portfolio-tabs {
  display: flex;
  gap: 6px;
  padding: 6px;
  background: rgba(44,31,20,0.06);
  border: 1px solid rgba(44,31,20,0.12);
  border-radius: 60px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 56px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 16px rgba(44,31,20,0.06);
}
.portfolio-tabs::-webkit-scrollbar { display: none; }

.ptab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  border: none;
  background: transparent;
  color: rgba(44,31,20,0.48);
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 50px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.25s ease, background 0.25s ease;
}
.ptab:hover { color: rgba(44,31,20,0.8); background: rgba(212,168,83,0.1); }
.ptab.active {
  background: var(--wood-gold);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(212,168,83,0.38);
}
.ptab-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 5px;
  background: rgba(44,31,20,0.12);
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}
.ptab.active .ptab-n { background: rgba(255,255,255,0.25); }

/* ---- Masonry-bento grid ---- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 280px;
  gap: 14px;
  margin-bottom: 48px;
}

/* ---- Cards ---- */
.pcard {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: #D4B896;
  will-change: transform;
  transform-origin: center center;
  box-shadow: 0 4px 20px rgba(44,31,20,0.12), 0 1px 4px rgba(44,31,20,0.08);
  transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.34,1.2,0.64,1);
}
.pcard:hover {
  box-shadow: 0 16px 48px rgba(44,31,20,0.22), 0 4px 12px rgba(44,31,20,0.1);
  transform: translateY(-4px);
}
.pcard.tall { grid-row: span 2; }

.pcard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.65s cubic-bezier(0.25,0.46,0.45,0.94),
              filter 0.45s ease;
}

/* Overlay — slides up from bottom */
.pcard-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(20,10,3,0.96) 0%,
    rgba(20,10,3,0.55) 38%,
    rgba(20,10,3,0.08) 70%,
    transparent 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px 20px 20px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.32s ease, transform 0.32s ease;
}

.pcard:hover img {
  transform: scale(1.09);
  filter: brightness(0.6) saturate(1.1);
}
.pcard:hover .pcard-overlay {
  opacity: 1;
  transform: translateY(0);
}

.pcard-cat {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--wood-gold);
  margin-bottom: 5px;
}
.pcard-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  color: #fff;
  line-height: 1.25;
  font-weight: 600;
}

/* Zoom icon in top-right */
.pcard-zoom {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  background: rgba(212,168,83,0.92);
  color: #1a0f07;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  transform: scale(0) rotate(-90deg);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.pcard:hover .pcard-zoom {
  transform: scale(1) rotate(0deg);
}

/* Category color accent strip */
.pcard::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--pcard-accent, var(--wood-gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.pcard:hover::after { transform: scaleX(1); }

/* ---- Enter animation ---- */
@keyframes pcardReveal {
  from {
    opacity: 0;
    transform: translateY(36px) scale(0.94);
    clip-path: inset(10% 5% 10% 5% round 16px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    clip-path: inset(0% 0% 0% 0% round 16px);
  }
}
.pcard.p-in {
  animation: pcardReveal 0.6s cubic-bezier(0.22,1,0.36,1) both;
  animation-delay: var(--pd, 0ms);
}

/* Hidden (filtered out) */
@keyframes pcardOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.88); }
}
.pcard.p-out {
  animation: pcardOut 0.2s ease forwards;
  pointer-events: none;
}
.pcard.p-hidden {
  display: none !important;
}

/* ---- Load more ---- */
.portfolio-more {
  text-align: center;
  margin-top: 8px;
}
.btn-portfolio-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 40px;
  border: 2px solid rgba(158,107,46,0.45);
  background: transparent;
  color: #9E6B2E;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn-portfolio-more:hover {
  background: var(--wood-gold);
  color: #fff;
  border-color: var(--wood-gold);
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(212,168,83,0.35);
}
.btn-portfolio-more svg {
  transition: transform 0.3s ease;
}
.btn-portfolio-more:hover svg {
  transform: translateY(3px);
}

/* ---- Category color accents ---- */
.pcard[data-cat="cucina"]   { --pcard-accent: #D4A853; }
.pcard[data-cat="armadio"]  { --pcard-accent: #7BA05B; }
.pcard[data-cat="scala"]    { --pcard-accent: #C4855A; }
.pcard[data-cat="outdoor"]  { --pcard-accent: #5B9E8F; }
.pcard[data-cat="custom"]   { --pcard-accent: #9B7DB8; }
.pcard[data-cat="ba"]       { --pcard-accent: #047857; }

/* ============================================================
   BEFORE / AFTER — emerald filter pill + drag slider
   ============================================================ */
.ptab-ba {
  position: relative;
  background: linear-gradient(135deg, #047857 0%, #059669 60%, #10B981 100%);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 16px rgba(4,120,87,0.32), inset 0 1px 0 rgba(255,255,255,0.18);
}
.ptab-ba:hover {
  background: linear-gradient(135deg, #065F46 0%, #047857 60%, #059669 100%);
  color: #fff;
  box-shadow: 0 6px 22px rgba(4,120,87,0.45), inset 0 1px 0 rgba(255,255,255,0.22);
}
.ptab-ba.active {
  background: linear-gradient(135deg, #064E3B 0%, #047857 100%);
  color: #fff;
  box-shadow: 0 6px 24px rgba(4,120,87,0.55), inset 0 1px 0 rgba(255,255,255,0.25);
}
.ptab-ba .ptab-n {
  background: rgba(255,255,255,0.22);
  color: #fff;
}
.ptab-ba.active .ptab-n { background: rgba(255,255,255,0.32); }
.ptab-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 0 0 rgba(52,211,153,0.7);
  animation: baDotPulse 2.2s ease-in-out infinite;
  margin-right: 4px;
}
@keyframes baDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0.7); }
  50%      { box-shadow: 0 0 0 7px rgba(52,211,153,0); }
}

/* ---- Card holding the slider ---- */
.pcard-ba {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}
.pcard-ba:hover { transform: none; }
.pcard-ba::after { display: none; }
.pcard-ba .ba-slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  touch-action: none;
  cursor: ew-resize;
  background: #0F0F0F;
}
.pcard-ba .ba-slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: none;
  transform: none !important;
}
.pcard-ba .ba-img-after  { z-index: 1; }
.pcard-ba .ba-img-before {
  z-index: 2;
  clip-path: inset(0 50% 0 0);
  -webkit-clip-path: inset(0 50% 0 0);
  will-change: clip-path;
}
.pcard-ba .ba-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  background: rgba(255,255,255,0.95);
  z-index: 4;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.18), 0 0 18px rgba(0,0,0,0.35);
  will-change: left;
}
.pcard-ba .ba-handle-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  margin-top: -22px;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #047857;
  box-shadow: 0 6px 20px rgba(0,0,0,0.32), 0 0 0 2px #047857 inset;
}
.pcard-ba .ba-handle-circle svg { width: 22px; height: 22px; }
.pcard-ba .ba-label {
  position: absolute;
  top: 14px;
  z-index: 3;
  padding: 5px 11px;
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #fff;
  background: rgba(0,0,0,0.58);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 4px;
  pointer-events: none;
}
.pcard-ba .ba-label-before { left: 14px; }
.pcard-ba .ba-label-after  { right: 14px; background: rgba(4,120,87,0.85); }
.pcard-ba .pcard-overlay-ba {
  z-index: 5;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.25) 60%, transparent 100%);
  opacity: 1;
  pointer-events: none;
}
.pcard-ba .pcard-overlay-ba .pcard-cat {
  background: rgba(4,120,87,0.92);
  color: #fff;
}
@media (max-width: 768px) {
  .pcard-ba .ba-handle-circle { width: 38px; height: 38px; margin-left:-19px; margin-top:-19px; }
  .pcard-ba .ba-label { font-size: 0.6rem; padding: 4px 8px; top: 10px; }
  .pcard-ba .ba-label-before { left: 10px; }
  .pcard-ba .ba-label-after  { right: 10px; }
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .portfolio-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 265px;
  }
}
@media (max-width: 768px) {
  .portfolio {
    padding: 72px 0 64px;
  }
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 220px;
    gap: 10px;
  }
  .pcard.tall { grid-row: span 1; }
  .portfolio-tabs {
    border-radius: 16px;
    padding: 8px;
    gap: 4px;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }
  .ptab { padding: 8px 14px; font-size: 0.8rem; }
  .ptab-n { min-width: 18px; height: 17px; font-size: 0.65rem; }
}
@media (max-width: 520px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 175px;
    gap: 8px;
  }
  .pcard-title { font-size: 0.9rem; }
  .pcard-zoom { width: 30px; height: 30px; font-size: 0.9rem; }
  .portfolio-bg-word { display: none; }
}

/* ===================== LANGUAGE DROPDOWN ===================== */
.lang-dropdown {
  position: relative;
  margin-right: 8px;
  z-index: 1100;
}
.lang-current {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50px;
  padding: 6px 12px 6px 10px;
  cursor: pointer;
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: background 0.25s, border-color 0.25s;
  white-space: nowrap;
}
.lang-current:hover {
  background: rgba(255,255,255,0.18);
  border-color: var(--wood-gold);
}
.lang-flag { font-size: 1rem; line-height: 1; }
.lang-code { letter-spacing: 0.08em; }
.lang-chevron {
  stroke: rgba(255,255,255,0.7);
  transition: transform 0.25s;
  flex-shrink: 0;
}
.lang-dropdown.open .lang-chevron { transform: rotate(180deg); }

.lang-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #1a1008;
  border: 1px solid rgba(212,168,83,0.3);
  border-radius: 14px;
  overflow: hidden;
  min-width: 148px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.55);
  animation: langMenuIn 0.18s ease;
}
.lang-dropdown.open .lang-menu { display: block; }

@keyframes langMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.75);
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  text-align: left;
  letter-spacing: 0.02em;
}
.lang-option:not(:last-child) {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.lang-option:hover {
  background: rgba(212,168,83,0.15);
  color: var(--white);
}
.lang-option.active {
  color: var(--wood-gold);
  font-weight: 600;
}
.lang-option span { font-size: 1.1rem; }

/* ===================== GOOGLE REVIEWS BUTTON ===================== */
.testimonials-google {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
.btn-google-reviews {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  color: var(--wood-dark);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 13px 28px;
  border-radius: 50px;
  border: 2px solid rgba(72,155,105,0.28);
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(40,110,70,0.10);
}
.btn-google-reviews:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(40,110,70,0.18);
  border-color: rgba(72,155,105,0.5);
  color: var(--wood-dark);
}

/* ===================== FLOATING WHATSAPP BUTTON ===================== */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  filter: drop-shadow(0 6px 18px rgba(37,162,68,0.55));
  animation: waFloat 3s ease-in-out infinite;
}
.wa-icon {
  width: 60px;
  height: 60px;
  position: relative;
  z-index: 2;
  transition: transform 0.2s ease;
}
.whatsapp-float:hover .wa-icon { transform: scale(1.12); }

/* Ripple rings */
.wa-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(37,162,68,0.25);
  animation: waRipple 2.4s ease-out infinite;
}
.wa-ripple-1 { width: 60px; height: 60px; animation-delay: 0s; }
.wa-ripple-2 { width: 60px; height: 60px; animation-delay: 0.7s; }
.wa-ripple-3 { width: 60px; height: 60px; animation-delay: 1.4s; }

@keyframes waRipple {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.6); opacity: 0; }
}
@keyframes waFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-6px); }
}

/* ── WhatsApp send button ── */
.btn-whatsapp-send {
  background: linear-gradient(135deg, #25d366, #128c44) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn-whatsapp-send:hover {
  background: linear-gradient(135deg, #2ee86e, #1aaa55) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(37,211,102,0.35) !important;
}

/* ===================== RESPONSIVE LANG DROPDOWN ===================== */
@media (max-width: 768px) {
  /* Use overflow-x: clip on html/body so position:fixed works on iOS Safari */
  .navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: rgba(10,7,5,0.97) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 12px 0 !important;
    min-height: 60px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
    z-index: 9999;
  }
  .navbar .nav-inner { min-height: 36px; }
  .nav-inner {
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: space-between;
  }
  .hamburger {
    order: 1;
    flex-shrink: 0;
  }
  .logo {
    order: 2;
    flex: 1;
    justify-content: center;
  }
  .lang-dropdown {
    order: 3;
    margin-right: 8px;
    flex-shrink: 0;
  }
  .lang-current { padding: 5px 10px 5px 8px; }
}

/* ===================== SECTION TITLE DECORATION ===================== */
.section-header h2 {
  position: relative;
  display: inline-block;
}
.section-header h2::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--wood-gold), transparent);
  border-radius: 2px;
  transition: transform 0.7s ease 0.4s;
}
.section-header.visible h2::after,
.section-header h2.visible::after { transform: translateX(-50%) scaleX(1); }

/* Triggered by IntersectionObserver on .section-header */
.section-header { transition: none; }

/* ===================== ANIMATED SAW DECORATION ===================== */
.section-saw {
  position: absolute;
  right: 0;
  top: -30px;
  opacity: 0.22;
  pointer-events: none;
  width: 130px;
  animation: sawOscillate 3.2s ease-in-out infinite;
  transform-origin: left center;
}
@keyframes sawOscillate {
  0%, 100% { transform: translateX(0) rotate(-4deg); }
  45%       { transform: translateX(-52px) rotate(-1deg); }
  50%       { transform: translateX(-52px) rotate(-1deg); }
  95%       { transform: translateX(0) rotate(-4deg); }
}
/* Hide the static saw inside Portfolio — replaced by .saw-cut-scene below */
.portfolio .section-saw { display: none; }

/* ===================== CIRCULAR SAW CUTTING WOODEN PLANK ===================== */
.saw-cut-scene {
  --saw-size: 60px;
  --plank-h: 38px;
  --plank-half-h: 18px;
  --plank-top-offset: 31px;
  --kerf-y: 49px;
  position: relative;
  height: 100px;
  margin: 28px 0 26px;
  pointer-events: none;
  overflow: visible;
}
.saw-cut-plank {
  position: absolute;
  left: 4%;
  right: 4%;
  top: var(--plank-top-offset);
  height: var(--plank-h);
  z-index: 1;
  filter: drop-shadow(0 4px 10px rgba(60,40,18,0.18));
}
.saw-cut-plank-top,
.saw-cut-plank-bot {
  position: absolute;
  left: 0; right: 0;
  height: var(--plank-half-h);
  background:
    linear-gradient(180deg, #C9A06E 0%, #B8915E 60%, #A47D4E 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,238,210,0.35),
    inset 0 -1px 0 rgba(60,38,18,0.25);
}
.saw-cut-plank-top { top: 0; border-radius: 4px 4px 0 0; }
.saw-cut-plank-bot {
  bottom: 0;
  border-radius: 0 0 4px 4px;
  transform-origin: 0% 0%;
  transition: transform 0.85s cubic-bezier(0.34,1.4,0.64,1);
}
/* Wood grain stripes */
.saw-cut-plank-top::before,
.saw-cut-plank-bot::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      rgba(80,48,18,0.10) 1px,
      transparent 2px,
      transparent 11px,
      rgba(80,48,18,0.07) 12px,
      transparent 13px,
      transparent 28px
    ),
    radial-gradient(ellipse 18px 6px at 22% 60%, rgba(80,46,16,0.35), transparent 70%),
    radial-gradient(ellipse 12px 4px at 68% 35%, rgba(90,52,18,0.28), transparent 75%);
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: multiply;
}
/* Localized cut shadow that follows under the blade — driven by JS (left + width) */
.saw-cut-kerf {
  position: absolute;
  top: calc(var(--plank-half-h) - 1px);
  height: 4px;
  width: 90px;
  left: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 100% at 50% 50%,
              rgba(15,8,2,0.85) 0%,
              rgba(50,30,12,0.55) 35%,
              rgba(0,0,0,0) 100%);
  transform: translateX(-50%);
  opacity: 0;
  filter: blur(0.5px);
  transition: opacity 0.25s ease;
}
.saw-cut-scene.cut-running .saw-cut-kerf { opacity: 1; }

.saw-cut-dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.saw-cut-tool {
  position: absolute;
  top: calc(var(--kerf-y) - (var(--saw-size) / 2));
  left: -60px; /* JS drives this */
  width: var(--saw-size);
  height: var(--saw-size);
  z-index: 3;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.35));
  will-change: left;
}
.saw-cut-blade {
  display: block;
  width: 100%;
  height: 100%;
  animation: sawBladeSpin 0.16s linear infinite;
  animation-play-state: paused;
}
.saw-cut-scene.cut-running .saw-cut-blade { animation-play-state: running; }
@keyframes sawBladeSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
  .saw-cut-scene {
    --saw-size: 46px;
    --plank-h: 28px;
    --plank-half-h: 13px;
    --plank-top-offset: 22px;
    --kerf-y: 35px;
    height: 76px;
    margin: 16px 0 18px;
  }
  .saw-cut-plank { left: 2%; right: 2%; }
}

/* ===================== STATS NUMBER GLOW ===================== */
.stat-num {
  animation: goldPulse 3s ease-in-out infinite;
  display: inline-block;
}
@keyframes goldPulse {
  0%, 100% { text-shadow: 0 0 0 rgba(212,168,83,0); }
  50%       { text-shadow: 0 0 24px rgba(212,168,83,0.55), 0 0 8px rgba(212,168,83,0.3); }
}

/* ===================== ABOUT PHOTO FLOAT ===================== */
.about-photo-collage {
  animation: photoFloat 7s ease-in-out infinite;
}
@keyframes photoFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

/* ===================== GALLERY GRID ITEM DEPTH ===================== */
.gallery-item {
  transition: transform 0.45s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.4s, z-index 0s;
}
.gallery-item:hover {
  transform: scale(1.03) translateY(-4px);
  box-shadow: 0 20px 50px rgba(44,31,20,0.28);
  z-index: 2;
}

/* ===================== CONTACT FORM GLOW ===================== */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--wood-gold);
  box-shadow: 0 0 0 3px rgba(212,168,83,0.15), 0 2px 8px rgba(44,31,20,0.08);
  outline: none;
}

/* ===================== SECTION BG TEXTURE POLISH ===================== */
.services::before,
.about::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 80% 10%, rgba(212,168,83,0.06) 0%, transparent 40%),
    radial-gradient(circle at 20% 90%, rgba(196,150,112,0.05) 0%, transparent 40%);
  pointer-events: none;
}
.services { position: relative; }
.about    { position: relative; }

/* ===================== VALUE ITEMS STAGGER ===================== */
.value-item {
  transition: transform 0.3s ease;
}
.value-item:hover {
  transform: translateX(6px);
}
.value-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.34,1.5,0.64,1);
}
.value-item:hover .value-icon { transform: scale(1.3) rotate(10deg); }

/* ===================== SECTION TAG PULSE ===================== */
.section-tag {
  animation: tagPop 0.6s cubic-bezier(0.34,1.5,0.64,1) both;
}
@keyframes tagPop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ===================== PORTFOLIO CARD SHINE ===================== */
.gallery-item::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -60%;
  width: 40%;
  height: 220%;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.12) 50%, transparent 70%);
  transform: rotate(20deg) translateX(-100%);
  transition: none;
  pointer-events: none;
}
.gallery-item:hover::after {
  transition: transform 0.6s ease;
  transform: rotate(20deg) translateX(400%);
}

/* ===================== FOOTER WARM ===================== */
footer {
  background: linear-gradient(160deg, #0c1008 0%, #180e05 50%, #0a1208 100%);
}

/* ===================== EDITORIAL SECTION BACKGROUNDS ===================== */
.services  { background: #FAFAFA; }
.gallery   { background: #FFFFFF; }
.about     { background: #FFFFFF; }
.contact   { background: #FAFAFA; }
.testimonials { background: linear-gradient(160deg, #E6F4EC 0%, #F4FAF7 48%, #E8F5EE 100%); }

/* ============================================================
   PRICES POPUP — wooden plywood sign cut by a hand saw
   ============================================================ */
.about-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
/* 3D wooden button with stacked dark shadows for depth + splash of wood crumbs on hover */
.btn-prices {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  margin-bottom: 10px;          /* room for the 3D bottom shadow */
  border: 0;
  background:
    /* subtle horizontal grain streaks for wooden look */
    repeating-linear-gradient(180deg,
      rgba(60,30,10,0)    0px,
      rgba(60,30,10,0)    7px,
      rgba(60,30,10,0.05) 7.5px,
      rgba(60,30,10,0)    8px),
    linear-gradient(180deg, #e2ad72 0%, #c89058 50%, #a87740 100%);
  color: #2a1404;
  border-radius: 14px;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.4px;
  text-shadow: 1px 1px 0 rgba(255,235,200,0.5), 0 1px 1px rgba(255,235,200,0.25);
  /* 3D wooden block effect — stacked dark layers below = depth */
  box-shadow:
    inset 0 2px 0 rgba(255,235,200,0.55),
    inset 0 -2px 0 rgba(50,28,10,0.30),
    inset 2px 0 1px rgba(255,235,200,0.25),
    inset -2px 0 1px rgba(50,28,10,0.20),
    0 3px 0 #8b5a2b,
    0 5px 0 #6b4523,
    0 7px 0 #543518,
    0 9px 14px rgba(0,0,0,0.40);
  transform: translateY(0);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-prices:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 2px 0 rgba(255,235,200,0.6),
    inset 0 -2px 0 rgba(50,28,10,0.30),
    0 6px 0 #8b5a2b,
    0 8px 0 #6b4523,
    0 10px 0 #543518,
    0 13px 22px rgba(0,0,0,0.45);
}
.btn-prices:active {
  transform: translateY(5px);
  box-shadow:
    inset 0 2px 0 rgba(255,235,200,0.5),
    inset 0 -2px 0 rgba(50,28,10,0.40),
    0 0 0 #8b5a2b,
    0 1px 0 #6b4523,
    0 2px 0 #543518,
    0 4px 8px rgba(0,0,0,0.35);
}
.btn-prices-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  filter: drop-shadow(1px 1px 0 rgba(255,235,200,0.4));
}

/* Wood-crumb splash — 12 particles fly outward on hover/focus */
.btn-prices-splash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.btn-prices-splash span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 4px;
  background: linear-gradient(180deg, #c89058 0%, #8b5a2b 60%, #5e3a14 100%);
  border-radius: 1px;
  opacity: 0;
  pointer-events: none;
}
/* Splash fires on hover/focus (desktop) and on .is-splashing class (added by JS on click → works on touch too) */
.btn-prices:hover .btn-prices-splash span,
.btn-prices:focus-visible .btn-prices-splash span,
.btn-prices.is-splashing .btn-prices-splash span {
  animation: btnWoodSplash 0.85s cubic-bezier(.25,.7,.4,1) forwards;
}
/* When clicked (.is-splashing), also press the button down for the 3D click effect */
.btn-prices.is-splashing {
  transform: translateY(5px);
  box-shadow:
    inset 0 2px 0 rgba(255,235,200,0.5),
    inset 0 -2px 0 rgba(50,28,10,0.40),
    0 0 0 #8b5a2b,
    0 1px 0 #6b4523,
    0 2px 0 #543518,
    0 4px 8px rgba(0,0,0,0.35);
}
/* Each crumb has its own end position + rotation via custom properties */
.btn-prices-splash span:nth-child(1)  { --tx: -62px; --ty: -22px; --rot:  280deg; width: 6px; height: 4px; animation-delay: 0.00s; }
.btn-prices-splash span:nth-child(2)  { --tx:  68px; --ty: -28px; --rot: -240deg; width: 5px; height: 3px; animation-delay: 0.04s; }
.btn-prices-splash span:nth-child(3)  { --tx: -52px; --ty:  34px; --rot:  200deg; width: 7px; height: 4px; animation-delay: 0.02s; }
.btn-prices-splash span:nth-child(4)  { --tx:  72px; --ty:  30px; --rot: -180deg; width: 5px; height: 3px; animation-delay: 0.08s; }
.btn-prices-splash span:nth-child(5)  { --tx: -28px; --ty: -42px; --rot:  320deg; width: 4px; height: 3px; animation-delay: 0.06s; }
.btn-prices-splash span:nth-child(6)  { --tx:  32px; --ty:  44px; --rot: -260deg; width: 4px; height: 3px; animation-delay: 0.10s; }
.btn-prices-splash span:nth-child(7)  { --tx: -18px; --ty:  52px; --rot:  240deg; width: 5px; height: 4px; animation-delay: 0.12s; }
.btn-prices-splash span:nth-child(8)  { --tx:  20px; --ty: -50px; --rot: -300deg; width: 5px; height: 4px; animation-delay: 0.05s; }
.btn-prices-splash span:nth-child(9)  { --tx: -78px; --ty:   8px; --rot:  180deg; width: 8px; height: 3px; animation-delay: 0.14s; }
.btn-prices-splash span:nth-child(10) { --tx:  82px; --ty:  -6px; --rot: -220deg; width: 8px; height: 3px; animation-delay: 0.07s; }
.btn-prices-splash span:nth-child(11) { --tx: -42px; --ty: -55px; --rot:  260deg; width: 4px; height: 3px; animation-delay: 0.16s; }
.btn-prices-splash span:nth-child(12) { --tx:  48px; --ty:  58px; --rot: -200deg; width: 4px; height: 3px; animation-delay: 0.13s; }

@keyframes btnWoodSplash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(0, 0) scale(0.4) rotate(0);
  }
  18% { opacity: 1; }
  70% { opacity: 0.9; }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(0.6) rotate(var(--rot));
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-prices, .btn-prices:hover, .btn-prices:active { transition: none; }
  .btn-prices-splash span { display: none; }
}

/* Modal shell */
.prices-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.prices-modal.open { display: flex; }
.prices-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(20,12,4,0.78) 0%, rgba(10,6,2,0.92) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: pricesBackdropIn 0.4s ease;
}
@keyframes pricesBackdropIn { from { opacity: 0; } to { opacity: 1; } }

.prices-stage {
  position: relative;
  width: min(640px, 100%);
  height: min(420px, 75vh);
  display: flex;
  align-items: center;
  justify-content: center;
}

.prices-close {
  position: absolute;
  top: -42px;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 10;
  transition: background .18s ease, transform .18s ease;
}
.prices-close:hover { background: rgba(255,255,255,0.22); transform: rotate(90deg); }

/* Wooden sign — two halves stacked on top of each other, identical content */
.wood-sign {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
  animation: woodIn 0.7s cubic-bezier(.34,1.56,.64,1) both;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,0.55));
}
@keyframes woodIn {
  from { transform: translateY(40px) scale(.92); opacity: 0; }
  60%  { transform: translateY(-6px) scale(1.02); opacity: 1; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.wood-half {
  position: absolute;
  inset: 0;
  transition: transform 0.9s cubic-bezier(.55,.05,.7,.7), opacity 0.9s ease;
}
/* Symmetric diagonal cut perfectly aligned with the saw's -13° rotation:
   Slope -tan(13°) × (16/9) = -0.41 in board% — drops 41% across the board.
   Centered on the board midpoint (50%, 50%), so the two halves are equal in area:
   from (0%, 70.5%) lower-left to (100%, 29.5%) upper-right. Rounded to 71% / 30%. */
.wood-half-top    { clip-path: polygon(0 0, 100% 0, 100% 30%, 0 71%); }
.wood-half-bottom { clip-path: polygon(100% 30%, 100% 100%, 0 100%, 0 71%); }

/* The visible plywood face — flowing horizontal grain only, no grid */
.wood-face {
  position: absolute;
  inset: 0;
  border-radius: 5px;
  overflow: hidden;
  background:
    /* Irregular horizontal grain streaks (single direction only) */
    linear-gradient(180deg,
      transparent 0%,    transparent 4%,
      rgba(70,40,15,0.08) 4.5%, rgba(70,40,15,0.06) 5%, transparent 5.5%,
      transparent 11%,   rgba(50,28,10,0.05) 11.5%, transparent 12%,
      transparent 18%,   rgba(70,40,15,0.09) 18.7%, rgba(70,40,15,0.07) 19.2%, transparent 19.8%,
      transparent 26%,   rgba(50,28,10,0.05) 26.4%, transparent 27%,
      transparent 34%,   rgba(70,40,15,0.08) 34.5%, transparent 35.1%,
      transparent 42%,   rgba(50,28,10,0.07) 42.5%, rgba(50,28,10,0.05) 43%, transparent 43.5%,
      transparent 51%,   rgba(70,40,15,0.09) 51.6%, transparent 52.2%,
      transparent 60%,   rgba(50,28,10,0.05) 60.5%, transparent 61%,
      transparent 68%,   rgba(70,40,15,0.08) 68.6%, rgba(70,40,15,0.06) 69.1%, transparent 69.7%,
      transparent 76%,   rgba(50,28,10,0.06) 76.5%, transparent 77%,
      transparent 84%,   rgba(70,40,15,0.08) 84.6%, transparent 85.2%,
      transparent 91%,   rgba(50,28,10,0.05) 91.5%, transparent 92%,
      transparent 96.5%, rgba(70,40,15,0.07) 97%,   transparent 97.5%,
      transparent 100%),
    /* Soft warm/cool patches for depth */
    radial-gradient(ellipse 45% 35% at 28% 32%, rgba(255,220,170,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 78% 70%, rgba(70,32,10,0.20) 0%, transparent 55%),
    radial-gradient(ellipse 30% 25% at 60% 22%, rgba(60,28,8,0.10) 0%, transparent 65%),
    /* Base plywood color — warm tan with subtle vertical falloff */
    linear-gradient(168deg, #d8a26a 0%, #c89058 48%, #ae7a44 100%);
  box-shadow:
    inset 0 0 60px rgba(60,30,10,0.32),
    inset 0 0 0 1px rgba(60,30,10,0.55);
}
/* Subtle long grain "ribbons" — natural wood character, not square knots */
.wood-face::before,
.wood-face::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}
.wood-face::before {
  width: 55%; height: 9%;
  top: 24%; left: 5%;
  background: radial-gradient(ellipse, rgba(60,28,8,0.16) 0%, rgba(60,28,8,0.06) 40%, transparent 75%);
  transform: rotate(-2deg);
}
.wood-face::after {
  width: 45%; height: 7%;
  bottom: 22%; right: 8%;
  background: radial-gradient(ellipse, rgba(60,28,8,0.13) 0%, transparent 70%);
  transform: rotate(2deg);
}

.wood-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 44px;
  color: #3a1d08;
  font-family: 'Georgia', 'Playfair Display', serif;
}
.wood-content h3 {
  margin: 0 0 14px;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  font-weight: 800;
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 0 rgba(255,235,200,0.4), 2px 2px 4px rgba(60,30,5,0.25);
}
.wood-content p {
  margin: 4px 0;
  font-size: clamp(0.9rem, 1.6vw, 1.02rem);
  line-height: 1.5;
  font-weight: 600;
  color: #4a2a10;
}

/* Diagonal "cut line" — appears as the saw progresses */
.wood-cut-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  /* Vertical gradient: darker center band, softer edges — looks like a real saw groove */
  background: linear-gradient(180deg,
    rgba(50,28,10,0.0) 0%,
    rgba(50,28,10,0.55) 30%,
    rgba(20,10,2,0.9) 50%,
    rgba(50,28,10,0.55) 70%,
    rgba(50,28,10,0.0) 100%);
  /* Initial: collapsed at lower-left (cut start point) — degenerate quad with all 4 points
     near (0%, 71%). Grows to full diagonal stripe via clip-path interpolation, which
     preserves the cut angle throughout (scaleX would distort it). */
  clip-path: polygon(0% 69%, 0% 73%, 0% 73%, 0% 69%);
  opacity: 0;
  transition: opacity 0.3s ease, clip-path 4.5s cubic-bezier(.4,.05,.3,1);
}
.prices-modal.phase-saw .wood-cut-line {
  opacity: 1;
  /* Final: full symmetric diagonal stripe from (0%, 71%) lower-left to (100%, 30%) upper-right.
     Stripe 4% thick → top edge at 28%, bottom edge at 32% on right side. */
  clip-path: polygon(0% 69%, 0% 73%, 100% 32%, 100% 28%);
}

/* Hand saw — lies along the cut diagonal (-13°), saws back-and-forth while traveling left.
   Teeth point downward (into the wood). Mid-cut anchor at center of cut line (~58% top). */
/* Saw is laid across the entire cut diagonal. Handle on the LOWER-LEFT (carpenter's hand
   side, where the cut begins). Blade extends up-right with TIP at the OPPOSITE end of the
   cut (upper-right). The saw oscillates back-and-forth along its blade axis (push-pull
   sawing motion) — it does NOT travel along the cut. The cut line grows underneath. */
.hand-saw {
  position: absolute;
  width: 100%;
  max-width: 600px;
  height: auto;
  z-index: 5;
  left: 50%;
  top: 50%;   /* centered on the symmetric cut midpoint (50%, 50%) */
  /* Default (pre-animation): in position, but invisible */
  transform: translate(-50%, -50%) rotate(-13deg) translateX(0);
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.55)) drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}
.prices-modal.phase-saw .hand-saw {
  animation: sawCut 5s linear forwards;
}

/* Slow, deliberate hand-sawing — ~2 strokes/sec, the natural pace of a carpenter
   carefully cutting hardwood. Each apex uses ease-in-out for natural deceleration
   (the saw briefly slows at each direction change, like a real one). PUSH stroke
   (forward, +x) cuts the wood and takes 4% of duration; PULL stroke (return, -x)
   takes 6% — asymmetric for Western push-cut realism. */
@keyframes sawCut {
  /* Entry: saw lowers gently onto the wood from above (perpendicular descent) */
  0%    { transform: translate(-50%, -50%) rotate(-13deg) translate(0, -32%); opacity: 0;
          animation-timing-function: ease-out; }
  3%    { transform: translate(-50%, -50%) rotate(-13deg) translate(0, -10%); opacity: 1;
          animation-timing-function: ease-out; }
  5%    { transform: translate(-50%, -50%) rotate(-13deg) translate(0, 0);    opacity: 1;
          animation-timing-function: ease-in; }

  /* 8 sawing strokes from 7% to 87% — slow, with slight variation in stroke depth */
  7%    { transform: translate(-50%, -50%) rotate(-13deg) translateX(0);
          animation-timing-function: ease-in-out; }
  11%   { transform: translate(-50%, -50%) rotate(-13deg) translateX(28%);   /* Push 1 (cuts) */
          animation-timing-function: ease-in-out; }
  17%   { transform: translate(-50%, -50%) rotate(-13deg) translateX(-25%);  /* Pull 1 (return) */
          animation-timing-function: ease-in-out; }
  21%   { transform: translate(-50%, -50%) rotate(-13deg) translateX(31%);   /* Push 2 */
          animation-timing-function: ease-in-out; }
  27%   { transform: translate(-50%, -50%) rotate(-13deg) translateX(-26%);  /* Pull 2 */
          animation-timing-function: ease-in-out; }
  31%   { transform: translate(-50%, -50%) rotate(-13deg) translateX(29%);   /* Push 3 */
          animation-timing-function: ease-in-out; }
  37%   { transform: translate(-50%, -50%) rotate(-13deg) translateX(-25%);  /* Pull 3 */
          animation-timing-function: ease-in-out; }
  41%   { transform: translate(-50%, -50%) rotate(-13deg) translateX(32%);   /* Push 4 (deeper) */
          animation-timing-function: ease-in-out; }
  47%   { transform: translate(-50%, -50%) rotate(-13deg) translateX(-27%);  /* Pull 4 */
          animation-timing-function: ease-in-out; }
  51%   { transform: translate(-50%, -50%) rotate(-13deg) translateX(30%);   /* Push 5 */
          animation-timing-function: ease-in-out; }
  57%   { transform: translate(-50%, -50%) rotate(-13deg) translateX(-25%);  /* Pull 5 */
          animation-timing-function: ease-in-out; }
  61%   { transform: translate(-50%, -50%) rotate(-13deg) translateX(31%);   /* Push 6 */
          animation-timing-function: ease-in-out; }
  67%   { transform: translate(-50%, -50%) rotate(-13deg) translateX(-26%);  /* Pull 6 */
          animation-timing-function: ease-in-out; }
  71%   { transform: translate(-50%, -50%) rotate(-13deg) translateX(28%);   /* Push 7 */
          animation-timing-function: ease-in-out; }
  77%   { transform: translate(-50%, -50%) rotate(-13deg) translateX(-24%);  /* Pull 7 */
          animation-timing-function: ease-in-out; }
  81%   { transform: translate(-50%, -50%) rotate(-13deg) translateX(26%);   /* Push 8 (last) */
          animation-timing-function: ease-in-out; }
  87%   { transform: translate(-50%, -50%) rotate(-13deg) translateX(-18%);  /* Pull 8 (gentler) */
          animation-timing-function: ease-out; }

  /* Settle to neutral, then lift perpendicular off the wood */
  91%   { transform: translate(-50%, -50%) rotate(-13deg) translateX(0);     opacity: 1;
          animation-timing-function: ease-in; }
  96%   { transform: translate(-50%, -50%) rotate(-13deg) translate(0, -12%); opacity: 1;
          animation-timing-function: ease-out; }
  100%  { transform: translate(-50%, -50%) rotate(-13deg) translate(0, -32%); opacity: 0; }
}

/* When cut completes, the two halves fall apart */
.prices-modal.phase-cut .wood-half-top {
  transform: translate(-26px, -18px) rotate(-7deg);
  opacity: 0.92;
}
.prices-modal.phase-cut .wood-half-bottom {
  transform: translate(34px, 90px) rotate(8deg);
  opacity: 0.85;
}
.prices-modal.phase-done .wood-half-top {
  transform: translate(-80px, 200px) rotate(-22deg);
  opacity: 0;
}
.prices-modal.phase-done .wood-half-bottom {
  transform: translate(110px, 280px) rotate(28deg);
  opacity: 0;
}
.prices-modal.phase-done .wood-cut-line { opacity: 0; }

/* Sawdust particles falling from the cut path */
.sawdust {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}
.sawdust span {
  position: absolute;
  width: 5px;
  height: 5px;
  background: radial-gradient(circle, #d6a060 0%, #8b5a2b 80%, transparent 100%);
  border-radius: 50%;
  opacity: 0;
}
.prices-modal.phase-saw .sawdust span {
  animation: dustFall 1.6s ease-in infinite;
}
/* Sawdust positions land on the new symmetric diagonal: y = 71% - 0.41x (in board%) */
.sawdust span:nth-child(1)  { left: 12%; top: 66%; animation-delay: 0.0s; }
.sawdust span:nth-child(2)  { left: 20%; top: 63%; animation-delay: 0.35s; }
.sawdust span:nth-child(3)  { left: 28%; top: 60%; animation-delay: 0.7s; }
.sawdust span:nth-child(4)  { left: 36%; top: 56%; animation-delay: 1.05s; }
.sawdust span:nth-child(5)  { left: 44%; top: 53%; animation-delay: 1.4s; }
.sawdust span:nth-child(6)  { left: 52%; top: 50%; animation-delay: 1.75s; }
.sawdust span:nth-child(7)  { left: 60%; top: 46%; animation-delay: 2.1s; }
.sawdust span:nth-child(8)  { left: 68%; top: 43%; animation-delay: 2.45s; }
.sawdust span:nth-child(9)  { left: 76%; top: 40%; animation-delay: 2.8s; }
.sawdust span:nth-child(10) { left: 84%; top: 37%; animation-delay: 3.15s; }
.sawdust span:nth-child(11) { left: 18%; top: 64%; animation-delay: 0.55s; width: 3px; height: 3px; }
.sawdust span:nth-child(12) { left: 42%; top: 54%; animation-delay: 1.55s; width: 4px; height: 4px; }
.sawdust span:nth-child(13) { left: 58%; top: 47%; animation-delay: 2.25s; width: 3px; height: 3px; }
.sawdust span:nth-child(14) { left: 72%; top: 41%; animation-delay: 2.65s; width: 4px; height: 4px; }
@keyframes dustFall {
  0%   { opacity: 0; transform: translateY(0) translateX(0) scale(1); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(80px) translateX(-12px) scale(0.5); }
}

/* Final tagline + CTA appear after cut */
.prices-tagline {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.6s ease 0.15s, transform 0.6s cubic-bezier(.34,1.56,.64,1) 0.15s;
  pointer-events: none;
  z-index: 3;
}
.prices-tagline h3 {
  margin: 0 0 22px;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  font-weight: 900;
  color: #fff8e8;
  letter-spacing: 0.5px;
  text-shadow: 0 4px 18px rgba(0,0,0,0.6), 0 0 30px rgba(255,200,120,0.25);
  font-family: 'Georgia', 'Playfair Display', serif;
}
.prices-tagline .btn { font-size: 1.05rem; padding: 14px 30px; }
.prices-modal.phase-done .prices-tagline {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Reduced motion: skip animations, show end state */
@media (prefers-reduced-motion: reduce) {
  .wood-sign, .hand-saw, .wood-half, .wood-cut-line, .sawdust span, .prices-tagline {
    animation: none !important;
    transition: none !important;
  }
  .prices-modal.open .hand-saw { display: none; }
  .prices-modal.open .wood-half { opacity: 1; transform: none; }
  .prices-modal.open .prices-tagline { opacity: 1; transform: none; pointer-events: auto; }
}

@media (max-width: 600px) {
  /* Popup fits a portrait viewport */
  .prices-modal { padding: 12px; }
  .prices-stage { height: auto; min-height: 240px; }
  .wood-sign { max-width: 100%; }   /* keep 16:9 aspect — preserves perfect -13° cut alignment */
  .wood-content { padding: 16px 20px; }
  .wood-content h3 { font-size: 1.1rem; margin-bottom: 6px; }
  .wood-content p  { font-size: 0.78rem; line-height: 1.35; margin: 2px 0; }

  /* Tagline scales down on small phones */
  .prices-tagline h3 { font-size: 1.45rem; margin-bottom: 16px; }
  .prices-tagline .btn { padding: 12px 24px; font-size: 0.95rem; }

  /* 3D Prezzi button: slightly tighter so it sits well next to the primary CTA */
  .btn-prices {
    padding: 12px 22px;
    font-size: 0.95rem;
    border-radius: 12px;
    box-shadow:
      inset 0 2px 0 rgba(255,235,200,0.55),
      inset 0 -2px 0 rgba(50,28,10,0.30),
      0 2px 0 #8b5a2b,
      0 4px 0 #6b4523,
      0 6px 0 #543518,
      0 7px 11px rgba(0,0,0,0.40);
  }
  .btn-prices:hover {
    box-shadow:
      inset 0 2px 0 rgba(255,235,200,0.6),
      inset 0 -2px 0 rgba(50,28,10,0.30),
      0 5px 0 #8b5a2b,
      0 7px 0 #6b4523,
      0 9px 0 #543518,
      0 11px 18px rgba(0,0,0,0.45);
  }

  /* Smaller crumbs travel less far on phone screens */
  .btn-prices-splash span:nth-child(1)  { --tx: -42px; --ty: -18px; }
  .btn-prices-splash span:nth-child(2)  { --tx:  46px; --ty: -22px; }
  .btn-prices-splash span:nth-child(3)  { --tx: -36px; --ty:  26px; }
  .btn-prices-splash span:nth-child(4)  { --tx:  50px; --ty:  22px; }
  .btn-prices-splash span:nth-child(5)  { --tx: -22px; --ty: -32px; }
  .btn-prices-splash span:nth-child(6)  { --tx:  24px; --ty:  32px; }
  .btn-prices-splash span:nth-child(7)  { --tx: -14px; --ty:  38px; }
  .btn-prices-splash span:nth-child(8)  { --tx:  16px; --ty: -38px; }
  .btn-prices-splash span:nth-child(9)  { --tx: -54px; --ty:   6px; }
  .btn-prices-splash span:nth-child(10) { --tx:  56px; --ty:  -4px; }
  .btn-prices-splash span:nth-child(11) { --tx: -30px; --ty: -42px; }
  .btn-prices-splash span:nth-child(12) { --tx:  34px; --ty:  44px; }
}