/* =========================================================
   Hunter’s Disc Jockey Service — stylesNEW.css (FULL REWRITE)
   - Theme tokens (dark/light)
   - Global layout + glass cards
   - Sticky header + dropdowns + mobile nav
   - Buttons
   - Hero + trust grids + services + experience + about + DJs
   - FAQ (Image #1 glass accordion)
   - Modals + planner card + bridal form fixes
   - Back-to-top (single system)
   - Scroll reveal helpers
   - Responsive + reduced motion
========================================================= */
/* =========================
   THEME TOKENS
========================= */
:root{
  --bg0:#05060a;
  --bg1:#0a0c13;
  --card: rgba(255,255,255,.08);
  --card2: rgba(255,255,255,.05);
  --stroke: rgba(255,255,255,.12);
  --stroke2: rgba(255,255,255,.18);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --gold:#c9b063;
  --red:#e53935;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --shadow2: 0 10px 30px rgba(0,0,0,.45);
  --radius: 18px;
  --font: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --serif: "Playfair Display", Georgia, serif;
  --header-bg: rgba(7,8,12,.72);
  --header-border: rgba(255,255,255,.10);
  --header-bg-scrolled: rgba(16, 10, 12, 0.94);
  --header-border-scrolled: rgba(255,255,255,.18);
  --focus-ring: 0 0 0 4px rgba(229,57,53,.18);
  --nav-panel-bg: rgba(10,10,14,.90);
  --dropdown-bg: rgba(10,10,14,.92);
  --btn-grad: linear-gradient(90deg, rgba(201,176,99,.95), rgba(229,57,53,.45));
}
:root[data-theme="light"]{
  --bg0:#f6f7fb;
  --bg1:#ffffff;
  --card: rgba(0,0,0,.05);
  --card2: rgba(0,0,0,.035);
  --stroke: rgba(0,0,0,.12);
  --stroke2: rgba(0,0,0,.18);
  --text: rgba(10,12,18,.92);
  --muted: rgba(10,12,18,.68);
  --shadow: 0 18px 60px rgba(0,0,0,.10);
  --shadow2: 0 10px 30px rgba(0,0,0,.08);
  --header-bg: rgba(255,255,255,.88);
  --header-border: rgba(0,0,0,.10);
  --header-bg-scrolled: rgba(255,255,255,.95);
  --header-border-scrolled: rgba(0,0,0,.14);
  --focus-ring: 0 0 0 4px rgba(229,57,53,.14);
  --nav-panel-bg: rgba(255,255,255,.95);
  --dropdown-bg: rgba(255,255,255,.96);
  --btn-grad: linear-gradient(90deg, rgba(201,176,99,.92), rgba(229,57,53,.28));
}
/* =========================
   GLOBAL
========================= */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  /* keeps sticky header from covering anchor jumps */
  padding-top: 92px;
  background:
    radial-gradient(1200px 900px at 18% 20%, rgba(255, 0, 0, 0.80), transparent 60%),
    radial-gradient(900px 700px at 82% 28%, rgba(201, 176, 99, 0.35), transparent 60%),
    linear-gradient(90deg, #2b0f14 0%, #140a0c 48%, #20160b 100%);
  background-attachment: fixed;
}
:root[data-theme="light"] body{
  background:
    radial-gradient(1200px 900px at 18% 20%, rgba(255, 0, 0, 0.55), transparent 60%),
    radial-gradient(900px 700px at 82% 28%, rgba(201, 176, 99, 0.18), transparent 60%),
    linear-gradient(90deg, #ffffff 0%, #f6f7fb 48%, #ffffff 100%);
}
a{ color:inherit; text-decoration:none; }
p{ line-height:1.6; color:var(--muted); }
.container{
  width:min(1120px, 92vw);
  margin-inline:auto;
}
.glass-card{
  background: linear-gradient(180deg, var(--card), var(--card2));
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}
.card{ padding:18px; }
.big-card{ padding:18px; }
.section{ padding:152px 0; }
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.about-check-text{color:#fff !important;}
.avail-text{color:#fff !important;}
.avail-text-sub{color:#c9b063 !important; /* warm gold */}


/* =========================
   HEADER
========================= */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--header-border);
  transition: .25s ease;
}
.site-header.scrolled{
  background: var(--header-bg-scrolled);
  border-bottom: 1px solid var(--header-border-scrolled);
  backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 14px 36px rgba(0,0,0,.45);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:240px;
}
.brand-logo{
  height:106px;
  width:auto;
  display:block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
.nav{
  display:flex;
  align-items:center;
  gap:12px;
}
.nav-toggle{
  display:none;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
}
.theme-toggle{
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:14px;
}
.nav-links > a{
  padding:10px 10px;
  border-radius:12px;
  font-weight:750;
  opacity:.95;
}
.nav-links > a:hover{
  background: rgba(255,255,255,.08);
}
/* =========================
   DROPDOWNS
========================= */
.dd{ position:relative; }
.dd-btn,
.dd-item{
  border:0;
  background:transparent;
  color:var(--text);
  font: inherit;
  font-weight:800;
  padding:10px 10px;
  border-radius:12px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.dd-btn:hover{
  background: rgba(255,255,255,.08);
}
.dd-menu{
  position:absolute;
  top: calc(100% + 10px);
  left:0;
  min-width: 220px;
  padding:10px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background: var(--dropdown-bg);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow2);
  display:none;
  z-index:60;
}
.dd.open .dd-menu{ display:block; }
.dd-menu a,
.dd-menu .dd-item{
  display:flex;
  width:100%;
  text-align:left;
  padding:10px 12px;
  border-radius:12px;
  font-weight:750;
}
.dd-menu a:hover,
.dd-menu .dd-item:hover{
  background: rgba(255,255,255,.08);
}
/* =========================
   BUTTONS
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  font-weight:850;
  box-shadow: 0 16px 38px rgba(0,0,0,.28);
  transition: .15s ease;
  background: var(--btn-grad);
  color:#0b0c10;
}
.btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.btn-ghost{
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-color: rgba(255,255,255,.16);
}
.btn-full{
  width:100%;
  justify-content:center;
}
/* =========================
   HERO / SECTIONS
========================= */
.hero{ padding:54px 0 26px; }
.hero-grid{
  display:grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap:32px;
  align-items:start;
}
.hero-card{ padding:18px; }
.hero-title{
  font-family:var(--serif);
  font-size: clamp(24px, 4.2vw, 35px);
  line-height:1.05;
  margin:16px 0 10px;
  letter-spacing:-.4px;
}
.accent{
  background: linear-gradient(90deg, var(--gold), rgba(201,176,99,.60));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-size: clamp(24px, 4.2vw, 52px);
}
.hero-subtitle{
  font-size: 17px;
  max-width: 56ch;
}
.hero-actions{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  margin:18px 0 22px;
}
.hero-actions .btn{
  width:100%;
  justify-content:center;
}
/* =========================
   TRUST GRID + MINI
========================= */
.trust-grid,
.trust-mini{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
}
.trust-grid{ margin-top:16px; }
.trust-mini{ margin-top:14px; }
.trust-card{
  padding:14px 16px;
  border-radius:18px;
  display:flex;
  align-items:center;
  gap:12px;
}
.trust-card i{ font-size:18px; opacity:.95; }
.trust-card strong{ display:block; line-height:1.1; }
.trust-card .muted{
  display:block;
  font-size:.92rem;
  opacity:.85;
  margin-top:3px;
}
.trust-mini-card{
  padding:12px 14px;
  border-radius:18px;
  line-height:1.15;
}
.trust-mini-card strong{
  display:block;
  font-weight:850;
  margin-bottom:4px;
}
.trust-mini-card .muted{
  display:block;
  font-size:.92rem;
  opacity:.85;
}
/* =========================
   QUICK FORM + INPUTS
========================= */
.card-title{ margin:0 0 10px; font-size:16px; }
.form-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.quick-form label{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-bottom:12px;
}
.quick-form label span{
  font-size:12px;
  color: rgba(255,255,255,.68);
  letter-spacing:.06em;
  text-transform: uppercase;
  font-weight: 800;
}
input, select, textarea{
  width:100%;
  padding:12px 12px;
  border-radius: 16px;
  border:1px solid var(--stroke);
  background: rgba(10,12,18,.66);
  color: var(--text);
  outline:none;
}
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea{
  background: rgba(255,255,255,.92);
  color: rgba(10,12,18,.92);
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(229,57,53,.55);
  box-shadow: var(--focus-ring);
}
input[type="date"]{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
  color-scheme: dark;
}
:root[data-theme="light"] input[type="date"]{
  background: rgba(255,255,255,.92);
  color: rgba(10,12,18,.92);
  color-scheme: light;
}
input[type="date"]::-webkit-calendar-picker-indicator{
  opacity: .9;
  filter: invert(1);
  cursor:pointer;
}
:root[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(0);
}
.tiny-note{
  margin:10px 0 0;
  font-size:12px;
  color: rgba(255,255,255,.62);
}
/* =========================
   CONTACT
========================= */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:start;
}
.contact-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.contact-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight:850;
  white-space:nowrap;
  opacity:.95;
}
.contact-lead{
  margin: 8px 0 14px;
  color: var(--muted);
  line-height:1.6;
}
.contact-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin: 14px 0 14px;
}
.contact-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  transition: transform .16s ease, filter .16s ease, border-color .16s ease;
}
.contact-item:hover{
  transform: translateY(-2px);
  filter: brightness(1.03);
  border-color: rgba(255,255,255,.18);
}
.contact-item--static:hover{ transform:none; filter:none; }
.ci-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  flex: 0 0 auto;
}
.ci-icon i{ font-size:18px; color: var(--gold); }
.ci-text{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.ci-text strong{ font-weight:900; color: rgba(255,255,255,.92); }
:root[data-theme="light"] .ci-text strong{ color: rgba(10,12,18,.92); }
.ci-text span{ color: rgba(255,255,255,.72); line-height:1.35; }
:root[data-theme="light"] .ci-text span{ color: rgba(10,12,18,.68); }
.ci-arrow{ margin-left:auto; opacity:.65; }
.contact-mini{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin: 12px 0 14px;
}
.contact-mini .mini{
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.contact-mini .mini strong{
  display:block;
  font-weight:900;
  margin-bottom:4px;
}
.contact-mini .mini span{
  display:block;
  color: rgba(255,255,255,.72);
  font-size:.95rem;
}
.contact-actions{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
  margin-top: 6px;
}
.contact-form-card h3{ margin:0 0 6px; }
.contact-form label{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-bottom:12px;
}
.contact-form label span{
  font-size:12px;
  color: rgba(255,255,255,.72);
  letter-spacing:.06em;
  text-transform: uppercase;
  font-weight: 800;
}
.contact-form textarea{
  resize: vertical;
  min-height: 140px;
}
/* =========================
   AVAILABILITY PANEL
========================= */
.availability-card{ padding:15px; }
.availability-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.badge-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.badge-dot{
  width:10px; height:10px;
  border-radius:1px;
  background: #66d19e;
  box-shadow: 0 0 0 4px rgba(102,209,158,.12);
}
.rating{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  color: rgba(255,255,255,.9);
}
.rating i{ color: var(--gold); }
.rating-note{ opacity: .75; font-weight: 700; }
.avail-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin: 12px 0 18px;
}
.avail-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.avail-item .ai-icon{
  width:34px; height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.avail-text strong{ display:block; line-height:1.1; }
.avail-text span{
  display:block;
  margin-top:4px;
  color: rgba(255,255,255,.72);
  font-size: .95rem;
}
.availability-card .subhead-title{
  margin: 10px 0 10px;
  font-size: 18px;
  font-weight: 900;
}
.availability-card input,
.availability-card select,
.availability-card textarea{
  background: rgba(10,12,18,.58);
}
/* =========================
   SERVICES GRID + HOVERS
========================= */
.service-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}
.service-card{
  position:relative;
  padding:22px;
  border-radius:20px;
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
  will-change: transform;
}
.service-card:hover{
  transform: translateY(-6px);
  filter: brightness(1.03);
}
@media (hover: none){
  .service-card:hover{ transform:none; }
}
.service-card h3{ margin:10px 0 8px; }
.service-card p{ margin:0 0 12px; opacity:.92; }
.service-card ul{ margin:0; padding-left:18px; }
.service-card li{ margin-bottom:6px; color: rgba(255,255,255,.9); }
.service-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.service-icon i{
  font-size:18px;
  color:#ffd6a3;
  transition: transform .2s ease, filter .2s ease;
}
.service-card--accent{
  background:linear-gradient(135deg, rgba(185,28,28,.55), rgba(0,0,0,.15));
  border:1px solid rgba(255,255,255,.18);
}
/* Icon glow + optional pulse (only while hovering) */
@keyframes iconPulse{
  0%,100%{ transform: scale(1.08); }
  50%{ transform: scale(1.14); }
}
.service-card:hover .service-icon i{
  transform: scale(1.08);
  filter: drop-shadow(0 0 10px rgba(255,80,80,.55));
  animation: iconPulse .7s ease-in-out infinite;
}
/* =========================
   EXPERIENCE (split + screenshot layout)
========================= */
.split{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  align-items:start;
}
#experience .experience-grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 26px;
  align-items:start;
}
#experience .experience-left{ padding-top: 10px; }
#experience .exp-title{
  margin: 0 0 10px;
  font-size: clamp(26px, 3.2vw, 40px);
  letter-spacing: -0.6px;
}
#experience .exp-lead{
  margin: 0 0 18px;
  max-width: 62ch;
  font-size: 1.05rem;
  opacity: .92;
}
#experience .exp-steps{
  display:grid;
  gap: 12px;
  margin-top: 10px;
}
#experience .exp-step{
  display:grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items:center;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  backdrop-filter: blur(12px);
}
#experience .exp-num{
  font-weight: 900;
  letter-spacing: .06em;
  color: rgba(201,176,99,.95);
  font-size: 1.05rem;
  opacity: .95;
}
#experience .exp-step-body strong{
  display:inline-block;
  margin-right: 8px;
  font-size: 1.05rem;
  color: rgba(255,255,255,.92);
}
#experience .exp-step-body span{
  color: rgba(255,255,255,.72);
  font-size: 1.02rem;
}
#experience .exp-cta{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}
#experience .experience-right{ padding: 18px 18px 16px; }
#experience .exp-right-title{
  margin: 4px 0 14px;
  font-size: 1.25rem;
}
#experience .exp-checklist{
  display:grid;
  gap: 12px;
  margin-bottom: 16px;
}
#experience .exp-check{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
#experience .exp-check i{
  color: #66d19e;
  filter: drop-shadow(0 0 10px rgba(102,209,158,.22));
}
#experience .exp-check span{
  color: rgba(255,255,255,.88);
  font-weight: 650;
}
#experience .exp-mini{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 8px;
}
#experience .exp-metric{
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
#experience .exp-metric strong{
  display:block;
  font-size: 1rem;
  margin-bottom: 4px;
}
#experience .exp-metric span{
  display:block;
  color: rgba(255,255,255,.70);
  font-size: .95rem;
}
/* =========================
   ABOUT: single story card
========================= */
.about-story{
  margin-top: 18px;
  padding: 22px;
}
.about-story-head{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.about-story-head h3{
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: -0.2px;
}
.about-story-head p{
  margin: 0;
  max-width: 100%;
  color: var(--muted);
}
.about-story-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 12px;
}
.about-story-block{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 18px;
  padding: 18px;
}
.about-story-block h4{
  margin: 0 0 10px;
  font-size: 1.05rem;
}
.about-story-block p{ margin: 0 0 12px; }
.about-callout{
  margin-top: 10px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(90deg, rgba(201,176,99,.12), rgba(229,57,53,.10));
  color: rgba(255,255,255,.90);
}
.about-checklist{
  display:grid;
  gap: 10px;
  margin-top: 6px;
}
.about-check{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.about-check i{
  margin-top: 2px;
  color: #66d19e;
  filter: drop-shadow(0 0 10px rgba(102,209,158,.18));
}
.about-check span{ color: rgba(255,255,255,.86); }
.about-story-foot{
  margin-top: 12px !important;
  color: rgba(255,255,255,.72);
}
/* =========================
   OUR DJs — modern panel content
========================= */
.djs-panel{ padding: 22px; }
.djs-intro h3{ margin: 0 0 10px; font-size: 1.25rem; }
.djs-intro .lead{ margin: 0 0 8px; }
.djs-intro .muted{ margin: 0; opacity: .85; }
.dj-card{
  margin-top: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  border-radius: 18px;
  overflow: hidden;
}
.dj-top{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  padding: 18px;
  align-items: start;
}
.dj-photo{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.dj-photo img{
  display: block;
  width: 100%;
  height: auto;
}
.dj-meta h4{
  margin: 0 0 10px;
  font-size: 1.2rem;
}
.dj-meta p{ margin: 0 0 10px; color: rgba(255,255,255,.78); }
.dj-pill-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.dj-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  font-weight: 800;
  font-size: .92rem;
}
.dj-testimonials{
  padding: 18px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.08);
}
.dj-testimonials-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.dj-testimonials-head h5{ margin: 0; font-size: 1.05rem; }
.dj-testimonials-head .muted{ opacity: .8; }
/* DJ photos: default (desktop) */
.dj-photo {
  width: 100% !important;
  height: auto;
  display: block;
}
.dj-photo--secondary{
  width: 50% !important;
  height: auto;
  display: block;
}
/* If you currently force a fixed height + cover somewhere, this stops head-chopping on mobile */
@media (max-width: 768px){
  .dj-photo,
  .dj-photo--secondary{
    height: auto !important;
    object-fit: contain !important;
    object-position: center top; /* keeps heads safely in frame if anything constrains it */
    max-height: 420px;           /* optional: prevents giant tall images on phones */
  }
  /* If the image is inside a container that clips, disable clipping on mobile */
  .dj-profile,
  .dj-photo-row{
    overflow: visible;
  }
}
.testimonial-card{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  border-radius: 18px;
  padding: 16px;
  margin-top: 12px;
}
.quote{
  margin: 0 0 12px;
  color: rgba(255,255,255,.82);
  line-height: 1.65;
}
.quote-meta{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.quote-meta strong{ color: rgba(255,255,255,.92); }
.quote-meta .muted{ opacity: .75; }
.testimonial-media{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.testimonial-media img{
  display: block;
  width: 100%;
  height: auto;
}
.dj-footer{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.dj-footer strong{ color: rgba(255,255,255,.92); }
.dj-footer .muted{ opacity: .78; }
/* =========================
   FAQ (Image #1 glass accordion)
========================= */
.faq-section{ padding: 120px 0; }
.faq-card{
  padding: clamp(18px, 2.4vw, 26px);
}
.faq-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom: 12px;
}
.faq-title{
  margin:0;
  font-size: 1.35rem;
  letter-spacing:.2px;
  color: var(--text);
}
.faq-sub{
  margin:6px 0 0;
  color: var(--muted);
}
.faq-link{
  white-space:nowrap;
  padding: 10px 14px;
}
.faq-acc{
  margin-top: 14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.faq-item{
  border: 1px solid var(--stroke);
  border-radius: 18px;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}
:root[data-theme="light"] .faq-item{
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02));
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.faq-q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 16px 18px;
  border:0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align:left;
  cursor:pointer;
  backdrop-filter: blur(12px);
}
.faq-q span{
  font-weight: 900;
  font-size: 1.02rem;
}
.faq-q:hover{ background: rgba(255,255,255,.05); }
:root[data-theme="light"] .faq-q:hover{ background: rgba(0,0,0,.04); }
.faq-q:focus-visible{
  outline:none;
  box-shadow: var(--focus-ring);
}
.faq-q i{
  opacity:.9;
  transition: transform .18s ease;
}
.faq-item.is-open .faq-q i{ transform: rotate(180deg); }
.faq-a{
  padding: 0 18px 18px;
  color: var(--muted);
}
.faq-a p{
  margin: 10px 0 0;
  line-height: 1.65;
  max-width: 85ch;
}
.faq-item.is-open{
  border-color: rgba(201,176,99,.28);
  box-shadow: 0 18px 44px rgba(0,0,0,.30);
}
:root[data-theme="light"] .faq-item.is-open{
  box-shadow: 0 18px 44px rgba(0,0,0,.10);
}
.faq-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top: 14px;
}
/* =========================
   MODALS
========================= */
.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:1000;
}
.modal.is-open{ display:block; }
.modal-overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.10);
}
.modal-dialog{
  position:relative;
  width:min(980px, 94vw);
  margin: 6vh auto;
  border-radius: 10px;
  background: transparent;
  border: 0;
  box-shadow: 0 28px 80px rgba(0,0,0,.55);
  overflow:hidden;
}
.modal-close{
  position:absolute;
  top:10px;
  right:18px;
  width:42px;
  height:42px;
  border-radius:84px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,0,0,.92);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:5;
}
.modal-close:hover{ color:#000; }
.modal-close:hover i{ color:#000; }
.modal-body{
  max-height: 82vh;
  overflow:auto;
  padding: 0;
  padding-top: 10px;
}
body.modal-open{ overflow:hidden; }
/* =========================
   PLANNER CARD (Bridal form)
========================= */
.planner-card{
  max-width: 900px;
  margin: 0 auto 50px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 18px 35px rgba(15, 23, 42, 0.25);
  padding: 32px;
  color:#111;
  font-family: Tahoma, var(--font);
  border: 2px solid red;
}
.planner-card h2{
  letter-spacing: 0.12em;
  font-size: 1.3rem;
  text-transform: uppercase;
  color: #777;
  margin: 0 0 6px;
}
.planner-card p.subhead{
  margin: 0 0 24px;
  color: #444;
  font-size: 0.98rem;
}
.field-group{ margin-bottom: 18px; }
.field-label{
  display:block;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: #777;
  margin-bottom: 4px;
}
.field-label span.req{ color:#c53030; margin-left:2px; }
.planner-card input[type="text"],
.planner-card input[type="email"],
.planner-card input[type="tel"],
.planner-card input[type="date"],
.planner-card textarea,
.planner-card select{
  width:100%;
  box-sizing:border-box;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid #ccc;
  font-size: 0.98rem;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  background: #fafafa;
  color:#111;
}
.planner-card textarea{
  min-height:80px;
  resize:vertical;
}
.planner-card input:focus,
.planner-card textarea:focus,
.planner-card select:focus{
  outline:none;
  border-color:#b91c1c;
  box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.45);
  background:#fff;
}
.planner-card input[type="date"]{
  color-scheme: light;
}
.planner-card input[type="date"]::-webkit-calendar-picker-indicator{
  opacity: .9;
  filter: invert(0);
}
.flex-row{ display:flex; gap:10px; }
.flex-row > *{ flex:1; }
.helper-text, .note{
  font-size: .8rem;
  color:#777;
  margin-top:4px;
}
.planner-card input[type="submit"],
.planner-card button[type="submit"]{
  border-radius: 999px;
  border:none;
  padding: 11px 26px;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor:pointer;
  background: linear-gradient(135deg, #f97316, #ea580c);
  color:#fff;
  box-shadow: 0 12px 25px rgba(249,115,22,0.35);
  transition: transform .1s ease, box-shadow .1s ease, opacity .1s ease;
}
.planner-card input[type="submit"]:hover,
.planner-card button[type="submit"]:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 35px rgba(249,115,22,0.40);
  opacity: .96;
}
/* Bridal form “winner fixes” */
.planner-card .field-group > label:not(.field-label){
  display: inline-flex;
  align-items:center;
  gap: 10px;
  margin: 6px 18px 0 0;
  width:auto;
  line-height:1.4;
  color:#111;
  font-weight:600;
}
.planner-card input[type="radio"],
.planner-card input[type="checkbox"]{
  width:auto;
  flex:0 0 auto;
  margin:0;
  transform: translateY(1px);
}
.planner-card .checkbox-group{ margin-top: 8px; }
.planner-card .checkbox-group label{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  width:100%;
  box-sizing:border-box;
  margin:0;
  padding:12px 12px;
  line-height:1.35;
  white-space: normal;
  overflow:hidden;
  cursor:pointer;
}
.planner-card .checkbox-group label:nth-child(odd){
  background-color:#ffffff;
  color:#000000;
}
.planner-card .checkbox-group label:nth-child(even){
  background-color:#b32407;
  color:#ffffff;
}
.planner-card #suggested_styles_other{ min-height:110px; }
.form-section{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.form-section-title{
  margin: 0 0 12px;
  font-size: 1.05rem;
  color: #ff3b3b;
  letter-spacing: .2px;
}
/* =========================
   SCROLL REVEAL HELPERS
========================= */
.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
/* =========================
   BACK TO TOP (single system)
========================= */
.backtop-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  background: var(--btn-grad);
  color: #0b0c10;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 14px 36px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: .2s ease;
  z-index: 60;
}
.backtop-fab.show{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
.backtop-fab i{ transform: translateY(-1px); }
/* =========================
   FOOTER
========================= */
.site-footer{ margin-top: 70px; }
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: stretch;
  padding: 18px 0 24px;
}
.footer-brand{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.footer-title{
  margin: 8px 0 0;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: .02em;
  text-align:left;
}
.footer-contact{
  color: var(--muted);
  line-height: 1.55;
  text-align:left;
}
.footer-contact a{
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-gap{ height: 8px; }
.footer-actions .btn{ width: fit-content; }
.footer-mockup-card{
  padding: 14px;
  height: 100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 10px;
}
.footer-mockup-img{
  width: min(520px, 100%);
  height: auto;
  display:block;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
}
.footer-mockup-label{ font-weight: 900; opacity: .92; }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 16px 0;
}
.footer-bottom-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.footer-copy{ font-weight: 850; opacity: .92; }
.footer-accent{ color: var(--gold); }
.footer-links{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}
.footer-links a{
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 800;
  opacity: .92;
}
.footer-links a:hover{ background: rgba(255,255,255,.08); }
.footer-social{ display:flex; gap: 10px; }
.footer-logo{ max-width: 40%; }
/* =========================
   RESPONSIVE
========================= */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  .service-grid,
  .hero-actions,
  .trust-grid,
  .trust-mini{
    grid-template-columns: 1fr;
  }
  .contact-grid{ grid-template-columns: 1fr; }
  .contact-mini{ grid-template-columns: 1fr; }
  .contact-chip{ white-space: normal; }
  .split{ grid-template-columns: 1fr; }
  #experience .experience-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  #experience .exp-mini{ grid-template-columns: 1fr; }
  #experience .exp-step{ grid-template-columns: 56px 1fr; }
  .about-story-grid{ grid-template-columns: 1fr; }
  .dj-top{ grid-template-columns: 1fr; }
  .dj-footer{
    flex-direction: column;
    align-items: flex-start;
  }
  .dj-footer .btn{
    margin-left: 0 !important;
    width: 100%;
    justify-content: center;
  }
  .footer-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 820px){
  body{ padding-top: 96px; }
  .nav-toggle{ display:inline-flex; }
  .nav-links{
    position:absolute;
    right:4vw;
    top:78px;
    width:min(360px, 92vw);
    padding:12px;
    border-radius:18px;
    border:1px solid var(--stroke);
    background: var(--nav-panel-bg);
    backdrop-filter: blur(12px);
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    box-shadow: var(--shadow2);
    z-index:70;
  }
  .nav-links.open{ display:flex; }
  .brand-logo{ height:52px; }
  .dd-menu{
    position:static;
    display:none;
    margin-top:4px;
    width:100%;
  }
  .dd.open .dd-menu{ display:block; }
  .modal-dialog{ margin: 3vh auto; }
  .planner-card{ padding: 20px; }
  .flex-row{ flex-direction:column; }
}
@media (max-width: 720px){
  .mini-metrics{ grid-template-columns: 1fr; }
  .faq-head{
    flex-direction:column;
    align-items:stretch;
  }
  .faq-actions{
    justify-content:stretch;
    flex-direction:column;
  }
}
/* =========================
   ACCESSIBILITY
========================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto !important; }
  .reveal{ transition:none; transform:none; }
  .service-card,
  .btn{ transition:none; }
  .service-card:hover .service-icon i{ animation:none; }
}
/* =========================
   HOTFIX: OUR DJs section layout
   - resolves .dj-photo being used as BOTH wrapper and img
   - restores the two-column layout + big photo placement
========================= */
/* Treat .dj-photo as the WRAPPER (div) again */
.djs-panel .dj-card .dj-top{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  padding: 18px;
  align-items: start;
}
.djs-panel .dj-card .dj-photo{
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.djs-panel .dj-card .dj-photo img{
  display:block;
  width:100%;
  height:auto;
}
/* If you have a "secondary" big photo under the text, keep it behaving like a big card image */
.djs-panel .dj-card .dj-photo--secondary{
  display:block;
  width: min(520px, 100%);
  height:auto;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  margin-top: 12px;
}
/* Mobile */
@media (max-width: 980px){
  .djs-panel .dj-card .dj-top{
    grid-template-columns: 1fr;
  }
  .djs-panel .dj-card .dj-photo{
    max-width: 320px;
  }
}
/* =========================
   OUR DJs — FIX for current HTML (dj-photo is an IMG)
   Restores two-column layout + proper image sizing
========================= */
.dj-profile{
  display:grid;
  grid-template-columns: 190px 1fr;
  gap: 18px;
  align-items:start;
}
/* Main DJ headshot (the left image) */
.dj-profile > img.dj-photo{
  width: 190px;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  object-fit: cover;
  display:block;
}
/* The secondary photo should NOT be forced to 190px */
.dj-photo-row{
  margin: 12px 0 12px;
}
.dj-photo-row > img.dj-photo--secondary{
  width: min(520px, 100%);
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  display:block;
}
/* If a secondary image still has both classes (dj-photo + dj-photo--secondary),
   override the small sizing so it behaves like the big image. */
.dj-photo-row > img.dj-photo.dj-photo--secondary{
  width: min(520px, 100%) !important;
  height: auto !important;
}
/* Divider */
.dj-divider{
  margin: 18px 0;
  opacity: .25;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.18);
}
/* Mobile */
@media (max-width: 820px){
  .dj-profile{
    grid-template-columns: 1fr;
  }
  .dj-profile > img.dj-photo{
    width: min(260px, 100%);
  }
}
/* =========================
   DJs — restore layout
   ========================= */
.djs-card .dj-profile{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap: 18px;
  align-items:start;
  padding: 18px 0;
}
.djs-card .dj-photo{
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  display:block;
}
.djs-card .dj-body{ min-width:0; }
.djs-card .dj-name{ margin: 2px 0 10px; font-weight: 900; }
.djs-card .dj-divider{
  border: 0;
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 8px 0;
}
.djs-card .dj-photo-row{
  margin: 14px 0 14px;
}
.djs-card .dj-photo--secondary{
  width: min(760px, 100%);
  height: auto;
  display:block;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
/* Mobile: stack image above text */
@media (max-width: 820px){
  .djs-card .dj-profile{
    grid-template-columns: 1fr;
  }
  .djs-card .dj-photo{
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}
/* =========================
   FAQ — scoped accordion styles
   (prevents leaking into DJ cards)
   ========================= */
.faq-section .faq-card{ padding: 18px; }
.faq-section .faq-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.faq-section .faq-acc{ margin-top: 10px; }
.faq-section .faq-item{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  overflow:hidden;
  margin: 10px 0;
}
.faq-section .faq-q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor:pointer;
  text-align:left;
  font-weight: 850;
}
.faq-section .faq-q i{
  transition: transform .18s ease;
}
.faq-section .faq-item.is-open .faq-q i{
  transform: rotate(180deg);
}
.faq-section .faq-a{
  padding: 0 14px 14px;
  color: rgba(255,255,255,.82);
  line-height: 1.6;
}
.faq-section .faq-actions{
  display:flex;
  gap: 10px;
  justify-content:flex-end;
  margin-top: 12px;
  flex-wrap:wrap;
}
/* =========================
   Testimonials — bring back the old standalone “character”
   ========================= */
#testimonials .t-hero{ padding: 6px 0 6px; }
#testimonials .t-title{
  margin: 0 0 10px;
  font-size: clamp(26px, 4vw, 44px);
  letter-spacing: -.4px;
}
#testimonials .t-sub{
  color: var(--muted);
  margin: 0 0 18px;
  max-width: 80ch;
  line-height: 1.6;
}
/* Toolbar */
#testimonials .t-toolbar{
  padding: 14px;
  margin: 16px 0 18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}
