/* =========================================================
   Royal Edge Construction — Epoxy Floor Systems
   Luxury black & gold theme
   ========================================================= */

/* Self-hosted Google Fonts (Cinzel + Montserrat), latin & latin-ext subsets.
   Downloaded from Google Fonts on 2026-06-03. Merged here from the former
   css/fonts.css on 2026-06-18 to drop one render-blocking request. Static files. */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/cinzel-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/cinzel-500-latin.woff2) format('woff2');
  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: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/cinzel-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/cinzel-500-latin.woff2) format('woff2');
  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: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/cinzel-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/cinzel-500-latin.woff2) format('woff2');
  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: 400;
  font-display: swap;
  src: url(../assets/fonts/montserrat-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/montserrat-400-latin.woff2) format('woff2');
  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: 500;
  font-display: swap;
  src: url(../assets/fonts/montserrat-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/montserrat-400-latin.woff2) format('woff2');
  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: 600;
  font-display: swap;
  src: url(../assets/fonts/montserrat-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/montserrat-400-latin.woff2) format('woff2');
  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: 700;
  font-display: swap;
  src: url(../assets/fonts/montserrat-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/montserrat-400-latin.woff2) format('woff2');
  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;
}

:root {
  --black: #0a0a0a;
  --black-2: #111111;
  --panel: #15140f;
  --panel-2: #1c1a12;
  --line: #2a2618;
  --text: #e9e4d6;
  --muted: #a59f8c;
  --gold-1: #fbf5b7;
  --gold-2: #d4af37;
  --gold-3: #bf953f;
  --gold-4: #aa771c;
  --gold-deep: #8a6312;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  --gold-gradient: linear-gradient(135deg, #bf953f 0%, #fcf6ba 25%, #b38728 55%, #fbf5b7 78%, #aa771c 100%);
  --max: 1180px;
  --radius: 14px;
}

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

html {
  scroll-behavior: smooth;
  /* Reserve the scrollbar's gutter at all times so it's "present but hidden"
     while the splash locks scrolling (overflow:hidden, no thumb drawn), then
     the thumb simply appears once the splash leaves — no width change, so the
     page never shifts when the scrollbar returns. */
  scrollbar-gutter: stable;
  /* Brand-matched scrollbar (Firefox): gold thumb on dark track. */
  scrollbar-color: var(--gold-2) var(--black-2);
  scrollbar-width: thin;
}

/* Brand-matched scrollbar (Chrome / Edge / Safari): dark track, gold pill thumb. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--black-2); }
::-webkit-scrollbar-thumb {
  background: var(--gold-gradient);
  border-radius: 999px;
  border: 3px solid var(--black-2); /* inset so the gold reads as a pill */
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-1); }
::-webkit-scrollbar-corner { background: var(--black-2); }

body {
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
  background: var(--black);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Subtle ambient gold glow on the page background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(191, 149, 63, 0.10), transparent 60%),
    radial-gradient(800px 500px at -10% 110%, rgba(212, 175, 55, 0.07), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

img { max-width: 100%; display: block; }

/* ---- Deter copying / downloading / saving of media ---- */
img, video, .hero-bg {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* blocks iOS long-press "Save Image" */
  pointer-events: auto;
}

a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 22px;
  position: relative;
  z-index: 1;
}

/* ---------- Typography ---------- */
h1, h2, h3, .display {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  letter-spacing: 0.04em;
  line-height: 1.15;
  font-weight: 700;
}

.gold-text {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold-2);
}

.eyebrow {
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold-2);
}

.section {
  padding: 86px 0;
  position: relative;
  z-index: 1;
}

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 54px;
}

.section-head h2 {
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  margin: 12px 0 14px;
}

.section-head p { color: var(--muted); }

.divider {
  width: 90px;
  height: 3px;
  margin: 18px auto 0;
  background: var(--gold-gradient);
  border-radius: 3px;
}

/* ---------- Section separator (between home sections) ---------- */
.section-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 22px;
  position: relative;
  z-index: 1;
}
.section-sep::before,
.section-sep::after {
  content: "";
  flex: 1;
  max-width: 360px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-4));
}
.section-sep::after { background: linear-gradient(90deg, var(--gold-4), transparent); }
.section-sep i {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  transform: rotate(45deg);
  background: var(--gold-gradient);
  border-radius: 2px;
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.5);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  font-family: "Montserrat", sans-serif;
  white-space: nowrap;
}

