:root {
  --ink: #151412;
  --paper: #eeebe3;
  --orange: #dfc99b;
  --rust: #806441;
  --muted: #625b50;
  --line: #cfc8ba;
  --black: #10100f;
  --gold: #e1cb9c;
  --ivory: #faf4e9;
}
html { scroll-padding-top: 20px; }
.wrap { width: min(calc(100% - 116px), 1450px); }
.header { position: absolute; inset: 0 0 auto; z-index: 4; background: linear-gradient(#080807d9, #08080730); border: 0; }
.nav { min-height: 82px; border-bottom: 1px solid #ffffff42; }
.nav nav { gap: clamp(16px, 2.3vw, 39px); color: #f4ede0; }
.nav nav a:hover { color: var(--gold); }
.brand img { border: 1px solid #f4e2c060; }
.brand small { color: #ddd4c3; }
.pill { border-radius: 0; }
.pill.small { padding: 8px 13px; }
.hero {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0,1fr); align-items: end; justify-content: stretch;
  min-height: max(650px, 100svh); background: #131211; color: var(--ivory);
}
.hero::after { display: none; }
.reel-media, .reel-media::after, .reel-media img, .reel-media video { position: absolute; inset: 0; width: 100%; height: 100%; }
.reel-media { z-index: -2; overflow: hidden; }
.reel-media img, .reel-media video { object-fit: cover; object-position: center; }
.reel-media video { opacity: 0; }
.reel-media video.is-playing { opacity: 1; }
.reel-media::after { content: ""; background: linear-gradient(0deg,#080807f0 0%,#08080793 24%,#08080718 69%,#08080775),linear-gradient(90deg,#10100e61,transparent 68%); }
.hero-guides { position: absolute; pointer-events: none; z-index: -1; inset: 103px max(20px, calc((100% - 1450px) / 2)) 24px; border-inline: 1px solid #f0ead126; }
.hero-content { min-width: 0; display: grid; align-content: end; grid-template-rows: 1fr auto auto; min-height: inherit; padding-top: 106px; }
.reel-top, .reel-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.reel-top { align-self: start; padding-top: 16px; color: #f3ecdb; }
.reel-index { padding: 5px 8px; border: 1px solid #f4e8c860; }
.hero-title { align-self: end; padding-top: 105px; padding-bottom: 20px; }
.hero .title-kicker { display: flex; gap: 10px; align-items: center; color: #f0dfbb; }
.title-kicker span { display: inline-block; width: 27px; border-top: 1px solid var(--gold); }
.hero h1 { margin: 12px 0 5px; font-size: clamp(90px, 12vw, 190px); color: #f6f0e3; line-height: .86; letter-spacing: -.078em; }
.hero h1 em { color: var(--gold); }
.reel-bottom { padding: 15px 0 20px; border-top: 1px solid #f1e7d05e; }
.reel-bottom p { color: #ece4d5; font-size: 14px; }
.reel-explore { display: inline-flex; align-items: center; gap: 11px; white-space: nowrap; font-weight: 700; }
.reel-explore span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #f2e3c07d; border-radius: 50%; color: var(--gold); }
.reel-explore:hover span { background: var(--gold); color: var(--black); }
.reel-control, .motion-toggle { color: #f5e9d0; background: #10100f52; border: 1px solid #e6d9bd78; padding: 7px 11px; font-size: 12px; }
.reel-control:hover, .motion-toggle:hover { border-color: var(--gold); }
.studio-intro { background: var(--paper); border-bottom: 1px solid var(--line); padding: clamp(50px,8vw,125px) 0; }
.studio-intro-grid { display: grid; grid-template-columns: .35fr 1.5fr .42fr; gap: 30px; align-items: end; }
.intro-label { align-self: start; color: var(--rust); }
.intro-label span { display: block; color: var(--muted); margin-bottom: 5px; }
.studio-intro h2 { font-size: clamp(58px,7.4vw,112px); }
.studio-intro h2 em { color: var(--rust); }
.studio-intro p:not(.kicker) { color: var(--muted); max-width: 490px; margin-top: 20px; }
.intro-link { justify-self: end; display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--rust); font-weight: 650; white-space: nowrap; }
.credits { background: #e4dfd4; }
.credits-inner { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 20px; }
.credits .kicker { margin: 0; font-size: 9px; }
.credits li { font: 700 clamp(14px,1.5vw,20px)/1.2 var(--sans); }
.screening { background: var(--black); color: var(--ivory); }
.screening-head { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: end; padding-block: clamp(56px,8vw,112px) 34px; }
.screening-head>div:last-child { justify-self: end; color: #ddd4c7; }
.screening-head h2 em, .scene-copy h3 em { color: var(--gold); }
.screening .section-label, .scene-copy .kicker { color: var(--gold); }
.motion-toggle { margin-top: 12px; }
.motion-toggle[aria-pressed=true] span { color: var(--gold); }
.scene-list { background: #161411; }
.scene-step { display: grid; grid-template-areas: "shot"; min-height: max(520px, 86svh); overflow: clip; position: relative; border-bottom: 1px solid #e2cb9c61; }
.scene-visual { grid-area: shot; position: relative; min-width: 0; min-height: 100%; overflow: hidden; background: #171512; }
.scene-visual img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.scene-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,#0c0b0ad6,#0c0b0a27 73%),linear-gradient(0deg,#090807b2,transparent 60%); }
.scene-copy { grid-area: shot; align-self: end; position: relative; z-index: 1; padding-block: 75px 55px; }
.scene-copy .kicker span { margin-left: 9px; border-left: 1px solid #e9d6a78a; padding-left: 12px; }
.scene-copy h3 { font: 400 clamp(64px,10vw,154px)/.85 var(--serif); letter-spacing: -.075em; margin: 15px 0 21px; }
.scene-copy p:not(.kicker) { color: #ece4d7; }
.film-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; background: #171411ad; color: var(--ivory); border: 1px solid #f1e3bf7d; padding: 9px 13px; font-weight: 650; }
.film-link:hover { background: var(--gold); color: var(--black); }
.film-link span { font-size: 9px; }
.screening-footer { padding-block: 23px 38px; }
.screening-end { display: inline-flex; gap: 10px; color: #f3e3c3; border-bottom: 1px solid #d8bb81; padding-bottom: 5px; font-weight: 650; }
.screening :focus-visible { outline-color: var(--gold); }
.scene-motion .scene-visual { clip-path: inset(0 var(--scene-inset,0%)); perspective: 1200px; }
.scene-motion .scene-visual img { transform: translateY(var(--scene-drift,0%)) scale(var(--scene-scale,1.025)) rotateX(var(--scene-pitch,0deg)); }
@media(min-width:801px) {
  .scene-motion .scene-step { min-height: max(615px, 109svh); overflow: clip; }
  .scene-motion .scene-visual { position: sticky; top: 0; align-self: start; height: 100svh; min-height: 0; }
}
#isler { --muted: #c4baaa; --line: #efe0c439; --rust: #d5bc8c; width: auto; padding-inline: max(58px,calc((100% - 1450px) / 2)); background: #191713; color: var(--ivory); }
#isler .section-head h2 em { color: var(--gold); }
#isler .filter button { border-radius: 0; border-color: #efe0c44f; color: var(--ivory); }
#isler .filter button:hover { background: #fff1d326; }
#isler .filter button[aria-pressed=true] { color: var(--black); background: var(--gold); border-color: var(--gold); }
#isler .work-grid { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 31px 16px; }
#isler .work-card { grid-column: span 2; }
#isler .work-card:nth-child(-n+2) { grid-column: span 3; }
#isler:has(.filter [aria-pressed=true]:not([data-filter=all])) .work-card { grid-column: span 3; }
#isler .work-action { aspect-ratio: 1.6; }
#isler .work-card h3 { color: var(--ivory); }
#isler .work-action .play { border-radius: 0; }
.services { background: #e4dfd4; }
.service-grid { gap: 1px; background: var(--line); border: 1px solid var(--line); }
.service-grid article { background: var(--paper); }
.service-grid article>div { padding: 20px 19px 25px; }
.contact { background: linear-gradient(90deg,#10100fee,#10100fc9),url('media/istanbul.jpg') center/cover,#191713; }
.contact .section-label, .contact-links small, .contact h2 em { color: var(--gold); }
.footer { background: #10100f; }
@media(max-width:1000px) {
  .wrap { width: calc(100% - 64px); }
  #isler { padding-inline: 32px; }
  .hero h1 { font-size: clamp(76px,12.5vw,125px); }
}
@media(max-width:800px) {
  .hero { min-height: max(640px, 86svh); }
  .studio-intro-grid { grid-template-columns: 1fr; gap: 14px; }
  .intro-link { justify-self: start; }
  .intro-label span { display: inline; margin: 0 8px 0 0; }
  .credits-inner { grid-template-columns: 1fr; gap: 10px; }
  .credits .kicker br { display: none; }
  .scene-step { min-height: max(480px, 78svh); }
  .scene-copy { padding-bottom: 35px; }
}
@media(max-width:640px) {
  .wrap { width: calc(100% - 36px); }
  .nav { min-height: 0; }
  .nav nav { gap: 12px; justify-content: space-between; }
  .nav nav a { white-space: nowrap; font-size: 12px; }
  .brand img { width: 35px; height: 35px; }
  .pill.small { padding-inline: 8px; font-size: 11px; gap: 6px; }
  .hero { min-height: max(610px, 87svh); }
  .hero h1 { font-size: clamp(68px, 17vw, 104px); }
  .hero h1 em { display: block; }
  .hero-title { padding-top: 85px; }
  .hero-content { padding-top: 110px; }
  .hero-guides { inset: 103px 9px 14px; }
  .reel-top .kicker, .hero .title-kicker { font-size: 9px; }
  .reel-top { gap: 5px; }
  .reel-bottom { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
  .reel-bottom p { grid-row: 2; grid-column: 1/-1; font-size: 13px; }
  .reel-control { font-size: 11px; padding: 5px 6px; }
  .reel-explore { font-size: 13px; gap: 6px; }
  .reel-explore span { width: 28px; height: 28px; }
  .studio-intro h2 { font-size: clamp(48px,11vw,67px); }
  .screening-head { grid-template-columns: 1fr; }
  .screening-head>div:last-child { justify-self: start; }
  #isler { padding-inline: 18px; }
  #isler .work-grid { display: grid; grid-template-columns: 1fr; }
  #isler .work-grid .work-card { grid-column: auto; }
  .process { grid-template-columns: 1fr; gap: 13px; }
}
.scene-step:nth-child(n+2) .scene-visual img { scale: 1.16; }
#isler .work-card:nth-child(2) img, #isler .work-card:nth-child(3) img { scale: 1.12; }