:root {
  --ink: #191919;
  --paper: #f1e8dd;
  --paper-deep: #441f1d;
  --accent: #f0392e;
  --muted: #8f7773;
  --line: rgba(25, 25, 25, .22);
  --amber: #ffb300;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  overflow-x: hidden;
}
a { color: inherit; }
img, video { display: block; width: 100%; height: auto; }
.ui-icon {
  display: inline-block;
  font-family: 'Material Symbols Rounded';
  font-size: 1.15em;
  font-weight: 400;
  line-height: 1;
  vertical-align: -.16em;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 2rem;
  color: #fff;
  mix-blend-mode: difference;
  background: transparent;
  transition: background-color .25s ease, color .25s ease;
}
.site-header.is-dark-bg { color: var(--paper); mix-blend-mode: normal; }
.site-header.is-light-bg { color: var(--ink); mix-blend-mode: normal; }
.site-header.is-scrolled {
  color: var(--paper);
  background: rgba(0, 0, 0, .9);
  mix-blend-mode: normal;
  padding-block: .7rem;
}
.site-header.is-scrolled .wordmark img { margin: 0; }
.wordmark {
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.035em;
  text-decoration: none;
  text-transform: uppercase;
}
.wordmark img { display: block; width: clamp(5.9rem, 9.1vw, 8.4rem); height: auto; }
.site-header .wordmark img { width: clamp(4.13rem, 6.37vw, 5.88rem); }
.wordmark span { font-family: Georgia, serif; font-style: italic; font-weight: 400; text-transform: none; }
nav { display: flex; align-items: center; gap: clamp(.65rem, 1.15vw, 1.6rem); }
nav a { font-size: clamp(.56rem, .65vw, .72rem); font-weight: 700; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.nav-contact { border: 1px solid currentColor; border-radius: 8px; padding: .62rem .95rem; }
section[id], .gallery[id], .gallery-subheading[id] { scroll-margin-top: 5rem; }

.hero {
  position: relative;
  min-height: 100svh;
  color: var(--paper);
  background: #111;
  overflow: hidden;
}
.hero-video, .hero-wash { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-video { object-fit: cover; }
.hero-wash { background: linear-gradient(90deg, rgba(0,0,0,.56), rgba(0,0,0,.08) 65%), linear-gradient(0deg, rgba(0,0,0,.58), transparent 42%); }
.hero-copy {
  position: absolute;
  left: 3.5vw;
  bottom: 10vh;
  z-index: 2;
  width: min(1000px, 90vw);
}
.eyebrow, .section-number {
  margin: 0 0 1.4rem;
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.section-number { color: var(--accent); }
.osf .section-number,
.private .section-number,
.statement .section-number,
.motion .section-number { color: var(--amber); }
.hero h1, h2 {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  letter-spacing: -.068em;
  line-height: .86;
}
.hero h1 {
  font-size: clamp(4rem, 10.5vw, 10rem);
  line-height: .88;
}
.hero h1 span, .hero h1 em { display: block; }
.hero h1 em {
  padding-top: .12em;
  line-height: .9;
}
h2 { font-size: clamp(3rem, 7vw, 7.4rem); }
em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
.hero-note { max-width: 31rem; margin: 2rem 0 0; font-size: clamp(1rem, 1.5vw, 1.3rem); }
.scroll-cue {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  z-index: 2;
  display: flex;
  gap: 1rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
}

.intro, .services {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 2rem;
  padding: 10rem 3.5vw;
  border-bottom: 1px solid var(--line);
}
.intro { grid-template-columns: 1fr; }
.intro > div { width: min(100%, 88rem); margin-inline: auto; }
.intro h2 { max-width: 79rem; font-size: clamp(3rem, 6.4vw, 6.8rem); }
.intro div > p { max-width: 58rem; margin: 3rem 0 0; font-size: clamp(1.2rem, 2.1vw, 1.8rem); }

.work { padding: 10rem 3.5vw 5rem; }
.osf, .private { color: var(--paper); background: #000; }
.work-heading {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: 5rem;
}
.work-heading h2 { font-size: clamp(4rem, 8.5vw, 9rem); }
.work-heading h2 em { display: block; padding-top: .08em; line-height: .92; }
.work-heading > p { max-width: 28rem; margin: 0 0 .6rem auto; font-size: 1.15rem; }
.work-heading > p,
.motion-heading > p { text-wrap: pretty; }
.nowrap { white-space: nowrap; }
.gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.65rem, .9vw, 1rem);
  align-items: start;
}
.gallery figure,
.gallery figure.wide,
.gallery figure.portrait,
.gallery figure.tall {
  position: relative;
  grid-column: auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
}
.gallery img,
.gallery .portrait img,
.gallery .tall img {
  aspect-ratio: 8 / 9;
  object-fit: cover;
  background: var(--paper-deep);
}
.gallery-private img {
  aspect-ratio: 8 / 9;
  object-fit: cover;
  object-position: center center;
}
.gallery .gallery-video {
  grid-column: span 2;
  /* Match the still-image height so the row has one clean baseline. */
  aspect-ratio: 1.825 / 1;
  background: #000;
}
.gallery .gallery-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
figcaption { margin-top: .7rem; font-size: .63rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.gallery figcaption {
  position: absolute;
  left: .7rem;
  bottom: .7rem;
  margin: 0;
  padding: .45rem .6rem;
  color: var(--paper);
  background: rgba(10, 10, 10, .72);
}

.statement {
  margin: 3rem 0 6rem;
  padding: 12rem 3.5vw;
  color: var(--paper);
  background: var(--ink);
}
.statement > p { margin: 0 0 3rem; color: #aaa; font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.statement h2 { font-size: clamp(3.4rem, 8vw, 9rem); }

.motion {
  padding: 10rem 3.5vw;
  color: var(--paper);
  background: var(--ink);
}
.motion-heading {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: end;
}
.motion-heading h2 { font-size: clamp(4rem, 8.5vw, 9rem); }
.motion-heading > p { max-width: 28rem; margin: 2rem 0 0; color: #c4c0b9; font-size: 1.15rem; }
.motion-player { margin: 5rem 0 0; }
.motion-films { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.65rem, .9vw, 1rem); margin-top: 5rem; }
.motion-films .motion-player { margin: 0; }
.motion-player video {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: #000;
}
.motion-player figcaption { color: #aaa; }
.motion .gallery { margin-top: 5rem; }

.private { padding-top: 7rem; }
.gallery-subheading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  margin: 5rem 0 2rem;
}
.gallery-subheading h3 {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3.4rem);
  letter-spacing: -.05em;
}
.gallery-subheading p {
  max-width: 24rem;
  margin: 0;
  font-size: 1rem;
}
.gallery-subheading + .gallery { margin-top: 0; }
.services { grid-template-columns: 1fr 1.2fr 1.8fr; align-items: start; background: var(--paper); }
.services ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.services li { display: flex; gap: 2rem; padding: 1.3rem 0; border-bottom: 1px solid var(--line); font-size: 1.1rem; }
.services li span { color: var(--muted); font-size: .67rem; }

.about {
  display: block;
  padding: 9rem 3.5vw;
  background: var(--amber);
}
.about-heading { margin-bottom: clamp(3rem, 6vw, 6rem); }
.about-people {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 4rem);
  align-items: stretch;
}
.about-portrait-wrap { min-height: 34rem; overflow: hidden; border-radius: 8px; background: var(--ink); }
.about-portrait { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.about-copy { display: flex; flex-direction: column; justify-content: center; }
.about-copy .eyebrow { margin-bottom: 1.4rem; }
.about-copy > p:not(.eyebrow) { max-width: 38rem; margin: 0 0 1.25rem; font-size: clamp(.95rem, 1.1vw, 1.1rem); }
.about-copy > p:last-child { margin-bottom: 0; }

.contact {
  padding: 9rem 3.5vw;
  color: var(--ink);
  background: var(--amber);
}
.contact .section-number { color: var(--ink); }
.contact > .section-number { margin-bottom: 5rem; }
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(32rem, 1.1fr);
  gap: 7vw;
  align-items: start;
}
.contact-copy h2 { max-width: 50rem; font-size: clamp(3.6rem, 6.2vw, 7rem); }
.contact-copy > p:last-child { max-width: 34rem; margin: 3rem 0 0; font-size: 1.15rem; }
.inquiry-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1.5rem;
}
.inquiry-form label { display: grid; gap: .65rem; }
.inquiry-form label > span {
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(25,25,25,.35);
  border-radius: 0;
  padding: .55rem 0 .8rem;
  color: var(--ink);
  background: transparent;
  font: inherit;
  outline: none;
}
.inquiry-form input:-webkit-autofill,
.inquiry-form input:-webkit-autofill:hover,
.inquiry-form input:-webkit-autofill:focus,
.inquiry-form input:autofill,
.inquiry-form textarea:-webkit-autofill,
.inquiry-form textarea:-webkit-autofill:hover,
.inquiry-form textarea:-webkit-autofill:focus,
.inquiry-form textarea:autofill {
  background-color: var(--amber) !important;
  background-image: none !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--amber) inset !important;
  box-shadow: 0 0 0 1000px var(--amber) inset !important;
  caret-color: var(--ink) !important;
}
.inquiry-form select {
  color: var(--paper);
  color-scheme: dark;
  background: #000;
}
.inquiry-form select option {
  color: var(--paper);
  background: #000;
}
.custom-select { position: relative; }
.custom-select-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-bottom: 1px solid rgba(25,25,25,.35);
  border-radius: 0;
  padding: .55rem 0 .8rem;
  color: var(--ink);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.custom-select-toggle:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.custom-select.is-open .custom-select-toggle {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--accent);
  padding-inline: .8rem;
  border-radius: 8px 8px 0 0;
}
.custom-select-toggle span { font-size: 1.2em; line-height: 1; }
.custom-select-menu {
  position: absolute;
  z-index: 20;
  display: none;
  width: 100%;
  max-height: none;
  overflow-y: visible;
  margin: 0;
  padding: .35rem 0;
  border: 1px solid var(--accent);
  list-style: none;
  color: var(--ink);
  background: var(--paper);
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.custom-select.is-open .custom-select-menu { display: block; }
.custom-select-menu li { padding: .7rem .8rem; cursor: pointer; }
.custom-select-menu li:hover,
.custom-select-menu li[aria-selected="true"] { color: var(--ink); background: var(--amber); }
.inquiry-form textarea { min-height: 9rem; resize: vertical; }
.inquiry-form input:focus,
.inquiry-form select:focus,
.custom-select-toggle:focus,
.inquiry-form textarea:focus { border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.inquiry-form input::placeholder,
.inquiry-form textarea::placeholder { color: rgba(25,25,25,.62); }
.form-wide { grid-column: 1 / -1; }
.form-honey { position: absolute; left: -9999px; }
.form-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.form-actions button {
  flex: 0 0 auto;
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: .95rem 1.25rem;
  color: var(--paper);
  background: var(--accent);
  font: inherit;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  cursor: pointer;
}
.form-actions button:disabled { cursor: wait; opacity: .65; }
.form-actions button span { margin-left: .6rem; }
.form-status { margin: 0; font-size: .9rem; }

footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  gap: 2rem;
  padding: 3rem 3.5vw;
  color: var(--paper);
  background-color: var(--ink);
  background-image: linear-gradient(rgba(25,25,25,.22), rgba(25,25,25,.22)), url('assets/brand/pattern-footer.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
}
.footer-lockup { display: block; min-width: 0; }
.footer-lockup-combined { display: block; width: clamp(9.9rem, 13.2vw, 13.2rem); height: auto; filter: invert(1); }
.footer-social { display: inline-flex; width: 3.5rem; height: 3.5rem; align-items: center; justify-content: center; justify-self: center; }
.footer-social img { display: block; width: 100%; height: 100%; }
footer p { margin: 0; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
footer p:last-child { grid-column: 3; text-align: right; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .site-header { padding: 1rem; }
  nav a:not(.nav-contact) { display: none; }
  .hero-copy { left: 1rem; bottom: 13vh; width: calc(100vw - 2rem); }
  .hero h1 { font-size: clamp(3.35rem, 15.5vw, 5rem); }
  .hero-note { max-width: 19rem; }
  .scroll-cue { right: 1rem; bottom: 1.2rem; }
  .intro, .services { grid-template-columns: 1fr; padding: 7rem 1rem; }
  .intro h2 { font-size: 3.25rem; }
  .intro div > p { margin-top: 2rem; }
  .work { padding: 7rem 1rem 3rem; }
  .work-heading { grid-template-columns: 1fr; margin-bottom: 3rem; }
  .work-heading h2 { font-size: 4.3rem; }
  .work-heading > p { margin: 0; }
  .gallery-subheading { align-items: start; flex-direction: column; gap: .6rem; margin: 4rem 0 1.5rem; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .gallery .gallery-video { aspect-ratio: 1.8 / 1; }
  .statement { margin: 1rem 0; padding: 8rem 1rem; }
  .statement h2 { font-size: 4rem; }
  .motion { padding: 7rem 1rem; }
  .motion-heading { grid-template-columns: 1fr; gap: 2rem; }
  .motion-heading h2 { font-size: 4.3rem; }
  .motion-heading > p { margin: 0; }
  .motion-player { margin-top: 3rem; }
  .motion-films { grid-template-columns: 1fr; gap: .55rem; margin-top: 3rem; }
  .motion-films .motion-player { margin-top: 0; }
  .motion .gallery { margin-top: 3rem; }
  .motion-player video { aspect-ratio: 4 / 5; }
  .services h2 { font-size: 4rem; }
  .about { padding: 7rem 1rem; }
  .about-heading { margin-bottom: 2.5rem; }
  .about-people { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-portrait-wrap { min-height: 0; aspect-ratio: 4 / 5; }
  .about-heading h2 { font-size: 4rem; }
  .contact { padding: 7rem 1rem; }
  .contact > .section-number { margin-bottom: 3rem; }
  .contact-layout { grid-template-columns: 1fr; gap: 4rem; }
  .contact-copy h2 { font-size: 3.8rem; }
  .inquiry-form { grid-template-columns: 1fr; }
  .form-wide { grid-column: auto; }
  .form-actions { align-items: flex-start; flex-direction: column; }
  footer { grid-template-columns: 1fr; padding: 2.4rem 1rem; }
  .footer-lockup-combined { width: min(9.9rem, 100%); }
  .footer-social { width: 3rem; height: 3rem; justify-self: start; }
  footer p:last-child { grid-column: 1; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}


/* Brand connection and event booking paths. */
.hero-service { max-width: 42rem; line-height: 1.5; }
.hero-copy .hero-note { margin-top: 1.4rem; max-width: 37rem; }
.brand-connection { margin: .85rem 0 0; font-size: .85rem; line-height: 1.5; }
.brand-connection a, .about-copy a { text-underline-offset: .22em; }
.event-button { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; max-width: 100%; padding: .9rem 1.1rem; border: 1px solid currentColor; border-radius: 8px; font-size: .78rem; font-weight: 700; line-height: 1.4; text-decoration: none; }
.event-button:hover { background: var(--ink); color: var(--paper); }
.event-button:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.hero-inquire { margin-top: 1.25rem; color: var(--ink); background: var(--paper); border-color: var(--paper); }
.hero-inquire:hover { color: var(--paper); background: var(--ink); }
.contact-copy > .inquiry-intro { max-width: 34rem; margin: 2rem 0 0; font-size: 1.15rem; }
.consultation-option { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(25,25,25,.35); }
.consultation-option > p:first-child { margin: 0 0 1rem; font-weight: 700; }
.consultation-option .consultation-note { max-width: 30rem; margin: .85rem 0 0; font-size: .85rem; line-height: 1.5; }
@media (max-width: 760px) {
  .hero { min-height: 100svh; display: flex; align-items: flex-end; padding: 8rem 1rem 5rem; }
  .hero-copy { position: relative; inset: auto; width: 100%; }
  .hero-service { max-width: 22rem; font-size: .65rem; margin-bottom: 1rem; }
  .hero-copy .hero-note { max-width: 24rem; font-size: 1rem; }
}
.hero h1 { font-size: clamp(3.35rem, 8vw, 8rem); } @media (max-width: 760px) { .hero h1 { font-size: clamp(3.35rem, 15.5vw, 5rem); } }

/* Searchable service and project pages. Gallery gutters stay equal on both axes. */
.seo-stories,.seo-page{padding:clamp(5rem,9vw,9rem) 3.5vw}.seo-stories h2{font-size:clamp(3rem,6vw,6rem);margin-bottom:3rem}
.seo-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.65rem,.9vw,1rem)}
.seo-card{display:block;color:inherit;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1.5rem;min-width:0}.seo-card img{aspect-ratio:4/3;object-fit:cover}.seo-card h3{font-size:1.5rem;line-height:1.15;margin:1.2rem 0 .6rem}.seo-card p{font-size:1rem;max-width:32rem}.seo-card span{font-size:.8rem;text-decoration:underline;text-underline-offset:.25em}
.seo-header{position:relative;background:var(--ink);color:var(--paper);mix-blend-mode:normal}.seo-header nav a{font-size:.72rem}
.seo-page{max-width:96rem;margin:auto}.seo-breadcrumb{font-size:.8rem;margin:0 0 3rem}.seo-page h1{font-size:clamp(3rem,6.5vw,6.8rem);max-width:18ch;line-height:1;letter-spacing:-.055em;margin:0 0 2rem}.seo-lede{font-size:clamp(1.15rem,2vw,1.5rem);max-width:48rem;line-height:1.5}.seo-page h2{font-size:clamp(2rem,3.7vw,3.5rem);line-height:1.05;letter-spacing:-.04em;margin:0 0 1.5rem}.seo-page h3{letter-spacing:-.02em}
.seo-section{margin:4.5rem 0}.seo-copy{max-width:48rem;font-size:1.1rem;line-height:1.65}.seo-copy li{margin:.6rem 0}.seo-actions{display:flex;flex-wrap:wrap;gap:1rem;margin:2rem 0}.seo-actions .event-button{color:var(--paper);background:var(--ink)}.seo-actions .event-button:hover{background:var(--accent)}
.seo-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.65rem,.9vw,1rem);margin:3rem 0}.seo-gallery figure{margin:0;min-width:0}.seo-gallery img{aspect-ratio:4/5;object-fit:cover}.seo-gallery figcaption{position:static;font-size:.75rem;letter-spacing:0;text-transform:none;line-height:1.5}.seo-gallery .seo-wide{grid-column:1/-1}.seo-gallery .seo-wide img{aspect-ratio:16/9}
.seo-faq details{border-top:1px solid var(--line);padding:1.25rem 0;max-width:50rem}.seo-faq summary{cursor:pointer;font-weight:700;font-size:1.1rem}.seo-faq p{line-height:1.65;max-width:46rem}.seo-related{display:flex;flex-wrap:wrap;gap:1rem 2rem}.seo-footer{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:space-between;padding:2rem 3.5vw;background:var(--ink);color:var(--paper);font-size:.85rem}.seo-footer p{margin:0}.services li a{text-underline-offset:.25em}
@media(max-width:760px){.seo-page,.seo-stories{padding:4rem 1rem}.seo-card-grid{grid-template-columns:1fr}.seo-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.seo-header nav a{display:block}.seo-header nav{gap:.8rem}.seo-header .wordmark img{width:4rem}.seo-page h1{font-size:clamp(2.8rem,12vw,4.2rem)}.seo-page .seo-lede{max-width:100%}}

.gallery .gallery-video{aspect-ratio:auto;align-self:stretch;min-height:0}
.gallery .gallery-video video{position:absolute;inset:0;width:100%;height:100%}
@media(max-width:760px){.gallery .gallery-video{height:calc((100vw - 2rem - .55rem) * .5625)}}