/*
  MohsenVision light-background brand policy
  Shell White is the only solid surface/background color.
  Charcoal and Oxblood are reserved for typography and borders.
  Gold is reserved for text placed over dark photographic overlays.
*/
:root {
  color-scheme: light;
  --color-shell-white: #F5F1E9;
  --color-charcoal-black: #292725;
  --color-oxblood: #5B202D;
  --color-gold: #B38A54;

  /* Legacy token remapping: prevent older components from restoring dark panels. */
  --black: var(--color-shell-white);
  --dark: var(--color-shell-white);
  --mid: var(--color-shell-white);
  --warm-white: var(--color-shell-white);
  --cream: var(--color-shell-white);
  --gold: var(--color-oxblood);
  --gold-light: var(--color-oxblood);
  --muted: var(--color-charcoal-black);
  --text-body: var(--color-charcoal-black);
  --text-dim: var(--color-charcoal-black);
  --red-accent: var(--color-oxblood);

  --brand-black: var(--color-shell-white);
  --brand-charcoal: var(--color-charcoal-black);
  --brand-surface: var(--color-shell-white);
  --brand-surface-2: var(--color-shell-white);
  --brand-white: var(--color-charcoal-black);
  --brand-yellow: var(--color-oxblood);
  --brand-yellow-bright: var(--color-oxblood);
  --brand-gold-deep: var(--color-oxblood);
  --brand-stone: var(--color-charcoal-black);
  --brand-muted: var(--color-charcoal-black);
  --brand-olive: var(--color-oxblood);
  --brand-border: rgba(41,39,37,.20);
}

html, body {
  background-color: var(--color-shell-white) !important;
  color: var(--color-charcoal-black);
  color-scheme: light;
}
body { background: var(--color-shell-white) !important; color: var(--color-charcoal-black) !important; }

/* All ordinary page sections and structural surfaces stay Shell White. */
main, header, footer, section, article, aside,
#about, #education, #work, #videos, #photography, #services, #contact,
.site-header, .mobile-nav, .desktop-nav,
.stat-item, .service-card, .video-card, .photo-card,
.form-input, .form-textarea, .form-success, .contact-link,
.video-frame, .video-embed, .video-player,
.lang-toggle, .lang-toggle-mobile {
  background-color: var(--color-shell-white) !important;
  color: var(--color-charcoal-black);
}

/* The full-bleed photographs remain image surfaces; their uncovered canvas is Shell White. */
#hero, .hero-carousel, .carousel-container, .carousel-slide {
  background-color: var(--color-shell-white) !important;
}

/* Base typography: Charcoal for primary reading, Oxblood for selected emphasis. */
body, p, li, label, small, address, blockquote,
.about-text, .edu-desc, .service-desc, .contact-intro,
.stat-label, .memberships-title, .membership-item,
.edu-institution, .film-role, .footer-copy,
.nav-links a, .footer-links a, .work-tab,
.contact-link-value, .form-label,
.form-input, .form-textarea, .video-card-title, .video-title, .video-meta {
  color: var(--color-charcoal-black) !important;
}

h1, h2, h3, h4, h5, h6,
.section-title, .hero-title, .film-title, .edu-degree, .service-name {
  color: var(--color-charcoal-black) !important;
}
.section-title em, h1 em, h2 em, h3 em, h4 em,
.section-label, .about-text strong, .stat-num,
.edu-year, .film-year, .film-role.dir,
.work-tab.active, .work-tab:hover,
.service-num, .service-icon, .nav-links a:hover,
.footer-links a:hover, .footer-name,
.contact-link:hover .contact-link-value,
a:not(.hero-content a):hover {
  color: var(--color-oxblood) !important;
}

