/* =========================================================
   SITE-WIDE CANVA SOURCE OF TRUTH
   Matches locked homepage direction:
   - Black / cream / brown palette
   - Cormorant Garamond + Cormorant Garamond SC
   - Header/menu contained in 80% page width
   - Nav width: 90%, centered, evenly spaced
   - Nav -> SVG title: 10px
   - SVG title -> Director of Photography: 10px
   - Header -> content: approx. 30px
   ========================================================= */

:root {
  --sn-black: #000000;
  --sn-cream: #ffffe9;
  --sn-brown: #2a1b10;
  --sn-home-width: min(80vw, 1440px);
  --sn-nav-width: 90%;
  --sn-font-head: "Cormorant Garamond SC", "Cormorant Garamond", Georgia, serif;
  --sn-font-body: "Cormorant Garamond", Georgia, serif;
  --sn-muted-dark: rgba(255, 255, 233, 0.62);
  --sn-muted-light: rgba(42, 27, 16, 0.62);
  --sn-line-dark: rgba(255, 255, 233, 0.18);
  --sn-line-light: rgba(42, 27, 16, 0.18);
}

html,
body,
.site-shell,
.page-scope,
main {
  background: var(--sn-black) !important;
  color: var(--sn-cream) !important;
  font-family: var(--sn-font-body) !important;
}

body.light-mode,
body.light-mode .site-shell,
body.light-mode .page-scope,
body.light-mode main {
  background: var(--sn-cream) !important;
  color: var(--sn-brown) !important;
}

body:not(.light-mode) {
  --bg: var(--sn-black) !important;
  --bg-elevated: #050505 !important;
  --panel: rgba(0, 0, 0, 0.94) !important;
  --text: var(--sn-cream) !important;
  --text-strong: var(--sn-cream) !important;
  --text-muted: var(--sn-muted-dark) !important;
  --text-faint: rgba(255, 255, 233, 0.45) !important;
  --line: var(--sn-line-dark) !important;
  --line-strong: rgba(255, 255, 233, 0.32) !important;
  --card-bg: #070707 !important;
}

body.light-mode {
  --bg: var(--sn-cream) !important;
  --bg-elevated: #fff9d8 !important;
  --panel: rgba(255, 255, 233, 0.95) !important;
  --text: var(--sn-brown) !important;
  --text-strong: var(--sn-brown) !important;
  --text-muted: var(--sn-muted-light) !important;
  --text-faint: rgba(42, 27, 16, 0.45) !important;
  --line: var(--sn-line-light) !important;
  --line-strong: rgba(42, 27, 16, 0.32) !important;
  --card-bg: #fff9d8 !important;
}

* { box-sizing: border-box; }
a { color: inherit !important; text-decoration: none !important; }
button, input, textarea, select { font-family: var(--sn-font-body) !important; }
img, video, iframe { max-width: 100%; }

.container,
.topbar-inner,
.project-page .container,
#sn-about-main .sn-about-wrap {
  width: var(--sn-home-width) !important;
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Header/menu/title exact style */
.site-header {
  padding: 38px 0 0 !important;
  margin: 0 !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
  color: inherit !important;
}

.site-header__bar,
.site-header__left,
.site-header__center,
.site-header__right {
  display: none !important;
}

.static-menu {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  position: relative !important;
}

.menu-row {
  order: 1 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  width: var(--sn-nav-width) !important;
  max-width: none !important;
  margin: 0 auto 10px !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: var(--sn-font-body) !important;
  position: relative !important;
  z-index: 2 !important;
}

