:root{
  --bg:#0b0e14;
  --panel:#101826;
  --panel2:#0f1420;
  --text:#e9eef7;
  --muted:#aab6c8;
  --line:rgba(255,255,255,.08);
  --accent:#7cffd1;
  --accent2:#8aa8ff;
  --danger:#ff6b8b;
  --shadow:0 16px 40px rgba(0,0,0,.45);
  --r:18px;
  --padMin:96px;
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:inherit}
.wrap{width:min(1120px,92vw);margin:0 auto}
.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:12px;top:12px;background:#000;padding:10px 12px;border-radius:10px;z-index:10}

/* =========================================================
   HEADER – hard reset alignment (matches controller width)
   ========================================================= */

.top{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(11,14,20,.90);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

/* Make header container match the controller width (1240px) */
.top .wrap{
  width:min(1240px,94vw);
  margin:0 auto;
  padding:10px 14px;   /* THIS is the missing integration */
}


/* Brand left / Nav right, properly aligned */
.topRow{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:18px;
}

/* Brand becomes compact: logo above tagline */
.brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;

  padding:8px 12px;
  border-radius:14px;

  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}


.brandLink{
  display:flex;
  align-items:center;
  text-decoration:none;
  line-height:0;
}

.siteLogo{
  display:block;
  height:44px;
  width:auto;
  max-width:400px;
  object-fit:contain;
}


.tag{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.1;
  white-space:nowrap;
  opacity:.95;
}

/* Nav sits right, consistent spacing, no weird floating */
.nav{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.nav a{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:10px;
  color:var(--muted);
  text-decoration:none;
  font-size:14px;
  line-height:1;
}

.nav a:hover{
  color:var(--text);
  background:rgba(255,255,255,.03);
}

/* Mobile: stack nav under brand cleanly */
@media (max-width:980px){
  .topRow{
    grid-template-columns:1fr;
    gap:10px;
  }
  .nav{
    justify-content:flex-start;
  }
  .siteLogo{
    height:34px;
  }
  .tag{
    white-space:normal;
  }
}

/* --- DJ Controller Home (add to END of site.css) --- */
.djWrap{min-height:calc(100svh - 56px);padding:14px 14px 22px}
.djController{
  max-width:1240px;margin:0 auto;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(800px 380px at 15% 10%, rgba(124,255,209,.14), transparent 55%),
    radial-gradient(700px 320px at 85% 0%, rgba(255,107,139,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  padding:14px;
}
.djTop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.djBrand{display:flex;align-items:center;gap:10px}
.djLogoDot{width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.1) 35%, rgba(124,255,209,.9));
  box-shadow:0 0 0 4px rgba(124,255,209,.10), 0 10px 20px rgba(0,0,0,.25);
}
.djName{font-weight:900;letter-spacing:.3px;font-size:18px}
.djTag{color:var(--muted);font-size:12px;margin-top:1px}
.djQuick{display:flex;gap:10px;flex-wrap:wrap}
.djPill{text-decoration:none;border-radius:999px;padding:10px 12px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.22)}
.djPill.ghost{opacity:.85}
.djDeck{position:relative;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(255,255,255,.03));overflow:hidden}
.djDeckLabel{position:absolute;bottom:12px;left:12px;font-size:12px;color:var(--muted);letter-spacing:.22em}
.djCenter{display:flex;flex-direction:column;gap:12px}
.djScreenShell{border-radius:18px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.18));box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 18px 40px rgba(0,0,0,.32);overflow:hidden}
.djScreenHdr{display:flex;justify-content:space-between;gap:10px;align-items:flex-end;padding:12px 12px 0}
.djScreenTitle{font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.djScreenHint{font-size:12px;color:var(--muted);text-align:right}
.djScreen{padding:12px}
.djH1{margin:2px 0 8px;font-size:28px;line-height:1.05}
.djP{margin:0 0 12px;color:var(--muted);font-size:14px}
.djCTA{display:flex;gap:10px;flex-wrap:wrap}
.djPads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.djPad{text-align:left;border-radius:16px;padding:12px 12px;border:1px solid rgba(255,255,255,.12);background:
  radial-gradient(150px 70px at 30% 20%, rgba(255,255,255,.08), transparent 60%),
  rgba(0,0,0,.22);
  color:var(--text);box-shadow:0 10px 22px rgba(0,0,0,.28);transition:transform .08s ease, border-color .08s ease, background .12s ease}
.djPad:hover{border-color:rgba(124,255,209,.22)}
.djPad:active{transform:translateY(1px) scale(.99)}
.djPad.hot{border-color:rgba(255,107,139,.25);background:
  radial-gradient(180px 80px at 30% 20%, rgba(255,107,139,.14), transparent 60%),
  rgba(0,0,0,.22)}
.djPad[aria-pressed="true"]{border-color:rgba(124,255,209,.35)}
.djPadTop{display:block;font-weight:900;font-size:14px;letter-spacing:.2px}
.djPadSub{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.djTransport{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.djMini{width:42px;height:42px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.22);color:var(--text)}
.djFader{position:relative;flex:1;min-width:140px;height:42px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.22);overflow:hidden}
.djFaderTrack{position:absolute;inset:0;background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(124,255,209,.08), rgba(255,107,139,.06))}
.djFaderKnob{position:absolute;top:7px;left:52%;width:34px;height:28px;border-radius:12px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 20px rgba(0,0,0,.25)}
.djBottom{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.djBadge{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:8px 10px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);color:var(--muted);font-size:12px}
.djBadge.ghost{opacity:.9}
.djBottomLeft{display:flex;gap:10px;flex-wrap:wrap}
.djLink{text-decoration:none;color:var(--muted)}
.djLink:hover{color:var(--text);text-decoration:underline}
.djSep{color:rgba(255,255,255,.20)}


/* --- DJ Controller Desktop Tweaks (append at END of site.css) --- */

/* Give the centre more room on desktop */

/* =========================================================
   Platter optical balance (perception fix)
   ========================================================= */
@media (min-width:981px){
  .djDeck:last-child{
    transform:translateX(-6px) scale(1.015);
  }

}
/* =========================================================
   PLATTER IMAGE + LED RING + DESKTOP HOVER + MOBILE BEHAVIOUR
   Append at VERY END of site.css
   ========================================================= */

/* Platter wrap stays square and provides recessed well */
.djPlatterWrap{
  position:relative;
  aspect-ratio:1/1;
  border-radius:18px;
  padding:10px;
  background:radial-gradient(260px 260px at 50% 45%, rgba(0,0,0,.65), transparent 65%);
}

/* The platter image is the platter (stable + realistic) */
.djPlatterImg{
  width:100%;
  height:100%;
  display:block;
  border-radius:50%;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 -30px 60px rgba(0,0,0,.45),
    0 18px 40px rgba(0,0,0,.55);
  transform:rotate(0deg);
  transition:transform 220ms ease, filter 220ms ease;
}

