/* V9: curated home, compact contact, and a complete light palette. */
:root {
  --surface: #101b28;
  --surface-soft: #0d1723;
  --surface-field: #091420;
  --field-text: #eff4f7;
  --subtle-text: #a8b9c8;
  --edge: #ffffff25;
  --beam: 71, 169, 224;
}
body,.header,.quick-nav,.contact-form,.guide-card,.organizations,footer {
  transition: background-color .28s ease, color .28s ease, border-color .28s ease;
}
.theme-toggle {
  width:44px; height:44px; min-width:44px; padding:11px;
  border:1px solid var(--edge); border-radius:50%;
  color:inherit; background:transparent;
}
.theme-toggle svg {width:20px;height:20px;flex-shrink:0}
.theme-toggle:hover {background:#ffffff12}
.theme-moon {display:none}
html[data-theme=light] .theme-sun {display:none}
html[data-theme=light] .theme-moon {display:block}

/* Four distinct scenes, same dimensions and no stretched tall portrait. */
.home-mosaic {grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:1480px}
.home-mosaic .home-photo,
.home-mosaic .home-photo:first-child,
.home-mosaic .home-photo:nth-child(4) {
  grid-column:auto;grid-row:auto;aspect-ratio:3/2;border-radius:20px;
}
.home-photo img {object-position:center;object-fit:cover}
.home-photo .photo-label {padding:40px 24px 22px}

/* Ten quiet thumbnails fit as a single strip on wide screens. */
.hero-bottom {
  display:grid;grid-template-columns:minmax(100px,1fr) minmax(0,590px) minmax(100px,1fr);
  align-items:center;gap:24px;bottom:35px;
}
.hero-caption {max-width:220px;line-height:1.6}
.hero-selector {
  display:grid;grid-template-columns:repeat(10,minmax(0,1fr));
  width:100%;gap:5px;padding:7px;border-radius:13px;direction:ltr;
}
.hero-selector .hero-choice {width:100%;height:auto;aspect-ratio:3/2;border-radius:6px;min-width:0}
.hero-selector .hero-choice[aria-pressed=true] {transform:translateY(-2px)}
.hero-selector .hero-choice img {filter:none}
.hero-bottom .scroll-cue {justify-self:end;color:#e7eef4}
.hero-coordinate {color:#b4c8d8}

/* The glow is above the photographs, below navigation, and never catches input. */
#pointer-glow {
  width:420px;height:420px;z-index:6;pointer-events:none;
  background:radial-gradient(circle,rgba(var(--beam),.13) 0,rgba(var(--beam),.055) 26%,transparent 68%);
  mix-blend-mode:screen;transition:opacity .35s ease,transform .14s ease-out;
}
html:not([data-page=home]) #pointer-glow {display:none}
.menu-open #pointer-glow,.modal-open #pointer-glow {opacity:0}
@media(hover:none),(pointer:coarse) {#pointer-glow{display:none}}

/* Field guide: direct link and a locally generated, scan-ready QR. */
.home-guide {max-width:1480px}
.guide-card {
  display:grid;grid-template-columns:minmax(0,1fr) 220px;align-items:center;gap:70px;
  padding:clamp(30px,5vw,65px);border:1px solid #4485aa4d;border-radius:28px;
  background:radial-gradient(ellipse at 0% 100%,#0d679a2b,transparent 60%),var(--surface);
}
.guide-copy h2 {font-size:clamp(30px,3.8vw,54px);margin:18px 0}
.guide-copy p {max-width:630px;font-size:16px;line-height:1.85;margin-bottom:24px}
.guide-format {display:block;font-family:inherit;font-size:10px;line-height:1.8;letter-spacing:.08em;color:var(--subtle-text);margin-top:17px}
.guide-qr {
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:16px 16px 20px;border:1px solid #ffffff26;border-radius:20px;
  background:#ffffff07;text-align:center;transition:transform .3s,border-color .3s;
}
.guide-qr:hover {transform:translateY(-4px);border-color:var(--blue)}
.guide-qr img {width:180px;max-width:100%;height:auto;border-radius:9px;background:white}
.guide-qr strong {font-size:14px;font-weight:600;margin-top:5px}
.guide-qr span {font-size:11px;color:var(--subtle-text);line-height:1.6}

/* Contact is one compact composition. The field form keeps visible labels. */
.contact-page {max-width:1280px;padding-top:145px;padding-bottom:65px}
.contact-page .contact-layout {grid-template-columns:1fr 1.08fr;gap:clamp(32px,5vw,72px);align-items:start}
.contact-intro {padding-top:18px;min-width:0}
.contact-intro .page-heading {margin:0 0 32px}
.contact-intro .page-heading .eyebrow {font-size:9px;letter-spacing:.08em;margin-bottom:17px}
.contact-intro .page-heading h1 {font-size:clamp(34px,4vw,54px);line-height:1.25;margin-bottom:16px}
html[lang=ar] .contact-intro .page-heading h1 {line-height:1.5}
.contact-intro .page-heading p {font-size:15px;line-height:1.85;max-width:400px;margin-bottom:0}
.contact-page .contact-details {display:block}
.contact-page .availability {color:var(--subtle-text);font-size:9px;line-height:1.8;margin-bottom:15px}
.contact-page .contact-line {padding:18px 0;gap:9px}
.contact-page .contact-line>a {font-size:clamp(16px,1.7vw,23px);overflow-wrap:anywhere}
.contact-page .contact-line small {font-size:9px}
.contact-page .contact-line .text-link {font-size:10px;padding:3px 0}
.small-status:empty {display:none}
.contact-page .social-links {margin:22px 0 0;gap:7px}
.contact-page .social-links a {font-size:10px;padding:8px 11px}
.contact-page .contact-form {
  padding:27px 28px;border-radius:22px;background:var(--surface);
  border:1px solid var(--edge);box-shadow:0 15px 45px #0000000b;
}
.contact-page .contact-form h2 {font-size:23px;margin-bottom:22px;color:var(--ink)}
.contact-page .contact-form label {font-size:11px;gap:7px;margin-bottom:15px}
.contact-page .form-row {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.contact-page .contact-form input:not([type=radio]):not([type=checkbox]),.contact-page .contact-form textarea {
  background:var(--surface-field);color:var(--field-text);border:1px solid var(--edge);
  border-radius:9px;padding:10px 11px;min-height:42px;font-size:14px;
}
.contact-page .contact-form input:focus,.contact-page .contact-form textarea:focus {border-color:var(--blue);outline:2px solid var(--blue);outline-offset:2px}
.contact-page .contact-form textarea {min-height:104px}
.contact-page .contact-form label>span,.contact-page .contact-form legend {color:var(--subtle-text)}
.contact-page .contact-form fieldset {margin-bottom:15px}
.contact-page .contact-form legend {font-size:11px;margin-bottom:10px}
.contact-page .project-types {gap:6px}
.contact-page .project-types label {margin:0}
.contact-page .project-types span {font-size:10px;padding:8px 10px}
.contact-page .project-types input:checked+span {color:#fff}
.contact-page .contact-form .consent {font-size:10px;line-height:1.7;margin-top:1px;gap:9px}
.contact-page .contact-form .consent input {margin-top:3px}
.contact-page #send-message {width:100%;font-size:12px;min-height:44px;padding-block:11px}
.contact-page .form-note {font-size:10px;line-height:1.7;margin-top:12px;color:var(--subtle-text)}
.contact-page .form-status:empty {display:none}

/* Light theme: explicitly colored surfaces, never an inversion of photographs. */
html[data-theme=light] {
  --ink:#132b3c;--paper:#f5f7fa;--white:#ffffff;--navy:#dce8ef;
  --blue:#12658e;--red:#bf3038;--muted:#506675;--line:#cddae3;
  --surface:#ffffff;--surface-soft:#edf3f7;--surface-field:#f5f8fa;
  --field-text:#132b3c;--subtle-text:#526979;--edge:#c8d7e1;--beam:42,128,183;
  color-scheme:light;color:var(--ink);background:var(--paper);
}
html[data-theme=light] body {background:#f5f7fa;color:var(--ink)}
html[data-theme=light] :focus-visible {outline-color:#12658e}
html[data-theme=light] .header,html[data-theme=light] .header.solid {
  background:#fffffff2;color:#142e40;border-color:#d5e0e8;box-shadow:0 6px 30px #142e400d;
}
html[data-theme=light] .desktop-nav a {color:#4a6172}
html[data-theme=light] .desktop-nav a:hover,html[data-theme=light] .desktop-nav a[aria-current] {color:#102f43}
html[data-theme=light] .menu-toggle,html[data-theme=light] .language {border-color:#c8d7e1;background:#f5f8fa}
html[data-theme=light] .header .icon-button:hover,html[data-theme=light] .language:hover {background:#e5eff6}
html[data-theme=light] .mobile-menu {background:radial-gradient(ellipse at 20% 60%,#d8eaf5,transparent 70%),#f5f8fcfa}
html[data-theme=light] .mobile-menu a {color:#29475d;border-color:#cedee9}
html[data-theme=light] .mobile-menu a:hover,html[data-theme=light] .mobile-menu a[aria-current] {color:#103a55;background:#dcebf5}
html[data-theme=light] .quick-nav {background:#ffffffed;box-shadow:0 8px 35px #183c541a,0 0 0 1px #d4e1ea}
html[data-theme=light] .quick-nav a {color:#486275}
html[data-theme=light] .quick-nav a:hover {background:#e8f0f6;color:#193e58}
html[data-theme=light] .quick-nav a[aria-current] {background:#12658e;color:#fff}
html[data-theme=light] .quick-nav a[aria-current]>span {color:#fff}
html[data-theme=light] .page-heading h1 {background:none;color:#18364b;-webkit-text-fill-color:currentColor}
html[data-theme=light] .button {color:#173d56;border-color:#92afc2;background:#ffffff40;box-shadow:none}
html[data-theme=light] .button:hover {color:#fff;background:#174e70;border-color:#174e70}
html[data-theme=light] .button-red {color:#fff;background:#bf3038;border-color:#bf3038}
html[data-theme=light] .button-red:hover {color:#fff;background:#a5242b;border-color:#a5242b}
html[data-theme=light] .text-link {border-color:#9fb5c5}
html[data-theme=light] .statement {color:#23465e}
html[data-theme=light] .home-shortcuts>a {background:#fff;border-color:#d3e0e9}
html[data-theme=light] .home-shortcuts>a:hover {background:#edf5fa;border-color:#8eb4cd}
html[data-theme=light] .home-shortcuts strong {color:#235a7b}
html[data-theme=light] .selected-section {background:#eaf0f5}
html[data-theme=light] .home-photo {background:#dce5ed}
html[data-theme=light] .guide-card {background:radial-gradient(ellipse at 0 100%,#deedf8,transparent 65%),#ffffff;border-color:#b7d0e0}
html[data-theme=light] .guide-qr {background:#eff5f9;border-color:#c9dce8}
html[data-theme=light] .resource-card {background:#fff;border-color:#d0e0e9}
html[data-theme=light] .resource-card:first-child {background:#e4f0f8}
html[data-theme=light] .resource-card:hover {background:#d8e9f5}
html[data-theme=light] .resource-card span {color:#506e83}
html[data-theme=light] .gallery-toolbar {background:#ffffffeb;border-color:#cfdee8}
html[data-theme=light] .filters button {color:#466174}
html[data-theme=light] .filters button:hover {border-color:#a9c1d2;color:#173f5a}
html[data-theme=light] .filters button[aria-pressed=true] {background:#174f71;color:white}
html[data-theme=light] .layout-button {border-color:#bdd0de}
html[data-theme=light] .layout-button[aria-pressed=true] {background:#dcecf7;color:#144867;border-color:#91b4cb}
html[data-theme=light] .photo-meta strong {color:#243f53}
html[data-theme=light] .photo-meta small,html[data-theme=light] .collection-meta {color:#567083}
html[data-theme=light] .photo-card .photo-frame {background:#dce6ed}
html[data-theme=light] .story-row {border-color:#cddce7}
html[data-theme=light] .film-library-toolbar .filters {background:#fff;border-color:#cbdce7}
html[data-theme=light] .library-hint,html[data-theme=light] .film-footnote {color:#516e82}
html[data-theme=light] .film-text h2,html[data-theme=light] .library-card>strong {color:#173b55}
html[data-theme=light] .film-text small,html[data-theme=light] .library-card>small {color:#506e83}
html[data-theme=light] .film-selectors button {border-color:#c1d3df;color:#34576f}
html[data-theme=light] .film-selectors button[aria-pressed=true] {background:#12658e;color:white}
html[data-theme=light] .service-visual span {background:#dcecf6;color:#224e6a}
html[data-theme=light] .service-item {border-color:#cddce7}
html[data-theme=light] .service-description p {color:#4c6577}
html[data-theme=light] .service-plus {border-color:#b1c8d8}
html[data-theme=light] .process-tabs button {background:#fff;border-color:#cbdce6;color:#35576f}
html[data-theme=light] .process-tabs [aria-selected=true] {background:#dfedf7;color:#16486a;border-color:#8eb5ce}
html[data-theme=light] .process-panel h3 {color:#1b4968}
html[data-theme=light] .studio-banner {background:#e3eef6;color:#193e58;border-color:#b9d0e0}
html[data-theme=light] .studio-banner p {color:#46667c}
html[data-theme=light] .studio-banner .eyebrow {color:#12658e}
html[data-theme=light] .stats {background:#fff;border-color:#cfdee9}
html[data-theme=light] .stats>div {border-color:#d6e2ec}
html[data-theme=light] .stats>div>span {color:#536e82}
html[data-theme=light] .experience {border-color:#ccdde8}
html[data-theme=light] .experience:hover,html[data-theme=light] .experience[open] {background:#eaf2f8}
html[data-theme=light] .experience strong {color:#1a3f59}
html[data-theme=light] .experience p,html[data-theme=light] .experience time {color:#4b6c83}
html[data-theme=light] .credit-link {border-color:#cedde8}
html[data-theme=light] .credit-link p {color:#4e6a7e}
html[data-theme=light] .contact-line {border-color:#cfdee9}
html[data-theme=light] .contact-line>a {color:#163e59}
html[data-theme=light] .social-links a {background:#fff;border-color:#c7d9e6}
html[data-theme=light] .social-links a:hover {background:#175572;color:#fff}
html[data-theme=light] .project-types span {border-color:#b6cddc}
html[data-theme=light] .project-types input:checked+span {background:#175572;border-color:#175572;color:white}
html[data-theme=light] .form-status {color:#155e82}
html[data-theme=light] .form-status.error {color:#a42431}
html[data-theme=light] .organizations {background:#edf3f7;border-color:#cfdee9}
html[data-theme=light] .partner {color:#385d75;border-color:#c6d8e5;opacity:.85}
html[data-theme=light] .partner:hover,html[data-theme=light] .partner:focus-visible {color:#123f5e;opacity:1}
html[data-theme=light] .partner-note,html[data-theme=light] .partner-heading .eyebrow,
html[data-theme=light] .partner-heading .text-link {color:#526d80}
html[data-theme=light] footer {background:#e3ecf3;color:#20445d}
html[data-theme=light] .footer-cta {color:#183d57;border-color:#b5cbdc}
html[data-theme=light] .footer-bottom,html[data-theme=light] .footer-bottom>a,
html[data-theme=light] footer .eyebrow,html[data-theme=light] footer .light-link {color:#3e637d}
html[data-theme=light] .story-dialog {background:#f5f8fa;color:#163c58;border-color:#c9dbe7}
html[data-theme=light] .story-dialog>.close-dialog {background:#fffffff0;color:#163c58;border-color:#b6cedf}
html[data-theme=light] .story-modal-body>p {color:#49697e}
html[data-theme=light] .story-modal-grid button {background:#e0eaf2}
html[data-theme=light] .video-dialog {background:#f6f9fb;color:#173e59;border-color:#c3d8e6}
html[data-theme=light] .video-dialog .close-dialog {background:#e2edf5;color:#173e59}
html[data-theme=light] .video-dialog .light-link {color:#165d84}
/* Keep text on photographs white, and the photo viewer neutral in either mode. */
html[data-theme=light] .hero,html[data-theme=light] .home-film {color:white;background:#07101a}
html[data-theme=light] .hero .eyebrow,html[data-theme=light] .home-film .eyebrow,
html[data-theme=light] .hero-play {color:#f2f6fa}
html[data-theme=light] #pointer-glow {mix-blend-mode:multiply;background:radial-gradient(circle,rgba(var(--beam),.09),rgba(var(--beam),.03) 28%,transparent 68%)}

@media(max-width:1100px) {
  .hero-bottom {grid-template-columns:150px minmax(0,1fr);gap:20px}
  .hero-bottom .scroll-cue {display:none}
  .hero-selector {max-width:610px;justify-self:end}
  .guide-card {gap:35px;grid-template-columns:minmax(0,1fr) 205px}
}
@media(max-width:800px) {
  .contact-page .contact-layout {grid-template-columns:1fr;gap:30px}
  .contact-page {max-width:700px;padding-top:125px}
  .contact-intro {padding-top:0}
  .contact-intro .page-heading {margin-bottom:22px}
  .contact-intro .page-heading p {max-width:100%}
  .contact-page .contact-details {display:grid;grid-template-columns:1fr 1fr;column-gap:25px}
  .contact-page .availability,.contact-page .social-links {grid-column:1/-1}
  .contact-page .contact-line>a {font-size:17px}
}
@media(max-width:600px) {
  .theme-toggle {width:36px;height:36px;min-width:36px;min-height:36px;padding:8px}
  .theme-toggle svg {width:18px;height:18px}
  .header-actions {gap:4px}
  .brand-name small {display:none}
  .hero-bottom {grid-template-columns:1fr;gap:12px;bottom:26px;padding-inline:22px}
  .hero-caption {display:flex;flex-direction:row;align-items:center;justify-content:space-between;max-width:none;font-size:10px}
  .hero-selector {grid-template-columns:repeat(5,minmax(0,1fr));width:242px;max-width:100%;justify-self:center;gap:5px;padding:6px;border-radius:11px}
  .hero-selector .hero-choice {aspect-ratio:1.65;max-width:none}
  .hero-content {top:40%;transform:translateY(-31%)}
  .hero-content h1 {font-size:clamp(38px,9vw,54px)}
  .home-mosaic {gap:13px;padding-inline:18px}
  .home-mosaic .home-photo,.home-mosaic .home-photo:first-child,.home-mosaic .home-photo:nth-child(4) {border-radius:13px;aspect-ratio:3/2}
  .home-photo .photo-label {padding:25px 11px 11px}
  .home-photo .photo-label strong {font-size:10px;line-height:1.6}
  .home-photo .photo-label>span {display:none}
  .guide-card {grid-template-columns:1fr;padding:28px 24px;gap:26px;border-radius:22px}
  .guide-copy h2 {font-size:32px}
  .guide-copy p {font-size:14px}
  .guide-copy .button {font-size:12px;min-height:46px}
  .guide-qr {width:210px;justify-self:center}
  .guide-qr img {width:174px}
  .contact-page {padding-top:115px;padding-bottom:45px}
  .contact-page .contact-form {padding:23px 20px}
  .contact-page .contact-form h2 {font-size:23px}
  .contact-page .contact-form input:not([type=radio]):not([type=checkbox]),.contact-page .contact-form textarea {font-size:16px}
  .contact-page .contact-details {grid-template-columns:1fr}
  .contact-page .contact-line {padding-block:15px}
  .contact-page .form-row {grid-template-columns:1fr;gap:0}
  .contact-intro .page-heading h1 {font-size:37px}
}
@media(max-width:400px) {
  .home-mosaic {grid-template-columns:1fr}
  .home-photo .photo-label strong {font-size:13px}
  .header,.header.solid {padding-inline:9px;gap:7px}
  .brand {gap:7px}.brand-name {font-size:9px}.brand-logo {width:36px}
  .header-actions {gap:3px}
  .theme-toggle,.language,.menu-toggle {width:34px;height:34px;min-width:34px;min-height:34px}
}
@media(prefers-reduced-motion:reduce) {
  #pointer-glow {display:none!important}
  body,.header,.quick-nav,.contact-form,.guide-card,.organizations,footer {transition:none}
}