.menu-row a {
  position: relative !important;
  display: inline-block !important;
  color: inherit !important;
  font-family: var(--sn-font-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.20em !important;
  line-height: 1 !important;
  text-transform: lowercase !important;
  white-space: nowrap !important;
}

.menu-row a span {
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

.menu-row a::after {
  content: "" !important;
  position: absolute !important;
  left: 8% !important;
  right: 8% !important;
  bottom: -7px !important;
  height: 1px !important;
  background: currentColor !important;
  opacity: 0 !important;
  transform: scaleX(0.72) !important;
  transform-origin: center !important;
  transition: opacity 220ms ease, transform 220ms ease !important;
}

.menu-row a:hover::after,
.menu-row a:focus-visible::after,
.menu-row a.is-active::after {
  opacity: 0.45 !important;
  transform: scaleX(1) !important;
}

.menu-title {
  order: 2 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  position: relative !important;
  z-index: 1 !important;
  line-height: 0 !important;
}

.menu-title svg {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: 96px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.menu-title svg text {
  fill: currentColor !important;
  font-family: var(--sn-font-head) !important;
  font-weight: 400 !important;
  letter-spacing: 0.55em !important;
}

.menu-subtitle {
  order: 3 !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-family: var(--sn-font-head) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.24em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

/* General page typography */
h1,
.title,
.sn-about-title,
.video-title,
.video-card__title,
.project-card__title,
.video-placeholder__title {
  color: inherit !important;
  font-family: var(--sn-font-head) !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
}

h2, h3,
.subtitle,
.sn-about-subtitle,
.section-label,
.project-list__label,
.facts-inline__label,
.label,
.eyebrow,
.footer-note,
.footer-credit {
  color: inherit !important;
  font-family: var(--sn-font-head) !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

p,
.sn-about-copy,
.project-overview,
.project-list__value,
.video-subtitle,
.video-card__subtitle,
.video-card__meta,
.sn-about-meta-value {
  color: var(--text-muted) !important;
  font-family: var(--sn-font-body) !important;
  font-size: clamp(15px, 1.2vw, 17px) !important;
  line-height: 1.7 !important;
  letter-spacing: 0.01em !important;
}

/* Category / gallery pages */
.video-section {
  margin: 0 !important;
  padding: 30px 0 128px !important;
  background: transparent !important;
}

.video-grid,
#embeddedVideoGrid,
.project-stills__grid,
.still-grid {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 60px !important;
  row-gap: 64px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.video-card,
.video-card a,
.project-still {
  width: 100% !important;
  margin: 0 !important;
  background: transparent !important;
  color: inherit !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.video-card:hover { transform: none !important; }
.video-frame-wrap,
.video-card__frame,
.video-card__media,
.project-media__frame,
.sn-about-portrait,
.media-frame {
  background: rgba(42, 27, 16, 0.12) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.video-frame-wrap::before,
.video-frame-wrap::after { opacity: 0 !important; }
.video-card__frame { aspect-ratio: 16 / 9 !important; }

.video-card img,
.video-card video,
.video-card iframe,
.video-poster,
.project-still img,
.sn-about-portrait img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  filter: saturate(0.84) contrast(1.06) brightness(0.92) !important;
}

body.light-mode .video-card img,
body.light-mode .video-card video,
body.light-mode .video-card iframe,
body.light-mode .video-poster,
body.light-mode .project-still img,
body.light-mode .sn-about-portrait img {
  filter: saturate(0.9) contrast(1.02) brightness(1) !important;
}

.video-card__body,
.video-card__content,
.video-card__body,
.video-title {
  text-align: center !important;
}

.video-card__body,
.video-card__content {
  margin: 22px 0 0 !important;
  padding: 0 !important;
}

.video-title,
.video-card__title {
  display: block !important;
  margin: 0 0 6px !important;
  text-align: center !important;
  font-size: 15px !important;
  letter-spacing: 0.22em !important;
}

.video-subtitle,
.video-card__description,
.video-card__meta {
  margin-top: 10px !important;
  text-align: center !important;
  opacity: 0.58 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  letter-spacing: 0.08em !important;
}

/* Project pages: darker cinematic style */
.project-page,
.project-hero,
.project-media,
.project-content,
.project-stills {
  background: transparent !important;
  color: inherit !important;
}

.project-hero {
  padding: 30px 0 54px !important;
  margin: 0 !important;
  border: 0 !important;
  text-align: center !important;
}

.project-page .title {
  max-width: none !important;
  margin: 0 auto !important;
  font-size: clamp(34px, 5vw, 58px) !important;
  letter-spacing: 0.24em !important;
}

.project-page .subtitle {
  max-width: 640px !important;
  margin: 12px auto 0 !important;
  font-family: var(--sn-font-body) !important;
  font-size: clamp(15px, 1.2vw, 18px) !important;
  line-height: 1.5 !important;
  letter-spacing: 0.05em !important;
  text-transform: none !important;
  color: var(--text-muted) !important;
}

.facts-inline {
  margin: 22px auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  justify-content: center !important;
  gap: 12px !important;
  color: var(--text-muted) !important;
  font-family: var(--sn-font-head) !important;
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
  text-transform: lowercase !important;
}

.project-media { padding: 0 0 clamp(58px, 7vw, 96px) !important; }
.project-media__frame {
  min-height: clamp(360px, 62vw, 720px) !important;
  background: #000 !important;
}

.project-content { padding: 0 0 clamp(64px, 7vw, 100px) !important; }
.project-content__grid,
.content-grid {
  width: min(920px, 100%) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 46px !important;
  text-align: center !important;
}

.project-card,
.project-copy-block,
.sn-about-panel,
.panel {
  background: transparent !important;
  border: 0 !important;
  color: inherit !important;
  box-shadow: none !important;
}

.project-overview { max-width: 640px !important; margin: 0 auto !important; }
.project-list {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 22px 36px !important;
}
.project-list__item { border: 0 !important; padding: 0 !important; text-align: center !important; }
.project-stills { padding: 0 0 clamp(90px, 9vw, 140px) !important; }
.project-stills__grid { margin-top: 22px !important; }
.project-still { aspect-ratio: 16 / 9 !important; }

/* About page: Canva split editorial spread */
#sn-about-main { background: transparent !important; color: inherit !important; }
#sn-about-main .sn-about-wrap { padding: 30px 0 128px !important; }
#sn-about-main .sn-about-hero { text-align: center !important; margin-bottom: 54px !important; }
#sn-about-main .sn-about-title { margin: 0 !important; font-size: clamp(38px, 5vw, 62px) !important; }
#sn-about-main .sn-about-subtitle { margin: 0 !important; font-size: 15px !important; letter-spacing: 0.20em !important; }
#sn-about-main .sn-about-grid {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr) !important;
  gap: clamp(48px, 7vw, 86px) !important;
  align-items: center !important;
}
#sn-about-main .sn-about-panel { padding: 0 !important; }
#sn-about-main .sn-about-copy { max-width: 560px !important; }
#sn-about-main .sn-about-meta { border-top: 1px solid var(--line) !important; }

/* Inputs/admin remain usable */
input, textarea, select {
  background: transparent !important;
  color: inherit !important;
  border: 1px solid var(--line) !important;
}
button, .small-button, .secondary {
  background: transparent !important;
  color: inherit !important;
  border: 1px solid var(--line) !important;
  font-family: var(--sn-font-head) !important;
  letter-spacing: 0.14em !important;
  text-transform: lowercase !important;
}

/* Footer + bottom right night/day toggle */
.site-footer {
  margin-top: 0 !important;
  padding: 28px 0 70px !important;
  background: transparent !important;
  color: inherit !important;
}
.site-footer__inner { border-color: var(--line) !important; background: transparent !important; }
.sn-theme-toggle,
.theme-switch,
.theme-toggle,
#themeToggle,
[data-theme-toggle] {
  position: fixed !important;
  right: 32px !important;
  bottom: 28px !important;
  z-index: 10000 !important;
}
.sn-theme-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 12px 8px !important;
  background: rgba(0, 0, 0, 0.54) !important;
  color: var(--sn-cream) !important;
  border: 1px solid rgba(255, 255, 233, 0.35) !important;
  backdrop-filter: blur(10px) !important;
  cursor: pointer !important;
  font-family: var(--sn-font-head) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
}
body.light-mode .sn-theme-toggle {
  background: rgba(255, 255, 233, 0.72) !important;
  color: var(--sn-brown) !important;
  border-color: rgba(42, 27, 16, 0.32) !important;
}
.sn-theme-toggle__state { opacity: 0.58 !important; }

@media (max-width: 900px) {
  :root { --sn-home-width: min(88vw, 760px); --sn-nav-width: 100%; }
  .menu-row { gap: 18px !important; justify-content: center !important; flex-wrap: wrap !important; }
  .menu-title svg { max-height: 58px !important; }
  .menu-title svg text { letter-spacing: 0.55em !important; }
  .menu-subtitle { letter-spacing: 0.16em !important; }
  .video-grid,
  #embeddedVideoGrid,
  .project-stills__grid,
  .still-grid,
  .project-content__grid,
  .content-grid,
  #sn-about-main .sn-about-grid {
    grid-template-columns: 1fr !important;
    row-gap: 48px !important;
  }
}

/* Patch: match approved homepage SVG tracking on site-wide header */
.menu-title svg text {
  letter-spacing: 0.55em !important;
}
.site-header, .site-header > .container, .static-menu {
  background: transparent !important;
  box-shadow: none !important;
}


/* =========================================================
   COLOR LOCK PATCH — Canva palette only, no background leaks
   Light: #FFFFE9 background + #2A1B10 text
   Dark:  #000000 background + #FFFFE9 text
   ========================================================= */
html,
body {
  background-color: var(--sn-black) !important;
  color: var(--sn-cream) !important;
}
body.light-mode {
  background-color: var(--sn-cream) !important;
  color: var(--sn-brown) !important;
}
body:not(.light-mode),
body:not(.light-mode) .site-shell,
body:not(.light-mode) .page-scope,
body:not(.light-mode) main,
body:not(.light-mode) section,
body:not(.light-mode) article,
body:not(.light-mode) .container,
body:not(.light-mode) .site-header,
body:not(.light-mode) .site-header > .container,
body:not(.light-mode) .static-menu,
body:not(.light-mode) .video-section,
body:not(.light-mode) .project-page,
body:not(.light-mode) .project-hero,
body:not(.light-mode) .project-media,
body:not(.light-mode) .project-content,
body:not(.light-mode) .project-stills,
body:not(.light-mode) #sn-about-main,
body:not(.light-mode) #sn-about-main .sn-about-wrap,
body:not(.light-mode) .site-footer,
body:not(.light-mode) .site-footer__inner {
  background-color: var(--sn-black) !important;
  color: var(--sn-cream) !important;
  box-shadow: none !important;
}
body.light-mode,
body.light-mode .site-shell,
body.light-mode .page-scope,
body.light-mode main,
body.light-mode section,
body.light-mode article,
body.light-mode .container,
body.light-mode .site-header,
body.light-mode .site-header > .container,
body.light-mode .static-menu,
body.light-mode .video-section,
body.light-mode .project-page,
body.light-mode .project-hero,
body.light-mode .project-media,
body.light-mode .project-content,
body.light-mode .project-stills,
body.light-mode #sn-about-main,
body.light-mode #sn-about-main .sn-about-wrap,
body.light-mode .site-footer,
body.light-mode .site-footer__inner {
  background-color: var(--sn-cream) !important;
  color: var(--sn-brown) !important;
  box-shadow: none !important;
}
.video-frame-wrap,
.video-card__frame,
.video-card__media,
.project-media__frame,
.project-still,
.media-frame,
.sn-about-portrait,
.video-placeholder {
  background-color: rgba(255, 255, 233, 0.08) !important;
  border-color: var(--line) !important;
}
body.light-mode .video-frame-wrap,
body.light-mode .video-card__frame,
body.light-mode .video-card__media,
body.light-mode .project-media__frame,
body.light-mode .project-still,
body.light-mode .media-frame,
body.light-mode .sn-about-portrait,
body.light-mode .video-placeholder {
  background-color: rgba(42, 27, 16, 0.10) !important;
  border-color: var(--line) !important;
}
.menu-row,
.menu-row a,
.menu-title,
.menu-subtitle,
.menu-title svg,
.menu-title svg text {
  color: var(--sn-cream) !important;
  fill: var(--sn-cream) !important;
}
body.light-mode .menu-row,
body.light-mode .menu-row a,
body.light-mode .menu-title,
body.light-mode .menu-subtitle,
body.light-mode .menu-title svg,
body.light-mode .menu-title svg text {
  color: var(--sn-brown) !important;
  fill: var(--sn-brown) !important;
}
.menu-title svg text {
  letter-spacing: 0.55em !important;
  fill: currentColor !important;
}
.card,
.panel,
.project-card,
.project-copy-block,
.sn-about-panel,
.admin-card,
.video-card,
.video-card a {
  background-color: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
}

/* =========================================================
   FOOTER SOCIAL ICONS + TITLE SEPARATOR — Canva-aligned patch
   ========================================================= */
.title-divider {
  order: 3 !important;
  width: min(140px, 18vw) !important;
  height: 1px !important;
  margin: 10px auto 0 !important;
  padding: 0 !important;
  background: linear-gradient(to right, transparent, currentColor, transparent) !important;
  opacity: 0.52 !important;
  line-height: 0 !important;
}
.menu-subtitle {
  order: 4 !important;
  margin-top: 10px !important;
}
.site-footer {
  margin-top: 96px !important;
  padding: 0 0 76px !important;
  background: transparent !important;
  color: inherit !important;
}
.site-footer > .container {
  width: var(--sn-home-width) !important;
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.site-footer__inner {
  width: var(--sn-nav-width) !important;
  margin: 0 auto !important;
  padding-top: 24px !important;
  border-top: 1px solid currentColor !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 24px !important;
  background: transparent !important;
  color: inherit !important;
  opacity: 0.76 !important;
}
.footer-note {
  grid-column: 1 !important;
  justify-self: start !important;
  color: inherit !important;
  font-family: var(--sn-font-head) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}
.footer-social {
  grid-column: 2 !important;
  justify-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.footer-social__link {
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: inherit !important;
  opacity: 0.72 !important;
  text-decoration: none !important;
  transition: opacity 180ms ease, transform 180ms ease !important;
}
.footer-social__link:hover,
.footer-social__link:focus-visible {
  opacity: 1 !important;
  transform: translateY(-1px) !important;
}
.footer-social svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.35 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.footer-social svg path:not(.footer-social__cutout) {
  fill: currentColor !important;
  stroke: none !important;
}
.footer-social svg rect,
.footer-social svg circle,
.footer-social svg path.footer-social__cutout {
  fill: none !important;
  stroke: currentColor !important;
}
.footer-social svg .footer-social__cutout {
  fill: var(--sn-black) !important;
  stroke: none !important;
}
body.light-mode .footer-social svg .footer-social__cutout {
  fill: var(--sn-cream) !important;
}
@media (max-width: 900px) {
  .title-divider { width: 108px !important; }
  .site-footer__inner {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    row-gap: 18px !important;
    text-align: center !important;
  }
  .footer-note,
  .footer-social {
    grid-column: 1 !important;
    justify-self: center !important;
  }
}

/* =========================================================
   Final Canva alignment pass
   - All clip/media cards are true 16:9
   - About page uses Canva editorial split layout
   - Locks copy/color/spacing against legacy inline styles
   ========================================================= */
.video-card__frame,
.video-frame-wrap,
.video-card__media,
.project-media__frame,
.media-frame,
.home-page .video-card__frame,
.home-page .video-frame-wrap,
.home-page .video-card__media {
  aspect-ratio: 16 / 9 !important;
}

#sn-about-main {
  background: transparent !important;
  color: inherit !important;
  padding: 0 0 120px !important;
}

#sn-about-main .sn-about-wrap {
  width: var(--sn-home-width, min(80vw, 1440px)) !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 30px 0 0 !important;
}

#sn-about-main .sn-about-hero {
  margin: 0 0 46px !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: center !important;
}

#sn-about-main .sn-about-subtitle {
  margin: 0 !important;
  color: inherit !important;
  font-family: var(--sn-font-head) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}

#sn-about-main .sn-about-grid {
  display: grid !important;
  grid-template-columns: minmax(280px, 0.86fr) minmax(0, 1.14fr) !important;
  gap: clamp(54px, 7vw, 96px) !important;
  align-items: center !important;
}

#sn-about-main .sn-about-portrait,
#sn-about-main .sn-about-placeholder {
  margin: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 5 !important;
  background: rgba(42, 27, 16, 0.12) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#sn-about-main .sn-about-portrait img,
#sn-about-main .sn-about-placeholder img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  display: block !important;
}

