/* =============================================================================
   BOOK AN APPOINTMENT — book-an-appointment.css
   Market Street Diamonds · Inline Booking Form
   Version  : 2.0.0
   Standalone — no dependency on msd-booking-modal.css

   ┌──────────────────────────────────────────────────────────┐
   │  TABLE OF CONTENTS                                       │
   │  1.  Design Tokens                                       │
   │  2.  Page Reset & Base                                   │
   │  3.  Page Layout                                         │
   │  4.  Form Card                                           │
   │  5.  Form Header                                         │
   │  6.  Progress Bar                                        │
   │  7.  Step Panels                                         │
   │  8.  Step Hint                                           │
   │  9.  Purpose List — Step 1                               │
   │  10. Yes / No Buttons — Step 2                           │
   │  11. Associate List — Step 3                             │
   │  12. Form Fields — Step 4                                │
   │  13. Calendar — Step 5                                   │
   │  14. Time Slots — Step 6                                 │
   │  15. Hold Notice + Agree Button — Step 7                 │
   │  16. Card Details Fields — Step 8                        │
   │  17. Source Chips — Step 9                               │
   │  18. Confirmation — Step 10                              │
   │  19. Form Footer (Back / Continue / Skip)                │
   │  20. Keyframe Animations                                 │
   │  21. Responsive — MSD min-width breakpoints              │
   └──────────────────────────────────────────────────────────┘
============================================================================= */


/* =============================================================================
   1. DESIGN TOKENS
============================================================================= */
:root {
  --c-bg:           #FFFFFF;
  --c-surface:      #F7F7F8;
  --c-surface-2:    #EFEFEF;
  --c-border:       #E2E2E6;
  --c-border-focus: #1A1A2E;
  --c-text-1:       #1A1A2E;
  --c-text-2:       #6B6B80;
  --c-text-3:       #A0A0B2;
  --c-accent:       #1A1A2E;
  --c-accent-lt:    #2E2E48;
  --c-gold:         #B08D57;
  --c-gold-lt:      rgba(176,141,87,0.10);
  --c-gold-border:  rgba(176,141,87,0.30);
  --c-ok:           #1A7A4A;
  --c-ok-lt:        rgba(26,122,74,0.08);
  --c-err:          #B22222;
  --c-err-lt:       rgba(178,34,34,0.07);
  --c-selected:     #F0F4FF;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --ease:  cubic-bezier(0.4, 0, 0.2, 1);
  --page-bg: #F5F2EE;
}


/* =============================================================================
   2. PAGE RESET & BASE
============================================================================= */
*, *::before, *::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin:  0;
  padding: 0;
}

/* html { font-size: 62.5%; } */

body {
  font-family:  "Jost", sans-serif;
  background:   var(--page-bg);
  color:        var(--c-text-1);
  min-height:   100vh;
  display:      block;
  line-height:  1.6;
}


/* =============================================================================
   3. PAGE LAYOUT
   The form card sits in a centred wrapper that fills the space between
   the placeholder header and footer.
============================================================================= */

#bp-landing-pg p{
  font-size: clamp(17px, 16px + 0.3vw, 18px);
}
.baf-page {
  /* padding:        3.2rem 1.6rem 4.8rem; */
  padding:        3.2rem 1.6rem 2rem;
  min-height:     80vh;
  display:        -webkit-flex;
  display:        flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
          align-items: center;
}

/* Intro line above the card */
.baf-intro {
  text-align:    center;
  margin-bottom: 2.4rem;
  /* max-width:     52rem; */
   max-width: 980px;
  
}

.baf-intro > p {
  text-align: left;
  letter-spacing: unset;
}

.baf-intro-eyebrow {
  display:        block;
  font-size: clamp(0.9rem, 14px + 0.3vw, 18px);
  font-weight:    700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--c-gold);
  margin-bottom:  0.6rem;
}

h1.baf-intro-title {
 font-family: 'Judson', serif;
font-size: clamp(2rem, 3vw + 1rem, 3rem);
  font-weight: 500;
  color:       var(--c-text-1);
  line-height: 1.25;
  text-align: center;
  margin-bottom: 1rem;
}

/* .baf-intro-title em {
  font-style: italic;
  color:      var(--c-gold);
} */


/* =============================================================================
   4. FORM CARD
   The white card that contains the entire form.
   Height is natural — grows with content. No fixed height, no inner scroll.
============================================================================= */
.baf-card {
  width:         100%;
  max-width:     560px;
  background:    var(--c-bg);
  border-radius: var(--r-lg);
  overflow:      hidden;
  -webkit-box-shadow: 0 4px 32px rgba(0,0,0,0.10), 0 1px 6px rgba(0,0,0,0.06);
          box-shadow: 0 4px 32px rgba(0,0,0,0.10), 0 1px 6px rgba(0,0,0,0.06);
  -webkit-animation: card-in 0.3s var(--ease) both;
          animation: card-in 0.3s var(--ease) both;
}