.btn-gold {
  background: var(--gold-gradient);
  color: #1a1407;
  box-shadow: 0 10px 28px rgba(191, 149, 63, 0.32);
}
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(191, 149, 63, 0.45); }

.btn-ghost {
  background: transparent;
  color: var(--gold-1);
  border: 1px solid var(--gold-3);
}
.btn-ghost:hover { background: rgba(191, 149, 63, 0.12); transform: translateY(-3px); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 8, 8, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Image logo lockup (crown + RE + wordmark) used in the header. */
.brand-logo { height: 58px; width: auto; display: block; border-radius: 6px; }
/* Center the logo within the horizontal footprint the old crown + wordmark
   lockup occupied, so it sits in the middle of that space rather than hard-left. */
.site-header .brand { min-width: 250px; justify-content: center; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
}
.nav-links a {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--text);
  position: relative;
  padding: 6px 0;
  transition: color 0.2s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--gold-gradient);
  transition: width 0.25s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--gold-1); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.nav-cta { display: flex; align-items: center; gap: 14px; }

/* Desktop header only (>=761px, i.e. before the hamburger takes over):
   make the gold call button a touch smaller than the hero CTAs so it
   balances the slim nav links, and reserve clear space to its left so it
   never hugs the "Contact" link. Scoped to min-width so the mobile
   icon-only button keeps its larger tap target (see the 760px rules). */
@media (min-width: 761px) {
  .nav-cta { gap: 12px; margin-left: 22px; }
  .nav-cta .btn { padding: 10px 22px; font-size: 0.8rem; }
  /* Center the page links BETWEEN the logo and the call button (equal empty
     space on each side of the list, not page-centered): auto margins on the
     middle flex item split the header's free space evenly. The brand drops
     its invisible 250px lockup footprint so the gap is measured from the
     logo you actually see. Desktop-only — at <=760px the links live in the
     fixed drop-down and the header is just logo + buttons. */
  .site-header .brand { min-width: 0; }
  .nav-links { margin-inline: auto; }
}

/* Wide desktops only: mirror the .nav-cta 22px margin on the brand side so the
   two fixed gaps flanking the centered links match exactly. Not applied on
   761-1024px, where the header is already packed edge-to-edge and the extra
   margin would only tighten it further. */
@media (min-width: 1025px) {
  .site-header .brand { margin-right: 22px; }
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.nav-toggle span {
  width: 26px; height: 2px;
  background: var(--gold-2);
  transition: 0.3s;
  display: block;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url("../assets/media/Red_Flake_Hero.webp");
  background-size: cover;
  background-position: center;
  filter: brightness(0.55) saturate(1.05);
  transform: scale(1.04);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.72) 45%, rgba(0,0,0,0.45) 100%);
}
.hero .container { position: relative; z-index: 2; }
.hero-inner { max-width: 680px; padding: 60px 0; }

.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  margin: 18px 0;
  text-shadow: 0 4px 30px rgba(0,0,0,0.6);
}
.hero .lede {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text);
  max-width: 560px;
  margin-bottom: 14px;
}
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 26px 0 32px;
}
.pill {
  border: 1px solid var(--gold-3);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-1);
  background: rgba(20, 18, 10, 0.55);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- Stat strip ---------- */
