/* ============================================================
   DURBAN FILM OFFICE
   Main Stylesheet — assets/css-styles/css-styles.css
   ============================================================

   TABLE OF CONTENTS
   ─────────────────────────────────────────────────────────────
   1.  Reset & Base
   2.  Design Tokens (CSS Variables)
   3.  Navigation — Desktop
   4.  Navigation — Mobile & Hamburger
   5.  Navigation — Dropdown Menus
   6.  Utility Classes & Buttons
   7.  Homepage — Hero Section
   8.  Homepage — About / Who We Are
   9.  Homepage — Permit Steps
   10. Homepage — Locations Grid (Index)
   11. Homepage — News & Reviews
   12. Homepage — Crew Search
   13. Homepage — Contact & Newsletter
   14. Footer
   15. Sub-Page Chrome (Hero, Breadcrumb, Page Body)
   16. Prose & Sidebar Layout
   17. Team Page
   18. About Page — Our People
   19. Locations Category Grid Page
   20. Location Sub-Pages — Gallery & Lightbox
   21. Crew Directory Page
   22. Development Programmes Page
   23. News Page
   24. Contact Page
   25. FAQs Page
   26. Filmography Page
   27. Responsive Breakpoints
   ============================================================ */


/* ============================================================
   1. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  { font-family: "DM Sans", sans-serif; background: #fff; color: #2C2C2C; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a     { text-decoration: none; }
img   { max-width: 100%; display: block; }


/* ============================================================
   2. DESIGN TOKENS (CSS VARIABLES)
   ============================================================ */
:root {
  --gold:       #8B6914;
  --gold-mid:   #C9A84C;
  --gold-light: #E8C96A;
  --navy:       #1C2B45;
  --navy-dark:  #0D1B2A;
  --white:      #FFFFFF;
  --off-white:  #F8F6F2;
  --light:      #F0EDE6;
  --mid:        #E5E0D8;
  --text:       #2C2C2C;
  --text-mid:   #555555;
  --text-light: #888888;
}


/* ============================================================
   3. NAVIGATION — DESKTOP
   ============================================================ */
#mainNav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px; height: 76px;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--mid);
  box-shadow: 0 2px 16px rgba(0,0,0,.07);
}
.nav-logo          { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo img      { height: 50px; width: auto; }
.nav-hamburger     { display: none; }
.nav-links {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
  position: static; background: transparent; width: auto; height: auto; overflow: visible;
}
.nav-links > li                { position: relative; margin: 0; padding: 0; border: none; }
.nav-links > li > a {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 0 11px; height: 76px;
  color: var(--text-mid); font-size: 11px; letter-spacing: .9px;
  text-transform: uppercase; font-weight: 600; white-space: nowrap; transition: color .15s;
}
.nav-links > li > a:hover          { color: var(--gold); }
.nav-links > li.has-dd > a::after  { content: "▾"; font-size: 9px; opacity: .65; margin-left: 2px; transition: transform .2s; }
.nav-links .nav-cta                { background: var(--navy) !important; color: #fff !important; padding: 0 18px !important; height: 38px !important; border-radius: 4px; font-weight: 700 !important; margin-left: 6px; }
.nav-links .nav-cta:hover          { background: var(--navy-dark) !important; }


/* ============================================================
   4. NAVIGATION — MOBILE & HAMBURGER
   ============================================================ */
@media (max-width: 960px) {
  #mainNav { padding: 0 20px; height: 64px; }

  .nav-hamburger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 38px; height: 38px; background: none; border: none;
    cursor: pointer; z-index: 9002; flex-shrink: 0; padding: 6px;
  }
  .nav-hamburger span {
    display: block; width: 22px; height: 2px;
    background: var(--navy); border-radius: 2px;
    transition: transform .25s, opacity .25s; pointer-events: none;
  }
  .nav-hamburger.is-open span:nth-child(1) { transform: rotate(45deg)  translate(5px, 5px); }
  .nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
  .nav-hamburger.is-open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

  .nav-links {
    display: none !important; position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    padding-top: 64px !important; background: #fff !important;
    flex-direction: column !important; align-items: stretch !important;
    gap: 0 !important; overflow-y: auto !important; z-index: 9001 !important;
  }
  .nav-links.is-open                  { display: flex !important; }
  .nav-links > li                     { border-bottom: 1px solid var(--mid) !important; padding: 0 !important; }
  .nav-links > li:last-child          { border-bottom: none !important; padding: 14px 24px !important; }
  .nav-links > li > a {
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    height: auto !important; padding: 17px 24px !important; font-size: 14px !important;
    color: var(--text) !important; background: transparent !important; width: 100% !important;
  }
  .nav-links > li > a:hover           { background: var(--off-white) !important; color: var(--gold) !important; }
  .nav-links .nav-cta {
    display: block !important; margin: 0 !important; height: auto !important;
    background: var(--navy) !important; color: #fff !important;
    border-radius: 6px !important; text-align: center !important; padding: 14px 24px !important;
  }
}


/* ============================================================
   5. NAVIGATION — DROPDOWN MENUS
   ============================================================ */
.dd-menu {
  display: none; position: absolute; top: 76px; left: 0;
  min-width: 190px; background: #fff;
  border: 1px solid var(--mid); border-top: 3px solid var(--gold-mid);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.13);
  z-index: 9001; list-style: none; padding: 6px 0;
}
.nav-links > li.has-dd:hover > .dd-menu { display: block; }
.dd-menu > li                            { padding: 0; border: none; }
.dd-menu > li > a {
  display: block; padding: 10px 18px;
  font-size: 12px; letter-spacing: .3px; color: var(--text-mid);
  font-weight: 500; white-space: nowrap;
  transition: background .12s, color .12s, padding-left .12s;
  border-left: 3px solid transparent;
}
.dd-menu > li > a:hover { background: var(--off-white); color: var(--gold); padding-left: 22px; border-left-color: var(--gold-mid); }

@media (max-width: 960px) {
  .nav-links > li.has-dd:hover > .dd-menu { display: none !important; }
  .dd-menu {
    display: none !important; position: static !important; top: auto !important; left: auto !important;
    width: 100% !important; min-width: 0 !important; border: none !important;
    border-top: none !important; border-radius: 0 !important; box-shadow: none !important;
    background: #f0ede6 !important; padding: 0 !important; z-index: auto !important;
  }
  .nav-links > li.has-dd.dd-open > .dd-menu { display: block !important; }
  .dd-menu > li > a {
    padding: 13px 40px !important; font-size: 13px !important;
    border-bottom: 1px solid var(--mid) !important; border-left: none !important;
    color: var(--text-mid) !important; background: transparent !important;
  }
  .dd-menu > li > a:hover   { background: var(--mid) !important; padding-left: 40px !important; }
  .dd-menu > li:last-child > a { border-bottom: none !important; }
}


