/* ============================================================
   BREAKOUT PH — Stylesheet
   breakout-ph.css
   ============================================================ */

/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── CSS Variables ──────────────────────────────────────── */
:root {
  --bo-deep:          #0a0907;
  --bo-bg:            #11100d;
  --bo-paper:         #161410;
  --bo-surface:       #1c1913;
  --bo-border:        #2c261c;
  --bo-border-strong: #423a2c;
  --bo-bright:        #f4ede0;
  --bo-text:          #d5cdbb;
  --bo-muted:         #8a8174;
  --bo-dim:           #5a5246;
  --bo-yellow:        #f5b800;
  --bo-yellow-soft:   #ffd566;
  --bo-orange:        #ff8a2a;
  --bo-red:           #d04545;
  --bo-green:         #6ea84e;
}

/* ─── Base ───────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  background: var(--bo-bg);
  color: var(--bo-text);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--bo-yellow); text-decoration: none; }
a:hover { color: var(--bo-yellow-soft); }
button { cursor: pointer; font-family: inherit; }

/* ─── Typography ─────────────────────────────────────────── */
.bo-display {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.95;
  color: var(--bo-bright);
  text-transform: uppercase;
}

.bo-headline {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bo-bright);
}

.bo-mono {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.06em;
}

.bo-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bo-yellow);
  display: block;
}

/* ─── Buttons ────────────────────────────────────────────── */
.bo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14px;
  padding: 12px 22px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--bo-bright);
  cursor: pointer;
  transition: all 0.15s ease;
  border-radius: 0;
  text-decoration: none;
  white-space: nowrap;
}

