/*! Dream Fire Protection – Optimized & Enhanced CSS */


/* ======================= Root Variables ======================= */
:root {
  --white:#ffffff; --black:#000000;
  --primary:#0f3b5f; --primary-900:#0a2a45; --accent:#ef4e2b;
  --bg:#f6f8fb; --text:#0d1b2a; --muted:#5b6b7d; --card:#ffffff;
  --font-base:'Cairo','Noto Kufi Arabic',system-ui,-apple-system,sans-serif;
  --radius:14px; --shadow:0 10px 25px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#121212; --text:#f0f0f0; --card:#1e1e1e; --accent:#ff5722; --muted:#aaa; }
}

/* ======================= Base Styles ======================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }
body{ margin:0; font-family:var(--font-base); background:var(--bg); color:var(--text); line-height:1.7;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

.container{ width:min(1200px,95%); margin-inline:auto; }

/* ======================= Navbar & Mobile Menu (CONSOLIDATED) ======================= */
.navbar{ position:sticky; top:0; z-index:1100; background:var(--white);
  border-bottom:1px solid var(--brand-4); padding-top:env(safe-area-inset-top);
  -webkit-transform:translateZ(0); backface-visibility:hidden; --nav-h:56px; min-height:var(--nav-h);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.brand img{ width:40px; height:40px; object-fit:contain }
.brand strong{ font-weight:800; font-size:1.1rem } .brand span{ color:var(--muted); font-size:.95rem }

.nav-links{ display:flex; gap:18px; list-style:none; margin:0; padding:0 }
.nav-links a{ color:var(--text); font-weight:600; text-decoration:none }
.nav-links a:hover{ color:var(--accent) }

.burger{ display:flex; flex-direction:column; gap:5px; background:transparent; border:0; cursor:pointer }
.burger span{ width:24px; height:2px; background:var(--text); border-radius:2px }

/* Mobile menu (single definition) */
.mobile-menu{ display:none; position:fixed; right:0; left:0;
  top:calc(var(--nav-h) + env(safe-area-inset-top));
  background:var(--card); border-bottom:1px solid rgba(0,0,0,.08);
  z-index:1100; padding:12px 16px;
}
.mobile-menu.open{ display:flex; flex-direction:column; gap:12px;
  box-shadow:0 16px 24px rgba(0,0,0,.20); }
.mobile-menu a{ padding:10px 6px; border-radius:10px; text-decoration:none; color:var(--text); font-weight:700 }
.mobile-menu a:active{ background:rgba(0,0,0,.06) }

@media (min-width:900px){ .burger,.mobile-menu{ display:none!important } .only-desktop{ display:inline-flex } }
@media (max-width:900px){ .nav-links{ display:none!important } .burger{ display:flex; z-index:1101 } }
@media (prefers-color-scheme: dark){
  .navbar{ background:var(--card); border-bottom-color:rgba(255,255,255,.08) }
  .mobile-menu{ border-bottom-color:rgba(255,255,255,.08) }
  .mobile-menu a:active{ background:rgba(255,255,255,.06) }
}

/* ======================= Hero Section ======================= */
.hero{
  background:
    radial-gradient(1200px 500px at 30% 10%, rgba(var(--accent-rgb), .15), transparent 50%),
    linear-gradient(180deg, var(--white) 0%, var(--bg) 100%);
  padding:70px 0 30px;
}
.hero-inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:center }
.hero-copy h1{ margin:0 0 10px; font-size:clamp(28px,4vw,44px); line-height:1.25 }
.hero-copy .accent{ color:var(--accent) }
.hero-copy p{ margin:0 0 14px; color:var(--muted) }
.hero-copy .bullets{ display:flex; gap:18px; list-style:'• '; padding-inline-start:14px; color:var(--muted) }
.hero-art{ position:relative; display:grid; place-items:center; min-height:280px }
.hero-art .glow{ position:absolute; inset:20% 10% 10% 10%; background:radial-gradient(circle at 70% 30%, rgba(var(--accent-rgb), .25), transparent 50%); filter:blur(30px) }
.hero-logo{ width:min(360px,80%); filter:drop-shadow(0 20px 25px rgba(0,0,0,.12)) }
@media (max-width:1100px){ .hero-inner{ grid-template-columns:1fr; text-align:center } .hero-copy .bullets{ justify-content:center } .hero-art{ order:-1 } }
@media (max-width:600px){ .hero{ padding:40px 0 20px } .hero-logo{ width:min(280px,75%) } }

