/* Self-hosted Google Fonts, latin subset, variable weight axis.
   Google serves one variable file per family+style, so the same bytes cover every
   weight we use: storing them per-weight would ship the identical file 3 times.
   Self-hosting removes a render-blocking third-party stylesheet (~780ms) and the
   DNS/TLS handshake to fonts.googleapis.com, and keeps visitor IPs off Google's
   servers, which matters for a UK client under GDPR. */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-variable.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-variable-italic.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/montserrat-variable.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/montserrat-variable-italic.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The Diamond Setter — Bespoke Engagement Rings landing page
   Design tokens transcribed from the approved Claude Design export
   (TDS-LP-Desktop.dc.html / TDS-LP-Mobile.dc.html). Mobile-first, 390 / 768 / 1280. */

:root {
  --navy-950: #16242f;
  --navy-900: #1e3140;
  --navy-800: #22384a;
  --navy-700: #2c4557;
  --navy-600: #27404f;
  --ink: #26313a;
  --body: #4a545c;
  --body-soft: #5a646c;
  --muted: #5c656e;   /* AA on white 5.93, cream 5.31 (was #707a83 = 4.37) */
  --faint: #636d76;   /* AA on white 5.28, cream 4.72 (was #98a1a8 = 2.62) */
  --hairline-muted: #c3c9ce;
  --gold-600: #7d6c33;
  --gold-500: #a08c45;
  --gold-400: #b39d55;
  --gold-300: #c9b878;
  --gold-border: #d4c9a8;
  --cream: #f5f2ec;
  --cream-line: #ece8de;
  --line: #e8e4da;
  --line-2: #e5e0d5;
  --input-line: #d8d2c6;
  --input-line-2: #d2ccc0;
  --error: #b04638;
  --white: #ffffff;
  --calendar-empty: #e2dccf;
  --skeleton: #e8e4da;
  --skeleton-2: #f0ede5;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Montserrat', Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--navy-700); text-decoration: none; }
a:hover { color: var(--gold-600); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}
button { font-family: var(--sans); }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; text-wrap: pretty; }
p { margin: 0; }

@keyframes tdsPulse { 0% { opacity: .4; } 50% { opacity: .85; } 100% { opacity: .4; } }
@keyframes tdsRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .wrap { padding: 0 40px; } }

.btn {
  display: inline-block;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 17px 30px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  text-align: center;
}
@media (min-width: 768px) { .btn { padding: 19px 40px; } }
.btn-primary { background: var(--gold-500); color: #141d24; }
.btn-primary:hover { background: var(--gold-400); color: #141d24; }
.btn-navy { background: var(--navy-700); color: var(--white); }
.btn-navy:hover { background: var(--navy-900); color: var(--white); }
.btn-outline { background: transparent; color: var(--navy-700); border: 1px solid var(--navy-700); }
.btn-outline:hover { background: var(--navy-700); color: var(--white); }
.btn-block { display: block; width: 100%; }

/* ---------- Header ---------- */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--cream-line);
}
.site-header .wrap {
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 768px) { .site-header .wrap { padding: 16px 40px; } }
.logo { display: flex; align-items: center; gap: 8px; }
.logo img { width: 18px; height: 18px; filter: brightness(0); }
.logo span { font-family: var(--serif); font-weight: 600; font-size: 17px; letter-spacing: .04em; color: var(--ink); }
@media (min-width: 768px) { .logo img { width: 21px; height: 21px; } .logo span { font-size: 19px; } }
.header-call { font-size: 12.5px; color: var(--body); }
.header-call a { color: var(--navy-700); font-weight: 600; border-bottom: 1px solid var(--gold-border); }
@media (min-width: 480px) { .header-call { font-size: 13px; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--navy-950); }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(14,24,32,.80) 0%, rgba(14,24,32,.45) 55%, rgba(14,24,32,.20) 100%);
}
.hero-inner { position: relative; z-index: 2; padding: 56px 20px 44px; text-align: center; }
.hero-content { max-width: 640px; margin: 0 auto; }
@media (min-width: 768px) {
  .hero-inner { padding: 104px 40px 96px; text-align: left; margin: 0 auto; }
  .hero-content { margin: 0; }
}
.hero-eyebrow {
  margin: 0 0 16px; font-size: 11px; font-weight: 600; letter-spacing: .3em;
  text-transform: uppercase; color: var(--gold-300);
}
.hero h1 {
  margin: 0 0 18px; font-weight: 400; font-size: 31px; line-height: 1.2; color: var(--white);
}
@media (min-width: 768px) { .hero h1 { font-size: 46px; margin-bottom: 22px; } }
@media (min-width: 1280px) { .hero h1 { font-size: 58px; line-height: 1.14; margin-bottom: 26px; } }
.hero-sub {
  margin: 0 0 28px; font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,.88); max-width: 560px;
}
@media (min-width: 768px) { .hero-sub { font-size: 17px; line-height: 1.75; margin-bottom: 36px; } }
.hero-ctas { display: flex; flex-direction: column; align-items: center; gap: 18px; }
@media (min-width: 768px) { .hero-ctas { flex-direction: row; align-items: center; gap: 28px; } }
.hero-call { color: var(--white); font-size: 14px; border-bottom: 1px solid rgba(255,255,255,.5); }
.hero-call:hover { color: var(--gold-300); border-bottom-color: var(--gold-300); }
.hero-trust {
  margin: 24px 0 0; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.78);
}
@media (min-width: 768px) { .hero-trust { margin-top: 30px; font-size: 12.5px; } }
.stars { color: var(--gold-300); letter-spacing: .2em; }