/* Subtle desktop “life” — only on real hover devices */
@media (hover:hover) and (pointer:fine){
  .djDeck:hover .djPlatterImg{
    transform:rotate(-1.25deg);
    filter:saturate(1.05);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .djPlatterImg{transition:none;}
  .djDeck:hover .djPlatterImg{transform:none;}
}

/* LED ring overlay (around the image, not baked in) */
.djPlatterWrap::after{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:50%;
  pointer-events:none;
  opacity:.55;
  box-shadow:
    inset 0 0 0 2px rgba(124,255,209,.26),
    0 0 22px rgba(124,255,209,.26);
}

/* Deck identity colours (requires deckA / deckB classes in home.php) */
.djDeck.deckA .djPlatterWrap::after{
  box-shadow:
    inset 0 0 0 2px rgba(124,255,209,.32),
    0 0 22px rgba(124,255,209,.32);
}
.djDeck.deckB .djPlatterWrap::after{
  box-shadow:
    inset 0 0 0 2px rgba(255,107,139,.28),
    0 0 22px rgba(255,107,139,.28);
}

/* Pulse state (works with your existing pulseLed() class toggle) */
.djDeck.djLedPulse .djPlatterWrap::after{opacity:1;}

/* Mobile decision: hide the decorative decks, keep pads + screen */
@media (max-width:980px){
  .djDeck{display:none;}
  .djPads{grid-template-columns:repeat(2,minmax(0,1fr));}
  .djScreen{min-height:auto;}
  .djH1{font-size:24px;}
  .djController{padding:12px;}

  /* keep controller “energy” without wasting vertical space */
  .djController{
    background:
      radial-gradient(420px 220px at 20% 0%, rgba(124,255,209,.10), transparent 60%),
      radial-gradient(420px 220px at 80% 0%, rgba(255,107,139,.08), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  }
}
.djGrid{
  display:grid;
  grid-template-columns:1fr 1.75fr 1fr;
  gap:18px;
  margin-top:12px;
  align-items:start;
}
/* ===========================
   Modern form styling
   =========================== */

:root{
  --field-bg: rgba(255,255,255,.04);
  --field-bg2: rgba(255,255,255,.06);
  --field-bd: rgba(255,255,255,.12);
  --field-bd2: rgba(255,255,255,.18);
  --field-glow: rgba(124,255,209,.25);
  --field-text: rgba(246,246,251,.92);
  --field-muted: rgba(246,246,251,.62);
}

input, textarea, select{
  width:100%;
  background: linear-gradient(180deg, var(--field-bg2), var(--field-bg));
  border:1px solid var(--field-bd);
  color: var(--field-text);
  border-radius: 12px;
  padding: 12px 12px;
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 22px rgba(0,0,0,.25);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
  font-size: 15px;
  line-height: 1.2;
}

textarea{
  resize: vertical;
  min-height: 140px;
  padding-top: 12px;
}

input::placeholder, textarea::placeholder{
  color: rgba(246,246,251,.40);
}

input:focus, textarea:focus, select:focus{
  border-color: var(--field-bd2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 4px var(--field-glow),
    0 14px 28px rgba(0,0,0,.35);
  transform: translateY(-1px);
}

label{
  display:block;
  margin: 10px 0 6px;
  color: var(--field-muted);
  font-size: 13px;
  letter-spacing: .02em;
}

label > input,
label > textarea,
label > select{
  margin-top: 6px;
}

/* Nice autofill on dark backgrounds */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: var(--field-text);
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px rgba(20,22,26,.9) inset;
  border:1px solid var(--field-bd);
}

/* Error / success blocks (works with your existing messages) */
.formNoticeOk{
  border:1px solid rgba(124,255,209,.25);
  background:rgba(124,255,209,.08);
  padding:10px 12px;
  border-radius:12px;
}
.formNoticeErr{
  border:1px solid rgba(255,107,139,.25);
  background:rgba(255,107,139,.10);
  padding:10px 12px;
  border-radius:12px;
}

/* Buttons look more “app” than “HTML form” */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(246,246,251,.92);
  text-decoration:none;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}

.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  box-shadow: 0 14px 28px rgba(0,0,0,.35);
}

.btn.primary{
  border-color: rgba(124,255,209,.25);
  background: rgba(124,255,209,.12);
}
@media (min-width:981px){
  .formGrid2{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .formGrid2 .span2{grid-column: 1 / -1;}
}
/* =========================================================
   DJ BUTTON UPGRADE PACK (append at end of site.css)
   Adds tactile controller-style buttons + subtle RGBW glow
   ========================================================= */

:root{
  --ledR: rgba(255,90,120,.65);
  --ledG: rgba(124,255,209,.65);
  --ledB: rgba(138,168,255,.65);
  --ledW: rgba(255,255,255,.55);
  --btnEdge: rgba(255,255,255,.14);
  --btnFace: rgba(255,255,255,.06);
  --btnFace2: rgba(0,0,0,.28);
  --btnShadow: 0 14px 26px rgba(0,0,0,.38);
  --btnInset: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -10px 24px rgba(0,0,0,.40);
}

/* Shared “controller button” feel */
.btn,
.djPill,
.djPad,
.djMini{
  position:relative;
  border:1px solid var(--btnEdge);
  background:
    radial-gradient(160px 80px at 25% 20%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, var(--btnFace), var(--btnFace2));
  box-shadow: var(--btnInset), var(--btnShadow);
  transform:translateZ(0);
  -webkit-tap-highlight-color: transparent;
}

.btn:hover,
.djPill:hover,
.djPad:hover,
.djMini:hover{
  border-color: rgba(255,255,255,.20);
}

.btn:active,
.djPill:active,
.djPad:active,
.djMini:active{
  transform: translateY(1px) scale(.99);
  box-shadow: var(--btnInset), 0 10px 18px rgba(0,0,0,.34);
}

/* Accessible focus that still fits the DJ vibe */
.btn:focus-visible,
.djPill:focus-visible,
.djPad:focus-visible,
.djMini:focus-visible{
  outline:none;
  box-shadow:
    var(--btnInset),
    0 0 0 4px rgba(124,255,209,.18),
    0 16px 30px rgba(0,0,0,.45);
  border-color: rgba(124,255,209,.28);
}

/* -----------------------------------------
   Pills (top right quick links)
   ----------------------------------------- */
.djPill{
  padding:10px 14px;
  letter-spacing:.01em;
}

.djPill::after{
  content:"";
  position:absolute;
  left:12px; right:12px; top:8px;
  height:2px;
  border-radius:999px;
  opacity:.55;
  background: linear-gradient(90deg, var(--ledG), var(--ledB), var(--ledR));
  filter: blur(.2px);
}

.djPill.ghost{
  opacity:.9;
}
.djPill.ghost::after{
  background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,.10));
}

/* -----------------------------------------
   Main CTA buttons in the screen
   ----------------------------------------- */
.btn{
  border-radius: 999px; /* keep your app-like style */
}

.btn.primary{
  border-color: rgba(124,255,209,.26);
  background:
    radial-gradient(180px 90px at 25% 20%, rgba(124,255,209,.18), transparent 60%),
    linear-gradient(180deg, rgba(124,255,209,.12), rgba(0,0,0,.30));
}

.btn.primary::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:999px;
  pointer-events:none;
  box-shadow: 0 0 20px rgba(124,255,209,.18);
  opacity:.7;
}

/* -----------------------------------------
   Pads (the main “performance pads”)
   ----------------------------------------- */
.djPad{
  border-radius:16px;
  overflow:hidden;
}

.djPad::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.55;
  background:
    linear-gradient(90deg, transparent 0 14px, rgba(255,255,255,.05) 14px 15px, transparent 15px),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 42%);
}

.djPad::after{
  content:"";
  position:absolute;
  left:10px; right:10px; bottom:10px;
  height:3px;
  border-radius:999px;
  opacity:.0;
  background: linear-gradient(90deg, var(--ledG), var(--ledB), var(--ledR));
  box-shadow: 0 0 18px rgba(124,255,209,.14);
  transition: opacity 120ms ease;
}