/* Gold top accent line */
.baf-card-accent {
  height:     4px;
  background: -webkit-linear-gradient(left, var(--c-gold), #d4a96a);
  background:      -o-linear-gradient(left, var(--c-gold), #d4a96a);
  background:         linear-gradient(to right, var(--c-gold), #d4a96a);
}


/* =============================================================================
   5. FORM HEADER
   Wordmark + conversational question. Updated by JS on each step.
============================================================================= */
.baf-head {
  padding:       2rem 2.4rem 1.6rem;
  border-bottom: 1px solid var(--c-border);
}

.baf-wordmark {
  display:        block;
  /* font-size:      1rem; */
  font-size:      clamp(13px, 12.2px + 0.3vw, 18px);
  font-weight:    700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--c-gold);
  margin-bottom:  0.8rem;
}

.baf-question {
  /* font-size: 1.65rem; */
  font-size: clamp(1.30rem, 1.2rem + 1vw, 2.3rem);
  font-weight:    500;
  font-family: "Judson", serif;
  color:          var(--c-text-1);
  line-height:    1.25;
  letter-spacing: -0.01em;
}

.baf-question em {
  font-style: normal;
  color:      var(--c-gold);
}


/* =============================================================================
   6. PROGRESS BAR
   Thin segmented bar below the header. Segments filled by JS.
============================================================================= */
.baf-progress {
  display:       -webkit-flex;
  display:       flex;
  gap:           0.4rem;
  padding:       0 2.4rem;
  height:        2.6rem;
  -webkit-align-items: center;
          align-items: center;
  border-bottom: 1px solid var(--c-border);
}

.baf-seg {
  height:        3px;
  border-radius: 2px;
  background:    var(--c-border);
  -webkit-flex: 1;
          flex: 1;
  -webkit-transition: background 0.3s var(--ease);
       -o-transition: background 0.3s var(--ease);
          transition: background 0.3s var(--ease);
}

.baf-seg--done   { background: var(--c-text-1); }
.baf-seg--active { background: var(--c-gold);   }


/* =============================================================================
   7. STEP PANELS
   All panels hidden by default. Only .baf-step--active is shown.
   Height is natural — no overflow, no scroll. The card grows with content.
============================================================================= */
.baf-steps { display: block; }

.baf-step {
  display: none;
  -webkit-flex-direction: column;
          flex-direction: column;
  gap:1.4rem;
  /* padding:  2.2rem 2.4rem 2rem; */
  padding:  2.2rem 1.5rem 2rem;
}

.baf-step--active {
  display:            -webkit-flex;
  display:                    flex;
  -webkit-animation:  step-in 0.22s var(--ease) both;
          animation:  step-in 0.22s var(--ease) both;
}

.baf-step--back {
  -webkit-animation:  step-back 0.22s var(--ease) both;
          animation:  step-back 0.22s var(--ease) both;
}


/* =============================================================================
   8. STEP HINT
   Supporting text at the top of each step.
============================================================================= */
#bp-landing-pg p.step-hint {
  font-size:   clamp(19px, 18px + 0.3vw, 20px);
  font-weight: 300;
  color:       var(--c-text-2);
  line-height: 1.65;
}
#bp-landing-pg p.step-hint strong { font-weight: 500; color: var(--c-text-1); }


/* =============================================================================
   9. PURPOSE LIST — Step 1
   Vertical radio list for appointment type selection.
============================================================================= */
.purpose-list {
  display:            -webkit-flex;
  display:                    flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  gap:                0.5rem;
  list-style:         none;
}

.purpose-item {
  display:            -webkit-flex;
  display:                    flex;
  -webkit-align-items: center;
          align-items: center;
  gap:                1rem;
  padding:            0.9rem 1.2rem;
  border:             1.5px solid var(--c-border);
  border-radius:      var(--r-md);
  cursor:             pointer;
  background:         var(--c-bg);
  min-height:         44px;
  position:           relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: all 0.12s var(--ease);
       -o-transition: all 0.12s var(--ease);
          transition: all 0.12s var(--ease);
}
.purpose-item:hover      { border-color: var(--c-text-1); background: var(--c-surface); }
.purpose-item.sel        { border-color: var(--c-text-1); background: var(--c-selected); }
.purpose-item:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }

/* Hidden real radio */
.purpose-item input[type="radio"] {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}

/* Custom radio indicator */
.purpose-radio {
  width:         1.6rem;
  height:        1.6rem;
  min-width:     16px;
  border-radius: 50%;
  border:        1.5px solid var(--c-border);
  display:       -webkit-flex;
  display:       flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
  -webkit-transition: all 0.12s;
       -o-transition: all 0.12s;
          transition: all 0.12s;
}
.purpose-item.sel .purpose-radio { border-color: var(--c-text-1); background: var(--c-text-1); }
.purpose-radio::after {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #fff; opacity: 0;
  -webkit-transition: opacity 0.12s; -o-transition: opacity 0.12s; transition: opacity 0.12s;
}
.purpose-item.sel .purpose-radio::after { opacity: 1; }

.purpose-label { font-size: 1.35rem; font-weight: 400; color: var(--c-text-1); line-height: 1.3; }
.purpose-note  { font-size: 1.1rem;  font-weight: 300; color: var(--c-text-2); display: block; margin-top: 0.15rem; }


/* =============================================================================
   10. YES / NO BUTTONS — Step 2
============================================================================= */
.yn-group {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   0.8rem;
}

.yn-option {
  position:      relative;
  padding:       1.2rem;
  border:        1.5px solid var(--c-border);
  border-radius: var(--r-md);
  cursor:        pointer;
  background:    var(--c-bg);
  text-align:    center;
  display:       -webkit-flex;
  display:       flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  gap:           0.4rem;
  min-height:    72px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: all 0.12s var(--ease);
       -o-transition: all 0.12s var(--ease);
          transition: all 0.12s var(--ease);
}
.yn-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.yn-option:hover                { border-color: var(--c-text-1); background: var(--c-surface); }
.yn-option.sel                  { border-color: var(--c-text-1); background: var(--c-selected); }
.yn-option:focus-within         { outline: 2px solid var(--c-gold); outline-offset: 2px; border-radius: var(--r-md); }

.yn-title { font-size: 1.35rem; font-weight: 500; color: var(--c-text-1); }
.yn-sub   { font-size: 1.15rem; font-weight: 300; color: var(--c-text-2); line-height: 1.4; }


/* =============================================================================
   11. ASSOCIATE LIST — Step 3
============================================================================= */
.assoc-list {
  display:        -webkit-flex;
  display:        flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  gap:            0.6rem;
  list-style:     none;
}

.assoc-item {
  display:        -webkit-flex;
  display:        flex;
  -webkit-align-items: center;
          align-items: center;
  gap:            1rem;
  padding:        0.85rem 1.2rem;
  border:         1.5px solid var(--c-border);
  border-radius:  var(--r-md);
  cursor:         pointer;
  background:     var(--c-bg);
  min-height:     48px;
  position:       relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: all 0.12s;
       -o-transition: all 0.12s;
          transition: all 0.12s;
}
.assoc-item input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.assoc-item:hover                { border-color: var(--c-text-1); background: var(--c-surface); }
.assoc-item.sel                  { border-color: var(--c-text-1); background: var(--c-selected); }
.assoc-item:focus-visible        { outline: 2px solid var(--c-gold); outline-offset: 2px; }