/* ---------- Trust strip ---------- */
.trust-strip { background: var(--white); border-bottom: 1px solid var(--cream-line); }
.trust-strip .wrap {
  padding: 28px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
}
@media (min-width: 768px) {
  .trust-strip .wrap { grid-template-columns: repeat(5, 1fr); gap: 30px; padding: 34px 40px; }
}
.trust-item { text-align: center; }
.trust-item svg { display: inline-block; }
.trust-item p.t { margin: 10px 0 6px; font-family: var(--serif); font-weight: 600; font-size: 16px; color: var(--ink); }
.trust-item p.d { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
@media (min-width: 768px) { .trust-item p.t { font-size: 18px; } .trust-item p.d { font-size: 12.5px; } }

/* ---------- Empathy ---------- */
.empathy { background: var(--cream); }
.empathy .wrap { max-width: 680px; padding: 64px 24px; text-align: center; }
@media (min-width: 768px) { .empathy .wrap { padding: 100px 40px; } }
.empathy h2 { font-size: 29px; line-height: 1.25; margin-bottom: 24px; }
@media (min-width: 768px) { .empathy h2 { font-size: 40px; line-height: 1.2; margin-bottom: 32px; } }
.empathy p.body-copy { font-size: 15.5px; line-height: 1.8; color: var(--body); margin-bottom: 20px; }
@media (min-width: 768px) { .empathy p.body-copy { font-size: 16.5px; line-height: 1.85; margin-bottom: 22px; } }
.empathy .pivot {
  margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 21px; line-height: 1.4; color: var(--navy-700);
}
@media (min-width: 768px) { .empathy .pivot { font-size: 26px; line-height: 1.45; } }

/* ---------- Why here ---------- */
.why-here { background: var(--white); }
.why-here .wrap { padding: 56px 20px; }
@media (min-width: 768px) {
  .why-here .wrap { padding: 104px 40px; display: grid; grid-template-columns: 380px 1fr; gap: 56px; align-items: stretch; }
}
@media (min-width: 1280px) { .why-here .wrap { grid-template-columns: 450px 1fr; gap: 76px; } }
.why-photo { position: relative; overflow: hidden; min-height: 260px; margin-bottom: 32px; }
@media (min-width: 768px) { .why-photo { min-height: 100%; margin-bottom: 0; } }
/* 50% 50%: the 45% offset was tuned to centre the two middle people in the old
   landscape frame. The replacement is portrait with the group already centred. */
.why-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.why-photo .frame { position: absolute; inset: 14px; border: 1px solid rgba(255,255,255,.45); pointer-events: none; }
.why-here h2 { font-size: 28px; line-height: 1.28; margin-bottom: 16px; }
@media (min-width: 768px) { .why-here h2 { font-size: 38px; line-height: 1.22; margin-bottom: 20px; } }
.why-here .intro { font-size: 15px; line-height: 1.7; color: var(--body); margin-bottom: 8px; }
.why-row { border-top: 1px solid var(--line); padding: 18px 0; }
.why-row:last-child { border-bottom: 1px solid var(--line); }
.why-row p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--body-soft); }
.why-row strong { color: var(--ink); font-weight: 600; }

