/* ==========================================================================
   DAWID CLEANING: STYLE SHEET
   Design tokens live at the top. Swap hex values here to re-skin the
   whole site (landing page + booking flow share this one file).
   ========================================================================== */

:root{
  /* --- Color --- */
  --ink:        #142420;   /* primary text, near-black pine */
  --ink-soft:   #3C4D47;   /* secondary text */
  --slate:      #6B7B75;   /* tertiary / muted text */
  --paper:      #F6F8F6;   /* page background, cool white */
  --paper-dim:  #EEF2EF;   /* slightly deeper surface */
  --mint:       #DCEFE8;   /* pale surface for cards / alt sections */
  --pine:       #0E5C49;   /* primary brand color */
  --pine-dark:  #0A4A3A;   /* hover / pressed state */
  --pine-tint:  #E4F0EC;   /* very light pine wash */
  --amber:      #F2A33D;   /* accent, used sparingly */
  --amber-dark: #D6862A;
  --line:       #D7E3DE;   /* hairline borders */
  --white:      #FFFFFF;
  --error:      #C24B3F;

  /* --- Type --- */
  --font-display: 'Unbounded', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'Space Mono', monospace;

  /* --- Layout --- */
  --max: 1180px;
  --gap: 24px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;

  /* --- Motion --- */
  --ease: cubic-bezier(.22,.68,0,1);
  --ease-soft: cubic-bezier(.4,.0,.2,1);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor: pointer; }
input, select, textarea{ font-family: inherit; font-size: 1rem; }

:focus-visible{
  outline: 2.5px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pine);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before{
  content:'';
  width: 7px; height: 7px;
  background: var(--amber);
  border-radius: 50%;
  display: inline-block;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.01em;
}

.section-head{
  max-width: 640px;
  margin-bottom: 38px;
}
.section-head h2{
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  margin-top: 14px;
}
.section-head p{
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin-top: 16px;
  max-width: 520px;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1.5px solid transparent;
  transition: transform .35s var(--ease), background .25s var(--ease-soft), color .25s var(--ease-soft), border-color .25s;
  white-space: nowrap;
}
.btn:active{ transform: scale(0.96); }
.btn-primary{
  background: var(--pine);
  color: var(--white);
}
.btn-primary:hover{ background: var(--pine-dark); transform: translateY(-2px); }
.btn-ghost{
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn-ghost:hover{ border-color: var(--pine); color: var(--pine); transform: translateY(-2px); }
.btn-block{ width: 100%; }
.btn[disabled]{ opacity: 0.45; pointer-events: none; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  background: rgba(246,248,246,0);
  border-bottom: 1px solid rgba(215,227,222,0);
  transition: background .4s var(--ease-soft), border-color .4s var(--ease-soft), box-shadow .4s;
}
.nav.is-scrolled{
  background: rgba(246,248,246,0.86);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  max-width: var(--max);
  margin: 0 auto;
}
.logo{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.logo small{
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--slate);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
}
.nav-links{
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-links a{
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-soft);
  position: relative;
  padding: 4px 0;
  transition: color .2s;
}
.nav-links a:hover{ color: var(--pine); }
.nav-links a::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:0; height:2px;
  background: var(--amber);
  transition: width .3s var(--ease);
}
.nav-links a:hover::after{ width: 100%; }
.nav-cta{ display:flex; align-items:center; gap:18px; }
.nav-phone{
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.nav-burger{ display:none; }

@media (max-width: 860px){
  .nav-links{ display:none; }
  .nav-phone{ display:none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position: relative;
  padding: 148px 0 90px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 700px 420px at 86% -8%, var(--mint) 0%, transparent 70%),
    radial-gradient(ellipse 600px 500px at -10% 30%, var(--pine-tint) 0%, transparent 65%);
}

/* ---------- decorative background elements ---------- */
/* A soft dot grid, used behind sections that feel a little empty.
   Pure CSS, no images, sits behind the content via z-index. */
.dot-grid{
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--line) 1.6px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 40%, transparent 85%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 40%, transparent 85%);
  pointer-events: none;
  z-index: 0;
}

/* Large soft circles that drift very slowly, purely decorative. */
.bg-circle{
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}
@keyframes drift-a{
  0%, 100%{ transform: translate(0, 0); }
  50%{ transform: translate(18px, -22px); }
}
@keyframes drift-b{
  0%, 100%{ transform: translate(0, 0); }
  50%{ transform: translate(-16px, 20px); }
}
@media (prefers-reduced-motion: reduce){
  .bg-circle{ animation: none !important; }
}

