:root {
  --ink: #463939;
  --ink-soft: #6a5959;
  --gold: #c08a48;
  --gold-deep: #946730;
  --gold-light: #d6a874;
  --gold-pale: #f3e5d0;
  --champagne: #e3d1a8;
  --champagne-deep: #d3ba85;
  --cream: #faf6f1;
  --paper: #fdfaf4;
  --card: #ffffff;
  --line: #e8ddcb;
  --muted: #7a6c6c;

  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 110px; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-deep); }

.wrap { max-width: var(--wrap); width: 100%; margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.005em;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 500; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 500; }
h3 { font-size: 1.4rem; font-weight: 600; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--gold-deep);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--cream);
  padding: 12px 20px;
  z-index: 200;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; top: 0; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 2px;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  text-decoration: none;
  cursor: pointer;
  transition: transform .14s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-2px); background: var(--gold-deep); border-color: var(--gold-deep); color: var(--cream); }
.btn-gold { background: var(--champagne); border-color: var(--champagne); color: var(--ink); }
.btn-gold:hover { background: var(--champagne-deep); border-color: var(--champagne-deep); color: var(--ink); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--cream); }
.btn-outline-light { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn-outline-light:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn-sm { padding: 10px 18px; min-height: 44px; font-size: 12px; }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253, 250, 244, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 84px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.logo {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.logo-icon {
  height: 58px;
  width: auto;
  flex-shrink: 0;
  display: block;
}
.logo-word {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.logo-word-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.logo-word-sub {
  align-self: stretch;
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid var(--gold);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
}
.footer .logo,
.footer .logo-word-name,
.footer .logo-word-sub { color: var(--cream); }
.footer .logo-word-sub { border-top-color: var(--gold-light); }
@media (max-width: 640px) {
  .logo-icon { height: 44px; }
  .logo-word-name { font-size: 1.3rem; letter-spacing: 0.12em; }
  .logo-word-sub { font-size: 0.58rem; letter-spacing: 0.24em; }
}
.nav-links {
  display: flex;
  gap: 30px;
  margin-left: auto;
}
.nav-links a {
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  padding: 4px 0;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { border-bottom-color: var(--gold); color: var(--gold-deep); }
.nav-toggle {
  display: none;
  background: var(--ink);
  color: var(--cream);
  border: none;
  border-radius: 2px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 16px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ---------- Services dropdown ---------- */
.nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-dd-trigger.current-section { border-bottom-color: var(--gold); color: var(--gold-deep); }
.nav-dd-trigger::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.6;
}
.nav-dd-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 224px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 5px;
  box-shadow: 0 16px 38px rgba(70, 57, 57, 0.16);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s ease, visibility 0.16s ease;
  z-index: 60;
}
.nav-dd:hover .nav-dd-menu,
.nav-dd:focus-within .nav-dd-menu { opacity: 1; visibility: visible; }
.nav-dd-menu li { margin: 0; min-height: 0; }
.nav-dd-menu a {
  display: block;
  min-height: 0;
  padding: 10px 14px;
  border: 0;
  border-radius: 3px;
  font-size: 12px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: var(--ink);
}
.nav-dd-menu a:hover,
.nav-dd-menu a[aria-current="page"] { background: var(--champagne); color: var(--ink); }
.nav-dd-menu a.nav-dd-sub {
  padding-left: 32px;
  font-size: 11px;
  color: var(--muted);
  position: relative;
}
.nav-dd-menu a.nav-dd-sub::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-left: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  border-bottom-left-radius: 2px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
  min-height: 620px;
  display: flex;
  align-items: center;
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(70,57,57,0.85) 0%, rgba(70,57,57,0.55) 50%, rgba(70,57,57,0.75) 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  padding: 130px 0 110px;
  max-width: 760px;
}
.hero .eyebrow { color: var(--gold-light); }
.hero h1 {
  color: var(--cream);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.hero h1 strong { font-style: normal; font-weight: 500; color: var(--gold-light); display: block; }
.hero .lead {
  font-size: 1.15rem;
  max-width: 52ch;
  margin: 26px 0 36px;
  color: rgba(250, 246, 241, 0.92);
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero .btn-outline-light:hover { background: var(--cream); color: var(--ink); }

/* ---------- Banner (sub-page hero) ---------- */
.banner {
  background: var(--ink);
  color: var(--cream);
  padding: 88px 0 72px;
  position: relative;
  overflow: hidden;
}
.banner::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,168,116,0.20) 0%, rgba(214,168,116,0) 70%);
  pointer-events: none;
}
.banner .wrap { position: relative; z-index: 1; }
.banner .crumb {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 18px;
}
.banner h1 { color: var(--cream); font-style: italic; font-weight: 400; }
.banner .lead {
  font-size: 1.1rem;
  max-width: 58ch;
  margin-top: 20px;
  color: rgba(250, 246, 241, 0.88);
}

/* ---------- Sections ---------- */
.section { padding: 92px 0; }
.section-tight { padding: 56px 0; }
.section-head { max-width: 64ch; margin: 0 auto 56px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.section-head p { color: var(--muted); margin-top: 18px; font-size: 1.05rem; }

.bg-cream { background: var(--cream); }
.bg-ink { background: var(--ink); color: var(--cream); }
.bg-ink h2, .bg-ink h3 { color: var(--cream); }
.bg-ink .eyebrow { color: var(--gold-light); }
.bg-ink p { color: rgba(250, 246, 241, 0.85); }

.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  margin: 18px 0 24px;
}
.divider .line { flex: 0 0 60px; height: 1px; background: var(--gold); }
.divider .dot { color: var(--gold); font-size: 10px; }
.section-head.left .divider { justify-content: flex-start; }

/* ---------- Card grid ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  transition: transform .16s ease, box-shadow .16s ease;
}
a.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(70, 57, 57, 0.12);
}
.card-img-wrap { position: relative; overflow: hidden; }
.card-img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(70,57,57,0) 55%, rgba(70,57,57,0.35) 100%);
}
.card-img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; transition: transform .4s ease; }
a.card:hover .card-img { transform: scale(1.04); }
.card-body { padding: 26px 28px 28px; flex: 1; display: flex; flex-direction: column; }
.card-body .tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.card-body h3 { margin-bottom: 10px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; }
.card-body p { color: var(--muted); font-size: 15px; flex: 1; }
.card-link {
  margin-top: 18px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  align-self: flex-start;
  border-bottom: 1.5px solid var(--gold);
  padding-bottom: 3px;
}

/* ---------- Proof / badge row ---------- */
.proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.proof-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 30px 26px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.proof-card .big {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 500;
  color: var(--gold-deep);
  line-height: 1;
  font-style: italic;
}
.proof-card .big .suffix { font-size: 0.6em; font-style: italic; }
.proof-card .label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 12px;
  line-height: 1.4;
  min-height: 2.8em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.proof-card p { margin-top: 12px; color: var(--muted); font-size: 14px; }

/* ---------- Suit gallery ---------- */
.suit-gallery {
  --gallery-gap: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gallery-gap);
}
.suit-card {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: zoom-in;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.suit-card:hover {
  border-color: var(--gold);
  box-shadow: 0 12px 28px rgba(70, 57, 57, 0.14);
}
.suit-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.suit-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.35s ease;
}
.suit-card:hover img { transform: scale(1.04); }
.suit-card .suit-name {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink);
  padding: 12px 8px 14px;
}
/* Centred gallery: four across, but any short trailing row (3, 2 or 1)
   sits centred rather than left-aligned. Flex wrapping rather than grid,
   so it stays correct whatever the number of cards. */