/* ---------- Process ---------- */
.process { background: var(--cream); }
.process .wrap { padding: 56px 20px; text-align: center; }
@media (min-width: 768px) { .process .wrap { padding: 104px 40px; } }
.process h2 { font-size: 28px; line-height: 1.28; margin: 0 auto 40px; max-width: 680px; }
@media (min-width: 768px) { .process h2 { font-size: 40px; line-height: 1.22; margin-bottom: 64px; } }
.process-steps {
  position: relative; display: flex; flex-direction: column; gap: 40px; text-align: left;
}
@media (min-width: 768px) {
  .process-steps {
    flex-direction: row; text-align: center; gap: 24px;
  }
  .process-steps::before {
    content: ''; position: absolute; top: 48px; left: 9%; right: 9%; height: 1px; background: var(--gold-border); z-index: 0;
  }
}
.step { position: relative; z-index: 1; display: flex; gap: 16px; align-items: flex-start; }
@media (min-width: 768px) { .step { flex: 1; flex-direction: column; align-items: center; gap: 0; } }
.step-photo {
  width: 72px; height: 72px; flex-shrink: 0; border-radius: 50%; background: var(--white);
  padding: 4px; border: 1px solid var(--gold-border);
}
@media (min-width: 768px) { .step-photo { width: 96px; height: 96px; padding: 5px; margin: 0 auto; } }
.step-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.step-num { margin: 0 0 2px; font-family: var(--serif); font-weight: 600; font-size: 14px; letter-spacing: .14em; color: var(--gold-600); }
@media (min-width: 768px) { .step-num { margin: 18px 0 4px; } }
.step h3 { margin: 0 0 8px; font-weight: 600; font-size: 19px; color: var(--ink); }
.step p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--muted); }
.process-note { margin: 40px 0 0; font-style: italic; font-size: 13.5px; color: var(--muted); }
@media (min-width: 768px) { .process-note { margin-top: 52px; font-size: 14px; } }
.process .btn { margin-top: 28px; }
@media (min-width: 768px) { .process .btn { margin-top: 32px; } }

/* ---------- Makers ---------- */
.makers { background: var(--white); }
.makers .wrap { padding: 56px 20px; }
@media (min-width: 768px) { .makers .wrap { padding: 104px 40px; } }
.makers h2 { font-size: 28px; line-height: 1.25; text-align: center; margin-bottom: 16px; }
@media (min-width: 768px) { .makers h2 { font-size: 40px; margin-bottom: 20px; } }
.makers .intro { font-size: 15px; line-height: 1.7; color: var(--body); text-align: center; max-width: 660px; margin: 0 auto; }
.makers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
@media (min-width: 768px) { .makers-grid { grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 56px; } }
.maker-photo { aspect-ratio: 3/4; position: relative; overflow: hidden; background: var(--cream); }
.maker-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.maker-name { margin: 14px 0 2px; font-weight: 600; font-size: 19px; color: var(--ink); }
@media (min-width: 768px) { .maker-name { font-size: 23px; } }
.maker-role { margin: 0 0 8px; font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-600); }
@media (min-width: 768px) { .maker-role { font-size: 10.5px; } }
.maker-line { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
@media (min-width: 768px) { .maker-line { font-size: 13.5px; } }
.makers-footer { margin: 32px 0 0; text-align: center; font-size: 13.5px; color: var(--muted); }
@media (min-width: 768px) { .makers-footer { margin-top: 44px; font-size: 14px; } }

/* ---------- Gallery ---------- */
.gallery { background: var(--cream); }
.gallery .wrap { padding: 56px 20px; }
@media (min-width: 768px) { .gallery .wrap { padding: 104px 40px; } }
.gallery h2 { font-size: 28px; text-align: center; margin-bottom: 16px; }
@media (min-width: 768px) { .gallery h2 { font-size: 40px; margin-bottom: 20px; } }
.gallery .intro { font-size: 15px; line-height: 1.7; color: var(--body); text-align: center; max-width: 720px; margin: 0 auto; }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px; }
@media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; } }
.gallery-item { aspect-ratio: 1/1; overflow: hidden; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-footer { text-align: center; margin-top: 36px; }
@media (min-width: 768px) { .gallery-footer { margin-top: 48px; } }
.gallery-footer .pivot { margin: 0 0 22px; font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--navy-700); }
@media (min-width: 768px) { .gallery-footer .pivot { font-size: 21px; margin-bottom: 26px; } }