/* specific placements, reused across sections */
.circle-hero-1{
  width: 340px; height: 340px;
  top: -80px; right: 4%;
  background: radial-gradient(circle at 35% 30%, var(--mint), transparent 70%);
  animation: drift-a 14s ease-in-out infinite;
}
.circle-hero-2{
  width: 220px; height: 220px;
  bottom: -60px; left: 2%;
  background: radial-gradient(circle at 40% 40%, var(--pine-tint), transparent 70%);
  animation: drift-b 16s ease-in-out infinite;
}
.circle-services-1{
  width: 300px; height: 300px;
  top: -120px; left: 50%;
  background: radial-gradient(circle at 40% 40%, var(--mint), transparent 72%);
  animation: drift-a 18s ease-in-out infinite;
}
.circle-showcase-1{
  width: 260px; height: 260px;
  bottom: -100px; right: 6%;
  background: radial-gradient(circle at 45% 35%, var(--pine-tint), transparent 70%);
  animation: drift-b 15s ease-in-out infinite;
}
.circle-about-1{
  width: 280px; height: 280px;
  top: 10%; left: -80px;
  background: radial-gradient(circle at 40% 40%, var(--mint), transparent 70%);
  animation: drift-b 17s ease-in-out infinite;
}
.circle-testimonial-1{
  width: 320px; height: 320px;
  bottom: -140px; left: 8%;
  background: radial-gradient(circle at 40% 40%, var(--mint), transparent 72%);
  animation: drift-a 20s ease-in-out infinite;
}
.circle-testimonial-2{
  width: 200px; height: 200px;
  top: -60px; right: 12%;
  background: radial-gradient(circle at 40% 40%, var(--pine-tint), transparent 70%);
  animation: drift-b 13s ease-in-out infinite;
}
.circle-footer-cta-1{
  width: 360px; height: 360px;
  top: -140px; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 40% 40%, var(--mint), transparent 72%);
  animation: drift-a 19s ease-in-out infinite;
}

/* A soft diagonal stripe wash, an alternative to the dot grid for sections
   that want a bit more texture without extra visual noise. Pure CSS. */
.stripe-wash{
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    128deg,
    var(--pine-tint) 0px,
    var(--pine-tint) 2px,
    transparent 2px,
    transparent 34px
  );
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  pointer-events: none;
  z-index: 0;
}

.hero-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.8fr;
  gap: 60px;
  align-items: center;
}
.hero-copy .eyebrow{ margin-bottom: 22px; }

.hero-title{
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  position: relative;
}
.wipe-line{
  position: relative;
  display: block;
  overflow: hidden;
}
.wipe-line .wiper{
  position: absolute;
  inset: -10% -4% -10% 0;
  background: var(--paper-dim);
  z-index: 2;
  transform: translateX(0%);
  border-right: 3px solid var(--amber);
  box-shadow: 8px 0 24px -4px rgba(20,36,32,0.18);
}
.wipe-line.wipe-done .wiper{
  transform: translateX(106%);
  transition: transform 1.05s var(--ease);
}
.hero-title .accent{ color: var(--pine); }

.hero-sub{
  margin-top: 26px;
  font-size: 1.12rem;
  color: var(--ink-soft);
  max-width: 460px;
}
.hero-actions{
  margin-top: 30px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-trust{
  margin-top: 34px;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.hero-trust div{ display:flex; flex-direction:column; }
.hero-trust strong{
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--pine);
}
.hero-trust span{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 2px;
}

/* hero visual: layered "panes" suggesting glass being wiped */
.hero-visual{
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, var(--pine) 0%, var(--pine-dark) 100%);
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(14,92,73,0.35);
}
.hero-visual-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* 'contain' never crops the image, it scales to fit within the box
     with breathing room around it. Use this for logos, graphics, or any
     image where the important content isn't safe to crop.
     Swap to 'cover' + padding: 24px (removed below) once a real photo
     (people, a van, a space) is in place, those crop gracefully. */
  object-fit: contain;
  object-position: center;
  padding: 32px;
}
.hero-visual::before{
  content:'';
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 26px);
}
.hero-visual .streak, .about-visual .streak{
  position: absolute;
  top: -20%;
  width: 38%;
  height: 160%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: rotate(8deg);
  animation: streak-sweep 5.5s ease-in-out infinite;
}
@keyframes streak-sweep{
  0%{ left: -45%; }
  45%{ left: 110%; }
  100%{ left: 110%; }
}
.hero-visual .badge, .about-visual .badge{
  position: absolute;
  bottom: 26px; left: 26px; right: 26px;
  background: rgba(255,255,255,0.96);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero-visual .badge .dot, .about-visual .badge .dot{
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--amber);
  flex-shrink: 0;
  display:flex; align-items:center; justify-content:center;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1rem;
}
.hero-visual .badge p, .about-visual .badge p{
  margin:0; font-size: 0.84rem; color: var(--ink-soft); line-height: 1.35;
}
.hero-visual .badge strong, .about-visual .badge strong{ color: var(--ink); display:block; font-size: 0.92rem; }