.bo-btn-primary { background: var(--bo-yellow); color: #1a1308; border-color: var(--bo-yellow); }
.bo-btn-primary:hover { background: var(--bo-yellow-soft); border-color: var(--bo-yellow-soft); color: #1a1308; }
.bo-btn-ghost { border-color: var(--bo-border-strong); color: var(--bo-bright); }
.bo-btn-ghost:hover { border-color: var(--bo-yellow); color: var(--bo-yellow); }
.bo-btn-lg { padding: 16px 32px; font-size: 16px; }
.bo-btn-sm { padding: 8px 16px; font-size: 12px; }
.bo-btn-block { width: 100%; }

/* ─── Badges ─────────────────────────────────────────────── */
.bo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(245, 184, 0, 0.12);
  color: var(--bo-yellow);
  border: 1px solid rgba(245, 184, 0, 0.3);
}

.bo-badge-solid { background: var(--bo-yellow); color: #1a1308; border-color: var(--bo-yellow); }
.bo-badge-hot   { background: rgba(255,138,42,0.15); color: var(--bo-orange); border-color: rgba(255,138,42,0.4); }

/* ─── Stamp ──────────────────────────────────────────────── */
.bo-stamp {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: var(--bo-yellow);
  color: #1a1308;
  transform: rotate(-4deg);
  z-index: 5;
}

/* ─── Image placeholders ─────────────────────────────────── */
.bo-img {
  background: repeating-linear-gradient(135deg, #1f1c16 0 8px, #181612 8px 16px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bo-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow: hidden;
}

.bo-img-warm   { background: repeating-linear-gradient(135deg, #2a2218 0 8px, #221b12 8px 16px); }
.bo-img-cool   { background: repeating-linear-gradient(135deg, #1a1f24 0 8px, #131820 8px 16px); }
.bo-img-red    { background: repeating-linear-gradient(135deg, #2b1818 0 8px, #211212 8px 16px); }
.bo-img-purple { background: repeating-linear-gradient(135deg, #221a2a 0 8px, #1a1322 8px 16px); }

/* ─── Clip paths ─────────────────────────────────────────── */
.bo-clip-tl { clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px); }

/* ─── Card ───────────────────────────────────────────────── */
.bo-card { background: var(--bo-surface); border: 1px solid var(--bo-border); }

/* ─── Nav link ───────────────────────────────────────────── */
.bo-nav-link {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bo-text);
  font-size: 13px;
  transition: color 0.15s;
  text-decoration: none;
  white-space: nowrap;
}
.bo-nav-link:hover,
.bo-nav-link.active { color: var(--bo-yellow); }

/* ─── Check bullet ───────────────────────────────────────── */
.check-item { display: flex; align-items: center; gap: 12px; color: var(--bo-text); font-size: 14px; }
.check-icon { flex-shrink: 0; color: var(--bo-yellow); }

/* ─── Layout container ───────────────────────────────────── */
/* Caps content width while sections keep full-bleed backgrounds/atmosphere. */
.bph-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

/* ─── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bo-deep); }
::-webkit-scrollbar-thumb { background: var(--bo-border-strong); }
::-webkit-scrollbar-thumb:hover { background: var(--bo-muted); }


/* ============================================================
   LOGO
   ============================================================ */
.bph-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  user-select: none;
  text-decoration: none;
}
.bph-logo:hover { text-decoration: none; }

.bph-logo-main {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--bo-bright);
  display: flex;
  align-items: center;
}

.bph-logo-sub  { display: flex; align-items: center; gap: 8px; }
.bph-logo-sub-line { height: 1.5px; background: var(--bo-yellow); }
.bph-logo-sub-text {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  letter-spacing: 0.26em;
  color: var(--bo-yellow);
  text-transform: uppercase;
}

/* Key icon wrapper inside logo */
.bph-logo-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: -1px;
}

/* Logo sizes */
.bph-logo-sm .bph-logo-main     { font-size: 18px; gap: 2px; }
.bph-logo-sm .bph-logo-sub      { margin-top: 3px; gap: 6px; }
.bph-logo-sm .bph-logo-sub-line { width: 9px; }
.bph-logo-sm .bph-logo-sub-text { font-size: 8px; }
.bph-logo-sm .bph-logo-key      { width: 16px; height: 16px; }

.bph-logo-md .bph-logo-main     { font-size: 28px; gap: 3px; }
.bph-logo-md .bph-logo-sub      { margin-top: 4px; gap: 8px; }
.bph-logo-md .bph-logo-sub-line { width: 14px; }
.bph-logo-md .bph-logo-sub-text { font-size: 10px; }
.bph-logo-md .bph-logo-key      { width: 27px; height: 27px; }

/* Left-aligned variant (footer) */
.bph-logo-left { align-items: flex-start; }


/* ============================================================
   HEADER — DESKTOP
   ============================================================ */
.bph-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bo-paper);
  border-bottom: 1px solid var(--bo-border);
}

.bph-header-utility {
  border-bottom: 1px solid var(--bo-border);
  padding: 8px 48px;
  display: flex;
  justify-content: center;
}

.bph-header-utility-inner {
  max-width: 1200px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bph-header-utility-text {
  color: var(--bo-muted);
  font-size: 11px;
}

.bph-header-utility-links {
  display: flex;
  gap: 24px;
  font-size: 11px;
}

.bph-header-utility-link {
  color: var(--bo-muted);
  transition: color 0.15s;
}
.bph-header-utility-link:hover { color: var(--bo-text); }

.bph-header-utility-link--contact { color: var(--bo-text); }
.bph-header-utility-link--contact:hover { color: var(--bo-yellow); }

.bph-header-main {
  padding: 18px 0px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

.bph-header-nav { display: flex; gap: 28px; align-items: center; }

.bph-header-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
}


/* ============================================================
   HEADER — MOBILE
   ============================================================ */
.bph-mobile-nav {
  display: none;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bo-paper);
  border-bottom: 1px solid var(--bo-border);
  padding: 12px 16px;
  align-items: center;
  justify-content: space-between;
}

.bph-mob-btn {
  background: transparent;
  border: none;
  color: var(--bo-text);
  cursor: pointer;
  display: flex;
  padding: 4px;
}

.bph-mob-book-btn { padding: 8px 14px; font-size: 11px; }


/* ============================================================
   MOBILE DRAWER
   ============================================================ */
#mob-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  z-index: 290;
  transition: background 0.3s;
}

#mob-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  background: var(--bo-paper);
  border-right: 1px solid var(--bo-border);
  transform: translateX(-100%);
  transition: transform 0.3s;
  z-index: 295;
  overflow-y: auto;
  padding-top: 16px;
}

.bph-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 16px;
  border-bottom: 1px solid var(--bo-border);
}

.bph-drawer-eyebrow { font-size: 9px; }

.bph-drawer-close {
  background: transparent;
  border: none;
  color: var(--bo-text);
  cursor: pointer;
  display: flex;
}

.bph-drawer-links { padding: 8px 0; }

.bph-drawer-link {
  display: block;
  padding: 14px 20px;
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bo-text);
  border-bottom: 1px solid var(--bo-border);
  text-decoration: none;
  transition: color 0.15s;
}
.bph-drawer-link:hover { color: var(--bo-yellow); }
.bph-drawer-link--muted { color: var(--bo-muted); }
.bph-drawer-link--last  { border-bottom: none; }

