/* Built with Prooflive.ai: https://prooflive.ai | ref pl247itmd5 */
/* Prooflive.ai sector pages: a light sector accent inside the Prooflive look. Published as /media/sectors.css.
   Each .sx-<sector> sets a headline typeface and one accent colour; the photo rows borrow from poster-style
   hospitality sites (rounded photos, alternating sides). */

.sx h1 { font-family: var(--sx-font); font-weight: var(--sx-w, 800); font-stretch: var(--sx-stretch, normal); text-transform: none; letter-spacing: -0.03em; line-height: .95; font-size: var(--sx-h1, clamp(48px, 6vw, 92px)); }
.sx .btn-m { background: var(--sx-accent); border-color: var(--sx-accent); color: var(--sx-on); }
.sx .btn-m:hover { filter: brightness(.92); background: var(--sx-accent); border-color: var(--sx-accent); color: var(--sx-on); }
.sx .checks li::before, .sx .faq summary::after { color: var(--sx-accent); }
.sx .proof .stamp { border-color: var(--sx-accent); color: var(--sx-accent); }
.sx .ring { border-color: var(--sx-accent); }
.sx .mark { color: var(--sx-accent); }
.sx .mark::before { border-top-color: var(--sx-accent); }
.sx-mark { display: block; width: 72px; height: 6px; border-radius: 3px; background: var(--sx-accent); margin: 0 0 22px; }

/* Photo rows */
.sx-rows { display: grid; gap: clamp(28px, 4vw, 48px); }
.sx-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.sx-row:nth-child(even) > .sx-media { order: 2; }
.sx-row h3 { font: var(--sx-w, 800) clamp(28px, 3vw, 42px)/1 var(--sx-font); font-stretch: var(--sx-stretch, normal); letter-spacing: -0.02em; margin: 0 0 14px; }
.sx-row p { color: var(--muted); max-width: 32em; }
.sx-media { margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 5 / 4; background: var(--sheet); }
.sx-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Panels where there are no photos (trades) */
.sx-panel { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: clamp(22px, 3vw, 36px); border: 1px solid var(--rule); }
.sx-panel > b { font: var(--sx-w, 800) 26px/1 var(--sx-font); }
.sx-field { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.sx-field span:last-child { background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 6px; padding: 10px 12px; font-size: 15px; }
.sx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-chips span { padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--sx-accent); }
.sx-panel .sx-send { align-self: flex-start; background: var(--sx-accent); color: var(--sx-on); border-radius: 6px; padding: 10px 18px; font-weight: 700; }
.sx-panel .sx-note { font: 12px/1.4 var(--mono); color: var(--muted); margin: 0; }

/* Hub */
.sector-hub dt a { font-family: var(--sx-font); font-weight: var(--sx-w, 800); font-stretch: var(--sx-stretch, normal); text-transform: none; letter-spacing: -0.02em; }
.sector-hub dt { border-left: 6px solid var(--sx-accent); padding-left: 14px; }

@media (max-width: 900px) {
  .sx-row { grid-template-columns: minmax(0, 1fr); }
  .sx-row:nth-child(even) > .sx-media { order: 0; }
  .sx-panel { aspect-ratio: auto; }
}

/* ---------------------------------------------------------------- Sector themes
   Each sector redefines the Prooflive colour tokens for its own page body only; the header and footer sit
   outside .sx and stay on the Prooflive brand. */
.sx { background: var(--paper); color: var(--ink); }
.sx .proof .page, .sx .mini-sheet { background: var(--sheet); }

