/* =====================================================================
   Polish layer (2026-11-06, from the website audit).
   Loaded LAST on every page, so it wins over the page styles.
   To undo any single fix, delete its block. The carousel is deliberately untouched.
   ===================================================================== */

/* ---------- Readability: brighter muted text, larger small labels ---------- */
:root { --muted: rgba(244, 241, 234, 0.78); }
.label { font-size: 0.75rem; letter-spacing: 0.24em; }

/* ---------- Fonts: retire EB Garamond (three fonts, per the brand guide) ----------
   Cinzel = headlines + names · Jost = reading text · Bodoni = logo + italic quotes */
:root { --serif: "Jost", -apple-system, sans-serif; }
.slide p { font-family: "Bodoni Moda", serif; font-style: italic; font-weight: 400; line-height: 1.35; }
.hcard .caption .name,
.lb .lb-name, .swatch .sname, .card.soon .stitle,
.step .num, .process-visual .tag {
  font-family: "Cinzel", serif; font-weight: 500; letter-spacing: 0.06em;
}
.hcard .caption .name { font-size: clamp(1.15rem, 1.7vw, 1.6rem); }
.faq-q { font-weight: 400; font-size: clamp(1.02rem, 1.5vw, 1.18rem); }
.p-intro p { font-weight: 300; }

/* ---------- "Trusted by": one tidy, quieter row instead of a wall of big names ---------- */
.clients .names { gap: 12px 34px; max-width: 900px; }
.clients .names span {
  font-family: "Cinzel", serif; font-weight: 400; letter-spacing: 0.08em;
  font-size: clamp(0.9rem, 1.3vw, 1.1rem); color: rgba(194, 163, 107, 0.9);
}

/* ---------- Nav: frosted navy layer once you scroll past the top ----------
   Lives on ::after (not on nav itself) so the full-screen mobile menu keeps working. */
nav::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(28, 36, 51, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(244, 241, 234, 0.06);
  opacity: 0; transition: opacity 0.3s ease;
}
nav.scrolled::after { opacity: 1; }
nav.scrolled::before { opacity: 0; }
nav::before { transition: opacity 0.3s ease; }
nav { transition: padding 0.3s ease; }
@media (min-width: 861px) { nav.scrolled { padding-top: 16px; padding-bottom: 16px; } }
@media (max-width: 860px) { nav.scrolled { padding-top: 14px; padding-bottom: 14px; } }
@media (prefers-reduced-transparency: reduce) {
  nav::after { background: #1C2433; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Press feedback: respond the instant a finger/mouse goes down ---------- */
a, button, .pillar, .hcard { -webkit-tap-highlight-color: transparent; }
.btn, .faq-q, .dots button, .social a, nav .links a, .nav-toggle {
  transition-property: background-color, color, border-color, opacity, transform;
}
.btn:active, .social a:active, .nav-toggle:active { transform: scale(0.97); transition-duration: 0.08s; }
nav .links a:not(.btn):active, .faq-q:active { opacity: 0.6; transition-duration: 0.08s; }
.hcard:active, .pillar:active { filter: brightness(0.85); }

/* ---------- Phones/tablets: hover styles shouldn't stick after a tap ---------- */
@media (hover: none) {
  .btn:hover, .btn.primary:hover { background: var(--accent); color: #1a1a1a; border-color: var(--accent); }
  .hero-buttons .btn:not(.primary):hover { background: transparent; color: #fff; border-color: var(--accent); }
  .brand-cta .btn:hover, .p-cta .btn:hover { background: var(--accent); color: #1C2433; border-color: var(--accent); }
  .social a:hover { background: transparent; color: #f4f1ea; border-color: rgba(244, 241, 234, 0.25); }
  /* service panels: no hover on touch, so show every description and keep panels even */
  .services:hover .pillar, .services:hover .pillar:hover { flex: 1 1 0; filter: none; }
  .pillar p { opacity: 1; transform: none; }
}

/* ---------- Bigger tap target on the testimonial dots (look unchanged) ---------- */
.dots { gap: 4px; }
.dots button { position: relative; margin: 0 4px; }
.dots button::before { content: ""; position: absolute; inset: -18px -10px; }

/* ---------- iPhone: full-screen sections that don't jump with the address bar ---------- */
.hero, .final { height: 100svh; }

/* ---------- Forms: 16px text so iPhone doesn't zoom in on tap ---------- */
input, select, textarea { font-size: 16px !important; }

/* ---------- Enquire headline: keep it inside the margins on small phones ---------- */
@media (max-width: 420px) { .enq-head h1 { font-size: 1.85rem !important; } }

/* ---------- Reduce Motion: calm everything (scroll carousel itself left as is) ---------- */
@media (prefers-reduced-motion: reduce) {
  .pillar, .pillar p, .faq-a, .faq-q::after, .hcard .explore, nav, nav::after, nav::before {
    transition-duration: 0.01ms !important;
  }
  .slide { transition: opacity 0.3s ease !important; }
}

/* ---------- Phone menu: navy instead of the old pre-rebrand black ---------- */
@media (max-width: 860px) { nav .links { background: #1C2433 !important; } }