/* ==========================================================================
   ELEVATE EXPERIENCES
   Black · gold · warm amber. Golf-first.
   ========================================================================== */

:root {
  /* Core palette — pulled from the approved brand sheet */
  --ink:        #080807;
  --ink-2:      #0f0e0c;
  --panel:      #16140f;
  --panel-2:    #1e1b15;
  --gold:       #c5a059;
  --gold-light: #e0c489;
  --gold-deep:  #9a7c3e;
  --amber:      rgba(217, 164, 65, .16);
  --cream:      #f7f5f1;
  --cream-2:    #efebe4;
  --ink-text:   #17150f;
  --body-muted: #6d675d;
  --dark-muted: #a9a296;
  --line:       rgba(255, 255, 255, .13);
  --line-dark:  rgba(0, 0, 0, .10);

  --max: 1220px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 24px 70px rgba(0, 0, 0, .18);
  --shadow-dark: 0 30px 80px rgba(0, 0, 0, .55);
  --ease: cubic-bezier(.22, .78, .26, 1);

  --font: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Display serif picked to echo the logo wordmark. Montserrat still carries
     all body copy, labels and UI — the serif is for headlines only. */
  --font-display: "Playfair Display", "Times New Roman", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.68;
  color: var(--ink-text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.06;
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 3000;
  background: var(--gold); color: #101010;
  padding: 12px 20px; font-weight: 700; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.container { width: min(calc(100% - 44px), var(--max)); margin-inline: auto; }

/* ---------------------------------------------------------------- sections */
.section { padding: 104px 0; }
.section-tight { padding: 76px 0; }
.section-dark { background: var(--ink); color: #fff; }
.section-panel { background: var(--cream-2); }

.eyebrow {
  display: inline-block;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .26em;
  font-weight: 700;
  font-size: .7rem;
  margin-bottom: 18px;
}

.section-title {
  font-size: clamp(2.05rem, 4.1vw, 3.35rem);
  margin-bottom: 20px;
}
.section-title .alt { color: var(--gold); }

.section-intro {
  max-width: 62ch;
  color: var(--body-muted);
  font-size: 1.05rem;
  margin: 0;
}
.section-dark .section-intro { color: var(--dark-muted); }

.head-center { text-align: center; }
.head-center .section-intro { margin-inline: auto; }

.rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .45;
}

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 700;
  font-size: .86rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: transform .25s var(--ease), filter .25s var(--ease),
              background-color .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease);
}
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn-gold {
  color: #14120d;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  box-shadow: 0 12px 30px rgba(217, 164, 65, .22);
}
.btn-gold:hover { transform: translateY(-2px); filter: brightness(1.07); }

.btn-outline { color: #fff; border-color: rgba(255, 255, 255, .38); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold-light); }

.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #241f16; }

.btn-ghost {
  color: var(--gold-deep);
  padding: 9px 0;          /* keeps the tap target at ~40px rather than 25px */
  min-height: 40px;
  letter-spacing: .09em;
  justify-content: flex-start;
}
.btn-ghost:hover { color: var(--gold); }

/* ------------------------------------------------------------------ header */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  background: linear-gradient(180deg, rgba(8, 8, 7, .86), rgba(8, 8, 7, .34));
  border-bottom: 1px solid transparent;
  transition: background-color .35s var(--ease), border-color .35s var(--ease);
}
.site-header.scrolled {
  background: rgba(8, 8, 7, .96);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
}
.nav {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}