/* ======================= Sections & Cards ======================= */
.section{ padding:70px 0; content-visibility:auto; contain-intrinsic-size:600px }
.section.alt{ background:var(--white) }
.section-head{ display:grid; gap:6px; margin-bottom:26px }
.section-head h2{ margin:0; font-size:clamp(22px,3vw,30px) }
.section-head p{ margin:0; color:var(--muted) }
.grid.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px }
.card{ background:var(--card); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); border:1px solid var(--brand-3); transition:transform .2s ease, box-shadow .2s ease }
.card:hover{ transform:translateY(-4px); box-shadow:0 18px 30px rgba(0,0,0,.10) }
.card .icon{ width:44px; height:44px; background:rgba(15,59,95,.08); border-radius:var(--radius); display:grid; align-items:center; justify-content:center; margin-bottom:8px }
.card .icon svg{ fill:var(--primary) }

/* ======================= Solutions ======================= */
.solutions-wrap{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px }
.solution{ background:var(--card); border:1px solid var(--brand-3); border-radius:var(--radius); padding:18px }

/* ======================= Carousel ======================= */
.carousel{ position:relative; overflow:hidden }
.car-track{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; will-change:transform }
.car-item{ min-width:300px; scroll-snap-align:start; background:var(--card); border:1px solid var(--brand-3); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden }
.car-item img,.car-item video{ width:100%; object-fit:cover; display:block }
.car-item img{ aspect-ratio:16/9; background:var(--brand-5) }
.car-item figcaption{ padding:10px; font-weight:600; text-align:center }
.car-btn{ position:absolute; top:50%; transform:translateY(-50%); border:none; background:rgba(15,59,95,.9); color:var(--white); width:36px; height:36px; border-radius:50%; cursor:pointer; z-index:2 }
.car-btn.prev{ left:10px } .car-btn.next{ right:10px }
@media (hover:none){ .car-item{ scroll-snap-stop:always } }
@media (max-width:900px){ .car-item{ min-width:82vw } .car-btn{ width:44px; height:44px } }

/* ======================= Video Gallery ======================= */
#video-gallery{ background:var(--brand-5); padding:60px 0 }
#video-gallery .car-item{ width:220px }
#video-gallery .df-video{ height:120px; background-color:var(--black) }
@media (max-width:600px){ #video-gallery .df-video{ aspect-ratio:16/9; height:auto } #video-gallery .car-item{ width:80vw } }

/* ======================= Contact ======================= */
.contact-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:20px }
.contact-form{ display:grid; gap:12px }
.contact-form label{ font-weight:700 }
.contact-form input,.contact-form textarea{ width:100%; padding:12px; border-radius:8px; border:1px solid var(--brand-3); background:var(--white) }
.contact-form input:focus,.contact-form textarea:focus{ border-color:var(--primary) }
.contact-form button.btn.primary{ width:100% }
.tiny{ font-size:.85rem; color:var(--muted) }
.contact-info ul{ margin:0; padding-inline-start:1.2rem }
.map-holder{ height:160px; background:linear-gradient(135deg,var(--brand-3),var(--white)); border-radius:var(--radius); border:1px dashed var(--brand-3) }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr } }

/* ======================= Footer & FAB ======================= */
.footer{ background:var(--primary-900); color:var(--brand-5); padding:24px 0 }
.footer a{ color:var(--brand-5); text-decoration:none }
.footer-inner{ display:flex; flex-wrap:wrap; gap:16px }
.sticky-cta{ position:fixed; left:50%; bottom:calc(14px + env(safe-area-inset-bottom)); transform:translateX(-50%); background:var(--accent); color:var(--white); padding:12px 18px; border-radius:999px; font-weight:800; box-shadow:0 12px 20px rgba(var(--accent-rgb), .25); z-index:1000 }
@media (min-width:900px){ .sticky-cta{ display:none } }
.wa-fab{ position:fixed; bottom:calc(16px + env(safe-area-inset-bottom)); right:16px; width:56px; height:56px; background:var(--primary); border-radius:50%; border:2px solid var(--white); display:grid; place-items:center; box-shadow:0 12px 24px rgba(0,0,0,.18); transition:transform .2s ease, background .3s ease; z-index:1000 }
.wa-fab:hover{ transform:scale(1.08); background:var(--accent) }
.wa-fab img{ width:28px; height:28px }

/* ======================= Animations ======================= */
.reveal{ opacity:0; transform:translateY(12px); transition:all .6s ease }
.reveal.in{ opacity:1; transform:none }