/* Header/navigation: light surfaces, dark text, Oxblood states. */
.site-header, .site-header.scrolled, nav, nav.scrolled {
  background: rgba(245,241,233,.97) !important;
  background-color: var(--color-shell-white) !important;
  border-bottom: 1px solid var(--brand-border) !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-header .nav-logo, .nav-logo { color: var(--color-oxblood) !important; }
.desktop-nav, .desktop-nav .nav-links { background: transparent !important; }
.desktop-nav .nav-links a, .nav-links a { color: var(--color-charcoal-black) !important; }
.desktop-nav .nav-links a:hover, .nav-links a:hover { color: var(--color-oxblood) !important; }
.desktop-nav .nav-links a::after, .nav-links a::after {
  background: transparent !important;
  border-bottom: 1px solid var(--color-oxblood);
}
.lang-toggle, .lang-toggle-mobile { border: 1px solid rgba(91,32,45,.35) !important; }
.lang-toggle a, .lang-toggle-mobile a,
.lang-toggle button, .lang-toggle-mobile button { color: var(--color-charcoal-black) !important; }
.lang-toggle a.active, .lang-toggle-mobile a.active,
.lang-toggle button.active, .lang-toggle-mobile button.active {
  background: var(--color-shell-white) !important;
  color: var(--color-oxblood) !important;
  box-shadow: inset 0 -2px 0 var(--color-oxblood);
}
.nav-hamburger { background: transparent !important; color: var(--color-charcoal-black) !important; }
.nav-hamburger span { background: transparent !important; border-top: 1px solid var(--color-charcoal-black); }
.mobile-nav { background: var(--color-shell-white) !important; border-inline-start: 1px solid var(--brand-border); }
.mobile-nav a { color: var(--color-charcoal-black) !important; }
.mobile-nav a:hover { color: var(--color-oxblood) !important; }

/* Section titles and page content on Shell White. */
#about, #education, #work, #videos, #photography, #services, #contact,
footer { background: var(--color-shell-white) !important; color: var(--color-charcoal-black) !important; }
#about .section-title, #education .section-title, #work .section-title,
#videos .section-title, #photography .section-title, #services .section-title,
#contact .section-title { color: var(--color-charcoal-black) !important; }
#about .section-title em, #education .section-title em, #work .section-title em,
#videos .section-title em, #photography .section-title em,
#services .section-title em, #contact .section-title em { color: var(--color-oxblood) !important; }
.section-label { color: var(--color-oxblood) !important; }
.section-label::before { background: transparent !important; border-top: 1px solid var(--color-oxblood); }
.about-text, .about-text strong, .edu-desc, .edu-institution,
.membership-item, .stat-label, .service-desc, .contact-intro,
.contact-link-value, .footer-copy { color: var(--color-charcoal-black) !important; }
.about-text strong, .memberships-title { color: var(--color-oxblood) !important; }
.about-portrait { border-color: rgba(91,32,45,.36) !important; box-shadow: 18px 18px 0 rgba(91,32,45,.045) !important; }
.stat-item { border: 1px solid rgba(91,32,45,.24) !important; }
.stat-num, .edu-year, .film-year, .service-num, .service-icon { color: var(--color-oxblood) !important; }
.edu-item, .film-item, .work-tabs { border-color: var(--brand-border) !important; }
.edu-item::before { background: transparent !important; border-inline-start: 1px solid var(--color-oxblood); }
.work-tab { color: var(--color-charcoal-black) !important; }
.work-tab.active, .work-tab:hover { color: var(--color-oxblood) !important; border-bottom-color: var(--color-oxblood) !important; }
.film-title, .edu-degree, .service-name { color: var(--color-charcoal-black) !important; }
.film-title span + span, .film-role { color: var(--color-charcoal-black) !important; }
.film-role.dir { color: var(--color-oxblood) !important; border-color: rgba(91,32,45,.35) !important; }
.film-item:hover { background: transparent !important; }

/* Cards, galleries, buttons and forms: no charcoal/oxblood/gold fills. */
.services-grid { background: var(--color-shell-white) !important; border-color: rgba(41,39,37,.18) !important; }
.service-card, .service-card:hover,
.video-card, .video-card:hover, .video-card:focus-visible,
.photo-card { background: var(--color-shell-white) !important; color: var(--color-charcoal-black) !important; }
.service-name { color: var(--color-charcoal-black) !important; }
.service-desc, .video-card-title, .video-title, .video-meta { color: var(--color-charcoal-black) !important; }
.photo-card { border: 1px solid rgba(41,39,37,.12); }
.photo-card img { filter: none !important; }
.photo-card:hover img, .photo-card:focus-within img { filter: none !important; }
.photo-overlay { background: linear-gradient(0deg, rgba(0,0,0,.70), rgba(0,0,0,0) 68%) !important; }
.photo-overlay-text { color: var(--color-gold) !important; }

.btn-primary, .btn-primary:hover, .form-submit, .form-submit:hover,
.hero-cta .btn-primary, .hero-cta .btn-primary:hover {
  background: var(--color-shell-white) !important;
  color: var(--color-oxblood) !important;
  border: 1px solid var(--color-oxblood) !important;
  box-shadow: none !important;
}
.btn-ghost, .btn-ghost:hover, .hero-cta .btn-ghost, .hero-cta .btn-ghost:hover {
  background: transparent !important;
  color: var(--color-charcoal-black) !important;
  border: 1px solid var(--color-charcoal-black) !important;
}
.contact-link { background: var(--color-shell-white) !important; border-color: rgba(91,32,45,.28) !important; }
.contact-link:hover { background: var(--color-shell-white) !important; border-color: var(--color-oxblood) !important; }
.contact-link-icon { color: var(--color-oxblood) !important; }
.form-input, .form-textarea { background: var(--color-shell-white) !important; color: var(--color-charcoal-black) !important; border-color: rgba(41,39,37,.3) !important; }
.form-input:focus, .form-textarea:focus { border-color: var(--color-oxblood) !important; outline-color: var(--color-oxblood) !important; }
.form-input::placeholder, .form-textarea::placeholder { color: rgba(41,39,37,.62) !important; }
.form-submit { background: var(--color-shell-white) !important; color: var(--color-oxblood) !important; border-color: var(--color-oxblood) !important; }
.form-success { background: var(--color-shell-white) !important; color: var(--color-oxblood) !important; border-color: var(--color-oxblood) !important; }

/* Homepage image is photographic, not a charcoal or oxblood color panel. */
#hero, .hero-carousel, .carousel-container, .carousel-slide { background: var(--color-shell-white) !important; }
.carousel-slide img { filter: none !important; }
.carousel-container:hover .carousel-slide img { filter: none !important; }
/* A neutral translucent black vignette is confined to photographs for legibility. */
.hero-carousel::after {
  background: linear-gradient(90deg, rgba(0,0,0,0) 28%, rgba(0,0,0,.10) 54%, rgba(0,0,0,.34) 100%),
              linear-gradient(0deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.08) 34%, rgba(0,0,0,0) 72%) !important;
}
#hero.identity-visible .hero-carousel::after {
  background: linear-gradient(90deg, rgba(0,0,0,0) 28%, rgba(0,0,0,.10) 54%, rgba(0,0,0,.38) 100%),
              linear-gradient(0deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.12) 37%, rgba(0,0,0,0) 72%) !important;
}
.hero-content { color: var(--color-shell-white) !important; }
.hero-eyebrow, .hero-title em, .hero-counter { color: var(--color-gold) !important; }
.hero-title { color: var(--color-shell-white) !important; }
.hero-subtitle, .hero-scroll { color: var(--color-shell-white) !important; }
.hero-scroll::before { background: transparent !important; border-top: 1px solid rgba(245,241,233,.9); }
.carousel-btn {
  background: rgba(245,241,233,.92) !important;
  border-color: rgba(41,39,37,.32) !important;
  color: var(--color-charcoal-black) !important;
  backdrop-filter: none !important;
}
.carousel-btn:hover, .carousel-btn:focus-visible {
  background: var(--color-shell-white) !important;
  border-color: var(--color-oxblood) !important;
  color: var(--color-oxblood) !important;
}
.carousel-indicators { background: rgba(245,241,233,.92) !important; border-color: rgba(41,39,37,.22) !important; }
.carousel-dot { background: transparent !important; border-color: var(--color-charcoal-black) !important; }
.carousel-dot.active { background: transparent !important; border-color: var(--color-oxblood) !important; }
.carousel-dot:hover:not(.active) { background: transparent !important; }

