/* Inter Tight: body + all headings (Bold). Self-hosted. */
    @font-face { font-family: "Inter Tight"; src: url("/fonts/InterTight-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
    @font-face { font-family: "Inter Tight"; src: url("/fonts/InterTight-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
    @font-face { font-family: "Inter Tight"; src: url("/fonts/InterTight-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
    @font-face { font-family: "Inter Tight"; src: url("/fonts/InterTight-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
    /* Coconat: display headings (Regular) + eyebrow labels (Bold). Self-hosted. */
    @font-face { font-family: "Coconat"; src: url("/fonts/Coconat-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
    @font-face { font-family: "Coconat"; src: url("/fonts/Coconat-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
    :root {
      --cream: #F5EFE3;         /* page base */
      --cream-2: #EFE7D7;       /* alt surface */
      --card: #FBF8F1;          /* card surface */
      --espresso: #2B2119;      /* primary ink */
      --espresso-soft: #6B5A48; /* secondary ink */
      --bronze: #B9803F;        /* decorative accent */
      --bronze-ink: #8A5730;    /* text-safe accent on light */
      --bronze-bright: #C99456;
      --hairline: rgba(43, 33, 25, 0.12);
      --shadow-soft: 0 12px 34px -20px rgba(43,33,25,0.35);
      --shadow-lift: 0 30px 55px -26px rgba(43,33,25,0.45);
      --bone: #F3ECDD;          /* light ink used over the dark hero/footer */
    }
    body {
      background: var(--cream);
      color: var(--espresso);
      font-family: "Inter Tight", sans-serif;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    /* Headings: Coconat Regular, tight tracking. Force weight to override inline styles. */
    .font-head {
      font-family: "Coconat", serif;
      letter-spacing: -1px;
      font-weight: 400 !important;
    }
    .font-accent { font-family: "Inter Tight", sans-serif; font-style: italic; text-transform: none; }
    /* Accent word set inside a heading: same Coconat display face, set apart by bronze color. */
    .accent-word {
      font-family: "Coconat", serif;
      font-style: normal;
      font-weight: 400 !important;
      text-transform: none;
      letter-spacing: -1px;
    }
    /* Logo wordmark: Coconat, uppercase */
    .logo .font-head {
      text-transform: uppercase;
    }
    .eyebrow {
      font-family: "Coconat", serif;
      font-size: 0.78rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--bronze-ink);
    }

    /* Warm paper grain for texture */
    .grain::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 60;
      opacity: 0.04;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    /* Brushed bronze hairline under eyebrows */
    .rule-metal {
      height: 1px;
      background: linear-gradient(90deg, var(--bronze), rgba(185,128,63,0.08) 70%, transparent);
      transform-origin: left center;
    }

    .warm-panel {
      background:
        radial-gradient(ellipse 120% 90% at 15% 0%, rgba(185,128,63,0.14), transparent 55%),
        radial-gradient(ellipse 90% 100% at 100% 100%, rgba(185,128,63,0.08), transparent 60%),
        var(--cream-2);
    }

    .warm-card {
      background: var(--card);
      border: 1px solid var(--hairline);
      box-shadow: var(--shadow-soft);
    }

    /* ---- Buttons: one place for shape, Coconat face, colour + sheen ---- */
    .btn {
      align-items: center; justify-content: center; gap: 0.6rem;
      font-family: "Coconat", serif; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.09em; line-height: 1; white-space: nowrap;
      border: 1px solid transparent; border-radius: 9999px;
      cursor: pointer; position: relative; overflow: hidden;
      transition: background-color .25s ease, border-color .25s ease, color .25s ease;
    }
    .btn::before {
      content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
      background: linear-gradient(105deg, transparent, rgba(255,255,255,0.5), transparent);
      transform: skewX(-20deg); transition: left 0.6s ease; pointer-events: none;
    }
    .btn:hover::before { left: 130%; }
    /* Colour variants */
    .btn-primary { background: var(--espresso); color: var(--bone); }
    .btn-primary:hover { background: var(--bronze-ink); }
    .btn-gold { background: var(--bronze); color: var(--espresso); }
    .btn-gold:hover { background: var(--bronze-bright); }
    .btn-bright { background: var(--bronze-bright); color: var(--espresso); }
    .btn-bright:hover { background: var(--bronze); }
    .btn-outline { border-color: rgba(243,236,221,0.35); color: var(--bone); }
    .btn-outline:hover { border-color: var(--bronze-bright); color: var(--bronze-bright); }
    /* Sizes */
    .btn-sm { font-size: 0.74rem; padding: 0.72rem 1.4rem; }
    .btn-md { font-size: 0.8rem; padding: 0.95rem 2rem; }
    .btn-lg { font-size: 0.84rem; padding: 1.15rem 2.6rem; }
    /* Icon-only (square-ish, e.g. the booking submit arrow) */
    .btn-icon { border-radius: 0.75rem; padding: 0; width: 4rem; align-self: stretch; gap: 0; letter-spacing: 0; }

    .card-lift { transform-style: preserve-3d; will-change: transform; }
    .card-img-wrap { overflow: hidden; }
    .card-img { will-change: transform; }

    /* Swiper theming */
    .fleet-swiper { --swiper-theme-color: var(--bronze); overflow: visible; }
    .fleet-swiper .swiper-slide { height: auto; }
    /* The swiper keeps overflow:visible so the next slide peeks in. Clip that at
       the section edge so the off-screen slides never widen the page (which shows
       up as horizontal scroll on mobile). The peek up to the viewport still shows. */
    #gallery { overflow-x: clip; }
    .fleet-pagination .swiper-pagination-bullet {
      width: 9px; height: 9px; margin: 0 !important;
      background: var(--espresso); opacity: 0.22;
      transition: width .35s ease, opacity .35s ease, background .35s ease;
    }
    .fleet-pagination .swiper-pagination-bullet-active {
      opacity: 1; background: var(--bronze); width: 28px; border-radius: 5px;
    }

    /* Alt warm band */
    .band { background: var(--cream-2); }

    /* Vehicle tiles + step cards lift on hover */
    .tile {
      background: var(--card);
      border: 1px solid var(--hairline);
      transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease;
    }
    .tile:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lift);
      border-color: rgba(185,128,63,0.45);
    }
    .tile:hover .tile-icon { color: var(--bronze-ink); transform: scale(1.08); }
    .tile-icon { color: var(--espresso); transition: color .45s ease, transform .45s ease; }

    .step-num {
      font-family: "Coconat", serif;
      font-size: clamp(3rem, 6vw, 4.5rem);
      line-height: 1;
      color: var(--bronze);
      opacity: 0.5;
    }

    /* ---- Before / After compare (GSAP Draggable) ---- */
    .ba {
      --x: 50%;
      position: relative;
      overflow: hidden;
      border-radius: 1rem;
      border: 1px solid var(--hairline);
      box-shadow: var(--shadow-soft);
      touch-action: pan-y;
    }
    .ba img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; pointer-events: none; }
    .ba-top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); will-change: clip-path; }
    .ba-line { position: absolute; top: 0; bottom: 0; left: var(--x); width: 0; z-index: 3; }
    .ba-line::before {
      content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px;
      background: var(--bone); box-shadow: 0 0 0 1px rgba(43,33,25,0.15);
    }
    .ba-handle {
      position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%);
      width: 52px; height: 52px; border-radius: 9999px;
      background: var(--bronze-bright); color: var(--espresso);
      display: grid; place-items: center; cursor: ew-resize;
      box-shadow: 0 8px 22px -6px rgba(43,33,25,0.5);
      touch-action: none;
    }
    .ba-handle::after {
      content: ""; position: absolute; inset: -8px; border-radius: 9999px;
      border: 1px solid rgba(201,148,86,0.5); animation: baPulse 2.6s ease-out infinite;
    }
    @keyframes baPulse { 0% { transform: scale(0.85); opacity: .8; } 100% { transform: scale(1.25); opacity: 0; } }
    .ba-tag {
      position: absolute; bottom: 1rem; z-index: 2;
      font-family: "Coconat", serif; text-transform: uppercase; letter-spacing: 0.18em;
      font-size: 0.66rem; font-weight: 700; color: var(--bone);
      background: rgba(24,18,12,0.6); backdrop-filter: blur(4px);
      padding: 0.4rem 0.8rem; border-radius: 9999px;
    }
    .ba-tag-before { left: 1rem; }
    .ba-tag-after { right: 1rem; }

    /* ---- Booking bar attention flash ---- */
    /* Fired when a "Book a cleaning" button scrolls the visitor to the picker,
       so it is obvious where they landed and what to do next. */
    @keyframes booking-flash {
      0%   { box-shadow: 0 0 0 0 rgba(201,148,86,0); }
      35%  { box-shadow: 0 0 0 5px rgba(201,148,86,0.55); }
      100% { box-shadow: 0 0 0 0 rgba(201,148,86,0); }
    }
    .booking-flash { animation: booking-flash 1.4s ease-out 1; border-radius: 1rem; }
    @media (prefers-reduced-motion: reduce) { .booking-flash { animation: none; } }

    /* ---- Gallery slider controls ---- */
    /* Swiper flags a spent arrow with .swiper-button-disabled rather than the
       disabled attribute, so the dimmed/idle state keys off the class. */
    .fleet-prev, .fleet-next { cursor: pointer; }
    .fleet-prev.swiper-button-disabled,
    .fleet-next.swiper-button-disabled { cursor: default; opacity: 0.35; }
    .fleet-pagination .swiper-pagination-bullet { cursor: pointer; }

    /* ---- FAQ (native details) ---- */
    .faq-item { border-bottom: 1px solid var(--hairline); }
    .faq-item summary {
      list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
      gap: 1.5rem; padding: 1.6rem 0; font-family: "Coconat", serif; letter-spacing: -0.5px;
      font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: var(--espresso);
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary:hover { color: var(--bronze-ink); }
    .faq-plus { position: relative; flex: 0 0 20px; width: 20px; height: 20px; }
    .faq-plus::before, .faq-plus::after {
      content: ""; position: absolute; background: var(--bronze-ink); border-radius: 2px;
      transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
    }
    .faq-plus::before { top: 9px; left: 0; width: 20px; height: 2px; }
    .faq-plus::after { top: 0; left: 9px; width: 2px; height: 20px; }
    /* No-JS: the native [open] state drives the icon. */
    .faq-item[open] .faq-plus::after { transform: rotate(90deg); opacity: 0; }
    /* With JS the accordion animates, so .is-open drives the icon instead
       (it flips the moment you click, rather than when the collapse finishes). */
    .faq-js .faq-item .faq-plus::after { transform: none; opacity: 1; }
    .faq-js .faq-item.is-open .faq-plus::after { transform: rotate(90deg); opacity: 0; }
    .faq-answer { overflow: hidden; }
    .faq-answer p { padding: 0 0 1.6rem; margin: 0; color: var(--espresso-soft); line-height: 1.7; max-width: 46rem; }

    /* ---- Hero booking bar ---- */
    .svc-card { transition: border-color .25s ease, background .25s ease, transform .2s ease; }
    .svc-card:hover { border-color: rgba(243,236,221,0.45); }
    .svc-card[aria-pressed="true"] { border-color: var(--bronze-bright); background: rgba(201,148,86,0.16); }
    .svc-card .svc-check { opacity: 0; transform: scale(0.5); transition: opacity .2s ease, transform .2s ease; }
    .svc-card[aria-pressed="true"] .svc-check { opacity: 1; transform: scale(1); }
    #bookingBar input::placeholder { color: rgba(243,236,221,0.4); }