.suit-gallery--centred {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  --gallery-cols: 4;
}
.suit-gallery--centred .suit-card {
  flex: 0 0 calc((100% - (var(--gallery-cols) - 1) * var(--gallery-gap)) / var(--gallery-cols));
}

@media (max-width: 820px) {
  .suit-gallery { --gallery-gap: 12px; grid-template-columns: repeat(2, 1fr); }
  .suit-gallery--centred { --gallery-cols: 2; }
}

/* Grouped suit collection */
.suit-group + .suit-group { margin-top: 54px; }
.suit-group-head { text-align: center; margin-bottom: 26px; }
.suit-group-head h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.65rem;
  color: var(--ink);
}
.suit-group-head .divider { margin: 12px 0 0; }

/* Accessories variant: fewer, landscape tiles */
.acc-gallery {
  grid-template-columns: repeat(2, 1fr);
  max-width: 820px;
  margin: 0 auto;
}
.acc-gallery .suit-card img {
  aspect-ratio: 3 / 4;
  object-position: center;
}
@media (max-width: 560px) {
  .acc-gallery { grid-template-columns: 1fr; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(40, 32, 32, 0.88);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-img {
  max-width: 92vw;
  max-height: 84vh;
  width: auto;
  height: auto;
  border-radius: 4px;
  background: var(--paper);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}
.lightbox-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--paper);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
  color: var(--paper);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(250, 246, 241, 0.4);
  border-radius: 50%;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(0, 0, 0, 0.5); }