#sn-about-main .sn-about-panel {
  width: 100% !important;
  max-width: 620px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
}

#sn-about-main .sn-about-copy {
  max-width: 620px !important;
  margin: 0 !important;
  color: inherit !important;
  font-family: var(--sn-font-body) !important;
  font-size: clamp(17px, 1.35vw, 22px) !important;
  font-weight: 400 !important;
  line-height: 1.62 !important;
  letter-spacing: 0.03em !important;
  opacity: 0.9 !important;
}

#sn-about-main .sn-about-copy + .sn-about-copy {
  margin-top: 24px !important;
}

#sn-about-main .sn-about-meta {
  display: none !important;
}

@media (max-width: 900px) {
  #sn-about-main .sn-about-wrap {
    width: min(88vw, 760px) !important;
  }

  #sn-about-main .sn-about-grid {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  #sn-about-main .sn-about-panel {
    max-width: none !important;
  }

  #sn-about-main .sn-about-copy {
    font-size: 17px !important;
  }
}


/* =========================================================
   About page: Canva page 11 inspired stills grid
   ========================================================= */
#sn-about-main.sn-about-page11 {
  background: transparent !important;
  color: inherit !important;
}

#sn-about-main.sn-about-page11 .sn-about-wrap {
  width: min(80vw, 1440px) !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 30px 0 128px !important;
}

#sn-about-main.sn-about-page11 .sn-about-hero {
  margin: 0 0 30px !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: center !important;
}

#sn-about-main.sn-about-page11 .sn-about-subtitle {
  margin: 0 !important;
  color: inherit !important;
  font-family: var(--sn-font-head, "Cormorant Garamond SC", serif) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0.24em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  opacity: 0.86 !important;
}

#sn-about-main.sn-about-page11 .sn-about-page11-layout {
  display: grid !important;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr) !important;
  gap: 64px !important;
  align-items: start !important;
}

#sn-about-main.sn-about-page11 .sn-about-copy-block {
  max-width: 520px !important;
  padding-top: 2px !important;
}

#sn-about-main.sn-about-page11 .sn-about-copy {
  margin: 0 !important;
  color: inherit !important;
  font-family: var(--sn-font-body, "Cormorant Garamond", Georgia, serif) !important;
  font-size: clamp(16px, 1.18vw, 19px) !important;
  font-weight: 400 !important;
  line-height: 1.72 !important;
  letter-spacing: 0.035em !important;
  opacity: 0.84 !important;
}

#sn-about-main.sn-about-page11 .sn-about-copy + .sn-about-copy {
  margin-top: 18px !important;
}

#sn-about-main.sn-about-page11 .sn-about-stills {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 32px !important;
  row-gap: 34px !important;
  width: 100% !important;
}

#sn-about-main.sn-about-page11 .sn-about-still {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

#sn-about-main.sn-about-page11 .sn-about-still-frame {
  aspect-ratio: 16 / 9 !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-height: 0 !important;
  border: 1px solid currentColor !important;
  background:
    linear-gradient(135deg, transparent calc(50% - 0.5px), currentColor calc(50% - 0.5px), currentColor calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(45deg, transparent calc(50% - 0.5px), currentColor calc(50% - 0.5px), currentColor calc(50% + 0.5px), transparent calc(50% + 0.5px)) !important;
  opacity: 0.72 !important;
  overflow: hidden !important;
}

#sn-about-main.sn-about-page11 .sn-about-still-frame span {
  display: inline-block !important;
  padding: 9px 12px !important;
  background: var(--sn-black, #000000) !important;
  color: var(--sn-cream, #ffffe9) !important;
  font-family: var(--sn-font-head, "Cormorant Garamond SC", serif) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

body.light-mode #sn-about-main.sn-about-page11 .sn-about-still-frame span {
  background: var(--sn-cream, #ffffe9) !important;
  color: var(--sn-brown, #2a1b10) !important;
}

@media (max-width: 980px) {
  #sn-about-main.sn-about-page11 .sn-about-wrap {
    width: min(88vw, 900px) !important;
  }

  #sn-about-main.sn-about-page11 .sn-about-page11-layout {
    grid-template-columns: 1fr !important;
    gap: 42px !important;
  }

  #sn-about-main.sn-about-page11 .sn-about-copy-block {
    max-width: 720px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
}

@media (max-width: 640px) {
  #sn-about-main.sn-about-page11 .sn-about-stills {
    grid-template-columns: 1fr !important;
    row-gap: 28px !important;
  }
}

/* ===== ABOUT PAGE 11 REFINEMENT: MAIN IMAGE LEFT / TEXT RIGHT / 4 STILLS BELOW ===== */
#sn-about-main.sn-about-page11 .sn-about-page11-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 48px !important;
  align-items: start !important;
}

#sn-about-main.sn-about-page11 .sn-about-main-row {
  display: grid !important;
  grid-template-columns: minmax(280px, 0.86fr) minmax(0, 1.14fr) !important;
  column-gap: 64px !important;
  align-items: center !important;
  width: 100% !important;
}

#sn-about-main.sn-about-page11 .sn-about-portrait {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#sn-about-main.sn-about-page11 .sn-about-portrait img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  filter: saturate(0.92) contrast(1.03) !important;
  opacity: 0.96 !important;
}

#sn-about-main.sn-about-page11 .sn-about-copy-block {
  max-width: 620px !important;
  padding-top: 0 !important;
  align-self: center !important;
}

#sn-about-main.sn-about-page11 .sn-about-stills {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-gap: 28px !important;
  row-gap: 28px !important;
  width: 100% !important;
}

#sn-about-main.sn-about-page11 .sn-about-still-frame {
  aspect-ratio: 16 / 9 !important;
}

@media (max-width: 980px) {
  #sn-about-main.sn-about-page11 .sn-about-page11-layout {
    gap: 42px !important;
  }

  #sn-about-main.sn-about-page11 .sn-about-main-row {
    grid-template-columns: 1fr !important;
    row-gap: 36px !important;
  }

  #sn-about-main.sn-about-page11 .sn-about-portrait {
    max-width: 560px !important;
    margin: 0 auto !important;
  }

  #sn-about-main.sn-about-page11 .sn-about-copy-block {
    max-width: 720px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  #sn-about-main.sn-about-page11 .sn-about-stills {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  #sn-about-main.sn-about-page11 .sn-about-stills {
    grid-template-columns: 1fr !important;
  }
}

/* ===== ABOUT PRECISION UPDATE: image matches text block height ===== */
#sn-about-main.sn-about-page11 .sn-about-main-row {
  align-items: stretch !important;
}

#sn-about-main.sn-about-page11 .sn-about-portrait {
  align-self: stretch !important;
  display: flex !important;
  height: auto !important;
  min-height: 0 !important;
}

#sn-about-main.sn-about-page11 .sn-about-portrait img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
}

#sn-about-main.sn-about-page11 .sn-about-copy-block {
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 15px 0 !important;
}

@media (max-width: 980px) {
  #sn-about-main.sn-about-page11 .sn-about-main-row {
    align-items: start !important;
  }

  #sn-about-main.sn-about-page11 .sn-about-portrait img {
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
  }

  #sn-about-main.sn-about-page11 .sn-about-copy-block {
    align-self: auto !important;
    padding: 15px 0 !important;
  }
}

/* Project page refinement: move title/description/meta under clip */
.project-page .project-hero:not(:has(.title)) {
  display: none !important;
}

.project-media {
  padding: 0 0 clamp(44px, 5vw, 72px) !important;
}

.project-media__info {
  width: min(920px, 100%) !important;
  margin: 28px auto 0 !important;
  text-align: center !important;
  color: inherit !important;
}

