/* --- 1) Header/nav tidy on small screens --- */
header.sticky-top {
  z-index: 1060;                 /* above content & reCAPTCHA */
  backdrop-filter: blur(4px);
}
.navbar .navbar-brand img {      /* keep logo reasonable on phones */
  height: 56px;
}
@media (max-width: 576px) {
  .navbar { padding-block: .5rem; }
  .navbar-toggler { border: 0; }
}

/* --- 2) Kill horizontal drag/scroll safely --- */
html, body {
  width: 100%;
  overflow-x: hidden;            /* no horizontal scrollbars/drag */
  overscroll-behavior-x: none;   /* prevent side bounce on touch */
  touch-action: pan-y;           /* vertical scroll only */
}
/* Bootstrap rows use negative margins; clip any accidental overflow */
.container, .container-fluid, section, header, footer {
  overflow-x: clip;
}
/* Keep media from pushing the layout wider than the viewport */
img, video, svg, canvas {
  max-width: 100%;
  height: auto;
}

/* --- 3) Show the “Why choose us” (desktop-why-choose) only on lg+ --- */
.desktop-why-choose { display: none !important; } /* hide by default */
@media (min-width: 992px) {       /* lg breakpoint */
  .desktop-why-choose { display: grid; }
}

/* (Optional) reCAPTCHA fits on very narrow phones */
@media (max-width: 380px) {
  .g-recaptcha {
    transform: scale(.90);
    transform-origin: left top;
  }
}
/* --- 4) Fresh Finish brand styles --- */