/* ============================================================
   6. UTILITY CLASSES & BUTTONS
   ============================================================ */
.reveal         { opacity: 0; transform: translateY(28px); transition: opacity .6s, transform .6s; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.eyebrow        { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold-mid); font-weight: 600; margin-bottom: 12px; display: block; }

.btn-gold   { display: inline-block; background: var(--gold-mid); color: var(--navy-dark); padding: 13px 30px; border-radius: 6px; font-weight: 700; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; transition: background .2s, transform .2s; border: none; cursor: pointer; font-family: "DM Sans", sans-serif; }
.btn-gold:hover  { background: var(--gold-light); transform: translateY(-2px); }
.btn-navy   { display: inline-block; background: var(--navy); color: #fff; padding: 13px 30px; border-radius: 6px; font-weight: 700; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; transition: background .2s; border: none; cursor: pointer; font-family: "DM Sans", sans-serif; }
.btn-navy:hover  { background: var(--navy-dark); }
.btn-ghost  { display: inline-block; border: 1px solid rgba(255,255,255,.35); color: rgba(255,255,255,.85); padding: 13px 30px; border-radius: 4px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; transition: all .2s; }
.btn-ghost:hover { border-color: var(--gold-mid); color: var(--gold-mid); }
.btn-dark   { display: inline-block; border: 1.5px solid var(--navy); color: var(--navy); padding: 11px 26px; border-radius: 4px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; transition: all .2s; }
.btn-dark:hover  { background: var(--navy); color: #fff; }
.btn-submit { width: 100%; background: var(--navy); color: #fff; border: none; padding: 14px; border-radius: 7px; font-weight: 700; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; font-family: "DM Sans", sans-serif; transition: background .2s; margin-top: 4px; }
.btn-submit:hover { background: var(--navy-dark); }


/* ============================================================
   7. HOMEPAGE — HERO SECTION
   ============================================================ */
section    { padding: 80px 80px; }
.sec-title { font-family: "Bebas Neue", sans-serif; font-size: clamp(32px,4.5vw,56px); line-height: 1; color: var(--navy); margin-bottom: 18px; }
.sec-title.light { color: #fff; }

#home        { padding: 0; background: #000; display: block; min-height: 0; }
.hero-badge  { display: inline-block; margin-bottom: 18px; padding: 6px 16px; border: 1px solid rgba(201,168,76,.5); color: var(--gold-mid); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; border-radius: 2px; }
.hero-title  { font-family: "Bebas Neue", sans-serif; font-size: clamp(40px,6vw,88px); line-height: .92; letter-spacing: 2px; color: #fff; }
.hero-title .accent { color: var(--gold-mid); }
.hero-sub    { margin-top: 16px; max-width: 440px; font-family: "Playfair Display", serif; font-style: italic; font-size: 17px; color: rgba(255,255,255,.6); line-height: 1.7; }
.hero-ctas   { margin-top: 26px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero-ql     { display: flex; gap: 12px; flex-wrap: wrap; }
.ql-card     { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); padding: 14px 18px; border-radius: 8px; color: rgba(255,255,255,.85); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; transition: all .2s; }
.ql-card:hover { background: rgba(201,168,76,.18); border-color: var(--gold-mid); color: var(--gold-mid); }
.ql-card span  { display: block; font-size: 18px; margin-bottom: 5px; }


/* ============================================================
   8. HOMEPAGE — ABOUT / WHO WE ARE
   ============================================================ */
#about  { background: var(--white); padding: 0; }
.stat-n { font-family: "Bebas Neue", sans-serif; font-size: 40px; color: var(--gold); display: block; line-height: 1; }
.stat-l { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-light); margin-top: 3px; display: block; }


/* ============================================================
   9. HOMEPAGE — PERMIT STEPS
   ============================================================ */
#why    { background: var(--navy-dark); }
.steps  { display: flex; justify-content: center; gap: 0; margin: 36px 0; flex-wrap: wrap; }
.step   { flex: 1; max-width: 180px; text-align: center; position: relative; padding: 0 10px; }
.step::after    { content: "→"; position: absolute; top: 13px; right: -10px; color: var(--gold-mid); font-size: 18px; }
.step:last-child::after { display: none; }
.step-n { width: 44px; height: 44px; border-radius: 50%; background: var(--gold-mid); color: var(--navy-dark); font-family: "Bebas Neue", sans-serif; font-size: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 11px; }
.step p { font-size: 12px; color: rgba(255,255,255,.6); line-height: 1.5; }


/* ============================================================
   10. HOMEPAGE — LOCATIONS GRID (INDEX PAGE)
   ============================================================ */
#locations          { background: var(--off-white); }
.loc-hdr            { margin-bottom: 36px; }
.loc-grid           { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.loc-card           { position: relative; border-radius: 12px; overflow: hidden; height: 280px; cursor: pointer; transition: transform .4s; box-shadow: 0 6px 24px rgba(0,0,0,.1); }
.loc-card:hover     { transform: scale(1.02); }
.loc-card:first-child { grid-column: span 2; height: 360px; }
.loc-card img       { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; display: block; }
.loc-card:hover img { transform: scale(1.06); }
.loc-over           { position: absolute; inset: 0; background: linear-gradient(to top,rgba(13,27,42,.78),transparent 55%); display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; }
.loc-over h3        { font-family: "Bebas Neue", sans-serif; font-size: 24px; letter-spacing: 1px; color: #fff; }
.loc-over p         { font-size: 13px; color: rgba(255,255,255,.7); margin-top: 3px; }


/* ============================================================
   11. HOMEPAGE — CLIENT REVIEWS & NEWS SECTION
   ============================================================ */
#news              { background: var(--off-white); }
.news-layout       { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 8px; align-items: start; }
.news-col-title    { font-family: "Bebas Neue", sans-serif; font-size: 20px; color: var(--navy); letter-spacing: 1px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--gold-mid); }
.reviews-col       { display: flex; flex-direction: column; gap: 0; }
.review-card       { background: #fff; border-radius: 10px; padding: 22px 24px; border: 1px solid var(--mid); border-left: 4px solid var(--gold-mid); margin-bottom: 16px; transition: transform .3s, box-shadow .3s; }
.review-card:last-child { margin-bottom: 0; }
.review-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(0,0,0,.09); }
.review-badge      { display: inline-block; background: var(--off-white); color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; border: 1px solid var(--mid); margin-bottom: 10px; }
.review-stars      { color: var(--gold-mid); font-size: 14px; margin-bottom: 10px; letter-spacing: 3px; }
.review-text       { font-family: "Playfair Display", serif; font-style: italic; font-size: 14px; color: var(--text-mid); line-height: 1.7; margin-bottom: 16px; }
.review-author     { display: flex; align-items: center; gap: 12px; }
.review-avatar     { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,var(--navy),var(--gold-mid)); display: flex; align-items: center; justify-content: center; font-family: "Bebas Neue", sans-serif; font-size: 15px; color: #fff; flex-shrink: 0; }
.review-name       { font-size: 13px; font-weight: 700; color: var(--navy); line-height: 1.3; }
.review-role       { font-size: 12px; color: var(--text-light); line-height: 1.3; margin-top: 2px; }
.news-col          { display: flex; flex-direction: column; gap: 0; }
.news-list-item    { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--mid); }
.news-list-item:first-of-type { padding-top: 0; }
.news-list-item:last-child    { border-bottom: none; padding-bottom: 0; }
.news-list-icon    { font-size: 24px; flex-shrink: 0; width: 48px; height: 48px; background: var(--white); border: 1px solid var(--mid); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.news-list-body    { flex: 1; min-width: 0; }
.news-list-tag     { display: inline-block; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 6px; }
.news-list-body h3 { font-family: "Playfair Display", serif; font-size: 15px; color: var(--navy); line-height: 1.4; margin-bottom: 6px; font-weight: 600; }
.news-list-body p  { font-size: 13px; color: var(--text-mid); line-height: 1.6; margin-bottom: 8px; }
.news-list-date    { font-size: 11px; color: #bbb; }


/* ============================================================
   12. HOMEPAGE — CREW SEARCH
   ============================================================ */
#crew             { background: #fff; }
.crew-search      { margin-top: 28px; display: flex; gap: 10px; flex-wrap: wrap; }
.crew-search input,
.crew-search select { background: var(--off-white); border: 1.5px solid var(--mid); color: var(--text); padding: 12px 14px; border-radius: 6px; font-size: 14px; outline: none; transition: border-color .2s; font-family: "DM Sans", sans-serif; flex: 1; min-width: 140px; }
.crew-search input:focus { border-color: var(--gold-mid); }
.crew-search button { background: var(--navy); color: #fff; border: none; padding: 12px 24px; border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; letter-spacing: 1px; text-transform: uppercase; font-family: "DM Sans", sans-serif; }
.crew-search button:hover { background: var(--navy-dark); }
.crew-tags        { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.crew-tag         { padding: 6px 16px; border-radius: 20px; border: 1.5px solid var(--mid); color: var(--text-mid); font-size: 13px; cursor: pointer; transition: all .2s; background: none; font-family: "DM Sans", sans-serif; }
.crew-tag:hover,
.crew-tag.active  { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }


/* ============================================================
   13. HOMEPAGE — CONTACT & NEWSLETTER
   ============================================================ */
#contact              { background: var(--light); }
.contact-grid         { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: start; }
.contact-info p       { color: var(--text-mid); line-height: 1.8; margin-bottom: 28px; }
.cdet                 { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 16px; }
.cdet-icon            { width: 42px; height: 42px; background: #fff; border: 1px solid var(--mid); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.cdet-body strong     { display: block; color: var(--navy); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 3px; font-weight: 700; }
.cdet-body span,
.cdet-body a          { font-size: 14px; color: var(--text-mid); }
.contact-subscribe    { background: var(--navy-dark); border-radius: 14px; padding: 40px; overflow: hidden; }
.contact-subscribe h3 { font-family: "Bebas Neue", sans-serif; font-size: 28px; color: #fff; margin-bottom: 8px; line-height: 1; }
.contact-subscribe > p { color: rgba(255,255,255,.55); font-size: 15px; line-height: 1.7; margin-bottom: 28px; }
.cs-perks             { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 28px; }
.cs-perk              { display: flex; align-items: flex-start; gap: 10px; }
.cs-perk-icon         { width: 34px; height: 34px; border-radius: 7px; background: rgba(201,168,76,.15); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.cs-perk-text strong  { display: block; font-size: 12px; font-weight: 700; color: #fff; letter-spacing: .4px; }
.cs-perk-text span    { font-size: 12px; color: rgba(255,255,255,.45); line-height: 1.4; }
.cs-form              { display: flex; flex-direction: column; gap: 10px; }
.cs-form input[type="email"] { width: 100%; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.18); color: #fff; padding: 13px 16px; border-radius: 7px; font-size: 14px; outline: none; font-family: "DM Sans", sans-serif; transition: border-color .2s; }
.cs-form input[type="email"]::placeholder { color: rgba(255,255,255,.3); }
.cs-form input[type="email"]:focus        { border-color: var(--gold-mid); }
.cs-form input[type="submit"] { width: 100%; background: var(--gold-mid); color: var(--navy-dark); border: none; padding: 14px; border-radius: 7px; font-weight: 700; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; font-family: "DM Sans", sans-serif; transition: background .2s; }
.cs-form input[type="submit"]:hover { background: var(--gold-light); }
.cs-privacy   { font-size: 11px; color: rgba(255,255,255,.25); margin-top: 12px; text-align: center; line-height: 1.5; }
.cs-privacy a { color: rgba(255,255,255,.4); text-decoration: underline; }


/* ============================================================
   14. FOOTER
   ============================================================ */
footer          { background: var(--navy-dark); padding: 44px 80px; display: flex; justify-content: space-between; align-items: flex-start; border-top: 1px solid rgba(201,168,76,.2); flex-wrap: wrap; gap: 28px; }
.footer-left    { color: rgba(255,255,255,.35); font-size: 13px; line-height: 1.7; }
.footer-cols    { display: flex; gap: 32px; flex-wrap: wrap; }
.footer-brand   { font-family: "Bebas Neue", sans-serif; font-size: 17px; color: var(--gold-mid); letter-spacing: 2px; display: block; margin-bottom: 4px; }
.f-col          { display: flex; flex-direction: column; gap: 5px; }
.f-col-head     { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: rgba(201,168,76,.7); margin-bottom: 3px; }
.f-col a        { color: rgba(255,255,255,.4); font-size: 13px; transition: color .2s; }
.f-col a:hover  { color: var(--gold-mid); }
.f-socials      { display: flex; gap: 8px; }
.f-soc-btn      { width: 38px; height: 38px; border-radius: 8px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.5); font-size: 14px; font-weight: 700; transition: all .2s; }
.f-soc-btn:hover { background: var(--gold-mid); color: var(--navy-dark); }


/* ============================================================
   15. SUB-PAGE CHROME — Hero, Breadcrumb, Page Body
   ============================================================ */

/* Sticky footer: page-body grows to fill space above footer */
.page-body      { display: flex; flex-direction: column; min-height: calc(100vh - 76px); }
.page-body > *  { flex: none; }

.page-hero {
  min-height: 300px;
  background: linear-gradient(160deg,var(--navy-dark) 0%,#1a3050 60%,#0f2238 100%);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  padding: 100px 80px 44px; position: relative; overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; top: 0; right: 0; width: 44%; height: 100%;
  clip-path: polygon(20% 0%,100% 0%,100% 100%,0% 100%); opacity: .15; pointer-events: none;
  background: url("https://images.unsplash.com/photo-1524712245354-2c4e5e7121c0?w=800&q=80") center/cover;
}
.page-hero h1   { font-family: "Bebas Neue", sans-serif; font-size: clamp(36px,6vw,64px); line-height: 1; color: #fff; margin-bottom: 10px; position: relative; z-index: 1; }
.page-hero p    { color: rgba(255,255,255,.65); font-family: "Playfair Display", serif; font-style: italic; font-size: 16px; max-width: 520px; line-height: 1.6; position: relative; z-index: 1; }
.breadcrumb     { background: var(--off-white); border-bottom: 1px solid var(--mid); padding: 11px 80px; display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--text-light); flex-wrap: wrap; }
.breadcrumb a   { color: var(--gold); }
.breadcrumb a:hover { text-decoration: underline; }
.page-body      { padding: 60px 80px; }


/* ============================================================
   16. PROSE & SIDEBAR LAYOUT
   ============================================================ */
.prose h2            { font-family: "Bebas Neue", sans-serif; font-size: 28px; color: var(--navy); margin: 32px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose p             { color: var(--text-mid); line-height: 1.85; font-size: 16px; margin-bottom: 14px; }
.prose p strong      { color: var(--navy); font-weight: 700; }
.prose em            { font-style: italic; }
.about-layout,
.film-layout         { display: grid; grid-template-columns: 1fr 270px; gap: 52px; align-items: start; }
.sidebar             { position: sticky; top: 96px; align-self: start; }
.sb-card             { background: var(--off-white); border: 1px solid var(--mid); border-radius: 12px; padding: 22px; margin-bottom: 18px; }
.sb-card h3          { font-family: "Bebas Neue", sans-serif; font-size: 18px; color: var(--navy); margin-bottom: 12px; padding-bottom: 9px; border-bottom: 2px solid var(--gold-mid); }
.sb-links            { list-style: none; }
.sb-links li         { border-bottom: 1px solid var(--mid); }
.sb-links li:last-child { border-bottom: none; }
.sb-links a          { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; font-size: 13px; color: var(--text-mid); transition: color .2s; }
.sb-links a:hover    { color: var(--gold); }
.sb-links a::after   { content: "→"; color: var(--gold-mid); }


/* ============================================================
   17. TEAM PAGE
   ============================================================ */
.team-hero-split     { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 560px; margin-bottom: 72px; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.12); }
.team-hero-img       { position: relative; overflow: hidden; min-height: 520px; background: linear-gradient(160deg,var(--navy-dark),#1a3050); }
.team-hero-img img   { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform .6s ease; }
.team-hero-split:hover .team-hero-img img { transform: scale(1.03); }
.team-img-overlay    { position: absolute; bottom: 0; left: 0; right: 0; padding: 32px; background: linear-gradient(to top,rgba(13,27,42,.85) 0%,transparent 100%); }
.team-img-fallback   { background: linear-gradient(135deg,var(--navy-dark) 0%,#1a3050 50%,#0f2238 100%); }
.team-hero-text      { display: flex; flex-direction: column; justify-content: center; padding: 56px 52px; background: var(--off-white); }
.team-section-title  { font-family: "Bebas Neue", sans-serif; font-size: clamp(32px,4vw,48px); color: var(--navy); line-height: 1; margin-bottom: 20px; }
.team-intro          { color: var(--text-mid); font-size: 16px; line-height: 1.8; margin-bottom: 32px; }
.team-enquiry-box    { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; background: var(--white); border: 1px solid var(--mid); border-left: 4px solid var(--gold-mid); border-radius: 10px; }
.team-enquiry-box strong { color: var(--navy); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; margin-bottom: 4px; }
.team-enquiry-box a  { color: var(--gold); font-size: 15px; font-weight: 600; }
.team-enquiry-box a:hover { text-decoration: underline; }
.team-enquiry-box span { color: var(--text-mid); font-size: 14px; }
.team-depts-section  { margin-top: 0; }
.team-card-grid      { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.team-profile-card   { display: flex; flex-direction: column; background: var(--white); border: 1.5px solid var(--mid); border-radius: 16px; overflow: hidden; transition: transform .3s, box-shadow .3s; cursor: default; }
.team-profile-card:hover { transform: translateY(-6px); box-shadow: 0 20px 56px rgba(0,0,0,.13); }
.tpc-dept    { background: var(--white); color: var(--gold-mid); font-family: "Bebas Neue", sans-serif; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; padding: 16px 18px 12px; border-bottom: 1px solid var(--mid); line-height: 1.2; }
.tpc-inner   { display: flex; flex-direction: column; flex: 1; margin: 14px; border: 1.5px solid var(--gold-mid); border-radius: 12px; overflow: hidden; }
.tpc-photo-wrap { position: relative; width: 100%; aspect-ratio: 3/4; background: linear-gradient(160deg,#e8e8e8 0%,#d0d0d0 100%); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.tpc-photo-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform .5s ease; }
.team-profile-card:hover .tpc-photo-wrap img { transform: scale(1.04); }
.tpc-initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: "Bebas Neue", sans-serif; font-size: 48px; letter-spacing: 2px; color: var(--white); background: linear-gradient(135deg,var(--navy),var(--gold-mid)); }
.tpc-info    { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 14px 20px; background: var(--white); border-top: 1px solid var(--mid); }
.tpc-role    { display: block; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-light); font-weight: 600; margin-bottom: 6px; line-height: 1.4; }
.tpc-name    { display: block; font-family: "Bebas Neue", sans-serif; font-size: 20px; color: var(--navy); letter-spacing: .5px; line-height: 1.1; }


/* ============================================================
   18. ABOUT PAGE — OUR PEOPLE
   ============================================================ */
.about-people-split         { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--off-white); border: 1px solid var(--mid); border-radius: 20px; overflow: hidden; margin: 8px 0 32px; box-shadow: 0 6px 32px rgba(0,0,0,.07); min-height: 400px; }
.about-people-img           { position: relative; overflow: hidden; min-height: 380px; background: linear-gradient(160deg,var(--navy-dark),#1a3050); border-radius: 16px; margin: 16px; }
.about-people-img img       { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; border-radius: 16px; transition: transform .6s ease; }
.about-people-split:hover .about-people-img img { transform: scale(1.03); }
.about-people-fallback      { background: linear-gradient(135deg,var(--navy-dark) 0%,#1a3050 50%,#0f2238 100%); }
.about-people-overlay       { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px 22px; background: linear-gradient(to top,rgba(13,27,42,.85) 0%,transparent 60%); border-radius: 0 0 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.about-people-municipality  { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold-mid); font-weight: 600; }
.about-people-org           { font-family: "Bebas Neue", sans-serif; font-size: 26px; color: var(--white); letter-spacing: 1px; line-height: 1; }
.about-people-text          { display: flex; flex-direction: column; justify-content: center; padding: 48px 44px; }
.about-people-heading       { font-family: "Bebas Neue", sans-serif; font-size: clamp(34px,4vw,52px); color: var(--navy); line-height: 1; margin-bottom: 20px; margin-top: 6px; }
.about-people-desc          { color: var(--text-mid); font-size: 16px; line-height: 1.8; margin-bottom: 28px; }
.about-enquiry-box          { display: flex; flex-direction: column; gap: 5px; padding: 20px 22px; background: var(--white); border: 1px solid var(--mid); border-left: 4px solid var(--gold-mid); border-radius: 10px; }
.about-enquiry-label        { display: block; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-light); font-weight: 700; margin-bottom: 6px; }
.about-enquiry-box a        { color: var(--gold); font-size: 15px; font-weight: 700; }
.about-enquiry-box a:hover  { text-decoration: underline; }
.about-enquiry-box span     { color: var(--text-mid); font-size: 14px; }


/* ============================================================
   19. LOCATIONS CATEGORY GRID PAGE (pages/locations.html)
   ============================================================ */
.loc-cat-intro          { max-width: 720px; margin-bottom: 40px; }
.loc-cat-intro p        { color: var(--text-mid); font-size: 16px; line-height: 1.75; }
.loc-cat-grid           { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 60px; }
.loc-cat-card           { position: relative; display: block; border-radius: 10px; overflow: hidden; height: 300px; cursor: pointer; text-decoration: none; background: var(--navy-dark); }
.loc-cat-img            { position: absolute; inset: 0; }
.loc-cat-img img        { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .5s ease, filter .5s ease; filter: brightness(.75); }
.loc-cat-card:hover .loc-cat-img img { transform: scale(1.05); filter: brightness(.6); }
.loc-cat-overlay        { position: absolute; inset: 0; background: linear-gradient(to top,rgba(0,0,0,.70) 0%,rgba(0,0,0,.25) 45%,transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 24px 22px; transition: background .3s ease; }
.loc-cat-card:hover .loc-cat-overlay { background: linear-gradient(to top,rgba(0,0,0,.80) 0%,rgba(0,0,0,.35) 55%,transparent 100%); }
.loc-cat-title          { font-family: "DM Sans", sans-serif; font-size: 22px; font-weight: 600; color: #fff; line-height: 1.25; margin-bottom: 10px; letter-spacing: -.2px; }
.loc-cat-link           { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-mid); transition: color .2s, letter-spacing .2s; }
.loc-cat-card:hover .loc-cat-link { color: var(--gold-light); letter-spacing: 2.5px; }
.loc-cat-cta            { text-align: center; padding: 48px 0 0; }
.loc-cat-cta h2         { font-family: "Bebas Neue", sans-serif; font-size: 36px; color: var(--navy); margin-bottom: 12px; }
.loc-cat-cta p          { color: var(--text-mid); font-size: 16px; margin-bottom: 24px; }


/* ============================================================
   20. LOCATION SUB-PAGES — Gallery, Lightbox & Sticky Footer
       (pages/locations/*.html)
   ============================================================ */

/* Sticky footer fix — only on location sub-pages via .loc-sub-hero class presence */
.loc-sub-hero ~ .page-body { flex: 1; }

/* Sub-page hero with cover image */
.loc-sub-hero               { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; position: relative; }
.loc-sub-hero-overlay       { position: absolute; inset: 0; background: linear-gradient(160deg,rgba(13,27,42,.75) 0%,rgba(13,27,42,.45) 100%); z-index: 0; }
.loc-sub-hero h1,
.loc-sub-hero p             { position: relative; z-index: 1; }

/* Intro text */
.loc-sub-intro              { max-width: 720px; margin-bottom: 36px; }
.loc-sub-intro p            { color: var(--text-mid); font-size: 16px; line-height: 1.75; }

/* Sub-location section heading */
.loc-sub-section            { font-family: "Bebas Neue", sans-serif; font-size: 26px; color: var(--navy); margin: 44px 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--gold-mid); }
.loc-sub-section:first-of-type { margin-top: 0; }

/* Gallery grid */
.loc-sub-gallery            { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 48px; }

/* Photo card */
.loc-sub-photo              { position: relative; border-radius: 10px; overflow: hidden; background: var(--off-white); border: 1px solid var(--mid); cursor: pointer; transition: transform .3s, box-shadow .3s; }
.loc-sub-photo:hover        { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,0,0,.15); }
.loc-sub-photo img          { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform .4s ease; pointer-events: none; }
.loc-sub-photo:hover img    { transform: scale(1.04); }
.loc-sub-photo::after       { content: ''; position: absolute; inset: 0; background: rgba(13,27,42,.25); opacity: 0; transition: opacity .2s; border-radius: 10px; }
.loc-sub-photo:hover::after { opacity: 1; }
.loc-sub-photo-zoom         { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; background: rgba(0,0,0,.55); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; opacity: 0; transition: opacity .2s; z-index: 2; pointer-events: none; }
.loc-sub-photo:hover .loc-sub-photo-zoom { opacity: 1; }
.loc-sub-photo-caption      { padding: 10px 13px; font-size: 13px; color: var(--text-mid); border-top: 1px solid var(--mid); background: var(--white); line-height: 1.4; }

/* CTA strip */
.loc-sub-cta                { padding: 16px 0 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.loc-sub-cta p              { color: var(--text-mid); font-size: 15px; margin: 0; }

/* Lightbox overlay */
#dfo-lightbox               { display: none; position: fixed; inset: 0; z-index: 99999; align-items: center; justify-content: center; }
#dfo-lightbox.lb-open       { display: flex; }
.lb-backdrop                { position: absolute; inset: 0; background: rgba(0,0,0,.93); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.lb-stage                   { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 70px 90px; }
.lb-img-wrap                { display: flex; flex-direction: column; align-items: center; max-width: 88vw; max-height: 84vh; }
.lb-img                     { max-width: 100%; max-height: 76vh; object-fit: contain; border-radius: 8px; box-shadow: 0 24px 80px rgba(0,0,0,.6); display: block; transition: opacity .2s; }
#dfo-lightbox.lb-loading .lb-img { opacity: 0; }
.lb-caption                 { margin-top: 14px; color: rgba(255,255,255,.65); font-size: 14px; text-align: center; max-width: 600px; line-height: 1.5; min-height: 20px; }
.lb-counter                 { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.45); font-size: 12px; letter-spacing: 2px; }
.lb-close                   { position: absolute; top: 14px; right: 18px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; z-index: 2; }
.lb-close:hover             { background: rgba(255,255,255,.25); }
.lb-prev, .lb-next          { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; width: 54px; height: 54px; border-radius: 50%; font-size: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, transform .2s; z-index: 2; }
.lb-prev                    { left: 18px; }
.lb-next                    { right: 18px; }
.lb-prev:hover              { background: rgba(255,255,255,.22); transform: translateY(-50%) scale(1.08); }
.lb-next:hover              { background: rgba(255,255,255,.22); transform: translateY(-50%) scale(1.08); }
#dfo-lightbox.lb-loading::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 42px; height: 42px; border: 3px solid rgba(255,255,255,.15); border-top-color: var(--gold-mid); border-radius: 50%; animation: lb-spin .7s linear infinite; z-index: 2; }
@keyframes lb-spin          { to { transform: translate(-50%,-50%) rotate(360deg); } }
.lb-dots                    { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; }
.lb-dot                     { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.3); cursor: pointer; transition: background .2s, transform .2s; border: none; padding: 0; }
.lb-dot.active              { background: var(--gold-mid); transform: scale(1.3); }


/* ============================================================
   21. CREW DIRECTORY PAGE
   ============================================================ */
.search-bar           { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.search-bar input,
.search-bar select    { background: var(--off-white); border: 1.5px solid var(--mid); color: var(--text); padding: 12px 15px; border-radius: 8px; font-size: 14px; outline: none; transition: border-color .2s; font-family: "DM Sans", sans-serif; flex: 1; min-width: 140px; }
.search-bar input:focus { border-color: var(--gold-mid); }
.search-bar button    { background: var(--navy); color: #fff; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; letter-spacing: 1px; text-transform: uppercase; font-family: "DM Sans", sans-serif; }
.search-bar button:hover { background: var(--navy-dark); }
.tag-filters          { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 36px; }
.tag, .f-tag          { padding: 7px 17px; border-radius: 20px; border: 1.5px solid var(--mid); color: var(--text-mid); font-size: 13px; cursor: pointer; background: none; font-family: "DM Sans", sans-serif; transition: all .2s; }
.tag:hover, .tag.active,
.f-tag:hover, .f-tag.active { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.crew-grid            { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.crew-card            { background: #fff; border: 1px solid var(--mid); border-radius: 12px; padding: 26px; transition: transform .3s, box-shadow .3s; }
.crew-card:hover      { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,0,0,.09); }
.crew-avatar          { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg,var(--navy),var(--gold-mid)); display: flex; align-items: center; justify-content: center; font-family: "Bebas Neue", sans-serif; font-size: 22px; color: #fff; margin-bottom: 14px; }
.crew-card h3         { font-family: "Bebas Neue", sans-serif; font-size: 20px; color: var(--navy); margin-bottom: 4px; }
.crew-role            { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 10px; display: block; }
.crew-card p          { font-size: 14px; color: var(--text-mid); line-height: 1.6; margin-bottom: 14px; }
.crew-tags-list       { display: flex; gap: 6px; flex-wrap: wrap; }
.crew-skill           { background: var(--off-white); border: 1px solid var(--mid); padding: 4px 10px; border-radius: 4px; font-size: 11px; color: var(--text-mid); }
.register-cta         { background: var(--navy-dark); border-radius: 14px; padding: 48px; text-align: center; margin-top: 48px; }
.register-cta h2      { font-family: "Bebas Neue", sans-serif; font-size: 36px; color: #fff; margin-bottom: 10px; }
.register-cta p       { color: rgba(255,255,255,.6); max-width: 480px; margin: 0 auto 22px; line-height: 1.7; }


/* ============================================================
   22. DEVELOPMENT PROGRAMMES PAGE
   ============================================================ */
.prog-overview        { background: var(--off-white); border: 1px solid var(--mid); border-radius: 12px; padding: 32px 36px; margin-bottom: 44px; }
.prog-overview h2     { font-family: "Bebas Neue", sans-serif; font-size: 26px; color: var(--navy); margin-bottom: 12px; }
.prog-overview p      { color: var(--text-mid); line-height: 1.75; font-size: 16px; margin-bottom: 10px; }
.prog-overview ul     { color: var(--text-mid); padding-left: 20px; line-height: 1.85; font-size: 15px; }
.prog-cards           { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-bottom: 44px; }
.prog-card            { border-radius: 12px; overflow: hidden; border: 1px solid var(--mid); background: #fff; display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; }
.prog-card:hover      { transform: translateY(-4px); box-shadow: 0 18px 48px rgba(0,0,0,.1); }
.prog-card-head       { background: var(--navy-dark); padding: 24px; display: flex; align-items: center; gap: 14px; }
.prog-card-head .ico  { font-size: 32px; }
.prog-card-head h3    { font-family: "Bebas Neue", sans-serif; font-size: 22px; color: #fff; line-height: 1.1; }
.prog-card-head .amount { font-size: 12px; color: var(--gold-mid); font-weight: 700; margin-top: 3px; }
.prog-card-body       { padding: 26px; flex: 1; display: flex; flex-direction: column; }
.prog-card-body p     { color: var(--text-mid); font-size: 14px; line-height: 1.7; margin-bottom: 12px; flex: 1; }
.prog-card-body ul    { color: var(--text-mid); font-size: 13px; padding-left: 16px; line-height: 1.8; margin-bottom: 16px; }
.dates                { background: var(--off-white); border-radius: 8px; padding: 13px 15px; margin-bottom: 16px; font-size: 13px; color: var(--text-mid); line-height: 1.7; }
.dates strong         { color: var(--navy); display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.apply-strip          { background: var(--navy-dark); border-radius: 12px; padding: 44px; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
.apply-strip h2       { font-family: "Bebas Neue", sans-serif; font-size: 34px; color: #fff; margin-bottom: 8px; }
.apply-strip p        { color: rgba(255,255,255,.6); font-size: 15px; line-height: 1.6; }


/* ============================================================
   23. NEWS PAGE
   ============================================================ */
.news-layout-page     { display: grid; grid-template-columns: 1fr 290px; gap: 44px; align-items: start; }
.news-list-page       { display: flex; flex-direction: column; gap: 24px; }
.news-article         { background: #fff; border: 1px solid var(--mid); border-radius: 12px; overflow: hidden; transition: transform .3s, box-shadow .3s; }
.news-article:hover   { transform: translateY(-3px); box-shadow: 0 10px 36px rgba(0,0,0,.09); }
.news-article-img     { height: 190px; background: linear-gradient(135deg,var(--navy),#1a3050); display: flex; align-items: center; justify-content: center; font-size: 52px; }
.news-article-body    { padding: 24px; }
.news-tag             { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.news-article-body h2 { font-family: "Bebas Neue", sans-serif; font-size: 26px; color: var(--navy); margin: 8px 0 10px; line-height: 1.1; }
.news-article-body p  { color: var(--text-mid); font-size: 15px; line-height: 1.7; margin-bottom: 14px; }
.news-date            { font-size: 12px; color: #bbb; }
.read-more            { display: inline-block; color: var(--gold); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; border-bottom: 1.5px solid var(--gold); padding-bottom: 2px; transition: opacity .2s; }
.read-more:hover      { opacity: .65; }
.news-sidebar         { position: sticky; top: 96px; }
.sidebar-card         { background: var(--off-white); border: 1px solid var(--mid); border-radius: 12px; padding: 22px; margin-bottom: 18px; }
.sidebar-card h3      { font-family: "Bebas Neue", sans-serif; font-size: 18px; color: var(--navy); margin-bottom: 14px; padding-bottom: 9px; border-bottom: 2px solid var(--gold-mid); }
.sidebar-link         { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--mid); font-size: 14px; color: var(--text-mid); transition: color .2s; }
.sidebar-link:last-child { border-bottom: none; }
.sidebar-link:hover   { color: var(--gold); }
.sidebar-link::after  { content: "→"; color: var(--gold-mid); }
.tag-cloud            { display: flex; flex-wrap: wrap; gap: 8px; }
.news-tag-btn         { padding: 6px 14px; border-radius: 20px; border: 1.5px solid var(--mid); color: var(--text-mid); font-size: 12px; cursor: pointer; background: none; transition: all .2s; font-family: "DM Sans", sans-serif; }
.news-tag-btn:hover,
.news-tag-btn.active  { background: var(--navy); border-color: var(--navy); color: #fff; }


/* ============================================================
   24. CONTACT PAGE
   ============================================================ */
.contact-form-card    { background: #fff; border-radius: 14px; padding: 36px; border: 1px solid var(--mid); box-shadow: 0 6px 32px rgba(0,0,0,.07); }
.contact-form-card h3 { font-family: "Bebas Neue", sans-serif; font-size: 26px; color: var(--navy); margin-bottom: 20px; }
.form-row             { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fg                   { margin-bottom: 14px; }
.fg label             { display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-light); margin-bottom: 5px; font-weight: 600; }
.fg input, .fg textarea, .fg select { width: 100%; background: var(--off-white); border: 1.5px solid var(--mid); color: var(--text); padding: 11px 13px; border-radius: 7px; font-size: 14px; outline: none; transition: border-color .2s; font-family: "DM Sans", sans-serif; }
.fg input:focus, .fg textarea:focus { border-color: var(--gold-mid); }
.fg textarea          { min-height: 110px; resize: vertical; }
.chk                  { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 10px; }
.chk input            { accent-color: var(--gold); margin-top: 3px; flex-shrink: 0; }
.chk label            { font-size: 13px; color: var(--text-mid); }
.map-placeholder      { margin-top: 36px; background: var(--off-white); border: 1px solid var(--mid); border-radius: 12px; height: 220px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; color: var(--text-light); }
.map-placeholder span { font-size: 36px; }
.map-placeholder p    { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }


/* ============================================================
   25. FAQs PAGE
   ============================================================ */
.faq-layout           { display: grid; grid-template-columns: 1fr 240px; gap: 44px; align-items: start; }
.faq-group            { margin-bottom: 32px; }
.faq-group h2         { font-family: "Bebas Neue", sans-serif; font-size: 24px; color: var(--navy); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid var(--gold-mid); }
details               { background: #fff; border: 1px solid var(--mid); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
details:hover         { box-shadow: 0 3px 14px rgba(0,0,0,.07); }
details[open]         { box-shadow: 0 4px 18px rgba(0,0,0,.09); }
summary               { padding: 15px 18px; cursor: pointer; font-weight: 600; font-size: 15px; color: var(--navy); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
summary::-webkit-details-marker { display: none; }
summary::after        { content: "+"; font-size: 20px; color: var(--gold-mid); flex-shrink: 0; }
details[open] summary::after { content: "−"; }
.faq-ans              { padding: 0 18px 16px; color: var(--text-mid); font-size: 15px; line-height: 1.75; }
.faq-ans a            { color: var(--gold); }


/* ============================================================
   26. FILMOGRAPHY PAGE
   ============================================================ */
.film-intro           { max-width: 700px; margin-bottom: 36px; }
.film-intro p         { color: var(--text-mid); font-size: 16px; line-height: 1.7; }
.filter-bar           { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.year-section         { margin-bottom: 40px; }
.year-heading         { font-family: "Bebas Neue", sans-serif; font-size: 38px; color: var(--navy); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--gold-mid); display: flex; align-items: center; gap: 14px; }
.year-heading span    { font-size: 13px; font-family: "DM Sans", sans-serif; color: var(--text-light); letter-spacing: 2px; text-transform: uppercase; font-weight: 400; }
.cat-section          { margin-bottom: 24px; }
.cat-title            { font-family: "Bebas Neue", sans-serif; font-size: 18px; color: var(--gold); letter-spacing: 1px; margin-bottom: 8px; }
table                 { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid var(--mid); }
th                    { background: var(--navy); color: rgba(255,255,255,.85); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; padding: 9px 15px; text-align: left; font-family: "DM Sans", sans-serif; }
td                    { padding: 9px 15px; font-size: 14px; color: var(--text-mid); border-bottom: 1px solid var(--mid); }
tr:last-child td      { border-bottom: none; }
tr:nth-child(even) td { background: var(--off-white); }



/* ============================================================
   ABOUT PAGE — PARTNERS & STAKEHOLDERS
   ============================================================ */
.partners-row   { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ptag           { background: #fff; border: 1px solid var(--mid); padding: 8px 16px; border-radius: 40px; font-size: 13px; color: var(--navy); font-weight: 500; transition: all .2s; }
.ptag:hover     { border-color: var(--gold-mid); color: var(--gold); }


/* ============================================================
   HOMEPAGE — FILMOGRAPHY SCROLL (Made in Durban)
   ============================================================ */
#filmography    { background: var(--white); }
.film-scroll    { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-top: 36px; }
.film-card      { height: 265px; border-radius: 10px; overflow: hidden; position: relative; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.12); transition: transform .3s; }
.film-card:hover { transform: scale(1.04); }
.film-card img  { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-lbl       { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,.85), transparent); padding: 18px 12px 9px; font-family: "Bebas Neue", sans-serif; font-size: 14px; letter-spacing: 1px; color: var(--white); }


/* ============================================================
   HOMEPAGE — PARTNERS & STAKEHOLDERS SCROLL
   ============================================================ */
#partners       { background: var(--off-white); }
.partners-scroll { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-top: 36px; }
.partners-card  { height: 265px; border-radius: 10px; overflow: hidden; position: relative; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.12); transition: transform .3s; }
.partners-card:hover { transform: scale(1.04); }
.partners-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.partners-lbl   { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,.85), transparent); padding: 18px 12px 9px; font-family: "Bebas Neue", sans-serif; font-size: 14px; letter-spacing: 1px; color: var(--white); }



/* ── HOMEPAGE — Partner logo cards (extends .film-card) ── */
.partner-card {
  text-decoration: none;
  background: var(--white);
  display: flex;
  flex-direction: column;
}
.partner-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;        /* show full logo, no crop */
  object-position: center;
  padding: 24px;
  background: var(--white);
  transition: transform .3s ease;
}
.partner-card:hover img { transform: scale(1.06); }

/* Initials / name fallback shown when logo image is missing */
.partner-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background: linear-gradient(135deg, var(--navy), #1a3050);
  font-family: "Bebas Neue", sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--white);
  line-height: 1.3;
}

/* ============================================================
   27. RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 1200px) {
  .team-card-grid { grid-template-columns: repeat(4,1fr); gap: 16px; }
}

@media (max-width: 960px) {
  /* Global */
  section     { padding: 52px 24px; }
  footer      { padding: 36px 24px; flex-direction: column; gap: 20px; }

  /* Homepage */
  #about > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  #about div[style*="padding:64px"]            { padding: 36px 24px !important; }
  #development .reveal[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  #development div[style*="padding:64px"]      { padding: 36px 24px !important; }
  .loc-grid   { grid-template-columns: 1fr; }
  .loc-card:first-child { grid-column: span 1; height: 280px; }
  .news-layout { grid-template-columns: 1fr; gap: 36px; }
  .contact-grid { grid-template-columns: 1fr; }
  .hero-ql    { gap: 8px; }
  .ql-card    { flex: 1 1 calc(50% - 8px); min-width: 120px; }
  .steps      { gap: 16px; }
  .step::after { display: none; }

  /* Sub-pages */
  .page-hero  { padding: 88px 24px 36px; min-height: 220px; }
  .breadcrumb { padding: 11px 24px; }
  .page-body  { padding: 36px 24px; }
  .about-layout, .film-layout { grid-template-columns: 1fr; }
  .sidebar    { position: static; }
  .faq-layout { grid-template-columns: 1fr; }
  .news-layout-page { grid-template-columns: 1fr; }
  .news-sidebar { position: static; }
  .contact-form-card { padding: 24px 20px; }
  .form-row   { grid-template-columns: 1fr; }
  .prog-cards { grid-template-columns: 1fr; }
  .apply-strip { grid-template-columns: 1fr; padding: 28px 20px; }
  .crew-grid  { grid-template-columns: 1fr; }

  /* Team */
  .team-hero-split { grid-template-columns: 1fr; min-height: auto; margin-bottom: 48px; }
  .team-hero-img   { min-height: 320px; }
  .team-hero-text  { padding: 36px 28px; }
  .team-card-grid  { grid-template-columns: repeat(2,1fr); gap: 16px; }

  /* About */
  .about-people-split { grid-template-columns: 1fr; min-height: auto; }
  .about-people-img   { min-height: 300px; margin: 12px 12px 0; }
  .about-people-text  { padding: 32px 24px; }

  /* Locations */
  .loc-cat-grid    { grid-template-columns: 1fr 1fr; gap: 14px; }
  .loc-cat-card    { height: 240px; }
  .loc-sub-gallery { grid-template-columns: repeat(2,1fr); }
  .loc-sub-cta     { flex-direction: column; align-items: flex-start; }

  /* Lightbox */
  .lb-stage  { padding: 60px 12px 48px; }
  .lb-prev   { left: 6px;  width: 42px; height: 42px; font-size: 22px; }
  .lb-next   { right: 6px; width: 42px; height: 42px; font-size: 22px; }
  .lb-img    { max-height: 68vh; }
}

@media (max-width: 600px) {
  .hero-title   { font-size: 42px; }
  .loc-cat-grid { grid-template-columns: 1fr; gap: 12px; }
  .loc-cat-card { height: 220px; }
  .loc-cat-title { font-size: 20px; }
  .loc-sub-gallery { grid-template-columns: 1fr; gap: 10px; }
  .team-card-grid  { grid-template-columns: repeat(2,1fr); gap: 12px; }
  .tpc-name   { font-size: 17px; }
  .tpc-dept   { font-size: 11px; padding: 12px 14px 10px; }
  .team-hero-text { padding: 28px 20px; }
}


/* ============================================================
   28. HOMEPAGE — MADE IN DURBAN FILMOGRAPHY SECTION
   ============================================================ */
#filmography          { background: var(--white); }
.film-scroll          { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-top: 36px; }
.film-card            { border-radius: 10px; overflow: hidden; position: relative; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.12); transition: transform .3s; aspect-ratio: 2/3; background: var(--navy); }
.film-card:hover      { transform: scale(1.04); }
.film-card img        { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-lbl             { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top,rgba(0,0,0,.85),transparent); padding: 18px 12px 9px; font-family: "Bebas Neue", sans-serif; font-size: 14px; letter-spacing: 1px; color: var(--white); }
.film-sub-lbl         { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-mid); display: block; margin-bottom: 3px; font-family: "DM Sans", sans-serif; font-weight: 600; }


/* ============================================================
   29. HOMEPAGE — PARTNERS & STAKEHOLDERS SECTION
   ============================================================ */
#partners             { background: var(--white); }
.partners-grid        { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ptag                 { display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 1.5px solid var(--mid); padding: 11px 20px; border-radius: 40px; font-size: 14px; color: var(--navy); font-weight: 600; transition: all .25s; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.ptag:hover           { border-color: var(--gold-mid); color: var(--gold); box-shadow: 0 4px 16px rgba(201,168,76,.2); transform: translateY(-2px); }
.ptag::before         { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-mid); flex-shrink: 0; }

/* About page partners row (prose layout) */
.partners-row         { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }