/* A streamlined luxury experience for Biddlecome Signature Detailing.
   Layered after the existing desktop and mobile styles. */
:root {
  --exp-gold: #d7bd8f;
  --exp-ivory: #f3efe8;
  --exp-bg: #0b0b0b;
  --exp-border: rgba(231,215,184,.23);
}
html { scroll-padding-top: 85px; }
body { background: var(--exp-bg); color: var(--exp-ivory); }
body :is(button,a,input,select,textarea):focus-visible {
  outline: 2px solid var(--exp-gold);
  outline-offset: 3px;
}
.nav {
  position: fixed;
  height: 78px;
  background: rgba(9,9,9,.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(215,189,143,.17);
  gap: 34px;
}
.nav #navlinks { gap: 30px; }
.nav #navlinks a { letter-spacing: 1.5px; opacity: .9; font-size: 11px; }
.nav-cta {
  border: 1px solid var(--exp-gold);
  color: var(--exp-gold);
  font-size: 11px;
  padding: 13px 17px;
  letter-spacing: 1.3px;
}
.nav-cta:hover { background: var(--exp-gold); color: #100f0d; }
.hero {
  min-height: 730px;
  height: min(900px, 100svh);
}
.hero-bg { background-position: 50% center; filter: grayscale(1) contrast(1.05) brightness(.60); }
.hero-shade { background: linear-gradient(90deg,rgba(0,0,0,.84),rgba(0,0,0,.32) 80%),linear-gradient(0deg,rgba(0,0,0,.7),transparent 60%); }
.hero-inner {
  max-width: 1320px;
  padding: clamp(160px,20vh,215px) 6% 55px;
}
.hero h1 {
  font-size: clamp(62px, 7.6vw, 118px);
  letter-spacing: -1.7px;
  line-height: .96;
  margin: 25px 0 20px;
}
.hero-inner>p { max-width: 550px; font-size: 17px; line-height: 1.7; color: #e2ddd5; }
.hero .actions { margin-top: 30px; }
.btn { font-size: 11px; letter-spacing: 1.3px; gap: 25px; min-height: 55px; }
.btn.light { background: var(--exp-gold); border-color: var(--exp-gold); color: #12110f; }
.btn.light:hover { background: #efdbb4; }
.btn.ghost { border-color: rgba(243,239,232,.6); }
.hero-foot { color: rgba(248,244,236,.8); font-size: 10px; letter-spacing: 2px; }
.signature-strip {
  max-width: none;
  padding: 23px 7%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-top: 1px solid var(--exp-border);
  border-bottom: 1px solid var(--exp-border);
  background: #141310;
}
.signature-strip span {
  color: #d9cab1;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 10px;
  font-weight: 600;
}
.services { padding-top: 95px; padding-bottom: 100px; }
.section-head { gap: 30px; align-items: end; }
.section-head h2 { font-size: clamp(45px,5.4vw,78px); letter-spacing:-1px; }
.section-head p { max-width: 380px; font-size: 15px; color: #bbb5ab; }
.cards { gap: 22px; }
.service {
  background: #151412;
  border: 1px solid var(--exp-border);
  overflow: hidden;
  transition: transform .2s, border-color .2s;
}
.service:hover { border-color: #b69b6a; transform: translateY(-3px); }
.service-img { height: 255px; }
.service-body { padding: 30px; }
.service h3 { font-size: 29px; letter-spacing: -.4px; margin-bottom: 14px; }
.service-price { font-size: 12px; color: #c8b99f; margin: 0 0 19px; text-transform: uppercase; letter-spacing: 1px; }
.service-price strong { font: normal 27px Georgia,serif; color: var(--exp-ivory); margin-left: 5px; letter-spacing: 0; }
.service p { min-height: 77px; font-size: 14px; line-height: 1.7; }
.select-service { color: var(--exp-gold); font-size: 11px; letter-spacing: 1.2px; font-weight: 700; }
.service-note { color: #bab3a7; margin-top: 25px; }
.illustrative-note { color: #a9a297; }
.membership-band {
  max-width: 1600px;
  margin: -12px auto 100px;
  padding: 38px 7%;
  border: 1px solid var(--exp-border);
  background: linear-gradient(110deg,#262218 0%,#151310 64%,#10100f 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
}
.membership-band .mini { color: var(--exp-gold); }
.membership-band h3 { margin: 10px 0 9px; font: normal clamp(26px,3vw,40px) Georgia,serif; }
.membership-band p { margin: 0; color: #d0c8bb; font-size: 14px; line-height: 1.7; }
.membership-band .membership-cta {
  border: 1px solid var(--exp-gold);
  padding: 18px 22px;
  color: var(--exp-gold);
  font-size: 11px;
  letter-spacing: 1px;
  white-space: nowrap;
  text-align: center;
}
.membership-band .membership-cta:hover { background: var(--exp-gold); color: #111; }
.manifesto { min-height: 570px; }
.manifesto-content { padding: 85px 11%; }
.manifesto h2 { font-size: clamp(42px,4.8vw,69px); letter-spacing: -1px; }
.reason { padding: 18px 0; }
.reason p { font-size: 14px; color: #c4beb3; }
.booking { padding-top: 110px; }
.booking h2 { font-size: clamp(47px,5.7vw,86px); letter-spacing: -1px; }
.booking-lead { max-width: 690px; font-size: 15px; color: #c9c4ba; }
.booking-tabs { margin-top: 25px; }
.booking-tab { font-size: 11px; letter-spacing: 1px; }
.booking .booking-form { background: #151412; }
.form-grid { gap: 23px; }
.form-grid label { letter-spacing: 1.2px; color: #d9d3c8; }
.booking form input,.booking form textarea,.booking form select {
  border-color: #514a40;
  background: #211e1a;
  border-radius: 3px;
}
.extra-details { border: 1px solid #494034; background: #171613; padding: 0 20px; margin-top: 22px; }
.extra-details summary { cursor: pointer; min-height: 54px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size: 12px; color: var(--exp-gold); letter-spacing: 1px; font-weight: 600; }
.extra-details summary::after { content: '+'; font-size:22px; font-weight:400; }
.extra-details[open] summary::after { content: '−'; }
.extra-details .extra-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; padding: 8px 0 25px; }
.extra-details label { display:flex; gap:12px; flex-direction:column; color:#d9d3c8; font-size:10px; letter-spacing:1px; }
.extra-details label.full { grid-column: 1 / -1; }
.form-bottom p { color: #c5beb3; font-size: 12px; }
.calendar-wrap { background:#151412; }
.contact { background:#141310; }
@media (max-width: 950px) {
  .nav #navlinks { gap: 0; }
  .membership-band { margin-inline: 6%; }
}
@media (max-width: 650px) {
  html { scroll-padding-top: 75px; }
  .nav { height:72px; padding-inline:5%; gap:10px; }
  #navlinks { top:72px; background:#141310; }
  .hero { height:auto; min-height: max(680px, 100svh); }
  .hero-inner { min-height: max(680px, 100svh); padding: 155px 6% 34px; }
  .hero h1 { font-size: clamp(40px,11.3vw,58px); line-height:1.02; letter-spacing:-.7px; }
  .hero-inner>p { font-size: 15px; max-width:310px; }
  .hero .actions { margin-top: 26px; }
  .hero-foot { letter-spacing: 1px; font-size: 9px; }
  .signature-strip { padding: 20px 6%; gap: 10px; justify-content: center; flex-wrap: wrap; }
  .signature-strip span { font-size: 9px; letter-spacing: 1px; }
  .signature-strip span + span::before { content: '•'; margin-right: 12px; color: var(--exp-gold); }
  .services { padding-top: 70px; padding-bottom: 65px; }
  .section-head { display:block; }
  .section-head h2 { font-size: 44px; }
  .service-img { height: 220px; }
  .service-body { padding: 25px; }
  .service p { min-height: 0; }
  .membership-band { flex-direction: column; align-items:stretch; margin: 0 6% 70px; padding: 27px 22px; gap:20px; }
  .membership-band h3 { font-size: 28px; }
  .membership-band .membership-cta { white-space: normal; }
  .manifesto-img { height: 245px; }
  .manifesto-content { padding: 60px 6%; }
  .booking { padding-top: 75px; }
  .booking h2 { font-size: 43px; }
  .booking-lead { font-size: 14px; }
  .booking-tabs { flex-direction: row; }
  .booking-tab { padding: 14px 7px; font-size: 10px; letter-spacing: .5px; line-height: 1.45; }
  .booking form { padding: 20px 16px; }
  .extra-details { padding: 0 12px; }
  .extra-details .extra-grid { grid-template-columns:1fr; }
  .extra-details label.full { grid-column: auto; }
  .contact { padding-top: 60px; }
}
@media (max-width: 340px) {
  .booking-tab { font-size: 9px; }
  .hero h1 { font-size: 38px; }
}