/* ═══════════════════════════════════════
       RESET & BASE
    ═══════════════════════════════════════ */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; font-size: 16px; }
    body {
      font-family: 'Montserrat', sans-serif;
      background: #faf9f6;
      color: #1a1a1a;
      overflow-x: hidden;
    }
    img { display: block; width: 100%; height: 100%; object-fit: cover; }
    a { text-decoration: none; color: inherit; }
    ul { list-style: none; }

    /* ═══════════════════════════════════════
       CSS VARIABLES
    ═══════════════════════════════════════ */
    :root {
      --gold: #C9A84C;
      --gold-light: #e8d5a3;
      --gold-dark: #9e7e30;
      --black: #0a0a0a;
      --off-white: #faf9f6;
      --cream: #f2efe8;
      --warm-gray: #e8e5de;
      --text-dark: #1a1a1a;
      --text-mid: #555;
      --text-light: #888;
      --serif: 'Playfair Display', serif;
      --display: 'Playfair Display', serif;  /* was Cormorant Garamond, retired to cut font payload */
      --sans: 'Montserrat', sans-serif;

      /* Type scale (fixed) */
      --fs-micro: 9px;      /* eyebrows, tiny labels  */
      --fs-label: 10px;     /* buttons, nav labels    */
      --fs-xs:    11px;
      --fs-sm:    12.5px;
      --fs-base:  13px;
      --fs-md:    14px;
      --fs-lg:    18px;
      --fs-h5:    22px;
      --fs-h4:    26px;
      --fs-h3:    30px;

      /* Heading scale (fluid) */
      --h-sm: clamp(26px, 3.2vw, 38px);
      --h-md: clamp(28px, 3.6vw, 44px);
      --h-lg: clamp(32px, 4.5vw, 56px);
      --h-xl: clamp(40px, 6.5vw, 76px);

      /* Spacing scale (section rhythm) */
      --sp-xs: 24px;
      --sp-sm: 40px;
      --sp-md: 54px;
      --sp-lg: 66px;
      --sp-xl: 78px;
      --sp-2xl: 92px;
      --sp-3xl: 120px;
    }

    /* ═══════════════════════════════════════
       UTILITY
    ═══════════════════════════════════════ */
    .container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
    .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

    /* ═══════════════════════════════════════
       NAVIGATION
    ═══════════════════════════════════════ */
    .nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 1000;
      padding: 0 40px;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: background 0.4s ease, box-shadow 0.4s ease;
    }
    .nav.scrolled {
      background: rgba(10,10,10,0.96);
      backdrop-filter: blur(10px);
      box-shadow: 0 2px 20px rgba(0,0,0,0.3);
    }
    .nav-links {
      display: flex;
      gap: 36px;
      align-items: center;
    }
    .nav-links a {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #fff;
      opacity: 0.85;
      transition: opacity 0.2s;
    }
    .nav-links a:hover { opacity: 1; color: var(--gold); }
    .nav-logo {
      display: flex;
      align-items: center;
    }
    .nav-logo img {
      display: block;
      height: 44px;
      width: auto;
    }
    .nav-actions { display: flex; align-items: center; gap: 24px; }
    .btn-book-nav {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--black);
      background: var(--gold);
      padding: 10px 22px;
      border: none;
      cursor: pointer;
      transition: background 0.2s, transform 0.2s;
    }
    .btn-book-nav:hover { background: var(--gold-dark); transform: translateY(-1px); }

    /* ═══════════════════════════════════════
       HERO
    ═══════════════════════════════════════ */
    .hero {
      position: relative;
      height: 100vh;
      min-height: 700px;
      display: flex;
      align-items: center;
      overflow: hidden;
    }
    .hero-bg {
      position: absolute;
      inset: 0;
      background: url('hero-salon.jpg') center/cover no-repeat;
      transform: scale(1.05);
      transition: transform 8s ease;
    }
    .hero-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.10) 50%, rgba(0,0,0,0.20) 100%);
    }
    .hero:hover .hero-bg { transform: scale(1); }
    .hero-content {
      position: relative;
      z-index: 2;
      padding: 0 80px;
      max-width: 760px;
    }
    .hero-eyebrow {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .hero-eyebrow::before {
      content: '';
      width: 40px;
      height: 1px;
      background: var(--gold);
    }
    .hero-headline {
      font-family: var(--serif);
      font-size: clamp(52px, 7vw, 96px);
      font-weight: 400;
      line-height: 1.05;
      color: #fff;
      margin-bottom: 28px;
    }
    .hero-headline em {
      font-style: italic;
      color: var(--gold-light);
    }
    .hero-sub {
      font-size: 13px;
      font-weight: 300;
      letter-spacing: 1.5px;
      color: rgba(255,255,255,0.75);
      line-height: 1.8;
      max-width: 400px;
      margin-bottom: 48px;
    }
    .hero-actions { display: flex; gap: 20px; align-items: center; }
    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: var(--gold);
      color: var(--black);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      padding: 16px 32px;
      cursor: pointer;
      border: none;
      transition: background 0.25s, transform 0.25s;
    }
    .btn-primary:hover { background: #e8c45a; transform: translateY(-2px); }
    .btn-primary .arrow { font-size: 18px; }
    .btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: transparent;
      color: #fff;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 16px 0;
      border-bottom: 1px solid rgba(255,255,255,0.4);
      cursor: pointer;
      transition: color 0.25s, border-color 0.25s;
    }
    .btn-ghost:hover { color: var(--gold); border-color: var(--gold); }
    .hero-scroll {
      position: absolute;
      bottom: 40px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      color: rgba(255,255,255,0.5);
      font-size: 9px;
      letter-spacing: 3px;
      text-transform: uppercase;
    }
    .hero-scroll-line {
      width: 1px;
      height: 50px;
      background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
      animation: scrollLine 1.8s ease-in-out infinite;
    }
    @keyframes scrollLine {
      0% { opacity: 1; transform: scaleY(1); transform-origin: top; }
      100% { opacity: 0; transform: scaleY(0); transform-origin: top; }
    }
    .hero-badge {
      position: absolute;
      right: 80px;
      bottom: 80px;
      z-index: 2;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      border: 1px solid var(--gold);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: var(--gold);
      gap: 4px;
      animation: rotateBadge 12s linear infinite;
    }
    .hero-badge-inner {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 2px;
    }
    .hero-badge-inner strong { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--gold); }
    .hero-badge-inner span { font-size: 8px; letter-spacing: 2px; color: rgba(255,255,255,0.6); text-transform: uppercase; }
    .hero-badge-ring {
      position: absolute;
      inset: 0;
    }
    .hero-badge-ring text {
      font-size: 9px;
      letter-spacing: 3.2px;
      fill: var(--gold);
      text-transform: uppercase;
    }
    @keyframes rotateBadge {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    .hero-badge-inner { animation: rotateBadge 12s linear infinite reverse; }

    /* ═══════════════════════════════════════
       SERVICES STRIP
    ═══════════════════════════════════════ */
    .services-strip {
      background: var(--black);
      padding: 66px 0 80px;
    }
    .services-strip-header {
      text-align: center;
      margin-bottom: 60px;
    }
    .label-tag {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 16px;
      display: block;
    }
    .services-strip-header h2 {
      font-family: var(--serif);
      font-size: var(--h-md);
      font-weight: 400;
      color: #fff;
      line-height: 1.2;
    }
    .services-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2px;
    }
    .service-card {
      position: relative;
      height: 380px;
      overflow: hidden;
      cursor: pointer;
    }
    .service-card img {
      transition: transform 0.6s ease;
    }
    .service-card:hover img { transform: scale(1.08); }
    .service-card-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 60%);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 28px 24px;
    }
    .service-card-number {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 3px;
      color: var(--gold);
      margin-bottom: 8px;
    }
    .service-card h3 {
      font-family: var(--serif);
      font-size: 22px;
      font-weight: 500;
      color: #fff;
      margin-bottom: 8px;
    }
    .service-card p {
      font-size: 11px;
      color: rgba(255,255,255,0.65);
      line-height: 1.6;
    }
    .service-card-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 14px;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--gold);
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.3s, transform 0.3s;
    }
    .service-card:hover .service-card-link { opacity: 1; transform: translateY(0); }

    /* ═══════════════════════════════════════
       EDITORIAL SECTION
    ═══════════════════════════════════════ */
    .editorial {
      padding: 120px 0;
      background: var(--off-white);
    }
    .editorial-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }
    .editorial-text .eyebrow {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 4px;
      color: var(--gold);
      text-transform: uppercase;
      margin-bottom: 24px;
    }
    .editorial-text h2 {
      font-family: var(--serif);
      font-size: var(--h-lg);
      font-weight: 400;
      line-height: 1.15;
      color: var(--black);
      margin-bottom: 28px;
    }
    .editorial-text h2 em { font-style: italic; color: var(--gold-dark); }
    .editorial-text p {
      font-size: 14px;
      line-height: 1.9;
      color: var(--text-mid);
      margin-bottom: 16px;
    }
    .editorial-text .btn-outline {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 20px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--black);
      border-bottom: 2px solid var(--gold);
      padding-bottom: 4px;
      transition: color 0.2s;
    }
    .editorial-text .btn-outline:hover { color: var(--gold); }
    .editorial-photos {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 280px 200px;
      gap: 12px;
    }
    .editorial-photo-1 { grid-row: 1 / 3; grid-column: 1; }
    .editorial-photo-2 { grid-row: 1; grid-column: 2; }
    .editorial-photo-3 { grid-row: 2; grid-column: 2; }
    .editorial-photo-1, .editorial-photo-2, .editorial-photo-3 {
      overflow: hidden;
    }
    .editorial-photo-1 img, .editorial-photo-2 img, .editorial-photo-3 img {
      transition: transform 0.6s ease;
    }
    .editorial-photo-1:hover img, .editorial-photo-2:hover img, .editorial-photo-3:hover img {
      transform: scale(1.05);
    }

    /* ═══════════════════════════════════════
       QUOTE BAND
    ═══════════════════════════════════════ */
    .quote-band {
      background: var(--cream);
      padding: 78px 0;
      text-align: center;
    }
    .quote-band blockquote {
      font-family: var(--display);
      font-size: var(--h-lg);
      font-weight: 300;
      font-style: italic;
      color: var(--black);
      line-height: 1.3;
      max-width: 900px;
      margin: 0 auto;
    }
    .quote-band blockquote em { color: var(--gold-dark); }
    .quote-band cite {
      display: block;
      margin-top: 24px;
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--text-light);
    }

    /* ═══════════════════════════════════════
       SERVICES DETAIL
    ═══════════════════════════════════════ */
    .services-detail {
      padding: 120px 0;
      background: var(--off-white);
    }
    .services-detail-header {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: end;
      margin-bottom: 80px;
    }
    .services-detail-header h2 {
      font-family: var(--serif);
      font-size: var(--h-lg);
      font-weight: 400;
      line-height: 1.1;
    }
    .services-detail-header p {
      font-size: 14px;
      line-height: 1.9;
      color: var(--text-mid);
      align-self: end;
    }
    .services-tabs {
      display: flex;
      gap: 0;
      border-bottom: 1px solid var(--warm-gray);
      margin-bottom: 60px;
    }
    .tab-btn {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      padding: 14px 32px;
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      cursor: pointer;
      color: var(--text-light);
      transition: color 0.2s, border-color 0.2s;
      margin-bottom: -1px;
    }
    .tab-btn.active { color: var(--black); border-bottom-color: var(--gold); }
    .tab-btn:hover { color: var(--black); }
    .tab-content { display: none; }
    .tab-content.active { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 80px; }
    .service-item {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 18px 0;
      border-bottom: 1px solid var(--warm-gray);
      gap: 16px;
    }
    .service-item-info { flex: 1; }
    .service-item-name {
      font-size: 14px;
      font-weight: 500;
      color: var(--black);
      margin-bottom: 4px;
    }
    .service-item-desc {
      font-size: 11px;
      color: var(--text-light);
      line-height: 1.5;
    }
    .service-item-price {
      font-family: var(--serif);
      font-size: 18px;
      font-weight: 500;
      color: var(--gold-dark);
      white-space: nowrap;
    }
    .services-detail-cta {
      text-align: center;
      margin-top: 60px;
    }

    /* ═══════════════════════════════════════
       TEAM SECTION
    ═══════════════════════════════════════ */
    .team {
      padding: var(--sp-2xl) 0;
      background: var(--black);
    }
    .team-header {
      text-align: center;
      margin-bottom: var(--sp-md);
    }
    .team-header h2 {
      font-family: var(--serif);
      font-size: var(--h-lg);
      font-weight: 400;
      color: #fff;
      line-height: 1.2;
      margin-bottom: 16px;
    }
    .team-header p {
      font-size: 13px;
      color: rgba(255,255,255,0.5);
      max-width: 500px;
      margin: 0 auto;
      line-height: 1.8;
    }
    .team-card {
      position: relative;
      height: 500px;
      overflow: hidden;
      cursor: pointer;
    }
    .team-card img { transition: transform 0.7s ease; }
    .team-card:hover img { transform: scale(1.06); }
    .team-card-info {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      padding: 32px 28px;
      background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
      transform: translateY(60px);
      transition: transform 0.4s ease;
    }
    .team-card:hover .team-card-info { transform: translateY(0); }
    .team-card-info h3 {
      font-family: var(--serif);
      font-size: 22px;
      font-weight: 500;
      color: #fff;
      margin-bottom: 4px;
    }
    .team-card-info .role {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--gold);
    }
    .team-card-info .bio {
      font-size: 12.5px;
      color: rgba(255,255,255,0.65);
      line-height: 1.6;
      margin-top: 10px;
    }

    /* ═══════════════════════════════════════
       BE YOUR BEST BANNER
    ═══════════════════════════════════════ */
    .be-best {
      padding: 92px 0;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .be-best-bg {
      position: absolute;
      inset: 0;
      background: url('banner-entrance.jpg') center/cover;
    }
    .be-best-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(10,10,10,0.7);
    }
    .be-best-content { position: relative; z-index: 2; }
    .be-best h2 {
      font-family: var(--serif);
      font-size: clamp(60px, 10vw, 140px);
      font-weight: 700;
      color: transparent;
      -webkit-text-stroke: 1.5px rgba(255,255,255,0.25);
      letter-spacing: 8px;
      line-height: 1;
      margin-bottom: 8px;
    }
    .be-best h2 em {
      font-style: italic;
      -webkit-text-stroke: 1.5px var(--gold);
      color: transparent;
    }
    .be-best-sub {
      font-size: 13px;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.5);
      margin-bottom: 40px;
    }

    /* ═══════════════════════════════════════
       PRODUCTS
    ═══════════════════════════════════════ */
    .products {
      padding: 120px 0;
      background: var(--off-white);
    }
    .products-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 60px;
    }
    .products-header h2 {
      font-family: var(--serif);
      font-size: var(--h-lg);
      font-weight: 400;
      line-height: 1.15;
      max-width: 400px;
    }
    .products-header p {
      font-size: 13px;
      color: var(--text-mid);
      max-width: 340px;
      line-height: 1.8;
      text-align: right;
    }
    .products-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }
    .product-card {
      background: #fff;
      padding: 0 0 24px;
      cursor: pointer;
      transition: box-shadow 0.3s;
    }
    .product-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.1); }
    .product-img {
      height: 280px;
      background: var(--cream);
      overflow: hidden;
      margin-bottom: 20px;
    }
    .product-img img { transition: transform 0.5s ease; }
    .product-card:hover .product-img img { transform: scale(1.05); }
    .product-info { padding: 0 20px; }
    .product-tag {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 8px;
    }
    .product-name {
      font-family: var(--serif);
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 6px;
    }
    .product-desc {
      font-size: 11px;
      color: var(--text-light);
      line-height: 1.6;
      margin-bottom: 12px;
    }
    .product-price {
      font-family: var(--serif);
      font-size: 18px;
      color: var(--text-dark);
    }
    .product-price .old { text-decoration: line-through; color: var(--text-light); font-size: 13px; margin-right: 6px; }

    /* ═══════════════════════════════════════
       TESTIMONIALS
    ═══════════════════════════════════════ */
    .testimonials {
      padding: 92px 0;
      background: var(--cream);
    }
    .testimonials-header { text-align: center; margin-bottom: 70px; }
    .testimonials-header h2 {
      font-family: var(--serif);
      font-size: var(--h-md);
      font-weight: 400;
      margin-bottom: 12px;
    }
    .stars { color: var(--gold); font-size: 18px; letter-spacing: 3px; }
    .rating-text { font-size: 12.5px; color: var(--text-light); letter-spacing: 1px; margin-top: 6px; }
    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
    }
    .testimonial-card {
      background: #fff;
      padding: 40px 32px;
    }
    .testimonial-card .stars { font-size: 14px; margin-bottom: 20px; }
    .testimonial-card blockquote {
      font-family: var(--display);
      font-size: 18px;
      font-style: italic;
      line-height: 1.7;
      color: var(--text-dark);
      margin-bottom: 24px;
    }
    .testimonial-author {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .testimonial-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      overflow: hidden;
      background: var(--warm-gray);
      flex-shrink: 0;
    }
    .testimonial-name { font-size: 12.5px; font-weight: 600; letter-spacing: 1px; }
    .testimonial-date { font-size: 10px; color: var(--text-light); margin-top: 2px; }

    /* ═══════════════════════════════════════
       INSTAGRAM SECTION
    ═══════════════════════════════════════ */
    .instagram {
      padding: 92px 0 80px;
      background: var(--off-white);
    }
    .instagram-header {
      text-align: center;
      margin-bottom: 60px;
    }
    .instagram-header h2 {
      font-family: var(--serif);
      font-size: var(--h-md);
      font-weight: 400;
      margin-bottom: 10px;
    }
    .instagram-handle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 500;
      color: var(--text-mid);
    }
    .instagram-handle svg { width: 18px; height: 18px; }
    .instagram-handle a { color: var(--gold-dark); font-weight: 600; }
    .instagram-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 4px;
    }
    .insta-post {
      position: relative;
      aspect-ratio: 1;
      overflow: hidden;
      cursor: pointer;
    }
    .insta-post img { transition: transform 0.5s ease; }
    .insta-post:hover img { transform: scale(1.08); }
    .insta-post-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      opacity: 0;
      transition: opacity 0.3s;
    }
    .insta-post:hover .insta-post-overlay { opacity: 1; }
    .insta-stat {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #fff;
      font-size: 13px;
      font-weight: 600;
    }
    .instagram-footer {
      text-align: center;
      margin-top: 48px;
    }
    .btn-follow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: transparent;
      border: 1.5px solid var(--black);
      color: var(--black);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      padding: 14px 32px;
      cursor: pointer;
      transition: background 0.25s, color 0.25s;
    }
    .btn-follow:hover { background: var(--black); color: #fff; }

    /* ═══════════════════════════════════════
       BOOKING CTA
    ═══════════════════════════════════════ */
    .booking-cta {
      padding: 120px 0;
      background: var(--black);
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .booking-cta::before {
      content: 'KBS';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--serif);
      font-size: 400px;
      font-weight: 900;
      color: transparent;
      -webkit-text-stroke: 1px rgba(201,168,76,0.06);
      pointer-events: none;
      letter-spacing: 20px;
    }
    .booking-cta-content { position: relative; z-index: 2; }
    .booking-cta .eyebrow {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 4px;
      color: var(--gold);
      text-transform: uppercase;
      margin-bottom: 20px;
    }
    .booking-cta h2 {
      font-family: var(--serif);
      font-size: var(--h-xl);
      font-weight: 400;
      color: #fff;
      line-height: 1.1;
      margin-bottom: 20px;
    }
    .booking-cta h2 em { font-style: italic; color: var(--gold-light); }
    .booking-cta p {
      font-size: 13px;
      color: rgba(255,255,255,0.5);
      max-width: 460px;
      margin: 0 auto 48px;
      line-height: 1.9;
    }
    .btn-book-cta {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: var(--gold);
      color: var(--black);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      padding: 20px 48px;
      border-radius: 50px;
      cursor: pointer;
      border: none;
      transition: background 0.25s, transform 0.25s;
    }
    .btn-book-cta:hover { background: #e8c45a; transform: translateY(-3px); }
    .btn-book-cta .circle-arrow {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--black);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }

    /* ═══════════════════════════════════════
       NEWSLETTER
    ═══════════════════════════════════════ */
    .newsletter {
      padding: 78px 0;
      background: var(--cream);
    }
    .newsletter-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 60px;
    }
    .newsletter-text { flex: 1; }
    .newsletter-text .eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
    .newsletter-text h3 { font-family: var(--serif); font-size: 28px; font-weight: 400; margin-bottom: 10px; }
    .newsletter-text p { font-size: 13px; color: var(--text-mid); line-height: 1.7; }
    .newsletter-form {
      display: flex;
      gap: 0;
      flex: 1;
      max-width: 440px;
    }
    .newsletter-form input {
      flex: 1;
      padding: 15px 20px;
      border: 1px solid #ddd;
      background: #fff;
      font-size: 12.5px;
      font-family: var(--sans);
      outline: none;
      color: var(--text-dark);
    }
    .newsletter-form input::placeholder { color: #bbb; }
    .newsletter-form button {
      background: var(--gold);
      color: var(--black);
      border: none;
      padding: 15px 24px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.2s;
    }
    .newsletter-form button:hover { background: var(--gold-dark); color: #fff; }

    /* ═══════════════════════════════════════
       FIND US — MAP + CONTACT FORM
    ═══════════════════════════════════════ */
    .findus { padding: 92px 0 100px; background: var(--off-white); }
    .findus-head { max-width: 720px; margin-bottom: 56px; }
    .findus-head h2 {
      font-family: var(--serif);
      font-size: var(--h-lg);
      font-weight: 400;
      line-height: 1.05;
      letter-spacing: -0.5px;
      margin-bottom: 18px;
    }
    .findus-head p { font-size: 14px; color: var(--text-mid); line-height: 1.9; max-width: 560px; }
    .findus-head p a { border-bottom: 1px solid var(--gold); padding-bottom: 1px; color: var(--text-dark); }
    .findus-head p a:hover { color: var(--gold-dark); }

    .findus-info {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 48px;
      padding: 34px 0 30px;
      border-top: 1px solid var(--warm-gray);
      border-bottom: 1px solid var(--warm-gray);
    }
    .findus-col + .findus-col { border-left: 1px solid var(--warm-gray); padding-left: 48px; }
    .findus-col .col-label {
      display: flex; align-items: center; gap: 7px;
      font-size: 9px; font-weight: 600; letter-spacing: 2.5px;
      text-transform: uppercase; color: var(--text-light); margin-bottom: 18px;
    }
    .findus-col .col-label svg { width: 12px; height: 12px; fill: none; stroke: var(--gold); stroke-width: 1.6; }
    .findus-col address {
      font-style: normal; font-size: 14px; line-height: 1.75; color: var(--text-dark);
    }
    .findus-col .addr-note { font-size: 12.5px; color: var(--text-light); margin-top: 8px; }
    .findus-col .directions {
      display: inline-flex; align-items: center; gap: 6px;
      margin-top: 16px; font-size: 9px; font-weight: 600;
      letter-spacing: 2px; text-transform: uppercase;
      border-bottom: 1px solid var(--gold); padding-bottom: 3px;
    }
    .findus-col .directions:hover { color: var(--gold-dark); }
    .findus-col .directions svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 1.8; }
    .findus-col .tel {
      font-family: var(--display); font-size: 26px; font-weight: 400;
      letter-spacing: 0.5px; display: block; margin-bottom: 20px;
    }
    .findus-col .tel:hover { color: var(--gold-dark); }
    .findus-btn {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%; padding: 13px 18px; margin-bottom: 10px;
      border: 1px solid var(--text-dark);
      font-size: 9px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
      transition: background 0.25s, color 0.25s, border-color 0.25s;
    }
    .findus-btn:hover { background: var(--black); color: #fff; border-color: var(--black); }
    .findus-btn.is-gold { border-color: var(--gold); }
    .findus-btn.is-gold:hover { background: var(--gold); color: var(--black); border-color: var(--gold); }
    .hours-row {
      display: flex; justify-content: space-between; gap: 16px;
      font-size: 12.5px; color: var(--text-mid); padding: 5px 0;
    }
    .hours-row span:last-child { color: var(--text-dark); white-space: nowrap; }

    .findus-notes {
      display: flex; flex-wrap: wrap; gap: 10px 40px;
      padding: 22px 0 34px;
      border-bottom: 1px solid var(--warm-gray);
      margin-bottom: 40px;
    }
    .findus-notes .notes-label {
      width: 100%; font-size: 9px; font-weight: 600; letter-spacing: 2.5px;
      text-transform: uppercase; color: var(--text-light); margin-bottom: 6px;
    }
    .findus-notes li {
      position: relative; padding-left: 14px;
      font-size: 12.5px; color: var(--text-mid);
    }
    .findus-notes li::before {
      content: ''; position: absolute; left: 0; top: 7px;
      width: 4px; height: 4px; background: var(--gold);
    }

    .findus-grid { display: grid; grid-template-columns: 1.05fr 1fr; }
    .findus-map { position: relative; min-height: 560px; background: var(--warm-gray); }
    .findus-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

    .findus-form { background: var(--black); padding: 48px 46px 46px; }
    .findus-form .eyebrow {
      font-size: 9px; font-weight: 600; letter-spacing: 3px;
      text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 12px;
    }
    .findus-form h3 {
      font-family: var(--serif); font-size: 30px; font-weight: 400;
      color: #fff; margin-bottom: 32px;
    }
    .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
    .field { margin-bottom: 24px; }
    .field label {
      display: block; font-size: 9px; font-weight: 600; letter-spacing: 2px;
      text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 9px;
    }
    .field label .req { color: var(--gold); }
    .field input, .field select, .field textarea {
      width: 100%; background: transparent; border: none;
      border-bottom: 1px solid rgba(255,255,255,0.22);
      padding: 9px 0; font-family: var(--sans); font-size: 13px;
      color: #fff; outline: none; border-radius: 0;
      transition: border-color 0.25s;
    }
    .field textarea { resize: vertical; min-height: 62px; line-height: 1.6; }
    .field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,0.3); }
    .field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--gold); }
    .field select { appearance: none; cursor: pointer; background-image: none; }
    .field select option { background: #141414; color: #fff; }
    .field .select-wrap { position: relative; }
    .field .select-wrap::after {
      content: ''; position: absolute; right: 2px; top: 12px;
      width: 6px; height: 6px; border-right: 1px solid var(--gold);
      border-bottom: 1px solid var(--gold); transform: rotate(45deg);
      pointer-events: none;
    }
    .consent {
      display: flex; gap: 11px; align-items: flex-start;
      margin: 30px 0 24px; padding-top: 26px;
      border-top: 1px solid rgba(255,255,255,0.12);
    }
    .consent input { width: 13px; height: 13px; margin-top: 2px; accent-color: var(--gold); flex-shrink: 0; }
    .consent label { font-size: 11px; line-height: 1.65; color: rgba(255,255,255,0.6); }
    .findus-form button[type="submit"] {
      width: 100%; background: var(--gold); color: var(--black);
      border: none; padding: 15px; font-family: var(--sans);
      font-size: 10px; font-weight: 700; letter-spacing: 2.5px;
      text-transform: uppercase; cursor: pointer; transition: background 0.2s, color 0.2s;
    }
    .findus-form button[type="submit"]:hover { background: #fff; }
    .form-status {
      margin-top: 16px; font-size: 12.5px; line-height: 1.6;
      color: var(--gold-light); min-height: 1px;
    }

    /* ═══════════════════════════════════════
       FOOTER
    ═══════════════════════════════════════ */
    footer {
      background: var(--black);
      padding: 78px 0 40px;
    }
    .footer-top {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 60px;
      padding-bottom: 60px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .footer-brand .footer-logo {
      display: block;
      height: 54px;
      width: auto;
      margin-bottom: 12px;
    }
    .footer-brand .tagline {
      font-size: 10px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.35);
      margin-bottom: 24px;
    }
    .footer-brand p {
      font-size: 12.5px;
      line-height: 1.9;
      color: rgba(255,255,255,0.45);
      max-width: 260px;
    }
    .footer-social {
      display: flex;
      gap: 12px;
      margin-top: 28px;
    }
    .social-icon {
      width: 38px;
      height: 38px;
      border: 1px solid rgba(255,255,255,0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
    }
    .social-icon:hover { border-color: var(--gold); background: rgba(201,168,76,0.1); }
    .social-icon svg { width: 16px; height: 16px; fill: rgba(255,255,255,0.6); }
    .social-icon:hover svg { fill: var(--gold); }
    .footer-col h4 {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 24px;
    }
    .footer-col ul li {
      margin-bottom: 12px;
    }
    .footer-col ul li a {
      font-size: 12.5px;
      color: rgba(255,255,255,0.45);
      transition: color 0.2s;
    }
    .footer-col ul li a:hover { color: #fff; }
    .footer-contact-item {
      display: flex;
      gap: 12px;
      margin-bottom: 16px;
      align-items: flex-start;
    }
    .footer-contact-item .icon {
      color: var(--gold);
      font-size: 14px;
      margin-top: 1px;
      flex-shrink: 0;
    }
    .footer-contact-item span {
      font-size: 12.5px;
      color: rgba(255,255,255,0.45);
      line-height: 1.6;
    }
    .footer-hours table { width: 100%; }
    .footer-hours td {
      font-size: 11px;
      color: rgba(255,255,255,0.45);
      padding: 4px 0;
    }
    .footer-hours td:last-child { text-align: right; color: rgba(255,255,255,0.25); }
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 32px;
    }
    .footer-bottom p {
      font-size: 11px;
      color: rgba(255,255,255,0.25);
    }
    .footer-bottom-links {
      display: flex;
      gap: 24px;
    }
    .footer-bottom-links a {
      font-size: 10px;
      color: rgba(255,255,255,0.25);
      letter-spacing: 1px;
      text-transform: uppercase;
      transition: color 0.2s;
    }
    .footer-bottom-links a:hover { color: var(--gold); }

    /* ═══════════════════════════════════════
       SCROLL REVEAL
    ═══════════════════════════════════════ */
    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }

    /* ═══════════════════════════════════════
       MOBILE NAV TOGGLE & OVERLAY
    ═══════════════════════════════════════ */
    .nav-mobile-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
      flex-direction: column;
      gap: 5px;
      z-index: 1100;
    }
    .nav-mobile-toggle span {
      display: block;
      width: 24px;
      height: 2px;
      background: #fff;
      transition: transform 0.3s, opacity 0.3s;
    }
    .nav-mobile-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .nav-mobile-toggle.open span:nth-child(2) { opacity: 0; }
    .nav-mobile-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

    .mobile-nav-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(10,10,10,0.97);
      z-index: 1050;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 36px;
    }
    .mobile-nav-overlay.open { display: flex; }
    .mobile-nav-overlay a {
      font-family: var(--serif);
      font-size: 26px;
      font-weight: 400;
      color: rgba(255,255,255,0.85);
      letter-spacing: 2px;
      transition: color 0.2s;
    }
    .mobile-nav-overlay a:hover { color: var(--gold); }
    .mobile-nav-overlay .mob-book {
      margin-top: 12px;
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      background: var(--gold);
      color: var(--black);
      padding: 16px 40px;
      border-radius: 2px;
    }

    /* ═══════════════════════════════════════
       TABLET — 900px
    ═══════════════════════════════════════ */
    @media (max-width: 900px) {
      .container { padding: 0 24px; }
      .services-grid { grid-template-columns: repeat(2, 1fr); }
      .products-grid { grid-template-columns: repeat(2, 1fr); }
      .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
      .instagram-grid { grid-template-columns: repeat(3, 1fr); }
      .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
      .editorial-inner { grid-template-columns: 1fr; gap: 48px; }
      .editorial-photos { grid-template-rows: 220px 160px; }
      .services-detail-header { grid-template-columns: 1fr; gap: 16px; }
      .tab-content.active { grid-template-columns: 1fr; }
      .products-header { flex-direction: column; gap: 12px; align-items: flex-start; }
      .products-header p { text-align: left; }
      .newsletter-inner { flex-direction: column; gap: 28px; }
      .newsletter-form { max-width: 100%; }
      .findus-grid { grid-template-columns: 1fr; }
      .findus-map { min-height: 380px; }
      .findus-form { padding: 40px 32px; }
      .findus-info { grid-template-columns: 1fr 1fr; gap: 34px; }
      .findus-col + .findus-col { border-left: none; padding-left: 0; }
      .findus-col:nth-child(3) { grid-column: 1 / -1; padding-top: 26px; border-top: 1px solid var(--warm-gray); }
    }

    /* ═══════════════════════════════════════
       MOBILE — 640px
    ═══════════════════════════════════════ */
    @media (max-width: 640px) {
      .container { padding: 0 18px; }

      /* Find Us */
      .findus { padding: 66px 0 70px; }
      .findus-head { margin-bottom: 36px; }
      .findus-info { grid-template-columns: 1fr; gap: 28px; padding: 26px 0 22px; }
      .findus-col:nth-child(3) { padding-top: 22px; }
      .findus-notes { gap: 8px 24px; padding: 18px 0 26px; margin-bottom: 28px; }
      .findus-map { min-height: 300px; }
      .findus-form { padding: 34px 22px; }
      .findus-form h3 { font-size: 26px; margin-bottom: 24px; }
      .field-row { grid-template-columns: 1fr; gap: 0; }

      /* Nav */
      .nav { padding: 0 18px; height: 62px; }
      .nav-links { display: none !important; }
      .btn-book-nav { display: none; }
      .nav-mobile-toggle { display: flex; }
      .nav-logo img { height: 34px; }

      /* Hero */
      .hero-content { padding: 0 20px; max-width: 100%; }
      .hero-sub { max-width: 100%; margin-bottom: 36px; }
      .hero-actions { flex-direction: column; align-items: flex-start; gap: 14px; }
      .hero-badge { width: 90px; height: 90px; right: 16px; bottom: 56px; }
      .hero-badge-inner strong { font-size: 16px; }
      .hero-scroll { bottom: 20px; }

      /* Services strip */
      .services-strip { padding: 54px 0; }
      .services-strip-header { margin-bottom: 36px; padding: 0 18px; }
      .services-grid { grid-template-columns: 1fr; gap: 2px; }
      .service-card { height: 260px; }
      .service-card-link { opacity: 1; transform: none; }

      /* Editorial */
      .editorial { padding: 66px 0; }
      .editorial-inner { gap: 40px; }
      .editorial-photos {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 180px 130px;
      }
      .editorial-photo-1 { grid-row: 1 / 3; }

      /* Quote */
      .quote-band { padding: 54px 0; }

      /* Services detail */
      .services-detail { padding: 66px 0; }
      .services-detail-header { margin-bottom: 40px; }
      .services-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
      .tab-btn { padding: 12px 18px; white-space: nowrap; font-size: 9px; }
      .tab-content.active { gap: 0; }
      .service-item { flex-direction: row; flex-wrap: wrap; }

      /* Team */
      .team { padding: 66px 0; }
      .team-card-info { transform: translateY(0); }

      /* Be best */
      .be-best { padding: 60px 18px; }

      /* Products */
      .products { padding: 66px 0; }
      .products-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
      .product-img { height: 180px; }
      .product-info { padding: 0 12px; }

      /* Testimonials */
      .testimonials { padding: 66px 0; }
      .testimonials-grid { grid-template-columns: 1fr; gap: 16px; }
      .testimonial-card { padding: 28px 22px; }

      /* Instagram */
      .instagram { padding: 66px 0 50px; }
      .instagram-grid { grid-template-columns: repeat(3, 1fr); }

      /* Booking CTA */
      .booking-cta { padding: 70px 18px; }
      .booking-cta::before { font-size: 100px; }
      .booking-cta h2 { font-size: clamp(36px, 10vw, 56px); }

      /* Newsletter */
      .newsletter { padding: 54px 0; }
      .newsletter-form { flex-direction: column; }
      .newsletter-form input { width: 100%; }
      .newsletter-form button { width: 100%; padding: 14px; }

      /* Footer */
      footer { padding: 54px 0 28px; }
      .footer-top { grid-template-columns: 1fr; gap: 36px; }
      .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
      .footer-bottom-links { justify-content: center; }
      .footer-brand p { max-width: 100%; }
    }

    /* ═══════════════════════════════════════
       SMALL PHONES — 380px
    ═══════════════════════════════════════ */
    @media (max-width: 380px) {
      .products-grid { grid-template-columns: 1fr; }
      .product-img { height: 220px; }
      .instagram-grid { grid-template-columns: repeat(2, 1fr); }
      .hero-badge { display: none; }
    }

    /* ═══════════════════════════════════════
       CURSOR GLOW
    ═══════════════════════════════════════ */
    .cursor-glow {
      position: fixed;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(201,168,76,0.06) 0%, transparent 70%);
      pointer-events: none;
      z-index: 9999;
      transform: translate(-50%, -50%);
      transition: opacity 0.3s;
    }

    /* ═══════════════════════════════════════
       BOOKING PAGE (booking.html)
    ═══════════════════════════════════════ */
    .booking-hero {
      position: relative;
      background: var(--black);
      padding: 150px 0 74px;
      text-align: center;
      overflow: hidden;
    }
    .booking-hero::before {
      content: 'BOOK';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--serif);
      font-size: 190px;
      font-weight: 700;
      color: rgba(255,255,255,0.032);
      letter-spacing: 18px;
      white-space: nowrap;
      pointer-events: none;
      line-height: 1;
    }
    .booking-hero-inner { position: relative; z-index: 2; }
    .booking-hero .eyebrow {
      font-size: 10px; font-weight: 600; letter-spacing: 4px;
      text-transform: uppercase; color: var(--gold);
      display: block; margin-bottom: 18px;
    }
    .booking-hero h1 {
      font-family: var(--serif);
      font-size: var(--h-xl);
      font-weight: 400;
      color: #fff;
      line-height: 1.08;
      margin-bottom: 20px;
    }
    .booking-hero h1 em { font-style: italic; color: var(--gold-light); }
    .booking-hero p {
      font-size: 13px;
      color: rgba(255,255,255,0.6);
      line-height: 1.9;
      max-width: 520px;
      margin: 0 auto;
    }
    .booking-hero .back-home {
      display: inline-flex; align-items: center; gap: 7px;
      margin-top: 28px;
      font-size: 9px; font-weight: 600; letter-spacing: 2.5px;
      text-transform: uppercase; color: rgba(255,255,255,0.55);
      border-bottom: 1px solid rgba(201,168,76,0.5); padding-bottom: 4px;
      transition: color 0.25s, border-color 0.25s;
    }
    .booking-hero .back-home:hover { color: var(--gold); border-color: var(--gold); }

    .booking-main { background: var(--off-white); padding: 66px 0 30px; }
    .booking-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 34px;
      max-width: 880px;
      margin: 0 auto 52px;
    }
    .booking-step { text-align: center; }
    .booking-step .num {
      font-family: var(--display);
      font-size: 30px;
      color: var(--gold);
      display: block;
      margin-bottom: 8px;
    }
    .booking-step h3 {
      font-family: var(--sans);
      font-size: 10px; font-weight: 700; letter-spacing: 2.5px;
      text-transform: uppercase; margin-bottom: 8px;
    }
    .booking-step p { font-size: 12.5px; color: var(--text-mid); line-height: 1.75; }

    .square-embed {
      height: 1000px;
      background: #fff;
      border: 1px solid var(--warm-gray);
    }
    .square-embed iframe { display: block; }
    .booking-fallback {
      margin-top: 22px;
      font-size: 12.5px;
      color: var(--text-mid);
      text-align: center;
      line-height: 1.9;
    }
    .booking-fallback a {
      color: var(--text-dark);
      border-bottom: 1px solid var(--gold);
      padding-bottom: 1px;
    }
    .booking-fallback a:hover { color: var(--gold-dark); }

    .booking-assist { background: var(--cream); padding: 54px 0; }
    .booking-assist-inner {
      display: flex; align-items: center; justify-content: space-between;
      gap: 40px; flex-wrap: wrap;
    }
    .booking-assist h4 {
      font-family: var(--serif); font-size: 26px; font-weight: 400; margin-bottom: 6px;
    }
    .booking-assist p { font-size: 12.5px; color: var(--text-mid); line-height: 1.8; }
    .booking-assist .assist-actions { display: flex; gap: 12px; flex-wrap: wrap; }
    .booking-assist .assist-btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 13px 26px;
      border: 1px solid var(--text-dark);
      font-size: 9px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
      transition: background 0.25s, color 0.25s, border-color 0.25s;
      white-space: nowrap;
    }
    .booking-assist .assist-btn:hover { background: var(--black); color: #fff; border-color: var(--black); }
    .booking-assist .assist-btn.is-gold { background: var(--gold); border-color: var(--gold); }
    .booking-assist .assist-btn.is-gold:hover { background: var(--gold-dark); color: #fff; border-color: var(--gold-dark); }

    @media (max-width: 900px) {
      .booking-hero { padding: 120px 0 60px; }
      .booking-hero::before { font-size: 120px; }
      .booking-steps { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
      .square-embed { height: 1150px; }
      .booking-assist-inner { flex-direction: column; align-items: flex-start; gap: 22px; }
    }
    @media (max-width: 640px) {
      .booking-hero { padding: 120px 0 50px; }
      .booking-hero::before { font-size: 84px; letter-spacing: 10px; }
      .booking-main { padding: 54px 0 24px; }
      .square-embed { height: 1250px; }
      .booking-assist .assist-actions { width: 100%; }
      .booking-assist .assist-btn { flex: 1; justify-content: center; }
    }

    /* =======================================
       CONTACT PAGE (contact.html)
    ======================================= */
    .contact-head, .page-head { background: var(--off-white); padding: 120px 0 66px; text-align: center; }
    .contact-head h1, .page-head h1 {
      font-family: var(--serif);
      font-size: var(--h-xl);
      font-weight: 400;
      letter-spacing: 2px;
      text-transform: uppercase;
      line-height: 1.05;
      margin-bottom: 20px;
    }
    .contact-head p, .page-head p {
      font-size: 13px; color: var(--text-mid); line-height: 1.9;
      max-width: 470px; margin: 0 auto;
    }

    .contact-facts { background: var(--off-white); padding: 34px 0 74px; }
    .contact-facts-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
    .fact-block { text-align: center; }
    .fact-block > h2 {
      font-family: var(--serif);
      font-size: var(--h-sm);
      font-weight: 400;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: 34px;
    }
    .fact-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; text-align: left; }
    .fact-cols > div { padding: 0 30px; }
    .fact-cols > div + div { border-left: 1px solid var(--warm-gray); }
    .fact-cols dt {
      font-size: 9px; font-weight: 600; letter-spacing: 2.5px;
      text-transform: uppercase; color: var(--text-dark); line-height: 2.1;
    }
    .fact-cols dd {
      font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase;
      color: var(--text-light); line-height: 2.1;
    }
    .fact-cols a.arrow-link:hover { color: var(--gold-dark); }

    .contact-photo, .page-band { position: relative; height: 460px; overflow: hidden; background: var(--warm-gray); }
    .contact-photo img, .page-band img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
    .contact-photo-caption, .page-band-caption {
      position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
      background: var(--off-white);
      padding: 16px 46px 0;
      font-size: 12.5px; color: var(--text-mid);
    }

    .contact-form-section { background: var(--off-white); padding: 66px 0 86px; }
    .contact-form-inner { max-width: 830px; margin: 0 auto; }
    .contact-form-inner .eyebrow {
      font-size: 10px; font-weight: 600; letter-spacing: 3px;
      text-transform: uppercase; color: var(--text-dark); display: block; margin-bottom: 14px;
    }
    .contact-form-inner .eyebrow span { color: var(--gold); }
    .contact-form-inner h2 {
      font-family: var(--serif);
      font-size: var(--h-lg);
      font-weight: 400;
      line-height: 1.1;
      margin-bottom: 44px;
    }
    .contact-form-inner .field label {
      color: var(--text-mid);
      font-size: 11px; font-weight: 500; letter-spacing: 0.3px;
      text-transform: none; margin-bottom: 8px;
    }
    .contact-form-inner .field input,
    .contact-form-inner .field textarea,
    .contact-form-inner .field select {
      border: 1px solid #ddd;
      background: #fff;
      color: var(--text-dark);
      padding: 14px 16px;
      font-size: 13px;
    }
    .contact-form-inner .field input::placeholder,
    .contact-form-inner .field textarea::placeholder { color: #bbb; }
    .contact-form-inner .field input:focus,
    .contact-form-inner .field textarea:focus,
    .contact-form-inner .field select:focus { border-color: var(--gold); }
    .contact-form-inner .field textarea { min-height: 112px; }
    .contact-form-inner .field-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
    .contact-form-inner .consent { border-top: 1px solid var(--warm-gray); margin: 4px 0 22px; }
    .contact-form-inner .consent label { color: var(--text-mid); }
    .contact-form-inner button[type="submit"] {
      background: var(--black); color: #fff;
      border: none; padding: 15px 42px;
      font-family: var(--sans); font-size: 10px; font-weight: 700;
      letter-spacing: 2.5px; text-transform: uppercase; cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }
    .contact-form-inner button[type="submit"]:hover { background: var(--gold); color: var(--black); }
    .contact-form-inner .form-status { color: var(--text-mid); text-align: left; }

    .contact-map { height: 420px; background: var(--warm-gray); }
    .contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }

    .contact-book, .page-book { background: var(--off-white); padding: 92px 0; text-align: center; }
    .contact-book a, .page-book a {
      display: inline-flex; align-items: center; gap: 26px;
      font-family: var(--serif);
      font-size: var(--h-lg);
      font-weight: 400;
      letter-spacing: 1px;
      text-transform: uppercase;
    }
    .contact-book a:hover .book-circle, .page-book a:hover .book-circle { background: var(--gold); color: var(--black); }
    .contact-book .book-circle, .page-book .book-circle {
      width: 62px; height: 62px; border-radius: 50%;
      background: var(--black); color: #fff;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 20px; flex-shrink: 0;
      transition: background 0.25s, color 0.25s;
    }

    @media (max-width: 900px) {
      .contact-head, .page-head { padding: 120px 0 48px; }
      .contact-facts-inner { grid-template-columns: 1fr; gap: 48px; }
      .contact-photo, .page-band { height: 340px; }
      .contact-form-inner .field-row-3 { grid-template-columns: 1fr; gap: 0; }
      .contact-map { height: 340px; }
      .contact-book, .page-book { padding: 66px 0; }
    }
    @media (max-width: 640px) {
      .contact-head, .page-head { padding: 92px 0 40px; }
      .contact-facts { padding: 24px 0 52px; }
      .fact-cols { grid-template-columns: 1fr; gap: 26px; }
      .fact-cols > div { padding: 0; }
      .fact-cols > div + div { border-left: none; border-top: 1px solid var(--warm-gray); padding-top: 22px; }
      .contact-photo, .page-band { height: 260px; }
      .contact-photo-caption, .page-band-caption { padding: 12px 24px 0; font-size: 11px; }
      .contact-form-section { padding: 54px 0 60px; }
      .contact-map { height: 280px; }
      .contact-book a, .page-book a { flex-direction: column; gap: 18px; }
    }

    /* =======================================
       TEAM PAGE (team.html)
    ======================================= */
    .roster { background: var(--off-white); padding: 78px 0 20px; }
    .roster-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
    .roster-card { text-align: left; }
    .roster-portrait {
      position: relative; height: 520px; overflow: hidden;
      background: var(--warm-gray); margin-bottom: 24px;
    }
    .roster-portrait img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
    .roster-card:hover .roster-portrait img { transform: scale(1.04); }
    .roster-portrait .roster-index {
      position: absolute; top: 18px; left: 18px;
      font-family: var(--display); font-size: 22px; color: #fff;
      text-shadow: 0 1px 8px rgba(0,0,0,0.5);
    }
    .roster-card h3 {
      font-family: var(--serif); font-size: 26px; font-weight: 400; margin-bottom: 6px;
    }
    .roster-card .role {
      display: block; font-size: 9px; font-weight: 600; letter-spacing: 2.5px;
      text-transform: uppercase; color: var(--gold-dark); margin-bottom: 16px;
    }
    .roster-card .bio { font-size: 13px; color: var(--text-mid); line-height: 1.85; margin-bottom: 20px; }
    .roster-does {
      list-style: none; margin-bottom: 22px;
      border-top: 1px solid var(--warm-gray); padding-top: 16px;
    }
    .roster-does li {
      position: relative; padding-left: 15px;
      font-size: 12.5px; color: var(--text-dark); line-height: 2;
    }
    .roster-does li::before {
      content: ''; position: absolute; left: 0; top: 11px;
      width: 4px; height: 4px; background: var(--gold);
    }

    .team-note { background: var(--cream); padding: 66px 0; }
    .team-note-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px; }
    .team-note h4 {
      font-family: var(--serif); font-size: 22px; font-weight: 400; margin-bottom: 10px;
    }
    .team-note p { font-size: 12.5px; color: var(--text-mid); line-height: 1.85; }

    @media (max-width: 900px) {
      .roster-grid { grid-template-columns: repeat(2, 1fr); gap: 34px; }
      .roster-portrait { height: 420px; }
      .team-note-inner { grid-template-columns: 1fr; gap: 30px; }
    }
    @media (max-width: 640px) {
      .roster { padding: 54px 0 10px; }
      .roster-grid { grid-template-columns: 1fr; gap: 46px; }
      .roster-portrait { height: 420px; }
      .team-note { padding: 54px 0; }
    }

    /* =======================================
       GALLERY PAGE (gallery.html)
    ======================================= */
    .gallery-filters {
      background: var(--off-white);
      padding: 0 0 42px;
      display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
    }
    .gal-filter {
      background: none; border: 1px solid var(--warm-gray);
      padding: 11px 22px; cursor: pointer;
      font-family: var(--sans); font-size: 9px; font-weight: 600;
      letter-spacing: 2.2px; text-transform: uppercase; color: var(--text-mid);
      transition: background 0.25s, color 0.25s, border-color 0.25s;
    }
    .gal-filter:hover { border-color: var(--gold); color: var(--text-dark); }
    .gal-filter.active { background: var(--black); border-color: var(--black); color: #fff; }

    .gallery-wrap { background: var(--off-white); padding: 0 0 90px; }
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: 210px;
      gap: 10px;
    }
    .gal-item {
      position: relative; overflow: hidden; cursor: pointer;
      background: var(--warm-gray);
      grid-column: span 1; grid-row: span 1;
    }
    .gal-item.tall { grid-row: span 2; }
    .gal-item.wide { grid-column: span 2; }
    .gal-item.big  { grid-column: span 2; grid-row: span 2; }
    .gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
    .gal-item:hover img { transform: scale(1.05); }
    .gal-item::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0) 45%);
      opacity: 0; transition: opacity 0.35s ease;
    }
    .gal-item:hover::after { opacity: 1; }
    .gal-cap {
      position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
      padding: 16px 18px;
      font-size: 9px; font-weight: 600; letter-spacing: 2px;
      text-transform: uppercase; color: #fff;
      transform: translateY(10px); opacity: 0;
      transition: transform 0.35s ease, opacity 0.35s ease;
    }
    .gal-item:hover .gal-cap { transform: translateY(0); opacity: 1; }
    .gal-item[hidden] { display: none; }

    .lightbox {
      position: fixed; inset: 0; z-index: 3000;
      background: rgba(10,10,10,0.94);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
    }
    .lightbox.open { opacity: 1; pointer-events: auto; }
    .lightbox img {
      max-width: 88vw; max-height: 82vh; width: auto; height: auto;
      object-fit: contain; display: block;
    }
    .lightbox-cap {
      position: absolute; bottom: 30px; left: 0; right: 0; text-align: center;
      font-size: 10px; font-weight: 600; letter-spacing: 2.5px;
      text-transform: uppercase; color: rgba(255,255,255,0.75);
    }
    .lb-btn {
      position: absolute; background: none; border: none; cursor: pointer;
      color: #fff; font-size: 30px; line-height: 1; padding: 14px;
      opacity: 0.65; transition: opacity 0.2s;
      font-family: var(--sans);
    }
    .lb-btn:hover { opacity: 1; color: var(--gold); }
    .lb-close { top: 20px; right: 26px; font-size: 26px; }
    .lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
    .lb-next { right: 16px; top: 50%; transform: translateY(-50%); }

    @media (max-width: 900px) {
      .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 180px; }
    }
    @media (max-width: 640px) {
      .gallery-filters { padding: 0 0 28px; gap: 6px; }
      .gal-filter { padding: 9px 15px; font-size: 9px; letter-spacing: 1.6px; }
      .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 6px; }
      .gal-item.big { grid-column: span 2; grid-row: span 2; }
      .gal-item.wide { grid-column: span 2; grid-row: span 1; }
      .gallery-wrap { padding: 0 0 60px; }
      .gal-cap { opacity: 1; transform: none; font-size: 8px; padding: 10px 12px; }
      .gal-item::after { opacity: 1; }
      .lb-prev { left: 2px; }
      .lb-next { right: 2px; }
    }

    /* =======================================
       SERVICES PAGE (services.html)
    ======================================= */
    .svc-band { height: 420px; overflow: hidden; background: var(--warm-gray); }
    .svc-band img { width: 100%; height: 100%; object-fit: cover; }

    .svc-block { background: var(--off-white); padding: 66px 0 74px; }
    .svc-block-head { text-align: center; margin-bottom: 46px; }
    .svc-block-head h2 {
      font-family: var(--serif);
      font-size: var(--h-md);
      font-weight: 400; letter-spacing: 2px; text-transform: uppercase;
      margin-bottom: 12px;
    }
    .svc-block-head p {
      font-size: 12.5px; color: var(--text-mid); line-height: 1.85;
      max-width: 430px; margin: 0 auto;
    }
    .svc-columns {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 46px;
      align-items: start;
    }
    .svc-list { list-style: none; }
    .svc-row {
      display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px;
      padding: 13px 0;
      border-bottom: 1px solid var(--warm-gray);
    }
    .svc-list .svc-row:first-child { border-top: 1px solid var(--warm-gray); }
    .svc-row .svc-name { font-size: 12.5px; color: var(--text-dark); }
    .svc-row .svc-dots { flex: 1; min-width: 20px; border-bottom: 1px dotted #d5d0c6; transform: translateY(-3px); }
    .svc-row .svc-price { font-size: 12.5px; color: var(--text-dark); white-space: nowrap; }
    .svc-row .svc-desc {
      flex-basis: 100%; font-size: 11px; color: var(--text-light);
      line-height: 1.6; margin-top: 4px;
    }
    .svc-booknow { align-self: center; }
    .svc-booknow a {
      display: inline-block; background: var(--black); color: #fff;
      padding: 14px 30px; white-space: nowrap;
      font-size: 9px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
      transition: background 0.25s, color 0.25s;
    }
    .svc-booknow a:hover { background: var(--gold); color: var(--black); }

    .svc-props { background: var(--cream); padding: 66px 0; }
    .svc-props-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px; }
    /* Shared: the short gold rule above a heading. Used by .svc-prop and .visit-step. */
    .prop-rule { width: 34px; height: 1px; background: var(--gold); margin-bottom: 18px; }
    .svc-prop h4 {
      font-family: var(--sans); font-size: 10px; font-weight: 700;
      letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 12px;
    }
    .svc-prop p { font-size: 12.5px; color: var(--text-mid); line-height: 1.85; }

    @media (max-width: 900px) {
      .svc-band { height: 300px; }
      .svc-columns { grid-template-columns: 1fr; gap: 0; }
      .svc-booknow { order: 3; justify-self: center; margin-top: 30px; }
      .svc-props-inner { grid-template-columns: 1fr; gap: 30px; }
    }
    @media (max-width: 640px) {
      .svc-band { height: 220px; }
      .svc-block { padding: 54px 0 52px; }
      .svc-block-head { margin-bottom: 30px; }
      .svc-props { padding: 54px 0; }
    }

    /* =======================================
       ABOUT PAGE (about.html)
    ======================================= */
    .about-intro { background: var(--off-white); padding: 78px 0 78px; }
    .about-intro-inner { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 74px; align-items: start; }
    .about-intro h2 {
      font-family: var(--serif);
      font-size: var(--h-md);
      font-weight: 400; line-height: 1.15;
    }
    .about-intro h2 em { font-style: italic; color: var(--gold-dark); }
    .about-intro p { font-size: 13px; color: var(--text-mid); line-height: 1.95; margin-bottom: 18px; }
    .about-intro p:last-child { margin-bottom: 0; }

    .about-pillars { background: var(--black); padding: 78px 0; }
    .about-pillars-head { text-align: center; margin-bottom: 52px; }
    .about-pillars-head .eyebrow {
      font-size: 10px; font-weight: 600; letter-spacing: 4px;
      text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 14px;
    }
    .about-pillars-head h2 {
      font-family: var(--serif); font-size: var(--h-sm);
      font-weight: 400; color: #fff;
    }
    .about-pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
    .about-pillar { background: rgba(255,255,255,0.04); padding: 38px 32px; }
    .about-pillar .num {
      font-family: var(--display); font-size: 26px; color: var(--gold); display: block; margin-bottom: 14px;
    }
    .about-pillar h3 {
      font-family: var(--serif); font-size: 22px; font-weight: 400; color: #fff; margin-bottom: 12px;
    }
    .about-pillar p { font-size: 12.5px; color: rgba(255,255,255,0.6); line-height: 1.85; }

    .about-space { background: var(--off-white); padding: 78px 0; }
    .about-space-head { max-width: 560px; margin-bottom: 42px; }
    .about-space-head h2 {
      font-family: var(--serif); font-size: var(--h-sm);
      font-weight: 400; margin-bottom: 14px;
    }
    .about-space-head p { font-size: 13px; color: var(--text-mid); line-height: 1.9; }
    .about-space-grid {
      display: grid; grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: 200px; gap: 8px;
    }
    .about-space-grid figure { overflow: hidden; background: var(--warm-gray); }
    .about-space-grid figure.tall { grid-row: span 2; }
    .about-space-grid figure.wide { grid-column: span 2; }
    .about-space-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
    .about-space-grid figure:hover img { transform: scale(1.05); }


    .about-faq { background: var(--off-white); padding: 78px 0; }
    .about-faq-inner { max-width: 800px; margin: 0 auto; }
    .about-faq h2 {
      font-family: var(--serif); font-size: var(--h-sm);
      font-weight: 400; margin-bottom: 34px; text-align: center;
    }
    .faq-item { border-bottom: 1px solid var(--warm-gray); }
    .faq-item:first-of-type { border-top: 1px solid var(--warm-gray); }
    .faq-q {
      width: 100%; background: none; border: none; cursor: pointer;
      display: flex; justify-content: space-between; align-items: center; gap: 20px;
      padding: 20px 0; text-align: left;
      font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--text-dark);
    }
    .faq-q:hover { color: var(--gold-dark); }
    .faq-q .sign { color: var(--gold); font-size: 18px; line-height: 1; flex-shrink: 0; }
    .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
    .faq-a p { font-size: 12.5px; color: var(--text-mid); line-height: 1.9; padding: 0 0 20px; }
    .faq-item.open .faq-a { max-height: 340px; }

    @media (max-width: 900px) {
      .about-intro-inner { grid-template-columns: 1fr; gap: 26px; }
      .about-pillars-grid { grid-template-columns: 1fr; }
      .about-space-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
    }
    @media (max-width: 640px) {
      .about-intro { padding: 54px 0; }
      .about-pillars { padding: 54px 0; }
      .about-space { padding: 54px 0; }
      .about-space-grid { grid-auto-rows: 150px; gap: 6px; }
      .about-faq { padding: 54px 0; }
    }

    /* =======================================
       ACTIVE NAV STATE
    ======================================= */
    .nav-links a[aria-current="page"] {
      opacity: 1;
      color: var(--gold);
    }
    .nav-links a[aria-current="page"]::after {
      content: '';
      display: block;
      height: 1px;
      background: var(--gold);
      margin-top: 5px;
    }
    .mobile-nav-overlay a[aria-current="page"] { color: var(--gold); }
    .btn-book-nav[aria-current="page"] { background: var(--gold-dark); color: #fff; }

    /* =======================================
       HOMEPAGE TEASERS (replacing the sections
       that now live on their own pages)
    ======================================= */
    .section-more {
      display: inline-flex; align-items: center; gap: 8px;
      margin-top: 26px;
      font-size: var(--fs-micro); font-weight: 700;
      letter-spacing: 2.5px; text-transform: uppercase;
      border-bottom: 1px solid var(--gold); padding-bottom: 4px;
      transition: color 0.25s;
    }
    .section-more:hover { color: var(--gold-dark); }

    .home-gallery { background: var(--off-white); padding: 78px 0; }
    .home-gallery-head {
      display: flex; align-items: flex-end; justify-content: space-between;
      gap: 30px; margin-bottom: 34px; flex-wrap: wrap;
    }
    .home-gallery-head h2 {
      font-family: var(--serif); font-size: var(--h-md); font-weight: 400; line-height: 1.15;
    }
    .home-gallery-head .eyebrow {
      font-size: var(--fs-label); font-weight: 600; letter-spacing: 4px;
      text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 12px;
    }
    .home-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .home-gallery-grid a { display: block; height: 260px; overflow: hidden; background: var(--warm-gray); }
    .home-gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
    .home-gallery-grid a:hover img { transform: scale(1.05); }

    .home-visit { background: var(--black); padding: 66px 0; }
    .home-visit-inner { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 44px; align-items: center; }
    .home-visit .vi-label {
      font-size: var(--fs-micro); font-weight: 600; letter-spacing: 2.5px;
      text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 12px;
    }
    .home-visit p, .home-visit address {
      font-style: normal; font-size: var(--fs-base); color: rgba(255,255,255,0.75); line-height: 1.8;
    }
    .home-visit a.vi-link { color: #fff; border-bottom: 1px solid var(--gold); padding-bottom: 2px; }
    .home-visit a.vi-link:hover { color: var(--gold); }
    .home-visit .vi-cta {
      display: inline-flex; align-items: center; gap: 8px;
      border: 1px solid var(--gold); color: var(--gold);
      padding: 14px 26px; white-space: nowrap;
      font-size: var(--fs-micro); font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
      transition: background 0.25s, color 0.25s;
    }
    .home-visit .vi-cta:hover { background: var(--gold); color: var(--black); }

    @media (max-width: 900px) {
      .home-gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
      .home-gallery-grid a { height: 190px; }
      .home-visit-inner { grid-template-columns: 1fr 1fr; gap: 30px; }
      .home-visit .vi-cta { grid-column: 1 / -1; justify-self: start; }
    }
    @media (max-width: 640px) {
      .home-gallery { padding: 54px 0; }
      .home-gallery-grid { grid-template-columns: repeat(2, 1fr); }
      .home-gallery-grid a { height: 160px; }
      .home-gallery-grid a:nth-child(n+5) { display: none; }
      .home-visit { padding: 54px 0; }
      .home-visit-inner { grid-template-columns: 1fr; gap: 26px; }
    }

    /* =======================================
       SHOP PAGE (shop.html)
    ======================================= */
    .shop { background: var(--off-white); padding: 78px 0; }
    .shop-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }
    .shop-card {
      background: #fff;
      border: 1px solid var(--warm-gray);
      transition: all 0.3s ease;
      cursor: pointer;
    }
    .shop-card:hover {
      border-color: var(--gold);
      box-shadow: 0 8px 24px rgba(201, 168, 76, 0.12);
      transform: translateY(-4px);
    }
    .shop-card-image {
      width: 100%;
      height: 240px;
      background: var(--cream);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-light);
      font-size: 12px;
      font-weight: 500;
    }
    .shop-card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .shop-card-placeholder,
    .modal-image.is-placeholder::after {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background:
        repeating-linear-gradient(
          135deg,
          rgba(201, 168, 76, 0.05) 0 12px,
          rgba(201, 168, 76, 0.10) 12px 24px
        );
      color: var(--text-light);
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .modal-image.is-placeholder::after {
      content: "Photo coming soon";
    }
    .shop-card-info {
      padding: 18px;
    }
    .shop-card h3 {
      font-family: var(--serif);
      font-size: 16px;
      font-weight: 400;
      margin-bottom: 10px;
      line-height: 1.3;
      color: var(--text-dark);
    }
    .shop-card-price {
      display: flex;
      gap: 10px;
      align-items: center;
      margin-bottom: 12px;
      font-size: 13px;
    }
    .shop-card-price .original-price {
      text-decoration: line-through;
      color: var(--text-light);
    }
    .shop-card-price .sale-price {
      font-weight: 600;
      color: var(--gold-dark);
    }
    .btn-product-details {
      width: 100%;
      padding: 10px;
      background: var(--black);
      color: #fff;
      border: none;
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .btn-product-details:hover {
      background: var(--gold-dark);
      color: var(--black);
    }

    /* ═══════════════════════════════════════
       PRODUCT MODAL
    ═══════════════════════════════════════ */
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1000;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .modal.open {
      display: flex;
      opacity: 1;
    }
    .modal-backdrop {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: -1;
    }
    .modal-content {
      position: relative;
      background: #fff;
      width: 90%;
      max-width: 900px;
      max-height: 90vh;
      overflow-y: auto;
      margin: auto;
      border-radius: 2px;
    }
    .modal-close {
      position: sticky;
      top: 0;
      right: 0;
      width: 40px;
      height: 40px;
      background: var(--black);
      color: #fff;
      border: none;
      font-size: 24px;
      cursor: pointer;
      z-index: 10;
      float: right;
      transition: background 0.25s ease;
    }
    .modal-close:hover {
      background: var(--gold-dark);
    }
    .modal-body {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      padding: 40px;
      clear: both;
    }
    .modal-image {
      background: var(--cream);
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .modal-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .modal-info h2 {
      font-family: var(--serif);
      font-size: var(--h-sm);
      font-weight: 400;
      margin-bottom: 16px;
      line-height: 1.2;
    }
    .modal-price {
      display: flex;
      gap: 12px;
      align-items: center;
      margin-bottom: 24px;
      font-size: 14px;
    }
    .modal-price .original-price {
      text-decoration: line-through;
      color: var(--text-light);
    }
    .modal-price .sale-price {
      font-weight: 600;
      font-size: 16px;
      color: var(--gold-dark);
    }
    .modal-description {
      margin-bottom: 24px;
      font-size: 13px;
      color: var(--text-mid);
      line-height: 1.8;
    }
    .features-section {
      margin-bottom: 24px;
    }
    .features-section h4 {
      font-family: var(--serif);
      font-size: 14px;
      font-weight: 400;
      margin-bottom: 12px;
      color: var(--text-dark);
    }
    .features-section ul {
      list-style: none;
      padding: 0;
    }
    .features-section li {
      font-size: 13px;
      color: var(--text-mid);
      margin-bottom: 8px;
      line-height: 1.6;
      padding-left: 20px;
      position: relative;
    }
    .features-section li::before {
      content: "✓";
      position: absolute;
      left: 0;
      color: var(--gold-dark);
      font-weight: 600;
    }
    .size-section {
      margin-bottom: 24px;
      font-size: 13px;
      color: var(--text-dark);
    }
    .size-section strong {
      display: block;
      margin-bottom: 4px;
    }
    .variants-section {
      margin-bottom: 24px;
    }
    .variants-section > * {
      font-size: 13px;
      color: var(--text-dark);
      margin-bottom: 8px;
    }
    .variants-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .variant-chip {
      display: inline-block;
      background: var(--cream);
      padding: 8px 14px;
      border-radius: 4px;
      font-size: 12px;
      color: var(--text-mid);
      border: 1px solid var(--warm-gray);
    }

    @media (max-width: 768px) {
      .shop-grid { grid-template-columns: repeat(3, 1fr); }
      .modal-body { grid-template-columns: 1fr; gap: 24px; }
      .modal-image { aspect-ratio: 3/4; }
    }
    @media (max-width: 640px) {
      .shop { padding: 54px 0; }
      .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .shop-card-image { height: 180px; }
      .modal-content { width: 95%; max-height: 95vh; }
      .modal-body { padding: 24px; gap: 18px; }
    }

    /* =======================================
       YOUR VISIT  (your-visit.html, and the
       condensed strips on index / booking)
    ======================================= */
    .visit { padding: var(--sp-xl) 0; }
    .visit-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 46px 60px;
      max-width: 940px;
      margin: 0 auto;
    }
    .visit-num {
      font-family: var(--display);
      font-size: var(--fs-h3);
      color: var(--gold);
      display: block;
      margin-bottom: 10px;
      line-height: 1;
    }
    .visit-step h2,
    .visit-step h3 {
      font-family: var(--sans);
      font-size: var(--fs-label);
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--text-dark);
      margin-bottom: 12px;
    }
    .visit-step p {
      font-size: var(--fs-sm);
      color: var(--text-mid);
      line-height: 1.85;
    }
    .visit-close {
      max-width: 940px;
      margin: var(--sp-lg) auto 0;
      padding-top: var(--sp-sm);
      border-top: 1px solid var(--warm-gray);
      font-family: var(--serif);
      font-size: var(--fs-lg);
      line-height: 1.6;
      color: var(--text-dark);
    }
    .visit-close span {
      display: block;
      margin-top: 14px;
      font-family: var(--sans);
      font-size: var(--fs-label);
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--gold);
    }

    /* Condensed strip reused on index.html and booking.html */
    .visit-strip { background: var(--cream); padding: var(--sp-lg) 0; }
    .visit-strip-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 34px;
    }
    .visit-strip-head h2 {
      font-family: var(--serif);
      font-size: var(--h-sm);
      font-weight: 400;
      line-height: 1.2;
    }
    .visit-strip-inner {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 34px;
    }

    @media (max-width: 900px) {
      .visit-grid { grid-template-columns: 1fr; gap: 34px; }
      .visit-strip-inner { grid-template-columns: repeat(2, 1fr); gap: 26px; }
      .visit-strip-head { flex-direction: column; align-items: flex-start; gap: 12px; }
    }
    @media (max-width: 560px) {
      .visit-strip-inner { grid-template-columns: 1fr; gap: 22px; }
      .visit-close { font-size: var(--fs-md); }
    }

    /* =======================================
       TEAM MARQUEE  (homepage)
       All seven stylists on one line, scrolling
       right to left. The track holds the set
       twice; translating it -50% lands card 8
       exactly where card 1 started, so the loop
       has no seam. Each card carries its own
       margin-right instead of the flex gap,
       because a gap would leave half a gap of
       drift at the wrap point.
    ======================================= */
    .team-marquee {
      overflow: hidden;
      -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
              mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    }
    .team-track {
      display: flex;
      width: max-content;
      animation: team-scroll 55s linear infinite;
    }
    .team-marquee:hover .team-track,
    .team-marquee:focus-within .team-track { animation-play-state: paused; }

    @keyframes team-scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    .team-track .team-card {
      flex: 0 0 auto;
      width: 300px;
      height: 420px;
      margin-right: 3px;
    }
    /* On the strip the name stays put and only the bio opens on hover,
       because a card that is moving is awkward to hover-and-read. */
    .team-track .team-card-info {
      transform: none;
      padding: 24px 22px;
    }
    .team-track .team-card-info .bio {
      max-height: 0;
      opacity: 0;
      margin-top: 0;
      overflow: hidden;
      transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.4s ease;
    }
    .team-track .team-card:hover .team-card-info .bio {
      max-height: 120px;
      opacity: 1;
      margin-top: 10px;
    }

    .section-cta { text-align: center; margin-top: 46px; }

    @media (max-width: 900px) {
      .team-track .team-card { width: 240px; height: 340px; }
      .team-track .team-card-info { padding: 18px 16px; }
    }
    @media (max-width: 560px) {
      .team-track .team-card { width: 200px; height: 290px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .team-track { animation: none; }
      .team-marquee { overflow-x: auto; }
    }

    /* ═══════════════════════════════════════════════════════════════════
       CONVERSION EXPERIMENT BLOCK
       Everything below is new for the experiment homepage. It is kept in
       one block at the end so the diff against the control is obvious.
       Tokens only: no one-off sizes, no new fonts.
    ═══════════════════════════════════════════════════════════════════ */

    /* ── Skip link ──────────────────────────────────────────────────── */
    .skip-link {
      position: absolute;
      left: -9999px;
      top: 0;
      z-index: 2000;
      background: var(--gold);
      color: var(--black);
      padding: 12px 20px;
      font-size: var(--fs-label);
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
    }
    .skip-link:focus { left: 8px; top: 8px; }

    /* Visible focus for keyboard users, on both grounds. */
    a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 3px;
    }

    /* ── Hero: real <img> instead of a CSS background ───────────────── */
    /* A background-image cannot be preloaded reliably and is a poor LCP
       candidate. This makes the hero photo a normal, prioritised image. */
    .hero-media {
      position: absolute;
      inset: 0;
      overflow: hidden;
    }
    .hero-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    /* The salon photo is very bright (white marble, white walls), so the
       copy needs a real scrim on the left, not just a diagonal wash. */
    .hero-media::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(0,0,0,0.90) 0%, rgba(0,0,0,0.80) 40%, rgba(0,0,0,0.30) 68%, rgba(0,0,0,0.12) 100%),
        linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.12) 40%, rgba(0,0,0,0.35) 100%);
    }

    /* The headline is longer than the control's, so it needs room and a
       smaller step, and the hero must clear the 72px fixed nav. */
    .hero { padding-top: 72px; }
    .hero-content { max-width: 900px; }
    .hero-headline {
      /* Longer than the control's headline (a question plus an answer), so it
         takes a smaller step to stay inside three lines at any width. */
      font-size: clamp(29px, 4.1vw, 54px);
      line-height: 1.08;
      margin-bottom: 20px;
      text-wrap: balance;
    }
    .hero-eyebrow { flex-wrap: wrap; margin-bottom: 18px; }

    /* Starting prices sit in the hero, so the offer is above the fold. */
    .hero-sub { max-width: 460px; margin-bottom: var(--sp-sm); }

    .hero-actions { flex-wrap: wrap; }

    /* ── Walk-in status line under the hero CTAs ────────────────────── */
    .hero-walkin {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      /* Sits between the subhead and the buttons now, so it needs air on both sides. */
      margin: 4px 0 26px;
      padding: 10px 18px;
      background: rgba(10,10,10,0.55);
      border: 1px solid rgba(201,168,76,0.45);
      border-radius: 999px;
      font-size: var(--fs-sm);
      font-weight: 500;
      letter-spacing: 0.6px;
      color: #fff;
      backdrop-filter: blur(4px);
    }
    /* The pill now carries three spans, so it has to wrap gracefully. */
    .hero-walkin { flex-wrap: wrap; row-gap: 4px; }
    .hero-walkin #openState { font-weight: 600; color: var(--gold-light); }
    .hero-walkin .walkin-sep { opacity: 0.45; }
    .hero-walkin .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #52c274;
      box-shadow: 0 0 0 0 rgba(82,194,116,0.7);
      animation: walkinPulse 2.4s ease-out infinite;
      flex: none;
    }
    .hero-walkin[data-state="busy"] .dot { background: var(--gold); }
    .hero-walkin[data-state="closed"] .dot { background: #999; animation: none; }
    @keyframes walkinPulse {
      0%   { box-shadow: 0 0 0 0 rgba(82,194,116,0.6); }
      70%  { box-shadow: 0 0 0 10px rgba(82,194,116,0); }
      100% { box-shadow: 0 0 0 0 rgba(82,194,116,0); }
    }

    /* ── Phone number in the nav ────────────────────────────────────── */
    .btn-call-nav {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: var(--fs-xs);
      font-weight: 600;
      letter-spacing: 1px;
      color: #fff;
      white-space: nowrap;
      transition: color 0.2s;
    }
    .btn-call-nav:hover { color: var(--gold); }
    .mobile-nav-overlay .mob-call {
      font-family: var(--sans);
      font-size: var(--fs-md);
      font-weight: 600;
      letter-spacing: 1.5px;
      color: var(--gold);
    }

    /* ── Walk-in section ────────────────────────────────────────────── */
    .walkin {
      background: var(--black);
      color: #fff;
      padding: var(--sp-xl) 0;
    }
    .walkin-inner {
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: var(--sp-lg);
      align-items: start;
    }
    .walkin .label-tag { color: var(--gold); }
    .walkin h2 {
      font-family: var(--serif);
      font-size: var(--h-md);
      font-weight: 400;
      line-height: 1.15;
      color: #fff;
      margin: 14px 0 20px;
    }
    .walkin p {
      font-size: var(--fs-md);
      font-weight: 300;
      line-height: 1.85;
      color: rgba(255,255,255,0.72);
      max-width: 52ch;
      margin-bottom: 16px;
    }
    .walkin-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
      margin-top: 28px;
    }
    .walkin-actions .btn-outline {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 16px 28px;
      border: 1px solid rgba(255,255,255,0.35);
      color: #fff;
      font-size: var(--fs-label);
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      transition: border-color 0.25s, color 0.25s;
    }
    .walkin-actions .btn-outline:hover { border-color: var(--gold); color: var(--gold); }

    .walkin-facts { display: grid; gap: 2px; }
    .walkin-facts li {
      padding: 22px 24px;
      background: rgba(255,255,255,0.04);
      border-left: 2px solid var(--gold);
    }
    .walkin-facts strong {
      display: block;
      font-size: var(--fs-md);
      font-weight: 600;
      letter-spacing: 0.4px;
      color: #fff;
      margin-bottom: 6px;
    }
    .walkin-facts span {
      display: block;
      font-size: var(--fs-sm);
      font-weight: 300;
      line-height: 1.7;
      color: rgba(255,255,255,0.6);
    }

    /* ── Services strip additions ───────────────────────────────────── */
    .services-strip-note {
      font-size: var(--fs-sm);
      font-weight: 300;
      line-height: 1.8;
      color: var(--text-mid);
      max-width: 46ch;
      margin: 16px auto 0;
    }
    .service-card-price {
      display: inline-block;
      margin-top: 10px;
      font-size: var(--fs-md);
      font-weight: 600;
      letter-spacing: 0.5px;
      color: var(--gold-light);
    }
    /* On touch screens there is no hover, so the card link was invisible. */
    @media (hover: none) {
      .service-card-link { opacity: 1; transform: none; }
    }
    .services-strip .section-cta .section-more { display: inline-block; margin-top: 22px; }

    /* ── Proof strip ────────────────────────────────────────────────── */
    .proof {
      background: var(--cream);
      padding: var(--sp-md) 0;
      border-top: 1px solid var(--warm-gray);
      border-bottom: 1px solid var(--warm-gray);
    }
    .proof-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--sp-xs);
      text-align: center;
    }
    .proof-row li { padding: 0 8px; }
    .proof-row strong {
      display: block;
      font-family: var(--serif);
      font-size: var(--fs-h4);
      font-weight: 400;
      color: var(--gold-dark);
      margin-bottom: 8px;
    }
    .proof-row span {
      display: block;
      font-size: var(--fs-xs);
      font-weight: 500;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--text-mid);
      line-height: 1.6;
    }

    /* ── FAQ ────────────────────────────────────────────────────────── */
    .faq { padding: var(--sp-xl) 0; background: var(--off-white); }
    .faq-head { text-align: center; margin-bottom: var(--sp-sm); }
    .faq-head h2 {
      font-family: var(--serif);
      font-size: var(--h-sm);
      font-weight: 400;
      line-height: 1.2;
      margin-top: 14px;
    }
    .faq-list { max-width: 780px; margin: 0 auto; }
    .faq-list details {
      border-bottom: 1px solid var(--warm-gray);
    }
    .faq-list summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 22px 0;
      cursor: pointer;
      list-style: none;
      font-size: var(--fs-md);
      font-weight: 600;
      letter-spacing: 0.3px;
      color: var(--text-dark);
    }
    .faq-list summary::-webkit-details-marker { display: none; }
    .faq-list summary::after {
      content: '+';
      flex: none;
      font-family: var(--sans);
      font-size: var(--fs-h5);
      font-weight: 300;
      line-height: 1;
      color: var(--gold-dark);
      transition: transform 0.25s;
    }
    .faq-list details[open] summary::after { transform: rotate(45deg); }
    .faq-list p {
      padding: 0 0 22px;
      font-size: var(--fs-md);
      font-weight: 300;
      line-height: 1.85;
      color: var(--text-mid);
      max-width: 62ch;
    }
    .faq-list p a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 3px; }

    /* ── Booking CTA: two routes, one clearly primary ───────────────── */
    .booking-cta-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      align-items: center;
      justify-content: center;
    }
    .btn-book-alt {
      display: inline-flex;
      align-items: center;
      font-size: var(--fs-label);
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.85);
      padding: 16px 0;
      border-bottom: 1px solid rgba(255,255,255,0.4);
      transition: color 0.25s, border-color 0.25s;
    }
    .btn-book-alt:hover { color: var(--gold); border-color: var(--gold); }

    /* ── Newsletter + footer additions ──────────────────────────────── */
    .newsletter-status {
      margin-top: 12px;
      font-size: var(--fs-sm);
      color: var(--text-mid);
    }
    .footer-walkin {
      margin-top: 14px;
      font-size: var(--fs-sm);
      font-weight: 500;
      color: var(--gold);
    }
    .footer-contact-item a:hover { color: var(--gold); }

    /* ── Sticky mobile action bar ───────────────────────────────────── */
    /* Hidden on desktop. On phones it keeps both routes in the thumb zone. */
    .mobile-cta { display: none; }

    @media (max-width: 900px) {
      .walkin-inner { grid-template-columns: 1fr; gap: var(--sp-sm); }
      .proof-row { grid-template-columns: repeat(2, 1fr); gap: var(--sp-xs); }
    }

    @media (max-width: 768px) {
      .btn-call-nav { display: none; }   /* the sticky bar carries the call on phones */

      .mobile-cta {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1200;
        gap: 1px;
        background: rgba(10,10,10,0.9);
        backdrop-filter: blur(8px);
        padding: 8px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -4px 20px rgba(0,0,0,0.25);
      }
      .mobile-cta a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 52px;
        font-size: var(--fs-label);
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
      }
      .mobile-cta-book {
        flex: 1 1 auto;
        background: var(--gold);
        color: var(--black);
      }
      .mobile-cta-call {
        flex: 0 0 34%;
        border: 1px solid rgba(255,255,255,0.45);
        color: #fff;
      }
      /* Nothing at the bottom of the page hides behind the bar. */
      body { padding-bottom: 72px; }
      .mobile-nav-overlay { padding-bottom: 72px; }
    }

    @media (max-width: 640px) {
      /* A left-weighted scrim does nothing on a narrow screen, so the phone
         gets a vertical one instead. The hero copy has to stay readable. */
      .hero-media::after {
        background: linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.58) 30%, rgba(0,0,0,0.62) 65%, rgba(0,0,0,0.80) 100%);
      }
      .hero-eyebrow { letter-spacing: 2px; font-size: var(--fs-micro); }
      /* The pill stacks on a phone, so the middle separator would be left
         dangling at the end of the first line. Drop it and break cleanly. */
      .hero-walkin .walkin-sep { display: none; }
      .hero-walkin #walkinText { flex: 1 1 100%; }
      .hero-walkin {
        width: 100%;
        justify-content: flex-start;
        border-radius: 4px;
        font-size: var(--fs-xs);
      }
      .hero-actions { gap: 14px; }
      .hero-actions .btn-primary { width: 100%; justify-content: center; }
      .hero-actions .btn-ghost { width: 100%; justify-content: center; }
      .walkin-actions .btn-primary,
      .walkin-actions .btn-outline { width: 100%; justify-content: center; }
      .booking-cta-actions { flex-direction: column; align-items: stretch; }
      .booking-cta-actions .btn-book-cta { justify-content: center; }
      .btn-book-alt { justify-content: center; }
      .proof-row strong { font-size: var(--fs-h5); }
      .faq-list summary { font-size: var(--fs-base); }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-walkin .dot { animation: none; }
      .faq-list details[open] summary::after { transition: none; }
    }