.djPad:hover::after{
  opacity:.55;
}

.djPad.hot::after{
  background: linear-gradient(90deg, var(--ledR), rgba(255,170,90,.55), var(--ledW));
  box-shadow: 0 0 18px rgba(255,107,139,.16);
  opacity:.65;
}

.djPad[aria-pressed="true"]{
  border-color: rgba(124,255,209,.35);
}

.djPad[aria-pressed="true"]::after{
  opacity:.95;
}

/* Make pad text feel “hardware” */
.djPadTop{
  text-transform: uppercase;
  letter-spacing:.06em;
  font-weight: 900;
  font-size: 13px;
}
.djPadSub{
  letter-spacing:.02em;
}

/* -----------------------------------------
   Transport buttons (⏮ ⏯ ⏭)
   ----------------------------------------- */
.djMini{
  border-radius:14px;
  font-weight: 900;
  line-height: 1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.djMini::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:12px;
  pointer-events:none;
  opacity:.0;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 18px rgba(138,168,255,.14);
  transition: opacity 120ms ease;
}

.djMini:hover::after{
  opacity:.85;
}

/* Keep the icon crisp and centred */
.djMini{
  font-size: 15px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .djPill::after,
  .djPad::after,
  .djMini::after{transition:none;}
}
/* =========================================================
   HOME CONTROLLER POLISH PACK (SAFE, ADDITIVE)
   - pad latch visuals + led
   - screen swap transitions
   - subtle platter + fader feedback
   - trust strip
   ========================================================= */

/* Screen swap animation (subtle, pro) */
#djScreen{
  transition: opacity 140ms ease, transform 140ms ease;
  will-change: opacity, transform;
}
#djScreen.is-swapping{
  opacity: 0;
  transform: translateY(4px);
}

/* Active/latch state: your earlier CSS already supports aria-pressed,
   this just makes the latch feel more “hardware” */
.djPad.is-active,
.djPad[aria-pressed="true"]{
  border-color: rgba(124,255,209,.35);
  box-shadow:
    var(--btnInset),
    0 0 0 2px rgba(124,255,209,.12),
    0 16px 30px rgba(0,0,0,.45);
}

/* Keep the “LED bar” on when active */
.djPad.is-active::after,
.djPad[aria-pressed="true"]::after{
  opacity: .95;
}

/* Subtle deck feedback when a pad is active */
.djWrap.pad-active .djPlatterImg{
  transition: transform 220ms ease;
  transform: rotate(-3deg) scale(1.005);
}
.djWrap.pad-active .djFaderKnob{
  transition: transform 220ms ease;
  transform: translateY(3px);
}

/* Trust strip below the screen */
.djTrust{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  opacity: .92;
}
.djTrust .djTrustItem{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  font-size: 12px;
  letter-spacing: .01em;
}
.djTrustDot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  box-shadow: 0 0 10px rgba(255,255,255,.16);
}
.djTrustDot.g{ background: rgba(124,255,209,.65); box-shadow: 0 0 10px rgba(124,255,209,.18); }
.djTrustDot.b{ background: rgba(138,168,255,.65); box-shadow: 0 0 10px rgba(138,168,255,.18); }
.djTrustDot.w{ background: rgba(255,255,255,.60); box-shadow: 0 0 10px rgba(255,255,255,.16); }
/* =========================================================
   PACKAGES PAGE POLISH (append to end of /dev/assets/site.css)
   Scope: .packagesPage
   ========================================================= */

.packagesPage .pkgKicker{
  margin: 8px 0 0;
  font-size: 15px;
  opacity: .92;
}

.packagesPage .grid3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 980px){
  .packagesPage .grid3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .packagesPage .grid3{ grid-template-columns: 1fr; }
}

/* Card polish */
.packagesPage .card{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  overflow: hidden;
  position: relative;
}

.packagesPage .card::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(800px 220px at 20% 0%, rgba(255,255,255,.08), transparent 60%);
  opacity: .9;
}

.packagesPage .cardTop{
  padding: 16px 16px 10px;
  position: relative;
}

.packagesPage .pkgTitleRow{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.packagesPage .h2{
  margin: 0;
  line-height: 1.1;
}

.packagesPage .pkgBadge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .01em;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.22));
  opacity: .95;
  white-space: nowrap;
}

.packagesPage .card.featured{
  border-color: rgba(255, 153, 0, .30); /* --djOrange-ish */
  box-shadow: 0 22px 50px rgba(0,0,0,.45);
}

.packagesPage .pkgPrice{
  display: inline-block;
  margin-top: 4px;
  font-weight: 700;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
}

/* CTAs */
.packagesPage .cardCta{
  display: flex;
  gap: 10px;
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  position: relative;
}

.packagesPage .cardCta .btn{
  flex: 1;
  justify-content: center;
}

/* CTA bar polish */
.packagesPage .ctaBar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
  box-shadow: 0 18px 40px rgba(0,0,0,.30);
}

@media (max-width: 760px){
  .packagesPage .ctaBar{ flex-direction: column; align-items: stretch; }
  .packagesPage .ctaBtns{ display:flex; gap:10px; }
  .packagesPage .ctaBtns .btn{ flex:1; justify-content:center; }
}
/* ===============================
   WhatsApp button refinement
   =============================== */

/* Target the secondary CTA specifically */
.cardCta .btn:not(.primary){
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.9);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

/* Subtle WhatsApp hint (not neon, not cheesy) */
.cardCta .btn:not(.primary){
  --wa: 78, 201, 138; /* muted WhatsApp green */
}

.cardCta .btn:not(.primary){
  background:
    linear-gradient(
      180deg,
      rgba(var(--wa), 0.12),
      rgba(0,0,0,0.25)
    );
  border-color: rgba(var(--wa), 0.35);
}

/* Hover: confidence, not glowstick */
.cardCta .btn:not(.primary):hover{
  background:
    linear-gradient(
      180deg,
      rgba(var(--wa), 0.18),
      rgba(0,0,0,0.35)
    );
  border-color: rgba(var(--wa), 0.55);
  transform: translateY(-1px);
}

