/* ==========================================================================
   TJS Detailing - site stylesheet
   One file, ordered top to bottom the way the page reads. Each section starts
   with a short note on what it styles and where to edit it.
   Colours, radius and page width live in :root (section 1) - change them there.
   Motion-only styles are prefixed with .motion (added to <html> by js/core.js
   when animation is allowed), so the page still looks right with motion off.
   Order matters in a few places: where a rule must stay below another one,
   a comment says so. Do not re-sort rules without checking the cascade.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Tokens and base
   Colours, radius and max width are CSS variables in :root - change a colour here and it
   updates everywhere. Also: page defaults, shared headings (.display, .eyebrow, .chrome-text),
   section spacing, scroll-reveal (.reveal) and the branded scroll bar.
   --------------------------------------------------------------------------- */
:root {
  --bg: #08090c;
  --bg-2: #0f1116;
  --card: #14171d;
  --line: #262a33;
  --text: #eef1f5;
  --muted: #9aa3b2;
  --chrome-1: #ffffff;
  --chrome-2: #b9c0cc;
  --chrome-3: #6b7380;
  --accent: #cfd6e1;
  --accent-glow: rgba(255,255,255,.18);
  --solid: #2b2f37;
  --radius: 16px;
  --max: 1200px;
  accent-color: #ffffff;
  caret-color: #ffffff;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: auto;
  scroll-padding-top: 96px;
  scrollbar-color: #8a919d #0b0d12;
  scrollbar-width: thin;
  -webkit-tap-highlight-color: rgba(255,255,255,.12);
  background: #08090c;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter,system-ui,sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
img {
  max-width: 100%;
  display: block;
  -webkit-user-drag: none;
}
a { color: inherit; }
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}
.display {
  font-family: "Saira Semi Condensed",sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .95;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
/* Chrome gradient text. The padding / negative margin pair widens the painted box so the */
/* gradient also covers the lean of the last italic letter. */
.chrome-text {
  background: linear-gradient(180deg,#ffffff 0%,#f5f7fb 30%,#d3d9e2 47%,#a3adbb 53%,#e9edf3 76%,#ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 0 .16em 0 .04em;
  margin: 0 -.16em 0 -.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.eyebrow {
  font-size: .8rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  text-shadow: 0 0 18px rgba(255,255,255,.25);
  font-family: "Saira Semi Condensed",sans-serif;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
section {
  padding: 110px 0;
  scroll-margin-top: 80px;
}
.section-head {
  max-width: 640px;
  margin-bottom: 56px;
}
.section-head h2 {
  font-size: clamp(2.2rem,5vw,3.6rem);
  margin: 10px 0 14px;
}
.section-head p { color: var(--muted); }
.motion .reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);
}
.motion .reveal.in {
  opacity: 1;
  transform: none;
}
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: .04em .16em .1em .04em;
  margin: -.04em -.16em -.1em -.04em;
}
.wi { display: inline-block; }
html, body { overflow-x: clip; }
.display, h1.display, h2.display {
  font-style: italic;
  letter-spacing: -.005em;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg,transparent,var(--accent));
  box-shadow: 0 0 10px rgba(255,255,255,.45);
}
section[id], header[id] { scroll-margin-top: 84px; }
@media (max-width:420px) {
  section { padding: 64px 0; }
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track { background: #0b0d12; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,#cfd6e1,#7b8290);
  border-radius: 999px;
  border: 2px solid #0b0d12;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg,#ffffff,#cfd6e1); }
p { text-wrap: pretty; }
::selection {
  background: #e9ecf1;
  color: #08090c;
}
/* Overlays: the page behind the open menu never scrolls. */
html:has(body.menu-open) {
  overflow: hidden;
}
a, button, summary { touch-action: manipulation; }
.totop { display: none; }
@media (max-width:760px) {
  .totop {
    display: grid;
    place-items: center;
    position: fixed;
    right: 14px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    z-index: 59;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid #e9ecf1;
    color: #fff;
    background: var(--solid);
    box-shadow: 0 0 0 3px rgba(255,255,255,.12),0 10px 26px rgba(255,255,255,.23);
    opacity: 0;
    transform: translateY(10px) scale(.9);
    transition: opacity .25s,transform .25s;
    cursor: pointer;
  }
  .totop.on {
    opacity: 1;
    transform: none;
  }
  .totop[hidden] { display: none; }
  .totop svg {
    width: 22px;
    height: 22px;
  }
}
.pkd {
  margin-top: 18px;
  padding: clamp(18px,3vw,34px);
  border: 1px solid rgba(255,255,255,.27);
  border-radius: 22px;
  background: linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015) 60%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06),0 24px 70px rgba(255,255,255,.06);
  scroll-margin-top: 96px;
}
.pkd-item.in { animation: fltIn .45s cubic-bezier(.2,.8,.2,1); }
.pkd-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.pkd-ic {
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  background: radial-gradient(circle at 30% 25%,#5b616c,#22262d 75%);
  box-shadow: 0 0 0 4px rgba(255,255,255,.09),0 8px 22px rgba(255,255,255,.2);
}
.pkd-ic svg {
  width: 26px;
  height: 26px;
}
.pkd-eyebrow {
  display: block;
  font: 600 .72rem "Saira Semi Condensed",sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}
.pkd-head h3 {
  font-family: "Saira Semi Condensed",sans-serif;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(1.45rem,3vw,2.2rem);
  line-height: 1.05;
}
.pkd-from {
  margin: 0 0 0 auto;
  text-align: right;
  font-family: "Saira Semi Condensed",sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: clamp(1.5rem,3vw,2.1rem);
  line-height: 1;
  white-space: nowrap;
}
.pkd-from small {
  display: block;
  font-size: .7rem;
  font-style: normal;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.pkd-grid {
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: 30px;
}
.pkd-desc p {
  color: #c9cfd8;
  margin: 0 0 12px;
}
.pkd-time {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 600;
}
.pkd-time svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
  flex: none;
}
.pkd h4 {
  font: 800 .9rem "Saira Semi Condensed",sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: #fff;
}
.pkd-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.pkd-list li {
  position: relative;
  padding-left: 32px;
  color: #dbe2ec;
  font-size: .95rem;
  line-height: 1.4;
}
.pkd-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: -1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 800;
  color: #fff;
  background: rgba(255,255,255,.14);
  box-shadow: 0 0 0 1px rgba(255,255,255,.66);
}
.pkd-price { margin-top: 24px; }
.pkd-sizes {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
}
.pkd-sizes.pkd-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.pkd-sizes div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(10,12,18,.55);
}
.pkd-sizes small {
  font: 700 .72rem "Saira Semi Condensed",sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.pkd-sizes span {
  font-size: .78rem;
  color: var(--muted);
}
.pkd-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
@media (max-width:760px) {
  .pkd-grid {
    grid-template-columns: minmax(0,1fr);
    gap: 20px;
  }
  .pkd-sizes, .pkd-sizes.pkd-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pkd-head { flex-wrap: wrap; }
  .pkd-from {
    margin-left: 64px;
    text-align: left;
  }
}
.brands {
  padding: 34px 0 30px;
  border-top: 1px solid rgba(255,255,255,.11);
  border-bottom: 1px solid rgba(255,255,255,.11);
  background: linear-gradient(180deg,rgba(255,255,255,.02),transparent);
}
.brands-h {
  text-align: center;
  margin: 0 0 16px;
}
.brands-h span {
  font: 600 .72rem "Saira Semi Condensed",sans-serif;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent);
}
.brands-marq {
  display: flex;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask: linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.brands-track {
  flex: none;
  display: flex;
  align-items: center;
  gap: 56px;
  padding-right: 56px;
  margin: 0;
  list-style: none;
  animation: brandsRoll 46s linear infinite;
  animation-play-state: paused;
}
.brands-marq.run .brands-track { animation-play-state: running; }
.brands-marq:hover .brands-track { animation-play-state: paused; }
.brands-track li {
  flex: none;
  display: flex;
  align-items: center;
}
.brands-track img {
  height: 34px;
  width: auto;
  opacity: .95;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.2));
}
.brands-track span {
  font-family: "Saira Semi Condensed",sans-serif;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 1.25rem;
  white-space: nowrap;
  color: #e9eef6;
  display: inline-flex;
  align-items: center;
}
.brands-track span::before {
  margin-right: 14px;
  color: var(--accent);
  font-style: normal;
  text-shadow: 0 0 10px rgba(255,255,255,.45);
  content: none;
}
@keyframes brandsRoll {
  to { transform:translateX(-100%) }
}
@media (max-width:760px) {
  .brands-track {
    gap: 36px;
    padding-right: 36px;
  }
  .brands-track img { height: 26px; }
  .brands-track span { font-size: 1rem; }
}
.pkd-ic .st, .br-ic .st {
  fill: #f1f3f6;
  stroke: none;
}
.br-ic {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-right: 12px;
  border-radius: 10px;
  color: #fff;
  background: radial-gradient(circle at 30% 25%,#5b616c,#22262d 75%);
  box-shadow: 0 0 0 3px rgba(255,255,255,.09),0 6px 16px rgba(255,255,255,.18);
}
.br-ic svg {
  width: 21px;
  height: 21px;
}
@media (max-width:760px) {
  .br-ic {
    width: 30px;
    height: 30px;
    margin-right: 9px;
    border-radius: 9px;
  }
  .br-ic svg {
    width: 18px;
    height: 18px;
  }
}

/* ---------------------------------------------------------------------------
   2. Buttons, chips and icons
   Every button is .btn plus .btn-chrome (silver) or .btn-ghost (outline). .bi / .ico are the
   small phone, WhatsApp and platform icons used inside buttons and links.
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  font-family: "Saira Semi Condensed",sans-serif;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .9rem;
  transition: transform .12s ease,filter .12s ease;
}
.btn-chrome {
  color: #0a0b0e;
  background: linear-gradient(180deg,#ffffff 0%,#f1f4f8 46%,#cfd6e1 50%,#ffffff 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.8) inset,0 0 0 1px rgba(255,255,255,.33),0 8px 28px rgba(255,255,255,.2);
  isolation: isolate;
}
.btn-ghost {
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  border-color: rgba(255,255,255,.81);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 18px rgba(255,255,255,.11);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* Light sweep across silver buttons. z-index -1 plus isolation on .btn-chrome keeps it */
/* behind the label text. */
.btn-chrome::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,transparent 35%,rgba(255,255,255,.9) 50%,transparent 65%);
  transform: translateX(-120%);
  z-index: -1;
}
.motion .btn-chrome:hover::after {
  transition: transform .7s;
  transform: translateX(120%);
}
.motion .btn-chrome.shimmer::after { animation: shim 3.2s ease-in-out infinite; }
@keyframes shim {
  0%,60% { transform:translateX(-120%) }
  100% { transform:translateX(120%) }
}
.btn-chrome:hover { box-shadow: 0 0 0 1px #fff inset,0 0 0 1px rgba(255,255,255,.85),0 12px 44px rgba(255,255,255,.29); }
.btn-ghost:hover {
  background: rgba(255,255,255,.1);
  border-color: var(--accent);
}
.ico {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  vertical-align: -.15em;
  margin-right: 6px;
}
.bi {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  vertical-align: -.2em;
  margin-right: 8px;
  fill: currentColor;
}
.bi-wa { color: #25d366; }
.btn .bi { margin-right: 2px; }
.btn-read {
  font-size: 1rem;
  letter-spacing: .05em;
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.85);
}
.btn:active {
  transform: scale(.97);
  filter: brightness(1.1);
}
@media (max-width:760px) {
  .pkd-btns .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------------
   3. Concept bar and skip link
   The "Concept preview" strip at the very top, and the keyboard "Skip to booking" link.
   --------------------------------------------------------------------------- */
.concept {
  background: #11161f;
  border-bottom: 1px solid var(--line);
  font-size: .8rem;
  color: var(--muted);
  text-align: center;
  padding: 8px 16px;
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.concept button {
  background: none;
  border: 1px solid var(--line);
  color: var(--text);
  padding: 4px 10px;
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
}
@media (max-width:600px) {
  .concept {
    font-size: .7rem;
    padding: 6px 12px;
  }
}
.concept strong { font-family: "Saira Semi Condensed",sans-serif; }
.skip {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 10px;
  background: #fff;
  color: #0a0b0e;
  font-weight: 700;
  text-decoration: none;
  transition: top .2s;
}
.skip:focus { top: 12px; }
/* Landscape phones: more room for content. */
@media (max-height:480px) and (orientation:landscape) {
  .concept { display: none !important; }
}

/* ---------------------------------------------------------------------------
   4. Header, nav and burger menu
   Sticky header (logo, links, Book now), the scroll-progress line, the current-section underline,
   and the full-screen phone menu (#mnav). Menu text lives in index.html.
   --------------------------------------------------------------------------- */
nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(8,9,12,.72);
  border-bottom: 1px solid rgba(255,255,255,.06);
  border-bottom-color: rgba(255,255,255,.07);
}
nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
nav .brand img {
  height: 44px;
  width: auto;
}
nav ul {
  display: flex;
  gap: 28px;
  list-style: none;
  font-size: .85rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .14em;
}
nav ul a {
  text-decoration: none;
  color: var(--muted);
  transition: color .2s;
}
nav ul a:hover { color: var(--text); }
@media (max-width:860px) {
  nav ul { display: none; }
}
.sprog {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
}
.sprog i {
  display: block;
  height: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--p,0));
  background: linear-gradient(90deg,var(--accent),#fff);
  box-shadow: 0 0 12px rgba(255,255,255,.45);
}
nav ul, .mnav a { font-family: "Saira Semi Condensed",sans-serif; }
.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.burger {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.27);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.burger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform .35s,opacity .25s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mnav {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.09),transparent 60%),#06070a;
  overflow-y: auto;
  align-items: safe center;
  overscroll-behavior: contain;
}
.mnav[hidden] { display: none; }
.mnav.open { opacity: 1; }
.mnav-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 100px 20px 40px;
  text-align: center;
}
.mnav-inner>a {
  font-family: "Saira Semi Condensed",sans-serif;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(1.8rem,8vw,2.6rem);
  line-height: 1.15;
  text-decoration: none;
  color: #fff;
  padding: 4px 10px;
  transform: translateY(16px);
  opacity: 0;
  position: relative;
  border-radius: 14px;
  transition: transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s,color .15s,background .15s,text-shadow .15s;
}
.mnav.open .mnav-inner>a {
  transform: none;
  opacity: 1;
}
.mnav.open .mnav-inner>a:nth-child(2) { transition-delay: .04s; }
.mnav.open .mnav-inner>a:nth-child(3) { transition-delay: .08s; }
.mnav.open .mnav-inner>a:nth-child(4) { transition-delay: .12s; }
.mnav.open .mnav-inner>a:nth-child(5) { transition-delay: .16s; }
.mnav.open .mnav-inner>a:nth-child(6) { transition-delay: .2s; }
.mnav.open .mnav-inner>a:nth-child(7) { transition-delay: .24s; }
.mnav-inner>a.mnav-book {
  margin-top: 14px;
  background: linear-gradient(180deg,#fff,#c9ced8 50%,#9aa2ae 51%,#e9ecf1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mnav-soc {
  display: flex;
  gap: 14px;
  margin-top: 18px;
}
.mnav-soc a {
  font-family: "Saira Semi Condensed";
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .85rem;
  text-decoration: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--accent);
  border: 1px solid rgba(255,255,255,.33);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 14px rgba(255,255,255,.09);
  transition: background .15s,color .15s;
}
body.menu-open { overflow: hidden; }
@media (max-width:860px) {
  .burger { display: flex; }
}
.mnav-inner>a.tap, .mnav-inner>a:active {
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent);
  background: rgba(255,255,255,.07);
  text-shadow: 0 0 22px rgba(255,255,255,.38);
}
.mnav-soc a.tap, .mnav-soc a:active {
  background: var(--solid);
  color: #fff;
}
nav ul a.on { color: #fff; }
.nav-ind {
  position: absolute;
  bottom: -8px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,#fff,var(--accent));
  box-shadow: 0 0 10px rgba(255,255,255,.45);
  opacity: 0;
  transition: left .45s cubic-bezier(.2,.9,.3,1.1),width .45s cubic-bezier(.2,.9,.3,1.1),opacity .3s;
  pointer-events: none;
}
html.at-hero nav {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(8,9,12,.86);
}
.mnav-contact {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
  justify-content: center;
}
.mnav-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 10px;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  font-family: "Saira Semi Condensed",sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
  font-size: 1rem;
  border: 1px solid rgba(255,255,255,.33);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 14px rgba(255,255,255,.09);
  transition: transform .12s ease,filter .12s ease;
}
.mnav-pill svg {
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 50%;
  background: var(--solid);
  color: #fff;
}
.mnav-pill.wa svg { background: #25d366; }
.mnav-pill.tap, .mnav-pill:active {
  background: rgba(255,255,255,.14);
  color: var(--accent);
}
.mnav-soc a svg {
  width: 22px;
  height: 22px;
}
.mnav-hours {
  margin-top: 12px;
  max-width: 300px;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.45;
  text-align: center;
}
@media (max-height:780px) {
  .mnav-inner {
    padding-top: 84px;
    padding-bottom: 24px;
    gap: 2px;
  }
  .mnav-inner>a { font-size: clamp(1.55rem,7vw,2.2rem); }
  .mnav-inner>a.mnav-book { margin-top: 8px; }
  .mnav-contact { margin-top: 14px; }
  .mnav-soc { margin-top: 12px; }
  .mnav-hours { margin-top: 8px; }
}
@media (max-height:600px) {
  .mnav-inner { padding-top: 70px; }
  .mnav-inner>a {
    font-size: 1.45rem;
    line-height: 1.1;
  }
}
body.menu-open nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
body.menu-open .concept, body.menu-open .mbar { display: none; }
.mnav-inner { padding-top: 110px; }
@media (max-height:780px) {
  .mnav-inner { padding-top: 90px; }
}
@media (max-height:600px) {
  .mnav-inner { padding-top: 82px; }
}
.mnav-inner>a.mnav-book {
  background: linear-gradient(180deg,#fff 0%,#eef1f6 48%,#c9d0db 52%,#f7f9fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-logo {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.brand-logo img { display: block; }
.brand-logo .spark {
  width: 9%;
  display: block;
}
.brand-logo .bs2 { width: 8.5%; }
.brand-logo .spark svg { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px rgba(255,255,255,.45)); }
.motion .brand-logo .bs2 { animation-delay: 1.3s; }
nav .btn { white-space: nowrap; }
/* Lets the header slide out of the way while the founder video is in its spotlight (phones). */
nav[aria-label="Main"] {
  transition: translate .35s ease;
}
@media (max-width:760px) {
  body:has(.meet-media.spot-on) nav[aria-label="Main"] { translate: 0 -110%; }
}
.mnav-pill:active {
  transform: scale(.97);
  filter: brightness(1.1);
}
@media (max-width:760px) {
  body.menu-open .totop, body:has(.meet-media.spot-on) .totop { display: none; }
}

/* ---------------------------------------------------------------------------
   5. Hero
   Background photo/video, studio light sweep, logo shine and sparkles, headline, buttons and the
   Google/Facebook proof strip. The still photo is assets/img/x3-front.jpg (also preloaded in <head>).
   --------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: calc(100vh - 110px);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute;
  inset: -5%;
  background: url("../assets/img/x3-front.jpg") center 62%/cover;
  z-index: -3;
  filter: saturate(.95) brightness(.78);
}
/* phones (portrait): start on the tall video still, the same image the hero video opens on */
@media (max-aspect-ratio: 4/5) {
  .hero-bg { background-image: url("../assets/img/hero-tall.jpg"); }
}
.motion .hero-bg { animation: kenburns 22s ease-in-out infinite alternate; }
@keyframes kenburns {
  to { transform:scale(1.08) translate(-1.5%,-1%) }
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(ellipse at 50% 42%,rgba(8,9,12,.35) 0%,rgba(8,9,12,.45) 55%,var(--bg) 100%),linear-gradient(180deg,rgba(8,9,12,.15),var(--bg) 97%);
}
#droplets {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero-inner {
  text-align: center;
  padding: 60px 20px 90px;
  max-width: 900px;
}
.logo-stage {
  position: relative;
  width: min(560px,86vw);
  margin: 0 auto 26px;
  transform-style: preserve-3d;
  will-change: transform;
}
.logo-stage img {
  width: 100%;
  filter: drop-shadow(0 20px 50px rgba(0,0,0,.8)) drop-shadow(0 0 30px rgba(255,255,255,.05));
}
.logo-shine {
  position: absolute;
  inset: 0;
  -webkit-mask: url("../assets/tjs-logo.webp?v=17") center/100% 100% no-repeat;
  mask: url("../assets/tjs-logo.webp?v=17") center/100% 100% no-repeat;
  background-size: 250% 100%;
  background-position: 150% 0;
  background: none;
  mix-blend-mode: normal;
  overflow: hidden;
}
.motion .logo-shine { animation: none; }
.spark {
  position: absolute;
  width: 9%;
  aspect-ratio: 24/30;
  height: auto;
  transform: translate(-50%,-50%);
  pointer-events: none;
}
.spark svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 16px rgba(255,255,255,.45)) drop-shadow(0 0 30px rgba(255,255,255,.23));
}
.motion .spark { animation: twinkle 2.6s ease-in-out infinite; }
.spark.s2 {
  animation-delay: 1.3s !important;
  width: 8.5%;
}
@keyframes twinkle {
  0%,100% { opacity:.6; transform:translate(-50%,-50%) scale(.85) }
  50% { opacity:1; transform:translate(-50%,-50%) scale(1.3) }
}
.hero h1 {
  font-size: clamp(2.4rem,6vw,4.6rem);
  overflow-wrap: anywhere;
}
.hero p.lead {
  color: var(--muted);
  font-size: clamp(1rem,2vw,1.2rem);
  max-width: 640px;
  margin: 18px auto 34px;
}
.hero .ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.scroll-cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 14px;
}
.scroll-cue::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: #fff;
}
.motion .scroll-cue::after { animation: cue 1.8s infinite; }
@keyframes cue {
  to { transform:translateY(14px); opacity:0 }
}
.spark-field {
  position: relative;
  width: min(640px,90vw);
  height: 90px;
  margin: -6px auto 0;
}
.spark-field::before, .spark-field::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  height: 2px;
  border-radius: 2px;
}
.spark-field::before {
  width: 80%;
  background: linear-gradient(90deg,transparent,var(--accent),transparent);
  filter: blur(2px);
}
.spark-field::after {
  width: 40%;
  background: linear-gradient(90deg,transparent,#fff,transparent);
}
.lstar {
  position: absolute;
  width: var(--s);
  height: calc(var(--s)*1.25);
  transform: translate(-50%,-50%);
  opacity: .75;
  pointer-events: none;
}
.lstar svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px rgba(255,255,255,.45));
}
.motion .lstar { animation: lstar var(--d) ease-in-out var(--dl) infinite; }
@keyframes lstar {
  0%,100% { opacity:.15; transform:translate(-50%,-50%) scale(.45) rotate(0deg) }
  50% { opacity:1; transform:translate(-50%,-50%) scale(1) rotate(15deg) }
}
.lstar.burst { animation: lburst 1.4s cubic-bezier(.2,.7,.2,1) forwards !important; }
@keyframes lburst {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.2) }
  25% { opacity:1; transform:translate(calc(-50% + var(--bx)*.4),calc(-50% + var(--by)*.4)) scale(1) rotate(20deg) }
  100% { opacity:0; transform:translate(calc(-50% + var(--bx)),calc(-50% + var(--by))) scale(.3) rotate(60deg) }
}
.sweep {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-size: 320% 100%;
  background-position: 120% 0;
  opacity: 0;
  background: none;
  mix-blend-mode: normal;
  overflow: hidden;
}
.motion .sweep {
  animation: none;
  opacity: 1;
}
.hero-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.hero-bg video.on { opacity: 1; }
.hero h1, .hero .lead { text-shadow: 0 4px 30px rgba(0,0,0,.7); }
.logo-stage .spark { translate: none; }
@media (max-width:600px) {
  .hero-inner { padding: 26px 16px 50px; }
  .logo-stage {
    width: min(560px,68vw);
    margin-bottom: 12px;
  }
  .hero h1 { font-size: clamp(1.75rem,8vw,2.6rem); }
  .spark-field { height: 46px; }
  .hero p.lead {
    font-size: .95rem;
    margin: 8px auto 20px;
  }
  .scroll-cue { display: none; }
}
/* Once the hero video plays: no zoom or filter on top of a playing video (that made it */
/* judder) - a plain dark layer (::after) instead. */
.hero-bg.has-vid {
  animation: none !important;
  filter: none;
  background-position: center;
  background-size: cover;
}
.hero-bg.has-vid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6,7,10,.26);
  pointer-events: none;
}
.proof {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 22px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8,9,12,.45);
  backdrop-filter: blur(8px);
  color: #cfd6e0;
  font-size: .85rem;
  text-decoration: none;
  transition: border-color .3s;
  gap: 8px 18px;
}
.proof:hover { border-color: rgba(255,255,255,.57); }
.proof b { color: #fff; }
.proof-stars {
  color: #ffd54a;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(255,213,74,.4);
}
@media (max-width:520px) {
  .proof {
    font-size: .78rem;
    padding: 8px 12px;
    border-radius: 16px;
  }
}
/* Studio light sweep: a transformed layer (cheap to animate) instead of animating a */
/* background position (repaints every frame). */
.sweep::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 80%;
  background: linear-gradient(105deg,transparent 0%,rgba(255,255,255,.05) 30%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.05) 70%,transparent 100%);
  transform: translateX(-110%);
  will-change: transform;
}
.motion .sweep::before { animation: sweepT 7.5s cubic-bezier(.45,0,.2,1) 2.4s infinite; }
@keyframes sweepT {
  0% { transform:translateX(-110%) }
  55%,100% { transform:translateX(135%) }
}
/* Logo shine, same transform-only technique as the hero sweep. */
.logo-shine::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  background: linear-gradient(105deg,transparent 0%,rgba(255,255,255,.95) 50%,transparent 100%);
  transform: translateX(-110%);
  will-change: transform;
}
.motion .logo-shine::before { animation: shineT 4.5s ease-in-out 1.2s infinite; }
@keyframes shineT {
  0% { transform:translateX(-110%) }
  45%,100% { transform:translateX(210%) }
}
.hero .proof {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(8,9,12,.62);
}
.hero .btn-ghost {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,.07)),rgba(6,8,12,.35);
}
.hero .lead, .hero .ctas, .hero .proof {
  position: relative;
  z-index: 2;
}
.pitem {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.pi {
  width: 18px;
  height: 18px;
  flex: none;
}
.pi-van {
  color: var(--accent);
  width: 20px;
  height: 20px;
}
@media (max-width:600px) {
  .proof {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding: 10px 16px;
  }
  .pi {
    width: 17px;
    height: 17px;
  }
}
@media (max-width:760px) {
  .spark-field { margin-top: 14px; }
}
@media (min-width:761px) and (max-height:1000px) {
  .logo-stage { width: min(560px,86vw,40vh); }
  .hero h1 { font-size: clamp(2.2rem,min(5.5vw,6.6vh),4.6rem); }
  .hero p.lead { margin: 12px auto 22px; }
  .hero-inner {
    padding-top: 36px;
    padding-bottom: 60px;
  }
  .proof { margin-top: 16px; }
}
@media (max-width:360px) {
  .hero h1 { font-size: min(2.2rem,8.6vw); }
}
@media (max-width:600px) {
  .pitem { white-space: normal; }
}
.hero h1 .chrome-text {
  background: linear-gradient(180deg,#ffffff 0%,#eef1f6 30%,#a7b0bd 49%,#4e5763 52%,#cfd5de 78%,#ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.hero h1 {
  text-shadow: none;
  filter: drop-shadow(1px 1px 0 #313131) drop-shadow(1px 1px 0 #2c2c2c) drop-shadow(1px 1px 0 #242424) drop-shadow(1px 1px 0 #1c1c1c) drop-shadow(3px 6px 16px rgba(0,0,0,.55));
}

/* ---------------------------------------------------------------------------
   6. Meet Lewis (founder video)
   The portrait intro video with its sound, play/pause and full-screen buttons, the spotlight that
   dims the page around it, and the "new unit" card.
   --------------------------------------------------------------------------- */
.meet {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width:860px) {
  .meet {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
.meet-media {
  position: relative;
  width: min(360px,100%);
  margin: 0 auto;
}
.meet-vid {
  position: relative;
  aspect-ratio: 9/16;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 40px 80px rgba(0,0,0,.5),0 0 60px rgba(255,255,255,.05);
  background: #000;
}
.meet-vid video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}
.snd-cta {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-family: "Saira Semi Condensed",sans-serif;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 1rem;
  transition: opacity .35s,transform .35s;
  color: #fff;
  background: linear-gradient(180deg,#4a505b,var(--solid));
  box-shadow: 0 0 0 2px rgba(255,255,255,.81),0 10px 30px rgba(255,255,255,.25);
  padding: 10px 22px 10px 10px;
}
.snd-cta span:not(.snd-ring) {
  font-size: 1.2rem;
  font-style: normal;
}
.snd-ring {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(255,255,255,.32);
  animation: sndPulse 1.8s ease-out infinite;
  pointer-events: none;
}
@keyframes sndPulse {
  0% { box-shadow:0 0 0 0 rgba(255,255,255,.32) }
  100% { box-shadow:0 0 0 22px rgba(255,255,255,0) }
}
.snd-cta.gone {
  opacity: 0;
  transform: translate(-50%,-50%) scale(.9);
  pointer-events: none;
  visibility: hidden;
  transition: opacity .3s,transform .3s,visibility 0s .3s;
}
/* Visitors who asked for less motion. */
@media (prefers-reduced-motion:reduce) {
  .snd-ring { animation: none; }
}
/* Founder spotlight: the dark layer behind the video (z-index 38, under the header at 50). */
/* js/founder-video.js only keeps it visible while the video is on screen, so it can never */
/* be left covering the hero after a fast scroll. */
.spot-back {
  position: fixed;
  inset: 0;
  z-index: 38;
  background: radial-gradient(ellipse at 50% 50%,rgba(4,5,8,.55),rgba(4,5,8,.92) 70%);
  opacity: 0;
  pointer-events: none;
}
/* Keeps the founder video and its text above the spotlight layer. */
#lewis .meet>* {
  position: relative;
  z-index: 39;
}
.meet-media.spot-on .meet-vid {
  box-shadow: 0 40px 90px rgba(0,0,0,.6),0 0 80px rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.3);
}
.fs-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 9;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: background .2s,border-color .2s;
}
.fs-btn:hover {
  border-color: var(--accent);
  background: #3b4049;
}
.fs-btn svg {
  width: 20px;
  height: 20px;
}
.fs-lbl { display: none; }
/* Full screen: always fit the whole portrait clip on screen (black side bars on wide monitors). */
.meet-vid.is-fs {
  background: #000;
  display: grid;
  place-items: center;
  border-radius: 0;
  aspect-ratio: auto !important;
  max-width: none !important;
  max-height: none !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  transform: none !important;
}
.meet-vid.is-fs video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100vh !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  transform: none !important;
}
.meet-vid.is-fs .fs-btn {
  width: auto;
  height: 48px;
  padding: 0 18px 0 14px;
  gap: 10px;
  display: flex;
  align-items: center;
  border-radius: 999px;
  top: max(16px,env(safe-area-inset-top));
  right: 16px;
  font: 700 1rem "Saira Semi Condensed",sans-serif;
  letter-spacing: .04em;
  background: var(--solid) !important;
  border-color: #e9ecf1 !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.57),0 6px 20px rgba(255,255,255,.27);
}
.meet-vid.is-fs .fs-lbl { display: inline; }
.meet-vid.is-fs .fs-btn svg path { d: path("M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5"); }
.meet-vid.is-fs .snd-cta { display: none; }
.pp-btn {
  position: absolute;
  z-index: 9;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  color: #fff;
  font: inherit;
}
.pp-btn svg {
  width: 20px;
  height: 20px;
}
.pp-play, .pp-lbl { display: none; }
.meet-vid .pp-btn {
  right: 12px;
  top: 64px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.34);
  box-shadow: 0 0 0 1px rgba(255,255,255,.66),0 6px 18px rgba(255,255,255,.2);
  opacity: 0;
  transition: opacity .25s;
}
.meet-vid.is-playing .pp-btn, .meet-vid:hover .pp-btn, .meet-vid .pp-btn:focus-visible {
  opacity: 1;
}
.meet-vid.is-paused .pp-btn {
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%,-50%);
  width: auto;
  height: auto;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 24px;
  background: rgba(8,12,22,.55);
  box-shadow: none;
  opacity: 1;
}
.meet-vid.is-paused .pp-pause { display: none; }
.meet-vid.is-paused .pp-play {
  display: block;
  width: 34px;
  height: 34px;
  padding: 18px;
  box-sizing: content-box;
  border-radius: 50%;
  background: var(--solid);
  box-shadow: 0 0 0 6px rgba(255,255,255,.15),0 0 30px rgba(255,255,255,.32);
}
.meet-vid.is-paused .pp-lbl {
  display: block;
  font-family: "Saira Semi Condensed",sans-serif;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .85rem;
  color: #fff;
  white-space: nowrap;
}
.meet-vid.is-paused::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.7);
  pointer-events: none;
  z-index: 4;
}
.meet-vid.is-paused .snd-cta { display: none; }
.motion .meet-vid.is-paused .pp-play { animation: ppPulse 1.8s ease-in-out infinite; }
@keyframes ppPulse {
  50% { box-shadow:0 0 0 12px rgba(255,255,255,.07),0 0 40px rgba(255,255,255,.36) }
}
@media (min-width:861px) {
  .meet-media { width: min(360px,100%,calc((100vh - 170px)*9/16)); }
}
.meet-vid.is-fs .pp-btn:not(.is-paused .pp-btn) {
  top: calc(max(16px,env(safe-area-inset-top)) + 62px);
  right: 16px;
}
.meet-vid.is-fs:not(.is-paused) .pp-btn {
  top: calc(max(16px,env(safe-area-inset-top)) + 62px);
  right: 16px;
  bottom: auto;
}
.snd-cta:hover { background: linear-gradient(180deg,#5d6470,#3b4049); }
.snd-cta .snd-ic {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: #0a0d14;
  color: #fff;
  box-shadow: 0 0 0 2px #e9ecf1;
}
.snd-cta .snd-ic svg {
  width: 20px;
  height: 20px;
}

/* ---------------------------------------------------------------------------
   7. Packages
   The giant 3D PACKAGES word and the four package cards (video behind each). Package names, text and
   prices are in index.html (.pk-title, .pk-body, .size-grid); the booking price list is P in js/booking.js.
   --------------------------------------------------------------------------- */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  gap: 20px;
}
.pk-row {
  display: flex;
  gap: 14px;
  height: min(600px,74vh);
}
.pk {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: pointer;
  background: #0b0d11;
  transition: flex .8s cubic-bezier(.2,.8,.2,1),border-color .4s;
  outline: none;
}
.pk.active {
  flex: 3.4;
  border-color: rgba(255,255,255,.27);
  cursor: default;
}
.pk:focus-visible { box-shadow: 0 0 0 2px #fff; }
.pk video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.75) brightness(.5);
  transform: scale(1.08);
  transition: filter .8s,transform 1.4s cubic-bezier(.2,.8,.2,1);
}
.pk.active video {
  filter: saturate(1) brightness(.62);
  transform: scale(1);
}
.pk-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(8,9,12,.15) 0%,rgba(8,9,12,.25) 45%,rgba(8,9,12,.92) 100%);
}
.pk-num {
  position: absolute;
  top: 18px;
  left: 20px;
  font-family: "Saira Semi Condensed";
  font-weight: 800;
  font-size: 3.4rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.55);
}
.pk-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px;
}
.pk-title {
  font-family: "Saira Semi Condensed";
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.5rem,2.4vw,2.6rem);
  line-height: 1;
  letter-spacing: .01em;
  transition: font-size .6s;
}
.pk:not(.active) .pk-title { font-size: 1.35rem; }
.pk-body {
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(16px);
  transition: grid-template-rows .7s cubic-bezier(.2,.8,.2,1),opacity .5s .1s,transform .6s .1s;
  display: block;
  max-height: 0;
  overflow: hidden;
}
.pk-body>*:first-child { overflow: hidden; }
.pk.active .pk-body {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: none;
  max-height: 320px;
}
.pk-body p {
  color: #c9cfd8;
  margin: 12px 0 16px;
  max-width: 520px;
}
.pk-price {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
}
@media (max-width:860px) {
  .pk-row {
    flex-direction: column;
    height: auto;
  }
  .pk {
    flex: none;
    height: 120px;
    transition: height .7s cubic-bezier(.2,.8,.2,1),border-color .4s;
  }
  .pk.active {
    flex: none;
    height: 460px;
  }
  .pk-num {
    font-size: 2.4rem;
    top: 14px;
  }
}
.pk.active { box-shadow: 0 0 0 1px rgba(255,255,255,.3),0 30px 80px rgba(255,255,255,.1); }
.big3d-wrap {
  perspective: 900px;
  margin-bottom: 34px;
  text-align: center;
  position: relative;
}
.big3d {
  position: relative;
  display: inline-block;
  font-family: "Saira Semi Condensed",sans-serif;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: -.01em;
  transform-origin: 50% 100%;
  font-size: clamp(2.6rem,13vw,11rem);
}
.b3-front {
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(180deg,#ffffff 0%,#eef1f6 30%,#a7b0bd 49%,#4e5763 52%,#cfd5de 78%,#ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.b3-back {
  display: block;
  color: #1a1a1a;
  text-shadow: 1px 1px 0 #313131,2px 2px 0 #313131,3px 3px 0 #2c2c2c,4px 4px 0 #282828,5px 5px 0 #242424,6px 6px 0 #202020,7px 7px 0 #1c1c1c,8px 8px 0 #181818,10px 12px 30px rgba(255,255,255,.2),0 30px 60px rgba(0,0,0,.6);
}
.big3d::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -14px;
  height: 2px;
  background: linear-gradient(90deg,transparent,var(--accent),#fff,var(--accent),transparent);
  box-shadow: 0 0 20px rgba(255,255,255,.45);
}
.big3d-sub {
  margin-top: 26px;
  color: var(--muted);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .78rem;
  font-weight: 600;
}
.b3-front, .b3-back { padding-right: .14em; }
.pk-price, .big3d-sub { font-family: "Saira Semi Condensed",sans-serif; }
@media (min-width:861px) {
  .pk-hint-m { display: none; }
  .pk-row {
    display: grid;
    height: auto;
    align-items: stretch;
    grid-template-columns: repeat(7,minmax(0,1fr));
    gap: 14px;
  }
  .pk, .pk.active {
    flex: none;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    cursor: default;
    border-color: var(--line);
    box-shadow: none;
    transition: border-color .35s,box-shadow .35s,transform .25s ease-out;
    min-height: 520px;
  }
  .pk video, .pk.active video {
    filter: saturate(.85) brightness(.5);
    transform: scale(1.04);
  }
  .pk:hover {
    border-color: rgba(255,255,255,.57);
    box-shadow: 0 0 0 1px rgba(255,255,255,.24),0 26px 70px rgba(255,255,255,.11);
  }
  .pk:hover video {
    filter: saturate(1) brightness(.62);
    transform: scale(1);
  }
  .pk-shade { background: linear-gradient(180deg,rgba(8,9,12,.05) 0%,rgba(8,9,12,.35) 38%,rgba(8,9,12,.95) 72%); }
  .pk-content {
    position: relative;
    padding: 22px 20px 22px;
  }
  .pk-title, .pk:not(.active) .pk-title { font-size: clamp(1.35rem,1.75vw,1.8rem); }
  .pk-body, .pk.active .pk-body {
    display: block;
    max-height: none;
    opacity: 1;
    transform: none;
    overflow: visible;
  }
  .pk-body p {
    margin: 10px 0 14px;
    font-size: .92rem;
  }
  .pk-price { margin-bottom: 16px; }
  .pk .btn {
    width: 100%;
    justify-content: center;
  }
  .pk-num { font-size: 2.8rem; }
}
.pk-help {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 22px;
  text-align: center;
  color: var(--muted);
}
@media (min-width:861px) {
  .pk:focus-visible, .pk.active:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff,0 26px 70px rgba(255,255,255,.11);
  }
}
#packages .pk:nth-child(5) .pk-shade { background: linear-gradient(180deg,rgba(8,9,12,.15) 0%,rgba(8,9,12,.3) 40%,rgba(8,9,12,.97) 78%); }
.pk-help-btns {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  justify-content: center;
}
.pk-help-btns .sh { display: none; }
@media (max-width:480px) {
  .pk-help-btns { width: 100%; }
  .pk-help-btns .btn {
    flex: 1 1 0;
    justify-content: center;
    padding-left: 12px;
    padding-right: 12px;
  }
  .pk-help-btns .lg { display: none; }
  .pk-help-btns .sh { display: inline; }
}
.pk-from {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: "Saira Semi Condensed",sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: 1.7rem;
  color: #fff;
}
.pk-from small {
  font-size: .72rem;
  font-style: normal;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.pk-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pk-btns .btn {
  padding: 10px 16px;
  font-size: .85rem;
}
.pk.sel { border-color: rgba(255,255,255,.71); }
@media (min-width:861px) {
  .pk-btns { flex-direction: column; }
  .pk.sel { box-shadow: 0 0 0 2px #fff,0 26px 70px rgba(255,255,255,.14); }
}
@media (min-width:861px) and (max-width:1180px) {
  .pk-row { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
/* Seven cards in one row on wide screens: slightly tighter text so titles and buttons stay on their lines. */
@media (min-width:1181px) {
  .pk-content { padding: 22px 14px; }
  .pk-title, .pk:not(.active) .pk-title { font-size: clamp(1.1rem,1.3vw,1.4rem); }
  .pk-btns .btn { padding-left: 8px; padding-right: 8px; font-size: .78rem; letter-spacing: .03em; }
}
.pk-row>.pkd { margin-top: 0; }

/* ---------------------------------------------------------------------------
   8. Reviews
   Auto-scrolling review strip (cards are built from TJS_REVIEWS in js/reviews.js), the Google /
   Facebook summary badges and the "Had a detail with TJS?" card.
   --------------------------------------------------------------------------- */
.rq {
  margin: 0;
  padding: 30px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: radial-gradient(ellipse at 0% 0%,rgba(255,255,255,.05),transparent 60%),var(--bg-2);
}
.rq-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.rq-src {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
}
.rq-src.g {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.3);
}
.rq-src.f {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.3);
}
.rq-stars {
  color: #ffd54a;
  letter-spacing: 3px;
  text-shadow: 0 0 12px rgba(255,213,74,.45);
}
.rq-rec {
  font-size: .8rem;
  color: var(--accent);
  font-weight: 600;
}
.rq blockquote {
  font-size: 1.15rem;
  line-height: 1.5;
  color: #e9edf3;
}
.rq figcaption {
  margin-top: 16px;
  color: var(--muted);
  font-size: .85rem;
}
.rq-src, .rq-rec { font-family: "Saira Semi Condensed",sans-serif; }
.rvw-wrap { position: relative; }
.rvw-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 6px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.rvw-track::-webkit-scrollbar { display: none; }
.rvw-track .rq {
  flex: 0 0 calc(50% - 10px);
  scroll-snap-align: start;
}
@media (max-width:860px) {
  .rvw-track .rq { flex-basis: 88%; }
}
.rvw-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  margin: 14px 0 20px;
}
.rvw-nav .car-count { margin-right: auto; }
.rvw-track.rvw-loop {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grab;
  -webkit-mask: linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask: linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.rvw-track.dragging {
  cursor: grabbing;
  user-select: none;
}
.rvw-track.dragging .rq { pointer-events: none; }
@media (max-width:760px) {
  .rvw-track.rvw-loop {
    scroll-snap-type: x mandatory;
    -webkit-mask: none;
    mask: none;
  }
  .rvw-track .rq {
    flex-basis: 100%;
    scroll-snap-align: start;
    padding: 24px 22px;
  }
  .rvw-track .rq blockquote { font-size: 1.05rem; }
  .rvw-nav {
    justify-content: space-between;
    padding-bottom: 6px;
  }
}
/* Stars fill from left to right when .fill is added (animates the --f custom property). */
.motion .rq-stars {
  background: linear-gradient(90deg,#ffd54a 0 var(--f,0%),rgba(255,255,255,.18) var(--f,0%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  transition: --f 1.2s cubic-bezier(.3,.7,.2,1);
}
.motion .rq-stars.fill { --f: 100%; }
@property --f { syntax:'<percentage>'; inherits:false; initial-value:0% }
.rv-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 26px;
}
.rv-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 18px;
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--line);
  background: linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  transition: border-color .3s,transform .25s,box-shadow .3s;
}
.rv-badge:hover {
  border-color: rgba(255,255,255,.57);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(255,255,255,.09);
}
.rv-logo {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #fff;
}
.rv-logo svg {
  width: 30px;
  height: 30px;
}
.rv-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.rv-name {
  font-family: "Saira Semi Condensed",sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8rem;
  color: var(--muted);
}
.rv-stars {
  font-size: 1.35rem;
  letter-spacing: 2px;
  line-height: 1.1;
}
.rv-rec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
}
.rv-rec svg {
  width: 18px;
  height: 18px;
  color: #cfd6e1;
}
.rv-num {
  color: var(--muted);
  font-size: .9rem;
}
.rv-go {
  margin-left: auto;
  flex: none;
  font-family: "Saira Semi Condensed",sans-serif;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .85rem;
  color: var(--accent);
}
.rv-leave {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 22px 24px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.27);
  background: radial-gradient(ellipse at 0% 0%,rgba(255,255,255,.09),transparent 60%),rgba(15,17,22,.9);
}
.rv-leave-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rv-leave-stars {
  color: #ffd54a;
  letter-spacing: 3px;
  font-size: 1.1rem;
  text-shadow: 0 0 12px rgba(255,213,74,.45);
}
.rv-leave-txt span:last-child {
  color: var(--muted);
  font-size: .92rem;
}
.rv-leave-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.rv-btn-logo {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  margin-right: 2px;
}
.rv-btn-logo svg {
  width: 15px;
  height: 15px;
}
@media (max-width:760px) {
  .rv-summary { grid-template-columns: 1fr; }
  .rv-badge { padding: 14px 16px; }
  .rv-leave { padding: 18px; }
  .rv-leave-btns { width: 100%; }
  .rv-leave-btns .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}
.rvw-hold {
  display: none;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width:760px) {
  .rvw-hold { display: inline; }
}
.rvw-track.rvw-loop {
  overflow: hidden;
  scroll-snap-type: none;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}
.rvw-in {
  display: flex;
  gap: 20px;
  will-change: transform;
  position: relative;
  align-items: stretch;
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
}
.rvw-in .rq {
  flex: 0 0 calc(50% - 10px);
  scroll-snap-align: none;
  display: flex;
  flex-direction: column;
}
@media (max-width:860px) {
  .rvw-in .rq { flex-basis: 88%; }
}
@media (max-width:760px) {
  .rvw-in .rq { flex-basis: 100%; }
}
.rvw-in .rq .rq-more { align-self: flex-start; }
.rvw-in .rq figcaption {
  margin-top: auto;
  padding-top: 12px;
  font-size: .8rem;
}
.rvw-in .rq {
  flex: 0 0 calc(25% - 15px);
  padding: 22px 22px 20px;
}
.rvw-in .rq .rq-top { margin-bottom: 12px; }
/* Review cards show four lines; "Read more" (.rq.open) shows the rest. */
.rvw-in .rq blockquote {
  font-size: 1rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
.rvw-in .rq.open blockquote {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.rq-more {
  display: none;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  position: relative;
}
.rq.clamped .rq-more, .rq.open .rq-more { display: inline-block; }
@media (max-width:1100px) {
  .rvw-in .rq { flex-basis: calc(33.333% - 14px); }
}
@media (max-width:860px) {
  .rvw-in .rq { flex-basis: calc(50% - 10px); }
}
@media (max-width:760px) {
  .rvw-in .rq { flex-basis: 82%; }
  #reviews { padding-bottom: 110px; }
}
.rv-leave-btns .btn {
  padding: 14px 24px;
  font-size: 1rem;
  letter-spacing: .05em;
}
.rv-leave-btns .btn-ghost {
  color: #fff;
  background: rgba(255,255,255,.09);
}
/* 2. Buttons, chips and icons - kept here, it must stay below .rv-leave-btns .btn-ghost (same specificity, same property) */
.btn-read:hover { background: rgba(255,255,255,.16); }
.rq-more::after {
  content: "";
  position: absolute;
  inset: -12px -8px;
}
@media (max-width:360px) {
  .rv-badge {
    min-width: 0;
    flex-wrap: wrap;
  }
  .rv-summary { grid-template-columns: minmax(0,1fr); }
}
.rv-badge>* { min-width: 0; }

/* ---------------------------------------------------------------------------
   9. The work: reels and photos
   Reels / Photos tabs, filter chips (data-tags on each card), the reel grid with "Show all", and the
   photo grid. To add a reel or photo, see the notes at the top of js/reels.js and js/photos.js.
   --------------------------------------------------------------------------- */
.phone {
  justify-self: center;
  width: min(300px,72vw);
  aspect-ratio: 9/19.5;
  border-radius: 42px;
  padding: 10px;
  background: linear-gradient(160deg,#3a3f4a,#0d0f13 40%,#2a2e36);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset,0 50px 100px rgba(0,0,0,.6),0 0 60px rgba(255,255,255,.05);
}
.phone video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 33px;
  background: #000;
  display: block;
}
.reel {
  margin: 0;
  text-align: center;
  cursor: pointer;
}
.reel figcaption {
  margin-top: 14px;
  font-family: "Saira Semi Condensed";
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 250px;
  margin-left: auto;
  margin-right: auto;
  font-size: .95rem;
  line-height: 1.15;
  font-style: normal;
  text-transform: none;
  letter-spacing: .01em;
  font-weight: 600;
  color: #cfd6e0;
}
.phone.sm {
  width: min(250px,64vw);
  border-radius: 36px;
  padding: 8px;
}
.phone.sm video { border-radius: 28px; }
@media (max-width:860px) {
  .reel {
    scroll-snap-align: center;
    flex: none;
  }
}
.car-wrap { position: relative; }
.car-track {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 10px 4px 24px;
  scrollbar-width: none;
  -webkit-mask: linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask: linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  perspective: 1300px;
}
.car-track::-webkit-scrollbar { display: none; }
.car-track .reel {
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
  flex: initial;
  scroll-snap-align: none;
}
.car-track .reel:hover { transform: translateY(-6px); }
.car-nav {
  gap: 10px;
  justify-content: flex-end;
  margin-top: 6px;
  align-items: center;
  display: none !important;
}
.car-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  font-size: 1.4rem;
  cursor: pointer;
  transition: border-color .2s,opacity .2s;
}
.car-btn:hover { border-color: rgba(255,255,255,.57); }
.car-btn:disabled {
  opacity: .3;
  cursor: default;
}
#reels { background: radial-gradient(ellipse 70% 60% at 15% 0%,rgba(255,255,255,.06),transparent 70%),radial-gradient(ellipse 60% 50% at 95% 100%,rgba(255,255,255,.03),transparent 70%),var(--bg-2) !important; }
.reel .phone { position: relative; }
.reel-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .3s,transform .3s;
}
.reel-play svg {
  width: 24px;
  height: 24px;
  margin-left: 3px;
}
.reel:hover .reel-play, .reel:focus-visible .reel-play {
  opacity: 1;
  transform: none;
}
.reel-link {
  font-family: Inter,sans-serif;
  text-transform: none;
  letter-spacing: 0;
  font-size: .78rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  color: #fff !important;
  background: var(--solid);
  border: 0 !important;
  padding: 7px 14px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.66),0 4px 14px rgba(255,255,255,.2);
  text-decoration: none;
}
.reel-link:hover {
  color: #fff;
  background: #3b4049;
}
.reel figcaption, .car-btn, .reel-link { font-family: "Saira Semi Condensed",sans-serif; }
@media (max-width:760px) {
  .car-track {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
    overflow: visible;
    -webkit-mask: none;
    mask: none;
    perspective: none;
    padding: 4px 0;
  }
  .car-track .reel .phone {
    transform: none !important;
    width: 100%;
    border-radius: 22px;
    padding: 5px;
  }
  .car-track .reel .phone video { border-radius: 18px; }
  .car-track .reel figcaption {
    font-size: .78rem;
    max-width: none;
    margin-top: 8px;
  }
  .car-track .reel .reel-play {
    opacity: 1;
    transform: scale(.8);
  }
  .car-track .reel.more-hidden { display: none; }
  .car-nav { display: none; }
  .reels-more { display: flex !important; }
}
.reels-more {
  justify-content: center;
  display: flex !important;
  margin: 26px auto 0;
}
.car-count {
  margin-right: auto;
  font-family: "Saira Semi Condensed";
  font-weight: 700;
  font-style: italic;
  letter-spacing: .12em;
  color: var(--muted);
}
.car-count b { color: #fff; }
.reels-count {
  text-align: center;
  color: var(--muted);
  font-size: .8rem;
  margin-top: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  display: block;
}
@media (max-width:760px) {
  .reels-count { display: block; }
}
.car-track {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(190px,1fr));
  gap: 28px 20px;
  overflow: visible;
  scroll-snap-type: none;
  -webkit-mask: none;
  mask: none;
  perspective: none;
  padding: 6px 0;
}
/* transform:none !important switches off the old coverflow tilt that js/reels.js still sets */
/* inline (reelCoverflow) - the reels are a plain grid now. */
.car-track .reel .phone {
  transition: transform .25s ease-out;
  transform-style: preserve-3d;
  transform: none !important;
  width: 100%;
  border-radius: 24px;
  padding: 5px;
}
.car-track .reel .phone video { border-radius: 19px; }
.car-track .reel figcaption {
  font-size: .86rem;
  max-width: none;
  margin-top: 10px;
}
.car-track .reel.more-hidden { display: none; }
.car-track .reel.previewing .reel-play { opacity: 0; }
.reels-more[hidden] { display: none !important; }
@media (min-width:1200px) {
  .car-track { grid-template-columns: repeat(5,1fr); }
}
@media (max-width:760px) {
  .car-track {
    grid-template-columns: 1fr 1fr;
    gap: 16px 12px;
  }
  .car-track .reel figcaption {
    font-size: .78rem;
    margin-top: 8px;
  }
  .car-track .reel:hover { transform: none; }
}
.wk-tabs {
  position: relative;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 24px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
}
.wk-tabs button {
  position: relative;
  z-index: 1;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-family: "Saira Semi Condensed",sans-serif;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .9rem;
  transition: color .3s;
}
.wk-tabs button[aria-selected="true"] { color: #0a0b0e; }
.wk-tabs button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.wk-pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: 80px;
  border-radius: 999px;
  background: linear-gradient(180deg,#fff 0%,#f1f4f8 46%,#cfd6e1 50%,#fff 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.33),0 6px 20px rgba(255,255,255,.16);
  transition: left .45s cubic-bezier(.2,.9,.3,1.15),width .45s cubic-bezier(.2,.9,.3,1.15);
}
.ph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
  gap: 16px;
}
.phx {
  margin: 0;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 3/4;
  background: #0b0d11;
}
.ph-open {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.phx img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.phx:hover img { transform: scale(1.06); }
.phx figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 14px 12px;
  background: linear-gradient(transparent,rgba(0,0,0,.85));
  font-family: "Saira Semi Condensed",sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .9rem;
  pointer-events: none;
}
@media (max-width:760px) {
  .ph-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .phx figcaption {
    font-size: .75rem;
    padding: 20px 10px 8px;
  }
}
.reel-date {
  display: block;
  font-family: Inter,sans-serif;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--muted);
}
.rl-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: -8px 0 22px;
}
.rl-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-family: "Saira Semi Condensed",sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
  font-size: .88rem;
  cursor: pointer;
  transition: transform .12s ease,filter .12s ease;
}
.rl-chip span {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  font-size: .75rem;
  color: var(--muted);
  text-align: center;
}
.rl-chip:hover {
  color: #fff;
  border-color: rgba(255,255,255,.3);
}
.rl-chip[aria-pressed="true"] {
  color: #fff;
  border-color: rgba(255,255,255,.76);
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 18px rgba(255,255,255,.11);
}
.rl-chip[aria-pressed="true"] span {
  color: #0a0b0e;
  background: #fff;
}
.car-track .reel.flt-out { display: none !important; }
@keyframes fltIn {
  from { opacity:0; transform:translateY(14px) scale(.97) }
  to { opacity:1; transform:none }
}
.car-track .reel.flt-in { animation: fltIn .45s cubic-bezier(.2,.8,.2,1); }
@media (max-width:760px) {
  .rl-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    overflow: visible;
    margin-right: 0;
    padding-right: 0;
    -webkit-mask: none;
    mask: none;
  }
  .rl-filters::-webkit-scrollbar { display: none; }
  .rl-chip {
    flex: none;
    justify-content: space-between;
    width: 100%;
  }
}
/* Visitors who asked for less motion. */
@media (prefers-reduced-motion:reduce) {
  .car-track .reel.flt-in { animation: none; }
}
.rl-chip:active {
  transform: scale(.97);
  filter: brightness(1.1);
}
.reel-link svg { color: #fff; }
.ph-filters { margin-bottom: 18px; }
.ph-grid .phx[hidden] { display: none !important; }
.ph-grid .phx.flt-in { animation: fltIn .45s cubic-bezier(.2,.8,.2,1); }

/* ---------------------------------------------------------------------------
   10. Before / after slider
   Drag slider comparing two photos. Pairs come from TJS_BA in js/before-after.js.
   --------------------------------------------------------------------------- */
.ba-wrap {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 50px;
  align-items: center;
}
@media (max-width:900px) {
  .ba-wrap { grid-template-columns: 1fr; }
}
.ba {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
  box-shadow: 0 40px 80px rgba(0,0,0,.5);
}
.ba img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transition: opacity .22s;
}
.ba .before { clip-path: inset(0 calc(100% - var(--pos,50%)) 0 0); }
.ba .before img { filter: none; }
.ba .before::after {
  display: none;
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 40%,rgba(90,70,40,.35),transparent 40%),radial-gradient(circle at 70% 70%,rgba(70,60,40,.4),transparent 45%);
  mix-blend-mode: multiply;
}
.ba .handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos,50%);
  width: 2px;
  background: #fff;
  box-shadow: 0 0 20px rgba(255,255,255,.45);
}
.ba .handle::after {
  content: "\2194";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(180deg,#fff,#b9c0cc);
  color: #0a0b0e;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.ba .tag {
  position: absolute;
  top: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.6);
  font-size: .75rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 600;
  backdrop-filter: blur(6px);
}
.ba .tag.l { left: 16px; }
.ba .tag.r { right: 16px; }
.ba input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: ew-resize;
  width: 100%;
}
.note {
  font-size: .8rem;
  color: var(--muted);
  margin-top: 12px;
}
.ba-pager {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  font-family: "Saira Semi Condensed",sans-serif;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--muted);
}
.ba-pager[hidden] { display: none; }
.ba.swap img { opacity: 0; }
.ba:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   11. How a detail works
   Four-step strip with a photo per step (text in index.html).
   --------------------------------------------------------------------------- */