@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-copy{ order: 1; }
  .hero-visual{ order: 2; aspect-ratio: 16/10; min-height: 280px; }
  .hero{ padding: 120px 0 64px; }
}

/* ==========================================================================
   REVEAL-ON-SCROLL (generic)
   ========================================================================== */
.reveal{
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .7s var(--ease-soft), transform .7s var(--ease-soft);
}
.reveal.in-view{ opacity: 1; transform: translateY(0); }
.reveal-stagger.in-view{ transition-delay: var(--d, 0ms); }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services{ padding: 84px 0; position: relative; overflow: hidden; }
.services .wrap{ position: relative; z-index: 1; }
.service-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.service-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 34px 28px;
  position: relative;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
}
.service-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 26px 50px -24px rgba(20,36,32,0.22);
  border-color: transparent;
}
.service-icon{
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--mint);
  display: flex; align-items: center; justify-content: center;
  color: var(--pine);
  margin-bottom: 22px;
  transition: background .35s, transform .45s var(--ease);
}
.service-card:hover .service-icon{ background: var(--amber); color: var(--white); transform: rotate(-6deg) scale(1.06); }
.service-card h3{
  font-size: 1.22rem;
  margin-bottom: 10px;
}
.service-card p{
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0 0 18px;
}
.service-tags{ display: flex; flex-wrap: wrap; gap: 8px; }
.service-tags span{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pine);
  background: var(--pine-tint);
  padding: 5px 10px;
  border-radius: 999px;
}

@media (max-width: 980px){
  .service-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   HOW IT WORKS
   ========================================================================== */
.how{ padding: 70px 0; background: var(--mint); position: relative; overflow: hidden; }
.how .wrap{ position: relative; z-index: 1; }
.how-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative;
}
.how-step{ position: relative; padding-left: 6px; }
.how-step .num{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--white);
  background: var(--pine);
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.how-step h4{ font-size: 1.08rem; margin-bottom: 8px; }
.how-step p{ color: var(--ink-soft); font-size: 0.92rem; margin:0; }

@media (max-width: 860px){
  .how-grid{ grid-template-columns: 1fr; gap: 36px; }
}

/* ==========================================================================
   ABOUT / WHY CHOOSE US (replaces the former before/after section)
   ========================================================================== */