/* ---------- What happens (objection handling) ---------- */
.consult-detail { background: var(--white); }
.consult-detail .wrap { padding: 56px 20px; }
@media (min-width: 768px) { .consult-detail .wrap { padding: 104px 40px; } }
.consult-detail h2 { font-size: 27px; text-align: center; margin-bottom: 14px; }
@media (min-width: 768px) { .consult-detail h2 { font-size: 40px; margin-bottom: 18px; } }
.consult-detail .intro { font-size: 15px; line-height: 1.7; color: var(--body); text-align: center; max-width: 600px; margin: 0 auto; }
.expect-grid {
  max-width: 960px; margin: 36px auto 0; border: 1px solid var(--line-2);
  display: grid; grid-template-columns: 1fr;
}
@media (min-width: 768px) { .expect-grid { grid-template-columns: 1fr 1fr; margin-top: 52px; } }
.expect-col { padding: 28px 24px; }
@media (min-width: 768px) { .expect-col { padding: 44px 48px; } }
.expect-col.left { border-bottom: 1px solid var(--line-2); }
@media (min-width: 768px) { .expect-col.left { border-bottom: none; border-right: 1px solid var(--line-2); } }
.expect-col.right { background: #fdfcfb; }
.expect-label { margin: 0 0 20px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.expect-col.left .expect-label { color: var(--gold-600); }
.expect-col.right .expect-label { color: var(--faint); }
.expect-list { display: flex; flex-direction: column; gap: 14px; }
.expect-list .row { display: flex; gap: 12px; }
.expect-list .row span.mark { flex-shrink: 0; font-weight: 600; }
.expect-col.left .mark { color: var(--gold-600); }
.expect-col.right .mark { color: var(--faint); }
.expect-list .row p { font-size: 14.5px; line-height: 1.65; color: var(--body); }
.consult-close { margin: 32px 0 0; text-align: center; font-size: 15.5px; font-weight: 600; color: var(--navy-700); }
@media (min-width: 768px) { .consult-close { margin-top: 44px; font-size: 17px; } }

/* ---------- Reviews ---------- */
.reviews { background: var(--cream); }
.reviews .wrap { padding: 56px 20px; }
@media (min-width: 768px) { .reviews .wrap { padding: 104px 40px; } }
.reviews-head { text-align: center; margin-bottom: 36px; }
@media (min-width: 768px) { .reviews-head { margin-bottom: 52px; } }
.reviews-eyebrow { margin: 0 0 10px; font-size: 12.5px; letter-spacing: .06em; color: var(--muted); }
.reviews-eyebrow .stars { font-size: 15px; letter-spacing: .22em; }
@media (min-width: 768px) { .reviews-eyebrow { font-size: 13.5px; } }
.reviews-head h2 { font-size: 27px; margin-bottom: 8px; }
@media (min-width: 768px) { .reviews-head h2 { font-size: 38px; } }
/* Required disclosure: the cards are condensed summaries, not verbatim quotes. */
.reviews-note { margin: 0; font-size: 12px; letter-spacing: .04em; color: var(--muted); }
/* Carousel at every breakpoint: native scroll-snap for touch and trackpad, with
   arrows, dots and keyboard control layered on for desktop, where there is no swipe. */
.reviews-carousel { position: relative; display: flex; align-items: center; gap: 10px; }
.reviews-track {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 4px; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; flex: 1 1 auto;
}
.reviews-track::-webkit-scrollbar { display: none; }
.reviews-track:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 4px; }
@media (min-width: 768px) { .reviews-track { gap: 22px; } }
.review-card {
  /* start, not center: paging targets each card's left edge, and centre-snapping
     overrides that by pulling to whichever card centre is nearest.
     Widths leave a sliver of the next card visible, which is what signals that the
     row scrolls: 1 card on mobile, 2 from 768, 3 from 1280 (content spec). */
  flex: 0 0 85%; scroll-snap-align: start; background: var(--white); padding: 26px;
  display: flex; flex-direction: column; min-height: 300px;
}
@media (min-width: 768px) { .review-card { flex: 0 0 46%; padding: 30px; min-height: 340px; } }
@media (min-width: 1280px) { .review-card { flex: 0 0 30.5%; padding: 34px; } }

.rev-spacer { flex: 0 0 0px; pointer-events: none; }
.rev-arrow {
  flex: 0 0 auto; width: 42px; height: 42px; border: 1px solid var(--gold-border);
  background: var(--white); color: var(--navy-700); cursor: pointer;
  display: none; align-items: center; justify-content: center; transition: background .2s, color .2s;
}
.rev-arrow:hover:not(:disabled) { background: var(--navy-700); color: var(--white); border-color: var(--navy-700); }
.rev-arrow:disabled { opacity: .3; cursor: default; }
/* Arrows only where there is no swipe affordance; touch users scroll directly. */
@media (min-width: 768px) { .rev-arrow { display: flex; } }

/* The content spec asks for 44x44 dot targets. On mobile every card is its own page,
   so ten dots at 44px need 440px and cannot fit a 390px screen on one line: the row
   wraps rather than shrinking the targets below spec. */
.rev-dots { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
/* The 9px dot is drawn inside a full-size target. Padding out with a pseudo-element
   does not work: the audit measures the element's own box, not a decorative overlay. */
.rev-dot {
  width: 44px; height: 44px; padding: 0; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.rev-dot::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--gold-500); background: transparent; transition: background .2s;
}
.rev-dot[aria-selected="true"]::before { background: var(--gold-500); }
.review-card .stars { margin: 0 0 14px; font-size: 12px; letter-spacing: .2em; color: var(--gold-500); }
/* Not italicised and not quote-marked: these are summaries, and styling them as
   quotations would imply the customer's exact words (CAP Code 3.45). The review text
   is the largest element in the card, per the content spec. */
/* The name is pushed to the foot of the card by margin-top:auto, so on the longest
   reviews the only thing separating the two is this margin. It therefore has to carry
   the full gap on its own rather than relying on leftover space. */
/* The name is pushed to the foot of the card by margin-top:auto, so on the longest
   reviews this margin is the only thing separating the two. Expressed in em against
   the text's own 1.72 line-height, it is always at least one clear blank line. */
.review-card .review-text { margin: 0 0 2.2em; font-size: 14.5px; line-height: 1.72; color: var(--body); }
@media (min-width: 768px) { .review-card .review-text { font-size: 15px; } }
.review-card .name { margin: auto 0 0; font-weight: 600; font-size: 17px; color: var(--ink); }

/* ---------- Scheduler ---------- */
.scheduler { background: var(--navy-800); }
.scheduler .wrap { padding: 56px 14px; }
@media (min-width: 768px) {
  .scheduler .wrap { padding: 72px 40px; display: grid; grid-template-columns: 1fr; gap: 40px; }
}
@media (min-width: 1024px) { .scheduler .wrap { grid-template-columns: 380px 1fr; gap: 56px; align-items: start; padding: 96px 40px; } }
@media (min-width: 1280px) { .scheduler .wrap { grid-template-columns: 420px 1fr; gap: 64px; } }
.sched-info h2 { font-size: 27px; color: var(--white); margin-bottom: 14px; }
@media (min-width: 768px) { .sched-info h2 { font-size: 40px; margin-bottom: 18px; } }
.sched-info .sub { font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,.85); margin-bottom: 22px; }
@media (min-width: 768px) { .sched-info .sub { font-size: 15.5px; margin-bottom: 28px; } }
.sched-ticks { display: flex; flex-direction: column; gap: 13px; }
.sched-ticks .row { display: flex; gap: 12px; }
.sched-ticks .row span.mark { color: var(--gold-300); font-weight: 600; flex-shrink: 0; }
.sched-ticks .row p { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.88); }
.sched-next {
  border: 1px solid rgba(255,255,255,.28); padding: 22px 22px; margin-top: 28px;
}
@media (min-width: 768px) { .sched-next { padding: 26px 28px; margin-top: 34px; } }
.sched-next .label { margin: 0 0 14px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-300); }
.sched-next .row { display: flex; gap: 12px; margin-bottom: 10px; }
.sched-next .row:last-child { margin-bottom: 0; }
.sched-next .row span.n { font-family: var(--serif); font-weight: 600; color: var(--gold-300); flex-shrink: 0; }
.sched-next .row p { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.85); }
.sched-foot { margin: 26px 0 0; font-size: 12px; line-height: 1.8; color: rgba(255,255,255,.62); }
.sched-foot a { color: var(--gold-300); border-bottom: 1px solid rgba(201,184,120,.5); }