:root{
  --ff-bg: #ffffff;
  --ff-fg: #111111;
  --ff-gold: #D4AF37;
  --ff-gold-dark: #B8941F;
  --ff-muted: #767676;
  --ff-gray: #F7F7F7;
  --radius: 16px;
}
body{font-family:'Roboto',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji';color:var(--ff-fg)}
h1,h2,h3,h4{font-family:'Poppins',sans-serif}
a{color:inherit}

/* Header */
.navbar-brand img{height:48px}
.btn-gold{background:var(--ff-gold);color:#000;border-color:var(--ff-gold)}
.btn-gold:hover{background:var(--ff-gold-dark);border-color:var(--ff-gold-dark);color:#000}

/* Hero */
.hero{position:relative;min-height:80vh;display:flex;align-items:center}
.hero::before{content:"";position:absolute;inset:0;background:url('/assets/hero-ff.png') center/cover no-repeat;z-index:0}
.hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.4);z-index:1}
.hero>.container{position:relative;z-index:2}
.hero .stat-card{backdrop-filter:saturate(140%) blur(6px);background:rgba(255,255,255,.1);color:#fff;border-radius:var(--radius)}
.hero h1{color:#fff}
.hero p{color:#e8e8e8}
.text-gold{color:var(--ff-gold)}
.border-gold{border-color:var(--ff-gold)!important}

/* Sections */
section{scroll-margin-top:84px}
#services{background:var(--ff-gray)}

/* Cards */
.service-card{overflow:hidden;border-radius:var(--radius)}
.service-card .ratio{border-bottom-left-radius:0;border-bottom-right-radius:0}
.service-card img{transition:transform .3s ease}
.service-card:hover img{transform:scale(1.05)}
.icon-badge{position:absolute;top:1rem;left:1rem;background:var(--ff-gold);color:#000;width:64px;height:64px;display:grid;place-items:center;border-radius:999px}

/* About */
.about-img{border-radius:var(--radius);overflow:hidden}
.stat-tile{border-radius:var(--radius)}

/* Contact */
.form-select:focus,.form-control:focus{box-shadow:0 0 0 .25rem rgba(212,175,55,.25);border-color:var(--ff-gold)}

/* Footer */
footer{background:#000;color:#fff}
footer a{color:#bbb;text-decoration:none}
footer a:hover{color:var(--ff-gold)}
.social a{background:var(--ff-gold);color:#000;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px}
.social a:hover{background:var(--ff-gold-dark)}
footer .form-control:focus{box-shadow:0 0 0 .25rem rgba(212,175,55,.25);border-color:var(--ff-gold)}

/* Icon badges */
.icon-badge .badge-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}

/* Gold bullet lists like the screenshot */
.ff-bullets {
  list-style: disc;
  padding-left: 1.25rem;
  margin-bottom: 0;
}
.ff-bullets li::marker {
  color: var(--ff-gold);
  font-size: 1.1em;
}

/* Feature trio: gold circle + centered icon */
.feature-dot{
  width:64px;
  height:64px;
  border-radius:999px;
  background:var(--ff-gold);
  display:grid;
  place-items:center;
}
.feature-dot img{
  width:36px;          /* icons are 64px source; scale to fit nicely */
  height:36px;
  object-fit:contain;
}


/* Pricing */
.price-card{ border-radius:16px; border:2px solid #f1f1f1; transition:border-color .2s, box-shadow .2s }
.price-card:hover{ border-color:var(--ff-gold); box-shadow:0 8px 20px rgba(0,0,0,.06) }

.icon-dot-40{
  width:40px; height:40px; border-radius:999px;
  background: var(--ff-gold); color:#000;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.icon-img-20{ width:20px; height:20px; object-fit:contain; display:block }
.bg-brown-1{ background:#8B7A5B !important; color:#fff }
.bg-brown-2{ background:#6B5B3C !important; color:#fff }

.price-list{ border-radius:12px }
.price-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:.5rem 0; border-bottom:1px solid rgba(0,0,0,.06)
}
.price-row:last-child{ border-bottom:none }
.price-row .price{ color:var(--ff-gold); font-weight:600 }

.ironing-card{ border:2px solid var(--ff-gold); background:linear-gradient(90deg, rgba(212,175,55,.06), rgba(212,175,55,.12)); border-radius:16px }

.pricing-strip{ background:linear-gradient(90deg, rgba(212,175,55,.10), rgba(212,175,55,.05)) }
.border-gold-subtle{ border:1px solid rgba(212,175,55,.25) }
.bg-gold-soft{ background:rgba(212,175,55,.25) }

.ratio-16x9{ aspect-ratio:16/9; --bs-aspect-ratio: 67.25% !important; }
.ratio-4x3{ aspect-ratio:4/3 }  
.icon-img-20 { width:20px; height:20px; object-fit:contain; display:block; }


/* Stepper */
.ff-stepper{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}
.ff-step{display:flex;flex-direction:column;align-items:center;gap:.25rem;opacity:.5}
.ff-step.active,.ff-step.done{opacity:1}
.ff-step span{display:grid;place-items:center;width:36px;height:36px;border-radius:999px;background:var(--ff-gold);color:#000;font-weight:700}
.ff-step small{font-weight:500}

/* Options */
.ff-option{cursor:pointer}
.ff-option input{display:none}
.ff-option-body{display:flex;gap:.75rem;align-items:center;border:2px solid #eee;border-radius:12px;padding:.75rem 1rem;background:#fff;transition:.2s}
.ff-option-icon{width:36px;height:36px;border-radius:999px;background:var(--ff-gold);display:grid;place-items:center}
.ff-option-icon img{width:20px;height:20px;object-fit:contain}
.ff-option input:checked + .ff-option-body{border-color:var(--ff-gold);box-shadow:0 6px 14px rgba(0,0,0,.06)}

/* Buttons in footer already inherit .btn-gold from site css */
/* Brand-styled inline alert */
.ff-inline-alert{
  border-radius: 12px;
  border-left: 6px solid var(--ff-gold);
  background: rgba(212,175,55,.08);
  color: #111;
  font-weight: 500;
}

/* FAQ styling to match Figma */
.faq-accordion .faq-item{
  border:1px solid #eee; border-radius:12px; overflow:hidden; background:#fff;
}
.faq-toggle{
  gap:12px; background:#fff; padding:14px 18px;
}
.faq-toggle:not(.collapsed){ box-shadow:none; background:#fff; }
.faq-toggle:hover{ background:#F8F8F8; }
.faq-toggle::after{ display:none; } /* hide default BS chevron */

.faq-icon{
  width:36px; height:36px; border-radius:999px;
  background:var(--ff-gold); display:flex; align-items:center; justify-content:center;
  flex:0 0 36px;
}
.faq-icon img{ width:20px; height:20px; object-fit:contain; display:block; }

.faq-chevron{ transition:transform .2s ease, color .2s ease; color:#767676; }
.faq-toggle:not(.collapsed) .faq-chevron{ transform:rotate(180deg); color:var(--ff-gold); }

.faq-body{ padding:12px 18px 18px 66px; } /* aligns with icon */
.faq-cta{ background:linear-gradient(90deg, rgba(212,175,55,.10), rgba(212,175,55,.05)); }
.accordion-button:not(.collapsed){ box-shadow:none; background:#FCFAF4; color:#767676;}

    .ty-card { max-width: 760px; margin: 48px auto; }
    .ty-dot { width: 84px; height: 84px; border-radius: 50%; background: var(--ff-gold,#D4AF37); display:flex; align-items:center; justify-content:center; margin: 0 auto 16px; }
    .ty-steps .step-num { width: 36px; height: 36px; border-radius: 999px; background: var(--ff-gold,#D4AF37); color:#000; font-weight:700; display:flex; align-items:center; justify-content:center; margin: 0 auto 8px; }
    .ty-soft { background: linear-gradient(90deg, rgba(212,175,55,.10), rgba(212,175,55,.05)); }
    .ty-links a { color: var(--ff-gold,#D4AF37); text-decoration: none; }
    .ty-links a:hover { color: #B8941F; }

    .hp-field{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}