.about{ padding: 84px 0; position: relative; overflow: hidden; }
.about-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.85fr;
  gap: 64px;
  align-items: center;
}
.about-copy p{
  color: var(--ink-soft);
  font-size: 1.02rem;
  margin: 14px 0 24px;
  max-width: 520px;
}
.about-copy h2{
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  margin-top: 14px;
}
.about-list{
  margin: 0 0 26px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.about-list li{
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.about-list-icon{
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--pine-tint);
  color: var(--pine);
  display: flex; align-items: center; justify-content: center;
}
.about-list strong{ display: block; font-size: 0.98rem; margin-bottom: 2px; }
.about-list p{ margin: 0; color: var(--ink-soft); font-size: 0.9rem; }

.about-visual{
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, var(--pine) 0%, var(--pine-dark) 100%);
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(14,92,73,0.35);
}
.about-visual-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills the box and crops to fit, no manual resizing needed */
  object-position: center;
}
.about-visual::before{
  content:'';
  position:absolute; inset:0;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 26px);
}
.about-visual-icon{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  color: rgba(255,255,255,0.9);
}
.about-visual .badge{
  position: absolute;
  bottom: 26px; left: 26px; right: 26px;
  background: rgba(255,255,255,0.96);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

@media (max-width: 980px){
  .about-grid{ grid-template-columns: 1fr; }
  .about-visual{ aspect-ratio: 16/10; }
}

/* ==========================================================================
   TESTIMONIAL
   ========================================================================== */
.testimonial{ padding: 70px 0; position: relative; overflow: hidden; }
.testimonial .wrap{ position: relative; z-index: 1; }
.testimonial-card{
  background: var(--pine);
  border-radius: var(--radius-lg);
  padding: 56px 60px;
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.testimonial-card::before{
  content: '"';
  position: absolute;
  top: -40px; left: 24px;
  font-family: var(--font-display);
  font-size: 11rem;
  color: rgba(255,255,255,0.07);
  line-height: 1;
}
.testimonial-card p{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  line-height: 1.4;
  max-width: 760px;
  position: relative;
  z-index: 1;
}
.testimonial-author{
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.testimonial-author .av{
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--amber);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display);
  font-size: 0.95rem;
}
.testimonial-author strong{ display:block; font-size: 0.92rem; }
.testimonial-author span{ font-size: 0.8rem; opacity: 0.75; }

@media (max-width: 700px){
  .testimonial-card{ padding: 40px 28px; }
}

/* ==========================================================================
   FOOTER CTA
   ========================================================================== */
.footer-cta{
  padding: 76px 0 110px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.footer-cta .wrap{ position: relative; z-index: 1; }
.footer-cta h2{
  font-size: clamp(2rem, 4.4vw, 3rem);
  max-width: 700px;
  margin: 18px auto 30px;
}
.footer{
  border-top: 1px solid var(--line);
  padding: 40px 0 56px;
}
.footer-grid{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
}
.footer-col h5{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 14px;
}
.footer-col a, .footer-col p{
  display:block;
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.footer-col a:hover{ color: var(--pine); }
.footer-bottom{
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--slate);
  flex-wrap: wrap;
  gap: 10px;
}

/* ==========================================================================
   FLOATING BOOK BAR
   ========================================================================== */
.float-bar{
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translate(-50%, 140%);
  z-index: 600;
  background: var(--ink);
  color: var(--white);
  border-radius: 999px;
  padding: 12px 12px 12px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 24px 50px -16px rgba(20,36,32,0.45);
  transition: transform .55s var(--ease);
}
.float-bar.is-visible{ transform: translate(-50%, 0); }
.float-bar p{
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  flex: 1;
  min-width: 0;
}
.float-bar p span{ color: var(--amber); }
.float-bar .btn-primary{ background: var(--amber); flex-shrink: 0; }
.float-bar .btn-primary:hover{ background: var(--amber-dark); }
.float-bar .close{
  background: rgba(255,255,255,0.12);
  border: none;
  color: var(--white);
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items:center; justify-content:center;
  flex-shrink: 0;
  transition: background .2s;
}
.float-bar .close:hover{ background: rgba(255,255,255,0.22); }

/* Below 560px, the bar becomes a rounded rectangle spanning the width of
   the screen instead of a pill, so there's room for the text to wrap
   onto two lines without clipping or squeezing the buttons. */
@media (max-width: 560px){
  .float-bar{
    width: calc(100% - 28px);
    left: 14px;
    right: 14px;
    transform: translate(0, 140%);
    align-items: center;
    border-radius: 20px;
    padding: 14px 14px 14px 18px;
  }
  .float-bar.is-visible{ transform: translate(0,0); }
  .float-bar p{
    font-size: 0.82rem;
    white-space: normal;
    line-height: 1.35;
  }
}

@media (max-width: 380px){
  .float-bar{
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .float-bar p{ flex-basis: 100%; }
  .float-bar .btn-primary{ order: 2; }
  .float-bar .close{ order: 3; margin-left: auto; }
}

/* ==========================================================================
   BOOKING PAGE
   ========================================================================== */
.booking-shell{
  padding: 130px 0 100px;
  min-height: 100vh;
}
.booking-head{ max-width: 560px; margin-bottom: 40px; }
.booking-head h1{ font-size: clamp(1.9rem, 4vw, 2.6rem); margin-top: 14px; }
.booking-head p{ color: var(--ink-soft); margin-top: 14px; }

.progress-rail{
  display: flex;
  align-items: center;
  margin-bottom: 48px;
  max-width: 720px;
}
.progress-step{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.progress-step .pip{
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--slate);
  transition: all .35s var(--ease);
  z-index: 2;
}
.progress-step .label{
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 8px;
  text-align: center;
  white-space: nowrap;
}
.progress-step::before{
  content:'';
  position: absolute;
  top: 14px; left: -50%; right: 50%;
  height: 2px;
  background: var(--line);
  z-index: 1;
}
.progress-step:first-child::before{ display: none; }
.progress-step.is-done .pip{ background: var(--pine); border-color: var(--pine); color: var(--white); }
.progress-step.is-done::before{ background: var(--pine); }
.progress-step.is-active .pip{ border-color: var(--pine); color: var(--pine); box-shadow: 0 0 0 4px var(--pine-tint); }
.progress-step.is-active .label{ color: var(--pine); }

@media (max-width: 700px){
  .progress-step .label{ display: none; }
}

.booking-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 44px;
  max-width: 720px;
  box-shadow: 0 40px 80px -50px rgba(20,36,32,0.25);
}
@media (max-width: 700px){
  .booking-card{ padding: 28px 22px; }
}

.step-panel{ display: none; }
.step-panel.is-active{
  display: block;
  animation: step-in .5s var(--ease-soft);
}
@keyframes step-in{
  from{ opacity: 0; transform: translateX(16px); }
  to{ opacity: 1; transform: translateX(0); }
}
.step-panel h2{ font-size: 1.5rem; margin-bottom: 6px; }
.step-panel .step-sub{ color: var(--slate); font-size: 0.9rem; margin-bottom: 30px; }

.field{ margin-bottom: 22px; }
.field label{
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ink);
}
.field .hint{
  display:block;
  font-size: 0.78rem;
  color: var(--slate);
  margin-top: 6px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field input[type="date"],
.field select,
.field textarea{
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  transition: border-color .2s, background .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--pine);
  background: var(--white);
  outline: none;
}
.field textarea{ min-height: 100px; resize: vertical; }
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color: var(--error); }
.field .error-msg{ display:none; color: var(--error); font-size: 0.78rem; margin-top: 6px; }
.field.has-error .error-msg{ display:block; }