#testimonials .t-search form{
  display:flex;
  gap:10px;
  width:100%;
  flex-wrap:wrap;
  align-items:center;
}
#testimonials .t-search input[type="text"]{
  flex:1;
  min-width: 220px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(10,12,18,.58);
  color: var(--text);
  outline:none;
}
#testimonials .t-search input[type="text"]:focus{
  border-color: rgba(229,57,53,.55);
  box-shadow: var(--focus-ring);
}
/* Cards + spacing */
#testimonials .t-grid{
  display:grid;
  gap: 16px;
}
#testimonials .t-card{
  padding: 18px;
}
#testimonials .t-headline{
  display:inline-block;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.95);
  background: rgba(229,57,53,.18);
  border: 1px solid rgba(229,57,53,.25);
  padding: 8px 10px;
  border-radius: 12px;
  margin-bottom: 10px;
}
#testimonials .t-meta{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin: 8px 0 12px;
  color: var(--muted);
}
#testimonials .t-avatar{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}
#testimonials .t-body{
  color: rgba(255,255,255,.85);
  line-height: 1.6;
}
#testimonials .t-body p{
  margin: 0 0 10px;
  color: rgba(255,255,255,.82);
}
/* Gallery */
#testimonials .t-gallery{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 12px;
}
#testimonials .t-gallery a{
  display:block;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