/* Footer is also Shell White; Gold is not used on light surfaces. */
footer { background: var(--color-shell-white) !important; color: var(--color-charcoal-black) !important; border-top: 1px solid var(--brand-border) !important; }
footer .footer-name { color: var(--color-oxblood) !important; }
footer .footer-copy, footer .footer-links a { color: var(--color-charcoal-black) !important; }
footer .footer-links a:hover { color: var(--color-oxblood) !important; }

/* Gold is used only for textual accents over dark photographic treatments. */
:where(a, button, input, textarea, select):focus-visible { outline: 2px solid var(--color-oxblood) !important; outline-offset: 3px; }
.cursor, .cursor-ring { display: none !important; background: transparent !important; border-color: var(--color-oxblood) !important; }
.progress-bar { background: transparent !important; }

/* Video landing pages and other independent routes use the same light palette. */

/* Higher-specificity cleanup for legacy section-specific theme rules. */
#about .stat-label, #about .membership-item,
#education .edu-degree, #education .edu-institution, #education .edu-desc,
#work .film-title, #work .film-title span + span, #work .film-role,
#videos .video-card-title, #videos .video-title, #videos .video-meta,
#contact .contact-intro, #contact .contact-link-value,
#services .service-name, #services .service-desc,
footer .footer-copy, footer .footer-links a {
  color: var(--color-charcoal-black) !important;
}
#about .stat-num, #education .edu-year, #work .film-year,
#work .film-role.dir, #services .service-icon, #services .service-num,
#contact .contact-link-icon, .section-label,
#about .memberships-title {
  color: var(--color-oxblood) !important;
}
#education .section-label::before, #photography .section-label::before,
#videos .section-label::before, #contact .section-label::before,
#about .section-label::before, #work .section-label::before,
#services .section-label::before {
  background: transparent !important;
  border-top: 1px solid var(--color-oxblood) !important;
}
#education .edu-item::before {
  background: transparent !important;
  border-inline-start: 1px solid var(--color-oxblood) !important;
}
#about .membership-item { border-bottom-color: rgba(41,39,37,.18) !important; }
#contact .contact-link:hover {
  background: var(--color-shell-white) !important;
  border-color: var(--color-oxblood) !important;
}
#contact .contact-link-icon { color: var(--color-oxblood) !important; }
#contact .form-submit, #contact .form-submit:hover {
  background: var(--color-shell-white) !important;
  color: var(--color-oxblood) !important;
  border-color: var(--color-oxblood) !important;
}
#contact .form-success {
  background: var(--color-shell-white) !important;
  color: var(--color-oxblood) !important;
  border-color: var(--color-oxblood) !important;
}
#work .film-role.dir { border-color: rgba(91,32,45,.35) !important; }
#about .about-portrait { border-color: rgba(91,32,45,.36) !important; }
#hero .hero-scroll::before { background: transparent !important; border-top-color: rgba(245,241,233,.9) !important; }