.assoc-avatar {
  width:         3rem; height: 3rem; min-width: 30px;
  border-radius: 50%;
  display:       -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  font-size:     1rem; font-weight: 600; color: #fff;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
.assoc-info { -webkit-flex: 1; flex: 1; }
.assoc-name { font-size: 1.3rem; font-weight: 500; color: var(--c-text-1); display: block; }
.assoc-role { font-size: 1.1rem; font-weight: 300; color: var(--c-text-2); display: block; }


/* =============================================================================
   12. FORM FIELDS — Step 4
============================================================================= */
.fields-col {
  display:        -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  gap: 1.3rem;
}

/* Single column on mobile, two columns at 601px+ */
.fields-row {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   1rem;
}

.field-group {
  display:        -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  gap: 0.4rem;
}

.field-label {
  font-size:      1.05rem;
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--c-text-2);
  display:        block;
}
.field-label .req              { color: var(--c-gold); margin-left: 2px; }
.field-label .field-label-optional {
  font-weight:    300;
  text-transform: none;
  letter-spacing: 0;
  font-size:      1.05rem;
  color:          var(--c-text-3);
}

.field-input,
.field-textarea {
  width:         100%;
  padding:       0.85rem 1.1rem;
  background:    var(--c-surface);
  border:        1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  font-family:   "Jost", sans-serif;
  font-size:     1.35rem;
  font-weight:   400;
  color:         var(--c-text-1);
  line-height:   1.4;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  -webkit-transition: border-color 0.12s, -webkit-box-shadow 0.12s;
       -o-transition: border-color 0.12s,         box-shadow 0.12s;
          transition: border-color 0.12s,         box-shadow 0.12s;
  outline: none;
}
.field-input::-webkit-input-placeholder,
.field-textarea::-webkit-input-placeholder { color: var(--c-text-3); }
.field-input::-moz-placeholder,
.field-textarea::-moz-placeholder           { color: var(--c-text-3); }
.field-input:-ms-input-placeholder,
.field-textarea:-ms-input-placeholder       { color: var(--c-text-3); }
.field-input::placeholder,
.field-textarea::placeholder                { color: var(--c-text-3); }

.field-input:focus,
.field-textarea:focus {
  border-color:       var(--c-border-focus);
  background:         var(--c-bg);
  -webkit-box-shadow: 0 0 0 3px rgba(26,26,46,0.06);
          box-shadow: 0 0 0 3px rgba(26,26,46,0.06);
}

.field-input[aria-invalid="true"],
.field-textarea[aria-invalid="true"] {
  border-color:       var(--c-err);
  -webkit-box-shadow: 0 0 0 3px var(--c-err-lt);
          box-shadow: 0 0 0 3px var(--c-err-lt);
}

.field-textarea { resize: vertical; min-height: 8rem; }

.field-err {
  display:     none;
  font-size:   1.15rem;
  color:       var(--c-err);
  -webkit-align-items: center; align-items: center;
  gap: 0.4rem;
}
.field-err.show { display: -webkit-flex; display: flex; }
.field-err::before { content: '●'; font-size: 0.6rem; -webkit-flex-shrink: 0; flex-shrink: 0; }

.field-char {
  font-size:  1.05rem; font-weight: 300;
  color:      var(--c-text-3); text-align: right;
}

.privacy-txt {
  font-size:   1.15rem; font-weight: 300;
  color:       var(--c-text-3); line-height: 1.6;
}
.privacy-txt a {
  color:                 var(--c-text-2);
  text-decoration:       underline;
  text-underline-offset: 2px;
}
.privacy-txt a:hover { color: var(--c-gold); }


/* =============================================================================
   13. CALENDAR — Step 5
============================================================================= */
.cal-wrap {
  border:        1.5px solid var(--c-border);
  border-radius: var(--r-md);
  overflow:      hidden;
}

.cal-nav {
  display:        -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: space-between; justify-content: space-between;
  padding:        1.2rem 1.4rem;
  border-bottom:  1px solid var(--c-border);
  background:     var(--c-surface);
}

.cal-nav-btn {
  width: 3.4rem; height: 3.4rem; min-width: 44px; min-height: 44px;
  border-radius: var(--r-sm);
  background:    var(--c-bg);
  border:        1px solid var(--c-border);
  cursor:        pointer;
  color:         var(--c-text-2);
  font-size:     1.5rem; line-height: 1;
  display:       -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  -webkit-transition: all 0.12s; -o-transition: all 0.12s; transition: all 0.12s;
}
.cal-nav-btn:hover        { border-color: var(--c-text-1); color: var(--c-text-1); }
.cal-nav-btn:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }

.cal-month {
  font-size: 1.4rem; font-weight: 500; color: var(--c-text-1);
}

.cal-days-row {
  display:     grid;
  grid-template-columns: repeat(7, 1fr);
  padding:     0.8rem 0.8rem 0.3rem;
  background:  var(--c-surface);
}
.cal-day-name {
  text-align:     center;
  font-size:      1.1rem; font-weight: 600;
  color:          var(--c-text-3);
  text-transform: uppercase; letter-spacing: 0.08em;
}

.cal-grid {
  display:     grid;
  grid-template-columns: repeat(7, 1fr);
  padding:     0.6rem 0.8rem 1rem;
  gap:         0.2rem;
}