.sched-panel { background: var(--white); padding: 26px 16px; margin-top: 32px; }
@media (min-width: 768px) { .sched-panel { padding: 38px 40px; margin-top: 0; } }
.sched-lead { margin: 0 0 22px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cal-nav button {
  width: 36px; height: 36px; border: 1px solid var(--calendar-empty); background: var(--white);
  font-size: 19px; color: var(--navy-700); cursor: pointer;
}
.cal-nav button:disabled { color: #d4d8db; cursor: default; }
.cal-month { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 20px; color: var(--ink); }
.cal-note { margin: 0 0 16px; text-align: center; font-size: 11.5px; color: var(--gold-600); }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 8px; }
.cal-dow span { display: block; text-align: center; font-size: 9.5px; font-weight: 600; letter-spacing: .1em; color: var(--faint); }
.cal-grid { display: flex; flex-direction: column; gap: 3px; }
.cal-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
@media (min-width: 480px) { .cal-dow, .cal-grid, .cal-row { gap: 6px; } }
/* 44px minimum tap target (handover §7.10) */
.cal-day {
  min-height: 44px; min-width: 0; border: 1px solid transparent; background: transparent;
  font-family: var(--sans); font-size: 13.5px; color: var(--hairline-muted); cursor: default;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
@media (min-width: 480px) { .cal-day { font-size: 14px; } }
.cal-day.open { border-color: var(--calendar-empty); color: var(--ink); background: var(--white); cursor: pointer; }
.cal-day.next-avail { border: 1.5px solid var(--gold-500); color: var(--ink); font-weight: 600; background: var(--white); cursor: pointer; }
.cal-day.selected { background: var(--navy-700); border-color: var(--navy-700); color: var(--white); font-weight: 600; cursor: pointer; }
.cal-day[aria-disabled="true"] { cursor: default; color: var(--hairline-muted); }
.cal-day.empty { visibility: hidden; pointer-events: none; }

.slot-block { margin-top: 22px; border-top: 1px solid var(--cream-line); padding-top: 20px; }
.slot-label { margin: 0 0 12px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.slot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 480px) { .slot-grid { grid-template-columns: repeat(4, 1fr); } }
.slot-btn {
  min-height: 44px; padding: 11px 4px; border: 1px solid var(--calendar-empty); background: var(--white);
  font-family: var(--sans); font-size: 13px; color: var(--ink); cursor: pointer;
}
.slot-btn:hover { border-color: var(--gold-500); }
.slot-btn.selected { background: var(--navy-700); border-color: var(--navy-700); color: var(--white); font-weight: 600; }

/* Evening request: a different kind of choice from a fixed time, so it sits apart
   from the grid rather than looking like another slot. */
.slot-evening-wrap { margin-top: 10px; }
.slot-btn.slot-evening {
  width: 100%; border-style: dashed; border-color: var(--gold-500); color: var(--gold-600);
  font-weight: 600; padding: 13px 10px;
}
.slot-btn.slot-evening::after {
  content: ', we will call to agree a time';
  font-weight: 400; color: var(--muted);
}
.slot-btn.slot-evening.selected {
  background: var(--navy-700); border-style: solid; border-color: var(--navy-700); color: var(--white);
}
.slot-btn.slot-evening.selected::after { color: rgba(255,255,255,.75); }

.no-slots { margin-top: 22px; background: var(--cream); padding: 18px 20px; }
.no-slots p { font-size: 13.5px; line-height: 1.7; color: var(--body); }
.no-slots a { color: var(--navy-700); font-weight: 600; }

.skeleton-block { margin-top: 22px; border-top: 1px solid var(--cream-line); padding-top: 20px; }
.skeleton-line { width: 180px; height: 12px; background: var(--skeleton); animation: tdsPulse 1.2s infinite; margin-bottom: 13px; }
.skeleton-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 480px) { .skeleton-grid { grid-template-columns: repeat(4, 1fr); } }
.skeleton-slot { height: 40px; background: var(--skeleton-2); animation: tdsPulse 1.2s infinite; }

.details-block { margin-top: 22px; border-top: 1px solid var(--cream-line); padding-top: 20px; }
.chosen-row { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.chosen-row img { width: 16px; height: 16px; }
.chosen-row p { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.change-btn { margin-left: auto; background: none; border: none; padding: 0; font-family: var(--sans); font-size: 12px; color: var(--gold-600); text-decoration: underline; cursor: pointer; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 480px) { .field-row.two { grid-template-columns: 1fr 1fr; } }
.field { margin-top: 12px; }
.field:first-child, .field-row .field { margin-top: 0; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.field label .req { color: var(--error); }
.field label .opt { font-weight: 400; color: var(--faint); }
.field input, .field textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--input-line); padding: 11px 13px;
  font-family: var(--sans); font-size: 15px; color: var(--ink); background: var(--white); outline: none; resize: vertical;
}
.field input:focus, .field textarea:focus { border-color: var(--navy-700); }
.field.has-error input, .field.has-error textarea { border-color: var(--error); }
.field-error { margin: 6px 0 0; font-size: 12px; color: var(--error); }
.details-block .btn { margin-top: 20px; }
.reassure-line { margin: 12px 0 0; text-align: center; font-size: 12px; color: var(--faint); }

.sched-call { margin: 22px 0 0; border-top: 1px solid var(--cream-line); padding-top: 16px; font-size: 12px; line-height: 1.6; color: var(--faint); text-align: center; }
.sched-call a { color: var(--navy-700); font-weight: 600; }

.success-panel { text-align: center; padding: 24px 8px 20px; }
.success-panel img { width: 40px; height: 40px; margin: 0 auto; }
.success-panel h3 { margin: 18px 0 8px; font-weight: 500; font-size: 24px; line-height: 1.3; color: var(--ink); }
.success-panel .lead { font-size: 13.5px; line-height: 1.7; color: var(--muted); margin-bottom: 22px; }
.success-box { border: 1px solid var(--gold-border); padding: 20px; text-align: left; max-width: 420px; margin: 0 auto; }
.success-box .label { margin: 0 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-600); }
.success-box .when { margin: 0 0 10px; font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--ink); }
.success-box .addr { margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: var(--body); }
.success-box .park { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.success-panel .after { margin: 20px 0 0; font-size: 12px; color: var(--faint); }

/* ---------- FAQ ---------- */
.faq { background: var(--white); }
.faq .wrap { padding: 56px 20px; }
@media (min-width: 768px) { .faq .wrap { padding: 104px 40px; display: grid; grid-template-columns: 1fr; gap: 40px; } }
@media (min-width: 1024px) { .faq .wrap { grid-template-columns: 320px 1fr; gap: 76px; } }
.faq-eyebrow { margin: 0 0 12px; font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-600); }
.faq-intro h2 { font-size: 27px; margin-bottom: 16px; }
@media (min-width: 768px) { .faq-intro h2 { font-size: 40px; margin-bottom: 20px; } }
.wa-link { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.wa-link svg { flex-shrink: 0; }
.faq-intro p { font-size: 13.5px; line-height: 1.7; color: var(--muted); margin-bottom: 24px; }
.faq-intro a { color: var(--navy-700); font-weight: 600; }
.faq-list { margin-top: 32px; }
@media (min-width: 1024px) { .faq-list { margin-top: 0; } }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; background: none; border: none; cursor: pointer; padding: 18px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left;
}
.faq-q span.text { font-family: var(--serif); font-weight: 500; font-size: 17px; color: var(--ink); }
@media (min-width: 768px) { .faq-q span.text { font-size: 21px; } }
.faq-q .chev { display: inline-flex; flex-shrink: 0; transition: transform .25s; }
.faq-q[aria-expanded="true"] .chev { transform: rotate(180deg); }
.faq-a { display: none; }
.faq-a.open { display: block; }
.faq-a p { margin: 0; padding: 0 24px 20px 0; font-size: 13.5px; line-height: 1.75; color: var(--body); }