/* Remove remaining Gold non-text decoration and legacy dark fills. */
.hero-line, html[dir="rtl"] .hero-line { background: transparent !important; }
.cursor, .cursor-ring { border-color: var(--color-oxblood) !important; }
.carousel-btn, .carousel-btn:hover, .carousel-btn:focus-visible,
.carousel-indicators, .carousel-dot, .carousel-dot.active {
  border-color: var(--color-oxblood) !important;
}
#about .about-portrait { box-shadow: 12px 12px 0 rgba(91,32,45,.045) !important; }
#education .edu-item::before { border-inline-start-color: var(--color-oxblood) !important; }
#contact .form-input:focus, #contact .form-textarea:focus { border-color: var(--color-oxblood) !important; }
#contact .form-success { border-color: var(--color-oxblood) !important; }
#hero .hero-cta .btn-primary, #hero .hero-cta .btn-primary:hover,
#hero .hero-cta .btn-ghost, #hero .hero-cta .btn-ghost:hover {
  border-color: var(--color-shell-white) !important;
}

/* Explicitly constrain all non-photographic content blocks to Shell White. */
#about .stat-item, #education .edu-item, #work .film-item,
#videos .video-card, #photography .photo-card,
#services .service-card, #contact .contact-link,
#contact .form-input, #contact .form-textarea,
#contact .form-submit, #contact .form-success,
footer, .mobile-nav, .site-header, .lang-toggle, .lang-toggle-mobile {
  background-color: var(--color-shell-white) !important;
}
#about .stat-num, #education .edu-year, #work .film-year,
#work .film-role.dir, #services .service-num, #services .service-icon,
#contact .contact-link-icon, .section-label, #about .memberships-title {
  color: var(--color-oxblood) !important;
}
.video-launcher, .video-player, .video-frame, .video-embed {
  background: var(--color-shell-white) !important;
  background-color: var(--color-shell-white) !important;
}
.video-launcher::after {
  background: rgba(0,0,0,.16) !important;
  color: var(--color-shell-white) !important;
}
.video-card:focus-visible { background: var(--color-shell-white) !important; border-color: var(--color-oxblood) !important; }
.membership-item::before { color: var(--color-oxblood) !important; }
.film-title a:hover, .film-title a:focus-visible { color: var(--color-oxblood) !important; }
body::before { display: none !important; }
a, a:visited { color: var(--color-oxblood); }
.hero-content a, .hero-content a:visited { color: var(--color-oxblood); }


/* Native cursor restoration: never hide the user's system pointer. */
html, body { cursor: auto !important; }
html body a, html body button, html body [role="button"],
html body summary, html body select,
html body input[type="button"], html body input[type="submit"], html body input[type="reset"] {
  cursor: pointer !important;
}
html body input:not([type="button"]):not([type="submit"]):not([type="reset"]),
html body textarea, html body [contenteditable="true"] { cursor: text !important; }
.cursor, .cursor-ring { display: none !important; }