.project-media__title {
  max-width: none !important;
  margin: 0 auto !important;
  font-family: var(--sn-font-head) !important;
  font-size: clamp(20px, 2.4vw, 32px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
}

.project-media__subtitle {
  max-width: 680px !important;
  margin: 14px auto 0 !important;
  font-family: var(--sn-font-body) !important;
  font-size: clamp(14px, 1.1vw, 16px) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: inherit !important;
  opacity: 0.72 !important;
}

.project-media__facts {
  margin: 18px auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  justify-content: center !important;
  gap: 10px 12px !important;
  color: inherit !important;
  opacity: 0.78 !important;
  font-family: var(--sn-font-body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  line-height: 1.35 !important;
  text-transform: none !important;
}

.project-media__facts .facts-inline__label {
  color: inherit !important;
  opacity: 0.62 !important;
  margin-right: 2px !important;
}

.project-media__facts .facts-inline__separator {
  color: inherit !important;
  opacity: 0.45 !important;
}

.project-content {
  padding-top: 0 !important;
}

@media (max-width: 700px) {
  .project-media__info {
    margin-top: 22px !important;
  }

  .project-media__facts {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .project-media__facts .facts-inline__separator {
    display: none !important;
  }
}

/* ===== PROJECT PAGE CANVA PAGES 7–8 MATCH =====
   Cinematic project presentation: clip first, compact text beneath,
   then stills. Mirrors the Canva project spread rhythm.
*/
.project-page {
  --sn-project-width: min(80vw, 1440px);
  background: var(--sn-black, #000000) !important;
  color: var(--sn-cream, #ffffe9) !important;
}

body.light-mode .project-page {
  background: var(--sn-cream, #ffffe9) !important;
  color: var(--sn-brown, #2a1b10) !important;
}

.project-page .container {
  width: var(--sn-project-width) !important;
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.project-page .project-media {
  padding: clamp(18px, 2vw, 30px) 0 clamp(36px, 4.5vw, 64px) !important;
  margin: 0 !important;
  border: 0 !important;
}

.project-page .project-media__frame {
  width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  background: var(--sn-black, #000000) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.light-mode .project-page .project-media__frame {
  background: rgba(42, 27, 16, 0.08) !important;
}

.project-page .project-media__frame::after {
  display: none !important;
}

.project-page .project-media__frame iframe,
.project-page .project-media__frame video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  object-fit: cover !important;
}

.project-page .project-media__info {
  width: min(760px, 100%) !important;
  margin: clamp(18px, 2.3vw, 30px) auto 0 !important;
  padding: 0 !important;
  text-align: center !important;
  color: inherit !important;
}

.project-page .project-media__title {
  margin: 0 auto !important;
  max-width: none !important;
  color: inherit !important;
  font-family: var(--sn-font-head, "Cormorant Garamond SC", serif) !important;
  font-size: clamp(15px, 1.45vw, 22px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.28em !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
}

.project-page .project-media__subtitle {
  max-width: 600px !important;
  margin: 12px auto 0 !important;
  color: inherit !important;
  opacity: 0.72 !important;
  font-family: var(--sn-font-body, "Cormorant Garamond", serif) !important;
  font-size: clamp(14px, 1vw, 16px) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: 0.03em !important;
}

.project-page .project-media__facts {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin: 16px auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  gap: 8px 10px !important;
  color: inherit !important;
  opacity: 0.76 !important;
  font-family: var(--sn-font-body, "Cormorant Garamond", serif) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.11em !important;
  line-height: 1.35 !important;
  text-transform: none !important;
}

.project-page .project-media__facts .facts-inline__label {
  color: inherit !important;
  opacity: 0.64 !important;
  font-weight: 400 !important;
}

.project-page .project-media__facts .facts-inline__separator {
  color: inherit !important;
  opacity: 0.42 !important;
}

.project-page .project-content {
  display: none !important;
}

.project-page .project-stills {
  padding: 0 0 clamp(80px, 9vw, 140px) !important;
  margin: 0 !important;
}

.project-page .project-stills .section-label {
  margin: 0 0 18px !important;
  text-align: center !important;
  color: inherit !important;
  opacity: 0.58 !important;
  font-family: var(--sn-font-head, "Cormorant Garamond SC", serif) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.24em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.project-page .project-stills__grid {
  display: grid !important;
  grid-template-columns: repeat(var(--still-columns), minmax(0, 1fr)) !important;
  gap: clamp(22px, 3vw, 44px) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.project-page .project-still {
  aspect-ratio: 16 / 9 !important;
  background: rgba(255,255,255,0.08) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.light-mode .project-page .project-still {
  background: rgba(42, 27, 16, 0.10) !important;
}

.project-page .project-still img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: saturate(0.92) contrast(1.03) !important;
}

.project-page .project-still__placeholder {
  color: inherit !important;
  opacity: 0.45 !important;
  font-family: var(--sn-font-head, "Cormorant Garamond SC", serif) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
}

@media (max-width: 980px) {
  .project-page { --sn-project-width: min(88vw, 900px); }
  .project-page .project-stills__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 640px) {
  .project-page .project-media { padding-top: 18px !important; }
  .project-page .project-media__title { letter-spacing: 0.20em !important; }
  .project-page .project-media__facts { flex-direction: column !important; gap: 8px !important; }
  .project-page .project-media__facts .facts-inline__separator { display: none !important; }
  .project-page .project-stills__grid { grid-template-columns: 1fr !important; }
}


/* =========================================================
   Final refinements: about duplicate subtitle removed + refined project credits
   ========================================================= */
#sn-about-main.sn-about-page11 .sn-about-wrap {
  padding-top: 30px !important;
}
#sn-about-main.sn-about-page11 .sn-about-hero {
  display: none !important;
}
#sn-about-main.sn-about-page11 .sn-about-main-row {
  align-items: stretch !important;
}
#sn-about-main.sn-about-page11 .sn-about-portrait {
  display: flex !important;
}
#sn-about-main.sn-about-page11 .sn-about-portrait img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
#sn-about-main.sn-about-page11 .sn-about-copy-block {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

.project-page .project-credits--refined {
  width: min(420px, 100%) !important;
  margin: 24px auto 0 !important;
  padding: 18px 0 0 !important;
  border-top: 1px solid currentColor !important;
  color: inherit !important;
  opacity: 0.78 !important;
}
.project-page .project-credits--refined .credit-row {
  display: grid !important;
  grid-template-columns: minmax(120px, 0.9fr) minmax(160px, 1.1fr) !important;
  align-items: baseline !important;
  gap: 28px !important;
  margin: 7px 0 !important;
}
.project-page .project-credits--refined .credit-role {
  color: inherit !important;
  opacity: 0.58 !important;
  font-family: var(--sn-font-head, "Cormorant Garamond SC", serif) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.20em !important;
  line-height: 1.2 !important;
  text-align: right !important;
  text-transform: uppercase !important;
}
.project-page .project-credits--refined .credit-name {
  color: inherit !important;
  font-family: var(--sn-font-body, "Cormorant Garamond", serif) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.25 !important;
  text-align: left !important;
}
@media (max-width: 640px) {
  .project-page .project-credits--refined .credit-row {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
    text-align: center !important;
  }
  .project-page .project-credits--refined .credit-role,
  .project-page .project-credits--refined .credit-name {
    text-align: center !important;
  }
}

/* =========================================================
   FINAL CANVA POLISH OVERRIDES
   - Narrative / Commercial / MV clips slightly smaller
   - Homepage/index clips resized to match
   - Clip titles locked directly under 16:9 frames
   - Project media smaller + exact media-to-title rhythm
   ========================================================= */

/* Global clip grid polish for index, narrative, and commercial/MV pages */
.video-grid,
#embeddedVideoGrid {
  justify-content: center !important;
}

.video-card,
.video-card a {
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.video-frame-wrap,
.video-card__frame,
.video-card__media {
  aspect-ratio: 16 / 9 !important;
  margin: 0 0 14px !important;
}

.video-title,
.video-card__title,
.video-title-link {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-family: var(--sn-font-head, "Cormorant Garamond SC", "Cormorant Garamond", Georgia, serif) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  line-height: 1.1 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

.video-subtitle,
.video-card__description,
.video-card__meta {
  margin-top: 8px !important;
  color: currentColor !important;
  opacity: 0.60 !important;
  font-family: var(--sn-font-body, "Cormorant Garamond", Georgia, serif) !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

/* Homepage/index should match narrative/MV clip scale */
.home-page .video-card,
.home-page .video-card a {
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.home-page .video-grid,
.home-page #embeddedVideoGrid {
  column-gap: 60px !important;
  row-gap: 64px !important;
  justify-content: center !important;
}

.home-page .video-frame-wrap,
.home-page .video-card__media,
.home-page .video-card__frame {
  aspect-ratio: 16 / 9 !important;
  margin: 0 0 14px !important;
}

.home-page .video-title,
.home-page .video-card__title,
.home-page .video-title-link {
  margin: 0 !important;
  font-size: 14px !important;
  letter-spacing: 0.22em !important;
  line-height: 1.1 !important;
}

.home-page .video-subtitle,
.home-page .video-card__meta,
.home-page .video-card__description {
  margin-top: 8px !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  opacity: 0.60 !important;
}

/* Project pages: smaller centered media and Canva page 7/8 rhythm */
.project-page .project-media {
  padding: 24px 0 72px !important;
}

.project-page .project-media .container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.project-page .project-media__frame {
  width: min(100%, 880px) !important;
  max-width: 880px !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 auto 24px !important;
}

.project-page .project-media__info {
  width: min(620px, 100%) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
}

.project-page .project-media__title {
  margin: 0 0 10px !important;
  font-size: 14px !important;
  letter-spacing: 0.22em !important;
  line-height: 1.1 !important;
}

.project-page .project-media__subtitle {
  margin: 0 auto 14px !important;
  max-width: 520px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  letter-spacing: 0.04em !important;
}

.project-page .project-media__facts {
  margin: 0 auto 18px !important;
  gap: 8px 10px !important;
}

.project-page .project-credits,
.project-page .project-credits--refined {
  margin-top: 0 !important;
  max-width: 420px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.project-page .project-credits::before,
.project-page .project-credits--refined::before {
  content: "" !important;
  display: block !important;
  width: 60px !important;
  height: 1px !important;
  margin: 0 auto 18px !important;
  background: currentColor !important;
  opacity: 0.38 !important;
}

.project-page .credit-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 28px !important;
  margin: 6px 0 !important;
}

.project-page .credit-role {
  font-family: var(--sn-font-body, "Cormorant Garamond", Georgia, serif) !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  opacity: 0.60 !important;
}

.project-page .credit-name {
  font-family: var(--sn-font-body, "Cormorant Garamond", Georgia, serif) !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
}

@media (max-width: 900px) {
  .video-card,
  .video-card a,
  .home-page .video-card,
  .home-page .video-card a {
    max-width: 100% !important;
  }

  .project-page .project-media__frame {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   FINAL POLISH: footer icon scale + Canva-exact about crop/mobile
   ========================================================= */
.footer-social {
  gap: 26px !important;
}
.footer-social__link {
  width: 22px !important;
  height: 22px !important;
}
.footer-social svg {
  width: 30px !important;
  height: 30px !important;
  stroke-width: 1.45 !important;
}

/* Desktop about: image crops to the live height of the text block */
#sn-about-main.sn-about-page11 .sn-about-main-row {
  align-items: stretch !important;
  grid-template-columns: minmax(280px, 0.86fr) minmax(0, 1.14fr) !important;
}
#sn-about-main.sn-about-page11 .sn-about-portrait,
#sn-about-main.sn-about-page11 .sn-about-placeholder {
  position: relative !important;
  align-self: stretch !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
}
#sn-about-main.sn-about-page11 .sn-about-portrait img,
#sn-about-main.sn-about-page11 .sn-about-placeholder img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center center !important;
}
#sn-about-main.sn-about-page11 .sn-about-copy-block {
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 15px 0 !important;
}

/* Mobile refinement: lighter header, single-column grids, readable about */
@media (max-width: 980px) {
  :root {
    --sn-home-width: min(88vw, 900px);
    --sn-nav-width: 100%;
  }
  .site-header {
    padding-top: 28px !important;
  }
  .menu-row {
    width: 100% !important;
    justify-content: center !important;
    gap: 18px 24px !important;
    flex-wrap: wrap !important;
    margin-bottom: 14px !important;
  }
  .menu-row a {
    font-size: 12px !important;
    letter-spacing: 0.16em !important;
  }
  .menu-title svg {
    max-height: 64px !important;
  }
  .menu-title svg text {
    letter-spacing: 0.42em !important;
  }
  .menu-subtitle {
    margin-top: 10px !important;
    font-size: 13px !important;
    letter-spacing: 0.18em !important;
  }
  .title-divider {
    margin-top: 18px !important;
    margin-bottom: 28px !important;
  }
  .video-grid,
  #embeddedVideoGrid,
  .home-page .video-grid,
  .project-stills__grid,
  .still-grid,
  .content-grid {
    grid-template-columns: 1fr !important;
    row-gap: 46px !important;
  }
  .video-card,
  .home-page .video-card {
    max-width: 620px !important;
  }
  .project-media__frame,
  .project-hero,
  .project-media {
    width: min(88vw, 760px) !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #sn-about-main.sn-about-page11 .sn-about-main-row {
    grid-template-columns: 1fr !important;
    row-gap: 34px !important;
    align-items: start !important;
  }
  #sn-about-main.sn-about-page11 .sn-about-portrait,
  #sn-about-main.sn-about-page11 .sn-about-placeholder {
    position: relative !important;
    width: min(100%, 560px) !important;
    margin: 0 auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5 !important;
  }
  #sn-about-main.sn-about-page11 .sn-about-portrait img,
  #sn-about-main.sn-about-page11 .sn-about-placeholder img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  #sn-about-main.sn-about-page11 .sn-about-copy-block {
    max-width: 680px !important;
    margin: 0 auto !important;
    padding: 15px 0 !important;
    text-align: center !important;
  }
  #sn-about-main.sn-about-page11 .sn-about-stills {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
  .site-footer__inner {
    width: min(88vw, 760px) !important;
    grid-template-columns: 1fr !important;
    row-gap: 20px !important;
    justify-items: center !important;
    text-align: center !important;
  }
  .footer-note,
  .footer-social {
    grid-column: 1 !important;
    justify-self: center !important;
  }
}

@media (max-width: 640px) {
  :root {
    --sn-home-width: min(90vw, 520px);
  }
  .site-header {
    padding-top: 24px !important;
  }
  .menu-row {
    gap: 14px 18px !important;
  }
  .menu-row a {
    font-size: 11px !important;
    letter-spacing: 0.13em !important;
  }
  .menu-title svg {
    max-height: 52px !important;
  }
  .menu-title svg text {
    letter-spacing: 0.32em !important;
  }
  .menu-subtitle {
    font-size: 12px !important;
    letter-spacing: 0.14em !important;
  }
  #sn-about-main.sn-about-page11 .sn-about-copy {
    font-size: 16px !important;
    line-height: 1.62 !important;
  }
  #sn-about-main.sn-about-page11 .sn-about-stills {
    grid-template-columns: 1fr !important;
  }
  .footer-social__link,
  .footer-social svg {
    width: 20px !important;
    height: 20px !important;
  }
  .sn-theme-toggle {
    right: 18px !important;
    bottom: 18px !important;
    font-size: 11px !important;
  }
}


/* IMDb footer icon — monochrome Canva style */
.footer-social__link--imdb {
  width: 42px !important;
}
.footer-social__link--imdb svg {
  width: 42px !important;
  height: 22px !important;
}
.footer-social__link--imdb svg rect {
  fill: none !important;
  stroke: currentColor !important;
}
.footer-social__link--imdb svg text {
  fill: currentColor !important;
  stroke: none !important;
}

/* Requested revision: visibly larger video grids, tighter spacing, and larger footer icons */
.video-grid,
#embeddedVideoGrid,
.home-page .video-grid,
.home-page #embeddedVideoGrid {
  grid-template-columns: repeat(2, minmax(440px, 1fr)) !important;
  column-gap: 24px !important;
  row-gap: 28px !important;
  align-items: start !important;
  justify-content: center !important;
}

.video-card,
.video-card a,
.home-page .video-card,
.home-page .video-card a {
  width: 100% !important;
  max-width: 740px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.video-frame-wrap,
.video-card__frame,
.video-card__media,
.home-page .video-frame-wrap,
.home-page .video-card__frame,
.home-page .video-card__media {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  margin-bottom: 10px !important;
}

.footer-social {
  gap: 34px !important;
}

.footer-social__link,
.footer-social svg {
  width: 44px !important;
  height: 44px !important;
  opacity: 1 !important;
}

.footer-social svg {
  stroke-width: 1.9 !important;
}

.footer-social svg path.footer-social__detail,
.footer-social svg .footer-social__detail {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.35 !important;
  opacity: 0.9 !important;
}

.footer-social__link--imdb,
.footer-social__link--imdb svg {
  width: 82px !important;
  height: 44px !important;
}

.footer-social__link--imdb svg text {
  font-size: 16px !important;
  letter-spacing: 1.7px !important;
}

@media (max-width: 980px) {
  .video-grid,
  #embeddedVideoGrid,
  .home-page .video-grid,
  .home-page #embeddedVideoGrid {
    grid-template-columns: 1fr !important;
    row-gap: 26px !important;
  }

  .video-card,
  .video-card a,
  .home-page .video-card,
  .home-page .video-card a {
    max-width: 780px !important;
  }
}

@media (max-width: 640px) {
  .video-grid,
  #embeddedVideoGrid,
  .home-page .video-grid,
  .home-page #embeddedVideoGrid {
    row-gap: 22px !important;
  }

  .footer-social {
    gap: 24px !important;
  }

  .footer-social__link,
  .footer-social svg {
    width: 34px !important;
    height: 34px !important;
  }

  .footer-social__link--imdb,
  .footer-social__link--imdb svg {
    width: 66px !important;
    height: 34px !important;
  }
}


/* Requested: plain boxed YouTube icon, editable 3s preview start, and strict 16:9 preview images */
.video-frame-wrap,
.video-card__frame,
.video-card__media {
  aspect-ratio: 16 / 9 !important;
  padding-top: 0 !important;
  height: auto !important;
}

.video-frame-wrap > .video-layer,
.video-frame-wrap > iframe,
.video-frame-wrap > video,
.video-frame-wrap > .video-poster,
.video-frame-wrap > .video-placeholder,
.video-card__frame > img,
.video-card__media > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.footer-social__youtube-box rect {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.1 !important;
  rx: 0 !important;
}

.footer-social__youtube-box .footer-social__cutout {
  fill: currentColor !important;
  stroke: none !important;
}

/* Social icon tooltips */
.footer-social__link[data-tooltip] {
  position: relative !important;
}

.footer-social__link[data-tooltip]::before {
  content: attr(data-tooltip) !important;
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 10px) !important;
  transform: translateX(-50%) translateY(4px) !important;
  z-index: 20 !important;
  display: block !important;
  width: max-content !important;
  max-width: 160px !important;
  padding: 6px 9px !important;
  border: 1px solid currentColor !important;
  background: var(--sn-black) !important;
  color: var(--sn-cream) !important;
  font-family: var(--sn-font-body, Arial, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 160ms ease, transform 160ms ease !important;
}

.footer-social__link[data-tooltip]::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 5px) !important;
  transform: translateX(-50%) translateY(4px) rotate(45deg) !important;
  z-index: 19 !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 1px solid currentColor !important;
  border-bottom: 1px solid currentColor !important;
  background: var(--sn-black) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 160ms ease, transform 160ms ease !important;
}