.field-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 540px){ .field-row{ grid-template-columns: 1fr; } }

/* select wrapper arrow */
.select-wrap{ position: relative; }
.select-wrap::after{
  content: '▾';
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--slate);
  pointer-events: none;
  font-size: 0.8rem;
}
.select-wrap select{ appearance: none; padding-right: 38px; cursor: pointer; }

/* choice cards (occupation / service / property type) */
.choice-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.choice-grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 540px){ .choice-grid, .choice-grid.cols-3{ grid-template-columns: 1fr 1fr; } }

.choice{ position: relative; }
.choice input{ position: absolute; opacity: 0; pointer-events: none; }
.choice label{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .2s var(--ease-soft);
  margin: 0;
}
.choice label:hover{ border-color: var(--pine); color: var(--ink); }
.choice input:checked + label{
  border-color: var(--pine);
  background: var(--pine-tint);
  color: var(--pine-dark);
}
.choice label .ico{
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.choice input:checked + label .ico{ border-color: var(--pine); background: var(--pine); }
.choice input:checked + label .ico::after{
  content:''; width: 7px; height: 7px; background: var(--white); border-radius: 50%;
}
.choice.checkbox label .ico{ border-radius: 5px; }
.choice.checkbox input:checked + label .ico::after{ border-radius: 1px; width: 8px; height: 8px; }

.stepper{
  display: flex;
  align-items: center;
  gap: 14px;
}
.stepper button{
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--white);
  font-size: 1.1rem;
  color: var(--pine);
  display:flex; align-items:center; justify-content:center;
  transition: all .2s;
}
.stepper button:hover{ background: var(--pine-tint); border-color: var(--pine); }
.stepper output{
  font-family: var(--font-mono);
  font-size: 1.1rem;
  min-width: 24px;
  text-align: center;
}

.step-actions{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 38px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.review-list{ margin-bottom: 8px; }
.review-group{
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.review-group:last-child{ border-bottom: none; }
.review-group h4{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pine);
  margin-bottom: 10px;
}
.review-row{
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.9rem;
  padding: 4px 0;
}
.review-row dt{ color: var(--slate); }
.review-row dd{ margin: 0; font-weight: 500; text-align: right; }

.form-error{
  display: block;
  min-height: 1.2em;
  color: var(--error);
  font-size: 0.86rem;
  margin: 4px 0 0;
}

.success-panel{ text-align: center; padding: 30px 0 10px; }
.success-panel .check{
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--pine-tint);
  color: var(--pine);
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 22px;
}
.success-panel h2{ margin-bottom: 12px; }
.success-panel p{ color: var(--ink-soft); max-width: 420px; margin: 0 auto 28px; }
.success-ref{
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--slate);
  background: var(--paper-dim);
  border-radius: 999px;
  padding: 8px 18px;
  display: inline-block;
  margin-bottom: 28px;
}

/* utility */
.text-center{ text-align: center; }