.cal-cell {
  aspect-ratio:  1;
  border-radius: 50%;
  display:       -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  font-size:     1.3rem; font-weight: 400;
  color:         var(--c-text-1);
  cursor:        pointer;
  position:      relative;
  min-height:    36px;
  border:        1.5px solid transparent;
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
  -webkit-transition: all 0.1s; -o-transition: all 0.1s; transition: all 0.1s;
}
.cal-cell:hover:not([aria-disabled="true"]):not(.cal-empty) { background: var(--c-surface-2); }
.cal-cell.cal-today { font-weight: 600; }
.cal-cell.cal-today::after {
  content: ''; position: absolute; bottom: 3px; left: 50%;
  -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--c-gold);
}
.cal-cell.cal-selected { background: var(--c-text-1) !important; color: #fff !important; border-color: var(--c-text-1); }
.cal-cell.cal-selected::after { display: none; }
.cal-cell[aria-disabled="true"] { color: var(--c-text-3); cursor: not-allowed; }
.cal-cell:focus-visible          { outline: 2px solid var(--c-gold); outline-offset: 2px; }

.cal-legend {
  padding:    0.6rem 1.4rem 0.8rem;
  font-size:  1.1rem; font-weight: 300;
  color:      var(--c-text-3);
  border-top: 1px solid var(--c-border);
  background: var(--c-surface);
}


/* =============================================================================
   14. TIME SLOTS — Step 6
============================================================================= */
.slots-grid {
  display:     grid;
  grid-template-columns: repeat(3, 1fr);
  gap:         0.8rem;
}

.slot-btn {
  padding:       1rem 0.5rem;
  border:        1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  background:    var(--c-bg);
  text-align:    center;
  cursor:        pointer;
  font-family:   "DM Mono", monospace;
  font-size:     1.3rem; font-weight: 500;
  color:         var(--c-text-1);
  min-height:    48px;
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
  -webkit-transition: all 0.12s; -o-transition: all 0.12s; transition: all 0.12s;
}
.slot-btn:hover:not([aria-disabled="true"]) { border-color: var(--c-text-1); background: var(--c-surface); }
.slot-btn[aria-selected="true"]             { background: var(--c-text-1); border-color: var(--c-text-1); color: #fff; }
.slot-btn[aria-disabled="true"]             { opacity: 0.35; cursor: not-allowed; }
.slot-btn:focus-visible                     { outline: 2px solid var(--c-gold); outline-offset: 2px; }


/* =============================================================================
   15. HOLD NOTICE + AGREE BUTTON — Step 7
============================================================================= */
.hold-notice {
  background:    var(--c-surface);
  border:        1px solid var(--c-border);
  border-left:   3px solid var(--c-gold);
  border-radius: var(--r-md);
  padding:       1.4rem;
  display:       -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  gap:           0.8rem;
}
.hold-notice-title  { font-size: 1.3rem; font-weight: 600; color: var(--c-text-1); }
.hold-notice-body   { font-size: 1.25rem; font-weight: 300; color: var(--c-text-2); line-height: 1.6; }
.hold-rules         { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 0.5rem; }
.hold-rule          { display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; gap: 0.7rem; font-size: 1.2rem; font-weight: 300; color: var(--c-text-2); line-height: 1.5; }
.hold-rule-icon     { -webkit-flex-shrink: 0; flex-shrink: 0; font-size: 1.1rem; margin-top: 0.1rem; }
.hold-amount        { font-size: 1.3rem; font-weight: 600; color: var(--c-gold); border-top: 1px solid var(--c-border); padding-top: 0.8rem; }

.baf-btn-agree {
  width:          100%;
  padding:        0.9rem 1.6rem;
  min-height:     44px;
  border-radius:  var(--r-sm);
  border:         none;
  background:     var(--c-text-1);
  color:          #fff;
  font-family:    "Jost", sans-serif;
  font-size:      1.25rem; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase;
  cursor:         pointer;
  -webkit-transition: background 0.15s; -o-transition: background 0.15s; transition: background 0.15s;
}
.baf-btn-agree:hover        { background: var(--c-accent-lt); }
.baf-btn-agree:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }


/* =============================================================================
   16. CARD DETAILS FIELDS — Step 8
============================================================================= */
.card-fields {
  border:        1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  overflow:      hidden;
}

.card-row {
  display:        -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  gap:            0.6rem;
  padding:        0.8rem 1rem;
  border-bottom:  1px solid var(--c-border);
  background:     var(--c-bg);
  min-height:     44px;
}
.card-row:last-child   { border-bottom: none; }
.card-row:focus-within {
  -webkit-box-shadow: inset 0 0 0 1.5px var(--c-border-focus);
          box-shadow: inset 0 0 0 1.5px var(--c-border-focus);
}

.card-row-icon { font-size: 1.2rem; -webkit-flex-shrink: 0; flex-shrink: 0; color: var(--c-text-3); width: 1.5rem; text-align: center; }

.card-row input {
  -webkit-flex: 1; flex: 1;
  border: none; background: none; outline: none;
  font-family: "DM Mono", monospace;
  font-size:   1.25rem; font-weight: 400;
  color:       var(--c-text-1);
  min-width:   0; width: 100%;
}
.card-row input::-webkit-input-placeholder { color: var(--c-text-3); font-family: "Jost",sans-serif; font-weight: 300; font-size: 1.2rem; }
.card-row input::-moz-placeholder          { color: var(--c-text-3); font-family: "Jost",sans-serif; font-weight: 300; font-size: 1.2rem; }
.card-row input:-ms-input-placeholder      { color: var(--c-text-3); font-family: "Jost",sans-serif; font-weight: 300; font-size: 1.2rem; }
.card-row input::placeholder               { color: var(--c-text-3); font-family: "Jost",sans-serif; font-weight: 300; font-size: 1.2rem; }

.card-two-col                              { display: grid; grid-template-columns: 1fr 1fr; }
.card-two-col .card-row                    { border-bottom: none; border-right: 1px solid var(--c-border); }
.card-two-col .card-row:last-child         { border-right: none; }
.card-two-col + .card-row                  { border-top: 1px solid var(--c-border); }

.secure-note {
  display:        -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  gap:            0.5rem;
  font-size:      1.1rem; font-weight: 300;
  color:          var(--c-text-3);
}


/* =============================================================================
   17. SOURCE CHIPS — Step 9
============================================================================= */
.source-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   0.6rem;
  list-style:            none;
}