/* ======================= Extra polish ======================= */
:root{ --brand-3:#e4e9f2; --brand-4:#d8e0ea; --brand-5:#f0f4f9; --accent-rgb:239,78,43; --primary-rgb:15,59,95 }
@media (prefers-color-scheme:dark){ :root{ --brand-3:#2a3440; --brand-4:#364151; --brand-5:#1c2430 } }
body{ color-scheme:light dark }
:focus-visible{ outline:3px solid color-mix(in srgb,var(--accent) 55%, transparent); outline-offset:2px; border-radius:6px }
:where(input[type="checkbox"],input[type="radio"],input[type="range"],select){ accent-color:var(--primary) }
.car-track{ overscroll-behavior-x:contain; scrollbar-gutter:stable both-edges }
.car-track::-webkit-scrollbar{ height:8px } .car-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.15); border-radius:8px }

/* Buttons (robust, including visited) */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.7rem 1.1rem; border-radius:999px; font-weight:800; line-height:1; text-decoration:none; -webkit-tap-highlight-color:transparent }
.btn:where(:link,:visited){ text-decoration:none; color:inherit }
.btn.primary,
.btn.primary:link,
.btn.primary:visited,
.btn.primary:hover,
.btn.primary:active,
.btn.primary:focus{ background:var(--accent); color:var(--white)!important; box-shadow:0 10px 20px rgba(var(--accent-rgb), .25) }
.btn.ghost{ border:2px solid var(--primary); color:var(--primary); background:transparent }
.btn.lg{ padding:.9rem 1.3rem; font-size:1.05rem }

/* Dark mode refinements with fallbacks */
@media (prefers-color-scheme:dark){
  .hero{ background:
    radial-gradient(1000px 420px at 30% 10%, rgba(var(--accent-rgb), .12), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%); }
  .section.alt{ background:var(--bg) }
  .car-btn{ background:var(--primary) }
  .footer{ background:var(--primary-900); color:#e6edf3 } .footer a{ color:#e6edf3 }
  .brand span{ color:var(--muted) }
}
@media (prefers-color-scheme:dark){
@supports (color: color-mix(in srgb, black 50%, white 50%)){
  .hero{ background:
    radial-gradient(1000px 420px at 30% 10%, rgba(var(--accent-rgb), .12), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, black 4%) 0%, var(--bg) 100%) }
  .section.alt{ background: color-mix(in srgb, var(--bg) 94%, black 6%) }
  .car-btn{ background: color-mix(in srgb, var(--primary) 85%, black 15%) }
  .footer{ background: color-mix(in srgb, var(--primary-900) 90%, black 10%); color:#e6edf3 }
  .brand span{ color: color-mix(in srgb, var(--muted) 90%, white 10%) }
  .mobile-menu.open{ background: color-mix(in srgb, var(--card) 92%, black 8%); border-top:1px solid rgba(255,255,255,.06); box-shadow:0 20px 30px rgba(0,0,0,.35) }
}}

/* Lock scroll when menu open */
.nav-open{ overflow:hidden }
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;opacity:0}
/* === Fix: Project carousel to match video style === */

/* منع هوامش figure الافتراضية */
.car-item { margin: 0; }

/* حاوية السكة */
#projects .carousel .car-track{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:6px; transition:transform .3s ease; will-change:transform;
  overscroll-behavior-x: contain; scrollbar-gutter: stable both-edges;
}

/* الكارت */
#projects .carousel .car-item{
  min-width:300px; scroll-snap-align:start;
  background: var(--card);
  border:1px solid var(--brand-3);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}

/* الصورة (نفس أبعاد الفيديو) */
#projects .carousel .car-item img,
#projects .carousel .car-item .car-img{
  display:block; width:100%;
  /* نخليها 16:9 + قص ذكي */
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  background: var(--brand-5);
}

/* العنوان تحت الصورة */
#projects .carousel .car-item figcaption{
  padding:10px; font-weight:600; text-align:center;
}

/* أزرار التنقل زي الفيديو */
#projects .carousel .car-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  border:0; background: rgba(15,59,95,.9); color:#fff;
  width:36px; height:36px; border-radius:50%; cursor:pointer; z-index:2;
}
#projects .carousel .car-btn.prev{ left:10px; }
#projects .carousel .car-btn.next{ right:10px; }

/* موبايل */
@media (max-width: 768px){
  #projects .carousel .car-item{ min-width: 80vw; }
}
.hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden;}

