/* Reuvens — precision studio. Shared shell; media player lives in reels.css. */
:root {
  --bg: #0b1010;
  --panel: #131c1b;
  --lime: #d8f58b;
  --text: #f2f3eb;
  --muted: #a6b3ad;
  --line: #d7e9df24;
  --paper: #eeefe7;
  --ink: #14211d;
  --gutter: clamp(24px, 5.5vw, 108px);
  --radius: 5px;
  color-scheme: dark;
}
html { scroll-padding-top: 112px; }
body { min-width: 320px; overflow-x: clip; }
::selection { background: var(--lime); color: var(--ink); }
button, a, input, select, summary { touch-action: manipulation; }
button, input, select, a { transition: color .2s, background .2s, border-color .2s, transform .3s; }
.skip { z-index: 200; border-radius: var(--radius); }
.header {
  position: fixed;
  inset: 20px 24px auto;
  width: calc(100% - 48px);
  max-width: 1512px;
  height: 76px;
  margin-inline: auto;
  padding: 0 26px;
  border: 1px solid #e0f0e523;
  border-radius: 8px;
  background: #0c1513df;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 14px 50px #02080726;
  color: var(--text);
  gap: 24px;
}
.brand { width: 147px; flex-shrink: 0; position: relative; }
.brand b { font-size: 27px; letter-spacing: -1.7px; }
.brand small { font: 7px Arial, sans-serif; letter-spacing: 4.7px; margin-top: 6px; }
.header nav { gap: clamp(18px, 2vw, 34px); font-size: 12px; color: #d0dbd4; }
.header nav a { position: relative; white-space: nowrap; padding-block: 12px; }
.header nav a::after { content: ''; position: absolute; inset: auto 0 2px; height: 1px; background: var(--lime); transform: scaleX(0); transform-origin: right; transition: transform .25s; }
.header nav a:hover::after, .header nav a:focus-visible::after { transform: scaleX(1); }
.header-cta { background: var(--lime); color: var(--ink); border: 0; padding: 12px 18px; border-radius: 3px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.header-cta:hover { background: #e9ffb5; }
.header-cta span { color: inherit; margin-right: 26px; }
.hero {
  height: max(800px, 100svh);
  max-height: 1060px;
  min-height: 800px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.hero::after { content: ''; position: absolute; right: var(--gutter); top: 130px; bottom: 89px; width: 1px; background: linear-gradient(transparent, #c9e1d019 30%, #c9e1d010); pointer-events: none; z-index: -1; }
.hero-image {
  inset: 0 auto 0 0;
  width: 63%;
  height: 100%;
  object-position: 50% 67%;
  transform: none;
  animation: studio-arrive 1.4s cubic-bezier(.2,.7,.2,1) both;
}
.hero-shade { background: linear-gradient(270deg, #0b1010 0%, #0b1010 34%, #0b1010e8 42%, #0b10102b 64%, #0b101008 85%), linear-gradient(0deg, #0b1010 0%, transparent 32%, #0b10102b 82%); }
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  width: 57%;
  max-width: 870px;
  padding: clamp(194px, 20vh, 250px) var(--gutter) 130px 20px;
}
.eyebrow { font: 10px/1.8 Arial, sans-serif; letter-spacing: 2.3px; color: var(--muted); }
.hero .eyebrow { font-size: 10px; gap: 12px; padding: 8px 0; }
.dot { width: 5px; height: 5px; box-shadow: 0 0 0 5px #d8f58b0d; }
.hero h1 { font-size: clamp(77px, 7.45vw, 120px); line-height: 1.035; letter-spacing: -.055em; font-weight: 700; margin: 28px 0 24px; }
.hero h1 em { color: var(--lime); }
.hero-copy { font-size: clamp(18px, 1.5vw, 23px); font-weight: 300; line-height: 1.65; color: #b7c6bd; }
.hero-actions { display: flex; align-items: center; gap: 23px; margin-top: 34px; flex-wrap: wrap; }
.button { padding: 17px 24px; border-radius: 3px; font-size: 13px; min-height: 54px; gap: 30px; }
.button span { font-size: 19px; font-weight: 300; }
.button.lime { background: var(--lime); color: var(--ink); box-shadow: inset 0 0 0 1px #fff1; }
.button.lime:hover { background: #e8ffb1; }
.button.outline { border-color: #e0f2e33b; }
.text-link { gap: 20px; font-size: 12px; padding-block: 12px 7px; }
.hero-location { margin-top: 24px; color: #93a59b; font-size: 11px; }
.hero-caption { left: var(--gutter); bottom: 112px; padding: 17px 22px; gap: 8px; border: 1px solid #d9f1e12b; border-left: 2px solid var(--lime); background: #0c1713a6; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 0 4px 4px 0; min-width: 270px; }
.hero-caption b { font-size: 17px; letter-spacing: -.3px; }
.hero-caption span { color: var(--lime); font-size: 8px; letter-spacing: 2px; }
.hero-caption small { font: 8px/1.6 Arial, sans-serif; color: #b2c6ba; letter-spacing: 1.1px; }
.hero-index { left: var(--gutter); bottom: 34px; font: 12px Arial, sans-serif; }
.scroll-note { right: var(--gutter); bottom: 33px; align-items: center; color: #c1d1c6; font-size: 10px; }
.scroll-note span { border: 1px solid #dcebd233; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; }
.ticker { border: 0; background: var(--lime); color: #1b2b18; padding: 20px var(--gutter); gap: 20px; justify-content: space-between; }
.ticker span { font: 700 12px/1.5 Arial, sans-serif; letter-spacing: 2.5px; }
.ticker span:nth-of-type(2) { font-family: Heebo, Arial, sans-serif; letter-spacing: 1px; }
.ticker i { color: #2d421b; font-size: 20px; font-weight: 400; }
.section { padding: 112px var(--gutter); }
.section-heading { align-items: flex-end; margin-bottom: 50px; gap: 50px; }
.section-heading>p, .section-heading>div>p:not(.eyebrow) { font-size: 15px; font-weight: 400; line-height: 1.9; }
h2 { font-size: clamp(42px, 4.4vw, 70px); letter-spacing: -.04em; line-height: 1.13; font-weight: 500; margin-top: 20px; }
h2 em { font-weight: 400; }
.services { background: #0c1211; position: relative; }
.services .section-heading { align-items: center; }
.service-grid { gap: 20px; }
.service { min-height: 550px; border-radius: var(--radius); padding: 34px 30px; border: 1px solid #e2f5df18; transition: border-color .3s, transform .4s; }
.service::after { background: linear-gradient(0deg, #09110ff7 0%, #09110fd9 28%, #09110f16 75%), linear-gradient(180deg, #09110f3b, transparent 25%); }
.service img { filter: brightness(.91) saturate(.8); object-position: 50% 47%; }
.service-num { top: 23px; left: 23px; width: 37px; height: 37px; background: #09110f3b; border-color: #fff5; backdrop-filter: blur(8px); font-size: 10px; }
.service small { font-size: 8px; letter-spacing: 2px; }
.service h3 { font-size: clamp(26px, 2.6vw, 39px); letter-spacing: -.04em; margin-top: 12px; }
.service p { font-size: 13px; line-height: 1.9; color: #c0cec4; margin-top: 15px; max-width: 290px; }
.service-link { padding-top: 19px; margin-top: 30px; border-color: #d9efdf40; font-size: 11px; letter-spacing: .1px; }
.service:hover { border-color: #d8f58b70; transform: translateY(-5px); }
.service:hover img { transform: scale(1.04); filter: brightness(1) saturate(1); }
.works { background: var(--paper); color: var(--ink); color-scheme: light; }
.works em { color: #5c7258; }
.works .eyebrow { color: #576956!important; }
.works .section-heading p { color: #677361!important; }
.works .text-link { color: #263b2c; border-color: #8a99826b; }
.gallery-search { background: #fff8; border: 1px solid #7885712b; padding: 25px 28px 22px; margin-bottom: 22px; grid-template-columns: 1fr minmax(260px, 470px); gap: 7px 35px; border-radius: 5px; }
.gallery-search label { font-size: 20px; font-weight: 500; letter-spacing: -.4px; }
.gallery-search input { background: #fff9; border-color: #8a978753; font-size: 13px; min-height: 51px; border-radius: 3px; grid-column: 2; grid-row: 1 / span 2; padding-inline: 17px; }
.gallery-search p { color: #68795f; font-size: 11px; grid-column: 1; }
.brand-shortcuts { margin: 0 0 26px; gap: 15px; padding-inline: 2px; }
.brand-shortcuts span { font-size: 10px; }
.brand-shortcuts button { padding: 10px 5px; color: #3a5036; font-size: 11px; border-bottom-color: transparent; }
.brand-shortcuts button:hover { border-color: #657e4f; }
.brand-shortcuts #saved-toggle { border: 1px solid #8c9a7d65; padding: 9px 16px; border-radius: 3px; }
.brand-shortcuts [aria-pressed=true] { background: var(--ink); color: var(--paper); border-radius: 3px; }
.filters { gap: 7px; border-color: #77896e39; padding-bottom: 20px; margin-bottom: 28px; }
.filters button { font-size: 11px; padding: 10px 18px; border-color: #53614d33; border-radius: 3px; background: transparent; }
.filters button:hover { background: #d9dfcf; }
.filters button.active { background: #1b3025; border-color: #1b3025; color: #f4f8e9; }
.filters>span { color: #63765b; font-size: 10px; letter-spacing: .2px; }
.gallery { grid-template-columns: repeat(12, minmax(0,1fr)); gap: 36px 24px; }
.project { grid-column: span 4; position: relative; }
.project-photo { aspect-ratio: 4 / 4.6; background: #d9ded1; border-radius: 4px; }
.project-photo::after { content: ''; position: absolute; inset: 0; border: 1px solid #263b2412; border-radius: inherit; pointer-events: none; }
.project-photo img { transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .4s; }
.project:hover img { transform: scale(1.035); }
.project:first-child { grid-column: span 8; }
.project:first-child .project-photo { aspect-ratio: 1.65; }
.project:first-child .project-photo img { object-position: 50% 80%; }
.project:first-child .project-photo:has(.play) img { object-position: 50% 50%; }
.project:nth-child(2) .project-photo { aspect-ratio: .786; }
.project:first-child .project-meta h3 { font-size: 22px; }
.project-photo .arrow { height: 42px; width: 42px; background: #f6f8eceb; border: 1px solid #fff8; left: 17px; bottom: 17px; color: #183424; font-size: 25px; backdrop-filter: blur(10px); transition: background .25s, transform .3s; }
.project:hover .arrow { background: var(--lime); transform: rotate(-5deg); }
.project-photo .play { top: 16px; right: 16px; width: 36px; height: 36px; background: #13271ac7; backdrop-filter: blur(10px); font-size: 11px; border-color: #ffffff50; }
.project-meta { align-items: baseline; margin-top: 15px; gap: 12px; }
.project-meta h3 { font-size: 19px; letter-spacing: -.45px; font-weight: 500; line-height: 1.4; }
.project-meta span { color: #63735a; font-size: 10px; }
.project-sub { color: #677a5d; font-size: 11px; margin-top: 6px; }
.load-more { margin-top: 44px; }
.load-more .button { min-width: 245px; border-color: #53674c63; }
.cinema { background: #0d1513; border-bottom: 1px solid var(--line); }
.reels-experience { padding: 112px var(--gutter); background: radial-gradient(ellipse at 80% 5%, #25392642, transparent 50%), #0b1010; border-bottom: 1px solid var(--line); }
.films { gap: 20px; }
.film { aspect-ratio: 9 / 15; border-radius: 5px; border: 1px solid #d6e7ce24; }
.film img { filter: brightness(.88) saturate(.9); }
.film-play { border-color: #dcebc35e; width: 44px; height: 44px; color: var(--lime); background: #0c191370; backdrop-filter: blur(10px); }
.film>div { right: 24px; left: 24px; bottom: 25px; }
.film h3 { font-size: 21px; letter-spacing: -.6px; }
.film p { color: #b6c9bb; font-size: 11px; }
.approach { background: #101a17; min-height: 850px; grid-template-columns: 1.02fr 1fr; }
.approach-photo { margin: 28px 28px 28px 0; border-radius: 4px; }
.approach-photo img { filter: brightness(.86) saturate(.7); object-position: 50% 50%; }
.approach-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 60%, #07120aa8); pointer-events: none; }
.photo-label { bottom: 28px; left: 28px; z-index: 1; font-size: 9px; letter-spacing: 2px; }
.approach-copy { padding: 91px 12% 80px; }
.approach h2 { font-size: clamp(34px, 3.4vw, 55px); }
.approach .intro { color: #d5e0d6; font-size: clamp(20px, 1.8vw, 27px); font-weight: 300; line-height: 1.75; margin: 29px 0 14px; }
.quote-source { color: #8fa992; font-size: 11px; }
.steps { margin-top: 37px; }
.steps>div { padding: 24px 0; gap: 25px; border-color: #d7e9df23; }
.steps>div>span { font-size: 10px; color: #bdd297; padding-top: 6px; }
.steps h3 { font-size: 17px; font-weight: 400; }
.steps p { color: #99afa1; font-size: 12px; line-height: 1.9; }
.finder { background: var(--lime); color: #203220; padding-block: 94px; gap: 10%; align-items: center; }
.finder .eyebrow { color: #4c6935; }
.finder h2 em { color: #567136; }
.finder>div>p:not(.eyebrow) { color: #546c40; font-size: 14px; margin-top: 23px; }
.finder-label { font-size: 14px; color: #2c4225; margin-bottom: 19px; }
.finder-panel { min-width: 0; }
.finder-choices { gap: 0; border-top: 1px solid #25452c36; }
.finder-choices button { border: 0; border-bottom: 1px solid #25452c36; padding: 21px 2px; font-size: 17px; gap: 20px; color: #243e21; }
.finder-choices button:hover, .finder-choices button.selected { background: #213e24; color: #eaf9c7; padding-inline: 20px; }
.finder-choices span { opacity: 1; }
#recommendation { border-color: #3b5930; margin-top: 28px; padding: 8px 21px; }
#recommendation h3 { color: #233e22; }
#recommendation p { color: #445f37; }
#recommendation .lime { background: #203923; color: #e7f3d6; }
.comparison { background: #0c1311; border-bottom: 1px solid var(--line); }
.comparison-grid { gap: 0; border: 1px solid #d4e7d52e; border-radius: 5px; overflow: hidden; }
.comparison-grid article { border: 0; padding: 38px 30px; background: #101916; }
.comparison-grid article+article { border-right: 1px solid #d4e7d52e; }
.comparison-grid .compare-featured { background: #1c2b20; border-color: #d4e7d52e; }
.compare-number { font-size: 10px; border: 1px solid #c8dd9940; border-radius: 50%; width: 33px; height: 33px; display: grid; place-items: center; color: #caddae; }
.comparison h3 { font-size: 29px; letter-spacing: -.8px; margin-top: 25px; }
.compare-goal { font-size: 13px; color: #b8cbb9; min-height: 53px; line-height: 1.85; }
.comparison dl { margin-top: 18px; padding-top: 11px; border-top: 1px solid #d4e7d522; }
.comparison dt { font-size: 11px; letter-spacing: .1px; color: #b8ce98; margin-top: 20px; }
.comparison dd { font-size: 13px; line-height: 1.9; color: #a6baa9; margin-top: 9px; }
.comparison .button { font-size: 12px; margin-top: auto; min-height: 50px; }
.compare-note { font-size: 11px; line-height: 1.9; color: #8ba78f; }
.faq { background: #101816; grid-template-columns: 1fr 1.2fr; }
.questions details { padding-block: 26px; }
.questions summary { font-size: 16px; align-items: center; gap: 25px; }
.questions summary::after { border: 1px solid #c9e0cd3a; border-radius: 50%; height: 26px; width: 26px; flex-shrink: 0; display: grid; place-items: center; font-size: 18px; font-weight: 300; }
.questions details[open] summary { color: var(--lime); }
.questions p { font-size: 13px; line-height: 2; color: #a6bcae; padding-left: 40px; }
.contact { background: radial-gradient(ellipse at 80% 100%, #2c452852, transparent 65%), #0c1310; gap: 10%; padding-top: 100px; padding-bottom: 100px; }
.contact h2 { font-size: clamp(46px, 5.3vw, 84px); letter-spacing: -.05em; }
.contact>div>p:not(.eyebrow) { font-size: 14px; }
.contact-actions { gap: 12px; margin-top: 34px; }
.contact-actions .button { font-size: 12px; }
.studio-info { border-right-color: #cfe1c826; padding-right: 19%; align-self: stretch; padding-top: 14px; }
.studio-info>a { margin-top: 32px; font-size: 29px; letter-spacing: -.5px; }
.studio-info>a span { font-size: 11px; color: #98b495; letter-spacing: 0; }
.studio-info>p:not(.eyebrow) { font-size: 11px!important; color: #95aa90; }
.social { gap: 24px; font-size: 11px; }
.social a { border-color: #d2e8c92e; color: #c5d3bb; padding-bottom: 9px; }
footer { background: #09110d; padding: 10px var(--gutter) 30px; border-top-color: #daecd01a; }
.footer-wordmark { font-size: clamp(55px, 16.1vw, 300px); line-height: 1.25; color: #d1e4bd; letter-spacing: -.065em; opacity: .16; }
.footer-bottom { padding-top: 25px; padding-bottom: 8px; border-color: #cee0c422; color: #90a47e; font-size: 10px; }
.footer-bottom button { color: #aec29d; }
dialog { background: #14221b; border-color: #d2e4ce36; border-radius: 8px; padding: 44px; box-shadow: 0 40px 140px #0009; overscroll-behavior: contain; }
dialog::backdrop { background: #030b08cf; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
dialog .close { background: #101c17e0; width: 38px; height: 38px; border-radius: 50%; top: 14px; left: 14px; font-size: 28px; border: 1px solid #ccdcc833; display: grid; place-items: center; padding: 0 0 3px; }
dialog .close:hover { background: #314832; color: var(--lime); }
dialog h2 { font-size: 43px; }
form { gap: 20px 16px; }
form label { font-size: 12px; color: #bfd2bc; }
input, select { min-height: 50px; background: #0e1a14; border-color: #859b704d; border-radius: 3px; color: #e7f2df; }
input::placeholder { color: #7d9777; }
input:hover, select:hover { border-color: #a9c18a80; }
input:focus, select:focus { border-color: #d8f58b; }
.consent { font-size: 11px; color: #b0c3a9; }
.consent input { accent-color: var(--lime); }
.form-privacy { color: #94ab88; font-size: 10px; }
.form-privacy button:hover { color: #d8f58b; }
#project-dialog { width: min(1180px,calc(100% - 40px)); background: #14221b; border-radius: 6px; grid-template-columns: 1.3fr 1fr; }
.project-visual { background: #06100b; min-width: 0; min-height: 580px; }
.project-details { padding: 68px 38px 38px; min-width: 0; }
.project-details h2 { font-size: 31px; line-height: 1.2; }
.project-details>p:not(.eyebrow) { color: #b5c9ae; font-size: 13px; line-height: 1.95; max-height: 33vh; }
.project-tools { margin-top: 19px; gap: 24px; font-size: 12px; }
.project-tools button { border-color: #9fb68559; color: #cfddbe; }
.project-actions { margin-top: 26px; }
.project-actions>a { color: #98b28b; }
.slide-controls button { width: 44px; height: 44px; border: 1px solid #d4eebd6b; border-radius: 50%; background: #0d2014dc; }
.slide-controls span { background: #0d2014dc; border-radius: 20px; color: #dfedce; }
.permalink-label { color: #98ae8b; }
#project-permalink { color: #b5c9a8; }
.video-notice { background: #132817eb; border: 1px solid #bace9a36; border-radius: 4px; color: #d1e1c0; }
.video-notice button { border-radius: 3px; font-size: 12px; }
.empty-gallery { grid-column: 1/-1; padding: 70px 24px; border: 1px dashed #9ba98c88; border-radius: 4px; background: #fff4; }
.empty-gallery h3 { font-size: 23px; font-weight: 500; }
.empty-gallery p { font-size: 14px; }
.film-dialog { border-radius: 8px; overflow: hidden; }
@keyframes studio-arrive { from { transform: scale(1.045); opacity: .35; } to { transform: scale(1); opacity: 1; } }
@media (min-width: 1700px) {
  :root { --gutter: max(108px, calc((100vw - 1460px)/2)); }
  .hero-content { max-width: none; padding-right: var(--gutter); }
  .section { padding-inline: var(--gutter); }
}
@media (max-width: 1150px) {
  .header { inset: 16px 18px auto; width: calc(100% - 36px); height: 72px; padding-inline: 20px; gap: 20px; }
  .brand { width: 136px; }
  .header nav { gap: 20px; font-size: 11px; }
  .header-cta { padding-inline: 14px; font-size: 11px; }
  .header-cta span { margin-right: 15px; }
  .hero { height: 840px; min-height: 840px; }
  .hero-content { padding-top: 205px; width: 59%; }
  .hero h1 { font-size: 84px; }
  .hero-actions { gap: 18px; }
  .hero-actions .button { padding-inline: 19px; font-size: 12px; }
  .hero .text-link { font-size: 11px; }
  .hero-caption { bottom: 105px; min-width: 240px; }
  .hero-caption b { font-size: 15px; }
  .section { padding-block: 90px; }
  .service { min-height: 490px; padding: 27px 23px; }
  .service-grid { gap: 15px; }
  .service p { font-size: 12px; }
  .service-link { margin-top: 24px; }
  .gallery { gap: 30px 19px; }
  .project:first-child .project-photo { aspect-ratio: 1.55; }
  .project:nth-child(2) .project-photo { aspect-ratio: .735; }
  .project-meta h3 { font-size: 17px; }
  .project:first-child .project-meta h3 { font-size: 20px; }
  .approach { min-height: 800px; }
  .approach-copy { padding: 75px 10%; }
  .approach-photo { margin: 20px 20px 20px 0; }
  .approach h2 { font-size: 38px; }
  .comparison-grid article { padding: 30px 23px; }
  .comparison h3 { font-size: 25px; }
  .comparison dd { font-size: 12px; }
  .contact { gap: 6%; }
  .studio-info { padding-right: 12%; }
  .studio-info>a { font-size: 25px; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .header nav { gap: 13px; font-size: 10px; }
  .header { gap: 16px; padding-inline: 17px; }
  .header-cta span { margin-right: 8px; }
  .brand { width: 122px; }
  .brand b { font-size: 24px; }
  .brand small { font-size: 6px; letter-spacing: 4px; }
  .hero h1 { font-size: 73px; }
  .hero-caption { min-width: 225px; left: 4%; }
  .hero-caption b { font-size: 14px; }
  .hero-copy { font-size: 18px; }
  .section-heading { gap: 28px; }
  .section-heading>p, .section-heading>div>p:not(.eyebrow) { font-size: 13px; }
  .service-grid { gap: 11px; }
  .service { padding: 23px 18px; }
  .service h3 { font-size: 26px; }
  .service small { font-size: 7px; letter-spacing: 1px; }
  .service p { font-size: 11px; }
  .service-link { font-size: 10px; }
  .filters button { font-size: 10px; padding-inline: 12px; }
  .project-meta { display: block; }
  .gallery-search { padding: 22px; grid-template-columns: 1fr 1fr; }
  .gallery-search label { font-size: 17px; }
  .approach-copy { padding-inline: 8%; }
  .approach h2 { font-size: 32px; }
  .approach .intro { font-size: 19px; }
  .finder { gap: 7%; }
  .finder-choices button { font-size: 15px; }
  .comparison-grid article { padding-inline: 17px; }
  .comparison h3 { font-size: 22px; }
  .compare-goal { font-size: 12px; }
  .comparison .button { padding-inline: 15px; font-size: 11px; }
  .faq { gap: 5%; }
  .questions summary { font-size: 14px; }
  #project-dialog { width: calc(100% - 32px); }
  .project-details { padding-inline: 25px; }
  .project-details h2 { font-size: 26px; }
}
@media (max-width: 960px) and (min-width: 761px) {
  .header nav { display: none; position: absolute; top: 82px; right: -1px; left: -1px; padding: 18px 25px; background: #0c1914f7; border: 1px solid #d6e8cd31; border-radius: 6px; gap: 0; flex-direction: column; box-shadow: 0 24px 50px #0007; }
  .header nav.open { display: flex; }
  .header nav a { font-size: 15px; padding-block: 17px; border-bottom: 1px solid #d6e8cd1b; }
  .header nav a:last-child { border: 0; }
  .header nav a::after { display: none; }
  .header-cta { margin-right: auto; margin-left: 4px; }
  .menu-toggle { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #d6e8cd2e; border-radius: 4px; font-size: 21px; }
}
@media (max-width: 760px) {
  :root { --gutter: 22px; }
  html { scroll-padding-top: 99px; }
  .header { inset: 12px 12px auto; width: calc(100% - 24px); height: 66px; padding: 0 18px; border-radius: 6px; }
  .brand { width: 130px; }
  .brand b { font-size: 24px; }
  .brand small { font-size: 6px; letter-spacing: 4.4px; margin-top: 6px; }
  .header-cta { display: none; }
  .menu-toggle { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #d6e8cd2e; border-radius: 4px; font-size: 21px; }
  .header nav { top: 76px; right: -1px; left: -1px; padding: 16px 24px 20px; background: #0c1914f7; border: 1px solid #d6e8cd31; border-radius: 6px; gap: 0; box-shadow: 0 24px 50px #0007; }
  .header nav a { font-size: 15px; padding-block: 17px; border-bottom: 1px solid #d6e8cd1b; }
  .header nav a:last-child { border: 0; }
  .header nav a::after { display: none; }
  .hero { height: auto; min-height: 880px; max-height: none; }
  .hero::after { display: none; }
  .hero-image { width: 100%; height: 565px; object-position: 50% 66%; inset: 0 0 auto; animation-duration: .8s; }
  .hero-shade { background: linear-gradient(0deg, #0b1010 0%, #0b1010 29%, #0b1010eb 42%, #0b10102b 68%, #0b10103d 100%); }
  .hero-content { position: relative; top: auto; width: 100%; max-width: none; padding: 407px var(--gutter) 115px; display: block; }
  .hero .eyebrow { justify-content: flex-start; font-size: 8px; letter-spacing: 2px; padding: 0; }
  .hero h1 { font-size: clamp(58px, 15vw, 85px); line-height: 1.01; letter-spacing: -.05em; margin: 22px 0 18px; }
  .hero-copy { font-size: 17px; line-height: 1.6; }
  .hero-actions { margin-top: 25px; gap: 18px; flex-direction: row; align-items: center; }
  .hero-actions .button { font-size: 12px; padding: 15px 18px; min-height: 52px; gap: 18px; }
  .hero-actions .text-link { font-size: 11px; gap: 20px; padding-top: 0; }
  .hero-location { margin-top: 22px; font-size: 10px; }
  .hero-caption { top: 103px; bottom: auto; left: 23px; min-width: auto; padding: 12px 15px; gap: 5px; background: #0e181370; }
  .hero-caption span { font-size: 7px; letter-spacing: 1.3px; }
  .hero-caption b { font-size: 12px; }
  .hero-caption small { font-size: 6px; letter-spacing: .7px; }
  .scroll-note { right: var(--gutter); bottom: 24px; font-size: 9px; gap: 17px; }
  .hero-index { left: var(--gutter); bottom: 33px; font-size: 10px; }
  .hero-index span { font-size: 7px; letter-spacing: 1px; margin-left: 8px; }
  .ticker { gap: 12px; padding: 18px 22px; }
  .ticker span { font-size: 8px; letter-spacing: 1.2px; }
  .ticker span:nth-of-type(2), .ticker i:last-child { display: none; }
  .ticker i { font-size: 17px; }
  .section { padding: 76px var(--gutter); }
  .reels-experience { padding: 76px var(--gutter); }
  h2 { font-size: clamp(38px, 9.5vw, 52px); line-height: 1.14; letter-spacing: -.04em; margin-top: 17px; }
  .eyebrow { font-size: 8px; letter-spacing: 2px; }
  .section-heading { display: block; margin-bottom: 32px; }
  .section-heading>p, .section-heading>div>p:not(.eyebrow) { font-size: 13px; margin-top: 21px; line-height: 1.9; }
  .section-heading .text-link { font-size: 11px; margin-top: 17px; }
  .service-grid { grid-template-columns: 1fr; gap: 18px; }
  .service { min-height: 445px; padding: 29px 25px; }
  .service img { object-position: 50% 51%; }
  .service h3 { font-size: 35px; }
  .service small { font-size: 8px; }
  .service p { font-size: 13px; max-width: 300px; margin-top: 12px; }
  .service-link { font-size: 11px; margin-top: 21px; padding-top: 17px; }
  .service-num { width: 33px; height: 33px; top: 20px; left: 20px; }
  .service:hover { transform: none; }
  .gallery-search { padding: 20px; grid-template-columns: 1fr; gap: 11px; margin-bottom: 17px; }
  .gallery-search label { font-size: 17px; }
  .gallery-search input { grid-column: auto; grid-row: auto; min-height: 50px; font-size: 16px; padding-inline: 13px; }
  .gallery-search p { grid-column: auto; font-size: 10px; }
  .brand-shortcuts { gap: 8px 13px; margin-bottom: 20px; }
  .brand-shortcuts span { width: 100%; font-size: 9px; }
  .brand-shortcuts button { font-size: 10px; padding: 8px 2px; min-height: 44px; }
  .brand-shortcuts #saved-toggle { font-size: 10px; padding: 8px 13px; min-height: 44px; }
  .filters { gap: 7px; margin-bottom: 22px; padding-bottom: 18px; flex-wrap: wrap; }
  .filters button { font-size: 10px; padding: 10px 12px; min-height: 44px; }
  .filters>span { font-size: 10px; margin-top: 10px; width: 100%; }
  .gallery { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 27px 14px; }
  .project { grid-column: span 1; }
  .project:first-child { grid-column: span 2; }
  .project-photo, .project:nth-child(2) .project-photo { aspect-ratio: 3 / 4; }
  .project:first-child .project-photo { aspect-ratio: 1.2; }
  .project-meta { display: block; margin-top: 10px; }
  .project-meta h3 { font-size: 14px; line-height: 1.45; letter-spacing: -.25px; }
  .project:first-child .project-meta h3 { font-size: 20px; }
  .project:first-child .project-meta { display: flex; }
  .project-meta span { font-size: 9px; }
  .project-sub { font-size: 10px; margin-top: 4px; }
  .project-photo .arrow { width: 33px; height: 33px; font-size: 22px; left: 11px; bottom: 11px; }
  .project:first-child .project-photo .arrow { width: 42px; height: 42px; font-size: 25px; left: 16px; bottom: 16px; }
  .project-photo .play { width: 28px; height: 28px; top: 10px; right: 10px; font-size: 9px; }
  .load-more { margin-top: 33px; }
  .load-more .button { font-size: 12px; }
  .films { gap: 14px; }
  .film { aspect-ratio: 9 / 15.5; }
  .film>div { right: 15px; left: 15px; bottom: 19px; }
  .film h3 { font-size: 17px; }
  .film p { font-size: 10px; line-height: 1.8; margin-top: 5px; }
  .film-play { left: 13px; top: 13px; width: 33px; height: 33px; font-size: 10px; }
  .approach { display: flex; flex-direction: column-reverse; min-height: 0; }
  .approach-copy { padding: 76px var(--gutter) 20px; }
  .approach h2 { font-size: 38px; }
  .approach .intro { font-size: 22px; line-height: 1.75; margin-top: 25px; }
  .quote-source { font-size: 10px; }
  .steps { margin-top: 30px; }
  .steps>div { padding-block: 23px; gap: 24px; }
  .steps h3 { font-size: 17px; }
  .steps p { font-size: 12px; line-height: 1.9; }
  .approach-photo { height: 480px; margin: 16px var(--gutter) 28px; }
  .photo-label { left: 20px; bottom: 23px; font-size: 8px; }
  .finder { grid-template-columns: 1fr; gap: 35px; padding-block: 72px; }
  .finder>div>p:not(.eyebrow) { font-size: 13px; margin-top: 20px; }
  .finder-label { font-size: 12px; margin-bottom: 19px; }
  .finder-choices button { padding-block: 21px; font-size: 15px; }
  #recommendation { margin-top: 25px; }
  #recommendation h3 { font-size: 20px; }
  #recommendation p { font-size: 13px; }
  .comparison-grid { grid-template-columns: 1fr; }
  .comparison-grid article { padding: 30px 25px; }
  .comparison-grid article+article { border-right: 0; border-top: 1px solid #d4e7d52e; }
  .comparison-grid .compare-featured { background: #233723; }
  .comparison h3 { font-size: 28px; margin-top: 19px; }
  .compare-goal { min-height: 0; font-size: 13px; }
  .comparison dl { margin-top: 21px; margin-bottom: 26px; }
  .comparison dt { font-size: 11px; }
  .comparison dd { font-size: 13px; }
  .compare-note { font-size: 10px; line-height: 1.9; margin-top: 22px; }
  .faq { grid-template-columns: 1fr; gap: 32px; }
  .questions details { padding-block: 24px; }
  .questions summary { font-size: 15px; gap: 15px; line-height: 1.7; }
  .questions p { font-size: 12px; padding-left: 0; }
  .contact { grid-template-columns: 1fr; gap: 48px; }
  .contact h2 { font-size: clamp(43px, 11vw, 60px); }
  .contact>div>p:not(.eyebrow) { font-size: 13px; }
  .contact-actions { gap: 12px; margin-top: 28px; }
  .contact-actions .button { font-size: 12px; padding-inline: 20px; }
  .studio-info { border-right: 0; padding: 30px 0 0; border-top: 1px solid var(--line); }
  .studio-info>a { font-size: 27px; margin-top: 25px; }
  .studio-info>a span { margin-top: 8px; }
  .social { font-size: 11px; margin-top: 30px; }
  footer { padding: 20px var(--gutter) 110px; }
  .footer-wordmark { font-size: 16vw; }
  .footer-bottom { margin-top: 12px; padding-top: 22px; font-size: 8px; gap: 10px; }
  .footer-bottom button { font-size: 10px; margin-right: 12px; }
  .mobile-bar { z-index: 20; padding: 10px 15px max(10px,env(safe-area-inset-bottom)); border-top-color: #d4e8c624; background: #0a180fe8; gap: 10px; }
  .mobile-bar button { padding: 14px 12px; min-height: 46px; border-radius: 3px; font-size: 12px; background: var(--lime); color: #233e21; font-weight: 500; }
  .mobile-bar a { display: flex; align-items: center; padding: 12px 18px; border: 1px solid #bed4af4a; border-radius: 3px; font-size: 12px; }
  dialog { width: calc(100% - 22px); max-height: 90svh; padding: 43px 24px 29px; border-radius: 6px; }
  dialog .close { height: 44px; width: 44px; min-height: 44px; min-width: 44px; top: 12px; left: 12px; }
  dialog h2 { font-size: 37px; }
  form { gap: 19px 14px; }
  form input, form select { font-size: 16px; min-height: 51px; }
  form label { font-size: 11px; }
  .consent { line-height: 1.85; }
  .consent input { min-height: 0; }
  .form-privacy { font-size: 10px; line-height: 1.8; }
  #project-dialog { width: calc(100% - 20px); max-height: 92svh; border-radius: 6px; }
  #project-dialog .project-visual { min-height: 280px; }
  #project-dialog .project-visual>img { max-height: 60svh; }
  #project-dialog .project-visual>video { max-height: 65svh; }
  #project-dialog .close { top: 12px; left: 12px; background: #0a160fdd; }
  .project-details { padding: 29px 24px; }
  .project-details h2 { font-size: 29px; }
  .project-details>p:not(.eyebrow) { max-height: none; font-size: 13px; margin-top: 18px; }
  .project-tools { margin-top: 20px; gap: 25px; }
  .project-tools button { font-size: 12px; min-height: 42px; }
  .project-actions { gap: 18px; flex-wrap: wrap; margin-top: 23px; }
  .project-actions .button { min-height: 49px; font-size: 12px; padding: 13px 21px; }
  .project-actions>a { font-size: 10px; }
  .permalink-label { font-size: 10px; }
  #project-permalink { font-size: 11px; min-height: 40px; }
  .video-notice { padding: 18px; font-size: 12px; inset: auto 12px 12px; }
  .video-notice button { min-height: 42px; }
  .video-notice a { padding-top: 8px; font-size: 11px; }
}
@media (max-width: 380px) {
  :root { --gutter: 18px; }
  .hero-content { padding-top: 390px; }
  .hero h1 { font-size: 58px; }
  .hero-copy { font-size: 16px; }
  .hero-actions { gap: 16px; }
  .hero-actions .button { width: 100%; font-size: 12px; }
  .hero-caption { left: 18px; }
  .ticker span { font-size: 7px; letter-spacing: .8px; }
  .ticker { gap: 8px; padding-inline: 18px; }
  .brand-shortcuts { gap: 7px 11px; }
  .brand-shortcuts #saved-toggle { padding-inline: 10px; }
  .filters button { padding-inline: 9px; }
  .gallery { column-gap: 11px; }
  .project-meta h3 { font-size: 13px; }
  .project:first-child .project-meta { display: block; }
  .project:first-child .project-meta h3 { font-size: 18px; }
  .service { min-height: 420px; padding-inline: 23px; }
  .approach h2 { font-size: 34px; }
  .approach .intro { font-size: 20px; }
  .contact h2 { font-size: 43px; }
  .comparison h3 { font-size: 26px; }
  .gallery-search { padding: 17px; }
  .gallery-search label { font-size: 16px; }
  .project-tools { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none!important; transition: none!important; }
  html { scroll-behavior: auto; }
}
@media (prefers-contrast: more) {
  :root { --muted: #c5d3c6; --line: #ddebd26b; }
  .header { background: #08130ff5; border-color: #d1e2c599; }
  .eyebrow, .hero-location { color: #c5d3c6; }
  .project-meta span, .project-sub { color: #354c2c; }
  .gallery-search p, .brand-shortcuts span { color: #344e29; }
}