.stats {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.stats .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}
.stat { padding: 40px 16px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat .num {
  font-family: "Cinzel", serif;
  font-size: 2.3rem;
  font-weight: 700;
}
.stat .label {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}

/* ---------- Services / cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 26px;
}
.card {
  background: linear-gradient(180deg, var(--panel) 0%, var(--black-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 28px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--gold-3);
  box-shadow: var(--shadow);
}
.card .icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(191, 149, 63, 0.12);
  border: 1px solid var(--gold-4);
  margin-bottom: 18px;
}
.card .icon svg { width: 28px; height: 28px; }
.card h3 { font-size: 1.18rem; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 0.94rem; }

/* ---------- Reviews / testimonials ---------- */
.review-card { display: flex; flex-direction: column; }
.review-card .stars {
  color: var(--gold-2);
  letter-spacing: 0.18em;
  font-size: 1.05rem;
  margin-bottom: 14px;
}
.review-card p {
  font-style: italic;
  color: var(--text);
  font-size: 0.97rem;
  margin-bottom: 16px;
}
.review-card cite {
  margin-top: auto;
  font-style: normal;
  font-weight: 700;
  color: var(--gold-1);
  font-size: 0.92rem;
}
.review-card .review-date {
  display: block;
  margin-top: 4px;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.review-reply {
  margin-top: 16px;
  padding: 14px 16px;
  border-left: 2px solid var(--gold-4);
  background: rgba(191, 149, 63, 0.07);
  border-radius: 0 10px 10px 0;
}
.review-reply .who {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-2);
  font-weight: 700;
  margin-bottom: 4px;
}
.review-reply p { font-style: normal; font-size: 0.88rem; color: var(--muted); margin: 0; }

.reviews-masonry {
  columns: 3;
  column-gap: 26px;
}
.reviews-masonry .review-card {
  break-inside: avoid;
  margin-bottom: 26px;
  display: block;
}
@media (max-width: 900px) { .reviews-masonry { columns: 2; } }
@media (max-width: 600px) { .reviews-masonry { columns: 1; } }

/* ---------- Social link ---------- */
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 0.88rem;
  color: var(--muted);
  transition: color 0.2s;
}
.social-link:hover { color: var(--gold-1); }

/* ---------- Feature list (split) ---------- */
.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: stretch;
}
.split .media {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.split .media img { width: 100%; height: 100%; object-fit: cover; }
.feature-list { list-style: none; margin-top: 22px; }
.feature-list li {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--line);
}
.feature-list li:last-child { border-bottom: 0; }
.feature-list .check {
  flex: 0 0 26px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--gold-gradient);
  color: #1a1407;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 0.85rem;
  margin-top: 2px;
}
.feature-list h3 { font-family: "Montserrat"; font-size: 1rem; margin-bottom: 2px; }
.feature-list p { color: var(--muted); font-size: 0.9rem; }

/* ---------- Pricing banner ---------- */
.price-banner {
  background:
    linear-gradient(rgba(10,10,10,0.84), rgba(10,10,10,0.9)),
    url("../assets/media/Logo2_JobBackground.webp");
  background-size: cover;
  background-position: center 35%;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.price-banner .price {
  font-family: "Cinzel", serif;
  font-size: clamp(3rem, 9vw, 5.4rem);
  font-weight: 700;
  line-height: 1;
}
.price-banner .price small { font-size: 1.2rem; color: var(--muted); }
.price-banner .price sup { font-size: 1.6rem; vertical-align: super; }
/* "Materials by" vendor badge above the eyebrow — sized to sit between the
   small eyebrow text and the large price without competing with either. */
.price-banner .vendor-logo {
  display: block;
  width: clamp(190px, 30vw, 250px);
  height: auto;
  margin: 0 auto 20px;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.6));
}

/* ---------- Gallery ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.gallery-item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: pointer;
  background: var(--panel-2);
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item .cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 28px 16px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translateY(8px);
  transition: 0.3s;
  color: var(--gold-1);
}
.gallery-item:hover .cap { opacity: 1; transform: translateY(0); }

/* Placeholder shown when an image file is missing */
.img-placeholder {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  text-align: center;
  background:
    repeating-linear-gradient(45deg, #14130d, #14130d 12px, #181610 12px, #181610 24px);
  color: var(--gold-3);
}
.img-placeholder span {
  font-family: "Cinzel", serif;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.8;
  padding: 0 12px;
}

/* Filter buttons */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
}
.filter-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  font-family: "Montserrat";
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: 0.2s;
}
.filter-btn:hover { color: var(--gold-1); border-color: var(--gold-3); }
.filter-btn.active { background: var(--gold-gradient); color: #1a1407; border-color: transparent; font-weight: 700; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(5,5,5,0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
.lightbox.open { display: flex; }
.lightbox img, .lightbox .img-placeholder {
  max-width: 90vw;
  max-height: 84vh;
  width: auto;
  border-radius: 10px;
  border: 1px solid var(--gold-4);
}
.lightbox .img-placeholder { width: 70vw; height: 60vh; }
.lightbox-close {
  position: absolute;
  top: 22px; right: 28px;
  font-size: 2.4rem;
  color: var(--gold-1);
  background: none;
  border: 0;
  cursor: pointer;
  line-height: 1;
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(191,149,63,0.15);
  border: 1px solid var(--gold-4);
  color: var(--gold-1);
  width: 52px; height: 52px;
  border-radius: 50%;
  font-size: 1.6rem;
  cursor: pointer;
  transition: 0.2s;
}
.lightbox-nav:hover { background: rgba(191,149,63,0.3); }
.lightbox-nav.prev { left: 24px; }
.lightbox-nav.next { right: 24px; }

/* ---------- Video gallery ---------- */
.gallery-subhead {
  text-align: center;
  margin: 0 auto 34px;
}
.gallery-subhead h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin: 10px 0 0; }