#testimonials .t-gallery img{
  width: 220px;
  height: 160px;
  object-fit: cover;
  display:block;
}
/* Pagination */
#testimonials .t-pager{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  margin-top: 22px;
}
#testimonials .t-pagebtn{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  font-weight: 850;
}
#testimonials .t-pagebtn.active{
  background: rgba(201,176,99,.18);
  border-color: rgba(201,176,99,.30);
}
@media (max-width: 680px){
  #testimonials .t-gallery img{ width:100%; height: 190px; }
}
/* ============================
   Parallax Section Breaks
   ============================ */
.parallax-break{
  position: relative;
  width: 100%;
  min-height: 58vh;
  overflow: hidden;
  isolation: isolate;
}
.parallax-media{
  position:absolute;
  inset:0;
  transform: translateZ(0);
}
.parallax-layer{
  position:absolute;
  inset:-12%;
  background-position:center;
  background-repeat:no-repeat;
  background-size: cover;
  transform: translate3d(0,0,0) scale(1.06);
  will-change: transform, opacity;
}
/* Layer sources from CSS variables */
.parallax-break .layer-1{ background-image: var(--bg1); opacity: 1; }
.parallax-break .layer-2{ background-image: var(--bg2); opacity: 0; }
/* If no bg2 provided, layer-2 stays invisible */
.parallax-break[style*="--bg2"] .layer-2{ opacity: 0; }
/* Dark/pretty overlay */
.parallax-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 700px at 20% 15%, rgba(229,57,53,.18), transparent 60%),
    radial-gradient(900px 700px at 80% 30%, rgba(201,176,99,.12), transparent 60%),
    linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.22), rgba(0,0,0,.55));
  z-index: 2;
}
/* Ghosted title */
.parallax-title{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 3;
  pointer-events:none;
  mix-blend-mode: screen;
  opacity: .95;
  filter: blur(.2px);
}
.parallax-title::before{
  content: attr(data-text);
  font-family: var(--serif, "Playfair Display", serif);
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: clamp(34px, 5.6vw, 92px);
  color: rgba(255,255,255,.55);
  text-shadow: 0 22px 60px rgba(0,0,0,.55);
}
/* Mobile fallback: fixed attachment not reliable; we’re animating transforms anyway */
@media (max-width: 900px){
  .parallax-break{ min-height: 40vh; }
  .parallax-layer{ inset:-18%; transform: translate3d(0,0,0) scale(1.08); }
}
/* Break out of a centered container to true full width */
.parallax-break{
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  border-radius: 0;
}
/* =========================
   LIGHT THEME — make text red
   ========================= */