.bph-drawer-cta {
  padding: 16px;
  border-top: 1px solid var(--bo-border);
  margin-top: 8px;
}


/* ============================================================
   HERO
   ============================================================ */
.bph-hero {
  position: relative;
  padding: 96px 96px 80px;
  background: var(--bo-deep);
  overflow: hidden;
  min-height: 560px;
}

.bph-hero-inner {
  display: flex;
  align-items: center;
  gap: 64px;
  height: 100%;
}

.bph-hero-bg-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 40%, rgba(245,184,0,0.055) 0, transparent 55%),
    radial-gradient(ellipse at 15% 75%, rgba(208,69,69,0.04) 0, transparent 50%);
  pointer-events: none;
}

.bph-hero-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--bo-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--bo-border) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.25;
  pointer-events: none;
}

.bph-hero-copy {
  flex: 1;
  position: relative;
  z-index: 2;
  min-width: 0;
}

.bph-hero-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.bph-hero-rule {
  width: 36px;
  height: 2px;
  background: var(--bo-yellow);
  display: block;
  flex-shrink: 0;
}

.bph-hero-badge { font-size: 9px; padding: 3px 8px; }

.bph-hero-title {
  font-size: 96px;
  line-height: 0.88;
  margin-bottom: 28px;
}

.bph-hero-title-accent { color: var(--bo-yellow); }

.bph-hero-desc {
  color: var(--bo-muted);
  font-size: 15px;
  line-height: 1.75;
  max-width: 460px;
  margin-bottom: 44px;
}

.bph-hero-ctas {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 52px;
}

.bph-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  border-top: 1px solid var(--bo-border);
}

.bph-hero-stat {
  padding: 22px 40px 0;
  border-right: 1px solid var(--bo-border);
}
.bph-hero-stat:first-child { padding-left: 0; }
.bph-hero-stat:last-child  { border-right: none; padding-right: 0; }

.bph-hero-stat-num   { font-size: 32px; color: var(--bo-bright); }
.bph-hero-stat-label { font-size: 9px; color: var(--bo-dim); margin-top: 4px; }

/* Hero room art (desktop) */
.bph-hero-art {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.bph-room-card {
  width: 40vw;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--bo-border-strong);
}

.bph-room-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.bph-room-atmos {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 40% 30%, rgba(208,69,69,0.15) 0, transparent 65%);
}

.bph-room-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}

.bph-room-placeholder-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(208, 69, 69, 0.35);
}