/* ======================= Laravel site additions ======================= */
.skip-link{ position:absolute; right:-9999px; top:0; background:var(--accent); color:#fff; padding:8px 14px; z-index:2000; border-radius:0 0 8px 8px }
.skip-link:focus{ right:16px }
@media (max-width:899px){ .only-desktop{ display:none } }
.nav-links a.active{ color:var(--accent) }
.btn.sm{ padding:.55rem .95rem; font-size:.95rem }
.muted{ color:var(--muted) }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin:0 0 14px }
.card h3{ margin:.3rem 0 }
.card p{ margin:0; color:var(--muted) }
.card .icon span{ font-size:1.4rem; line-height:1 }
.card-link{ color:inherit; text-decoration:none }
.card-link:hover{ color:var(--accent) }
.card-link::after{ content:""; position:absolute; inset:0 }
.grid.cards .card{ position:relative }
.solution-icon{ font-size:2.5rem; margin-bottom:10px }
.section-more{ margin:22px 0 0; text-align:center }

/* Carousel in RTL: "prev" on the right, "next" on the left */
.carousel .car-btn.prev, #projects .carousel .car-btn.prev{ right:10px; left:auto }
.carousel .car-btn.next, #projects .carousel .car-btn.next{ left:10px; right:auto }
.car-item a{ color:inherit; text-decoration:none }
.car-item figcaption a:hover, .project-card figcaption a:hover{ color:var(--accent) }