html[data-theme="light"]{
  /* Main text everywhere */
  --text: #c40000;
  /* Muted text should still be readable but softer */
  --muted: rgba(196, 0, 0, .72);
  /* If you have other text vars, override them too */
  --text-light: #c40000;
  --text-strong: #c40000;
  --text: #c40000 !important;
}
.avail-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin: 12px 0 18px;
}
.avail-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.avail-item .ai-icon{
  width:34px; height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.avail-text strong{ display:block; line-height:1.1; }
.avail-text span{
  display:block;
  margin-top:4px;
  color: navy !important;
  font-size: .95rem;
}
.quick-form label{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-bottom:12px;
}
.quick-form label span{
  font-size:12px;
  color: navy;
  letter-spacing:.06em;
  text-transform: uppercase;
  font-weight: 800;
}
.about-story-head p{
  margin: 0;
  max-width: 100%;
  color: #c40000;
}
.about-callout{
  margin-top: 10px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(90deg, rgba(201,176,99,.12), rgba(229,57,53,.10));
  color: maroon;
}
.about-story-foot{
  margin-top: 12px !important;
  color: rgb(255, 0, 17);
}
/* =========================
   Testimonials — bring back the old standalone “character”
   ========================= */
#testimonials .t-sub{
  color: magenta;
  margin: 0 0 18px;
  max-width: 80ch;
  line-height: 1.6;
}
#testimonials .t-search input[type="text"]{
  flex:1;
  min-width: 220px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(10,12,18,.58);
  color: pink;
  outline:none;
}
#testimonials .t-search input[type="text"]:focus{
  border-color: salmon;
  box-shadow: var(--focus-ring);
}
#testimonials .t-headline{
  display:inline-block;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgb(0, 94, 255);
  background: rgba(229,57,53,.18);
  border: 1px solid rgba(229,57,53,.25);
  padding: 8px 10px;
  border-radius: 12px;
  margin-bottom: 10px;
}
#testimonials .t-meta{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin: 8px 0 12px;
  color: rgb(87, 4, 4);
}
#testimonials .t-body{
  color: nAVY;
  line-height: 1.6;
}
#testimonials .t-body p{
  margin: 0 0 10px;
  color: #ff0105;
}
/* Gallery */
#testimonials .t-gallery{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 12px;
}
#testimonials .t-gallery a{
  display:block;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