/* Active: tactile press */
.cardCta .btn:not(.primary):active{
  transform: translateY(0);
  background:
    linear-gradient(
      180deg,
      rgba(var(--wa), 0.10),
      rgba(0,0,0,0.45)
    );
}
/* Centre text inside WhatsApp button only */
.packagesPage .cardCta .btn:not(.primary){
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}
.packagesPage .pkgCard{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.packagesPage .cardTop{
  flex: 1;
}

.packagesPage .cardCta{
  margin-top: auto;
}
/* Uniform package tiles */
.packagesPage .grid3{ align-items: stretch; }
.packagesPage .pkgCard{ display:flex; flex-direction:column; height:100%; }
.packagesPage .pkgCard .cardTop{ flex:1; }
.packagesPage .pkgCard .cardCta{ margin-top:auto; }
/* Packages: make 3 buttons look intentional (not squeezed) */
.packagesPage .cardCta{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 16px 16px;
}

/* Make buttons look like controller buttons, not tiny pills */
.packagesPage .cardCta .btn{
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 14px; /* less “bubble”, more “control” */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.15;
  font-size: 14px;
  white-space: nowrap; /* stops Start/booking splitting */
}

/* If a label is too long, allow wrap but keep it tidy */
@media (max-width: 520px){
  .packagesPage .cardCta .btn{ white-space: normal; }
  .packagesPage .cardCta{ grid-template-columns: 1fr; }
}

/* Optional: make non-primary slightly calmer so Start booking wins */
.packagesPage .cardCta .btn:not(.primary){
  opacity: .92;
}
.packagesPage .cardCta .btn:not(.primary):hover{
  opacity: 1;
}
/* =========================================================
   TESTIMONIALS PAGE POLISH (append to end of /dev/assets/site.css)
   Scope: .testimonialsPage
   ========================================================= */

.testimonialsPage{
  padding: 18px 0 26px;
}

.testimonialsPage .tLead{
  margin-top: 6px;
  font-size: 15px;
}

.testimonialsPage .testimonialsGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

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

.testimonialsPage .testimonialCard{
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
  box-shadow: 0 18px 40px rgba(0,0,0,.32);
  padding: 16px;
  overflow: hidden;
}

.testimonialsPage .testimonialCard::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(700px 260px at 25% 0%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(500px 240px at 110% 110%, rgba(124,255,209,.06), transparent 60%);
  opacity: .95;
}

.testimonialsPage .testimonialCard.featured{
  border-color: rgba(255,153,0,.28);
  box-shadow: 0 22px 52px rgba(0,0,0,.42);
}

.testimonialsPage .tHead{
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.testimonialsPage .tNameWrap{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.testimonialsPage .tName{
  margin: 0;
  font-size: 16px;
  line-height: 1.15;
}

.testimonialsPage .tRole{
  margin-top: 6px;
  opacity: .82;
  font-size: 13px;
}

.testimonialsPage .tStars{
  margin-top: 8px;
  letter-spacing: 2px;
  font-size: 12px;
  opacity: .75;
}

.testimonialsPage .tBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(255,153,0,.35);
  background: rgba(255,153,0,.10);
  white-space: nowrap;
  opacity: .95;
}

.testimonialsPage .tQuote{
  position: relative;
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid rgba(124,255,209,.28);
  opacity: .92;
  line-height: 1.55;
}

.testimonialsPage .tQuote::before{
  content: "“";
  position: absolute;
  left: -2px;
  top: -8px;
  font-size: 34px;
  opacity: .25;
}
/* Accessibility: skip link */
a.skip {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 12px;
  z-index: 1000;
  text-decoration: none;
}

a.skip:focus {
  top: 0;
}
/* Lighthouse: tap target sizing (safe, minimal) */
a.btn, button.btn, .btn {
  min-height: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Nav links often get flagged */
header nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* If you have tiny icon buttons anywhere */
button.iconBtn, a.iconBtn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* =========================================================
   ENQUIRY SUMMARY PAGE (append to end of /dev/assets/site.css)
   Scope: .enquiryPage
   ========================================================= */
.enquiryPage .enqPanel{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
  box-shadow: 0 18px 40px rgba(0,0,0,.32);
  padding: 16px;
}
.enquiryPage .enqRow{
  display:flex;
  justify-content:space-between;
  gap: 14px;
  align-items:flex-start;
}
.enquiryPage .enqActions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.enquiryPage .enqLabel{
  font-size: 12px;
  opacity: .82;
  margin-bottom: 6px;
}
.enquiryPage .enqChips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.enquiryPage .enqChip{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  padding: 7px 10px;
  cursor: pointer;
}
.enquiryPage .enqChip:focus-visible{
  outline: 2px solid rgba(255,255,255,0.6);
  outline-offset: 2px;
}
.enquiryPage .enqHr{
  border: 0;
  border-top: 1px solid rgba(255,255,255,.10);
  margin: 14px 0;
}
.enquiryPage .enqGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.enquiryPage .enqFieldFull{ grid-column: 1 / -1; }
.enquiryPage .enqInput{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.94);
  padding: 10px 12px;
}
.enquiryPage .enqInput::placeholder{ color: rgba(255,255,255,.55); }
.enquiryPage .enqCtas{
  display:flex;
  gap: 12px;
  margin-top: 14px;
  flex-wrap:wrap;
}
.enquiryPage .enqCtas .btn{
  min-height: 44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
@media (max-width: 760px){
  .enquiryPage .enqRow{ flex-direction:column; align-items:stretch; }
  .enquiryPage .enqActions{ justify-content:flex-start; }
  .enquiryPage .enqGrid{ grid-template-columns: 1fr; }
  .enquiryPage .enqCtas .btn{ flex: 1 1 auto; }
}
/* =========================================================
   ENQUIRY SUMMARY PAGE (append to end of /dev/assets/site.css)
   Scope: .enquiryPage
   ========================================================= */
.enquiryPage .enqPanel{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
  box-shadow: 0 18px 40px rgba(0,0,0,.32);
  padding: 16px;
}
.enquiryPage .enqRow{
  display:flex;
  justify-content:space-between;
  gap: 14px;
  align-items:flex-start;
}
.enquiryPage .enqActions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.enquiryPage .enqLabel{
  font-size: 12px;
  opacity: .82;
  margin-bottom: 6px;
}
.enquiryPage .enqChips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.enquiryPage .enqChip{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  padding: 7px 10px;
  cursor: pointer;
}
.enquiryPage .enqChip:focus-visible{
  outline: 2px solid rgba(255,255,255,0.6);
  outline-offset: 2px;
}
.enquiryPage .enqHr{
  border: 0;
  border-top: 1px solid rgba(255,255,255,.10);
  margin: 14px 0;
}
.enquiryPage .enqGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.enquiryPage .enqFieldFull{ grid-column: 1 / -1; }
.enquiryPage .enqInput{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.94);
  padding: 10px 12px;
}
.enquiryPage .enqInput::placeholder{ color: rgba(255,255,255,.55); }
.enquiryPage .enqCtas{
  display:flex;
  gap: 12px;
  margin-top: 14px;
  flex-wrap:wrap;
}
.enquiryPage .enqCtas .btn{
  min-height: 44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.enquiryPage .enqPreview{
  margin-top: 14px;
}
.enquiryPage .enqPre{
  margin: 0;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  overflow: auto;
  white-space: pre-wrap;
  line-height: 1.45;
  opacity: .92;
}
@media (max-width: 760px){
  .enquiryPage .enqRow{ flex-direction:column; align-items:stretch; }
  .enquiryPage .enqActions{ justify-content:flex-start; }
  .enquiryPage .enqGrid{ grid-template-columns: 1fr; }
  .enquiryPage .enqCtas .btn{ flex: 1 1 auto; }
}
.booking-date {
  width: 100%;
  text-align: left;
  border-radius: 14px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  cursor: pointer;
}

.booking-date:hover {
  border-color: rgba(255,255,255,.3);
}

.booking-date.is-friday {
  border-color: rgba(170,120,255,.45);
  background: linear-gradient(180deg, rgba(170,120,255,.18), rgba(0,0,0,.3));
}

.booking-date.is-saturday {
  border-color: rgba(80,255,180,.45);
  background: linear-gradient(180deg, rgba(80,255,180,.18), rgba(0,0,0,.3));
}

.booking-date .date-main {
  font-weight: 700;
  font-size: 13px;
}

.booking-date .date-status {
  font-size: 12px;
  margin-top: 4px;
}

.booking-date .date-sub {
  font-size: 11px;
  opacity: .7;
  margin-top: 4px;
}
.guestHint {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255,255,255,0.9);
  background: rgba(255,180,80,0.12);
  border: 1px solid rgba(255,180,80,0.35);
}
.guestHint {
  grid-column: 1 / -1;
}

/* Promos */
.promoBar{position:sticky;top:0;z-index:120;background:#0b0e14;border-bottom:1px solid rgba(255,255,255,.08)}
.promoBarInner{max-width:1400px;margin:0 auto;padding:10px 4vw;display:flex;gap:12px;align-items:center;justify-content:space-between}
.promoBarText{display:flex;gap:10px;align-items:baseline;color:#e9eef7}
.promoBarText span{color:#aab6c8}
.promoBarActions{display:flex;gap:10px;align-items:center}
.btn.small{padding:6px 10px;border-radius:10px;font-size:13px}
.btn.ghost{background:transparent}

.promoTile{margin:14px 0 12px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05)}
.promoTileTitle{font-weight:800;margin-bottom:6px}
.promoTileMsg{color:#aab6c8}
.promoTileCta{margin-top:10px}

.promoModal{position:fixed;inset:0;z-index:200;display:none}
.promoModal.is-open{display:block}
.promoModalBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.promoModalCard{position:relative;max-width:520px;margin:10vh auto 0;background:#0b0e14;border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:18px 18px 16px;box-shadow:0 20px 60px rgba(0,0,0,.55)}
.promoModalClose{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#e9eef7;cursor:pointer}
.promoModalTitle{font-weight:900;font-size:18px;margin:4px 0 10px}
.promoModalMsg{color:#aab6c8}
.promoModalActions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
/* Promo notice: non-dismissible */
.promoDismiss,
[data-promo-dismiss],
[data-promo-close]{
  display:none!important;
}

/* Optional: prevent any click-to-dismiss behaviour */
.promoBar, #promoModal{
  pointer-events:auto;
}
/* Extra breathing room for package cards */
.djPackages .card{
  padding:22px 22px 20px;
}

/* Space around the header area */
.djPackages .cardTop{
  margin-bottom:14px;
}

/* Space between bullets and buttons */
.djPackages .list{
  margin-bottom:18px;
}

/* Make CTA buttons feel less cramped */
.djPackages .cardCta{
  margin-top:18px;
}

/* Slightly more inset for meta row (badge + price) */
.djPackages .djPkgMetaRow{
  margin-bottom:14px;
}
/* Subtle separation between package cards */
.djPackages .grid3{
  row-gap:26px;   /* vertical spacing */
}

/* Optional: tiny lift so cards feel distinct, not stacked */
.djPackages .card{
  margin-bottom:8px;
}
/* Ultra-subtle separation line effect */
.djPackages .card + .card{
  box-shadow:
    0 18px 50px rgba(0,0,0,.35),
    0 -1px 0 rgba(255,255,255,.04);
}
/* Force CTA bar layout to behave (overrides global site.css) */
.djPackages .ctaBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 18px;
}

.djPackages .ctaBar > div:first-child{
  flex:1 1 auto;
  min-width:240px;
}

.djPackages .ctaBar .ctaBtns{
  display:flex;
  gap:10px;
  flex:0 0 auto;
  align-items:center;
  justify-content:flex-end;
}

.djPackages .ctaBar .ctaBtns .btn{
  min-width:190px;
}

/* Mobile: stack neatly */
@media (max-width:720px){
  .djPackages .ctaBar{
    flex-direction:column;
    align-items:flex-start;
  }
  .djPackages .ctaBar .ctaBtns{
    width:100%;
    justify-content:flex-start;
  }
  .djPackages .ctaBar .ctaBtns .btn{
    flex:1 1 220px;
    min-width:0;
  }
}

/* Mobile home: restore brand inside controller */
@media (max-width:720px){
  /* Ensure logo inside controller is visible */
  .djHome #djWrap .djBrand,
  .djHome #djWrap .siteLogo{
    display:flex!important;
    align-items:center;
    gap:10px;
    margin-bottom:8px;
  }

  /* Tidy logo sizing for app feel */
  .djHome #djWrap .siteLogo img,
  .djHome #djWrap .djBrand img{
    max-height:34px;
    width:auto;
  }

  /* Optional: subtle divider so it feels like an app header */
  .djHome #djWrap .djBrand,
  .djHome #djWrap .siteLogo{
    padding-bottom:8px;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
}
/* =========================================================
   ABOUT PAGE POLISH (append at end of /dev/assets/site.css)
   Scope: .aboutPage
   ========================================================= */

.aboutPage{padding:18px 0 28px}
.aboutPage .aboutHero{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 340px at 18% 0%, rgba(124,255,209,.14), transparent 60%),
    radial-gradient(760px 320px at 88% 0%, rgba(138,168,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  padding:18px;
}

.aboutPage .aboutKicker{
  margin:0 0 6px;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.aboutPage h1{
  margin:0 0 10px;
  font-size:30px;
  line-height:1.05;
  letter-spacing:.2px;
}

.aboutPage .aboutLead{
  margin:0;
  max-width:86ch;
  color:rgba(246,246,251,.92);
  line-height:1.65;
  font-size:15px;
  opacity:.96;
}

.aboutPage .aboutBadges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}

.aboutPage .aboutBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  color:var(--muted);
  font-size:12px;
}

.aboutPage .aboutDot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.55);
  box-shadow:0 0 10px rgba(255,255,255,.12);
}
.aboutPage .aboutDot.g{background:rgba(124,255,209,.70);box-shadow:0 0 12px rgba(124,255,209,.18)}
.aboutPage .aboutDot.b{background:rgba(138,168,255,.70);box-shadow:0 0 12px rgba(138,168,255,.18)}
.aboutPage .aboutDot.r{background:rgba(255,107,139,.68);box-shadow:0 0 12px rgba(255,107,139,.16)}

.aboutPage .aboutGrid{
  display:grid;
  grid-template-columns: 1.6fr .9fr;
  gap:14px;
  margin-top:14px;
  align-items:start;
}

.aboutPage .aboutCard{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
  box-shadow:0 18px 40px rgba(0,0,0,.32);
  padding:16px;
  position:relative;
  overflow:hidden;
}

.aboutPage .aboutCard::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:radial-gradient(760px 240px at 20% 0%, rgba(255,255,255,.08), transparent 60%);
  opacity:.95;
}

.aboutPage .aboutH2{
  position:relative;
  margin:0 0 10px;
  font-size:16px;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.92;
}

.aboutPage .aboutP{
  position:relative;
  margin:0 0 12px;
  color:var(--muted);
  line-height:1.7;
  font-size:14px;
}
.aboutPage .aboutP:last-child{margin-bottom:0}

.aboutPage .aboutTimeline{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.aboutPage .aboutStep{
  display:grid;
  grid-template-columns: 92px 1fr;
  gap:10px;
  align-items:start;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
}

.aboutPage .aboutYear{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:rgba(246,246,251,.92);
  font-weight:800;
  letter-spacing:.02em;
  font-size:12px;
  white-space:nowrap;
}

.aboutPage .aboutStepTitle{
  margin:0 0 6px;
  font-weight:900;
  font-size:14px;
  letter-spacing:.2px;
}

.aboutPage .aboutQuote{
  border-left:2px solid rgba(124,255,209,.28);
  padding-left:12px;
  margin:10px 0 0;
  color:rgba(246,246,251,.90);
  line-height:1.65;
}

.aboutPage .aboutCtas{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.aboutPage .aboutFaq details{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  padding:10px 12px;
}
.aboutPage .aboutFaq details + details{margin-top:10px}
.aboutPage .aboutFaq summary{
  cursor:pointer;
  font-weight:800;
  color:rgba(246,246,251,.92);
}
.aboutPage .aboutFaq p{margin:10px 0 0;color:var(--muted);line-height:1.65}

@media (max-width: 980px){
  .aboutPage .aboutGrid{grid-template-columns:1fr}
  .aboutPage h1{font-size:26px}
  .aboutPage .aboutStep{grid-template-columns: 84px 1fr}
}
/* =========================================================
   SERVICES PAGE POLISH (append at end of /dev/assets/site.css)
   Scope: .servicesPage
   ========================================================= */

.servicesPage{padding:18px 0 28px}
.servicesPage .svcHero{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 340px at 18% 0%, rgba(255,122,24,.14), transparent 60%),
    radial-gradient(760px 320px at 88% 0%, rgba(138,168,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  padding:18px;
}
.servicesPage .svcKicker{margin:0 0 6px;color:var(--muted);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.servicesPage h1{margin:0 0 10px;font-size:30px;line-height:1.05;letter-spacing:.2px}
.servicesPage .svcLead{margin:0;max-width:86ch;color:rgba(246,246,251,.92);line-height:1.65;font-size:15px;opacity:.96}

.servicesPage .svcBadges{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.servicesPage .svcBadge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);
  color:var(--muted);font-size:12px
}
.servicesPage .svcDot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 10px rgba(255,255,255,.12)}
.servicesPage .svcDot.o{background:rgba(255,122,24,.75);box-shadow:0 0 12px rgba(255,122,24,.16)}
.servicesPage .svcDot.g{background:rgba(124,255,209,.70);box-shadow:0 0 12px rgba(124,255,209,.18)}
.servicesPage .svcDot.b{background:rgba(138,168,255,.70);box-shadow:0 0 12px rgba(138,168,255,.18)}

.servicesPage .svcGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
@media (min-width:981px){.servicesPage .svcGrid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:640px){.servicesPage .svcGrid{grid-template-columns:1fr;}}

.servicesPage .svcCard{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
  box-shadow:0 18px 40px rgba(0,0,0,.32);
  padding:16px;
  position:relative;
  overflow:hidden;
  transition:transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.servicesPage .svcCard::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:radial-gradient(760px 240px at 18% 0%, rgba(255,255,255,.08), transparent 60%);
  opacity:.95;
}
.servicesPage .svcCard::after{
  content:"";
  position:absolute;left:0;top:0;right:0;height:3px;
  background:linear-gradient(90deg, rgba(255,122,24,.9), rgba(255,255,255,0));
  opacity:.85;
}
.servicesPage .svcCard:hover{
  transform:translateY(-1px);
  border-color:rgba(255,122,24,.22);
  box-shadow:0 24px 54px rgba(0,0,0,.40);
}

.servicesPage .svcHead{position:relative;display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.servicesPage .svcIcon{
  width:44px;height:44px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  color:rgba(246,246,251,.92);
  box-shadow:0 12px 22px rgba(0,0,0,.25), inset 0 0 0 4px rgba(255,255,255,.03)
}

/* Icon meaning colours (your icons suddenly “say” something visually) */
.servicesPage .svcIcon--heart{border-color:rgba(255,107,139,.26);background:radial-gradient(80px 80px at 30% 25%, rgba(255,107,139,.18), rgba(0,0,0,.18));}
.servicesPage .svcIcon--spark{border-color:rgba(124,255,209,.26);background:radial-gradient(80px 80px at 30% 25%, rgba(124,255,209,.18), rgba(0,0,0,.18));}
.servicesPage .svcIcon--briefcase{border-color:rgba(138,168,255,.26);background:radial-gradient(80px 80px at 30% 25%, rgba(138,168,255,.18), rgba(0,0,0,.18));}
.servicesPage .svcIcon--mic{border-color:rgba(255,214,112,.26);background:radial-gradient(80px 80px at 30% 25%, rgba(255,214,112,.16), rgba(0,0,0,.18));}
.servicesPage .svcIcon--bolt{border-color:rgba(255,122,24,.28);background:radial-gradient(80px 80px at 30% 25%, rgba(255,122,24,.18), rgba(0,0,0,.18));}
.servicesPage .svcIcon--camera{border-color:rgba(208,144,255,.24);background:radial-gradient(80px 80px at 30% 25%, rgba(208,144,255,.16), rgba(0,0,0,.18));}
.servicesPage .svcIcon--speaker{border-color:rgba(160,200,255,.22);background:radial-gradient(80px 80px at 30% 25%, rgba(160,200,255,.14), rgba(0,0,0,.18));}
.servicesPage .svcIcon--disc{border-color:rgba(255,255,255,.16);}

.servicesPage .svcTitle{position:relative;margin:0;font-size:18px;line-height:1.2}
.servicesPage .svcHint{position:relative;margin:6px 0 0;color:rgba(246,246,251,.68);font-size:13px;line-height:1.35}

.servicesPage .svcMedia{position:relative;display:block;width:100%;height:auto;border-radius:16px;border:1px solid rgba(255,255,255,.10);margin:10px 0 10px;box-shadow:0 18px 34px rgba(0,0,0,.25)}
.servicesPage .svcSummary{position:relative;margin:0 0 10px;color:var(--muted);line-height:1.65;font-size:14px}

.servicesPage .svcActions{position:relative;display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.servicesPage .svcBtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:rgba(246,246,251,.92);
  text-decoration:none;box-shadow:0 10px 22px rgba(0,0,0,.25);
  transition:transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease}
.servicesPage .svcBtn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.08);box-shadow:0 14px 28px rgba(0,0,0,.35)}
.servicesPage .svcBtn.primary{border-color:rgba(255,122,24,.28);background:rgba(255,122,24,.12)}
.servicesPage .svcBtn.added{border-color:rgba(124,255,209,.25);background:rgba(124,255,209,.10)}

.servicesPage .svcSticky{position:sticky;bottom:10px;z-index:40;margin-top:18px}
.servicesPage .svcBar{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;
  border:1px solid rgba(255,122,24,.22);
  background:rgba(10,12,16,.75);
  backdrop-filter: blur(10px);
  border-radius:18px;
  padding:10px 12px;
  box-shadow:0 18px 34px rgba(0,0,0,.40)
}
.servicesPage .svcCount{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:6px 10px;
  border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.20);color:rgba(246,246,251,.86);font-size:13px}
.servicesPage .svcCount b{color:rgba(255,122,24,.92)}
.servicesPage .svcTiny{color:rgba(246,246,251,.62);font-size:13px}
.servicesPage .svcHidden{display:none!important}

@media (max-width: 980px){
  .servicesPage h1{font-size:26px}
}
/* =========================================================
   SOCIALS PAGE POLISH (append at end of /dev/assets/site.css)
   Scope: .socialsPage
   ========================================================= */

.socialsPage{padding:18px 0 28px}
.socialsPage .socHero{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 340px at 18% 0%, rgba(138,168,255,.12), transparent 60%),
    radial-gradient(760px 320px at 88% 0%, rgba(124,255,209,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  padding:18px;
}
.socialsPage .socKicker{margin:0 0 6px;color:var(--muted);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.socialsPage h1{margin:0 0 10px;font-size:30px;line-height:1.05;letter-spacing:.2px}
.socialsPage .socLead{margin:0;max-width:86ch;color:rgba(246,246,251,.92);line-height:1.65;font-size:15px;opacity:.96}

.socialsPage .socGrid{display:grid;grid-template-columns:1.3fr .7fr;gap:14px;margin-top:14px;align-items:start}
@media (max-width:980px){.socialsPage .socGrid{grid-template-columns:1fr}.socialsPage h1{font-size:26px}}

.socialsPage .socCard{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
  box-shadow:0 18px 40px rgba(0,0,0,.32);
  padding:16px;
  position:relative;
  overflow:hidden;
}
.socialsPage .socCard::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:radial-gradient(760px 240px at 18% 0%, rgba(255,255,255,.08), transparent 60%);
  opacity:.95;
}

.socialsPage .socH2{position:relative;margin:0 0 10px;font-size:16px;letter-spacing:.06em;text-transform:uppercase;opacity:.92}
.socialsPage .socP{position:relative;margin:0 0 12px;color:var(--muted);line-height:1.7;font-size:14px}
.socialsPage .socP:last-child{margin-bottom:0}

.socialsPage .socList{position:relative;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.socialsPage .socItem{
  display:flex;gap:10px;align-items:center;justify-content:space-between;
  padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.18);
}
.socialsPage .socLeft{display:flex;gap:10px;align-items:center;min-width:0}
.socialsPage .socIcon{
  width:38px;height:38px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.18);color:rgba(246,246,251,.92);
  box-shadow:0 12px 22px rgba(0,0,0,.25), inset 0 0 0 4px rgba(255,255,255,.03)
}
.socialsPage .socName{font-weight:900;color:rgba(246,246,251,.92);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.socialsPage .socUrl{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44ch}
.socialsPage .socBtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:rgba(246,246,251,.92);
  text-decoration:none;box-shadow:0 10px 22px rgba(0,0,0,.25);
  transition:transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease
}
.socialsPage .socBtn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.08);box-shadow:0 14px 28px rgba(0,0,0,.35)}
.socialsPage .socBtn.primary{border-color:rgba(255,122,24,.28);background:rgba(255,122,24,.12)}
/* =========================================================
   MUSIC REQUESTS PAGE (append at end of /dev/assets/site.css)
   Scope: .requestsPage
   ========================================================= */

