*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --blue: #2b55d6; --lime: #c8ea5a;
  --teal: #7abece; --offwhite: #F0EDE6;
  --dark: #0D0D0D; --dark2: #111111; --mid: #1A1A1A; --card: #1E1E1E;
  --font: 'Syne', sans-serif;
}
html { scroll-behavior: smooth; }
body { background: var(--dark); color: var(--offwhite); font-family: var(--font); overflow-x: hidden; }

nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 1rem 3rem; background: rgba(13,13,13,0.88); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,0.06); }
.nav-logo img { height: 36px; width: auto; display: block; transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1); }
.nav-logo:hover img { transform: scale(1.15) rotate(-4deg); }
.nav-links { display: flex; gap: 2.5rem; list-style: none; }
.nav-links a { font-family: var(--font); font-size: 0.8rem; letter-spacing: 0.06em; color: rgba(240,237,230,0.55); text-decoration: none; transition: color 0.2s; }
.nav-links a:hover { color: var(--lime); }
.nav-cta { font-family: var(--font); font-size: 0.8rem; background: var(--blue); color: #fff; border: none; padding: 0.6rem 1.4rem; border-radius: 100px; cursor: pointer; text-decoration: none; transition: background 0.2s; }
.nav-cta:hover { background: var(--lime); color: var(--dark); }

.page-hero { padding: 10rem 3rem 6rem; background: var(--dark); }
.page-hero-eyebrow { font-size: 0.68rem; letter-spacing: 0.2em; color: var(--lime); margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.8rem; }
.page-hero-eyebrow::before { content: ''; display: block; width: 2rem; height: 1px; background: var(--lime); }
.page-hero h1 { font-size: clamp(3rem, 7vw, 6.5rem); font-weight: 400; line-height: 1.0; letter-spacing: 0.02em; color: var(--offwhite); margin-bottom: 1.5rem; max-width: 900px; }
.page-hero h1 em { font-style: normal; color: var(--blue); }
.page-hero-sub { font-size: 1.05rem; line-height: 1.8; color: rgba(240,237,230,0.5); max-width: 620px; }

.content-wrap { max-width: 820px; margin: 0 auto; padding: 5rem 3rem; }
.content-wrap h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 400; letter-spacing: 0.04em; color: var(--offwhite); margin: 3rem 0 1.2rem; }
.content-wrap h2:first-child { margin-top: 0; }
.content-wrap h3 { font-size: 1.2rem; font-weight: 400; letter-spacing: 0.06em; color: var(--lime); margin: 2rem 0 0.8rem; }
.content-wrap p { font-size: 0.95rem; line-height: 1.9; color: rgba(240,237,230,0.6); margin-bottom: 1.4rem; }
.content-wrap p strong { color: var(--offwhite); font-weight: 700; }
.content-wrap ul { margin: 0 0 1.4rem 1.2rem; }
.content-wrap ul li { font-size: 0.95rem; line-height: 1.9; color: rgba(240,237,230,0.6); margin-bottom: 0.4rem; }
.content-wrap ul li strong { color: var(--offwhite); }

.cta-band { background: var(--blue); padding: 5rem 3rem; text-align: center; }
.cta-band h2 { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 400; color: var(--offwhite); margin-bottom: 1rem; letter-spacing: 0.04em; }
.cta-band p { font-size: 0.95rem; color: rgba(240,237,230,0.7); margin-bottom: 2rem; }
.cta-band a { display: inline-block; background: var(--lime); color: var(--dark); font-family: var(--font); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; padding: 1rem 2.5rem; border-radius: 4px; text-decoration: none; transition: transform 0.2s; }
.cta-band a:hover { transform: translateY(-2px); }

.faq-item { border-top: 1px solid rgba(255,255,255,0.07); padding: 1.8rem 0; }
.faq-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.07); }
.faq-q { font-size: 1rem; font-weight: 700; color: var(--offwhite); margin-bottom: 0.8rem; letter-spacing: 0.02em; }
.faq-a { font-size: 0.92rem; line-height: 1.85; color: rgba(240,237,230,0.55); }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 3rem 0; }
.stat-card { background: var(--card); padding: 2rem; text-align: center; }
.stat-num { font-size: 3rem; font-weight: 400; color: var(--blue); letter-spacing: 0.02em; display: block; }
.stat-label { font-size: 0.72rem; letter-spacing: 0.15em; color: rgba(240,237,230,0.4); margin-top: 0.4rem; display: block; }

footer { background: var(--dark2); border-top: 1px solid rgba(255,255,255,0.05); padding: 2rem 3rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.footer-logo img { height: 28px; width: auto; opacity: 0.35; }
.footer-links { display: flex; gap: 2rem; list-style: none; }
.footer-links a { font-size: 0.65rem; letter-spacing: 0.08em; color: rgba(240,237,230,0.22); text-decoration: none; }
.footer-right { display: flex; align-items: center; gap: 1.5rem; }
.footer-social a { font-size: 0.65rem; letter-spacing: 0.1em; color: rgba(240,237,230,0.25); text-decoration: none; }
.footer-social a:hover { color: var(--lime); }
.footer-copy { font-size: 0.62rem; letter-spacing: 0.06em; color: rgba(240,237,230,0.18); }

/* ── MOBILE STYLES ── */

/* Hamburger menu */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--offwhite);
  transition: transform 0.3s, opacity 0.3s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-mobile-menu {
  display: none;
  position: fixed;
  top: 65px;
  left: 0; right: 0;
  background: rgba(13,13,13,0.97);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 1.5rem 2rem 2rem;
  z-index: 199;
  flex-direction: column;
  gap: 0;
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-menu a {
  font-family: var(--font);
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  color: rgba(240,237,230,0.7);
  text-decoration: none;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: color 0.2s;
}
.nav-mobile-menu a:hover { color: var(--lime); }
.nav-mobile-menu .mobile-cta {
  margin-top: 1.2rem;
  background: var(--blue);
  color: #fff;
  padding: 0.9rem 1.5rem;
  border-radius: 100px;
  text-align: center;
  font-weight: 700;
  border-bottom: none;
}
.nav-mobile-menu .mobile-cta:hover { background: var(--lime); color: var(--dark); }

@media (max-width: 768px) {

  /* NAV */
  nav { padding: 1rem 1.5rem; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-hamburger { display: flex; }

  /* HOMEPAGE HERO */
  .hero { padding: 0 1.5rem 3rem; min-height: 100svh; }
  .hero-headline { font-size: clamp(3rem, 14vw, 5rem); }
  .hero-bottom { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .hero-sub { max-width: 100%; }
  .orb-3 { display: none; }

  /* MARQUEE */
  .marquee-item { font-size: 1.1rem; padding: 0 1.5rem; }
  .work-view-all { padding: 0 1.5rem; }

  /* WORK GRID */
  .section-work { padding: 2rem 1.5rem 4rem; }
  .work-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  .work-item:first-child {
    grid-row: auto !important;
    grid-column: auto !important;
  }
  .work-item:nth-child(2),
  .work-item:nth-child(3),
  .work-item:nth-child(4) {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .work-photo, .img-placeholder { min-height: 220px; }

  /* SERVICES SECTION (homepage) */
  .section-services { padding: 4rem 1.5rem; }
  .services-grid { grid-template-columns: 1fr !important; }
  .service-card { padding: 2rem 1.5rem; }

  /* FEATURE SECTION */
  .feature-inner { grid-template-columns: 1fr; }
  .feature-visual { min-height: 260px; }
  .feature-content { padding: 2.5rem 1.5rem; }
  .feature-video-wrap { margin-bottom: 1.2rem; }
  .sbs-watch-row { justify-content: flex-start; }

  /* CLIENTS */
  .section-clients { padding: 3.5rem 1.5rem; }
  .clients-row { gap: 2rem; }
  .client-name { font-size: 0.75rem; }

  /* ACKNOWLEDGEMENT */
  .section-country { padding: 4rem 1.5rem; }

  /* CONTACT */
  .section-contact {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 5rem 1.5rem;
  }
  .contact-headline { font-size: clamp(2.5rem, 10vw, 4rem); }

  /* FOOTER */
  footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 2rem 1.5rem;
  }

  /* PAGE HERO (inner pages) */
  .page-hero { padding: 7rem 1.5rem 3.5rem; }
  .page-hero h1 { font-size: clamp(2.2rem, 9vw, 3.5rem); }

  /* RESOURCES GRID */
  .resource-grid { grid-template-columns: 1fr !important; }
  .resources-section { padding: 3rem 1.5rem 0; }
  .resource-card { padding: 1.8rem; }

  /* ABOUT HERO */
  .about-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero-image-col { min-height: 60vw; max-height: 420px; }
  .hero-headshot { width: 55%; }
  .hero-content-col { padding: 3rem 1.5rem; }
  .hero-intro-heading { font-size: clamp(1.6rem, 7vw, 2.5rem); }

  /* CREDENTIALS */
  .credentials-strip {
    grid-template-columns: 1fr 1fr;
    padding: 1.5rem;
  }
  .credential { padding: 1.5rem 1rem; }
  .credential-value { font-size: 1.4rem; }

  /* STORY SECTION */
  .story-section {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 4rem 1.5rem;
  }
  .story-left { position: static; }
  .story-image { aspect-ratio: 16/9; }
  .story-heading { font-size: clamp(2rem, 8vw, 3rem); }

  /* CAPABILITIES */
  .capabilities-section { padding: 4rem 1.5rem; }
  .capabilities-grid { grid-template-columns: 1fr; }
  .capability-card { padding: 2rem; }

  /* PHILOSOPHY */
  .philosophy-section { padding: 4rem 1.5rem; }
  .philosophy-quote { font-size: clamp(1.2rem, 5vw, 1.8rem); }

  /* ABOUT CTA */
  .cta-band {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 4rem 1.5rem;
  }
  .cta-left h2 { font-size: clamp(2rem, 8vw, 3.5rem); }

  /* SERVICES PAGE HERO */
  .about-hero.services-hero, .page-hero .hero-bg-text { display: none; }
  .hero-bg-text { display: none; }
  .hero-ctas { flex-direction: column; }
  .btn-primary, .btn-secondary { text-align: center; justify-content: center; }

  /* SERVICES ALTERNATING SECTIONS */
  .service-section {
    grid-template-columns: 1fr !important;
    direction: ltr !important;
    min-height: auto;
  }
  .service-section.reverse { direction: ltr !important; }
  .service-image { min-height: 240px; order: 0; }
  .service-section.reverse .service-image { order: 0; }
  .service-content { padding: 2.5rem 1.5rem; order: 1; }
  .service-section.reverse .service-content { padding: 2.5rem 1.5rem; order: 1; }
  .service-image-overlay { background: linear-gradient(to bottom, transparent 60%, var(--dark) 100%) !important; }

  /* PROCESS STRIP */
  .process-strip { padding: 4rem 1.5rem; }
  .process-steps { grid-template-columns: 1fr 1fr; }
  .process-step { padding: 1.8rem 1.2rem; }

  /* CLIENTS STRIP */
  .clients-strip { padding: 3rem 1.5rem; }

  /* SERVICES CTA */
  .cta-section {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 4rem 1.5rem;
  }
  .cta-left h2 { font-size: clamp(2rem, 8vw, 3.5rem); }

  /* SCREENING ROOM */
  .page-hero.screening { padding: 7rem 1.5rem 3rem; }
  .about-hero { min-height: auto; }
  .hero-text { padding: 7rem 1.5rem 2rem; }
  .hero-video { width: 100%; }
  .filter-bar { padding: 1.5rem 1.5rem 0; gap: 0.4rem; }
  .filter-btn { font-size: 0.65rem; padding: 0.4rem 0.8rem; }
  .video-grid-wrap { padding: 1.5rem 1.5rem 4rem; }
  .video-grid { grid-template-columns: 1fr !important; }
  .video-info { padding: 1rem 1.2rem 1.4rem; }

  /* CONTENT PAGES */
  .content-wrap { padding: 3.5rem 1.5rem; }
  .stat-row { grid-template-columns: 1fr; }
  .stat-card { padding: 1.5rem; }

  /* FILTER BAR */
  .filter-bar { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .hero-headline { font-size: clamp(2.6rem, 13vw, 4rem); }
  .process-steps { grid-template-columns: 1fr; }
  .credentials-strip { grid-template-columns: 1fr; }
  .hero-ctas { gap: 0.8rem; }
  nav { padding: 0.9rem 1.2rem; }
  .nav-logo img { height: 30px; }
}

/* Selectively apply lowercase only to headings, nav, labels, tags, buttons */
h1, h2, h3, h4,
nav, .nav-links a, .nav-cta, .nav-mobile-menu a,
.page-hero-eyebrow, .hero-eyebrow, .eyebrow,
.section-title, .section-link,
.service-tag, .service-name, .service-link, .service-cta,
.card-tag, .card-arrow,
.work-cat, .work-title,
.marquee-item,
.section-label, .clients-label,
.feature-eyebrow, .feature-heading,
.stat-label,
.step-title,
.filter-btn,
.video-cat, .video-title,
.credential-label,
.capability-icon, .capability-name,
.philosophy-label, .philosophy-attribution,
.cta-card-label, .cta-card-title, .cta-card-arrow,
.hero-image-tag .name, .hero-image-tag .role,
.story-label, .story-heading,
.footer-links a, .footer-social a, .footer-copy,
.faq-q,
.btn-primary, .btn-secondary,
.cta-btn-primary, .cta-btn-secondary,
.nav-hamburger,
button, .form-submit,
.service-includes-label,
.hero-label, .hero-cta,
.work-view-all,
.section-header,
.country-title,
.feature-visual-label, .feature-visual-title,
.feature-watch,
.sbs-watch-label,
.contact-headline,
.hero-scroll-hint span,
.resource-card .card-title,
.hero-intro-heading,
.process-step .step-title {
  text-transform: lowercase;
}

/* Body text — normal case, never lowercase */
p, li, .faq-a, .card-desc, .step-desc,
.service-body, .service-desc,
.hero-bio, .hero-sub, .hero-intro,
.story-right p, .capability-desc,
.page-hero-sub, .philosophy-quote,
.country-body, .content-wrap p, .content-wrap li,
.video-desc, .cta-card-desc,
.contact-sub, .feature-body,
.service-includes ul li,
.footer-copy,
input, textarea {
  text-transform: none;
}

/* Syne Bold for all headings */
h1, h2, h3, h4,
.hero-headline, .page-hero h1, .section-title,
.service-name, .feature-heading, .feature-film-title,
.contact-headline, .country-title, .story-heading,
.cta-left h2, .hero-intro-heading, .about-hero h1,
.card-title, .cta-card-title, .capability-name,
.step-title, .faq-q, .video-title, .credential-value,
.philosophy-quote {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
}

/* Syne Regular for body text */
p, li, .faq-a, .card-desc, .step-desc,
.service-body, .service-desc, .hero-bio,
.hero-sub, .hero-intro, .story-right p,
.capability-desc, .page-hero-sub, .country-body,
.content-wrap p, .content-wrap li,
.video-desc, .cta-card-desc, .contact-sub,
.feature-body, .service-includes ul li,
input, textarea, .form-input, .form-textarea {
  font-family: 'Syne', sans-serif;
  font-weight: 400;
}

/* Teal accents */
.service-card:nth-child(even) .service-accent,
.service-section:nth-child(even) .service-cta,
.resource-card:nth-child(even) .card-arrow {
  color: var(--teal);
}
.service-card:nth-child(even):hover {
  border-color: rgba(122,190,206,0.3);
}
.service-card:nth-child(even) .service-accent {
  background: var(--teal);
}
.hero-eyebrow::before,
.feature-eyebrow::before {
  background: var(--teal);
}
.scroll-line, .hero-scroll-hint .scroll-bar {
  background: linear-gradient(to bottom, rgba(122,190,206,0.6), transparent);
}

/* ── SHARED TYPE SCALE ── */
body {
  font-size: 1rem;
  line-height: 1.7;
}
p {
  font-size: 0.95rem;
  line-height: 1.9;
}
h1 { font-size: clamp(2.8rem, 6vw, 6rem); font-weight: 700; line-height: 1.0; letter-spacing: 0.01em; }
h2 { font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 700; line-height: 1.05; letter-spacing: 0.02em; }
h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 700; line-height: 1.2; }
li { font-size: 0.95rem; line-height: 1.85; }



/* Hero gradient - minimal, no new compositing context */
html { color-scheme: dark; }
.page-hero {
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(43,85,214,0.28) 0%, rgba(13,13,13,0) 60%),
    radial-gradient(ellipse 50% 40% at 20% 60%, rgba(200,234,90,0.10) 0%, rgba(13,13,13,0) 55%),
    var(--dark) !important;
}

/* footer acknowledgement + ABN */
.footer-ack { width: 100%; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 1.4rem; margin-top: 0.4rem; }
.footer-ack p { max-width: 680px; font-size: 0.68rem; line-height: 1.7; letter-spacing: 0.03em; color: rgba(240,237,230,0.30); text-transform: none; }
.footer-ack .footer-abn { margin-top: 0.8rem; font-size: 0.64rem; letter-spacing: 0.05em; color: rgba(240,237,230,0.22); }
.footer-ack a { color: inherit; text-decoration: none; }
.footer-ack a:hover { color: var(--lime); }

/* related articles */
.related { max-width: 760px; margin: 3rem auto 4rem; padding: 0 1.5rem; }
.related h2 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: lowercase; color: rgba(240,237,230,0.4); margin-bottom: 1.2rem; }
.related ul { list-style: none; display: grid; gap: 0.8rem; }
.related a { display: block; padding: 1rem 1.2rem; background: var(--card, #1E1E1E); border: 1px solid rgba(255,255,255,0.05); border-radius: 0.6rem; color: var(--offwhite, #F0EDE6); text-decoration: none; font-size: 0.85rem; font-weight: 700; text-transform: lowercase; transition: border-color 0.2s; }
.related a:hover { border-color: var(--lime, #c8ea5a); }

img:where([width][height]) { height: auto; }