@media (prefers-reduced-motion: reduce) {
  .suit-card img, .suit-card { transition: none; }
  .suit-card:hover img { transform: none; }
}

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.step {
  border: 1px solid rgba(250, 246, 241, 0.18);
  border-radius: 4px;
  padding: 28px 26px;
  background: rgba(250, 246, 241, 0.04);
}
.step .num {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-style: italic;
  font-weight: 500;
  color: var(--gold-light);
  margin-bottom: 14px;
  display: block;
}
.step h3 { font-size: 1.2rem; margin-bottom: 10px; color: var(--cream); }
.step p { font-size: 14px; color: rgba(250, 246, 241, 0.78); }

/* ---------- Service detail rows ---------- */
.svc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 80px 0;
  border-bottom: 1px solid var(--line);
}
.svc:last-child { border-bottom: none; }
.svc:nth-child(even) .svc-text { order: 2; }
.svc-img { border-radius: 4px; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.svc-img--wide { aspect-ratio: 40 / 21; }
.svc-text .tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.svc-text h2 { font-size: 2.2rem; margin-bottom: 18px; font-style: italic; font-weight: 400; }
.svc-text p { color: var(--ink-soft); }
.svc-text .feature-list {
  list-style: none;
  margin-top: 22px;
  border-top: 1px solid var(--line);
}
.svc-text .feature-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--ink-soft);
}
.svc-text .feature-list li::before {
  content: "❖";
  color: var(--gold);
  font-size: 0.7rem;
  margin-top: 6px;
  flex-shrink: 0;
}

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: start;
}
.about-grid img { border-radius: 4px; }
.prose { max-width: 60ch; }
.prose h2 {
  margin: 44px 0 14px;
  font-size: 1.9rem;
  font-style: italic;
  font-weight: 400;
}
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-soft); }
.values { list-style: none; margin-top: 28px; }
.values li {
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.values li:last-child { border-bottom: 1px solid var(--line); }
.values strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.values span { color: var(--muted); font-size: 15px; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
}
.form { display: flex; flex-direction: column; gap: 20px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form .row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.form label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
}
.form input,
.form select,
.form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--card);
  color: var(--ink);
}
.form textarea { min-height: 150px; resize: vertical; }
/* Hide the number-input up/down spinners */
.form input[type="number"]::-webkit-outer-spin-button,
.form input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.form input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.form-success {
  display: none;
  border: 1px solid var(--gold-deep);
  background: var(--card);
  border-radius: 4px;
  padding: 42px 38px;
}
.form-success.visible { display: block; }
/* Clears the sticky header when the confirmation is scrolled into view. */
.form-success { scroll-margin-top: 100px; }
.form-success h3 { margin-bottom: 10px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; font-style: italic; }
.form-success p { color: var(--muted); }
/* Honeypot: off-screen for humans, still fillable by bots. */
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { margin-top: 14px; color: #a12; font-size: 0.95rem; }

/* ---------- Book an appointment (two-step) ---------- */
/* A single column reads better than the contact page's two-up grid here: the
   visitor has one job per step. */
.wrap-narrow { max-width: 760px; }

.book-step-head { margin-bottom: 10px; }
.book-step-num {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 8px;
}
.book-step-head h2,
.book-step-head h3 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 400;
  font-style: italic;
}
.book-step-intro { color: var(--muted); margin-bottom: 26px; }