.requestsPage{padding:18px 0 28px}
.requestsPage .reqHero{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 340px at 18% 0%, rgba(255,122,24,.12), transparent 60%),
    radial-gradient(760px 320px at 88% 0%, rgba(138,168,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  padding:18px;
}
.requestsPage .reqKicker{margin:0 0 6px;color:var(--muted);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.requestsPage h1{margin:0 0 10px;font-size:30px;line-height:1.05;letter-spacing:.2px}
.requestsPage .reqLead{margin:0;max-width:86ch;color:rgba(246,246,251,.92);line-height:1.65;font-size:15px;opacity:.96}

.requestsPage .reqGrid{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;margin-top:14px;align-items:start}
@media (max-width:980px){.requestsPage .reqGrid{grid-template-columns:1fr}.requestsPage h1{font-size:26px}}

.requestsPage .reqCard{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
  box-shadow:0 18px 40px rgba(0,0,0,.32);
  padding:16px;
  position:relative;
  overflow:hidden;
}
.requestsPage .reqCard::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:radial-gradient(760px 240px at 18% 0%, rgba(255,255,255,.08), transparent 60%);
  opacity:.95;
}

.requestsPage .reqH2{position:relative;margin:0 0 10px;font-size:16px;letter-spacing:.06em;text-transform:uppercase;opacity:.92}
.requestsPage .reqP{position:relative;margin:0 0 12px;color:var(--muted);line-height:1.7;font-size:14px}
.requestsPage .reqP:last-child{margin-bottom:0}

.requestsPage .reqList{position:relative;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.requestsPage .reqItem{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.18);
}
.requestsPage .reqDot{
  width:10px;height:10px;border-radius:50%;
  background:rgba(124,255,209,.75);
  box-shadow:0 0 12px rgba(124,255,209,.16);
  margin-top:4px;flex:0 0 auto;
}

.requestsPage .reqBtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.requestsPage .reqBtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:rgba(246,246,251,.92);
  text-decoration:none;box-shadow:0 10px 22px rgba(0,0,0,.25);
  transition:transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease
}
.requestsPage .reqBtn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.08);box-shadow:0 14px 28px rgba(0,0,0,.35)}
.requestsPage .reqBtn.primary{border-color:rgba(124,255,209,.22);background:rgba(124,255,209,.10)}
.requestsPage .reqFine{color:rgba(246,246,251,.62);font-size:13px;line-height:1.55;margin-top:10px}
.requestsPage .reqCallout{
  border-left:2px solid rgba(255,122,24,.26);
  padding-left:12px;
  margin:10px 0 0;
  color:rgba(246,246,251,.88);
  line-height:1.65;
}
/* Home: testimonials / quotes section */
.djHomeQuotes{
  margin:64px 0;
  padding:52px 18px;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}