/* Cards with media (projects / videos) */
.projects-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px }
.project-card{ margin:0; background:var(--card); border:1px solid var(--brand-3); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column }
.project-card figcaption{ padding:10px 12px; font-weight:700; display:flex; flex-direction:column; gap:4px }
.project-card figcaption a{ color:inherit; text-decoration:none }
.card-media{ display:block; position:relative; aspect-ratio:16/9; background:var(--brand-5); overflow:hidden }
.card-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease }
.card-media:hover img{ transform:scale(1.04) }
.img-placeholder{ display:grid; place-items:center; width:100%; height:100%; font-size:2.5rem }
.chip-sm{ display:inline-block; align-self:flex-start; font-size:.78rem; font-weight:600; color:var(--primary); background:rgba(var(--primary-rgb),.08); padding:2px 10px; border-radius:999px }
.play-badge{ position:absolute; inset:0; margin:auto; width:54px; height:54px; border-radius:50%; background:rgba(var(--accent-rgb),.92); color:#fff; display:grid; place-items:center; font-size:1.3rem; box-shadow:0 8px 18px rgba(0,0,0,.25) }
#video-gallery .car-item{ width:300px; min-width:300px }
#video-gallery .df-video{ height:auto; aspect-ratio:16/9 }
@media (max-width:600px){ #video-gallery .car-item{ width:80vw; min-width:80vw } }

/* Inner pages */
.page-hero{ padding:36px 0 18px; background:linear-gradient(180deg, var(--white) 0%, var(--bg) 100%) }
.page-hero h1{ margin:6px 0 6px; font-size:clamp(24px,3.4vw,36px); line-height:1.3 }
.page-hero p{ margin:0 }
.breadcrumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; font-size:.9rem; color:var(--muted) }
.breadcrumbs li+li::before{ content:"‹"; margin-inline-end:6px }
.breadcrumbs a{ color:var(--muted); text-decoration:none }
.breadcrumbs a:hover{ color:var(--accent) }
.container.narrow{ width:min(900px,95%) }
.meta-list{ list-style:none; padding:0; margin:8px 0 0; display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--muted) }
.meta-list span{ font-weight:700; color:var(--text) }
.meta-list a{ color:var(--primary) }
.project-cover{ margin:0 0 20px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow) }
.project-cover img{ width:100%; height:auto; display:block }
.lead{ font-size:1.1rem; color:var(--muted) }
.prose{ font-size:1.05rem }
.prose img{ max-width:100%; height:auto; border-radius:10px }
.prose a{ color:var(--primary) }
.prose h2,.prose h3{ line-height:1.35 }
.gallery-title{ margin:28px 0 12px; font-size:1.3rem }
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px }
.gallery-item{ display:block; border-radius:10px; overflow:hidden; aspect-ratio:4/3; background:var(--brand-5) }
.gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease }
.gallery-item:hover img{ transform:scale(1.05) }
.cta-band{ margin-top:30px; padding:20px; border-radius:var(--radius); background:rgba(var(--accent-rgb),.08); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px }
.cta-band p{ margin:0; font-weight:700 }
.video-player{ aspect-ratio:16/9; background:#000; border-radius:var(--radius); overflow:hidden; margin-bottom:20px }
.video-player iframe,.video-player video{ width:100%; height:100%; border:0; display:block }
.video-player p{ color:#fff; text-align:center; padding:20px }

/* Filter chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px }
.chip{ padding:6px 16px; border-radius:999px; border:1px solid var(--brand-4); background:var(--card); color:var(--text); text-decoration:none; font-weight:600; font-size:.95rem }
.chip:hover{ border-color:var(--primary) }
.chip.active{ background:var(--primary); border-color:var(--primary); color:#fff }

/* Pagination */
.pagination{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:28px }
.pagination .page{ min-width:40px; padding:8px 12px; text-align:center; border-radius:10px; border:1px solid var(--brand-4); background:var(--card); color:var(--text); text-decoration:none; font-weight:700 }
.pagination a.page:hover{ border-color:var(--primary) }
.pagination .current{ background:var(--primary); border-color:var(--primary); color:#fff }
.pagination .disabled{ opacity:.45 }
.pagination .dots{ border:0; background:transparent }

/* Contact form */
.contact-form .field{ display:grid; gap:6px }
.contact-form select{ width:100%; padding:12px; border-radius:8px; border:1px solid var(--brand-3); background:var(--white); font:inherit; color:var(--text) }
.contact-form input,.contact-form textarea{ font:inherit; color:var(--text) }
.contact-form [aria-invalid="true"]{ border-color:#d93025 }
.field-error{ margin:0; min-height:0; color:#d93025; font-size:.88rem; font-weight:600 }
.field-error:empty{ display:none }
.form-note{ margin:0; font-weight:700 }
.form-note:empty{ display:none }
.form-note.success{ color:#1e8e3e }
.form-note.error{ color:#d93025 }
.contact-form[aria-busy="true"] button{ opacity:.7; cursor:progress }
.contact-list{ list-style:none; padding:0!important; margin:0; display:grid; gap:10px }
.contact-list li{ display:flex; gap:10px; align-items:center }
.contact-list .icon{ width:34px; height:34px; margin:0; display:grid; place-items:center; color:var(--primary) }
.contact-link{ color:var(--primary); font-weight:700 }
.contact-info{ display:grid; gap:16px; align-content:start }
.section-title{ margin:0 0 10px }
@media (prefers-color-scheme:dark){
  .contact-form input,.contact-form textarea,.contact-form select{ background:var(--card); border-color:var(--brand-4) }
  .page-hero{ background:var(--bg) }
  .contact-link,.meta-list a,.prose a{ color:#7fb3e0 }
  .chip-sm{ color:#9cc4ea }
}

/* Footer extras */
.footer-inner{ align-items:flex-start; justify-content:space-between }
.footer-links,.footer-contact,.footer-social{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 16px }
.footer-contact{ flex-direction:column }
.footer-social a{ display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.1) }
.footer-social a:hover{ background:var(--accent) }
.footer .brand img{ width:40px; height:40px }
@media (max-width:899px){ .footer{ padding-bottom:80px } }

/* Lightbox */
.lightbox{ position:fixed; inset:0; z-index:3000; background:rgba(0,0,0,.88); display:grid; place-items:center; padding:20px }
.lightbox[hidden]{ display:none }
.lightbox img{ max-width:100%; max-height:88vh; border-radius:8px; box-shadow:0 20px 40px rgba(0,0,0,.5) }
.lightbox button{ position:absolute; border:0; background:rgba(255,255,255,.15); color:#fff; width:46px; height:46px; border-radius:50%; font-size:1.8rem; line-height:1; cursor:pointer }
.lightbox button:hover{ background:var(--accent) }
.lb-close{ top:16px; left:16px }
.lb-prev{ right:16px; top:50%; transform:translateY(-50%) }
.lb-next{ left:16px; top:50%; transform:translateY(-50%) }

/* 404 */
.error-page{ text-align:center }
.error-code{ font-size:clamp(70px,14vw,140px); font-weight:800; line-height:1; margin:0; color:var(--accent) }
.error-page .cta-row{ justify-content:center; margin-top:20px }

/* Phase 1 review fixes */
/* Videos are filmed on phones (portrait 9:16): show them whole instead of cropping to 16:9. */
#video-gallery .df-video{ aspect-ratio:9/16; height:auto; object-fit:contain; background:#000 }
#video-gallery .car-item{ width:min(280px,70vw) }
.video-player:has(video){ aspect-ratio:9/16; max-width:min(420px,100%); margin-inline:auto }
.video-player video{ object-fit:contain }
/* Project cover: reserve the box up front (no layout shift) and keep portrait photos from towering. */
.project-cover img{ aspect-ratio:16/9; object-fit:cover; height:auto }