/* Sticky jump-nav between Photos & Videos sections */
.gallery-jump {
  position: sticky;
  top: 75px; /* sits directly under the 76px main header */
  z-index: 40;
  background: rgba(8, 8, 8, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.gallery-jump .container {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.gallery-jump a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--gold-3);
  color: var(--gold-1);
  padding: 8px 22px;
  border-radius: 999px;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background 0.2s ease, transform 0.2s ease;
}
.gallery-jump a:hover { background: rgba(191, 149, 63, 0.14); transform: translateY(-2px); }
.gallery-jump svg { width: 14px; height: 14px; fill: currentColor; }

/* On phones the centered pill row can overflow and clip on both ends —
   tighten spacing/padding so all three fit within the viewport. */
@media (max-width: 480px) {
  .gallery-jump .container {
    gap: 6px;
    padding-left: 8px;
    padding-right: 8px;
  }
  .gallery-jump a {
    padding: 8px 12px;
    gap: 5px;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
  }
  .gallery-jump svg { width: 12px; height: 12px; }
}

/* Offset the jump targets so section titles clear the sticky bars */
#photos, #videos, #color-charts { scroll-margin-top: 136px; }

/* "Load More" button (gallery paging) */
.load-more-wrap { text-align: center; margin-top: 40px; }
.load-more-wrap .btn { min-width: 180px; justify-content: center; }

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 860px;
  margin: 0 auto;
}
.video-item {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: pointer;
  background: var(--panel-2);
  padding: 0;
  width: 100%;
  font-family: inherit;
  color: inherit;
  display: block;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.video-item:hover { transform: translateY(-6px); border-color: var(--gold-3); box-shadow: var(--shadow); }
.video-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.video-item:hover img { transform: scale(1.06); }
.video-item .play-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 66px; height: 66px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(10, 10, 10, 0.5);
  border: 1px solid var(--gold-3);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: background 0.2s, transform 0.2s;
}
.video-item:hover .play-btn { background: rgba(191, 149, 63, 0.32); transform: scale(1.08); }
.video-item .play-btn svg { width: 26px; height: 26px; fill: var(--gold-1); margin-left: 3px; }
.video-item .cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 30px 14px 14px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.88));
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  color: var(--gold-1);
  text-align: left;
}

/* Pop-out video player */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(5, 5, 5, 0.96);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
}
.video-lightbox.open { display: flex; }
.video-lightbox video {
  max-width: min(92vw, 460px);
  max-height: 88vh;
  width: auto;
  border-radius: 12px;
  border: 1px solid var(--gold-4);
  background: #000;
  box-shadow: var(--shadow);
}

@media (max-width: 760px) {
  .video-grid { grid-template-columns: 1fr; max-width: 380px; }
}

/* ---------- Color charts ---------- */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.chart-item {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel-2);
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.chart-item:hover { transform: translateY(-6px); border-color: var(--gold-3); box-shadow: var(--shadow); }
.chart-item img {
  display: block;
  width: 100%;
  height: auto;
  background: #0e0d09;
}
.chart-item figcaption {
  padding: 14px 16px;
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  color: var(--gold-1);
  text-align: center;
}

/* Eye-catching callout under the color charts: a gold-bordered pill with the
   site's gradient text, a sparkle, and a soft pulsing glow to draw the eye. */