.bph-room-45 {
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--bo-yellow);
  padding: 14px 20px;
}
.bph-room-45-num { font-size: 44px; color: #1a1308; line-height: 1; }
.bph-room-45-label { font-size: 9px; letter-spacing: 0.2em; color: #5a4500; }

.bph-room-escape-tag {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(10, 9, 7, 0.85);
  border: 1px solid var(--bo-border-strong);
  padding: 8px 14px;
}
.bph-room-escape-tag-text { font-size: 9px; color: var(--bo-yellow); letter-spacing: 0.18em; }


/* ============================================================
   EXPERIENCES SECTION
   ============================================================ */
.bph-experiences {
  padding: 64px 96px;
  border-bottom: 1px solid var(--bo-border);
  background: var(--bo-paper);
}

.sec-rule { display: flex; align-items: center; gap: 16px; margin-bottom: 40px; }
.sec-rule-line { flex: 1; height: 1px; background: var(--bo-border); }
.bph-exp-section-label { font-size: 10px; white-space: nowrap; }
.bph-exp-section-count { font-size: 11px; color: var(--bo-dim); white-space: nowrap; }

.bph-exp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.bph-exp-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease;
  text-decoration: none;
}
.bph-exp-card:hover            { border-color: var(--bo-yellow); transform: translateY(-2px); }
.bph-exp-card--horror:hover    { border-color: var(--bo-orange); }

.bph-exp-img {
  height: 210px;
  position: relative;
  flex-shrink: 0;
}

.bph-exp-img-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bph-exp-img .bo-stamp { top: 12px; left: -4px; }
.bph-exp-stamp-solo    { background: var(--bo-orange); color: #1a0a00; }

.bph-exp-body {
  padding: 20px 20px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bph-exp-eyebrow { font-size: 9px; color: var(--bo-muted); }
.bph-exp-title   { font-size: 22px; line-height: 1.05; }
.bph-exp-desc    { color: var(--bo-muted); font-size: 13px; line-height: 1.65; margin: 0; flex: 1; }

.bph-exp-cta {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bo-yellow);
}
.bph-exp-cta--orange { color: var(--bo-orange); }

.bph-exp-cta-label {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bph-exp-cta-arrow { transform: rotate(-90deg); }


/* ============================================================
   SPLIT SECTIONS  (Escape Rooms / On Demand / I'm Home)
   ============================================================ */
.bph-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--bo-border);
  max-width: 1200px;
  margin: 0 auto;
}

/* Image panel */
.bph-split-img {
  min-height: 520px;
  position: relative;
}
.bph-split-img--short { min-height: 420px; }

.bph-split-atmos {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bph-split-atmos--warm   { background: radial-gradient(ellipse at 35% 50%, rgba(245,184,0,0.07)   0, transparent 60%); }
.bph-split-atmos--cool   { background: radial-gradient(ellipse at 60% 40%, rgba(59,130,246,0.1)   0, transparent 65%); }
.bph-split-atmos--purple { background: radial-gradient(ellipse at 40% 30%, rgba(180,80,255,0.08)  0, transparent 65%); }

.bph-split-placeholder {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  height: 100%;
}

.bph-split-placeholder-label        { font-size: 9px; letter-spacing: 0.18em; }
.bph-split-placeholder-label--warm  { color: rgba(245,184,0,0.3); }
.bph-split-placeholder-label--cool  { color: rgba(100,160,255,0.3); }
.bph-split-placeholder-label--purple{ color: rgba(180,80,255,0.3); }

.bph-split-img-tag {
  position: absolute;
  bottom: 32px;
  left: 32px;
  background: var(--bo-paper);
  border: 1px solid var(--bo-border-strong);
  padding: 12px 18px;
}
.bph-split-img-tag-text { font-size: 10px; color: var(--bo-yellow); letter-spacing: 0.14em; }

.bph-split-img-photo {
    aspect-ratio: 1.5;
    width: 100%;
    height: 100%;
}

/* Copy panel */
.bph-split-copy {
  padding: 80px 80px 80px 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bph-split-copy--paper    { background: var(--bo-paper); }
.bph-split-copy--bg       { background: var(--bo-bg); }
.bph-split-copy--deep     { background: var(--bo-deep); }
.bph-split-copy--reversed { padding: 80px 72px 80px 30px; }
.bph-split-copy--compact  { padding: 64px 80px 64px 72px; }

.bph-split-eyebrow { margin-bottom: 16px; }

.bph-split-title {
  font-size: 56px;
  line-height: 0.9;
  margin-bottom: 24px;
}

.bph-split-accent-yellow { color: var(--bo-yellow); }
.bph-split-accent-orange { color: var(--bo-orange); }

.bph-split-desc { color: var(--bo-muted); font-size: 14px; line-height: 1.75; margin-bottom: 20px; }
.bph-split-desc--last { margin-bottom: 40px; }

.bph-split-bullets { display: flex; flex-direction: column; gap: 10px; margin-bottom: 40px; }

.bph-split-cta { align-self: flex-start; }

/* On Demand: online indicator */
.bph-online-indicator {
  position: absolute;
  top: 32px;
  right: 32px;
  background: rgba(10, 9, 7, 0.85);
  border: 1px solid var(--bo-border-strong);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bph-online-dot  { width: 8px; height: 8px; border-radius: 50%; background: var(--bo-green); }
.bph-online-text { font-size: 10px; color: var(--bo-text); letter-spacing: 0.12em; }

/* I'm Home: horror gradient + badge */
.bph-imhome-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(10,9,7,0.7) 100%);
  pointer-events: none;
}
.bph-imhome-badge-wrap { position: absolute; bottom: 28px; left: 32px; }

.bph-imhome-cta {
  border-color: rgba(255, 138, 42, 0.4);
  color: var(--bo-orange);
}
.bph-imhome-cta:hover {
  border-color: var(--bo-orange);
  background: rgba(255, 138, 42, 0.06);
  color: var(--bo-orange);
}


/* ============================================================
   CORPORATE
   ============================================================ */
.bph-corp {
  padding: 80px 96px;
  border-bottom: 1px solid var(--bo-border);
  background: var(--bo-surface);
}

.bph-corp-inner {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}

.bph-corp-eyebrow { margin-bottom: 16px; }
.bph-corp-title   { font-size: 52px; line-height: 0.9; margin-bottom: 24px; }
.bph-corp-desc    { color: var(--bo-muted); font-size: 14px; line-height: 1.75; margin-bottom: 36px; }

.bph-feat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.feat-tile { padding: 24px 22px; background: var(--bo-paper); border: 1px solid var(--bo-border); }
.feat-tile-label { font-family: 'Bebas Neue', sans-serif; font-weight: 400; text-transform: uppercase; font-size: 15px; color: var(--bo-bright); margin-bottom: 6px; }
.feat-tile-desc  { color: var(--bo-muted); font-size: 13px; line-height: 1.5; }


/* ============================================================
   FOOTER
   ============================================================ */
.bph-footer {
  background: var(--bo-deep);
  border-top: 1px solid var(--bo-border);
  padding: 48px 96px 24px;
}

.bph-footer-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.bph-footer-brand-desc {
  color: var(--bo-muted);
  font-size: 12px;
  margin-top: 18px;
  line-height: 1.65;
  max-width: 280px;
}

.bph-footer-socials { display: flex; gap: 10px; margin-top: 18px; }

.bph-footer-social {
  width: 30px;
  height: 30px;
  border: 1px solid var(--bo-border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--bo-text);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.bph-footer-social:hover { border-color: var(--bo-yellow); color: var(--bo-yellow); }

.bph-footer-col-heading { margin-bottom: 14px; font-size: 10px; }
.bph-footer-col-links   { display: flex; flex-direction: column; gap: 10px; }

.bph-footer-col-link {
  color: var(--bo-text);
  font-size: 13px;
  transition: color 0.15s;
  text-decoration: none;
}
.bph-footer-col-link:hover { color: var(--bo-yellow); }

.bph-footer-bottom {
  border-top: 1px solid var(--bo-border);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--bo-dim);
  font-size: 11px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.bph-footer-legal { display: flex; }
.bph-footer-legal-link { color: var(--bo-dim); text-decoration: none; margin-left: 16px; transition: color 0.15s; }
.bph-footer-legal-link:hover { color: var(--bo-text); }


/* ============================================================
   FRANCHISING
   ============================================================ */
.bph-franchise {
  position: relative;
  padding: 96px 96px 0;
  border-bottom: 1px solid var(--bo-border);
  background: var(--bo-deep);
  overflow: hidden;
}

/* Grid-line watermark */
.bph-franchise-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--bo-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--bo-border) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.22;
  pointer-events: none;
}

/* Top section label row */
.bph-franchise-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 48px;
}