body.light-mode .footer-social__link[data-tooltip]::before,
body.light-mode .footer-social__link[data-tooltip]::after {
  background: var(--sn-cream) !important;
  color: var(--sn-black) !important;
}

.footer-social__link[data-tooltip]:hover::before,
.footer-social__link[data-tooltip]:focus-visible::before,
.footer-social__link[data-tooltip]:hover::after,
.footer-social__link[data-tooltip]:focus-visible::after {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

.footer-social__link[data-tooltip]:hover::after,
.footer-social__link[data-tooltip]:focus-visible::after {
  transform: translateX(-50%) translateY(0) rotate(45deg) !important;
}

@media (max-width: 700px) {
  .footer-social__link[data-tooltip]::before,
  .footer-social__link[data-tooltip]::after {
    display: none !important;
  }
}

/* About admin color correction: keep public + edit mode on the site palette */
#sn-about-main.sn-about-page11,
#sn-about-main.sn-about-page11 .sn-about-wrap {
  background-color: var(--sn-black) !important;
  color: var(--sn-cream) !important;
}

body.light-mode #sn-about-main.sn-about-page11,
body.light-mode #sn-about-main.sn-about-page11 .sn-about-wrap {
  background-color: var(--sn-cream) !important;
  color: var(--sn-brown) !important;
}