.djHomeQuotes .wrap{
  max-width:1100px;
}

.djHomeQuotesHead{
  max-width:760px;
  margin:0 auto 26px;
  text-align:center;
}

.djHomeQuotesH2{
  margin:0 0 10px;
  font-size:28px;
  letter-spacing:.02em;
}

.djHomeQuotesP{
  margin:0;
  opacity:.78;
  line-height:1.55;
  font-size:15px;
}

.djHomeQuoteGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
  align-items:stretch;
  margin:22px 0 22px;
}

@media (max-width: 820px){
  .djHomeQuoteGrid{ grid-template-columns:1fr; }
}

.djHomeQuote{
  margin:0;
  padding:22px 20px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  position:relative;
  overflow:hidden;
}

.djHomeQuote::before{
  content:"“";
  position:absolute;
  left:16px;
  top:-14px;
  font-size:72px;
  line-height:1;
  opacity:.10;
  pointer-events:none;
}

.djHomeQuoteText{
  margin:0 0 14px;
  font-size:15px;
  line-height:1.65;
  white-space:normal;
}

.djHomeQuoteBy{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:baseline;
  opacity:.85;
  font-size:14px;
}

.djHomeQuoteName{
  font-weight:800;
}

.djHomeQuoteRole{
  opacity:.85;
}