/* ---------- Closing CTA ---------- */
.closing { position: relative; background: var(--navy-900); overflow: hidden; }
.closing img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .18; }
.closing .wrap { position: relative; z-index: 2; max-width: 760px; padding: 64px 24px; text-align: center; }
@media (min-width: 768px) { .closing .wrap { padding: 110px 40px; } }
.closing h2 { font-size: 32px; color: var(--white); margin-bottom: 16px; }
@media (min-width: 768px) { .closing h2 { font-size: 46px; line-height: 1.15; margin-bottom: 22px; } }
.closing .sub { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.85); max-width: 560px; margin: 0 auto 30px; }
@media (min-width: 768px) { .closing .sub { font-size: 16.5px; margin-bottom: 38px; } }
.closing .details { margin: 36px 0 0; font-size: 13px; line-height: 2; color: rgba(255,255,255,.75); }
.closing .details a { color: rgba(255,255,255,.9); }
.closing .final-line { margin: 22px 0 0; font-size: 11.5px; letter-spacing: .04em; color: rgba(255,255,255,.55); }

/* ---------- Footer ---------- */
/* Extra footer space on mobile so the fixed CTA bar never covers the policy links */
.site-footer { background: var(--navy-950); padding: 16px 20px 96px; text-align: center; }
@media (min-width: 768px) { .site-footer { padding-bottom: 16px; } }
.site-footer p { margin: 0; font-size: 11px; letter-spacing: .03em; color: rgba(255,255,255,.6); }
.site-footer a { color: rgba(255,255,255,.82); }