#sn-about-main.sn-about-page11 .sn-about-copy-block,
#sn-about-main.sn-about-page11 .sn-about-contact-card,
#sn-about-main.sn-about-page11 .sn-about-admin-panel {
  background: transparent !important;
  color: inherit !important;
  border-color: var(--line) !important;
}

#sn-about-main.sn-about-page11 .sn-about-kicker,
#sn-about-main.sn-about-page11 .sn-about-copy,
#sn-about-main.sn-about-page11 .sn-about-contact-card p,
#sn-about-main.sn-about-page11 .sn-about-meta-label,
#sn-about-main.sn-about-page11 .sn-about-admin-form label {
  color: inherit !important;
}

#sn-about-main.sn-about-page11 .sn-about-copy,
#sn-about-main.sn-about-page11 .sn-about-contact-card p,
#sn-about-main.sn-about-page11 .sn-about-meta-label,
#sn-about-main.sn-about-page11 .sn-about-admin-form label {
  opacity: 0.82 !important;
}

#sn-about-main.sn-about-page11 .sn-about-admin-panel h2,
#sn-about-main.sn-about-page11 .sn-about-name,
#sn-about-main.sn-about-page11 .sn-about-contact-card h2,
#sn-about-main.sn-about-page11 .sn-about-meta-value,
#sn-about-main.sn-about-page11 .sn-about-meta-value a {
  color: inherit !important;
}

#sn-about-main.sn-about-page11 .sn-about-admin-form input,
#sn-about-main.sn-about-page11 .sn-about-admin-form textarea {
  background: rgba(255,255,233,0.06) !important;
  color: var(--sn-cream) !important;
  border-color: var(--line) !important;
  caret-color: currentColor !important;
}

body.light-mode #sn-about-main.sn-about-page11 .sn-about-admin-form input,
body.light-mode #sn-about-main.sn-about-page11 .sn-about-admin-form textarea {
  background: rgba(42,27,16,0.06) !important;
  color: var(--sn-brown) !important;
}

#sn-about-main.sn-about-page11 .sn-about-admin-form input::placeholder,
#sn-about-main.sn-about-page11 .sn-about-admin-form textarea::placeholder {
  color: currentColor !important;
  opacity: 0.5 !important;
}

#sn-about-main.sn-about-page11 .sn-about-contact-button,
#sn-about-main.sn-about-page11 .sn-about-admin-button {
  border-color: currentColor !important;
  background: var(--sn-cream) !important;
  color: var(--sn-black) !important;
}

body.light-mode #sn-about-main.sn-about-page11 .sn-about-contact-button,
body.light-mode #sn-about-main.sn-about-page11 .sn-about-admin-button {
  background: var(--sn-brown) !important;
  color: var(--sn-cream) !important;
}

#sn-about-main.sn-about-page11 .sn-about-admin-button.secondary {
  background: transparent !important;
  color: inherit !important;
}

/* About bio + contact button refinement */
#sn-about-main.sn-about-page11 .sn-about-copy-block {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#sn-about-main.sn-about-page11 .sn-about-contact-button {
  background: transparent !important;
  color: var(--sn-cream) !important;
  border-color: var(--sn-cream) !important;
}

body.light-mode #sn-about-main.sn-about-page11 .sn-about-contact-button {
  background: transparent !important;
  color: var(--sn-brown) !important;
  border-color: var(--sn-brown) !important;
}

#sn-about-main.sn-about-page11 .sn-about-contact-button:hover,
#sn-about-main.sn-about-page11 .sn-about-contact-button:focus-visible {
  background: var(--sn-cream) !important;
  color: var(--sn-black) !important;
}

body.light-mode #sn-about-main.sn-about-page11 .sn-about-contact-button:hover,
body.light-mode #sn-about-main.sn-about-page11 .sn-about-contact-button:focus-visible {
  background: var(--sn-brown) !important;
  color: var(--sn-cream) !important;
}

/* =========================================================
   MENU + DIRECTOR TITLE SIZE PATCH
   - Increases primary menu links by ~20%
   - Increases “Director of Photography” subtitle by ~20%
   ========================================================= */
.menu-row a {
  font-size: 16px !important;
}

.menu-subtitle {
  font-size: 22px !important;
}

@media (max-width: 700px) {
  .menu-row a {
    font-size: 13px !important;
  }

  .menu-subtitle {
    font-size: 18px !important;
  }
}

/* Reapplied stronger action button contrast */
.site-button,
.admin-button,
.button-link,
.small-button,
button[type="submit"],
.sn-about-contact-button,
.sn-about-admin-button,
.contact-submit,
.admin-bar button,
.admin-editor button[type="submit"],
.project-admin-button,
input[type="submit"] {
  background: var(--sn-paper) !important;
  color: var(--sn-ink) !important;
  border: 1px solid var(--sn-paper) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28) !important;
  font-weight: 800 !important;
}

body.light-mode .site-button,
body.light-mode .admin-button,
body.light-mode .button-link,
body.light-mode .small-button,
body.light-mode button[type="submit"],
body.light-mode .sn-about-contact-button,
body.light-mode .sn-about-admin-button,
body.light-mode .contact-submit,
body.light-mode .admin-bar button,
body.light-mode .admin-editor button[type="submit"],
body.light-mode .project-admin-button,
body.light-mode input[type="submit"] {
  background: var(--sn-ink) !important;
  color: var(--sn-paper) !important;
  border-color: var(--sn-ink) !important;
}

.site-button:hover,
.site-button:focus-visible,
.admin-button:hover,
.admin-button:focus-visible,
.button-link:hover,
.button-link:focus-visible,
.small-button:hover,
.small-button:focus-visible,
button[type="submit"]:hover,
button[type="submit"]:focus-visible,
.sn-about-contact-button:hover,
.sn-about-contact-button:focus-visible,
.sn-about-admin-button:hover,
.sn-about-admin-button:focus-visible,
.contact-submit:hover,
.contact-submit:focus-visible,
.admin-bar button:hover,
.admin-bar button:focus-visible,
.admin-editor button[type="submit"]:hover,
.admin-editor button[type="submit"]:focus-visible,
.project-admin-button:hover,
.project-admin-button:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible {
  transform: translateY(-1px);
  filter: brightness(0.94);
  outline: 3px solid var(--sn-accent) !important;
  outline-offset: 3px;
}

.button-link.secondary,
button.secondary,
.sn-about-admin-button.secondary,
.secondary,
a.secondary {
  background: transparent !important;
  color: var(--sn-paper) !important;
  border: 1px solid color-mix(in srgb, var(--sn-paper) 55%, transparent) !important;
  box-shadow: none !important;
}

.button-link.secondary:hover,
.button-link.secondary:focus-visible,
button.secondary:hover,
button.secondary:focus-visible,
.sn-about-admin-button.secondary:hover,
.sn-about-admin-button.secondary:focus-visible,
.secondary:hover,
.secondary:focus-visible,
a.secondary:hover,
a.secondary:focus-visible {
  background: var(--sn-paper) !important;
  color: var(--sn-ink) !important;
  border-color: var(--sn-paper) !important;
}

body.light-mode .button-link.secondary,
body.light-mode button.secondary,
body.light-mode .sn-about-admin-button.secondary,
body.light-mode .secondary,
body.light-mode a.secondary {
  color: var(--sn-ink) !important;
  border-color: color-mix(in srgb, var(--sn-ink) 55%, transparent) !important;
}

body.light-mode .button-link.secondary:hover,
body.light-mode .button-link.secondary:focus-visible,
body.light-mode button.secondary:hover,
body.light-mode button.secondary:focus-visible,
body.light-mode .sn-about-admin-button.secondary:hover,
body.light-mode .sn-about-admin-button.secondary:focus-visible,
body.light-mode .secondary:hover,
body.light-mode .secondary:focus-visible,
body.light-mode a.secondary:hover,
body.light-mode a.secondary:focus-visible {
  background: var(--sn-ink) !important;
  color: var(--sn-paper) !important;
  border-color: var(--sn-ink) !important;
}


/* Reapplied compact day/night toggle - keep this after other button/nav rules */
.sn-theme-toggle,
.theme-switch,
.theme-toggle,
#themeToggle,
[data-theme-toggle] {
  position: fixed !important;
  right: 24px !important;
  bottom: 22px !important;
  z-index: 10000 !important;
}