.chart-callout {
  margin: 40px auto 0;
  max-width: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px 34px;
  text-align: center;
  border-radius: 999px;
  border: 1px solid var(--gold-3);
  background: linear-gradient(135deg, rgba(191, 149, 63, 0.14), rgba(170, 119, 28, 0.05));
  font-family: "Cinzel", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  letter-spacing: 0.03em;
  animation: chartCalloutGlow 2.8s ease-in-out infinite;
}
.chart-callout-icon {
  font-size: 1.4em;
  line-height: 1;
  color: var(--gold-2);
  animation: chartCalloutTwinkle 2.8s ease-in-out infinite;
}
@keyframes chartCalloutGlow {
  0%, 100% { box-shadow: 0 0 16px rgba(212, 175, 55, 0.22); }
  50% { box-shadow: 0 0 34px rgba(212, 175, 55, 0.5); }
}
@keyframes chartCalloutTwinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; }
  50% { transform: scale(1.18) rotate(15deg); opacity: 1; }
}
@media (max-width: 560px) {
  .chart-callout { padding: 16px 20px; gap: 10px; }
}

/* ---------- Meet the Owners ---------- */
.owners {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.owners-photo {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--gold-4);
  box-shadow: var(--shadow);
}
.owners-photo img { width: 100%; height: 100%; object-fit: cover; }
.owners-body h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 12px 0 4px; }
.owners-body .owners-co {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}
.owners-body p { color: var(--muted); margin-bottom: 14px; }
.owners-body p:last-child { margin-bottom: 0; }

.commitment {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.commitment p { color: var(--muted); margin-bottom: 16px; }
.commitment .tagline {
  font-family: "Cinzel", serif;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  color: var(--gold-1);
  letter-spacing: 0.04em;
  margin-top: 26px;
}
@media (max-width: 900px) {
  .owners { grid-template-columns: 1fr; gap: 34px; }
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: start;
}
.contact-info { display: grid; gap: 20px; }
.info-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.2s;
}
.info-row:hover { border-color: var(--gold-3); }
.info-row .icon {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(191,149,63,0.12);
  border: 1px solid var(--gold-4);
  display: grid; place-items: center;
}
.info-row .icon svg { width: 22px; height: 22px; }
.info-row h2 { font-family: "Montserrat"; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.info-row a, .info-row p { font-size: 1.06rem; color: var(--text); font-weight: 600; }
.info-row a:hover { color: var(--gold-1); }

.contact-form {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px;
}
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 15px;
  color: var(--text);
  font-family: "Montserrat";
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold-3);
  box-shadow: 0 0 0 3px rgba(191,149,63,0.15);
}
.field textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: 0.8rem; color: var(--muted); margin-top: 6px; }
.form-success {
  display: none;
  background: rgba(191,149,63,0.12);
  border: 1px solid var(--gold-4);
  color: var(--gold-1);
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.form-success.show { display: block; }

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  position: relative;
  padding: 100px 0 70px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(rgba(10,10,10,0.82), rgba(10,10,10,0.92)),
    url("../assets/media/Logo_Background.webp");
  background-size: cover;
  background-position: center;
}
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 14px 0 12px; }
.page-hero p { color: var(--muted); max-width: 620px; margin: 0 auto; }

/* ---------- CTA strip ---------- */
.cta-strip {
  text-align: center;
  background: linear-gradient(180deg, var(--panel) 0%, var(--black) 100%);
  border-top: 1px solid var(--line);
}
.cta-strip h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 14px; }
.cta-strip p { color: var(--muted); max-width: 560px; margin: 0 auto 28px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--black-2);
  border-top: 1px solid var(--line);
  padding: 56px 0 28px;
  position: relative;
  z-index: 1;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-brand .brand-logo { height: 104px; width: auto; display: block; border-radius: 8px; }