/* ---------- Floating / sticky CTA ---------- */
.floating-cta {
  display: none; position: fixed; right: 20px; bottom: 20px; z-index: 40;
  animation: tdsRise .45s cubic-bezier(.2,.7,.3,1) both;
}
.floating-cta.show { display: block; }
@media (max-width: 767px) { .floating-cta { display: none !important; } }
.floating-cta .box {
  display: flex; align-items: stretch; background: var(--navy-900);
  border: 1px solid rgba(201,184,120,.55); box-shadow: 0 18px 44px rgba(10,18,26,.38);
}
.floating-cta .book {
  display: flex; align-items: center; gap: 12px; padding: 13px 22px 13px 16px; text-decoration: none;
}
.floating-cta .book:hover { background: var(--navy-600); }
.floating-cta .book img { width: 20px; height: 20px; }
.floating-cta .book .t { font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--white); display: block; }
.floating-cta .book .d { font-size: 10px; letter-spacing: .05em; color: rgba(255,255,255,.62); display: block; margin-top: 2px; }
.floating-cta .call {
  display: flex; align-items: center; justify-content: center; width: 50px;
  border-left: 1px solid rgba(201,184,120,.35); color: var(--gold-300);
}
.floating-cta .call:hover { background: var(--navy-600); color: var(--white); }