.process {
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  display: block;
}
/* Old sticky photo panel for the process steps: hidden, the steps carry their own photos. */
/* js/process.js still updates it, which is harmless. */
.process-media {
  position: sticky;
  top: 110px;
  aspect-ratio: 4/5;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 40px 80px rgba(0,0,0,.5);
  display: none !important;
}
.process-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity .7s ease,transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.process-media img.on {
  opacity: 1;
  transform: none;
}
.process-media .bar {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  height: 3px;
  background: rgba(255,255,255,.15);
  border-radius: 3px;
  overflow: hidden;
}
.process-media .bar i {
  display: block;
  height: 100%;
  width: 25%;
  background: linear-gradient(90deg,var(--accent),#fff);
  transition: width .6s cubic-bezier(.2,.7,.2,1);
}
.process-media .cap {
  position: absolute;
  left: 20px;
  top: 20px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  font-size: .75rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 600;
}
.pstep {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: .28;
  transition: opacity .5s;
}
.pstep.on { opacity: 1; }
.pstep .n {
  font-family: "Saira Semi Condensed";
  font-weight: 800;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  letter-spacing: 0;
  font-size: 1.05rem;
  font-style: italic;
  color: #fff;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.57);
  margin-bottom: 8px;
}
.pstep h3 {
  font-family: "Saira Semi Condensed";
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(1.3rem,2vw,1.7rem);
  margin: 6px 0 8px;
}
.pstep p {
  color: var(--muted);
  max-width: 440px;
  font-size: .92rem;
}
.pstep img { display: none; }
@media (max-width:860px) {
  .process {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .process-media { display: none; }
  .pstep {
    min-height: auto;
    opacity: 1;
    padding: 24px 0;
  }
  .pstep img {
    display: block;
    border-radius: 12px;
    aspect-ratio: 16/10;
    object-fit: cover;
    margin-bottom: 16px;
    border: 1px solid var(--line);
  }
}
#process { background: radial-gradient(ellipse 70% 60% at 15% 0%,rgba(255,255,255,.06),transparent 70%),radial-gradient(ellipse 60% 50% at 95% 100%,rgba(255,255,255,.03),transparent 70%),var(--bg-2) !important; }
.process-steps {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 18px;
}
.pstep {
  min-height: auto;
  opacity: 1;
  padding: 0;
  justify-content: flex-start;
}
.pstep img {
  display: block;
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
  margin-bottom: 16px;
}
@media (max-width:860px) {
  .process-steps {
    grid-template-columns: 1fr 1fr;
    gap: 20px 12px;
  }
  .pstep img { aspect-ratio: 1; }
  .pstep p { font-size: .85rem; }
}
.pstep .n, .pstep.on .n {
  background: var(--solid);
  border-color: #e9ecf1;
  box-shadow: 0 0 16px rgba(255,255,255,.23);
}

/* ---------------------------------------------------------------------------
   12. Booking
   Areas covered, the three numbered steps and the one-question-at-a-time booking card: option chips,
   date picker, summary, deposit notice, WhatsApp / call buttons and the "sent" tick.
   --------------------------------------------------------------------------- */
.book {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
}
@media (max-width:900px) {
  .book { grid-template-columns: 1fr; }
}
.steps {
  list-style: none;
  display: grid;
  gap: 22px;
  counter-reset: s;
  position: relative;
}
.steps li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  align-items: start;
  position: relative;
  z-index: 1;
}
.steps li::before {
  counter-increment: s;
  content: counter(s);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "Saira Semi Condensed";
  font-weight: 800;
  font-size: 1.5rem;
  border: 1px solid rgba(255,255,255,.3);
  color: var(--accent);
  transition: background .3s,color .3s,box-shadow .3s,border-color .3s;
  background: var(--bg-2);
}
.steps h3 {
  font-family: "Saira Semi Condensed";
  text-transform: uppercase;
  font-size: 1.35rem;
  letter-spacing: .03em;
}
.steps p {
  color: var(--muted);
  font-size: .95rem;
}
.widget {
  background: linear-gradient(180deg,var(--card),#0d0f14);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  position: relative;
  isolation: isolate;
}
.widget h3 {
  font-family: "Saira Semi Condensed";
  text-transform: uppercase;
  font-size: 1.6rem;
  margin-bottom: 18px;
}
.widget label {
  display: block;
  font-size: .75rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 16px 0 8px;
  font-weight: 600;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  transition: all .2s;
  font-weight: 600;
  letter-spacing: .04em;
  touch-action: manipulation;
}
.chip[aria-pressed="true"] {
  background: linear-gradient(180deg,#fff,#c9ced8);
  color: #0a0b0e;
  border-color: #fff;
}
.widget input[type=date] {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0b0d11;
  color: var(--text);
  font: inherit;
  color-scheme: dark;
}
.widget .btn {
  width: 100%;
  justify-content: center;
  margin-top: 24px;
}
@property --beam { syntax:"<angle>"; initial-value:0deg; inherits:false }
.widget::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--beam),transparent 0deg,transparent 280deg,var(--accent) 320deg,#fff 340deg,transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}
.motion .widget::before {
  opacity: 1;
  animation: beam 5s linear infinite;
}
@keyframes beam {
  to { --beam:360deg }
}
.widget::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 80px rgba(255,255,255,.04);
  z-index: -1;
}
.chips.morph { position: relative; }
.chips.morph .chip {
  position: relative;
  z-index: 1;
}
.chips.morph .chip[aria-pressed="true"] {
  background: transparent;
  border-color: transparent;
}
.chips .pill {
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  background: linear-gradient(180deg,#fff,#c9ced8);
  box-shadow: 0 6px 20px rgba(255,255,255,.11);
  transition: left .45s cubic-bezier(.2,.9,.3,1.15),top .45s cubic-bezier(.2,.9,.3,1.15),width .45s cubic-bezier(.2,.9,.3,1.15),height .45s;
}
.deposit {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0 4px;
  padding: 14px 16px;
  border: 1px solid #cfd6e1;
  border-radius: 14px;
  background: linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.06));
  box-shadow: 0 0 0 3px rgba(255,255,255,.09),0 10px 30px rgba(255,255,255,.11);
  color: #fff;
  font-size: .95rem;
  line-height: 1.45;
}
/* 1. Tokens and base - kept here, it must stay below .deposit (same specificity, same property) */
.pkd-note { margin-top: 14px; }
.dp-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0b0d11;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.dp-btn[aria-expanded="true"] { border-color: rgba(255,255,255,.57); }
.dp-btn .ph { color: var(--muted); }
.dp {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #0b0d11;
  padding: 14px;
  overflow: hidden;
}
.dp[hidden] { display: none; }
.dp-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.dp-head b {
  font-family: "Saira Semi Condensed";
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 1.15rem;
}
/* 7. Packages - kept here, it must stay below .dp-head b (same specificity, same property) */
.pk-price b {
  font-family: "Saira Semi Condensed";
  font-size: 1.6rem;
}
/* 1. Tokens and base - kept here, it must stay below .pk-price b (same specificity, same property) */
.pkd-sizes b {
  font-family: "Saira Semi Condensed",sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: 1.55rem;
  color: #fff;
  margin-top: 4px;
}
@media (max-width:860px) {
  /* 4. Header, nav and burger menu - kept here, it must stay below .pk-price b (same specificity, same property) */
  nav .btn-chrome {
    padding: 11px 18px;
    font-size: .8rem;
  }
}
/* 8. Reviews - kept here, it must stay below the rules above (same specificity, same property) */
.rv-num b {
  font-family: "Saira Semi Condensed",sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 1.25rem;
  color: #fff;
}
/* 8. Reviews - kept here, it must stay below the rules above (same specificity, same property) */
.rv-leave-txt b {
  font-family: "Saira Semi Condensed",sans-serif;
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.35rem;
}
.dp-nav {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 1rem;
}
.dp-nav:disabled {
  opacity: .25;
  cursor: default;
}
.dp-grid {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: 4px;
  text-align: center;
}
.dp-grid .wd {
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--muted);
  padding: 4px 0;
  text-transform: uppercase;
}
.dp-day {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  transition: background .2s,color .2s,transform .2s;
  position: relative;
}
.dp-day:hover:not(:disabled) { background: rgba(255,255,255,.05); }
.dp-day:disabled {
  color: #3d434f;
  cursor: default;
}
.dp-day.today { box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset; }
.dp-day[aria-pressed="true"] {
  background: linear-gradient(180deg,#fff,#c9ced8);
  color: #0a0b0e;
  font-weight: 600;
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(255,255,255,.14);
}
#book { background: radial-gradient(ellipse 70% 60% at 15% 0%,rgba(255,255,255,.06),transparent 70%),radial-gradient(ellipse 60% 50% at 95% 100%,rgba(255,255,255,.03),transparent 70%),var(--bg-2) !important; }
.dp-day.booked {
  color: #6b7380;
  text-decoration: line-through;
  background: repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 4px,transparent 4px 8px);
}
.dp-legend {
  justify-content: center;
  margin-top: 10px;
  font-size: .75rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.dp-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: -1px;
}
.lg-free { background: var(--accent); }
.lg-booked {
  background: repeating-linear-gradient(135deg,#6b7380 0 2px,transparent 2px 4px);
  border: 1px solid #6b7380;
}
.chip, .widget label, .dp-head b { font-family: "Saira Semi Condensed",sans-serif; }
.bk-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}
.bk-top h3 { margin: 0; }
.bk-prog {
  flex: 0 0 110px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,.1);
  overflow: hidden;
}
.bk-prog i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg,#fff,var(--accent));
  box-shadow: 0 0 10px rgba(255,255,255,.45);
  transition: width .45s cubic-bezier(.2,.8,.2,1);
}
.bk-h {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Saira Semi Condensed",sans-serif;
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.15rem;
  letter-spacing: .03em;
  margin-bottom: 12px;
}
.bk-l {
  display: block;
  font-family: "Saira Semi Condensed",sans-serif;
  font-size: .75rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 16px 0 8px;
  font-weight: 600;
}
.bk-l em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  opacity: .7;
}
.chips-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.chips-card .chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  border-radius: 14px;
  padding: 11px 14px;
  text-align: left;
  line-height: 1.2;
}
.chips-card .chip strong {
  font-weight: 700;
  font-size: .95rem;
}
.chips-card .chip small {
  font-family: Inter,sans-serif;
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: 0;
  color: var(--muted);
  transition: color .2s;
}
.chips-card .chip[aria-pressed="true"] small { color: #3a404b; }
.chips-card .pill { border-radius: 14px; }
.chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.bk-in {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0b0d11;
  color: var(--text);
  font: inherit;
  font-size: 16px;
}
.bk-in:focus {
  outline: none;
  border-color: rgba(255,255,255,.66);
  box-shadow: 0 0 0 3px rgba(255,255,255,.09);
}
.bk-sum {
  border: 1px solid rgba(255,255,255,.21);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 0;
}
.bk-sum dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  margin: 0;
}
.bk-sum dt {
  font-family: "Saira Semi Condensed",sans-serif;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.bk-sum dd {
  margin: 0;
  font-weight: 600;
  font-size: .92rem;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.bk-price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.bk-price span {
  font-family: "Saira Semi Condensed",sans-serif;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.bk-price b {
  font-family: "Saira Semi Condensed",sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 1.5rem;
}
.bk-price em {
  font-style: normal;
  color: var(--muted);
  font-size: .9rem;
}
.bk-note {
  margin-top: 10px;
  font-size: .8rem;
  color: var(--muted);
  text-align: center;
}
.bk .dp { margin-top: 0; }
.steps li.active::before {
  box-shadow: 0 0 0 6px rgba(255,255,255,.08);
  border-color: var(--accent);
}
.steps li.done::before {
  content: "\2713";
  background: linear-gradient(180deg,#fff,#c9ced8);
  color: #0a0b0e;
  border-color: #fff;
}
@media (max-width:420px) {
  .widget.bk { padding: 20px 16px; }
  .chips-card .chip { padding: 10px 11px; }
  .bk-prog { flex-basis: 70px; }
}
.dp-btn[hidden] { display: none; }
.bk .bk-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
}
.bk .bk-top h3 {
  flex: 1;
  margin: 0;
}
.bk-no {
  font-family: "Saira Semi Condensed",sans-serif;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.bk-back {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.bk-back:hover { border-color: var(--accent); }
.bk-back[hidden] { display: none; }
.bk>.bk-prog {
  display: block;
  flex: none;
  width: 100%;
  margin: 14px 0 14px;
}
.bk-q .bk-h {
  font-size: clamp(1.3rem,4.6vw,1.6rem);
  margin: 4px 0 16px;
  outline: none;
  margin-bottom: 4px;
}
.bk-q .chips-card .chip {
  padding: 16px 16px;
  min-height: 68px;
  justify-content: center;
  position: relative;
  padding-right: 48px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07),0 4px 14px rgba(0,0,0,.25);
  transition: transform .18s,border-color .2s,box-shadow .2s,background .2s;
}
.bk-q .chips-card .chip strong { font-size: 1.02rem; }
.bk-where .btn {
  width: 100%;
  margin-top: 14px;
}
.bk-where[hidden] { display: none; }
.bk-q[hidden] { display: none; }
.bk-q.in-r { animation: bkInR .42s cubic-bezier(.2,.8,.2,1); }
.bk-q.in-l { animation: bkInL .42s cubic-bezier(.2,.8,.2,1); }
@keyframes bkInR {
  from { opacity:0; transform:translateX(26px) }
  to { opacity:1; transform:none }
}
@keyframes bkInL {
  from { opacity:0; transform:translateX(-26px) }
  to { opacity:1; transform:none }
}
.bk-edit {
  font: inherit;
  font-size: .72rem;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  position: relative;
}
/* Visitors who asked for less motion. */
@media (prefers-reduced-motion:reduce) {
  .bk-q.in-r, .bk-q.in-l { animation: none; }
}
.bk-hint {
  font-size: .82rem;
  color: var(--muted);
  margin: 0 0 14px;
}
.bk-q .chips-card .chip::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.62);
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 800;
  color: #fff;
  transition: background .2s,border-color .2s,transform .25s cubic-bezier(.3,1.6,.5,1);
}
.bk-q .chips-card .chip:hover {
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07),0 10px 26px rgba(255,255,255,.1);
  transform: translateY(-2px);
}
.bk-q .chips-card .chip:hover::after {
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(255,255,255,.23);
}
.bk-q .chips-card .chip:active { transform: scale(.97); }
.bk-q .chips-card .chip[aria-pressed="true"]::after {
  content: "\2713";
  background: #0a0b0e;
  border-color: #0a0b0e;
  transform: scale(1.1);
}
.bk-q .chips-card .chip.wide { grid-column: 1/-1; }
.bk .bk-call {
  width: 100%;
  justify-content: center;
  margin-top: 10px;
}
.bk-talk {
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: .85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  text-align: center;
  color: var(--muted);
}
.bk-talk a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  white-space: nowrap;
}
.bk-q[data-q="send"]:not([hidden]) ~ .bk-talk { display: none; }
.areas {
  margin: 0 0 30px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.21);
  border-radius: 18px;
  background: linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06),0 14px 40px rgba(255,255,255,.05);
}
.areas ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 12px;
}
.areas li {
  font-size: .85rem;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.27);
  background: rgba(10,12,18,.6);
  font: 600 .9rem "Saira Semi Condensed",sans-serif;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #eef3fa;
}
.areas p {
  margin: 0;
  font-size: .85rem;
  color: var(--muted);
}
.bk-done {
  position: absolute;
  inset: 0;
  z-index: 20;
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 30px;
  transition: opacity .4s;
  background: radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.09),transparent 60%),#0b0e14;
}
.bk-done[hidden] { display: none; }
.bk-done.out { opacity: 0; }
.bk-done svg {
  width: 84px;
  height: 84px;
  filter: drop-shadow(0 0 18px rgba(255,255,255,.27));
}
.bk-done circle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
}
.bk-done path {
  fill: none;
  stroke: #fff;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}
.bk-done.play circle { animation: dash .6s ease-out forwards; }
.bk-done.play path { animation: dash .45s .45s ease-out forwards; }
@keyframes dash {
  to { stroke-dashoffset:0 }
}
.bk-done b {
  font-family: "Saira Semi Condensed",sans-serif;
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.4rem;
}
.bk-done span { color: var(--muted); }
.bk-done .btn { margin-top: 8px; }
.bk { position: relative; }
/* Visitors who asked for less motion. */
@media (prefers-reduced-motion:reduce) {
  .bk-done circle, .bk-done path {
    stroke-dashoffset: 0;
    animation: none;
  }
}
.bk-err {
  display: block;
  margin: 8px 0 2px;
  color: #ff9a9a;
  font-size: .85rem;
}
.bk-in[aria-invalid="true"] {
  border-color: #ff7b7b;
  box-shadow: 0 0 0 3px rgba(255,123,123,.18);
}
.bk-done:focus { outline: none; }
.bk-talk-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.bk-talk a.mnav-pill {
  border: 1px solid rgba(255,255,255,.33);
  font-weight: 700;
}
.bk-in::placeholder {
  color: #8b93a1;
  opacity: 1;
}
.dp-day:disabled {
  color: #555c69;
  text-decoration: line-through;
}
.deposit[hidden] { display: none; }
.deposit b {
  display: block;
  font-family: "Saira Semi Condensed",sans-serif;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 1.05rem;
  margin-bottom: 2px;
}
.deposit span:last-child { color: #e9ecf1; }
.dep-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--solid);
  box-shadow: 0 0 18px rgba(255,255,255,.27);
}
.dep-ic svg {
  width: 22px;
  height: 22px;
  color: #fff;
}
.motion .deposit:not([hidden]) { animation: depIn .5s cubic-bezier(.2,.9,.3,1.2); }
@keyframes depIn {
  from { opacity:0; transform:translateY(8px) scale(.97) }
  to { opacity:1; transform:none }
}
.bk-dots { display: none; }
@media (max-width:760px) {
  .bk-prog {
    position: relative;
    height: 4px;
    overflow: visible;
    margin: 22px 14px 26px !important;
    width: auto !important;
  }
  .bk-prog i { border-radius: 4px; }
  .bk-dots {
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: -14px;
    right: -14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }
  .bk-dots button {
    pointer-events: auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.18);
    background: #11141b;
    color: var(--muted);
    font: 800 .8rem "Saira Semi Condensed",sans-serif;
    font-style: italic;
    cursor: default;
    transition: background .3s,color .3s,border-color .3s,box-shadow .3s,transform .3s;
  }
  .bk-dots button.done {
    background: var(--solid);
    border-color: #e9ecf1;
    color: #fff;
    cursor: pointer;
  }
  .bk-dots button.cur {
    background: #fff;
    border-color: #fff;
    color: #05060a;
    transform: scale(1.15);
    box-shadow: 0 0 0 4px rgba(255,255,255,.21),0 0 18px rgba(255,255,255,.36);
  }
}
#bookForm { scroll-margin-top: 96px; }
.book { grid-template-columns: minmax(0,1fr); }
@media (min-width:901px) {
  .book { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}
.book>*, .steps li>div { min-width: 0; }
.bk-edit::after {
  content: "";
  position: absolute;
  inset: -12px -8px;
}
.chip, .dp-day { transition: transform .12s ease,filter .12s ease; }
.chip:active, .dp-day:active {
  transform: scale(.97);
  filter: brightness(1.1);
}
.areas-h {
  display: flex;
  align-items: center;
  gap: 12px;
}
.areas-pin {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  background: radial-gradient(circle at 30% 25%,#5b616c,#22262d 75%);
  box-shadow: 0 0 0 4px rgba(255,255,255,.09),0 8px 22px rgba(255,255,255,.2);
}
.areas-pin svg {
  width: 20px;
  height: 20px;
}
.areas-h b {
  display: block;
  font-family: "Saira Semi Condensed",sans-serif;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 1.2rem;
  line-height: 1.1;
}
.areas-h small {
  display: block;
  color: var(--muted);
  font-size: .8rem;
  margin-top: 2px;
}
.areas li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(255,255,255,.45);
}
.areas p a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.steps::before, .steps::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 26px;
  height: var(--lineH,calc(100% - 52px));
  width: 2px;
  border-radius: 2px;
}
.steps::before { background: rgba(255,255,255,.06); }
.steps::after {
  background: linear-gradient(#e9ecf1,#8a919d);
  transform-origin: top;
  transform: scaleY(1);
}
.steps-spark {
  position: absolute;
  left: 21px;
  top: 22px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px 4px rgba(255,255,255,.36);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}
.steps.anim::after { transform: scaleY(0); }
.steps.anim li {
  opacity: 0;
  transform: translateY(18px);
}
.steps.anim li::before { transform: scale(.5); }
.steps.anim.in::after {
  transform: scaleY(1);
  transition: transform 1.3s cubic-bezier(.6,0,.2,1) .15s;
}
.steps.anim.in li {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1);
  animation: stepGlow 4.5s ease-in-out 1.6s infinite;
  animation-play-state: paused;
}
.steps.anim.in li::before {
  transform: none;
  transition: transform .5s cubic-bezier(.3,1.6,.5,1),background .3s,color .3s,box-shadow .3s,border-color .3s;
}
.steps.anim.in li:nth-child(1), .steps.anim.in li:nth-child(1)::before {
  transition-delay: .1s;
}
.steps.anim.in li:nth-child(2), .steps.anim.in li:nth-child(2)::before {
  transition-delay: .55s;
}
.steps.anim.in li:nth-child(3), .steps.anim.in li:nth-child(3)::before {
  transition-delay: 1s;
}
.steps.anim.in .steps-spark {
  animation: stepSpark 4.5s ease-in-out 1.6s infinite;
  animation-play-state: paused;
}
.steps.anim.in.in-view .steps-spark { animation-play-state: running; }
.steps.anim.in.in-view li { animation-play-state: running; }
.steps.anim.in li:nth-child(2) { animation-name: stepGlow2; }
.steps.anim.in li:nth-child(3) { animation-name: stepGlow3; }
@keyframes stepSpark {
  0% { top:22px; opacity:0 }
  8% { opacity:1 }
  80% { opacity:1 }
  92%,100% { top:calc(var(--lineH,100px) + 22px); opacity:0 }
}
@keyframes stepGlow {
  0%,4% { --g:0 }
  6% { --g:1 }
  22%,100% { --g:0 }
}
@keyframes stepGlow2 {
  0%,40% { --g:0 }
  43% { --g:1 }
  60%,100% { --g:0 }
}
@keyframes stepGlow3 {
  0%,78% { --g:0 }
  81% { --g:1 }
  96%,100% { --g:0 }
}
@property --g { syntax:"<number>"; inherits:true; initial-value:0 }
.steps.anim li:not(.done)::before {
  box-shadow: 0 0 0 calc(var(--g)*7px) rgba(255,255,255,calc(var(--g)*.12)),0 0 calc(var(--g)*22px) rgba(255,255,255,calc(var(--g)*.3));
  border-color: rgb(calc(190 + var(--g)*65) calc(196 + var(--g)*59) calc(206 + var(--g)*49));
}
.steps.anim li.active:not(.done)::before { box-shadow: 0 0 0 max(6px,calc(var(--g)*7px)) rgba(255,255,255,max(.08,calc(var(--g)*.12))),0 0 calc(var(--g)*22px) rgba(255,255,255,calc(var(--g)*.3)); }
.bk-restored {
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.21);
  background: rgba(255,255,255,.03);
  font-size: .85rem;
  color: #c9cfd8;
}
.bk-restored button {
  margin-left: 6px;
  border: 0;
  background: none;
  padding: 4px 2px;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   13. FAQ
   Questions are <details name="faq"> in index.html; opening one closes the others.
   --------------------------------------------------------------------------- */
.faq {
  display: grid;
  gap: 12px;
  counter-reset: fq;
}
.faq-i {
  overflow: hidden;
  counter-increment: fq;
  border-radius: 18px;
  background: linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  border: 1px solid var(--line);
  transition: border-color .3s,box-shadow .3s,background .3s;
  interpolate-size: allow-keywords;
}
.faq-i[open] { border-color: rgba(255,255,255,.27); }
.faq-i summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  font-family: "Saira Semi Condensed",sans-serif;
  font-weight: 700;
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 56px 18px 18px;
  font-size: 1.12rem;
}
.faq-i summary::-webkit-details-marker { display: none; }
.faq-i summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.33);
  color: var(--accent);
  font-size: 1.1rem;
  transition: transform .3s;
}
.faq-i[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-i p {
  padding: 0 22px 20px 72px;
  color: #d3d9e2;
  line-height: 1.65;
}
#faq {
  position: relative;
  overflow: hidden;
}
#faq::before {
  content: "";
  position: absolute;
  left: -10%;
  top: 10%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse at center,rgba(255,255,255,.06),transparent 65%);
  pointer-events: none;
}
.faq-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: 56px;
  align-items: start;
}
.faq-side {
  position: sticky;
  top: 110px;
}
.faq-side .display { margin: 10px 0 14px; }
.faq-side>p {
  color: var(--muted);
  margin-bottom: 22px;
  max-width: 420px;
}
.faq-ask {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  max-width: 420px;
  margin-bottom: 18px;
}
.faq-ask img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 30%;
  border: 2px solid rgba(255,255,255,.57);
}
.faq-ask b {
  display: block;
  font-family: "Saira Semi Condensed",sans-serif;
  font-style: italic;
  text-transform: uppercase;
  font-size: 1.1rem;
}
.faq-ask span {
  color: var(--muted);
  font-size: .9rem;
}
.faq-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.faq-i:hover { border-color: rgba(255,255,255,.24); }
.faq-i[open] {
  border-color: rgba(255,255,255,.57);
  background: linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  box-shadow: 0 18px 50px rgba(255,255,255,.07);
}
.faq-i summary::before {
  content: counter(fq,decimal-leading-zero);
  order: 3;
  margin-left: auto;
  font-family: "Saira Semi Condensed",sans-serif;
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .14em;
  color: rgba(255,255,255,.56);
}
.faq-ic {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--accent);
  transition: background .3s,color .3s;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: radial-gradient(circle at 30% 25%,rgba(255,255,255,.16),rgba(255,255,255,.03) 70%);
  border: 1px solid rgba(255,255,255,.27);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 6px 18px rgba(0,0,0,.35);
}
.faq-ic svg {
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: none;
  transition: transform .3s cubic-bezier(.3,1.6,.5,1);
}
.faq-i[open] .faq-ic {
  color: #fff;
  background: radial-gradient(circle at 30% 25%,#5b616c,#22262d 75%);
  border-color: #e9ecf1;
  box-shadow: 0 0 0 4px rgba(255,255,255,.09),0 8px 24px rgba(255,255,255,.2);
}
.faq-q { order: 2; }
/* Smooth open / close of the answers in browsers that support animating <details>. */
.faq-i::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .4s cubic-bezier(.2,.8,.2,1),content-visibility .4s allow-discrete;
}
.faq-i[open]::details-content { block-size: auto; }
@media (max-width:860px) {
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .faq-side { position: static; }
  .faq-i summary {
    font-size: 1rem;
    padding: 16px 50px 16px 14px;
    gap: 12px;
  }
  .faq-i summary::before { display: none; }
  .faq-i p {
    padding: 0 16px 16px 66px;
    font-size: .95rem;
  }
}
.faq-ic .a {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.faq-ic .m {
  fill: none;
  stroke: #e9ecf1;
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: .85;
}
.faq-ic .k {
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.faq-ic .f {
  fill: #cfd6e1;
  stroke: none;
}
.faq-i[open] .faq-ic .a { stroke: #fff; }
.faq-i[open] .faq-ic .f { fill: #fff; }
.faq-i[open] .faq-ic .m { stroke: #f1f3f6; }
.faq-i[open] .faq-ic .k { stroke: #23272e; }
.faq-i:hover .faq-ic svg { transform: scale(1.08); }
.faq-i p { padding-left: 78px; }
@media (max-width:860px) {
  .faq-i p { padding-left: 16px; }
}
.faq-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 22px 22px 78px;
}
@media (max-width:860px) {
  .faq-btns { padding: 0 16px 18px; }
}
.faq-cta .btn {
  font-size: 1rem;
  letter-spacing: .05em;
}
.faq-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 18px 18px;
}
.faq-acts .btn {
  padding: 9px 15px;
  font-size: .86rem;
  min-height: 40px;
}
.faq-acts .bi {
  width: 16px;
  height: 16px;
}

/* ---------------------------------------------------------------------------
   14. Closing call to action
   The studio lamp glow and the "Ready for the shine?" band above the footer.
   --------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  padding: 80px 40px;
  text-align: center;
  border: 1px solid var(--line);
  background: radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.07),transparent 60%),var(--bg-2);
}
.cta-band h2 {
  font-size: clamp(2.2rem,5vw,3.8rem);
  margin-bottom: 14px;
}
.cta-band p {
  color: var(--muted);
  margin-bottom: 30px;
}
/* The studio lights (.lamp): a hexagon honeycomb panel like the ceiling lights in the unit, seen from below in perspective
   (the far rows are smaller and flatter), with a soft cone of light falling from it over what is underneath. One sits above
   "Take a look inside" (.lamp-unit), one above the closing call to action. index.html holds the panel as inline SVG (.hexl: the
   cone, then three layers of hexagons - a wide halo, a glow and the bright white lines; the blur filters and the cone's
   gradient are defined once in .hexdefs; each hexagon's line gets thinner with distance). The lamp sits above what follows
   but never takes a click. js/footer.js adds .in when a lamp scrolls into view and the hexagons flick on one after another
   (--d = each one's delay) while the cone fades in; it takes .in off again once the lamp is completely out of view, so the
   lamp flicks on again every time it is scrolled to. With motion off they are simply on. */
.lamp {
  position: relative;
  z-index: 2;
  height: 200px;
  margin-bottom: -90px;
  display: flex;
  justify-content: center;
  overflow-x: clip;
  pointer-events: none;
}
.lamp-unit {
  height: 108px;
  margin-bottom: 0;
}
.lamp .hexl {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(32rem,94vw);
  height: auto;
  transform: translateX(-50%);
  overflow: visible;
}
.lamp .glow {
  position: absolute;
  top: -30px;
  width: min(28rem,70vw);
  height: 110px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .09;
  filter: blur(60px);
}
.hexl .hx {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
}
.hexl .hx-core .hx { fill: rgba(255,255,255,.02); }
.hexl .hx-glow { opacity: .4; }
.hexl .hx-halo { opacity: .18; }
.motion .lamp:not(.in) .hx { opacity: .05; }
.motion .lamp:not(.in) .hx-beam { opacity: 0; }
.motion .lamp.in .hx {
  animation: hxOn 1.5s linear both;
  animation-delay: var(--d,0ms);
}
.motion .lamp.in .hx-beam { animation: beamIn 1.8s ease-out .3s both; }
@keyframes hxOn {
  0% { opacity:.05 }
  7% { opacity:1 }
  12% { opacity:.15 }
  20% { opacity:.95 }
  27% { opacity:.35 }
  38%, 100% { opacity:1 }
}
@keyframes beamIn { from { opacity:0 } }
.contact-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   15. Footer
   Giant outline "TJS Detailing" word that fills with chrome, logo, social pills, contact,
   address, hours and links.
   --------------------------------------------------------------------------- */
footer {
  border-top: 1px solid var(--line);
  padding: 50px 0 40px;
  color: var(--muted);
  font-size: .9rem;
}
footer .wrap {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 30px;
}
@media (max-width:760px) {
  footer .wrap { grid-template-columns: 1fr; }
}
footer img {
  height: 56px;
  width: auto;
  margin-bottom: 12px;
}
footer a {
  text-decoration: none;
  display: block;
  margin-bottom: 6px;
}
footer a:hover { color: var(--text); }
.bigword {
  padding: 20px 0 0;
  overflow: hidden;
}
.bigword svg {
  width: 100%;
  height: auto;
  display: block;
  cursor: default;
}
.bigword text {
  font-family: "Saira Semi Condensed",sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: 150px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.bigword .outline {
  fill: transparent;
  stroke: rgba(255,255,255,.14);
  stroke-width: 1.2;
}
.motion .bigword .outline {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
}
.motion .bigword.in .outline {
  transition: stroke-dashoffset 3.2s cubic-bezier(.4,0,.2,1);
  stroke-dashoffset: 0;
}
.bigword .fillw {
  fill: url(#chromeG);
  stroke: url(#chromeG);
  stroke-width: 1.2;
}
@media (max-width:760px) {
  footer { padding-bottom: 110px; }
  footer a {
    padding: 10px 0;
    margin: 0;
  }
}
.foot {
  position: relative;
  border-top: 1px solid rgba(255,255,255,.11);
  padding: 70px 0 34px;
  color: var(--muted);
  background: radial-gradient(ellipse 60% 80% at 50% 0%,rgba(255,255,255,.06),transparent 70%),linear-gradient(180deg,#0b0d12,#06070a);
}
.foot::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: -1px;
  height: 2px;
  background: linear-gradient(90deg,transparent,var(--accent),#fff,var(--accent),transparent);
  box-shadow: 0 0 22px rgba(255,255,255,.45);
}
.foot-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.foot-brand img {
  width: 240px;
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(255,255,255,.11));
}
.foot-tag {
  margin-top: 14px;
  font-family: "Saira Semi Condensed";
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .32em;
  font-size: .85rem;
  color: var(--text);
}
.foot-sub {
  max-width: 420px;
  margin-top: 8px;
  font-size: .92rem;
}
.foot-h {
  display: block;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 14px;
}
.soc-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.soc {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 10px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--text);
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.01));
  transition: transform .3s,border-color .3s,box-shadow .3s;
}
.soc svg {
  width: 38px;
  height: 38px;
  padding: 8px;
  border-radius: 50%;
  background: linear-gradient(180deg,#fff,#c9ced8 50%,#9aa2ae 51%,#e9ecf1);
  color: #0a0b0e;
  transition: box-shadow .3s,transform .3s;
}
.soc span {
  font-size: .95rem;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.soc:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.57);
  box-shadow: 0 12px 30px rgba(255,255,255,.14);
}
.foot-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 30px;
  padding: 40px 0;
}
.foot-grid a {
  display: block;
  text-decoration: none;
  color: var(--muted);
  padding: 5px 0;
}
.foot-grid a:hover { color: #fff; }
.foot-wa {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  color: #fff !important;
}
.foot-wa svg {
  width: 18px;
  height: 18px;
  color: #25d366;
}
.foot-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  font-size: .8rem;
  color: #8a92a0;
}
@media (max-width:760px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid a { padding: 10px 0; }
  .foot-brand img { width: 200px; }
  .foot { padding-bottom: 110px; }
}
.foot .wrap { display: block; }
.foot-h, .soc span { font-family: "Saira Semi Condensed",sans-serif; }
.foot-ico {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.foot-grid .foot-ico a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  color: var(--accent);
  border: 1px solid rgba(255,255,255,.33);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 14px rgba(255,255,255,.09);
  transition: background .2s,color .2s,transform .2s,box-shadow .2s;
}
.foot-grid .foot-ico a svg {
  width: 20px;
  height: 20px;
}
.foot-grid .foot-ico a:hover {
  background: var(--solid);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255,255,255,.23);
}
.foot-logo {
  position: relative;
  display: inline-block;
  width: 240px;
  max-width: 100%;
  margin-bottom: 12px;
}
.foot-logo img {
  width: 100% !important;
  margin-bottom: 0 !important;
}
.foot-logo .spark { width: 7%; }
.foot-logo .fs3 { width: 4.5%; }
.motion .foot-logo .fs2 { animation-delay: .9s; }
.motion .foot-logo .fs3 {
  animation-delay: 1.7s;
  animation-duration: 3.1s;
}
@media (max-width:760px) {
  .foot-logo { width: 200px; }
}
.foot-hours {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.45;
}
footer a .bi { color: var(--accent); }
.soc:hover svg, .soc:focus-visible svg {
  box-shadow: 0 0 0 2px #cfd6e1,0 0 16px 4px rgba(255,255,255,.32);
  transform: scale(1.06);
}

/* ---------------------------------------------------------------------------
   16. Reel viewer, sound and video controls
   Full-screen reel player (#rv), the volume pill (.vol) and the draggable progress bar (.scrub)
   shared by the reel viewer and the Lewis video.
   --------------------------------------------------------------------------- */
.vol {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(6,8,12,.78);
}
.vol-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(180deg,#fff,#c9ced8);
  color: #0a0b0e;
  font-size: 1rem;
  cursor: pointer;
}
.vol input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 110px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg,var(--accent) var(--v,80%),rgba(255,255,255,.25) var(--v,80%));
  cursor: pointer;
}
.vol input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(255,255,255,.45);
}
.vol input[type=range]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: #fff;
}
.vol-note, .vol-hint {
  font-size: .8rem;
  color: #cfd6e0;
  white-space: nowrap;
}
.vol .vol-note { display: none; }
.vol.nosound input, .vol.nosound .vol-btn { display: none; }
.vol.nosound .vol-note { display: inline; }
.vol-float {
  position: absolute;
  left: 12px;
  bottom: 28px;
}
.vol-float.on .vol-hint { display: none; }
.rv {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  overscroll-behavior: contain;
}
.rv[hidden] { display: none; }
.rv-bg {
  position: absolute;
  inset: 0;
  background: rgba(4,5,8,.86);
  backdrop-filter: blur(12px);
}
.rv-stage {
  position: relative;
  height: min(88vh,860px);
  aspect-ratio: 9/16;
  max-width: 94vw;
  border-radius: 26px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12),0 60px 120px rgba(0,0,0,.7),0 0 90px rgba(255,255,255,.11);
  transform: scale(.92);
  opacity: 0;
  transition: transform .45s cubic-bezier(.2,.9,.3,1.15),opacity .3s;
}
.rv.open .rv-stage {
  transform: none;
  opacity: 1;
}
.rv-stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rv-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px;
  background: linear-gradient(rgba(0,0,0,.55),transparent);
}
.rv-top span {
  font-size: .8rem;
  letter-spacing: .12em;
  color: #dfe5ee;
}
.rv-x {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  font-size: 1rem;
  background: var(--solid);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(255,255,255,.81),0 4px 16px rgba(255,255,255,.27);
}
.rv-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 60px 16px 16px;
  background: linear-gradient(transparent,rgba(0,0,0,.75));
  padding-bottom: 30px;
}
.rv-link {
  margin: -2px 0 10px;
  font-size: .85rem;
  font-weight: 600;
  border-bottom: 1px solid var(--accent);
  display: inline-flex;
  align-items: center;
  color: #fff !important;
  background: var(--solid);
  border: 0 !important;
  padding: 7px 14px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.66),0 4px 14px rgba(255,255,255,.2);
  text-decoration: none;
}
.rv-bottom p {
  font-family: "Saira Semi Condensed";
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: 1.25rem;
  margin-bottom: 10px;
}
.rv-nav {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
}
.rv-nav:hover {
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(255,255,255,.18);
}
@media (max-width:760px) {
  .rv {
    gap: 0;
    height: 100dvh;
  }
  .rv-nav {
    position: absolute;
    top: 50%;
    margin-top: -27px;
  }
  .rv-prev { left: 6px; }
  .rv-next { right: 6px; }
  .rv-stage {
    height: 100vh;
    max-width: 100vw;
    border-radius: 0;
    aspect-ratio: auto;
    width: 100vw;
    height: 100dvh !important;
    max-height: 100dvh;
  }
}
.scrub {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22px;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  z-index: 3;
  touch-action: none;
}
.scrub .trk {
  position: relative;
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,.22);
  transition: height .15s;
}
.scrub .fil {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(90deg,#fff,var(--accent));
  box-shadow: 0 0 12px rgba(255,255,255,.45);
}
.scrub .knob {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(255,255,255,.45);
  opacity: 0;
  transition: opacity .15s;
  left: 0;
}
.scrub:hover .trk, .scrub.drag .trk { height: 6px; }
.scrub:hover .knob, .scrub.drag .knob { opacity: 1; }
.vol-hint, .vol-note, .rv-link { font-family: "Saira Semi Condensed",sans-serif; }
.vol .vol-btn {
  display: grid;
  place-items: center;
  background: var(--solid);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.81),0 4px 14px rgba(255,255,255,.25);
}
.vol .vol-btn svg {
  width: 20px;
  height: 20px;
}
.vol:not(.on) .vol-btn {
  background: #0a0d14;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.4),0 4px 14px rgba(0,0,0,.5);
}
.vol.nosound .vol-btn { display: none; }
.vol .vol-hint {
  cursor: pointer;
  pointer-events: auto;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.56);
  text-underline-offset: 3px;
}
.rv-ctrl {
  display: flex;
  gap: 8px;
  align-items: center;
}
.rv-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.66);
  background: rgba(255,255,255,.14);
  color: #fff;
  cursor: pointer;
  transition: transform .12s ease,filter .12s ease;
}
.rv-btn svg {
  width: 20px;
  height: 20px;
}
.rv-btn .pp-play { display: none; }
.rv-stage.is-paused .rv-btn .pp-pause { display: none; }
.rv-stage.is-paused .rv-btn .pp-play { display: block; }
.rv-x:hover { background: #3b4049; }
.rv-big {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px;
  border: 0;
  border-radius: 24px;
  background: rgba(8,12,22,.55);
  color: #fff;
  cursor: pointer;
  font: 700 .85rem "Saira Semi Condensed",sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rv-big[hidden] { display: none; }
.rv-big svg {
  width: 34px;
  height: 34px;
  padding: 18px;
  box-sizing: content-box;
  border-radius: 50%;
  background: var(--solid);
  box-shadow: 0 0 0 6px rgba(255,255,255,.15),0 0 30px rgba(255,255,255,.32);
}
.rv-stage.is-paused::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.7);
  pointer-events: none;
  z-index: 5;
}
@media (max-width:760px) {
  .rv-top { padding-top: calc(14px + env(safe-area-inset-top)); }
  .rv-bottom { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}
.rv .rv-nav {
  background: var(--solid);
  color: #fff;
  border: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,.81),0 6px 20px rgba(255,255,255,.27);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
}
.rv .rv-nav:hover { background: #3b4049; }
@media (max-width:760px) {
  .rv .rv-nav {
    z-index: 7;
    width: 46px;
    height: 46px;
  }
}
.rv-btn:active {
  transform: scale(.97);
  filter: brightness(1.1);
}
.rv-slide {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.rv-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rv-peek {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000 center/cover no-repeat;
}
.rv-peek.prev { top: -100%; }
.rv-peek.next { top: 100%; }
.rv-slide[data-axis="x"] .rv-peek { top: 0; }
.rv-slide[data-axis="x"] .rv-peek.prev { left: -100%; }
.rv-slide[data-axis="x"] .rv-peek.next { left: 100%; }
.rv-link:hover { background: #3b4049; }
.rv-link svg { color: #fff; }
.v-book {
  padding: 8px 16px;
  min-height: 0;
  font-size: .85rem;
}
.rv-bottom .v-book {
  margin-left: 8px;
  vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   17. Photo viewer
   Full-screen photo viewer built by js/photos.js (.pv). It reuses the reel viewer arrows and close button.
   --------------------------------------------------------------------------- */
.pv .rv-nav:hover { background: #3b4049; }
@media (max-width:760px) {
  .pv .rv-nav {
    z-index: 7;
    width: 46px;
    height: 46px;
  }
}
.pv {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  height: 100dvh;
  overscroll-behavior: contain;
}
.pv[hidden] { display: none; }
.pv-bg {
  position: absolute;
  inset: 0;
  background: rgba(4,5,8,.92);
}
.pv-stage {
  position: relative;
  width: min(92vw,1100px);
  height: min(86dvh,820px);
  border-radius: 22px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12),0 40px 100px rgba(0,0,0,.7);
}
.pv-slide {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.pv-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.pv-peek {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000 center/contain no-repeat;
}
.pv-peek.prev { left: -100%; }
.pv-peek.next { left: 100%; }
.pv-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px;
  padding-top: calc(14px + env(safe-area-inset-top));
  background: linear-gradient(rgba(0,0,0,.6),transparent);
  z-index: 3;
}
.pv-count {
  font: 700 .9rem "Saira Semi Condensed",sans-serif;
  letter-spacing: .08em;
  color: #fff;
}
.pv-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 30px 18px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent,rgba(0,0,0,.7));
  color: #fff;
  font-weight: 600;
  z-index: 3;
  padding-right: 170px;
}
.pv .rv-nav {
  background: var(--solid);
  color: #fff;
  border: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,.81),0 6px 20px rgba(255,255,255,.27);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
  flex: none;
}
@media (max-width:760px) {
  .pv { gap: 0; }
  .pv-stage {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }
  .pv .rv-nav {
    position: absolute;
    top: 50%;
    margin-top: -23px;
    z-index: 4;
  }
  .pv-prev { left: 6px; }
  .pv-next { right: 6px; }
}
.pv .v-book {
  position: absolute;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 4;
}

/* ---------------------------------------------------------------------------
   18. Sticky phone bar, back-to-top and toast
   Bottom action bar on phones (#mbar), the back-to-top button on desktop, and the toast message.
   --------------------------------------------------------------------------- */
/* Small status message at the bottom of the screen (#toast). */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%,140%);
  background: #fff;
  color: #0a0b0e;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  transition: transform .45s cubic-bezier(.2,.9,.3,1.3);
  z-index: 99;
  max-width: 90vw;
  text-align: center;
  visibility: hidden;
  opacity: 0;
}
.toast.show {
  transform: translate(-50%,0);
  visibility: visible;
  opacity: 1;
}
.mbar { display: none; }
@media (max-width:760px) {
  .mbar {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 8px;
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 60;
    padding: 8px;
    border-radius: 999px;
    background: rgba(12,14,18,.82);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 20px 50px rgba(0,0,0,.6);
    transform: translateY(160%);
    transition: transform .45s cubic-bezier(.2,.9,.3,1.2);
    top: auto;
    height: auto;
  }
  .mbar.show { transform: none; }
  .mbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 46px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
    color: var(--text);
    border: 1px solid rgba(255,255,255,.18);
  }
  .mbar a.primary {
    background: linear-gradient(180deg,#ffffff 0%,#f1f4f8 46%,#cfd6e1 50%,#ffffff 100%);
    color: #0a0b0e;
    border: 0;
    box-shadow: 0 0 0 1px rgba(255,255,255,.33),0 6px 20px rgba(255,255,255,.18);
  }
}
.to-top {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 55;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.57);
  background: rgba(10,12,16,.8);
  backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  transition: background .2s,transform .2s;
}
.to-top:hover {
  background: var(--solid);
  transform: translateY(-2px);
}
.to-top svg {
  width: 22px;
  height: 22px;
}
.to-top[hidden] { display: none; }
@media (max-width:860px) {
  .to-top { display: none !important; }
}
.mbar .bi {
  margin-right: 0;
  width: 1.05em;
  height: 1.05em;
}
.mbar {
  grid-template-columns: 1.2fr 1fr 1.3fr;
  bottom: calc(10px + env(safe-area-inset-bottom));
}
.mbar a {
  min-width: 0;
  padding: 0 8px;
  white-space: nowrap;
  gap: 6px;
}
@media (max-width:350px) {
  .mbar a {
    font-size: .82rem;
    gap: 4px;
    padding: 0 6px;
  }
}
/* Phones: the action bar steps aside while the founder video is in its spotlight, so the video */
/* controls stay reachable. */
body:has(.meet-media.spot-on) .mbar.show {
  transform: translateY(160%);
}
.mbar a {
  font-size: min(.9rem,3.6vw);
  transition: transform .12s ease,filter .12s ease;
}
/* Landscape phones: more room for content. */
@media (max-height:480px) and (orientation:landscape) {
  .mbar { display: none !important; }
}
.mbar a:active {
  transform: scale(.97);
  filter: brightness(1.1);
}

