/* White Gold Productions: Express concept demo. Colours from their logo (gold gradient #D5B880 to #7B6A46) and favicon (forest #47704C).
   Chrome (header, hero, dark bands, footer) stays dark in both themes, like a screening room. */
:root {
  --ink-0: #0F1110; --ink-1: #1A1D1B; --ink-2: #252926; --gold: #D5B880; --gold-deep: #6B5C3C; --forest: #3E6343; --paper: #F5F1E8; --paper-2: #ECE5D6;
  --bg: var(--paper); --bg-alt: var(--paper-2); --card: #FBF8F1; --ink: #16181A; --ink-soft: #4A4F4C; --line: #D9D0BE;
  --accent-ink: var(--gold-deep); --link: #3E6343; --focus: #3E6343;
  --on-dark: #F2EEE4; --on-dark-soft: #B3B8B1; --line-dark: #333833;
  --display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1170px; --r: 4px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121413; --bg-alt: #181B19; --card: #1E2220; --ink: #F2EEE4; --ink-soft: #B3B8B1; --line: #313632;
    --accent-ink: var(--gold); --link: var(--gold); --focus: var(--gold); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121413; --bg-alt: #181B19; --card: #1E2220; --ink: #F2EEE4; --ink-soft: #B3B8B1; --line: #313632;
  --accent-ink: var(--gold); --link: var(--gold); --focus: var(--gold); color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.65 var(--body); overflow-x: clip; padding-bottom: 64px; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.hd :focus-visible, .ft :focus-visible, .hero :focus-visible, .phero :focus-visible, .sec--dark :focus-visible, .close :focus-visible, .drawer :focus-visible { outline-color: var(--gold); }
h1, h2, h3 { margin: 0 0 .45em; text-wrap: balance; color: var(--ink); }
h1, h2 { font-family: var(--display); font-weight: 800; line-height: .98; letter-spacing: .005em; text-transform: uppercase; }
h1 { font-size: clamp(32px, 5.6vw, 64px); }
h2 { font-size: clamp(32px, 4vw, 48px); }
h3 { font: 700 20px/1.3 var(--body); }
p { margin: 0 0 1em; text-wrap: pretty; }
.lede { font-size: 19px; color: var(--ink-soft); max-width: 62ch; }
.nw { white-space: nowrap; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--gold); color: var(--ink-0); padding: 10px 14px; font-weight: 700; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
@media (min-width: 1210px) { .wrap { padding: 0; } }

/* slate: the eyebrow, styled like a clapper slate field */
.slate { display: block; font: 700 13px/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 14px; }
.slate::before { content: ""; display: inline-block; vertical-align: -3px; margin-right: 10px; width: 26px; height: 22px; background-color: currentColor;
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 36 30%22%3E%3Cg fill=%22%23000%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M3 13h30v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zM7 17.4h22v1.8H7zM7 22.4h14v1.8H7z%22/%3E%3Cpath d=%22M2.4 6.1 9.6 5l-3.3 6.6-4.6.7zM12.5 4.6l7.2-1.1-3.3 6.6-7.2 1.1zM22.6 3l7.2-1.1-3.3 6.6-7.2 1.1zM32.5 1.5l1.3 5.9-5.4.8z%22/%3E%3C/g%3E%3C/svg%3E"); mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 36 30%22%3E%3Cg fill=%22%23000%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M3 13h30v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zM7 17.4h22v1.8H7zM7 22.4h14v1.8H7z%22/%3E%3Cpath d=%22M2.4 6.1 9.6 5l-3.3 6.6-4.6.7zM12.5 4.6l7.2-1.1-3.3 6.6-7.2 1.1zM22.6 3l7.2-1.1-3.3 6.6-7.2 1.1zM32.5 1.5l1.3 5.9-5.4.8z%22/%3E%3C/g%3E%3C/svg%3E"); }
.slate--light { color: var(--gold); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border-radius: var(--r); background: var(--gold); color: var(--ink-0); border: 2px solid var(--gold); font: 700 16px/1.2 var(--body); text-decoration: none; transition: background .2s, color .2s; }
.btn:hover { background: #E4CC9B; border-color: #E4CC9B; }
.btn--sm { min-height: 44px; padding: 8px 16px; font-size: 15px; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn--ghost-light { background: transparent; color: var(--on-dark); border-color: #F2EEE499; }
.btn--ghost-light:hover { background: var(--on-dark); color: var(--ink-0); border-color: var(--on-dark); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 14px; }
.arrow { font-weight: 700; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; display: inline-flex; min-height: 44px; align-items: center; }
.arrow::after { content: "\2192"; margin-left: 8px; transition: transform .2s; }
.arrow:hover::after { transform: translateX(4px); }
.arrow--light { color: var(--gold); }

/* header */
.hd { position: sticky; top: 0; z-index: 50; background: var(--ink-0); border-bottom: 1px solid var(--line-dark); }
.hd__in { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 10px 20px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand img { width: 178px; }
.nav, .hd__cta { display: none; }
.nav a { color: var(--on-dark); text-decoration: none; font-weight: 600; padding: 10px 12px; display: inline-flex; min-height: 44px; align-items: center; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold); }
.burger { justify-self: end; width: 48px; height: 48px; background: transparent; border: 1px solid var(--line-dark); border-radius: var(--r); cursor: pointer; position: relative; }
.burger i, .burger i::before, .burger i::after { position: absolute; left: 13px; width: 20px; height: 2px; background: var(--on-dark); content: ""; }
.burger i { top: 22px; } .burger i::before { top: -6px; left: 0; } .burger i::after { top: 6px; left: 0; }
@media (min-width: 981px) {
  .hd__in { grid-template-columns: 1fr auto 1fr; padding: 10px 32px; }
  .nav { display: flex; gap: 4px; justify-self: center; }
  .hd__cta { display: inline-flex; justify-self: end; white-space: nowrap; flex-shrink: 0; }
  .burger { display: none; }
  .brand img { width: 210px; }
}
.drawer { position: fixed; inset: 0; z-index: 100; }
.drawer[hidden] { display: none; }
.drawer__scrim { position: absolute; inset: 0; background: #000A; }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); background: var(--ink-0); padding: 20px 24px 90px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.drawer__panel a:not(.btn) { color: var(--on-dark); text-decoration: none; font: 800 30px/1.1 var(--display); text-transform: uppercase; padding: 10px 0; border-bottom: 1px solid var(--line-dark); }
.drawer__panel a[aria-current="page"] { color: var(--gold); }
.drawer__panel .btn { margin-top: 18px; }
.drawer__close { align-self: flex-end; min-height: 44px; padding: 8px 14px; background: transparent; color: var(--on-dark); border: 1px solid var(--line-dark); border-radius: var(--r); font: 600 15px var(--body); cursor: pointer; margin-bottom: 10px; }

/* hero: letterboxed still */
.hero { position: relative; background: var(--ink-0); color: var(--on-dark); display: grid; overflow: hidden; }
.hero__frame { grid-area: 1 / 1; position: relative; }
.hero__img { display: block; width: 100%; height: clamp(620px, 84svh, 800px); object-fit: cover; object-position: 66% 50%; opacity: .85; }
@media (min-width: 900px) { .hero__img { object-position: 40% 50%; } }


.hero__in { grid-area: 1 / 1; position: relative; z-index: 2; align-self: end; padding-top: 120px; padding-bottom: 72px; }
.hero h1 { color: #fff; max-width: 15ch; }
@media (min-width: 900px) { .hero h1 { max-width: 22ch; font-size: clamp(44px, 4.6vw, 60px); } .hero__in { padding-top: 72px; } }
.hero__sub { font-size: 19px; max-width: 46ch; color: var(--on-dark); }
.hero__help { color: var(--on-dark-soft); font-size: 15px; }
.hero__help a { color: var(--on-dark); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #0F1110F2 0%, #0F1110B3 45%, #0F111033 100%); z-index: 1; pointer-events: none; }
@media (min-width: 768px) { .hero__img { height: clamp(620px, calc(100svh - 70px), 760px); } .hero__in { padding-bottom: 88px; } }

/* made for */
.madefor { background: var(--ink-1); color: var(--on-dark-soft); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.madefor__in { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; padding-top: 22px; padding-bottom: 22px; }
.madefor__k { margin: 0; font: 700 13px/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.madefor ul { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; }
.madefor li { font: 700 20px/1.2 var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--on-dark); }

/* sections */
.sec { padding: 72px 0; }
.sec--tight { padding: 40px 0 72px; }
.sec--alt { background: var(--bg-alt); }
.sec--dark { background: var(--ink-1); color: var(--on-dark); --ink: var(--on-dark); --ink-soft: var(--on-dark-soft); --link: var(--gold); }
.sec__head { margin-bottom: 36px; max-width: 760px; }
@media (min-width: 768px) { .sec { padding: 104px 0; } }
.note { font-size: 15px; color: var(--ink-soft); }
.note--box { margin-top: 28px; padding: 20px; border: 1px dashed var(--line); border-radius: var(--r); font-size: 16px; }

.approach { display: grid; gap: 48px; }
@media (min-width: 900px) { .approach { grid-template-columns: 1.15fr .85fr; align-items: start; gap: 72px; } }
.laurels { display: grid; gap: 16px; margin: 6px 0 14px; }
.laurel { position: relative; padding: 20px 20px 20px 84px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.laurel::before { content: ""; position: absolute; left: 16px; top: 18px; width: 52px; height: 56px; background-color: var(--accent-ink);
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -6 64 66%22%3E%3Cpath d=%22M29 57Q5 46 13 6%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M20.68 51.44C16.45 54.68 11.38 52.79 9.20 50.73C11.62 48.95 16.88 47.70 20.68 51.44ZM20.68 51.44C16.81 48.22 17.87 43.42 19.56 41.15C21.70 43.00 23.77 47.46 20.68 51.44ZM16.38 46.17C11.75 48.24 7.58 45.31 6.09 42.88C8.72 41.77 13.81 41.80 16.38 46.17ZM16.38 46.17C13.50 42.33 15.61 38.21 17.72 36.54C19.29 38.72 20.20 43.27 16.38 46.17ZM13.33 39.76C8.63 40.75 5.47 37.17 4.65 34.59C7.31 34.08 11.96 35.15 13.33 39.76ZM13.33 39.76C11.43 35.62 14.26 32.33 16.59 31.27C17.61 33.61 17.52 37.96 13.33 39.76ZM11.54 32.21C7.00 32.37 4.78 28.50 4.53 25.96C7.08 25.92 11.18 27.68 11.54 32.21ZM11.54 32.21C10.44 28.04 13.66 25.56 16.02 25.03C16.59 27.38 15.77 31.36 11.54 32.21ZM11.00 24.19C6.73 23.80 5.25 19.93 5.40 17.53C7.79 17.79 11.35 19.91 11.00 24.19ZM11.00 24.19C10.46 20.15 13.76 18.33 16.04 18.20C16.31 20.47 15.08 24.04 11.00 24.19ZM11.46 15.91C7.49 15.21 6.56 11.50 6.98 9.28C9.20 9.71 12.30 11.97 11.46 15.91ZM11.46 15.91C11.27 12.07 14.51 10.77 16.65 10.92C16.72 13.07 15.29 16.26 11.46 15.91ZM13.00 6.00C10.35 1.90 12.74 -2.21 14.96 -3.81C16.40 -1.48 17.02 3.23 13.00 6.00Z%22 fill=%22%23000%22/%3E%3Cg transform=%22translate%2864 0%29 scale%28-1 1%29%22%3E%3Cpath d=%22M29 57Q5 46 13 6%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M20.68 51.44C16.45 54.68 11.38 52.79 9.20 50.73C11.62 48.95 16.88 47.70 20.68 51.44ZM20.68 51.44C16.81 48.22 17.87 43.42 19.56 41.15C21.70 43.00 23.77 47.46 20.68 51.44ZM16.38 46.17C11.75 48.24 7.58 45.31 6.09 42.88C8.72 41.77 13.81 41.80 16.38 46.17ZM16.38 46.17C13.50 42.33 15.61 38.21 17.72 36.54C19.29 38.72 20.20 43.27 16.38 46.17ZM13.33 39.76C8.63 40.75 5.47 37.17 4.65 34.59C7.31 34.08 11.96 35.15 13.33 39.76ZM13.33 39.76C11.43 35.62 14.26 32.33 16.59 31.27C17.61 33.61 17.52 37.96 13.33 39.76ZM11.54 32.21C7.00 32.37 4.78 28.50 4.53 25.96C7.08 25.92 11.18 27.68 11.54 32.21ZM11.54 32.21C10.44 28.04 13.66 25.56 16.02 25.03C16.59 27.38 15.77 31.36 11.54 32.21ZM11.00 24.19C6.73 23.80 5.25 19.93 5.40 17.53C7.79 17.79 11.35 19.91 11.00 24.19ZM11.00 24.19C10.46 20.15 13.76 18.33 16.04 18.20C16.31 20.47 15.08 24.04 11.00 24.19ZM11.46 15.91C7.49 15.21 6.56 11.50 6.98 9.28C9.20 9.71 12.30 11.97 11.46 15.91ZM11.46 15.91C11.27 12.07 14.51 10.77 16.65 10.92C16.72 13.07 15.29 16.26 11.46 15.91ZM13.00 6.00C10.35 1.90 12.74 -2.21 14.96 -3.81C16.40 -1.48 17.02 3.23 13.00 6.00Z%22 fill=%22%23000%22/%3E%3C/g%3E%3C/svg%3E"); mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -6 64 66%22%3E%3Cpath d=%22M29 57Q5 46 13 6%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M20.68 51.44C16.45 54.68 11.38 52.79 9.20 50.73C11.62 48.95 16.88 47.70 20.68 51.44ZM20.68 51.44C16.81 48.22 17.87 43.42 19.56 41.15C21.70 43.00 23.77 47.46 20.68 51.44ZM16.38 46.17C11.75 48.24 7.58 45.31 6.09 42.88C8.72 41.77 13.81 41.80 16.38 46.17ZM16.38 46.17C13.50 42.33 15.61 38.21 17.72 36.54C19.29 38.72 20.20 43.27 16.38 46.17ZM13.33 39.76C8.63 40.75 5.47 37.17 4.65 34.59C7.31 34.08 11.96 35.15 13.33 39.76ZM13.33 39.76C11.43 35.62 14.26 32.33 16.59 31.27C17.61 33.61 17.52 37.96 13.33 39.76ZM11.54 32.21C7.00 32.37 4.78 28.50 4.53 25.96C7.08 25.92 11.18 27.68 11.54 32.21ZM11.54 32.21C10.44 28.04 13.66 25.56 16.02 25.03C16.59 27.38 15.77 31.36 11.54 32.21ZM11.00 24.19C6.73 23.80 5.25 19.93 5.40 17.53C7.79 17.79 11.35 19.91 11.00 24.19ZM11.00 24.19C10.46 20.15 13.76 18.33 16.04 18.20C16.31 20.47 15.08 24.04 11.00 24.19ZM11.46 15.91C7.49 15.21 6.56 11.50 6.98 9.28C9.20 9.71 12.30 11.97 11.46 15.91ZM11.46 15.91C11.27 12.07 14.51 10.77 16.65 10.92C16.72 13.07 15.29 16.26 11.46 15.91ZM13.00 6.00C10.35 1.90 12.74 -2.21 14.96 -3.81C16.40 -1.48 17.02 3.23 13.00 6.00Z%22 fill=%22%23000%22/%3E%3Cg transform=%22translate%2864 0%29 scale%28-1 1%29%22%3E%3Cpath d=%22M29 57Q5 46 13 6%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M20.68 51.44C16.45 54.68 11.38 52.79 9.20 50.73C11.62 48.95 16.88 47.70 20.68 51.44ZM20.68 51.44C16.81 48.22 17.87 43.42 19.56 41.15C21.70 43.00 23.77 47.46 20.68 51.44ZM16.38 46.17C11.75 48.24 7.58 45.31 6.09 42.88C8.72 41.77 13.81 41.80 16.38 46.17ZM16.38 46.17C13.50 42.33 15.61 38.21 17.72 36.54C19.29 38.72 20.20 43.27 16.38 46.17ZM13.33 39.76C8.63 40.75 5.47 37.17 4.65 34.59C7.31 34.08 11.96 35.15 13.33 39.76ZM13.33 39.76C11.43 35.62 14.26 32.33 16.59 31.27C17.61 33.61 17.52 37.96 13.33 39.76ZM11.54 32.21C7.00 32.37 4.78 28.50 4.53 25.96C7.08 25.92 11.18 27.68 11.54 32.21ZM11.54 32.21C10.44 28.04 13.66 25.56 16.02 25.03C16.59 27.38 15.77 31.36 11.54 32.21ZM11.00 24.19C6.73 23.80 5.25 19.93 5.40 17.53C7.79 17.79 11.35 19.91 11.00 24.19ZM11.00 24.19C10.46 20.15 13.76 18.33 16.04 18.20C16.31 20.47 15.08 24.04 11.00 24.19ZM11.46 15.91C7.49 15.21 6.56 11.50 6.98 9.28C9.20 9.71 12.30 11.97 11.46 15.91ZM11.46 15.91C11.27 12.07 14.51 10.77 16.65 10.92C16.72 13.07 15.29 16.26 11.46 15.91ZM13.00 6.00C10.35 1.90 12.74 -2.21 14.96 -3.81C16.40 -1.48 17.02 3.23 13.00 6.00Z%22 fill=%22%23000%22/%3E%3C/g%3E%3C/svg%3E"); }
.laurel p { margin: 0; }
.laurel__award { font: 800 24px/1.05 var(--display); text-transform: uppercase; color: var(--ink); }
.laurel__fest { font-size: 15px; color: var(--ink-soft); margin-top: 4px !important; }
.laurel__film { font-size: 15px; margin-top: 8px !important; }
.laurel cite { font-style: italic; font-weight: 600; }

/* shot list */
.shots { list-style: none; margin: 0 0 28px; padding: 0; border-top: 1px solid var(--line-dark); counter-reset: none; }
.shots li { border-bottom: 1px solid var(--line-dark); }
.shots li::marker { content: ""; }
.shots a { display: grid; grid-template-columns: 48px 1fr; gap: 4px 16px; padding: 22px 0; color: var(--on-dark); text-decoration: none; }
.shot__n { grid-row: span 2; font: 800 28px/1 var(--display); color: var(--gold); }
.shot__t { font: 800 26px/1.05 var(--display); text-transform: uppercase; }
.shot__d { color: var(--on-dark-soft); font-size: 16px; }
.shots a:hover .shot__t { color: var(--gold); }
@media (min-width: 900px) { .shots a { grid-template-columns: 80px 1.1fr 1fr; align-items: center; } .shot__n { grid-row: auto; } .shot__t { font-size: 32px; } }

/* featured work */
.feature { display: grid; gap: 20px; margin-bottom: 28px; }
.fcard { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.fcard figure { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-0); }
.fcard img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.fcard__body { padding: 20px; display: block; color: inherit; text-decoration: none; }
.fcard figure { position: relative; }
.fcard figure iframe, .process__film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fcard__media img, .process__film img { width: 100%; height: 100%; object-fit: cover; }
.fcard__k { font: 700 13px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 8px; }
.fcard__k span { color: var(--ink-soft); letter-spacing: .04em; text-transform: none; font-weight: 600; margin-left: 6px; }
.fcard h3 { margin: 0; }
.fcard__body:hover h3, .fcard__body:focus-visible h3 { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .feature { grid-template-columns: 1.6fr 1fr; grid-template-rows: auto auto; }
  .fcard--big { grid-row: span 2; }
  .fcard--big figure { aspect-ratio: auto; flex: 1; min-height: 360px; }
  .hero::after { background: linear-gradient(90deg, #0F1110F0 0%, #0F1110A6 50%, #0F111026 100%); }
  .fcard--big h3 { font: 800 34px/1.02 var(--display); text-transform: uppercase; }
  .fcard__body { padding: 24px 28px; }
}

/* quotes */
.quotes { display: grid; gap: 20px; }
@media (min-width: 900px) { .quotes { grid-template-columns: 1fr 1fr; } }
.quote { margin: 0; padding: 28px 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); display: flex; flex-direction: column; justify-content: space-between; }
.quote blockquote { margin: 0 0 20px; font-size: 18px; }
.quote blockquote p::before { content: "\201C"; font: 800 56px/0 var(--display); color: var(--accent-ink); vertical-align: -22px; margin-right: 4px; }
.quote figcaption { display: grid; gap: 2px; font-size: 15px; color: var(--ink-soft); }
.quote strong { color: var(--ink); font-size: 16px; }
@media (min-width: 768px) { .quote { padding: 40px; } }

/* pricing */
.pricebar { display: grid; gap: 32px; }
@media (min-width: 900px) { .pricebar { grid-template-columns: 1fr 1fr; align-items: center; gap: 72px; } }
.tiers-mini { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.tiers-mini li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 20px; border-bottom: 1px solid var(--line); align-items: baseline; }
.tiers-mini li:last-child { border-bottom: 0; }
.tier__n { font: 800 28px/1 var(--display); text-transform: uppercase; }
.tier__p { font-weight: 700; color: var(--accent-ink); }
.tiers { display: grid; gap: 20px; }
@media (min-width: 900px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier { padding: 28px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); display: flex; flex-direction: column; }
.tier h3 { font: 800 32px/1 var(--display); text-transform: uppercase; margin-bottom: 14px; }
.tier__from { margin: 0; font-size: 14px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.tier__price { font: 800 44px/1 var(--display); color: var(--accent-ink); margin: 4px 0 18px; }
.tier .ticks { flex: 1; }
.tier .btn { align-self: flex-start; }
.tier--top { background: var(--ink-1); border-color: var(--gold); --ink: var(--on-dark); --ink-soft: var(--on-dark-soft); --accent-ink: var(--gold); color: var(--on-dark); }
.tier--top .btn--ghost { color: var(--on-dark); border-color: var(--on-dark); }
.tier--top .btn--ghost:hover { background: var(--on-dark); color: var(--ink-0); }
@media (min-width: 768px) { .tier { padding: 40px; } }
.ticks { list-style: none; margin: 0 0 20px; padding: 0; }
.ticks li { position: relative; padding-left: 28px; margin-bottom: 8px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 12px; height: 7px; border-left: 2.5px solid var(--accent-ink); border-bottom: 2.5px solid var(--accent-ink); transform: rotate(-45deg); }

/* page hero */
.phero { background: var(--ink-0); color: var(--on-dark); padding: 56px 0 64px; --ink: #fff; --ink-soft: var(--on-dark-soft); }
.phero h1 { color: #fff; }
.phero .lede { color: var(--on-dark); }
.phero__in { display: grid; gap: 36px; align-items: center; }
.phero__img { margin: 0; border-radius: var(--r); overflow: hidden; border-top: 14px solid #000; border-bottom: 14px solid #000; }
.phero__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (min-width: 900px) { .phero { padding: 88px 0 96px; } .phero__in { grid-template-columns: 1.1fr .9fr; gap: 64px; } }
.phero--plain .lede { max-width: 56ch; }

/* jump nav */
.jump { background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.jump ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 12px 0; }
.jump a { display: inline-flex; min-height: 44px; align-items: center; padding: 6px 12px; color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; border: 1px solid var(--line); border-radius: 99px; background: var(--card); }
.jump a:hover { border-color: var(--accent-ink); }

/* services */
.svcs { display: grid; gap: 72px; }
.svc { display: grid; gap: 28px; align-items: center; }
.svc__media { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--ink-0); }
.svc__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.svc__n { font: 800 64px/1 var(--display); color: var(--accent-ink); margin: 0 0 6px; opacity: .9; }
.svc--text .svc__copy { padding: 32px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
@media (min-width: 900px) {
  .svc { grid-template-columns: 1fr 1fr; gap: 64px; }
  .svc--flip .svc__media { order: 2; }
  .svc--text { grid-template-columns: 1fr; }
  .svc--text .svc__copy { padding: 48px; display: grid; grid-template-columns: 120px 1fr; column-gap: 32px; }
  .svc--text .svc__copy > * { grid-column: 2; }
  .svc--text .svc__n { grid-column: 1; grid-row: 1 / span 6; }
}
.steps, .values { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; counter-reset: s; }
.steps li, .values li { counter-increment: s; padding: 28px 20px; border: 1px solid var(--line-dark); border-radius: var(--r); background: var(--ink-2); }
.steps li::marker, .values li::marker { content: ""; }
.steps li::before, .values li::before { content: "0" counter(s); display: block; font: 800 40px/1 var(--display); color: var(--gold); margin-bottom: 14px; }
.steps h3, .values h3 { color: var(--on-dark); }
.steps p, .values p { color: var(--on-dark-soft); margin: 0; }
@media (min-width: 900px) { .steps, .values { grid-template-columns: repeat(3, 1fr); } .steps li, .values li { padding: 40px; } }

/* work */
.works { display: grid; gap: 20px; }
@media (min-width: 900px) { .works { grid-template-columns: 1fr 1fr; } }
.wcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.wcard__img { margin: 0; aspect-ratio: 16 / 9; background: var(--ink-0); position: relative; }
.wcard__img iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.play { display: block; position: absolute; inset: 0; }
.play img { transition: transform .5s ease; }
.play:hover img, .play:focus-visible img { transform: scale(1.03); }
.play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10,10,10,.45)); pointer-events: none; }
.play__btn { position: absolute; z-index: 1; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: var(--gold); box-shadow: 0 6px 24px rgba(0,0,0,.4); transition: transform .2s; }
.play__btn::before { content: ""; position: absolute; left: 27px; top: 21px; border-left: 20px solid #111; border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.play:hover .play__btn, .play:focus-visible .play__btn { transform: scale(1.1); }
.filter { margin: 0 0 28px; }
.filter__h { font: 700 13px/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: 600 15px/1 var(--body); cursor: pointer; }
.chip span { margin-left: 6px; color: var(--ink-soft); font-weight: 500; }
.chip:hover { border-color: var(--accent-ink); }
.chip.is-on { background: var(--gold); border-color: var(--gold); color: #111; }
.chip.is-on span { color: #111; }
.wcard[hidden] { display: none; }
.wcard__img img { width: 100%; height: 100%; object-fit: cover; }
.wcard__body { padding: 24px 20px; }
.wcard--text .wcard__body { padding-top: 40px; }
.wcard__client { font: 700 13px/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 6px; }
.wcard h2 { font-size: clamp(28px, 3vw, 36px); }
.credits { margin: 0 0 16px; display: grid; gap: 0; border-top: 1px solid var(--line); }
.credits div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.credits dt { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--ink-soft); padding-top: 3px; }
.credits dd { margin: 0; }
@media (min-width: 768px) { .wcard__body { padding: 32px 40px 36px; } }

/* about */
.founder { display: grid; gap: 36px; }
.founder__img { margin: 0; border-radius: var(--r); overflow: hidden; max-width: 420px; }
@media (min-width: 900px) { .founder { grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; } .founder__img { position: sticky; top: 100px; } }
.links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.links a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 600; }
.where { display: grid; gap: 32px; align-items: center; }
.where__img { margin: 0; border-radius: var(--r); overflow: hidden; }
.where__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (min-width: 900px) { .where { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* contact */
.contact { display: grid; gap: 32px; }
@media (min-width: 900px) { .contact { grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; } }
.cards { display: grid; gap: 12px; }
.ccard { display: grid; gap: 2px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--ink); text-decoration: none; }
a.ccard:hover { border-color: var(--accent-ink); }
.ccard__k { font: 700 12px/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
.ccard__v { font: 800 26px/1.15 var(--display); overflow-wrap: anywhere; }
.ccard__v--sm { font: 400 16px/1.5 var(--body); }
.form { padding: 28px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
@media (min-width: 768px) { .form { padding: 40px; } }
.form h2 { font-size: clamp(28px, 3vw, 36px); }
.form__row { display: grid; gap: 0 16px; }
@media (min-width: 600px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form label, .form legend { display: block; font-weight: 600; margin: 14px 0 6px; }
.form input:not([type="radio"]):not([type="checkbox"]), .form select, .form textarea { width: 100%; min-height: 48px; padding: 10px 12px; font: 400 16px/1.4 var(--body); color: var(--ink); background: var(--bg); border: 1.5px solid #8C8676; border-radius: var(--r); }
.form textarea { resize: vertical; }
.opt { font-weight: 400; color: var(--ink-soft); }
.help { font-size: 14px; color: var(--ink-soft); margin: 6px 0 0; }
.radios { border: 0; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 0 18px; }
.radios legend { width: 100%; }
.radios label, .check { display: inline-flex !important; align-items: center; gap: 8px; font-weight: 400; min-height: 44px; margin: 0; }
.check { margin: 14px 0 18px !important; }
.radios input, .check input { width: 20px; height: 20px; accent-color: var(--forest); flex-shrink: 0; }
.form .btn { margin-top: 8px; cursor: pointer; }
.form .btn:disabled { opacity: .6; cursor: not-allowed; }
.form__ok { margin: 16px 0 0; padding: 14px 16px; background: var(--bg-alt); border: 1px solid var(--accent-ink); border-radius: var(--r); font-weight: 600; }
.form__alt { margin: 16px 0 0; font-size: 15px; color: var(--ink-soft); }

/* close */
.close { background: var(--ink-0); color: var(--on-dark); padding: 80px 0; border-top: 1px solid var(--line-dark); --ink: #fff; }
.close__in > * { max-width: 820px; }
.close h2 { font-size: clamp(36px, 5vw, 60px); color: #fff; }
.close p:not(.slate) { color: var(--on-dark); font-size: 19px; }
.close a:not(.btn) { color: var(--gold); }

/* footer */
.ft { background: var(--ink-0); color: var(--on-dark-soft); padding: 56px 0 28px; border-top: 1px solid var(--line-dark); font-size: 16px; }
.ft a { color: var(--on-dark); }
.ft__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; align-items: center; padding-bottom: 28px; border-bottom: 1px solid var(--line-dark); margin-bottom: 28px; }
.ft__logo img { width: 220px; }
.ft__tag { margin: 0; font: 800 22px/1.1 var(--display); text-transform: uppercase; color: var(--on-dark); }
.ft__grid { display: grid; gap: 28px; }
@media (min-width: 768px) { .ft__grid { grid-template-columns: repeat(3, 1fr); } }
.ft__h { font: 700 13px/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.ft__nav { list-style: none; margin: 0; padding: 0; }
.ft__nav a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; }
.ft__nav a:hover { text-decoration: underline; }
.ft__muted { color: var(--on-dark-soft); font-size: 15px; }
.ft__small { margin: 32px 0 0; font-size: 14px; }
.ft .ccd-credit { color: var(--on-dark-soft); }
.ft .ccd-credit a { display: inline-flex; min-height: 44px; align-items: center; }
.hero__help a, .note--box a, .ccard__v--sm a, .form__alt a { display: inline-block; padding: 10px 0; margin: -10px 0; }

/* concept banner */
.concept { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: #000; color: #fff; text-align: center; font: 600 14px/1.35 var(--body); padding: 10px 16px; border-top: 3px solid var(--gold); }
@media (max-width: 420px) { body { padding-bottom: 96px; } }
@media print { .concept, .drawer, .burger { display: none; } }

/* reveal: visible by default, hidden only after site.js adds .reveal--init */
.reveal--init { opacity: .4; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal--init.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .play img, .play__btn { transition: none; } .reveal--init { opacity: 1; transform: none; transition: none; } .fcard img, .arrow::after { transition: none; } }
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); z-index: 60; pointer-events: none; }

/* hero cue: tells visitors the films sit just below (David, Oct 10) */
.hero__cue { position: absolute; z-index: 3; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-height: 44px; padding: 4px 12px; color: var(--on-dark); font: 700 13px/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.hero__cue span { width: 12px; height: 12px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); animation: cue 2.4s ease-in-out infinite; }
.hero__cue:hover { color: var(--gold); }
@keyframes cue { 0%, 100% { translate: 0 0; } 50% { translate: 0 5px; } }
@media (prefers-reduced-motion: reduce) { .hero__cue span { animation: none; } }

/* about: process film */
.process { display: grid; gap: 32px; align-items: center; }
.process__film { border-radius: var(--r); overflow: hidden; }
@media (min-width: 900px) { .process { grid-template-columns: .9fr 1.1fr; gap: 64px; } }

/* Hero at about 70% of the screen so the first film stills peek above the fold (David Oct 10, Devyn Oct 11). */
.hero { min-height: clamp(540px, 70svh, 760px); }
.hero__frame { position: absolute; inset: 0; }
.hero .hero__img { height: 100%; }
#work.sec { padding-top: 24px; }
@media (min-width: 768px) { #work.sec { padding-top: 32px; } }