.source-chip {
  position:      relative;
  padding:       0.9rem 1rem;
  border:        1.5px solid var(--c-border);
  border-radius: var(--r-md);
  cursor:        pointer;
  background:    var(--c-bg);
  text-align:    center;
  min-height:    44px;
  display:       -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
  -webkit-transition: all 0.12s var(--ease); -o-transition: all 0.12s var(--ease); transition: all 0.12s var(--ease);
}
.source-chip input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.source-chip:hover                { border-color: var(--c-text-1); background: var(--c-surface); }
.source-chip.sel                  { border-color: var(--c-text-1); background: var(--c-selected); }
.source-chip:focus-visible        { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.source-chip-label                { font-size: 1.3rem; font-weight: 400; color: var(--c-text-1); pointer-events: none; }

/* Referral name — slides open */
.referral-wrap {
  max-height: 0;
  overflow:   hidden;
  opacity:    0;
  -webkit-transition: max-height 0.28s var(--ease), opacity 0.22s var(--ease);
       -o-transition: max-height 0.28s var(--ease), opacity 0.22s var(--ease);
          transition: max-height 0.28s var(--ease), opacity 0.22s var(--ease);
}
.referral-wrap.open { max-height: 10rem; opacity: 1; }


/* =============================================================================
   18. CONFIRMATION — Step 10
============================================================================= */
.confirm-icon {
  width:         5.6rem; height: 5.6rem;
  border-radius: 50%;
  background:    var(--c-ok-lt);
  border:        1.5px solid rgba(26,122,74,0.2);
  display:       -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  font-size:     2.4rem;
  -webkit-align-self: center; align-self: center;
  -webkit-animation: icon-in 0.35s var(--ease) 0.05s both;
          animation: icon-in 0.35s var(--ease) 0.05s both;
}

.confirm-title   { font-size: 2rem; font-weight: 500; color: var(--c-text-1); text-align: center; }
.confirm-msg     { font-size: 1.35rem; font-weight: 300; color: var(--c-text-2); text-align: center; line-height: 1.6; }

.confirm-card {
  border:        1.5px solid var(--c-border);
  border-radius: var(--r-md);
  overflow:      hidden;
}

.confirm-row {
  display:        -webkit-flex; display: flex;
  -webkit-justify-content: space-between; justify-content: space-between;
  -webkit-align-items: baseline; align-items: baseline;
  padding:        1.1rem 1.4rem;
  gap:            1.2rem;
  border-bottom:  1px solid var(--c-border);
}
.confirm-row:last-child { border-bottom: none; }

.cr-lbl {
  font-size:      1.1rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color:          var(--c-text-3);
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
.cr-val      { font-size: 1.35rem; font-weight: 400; color: var(--c-text-1); text-align: right; }
.cr-val.gold { color: var(--c-gold); }

.confirm-contact {
  font-size:   1.3rem; font-weight: 300;
  color:       var(--c-text-2); text-align: center; line-height: 1.6;
}
.confirm-contact a { color: var(--c-gold); font-weight: 400; }


/* =============================================================================
   19. FORM FOOTER — Back / Continue / Skip
============================================================================= */
.baf-foot {
  /* padding:       1.2rem 2.4rem 1.6rem; */
  padding:       1.2rem 0.5rem 1.4rem;
  border-top:    1px solid var(--c-border);
  display:       -webkit-flex; display: flex;
  gap:           0.8rem;
  background:    var(--c-bg);
  -webkit-align-items: center; align-items: center;
}

/* Back button */
.baf-btn-back {
  padding:       0 1.4rem;
  /* height:        4rem; */
   height: clamp(2.6rem, 2.4rem + 0.3vw, 3rem);
  min-height:    40px;
  border-radius: 40px;
  border:        1.5px solid var(--c-border);
  background:    transparent;
  color:         var(--c-text-2);
  font-family:   "Jost", sans-serif;
  /* font-size:     1.25rem;  */
font-size: clamp(1rem, 0.75rem + 0.35vw, 1.5rem);
  font-weight: 400;
  cursor:        pointer;
  white-space:   nowrap;
  display:       -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  gap:           0.4rem;
  -webkit-transition: all 0.12s; -o-transition: all 0.12s; transition: all 0.12s;
}
.baf-btn-back:hover:not(:disabled) { border-color: var(--c-text-1); color: var(--c-text-1); }
.baf-btn-back:disabled             { opacity: 0; pointer-events: none; }
.baf-btn-back:focus-visible        { outline: 2px solid var(--c-gold); outline-offset: 2px; }

/* Continue / Confirm button */
.baf-btn-next {
  -webkit-flex: 1; flex: 1;
  /* height: 2.6rem; */
  height: clamp(2.6rem, 2.4rem + 0.3vw, 3rem);
  min-height: 40px;
  border-radius:  40px;
  border: none;
  background:var(--c-text-1);
  color: #fff;
  font-family:"Jost", sans-serif;
  /* font-size: 0.85rem; */
  /* font-size: clamp(0.9rem, 0.75rem + 0.35vw, 1.5rem); */
  font-size: clamp(0.6rem, 0.75rem + 0.35vw, 1.5rem);
  font-weight: 500;
  /* letter-spacing: 0.07em;  */
  text-transform: uppercase;
  cursor:         pointer;
  display:        -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  gap:            0.5rem;
  -webkit-transition: all 0.15s; -o-transition: all 0.15s; transition: all 0.15s;
}
.baf-btn-next:hover  { background: var(--c-accent-lt); }
.baf-btn-next:active {
  -webkit-transform: scale(0.98); -ms-transform: scale(0.98); transform: scale(0.98);
}
.baf-btn-next:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }

/* Gold variant — card authorisation step */
.baf-btn-next--gold       { background: var(--c-gold); color: var(--c-text-1); }
.baf-btn-next--gold:hover { background: #9a7840; color: #fff; }

/* Skip link — shown only on step 9 */
.baf-btn-skip {
  display:             none;
  background:          none;
  border:              none;
  padding:             0.6rem 0;
  font-family:         "Jost", sans-serif;
  font-size:           1.2rem; font-weight: 300;
  color:               var(--c-text-3);
  cursor:              pointer;
  text-decoration:     underline;
  text-underline-offset: 3px;
  white-space:         nowrap;
  -webkit-flex-shrink: 0; flex-shrink: 0;
  -webkit-transition: color 0.12s; -o-transition: color 0.12s; transition: color 0.12s;
}
.baf-btn-skip:hover         { color: var(--c-text-2); }
.baf-btn-skip.visible       { display: block; }
.baf-btn-skip:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }


/* =============================================================================
   20. KEYFRAME ANIMATIONS
============================================================================= */
@-webkit-keyframes card-in {
  from { opacity: 0; -webkit-transform: translateY(12px); transform: translateY(12px); }
  to   { opacity: 1; -webkit-transform: none; transform: none; }
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@-webkit-keyframes step-in {
  from { opacity: 0; -webkit-transform: translateX(12px); transform: translateX(12px); }
  to   { opacity: 1; -webkit-transform: none; transform: none; }
}
@keyframes step-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: none; }
}

@-webkit-keyframes step-back {
  from { opacity: 0; -webkit-transform: translateX(-12px); transform: translateX(-12px); }
  to   { opacity: 1; -webkit-transform: none; transform: none; }
}
@keyframes step-back {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}

@-webkit-keyframes icon-in {
  from { opacity: 0; -webkit-transform: scale(0.6); transform: scale(0.6); }
  to   { opacity: 1; -webkit-transform: none; transform: none; }
}
@keyframes icon-in {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: none; }
}

