/* Erdemmedia 3.4: image-led, dark editorial layout; native CSS, no extra runtime. */
:root { --muted: #b3bcb4; --line: #354037; --section-space: clamp(68px, 8vw, 132px); }
.design-v340 h1, .design-v340 h2, .design-v340 h3 { overflow-wrap: break-word; }
.design-v340 p { text-wrap: pretty; }
.design-v340 .section { padding-block: var(--section-space); }
.design-v340 .section-title { font-size: clamp(56px, 6.7vw, 104px); }
.design-v340 .text-link, .design-v340 .world-link { min-height: 48px; }

/* The image has its own space; the dark field carries the type. */
.hero.hero-cinema { background: var(--bg); min-height: 760px; max-height: 1120px; }
.hero-cinema .hero-visual { left: 30%; }
.hero.hero-cinema::after {
  background: linear-gradient(90deg, #0b0e0d 0%, #0b0e0df5 29%, #0b0e0d85 55%, #0b0e0d10 85%),
    linear-gradient(0deg, #0b0e0def, #0b0e0d00 38%, #0b0e0d55 100%);
}
.hero-cinema .hero-content { padding-top: 128px; padding-bottom: 146px; }
.hero-cinema .hero-label { margin-bottom: 28px; font-size: 12px; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; color: #e8ecdf; }
.hero-cinema h1.display { font-size: clamp(110px, min(13.8vw, 21svh), 208px); line-height: .88; letter-spacing: -.025em; max-width: 100%; }
.hero-cinema .hero-copy-row { align-items: center; gap: 36px; margin-top: 32px; }
.hero-cinema .hero-description { max-width: 360px; font-size: 16px; line-height: 1.7; color: #dfe5db; }
.hero-cinema .hero-play .round-button { width: 80px; height: 80px; color: var(--text); border-color: #e6eddfb3; background: #0b0e0d55; }
.hero-cinema .hero-play:hover .round-button { color: var(--on-accent); background: var(--accent); }
.hero-cinema .hero-bottom { bottom: 25px; border-color: #ced6c848; }
.hero-cinema .hero-scene { font-size: 12px; }

.intro-band { grid-template-columns: minmax(170px, .7fr) minmax(0, 1.8fr); column-gap: 48px; row-gap: 26px; padding-block: clamp(64px, 7vw, 112px); }
.intro-band > .caps { color: var(--muted); max-width: none; font-size: 11px; padding-top: 11px; }
.intro-band > p:nth-child(2) { font-size: clamp(30px, 4vw, 60px); line-height: 1.18; letter-spacing: -.04em; }
.intro-band .text-link { color: var(--text); }

/* Category controls keep their behavior; photography and copy are now separate. */
.worlds { padding-top: var(--section-space); }
.worlds-heading { display: block; margin-bottom: 42px; }
.worlds-heading h2 { font-size: clamp(68px, 8vw, 124px); }
.worlds-heading > p { max-width: 460px; margin-top: 25px; padding: 0; font-size: 16px; }
.world-controls button { font-size: clamp(14px, 1.4vw, 19px); padding-block: 20px; color: #b3bcb4; }
.world-stage { display: grid; width: min(100% - var(--page-gutter) * 2, 1600px); margin: 24px auto 0; height: auto; min-height: 0; max-height: none; background: #141a17; overflow: visible; }
.world-panel { position: relative; inset: auto; grid-area: 1 / 1; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); min-width: 0; }
.world-panel:not([hidden]) { display: grid; }
.world-visual { position: relative; inset: auto; min-height: 480px; height: 100%; overflow: hidden; }
.world-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: none; }
.world-shade { display: none; }
.world-copy { position: static; inset: auto; max-width: none; padding: clamp(32px, 4vw, 64px); align-self: center; }
.world-copy > .caps { margin-bottom: 28px; font-size: 11px; }
.world-copy h3 { max-width: none; font-size: clamp(42px, 4.5vw, 68px); line-height: .99; margin-bottom: 24px; }
.world-copy > p:not(.caps) { color: var(--muted); max-width: 320px; font-size: 15px; line-height: 1.75; }
.world-link { margin-top: 24px; gap: 24px; border-color: #b6c1b7; }
.world-count { display: none; }
.world-panel.is-entering { animation: scene-copy .4s var(--cinema-ease); }
.world-panel.is-entering .world-copy { animation: none; }

/* A real commission gets a quiet, asymmetric photographic spread. */
.wome-feature { padding-top: var(--section-space); }
.wome-feature-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 6vw, 96px); align-items: end; margin-bottom: 40px; }
.wome-feature h2 { font-size: clamp(64px, 7.8vw, 118px); }
.wome-feature-head > div { max-width: 400px; }
.wome-feature-head p { font-size: 16px; line-height: 1.75; color: var(--muted); margin-bottom: 18px; }
.wome-feature-images { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 60px); align-items: start; }
.wome-feature-images figure { margin: 0; min-width: 0; }
.wome-feature-images figure:last-child { margin-top: 28%; }
.wome-feature-images a { display: block; overflow: hidden; background: var(--surface); }
.wome-feature-images img { display: block; width: 100%; height: auto; }
.wome-feature-images figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 16px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.wome-feature-images figcaption span:first-child { color: var(--text); }

.feature-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.film-caption { padding-top: 4px; }
.film-caption h3 { font-size: clamp(25px, 2.5vw, 38px); }
.film-caption small { display: block; margin-top: 8px; color: var(--muted); }
.production-camera { padding-top: var(--section-space); padding-bottom: 56px; }
.production-camera h2 { font-size: clamp(56px, 6.3vw, 96px); }
.production-camera .camera-kicker { color: var(--muted); font-size: 11px; }
.production-camera .camera-copy { max-width: 330px; }
.studio-promo { padding-block: var(--section-space); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 7vw, 112px); }
.studio-promo img { aspect-ratio: 5 / 4; object-position: 54% center; }
.studio-promo h2 { font-size: clamp(64px, 7vw, 104px); margin-bottom: 28px; }
.studio-promo .body-copy { font-size: 16px; }

/* Inner pages share a calmer type scale and clear hierarchy. */
.page-heading { padding-block: clamp(58px, 6vw, 96px) 60px; }
.page-heading h1, .gallery-heading h1 { font-size: clamp(76px, 9.2vw, 142px); line-height: .95; }
.page-heading > p:not(.caps) { max-width: 640px; font-size: 17px; line-height: 1.7; }
.gallery-heading { display: block; }
.gallery-heading > p { max-width: 540px; margin-top: 28px; }
.page-heading .caps { font-size: 11px; color: var(--muted); letter-spacing: .12em; }
.gallery-filters { backdrop-filter: none; background: #0b0e0d; }
.studio-intro { gap: clamp(32px, 7vw, 112px); }
.studio-intro h2 { font-size: clamp(56px, 6vw, 88px); }
.service-detail { grid-template-columns: minmax(0, .95fr) minmax(0, 1.5fr) minmax(0, .8fr); padding-block: 42px; gap: 36px; }
.service-detail h3 { font-size: clamp(24px, 2.3vw, 32px); line-height: 1.2; }
.service-detail p { font-size: 16px; line-height: 1.8; }
.service-detail ul { font-size: 13px; line-height: 1.8; }
.process-steps { gap: 32px; }
.process-step { border-top: 1px solid var(--line); padding-top: 25px; }
.process-step h3 { color: var(--text); }
.contact-direct h2 { font-size: clamp(30px, 3.1vw, 46px); line-height: 1.15; }
.brief-form { border: 1px solid var(--line); background: #141a17; border-radius: 0; }
.brief-form h2 { font-size: 30px; }
.form-field input, .form-field select, .form-field textarea { border-color: #606d63; background: #0e1310; border-radius: 0; }
.contact-banner p { font-size: 14px; color: var(--muted); }
.contact-banner h2 { font-size: clamp(62px, 8vw, 126px); }
.contact-banner > div { min-width: 0; }

@media (min-width: 768px) and (max-width: 1100px) {
  .world-panel { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .world-copy { padding: 28px; }
  .world-copy h3 { font-size: 43px; }
  .world-visual { min-height: 460px; }
  .service-detail { grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr); }
  .service-detail ul { grid-column: 2; }
  .hero-cinema h1.display { font-size: clamp(110px, 15vw, 168px); }
}
@media (max-width: 767px) {
  .hero.hero-cinema { min-height: 720px; height: 100svh; max-height: 1040px; }
  .hero-cinema .hero-visual { left: 0; }
  .hero.hero-cinema::after { background: linear-gradient(0deg, #0b0e0df5 0%, #0b0e0dcc 34%, #0b0e0d35 73%, #0b0e0d99 100%); }
  .hero-cinema .hero-content { padding-top: 135px; padding-bottom: 142px; }
  .hero-cinema .hero-label { max-width: 250px; font-size: 11px; margin-bottom: 25px; letter-spacing: .08em; }
  .hero-cinema h1.display { font-size: clamp(82px, min(21vw, 18svh), 140px); line-height: .91; }
  .hero-cinema .hero-copy-row { flex-direction: row; align-items: flex-end; gap: 20px; margin-top: 25px; }
  .hero-cinema .hero-description { max-width: 330px; font-size: 14px; line-height: 1.65; }
  .hero-cinema .hero-play { min-height: 56px; }
  .hero-cinema .hero-play .round-button { width: 56px; height: 56px; }
  .hero-cinema .hero-bottom { bottom: 25px; }
  .hero-cinema .hero-scene { font-size: 11px; }
  .intro-band { grid-template-columns: 1fr; gap: 24px; padding-block: 58px; }
  .intro-band > .caps { padding: 0; font-size: 10px; }
  .intro-band > p:nth-child(2) { font-size: clamp(30px, 7.5vw, 44px); }
  .intro-band .text-link { grid-column: 1; }
  .worlds-heading { margin-bottom: 26px; }
  .worlds-heading h2, .wome-feature h2 { font-size: clamp(60px, 15vw, 90px); }
  .worlds-heading > p { max-width: 440px; font-size: 15px; margin-top: 23px; }
  .world-controls { gap: 22px; }
  .world-controls button { font-size: 16px; padding-block: 18px; }
  .world-stage { margin-top: 18px; height: auto; min-height: 0; max-height: none; }
  .world-panel { grid-template-columns: minmax(0, 1fr); }
  .world-visual { min-height: 0; height: auto; aspect-ratio: 4 / 3; }
  .world-copy { padding: 32px 24px 36px; }
  .world-copy > .caps { margin-bottom: 18px; }
  .world-copy h3 { font-size: clamp(43px, 11.3vw, 64px); max-width: none; margin-bottom: 21px; }
  .world-copy > p:not(.caps) { max-width: 420px; font-size: 15px; }
  .world-link { font-size: 13px; margin-top: 22px; }
  .wome-feature-head { grid-template-columns: 1fr; gap: 26px; margin-bottom: 32px; }
  .wome-feature-head p { font-size: 15px; }
  .wome-feature-images { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .wome-feature-images figure:last-child { width: 82%; margin-top: 0; justify-self: end; }
  .wome-feature-images figcaption { font-size: 11px; padding-top: 12px; }
  .section-top { flex-wrap: wrap; align-items: end; }
  .design-v340 .section-title { font-size: clamp(54px, 13vw, 80px); }
  .section-top .text-link { font-size: 13px; }
  .feature-grid { grid-template-columns: minmax(0, 1fr); gap: 38px; }
  .film-caption h3 { font-size: 28px; }
  .production-camera h2 { font-size: clamp(52px, 13vw, 78px); }
  .studio-promo { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .studio-promo h2 { font-size: clamp(60px, 14vw, 88px); }
  .page-heading { padding-block: 58px 42px; }
  .page-heading h1, .gallery-heading h1 { font-size: clamp(48px, 12vw, 86px); }
  .page-heading > p:not(.caps) { font-size: 16px; margin-top: 24px; }
  .studio-intro h2 { font-size: clamp(52px, 13vw, 76px); }
  .service-detail { grid-template-columns: minmax(0, 1fr); padding-block: 32px; gap: 18px; }
  .service-detail ul { grid-column: auto; }
  .service-detail h3 { font-size: 27px; }
  .contact-layout { gap: 35px; }
  .contact-direct > a { font-size: clamp(20px, 5.5vw, 28px); overflow-wrap: anywhere; }
  .brief-form { padding: 28px 20px; }
  .brief-form h2 { font-size: 28px; }
  .contact-banner h2 { font-size: clamp(48px, 12.5vw, 76px); }
}
@media (max-width: 374px) {
  .hero-cinema .hero-copy-row { gap: 15px; }
  .hero-cinema .hero-description { font-size: 13px; }
  .hero-cinema h1.display { font-size: 80px; }
  .world-copy { padding-inline: 20px; }
  .world-copy h3 { font-size: 41px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cinema h1.display, .hero-cinema .hero-copy-row, .world-panel.is-entering { animation: none; }
}
@media print {
  .hero.hero-cinema { min-height: 0; height: auto; }
  .hero-cinema .hero-content { padding-block: 70px; }
  .world-visual { min-height: 260px; }
}