/* ---------------------------------------------------------------------------
   19. Loading skeletons, touch-screen and print tweaks
   Shimmer placeholders while images load, lighter effects on touch screens, and print styles.
   --------------------------------------------------------------------------- */
/* Phones and touch screens: lighter graphics (no blur, simpler glows) so the tab never runs out of memory. */
@media (hover:none) {
  .bk-q .chips-card .chip:hover { transform: none; }
}
@keyframes skel {
  0% { background-position:150% 0 }
  100% { background-position:-50% 0 }
}
/* Skeleton shimmer. !important beats any background set on the image or video itself. */
img.sk, video.sk {
  background: linear-gradient(100deg,#11141a 30%,#1d2330 50%,#11141a 70%) !important;
  background-size: 200% 100% !important;
  animation: skel 1.2s linear infinite;
}
@keyframes skIn {
  from { opacity:0 }
  to { opacity:1 }
}
img.sk-in { animation: skIn .45s ease; }
/* Visitors who asked for less motion. */
@media (prefers-reduced-motion:reduce) {
  img.sk, video.sk { animation: none; }
  img.sk-in { animation: none; }
}
/* Phones and touch screens: lighter graphics (no blur, simpler glows) so the tab never runs out of memory. */
@media (hover:none) {
  .logo-stage {
    will-change: auto;
    transform-style: flat;
  }
  .sweep::before, .logo-shine::before { will-change: auto; }
  .mbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(12,14,18,.95);
  }
  .lstar svg { filter: drop-shadow(0 0 5px rgba(255,255,255,.41)); }
  .spark svg { filter: drop-shadow(0 0 8px rgba(255,255,255,.41)); }
  #droplets { display: none; }
  .proof, .btn-ghost, .vol, .reel-play, .fs-btn, .to-top {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
/* 6. Meet Lewis (founder video) - kept here, it must stay below .proof,.btn-ghost,.vol,.reel-play,.fs-btn,.to-top (same specificity, same property) */
.fs-btn {
  background: var(--solid);
  border: 1px solid #e9ecf1;
  box-shadow: 0 0 0 2px rgba(255,255,255,.21),0 6px 18px rgba(255,255,255,.23);
  backdrop-filter: none;
}
/* Printing: hide video, overlays and effects; plain black on white. */
@media print {
  nav, .concept, .mbar, .to-top, video, canvas, .sweep, .spark-field, .rv, .mnav {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }
}
/* Phones and touch screens: lighter graphics (no blur, simpler glows) so the tab never runs out of memory. */
@media (hover:none) {
  .hero h1 { filter: drop-shadow(1px 1px 0 #313131) drop-shadow(2px 2px 0 #1c1c1c) drop-shadow(2px 5px 10px rgba(0,0,0,.5)); }
}

/* Package icons: bigger tiles, each icon with its own small loop. The loops only run while the
   details panel is on screen (.pkd.anim-on, set in js/packages.js) and never with reduced motion. */
.pkd-ic { width: 66px; height: 66px; border-radius: 18px; }
.pkd-ic svg { width: 40px; height: 40px; overflow: visible; }
@media (max-width: 760px) {
  .pkd-ic { width: 56px; height: 56px; border-radius: 16px; }
  .pkd-ic svg { width: 34px; height: 34px; }
  .pkd-from { margin-left: 70px; }
  /* long names wrap beside the icon instead of dropping under it */
  .pkd-head > div { flex: 1 1 0; min-width: 0; }
  .pkd-head .pkd-from { flex-basis: 100%; }
}
.pkd-ic .st, .pkd-ic .bub, .pkd-ic .trig, .pkd-ic .glint, .pkd-ic .drip, .pkd-ic .ripple { transform-box: fill-box; }
.pkd-ic .st, .pkd-ic .bub, .pkd-ic .glint, .pkd-ic .ripple { transform-origin: center; }
.pkd-ic .trig { transform-origin: 0 0; }
.pkd-ic .drip { transform-origin: 50% 0; }
.pkd-ic .dot, .pkd-ic .ripple { opacity: 0; }
.pkd-ic .shine { transform: translateX(-22px); }
@media (prefers-reduced-motion: no-preference) {
  .pkd.anim-on .pkd-ic .st { animation: icTwinkle 3.2s ease-in-out infinite; }
  .pkd.anim-on .pkd-ic .bub { animation: icBubble 2.4s ease-in-out infinite; }
  .pkd.anim-on .pkd-ic .b2 { animation-delay: .4s; }
  .pkd.anim-on .pkd-ic .b3 { animation-delay: .8s; }
  .pkd.anim-on .pkd-ic .trig { animation: icSqueeze 1.8s ease-in-out infinite; }
  .pkd.anim-on .pkd-ic .dot { animation: icSpray 1.8s ease-out infinite; }
  .pkd.anim-on .pkd-ic .d2 { animation-delay: .15s; }
  .pkd.anim-on .pkd-ic .d3 { animation-delay: .3s; }
  .pkd.anim-on .pkd-ic .glint { animation: icTwinkle 2.6s ease-in-out infinite; }
  .pkd.anim-on .pkd-ic .g2 { animation-delay: 1.1s; }
  .pkd.anim-on .pkd-ic .shine { animation: icShine 3.6s ease-in-out infinite; }
  .pkd.anim-on .pkd-ic .drip { animation: icDrip 2.8s cubic-bezier(.5,0,.5,1) infinite; }
  .pkd.anim-on .pkd-ic .ripple { animation: icRipple 2.8s ease-out infinite; }
}
@media (prefers-reduced-motion: reduce) { .pkd-ic .dot { opacity: 1; } }
@keyframes icTwinkle { 0%, 70%, 100% { transform: scale(1) rotate(0); opacity: 1; } 80% { transform: scale(1.5) rotate(45deg); opacity: .6; } 90% { transform: scale(.8) rotate(90deg); opacity: 1; } }
@keyframes icBubble { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1.6px) scale(1.12); } }
@keyframes icSqueeze { 0%, 8%, 30%, 100% { transform: rotate(0); } 15% { transform: rotate(-14deg); } }
@keyframes icSpray { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: 1; } 70% { opacity: 0; transform: translate(2.4px, 0); } 100% { opacity: 0; } }
@keyframes icShine { 0%, 55% { transform: translateX(-22px); } 80%, 100% { transform: translateX(26px); } }
@keyframes icDrip { 0%, 100% { transform: translateY(-1.4px) scale(.94, 1.06); } 50% { transform: translateY(1px) scale(1.06, .94); } }
@keyframes icRipple { 0%, 45% { opacity: 0; transform: scale(.4); } 55% { opacity: .9; } 100% { opacity: 0; transform: scale(1.4); } }

/* Products roller, take 2: no glow filter on the logo (inside the faded edges Chrome drew it as a dark box),
   bigger icon tiles with the same small loops as the package icons (only while the roller is on screen) */
.brands-track img { filter: none; height: 64px; opacity: 1; }
.br-ic { width: 48px; height: 48px; border-radius: 14px; margin-right: 14px; }
.br-ic svg { width: 30px; height: 30px; overflow: visible; }
@media (max-width: 760px) {
  .brands-track img { height: 56px; }
  .br-ic { width: 40px; height: 40px; border-radius: 12px; margin-right: 10px; }
  .br-ic svg { width: 25px; height: 25px; }
}
.br-ic .st, .br-ic .bub, .br-ic .trig, .br-ic .drip, .br-ic .ripple { transform-box: fill-box; }
.br-ic .st, .br-ic .bub, .br-ic .ripple { transform-origin: center; }
.br-ic .trig { transform-origin: 0 0; }
.br-ic .drip { transform-origin: 50% 0; }
.br-ic .dot, .br-ic .ripple { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .brands-marq.run .br-ic .st { animation: icTwinkle 3.2s ease-in-out infinite; }
  .brands-marq.run .br-ic .bub { animation: icBubble 2.4s ease-in-out infinite; }
  .brands-marq.run .br-ic .b2 { animation-delay: .4s; }
  .brands-marq.run .br-ic .b3 { animation-delay: .8s; }
  .brands-marq.run .br-ic .trig { animation: icSqueeze 1.8s ease-in-out infinite; }
  .brands-marq.run .br-ic .dot { animation: icSpray 1.8s ease-out infinite; }
  .brands-marq.run .br-ic .d2 { animation-delay: .15s; }
  .brands-marq.run .br-ic .d3 { animation-delay: .3s; }
  .brands-marq.run .br-ic .drip { animation: icDrip 2.8s cubic-bezier(.5,0,.5,1) infinite; }
  .brands-marq.run .br-ic .ripple { animation: icRipple 2.8s ease-out infinite; }
}
@media (prefers-reduced-motion: reduce) { .br-ic .dot { opacity: 1; } }

/* Facebook review cards: thumbs-up next to "Recommends" */
.rq-rec { display: inline-flex; align-items: center; gap: 6px; }
.rq-thumb { width: 16px; height: 16px; flex: none; color: var(--accent); }

/* very narrow phones (320px): booking chips shrink to fit, smaller tick circle */
@media (max-width: 359px) {
  .bk-q .chips-card { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 6px; }
  .bk-q .chips-card .chip { min-width: 0; padding: 12px 30px 12px 10px; }
  .bk-q .chips-card .chip strong { font-size: .88rem; overflow-wrap: anywhere; }
  .bk-q .chips-card .chip small { font-size: .7rem; }
  .bk-q .chips-card .chip::after { right: 8px; width: 18px; height: 18px; margin-top: -9px; }
}

/* Booking step 1: ceramic coating add-on tick boxes (Deep clean, Single stage correction) */
.bk-addon { margin-top: 14px; padding: 14px; border: 1px dashed rgba(255,255,255,.33); border-radius: 16px; background: rgba(255,255,255,.03); animation: fltIn .4s cubic-bezier(.2,.8,.2,1); }
.bk-addon-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 10px; }
.bk-addon-h b { font: 800 italic 1rem "Saira Semi Condensed", sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.bk-addon-h span { font-size: .8rem; color: var(--muted); }
.bk-extra-h { margin-top: 14px; }
.addon-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.addon { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; position: relative; padding: 10px 10px 10px 38px; border-radius: 12px; border: 1px solid rgba(255,255,255,.24); background: rgba(10,12,18,.6); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background .2s; min-width: 0; }
.addon[hidden] { display: none; }
.addon strong { font: 700 .92rem "Saira Semi Condensed", sans-serif; }
.addon small { font-size: .75rem; color: var(--muted); }
.addon-box { position: absolute; left: 11px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 5px; border: 2px solid rgba(255,255,255,.66); display: grid; place-items: center; }
.addon[aria-pressed="true"] { border-color: var(--accent); background: rgba(255,255,255,.11); }
.addon[aria-pressed="true"] .addon-box { background: #fff; border-color: #fff; }
.addon[aria-pressed="true"] .addon-box::after { content: "\2713"; color: #0a0b0e; font-size: .7rem; font-weight: 800; }
.bk-addon-go { margin-top: 12px; width: 100%; justify-content: center; }
@media (max-width: 420px) { .addon-chips { grid-template-columns: minmax(0, 1fr); } }

/* summary: "+ Add ceramic coating" for packages that can take it */
.bk-addon-offer { margin: 8px 0 0; }
.bk-addon-offer .bk-edit { font-weight: 700; }

/* add-on boxes that can't be ticked for the picked package: greyed, with the reason in place of the price */
.addon.na { cursor: default; opacity: .6; border-style: dashed; border-color: rgba(255,255,255,.18); background: rgba(10,12,18,.35); }
.addon.na small { color: #e9ecf1; }
.addon.na .addon-box { border-color: rgba(255,255,255,.25); }

/* Maintenance photo step on the last booking step: just the notice (.deposit); js/booking.js shows it for a Maintenance. */

/* 9. The new unit (#unit): a row of big photos under Meet Lewis - arrows or keys on a computer, swiped when it does not fit; stacked
   on a phone (13b). Every .unit-slide is one photo at the same height; its width follows the photo (give the <img> width= and height=). */
#unit { padding-top: 0; }
.unit-gal { position: relative; --uh: clamp(210px, 56vw, 330px); }
@media (min-width: 861px) { .unit-gal { --uh: clamp(320px, 36vw, 500px); } }
.unit-track {
  position: relative;
  display: flex;
  gap: 14px;
  margin: 0 -20px;
  padding: 6px 20px 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 20px;
  scrollbar-width: none;
  outline-offset: -4px;
}
.unit-track::-webkit-scrollbar { display: none; }
.unit-slide {
  position: relative;
  flex: 0 0 auto;
  height: var(--uh);
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  scroll-snap-align: start;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-2);
  box-shadow: 0 10px 26px rgba(0,0,0,.4);
}
.unit-slide img { display: block; height: 100%; width: auto; max-width: 100%; aspect-ratio: auto 3/2; object-fit: cover; }
.unit-slide figcaption { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(10,12,18,.72); font-size: .85rem; }
.unit-nav {
  position: absolute;
  top: calc(var(--uh) / 2 + 6px);
  z-index: 2;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(10,12,18,.72);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: opacity .2s, border-color .2s, box-shadow .2s;
}
.unit-nav:hover { border-color: var(--accent); box-shadow: 0 0 20px rgba(255,255,255,.18); }
.unit-nav:disabled { opacity: 0; pointer-events: none; }
.unit-prev { left: 12px; }
.unit-next { right: 12px; }
@media (hover: none) { .unit-nav { display: none; } }
.unit-count { margin: 2px 0 0; text-align: right; color: var(--muted); font-size: .85rem; letter-spacing: .08em; }
.unit-gal[data-n="1"] .unit-nav, .unit-gal[data-n="1"] .unit-count { display: none; }
/* one photo only: show it whole (never cropped), as large as fits, centred - a portrait photo stays portrait */
.unit-gal[data-n="1"] .unit-track { justify-content: center; }
.unit-gal[data-n="1"] .unit-slide { width: auto; height: auto; }
.unit-gal[data-n="1"] .unit-slide img { width: auto; height: auto; max-width: 100%; max-height: min(78vh, 680px); object-fit: contain; }

/* the video in the row (js/unit.js): the poster picture sets the slide's width (9:16), the video and the play button sit on top.
   .is-on = the video has been tapped (it shows, with the browser's controls); .is-loading = until its first picture plays. */
.unit-vid video {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}
.unit-vid.is-on video { opacity: 1; pointer-events: auto; }
.unit-play {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  padding: 0 12px 11%;
  border: 0;
  color: #fff;
  font: inherit;
  text-align: center;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(8,12,22,.08), rgba(8,12,22,.5));
}
.unit-play:focus-visible { outline: 3px solid #fff; outline-offset: -8px; }
.unit-play-ic {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--solid);
  box-shadow: 0 0 0 6px rgba(255,255,255,.15), 0 0 30px rgba(255,255,255,.32);
}
.unit-play-ic svg { width: 30px; height: 30px; margin-left: 3px; }
.unit-play-lbl {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(10,12,18,.72);
  font-family: "Saira Semi Condensed", sans-serif;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.unit-play-sub { padding: 2px 10px; border-radius: 999px; background: rgba(10,12,18,.55); font-size: .8rem; color: #e9ecf1; }
.unit-vid.is-loading .unit-play-sub { visibility: hidden; }
.unit-vid.is-on .unit-play { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s, visibility 0s .25s; }
.unit-vid.is-on.is-loading .unit-play { opacity: 1; visibility: visible; pointer-events: auto; transition: none; }
.motion .unit-play-ic { animation: ppPulse 1.8s ease-in-out infinite; }

/* with the video in the row the slides are bigger (a talking video would be tiny at photo-strip size). On a computer and a tablet the photo
   and the video sit side by side, centred (the row swipes if they do not fit); on a phone they are stacked (13b). .is-fit (js/unit.js):
   everything is on screen, so it is centred and there is no counter. */
.unit-gal.has-video { --uh: clamp(300px, min(100vw, 62vh), 420px); }
.unit-gal.has-video .unit-track { align-items: center; }
.unit-gal.has-video .unit-vid { height: calc(var(--uh) * 1.25); } /* on a phone the video is taller than the photo, so it is bigger and still peeks in */
@media (min-width: 861px) {
  .unit-gal.has-video { --uh: clamp(440px, min(66vw, 76vh), 720px); }
  .unit-gal.has-video .unit-vid { height: var(--uh); } /* on a computer both are on screen at once: the same height */
}
.unit-track.is-fit { justify-content: center; }
.unit-count:empty { display: none; }

/* 11. Later additions and fixes. Later rules win, so these sit at the end. */

/* 11a. Add-on chips: as many columns as fit, never narrower than the longest word ("Decontamination", about 101px, plus the
   tick box) needs. At 424-480px wide three columns made that word stick out of its card. A word that still cannot fit breaks. */
.addon-chips { grid-template-columns: repeat(auto-fit, minmax(min(100%, 156px), 1fr)); }
.addon strong { overflow-wrap: anywhere; hyphens: auto; }

/* 11b. Pause / play and restart buttons: exactly the full-screen button's look (solid grey, light ring and glow), so they show on
   bright pictures. The Meet Lewis video, the unit video and the reel player all use them; the big "paused" panel on those
   videos keeps its own look. (Same values as the final .fs-btn rule above.) */
.meet-vid .pp-btn, .rv-btn {
  background: var(--solid);
  border: 1px solid #e9ecf1;
  box-shadow: 0 0 0 2px rgba(255,255,255,.21), 0 6px 18px rgba(255,255,255,.23);
  backdrop-filter: none;
  transition: background .2s, border-color .2s, transform .12s ease, filter .12s ease;
}
.meet-vid:not(.is-paused) .pp-btn:hover, .rv-btn:hover { border-color: var(--accent); background: #3b4049; }

/* 11c. Products on your car: the icon tiles have a soft glow underneath and the strip was only as tall as the tiles, so the glow
   and the tile's lower edge were cut off. Room above and below (taken off the section's own padding). */
.brands { padding: 22px 0 16px; }
.brands-marq { padding: 14px 0; }

/* 11d. The unit video has the Meet Lewis player. Its slide carries the class meet-vid too, so the volume pill, the pause and
   full-screen buttons, the progress bar, the "Paused - tap to play" panel and the full-screen look all come from the Meet Lewis
   styles. These rules only keep the controls out of the way until the video is tapped, and cover what differs: the slide's width
   comes from the poster picture (not a fixed 9/16), and the controls sit above the video. */
.unit-vid { aspect-ratio: auto; }
.unit-vid:not(.is-on) .vol, .unit-vid:not(.is-on) .pp-btn, .unit-vid:not(.is-on) .fs-btn, .unit-vid:not(.is-on) .scrub,
.unit-vid.is-loading .vol, .unit-vid.is-loading .pp-btn, .unit-vid.is-loading .fs-btn, .unit-vid.is-loading .scrub { display: none; }
.unit-vid .vol { z-index: 8; }
.unit-vid.is-on:not(.is-loading) .unit-poster { visibility: hidden; }
.unit-vid.is-fs video { background: #000; }

/* 11e. Products on your car, the scroller: a finger on it holds it still (js/packages.js adds .hold), and the lap time follows the
   strip's width so it moves at the same speed on every screen (--roll). */
.brands-track { animation-duration: var(--roll, 46s); }
.brands-rows.hold .brands-track { animation-play-state: paused; }
/* 11f. Brand logos in the products strip (Rupes, Flex, Kranzle): shown exactly as supplied, never recoloured or rounded
   (Rupes' brand guide says its logo must not be altered). The Kranzle wordmark is blue on a transparent background and
   would vanish on the dark page, so it sits on a plain white plate: 36px of logo + 11px of plate above and below = 58px, a little
   under the 64px of the other logos (phones: 32px + 10px + 10px = 52px against 56px). The logos were 40px (30px on phones) and
   looked small; the Rupes file is only 75px square, so it is the one that gets soft first if they are made any larger. */
.brands-track img.br-logo { display: block; width: auto; border-radius: 0; }
.brands-track img.br-plate { height: 36px; padding: 11px 20px; background: #fff; box-sizing: content-box; }
@media (max-width: 760px) {
  .brands-track img.br-plate { height: 32px; padding: 10px 18px; }
}
/* 11g. Two rows: a row of logos over a row of benefits. Each row is a marquee of its own (.brands-logos and .brands-perks inside
   .brands-rows): its list written out twice plus a copy, so the loop is seamless. On every screen the rows scroll edge to edge, the
   logos to the left and the benefits to the right, at the same speed. A row stops while the mouse is over it, and both stop while a
   finger or the mouse button is down. Each lap is at least as wide as the screen (on a very wide screen the items are spread out
   evenly), so the loop never shows a gap. The fade at the edges is 10% on a computer and narrow (4%) on a phone or tablet, so
   nearly the whole width shows logos there. Reduced motion: the still rows at every width, centred; on a phone they wrap (PPL,
   Rupes and Flex side by side, Kranzle, then one benefit per row). */
.brands-rows { display: grid; }
.brands-perks .brands-track { animation-direction: reverse; }
.brands-track { min-width: 100%; justify-content: space-around; }
@media (max-width: 1000px) {
  .brands-marq {
    -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .brands-track {
    animation: none;
    min-width: 0;
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px 44px;
    max-width: 1000px;
    padding: 0 16px;
  }
  .brands-track[aria-hidden] { display: none; }
  .brands-marq { justify-content: center; -webkit-mask: none; mask: none; flex-wrap: wrap; }
  .brands-logos .brands-track li:nth-child(n+5), .brands-perks .brands-track li:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .brands-track { gap: 22px 24px; max-width: 100%; }
}
/* 12. "Check and send": the lines that add up to the price (package, ceramic coating, extras), then the Total row below them. */
.bk-lines {
  list-style: none;
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.bk-lines li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: .88rem;
  line-height: 1.35;
}
.bk-lines li span { color: var(--muted); }
.bk-lines li b { font-weight: 600; color: var(--text); white-space: nowrap; }
.bk-lines + .bk-price { margin-top: 8px; }
/* 13. "Take a look inside": the header sits under the centred lamp and above a centred row of pictures, so it is centred too
   (it was left-aligned, which lined up with nothing, and the paragraph left a short last line). The eyebrow gets a matching
   bar on its right so it stays balanced. */
#unit .section-head { max-width: 40rem; margin: 0 auto 40px; text-align: center; }
#unit .section-head p { text-wrap: balance; }
#unit .eyebrow::after {
  content: "";
  width: 28px;
  height: 2px;
  background: linear-gradient(270deg,transparent,var(--accent));
  box-shadow: 0 0 10px rgba(255,255,255,.45);
}
/* 13b. The new unit on a phone (760px and narrower): the photo and the video are stacked one under the other instead of being
   swiped sideways. Each slide is as wide as the screen allows and as tall as fits, never cropped (like a single photo), so a
   portrait photo and the 9:16 video stay portrait. Nothing scrolls sideways, so the arrows and the counter are off. The space
   under the video is kept small: the row needed room under it for its shadow, a stack does not, and the section's own bottom
   padding plus the Packages section's top padding made a gap of 150 to 250px. Now it is 16px + 64px = 80px on every phone width
   (the Packages rule only applies while the unit section is showing). Wider screens keep the row (9. and 11d above). */
@media (max-width: 760px) {
  #unit { padding-bottom: 16px; }
  #unit:not([hidden]) + #packages { padding-top: 64px; }
  .unit-track {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 6px 0 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .unit-gal .unit-slide,
  .unit-gal.has-video .unit-slide {
    width: auto;
    height: auto;
    max-width: 100%;
  }
  .unit-gal .unit-slide img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(78vh, 680px);
    object-fit: contain;
  }
  .unit-nav,
  .unit-count { display: none; }
}
/* Three price tiles (Ceramic coating, Add-ons) in the two-column phone layout: the last one takes the whole row instead of leaving a gap. */
@media (max-width: 760px) {
  .pkd-sizes.pkd-3 > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* 13c. Package panels, tidied the same way in every panel. Every price tile is the same height - the name at the top, the price at the
   bottom - so the tiles line up inside a panel and look the same from one panel to the next (the Ceramic coating tiles have no short
   line under the name and were shorter than the rest). On a phone the Photos needed / Deposit notice gives its text more width: a
   smaller icon and less padding and gap, so the Maintenance notice is a line shorter. */
.pkd-sizes div { min-height: 112px; }
.pkd-sizes b { margin-top: auto; }
@media (max-width: 760px) {
  .pkd-note { gap: 10px; padding: 12px 12px; }
  .pkd-note .dep-ic { width: 34px; height: 34px; }
  .pkd-note .dep-ic svg { width: 18px; height: 18px; }
}
/* 13d. Animations that are off screen are paused (js/perf.js, pauseOffscreen, adds .anim-off). About 40 decorations run for ever and nine in
   ten are far off screen at any moment; paused they cost nothing, and they carry on from the same point when they come back. */
.anim-off,
.anim-off::before,
.anim-off::after { animation-play-state: paused !important; }