/* Biddlecome Signature Detailing: phone and tablet refinements.
   Preserves the published desktop layout and Wix booking integration. */
@media (max-width: 950px) {
  .nav { gap: 14px; }
  .menu {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    min-width: 46px;
    padding: 0;
    cursor: pointer;
    border: 1px solid rgba(239, 219, 180, .38);
    border-radius: 3px;
    touch-action: manipulation;
  }
  #navlinks {
    z-index: 30;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  }
  .service-img { height: clamp(235px, 40vw, 340px); }
  .booking .btn, .slot-btn, .booking-tab { touch-action: manipulation; }
}
@media (max-width: 650px) {
  html, body { max-width: 100%; overflow-x: clip; }
  .nav { height: 72px; gap: 10px; padding-inline: 5%; }
  .wordmark {
    min-width: 0;
    gap: 9px;
    font-size: clamp(11px, 3.5vw, 14px);
    letter-spacing: 1px;
  }
  .wordmark small {
    font-size: 6px;
    letter-spacing: 1.4px;
    margin-top: 4px;
  }
  .symbol { font-size: 28px; padding-right: 10px; }
  .menu { margin-left: auto; }
  #navlinks {
    top: 72px;
    right: 0;
    width: 100%;
    padding: 12px 6% 22px;
    gap: 0;
    border-bottom: 1px solid #52422c;
  }
  #navlinks a {
    display: block;
    min-height: 48px;
    padding: 16px 2px;
    border-bottom: 1px solid #303030;
    font-size: 11px;
    line-height: 1.5;
  }
  .hero { height: auto; min-height: 700px; min-height: max(700px, 100svh); }
  .hero-bg {
    background-image: url('https://static.wixstatic.com/media/636341_625d90fd4732489c9179dee0f3ab7820~mv2.png');
    background-size: cover;
    background-position: 50% center;
    filter: grayscale(1) contrast(1.07) brightness(.60);
    transform: none;
  }
  .hero-bg::before { display: none; }
  .hero-shade {
    background: linear-gradient(90deg, rgba(0,0,0,.85), rgba(0,0,0,.30)),
      linear-gradient(0deg, rgba(0,0,0,.82), transparent 55%);
  }
  .hero-inner {
    min-height: 700px;
    min-height: max(700px, 100svh);
    padding: 152px 6% 30px;
  }
  .eyebrow { font-size: 8px; letter-spacing: 2px; line-height: 1.6; }
  .eyebrow .line { width: 22px; margin-right: 8px; }
  .hero h1 {
    max-width: 100%;
    font-size: clamp(39px, 11.6vw, 62px);
    line-height: .99;
    letter-spacing: -1.1px;
    margin: 24px 0 19px;
  }
  .hero-inner > p { font-size: 14px; line-height: 1.7; max-width: 320px; }
  .hero-inner > p br { display: none; }
  .actions { gap: 10px; margin-top: 23px; }
  .actions .btn {
    width: 100%;
    min-height: 52px;
    padding: 15px 18px;
    gap: 10px;
    font-size: 10px;
    letter-spacing: 1.2px;
  }
  .hero-foot {
    margin-top: 35px;
    font-size: 8px;
    letter-spacing: 1.25px;
  }
  .intro, .services, .booking { padding: 70px 6%; }
  .intro h2, .section-head h2, .manifesto h2,
  .booking h2, .contact h2 {
    font-size: clamp(34px, 9.4vw, 47px);
    line-height: 1.06;
    letter-spacing: -.7px;
  }
  .intro-copy { font-size: 14px; line-height: 1.8; }
  .section-head p { font-size: 13px; }
  .service-img { height: 230px; }
  .service-body { padding: 24px; }
  .service h3 { font-size: 28px; }
  .manifesto-img { height: 255px; background-position: center; }
  .manifesto-content { padding: 60px 6%; }
  .booking-lead { font-size: 14px; line-height: 1.7; margin-bottom: 24px; }
  .booking-tabs { margin-top: 24px; }
  .booking-tab { min-height: 48px; padding: 17px 12px; letter-spacing: 1.4px; }
  .booking form { padding: 18px; }
  .form-grid { gap: 20px; }
  .form-grid label { font-size: 10px; letter-spacing: 1.1px; }
  input, select, textarea { min-height: 48px; font-size: 16px; line-height: 1.4; }
  textarea { min-height: 105px; }
  .form-bottom .btn, #slotSubmit { width: 100%; min-height: 52px; }
  .calendar-wrap { padding: 18px; }
  .calendar-copy h3 { font-size: clamp(29px, 8vw, 42px); }
  .week-nav { gap: 6px; }
  .week-nav button {
    min-height: 44px;
    padding: 10px 3px;
    font-size: 10px;
    letter-spacing: 0;
  }
  .week-nav strong { font-size: 10px; line-height: 1.35; }
  .slot-list { grid-template-columns: 1fr; gap: 10px; }
  .slot-day { padding: 16px; }
  .slot-btn { min-height: 44px; }
  .contact { padding: 64px 6%; }
  .contact-logo { max-width: 65%; }
  footer { padding: 30px 6%; }
}
@media (max-width: 359px) {
  .nav { gap: 6px; }
  .wordmark { font-size: 11px; letter-spacing: .5px; }
  .wordmark small { font-size: 5.5px; letter-spacing: 1px; }
  .hero h1 { font-size: 37px; }
  .hero-inner { padding-top: 145px; }
}