/* Center the footer logo over the description text block below it (same 320px width). */
.footer-brand .brand { width: 320px; max-width: 100%; justify-content: center; }
.footer-brand p { color: var(--muted); font-size: 0.9rem; margin-top: 16px; max-width: 320px; }
.footer-col h3 {
  font-family: "Montserrat";
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-col a, .footer-col li { color: var(--muted); font-size: 0.92rem; transition: color 0.2s; }
.footer-col a:hover { color: var(--gold-1); }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
  font-size: 0.82rem;
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---------- Responsive ---------- */
/* Tighten the horizontal nav on narrow desktops/tablets so all seven links
   (Home … Color Charts … Contact) stay on one line until the hamburger
   takes over at 760px. */
@media (max-width: 1024px) {
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 0.76rem; letter-spacing: 0.06em; }
  .site-header .brand { min-width: 0; }
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 34px; }
  /* Single-column split: center the trailing button instead of pinning it left. */
  .split .mt-26 { text-align: center; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stats .grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .chart-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .nav-links {
    position: fixed;
    inset: 76px 0 auto 0;
    flex-direction: column;
    gap: 0;
    background: rgba(8,8,8,0.98);
    border-bottom: 1px solid var(--line);
    padding: 10px 0 24px;
    transform: translateY(-130%);
    transition: transform 0.35s ease;
    z-index: 49;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links li { width: 100%; text-align: center; }
  .nav-links a { display: block; padding: 16px; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-call-text { display: none; }
  .hero { min-height: 78vh; }
  /* Keep the logo from crowding out the menu button on phones. */
  .site-header .brand-logo { height: 50px; }
  .site-header .brand { min-width: 0; justify-content: flex-start; }
}

@media (max-width: 480px) {
  .site-header .brand-logo { height: 44px; }
}

@media (max-width: 560px) {
  .stats .grid { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .gallery-grid { grid-template-columns: 1fr; }
  .chart-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .footer-grid { grid-template-columns: 1fr; }
  .section { padding: 60px 0; }
}

/* =========================================================
   Mobile & device-adaptive enhancements
   Fluid type, safe-area insets, touch/hover & DPI queries,
   tap targets, reduced-motion. Built mobile-first on top of
   the breakpoints above; relies on relative units so it adapts
   to any screen size and pixel density automatically.
   ========================================================= */

/* Fluid base type: scales smoothly with the viewport and is clamped for
   readability. Desktop (>=625px wide) stays at 16px; small phones ease down
   to ~15px. Everything sized in rem inherits this, so the whole UI scales. */
html {
  font-size: clamp(15px, 13.5px + 0.4vw, 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body { overflow-wrap: break-word; }

/* Crisp media on any pixel density: SVG icons/logo are vector (resolution-
   independent) and photos/video are exported at ~2x, so they stay sharp on
   Retina/HiDPI screens without shipping oversized files to small phones. */
img, video { max-width: 100%; height: auto; }

/* Respect notch / rounded-corner safe areas (paired with viewport-fit=cover).
   env() is 0 on normal screens, so spacing is unchanged there. */
.container {
  padding-left: max(22px, env(safe-area-inset-left));
  padding-right: max(22px, env(safe-area-inset-right));
}
.site-footer { padding-bottom: max(28px, env(safe-area-inset-bottom)); }

/* Touch devices (no real hover): surface hover-only info and prevent the
   "stuck hover" state that lingers after a tap. */
@media (hover: none) {
  .gallery-item .cap { opacity: 1; transform: none; }
  .gallery-item:hover img,
  .card:hover,
  .video-item:hover,
  .btn:hover,
  .info-row:hover { transform: none; }
}

/* Comfortable tap targets + no iOS focus-zoom (form fields must be >=16px). */
@media (max-width: 760px) {
  .field input,
  .field select,
  .field textarea { font-size: 16px; }
  .btn { padding: 15px 26px; }
  .filter-btn { padding: 11px 18px; }
  .nav-toggle { padding: 10px; }
}

/* Small phones */
@media (max-width: 480px) {
  .section { padding: 52px 0; }
  .hero-inner { padding: 40px 0; }
  .contact-form { padding: 24px 20px; }
  .card { padding: 28px 22px; }
  .video-grid { max-width: 320px; }
  .footer-bottom { justify-content: center; text-align: center; }
  /* Keep long headings from clipping on small screens. */
  .hero h1 { font-size: clamp(1.95rem, 8.5vw, 2.6rem); }
  .page-hero h1 { font-size: clamp(1.85rem, 7.8vw, 2.6rem); }
  h1, h2, h3, .display { overflow-wrap: break-word; }
}

/* Short landscape screens (e.g. phone turned sideways): don't let the
   full-height hero swallow the whole view. */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: auto; padding: 90px 0; }
}

/* Honor a visitor's reduced-motion preference (accessibility / motion sickness). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   Intro splash (home page only)
   A pre-composed splash image, art-directed to the visitor's viewport
   aspect ratio via the <picture> sources in index.html. Because the
   served image already matches the screen's ratio, it fills edge-to-edge
   with `cover` (minimal/no crop) — no letterbox bars or blurred fill needed.
   ========================================================= */
.splash {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: var(--black);
  cursor: pointer;
  opacity: 1;
  /* Soft, slightly slow fade-out to reveal the page. */
  transition: opacity 1.4s ease-in-out;
  overflow: hidden;
}
.splash-pic {
  display: block;
  width: 100%;
  height: 100%;
}
/* Fills the viewport; the ratio-matched source keeps the crop negligible. */
.splash-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: splash-rise 1s ease both;
}
/* Fade-out state, toggled by JS (auto after 5s, or on click). */
.splash.is-hiding { opacity: 0; }
.splash.is-gone { display: none; }

/* Lock scrolling while the splash is up. */
body.splash-active { overflow: hidden; }

@keyframes splash-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   FAQ accordion (native <details>/<summary>, no JS)
   ========================================================= */
.faq-group { max-width: 860px; margin: 0 auto; }
.faq-group + .faq-group { margin-top: 56px; }
.faq-group-title {
  font-family: "Cinzel", serif;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  margin-bottom: 22px;
  text-align: center;
}
.faq-item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.faq-item[open] { border-color: var(--gold-3); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-family: "Cinzel", serif;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  color: var(--text);
  transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--gold-1); }
/* Plus / minus indicator */
.faq-item summary .faq-icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  position: relative;
}
.faq-item summary .faq-icon::before,
.faq-item summary .faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background: var(--gold-2);
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.faq-item summary .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] summary .faq-icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(0); }
.faq-item .faq-answer {
  padding: 0 24px 22px;
  color: var(--muted);
  line-height: 1.7;
}
.faq-item .faq-answer p { margin: 0; }
.faq-item .faq-answer p + p { margin-top: 14px; }
.faq-item .faq-answer ul { margin: 12px 0 0; padding-left: 22px; }
.faq-item .faq-answer ul li { margin: 6px 0; }
.faq-item .faq-answer figure { margin: 16px 0 4px; }
.faq-item .faq-answer figure img {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
  border: 1px solid var(--gold-3);
}