.bph-franchise-header-left { display: flex; align-items: center; gap: 12px; }

.bph-franchise-rule {
  width: 32px;
  height: 2px;
  background: var(--bo-yellow);
  display: block;
  flex-shrink: 0;
}

.bph-franchise-section-label { color: var(--bo-dim); font-size: 11px; }

/* Main two-column grid */
.bph-franchise-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 88px;
  align-items: start;
}

/* Left: copy */
.bph-franchise-title {
  font-size: 104px;
  line-height: 0.88;
  margin-bottom: 36px;
  letter-spacing: -0.02em;
}

.bph-franchise-title-accent { color: var(--bo-yellow); }

.bph-franchise-desc {
  color: var(--bo-muted);
  font-size: 15px;
  line-height: 1.7;
  max-width: 480px;
  margin-bottom: 36px;
}

.bph-franchise-cta-row { display: flex; align-items: center; gap: 20px; }

.bph-franchise-email { color: var(--bo-muted); font-size: 11px; }

/* Right: numbered pillars */
.bph-franchise-pillars {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--bo-border);
}

.bph-franchise-pillar {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--bo-border);
  align-items: baseline;
}

.bph-franchise-pillar-num  { color: var(--bo-yellow); font-size: 13px; }
.bph-franchise-pillar-label { font-size: 18px; margin-bottom: 6px; }
.bph-franchise-pillar-desc  { color: var(--bo-muted); font-size: 13px; line-height: 1.6; }