.sticky-cta-bar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--navy-950);
  padding: 10px 12px; gap: 8px; align-items: stretch; box-shadow: 0 -8px 24px rgba(10,18,26,.35);
}
.sticky-cta-bar.show { display: flex; }
@media (min-width: 768px) { .sticky-cta-bar { display: none !important; } }
.sticky-cta-bar .book {
  flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--gold-500); color: #141d24; font-weight: 600; font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; padding: 12px; text-decoration: none;
}
.sticky-cta-bar .call {
  flex-shrink: 0; width: 46px; min-height: 44px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(201,184,120,.5); color: var(--gold-300);
}

/* ---------- Exit intent ---------- */
.exit-overlay {
  display: none; position: fixed; inset: 0; z-index: 60; background: rgba(14,24,32,.55);
  align-items: center; justify-content: center; padding: 20px;
}
.exit-overlay.show { display: flex; }
.exit-modal {
  background: var(--white); max-width: 500px; width: 100%; padding: 40px 28px 34px;
  position: relative; animation: tdsRise .35s ease both; text-align: center;
  border-top: 3px solid var(--gold-500); box-shadow: 0 30px 80px rgba(10,18,26,.4);
}
@media (min-width: 768px) { .exit-modal { padding: 52px 56px 44px; } }
.exit-close {
  position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; background: none; border: none;
  cursor: pointer; font-size: 22px; line-height: 1; color: var(--faint);
}
.exit-close:hover { color: var(--ink); }
.exit-modal h3 { margin: 16px 0 12px; font-weight: 500; font-size: 23px; line-height: 1.3; color: var(--ink); }
@media (min-width: 768px) { .exit-modal h3 { font-size: 29px; } }
.exit-modal .body { margin: 0 0 24px; font-size: 14px; line-height: 1.7; color: var(--body); }
.exit-modal .call-line { margin: 16px 0 0; font-size: 13px; }
.exit-modal .trust-line { margin: 20px 0 0; font-size: 11px; color: var(--faint); }

/* ---------- Utility ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.hide { display: none !important; }