.req { color: var(--gold-deep); }
.field-hint { margin-top: 6px; font-size: 13px; color: var(--muted); }
.form-note { margin-top: 14px; font-size: 13px; color: var(--muted); }

/* Step 2 reuses .form-success for its reveal, so it only needs the embed. */
/* BridalLive's form is set to a transparent background in their admin
   (Website Forms → Look & Feel → Override Defaults), so it sits directly on the
   card and reads as part of the page. No frame or fill here — a border would
   make it look bolted on again. */
/* The wrapper clips; the iframe inside keeps its natural height. See the note
   on .booking-embed iframe below for why the two differ. */
.booking-embed {
  margin-top: 26px;
  overflow: hidden;
  line-height: 0;
  background: transparent;
  height: 340px;
}
.booking-embed.is-expanded { height: 880px; }
/* BridalLive's forms.html embed (formType=request) — the same one the shop's
   current site uses, and the one their Look & Feel settings apply to.

   The wizard is FIVE steps (their init JSON: appointmentType, dateAndTime,
   requiredFields, additionalDetails, paymentDetails — payment is disabled).
   Step 4 carries the reCAPTCHA and the Request Appointment button, so it must
   never be clipped. Heights are measured from each step's own ink, at the width
   the embed has inside the card:
                   1 type   2 date   3 contact   4 questions
     desktop 634px   317      558       694          831
     mobile  327px   445      558       694          948
   Step 1 grows once a type is picked, because BridalLive prints that type's
   full description. Longest is Looking at Suits: 812 desktop, 1420 mobile.

   880/1000 clears every step except that one description on a phone, which
   scrolls inside the iframe — the same behaviour as BridalLive's own embed
   snippet, and preferable to the ~900px of dead space that sizing for 1420
   would leave on every other mobile step.

   BridalLive's layout has a 550px floor at BOTH widths, so the iframe stays at
   550 — any shorter and it scrolls inside itself. But that floor is reserved
   empty space, not content: on the untouched step 1 nothing renders below 317
   (desktop) or 445 (mobile). So the IFRAME keeps its 550 and the WRAPPER clips
   to just past the content, which removes the dead band without ever hiding
   anything real. script.js grows both on first interaction — by then a type has
   been picked, so there is real content to fill it.

   Their bundle posts a bridallive.height_change message with the exact content
   height, which would remove all of this guesswork — but it only fired once in
   four step changes when tested, so it can't be relied on. Worth retrying if
   BridalLive ship a v2 embed.
   Re-measure if BridalLive changes the wizard, the shop adds fields under
   Default/Custom Fields, or the appointment descriptions are rewritten. */
.booking-embed iframe {
  width: 100%;
  height: 550px;
  border: 0;
  display: block;
}
.booking-embed.is-expanded iframe { height: 880px; }
.booking-fallback { margin-top: 16px; font-size: 14px; color: var(--muted); line-height: 1.6; }

@media (max-width: 640px) {
  .form-success { padding: 28px 20px; }
  /* Let the wizard use the card's full width — every pixel counts on a phone,
     and it keeps the embed at the 327px the heights were measured at. Step 1
     wraps to more lines here (ink ends at 445), so it clips a good deal lower. */
  .booking-embed { margin-left: -20px; margin-right: -20px; height: 470px; }
  /* Restated inside the query: both heights differ per breakpoint, so the
     expanded one has to be declared alongside it or the clip stays at 470 and
     swallows most of the wizard. 1000 clears the tallest mobile step (the
     questions step, 948). */
  .booking-embed.is-expanded,
  .booking-embed.is-expanded iframe { height: 1000px; }
}

.info-list { border-top: 1px solid var(--line); }
.info-row {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.info-row .label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.info-row .value {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
}
.info-row a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold); }
.info-row a:hover { color: var(--gold-deep); }
.info-row .value-sm {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink-soft);
}