/* Branch photo */
.bph-franchise-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

/* Single-image variant */
.bph-franchise-gallery--single {
  grid-template-columns: 1fr;
}

.bph-franchise-gallery-item {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

/* Single image: let the photo set its own height — no cropping */
.bph-franchise-gallery--single .bph-franchise-gallery-item {
  aspect-ratio: unset;
  overflow: visible;
}

.bph-franchise-gallery--single .bph-franchise-gallery-item img {
  position: relative;
  inset: auto;
  height: auto;
  object-fit: unset;
  display: block;
}

/* Real images: drop an <img> inside and this makes it fill */
.bph-franchise-gallery-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Cinematic gradient: dark at bottom for text legibility */
.bph-franchise-gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 9, 7, 0.88) 0%,
    rgba(10, 9, 7, 0.35) 45%,
    transparent 100%
  );
  pointer-events: none;
}

/* Typography overlay pinned to bottom-left */
.bph-franchise-gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 16px;
}

.bph-franchise-gallery-tag {
  display: block;
  font-size: 9px;
  color: var(--bo-yellow);
  letter-spacing: 0.16em;
  margin-bottom: 5px;
}

.bph-franchise-gallery-name {
  font-size: 22px;
  line-height: 0.92;
  color: var(--bo-bright);
  letter-spacing: 0.02em;
}

/* Territory ticker */
.bph-franchise-ticker {
  position: relative;
  margin-top: 72px;
  padding: 20px 0;
  border-top: 1px solid var(--bo-border-strong);
  display: flex;
  align-items: center;
  gap: 28px;
  overflow: hidden;
}

.bph-franchise-ticker-label {
  color: var(--bo-yellow);
  font-size: 11px;
  flex-shrink: 0;
}