#testimonials .t-gallery img{
  width: 220px;
  height: 160px;
  object-fit: cover;
  display:block;
}
/* Pagination */
#testimonials .t-pager{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  margin-top: 22px;
}
#testimonials .t-pagebtn{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  font-weight: 850;
}
#testimonials .t-pagebtn.active{
  background: rgba(201,176,99,.18);
  /* border-color: rgba(201,176,99,.30); */
  border-color: cyan;
}
@media (max-width: 680px){
  #testimonials .t-gallery img{ width:100%; height: 190px; }
}
.service-card li{ margin-bottom:6px; color: maroon; }
#experience .exp-step-body strong{
  display:inline-block;
  margin-right: 8px;
  font-size: 1.05rem;
  color: rgba(92, 27, 27, 0.92);
}
#experience .exp-step-body span{
  color: rgba(140, 30, 30, 0.72);
  font-size: 1.02rem;
}
#experience .exp-check span{
  color: maroon;
  font-weight: 650;
}
#experience .exp-metric span{
  display:block;
  color: rgb(255, 47, 0);
  font-size: .95rem;
}
.about-check span{ color: rgb(0, 81, 255); }
.rating{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  color: rgb(141, 121, 5);
}
.rating i{ color: rgb(141, 121, 5); }
.quote{
  margin: 0 0 12px;
  color: maroon;
  line-height: 1.65;
}
.quote-meta strong{ color: rgb(163, 17, 17); }
.quote-meta .muted{ opacity: .75; }
.contact-form label span{
  color: navy;
}
/* Safety net: force common text holders in light mode */
html[data-theme="light"] body{
  color: #c40000 !important;
}
html[data-theme="light"] .muted,
html[data-theme="light"] .rating-note,
html[data-theme="light"] .tiny-note,
html[data-theme="light"] .helper-text,
html[data-theme="light"] .contact-lead,
html[data-theme="light"] .hero-subtitle{
  color: maroon !important;
}
html[data-theme="light"] .about-check-text{color:#c40000 !important;}
html[data-theme="light"] .avail-text{color:#c40000 !important;}
html[data-theme="light"] .avail-text-sub{
  color:navy !important; /* deep navy */
}



html[data-theme="light"] a{
  color: #c40000 !important;
}
.hp-field{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

html[data-theme="dark"] .avail-text-sub{
  color:#ffcc00 !important; /* deep navy */
}
html[data-theme="dark"] .exp-step-body{
  color:salmon !important; /* deep navy */
}