/* =========================================================
   Helper classes — replace former inline style="" attributes so the
   Content-Security-Policy can forbid inline styles (style-src 'self').
   ========================================================= */
.section.panel { background: var(--panel); }
.hero-actions.center { justify-content: center; }
.btn-block { width: 100%; justify-content: center; }
.social-link.ig { display: flex; margin-top: 10px; }
.badge-row.center-narrow { justify-content: center; max-width: 820px; margin: 0 auto; }
.note-center { text-align: center; color: var(--muted); margin-top: 40px; }
.center-mt40 { text-align: center; margin-top: 40px; }
.mt-26 { margin-top: 26px; }
.text-muted { color: var(--muted); }
.fw-600 { font-weight: 600; }
.about-h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 12px 0; }
.section-head.mb-36 { margin-bottom: 36px; }
.price-banner .price-note { color: var(--text); max-width: 560px; margin: 8px auto 26px; }

/* ---------- Thank-you page ---------- */
.page-hero .eyebrow {
  display: block;
  text-align: center;
  margin-bottom: 4px;
}
.page-hero .eyebrow + h1 { margin-top: 0; }
.thankyou-card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px;
  text-align: center;
}
.thankyou-card h2 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); margin-bottom: 28px; }
.thankyou-steps { display: grid; gap: 16px; text-align: left; margin-bottom: 30px; }
.thankyou-steps li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.thankyou-steps .icon {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(191, 149, 63, 0.12);
  border: 1px solid var(--gold-4);
  display: grid; place-items: center;
}
.thankyou-steps .icon svg { width: 22px; height: 22px; }
.thankyou-steps h3 { font-family: "Montserrat"; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.thankyou-steps p { color: var(--text); font-size: 0.98rem; }
.thankyou-urgent { color: var(--muted); margin-bottom: 18px; }
.thankyou-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 600px) {
  .thankyou-card { padding: 28px 20px; }
  .thankyou-actions .btn { width: 100%; justify-content: center; }
}