.brand { display: inline-flex; align-items: center; gap: 13px; color: #fff; }
.brand .mark { width: 46px; height: 46px; flex: 0 0 auto; }
.brand-copy { line-height: 1; }
.brand-name {
  display: block; font-size: 1.02rem; font-weight: 800; letter-spacing: .26em;
}
.brand-sub {
  display: block; color: var(--gold);
  font-size: .58rem; font-weight: 700; letter-spacing: .38em; margin-top: 7px;
}

.nav-links {
  display: flex; align-items: center; gap: 32px;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #e8e5df;
}
.nav-links a { position: relative; padding: 9px 0; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: #fff; }

.nav-cta {
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 46px; padding: 0 20px;
  border: 1px solid var(--gold);
  border-radius: 7px;
  color: var(--gold-light);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.nav-cta:hover { background: var(--gold); color: #14120d; }
.nav-cta-short { display: none; }

.nav-ctas { display: flex; align-items: center; gap: 10px; }
.nav-call {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 7px;
  color: #ece9e3;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  transition: border-color .25s var(--ease), color .25s var(--ease), background-color .25s var(--ease);
}
.nav-call svg { color: var(--gold); }
.nav-call:hover { border-color: var(--gold); color: var(--gold-light); background: rgba(217, 164, 65, .1); }

/* Inline note under a form field, and the same note used in page copy. */
.field-note, .min-note {
  display: flex; align-items: center; gap: 7px;
  margin: 9px 0 0;
  color: var(--gold);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .05em;
}
.field-note svg, .min-note svg { flex: 0 0 auto; }
.min-note { margin-top: 16px; }
.svc-copy .min-note { color: var(--gold-deep); }

/* ------------------------------------------------------------ time picker */
.time-wrap { position: relative; }
.time-wrap input[type="text"] { cursor: pointer; padding-right: 46px; }
.time-icon {
  position: absolute; right: 15px; top: 50%; margin-top: -9px;
  color: var(--gold); pointer-events: none;
}
.timepicker {
  position: absolute; z-index: 60; top: calc(100% + 8px); left: 0;
  width: min(300px, 100%);
  background: #14120e;
  border: 1px solid #3a352c;
  border-radius: 12px;
  box-shadow: var(--shadow-dark);
  overflow: hidden;
}
.timepicker[hidden] { display: none; }

.time-head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid #2a2720;
  background: rgba(217, 164, 65, .07);
  color: var(--gold);
}
.time-head strong {
  display: block; color: #fff;
  font-size: .98rem; font-weight: 700; letter-spacing: .01em;
}
.time-head small { display: block; color: var(--gold); font-size: .68rem; font-weight: 600; margin-top: 3px; }
.clock-face { flex: 0 0 auto; color: var(--gold); }

.time-list {
  max-height: 232px;
  overflow-y: auto;
  padding: 8px;
  display: grid; gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: #3a352c transparent;
}
.time-list::-webkit-scrollbar { width: 8px; }
.time-list::-webkit-scrollbar-thumb { background: #3a352c; border-radius: 8px; }

.time-slot {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: #ded9d0;
  font-size: .88rem; font-weight: 500;
  text-align: left;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.time-slot:hover { background: rgba(217, 164, 65, .16); color: #fff; }
.time-slot.is-selected {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #14120d; font-weight: 700;
}

/* ------------------------------------------------------------ date picker */
.date-wrap { position: relative; }
.date-wrap input[type="text"] { cursor: pointer; padding-right: 46px; }
.date-icon {
  position: absolute; right: 15px; top: 50%; margin-top: -9px;
  color: var(--gold); pointer-events: none;
}
.calendar {
  position: absolute; z-index: 60; top: calc(100% + 8px); left: 0;
  width: min(320px, 100%);
  padding: 16px;
  background: #14120e;
  border: 1px solid #3a352c;
  border-radius: 12px;
  box-shadow: var(--shadow-dark);
}
.calendar[hidden] { display: none; }
.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.cal-head strong { font-size: .92rem; font-weight: 700; letter-spacing: .02em; color: #fff; }
.cal-nav {
  width: 34px; height: 34px;
  border: 1px solid #3a352c; border-radius: 8px;
  background: transparent; color: var(--gold);
  font-size: 1.1rem; line-height: 1;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.cal-nav:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-light); }
.cal-nav:disabled { opacity: .3; cursor: not-allowed; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow {
  text-align: center; padding: 6px 0;
  color: #7d766a; font-size: .64rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.cal-day {
  aspect-ratio: 1; min-height: 36px;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: #ded9d0;
  font-size: .84rem; font-weight: 500;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.cal-day:hover:not(:disabled) { background: rgba(217, 164, 65, .16); color: #fff; }
.cal-day:disabled { color: #4a453d; cursor: not-allowed; }
.cal-day.is-today { border-color: rgba(217, 164, 65, .5); }
.cal-day.is-selected {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #14120d; font-weight: 700; border-color: transparent;
}

/* Call / email / quote block inside the open mobile panel. */
.nav-actions { display: none; gap: 10px; margin-top: 14px; padding-top: 16px; border-top: 1px solid #2a2720; }
.nav-actions .btn { width: 100%; min-height: 50px; font-size: .76rem; }
.nav-actions .btn svg { width: 17px; height: 17px; }

/* Sticky action bar — mobile only. Keeps Call, Email and Quote one tap away at
   any scroll position. Delete the .mobile-bar block in the HTML to remove it. */
.mobile-bar {
  display: none;
  position: fixed; z-index: 1200; inset: auto 0 0 0;
  background: rgba(9, 9, 8, .97);
  backdrop-filter: blur(14px);
  border-top: 1px solid #2a2720;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mb-item {
  flex: 1;
  min-height: 62px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  color: #ded9d0;
  font-size: .66rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  border-right: 1px solid #23211b;
}
.mb-item:last-child { border-right: 0; }
.mb-item svg { width: 19px; height: 19px; color: var(--gold); }
.mb-item:active { background: rgba(217, 164, 65, .12); }
.mb-primary { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #14120d; flex: 1.35; }
.mb-primary svg { color: #14120d; }

.menu-toggle {
  display: none;
  width: 48px; height: 48px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
}
.menu-toggle span {
  display: block; width: 21px; height: 2px;
  background: #fff; margin: 5px auto;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------------------------------------- home hero */
.hero {
  position: relative;
  min-height: clamp(660px, 94vh, 940px);
  display: grid;
  align-items: center;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero-media {
  position: absolute; inset: 0; z-index: -2;
  background-image: var(--bg);
  background-size: cover;
  background-position: center 42%;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(94deg, rgba(5, 5, 4, .97) 0%, rgba(5, 5, 4, .86) 36%,
                          rgba(5, 5, 4, .30) 68%, rgba(5, 5, 4, .74) 100%),
    radial-gradient(circle at 14% 78%, var(--amber), transparent 34%);
}
.hero-inner { position: relative; padding: 130px 0 190px; }
.hero-content { max-width: 41rem; }
.hero h1 {
  font-size: clamp(2.8rem, 7vw, 5.7rem);
  line-height: 1.0;
  letter-spacing: -.02em;
  margin-bottom: 24px;
}
.hero h1 .alt { color: var(--gold); display: block; }
.hero p {
  max-width: 40ch;
  color: #d8d4cc;
  font-size: 1.1rem;
  margin: 0 0 34px;
}
.actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-strip {
  position: absolute; z-index: 3; inset: auto 0 0 0;
  background: rgba(7, 7, 6, .9);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.strip-item {
  min-height: 116px; padding: 22px 26px;
  display: flex; gap: 15px; align-items: center;
  border-right: 1px solid var(--line);
  color: #fff;
}
.strip-item:last-child { border-right: 0; }
.strip-item strong {
  display: block; font-size: .8rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
}
.strip-item small {
  display: block; color: var(--dark-muted);
  font-size: .8rem; line-height: 1.45; margin-top: 4px;
}

.icon-circle {
  width: 46px; height: 46px; flex: 0 0 auto;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--gold);
}
.icon-circle svg { width: 21px; height: 21px; }

/* -------------------------------------------------------------- page hero */
.page-hero {
  position: relative;
  padding: 200px 0 104px;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.page-hero-media {
  position: absolute; inset: 0; z-index: -2;
  background-image: var(--bg);
  background-size: cover;
  background-position: center 45%;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(92deg, rgba(6, 6, 5, .96) 0%, rgba(6, 6, 5, .82) 45%, rgba(6, 6, 5, .52) 100%),
    radial-gradient(circle at 80% 30%, var(--amber), transparent 44%);
}
.page-hero h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  letter-spacing: -.015em;
  line-height: 1.04;
  margin-bottom: 20px;
}
.page-hero h1 .alt { color: var(--gold); display: block; }
.page-hero p { color: #cfcbc3; max-width: 52ch; font-size: 1.06rem; margin: 0; }

/* ----------------------------------------------- centrepiece (the simulator) */
.centerpiece { background: var(--ink); color: #fff; padding: 108px 0; }
.cp-grid {
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 26px;
  align-items: stretch;
  margin-top: 46px;
}
.cp-main, .cp-side {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(217, 164, 65, .22);
}
.cp-main img, .cp-side img { width: 100%; height: 100%; object-fit: cover; }
.cp-main { min-height: 460px; }
.cp-side { min-height: 460px; }
.cp-tag {
  position: absolute; left: 24px; bottom: 24px; right: 24px;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  background: rgba(8, 8, 7, .8);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.cp-tag strong {
  display: block; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
}
.cp-tag small { display: block; color: var(--dark-muted); font-size: .82rem; }

.cp-points {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; margin-top: 26px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.cp-point { background: var(--ink); padding: 26px 24px; }
.cp-point strong {
  display: block; color: var(--gold);
  font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 9px;
}
.cp-point span { color: var(--dark-muted); font-size: .93rem; line-height: 1.6; }

/* ---------------------------------------------------------- service cards */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 50px;
}
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .06);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }

/* Golf leads: it spans both columns and runs as a wide split card. */
.service-card.lead { grid-column: 1 / -1; flex-direction: row; }
.service-card.lead .service-media { width: 56%; min-height: 400px; }
.service-card.lead .service-body { width: 44%; padding: 48px; align-self: center; }
.service-card.lead h3 { font-size: 1.9rem; }

.service-media { position: relative; overflow: hidden; }
.service-media img { width: 100%; height: 100%; object-fit: cover; }
.service-card:not(.lead) .service-media { height: 260px; }
.service-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(8, 8, 7, .55));
}
.service-flag {
  position: absolute; z-index: 2; top: 20px; left: 20px;
  padding: 7px 14px;
  background: rgba(8, 8, 7, .82);
  border: 1px solid var(--gold);
  border-radius: 100px;
  color: var(--gold-light);
  font-size: .64rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
}
.service-body { padding: 32px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.service-body h3 { font-size: 1.35rem; }
.service-body p { color: var(--body-muted); margin: 0; }
.service-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.service-list li {
  position: relative; padding-left: 20px;
  color: var(--body-muted); font-size: .93rem;
}
.service-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
}
.service-body .btn-ghost { margin-top: auto; align-self: flex-start; }

/* -------------------------------------------------- services page detail rows */
.svc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 62px;
  align-items: center;
  padding: 84px 0;
  border-bottom: 1px solid var(--line-dark);
}
.svc-row:last-of-type { border-bottom: 0; }
.svc-row.flip .svc-media { order: 2; }
.svc-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  position: relative;
}
.svc-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.svc-copy h2 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); margin-bottom: 18px; }
.svc-copy > p { color: var(--body-muted); margin: 0 0 26px; }
.svc-copy .service-list { margin-bottom: 30px; }

/* --------------------------------------------------------------- coming soon */
.coming-soon {
  margin-top: 30px;
  padding: 34px 38px;
  border: 1px solid rgba(217, 164, 65, .42);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 88% 22%, rgba(217, 164, 65, .12), transparent 46%),
    var(--panel);
  color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  gap: 34px; flex-wrap: wrap;
}
.coming-soon h3 { font-size: 1.18rem; margin-bottom: 7px; }
.coming-soon p { margin: 0; color: var(--dark-muted); max-width: 52ch; font-size: .95rem; }
.sport-row { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.sport { text-align: center; color: var(--gold); }
.sport svg { width: 26px; height: 26px; }
.sport span {
  display: block; margin-top: 8px;
  font-size: .6rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dark-muted);
}

/* -------------------------------------------------------------- cta banner */
.cta-band {
  position: relative;
  padding: 116px 0;
  color: #fff;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.cta-media {
  position: absolute; inset: 0; z-index: -2;
  background-image: var(--bg); background-size: cover; background-position: center;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6, 6, 5, .82), rgba(6, 6, 5, .92));
}
.cta-band h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); margin-bottom: 18px; }
.cta-band p { color: #cbc7bf; max-width: 54ch; margin: 0 auto 32px; }

/* ------------------------------------------------------------------ gallery */
.chapter { margin-top: 72px; }
.chapter:first-of-type { margin-top: 48px; }
.chapter-head {
  display: flex; align-items: baseline; gap: 20px;
  padding-bottom: 18px; margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.chapter-num {
  color: var(--gold);
  font-size: .78rem; font-weight: 700; letter-spacing: .22em;
}
.chapter-head h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.chapter-head p { margin: 0 0 0 auto; color: var(--dark-muted); font-size: .92rem; }

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gallery-grid.pair { grid-template-columns: repeat(2, 1fr); }

.gallery-item {
  position: relative;
  padding: 0; border: 0; margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-2);
  aspect-ratio: 4 / 3;
  display: block; width: 100%;
  text-align: left;
  cursor: zoom-in;
}
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s var(--ease);
}
.gallery-item:hover img { transform: scale(1.045); }
.gallery-item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(6, 6, 5, .86));
  pointer-events: none;
}
.gallery-caption {
  position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 16px;
  color: #fff;
}
.gallery-caption strong {
  display: block; color: var(--gold);
  font-size: .66rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; margin-bottom: 6px;
}
.gallery-caption span { display: block; font-size: .92rem; line-height: 1.45; color: #ece9e3; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 2500;
  display: none;
  place-items: center;
  padding: 30px;
  background: rgba(4, 4, 3, .95);
  backdrop-filter: blur(6px);
}
.lightbox.open { display: grid; }
.lightbox-figure { margin: 0; max-width: 1100px; width: 100%; text-align: center; }
.lightbox-figure img {
  width: 100%; max-height: 74vh; object-fit: contain;
  border-radius: var(--radius); border: 1px solid var(--line);
}
.lightbox-figure figcaption { margin-top: 18px; color: #fff; }
.lightbox-figure figcaption strong {
  display: block; color: var(--gold);
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 6px;
}
.lightbox-figure figcaption span { color: var(--dark-muted); font-size: .95rem; }
.lb-btn {
  position: absolute;
  width: 52px; height: 52px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(15, 14, 12, .9);
  color: var(--gold);
  font-size: 1.3rem;
  display: grid; place-items: center;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.lb-btn:hover { border-color: var(--gold); color: var(--gold-light); }
.lb-close { top: 26px; right: 26px; }
.lb-prev { left: 26px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 26px; top: 50%; transform: translateY(-50%); }

/* -------------------------------------------------------------------- about */
.about-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 66px; align-items: center; }
.about-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.about-media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.check-list { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 18px; }
.check-list li { display: flex; gap: 13px; align-items: flex-start; }
.check-list strong { display: block; }
.check-list span.txt { color: var(--body-muted); font-size: .95rem; }
.check {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 4px;
  border-radius: 50%; background: rgba(217, 164, 65, .16);
  display: grid; place-items: center; color: var(--gold-deep);
  font-size: .72rem; font-weight: 800;
}

.value-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.value { background: var(--ink); padding: 34px 28px; }
.value .icon-circle { margin-bottom: 18px; }
.value strong {
  display: block; font-size: .82rem; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 8px; color: #fff;
}
.value span { color: var(--dark-muted); font-size: .92rem; line-height: 1.6; }

/* ---------------------------------------------------------------------- faq */
.faq-list { max-width: 880px; margin: 46px auto 0; }
.faq-item { border-bottom: 1px solid rgba(0, 0, 0, .12); }
.faq-question {
  width: 100%; border: 0; background: transparent; text-align: left;
  padding: 26px 0; display: flex; justify-content: space-between;
  align-items: center; gap: 26px;
  font-weight: 700; font-size: 1.04rem; letter-spacing: -.01em;
  transition: color .25s var(--ease);
}
.faq-question:hover { color: var(--gold-deep); }
.faq-plus {
  flex: 0 0 auto; width: 30px; height: 30px;
  border: 1px solid rgba(217, 164, 65, .55); border-radius: 50%;
  display: grid; place-items: center;
  color: var(--gold-deep); font-size: 1.05rem; font-weight: 500;
  transition: transform .3s var(--ease), background-color .25s var(--ease);
}
.faq-item.open .faq-plus { transform: rotate(45deg); background: rgba(217, 164, 65, .14); }
.faq-answer { overflow: hidden; height: 0; transition: height .35s var(--ease); }
.faq-answer-inner { padding: 0 60px 26px 0; color: var(--body-muted); }

.help-card {
  max-width: 880px; margin: 44px auto 0;
  padding: 30px 34px;
  border: 1px solid rgba(217, 164, 65, .4);
  border-radius: var(--radius-lg);
  background: var(--panel); color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  gap: 26px; flex-wrap: wrap;
}
.help-card h3 { font-size: 1.1rem; margin-bottom: 5px; }
.help-card p { margin: 0; color: var(--dark-muted); font-size: .94rem; }

/* --------------------------------------------------------------------- form */
.quote-wrap {
  background:
    radial-gradient(circle at 6% 8%, rgba(217, 164, 65, .13), transparent 42%),
    linear-gradient(150deg, var(--ink-2), var(--panel-2));
  color: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 52px;
  box-shadow: var(--shadow-dark);
}
.quote-grid { display: grid; grid-template-columns: .8fr 1.55fr; gap: 58px; align-items: start; }
.quote-copy h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: 16px; }
.quote-copy > p { color: var(--dark-muted); margin: 0; }
.trust { margin-top: 38px; display: grid; gap: 22px; }
.trust-item { display: flex; gap: 14px; align-items: flex-start; }
.trust-item .icon-circle { width: 40px; height: 40px; }
.trust-item .icon-circle svg { width: 18px; height: 18px; }
.trust-item strong { display: block; font-size: .92rem; }
.trust-item small { display: block; color: var(--dark-muted); font-size: .85rem; line-height: 1.5; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.field.full { grid-column: 1 / -1; }
.field label {
  display: block; margin-bottom: 9px;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: #e6e2da;
}
.field .req { color: var(--gold); }

input, select, textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  border: 1px solid #3a352c;
  border-radius: 8px;
  background: rgba(8, 8, 7, .72);
  color: #fff;
  outline: none;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
input::placeholder, textarea::placeholder { color: #7d766a; }
select { appearance: none; cursor: pointer; padding-right: 42px; }
.select-wrap { position: relative; }
.select-wrap::after {
  content: ""; position: absolute; right: 17px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg); pointer-events: none;
}
option { background: #14120f; color: #fff; }
textarea { min-height: 124px; resize: vertical; line-height: 1.6; }

input:focus, select:focus, textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(217, 164, 65, .16);
}
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #e2645c; }
.error { display: none; color: #f0938c; font-size: .76rem; margin-top: 7px; }
.field.invalid .error { display: block; }

.form-actions { margin-top: 26px; display: flex; justify-content: flex-end; }
.form-note { color: #857e72; font-size: .78rem; margin-top: 14px; line-height: 1.6; }

.success {
  display: none; text-align: center; padding: 44px 36px;
  border: 1px solid rgba(217, 164, 65, .4);
  border-radius: var(--radius-lg);
  background: rgba(217, 164, 65, .07);
}
.success.show { display: block; }
.success .icon-circle { margin: 0 auto 18px; }
.success h2 { color: var(--gold-light); margin-bottom: 12px; font-size: 1.6rem; }
.success p { color: var(--dark-muted); max-width: 46ch; margin: 0 auto 26px; }

.quote-page { padding: 0 0 104px; }
.quote-page .container-narrow { width: min(calc(100% - 44px), 1100px); margin: -70px auto 0; position: relative; z-index: 5; }

/* ------------------------------------------------------------------- footer */
.footer { background: #060605; color: #fff; padding: 72px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.15fr; gap: 44px; }
.footer h4 {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 18px;
}
.footer p { color: #948d82; font-size: .9rem; margin: 0 0 8px; }
.footer-tag { max-width: 34ch; margin-top: 18px; }
.footer-links { display: grid; gap: 10px; }
.footer-links a, .footer-contact a { color: #b5aea3; font-size: .9rem; transition: color .2s var(--ease); }
.footer-links a:hover, .footer-contact a:hover { color: var(--gold); }
.footer-contact { display: grid; gap: 10px; }
.footer-contact div { display: flex; gap: 10px; align-items: flex-start; color: #b5aea3; font-size: .9rem; }
.footer-contact svg { width: 15px; height: 15px; color: var(--gold); flex: 0 0 auto; margin-top: 5px; }
.pending { color: #6f6960; font-size: .74rem; font-style: italic; }

.footer-actions { display: grid; gap: 10px; margin-bottom: 22px; }
.footer-actions .btn { width: 100%; min-height: 48px; font-size: .74rem; }
.footer-actions .btn svg { width: 16px; height: 16px; }
.footer-actions .btn-outline { color: #ded9d0; border-color: #34302a; }

.socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; max-width: 250px; }
.socials a {
  width: 38px; height: 38px;
  border: 1px solid #2b2822; border-radius: 50%;
  display: grid; place-items: center; color: #b5aea3;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.socials a svg { width: 16px; height: 16px; }
.socials a:hover { border-color: var(--gold); color: var(--gold); }

.footer-bottom {
  margin-top: 52px; padding-top: 24px;
  border-top: 1px solid #1c1a16;
  display: flex; justify-content: space-between; gap: 22px; flex-wrap: wrap;
  color: #6f6960; font-size: .76rem;
}

/* -------------------------------------------------------------- logo page */
.logo-page { background: #060605; color: #fff; padding: 150px 0 90px; }
.logo-showcase { display: grid; gap: 26px; margin-top: 44px; }
.logo-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.logo-panel {
  min-height: 250px;
  border: 1px solid #222018;
  border-radius: var(--radius-lg);
  display: grid; place-items: center;
  padding: 40px; text-align: center;
}
.logo-panel.dark { background: #0c0b09; }
.logo-panel.light { background: var(--cream); color: var(--ink-text); }
.logo-panel.gold { background: linear-gradient(140deg, var(--gold-light), var(--gold)); color: #14120d; }
.logo-panel .cap {
  display: block; margin-top: 24px;
  font-size: .62rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; opacity: .62;
}
.logo-lockup { display: inline-flex; align-items: center; gap: 17px; }
.logo-lockup .mark { width: 74px; height: 74px; }
.logo-lockup .word { font-weight: 800; letter-spacing: .24em; font-size: clamp(1.1rem, 2.6vw, 1.8rem); }
.logo-lockup .subword {
  display: block; color: var(--gold);
  font-size: .62rem; font-weight: 700; letter-spacing: .4em; margin-top: 8px;
}
.logo-panel.light .subword { color: var(--gold-deep); }
.logo-panel.gold .subword { color: #14120d; }
.swatch-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 26px; }
.swatch { text-align: center; }
.swatch i {
  display: block; height: 96px; border-radius: 12px;
  border: 1px solid #2a2720; margin-bottom: 12px;
}
.swatch strong { display: block; font-size: .8rem; }
.swatch span { color: #7d766a; font-size: .72rem; letter-spacing: .08em; }

/* --------------------------------------------------------- toast / backtop */
.toast {
  position: fixed; z-index: 3000; right: 24px; bottom: 24px;
  max-width: 360px; padding: 16px 20px;
  border-radius: 10px;
  background: #141210; color: #fff;
  border: 1px solid #312d25;
  box-shadow: var(--shadow-dark);
  font-size: .92rem;
  transform: translateY(24px); opacity: 0; pointer-events: none;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.toast.show { transform: translateY(0); opacity: 1; }

.back-top {
  position: fixed; z-index: 900; right: 24px; bottom: 24px;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid #312d25; background: #141210; color: var(--gold);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), border-color .25s var(--ease);
}
.back-top.visible { opacity: 1; pointer-events: auto; }
.back-top:hover { border-color: var(--gold); }
.toast.show ~ .back-top { bottom: 92px; }

/* -------------------------------------------------------------- responsive */
@media (max-width: 1040px) {
  .cp-grid { grid-template-columns: 1fr; }
  .cp-side { min-height: 300px; }
  .service-card.lead { flex-direction: column; }
  .service-card.lead .service-media,
  .service-card.lead .service-body { width: 100%; }
  .service-card.lead .service-media { min-height: 300px; height: 300px; }
  .service-card.lead .service-body { padding: 34px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Between the mobile menu and full desktop the nav carries six links plus two
   buttons, which overflows on small laptops. Tighten rather than drop a link. */
@media (min-width: 901px) and (max-width: 1340px) {
  .nav { gap: 14px; }
  .nav-links { gap: 14px; font-size: .66rem; letter-spacing: .1em; }
  .nav-ctas { gap: 7px; }
  .lang-switch { padding: 0 9px; }
  .nav-call { padding: 0 13px; }
  .nav-call-text { display: none; }
  .nav-cta { padding: 0 15px; font-size: .68rem; }
  .brand .mark { width: 40px; height: 40px; }
  .brand-name { font-size: .92rem; letter-spacing: .2em; }
}

@media (max-width: 900px) {
  .nav-links {
    position: fixed; inset: 86px 22px auto 22px;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 16px;
    background: rgba(10, 10, 8, .985);
    border: 1px solid #2a2720;
    border-radius: 14px;
    box-shadow: var(--shadow-dark);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 12px; }
  .nav-links a::after { display: none; }
  .menu-toggle { display: block; }

  /* The header CTA used to be hidden below this width, which removed the main
     call to action on exactly the devices that need it most. It now stays put
     and switches to a shorter label. */
  .nav-cta { padding: 0 15px; min-height: 42px; font-size: .68rem; letter-spacing: .1em; }
  .nav-cta-long { display: none; }
  .nav-cta-short { display: inline; }
  .nav-actions { display: grid; }

  /* Call collapses to an icon so the brand, both CTAs and the menu button all
     still fit across the bar. */
  .nav-ctas { gap: 7px; }
  .nav-call { padding: 0; width: 42px; min-height: 42px; justify-content: center; }
  .nav-call-text { display: none; }

  .hero-inner { padding: 118px 0 210px; }
  .strip-grid { grid-template-columns: repeat(2, 1fr); }
  .strip-item:nth-child(2n) { border-right: 0; }
  .strip-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }

  .service-grid { grid-template-columns: 1fr; }
  .svc-row { grid-template-columns: 1fr; gap: 36px; padding: 60px 0; }
  .svc-row.flip .svc-media { order: 0; }
  .about-grid, .quote-grid { grid-template-columns: 1fr; gap: 40px; }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .cp-points { grid-template-columns: 1fr; }
  .gallery-grid, .gallery-grid.pair { grid-template-columns: repeat(2, 1fr); }
  .chapter-head { flex-wrap: wrap; }
  .chapter-head p { margin-left: 0; width: 100%; }
  .logo-row { grid-template-columns: 1fr; }
  .quote-page .container-narrow { margin-top: -40px; }

  /* Sticky action bar on. Reserve its height at the end of the page so it never
     sits over the footer, and lift the floating controls clear of it. */
  .mobile-bar { display: flex; }
  body { padding-bottom: 62px; }
  .back-top { bottom: 76px; width: 42px; height: 42px; }
  .toast { bottom: 76px; right: 14px; left: 14px; max-width: none; }
  .toast.show ~ .back-top { bottom: 146px; }
}

@media (max-width: 620px) {
  .container { width: calc(100% - 30px); }

  /* On the narrowest phones the brand, CTA and menu button together overflow
     the bar. Tighten all three rather than dropping any of them. */
  .nav { gap: 8px; min-height: 74px; }
  .brand { gap: 9px; }
  .brand .mark { width: 38px; height: 38px; }
  .brand-name { font-size: .88rem; letter-spacing: .17em; }
  .brand-sub { font-size: .5rem; letter-spacing: .28em; margin-top: 5px; }
  .nav-cta { padding: 0 13px; min-height: 40px; font-size: .64rem; letter-spacing: .08em; }
  .nav-call { width: 40px; min-height: 40px; }
  .menu-toggle { width: 40px; height: 40px; }
  .menu-toggle span { width: 18px; margin: 4px auto; }
  .nav-links { top: 74px; }
  .calendar { width: 100%; padding: 13px; }
  .cal-day { min-height: 34px; font-size: .8rem; }
  .timepicker { width: 100%; }
  .time-list { max-height: 200px; }

  /* Controls must never be squeezed below a usable tap size; the brand gives
     up the space instead. */
  .nav-ctas, .menu-toggle, .nav-call, .nav-cta { flex: 0 0 auto; }
  .brand { min-width: 0; }

  .section { padding: 72px 0; }
  .section-tight { padding: 56px 0; }
  .centerpiece { padding: 76px 0; }
  .page-hero { padding: 150px 0 72px; }
  .hero { min-height: 0; }
  .hero-inner { padding: 130px 0 240px; }
  .hero h1 { font-size: 3rem; }
  .hero p { font-size: 1rem; }
  .actions .btn { width: 100%; }
  .strip-grid { grid-template-columns: 1fr; }
  .strip-item { border-right: 0; border-bottom: 1px solid var(--line); min-height: 0; padding: 18px 20px; }
  .strip-item:last-child { border-bottom: 0; }
  .quote-wrap { padding: 28px 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .gallery-grid, .gallery-grid.pair { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: 1fr; }
  .swatch-row { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .footer-bottom { flex-direction: column; }
  .coming-soon, .help-card { flex-direction: column; align-items: flex-start; }
  .service-card.lead .service-body { padding: 28px; }
  .faq-answer-inner { padding-right: 0; }
  .lb-prev { left: 10px; }
  .lb-next { right: 10px; }
  .lb-close { top: 12px; right: 12px; }
  .lightbox { padding: 70px 14px 30px; }
}

/* Narrowest phones: the brand gives up width so both CTAs and the menu button
   keep a usable tap size. Must come after the 620px block. */
@media (max-width: 385px) {
  .brand .mark { width: 34px; height: 34px; }
  .brand-name { font-size: .78rem; letter-spacing: .12em; }
  .brand-sub { font-size: .44rem; letter-spacing: .2em; margin-top: 4px; }
  .nav { gap: 6px; }
  .nav-ctas { gap: 6px; }
  .nav-cta { padding: 0 11px; font-size: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .site-header, .back-top, .toast, .lightbox, .hero-strip { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ------------------------------------------------------- service area page */
.area-block {
  padding: 30px 0;
  border-top: 1px solid var(--line-dark);
}
.area-block h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin-bottom: 8px; }
.area-block > p { color: var(--body-muted); margin: 0 0 18px; }
.city-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 9px;
}
.city-list li {
  padding: 8px 15px;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 100px;
  background: #fff;
  color: var(--ink-text);
  font-size: .86rem;
  font-weight: 500;
}

/* ------------------------------------------------------------- step cards */
/* Numbered process steps. Uses a class rather than an inline grid value, so the
   responsive rules below can actually take effect — an inline style would
   override every media query. */
.step-grid {
  list-style: none;
  margin: 46px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  counter-reset: step;
}
.step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 30px 30px;
  background: #fff;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .05);
}
.step-num {
  display: block;
  margin-bottom: 14px;
  color: var(--gold);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
}
.step-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.step-card p { margin: 0; color: var(--body-muted); font-size: .95rem; }

@media (max-width: 900px) {
  /* Two across on tablets, then a single readable column on phones. */
  .step-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 34px; }
}

@media (max-width: 620px) {
  .step-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .step-card {
    /* Number sits beside the heading on narrow screens to save vertical space. */
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    padding: 24px 22px;
  }
  .step-num { grid-row: 1 / 3; margin-bottom: 0; font-size: 1.3rem; padding-top: 2px; }
  .step-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
}

/* ------------------------------------------------------- send failure panel */
.send-failed {
  display: none; text-align: center; padding: 44px 36px;
  border: 1px solid rgba(226, 100, 92, .45);
  border-radius: var(--radius-lg);
  background: rgba(226, 100, 92, .08);
}
.send-failed.show { display: block; }
.send-failed .icon-circle { margin: 0 auto 18px; border-color: #e2645c; color: #f0938c; }
.send-failed h2 { color: #f0938c; margin-bottom: 12px; font-size: 1.6rem; }
.send-failed p { color: var(--dark-muted); max-width: 48ch; margin: 0 auto 26px; }
.send-failed .actions { flex-wrap: wrap; }
.btn-dark-outline { color: #ded9d0; border-color: #3a352c; }
.btn-dark-outline:hover { border-color: var(--gold); color: var(--gold-light); }
.botcheck { position: absolute !important; left: -9999px !important; }

/* --------------------------------------------------------- human check */
.human-check { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.human-question {
  min-width: 74px;
  padding: 12px 15px;
  border: 1px solid #3a352c;
  border-radius: 8px;
  background: rgba(217, 164, 65, .09);
  color: var(--gold-light);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  user-select: none;
}
.human-check input {
  width: 84px;
  min-height: 52px;
  text-align: center;
  font-size: 1.02rem;
  font-weight: 700;
}
.human-hint { color: #857e72; font-size: .78rem; }

/* ------------------------------------------------------- language switcher */
.lang-switch {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 46px; padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 7px;
  color: #cfcbc3;
  font-size: .71rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.lang-switch svg { color: var(--gold); flex: 0 0 auto; }
.lang-switch:hover { border-color: var(--gold); color: var(--gold-light); }
/* Always the two-letter code. Spanish nav labels are long enough that the full
   word pushes the header past its container at every desktop width. */
.lang-long { display: none; }
.lang-short { display: inline; }
@media (max-width: 900px) {
  .lang-switch { min-height: 42px; padding: 0 10px; }
}
@media (max-width: 385px) {
  .lang-switch { min-height: 40px; padding: 0 8px; font-size: .62rem; }
}


/* ------------------------------------------------- type system after rebrand */
/* The serif is a display face. Anything small, tracked-out or UI-like stays in
   Montserrat, where it was designed to live. */
.strip-item strong, .cp-tag strong, .cp-point strong, .value strong,
.trust-item strong, .footer h4, .eyebrow, .chapter-num, .gallery-caption strong,
.service-flag, .btn, .nav-links, .nav-cta, .nav-call, .lang-switch,
.field label, .mb-item, .step-num, .time-head small, .faq-plus,
.swatch strong, .logo-panel .cap, .brand-sub, .sport span, .city-list li {
  font-family: var(--font);
}
.faq-question { font-family: var(--font); font-weight: 700; }
.check-list strong, .service-body h3, .step-card h3 { font-family: var(--font-display); font-weight: 600; }

/* Brand lockup: ELEVATE in the serif, the descriptor tracked out beneath it,
   mirroring the supplied logo. */
.brand-name { font-family: var(--font-display); font-weight: 700; letter-spacing: .2em; }
.brand-sub { font-size: .5rem; letter-spacing: .22em; }
.brand .mark { color: var(--gold); }

@media (max-width: 1340px) {
  .brand-sub { font-size: .46rem; letter-spacing: .16em; }
}
@media (max-width: 620px) {
  .brand-name { font-size: .84rem; letter-spacing: .14em; }
  .brand-sub { font-size: .4rem; letter-spacing: .1em; }
}
@media (max-width: 385px) {
  .brand-sub { font-size: .36rem; letter-spacing: .06em; }
}

.logo-lockup .word { font-family: var(--font-display); }
.logo-lockup .subword { font-size: .55rem; letter-spacing: .26em; }

/* ---------------------------------------------- header fit after the rename */
/* "MOBILE COUNTRY CLUB" is nearly twice the width of "EXPERIENCES", and the
   nav labels grew with it. Everything in the bar stays on one line; the sizes
   below give it the room to do that. */
.brand-name, .brand-sub, .nav-links a, .nav-cta, .nav-call, .lang-switch,
.nav-cta-long, .nav-cta-short, .nav-call-text { white-space: nowrap; }
.brand-copy { min-width: 0; }

.brand-name { font-size: .95rem; letter-spacing: .16em; }
.brand-sub { font-size: .46rem; letter-spacing: .14em; margin-top: 6px; }

@media (min-width: 901px) and (max-width: 1460px) {
  .nav { gap: 16px; }
  .nav-links { gap: 15px; font-size: .67rem; letter-spacing: .09em; }
  .nav-ctas { gap: 8px; }
  .nav-call { padding: 0 11px; }
  .nav-call-text { display: none; }
  .nav-cta { padding: 0 14px; font-size: .65rem; }
  .lang-switch { padding: 0 9px; }
  .brand .mark { width: 40px; height: 40px; }
  .brand-name { font-size: .86rem; }
  .brand-sub { font-size: .42rem; letter-spacing: .1em; }
}

@media (max-width: 900px) {
  .brand-name { font-size: .88rem; letter-spacing: .13em; }
  .brand-sub { font-size: .4rem; letter-spacing: .08em; margin-top: 5px; }
}

@media (max-width: 430px) {
  /* Below this the descriptor costs more than it earns — the mark and the
     name carry the brand, and the full lockup still appears in the footer. */
  .brand-sub { display: none; }
  .brand-name { font-size: .92rem; letter-spacing: .12em; }
  .brand .mark { width: 32px; height: 32px; }
  .brand { gap: 8px; }
}

@media (max-width: 400px) {
  /* Five controls plus the brand will not fit here. The header phone button is
     the one to drop: the sticky bottom bar already carries Call, Email and
     Quote, so nothing is lost. The switcher keeps the globe alone. */
  .nav-call { display: none; }
  .lang-short { display: none; }
  .lang-switch { padding: 0 10px; gap: 0; }
  .nav-cta { padding: 0 10px; font-size: .58rem; }
  .brand-name { font-size: .82rem; letter-spacing: .1em; }
}