.djHomeQuotesActions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:12px;
}
/* =========================================================
   MOBILE POLISH PACK (SAFE, ADDITIVE)
   - App-like header/nav behaviour
   - Better tap targets + iOS form zoom fix
   - Cleaner spacing + safer overflow handling
   ========================================================= */

@media (max-width:760px){
  /* Reduce “boxed website” feeling */
  .wrap{width:100%;max-width:none;padding-left:12px;padding-right:12px}

  /* iOS: prevent input focus zoom + improve readability */
  input, textarea, select{font-size:16px}

  /* Header becomes compact and usable */
  .top .wrap{padding:10px 12px}
  .brand{padding:6px 10px;border-radius:14px}
  .siteLogo{height:34px;max-width:260px}
  .tag{display:none}

  /* Nav turns into horizontal “chips” you can swipe */
  .nav{
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    gap:8px;
    padding:2px 2px 6px;
    scrollbar-width:none;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{
    white-space:nowrap;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.04);
    padding:10px 12px;
    border-radius:999px;
    font-size:14px;
  }

  /* Make taps feel deliberate */
  a.btn, button.btn, .btn{min-height:44px}

  /* Stop awkward horizontal scroll from wide elements */
  img, video, iframe, table{max-width:100%}
  pre, code{max-width:100%;overflow:auto}
}