.map-embed {
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  line-height: 0;
}
.map-embed iframe { width: 100%; height: 380px; border: 0; }

/* ---------- CTA Band ---------- */
.cta-band {
  background: var(--champagne);
  color: var(--ink);
  text-align: center;
  padding: 84px 0;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 35%),
    radial-gradient(circle at 90% 90%, rgba(70,57,57,0.18) 0%, rgba(70,57,57,0) 40%);
}
.cta-band .wrap { position: relative; }
.cta-band h2 { color: var(--ink); font-style: italic; font-weight: 400; }
.cta-band p { max-width: 54ch; margin: 18px auto 32px; color: var(--ink-soft); }
.cta-band .btn { background: var(--ink); border-color: var(--ink); }
.cta-band .btn:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

/* ---------- Featured (image + quote on home) ---------- */
.featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.featured-img { border-radius: 4px; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.featured blockquote {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink);
  border-left: 3px solid var(--gold);
  padding-left: 26px;
  margin: 14px 0 22px;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--ink);
  color: rgba(250, 246, 241, 0.7);
  padding: 72px 0 30px;
}
.footer a { color: rgba(250, 246, 241, 0.85); text-decoration: none; }
.footer a:hover { color: var(--gold-light); }
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(250, 246, 241, 0.14);
}
.footer .logo { color: var(--cream); }
.footer .logo .logo-text .name { color: var(--cream); }
.footer .logo .logo-text .name em { color: var(--gold-light); }
.footer .logo .logo-text small { color: rgba(250, 246, 241, 0.55); }
.footer-blurb {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.7;
  max-width: 36ch;
}
.footer .footer-h {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 18px;
}
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 10px; font-size: 14px; min-height: 24px; }
.footer ul li a { display: inline-block; padding: 4px 0; }
.footer-socials { display: flex; gap: 14px; margin-top: 16px; }
.footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(250, 246, 241, 0.22);
  border-radius: 50%;
  color: var(--cream);
}
.footer-socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 26px;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.footer-bottom a { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }

/* ---------- 404 ---------- */
.notfound { padding: 120px 0; text-align: center; }
.notfound .big404 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(6rem, 18vw, 12rem);
  color: var(--gold);
  line-height: 1;
}
.notfound h1 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-style: italic; font-weight: 400; }
.notfound p { color: var(--muted); max-width: 50ch; margin: 18px auto 32px; }
.notfound .btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .proof { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .svc { grid-template-columns: 1fr; gap: 30px; padding: 56px 0; }
  .svc:nth-child(even) .svc-text { order: 0; }
  .about-grid,
  .contact-grid,
  .featured { grid-template-columns: 1fr; gap: 40px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-top > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .hero-inner { padding: 80px 0 72px; }
  .card-grid { grid-template-columns: 1fr; }
  .proof { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .form .row2,
  .form .row3 { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 8px 24px 16px;
  }
  .nav-links.open { display: flex; }
  .nav-links a {
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    min-height: 52px;
  }
  .nav-dd { display: block; width: 100%; }
  .nav-dd-trigger::after { display: none; }
  .nav-dd-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    margin: 0;
    padding: 0 0 6px 14px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .nav-dd-menu a {
    padding: 12px 0;
    min-height: 48px;
    letter-spacing: 0.14em;
  }
  .nav-dd-menu a[aria-current="page"] { background: transparent; color: var(--gold-deep); }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-cta-btn { display: none; }
  .logo-img { height: 44px; }
  .logo-text .name { font-size: 1.1rem; }
  .logo-text small { font-size: 0.55rem; letter-spacing: 0.14em; }
  .section-head { margin-bottom: 40px; }
  .map-embed iframe { height: 280px; }
}

/* ── Safari-safe selects ─────────────────────────────────────────────
   Safari ignores padding/height/width on a native <select> unless
   appearance is reset, which is why the dropdown rendered as a tiny
   default-styled control. Resetting appearance restores the field's own
   sizing; the caret is redrawn with currentColor so it matches each
   field's text colour on any theme. */
.form select, .field select, .book-card select,
.booking select, .reserve-form select, .shop-results-head select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 15px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 44px;
}