/* =============================================================================
   CONTACT PREFERENCE TOGGLES — Step 4
   Sit to the right of the Phone input inside the existing .fields-row grid.
   Two pill-style checkbox labels. Both, either, or neither can be selected.
============================================================================= */
.contact-pref-group {
  display:        -webkit-flex;
  display:        flex;
  gap:            0.6rem;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
}

.contact-pref-opt {
  display:        -webkit-flex;
  display:        flex;
  -webkit-flex:   1;
          flex:   1;
  -webkit-align-items:     center;
          align-items:     center;
  -webkit-justify-content: center;
          justify-content: center;
  gap:            0.5rem;
  padding:        0.75rem 0.8rem;
  min-height:     44px;
  border:         1.5px solid var(--c-border);
  border-radius:  var(--r-sm);
  background:     var(--c-bg);
  cursor:         pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: all 0.12s var(--ease);
       -o-transition: all 0.12s var(--ease);
          transition: all 0.12s var(--ease);
}

/* Hide the real checkbox — label is the entire tap target */
.contact-pref-opt input[type="checkbox"] {
  position:       absolute;
  opacity:        0;
  width:          0;
  height:         0;
  pointer-events: none;
}

.contact-pref-opt:hover  { border-color: var(--c-text-1); background: var(--c-surface); }
.contact-pref-opt:has(input:checked) { border-color: var(--c-text-1); background: var(--c-selected); }
.contact-pref-opt:focus-within  { outline: 2px solid var(--c-gold); outline-offset: 2px; }

/* Email is always on — show a locked cursor and keep it visually selected */
.contact-pref-opt:has(input[data-required="true"]) {
  cursor:       default;
  border-color: var(--c-text-1);
  background:   var(--c-selected);
}

.contact-pref-opt:has(input[data-required="true"]):hover {
  border-color: var(--c-text-1);
  background:   var(--c-selected);
}

.contact-pref-label {
  font-size:      1.3rem;
  font-weight:    400;
  color:          var(--c-text-1);
  pointer-events: none;
  white-space:    nowrap;
}

/* =============================================================================
   Cosmetic Sections that has nothing to do with the form
============================================================================= */