.bph-franchise-ticker-cities {
  display: flex;
  gap: 0;
  align-items: center;
}

.bph-franchise-ticker-city { color: var(--bo-text); font-size: 12px; letter-spacing: 0.08em; }
.bph-franchise-ticker-dot  { color: var(--bo-dim); font-size: 12px; padding: 0 12px; }


/* ============================================================
   RESPONSIVE — MOBILE  (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
  .desktop-only { display: none !important; }

  .bph-mobile-nav { display: flex; }

  /* ── Hero ──────────────────────────────────────────────── */
  .bph-hero { padding: 52px 20px 48px; }
  .bph-hero-inner { flex-direction: column; gap: 0; }

  /* Smaller, subtler grid lines on mobile */
  .bph-hero-grid-lines { background-size: 60px 60px; opacity: 0.2; }

  /* Eyebrow row: smaller rule, tighter gap, hide badge */
  .bph-hero-eyebrow-row { gap: 10px; margin-bottom: 18px; }
  .bph-hero-rule         { width: 24px; }
  .bph-hero-badge        { display: none; }

  /* Title */
  .bph-hero-title { font-size: 60px; line-height: 0.9; margin-bottom: 20px; }

  /* Description */
  .bph-hero-desc { font-size: 14px; line-height: 1.7; max-width: 310px; margin-bottom: 28px; }

  /* CTAs: de-elevate to normal size, first button stretches */
  .bph-hero-ctas { gap: 10px; margin-bottom: 40px; }
  .bph-hero-ctas .bo-btn-lg    { padding: 12px 22px; font-size: 14px; }
  .bph-hero-ctas .bo-btn:first-child { flex: 1; }

  /* Stats strip: centered, smaller type, pad from border */
  .bph-hero-stats {
    grid-template-columns: repeat(4, 1fr);
    padding-top: 20px;
  }
  .bph-hero-stat             { padding: 0; text-align: center; }
  .bph-hero-stat:first-child { padding-left: 0; }
  .bph-hero-stat:last-child  { padding-right: 0; border-right: none; }
  .bph-hero-stat-num         { font-size: 22px; }
  .bph-hero-stat-label       { font-size: 8px; margin-top: 3px; }

  /* ── Experiences ────────────────────────────────────────── */
  .bph-experiences       { padding: 32px 16px; }
  .bph-exp-grid          { grid-template-columns: 1fr; gap: 14px; }

  /* Hide "3 WAYS TO PLAY" label — too cramped on mobile */
  .bph-exp-section-count { display: none; }

  /* Horizontal card layout */
  .bph-exp-card { flex-direction: row; }
  .bph-exp-img  { width: 90px; height: auto; flex-shrink: 0; }

  /* Smaller stamp inside exp image */
  .bph-exp-img .bo-stamp { font-size: 8px; padding: 3px 8px; transform: rotate(-3deg); top: 8px; left: -4px; }

  .bph-exp-body { padding: 14px; }

  /* Hide description — only badge / title / CTA visible in compact card */
  .bph-exp-desc { display: none; }

  /* ── Split sections ─────────────────────────────────────── */
  .bph-split              { grid-template-columns: 1fr; }
  .bph-split-img          { min-height: 220px; }
  .bph-split-img--short   { min-height: 220px; }
  .bph-split-copy         { padding: 28px 20px 36px; }
  .bph-split-copy--compact { padding: 28px 20px 36px; }
  .bph-split-title        { font-size: 42px; }  

  /* On Demand: copy is first in HTML (reversed layout);
     push it below the image on mobile via CSS order */
  .bph-split-copy--reversed { order: 2; padding: 28px 20px 36px; }

  /* On Demand copy: deep background on mobile (matches design intent) */
  .bph-split-copy--bg { background: var(--bo-deep); }

  /* ── Corporate ──────────────────────────────────────────── */
  .bph-corp       { padding: 40px 20px; }
  .bph-corp-inner { grid-template-columns: 1fr; gap: 32px; }
  .bph-corp-title { font-size: 42px; }
  .bph-feat-grid  { grid-template-columns: 1fr 1fr; }

  /* Smaller feat tiles on mobile */
  .feat-tile       { padding: 16px 14px; }
  .feat-tile-label { font-size: 13px; }
  .feat-tile-desc  { font-size: 11px; }

  /* Full-width CONTACT US button */
  .bph-corp .bo-btn { width: 100%; }

  /* ── Footer ─────────────────────────────────────────────── */
  .bph-footer       { padding: 40px 20px 24px; }
  .bph-footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
  .bph-footer-brand { grid-column: 1 / -1; }

  /* Condensed to 2 nav columns — hide "Visit" (3rd child) */
  /*.bph-footer-inner > div:nth-child(3) { display: none; }*/

  /* Smaller footer logo */
  .bph-footer-brand .bph-logo-main     { font-size: 18px; }
  .bph-footer-brand .bph-logo-sub      { margin-top: 3px; gap: 6px; }
  .bph-footer-brand .bph-logo-sub-line { width: 9px; }
  .bph-footer-brand .bph-logo-sub-text { font-size: 8px; }
  .bph-footer-brand .bph-logo-key      { width: 16px; height: 16px; }

  /* Tighter brand description + socials */
  .bph-footer-brand-desc { margin-top: 14px; }
  .bph-footer-socials    { margin-top: 14px; }
  .bph-footer-social     { width: 28px; height: 28px; }

  /* Tighter nav columns */
  .bph-footer-col-heading { font-size: 9px; margin-bottom: 12px; }
  .bph-footer-col-links   { gap: 8px; }
  .bph-footer-col-link    { font-size: 13px; }

  /* Footer bottom: single line copyright, no legal links */
  .bph-footer-legal  { display: none; }
  .bph-footer-bottom { flex-direction: column; gap: 8px; align-items: flex-start; font-size: 10px; }

  /* ── Franchise ──────────────────────────────────────────── */
  .bph-franchise              { padding: 48px 20px 0; }
  .bph-franchise-bg           { background-size: 60px 60px; opacity: 0.2; }
  .bph-franchise-header       { margin-bottom: 18px; }
  .bph-franchise-section-label { display: none; }
  .bph-franchise-rule         { width: 24px; }
  .bph-franchise-grid         { grid-template-columns: 1fr; gap: 28px; }
  .bph-franchise-title        { font-size: 56px; line-height: 0.9; margin-bottom: 22px; letter-spacing: -0.01em; }
  .bph-franchise-desc         { font-size: 13px; margin-bottom: 0; max-width: 100%; }
  .bph-franchise-pillars      { margin-top: 28px; margin-bottom: 0; }
  .bph-franchise-pillar       { grid-template-columns: 48px 1fr; gap: 14px; padding: 16px 0; }
  .bph-franchise-pillar-num   { font-size: 11px; }
  .bph-franchise-pillar-label { font-size: 14px; margin-bottom: 4px; }
  .bph-franchise-pillar-desc  { font-size: 12px; line-height: 1.55; }
  /* Gallery: 2-col on mobile too, just tighter */
  .bph-franchise-gallery      { gap: 2px; }
  .bph-franchise-gallery-name { font-size: 16px; }
  .bph-franchise-gallery-tag  { font-size: 8px; }
  .bph-franchise-gallery-caption { padding: 10px 12px; }
  .bph-franchise-cta-row      { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 28px; }
  .bph-franchise-cta-row .bo-btn { width: 100%; }
  .bph-franchise-email        { text-align: center; font-size: 10px; color: var(--bo-dim); }
  .bph-franchise-ticker       { margin-top: 36px; gap: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bph-franchise-ticker-cities { flex-wrap: nowrap; }
}

@media (min-width: 769px) {
  .mobile-only { display: none !important; }
}