@media (max-width:520px){
  /* Even tighter header on small phones */
  .top .wrap{padding:8px 10px}
  .brand{padding:6px 8px}
  .siteLogo{height:32px;max-width:220px}
}

/* Small “page feels like an app” touch: safe-area padding on iOS */
@supports (padding: max(0px)){
  @media (max-width:760px){
    .top .wrap{padding-left:max(12px, env(safe-area-inset-left));padding-right:max(12px, env(safe-area-inset-right))}
    .wrap{padding-left:max(12px, env(safe-area-inset-left));padding-right:max(12px, env(safe-area-inset-right))}
  }
}
/* =========================================================
   MOBILE BRAND RESTORE – LOGO IS NON-NEGOTIABLE
   ========================================================= */

@media (max-width:760px){
  /* Ensure brand area always exists */
  .top{position:sticky;top:0;z-index:1000;background:#000}

  .brand{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px 12px;
    margin-bottom:6px;
  }

  /* Logo becomes the hero again */
  .siteLogo{
    display:block !important;
    height:42px;
    max-width:90%;
    object-fit:contain;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));
  }

  /* Optional subtle divider so it feels intentional */
  .brand:after{
    content:"";
    display:block;
    width:60px;
    height:2px;
    margin:8px auto 0;
    background:rgba(255,255,255,.18);
    border-radius:2px;
  }
}

@media (max-width:520px){
  .siteLogo{height:38px}
}

@media (max-width:380px){
  .siteLogo{height:34px}
}
/* =========================================================
   MOBILE: PRIMARY CTA CLARITY (BOOKING / CONTACT)
   ========================================================= */
@media (max-width:760px){
  /* Big, confident primary buttons */
  .btn, button, input[type="submit"], .button, a.btn{
    min-height:48px;
    padding:12px 14px;
    border-radius:14px;
  }

  /* Forms: make submit buttons full width */
  form .btn,
  form button[type="submit"],
  form input[type="submit"]{
    width:100%;
    display:block;
  }

  /* Common “call us / WhatsApp / email” button blocks */
  .cta, .ctaRow, .actions, .formActions{
    display:grid;
    gap:10px;
  }
}

/* Optional sticky CTA bar (only if/when element exists) */
@media (max-width:760px){
  .dj-sticky-cta{
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:1200;
    padding:10px 12px;
    background:rgba(0,0,0,.82);
    backdrop-filter:saturate(140%) blur(10px);
    border-top:1px solid rgba(255,255,255,.10);
  }
  .dj-sticky-cta .btn{width:100%}
  body.has-sticky-cta{padding-bottom:74px}
}
/* =========================================================
   MOBILE NAV: HIERARCHY (WITHOUT REMOVING LINKS)
   ========================================================= */
@media (max-width:760px){
  .nav a{
    opacity:.92;
    font-weight:600;
  }

  /* Make key actions stand out */
  .nav a[href$="/"], /* Home */
  .nav a[href*="booking"],
  .nav a[href*="contact"]{
    opacity:1;
    border-color:rgba(255,255,255,.22);
    background:rgba(255,255,255,.07);
  }

  /* De-emphasise low-frequency links (still present) */
  .nav a[href*="socials"],
  .nav a[href*="testimonials"],
  .nav a[href*="requests"]{
    opacity:.78;
  }

  /* Active page is obvious */
  .nav a[aria-current="page"]{
    opacity:1;
    border-color:rgba(255,255,255,.30);
    background:rgba(255,255,255,.10);
  }
}
/* =========================================================
   POLISH: TAP FEEDBACK + SCROLL COMPACT HEADER
   ========================================================= */
@media (max-width:760px){
  a, button, .btn{ -webkit-tap-highlight-color: transparent; }
  .btn:active, button:active, a.btn:active{ transform:translateY(1px); }

  body.dj-scrolled .top .brand{padding:8px 10px;margin-bottom:4px}
  body.dj-scrolled .siteLogo{height:36px}
  body.dj-scrolled .nav a{padding:9px 11px}
}

/* Form “working” state */
form.dj-working{opacity:.96}
form.dj-working button[type="submit"],
form.dj-working input[type="submit"]{
  opacity:.75;
  cursor:not-allowed;
}


/* =========================================================
   PROMO TOPBAR – INTEGRATED STYLING + HEADER OFFSET FIX
   (Additive overrides; safe for live)
   ========================================================= */

/* Default: no promo offset */
:root{--promo-offset:0px;}

/* Promo sticks at top; header sits underneath it */
.promoBar{top:0; z-index:120;}
.top{top:var(--promo-offset,0px);}

/* Match header width + padding so it doesn’t look “plonked” */
.promoBarInner{
  width:min(1240px,94vw);
  max-width:none;
  padding:10px 14px;
}

/* Better typography + wrapping (so it doesn’t bulldoze the header) */
.promoBarText{
  flex:1 1 auto;
  min-width:0;
  gap:10px;
}
.promoBarText strong{
  font-weight:800;
  letter-spacing:.02em;
}
.promoBarText span{
  display:inline;
  line-height:1.25;
  word-break:break-word;
}

/* Actions stay tidy and don’t wrap into chaos */
.promoBarActions{
  flex:0 0 auto;
  white-space:nowrap;
}

/* Re-enable dismiss button (it’s wired in JS) */
.promoDismiss,
[data-promo-dismiss],
[data-promo-close]{
  display:inline-flex!important;
}

/* Mobile: stack nicely, reduce height, keep actions usable */
@media (max-width:760px){
  .promoBarInner{
    padding:9px 12px;
    gap:10px;
    align-items:flex-start;
  }
  .promoBarText{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }
  .promoBarActions{
    gap:8px;
  }
  .promoBarActions .btn.small{
    padding:8px 10px;
    font-size:13px;
    border-radius:12px;
  }
  /* Header offset also applies on mobile (some blocks override .top) */
  .top{top:var(--promo-offset,0px)!important;}
}


/* =========================================================
   PROMO BAR – allow WYSIWYG inline styling (colour + font)
   Notes:
   - Admin now saves inline styles (e.g. <span style="color:#f00;font-family:Georgia">)
   - Earlier rules set a fixed muted colour on ALL spans in the promo bar, which makes
     styled text look like it "didn't work" on the front end.
   - These overrides are intentionally scoped to the promo bar only.
   ========================================================= */

.promoBarText span{color:inherit}

/* Keep links looking like links (and allow inline colours if provided) */
.promoBarText a{color:inherit;text-decoration:underline;font-weight:700}

/* If you use legacy <font> tags from execCommand, let them render */
.promoBarText font{color:inherit;font-family:inherit}
/* =========================================================
   PROMO MESSAGE – ALLOW INLINE COLOUR & FONT (FINAL OVERRIDE)
   ========================================================= */

.promoBarText.promoMessage span[style],
.promoBarText.promoMessage font,
.promoBarText.promoMessage a,
.promoBarText.promoMessage *[style]{
  color: unset !important;
  font-family: unset !important;
}

/* Keep links obvious */
.promoBarText.promoMessage a{
  text-decoration: underline;
  font-weight: 600;
}