/* Trust Bar  */
.bp-container {
	width: 100%;

	margin-left: auto;
	margin-right: auto;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.bp-trust-bar {
  background:#fdf9f3;
  border-top:1px solid rgba(176,141,87,0.2);
  border-bottom:1px solid rgba(176,141,87,0.2);
  padding-top:1.6rem;
  padding-bottom:1.6rem;
}

.bp-trust-list {
  display:-webkit-flex;
  display:flex;
  -webkit-flex-wrap:wrap;
   flex-wrap:wrap;
  -webkit-align-items:center;
  align-items:center;
  -webkit-justify-content: center;
  justify-content:  center;
  gap: 0.8rem 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bp-trust-item {
  /* font-size:1.2rem; */
  font-size:18px;
  font-weight: 500;
  color: var(--c-text-2);
  letter-spacing: 0.04em;
  padding: 0.4rem 1.6rem;
  white-space: nowrap;
}

/* Separator between items using CSS border */
.bp-trust-item + .bp-trust-item {
  border-left: 1px solid rgba(176,141,87,0.3);
}


/* =============================================================================
   7. HOLD POLICY NOTICE (pre-form)
   Warm, informational strip appearing just before the form.
   Custom Design clients are prepared before they encounter the card step.
============================================================================= */
.bp-hold-banner {
  /* background: #fdf8f0; */
  /* border-top: 2px solid var(--c-gold); */
}

.bp-hold-banner>.bp-container{
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;

}

.bp-hold-banner-inner {
  display:-webkit-flex;
  display:flex;
  -webkit-align-items: flex-start;
          align-items: flex-start;
  /* gap: 1.6rem; */
  gap: clamp(0.8rem, 0.6rem + 0.3vw, 1.6rem);
  /* padding-top:         2.4rem; */
  padding: 0 0.8rem 2.4rem;
}

.bp-hold-icon {
  /* font-size: 2rem; */
 font-size: clamp(1rem, 1.2rem + 0.3vw, 2.2rem);
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
  margin-top: 0.2rem;
}

.bp-hold-content { -webkit-flex: 1; flex: 1; }

.bp-hold-title {
  font-size:     1.4rem;
  font-weight:   600;
  color:#1a1a2e;
  margin-bottom: 0.5rem;
  display:       block;
}

.bp-hold-body {
  font-size:   1.3rem;
  font-weight: 300;
  color:#6b6b80;
  line-height: 1.65;
}

.bp-hold-body strong { font-weight: 600; color: var(--c-text-1); }

/* Location Info  */

.bp-section {
  padding: 1.5rem;
}

.bp-section-eyebrow {
  display: block;
  font-size: clamp(0.9rem, 14px + 0.3vw, 18px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 1rem;}

.bp-section-title {
  /* font-size: 2.2rem; */
  font-size: clamp(1.5rem, 2vw + 1rem, 2.2rem);
  font-weight: 500;
  color: var(--c-text-1);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.bp-locations> .bp-container{
 padding:unset;
}

.bp-locations-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
}
.bp-loc-card {
  padding: 1rem 1.2rem;
  border: 1.5px solid #E2E2E6;;
  border-radius: 10px;
  background: #F7F7F8;
}

.bp-loc-card--primary {
  border-color: rgba(176,141,87,0.30);
  background: #fdf9f3;
  border-left-width: 4px;
  border-left-color: #B08D57;
}

.bp-loc-tag {
	display: -webkit-inline-flex;
	display: inline-flex;
	padding: 0.25rem 0.8rem;
	border-radius: 20px;
	font-size: 0.94rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom: 1.2rem;
}

.bp-loc-tag--showroom {
  background: rgba(176,141,87,0.10);
  border: 1px solid rgba(176,141,87,0.30);
  color: #B08D57;
}

.bp-loc-name {
	/* font-size: 1.7rem; */
 font-size: clamp(19px, 18px + 0.3vw, 20px);
	font-weight: 500;
	color: #1a1a2e;
	margin-bottom: 0.5rem;
	line-height: 1.2;
	display: block;
}

.bp-loc-sub {
  /* font-size: 1.25rem; */
  font-size: clamp(19px, 18px + 0.3vw, 20px);
  font-weight: 300;
  color: #6b6b80;
  margin-bottom: 1.8rem;
  line-height: 1.5;
  display: block;
}
.bp-loc-details {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	gap: 0.7rem;
}

.bp-loc-row {
	display: -webkit-flex;
	display: flex;
 flex-direction: column;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	/* gap: 0.8rem; */
	gap: 0.5rem;
	/* font-size: 1.3rem; */
 font-size: clamp(19px, 18px + 0.3vw, 20px);
	font-weight: 300;
	color: #6b6b80;
	line-height: 1.5;
}

.bp-loc-row-label {
  font-weight: 600;
  color: #1a1a2e;
  min-width: 5.5rem;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.bp-loc-row a {
	color: #B08D57;
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 400;
}

.bp-loc-tag--private {
	background: rgba(26,26,46,0.06);
	border: 1px solid rgba(26,26,46,0.14);
	color: var(--c-text-2);
}

.bp-loc-link-btn {
	display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-align-items: center;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.8rem;
	padding: 0.9rem 2rem;
	border: 1.5px solid var(--c-border);
	border-radius: var(--r-md);
	background: transparent;
	color: var(--c-text-2);
	font-family: "Jost", sans-serif;
	font-size: 1.11rem;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	-webkit-transition: all 0.15s var(--ease);
	-o-transition: all 0.15s var(--ease);
	transition: all 0.15s var(--ease);
}


/* =============================================================================
   6. PINBOARD SECTION
   The team photo wall. CSS pinboard aesthetic — slight rotations, shadows,
   warm background. Mobile: flat 2-column grid. Desktop: staggered rotations.

============================================================================= */
.bp-pinboard-section {
	background: #f5f1eb;
	overflow: hidden;
}
.bp-pinboard-intro {
  text-align:    center;
  /* margin-bottom: 4rem; */
  margin-bottom: 2.5rem;
}

.bp-pinboard-intro .bp-section-sub {
  margin-left:  auto;
  margin-right: auto;
}

/* CSS Grid pinboard container */
.bp-pinboard {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  /* padding:1rem 0.5rem; */
  /* -- test */
  align-items: start;
  justify-items: center; /* prevents figures from stretching full column width */

  max-width: 1200px;
  margin: 0 auto;
}


/* Individual pin */
.bp-pin {
  position: relative;
  margin:0;
  /* All rotation and z-index set per nth-child below (no inline CSS) */
  -webkit-transition: -webkit-transform 0.2s var(--ease);
       -o-transition: transform 0.2s var(--ease);
          transition:transform 0.2s var(--ease);
  cursor:default;
}

.bp-pin:hover {
  z-index: 10;
  -webkit-transform: scale(1.03) rotate(0deg) !important;
      -ms-transform: scale(1.03) rotate(0deg) !important;
          transform: scale(1.03) rotate(0deg) !important;
}

/* Pin/tape decoration — small circle at top centre */
.bp-pin::before {
  content:'';
  position:absolute;
  top:-0.8rem;
  left:50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  width:1.4rem;
  height:1.4rem;
  border-radius: 50%;
  background:rgba(255,255,255,0.72);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
          box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  z-index:       1;
}

/* Photo image wrapper */
.bp-pin-inner {
  background:    #fff;
  /*padding: 0.8rem 0.8rem 2.4rem;   bottom padding = caption area */
  padding: 0.5rem 0.5rem 1.5rem;  /* bottom padding = caption area */
  -webkit-box-shadow: 0 6px 24px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.10);
          box-shadow: 0 6px 24px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.10);
  border-radius: 2px;
}
/* The picture/img element */
.bp-pin-inner picture,
.bp-pin-inner img {
  display: block;
  /* width:100%; */
  width:fit-content;
}
.bp-pin-inner img {
  /* height:18rem; */
  -o-object-fit: contain;
     object-fit: contain;
  /* -o-object-fit: cover;
     object-fit: cover; */
  -o-object-position: center;
     object-position: center;
  border-radius: 1px;
}
/* Caption area at bottom of pin */
.bp-pin-caption {
  position:   absolute;
  bottom:     0.4rem;
  left:       0;
  right:      0;
  text-align: center;
  font-size:  0.71rem;
  font-weight: 300;
  color:      var(--c-text-3);
  font-style: italic;
  padding:    0 0.6rem;
}

/* Per-pin rotations — desktop only (overridden in responsive section) */
/* Applied via nth-child to avoid inline CSS */
.bp-pin:nth-child(1) { z-index: 2; }
.bp-pin:nth-child(2) { z-index: 3; }
.bp-pin:nth-child(3) { z-index: 4; }
.bp-pin:nth-child(4) { z-index: 2; }
.bp-pin:nth-child(5) { z-index: 3; }
.bp-pin:nth-child(6) { z-index: 2; }
/* =============================================================================

/* =============================================================================
   10. FAQ SECTION
   Native <details>/<summary> accordion — no JavaScript needed.
   Accessible and indexed by search engines / AI.
============================================================================= */
.bp-faq { background: var(--c-surface); }
.bp-section > .bp-container {
 max-width: 1200px;
}
.bp-faq-head { margin-bottom: 3.2rem; }

.bp-faq-list {
  display:        -webkit-flex;
  display:        flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  gap:            0.8rem;
  max-width:      760px;
  margin-left:    auto;
  margin-right:   auto;
}

.bp-faq-item {
  background:    var(--c-bg);
  border:        1.5px solid var(--c-border);
  border-radius: var(--r-md);
  overflow:      hidden;
  -webkit-transition: border-color 0.15s;
       -o-transition: border-color 0.15s;
          transition: border-color 0.15s;
}

.bp-faq-item[open] {
  border-color: var(--c-gold-border);
}

.bp-faq-item summary {
  padding:1.4rem 1.6rem;
  /* font-size:      1.4rem; */
  font-size: clamp(19px, 18px + 0.3vw, 20px);
  font-weight:500;
  color: var(--c-text-1);
  cursor:pointer;
  list-style:none; /* remove default triangle in Firefox */
  display:-webkit-flex;
  display:flex;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-align-items:center;
          align-items:center;
  gap:1rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: background 0.12s;
       -o-transition: background 0.12s;
          transition: background 0.12s;
}

/* Remove default marker in Webkit */
.bp-faq-item summary::-webkit-details-marker { display: none; }

.bp-faq-item summary:hover { background: var(--c-surface); }

.bp-faq-item summary:focus-visible {
  outline:        2px solid var(--c-gold);
  outline-offset: -2px;
}

/* The +/− toggle indicator */
.bp-faq-toggle {
  font-size:          1.8rem;
  color:              var(--c-gold);
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
  line-height:        1;
  -webkit-transition: -webkit-transform 0.2s var(--ease);
       -o-transition:         transform 0.2s var(--ease);
          transition:         transform 0.2s var(--ease);
  font-weight:        300;
  width:              2rem;
  text-align:         center;
}

.bp-faq-item[open] .bp-faq-toggle {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.bp-faq-answer {
  padding:     0 1.6rem 1.6rem;
  font-size:   1.35rem;
  font-weight: 300;
  color:       var(--c-text-2);
  line-height: 1.7;
  border-top:  1px solid var(--c-border);
  padding-top: 1.2rem;
}

.bp-faq-answer strong { font-weight: 600; color: var(--c-text-1); }
.bp-faq-answer a      { color: var(--c-gold); text-decoration: underline; text-underline-offset: 2px; }


/* 

/* ========= END OF COSMETIC SECTIONS =========  */



/* =============================================================================
   21. RESPONSIVE — MSD STANDARD BREAKPOINTS
   Default → 375px mobile
   760px  → two-col fields, larger form padding
   1024px → wider card, comfortable desktop
   1366px → full-width page, card centred
   1920px → generous page padding
   2560px → 4K generous padding
============================================================================= */



/* ── 601px — two-column fields inside the form ── */
@media screen and (min-width: 601px) {
  .fields-row  { grid-template-columns: 1fr 1fr; }
  .yn-group    { grid-template-columns: 1fr 1fr; }
  .source-grid { grid-template-columns: 1fr 1fr 1fr; }
  .slots-grid  { grid-template-columns: repeat(4, 1fr); }



/* Continue / Confirm button */
.baf-btn-next {
font-size: 0.85rem; 
font-size: clamp(0.9rem, 0.75rem + 0.35vw, 1.5rem); 
letter-spacing: 0.07em; 

}}

/* ── 760px — mobile threshold ── */
@media screen and (min-width: 700px) {
  /* .baf-page { padding: 4rem 2.4rem 6rem; } */
.baf-page { padding: 4rem 2.4rem 2rem; }
  /* .baf-intro-title { font-size: 2.4rem; } */

.baf-step { padding:2.2rem 2.4rem 2rem; }

.bp-hold-banner > .bp-container{
 padding:unset;
}
.bp-hold-banner-inner {
  padding: 0 0 2.4rem;
}


.bp-locations-grid {
	grid-template-columns: 1fr 1fr;
}

.bp-loc-card {
	padding: 2.8rem 2.4rem;

}
  /* Pinboard — three columns, comfortable gaps */
  .bp-pinboard       { grid-template-columns: repeat(3, 1fr); gap: 2rem; padding: 1.2rem 0.5rem; }
  /* .bp-pin-inner img  { height: 18rem; } */

}

/* ── 1024px — tablet / small desktop ── */
@media screen and (min-width: 1000px) {
  /* .baf-page  { padding: 5rem 3.2rem 7rem; } */
.baf-page  { padding: 5rem 3.2rem 2rem; }
.baf-card  { max-width: 580px; }
.baf-question { font-size: 1.75rem; }
.bp-locations>.bp-container{
 padding:unset;
 max-width: 980px;
 
 }

 /* Activate pinboard rotations via nth-child (no inline CSS) */
  .bp-pin:nth-child(1) {
    -webkit-transform: rotate(-2.2deg);
        -ms-transform: rotate(-2.2deg);
            transform: rotate(-2.2deg);
  }
  .bp-pin:nth-child(2) {
    -webkit-transform: rotate(1.6deg);
        -ms-transform: rotate(1.6deg);
            transform: rotate(1.6deg);
  }
  .bp-pin:nth-child(3) {
    -webkit-transform: rotate(-1.1deg);
        -ms-transform: rotate(-1.1deg);
            transform: rotate(-1.1deg);
  }
  .bp-pin:nth-child(4) {
    -webkit-transform: rotate(2.4deg);
        -ms-transform: rotate(2.4deg);
            transform: rotate(2.4deg);
  }
  .bp-pin:nth-child(5) {
    -webkit-transform: rotate(-1.7deg);
        -ms-transform: rotate(-1.7deg);
            transform: rotate(-1.7deg);
  }
  .bp-pin:nth-child(6) {
    -webkit-transform: rotate(1.3deg);
        -ms-transform: rotate(1.3deg);
            transform: rotate(1.3deg);
  }

  /* Hover lifts and straightens each pin */
  .bp-pin:hover {
    -webkit-transform: scale(1.04) rotate(0deg) !important;
        -ms-transform: scale(1.04) rotate(0deg) !important;
            transform: scale(1.04) rotate(0deg) !important;
  }

  /* Taller images */
  /* .bp-pin-inner img { height: 22rem; } */

  /* Trust bar */
  .bp-trust-item { font-size: 1.3rem; }

  /* Pinboard wider gap */
  .bp-pinboard { gap: 2.4rem; padding: 1.6rem 0.5rem; }
}

/* ── 1366px — standard desktop, full-width page ── */
@media screen and (min-width: 1366px) {
  /* .baf-page  { padding: 6rem 5rem 8rem; } */
  .baf-page  { padding: 6rem 5rem 2.1rem; }

  .bp-loc-row {
	
	flex-direction: row;

}

  .bp-locations > .bp-container {
    
    max-width: 1200px;
  }
  .baf-card  { max-width: 600px; }

    /* Pinboard images */
  /* .bp-pin-inner img { height: 30rem; } */

 
 
}

/* ── 1920px — full HD ── */
@media screen and (min-width: 1920px) {
  /* .baf-page  { padding: 8rem 8rem 10rem; } */
  .baf-page  { padding: 5rem 5rem 1.5rem; }
  .baf-card  { max-width: 620px; }
  .baf-question { font-size: 1.8rem; }

    /* Pinboard */
  /* .bp-pin-inner img { height: 32rem; } */
  .bp-pinboard      { gap: 3rem; }

}

/* ── 2560px — 4K ── */
@media screen and (min-width: 2560px) {
  .baf-page  { padding: 10rem 14rem 12rem; }
  .baf-card  { max-width: 660px; }
  html       { font-size: 68%; }
}