.sn-theme-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 6px 8px 5px !important;
  border-radius: 999px !important;
  font-family: var(--sn-font-head, Georgia, serif) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: 0.12em !important;
  text-transform: lowercase !important;
  background: rgba(0, 0, 0, 0.62) !important;
  color: var(--sn-cream, #ffffe9) !important;
  border: 1px solid rgba(255, 255, 233, 0.38) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

body.light-mode .sn-theme-toggle {
  background: rgba(255, 255, 233, 0.78) !important;
  color: var(--sn-brown, #2a1b10) !important;
  border-color: rgba(42, 27, 16, 0.34) !important;
}

.sn-theme-toggle__day,
.sn-theme-toggle__night {
  opacity: 0.52 !important;
}

body.light-mode .sn-theme-toggle__day,
body:not(.light-mode) .sn-theme-toggle__night {
  opacity: 1 !important;
}

.sn-theme-toggle__state {
  display: none !important;
}

/* Footer horizontal line: copyright text and icons in one centered span */
.site-footer {
  text-align: center !important;
}
.site-footer__inner {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}
.site-footer__line {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(14px, 2vw, 28px) !important;
  flex-wrap: wrap !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}
.site-footer__line .footer-note {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  white-space: nowrap !important;
  text-align: center !important;
}
.site-footer__line .footer-social {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
}
@media (max-width: 520px) {
  .site-footer__line {
    gap: 12px !important;
  }
  .site-footer__line .footer-social {
    flex-wrap: wrap !important;
  }
}

/* Recognizable YouTube footer icon */
.footer-social__link--youtube svg.footer-social__youtube-logo {
  width: 1.75rem !important;
  height: 1.75rem !important;
}

.footer-social__link--youtube .footer-social__youtube-red {
  fill: #ff0000 !important;
  stroke: none !important;
}

.footer-social__link--youtube .footer-social__youtube-play {
  fill: #ffffff !important;
  stroke: none !important;
}

.footer-social__link--youtube:hover .footer-social__youtube-red,
.footer-social__link--youtube:focus-visible .footer-social__youtube-red {
  filter: brightness(1.1);
}


/* Dark default: hide day/night toggle and prevent saved light mode from showing. */
.sn-theme-toggle,
.theme-switch,
.theme-toggle,
#themeToggle,
[data-theme-toggle] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body:not(.light-mode),
body:not(.light-mode) .site-shell,
body:not(.light-mode) .page-shell {
  background: #050505 !important;
  color: var(--ink, #f7f2e8) !important;
}


/* Dark is the only public theme now. Keep old cached light-mode preferences from making pages white. */
html.sn-dark-default body,
html.sn-dark-default body.light-mode,
html.sn-dark-default body.light-mode .site-shell,
html.sn-dark-default body.light-mode .page-scope,
html.sn-dark-default body.light-mode main,
html.sn-dark-default body.light-mode section,
html.sn-dark-default body.light-mode article,
html.sn-dark-default body.light-mode .container,
html.sn-dark-default body.light-mode .site-header,
html.sn-dark-default body.light-mode .site-footer,
html.sn-dark-default body.light-mode .site-footer__inner,
html.sn-dark-default body.light-mode .video-section,
html.sn-dark-default body.light-mode .project-page,
html.sn-dark-default body.light-mode #sn-about-main,
html.sn-dark-default body.light-mode #sn-about-main .sn-about-wrap {
  background: #000000 !important;
  color: #ffffe9 !important;
}

html.sn-dark-default .sn-theme-toggle,
html.sn-dark-default .theme-switch,
html.sn-dark-default .theme-toggle,
html.sn-dark-default #themeToggle,
html.sn-dark-default [data-theme-toggle] {
  display: none !important;
}

/* =========================================================
   Mobile title correction
   - Keep Director of Photography visible on mobile
   - Do not enlarge/restyle .main-logo, which caused an extra name/wordmark to appear
   - Make the Savannah Newborn title span the same visual width as the grid
   ========================================================= */
@media (max-width: 980px) {
  .menu-title {
    width: var(--sn-home-width, min(92vw, 1440px)) !important;
    max-width: calc(100vw - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .menu-title svg {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .menu-title svg text {
    font-family: var(--sn-font-head, Georgia, 'Times New Roman', serif) !important;
    letter-spacing: 0.34em !important;
  }

  .menu-subtitle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: var(--sn-home-width, min(92vw, 1440px)) !important;
    max-width: calc(100vw - 32px) !important;
    margin: 10px auto 0 !important;
    font-family: var(--sn-font-body, Arial, sans-serif) !important;
    font-size: clamp(13px, 3.2vw, 16px) !important;
    line-height: 1.18 !important;
    letter-spacing: 0.16em !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: normal !important;
  }

  .main-logo {
    width: 100% !important;
    max-width: 100% !important;
  }

  .main-logo a {
    width: auto !important;
  }

  .main-logo img {
    width: min(85%, 600px) !important;
    max-width: 600px !important;
  }
}

@media (max-width: 640px) {
  .menu-title {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }

  .menu-title svg text {
    letter-spacing: 0.25em !important;
  }

  .menu-subtitle {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    font-size: clamp(12px, 3.55vw, 15px) !important;
    letter-spacing: 0.13em !important;
  }
}

@media (max-width: 420px) {
  .menu-title {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
  }

  .menu-title svg text {
    letter-spacing: 0.18em !important;
  }

  .menu-subtitle {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    font-size: 12px !important;
    letter-spacing: 0.10em !important;
  }
}

/* =========================================================
   Desktop title restore — preserve mobile rules
   - Restores the desktop Savannah Newborn title size/spacing from before today's overflow/grid-width changes
   - Applies only above 980px so mobile Director of Photography/title fixes stay unchanged
   ========================================================= */
@media (min-width: 981px) {
  .site-header .static-menu {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .menu-title {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .menu-title svg {
    width: 100% !important;
    max-width: none !important;
    max-height: 96px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
  }

  .menu-title svg text,
  .menu-title text {
    letter-spacing: 0.55em !important;
  }

  .menu-subtitle {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
  }
}

@media (min-width: 982px) and (max-width: 1200px) {
  .menu-title svg {
    max-height: 96px !important;
  }

  .menu-title svg text,
  .menu-title text {
    letter-spacing: 0.55em !important;
  }
}


/* Live cleanup: hide legacy duplicate cinematic overlay footer/menu if old markup is still present. */
.overlay-menu .menu-footer,
.overlay-menu .menu-list,
.overlay-menu .menu-reel { display: none !important; }

/* Live cleanup: keep dark as default and hide old theme switch markup. */
#themeToggle,
.theme-toggle,
.day-night-toggle,
.left-rail__group { display: none !important; }


/* =========================================================
   CSS AUDIT CONSOLIDATION — final intended overrides
   - Dark is default, toggle hidden
   - Desktop title restored to previous larger full-width treatment
   - Mobile title remains separate and does not affect desktop
   - Footer text/icons remain horizontal and centered
   ========================================================= */
html:not(.light-mode),
html.sn-dark-default,
body:not(.light-mode) {
  background: var(--sn-black, #000000) !important;
  color: var(--sn-cream, #ffffe9) !important;
}

.sn-theme-toggle,
.theme-switch,
.theme-toggle,
#themeToggle,
[data-theme-toggle],
.day-night-toggle {
  display: none !important;
}

@media (min-width: 981px) {
  .site-header .static-menu,
  .menu-title,
  .menu-subtitle {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .menu-title svg {
    width: 100% !important;
    max-width: none !important;
    max-height: 96px !important;
    overflow: visible !important;
  }

  .menu-title svg text,
  .menu-title text {
    letter-spacing: 0.55em !important;
  }
}

@media (max-width: 980px) {
  .menu-title {
    width: var(--sn-home-width, min(92vw, 1440px)) !important;
    max-width: calc(100vw - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .menu-title svg {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .menu-title svg text,
  .menu-title text {
    font-family: var(--sn-font-head, Georgia, 'Times New Roman', serif) !important;
    letter-spacing: 0.34em !important;
  }

  .menu-subtitle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: var(--sn-home-width, min(92vw, 1440px)) !important;
    max-width: calc(100vw - 32px) !important;
    margin: 10px auto 0 !important;
    font-family: var(--sn-font-body, Arial, sans-serif) !important;
    font-size: clamp(13px, 3.2vw, 16px) !important;
    line-height: 1.18 !important;
    letter-spacing: 0.16em !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: normal !important;
  }

  .main-logo {
    width: 100% !important;
    max-width: 100% !important;
  }

  .main-logo a {
    width: auto !important;
  }

  .main-logo img {
    width: min(85%, 600px) !important;
    max-width: 600px !important;
  }
}

@media (max-width: 640px) {
  .menu-title {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }

  .menu-title svg text,
  .menu-title text {
    letter-spacing: 0.25em !important;
  }

  .menu-subtitle {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    font-size: clamp(12px, 3.55vw, 15px) !important;
    letter-spacing: 0.13em !important;
  }
}

@media (max-width: 420px) {
  .menu-title {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
  }

  .menu-title svg text,
  .menu-title text {
    letter-spacing: 0.18em !important;
  }

  .menu-subtitle {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    font-size: 12px !important;
    letter-spacing: 0.10em !important;
  }
}

.site-footer__line,
.site-footer .site-footer__line {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.site-footer__line .footer-social {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Final social icon visibility fix: About section + footer */
.sn-about-social-row,
.footer-social {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 14px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.sn-about-social-row {
  justify-content: flex-start !important;
  margin: 22px 0 0 !important;
  width: 100% !important;
  clear: both !important;
}

.site-footer__line .footer-social,
.site-footer .footer-social {
  justify-content: center !important;
}

.sn-about-social-link,
.footer-social__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  flex: 0 0 42px !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: var(--text, #ffffe9) !important;
  border: 1px solid rgba(255,255,233,.32) !important;
  background: rgba(255,255,233,.03) !important;
  text-decoration: none !important;
}

.sn-about-social-link svg,
.footer-social__link svg {
  display: block !important;
  width: 23px !important;
  height: 23px !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-social__link--imdb,
.footer-social__link--imdb svg {
  width: 58px !important;
  min-width: 58px !important;
  flex-basis: 58px !important;
}

.footer-social__link--imdb svg text {
  fill: currentColor !important;
  stroke: none !important;
}

.sn-about-social-link--youtube .yt-box,
.footer-social__link--youtube .footer-social__youtube-red {
  fill: #ff0000 !important;
  stroke: #ff0000 !important;
}

.sn-about-social-link--youtube .yt-play,
.footer-social__link--youtube .footer-social__youtube-play {
  fill: #fff !important;
  stroke: none !important;
}


/* Final social icon placement fix: centered About row + visible centered footer row. */
.sn-about-copy-block .sn-about-social-row,
.sn-about-social-row--bio {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 24px auto 28px !important;
  padding: 0 !important;
  clear: both !important;
  flex-wrap: nowrap !important;
  text-align: center !important;
}
.sn-about-social-link {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: var(--sn-cream, #ffffe9) !important;
  border: 1px solid rgba(255,255,233,.42) !important;
  border-radius: 999px !important;
  text-decoration: none !important;
}
.sn-about-social-link svg {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  overflow: visible !important;
}
.sn-about-social-link--youtube .yt-box,
.footer-social__link--youtube .footer-social__youtube-red {
  fill: #ff0000 !important;
  stroke: #ff0000 !important;
}
.sn-about-social-link--youtube .yt-play,
.footer-social__link--youtube .footer-social__youtube-play {
  fill: #fff !important;
  stroke: none !important;
}
.site-footer,
.site-footer .container,
.site-footer__inner {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.site-footer__line {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  width: 100% !important;
  text-align: center !important;
  flex-wrap: wrap !important;
}
.site-footer__line .footer-social,
.site-footer .footer-social {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.footer-social__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  color: var(--sn-cream, #ffffe9) !important;
  border: 1px solid rgba(255,255,233,.32) !important;
  border-radius: 999px !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.footer-social__link svg {
  display: block !important;
  width: 21px !important;
  height: 21px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  overflow: visible !important;
}
.footer-social__link--imdb,
.footer-social__link--imdb svg {
  width: 54px !important;
  flex-basis: 54px !important;
}
.footer-social__link--imdb svg text {
  fill: currentColor !important;
  stroke: none !important;
}
@media (max-width: 700px) {
  .site-footer__line {
    flex-direction: column !important;
    gap: 12px !important;
  }
}

/* Footer social icons: remove circular button treatment, keep icons centered/visible. */
.site-footer .footer-social__link,
.site-footer__line .footer-social__link,
.footer-social .footer-social__link {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline-offset: 4px !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  flex: 0 0 auto !important;
  padding: 0 4px !important;
}
.site-footer .footer-social__link:hover,
.site-footer .footer-social__link:focus-visible {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.site-footer .footer-social__link svg,
.footer-social .footer-social__link svg {
  width: 24px !important;
  height: 24px !important;
}
.site-footer .footer-social__link--imdb svg,
.footer-social .footer-social__link--imdb svg {
  width: 58px !important;
  height: 24px !important;
}

/* Final footer alignment override: copyright left, social icons centered */
.site-footer .site-footer__inner.site-footer__line {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 44px !important;
  gap: 1rem !important;
  text-align: center !important;
}

.site-footer .site-footer__line .footer-note {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.site-footer .site-footer__line .footer-social {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.8rem !important;
  margin: 0 auto !important;
}

@media (max-width: 640px) {
  .site-footer .site-footer__inner.site-footer__line {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    row-gap: 0.65rem !important;
  }

  .site-footer .site-footer__line .footer-note {
    position: static !important;
    transform: none !important;
    width: 100% !important;
  }

  .site-footer .site-footer__line .footer-social {
    margin: 0 !important;
    justify-content: flex-start !important;
  }
}

/* Final desktop title tune: larger title, wider spacing, mobile untouched. */
@media (min-width: 901px) {
  .menu-title {
    width: min(100%, 1120px) !important;
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
  }

  .menu-title svg {
    display: block !important;
    width: 100% !important;
    max-width: 1120px !important;
    height: auto !important;
    max-height: 118px !important;
    overflow: visible !important;
  }

  .menu-title svg text,
  .menu-title text {
    font-size: 96px !important;
    letter-spacing: 0.62em !important;
  }

  .menu-subtitle {
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    letter-spacing: 0.24em !important;
  }
}

/* =========================================================
   Desktop title actual larger fix — mobile untouched
   Fixes prior change that made the wordmark appear smaller by
   restoring full-width desktop scaling and increasing text size.
   ========================================================= */
@media (min-width: 901px) {
  .site-header .static-menu {
    width: 100% !important;
    max-width: none !important;
  }

  .menu-title {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
  }

  .menu-title svg {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: clamp(100px, 9vw, 148px) !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .menu-title svg text,
  .menu-title text {
    font-size: 116px !important;
    letter-spacing: 0.50em !important;
  }

  .menu-subtitle {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
    letter-spacing: 0.22em !important;
  }
}

@media (min-width: 982px) and (max-width: 1200px) {
  .menu-title svg {
    height: clamp(104px, 10vw, 132px) !important;
  }

  .menu-title svg text,
  .menu-title text {
    font-size: 112px !important;
    letter-spacing: 0.46em !important;
  }
}

/* =========================================================
   Narrow mobile title overflow + subtitle gap fix
   - Targets the 653–667px overflow band without changing desktop
   - Tightens the title-to-subtitle spacing below 500px
   ========================================================= */
@media (min-width: 653px) and (max-width: 667px) {
  .menu-title {
    width: calc(100vw - 34px) !important;
    max-width: calc(100vw - 34px) !important;
    overflow: hidden !important;
  }

  .menu-title svg {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  .menu-title svg text,
  .menu-title text {
    font-size: 104px !important;
    letter-spacing: 0.28em !important;
  }

  .menu-subtitle {
    margin-top: 6px !important;
  }
}

@media (max-width: 500px) {
  .menu-title {
    margin-bottom: 0 !important;
  }

  .menu-title svg {
    margin-bottom: 0 !important;
  }

  .menu-subtitle {
    margin-top: 2px !important;
    padding-top: 0 !important;
    line-height: 1.08 !important;
  }
}

/* =========================================================
   Final title gap + sub-500 overflow fix
   Mirrors shared CSS for pages that load canva-theme.css directly.
   ========================================================= */
.menu-title {
  margin-bottom: 0 !important;
}

.menu-title svg {
  margin-bottom: 0 !important;
}

.menu-subtitle {
  margin-top: clamp(2px, 0.45vw, 8px) !important;
  padding-top: 0 !important;
}

@media (max-width: 500px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  .site-header,
  .static-menu,
  .menu-title,
  .menu-subtitle {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .menu-title {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;
  }

  .menu-title svg {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(58px, 17vw, 82px) !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
  }

  .menu-title svg text,
  .menu-title text {
    font-size: clamp(72px, 20vw, 96px) !important;
    letter-spacing: clamp(0.12em, 3.3vw, 0.22em) !important;
  }

  .menu-subtitle {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    margin: 0 auto !important;
    padding-top: 0 !important;
    line-height: 1.02 !important;
    letter-spacing: clamp(0.08em, 2.2vw, 0.14em) !important;
  }
}

/* FINAL OVERRIDE: force title/subtitle spacing to 15px sitewide */
.menu-title,
.brand-title,
.hero-title,
.site-title,
.home-title {
  margin-bottom: 0 !important;
}

.menu-subtitle,
.brand-subtitle,
.hero-subtitle,
.site-subtitle,
.home-subtitle,
.director-title,
.title-subtitle {
  margin-top: 15px !important;
}

.menu-title + .menu-subtitle,
.brand-title + .brand-subtitle,
.hero-title + .hero-subtitle,
.site-title + .site-subtitle,
.home-title + .home-subtitle,
.title-stack .menu-subtitle,
.title-stack .brand-subtitle,
.title-lockup .menu-subtitle,
.title-lockup .brand-subtitle {
  margin-top: 15px !important;
}

@media (max-width: 500px) {
  .menu-title + .menu-subtitle,
  .brand-title + .brand-subtitle,
  .hero-title + .hero-subtitle,
  .site-title + .site-subtitle,
  .home-title + .home-subtitle,
  .title-stack .menu-subtitle,
  .title-stack .brand-subtitle,
  .title-lockup .menu-subtitle,
  .title-lockup .brand-subtitle {
    margin-top: 15px !important;
  }
}

/* Force title/subtitle gap to zero sitewide */
.menu-title,
.hero-title,
.site-title,
.name-title {
  margin-bottom: 0 !important;
}
.menu-subtitle,
.hero-subtitle,
.site-subtitle,
.title-subtitle,
.director-subtitle {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.menu-title + .menu-subtitle,
.hero-title + .hero-subtitle,
.site-title + .site-subtitle,
.name-title + .director-subtitle {
  margin-top: 0 !important;
}

/* =========================================================
   SAFE CONTAINER WIDTH UPDATE
   Main site containers use 90% viewport width, capped at 1440px.
   This changes the wrapper variable only, avoiding broad layout overrides
   that can break nested grids/cards.
   ========================================================= */
:root {
  --sn-home-width: min(98vw, 1600px) !important;
  --sn-project-width: min(98vw, 1600px) !important;
}

.container,
.topbar-inner,
.project-page .container,
#sn-about-main .sn-about-wrap,
.site-footer > .container {
  width: var(--sn-home-width) !important;
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 900px) {
  :root {
    --sn-home-width: calc(100vw - 28px) !important;
    --sn-project-width: calc(100vw - 28px) !important;
  }
}

/* Targeted fix: prevent title overflow at 640-650px without changing desktop/mobile defaults */
@media (min-width: 640px) and (max-width: 650px) {
  .menu-title,
  .brand-title,
  .hero-title,
  .site-title,
  .home-title,
  .name-title,
  .title-lockup,
  .title-stack {
    width: calc(100vw - 36px) !important;
    max-width: calc(100vw - 36px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
  }

  .menu-title svg,
  .brand-title svg,
  .hero-title svg,
  .site-title svg,
  .home-title svg {
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(60px, 13.5vw, 78px) !important;
    overflow: visible !important;
  }

  .menu-title svg text,
  .menu-title text,
  .brand-title svg text,
  .hero-title svg text,
  .site-title svg text,
  .home-title svg text {
    font-size: clamp(66px, 14.6vw, 86px) !important;
    letter-spacing: clamp(0.08em, 1.9vw, 0.13em) !important;
  }
}