.sx-hospitality { --sx-h1: clamp(38px, 4.1vw, 60px); --sx-font: "Unbounded", sans-serif; --sx-w: 800; --sx-accent: #D63C1E; --sx-on: #FFF3DA;
  --paper: #FFF3DA; --sheet: #F6E4BF; --ink: #1C3A2A; --muted: #56634F; --rule: #E6CFA2;
  --dark: #1C3A2A; --dark-text: #FFF3DA; --dark-muted: #D9CFB6; --dark-rule: #2E4F3C; color-scheme: light; }
.sx-trades { --sx-h1: clamp(60px, 7.4vw, 112px); --sx-font: "Big Shoulders Display", sans-serif; --sx-w: 900; --sx-accent: #FFD60A; --sx-on: #1D1D1B;
  --paper: #F4F3EE; --sheet: #FFFFFF; --ink: #1D1D1B; --muted: #55554F; --rule: #D9D7CC;
  --dark: #1D1D1B; --dark-text: #FFD60A; --dark-muted: #E6E4DA; --dark-rule: #3A3A36; color-scheme: light; }
.sx-trades .dark .lede { color: #FFFFFF; }
.sx-trades .btn-m { border-color: #1D1D1B; }
.sx-health-and-beauty { --sx-h1: clamp(46px, 5.4vw, 84px); --sx-font: "Gloock", serif; --sx-w: 400; --sx-accent: #1F4B4A; --sx-on: #F1F5EF;
  --paper: #EEF2EC; --sheet: #DFE8DC; --ink: #1F4B4A; --muted: #4F6664; --rule: #C9D6C8;
  --dark: #1F4B4A; --dark-text: #F1F5EF; --dark-muted: #C6D6D2; --dark-rule: #2F6160; color-scheme: light; }
.sx-fitness-and-wellness { --sx-h1: clamp(36px, 3.9vw, 58px); --sx-font: "Anybody", sans-serif; --sx-w: 900; --sx-stretch: 125%; --sx-accent: #FF6B1A; --sx-on: #13261F;
  --paper: #13261F; --sheet: #1B3229; --ink: #F3F5F1; --muted: #B5C2BA; --rule: #2B4639;
  --dark: #FF6B1A; --dark-text: #13261F; --dark-muted: #2A1A10; --dark-rule: #E2560B; }
.sx-fitness-and-wellness .dark .btn { border-color: #13261F; color: #13261F; }
.sx-retail { --sx-h1: clamp(48px, 5.8vw, 88px); --sx-font: "Bodoni Moda", serif; --sx-w: 600; --sx-accent: #111111; --sx-on: #FFFFFF;
  --paper: #FFFFFF; --sheet: #FBF1D6; --ink: #111111; --muted: #555555; --rule: #E6E2D8;
  --dark: #F3B61F; --dark-text: #111111; --dark-muted: #3A2E10; --dark-rule: #D99F12; color-scheme: light; }
.sx-retail .dark .btn { border-color: #111111; color: #111111; }
.sx-professional-services { --sx-h1: clamp(48px, 5.6vw, 86px); --sx-font: "Newsreader", serif; --sx-w: 500; --sx-accent: #2340C8; --sx-on: #FFFFFF;
  --paper: #F5F5F2; --sheet: #E7EBF7; --ink: #10131A; --muted: #4A4F5C; --rule: #D8DAD3;
  --dark: #2340C8; --dark-text: #FFFFFF; --dark-muted: #DCE3FA; --dark-rule: #3553D6; color-scheme: light; }

.sx-djs-and-artists { --sx-h1: clamp(40px, 4.6vw, 70px); --sx-font: "Unbounded", sans-serif; --sx-w: 800; --sx-accent: #B07CFF; --sx-on: #120E18;
  --paper: #120E18; --sheet: #1E1828; --ink: #F4F0FA; --muted: #B9B0C8; --rule: #33294A;
  --dark: #B07CFF; --dark-text: #120E18; --dark-muted: #2A1D40; --dark-rule: #9A63F0; color-scheme: dark; }
.sx-djs-and-artists .dark .btn { border-color: #120E18; color: #120E18; }
.sector-hub .sx-djs-and-artists { --sx-accent: #B07CFF; }

/* Hub: each sector name in its own face and colour */
.sector-hub .sx-hospitality { --sx-accent: #D63C1E; }
.sector-hub .sx-trades { --sx-accent: #FFD60A; }
.sector-hub .sx-health-and-beauty { --sx-accent: #9CC5B4; }
.sector-hub .sx-fitness-and-wellness { --sx-accent: #FF6B1A; }
.sector-hub .sx-retail { --sx-accent: #F3B61F; }
.sector-hub .sx-professional-services { --sx-accent: #8DA2FF; }
.sector-hub div[class^="sx-"] { background: transparent; color: inherit; }

.sx-property { --sx-h1: clamp(48px, 5.6vw, 86px); --sx-font: "Albert Sans", sans-serif; --sx-w: 700; --sx-accent: #C7A46B; --sx-on: #1A2233;
  --paper: #1A2233; --sheet: #232D42; --ink: #F3F1EC; --muted: #B9C0CF; --rule: #2F3A52;
  --dark: #C7A46B; --dark-text: #1A2233; --dark-muted: #3A3020; --dark-rule: #B08F57; }
.sx-property .dark .btn { border-color: #1A2233; color: #1A2233; }
.sx-sports-clubs { --sx-h1: clamp(46px, 5.4vw, 84px); --sx-font: "Familjen Grotesk", sans-serif; --sx-w: 700; --sx-accent: #D7F25B; --sx-on: #0B0B0C;
  --paper: #0B0B0C; --sheet: #17171A; --ink: #F4F4F2; --muted: #B4B4BA; --rule: #2A2A2F;
  --dark: #1A4FB8; --dark-text: #FFFFFF; --dark-muted: #DCE6FA; --dark-rule: #2E63CC; }
.sector-hub .sx-property { --sx-accent: #C7A46B; }
.sector-hub .sx-sports-clubs { --sx-accent: #D7F25B; }